/*
Theme Name: Forest Sail Adventure
*/

:root{
  /* palette */
  --c1:#698EBF;
  --c2:#99AABF;
  --c3:#BFCDD9;
  --ink:#012840;
  --ink2:#364F59;

  --bg:#fbfcfe;
  --line: rgba(1,40,64,.10);
  --glass: rgba(255,255,255,.78);
  --muted: rgba(54,79,89,.72);
  --shadow: 0 18px 40px rgba(1,40,64,.10);
  --radius: 20px;
}

:root{
  /* Base Type Scale */
  --fs-base: 16px;   /* 通常本文 */
  --fs-sub:  14px;   /* hero sub / lead / bullet */
  --fs-small:12px;   /* 注記 */
  --fs-meta: 11px;   /* ラベル系 */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.85;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1120px; margin:0 auto; padding:0 22px; }
@media (min-width: 768px){ .container{ padding:0 48px; } }

/* ……以下、元のCSSをそのまま続ける…… */


    /* NAV */
    .nav{
      position:fixed; inset:0 0 auto 0; z-index:50;
      transition: all .35s ease;
      padding:22px 22px;
      background: transparent;
    }
    .nav.scrolled{
      padding:14px 22px;
      background: var(--glass);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    @media (min-width: 768px){
      .nav{ padding:24px 48px; }
      .nav.scrolled{ padding:14px 48px; }
    }
    .nav-inner{
      max-width:1120px; margin:0 auto;
      display:flex; align-items:center; justify-content:space-between; gap:18px;
    }
    .brand{
      display:flex; flex-direction:column; gap:4px;
      cursor:pointer;
    }
    .brand .t{
      font-size:14px;
      letter-spacing:.42em;
      text-transform:uppercase;
      font-weight:300;
    }
    .brand .s{
      font-size:9px;
      letter-spacing:.30em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:800;
      margin-top:-2px;
    }

    .links{
      display:none;
      gap:26px;
      align-items:center;
      font-size:10px;
      letter-spacing:.24em;
      text-transform:uppercase;
      font-weight:800;
      color:rgba(1,40,64,.72);
    }
    .links a{ opacity:.8; transition:opacity .2s ease; }
    .links a:hover{ opacity:1; }
    .pill{
      padding:10px 16px;
      border:1px solid rgba(1,40,64,.22);
      border-radius:999px;
      background:rgba(255,255,255,.55);
      transition: background .2s ease, border-color .2s ease;
    }
    .pill:hover{ background:rgba(255,255,255,.80); border-color:rgba(1,40,64,.32); }

    .menu-btn{
      border:1px solid rgba(1,40,64,.18);
      background:rgba(255,255,255,.55);
      border-radius:14px;
      width:42px; height:42px;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
    }
    @media (min-width: 900px){
      .links{ display:flex; }
      .menu-btn{ display:none; }
    }

    /* HERO (Blue Gradient) */
    .hero{
      position:relative;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      padding-top:76px;
    }
    .hero::before{
      content:"";
      position:absolute; inset:-20%;
      background:
        radial-gradient(1200px 520px at 50% 20%, rgba(191,205,217,.92), rgba(191,205,217,0) 60%),
        radial-gradient(900px 420px at 18% 35%, rgba(105,142,191,.55), rgba(105,142,191,0) 62%),
        radial-gradient(900px 480px at 82% 40%, rgba(153,170,191,.55), rgba(153,170,191,0) 62%),
        linear-gradient(180deg, rgba(105,142,191,.45) 0%, rgba(191,205,217,.20) 45%, rgba(255,255,255,.88) 100%);
      filter: saturate(1.02);
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, rgba(1,40,64,.16) 0%, rgba(1,40,64,0) 34%),
        linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.95) 100%);
      pointer-events:none;
    }

    .hero-inner{
      position:relative;
      z-index:2;
      text-align:center;
      padding:0 18px;
      max-width:980px;
    }
    .eyebrow{
      font-size:10px;
      letter-spacing:.62em;
      text-transform:uppercase;
      color:rgba(1,40,64,.55);
      font-weight:900;
      margin-bottom:22px;
    }
.hero .hero-title{
  margin:0;
  font-weight:250;
  letter-spacing:.02em;
  line-height:1.25;
  font-size: clamp(32px, 6vw, 64px);
  color:rgba(1,40,64,.94);
  text-shadow: 0 12px 38px rgba(1,40,64,.12);
}

    .hero-sub{
      margin:26px auto 0;
      max-width:60ch;
      color:rgba(54,79,89,.80);
      font-size:14px;
      font-weight:300;
      line-height:2.1;
    }
    .hero-cta{
      margin-top:28px;
      display:flex;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .btn{
      padding:12px 18px;
      border-radius:999px;
      border:1px solid rgba(1,40,64,.18);
      background:rgba(255,255,255,.60);
      font-size:10px;
      letter-spacing:.28em;
      text-transform:uppercase;
      font-weight:900;
      cursor:pointer;
      transition: transform .15s ease, background .2s ease, border-color .2s ease;
    }
    .btn:hover{ transform: translateY(-1px); background:rgba(255,255,255,.85); border-color:rgba(1,40,64,.26); }
    .btn.primary{
      background:rgba(105,142,191,.16);
      border-color:rgba(105,142,191,.38);
    }


    /* Photo strip (Hero直下) */
    .photo-strip{
      padding: 22px 0 8px;
      background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.92));
      border-bottom: 1px solid rgba(1,40,64,.06);
    }
    .strip-inner{ max-width:1120px; margin:0 auto; padding:0 22px; }
    @media (min-width: 768px){ .strip-inner{ padding:0 48px; } }
    .strip{
      display:flex;
      gap:14px;
      overflow:auto;
      padding:10px 2px 18px;
      scroll-snap-type:x mandatory;
    }
    .strip img{
      width: min(320px, 78vw);
      aspect-ratio: 4 / 3;  /* 追加 */
      height: auto;         /* 変更 */
      object-fit: cover;
      border-radius: 18px;
      border:1px solid rgba(1,40,64,.10);
      box-shadow: 0 10px 24px rgba(1,40,64,.08);
      scroll-snap-align: start;
      flex: 0 0 auto;
      background:#fff;
      display:block;        /* 念のため */
    }
    .strip-note{
      margin-top:10px;
      color: rgba(54,79,89,.65);
      font-size:12px;
      font-weight:300;
      line-height:1.9;
    }
    

    /* Sections */
    section{ scroll-margin-top:92px; }
    .pad{ padding:120px 0; }
    .head{
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-bottom:42px;
      align-items:flex-start;
    }
    .k{
      font-size:10px;
      letter-spacing:.44em;
      text-transform:uppercase;
      color:rgba(54,79,89,.72);
      font-weight:900;
    }

    /* About */
    .panel{
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding:28px;
      background:rgba(255,255,255,.75);
      box-shadow: 0 10px 24px rgba(1,40,64,.06);
    }
    

/* 左パネルを少しだけ豊かに */
.philo-grid .panel{
  padding: 36px; /* 既存が28pxなら少し増やす */
}

    .bullet{
      display:grid;
      gap:14px;
      margin-top:18px;
      color:rgba(54,79,89,.82);
      font-size:13px;
    }
    .bullet div{
      display:flex; gap:12px; align-items:flex-start;
    }
    .dot{
      width:10px; height:10px; border-radius:999px;
      background:rgba(105,142,191,.55);
      margin-top:6px;
      flex:0 0 auto;
    }
    .quote{
      background: linear-gradient(180deg, rgba(191,205,217,.35), rgba(255,255,255,.65));
      border:1px solid rgba(1,40,64,.10);
    }
    .quote p{
      margin:0;
      font-size:14px;
      line-height:2.1;
      color:rgba(1,40,64,.85);
      font-weight:300;
    }
    .quote small{
      display:block;
      margin-top:18px;
      color:rgba(54,79,89,.70);
      font-size:11px;
      letter-spacing:.18em;
    }

    /* TOP Menu：交通事故バナー */
.accident-banner{
  display:block;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.accident-banner:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(1,40,64,.10);
  border-color: rgba(105,142,191,.35);
}


.accident-title{
  margin:0;
  font-size:16px;
  letter-spacing:.06em;
  font-weight:450;
  color: rgba(1,40,64,.92);
}

.accident-text{
  margin:10px 0 0 0;
  font-size:12px;
  line-height:2.0;
  font-weight:300;
  color: rgba(54,79,89,.82);
}


.accident-cta::after{
  content:"→";
  opacity:.65;
}
/* TOP Menu：交通事故バナー（写真背景） */
.accident-banner{
  position: relative;
  isolation: isolate; /* オーバーレイ重なりの安全策 */
  overflow: hidden;
}

.accident-banner .accident-bg{
  position:absolute;
  inset:0;
  z-index:0;

  /* ここを写真に差し替え */
  background-image: url("../forest-sail-adventure/images/accident.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(0.4px);
  transform: scale(1.03);
  opacity: .55;
}

/* 写真の上に“静かなガラス膜” */
.accident-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.70));
}

/* 文字を前面に */
.accident-banner > *{
  position: relative;
  z-index: 2;
}

/* ちょい強調したいなら badge を白背景にしても◎ */
.accident-badge{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(105,142,191,.22);
  padding: 6px 10px;
  border-radius: 999px;
}

/* 見出しを“ちゃんと見出し”に */
.accident-title{
  margin: 0;
  font-size: 18px;
  letter-spacing: .08em;
  font-weight: 550;
  color: rgba(1,40,64,.92);
}

/* 説明文は少し締める（背景写真の上でも読みやすく） */
.accident-text{
  margin: 12px 0 0 0;
  font-size: 12px;
  line-height: 2.0;
  font-weight: 320;
  color: rgba(54,79,89,.82);
}

/* “ボタン”エリア */
.accident-actions{
  display:block;
  margin-top: 16px;
}

.accident-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(105,142,191,.35);
  background: rgba(255,255,255,.78);
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  color: rgba(1,40,64,.88);
}

.accident-btn::after{
  content:"→";
  margin-left: 10px;
  opacity:.65;
}

