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

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

h2first

--------------------------------------------------------------------*/
.h2first{text-align: center}
.h2first .tit{position: relative; margin-left:8%; margin-right: 8%}

.h2first .tit h2{ font-size:clamp(1.625rem, 1.375rem + 1.25vw, 1.875rem) }/*26-30*/


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

.first

--------------------------------------------------------------------*/
.first{position: relative; padding-top: 20px ;  }


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

pro

--------------------------------------------------------------------*/
.pro{ background:#f9f3ed ; padding: 30px 8% 40px; position: relative}
.pro .kira1{width:50px; position: absolute; top: 10%; left: 8%; z-index: 1}
.pro .kira2{width:30px; position: absolute; bottom: 0; right: 8%; z-index: 1}
.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 }
.pro1 .goshi{padding: 0px 0 30px ; text-align: center; font-weight: 800 ; font-size:clamp(1rem, 0.625rem + 1.88vw, 1.375rem) }/*16-22*/
.pro .goshi a{; padding-top: 10px ; text-align: right ; display: block ; font-size:clamp(0.938rem, 0.75rem + 0.94vw, 1.125rem) }/*15-18*/

.fam{padding: 20px 0; border-top: 1px solid #af9f9f; border-bottom: 1px solid #af9f9f; margin: 0 8% 50px; font-size:clamp(0.875rem, 0.75rem + 0.63vw, 1rem)  }/*14-16*/
.fam .text01{position: relative; margin-top: 20px }
.fam .text01 p{width: 50%}
.fam .text01 img{width: 40%; position: absolute; right:0; top:-5px }


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

.acc

--------------------------------------------------------------------*/
.acc{text-align: center}
.bgf{background: #fff; padding-bottom: 80px}
.acc .cont{margin: 0 8%; text-align: left; border-left: 1px solid #af9f9f; }
.acc .contin{; position: relative; left: -10px}
.acc .cont ul{font-family: "Noto Sans JP", sans-serif; padding-left: 30px ; font-size:clamp(0.875rem, 0.75rem + 0.63vw, 1rem)  }/*14-16*/
.acc .cont h3{line-height: 1.6; margin-bottom: 10px ; padding-top: 60px; background: url("../img/ballet/maru.png") no-repeat 0 75px; background-size: 20px 20px; padding-left: 28px; font-size: clamp(1.375rem, 1rem + 1.88vw, 1.75rem)}/*22-28*/
.acc .cont h3.pt0{padding-top: 0 ;  background: url("../img/ballet/maru.png") no-repeat 0 15px; background-size: 20px 20px;}

.acc .cont li {list-style: disc; margin-left: 20px; line-height: 1.6;margin-bottom: 10px ;}
.acc .cont li.mab10{margin-bottom: 30px}
.acc .cont li:last-child{ margin-bottom: 0}

.acc .contin img{margin-top: 20px}
.acc .cont li a{text-decoration: underline}
.acc .cont li a.ar{display: block ; text-align: right; }
.acc .contin{position: relative}
.acc .contin .kira{position: absolute; right: 0; bottom: 0; width:40px}


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

voice

--------------------------------------------------------------------*/
.voice {text-align: center;padding: 50px 0 0}
.voice .hoshi{width: 142px}
.voice .text01{position: relative;margin-bottom: 30px; font-size: clamp(1.25rem, 0.875rem + 1.88vw, 1.625rem);}/*20-26*/
.voice .text01 img{width: 80px; position: absolute; right: 10%; top: -100px}
.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{margin-top: 20px;
 z-index: 2; position: relative;
  justify-content: center;
  color: #ffffff;
  border-radius: 180px;
  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: 5px 50px;
  font-size:18px; 
  transition: background-position 0.5s ease; /* 追加: 背景位置のアニメーション */
}

@media (max-width: 500px){
.acc .cont h3{background: url("../img/ballet/maru.png") no-repeat 0 70px; background-size: 20px 20px;}
}