/*
Theme Name: Jun蔵芝球部 Child
Template: hello-elementor
Description: Jun蔵芝球部（SHIBATAMA-BU GOLF BASE）サイト用の子テーマ。トップページ・予約導線ページはテーマテンプレートとしてコードで実装し、お知らせ・ブログのみWordPress標準の投稿機能で運用する。デザインは mockups/v2-classic.html（硬派版）準拠。
Version: 1.12.0
Author: Yuta
Text Domain: junzo-shibatamabu-child
*/

/* ==========================================================================
   デザイントークン（硬派版）

   面（背景）は3つだけに絞っている。似た明るさのベージュを何色も混ぜると
   全体がもわっとするため、白 / 生成り / 深緑 のはっきりした3段だけを使う。
   ========================================================================== */
:root{
  --card:#FFFFFF;       /* 面1：白。基本の地とカード */
  --paper:#F1EADA;      /* 面2：生成り。白と明確に差がつく濃さにしてある */
  --pine-deep:#1F2A1B;  /* 面3：深緑。強調セクションとフッター */

  --backdrop:#D6C9AC;   /* 1140pxの箱の外側 */

  --ink:#2A2420;
  --ink-soft:#5B5248;
  --ink-invert:#F7F1DE;
  --ink-invert-soft:rgba(237,230,210,0.72);

  --pine:#33422C;
  --clay:#A24630;
  --clay-deep:#82372A;
  --straw:#B08A2E;

  --line: rgba(42,36,32,0.14);
  --line-invert: rgba(247,241,222,0.20);

  --shell-w:1140px;
  --gutter-sp:20px;
  --gutter-pc:40px;
  --cta-h:78px;   /* 画面下に固定するCTAの高さ。ページ末尾がこれに隠れないよう余白に使う */

  /* 写真。既定はテーマ同梱の仮画像だが、管理画面「外観 → カスタマイズ → サイトの写真」
     で差し替えると、functions.php がこの変数だけを上書きする */
  --img-facility-1: url(assets/images/facility-01.jpg);
  --img-facility-2: url(assets/images/facility-02.jpg);
  --img-facility-3: url(assets/images/facility-03.jpg);
  --img-coach:      url(assets/images/coach.jpg);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* reset.css（親テーマ）が body{background:#fff} を当てているので、
   詳細度で確実に上書きする */
html body{
  margin:0;
  background:var(--backdrop);
  font-family:'Noto Sans JP', sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto;}
h1,h2,h3{font-family:'Shippori Mincho',serif; margin:0;}

/* ==========================================================================
   ページ全体を1140pxの箱に収める
   ========================================================================== */
.site-shell{
  max-width:var(--shell-w);
  margin:0 auto;
  background:var(--card);
  box-shadow:0 0 40px rgba(31,42,27,0.16);
  overflow:hidden;
  /* 固定CTAの下にページ末尾が潜り込まないよう、その分の余白を確保する */
  padding-bottom:var(--cta-h);
}

/* ==========================================================================
   共通パーツ
   ========================================================================== */
.eyebrow{
  /* 字間を広く取っているラベルなので、他より控えめに上げている */
  font-size:11.5px; letter-spacing:.22em; color:var(--straw);
  font-weight:700; margin-bottom:8px; display:block;
}
/* カテゴリーバッジ。色はここで一括管理し、各所では大きさだけ調整する。
   スラッグがそのままクラス名になるので、カテゴリーを増やしたらここに1行足す。 */
.cat{
  display:inline-block; flex-shrink:0;
  background:var(--pine); color:var(--ink-invert);
  border-radius:99px; font-weight:700; line-height:1.5;
}
.cat--news{background:var(--clay);}  /* お知らせ＝朱 */
.cat--blog{background:var(--pine);}  /* ブログ＝深緑 */

.section{padding:34px var(--gutter-sp);}
.section.alt{background:var(--paper);}
.section-inner{margin:0 auto;}
.lead{font-size:13.5px; line-height:2; color:var(--ink-soft); margin-top:14px;}
h2.section-title{font-size:20px; font-weight:600; letter-spacing:.02em;}

/* 深緑の強調セクション。明るい面が続くリズムを断ち切るために使う */
.section.dark{background:var(--pine-deep); color:var(--ink-invert);}
.section.dark h2.section-title{color:var(--ink-invert);}
.section.dark .lead{color:var(--ink-invert-soft);}

/* ヒーロー直下の引用ブロック。見出しを持たず、キャッチコピーの続きとして中央に置く */
.section.concept{text-align:center; padding-top:28px; padding-bottom:28px;}
.concept__line{
  font-family:'Shippori Mincho',serif; font-size:14px; line-height:2;
  color:var(--ink); margin:0;
}
.concept__waka{
  font-family:'Shippori Mincho',serif; font-size:16px; font-weight:700;
  color:var(--clay-deep); letter-spacing:.05em; margin:12px 0;
}

/* ==========================================================================
   サイト共通ヘッダー
   親テーマ Hello Elementor が .site-header に max-width:1140px を掛けてくるので、
   詳細度を上げて打ち消す（箱幅は .site-shell 側で管理する）
   ========================================================================== */
header.site-header{
  max-width:none; width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter-sp); background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
}
.brand{display:flex;align-items:center;gap:10px; text-decoration:none; color:inherit;}
.brand-name{font-family:'Shippori Mincho',serif; font-size:19px; font-weight:600; line-height:1.3;}
/* 英語のタグライン。字間を広げて添え書きらしく見せる。
   26文字と長めなので、狭い画面でも折り返さないよう字間で調整している */
.brand-name small{
  display:block; margin-top:3px;
  font-family:'Noto Sans JP', sans-serif;
  font-size:10.5px; letter-spacing:.1em;
  color:var(--ink-soft); font-weight:400; white-space:nowrap;
}
@media (max-width:359px){
  .brand-name{font-size:17px;}
  .brand-name small{font-size:9.5px; letter-spacing:.06em;}
}

/* 親テーマの reset.css が button:focus に赤い塗り(#CC3366)を当ててくるため、
   全ての状態を明示して打ち消す。タップ後に色が残るのを防ぐ。 */
.menu-dots,
.menu-dots:hover,
.menu-dots:focus,
.menu-dots:active{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; padding:0; margin:0; cursor:pointer;
  background:none; border:none; box-shadow:none; outline:none;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.menu-dots:focus-visible{outline:2px solid var(--pine); outline-offset:3px;}
.menu-dots span{
  width:22px; height:2px; background:currentColor; display:block;
  transition:transform .25s ease, opacity .2s ease;
}
/* 開いているあいだは×印にして、状態が一目で分かるようにする */
.menu-dots.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-dots.is-open span:nth-child(2){opacity:0;}
.menu-dots.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.site-nav{display:none;}
.site-nav a{
  color:var(--ink); text-decoration:none; font-size:13px; font-weight:500;
  white-space:nowrap;
}
.site-nav a:hover{color:var(--clay-deep);}

/* ---- モバイル用ドロワー ----
   ページ内リンクが6つあり、その下に「ご予約」「お知らせ」を置くと
   重要な導線が埋もれるため、ページへの導線を上部に固定して見た目も分けている */
.site-nav.is-open{
  display:flex; flex-direction:column;
  position:absolute; top:100%; left:auto; right:0;
  /* 全幅にせず右から8割ほど。開いている状態だと一目で分かるようにする */
  width:80%; max-width:320px;
  background:var(--card);
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  border-bottom-left-radius:14px;
  box-shadow:-6px 14px 30px rgba(31,42,27,0.22);
  max-height:calc(100vh - var(--jsb-header-h, 76px)); overflow-y:auto;
}
/* ページへの導線は縦に2行 */
.site-nav.is-open .site-nav__pages{
  display:flex; flex-direction:column; gap:10px;
  padding:16px var(--gutter-sp);
  background:var(--paper);
}
.site-nav.is-open .site-nav__page{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:15px 8px; border-radius:12px;
  background:var(--pine); color:var(--ink-invert);
  font-size:14px; font-weight:700; line-height:1.4;
}
.site-nav.is-open .site-nav__page:hover{color:var(--ink-invert);}
.site-nav.is-open .site-nav__anchors{display:flex; flex-direction:column; padding:6px 0 10px;}
.site-nav.is-open .site-nav__label{
  display:block; padding:12px var(--gutter-sp) 6px;
  font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--straw);
}
.site-nav.is-open .site-nav__anchors a{
  padding:13px var(--gutter-sp); font-size:14px;
  border-top:1px solid var(--line);
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.hero{
  position:relative;
  min-height:320px;
  overflow:hidden;
  /* 左下にロゴ、そのすぐ右にキャッチコピーを並べる */
  display:flex; align-items:flex-end; gap:12px;
  padding:22px var(--gutter-sp) 26px;
}
/* 背景の写真。2枚以上あるときは JS が .is-active を回して切り替える */
.hero-slides{position:absolute; inset:0;}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease;
}
.hero-slide.is-active{opacity:1;}
/* 設定した写真をそのまま見せる。重ねるのは文字を読ませるための黒の網掛けだけ。
   以前は緑や金のグラデーションと⛳の透かしを重ねていたが、実写真だと
   「前の画像が残っている」ように見えてしまうため外した。 */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.28) 45%, rgba(0,0,0,0.62) 100%);
}
/* 写真の左下に重ねるロゴマーク（円相＋ティー）。
   少し透かして写真になじませつつ、明るい写真でも輪郭が出るよう影を付ける。
   z-index は網掛け（.hero::after）より上に出すため */
