:root{
  --header-bg:#111;
  --fg:#fff;
  --line:rgba(255,255,255,.12);
  --panel:#1a1a1a;
  --tap:rgba(255,255,255,.08);

  /* 高さは端末で可変 */
  --header-h:56px;          /* ~639px */
}
@media (min-width:640px){
  :root{ --header-h:64px; } /* 640px~ */
}

#offer,
#point,
#lineup,
#benefit,
#schedule,
#payment,
#information {
  margin-top:-50px;
  padding-top: 50px;
}

/* 上部固定＋全幅 */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: var(--fg);
  /* iOSノッチ対応（任意） */
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
background: linear-gradient(to right,  #82c039 0%,#005ca7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

/* 中身は最大幅1040pxに中央寄せ */
.header-inner{
  max-width: 1040px;
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width:640px){
  .header-inner{ padding: 0 20px; }
}

.logo img{ display:block; height:32px; width:auto; }

/* 右側（ボタン3つ＋ハンバーガー） */
.right-actions{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.action-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:36px; border-radius:10px;
  background:transparent; transition:background .15s ease;
}
.action-btn:hover{ background:var(--tap); }
.action-btn img{ width:36px; height:36px; display:block; }

/* ハンバーガー（3本線は前回の安定版） */
.nav-toggle{ display:none; }
.hamburger{
  position:relative;
  width:42px; height:36px;
  border-radius:10px; display:inline-block;
  cursor:pointer; transition:background .15s ease;
  font-size:0; line-height:0;
}
.hamburger:hover{ background:var(--tap); }
.hamburger span{
  position:absolute; left:50%; top:50%;
  width:22px; height:2px; background:var(--fg);
  transform:translate(-50%, -50%);
  border-radius:1px; margin:0; padding:0;
}
.hamburger span:nth-child(1){ transform:translate(-50%, calc(-50% - 6px)); }
.hamburger span:nth-child(2){ transform:translate(-50%, -50%); }
.hamburger span:nth-child(3){ transform:translate(-50%, calc(-50% + 6px)); }
.site-header.is-open .hamburger span:nth-child(1){ transform:translate(-50%, -50%) rotate(45deg); }
.site-header.is-open .hamburger span:nth-child(2){ opacity:0; }
.site-header.is-open .hamburger span:nth-child(3){ transform:translate(-50%, -50%) rotate(-45deg); }

/* 下方向に開くメニュー */
.menu-panel{
  background:var(--panel);
  border-bottom:0;
  overflow:hidden;
  max-height:0;
  transition:max-height .25s ease;
  background: linear-gradient(to right,  #82c039 0%,#005ca7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.site-header.is-open .menu-panel{ max-height:320px; } /* 必要なら調整 */
.menu-panel ul{
  max-width:1040px; margin:0 auto;
  padding:8px 16px 14px;
  list-style:none; display:grid; gap:4px;
}
@media (min-width:640px){
  .menu-panel ul{ padding:8px 20px 14px; }
}
.menu-panel a{
  display:block; padding:10px 8px; border-radius:8px;
  color:var(--fg); text-decoration:none; line-height:1.2;
}
.menu-panel a:hover{ background:var(--tap); }

/* 固定ヘッダー分の押し上げ（ページ本文用） */
body{
  /* メニュー展開はオーバーレイ表示。本文はヘッダーバーの高さ分だけ下げる */
  padding-top: var(--header-h);
  margin:0;

  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;

  line-height: 1.35;
}

/* 画像のベースラインずれ対策 */
img{ vertical-align: middle; }


h2 {
    
}
h2 img {
    width: auto;
    height: 100%;
}

h3 {
    height: auto;
    width: 500px;
    text-align: center;
    display:block;
    margin:10vw auto 3vw;
  }
  h3 img{
    display:block; width:100%; height:100%;
  }

h4 {
    height: auto;
    width: 500px;
    text-align: center;
    display:block;
    margin:4vw auto 3vw;
  }
  h4 img{
    display:block; width:100%; height:100%;
  }

h5 {
  font-size: 1.25rem;
  text-align: center;
  margin:2rem 0 1rem 0;
}

a.btn {
  width:400px;
  display: block;
  margin:3rem auto;
}
a.btn img {
  width: 100%;
}

section {

}

.section-kv {
    width: 100%;
    background:url(images/kv.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kv_inner {
    padding-top: 15vw;
    padding-bottom: 5vw;
    width: 60%;
    max-width: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    @media (max-width:640px){
        .kv_inner {
            padding-top: 15rem;
            padding-bottom: 3rem;
            width: 85%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        h3 {
          height: auto;
          width: 300px;
          text-align: center;
          display:block;
          margin:10vw auto 3vw;
        }
        h4 {
          height: auto;
          width: 100%;
          text-align: center;
          display:block;
          margin:4vw auto 3vw;
        }
        a.btn {
          width:300px;
          display: block;
          margin:2rem auto;
        }
    }
.kv_inner img {
    width: 100%;
    display: block;
}

.section_inner {
  max-width: 1040px;
  margin: 16px auto;
  padding: 0 16px;
}
.section_inner img {
  width: 100%;
  margin:0.5rem 0;
}
.section_inner p {
  padding: 0 16px;
  text-align: justify;
}
.section_inner p.center {
  text-align: center;
}
.section_inner p span {
  color: #666;
}

.section-featured{
    max-width: 1040px;
    margin: 16px auto;
    padding: 0 16px;
  }
  @media (max-width:640px){
    .section_inner {
      max-width: 100%;
      margin: 16px auto;
      padding: 0 10px;
    }
    .section-featured{ padding: 0 20px; }

    .section_inner p {
      padding: 0 0px;
    }
    .section_inner p.center {
    text-align: justify;
  }
  }

  .h2-image {
    height: auto;
    width: 400px;
    text-align: center;
    display:block;
    margin:10vw auto 3vw;
  }
  .h2-image img{
    display:block; width:100%; height:100%;
  }
  .visually-hidden{
    position:absolute!important; width:1px; height:1px;
    margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0;
  }

  @media (max-width:640px){
      .h2-image {
        height: auto;
        width: 300px;
        text-align: center;
        display:block;
        margin:20vw auto 3vw;
      }
  }

/* ===== Footer base ===== */
  .site-footer{
    width: 100%;
    background: #82C039;   /* 指定色 */
    color: #000;           /* 文字は黒 */
  }
  .site-footer a{ color: inherit; text-decoration: none; }
  .site-footer a:hover{ text-decoration: underline; }

  /* 幅はここまでと同じ：max 1040 / 640pxブレーク */
  .footer-inner{
    max-width: 1040px;
    margin: 0 auto;
    padding: 40px 16px 20px;
    display: block;
    text-align: center;
  }
  .footer-logo {
    width: 8rem;
    display: block;
    margin:auto;
  }
  .footer-logo img {
    width: 100%;
  }
  h2#footer-heading {
    background: #000;
    color: #82C039;
    display: inline-block;
    padding:0.25rem 10rem;
  }
  .footer-address p {
    font-size: 1.2rem;
    margin:0.25rem 0;
  }
  .footer-copy {
    font-size: 1rem;
  }

  .formlink {
    padding: 1rem 2rem;
    border: 1px solid #000;
    display: inline-block;
  }
  @media (max-width:640px){
    .footer-inner{
      padding: 20px 12px 5px;
    }
    .footer-content {
      padding-bottom: 30px;
    }
    .footer-logo {
      width: 6rem;
    }
    h2#footer-heading {
      padding:0.25rem 4rem;
      font-size:1.2rem;
    }
    .footer-address p {
      font-size: 0.85rem;
      margin:0.25rem 0;
      line-height: 1.1;
    }
    .footer-copy {
      font-size: 0.85rem;
      margin:20vw 0 0 0;
    }
  }


  /* スライダー */

  .section-featured{ max-width:1040px; margin:16px auto; padding:0 16px; }
  @media (min-width:640px){ .section-featured{ padding:0 20px; } }
  .h2-image img{ display:block; width:100%; height:auto; }
  .visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; }
  .card{ display:block; text-decoration:none; color:inherit; border-radius:12px; overflow:hidden; background:#111; border:1px solid rgba(255,255,255,.12); }
  .thumb{ margin:0; aspect-ratio:1/1; background:#222; }
  .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .title{ margin:10px 10px 12px; font-size:15px; line-height:1.35; color:#fff; }
  
  .section-promo{
    max-width:1040px; margin:16px auto; padding:0 16px;
  }
  @media (min-width:640px){ .section-promo{ padding:0 20px; } }
  .visually-hidden{
    position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); border:0;
  }

  /* スライドのブロック */
  .promo-card{
    position: relative;
    background:#BEDE98;
    padding:30px;
    border-radius: 12px;
    overflow: hidden;
    display:flex;
    align-items:center;       /* 中央揃えのベース（縦方向は高さ次第） */
    justify-content:center;   /* 中央寄せ */
    text-align:center;
  }
   @media (max-width:640px){
    .promo-card{
      position: relative;
      padding:10px;
    }
   }
  /* 左上の固定画像（w130×h160） */

  .section-promo .promo-card{
  --corner-offset: 0px;  /* ← ここを 30px にすれば「paddingを考慮して内側30px」に戻ります */
    position: relative;
    background:#BEDE98;
    padding:30px;
    border-radius:12px;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
  }
 .section-promo .promo-card .corner-img{
    position:absolute;
    top: var(--corner-offset);
    left: var(--corner-offset);
    width:8vw; height:auto;
    object-fit:cover; display:block;
    pointer-events:none;
 }

  /* 中身（中央） */
  .promo-inner{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    max-width: min(760px, 100%); margin: 0 auto;
    padding:20px;
  }
  .promo-inner .heading-img{ display:block; height:auto; max-width:65%; }
  .promo-text{ margin:1.5rem; line-height:1.7; font-size:1.2rem; font-weight: bold; }
  .promo-btn .btn-img{ display:block; height:auto; margin:auto; max-width:40%; }

  /* スマホで左上画像と重ならないように、必要なら上余白を少し広げる */
  @media (max-width:640px){
    .section-promo .promo-card .corner-img{
      position:absolute;
      top: var(--corner-offset);
      left: var(--corner-offset);
      width:20vw; height:auto;
      object-fit:cover; display:block;
      pointer-events:none;
  }
    .promo-inner{ padding: 15px 0; }
    .promo-inner .heading-img{ display:block; height:auto; max-width:100%; }
    .promo-text{ margin:0.25rem; line-height:1.46; font-size:0.9rem!important; font-weight: bold; text-align: justify;}
    .promo-btn .btn-img{ display:block; height:auto; margin:auto; max-width:75%; }
  }

  /* bxSliderがwrapするので余白を少し */
  .bxslider-promo{ margin: 12px auto 0; }

  .section-promo .bx-wrapper {
    max-width: 700px!important;
    margin:auto;
  }
   @media (max-width:640px){
      .section-promo .bx-wrapper {
        max-width: 100%!important;
      }
   }

  /* プロモスライダーだけ、viewportのクリップを解除 */
    .section-promo .bx-wrapper .bx-viewport{
      overflow: hidden !important;
    }

    /* 念のため、角丸がしっかり見えるよう li 側も余白計算を安定化 */
    .section-promo .bxslider-promo > li,
    .section-promo .promo-card{
      box-sizing: border-box;
    }
  
  /* bxSlider 影・枠・白背景のリセット */
  .bx-wrapper,
  .bx-wrapper .bx-viewport{
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* 標準矢印はそのまま（背景スプライト使用）— 背景だけ白い丸に */
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next{
  background-image: url('images/controls.png') !important;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  box-shadow: none;
  /* ※ text-indent や background-image は触らない（標準のまま） */
}

/* ホバー時のわずかな強調（任意） */
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-next:hover{
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.12);
}

.bx-wrapper .bx-controls-direction a {
  z-index:1000!important;
}

  /* 価格表モーダル */
  :root{
    --grid-gap: 2px;
    --overlay: rgba(0,0,0,.75);
    --panel-bg: #fff;
    --panel-radius: 14px;
    --panel-border: 4px;
    --text: #222;
    --muted:#666;
  }
  .visually-hidden{
    position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0;
  }

  /* ===== グリッド（SP: 3×4 / PC: 6×2） ===== */
  .icon-grid{ max-width:1040px; margin:16px auto 60px auto; padding:0 16px; }
  @media (min-width:640px){ .icon-grid{ padding:0 20px; } }
  .grid12{
    list-style:none; padding:0; margin:0;
    display:grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }
  @media (min-width:640px){
    .grid12{ grid-template-columns: repeat(4, 1fr); }
  }

  .grid-btn{
    width:100%; aspect-ratio: 16 / 5;
    display:flex; flex-direction: column; align-items:left; justify-content:center; gap:5px;
    border-radius: 0;
    border:none;
    cursor:pointer; color:#fff; font-weight:600; text-shadow: 0 1px 0 rgba(0,0,0,.15);
    transition: transform .12s ease, box-shadow .12s ease;
    background: #999; /* JSで data-color を反映 */
    overflow:hidden;
    padding: 10px 15px;
  }
  .grid-btn p {
    display: flex;
    align-items:center; justify-content:left; gap:8px;
    margin:0;
    text-align: left;
    line-height: 1.2;
  }
  .grid-btn span {
    font-size:1.1rem;
    font-weight: bold;
  }
  .grid-btn span i {
    font-size:0.9rem;
    font-weight: normal;
    font-style: normal;
  }
  .grid-btn img{
    width:25px; height:25px; object-fit:cover; display:block;
    image-rendering:auto;
  }
  .grid-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.12); }

  .lineup_img {
    width:90%;
    margin:3rem auto 1rem;
  }
  .lineup_img img {
    margin:2rem 0;
  }

  .lineup_img .read {
    font-weight: bold;
    text-align:center!important;
    font-size: 1.25rem;
  }

  @media (max-width:640px){
    .grid-btn{
      width:100%; aspect-ratio: 16 / 4.5;
    }
    .grid-btn p {
      line-height: 1.1;
    }
    .grid-btn span {
      font-size:0.85rem;
      font-weight: bold;
      text-align: left;
    }
    .grid-btn span i {
      font-size:0.8rem;
      font-weight: normal;
      font-style: normal;
    }
    .grid-btn img{
      width:18px; height:18px; object-fit:cover; display:block;
      image-rendering:auto;
    }
    .lineup_img {
      width:90%;
      margin:1rem auto ;
    }
    .lineup_img img {
      margin:1rem 0;
    }
    .lineup_img .read {
      text-align:center!important;
      font-size: 1.1rem;
    }
  }

  /* ===== モーダル（グレーアウト背景＋パネル） ===== */
  .modal{ position: fixed; inset:0; z-index: 3000; display:none; }
  .modal.is-open{ display:block; }
  .modal__overlay{
    position:absolute; inset:0; background: var(--overlay);
  }
  .modal__panel{
    position: relative;
    max-width: min(880px, calc(100vw - 32px));
    margin: 5vh auto;
    background: var(--panel-bg);
    border-radius: var(--panel-radius);
    border: var(--panel-border) solid #000; /* JSで色差し替え */
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    color: var(--text);
    overflow:hidden;
  }

  /* 1) 画像（4:3） */
  .modal__hero{
    margin:0; background:#eee; aspect-ratio: 4 / 3;
  }
  .modal__hero img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* 2) 見出し帯（アイコン + テキスト／帯色=枠色） */
  .modal__heading{
    display:flex; align-items:center; gap:10px;
    padding:8px 14px; background:#ddd; color:#fff; /* JSで色差し替え */
  }
  .modal__heading-icon{ width:auto; height:32px; object-fit:contain; display:block; }
  h3.modal__title{ margin:0; font-size:1.65rem; line-height:1.3; text-align: left; font-weight: bold;}

  @media (max-width:640px){
     .modal__heading{
      gap:5px;
      padding:2px 12px;
    }
    .modal__heading-icon{ width:auto; height:20px; object-fit:contain; display:block; }
    h3.modal__title{ margin:0; font-size:1rem; line-height:1.3; text-align: left; }
  }
 

  /* 3) 価格 */
  .modal__price{
    padding:14px 16px 4px;
    display:flex; /* flex-direction:column; */ gap:10px;
  }
  .price-row{ display:flex; align-items:center; gap:10px; }
  .price-label{ color: var(--muted); font-size:15px; font-weight: bold; }
  .price-value{ font-weight:800; font-size:22px; }
  .price-adult__icon{ width:auto; height:24px; display:block; }
  .price-student .price-value, 
  .price-senior .price-value{ font-size:18px; } /* 学生は大人より少し小さく */

  @media (max-width:640px){
    .modal__price{
      display:flex; flex-direction:column; gap:3px;
    }
  }

  /* 4) 説明文 */
  .modal__desc{
    padding: 0 16px 18px;
    color:#333; line-height:1.7; font-size:15px;
  }

  @media (max-width:640px){
    .modal__desc{
      padding: 10px 10px 12px;
      color:#333;
      line-height:1.3;
      font-size:0.9rem;
      text-align: justify;
    }
  }

  /* 閉じるボタン */
  .modal__close{
    position:absolute; top:8px; right:8px;
    width:36px; height:36px; border-radius:999px;
    border:1px solid rgba(0,0,0,.1); background:#fff; cursor:pointer;
    font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  }

  /* 画面センタリング＋周囲マージン（安全域対応） */
  .modal{
    position: fixed; inset: 0; z-index: 1000;
    display: none;
    /* ↓ モーダル自体をフレックスで中央寄せ */
    display: none; /* is-open時に上書き */
  }
  .modal.is-open{
    display: flex;
    align-items: center;
    justify-content: center;
    /* 画面端に余白（スマホ安全域も考慮） */
    padding: max(16px, env(safe-area-inset-top)) 
            max(16px, env(safe-area-inset-right))
            max(16px, env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
  }

  /* オーバーレイは下層で全画面 */
  .modal__overlay{ position:absolute; inset:0; background: var(--overlay); }

  /* パネルは“高さ制限＋内部スクロール”で画面内に収める */
  .modal__panel{
    position: relative;
    max-width: min(880px, 100%);
    width: 100%;
    /* 高さは画面に収まるよう制限（svh対応＋vhフォールバック） */
    max-height: calc(100svh - 32px);
  }
  @supports not (height: 1svh){
    .modal__panel{ max-height: calc(100vh - 32px); }
  }

  /* 内容が溢れたらスクロール（Heroや本文が大きい時の保険） */
  .modal__panel{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hero画像や各ブロックは横幅100%で縮むので特別変更不要
    ただし極端に縦長画面で見出し帯が潰れないよう、最小高さの微調整 */
  .modal__heading{ min-height: 48px; }

  /* 背景スクロールロック（HTML/BodyどちらでもOK） */
  html.is-modal-locked, body.is-modal-locked{ overflow: hidden; }

  /* 小さめ端末での細かい調整（任意） */
  @media (max-width: 359px){
    .modal__title{ font-size: 16px; }
    .price-value{ font-size: 20px; }
    .price-student .price-value{ font-size: 16px; }
  }
  
  /* 料金表テーブル  */
  .section-price-table{
    max-width:1040px; margin:16px auto; padding:0 16px;
  }
  @media (min-width:640px){ .section-price-table{ padding:0 20px; } }
  .visually-hidden{
    position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0;
  }

  /* === 価格表 === */
  .price-table{
    width:100%;
    border-collapse: separate;
    border-spacing: 0 8px;        /* 行間にスペース */
    font-size:15px; color:#222;
  }

  /* theadは td で濃いグレー2色 */
  .price-table thead td{
    padding:10px 12px; color:#fff; font-weight:700;
  }
  .price-table thead td:first-child{ background:#3a3a3a; border-radius:10px 0 0 10px; }
  .price-table thead td:last-child { background:#2b2b2b; border-radius:0 10px 10px 0; }

  /* 行本体 */
  .price-table tbody tr td{
    padding:12px; vertical-align:middle; background:#fff;
  }
  .price-table tbody tr td:first-child{
    width:38%;
    background: var(--accent, #82C039);  /* ← 各行の色（trの--accent） */
    color:#fff; border-radius:10px 0 0 10px;
    align-items:center; gap:10px;
  }
  .price-table tbody tr td:last-child{
    width:62%;
    background: color-mix(in srgb, var(--accent, #82C039) 30%, white); /* 30%トーン */
    border-radius:0 10px 10px 0;
  }
  @supports not (color: color-mix(in srgb, #000 30%, white)){
    .price-table tbody tr td:last-child{ background: rgba(0,0,0,.04); }

  }

  @media (max-width:640px){
    .price-table tbody tr td:first-child{
      width:50%;
    }
    .price-table tbody tr td:last-child{
      width:50%;
    }
  }

  /* 行頭セル：小画像＋太字 */
  .price-table .col-name div {
    display: flex; align-items: center; justify-content: left; gap: 2px; margin:8px 0;
  }
  .price-table .col-name .mini{
    width:28px; height:28px; object-fit:contain; display:block;
  }

  /* 行末セル：大人／小中高／シニア */
  .price-table .col-price .adult,
  .price-table .col-price .student,
  .price-table .col-price .senior{
    display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  }
  .price-table .col-price .lbl{ color:#000; font-weight: bold; }
  .price-table .col-price .adult .val{ font-weight:800; font-size:18px; }
  .price-table .col-price .student .val,
  .price-table .col-price .senior .val{ font-size:15px; font-weight: bold;  } /* 小中高/シニアは小さめ */

  /* 大人の価格の後にアイコン（SP時は改行） */
  .price-table .col-price .adult .icon{
    width:auto; height:25px; object-fit:contain; display:inline-block; margin-left:4px;
  }
  @media (max-width:639px){
    .price-table .col-price .adult {
      margin:0 0 5px 0;
      line-height: 1.2;
      justify-content: center;
      text-align: center;
    }
    .price-table .col-price .adult .icon{
      width:auto; height:24px;display:block; margin:0;;
    }
    .price-table .col-name {
      line-height: 1.1;
    }
    .price-table .col-name .mini{
      width:22px; height:22px; object-fit:contain; display:block;
    }
    .price-table .col-price .adult,
    .price-table .col-price .student,
    .price-table .col-price .senior{
      justify-content: center;
      text-align: center;
    }
  }

  /* 視認性（軽い影） */
  .price-table tbody tr{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.02)); }


  /* 写真スライダー */

  /* ===== 基本指定 ===== */
  .photo-slider{ width:100%; margin: 0; padding: 0;background-color: #000; }
  .photo-viewport{
    overflow: hidden;
    width: 100%;
  }

  /* スピードと間隔は変数で管理 */
  .photo-slider{
    --gap: 0;
    --duration: 40s;   /* 流れる速さ（長いほどゆっくり） */
  }

  /* 横一列に並べ、トラック自体を左に流す */
  .photo-track{
    display: flex;
    gap: var(--gap);
    width: max-content;                 /* コンテンツ幅ぶんだけ広がる */
    animation: slide-left var(--duration) linear infinite;
    margin: 0;
  }

  /* 写真カード（4:3・幅はvwで可変） */
  .photo-track li{
    list-style: none;
    flex: 0 0 auto;
    width: 35vw;                         /* SP既定幅 */
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .photo-track img{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  /* PC（≥640px）は 20vw に */
  @media (min-width:640px){
    .photo-track li{ width: 20vw; }
    .photo-slider{ --duration: 45s; }
  }

  /* 無限ループ用アニメーション
     同じ並びを2巡ぶん入れているので、-50%まで動かして継ぎ目なしに */
  @keyframes slide-left{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* 好み：端の角を見せたい時のマスク（任意）
  .photo-viewport{
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  } */


 .shogai_tejun {
    list-style: decimal;
    margin:0;
  }
 .shogai_tejun li {
  background: #E6E6E6;
  padding:1rem;
  text-align: left;
  font-size:1.125rem;
    margin:0.5rem 0;
 }
 @media (max-width:640px){
    .shogai_tejun li {
      background: #E6E6E6;
      padding:0.75rem;
      text-align: left;
      font-size:1rem;
      margin:0.5rem 0;
    }
  }

  .join_btn {
    position: fixed;
    right: 0;
    bottom:5vw;
    width:32vw;
    max-width: 500px;
    cursor: pointer;
  }
  .join_btn img {
    width: 100%;
  }
  @media (max-width:640px){ 
    .join_btn {
      position: fixed;
      right: 0;
      bottom:5vw;
      width:70vw;
    }
  }
  

  /* BENEFIT */

  .benefit {
    background: #000;
    padding: 30px 0;
  }
    .benefit dl {
      padding: 0px;
      display: flex;
      align-items: flex-start;
      margin:30px 50px 50px 50px;
    }
    .benefit dt {
      width: 15%;
    }
    .benefit dt img {
      width: 100%;
    }
    .benefit dd {
      width: 85%;
    }
    .benefit dd .ttl img {
      height: 2rem;
      width: auto;
    }
    .benefit dd .ttl2 img {
      height: 4rem;
      width: auto;
    }
    .benefit dd p {
      color: #fff;
      margin: 0.5rem 0;
      padding: 0;
      text-align: justify;
    }
    .benefit dd span {
      color: #ccc;
      margin: 0.5rem 0;
      padding: 0;
      font-size:0.9rem;
      text-align: justify;
    }
    .benefit dd img {
      width:50%;
    }

    @media (max-width:640px){ 
      .benefit {
      padding: 10px;
      }
      .benefit dl {
        margin:20px 30px 20px 20px;
      }
      .benefit dt {
        width: 25%;
      }
      .benefit dd {
        width: 75%;
        padding:0;
        margin:0 0 0 1rem;
      }
      .benefit dd .ttl img {
        height: 1.2rem;
        width: auto;
      }
      .benefit dd .ttl2 img {
        height: 2.8rem;
        width: auto;
      }
      .benefit dd p {
        padding: 0;
      }
      .benefit dd span {
        font-size:0.9rem;
      }
      .benefit dd img {
        width:100%;
      }
    }


.schedule h4 {
  margin:4vw auto 1vw;
  padding:0;
}
.schedule .bluettl {
  background-color: #005ca7;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding:0.5rem;
}
.schedule p.read {
  text-align: center;
  font-size: 1.25rem;
}
.schedule p span.red {
  font-weight: bold;
  color: #ff0000;
}
.schedule p.date {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
}

.schedule_inner {
  background-color: #E6E6E6;
  padding:30px;
}
@media (max-width:640px){ 
  .schedule h4 {
    margin:8vw auto 1vw;
    padding:0;
  }
  .schedule .bluettl {
    font-size: 1rem;
    font-weight: bold;
    padding:0.5rem;
  }
  .schedule p {
    padding:0 10px;
  }
  .schedule p.read {
    font-size: 1rem;
  }
  .schedule p.date {
    font-size: 1.25rem;
  }

  .schedule_inner {
    background-color: #E6E6E6;
    padding:10px;
  }
  .schedule_graph {
    overflow-x: scroll;

  }
  .schedule_graph img {
    width:700px;
    display: block;
  }
}


.payment {
  padding:0 0 20px 0;
}

.payment h4 {
  margin:4vw auto 1vw;
  padding:0;
}
.payment h5 {
  margin:0vw auto 1vw;
  padding:0;
  font-size:1.5rem;
}
.payment h5.green {
  margin:3rem 0 1rem 0;
  color:#6FBA2C ;
  position: relative; /*positionをrelativeに指定*/
}
.payment h5.green::after {
  position: absolute; /*positionをabsoluteに指定*/
  content: "";
  background-color: #6FBA2C;/*下線の色*/
  width: 80px; /*線の幅*/
  height: 3px; /*線の太さ*/
  bottom: -5px; /*線のタテ位置*/
  left: 50%;  /*線のヨコ位置*/
  transform: translateX(-50%);　/*線のヨコ位置*/
}
.payment .bluettl,
.payment .greenttl {
  background-color: #005ca7;
  border: 1px solid #005ca7;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding:0.5rem;
}
.payment .greenttl {
  background-color: #6FBA2C;
  border: 1px solid #6FBA2C;
}
.payment .bluebox {
  border: 1px solid #005ca7;
  text-align: center;
  padding:40px;
}
.payment .greenbox {
  border: 1px solid #6FBA2C;
  text-align: center;
  padding:40px;
}
.payment .bluebox2 {
  border: 1px solid #005ca7;
  border-top:0px;
  text-align: center;
  padding:40px;
}
.payment .bluebox img {
  width: 50%;
}
.payment .redttl {
  background-color: #ff0000;
}
.payment .blackttl {
  background-color: #000;
}
.payment p.read {
  text-align: center!important;
  font-size: 1.25rem;
  font-weight: bold;
}
.payment p span.red {
  font-weight: bold;
  color: #ff0000;
}
@media (max-width:640px){ 
  .payment {
    padding:12px 16px 0;
  }

  .payment h4 {
    margin:4vw auto 1vw;
    padding:0;
  }
  .payment h5 {
    margin:0vw auto 1vw;
    padding:0;
    font-size:1.2rem;
  }
  .payment h5.green {
    margin:2rem 0 1rem 0;
  }
  .payment .bluettl,
  .payment .greenttl {
    font-size: 1rem;
    font-weight: bold;
    padding:0.5rem;
  }
  .payment .greenttl {
  }
  .payment .bluebox {
    padding:20px;
  }
  .payment .greenbox {
    padding:20px;
  }
  .payment .bluebox2 {
    padding:20px;
  }
  .payment .bluebox img {
    width: 100%;
  }
  .payment .blackttl {
    background-color: #000;
  }
  .payment p.read {
    font-size: 1rem;
  }
}



.information {
  padding:0 0 100px 0;
}

.information h4 {
  margin:4vw auto 1vw;
  padding:0;
}
.information .bluettl,
.information .redttl,
.information .blackttl {
  background-color: #005ca7;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding:0.5rem;
}
.information .redttl {
  background-color: #ff0000;
}
.information .blackttl {
  background-color: #000;
}
.information p.read {
  text-align: center;
  font-size: 1.25rem;
}
.information p span.red {
  font-weight: bold;
  color: #ff0000;
}
.information a {
  display: block;
  margin:3rem auto;
  width: 40%;
}
.information a img {
  width: 100%;
}

@media (max-width:640px){
  .information {
    padding:16px 16px 50px;
  }

  .information h4 {
    margin:4vw auto 1vw;
    padding:0;
  }
  .information .bluettl,
  .information .redttl,
  .information .blackttl {
    font-size: 1rem;
  }
  .information p.read {
    text-align: center;
    font-size: 1rem;
  }
  .information a {
    display: block;
    margin:3rem auto;
    width: 80%;
  }
  .information a img {
    width: 100%;
  }

}