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

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

h2first

--------------------------------------------------------------------*/
.h2first{text-align: center}
.h2first .cla1{ width: 51px}
.h2first .tit{position: relative; justify-content: space-between; display: flex; margin-left:8%; margin-right: 8%}
.h2first .time {width: 40% ; text-align: left}
.h2first .time span{ font-size:clamp(1.875rem, 1.625rem + 1.25vw, 2.125rem) }/*30-34*/
.h2first .time .big{width:171px; position: absolute; left:-35px;top: -45px; }
.h2first .time .wah{width: 24px ; vertical-align: middle; top: -5px; position: relative;}
.h2first .tit h2{text-align:left ; width: 60%; font-size:clamp(1.625rem, 1.375rem + 1.25vw, 1.875rem) }/*26-30*/
.h2first .come{letter-spacing: normal; font-weight: 800 ;  position: relative; z-index: 1; font-size:clamp(1.188rem, 1.063rem + 0.63vw, 1.313rem)}/*19-20*/


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

.first

--------------------------------------------------------------------*/
.first{position: relative; padding-top: 20px ;  }
.first .fade1{ margin: -20px 5% 0}
.first .text{position: absolute; left: 0; bottom: 12%; text-align: left ; overflow-x: hidden;}
.first .text p{display: inline-block ; background: url("../img/touka.png") repeat; padding: 0 10px ; font-size:clamp(1.625rem, 1.375rem + 1.25vw, 1.875rem)}/*26-30*/
.first .wa .wa01{width:135px; position: absolute; right:16%; top: 91%;}
.first .wa .wa02{width:181px; position: absolute; right: 10%;top:85% ; animation:8s linear infinite rotation1; z-index: 3}


.info{margin: 50px 0}
.info .topi{margin: 0 8% 50px}
.info .topi img{filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8)); transition: 0.3s}
.info .topi a:hover img{filter: none}