.hero-mark{
  position:relative; z-index:1; flex-shrink:0;
  width:auto; height:96px; object-fit:contain;
  opacity:.8;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,0.45));
}
.hero-inner{position:relative; z-index:1; flex:1; min-width:0;}
.hero h1{
  font-family:'Shippori Mincho',serif;
  color:var(--ink-invert); font-size:27px; line-height:1.5; font-weight:600;
  text-shadow:0 2px 12px rgba(0,0,0,0.35);
}
/* ボタンに見えないよう、囲みを外して文字だけにしている */
.hero .sub{
  display:block; margin-top:12px;
  color:var(--ink-invert); font-size:12.5px; font-weight:500;
  letter-spacing:.18em;
  text-shadow:0 2px 10px rgba(0,0,0,0.4);
}
/* 幅の狭い端末では、ロゴの右に残る幅が足りずキャッチコピーが4行に割れる。
   ロゴを小さくして1行あたりの文字数を確保する。
   ※上のヒーローの指定より後ろに置くこと（メディアクエリでは詳細度が上がらないため） */
@media (max-width:359px){
  .hero-mark{height:76px;}
  .hero h1{font-size:23px;}
}

/* ==========================================================================
   お知らせミニリスト（Hero直下）
   ========================================================================== */
.news-strip{
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:14px var(--gutter-sp);
}
.news-strip-inner{margin:0 auto;}
.news-strip-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.news-strip-head .ttl{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; color:var(--ink);
  letter-spacing:.04em;
}
.news-strip-head .ttl .dot{
  width:6px; height:6px; border-radius:50%; background:var(--clay); flex-shrink:0;
}
.news-strip-head .more{
  font-size:12px; color:var(--clay-deep); text-decoration:none; font-weight:700; white-space:nowrap;
}
.news-strip-head .more:hover{text-decoration:underline;}
.news-list{display:flex; flex-direction:column; gap:8px;}
.news-item{
  display:flex; gap:10px; align-items:baseline; font-size:12.5px; line-height:1.6;
}
.news-item a{color:inherit; text-decoration:none; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;}
.news-item a:hover .t2{color:var(--clay-deep);}
.news-item .d2{
  font-family:'Shippori Mincho',serif; color:var(--ink-soft); font-size:12px; flex-shrink:0;
}
.news-item .cat{font-size:10.5px; padding:2px 7px;}
.news-item .t2{color:var(--ink); flex:1; min-width:0;}

