/*
Theme Name: GAEN Detailing
Theme URI: https://gaen-detailing.jp/
Author: 株式会社 雅艶 PROJECT
Description: 岩手県花巻市のカーディテイリング専門店「GAEN Detailing 雅艶」専用のオリジナルWordPressテーマ。静的サイト gaen4 のデザインシステム（ダーク／ボールド・モダン）をそのまま WordPress 化し、お知らせ・施工事例・物販をカスタム投稿で管理できます。
Version: 1.13.1
Requires at least: 6.3
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gaen-detailing
Tags: business, custom-logo, custom-menu, featured-images, full-width-template
*/

/* =============================================================
   GAEN Detailing 雅艶 — Design System v4
   Dark / Bold-Modern
   -------------------------------------------------------------
   01 TOKENS          08 SECTION HEAD      15 PRICE TABLE
   02 RESET / BASE    09 SERVICES ROWS     16 FLOW / STEPS
   03 TYPOGRAPHY      10 FEATURE GRID      17 DEF TABLE / ACCESS
   04 LAYOUT          11 WORKS RAIL        18 GREETING
   05 BUTTONS         12 MARQUEE           19 CARDS / FILTER
   06 HEADER / NAV    13 SPLIT (ABOUT)     20 ARTICLE / FORM
   07 HERO            14 STAT BAND         21 CTA / FOOTER
                                           22 UTIL / RESPONSIVE
   ============================================================= */

/* ===== 01 TOKENS ===== */
:root {
  /* surfaces */
  --bg:         #0b0b0d;
  --bg-2:       #101014;
  --surface:    #16161b;
  --surface-2:  #1e1e25;
  --line:       #2a2a33;
  --line-soft:  rgba(255, 255, 255, 0.07);

  /* ink */
  --fg:         #f4f2ee;
  --fg-2:       #b6b3ab;
  --fg-3:       #7a7871;

  /* accent */
  --gold:       #d9b46a;
  --gold-hi:    #f3dda9;
  --gold-dk:    #8b6d33;
  --gold-a:     rgba(217, 180, 106, 0.18);

  /* type families */
  --f-display:  'Anton', 'Noto Sans JP', sans-serif;
  --f-serif:    'Shippori Mincho B1', 'Yu Mincho', serif;
  --f-body:     'Noto Sans JP', sans-serif;

  /* fluid type scale */
  --t-micro:    clamp(0.65rem, 0.62rem + 0.15vw, 0.72rem);
  --t-sm:       clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --t-base:     clamp(0.925rem, 0.9rem + 0.2vw, 1rem);
  --t-lg:       clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --t-h3:       clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --t-h2:       clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --t-h1:       clamp(1.9rem, 1rem + 4.4vw, 5.5rem);
  --t-mega:     clamp(3.5rem, 1rem + 12vw, 12rem);

  /* rhythm */
  --pad:        clamp(1.25rem, 5vw, 5rem);
  --maxw:       1280px;
  --maxw-wide:  1600px;
  --sec-y:      clamp(4.5rem, 9vw, 9.5rem);
  --hdr-h:      74px;

  /* motion */
  --ease:       cubic-bezier(0.22, 0.72, 0.2, 1);
  --dur:        0.6s;
}

/* ===== 02 RESET / BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
}

body {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: var(--t-base);
  line-height: 1.9;
  color: var(--fg-2);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--gold); color: #0b0b0d; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 3000;
  padding: 0.6rem 1.2rem; background: var(--gold); color: #0b0b0d;
  font-size: var(--t-sm); font-weight: 500;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: none; }

/* ===== 03 TYPOGRAPHY ===== */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--fg);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-display);
  font-size: var(--t-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px; background: var(--gold); opacity: 0.6;
}

.lead {
  font-size: var(--t-lg);
  color: var(--fg-2);
  line-height: 2;
  max-width: 34em;
}

.note {
  font-size: var(--t-sm);
  color: var(--fg-3);
  line-height: 1.9;
}
.note a { color: var(--gold); border-bottom: 1px solid var(--gold-a); }

.gold { color: var(--gold); }

/* ===== 04 LAYOUT ===== */
.wrap { width: min(100% - var(--pad) * 2, var(--maxw)); margin-inline: auto; }
.wrap-wide { width: min(100% - var(--pad) * 2, var(--maxw-wide)); margin-inline: auto; }

.section {
  position: relative;
  padding-block: var(--sec-y);
  overflow-x: clip;
}
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.section--alt { background: var(--bg-2); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ===== 05 BUTTONS ===== */
.btn {
  --btn-fg: var(--fg);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.9rem;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--btn-fg);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform 0.4s var(--ease); }
.btn:hover svg { transform: translateX(5px); }

.btn-gold {
  --btn-fg: #0b0b0d;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
}
.btn-gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }

.btn-ghost { --btn-fg: var(--fg); border-color: rgba(255, 255, 255, 0.22); }
.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }

/* text link with sweeping rule */
.tlink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.35rem;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color 0.3s var(--ease);
}
.tlink svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.tlink:hover { color: var(--gold-hi); }
.tlink:hover svg { transform: translateX(6px); }

/* ===== 06 HEADER / NAV ===== */
.progress {
  position: fixed; top: 0; left: 0; z-index: 1200;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-hi));
  transform: scaleX(0); transform-origin: left;
}

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 1100;
  height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-inline: clamp(1rem, 4vw, 3rem);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), height 0.45s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Before it sticks the bar is transparent over the hero photo. This scrim keeps
   the whole header legible over any image, and fades out once the solid bar takes over. */
.hdr::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 11, 13, 0.62), rgba(11, 11, 13, 0));
  transition: opacity 0.45s var(--ease);
}
.hdr.is-stuck::before { opacity: 0; }

.hdr.is-stuck {
  background: rgba(11, 11, 13, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line-soft);
}

.brand { display: block; flex: none; line-height: 0; }
.brand img {
  height: clamp(32px, 2.6vw, 38px);
  width: auto;
  /* the header is transparent over the hero photo before it sticks — this keeps
     the white lockup readable whatever image sits behind it */
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6));
  transition: opacity 0.3s var(--ease);
}
.brand:hover img { opacity: 0.75; }
.brand--footer img { height: clamp(40px, 3.6vw, 50px); }

.nav { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.6rem); }
.nav > a, .nav-trigger {
  position: relative;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  padding: 0.5rem 0;
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}
.nav > a::after, .nav-trigger::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav > a:hover, .nav-trigger:hover, .nav > a.is-active { color: var(--fg); }
.nav > a:hover::after, .nav-trigger:hover::after, .nav > a.is-active::after {
  transform: scaleX(1); transform-origin: left;
}
.nav > a.is-active { color: var(--gold); }

.nav-drop { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 0.35rem; background: none; }
.nav-trigger svg { width: 12px; height: 12px; transition: transform 0.35s var(--ease); }
.nav-drop:hover .nav-trigger svg { transform: rotate(180deg); }
.nav-drop.is-active .nav-trigger { color: var(--gold); }
.nav-menu {
  position: absolute; top: calc(100% + 0.9rem); left: 50%;
  translate: -50% 0;
  min-width: 220px;
  background: rgba(16, 16, 20, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav-menu a {
  display: block; padding: 0.6rem 0.9rem;
  font-size: 0.8rem; color: var(--fg-2);
  border-left: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-menu a:hover { color: var(--gold); border-left-color: var(--gold); background: rgba(255, 255, 255, 0.03); }

/* persistent phone link — only where the nav has room to breathe */
.nav-tel {
  display: none;
  align-items: center; gap: 0.5rem;
  padding-left: 0.9rem;
  margin-left: 0.35rem;
  border-left: 1px solid var(--line-soft);
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.nav-tel svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.nav-tel span {
  display: block;
  font-family: var(--f-display); font-size: 1.02rem;
  letter-spacing: 0.05em; line-height: 1.05;
}
.nav-tel small {
  display: block;
  font-family: var(--f-body); font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.04em; color: var(--fg-2);
  margin-top: 0.15rem;
}
.nav-tel:hover { color: var(--gold); }
@media (min-width: 1120px) { .nav-tel { display: inline-flex; } }

.nav-cta {
  padding: 0.7rem 1.25rem !important;
  background: var(--gold);
  color: #0b0b0d !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background 0.3s var(--ease);
}
.nav-cta::after { display: none; }
.nav-cta:hover, .nav-cta[aria-current] { background: var(--gold-hi); }

.burger {
  display: none;
  width: 44px; height: 44px;
  position: relative; flex: none;
  border: 1px solid var(--line);
}
.burger span {
  position: absolute; left: 12px; width: 20px; height: 1.5px;
  background: var(--fg);
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 1050;
  background: var(--bg);
  padding: calc(var(--hdr-h) + 2rem) var(--pad) 3rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer-list { display: flex; flex-direction: column; }
.drawer-list > a, .drawer-sub-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.05rem;
  color: var(--fg);
  width: 100%;
  text-align: left;
}
.drawer-list > a small, .drawer-sub-trigger small {
  font-family: var(--f-display);
  font-size: 0.6rem; letter-spacing: 0.24em;
  color: var(--fg-3); text-transform: uppercase;
}
.drawer-sub-trigger svg { width: 14px; height: 14px; color: var(--gold); transition: transform 0.35s var(--ease); }
.drawer-sub.is-open .drawer-sub-trigger svg { transform: rotate(180deg); }
.drawer-sub-list {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.drawer-sub.is-open .drawer-sub-list { grid-template-rows: 1fr; }
.drawer-sub-list > div { overflow: hidden; }
.drawer-sub-list a {
  display: block; padding: 0.75rem 0 0.75rem 1.1rem;
  font-size: 0.9rem; color: var(--fg-2);
  border-left: 1px solid var(--line);
}
.drawer-sub-list a:hover { color: var(--gold); }
.drawer-foot { margin-top: 2.5rem; display: grid; gap: 1rem; }
.drawer-tel {
  font-family: var(--f-display); font-size: 2rem; color: var(--gold); letter-spacing: 0.04em;
}

/* ===== 07 HERO ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  /* bottom padding reserves the lane for the centred scroll cue */
  padding: calc(var(--hdr-h) + 2rem) var(--pad) clamp(5rem, 9vh, 7.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: -8% 0; z-index: -3; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(11, 11, 13, 0.78) 0%, rgba(11, 11, 13, 0.46) 40%, rgba(11, 11, 13, 0.94) 100%),
    /* soft scrim under the centred lockup so the logo and copy stay legible */
    radial-gradient(62% 48% at 50% 44%, rgba(11, 11, 13, 0.62) 0%, rgba(11, 11, 13, 0) 100%),
    radial-gradient(115% 85% at 50% 42%, rgba(11, 11, 13, 0) 38%, rgba(11, 11, 13, 0.72) 100%);
}
.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

.hero-inner {
  width: min(100%, 880px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-eyebrow { margin-bottom: clamp(1rem, 2.4vw, 1.7rem); }
.hero-eyebrow::after {
  content: ''; width: 26px; height: 1px; background: var(--gold); opacity: 0.6;
}

/* Brand lockup. The source PNG is dark silver artwork on transparency, so it is
   inverted to read as bright silver against the dark hero. The artwork also sits
   inside ~12% top / ~5% bottom of empty pixels; the negative margins claw that
   dead space back so the mark reads larger without eating vertical space. */
.hero-logo {
  --logo-w: clamp(300px, 46vw, 660px);
  width: 100%;
  margin-bottom: clamp(1.1rem, 2.6vw, 1.9rem);
}
.hero-logo img {
  width: var(--logo-w); /* global img max-width:100% keeps it inside narrow viewports */
  height: auto;
  margin-inline: auto;
  margin-block: calc(var(--logo-w) * -0.052) calc(var(--logo-w) * -0.022);
  filter: invert(1) drop-shadow(0 8px 34px rgba(0, 0, 0, 0.6));
}

.hero-title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: clamp(1.45rem, 0.95rem + 2.3vw, 3rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--fg);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--gold-hi), var(--gold) 45%, var(--gold-dk));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead {
  margin-top: clamp(1rem, 2.2vw, 1.6rem);
  max-width: 32em;
  font-size: var(--t-h3);
  color: var(--fg);
  opacity: 0.86;
  line-height: 2;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.75);
  font-family: var(--f-serif);
}
.hero-lead > span {
  font-size: var(--t-lg);
}
@media screen and (max-width: 782px) {
  .hero-lead {
    font-size: var(--t-lg);
  }
  .hero-lead > span {
    font-size: 14px;
  }
}
.hero-lead span { display: inline-block; }
.hero-actions {
  margin-top: clamp(1.6rem, 3.4vw, 2.6rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
}

/* Centred scroll cue, anchored to the bottom of the hero. Hidden on touch
   widths where the fixed action bar owns that strip of screen. */
.hero-scroll {
  position: absolute; left: 50%; bottom: clamp(1.4rem, 3vh, 2.5rem); z-index: 2;
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  font-family: var(--f-display); font-size: var(--t-micro);
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-3);
  transition: color 0.3s var(--ease);
}
.hero-scroll:hover { color: var(--gold); }
.hero-scroll i {
  display: block; width: 1px; height: clamp(38px, 6vh, 60px);
  background: var(--line); position: relative; overflow: hidden;
}
.hero-scroll i::after {
  content: ''; position: absolute; inset: 0; background: var(--gold);
  animation: sweepY 2.4s var(--ease) infinite;
}
@keyframes sweepY { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ===== 07b PAGE HERO ===== */
.phero {
  position: relative;
  min-height: clamp(360px, 52vh, 560px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--hdr-h) + 4rem) var(--pad) 2.5rem;
  overflow: hidden;
  isolation: isolate;
}
.phero-media { position: absolute; inset: -6% 0; z-index: -3; will-change: transform; }
.phero-media img { width: 100%; height: 100%; object-fit: cover; }
.phero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgba(11, 11, 13, 0.85) 0%, rgba(11, 11, 13, 0.5) 45%, rgba(11, 11, 13, 0.96) 100%);
}
.phero-inner { width: min(100%, var(--maxw-wide)); margin-inline: auto; }
.phero-en {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  line-height: 0.85;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 180, 106, 0.55);
}
.phero-title {
  margin-top: 0.6rem;
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  letter-spacing: 0.12em;
  color: var(--fg);
}
.phero-lead { margin-top: 1rem; max-width: 60ch; color: var(--fg-2); }