/* hoverで“押せる感” */
.accident-banner:hover .accident-btn{
  background: rgba(255,255,255,.92);
  border-color: rgba(105,142,191,.55);
}


    /* Menu (one course) */
    .menu-wrap{
      background: linear-gradient(180deg, rgba(191,205,217,.22), rgba(255,255,255,.92));
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .menu-card{
      border:1px solid rgba(1,40,64,.12);
      border-radius: var(--radius);
      padding:30px;
      background:rgba(255,255,255,.78);
      box-shadow: var(--shadow);
      display:grid;
      gap:14px;
    }
    .menu-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:14px;
      color:rgba(54,79,89,.78);
      font-size:10px;
      letter-spacing:.30em;
      text-transform:uppercase;
      font-weight:900;
    }
    .menu-name{
      font-size:18px;
      font-weight:350;
      letter-spacing:.06em;
      margin:0;
    }
    .menu-desc{
      margin:0;
      color:rgba(54,79,89,.82);
      font-size:13px;
      line-height:2.1;
      font-weight:300;
    }
    .menu-bottom{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:18px;
      flex-wrap:wrap;
      margin-top:10px;
    }
    .price{
      font-size:30px;
      font-weight:250;
      letter-spacing:-.02em;
      color:rgba(1,40,64,.92);
    }
    .note{
      color:rgba(54,79,89,.72);
      font-size:12px;
      font-weight:300;
      line-height:2.0;
      max-width:70ch;
      margin-top:14px;
    }
 /* TOP Menu：LINE予約 割引ミニパネル（目立たせ版） */
.promo-mini{
  padding: 16px 18px;
  border-radius: 16px;
  box-sizing: border-box;

  /* Reserveページと同系統の“静かな青グラデ” */
  background:
    radial-gradient(420px 120px at 12% 0%, rgba(140,176,206,.28), rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(246,249,252,1), rgba(255,255,255,1));

  border: 1px solid rgba(105,142,191,.28);
  box-shadow:
    0 14px 32px rgba(1,40,64,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.promo-mini p{
  margin:0;
  font-weight:500;
  color: rgba(1,40,64,.92);
}

.promo-mini small{
  display:block;
  margin-top:8px;
  font-size:11px;
  letter-spacing:.12em;
  opacity:.8;
}
/* TOP Menu：左パネル内の割引ミニ表示（リンク版） */
.promo-mini.promo-link{
  display:block;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(105,142,191,.22);
  background: linear-gradient(180deg, rgba(191,205,217,.22), rgba(191,205,217,.10));
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.promo-mini.promo-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(1,40,64,.10);
  border-color: rgba(105,142,191,.35);
}

.promo-mini.promo-link:focus-visible{
  outline: 3px solid rgba(105,142,191,.45);
  outline-offset: 3px;
}


    /* Legacy */
    .legacy-grid{
      display:grid;
      gap:18px;
      align-items:start;
    }
    @media (min-width: 900px){
      .legacy-grid{ grid-template-columns: 1fr 1fr; gap:26px; }
    }

    .photo-grid{
      display:grid;
      gap:14px;
      margin-bottom:18px;
    }
    @media (min-width: 900px){
      .photo-grid{ grid-template-columns: repeat(3, 1fr); }
    }
    .photo{
      border-radius: 18px;
      overflow:hidden;
      border:1px solid rgba(1,40,64,.10);
      box-shadow: 0 14px 30px rgba(1,40,64,.10);
      background:#fff;
      height: 210px;
    }
    .photo img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .legacy-img{
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid rgba(1,40,64,.12);
      box-shadow: var(--shadow);
      background: #fff;
    }
    .caption{
      margin-top:12px;
      color:rgba(54,79,89,.75);
      font-size:12px;
      line-height:2.0;
      font-weight:300;
    }


    /* Access */
    footer{
      border-top:1px solid var(--line);
      padding:90px 0 54px;
      background:rgba(255,255,255,.92);
    }
    .access-grid{
      display:grid;
      gap:20px;
    }
    @media (min-width: 900px){
      .access-grid{ grid-template-columns: 1fr 1fr; gap:26px; align-items:stretch; }
    }
    .mini{
      color:rgba(54,79,89,.70);
      font-size:12px;
      line-height:2.0;
      font-weight:300;
    }
    .footline{
      margin-top:46px;
      padding-top:18px;
      border-top:1px solid rgba(1,40,64,.08);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      color:rgba(54,79,89,.62);
      font-size:10px;
      letter-spacing:.26em;
      text-transform:uppercase;
      font-weight:900;
    }

    /* Mobile overlay */
    .overlay{
      position:fixed; inset:0; z-index:80;
      display:none;
      background:rgba(255,255,255,.96);
      backdrop-filter: blur(10px);
      padding:86px 22px 22px;
    }
    .overlay.open{ display:block; }
    .overlay a{
      display:block;
      padding:16px 6px;
      border-bottom:1px solid rgba(1,40,64,.08);
      font-size:12px;
      letter-spacing:.26em;
      text-transform:uppercase;
      font-weight:900;
      color:rgba(1,40,64,.74);
    }
    .overlay a:last-child{ border-bottom:none; }
    .close{
      position:absolute; top:18px; right:18px;
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid rgba(1,40,64,.16);
      background:rgba(255,255,255,.72);
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
/* WPのデフォルト余白に引っ張られたときの保険 */
main { display:block; }
h1,h2,h3,p,figure { margin-top:0; }

/* Legacy - Mosaic + Highlights + Picks */
.legacy-wall{
  display:grid;
  gap:14px;
  margin-top:10px;
}
@media (min-width: 900px){
  .legacy-wall{ grid-template-columns: 1fr 1fr; gap:18px; }
}

/* =========================
   Legacy wall-shot (CUT: NO)
   集合写真：切らない＋青い膜
   ========================= */

/* 枠 */
.wall-shot{
  position: relative; /* ← ::after用 */
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(1,40,64,.10);
  box-shadow: 0 14px 30px rgba(1,40,64,.10);
  background:#fff;
}

/* 画像：切らない（全体表示） */
.wall-shot img{
  width:100%;
  height:auto;
  object-fit: contain;
  display:block;
  background: rgba(255,255,255,.9); /* 余白が出た時の白 */
  filter: saturate(.92) contrast(.98) brightness(1.02);

  /* “保存しづらい”摩擦（完全防止ではない） */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ブルーの膜（世界観） */
.wall-shot::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(105,142,191,.18),
    rgba(1,40,64,.10)
  );
  opacity: .75;              /* 濃ければ .60 / 薄ければ .85 */
  pointer-events:none;
  mix-blend-mode: multiply;
}

/* Zoom panel */
.legacy-zooms .zoom-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:14px;
}

.zoom{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(1,40,64,.10);
  background:#fff;
  box-shadow: 0 10px 24px rgba(1,40,64,.08);
  height: 210px;
}
.zoom img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* zoomにも弱い青膜を足す */
.zoom{
  position: relative; /* ← 忘れずに追加 */
}

.zoom::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(105,142,191,.12),
    rgba(1,40,64,.06)
  );
  opacity:.65;      /* ←まずはこれで試す */
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* Picks */
.picks{
  display:grid;
  gap:14px;
}
.pick{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.pick .dot{
  margin-top:8px;
}
.pick-title{
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(1,40,64,.86);
  font-weight:700;
}
.pick-text{
  margin-top:6px;
  color:rgba(54,79,89,.82);
  font-size:14px;
  line-height:2.0;
  font-weight:300;
}
/* =========================
   Reserve Page (FINAL)
   ========================= */

/* Reserve hero：mainのpadと二重にならないように詰める */

.reserve-grid{
  display:grid;
  gap:18px;
  align-items:start;
  margin-top:22px;
}
@media (min-width: 900px){
  .reserve-grid{
    grid-template-columns: 1.18fr .82fr;
    gap:26px;
    align-items:stretch;
  }
}


/* 互換：title/sub も統合 */
.page-title,
.reserve-title{
  margin-top: 14px;
  font-weight: 260;
  letter-spacing: .02em;
  line-height: 1.35;
  font-size: clamp(26px, 3.6vw, 44px);
  color: rgba(1,40,64,.94);
  text-shadow: 0 12px 38px rgba(1,40,64,.10);
}

.page-sub,
.reserve-sub{
  margin-top: 16px;
  color: rgba(54,79,89,.80);
  font-size: 14px;
  font-weight: 300;
  line-height: 2.1;
  max-width: 62ch;
}


/* ===== キャベツ化対策（Reserveだけ） =====
   Gutenbergの is-layout-constrained が
   子要素に「本文幅(max-width) + 中央寄せ」をかけるのを止める
*/

/* 0) WPの“物差し”をReserve内だけ全幅にする（効く率が高い） */
body.page-template-page-reserve .reserve-grid,
body.page-id-6 .reserve-grid,
body.page-id-30 .reserve-grid{
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%;
}

/* 1) inner-container と constrained の幅制限を解除 */
body.page-template-page-reserve .reserve-grid .wp-block-group__inner-container,
body.page-id-6 .reserve-grid .wp-block-group__inner-container,
body.page-id-30 .reserve-grid .wp-block-group__inner-container{
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) constrained が子要素にかける max-width/auto margin を解除 */
body.page-template-page-reserve .reserve-grid :where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.page-id-6 .reserve-grid :where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.page-id-30 .reserve-grid :where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* promo（優待案内）※1回だけ定義 */
body.page-template-page-reserve .reserve-grid .promo,
body.page-id-6 .reserve-grid .promo,
body.page-id-30 .reserve-grid .promo{
  width: 100%;
  max-width: none !important;
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(1,40,64,.08);
  background: rgba(255,255,255,.58);
  box-sizing: border-box;
}
body.page-template-page-reserve .reserve-grid .promo p,
body.page-id-6 .reserve-grid .promo p,
body.page-id-30 .reserve-grid .promo p{ margin:0; }

/* Reserve CONTACT：ボタンを縦積みに固定（かぶり防止） */

.reserve-grid .cta-stack{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.reserve-grid .cta-stack .btn{
  width: 100%;
  display: block;
  text-align: center;
  white-space: nowrap;
}
/* Reserve steps：1/2/3 のカードをモックアップ通りに固定 */
.reserve-grid .step{
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.reserve-grid .step .row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(1,40,64,.10);
  background: rgba(255,255,255,.70);
  box-sizing: border-box;
}

.reserve-grid .step .badge{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(1,40,64,.85);
  background: rgba(105,142,191,.18);
  border: 1px solid rgba(105,142,191,.28);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* row内の本文 */
#reserve .reserve-grid .step .step-title {
  font-size: var(--fs-base);
  font-weight: 600;
}

#reserve .reserve-grid .step .step-desc {
  font-size: var(--fs-base);
  line-height: 2.05;
}

/* Reserve FAQ：右カラムのQ/Aをカード（小パネル）化 */
.reserve-grid .faq{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.reserve-grid .qa{
  border: 1px solid rgba(1,40,64,.10);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.70);
  box-sizing: border-box;
}

.reserve-grid .qa .q{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(1,40,64,.72);
}

.reserve-grid .qa .a{
  margin-top: 10px;
  color: rgba(54,79,89,.78);
  font-size: 12px;
  line-height: 2.0;
  font-weight: 300;
}
/* WP管理バーが出るときは、固定ヘッダーをその分だけ下げる */
body.admin-bar header,
body.admin-bar .site-header,
body.admin-bar .header{
  top: 32px;
}

@media (max-width: 782px){
  body.admin-bar header,
  body.admin-bar .site-header,
  body.admin-bar .header{
    top: 46px;
  }
}
/* WP管理バーが出る時：固定ナビ(.nav)を管理バー分だけ下げる */
body.admin-bar .nav{
  inset: 32px 0 auto 0 !important; /* ← ここが本丸（insetを上書き） */
}

@media (max-width: 782px){
  body.admin-bar .nav{
    inset: 46px 0 auto 0 !important;
  }
}
/* ログイン中だけ、縮んだヘッダーを少しだけ厚くして視認性確保 */
body.admin-bar .nav.scrolled{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
/* Reserve：TOPと同じ空気（背景グラデ）を復活 */
body.page-id-30 main.pad{
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(185,210,229,.55), rgba(255,255,255,0) 65%),
    radial-gradient(760px 520px at 82% -12%, rgba(140,176,206,.35), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(246,249,252,1), rgba(255,255,255,1));
}
body.page-id-30{
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(185,210,229,.45), rgba(255,255,255,0) 65%),
    radial-gradient(760px 520px at 82% -12%, rgba(140,176,206,.28), rgba(255,255,255,0) 62%),
    #fff;
}
/* Reserve promo：目立つ小パネル（上品グラデ） */
body.page-id-30 .reserve-grid .promo{
  width: 100%;
  max-width: none !important;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  box-sizing: border-box;

  /* ↓ここが主役（薄い青いグラデ） */
  background:
    radial-gradient(520px 120px at 10% 0%, rgba(140,176,206,.30), rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(246,249,252,1), rgba(255,255,255,1));

  border: 1px solid rgba(105,142,191,.22);
  box-shadow:
    0 18px 42px rgba(1,40,64,.06),
    inset 0 1px 0 rgba(255,255,255,.70);
}

