/* ============================================================ hb-geo.css — トップページ（幾何学デザイン）専用レイアウト ------------------------------------------------------------ 全セレクタを .hb-geo 配下にスコープしている。理由: .wrap .hero .cta .sec .lead や 1〜2文字クラス .n .b .s .p .o .tl .tr .bl .br を無スコープで全ページに出すと、/lp/ 配下（class="wrap" が207箇所）や /loan-diagnosis/（.hero-lead が .hero p に詳細度で負ける）を壊すため。 front-page.php だけがを付けてこのファイルを読む。ヘッダー / フッター / CTA帯 / :root トークンのエイリアスは hb-geo-shell.css 側。ブレークポイントは shell と揃えて 1040 / 720。 ============================================================ */ /* ============================================================ hb-geo.css — はてなベース株式会社コーポレートサイト幾何学デザイン ------------------------------------------------------------ tax.hatenabase.jp の tax-geo.css と同型の2層構造。 1層目（正本） _ds/colors_and_type.css Hatenabase Design System 2層目（これ） hb-geo.css 会社HP固有のレイアウト・モチーフトークンは値をコピーせず var() で参照する。ここで定義している短縮名は正本トークンのエイリアスであり、独自の値を持たない。 → 値の重複が無いので、正本を更新すれば両サイトに反映される。レスポンシブ方針: マークアップは1系統のみ。PC版・SP版のHTMLを分けない。表示差分はすべてこのファイルのメディアクエリで吸収する。 → 現行 variant-d.jsx の VariantDPC / VariantDMobile 二重実装を廃止するため。 ============================================================ */ /* grid / flex の子がテキストで押し広げられて横スクロールを起こすのを防ぐ。 */ .hb-geo .sc, .hb-geo .dc, .hb-geo .ic, .hb-geo .cc, .hb-geo .vc, .hb-geo .rc, .hb-geo .band, .hb-geo .ftg>div{min-width:0} .hb-geo .wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)} .hb-geo .sec{padding:104px 0} .hb-geo .secsub{background:var(--sub)} .hb-geo .secdark{background:var(--navy);color:#fff} /* ---- セクション見出し（リーフ + 英字ラベル + 和文H2）---- */ .hb-geo .sh{display:flex;align-items:baseline;gap:20px;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:64px;position:relative} .hb-geo .leaf{width:12px;height:12px;background:var(--navy);border-radius:0 100% 0 100%;align-self:center;flex-shrink:0} .hb-geo .en{font-size:12px;letter-spacing:.26em;font-weight:700;color:var(--navy)} .hb-geo .sh h2{margin:0;font-size:var(--text-heading);font-weight:700;letter-spacing:.06em;line-height:1.4} .hb-geo .rleaf{position:absolute;right:0;bottom:-30px;width:9px;height:9px;background:var(--blu);border-radius:0 100% 0 100%} .hb-geo .secdark .sh{border-color:rgba(255,255,255,.18)} .hb-geo .secdark .en{color:var(--sky)} .hb-geo .secdark .leaf{background:var(--sky)} .hb-geo .secdark .rleaf{background:var(--sky)} /* ---- 幾何学モザイク ---- */ .hb-geo .geo{display:grid;grid-template-columns:26px 26px;grid-template-rows:26px 26px;gap:3px;margin-bottom:30px} .hb-geo .geo i{display:block} .hb-geo .gl{grid-template-columns:34px 34px;grid-template-rows:34px 34px} .hb-geo .n{background:var(--navy)} .hb-geo .b{background:var(--blu)} .hb-geo .s{background:var(--sky)} .hb-geo .p{background:var(--pale)} .hb-geo .o{border-radius:50%} .hb-geo .tl{border-radius:100% 0 0 0} .hb-geo .tr{border-radius:0 100% 0 0} .hb-geo .bl{border-radius:0 0 0 100%} .hb-geo .br{border-radius:0 0 100% 0} /* ---- 基底 ---- style.css（全ページ enqueue）の body{color:#545454;background:#F2F2F2} がトップにも効く。トップは幾何学デザインなので、デザインシステムの白背景・本文色を body.hb-geo で上書きする。他ページには影響しない（.hb-geo は front-page.php だけが付ける）。 */ body.hb-geo{background:var(--color-bg);color:var(--ink);font-family:var(--font-family)} .hb-geo a{color:var(--navy);text-decoration:none} .hb-geo a:hover{color:var(--blu)} /* ---- 本文の行間 ---- デザインシステム（_ds）は body に 1.8 を当てているが、style.css（全ページ enqueue）の body{line-height:1.5} に負けるため、トップの本文要素に直接 1.8 を当てる（Issue #98）。 */ .hb-geo p,.hb-geo li,.hb-geo .lead{line-height:var(--line-height-base)} .hb-geo h1,.hb-geo h2,.hb-geo h3{line-height:1.5} .hb-geo .hero h1{line-height:1.5} /* ---- ボタン ---- */ .hb-geo .cta{display:inline-block;background:var(--navy);color:#fff;font-weight:var(--font-weight-bold);border-radius:var(--radius-md);padding:12px 28px;font-size:var(--text-caption);letter-spacing:.06em;transition:transform var(--duration-2) var(--ease-out),box-shadow var(--duration-2) var(--ease-out)} .hb-geo .cta:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-cta)} .hb-geo .cta.gh{background:transparent;color:var(--navy);border:1px solid var(--navy);border-radius:var(--radius-md)} .hb-geo .cta.gh:hover{color:var(--navy);background:rgba(10,40,70,.04);box-shadow:none;transform:none} .hb-geo .tcta{font-weight:700;font-size:14px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:8px} .hb-geo .tcta em{font-style:normal;transition:transform .2s} .hb-geo .tcta:hover em{transform:translateX(4px)} .hb-geo .secmore{text-align:center;margin-top:48px;display:flex;gap:32px;justify-content:center;flex-wrap:wrap} .hb-geo .ccimg img{width:100%;height:100%;object-fit:cover;display:block} .hb-geo .ccimg-empty{display:flex;align-items:center;justify-content:center} .hb-geo .ccimg-empty .geo{margin:0} .hb-geo .hero p strong{color:var(--navy);font-weight:700} .hb-geo .bandnote a{color:var(--blu);text-decoration:underline} /* ---- ヒーロー ---- */ .hb-geo .hero{padding:96px 0 110px;border-bottom:1px solid var(--line)} .hb-geo .herog{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center} .hb-geo .crumb{font-size:11px;letter-spacing:.2em;color:var(--mute);margin-bottom:28px} .hb-geo .hero h1{font-size:44px;font-weight:700;line-height:1.5;letter-spacing:.04em;margin:0 0 32px;color:var(--navy)} .hb-geo .hero .sub{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:19px;color:var(--blu);letter-spacing:.02em;display:block;margin-top:14px} .hb-geo .hero p{font-size:15px;color:var(--mute);margin:0 0 18px;max-width:600px} .hb-geo .heroart{display:grid;grid-template-columns:repeat(4,72px);grid-template-rows:repeat(4,72px);gap:6px;justify-content:center} .hb-geo .heroart i{display:block} .hb-geo .herobtn{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px} /* ---- サービス3カード ---- */ .hb-geo .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .hb-geo .sc{border:1px solid var(--line);background:#fff;border-radius:12px;padding:40px 32px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s} .hb-geo a.sc:hover{transform:translateY(-2px);box-shadow:var(--shadow-raise);color:inherit} .hb-geo .snum{font-size:12px;letter-spacing:.22em;font-weight:700;color:var(--blu);margin-bottom:22px} .hb-geo .sc h3{margin:0 0 16px;font-size:19px;font-weight:700;line-height:1.55;letter-spacing:.04em;color:var(--navy)} .hb-geo .sc p{margin:0 0 24px;font-size:13.5px;color:var(--mute);flex:1} .hb-geo .rm{font-size:12px;letter-spacing:.18em;font-weight:700;color:var(--navy)} /* ---- 事業部3列（罫線グリッド）---- */ .hb-geo .dgrid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)} .hb-geo .dc{padding:48px 36px;display:flex;flex-direction:column;border-right:1px solid var(--line)} .hb-geo .dc:last-child{border-right:none} .hb-geo .dc.alt{background:var(--sub)} .hb-geo .dno{font-size:12px;letter-spacing:.22em;font-weight:700;color:var(--blu);margin-bottom:18px} .hb-geo .dc h3{margin:0 0 16px;font-size:20px;font-weight:700;letter-spacing:.04em;line-height:1.5;color:var(--navy)} .hb-geo .dc p{margin:0 0 26px;font-size:13.5px;color:var(--mute)} .hb-geo .dpts{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)} .hb-geo .dpts li{font-size:13px;padding:11px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center} .hb-geo .dpts li::before{content:"";width:8px;height:8px;background:var(--blu);border-radius:0 100% 0 100%;flex-shrink:0} /* ---- 16の課題 ---- */ .hb-geo .igrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.15);border-left:1px solid rgba(255,255,255,.15)} .hb-geo .ic{padding:24px 22px;border-right:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);min-height:140px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;transition:background .2s} .hb-geo .ic:hover{background:rgba(255,255,255,.06);color:#fff} .hb-geo .ictag{font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--sky)} .hb-geo .ic p{margin:12px 0 0;font-size:13.5px;line-height:1.75;font-weight:500} .hb-geo .secdark .lead{color:rgba(255,255,255,.72)} /* ---- 帯（研修 / hatena pro）---- */ .hb-geo .band{border:1px solid var(--line);border-radius:12px;background:#fff;padding:48px 52px;display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center} .hb-geo .band.dark{background:var(--navy);border-color:var(--navy);color:#fff} .hb-geo .band.dark h3, .hb-geo .band.dark .bandttl{color:#fff} .hb-geo .band.dark p{color:#C6D4E4} .hb-geo .band.dark .cta{background:#fff;color:var(--navy)} .hb-geo .bandttl{font-size:12px;letter-spacing:.22em;font-weight:700;color:var(--blu);margin-bottom:12px} .hb-geo .band h3{margin:0 0 14px;font-size:22px;font-weight:700;line-height:1.5;letter-spacing:.04em;color:var(--navy)} .hb-geo .band p{margin:0;font-size:13.5px;color:var(--mute)} .hb-geo .bandfacts{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} .hb-geo .band.dark .bandfacts{border-color:rgba(255,255,255,.18)} .hb-geo .bandfacts div{font-size:12.5px} .hb-geo .bandfacts dt{font-size:10.5px;letter-spacing:.16em;font-weight:700;color:var(--blu);margin-bottom:4px} .hb-geo .band.dark .bandfacts dt{color:var(--sky)} .hb-geo .bandfacts dd{margin:0;font-weight:500} .hb-geo .bandnote{font-size:11.5px;color:var(--mute);margin-top:18px;line-height:1.9} .hb-geo .band.dark .bandnote{color:#9FB4CB} /* ---- 事例カード ---- */ .hb-geo .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .hb-geo .cc{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s} .hb-geo a.cc:hover{transform:translateY(-2px);box-shadow:var(--shadow-raise);color:inherit} .hb-geo .ccimg{aspect-ratio:16/9;background:var(--sub2);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.16em;color:var(--mute)} .hb-geo .ccbody{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1} .hb-geo .cctag{display:inline-block;border:1px solid var(--navy);color:var(--navy);border-radius:var(--radius-sm);font-size:11px;padding:2px 12px;margin-bottom:14px;font-weight:700;letter-spacing:.06em;align-self:flex-start} .hb-geo .cc h3{margin:0 0 12px;font-size:16px;font-weight:700;line-height:1.6;letter-spacing:.03em} .hb-geo .cc p{margin:0;font-size:13px;color:var(--mute);flex:1} /* ---- お客様の声 ---- */ .hb-geo .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:32px} .hb-geo .vc{border:1px solid var(--line);border-radius:12px;background:#fff;padding:40px 40px 36px} .hb-geo .vtag{display:inline-block;font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--blu);margin-bottom:12px} .hb-geo .vc h3{margin:0 0 18px;font-size:18px;font-weight:700;letter-spacing:.04em} .hb-geo .vc p{margin:0;font-size:13.5px;color:var(--mute)} /* ---- お知らせ / ブログ ---- */ .hb-geo .nlist{border-top:1px solid var(--line)} .hb-geo .nlist a{display:grid;grid-template-columns:120px 130px 1fr;gap:24px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line)} .hb-geo .ndate{font-size:12px;letter-spacing:.1em;color:var(--mute)} .hb-geo .ncat{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--blu)} .hb-geo .ntitle{font-size:14px;font-weight:500} /* ---- 採用 ---- */ .hb-geo .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .hb-geo .rc{border:1px solid var(--line);border-radius:12px;padding:32px 28px;background:#fff} .hb-geo .rc h3{margin:0 0 10px;font-size:16px;font-weight:700;letter-spacing:.04em} .hb-geo .rc p{margin:0;font-size:12.5px;color:var(--mute)} /* ---- プレビューでインライン style だったものをクラス化（テーマ移植時に追加）---- */ .hb-geo .lead{font-size:15px;color:var(--mute);margin:0 0 var(--space-xl);max-width:780px} /* ============================================================ レスポンシブ — ここだけで PC / タブレット / SP を吸収する ============================================================ */ @media(max-width:1040px){ .hb-geo .sec{padding:80px 0} .hb-geo .sh h2{font-size:28px} .hb-geo .herog{grid-template-columns:1fr;gap:48px} .hb-geo .hero h1{font-size:36px} .hb-geo .heroart{grid-template-columns:repeat(4,60px);grid-template-rows:repeat(4,60px)} .hb-geo .sgrid, .hb-geo .cgrid{grid-template-columns:1fr 1fr} .hb-geo .dgrid{grid-template-columns:1fr} .hb-geo .dc{border-right:none;border-bottom:1px solid var(--line)} .hb-geo .dc:last-child{border-bottom:none} .hb-geo .igrid{grid-template-columns:repeat(2,1fr)} .hb-geo .band{grid-template-columns:1fr;gap:28px;padding:40px 36px} .hb-geo .rgrid{grid-template-columns:1fr 1fr} } @media(max-width:720px){ .hb-geo .wrap{padding:0 20px} .hb-geo .sec{padding:64px 0} .hb-geo .sh{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:40px;padding-bottom:18px} .hb-geo .sh h2{font-size:23px;letter-spacing:.04em} .hb-geo .en{font-size:11px} .hb-geo .rleaf{bottom:-24px} .hb-geo .hero{padding:56px 0 64px} .hb-geo .hero h1{font-size:27px;line-height:1.55;margin-bottom:24px} .hb-geo .hero .sub{font-size:15px} .hb-geo .hero p{font-size:14px} .hb-geo .heroart{grid-template-columns:repeat(4,44px);grid-template-rows:repeat(4,44px);gap:4px;justify-content:start} .hb-geo .herobtn{margin-top:32px} .hb-geo .herobtn .cta{flex:1;text-align:center;padding:14px 18px;font-size:13px} .hb-geo .sgrid, .hb-geo .cgrid, .hb-geo .vgrid, .hb-geo .rgrid{grid-template-columns:1fr;gap:16px} .hb-geo .sc{padding:32px 26px} .hb-geo .sc h3{font-size:17px} .hb-geo .dc{padding:36px 26px} .hb-geo .igrid{grid-template-columns:1fr} .hb-geo .ic{min-height:0;padding:20px} .hb-geo .band{padding:32px 26px} .hb-geo .band h3{font-size:18px} .hb-geo .bandfacts{gap:20px} .hb-geo .vc{padding:32px 26px} .hb-geo .nlist a{grid-template-columns:1fr;gap:6px;padding:18px 2px} .hb-geo .ndate, .hb-geo .ncat{font-size:11px} }