.crumb {
  width: min(100% - var(--pad) * 2, var(--maxw-wide));
  margin: 0 auto;
  padding-block: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-display);
}
.crumb a { transition: color 0.25s var(--ease); }
.crumb a:hover { color: var(--gold); }
.crumb span { opacity: 0.4; }
.crumb [aria-current] { color: var(--gold); }

/* sticky in-page nav (menu / long pricing pages) */
.subnav {
  position: sticky; top: var(--hdr-h); z-index: 800;
  background: rgba(11, 11, 13, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav ul {
  display: flex; gap: 0.35rem;
  width: min(100% - var(--pad) * 2, var(--maxw-wide));
  margin-inline: auto;
  padding-block: 0.6rem;
}
.subnav a {
  display: block; white-space: nowrap;
  font-size: var(--t-sm); letter-spacing: 0.04em;
  padding: 0.55rem 1.1rem;
  color: var(--fg-3);
  border: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.subnav a:hover { color: var(--gold); border-color: var(--line); }

/* ===== 08 SECTION HEAD ===== */
.sec-head {
  position: relative;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  z-index: 1;
}
.sec-head[data-ghost]::before {
  content: attr(data-ghost);
  position: absolute;
  left: -0.06em; top: 0;
  translate: 0 -46%;
  z-index: -1;
  font-family: var(--f-display);
  font-size: var(--t-mega);
  line-height: 0.8;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.038);
  pointer-events: none; user-select: none;
}
.sec-head--center { text-align: center; }
.sec-head--center[data-ghost]::before { left: 50%; translate: -50% -46%; }
.sec-head--center .eyebrow::before { display: none; }

.sec-idx {
  font-family: var(--f-display);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.6rem;
}
.sec-en {
  font-family: var(--f-display);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.sec-title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: var(--fg);
}
.sec-lead { margin-top: 1.2rem; max-width: 42em; color: var(--fg-2); }
.sec-head--center .sec-lead { margin-inline: auto; }

.sec-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}

/* ===== 09 SERVICES ROWS ===== */
.svc-list { border-top: 1px solid var(--line); }

.svc {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.svc:nth-child(even) .svc-media { order: 2; }

.svc-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
}
.svc-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.45) contrast(1.05);
  transform: scale(1.02);
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.svc:hover .svc-media img { transform: scale(1.07); filter: none; }
.svc-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 13, 0) 45%, rgba(11, 11, 13, 0.55));
}

.svc-num {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: 0; z-index: 2;
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 180, 106, 0.28);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.5s var(--ease);
}
.svc:hover .svc-num { -webkit-text-stroke-color: rgba(217, 180, 106, 0.6); }

.svc-en {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color 0.4s var(--ease);
}
.svc:hover .svc-en { color: var(--gold); }
.svc-jp {
  margin-top: 0.5rem;
  font-family: var(--f-serif); font-weight: 700;
  font-size: var(--t-h3);
  letter-spacing: 0.08em;
  color: var(--fg);
}
.svc-desc { margin-top: 1.1rem; max-width: 30em; }
.svc-tags {
  margin-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.svc-tags li {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--fg-2);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.svc-go { margin-top: 1.8rem; display: inline-flex; }

/* ===== 10 FEATURE GRID (hairline) ===== */
.hair-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.hair-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hair-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hair-grid--2 { grid-template-columns: repeat(2, 1fr); }

.hair-cell {
  position: relative;
  background: var(--bg);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  overflow: hidden;
  transition: background 0.5s var(--ease);
}
.hair-cell::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.hair-cell:hover { background: var(--surface); }
.hair-cell:hover::before { transform: scaleX(1); }

.cell-n {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 180, 106, 0.4);
  margin-bottom: 1.1rem;
}
.cell-icon {
  width: 56px; height: 56px; margin-bottom: 1.1rem;
  color: var(--gold);
}
.cell-icon svg, .cell-icon img { width: 100%; height: 100%; object-fit: contain; }
.cell-title {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.08em;
  color: var(--fg);
  margin-bottom: 0.3rem;
}
.cell-en {
  font-family: var(--f-display);
  font-size: var(--t-micro); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.9rem;
}
.cell-text { font-size: var(--t-sm); line-height: 1.95; color: var(--fg-2); }

/* ===== 11 WORKS RAIL ===== */
.rail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.rail-ctrl { display: flex; align-items: center; gap: 1.5rem; }
.rail-count { font-family: var(--f-display); font-size: 0.95rem; letter-spacing: 0.2em; color: var(--fg-3); }
.rail-count b { color: var(--gold); font-weight: 400; }
.rail-btns { display: flex; gap: 0.6rem; }
.rail-btn {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--fg-2);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.rail-btn svg { width: 19px; height: 19px; }
.rail-btn:hover:not(:disabled) { color: #0b0b0d; background: var(--gold); border-color: var(--gold); }
.rail-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.rail {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
  padding-inline: var(--pad);
  margin-inline: calc(var(--pad) * -1);
  padding-bottom: 0.5rem;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.rail-item {
  position: relative;
  flex: 0 0 clamp(280px, 34vw, 460px);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--surface);
  isolation: isolate;
}
.rail-item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform 0.9s var(--ease);
}
.rail-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 13, 0.15) 0%, rgba(11, 11, 13, 0.35) 45%, rgba(11, 11, 13, 0.95) 100%);
}
.rail-item:hover img { transform: scale(1.09); }

.rail-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1.2rem, 2.5vw, 2rem);
}
.rail-tag {
  display: inline-block;
  font-family: var(--f-display); font-size: var(--t-micro);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(217, 180, 106, 0.4);
  padding: 0.3rem 0.7rem;
  margin-bottom: 0.9rem;
}
.rail-title {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 1.15rem; line-height: 1.55; letter-spacing: 0.05em;
  color: var(--fg);
}
.rail-text { margin-top: 0.6rem; font-size: var(--t-sm); color: var(--fg-2); }
.rail-n {
  position: absolute; top: 1rem; right: 1.2rem; z-index: 2;
  font-family: var(--f-display); font-size: 2.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}
.rail-bar { height: 2px; background: var(--line); margin-top: 1.75rem; overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: 25%; background: var(--gold); transform-origin: left; }

/* ===== 12 MARQUEE ===== */
.marquee {
  --speed: 42s;
  position: relative;
  display: flex; overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: clamp(1rem, 2vw, 1.6rem);
  background: var(--bg-2);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; flex: none; align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  padding-right: clamp(2rem, 5vw, 4.5rem);
  animation: marquee var(--speed) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee--rev .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-100%); } }

.marquee-item {
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.marquee-item::after { content: '·'; margin-left: clamp(2rem, 5vw, 4.5rem); color: var(--gold); }
.marquee:hover .marquee-item { color: var(--fg-2); }

/* ===== 13 SPLIT ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.split--reverse .split-media { order: 2; }
.split-media { position: relative; isolation: isolate; }
.split-media-inner {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface);
}
.split-media-inner img { width: 100%; height: 100%; object-fit: cover; }
/* offset frame peeking out from behind the image */
.split-media::after {
  content: ''; position: absolute; z-index: 0;
  inset: clamp(0.8rem, 2vw, 1.6rem) calc(clamp(0.8rem, 2vw, 1.6rem) * -1) calc(clamp(0.8rem, 2vw, 1.6rem) * -1) clamp(0.8rem, 2vw, 1.6rem);
  border: 1px solid var(--gold-a);
}
.split-body p + p { margin-top: 1.2rem; }

/* ===== 14 STAT BAND ===== */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.stat { background: var(--bg); padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem); }
.stat-v {
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  letter-spacing: 0.08em; color: var(--gold);
}
.stat-l {
  margin-top: 0.35rem;
  font-family: var(--f-display); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3);
}

/* ===== 15 PRICE TABLE ===== */
.ptable-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  scrollbar-width: thin;
}
.ptable-wrap::-webkit-scrollbar { height: 6px; }
.ptable-wrap::-webkit-scrollbar-thumb { background: var(--line); }
.ptable-wrap::-webkit-scrollbar-track { background: transparent; }

.ptable { min-width: 640px; font-size: var(--t-sm); }
.ptable th, .ptable td {
  padding: 0.95rem 1.1rem;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.ptable thead th {
  font-family: var(--f-display);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--surface-2);
  border-bottom-color: var(--gold-a);
}
.ptable th:first-child, .ptable td:first-child {
  position: sticky; left: 0; z-index: 1;
  text-align: left;
  white-space: normal;
  min-width: 190px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  color: var(--fg);
  font-weight: 400;
}
.ptable thead th:first-child { background: var(--surface-2); color: var(--gold); }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr { transition: background 0.25s var(--ease); }
.ptable tbody tr:hover, .ptable tbody tr:hover td:first-child { background: var(--surface-2); }
.ptable td { font-variant-numeric: tabular-nums; color: var(--fg-2); }

.scroll-hint {
  display: none;
  margin-top: 0.7rem;
  font-size: var(--t-micro); letter-spacing: 0.14em; color: var(--fg-3);
}

/* price list (side menu) */
.plist { display: grid; gap: 0.15rem; }
.plist li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--t-sm);
}
.plist .label { color: var(--fg-2); }
.plist .price {
  font-family: var(--f-display);
  font-size: 1.05rem; letter-spacing: 0.04em;
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badge {
  display: inline-block; margin-top: 1rem;
  font-size: var(--t-micro); letter-spacing: 0.1em;
  color: var(--gold);
  border: 1px solid var(--gold-a);
  background: rgba(217, 180, 106, 0.06);
  padding: 0.35rem 0.8rem;
}

/* service detail block */
.sdetail { border-top: 1px solid var(--line); padding-block: clamp(2rem, 4vw, 3.5rem); }
.sdetail-head { display: flex; align-items: baseline; gap: 1.25rem; margin-bottom: 1.5rem; }
.sdetail-n {
  font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(217, 180, 106, 0.45);
  flex: none;
}
.sdetail-en {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.1;
  text-transform: uppercase; color: var(--fg);
}
.sdetail-jp {
  font-family: var(--f-serif); font-weight: 700;
  font-size: var(--t-base); letter-spacing: 0.08em; color: var(--gold);
  margin-top: 0.3rem;
}
.sdetail-body { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.sdetail-body--full { grid-template-columns: 1fr; }
.sdetail-list { margin-top: 1.1rem; display: grid; gap: 0.5rem; }
.sdetail-list li {
  position: relative; padding-left: 1.1rem;
  font-size: var(--t-sm); color: var(--fg-2);
}
.sdetail-list li::before {
  content: ''; position: absolute; left: 0; top: 0.85em;
  width: 6px; height: 1px; background: var(--gold);
}

/* ===== 16 FLOW / STEPS ===== */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.flow-step { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.4rem); position: relative; }
.flow-step-n {
  font-family: var(--f-display); font-size: var(--t-micro);
  letter-spacing: 0.24em; color: var(--gold); margin-bottom: 1rem;
}
.flow-step-ico { width: 34px; height: 34px; color: var(--gold); margin-bottom: 1rem; opacity: 0.85; }
.flow-step-ico svg { width: 100%; height: 100%; }
.flow-step h4 {
  font-family: var(--f-serif); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.07em; color: var(--fg); margin-bottom: 0.5rem;
}
.flow-step p { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.9; }

/* ===== 17 DEF TABLE / ACCESS ===== */
.dl { border-top: 1px solid var(--line); }
.dl-row {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  padding: 1.15rem 0.25rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease);
}
.dl-row:hover { background: var(--surface); }
.dl-row dt {
  font-family: var(--f-display);
  font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); padding-top: 0.35rem;
}
.dl-row dd { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.95; }
.dl-row dd a { color: var(--fg); border-bottom: 1px solid var(--gold-a); }
.dl-row dd a:hover { color: var(--gold); }

.map {
  position: relative; aspect-ratio: 21 / 9; min-height: 300px;
  border: 1px solid var(--line); overflow: hidden; background: var(--surface);
}
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.86); }

