section, div {
   display: block;
}

div, section, span, figure{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

dl, dt, dd {
   list-style: none;
}

section {
   position: relative;
}

.bg-green {
   background-color: #DEEDDF;
}

section.contents {
   padding: 100px 0;
   margin-top: -30px;
}

.inner {
   max-width: 1200px;
   margin: 0 auto;
}

.inner.s {
   max-width: 1100px;
}

h3 {
   display: block;
   font-size: 1.17em;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   font-weight: bold;
}

.contents .sec-header .sec-title {
   margin-bottom: 50px;
   text-align: center;
   font-weight: bold;
   line-height: 1.0;
}

.contents .sec-header .sec-title>span:nth-of-type(1):before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 0;
   display: block;
   width: 100%;
   height: 7px;
   background-color: #DEEDDF;
}

.bg-green .sec-header .sec-title span:nth-of-type(1):before {
   background-color: #FFFFFF;
}

h3 {
   font-size: 1.17em;
   font-weight: bold;
}

.contents .sec-header .sec-title>span:nth-of-type(1) {
   position: relative;
   display: inline-block;
   padding-bottom: 3px;
   letter-spacing: 0.1em;
   font-size: 40px;
}

.contents .sec-header .sec-title>span:nth-of-type(1) span {
   position: relative;
   z-index: 10;
}

.flex {
   display: flex;
   
   
}

.contents .sec-header .sec-title span:nth-of-type(2) {
   display: block;
   margin-top: 1em;
   font-size: 12px;
}

/* .flex {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
} */

.contents .img-box {
   flex-direction: row-reverse;
   align-items: flex-start;
}

figure {
   display: block;
   margin-block-start: 1em;
   margin-block-end: 1em;
}

.contents .img-box .img {
   width: 316px;
}

.flex img {
   display: block;
   width: 100%;
   height: auto;
   padding: 0;
   margin: 0;
   
   border: none;
} 

.ofi {
   width: 100%;
   height: 100%;
   object-fit: cover;
   font-family: 'object-fit: cover;';
}

.contents .img-box .box {
   width: calc(100% - 316px);
   padding: 45px 50px 50px;
   margin-top: 50px;
   background-color: #DEEDDF;
}

.contents.bg-green .img-box .box {
   background-color: #FFFFFF;
}

dl {
   display: block;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
}

.contents .img-box .box-dl dt {
   display: inline-block;
   margin-bottom: 1em;
   font-size: 34px;
   font-weight: bold;
   background: linear-gradient(transparent 70%, #FFFFFF 70%);
}

.contents.bg-green .img-box .box-dl dt {
   background: linear-gradient(transparent 70%, #DEEDDF 70%);
}

dd {
   display: block;
   margin-inline-start: 40px;
}

.txt {
   text-align: justify;
   line-height: 1.75;
   letter-spacing: 0.1em;
}

@media screen and (max-width: 959px){
   section.contents {
      padding: 50px 0;
   }

   .inner {
      width: 90%;
   }
   
   .contents .sec-header .sec-title {
      margin-bottom: 36px;
  }
  
  .contents .sec-header .sec-title>span:nth-of-type(1) {
   font-size: 18px;
}
   .contents .img-box {
      display: block;
      position: relative;
      padding-top: 85px;
  }

  .contents .img-box .img {
   position: absolute;
   top: 0;
   left: 50%;
   width: 170px;
   -webkit-transform: translate(-50%,0);
   transform: translate(-50%,0);
   }

   .contents .img-box .box {
      width: 100%;
      padding: 116px 20px 36px;
      margin-top: 0;
  }

  .contents .img-box .box-dl {
   text-align: center;
   }

   .contents .img-box .box-dl dt {
      font-size: 22px;
   }

   .contents .sec-header .sec-title>span:nth-of-type(1) {
      font-size: 22px;
   }

   .contents .img-box img:nth-child(2) {
      display: none;
   }
   
}

@media screen and (max-width: 1199px){
   .inner, .inner.s {
      max-width: 1000px;
   }

   section.contents {
      margin-top: 0px;
   }

}