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

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

.midashi

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



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

.first

--------------------------------------------------------------------*/
.first{position: relative; padding-top: 20px ;  }
.first .fade1{ margin: 0 5%}
.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: 94%;}
.first .wa .wa02{width:181px; position: absolute; right: 10%;top:85% ; animation:8s linear infinite rotation1; z-index: 3}

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

.info

--------------------------------------------------------------------*/
.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: .3s}
.info .topi a:hover img{filter: none}
.info h2{ width: 62px; position: absolute; left: 0 ; top: 0}

.infobox{position: relative;}
.infobox .morebtn{position: absolute; right: 8%; top: 0}

.table_box{margin: -10px 0 0 90px; flex-wrap: nowrap; overflow-x: scroll;}
.table_box ul{margin-top: 20px; display: flex; overflow-x: auto; width:660px ; padding-bottom: 10px; letter-spacing: normal}
.table_box li{ position: relative; text-align: left; width:220px ; }
.table_box li date{font-size: 13px}
.table_box li a{color: #674330; display: block ; padding: 30px 30px 10px 0;}
.table_box li a:hover{color: #fe988d}

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

.first

--------------------------------------------------------------------*/
.first2{text-align: center ; overflow-x: hidden;}
.first2 .text01{letter-spacing: normal; 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: 36%; margin-top: 10px }
.prob ul li:nth-child(2){margin-right: 5%; width: 45%}
.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;  }

.prob .text01{font-weight: 600; line-height: 2.4 ; letter-spacing: normal ; position: relative ; margin:30px 0 100px ; font-size:clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/
.prob .text01 img{position: absolute; right: 8%; bottom: -200px; width:93px }


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

insta

--------------------------------------------------------------------*/
.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}

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

merit

--------------------------------------------------------------------*/
.merit{ text-align: center;padding-top: 50px}
.img01 img{ width: 199px}
.merit .img4{ width: 122px}

.merit h2 img{ max-width:311px }

.merit .merbox{padding-right: 8%; background: #fff; padding-top: 30px}
.merit .merbox:nth-child(2n){padding-right:0; padding-left: 8%}
.merit h2{ margin-top: 20px; margin-bottom: 40px; font-size: clamp(1.75rem, 1.776rem + -1.32vw, 1.25rem)}/*28-32*/
.merit .merbox .merl{position: relative}
.merit .merbox:nth-of-type(3) .merl img{border-radius: 30px 0 0 30px}

.merit .merbox .merl .en{
  background: linear-gradient(90deg, #70c3c8 0%, #fcdf5d 40%, #f5afa6 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
line-height: normal; position: absolute; left: -10px; top: -30px; font-size: clamp(2.625rem, 2.724rem + -3.69vw, 1.25rem)}/*42-43*/
.merit .merbox:nth-of-type(2n) .merl .en{left: auto; right: -6%; position:absolute}

.merit .merbox .merl h3{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*/
.merit .merbox .merl h3 span{background: url("../img/touka.png") repeat; display: inline-block; padding: 0 10px 0 0; }
.merit .merbox:nth-of-type(2n) .merl h3{left: auto; right: 0; text-align: right}
.merit .merbox:nth-of-type(2n) .merl h3 span{padding: 0 0 0 10px}
.merit .merbox .merl h3 span{padding-bottom: 4px !important}

.merit .merbox .merr{position: relative; margin: 20px 0 0px 8%; text-align: left ; padding-bottom: 60px}
.merit .merbox:nth-child(2n) .merr{margin: 20px 8% 0px 0}
.merit .merbox .merr .name{font-size:clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem) }/*18-22*/
.merit .merbox .merr .name a{font-size: clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/

.merit .merbox .karada{position: absolute; left:8%; top: -18px; width: 133px }

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

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: 90px}
.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 a {margin-top: 20px;
  justify-content: center;
  color: #ffffff;
  border-radius: 20px;
  transition: 0.3s;
  box-shadow: 0px 0px 3px 2px rgba(219, 219, 219, 0.8);
  background-image: linear-gradient(90deg, rgba(74, 190, 212, 1), rgba(252, 211, 117, 1) 50%, rgba(244, 171, 170, 1));
  background-size: 200% 100%;
  background-position: 0% 0%;
  display: inline-block;
  padding: 0 20px;
  font-size:clamp(0.875rem, 0.75rem + 0.63vw, 1rem); /*14-16*/
  transition: background-position 0.5s ease; /* 追加: 背景位置のアニメーション */
}

.morebtn a:hover {
  background-position: 100% 0%; /* マウスオーバー時に背景を右へ移動 */
  box-shadow: none;
}
/*--------------------------------------------------------------------

cla

--------------------------------------------------------------------*/
.cla {text-align: center;padding: 50px 0}
.cla h2{margin-bottom: 60px}
.cla a{ display: block ; margin: 0 5% 80px; box-shadow: 0px 0px 3px 2px rgba(219, 219, 219, 0.8); border-radius: 30px;
  color:#674330 ; padding-bottom: 60px; background: #fff}
.cla a:hover{box-shadow: none}
.classbox{position: relative}
.classbox .pic{position:relative}
.classbox .pic img.clas{position: absolute; width:51px; top: -25px; left: 50%; margin-left: -25px }
.classbox .pic .cat{width:103px; position: absolute; right: -15px; top: 68%; z-index: 2 ; }
.classbox .cla02 .pic .cat{right: auto; left: -10px; top: 80%; position: absolute ; z-index: 2}

.classbox .slick-list{border-radius: 30px 30px 0 0}

.classbox .tit{position: relative; justify-content: space-between; display: flex; margin-left:8%; margin-right: 8%}
.classbox .time {line-height: 1.6 ; width: 40% ; text-align: left}
.classbox .time span{ font-size:clamp(1.875rem, 1.625rem + 1.25vw, 2.125rem) }/*30-34*/
.classbox .time .big{width:171px; position: absolute; left:-35px;top: -45px; }
.classbox .time .wah{width: 24px ; vertical-align: middle; top: -5px; position: relative;}
.classbox .tit h3{text-align:left ; width: 60%; font-size:clamp(1.625rem, 1.375rem + 1.25vw, 1.875rem) }/*26-30*/
.classbox button{font-weight: 700 ; border: none; color:#fff; padding: 15px 20px; background:#f5afa6 ; border-radius:180px ;  position: absolute; bottom: -85px; left: 50%; margin-left: -120px; width: 260px ; box-shadow: 0px 0px 3px 2px rgba(219, 219, 219, 0.8); font-size:clamp(0.938rem, 0.875rem + 0.31vw, 1rem) }/*15-16*/
.classbox .cla02 button{ background:#8bd4d4 }
.classbox .cla03 button{ background:#ffd648 }

.cla a:hover button{box-shadow:none}
.classbox .come{font-weight: 700; letter-spacing: normal; font-size: clamp(1.125rem, 1rem + 0.63vw, 1.25rem)}/*18-20*/
.classbox .text02{text-align: left; padding: 15px 5% 0}
.classbox .cla03 .text02{padding-top: 0}

.bgfff{background: #fff ; padding-bottom: 50px}

.classbox .cla03 .tit h3{padding-top: 10px; font-size: clamp(1rem, 0.625rem + 1.88vw, 1.375rem)}/*16-22*/
/*--------------------------------------------------------------------

pro

--------------------------------------------------------------------*/
.pro{ background:#f9f3ed ; padding: 30px 8% 50px  }
.probox{position: relative}
.probox .protext{position: absolute; left: -5%; top: 50%}
.probox h2{padding-bottom: 10px;  font-size:clamp(1.625rem, 1.375rem + 1.25vw, 1.875rem) }/*26-30*/
.probox .name{position: relative; z-index: 1; font-size: clamp(1.375rem, 1.125rem + 1.25vw, 1.625rem)}/*22-26*/
.probox .protext img{width:286px; margin-top: -30px }
.pro .goshi{padding: 20px 0 0}
.pro .goshi a{; padding-top: 10px ; text-align: right ; display: block ; font-size:clamp(0.938rem, 0.75rem + 0.94vw, 1.125rem) }/*15-18*/

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

.acc

--------------------------------------------------------------------*/
.acc{text-align: center}
.acc h2{width: 260px}
.acc .text01{padding-bottom: 70px}
.acc .bgfff{padding-bottom: 0}
.accbox{background:#f9f3ed ; margin: 0 5%; padding: 0 5% 20px; position: relative; z-index: 2}
.accbox:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: 5px;
  border: 25px solid transparent;
  border-top: 25px solid #f9f3ed;
}
.accbox .man{display: inline-block; position: relative; top: -50px; background:#f9f3ed ; border-radius: 180px; padding:10px 0 0 0;
width: 220px; height: 220px; font-size:clamp(1.5rem, 1.25rem + 1.25vw, 1.75rem) }/*24-28*/
.accbox h3{ border-radius: 10px ; background:#f3e8dc; padding: 10px; margin-top: -200px ; z-index: 1; position: relative; margin-bottom: 10px}
.accbox .sta , .accbox .eki , .accbox .add{ position: relative; z-index: 1 ;text-align: left}
.accbox .sta img{width: 18px}
.accbox .add{line-height: 1.6; font-size: 13px; margin: 10px 0 0}
.acc .map{width: 100%; height: 600px; margin-top: -20px; margin-bottom: 60px}

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

column

--------------------------------------------------------------------*/
.column{text-align: center; padding: 50px 0 ;background: #fff}
.column ul a{ color: #674330}
.column li{position: relative; padding: 0 8% ; text-align: left}
.column li span{font-size: 12px}
.column .slick-prev,.sem .slick-next {
  z-index: 1;
}
.column .slick-prev:before, .column .slick-next:before {
  color: #674330;
}

.column .slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.column .slick-active {
  opacity: 1;
}
.column .slick-current {
  opacity: 1;
}


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

insta

--------------------------------------------------------------------*/
.insuta{text-align: center; padding: 0 8% 80px ; background: #fff}
.insuta .tit{font-size:clamp(2.125rem, 1.875rem + 1.25vw, 2.375rem)}/*34-38*/


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

}