/* ============================================================
   Trigger Golf Range HP - 完全リファクタ版 CSS
   - mobile-first (デフォルト = SP)、PC は @media (min-width: 601px) で上書き
   - flex / grid のみで配置 (position: absolute 不使用)
   - !important 不使用
   - 意味的 class / ID のみ
   ============================================================ */

/* ---------- フォント ---------- */
@font-face {
  font-family: "YuMincho-Medium";
  src: url("https://anima-uploads.s3.amazonaws.com/projects/61e0080a136995ef3c4c0857/fonts/yu-mincho-medium.otf")
    format("opentype");
  font-display: swap;
}

/* ---------- 設計トークン ---------- */
:root {
  --color-navy: #1d3e5e;
  --color-cream: #d8cfbd;
  --color-gold: #91855a;
  --color-dark-green: #1e3937;
  --color-white: #ffffff;
  --color-text: #464242;
  --color-placeholder: #bfbfbf;

  --font-mincho: "YuMincho-Medium", "Yu Mincho", "YuMincho",
                 "Hiragino Mincho Pro", "Hiragino Mincho ProN", serif;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 90px;

  --header-h: 90px;
  --container-pc: 1100px;

  /* セクション区切り斜めの傾斜量。XD 実測でセクションごとに方向と量が異なる:
     ・index の cream セクション (about / strengths / shops):
        top edge `/` (左下→右上, navy が左上に覗く)
        bottom edge `\` (左上→右下, navy が右下に覗く)
     ・about の vision (white) / company の company-info (white):
        top edge FLAT, bottom edge `/` (左下→右上)
     ・全ページ共通 footer top edge `\` (左上→右下) → 一段浅め */
  --slant: 80px;
  --footer-slant: 32px;
}
@media (min-width: 601px) {
  :root {
    --slant: 140px;       /* PC は角度を大きく取って意匠を強調 */
    --footer-slant: 60px;
    --space-4xl: 140px;
  }
}

/* ---------- リセット ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-mincho);
}
html, body {
  background-color: var(--color-navy);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
ul, ol, dl { list-style: none; }

/* SP/PC 切り替え用ヘルパー */
.sp-only { display: block; }
.pc-only { display: none; }
@media (min-width: 601px) {
  .sp-only { display: none; }
  .pc-only { display: block; }
}

/* ============================================================
   ヘッダ (#site-header) - 全ページ共通、白背景固定
   ============================================================ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  /* 左/中央/右 を対称な 1fr で確保し、ロゴを必ず viewport 中央へ */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--space-md);
  background: var(--color-white);
}
#site-header .header-cta { padding-right: 0; }
.header-bg-bar { display: none; }

.hamburger {
  grid-column: 1;
  justify-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  width: 32px;
  height: 32px;
}
.hamburger-line {
  width: 28px;
  height: 2px;
  background: var(--color-gold);
}

#site-header > a:has(> .img-2) {
  grid-column: 2;
  display: flex;
  justify-content: center;
}
.img-2 {
  width: 72px;
  object-fit: contain;
}

.header-cta {
  grid-column: 3;
  justify-self: end;
}

/* CTA を grid 化して gold notch (右下) と本文 (中央) を別エリアで配置 */
.header-cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  width: 130px;
  height: 60px;
  background: var(--color-dark-green);
  border: 1px solid var(--color-gold);
  color: var(--color-white);
  font-size: 11px;
  line-height: 1.5;
  overflow: hidden;
}
/* 右下 gold 三角ノッチ */
.header-cta::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  background: var(--color-gold);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.header-cta-bg { display: none; }
.header-cta-icon { display: none; }
.FC {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  text-align: center;
  padding: 0 12px;
}

/* ============================================================
   セクション共通
   ============================================================ */
.section {
  padding: var(--space-3xl) var(--space-lg);
}

/* page title (各下層ページ共通の見出し) */
#section-page-title {
  background: var(--color-navy);
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
}
.page-title-deco { display: none; }
#section-page-title .text-wrapper {
  color: var(--color-white);
  font-size: 22px;
  padding-bottom: var(--space-md);
}
#section-page-title .text-wrapper::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  margin: var(--space-md) 0 0;
}

/* ============================================================
   ヒーロー (#section-hero - index)
   ============================================================ */
