/* ---- ベース ---- */
:root{
  --bg:#FFF7D6; --paper:#FFF; --ink:#111; --heading:#111;
  /* ★修正：白背景とのコントラスト比を確保するため濃色に変更（WCAG AA目安） */
  --primary:#FFB337;
  --accent:#C1440E;
  --accent2:#FFC06F;
  --line:#EADFC7; --shadow:0 6px 18px rgba(0,0,0,.06);
}

/* 視覚的に隠しつつスクリーンリーダーには読ませるためのユーティリティ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
*{box-sizing:border-box}
body{margin:0; font-family:'Noto Sans JP',system-ui,-apple-system,'Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',sans-serif;
     color:var(--ink); background:var(--bg); line-height:1.9;}

/* ---- スクロール位置調整 ---- */
section[id] {
  scroll-margin-top: 70px; /* ナビゲーションの高さ分ずらす */
}

/* ---- ナビ ---- */
nav{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
    border-bottom:2px solid var(--primary); /* ★変更：線をオレンジに */
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px;
    position: relative; 
}
nav .logo img{height:46px}
nav a{color:var(--heading); text-decoration:none; font-weight:700}
nav a:hover{color:var(--accent)}
nav a.active{color:var(--accent)}

/* ▼▼▼ HTML変更に伴い、#nav-menu のスタイルを定義 ▼▼▼ */
#nav-menu {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ▼▼▼ ハンバーガーボタンのスタイル ▼▼▼ */
.nav-toggle {
  display: none; /* PCでは非表示 */
  background: none; border: none; padding: 0;
  width: 30px; height: 30px;
  cursor: pointer;
  z-index: 100; /* メニューより上 */
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--heading);
  border-radius: 3px;
  transition: all .3s ease;
}
.nav-toggle span + span {
  margin-top: 6px;
}
/* ハンバーガーボタンのアクティブ時（×印） */
.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
/* ▲▲▲ ここまで追加 ▲▲▲ */


/* ---- レイアウト ---- */
main{padding:0 20px}
section{max-width:1120px; margin:64px auto}
h1{font-size:clamp(26px,4vw,40px); line-height:1.28; margin:0; color:var(--accent);} /* ★変更：h1色 */
h2{position:relative; padding-left:.5em; font-weight:700; color:var(--accent);} /* ★変更：h2色 */
h2::before{content:""; position:absolute; left:0; top:.55em; width:6px; height:1.1em;
           background:linear-gradient(180deg,var(--primary),var(--accent)); border-radius:3px;}

/* ★追加：h3スタイル（★修正：コントラスト確保のためaccentに統一） */
h3 {
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 10px;
}

/* ★追加：ヒーロー内CTAボタン */
.hero-cta{
  display:inline-block; margin-top:16px; padding:12px 28px;
  background:var(--accent); color:#fff; font-weight:700;
  border-radius:999px; text-decoration:none; box-shadow:var(--shadow);
}
.hero-cta:hover{background:#a3390c}

.panel{background:var(--paper); border:2px solid var(--accent2); /* ★変更：枠線をオレンジに */
       border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.muted{color:#4f4a44}

/* 施設概要セクションの画像スタイル */
#about .panel img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* ---- ヒーロー（画像は元サイズ／見出しは中央オーバーレイ＆背景塗り） ---- */
#hero {
  position: relative;
  margin-top: 20px;
  margin-bottom: 80px;
  text-align: center;
}

#hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  margin-top: 16px;
}

.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 90%;
  background: rgba(255, 255, 255, 0.85); /* 白背景（少し透過） */
  padding: 14px 28px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero-overlay h1 {
  color: var(--accent);
  font-size: clamp(26px, 4vw, 40px);
  margin: 0;
}


/* ---- 機能訓練カード ---- */
.program{background:var(--paper); border:2px solid var(--accent2); /* ★変更：枠線をオレンジに */
         border-radius:16px; padding:18px;
         transition:transform .15s ease, box-shadow .15s ease; box-shadow:var(--shadow)}
.program:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.08)}
.program img{width:100%; height:200px; object-fit:cover; border-radius:12px; margin-bottom:10px}