.mokuflex{display: flex; justify-content: space-between; padding: 0 8% 50px ;align-items: flex-start; /* 追加 */}
.mokuflex img{width: 30%;}
.mokuflex ul{width: 68%}
.mokuflex li{ margin-left: 20px ; border-bottom: 1px dashed #674330;}
.mokuflex a{color:#674330; display: block; padding: 8px 0;  }
.mokuflex a:hover{background: #fff}
.mokuflex a:first-child{padding-top: 0}
/*--------------------------------------------------------------------

.first

--------------------------------------------------------------------*/
.first2{text-align: center ; overflow-x: hidden;}
.first2 .text01{line-height: 2.4 ; margin: 20px 0; font-size:clamp(1.125rem, 1rem + 0.63vw, 1.25rem)}/*18-20*/


.prob {text-align: center ; position: relative}
.prob .fukibo{line-height: 1.4; padding: 20px;}

.prob .kon{ position: absolute; left: 50%; width:102px; top: -15px; z-index: 5; margin-left: -180px }
.prob ul{display: flex; justify-content: space-between; flex-wrap:wrap ;align-items: flex-start;}
.prob ul li{line-height: 1.6; width: 48%; background: #fff; border-radius: 10px; position: relative; padding: 10px 0 ; letter-spacing: normal; margin-bottom: 25px; font-weight: 600}
.prob ul li:before {  
  content: "";
  position: absolute;
  left: -18px;
  width: 13px;
  height: 12px;
  bottom: -15px;
  background: #fff;
  border-radius: 50%;
}

.prob ul li:after {
  content: "";
  position: absolute;
  left: -5px;
  width: 20px;
  height: 18px;
  bottom: -5px;
  background: #fff;
  border-radius: 50%;
}
.prob ul li:first-child{margin-left: 5%; width: 52%; margin-top: 10px}
.prob ul li:nth-child(2){margin-right: 5%; width: 31%}
.prob ul li:nth-child(3){margin-left: 3%; width: 42%}
.prob ul li:nth-child(4){margin-right: 3%; margin-top: -12px }
.prob ul li:nth-child(5){margin-left: 5%; width: 52% }
.prob ul li:nth-child(6){margin-right: 5%; width: 32%; margin-top: -12px  }

.prob ul li:first-child:before , .prob ul li:nth-child(3):before,.prob ul li:nth-child(4):before ,.prob ul li:nth-child(5):before{left: 8px;  bottom: -16px;}
.prob ul li:first-child:after , .prob ul li:nth-child(3):after,.prob ul li:nth-child(4):after,.prob ul li:nth-child(5):after{left: 20px;  }


.sclo{margin-top: 50px}
/*--------------------------------------------------------------------

.maku

--------------------------------------------------------------------*/
.maku{height: 200px ; background: #fff; margin-bottom: 80px ; }
.maku .ma1{width: 274px; position: absolute; top: 50px; left: 50%; margin-left: -137px; z-index: 3}
.maku .ma2{width: 180px; position: absolute; top: 10%; left: 50%; margin-left: -90px; z-index: 3}

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

flow

--------------------------------------------------------------------*/
.flow {text-align: center ; position: relative; padding-top: 50px}

.flow .fukibo{margin-bottom: 10px}

.flow .img01 img {width: 199px; margin-bottom: 20px}
.flow .cat{width:103px; position: absolute; right: 6%; top: 0px ; z-index: 2}
.flow .flowtext{line-height: 2 ;  margin-bottom: 30px ; font-size:clamp(1.25rem, 0.938rem + 1.56vw, 1.563rem)}/*20-25*/
.flow .text{text-align: left; margin: 0 8% 50px}
.flow .bgfff{background: #fff}

.flow .time{margin-bottom: 50px}
.flow .time span{ font-size:clamp(1.875rem, 1.625rem + 1.25vw, 2.125rem) }/*30-34*/
.flow .time .big{width:171px; position: absolute; left:-35px;top: -45px; }
.flow .time .wah{width: 24px ; vertical-align: middle; top: -5px; position: relative;}

.flow .pic {position: relative ; margin: 0 0 20px 8%}
.flow .pic .wah{width:88px; position:absolute ; left:-5%; top: -50px}
.flow .pic li img{border-radius: 30px 0 0 30px}

.flow .pictext{line-height: 1.3 ; position: absolute; left: 0; top: 54%; text-align: left; font-size:clamp(1.25rem, 0.875rem + 1.88vw, 1.625rem)}/*20-26*/
.flow .pictext span{background: url("../img/touka.png") repeat; display: inline-block; padding: 0 10px 4PX 0;}

.flow .come{text-align: left; padding: 0 8% 20px}
.flow .img02 {margin: 0 4% 10px 8%}
.flow .img02 img { max-width:411px; }
.flow .flow2 .img02 img { max-width:415px; }
.flow .flow3 .img02 img { max-width:413px; }
.flow .text02{text-align: left; padding: 0 8% 30px}
.flow .flow2 .text02{padding-bottom: 80px}
.flow .text02 span{font-weight: 900}


.flow dl{display: flex; justify-content: space-between; margin: 0 4% 100px 0}
.flow .flow3 dl{margin-bottom: 0 ; padding-bottom: 80px}
.flow dt{width:52% }
.flow dt img{border-radius: 0 10px 10px 0}
.flow dd{width:44%; border: 1px solid #fbc2bc; border-radius: 10px; padding: 3%; text-align: left; position: relative}
.flow dd:before {  
  content: "";
  position: absolute;
  left: -24px;
  width: 13px;
  height: 12px;
  top: 20%;
  background: #fbc2bc;
  border-radius: 50%;
}

.flow dd:after {
  content: "";
  position: absolute;
  left: -10px;
  width: 20px;
  height: 18px;
  top: 5%;
  background: #fbc2bc;
  border-radius: 50%;
}

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

voice

--------------------------------------------------------------------*/
.voice {text-align: center;padding: 50px 0 0}
.voice .hoshi{width: 142px}
.voice .text01{margin-bottom: 30px; font-size: clamp(1.25rem, 0.875rem + 1.88vw, 1.625rem);}/*20-26*/
.voice .cya{background: #f9f3ed; padding-bottom: 50px}
.voice .date{margin-top: -5px; font-size: 11px; position: absolute; right: 0; top: 0; background: #f9f3ed; padding: 0 15px 5px; border-radius: 0 0 0px 10px}
.voice li{background: #fff; padding:40px 15px 30px ; position: relative ; border-radius: 20px}
.voice li dl{display: flex; justify-content: space-between}
.voice li dt{width: 30%}
.voice li dt img{border-radius: 10px}
.voice li dd{width: 65%; text-align: left}
.voice li h3{line-height: 1.6}
.voice .slic .slick-prev:before, .voice .slic .slick-next:before{color:#674330 }
.voice .slick-slide{margin: 0 10px}
.voice .slic .slick-prev, .slic .slick-next{z-index: 99}

.voice  .morebtn{margin-top: 20px;
  padding: 5px 50px;
  font-size:18px; 

}


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

.sk

--------------------------------------------------------------------*/
.sk{background: #fff; text-align: center; padding: 70px 8%}
.sk .tax{text-align: right; }
.sk table{ width: 100%; font-size: 15px; line-height: 1.3; margin-bottom: 50px}
.sk table.bij{margin-bottom: 0}

.sk table,.sk td,.sk th {
    border-collapse: collapse;
    border:1px solid #eae4e4;
    padding: 10px 
    }
.sk table .c01{background:#f5afa6 ; color: #fff }
.sk table .textr{text-align: right}
.sk table .textl{text-align: left}
.sk table span{letter-spacing: normal}
.sk table i{font-size: 11px ; line-height: 1.4; display: block}
.sk table .bgc{background: #fff5f2}



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

.体験レッスン

--------------------------------------------------------------------*/
.curved3 {background: url( "../img/maru3.png") no-repeat top center #fff; background-size: 100%}
.curved3 .try{text-align: center ; position: relative; padding-top: 50px}
.curved3 .try .dag{width:110px; position: absolute; left: 5%; top: -5px; z-index: 1 }
.curved3 .pi{background: #fff5f2}
.curved3 .maku{background: none; height: 110px }
.curved3 .fukibo{line-height: 1.6; font-size:clamp(1.625rem, 1.188rem + 2.19vw, 2.063rem) }/*26-33*/
.curved3 .fukibo:after{top:98%}

.curved3 .pri{margin-bottom: 20px; border-radius: 10px; display: inline-block; padding: 10px 30px; background: #ffdfd5; font-size: clamp(1.125rem, 1rem + 0.63vw, 1.25rem)}/*18-20*/
.curved3 .text01{ font-size: clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem)}/*18-24*/

.curved3 .fashon{background: #fff; margin: 30px 3%; padding: 0 5% 30px; border-radius: 20px}
.curved3 .fashon .wel{margin-top: -20px}
.curved3 .fashon .kagami{text-align: left; margin: 20px 0}
.curved3 .fashon .text02{ margin: 20px 0}
.curved3 .shoes{width: 124px}
.curved3 .kattko{font-size: clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem)}/*18-24*/
.curved3 .bel ul{display: flex; justify-content: space-between; margin: 20px 5% 0}
.curved3 .bel li{width: 48%; background: #fff; border-radius: 10px; padding: 15px 0; margin-bottom: 40px}
.curved3 .bel li img{width: 122px}

.curved4 .contbox{background: #fff5f2 ; padding: 0 5% 50px;}

.pipi{background:#fff5f2; }
.pipi .curved {margin: 0 5% ; text-align: center; position: relative}
.pipi .curved .bgfff{ background: #fff ; padding: 0 5%}
.joiabout{padding: 50px 0 40px}
.joiabout .fukiwa{padding: 10px 20px ; display: inline-block; font-size: clamp(1.625rem, 1.375rem + 1.25vw, 1.875rem)}/*26-30*/
.joiabout .cat{width: 93px; position: absolute; right: 8%; top: -10px}
.joiabout .text01{position: relative; font-weight: 700; font-size: clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem)}/*18-24*/
.joiabout .text01 .kira{width:36px; left: 5%; top: -40px ; position: absolute}
.joiabout .text02{font-weight: 700; border-radius: 10px; background: #fff5f2; padding: 5% 0; margin: 20px 0 ; color:#dc7b77 ;font-size:clamp(1.375rem, 1.125rem + 1.25vw, 1.625rem) }/*22-26*/
.joiabout .text02 span{display: block ; font-size: clamp(0.938rem, 0.75rem + 0.94vw, 1.125rem) }/*15-18*/
.joiabout .text03{line-height: 1.6}
.joiabout .text02 i{ font-size: 13px ; color: #674330; text-decoration: line-through; }
.joiabout .text04{font-weight: 700; position: relative; color:#dc7b77 ;font-size:clamp(1.25rem, 1rem + 1.25vw, 1.5rem) }/*20-24*/
.joiabout .text04 .kira{width:36px; right: 2%; top: -20px ; position: absolute}
.joiabout .text05{letter-spacing: normal;text-align: left; font-size: 12px; padding:20px 0 40px ; position: relative}
.joiabout .text05 .cat{width: 93px; position: absolute; left: 50%; margin-left: -26px; top: 60px}



@media (min-width: 500px) and (max-width: 979px) {
.first .wa .wa01{top: 90% ;  right: 14%;}
}
@media (min-width: 980px){
.first .wa .wa01{top: 91% ;  right: 15%;}

}