/* The Golf House 共通部品（common.css 由来・.tgh-page 配下のみ）自動生成: theme/build_css.py */
/* The Golf House リニューアル デザイン見本 共通部品（2026-10-01）
   色 = デザインブック p-3 の色見本から確定（_ACROX_ブランド_デザインブック要点_20260930.md）
   使い方ルール = 背景はニュートラル・他の色は文字のアクセント（約2/3）。たまに逆（アクセント色を背景）も可
   書体 = 仮（BELY DISPLAY / Helvetica Now / UD明朝 は有料・契約確認中）。無料の代替で組む */

:root{
  /* メイン */
  --pine-teal:#2D4739;      /* 主色（印字 #1C2F85 は誤記） */
  --lime-cream:#AABC87;
  --muted-olive:#C8E88E;
  /* ニュートラル（背景） */
  --ivory-mist:#F8F3E4;
  --bone:#D1CFC2;
  --charcoal:#434340;
  /* アクセント */
  --french-blue:#1C2F85;
  --terracotta:#E1602F;     /* 行動ボタン */
  --jasmine:#F7DD72;

  --ink:#262624;
  --paper:#FFFFFF;

  --f-display:"DM Serif Display","Shippori Mincho",serif;   /* 仮: BELY DISPLAY の代わり */
  --f-sans:"Inter","Noto Sans JP","Hiragino Sans",sans-serif; /* 仮: Helvetica Now の代わり */
  --f-mincho:"Shippori Mincho","Hiragino Mincho ProN",serif;  /* 仮: UD明朝 の代わり */

  --wrap:1160px;
  --gutter:32px;
  --radius:999px;
}

:where(.tgh-page) *,:where(.tgh-page) *::before,:where(.tgh-page) *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body:has(.tgh-page){margin:0;background:var(--ivory-mist)}
.tgh-page{margin:0;background:var(--ivory-mist);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
:where(.tgh-page) img{max-width:100%;height:auto;display:block}
:where(.tgh-page) a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* 見出し */
.eyebrow{font-family:var(--f-sans);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--pine-teal)}
.h-display{font-family:var(--f-display);font-weight:400;line-height:1.1;letter-spacing:.01em;color:var(--pine-teal);margin:0}
.h-jp{font-family:var(--f-mincho);font-weight:700;line-height:1.5;color:var(--pine-teal);margin:0}
h2.h-display{font-size:clamp(34px,5vw,56px)}
h2.h-jp{font-size:clamp(22px,3vw,30px)}
.lead{color:var(--charcoal);font-size:16px;max-width:40em}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--radius);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.btn-primary{background:var(--terracotta);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:#C44E22;color:#fff}
.btn-line{background:var(--pine-teal);color:#fff}
.btn-line:hover,.btn-line:focus-visible{background:#1F3328;color:#fff}
.btn-ghost{border:1.5px solid var(--pine-teal);color:var(--pine-teal);background:transparent}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--pine-teal);color:#fff}

/* ブランドの「◯」グラフィック */
.circle{border-radius:50%;overflow:hidden;aspect-ratio:1/1}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--terracotta);vertical-align:middle}

/* セクション */
.sec{padding:96px 0}
.sec-bone{background:var(--bone)}
.sec-teal{background:var(--pine-teal);color:var(--ivory-mist)}
.sec-teal .h-display,.sec-teal .h-jp,.sec-teal .eyebrow{color:var(--ivory-mist)}
.sec-teal .lead{color:var(--bone)}

/* ヘッダー */
.site-header{position:sticky;top:0;z-index:50;background:rgba(248,243,228,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--bone)}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:76px}
.logo-word{font-family:var(--f-display);font-size:24px;color:var(--pine-teal);text-decoration:none;white-space:nowrap}
.gnav{display:flex;gap:24px;flex:1;font-size:14px;font-weight:500}
.gnav a{text-decoration:none;color:var(--ink)}
.lang-switch{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--pine-teal);white-space:nowrap}
.lang-switch a{text-decoration:none;padding:0 4px}
.lang-switch .on{border-bottom:2px solid var(--terracotta)}

/* 仮置き表示（見本用）は出さない（10/9・長谷川さん「適当に出さないで」） */
.mock-note{display:none}

/* SPの下部固定ボタン */
.sp-bar{display:none}

@media (max-width:1024px){
  .gnav{display:none}
}
@media (max-width:760px){
  :root{--gutter:16px}
  .sec{padding:64px 0}
  .site-header .wrap{height:60px;gap:12px}
  .logo-word{font-size:19px;margin-right:auto}
  .site-header .btn{display:none}
  .sp-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 12px;background:rgba(248,243,228,.97);border-top:1px solid var(--bone)}
  .sp-bar .btn{flex:1;padding:12px 8px;font-size:14px}
  .tgh-page{padding-bottom:72px}
}

