/* ========================================================================== ツナガロ！！ — ランディングページ用デザイントークン 参照した設計思想: 「温かいクリーム色のキャンバス + 4段階のティール」を軸にした リテール系デザインシステム（カフェ・ブランド由来）。 - ページ地は純白ではなく温かいクリーム。ここが効いている - ティールは1色ではなく、面ごとに役割を分けた4段階 （2026年9月にディープグリーンから色相のみ移行。ロゴ #14B8A6 に揃えたもので、 明度は元の値を保っているためコントラスト比は変わっていない） - ボタンは例外なく 50px のフルピル - 影は1枚の濃い影ではなく、薄い影を2〜3枚重ねる - グラデーションは使わない。ベタ塗りの色面だけで奥行きを作る ※ このファイルは welcome.html（紹介ページ）専用です。 ログイン後のアプリ画面は別のデザインルール（DESIGN.md）で動いています。 ※ ルート font-size を 62.5% にして 1rem = 10px として扱います。 したがって 1.6rem = 16px です。 ========================================================================== */ :root { /* ------------------------------------------------------------------ COLOR — グリーン4段階。1色に統一しないこと。 ------------------------------------------------------------------ */ /* ブランドティール: 見出し。単独で「らしさ」を出したい所 */ --color-brand: #115E59; /* アクセントティール: 塗りCTA、フローティングボタン。少し明るい */ --color-accent: #0F766E; /* ハウスティール: 濃い面。フィーチャーバンドとフッター */ --color-house: #134E4A; /* アップリフト: 装飾に少しだけ */ --color-uplift: #1B6259; /* ライトミント: 淡い下地 */ --color-green-light: #d3efe9; /* ------------------------------------------------------------------ SURFACE — 純白をページ地にしない。温かいクリームが基準。 ------------------------------------------------------------------ */ --surface-white: #ffffff; /* カード・モーダルの面 */ --surface-warm: #f2f0eb; /* ページ地。これが基準 */ --surface-ceramic: #edebe9; /* 少し濃いクリーム。ゾーンの区切り */ --surface-cool: #f9f9f9; /* 静かなユーティリティ面 */ --surface-black: #000000; /* 最上部の告知帯のみ */ /* ------------------------------------------------------------------ TEXT — 本文に純黒を使わない。87%の黒がクリーム地と釣り合う。 ------------------------------------------------------------------ */ --text-ink: rgba(0, 0, 0, 0.87); --text-soft: rgba(0, 0, 0, 0.58); --text-on-dark: rgba(255, 255, 255, 1); --text-on-dark-soft: rgba(255, 255, 255, 0.70); --border-hairline: #e7e7e7; --border-input: #d6dbde; --color-danger: #c82014; /* ------------------------------------------------------------------ TYPOGRAPHY 参照元の SoDoSans は非公開フォントのため Inter / Noto Sans JP で代替。 外部フォントは読み込まない（CSPで外部ドメインを遮断しているため）。 ------------------------------------------------------------------ */ --font-sans: 'Inter', 'Noto Sans JP', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', Roboto, sans-serif; --weight-regular: 400; --weight-semibold: 600; /* 全体に効かせる詰め気味の字送り。これがこのシステムの声色 */ --tracking: -0.01em; --tracking-loose: 0.1em; --text-display: 5.0rem; /* 50px 相当。狭い画面では縮める */ --text-jumbo: 3.6rem; --text-hero: 2.8rem; --text-h: 2.4rem; /* h1 と h2 は同じ大きさ。差は太さと色でつける */ --text-lead: 1.9rem; --text-body: 1.6rem; --text-small: 1.4rem; --text-micro: 1.3rem; --leading-normal: 1.5; --leading-compact: 1.2; /* ------------------------------------------------------------------ SPACING — 1.6rem(16px) がこのシステムで最も頻出する単位 ------------------------------------------------------------------ */ --space-1: 0.4rem; --space-2: 0.8rem; --space-3: 1.6rem; --space-4: 2.4rem; --space-5: 3.2rem; --space-6: 4.0rem; --space-7: 4.8rem; --space-8: 5.6rem; --space-9: 6.4rem; --gutter: 1.6rem; /* モバイル */ --gutter-md: 2.4rem; /* タブレット */ --gutter-lg: 4.0rem; /* デスクトップ */ --width-max: 144rem; /* ------------------------------------------------------------------ RADIUS — カードは12px、ボタンは例外なく50pxのフルピル ------------------------------------------------------------------ */ --radius-card: 12px; --radius-button: 50px; --radius-input: 4px; /* ------------------------------------------------------------------ ELEVATION — 濃い影を1枚置かない。薄い影を重ねる。 ------------------------------------------------------------------ */ --shadow-card: 0 0 0.5px rgba(0, 0, 0, 0.14), 0 1px 1px rgba(0, 0, 0, 0.24); --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.10), 0 2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.07); --shadow-float: 0 0 6px rgba(0, 0, 0, 0.24), 0 8px 12px rgba(0, 0, 0, 0.14); --shadow-float-active: 0 0 6px rgba(0, 0, 0, 0.24), 0 8px 12px rgba(0, 0, 0, 0); /* ------------------------------------------------------------------ MOTION — 押した時に 0.95 に縮む。これがこのシステムの手触り。 ------------------------------------------------------------------ */ --press: 0.95; --duration: 0.2s; }