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

.line {
    display: inline;
    background: linear-gradient(transparent 50%, rgb(210 194 194) 50%);
    font-weight: 600;}


.wa01 dl .insta-video {
      width: 100%;
      margin: 0 0 0 0;
      padding: 5px; border: 1px solid #ccc2c4
    }
.lessmov .insta-video {
      width: 72%;
      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;
    }

.lessmov .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 .text01{position: absolute ; top: -30px; right: 5%; max-width:176px; width: 30% }
.mainhead h2{position: absolute ; bottom: -50px; margin: 0 5%; max-width:557px; }

.muti{min-height: 900px; width: 100%; background: url("../img/day/en.png") no-repeat center 80px; background-size: 110%; text-align: center; padding-bottom: 60px; }
.muti h2{padding-bottom: 100px; font-size:clamp(1.438rem, 0.75rem + 3.44vw, 2.125rem) }/*23-34*/
.muti .text01{margin: 0 5%}
.muti .text01 img{max-width:560px }
.muti ul{display: flex; justify-content: space-between; margin: 0 5%}
.muti li{width: 48%}
.muti .en{ line-height: 1.4; font-size: clamp(2.5rem, 1.875rem + 3.13vw, 3.125rem)}/*40-50*/
.muti .goshi{ letter-spacing: -1px; text-align: left; margin-bottom: 20px; font-size:clamp(0.75rem, 0.375rem + 1.88vw, 1.125rem) }/*12-18*/
.muti .pic{margin: 40px 5% 20px 6%; max-width:538px }
.muti .text02{font-weight: 700; padding-bottom: 50px; font-size:clamp(1.125rem, 0.5rem + 3.13vw, 1.75rem)}/*18-28*/

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

.teni

--------------------------------------------------------------------*/
.teni{text-align: center; padding-bottom: 60px}
.teni h2{margin: 30px 5% 30px; max-width:540px }
.teni li{text-align: left; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px}
.teni li:nth-child(2){flex-direction: row-reverse }
.teni li:nth-child(2) p{text-align: right}
.teni li img{width: 38%}
.teni li p{letter-spacing: -1px; width: 57%; align-items: center; font-size: clamp(0.875rem, 0.5rem + 1.88vw, 1.25rem)}/*14-20*/



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

.wakuont

--------------------------------------------------------------------*/
.wakuBox{background: url(../img/bg.jpg) repeat; padding: 100px 0}
/*3の土台全体*/
.wakuont {position: relative; margin: 0 2%}
.wakuont::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #ccc2c4; /* 枠線の太さと色 */
  border-radius: 8px; /* 角丸（お好みで） */
  pointer-events: none; /* クリックイベントを透過 */
}
.wakuont .wakuhead{position: relative; text-align: center; top: -20px}


.wakuont .i02{position: absolute; top:70px; right: -1%; max-width:72px; width: 13%; z-index: 5 }

.wakuont .wa02{position: relative; text-align: center; }
.wakuont .wa02 h3{position: relative; top: -30px; left: -1% ; width: 90%}
.wakuont .wa02 ul{margin: 0 3%}
.wakuont .wa02 li img{max-width:512px; margin-bottom: 20px }
.wakuont .wa02 li:last-child{margin-bottom: 30px}
.wakuont .wa02 .tataki h3 {margin-right: 5%; text-align: left}
.wakuont .wa02 .tataki h3 img{max-width: 524px; width: 90%}
.wakuont .wa02 .tataki .text01{text-align: left; margin: 20px 5% 30px; font-size: clamp(1.063rem, 0.5rem + 2.81vw, 1.625rem)}/*17-26*/
.wakuont .wa02 .tataki .text01 span{font-weight: 800}
.wakuont .wa02 .tataki .text02{text-align: left; margin: 0px 5% 0px ; padding-bottom: 50px}

.lessmov {position: relative; padding-bottom: 40px}
.lessmov .hoso{letter-spacing: -1px; text-align: left; padding: 10px; line-height: 1.8; position: absolute; right: -2%; top: 5%; background: url("../img/bg.jpg") repeat; font-weight: 500;
font-size: clamp(0.625rem, 0.25rem + 1.88vw, 1rem)}/*10-16*/

.lessmov .yaji{ position: absolute; right: -2%; top:45%; max-height: 230px; text-align: right; padding-right: 5%}
.lessmov .yaji .click{max-width: 184px; width: 50%  }
.lessmov .yaji .ya{max-width: 104px; width: 50% }