body.page-id-30 .reserve-grid .promo p{ margin:0; }

body.page-id-30 .reserve-grid .promo strong{
  color: rgba(1,40,64,.92);
}
/* Reserve hero の位置調整 */
body.page-template-page-reserve .reserve-hero {
  padding-top: 140px; /* ← まずはここ */
  padding-bottom: 120px;
}

/* 管理バーがあるときの微調整 */
body.admin-bar.page-template-page-reserve .reserve-hero {
  padding-top: 100px;
}
/* Reserve：固定ヘッダー分の上余白（main.pad）が効いてる可能性が高いので、ここを詰める */
body.page-id-30 main.pad{
  padding-top: 80px !important; /* ← ここを 90〜140px で調整 */
}


/* LINE QRコード調整 */
.qr-box img{
  width: 120px;        /* ← まずはここ */
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
/* QRコードまわりの整え */
.qr-box{
  text-align: center;
}

.qr-box img{
  margin-bottom: 10px; /* ← QRとテキストの距離 */
}

.qr-box .qr-note{
  margin-top: 4px;     /* 念のため */
  font-size: 12px;
  color: rgba(54,79,89,.7);
  line-height: 1.6;
}


/* =========================
   Readability (Global + Reserve)
   ========================= */


/* 本文系：太さを戻す（かすれ対策） */
p,
.lead,
.menu-desc,
.note,
.caption{
  font-weight: 400;
  color: rgba(1,40,64,.88);
}

/* Reserveページの本文系：濃さを少し上げる */
body.page-id-30 p,
body.page-id-30 .lead,
body.page-id-30 .reserve-sub,
body.page-id-30 .reserve-grid .step .d,
body.page-id-30 .reserve-grid .qa .a{
  font-weight: 400;
  color: rgba(1,40,64,.90);
}

/* =========================
   Link visibility (本文リンクだけ分かるように)
   ========================= */

p a,
.lead a,
.note a,
.caption a{
  text-decoration: underline;
  text-decoration-color: rgba(105,142,191,.55);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

p a:hover,
.lead a:hover,
.note a:hover,
.caption a:hover{
  text-decoration-color: rgba(105,142,191,.85);
}

/* =========================
   Header / Footer readability (no !important)
   ========================= */

/* Header */
body.wp-theme-forest-sail-adventure .nav .brand .t{
  letter-spacing: 0.28em;
  font-weight: 400;
}
body.wp-theme-forest-sail-adventure .nav .brand .s{
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(1,40,64,.72);
}
body.wp-theme-forest-sail-adventure .nav .links{
  font-size: 12px;
  letter-spacing: 0.18em;
}

/* Footer */
body.wp-theme-forest-sail-adventure footer .mini,
body.wp-theme-forest-sail-adventure footer .footline{
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(1,40,64,.70);
}

/* =========================
   Contrast Boost（薄文字をやめる）
   ========================= */

/* まずは「本文っぽい説明文」を濃く＆太く */
.lead,
.bullet,
.menu-desc,
.note,
.caption,
.quote p,
.card p,
.pick-text,
.mini,
.strip-note{
  color: rgba(1,40,64,.88) !important;   /* 霧を消す */
  font-weight: 400 !important;          /* かすれを消す */
}

/* Accessの住所・案内など（カード内の薄文字対策） */
.panel,
.panel p,
.access-grid p,
.access-grid .mini{
  color: rgba(1,40,64,.88) !important;
}

/* フッターの最下段（コピーライト等） */
.footline{
  color: rgba(1,40,64,.72) !important;  /* ここは“薄すぎない薄さ” */
}

/* =========================
   English labels only
   ========================= */

.eyebrow,
.section-label{
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* =========================
   Section headings: label + title
   ========================= */

/* 小ラベル：HOW TO / CONTACT（.k） */
.k{
  color: #99AABF;
  font-weight: 700;
  letter-spacing: 0.38em; /* 少しだけ落ち着かせる */
}

/* セクション見出し（予約の流れ / ご予約はこちら など） */
section h2{
  color: #364F59;         /* Forest（おすすめ） */
  /* color: #698EBF; */   /* ←ブルーにしたいならこっちに切り替え */
  font-weight: 500;
  font-size: 26px;        /* 大きめ */
  letter-spacing: 0.02em; /* 日本語は詰め気味が上品 */
  line-height: 1.45;
}

/* 説明文（リード）：読みやすく（薄すぎ防止） */
.lead{
  font-size: 16px;
  line-height: 1.9;
  font-weight: 400;
  color: rgba(1,40,64,.88);
}

/* 小ラベル（HOW TO / CONTACT みたいなやつ） */
.k{
  color:#99AABF;
  font-weight:700;
  letter-spacing:.34em;
}

/* 見出しは “全部” じゃなく “セクションの中だけ” */
.head h2,
section h2,
footer h2{
  color:#364F59;        /* Forest。青にするなら #698EBF に */
  font-weight:500;
  letter-spacing:.02em;
  font-size:26px;
  line-height:1.45;
}
/* HEROのh1だけ、細くする（ごん太防止） */
.hero-title{
  font-weight:250 !important;   /* モックアップ準拠 */
  letter-spacing:.02em !important;
  color:rgba(1,40,64,.94) !important;
}
/* =========================
   HERO title: force mock weight
   ========================= */

.hero h1,
.hero .hero-title{
  font-weight: 250 !important;
  letter-spacing: .02em !important;
  color: rgba(1,40,64,.94) !important;
}

/* サブコピーもモック寄せ（薄すぎ防止） */
.hero .hero-sub{
  font-weight: 350 !important;
  color: rgba(54,79,89,.82) !important;
}
/* =========================
   Font Family（Medium禁止）
   ========================= */
body{
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "游ゴシック体",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
/* =========================
   Notes / small print（注意書きだけ少し小さく）
   ========================= */

/* Reserveの注意書き（最終調整） */
body.page-id-30 p.fine{
  font-size: 13px;
  line-height: 1.9;
  font-weight: 400;
  color: rgba(1,40,64,.72);
  letter-spacing: normal;
}

/* =========================
   Breadcrumbs（現在地ナビ）
   ========================= */

.crumbs{
  font-size: 10.5px;
  color: rgba(1,40,64,.38);
  letter-spacing: 0.16em;
  margin-top: 32px;
}

.crumbs a{
  color: rgba(1,40,64,.55);
  text-decoration: none;
}

.crumbs a:hover{
  text-decoration: underline;
}

.breadcrumb-bar{
  background: rgba(240,245,248,.8); /* うっすら */
  border-bottom: 1px solid rgba(1,40,64,.08);
}

.breadcrumb-bar .container{
  padding: 8px 0;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(1,40,64,.45);
}

.breadcrumb-bar a{
  color: inherit;
  text-decoration: none;
}
/* =========================
   Reserve page title
   ========================= */

.reserve-title{
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.06em;
}
/* Access：場所情報 */
#access .access-info{
  font-size: 15px;
  line-height: 1.8;
}
/* Journal layout */
.journal-layout{
  display: grid;
  gap: 18px;
  align-items: start;
}
@media (min-width: 900px){
  .journal-layout{
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
  }
}

.journal-title{
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.35;
  font-size: clamp(22px, 3.2vw, 34px);
}

.journal-article .entry{
  line-height: 2.05;
}
.journal-article .entry p{ margin: 0 0 1.1em; }
.journal-article .entry h2{
  margin: 1.8em 0 .6em;
  font-weight: 450;
  letter-spacing: .04em;
}
.journal-article .entry h3{
  margin: 1.4em 0 .6em;
  font-weight: 450;
  letter-spacing: .04em;
}

.journal-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.journal-list li{
  padding: 8px 0;
  border-bottom: 1px solid rgba(1,40,64,.08);
  font-size: 12px;
  color: rgba(1,40,64,78);
}
.journal-list li:last-child{ border-bottom: none; }

.journal-tags a,
.journal-cat{
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 6px 10px;
  border: 1px solid rgba(1,40,64,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  font-size: 11px;
  color: rgba(1,40,64,.74);
  text-decoration: none;
}

.journal-pagination{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.journal-pagination .page-numbers{
  padding: 8px 10px;
  border: 1px solid rgba(1,40,64,12);
  border-radius: 12px;
  background: rgba(255,255,255,65);
  font-size: 12px;
}
.journal-pagination .current{
  background: rgba(105,142,191,.20);
  border-color: rgba(105,142,191,.25);
}

.journal-prevnext{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
/* 症状別コラム：施術情報ボックス */
.treatment-box{
  padding: 16px 18px;
  margin: 24px 0;
  border-left: 3px solid #7aa6b2;
  background: rgba(122,166,178,.0.08);
  font-size: 14px;
}
.treatment-box p{
  margin: 0;
}
/* =========================
   Journal（投稿本文）の見出しを効かせる
   ========================= */
body.single .entry-content h2{
  font-size: 22px;
  line-height: 1.55;
  font-weight: 600;
  color: #364F59;
  margin: 1.2em 0 .55em;
  letter-spacing: .02em;
}

body.single .entry-content h3{
  font-size: 18px;
  line-height: 1.65;
  font-weight: 600;
  color: rgba(1,40,64,.92);
  margin: 1.1em 0 .45em;
}

body.single .entry-content h4{
  font-size: 16px;
  line-height: 1.75;
  font-weight: 700;
  color: rgba(1,40,64,.90);
  margin: 1.0em 0 .35em;
}

/* 見出し直後の段落が詰まりすぎる時の保険 */
body.single .entry-content h2 + p,
body.single .entry-content h3 + p,
body.single .entry-content h4 + p{
  margin-top: 0;
}
/* =========================
   Journal cards：テキスト版（アイキャッチ無し）
   ========================= */
.journal-archive .card,
.journal-single .card{
  overflow: hidden;
}

/* thumb を使わない運用なので、もし残ってても表示しない保険 */
.journal-archive .thumb,
.journal-single .thumb{
  display: none !important;
}

.journal-archive .card-body,
.journal-single .card-body{
  padding: 20px 20px 22px;
}

.journal-archive .card .meta,
.journal-single .card .meta{
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: none; /* 日本語運用なら解除した方が落ち着く */
  color: rgba(54,79,89,.72);
}

.journal-archive .card h3,
.journal-single .card h3{
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: .02em;
}

.journal-archive .card p{
  margin-top: 10px;
}
/* Journal本文の見出し */
body.single .journal-article .entry h2{ font-size:22px; margin:1.2em 0 .55em; }
body.single .journal-article .entry h3{ font-size:18px; margin:1.1em 0 .45em; }
body.single .journal-article .entry h4{ font-size:16px; margin:1.0em 0 .35em; }
/* テキストカードに「上部の帯」を追加（擬似サムネ） */
#journal .card > a,
.journal-archive .card > a,
.journal-single .card > a{
  display:block;
}

/* 帯ができたぶん、本文の上余白を少し調整 */
#journal .card-body,
.journal-archive .card-body,
.journal-single .card-body{
  padding-top: 16px;
}
/* カードに背表紙（左ライン）を付ける */
#journal .card,
.journal-archive .card,
.journal-single .card{
  position: relative;
}

#journal .card::before,
.journal-archive .card::before,
.journal-single .card::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(122,166,178,.55);
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
}
/* タイトルの先頭1文字を強めにして「読み物感」 */
#journal .card h3::first-letter,
.journal-archive .card h3::first-letter,
.journal-single .card h3::first-letter{
  font-size: 2.0em;
  line-height: 1;
  position: relative;
  top: .08em;
}
/* ===== カテゴリー（章） ===== */
.post-categories a{
  background: rgba(122,166,178,.18);
  border: 1px solid rgba(122,166,178,.45);
  color: #012840;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .08em;
}

/* ===== タグ（索引語） ===== */
.post-tags a{
  background: transparent;
  border: 1px solid rgba(1,40,64,.35);
  color: rgba(1,40,64,.75);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
}
.post-categories a::before{
  content: "CATEGORY";
  font-size: 9px;
  letter-spacing: .12em;
  margin-right: 6px;
  opacity: .6;
}
/* ===== singleの表示に合わせて：カテゴリ（章） ===== */
.journal-cat{
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 6px 12px;
  border-radius: 999px;

  background: rgba(122,166,178,.18);
  border: 1px solid rgba(122,166,178,.45);
  color: #012840;

  font-size: 11px;
  letter-spacing: .08em;
}

/* journal-cat が a じゃなくても「CATEGORY」付けたい場合 */
.journal-cat::before{
  content: "CATEGORY";
  font-size: 9px;
  letter-spacing: .12em;
  margin-right: 6px;
  opacity: .6;
}

/* ===== singleの表示に合わせて：タグ（索引語） ===== */
.journal-tags a{
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 6px 12px;
  border-radius: 999px;

  background: transparent;
  border: 1px solid rgba(1,40,64,.35);
  color: rgba(1,40,64,.75);

  font-size: 11px;
}

/* =========================
   Journal pills: category vs tags（確実版）
   ========================= */

/* カテゴリ（章）：塗り＋線しっかり */
.journal-cat{
  border: 1px solid rgba(1,40,64,.28) !important; /* ←線を濃く */
  background: rgba(122,166,178,.18) !important;
  color: rgba(1,40,64,.92) !important;
  font-size: 12px !important;                  /* ←少し戻す */
  font-weight: 600 !important;
  letter-spacing: .02em !important;            /* ←読みやすく */
}

/* CATEGORYラベル：薄すぎるなら濃く＆小さすぎない */
.journal-cat::before{
  font-size: 10px !important;
  opacity: .75 !important;
}

/* タグ（索引語）：線だけ・読みやすく */
.journal-tags a{
  border: 1px solid rgba(1,40,64,.22) !important; /* ←前の濃さ寄せ */
  background: transparent !important;
  color: rgba(1,40,64,.86) !important;            /* ←かすれ対策 */
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}
/* Treatment box：背景が消える事故の保険（最終勝ち） */
.entry-content .treatment-box,
.journal-article .treatment-box,
.journal-article .treatment-box.wp-block-group{
  background: rgba(122,166,178,.10) !important;
  border-left: 3px solid rgba(122,166,178,.75) !important;
  padding: 16px 18px !important;
  margin: 24px 0 !important;
  border-radius: 16px !important;
}

/* 中の段落の余白調整（2行が詰まりすぎるの防止） */
.entry-content .treatment-box p{
  margin: 0 !important;
}
.entry-content .treatment-box p + p{
  margin-top: 6px !important;
}
/* =========================
   LEGACY tuning (override)
   ========================= */

/* 1) Mosaic を2カラム → 1カラム（縦に積む） */
.legacy-wall{
  grid-template-columns: 1fr !important;
  gap: 18px;
}

/* PCだけ2列にしてリズムを出す */
@media (min-width: 1024px){
  .zoom-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.zoom{
  height: auto !important;
  aspect-ratio: 16 / 9;     /* 横長の“額縁” */
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.92);
}

.zoom img{
  width: 100%;
  height: 100%;
  object-fit: contain !important; /* 絶対に切らない */
}


/* LEGACY: Highlights（左）× Picks（右） */
.legacy-focus{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px){
  .legacy-focus{
    grid-template-columns: 3fr 2fr;
    align-items: start;
    gap: 32px;
  }
}

/* 左のzoomは縦積み固定 */
.zoom-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.posts-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 900px){
  .posts-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
/* Journal layout */
.journal-layout{
  display: grid;
  gap: 24px;
}

/* PCで2カラム */
@media (min-width: 1024px){
  .journal-layout{
    grid-template-columns: 1fr 320px;
    align-items: start;
  }
}

.journal-side{
  position: sticky;
  top: 100px;
}

.journal-side .side-block{
  margin-top: 18px;
  font-size: 0.9rem;
}

/* =========================================================
   JOURNAL CARDS (FINAL / SAFE BLOCK)
   目的：JOURNALカードの見た目を“ここ1ヶ所”に封じ込める
   対象：TOP #journal / 投稿一覧 archive / 投稿 single
   見た目：現状維持（グラデ帯 + 左ライン + サムネ無し運用）
   注意：ここ以外の .card / .cards は“共通部品”として残してOK
   ========================================================= */

/* ---------- Scope（効かせる範囲） ---------- */
#journal .card,
.journal-archive .card,
.journal-single .card{
  /* 左ライン（card::before）の基準点 */
  position: relative;

  /* カードの基本見た目：現状の値を踏襲 */
  border: 1px solid rgba(1,40,64,.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.72);
  transition: transform .15s ease, box-shadow .2s ease;
}

#journal .card:hover,
.journal-archive .card:hover,
.journal-single .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(1,40,64,.10);
}

/* ---------- クリック領域（aタグをブロック化） ---------- */
#journal .card > a,
.journal-archive .card > a,
.journal-single .card > a{
  display: block;
}


/* ---------- 左ライン（背表紙） ---------- */
#journal .card::before,
.journal-archive .card::before,
.journal-single .card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(122,166,178,.55);
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
}

/* ---------- サムネ無し運用（thumbは使わない） ---------- */
#journal .thumb,
.journal-archive .thumb,
.journal-single .thumb{
  display: none !important;
}

/* ---------- 帯がある前提の本文余白（現状維持） ---------- */
#journal .card-body,
.journal-archive .card-body,
.journal-single .card-body{
  padding: 16px 20px 22px; /* “padding-topだけ詰める”を統合 */
}

/* ---------- 文字まわり（現状の落ち着き） ---------- */
#journal .card .meta,
.journal-archive .card .meta,
.journal-single .card .meta{
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: none;
  color: rgba(54,79,89,.72);
}

#journal .card h3,
.journal-archive .card h3,
.journal-single .card h3{
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: .02em;
}

#journal .card p,
.journal-archive .card p,
.journal-single .card p{
  margin-top: 10px;
}

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

/* =========================================================
   JOURNAL CARDS LAYOUT（一覧の並べ方だけ）
   目的：カードを「カードらしく」並べる（横長化を防ぐ）
   ========================================================= */
#journal .cards,
.journal-archive .cards,
.journal-single .cards{
  display: grid;
  gap: 16px;
}

/* PC：カードを複数カラムに戻す（削除前と同じ挙動） */
@media (min-width: 900px){
  #journal .cards,
  .journal-archive .cards,
  .journal-single .cards{
    grid-template-columns: repeat(3, 1fr);
  }
}
/* =========================================
   Journal cards：カテゴリピル装飾をやめる（カード内だけ）
   目的：見出し/本文を主役に戻す。カテゴリは控えめリンクにする
   ========================================= */

#journal .card .post-categories a,
.journal-archive .card .post-categories a,
.journal-single .card .post-categories a{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  color: rgba(54,79,89,.72) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(1,40,64,.18) !important; /* うっすら下線だけ */
}

#journal .card .post-categories a:hover,
.journal-archive .card .post-categories a:hover,
.journal-single .card .post-categories a:hover{
  border-bottom-color: rgba(1,40,64,.42) !important;
}

/* カード内の "CATEGORY" ラベルだけ消す */
#journal .card .post-categories a::before,
.journal-archive .card .post-categories a::before,
.journal-single .card .post-categories a::before{
  content: none !important;
}
/* カード全体クリックを有効化（.card-linkを最前面へ） */
#journal .card,
.journal-archive .card,
.journal-single .card{
  position: relative;
}

/* 透明リンクをカード全面に敷いて、本文より上にする */
#journal .card .card-link,
.journal-archive .card .card-link,
.journal-single .card .card-link{
  position: absolute;
  inset: 0;
  z-index: 2;      /* ← ここが重要：本文より上 */
  display: block;
  border-radius: 18px;
}

/* 本文は透明リンクより下に置く（本文クリックを.card-linkが拾うため） */
#journal .card-body,
.journal-archive .card-body,
.journal-single .card-body{
  position: relative;
  z-index: 1;
}

/* ただし「カテゴリ」「読む」など“個別リンク”は透明リンクより上に出す */
#journal .card .card-cat,
.journal-archive .card .card-cat,
.journal-single .card .card-cat,
#journal .card .btn,
.journal-archive .card .btn,
.journal-single .card .btn{
  position: relative;
  z-index: 3;
}

/* =========================
   Journal cards : click & band (safe)
   ========================= */

/* カードを基準にして、透明リンクを全面に敷く */
.journal-archive .card{
  position: relative;
  overflow: hidden;
}

/* 透明リンク：カード全面クリック */
.journal-archive .card-link{
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* 中身は透明リンクより上に出す（※中のリンクもクリック可能にする） */
.journal-archive .card-body{
  position: relative;
  z-index: 2;
}

/* 左ラインや上部帯がクリックを邪魔しないようにする */
.journal-archive .card::before,
.journal-archive .card::after{
  pointer-events: none;
}

/* 上部の薄いグラデ帯（擬似サムネ）を card::after に統一 */
.journal-archive .card::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:54px;
  border-bottom:1px solid rgba(1,40,64,.08);
  background: linear-gradient(180deg, rgba(122,166,178,.18), rgba(122,166,178,.06));
  z-index: 0;
}

/* 帯のぶんだけ中身を下げる（ここが“タイトルがグラデに食い込む”の防波堤） */
.journal-archive .card-body{
  padding-top: 16px;
}

/* 左ライン（背表紙） */
.journal-archive .card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background: rgba(122,166,178,.55);
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
  z-index: 0;
}
/* =========================================================
   FIX: Journalカードの帯（二重）とメタ食い込みを解消
   方針：帯は card::after のみに統一。a::before は無効化。
   ========================================================= */

/* 1) 「a::beforeで作ってた帯」を無効化（帯の二重化を止める） */
#journal .card > a::before,
.journal-archive .card > a::before,
.journal-single .card > a::before{
  content: none !important;
  display: none !important;
}

/* 2) 帯は card::after のみで表示（既存の after があればそれを採用） */
#journal .card,
.journal-archive .card,
.journal-single .card{
  position: relative;
  overflow: hidden;
}

#journal .card::after,
.journal-archive .card::after,
.journal-single .card::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:54px;
  border-bottom:1px solid rgba(1,40,64,.08);
  background: linear-gradient(180deg, rgba(122,166,178,.18), rgba(122,166,178,.06));
  z-index: 0;
  pointer-events: none;
}

/* 3) 帯の分だけ本文を下げる（＝食い込み防止の本丸） */
#journal .card-body,
.journal-archive .card-body,
.journal-single .card-body{
  position: relative;
  z-index: 2;
  padding-top: 70px !important; /* ←カテゴリ/日付が帯に入らない */
}


/* meta を帯の中に固定配置（カテゴリ名/日付） */
#journal .card .meta,
.journal-archive .card .meta,
.journal-single .card .meta{
  position: absolute;
  top: 14px;
  left: 20px;
  right: 20px;
  z-index: 3;          /* .card-link(z=2)より上に出す */
  margin: 0;
  pointer-events: auto; /* 必要ならクリックも通す */
}

/* =========================================================
   JOURNAL CARDS (FINAL)
   方針：帯=card::after、meta=帯の中、title=帯の下
   ========================================================= */

#journal .card,
.journal-archive .card,
.journal-single .card{
  position: relative;
  border: 1px solid rgba(1,40,64,.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.72);
  transition: transform .15s ease, box-shadow .2s ease;
}

#journal .card:hover,
.journal-archive .card:hover,
.journal-single .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(1,40,64,.10);
}

