/* ============================================ ひすい歯科 採用サイト — CSS変数定義 デザイン仕様書 1章・2章・11章に基づく ============================================ */ :root { /* ---------------------------------------- 1章 カラーパレット ---------------------------------------- */ /* メインカラー */ --main-color: #10D0AB; --main-color-hover: #16EDC3; --main-color-light: rgba(16, 208, 171, 0.15); --main-color-pale: #DBF8F3; --main-color-50: rgba(16, 208, 171, 0.5); /* テキストカラー */ --color-text: #3A2F20; /* 本文テキスト（ダークブラウン） */ --color-dark-gray: #505050; /* ヘッダーメニュー背景・フッター背景 */ --color-mid-gray: #707070; /* ロゴ下テキスト */ --color-light-gray: #A9A9A9; /* フッタータイトル・コピーライト */ /* 深緑（CTA／反転背景） 旧値は #1C3630（L* 20）。「重厚感があり雰囲気が暗くなる」との指摘を受けて L* 41 まで持ち上げた。 反転面としての役割（白文字を載せる暗色サーフェス）は維持するため、白文字 6.13:1 を確保している。 明度の天井を決めているのは白文字ではなく、この面に載る accent 側である。 旧値では成立していたゴールド #C4A854（5.60:1）とメインカラー #10D0AB（6.56:1）は L* 41 では 2.65:1 / 2.90:1 まで落ちるため、深緑面では次のルールに置き換えた： ・操作要素（ボタン）は白系のみ … rgba(255,255,255,.9〜1) の枠線＋文字 ・装飾（アイコン・英字キッカー）は #16EDC3（--main-color-hover / 4.06:1）まで ・半透明の白は .8 未満を使わない（.75 で 4.26:1 と AA を割るため） この面の情報階層は不透明度ではなくサイズとウェイトで作ること。 上のルールは深緑を「地色」として使う面に対するもの。SPナビと SPカテゴリーオーバーレイは どちらも白地へ反転したためこの面の一覧から外れ、深緑はアイコンの「インク」側 （白地 6.1:1）と選択中バッジの塗り側で使っている。 */ --color-deep-green: #366B60; /* CTAエリア背景・誘導パネル（緑）と付箋メモ・SPナビのリンクアイコン・SPカテゴリーオーバーレイのアイコンと選択中バッジの塗り */ /* 上の暗い側。recruit CTA のグラデーション終点専用。 旧 #0f211d は --color-deep-green に対する相対輝度比 0.41 で作られていたため、 同じ比を保った値に置き換えている（単独で使わず、必ず --color-deep-green と対で使う）。 */ --color-deep-green-dark: #23473F; --color-brown: #7C6546; /* キャッチコピー・チェックリスト */ --color-light-brown: #B7A895; /* 英字ラベル・パンくず・日付 */ /* 背景カラー */ --color-bg: #F3F0EC; /* ページ背景（ベージュ系） */ --color-white: #FFFFFF; /* セクション背景・カード・ヘッダー */ --color-gray-light: #F4F4F4; /* ナビリンク・営業時間ボックス */ --color-gray: #DCDCDC; /* フッター最外背景・ボーダー */ /* 写真上の文字の可読性確保： 下層ページのタイトル帯は .page-title__content の不透明パネル（common.css）、 トップ MV は長さ基準の白フェード（top.css）で、それぞれ個別に担保する。 */ /* ---------------------------------------- 2章 タイポグラフィ ---------------------------------------- */ /* フォントファミリー 欧文は Noto Sans JP 内蔵のラテン（Source Sans 系のヒューマニスト・サンセリフ）に任せる。 かつては先頭に "Roboto" を置いていたが、これは「英数字 = Roboto / 和文 = Noto Sans JP」 という混植を意味していた。Roboto はネオグロテスク（閉じたアパチュア・均一なストローク）で、 カリグラフィ由来の骨格を持つ Klee One の隣では数字だけが機械的に浮く。 Noto Sans JP のラテンは和文と同一ファミリー内で設計されており、字面・ウェイト・ ベースラインが揃う上、開いたアパチュアの分だけ Klee One との距離も近い。 */ --font-gothic: "Noto Sans JP", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --font-serif: serif; --font-en: 'EB Garamond', var(--font-gothic); /* 装飾英字（Garamond イタリック）。ロゴの欧文と系譜を揃える。未収録グリフはゴシックにフォールバック */ /* ベース */ --fs-base-size: 16px; --line-height: 1.8; /* フォントサイズ SP（vw） */ --fs-xs-sp: 2.56vw; /* 極小：フッターコピー・英字ラベル */ --fs-sm-sp: 3vw; /* 小：パンくず・フッターリンク */ --fs-sub-sp: 3.3vw; /* 補助：キャプション */ --fs-table-sp: 3.58vw; /* テーブル・注釈・ボタン文字 */ --fs-body-sp: 3.8vw; /* 本文 */ --fs-h4-sp: 4.1vw; /* 小見出し h4 */ --fs-h3b-sp: 4.6vw; /* 中見出し（カード見出し・.benefit-card__title / .equip-*__title / .story-item__title / .pullquote__text） */ --fs-h3a-sp: 5.12vw; /* セクション見出し h3.type-a */ --fs-h2-small-sp: 6.15vw; /* サブタイトル h2 .small / Klee One 見出し */ --fs-h2-big-sp: 7.17vw; /* タイトル（中）h2 .big */ --fs-h2-big2-sp: 8.2vw; /* タイトル（大）h2 .big（Features） */ --fs-num-sp: 15.38vw; /* 装飾ナンバー */ --fs-deco-sp: 19.5vw; /* 背景装飾文字 */ /* フォントサイズ PC（rem） */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-sub: 0.875rem; /* 14px */ --fs-table: 0.9375rem; /* 15px */ --fs-body: 1rem; /* 16px */ --fs-h4: 1.125rem; /* 18px */ --fs-h3b: 1.25rem; /* 20px */ --fs-h3a: 1.5rem; /* 24px */ --fs-h2-small: 2rem; /* 32px */ --fs-h2-small2:2.25rem; /* 36px */ --fs-h2-big: 2.625rem; /* 42px */ --fs-num: 5rem; /* 80px */ --fs-deco: 7.5rem; /* 120px */ /* フォントウェイト */ --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* ---------------------------------------- 4章 レイアウト・スペーシング ---------------------------------------- */ /* コンテンツ幅 窓端 → コンテンツのガター（横パディング）は .innr だけが持つ。 セクション要素は縦パディングのみを持ち、横は必ず 0 にする。 セクション側にも 8% を書くと .innr の 8% が親の内容幅（0.84W）に対して 解決されて二重掛けになり、窓端から 14.72% まで押し出されるため。 */ --innr-sp-padding: 0 8%; --innr2-sp-padding: 0 5%; /* 全幅ブリードしたブロックの内側ガター。 padding の % は「自分の幅」ではなく「包含ブロックの幅」に対して解決されるため、 .innr の内側から窓幅へ逃がしたブロックに 8% と書くと 8%×0.84 = 6.72% になる。 窓幅そのものを基準にできる vw で持ち、上の 8% と同じ位置に着地させる。 */ --innr-bleed-sp-padding: 8vw; --innr-pc-width: 1200px; --innr-pc-padding: 0 60px; /* カード・パネルの内側パディング（ガターとは別軸） カードは「別の面」として扱う。枠線・背景の外周がガター（8%）に立ち、 中のテキストはさらにこの値だけ奥に入る。 ガターの 8% と混同されないよう、値は必ずこの変数を経由させる。 sm は2カラムグリッドの狭いカード用。トップ「数字で見る」パネル3の カウントアップ後の文字列「1分単位」が 9vw × 3.5em ≒ 31vw あり、 標準の 5vw では列の内容幅 30.5vw に収まらず overflow: hidden で切れるため、 この段だけ 1段細い値を正規の階調として持たせる。 */ --pad-card-sm-sp: 4vw; /* 狭いカード（2カラムグリッド） */ --pad-card-sp: 5vw; /* 標準カード */ /* lg の SP 側は現在どこからも参照されていない（唯一の消費者だった .sv-turn__caption は、 転換バンドを窓幅いっぱいへ逃がした際に --innr-bleed-sp-padding に移した → staff-voice.css）。 PC 側の --pad-card-lg-pc は健在なので、階調の対として定義は残す。 */ --pad-card-lg-sp: 7vw; /* 大きい面（SP の消費者なし） */ --pad-card-sm-pc: 20px; --pad-card-pc: 32px; --pad-card-lg-pc: 48px; /* セクション間スペース SP */ --cnt-a-sp: 18vw; --cnt-b-sp: 22vw; --cnt-c-sp: 24vw; /* セクション間スペース PC */ --cnt-a-pc: 80px; --cnt-b-pc: 140px; --cnt-c-pc: 180px; /* ヘッダー */ --header-h-sp: 18.975vw; --header-logo-sp: 65vw; --header-logo-pc: 320px; /* フッター */ --footer-logo-sp: 80vw; --footer-logo-pc: 252px; /* 固定UI（7章） SPフッター固定バナーの実高。height 指定を持たず内容から決まるが、 ページトップボタンの退避位置がこの値に依存するため、 バナーを構成しているトークンから導出して1箇所で持つ。 外側 padding 2vw×2 ＋ ボタン padding 3vw×2 ＋ 文字の行ボックス。 アイコン（4.5vw / line-height:1）は行ボックスを支配しないため計算に含めない。 .sp-footer-banner 側の padding・font-size を変えたらここも合わせる。 */ --sp-footer-banner-h: calc(2vw * 2 + 3vw * 2 + var(--fs-table-sp) * var(--line-height)); /* ---------------------------------------- 5章 ボタンの角丸 応募導線（見学申込・エントリー）のボタンは形状を1つに統一する。 同じ文言のボタンがページや配置で違う形に見えると CTA の識別性が落ちるため。 PC右端の固定バナー（7章）もかつてはタブ型の例外を持っていたが廃止し、 現在は配置・ページ・ブレークポイントを問わず下記1本に揃える。 ---------------------------------------- */ --radius-btn: 100px; /* 応募導線ボタン共通：ピル型 */ /* ---------------------------------------- 8章 見出し・キャッチの強調装飾（4要素システム） 強調の手段は 色・サイズ・線・点 の4つ。単独で使えるのは3つで、 数字＝ルーペ（拡大）／医院の約束＝鉛筆風アンダーライン／ 求職者の言葉＝傍点、がそれにあたる。 色は単独の軸を持たない ── 順序を持たないため単独では合図にならず、 メインカラーは白地で 1.98:1 と文字色に使えるコントラストがない。 色は拡大とセットにするか（--em-num-color）、装飾側に置く（--em-line-color）。 かつて鉤括弧「」自体を強調記号として使っていた運用は廃し、 その役割を傍点に移している。 ---------------------------------------- */ /* 軸1: ルーペ（数字の拡大） 書体は見出しから継承する（common.css の .em-num）。 倍率の上限は MV キャッチ（最も長い行）が決める： PC 1.30 超で2行に折れて「士。」が孤立 SP 1.18 超で行が溢れる（SPの改行は index.html 側で
指定） SP側の制約に合わせて単一値に統一する。 */ --em-num-scale: 1.18; /* 周囲の文字に対する倍率 */ --em-num-color: var(--main-color); /* 軸2: 鉛筆風アンダーライン（想い・約束を語る語） 線の形は common.css の .em-line が持つ SVG マスクで定義する。 色をここで持たせるため、SVG は色を焼き込まずマスクとして使っている。 */ --em-line-color: var(--main-color); /* 軸3: 傍点（語をそのまま名指しする） 拡大・下線がメインカラーで「医院からの合図」を示すのに対し、傍点は 文字と同じ色で打つ。傍点はもともと文字に添える記号であり、色を変えると 引用ではなく装飾になる。強調の強さは点の有無だけで足りる。 currentColor にしているのは「文字と同色」という関係をそのまま値にするため。 白地の見出しでは本文色（#3A2F20）、写真の上に白文字で載る .sv-turn__ja では 白に解決され、どちらでも同じ関係が保たれる。 */ --em-dot-color: currentColor; /* ---------------------------------------- 6章 アニメーション ---------------------------------------- */ --transition-base: 0.5s; --transition-btn: 0.3s ease-in-out; --transition-nav: all 0.3s; --transition-menu: 0.4s; /* ---------------------------------------- 11章 Swiper ---------------------------------------- */ --swiper-theme-color: #B7A895; --swiper-navigation-size: 44px; }