/* ============================================================= * ACADELI Media styles.css（この1本だけ） * * 層（@layer）。後ろの層が前の層に勝つ。詳細度ではなく層の順で決まる * tokens 決めごとの値（:root。文字・余白・色・角R・影・線・ブロックの寸法） * base 素の要素と、main 直下の既定（部品が上書きできるよう、いちばん下） * surfaces 節の面（l-surface--*） * parts 部品（c-*）。スマホの見た目 * blocks main 直下の型と余白（l-hero / l-section …） * pc PC幅での上書き（431 / 768 / 1000 / 1200px） * * 決まり * ・文字は var(--fs-N)、余白は var(--sp-N)、色・角・影・線も名前つきの値だけ * ・接頭辞 l- 配置 / c- 部品 / is- 状態 / u- 一度きり（命名規則.md） * ・変種（--x）は「見た目が本当に違うもの」だけ。面が決める色は変種にしない * ============================================================= */ /* 層（レイヤー）。後ろの層が前の層に勝つ。詳細度ではなく、層の順で決まる。 * tokens 決めごとの値（:root） base 素の要素 surfaces 節の面（l-surface--*） * parts 部品（c-*）スマホの見た目 blocks main 直下の型と余白 pc PC幅での上書き */ @layer tokens, base, surfaces, parts, blocks, pc; @layer tokens { :root { --ink: #171714; --paper: #f3f0e6; --cream: #fbf9f1; --red: #ad4934; --moss: #5d6747; --blue: #274a58; --line: rgba(23, 23, 20, .18); --shadow: 0 8px 22px var(--shade); /* 影は3種類だけ：置いてあるもの／持ち上がったもの／下の帯 */ --shadow-lift: 0 12px 28px var(--shade-strong); --shadow-up: 0 -8px 22px var(--shade); --bw: 1px; /* 線は2種類だけ：細い罫／太い罫 */ --bw-strong: 2px; --radius: 22px; /* 角Rはこの1種類だけ。丸（50%）は形なので別。角を落とす所は var(--radius) を使う */ /* 色の名前。色は var(--…) だけを書く（例外：画像に重ねる黒の膜は直書き） */ --ink-soft: #625d56; --ink-mute: #706a62; --sand: #e8e2d7; --sand-light: #eee8dc; --sand-deep: #ded9cf; --mist: #dfe5e4; --mist-deep: #ccd6d7; --red-light: #c4533d; --red-deep: #743326; --on-dark: rgba(255,255,255,.72); --on-dark-weak: rgba(255,255,255,.6); --line-strong: rgba(23,23,20,.28); --rule-dark-faint: rgba(255,255,255,.16); --rule-dark: rgba(255,255,255,.25); --rule-dark-strong: rgba(255,255,255,.5); --shade: rgba(23,23,20,.08); --shade-strong: rgba(23,23,20,.15); --cream-glass: rgba(251,249,241,.91); --serif: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif; --sans: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; /* 余白の級。padding / margin / gap は var(--sp-N) だけを書く。1〜2px の線まわりだけ px を直接書いてよい。 */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; --sp-72: 72px; --sp-80: 80px; /* 文字の級（スマホの値）。PCは 768px〜 の :root で同じ名前を書き換える。 * 文字寸法は var(--fs-N) だけを使う。px を直接書かない。 */ --fs-1: 6px; --fs-2: 7px; --fs-3: 8px; --fs-4: 9px; --fs-5: 10px; --fs-6: 11px; --fs-7: 12px; --fs-8: 14px; --fs-9: 16px; --fs-10: 18px; --fs-11: 20px; --fs-12: 22px; --fs-13: 25px; --fs-14: 28px; --fs-15: 31px; --fs-16: 34px; --fs-17: 40px; --fs-18: 52px; } @media (min-width: 768px) { :root { --fs-1: 9px; --fs-2: 10px; --fs-3: 12px; --fs-4: 13px; --fs-5: 14px; --fs-6: 15px; --fs-7: 17px; --fs-8: 18px; --fs-9: 20px; --fs-10: 22px; --fs-11: 23px; --fs-12: 25px; --fs-13: 29px; --fs-14: 32px; --fs-15: 33px; --fs-16: 36px; --fs-17: 42px; --fs-18: 55px; } } :root { --pad: 20px; /* ブロックの左右。全ページ共通 */ --tall: 72px; /* 本体の縦 */ --thin: 18px; /* 帯の縦 */ --mid: 52px; /* 文字の表紙の縦 */ } @media (min-width: 768px) { :root { --pad: clamp(24px, 4vw, 56px); --tall: clamp(64px, 6vw, 104px); --thin: 22px; --mid: clamp(56px, 5vw, 88px); } } :root { --shell: 1200px; /* 並べる幅 */ --read: 680px; /* 読む幅。日本語で36字前後 */ --pin: clamp(420px, 44vw, 660px); /* 左に固定する表紙の幅 */ --navh: 64px; /* 上のナビの高さ */ } } @layer base { * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--sand-deep); } body { margin: 0; color: var(--ink); background: var(--sand-deep); font-family: var(--sans); -webkit-font-smoothing: antialiased; } body.is-menu-open { overflow: hidden; } a { color: inherit; text-decoration: none; } img { display: block; width: 100%; } button { color: inherit; font: inherit; } h1, h2, h3, p, figure { margin-top: 0; } .l-page { position: relative; width: 100%; max-width: 430px; min-height: 100vh; margin-inline: auto; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-lift); } /* main 直下の既定。部品が自分で上書きできるよう、いちばん下の層に置く */ main > * { padding-inline: var(--pad); margin-inline: 0; } @media (min-width: 1200px) { main > * { position: relative; z-index: 1; } } @media (min-width: 768px) { main img { max-height: 72vh; } } } @layer surfaces { /* ── 面（節の背景と文字色）───────────────────────────── * main の直下に置く節の色は、ここの8つから選ぶ。 * :where() で詳細度を0にしてあるので、部品が自分で持つ文字色（パンくずなど）を上書きしない。 * 2026-09-20 まで、背景色は節ごとに個別のルールに書かれていた（73件）。 * sand は薄い3色（#eee5dc / #e8e2d5 / #e8e2d7）を1つにしたもの。 */ :where(.l-surface--ink) { color: var(--cream); background: var(--ink); } :where(.l-surface--moss) { color: var(--cream); background: var(--moss); } :where(.l-surface--blue) { color: var(--cream); background: var(--blue); } :where(.l-surface--red) { color: var(--cream); background: var(--red); } :where(.l-surface--cream) { color: var(--ink); background: var(--cream); } :where(.l-surface--paper) { color: var(--ink); background: var(--paper); } :where(.l-surface--sand) { color: var(--ink); background: var(--sand); } :where(.l-surface--mist) { color: var(--ink); background: var(--mist); } } @layer parts { /* ── c-card ─────────────────────────────────────────── * 選ぶのは「型」1つ ＋ 見た目の切り替え（任意）。 * 型 （既定＝写真が上）／ --side 写真が左 ／ --text 写真なし ／ * --event 日付つき ／ --entry 番号つき ／ --tile 文字だけの箱 ／ --story 見出しつきの1枚 * 写真の比率 （既定 3:2）／ --square ／ --portrait 4:5 ／ --free 元のまま * 面 --boxed クリームの台（角丸＋影） * 飾り --soft 写真の四隅を丸める（side・text は上の罫つき） * スロット c-card-media / -badge / -overlay / -meta / -body / -kicker / -title / -text / -tags / -action * 暗い地（l-surface--ink など）の上では、文字色が自動で明るくなる。 */ .c-card { --ratio: 3 / 2; position: relative; display: block; } .c-card[hidden] { display: none; } .c-card > a { display: block; } .c-card-media { position: relative; display: block; overflow: hidden; } img.c-card-media, .c-card-media > img { display: block; width: 100%; aspect-ratio: var(--ratio); object-fit: cover; } .c-card--square { --ratio: 1 / 1; } .c-card--portrait { --ratio: 4 / 5; } .c-card--free { --ratio: auto; } .c-card--event { --ratio: 11 / 10; border-bottom: var(--bw) solid var(--line); } .c-card--entry { --ratio: 1 / 1.08; min-width: 84%; margin: 0; padding-bottom: var(--sp-20); background: var(--cream); scroll-snap-align: center; } .c-card--free img.c-card-media, .c-card--free .c-card-media > img { height: auto; } .c-card-body { display: flex; flex-direction: column; padding: var(--sp-16) 0 0; } .c-card-kicker, .c-card-title, .c-card-text, .c-card-tags { margin: 0; } .c-card-kicker { margin-bottom: var(--sp-12); font-size: var(--fs-1); font-weight: 700; letter-spacing: .1em; color: var(--ink-mute); } .c-card-title { font-family: var(--serif); font-size: var(--fs-11); font-weight: 500; line-height: 1.65; } .c-card-text { margin-top: var(--sp-12); font-size: var(--fs-4); line-height: 1.9; color: var(--ink-mute); } .c-card-tags { margin-top: var(--sp-12); padding-top: var(--sp-12); border-top: var(--bw) solid var(--line); font-size: var(--fs-2); font-style: normal; color: var(--ink-mute); } .c-card-action { align-self: flex-end; margin-top: var(--sp-16); font-size: var(--fs-2); font-style: normal; font-weight: 700; } .c-card-badge { position: absolute; z-index: 1; top: 12px; left: 12px; padding: var(--sp-8); color: var(--cream); background: var(--ink); font-size: var(--fs-1); font-style: normal; font-weight: 700; letter-spacing: .1em; } .c-card-badge--light { color: var(--ink); background: var(--cream-glass); } .c-card-badge--blue { background: var(--blue); } .c-card-badge--moss { background: var(--moss); } .c-card-badge--red { background: var(--red); } .c-card-overlay { position: absolute; z-index: 1; bottom: var(--sp-20); left: 18px; display: flex; align-items: baseline; gap: var(--sp-8); color: var(--cream); font-family: var(--serif); font-size: var(--fs-17); font-weight: 500; letter-spacing: .04em; } .c-card-overlay small { font-family: var(--sans); font-size: var(--fs-2); font-weight: 700; letter-spacing: .1em; } .c-card-media:has(.c-card-overlay)::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.6)); pointer-events: none; } /* 面と飾り */ .c-card--boxed { overflow: hidden; color: var(--ink); background: var(--cream); border-radius: var(--radius); box-shadow: var(--shadow); } .c-card--boxed .c-card-body { padding: var(--sp-20); } /* 特集の入口（トップの moss の節）のカードだけ、文字は墨色のまま（元の見た目を保つ。コントラストは低めなので要確認） */ .c-shelf .c-card { color: var(--ink); } .c-card--soft .c-card-media { border-radius: var(--radius); } /* 暗い地の上では、文字を明るくする（台つきは除く） */ :where(.l-surface--ink, .l-surface--moss, .l-surface--blue, .l-surface--red) .c-card:not(.c-card--boxed) .c-card-kicker { color: var(--on-dark-weak); } :where(.l-surface--ink, .l-surface--moss, .l-surface--blue, .l-surface--red) .c-card:not(.c-card--boxed) .c-card-text { color: var(--on-dark); } :where(.l-surface--ink, .l-surface--moss, .l-surface--blue, .l-surface--red) :is(.c-card--side, .c-card--text) { border-color: var(--rule-dark); } /* --side 写真が左 */ .c-card--side { display: grid; padding-block: var(--sp-16); border-top: var(--bw) solid var(--line); grid-template-columns: 118px 1fr; gap: var(--sp-16); --ratio: 4 / 5; } .c-card--side > a { display: contents; } .c-card--side .c-card-body { min-width: 0; padding: 0; } .c-card--side .c-card-title { font-size: var(--fs-9); line-height: 1.6; } .c-card--side .c-card-action { margin-top: auto; } /* --text 写真なし（題と、右端の矢印） */ .c-card--text { padding-block: var(--sp-16); border-top: var(--bw) solid var(--line); display: flex; align-items: end; justify-content: space-between; gap: var(--sp-12); } .c-card--text .c-card-body { padding: 0; } .c-card--text .c-card-title { font-size: var(--fs-7); line-height: 1.7; } .c-card--text .c-card-action { margin: 0; padding-bottom: 2px; } .c-filter { position: sticky; top: 58px; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--cream); border-bottom: var(--bw) solid var(--line); } .c-filter button { padding: var(--sp-16) var(--sp-4) var(--sp-16); cursor: pointer; border: 0; border-bottom: var(--bw-strong) solid transparent; background: transparent; font-size: var(--fs-4); } .c-filter button.is-active { border-bottom-color: var(--red); font-weight: 700; } .c-sectionhead { position: relative; margin-bottom: var(--sp-32); } .c-cta { display: flex; justify-content: space-between; } .c-notice { font-size: var(--fs-3); line-height: 1.9; } .c-lead { margin: 0 0 var(--sp-32); font-family: var(--serif); font-size: var(--fs-6); line-height: 2; color: var(--ink-soft); } :where(.l-surface--ink, .l-surface--moss, .l-surface--blue, .l-surface--red) .c-lead { color: var(--on-dark); } .c-lead--large { font-size: var(--fs-9); color: inherit; } /* 見出しのすぐ下にリード文が来るときの間隔は、見出し側が持つ。 * かつては リード文が -11/-12/-13px の負のmargin で自分を引き上げていた。 * 負のmarginは「隣に何が来るか」で壊れるので使わない（2026-09-16）。 */ .c-sectionhead:has(+ .c-lead, + .c-notice) { margin-bottom: var(--sp-24); } .c-header { position: sticky; z-index: 50; top: 0; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 var(--sp-20); color: var(--cream); background: var(--ink); } .c-header-logo { line-height: 1; } .c-header-logo span { display: block; font-family: "Shippori Mincho", var(--serif); font-size: var(--fs-10); font-weight: 600; letter-spacing: .16em; } .c-header-logo small { display: block; margin-top: var(--sp-4); font-size: var(--fs-3); font-weight: 400; letter-spacing: .12em; opacity: .78; } .c-footer-brand .c-header-logo { font-family: "Shippori Mincho", var(--serif); font-size: var(--fs-9); font-weight: 600; letter-spacing: .16em; } .c-menubutton { position: relative; z-index: 2; display: grid; width: 38px; height: 38px; padding: 0; cursor: pointer; border: 0; background: transparent; place-content: center; gap: var(--sp-8); } .c-menubutton span { display: block; width: 21px; height: 1px; background: currentColor; transition: transform .25s; } .c-menubutton[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .c-menubutton[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } .c-menu { position: fixed; z-index: 1; top: 58px; width: min(100%, 430px); height: calc(100dvh - 58px); padding: var(--sp-28) var(--sp-20); color: var(--cream); background: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .25s ease; } .c-menu[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none; } .c-menu a { display: grid; grid-template-columns: 35px 1fr; padding: var(--sp-16) 0; font-family: var(--serif); font-size: var(--fs-12); border-bottom: var(--bw) solid var(--rule-dark-faint); } .c-menu small { padding-top: var(--sp-8); font-family: var(--sans); font-size: var(--fs-2); } .c-breadcrumb { overflow-x: auto; padding-block: var(--sp-12) var(--sp-12); color: var(--ink-soft); border-bottom: var(--bw) solid var(--line); scrollbar-width: none; } .c-breadcrumb::-webkit-scrollbar { display: none; } .c-breadcrumb ol { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; } .c-breadcrumb li { display: flex; align-items: center; font-size: var(--fs-4); font-weight: 700; line-height: 1.45; letter-spacing: .06em; white-space: nowrap; } .c-breadcrumb li + li::before { margin: 0 var(--sp-8); content: "/"; opacity: .34; } .c-breadcrumb a { padding-bottom: 2px; border-bottom: var(--bw) solid currentColor; } .c-breadcrumb li[aria-current="page"] { max-width: 155px; overflow: hidden; font-weight: 400; opacity: .72; text-overflow: ellipsis; } .c-breadcrumb--dark { color: var(--on-dark); border-color: var(--rule-dark-faint); } .c-back { position: fixed; z-index: 44; bottom: max(16px, env(safe-area-inset-bottom)); left: max(14px, calc(50% - 201px)); display: grid; width: 38px; height: 38px; padding: 0; place-items: center; cursor: pointer; color: var(--cream); background: rgba(23,23,20,.7); border: var(--bw) solid var(--rule-dark); border-radius: 50%; box-shadow: var(--shadow); font-family: inherit; font-size: var(--fs-10); font-weight: 300; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .2s, transform .2s, background .2s; } .c-back span { display: block; transform: translateY(-1px); } .c-back:hover { background: rgba(23,23,20,.84); transform: translateY(-1px); } .c-back:focus-visible { outline: var(--bw-strong) solid var(--cream); outline-offset: 2px; } .c-back--with-cta { bottom: calc(88px + env(safe-area-inset-bottom)); } .is-menu-open .c-back { opacity: 0; pointer-events: none; } @keyframes hero-in { from { opacity: .2; } to { opacity: 1; } } .c-sectionhead--main { } .c-sectionhead--main .c-sectionhead-kicker { margin-bottom: var(--sp-12); font-size: var(--fs-3); font-weight: 700; letter-spacing: .16em; } .c-sectionhead--main .c-sectionhead-kicker span { display: inline-block; min-width: 31px; } .c-sectionhead--main .c-sectionhead-title { margin: 0; font-family: var(--serif); font-size: var(--fs-14); font-weight: 500; line-height: 1.55; letter-spacing: .035em; } .c-sectionhead--main .c-sectionhead-aside { position: absolute; right: 0; bottom: 5px; font-size: var(--fs-2); letter-spacing: .13em; } .c-collection--rule { border-top: var(--bw) solid var(--line); } .c-cta--more { margin-top: var(--sp-28); padding: var(--sp-16) 1px; font-size: var(--fs-4); font-weight: 700; letter-spacing: .08em; border-bottom: var(--bw) solid var(--ink); } .c-notice--shelf { margin: var(--sp-48) 0 0; padding-top: var(--sp-20); color: var(--on-dark-weak); border-top: var(--bw) solid var(--rule-dark); } .c-sectionhead--type { display: grid; grid-template-columns: 27px 1fr auto; grid-template-rows: auto 1fr; gap: 0 var(--sp-12); align-items: start; padding-top: var(--sp-16); border-top: var(--bw) solid currentColor; } .c-sectionhead--type .c-sectionhead-kicker { grid-row: 1 / span 2; margin: 0; padding-top: var(--sp-4); font-size: var(--fs-2); font-weight: 800; letter-spacing: .08em; writing-mode: vertical-rl; } .c-sectionhead--type .c-sectionhead-title { grid-column: 2; margin: 0 0 var(--sp-4); font-family: var(--serif); font-size: var(--fs-12); font-weight: 500; } .c-sectionhead--type .c-sectionhead-note { grid-column: 2; margin: 0; font-size: var(--fs-3); opacity: .6; } .c-sectionhead--type .c-sectionhead-aside { grid-column: 3; grid-row: 1; padding-top: var(--sp-4); font-size: var(--fs-2); font-weight: 700; letter-spacing: .08em; } /* c-rail: 横に流す帯（スマホ）。PCでは格子に開く。--flow は PC でも流したままにする（写真だけの帯） */ .c-rail { display: flex; gap: var(--sp-12); overflow-x: auto; padding-block: 0 var(--sp-20); outline: none; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; } .c-rail::-webkit-scrollbar { display: none; } .c-rail > .c-card { flex: 0 0 78%; scroll-snap-align: start; } .c-card--story { display: flex; overflow: hidden; flex-direction: column; padding: var(--sp-20); background: var(--cream); border-radius: var(--radius); box-shadow: var(--shadow); } .c-card--story .c-rail { margin-top: var(--sp-16); padding-bottom: 0; } .c-card--story .c-rail > .c-card-media { flex: 0 0 84%; scroll-snap-align: start; } .c-card--story .c-rail > .c-card-media:only-child { flex-basis: 100%; } :where(.c-card--story) .c-card-meta{ display: flex; align-items: center; justify-content: space-between; padding: 1px 2px var(--sp-12); border-bottom: var(--bw) solid var(--line); } :where(.c-card--story) .c-card-meta b{ font-size: var(--fs-2); letter-spacing: .12em; } :where(.c-card--story) .c-card-meta small{ font-size: var(--fs-1); letter-spacing: .08em; color: var(--ink-mute); } :where(.c-card--story) .c-card-media i{ position: absolute; top: 50%; left: 50%; min-width: 74%; padding: var(--sp-8) var(--sp-8); color: var(--ink); background: var(--cream-glass); font-family: var(--serif); font-size: var(--fs-3); font-style: normal; line-height: 1.7; text-align: center; transform: translate(-50%,-50%); } .c-card--story > em { align-self: flex-end; margin-top: var(--sp-16); font-size: var(--fs-2); font-style: normal; font-weight: 700; letter-spacing: .08em; } .c-cta--gateway { align-items: center; margin-block: var(--sp-64) 0; padding: var(--sp-24) 2px; border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); } .c-cta--gateway span { display: flex; flex-direction: column; } .c-cta--gateway small { margin-bottom: var(--sp-8); font-size: var(--fs-2); letter-spacing: .12em; } .c-cta--gateway strong { font-family: var(--serif); font-size: var(--fs-10); font-weight: 500; } .c-cta--gateway b { font-size: var(--fs-10); font-weight: 400; } .c-notice--priority { margin: 0 0 var(--sp-28); padding-left: var(--sp-12); font-family: var(--serif); color: var(--on-dark-weak); border-left: var(--bw-strong) solid var(--moss); } /* この2つは、余白をカード側が持つ（格子の桝／横並びのため）。 基底の 20px を戻す */ .c-cta--more-light { color: var(--cream); border-color: var(--rule-dark-strong); } .c-footer { padding: var(--sp-56) var(--sp-24) var(--sp-24); color: var(--cream); background: var(--ink); } .c-footer--with-cta { padding-bottom: 105px; } .c-footer-brand { padding-bottom: var(--sp-32); border-bottom: var(--bw) solid var(--rule-dark); } .c-footer .c-footer-brand .c-header-logo { display: inline-block; margin-bottom: var(--sp-16); font-size: var(--fs-12); } .c-footer .c-footer-brand p { margin: 0; font-family: var(--serif); font-size: var(--fs-8); } .c-footer-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24) var(--sp-12); padding: var(--sp-32) 0 var(--sp-40); } .c-footer-group { min-width: 0; } .c-footer-group--external { grid-column: auto; } .c-footer-group > small { display: block; margin-bottom: var(--sp-12); font-size: var(--fs-1); font-weight: 700; letter-spacing: .16em; opacity: .46; } .c-footer-group nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0; font-size: var(--fs-4); border: 0; } .c-footer-group nav a { display: flex; width: 100%; justify-content: space-between; padding: var(--sp-8) 0; line-height: 1.5; border-bottom: var(--bw) solid var(--rule-dark-faint); overflow-wrap: anywhere; } .c-footer-group--external nav { flex-direction: column; gap: 0; } .c-footer-group--external nav a { width: 100%; min-width: 0; } .c-footer-group--external nav span { margin-left: var(--sp-16); } .c-footer-bottom { display: flex; justify-content: space-between; padding-top: var(--sp-20); border-top: var(--bw) solid var(--rule-dark); } .c-footer-bottom small { display: block; margin: 0; font-size: var(--fs-1); letter-spacing: .1em; opacity: .48; } .c-toast { position: fixed; z-index: 90; right: 18px; bottom: 24px; left: 18px; max-width: 394px; margin-inline: auto; padding: var(--sp-12) var(--sp-16); color: var(--cream); background: rgba(23,23,20,.95); font-size: var(--fs-5); text-align: center; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s; } .c-toast.is-shown { opacity: 1; transform: none; } .u-reveal { opacity: 0; transform: translateY(15px); transition: opacity .65s ease, transform .65s ease; } .u-reveal.is-visible { opacity: 1; transform: none; } /* Shared detail pages */ /* Event */ .l-page--event { padding-bottom: var(--sp-72); } .l-page--event main [id] { scroll-margin-top: 58px; } /* c-sectionhead--rule: 罫線つきの小見出し（開催情報・開催した事実）。kicker と title が左右に離れる */ .c-sectionhead--rule { display: flex; align-items: end; justify-content: space-between; padding-bottom: var(--sp-16); border-bottom: var(--bw-strong) solid var(--ink); } .c-sectionhead--rule .c-sectionhead-kicker { margin: 0; padding-bottom: var(--sp-4); font-size: var(--fs-2); font-weight: 700; letter-spacing: .13em; } .c-sectionhead--rule .c-sectionhead-title { margin: 0; font-family: var(--serif); font-size: var(--fs-14); font-weight: 500; } /* すぐ下に断り書きが続くときは、その間隔をこちらが持つ */ .c-facts:has(+ .c-notice) { margin-bottom: var(--sp-20); } .c-facts { margin: 0 0 var(--sp-28); border-top: var(--bw) solid var(--line); } .c-facts > div { display: grid; grid-template-columns: 74px 1fr; padding: var(--sp-16) 0; border-bottom: var(--bw) solid var(--line); } .c-facts dt { padding-top: var(--sp-4); font-size: var(--fs-2); font-weight: 700; letter-spacing: .13em; } .c-facts dd { margin: 0; font-family: var(--serif); font-size: var(--fs-7); line-height: 1.75; } .c-facts dd b { font-size: var(--fs-9); font-weight: 500; } .c-facts dd small { color: var(--ink-mute); } .c-cta--action { width: 100%; align-items: center; padding: var(--sp-16) var(--sp-20); color: var(--cream); background: var(--red); border: 0; cursor: pointer; font-size: var(--fs-5); font-weight: 700; letter-spacing: .07em; } .c-cta--action-light { color: var(--ink); background: var(--cream); } .c-poster { margin-bottom: var(--sp-40); aspect-ratio: auto; object-fit: contain; width: auto; max-width: 100%; height: auto; max-height: min(120vw, 720px); margin-inline: auto; } .c-essay { margin-left: var(--sp-28); padding-left: var(--sp-20); border-left: var(--bw) solid var(--rule-dark); } .c-essay > p:last-child { margin: 0; font-size: var(--fs-5); line-height: 2.15; color: var(--on-dark); } .c-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .c-pair figure { margin: 0; } .c-pair img { height: 260px; object-fit: cover; } .c-pair figcaption { min-height: 77px; padding: var(--sp-12) var(--sp-12); font-family: var(--serif); font-size: var(--fs-9); background: rgba(0,0,0,.13); } .c-pair figcaption small { display: block; margin-bottom: var(--sp-8); font-family: var(--sans); font-size: var(--fs-1); } .c-notice--notes { margin-top: var(--sp-28); border-top: var(--bw) solid var(--rule-dark); } .c-notice--notes p { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-12); margin: 0; padding: var(--sp-16) 0; font-size: var(--fs-4); line-height: 1.9; color: var(--on-dark); border-bottom: var(--bw) solid var(--rule-dark); } .c-notice--notes b { color: var(--cream); font-size: var(--fs-3); } .c-program { position: relative; margin: 0; padding: 0; list-style: none; } .c-program::before { position: absolute; top: 9px; bottom: 9px; left: 49px; width: 1px; content: ""; background: var(--line); } .c-program li { position: relative; display: grid; grid-template-columns: 50px 1fr; min-height: 93px; } .c-program time { padding-top: 2px; font-size: var(--fs-3); font-weight: 700; } .c-program li::after { position: absolute; top: 4px; left: 46px; width: 7px; height: 7px; content: ""; background: var(--red); border-radius: 50%; } .c-program span { padding-left: var(--sp-20); } .c-program b { display: block; margin-bottom: var(--sp-8); font-family: var(--serif); font-size: var(--fs-8); font-weight: 500; } .c-program small { display: block; font-size: var(--fs-3); line-height: 1.8; color: var(--ink-mute); } .c-summary { margin: var(--sp-28) 0 var(--sp-28); border-top: var(--bw) solid var(--rule-dark); } .c-summary > div { display: grid; grid-template-columns: 72px 1fr; padding: var(--sp-16) 0; border-bottom: var(--bw) solid var(--rule-dark); } .c-summary dt { padding-top: 2px; font-size: var(--fs-2); opacity: .55; } .c-summary dd { margin: 0; font-family: var(--serif); font-size: var(--fs-7); line-height: 1.65; } .c-context { padding-block: var(--sp-72) var(--sp-72); } .c-context h2 { margin-bottom: var(--sp-32); font-family: var(--serif); font-size: var(--fs-13); font-weight: 500; line-height: 1.85; } .c-context dl { margin: 0 0 var(--sp-28); border-top: var(--bw) solid var(--rule-dark); } .c-context dl > div { display: grid; grid-template-columns: 76px 1fr; padding: var(--sp-16) 0; border-bottom: var(--bw) solid var(--rule-dark); } .c-context dt { padding-top: 2px; font-size: var(--fs-2); opacity: .62; } .c-context dd { margin: 0; font-family: var(--serif); font-size: var(--fs-7); } .c-context dd b { display: inline-grid; width: 22px; height: 22px; margin-right: var(--sp-8); color: var(--blue); background: var(--cream); font-family: var(--sans); font-size: var(--fs-2); place-items: center; border-radius: 50%; } .c-context > a { display: flex; justify-content: space-between; padding: var(--sp-16) 0; font-size: var(--fs-3); font-weight: 700; border-top: var(--bw) solid var(--rule-dark-strong); border-bottom: var(--bw) solid var(--rule-dark-strong); } .c-stickybar { position: fixed; z-index: 45; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 104px 1fr; gap: var(--sp-8); max-width: 430px; min-height: 76px; margin: auto; padding: 8px 9px calc(8px + env(safe-area-inset-bottom)); color: var(--cream); background: rgba(23,23,20,.96); box-shadow: var(--shadow-up); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .c-stickybar-meta { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding-left: var(--sp-8); } .c-stickybar-meta b { margin-bottom: var(--sp-4); font-size: var(--fs-6); letter-spacing: .02em; } .c-stickybar-meta small { font-size: var(--fs-2); letter-spacing: .07em; opacity: .68; } .c-cta--sticky { min-height: 60px; align-items: center; padding: var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-16); color: var(--cream); background: var(--red); border: var(--bw) solid var(--rule-dark); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; text-align: left; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .c-cta--sticky > span { display: flex; flex-direction: column; } .c-cta--sticky small { margin-bottom: var(--sp-4); font-size: var(--fs-2); font-weight: 500; letter-spacing: .08em; opacity: .76; } .c-cta--sticky strong { font-size: var(--fs-7); letter-spacing: .035em; } .c-cta--sticky > b { display: grid; width: 28px; height: 28px; flex: 0 0 28px; margin-left: var(--sp-8); color: var(--red); background: var(--cream); font-size: var(--fs-8); place-items: center; border-radius: 50%; } .c-cta--sticky:hover { background: var(--red-light); } .c-cta--sticky:active { box-shadow: none; transform: translateY(3px); } .c-cta--sticky:focus-visible { outline: var(--bw-strong) solid var(--cream); outline-offset: 2px; } /* Finished event */ .l-page--event-finished { padding-bottom: 0; } .c-notice--box { margin-block: var(--sp-24); padding: var(--sp-12) var(--sp-16); background: var(--sand); } .c-details { border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); } .c-details summary { padding: var(--sp-16) 2px; cursor: pointer; font-size: var(--fs-3); font-weight: 700; } .c-details > div { padding: 0 var(--sp-4) var(--sp-20); } .c-details p { font-size: var(--fs-4); line-height: 1.9; color: var(--ink-soft); } .c-details a { display: block; padding-top: var(--sp-12); font-size: var(--fs-3); border-top: var(--bw) solid var(--line); } /* Continuing series */ .l-page--series { background: var(--cream); } .c-principles { margin: var(--sp-32) 0 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--line); } .c-principles li { display: grid; grid-template-columns: 40px 1fr; padding: var(--sp-16) 1px; border-bottom: var(--bw) solid var(--line); } .c-principles span { padding-top: 2px; font-size: var(--fs-2); } .c-principles b { font-family: var(--serif); font-size: var(--fs-8); font-weight: 500; } .c-card-links { display: flex; gap: var(--sp-8); padding-top: var(--sp-12); border-top: var(--bw) solid var(--line); } .c-card-links i { padding: var(--sp-4) var(--sp-8); background: var(--sand); font-size: var(--fs-1); font-style: normal; font-weight: 700; letter-spacing: .07em; } .c-next { margin-top: var(--sp-20); padding: var(--sp-24) var(--sp-20) var(--sp-24); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); } .c-next > span { display: flex; flex-direction: column; } .c-next small { margin-bottom: var(--sp-8); font-size: var(--fs-1); font-weight: 700; letter-spacing: .12em; color: var(--ink-mute); } .c-next strong { font-family: var(--serif); font-size: var(--fs-10); font-weight: 500; line-height: 1.65; } .c-next p { margin: var(--sp-12) 0 0; font-size: var(--fs-3); line-height: 1.85; color: var(--ink-mute); } /* Photo story */ .l-page--article { background: var(--cream); } .l-page--article-post { background: var(--sand-light); } .c-article-chapters { background: var(--cream); } .c-article-chapter { padding: var(--sp-56) var(--sp-20) var(--sp-72); } .c-article-chapter + .c-article-chapter { border-top: var(--bw) solid var(--line); } .c-article-chapter header { padding: 0 var(--sp-4) var(--sp-28); } .c-article-chapter header small { display: block; margin-bottom: var(--sp-16); font-size: var(--fs-2); font-weight: 700; letter-spacing: .13em; } .c-article-chapter header h2 { margin-bottom: var(--sp-20); font-family: var(--serif); font-size: var(--fs-13); font-weight: 500; line-height: 1.65; } .c-article-chapter header p { margin: 0; font-family: var(--serif); font-size: var(--fs-6); line-height: 2.1; color: var(--ink-soft); } .c-article-chapter--blue { color: var(--cream); background: var(--blue); border-top: 0 !important; } .c-article-chapter--blue header p { color: var(--on-dark); } .c-photo { display: block; margin-top: var(--sp-16); } .c-photo + .c-photo { margin-top: var(--sp-40); } .c-photo figure { position: relative; overflow: visible; margin: 0; } .c-photo img { width: 100%; height: auto; object-fit: contain; } .c-photo figcaption { padding-top: var(--sp-12); font-family: var(--serif); font-size: var(--fs-4); line-height: 1.8; } .c-photo--full { margin-right: -20px; margin-left: -20px; } .c-photo--full figcaption { padding-inline: var(--sp-20); } .c-photo--standard img { border-radius: var(--radius); } .c-photo--inset-left, .c-photo--inset-right { width: 76%; } .c-photo--inset-left { margin-right: auto; } .c-photo--inset-right { margin-left: auto; } /* 縦の写真は、横長に切ると読めなくなる。収めて見せる */ .c-photo--portrait figure img { width: auto; max-height: min(120vw, 760px); margin-inline: auto; background: rgba(23,23,20,.05); } /* 章の頭の、時刻と場所 */ .c-article-stamp { margin: 0 0 var(--sp-12); font-size: var(--fs-4); font-weight: 700; letter-spacing: .16em; opacity: .62; } .c-photo--inset-left img { border-radius: var(--radius); } .c-photo--inset-right img { border-radius: var(--radius); } .c-photo--pair { display: flex; flex-direction: column; gap: var(--sp-28); } .c-photo--pair img { border-radius: var(--radius); } .c-photo--pair figure:first-child { width: 88%; } .c-photo--pair figure:nth-child(2) { width: 76%; margin-top: 0; margin-left: auto; } .c-article-footer { margin-block: var(--sp-20) 0; padding: var(--sp-20) 0; border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); } .c-article-footer p { margin-bottom: var(--sp-12); font-size: var(--fs-3); font-weight: 700; letter-spacing: .05em; } .c-article-footer small { display: block; font-size: var(--fs-3); line-height: 1.7; color: var(--ink-mute); } /* Field log */ .l-page--field-log { background: var(--cream); } .c-stop.is-active { opacity: 1; transform: scale(1.12); } .c-notice--map { margin: var(--sp-16) 2px 0; color: var(--on-dark-weak); } .c-sectionhead--entries { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: end; } .c-sectionhead--entries .c-sectionhead-kicker { grid-column: 1 / -1; margin-bottom: var(--sp-12); font-size: var(--fs-2); font-weight: 700; letter-spacing: .15em; } .c-sectionhead--entries .c-sectionhead-title { margin: 0; font-family: var(--serif); font-size: var(--fs-14); font-weight: 500; } .c-sectionhead--entries .c-sectionhead-aside { padding-bottom: var(--sp-4); font-size: var(--fs-2); font-weight: 700; letter-spacing: .08em; } .c-card--entry header { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto 1fr; margin-bottom: var(--sp-20); padding: var(--sp-20) var(--sp-20) 0; } :where(.c-card--entry) .c-card-meta { grid-row: 1 / span 2; padding-top: 2px; font-size: var(--fs-3); font-weight: 700; } :where(.c-card--entry) .c-card-kicker { grid-column: 2; margin-bottom: var(--sp-8); font-size: var(--fs-2); font-weight: 700; letter-spacing: .12em; } :where(.c-card--entry) .c-card-title { grid-column: 2; margin: 0; font-family: var(--serif); font-size: var(--fs-13); font-weight: 500; } :where(.c-card--entry) .c-card-text { max-width: 310px; margin: var(--sp-16) var(--sp-20) 0; font-family: var(--serif); font-size: var(--fs-6); line-height: 2; } .c-progress { display: flex; gap: var(--sp-8); align-items: center; justify-content: center; margin-top: var(--sp-8); } .c-progress span { width: 5px; height: 5px; border-radius: 50%; background: rgba(23,23,20,.22); transition: transform .2s, background .2s; } .c-progress span.is-active { background: var(--ink); transform: scale(1.35); } .c-progress b { margin-left: var(--sp-8); font-size: var(--fs-2); font-weight: 700; } /* Feature hub */ /* Dense feature: multiple journeys, lenses, records and events */ .c-volume { padding-block: var(--sp-32) var(--sp-32); } .c-volume > p { margin-bottom: var(--sp-16); font-size: var(--fs-1); font-weight: 700; letter-spacing: .16em; opacity: .58; } .c-volume dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: var(--bw) solid var(--rule-dark); border-left: var(--bw) solid var(--rule-dark); } .c-volume dl > div { display: grid; grid-template-columns: 43px 1fr; gap: var(--sp-8); min-height: 80px; align-items: center; padding: var(--sp-12); border-right: var(--bw) solid var(--rule-dark); border-bottom: var(--bw) solid var(--rule-dark); } .c-volume dt { font-family: var(--serif); font-size: var(--fs-13); } .c-volume dd { margin: 0; font-size: var(--fs-1); font-weight: 700; line-height: 1.7; letter-spacing: .08em; } .c-volume dd span { font-family: var(--serif); font-size: var(--fs-3); font-weight: 400; letter-spacing: 0; opacity: .62; } .c-volume > small { display: block; margin-top: var(--sp-16); font-family: var(--serif); font-size: var(--fs-4); opacity: .65; } .c-sectionhead--feature { } .c-sectionhead--feature .c-sectionhead-kicker { margin-bottom: var(--sp-16); font-size: var(--fs-2); font-weight: 700; letter-spacing: .15em; } .c-sectionhead--feature .c-sectionhead-title { margin-bottom: var(--sp-20); font-family: var(--serif); font-size: var(--fs-14); font-weight: 500; line-height: 1.65; } .c-sectionhead--feature .c-sectionhead-note { margin: 0; font-size: var(--fs-4); line-height: 2; color: var(--ink-mute); } :where(.l-surface--ink, .l-surface--moss, .l-surface--blue, .l-surface--red) .c-sectionhead--feature .c-sectionhead-note { color: var(--on-dark); } .c-bridge { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-20); padding-block: var(--sp-24); color: var(--cream); background: var(--blue); } .c-bridge div { display: flex; flex-direction: column; } .c-bridge small { margin-bottom: var(--sp-12); font-size: var(--fs-1); letter-spacing: .13em; opacity: .63; } .c-bridge strong { font-family: var(--serif); font-size: var(--fs-10); font-weight: 500; line-height: 1.65; } .c-bridge p { margin: var(--sp-12) 0 0; font-size: var(--fs-3); line-height: 1.9; opacity: .68; } .c-bridge > b { align-self: center; font-size: var(--fs-9); font-weight: 400; } .c-lenses { padding-block: var(--sp-72) var(--sp-80); } .c-lenses-item { margin-bottom: var(--sp-28); padding: var(--sp-16); color: var(--ink); background: var(--cream); } .c-lenses-item:last-child { margin-bottom: 0; } .c-sectionhead--lens { display: grid; grid-template-columns: 33px 1fr; grid-template-rows: auto 1fr; margin-bottom: 0; padding-bottom: var(--sp-16); border-bottom: var(--bw) solid var(--line); } .c-sectionhead--lens > b { grid-row: 1 / span 2; padding-top: var(--sp-4); font-size: var(--fs-2); } .c-sectionhead--lens .c-sectionhead-kicker { grid-column: 2; margin-bottom: var(--sp-4); font-size: var(--fs-1); letter-spacing: .1em; color: var(--ink-mute); } .c-sectionhead--lens .c-sectionhead-title { grid-column: 2; margin: 0; font-family: var(--serif); font-size: var(--fs-13); font-weight: 500; } .c-cta--all { margin-block: var(--sp-24) 0; padding: var(--sp-16) 1px; border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); font-size: var(--fs-3); font-weight: 700; } .c-readings { margin: 0; padding: 0; list-style: none; counter-reset: none; } .c-readings li { border-top: var(--bw) solid var(--rule-dark); } .c-readings li:last-child { border-bottom: var(--bw) solid var(--rule-dark); } .c-readings a { display: flex; flex-direction: column; padding: var(--sp-20) 1px var(--sp-20); } .c-readings small { margin-bottom: var(--sp-8); font-size: var(--fs-1); font-weight: 700; letter-spacing: .1em; opacity: .55; } .c-readings strong { font-family: var(--serif); font-size: var(--fs-8); font-weight: 500; line-height: 1.8; } .c-readings em { align-self: flex-end; margin-top: var(--sp-12); font-size: var(--fs-2); font-style: normal; opacity: .68; } .c-cta--series-standalone { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: var(--sp-32); padding: var(--sp-16) 1px; border-top: var(--bw) solid var(--rule-dark-strong); border-bottom: var(--bw) solid var(--rule-dark-strong); } .c-cta--series-standalone > span { display: flex; flex-direction: column; } .c-cta--series-standalone small { margin-bottom: var(--sp-8); font-size: var(--fs-1); letter-spacing: .11em; opacity: .62; } .c-cta--series-standalone strong { font-family: var(--serif); font-size: var(--fs-7); font-weight: 500; } .c-cta--series-standalone > b { font-size: var(--fs-6); font-weight: 400; } /* Theme index and keyword detail */ .l-page--collection { background: var(--cream); } /* キーワード一覧の絞り込み。CSSが無く、素のボタンのままだった（2026-09-16に発覚） */ .c-results > header { display: flex; justify-content: space-between; padding-bottom: var(--sp-12); border-bottom: var(--bw-strong) solid var(--ink); } .c-results > header small, .c-results > header b { font-size: var(--fs-2); letter-spacing: .12em; } /* 余白はカード側が持つ（格子の桝のため）。基底の20pxを戻す */ /* Record archive */ .l-page--records { background: var(--paper); } .c-filter-set { position: relative; z-index: 5; border-bottom: var(--bw) solid var(--line); } .c-filter--record { z-index: 9; grid-template-columns: .7fr 1fr 1.12fr; padding-inline: var(--sp-12); } .c-filter--record button { min-width: 0; padding-inline: var(--sp-4); font-size: var(--fs-2); letter-spacing: .03em; } .c-filter--record button.is-active { font-weight: 800; } .c-filter-panel { margin-block: 0; border-bottom: var(--bw) solid var(--line); } .c-filter-panel summary { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: var(--sp-8); align-items: center; padding: var(--sp-16) 2px; cursor: pointer; list-style: none; } .c-filter-panel summary::-webkit-details-marker { display: none; } .c-filter-panel summary::after { position: absolute; right: 2px; content: "+"; font-size: var(--fs-9); font-weight: 300; } .c-filter-panel[open] summary::after { content: "−"; } .c-filter-panel summary span { font-size: var(--fs-3); font-weight: 800; letter-spacing: .08em; } .c-filter-panel summary b { overflow: hidden; padding-right: var(--sp-24); color: var(--ink-mute); font-size: var(--fs-2); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; } .c-filter-group { display: flex; flex-wrap: wrap; gap: var(--sp-8); padding: var(--sp-16) 0 var(--sp-4); border-top: var(--bw) solid var(--line); } .c-filter-group p { flex: 0 0 100%; margin: 0 0 var(--sp-4); font-size: var(--fs-2); font-weight: 800; letter-spacing: .12em; } .c-filter-group button { padding: var(--sp-8) var(--sp-12); cursor: pointer; border: var(--bw) solid var(--line); background: transparent; font-size: var(--fs-3); border-radius: var(--radius); } .c-filter-group button.is-active { color: var(--cream); background: var(--ink); border-color: var(--ink); } .c-filter-reset { width: 100%; margin: var(--sp-20) 0 var(--sp-16); padding: var(--sp-12); cursor: pointer; border: var(--bw) solid var(--line); background: var(--sand-light); font-size: var(--fs-2); } .c-resultbar { display: flex; align-items: center; justify-content: space-between; padding-block: var(--sp-16) var(--sp-16); } .c-resultbar p { margin: 0; font-size: var(--fs-4); } .c-resultbar p b { font-size: var(--fs-10); font-weight: 500; } .c-resultbar p span { font-size: var(--fs-1); letter-spacing: .12em; opacity: .6; } .c-resultbar label { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-2); font-weight: 700; } .c-resultbar select { max-width: 133px; padding: var(--sp-8) var(--sp-24) var(--sp-8) var(--sp-8); border: var(--bw) solid var(--line); color: var(--ink); background: var(--cream); font: inherit; font-size: var(--fs-3); border-radius: var(--radius); } .c-empty { padding: var(--sp-64) var(--sp-24); font-family: var(--serif); font-size: var(--fs-9); line-height: 2; text-align: center; } .c-empty button { margin-top: var(--sp-24); padding: var(--sp-12) var(--sp-20); cursor: pointer; border: var(--bw) solid var(--ink); background: transparent; font: inherit; font-size: var(--fs-3); } .c-filter button b { display: inline-grid; min-width: 18px; height: 18px; margin-left: var(--sp-4); color: var(--ink-mute); background: var(--sand); font-size: var(--fs-2); place-items: center; border-radius: 50%; } .c-filter button.is-active b { color: var(--cream); background: var(--red); } .c-collection--headed { padding-block: var(--sp-40) var(--sp-72); } .c-collection--headed > header { margin-bottom: var(--sp-28); padding-bottom: var(--sp-16); border-bottom: var(--bw-strong) solid var(--ink); } .c-collection--headed > header small { display: block; margin-bottom: var(--sp-8); font-size: var(--fs-1); font-weight: 700; letter-spacing: .14em; color: var(--ink-mute); } .c-collection--headed > header h2 { margin: 0; font-family: var(--serif); font-size: var(--fs-12); font-weight: 500; } .c-card--event[data-event-status="held"] .c-card-media { filter: saturate(.72); } :where(.c-card--event) .c-card-link{ position: relative; display: block; } :where(.c-card--event) .c-card-meta{ position: absolute; z-index: 2; top: 0; left: 0; display: flex; min-width: 57px; align-items: center; flex-direction: column; padding: var(--sp-8) var(--sp-12) var(--sp-12); color: var(--ink); background: var(--cream); } :where(.c-card--event) .c-card-meta > b{ font-family: var(--serif); font-size: var(--fs-13); font-weight: 500; } :where(.c-card--event) .c-card-meta > small{ margin-top: var(--sp-4); font-size: var(--fs-1); line-height: 1.6; text-align: center; } .c-card--event .c-card-badge { top: auto; right: 9px; bottom: 9px; left: auto; } .c-role { display: inline-block; margin-right: var(--sp-4); padding: var(--sp-4) var(--sp-8); color: var(--cream); background: var(--red); font-size: var(--fs-1); font-style: normal; letter-spacing: .08em; } .c-role--collab { background: var(--blue); } :where(.c-card--event) .c-card-extra{ display: grid; grid-template-columns: 94px 1fr auto; gap: var(--sp-8); align-items: center; margin: 0; padding: var(--sp-12) 2px var(--sp-16) var(--sp-16); color: var(--cream); background: var(--moss); } :where(.c-card--event) .c-card-extra small{ font-size: var(--fs-1); font-weight: 700; letter-spacing: .1em; opacity: .7; } :where(.c-card--event) .c-card-extra span{ font-family: var(--serif); font-size: var(--fs-4); line-height: 1.65; } :where(.c-card--event) .c-card-extra b{ padding-right: var(--sp-12); font-size: var(--fs-4); font-weight: 500; } .c-brandlist { border-top: var(--bw) solid var(--rule-dark-strong); } .c-brandlist a { display: flex; flex-direction: column; padding: var(--sp-20) 1px; border-bottom: var(--bw) solid var(--rule-dark-strong); } .c-brandlist small { margin-bottom: var(--sp-8); font-size: var(--fs-1); font-weight: 700; letter-spacing: .12em; color: var(--on-dark-weak); } .c-brandlist strong { font-family: var(--serif); font-size: var(--fs-10); font-weight: 500; } .c-brandlist span { margin-top: var(--sp-12); font-size: var(--fs-2); color: var(--on-dark); } /* 縦位置の写真を、横長の枠で切らない（紙テープの見送りなど） */ /* ── FIELD LOG（field-log-ama）────────────────────── * 2026-09-16まで、この12ルールはページの