#section-hero {
  background: var(--color-navy);
  color: var(--color-white);
  text-align: center;
  padding: 100px var(--space-lg) 80px;
}
.hero-title {
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}
.hero-body {
  font-size: 13px;
  line-height: 1.8;
}

/* ============================================================
   トップページ About セクション (#section-about)
   ============================================================ */
#section-about {
  background: var(--color-cream);
  /* XD実測: top `/` (左下→右上), bottom `\` (左上→右下) →
     右側が長い不等辺の形。左上と右下が clip されて navy が覗く。 */
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 calc(100% - var(--slant)));
  padding-top: calc(var(--space-3xl) + var(--slant));
  padding-bottom: calc(var(--space-3xl) + var(--slant));
  text-align: center;
}
.about-deco { display: none; }
.section-about-title {
  font-size: 22px;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.section-about-body {
  font-size: 13px;
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}
.section-about-image {
  width: 100%;
  height: 160px;
  background: var(--color-placeholder);
  margin: var(--space-md) 0;
}

/* ============================================================
   業務一覧 (index .business-grid) - 4 cards
   navy 背景 = body と同色のため clip-path 不要
   ============================================================ */
#section-business {
  background: var(--color-navy);
  padding: var(--space-2xl) var(--space-lg);
}
.section-business-title {
  font-size: 22px;
  color: var(--color-white);
  text-align: center;
  margin-bottom: var(--space-md);
}
.section-business-desc {
  font-size: 13px;
  color: var(--color-white);
  text-align: center;
  margin-bottom: var(--space-lg);
}
.business-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.business-item {
  background: var(--color-white);
  padding: var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.business-item-bg { display: none; }
.business-item-image {
  width: 100%;
  height: 100px;
  background: var(--color-placeholder);
}
.business-item-number {
  color: var(--color-gold);
  font-size: 32px;
  line-height: 1;
}
.business-item-title {
  color: var(--color-text);
  font-size: 14px;
}

/* ============================================================
   業務詳細 (business.html .business-detail-grid) - 4 cards
   ============================================================ */
#section-business-detail {
  background: var(--color-navy);
  padding: var(--space-2xl) var(--space-lg);
}
.trigger-golf-range-2 {
  color: var(--color-white);
  font-size: 13px;
  text-align: center;
  margin-bottom: var(--space-lg);
}
.business-detail-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.business-detail-item {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  padding: var(--space-lg);
  border-radius: 24px 0 0 0;
  text-align: center;
}
.business-detail-frame { display: none; }
.business-detail-number {
  order: 1;
  align-self: flex-start;
  color: var(--color-gold);
  font-size: 36px;
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.business-detail-image {
  order: 2;
  width: 100%;
  height: 160px;
  background: var(--color-placeholder);
  margin-bottom: var(--space-md);
}
.business-detail-title {
  order: 3;
  color: var(--color-text);
  font-size: 17px;
  margin: 0 0 var(--space-sm);
}
.business-detail-line {
  order: 4;
  display: block;
  width: 60px;
  height: 1px;
  align-self: center;
  margin: 0 auto var(--space-md);
}
.business-detail-body {
  order: 5;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
}

/* ============================================================
   強み (#section-strengths) - 4 items
   ============================================================ */
#section-strengths {
  background: var(--color-cream);
  padding: calc(var(--space-3xl) + var(--slant)) var(--space-lg);
  /* top `/`, bottom `\` (left上と右下 clip) */
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 calc(100% - var(--slant)));
}
.strengths-deco { display: none; }
.section-strengths-title {
  font-size: 22px;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-lg);
}
.strengths-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.strength-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-sm);
  row-gap: var(--space-xs);
  align-items: center;
}
.strength-number {
  grid-column: 1;
  grid-row: 1;
  color: var(--color-gold);
  font-size: 22px;
  align-self: center;
}
.strength-line {
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 24px;
  height: 24px;
}
.strength-title {
  grid-column: 3;
  grid-row: 1;
  color: var(--color-text);
  font-size: 16px;
}
.strength-body {
  grid-column: 3;
  grid-row: 2;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.8;
}

/* ============================================================
   FC 加盟セクション (#section-fc)
   ============================================================ */
