/* MOTOMACHI GOLF PARTNERS ── 全ページ共通のスタイル
 *
 * 各ページの <head> で site.css → <ページ>.css の順に読み込む。
 * ここに置くのは2ページ以上で使うものだけ。1ページしか使わないものは
 * そのページのCSSへ書く。
 *
 * 画像は url(../images/…) で参照する。このファイルが css/ の中にあるため、
 * HTMLからの相対パスとは1段ずれる。 */

body {
    background-color: #14100c;
    color: #f4efe6;
    letter-spacing: 0.02em;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
}

/* 日本語タイポグラフィの洗練 */
h1, h2, h3, h4, h5, h6, .gold-gradient-text, .lead-text {
    font-feature-settings: "palt";
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* keep-all は日本語の一文を分割不能な1語として扱うため、狭い画面では
   行末が緊急改行になり1文字だけ次行に落ちる。スマホでは解除する。
   auto-phrase を対応ブラウザ（Chrome系）だけに効かせたいので、
   normal を先に書いて2行に分ける。非対応ブラウザは下の行を捨てる。 */
@media (max-width: 767px) {
    h1, h2, h3, h4, h5, h6, .gold-gradient-text, .lead-text { word-break: normal; }
    h1, h2, h3, h4, h5, h6, .gold-gradient-text, .lead-text { word-break: auto-phrase; }
    /* balance は行の長さを揃えるために語の途中でも折る。数行の見出しでは
       それが利点だが、本文では「くつろげる」が割れる。本文だけ外す。
       pretty も同じ理由で2行に分けて書く（非対応ブラウザは wrap のまま）。 */
    .lead-text { text-wrap: wrap; }
    .lead-text { text-wrap: pretty; }
}

/* 折り返してほしくない かたまり（文節）。
   見出しは字が大きいぶん、語の途中で折り返すと目立つ。
   auto-phrase は Safari が未対応で、さらに .fx-chars は1文字ずつ
   inline-block に割るため word-break 自体が効かない。
   確実に文節で止める手段はこれだけなので、見出しには明示的に入れる。 */
.nb { white-space: nowrap; }

.font-serif { letter-spacing: 0.05em; }

.eyebrow--center::after {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, #c79a3e, transparent);
}

/* セクション背景のかすかなグロー */
.glow {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 9999px;
    filter: blur(60px);
}

/* ── 背景レイヤー ──
   セクションに重ねて厚みと奥行きを出す。文字より下・写真より上（z:1）に置き、
   クリックも拾わない。単色グラデーションの「のっぺり」を解消するのが目的なので、
   光沢やきらめきではなく「質感」「周辺減光」「地面の影」の3種類にとどめる。
   使い方: <section class="relative overflow-hidden"> の直下に
           <div class="layer layer-grain"></div> などを1〜3枚並べる。 */
.layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ① 粒子：紙やマットな塗装のような細かいざらつき。単体では視認できない濃度に抑える */
.layer-grain {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
    opacity: 0.05;
    mix-blend-mode: overlay;
}

/* ② 周辺減光：中央から外へ落として、面が奥へ回り込んで見えるようにする */
.layer-vignette {
    background: radial-gradient(118% 78% at 50% 40%, transparent 36%, rgba(6, 4, 3, 0.45) 100%);
}

/* ③ 上端の陰と足元の影：セクション同士が板のように積み重なって見える */
.layer-plane {
    background:
        linear-gradient(180deg, rgba(6, 4, 3, 0.55) 0%, rgba(6, 4, 3, 0) 16%),
        radial-gradient(92% 42% at 50% 106%, rgba(6, 4, 3, 0.72), transparent 72%);
}

/* ── カード ──
   背景1枚＋枠線1本の平板なカードをやめ、面の陰影・厚み・落ち影で立体にする。 */
.card-lux {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 30px 28px 32px;
    background: linear-gradient(180deg, rgba(56, 44, 30, 0.55) 0%, rgba(31, 24, 17, 0.94) 44%, rgba(22, 17, 12, 0.97) 100%);
    border: 1px solid rgba(70, 56, 41, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(244, 239, 230, 0.06),   /* 上端のハイライト＝板の厚み */
        0 22px 44px -26px rgba(0, 0, 0, 0.95),     /* 落ち影で浮かせる */
        0 3px 10px -6px rgba(0, 0, 0, 0.7);
    transition: transform 0.5s var(--ease-out), border-color 0.5s ease, box-shadow 0.5s ease;
}

/* 左上から当たる弱い光。金色ではなく温白色にして、艶ではなく面の向きとして読ませる */
.card-lux::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(125% 95% at 6% -6%, rgba(255, 246, 230, 0.055), transparent 58%);
    pointer-events: none;
}

/* 上辺の金の細線。左から中央にかけて消え入る（.eyebrow の罫線と同じ語彙） */
.card-lux::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(199, 154, 62, 0.5) 0%, rgba(199, 154, 62, 0.12) 40%, transparent 74%);
}

