/* ==================================================================
   plusG Corporate — styles.css (PROD v1.0)
   全ページ共通。index.html / pet.html / beauty.html /
   school-of-dog.html / company.html から参照する。
   掲載方針・変更管理は CODE-SPEC.md を参照（社内ドキュメント・非公開）。
================================================================== */

:root {
    /* 既定テーマ = Black（data-bg 属性なしの状態）。
       背景は左上から差す光（ラジアル）。縦の直線グラデは、暗部では
       人間の目が滑らかな変化を検出できず「かかっていない」ように見えるため、
       光源という『形』を与えて知覚できるようにしている。
       半径と中間点を広めに取り、黒へ落ちるのをゆるやかにしている。
       最悪ケースは光源の頂点 #424242（本文 5.23:1 / 装飾 2.06:1）。
       頂点をこれ以上明るくすると装飾が 2.0:1 を割る（#4A4A4A で 1.98:1）。 */
    --bg: #212121;
    --bg-image: radial-gradient(110% 85% at 18% 12%, #424242 0%, #2A2A2A 55%, #000000 100%);
    /* 暗いダークだけが grid の可視化に耐える */
    --grid-line: rgba(255,255,255,0.015);
    --nav-bg: rgba(0,0,0,0.85);

    --d-primary: #FFFFFF;
    --d-secondary: rgba(255,255,255,0.64);  /* 5.23:1 @#424242 */
    --d-muted: rgba(255,255,255,0.25);      /* 2.06:1 @#424242 */
    --d-border: rgba(255,255,255,0.08);

    --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --card-shadow-hover: 0 12px 40px rgba(255,255,255,0.08);
    --logo-filter: none;

    --card: #FFFFFF;
    --c-primary: #1D1D1F;
    --c-secondary: #6E6E73;
    --c-muted: #86868B;
    --c-faint: #C7C7CC;
    --c-border: rgba(0,0,0,0.08);

    --m-blue: #0066B1;
    --m-violet: #6E27C5;
    --m-red: #E22718;
    --bmw-m: linear-gradient(90deg, #0066B1 0%, #6E27C5 50%, #E22718 100%);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Hiragino Sans", sans-serif;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t: all 0.4s var(--ease);
    --gutter: 48px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    background-color: var(--bg);
    /* 1層目 = 80px グリッド線、2層目 = テーマの縦グラデ。
       グラデは fixed にしてビューポート基準にする。ページ全高に伸ばすと
       数千pxに引き伸ばされて変化が見えなくなるため。 */
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), var(--bg-image, none);
    background-size: 100% 80px, cover;
    background-attachment: scroll, fixed;
    color: var(--d-primary);
    font-family: var(--font);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.label { font-size: 11px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; }
.idx { font-variant-numeric: tabular-nums; font-weight: 500; }

/* ------------------------------------------------------------------
   Navigation
------------------------------------------------------------------ */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    /* Nav が6項目になり、中央の period と右のリンク列が隙間ゼロで接するため */
    column-gap: 28px;
    padding: 20px var(--gutter);
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 0.5px solid var(--d-border);
}
.brand { display: flex; align-items: center; gap: 12px; font-size: 17px; letter-spacing: -0.01em; color: var(--d-primary); }
.brand-mark { width: 4px; height: 20px; background: linear-gradient(180deg, #0066B1 0%, #6E27C5 50%, #E22718 100%); border-radius: 1px; }
.brand span { font-weight: 300; }
.brand strong { font-weight: 600; }

.period {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--d-secondary);
    white-space: nowrap;
}
.period b { font-size: 13px; font-weight: 400; letter-spacing: 0.02em; color: var(--d-primary); }
.period span { font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--d-muted); }

.nav-links { justify-self: end; display: flex; gap: 28px; list-style: none; }
.nav-links a {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--d-secondary);
    transition: var(--t);
}
.nav-links a:hover { color: var(--d-primary); }

/* 6項目では中央の period を置く幅が足りなくなる。装飾要素なので先に畳む。 */
@media (max-width: 1180px) {
    .nav { grid-template-columns: auto 1fr; }
    .period { display: none; }
}

/* ------------------------------------------------------------------
   Hero — 2-column: logo (left) + editorial text (right)
------------------------------------------------------------------ */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 72px;
    align-items: center;
    padding: 120px var(--gutter) 100px;
}
.hero-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
}
.hero-logo img {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 40px rgba(0, 102, 177, 0.18));
}
.hero-text { min-width: 0; }
.hero::after {
    content: "";
    position: absolute;
    left: var(--gutter);
    bottom: 0;
    width: 140px;
    height: 2px;
    background: var(--bmw-m);
}
.hero-label {
    display: flex;
    align-items: baseline;
    gap: 16px;
    color: var(--d-secondary);
    margin-bottom: 40px;
}
.hero-label .idx { color: var(--d-muted); font-size: 11px; letter-spacing: 0.3em; }
.hero-label .title { font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--d-secondary); }

.hero-statement {
    font-size: 68px;
    font-weight: 200;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--d-primary);
    max-width: 100%;
}
.hero-statement em {
    font-style: normal;
    background: var(--bmw-m);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 300;
}

.hero-sub {
    margin-top: 56px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: baseline;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--d-muted);
}
.hero-sub b {
    font-weight: 400;
    color: var(--d-primary);
    letter-spacing: 0.05em;
    text-transform: none;
    font-size: 15px;
    margin-left: 10px;
}
.hero-caption {
    margin-top: 40px;
    max-width: 780px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: var(--d-secondary);
}

/* ------------------------------------------------------------------
   Section head
------------------------------------------------------------------ */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 0.5px solid var(--d-border);
}
/* 英字はラベル、日本語が実質の見出し。2行に積む */
.section-title { display: flex; flex-direction: column; gap: 7px; }
.section-en {
    font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--d-muted);
}
.section-ja {
    font-size: 17px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.3;
    color: var(--d-primary);
}
.section-sub { font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--d-muted); }

