@charset "UTF-8";



.hero-img img {
  object-position: bottom;
}



/* ---------------------------------- 安心の保証 ---------------------------------- */  

#sec02 .sec-in {
  max-width: 1000px;
}



#sec02 .flex {
  gap: 3em;
  margin-bottom: 1em;
}

#sec02 .flex-item {
  position: relative;
  width: calc(100% / 2 - 1.5em);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50vw;
  text-align: center;
}
#sec02 .flex-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  z-index: -1;
  width: 100%;
  height: auto;
  aspect-ratio: 1 /1 ;
  background-color: #fff;
  border-radius: 50vw;
  box-shadow: 0 0 2em rgba(52, 119, 30, 0.5);
}

#sec02 .flex-item .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
  max-width: 300px;
  height: 100%;
  margin: 0 auto;
}

#sec02 .flex-t {
  margin-bottom: 1.5em;

  opacity: 0;
  filter: blur(10px);
  transition: 1s ease all;
}
#sec02 .flex-t.active {
  opacity: 1;
  filter: blur(0);
}

#sec02 h4 {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1;
  color: #1F550E;
}


#sec02 .flex-t p {
  position: relative;
  display: inline-block;
}

#sec02 .flex-t p::before,
#sec02 .flex-t p::after {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(150% , -50%);
  content: "";
  width: 2em;
  height: 1px;
  background-color: #333;
}

#sec02 .flex-item2 .flex-t p::before,
#sec02 .flex-item2 .flex-t p::after {
  display: none;
}

#sec02 .flex-t p::before {
  left: auto;
  right: 0;
  transform: translate(-150% , -50%);
}

#sec02 .item-cnt p {
  font-size: .8em;
  font-size: min(1.56vw , 18px);
} 

#sec02 .cnt-t {
  font-size: 1.2em;
  background-color: #E9E6D4;
}




#sec02 .item-cnt {
  margin-bottom: 1em;

  opacity: 0;
  filter: blur(10px);
  transform: translateY(1em);
  transition: 1s ease all;
}
#sec02 .item-cnt.active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

#sec02 .item-cnt:last-child {
  margin-bottom: 0;
}

#sec02 .text-box p::before {
  content: '';
  display: inline-block;
  transform: translateY(-15%);
  width: .6em;
  height: .6em;
  margin-right: .5em;
  border-radius: 50vw;
  background-color: #34771E;
}


#sec02 .text-box {
  text-align: left;
  width: 85%;
  margin: 0 auto;
}


#sec02 .note {
  text-align: right;
}



/* ---------------------------------- お子様安心レンズ保証 ---------------------------------- */  


#sec03 .sec-in {
  position: relative;
  /* background-color: #fff; */
  padding: 2em;
}
#sec03 .sec-in::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #fff;
  clip-path: polygon(
      8% 0%,            /* ① 削り始めの上の点 */
      8% 25%,           /* ② 削り終わりの内側の角（横幅の10%分だけ下に下げる） */
      0% 25%,           /* ③ 削り終わりの左端の点 */
      0% 100%,           /* ④ 左下の角 */
      100% 100%,         /* ⑤ 右下の角 */
      100% 0%            /* ⑥ 右上の角 */
    )
}

#sec03 .sec-in::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 8%;
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: #D9E785;
  clip-path: polygon(100% 0, 100% 100%, 0% 100%);
}

#sec03 .sec-in .bg {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(2em , 2em);
  z-index: -2;
  width: 100%;
  height: 100%;
  background-color: #D9E785;
  clip-path: polygon(
      8% 0%,            /* ① 削り始めの上の点 */
      8% 25%,           /* ② 削り終わりの内側の角（横幅の10%分だけ下に下げる） */
      0% 25%,            /* ③ 削り終わりの左端の点 */
      0% 100%,           /* ④ 左下の角 */
      100% 100%,         /* ⑤ 右下の角 */
      100% 0%            /* ⑥ 右上の角 */
    )

}

#sec03 .deco-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-10% , 50%);
  width: 6vw;
  max-width: 84px;
}

#sec03 h3 {
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6em;
  color: #34771E;
  text-align: center;
  font-weight: 700;
  margin-bottom: .5em;
  line-height: 1.5;
}

#sec03 h3 span {
  display: inline-block;
}



#sec03 .text-box {
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
}


#sec03 .text-box p {
  margin-bottom: 1em;
  padding: 0 2em .5em 2em;
  border-bottom: 1px #D9D9D9 solid;

  opacity: 0;
  transform: translateY(1em);
  transition: .5s ease all;
}
#sec03 .text-box p.active {
  opacity: 1;
  transform: translateY(0);
}

#sec03 .text-box p span {
  display: inline-block;
}

#sec03 .text-box p::before {
  content: '';
  display: inline-block;
  transform: translateY(-15%);
  width: .6em;
  height: .6em;
  margin-right: .5em;
  border-radius: 50vw;
  background-color: #34771E;
}




/* ---------------------------------- メンテナンス ---------------------------------- */  

#sec04 h3 {
  color: #F5F3E9;
}
#sec04 h3 span {
  display: inline-block;
}