/* SWELL 本体のヘッダー・フッター・固定UIを、テンプレート内の自前部品に置き換えるため隠す */
.tgh-page .l-header,.tgh-page .l-fixHeader,.tgh-page .p-spMenu,.tgh-page .l-footer,.tgh-page .w-beforeFooter,.tgh-page #fix_bottom_menu,.tgh-page #pagetop,.tgh-page .c-infoBar,.tgh-page .p-breadcrumb,#pagetop,#fix_menu{display:none!important}
.tgh-page{font-size:16px;line-height:1.75}
/* SWELL の本文コンテナ(#content.l-container)の幅・余白・flexを無効化し、見本どおり全幅で描く */
.tgh-page #content.l-content{display:block;max-width:none;margin:0;padding:0}
.tgh-page h1,.tgh-page h2,.tgh-page h3{letter-spacing:normal}
/* ヘッダー部品（3ページ共通） */
.hamb{display:none;width:40px;height:40px;border:1.5px solid var(--pine-teal);border-radius:50%;background:transparent;position:relative;padding:0}
.hamb::before,.hamb::after{content:"";position:absolute;left:11px;right:11px;height:2px;background:var(--pine-teal)}
.hamb::before{top:15px}.hamb::after{top:22px}
.member,.member-link{font-size:12px;color:var(--charcoal);text-decoration:underline;white-space:nowrap}
.site-header .btn{padding:10px 20px;font-size:14px}
.rel{position:relative}
.site-header .wrap{gap:20px}.gnav{gap:18px;font-size:13px}.gnav a{white-space:nowrap}
@media (max-width:1024px){.hamb{display:block}.member,.member-link{display:none}.lang-switch{margin-left:auto}.site-header .wrap{gap:16px}}
@media (max-width:760px){.site-header .wrap{height:60px;gap:10px}.lang-switch{font-size:11px;letter-spacing:0}.lang-switch a{padding:0 2px}}
/* フッター（日本語・top 見本由来） */
footer.site-footer{background:var(--bone);color:var(--charcoal);padding:56px 0 48px;font-size:13px}
footer.site-footer .logo-word{display:inline-block;margin-bottom:16px}
footer.site-footer .links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:20px}
footer.site-footer a{text-decoration:none;color:var(--charcoal)}

/* 料金プラン表（トップ・店舗で共通） */
.plans{border-top:1px solid var(--bone)}
.plan{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:24px 0;border-bottom:1px solid var(--bone);align-items:baseline}
.plan .nm{font-family:var(--f-mincho);font-weight:700;font-size:20px;color:var(--pine-teal)}
.plan .nm small{font-family:var(--f-sans);font-weight:400;font-size:13px;color:var(--charcoal);margin-left:8px}
.plan .yen{font-family:var(--f-display);font-size:32px;color:var(--pine-teal);white-space:nowrap}
.plan .yen small{font-family:var(--f-sans);font-size:12px;color:var(--charcoal)}
.plan .ds{grid-column:1/-1;font-size:13px;color:var(--charcoal)}

/* よくある質問（トップ・店舗で共通） */
/* FAQ */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faq .lead{margin-top:14px}
.faq .more{display:inline-block;margin-top:22px;font-size:14px;font-weight:600;color:var(--pine-teal);text-decoration:none;border-bottom:1.5px solid var(--pine-teal);padding-bottom:2px}
.faq details{border-bottom:1px solid var(--bone);padding:6px 0}
.faq details:first-of-type{border-top:1px solid var(--bone)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:36px 1fr 36px;gap:16px;align-items:center;padding:18px 0;font-family:var(--f-mincho);font-weight:700;font-size:18px;line-height:1.5;color:var(--pine-teal)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";width:36px;height:36px;border-radius:50%;background:var(--pine-teal);color:var(--ivory-mist);font-family:var(--f-display);font-weight:400;font-size:18px;display:flex;align-items:center;justify-content:center}
.faq summary::after{content:"+";width:36px;height:36px;border-radius:50%;border:1.5px solid var(--terracotta);color:var(--terracotta);font-family:var(--f-sans);font-weight:400;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s,color .2s}
.faq details[open] summary::after{content:"\2212";background:var(--terracotta);color:#fff}
.faq summary:hover::after{background:var(--terracotta);color:#fff}
.faq .a{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:4px 36px 22px 0}
.faq .a::before{content:"A";width:36px;height:36px;border-radius:50%;background:var(--ivory-mist);border:1.5px solid var(--pine-teal);color:var(--pine-teal);font-family:var(--f-display);font-size:18px;display:flex;align-items:center;justify-content:center}
.faq .a>div{min-width:0}
.faq .a p{margin:6px 0 0;font-size:15px;line-height:1.9;color:var(--ink)}
.faq .a p+p{margin-top:10px}

/* 体験〜入会の流れ（店舗で使用） */
.flow{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:f}
.flow li{counter-increment:f;border-top:1.5px solid var(--pine-teal);padding-top:18px}
.flow li::before{content:"0" counter(f);display:block;font-family:var(--f-display);font-size:34px;line-height:1;color:var(--terracotta);margin-bottom:12px}
.flow b{display:block;font-family:var(--f-mincho);font-size:18px;color:var(--pine-teal);margin-bottom:8px}
.flow p{margin:0;font-size:14px;line-height:1.8;color:var(--ink)}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr;gap:24px 20px}}
@media (max-width:760px){
  .faq summary{grid-template-columns:30px 1fr 30px;gap:12px;font-size:16px;padding:16px 0}
  .faq summary::before,.faq summary::after,.faq .a::before{width:30px;height:30px;font-size:16px}
  .faq .a{grid-template-columns:30px 1fr;gap:12px;padding-right:0}
  .faq .a p{font-size:14px}
  .plan .yen{font-size:26px}
  .flow{grid-template-columns:1fr;gap:18px}
}