@media (max-width: 768px) {
    .section-ja { font-size: 15px; }
}

/* ------------------------------------------------------------------
   Logistics — operations card
------------------------------------------------------------------ */
.ops { padding: 40px var(--gutter); }
.ops-card {
    background: var(--card);
    color: var(--c-primary);
    border-radius: 22px;
    box-shadow: var(--card-shadow);
    padding: 40px 36px;
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}
.ops-media img {
    display: block;
    width: 100%; height: auto;
    border-radius: 14px;
}
.ops-body { min-width: 0; }
.ops-text {
    font-size: 15px; line-height: 2.0; color: var(--c-secondary);
}
.ops-text + .ops-text { margin-top: 14px; }
.ops-points {
    margin-top: 28px; list-style: none;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.ops-points li {
    padding: 7px 14px; border: 0.5px solid var(--c-border); border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--c-primary); background: rgba(0,0,0,0.02);
}

/* ------------------------------------------------------------------
   Portfolio — Gallery showcases (image-led, years-anchored)
------------------------------------------------------------------ */
.portfolio { padding: 40px var(--gutter) 40px; }
.showcase-list { display: flex; flex-direction: column; gap: 24px; }

.showcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    background: var(--card);
    color: var(--c-primary);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: var(--t);
    min-height: 460px;
}
.showcase::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--bmw-m);
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: left center;
    transition: var(--t);
    z-index: 3;
}
.showcase:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.showcase:hover::before { opacity: 1; transform: scaleX(1); }
/* 左右交互レイアウト用。PROD v1.0 では「ロゴは常に左」に統一したため
   どのカードにも .reverse は付けていない。交互に戻したい場合は
   該当の <a class="showcase"> に reverse を付け直すだけでよい。 */
.showcase.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.showcase.reverse .showcase-media { order: 2; }

/* Image slot */
.showcase-media {
    position: relative;
    background: #0a0a0a;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%),
        linear-gradient(0deg, #050505 0%, #131313 100%);
    overflow: hidden;
    min-height: 360px;
}
.showcase-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-media.with-image {
    background: #fff;
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 20px 24px;
}
.showcase-media.with-image.brand-yellow {
    background: #FEDC00;
    padding: 40px;
}
.showcase-media.with-image.brand-yellow img {
    object-fit: contain;
    max-width: 100%;
    max-height: 220px;
}
.showcase-media.with-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    object-position: center;
}
.showcase-media[data-placeholder]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 14px);
}
.showcase-media[data-placeholder]::after {
    content: attr(data-placeholder);
    position: absolute;
    bottom: 18px;
    right: 18px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35);
    background: rgba(0,0,0,0.4);
    padding: 6px 10px;
    border-radius: 4px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Years anchor — now positioned in body (was image overlay in v2) */
.showcase-anchor {
    display: flex;
    align-items: baseline;
    gap: 14px;
    color: var(--c-primary);
    margin-top: 4px;
    margin-bottom: 22px;
}
.showcase-anchor .num-big {
    font-size: 84px;
    font-weight: 200;
    line-height: 0.9;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    color: var(--c-primary);
}
.showcase-anchor .anchor-unit {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-muted);
    padding-bottom: 8px;
}

/* Body */
.showcase-body {
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.showcase-idx {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-faint);
    margin-bottom: 20px;
}
.showcase-name {
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--c-primary);
}
.showcase-en {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.showcase-desc {
    margin-top: 28px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--c-secondary);
    max-width: 420px;
}
.showcase-brands {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.brand-tile {
    padding: 7px 12px;
    border: 0.5px solid var(--c-border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--c-primary);
    background: rgba(0,0,0,0.02);
    white-space: nowrap;
}
.brand-tile.more { color: var(--c-muted); background: transparent; }
.brand-tile .tile-date {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 0.5px solid var(--c-border);
    color: var(--c-muted);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.showcase-cta {
    margin-top: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-secondary);
    transition: var(--t);
}
.showcase-cta::after { content: "→"; font-size: 16px; letter-spacing: 0; transition: var(--t); }
.showcase:hover .showcase-cta { color: var(--m-blue); }
.showcase:hover .showcase-cta::after { transform: translateX(6px); }

/* ------------------------------------------------------------------
   Company Profile — minimal text strip
------------------------------------------------------------------ */
.profile { padding: 80px var(--gutter) 40px; }
.profile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-top: 32px;
    border-top: 0.5px solid var(--d-border);
}
.profile-item { min-width: 0; }
.profile-item .label { color: var(--d-muted); margin-bottom: 12px; display: block; }
.profile-item .val {
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--d-primary);
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Contact
------------------------------------------------------------------ */
.contact { padding: 60px var(--gutter) 100px; }
.contact-card {
    position: relative;
    background: var(--card);
    color: var(--c-primary);
    border-radius: 22px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    box-shadow: var(--card-shadow);
    transition: var(--t);
    overflow: hidden;
}
.contact-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--bmw-m);
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: left center;
    transition: var(--t);
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.contact-card:hover::before { opacity: 1; transform: scaleX(1); }
.contact-title { font-size: 26px; font-weight: 300; letter-spacing: -0.01em; color: var(--c-primary); margin-bottom: 12px; }
.contact-body { font-size: 13px; font-weight: 400; color: var(--c-muted); line-height: 1.8; }
.contact-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border: 0.5px solid var(--c-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-primary);
    transition: var(--t);
    white-space: nowrap;
}
.contact-cta:hover { background: var(--c-primary); color: var(--card); border-color: var(--c-primary); }

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.footer { padding: 40px var(--gutter) 60px; text-align: center; }
.footer-text { font-size: 10px; font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: var(--d-muted); }
.footer-text .sep { margin: 0 12px; color: rgba(255,255,255,0.15); }
.footer-line { width: 60px; height: 1px; margin: 24px auto 0; background: var(--bmw-m); }

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------ */
@media (max-width: 1280px) {
    .hero-statement { font-size: 68px; }
    .showcase-anchor .num-big { font-size: 72px; }
    .profile-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; gap: 48px; padding: 96px var(--gutter) 80px; }
    .hero-logo { justify-content: flex-start; padding-right: 0; }
    .hero-logo img { max-width: 240px; }

    .showcase { grid-template-columns: 1fr; min-height: auto; }
    .showcase.reverse { grid-template-columns: 1fr; }
    .showcase.reverse .showcase-media { order: 0; }
    .showcase-media { min-height: 320px; aspect-ratio: 16/9; }
    .showcase-anchor .num-big { font-size: 68px; }
    .showcase-body { padding: 44px 36px; }
}