.wakuont .wa02 .toha{position: relative}
.wakuont .wa02 .toha h3{position: absolute; right: 3%; top:-10px;  padding:  20px 0; color: #fff; background:#9d656e; font-size: clamp(1.25rem, 6.25vw, 2.5rem) }/*20-40*/
.wakuont .wa02 .toha h3 span{font-size:clamp(0.875rem, 0.5rem + 1.88vw, 1.25rem) }/*14-20*/
.wakuont .wa02 .toha img{width: 104%; margin-left: -2%;}


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

.voice

--------------------------------------------------------------------*/
.voice{text-align: center; padding-top: 60px}
.voice .afterbox{padding-bottom: 60px}
.wakuont .wa02 .voice h3 {
    position: relative; margin-bottom: 30px;
    top: 0px;
    left: 0;
    width:100%;
}
.voice .caset{font-weight: 700; display: inline-block ; background: #fff; padding: 8px 25px; border-radius: 180px; font-size:clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem) }/*18-22*/

.voice .updw{width:16px }
.voice .aff{width:152px; width: 30% }
.voice .text03{text-align: left; margin: 20px 5% 30px}
.voice .imgs{padding: 0 5%}

.faice{line-height: 2; padding: 0 5% 50px; text-align: left; font-size:clamp(0.875rem, 0.75rem + 0.63vw, 1rem)}/*14-16*/



.bg2{background: url(../img/bg.jpg) repeat;}
.loadbox{background: url(../img/bg2a.png) no-repeat;
    background-size: 100%;
    text-align: center;}
.flowcont{background: url(../img/bg2.png) repeat-y; background-size: 100%; padding-bottom: 50px;}
.loadbox h2{margin: 0 5% 20px}
.loadbox h2 img{max-width: 538px}
.loadbox .text01{padding-bottom: 30px; font-size: clamp(1rem, 0.625rem + 1.88vw, 1.375rem)}/*16-22*/
.flowcont h3{
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;
line-height: 1.4; margin: 20px 0; text-align: center ; font-size: clamp(1.75rem, 1rem + 3.75vw, 2.5rem)}/*28-40*/
.flowcont h3 span{display: block; font-size: clamp(1.125rem, 1rem + 0.63vw, 1.25rem)}/*18-20*/
.flowcont .waku{background:#fff; text-align: left ; margin: 10px 5% 0px ;padding: 15px}
.flowcont .waku .subu{margin-bottom: 5px}
.flowcont .waku .min{text-align: center; padding: 10px 0}
.flowcont .waku ul{margin-bottom: 15px}
.flowcont .pic{text-align: left}
.flowcont img{max-width:555px; width: 90% }
.flowcont .text{padding: 20px 5%; text-align: left; line-height: 2}
.flowcont .waku img{width:69px; margin-bottom: 10px }
.flowcont .waku li{margin-left: 20px; list-style: disc; line-height: 1.5; margin-bottom: 5px; font-size: clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)  }/*13-15*/

.flowcont .fo{margin-top: 70px}

.wakuont .face0{position: absolute; bottom: 0px; right: 2%; width: 35%; max-width: 178px}

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

.coursebox

--------------------------------------------------------------------*/
.coursebox{ background: url(../img/bg.jpg) repeat; padding: 60px 5% 30px}
.coursebox h2{margin:0 5% 50px; text-align: center}
.coursebox h2 img{max-width: 445px}
.coursebox h3{margin-bottom: 10px; text-align: center ; font-size:clamp(1.438rem, 1.125rem + 1.56vw, 1.75rem)}/*23-28*/
.coursebox .cou01 h3{position: absolute; top:-30px; background: url(../img/bg.jpg) repeat; display: inline-block;  left: 50%;
  transform: translateX(-50%);  white-space: nowrap; /* 改行を防ぐ */}

.coursebox .cou01{position: relative; border-radius: 20px; border: 1px solid #91808d; padding:20px 5% 10px }
.coursebox .cou01 p{    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #a592a2; }
.coursebox .cou01 p:first-child{padding-top: 10px}
.coursebox .cou01 p:last-child{border: none; margin-bottom: 0; }
.coursebox .cou01 strong{font-size: 600; font-size: clamp(1rem, 0.625rem + 1.88vw, 1.375rem)}/*16-22*/
.coursebox .cou01 p .chance{color:#c9485d }
.coursebox .cou01 p .dell {display: inline-block;
  position: relative;
  text-decoration: line-through;
}

.coursebox .cou01 p .dell::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: translateY(2px);
}

.coursebox .cou01 p .fontr{font-size:20px }
.coursebox .cou01 p .fontr2{font-size:24px ; color:#c9485d }

.coursebox .cou02{margin: 30px 0 50px}
.coursebox .cou02 h3{margin-bottom: 20px; }
.coursebox dl{display: flex; justify-content: space-between; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed #a592a2}
.coursebox dt{width: 30%}
.coursebox dd{width: 65%; margin-top: -8px }
.coursebox dd .tit{margin-bottom: 10px}
.coursebox dd span{display: block; line-height: 1.3; font-weight: normal; font-size: clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/

.mess .nao{position: relative ; background: url(../img/bg.jpg) repeat;}
.mess .nao .higashi {width: 90%; max-width:562px; margin:0 5% }
.mess .nao .tit img{position: absolute; top: 20%; left: 5%; max-width:141px; width: 22% }
.mess .text01{text-align: left; padding: 20px 5% 50px; line-height: 2; margin-bottom: 60px}

.moushi{text-align: center; padding: 30px 0 60px ;background: url(../img/bg.jpg) repeat;}
.moushi .text{letter-spacing: -1px; padding-bottom: 40px ; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
.moushi a{font-size:clamp(1.875rem, 0.625rem + 6.25vw, 3.125rem) }/*30-50*/
.moushi .font-s{ padding-top: 10px; color: red; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/



@media (min-width: 640px){
.muti{min-height: 1378px; background: url(../img/day/en.png) no-repeat center 80px; background-size: 100%;}
.muti h2{ padding-bottom: 120px;}
.muti .pic{ margin: 60px 5% 20px 6%;}
.muti .goshi{margin-bottom:30px }
.flowcont img{width: 100%}
.coursebox dd span{line-height: 1.6}

.teni{padding-top: 50px}
.loadbox { background: url(../img/bg2a.png) no-repeat center -60px; background-size: 100%;}
}



@media (min-width: 1100px){
.mainhead .text01 img{top: 3%; left: 2% }
}