/* 左ライン（背表紙） */
#journal .card::before,
.journal-archive .card::before,
.journal-single .card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: rgba(122,166,178,.55);
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
  pointer-events: none;
}

/* 上部のグラデ帯：card::after に統一 */
#journal .card::after,
.journal-archive .card::after,
.journal-single .card::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:54px;
  border-bottom:1px solid rgba(1,40,64,.08);
  background: linear-gradient(180deg, rgba(122,166,178,.18), rgba(122,166,178,.06));
  z-index: 0;
  pointer-events: none;
}

/* a::beforeで帯を作ってた残骸は殺す */
#journal .card > a::before,
.journal-archive .card > a::before,
.journal-single .card > a::before{
  content: none !important;
  display: none !important;
}

/* 本文は「帯の下」に必ず来る（食い込み防止の本丸） */
#journal .card-body,
.journal-archive .card-body,
.journal-single .card-body{
  position: relative;
  z-index: 2;
  padding: 70px 20px 22px !important; /* 54(帯) + 16(余白) */
}

/* metaは帯の中に固定 */
#journal .card .meta,
.journal-archive .card .meta,
.journal-single .card .meta{
  position: absolute;
  top: 14px;
  left: 20px;
  right: 20px;
  z-index: 3;
  margin: 0;
}