@media (max-width: 768px) {
    :root { --gutter: 20px; }

    .nav { grid-template-columns: auto 1fr; gap: 12px; row-gap: 8px; }
    .brand { font-size: 15px; }
    .period { display: none; }
    .nav-links { grid-column: 1 / -1; justify-self: stretch; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
    .nav-links a { font-size: 10px; letter-spacing: 0.15em; }

    .hero { padding: 72px var(--gutter) 64px; gap: 36px; }
    .hero-logo img { max-width: 180px; }
    .hero-label { margin-bottom: 24px; }
    .hero-statement { font-size: 40px; line-height: 1.15; letter-spacing: -0.03em; }
    .hero-sub { margin-top: 32px; gap: 20px; font-size: 9px; }
    .hero-sub b { font-size: 13px; margin-left: 8px; }
    .hero-caption { margin-top: 28px; font-size: 13px; line-height: 1.8; }

    .portfolio { padding: 32px var(--gutter) 24px; }
    .showcase-list { gap: 16px; }
    .showcase { border-radius: 20px; }
    .showcase-media { min-height: 240px; }
    .showcase-anchor .num-big { font-size: 64px; }
    .showcase-anchor .anchor-unit { font-size: 10px; padding-bottom: 6px; }
    .showcase-body { padding: 32px 24px; }
    .showcase-name { font-size: 22px; }
    .showcase-desc { font-size: 13px; margin-top: 20px; }
    .showcase-brands { margin-top: 20px; }
    .showcase-cta { margin-top: 24px; }

    .profile { padding: 40px var(--gutter) 24px; }
    .profile-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding-top: 24px; }
    .profile-item .val { font-size: 13px; }

    .contact { padding: 32px var(--gutter) 48px; }
    .contact-card { grid-template-columns: 1fr; padding: 32px 24px; gap: 20px; border-radius: 20px; }
    .contact-title { font-size: 22px; }
    .contact-cta { justify-self: start; padding: 14px 22px; font-size: 11px; }

    .footer-text .sep { margin: 0 6px; }
}