/* ---- タイムライン + 右側写真3枚 ---- */
.timeline{position:relative; margin-left:30px}
.timeline::before{content:""; position:absolute; left:10px; top:0; bottom:0; width:3px; background:var(--accent2)}
.t-item{position:relative; margin-bottom:28px; padding-left:24px}
.t-item::before{content:""; position:absolute; left:6px; top:20px; width:12px; height:12px; background:var(--accent); border-radius:50%;
                box-shadow:0 0 0 2px #fff inset}
.t-time{font-weight:600; color:var(--accent); margin-bottom:4px}
.t-img{width:100%; max-width:560px; height:220px; object-fit:cover; border-radius:12px; border:1px solid var(--line); margin-top:6px}
.panel.daygrid{display:grid; grid-template-columns:1fr 320px; gap:18px}
.panel.daygrid .right img{width:100%; height:150px; object-fit:cover; border-radius:10px; margin-bottom:10px}

/* ---- 料金テーブル ---- */
.fee-table{width:100%; border-collapse:collapse; margin-top:16px}
.fee-table th, .fee-table td{border:1px solid var(--line); padding:10px 12px; vertical-align:middle}
.fee-table th{background:#FFFBF0; text-align:center; font-weight:600}
.fee-table td:first-child{text-align:center; font-weight:600}
.fee-table td:not(:first-child){text-align:right}

/* ★Feeセクションのh3マージンを調整 */
#fees h3 {
  margin-top: 24px;
  margin-bottom: 12px;
}
#fees h3:first-of-type { /* 最初のh3だけ上マージンを0に */
  margin-top: 0px;
}


/* ---- FAQ（白地カード化） ---- */
details.faq{background:var(--paper); border:2px solid var(--accent2); /* ★変更：枠線をオレンジに */
             border-radius:14px; padding:14px 18px; box-shadow:var(--shadow)}
details.faq+details.faq{margin-top:10px}

/* ---- 強調テキスト ---- */
.emphasis{text-align:center; color:var(--accent); font-weight:700; font-size:clamp(20px,3.2vw,28px)}

/* ---- タグ（お知らせ用の色分けバッジ） ---- */
.tag{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700}
.tag-info{background:#FFE9B3; color:#000}
.tag-holiday{background:#DCEBFF; color:#0B4A8F}
.tag-important{background:var(--accent); color:#fff}

/* ---- 重要書類（PDF掲示） ---- */
.doc-item{display:flex; gap:16px; align-items:flex-start}
.doc-item+.doc-item{margin-top:16px}
.doc-icon{font-size:36px; line-height:1}
.doc-link{display:inline-block; margin-top:10px; padding:8px 20px; background:var(--accent); color:#fff;
          font-weight:700; border-radius:999px; text-decoration:none}
.doc-link:hover{background:#a3390c}

/* ---- お知らせ一覧 ---- */
.news-item+.news-item{margin-top:16px}
.news-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.news-meta time{color:#4f4a44; font-size:.9rem}

/* ---- フッター ---- */
footer{background:var(--bg); /* ★変更：白から--bgへ */
       border-top:1px solid var(--line); padding:40px 20px; text-align:center; font-size:.95rem}

/* ---- レスポンシブ ---- */
@media(max-width:980px){
  .grid-3{grid-template-columns:1fr}
}

/* ▼▼▼ 800pxのメディアクエリをハンバーガーメニュー用に変更 ▼▼▼ */
@media(max-width:800px){
  main{padding:0 16px}
  section{margin: 48px auto}
  h1{font-size:clamp(22px, 6vw, 32px)}

  .grid-2{grid-template-columns:1fr}
  
  /* #intro (style属性で指定されているため !important で上書き) */
  #intro .panel{
    grid-template-columns:1fr !important;
  }
  
  /* #dayflow */
  .panel.daygrid{
    grid-template-columns:1fr;
  }

  /* 重要書類：スマホでは縦積みに */
  .doc-item{
    flex-direction:column;
  }

  /* ロゴを少し小さく */
  nav .logo img{height:40px}

  /* ハンバーガーボタンを表示 */
  .nav-toggle {
    display: block;
  }
  
  /* メニューを非表示にし、全画面表示の準備 */
  #nav-menu {
    display: none; /* JSで .is-open が付くまで非表示 */
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100vh; /* 画面全体の高さ */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    
    /* リンクを中央寄せ（縦） */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 20px;
  }
  
  /* メニューが開いたときのスタイル */
  #nav-menu.is-open {
    display: flex; /* 表示する */
  }

  /* メニュー内のリンク文字を大きくする */
  #nav-menu a {
    font-size: 1.2rem;
    padding: 10px;
  }
}
/* ▲▲▲ 800pxの変更ここまで ▲▲▲ */


@media(max-width:600px){
  /* 料金テーブルがはみ出ないように */
  .fee-table th, .fee-table td{padding:8px 6px; font-size:14px}

  /* テーブルを横スクロールさせるためのラッパー */
  .table-wrapper{
    overflow-x: auto;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .fee-table{
    margin-top:0;
    border:none; /* ラッパーにボーダーを移す */
  }
  .fee-table th, .fee-table td {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-left: none; /* 左右の線はラッパー側で表示 */
    border-right: none;
  }
  .fee-table tr th:first-child,
  .fee-table tr td:first-child {
     border-left: 1px solid var(--line); /* テーブルの最初だけ左線 */
  }
  .fee-table tr th:last-child,
  .fee-table tr td:last-child {
     border-right: 1px solid var(--line); /* テーブルの最後だけ右線 */
  }
}