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

.insta-video {
      width: 100%;
      margin: 0 0 0 0;
      padding: 5px; border: 1px solid #ccc2c4
    }
.insta-video {
      width: 90%;
      margin: 0 0 0 0; padding: 3px; border: 1px solid #ccc2c4
    }
.insta-video video {
      background-image: url('assets/img/day/thumbnail.jpg');
  background-size: cover;
  background-position: center;
      /* ネイティブコントロールを利用 */
      box-sizing: content-box;
    }

.insta-video video {
      background-image: url('assets/img/day/thumbnail2.jpg');
      background-size: cover;
  background-position: center;
      /* ネイティブコントロールを利用 */
      box-sizing: content-box;}

    /* ---------- ① モダン対応: aspect-ratio 利用 ---------- */
    @supports (aspect-ratio: 4 / 5) {
      .insta-video {
        aspect-ratio: 4 / 5;  /* 縦横比 4:5 */
        overflow: hidden;
        position: relative;
      }
      .insta-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;    /* 枠いっぱいに敷きつめ、上下カット */
      }
    }

    /* ---------- ② 非対応ブラウザ: padding-hack fallback ---------- */
    @supports not (aspect-ratio: 4 / 5) {
      .insta-video {
        position: relative;
        /* 5/4 = 1.25 → 125% + コントロールバー分（約40px） */
        padding-bottom: calc(100% * (5/4) + 40px);
        height: 0;
        overflow: hidden;
      }
      .insta-video video {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: auto;          /* 横幅は auto で高さ100%に合わせる */
        height: 100%;
        object-fit: cover;    /* 枠いっぱいに敷きつめ、上下カット */
      }
    }