#section-fc {
  background: var(--color-navy);
  padding: var(--space-2xl) var(--space-lg);
  /* navy = body 同色のため clip-path 不要 (slant は隣接 cream 側で作る) */
}
.section-fc-title {
  font-size: 22px;
  color: var(--color-white);
  margin-bottom: var(--space-md);
  text-align: center;
}
.section-fc-desc {
  font-size: 13px;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  text-align: center;
}
.fc-card {
  position: relative;
  background: var(--color-dark-green);
  border: 2px solid var(--color-gold);
  padding: var(--space-md);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-md);
  align-items: center;
  overflow: hidden;
}
/* 右下 gold 三角ノッチ */
.fc-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  background: var(--color-gold);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.fc-card-deco { display: none; }
.fc-card-icon {
  grid-column: 1;
  grid-row: 1;
  width: 100px;
  height: 100px;
  object-fit: contain;
  background: var(--color-placeholder);
}
.fc-card-divider { display: none; }
.fc-card-text {
  grid-column: 2;
  grid-row: 1;
  color: var(--color-white);
  font-size: 14px;
  line-height: 1.6;
}
.fc-arrow {
  grid-column: 1 / span 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.fc-card-line {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 1px;
  align-self: center;
}
.fc-card-arrow {
  width: 11px;
  height: 14px;
  flex-shrink: 0;
  margin-left: calc(var(--space-sm) * -1);
}

/* ============================================================
   店舗一覧 (#section-shops top / #section-shop-list shop)
   index の店舗案内は cream 背景、shop 詳細ページは navy 背景
   ============================================================ */
#section-shops {
  background: var(--color-cream);
  padding: calc(var(--space-3xl) + var(--slant)) var(--space-lg);
  /* top `/`, bottom `\` */
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 calc(100% - var(--slant)));
}
#section-shop-list {
  background: var(--color-navy);
  padding: var(--space-2xl) var(--space-lg);
}
.shops-deco { display: none; }
#section-shops .section-shops-title {
  color: var(--color-text);
  font-size: 22px;
  text-align: center;
  margin-bottom: var(--space-md);
}
#section-shops .section-shops-desc {
  color: var(--color-text);
  font-size: 13px;
  text-align: center;
  margin-bottom: var(--space-lg);
}
#section-shop-list .section-shops-title {
  color: var(--color-white);
  font-size: 22px;
  text-align: center;
  margin-bottom: var(--space-md);
}
#section-shop-list .section-shops-desc {
  color: var(--color-white);
  font-size: 13px;
  text-align: center;
  margin-bottom: var(--space-lg);
}
.shops-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.shop-card {
  background: var(--color-white);
  border-radius: 24px 0 0 0;
  padding: var(--space-md);
  display: grid;
  grid-template-columns: auto 1px 1fr;
  grid-template-rows: auto auto auto auto;
  column-gap: var(--space-md);
}
.shop-card-bg { display: none; }
.shop-card-name {
  grid-column: 1;
  grid-row: 1 / span 3;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--color-text);
  font-size: 14px;
  letter-spacing: 0.1em;
}
.shop-card-divider {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: block;
  width: 1px;
  height: 100%;
  align-self: stretch;
}
.shop-card-image {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  height: 120px;
  background: var(--color-placeholder);
  margin-bottom: var(--space-sm);
}
.shop-card-description {
  grid-column: 3;
  grid-row: 2;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.6;
}
.shop-card-area {
  grid-column: 3;
  grid-row: 3;
  color: var(--color-text);
  font-size: 12px;
  margin-top: var(--space-xs);
}
.shop-card-btn {
  grid-column: 3;
  grid-row: 4;
  display: flex;
  align-items: center;
  background: var(--color-gold);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  gap: var(--space-sm);
}
.shop-card-btn-bg { display: none; }
.shop-card-btn-text {
  font-size: 13px;
}
.shop-card-btn-line {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 1px;
  align-self: center;
}
.shop-card-btn-arrow {
  width: 9px;
  height: 11px;
  flex-shrink: 0;
  margin-left: calc(var(--space-sm) * -1);
}

/* ============================================================
   お問い合わせセクション (#section-contact - top, about 等)
   ============================================================ */
#section-contact {
  background: var(--color-navy);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  /* navy = body 同色のため clip-path 不要 (slant は隣接 cream 側で作る) */
}
.section-contact-title {
  color: var(--color-white);
  font-size: 18px;
  margin-bottom: var(--space-md);
}
.section-contact-desc {
  color: var(--color-white);
  font-size: 13px;
  margin-bottom: var(--space-lg);
}

