/* ============================================================
STELLAR LP Visual Mock — 共通基盤CSS
全サブページ(member / archive / news / privacy / terms 等)から参照
------------------------------------------------------------
外部エンジニア向け メンテガイド:
1. デザイントークン:`:root` 内 CSS 変数(色・タイポ・余白・モーション)
→ ブランド調整はここ1か所で全ページに反映
2. 共通コンポーネント:.header / .nav / .footer / .sns-icon /
.glass-1〜3 / .skip-link / .aurora-stage 等
3. 日本語改行ルール(.jp-wrap):句読点単位で折り返す。
重要なフレーズが分断されないようにしたい場合は
... で囲んでください。
============================================================ */
/* ========== Design Tokens ========== */
:root {
/* Color */
--c-primary: #FFFFFF;
--c-surface: #F9F9F8;
--c-aurora-lav: #C7B8E8;
--c-aurora-pink: #E9C7D8;
--c-aurora-peach: #F4D4C5;
--c-aurora-mint: #B8DCD9;
--c-navy-dark: #0B0E26;
--c-navy-main: #1A1F4A;
--c-navy-soft: #5D6185;
--c-glass-border: rgba(255, 255, 255, 0.4);
--c-glass-border-strong: rgba(255, 255, 255, 0.5);
/* Typography */
--f-display: 'Hina Mincho', serif;
--f-number: 'Hina Mincho', serif;
--f-serif-jp: 'Hina Mincho', serif;
--f-body: 'Zen Kaku Gothic New', sans-serif;
--f-caption: 'Jost', sans-serif;
/* Spacing (8px base) */
--s-1: 8px;
--s-2: 16px;
--s-3: 24px;
--s-4: 32px;
--s-6: 48px;
--s-8: 64px;
--s-12: 96px;
--s-16: 128px;
--s-24: 192px;
/* Motion */
--ease: cubic-bezier(0.25, 1, 0.5, 1);
--d-fast: 200ms;
--d-base: 400ms;
--d-slow: 800ms;
/* Logo sizes */
--logo-purple: #5b3a8e;
--logo-teal: #4fa7a4;
}
/* ========== Reset & Base ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* ========== Brand Selection Color ==========
ブラウザのテキスト選択色を、白×オーロラ世界観に合わせる */
::selection {
background: #c7b8e8; /* Aurora Lavender */
color: #0B0E26; /* Navy Dark */
text-shadow: none;
}
::-moz-selection { background: #c7b8e8; color: #0B0E26; }
/* ========== Focus Ring (キーボード操作専用) ==========
マウス操作時には出さず、Tab キー操作時のみ可視化 */
:focus { outline: none; }
:focus-visible {
outline: 2px solid #5b3a8e; /* Brand purple */
outline-offset: 3px;
border-radius: 2px;
}
.sns-icon:focus-visible,
.cta-track-btn:focus-visible,
.razz-cta-btn:focus-visible,
.btn-magnetic:focus-visible {
outline-color: #4fa7a4; /* Brand teal */
outline-offset: 4px;
}
/* ========== Scroll Progress Bar (グローバル) ==========
全ページ上端に挿入される進捗バー。`` を
各ページの 直下に置けば自動で動く(JS連動)。 */
.scroll-progress {
position: fixed; top: 0; left: 0;
width: 0%; height: 2px;
background: linear-gradient(90deg, #5b3a8e 0%, #c7b8e8 50%, #4fa7a4 100%);
z-index: 1000;
pointer-events: none;
will-change: width;
box-shadow: 0 1px 8px rgba(199, 184, 232, 0.55);
}
/* ========== Aurora Section Divider ==========
セクション間に
で挿入できる装飾線。
オーロラの光帯を細く流す。 */
.aurora-divider {
position: relative;
border: 0; height: 1px;
margin: 0 auto;
max-width: 880px;
background: linear-gradient(90deg,
transparent 0%,
rgba(199, 184, 232, 0.4) 25%,
rgba(184, 220, 217, 0.6) 50%,
rgba(199, 184, 232, 0.4) 75%,
transparent 100%);
overflow: visible;
}
.aurora-divider::before {
content: ""; position: absolute;
top: -2px; left: 50%; transform: translateX(-50%);
width: 5px; height: 5px; border-radius: 50%;
background: #fff;
box-shadow:
0 0 12px rgba(199, 184, 232, 0.9),
0 0 24px rgba(184, 220, 217, 0.6);
}
body {
font-family: var(--f-body);
background: var(--c-surface);
color: var(--c-navy-main);
line-height: 2.0;
letter-spacing: 0.02em;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
/* ===== 日本語の改行最適化(ページ全体に適用) =====
- line-break: strict …… 句読点や記号で改行されにくくする
- word-break: normal …… デフォルト挙動を確保
- overflow-wrap: anywhere は使わない(英単語が崩れる) */
line-break: strict;
word-break: normal;
/* テキスト全般の禁則と arrange を改善(対応ブラウザのみ) */
hanging-punctuation: allow-end;
}
/* ===== 見出しは「気持ちいい改行」モードに(対応ブラウザ:Chrome 117+ / Safari 17.5+) =====
text-wrap: pretty で行末をいい感じに。balance はモバイルだけ過剰になりがちなので h1〜h3 のみ */
h1, h2, h3, .heading-en, .heading-jp,
.legal-title-en, .legal-title-jp,
.bento-title, .member-name-ph,
.hero-catch-ph, .hero-jp,
.cta-heading {
text-wrap: pretty;
text-wrap: balance; /* バランス優先(対応ブラウザ用、非対応は pretty へフォールバック) */
}
/* ===== ヘルパー:絶対に途中改行させたくない語句に ===== */
.nowrap, .keep-together {
display: inline-block;
white-space: nowrap;
}
/* ===== ヘルパー:句読点で意図的に改行 ===== */
.br-comma::after { content: "\A"; white-space: pre; }
/* ===== モバイル本文:長い和文は句単位で改行できる auto-phrase(対応:Chrome 119+) =====
非対応ブラウザは normal にフォールバック(=従来通り) */
@media (max-width: 639px) {
body, p, li, .legal-section p, .news-title, .member-bio-ph,
.activity-desc, .bento-desc, .razz-cta-desc, .hero-catch-ph,
.hero-sub-ph {
word-break: auto-phrase;
}
/* モバイルの見出し:行内バランス取りすぎ防止のため pretty に */
h1, h2, h3, .heading-en, .heading-jp,
.legal-title-en, .legal-title-jp { text-wrap: pretty; }
}
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
/* ========== Aurora Background ========== */
.aurora-stage {
position: fixed; inset: 0; z-index: -2;
background: var(--c-primary);
overflow: hidden;
}
.aurora-blob {
position: absolute;
width: 60vmax; height: 60vmax;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
will-change: transform;
}
.aurora-blob.b1 { background: var(--c-aurora-lav); top: -10%; left: -10%; animation: drift1 25s ease-in-out infinite alternate; }
.aurora-blob.b2 { background: var(--c-aurora-pink); top: -15%; right: -15%; animation: drift2 22s ease-in-out infinite alternate; }
.aurora-blob.b3 { background: var(--c-aurora-peach); bottom: -20%; left: 10%; animation: drift3 28s ease-in-out infinite alternate; }
.aurora-blob.b4 { background: var(--c-aurora-mint); bottom: -10%; right: -5%; animation: drift4 20s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(15vw, 10vh) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-10vw, 15vh) scale(1.1); } }
@keyframes drift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(10vw, -8vh) scale(1.2); } }
@keyframes drift4 { from { transform: translate(0,0) scale(1); } to { transform: translate(-8vw, -12vh) scale(1.1); } }
.aurora-stage::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 50%),
linear-gradient(75deg, transparent 55%, rgba(255,255,255,0.25) 65%, transparent 70%);
mix-blend-mode: overlay;
pointer-events: none;
}
/* ========== Layout ========== */
.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
section { padding: var(--s-16) 0; position: relative; }
/* ========== Typography Utilities ========== */
.eyebrow {
display: inline-flex; align-items: center; gap: 0.75rem;
font-family: var(--f-caption);
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.25em; text-transform: uppercase;
color: var(--c-navy-soft);
margin-bottom: var(--s-3);
}
.eyebrow::before, .eyebrow::after {
content: ""; width: 24px; height: 1px;
background: var(--c-navy-soft); opacity: 0.5;
}
.heading-en {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(2.5rem, 5vw, 4rem);
letter-spacing: 0.1em;
color: var(--c-navy-dark);
line-height: 1.15;
}
.heading-jp {
font-family: var(--f-serif-jp);
font-weight: 300;
font-size: clamp(1.5rem, 3vw, 2.25rem);
letter-spacing: 0.15em;
color: var(--c-navy-main);
margin-top: var(--s-2);
}
.sub {
font-family: var(--f-serif-jp);
font-size: 1rem;
color: var(--c-navy-soft);
letter-spacing: 0.08em;
margin-top: var(--s-3);
}
.placeholder {
display: inline-block;
padding: 2px 10px;
background: rgba(255, 255, 255, 0.45);
border: 1px dashed var(--c-navy-soft);
border-radius: 2px;
color: var(--c-navy-soft);
font-family: monospace;
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0;
}
/* ========== Glass Levels ========== */
.glass-1 {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-2 {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--c-glass-border-strong);
box-shadow: 0 16px 48px rgba(11, 14, 38, 0.03);
}
@supports not (backdrop-filter: blur(1px)) {
.glass-1 { background: rgba(255, 255, 255, 0.85); }
.glass-2 { background: rgba(255, 255, 255, 0.92); }
}
/* ============================================================
Header — Constellation Rail (v5.9 / Image 2.0 design directive)
------------------------------------------------------------
静かな星座マップとしてのナビゲーション:
- 各ナビ項目間にミニ星座セパレータ(SVG マスク, 静止)
- ヘッダー下端に Aurora グラデの 1px ヘアライン(静的)
- 右側は CTA ピルではなく "by Razz Production ↗" の控えめ provenance
- hover でナビ下に 1px 線が左→右に伸びる(scaleX のみ・GPU 軽量)
- スクロール時 .is-scrolled で透明度・ヘアライン微増(JS は class toggle のみ)
パフォーマンス方針:
- アニメは transform / opacity のみ。box-shadow 多重 / animated gradient / blur 重ね禁止
- separator は CSS mask-image(data URI)で markup 軽量化
- hover/page-load/scroll はすべて CSS only(scroll-state のみ JS で 1 行)
============================================================ */
.header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 0 0;
background: rgba(250, 248, 255, 0.62);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(11, 14, 38, 0.06);
transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
/* スクロール時:ガラスを少しだけ濃く、ヘアラインをシャープに */
.header.is-scrolled {
background: rgba(250, 248, 255, 0.78);
border-bottom-color: rgba(11, 14, 38, 0.12);
}
/* Aurora hairline — 静的グラデ。低不透明度で「屈折光」のニュアンス */
.header::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg,
rgba(199,184,232,0) 0%,
rgba(199,184,232,0.55) 18%,
rgba(184,220,217,0.55) 40%,
rgba(244,212,197,0.45) 62%,
rgba(233,199,216,0.55) 82%,
rgba(199,184,232,0) 100%);
opacity: 0.65;
pointer-events: none;
}
.header-inner {
max-width: 1440px; margin: 0 auto; padding: 0 48px;
display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.logo-wordmark {
font-family: var(--f-display); font-weight: 500;
font-size: 1.35rem; letter-spacing: 0.35em;
color: var(--c-navy-dark); text-transform: uppercase;
}
.logo-wordmark sup { font-size: 0.55em; margin-left: 0.3em; opacity: 0.7; }
.logo-wordmark img {
display: block;
width: clamp(156px, 15vw, 220px);
height: auto;
object-fit: contain;
}
/* ===== Nav: items + constellation separators ===== */
.nav {
display: flex; align-items: center;
/*gap: 14px; !* セパレータが視覚的な間を作るので、テキスト間はやや詰める *!*/
gap: 42px;
font-family: var(--f-caption);
font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.22em;
/*text-transform: uppercase;*/
}
.nav a {
position: relative;
color: var(--c-navy-main);
padding: 4px 8px;
transition: color var(--d-fast) var(--ease);
}
/* hover/active underline — 1px navy、左→右に scaleX で滑り出る(GPU 軽量) */
.nav a::after {
content: "";
position: absolute; left: 8px; right: 8px; bottom: 0;
height: 1px;
background: rgba(11, 14, 38, 0.55);
transform: scaleX(0);
transform-origin: left center;
transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.nav a:hover { color: var(--c-navy-dark); }
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-active,
.nav a.is-current {
color: var(--c-navy-dark);
text-decoration: none;
}
.nav a.is-active::after,
.nav a.is-current::after {
transform: scaleX(0);
background: var(--c-navy-dark);
}
.nav a.is-active:hover::after,
.nav a.is-current:hover::after {
transform: scaleX(1);
}
/* ===== Constellation separator (CSS mask, 3 variants) =====
- inline SVG を data URI で background-image に格納し、markup を軽く保つ
- line stroke / dot fill は SVG 内に直接書き込み(rgba)
- 3 種類の形を交互に置くと「同じ模様の繰返し」感が消える */
.nav-sep {
display: inline-block;
flex: 0 0 auto;
width: 32px; height: 14px;
opacity: 0.78;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
pointer-events: none;
}
.nav-sep-a {
background-image: url("data:image/svg+xml;utf8,");
}
.nav-sep-b {
background-image: url("data:image/svg+xml;utf8,");
}
.nav-sep-c {
background-image: url("data:image/svg+xml;utf8,");
}
/* TOP page header treatment shared with sub pages. */
.nav-sep {
display: none !important;
}
.nav a {
font-family: var(--f-caption);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--c-navy-main);
}
.header-credit {
display: none !important;
}
/* ===== Page-load entrance =====
ヘッダーがふわっと現れ、セパレータは 220ms 遅らせる(quiet celestial map) */
@media (prefers-reduced-motion: no-preference) {
.header { animation: headerFadeIn 600ms var(--ease) both; }
.nav-sep { animation: navSepIn 500ms var(--ease) 220ms both; opacity: 0; }
}
@keyframes headerFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes navSepIn {
from { opacity: 0; }
to { opacity: 0.78; }
}
/* ===== Razz provenance mark(右側)=====
CTA ピルではなく「by Razz Production ↗」の控えめテキスト */
.header-credit {
font-family: var(--f-caption);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-navy-soft);
white-space: nowrap;
opacity: 0.85;
transition: color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
.header-credit:hover { color: var(--c-navy-dark); opacity: 1; }
.header-credit .by {
opacity: 0.55;
margin-right: 0.5em;
font-family: var(--f-display);
font-style: italic;
letter-spacing: 0.05em;
text-transform: none;
}
.header-credit .arrow { margin-left: 0.45em; opacity: 0.7; font-style: normal; }
/* Hamburger(従来通り) */
.hamburger { display: none; font-size: 1.5rem; color: var(--c-navy-dark); cursor: pointer; background: transparent; border: 0; padding: 0; }
/* ===== 旧 .cta-header* スタイル(v5.9 で .header-credit に置換) =====
後方互換:既存ページの markup が .cta-header のままでも崩れないよう、
provenance テキストと同じビジュアルにフォールバック。 */
.cta-header {
font-family: var(--f-caption); font-size: 0.7rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--c-navy-soft); opacity: 0.85;
display: inline-flex; align-items: baseline; gap: 0.3em;
padding: 0; border: 0; background: transparent;
transition: color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
.cta-header:hover { background: transparent; color: var(--c-navy-dark); opacity: 1; }
.cta-header-stack { display: inline-flex; flex-direction: row; gap: 0.3em; line-height: 1.2; }
.cta-header-stack .razz-top { font-family: var(--f-display); font-size: inherit; font-weight: 400; letter-spacing: 0.22em; }
.cta-header-stack .razz-bottom { font-family: var(--f-caption); font-size: inherit; font-weight: 500; letter-spacing: 0.22em; }
.cta-header-arrow { font-size: inherit; opacity: 0.7; }
/* Breadcrumb */
.breadcrumb {
display: flex; gap: 0.5rem; align-items: center;
font-family: var(--f-caption);
font-size: 0.75rem; color: var(--c-navy-soft);
letter-spacing: 0.1em;
padding: calc(60px + var(--s-4)) 0 0;
max-width: 1440px; margin: 0 auto; padding-left: 40px; padding-right: 40px;
}
.breadcrumb a { transition: color var(--d-fast) var(--ease); }
.breadcrumb a:hover { color: var(--c-navy-dark); }
.breadcrumb .sep { opacity: 0.5; }
/* ========== Buttons ========== */
.btn-primary {
display: inline-block;
padding: 14px 36px;
background: var(--c-navy-dark); color: var(--c-primary);
font-family: var(--f-caption); font-size: 0.8rem; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
border: 1px solid var(--c-navy-dark);
transition: all var(--d-fast) var(--ease);
}
.btn-primary:hover { background: transparent; color: var(--c-navy-dark); }
.btn-outline {
display: inline-block;
padding: 14px 36px;
background: transparent; color: var(--c-navy-dark);
font-family: var(--f-caption); font-size: 0.8rem; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
border: 1px solid var(--c-navy-dark);
transition: all var(--d-fast) var(--ease);
}
.btn-outline:hover { background: var(--c-navy-dark); color: var(--c-primary); }
/* Back to main */
.back-to-main {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 28px;
font-family: var(--f-caption); font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
border: 1px solid var(--c-navy-soft);
color: var(--c-navy-soft);
transition: all var(--d-fast) var(--ease);
}
.back-to-main:hover {
color: var(--c-navy-dark);
border-color: var(--c-navy-dark);
}
/* ========== SNS Icon ========== */
.sns-icon {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border: 1px solid rgba(26, 31, 74, 0.15);
background: rgba(255, 255, 255, 0.5);
font-family: var(--f-caption); font-size: 0.62rem; font-weight: 500;
color: var(--c-navy-dark); letter-spacing: 0.12em;
border-radius: 2px;
transition: all var(--d-fast) var(--ease);
}
.sns-icon svg { width: 15px; height: 15px; display: block; }
.sns-icon:hover {
background: var(--c-navy-dark); color: var(--c-primary);
border-color: var(--c-navy-dark);
transform: translateY(-1px);
}
/* ========== Footer v4(主要外部リンク 4 種 + 法務小さく) ========== */
.footer-links-primary {
display: flex; flex-direction: column;
gap: var(--s-2);
}
.footer-links-primary a {
font-family: var(--f-serif-jp); font-weight: 500;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.92);
transition: color var(--d-fast) var(--ease);
letter-spacing: 0.05em;
}
.footer-links-primary a:hover { color: var(--c-aurora-lav); }
.footer-links-legal {
display: flex; flex-direction: column; gap: 6px;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.55);
}
.footer-links-legal a {
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.06em;
transition: color var(--d-fast) var(--ease);
}
.footer-links-legal a:hover { color: rgba(255, 255, 255, 0.92); }
.footer-operator {
margin-top: var(--s-1);
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.4);
font-size: 0.7rem;
}
/* 旧 footer-sns は v4 で廃止 */
.footer-inner .footer-sns { display: none; }
/* ========== Footer ========== */
.footer {
background: #06081a;
color: rgba(255, 255, 255, 0.8);
padding: var(--s-8) 0 var(--s-3);
}
.footer-inner {
display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--s-6);
margin-bottom: var(--s-6);
max-width: 1440px; margin-left: auto; margin-right: auto; padding: 0 40px;
}
.footer-logo {
font-family: var(--f-display); font-weight: 500;
font-size: 1.15rem; letter-spacing: 0.3em;
color: var(--c-primary);
margin-bottom: var(--s-1);
}
.footer-logo img {
display: block;
width: min(220px, 60vw);
height: auto;
object-fit: contain;
}
.footer-desc {
font-family: var(--f-serif-jp);
font-size: 0.85rem; color: rgba(255, 255, 255, 0.55);
line-height: 2;
}
.footer-links {
display: flex; flex-direction: column; gap: 10px;
font-family: var(--f-caption); font-size: 0.82rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7); letter-spacing: 0.1em;
transition: color var(--d-fast) var(--ease);
}
.footer-links a:hover { color: var(--c-primary); }
.footer-sns {
display: flex; gap: 10px; justify-content: flex-end;
}
.footer-sns .sns-icon {
width: 40px; height: 40px; font-size: 0.72rem;
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.18);
color: var(--c-primary);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: var(--s-3);
text-align: center;
font-family: var(--f-caption); font-size: 0.68rem;
color: rgba(255, 255, 255, 0.5); letter-spacing: 0.25em;
}
/* ========== Skip Link ========== */
.skip-link {
position: absolute; left: -9999px; top: 0;
padding: 10px 20px; background: var(--c-navy-dark); color: var(--c-primary);
font-family: var(--f-caption); font-size: 0.85rem; font-weight: 500;
letter-spacing: 0.1em; z-index: 200;
}
.skip-link:focus {
left: 16px; top: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
outline: 2px solid var(--c-primary); outline-offset: 2px;
}
/* ========== Reveal ========== */
[data-reveal] {
opacity: 0;
transform: translateY(40px);
transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce) {
.aurora-blob { animation: none; }
[data-reveal] { opacity: 1; transform: none; transition: opacity var(--d-fast) linear; }
}
/* ========== Responsive ========== */
@media (max-width: 1023px) {
.container { padding: 0 var(--s-3); }
.header-inner { padding: 0 var(--s-3); }
.footer-inner { padding: 0 var(--s-3); grid-template-columns: 1fr; gap: var(--s-4); }
.footer-sns { justify-content: flex-start; }
section { padding: var(--s-12) 0; }
/* v5.9:タブレット/モバイルではセパレータを隠す(drawer モード時はテキストのみで読みやすく) */
.nav-sep { display: none; }
/* ハンバーガー開閉:コンパクトな frosted dropdown(fullscreen overlay は使わない) */
.nav {
display: none;
position: fixed; top: 52px; left: 0; right: 0;
flex-direction: column; gap: 0; align-items: stretch;
background: rgba(250, 248, 255, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: var(--s-3) var(--s-4);
border-bottom: 1px solid rgba(11, 14, 38, 0.08);
/* box-shadow は単発・薄め(GPU 負荷回避) */
box-shadow: 0 16px 32px rgba(11, 14, 38, 0.06);
}
.nav.is-open { display: flex; }
.nav a {
padding: var(--s-2) 0;
border-bottom: 1px solid rgba(11, 14, 38, 0.08);
font-size: 0.95rem;
}
/* drawer 内では underline ::after は無効化(行 border が代わり) */
.nav a::after { display: none; }
.nav a:last-child { border-bottom: none; }
.hamburger {
display: block;
transition: transform var(--d-fast) var(--ease);
}
.hamburger.is-active { transform: rotate(90deg); }
/* drawer 末尾に Razz クレジットを置く想定 — credit 本体は header から非表示 */
.header-credit { display: none; }
}
@media (max-width: 639px) {
.container { padding: 0 20px; }
.header-inner { padding: 0 20px; }
.header { padding: 6px 0; }
section { padding: 64px 0; }
/* 旧クラス互換 */
.cta-header { display: none; }
}
/* ============================================================
Print Stylesheet — 法務ページ・お知らせ印刷用
オーロラ装飾を非表示にし、紙面でも読みやすい白黒構成へ
============================================================ */
@media print {
/* 装飾レイヤーを全て非表示 */
.aurora-stage,
.film-grain,
.scroll-progress,
.scroll-indicator,
.floating-sparkles,
.skip-link,
.hamburger,
.cta-header,
.legal-back-wrap,
.breadcrumb,
.footer-sns,
.nav,
.aurora-divider {
display: none !important;
}
/* 配色を紙面用に */
body, html {
background: #ffffff !important;
color: #000000 !important;
font-family: 'Noto Serif JP', 'Times New Roman', serif !important;
}
/* リンクは下線付きの黒に統一(URLは括弧書きで表示) */
a {
color: #000 !important;
text-decoration: underline !important;
}
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #555;
}
/* ヘッダ・フッタ・装飾を停止 */
.header, .footer { background: transparent !important; box-shadow: none !important; }
.footer-bottom { color: #000 !important; }
/* 法務ページ専用 */
.legal-hero { padding-top: 0 !important; }
.legal-title-en { font-size: 24pt !important; color: #000 !important; }
.legal-title-jp { font-size: 14pt !important; color: #000 !important; }
.legal-section { page-break-inside: avoid; }
.legal-section h2 {
font-size: 13pt !important;
color: #000 !important;
border-bottom: 1px solid #000;
padding-bottom: 4pt;
margin-bottom: 8pt;
}
.legal-section h2::before { color: #555 !important; }
.legal-section p, .legal-section li {
font-size: 10.5pt !important;
line-height: 1.7 !important;
color: #000 !important;
}
.legal-lead {
background: transparent !important;
border-left: 2pt solid #000 !important;
backdrop-filter: none !important;
padding: 8pt 12pt !important;
}
.legal-meta { color: #333 !important; }
/* モーション系を停止 */
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}