@media (max-width: 380px) {
    .nav-links { gap: 12px; }
    .nav-links a { font-size: 9px; }
    .hero-statement { font-size: 32px; }
    .showcase-anchor .num-big { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===============================================================
   Accessibility (PROD v1.0 / CODE-SPEC §8.2)
=============================================================== */
.skip-link {
    position: absolute;
    left: 12px;
    top: -64px;
    z-index: 999;
    padding: 12px 20px;
    background: #FFFFFF;
    color: var(--c-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* キーボード操作時のみフォーカスリングを出す（マウス時は従来どおり） */
:focus-visible {
    outline: 2px solid var(--d-primary);
    outline-offset: 3px;
}
.showcase:focus-visible { outline-offset: 6px; }
/* 白カード上は白アウトラインが見えないため反転 */
.contact-cta:focus-visible,
.showcase-media a:focus-visible {
    outline-color: var(--m-violet);
}

/* ---------------------------------------------------------------
   Hero キャッチコピー（長文版）
   ---------------------------------------------------------------
   モック v3.4 は 11文字×2行を前提に 68px で組んでいた。
   現コピーは 40字・4行のため、そのままだとテキスト欄（1440px 時 742px）
   をはみ出す。行が収まる最大サイズまで落としつつ、Hero の重さを保つ。
     1440px 時: 1行あたり最長14字 × 48px ≒ 645px（欄 742px に収まる）
   短い2行コピーに戻す場合は <h1> から is-long を外すだけでよい。
--------------------------------------------------------------- */
.hero-statement.is-long { font-size: 48px; line-height: 1.25; }
@media (max-width: 1280px) { .hero-statement.is-long { font-size: 44px; } }
@media (max-width: 1024px) { .hero-statement.is-long { font-size: 40px; } }
@media (max-width: 768px)  { .hero-statement.is-long { font-size: 26px; line-height: 1.45; } }
@media (max-width: 380px)  { .hero-statement.is-long { font-size: 23px; } }

/* ---------------------------------------------------------------
   レイアウト修正 (mock v3.4 のバグ)
   ---------------------------------------------------------------
   1024px 以下では .showcase-media に aspect-ratio: 16/9 と min-height が
   同時に効くため、ボックスが「高さ → 幅」を逆算して自分の幅を決めてしまい、
   375px 幅で 427px（カード幅 335px）まで膨らんで事業部ロゴが左右に
   見切れていた。幅をカードに固定し、aspect-ratio は高さだけに効かせる。
--------------------------------------------------------------- */
@media (max-width: 1024px) {
    .showcase-media { width: 100%; }
}

/* ---------------------------------------------------------------
   コントラスト補正 (WCAG 2.1 AA / CODE-SPEC §8.2)
   ---------------------------------------------------------------
   デザイン言語（§0）は変更せず、"読む必要のあるテキスト" だけを
   AA 基準まで引き上げる。装飾的な連番（01 / セクション副題 / nav の
   Corporate）は元のトーンのまま残す。
   このブロックごと削除すればモック v3.4 の見た目に完全に戻る。

   補正前 → 補正後（対 背景）
     rgba(255,255,255,0.25)  2.03:1  →  rgba(255,255,255,0.5)  5.32:1
     #C7C7CC                 1.68:1  →  #6E6E73                5.07:1
     #86868B                 3.62:1  →  #6E6E73                5.07:1
     grad violet #6E27C5     2.76:1  →  #7C2CDE                3.27:1（大文字サイズ AA は 3:1）
--------------------------------------------------------------- */

/* 黒背景上：情報を持つラベル */
.hero-sub,
.profile-item .label,
.footer-text { color: var(--d-secondary); }

/* 白カード上：本文・ラベル・日付 */
.showcase-idx,
.showcase-en,
.showcase-anchor .anchor-unit,
.showcase-desc,
.brand-tile.more,
.brand-tile .tile-date,
.contact-body { color: var(--c-secondary); }

/* BMW-M グラデをテキストに使う箇所のみ、violet を同一色相のまま明度だけ
   引き上げる（#6E27C5 → #7C2CDE, HSV の V を 0.77→0.87）。
   3px トップライン等の装飾グラデ --bmw-m はブランド値のまま。 */
/* 既定テーマ Black 用。純黒〜#333333 の上で 3.2:1 を確保するため、
   紫だけ #7C2CDE に明色化する。青と赤は原色で足りる。 */
:root {
    --bmw-m-text: linear-gradient(90deg, #0066B1 0%, #7C2CDE 50%, #E22718 100%);
}
.hero-statement em { background-image: var(--bmw-m-text); }

/* ---------------------------------------------------------------
   Beauty / Pet のロゴ表示サイズ
   ---------------------------------------------------------------
   元の .showcase-media.with-image img は width:100% のため、
   低解像度の素材がデスクトップで約3倍に引き伸ばされてにじんでいた。
   上限を決めて等倍〜縮小の範囲に収め、精細さを優先する。
     Beauty  300×210 → 300px 等倍
     Pet     860×210 → 420px へ縮小（自前の水色背景を持つバナー型）
   角丸はカードのデザイン言語に合わせ、背景を持つバナーの直角を和らげる。
   SoD（.brand-yellow・1200px 素材）は従来どおり大きく見せる。
--------------------------------------------------------------- */
.showcase-media.with-image:not(.brand-yellow) img {
    width: auto;
    height: auto;
    max-width: min(62%, 420px);
    max-height: 120px;
    border-radius: 8px;
}
@media (max-width: 768px) {
    .showcase-media.with-image:not(.brand-yellow) img {
        max-width: 86%;
        max-height: 92px;
    }
}

/* 画像未配置／読み込み失敗時に alt テキストが白カード上で読めるようにする */
.showcase-media.with-image img {
    color: var(--c-primary);
    font-size: 13px;
    line-height: 1.5;
}
.showcase-media.with-image.brand-yellow img { color: #1D1D1F; }

/* テーマ切替の瞬間だけ全トランジションを止める。
   .nav-links a / .showcase / .brand-card などは hover 演出のために
   transition: all を持っており、そのままだとテーマ切替でも色が 0.4 秒
   かけて変化する。背景は即時・文字色はフェードとなり、その間
   「新しい文字色 × 古い背景色」の読めない状態が生まれる。
   hover の演出は残したいので、切替中だけクラスで無効化する。 */
:root.is-theming,
:root.is-theming *,
:root.is-theming *::before,
:root.is-theming *::after { transition: none !important; }

/* ===============================================================
   背景色スイッチャー (CODE-SPEC v1.1 §0 / §10)
   ===============================================================
   :root[data-bg] で4テーマを切り替える。既定（属性なし）= Black。
   透明度とグラデの各色は、黒テーマでの見え方（本文 5.3:1 / 装飾 2.0:1、
   グラデ文字 3:1 以上）を各背景で再現するよう実測して決めた値。
   そのまま同じ rgba を使い回すと、明るい背景で本文が読めなくなる。
=============================================================== */

/* --- Beige ------------------------------------------------- */
:root[data-bg="cream"] {
    --bg: #F5EFE5;
    --bg-image: none;                  /* Beige と Green は単色 */
    /* ライトテーマでは黒線が同じ alpha でも視覚的に重い。grid は出さない。 */
    --grid-line: transparent;
    --nav-bg: rgba(245,239,229,0.85);

    --d-primary: #1D1D1F;              /* 14.71:1 */
    --d-secondary: rgba(0,0,0,0.59);   /* 5.32:1 */
    --d-muted: rgba(0,0,0,0.29);       /* 2.02:1 */
    --d-border: rgba(0,0,0,0.10);

    /* 白カードが背景に沈む（白 vs beige = 1.20:1）ため輪郭を足す */
    --card-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.07);
    --card-shadow-hover: 0 14px 40px rgba(0,0,0,0.16);   /* 暗色の影 */
    --logo-filter: invert(1);                            /* 白ロゴ → 黒 */

    --bmw-m-text: linear-gradient(90deg, #0066B1 0%, #6E27C5 50%, #E22718 100%);
}

/* --- Black -------------------------------------------------- */
:root[data-bg="charcoal"] {
    /* ライトテーマ。Black と同じく左上からの光（ラジアル）だが、
       ライトなので明暗が反転する：光源が明色 #F2F2F6、外周が暗色 #BEBEC8。
       最悪ケースは『最も暗い点』= 外周 #BEBEC8（本文 5.26:1 / 装飾 2.04:1）。
       明るい側は白カードとの分離が効き、頂点 #F2F2F6 で 1.12:1（ring で輪郭確保）。 */
    --bg: #D8D8DE;
    --bg-image: radial-gradient(110% 85% at 18% 12%, #F2F2F6 0%, #DCDCE2 55%, #BEBEC8 100%);
    /* ライトテーマでは黒線が同じ alpha でも視覚的に重い。grid は出さない。 */
    --grid-line: transparent;
    --nav-bg: rgba(190,190,200,0.85);

    --d-primary: #1D1D1F;                   /* 9.13:1 @#BEBEC8 */
    --d-secondary: rgba(0,0,0,0.64);        /* 5.26:1 @#BEBEC8 */
    --d-muted: rgba(0,0,0,0.31);            /* 2.04:1 @#BEBEC8 */
    --d-border: rgba(0,0,0,0.10);

    /* 白カードが背景に沈まないよう輪郭を足す */
    --card-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.07);
    --card-shadow-hover: 0 14px 40px rgba(0,0,0,0.16);
    --logo-filter: invert(1);               /* 白ロゴ → 黒 */

    /* 赤のみ暗色化。原色は最暗端 #BEBEC8 で 2.51:1 に落ちる */
    --bmw-m-text: linear-gradient(90deg, #0066B1 0%, #6E27C5 50%, #C41F12 100%);
}

/* --- Green ------------------------------------------------- */
:root[data-bg="forest"] {
    --bg: #334D1F;
    --bg-image: none;                  /* Beige と Green は単色 */
    --grid-line: transparent;          /* grid は出さない */
    --nav-bg: rgba(51,77,31,0.85);

    --d-secondary: rgba(255,255,255,0.67);  /* 5.27:1 */
    --d-muted: rgba(255,255,255,0.25);      /* 2.02:1 */
    --d-border: rgba(255,255,255,0.12);

    --card-shadow-hover: 0 12px 40px rgba(0,0,0,0.40);
    /* 原色では 1.5〜2.0:1 で読めない。最も明るく振った組み合わせ */
    --bmw-m-text: linear-gradient(90deg, #199EFF 0%, #B980FF 50%, #FF685C 100%);
    /* base(:root) はライトテーマなので、ダーク側は継承せず必ず自前で定義する */
    --d-primary: #FFFFFF;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --logo-filter: none;
}

/* Beige のときだけ白ロゴを反転させる。直下の img のみが対象で、
   事業部ページの .hero-card に載せたブランドロゴには掛けない
   （カラーのバナーを反転すると色が破壊されるため）。 */
.hero-logo > img { filter: var(--logo-filter); }

/* --- スイッチャー本体 --------------------------------------- */
.palette-switcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--nav-bg);
    border: 0.5px solid var(--d-border);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.palette-dot {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0.5px solid rgba(128,128,128,0.55);
    border-radius: 50%;
    background: var(--swatch);
    cursor: pointer;
    font: inherit;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.palette-dot[data-palette="black"]    { --swatch: #000000; }
.palette-dot[data-palette="cream"]    { --swatch: #F5EFE5; }
.palette-dot[data-palette="charcoal"] { --swatch: #D8D8DE; }
.palette-dot[data-palette="forest"]   { --swatch: #334D1F; }
.palette-dot:hover { transform: scale(1.14); }
.palette-dot[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--d-primary);
}
.palette-dot:focus-visible { outline: 2px solid var(--d-primary); outline-offset: 3px; }

@media (max-width: 768px) {
    .palette-switcher { right: 12px; bottom: 12px; gap: 7px; padding: 7px 9px; }
    .palette-dot { width: 20px; height: 20px; }
}

/* ==================================================================
   事業部ページ共通 (pet / beauty / school-of-dog)
   index の .hero / .showcase と同じ骨格を使い、
   ロゴは白カードに載せてポートフォリオカードと語彙を揃える。
================================================================== */

/* --- Breadcrumb --- */
.crumb {
    padding: 20px var(--gutter) 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--d-secondary);
}
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crumb a { border-bottom: 0.5px solid var(--d-border); padding-bottom: 2px; }
.crumb a:hover { color: var(--d-primary); border-bottom-color: currentColor; }
.crumb [aria-current="page"] { color: var(--d-primary); }
.crumb .sep { color: var(--d-muted); }

/* --- Hero（ロゴカード + テキスト） --- */
.hero.is-division { padding-top: 72px; }
.hero-card {
    background: var(--card);
    border-radius: 22px;
    box-shadow: var(--card-shadow);
    padding: 40px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}
.hero-card img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 132px;
    border-radius: 8px;
}

/* --- 取扱ブランド --- */
.brands { padding: 40px var(--gutter); }
.brand-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.brand-card {
    background: var(--card);
    color: var(--c-primary);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 32px 28px 28px;
    transition: var(--t);
    display: flex;
    flex-direction: column;
}
/* ロゴはカード下端に寄せる。素材が揃っていないブランドがあるため、
   上に置くと同じ行のカード同士でテキストの開始位置がずれる。 */
.brand-logo { margin-top: auto; padding-top: 22px; }
.brand-logo img {
    display: block;
    width: auto; height: auto;
    max-width: 150px; max-height: 48px;
}
/* 正方形に近いロゴは高さ上限が効いて横幅も詰まり、文字が潰れる。
   縦に余裕を与えて他ロゴと光学的な面積を揃える（現在は該当なし）。 */
.brand-logo.is-tall img { max-height: 68px; }
.brand-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.brand-card .idx { display: block; font-size: 10px; letter-spacing: 0.3em; color: var(--c-secondary); }
.brand-card .name { margin-top: 14px; font-size: 22px; font-weight: 300; letter-spacing: -0.01em; }
.brand-card .desc { margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--c-secondary); }
.brand-more {
    margin-top: 24px;
    padding: 24px 28px;
    border: 0.5px solid var(--d-border);
    border-radius: 18px;
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}
.brand-more .count { font-size: 40px; font-weight: 200; letter-spacing: -0.03em; line-height: 1; }
.brand-more .note { font-size: 13px; line-height: 1.8; color: var(--d-secondary); flex: 1 1 260px; }

/* --- 4ストア展開 --- */
.stores { padding: 40px var(--gutter); }
.store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.store {
    background: var(--card);
    color: var(--c-primary);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 32px 28px;
    transition: var(--t);
}
.store:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.store .platform { font-size: 11px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--c-secondary); }
.store .qty { margin-top: 10px; font-size: 48px; font-weight: 200; line-height: 1; letter-spacing: -0.04em; }
.store .qty small { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; margin-left: 10px; text-transform: uppercase; color: var(--c-secondary); }
.store .desc { margin-top: 16px; font-size: 13px; line-height: 1.8; color: var(--c-secondary); }

/* --- 物流フロー（5段） --- */
.logistics { padding: 40px var(--gutter); }
.flow {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    background: var(--card);
    color: var(--c-primary);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
.flow-step { position: relative; padding: 32px 22px 28px; }
.flow-step + .flow-step { border-left: 0.5px solid var(--c-border); }
.flow::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--bmw-m);
    z-index: 1;
}
.flow-step .no { font-size: 10px; font-weight: 500; letter-spacing: 0.3em; color: var(--c-secondary); font-variant-numeric: tabular-nums; }
.flow-step .label { margin-top: 12px; font-size: 17px; font-weight: 400; }
.flow-step .en { margin-top: 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-secondary); }
.flow-note { margin-top: 16px; font-size: 12px; line-height: 1.9; color: var(--d-secondary); }

/* --- マイルストーン --- */
.milestones { padding: 40px var(--gutter); }
.ms-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 32px; border-top: 0.5px solid var(--d-border); }
.ms { min-width: 0; }
.ms .figure { font-size: 52px; font-weight: 200; line-height: 1; letter-spacing: -0.04em; }
.ms .figure em { font-style: normal; font-size: 16px; font-weight: 400; letter-spacing: 0.1em; margin-left: 8px; color: var(--d-secondary); }
.ms .label { margin-top: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--d-secondary); }
.ms .note { margin-top: 10px; font-size: 13px; line-height: 1.8; color: var(--d-secondary); }

/* --- 事業部ページのレスポンシブ --- */
@media (max-width: 1024px) {
    .brand-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow-step + .flow-step { border-left: 0; }
    .flow-step:nth-child(n+3) { border-top: 0.5px solid var(--c-border); }
    .flow-step:nth-child(odd) { border-right: 0.5px solid var(--c-border); }
    .hero-card { min-height: 180px; }
}
@media (max-width: 768px) {
    .crumb { padding: 16px var(--gutter) 0; font-size: 9px; }
    .hero.is-division { padding-top: 48px; }
    .hero-card { padding: 28px 20px; min-height: 150px; }
    .hero-card img { max-height: 92px; }
    .brand-cards { grid-template-columns: 1fr; }
    .store-grid { grid-template-columns: 1fr; }
    .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .ms .figure { font-size: 40px; }
    .flow { grid-template-columns: 1fr; }
    .flow-step:nth-child(odd) { border-right: 0; }
    .flow-step + .flow-step { border-top: 0.5px solid var(--c-border); }
    .flow-step { padding: 24px 20px; }
    .brand-more .count { font-size: 32px; }
}

/* ==================================================================
   事業部ページ 追加セクション (v1.9 §7.1)
================================================================== */

/* --- 事業内容 3本柱 --- */
.business { padding: 40px var(--gutter); }
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 32px; border-top: 0.5px solid var(--d-border); }
.pillar { min-width: 0; }
.pillar .idx { font-size: 11px; font-weight: 500; letter-spacing: 0.3em; color: var(--d-muted); font-variant-numeric: tabular-nums; }
.pillar-name { margin-top: 16px; font-size: 20px; font-weight: 300; letter-spacing: -0.01em; color: var(--d-primary); }
.pillar-desc { margin-top: 14px; font-size: 13px; line-height: 1.9; color: var(--d-secondary); }

/* --- セクション冒頭のリード文 --- */
.section-lead { margin-bottom: 28px; font-size: 14px; line-height: 1.9; color: var(--d-secondary); max-width: 62ch; }

/* --- ストアカード（リンク版） --- */
.store.is-link { display: block; }
.store .store-name { margin-top: 10px; font-size: 24px; font-weight: 300; letter-spacing: -0.01em; }
.store-cta {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--m-blue);
}
.store-cta::after {
    content: "";
    width: 18px;
    height: 0.5px;
    background: currentColor;
    transition: var(--t);
}
.store.is-link:hover .store-cta::after { width: 30px; }

@media (max-width: 1024px) {
    .pillar-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
    .section-lead { font-size: 13px; }
    .store .store-name { font-size: 20px; }
}

/* --- 取扱ブランド一覧（ロゴウォール） ------------------------------
   素材は 116×55 の等倍固定。拡大すると一気ににじむので、
   グリッド側を素材サイズに合わせる（逆はしない）。 */
.brand-wall {
    margin-top: 24px;
    background: var(--card);
    color: var(--c-primary);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 36px 32px 32px;
}
.brand-wall-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 0.5px solid var(--c-border);
}
.brand-wall-head .count { font-size: 44px; font-weight: 200; letter-spacing: -0.03em; line-height: 1; }
.brand-wall-head .note { flex: 1 1 320px; font-size: 13px; line-height: 1.9; color: var(--c-secondary); }
.brand-logos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, 116px);
    gap: 18px 20px;
    justify-content: space-between;
}
.brand-logos li { width: 116px; height: 55px; }
.brand-logos img { width: 116px; height: 55px; object-fit: contain; display: block; }