/* ============================================================
   .more-btn (共通 CTA ボタン)
   ============================================================ */
.more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-gold);
  color: var(--color-white);
  padding: var(--space-md) var(--space-lg);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.more-btn-bg { display: none; }
.more-btn-text {
  font-size: 15px;
}
.more-btn-line {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 1px;
  align-self: center;
}
.more-btn-arrow {
  width: 10px;
  height: 13px;
  flex-shrink: 0;
  margin-left: calc(var(--space-md) * -1);
}

/* ============================================================
   会社概要 (#section-company-info)
   XD実測: 上部 page-title (navy) 内に photo、その下 white の会社情報リスト、
   下に navy contact が続く → bottom edge `/` (左下→右上, navy が右下に覗く)
   ============================================================ */
.company-photo {
  width: calc(100% - var(--space-lg) * 2);
  height: 220px;
  background: var(--color-placeholder);
  margin: var(--space-xl) var(--space-lg) 0;
}
#section-company-info {
  background: var(--color-white);
  padding: var(--space-2xl) var(--space-lg) calc(var(--space-2xl) + var(--slant));
  /* top FLAT, bottom `/` (右下を slant 分 clip) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.company-deco { display: none; }
/* 2 列構成: ラベル / 値 (▶ は ::before で値の前に表示)
   ※ <img class="company-info-separator"> は display:none で grid track から外す */
.company-info-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  column-gap: var(--space-lg);
  align-items: baseline;
  padding: var(--space-sm) 0;
}
.company-info-separator {
  display: none;
}
.company-info-label {
  grid-column: 1;
  color: var(--color-text);
  font-size: 13px;
  text-align: justify;
  text-align-last: justify;
}
.company-info-value {
  grid-column: 2;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
}
.company-info-value::before {
  content: "▶  ";
  color: var(--color-gold);
  font-size: 11px;
  margin-right: var(--space-sm);
}
.company-info-row:nth-of-type(2) .company-info-value {
  max-width: 180px;
}

/* ============================================================
   About ページ各セクション (philosophy / vision / message)
   XD実測: philosophy=navy / vision=white / message=navy
   XD実測: philosophy→vision は FLAT, vision→message は `/`
   → vision の top FLAT, bottom `/` (右下を slant 分 clip)
   ============================================================ */
#section-philosophy {
  background: var(--color-navy);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  /* navy=body 同色のため clip-path 不要 */
}
#section-vision {
  background: var(--color-white);
  padding: var(--space-2xl) var(--space-lg) calc(var(--space-2xl) + var(--slant));
  text-align: center;
  /* top FLAT, bottom `/` */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.philosophy-title {
  color: var(--color-white);
  font-size: 18px;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
}
.vision-title {
  color: var(--color-text);
  font-size: 18px;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
}
.philosophy-title::before,
.vision-title::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--color-gold);
}
.philosophy-body {
  color: var(--color-white);
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
  padding-left: calc(40px + var(--space-md));
}
.vision-body {
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
  padding-left: calc(40px + var(--space-md));
}
.about-vision-deco, .about-line-deco { display: none; }

#section-message {
  background: var(--color-navy);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  /* navy = body 同色のため clip-path 不要 (slant は vision 側で作る) */
}
.message-title {
  color: var(--color-white);
  font-size: 18px;
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
}
.message-title::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--color-gold);
}
.message-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.message-photo {
  width: 100%;
  height: 240px;
  background: var(--color-placeholder);
}
.message-line {
  display: none;
}
.message-name {
  color: var(--color-white);
  font-size: 16px;
  margin-bottom: var(--space-md);
  text-align: left;
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-gold);
}
.message-body {
  color: var(--color-white);
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
}
/* about ページ 代表メッセージ本文は .contact-privacy-box をスタイル軽めに上書き */
#section-message .contact-privacy-box {
  background: transparent;
  border: 0;
  padding: 0;
  max-height: none;
  overflow: visible;
  color: var(--color-white);
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
}

/* ============================================================
   コンタクトフォーム (#section-contact-form)
   ============================================================ */
