/* ========================================================= IR Portal — Monochrome Editorial System CCC IR サイト共通スタイル ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;900&family=Noto+Sans+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --ink: #111111; --ink-soft: #2a2a2a; --ink-mute: #555555; --ink-thin: #8a8a8a; --rule: #e2e2e2; --rule-soft: #f0f0f0; --paper: #ffffff; --paper-2: #f7f7f7; --paper-3: #ededed; --white: #ffffff; --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --display: "Times New Roman", "Times", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --maxw: 1240px; --gutter: 32px; /* Hover system — see "Hover system" section near end of file */ --t-hover: .35s; --ease-hover: cubic-bezier(.2, .7, .2, 1); } * { box-sizing: border-box; } /* ============ Top bar (login etc.) ============ */ .topbar { background: var(--paper-2); color: var(--ink); border-bottom: 1px solid var(--rule); transition: background .25s ease, border-color .25s ease; } .topbar .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: flex-end; align-items: stretch; min-height: 28px; } .topbar .login-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--ink); background: transparent; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); transition: background .15s, color .15s; } .topbar .login-btn:hover { background: var(--ink); color: var(--paper); } .topbar .login-icon { display: inline-flex; align-items: center; } .topbar .login-label { line-height: 1; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-weight: 400; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; overflow-x: clip; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ============ Sticky/Hide-on-scroll chrome ============ */ .site-chrome { background: var(--paper); } /* Slot + static chrome unwrap (display: contents) so the site-header inside can position: sticky against instead of being bounded by the short chrome wrapper. */ #site-header-slot, .site-chrome--static { display: contents; } /* Overlay copy: hidden by default, fades in only when the user scrolls UP from a deep position. */ .site-chrome--overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; opacity: 0; transform: translateY(-12px); pointer-events: none; visibility: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06); /* Quick fade-out so the overlay is gone before the static header re-enters view. */ transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; will-change: opacity, transform; } body.header-overlay-show .site-chrome--overlay { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; /* Opacity finishes first (0.25s ease-out), transform settles afterwards (0.45s). */ transition: opacity .25s ease-out, transform .45s cubic-bezier(.25, .8, .25, 1), visibility 0s linear 0s; } /* Overlay header system is disabled — the static site-header is now position: sticky and stays at top:0 by itself, so the scroll-up duplicate copy is no longer needed. */ .site-chrome--overlay { display: none; } /* Constrain megapanel to remaining viewport (with internal scroll if needed) */ .ir-megapanel { max-height: calc(100vh - var(--header-h, 120px)); overflow-y: auto; } /* ============ Header ============ */ .site-header { background: var(--paper); border-bottom: 1px solid var(--ink); position: sticky; top: 0; z-index: 50; transition: box-shadow .2s ease, background .25s ease, border-color .25s ease; } /* Subtle drop-shadow once the page has scrolled, to lift the sticky header above content */ body.scrolled .site-header { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .site-header .inner { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gutter); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .brand { display: flex; align-items: baseline; gap: 16px; } .brand .mark { font-family: "Times New Roman", "Times", "Noto Serif JP", serif; font-weight: 400; font-size: 28px; letter-spacing: 0.08em; line-height: 1; display: inline-flex; align-items: center; text-transform: uppercase; } .brand .tagline { font-family: var(--sans); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em; } .site-header nav.global { display: flex; gap: 24px; font-family: var(--sans); font-size: 13px; font-weight: 500; } .site-header nav.global a { padding-bottom: 6px; border-bottom: 2px solid transparent; color: var(--ink-soft); transition: border-color .15s; } .site-header nav.global a:hover { border-color: var(--ink); } .site-header nav.global a.active { border-color: var(--ink); color: var(--ink); } /* Hamburger toggle (mobile) */ .mega-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } /* Drawer wrapper — invisible structural container on desktop; becomes a slide-in panel on mobile */ .drawer-toggle, .drawer-link, .drawer-backdrop, .drawer-close-btn { display: none; } .mega-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); } /* ============ Megamenu — IR dropdown panel attached to header ============ */ .ir-megapanel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, visibility .2s, transform .2s; z-index: 200; box-shadow: 0 24px 48px rgba(0,0,0,0.08); } .ir-megapanel.open { opacity: 1; visibility: visible; transform: translateY(0); } .megapanel-inner { max-width: var(--maxw); margin: 0 auto; padding: 48px var(--gutter) 56px; display: grid; grid-template-columns: 200px 1fr; gap: 32px; } .megapanel-head .megapanel-eyebrow { font-family: var(--display); font-style: italic; font-size: 12px; color: var(--ink-mute); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; } .megapanel-head h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; margin: 0 0 24px; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; } .megapanel-head .megapanel-en { font-family: var(--display); font-style: italic; font-size: 15px; color: var(--ink-mute); margin: 0 0 24px; letter-spacing: 0.04em; } .megapanel-head .megapanel-top-link { display: inline-block; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; padding-bottom: 4px; border-bottom: 1px solid var(--ink); color: var(--ink); } .megapanel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* Tablet landscape / narrow desktop — 4 columns gets too cramped, switch to 2 */ @media (max-width: 1100px) and (min-width: 961px) { .megapanel-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } /* Megapanel — simple linklist (used for the 企業情報 menu) */ .megapanel-linklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); align-self: start; } .megapanel-linklist li { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .megapanel-linklist a { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: baseline; padding: 16px 24px; font-family: var(--serif); font-size: 15px; color: var(--ink); transition: background var(--t-hover) var(--ease-hover); } .megapanel-linklist a:hover { background: var(--paper-2); } .megapanel-linklist a.active { background: var(--ink); color: var(--paper); } .megapanel-linklist a.active .ix, .megapanel-linklist a.active .arrow { color: var(--paper); opacity: 0.85; } .megapanel-linklist .ix { font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ink-thin); letter-spacing: 0.06em; } .megapanel-linklist .arrow { font-family: var(--display); font-size: 15px; color: var(--ink-thin); } .cat-col { position: relative; } .cat-col .cat-collapse { display: none; /* hidden on desktop, visible on mobile */ background: transparent; border: 1px solid var(--rule); width: 28px; height: 28px; font-family: var(--display); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; color: var(--ink); } .cat-col .cat-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--ink); color: var(--ink); } .cat-col .cat-head:hover .cat-name { text-decoration: underline; text-underline-offset: 4px; } .cat-col .cat-head::after { content: "→"; font-family: var(--display); font-size: 15px; color: var(--ink-thin); transition: transform var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover); } .cat-col .cat-head:hover::after { color: var(--ink); transform: translateX(6px); } .cat-col .cat-num { font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ink-thin); letter-spacing: 0.08em; } .cat-col .cat-name { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; } .cat-col.active .cat-head { border-bottom-color: var(--ink); } .cat-col.active .cat-num { color: var(--ink); opacity: 0.7; } .cat-col .cat-items { list-style: none; margin: 0; padding: 0; } .cat-col .cat-items li { border-bottom: 1px dotted var(--rule); } .cat-col .cat-items a { display: block; position: relative; padding: 10px 0 10px 14px; font-family: var(--serif); font-size: 13px; color: var(--ink-soft); transition: color var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .cat-col .cat-items a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--ink-thin); transform: translateY(-50%); } .cat-col .cat-items a:hover { color: var(--ink); transform: translateX(4px); } .cat-col .cat-items a.active { color: var(--ink); font-weight: 700; } .cat-col .cat-items a.active::before { width: 10px; height: 2px; background: var(--ink); } /* "○○トップ" link injected into cat-items — hidden on desktop, shown on mobile/tablet where cat-head itself becomes non-clickable */ .cat-top-link { display: none; } /* Visual cue on the IR trigger when panel is open */ .site-header nav.global a.mega-trigger { position: relative; /* Larger hit area without changing the visible underline width */ padding: 0 8px 6px; margin: 0 -2px; /* preserve most of the original gap */ border-bottom: none; } .site-header nav.global a.mega-trigger::after { /* Visible underline stays at the text width (same as before) */ content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: transparent; transition: background .15s; } .site-header nav.global a.mega-trigger:hover::after, .site-header nav.global a.mega-trigger.is-open::after, .site-header nav.global a.mega-trigger.active::after { background: var(--ink); } .site-header nav.global a.mega-trigger::before { /* Invisible bridge that extends the hover area down into the header's bottom padding, so the cursor never leaves a hover target on the way to the panel. */ content: ""; position: absolute; left: -4px; right: -4px; top: 100%; height: 28px; } /* ============ Top utility bar (black, original position) ============ */ .utility { background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; } .utility .inner { max-width: var(--maxw); margin: 0 auto; padding: 8px var(--gutter); display: flex; justify-content: space-between; align-items: center; } .utility .crumbs span { opacity: 0.65; } .utility .crumbs span a { color: inherit; transition: opacity .15s; } .utility .crumbs span a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .utility .crumbs span + span::before { content: " / "; margin: 0 10px; opacity: 0.85; color: var(--paper); } .utility .crumbs span:last-child { opacity: 1; } /* ============ Page hero ============ */ .hero { border-bottom: 1px solid var(--rule); padding: 64px 0 56px; } .hero .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; } .hero .eyebrow { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 14px; letter-spacing: 0.12em; color: var(--ink-mute); text-transform: uppercase; } .hero h1 { font-family: var(--serif); font-weight: 600; font-size: 52px; line-height: 1.1; margin: 0; letter-spacing: 0.02em; } .hero h1 .en { display: block; font-family: var(--display); font-style: normal; font-weight: 400; font-size: 18px; letter-spacing: 0.16em; color: var(--ink-mute); margin-top: 16px; text-transform: uppercase; } .hero .meta { font-family: var(--display); font-size: 13px; color: var(--ink-mute); text-align: right; line-height: 1.8; letter-spacing: 0.04em; } /* ============ Article detail page (WordPress-style typography) ============ */ .article { max-width: 800px; margin: 0 auto; } .article-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; font-family: var(--display); font-style: italic; font-size: 12px; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; } .article-meta .tag { font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; background: var(--ink); color: var(--paper); padding: 4px 12px; } .article-title { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.45; letter-spacing: 0.02em; margin: 0 0 32px; padding-bottom: 32px; border-bottom: 2px solid var(--ink); } .article-body { font-family: var(--serif); font-size: 15px; line-height: 2; color: var(--ink); } .article-body > * + * { margin-top: 24px; } .article-body p { line-height: 2; color: var(--ink); margin: 0; } .article-body h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; margin: 56px 0 0; padding: 0 0 14px; border-bottom: 1px solid var(--ink); } .article-body h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: 0.02em; margin: 40px 0 0; padding-left: 14px; border-left: 3px solid var(--ink); } .article-body h4 { font-family: var(--serif); font-size: 16px; font-weight: 600; margin: 32px 0 0; color: var(--ink); } .article-body h5 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 24px 0 0; } .article-body h6 { font-family: var(--display); font-style: italic; font-size: 13px; font-weight: 400; color: var(--ink-mute); letter-spacing: 0.16em; text-transform: uppercase; margin: 20px 0 0; } .article-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .article-body a:hover { background: var(--paper-2); } .article-body strong { font-weight: 700; } .article-body em { font-style: italic; } .article-body code { font-family: var(--mono); font-size: 13px; background: var(--paper-2); padding: 2px 6px; border: 1px dotted var(--rule); } .article-body blockquote { margin: 32px 0; padding: 24px 28px; border-left: 3px solid var(--ink); background: var(--paper-2); font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.9; color: var(--ink-soft); } .article-body blockquote cite { display: block; font-style: normal; font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 12px; } .article-body ul, .article-body ol { margin: 16px 0 0; padding-left: 28px; list-style: none; } .article-body ol { counter-reset: olist; } .article-body li { position: relative; padding: 4px 0; line-height: 1.9; } .article-body ul > li::before { content: ""; position: absolute; left: -16px; top: 19px; width: 8px; height: 1px; background: var(--ink); } .article-body ol > li { counter-increment: olist; } .article-body ol > li::before { content: counter(olist) "."; position: absolute; left: -28px; top: 4px; font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ink-mute); letter-spacing: 0.06em; } .article-body li > ul, .article-body li > ol { margin-top: 4px; padding-left: 24px; } .article-body hr { margin: 48px 0; border: 0; border-top: 1px solid var(--rule); } .article-body figure { margin: 32px 0; } .article-body figure .placeholder { aspect-ratio: 16 / 9; width: 100%; } .article-body figure figcaption { font-family: var(--sans); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; margin-top: 12px; text-align: center; } .article-body table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; margin-top: 16px; } .article-body table th, .article-body table td { padding: 12px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } .article-body table thead th { border-bottom: 2px solid var(--ink); font-family: var(--display); font-weight: 400; font-style: italic; font-size: 12px; letter-spacing: 0.08em; color: var(--ink-soft); } .article-body table tbody tr:hover { background: var(--paper-2); } .article-body img { max-width: 100%; height: auto; display: block; } .article-footer-nav { max-width: 800px; margin: 80px auto 0; padding-top: 24px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; } .article-footer-nav a { display: inline-flex; align-items: baseline; gap: 10px; color: var(--ink); transition: opacity .15s; } .article-footer-nav a:hover { opacity: 0.6; } .article-footer-nav .prev { justify-self: start; } .article-footer-nav .index { justify-self: center; } .article-footer-nav .next { justify-self: end; } .article-footer-nav .label { font-family: var(--display); font-style: italic; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; } @media (max-width: 720px) { .article-title { font-size: 24px; padding-bottom: 24px; margin-bottom: 24px; } .article-body { font-size: 14px; } .article-body h2 { font-size: 19px; margin-top: 48px; } .article-body h3 { font-size: 17px; margin-top: 32px; } .article-body blockquote { padding: 16px 20px; font-size: 14px; } .article-body table { font-size: 12px; } .article-body table th, .article-body table td { padding: 8px 10px; } .article-footer-nav { grid-template-columns: 1fr; gap: 12px; } .article-footer-nav .prev, .article-footer-nav .index, .article-footer-nav .next { justify-self: stretch; } } /* ============ IR Calendar timeline (JR-East style, monochrome adapted) ============ */ .ir-calendar { margin-top: 32px; border-top: 1px solid var(--ink); } .ir-calendar-quarters { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: var(--paper); } .ir-calendar-quarters > div { padding: 14px 16px; font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-align: center; border-right: 1px solid rgba(246, 244, 239, 0.18); } .ir-calendar-quarters > div:last-child { border-right: 0; } .ir-calendar-grid { display: grid; grid-template-columns: repeat(12, 1fr); background: var(--paper); } .ir-calendar-month { position: relative; padding: 28px 10px 36px; min-height: 380px; } /* Alternate quarter shading (Q2, Q4 lighter — gives the JR-East zebra feel) */ .ir-calendar-month:nth-child(n+4):nth-child(-n+6), .ir-calendar-month:nth-child(n+10):nth-child(-n+12) { background: var(--paper-2); } /* Inner dotted separators inside each quarter; solid divider between quarters */ .ir-calendar-month { border-right: 1px dotted var(--rule); } .ir-calendar-month:nth-child(3), .ir-calendar-month:nth-child(6), .ir-calendar-month:nth-child(9) { border-right: 1px solid var(--rule); } .ir-calendar-month:last-child { border-right: 0; } .ir-calendar-circle { width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 22px; color: var(--ink); line-height: 1; } .ir-calendar-circle .num { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 24px; } .ir-calendar-circle .lbl { font-family: var(--sans); font-size: 10px; margin-top: 4px; letter-spacing: 0.08em; color: var(--ink-mute); } /* Highlighted month — current / recently passed */ .ir-calendar-circle.is-current { background: var(--ink); color: var(--paper); } .ir-calendar-circle.is-current .lbl { color: rgba(246, 244, 239, 0.7); } .ir-calendar-events { text-align: center; font-family: var(--serif); font-size: 12px; color: var(--ink-soft); line-height: 1.7; } .ir-calendar-events .ev { position: relative; padding-top: 14px; margin-top: 14px; } .ir-calendar-events .ev:first-child { margin-top: 0; } .ir-calendar-events .ev::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--ink); } .ir-calendar-events .ev .date { display: block; font-family: var(--display); font-style: italic; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.08em; margin-bottom: 4px; } .ir-calendar-footer { display: flex; justify-content: center; padding: 32px 16px; background: var(--paper); } .ir-calendar-footer a { display: inline-flex; align-items: center; gap: 24px; padding: 14px 36px; border: 1px solid var(--ink); font-family: var(--serif); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; color: var(--ink); background: var(--paper); transition: background .15s, color .15s; } .ir-calendar-footer a:hover { background: var(--ink); color: var(--paper); } .ir-calendar-footer a .arrow { font-family: var(--display); font-size: 14px; line-height: 1; } .ir-calendar-caption { display: flex; align-items: baseline; justify-content: space-between; margin-top: 32px; font-family: var(--sans); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; } /* Tablet + mobile: horizontal scroll instead of squashing 12 columns */ @media (max-width: 1100px) { .ir-calendar { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ir-calendar-quarters, .ir-calendar-grid { min-width: 880px; } } /* Mobile-only further shrinking of month cells */ @media (max-width: 960px) { .ir-calendar-month { min-height: 320px; padding: 24px 8px 28px; } .ir-calendar-circle { width: 50px; height: 50px; margin-bottom: 18px; } .ir-calendar-circle .num { font-size: 20px; } } .ir-mega-hero { position: relative; background: var(--paper); overflow: hidden; } .ir-mega-hero-bg { position: absolute; inset: 0; z-index: 0; } .ir-mega-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .ir-mega-hero-bg::after { /* gradient mask: dark wash at top → transparent → paper at bottom */ content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(28, 28, 28, 0.5) 0%, rgba(28, 28, 28, 0.25) 20%, rgba(246, 244, 239, 0) 50%, rgba(246, 244, 239, 0.65) 68%, var(--paper) 88% ); } .ir-mega-hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 88px var(--gutter) 0; } .ir-mega-hero-head { color: var(--paper); padding-bottom: 96px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; } .ir-mega-hero-eyebrow { font-family: var(--display); font-style: italic; font-size: 13px; letter-spacing: 0.18em; color: rgba(246, 244, 239, 0.85); text-transform: uppercase; margin-bottom: 18px; } .ir-mega-hero-title { font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.12; letter-spacing: 0.04em; margin: 0; text-shadow: 0 1px 32px rgba(0, 0, 0, 0.18); } .ir-mega-hero-title .en { display: block; font-family: var(--display); font-style: normal; font-weight: 400; font-size: clamp(14px, 1.4vw, 18px); letter-spacing: 0.16em; color: rgba(246, 244, 239, 0.8); margin-top: 14px; text-transform: uppercase; } .ir-mega-hero-meta { font-family: var(--display); font-style: italic; font-size: 13px; letter-spacing: 0.12em; color: rgba(246, 244, 239, 0.78); text-align: right; line-height: 1.8; text-transform: uppercase; } .ir-mega-hero-meta .lu { display: block; font-style: normal; font-size: 16px; color: var(--paper); letter-spacing: 0.02em; margin: 4px 0 8px; } .ir-mega-hero-panel { position: relative; background: transparent; padding-bottom: 64px; } .ir-mega-hero-panel .ir-mega-hero-panel-eyebrow { font-family: var(--display); font-style: italic; font-size: 12px; letter-spacing: 0.18em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 24px; display: flex; align-items: center; gap: 14px; } .ir-mega-hero-panel .ir-mega-hero-panel-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--ink); opacity: 0.18; } @media (max-width: 960px) { .ir-mega-hero-inner { padding: 56px var(--gutter) 0; } .ir-mega-hero-head { grid-template-columns: 1fr; padding-bottom: 56px; gap: 24px; } .ir-mega-hero-meta { text-align: left; } .ir-mega-hero-panel { padding-bottom: 40px; } } /* Small tablet (641-960px): keep 2-column layout for IR mega hero, no accordion */ @media (max-width: 960px) and (min-width: 641px) { .ir-mega-hero-panel .megapanel-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; border-top: none; } .ir-mega-hero-panel .cat-col { border-bottom: none; padding: 0; } .ir-mega-hero-panel .cat-col .cat-collapse { display: none; } .ir-mega-hero-panel .cat-col .cat-items { max-height: none; overflow: visible; margin-top: 0; } .ir-mega-hero-panel .cat-col .cat-head { padding-right: 0; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--ink); } } /* Mobile (≤640px): shrink the hero background image area so it doesn't visually extend with accordion expansion (it's now a top-only band rather than full hero) */ @media (max-width: 640px) { /* Phone only: pin the background to a fixed band so it doesn't stretch when the accordion expands. Desktop/tablet keep inset:0 (full hero) — no accordion there. */ .ir-mega-hero-bg { bottom: auto; height: 280px; } } /* ============ Layout ============ */ .page { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gutter) 72px; display: grid; grid-template-columns: 240px 1fr; gap: 56px; } /* Grid items default to min-width:auto which prevents them shrinking below their intrinsic min-content. That lets a child with an explicit min-width (e.g. the IR calendar) blow out the column and push the page wider than the viewport. Force min-width:0 so the grid column fills the viewport and overflow children scroll inside their own containers. */ .page > * { min-width: 0; } aside.side { font-family: var(--sans); font-size: 13px; position: sticky; top: 24px; align-self: start; } aside.side h4 { font-family: var(--serif); font-size: 16px; font-weight: 700; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); } aside.side h4 a { display: block; color: inherit; position: relative; transition: padding .15s; } aside.side h4 a::after { content: "→"; font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ink-thin); margin-left: 8px; transition: color .15s; } aside.side h4 a:hover { transform: translateX(4px); } aside.side h4 a:hover::after { color: var(--ink); } aside.side ul { list-style: none; margin: 0; padding: 0; } aside.side li { border-bottom: 1px dotted var(--rule); } aside.side li a { display: block; padding: 11px 0 11px 16px; color: var(--ink-soft); position: relative; transition: color .15s, padding .15s; } aside.side li a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--ink-thin); transform: translateY(-50%); } aside.side li a:hover { color: var(--ink); transform: translateX(6px); } aside.side li a.active { color: var(--ink); font-weight: 700; } aside.side li a.active::before { width: 10px; height: 2px; background: var(--ink); } main.body { min-width: 0; } /* ============ Common content blocks ============ */ .section-title { font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: 0.04em; margin: 0 0 8px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); display: flex; align-items: baseline; justify-content: space-between; } .section-title .num { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; } .lead { font-family: var(--serif); font-size: 17px; line-height: 2; margin: 32px 0; color: var(--ink-soft); } p { line-height: 2; font-size: 15px; color: var(--ink-soft); } /* Card grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); } .card-grid .card { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 24px 24px 24px; background: var(--paper); display: flex; flex-direction: column; gap: 8px; min-height: 140px; transition: background .15s; position: relative; } .card-grid .card:hover { background: var(--paper-2); } /* Opt-out for grids where the card is a large content block (portrait/profile cards), not a thin row — the hover tint is unnecessary visual noise there. */ .card-grid.card-grid--no-hover .card:hover { background: transparent; } .card-grid .card .ix { font-family: var(--display); font-style: italic; font-size: 13px; letter-spacing: 0.12em; color: var(--ink-thin); text-transform: uppercase; } .card-grid .card h3 { font-family: var(--serif); font-weight: 600; font-size: 17px; margin: 0; line-height: 1.55; } .card-grid .card .desc { font-family: var(--sans); font-size: 12px; color: var(--ink-mute); line-height: 1.7; } .card-grid .card .arrow { position: absolute; right: 16px; top: 16px; font-family: var(--display); font-size: 16px; color: var(--ink-thin); } .card-grid .card:hover .arrow { color: var(--ink); } /* Image placeholder */ .placeholder { background: repeating-linear-gradient( 135deg, var(--paper-2) 0 14px, var(--paper-3) 14px 28px ); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; color: var(--ink-mute); font-family: var(--display); font-size: 11px; letter-spacing: 0.18em; text-align: center; padding: 12px; position: relative; } .placeholder::before { content: ""; position: absolute; inset: 8px; border: 1px dashed var(--ink-thin); pointer-events: none; } .placeholder span { position: relative; } /* Data table */ table.data { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; } table.data th, table.data td { padding: 16px 12px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; } table.data thead th { border-bottom: 2px solid var(--ink); font-weight: 400; font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em; color: var(--ink-mute); text-transform: uppercase; } table.data td.num { font-family: var(--display); text-align: right; font-variant-numeric: tabular-nums; } table.data tbody tr:hover { background: var(--paper-2); } /* Cell list — simple square-marker list for table cells with multiple items */ .cell-list { list-style: none; margin: 0; padding: 0; color: var(--ink-soft); } .cell-list li { padding: 4px 0; } /* Editorial wrap tables — top/left-align cells so multi-line content reads cleanly */ table.data.data--wrap th, table.data.data--wrap td { vertical-align: top; text-align: left; } /* Line break shown only on narrow (smartphone) screens */ .sp-br { display: none; } /* Document list */ .doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .doc-list li { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 24px; padding: 16px 12px; border-bottom: 1px solid var(--rule); align-items: center; font-family: var(--sans); font-size: 13px; transition: background .15s; position: relative; } .doc-list li:hover { background: var(--paper-2); } /* Make entire doc-list row clickable — stretched link via ::before of the title anchor */ .doc-list .title::before { content: ""; position: absolute; inset: 0; } .doc-list .date { font-family: var(--display); color: var(--ink-mute); font-size: 12px; } .doc-list .tag { font-family: var(--sans); font-size: 10px; letter-spacing: 0.12em; border: 1px solid var(--ink); padding: 3px 8px; display: inline-block; width: fit-content; background: var(--paper); } .doc-list .tag.dark { background: var(--ink); color: var(--paper); } .doc-list .title { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink); } .doc-list .fmt { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .topics-list .t-fmt { display: inline-flex; align-items: center; gap: 7px; justify-self: end; } /* Format name (PDF / XLSX / MP4 etc.) */ .fmt-name { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; color: var(--ink-soft); } .fmt-name::before { content: "["; margin-right: 1px; } .fmt-name::after { content: "]"; margin-left: 1px; } /* PDF gets an outline icon (mask-image, single shared SVG file) instead of the text label */ .fmt-name--pdf { display: inline-block; width: 15px; height: 18px; vertical-align: middle; background-color: currentColor; color: var(--ink-soft); mask: url("pdf-icon.svg") center / contain no-repeat; -webkit-mask: url("pdf-icon.svg") center / contain no-repeat; font-size: 0; } .fmt-name--pdf::before, .fmt-name--pdf::after { content: none; } /* File size / duration (1.2MB / 62min) */ .fmt-size { font-family: var(--display); font-style: italic; font-size: 10px; letter-spacing: 0.04em; color: var(--ink-thin); } /* Separator between multi-format entries (e.g. PDF + MP4) */ .fmt-sep { font-family: var(--display); font-size: 10px; color: var(--ink-thin); margin: 0 2px; } /* ===== removed fmt-chip / fmt-size styles ===== */ /* Stat block */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 24px 0 48px; } .stat-row .stat { padding: 24px 24px; border-right: 1px solid var(--rule); } .stat-row .stat:last-child { border-right: none; } .stat-row .stat .label { font-family: var(--display); font-style: italic; font-size: 14px; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 10px; } .stat-row .stat .val { font-family: var(--serif); font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: -0.01em; } .stat-row .stat .val .unit { font-size: 14px; font-weight: 400; color: var(--ink-mute); margin-left: 6px; } .stat-row .stat .delta { font-family: var(--display); font-size: 11px; color: var(--ink-mute); margin-top: 8px; letter-spacing: 0.04em; } .stat-row .stat .delta.up::before { content: "▲ "; } .stat-row .stat .delta.down::before { content: "▼ "; } /* Footer */ .site-footer { background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 12px; margin-top: 64px; } .site-footer .inner { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gutter) 32px; display: flex; flex-direction: column; gap: 32px; } .site-footer .corp { padding-bottom: 0; } .site-footer .footer-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; } .site-footer h5 { font-family: var(--serif); font-weight: 700; font-size: 13px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(246,244,239,0.25); letter-spacing: 0.02em; } .site-footer h5 a { color: inherit; } .site-footer h5 a:hover { opacity: 0.85; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer ul a { opacity: 0.7; font-size: 12px; } .site-footer ul a:hover { opacity: 1; } .site-footer .corp .mark { font-family: "Times New Roman", "Times", serif; font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0; } .site-footer .corp p { color: rgba(246,244,239,0.6); font-size: 12px; line-height: 1.8; margin: 0; } .site-footer .legal { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gutter); border-top: 1px solid rgba(246,244,239,0.18); display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: rgba(246,244,239,0.55); } .site-footer .legal a { color: inherit; transition: opacity .15s; } .site-footer .legal .copyright { font-family: var(--serif); letter-spacing: 0.06em; } .site-footer .legal a:hover { opacity: 1; color: var(--paper); } .site-footer .legal .legal-links { display: inline-flex; gap: 6px; } .site-footer .legal .sep { opacity: 0.5; } /* Pull quote */ .pullquote { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 40px 0; margin: 48px 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.7; letter-spacing: 0.04em; text-align: center; color: var(--ink); } .pullquote .attr { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.1em; margin-top: 16px; } /* Kicker */ .kicker { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: 0.12em; color: var(--ink-mute); text-transform: uppercase; margin: 40px 0 12px; display: flex; align-items: center; gap: 12px; } .kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); } /* Chart placeholder bars (CSS only) */ .bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; height: 240px; align-items: end; padding: 24px 0 0; border-bottom: 1px solid var(--ink); } .bars .b { background: var(--ink); position: relative; color: var(--paper); font-family: var(--display); font-size: 10px; text-align: center; padding-top: 8px; letter-spacing: 0.05em; } .bars .b.alt { background: var(--ink-thin); color: var(--ink); } .bars .b .x { position: absolute; bottom: -24px; left: 0; right: 0; color: var(--ink-mute); font-size: 10px; } /* Chart placeholder bars — positive/negative variant (heatmap convention). Rows are asymmetric (4fr/1fr) so positives get most of the height and the negative area is only as tall as it needs to be — no large empty band below. */ .bars-pn { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; height: 240px; position: relative; margin: 16px 0 40px; } .bars-pn::before { content: ""; position: absolute; left: 0; right: 0; top: 80%; /* midline matches the 4fr / 1fr split */ border-top: 1px solid var(--ink); pointer-events: none; z-index: 1; } .bars-pn .bp { display: grid; grid-template-rows: 4fr 1fr; position: relative; } .bars-pn .bp .bar { font-family: var(--display); font-size: 11px; text-align: center; letter-spacing: 0.05em; color: var(--paper); width: 100%; } /* Positive — red, growing UP from midline (sits in the upper row, anchored to bottom) */ .bars-pn .bp.pos .bar { grid-row: 1; align-self: end; background: #b94a4a; padding-top: 8px; } /* Negative — blue, growing DOWN from midline (sits in the lower row, anchored to top) */ .bars-pn .bp.neg .bar { grid-row: 2; align-self: start; background: #6a8bbf; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; } .bars-pn .bp .x { position: absolute; bottom: -24px; left: 0; right: 0; text-align: center; color: var(--ink-mute); font-size: 10px; font-family: var(--display); font-style: italic; letter-spacing: 0.06em; } /* Linklist (sub-page entries) */ .linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } /* When a linklist / doc-list directly follows a section-title, drop its top border — the section-title's own bottom border already serves as the divider. */ .section-title + .linklist, .section-title + .doc-list { border-top: 0; } .linklist li { border-bottom: 1px solid var(--rule); } .linklist a { display: grid; grid-template-columns: 60px 1fr auto; gap: 20px; padding: 20px 20px; align-items: baseline; font-family: var(--serif); font-size: 17px; font-weight: 500; transition: background var(--t-hover) var(--ease-hover); } .linklist a:hover { background: var(--paper-2); } .linklist .ix { font-family: var(--display); font-style: italic; font-size: 14px; color: var(--ink-thin); letter-spacing: 0.1em; } .linklist .arrow { font-family: var(--display); color: var(--ink-thin); font-size: 16px; transition: transform var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover); } .linklist a:hover .arrow { color: var(--ink); transform: translateX(8px); } .linklist .sub { font-family: var(--sans); font-size: 11px; color: var(--ink-mute); display: block; margin-top: 4px; font-weight: 400; } /* Two-col */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 32px 0; } /* Notes */ .notes { font-family: var(--sans); font-size: 11px; color: var(--ink-mute); line-height: 1.8; border-top: 1px dotted var(--rule); padding-top: 16px; margin-top: 32px; } /* TradingView widget copyright — match site palette (muted gray + underline). !important is required because TradingView injects a CDN stylesheet with high specificity that paints `.blue-text` blue and underlines anchors. */ .tradingview-widget-copyright { font-family: var(--sans) !important; font-size: 10px !important; line-height: 24px !important; height: 24px !important; text-align: center !important; color: var(--ink-mute) !important; } .tradingview-widget-copyright a, .tradingview-widget-copyright a:link, .tradingview-widget-copyright a:visited, .tradingview-widget-copyright a:hover, .tradingview-widget-copyright a:active { color: var(--ink-mute) !important; text-decoration: none !important; border-bottom: 1px solid var(--ink-mute) !important; padding-bottom: 1px !important; outline: none !important; } .tradingview-widget-copyright .blue-text { color: var(--ink-mute) !important; } .tradingview-widget-copyright .trademark { color: var(--ink-mute) !important; } /* ========================================================= Contact form accordion (uses native

) ========================================================= */ .contact-accordion { border-bottom: 1px solid var(--ink); margin-top: 32px; } .contact-accordion-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; transition: opacity var(--t-hover) var(--ease-hover); } .contact-accordion-summary::-webkit-details-marker { display: none; } .contact-accordion-summary:hover { opacity: 0.7; } /* + → × icon. Odd-px container (15) + 1px bars positioned at integer offsets (top:7 / left:7) means each bar sits on a whole pixel row/column — no sub-pixel transform math. */ .contact-accordion-icon { position: relative; width: 15px; height: 15px; flex: none; color: var(--ink); transition: transform .25s ease; } .contact-accordion-icon::before, .contact-accordion-icon::after { content: ""; position: absolute; background: currentColor; } .contact-accordion-icon::before { /* horizontal bar */ top: 7px; left: 0; width: 15px; height: 1px; } .contact-accordion-icon::after { /* vertical bar */ top: 0; left: 7px; width: 1px; height: 15px; } .contact-accordion[open] .contact-accordion-icon { transform: rotate(45deg); } .contact-accordion-content { padding: 8px 0 40px; } .contact-intro p { font-family: var(--serif); font-size: 14px; line-height: 1.9; color: var(--ink-soft); margin: 0 0 16px; } .contact-intro p:last-child { margin-bottom: 0; } .contact-form { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field-label { font-family: var(--serif); font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: 0.02em; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .form-field-label-en { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; margin-left: 8px; } .form-required { font-family: var(--display); font-style: italic; font-size: 11px; font-weight: 400; letter-spacing: 0.08em; padding: 2px 8px; background: var(--ink); color: var(--paper); flex: none; } .form-input, .form-textarea { width: 100%; padding: 16px; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); transition: border-color var(--t-hover) var(--ease-hover); } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--ink); } .form-textarea { resize: vertical; min-height: 160px; } .form-submit { display: flex; justify-content: center; margin-top: 16px; } .form-submit-btn { min-width: 240px; padding: 16px 48px; font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: 0.12em; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); cursor: pointer; transition: background var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover); } .form-submit-btn:hover { background: var(--paper); color: var(--ink); } .form-privacy { margin-top: 24px; text-align: center; font-family: var(--serif); font-size: 13px; color: var(--ink-mute); } .form-privacy a { color: var(--ink); border-bottom: 1px solid var(--ink-thin); padding-bottom: 1px; transition: border-color var(--t-hover) var(--ease-hover); } .form-privacy a:hover { border-bottom-color: var(--ink); } @media (max-width: 640px) { .contact-accordion-summary { padding: 16px 0; font-size: 16px; } .contact-accordion-content { padding-bottom: 32px; } .form-submit-btn { min-width: 0; width: 100%; padding: 16px 24px; } } /* ========================================================= History timeline (沿革 — year header + month-level events aligned to a vertical line) ========================================================= */ .history-timeline { position: relative; margin-top: 32px; padding-bottom: 16px; } /* Vertical timeline line at x=120 (1px wide, center at x=120.5). */ .history-timeline::before { content: ""; position: absolute; top: 0; left: 120px; width: 1px; height: 100%; background: var(--rule); } .history-timeline .year-group { position: relative; padding-bottom: 8px; } /* ----- Year row (year + phase title, with filled dot) ----- */ .history-timeline .history-year { display: flex; align-items: center; padding: 24px 0; } .history-timeline .year-label { position: relative; width: 120px; flex-shrink: 0; padding-right: 32px; text-align: right; font-family: var(--display); font-style: italic; font-size: 24px; color: var(--ink); letter-spacing: 0.04em; } /* Filled dot — 11px (odd) centered on the 1px line. right:-6 → dot center at x=120.5 */ .history-timeline .year-label::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--ink); z-index: 2; } .history-timeline .year-ttl { padding-left: 32px; font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.7; } /* ----- Event row (month + title + optional sub, with hollow dot) ----- */ .history-timeline .event-block { position: relative; display: flex; align-items: flex-start; padding: 16px 0; } .history-timeline .event-block__month { position: relative; width: 120px; flex-shrink: 0; padding-right: 32px; padding-top: 8px; text-align: right; font-family: var(--display); font-style: italic; font-size: 12px; font-weight: 400; letter-spacing: 0.04em; color: var(--ink-mute); } /* Hollow dot — 7px (odd) centered on the 1px line. right:-4 → dot center at x=120.5 */ .history-timeline .event-block__month::after { content: ""; position: absolute; right: -4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-thin); z-index: 2; } .history-timeline .event-block__content { padding-left: 32px; flex: 1; min-width: 0; } .history-timeline .event-block__ttl { margin: 0; font-family: var(--serif); font-size: 14px; line-height: 1.8; color: var(--ink); } .history-timeline .event-block__sub { margin: 4px 0 0; font-family: var(--serif); font-size: 12px; line-height: 1.8; color: var(--ink-mute); } /* ----- Separator between year groups (starts right after the year column) ----- */ .history-timeline .line-separator { height: 1px; background: var(--rule-soft); border: 0; margin: 0 0 0 152px; } @media (max-width: 640px) { .history-timeline::before { left: 16px; } .history-timeline .history-year { flex-direction: column; align-items: flex-start; padding: 16px 0 8px; } .history-timeline .year-label { width: auto; padding-right: 0; padding-left: 40px; text-align: left; font-size: 20px; } .history-timeline .year-label::after { right: auto; left: 11px; top: 50%; } .history-timeline .year-ttl { padding-left: 40px; margin-top: 4px; font-size: 14px; } .history-timeline .event-block { flex-direction: column; align-items: flex-start; padding: 8px 0; } .history-timeline .event-block__month { width: auto; padding-right: 0; padding-left: 40px; padding-top: 0; text-align: left; } .history-timeline .event-block__month::after { right: auto; left: 13px; top: 8px; } .history-timeline .event-block__content { padding-left: 40px; margin-top: 4px; } .history-timeline .line-separator { margin-left: 40px; } } /* ========================================================= MV — Home main visual ========================================================= */ .mv { position: relative; background: var(--paper); overflow: hidden; } .mv-image { height: clamp(560px, 72vh, 800px); position: relative; } .mv-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.35) 100%), radial-gradient(60% 80% at 30% 50%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 100%); pointer-events: none; } .mv-image .placeholder { font-size: 13px; } .mv-overlay { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; } .mv-inner { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gutter); pointer-events: auto; } /* Editorial frame card */ .mv-frame { position: relative; max-width: 1080px; margin: 0 auto; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 40px 56px 32px; display: grid; gap: 24px; } .mv-corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--ink); background: var(--paper); } .mv-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; } .mv-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; } .mv-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; } .mv-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; } .mv-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--ink); } .mv-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-style: italic; font-size: 12px; letter-spacing: 0.18em; color: var(--ink); text-transform: uppercase; } .mv-tag-mark { font-style: normal; font-weight: 700; letter-spacing: 0.24em; } .mv-tag-sep { opacity: 0.55; } .mv-tag-meta { color: var(--ink-mute); } .mv-index { font-family: var(--display); font-style: italic; font-size: 12px; letter-spacing: 0.18em; color: var(--ink-mute); } .mv-body { position: relative; padding-left: 0; } .mv-eyebrow { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 12px; letter-spacing: 0.18em; color: var(--ink-mute); margin: 0 0 16px; background: none; padding: 0; border: none; } .mv-title { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.32; letter-spacing: 0.04em; margin: 0; color: var(--ink); background: none; padding: 0; border: none; display: block; } .mv-title-line { display: block; } .mv-title-line + .mv-title-line { margin-top: 4px; } .mv-foot { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-top: 24px; border-top: 1px solid var(--rule); } .mv-sub { font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.85; letter-spacing: 0.02em; color: var(--ink-mute); margin: 0; background: none; padding: 0; border: none; display: block; } .mv-meta { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--display); font-style: italic; font-size: 12px; letter-spacing: 0.1em; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); padding: 10px 16px; width: fit-content; } .mv-meta strong { font-style: normal; font-weight: 600; margin-left: 6px; } /* MV CTA — Member Only button */ .mv-cta-btn { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 16px; background: var(--ink); color: var(--paper); font-family: var(--display); font-style: normal; font-weight: 400; font-size: 13px; letter-spacing: 0.16em; border: 1px solid var(--ink); text-transform: uppercase; white-space: nowrap; transition: background .15s, color .15s; } .mv-cta-btn:hover { background: var(--paper); color: var(--ink); } .mv-cta-icon { display: inline-flex; align-items: center; } .mv-cta-arrow { font-family: var(--display); font-style: normal; font-size: 13px; } /* ========================================================= Topics ========================================================= */ .topics { background: var(--paper); padding: 88px 0 96px; } .topics-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .topics-header { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 24px; border-bottom: 2px solid var(--ink); margin-bottom: 0; } .topics-eyebrow { font-family: var(--display); font-style: italic; font-size: 13px; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 6px; } .topics-title { font-family: var(--serif); font-weight: 600; font-size: 36px; letter-spacing: 0.04em; margin: 0; line-height: 1; } .topics-more { font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; padding-bottom: 4px; border-bottom: 1px solid var(--ink); } .topics-list { list-style: none; margin: 0; padding: 0; } .topics-list li { border-bottom: 1px solid var(--rule); } .topics-list a { display: grid; grid-template-columns: 130px 110px 1fr auto auto; gap: 24px; align-items: center; padding: 24px 12px; font-family: var(--serif); transition: background .4s cubic-bezier(.25, .8, .25, 1); } .topics-list a:hover { background: var(--paper-2); } .topics-list .t-title { transition: color .25s ease-out; } .topics-list a:hover .t-title { color: var(--ink); } .topics-list .t-date { font-family: var(--display); font-style: italic; font-size: 14px; color: var(--ink-mute); letter-spacing: 0.04em; } .topics-list .t-tag { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; border: 1px solid var(--ink); padding: 4px 10px; display: inline-block; width: fit-content; text-align: center; background: var(--paper); color: var(--ink); } .topics-list .t-tag.dark { background: var(--ink); color: var(--paper); } .topics-list .t-title { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.6; } /* PDF rows already show a PDF icon — suppress the trailing arrow to avoid duplication. */ .topics-list a[href$=".pdf"] .t-arrow, .doc-list .title[href$=".pdf"] ~ .arrow, .doc-list a[href$=".pdf"] .arrow { display: none; } /* When the arrow is suppressed on a PDF topics-list row, let the format column absorb the freed grid track + gap so the icon sits flush at the right edge. */ .topics-list a[href$=".pdf"] .t-fmt { grid-column: 4 / -1; } /* topics-list .t-fmt: now styled via shared .fmt-name/.fmt-size above */ .topics-list .t-arrow { font-family: var(--display); font-size: 18px; color: var(--ink-thin); transition: transform .4s cubic-bezier(.25, .8, .25, 1), color .25s ease-out; } .topics-list a:hover .t-arrow { color: var(--ink); transform: translateX(6px); } /* ========================================================= Responsive — Tablet (≤ 960px) ========================================================= */ @media (max-width: 960px) { :root { --gutter: 24px; } .topbar .inner { min-height: 32px; } .topbar .login-btn { padding: 0 12px; font-size: 11px; letter-spacing: 0.04em; } .site-header .inner { padding: 8px var(--gutter); flex-direction: row; align-items: center; gap: 16px; } .brand .mark { font-size: 22px; letter-spacing: 0.06em; } .site-header nav.global { display: none; /* hidden on mobile; revealed inside the drawer */ } .mega-toggle { display: flex; margin-left: auto; } /* IR mega panel becomes a slide-down drawer on mobile */ .ir-megapanel { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border-top: 1px solid var(--rule); border-bottom: none; display: none; } /* ===== Mobile slide-in drawer ===== */ .drawer { position: fixed; top: 0; left: 0; width: 80vw; max-width: 360px; height: 100vh; height: 100dvh; background: var(--paper); z-index: 1100; /* Push the drawer (and its right-side shadow ~26px wide) fully off-screen when closed */ transform: translateX(calc(-100% - 30px)); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; box-shadow: 4px 0 22px rgba(0, 0, 0, 0.18); } .site-header.mobile-open .drawer { transform: translateX(0); } /* Drawer accordion: toggle buttons (for items with megapanel) + plain links (for items without) */ .drawer-toggle, .drawer-link { display: flex; align-items: center; width: 100%; padding: 16px var(--gutter); border: 0; border-bottom: 1px solid var(--rule); background: transparent; font-family: var(--sans); font-size: 14px; color: var(--ink-soft); font-weight: 500; text-align: left; cursor: pointer; } .drawer-toggle { justify-content: space-between; gap: 12px; } .drawer-link.active, .drawer-toggle.expanded { color: var(--ink); font-weight: 700; } /* +/- icon: horizontal bar always; vertical bar fades out when expanded */ .drawer-toggle-icon { position: relative; width: 12px; height: 12px; flex: none; } .drawer-toggle-icon::before, .drawer-toggle-icon::after { content: ""; position: absolute; background: currentColor; left: 50%; top: 50%; } .drawer-toggle-icon::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); } .drawer-toggle-icon::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); transition: opacity 0.2s; } .drawer-toggle.expanded .drawer-toggle-icon::after { opacity: 0; } /* Megapanel collapsed by default; shown when its preceding toggle is .expanded */ .drawer .ir-megapanel { display: none; max-height: none; overflow: visible; background: var(--paper-2); } .drawer .drawer-toggle.expanded + .ir-megapanel { display: block; } /* Inside the drawer the toggle label already names the section — hide the duplicated eyebrow + h3 */ .drawer .megapanel-eyebrow, .drawer .megapanel-head h3 { display: none; } /* Backdrop */ .drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .drawer-backdrop.show { opacity: 1; visibility: visible; } /* Body scroll lock when drawer is open */ body.drawer-open { overflow: hidden; } /* Lift the sticky site-header above the backdrop so the drawer (its child) renders on top */ body.drawer-open .site-header { z-index: 1200; } /* Header + topbar are painted as the "white + 50% black overlay" composite color (rgb(128,128,128)). Opaque so no content shows through during the transition. The topbar is lifted to the same stacking layer as the site-header so the backdrop doesn't dim it a second time. */ body.drawer-open .site-header, body.drawer-open .topbar { background: rgb(128, 128, 128); border-bottom-color: transparent; box-shadow: none; } body.drawer-open .topbar { position: relative; z-index: 1200; } body.drawer-open .site-header .inner, body.drawer-open .topbar .inner { visibility: hidden; } /* Floating white close button — sits above drawer + backdrop, morphs hamburger→X */ .drawer-close-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; position: fixed; top: 8px; right: var(--gutter); width: 44px; height: 44px; background: transparent; border: 0; padding: 0; cursor: pointer; z-index: 1300; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .drawer-close-btn span { display: block; width: 22px; height: 1.5px; background: #fff; transition: transform .25s ease, opacity .2s ease; } body.drawer-open .drawer-close-btn { opacity: 1; visibility: visible; } body.drawer-open .drawer-close-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } body.drawer-open .drawer-close-btn span:nth-child(2) { opacity: 0; } body.drawer-open .drawer-close-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .megapanel-inner { grid-template-columns: 1fr; padding: 24px var(--gutter) 24px; gap: 20px; } .megapanel-head h3 { font-size: 22px; } .megapanel-head .megapanel-en { font-size: 13px; margin-bottom: 16px; } .megapanel-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); } .megapanel-linklist { grid-template-columns: 1fr; } .megapanel-linklist a { padding: 16px 16px; font-size: 14px; } .megapanel-linklist a:hover { transform: translateX(4px); } .cat-col { border-bottom: 1px solid var(--rule); padding: 12px 0 12px; } .cat-col .cat-collapse { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 16px; transition: background .15s, color .15s, border-color .15s; } .cat-col.expanded .cat-collapse { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Rotate only the inner glyph so the button keeps its size + shape */ .cat-col .cat-collapse > span { display: inline-block; transition: transform .25s; } .cat-col.expanded .cat-collapse > span { transform: rotate(45deg); } .cat-col .cat-head { padding-right: 40px; margin-bottom: 0; border-bottom: none; padding-bottom: 0; } /* Mobile/tablet: tapping cat-head toggles the accordion (same as the +/- button); navigation to the category page is provided via the "○○トップ" link inside the items. Click handler wired in partials.js calls preventDefault + toggles .expanded. */ .cat-col .cat-head { cursor: pointer; } .cat-col .cat-head::after { display: none; } .cat-top-link { display: list-item; } .cat-col .cat-items { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .cat-col.expanded .cat-items { max-height: 800px; margin-top: 12px; } .cat-col .cat-items a { padding: 10px 0 10px 16px; font-size: 13px; } .utility .inner { padding: 8px var(--gutter); } .utility .crumbs { font-size: 11px; line-height: 1.5; } .hero { padding: 40px 0 32px; } .hero .inner { grid-template-columns: 1fr !important; gap: 20px; } .hero h1 { font-size: 38px; } .hero h1 .en { font-size: 15px; } .hero .meta { text-align: left; } .page { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--gutter) 64px; } aside.side { position: static; border: 1px solid var(--rule); padding: 16px 16px 8px; background: var(--paper-2); } aside.side h4 { font-size: 15px; } aside.side ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } aside.side li a { padding: 9px 0 9px 12px; font-size: 13px; } .section-title { font-size: 22px; flex-wrap: wrap; gap: 8px; } .section-title .num { font-size: 12px; } .lead { font-size: 15px; line-height: 1.95; } /* Card grid */ .card-grid { grid-template-columns: 1fr 1fr !important; } /* Stat row → 2x2 */ .stat-row { grid-template-columns: 1fr 1fr; } .stat-row .stat { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 20px 16px; } .stat-row .stat:nth-child(2n) { border-right: none; } .stat-row .stat:nth-last-child(-n+2) { border-bottom: none; } .stat-row .stat .val { font-size: 28px; } /* Two-col → single */ .two-col { grid-template-columns: 1fr !important; gap: 32px; } /* Doc list — restructure rows */ .doc-list li { grid-template-columns: auto auto 1fr; grid-template-areas: "date tag fmt" "title title title"; gap: 8px 16px; padding: 16px 12px; } .doc-list .date { grid-area: date; font-size: 11px; } .doc-list .tag { grid-area: tag; } .doc-list .fmt { grid-area: fmt; justify-self: end; } .doc-list .title { grid-area: title; font-size: 14px; } /* Tables — allow horizontal scroll when truly wide */ table.data { font-size: 12px; } table.data th, table.data td { padding: 10px 8px; } /* Bars chart */ .bars { height: 180px; gap: 10px; } .bars .b { font-size: 9px; } .bars .b .x { font-size: 9px; bottom: -20px; } /* Pull quote */ .pullquote { font-size: 19px; padding: 24px 0; margin: 32px 0; } /* Linklist */ .linklist a { grid-template-columns: 36px 1fr auto; padding: 16px 12px; font-size: 15px; gap: 12px; } /* Footer */ .site-footer .inner { padding: 40px var(--gutter) 24px; } .site-footer .legal { flex-direction: column; gap: 8px; text-align: left; align-items: flex-start; } } /* ========================================================= Responsive — Phone (≤ 640px) ========================================================= */ @media (max-width: 640px) { :root { --gutter: 18px; } .utility .inner { padding: 6px var(--gutter); } .utility .crumbs { font-size: 10px; } .brand .mark { font-size: 19px; letter-spacing: 0.06em; } .site-header nav.global { font-size: 11px; gap: 16px; } .hero { padding: 32px 0 24px; } .hero h1 { font-size: 30px; line-height: 1.18; } .hero h1 .en { font-size: 13px; margin-top: 10px; } .hero .eyebrow { font-size: 12px; } .hero .meta { font-size: 12px; } .page { padding: 24px var(--gutter) 48px; gap: 24px; } aside.side ul { grid-template-columns: 1fr; } aside.side li a { padding: 11px 0 11px 12px; font-size: 13px; } .section-title { font-size: 19px; padding-bottom: 12px; } .lead { font-size: 14px; margin: 24px 0; } /* Cards full width */ .card-grid { grid-template-columns: 1fr !important; } .card-grid .card { padding: 16px 16px 24px; min-height: 0; } .card-grid .card h3 { font-size: 16px; } /* KPI stat — single column */ .stat-row { grid-template-columns: 1fr; } .stat-row .stat { border-right: none !important; border-bottom: 1px solid var(--rule); padding: 16px 16px; } .stat-row .stat:last-child { border-bottom: none; } .stat-row .stat .val { font-size: 26px; } /* Wide tables — wrap in horizontal scroll */ main.body { overflow-x: visible; } table.data { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } table.data thead, table.data tbody, table.data tr { display: table; width: 100%; table-layout: auto; } /* Text-heavy tables (key-value, editorial) — wrap instead of horizontal scroll. Reset the global per-row `display:table` so the whole thing stays ONE table with uniform column widths (otherwise each row sizes its columns on its own). */ table.data.data--wrap { display: table; overflow-x: visible; white-space: normal; } table.data.data--wrap thead { display: table-header-group; width: auto; } table.data.data--wrap tbody { display: table-row-group; width: auto; } table.data.data--wrap tr { display: table-row; width: auto; } /* Key-value tables: label column sized to its text (no wrap), shared by every row */ table.data.data--kv th:first-child, table.data.data--kv td:first-child { width: auto !important; white-space: nowrap; padding-right: 16px; } .sp-br { display: inline; } /* Bars chart smaller */ .bars { height: 160px; gap: 6px; } /* Doc list — even more compact */ .doc-list li { grid-template-columns: 1fr auto; grid-template-areas: "date fmt" "tag tag" "title title"; gap: 4px 12px; padding: 16px 10px; } .doc-list .title { font-size: 14px; line-height: 1.6; margin-top: 4px; } /* Pull quote */ .pullquote { font-size: 16px; line-height: 1.65; padding: 24px 0; } .pullquote .attr { font-size: 11px; margin-top: 12px; } /* Linklist */ .linklist a { grid-template-columns: 28px 1fr auto; padding: 16px 10px; font-size: 14px; gap: 10px; } .linklist .ix { font-size: 12px; } .linklist .sub { font-size: 11px; } /* Stock quote ribbon (stock page inline grid) */ main.body > div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; } main.body > div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"] > div { border-right: 1px solid var(--rule) !important; border-bottom: 1px solid var(--rule); } main.body > div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"] > div:nth-child(2n) { border-right: none !important; } main.body > div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"] > div:nth-last-child(-n+2) { border-bottom: none; } /* Hero meta align under title */ .hero .meta { text-align: left; } /* Footer single column */ .site-footer .inner { gap: 24px; padding: 32px var(--gutter) 20px; } .site-footer .footer-nav { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .site-footer h5 { margin: 0 0 10px; padding-bottom: 6px; font-size: 13px; } .site-footer .legal { flex-direction: column-reverse; align-items: center; text-align: center; } /* Filter chips wrap nicely */ main.body > div[style*="FILTER"] { /* no-op safety */ } /* Reduce nested portrait aspect */ .placeholder { font-size: 10px; } } /* ========================================================= Touch — disable hover-only padding shifts ========================================================= */ @media (hover: none) { aside.side li a:hover { transform: translateX(6px); } .linklist a:hover { transform: none; background: var(--paper-2); } .card-grid .card:hover { background: var(--paper); } } /* ========================================================= Responsive — MV + Topics (home) ========================================================= */ @media (max-width: 960px) { .mv-image { height: clamp(480px, 62vh, 600px); } .mv-inner { padding: 0 var(--gutter); } .mv-frame { padding: 24px 24px; gap: 16px; max-width: 100%; } .mv-eyebrow { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 12px; } .mv-title { font-size: clamp(24px, 4.5vw, 36px); } .mv-head { padding-bottom: 12px; } .mv-tag, .mv-index { font-size: 11px; letter-spacing: 0.14em; } .mv-foot { grid-template-columns: 1fr; gap: 16px; } .mv-sub { font-size: 13px; } .topics { padding: 56px 0 64px; } .topics-title { font-size: 26px; } .topics-header { flex-wrap: wrap; gap: 12px; padding-bottom: 16px; } .topics-list a { grid-template-columns: auto auto 1fr auto; grid-template-areas: "date tag fmt arrow" "title title title title"; gap: 8px 16px; padding: 16px 12px; } .topics-list .t-date { grid-area: date; font-size: 12px; } .topics-list .t-tag { grid-area: tag; } .topics-list .t-title { grid-area: title; font-size: 14px; line-height: 1.55; margin-top: 4px; } .topics-list .t-fmt { grid-area: fmt; text-align: right; font-size: 11px; } .topics-list .t-arrow { grid-area: arrow; } } @media (max-width: 640px) { .mv-image { height: clamp(440px, 64vh, 520px); } .mv-frame { padding: 24px 16px; gap: 16px; } .mv-title { font-size: clamp(16px, 6vw, 32px); } .mv-eyebrow { font-size: 11px; } .mv-tag-meta { display: none; } .topics { padding: 40px 0 48px; } .topics-title { font-size: 22px; } .topics-list a { grid-template-columns: auto 1fr auto; grid-template-areas: "date tag arrow" "title title title" "fmt fmt fmt"; gap: 4px 12px; padding: 16px 10px; } .topics-list .t-fmt { text-align: left; margin-top: 4px; } } /* ========================================================= Hover system Unified rules layered on top of the per-component hovers above. Five patterns: 🅐 Quiet Tint — table rows (background only) 🅑 Drift Right — linklists, side nav, megapanel (content + arrow slide right) 🅒 Lift & Lead — topics list, doc list, card grid (bg + growing left bar) 🅓 Underline Grow — inline text links (animated underline) 🅔 Invert — primary buttons (paper⇄ink swap) Common timing: var(--t-hover) var(--ease-hover) ========================================================= */ /* --- Unify timing across all hoverable surfaces --- */ .linklist a, .linklist .arrow, .megapanel-linklist a, .cat-col .cat-items a, aside.side li a, aside.side h4 a, .topics-list a, .topics-list .t-title, .topics-list .t-arrow, .doc-list li, .card-grid .card, .card-grid .card .arrow, table.data tbody tr, .article-body table tbody tr, .article-body a, .article-footer-nav a, .utility .crumbs span a, .site-footer ul a, .site-footer h5 a, .site-footer .legal a, .mv-cta-btn, .topbar .login-btn, .ir-calendar-footer a, .site-header nav.global a { transition: background var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover), opacity var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover), padding var(--t-hover) var(--ease-hover); } /* --- 🅑 Drift Right --- */ /* Existing rules already shift padding-left; add arrow translate for premium pull-through */ .linklist .arrow, .megapanel-linklist a .arrow, aside.side li a::after { transition: transform var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover); } .linklist a:hover .arrow { transform: translateX(8px); } .megapanel-linklist a:hover .arrow { transform: translateX(6px); } /* --- 🅒 Lift & Lead: subtle background tint on rows + cards --- */ /* (Left bar pattern removed — felt too assertive. Keep background-only Quiet Tint here.) */ /* Doc-list rows: add arrow shift on hover for parity with topics-list */ .doc-list .arrow { transition: transform var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover); } .doc-list li:hover .arrow { transform: translateX(6px); color: var(--ink); } /* --- 🅓 Underline Grow: animated underline for footer / breadcrumb links --- */ /* Applied to small inline-text links where there's no bg surface to tint and the link width is naturally compact (won't be a wide cell). */ .article-footer-nav a, .site-footer ul a, .site-footer h5 a, .site-footer .legal a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; text-decoration: none; transition: background-size var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), opacity var(--t-hover) var(--ease-hover); } .article-footer-nav a:hover, .site-footer ul a:hover, .site-footer h5 a:hover, .site-footer .legal a:hover { background-size: 100% 1px; } /* --- "More" links — unified "see more / 一覧を見る / 詳細を見る" pattern --- The CSS injects the trailing arrow so HTML stays clean and the arrow can be animated independently. Used by .topics-more and .more-link. */ .topics-more, .more-link { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--ink); text-decoration: none; transition: gap var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover); } .topics-more::after, .more-link::after { content: "→"; font-family: var(--display); font-size: 14px; line-height: 1; display: inline-block; transition: transform var(--t-hover) var(--ease-hover); } .topics-more:hover::after, .more-link:hover::after { transform: translateX(8px); } /* Inline body link variant — used inside paragraphs */ .inline-link { border-bottom: 1px solid var(--ink-thin); padding-bottom: 2px; text-decoration: none; color: var(--ink); transition: border-color var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover); } .inline-link:hover { border-bottom-color: var(--ink); } /* --- 🅑 Drift Right (extended): cat-head adopts the same pattern --- */ .cat-col .cat-head .cat-name, .cat-col .cat-num { transition: color var(--t-hover) var(--ease-hover), transform var(--t-hover) var(--ease-hover); } .cat-col .cat-head:hover .cat-name { color: var(--ink); transform: translateX(6px); text-decoration: none; } .cat-col .cat-head:hover .cat-num { color: var(--ink); } /* Reduce animation for touch devices — site-footer links omitted intentionally (no underline on touch; the list/grid context makes them read as links) */ @media (hover: none) { .article-footer-nav a { background-size: 100% 1px; } }