/* クリック領域：archive/singleは card-link を全面に敷く */
.journal-archive .card .card-link,
.journal-single .card .card-link{
  position: absolute;
  inset: 0;
  z-index: 1;            /* 本文より下でもOK（本文をクリック透過にするため） */
  display: block;
  border-radius: inherit;
}

/* archive/singleだけ：本文のクリックを下に通す（=全面クリック復活） */
.journal-archive .card-body,
.journal-single .card-body{
  pointer-events: none;
}

/* ただし「読むボタン」などはクリックできるように戻す */
.journal-archive .card-body a,
.journal-archive .card-body .btn,
.journal-single .card-body a,
.journal-single .card-body .btn{
  pointer-events: auto;
}

/* カード並び（一覧レイアウト） */
#journal .cards,
.journal-archive .cards{
  display: grid;
  gap: 18px;
}

@media (min-width: 900px){
  #journal .cards,
  .journal-archive .cards{
    grid-template-columns: repeat(3, 1fr);
  }
}
/* =========================
   HOME：Journal teaser（Hero直下のテキスト3件）
   ========================= */
.journal-teaser{
  padding: 18px 0 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border-bottom: 1px solid rgba(1,40,64,.08);
}

.journal-teaser-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.journal-teaser-more{
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(1,40,64,.62);
  border-bottom: 1px solid rgba(1,40,64,.18);
}

.journal-teaser-more:hover{
  color: rgba(1,40,64,.82);
  border-bottom-color: rgba(1,40,64,.36);
}

.journal-teaser-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.journal-teaser-item{
  display:flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(1,40,64,.06);
  background: rgba(255,255,255,.70);
}

.jt-date{
  font-size: 11px;
  color: rgba(54,79,89,.70);
  letter-spacing: .08em;
}

.jt-dot{
  color: rgba(1,40,64,.25);
}

.jt-cat{
  font-size: 11px;
  color: rgba(54,79,89,.78);
  letter-spacing: .12em;
}

.jt-title{
  font-size: 13px;
  font-weight: 600;
  color: rgba(1,40,64,.90);
  border-bottom: 1px solid rgba(1,40,64,.10);
}

.journal-teaser-item:hover .jt-title{
  border-bottom-color: rgba(1,40,64,.30);
}

/* About：大橋先生の写真（主役） */
.about-page #profile figure img{
  width: 100%;
  max-width: 420px;   /* ← 主役サイズ */
  margin: 0 auto;
  display: block;
  border-radius: 20px;
}

@media (min-width: 900px){
  .about-page #profile figure img{
    max-width: 460px; /* PCでは堂々と */
  }
}


/* 修了証：もっと大きく、読みやすく */
.about-page .certificate-grid{
  display: grid;
  gap: 24px;
}