#section-contact-form {
  background: var(--color-navy);
  padding: var(--space-2xl) var(--space-lg);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.form-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-md);
  align-items: center;
}
.form-label {
  color: var(--color-white);
  font-size: 12px;
  text-align: right;
}
.form-input {
  background: var(--color-white);
  height: 32px;
}
.form-row--textarea {
  display: block;
}
.form-textarea {
  background: var(--color-white);
  height: 140px;
  margin-left: 122px;
}
.form-textarea-deco { display: none; }

/* お問い合わせ項目 (dropdown 風) - flex で右端揃え */
.form-row:nth-of-type(4) .form-input {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}
.form-row:nth-of-type(4) .form-input::after {
  content: "▼";
  color: var(--color-gold);
  font-size: 10px;
  pointer-events: none;
}

.contact-privacy-box {
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  max-height: 60px;
  overflow-y: scroll;
}
/* 入れ子の空 .form-textarea(プライバシーボックス内) は HTML 由来の余計な要素なので非表示 */
.contact-privacy-box .form-textarea { display: none; }
.contact-privacy-title {
  color: var(--color-text);
  font-size: 13px;
  margin-bottom: var(--space-sm);
}
.contact-privacy-body {
  color: var(--color-text);
  font-size: 11px;
  line-height: 1.6;
}
.contact-privacy-deco { display: none; }

.contact-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}
.contact-checkbox-box {
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-gold);
}
.contact-checkbox-text {
  color: var(--color-white);
  font-size: 13px;
}

.form-submit {
  display: block;
  width: 160px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-md);
  background: var(--color-gold);
  color: var(--color-white);
  font-size: 15px;
  border: 0;
}
.form-submit-bg { display: none; }

/* ============================================================
   Privacy ページ (#section-privacy-body)
   ============================================================ */
#section-privacy-body {
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}
.privacy-intro {
  color: var(--color-white);
  font-size: 13px;
  line-height: 2;
  margin-bottom: var(--space-2xl);
}
.privacy-clause {
  margin-bottom: var(--space-2xl);
}
.privacy-clause-heading {
  display: block;
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.privacy-clause-body {
  display: block;
  color: var(--color-white);
  font-size: 13px;
  line-height: 2;
}

/* ============================================================
   Thanks ページ (#section-thanks)
   ============================================================ */
#section-thanks {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 100px var(--space-lg) 180px;
}
#section-thanks .text-wrapper {
  font-size: 18px;
  margin-bottom: var(--space-xl);
}
#section-thanks .trigger-golf-range-2 {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  text-align: left;
}
#section-thanks .more-btn {
  width: 160px;
  padding: var(--space-sm) 0;
  background: var(--color-gold);
  color: var(--color-white);
  text-align: center;
  margin-left: 0;
}

/* ============================================================
   フッタ (#site-footer) - 全ページ共通
   ============================================================ */
#site-footer {
  background: var(--color-white);
  padding: calc(var(--space-xl) + var(--footer-slant)) var(--space-lg) var(--space-lg);
  /* XD実測: 全ページ top edge `\` (左上→右下, navy が右上に覗く) */
  clip-path: polygon(0 0, 100% var(--footer-slant), 100% 100%, 0 100%);
}
.footer-wrapper {
  display: grid;
  grid-template-areas:
    "logo"
    "nav"
    "cta"
    "toplink";
  gap: var(--space-md);
}
.footer-logo {
  grid-area: logo;
  width: 60px;
  margin: 0 auto var(--space-md);
}
.footer-nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: var(--space-lg) var(--space-sm);
  width: 100%;
}
.footer-nav > a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
/* XD のカラム優先順:
   (1,1)=Trigger Golf Rangeとは | (1,2)=事業内容
   (2,1)=店舗一覧                | (2,2)=会社概要
   (3,_) blank                   | (3,2)=プライバシーポリシー
   HTML 順 [about, shop, business, company, privacy] を grid 配置で並び替え */
.footer-nav > a:nth-child(1) { grid-area: 1 / 1; }
.footer-nav > a:nth-child(2) { grid-area: 2 / 1; }
.footer-nav > a:nth-child(3) { grid-area: 1 / 2; }
.footer-nav > a:nth-child(4) { grid-area: 2 / 2; }
.footer-nav > a:nth-child(5) { grid-area: 3 / 2; }
.footer-nav-arrow {
  width: 12px;
  height: 14px;
  order: -1;
}
.footer-nav-text {
  color: var(--color-text);
  font-size: 12px;
  white-space: nowrap;
}