@media (max-width: 768px) {
    .brand-wall { padding: 28px 20px 24px; }
    .brand-wall-head .count { font-size: 34px; }
    /* 375px で3列（2列だと19行になって間延びする）。素材より小さく表示する分には崩れない */
    .brand-logos { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 16px 12px; justify-content: start; }
    .brand-logos li { width: auto; }
    .brand-logos img { width: 100%; max-width: 116px; }
}

/* --- 下層ページの Hero（画像なし・1カラム・左寄せ） -----------------
   TOP は logo | text の2カラム、下層は text のみの1カラム。
   同じ .hero でも構造を変えることでページ種別の違いを出す。 */
.hero.is-division {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    padding: 72px var(--gutter) 80px;
}
.hero.is-division .hero-text { max-width: 62ch; }

/* school.html のみの例外（§7.0）。index が「ロゴ｜テキスト」なのに対し
   こちらは「テキスト｜イラスト」で左右を反転させ、リズムの複製を避ける。 */
.hero.is-division.has-visual {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    /* 超ワイド画面で右列だけ伸びてイラストが右端に飛ぶのを防ぐ。
       左端は他セクションと揃えたいので margin は付けず、右側だけ詰める。 */
    max-width: 1700px;
}
.hero.is-division.has-visual .hero-text { max-width: none; }
.hero-visual { justify-self: end; width: 100%; }
/* イラストの背景は白。暗背景に直置きすると切り抜きの箱に見えるため、
   他ページと同じ白カードに載せて意図的な面として見せる。 */
