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

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

headbox

--------------------------------------------------------------------*/
.headbox{position:relative; text-align: center}
.headbox img{position: absolute; bottom: 0; width: 100%; mix-blend-mode:multiply ; transform: translateX(-50%); left: 50%}
/* 動画を囲むコンテナのスタイル */
.video-header {
  position: relative;
  width: 100%;
  height: auto; /* 画面の高さに合わせる場合。任意の高さ（例: 60vh や 500px）に変更可能です */
  overflow: hidden;
}

/* 動画本体のスタイル */
.header-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに広げ、はみ出た部分をトリミング */
  display: block; /* 余白ができるのを防ぐ */
}
.headbox .min{font-weight: 300; white-space: nowrap; text-align: left; display: inline-block; margin: 0 auto; line-height: 1.4; position: absolute;left: 50%; transform: translateX(-50%); bottom: 30px; color: #fff; font-size: clamp(1.875rem, 1.292rem + 2.92vw, 2.313rem)}/*30-37*/
.headbox .min i{margin-bottom: 10px; display: block; text-align: left; font-size:clamp(1.125rem, 0.542rem + 2.92vw, 1.563rem)}/*18-25*/
.headbox .min span{font-size: clamp(1.125rem, 0.542rem + 2.92vw, 1.563rem)}/*18-25*/


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

.topicsbox

--------------------------------------------------------------------*/
.topicsbox{margin: 0 8% 40px; text-align: center}
.topicsbox .en{color:#4a6a45 ; margin-bottom: 20px; font-size: 20px}
.topicsbox a{display: block ; filter: drop-shadow(0px 0px 5px rgba(129, 153, 127, 0.7));}
.topicsbox a:hover{filter: none; font-size: 26px; letter-spacing: 1px;}
.topicsbox .line-border:before, .line-border:after{background-color: #4a6a45;}


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

.badge

--------------------------------------------------------------------*/
.badge {position: relative}
.badge ul{display: flex; justify-content: space-between; margin: 30px 3% 40px; text-align: center}
.badge li{line-height: 1.4; background: url("../img/top/wa01.png") no-repeat center top ; background-size: 100% auto; letter-spacing: -1px; color: #968b6b ; width: 33%; padding:15px 0 30px; font-size:clamp(0.75rem, 0.5rem + 1.25vw, 0.938rem) }/*12-15*/
.badge li:nth-child(2){background: url("../img/top/wa02.png") no-repeat center top ; background-size: 100% auto; }
.badge li:nth-child(3){background: url("../img/top/wa03.png") no-repeat center top ; background-size: 100% auto; }
.badge li img{width:26px; margin-bottom: 10px }
.badge li p{font-weight: 500; }

.badge .hosi1{position: absolute; right: 5%; top: 20% ; width:14px }
.badge .hosi2{position: absolute; right: 3%; top: 35%; width:10px }
.badge .hosi3{position: absolute; left: 5%; top: 8%; width:14px }

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

.ona

--------------------------------------------------------------------*/
.ona{border-radius: 560px 560px 10px 10px; text-align: center; background: url("../img/top/bg.png") repeat ; background-size: 300px 300px; padding: 50px 3% 50px; }
.ona h2{margin-bottom: 30px; line-height: 1.4; font-size: clamp(1.375rem, 0.708rem + 3.33vw, 1.875rem) }/*22-30*/
.ona li{line-height: 1.4; margin-bottom: 10px; position: relative; display: inline-block ; border-radius: 10px; background:url("../img/bg.png")repeat; background-size:150px; color: #fff; padding: 5px 20px; font-size: clamp(1.188rem, 0.688rem + 2.5vw, 1.563rem) }/*19-25*/
.ona li img{width:20%; max-width:99px; position: absolute; left:-15%; top: -18%}
.ona li:nth-child(2) img{ right:-20%; top: -18% ; left: auto ; width:22%;}
.ona li:nth-child(3) img{left:-10%; top: 0 ; width:19%;}
.ona li:nth-child(4) img{ right:-15%; top: -18% ; left: auto ; width:20%;}
.ona li:nth-child(5) img{left:-25%; top: 0 ; width:36%;}
.ona li:last-child img{right: -40%; top: -25%; left: auto; width: 49%; max-width: 98px; }


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

.toku

--------------------------------------------------------------------*/
.toku{text-align: center; padding: 80px 0 40px}
.toku h2{font-size: 15px; border: 1px solid #3a3b3b; display: inline-block; border-radius: 5px; padding: 0 30px}
.toku .kagi{padding: 8px 40px; margin-top: -10px; margin-bottom: 10px}
.toku .text01{margin-bottom: 10px; font-size: clamp(1.125rem, 0.958rem + 0.83vw, 1.25rem)}/*18-20*/
.toku .text02{font-size:clamp(1.313rem, 1.063rem + 1.25vw, 1.5rem)}/*18-20*/

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

.less

--------------------------------------------------------------------*/
.less{margin: 0 8% ; text-align: center} 
.less .img img{width: 111px}
.less .tit{margin: 10px 0 30px; line-height: 1.4;  font-size:clamp(1.75rem, 1.25rem + 2.5vw, 2.125rem) }/*28-34*/
.less .imgbox{position: relative}
.less .imgbox .fuki{position: absolute; left: 1%; top:10px; max-width:166px; max-width:40%  }
.less .text01{text-align: left; margin: 20px 0}

.poi{display: flex; justify-content: space-between; background:#fff; border-radius: 10px;
padding: 20px 0px 20px 20px !important; margin: 0 0 50px!important; align-items: center}
.poi dt{width: 20% !important}
.poi dt img{width: 100% !important}
.poi dd{width: 77% !important; text-align: left; color:#4a6a45; font-size:clamp(0.875rem, 0.375rem + 2.5vw, 1.25rem)}/*14-20*/
.poi dd span{font-size: 12px}

.less .line-border{margin-bottom: 50px}

#l02 , #l03 , #l04{margin: 0}
#l02 .imgbox{margin: 0 8%}
#l02 .text01{margin: 20px 8%}
#l02 .henka{ padding-bottom: 30px; size:clamp(1rem, 0.667rem + 1.67vw, 1.25rem) }/*16-20*/
#l02 .henka em{display: inline-block ; border-bottom: 1px dashed #ccc;}
#l02 .henka i{display: inline-block ; letter-spacing: -2px}
#l02 .hone{position: relative; }
#l02 .hone li:nth-child(2) {position: absolute; left: 0; top: 0; z-index: 2 ; }
#l02 .hone li:last-child{position: absolute; left: 0; top: 0; z-index: 1}
#l02 .hone li:nth-child(2) img{mix-blend-mode:multiply}
#l02 .btn-wrap{margin-bottom: 60px}
#l02 .line-border{margin:0 8% 50px }

#l03 .allless{position: relative; z-index: 3}
#l03 .allless img{width: 201px}
#l03 .text01{margin: 10px 8% 0}

#l03 .dopen2{margin-top: -30px}
/* 全てのスライド（左右に配置される画像）を少し小さくする */
#l03 .dopen2 .slick-slide {
  transform: scale(0.9); /* ここで縮小率を調整します（例: 0.8 = 80%） */
  transition: transform 0.5s ease, opacity 0.5s ease; /* 拡大縮小のアニメーションを滑らかにする */
  opacity: 0.6; /* （任意）左右の画像を少し透過させると、真ん中がより際立ちます */
}

/* 真ん中に来たスライドだけ元の大きさに戻す */
#l03 .dopen2 .slick-center {
  transform: scale(1); /* 100%のサイズ */
  opacity: 1; /* 透過を戻す */
}

/* 画像がスライド幅に合わせて綺麗に収まるようにする */
#l03 .dopen2 .slick-slide img {
  width: 100%;
  height: auto;
}
#l03 .mikata{display: inline-block; padding: 30px 0 0; font-size:clamp(1.125rem, 0.708rem + 2.08vw, 1.438rem) }/*18-23*/
#l03 .mikata .fuki{display: inline-block; width: 80%}
#l03 .henka{position: relative; z-index: 2; padding:20px 0 0px; font-size:clamp(1.063rem, 0.646rem + 2.08vw, 1.375rem) }/*17-22*/
#l03 .henka em{display: inline-block ; border-bottom: 1px dashed #ccc;}
#l03 .kansei{position: relative; margin: -30px 8% 0}
#l03 .kansei .hosi1{position: absolute; right: 12%; top: 30% ; width:14px }
#l03 .kansei .hosi2{position: absolute; right: 10%; top: 38%; width:10px }
#l03 .kansei .hosi3{position: absolute; left: -2%; top: auto; border: 15%; width:14px }
#l03 .kansei p{ line-height: 1.2; white-space: nowrap; position: absolute; left: 10%; bottom: -60px; display: inline-block; background: url("../img/bg.png") no-repeat; color: #fff; padding: 0 10px 2px; font-size:clamp(1.75rem, 1.167rem + 2.92vw, 2.188rem)}/*28-35*/
#l03 .kansei p.te2{letter-spacing: -2px; left:37%;}
#l03 .kansei p.te3{letter-spacing: -2px; left: 65%;}
@keyframes fadeInUp1 {
    0% {
        opacity: 0;
        transform: translate3d(0, 20%, 0) rotate(-40deg);
    }
    to {
        opacity: 1;
        transform: translateZ(0) rotate(-40deg);
    }
}

.fadeInUp1 {
    animation-name: fadeInUp1;
    transform-origin: bottom left;
    
    /* ↓ 変更：forwards から both にします */
    animation-fill-mode: both; 
    
    transform: rotate(-40deg); 
}
#l03 .update{padding: 80px 0 50px; font-size: clamp(1.5rem, 0.75rem + 3.75vw, 2.063rem)}/*24-33*/
#l03 .cea{padding-left: 8%}
#l03 .line-border{margin:50px 8% 50px }

#l04 .tit span{letter-spacing: -3px}
#l04 .tit i{letter-spacing: -10px}
#l04  .imgbox{margin: 0 8%}
#l04  .text01{margin: 20px 8% 40px}
#l04 .imgbox .fuki{position: absolute; left: auto; right: -8%; top:auto; bottom: -10px; max-width:180px; max-width:37%  }
#l04 .clumn{position: relative ; margin: 0 0 120px 8%; background: #fff; padding: 5px 0 5px 5px; border-radius: 0 0 0 20px }
#l04 .clumn .c01{width: 76px; position: absolute; top: -15px; left: -5%}
#l04 .clumn .c02{width: 349px; max-width: 80%; position: absolute; top: -8px; right: 5%}
#l04 .clumn ul{border: 1px solid #749070; padding: 20px 5% 10px 20px; text-align: left ; border-radius: 0 0 0 20px; border-right: none}
#l04 .clumn a{color:#3b3b3b; font-size: 12px }
#l04 .clumn li{line-height: 1.2; position: relative; margin-bottom: 10px; padding-left: 20px}
#l04 .clumn li:before{content: "+"; display: block; position: absolute; left: 0; top: 0}

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

.voice

--------------------------------------------------------------------*/
.voice{text-align: center; position: relative; }
.voice .koe {position: absolute; right: 3%; top: -30px; z-index: 5}
.voice .koe p{line-height: 1.2; margin-left: 3px; padding: 20px 0; background: url("../img/bg.png") repeat; background-size: 150px; color: #fff; font-size: clamp(1.125rem, 0.542rem + 2.92vw, 1.563rem)}/*18-25*/

.voice ul{margin: 30px 0}

.voice .hosi1{position: absolute; right: 5%; top: 20% ; width:14px }
.voice .hosi2{position: absolute; right: 3%; top: 35%; width:10px }
.voice .hosi3{position: absolute; left: 5%; top: 8%; width:14px }
.voice .btn-wrap {margin: 2em 0 0}

.voice .text{font-size: 13px; padding: 15px 15px 0; text-align: left}

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

.lesson

--------------------------------------------------------------------*/
.lesson{text-align: center;}
.lesson .lhead{margin-top: -30px; background: url("../img/bg.png") repeat; background-size: 150px; color: #fff}
.lesbox{padding-bottom: 40px; position: relative; background: url("../img/bg.png") repeat; background-size: 150px; color: #fff}

.lesbox .let{line-height: 1.6; height: 300px; text-align: left; position: absolute; top: 30px; right: 8% ; font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.625rem)}/*20-26*/
.lesbox .text img{width: 89px;margin-bottom: 10px}
.lesbox .text{text-align: left; padding-top: 200px; margin-left: 8%; font-weight: 300; font-size: 15px}
.lesson .kagi{letter-spacing: -1px ; line-height: 1.4; margin-bottom: 40px}
.lesson .kagi::before {
  border-left: solid 1px #fff;
  border-top: solid 1px #fff;
}
.lesson .kagi::after {
  border-right: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.lesson .kagi span:before {
  border-left: solid 1px #fff;
}
.lesson .kagi span:after {
  border-right: solid 1px #fff;
}
.lesson .btn-wrap a{background: #b3a991; color: #fff; padding: 15px 20px}



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

.inst

--------------------------------------------------------------------*/
.inst{text-align: center;padding: 60px 0 20px; background: url("../img/top/insta.png") no-repeat right top #f7f7f7; background-size:86px auto}

.inst .text{font-weight: 300; margin: -30px 0 20px; font-size:clamp(1.188rem, 1.021rem + 0.83vw, 1.313rem)}/*19-21*/
.inst .text img{max-width:373px; width: 90% }
.inst section{ padding-bottom: 50px}
.inst h2 i{display: block; letter-spacing: 1px; font-size:clamp(1.125rem, 0.958rem + 0.83vw, 1.25rem) }/*18-20*/
.inst h2{line-height: 1.6; letter-spacing: -1px; font-size: clamp(1.75rem, 1.167rem + 2.92vw, 2.188rem)}/*28-35*/

.inst .poi{margin: 20px 0 30px !important; background: #fff ;padding: 20px 0px 20px 0px !important;}
.inst .poi dd{font-size:clamp(0.938rem, 0.854rem + 0.42vw, 1rem)}/*15-16*/


.inst dl{display: flex; justify-content: space-between; margin: 30px 8%}
.inst dt{width:30%; max-width: 148px }
.inst dd{width:65%; text-align: left}
.inst dd .name{letter-spacing: 2px; line-height: 1.4; font-weight: 300; border-bottom: 1px solid #3b3b3b; display: inline-block; font-size:clamp(2.125rem, 1.625rem + 2.5vw, 2.5rem) }/*34-40*/
.inst dd .toku {text-align: left; padding:0; letter-spacing: 1px; margin-top: 10px; line-height: 1.4; font-size:clamp(1.25rem, 1.083rem + 0.83vw, 1.375rem) }/*34-40*/
.inst ul{padding-bottom: 20px; margin: 0 3% 0px 8%; text-align: left; font-size: clamp(0.688rem, 0.438rem + 1.25vw, 0.875rem)}/*11-14*/
.inst ul li{list-style: none; position: relative ; padding-left: 20px}
.inst ul li:after{position: absolute; left: 0; top: 0;
 content: '+';
  display: block; /*改行するように*/
}

.inst .btn-wrap a{padding:15px 20px }

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

.app 

--------------------------------------------------------------------*/
.app{text-align: center;padding: 0px 0 30px; background: url("../img/top/app.png") no-repeat left top #f7f7f7; background-size:79px auto; position: relative}
.app .text{padding: 20px 0 10px; font-size: clamp(1.25rem, 0.833rem + 2.08vw, 1.563rem)}/*20-25*/
.app .text1{margin-bottom: 20px; text-align: left;margin: 0 8%; font-size:clamp(0.938rem, 0.771rem + 0.83vw, 1.063rem) }/*15-17*/
.app .poi{margin: 20px 8% !important}
.app .hosi1{position: absolute; left: 10%; top: 260px ; width:23px }


.app ul .text{text-align: left; font-size: 13px ;padding: 20px 3% 0;}
.app ul p{padding: 0 3%;}
.app ul img{border-radius: 10px}


.insta{padding-bottom:50px }
.insta .tutle img{width: 143px; margin-bottom: 20px}


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

footer

--------------------------------------------------------------------*/
footer .elBox span{ font-size: 12px; display: inline-block}
footer .elBox .text02{margin-bottom: 30px ; font-size: 17px}
footer iframe{width: 100%; height: 600px}
footer .accmap{text-align: left; margin: 0 8%}
footer .accmap h3{font-size: clamp(1rem, 0.667rem + 1.67vw, 1.25rem)}/*16-20*/
footer .accmap img{width: 18px ; vertical-align: middle ; top: -2px; position: relative}
footer .accmap ul{margin-bottom: 15px}
footer .accmap li{font-family: "IBM Plex Sans JP", sans-serif;  font-weight: 400; font-size: 13px}







@media screen and (min-width: 450px) {
.badge li{line-height: 1.8; padding-top: 20px 0 30px}
}