/* /reserve/ 用。ヒーローと同じ生成りの帯が続くと見出しが下へ伸びて見えるので、
   帯をやめて白地＋朱枠のカードにし、独立したお知らせとして見せる */
.news-strip--card{
  background:transparent; border-bottom:none;
  padding:20px var(--gutter-sp) 0;
}
.news-strip--card .news-strip-inner{
  background:var(--card);
  border:1.5px solid var(--clay);
  border-radius:12px;
  padding:13px 15px;
}

/* ==========================================================================
   特徴（深緑セクションの中で使う）
   ========================================================================== */
.feat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;
}
/* 深緑の上に半透明を重ねると濁って見えるため、白のカードにして抜けを良くする */
.feat{
  background:var(--card); border:none; border-radius:14px;
  padding:18px 14px; text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
}
.feat .ic{
  width:38px;height:38px;border-radius:50%;
  background:var(--pine); color:var(--ink-invert);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px; font-size:16px;
}
/* 見出しが1行の項目と2行の項目が混ざるので、2行ぶんの高さを確保して説明文の頭を揃える */
.feat .t{font-size:13px; font-weight:700; line-height:1.5; color:var(--ink); min-height:2.9em;}
/* スマホは2列で、説明文が1行の項目と2行の項目が混ざる。
   2行ぶん確保してカードの高さを揃える（PCは3列で全て1行に収まるので戻す） */
.feat .d{font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.6; min-height:3.2em;}

/* ==========================================================================
   料金プラン
   ========================================================================== */
