/* About 3 案の共通（色・書体はサイト本体と同じ）。10/26 */
@font-face { font-family: "Fraunces"; src: url(f/yj-fraunces-500.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex"; src: url(f/yj-plex-latin-regular.woff2) format("woff2"); font-weight: 400; unicode-range: U+0020-00FF, U+2000-206F, U+2100-21FF; }
@font-face { font-family: "Plex"; src: url(f/yj-plex-latin-medium.woff2) format("woff2"); font-weight: 500; unicode-range: U+0020-00FF, U+2000-206F, U+2100-21FF; }
@font-face { font-family: "Plex"; src: url(f/yj-plex-latin-semibold.woff2) format("woff2"); font-weight: 600; unicode-range: U+0020-00FF, U+2000-206F, U+2100-21FF; }
@font-face { font-family: "Plex"; src: url(f/yj-plex-jp-regular.woff2) format("woff2"); font-weight: 400; unicode-range: U+3000-9FFF, U+FF00-FFEF; }
@font-face { font-family: "Plex"; src: url(f/yj-plex-jp-medium.woff2) format("woff2"); font-weight: 500; unicode-range: U+3000-9FFF, U+FF00-FFEF; }
@font-face { font-family: "Plex"; src: url(f/yj-plex-jp-semibold.woff2) format("woff2"); font-weight: 600; unicode-range: U+3000-9FFF, U+FF00-FFEF; }
:root {
  --wall: #e2eaec; --floor: #fbf6db; --ink: #303235; --ink2: #5d5a52; --lime: #d6f26b; --wine: #8e3b3b; --teal: #3d6f6a; --line: 2.4px;
  --display: "Fraunces", "Plex", "Hiragino Sans", serif; --ui: "Plex", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--floor); color: var(--ink); font: 500 16px/1.75 var(--ui); font-feature-settings: "palt"; letter-spacing: .01em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
.dsp { font-family: var(--display); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.015em; }
[lang="ja"] { line-break: strict; }   /* 長い本文は普通に折り返す（keep-all だと句読点でしか折れず行がガタガタになる） */

/* 共通のヘッダー（サイトと同じ形の簡易版）と、案の切り替え */
.hd { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 40px; }
.hd img { width: 200px; }
.hd nav { display: flex; gap: 22px; font-weight: 600; font-size: 14px; }
.hd nav a { text-decoration: none; }
.pick { position: fixed; z-index: 50; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 4px; padding: 4px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: 600 13px/1 var(--ui); }
.pick a { padding: 9px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.pick a[aria-current] { background: var(--ink); color: #fff; }
.ft { padding: 40px 40px 120px; border-top: var(--line) solid var(--ink); font-size: 13px; color: var(--ink2); }
@media (max-width: 1080px) { .hd { height: 60px; padding: 0 20px; } .hd img { width: 150px; } .hd nav { gap: 14px; font-size: 13px; } .ft { padding: 32px 20px 110px; } }