/* QuadrupleU のサイト。 ⚠️ 色の持ち主を分けている。混ぜないこと。ポータル（/ と 404） … 屋号の入れ物。無彩色で、特定のアプリの色は使わない。アプリが増えても中立でいられるようにするため。 /omame/ 配下 … おまめ記録のページ。でアプリの色に切り替わる。 ⚠️ こちらの色だけがアプリ（src/theme.js）と揃えてある。土台は共通で無彩色。色は「押せるもの」と「リンク」にだけ使う。 */ :root { /* 土台。純白・純黒は使わず、わずかに濁らせて目の負担を減らす */ --bg: #ffffff; --bg-alt: #f5f5f7; --card: #ffffff; --text: #1d1d1f; --text-mid: #6e6e73; --border: #d2d2d7; /* ポータルの既定。ボタンは黒、リンクは青 */ --accent: #1d1d1f; /* ボタンの地 */ --accent-on: #ffffff; /* ボタンの文字 */ --accent-text: #0066cc; /* リンクの文字 */ --tint: #f5f5f7; /* 淡い面 */ --radius: 18px; --wrap: 692px; } /* おまめ記録のページだけ、アプリと同じ色に差し替える。 ⚠️ アプリ（src/theme.js）の色を変えたら、ここも合わせること */ body.omame { --accent: #F2978E; --accent-on: #5C3532; --accent-text: #A94B45; --tint: #FDECEB; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; font-size: 17px; line-height: 1.75; /* 日本語の長文が詰まって見えないよう、字間をわずかに開ける。 ⚠️ 欧文向けに詰める（負の値）と、日本語では逆に読みにくくなる */ letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; } /* ── ヘッダー ──────────────────────────────── 面を塗らず、細い境界線だけで区切る。スクロールすると背景がすりガラスになる */ header.site { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); padding: 0 22px; } header.site .inner { max-width: var(--wrap); margin: 0 auto; height: 48px; display: flex; align-items: center; } header.site a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; } /* ── 見出し ──────────────────────────────── 大きさの差をはっきりつけて、色ではなく級数で階層を作る */ h1 { font-size: clamp(32px, 6vw, 48px); line-height: 1.25; font-weight: 700; margin: 0 0 16px; letter-spacing: 0; } h2 { font-size: clamp(22px, 4vw, 28px); line-height: 1.4; font-weight: 600; margin: 0 0 12px; color: var(--text); } h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; } p { margin: 0 0 16px; } p:last-child { margin-bottom: 0; } small, .muted { color: var(--text-mid); font-size: 14px; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } .lead { font-size: clamp(18px, 2.4vw, 21px); line-height: 1.6; color: var(--text-mid); margin: 0 0 24px; } /* ── セクション ──────────────────────────── 余白でまとまりを作る。区切り線は使わず、地の色を交互に変える */ .section { padding: 72px 0; } .section.alt { background: var(--bg-alt); } .section > .wrap > :last-child { margin-bottom: 0; } /* 読み物のページ（ポリシー・サポートなど）。上下にゆとりを取る。 ⚠️ .wrap と同じ要素に付くので、padding を一括指定すると左右の余白を消してしまう。上下だけを指定すること */ .page { padding-top: 56px; padding-bottom: 96px; } .page h2 { margin-top: 56px; } .page h3 { margin-top: 32px; } .page > :first-child { margin-top: 0; } /* トップの導入。中央寄せにして、最初の画面を静かに見せる */ .hero { padding: 88px 0 72px; text-align: center; } .hero .lead { margin-left: auto; margin-right: auto; max-width: 34em; } /* ── カード ──────────────────────────────── 影は最小限。境界線を消し、地の色との差だけで浮かせる */ .card { background: var(--card); border-radius: var(--radius); padding: 28px; margin: 0 0 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.04); } .section.alt .card { box-shadow: none; } .card:last-child { margin-bottom: 0; } .tint { background: var(--tint); box-shadow: none; } /* ── ボタン ──────────────────────────────── ⚠️ 押せるものは 44px 以上（アプリと同じ基準） */ .btn { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-on); font-weight: 600; font-size: 16px; padding: 12px 26px; border-radius: 999px; min-height: 44px; transition: opacity 0.2s ease; } .btn:hover { opacity: 0.85; text-decoration: none; } ul { padding-left: 1.3em; margin: 0 0 16px; } li { margin: 8px 0; } /* ── 表 ────────────────────────────────── */ table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; } th, td { border-bottom: 1px solid var(--border); padding: 12px 8px; text-align: left; vertical-align: top; } thead th { color: var(--text-mid); font-weight: 600; font-size: 13px; white-space: nowrap; } tbody th, tr > th[scope="row"] { font-weight: 600; white-space: nowrap; } /* 狭い画面では、見出しの列が幅を取って説明文が細長くなってしまう。横に並べるのをやめ、見出しを上に積んで1行の文字数を確保する */ @media (max-width: 560px) { table, tbody, tr, th, td { display: block; width: 100%; } thead { position: absolute; left: -9999px; } /* 列見出しは読み上げにだけ残す */ tr { border-bottom: 1px solid var(--border); padding: 4px 0 12px; } tr:last-child { border-bottom: none; } th, td { border-bottom: none; padding: 4px 0; } tr > th[scope="row"] { white-space: normal; } } /* ── フッター ──────────────────────────── */ footer.site { background: var(--bg-alt); padding: 40px 22px; color: var(--text-mid); font-size: 13px; } footer.site .inner { max-width: var(--wrap); margin: 0 auto; } footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; } footer.site a { color: var(--text-mid); } footer.site p { margin: 0; } /* ── 操作の見え方 ──────────────────────── キーボードで操作する人に、今どこにいるかを見せる。 :focus ではなく :focus-visible にして、マウスで押したときは出さない */ a:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; } /* 読み上げ・キーボードの人が、毎回ヘッダーを読まずに本文へ飛べるようにする */ .skip { position: absolute; left: -9999px; background: var(--card); color: var(--accent-text); padding: 12px 20px; border-radius: 8px; z-index: 10; } .skip:focus { left: 8px; top: 8px; } /* 動きを減らす設定にしている人には、動かさない */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } /* ── 暗い環境 ──────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --bg: #000000; --bg-alt: #1c1c1e; --card: #1c1c1e; --text: #f5f5f7; --text-mid: #a1a1a6; --border: #38383a; /* ポータル側。暗い地の上では黒ボタンが沈むので、白ボタンに反転させる */ --accent: #f5f5f7; --accent-on: #1d1d1f; --accent-text: #2997ff; --tint: #1c1c1e; } /* おまめ側。淡いピンクは暗所でまぶしいため、彩度を落として色味だけ残す */ body.omame { --accent: #F2978E; --accent-on: #3A2320; --accent-text: #F5A79E; --tint: #2C1B19; } header.site { background: rgba(0, 0, 0, 0.72); } header.site a { color: var(--text); } .card { box-shadow: none; } .section.alt .card { background: #2c2c2e; } }