.footer-cta {
  grid-area: cta;
  display: flex;
  justify-content: center;
}
.footer-cta-box {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 320px;
  padding: var(--space-md);
  border: 1px solid var(--color-gold);
}
.footer-cta-text {
  color: var(--color-text);
  font-size: 15px;
}
.footer-cta-spacer { display: none; }
.footer-cta-line {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 1px;
  align-self: center;
}
.footer-cta-arrow {
  width: 10px;
  height: 13px;
  flex-shrink: 0;
  margin-left: calc(var(--space-sm) * -1);
}

.footer-top-arrow {
  width: 18px;
  height: 16px;
  margin-left: auto;
}
.top-link {
  grid-area: toplink;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}
.top-link-text {
  color: var(--color-text);
  font-size: 13px;
}

/* ============================================================
   モバイルメニュー (#mobile-menu) :target で表示
   ============================================================ */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-navy);
  overflow-y: auto;
  padding-bottom: 60px;
}
.mobile-menu:target { display: block; }
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  gap: var(--space-sm);
}
/* X close button - grid で 2 本の線を中央重ね、片方ずつ回転 */
.mobile-menu-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
}
.mobile-menu-close span {
  grid-column: 1;
  grid-row: 1;
  width: 32px;
  height: 2px;
  background: var(--color-gold);
}
.mobile-menu-close span:nth-child(1) { transform: rotate(45deg); }
.mobile-menu-close span:nth-child(2) { transform: rotate(-45deg); }
.mobile-menu-logo img {
  width: 76px;
  display: block;
}
/* モバイルメニュー CTA: ヘッダ CTA と同じ grid パターン */
.mobile-menu-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  width: 130px;
  height: 60px;
  background: var(--color-dark-green);
  border: 1px solid var(--color-gold);
  color: var(--color-white);
  font-size: 11px;
  line-height: 1.5;
}
.mobile-menu-cta > span {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  text-align: center;
  padding: 0 12px;
}
.mobile-menu-cta-icon {
  grid-column: 2;
  grid-row: 2;
  width: 16px;
  align-self: end;
  justify-self: end;
}
.mobile-menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}
.mobile-menu-list a {
  color: var(--color-white);
  font-size: 18px;
  padding-bottom: var(--space-md);
}
.mobile-menu-list a::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: var(--color-gold);
  margin: var(--space-md) auto 0;
}
.mobile-menu-list a:last-child::after { display: none; }
.mobile-menu-privacy {
  display: block;
  text-align: right;
  padding: 0 var(--space-lg);
  color: var(--color-white);
  font-size: 12px;
}

/* ============================================================
   PC 表示 (min-width: 601px)
   ============================================================ */