.hero-visual-card {
    background: var(--card);
    border-radius: 22px;
    box-shadow: var(--card-shadow);
    padding: 28px 24px;
    max-width: 400px;
    margin-inline: auto;   /* 右列の中で中央寄せ。右端に張り付かせない */
}
.hero-visual-card img { display: block; width: 100%; height: auto; }

/* --- ストアカードのブランドバナー --- */
.store-banner {
    margin: -8px 0 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.store-banner img {
    width: auto;
    height: auto;
    max-width: min(78%, 360px);
    max-height: 88px;
    border-radius: 8px;
}
/* レビューは実数を焼き込まず、切り捨ての丸め表示で運用する */
.store .rating {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.store .rating .star { font-size: 20px; font-weight: 400; color: var(--c-primary); letter-spacing: 0.02em; }
.store .rating .count { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-secondary); }

@media (max-width: 768px) {
    .hero.is-division { padding: 48px var(--gutter) 56px; }
    .hero.is-division.has-visual { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .hero-visual-card { max-width: 320px; margin-right: auto; padding: 20px 18px; border-radius: 18px; }
    .store-banner { margin-bottom: 20px; }
    .store-banner img { max-width: 100%; max-height: 64px; }
    .store .rating .star { font-size: 17px; }
}

/* ==================================================================
   Hero タイポグラフィ (v1.21)
   ------------------------------------------------------------------
   Hero の H1 だけ明朝にする。本文・セクション見出し・Nav・Breadcrumb・
   Footer・カード内テキスト・メトリックはサンセリフのまま。
   .page-title は今後の下層ページ用に予約（現状は .hero-statement を使用）。
================================================================== */
.hero-statement,
.page-title {
    font-family: "Noto Serif JP", "Yu Mincho", "游明朝", "YuMincho", serif;
    /* 300 と 400 を実測比較（インク量で 10% 差）。白文字は暗い背景上で
       視覚的に細く見えるため、4テーマ中3つがダークのこの設計では 400 が均衡する。
       Beige では両者ほぼ同じに見えるので 400 でも重くならない。 */
    font-weight: 400;
}
/* em の BMW-M グラデは font-family を継承する。
   background-clip: text はフォント種別に依存しないのでそのまま効く。 */

/* --- 2本柱レイアウト（Beauty の BtoB / BtoC） --- */
.pillar-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1024px) { .pillar-grid.is-two { grid-template-columns: 1fr; gap: 28px; } }

/* ==================================================================
   School of DOG ページ (§7.3)
   店舗カードの CTA は1枚につき1つ（店舗ページへのリンク）だけにする。
================================================================== */
.shops { padding: 40px var(--gutter); }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.shop {
    display: block;
    background: var(--card);
    color: var(--c-primary);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 32px 28px 28px;
    transition: var(--t);
}
.shop:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.shop-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.shop-name { font-size: 22px; font-weight: 300; letter-spacing: -0.01em; }
.shop-type {
    font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--c-secondary); border: 0.5px solid var(--c-border); border-radius: 999px; padding: 4px 10px;
}
.shop-address { margin-top: 16px; font-size: 13px; line-height: 1.9; color: var(--c-secondary); }
.shop-hours { margin-top: 16px; display: flex; gap: 14px; }
.shop-hours dt {
    font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--c-secondary); padding-top: 3px; flex: 0 0 auto;
}
.shop-hours dd { font-size: 13px; line-height: 1.8; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.shop-tag {
    margin-top: 16px; display: inline-block; padding: 5px 12px; border-radius: 999px;
    background: #FEDC00; color: #1D1D1F;
    font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
}
.shop-since {
    margin-top: 20px; padding-top: 16px; border-top: 0.5px solid var(--c-border);
    font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-secondary);
}
.section-note { margin-top: 20px; font-size: 12px; line-height: 1.9; color: var(--d-secondary); }