@media (min-width: 768px){
  .about-page .certificate-grid{
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

.about-page .certificate{
  padding: 18px;
}

.about-page .certificate img{
  width: 100%;
  max-width: 520px;     /* ← ここが肝 */
  margin: 0 auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* 修了証：カード側の高さ制限を解除（追記） */
.about-page .certificate{
  height: auto !important;
  aspect-ratio: auto !important;
}
/* 微調整：画像をほんの少しだけ控えめに */
.about-page .certificate img{
  max-width: 460px;
}
/* About：修了証（zoom）だけは「切らずに全体表示」最優先 */
.about-page #profile .zoom-grid .zoom{
  aspect-ratio: auto !important; /* 16/9 縛りを解除 */
  height: auto !important;       /* 高さ固定を解除 */
  overflow: visible !important;  /* 念のため */
  display: block !important;
}

.about-page #profile .zoom-grid .zoom img{
  width: 100% !important;
  height: auto !important;       /* height:100% を殺す（ここが重要） */
  object-fit: contain !important;
  display: block !important;
}


/* 静かなオーバーレイ */
.closing::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(251,252,254,.88) 0%,
      rgba(251,252,254,.82) 40%,
      rgba(251,252,254,.92) 100%
    );
  z-index:0;
}

.closing .container{
  position: relative;
  z-index:1;
}
/* Closing 背景セクション */
.closing{
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background-image: url('images/closing-lake.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom; /* ← 追加 */
}

.about-page figure{
  display: block;        /* ← これが決定打 */
  width: fit-content;
  margin: 0 auto;
}
.about-page #profile .profile-figure .caption{
  text-align: center;
    margin-top: 10px;
  margin-bottom: 16px; /* ← ここを追加（おすすめ 14〜18px） */
}
.about-page #profile .profile-figure .caption{
  display: block;
  text-align: center;
}
.about-page #profile .profile-figure .caption a{
  display: inline;        /* ← これが肝 */
  text-align: inherit;
}
/* プロフィール写真（大橋先生/師匠 共通）：写真に合わせて中央 */
.profile-figure{
  width: fit-content;
  margin: 0 auto;
}

.profile-figure > img{
  display: block;
}

.profile-figure .caption{
  display: block;
  text-align: center;
}

#rules{
  background: rgba(191,205,217,.16);
}

/* =========================
   RESERVE レイアウト
========================= */

/* モバイル：縦並び（デフォルト） */
body.page-id-30 .reserve-grid{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 右側まとめブロック */
body.page-id-30 .reserve-right{
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* PC表示 */
@media (min-width: 900px){

  body.page-id-30 .reserve-grid{
    display: grid;
    grid-template-columns: 1.6fr 0.8fr; /* 左大きく、右細め */
    gap: 32px;
    align-items: start;
  }

  body.page-id-30 .reserve-right{
    gap: 24px;
  }

}

/* =========================
   Reserve: LINE特典（目立たせる版）
========================= */

.promo-box{
  padding:22px 24px;
  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(190,215,235,.65) 0%,
      rgba(170,200,225,.55) 40%,
      rgba(200,220,240,.45) 100%
    );

  border:1px solid rgba(130,170,210,.5);
  box-shadow: 0 12px 28px rgba(1,40,64,.08);
  color:#0e3552;
}

.promo-box strong{
  font-weight:600;
}

/* 「LINE特典」ラベル用の楕円 */
.promo-box .promo-tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(130,170,210,.55);
  box-shadow:0 6px 14px rgba(1,40,64,.10);
  font-size:.85rem;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.line-box .qr-box{
  margin-top: 14px;
  text-align: center;
}
.line-box .qr-note{
  margin-top: 10px;
}

/* reserve-right：右カラムは常に縦積み */
.reserve-right{
  display:flex;
  flex-direction:column;
  gap:20px;
}
@media (min-width: 900px){
  .reserve-right{ gap:24px; }
}

.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

@media (max-width: 640px){
  .hero-cta{
    flex-direction:column;
  }
}
.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-start; /* ← これを明示 */
}

.hero-cta .btn{
  text-align:center;
  justify-content:center;
}


/* =========================
   FSA HERO (fixed pages common, collision-safe)
   ========================= */
.fsa-hero{
  padding-top: 56px;
  padding-bottom: 28px;
}

@media (min-width: 900px){
  .fsa-hero{
    padding-top: 68px;
    padding-bottom: 34px;
  }
}

.fsa-hero__title{
  margin-top: 14px;
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1.3;
  font-size: clamp(34px, 5vw, 64px);
  color: rgba(1,40,64,.96);
  text-shadow: 0 18px 60px rgba(1,40,64,.12);
}


/* ボタン内テキストの中央寄せ（スマホ楕円対策、維持） */
.hero-cta .btn{
  text-align:center;
  justify-content:center;
}

/* =========================
   FSA HERO: sub text readability (薄文字・かすれ対策)
   ========================= */
.fsa-hero__sub{
  font-weight: 400 !important;          /* 300 → 400 */
  color: rgba(1,40,64,.82) !important;  /* 霧を少し減らす */
  letter-spacing: 0.02em !important;    /* 日本語の読みやすさ */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* =========================
   RESERVEだけ旧heroが効く事故を止める（保険）
   ========================= */

/* 旧クラスが残っていても見た目を崩さない（無効化寄り） */
body.page-template-page-reserve .reserve-hero,
body.page-template-page-reserve .page-hero{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* RESERVEでも fsa-hero を他ページと同じに固定 */
body.page-template-page-reserve .fsa-hero,
body.page-id-30 .fsa-hero{
  padding-top: 56px;
  padding-bottom: 28px;
}
@media (min-width: 900px){
  body.page-template-page-reserve .fsa-hero,
  body.page-id-30 .fsa-hero{
    padding-top: 68px;
    padding-bottom: 34px;
  }
}

/* =========================
   FSA HERO: crumbs fix (Reserveだけ暴れても揃える)
   ========================= */
body.page-id-30 .fsa-hero .crumbs,
body.page-template-page-reserve .fsa-hero .crumbs{
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  color: rgba(1,40,64,.38) !important;
}
body.page-id-30 .fsa-hero .crumbs a,
body.page-template-page-reserve .fsa-hero .crumbs a{
  color: rgba(1,40,64,.55) !important;
}
/* =========================
   FSA: Hero直下 “最初のセクション” 共通
   目的：
   - hero直下を「帯グラデ背景」に統一
   - 背景の切替境界と .k の開始位置を統一
   ========================= */


/* hero直下の最初のセクション：境界線 + 上の余白を固定 */
.fsa-section--first{
  padding-top: 96px;     /* ←ここで “Guaranteeくらいの位置” に揃う */
  padding-bottom: 120px; /* padと揃える。padを外すならここだけで完結 */
}

/* 既存の .pad が付いている場合は、上だけ上書きして統一 */
.pad.fsa-section--first{
  padding-top: 96px;
}

/* もし個別に style="padding-top:40px" が残ってても負けない保険 */
section.fsa-section--first[style]{
  padding-top: 96px !important;
}
/* =========================
   FSA Section Divider（境界線の統一）
   ========================= */

/* 境界線：上に1本（次のセクションの頭に付ける） */
.fsa-divider-top{ border-top: 1px solid var(--line); }

/* 必要なら下にも1本（帯を“区切りたい”時用） */
.fsa-divider-bottom{ border-bottom: 1px solid var(--line); }
/* closing上の境界線がPCで“途切れて見える”のを防ぐ：border→疑似要素へ */
.closing.fsa-divider-top{
  border-top: 0 !important;     /* border線を殺す */
}

.closing.fsa-divider-top::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: rgba(1,40,64,.08);
  z-index: 2;                   /* closing::before(=0)より前面 */
  pointer-events:none;
  transform: translateZ(0);     /* 描画の割れ防止の保険 */
}
/* =========================
   FSA Common band background（少しだけ“見える”版）
   ========================= */
.fsa-band{
  background:
    radial-gradient(1200px 420px at 18% -10%,
      rgba(105,142,191,.18),
      rgba(105,142,191,0) 60%),
    radial-gradient(900px 360px at 85% 0%,
      rgba(191,205,217,.28),
      rgba(191,205,217,0) 55%),
    linear-gradient(180deg,
      rgba(191,205,217,.32),
      rgba(255,255,255,1));
}

.fsa-divider-top{
  border-top: 1px solid var(--line);
}
.fsa-divider-bottom{
  border-bottom: 1px solid var(--line);
}
/* RESERVEだけ：padの上余白を小さくして、下余白は残す */
.reserve-pad{
  padding-top: 32px;   /* 好みで 24〜48px くらい */
}
/* headerとheroの間に空気を入れる */
.fsa-hero{
  padding-top: 120px;   /* まずはこれで試す */
}
/* RESERVEも他ページと同じ空気にする */
body.page-template-page-reserve .fsa-hero,
body.page-id-30 .fsa-hero{
  padding-top: 120px;
  padding-bottom: 28px;
}
@media (min-width: 900px){
  body.page-template-page-reserve .fsa-hero,
  body.page-id-30 .fsa-hero{
    padding-top: 140px;  /* PCは少し贅沢に */
    padding-bottom: 34px;
  }
}

/* 写真どーん */
.about-visual{
  height: 70vh;
  background: url("images/asama.jpg") center/cover no-repeat;
}

/* 少しだけ落ち着かせたいなら */
.about-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.08);
}
.about-visual{
  position: relative;
}

.about-visual::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
}
.about-nature-text .container{
  max-width: 860px;
}
.about-nature-text p{
  max-width: 62ch;
}
.about-nature-text{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
}
.about-nature-text.is-visible{
  opacity: 1;
  transform: none;
}

/* 既存の hero-cta 上書きブロックを修正 */
.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center; /* ← centerに戻す */
}

@media (max-width: 640px){
  .hero-cta{
    flex-direction:column;
    align-items:center;   /* ← 縦積みでも中央へ */
  }
}

.journal-teaser__row{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}

.journal-teaser__row:hover .journal-teaser__title{
  text-decoration:underline;
}

/* ulの余白リセット（崩れ防止） */
.journal-teaser__list{
  list-style:none;
  margin:0;
  padding:0;
}

/* liは枠担当、aは中身担当 でもOKだし、aに枠を移してもOK */
.journal-teaser__item{
  margin:0;
}

/* ここが肝：aを「横幅100%のカード」にする */
.journal-teaser__row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:14px 18px;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.72);
}

/* タイトルが伸びる席（これないと変な詰まり方しがち） */
.journal-teaser__title{
  flex:1;
  min-width:0; /* 省略表示や折返し制御の土台 */
}