@media (min-width: 601px) {
  body {
    font-size: 16px;
  }

  /* ----- ヘッダ ----- */
  #site-header {
    padding: 0 var(--space-xl);
  }
  .img-2 {
    width: 90px;
  }
  .header-cta {
    width: 180px;
    height: 70px;
    font-size: 13px;
  }
  .FC br { display: none; }
  .FC::after { content: " "; }

  /* ----- ヒーロー ----- */
  #section-hero {
    padding: 180px var(--space-xl);
  }
  .hero-title { font-size: 32px; margin-bottom: var(--space-3xl); }
  .hero-body { font-size: 16px; line-height: 2; }

  /* ----- ページタイトル ----- */
  #section-page-title {
    padding: 100px var(--space-xl) var(--space-2xl);
  }
  #section-page-title .text-wrapper {
    font-size: 36px;
    max-width: var(--container-pc);
    margin: 0 auto;
  }
  #section-page-title .text-wrapper::after {
    width: 100%;
    margin-top: var(--space-lg);
  }

  /* ----- index about ----- */
  #section-about {
    padding: var(--space-4xl) var(--space-xl);
    max-width: 100%;
  }
  #section-about > * {
    max-width: var(--container-pc);
    margin-left: auto;
    margin-right: auto;
  }
  .section-about-title {
    font-size: 28px;
    text-align: left;
    margin-bottom: var(--space-4xl);
  }
  .section-about-body {
    font-size: 16px;
    margin-top: var(--space-4xl);
    margin-bottom: var(--space-3xl);
  }
  /* PC: 2 イメージを Tetris 状にオフセット配置 */
  .section-about-image {
    max-width: none;
    width: 520px;
    height: 280px;
    margin: 0 auto;
  }
  #section-about .section-about-image {
    margin-top: 0;
    margin-right: 25%;
    margin-bottom: -100px;
  }
  #section-about .section-about-image ~ .section-about-image {
    width: 430px;
    margin-top: 0;
    margin-right: 0;
    margin-left: 35%;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }
  #section-about .more-btn {
    max-width: 380px;
    margin-right: 0;
    margin-left: auto;
  }

  /* ----- index business ----- */
  #section-business {
    padding: var(--space-4xl) var(--space-xl);
  }
  .section-business-title {
    font-size: 28px;
    text-align: left;
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
  }
  .section-business-desc {
    font-size: 16px;
    margin-bottom: var(--space-3xl);
  }
  .business-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
  }
  .business-item {
    padding: var(--space-lg);
  }
  .business-item-image { height: 180px; }
  .business-item-number { font-size: 48px; text-align: left; }
  .business-item-title { font-size: 16px; }
  #section-business .more-btn {
    margin-right: 0;
    margin-left: auto;
  }

  /* ----- business detail ----- */
  #section-business-detail {
    padding: var(--space-4xl) var(--space-xl);
  }
  .trigger-golf-range-2 {
    margin-bottom: var(--space-3xl);
  }
  .business-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    max-width: var(--container-pc);
    margin: 0 auto;
  }
  .business-detail-item {
    padding: var(--space-xl);
  }
  .business-detail-number { font-size: 48px; }
  .business-detail-image { height: 220px; }
  .business-detail-body { font-size: 14px; }

  /* ----- strengths ----- */
  #section-strengths {
    padding: var(--space-4xl) var(--space-xl);
  }
  .section-strengths-title {
    text-align: left;
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
    font-size: 28px;
  }
  .strengths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl) var(--space-xl);
    max-width: var(--container-pc);
    margin: 0 auto;
  }
  .strength-number { font-size: 28px; }
  .strength-line { width: 32px; height: 32px; }
  .strength-title { font-size: 20px; }
  .strength-body { font-size: 15px; }

  /* ----- FC ----- */
  #section-fc {
    padding: var(--space-4xl) var(--space-xl);
  }
  .section-fc-title {
    font-size: 28px;
    text-align: left;
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
  }
  .section-fc-desc {
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
  }
  .fc-card {
    max-width: 700px;
    margin: 0 auto;
    grid-template-columns: 140px 1fr;
    padding: var(--space-lg) var(--space-xl);
  }
  .fc-card::after {
    width: 48px;
    height: 48px;
  }
  .fc-card-icon {
    width: 140px;
    height: 140px;
  }
  .fc-card-text {
    font-size: 18px;
  }

  /* ----- shops ----- */
  #section-shops, #section-shop-list {
    padding: var(--space-4xl) var(--space-xl);
  }
  #section-shops .section-shops-title {
    text-align: left;
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
  }
  #section-shops .section-shops-desc {
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
  }
  .section-shops-title { font-size: 28px; }
  .shops-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl) var(--space-xl);
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
  }
  #section-shop-list .shops-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shop-card {
    grid-template-columns: 40px 1px 1fr;
    padding: var(--space-lg);
  }
  .shop-card-image { height: 200px; }
  .shop-card-name { font-size: 16px; }
  /* PC の「店舗一覧を見る」ボタンは navy 背景 */
  #section-shops > .more-btn {
    margin-right: 0;
    margin-left: auto;
    background: var(--color-navy);
  }

  /* ----- contact section ----- */
  #section-contact {
    padding: var(--space-4xl) var(--space-xl);
  }
  .section-contact-title {
    font-size: 24px;
    text-align: left;
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
  }
  .section-contact-desc {
    max-width: var(--container-pc);
    margin: 0 auto var(--space-3xl);
  }
  #section-contact .more-btn {
    max-width: 480px;
    margin-right: 0;
    margin-left: auto;
  }

  /* ----- more-btn ----- */
  .more-btn {
    max-width: 380px;
    padding: var(--space-lg) var(--space-xl);
    gap: var(--space-md);
  }
  .more-btn-text { font-size: 18px; }
  .more-btn-arrow { width: 14px; height: 18px; }
  .fc-card-arrow { width: 14px; height: 18px; }
  .shop-card-btn-arrow { width: 11px; height: 14px; }
  .footer-cta-arrow { width: 12px; height: 15px; }

  /* ----- company ----- */
  #section-company-info {
    /* top FLAT, bottom slant のため bottom のみ slant 分 padding を追加 */
    padding: var(--space-4xl) var(--space-xl) calc(var(--space-4xl) + var(--slant));
  }
  .company-photo {
    max-width: 800px;
    height: 360px;
    margin: var(--space-2xl) auto 0;
  }
  .company-info-list {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
  }
  .company-info-label { font-size: 16px; }
  .company-info-value { font-size: 18px; }

  /* ----- about pages ----- */
  #section-philosophy {
    padding: var(--space-4xl) var(--space-xl);
  }
  #section-vision {
    /* top FLAT, bottom slant のため bottom のみ slant 分 padding を追加 */
    padding: var(--space-4xl) var(--space-xl) calc(var(--space-4xl) + var(--slant));
  }
  #section-philosophy > *, #section-vision > * {
    max-width: var(--container-pc);
    margin-left: auto;
    margin-right: auto;
  }
  .philosophy-title, .vision-title {
    font-size: 24px;
    margin-bottom: var(--space-2xl);
  }
  .philosophy-title::before, .vision-title::before {
    width: 80px;
  }
  .philosophy-body, .vision-body {
    font-size: 15px;
    text-align: left;
    padding-left: calc(80px + var(--space-md));
  }

  #section-message {
    padding: var(--space-4xl) var(--space-xl);
  }
  #section-message > * {
    max-width: var(--container-pc);
    margin-left: auto;
    margin-right: auto;
  }
  .message-title {
    font-size: 24px;
    margin-bottom: var(--space-3xl);
  }
  .message-title::after {
    width: 120px;
  }
  /* PC: 写真左 + テキスト右の 2 カラム */
  .message-block {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }
  .message-photo {
    grid-column: 1;
    grid-row: 1 / span 3;
    height: 420px;
  }
  .message-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 22px;
    margin-bottom: 0;
  }
  #section-message .contact-privacy-box {
    grid-column: 2;
    grid-row: 2;
    font-size: 15px;
  }

  /* ----- form ----- */
  #section-contact-form {
    padding: var(--space-4xl) var(--space-xl);
  }
  .contact-form {
    max-width: 700px;
    margin: 0 auto;
  }
  .form-row {
    grid-template-columns: 180px 1fr;
  }
  .form-label { font-size: 14px; }
  .form-input { height: 40px; }
  .form-textarea { height: 200px; margin-left: 196px; }
  .contact-privacy-box { max-height: 100px; }
  .contact-privacy-body { font-size: 13px; }
  .form-submit { width: 220px; font-size: 18px; }

  /* ----- privacy ----- */
  #section-privacy-body {
    padding: var(--space-4xl) var(--space-xl) var(--space-3xl);
  }
  #section-privacy-body > * {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .privacy-intro { font-size: 15px; }
  .privacy-clause-heading { font-size: 18px; }
  .privacy-clause-body { font-size: 14px; }

  /* ----- thanks ----- */
  #section-thanks {
    padding: 180px var(--space-xl) var(--space-4xl);
    text-align: center;
  }
  #section-thanks > * {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  #section-thanks .text-wrapper { font-size: 28px; text-align: center; }
  #section-thanks .trigger-golf-range-2 { font-size: 15px; text-align: center; }
  #section-thanks .more-btn { width: 240px; margin: 0 auto; }

  /* ----- footer ----- */
  #site-footer {
    /* clip-path top slant の分 padding-top を確保 */
    padding: calc(80px + var(--footer-slant)) var(--space-xl) var(--space-xl);
  }
  .footer-wrapper {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo nav cta"
      ".    .   toplink";
    align-items: start;
    max-width: var(--container-pc);
    margin: 0 auto;
    gap: var(--space-xl);
  }
  .footer-logo { width: 120px; margin: 0; }
  .footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-xl);
  }
  .footer-nav-text { font-size: 14px; }
  .footer-cta-box { padding: var(--space-md) var(--space-lg); }

  /* ----- mobile menu / hamburger は PC でも使用 (主ナビゲーション) ----- */
  /* (隠さない) */
}