@charset "utf-8";
/* CSS Document 320-640 */

/*--------------------------------------------------------------------

first

--------------------------------------------------------------------*/
.firstTitle{text-align: center; position: relative; z-index: 55; }
.firstTitle h2{ width: 100%; position: absolute; top: 5%; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
.first{ text-align: center; position: absolute; top: 0; left: 0}
.first img{max-width:398px; width: 70% }
.first p{margin: 0 8%; text-align: left}

/*--------------------------------------------------------------------

well

--------------------------------------------------------------------*/
.well{text-align: center; padding: 50px 0 30px; background: transparent;}
.well h2{line-height: 1.6; margin: 0 auto; text-align: left; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
.well ol{letter-spacing: normal; text-align: left; margin: 20px 8%; font-size:clamp(0.75rem, 0.688rem + 0.31vw, 0.813rem) }/*12-13*/
.well li{list-style-type: decimal; margin-bottom: 5px}
.well .text02{margin-bottom: 30px; letter-spacing: normal; font-size:clamp(1.063rem, 0.875rem + 0.94vw, 1.25rem)}/*17-20*/

/*--------------------------------------------------------------------

.pagemenu

--------------------------------------------------------------------*/
.pageBox{position: relative;}
.pageBox img{width: 70%; margin: 0 auto 50px 0; border-radius: 0 10px 10px 0}
.pagemenu{padding: 10px 0 10px 15px; border-radius: 10px 0 0 10px; position: absolute; right: 0; bottom: 28%; width: 60%; background: url("../img/doterra/bg.png") repeat}
.pagemenu ol{font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.pagemenu ol li{letter-spacing: normal; list-style-type: decimal; margin-left: 20px; }
.pagemenu ol li a{display:block;}
.pagemenu ol li a span{font-size:11px }
/*--------------------------------------------------------------------

.reason

--------------------------------------------------------------------*/
.reason{background: #fff; padding: 50px 8%; text-align: center}
.reason h2{line-height: 1.2; margin: 0 auto; text-align: left; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/
.reason h2 span{font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/

.reason .sc3{position:relative}
.reason .wakaa{position: absolute; top:15%; right: 0}


.reason h3 {position: relative; line-height: 1.6; text-align: left; font-size:clamp(1.5rem, 0.875rem + 3.13vw, 2.125rem)}/*24-34*/
.reason h3 img{width:22px; margin-bottom: 10px }
.reason h3 img:last-child{max-width: 255px; width: 60%; position: absolute; bottom: -15px; right: 0}
.reason .sc2 h3 img:last-child{ max-width: 285px;}
.reason .sc3 h3 img:last-child{margin-bottom: -30px ; max-width: 197px; z-index: 5}


.reason .text{text-align: left; margin: 30px 0}
.reason .mb50{margin-bottom: 50px}
.reason .sc2 h3{margin-bottom: 30px}
.reason .sc3 h3{margin: 80px 0 30px}

.reason .img img{border-radius: 10px}
.reason .sc3 .img{text-align: left}
.reason .sc3 .img img.i3{width:70% }
.reason .att{margin-top: 20px; letter-spacing: normal; text-align: right; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.reason .linka{text-align: left}



.ftt{padding: 70px 0; background: #fff}

@media screen and (min-width: 640px) {
.reason .wakaa{top: 18%}
.reason .waka{width: 175px; height: 175px;}
.reason .waka1 { width: 175px; height: 175px;}
.reason .waka2 {
    width: 42px;
    height: auto;
    top: 55px;
    left: 68px;
}
}
@media screen and (min-width: 1100px) {
.first{ padding-top: 40px}
.firstTitle h2{top: 15%;}
.first p{margin-top: 30px; line-height: 2}
.well ol{margin: 30px 18%;}
.reason{padding-top: 80px}
}