/* セクション本文中のリンク（しつけ教室 / ホテル24 の詳細へ） */
.inline-link {
    margin-top: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
    color: var(--d-primary);
    border-bottom: 0.5px solid var(--d-border);
    padding-bottom: 3px;
}
.inline-link::after { content: "→"; }
.inline-link:hover { border-bottom-color: currentColor; }

/* 公式サイトへの総合導線 */
.sod-official { padding: 40px var(--gutter); }
.official-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 40px;
    align-items: center;
    background: #FEDC00;
    color: #1D1D1F;
    border-radius: 22px;
    padding: 40px;
    box-shadow: var(--card-shadow);
    transition: var(--t);
}
.official-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.official-logo { display: flex; align-items: center; justify-content: center; }
.official-logo img { width: 100%; height: auto; max-width: 420px; }
.official-title { font-size: 24px; font-weight: 300; letter-spacing: -0.01em; }
.official-desc { margin-top: 14px; font-size: 13px; line-height: 1.9; color: rgba(0,0,0,0.65); }
.official-card .store-cta { color: #1D1D1F; }

@media (max-width: 1024px) {
    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .official-card { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
    .official-logo img { max-width: 320px; }
}
@media (max-width: 768px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop { padding: 28px 22px 24px; }
    .shop-name { font-size: 19px; }
    .official-card { padding: 28px 22px; }
    .official-title { font-size: 20px; }
}

/* ==================================================================
   自社ブランド（Our Brand）— 他社取扱ブランドとは別セクションに置く
   （§0 自社ブランドと他社取扱ブランドの分離原則）
================================================================== */
.own-brand { padding: 40px var(--gutter); }
.own-card {
    position: relative;
    background: var(--card);
    color: var(--c-primary);
    border-radius: 22px;
    box-shadow: var(--card-shadow);
    padding: 48px 44px 44px;
    overflow: hidden;
    transition: var(--t);
}
.own-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--bmw-m);
}
.own-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
    gap: 48px;
}
.own-media img {
    display: block;
    width: 100%; height: auto;
    max-width: 260px;
    margin-left: auto; margin-right: auto;
}
.own-body { min-width: 0; max-width: 62ch; }
.own-label {
    font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--c-secondary);
}
.own-name {
    margin-top: 16px;
    font-size: 34px; font-weight: 300; letter-spacing: -0.02em;
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.own-en { font-size: 14px; font-weight: 500; letter-spacing: 0.18em; color: var(--c-secondary); }
.own-desc { margin-top: 20px; font-size: 14px; line-height: 1.95; color: var(--c-secondary); }
.own-points { margin-top: 24px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.own-points li {
    padding: 7px 14px; border: 0.5px solid var(--c-border); border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--c-primary); background: rgba(0,0,0,0.02);
}
.own-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.own-ctas .own-cta { margin-top: 0; }
.own-cta {
    margin-top: 32px;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--m-blue);
}
.own-cta::after { content: ""; width: 18px; height: 0.5px; background: currentColor; transition: var(--t); }
.own-cta:hover::after { width: 30px; }

