/* ===================================================================== rj-v3.css — RefundJapan design system v3.2.2「紅白・紅の余白」（2026-09-06 v3.2「上品」／2026-09-07 v3.2.1 言語ごとの書体、v3.2.2 図版を HTML に） 1枚で完結する。rj.css / rj-v2.css は読まない（en の layout.tsx はこの1枚だけを読む）。 class 名は 2026-09-03 時点の語彙をそのまま使い、見た目だけを v3.1 に置き換える。 ⛔ 既存 class を消さない・改名しない（4言語の記事ページが .rj-art 経由でこの CSS を使う）。 ⛔ 外部フォント・外部リソースを読まない（このサイトの信頼の一部）。 構図の出典（色は当方）: Monzo（淡い地・大きな角丸パネル・ピル・薄い影）／ Wise send-money（ヒーローの2カラム）／ Wealthsimple Learn（段構成）／ Column（台帳・更新履歴）／ Klarna（FAQ）／ Wise Help（記事骨格） 正のデザインシステム: ~/.claude/skills/refund-japan-design/SKILL.md（写し: automation/skill/refund-japan-design.md） ===================================================================== */ /* ---------- 0. トークン ---------- */ :root { /* v3.1 の名前 */ --red: #E60012; /* 免税店シンボルマークの赤（観光庁の指定：金赤 C0 M100 Y100 K0・DIC156。画面は #E60012。2026-10-30 に #BC002D から変更）。ヒーローパネル・CTA・朱印・番号・現在地・結果の金額だけ */ --red-deep: #B3000E; --red-panel: #B3000E; /* 大きな赤い面（トップの .hero など）。#E60012 は面が大きいと強すぎるので、同じ色相で暗くした色（白文字 7.18:1。2026-10-30 代表） */ --red-tint: #FDE8EA; --red-line: #F9BFC4; --mist: #F6F1F0; /* 地（ローズミスト） */ --panel: #FFFFFF; /* 段のパネル・タイル・カード */ --on-red: #FFFFFF; --on-red-2: rgba(255, 255, 255, .84); /* 2026-09-03 以前からの名前。値だけ v3.1 に置き換える。⛔ 名前を消すと ja/ko/tw の CSS が壊れる */ --ink: #1C1719; --ink-2: #5B5559; --ink-3: #6E686B; /* 2026-10-30 #8A8387 から濃くした：白・淡地・入力の地のどれでも文字の読みやすさの基準 4.5:1 以上 */ --line: #EAE3E3; --line-2: #D9CFD0; --paper: #FFFFFF; --tint: #F6F1F0; --tint-2: #EFE8E7; --brand: #E60012; --brand-d: #B3000E; --brand-l: #FDE8EA; --amber: #976316; --amber-bg: #FBF1DC; --amber-line: #EAD3A3; /* 琥珀 = 「未発表」だけ。2026-10-30 #B8791B から濃くした（淡地の上でも 4.5:1 以上） */ --green: #E60012; --green-bg: #FDE8EA; --green-line: #F9BFC4; /* 「確定・OK」は紅の朱印。緑は持たない */ --red-bg: #FDE8EA; --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", "Apple SD Gothic Neo", "Malgun Gothic", "PingFang TC", "Microsoft JhengHei", sans-serif; /* v3.1 はセリフを使わない。旧 var(--serif) もサンセリフに解決する */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", "Apple SD Gothic Neo", "Malgun Gothic", "PingFang TC", "Microsoft JhengHei", sans-serif; --mono: var(--sans); /* v3.2: 等幅書体は UI から外す。数字は font-variant-numeric: tabular-nums で揃える */ --sp: clamp(1rem, 4vw, 1.5rem); --max: 1180px; --measure: 46rem; --gap-section: clamp(1.75rem, 4vw, 3rem); --r: 20px; /* タイル（段階・記事・FAQ・目次・記事末CTA） */ --r-lg: 24px; /* 計算機カード */ --r-panel: 28px; /* 段のパネル */ --r-panel-lg: 32px; /* ヒーロー・アプリ帯 */ --r-input: 14px; --r-btn: 999px; --shadow: 0 1px 2px rgba(28, 23, 25, .04), 0 16px 40px -24px rgba(28, 23, 25, .18); /* 影はこの1種類だけ */ --shadow-2: var(--shadow); --nav-h: 4rem; /* 浮いたナビの高さ（sticky の位置計算） */ --on-dark: #FFFFFF; --on-dark-2: rgba(255, 255, 255, .84); --on-brand: #FFFFFF; --surface-dark: var(--paper); --fs-0: .75rem; --fs-1: .875rem; --fs-2: 1.0625rem; --fs-3: 1.25rem; --fs-4: 1.5rem; --fs-5: clamp(1.5rem, 2.8vw, 1.9rem); --fs-6: clamp(2rem, 4.2vw, 3.1rem); } /* ---------- 1. 基本 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--tint); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; } img, svg { max-width: 100%; height: auto; } img { display: block; } a { color: var(--red-deep); text-underline-offset: .18em; text-decoration-thickness: .08em; transition: color .12s, text-decoration-color .12s; } a:hover { color: var(--red); } h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); margin: 0; text-wrap: balance; } /* v3.2: 階層は太さではなく大きさと色で */ h1, .h1 { font-size: var(--fs-6); line-height: 1.12; letter-spacing: -.02em; } h2 { font-size: var(--fs-5); } h3 { font-size: var(--fs-3); } h3, h4 { font-weight: 600; } p { margin: 0; } ul, ol { margin: 0; padding: 0; } table { border-collapse: collapse; width: 100%; } button, input, select { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 6px; } ::selection { background: var(--red-tint); color: var(--ink); } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .num, time, .tbl td b, .row b { font-variant-numeric: tabular-nums; } /* CJK はマイナスの字詰めを使わない */ :lang(ja) :is(h1, h2, h3, h4, .card__t, .next__t, .stage__t, .qa summary, .tool__t, .trust__t, .plan__q, .feed__t, .verdict__t, .lane h3, .gl dt, .promo h2), :lang(ko) :is(h1, h2, h3, h4, .card__t, .next__t, .stage__t, .qa summary, .tool__t, .trust__t, .plan__q, .feed__t, .verdict__t, .lane h3, .gl dt, .promo h2), :lang(zh) :is(h1, h2, h3, h4, .card__t, .next__t, .stage__t, .qa summary, .tool__t, .trust__t, .plan__q, .feed__t, .verdict__t, .lane h3, .gl dt, .promo h2) { letter-spacing: 0; font-weight: 700; } :lang(ja) h1, :lang(ko) h1, :lang(zh) h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.25; } :lang(ja) .prose h2, :lang(ko) .prose h2, :lang(zh) .prose h2 { font-size: clamp(1.3rem, 2.8vw, 1.6rem); line-height: 1.4; } /* ---------- 1b. 言語ごとの書体（v3.2.1・2026-09-07） ---------- 外部フォントは使わない。OS の最良の書体に確実に当てる。 共通の --sans は Latin 優先で並んでいるため、Windows の日本語が Yu Gothic に届かず Microsoft JhengHei（繁体字の書体）で描かれていた。言語ごとに自言語の書体を Latin の直後に置く。 */ :lang(ja) { --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif; --serif: var(--sans); --mono: var(--sans); } :lang(ko) { --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; --serif: var(--sans); --mono: var(--sans); } :lang(zh-Hant) { --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", sans-serif; --serif: var(--sans); --mono: var(--sans); } :lang(zh-Hans) { --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; --serif: var(--sans); --mono: var(--sans); } /* 日本語の見出し: プロポーショナル字詰め（palt）で約物の空きを詰め、字間をわずかに開ける。行頭の「 は詰める。 太さは W6（600）。W7 以上は紅の地で潰れて見える。本文は palt を使わない（読みやすさは等幅仮名のほうが上）。 */ :lang(ja) :is(h1, h2, h3, h4, .card__t, .next__t, .stage__t, .qa summary, .tool__t, .trust__t, .plan__q, .feed__t, .verdict__t, .lane h3, .gl dt, .promo h2, .sechead h2, .num__n) { font-feature-settings: "palt", "kern"; letter-spacing: .02em; text-spacing-trim: trim-start; font-weight: 600; } :lang(ja) h1 { letter-spacing: .015em; line-height: 1.32; } :lang(ja) h3, :lang(ja) h4 { font-weight: 600; } :lang(ja) .lede { letter-spacing: .01em; line-height: 1.85; } :lang(ja) .rj-nav__links a, :lang(ja) .rj-nav__u a, :lang(ja) .num__c, :lang(ja) .tag, :lang(ja) .stage__n, :lang(ja) .card__m { font-feature-settings: "palt", "kern"; } /* ---------- 2. 枠 ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--sp); padding-right: var(--sp); } /* 1カラムのページ（記事以外の23ページ）は、ページ全体が1枚の白いパネル */ .wrap--narrow { max-width: calc(var(--measure) + 6rem); width: calc(100% - 2 * var(--sp)); margin: .5rem auto 1.5rem; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem) clamp(1.75rem, 4vw, 3rem); background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); } .panel { background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 2rem); } .skip { position: absolute; left: -9999px; top: 0; background: var(--red); color: #fff; padding: .6rem 1rem; z-index: 99; border-radius: var(--r-btn); } .skip:focus { left: .5rem; top: .5rem; } .langline { font-size: .8125rem; color: var(--ink-3); padding: .75rem 0 .25rem; margin: 0; } /* ---------- 3. 上端ストリップ（旧 .ribbon）: 地の上に直接。2px の紅線＋1行 ---------- */ .ribbon { background: transparent; color: var(--ink-2); font-size: .75rem; line-height: 1.4; border-top: 2px solid var(--red); } .ribbon__in { max-width: var(--max); margin: 0 auto; padding: .45rem var(--sp); display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; } .ribbon b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .ribbon__k { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: .75rem; } .ribbon__k i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--red); flex: none; box-shadow: none; } .ribbon__r { margin-left: auto; } .ribbon a { color: var(--ink-2); } .ribbon__cd { font-family: var(--mono); font-weight: 600; color: var(--red); font-variant-numeric: tabular-nums; } /* ---------- 4. 浮いたナビ（新: .rj-nav）。白いピルが地の上に浮く。現在地は紅の淡地＋紅文字 ---------- */ .rj-nav { position: sticky; top: .5rem; z-index: 30; padding: .5rem var(--sp) 0; } .rj-nav__in { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: .25rem; background: var(--panel); border-radius: var(--r-btn); box-shadow: var(--shadow); padding: .4rem .5rem .4rem .95rem; overflow-x: auto; scrollbar-width: none; } .rj-nav__in::-webkit-scrollbar { display: none; } .rj-logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.2rem; letter-spacing: -.015em; color: var(--ink); text-decoration: none; white-space: nowrap; padding-right: .9rem; margin-right: .35rem; border-right: 1px solid var(--line); flex: none; } .rj-logo:hover { color: var(--ink); } .rj-logo .mark-dot { width: .8em; height: .8em; border-radius: 50%; background: var(--red); flex: none; } /* 紅の丸。マスコット画像は使わない */ .rj-nav__links { display: flex; gap: .15rem; margin-left: auto; } .rj-nav__links a { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: var(--r-btn); text-decoration: none; color: var(--ink-2); font-size: .9375rem; font-weight: 500; white-space: nowrap; transition: background .12s, color .12s; } .rj-nav__links a:hover { background: var(--tint); color: var(--ink); } .rj-nav__links a[aria-current="page"] { background: var(--red-tint); color: var(--red-deep); font-weight: 600; } .nav__n { font-size: .75rem; color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; } .rj-nav__u { max-width: var(--max); margin: .5rem auto 0; padding: 0 calc(var(--sp) + .75rem); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1.1rem; font-size: .8125rem; } .rj-nav__u a { color: var(--ink-3); text-decoration: none; font-weight: 600; } .rj-nav__u a:hover { color: var(--ink); } .rj-nav__u a[aria-current="page"] { color: var(--red-deep); } /* 旧 .mast / .nav（ja/ko/tw が自前のヘッダを持つため en では未使用。念のため無害化） */ .mast, .nav { background: transparent; border: 0; } /* ---------- 5. 見出しの行・小さな部品 ---------- */ .crumb { font-size: .8125rem; color: var(--ink-3); padding: .9rem 0 0; } .crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .crumb li + li::before { content: "›"; margin-right: .35rem; color: var(--line-2); } .crumb a { color: var(--ink-3); text-decoration: none; } .crumb a:hover { color: var(--ink); text-decoration: underline; } .eyebrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.1rem 0 .9rem; } .tag { display: inline-block; padding: .22rem .65rem; border-radius: var(--r-btn); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; } .tag--brand { background: var(--red-tint); color: var(--red-deep); } .tag--soft { background: var(--red-tint); color: var(--red-deep); } .tag--amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); } .tag--green { background: transparent; color: var(--red); border: 1px solid var(--red); } /* 朱印: 「Last checked …」は紅の1px枠のピル */ .stamp { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border: 1px solid var(--red); border-radius: var(--r-btn); color: var(--red); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; } .lede { font-size: clamp(1.0625rem, 2.2vw, 1.25rem); line-height: 1.6; color: var(--ink-2); margin-top: 1rem; max-width: var(--measure); } .lede b { color: var(--ink); font-weight: 700; } .disc { margin-top: 1.25rem; padding: 0 0 0 1rem; background: transparent; border-left: 3px solid var(--red-line); font-size: .9375rem; color: var(--ink-2); border-radius: 0; } .disc b { color: var(--ink); } .sechead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin: 0 0 1.25rem; padding: 0; border: 0; } .sechead h2 { font-size: var(--fs-5); letter-spacing: -.02em; } /* 2026-11-02 見出しの下の余白（全言語・全ページ）。共通の h1〜h4 の margin: 0 のせいで、部品に入っていない見出しの下が 0 になっていた。 次の要素の margin-top と重なるので、部品ごとの余白は壊さない。枠の中の見出し（.sechead・.sec__h）は枠の側で持つ */ main h2 { margin-bottom: .875rem; } main h3 { margin-bottom: .5rem; } .sechead h2, .sec__h h2 { margin-bottom: 0; } /* 本文の段落の間（部品に入っていない段落だけ。部品の中の p はそれぞれの決まりのまま） */ main :is(.sec, .page, .wrap, section, td) > p + p { margin-top: .85rem; } .sechead p { font-size: .9375rem; color: var(--ink-3); margin-left: auto; max-width: var(--measure); } /* パネルの中で段が続くときは 1px の罫線で区切る */ .wrap--narrow .sechead, .art-body .sechead, .art-after .sechead, .art > :not(.side) .sechead, .band .prose + .sechead { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .wrap--narrow .sechead h2, .art-body .sechead h2, .art-after .sechead h2 { font-size: var(--fs-4); } /* ---------- 6. ボタン（ピル） ---------- */ .btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } .btn { display: inline-flex; align-items: center; gap: .45rem; padding: .75rem 1.25rem; border-radius: var(--r-btn); text-decoration: none; font-weight: 600; font-size: .9375rem; line-height: 1.2; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s, transform .06s; } .btn:active { transform: translateY(1px); } .btn--p { background: var(--red); color: var(--on-red); } .btn--p:hover { background: var(--red-deep); color: var(--on-red); } .btn--s { background: var(--panel); color: var(--ink); border-color: var(--line-2); } .btn--s:hover { border-color: var(--ink); color: var(--ink); } /* ---------- 7. トップ: ヒーロー = 紅の角丸パネル（左: 見出し・2文・注記 ／ 右: 白い計算機カード） ---------- */ .hero { margin-top: .5rem; padding: clamp(1.75rem, 4.5vw, 4rem); background: var(--red-panel); color: var(--on-red); border-radius: var(--r-panel-lg); box-shadow: var(--shadow); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; } .hero__grid > * { min-width: 0; } /* 計算機カードの最小幅で列が広がり、携帯で本文がパネルから溢れるのを防ぐ */ .hero .eyebrow { margin-top: 0; } .hero .tag--brand { background: rgba(255, 255, 255, .16); color: var(--on-red); } .hero .stamp { border-color: rgba(255, 255, 255, .7); color: var(--on-red); } .hero h1 { color: var(--on-red); max-width: 22ch; } .hero .lede { color: var(--on-red-2); font-size: var(--fs-3); line-height: 1.55; max-width: 40rem; } .hero .lede b { color: var(--on-red); } .hero .disc { border-left-color: rgba(255, 255, 255, .35); color: var(--on-red-2); font-size: .875rem; } .hero .disc b { color: var(--on-red); } .hero .btn--p { background: var(--panel); color: var(--red-deep); } .hero .btn--s { background: transparent; color: var(--on-red); border-color: rgba(255, 255, 255, .55); } .hero a:not(.btn) { color: var(--on-red); text-decoration-color: rgba(255, 255, 255, .6); } /* 紅の地では、本文のリンクの深紅が読めない（コントラスト約 1.6）ので白にする */ .hero a:not(.btn):hover { text-decoration-color: currentColor; } .hero .tool a:not(.btn) { color: var(--red-deep); text-decoration-color: currentColor; } /* 白い計算機カードの中は元の色 */ @media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; } } /* ---------- 8. 計算機カード（.tool）: 白・角丸24・影。ヒーローの中に置ける唯一のカード ---------- */ .tool { border: 0; border-radius: var(--r-lg); background: var(--panel); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; } .tool__h { padding: 1.5rem 1.5rem 0; background: transparent; color: var(--ink); border: 0; } .tool__t { font-family: var(--sans); font-size: var(--fs-4); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); } .tool__s { font-size: .875rem; color: var(--ink-2); margin-top: .35rem; } .tool__b { padding: 1rem 1.5rem 1.5rem; } .seg { display: flex; gap: 0; padding: .25rem; background: var(--tint-2); border-radius: var(--r-btn); margin-bottom: 1rem; } .seg button { flex: 1; padding: .55rem .5rem; border: 0; background: transparent; border-radius: var(--r-btn); font-size: .875rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s; } .seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); box-shadow: none; } .lab { display: block; font-size: .875rem; font-weight: 500; color: var(--ink-2); margin-bottom: .35rem; } .inp { display: flex; align-items: center; gap: .5rem; border: 1px solid transparent; border-radius: var(--r-input); padding: .35rem 1rem; background: var(--tint-2); transition: border-color .12s, background .12s; } .inp span { font-family: var(--mono); color: var(--ink-3); flex: none; } .inp input { flex: 1; min-width: 0; border: 0; padding: .55rem 0; font-family: var(--sans); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; background: transparent; color: var(--ink); } .inp input:focus { outline: 0; } .inp:focus-within { border-color: var(--red); background: var(--panel); box-shadow: none; } .res { margin-top: 1.25rem; padding: 1rem 0 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; } .res__l { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .res__n { font-family: var(--sans); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--red); letter-spacing: -.025em; line-height: 1; margin-top: .35rem; font-variant-numeric: tabular-nums; } .res__x { font-size: .875rem; color: var(--ink-2); margin-top: .5rem; } .res__w { display: none; margin-top: .5rem; font-size: .875rem; font-weight: 600; color: var(--amber); } /* 警告は琥珀。紅は警告に使わない */ .rows { margin-top: 1rem; display: grid; gap: 0; background: transparent; } .row { display: flex; justify-content: space-between; gap: 1rem; background: transparent; padding: .6rem 0; font-size: .875rem; border-top: 1px solid var(--line); } .row span { color: var(--ink-2); } .row b { color: var(--ink); } .row .na { color: var(--amber); font-weight: 600; } .sel { width: 100%; padding: .65rem .9rem; border: 1px solid transparent; border-radius: var(--r-input); background: var(--tint-2); } .sel:focus { outline: 0; border-color: var(--red); background: var(--panel); box-shadow: none; } .verdict { margin-top: 1rem; padding: 1rem 1.15rem; border-radius: var(--r-input); border: 0; background: var(--tint); } .verdict__t { font-family: var(--sans); font-size: 1.125rem; font-weight: 800; margin-bottom: .3rem; } .verdict p { font-size: .9375rem; color: var(--ink-2); } /* 1カラムのページ（計算機ページ）では、パネルの中のカードなので影を使わず 1px の枠で */ .wrap--narrow .tool { box-shadow: none; border: 1px solid var(--line-2); margin-top: 1.5rem; } /* ---------- 9. 事実の帯（.nums.facts）: 白いパネルの中で 4 値を罫線で区切る ---------- */ .nums { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 0; border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow); margin-top: 1.25rem; } .num { background: var(--panel); padding: 1.25rem 1.5rem; } .num__n { display: block; font-family: var(--sans); font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .num__c { display: block; font-size: .8125rem; color: var(--ink-2); margin-top: .3rem; line-height: 1.4; } .num--na .num__n { color: var(--amber); font-size: 1.0625rem; } .facts { margin-top: 1.25rem; } .facts .num__n { font-family: var(--sans); } .facts .num__n:lang(ja), .facts .num__n:lang(ko), .facts .num__n:lang(zh) { font-size: clamp(1.1rem, 2.4vw, 1.4rem); letter-spacing: 0; } @media (min-width: 40rem) { .nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 記事の頭（白いパネルの中）では罫線だけにする（パネルの中にパネルを作らない） */ .art-head .nums, .wrap--narrow .nums { border-radius: 0; box-shadow: none; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .art-head .num, .wrap--narrow .num { padding: 1rem 1rem 1rem 0; } .art-head .num + .num, .wrap--narrow .num + .num { padding-left: 1rem; } /* ---------- 10. 段（.band）: 中身を白いパネルに ---------- */ .band { padding: 0; margin-top: var(--gap-section); } .band > .wrap, .wrap.band { background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.25rem); } .band--tint { background: transparent; border: 0; } .band--ink { background: transparent; color: inherit; } .band--ink h2, .band--ink h3 { color: var(--ink); } .band--ink p { color: var(--ink-2); } .band--ink .sechead { border-bottom: 0; } .band--plain > .wrap { background: transparent; box-shadow: none; border-radius: 0; padding: 0 var(--sp); } .band .prose { margin-top: 0; } .band .sechead + .prose { margin-top: 0; } /* アプリ帯（ = .band--ink[data-rj-app-cta]）: 紅の淡地の大パネル */ [data-rj-app-cta] > .wrap { background: var(--red-tint); box-shadow: none; border-radius: var(--r-panel-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem 2.5rem; align-items: center; } [data-rj-app-cta] .sechead { display: block; margin-bottom: 0; } [data-rj-app-cta] .sechead h2 { font-size: var(--fs-4); max-width: 30ch; } [data-rj-app-cta] .sechead p { margin: .5rem 0 0; max-width: 40rem; color: var(--ink-2); font-size: 1rem; } [data-rj-app-cta] > .wrap > p { margin: 0; max-width: 40rem; color: var(--ink-2); font-size: .9375rem; } [data-rj-app-cta] .btns { margin-top: .25rem; } @media (min-width: 60rem) { [data-rj-app-cta] > .wrap { grid-template-columns: minmax(0, 1fr) auto; } [data-rj-app-cta] .btns { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-self: end; } } /* 信頼の帯（.trust） */ .trust { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .trust__n { font-family: var(--sans); font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1; } .trust__t { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin: .5rem 0 .3rem; } .trust__p { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); } /* ---------- 11. 5段階の索引（.stages）: 白いタイル（24px）。番号は紅の淡地のピル。ベント: 3列、5番目が横長 ---------- */ .stages { display: grid; gap: 1rem; grid-template-columns: 1fr; list-style: none; } .stage { display: flex; flex-direction: column; height: 100%; padding: 1.75rem; background: var(--panel); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; } .stage:hover { transform: translateY(-2px); color: inherit; box-shadow: var(--shadow); } .stage__i { display: none; } .stage__n { align-self: flex-start; font-size: .6875rem; font-weight: 600; color: var(--red); letter-spacing: .1em; text-transform: uppercase; background: var(--red-tint); border-radius: var(--r-btn); padding: .3rem .7rem; margin-bottom: 1rem; } .stage__t { font-family: var(--sans); font-size: var(--fs-3); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; margin-bottom: .5rem; color: var(--ink); } .stage__q { font-size: .9375rem; color: var(--ink-2); margin-bottom: 1rem; } .stage__go { margin-top: auto; font-size: .875rem; font-weight: 600; color: var(--red-deep); } @media (min-width: 40rem) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 60rem) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stages li:nth-child(5) { grid-column: span 2; } } /* ---------- 12. 次に読む（.next）: 地の上では白いタイル（20px）、パネルの中では罫線の行 ---------- */ .next { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); list-style: none; margin-top: 0; } .next a { display: block; padding: 1.1rem 1.25rem; border: 0; border-radius: var(--r); text-decoration: none; background: var(--panel); box-shadow: var(--shadow); transition: transform .12s; } .next a:hover { transform: translateY(-2px); background: var(--panel); } .next__k { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .25rem; } .next__t { display: block; font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .wrap--narrow .next, .art-after .next, .art-body .next, .art > :not(.side) .next { grid-template-columns: 1fr; gap: 0; } .wrap--narrow .next a, .art-after .next a, .art-body .next a, .art > :not(.side) .next a { background: transparent; box-shadow: none; border-radius: 0; border-top: 1px solid var(--line); padding: .9rem .25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; align-items: center; } .wrap--narrow .next a .next__k, .art-after .next a .next__k, .art-body .next a .next__k, .art > :not(.side) .next a .next__k { grid-column: 1; grid-row: 1; } .wrap--narrow .next a .next__t, .art-after .next a .next__t, .art-body .next a .next__t, .art > :not(.side) .next a .next__t { grid-column: 1; grid-row: 2; } .wrap--narrow .next a::after, .art-after .next a::after, .art-body .next a::after, .art > :not(.side) .next a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; color: var(--red); font-family: var(--mono); } .wrap--narrow .next a:hover, .art-after .next a:hover, .art-body .next a:hover, .art > :not(.side) .next a:hover { transform: none; } .wrap--narrow .next a:hover .next__t, .art-after .next a:hover .next__t { color: var(--red-deep); } .wrap--narrow .next li:last-child a, .art-after .next li:last-child a { border-bottom: 1px solid var(--line); } /* ---------- 13. 記事一覧の行（.cards/.card）: 罫線で区切る行。タグは紅・大文字 ---------- */ .cards { list-style: none; display: grid; gap: 0; } .cards:empty { display: none; } .card { border-bottom: 1px solid var(--line); } .card:first-child { border-top: 1px solid var(--line); } .card > a { display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem 0; text-decoration: none; color: inherit; } .card > a:hover .card__t { color: var(--red-deep); } .card__i { width: 3.25rem; height: 3.25rem; flex: none; border-radius: 14px; background: var(--tint); padding: .6rem; } .card__b { display: block; min-width: 0; } .card__m { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: .25rem; } .card__t { display: block; font-family: var(--sans); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; transition: color .12s; } .card__d { display: block; font-size: .9375rem; color: var(--ink-2); margin-top: .3rem; line-height: 1.55; } .cnt { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); background: var(--tint-2); border-radius: var(--r-btn); padding: .05rem .5rem; flex: none; } .arch__d { font-size: .9375rem; color: var(--ink-3); margin: .35rem 0 .9rem; } .feed { list-style: none; display: grid; gap: 0; } .feed li { border-bottom: 1px solid var(--line); } .feed a { display: grid; gap: .3rem; padding: 1.1rem 0; text-decoration: none; color: inherit; } .feed a:hover .feed__t { color: var(--red-deep); } .feed__m { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .75rem; color: var(--ink-3); font-family: var(--mono); } .feed__t { font-family: var(--sans); font-size: 1.125rem; font-weight: 700; line-height: 1.3; } .feed__d { font-size: .9375rem; color: var(--ink-2); } /* ---------- 14. 索引ページ（.art = 一覧＋右の側欄）。一覧は白いパネル、側欄は白いタイル ---------- */ .art { display: grid; gap: clamp(1.25rem, 3vw, 2rem); padding: .5rem 0 0; align-items: start; } .art > :not(.side) { background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem); min-width: 0; } .art > div > h2 { font-family: var(--sans); font-size: var(--fs-4); margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .art > div > h3 { font-size: 1.0625rem; margin-top: 1.6rem; } .art h3 .cnt { vertical-align: middle; margin-left: .4rem; } .side { display: grid; gap: 1rem; align-content: start; } .side__box { border: 0; border-radius: var(--r); padding: 1.15rem 1.25rem; background: var(--panel); box-shadow: var(--shadow); } .side__t { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; } .side ul { list-style: none; display: grid; gap: .55rem; } .side li { font-size: .9375rem; line-height: 1.45; } .side .cats li { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; } .side a { color: var(--ink-2); text-decoration: none; } .side a:hover { color: var(--red-deep); text-decoration: underline; } @media (min-width: 56rem) { .art { grid-template-columns: minmax(0, 1fr) 19rem; } } /* ---------- 15. 本文（.prose）と本文の部品 ---------- */ .prose { max-width: var(--measure); margin-top: 1.35rem; } .prose > * + * { margin-top: 1.15rem; } /* 2026-11-02 実際に試した記事の写真（本文の figure） */ .prose figure { margin-inline: 0; } .prose figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 32rem; border-radius: 20px; } .prose figcaption { margin-top: .5rem; font-size: .875rem; color: var(--ink-2, inherit); } .prose h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); letter-spacing: -.02em; scroll-margin-top: calc(var(--nav-h) + 1rem); } .prose h3 { font-size: 1.2rem; margin-top: 2rem; scroll-margin-top: calc(var(--nav-h) + 1rem); } .prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h2 + ol, .prose h3 + ul, .prose h3 + ol { margin-top: .7rem; } .prose p { color: var(--ink-2); line-height: 1.78; } .prose ul, .prose ol { padding-left: 1.35rem; color: var(--ink-2); } .prose li + li { margin-top: .45rem; } .prose li { padding-left: .1rem; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose ul li::marker { color: var(--red); } .prose ol li::marker { color: var(--red-deep); font-family: var(--mono); font-size: .9em; } .prose strong { color: var(--ink); font-weight: 700; } .prose em { font-style: italic; } .prose a { text-decoration-color: var(--red-line); } .prose a:hover { text-decoration-color: currentColor; } .prose blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1rem; border-left: 3px solid var(--red-line); color: var(--ink-2); } .prose figure, .prose .note, .prose .take, .prose .tbl--scroll { max-width: none; } .prose table { width: 100%; font-size: .9375rem; border-collapse: collapse; } .prose th, .prose td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; } .prose thead th { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--ink); font-family: var(--sans); } /* 答えを最初に: 記事本文の最初の段落は少し大きく、左に紅の罫線 */ .art-body .prose > p:first-child { font-size: 1.125rem; line-height: 1.7; color: var(--ink); padding-left: 1rem; border-left: 3px solid var(--red); } /* 「未発表」の節: 見出しの上に琥珀のバッジ（本文の文言は変えない） */ .prose h2[data-note] { border-top-color: var(--amber-line); } .prose h2[data-note]::before { content: attr(data-note-label); display: block; width: max-content; max-width: 100%; font: 700 .6875rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--r-btn); padding: .32rem .6rem; margin-bottom: .6rem; } figure { margin: 1.75rem 0; } figure img { width: 100%; border: 0; border-radius: var(--r); background: var(--tint); } figcaption { font-size: .8125rem; color: var(--ink-3); margin-top: .55rem; line-height: 1.5; } .fig--plain img { border: 0; border-radius: 0; background: transparent; } /* ---------- 図版（v3.2.2・2026-09-07）。画像（SVG の ）をやめて HTML で描く ---------- なぜ: SVG の中の文字は OS の書体で幅が変わり、枠からはみ出す（confirmed.svg で実害）。端の線が切れる。 画像は ?v= が無く 1 年キャッシュで旧版が残る。書体もセリフと等幅のまま v3.2 に揃わない。AI が本文として読めない。 規律: 図版は段のパネルの中に置く「罫線の部品」。塗りのパネルを作らない。紅は結果の金額とラベルだけ。琥珀は未発表だけ。 */ .fig { margin: 1.75rem 0; } .fig__grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--panel); } .fig__col { padding: 1.15rem 1.35rem 1.3rem; min-width: 0; } .fig__col + .fig__col { border-top: 1px solid var(--line-2); } .fig__col--new { box-shadow: inset 0 3px 0 var(--red); } /* 新制度の列: 上端に紅の線（帯と同じ言葉） */ @media (min-width: 40rem) { .fig__grid { grid-template-columns: 1fr 1fr; } .fig__col + .fig__col { border-top: 0; border-left: 1px solid var(--line-2); } } .fig__k { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .fig__col--new .fig__k { color: var(--red); } .fig__t { font-family: var(--sans); font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin: .35rem 0 .75rem; text-wrap: balance; } /* 手順（店 → 空港 → あと）: 順序に意味があるので番号を出す */ .fig .fig__steps { list-style: none; margin: 0; padding: 0; counter-reset: figstep; } /* .prose ol より強く（.prose ol は decimal・padding-left） */ .fig .fig__step { margin: 0; counter-increment: figstep; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; grid-template-areas: "n l l" "n v a"; column-gap: .6rem; row-gap: .15rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--line); } .fig__step::before { content: counter(figstep); grid-area: n; font-size: .75rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; align-self: start; padding-top: .15rem; } .fig__step .fig__l { grid-area: l; font-size: .8125rem; font-weight: 600; color: var(--ink-3); } .fig__step .fig__v { grid-area: v; color: var(--ink-2); min-width: 0; } .fig__n { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .fig__step .fig__n { grid-area: a; } .fig__n--mute { color: var(--ink-3); font-weight: 400; } .fig__n--result { color: var(--red); font-weight: 700; font-size: 1.25rem; } /* 式（税込 = 本体 + 消費税）: 中央の結果だけ紅 */ .fig__eq { display: grid; grid-template-columns: 1fr; gap: .5rem; border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.15rem 1.35rem; background: var(--panel); } .fig__cell { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; } .fig__cell > * { grid-column: 1; } .fig__cell .fig__n { display: block; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; margin: .3rem 0 .25rem; white-space: nowrap; } .fig__cell--result .fig__k, .fig__cell--result .fig__n { color: var(--red); } .fig__cell--result .fig__n { font-weight: 700; } .fig__s { display: block; font-size: .8125rem; color: var(--ink-3); line-height: 1.45; } .fig__s b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; } .fig__op { font-size: 1.5rem; font-weight: 400; color: var(--ink-3); line-height: 1; padding: .2rem 0; } @media (min-width: 40rem) { /* 3 つのセルの「ラベル・金額・注」を同じ行に揃える（ラベルが 2 行に折れても金額の高さが揃う） */ .fig__eq { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); grid-template-rows: auto auto auto; gap: 0 1rem; align-items: start; } .fig__cell { grid-row: 1 / span 3; grid-template-rows: subgrid; } .fig__op { grid-row: 2; align-self: center; padding: 0; } } /* 確定／未発表の一覧: 印は CSS で描く（書体に依存しない） */ .fig .fig__list { list-style: none; margin: .75rem 0 0; padding: 0; } /* .prose ul より強く */ .fig .fig__list li { margin: 0; position: relative; padding: .5rem 0 .5rem 1.9rem; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.5; } .fig .fig__list li:first-child { border-top: 0; } .fig .fig__list--yes li::before { content: ""; position: absolute; left: .2rem; top: .95rem; width: .55rem; height: .95rem; border: solid var(--red); border-width: 0 2.5px 2.5px 0; transform: translateY(-.15rem) rotate(45deg); } .fig .fig__list--no li::before { content: ""; position: absolute; left: .1rem; top: 1.15rem; width: 1rem; height: 2.5px; border-radius: 2px; background: var(--amber); } .tbl { width: 100%; font-size: .9375rem; margin: 1.25rem 0; } .tbl caption { text-align: left; font-size: .8125rem; color: var(--ink-3); padding-bottom: .5rem; } .tbl th, .tbl td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; } .tbl thead th { font-family: var(--sans); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--ink); position: sticky; top: 0; background: var(--panel); } .tbl tbody th { font-weight: 600; color: var(--ink); } .tbl td.n { text-align: right; font-family: var(--mono); } .tbl td.zero { color: var(--ink); font-weight: 700; } .tbl--scroll, .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; } .pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: var(--r-btn); font-size: .75rem; font-weight: 700; white-space: nowrap; } .pill--y { background: var(--red-tint); color: var(--red-deep); } .pill--n { background: var(--amber-bg); color: var(--amber); } .note { border: 0; border-left: 3px solid var(--line-2); background: var(--tint); border-radius: 0 var(--r-input) var(--r-input) 0; padding: 1rem 1.15rem; margin: 1.5rem 0; } .note__t { font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .35rem; } .note p { font-size: .9375rem; color: var(--ink-2); } .note--amber, .note--red { border-left-color: var(--amber); background: var(--amber-bg); } /* 注意は琥珀。紅の注意は持たない */ .note--amber .note__t, .note--red .note__t { color: var(--amber); } .callout-unannounced { border-left: 3px solid var(--amber); background: var(--amber-bg); padding: 1rem 1.15rem; border-radius: 0 var(--r-input) var(--r-input) 0; margin: 1.5rem 0; color: var(--ink-2); } .badge-unannounced { display: inline-block; font: 700 .6875rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--r-btn); padding: .32rem .6rem; vertical-align: middle; } .take { border: 0; border-radius: var(--r); padding: 1.25rem 1.5rem; margin: 1.75rem 0; background: var(--tint); } .take__t { font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .6rem; } .take ul { list-style: none; display: grid; gap: .5rem; } .take li { position: relative; padding-left: 1.35rem; font-size: .9375rem; color: var(--ink-2); } .take li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--red); } .take li b { color: var(--ink); } .def { border-left: 3px solid var(--red-line); padding: .15rem 0 .15rem .9rem; color: var(--ink-2); font-size: .9375rem; margin-top: 1rem; } .def b { color: var(--ink); } .gl { margin: 0; } .gl dt { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; margin-top: 1.15rem; scroll-margin-top: calc(var(--nav-h) + 1rem); } .gl dd { margin: .25rem 0 0; color: var(--ink-2); font-size: .9375rem; } .az { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.25rem 0; } .az a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: var(--r-btn); text-decoration: none; font-family: var(--mono); font-size: .875rem; font-weight: 600; background: var(--panel); color: var(--ink-2); } .az a:hover { border-color: var(--red); color: var(--red-deep); } .lanes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .lane { border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem; background: var(--panel); } .lane--now { background: var(--tint); border-color: transparent; } .lane--new { border-color: var(--red); } .lane__t { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem; } .lane--new .lane__t { color: var(--red-deep); } .lane h3 { font-size: 1.1875rem; margin-bottom: .5rem; } .lane p { font-size: .9375rem; color: var(--ink-2); } .lane ol { list-style: none; counter-reset: s; margin-top: .85rem; display: grid; gap: .55rem; } .lane li { counter-increment: s; position: relative; padding-left: 1.9rem; font-size: .9375rem; color: var(--ink-2); } .lane li::before { content: counter(s); position: absolute; left: 0; top: .1rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--tint-2); color: var(--ink-2); font-family: var(--mono); font-size: .75rem; display: flex; align-items: center; justify-content: center; } .lane--new li::before { background: var(--red-tint); color: var(--red-deep); } .plan { list-style: none; display: grid; gap: 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow: visible; } .plan li { background: transparent; padding: .9rem 0; display: grid; gap: .2rem; border-bottom: 1px solid var(--line); } .plan__q { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; } .plan__m { font-size: .8125rem; color: var(--ink-3); } .origin { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); list-style: none; } .origin li { border: 1px solid var(--line); border-radius: var(--r); padding: 1.15rem; background: var(--panel); } .origin h3 { font-size: 1.0625rem; margin-bottom: .4rem; } .origin p { font-size: .9375rem; color: var(--ink-2); } .origin .flagline { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .35rem; } .promo { display: grid; gap: 1.25rem; align-items: center; border: 0; border-radius: var(--r-panel); padding: clamp(1.25rem, 3vw, 2rem); background: var(--red-tint); } .promo__k { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: .4rem; } .promo h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin-bottom: .5rem; } .promo p { font-size: .9375rem; color: var(--ink-2); margin-bottom: .9rem; } .promo img { width: 100%; max-width: 22rem; border-radius: var(--r); } @media (min-width: 56rem) { .promo { grid-template-columns: 1.4fr 1fr; } } /* ---------- 16. FAQ（.qa）: 罫線の行。質問文は太字、右に紅の＋／− ---------- */ .qa { border-top: 1px solid var(--line); margin-top: 1.5rem; } .qa details { border-bottom: 1px solid var(--line); } .qa summary { cursor: pointer; list-style: none; padding: 1rem 2.25rem 1rem 0; position: relative; font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.4; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: "+"; position: absolute; right: .25rem; top: .8rem; width: auto; height: auto; border: 0; transform: none; font: 300 1.5rem/1 var(--sans); color: var(--red); } .qa details[open] summary::after { content: "−"; transform: none; } .qa summary:hover { color: var(--red-deep); } .qa details[open] summary { color: var(--ink); } .qa .qa__a { padding: 0 0 1.25rem; font-size: .9375rem; color: var(--ink-2); line-height: 1.7; max-width: var(--measure); } .qa .qa__a > * + * { margin-top: .7rem; } /* ---------- 17. 出典（.srcs）・署名（.byline）・メタ行（.meta） ---------- */ .srcs { list-style: none; counter-reset: c; display: grid; gap: 0; font-size: .9375rem; border-top: 1px solid var(--line); } .srcs li { counter-increment: c; position: relative; padding: .8rem 0 .8rem 2rem; color: var(--ink-2); line-height: 1.55; border-bottom: 1px solid var(--line); } .srcs li::before { content: counter(c); position: absolute; left: 0; top: .95rem; width: 1.4rem; height: 1.4rem; border: 1px solid var(--line-2); border-radius: 50%; font-family: var(--mono); font-size: .75rem; display: flex; align-items: center; justify-content: center; color: var(--ink-3); background: transparent; } .srcs a { font-weight: 600; } .srcs .chk { display: block; font-size: .8125rem; color: var(--ink-3); font-family: var(--mono); } .byline { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: 1rem 0; margin: 1.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .8125rem; color: var(--ink-3); } .byline b { color: var(--ink); } .byline--end { margin: 2.25rem 0 0; padding: 1rem 0 0; border-bottom: 0; } .meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .meta b { color: var(--ink); font-weight: 600; } .meta__ok { display: inline-flex; align-items: center; gap: .35rem; color: var(--red-deep); font-weight: 600; } .meta__ok::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--red); } /* 記事の責任者（2026-10-30 t079）。上の署名は小さな丸い顔写真＋「責任者: 氏名」＋肩書きの 2 行。⛔ 写真の丸のほかに色の面・チップを足さない */ .meta__who { flex-basis: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: .55rem; align-items: center; color: var(--ink-3); line-height: 1.45; } .meta__who img { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .meta__who a { color: var(--ink); font-weight: 600; } /* 編集方針 #who の責任者のプロフィール（.person。⛔ .who は ja の rj-local.css が別の部品に使っている）。白地のまま、写真と文字だけ */ .person { display: flex; gap: 1.25rem; align-items: flex-start; margin: 1.5rem 0; padding: 1.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .person__photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; flex: none; } .person__body { min-width: 0; } .person .person__name { margin: 0; color: var(--ink); font-size: var(--fs-3); font-weight: 700; line-height: 1.4; } .person .person__bio { list-style: none; margin: .6rem 0 0; padding: 0; color: var(--ink-2); font-size: var(--fs-1); line-height: 1.6; } .person .person__bio li { padding: 0; } .person .person__bio li + li { margin-top: .2rem; } .person .person__src { margin: .6rem 0 0; font-size: var(--fs-0); line-height: 1.6; color: var(--ink-3); } @media (max-width: 560px) { .person { flex-direction: column; gap: .9rem; } .person__photo { width: 96px; height: 96px; } } /* ---------- 18. 目次（.toc）: パネルの中では罫線だけ。デスクトップの記事レールでは白いタイル ---------- */ .toc { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 1rem 0; background: transparent; margin-top: 1.5rem; } .toc__t { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .55rem; } .toc ol { list-style: none; counter-reset: t; display: grid; gap: .45rem; } .toc li { counter-increment: t; font-size: .9375rem; line-height: 1.4; } .toc li::before { content: counter(t) "."; color: var(--ink-3); font-family: var(--mono); font-size: .8125rem; margin-right: .4rem; } .toc a { color: var(--ink-2); text-decoration: none; } .toc a:hover { color: var(--red-deep); text-decoration: underline; } details.toc { padding: 0; margin-top: 0; } details.toc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .85rem 0; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } details.toc > summary::-webkit-details-marker { display: none; } details.toc > summary::after { content: ""; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg); transition: transform .15s; } details.toc[open] > summary::after { transform: rotate(-135deg); } details.toc > ol { padding: 0 0 1rem; gap: .45rem; } details.toc a[aria-current="true"] { color: var(--red-deep); font-weight: 600; } /* ---------- 19. 記事（.art-layout）: 頭と本文で1枚の白いパネル。目次は右レールのタイル ---------- */ .art-layout { display: grid; gap: 0; grid-template-areas: "head" "rail" "body"; margin-top: .5rem; } .art-head { grid-area: head; max-width: none; background: var(--panel); border-radius: var(--r-panel) var(--r-panel) 0 0; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem) 1.5rem; box-shadow: var(--shadow); } .art-head .crumb { padding-top: 0; } .art-head h1 { max-width: 24ch; } .art-head .eyebrow { margin-top: 1rem; } .art-rail { grid-area: rail; background: var(--panel); padding: 0 clamp(1.5rem, 4vw, 3.25rem); } .art-body { grid-area: body; min-width: 0; max-width: none; background: var(--panel); border-radius: 0 0 var(--r-panel) var(--r-panel); padding: 1.5rem clamp(1.5rem, 4vw, 3.25rem) clamp(1.75rem, 4vw, 3rem); box-shadow: var(--shadow); } .art-body .prose { margin-top: 0; } .art-body > * { max-width: var(--measure); } .art-single { padding-top: clamp(1.25rem, 4vw, 2.5rem); } .art-single .lede { margin-top: .9rem; } .art-after { max-width: none; background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 3rem); margin-top: var(--gap-section); } .art-after .sechead:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .art-after > * { max-width: var(--measure); } @media (min-width: 72rem) { .art-layout { grid-template-columns: minmax(0, calc(var(--measure) + 6rem)) 16rem; grid-template-areas: "head rail" "body rail"; column-gap: 2.5rem; row-gap: 0; justify-content: start; } .art-rail { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; max-height: calc(100vh - var(--nav-h) - 2rem); overflow: auto; background: transparent; padding: 0; margin-top: clamp(1.25rem, 4vw, 2.5rem); } .art-rail .toc { background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow); border: 0; padding: .25rem 1.25rem; } .art-rail details.toc > summary { padding: .95rem 0 .6rem; } .art-after { max-width: calc(var(--measure) + 6rem); } } /* ---------- 20. フッター: 地の上に直接。細い罫線と小さな文字 ---------- */ .site-note { font-size: .8125rem; line-height: 1.6; color: var(--ink-3); border-top: 0; padding-top: 0; margin-top: clamp(2rem, 5vw, 3rem); max-width: 44rem; } footer { background: transparent; color: var(--ink-2); margin-top: clamp(2rem, 5vw, 3rem); padding: clamp(2rem, 5vw, 3rem) 0; font-size: .875rem; border-top: 1px solid var(--line-2); } .foot { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .foot h2 { font-family: var(--sans); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; } .foot ul { list-style: none; display: grid; gap: .45rem; } .foot a { color: var(--ink-2); text-decoration: none; } .foot a:hover { color: var(--red-deep); text-decoration: underline; } .foot__b { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .8125rem; color: var(--ink-3); } .foot__b p { color: var(--ink-3); } .foot__b a { color: var(--ink-2); } /* ---------- 21. 画面幅 ---------- */ @media (max-width: 600px) { body { font-size: 16px; } .ribbon__in { flex-wrap: nowrap; overflow-x: auto; gap: 0 1.1rem; padding-top: .4rem; padding-bottom: .4rem; scrollbar-width: none; } .ribbon__in::-webkit-scrollbar { display: none; } .ribbon__in > span { white-space: nowrap; flex: none; } .ribbon__r { margin-left: 0; } .langline { display: none; } .rj-nav { top: .35rem; } .rj-logo { font-size: 1.05rem; padding-right: .6rem; } .rj-nav__links a { padding: .45rem .7rem; font-size: .875rem; } .rj-nav__u { justify-content: flex-start; } .hero { padding: 1.5rem 1.25rem; } .byline { gap: .35rem .8rem; } .promo img { max-width: 100%; } .sechead p { margin-left: 0; } } @media (max-width: 380px) { .rj-logo { font-size: 1rem; } } /* ---------- 21.5 桜の飾り ---------- */ /* 桜（2026-10-30）：パソコンの左右の余白だけ。中身（約 1180px）より外の、文字の無い所に限る。スマホ・タブレットには出さない 形は免税店シンボルマークの桜に寄せた花びら（事務局に確認した「段階 2」＝白地に赤い桜。赤い丸・白抜き・文字は使わない）。作り方は docs/桜の飾り_2026-10-30.md */ @media (min-width: 1440px) { body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%221600%22%20viewBox%3D%220%200%20120%201600%22%3E%3Cg%20fill%3D%22%23E60012%22%20opacity%3D%220.55%22%3E%3Cg%20transform%3D%22translate%286%20180%29%20scale%280.78%200.78%29%22%3E%3Cg%20transform%3D%22translate%2845%2062%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2894%2094%29%20rotate%2820%29%20scale%280.46%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%28114%2040%29%20rotate%2858%29%20scale%280.36%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2872%2020%29%20rotate%28-12%29%20scale%280.3%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%288%2094%29%20rotate%28-70%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2820%20130%29%20rotate%28-40%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2810%201060%29%20scale%280.62%200.62%29%22%3E%3Cg%20transform%3D%22translate%2845%2062%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2894%2094%29%20rotate%2820%29%20scale%280.46%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%28114%2040%29%20rotate%2858%29%20scale%280.36%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2872%2020%29%20rotate%28-12%29%20scale%280.3%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%288%2094%29%20rotate%28-70%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2820%20130%29%20rotate%28-40%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%221600%22%20viewBox%3D%220%200%20120%201600%22%3E%3Cg%20fill%3D%22%23E60012%22%20opacity%3D%220.55%22%3E%3Cg%20transform%3D%22translate%28114%20620%29%20scale%28-0.75%200.75%29%22%3E%3Cg%20transform%3D%22translate%2845%2062%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2894%2094%29%20rotate%2820%29%20scale%280.46%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%28114%2040%29%20rotate%2858%29%20scale%280.36%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2872%2020%29%20rotate%28-12%29%20scale%280.3%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%288%2094%29%20rotate%28-70%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2820%20130%29%20rotate%28-40%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28110%201400%29%20scale%28-0.6%200.6%29%22%3E%3Cg%20transform%3D%22translate%2845%2062%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2894%2094%29%20rotate%2820%29%20scale%280.46%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%28114%2040%29%20rotate%2858%29%20scale%280.36%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2872%2020%29%20rotate%28-12%29%20scale%280.3%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%288%2094%29%20rotate%28-70%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2820%20130%29%20rotate%28-40%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat-y, repeat-y; background-position: left top, right top; background-size: 120px auto, 120px auto; } } @media (min-width: 1680px) { body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22200%22%20height%3D%221600%22%20viewBox%3D%220%200%20200%201600%22%3E%3Cg%20fill%3D%22%23E60012%22%20opacity%3D%220.55%22%3E%3Cg%20transform%3D%22translate%2820%20180%29%20scale%281.2%201.2%29%22%3E%3Cg%20transform%3D%22translate%2845%2062%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2894%2094%29%20rotate%2820%29%20scale%280.46%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%28114%2040%29%20rotate%2858%29%20scale%280.36%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2872%2020%29%20rotate%28-12%29%20scale%280.3%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%288%2094%29%20rotate%28-70%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2820%20130%29%20rotate%28-40%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2840%201060%29%20scale%280.95%200.95%29%22%3E%3Cg%20transform%3D%22translate%2845%2062%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2894%2094%29%20rotate%2820%29%20scale%280.46%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%28114%2040%29%20rotate%2858%29%20scale%280.36%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2872%2020%29%20rotate%28-12%29%20scale%280.3%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%288%2094%29%20rotate%28-70%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2820%20130%29%20rotate%28-40%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22200%22%20height%3D%221600%22%20viewBox%3D%220%200%20200%201600%22%3E%3Cg%20fill%3D%22%23E60012%22%20opacity%3D%220.55%22%3E%3Cg%20transform%3D%22translate%28180%20620%29%20scale%28-1.15%201.15%29%22%3E%3Cg%20transform%3D%22translate%2845%2062%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2894%2094%29%20rotate%2820%29%20scale%280.46%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%28114%2040%29%20rotate%2858%29%20scale%280.36%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2872%2020%29%20rotate%28-12%29%20scale%280.3%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%288%2094%29%20rotate%28-70%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2820%20130%29%20rotate%28-40%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28170%201400%29%20scale%28-0.9%200.9%29%22%3E%3Cg%20transform%3D%22translate%2845%2062%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2894%2094%29%20rotate%2820%29%20scale%280.46%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%28114%2040%29%20rotate%2858%29%20scale%280.36%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2872%2020%29%20rotate%28-12%29%20scale%280.3%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%288%2094%29%20rotate%28-70%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2820%20130%29%20rotate%28-40%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 200px auto, 200px auto; } } /* 桜（スマホ〜小さめのパソコン）：記事の分類ラベルの右の空きに、桜のかたまりを 1 つだけ（1 画面に 1 か所。文字には重ねない。2026-10-30 代表） */ @media (max-width: 1439px) { .art-head { overflow-x: clip; } /* 分類名がとても長いとき（360px 幅で de の 2 本）に、桜が画面の外へはみ出して横にずれないように */ .art-head .tag--soft { position: relative; overflow: visible; } .art-head .tag--soft::after { content: ""; position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-58%); width: 52px; height: 52px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20140%20140%22%3E%3Cg%20fill%3D%22%23E60012%22%3E%3Cg%20transform%3D%22translate%2845%2062%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2894%2094%29%20rotate%2820%29%20scale%280.46%29%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%28114%2040%29%20rotate%2858%29%20scale%280.36%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2872%2020%29%20rotate%28-12%29%20scale%280.3%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%288%2094%29%20rotate%28-70%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22translate%2820%20130%29%20rotate%28-40%29%20scale%280.32%29%20translate%280%2028%29%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; pointer-events: none; } } /* 記事の終わりの印：本文の最後（出典の手前）に桜を 1 輪（全部の幅。2026-10-30 代表） */ .art-body .prose::after { content: ""; display: block; width: 26px; height: 26px; margin: 2.2rem auto .4rem; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-56%20-56%20112%20112%22%3E%3Cg%20fill%3D%22%23E60012%22%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%280%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%2872%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28144%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28216%29%22/%3E%3Cpath%20d%3D%22M0-5C-4-9-11-21-13-34C-14-41-13-46-10.5-49.5Q-9-51.5-7-51L0-46.5L7-51Q9-51.5%2010.5-49.5C13-46%2014-41%2013-34C11-21%204-9%200-5z%22%20transform%3D%22rotate%28288%29%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; } /* ---------- 22. 印刷・動き ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } @media print { .art-body .prose::after, .rj-nav, .ribbon, .art-rail, [data-rj-app-cta], .next, .card, .site-note, footer .foot__b { display: none !important; } body { background: #fff; background-image: none; } .wrap--narrow, .art-head, .art-body, .art-after, .band > .wrap, .wrap.band, .art > :not(.side) { box-shadow: none; } .prose { max-width: none; } a { color: inherit; text-decoration: none; } .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #666; } } /* ---------- 23. 罫線の重複を避ける（目次の直後の H2、段見出しの直後の行） ---------- */ .wrap--narrow .toc + .prose > h2:first-child { border-top: 0; padding-top: 0; margin-top: 2rem; } .sechead + .next li:first-child a { border-top: 0; } .sechead + .cards .card:first-child { border-top: 0; } /* 23b. フッターの言語一覧と最終確認日（main の 2026-09-06 v3 で足された部品。v3.2 の語彙で整える） */ /* 言語の行（2026-09-07 案B）: フッターの最上段に素の文字を横一列。飾り無し、現在地だけ紅の点 */ .foot__lang { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin: 0 0 1.75rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--line); font-size: .875rem; } .foot__lang a { color: var(--ink-2); text-decoration: none; white-space: nowrap; } .foot__lang a:hover { color: var(--red-deep); text-decoration: none; } .foot__lang a[aria-current] { color: var(--red-deep); font-weight: 600; position: relative; padding-left: .9rem; } .foot__lang a[aria-current]::before { content: ""; position: absolute; left: 0; top: .5em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--red); } .foot__stamp { margin-top: 1.25rem; font-size: .8125rem; color: var(--ink-3); } .foot__stamp b { color: var(--ink-2); font-variant-numeric: tabular-nums; } /* ---------- 22. 2026-09-07 の手直し（目視監査） ---------- */ /* 事実の帯の直後の見出しが密着していた */ .nums + .sechead { margin-top: var(--gap-section); } /* 1,100px 前後でナビの 5 段階目が切れていた。狭い幅では詰める */ @media (max-width: 75rem) and (min-width: 601px) { .rj-nav__links { gap: .05rem; } .rj-nav__links a { padding: .45rem .6rem; font-size: .875rem; } } /* 目次が右レールに出ない幅（72rem 未満）では、記事のパネルを固定ページと同じ幅に絞って中央に置く（左寄せの空白を無くす） */ @media (max-width: 71.99rem) { .art-layout, .art-after { max-width: calc(var(--measure) + 6rem); margin-left: auto; margin-right: auto; } } /* 更新履歴（/changelog）: 日付・題・区分・本文の 4 段。罫線の行 */ .log { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--line); } .log li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .2rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .log__d { font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: .2rem; } .log__t { display: block; font-weight: 600; color: var(--ink); font-size: 1.0625rem; line-height: 1.35; } .log__m { display: block; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: .3rem; } .log__p { margin: .45rem 0 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; } @media (max-width: 40rem) { .log li { grid-template-columns: 1fr; } .log__d { padding-top: 0; } } /* 図版: 3 列の手順（ko トップの流れ） */ .fig__grid--3 { grid-template-columns: 1fr; } @media (min-width: 40rem) { .fig__grid--3 { grid-template-columns: 1fr 1fr 1fr; } .fig__grid--3 .fig__col + .fig__col { border-top: 0; border-left: 1px solid var(--line-2); } } .fig__grid--3 .fig__k { font-variant-numeric: tabular-nums; } .fig__grid--3 .fig__v { display: block; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; } /* 図版: アプリ画面（/app）。SVG の をやめて HTML で */ .fig--phone { display: grid; justify-content: center; } .fig__phone { width: min(100%, 21rem); border: 2px solid var(--ink); border-radius: 2rem; padding: 1.4rem 1.25rem 1.25rem; background: var(--panel); } .fig__phone .fig__k { text-align: center; } .fig__phone .fig__t { text-align: center; margin: .3rem 0 .9rem; } .fig .fig__items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .fig .fig__items li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); align-items: center; } .fig__items .fig__v { grid-column: 1; grid-row: 1; color: var(--ink); font-weight: 600; } .fig__items .fig__s { grid-column: 1; grid-row: 2; } .fig__items .fig__n { grid-column: 2; grid-row: 1 / span 2; } .fig__total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding-top: .9rem; } .fig__total .fig__k { text-align: left; color: var(--red); } /* 図版の追加語彙（2026-09-07・ja/ko の SVG を HTML に） */ .fig__grid--4 { grid-template-columns: 1fr; } @media (min-width: 40rem) { .fig__grid--4 { grid-template-columns: 1fr 1fr; } .fig__grid--4 .fig__col:nth-child(2) { border-top: 0; border-left: 1px solid var(--line-2); } .fig__grid--4 .fig__col:nth-child(3) { border-top: 1px solid var(--line-2); border-left: 0; } .fig__grid--4 .fig__col:nth-child(4) { border-left: 1px solid var(--line-2); } } @media (min-width: 60rem) { .fig__grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .fig__grid--4 .fig__col + .fig__col { border-top: 0; border-left: 1px solid var(--line-2); } } .fig__grid--4 .fig__k, .fig__grid--3 .fig__k { font-variant-numeric: tabular-nums; } .fig__grid--4 .fig__v { display: block; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; } .fig__col--mute .fig__t, .fig__col--mute .fig__v { color: var(--ink-3); } @media (min-width: 40rem) { .fig__eq--2 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); } } .fig .fig__list--plain li { padding-left: 0; } .fig .fig__list--plain li::before { display: none; } /* 図版: 空港の手順・90 日の期限・tax free と duty free（2026-10-26・t096。en の SVG 3 枚を HTML に） 規律は上と同じ: 塗りの面を作らず、1px の罫線と余白で区切る。紅は番号・線・強調だけ。矢印は CSS の飾り（読み上げない）。 .prose の中に置かれても崩れないよう、.prose p・ol・li の余白と色をここで打ち消す。 */ .fig .fig__flow, .fig .fig__tl { list-style: none; margin: 0; padding: 0; color: var(--ink-2); } .fig .fig__flow li, .fig .fig__tl li { margin: 0; } .fig .fig__flow p, .fig .fig__tl p, .fig .fig__dl dd { margin: 0; } .fig .fig__flow .fig__t, .fig .fig__tl .fig__t, .fig--tfdf .fig__t { color: var(--ink); line-height: 1.3; } .fig__flow .fig__v, .fig__tl .fig__v { display: block; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; margin-top: .2rem; } /* 空港の手順: 番号つきの行を罫線で重ね、行の境目に下向きの矢印 */ .fig__flow { counter-reset: figflow; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); } .fig .fig__node { counter-increment: figflow; position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: 1.15rem 1.35rem 1.2rem; } .fig__node > * { grid-column: 2; } .fig__node::before { content: counter(figflow); grid-column: 1; grid-row: 1 / span 2; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--red); font-variant-numeric: tabular-nums; } .fig__node + .fig__node { border-top: 1px solid var(--line-2); } .fig__node:not(:last-child)::after, .fig__branch > li::before { content: ""; position: absolute; width: .6rem; height: .6rem; background: var(--panel); border: solid var(--line-2); border-width: 0 1px 1px 0; transform: rotate(45deg); z-index: 1; } .fig__node:not(:last-child)::after { left: 1.6rem; bottom: -.33rem; } .fig .fig__flow .fig__node .fig__t { font-size: 1.0625rem; } /* Green／Red の枝: 2 番目の行の中で、行の幅いっぱいに罫線で区切る（狭い画面は縦、40rem 以上は横に並ぶ） */ .fig .fig__branch { grid-column: 1 / -1; list-style: none; margin: 1.15rem -1.35rem -1.2rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-2); } .fig .fig__branch > li { position: relative; margin: 0; padding: 1rem 1.35rem 1.1rem 3.35rem; } .fig__branch > li + li { border-top: 1px solid var(--line-2); } .fig__branch > li::before { left: 1.6rem; top: -.33rem; transform: rotate(45deg); } .fig__branch > li + li::before { display: none; } .fig__branch .fig__k { color: var(--ink); font-size: .75rem; } .fig__branch .fig__branch-r .fig__k { color: var(--red); } .fig .fig__branch .fig__t { font-size: 1rem; margin-top: .2rem; } @media (min-width: 40rem) { .fig .fig__branch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fig__branch > li + li { border-top: 0; border-left: 1px solid var(--line-2); padding-left: 1.35rem; } .fig__branch > li + li::before { display: block; left: 1.35rem; } } .fig__result { box-shadow: inset 0 2px 0 var(--red); } .fig__result .fig__k { color: var(--red); margin-bottom: .2rem; } /* 90 日の期限: 紅の線に始まりと終わりの目盛り。狭い画面は縦、40rem 以上は横 */ .fig .fig__tl { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); padding: 1.15rem 1.35rem 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); } .fig .fig__tl > li { position: relative; padding: 0 0 1.1rem 1.5rem; } .fig .fig__tl > li:last-child { padding-bottom: 0; } .fig__tl > li::before { content: ""; position: absolute; left: .3rem; top: 0; bottom: 0; width: 2px; background: var(--red); } .fig__tl > .fig__tl-start::before { top: .55rem; } .fig__tl > .fig__tl-end::before { bottom: auto; height: .55rem; } .fig__tl > .fig__tl-start::after, .fig__tl > .fig__tl-end::after { content: ""; position: absolute; left: 0; top: .5rem; width: .7rem; height: 2px; background: var(--red); } .fig__tl > .fig__tl-span { padding-top: .1rem; } .fig__tl > .fig__tl-span::before { background: none; border-left: 2px dashed var(--red-line); width: 0; } .fig .fig__tl .fig__tl-span .fig__t { color: var(--ink-2); font-size: .9375rem; font-weight: 600; } .fig .fig__tl .fig__tl-end .fig__t { color: var(--red); } @media (min-width: 40rem) { .fig .fig__tl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); padding-top: 1.6rem; } .fig .fig__tl > li { padding: 1.1rem .75rem 0 0; } .fig .fig__tl > li:last-child { padding: 1.1rem 0 0 .75rem; text-align: right; } .fig .fig__tl > .fig__tl-span { padding: 1.1rem .75rem 0; text-align: center; } .fig__tl > li::before, .fig__tl > .fig__tl-start::before, .fig__tl > .fig__tl-end::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px; } .fig__tl > .fig__tl-span::before { border-left: 0; width: auto; height: 0; border-top: 2px dashed var(--red-line); top: 0; } .fig__tl > .fig__tl-start::after, .fig__tl > .fig__tl-end::after { top: -.35rem; width: 2px; height: .75rem; } .fig__tl > .fig__tl-end::after { left: auto; right: 0; } } /* tax free と duty free: 並んだ 2 つの節の中の項目（項目名 → 中身）。行は罫線で区切る */ .fig .fig__dl { margin: 0; } .fig__dl > div { padding: .55rem 0; border-top: 1px solid var(--line); } .fig__dl dt { font-size: .8125rem; font-weight: 600; color: var(--ink-3); } .fig__dl dd { color: var(--ink-2); line-height: 1.5; margin-top: .1rem; } .fig--tfdf .fig__col--new .fig__dl > div:last-child dd { color: var(--ink); font-weight: 600; } /* ── アプリへの入口（2026-10-27・中身は scripts/_inject_app_entry.mjs がビルドで入れる）── 端末は 、帯を閉じたら data-bar="off"（どちらも の小さなスクリプトが描く前に書く）。 iPhone はアプリが無いので、ボタン・帯・一言・右の欄を出さず、読み終わりの枠に「準備中」の一文だけ（代表の決定 10/27） */ .app-bar { display: none; } html[data-os="android"]:not([data-bar="off"]) .app-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; margin: .5rem var(--sp) 0; padding: .4rem .4rem .4rem .9rem; background: var(--panel); border-radius: 999px; box-shadow: var(--shadow); font-size: .8125rem; line-height: 1.35; } .app-bar .mark-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--red); } .app-bar__b { padding: .45rem .95rem; font-size: .8125rem; } .app-bar__x { border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 1.25rem; line-height: 1; padding: .3rem .55rem; cursor: pointer; } /* 本文の途中のアプリのカード（2026-11-02）。本文と別の物だと分かるように枠に入れ、赤は使わない */ .app-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .75rem 1rem; align-items: center; margin: 1.75rem 0; padding: 1rem 1.125rem; background: var(--paper); border: 1px solid var(--line-2); border-radius: 20px; } .app-card__i { display: block; width: 48px; height: 48px; border-radius: 12px; } .app-card__b { min-width: 0; } .app-card p { margin: 0; } .app-card__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; font-size: .9375rem; line-height: 1.4; } .app-card__h strong { font-weight: 700; letter-spacing: -.01em; } .app-card__h span { font-size: .75rem; color: var(--ink-3); } .app-card .app-card__t { margin-top: .125rem; font-size: .875rem; line-height: 1.5; color: var(--ink-2); } .app-card__badge { display: block; width: 8.5rem; border-radius: 8px; } .app-card__badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .app-card__badge img { display: block; width: 100%; height: auto; } @media (max-width: 34rem) { .app-card { grid-template-columns: 48px minmax(0, 1fr); } .app-card__badge { grid-column: 2; width: 9.5rem; } } .app-end__l { margin: 0 0 1.25rem; padding-left: 1.2rem; display: grid; gap: .4rem; max-width: 46rem; } .app-end__n { margin: .9rem 0 0; font-size: .8125rem; color: var(--ink-2); max-width: 46rem; } .app-ios { display: none; font-weight: 600; } html[data-os="ios"] .app-ios { display: block; } html[data-os="ios"] [data-rj-play], html[data-os="ios"] .app-card, html[data-os="ios"] .app-rail, html[data-os="ios"] .app-end .btns { display: none; } html[data-os="ios"] .foot li:has(> a[href*="play.google.com"]), html[data-os="ios"] .promo a[href*="play.google.com"] { display: none; } /* 前からあるフッターと繁体字・簡体字のトップの枠の Google Play も、iPhone では出さない */ .app-rail { margin-top: 1rem; padding: 1.125rem; display: grid; gap: .875rem; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); } .app-rail__head { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .75rem; align-items: center; } .app-rail__i { display: block; width: 48px; height: 48px; border-radius: 12px; } .app-rail__n { margin: 0; font-weight: 700; font-size: .9375rem; line-height: 1.3; letter-spacing: -.01em; } .app-rail__t { margin: .125rem 0 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.4; } .app-rail__badge { display: block; width: 100%; max-width: 13.5rem; justify-self: center; border-radius: 10px; } .app-rail__badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .app-rail__badge img { display: block; width: 100%; height: auto; } .app-rail__q { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .75rem; align-items: center; padding-top: .875rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--ink-2); line-height: 1.5; } .app-rail__q p { margin: 0; } .app-rail__qr img { display: block; width: 64px; height: 64px; } html[data-os="android"] .app-rail__q { display: none; } /* ── /app の一番上（チラシの QR の着地・2026-10-28・中身は scripts/_inject_app_entry.mjs の kind=app）── JS が動かない（data-os が無い）ときは今までどおり「Google Play のボタン＋Android と iPhone の一文」だけ。 Android … Google Play のボタンだけを横いっぱいに大きく（一文は出さない） iPhone … Google Play のボタンは出さない（上の [data-rj-play]）。「iPhone 版は準備中」と、免税の 3 つの手順（店・空港の税関・返金） PC … ボタンと一文に加え、スマホで読む QR（この /app の URL）と 3 つの手順。その他のスマホは ボタン＋一文＋3 つの手順 ⛔ グレーの面と丸いチップは使わない。区切りは細い線、番号は紅の数字だけ */ .app-top__ios, .app-top__pc, .app-steps { display: none; } html[data-os="android"] .app-top__st, html[data-os="ios"] .app-top__st { display: none; } html[data-os="android"] .app-top__st--keep { display: block; } /* 簡体字：「中国大陸では Google Play が使えない」を含むので Android でも残す */ html[data-os="ios"] .app-top__btns { display: none; } html[data-os="android"] .app-top__btns .btn { display: flex; width: 100%; justify-content: center; padding: 1.05rem 1.5rem; font-size: 1.0625rem; } html[data-os="ios"] .app-top__ios { display: block; margin: 1.25rem 0 0; font-weight: 600; } html[data-os="desktop"] .app-top__pc { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; align-items: center; margin: 1.25rem 0 0; max-width: 30rem; } .app-top__pc img { display: block; width: 112px; height: 112px; } .app-top__pc p { margin: 0; font-size: .875rem; color: var(--ink-2); line-height: 1.5; } html[data-os="ios"] .app-steps, html[data-os="desktop"] .app-steps, html[data-os="mobile"] .app-steps { display: block; } .app-steps { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--line); } .app-steps li { margin: 0; border-bottom: 1px solid var(--line); } .app-steps a { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .2rem .75rem; padding: .95rem 0; text-decoration: none; color: inherit; } .app-steps__n { grid-row: span 2; font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--red); } .app-steps__t { font-weight: 600; line-height: 1.35; color: var(--ink); } .app-steps__q { font-size: .875rem; line-height: 1.5; color: var(--ink-2); } .app-steps a:hover .app-steps__t { color: var(--red-deep); }