@charset "UTF-8";
.about ul{margin-bottom:3%;}
.about li{position:relative;padding:0 0 0 5%;}
.about li:before{content: '\f058';font-family: 'icon';position:absolute;left:0;color:var(--gold);}
.effect .subtit{font-family: var(--mincho);font-weight: 600;color:var(--gold);font-size:130%;margin-bottom:0;}

.reason{ margin-bottom: 10vw}
.reason .textbox{margin-bottom:5vw;}
.reason .textbox ul{margin: 6vw auto;}
.reason .textbox li{margin-bottom:1.6vw;text-indent: -0.6em;padding-left: 0.6em; }
.reason .textbox li:before{content:"・";}

.syosai .midashi03{margin:10% 0 0 0;}
.syosai li{background:#fff;padding: 6%;margin-bottom: 6%;}
.syosai li .title{font-family: var(--mincho);font-weight: 600;font-size: 5.2vw;text-align:center;line-height: 1.4;margin-bottom: 4%;color: var(--gold);}
.syosai li > img{width:80%;margin:0 auto 5%;}
.syosai .babox{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;margin: 5% auto 0;}
.syosai .babox .tit{font-size:4.5vw;font-weight:bold;background:#efeae1;width:100%;text-align:center;margin-bottom:1%;}
.syosai .babox img{margin-bottom:2%;}
.syosai .babox .set{width: 48%;text-align:center;position:relative;}
.syosai .babox .set:nth-last-child(1):before{content:"▶︎";position:absolute;top: 28%;left: -9%;color: #d0b070;}
.syosai .step{margin:5vw auto 0;}
.syosai .step .sub{border-top:1px solid #ccc;border-bottom:1px solid #ccc;text-align:center;padding:1%;font-weight:bold;}
.syosai .step li{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;padding: 0;align-items: start;}
.syosai .step li img{width:30%;margin: 0;}
.syosai .step li .textbox{width:65%;}
.syosai .step li span{background:#efeae1;padding:0 4vw;border-radius:40px;margin-bottom:1vw;display:table;}

/* ============================================= pc
================================================*/
@media screen and (min-width: 736px) { 
.subhero{background: url(../../../images/menu/skin/toning-spot/pc-subhero.jpg) center right -380px;padding: 225px 0;background-size: cover;}
.about ul{display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.about li{width: 49%;padding: 0 0 0 18px;margin: 0 0 6px 0;}
.effect img {width:100%;margin-bottom:20px;}
	
.reason{margin-bottom: 60px;}
.reason .textbox{margin: 0 auto 4%;width: 100%;}
.reason .textbox ul{margin: 20px auto;}
.reason .textbox li{margin-bottom: 6px;}
.reason .textbox li:before{content:"・";}

.syosai li{padding: 60px;position:relative;}
.syosai li > img{width: 40%;max-width: 480px;margin-bottom: 39px;}
.syosai li .title{font-size:30px;margin-bottom: 20px;}
.syosai .babox{-webkit-justify-content: center;justify-content: center;margin-top: 30px;}
.syosai .babox .set{width:45%;max-width:450px;margin:10px 15px;}
.syosai .babox .tit{font-size:20px;padding: 6px;}
.syosai .babox .set:nth-last-child(1):before{top: 39%;font-size: 120%;left: -25px;}
.syosai .step{margin-top:40px;}
.syosai .step ul{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.syosai .step li{width:32%;background: #faf6ef;padding:30px;margin-bottom: 0;}
.syosai .step .sub{font-size:20px;}
.syosai .step p{font-size:85%;text-align:left;}

}

@media screen and (min-width: 1000px) {	
.effect .box{margin-top:0;}
.syosai li {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;margin-bottom: 30px;}
.syosai li > img{margin: 0;width: 30%;order: 2;}
.syosai li .title{width:100%;}
.syosai li > .textbox{width: 65%;order: 1;}
.syosai .babox,.syosai .step{order:3;}

}

@media screen and (min-width: 1200px) {
.subhero{background: url(../../../images/menu/skin/toning-spot/pc-subhero.jpg) center top;background-size: 2000px;}
}
  /* retina用 ----------------------------------------------- */ 
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
.subhero{background: url(../../../images/menu/skin/toning-spot/pc-subhero@2x.jpg) center right -380px;background-size: cover;}
}
@media screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 1200px) and (min-resolution: 2dppx) { 
.subhero{background: url(../../../images/menu/skin/toning-spot/pc-subhero@2x.jpg) center top;background-size: 2000px;}
}