@charset "utf-8"; /* ============================================================================ LIFE EDIT MARKET — design refresh v1 2026-08-30 / 新規ファイル。既存CSSは1行も書き換えていない（追記でもなく別ファイル）。全334ページで直前に読み込まれるため、常にカスケード最後になる。前提（FACTS-life-edit.md） - 332ページのは無属性。body#top は /index.html と /en/index.html の2枚のみ。 - 地色は --ref-paper(#F7F4EE)、本文色は --ref-ink(#1F2921)。--bg/--text は body に効いていない。 - /en/index.html は主要トークン全未定義、/guides/adult-travel/ は旧 v14 の1段 :root。 → すべての var() に fallback を書く。 - .navband nav の display は既存で8回競合。上書きには !important が必須。 ========================================================================== */ /* --------------------------------------------------------------------------- 0. トークン（新色なし。既存トークンの参照と、その最終実測値をフォールバックに使う） ------------------------------------------------------------------------- */ :root{ --ler-paper:var(--ref-paper,#F7F4EE); --ler-ink:var(--ref-ink,#1F2921); --ler-quiet:#4E493F; /* = --sub の最終値。全ページで同値に揃える */ --ler-line:var(--ref-line,#DCD4C7); --ler-accent:var(--accent,#26382D); --ler-accent-hover:var(--accent-hover,#17251D); --ler-dark:var(--ref-dark,#223026); --ler-on-dark:#F7F4EE; /* = --ref-paper。濃緑面の上の文字 */ --ler-surface:var(--surface,#FFFDF8); /* 余白スケール（8 / 16 / 24 / 36 / 56 / 80 / 112 / 148） */ --ler-s1:8px; --ler-s2:16px; --ler-s3:24px; --ler-s4:36px; --ler-s5:56px; --ler-s6:80px; --ler-s7:112px; --ler-s8:148px; /* モーション（SPEC.md 2章。数値は1msも変えない） */ --ler-ease:cubic-bezier(.22,.61,.36,1); --ler-in:520ms; /* 出現 */ --ler-stagger:70ms; /* リストの stagger */ --ler-lines:90ms; /* 見出しの行送り */ --ler-hero:1200ms; /* ヒーロー画像 scale(1.04)→1 = 1.2s */ --ler-cta:200ms; /* ファーストビューCTAの遅れ */ --ler-img:600ms; /* ホバー画像 */ --ler-ui:300ms; /* 下線・カード */ } /* --accent2（#9A6E51 / 旧世代は #B08968）は 9〜11px の英字ラベルに広く使われていて、淡い地色の上で 3.1〜4.4:1 しか出ていない。新色は足さず、既存トークン同士の color-mix（--accent2 と --ref-ink）で同系のまま一段深くする。背景色として使われている箇所は無い（参照中CSS 33本を確認）ので副作用が無い。 */ :root{ --accent2:#69523E; /* color-mix 未対応環境向けの同値 */ --accent2:color-mix(in srgb,#9A6E51 60%,#1F2921); --color-accent-2:var(--accent2); --category-gold:#6E5236; /* 同上（main.wrap .eyebrow 用） */ --category-gold:color-mix(in srgb,#A8784E 60%,#172019); --global-brass:#6E4C2F; /* /en/ 用。同じ考え方 */ --global-brass:color-mix(in srgb,#A97A51 58%,#14231C); --ler-brass-deep:#6D5338; /* 直書き #A16F48 / #A36F4D 用 */ --ler-brass-deep:color-mix(in srgb,#A16F48 60%,#1F2921); --ref-brass:#6A5340; /* 4.0:1 だった。下線と小ラベルにのみ使われている */ --ref-brass:color-mix(in srgb,#9B7658 60%,#1F2921); /* editorial-depth-v5.css / culture-atlas-v22.css が :root を持たないまま var(--ink) 21回・var(--copper) 45回・var(--muted) 37回を fallback 無しで参照している。未定義なので background:var(--ink) が無効になり、白文字が淡色地に乗って 1.14:1 になっていた。既存トークンのエイリアスとして定義するだけで、新色は足していない。 */ --ink:var(--ref-ink,#1F2921); --muted:#4E493F; /* = --sub の最終値 */ --copper:#6D5338; /* = --ler-brass-deep */ --copper:color-mix(in srgb,#A16F48 60%,#1F2921); --pro-gold:#6E4F33; /* travel-photography-v6（3.7:1 だった） */ --pro-gold:color-mix(in srgb,#A8764E 60%,#1F2921); } /* --------------------------------------------------------------------------- 1. タイポグラフィ — 見出し / リード / 補足の3段 ------------------------------------------------------------------------- */ h1,h2,h3,h4,h5, .compareTitle,.killerCard h3,.readingCard strong,.categoryAtlasCard h3{ font-feature-settings:"palt" 1; font-kerning:normal; } /* 第1段：見出し。行間を締めて塊として見せる */ h1{line-height:1.34} h2{line-height:1.42;margin-bottom:var(--ler-s2)} h3{line-height:1.48} h4,h5{line-height:1.55} main.wrap .fBody h2,main.wrap .fBody h3{line-height:1.42} .cultureHero h1,.itemPage>.section>h1{line-height:1.32} /* 第2段：リード。本文よりわずかに大きく、行間は広く、色は --ler-quiet */ .secLead,.lead,.killerZone__lead,.accessRecovery__head p,.cultureManifesto div p, .stayLengthPlanner__head>p{ /* clamp(15px,1.1vw,17px) は 1.1vw が 1364px 未満で 15px を下回るため下限に張り付き、本文（15px）と同サイズになって第2段が機能していなかった（design-qa round1 / 不合格10）。vw 依存をやめ、下限を本文より上に置く。 390px = 16.8px / 768px 以上 = 18px。全幅で本文 15px より 1.8px 以上大きい。 */ font-size:clamp(16.5px,.6vw + 14.5px,18px); line-height:1.9; max-width:38em; margin-top:var(--ler-s2); } .secLead,.lead,.accessRecovery__head p,.cultureManifesto div p,.stayLengthPlanner__head>p{ color:var(--ler-quiet); } /* body#top のリードは v38 で --ref-muted（淡い地の上で 4.48:1）が id 詳細度で効いている */ .killerZone__lead,body#top .killerZone__lead{color:var(--ler-quiet)!important} main.wrap .secLead,main.article .secLead{max-width:38em} /* 上のサイズ指定（詳細度 0,1,0）は既存の main.wrap .secLead / main.article .secLead（v38:3447 / eg-v32:3397 = 0,2,1 / 15px、同ファイルの狭幅 @media 版は 14px） body#top .killerZone__lead（v38:2312 = 1,1,0 / 15px）に負けて、実測が 14〜15px＝本文と同サイズのままだった。同じ詳細度で書き足す。（@media はカスケードの詳細度に影響しないので、後から読まれるこちらが勝つ） */ main.wrap .secLead,main.article .secLead, main.wrap .lead,main.article .lead, main.wrap .accessRecovery__head p, body#top .secLead,body#top .section .secLead, body#top .killerZone__lead, body#top .accessRecovery__head p{ font-size:clamp(16.5px,.6vw + 14.5px,18px); line-height:1.9; } /* 濃い面の上のリードは触らない（既存の明るい色を残す） */ .adultTravelHero .secLead,.revenuePage>.section:first-child .secLead, .categoryHero .categoryHero__lead,.festivalHero p,.depthHero p{color:inherit} /* 第3段：補足。小さく・静かに。ただし色は必ず --ler-quiet 以上の濃さを保つ */ .caption,.src,.note,.rate,.storeNote,.prnote,.dateline,.asuraku,.spec .src, .cardStoreNote,.supportNote{ font-size:12px; line-height:1.8; color:var(--ler-quiet); } .compareDate,.comparePlaceholder,.compareLead{font-size:12px;line-height:1.8} /* 本文（第2段と第3段の間） */ .judge,.card p,.killerCard p,.accessRecoveryCard p,.readingCard__text, .stayLengthCard__note,.cultureHero>div>p:not(.cultureLabel){color:var(--ler-quiet)} /* .fBody 直下の段落だけ。孫（濃緑の .priceCompare の中など）には効かせない */ main.wrap .fBody>p{color:var(--ler-quiet)} /* 景表法・ステマ規制の表示。before は 1.34:1 でほぼ読めなかった。 head 内インライン