.price-list{margin-top:20px; display:flex; flex-direction:column; gap:10px;}
.price-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px;
}
.price-row.hot{border-color:var(--clay); box-shadow:0 0 0 1px var(--clay) inset;}
.price-row .name{font-size:13px; font-weight:700;}
.price-row .desc{font-size:12px; color:var(--ink-soft); margin-top:5px; line-height:1.7;}
.price-row .name .badge{
  display:inline-block; margin-left:8px; font-size:10.5px;
  background:var(--clay); color:#fff; padding:2px 7px; border-radius:99px;
}
.price-row .amt{font-size:15px; font-weight:900; color:var(--clay-deep); font-family:'Shippori Mincho',serif; white-space:nowrap;}
.price-row .amt span{font-size:11.5px; font-weight:400; color:var(--ink-soft);}
.price-note{font-size:12px; color:var(--ink-soft); line-height:1.8; margin-top:14px;}

/* ==========================================================================
   施設紹介ギャラリー
   ========================================================================== */
/* 3枚を縦に積んで、写真を大きく見せる */
.gallery{display:grid; grid-template-columns:1fr; gap:14px; margin-top:20px;}
.ph{
  aspect-ratio:4/3; border-radius:12px;
  display:flex; align-items:flex-end; justify-content:flex-start; padding:14px;
  position:relative; overflow:hidden;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.ph span{
  position:relative; font-size:13px; font-weight:700; background:rgba(31,42,27,0.7);
  color:var(--ink-invert); padding:6px 12px; border-radius:6px; backdrop-filter:blur(2px);
}
.ph.p1::before{background-image:linear-gradient(rgba(20,20,15,.12), rgba(20,20,15,.55)), var(--img-facility-1);}
.ph.p2::before{background-image:linear-gradient(rgba(20,20,15,.12), rgba(20,20,15,.55)), var(--img-facility-2);}
.ph.p3::before{background-image:linear-gradient(rgba(20,20,15,.12), rgba(20,20,15,.55)), var(--img-facility-3);}

/* ==========================================================================
   コーチ紹介
   ========================================================================== */
.coach{
  display:flex; gap:14px; align-items:center; margin-top:18px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
}
.coach .av{
  width:64px;height:64px;border-radius:50%; flex-shrink:0;
  background:var(--img-coach);
  background-size:cover; background-position:center;
}
.coach .name{font-size:14px; font-weight:700;}
.coach .role{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.coach .msg{font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.7;}

/* ==========================================================================
   アクセス
   ========================================================================== */
.access-box{
  margin-top:18px; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
}
/* Googleマップの埋め込み。ピンや住所はマップ側が持つので装飾は足さない */
.access-map{
  position:relative; overflow:hidden; min-height:220px;
  background:var(--paper);
}
.access-map iframe{
  display:block; width:100%; height:100%;
  min-height:220px; border:0;
}
.access-info{padding:16px; font-size:12.5px; line-height:1.9; color:var(--ink-soft);}
.access-info b{color:var(--ink);}
.access-address{margin:0 0 14px; font-size:13px; color:var(--ink); font-weight:700;}

/* 駐車場・送迎は来店可否に直結する情報なので、本文に埋もれさせず並べて見せる */
.access-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.access-point{
  /* 説明文の無い項目は1行なので、アイコンとは中央で揃える */
  display:flex; align-items:center; gap:11px;
  background:var(--paper); border-radius:10px; padding:11px 13px;
}
/* 説明文がある項目だけは、アイコンを見出しの行に合わせる。
   :has() が使えないブラウザでは中央揃えのままになるが、それでも崩れはしない */
.access-point:has(.dd){align-items:flex-start;}
.access-point .ic{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--clay); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
/* 太字の見出しで改行し、その下に細字の説明を置く */
.access-point .tt{display:block; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.5;}
.access-point .dd{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:4px; line-height:1.7;}

/* ==========================================================================
   会員向け予約バンド（トップページ末尾）
   無料体験（朱）とぶつからないよう、ボタンは深緑にしている
   ========================================================================== */
.member-band{
  background:var(--paper); border-top:1px solid var(--line);
  padding:32px var(--gutter-sp);
}
.member-band__inner{
  max-width:560px; margin:0 auto; text-align:center;
}
.member-band__lead{margin:0; font-family:'Shippori Mincho',serif; font-size:19px; font-weight:600; color:var(--ink);}
.member-band__note{margin:8px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.8;}
.member-band__btn{
  display:block; margin-top:18px;
  background:var(--pine); color:var(--ink-invert);
  border-radius:12px; padding:16px 24px;
  font-size:15px; font-weight:700; text-decoration:none;
}
.member-band__btn:hover{background:var(--pine-deep);}

/* ==========================================================================
   フッター
   ========================================================================== */
.footer-cta{
  padding:40px var(--gutter-sp); text-align:center; background:var(--pine-deep); color:var(--ink-invert-soft);
}
.footer-cta h3{font-size:18px; color:var(--ink-invert); margin-bottom:10px;}
.footer-cta p{font-size:12.5px; line-height:1.9; margin:0;}
/* ここに `.footer-cta a{color:inherit}` を置かないこと。
   電話番号がただのテキストだった頃の名残で、詳細度が .contact-btn--tel より高いため
   ボタンの文字色を上書きし、白地に生成り文字＝読めない状態になる。
   フッター内のリンクはそれぞれ自前で色を持っている。 */

/* 電話とLINEを縦に2行で並べる */
.footer-contact{
  display:flex; flex-direction:column; gap:12px;
  max-width:340px; margin:20px auto 0;
}
/* ==========================================================================
   問い合わせボタン（電話・LINE共通）
   アイコン＋ラベルの同じ作りにして、並べたときにテイストを揃えている
   ========================================================================== */
.contact-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px 22px; border-radius:12px;
  /* 電話は明朝19px・LINEはゴシック15pxで文字高が違うため、高さを固定して揃える */
  min-height:56px;
  font-size:15px; font-weight:700; text-decoration:none;
  line-height:1.4; box-shadow:0 2px 10px rgba(0,0,0,0.16);
  transition:transform .15s ease, box-shadow .15s ease;
}
.contact-btn:hover{transform:translateY(-1px); box-shadow:0 5px 16px rgba(0,0,0,0.22);}
.contact-btn__icon{width:21px; height:21px; flex-shrink:0;}
.contact-btn__label{letter-spacing:.02em;}

/* 電話：暗いフッターの上で読ませるため明るい面にする */
.contact-btn--tel{background:var(--card); color:var(--pine-deep);}
.contact-btn--tel .contact-btn__label{
  font-family:'Shippori Mincho',serif; font-size:19px; font-weight:600;
}
/* LINE：ブランド色で認識させる */
.contact-btn--line{background:#06C755; color:#fff;}
.contact-btn--line:hover{background:#05B04C;}
/* 行き先が未設定のあいだは浮かせない（押せないことを示す） */
.contact-btn.is-pending{opacity:.8; cursor:default; box-shadow:none;}
.contact-btn.is-pending:hover{transform:none; box-shadow:none;}

/* 迷いが出る場所に置くLINE相談バンド */
.line-cta{
  margin-top:26px;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:18px 16px;
}
.line-cta__inner{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.line-cta__lead{margin:0; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.6;}
.line-cta__note{margin:6px 0 0; font-size:12px; color:var(--ink-soft); line-height:1.8;}
.line-cta .contact-btn{max-width:300px;}
.line-cta__actions{
  display:flex; flex-direction:column; align-items:center; gap:12px; width:100%;
}

/* --------------------------------------------------------------------------
   LINEのQRコード
   スマホでは自分の画面に出たQRを自分で読み取れないため、PC幅でだけ表示する。
   スマホはLINEボタン（タップでアプリが開く）が担当。
   -------------------------------------------------------------------------- */
.line-qr{display:none;}

/* opacity で薄めると背景の深緑ごと透けてしまうため、色そのものを薄くする */
.site-footer-meta{
  background:var(--pine-deep);
  color:rgba(237,230,210,0.5);
  text-align:center; font-size:11.5px; line-height:1.6;
  padding:16px var(--gutter-sp) 20px;
}

/* 常時固定フッターCTA。スクロール位置に関係なく画面下に貼り付ける。
   箱（.site-shell）の外に出したうえで、箱と同じ幅・同じ位置に合わせている。 */
.sticky-cta{
  position:fixed; bottom:0;
  left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--shell-w);
  background:var(--card); border-top:1px solid var(--line);
  padding:12px 16px 16px;
  display:flex; gap:10px;
  box-shadow:0 -8px 24px rgba(31,42,27,0.22);
  z-index:60;
}
.sticky-cta a,
.sticky-cta span{
  flex:1; border:none; border-radius:12px; padding:14px 8px;
  font-family:'Noto Sans JP',sans-serif; font-size:13px; font-weight:700;
  text-align:center; text-decoration:none; line-height:1.4;
  display:flex; align-items:center; justify-content:center;
}
.sticky-cta .primary{background:var(--clay); color:#fff;}
.sticky-cta .secondary{background:transparent; border:1.5px solid var(--pine); color:var(--pine);}
/* LINEは色で認識される要素が大きいので、サイト内すべて塗りで統一している */
.sticky-cta .is-line{background:#06C755; border:none; color:#fff;}
.sticky-cta .is-line:hover{background:#05B04C;}
.sticky-cta .is-pending{opacity:.8; cursor:default;}

/* ==========================================================================
   予約導線ページ（/reserve/）
   ========================================================================== */
.reserve-hero{
  padding:44px var(--gutter-sp) 30px; text-align:center; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.reserve-hero h2{font-size:19px; font-weight:600; line-height:1.6;}
.triage-wrap{padding:28px var(--gutter-sp) 40px; margin:0 auto;}
.triage-list{display:flex; flex-direction:column; gap:14px;}
/* 説明を持たせず、行き先だけが分かる大きなボタン。
   色はサイト共通の役割分担に合わせている（朱＝新規／深緑＝会員）。 */
.triage-btn{
  display:flex; align-items:center; justify-content:center;
  min-height:78px; padding:20px 24px; border-radius:16px;
  font-family:'Shippori Mincho',serif;
  font-size:20px; font-weight:600; letter-spacing:.04em;
  text-decoration:none; text-align:center; line-height:1.4;
  box-shadow:0 3px 12px rgba(31,42,27,0.16);
  transition:transform .15s ease, box-shadow .15s ease;
}
.triage-btn:hover{transform:translateY(-2px); box-shadow:0 7px 20px rgba(31,42,27,0.24);}
.triage-btn--new{background:var(--clay); color:#fff;}
.triage-btn--new:hover{background:var(--clay-deep);}
.triage-btn--member{background:var(--pine); color:var(--ink-invert);}
.triage-btn--member:hover{background:var(--pine-deep);}
.triage-note{
  margin:20px 0 0; font-size:12px; color:var(--ink-soft);
  text-align:center; line-height:1.9;
}

/* ==========================================================================
   お知らせ一覧・投稿詳細
   ========================================================================== */
.news-archive-hero{
  padding:44px var(--gutter-sp) 26px; text-align:center; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.news-archive-hero h2{font-size:19px; font-weight:600; line-height:1.6;}
.news-archive-hero p{font-size:12.5px; color:var(--ink-soft); margin-top:10px; line-height:1.8;}
/* --------------------------------------------------------------------------
   タブ付き記事一覧
   タブの帯と記事パネルが1つの箱として繋がって見えるようにしている
   -------------------------------------------------------------------------- */
.post-archive{
  max-width:840px; margin:0 auto; padding:24px var(--gutter-sp) 44px;
}

.post-tabs{
  display:flex;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px 12px 0 0;
  overflow:hidden;
}
.post-tabs__tab{
  flex:1; text-align:center;
  padding:15px 6px;
  font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--ink-soft); text-decoration:none;
  border-right:1px solid var(--line);
  transition:background-color .2s ease, color .2s ease;
}
.post-tabs__tab:last-child{border-right:none;}
.post-tabs__tab:hover{color:var(--clay-deep);}
/* 選択中のタブは深緑で塗り、下のパネルと地続きに見せる */
.post-tabs__tab.is-current{
  background:var(--pine); color:var(--ink-invert);
}
.post-tabs__tab.is-current:hover{color:var(--ink-invert);}

.post-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 12px 12px;
  padding:2px 18px 18px;
}
/* タブが無い場合（検索結果など）は単独の箱として成立させる */
.post-panel:first-child{
  border-top:1px solid var(--line);
  border-radius:12px;
}
.news-archive-row{
  display:block; padding:16px 2px; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
}
/* パネル内の最後の行は区切り線を消して、箱の底と重ならないようにする */
.post-panel .news-archive-row:last-of-type{border-bottom:none;}
.news-archive-row .row-top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.news-archive-row .d3{
  font-family:'Shippori Mincho',serif; color:var(--ink-soft); font-size:12.5px; flex-shrink:0;
}
.news-archive-row .cat{font-size:10.5px; padding:2px 8px;}
.news-archive-row .t3{font-size:13px; font-weight:700; color:var(--ink); margin-top:6px; line-height:1.6;}
.news-archive-row:hover .t3{color:var(--clay-deep);}
.news-archive-more{
  text-align:center; margin-top:24px; font-size:12.5px; color:var(--ink-soft);
}
.news-archive-more .screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.news-archive-more .nav-links{
  display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap;
}
.news-archive-more .page-numbers{
  display:inline-block; min-width:34px; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px;
  text-decoration:none; color:var(--ink-soft); background:var(--card);
}
.news-archive-more .page-numbers:hover{color:var(--clay-deep);}
.news-archive-more .page-numbers.current{
  background:var(--pine); border-color:var(--pine); color:var(--ink-invert); font-weight:700;
}
.news-archive-more .page-numbers.dots{border-color:transparent; background:transparent;}
.news-archive-empty{
  padding:40px 0; text-align:center; font-size:13px; color:var(--ink-soft);
}

/* 404ページ */
.notfound-wrap{max-width:640px; margin:0 auto; padding:28px var(--gutter-sp) 48px;}
.notfound-links{display:flex; flex-direction:column; gap:10px;}
.notfound-link{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:15px 17px;
}
.notfound-link:hover{border-color:var(--clay);}
.notfound-link .tt{display:block; font-size:13.5px; font-weight:700; color:var(--ink);}
.notfound-link .dd{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:4px; line-height:1.6;}
.notfound-note{
  margin-top:24px; font-size:12.5px; line-height:1.9; color:var(--ink-soft); text-align:center;
}
.notfound-note a{color:var(--clay-deep); font-weight:700;}

.single-wrap{max-width:760px; margin:0 auto; padding:34px var(--gutter-sp) 48px;}
.single-wrap .entry-meta{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.single-wrap .entry-meta .d3{font-family:'Shippori Mincho',serif; color:var(--ink-soft); font-size:12.5px;}
.single-wrap .entry-meta .cat{font-size:10.5px; padding:2px 8px;}
.single-wrap .entry-title{font-size:21px; font-weight:600; line-height:1.6; margin-top:12px;}
.single-wrap .entry-body{margin-top:22px; font-size:14px; line-height:2; color:var(--ink-soft);}
.single-wrap .entry-body :is(h2,h3){color:var(--ink); margin:32px 0 12px;}
.single-wrap .entry-body a{color:var(--clay-deep);}
.single-wrap .back-link{display:inline-block; margin-top:34px; font-size:12.5px; color:var(--clay-deep); font-weight:700; text-decoration:none;}
.entry-thumb{margin-top:22px;}
.entry-thumb img{border-radius:12px; display:block; width:100%;}

/* 記事本文に差し込まれた画像（Gutenbergの画像ブロック） */
.single-wrap .entry-body figure{margin:28px 0;}
.single-wrap .entry-body figure img{border-radius:12px; display:block;}
.single-wrap .entry-body figcaption{
  margin-top:8px; font-size:12px; color:var(--ink-soft); line-height:1.7; text-align:center;
}

/* ==========================================================================
   スクロール出現アニメーション
   ========================================================================== */
.jsb-reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.68,.35,1);
  will-change:opacity, transform;
}
.jsb-reveal.is-in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .jsb-reveal{opacity:1; transform:none; transition:none;}
  /* 写真の切り替えは続けるが、フェードはやめてすぐ入れ替える */
  .hero-slide{transition:none;}
}

/* ==========================================================================
   デスクトップ（PC）レイアウト
   ========================================================================== */
@media (min-width:900px){
  header.site-header{padding:18px var(--gutter-pc);}
  .brand-name{font-size:23px;}
  .brand-name small{font-size:11.5px; letter-spacing:.14em; margin-top:4px;}
  .menu-dots{display:none;}
  /* PCは1行に並べる。ページ内リンクを左、ページへの導線を右に置く */
  .site-nav{display:flex; align-items:center; gap:26px;}
  .site-nav__label{display:none;}
  .site-nav__anchors{display:flex; align-items:center; gap:24px; order:1;}
  .site-nav__pages{display:flex; align-items:center; gap:20px; order:2;}
  .site-nav__page{font-weight:700;}
  /* ご予約は最重要なので枠を付けて他と差をつける */
  .site-nav__pages a:first-child{
    border:1.5px solid var(--pine); border-radius:99px;
    padding:8px 18px; color:var(--pine);
  }
  .site-nav__pages a:first-child:hover{background:var(--pine); color:var(--ink-invert);}

  .member-band{padding:48px var(--gutter-pc);}
  .member-band__lead{font-size:23px;}
  .member-band__note{font-size:13.5px;}
  .member-band__btn{display:inline-block; min-width:320px; margin-top:22px; font-size:16px;}

  .hero{min-height:440px; padding:28px var(--gutter-pc) 40px; gap:24px;}
  .hero-mark{height:168px;}
  .hero h1{font-size:42px;}
  .hero .sub{font-size:13px; padding:7px 14px;}

  .news-strip{padding:18px var(--gutter-pc);}
  .news-strip--card{padding:26px var(--gutter-pc) 0;}
  .news-strip--card .news-strip-inner{padding:16px 20px;}
  .news-strip-head .ttl{font-size:13px;}
  .news-strip-head .more{font-size:12.5px;}
  .news-list{flex-direction:row; gap:24px;}
  .news-item{flex:1; min-width:0;}
  .news-item .t2{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; max-width:100%;
  }

  .section{padding:64px var(--gutter-pc);}
  .lead{font-size:15px; max-width:720px;}
  h2.section-title{font-size:28px;}

  .section.concept{padding-top:40px; padding-bottom:40px;}
  .concept__line{font-size:16px; max-width:640px; margin-left:auto; margin-right:auto;}
  .concept__waka{font-size:20px;}

  .feat-grid{grid-template-columns:repeat(3,1fr); gap:20px;}
  .feat{padding:26px 20px;}
  .feat .ic{width:46px; height:46px; font-size:19px;}
  .feat .t{font-size:14px;}
  .feat .d{font-size:12.5px; min-height:0;}

  .price-list{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  /* おすすめは2列に割らず、1行使い切って先頭で目立たせる */
  .price-row.hot{grid-column:1 / -1;}
  .price-row{padding:18px 22px;}
  .price-row .name{font-size:14.5px;}
  .price-row .amt{font-size:18px;}

  /* PCでは横幅を絞って、縦に積んでも間延びしないようにする */
  .gallery{max-width:760px; margin-left:auto; margin-right:auto; gap:20px;}
  .ph{aspect-ratio:16/9; padding:18px;}

  .coach{padding:26px; gap:24px;}
  .coach .av{width:92px; height:92px;}
  .coach .name{font-size:16px;}
  .coach .msg{font-size:13px; max-width:640px;}

  .access-box{display:flex;}
  .access-box{align-items:stretch;}
  .access-map{width:46%; flex-shrink:0; min-height:320px;}
  .access-map iframe{min-height:320px;}
  .access-info{width:54%; font-size:13px; padding:24px 26px;}
  .access-address{font-size:13.5px; margin-bottom:18px;}
  .access-points{gap:12px;}
  .access-point{padding:13px 15px;}
  .access-point .tt{font-size:14.5px;}
  .access-point .dd{font-size:13px;}

  .footer-cta{padding:56px var(--gutter-pc);}
  .footer-cta h3{font-size:22px;}
  .footer-cta p{font-size:13px;}

  .site-footer-meta{font-size:12.5px; padding:18px var(--gutter-pc) 22px;}

  .sticky-cta{padding:16px var(--gutter-pc); justify-content:center;}
  .sticky-cta a,
  .sticky-cta span{flex:none; min-width:220px; padding:15px 28px; font-size:14px;}

  .line-cta{padding:22px 26px; margin-top:30px;}
  .line-cta__inner{flex-direction:row; text-align:left; gap:20px;}
  .line-cta__body{flex:1;}
  .line-cta__lead{font-size:16px;}
  .line-cta__note{font-size:12.5px;}
  .line-cta .contact-btn{width:auto; flex-shrink:0;}
  .line-cta__actions{flex-direction:row; align-items:center; gap:18px; width:auto; flex-shrink:0;}

  .line-qr{display:block; margin:0; text-align:center; flex-shrink:0;}
  /* QRの周りの白（静穏帯）が足りないと読み取りづらいので、白地のpaddingで補っている。
     img は display:block なので、親の text-align では中央に寄らない（margin autoで寄せる） */
  .line-qr__img{
    display:block; width:132px; height:132px; margin:0 auto;
    background:#fff; border-radius:10px; padding:7px;
  }
  .line-qr__cap{margin:7px 0 0; font-size:11.5px; line-height:1.5; color:var(--ink-soft);}
  /* フッターは深緑地。ボタン2つの下に中央で置き、説明は明るい色にする */
  .line-qr--footer{margin:20px auto 0;}
  .line-qr--footer .line-qr__cap{color:rgba(237,230,210,0.6);}
  :root{--cta-h:86px;}

  .reserve-hero{padding:64px var(--gutter-pc) 40px;}
  .reserve-hero h2{font-size:26px;}
  .triage-wrap{padding:48px var(--gutter-pc) 64px; max-width:840px;}
  .triage-list{flex-direction:row; gap:20px;}
  .triage-btn{flex:1; min-height:108px; font-size:23px;}

  .news-archive-hero{padding:64px var(--gutter-pc) 36px;}
  .news-archive-hero h2{font-size:26px;}
  .news-archive-hero p{font-size:13px;}
  .post-archive{padding:36px var(--gutter-pc) 72px;}
  .post-tabs__tab{font-size:14.5px; padding:17px 8px;}
  .post-panel{padding:2px 26px 22px;}
  .news-archive-row .row-top{gap:14px;}
  .news-archive-row .d3{font-size:13px;}
  .news-archive-row .t3{font-size:14.5px; margin-top:8px;}

  .notfound-wrap{padding:40px var(--gutter-pc) 72px;}
  .notfound-link{padding:18px 22px;}
  .notfound-link .tt{font-size:15px;}
  .notfound-link .dd{font-size:12.5px;}
  .single-wrap{padding:56px var(--gutter-pc) 72px;}
  .single-wrap .entry-title{font-size:28px;}
  .single-wrap .entry-body{font-size:15px;}
}