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

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

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

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: -80px; margin: 0 10%; }
.mainhead h2 img{max-width:419px; }
/*--------------------------------------------------------------------

mainhead

--------------------------------------------------------------------*/
.nimu{text-align: center; padding: 50px 0 ; background: url(../img/day/en.png) no-repeat center 65%; background-size: 100%;}
.nimu h2{margin: 0 5%}
.nimu h2 img{max-width:540px }
.nimu .text01{padding: 20px 0 40px; font-size:clamp(0.75rem, 0.563rem + 0.94vw, 0.938rem) }/*12-15*/
.nimu .text01 span{font-size: clamp(0.875rem, 0.375rem + 2.5vw, 1.375rem)}/*14-22*/

.nimu ul{padding: 0 12% 0 6%; }
.nimu li{display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row-reverse; margin-bottom: 30px }
.nimu li .tit{width: 10%}
.nimu li img{width: 85%}
.nimu li .tit .pic{ margin-top: -25px; padding-bottom: 10px;}
.nimu li .tit .pic img{max-width: 80px; width: 170%}
.nimu li .tate{font-size: clamp(0.625rem, 0.5rem + 0.63vw, 0.75rem)}/*10-12*/
.nimu li h3{line-height: 1.6; text-align: left; font-size:clamp(1.625rem, 1.063rem + 2.81vw, 2.188rem) }/*26-35*/
.nimu li .sub{letter-spacing: 10-1px}

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

flow

--------------------------------------------------------------------*/
.flow{text-align: center ; padding-bottom: 40px;}
.flow h2{margin: 0 5% 20px}
.flow h2 img{max-width:560px }
.flow ul{display: flex; justify-content: space-between; margin: 0 5% ; flex-wrap:wrap}
.flow li{border-radius: 0 0 20px 20px ; background:#f3eced;  margin-bottom: 30px; width: 48%; font-size:clamp(0.688rem, 0.563rem + 0.63vw, 0.813rem)}/*11-13*/
.flow li .text{text-align: left; padding: 0 10px 20px}
.flow li .tit{line-height: 1.6; padding: 10px 0 5px; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem)}/*13-15*/


