/* * denken3 LP。 * トークンは assets/tokens.css（docs 21-design-tokens.md 由来）。 * * ページ全体は で濃い地色に固定する。 * docs 23-world-and-characters.md の方針どおり、世界は暗く温かく、 * アプリ画面を見せる箇所だけ data-theme="light" で明るく浮かび上がらせる。 */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.4; margin: 0; font-weight: 700; } p { margin: 0 0 var(--space-4); } a { color: var(--primary-text); } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } .wrap { width: min(1120px, calc(100% - var(--space-8))); margin-inline: auto; } .wrap-narrow { width: min(760px, calc(100% - var(--space-8))); } .skip { position: absolute; left: -9999px; background: var(--card); color: var(--text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); z-index: 10; } .skip:focus { left: var(--space-4); top: var(--space-4); } :where(a, button, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* ---------- ヘッダー ---------- */ .site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); } .header-inner { display: flex; align-items: center; gap: var(--space-6); min-height: 64px; } .brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--text); } .brand-mark { width: 32px; height: 32px; object-fit: contain; } .brand-name { font-weight: 700; font-size: 17px; letter-spacing: 0.01em; } .site-nav { display: flex; gap: var(--space-6); margin-left: auto; font-size: 14px; } .site-nav a { color: var(--text-sub); text-decoration: none; } .site-nav a:hover { color: var(--text); } .badge { display: inline-block; font-size: 12px; line-height: 1.4; font-weight: 700; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); } .badge-soon { background: var(--primary-pale); color: #ffffff; } @media (max-width: 900px) { .site-nav { display: none; } } /* ---------- ヒーロー ---------- */ .hero { position: relative; overflow: hidden; padding: var(--space-16) 0; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 520px at 72% 12%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%), radial-gradient(620px 400px at 6% 92%, color-mix(in srgb, var(--warning) 10%, transparent), transparent 70%); } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: center; } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--primary-text); margin-bottom: var(--space-3); } .hero-title { font-size: clamp(34px, 5vw, 54px); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: var(--space-6); } .hero-title .num { color: var(--primary-text); } .hero-lead { font-size: 17px; color: var(--text-sub); } .hero-lead strong { color: var(--text); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-8) 0 var(--space-4); } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-md); text-decoration: none; font-size: 16px; font-weight: 700; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } /* 面に白抜きは大サイズ限定（docs 21 のコントラスト規約） */ .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-pressed); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--ring); } .btn-ghost:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } .btn:active { transform: translateY(1px); } .note { font-size: 12px; line-height: 1.6; color: var(--text-weak); margin: 0; } /* ヒーローのキャラと端末 */ .hero-stage { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: flex-end; padding-right: 4%; } .hero-char { position: absolute; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)); } /* 端末は右、キャラは端末に寄りかかるように左右へ逃がす */ .hero-char-main { width: 230px; left: 0; bottom: -8px; z-index: 3; } .hero-char-back { width: 104px; left: 14%; top: 0; z-index: 4; } .hero-char-side { width: 126px; right: -2%; bottom: 8%; z-index: 3; } .device { position: relative; z-index: 2; /* data-theme="light" でトークンを切り替えているので、文字色も明示的に取り直す */ color: var(--text); width: 290px; border-radius: 36px; padding: 10px; background: var(--card); border: 1px solid var(--ring); box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.7); } .device-screen { background: var(--bg); border-radius: 28px; padding: var(--space-6) var(--space-4); display: grid; gap: var(--space-3); } .device-label { font-size: 12px; font-weight: 700; color: var(--text-weak); margin: 0 0 var(--space-1); letter-spacing: 0.06em; } .device-hint { font-size: 11px; line-height: 1.6; color: var(--text-weak); margin: var(--space-1) 0 0; } .exp-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-4); } .exp-serious { border-left: 3px solid var(--serious); } .exp-warning { border-left: 3px solid var(--warning); } .exp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); } .exp-subject { font-size: 14px; font-weight: 700; } .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 6%, transparent); } .chip svg { width: 12px; height: 12px; } .chip-serious { color: #a8471f; } .chip-warning { color: #8a5f00; } .exp-value { display: flex; align-items: baseline; gap: 2px; margin: 0; } .exp-num { font-size: 40px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .exp-unit { font-size: 15px; color: var(--text-sub); } .exp-sub { font-size: 12px; color: var(--text-sub); margin: 0 0 var(--space-3); } .exp-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; } .exp-slots li { height: 6px; border-radius: 3px; } .exp-slots .used { background: var(--hairline); } .exp-serious .exp-slots .left { background: var(--serious); } .exp-warning .exp-slots .left { background: var(--warning); } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: var(--space-8); } .hero { padding: var(--space-12) 0; } .hero-stage { min-height: 440px; justify-content: center; padding-right: 0; } .hero-char-main { width: 150px; left: 0; bottom: 0; } .hero-char-side { width: 88px; right: 0; } .hero-char-back { width: 68px; left: 8%; top: 0; } } /* ---------- 汎用セクション ---------- */ .section { padding: var(--space-16) 0; } .section-alt { background: var(--card); } .section-title { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.01em; margin-bottom: var(--space-4); } .section-lead { font-size: 17px; color: var(--text-sub); max-width: 62ch; margin-bottom: var(--space-12); } /* 免除の仕組み */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; } .why-text p { color: var(--text-sub); } .why-text strong { color: var(--text); } .why-source { font-size: 12px; color: var(--text-weak); } .quote { display: flex; gap: var(--space-4); align-items: flex-start; margin: var(--space-8) 0; padding: var(--space-4); background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius-lg); } .quote-char { width: 72px; flex: none; } .quote blockquote { margin: 0; } .quote blockquote p { margin: 0 0 var(--space-1); font-size: 15px; color: var(--text); } .quote figcaption { font-size: 12px; color: var(--text-weak); } .why-figcap { font-size: 13px; font-weight: 700; color: var(--text-weak); margin-bottom: var(--space-3); } .timeline { display: grid; gap: var(--space-2); } .timeline li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--bg); } .timeline .t-when { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .timeline .t-state { font-size: 12px; color: var(--text-weak); } .timeline .t-used { opacity: 0.55; } .timeline .t-last { border-color: var(--serious); background: color-mix(in srgb, var(--serious) 14%, var(--bg)); } .timeline .t-last .t-state { color: var(--serious); font-weight: 700; } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: var(--space-8); } } /* できること */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .feature { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); transition: transform var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease); } .section-alt .feature { background: var(--bg); } .feature:hover { transform: translateY(-3px); border-color: var(--primary); } .feature-char { width: 96px; margin-bottom: var(--space-4); } .feature h3 { font-size: 18px; margin-bottom: var(--space-2); } .feature p { font-size: 15px; color: var(--text-sub); margin: 0; } @media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } } /* 一座 */ .cast-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); } .cast { text-align: center; } .cast img { width: 100%; max-width: 128px; margin: 0 auto var(--space-2); transition: transform var(--dur-normal) var(--ease); } .cast:hover img { transform: translateY(-6px); } .cast-name { font-size: 15px; font-weight: 700; margin: 0 0 2px; } .cast-role { font-size: 12px; color: var(--text-weak); margin: 0; line-height: 1.5; } @media (max-width: 900px) { .cast-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } } @media (max-width: 520px) { .cast-grid { grid-template-columns: repeat(2, 1fr); } } /* 成長 */ .grow-track { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-bottom: var(--space-16); flex-wrap: wrap; } .grow-step { text-align: center; } .grow-step img { width: 132px; margin: 0 auto var(--space-2); } .grow-name { font-size: 17px; font-weight: 700; margin: 0 0 2px; } .grow-cond { font-size: 13px; color: var(--text-weak); margin: 0; } .grow-arrow { color: var(--text-weak); } .grow-arrow svg { width: 28px; height: 28px; } .grow-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .grow-note { border-top: 2px solid var(--primary); padding-top: var(--space-4); } .grow-note h3 { font-size: 16px; margin-bottom: var(--space-2); } .grow-note p { font-size: 14px; color: var(--text-sub); margin: 0; } .grow-note strong { color: var(--text); } @media (max-width: 900px) { .grow-notes { grid-template-columns: 1fr; } .grow-arrow { transform: rotate(90deg); } } /* 料金 */ .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-4); } .plan { position: relative; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-8); } .plan-featured { border-color: var(--primary); } .badge-plan { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-8); background: var(--primary); color: var(--on-primary); } .plan-name { font-size: 18px; margin-bottom: var(--space-2); } .plan-price { font-size: 40px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; margin-bottom: var(--space-6); } .plan-price-tbd { font-size: 22px; color: var(--text-sub); } .plan-unit { font-size: 16px; font-weight: 400; color: var(--text-sub); margin-left: 2px; } .plan-list { display: grid; gap: var(--space-2); font-size: 15px; color: var(--text-sub); } .plan-list li { padding-left: var(--space-6); position: relative; } .plan-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 6px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg); } @media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } } /* FAQ */ .faq-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); } .faq-char { width: 88px; flex: none; } .faq-head .section-title { margin-bottom: 0; } .faq { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--card); } .faq summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: right; color: var(--text-weak); font-weight: 400; } .faq[open] summary::after { content: "\2212"; } .faq p { margin: var(--space-3) 0 0; color: var(--text-sub); font-size: 15px; } /* CTA */ .section-cta { text-align: center; } .cta-box { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-8); } .cta-char { width: 110px; margin: 0 auto var(--space-4); } .cta-title { font-size: clamp(24px, 3.4vw, 36px); margin-bottom: var(--space-3); } .cta-lead { color: var(--text-sub); margin-bottom: var(--space-8); } .store-row { display: flex; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-4); flex-wrap: wrap; } .store { border: 1px dashed var(--ring); border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); font-size: 14px; color: var(--text-weak); } /* フッター */ .site-footer { border-top: 1px solid var(--hairline); padding: var(--space-12) 0; } .footer-inner { display: grid; gap: var(--space-4); } .footer-brand { font-weight: 700; margin: 0; } .footer-pending { font-size: 14px; color: var(--text-sub); margin: 0; } .footer-note { font-size: 12px; color: var(--text-weak); margin: 0; max-width: 70ch; }