/* ===== 18 GREETING ===== */
.greet { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.greet-portrait { position: relative; border: 1px solid var(--line); background: var(--surface); aspect-ratio: 3 / 4; overflow: hidden; }
.greet-portrait img { width: 100%; height: 100%; object-fit: cover; }
.greet-name { margin-top: 1.2rem; }
.greet-name-jp { font-family: var(--f-serif); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.12em; color: var(--fg); }
.greet-name-en { font-family: var(--f-display); font-size: var(--t-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-top: 0.3rem; }
.greet-role { font-size: var(--t-sm); color: var(--fg-3); margin-top: 0.2rem; }
.greet-quote {
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.6; letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 1.75rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
}
.greet-text p + p { margin-top: 1.15rem; }

/* ===== 19 CARDS / FILTER ===== */
.filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filter-btn {
  font-size: var(--t-sm); letter-spacing: 0.06em;
  padding: 0.6rem 1.35rem;
  border: 1px solid var(--line);
  color: var(--fg-2);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.filter-btn:hover { color: var(--fg); border-color: var(--fg-3); }
.filter-btn.is-active { background: var(--gold); border-color: var(--gold); color: #0b0b0d; font-weight: 500; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.cards--4 { grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.card:hover { border-color: rgba(217, 180, 106, 0.45); transform: translateY(-4px); }
.card.is-hidden { display: none; }
.card-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.8s var(--ease);
}
.card:hover .card-thumb img { transform: scale(1.08); }
.card-body { padding: clamp(1.2rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  font-family: var(--f-display); font-size: var(--t-micro);
  letter-spacing: 0.18em; color: var(--fg-3);
  margin-bottom: 0.85rem;
}
.tag {
  font-family: var(--f-display); font-size: var(--t-micro);
  letter-spacing: 0.16em; color: var(--gold);
  border: 1px solid var(--gold-a); padding: 0.2rem 0.6rem;
}
.card-title {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 1.02rem; line-height: 1.65; letter-spacing: 0.04em;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.card:hover .card-title { color: var(--gold); }
.card-text { margin-top: 0.7rem; font-size: var(--t-sm); color: var(--fg-2); line-height: 1.9; }
.card-price {
  margin-top: auto; padding-top: 1.1rem;
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.03em;
  color: var(--gold);
}
.card-price small { font-family: var(--f-body); font-size: var(--t-micro); color: var(--fg-3); margin-left: 0.4rem; letter-spacing: 0.05em; }

.pager { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pager a, .pager span {
  min-width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 0.9rem; letter-spacing: 0.1em;
  border: 1px solid var(--line); color: var(--fg-2);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.pager a:hover { color: #0b0b0d; background: var(--gold); border-color: var(--gold); }
.pager .is-current { background: var(--gold); border-color: var(--gold); color: #0b0b0d; }
.pager .dots { border: 0; color: var(--fg-3); }

/* ===== 20 ARTICLE / FORM ===== */
.article { width: min(100% - var(--pad) * 2, 820px); margin-inline: auto; }
.article-head { padding-bottom: 2rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
.article-meta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.2rem; font-family: var(--f-display); font-size: var(--t-micro); letter-spacing: 0.18em; color: var(--fg-3); }
.article-title {
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.55; letter-spacing: 0.04em;
  color: var(--fg);
}
.article-body { font-size: var(--t-base); line-height: 2.1; color: var(--fg-2); }
.article-body h2 {
  font-family: var(--f-serif); font-weight: 700;
  font-size: var(--t-h3); letter-spacing: 0.08em; color: var(--fg);
  margin: 2.75rem 0 1.1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
}
.article-body p + p { margin-top: 1.2rem; }
.article-body img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 2rem 0; border: 1px solid var(--line); }

.postnav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.postnav a { font-size: var(--t-sm); color: var(--fg-3); display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.3s var(--ease); }
.postnav a:hover { color: var(--gold); }
.postnav svg { width: 14px; height: 14px; }

.form-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.form-panel { background: var(--surface); border: 1px solid var(--line); padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.form-panel h3 {
  font-family: var(--f-display); font-size: 1.2rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.75rem;
}
.field { margin-bottom: 1.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field label {
  display: block; margin-bottom: 0.5rem;
  font-size: var(--t-sm); color: var(--fg-2); letter-spacing: 0.04em;
}
.req { color: var(--gold); font-size: var(--t-micro); margin-left: 0.4rem; letter-spacing: 0.1em; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: var(--t-sm);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { min-height: 170px; resize: vertical; line-height: 1.9; }
.field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9b46a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 15px; padding-right: 2.6rem; }
.field input::placeholder, .field textarea::placeholder { color: #55534e; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: var(--surface-2); }
.form-msg { margin-top: 1rem; font-size: var(--t-sm); color: var(--gold); min-height: 1.5em; }

.social { display: flex; gap: 0.75rem; }
.social a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--fg-2);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.social a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-3px); }
.social svg { width: 20px; height: 20px; }

/* ===== 21 CTA / FOOTER ===== */
.cta {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: 'CONTACT';
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
  font-family: var(--f-display); font-size: var(--t-mega); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
  white-space: nowrap; pointer-events: none;
}
.cta-tel {
  display: inline-block; margin-top: 1.75rem;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 7vw, 4.75rem); line-height: 1; letter-spacing: 0.03em;
  color: var(--fg);
  transition: color 0.35s var(--ease);
}
.cta-tel:hover { color: var(--gold); }
.cta-hours { margin-top: 0.7rem; font-size: var(--t-sm); color: var(--fg-3); letter-spacing: 0.08em; }
.cta-actions { margin-top: 2.25rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
.cta .social { justify-content: center; margin-top: 2.5rem; }

footer.ftr { background: var(--bg); border-top: 1px solid var(--line); }
.ftr-word {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 12vw, 11rem); line-height: 0.85;
  text-align: center; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  user-select: none; pointer-events: none;
  overflow: hidden;
}
.ftr-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.ftr-brand .brand { margin-bottom: 1.25rem; }
.ftr-brand p { font-size: var(--t-sm); color: var(--fg-3); line-height: 2; margin-bottom: 1.5rem; }
.ftr h4 {
  font-family: var(--f-display);
  font-size: var(--t-micro); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem;
}
.ftr-nav li { margin-bottom: 0.6rem; }
.ftr-nav a {
  font-size: var(--t-sm); color: var(--fg-3);
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.ftr-nav a:hover { color: var(--gold); padding-left: 5px; }
.ftr-info p { font-size: var(--t-sm); color: var(--fg-3); line-height: 1.95; margin-bottom: 1rem; }
.ftr-info a { color: var(--fg-2); }
.ftr-info a:hover { color: var(--gold); }
.ftr-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-micro); letter-spacing: 0.1em; color: var(--fg-3);
}

/* ===== 22 UTIL ===== */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 900;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(16, 16, 20, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--fg-2);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s, color 0.3s, border-color 0.3s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--gold); border-color: var(--gold); }
.to-top svg { width: 18px; height: 18px; }

/* mobile sticky action bar */
.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 950;
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(11, 11, 13, 0.94);
  backdrop-filter: blur(12px);
}
.actionbar a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.06em;
}
.actionbar svg { width: 17px; height: 17px; }
.actionbar .ab-tel { color: var(--fg); border-right: 1px solid var(--line); }
.actionbar .ab-contact { background: var(--gold); color: #0b0b0d; font-weight: 700; }

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Wipe variant. The clip MUST sit on a child, never on the observed element:
   a clip-path on the target itself collapses its intersection rect to zero, so
   IntersectionObserver never fires and the element stays hidden forever. */
.reveal[data-reveal="mask"] {
  transform: none;
  transition: opacity 0.6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal[data-reveal="mask"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal[data-reveal="mask"].is-in > * { clip-path: inset(0 0 0 0); }

/* ===== 23 RESPONSIVE ===== */
@media (max-width: 1180px) {
  .nav { gap: 0.85rem; }
  .nav > a, .nav-trigger { font-size: 0.76rem; }
}

@media (max-width: 1024px) {
  .nav, .nav-drop { display: none; }
  .burger { display: block; }
  .hair-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .dl-row { grid-template-columns: 160px 1fr; gap: 1rem; }
  .sdetail-body { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .greet { grid-template-columns: 220px 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --hdr-h: 64px; }
  body { padding-bottom: 56px; }
  .actionbar { display: flex; }
  .to-top { bottom: calc(56px + 1rem); }

  .split, .svc { grid-template-columns: 1fr; }
  .split--reverse .split-media, .svc:nth-child(even) .svc-media { order: 0; }
  .split-media-inner { aspect-ratio: 16 / 10; }
  .svc-media { aspect-ratio: 16 / 10; }
  .svc-num { font-size: clamp(3rem, 14vw, 5rem); top: auto; bottom: 100%; }
  .svc { padding-block: 2.5rem; }

  /* the fixed action bar covers this strip, and a scroll hint is noise on touch */
  .hero-scroll { display: none; }
  .hero { padding-bottom: clamp(2rem, 5vh, 3.5rem); }

  /* the action bar duplicates the contact CTA on phones — drop it from the hero
     and promote the menu link to primary so the two offer different routes */
  .hero-cta-contact { display: none; }
  .hero-cta-menu {
    --btn-fg: #0b0b0d;
    background: var(--gold);
    border-color: var(--gold);
    font-weight: 700;
  }
  .hero-cta-menu:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: #0b0b0d; }
  /* deliberate tap target — not full-bleed, so it stays distinct from the action bar */
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: min(100%, 320px); }

  .greet { grid-template-columns: 1fr; }
  .greet-portrait { max-width: 220px; }
  .stats { grid-template-columns: 1fr; }
  .rail-item { flex-basis: min(78vw, 340px); }
  .scroll-hint { display: block; }
}

@media (max-width: 640px) {
  .hair-grid--4, .hair-grid--3, .hair-grid--2 { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .ftr-top { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .dl-row { grid-template-columns: 1fr; gap: 0.35rem; padding-block: 1rem; }
  .sec-head[data-ghost]::before { font-size: clamp(3rem, 22vw, 6rem); }
  /* keep the hero eyebrow on one line at phone widths */
  .hero-eyebrow { letter-spacing: 0.2em; }
  .hero-eyebrow::before, .hero-eyebrow::after { display: none; }
  .btn { width: 100%; justify-content: center; }
  .cta-actions .btn { width: auto; }
  .postnav { justify-content: center; }
}

/* ===== 24 MOTION PREFERENCES ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; clip-path: none; }
  .marquee-track { animation: none; }
  .hero-media, .phero-media { transform: none !important; }
}

@media print {
  .hdr, .drawer, .to-top, .actionbar, .progress, .marquee, .cta { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =============================================================
   25 WORDPRESS
   -------------------------------------------------------------
   静的サイトには存在しなかった、WordPress 固有の要素だけをここに置く。
   デザイントークンは 01 TOKENS のものをそのまま使い、値は直書きしない。
   ============================================================= */

/* --- 管理バーぶんだけ固定要素を下げる --- */
.admin-bar .progress,
.admin-bar .hdr,
.admin-bar .drawer { top: 32px; }
.admin-bar .drawer { height: calc(100% - 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .progress,
  .admin-bar .hdr,
  .admin-bar .drawer { top: 46px; }
  .admin-bar .drawer { height: calc(100% - 46px); }
}

/* --- キーボード／タッチでのドロップダウン開閉（CSS の hover を補う） --- */
.nav-drop.is-open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-drop.is-open .nav-trigger svg { transform: rotate(180deg); }

/* --- エディター（本文）由来のマークアップ --- */
.article-body h3 {
  font-family: var(--f-serif); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: 0.06em; color: var(--fg);
  margin: 2.25rem 0 0.9rem;
}
.article-body h4 { font-weight: 700; color: var(--fg); margin: 1.75rem 0 0.6rem; }
.article-body ul,
.article-body ol { margin: 1.2rem 0 1.2rem 1.4rem; }
.article-body li { margin-bottom: 0.55rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li::marker { color: var(--gold); }
.article-body a { color: var(--gold); border-bottom: 1px solid var(--gold-a); }
.article-body a:hover { border-bottom-color: var(--gold); }
.article-body strong { color: var(--fg); font-weight: 700; }
.article-body blockquote {
  margin: 2rem 0; padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--gold); background: var(--surface);
  color: var(--fg-2);
}
.article-body blockquote p + p { margin-top: 0.9rem; }
.article-body figure { margin: 2rem 0; }
.article-body figure img { margin: 0; }
.article-body figcaption,
.article-body .wp-caption-text {
  margin-top: 0.6rem; font-size: var(--t-sm); color: var(--fg-3); text-align: center;
}
.article-body hr { height: 1px; margin: 2.5rem 0; background: var(--line); border: 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: var(--t-sm); }
.article-body th,
.article-body td { padding: 0.75rem 1rem; border: 1px solid var(--line); text-align: left; }
.article-body th { background: var(--surface); color: var(--fg); }
.article-body pre {
  margin: 2rem 0; padding: 1.25rem; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--line); font-size: var(--t-sm);
}
.article-body code { font-size: 0.9em; color: var(--gold-hi); }
.article-body iframe,
.article-body video { max-width: 100%; }
/* 記事内の画像はエディターで挿入した比率を尊重する（16/9 の固定は先頭画像だけの想定） */
.article-body figure img,
.article-body img.size-full { aspect-ratio: auto; height: auto; }

/* 配置クラス */
.article-body .alignleft { float: left; margin: 0.4rem 1.75rem 1.25rem 0; max-width: 50%; }
.article-body .alignright { float: right; margin: 0.4rem 0 1.25rem 1.75rem; max-width: 50%; }
.article-body .aligncenter { display: block; margin-inline: auto; }
.article-body .alignwide { width: min(100vw - var(--pad) * 2, 1100px); margin-inline: calc(50% - min(50vw - var(--pad), 550px)); max-width: none; }
.article-body .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.article-body::after { content: ''; display: block; clear: both; }
@media (max-width: 640px) {
  .article-body .alignleft,
  .article-body .alignright { float: none; margin-inline: 0; max-width: 100%; }
}

/* --- 空状態 --- */
.empty {
  padding: clamp(3rem, 8vw, 6rem) var(--pad);
  border: 1px solid var(--line); background: var(--surface);
  text-align: center; color: var(--fg-2);
}
.empty p + p { margin-top: 1rem; }

/* --- 検索フォーム --- */
.searchform { display: flex; gap: 0.6rem; max-width: 460px; margin-inline: auto; }
.searchform input[type="search"] {
  flex: 1; padding: 0.9rem 1rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--fg);
  font-family: var(--f-body); font-size: var(--t-base);
}
.searchform input[type="search"]:focus { outline: none; border-color: var(--gold); }
.searchform button {
  padding: 0.9rem 1.4rem; background: var(--gold); color: #0b0b0d;
  border: 0; font-weight: 700; font-size: var(--t-sm); cursor: pointer;
}

/* --- お問い合わせフォームの状態表示 --- */
.form-msg.is-error { color: #ff8f8f; }
.form-errors {
  margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 143, 143, 0.4); background: rgba(255, 143, 143, 0.08);
  color: #ffb4b4; font-size: var(--t-sm);
}
.form-errors ul { margin-top: 0.5rem; margin-left: 1.1rem; list-style: disc; }
.form-done {
  padding: 1.25rem 1.5rem; margin-bottom: 1.75rem;
  border: 1px solid var(--gold-a); background: var(--gold-a); color: var(--gold-hi);
  font-size: var(--t-sm); line-height: 1.9;
}
.field .err { border-color: #ff8f8f; }
/* ハニーポットは目に見えず、スクリーンリーダーにも読ませない */
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 入力 → 確認 → 完了 のステップ表示 --- */
.form-steps {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.75rem; padding: 0; list-style: none;
  font-family: var(--f-display); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
}
.form-steps li { display: flex; align-items: center; gap: 0.5rem; }
.form-steps li + li::before { content: ''; width: 18px; height: 1px; background: var(--line); }
.form-steps li[aria-current="step"] { color: var(--gold); }

/* --- 確認画面の案内（エラーでも完了でもない、中立の帯） --- */
.form-notice {
  padding: 1rem 1.25rem; margin-bottom: 1.75rem;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--fg-2); font-size: var(--t-sm); line-height: 1.9;
}

/* --- 入力内容の確認リスト（確認画面・サンクスページ共用） --- */
.form-review { border-top: 1px solid var(--line); margin-bottom: 1.75rem; }
.form-review .review-row {
  display: grid; grid-template-columns: 12em 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.form-review dt {
  font-size: var(--t-sm); font-weight: 700; color: var(--fg-2);
  letter-spacing: 0.04em;
}
.form-review dd {
  font-size: var(--t-sm); color: var(--fg); line-height: 1.9;
  /* 長いメールアドレスや URL でも桁を溢れさせない */
  overflow-wrap: anywhere;
}
.form-review dd.is-empty { color: var(--fg-3); }
@media (max-width: 640px) {
  .form-review .review-row { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* --- 確認画面・サンクスページのボタン列 --- */
.form-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.form-actions .btn { flex: 1 1 auto; justify-content: center; }

/* --- サンクスページ --- */
.form-panel--thanks { max-width: 780px; margin-inline: auto; }
.thanks-tel { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.thanks-tel .cta-tel { font-size: clamp(1.6rem, 4vw, 2.25rem); }

/* --- 埋め込みを入れたカード --- */
/* 埋め込みは Instagram 側の iframe で高さが動的に決まる。カードの
   3:4 の枠に押し込むと切れるので、埋め込みのときだけ枠を外す。 */
.card--embed .card-embed { padding: 0; }
.card--embed .card-embed .instagram-media {
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
/*
 * 読み込み前（.ig-embed-pending）と、読み込みに失敗したとき（blockquote のまま）
 * の見た目。埋め込みは画面に近づいてから処理されるので、先に高さを持たせて
 * 表示された瞬間のガタつきを抑える。
 */
.card--embed .ig-embed-pending,
.card--embed blockquote.instagram-media {
  display: block; min-height: 420px;
  padding: 1.25rem; background: var(--surface); font-size: var(--t-sm);
}
.card--embed .ig-embed-pending a,
.card--embed blockquote.instagram-media a { color: var(--gold); }


/* --- ラベル直後の電話番号 --- */
/* .eyebrow は罫線とテキストを横に並べるため inline-flex。直後に .cta-tel
   （inline-block）を置くと同じ行に流れ込み、小さいラベルと大きな番号が
   ベースラインで並んでしまう。縦に積みたいので block にする。
   CTA セクションでは両者が別の親に入っていて隣接しないため、影響しない。 */
.eyebrow + .cta-tel { display: block; }

/* --- ページャー（WordPress の paginate_links 出力） --- */
/* inline-flex は上の .pager a, .pager span の grid/place-items を上書きするので、
   flex 側の中央揃えをここで指定し直す（flex では justify-items が効かない）。 */
.pager .page-numbers { display: inline-flex; justify-content: center; align-items: center; }
.pager .prev,
.pager .next { letter-spacing: 0.08em; }

/* --- 添付ファイル／404 など --- */
.plain-body { width: min(100% - var(--pad) * 2, 820px); margin-inline: auto; }

/* =============================================================
   26 LIGHT PAGES
   -------------------------------------------------------------
   「私たちについて」「会社概要」「お問い合わせ（＋完了）」だけを
   白基調にするための上書き。body.gaen-light が付いたときだけ効く
   （クラスは inc/setup.php の gaen_light_body_class()）。

   やり方は #main のトークンを差し替えるだけ。カスタムプロパティは
   継承するので、01 TOKENS を読んでいるコンポーネントは何も書かずに
   明るくなる。ここに個別ルールが並んでいるのは、01〜24 の中で
   「背景は暗い」と決め打ちして色を直書きしている箇所の後始末。

   ヘッダー・ドロワー・フッター・アクションバーは #main の外なので
   ダークのまま。白抜きのロゴがそのまま使え、サイト全体の一体感も保てる。
   ============================================================= */

.gaen-light #main {
  /* surfaces — 寒色寄りのニュートラルで、清潔・実直な印象に寄せる */
  --bg:         #ffffff;
  --bg-2:       #f4f6f9;
  --surface:    #ffffff;
  --surface-2:  #eceff4;
  --line:       #dde2ea;
  --line-soft:  rgba(20, 24, 31, 0.06);

  /* ink — 補助テキストまで白地で 4.5:1 を満たす濃さにしてある。
     ダークのときの --fg-3 (#7a7871) をそのまま持ってくると 3.85:1 で足りない */
  --fg:         #14181f;
  --fg-2:       #48515f;
  --fg-3:       #626b78;

  /* accent — 白地で読める濃さの金（白に対して 5.15:1）。
     塗りつぶしに使う明るい金は下の .btn-gold で戻す */
  --gold:       #8a681c;
  --gold-hi:    #6f5314;
  --gold-dk:    #574010;
  --gold-a:     rgba(138, 104, 28, 0.16);

  background: var(--bg);
  color: var(--fg-2);
}

/* ページ見出しは写真の上に乗るので、ここだけダークのトークンに戻す。
   .phero::before の暗いグラデーションは 07 で直書きされていて、
   トークンを差し替えても明るくならないため。

   値は 27 CONTRAST で持ち上げたあとのものに揃える。01 TOKENS の
   元の値のままにすると、同じ見出しでも白基調のページだけ暗くなる。 */
.gaen-light .phero:not(.phero--plain) {
  --fg:   #f9f7f3;
  --fg-2: #d0cdc6;
  --fg-3: #b5b2aa;
  --gold: #d9b46a;
}

/* --- 05 BUTTONS --- */
/* 金ボタンは「塗り」なので、白地でも明るい金のまま濃い文字を乗せる */
.gaen-light #main .btn-gold {
  --btn-fg: #14181f;
  background: #d9b46a;
  border-color: #d9b46a;
}
.gaen-light #main .btn-gold:hover { background: #c9a052; border-color: #c9a052; }
/* 白抜き前提の枠線（rgba(255,255,255,0.22)）は白地で消えるので引き直す */
.gaen-light #main .btn-ghost { border-color: var(--line); }
.gaen-light #main .btn-ghost:hover { color: var(--gold); border-color: var(--gold); }

/* --- 08 SECTION HEAD / 21 CTA --- */
/* 背後の巨大な白抜き文字。白地では見えないので暗いインクに置き換える */
.gaen-light #main .sec-head[data-ghost]::before { -webkit-text-stroke-color: rgba(20, 24, 31, 0.05); }
.gaen-light #main .cta::before { -webkit-text-stroke-color: rgba(20, 24, 31, 0.05); }

/* --- 10 FEATURE GRID --- */
/* 連番の白抜き数字。薄い金のままだと白地に沈む */
.gaen-light #main .cell-n { -webkit-text-stroke-color: rgba(138, 104, 28, 0.45); }

/* --- サブナビ（会社概要のページ内リンク） --- */
.gaen-light #main .subnav { background: rgba(255, 255, 255, 0.92); }

/* --- 17 ACCESS --- */
/* 地図はダーク用に反転させてある。白地では元の Google マップの色に戻す */
.gaen-light #main .map iframe { filter: none; }

/* --- 20 FORM / 25 の状態表示 --- */
/* 明るい文字色は白地で読めないので、地と文字を反転させる */
.gaen-light #main .form-done {
  border-color: rgba(30, 120, 80, 0.28);
  background: rgba(30, 120, 80, 0.07);
  color: #1c6b4a;
}
.gaen-light #main .form-errors {
  border-color: rgba(190, 60, 60, 0.3);
  background: rgba(190, 60, 60, 0.06);
  color: #a52f2f;
}
.gaen-light #main .form-notice { background: var(--surface-2); color: var(--fg-2); }
.gaen-light #main .field input::placeholder,
.gaen-light #main .field textarea::placeholder { color: #9aa3af; }
/* 入力欄は白のままだと枠しか見えないので、ごく薄い地を敷いて位置を分かりやすくする。
   background のショートハンドを使うと select の矢印（background-image）の
   repeat / position / size まで初期値に戻って矢印が敷き詰められるので、
   ここは必ず background-color で当てる。 */
.gaen-light #main .field input,
.gaen-light #main .field select,
.gaen-light #main .field textarea { background-color: var(--surface-2); }
.gaen-light #main .field input:focus,
.gaen-light #main .field select:focus,
.gaen-light #main .field textarea:focus { background-color: var(--bg); }
/* 矢印アイコンが data URI で金色に焼き込んであるので、濃い方に差し替える */
.gaen-light #main .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a681c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* --- 影 --- */
/* ダークでは境界を線だけで作っていたが、白地では面が浮かないので
   パネルにだけ極薄い影を足して、フォームの領域を分かりやすくする */
.gaen-light #main .form-panel {
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 12px 32px rgba(20, 24, 31, 0.06);
}


/* 目には出さないが読み上げには残す */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- 施工事例カード --- */
/*
 * グリッドの子要素は既定で行の高さまで引き伸ばされる（align-items: stretch）。
 * そのままだと1枚のキャプションを開いたときに、同じ行の他のカードまで
 * 一緒に伸びて下に余白ができる。施工事例だけ start にして、各カードが
 * 自分の高さを持つようにする。畳んだ状態では全カードが同じ高さなので
 * 見た目は変わらない。
 */
.cards--works { align-items: start; }
/*
 * 写真 → 日付・カテゴリー → 車種 → キャプション → Instagram リンク、の順。
 * .card は <a> 前提で書かれているが、こちらは中にリンクとボタンを持つので
 * <article>。カード全体の hover 演出は写真側だけに残す。
 */
.card--work { cursor: default; display: flex; flex-direction: column; }
.card--work:hover { transform: none; }
.card--work .card-thumb { position: relative; display: block; }
.card--work .card-thumb img { aspect-ratio: 3 / 4; }
/* 写真はリンク。押せることが伝わるよう、hover でだけ拡大する */
a.card-thumb:hover img { transform: scale(1.06); }
.card--work .card-body { display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }

/* 右上の Instagram アイコン＝別タブで開く合図 */
.card-ig {
  position: absolute; right: 0.75rem; top: 0.75rem; z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: var(--fg);
  background: rgba(11, 11, 13, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card-ig svg { width: 17px; height: 17px; }
a.card-thumb:hover .card-ig { color: var(--gold); border-color: var(--gold); }

/* 商品カードの「外部リンクで開く」合図。.card-ig と同じ座組みで見た目を揃える */
.card-ext {
  position: absolute; right: 0.75rem; top: 0.75rem; z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: var(--fg);
  background: rgba(11, 11, 13, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.card-ext svg { width: 16px; height: 16px; transform: rotate(-45deg); }
a.card:hover .card-ext { color: var(--gold); border-color: var(--gold); transform: translate(2px, -2px); }

/*
 * リンク先 URL が未入力の商品カード。押しても何も起きないので、
 * 押せそうに見える動き（浮き上がり・写真の拡大・見出しの金色）を止める。
 */
.card--static:hover { transform: none; border-color: var(--line); }
.card--static:hover .card-thumb img { transform: none; }
.card--static:hover .card-title { color: inherit; }

/* 車種・施工メニュー */
.card-spec { display: grid; gap: 0.25rem; font-size: var(--t-sm); }
.card-spec > div { display: grid; grid-template-columns: 3.5em 1fr; gap: 0.6rem; }
.card-spec dt { color: var(--fg-3); }
.card-spec dd { color: var(--fg); }

/*
 * キャプション。既定は 6 行で伏せる。
 * 改行を残したいので pre-line、行数の制限は -webkit-line-clamp。
 * 開いたときは clamp を外すだけなので、閉じ直しても文字は欠けない。
 */
.card-caption { position: relative; }
.card-caption-text {
  font-size: var(--t-sm); line-height: 1.9; color: var(--fg-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden;
}
.card-caption.is-open .card-caption-text { -webkit-line-clamp: unset; overflow: visible; }
/* 伏せているあいだは下端をぼかして、続きがあることを示す */
.card-caption:not(.is-open)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 1.9em; height: 3.2em;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.section--alt .card-caption:not(.is-open)::after { background: linear-gradient(180deg, transparent, var(--bg-2)); }
/*
 * 伏せる必要がない長さのときは、ぼかしも出さない。
 * ぼかしは「まだ続きがある」合図なので、全文が見えているのに掛かると
 * 最後の行だけがぼかしの下からはみ出したように見える。
 * 伏せているかどうかは高さを測らないと分からないので、判定は JS が行い
 * （[data-caption] の処理）、短ければ .is-short を付ける。
 */
.card-caption.is-short::after { content: none; }
.card-more {
  margin-top: 0.4rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-body); font-size: var(--t-sm); letter-spacing: 0.04em;
  color: var(--gold);
  transition: color 0.25s var(--ease);
}
.card-more:hover { color: var(--gold-hi); }

.card-link { margin-top: auto; align-self: flex-start; }

/* 目には出さないが読み上げには残す */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .card-caption-text { -webkit-line-clamp: 4; }
}

/* --- SNS アイコン（ブランド配色） --- */
/*
 * 20 の .social a:hover は color を金に変える。Instagram は塗りが固定色なので
 * 影響を受けないが、TikTok は本体を currentColor で描いていて金に染まってしまう。
 * ブランドマークとしては誤りなので、ホバーでは枠と持ち上がりだけを変え、
 * マークの色は動かさない。
 */
.social a:hover .social-mark { color: var(--fg); }
.social-mark { width: 20px; height: 20px; }

/*
 * 施工事例カードの Instagram バッジ。地の丸を薄くして、
 * ブランドのグラデーションそのものが見えるようにする。
 */
.card-ig { background: rgba(11, 11, 13, 0.35); border-color: rgba(255, 255, 255, 0.3); }
.card-ig .social-mark { width: 19px; height: 19px; }
a.card-thumb:hover .card-ig { border-color: #fff; }

/* --- フッター下段の法的リンク --- */
/* 21 の .ftr-bottom は p を2つ並べる前提。片方をリンク＋地名の行に置き換えたので、
   間隔だけ整える。 */
.ftr-legal { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ftr-legal a { border-bottom: 1px solid transparent; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.ftr-legal a:hover { color: var(--gold); border-bottom-color: var(--gold-a); }

/* --- ヒーローの背景動画 --- */
/*
 * 写真の上に重ねる。読み込むまでは透明のままで、再生が始まってから
 * ふわりと出す（黒い矩形が一瞬出るのを避ける）。
 * 07 HERO の .hero::before のスクリムはこの上に乗るので、
 * ロゴとコピーの可読性は写真のときと変わらない。
 */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
}
.hero-video.is-playing { opacity: 1; }

/* 動画は 16:9。縦長の画面では左右が大きく切れるので、
   顔となる中央を残すために少し上寄りで見せる。 */
@media (max-aspect-ratio: 1/1) {
  .hero-video { object-position: center 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* --- PC でのヒーローロゴ --- */
/*
 * 07 HERO の --logo-w は clamp(300px, 46vw, 660px) で、広い画面では 660px で
 * 頭打ちになる。横に余白が余る PC では上限を引き上げる。
 *
 * ただしヒーローは 100svh の中央1カラムに eyebrow → ロゴ → コピー → CTA を積む。
 * ロゴを広げると高さも比例して増え、画面の低いノートPCでは CTA が下に押し出される。
 * そのため「幅が広く、かつ縦にも余裕がある」ときだけ大きくする。
 * 条件から外れた画面は元の指定のままで、既定より小さくはしない。
 */
@media (min-width: 1025px) and (min-height: 901px) {
  .hero-logo { --logo-w: clamp(660px, 50vw, 820px); }
}

/* --- スマートフォンでのヒーローロゴ --- */
/*
 * 既定の clamp(300px, 46vw, 660px) は、幅の狭い画面では 46vw が下限を下回るため
 * 300px に張り付く。375px の端末だと本文の幅は 335px あり、左右に 35px 余っていた。
 *
 * vw で追従させて余白を使い切る。global img の max-width:100% があるので、
 * 端末がさらに狭くても本文の幅からはみ出さない。
 * ロゴは横長（比 2.36）で高さの増分が小さく、縦は 180px 前後余っているため
 * ボタンを押し出す心配はない。
 */
@media (max-width: 640px) {
  .hero-logo { --logo-w: clamp(300px, 90vw, 420px); }
}

/* --- スマートフォンでのヒーローのボタン --- */
/*
 * 23 RESPONSIVE は 860px 以下で .hero-cta-menu を金の塗りに昇格させている
 * （問い合わせボタンを隠すぶん、主役を入れ替える意図）。
 * PC と同じアウトラインに揃えたいので、.btn-ghost の値へ戻す。
 * 打ち消しなので、背景・枠線・太さ・hover をひととおり指定する。
 */
@media (max-width: 860px) {
  .hero-cta-menu {
    --btn-fg: var(--fg);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.22);
    font-weight: 500;
  }
  .hero-cta-menu:hover {
    background: transparent;
    color: var(--gold);
    border-color: var(--gold);
  }
}


/* =============================================================
   27 CONTRAST
   -------------------------------------------------------------
   01 TOKENS の --fg-3 (#7a7871) は、地色 #0b0b0d に対して 4.45:1、
   一段明るい #101014 の帯（マーキー）に対して 4.30:1 で、
   本文サイズの下限 4.5:1 にわずかに届かない。補助テキスト・
   フッターのリンク・マーキーがまとめてこれを使っているため、
   トークン1つを持ち上げて全体で満たす。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

:root {
  /*
   * 本文が読みづらいという指摘を受けて、暗い面の文字を明るく振り直した。
   *
   * 数字の上では 4.5:1 を満たしていたが、本文に使う --fg-2 (#b6b3ab) が
   * 白からだいぶ離れたグレーで、和文の細い字画では沈んで見えていた。
   * --fg-3 はカード面（#1e1e25）で 4.19:1 と実際に足りていなかった。
   *
   * 暖色寄りの色みはブランドの持ち味なので保ったまま、明度だけ上げている。
   *
   *              変更前 → 変更後   地色 #0b0b0d でのコントラスト
   *   --fg      #f4f2ee → #f9f7f3   17.59 → 18.38
   *   --fg-2    #b6b3ab → #d0cdc6    9.39 → 12.39
   *   --fg-3    #828079 → #b5b2aa    4.98 →  9.28
   *
   * --fg-3 はその後さらに #a09d95 (7.26) から一段上げている。注記・
   * キャプション・フッターの本文など、小さい字で数が多いところを
   * まとめて受け持つトークンで、いちばん読みづらさが出やすいため。
   *
   * 上げすぎると --fg-2 と見分けが付かなくなり、三段の強弱が崩れる。
   * #b5b2aa は --fg-2 との比が 1.33 で、並べたときに差が分かる下限あたり
   * （#c4c1b9 まで上げると 1.13 になり、ほぼ同じ色に見える）。
   *
   * いちばん条件の悪いカード面（#1e1e25）でも --fg-3 が 7.82:1 になり、
   * 本文サイズの基準 4.5:1 に余裕をもって収まる。
   */
  --fg:   #f9f7f3;
  --fg-2: #d0cdc6;
  --fg-3: #b5b2aa;
}

/* パンくずの区切り「/」は薄くしてよいが、現在地のラベルは本文扱い。
   .crumb span が両方に当たっていて、金色の現在地まで 40% に落ちていた。 */
.crumb [aria-current] { opacity: 1; }

/* h2 のあとに h4 が来ると見出しの階層が飛ぶので h3 にした。
   見た目は 01〜24 側の h4 の指定をそのまま写す。 */
.ftr h3 {
  font-family: var(--f-display);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.flow-step h3 {
  font-family: var(--f-serif); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.07em; color: var(--fg); margin-bottom: 0.5rem;
}


/* =============================================================
   28 FLOW STEP
   -------------------------------------------------------------
   「ご利用の流れ」（about.php）の組み直し。

   元は Step 番号 → アイコン → 見出し → 本文 を等間隔で縦に積むだけで、
   ・アイコンが番号にも見出しにも属さない浮いた絵に見える
   ・6 点の絵で縦横比が違い、44px の contain では大きさが不揃いになる
   ・PNG の金が暗い地色向けの色で、白基調のこのページでは沈む
   という3点が重なっていた。

   アイコンを SVG（currentColor）に替えたうえで、
   ・丸い枠に入れて、絵の縦横比に関わらず同じ大きさの節に見せる
   ・枠と Step 番号を破線でつなぎ、工程が続いていくことを帯で示す
   ・帯の高さを固定して、6 枚の見出しの開始位置を揃える
   という形にした。丸枠は「工程の節」を表す形で、
   カード類の角ばった枠（.rail-btn など）とは意図的に変えている。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   25 にあった PNG 用の .flow-step-ico（44px と img への幅指定）は
   役目を終えたので削除した。
   ============================================================= */

.flow-step-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

/* 丸枠。絵の縦横比が違っても、ここで大きさが決まる。 */
.flow-step-ico {
  width: 58px; height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  opacity: 1;
  margin-bottom: 0;
}
.flow-step-ico svg { width: 28px; height: 28px; }

/* 工程が続くことを示す破線。線だけなので読み上げには出さない。 */
.flow-step-rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 0.75rem;
  background-image: linear-gradient(to right, var(--line) 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
}

.flow-step-head .flow-step-n { margin-bottom: 0; flex: none; }

/* 帯の下は見出しから始まる。24 側の h3 の余白はそのまま使う。 */
@media (max-width: 640px) {
  .flow-step-ico { width: 50px; height: 50px; }
  .flow-step-ico svg { width: 24px; height: 24px; }
}


/* =============================================================
   28 CONTACT FORM 7
   -------------------------------------------------------------
   お問い合わせフォームの中身を Contact Form 7 に載せ替えたときの
   後始末。フォームの見た目（.field / .field-row / .req / .btn）は
   20 ARTICLE / FORM のものをそのまま使えるよう、CF7 側の
   マークアップを「透明」にしてから、CF7 固有の部品だけを整える。

   CF7 は各入力を span.wpcf7-form-control-wrap で包むので、
   そのままだと .field input のレイアウトに割り込む。span を
   display:contents にして、包む前と同じ組みに戻している。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

/* 入力を包む span を無かったことにして、20 側の .field の指定に戻す。 */
.wpcf7-form-control-wrap { display: contents; }

/* CF7 が出す余白付きの p は使わない（.field が余白を持っている）。 */
.wpcf7-form p { margin: 0; }

/* 送信ボタンは 20 の .btn をそのまま当てているので、幅だけ整える。 */
.wpcf7-form .btn[type="submit"] { width: 100%; justify-content: center; }

/* 送信中のスピナー。CF7 の既定は白い丸で、暗い面では浮く。 */
.wpcf7-spinner { background-color: var(--gold-a); margin: 0 0 0 0.75rem; }
.wpcf7-spinner::before { background-color: var(--gold); }

/*
 * 項目ごとのエラー。CF7 の既定は赤字＋赤枠だが、地色が暗いので
 * 20 の .form-errors と同じ色（#ff8f8f 系）に合わせる。
 */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.5rem;
  color: #ff8f8f;
  font-size: var(--t-sm);
}
.field input.wpcf7-not-valid,
.field select.wpcf7-not-valid,
.field textarea.wpcf7-not-valid { border-color: #ff8f8f; }

/*
 * フォーム全体の結果表示。CF7 は種類ごとにクラスを変えるので、
 * 失敗系は .form-errors、成功系は .form-done の見た目に寄せる。
 */
.wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.9;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
  border-color: rgba(255, 143, 143, 0.4);
  background: rgba(255, 143, 143, 0.08);
  color: #ffb4b4;
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--gold-a);
  background: var(--gold-a);
  color: var(--gold-hi);
}

/* 確認パネル。入力画面と入れ替わりで出るので、上の余白は持たない。 */
.form-confirm { margin-top: 0; }

/* --- 白基調のページ側（26 LIGHT PAGES の後始末） --- */
/*
 * お問い合わせは body.gaen-light のページ。エラー文の #ff8f8f は
 * 白地に対して 2.4:1 しかなく本文として読めないので、濃い赤に置き換える。
 * 成功系は --gold（#8a681c）を拾うトークン任せで足りる。
 */
.gaen-light #main .wpcf7-not-valid-tip { color: #b32d2e; }
.gaen-light #main .field input.wpcf7-not-valid,
.gaen-light #main .field select.wpcf7-not-valid,
.gaen-light #main .field textarea.wpcf7-not-valid { border-color: #b32d2e; }
.gaen-light #main .wpcf7-form.invalid .wpcf7-response-output,
.gaen-light #main .wpcf7-form.unaccepted .wpcf7-response-output,
.gaen-light #main .wpcf7-form.payment-required .wpcf7-response-output,
.gaen-light #main .wpcf7-form.spam .wpcf7-response-output,
.gaen-light #main .wpcf7-form.failed .wpcf7-response-output,
.gaen-light #main .wpcf7-form.aborted .wpcf7-response-output {
  border-color: rgba(179, 45, 46, 0.35);
  background-color: rgba(179, 45, 46, 0.06);
  color: #b32d2e;
}


/* =============================================================
   29 COATING LINEUP
   -------------------------------------------------------------
   コーティングのメニューを「料金表だけ」から「製品の写真を見せて
   から料金表」に組み替えたときの追加。

   使っている画像はメーカーの配布素材で、いちばん小さいもので
   236px 幅しかない。引き伸ばすと粗がそのまま出るので、
   ・1 枚の表示幅は 320px まで（grid の minmax 上限）
   ・枠は 16:10 に固定して object-fit: contain で中に収める
   の 2 点で、拡大されないようにしている。

   contain にしているのは、素材の地色がまちまちなため。
   G'ZOX と LUMINUS は黒背景、GYEON は白背景の製品写真で、
   cover で切り抜くと絵柄も余白もばらばらに見える。共通の枠に
   収めて余白を surface 色で埋めると、並べたときに揃って見える。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

/*
 * ブランドのロゴ。見出し行の右端に置く。
 *
 * 高さを揃えるためだけの箱で、枠線や地色は持たせない。
 * 素材そのものに地色が入っているので、枠を重ねると二重の箱になる。
 */
.coat-logo {
  /*
   * 題名のすぐ隣に置く。右端に飛ばすと 1400px の画面では 900px 以上
   * 離れてしまい、どのブランドのロゴなのか結びついて見えない。
   *
   * 題名は英字と和文の2行なので、その中心に合わせる
   * （.sdetail-head は baseline 揃えで、そのままだと上にずれる）。
   */
  align-self: center;
  flex: none;
  display: flex;
  align-items: center;
}
/*
 * 高さを 80px で揃える。箱に収める形だと、縦長のロゴ（GYEON）は
 * 高さが足りず、横長のロゴは幅で頭打ちになって大きさが揃わない。
 * 高さを直に指定して幅を成り行きにすれば、比率が違っても揃う。
 *
 * ただし G'ZOX だけは横長のワードマーク（214×27）で、高さ 80px に
 * すると幅が 634px になり、題名の3倍近くを占めてしまう。
 * 幅の上限を置いて、そこで頭打ちにする（G'ZOX だけが効く）。
 *
 * 素材はどれも表示寸法より大きいので、引き伸ばしにはならない。
 */
.coat-logo img {
  height: 80px;
  width: auto;
  max-width: 240px;
  /* 幅で頭打ちになったとき、height と併さって縦に潰れるのを防ぐ。 */
  object-fit: contain;
  display: block;
}

/*
 * ページ内ナビから飛んだときの着地位置。
 * ヘッダー（74px）に加えて .subnav も貼り付いているので、
 * html の scroll-padding-top（ヘッダー分だけ）では見出しが隠れる。
 */
.sdetail[id^="coating-"] { scroll-margin-top: calc(var(--hdr-h) + 5.5rem); }

/*
 * 製品1つぶんの枠。写真ではなくカード全体を囲う。
 * 枠が写真に付いていると、素材の地色（GYEON の白など）と
 * 二重の箱に見えるが、カードを囲うぶんには素材の地色と衝突しない。
 * 見た目は 19 CARDS / FILTER の .card に合わせている。
 */
.coat-item {
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease);
}
.coat-item:hover { border-color: var(--gold-a); }

.coat-lineup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: 0;
  list-style: none;
}

/*
 * grid + place-items だと、img の max-height: 100% が aspect-ratio から
 * 導かれた高さに対して解決されず、縦長の素材（GYEON の製品写真など）が
 * 枠からはみ出して下端が切れる。flex にすると解決される。
 */
.coat-figure {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
/* width / height を指定しないのは、素材より大きく引き伸ばさないため。 */
.coat-figure img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

.coat-name {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 1rem; letter-spacing: 0.06em;
  color: var(--fg);
  margin-top: 1rem; margin-bottom: 0.35rem;
}
.coat-text { font-size: var(--t-sm); line-height: 1.9; color: var(--fg-2); }

/* --- 評価 --- */
/*
 * 項目名と評価を2列で並べる。項目名の幅を固定しているのは、
 * カードをまたいで星の左端を揃えるため。揃っていないと、
 * 同じ系統の製品を見比べるときに目が行き来する。
 */
.coat-spec {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
  /* 項目数が少ないカードで、余った高さを行間に配られないようにする。 */
  align-content: start;
}
.coat-spec-row {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  align-items: center;
  gap: 0.75rem;
}
.coat-spec dt {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.coat-spec dd { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.coat-spec-text { font-size: var(--t-sm); color: var(--fg-2); }

/*
 * 星は2枚重ね。下は枠線だけの星、上は金で塗った星を
 * width の割合で切って見せる。3.5 のような半端な値も崩れない。
 */
.stars {
  position: relative;
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--line);
  white-space: nowrap;
}
.stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--gold);
  white-space: nowrap;
}
.stars-num {
  font-family: var(--f-display);
  font-size: var(--t-micro);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
/*
 * 5 を超える評価（本番の「★★★★★+★」）の印。
 * 数値と同じ大きさだと「5」の飾りにしか見えず、最上位であることが
 * 伝わらなかった（Hi-MOHS VELLIS / MIYABI COAT）。印を一回り大きくし、
 * 数値ごと金にして他の 5 と見分けが付くようにする。
 * line-height: 0 は、大きくした印で行の高さを押し広げないため。
 */
.stars-plus {
  color: var(--gold);
  margin-left: 0.12em;
  font-size: 1.45em;
  font-weight: 700;
  line-height: 0;
  vertical-align: -0.04em;
}
.stars-num:has(.stars-plus) { color: var(--gold); }

/* 1カラムに落ちる幅では、枠いっぱいまで使わせる。 */
@media (max-width: 860px) {
  .coat-lineup { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .coat-logo img { height: 64px; }
}

/*
 * 評価はスマホでも「項目名｜星」の1行で並べる。いちばん長い項目名
 * （セルフクリーニング・新車コーティング）でも 7.5em の列に1行で収まり、
 * 320px 幅のカードでも星と数値まで入る。縦に積むと1製品で倍の高さになり、
 * 見比べにくかった。
 * 文字の値（施工時間など）が長いときは、値の側だけが折り返す。
 */

/*
 * 同じ系統の製品を見比べられるよう、カードの各段の高さを揃える。
 * 説明文の行数が違うと評価の行がずれるため。subgrid が無い環境では
 * 単に揃わないだけで、内容は同じように読める。
 */
@supports (grid-template-rows: subgrid) {
  .coat-item {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* 見出しが縦積みになる幅では、ロゴを左端に戻す。 */
/*
 * ロゴが見出しの幅を奪うと、日本語の副題が 1文字だけ折り返される。
 * 1カラムに落ちる幅からは、ロゴを見出しの下に回す。
 */
@media (max-width: 860px) {
  .sdetail-head { flex-wrap: wrap; }
  .coat-logo { margin-left: 0; order: 3; }
}


/* =============================================================
   30 COATING STORIES
   -------------------------------------------------------------
   製品ごとの紹介文と、メーカーの試験結果、他社との差別化。

   写真と星評価だけでは「何がいいのか」が伝わらないので、
   料金表に入る前にここで読ませる。並びは
   写真＋評価（見る）→ 紹介（分かる）→ 料金表（決める）。

   本文は読ませるものなので、1行の長さを 34em で止めている
   （料金表と同じ幅いっぱいに流すと目が戻れなくなる）。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

.coat-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  /* 罫線は製品カードとの区切り。間隔そのものは body の gap が持つ。 */
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.coat-story { max-width: 34em; }

.coat-story-head {
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.coat-story-name {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.07em;
  color: var(--fg);
  margin-bottom: 0.3rem;
}
.coat-story-lead {
  font-size: var(--t-base);
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.coat-story-meta { font-size: var(--t-micro); letter-spacing: 0.08em; color: var(--fg-3); }

/* メーカーの言い回しをそのまま出す英字見出し。 */
.coat-story-en {
  font-family: var(--f-display);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.coat-story-head2 {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 0.98rem; line-height: 1.75; letter-spacing: 0.05em;
  color: var(--fg);
  margin-bottom: 0.6rem;
}
.coat-story-body { font-size: var(--t-sm); line-height: 2; color: var(--fg-2); }

/* --- メーカー試験結果 --- */
.coat-tests {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.coat-tests-label {
  font-family: var(--f-display);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.coat-test + .coat-test { margin-top: 1.1rem; }
.coat-test h6 {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.05em;
  color: var(--fg);
  margin-bottom: 0.4rem;
}
.coat-test p { font-size: var(--t-sm); line-height: 2; color: var(--fg-2); max-width: 44em; }
.coat-tests .note { margin-top: 1rem; }

/* --- 他社との差別化 --- */
/*
 * 店の主張なので、料金表の並びからは切り離して目立たせる。
 * 左の金の罫線だけで区別し、面は塗らない（塗ると CTA と紛れる）。
 */
.coat-diff {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  padding-left: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: var(--surface);
}
.coat-diff-label {
  font-family: var(--f-display);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.coat-diff-lead {
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.85;
  color: var(--fg);
  margin-bottom: 0.75rem;
  max-width: 34em;
}
.coat-diff p { font-size: var(--t-sm); line-height: 2; color: var(--fg-2); max-width: 44em; }
.coat-diff .note { margin-top: 0.9rem; }


/* =============================================================
   31 COATING FIGURES
   -------------------------------------------------------------
   紹介文・2層構造の図・試験グラフ・メンテナンスの写真。

   素材はメーカーの配布画像で、幅は 383〜923px とまちまち。
   30 COATING STORIES の本文は 34em で止めているので、写真も
   同じ幅に収めて文章と左端を揃える。引き伸ばさないよう
   width は指定せず、max-width だけで抑えている。

   試験グラフは数字を読ませるものなので、本文より広く使う。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

/*
 * 枠を 21:9 に固定して、3つ並んだときに写真の下端が揃うようにする。
 * 素材の縦横比はばらばら（450×204 と 519×190 で高さが 40px 近く違い、
 * そのままだと下に続く見出しの高さもずれる）。
 *
 * 中身は max-width / max-height だけで抑えているので、素材より
 * 大きくは引き伸ばされない。余白は surface 色で埋まる。
 */
.coat-story-figure {
  /* 本文のあとに置くようになったので下余白は持たない（上は auto で寄せる）。 */
  margin: 0;
  aspect-ratio: 21 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.coat-story-figure img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

/* --- 2層構造の図 --- */
.coat-diagram {
  margin: 0;
  width: fit-content;
  max-width: min(34em, 100%);
}
.coat-diagram img {
  max-width: 100%; height: auto; display: block;
}
.coat-diagram figcaption {
  margin-top: 0.75rem;
  font-size: var(--t-sm);
  line-height: 1.9;
  color: var(--fg-3);
}

/* --- 試験グラフ --- */
/*
 * グラフは目盛りを読ませるので、素材の実寸までは大きく使う。
 * 地色が明るいグレーなので、枠を付けて紙面から浮かせる。
 */
.coat-test-figure {
  margin: 0.9rem 0 0;
  width: fit-content;
  max-width: min(560px, 100%);
  overflow: hidden;
}
.coat-test-figure img { max-width: 100%; height: auto; display: block; }

/* --- メンテナンスの写真 --- */
/* 元が 923×280 の帯。実寸までで止めて、拡大はしない。 */
.coat-maint-figure {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}
.coat-maint-figure img { max-width: 100%; height: auto; display: block; }


/* =============================================================
   32 PRICE TABLE — NARROW
   -------------------------------------------------------------
   狭い画面で料金表を横スクロールさせない。

   サイズ区分は SS〜XL の6列あり、メニュー名の列と合わせて7列。
   390px の画面に収めようとすると1列 50px ほどで、「¥105,600」が
   入らない。文字を小さくして詰めても読めないので、組みを変える。

   1行＝1枚のカードにして、メニュー名を見出し、サイズと価格を
   2列ずつの組にして並べる。6サイズなら3行に収まり、
   スクロールせずに全部見える。

   列数は表によって違う（サイズ7列・シート数4列・料金2列）ので、
   auto-fit で列数は成り行きに任せている。

   display を table から変えると表としての意味が落ちるため、
   PHP 側で role を明示してある（gaen_price_table）。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

@media (max-width: 640px) {
  /* 枠はカード側が持つので、外側の枠と横スクロールは外す。 */
  .ptable-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }
  .ptable { min-width: 0; width: 100%; }

  /* 列見出しは各セルの data-label に出るので、行ごと隠す。 */
  .ptable thead { display: none; }

  .ptable tbody { display: grid; gap: 0.9rem; }

  .ptable tbody tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }

  /*
   * 列数は表によって違う（サイズ6・シート数4・シート数3）。
   * 成り行きに任せると 6 が 4＋2 に割れて右端が空くので、
   * それぞれ割り切れる数を指定する。
   * :last-of-type を添えて「ちょうどその数」のときだけ効かせる。
   * 対応していないブラウザは上の auto-fit のまま（並びが揃わないだけ）。
   */
  .ptable tbody tr:has(td:nth-of-type(6):last-of-type) { grid-template-columns: repeat(3, 1fr); }
  .ptable tbody tr:has(td:nth-of-type(4):last-of-type) { grid-template-columns: repeat(2, 1fr); }
  .ptable tbody tr:has(td:nth-of-type(3):last-of-type) { grid-template-columns: repeat(3, 1fr); }

  /* メニュー名。カードの見出しとして横幅いっぱいに置く。 */
  .ptable tbody th[scope="row"] {
    grid-column: 1 / -1;
    position: static;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: var(--surface-2);
    border: 0;
    border-right: 0;
    color: var(--gold);
    font-size: var(--t-sm);
    letter-spacing: 0.04em;
  }

  /* サイズと価格の組。 */
  .ptable tbody td {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.5rem;
    background: var(--surface);
    border: 0;
    text-align: center;
    white-space: nowrap;
    color: var(--fg);
  }
  .ptable tbody td::before {
    content: attr(data-label);
    font-family: var(--f-display);
    font-size: var(--t-micro);
    letter-spacing: 0.16em;
    color: var(--gold);
  }
  /* 最終行の枠消しは、カードでは邪魔になるので戻す。 */
  .ptable tbody tr:last-child th,
  .ptable tbody tr:last-child td { border-bottom: 0; }

  /* 行ごとの hover は、指で触る画面では意味がないので止める。 */
  .ptable tbody tr:hover,
  .ptable tbody tr:hover td:first-child { background: var(--line); }

  /* 2列しかない表（メニュー名＋料金）は、値を1つだけ大きく見せる。 */
  .ptable tbody tr:has(td:only-of-type) td { text-align: left; padding-inline: 1rem; }

  /* もう横に流れないので、スクロールの案内は出さない。 */
  .scroll-hint { display: none; }
}


/* =============================================================
   33 SERVICE DETAIL — MEDIA
   -------------------------------------------------------------
   メニューを「説明してから料金表」から「施工写真を見せてから
   料金表」に組み替えたときの追加。室内クリーニングと洗車が使う。

   1メニューの組みは上下2段。
     上段  2列。片側が施工写真、もう片側が見出しと説明
     下段  料金表。列をまたいで全幅を使う

   料金表だけ全幅にしているのは、サイズが6区分あって幅が要るため。
   写真の隣に押し込むと、640px より広い画面でも横スクロールが出る。

   写真は左・右・左と入れ替える（.sdetail--flip）。同じ形が続くと
   目が滑るので、視線の起点を振って区切りを作る。

   枠線や地色は持たせていない。素材が「作業風景そのもの」なので、
   囲うと額縁に入った資料写真に見えてしまう。区切りは .sdetail が
   持っている上罫線で足りる。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

.sdetail--media {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.sdetail--media .sdetail-figure  { grid-area: 1 / 1; }
.sdetail--media .sdetail-copy    { grid-area: 1 / 2; }
.sdetail--media .sdetail-price   { grid-column: 1 / -1; }

/*
 * 単価が1つだけのメニュー（簡易トップスプレーコート）。
 * 料金の段は列をまたいだ全幅なので、そのまま置くと「料金」と金額が
 * 1000px 以上離れて並んでしまう。行長で止める。
 */
.plist--solo { max-width: 22em; }

/*
 * 説明は写真の高さの真ん中に置く。上端で揃えると、説明が1〜2文しかない
 * ぶん写真の下半分の横が空き、行き場のない余白が残る。
 * 写真より説明のほうが高くなる幅（見出しが折り返す手前）でも、
 * 中央に寄せておけば釣り合いは崩れない。
 */
.sdetail--media .sdetail-copy { align-self: center; }

/*
 * 写真を右に置く番。grid-area で入れ替えるので、読み上げの順は変わらない。
 * 広いほうの列も一緒に入れ替える。写真の側をいつも広く取らないと、
 * 左右で写真の大きさが変わって「揃っていない」ように見える。
 */
.sdetail--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.sdetail--flip .sdetail-figure { grid-area: 1 / 2; }
.sdetail--flip .sdetail-copy   { grid-area: 1 / 1; }

/*
 * 見出しを持たないメニュー（まるごとクリーニング）。
 * 説明が1文だけで、写真は4カットの組み写真。文字側に 1.12 も要らない
 * ぶんを写真に回して、1枚1枚が見える大きさにする。
 */
.sdetail--wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

/*
 * その組み写真だけ、PC では高さを 300px で止める。
 * 上段の帯（2.44:1）と下段3カットの2段組みで縦に伸びるので、
 * 幅なりに置くと1枚でメニュー1つぶんの高さを食ってしまう。
 *
 * 縦だけ詰めると絵が潰れるので、高さを上限にして幅は成り行きに
 * させる（1976x1289 なら 460x300 になる）。
 * 列も auto にして、余った幅は説明側に渡す。そうしないと
 * 写真と説明のあいだに行き場のない余白が残る。
 *
 * 積んだあと（1024px 以下）は写真が主役に戻るので、上限は掛けない。
 */
@media (min-width: 1025px) {
  .sdetail--wide { grid-template-columns: auto minmax(0, 1fr); }
  .sdetail--wide .sdetail-figure img {
    max-height: 300px;
    width: auto;
  }
}

/*
 * 見出しは写真と肩を揃えたい。.sdetail-head の下余白は
 * 「見出しの下にすぐ表が来る」前提の値なので、ここでは詰める。
 */
.sdetail--media .sdetail-head { margin-bottom: clamp(0.9rem, 2vw, 1.25rem); }

/*
 * 説明は 1〜2文しかない。1600px の画面で列いっぱいに伸ばすと
 * 1行が長くなりすぎるので、行長で止める。
 */
.sdetail-desc { max-width: 30em; }
.sdetail-copy .note  { margin-top: 0.9rem; max-width: 30em; }
.sdetail-copy .badge { margin-top: 1.1rem; }

/*
 * 施工写真。
 *
 * 素材は 1580〜2000px（表示幅の2倍で焼いてある）。どの画面幅でも列の
 * ほうが狭いので、実際には列いっぱいに収まる。width: fit-content は
 * 素材を入れ替えて小さいものが来たときの歯止めとして残してある
 * （.coat-diagram と同じ考え方）。
 */
.sdetail-figure {
  margin: 0;
  width: fit-content;
  max-width: 100%;
}
.sdetail-figure img { max-width: 100%; height: auto; display: block; }
.sdetail-figure figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-sm);
  line-height: 1.9;
  color: var(--fg-3);
}

/*
 * 1024px で積む。テーマの他の箇所（ナビがハンバーガーに変わる幅）と
 * 同じ境目に合わせてある。
 *
 * 860px まで2列を保たせると、861〜1024px で写真の列が 410px ほどしか
 * 取れず、主役のはずの写真がいちばん小さくなる。積んでしまえば
 * 段いっぱいに使えるので、そのほうが大きく見える。
 */
@media (max-width: 1024px) {
  /*
   * 1列に積む。写真が先に来るのは左右どちらの番でも同じなので、
   * grid-area の入れ替えはここで打ち消す。
   */
  .sdetail--media,
  .sdetail--flip,
  .sdetail--wide { grid-template-columns: 1fr; }
  .sdetail--media .sdetail-figure,
  .sdetail--media .sdetail-copy,
  .sdetail--flip .sdetail-figure,
  .sdetail--flip .sdetail-copy { grid-area: auto; }

  /* 積んだら上下の並びなので、中央に寄せる理由がなくなる。 */
  .sdetail--media .sdetail-copy { align-self: stretch; }

  /* 1列になれば列幅が行長になるので、上限は外してよい。 */
  .sdetail-desc, .sdetail-copy .note { max-width: none; }

  /*
   * 写真の幅はここでも fit-content のまま。素材のほうが段より大きいので、
   * 結果として段いっぱいに収まる。
   */
}


/* =============================================================
   34 SIDE MENU FIGURES
   -------------------------------------------------------------
   サイドメニューのパーツ別カードに施工写真を載せる。

   .hair-cell は 1px の罫線グリッドで、セルの中に余白を持っている。
   写真をその余白の内側に置くと額縁のように見えるので、
   左右いっぱいまで広げて（負のマージン）セルの上辺に接するようにした。

   枠の比率を 16:9 に固定しているのは、10枚を3列で並べたときに
   下に続く番号・見出しの位置を揃えるため。素材はすべて 713×370
   （ほぼ 16:8.3）なので、切り取られるのは上下わずかで済む。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

.sm-cell { display: flex; flex-direction: column; }

.sm-figure {
  /* セルのパディングを打ち消して、写真を上辺いっぱいに置く。 */
  margin: calc(clamp(1.6rem, 3vw, 2.6rem) * -1);
  margin-bottom: clamp(1.2rem, 2.5vw, 1.6rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.sm-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* 料金の一覧は下端に寄せて、カードの高さが違っても足並みを揃える。 */
.sm-cell .plist { margin-top: auto; }


/* =============================================================
   35 COATING — SERIES BODY
   -------------------------------------------------------------
   系統1つぶんの中身（.sdetail-body--full）の組み。

   もとは 1600px の段に、説明文も製品カードも図版も試験結果も
   同じ幅で流し込んでいた。そのため広い画面で次のようになっていた。

     ・説明文が1行 1600px になり、読み終えて目が戻れない
     ・製品カードは 320px で止めてあるので、3枚並べても右に
       580px の空きが残る
     ・紹介文が2つだけの系統（Hi-MOHS など）は、列が 780px まで
       広がる一方で中身は 34em で止まり、散らばって見える
     ・試験結果の囲みが 1600px あるのに、中の文章は 616px しかなく
       半分以上が空の箱になる

   読み物としての幅を 1180px で決めて、そこに全部の左右を揃える。
   料金表だけはサイズ6区分ぶんの幅が要るので全幅に戻す。

   縦の間隔も、各ブロックが持っていた margin-top をやめて
   ここの gap 一本にした。ブロックの出方は系統ごとに違う
   （図版や試験結果があるのは Hi-MOHS だけ）ので、
   個別の margin では組み合わせの数だけ間隔が変わってしまう。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

.sdetail-body--full {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  /*
   * 01〜24 の指定は 1fr。1fr には min-content の下限が付いてくるので、
   * 列が「いちばん縮まない中身」に合わせて広がる。ここでは料金表が
   * それで、狭い画面では段が 948px まで伸び、body の overflow-x: hidden に
   * 切り落とされていた（390px の画面で製品カードが画面外に出ていた）。
   * minmax(0, 1fr) にして下限を外し、列を親の幅で止める。
   * 表がはみ出すぶんは .ptable-wrap の横スクロールが受け持つ。
   */
  grid-template-columns: minmax(0, 1fr);
}

/*
 * 読み物の幅。料金表もここに合わせる。
 * 6区分の表は 1180px あれば横スクロールは出ないので、
 * 表だけ右に飛び出させる理由がない。左右が揃うほうが読みやすい。
 */
.sdetail-body--full > * { max-width: 1180px; }

/* 図版は自前の上限（34em）を持っているので、それを活かす。 */
.sdetail-body--full > .coat-diagram { max-width: min(34em, 100%); }

/*
 * 系統の説明。1180px でも和文の1行としては長い。
 * 30 COATING STORIES の本文（34em）より少し広い程度で止める。
 */
.coat-desc { max-width: 38em; }

/*
 * 見出しは中央揃えにして下に罫線を引く。メーカーの資料がこの形で、
 * 「見出し → 本文 → 図版」の区切りが一目で分かる。
 * 紹介文の見出し（.coat-story-head）も元から同じ罫線を持っている。
 */
.coat-test h6,
.coat-story-head {
  text-align: center;
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

/*
 * 紹介文も試験結果も、図版は本文のあと。
 * 下端に寄せておくと、横に並べたとき図版の上端が一列に揃う
 * （本文の長さは項目ごとに違うので、寄せないとばらばらになる）。
 */
.coat-story,
.coat-test { display: flex; flex-direction: column; }
.coat-story-body { margin-bottom: 1.1rem; }
.coat-story-figure,
.coat-test-figure { margin-top: auto; }
/*
 * 試験結果は本文とグラフのあいだを最低 16px 空ける。margin-top は下端
 * 揃えの auto が持っているので、余白は padding で取る（図に枠も地色も
 * 無いので、見た目は margin と同じ）。
 */
.coat-test-figure { padding-top: 16px; }

/*
 * 紹介文2つ＋共通の図の組み（Hi-MOHS）。
 * PC では「見出し2つ」の下に「図版3つ」を並べる。
 *
 *   ┌─────────────┬─────────────┐
 *   │  見出し・本文 │  見出し・本文 │   6列のうち3列ずつ
 *   ├───────┬───────┬───────────┤
 *   │ 写真1 │ 共通図 │   写真2    │   6列のうち2列ずつ
 *   └───────┴───────┴───────────┘
 *
 * 6列に敷いて、本文は3列ぶん・図版は2列ぶんを占めさせる。
 * .coat-story を display: contents にして、文章と図版を
 * それぞれ直接の升目として置けるようにしている。
 * 並べ替えは order。共通の図が2枚目の写真より前に来るよう、
 * 2つ目の紹介文の写真だけ後ろに送る。
 *
 * 積む幅（900px 未満）では contents を外すので、
 * 「文章 → 写真」が紹介文ごとにまとまったまま縦に並ぶ。
 */
@media (min-width: 900px) {
  .coat-stories--triptych {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
  }
  .coat-stories--triptych .coat-story { display: contents; }

  .coat-stories--triptych .coat-story-text { grid-column: span 3; order: 1; }
  .coat-stories--triptych .coat-story-figure,
  .coat-stories--triptych .coat-diagram { grid-column: span 2; order: 2; }
  .coat-stories--triptych .coat-story:nth-child(2) .coat-story-figure { order: 3; }

  /*
   * 3枚を同じ幅で見せたいので、21:9 の枠は使わない。
   * 素材はどれも 383〜386px 幅・比率 1.62 で揃っているため、
   * 枠を外しても3枚の高さは自然に揃う。
   * 列は最大でも 367px なので、width: 100% でも拡大にはならない。
   */
  .coat-stories--triptych .coat-story-figure {
    aspect-ratio: auto;
    display: block;
    overflow: visible;
    /*
     * 下寄せ（margin-top: auto）は、図版が本文の直後に続く組みのため
     * のもの。3枚を1列に並べるここでは上端を揃えたいので外す。
     */
    margin-top: 0;
  }
  .coat-stories--triptych .coat-story-figure img,
  .coat-stories--triptych .coat-diagram img {
    width: 100%; height: auto; max-height: none;
  }
  .coat-stories--triptych .coat-diagram { width: auto; max-width: none; }
}

/*
 * 積んだとき（900px 未満）の共通の図。
 *
 * 横に並べているあいだは「2つの紹介文に共通する図」だと位置で分かるが、
 * 縦に積むと2つ目の紹介文の写真の直後に続くので、その紹介文だけの
 * 図に見えてしまう。罫線で切って、ここから先は別の話だと示す。
 *
 * 罫線と余白は .coat-stories が製品カードとのあいだに引いているものと
 * 同じ値にして、節の中で区切りの見え方を揃える。
 */
@media (max-width: 899px) {
  .coat-stories--triptych .coat-diagram {
    /*
     * 640〜899px では紹介文が2列に並ぶ。そのままだと図が片方の列に
     * 入り、罫線も列の幅（段の半分）で切れて中途半端に見える。
     * 行をまたがせて、罫線を段いっぱいに引く。
     */
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line);
  }
  /* 図そのものと説明文は、伸ばさず行長で止める。 */
  .coat-stories--triptych .coat-diagram figcaption { max-width: min(34em, 100%); }
}

/*
 * 試験結果は2項目を横に並べる。縦積みだと、囲みの幅に対して
 * 本文もグラフも細く、半分以上が空の箱になっていた。
 * 紹介文が上で2列に並ぶので、そこと列が揃う利点もある。
 */
@media (min-width: 900px) {
  .coat-tests {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  /* 見出しラベルと注記は列をまたいで全幅。 */
  .coat-tests-label,
  .coat-tests .note { grid-column: 1 / -1; }
  .coat-test + .coat-test { margin-top: 0; }
}


/* =============================================================
   36 NEWS LIST
   -------------------------------------------------------------
   トップのお知らせを、3枚並べたカードから縦一覧に変える。
   1件＝1行で、左にサムネイル、右に日付・カテゴリー・題名・抜粋。

   マークアップは card-post.php のまま使い、並べ方だけ差し替える。
   一覧のためだけにテンプレートパーツを増やす必要はない。

   箱を積むのではなく罫線で区切るのは「一覧」に見せるため。
   面と枠を外すぶん、hover の合図は題名の色と写真の寄りが受け持つ
   （どちらも .card の既存の指定がそのまま効く）。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

/*
 * 下端の罫線は行ではなく枠が持つ。お知らせ一覧の絞り込みは
 * .is-hidden（display: none）で隠すので、:last-child に付けると
 * 隠れた行に罫線が乗って最後の行の下が抜ける。
 */
.cards--rows {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.cards--rows .card {
  flex-direction: row;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  padding-block: clamp(1rem, 2.2vw, 1.5rem);
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
}

/* 行なので持ち上げない。カードのときの演出は横一列だと落ち着かない。 */
.cards--rows .card:hover { transform: none; }

/* サムネイルが行の高さを決める。幅だけ決めて 16:10 は .card-thumb のまま。 */
.cards--rows .card-thumb {
  flex: none;
  width: clamp(112px, 24vw, 260px);
}

.cards--rows .card-body { padding: 0; flex: 1 1 auto; }

/*
 * 抜粋は2行で切る。記事ごとに行の高さが変わると一覧に見えない。
 * 題名が2行になることもあるので、そちらは切らずに伸ばす。
 */
.cards--rows .card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 640px) {
  /*
   * 狭い画面では抜粋を落として、日付・カテゴリー・題名の3点に絞る。
   * 抜粋まで出すと本文が5行になり、サムネイル（70px）に対して
   * 行が3倍の高さになって一覧の体裁が崩れる。
   * 題名も2行で切る。読み切るためではなく、選ぶための一覧なので。
   */
  .cards--rows .card-text { display: none; }
  .cards--rows .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}


/* =============================================================
   37 LINE CONTACT
   -------------------------------------------------------------
   お問い合わせページの「By LINE」。受け取り方が2つあるので両方出す。

     スマートフォン … ボタンを押せばそのまま友だち追加へ
     パソコン      … QR をスマートフォンで読む

   640px 以下では QR を出さない。読む側の端末で見ているので用がなく、
   縦に場所を取るだけになる。

   このページは白基調（26 LIGHT PAGES）なので、色はトークン経由にして
   両方の地色で成立させる。LINE の緑だけは公式の指定色をそのまま使う。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

.line-contact {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  flex-wrap: wrap;
}

/*
 * LINE の指定色（#06C755）。ブランドの色なのでトークンには寄せない。
 * 文字は白固定。白基調のページでも緑の上に乗るので反転しない。
 */
.btn-line {
  --btn-fg: #fff;
  background: #06c755;
  border-color: #06c755;
  font-weight: 700;
  flex: none;
}
.btn-line:hover { background: #05b34c; border-color: #05b34c; }

/*
 * 幅は QR に合わせて決め打ちする。成り行きにするとキャプションの
 * 1行の長さが図の幅になり、ボタンと並ばなくなる幅が出る（1280px）。
 */
.line-qr {
  margin: 0;
  flex: none;
  width: clamp(104px, 14vw, 132px);
  text-align: center;
}
.line-qr img {
  width: 100%;
  height: auto;
  display: block;
  /* 白い QR が白い紙面に溶けないよう、細い枠と余白で紙のように見せる。 */
  background: #fff;
  padding: 6px;
  border: 1px solid var(--line);
}
.line-qr figcaption {
  margin-top: 0.5rem;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

@media (max-width: 640px) {
  .line-qr { display: none; }
}


/* =============================================================
   38 SERVICE TAGS
   -------------------------------------------------------------
   トップのサービス一覧に並ぶタグ（「クイック洗車 ¥2,500〜」など）。

   既定は --t-micro（11.5px）で、すぐ上の説明文（16px）に対して
   小さすぎた。金額が入っていて読ませたい情報なので、注記ではなく
   本文の一段下＝--t-sm まで上げる。
   字が大きくなるぶん、余白も釣り合うよう広げる。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

.svc-tags li {
  font-size: var(--t-sm);
  padding: 0.55rem 1.05rem;
}


/* =============================================================
   39 HERO — TOUCH
   -------------------------------------------------------------
   スマホのヒーローまわりの後始末。もとは下端 56px を固定
   アクションバーが覆っていることへの対処が抜けていた。

   1. 高さ
      07 の 100svh はバーを勘定に入れていないので、写真も中身も
      下 56px がバーの裏に潜る。バーの上端までで打ち止めにする。

   2. スクロール誘導
      23 RESPONSIVE は同じ理由で 860px 以下の .hero-scroll を
      消していた。ヒーローが1画面に収まるようになったので、
      隠す理由がなくなる。出し直して、中身と重ならないよう
      下パディングで場所を確保する。

   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

@media (max-width: 860px) {
  .hero-scroll {
    display: flex;
    /* ヒーローの下端がバーの上端と揃うので、ここは素の余白でいい。 */
    bottom: 0.5rem;
    gap: 0.5rem;
    /* 指で触る的を広げる。見た目は変わらない。 */
    padding: 0.35rem 1rem;
  }

  /* 画面が低いので、線は PC より短くして場所を取らせない。 */
  .hero-scroll i { height: clamp(22px, 4vh, 34px); }

  .hero {
    /*
     * 07 の 100svh だと、下端 56px が固定アクションバーの下に
     * 潜って見えない。バーは不透明なので、ヒーローはその上端までで
     * 打ち止めにする。こうすると写真も中身も1画面にちょうど収まる。
     * 56px は 23 RESPONSIVE の body の下パディングと同じ値。
     */
    min-height: calc(100svh - 56px);
    /* 中央寄せの中身が誘導の下敷きにならないよう、その高さを確保する。 */
    padding-bottom: clamp(4.75rem, 9vh, 5.75rem);
  }
}

/*
 * 背の低い端末（iPhone SE など）。ヒーローの中身だけで 100svh を
 * 使い切るので、誘導に割ける高さがない。文字を落として線だけにする。
 * 読み上げは a の aria-label が持っているので、意味は失わない。
 */
@media (max-width: 860px) and (max-height: 700px) {
  .hero-scroll span { display: none; }
  .hero { padding-bottom: 2.75rem; }
}


/* =============================================================
   40 PAGE HERO — PLAIN
   -------------------------------------------------------------
   写真を敷かないページ見出し（gaen_page_hero の 'media' => false）。
   いまはお問い合わせだけが使う。読みに来るページではなく
   書きに来るページなので、1画面ぶんの写真を挟まず、フォームと
   電話番号まで最短で届かせる。

   07b の .phero は「暗い写真の上に白い字」を前提にしていて、
   地色・高さ・英字の見せ方がそのままでは通らない。ここで外す。

   26 LIGHT PAGES の .gaen-light .phero は :not(.phero--plain) に
   絞ってある。あれは写真の上に乗るときだけダークのトークンに
   戻す後始末で、写真が無いこの版には当てはまらないため。
   ============================================================= */

.phero--plain {
  /* 写真ぶんの背丈は要らない。中身の高さだけで足りる。 */
  min-height: 0;
  padding-block: calc(var(--hdr-h) + clamp(2.25rem, 5vw, 3.5rem)) clamp(1.25rem, 2.5vw, 1.75rem);
  background-color: var(--bg);
}

/* 写真を暗く沈めるグラデーション（07b で直書き）。敷くものが無い。 */
.phero--plain::before { content: none; }

/*
 * 英字は写真の上では透かし（8.5vw の袋文字）だが、白地に置くと
 * 金の輪郭だけが薄く伸びて読めない。節見出しの .sec-idx と
 * 同じ小さな金のラベルに戻す。
 */
.phero--plain .phero-en {
  font-size: var(--t-micro);
  line-height: 1.6;
  letter-spacing: 0.22em;
  color: var(--gold);
  -webkit-text-stroke: 0;
  margin-bottom: 0.2rem;
}

.phero--plain .phero-title { margin-top: 0; }

/*
 * ヘッダーは写真の上に透けて乗る前提で、スクロールするまで
 * 地色を持たない（07 HEADER）。白抜きの字が読めているのは
 * .hdr::before の暗いスクリムのおかげだが、あれは上から下へ
 * 薄れる grad なので、地が白いとナビの行では効かず、
 * 白地に白抜きで消える。

 * 写真が無いページでは透ける相手がそもそも居ない。
 * スクロール後（.is-stuck）と同じ、地色を敷いた状態で始める。
 *
 * :has() で拾うのは、'media' => false を使うページが増えても
 * 同じ一覧を2箇所で持たずに済むため。
 */
body:has(.phero--plain) .hdr {
  background: rgba(11, 11, 13, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line-soft);
}
body:has(.phero--plain) .hdr::before { opacity: 0; }


/* =============================================================
   41 COATING STRUCTURE
   -------------------------------------------------------------
   コーティング系統の「被膜の構造」。図と層ごとの説明を1つの囲みに
   まとめ、PC では左に図・右に層の積み重ねを並べる。
   （template-parts/coating-series.php の .coat-structure）

   層は上から トップ層 → ベース層 → 塗装面 と、実際の被膜と同じ順に
   積む。左の罫は同じ太さにそろえ、トップ層は金、ベース層は
   落ち着いた色にして上塗りと土台を色で見分ける。

   囲みの面と枠は 30 COATING STORIES の .coat-tests に揃え、
   「メーカー資料に基づく補足」という同じ扱いであることを示す。

   01〜24 は gaen4 のまま残す約束なので、ここで足す。
   ============================================================= */

.coat-structure {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.coat-structure-label {
  font-family: var(--f-display);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.coat-structure-title {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.06em;
  color: var(--fg);
  margin-bottom: 0.6rem;
}
.coat-structure-lead {
  font-size: var(--t-sm); line-height: 2; color: var(--fg-2);
  max-width: 38em;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.coat-structure-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* 図は素材の実寸（386px）を上限に、層の説明は残りを使う。 */
@media (min-width: 900px) {
  .coat-structure-grid {
    grid-template-columns: minmax(0, 386px) minmax(0, 1fr);
    align-items: center;
  }
}

.coat-structure-figure { margin: 0; }
.coat-structure-figure img {
  width: 100%; max-width: 386px; height: auto; display: block;
  border: 1px solid var(--line);
}
.coat-structure-figure figcaption {
  margin-top: 0.6rem;
  font-size: var(--t-micro); line-height: 1.8; letter-spacing: 0.04em;
  color: var(--fg-3);
}

/* --- 層の積み重ね --- */
.coat-layers { display: grid; gap: 6px; }
.coat-layer {
  padding: 1rem 1.1rem 1.05rem 1.25rem;
  background: var(--surface);
  border-left: 3px solid var(--gold);
}
/* 土台の層は罫の色を落とす（上塗りの金と区別する）。太さはトップ層と同じ。 */
.coat-layer--base {
  border-left-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}

.coat-layer-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 0.75rem; row-gap: 0.15rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.coat-layer-en {
  font-family: var(--f-display);
  font-size: var(--t-micro); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold);
}
.coat-layer-jp {
  font-family: var(--f-serif); font-weight: 700;
  font-size: 0.98rem; letter-spacing: 0.05em;
  color: var(--fg);
}
.coat-layer-note {
  margin-left: auto;
  font-size: var(--t-micro); letter-spacing: 0.08em;
  color: var(--fg-3);
}

.coat-layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
/* モデル名の列を固定幅にして、塗料の名前の書き出しを揃える。 */
.coat-layer-item {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  column-gap: 1rem;
  align-items: baseline;
}
.coat-layer-model {
  font-family: var(--f-display);
  font-size: var(--t-sm); letter-spacing: 0.1em;
  color: var(--fg);
}
.coat-layer-coat { font-size: var(--t-sm); line-height: 1.8; color: var(--fg); }
.coat-layer-desc {
  grid-column: 2;
  font-size: var(--t-micro); line-height: 1.8;
  color: var(--fg-3);
}
/* 全モデル共通の層はモデル名を持たないので、1列で流す。 */
.coat-layer-item--shared { grid-template-columns: minmax(0, 1fr); }
.coat-layer-item--shared .coat-layer-desc { grid-column: 1; }

/* 被膜の下にある塗装面。層ではないので面を塗らず、破線で地面だけ示す。 */
.coat-layers-substrate {
  margin-top: 2px;
  padding-top: 0.55rem;
  border-top: 2px dashed var(--line);
  text-align: center;
  font-size: var(--t-micro); letter-spacing: 0.3em;
  color: var(--fg-3);
}

/* 狭い画面ではモデル名を塗料名の上に積む。 */
@media (max-width: 640px) {
  .coat-layer-item { grid-template-columns: minmax(0, 1fr); row-gap: 0.1rem; }
  .coat-layer-desc { grid-column: 1; }
  .coat-layer-note { margin-left: 0; width: 100%; }
}


/* =============================================================
   42 LAYOUT ADJUSTMENTS
   -------------------------------------------------------------
   全ページ点検（2026年10月）で見つかった崩れの手当て。
   01〜24 は gaen4 のまま残す約束なので、ここで上書きする。
   ============================================================= */

/* --- 1. 罫線グリッドの空きマス ---------------------------------
   .hair-grid は親の地色（--line）を 1px の隙間から覗かせて罫線にしていた。
   最終行が埋まらないと（サイドメニューは10項目を3列）、空いたマスにも
   その地色が出て、灰色の箱が置かれたように見えていた。
   罫線は各セルの外周に引き、親は透明にする。埋まっているマスの見た目は
   変わらない（隙間 1px に両隣のセルの線が重なって 1px の罫になる）。 */
.hair-grid {
  background: transparent;
  border-color: transparent;
}
.hair-grid > .hair-cell { box-shadow: 0 0 0 1px var(--line); }

/* --- 1b. アクセスの地図（会社概要）---------------------------
   .map は aspect-ratio: 21/9 と min-height: 300px を併せ持つ（16 の指定）。
   幅が auto のままだと、最低の高さ 300px が比率を通して幅に伝わり、
   幅 700px 未満の画面では地図が常に 700px 幅になって右へはみ出していた
   （390px の画面で 330px）。幅を入れ物いっぱいに決めておけば、比率は
   高さの計算にしか使われない。狭い画面では高さが 300px のまま残る。 */
.map { width: 100%; }

/* --- 2. 製品が4つの系統（Other Lines）--------------------------
   カード幅を 320px 上限で並べると 1180px でも3枚までしか入らず、
   4つ目だけが次の行に取り残されていた。4つの系統は 4列 か 2列 で組み、
   3枚＋1枚にはしない。 */
.coat-lineup:has(> .coat-item:nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1279px) {
  .coat-lineup:has(> .coat-item:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 320px));
  }
}
@media (max-width: 560px) {
  .coat-lineup:has(> .coat-item:nth-child(4):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 3. 和文見出しの折り返し -----------------------------------
   語句の切れ目には inc/typography.php が <wbr> を入れている。
   keep-all でそれ以外の場所では折り返させず、切れ目の無い長い見出しだけ
   overflow-wrap: anywhere で従来どおりどこでも折る（はみ出させない）。 */
.sec-title,
.phero-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* --- 4. ページ内ナビの続き -------------------------------------
   スマホではページ内ナビが横にスクロールするが、右端の項目が途中で
   切れているだけで、続きがあることが分かりにくかった。
   見えている範囲の端を溶かして「まだ先がある」ことを示す。

   横スクロールは .subnav（07 の指定）ではなく中の ul に持たせる。
   スクロールする要素自身に mask を掛けると、中身が流れても mask は
   動かないので、常に「見えている端」が溶ける。.subnav に掛けると
   背景ごと透けてしまう。ul は背景を持たないので、溶けるのは文字だけ。
   左右どちらに続きがあるかは assets/js/site.js が判定して付ける。 */
.subnav { overflow-x: visible; }
.subnav ul {
  overflow-x: auto;
  scrollbar-width: none;
  /* 端の項目のフォーカス枠が切れないよう、わずかに内側へ寄せる */
  padding-inline: 2px;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav ul.has-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.subnav ul.has-more-left {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem);
          mask-image: linear-gradient(to right, transparent, #000 3rem);
}
.subnav ul.has-more-left.has-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}