.baseBox{background: url(../img/bg.jpg) repeat; padding: 50px 0; text-align: center}
.baseBox .text001{margin-bottom: 30px; font-size:clamp(1.438rem, 0.75rem + 3.44vw, 2.125rem) }/*23-34*/
.base{ padding: 30px 0 10px 15%; text-align: left;position: relative; background: #fff; border-radius: 0 80px 0 0 ; margin-right: 3% ; line-height: 1.7; }
.base .tex{max-width: 95px; position: absolute; right: 5%; top: -20px; width: 20%}
.base .text01{padding-bottom: 5px; 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: 30px }
.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 20px 0 0; font-size:clamp(0.75rem, 0.375rem + 1.88vw, 1.125rem) }/*12-18*/
.base li{margin-bottom: 20px;padding-bottom: 20px; border-bottom: 1px dashed #bea6aa }
.base li:last-child{margin-bottom: 0; border: none; padding-bottom: 0}
.base li span{margin-bottom: 10px; display: inline-block; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/
.base li a.btta {width: 100%; text-align: center; display: block; transition: .3s; box-shadow: 0 0 8px #80747d; border-radius: 10px 0 10px 0; color: #fff; padding: 10px 0 5px ; background:#91808d; }
.base a.btta span{margin-bottom: 10px; display: inline-block;}
.base a.btta:hover{ box-shadow: none}


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

.cunse

--------------------------------------------------------------------*/
.cunse{padding: 50px 0 40px }

.cunse h2{font-weight: 700; line-height: 1.5; background: url("../img/bikakusei-method/kako.png") no-repeat center 0px; background-size: 100%; font-size:clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem) }/*20-30*/
.cunse h2 span{letter-spacing: -1px}

.cunse .text01{line-height: 1.5; padding: 20px 0 0;  font-size:clamp(0.875rem, 0.563rem + 1.56vw, 1.188rem)}/*14-19*/
.cunse .scr{margin-left: 5%}
.cunse .sctext{max-width:132px ; width: 25%; margin-top: 20px}
.cunse .rlmove {padding-bottom: 20px ; margin-top: -10px}
.cunse .text02{font-weight: 700; font-size:clamp(0.938rem, 0.563rem + 1.88vw, 1.313rem) }/*15-21*/

/* アニメーションの定義 */
@keyframes slide {
  /* 0% (開始時): 右へ100px移動 */
  0% {
    transform: translateX(80px);
  }
  /* 100% (終了時): 左へ100px移動 */
  100% {
    transform: translateX(150px);
  }
}

/* 画像にアニメーションを適用 */
.moving-image {max-width:200px; width: 40% ;
  /* display: block; は必要に応じて */
  display: block;
  
  /* アニメーション設定 */
  animation-name: slide;        /* 定義した@keyframesの名前 */
  animation-duration: 3s;       /* 3秒かけて移動 */
  animation-timing-function: linear; /* 動きの速さ（一定） */
  animation-iteration-count: infinite; /* 無限に繰り返す */
  animation-direction: alternate; /* 往復再生（100%から0%へ戻る） */
}


.scroll-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px;
  margin: 0;
  list-style: none;
  max-width: 640px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.scroll-container::-webkit-scrollbar {
  height: 8px;
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.scroll-container li {
  flex-shrink: 0;
}

.scroll-container img {
  display: block; width: 300px;
  height: auto;
  border-radius: 8px;
}


.baseBox2{ padding-top: 20px}
.baseBox2 .b02{position: relative; padding: 20px 15% 20px 0; margin: 0 0 0 3%;  text-align: right; background: #fff; border-radius: 80px 0 0 80px }
.baseBox2 .b02 ul{margin: 0 0 0 20px}
.baseBox2 .b02 .ba{right: 5%; left: auto}
.baseBox2 .b02 .kando{ max-width:43px; position: absolute; top: -5px; left: 2%; width: 15%}
.baseBox2 .b02 .rial{max-width:502px; margin-right: -10% }
.baseBox2 .b03{margin: 70px 0 30px; margin-right: 3%; border-radius: 0 80px 80px 0}
.baseBox2 .b03 .tt{padding-top: 10px}
.baseBox2 .b03 span.hoge{padding-top: 10px; display: block; margin-bottom: 20px}
.baseBox2 .b03 .tex{max-width: 42px; position: absolute; right: 2%; top: -5px; width: 9%}
.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;    /* 枠いっぱいに敷きつめ、上下カット */
      }
    }
.baseBox2 .cli{padding: 0 0 0 20px}
.baseBox2 .ya{max-width:57px; width: 13% }
.baseBox2 .click{max-width:382px; width: 70%; position: relative; top: -10px}
.baseBox2 .text04{margin-left: -10%; text-align: center; padding: 20px 0 30px; font-size:clamp(1.125rem, 0.5rem + 3.13vw, 1.75rem) }/*81-28*/


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

.nayami

--------------------------------------------------------------------*/
.nayami{position: relative; margin: 0 2%; font-size:clamp(0.75rem, 0.125rem + 3.13vw, 1.375rem) }/*12-22*/
.nayami .tit{text-align: center; width: 80%; position: absolute; top: 15%; left: 50%; transform: translateX(-50%); }
.nayami .tit img{max-width: 500px; }
.nayami ul{position: absolute; top: 39%; width: 95%; margin: 0 0 0 5%}
.nayami li {margin-bottom: 10px; font-weight: 700 ; font-size:clamp(0.813rem, 0.125rem + 3.44vw, 1.5rem)}/*13-24*/
.nayami li img{width:20px; vertical-align: middle ; position: relative; top: -5px}

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

.nayamibox

--------------------------------------------------------------------*/
.nayamibox .naya{ margin-bottom: 30px}

.vobox{margin: 40px 5% }
.vobox .tit{padding-bottom: 60px }
.vobox .tit img{max-width:580px ;}
.vobox li{margin-bottom: 80px; position: relative; background: #fff; padding: 0 30px 30px; border-radius: 20px ; box-shadow: 6px 6px #b6aeba}
.vobox li:last-child{margin-bottom: 110px}
.vobox li .name{position: relative; top: -30px; left: -30px  }
.vobox li .name img{max-width:437px; }
.vobox li .kao{position: absolute; right: 0; top: -35px; max-width:110px; width: 20% }

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

.metho

--------------------------------------------------------------------*/
.metho{padding: 30px 5% 50px; position: relative; background: url("../img/bikakusei-method/method.png") no-repeat center top #000; background-size: 100%}
.metho dfn{position: absolute; top: -40px; right: 5%; display: inline-block; color: #fff; background:#9d656e; padding: 20px 0 ; font-size: clamp(1.625rem, 0.875rem + 3.75vw, 2.375rem)}/*26-38*/
.metho dfn span{font-size: clamp(0.813rem, 0.625rem + 0.94vw, 1rem)}/*13-16*/
.metho .te{max-width: 221px; width: 40% ; margin-bottom: 30px}


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

.bg2

--------------------------------------------------------------------*/
.bg2{background: url(../img/bg.jpg) repeat; padding-top: 100px; }
.loadbox{background: url(../img/bg2a.png) no-repeat;
    background-size: 100%;
    text-align: center;}
.flowcont .bu{text-align: center; display: flex; line-height: 0.1; margin: 0 5% ; font-size:clamp(0.938rem, 0.75rem + 0.94vw, 1.125rem);}/*15-18*/
.flowcont .bu span{position: relative; top: -4px; font-size:clamp(1.625rem, 0.75rem + 4.38vw, 2.5rem) }/*26-40*/
.flowcont .bu:before,
.flowcont .bu:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #c7c7c7;
}
.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: 40px; 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 a.btta {margin: 40px auto; text-align: center; display: block; width: 80%; transition: .3s; box-shadow: 0 0 8px #80747d; border-radius: 10px 0 10px 0; 
color: #fff; padding: 20px 0 ; background:#91808d; }
.flowcont a.btta span{margin-bottom: 10px; display: inline-block; font-size:clamp(1.313rem, 0.75rem + 2.81vw, 1.875rem)}/*21-30*/
.flowcont a.btta:hover{ box-shadow: none}

.dai2{padding-bottom: 80px}

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


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

.coursebox

--------------------------------------------------------------------*/
.coursebox{ background: url(../img/bg.jpg) repeat; padding: 100px 5% 0px}
.coursebox h2{margin:0 5% 30px; text-align: center}
.coursebox h2 img{max-width: 340px ; width: 80%;}

.coursebox .cou01{position: relative; border-radius: 20px; border: 1px solid #91808d; padding: 5% }

.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 .cou02{margin: 30px 0 0px}
.coursebox .cou02 h3{margin-bottom: 20px; }
.coursebox dl{display: flex; justify-content: space-between; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed #91808d}
.coursebox dl:last-child{margin-bottom: 0}
.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*/


.messbg{text-align: center; padding: 20px 0 0px ; position: relative ; background: url(../img/bg.jpg) repeat;}
.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:243px; width: 37% }
.mess .text01{text-align: left; padding: 20px 5% 50px; line-height: 2; margin-bottom: 60px}


.moushi{padding: 30px 0 80px; min-height: 900px;
    background: url(../img/day/en.png) no-repeat center 30px;
    background-size: 100%;}
.moushi .text{margin: 30px 5% 20px;}
.moushi .text img{max-width:485px }
.moushi .text0{text-align: left; margin: 0 5% 30px}

.moushi a.btt{font-size:clamp(1.375rem, 0.125rem + 6.25vw, 2.625rem) }/*22-42*/
.moushi ul{margin: 0 5%}
.moushi li{border-bottom: 1px dashed #91808d; padding-bottom: 20px; margin-bottom: 20px}
.moushi li a{ color: #000; display: flex; justify-content: space-between; align-items: flex-start;}
.moushi li img{width: 5%; margin-top: 15px}
.moushi li .ov01{width:90%; text-align: left}
.moushi li .come{line-height: 1.5; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/
.moushi li .ctit{color: #8c4a55; letter-spacing: -1px; font-size:clamp(1.375rem, 1rem + 1.88vw, 1.75rem) }/*22-28*/

.moushi li .ctit span{font-size:clamp(0.875rem, 0.688rem + 0.94vw, 1.063rem) }/*14-17*/
.moushi li .lin{transition: .3s; box-shadow: 0 0 8px #80747d; margin-top: 10px; text-align: center; background:#91808d; color: #fff; border-radius: 10px }
.moushi .font-s{ padding-top: 10px; color: red; font-size:clamp(0.813rem, 0.688rem + 0.63vw, 0.938rem) }/*13-15*/

.moushi li a:hover .lin{box-shadow: none}
.moushi .irino{padding-bottom: 10px}

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

.scroll-container img{width: 500px}
.mess .nao .tit img{top: 22%}
}



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

nav.globalMenuSp ul li.cont .pcno{display: none !important}
.pcmenuflex a.btt {font-size: 16px ; margin:20px 0 0}


}