#sec04 .sec-title {
  transform: translateY(1.1em);
  margin: 0 auto;
}

#sec04 .sec-in {
  max-width: 1920px;
  width: 100%;
}

#sec04 .item {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 2em;
  padding: 2em 0;

  opacity: 0;
  transform: translateX(-1em);
  transition: 1s ease all;
}
#sec04 .item.active {
  opacity: 1;
  transform: translateX(0);
}

#sec04 .item.item2 {
  transform: translateX(1em);
  transition: 1s ease all;

}


#sec04 .item-in {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

#sec04 .item-in .text-box {
  width: 65%;
  max-width: 500px;
}
#sec04 .item:nth-child(even) .item-in .text-box {
  margin-left: auto;
}

#sec04 .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 70%;
  max-width: 1200px;
  height: 100%;
  background: #E9E6D4;
}
@media screen and (min-width: 1440px){
    
    #sec04 .bg  {
        background: linear-gradient(
            to right, 
            rgba(255, 255, 255, 0) 0%,
            #E9E6D4 40%,
            #E9E6D4 100%
        );
    }

    #sec04 .item:nth-child(even) .bg {
        background: linear-gradient(
            to left, 
            rgba(255, 255, 255, 0) 0%,
            #E9E6D4 40%,
            #E9E6D4 100%
        );
    }
    
}



#sec04 .item:nth-child(even) .bg {
  left: auto;
  right: 0;
} 

#sec04 .bg p {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50% , -10%);
  font-size: 6.6em;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #34771E;
}
#sec04 .item:nth-child(even) .bg p {
  right: auto;
  left: 0;
  transform: translate(-50% , -10%);
}

#sec04 h4 {
  font-size: 1.6em;
}
#sec04 .item:nth-child(even) h4 {
  text-align: right;
}




/* ---------------------------------- よくある質問 ---------------------------------- */  

#sec05 {
  background-color: #1F550E;
}


#sec05 h3 {
  margin-bottom: 1em;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6em;
  font-weight: 700;
  color: #fff;
  text-align: center;
}


#sec05 .faq-item-q {
  position: relative;
  border-radius: 50vw;
  border: 0 #1F550E solid;
  border-bottom: .2em #1F550E solid;
  padding: .8em 3em .8em 2em;
  z-index: 2;
  align-items: center;
  cursor: pointer;
}

#sec05 .faq-item-q::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: -1;
  background-color: #fff;
  opacity: 1;
}
#sec05 .faq-item:not(.is-active) .faq-item-q::before {
  opacity: 0;
  transition: .2s .2s  ease all;

}







/*768px以下*/
@media screen and (max-width: 768px){

  .hero-img .inner h2 {
    transform: translate(0 , 8%) !important;
  }

/* ---------------------------------- 安心の保証 ---------------------------------- */  

  #sec02 .flex {
    flex-wrap: wrap;
  }

  #sec02 .flex-item {
    width: 100%;
  }

  #sec02 .item-cnt p {
    font-size: 1em;
  }

  #sec02 .flex-t {
    margin-bottom: 1em;
  }

  #sec02 .sec-in {
    max-width: 600px;
  }



/* ---------------------------------- お子様安心レンズ保証 ---------------------------------- */  

  #sec03 .text-box p {
    margin-bottom: .5em;
    padding: 0 0 .5em 0;
  }

  #sec03 .sec-in {
    max-width: initial;
    padding: 2.5em 2em 2em 2em;
  }

  #sec03 .sec-in::after {
    width: 10vw;
  }

  #sec03 .sec-in::before {
    /* background-color: #eee; */
    clip-path: polygon(
      10vw 0%,            /* ① 削り始めの上の点 */
      10vw 10vw,           /* ② 削り終わりの内側の角（横幅の10%分だけ下に下げる） */
      0% 10vw,           /* ③ 削り終わりの左端の点 */
      0% 100%,           /* ④ 左下の角 */
      100% 100%,         /* ⑤ 右下の角 */
      100% 0%            /* ⑥ 右上の角 */
    )
  }


  #sec03 .deco-1 {
    width: 25%;
  }


/* ---------------------------------- メンテナンス ---------------------------------- */  

  #sec04 .item-in .text-box {
    width: 90%;
  }

  #sec04 .bg {
    width: 90%;
  }

  #sec04 .item {
    padding: 3.5em 0 2em 0;
  }

  #sec04 .bg p {
    transform: translate(25% , -10%);
  }

  #sec04 .item:nth-child(even) .bg p {
    transform: translate(-25% , -10%);
  }

}





@media screen and (max-width: 440px){
  #sec03 .sec-in::after {
    width: 15vw;
  }

  #sec03 .sec-in::before {
    clip-path: polygon(
      15vw 0%,            /* ① 削り始めの上の点 */
      15vw 15vw,           /* ② 削り終わりの内側の角（横幅の10%分だけ下に下げる） */
      0% 15vw,           /* ③ 削り終わりの左端の点 */
      0% 100%,           /* ④ 左下の角 */
      100% 100%,         /* ⑤ 右下の角 */
      100% 0%            /* ⑥ 右上の角 */
    )
  }


}