/* hoverはタイトルだけ下線、またはカード全体でも */
.journal-teaser__row:hover .journal-teaser__title{
  text-decoration:underline;
}

/* ===== TOP: Journal teaser (new BEM) ===== */

/* headを横並びに戻す */
.journal-teaser__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

/* 右上「すべて見る」 */
.journal-teaser__more{
  white-space:nowrap;
  font-size:12px;
  color: rgba(1,40,64,.55);
}

/* ulのデフォルトを消す */
.journal-teaser__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

/* 行全体リンク（カード） */
.journal-teaser__row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:14px 18px;
  text-decoration:none;
  color:inherit;

  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.72);
}

/* ここが“文字サイズ戻し”の核 */
.journal-teaser__row,
.journal-teaser__row *{
  font-size:12px;
  line-height:1.9;
}

/* 日付・カテゴリは少し薄く小さく */
.journal-teaser__date,
.journal-teaser__cat{
  font-size:11px;
  color: rgba(54,79,89,.72);
  white-space:nowrap;
}

/* タイトルだけ少し強く */
.journal-teaser__title{
  flex:1;
  min-width:0;
  font-size:13px;
  font-weight:700;
  color: rgba(1,40,64,.88);
}

/* hoverはタイトルだけ控えめに */
.journal-teaser__row:hover .journal-teaser__title{
  text-decoration:underline;
}

.section-top-journal{
  padding-top: 100px;
  padding-bottom: 90px;
}

/* TOP: Menu section helpers */
.section-menu__actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.section-menu__promo{
  margin-top:14px;
  display:block;
  text-decoration:none;
  color:inherit;
}

.section-menu__text{
  margin:0;
  line-height:2.05;
}
.section-menu__inline-link{
  text-decoration:underline;
}
.section-menu__promo-text{
  margin:0;
}

/* TOP: Legacy section helpers */
.section-legacy__focus{ margin-top:22px; }

.section-legacy__zooms-k{ margin:0; } /* 元の style="margin:0" の受け皿 */

.section-legacy__picks-list{ margin-top:18px; }

.section-legacy__links{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.section-legacy__note{ margin-top:10px; }

.legacy-pick__link{
  text-decoration: underline;
}

/* Single: spacing moved from inline styles */
.journal-single--offset{ padding-top:96px; }
.journal-single__section{ padding-top:0; }

.journal-single__head{ margin-bottom:18px; }
.journal-single__crumbs{ margin-bottom:10px; }

.journal-single__meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.journal-single__date{ margin-left:auto; }

.journal-single__title{ margin:12px 0 0; }

.journal-single__deck{
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:2.0;
}

.journal-single__tags{ margin-top:12px; }

.journal-single__prevnext{ margin-top:18px; }
.journal-single__next{ margin-left:auto; }

.journal-single__sidehead{ margin-bottom:14px; }
.journal-single__cta{ margin-top:18px; }

.access-actions{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.access-address{ 
  color: var(--accent, #365f8c);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.access-address:hover{ opacity:.8; }

/* 本文リンクだけ（広げすぎない） */
.section p a:not(.btn),
.section .lead a:not(.btn),
.section .note a:not(.btn),
.section .caption a:not(.btn),
.journal-article a:not(.btn){
  color: var(--accent, #365f8c);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.section p a:not(.btn):hover,
.section .lead a:not(.btn):hover,
.section .note a:not(.btn):hover,
.section .caption a:not(.btn):hover,
.journal-article a:not(.btn):hover{
  color: #1f456b;
}

/* 事故バナーは「全体がリンク」なので下線は消す */
.section-menu__accident{
  text-decoration: none;
}

/* ナビのリンクは本文リンク扱いにしない */
.nav a{
  text-decoration: none !important;
}

.brand{
  display:block;
  text-decoration:none;
  color:inherit;
}

.section-hero__cta{
  justify-content:center;
}

.fsa-hero .hero-cta{
  justify-content: flex-start;
  text-align: left;
}

/* Price：左=料金 / 右=支払い方法 */
.price-grid{
  display: grid;
  grid-template-columns: 1fr; /* スマホは縦 */
  gap: 18px;
}

@media (min-width: 1024px){
  .price-grid{
    grid-template-columns: 3fr 2fr; /* PCは左右 */
    align-items: start;
    gap: 24px;
  }
}

.pay-list{
  margin: 0;
  padding-left: 1.2em;
  line-height: 2.0;
}


/* ============================
   HERO: video + title + scroll hint (clean)
   ============================ */

.hero{
  position: relative;
  overflow: hidden;
  min-height: 100svh;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  pointer-events:none;
}

/* ===== Video layer ===== */
.hero-videoLayer{
  position:absolute;
  inset:0;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events:none;

  /* 体感が重くならない標準値（長すぎ注意） */
  transition:
    opacity 1.6s ease,
    visibility 0s linear 1.6s;
}

.hero.is-video-off .hero-videoLayer{
  opacity: 0;
  /* visibility: hidden; */
}

.hero-video{
  position:absolute;
  inset:-2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: saturate(.75) brightness(.9) contrast(.92);
}

.hero-videoTint{
  position:absolute;
  inset:0;
  z-index: 1;
  background: rgba(30,60,90,.10);
  pointer-events:none;
}

.hero-videoFade{
  position:absolute;
  left:0; right:0;
  bottom:-24px;
  height: 60%;
  z-index: 2;
  background: linear-gradient(
    0deg,
    #fff 0%,
    rgba(255,255,255,.95) 45%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(10px);
  pointer-events:none;
}

/* ===== Title layer（ここだけで統一。section-hero__inner版は廃止） ===== */
.hero-inner{
  position: relative;
  z-index: 2;

  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 1.4s ease,
    transform 2.2s cubic-bezier(.22,.8,.2,1);
  will-change: opacity, transform;
}

.hero.is-awake .hero-inner{
  opacity: 1;
  transform: translateY(0);
}


/* =========================
   Photo strip tone
   ========================= */
.photo-strip img{
  filter: saturate(.7) brightness(.9) contrast(.95);
  transition: filter .6s ease;
}

.photo-strip{
  position: relative;
}

.photo-strip::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(30,60,90,.06);
  pointer-events:none;
  z-index:1;
}

.photo-strip .strip{
  position:relative;
  z-index:2;
}

/* =========================
   Scroll Reveal（ふわっと出る）※強制版は廃止
   ========================= */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.22,.8,.2,1);
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* 動きを減らしたい人への配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   Reveal: final fix (force win)
   ========================= */
.reveal{
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.22,.8,.2,1) !important;
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1 !important;
  transform: translateY(0) !important;
}



/* =========================
   About: Visual slider + overlap panel（About限定・統合版）
   ========================= */

/* slider本体：フル幅 */
body.page-template-tpl-about-php .about-visual--slider{
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;

  height: 600px;
  overflow: hidden;
  background: #e9eef2;
}

/* slidesは必ず全面 absolute */
body.page-template-tpl-about-php .about-visual--slider .about-visual__slides{
  position: absolute;
  inset: 0;
  height: 100%;
}

body.page-template-tpl-about-php .about-visual--slider .about-visual__slide{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}

body.page-template-tpl-about-php .about-visual--slider .about-visual__slide.is-active{
  opacity: 1;
}

body.page-template-tpl-about-php .about-visual--slider .about-visual__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* slide(figure)が半幅になるのを潰す */
body.page-template-tpl-about-php .about-visual--slider .about-visual__slide{
  width: 100%;
  height: 100%;
  max-width: none;
}

/* img側にも max-width解除（保険） */
body.page-template-tpl-about-php .about-visual--slider .about-visual__slide img{
  max-width: none;
}


/* overlap panel */
body.page-template-tpl-about-php .about-intro{
  margin-top: -120px;
  position: relative;
  z-index: 2;
  padding-bottom: 18px;
}

body.page-template-tpl-about-php .about-panel{
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255,255,255,.92);
  padding: 30px 34px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(1,40,64,.08);
}

body.page-template-tpl-about-php .about-panel .k{
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  font-size: var(--fs-meta); 
  margin-bottom: 10px;
}

body.page-template-tpl-about-php .about-panel h2{ margin: 0 0 14px; }
body.page-template-tpl-about-php .about-panel p{ margin: 0 0 14px; line-height: 2.0; }

/* responsive */
@media (max-width: 900px){
  body.page-template-tpl-about-php .about-visual--slider{ height: 360px; }
  body.page-template-tpl-about-php .about-intro{ margin-top: -90px; }
  body.page-template-tpl-about-php .about-panel{ padding: 24px 20px; border-radius: 14px; }
}

@media (max-width: 520px){
  body.page-template-tpl-about-php .about-visual--slider{ height: 320px; }
  body.page-template-tpl-about-php .about-intro{ margin-top: -70px; }
}



/* About slider：上の帯（擬似要素）を消す */
body.page-template-tpl-about-php .about-visual--slider::before,
body.page-template-tpl-about-php .about-visual--slider::after{
  content: none !important;
  display: none !important;
}


.panel.quote .bullet{
  margin-top: 16px;
  text-align: left;      /* 引用が中央でも、箇条書きは左が読みやすい */
}

.panel.quote .bullet > div{
  align-items: flex-start; /* ドットと文の縦位置を揃える */
}

/* ロゴのフォーカス枠を消す（必要なら限定） */
.nav .brand a:focus,
.nav .brand a:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* =========================
   Section dividers (TOP: Menu / Legacy)
   ========================= */
.section-menu,
.section-legacy{
  border-top: 1px solid var(--line);
}

/* Policy principles panel */
.policy-principles{
  display:flex;
  flex-direction:column;
}

.policy-title{
  margin:0 0 18px 0;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:900;
  color:rgba(1,40,64,.60);
}

.policy-lines{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.policy-lines p{
  margin:0;
  font-size:15px;
  font-weight:300;
  line-height:1.9;
  color:rgba(1,40,64,.88);
  letter-spacing:.05em;
}
.policy-principles{
  display:flex;
  flex-direction:column;
  padding-top:34px;
}
.policy-lines p{
  position:relative;
  padding-left:20px;
}

.policy-lines p::before{
  content:"";
  position:absolute;
  left:0;
  top:0.65em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(105,142,191,.55); /* ブランドブルー */
}


@media (max-width: 600px){
  .section-hero__cta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: center;
  }
  .section-hero__cta .btn{
    width: 100%;
    max-width: 220px;
    text-align: center;
  }
  .section-hero__cta .btn:nth-child(3){
    grid-column: 1 / -1; /* Reserveだけ下に1列 */
  }
}


/* === Journal teaser: スマホで縦落ちするのを止める === */
@media (max-width: 768px){
  .journal-teaser__list li,
  .journal-teaser__list li a{
    display: block !important;
  }
}


/* =========================
   Base Paragraph
   ========================= */

/* 通常本文は15px */
p{
  font-size: var(--fs-base);
  line-height: 2.05;
}

/* Hero sub は本文サイズ */
.fsa-hero__sub{
  font-size: var(--fs-base);
  line-height: 2.05;
}

/* =========================
   Sub Text（少し小さく）
   ========================= */

.hero-sub,
.lead,
.bullet{
  font-size: var(--fs-sub);
  line-height: 2.0;
}

/* =========================
   Small / Note
   ========================= */

.note,
.caption,
.mini,
.strip-note,
.quote small,
.card p{
  font-size: var(--fs-small);
}

/* =========================
   Meta
   ========================= */

.k,
.eyebrow,
.card .meta{
  font-size: var(--fs-meta);
}

body.page-template-tpl-traffic-accident .fsa-section--first .bullet{
  font-size: var(--fs-base);
  line-height: 2.05;
}

body.page-id-30 .reserve-grid .step .d{
  font-size: var(--fs-base);
  line-height: 2.05;
}

/* ===== Global Letter Spacing ===== */

/* 通常本文 */
p{
  letter-spacing: 0.01em;
}

/* 少し目立たせたい文章 */
.fsa-hero__sub,
.lead{
  letter-spacing: 0.02em;
}

/* bullet は少し控えめ */
.bullet{
  letter-spacing: 0.03em;
}

.delay-1{ transition-delay: .00s; }
.delay-2{ transition-delay: .08s; }
.delay-3{ transition-delay: .16s; }


/* ===== Hero scroll hint (calm / longer) ===== */
.section-hero{ position: relative; }

.scroll-hint{
  position: absolute;
  left: 50%;
  bottom: clamp(90px, 12vh, 180px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  pointer-events: none;
  opacity: .9;
  z-index: 4; /* ← 背景レイヤーに負けない */
}

.scroll-hint__label{
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(1,40,64,.38);
}

.scroll-hint::after{
  content:"";
  display:block;
  width: 2px;
  height: 72px;
  background: rgba(1,40,64,.22);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

.btn{
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 500;
}

.btn-reserve{
  font-size: 14px;
  letter-spacing: .05em;
  font-weight: 600;
}

.closing .reveal{
  transition: opacity .9s ease, transform .9s ease;
  transform: translateY(40px);
}

/* bulletの1行を横並びにして、ドットを1行目に揃える */
.bullet > div{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

/* ドットは固定サイズ＋縦位置はemで調整（px固定をやめる） */
.bullet .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;

  margin-top: .55em; /* ←ここが要調整（0.45〜0.65em） */
}

#promise .bullet,
#support .bullet{
  font-size: var(--fs-base);
}

/* =========================
   Reserve: LINE特典（sidebar）
   tone: calm glass / FSA palette
========================= */

.reserve-panel{
  padding: 22px 24px;
  border-radius: var(--radius);

  background:
    linear-gradient(
      135deg,
      rgba(105,142,191,.22) 0%,
      rgba(153,170,191,.18) 45%,
      rgba(191,205,217,.22) 100%
    );

  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(1,40,64,.08);
  color: var(--ink);
}

.reserve-panel__badge{
  display:inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid rgba(1,40,64,.12);
  box-shadow: 0 6px 14px rgba(1,40,64,.10);

  font-size: var(--fs-meta);
  letter-spacing: .08em;
  margin-bottom: 12px;
}

.reserve-panel__lead{
  margin: 0 0 12px;
  font-size: var(--fs-sub);
  line-height: 2.0;
}

.reserve-panel__price{
  margin: 0 0 12px;
  font-size: var(--fs-sub);
  line-height: 2.0;
  color: rgba(1,40,64,.86);
}

.reserve-panel__price span{
  display:block;
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--muted);
}

.reserve-panel__note{
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--muted);
}

/* CTA button (calm) */
.reserve-panel__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;

  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-sub);
  letter-spacing: .04em;

  background: rgba(255,255,255,.78); /* ガラス寄り */
  border: 1px solid rgba(1,40,64,.16);
  color: var(--ink);

  box-shadow: 0 10px 20px rgba(1,40,64,.08);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.reserve-panel__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(1,40,64,.12);
  background: rgba(255,255,255,.86);
}