@media (max-width: 768px) {
    .ops-card {
        padding: 26px 20px;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .ops-text { font-size: 14px; line-height: 1.9; }
    .own-card {
        padding: 32px 22px 28px;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .own-media { order: -1; }
    .own-media img { max-width: 220px; }
    .own-name { font-size: 26px; gap: 10px; }
    .own-desc { font-size: 13px; }
}

/* ==================================================================
   Company ページ (§7.4)
================================================================== */
/* 会社概要テーブル（掲載項目は §7.4 の6項目に限定） */
.fact-table { padding-top: 32px; border-top: 0.5px solid var(--d-border); }
.fact-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    padding: 22px 0;
    border-bottom: 0.5px solid var(--d-border);
}
.fact-row dt {
    font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--d-secondary); padding-top: 4px;
}
.fact-row dd { font-size: 15px; line-height: 1.95; color: var(--d-primary); }

/* 沿革 */
.history { padding: 40px var(--gutter); }
.timeline { list-style: none; padding-top: 32px; border-top: 0.5px solid var(--d-border); }
.tl-item {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    padding: 28px 0;
    border-bottom: 0.5px solid var(--d-border);
}
.tl-year { font-size: 30px; font-weight: 200; letter-spacing: -0.03em; line-height: 1; color: var(--d-primary); }
.tl-title { font-size: 18px; font-weight: 400; color: var(--d-primary); }
.tl-desc { margin-top: 10px; font-size: 13px; line-height: 1.95; color: var(--d-secondary); }

/* 事業構造カード（各事業部ページへのリンク） */
.pillar.is-link { display: block; }
.pillar.is-link .inline-link { margin-top: 18px; }
.pillar.is-link:hover .inline-link { border-bottom-color: currentColor; }

@media (max-width: 768px) {
    .fact-row, .tl-item { grid-template-columns: 1fr; gap: 10px; }
    .fact-row dd { font-size: 14px; }
    .tl-year { font-size: 24px; }
}

/* --- company: セクション内容は白カードに載せる（他ページと同じ語彙） --- */
.panel {
    background: var(--card);
    color: var(--c-primary);
    border-radius: 22px;
    box-shadow: var(--card-shadow);
    padding: 12px 40px 8px;
}
.panel .fact-table { padding-top: 0; border-top: 0; }
.panel .fact-row dt { color: var(--c-secondary); }
.panel .fact-row dd { color: var(--c-primary); }
.panel .fact-row { border-bottom-color: var(--c-border); }
.panel .fact-row:last-child { border-bottom: 0; }

/* Structure の3枚を白カードに */
.pillar.is-card {
    background: var(--card);
    color: var(--c-primary);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 32px 28px 28px;
    transition: var(--t);
}
.pillar.is-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.pillar.is-card .idx { color: var(--c-secondary); }
.pillar.is-card .pillar-name { color: var(--c-primary); }
.pillar.is-card .pillar-desc { color: var(--c-secondary); }
.pillar.is-card .inline-link { color: var(--m-blue); border-bottom-color: var(--c-border); }

/* Contact の CTA を縦積みできるように */
.contact-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.contact-tel {
    display: inline-flex; align-items: baseline; gap: 10px;
    font-variant-numeric: tabular-nums;
}
.contact-tel .label {
    font-size: 10px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--c-secondary);
}
.contact-tel .num { font-size: 17px; font-weight: 400; color: var(--c-primary); letter-spacing: 0.02em; }
.contact-tel:hover .num { color: var(--m-blue); }

@media (max-width: 768px) {
    .panel { padding: 8px 20px 4px; }
    .contact-actions { align-items: flex-start; }
}
.tel-link { border-bottom: 0.5px solid var(--c-border); padding-bottom: 2px; letter-spacing: 0.02em; }
.tel-link:hover { color: var(--m-blue); border-bottom-color: currentColor; }