/* 浮き上がりは横並びの短いカードだけに付ける。長い説明パネルが動くと落ち着かない */
.card-lux--hover:hover {
    transform: translateY(-3px);
    border-color: rgba(199, 154, 62, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(244, 239, 230, 0.08),
        0 30px 52px -26px rgba(0, 0, 0, 0.95),
        0 3px 10px -6px rgba(0, 0, 0, 0.7);
}

/* 写真を上端まで届かせるカード（内側で padding を持つ） */
.card-lux--flush { padding: 0; }

/* 大きい説明パネル */
.card-lux--lg { border-radius: 22px; padding: 32px 28px 34px; }

@media (min-width: 768px) { .card-lux--lg { padding: 40px; } }

/* 見出しの導入に使う通し番号（明朝）。アイコンを主役に据えると記号的で安く見えるため、
   番号＋英字ラベル（.eyebrow）＋明朝の見出し、という誌面的な組みに置き換える。 */
.idx-no {
    font-family: "Noto Serif JP", serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #e6cd92 0%, #c79a3e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 見出しと本文のあいだの短い罫線 */
.card-lux__rule {
    display: block;
    width: 34px;
    height: 1px;
    margin: 12px 0 14px;
    background: linear-gradient(90deg, rgba(199, 154, 62, 0.85), rgba(199, 154, 62, 0));
}

/* 画像フレーム共通 */
.media-frame { position: relative; overflow: hidden; }

.media-frame img { transition: transform 0.7s ease, filter 0.7s ease; }

.media-frame:hover img { transform: scale(1.045); filter: brightness(1.06); }

.media-ring { box-shadow: inset 0 0 0 1px rgba(230, 205, 146, 0.16); }

/* スクロール演出 */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── モーション・トークン ──
   サイト全体で速さと「間」を揃えるための基準値。演出を足すときはここを参照する。 */
:root {
    --ease-out: cubic-bezier(.16, 1, .3, 1);   /* 主役の登場：勢いよく出て静かに止まる */
    --fx-char-step: 45ms;                      /* 一文字あたりの送り */
    --fx-lead: 300ms;                          /* 周りが動き出すのを待ってから始める */
    --fx-open: 1400ms;                         /* 開幕：写真が像を結ぶまで */
    --fx-stage-lead: 600ms;                    /* 開幕を待たずに文字を書き始める頭出し */
    --fx-step-gap: 140ms;                      /* 段送りの間隔（バッジ→CTA） */
    --hero-slide-hold: 9000ms;                 /* ヒーロー1枚を見せる時間。JSの切替間隔もここから読む（単位はmsで統一） */
}

.lightbox-scroll img { cursor: zoom-in; }

.lightbox-scroll.is-zoomed { justify-content: flex-start; }

.lightbox-scroll.is-zoomed img {
    max-width: none; max-height: none;
    width: 240%; height: auto; flex-shrink: 0;
    cursor: zoom-out;
}

/* ヘッダーの境目（修正リスト No.30）
   セクションの地は #14100c、ヘッダーも bg-luxury-dark/90 だったため、
   スクロールするとヘッダーが背景に溶けて「どこまでがメニューか」が読めなかった。
   ページの地より一段沈めた色を敷き、下辺に金の細線を1本入れて境目を作る。
   線は .eyebrow と同じ語彙（中央から端へ消える金）にして、装飾ではなく構造として読ませる。 */
nav.nav-bar {
    background: rgba(9, 7, 5, 0.93);
    border-bottom-color: transparent;
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.95);
}

nav.nav-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(199, 154, 62, 0.5) 22%, rgba(199, 154, 62, 0.5) 78%, transparent);
    pointer-events: none;
}