.reserve-panel__btn:focus-visible{
  outline: 2px solid rgba(105,142,191,.55);
  outline-offset: 2px;
}

/* Sidebar panels spacing */
.journal-side{
  display: grid;
  gap: 18px;
}

/* About - 方針（本文扱い） */
.philo-grid .panel .policy-lines{
  font-size: var(--fs-base);   /* 16px */
  line-height: 2.0;
  color: var(--ink);
}

.philo-grid .panel .policy-lines p{
  margin: 0 0 18px;
  font-weight: 400;
}
.philo-grid .panel .policy-lines p:last-child{
  margin-bottom: 0;
}

.policy-list li{
  margin-bottom: 22px;   /* 少し広め */
  line-height: 1.9;
}

/* PHILOSOPHYだけ1カラム */
.section-philo .philo-grid{
  display:grid;
  gap:22px;
}

/* philo-grid：基本は2カラム（右パネル復活） */
.philo-grid{
  display:grid;
  gap:18px;
}
@media (min-width: 900px){
  .philo-grid{
    grid-template-columns: 1.2fr .8fr;
    gap:26px;
    align-items:stretch;
  }
}

/* PHILOSOPHYだけ1カラムに */
@media (min-width: 900px){
  .section-philo .philo-grid{
    grid-template-columns: 1fr;
    gap:28px;
  }
}

.policy-list{
  list-style:none;
  margin:0;
  padding:0;
}

.policy-list li{
  position:relative;
  padding-left:20px;
}

.policy-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.75em;
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(105,142,191,.55);
}

/* scroll hint（通常） */
.scroll-hint{
  position:absolute;
  left:50%;
  bottom: calc(clamp(18px, 5vh, 56px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display:grid;
  justify-items:center;
  gap:12px;
  pointer-events:none;
  opacity:.9;
}

/* 高さが短い端末（iPhone SEなど）では下げすぎない/小さくする */
@media (max-height: 700px){
  .scroll-hint{
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap:8px;
    opacity:.75;
  }
  .scroll-hint__label{
    font-size: 9px;
    letter-spacing: .28em;
  }
  .scroll-hint::after{
    height: 36px; /* 線を短く */
  }
}


/* 症状パネル：promiseと同じ幅（containerいっぱい） */
.fsa-section--symptoms .symptoms-panel{
  width: 100%;
  max-width: none;
  margin: 32px 0 0;
  position: relative;
  overflow: hidden;
  padding: 24px;
}

/* 背景画像（最背面） */
.fsa-section--symptoms .symptoms-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../forest-sail-adventure/images/symptoms-bg.jpg") center/cover no-repeat;
  opacity:.65;
  filter: grayscale(10%) blur(0.8px);
  transform: scale(1.05);
  pointer-events:none;
  z-index: 0;
}

/* 白ベール（背景の上、テキストの下） */
.fsa-section--symptoms .symptoms-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.25),
    rgba(255,255,255,.45)
  );
  pointer-events:none;
  z-index: 1;
} /* ←★これが抜けてた！ */

/* 内側パネル（最前面に持ってくる） */
.fsa-section--symptoms .symptoms-inner{
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin-left: auto;
  margin-right: 0;

  background: rgba(255,255,255,.86);
  border: 1px solid rgba(1,40,64,.10);
  border-radius: 16px;
  padding: 22px 26px;
  line-height: 1.9;
}

.fsa-section--symptoms .symptoms-inner small{
  display:block;
  margin-top: 10px;
  opacity: .75;
}

@media (max-width: 640px){
  .fsa-section--symptoms .symptoms-panel{ padding: 16px; }
  .fsa-section--symptoms .symptoms-inner{
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 18px 18px;
  }
}

/* 外側パネルに事故背景 */
.accident-panel{
  position: relative;
  overflow: hidden;
  padding: 26px;
}

/* 背景画像 */
.accident-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../forest-sail-adventure/images/accident.jpg") center/cover no-repeat;
  opacity:.55;               /* 0.45〜0.65で調整 */
  filter: contrast(1.05) blur(1px);
  z-index:0;
}

/* 白ベール */
.accident-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.45),
    rgba(255,255,255,.65)
  );
  z-index:1;
}

/* 小さい中パネル */
.accident-inner{
  position:relative;
  z-index:2;
  max-width:480px;
  margin-right:auto;  /* ← 左寄せ */
  margin-left:0;
  background:rgba(255,255,255,.92);
  border-radius:16px;
  padding:24px 28px;
  box-shadow:0 8px 24px rgba(1,40,64,.08);
}

.accident-panel::before{
  background-position: right center;
}

.section-menu__panel p + p{
  margin-top: 18px;   /* 16〜24で好み調整 */
}

/* ABOUT：施術方針内CTA */
.philo-actions{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(1,40,64,.10);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.section-menu__actions {
  margin-top: 24px; /* まずは24pxくらいから */
}

.photo-strip{
  position: relative;
  z-index: 5;
}

.hero::after{
  pointer-events:none;
}

.photo-strip{
  position: relative;
  z-index: 10;
}

.strip img{
  filter: brightness(1.08) contrast(1.05) saturate(1.08);
}

#legacy,
#access,
#menu{
  scroll-margin-top:92px;
}

.menu-proof{
  font-size: 11px;
  line-height: 1.7;
  opacity: .65;
  margin-top: 10px;
}

@media (max-width: 767px){
  .menu-proof{
    font-size: 10px;
    line-height: 1.6;
  }
}

.section-menu__panel{
  cursor:pointer;
}


.legacy-wall img{
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}