/* ====== 共通 ====== */
body {font-family: "Noto Sans JP", sans-serif; line-height: 1.8;}
.section-title {text-align:center; font-weight:700; font-size:2rem;display: inline-block;  font-family: "M PLUS 1", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal; }
.section-title span.color {color:#0e3f99;font-size: 2.5rem;}

.py-5 {
  background: #65d3e7;
  position: relative;
  padding-top: 6rem !important;
  padding-bottom: 8rem !important;
}
/* ヒーロー */
.hero{background:url('images/hero.png') center/cover no-repeat;height:80vh;text-shadow:1px1px4px #000;}
/* 理由カード */
.reason-card img{height:200px;object-fit:cover;}
/* タイムライン */
.timeline{list-style:none;padding:0;position:relative;}
.timeline::before{content:"";position:absolute;left:28px;top:0;bottom:0;width:4px;background:#1361f2;}
.timeline li{margin-left: 60px;
  margin-bottom: 25px;
  position: relative;
  background: white;
  padding: 20px;
  border-radius: 10px;}
.timeline .time{font-weight:700;margin-right:10px;color:#1361f2;}
.timeline li::before{content:"";position:absolute;left:-38px;top:29px;width:16px;height:16px;border-radius:50%;background:#1361f2;}
/* テストモニアル */
.testimonial{border-left:4px solid #1361f2;padding-left:1rem;font-style:italic;}
/* フローティングボタン */
.floating-btn{position:fixed;right:50px;bottom:25px;width:100px;height:100px;z-index:1030;background: #00479b;}
.container-title {
    text-align: center;
}
.floating-btn{
      position:fixed;
      bottom:50px;
      height:100px;
      text-align: center;            /* 横余白を持たせて文字を入れる */
      border-radius:100px;/* 円 ⇒ 角丸ピル型 */
      width:100px;
      color: white;            /* コンテンツに合わせて伸びる */
      font-size:1rem;
      border: 5px solid #ffc112;
      transition:transform .25s;
    }
    .floating-btn:hover{transform:scale(1.08);}
    
    /* アイコンは少し大きく */
    .floating-btn .bi{font-size:1.25rem;}
    
    /* ◆ モバイル（～540px）はアイコンだけにして省スペース ◆ */
    @media (max-width:540px){
      .floating-btn{
      }
    
    }
/* ===== チャット ===== */
.chat-wrapper{
    position:fixed;right:20px;bottom:95px;width:320px;height:480px;
background:#fff;border-radius:12px;box-shadow:0 0 20px rgba(0,0,0,.2);
display:none;flex-direction:column;z-index:1040;overflow:auto;
}
.chat-header{background:#1361f2;color:#fff;padding:.6rem 1rem;font-weight:700;  position:sticky;   /* 親要素がスクロールしても上部に張り付く */
  top:0;
  z-index:2;}
.chat-body{flex:1;padding:.8rem;overflow-y:scroll;background:#fafafa;}
.chat-bubble{max-width:80%;padding:.6rem .8rem;border-radius:16px;margin-bottom:10px;font-size:.9rem;}
.chat-bubble.user{margin-left:auto;background:#e1ffc7;}
.chat-bubble.bot{background:#fff;border:1px solid #ddd;}
.chat-input-area{

        padding:.6rem;
        background:#fff;
        border-top:1px solid #ddd;
        max-height:50%;
        overflow-y:auto;
}

/* ===== チャット ===== */


/* --- モバイルは全画面 --- */
@media (max-width:767.98px){
  .chat-wrapper{
    top:0;left:0;right:0;bottom:0;width:100%;height:100%;border-radius:0;
  }
}



/* --- ヒーロー背景 --- */
.hero{
    background:url('images/hero/bg.png') center/cover no-repeat;
    height:100svh;min-height:520px;color:#fff;
    
  }


  .hero__inner {
  display: grid;
  place-items: center normal;
  height: 100vh;
  }
  .hero__copy { flex: 0 0 42%; margin: 0; }
  .hero__kv   { flex: 0 0 50%; max-width: none; }
  /* --- 全ヒーロー画像共通 --- */
  .hero-img{
    position:absolute;max-width:100%;height:auto;
    will-change:transform,opacity;
  }
  /* ▼ 位置指定（1920px 基準を px で書き、狭い幅では中央寄せに） */
  .frame-up   {top:-50px;left:0;width:100%;}
  .frame-down {bottom:-50px;left:0;width:100%;}
  .keyphoto   {top:156px;right:56px;width:45vw;flex: 0 0 50%; max-width: none;}
    .award   {top:156px;right:56px;width:30vw;flex: 0 0 50%; max-width:260px;}
  .copy       
  {
    align-items: center;
    justify-content: start;
    width:55vw;
    z-index: 2;
    position: relative;
    top: -150px;
    left: 10%;
  }
  .subphoto   {top:8%;left:8%;width:20vw;z-index: 1;}
  .subphoto2   {bottom:18vh;left:26%;width:15vw;z-index: 1;}
  .illust1{top:156px;right:100px;width:100px;}
  .illust2{top:109px;left:50%;transform:translateX(-50%);width:120px;}
  .illust3{top:74px;left:25%;width:140px;}
  .illust4{top:162px;left:86px;width:110px;}
  .illust5{bottom:93px;right:276px;width:120px;}
  .illust6{bottom:207px;left:35%;width:140px;}
  .illust7{bottom:295px;right:115px;width:110px;}
  .illust8{bottom:144px;left:94px;width:90px;}
  .py-5.bg-light {
    background-color: #fff!important;
  }

  .card {
    border-radius: 20px;
    padding: 30px;
    border: none;
  }
  /* ボタンを前面に */
  /* ===== CTA ボタン（強調版） ===== */
  .hero-cta{
      position:absolute;
      bottom:18%;
      left:50%;
      transform:translateX(-50%);
      z-index: 10;
      /* サイズ＆視認性アップ */
      font-size:1.4rem;          /* 旧 btn-lg は 1.25rem */
      padding:20px 100px;      /* 横にたっぷり余白 */
      border:none;
      border-radius:60px;
    font-weight: bold;
      /* グラデーション＋立体感 */
      background: #00479b;
      color:#fff;
      /* 軽いアニメで “目に留まる” */
      animation:ctaPulse 2.5s ease-in-out infinite;
      transition:all .25s;
      border: 6px solid #ffc112;
    }
    .hero-cta:hover,
    .hero-cta:focus{
      transform:translateX(-50%) scale(1.05);
      background: #ffc112;
    }

    .hero-cta i{
      position: absolute;
      right: 40px;
      top:39%;         /* テキストとの間隔 */
    }

    .hero-cta::after {
      content: "";
    }
    
    /* パルスキー */



  /* --- レスポンシブ調整 --- */
  @media (max-width:1180px){
    .keyphoto{top:20vh;right:1%;width:55vw;}
    .copy{top:22vh;left:37%;transform:translate(-50%,-50%);width:65vw;}
    .subphoto{top:10vh;bottom:15vh;left:5%;width:30vw;}
    .subphoto2{bottom:10vh;right:10%;width:20vw;z-index: 1;}
    .award{top:10vh;right:10px;}
    .hero-cta {
      bottom: 10%;
      padding: 20px 60px; /* 横幅を狭く */
    }
  }
    @media (max-width:1024px){
      .copy{top: 16vh;}
      .subphoto2{bottom:20vh;left: 20vw;}
    }

  @media (max-width:991.98px){
    .keyphoto{top:55vh;right:4%;width:80vw;}
    .copy{top:8vh;left:50%;transform:translate(-50%,-50%);width:90vw;}
    .subphoto{top:10vh;bottom:15vh;left:5%;width:45vw;}
    .subphoto2{top:20vh;left:64%;width:30vw;z-index: 1;}
    .award{top:69vh;right:auto;}
    .hero-cta {
      bottom: 10%;
      padding: 20px 60px; /* 横幅を狭く */
    }
  }
      /* モバイルは少し小さめに調整 */
      @media (max-width:768px){
            .award{top:4vh;right:2%;}
             .subphoto2{top:52vh;left:4%;}
             .keyphoto{top:48vh;}
        .hero-cta{
          font-size:1.1rem;
          padding:1.2rem 2.4rem;
          width: 80%;
          bottom: 3%;
          text-align: center;
          display: inline-block;
        }
      }
  
.facility-swiper img {
  height: 240px;
  width: 100%;
  object-fit: cover;
}
  
  .section-title{
    position:relative;
    overflow:hidden;
                /* 疑似要素がはみ出ても影響なし */
  }
  .section-title span{
    position:relative;z-index: 2;
    padding: 15px 0 40px;
    display: block;     
    z-index: 1;                           /* ★ 指定色 */
  }

  .section-title span.color {
    padding: 15px 0 10px;
  }

 

  .section-title::after{
    content:"";
    display: inline;
    position:absolute;left:0;bottom:-4px;          /* 見出し文字のすぐ下 */
    width:150px;height:20px;                          /* ★ 太さ 8px */
    background:#ffc112;                             /* ★ 指定色 */
    transform:scaleX(0);transform-origin:left;
    transition:transform .6s ease-out;
    z-index: 0;
    margin: auto;
    right: 0;
  }
  .section-title.is-visible::after{                 /* 可視化トリガー */
    transform:scaleX(1);
  }
  /* ▼ スマホ幅では“全画面モード”に切替 */
@media (max-width:767.98px){
    .chat-wrapper{
      top:0;left:0;right:0;bottom:0;         /* 画面いっぱい */
      width:100vw;height:100svh;             /* Safari アドレスバー対策は svh を併記 */
      border-radius:0;
      box-shadow:none;
    }
    /* ヘッダーを少し大きくしてタップしやすく */
    .chat-header{padding:.9rem 1.2rem;font-size:1rem;}

    .facility-swiper img {
      height: auto;
      width: 100%;
      object-fit: cover;
    }
  }
  
  /* ===== 入力欄のフォントサイズを 16px 以上にして“自動ズーム”抑止 ===== */
  .chat-input-area .form-control,
  .chat-input-area select,
  .chat-input-area input,
  .chat-input-area .form-check-label{
    font-size:16px;             /* ★ iOS Safari は 16px 未満で自動拡大 */
  }
  .chat-input-area .form-check-input{
    width:20px;height:20px;     /* タップしやすさ向上 */
  }

  body.no-scroll{
    overflow:hidden;
    position:fixed;          /* iOS での慣性スクロール抑止 */
    width:100%;
  }

  /* ===== copy（テキスト画像）のデバイス別出し分け ===== */

@media (max-width:767.98px){           /* スマホ判定 */
  .copy.pc{display:none;}             /* PC用を消す */
  .copy.sp{display:block;}            /* SP用を出す */
}

.floating-btn{
    opacity:0;
    pointer-events:none;
    transition:opacity .35s, transform .25s;
  }
  /* 表示トリガー用クラス */
  .floating-btn.visible{
    opacity:1;
    pointer-events:auto;
  }

  /* ===== チャット：アバター付き ===== */
.chat-row{display:flex;gap:.5rem;margin-bottom:12px;}
.chat-row.user{justify-content:flex-end;}
.chat-row .avatar{
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;object-fit:cover;
}
.chat-row .chat-bubble{margin:0;max-width:80%;}

/* ===== スクロールインジケータ ===== */
.scroll-indicator{
    position:absolute;left:50%;bottom:0px;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;
    pointer-events:none;z-index:9;
  }
  .scroll-indicator::after{                   /* 実際の伸びる線 */
  content:"";
  position:absolute;left:0;top:0;
  width:100%;height:0;
  background:#fff;                         /* 線の色 */
  animation:scrollLine 1.8s ease-in-out infinite;
}
.scroll-label{
   margin-top:6px;
   font-size:.7rem;letter-spacing:.25em;
   color:#fff;opacity:.8;
   user-select:none;
  }
@keyframes scrollLine{
  0%   {height:0;opacity:0;}
  40%  {opacity:1;}
  80%  {height:100%;opacity:0;}
  100% {height:0;opacity:0;}
}

/* ------ モバイル調整（必要ならサイズ縮小） ------ */
@media (max-width:767.98px){
  .scroll-indicator{height:30px;}
}


/* ===== ナビゲーション ===== */
.main-nav{

  transition:background .3s;
  z-index:1050;                            /* ヒーロー画像より前面 */
}
.main-nav .navbar-brand{font-weight:700;font-size:1.1rem;}
.main-nav .nav-link{color:#fff;opacity:.85;}
.main-nav .nav-link:hover{opacity:1;}


/* ハンバーガーアイコン色 */
.navbar-toggler{border:0;
  /* width: 80px; */
  background: #00479b;
  padding: 19px;}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

/* 参加者の声カード調整（任意） */
.swiper, swiper-container{
  padding: 50px;
}
.swiper-wrapper {
  margin-bottom: 25px;;
}
.voices-swiper .card{border-radius:12px;padding: 20px;height: 200px;display: flex;}
.voices-swiper .testimonial{border:none;font-style:normal;}
/* ===== 参加者の声 横並びレイアウト ===== */
.voice-card{border-radius:12px;background:#d9efee;min-height: 200px;padding: 25px;}
.voice-card img{
  width:100%;height:auto;          /* 親divの幅にフィット */
  aspect-ratio:1/1;object-fit:cover;border-radius:50%;
}

/* 幅配分：画像30% テキスト70% */
.voice-img{flex:0 0 20%;}
.voice-card blockquote{flex:1;font-style:normal;border:none;}
.voice-card p{font-size:.9rem;line-height:1.5;}

.trial-card{border:none;}


.accordion-body {
  background-color: #faf9ed;
  padding-left: 50px;
}

.fs30 {
  font-size: 30px;
}

.floating-hidden{display:none !important;}

.section-title span.small {
  font-size: 1.4rem;
  padding-bottom: 10px;;
}

.card-body 
{
  padding: 20px 0;
}




/* 汎用 */
.block       { position: relative; overflow: hidden; }
.container   { width: 100%; }

/* 背景色ごとに色だけ変える */
.block--blue { background:#65d3e7; }
.block--white{ background:#fff;     }

/* 波（共通） */
.wave{
  position:absolute; left:0; width:100%; height:80px;
  pointer-events:none; 
  z-index: 3;       /* クリックを邪魔しない */
}
.wave--bottom{bottom: -22px;
}
.rotate {
    transform: rotate(180deg); 
  }   /* 下フチに貼り付け */
.wave--top   { top:-1px;   }    /* 上フチに貼り付け */

.card-title {
    color: #0e3f99;
    font-family: "M PLUS 1", sans-serif;
}

/* =========================================================
   Swiper ナビゲーション矢印 かわいい版
   ========================================================= */
/* 共通 */
.swiper-button-next,
.swiper-button-prev{
  --size: 52px;                /* ボタン直径（変数にして使い回し） */
  position: absolute;          /* Swiper デフォルトを上書き */
  top: 50%;                    /* 垂直中央 */
  transform: translateY(-50%);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #0e3f99;         /* パステルピンク */
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  cursor: pointer;
  transition: background .3s, transform .25s;
  z-index: 10;                 /* ページャーより前面に */
}

/* 矢印アイコン（擬似要素で描画） */
.swiper-button-next::after,
.swiper-button-prev::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  border: 4px solid #fff;      /* 白線で描く */
  border-left: none;
  border-bottom: none;
  transform: translate(-50%,-50%) rotate(45deg); /* →向き */
}

/* ←側は向きを逆に */
.swiper-button-prev::after{
  transform: translate(-50%,-50%) rotate(-135deg);
}

/* ホバー／フォーカス時：色＆ポップ */
.swiper-button-next:hover,
.swiper-button-prev:hover,
.swiper-button-next:focus,
.swiper-button-prev:focus{
  background: #ffc112;         /* キーブランド色にチェンジ */
  transform: translateY(-50%) scale(1.1);
}

/* 押下アニメ（クリック時） */
.swiper-button-next:active,
.swiper-button-prev:active{
  transform: translateY(-50%) scale(.95);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* 無効状態（ループ無し／端で非表示にしたい時） */
.swiper-button-disabled{
  opacity: .35;
  pointer-events: none;
}

/* ===== 位置調整（お好みで）============================== */
/* デフォルトではスライダー右端 / 左端に貼り付く。
   中央より外側に少し出したい場合は下記を有効化 */
/*
.swiper-button-next{ right: -28px; }
.swiper-button-prev{ left:  -28px; }
*/

/* ===== モバイルは少し小さく ============================ */
@media (max-width: 767.98px){
  .swiper-button-next,
  .swiper-button-prev{ --size: 42px; }
  .swiper-button-next::after,
  .swiper-button-prev::after{ width: 14px; height: 14px; }
}


.bg-orange {
  background: #ffdfa4;
}

footer {
      background: #51b3b5;
      color: white;
}

figcaption {
  padding: 10px 0;
}

/* ===== Loader 基本 ===== */
.loader-overlay{
    position:fixed; inset:0; z-index:2000;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#65d3e7;           /* ブランディング水色 */
    transition:opacity .5s ease;
}
.loader-overlay.fadeout{
    opacity:0; pointer-events:none;
}

/* ===== テキスト軽い点滅 ===== */
.loader-text{
    color:#fff; font-size:1.25rem; letter-spacing:.1em;
    animation:textBlink 2s ease-in-out infinite;
}
@keyframes textBlink{0%,100%{opacity:1}50%{opacity:.45}}

/* ===== 1層だけの波 ===== */
.wave{
    position:absolute; bottom:0; width:200%; height:120px;
   
}
@keyframes waveSlide{to{transform:translateX(-50%);}}


.img-fluid {
    max-width: 100%;
    height: 293px;
    width: 100%;
    object-fit: cover;
}




/* CTA */
.hero-cta{

  animation:ctaPulse 2.5s ease-in-out infinite;
  transition:all .25s;z-index:10;
}
.hero-cta:hover,
.hero-cta:focus{
  transform:translateX(-50%) scale(1.05);
}
.hero-cta i{position:absolute;right:40px;top:39%;}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(16, 136, 255, 0.6);}
  50%   {box-shadow:0 0 0 20px rgba(247,147,30,0);}
}