/* スクロールでナビを隠す動き（.nav-hidden）は外した。
   先方から「スクロールで上のメニューを消さないで」とのご要望（2026/9/29）。常に上に出したままにする。 */

/* ナビのドロップダウン（アクセス配下） */
.nav-item { position: relative; }

.nav-caret { transition: transform 0.2s ease; }

.nav-item:hover .nav-caret, .nav-item:has(:focus-visible) .nav-caret { transform: rotate(180deg); }

.nav-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    padding-top: 26px; /* ナビ下端までの透明な橋（ホバーが途切れないように） */
    min-width: 208px; opacity: 0; visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.nav-item:hover .nav-menu, .nav-item:has(:focus-visible) .nav-menu { opacity: 1; visibility: visible; }

.nav-menu-inner {
    background: rgba(20, 16, 12, 0.97); border: 1px solid #463829;
    border-radius: 12px; padding: 6px; backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.nav-menu-inner a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 8px; color: #d9cdb8;
    transition: background 0.18s ease, color 0.18s ease;
}

.nav-menu-inner a:hover, .nav-menu-inner a:focus-visible { background: rgba(230, 205, 146, 0.1); color: #e6cd92; }

/* モバイルメニュー（lg未満のドロワー） */
.mobile-menu { position: fixed; inset: 0; z-index: 70; visibility: hidden; }

.mobile-menu.is-open { visibility: visible; }

.mobile-menu-backdrop {
    position: absolute; inset: 0;
    background: rgba(6, 4, 3, 0.72); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity 0.28s ease;
}

.mobile-menu.is-open .mobile-menu-backdrop { opacity: 1; }

.mobile-menu-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(86vw, 340px); display: flex; flex-direction: column;
    background: #14100c; border-left: 1px solid #2f2619;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
    transform: translateX(100%); transition: transform 0.3s ease;
}

.mobile-menu.is-open .mobile-menu-panel { transform: none; }

.mobile-link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 2px; border-bottom: 1px solid #2f2619;
    color: #f4efe6; font-weight: 700; font-size: 15px;
}

.mobile-link:active { color: #e6cd92; }

.mobile-sub {
    display: flex; flex-direction: column;
    padding: 4px 0 8px 14px; border-bottom: 1px solid #2f2619;
}

.mobile-sub a { display: flex; align-items: center; gap: 8px; padding: 10px 2px; color: #a7967c; font-size: 14px; }

.mobile-sub a:active { color: #e6cd92; }

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-backdrop, .mobile-menu-panel { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .card-lux { transition: none; }
    .card-lux--hover:hover { transform: none; }
}

h1, h2, h3, h4 {
    font-feature-settings: "palt";
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* keep-all は日本語の一文を分割不能な1語として扱うため、狭い画面では
   行末が緊急改行になり1文字だけ次行に落ちる。スマホでは解除する */
@media (max-width: 767px) {
    h1, h2, h3, h4 { word-break: normal; }
    /* auto-phrase を対応ブラウザだけに効かせるため、normal と2行に分ける */
    h1, h2, h3, h4 { word-break: auto-phrase; }
}

.gold-gradient-text {
    background: linear-gradient(135deg, #e6cd92 0%, #c79a3e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    /* 塗りを透過させて背景のグラデーションを出す。color と -webkit-text-fill-color は
       ブラウザによってどちらが効くかが違うので両方書く（以前はページごとに片方だけで、
       index と法務ページで書き方が割れていた）。 */
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #c79a3e;
}

.eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c79a3e);
}

/* サイト名。正式名称の「PARTNERS」を2行目に小さく置く（案A、2026/10/21 先方決定）。
   ヘッダーとフッターで同じマークアップを使う */
.site-name { display: inline-flex; flex-direction: column; line-height: 1.1; vertical-align: middle; }
.site-name__sub { margin-top: .3em; font-size: .62em; letter-spacing: .48em; color: inherit; opacity: .85; }