/*--------------------------------------------------------------------

mainhead

--------------------------------------------------------------------*/
.mainhead{position: relative; margin-bottom:60px;}
.mainhead li a{margin: 0 2% ; display: block ; box-shadow: 0 0 8px #80747d;}
.mainhead li a:hover{box-shadow: none}


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

.first

--------------------------------------------------------------------*/
.first{text-align: center}
.first h2{margin: 0 5% 50px}
.first h2 img{max-width:548px }

.info {text-align: left}
.first .mi img{width: 40%; max-width: 220px}

.first .info{margin: 0 5% 60px; position: relative}
.first .info li a{transform: .3s;display: block; border-bottom: 1px dashed #9d656e; padding-bottom: 10px; margin-bottom: 5px ; }
.first .info date{letter-spacing: 1px; font-size: clamp(0.688rem, 0.563rem + 0.63vw, 0.813rem)}/*11-13*/
.first .info p{transition:0.3s; color: #000; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.first .info li a:hover p{color:#99153d }

.first .nagare p{margin: 0 2%} 

.first .info a.newsall {position: absolute; box-shadow: 0 0 4px #80747d; padding: 0 20px; display: inline-block; right: 0; top: 0; background:#91808d; color: #fff; border-radius: 5px 0 5px 0 ; font-size: clamp(0.688rem, 0.563rem + 0.63vw, 0.813rem)}/*11-13*/
.first .info a.newsall:hover{box-shadow:none}


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

.dear

--------------------------------------------------------------------*/
.dear{margin: 0px 15%;top: -150px; position: relative; text-align: center ;background: url("../img/top/touka.png") repeat; border-radius: 360px; padding: 0 40px 40px}
.dear img{width: 60%; max-width:325px; }
.dear p{text-align: left; margin: 0 auto; padding: 20px 0; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/

.kakusei{margin: -100px 5% 0; text-align: center; position: relative}
.kakusei h2{max-width:540px; margin-bottom: 20px  }
.kakusei ul.muti{display: flex; justify-content: space-between; }
.kakusei .muti li{width: 48%}
.kakusei .muti li:last-child{color: #8c4a55}
.kakusei .muti .goshi{ letter-spacing: -1px; text-align: left; margin-bottom: 20px; font-size:clamp(0.75rem, 0.375rem + 1.88vw, 1.125rem) }/*12-18*/
.kakusei .uplr{width:56px; position: absolute; bottom: 0; left: 50%; margin-left: -45px}


.baseBox{ text-align: center; font-size: clamp(0.875rem, 0.25rem + 3.13vw, 1.5rem)}/*14-24*/
.baseBox .text01a{padding: 70px 0 10px; }
.line{ background: linear-gradient(transparent 50%, rgba(218, 206, 207, 1) 50%); font-weight: 600;}

.baseBox .b01{margin-top: 30px}
.baseBox .fuki{line-height: 1.5 ; font-weight: 700; letter-spacing: -2px; font-size:clamp(1.125rem, 0.5rem + 3.13vw, 1.75rem)}/*20-28*/
.baseBox .fuki span{font-weight: 700; font-size:clamp(1.25rem, 0.125rem + 5.63vw, 2.375rem)}/*20-38*/

.baseBox .fukid{position: absolute; top: -10px; right: 0; width: 15%; max-width:88px }


.base{ padding: 20px 0 10px 15%; text-align: left;position: relative; background: url("../img/day/basel.png") no-repeat; background-size: 100%; margin-right: 3% ; line-height: 1.7; }
.base .text01{font-weight: 700; font-size:clamp(0.938rem, 0.625rem + 1.56vw, 1.25rem)}/*15-20*/
.base .ba{position: absolute; max-width:22px; width: 3.7%; left: 5%; top: 20px }
.base h2.let{letter-spacing: -2px;}
.base h2{color: #8c4a55;
position: relative;background-size: 200% 100%; /* これを追加 */
background-image: linear-gradient(
		20deg,
		rgb(140, 74, 85, 0.8)  45%, 
		#e49ba7 50%,
		rgb(140, 74, 85, 0.8) 55% 
	  );
    background-clip: text;
  	-webkit-background-clip: text;
	  color: transparent;
 animation: shinea 4s infinite;
font-weight: 700; margin-top: -12px;  font-size:clamp(1.875rem, 0.625rem + 6.25vw, 3.125rem) }/*30-50*/
@keyframes shinea {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.base ul{padding-bottom: 20px ; margin: 5px 0 0; font-size:clamp(0.75rem, 0.375rem + 1.88vw, 1.125rem) }/*12-18*/
.base li{background: url("../img/day/hoshi.png") no-repeat left 6px; background-size: 10px 10px; padding-left: 15px}

.baseBox2{ padding-top: 20px}
.baseBox2 .b02 .fukid{position: absolute; top: 20px; left: 20px; width: 15%; max-width:88px }
.baseBox2 .b03 .fukid{position: absolute; top: 20px; right: 20px; width: 15%; max-width:88px }
.baseBox2 .b02{position: relative; padding: 20px 15% 20px 0; margin: 0 0 0 3%;  text-align: right; background: url("../img/day/baser.png") no-repeat; background-size: 100%;}
.baseBox2 .b02 li{padding-right: 15px; background: url(../img/day/hoshi.png) no-repeat right 6px;
    background-size: 10px 10px;
    padding-left: 15px;}
.baseBox2 .b02 .ba{right: 5%; left: auto}
.baseBox2 .b02 .kando{ max-width: 86px; position: absolute; top: 20px; left: 5%; width: 15%}
.baseBox2 .b03{margin:10px 10px 0 0}

.baseBox2 .text02{letter-spacing: -1px ; text-align: center; padding-bottom: 30px ; font-size:clamp(1.25rem, 0.438rem + 4.06vw, 2.063rem)}/*20-33*/
.baseBox2 .text02 span{font-size:clamp(1rem, 0.313rem + 3.44vw, 1.688rem) }/*16-27*/

.baseBox2 .sub{text-align: center ; font-weight: 600; margin: 40px 0; font-size: clamp(1.313rem, 0.25rem + 5.31vw, 2.375rem)}/*21-38*/


.dodai{position: relative; padding-top: 30px}
.dodai .tate{z-index: 2; position: absolute;top:0px; right: 5%; line-height: 1.6;height: 400px; font-size: clamp(1.25rem, 0.875rem + 1.88vw, 1.625rem)}/*20-26*/
.dodai .tate span{line-height: 1.4; display: inline-block; background:#9d656e; color: #fff; padding: 10px 0;  }

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

.voice

--------------------------------------------------------------------*/
.voice{background: url(../img/day/flowbg.png) repeat-y; background-size: 100% auto;}
.vo01{ position: relative}
.voice .no1{position: absolute; right: 0; top: -20px; width: 12%; max-width:68px }
.voice h2{padding: 80px 5% 40px; margin-top: 70px }
.voice .vobg {text-align: center}
.voice ul{ padding: 30px 0 20px}
.voice li {text-align: left;
  background: #fff;
  border-radius: 10px;
  border: 2px solid #f2eced;
  padding: 15px;
  box-sizing: border-box;
}

/* slick専用の隙間設定 */
.voice .slick-slide {
  padding: 0 10px !important; /* 左右20pxの隙間 */
}

/*.voice .slick-list {
  margin: 0 -10px; 
}
*/
.voice li .name {
  font-size: 13px;
  padding-top: 8px;
  text-align: right;
}
.voice .chenge{font-weight: 600; letter-spacing: -1px ; font-size: clamp(1.313rem, 0.25rem + 5.31vw, 2.375rem)}/*21-38*/
.voice .chenge span{display: block; padding-bottom: 100px; font-size: clamp(1.563rem, 0.25rem + 6.56vw, 2.875rem)}/*25-46*/

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

.lessmov 

--------------------------------------------------------------------*/
.lessmov {position: relative; padding-bottom: 90px; background: url(../img/day/flowbg.png) repeat-y; background-size: 100% auto;}
.lessmov .no2{position: absolute; left: 5%; top: -75px; width: 12%; max-width:68px }
.lessmov .tate{z-index: 2; position: absolute; top:-10px; left: 5%; line-height: 1.6;height: 400px; font-size: clamp(1.25rem, 0.875rem + 1.88vw, 1.625rem)}/*20-26*/
.lessmov .tate span{line-height: 1.4; display: inline-block; background:#9d656e; color: #fff; padding: 10px 0;  }

.lessmov .insta-video{margin-left: 20%; width: 80%}

.lessmov .yaji{ position: absolute; text-align: left; top:40%; max-height: 230px;padding-left: 5% }
.lessmov .yaji .click{max-width: 184px; width: 40%  }
.lessmov .yaji .ya{max-width: 104px; width: 40%;  }
.lessmov .text{font-weight: 600 ;  margin: 20px 5% 0; font-size: clamp(1.063rem, 0.938rem + 0.63vw, 1.188rem) }/*17-19*/
.lessmov .text span{padding-top: 20px; display: block;font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.lessmov .text1a{text-align: right}
.lessmov a {font-weight: 500; margin: 20px 5% 60px auto; box-shadow: 0 0 4px #80747d; padding: 10px 20px; display: inline-block; background:#91808d; color: #fff; border-radius: 5px 0 5px 0 ; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.lessmov a:hover{box-shadow:none}


.l3 .lessmov{padding-top: 5%}
.l3 .lessmov .no2{top: -60px}
.l3 .lessmov .name{width:40%; max-height: 207px; position: absolute;
    z-index: 3;
    right: 5%;
    top: -20px; }

.l3 .lessmov .tate{top:1%; height: 480px; position: absolute; z-index: 5}
.l3 dl{display: flex; justify-content: space-between; padding-left: 3%}
.l3 dt{width: 20%}
.l3 dt img{max-width: 182px}
.l3 dd{width: 77% ; letter-spacing: -1px; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.l3 dd .text{margin:0 ; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.l3 .lessmov .text1a{letter-spacing: normal}
.l3 .lessmov a{margin: 20px 5% 20px auto;}
.l3 .chenge{margin-top: 30px; text-align: center;  letter-spacing: -1px; font-size: clamp(1.313rem, 0.25rem + 5.31vw, 2.375rem)}/*21-38*/
.l3 .chenge span{display: block;letter-spacing: -1px; padding-bottom: 20px; font-size: clamp(1.125rem, 0.25rem + 4.38vw, 2rem)}/*18-32*/

.l3 .cli{padding: 0 0 0 22%; position: relative; top: -20px}
.l3 .ya{max-width:57px; width: 13% }
.l3 .click{max-width:382px; width: 70%; position: relative; top: -10px}

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

.courseBox

--------------------------------------------------------------------*/
.courseBox{ padding: 60px 5% 0; text-align: center}
.courseBox .tit{max-width: 516px}
.courseBox h2{padding: 20px 0 ; font-size: clamp(1.125rem, 0.25rem + 4.38vw, 2rem)}/*18-32*/
.courseBox h2 span{display: flex;
  justify-content: center;
  align-items: center; margin-top: 10px;
  gap: 10px; padding-top: 10px 16px; font-size: clamp(0.875rem, 0.625rem + 1.25vw, 1.125rem)}/*14-18*/
.courseBox h2 span::before {
  content: "";
  width: 30px;
  height: 2px;
  transform: rotate(60deg);
  box-sizing: border-box;
  background-color: #333333;
}
.courseBox h2 span::after {
  content: "";
  width: 30px;
  height: 2px;
  transform: rotate(-60deg);
  box-sizing: border-box;
  background-color: #333333;
}
.courseBox .cours{margin-bottom: 40px;  border: 1px solid #ccc2c4; border-radius: 10px; padding:30px 5% 40px ;background: url("../img/top/m01.png") repeat}
.courseBox h3{font-weight: 700; color:#8c4a55; letter-spacing: -1px; padding-bottom: 20px ; 
font-size:clamp(1.25rem, 0.5rem + 3.75vw, 2rem)}/*20-32*/
.courseBox ul{text-align: left ; border-top: dashed 1px #ccc2c4;}
.courseBox ul a{color:#22201e; display: block; border-bottom: dashed 1px #ccc2c4; margin-bottom: 15px; padding-bottom: 15px}
.courseBox ul li h4{font-size:clamp(1.063rem, 0.625rem + 2.19vw, 1.5rem) }/*17-24*/
.c01 .cours ul li:first-child h4{font-size:clamp(1rem, 0.5rem + 2.5vw, 1.5rem) }/*16-24*/
.c03 .cours ul li h4{font-size:clamp(0.813rem, 0.5rem + 1.56vw, 1.125rem) }/*13-18*/


.courseBox ul li:first-child{ margin-top: 15px}
.courseBox ul li:last-child a{border: none; padding-bottom: 0; margin-bottom: 0}
.courseBox ul li{position: relative}
.courseBox ul .kata{color:#8c4a55; position: absolute; right: 0; top: 10px; font-size:clamp(0.688rem, 0.438rem + 1.25vw, 0.938rem)}/*11-15*/
.courseBox ul .hosoku{font-weight: 500; font-size: clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/

.courseBox a .newsall {text-align: right}
.courseBox a .newsall span {line-height: 1.4; margin: 0 0 0 auto; box-shadow: 0 0 4px #80747d; padding: 0 20px 2px; display: inline-block; background:#91808d; color: #fff; border-radius: 5px 0 5px 0 ; font-size: clamp(0.688rem, 0.563rem + 0.63vw, 0.813rem)}/*11-13*/
.courseBox a:hover .newsall span{box-shadow:none}


.c02 .cours .sub{font-size: 11px; margin-top: -20px; margin-bottom: 20px}
.c02 .cours ul{border-top: none}

.c03 .cours{position: relative}
.c03 .cours a{color:#22201e;}
.c03 .cours h3{padding-right: 15% ; padding-bottom: 10px;}
.c03 .cours .ka{color:#8c4a55; position: absolute; right: 5%; top: 45px; font-size:clamp(0.688rem, 0.438rem + 1.25vw, 0.938rem)}/*11-15*/
.c03 .cours .text{ padding-bottom: 20px ;font-size:clamp(0.813rem, 0.5rem + 1.56vw, 1.125rem) }/*13-18*/
.c03 .cours ul{ padding-top: 10px; font-size: clamp(0.688rem, 0.563rem + 0.63vw, 0.813rem)}/*11--13*/
.c03 .cours li{ margin-bottom: 5px; }
.c03 .cours ul li:first-child{margin-top: 5px;}
.c03 .cours dl{display: flex ; color:#8c4a55; letter-spacing: -1px}
.c03 .cours dt{ width: 35% }
.c03 .cat-5 {color:#7b4b84;}

.c03 .cours dd{width: 60% ; text-align: right; }



.c04 .cours{margin-bottom:110px }
.c04 .cours .text{padding-bottom: 0}

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

.aboutmesth

--------------------------------------------------------------------*/
.aboutmesth{position: relative; text-align: center; background: url("../img/top/meshto.jpg") no-repeat #000; background-size: 100% auto ;
 padding: 400px 0 40px}
.aboutmesth .tate{text-align: left; position: absolute; z-index: 2; top:-20px; right: 5%; line-height: 1.6;height: 400px; font-size: clamp(1.25rem, 0.5rem + 3.75vw, 2rem)}/*20-32*/

.aboutmesth .tate span {
    line-height: 1.4;
    display: inline-block;
    background: #9d656e;
    color: #fff;
    padding: 10px 0;
}
.aboutmesth .tate span:last-child{background:#91808d }
.aboutmesth .ab{ background: url("../img/top/m01.png") repeat; margin: 2%; padding: 2%}
.aboutmesth .ab2{background: url("../img/top/m02.png") repeat; padding:30px  5% 40px; border-radius: 10px}
.aboutmesth .ab2 dfn{display: block; margin-bottom: 10px; color: #8c4a55; font-size: clamp(1.313rem, 0.25rem + 5.31vw, 2.375rem)}/*21-38*/
.aboutmesth .ab2 dfn.pt20{padding-top: 20px}
.aboutmesth .ab2 .text01:last-child dfn{display: block; color:#715c6c; padding: 20px 0 0 }
.aboutmesth .text01{letter-spacing: -1px ; font-size: clamp(0.938rem, 0.75rem + 0.94vw, 1.125rem)}/*15-18*/
.aboutmesth .text01 .mn10{display: block; margin-bottom: 10px}
.aboutmesth .text01 .mt10{letter-spacing: normal; padding-top: 10px; display: inline-block}

.aboutmesth .text1a a {font-weight: 500; margin: 30px 0 0px; box-shadow: 0 0 4px #80747d; padding: 10px 20px; display: inline-block; background:#91808d; color: #fff; border-radius: 5px 0 5px 0 ; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.lessmov a:hover{box-shadow:none}

.messbg{text-align: center; padding: 20px 0 0px ; position: relative ;}
.messbg .mess{padding-top: 80px; background: url(../img/day/en.png) no-repeat center 0px; background-size: 100%;}
.mess .nao{position: relative}
.mess .nao .higashi {width: 90%; max-width:562px; margin:0 5% }
.mess .nao .tit img{position: absolute; top: 15%; left: 5%; max-width:162px; width: 30% }
.mess .text01{text-align: left; padding: 20px 5% 0px; line-height: 1.6; font-size: clamp(0.813rem, 0.5rem + 1.56vw, 1.125rem)}/*13-18*/
.mess .text01 span{display: block; margin-top: 30px}

.mess .text1a a {font-weight: 500; margin: 30px 5% 80px; box-shadow: 0 0 4px #80747d; padding: 10px 20px; display: block; background:#91808d; color: #fff; border-radius: 5px 0 5px 0 ; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.mess .text1a a:hover{box-shadow:none}

.insta{padding: 0 5% 60px}


@media (max-width: 639px){
/* コンテナの横幅制限 */
#wrap {
  max-width: 100%;
  overflow-x: hidden;
}
}

@media (min-width: 640px){
.mainhead h2{width: 100%; margin: 0; text-align: center}

.base {padding: 40px 0 20px 15%;}

.baseBox2 .b03{margin:20px 10px 0 0}
.lessmov .yaji{line-height: 3}
.voice .chenge span{padding-bottom: 140px}

.lessmov{padding-bottom: 80px;}
.lessmov .no2{top: -105px;}
.lessmov .yaji .ya , .lessmov .yaji .click{width: 100%}
.lessmov .yaji .click{max-width: 114px}

.l3 .lessmov .no2 {top: -80px;}
.l3 dt{width: 33%}
.l3 dd{width:65% ; letter-spacing: normal; }
.l3 .lessmov a{margin-bottom: 60px}

.aboutmesth{ padding-top: 500px}
.aboutmesth .text01{letter-spacing: normal}

.mess .text01{line-height: 2}

}


@media (min-width: 1100px){
.contBoxFlaxr{padding-top: 0}


}