/* ============================================================ worrysmash 共通スタイル（ポータル / 各ツール共通） ※ CLAUDE.md ルール: CSSはこのファイルに集約。HTML内インライン禁止。 ============================================================ */ :root{ --navy:#16324f; --navy-2:#22496e; --ink:#1a2330; --paper:#f4f6f8; --line:#dde2e8; --muted:#5c6675; /* 補助テキスト色。#7a8494 は薄すぎたため濃くしてコントラスト改善（全体共通） */ --neg:#c0392b; --accent:#c9963f; --card:#ffffff; --ins:#2d6ca8; --cta:#ee6f1e; /* コンバージョン用オレンジ（試算/相談ボタン等）*/ --cta-dark:#d95f12; /* その hover */ --header-h:84px; /* JSでヘッダー実高さに更新（h1追従の基準）*/ } *{box-sizing:border-box;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif; font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; line-height:1.6; overflow-anchor:none; /* ヘッダー縮小時のスクロール位置補正による揺れを防ぐ */ } /* 通常の本文（class指定のない p、および dd）はPC16px／SP14px。個別スタイルのp(.lead-text等)は各自の指定が優先 */ p, dd{ font-size:16px; } .wrap{ max-width:1200px; margin:0 auto; padding:32px 16px 72px; } /* ---- サイトヘッダー（全幅・上部追従 / index=h1・下層=a 共通）---- */ .site-header{ position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 1px 8px rgba(22,50,79,.08); } .site-header-inner{ display:flex; align-items:flex-end; /* ロゴ下端とナビ下端を同じラインに揃える */ justify-content:space-between; gap:20px; max-width:1200px; margin:0 auto; padding:10px 16px; } .brand-block{ display:flex; flex-direction:column; gap:3px; } .brand-eyebrow{ font-size:11px; letter-spacing:.16em; color:var(--accent); font-weight:700; } .brand{ margin:0; display:inline-flex; line-height:0; /* 画像下の余白を除去 */ text-decoration:none; } .brand img{ height:60px; width:auto; display:block; transition:height .18s ease; } /* 下スクロール時：ロゴ縮小（約66%）・サブタイ非表示。追従はそのまま */ .scrolled .brand img{ height:40px; } .scrolled .brand-eyebrow{ display:none; } /* 各ページの h1 見出しをヘッダー直下に追従させる（ヘッダーの後ろに隠れない）*/ .page-head{ position:sticky; top:var(--header-h); z-index:40; background:var(--paper); } /* 右ブロック：タグライン(上)＋ナビ(下)の2段。ロゴ高さに収める */ .header-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .header-tagline{ margin:0; max-width:52ch; font-size:13px; color:#42505f; line-height:1.7; text-align:right; } /* サイト内ナビ */ .site-nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:22px; } .site-nav a{ font-size:15px; font-weight:700; color:var(--navy); text-decoration:none; white-space:nowrap; padding-bottom:2px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; } .site-nav a:hover{ color:var(--ins); } .site-nav a.is-cur{ color:var(--ins); border-bottom-color:var(--ins); } /* スクロール時はタグラインを畳んでナビを主役に（PC・SP共通）*/ .scrolled .header-tagline{ display:none; } @media (max-width:680px){ .site-header-inner{ flex-direction:column; align-items:flex-start; gap:6px; padding:10px 16px; } .brand img{ height:46px; } /* 右ブロックは全幅・左寄せに */ .header-right{ align-items:flex-start; width:100%; gap:6px; } /* タグラインをロゴの下に表示（スクロール前のみ） */ .header-tagline{ display:block; text-align:left; max-width:none; font-size:12px; line-height:1.6; margin:0; } /* ナビは軽い横並び1段（JSなし・折り返し可） */ .site-nav{ justify-content:flex-start; gap:14px; } .site-nav a{ font-size:12.5px; } .scrolled .brand img{ height:30px; } } /* ---- 汎用タイポグラフィ（見出しは nml-hN でレベル展開・本文は nml-txt）---- nml-h2 = 装飾付きの大見出し（左アクセント罫・旧 .section-title を置換。section-title は廃止済み）。 nml-txt = 通常の p（class無しの本文と同じ 16/14）。dd 等 p 以外にも当てられる汎用名。 ※ h3/h4 等は踏襲元が定まってから追加する（サイズを新規に発明しない）。*/ .nml-h2{ font-size:36px; font-weight:800; color:var(--navy); letter-spacing:.02em; line-height:1.3; margin:80px 0 40px; /* 上=コンテンツ間 / 下=見出しと本文の間（PC）*/ padding-left:12px; border-left:5px solid var(--accent); } /* ページ先頭の見出し（TOPの「〜とは？」等・上にh1が無い）はヘッダー直下で空きすぎないよう詰める */ main > .nml-h2:first-child{ margin-top:24px; } .nml-txt{ font-size:16px; margin:0; } /* ---- 導入テキスト（各ツール共通の体裁）---- */ .lead{ margin:0 0 8px; } .lead-text{ margin:0; font-size:18px; color:#42505f; line-height:1.9; } /* 段落が続くときは間に空白行ぶんの余白（単独使用には影響しない）*/ .lead-text + .lead-text{ margin-top:1.4em; } /* ---- 作者から ---- */ .author-note p{ font-size:16px; color:#42505f; line-height:1.95; margin:0 0 16px; } .author-cta{ font-weight:700; color:var(--navy); } .author-note strong{ color:var(--navy); } /* CTA内でロゴを「お悩みを吹き飛ばして」のルビ付きで見せる（ロゴ＝WORRY SMASH!＝その意味）*/ .cta-logo{ ruby-align:center; } .cta-logo img{ height:26px; width:auto; vertical-align:-0.35em; margin:0 2px; } .cta-logo rt{ font-size:11px; font-weight:400; color:var(--muted); letter-spacing:.02em; } /* ---- ツール一覧 ---- */ .tools-note{ margin:0 0 20px; font-size:15px; color:#42505f; } .tools{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; } .tool-card{ display:flex; flex-direction:column; height:100%; padding:0; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .tool-thumb{ display:block; aspect-ratio:16 / 9; background:var(--paper); } .tool-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .tool-body{ display:flex; flex-direction:column; gap:6px; padding:15px 18px 20px; } .tool-card:hover{ border-color:var(--navy-2); box-shadow:0 6px 20px rgba(22,50,79,.10); transform:translateY(-2px); } /* 準備中（Coming soon）カード：もしも計算機の隣に置くグレーアウトのプレースホルダー。リンクではない */ .tool-card--soon{ align-items:center; justify-content:center; text-align:center; background:var(--paper); border:1.5px dashed #c7cfd8; cursor:default; } .tool-card--soon:hover{ border-color:#c7cfd8; box-shadow:none; transform:none; } .soon-inner{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:34px 18px; } .soon-plus{ font-size:34px; font-weight:300; line-height:1; color:#b7c0cb; } .soon-text{ font-size:16px; font-weight:700; color:#6a7785; } .soon-sub{ font-size:12.5px; color:var(--muted); } .tool-eyebrow{ font-size:10.5px; letter-spacing:.16em; color:var(--accent); font-weight:700; } /* ガイドカード用：付随ツール名を示すタグ（サブタイトルの .tool-eyebrow とは別体裁）*/ .tool-tag{ align-self:flex-start; display:inline-block; font-size:11px; font-weight:700; color:var(--navy); background:#eef2f6; border:1px solid var(--line); border-radius:999px; padding:2px 10px; letter-spacing:.02em; margin-bottom:2px; } .tool-name{ font-size:18px; font-weight:800; color:var(--navy); } .tool-desc{ font-size:12.5px; color:#4a5766; line-height:1.8; } /* 全ツール共通のベネフィット訴求（無料・登録不要・すぐ・保存）。見出し直下やツールページ上部に置く横並びの✓リスト */ .perks-line{ display:flex; flex-wrap:wrap; gap:4px 22px; margin:6px 0 22px; font-size:14px; font-weight:700; color:var(--cta-dark); } .perks-line span{ white-space:nowrap; } /* 見出し（nml-h2）の直後に置くときは、見出しにハグさせる */ .nml-h2 + .perks-line{ margin-top:-28px; } /* ---- フッター ---- */ .site-footer{ margin-top:40px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); } .site-footer a{ color:var(--muted); } .site-footer .sep{ margin:0 8px; } /* ---- ドキュメント系ページ（規約・説明）---- */ .doc{ max-width:820px; } .doc.doc-wide{ max-width:none; } /* 一覧・カード主体のページは全幅 */ /* ===== ガイド記事：本文＋右サイドバー（スクロール追従のツール誘導CTA）===== */ .guide-cols{ display:flex; gap:32px; align-items:flex-start; } .guide-cols > .doc{ flex:1 1 0; min-width:0; } .guide-aside{ flex:0 0 300px; align-self:stretch; } .guide-aside .cta-vert{ position:sticky; top:calc(var(--header-h) + 20px); display:block; } .cta-vert{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:box-shadow .18s ease, transform .18s ease; } .cta-vert:hover{ box-shadow:0 10px 26px rgba(0,0,0,.10); transform:translateY(-2px); } .cta-vert img{ display:block; width:100%; height:auto; } .cta-vert .tc-body{ display:block; padding:18px 20px 20px; } .cta-vert .tc-over{ display:block; font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.04em; margin-bottom:4px; } .cta-vert .tc-ttl{ display:block; font-size:18px; font-weight:800; color:var(--navy); line-height:1.35; margin-bottom:8px; } .cta-vert .tc-desc{ display:block; font-size:13px; color:#41505f; line-height:1.7; margin-bottom:14px; } .cta-vert .tc-btn{ display:block; text-align:center; background:var(--cta); color:#fff; border-radius:8px; padding:12px 14px; font-weight:700; font-size:14px; } .cta-vert:hover .tc-btn{ background:var(--cta-dark); } /* 〜980px=1カラム。サイドバーは隠し、本文末尾の横型CTAで代替（横型はPCでも残す）*/ @media (max-width:980px){ .guide-cols{ display:block; } .guide-aside{ display:none; } } .doc h1{ font-size:44px; color:var(--navy); font-weight:800; line-height:1.25; letter-spacing:.01em; margin:8px 0 10px; } .doc .updated{ font-size:12px; color:var(--muted); margin:0 0 22px; } .doc h2{ font-size:36px; color:var(--navy); font-weight:800; line-height:1.3; margin:56px 0 18px; padding-bottom:8px; border-bottom:1px solid var(--line); } .doc h3{ font-size:22px; color:var(--ink); font-weight:700; margin:28px 0 8px; } .doc p, .doc li{ font-size:16px; color:#41505f; line-height:1.9; } .doc .guide-related li{ font-size:13px; line-height:1.7; } /* 関連リンクは本文より小さめのまま */ .doc ul{ margin:6px 0; padding-left:1.3em; } .doc a{ color:var(--ins); } .doc .ph{ color:#b23; } /* 要記入プレースホルダの目印 */ /* ---- 解説記事（ガイド）---- */ .doc .crumb{ font-size:12px; color:var(--muted); margin:0 0 8px; } .doc .crumb a{ color:var(--ins); } .doc table{ border-collapse:collapse; width:100%; margin:16px 0; font-size:14px; background:#fff; } .doc th, .doc td{ border:1px solid var(--line); padding:9px 12px; text-align:center; vertical-align:middle; line-height:1.7; } .doc th{ background:var(--navy); color:#fff; font-weight:700; white-space:nowrap; } .doc td{ background:#fff; } .doc .tablewrap{ overflow-x:auto; } /* setai-type: 2列目を狭め、1・3列目を広げて変な折り返しを防ぐ */ .doc table.setai-cols{ table-layout:fixed; } .doc table.setai-cols th:nth-child(1), .doc table.setai-cols td:nth-child(1){ width:22%; } .doc table.setai-cols th:nth-child(2), .doc table.setai-cols td:nth-child(2){ width:41%; } .doc table.setai-cols th:nth-child(3), .doc table.setai-cols td:nth-child(3){ width:37%; } /* ツール誘導カード（左=画像／右=テキストの横2カラム・全幅。※既存の .tool-card と衝突しない別名）*/ .cta-card{ display:flex; flex-direction:row; align-items:stretch; margin:32px 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:box-shadow .18s ease, transform .18s ease; } .cta-card:hover{ box-shadow:0 8px 22px rgba(0,0,0,.10); transform:translateY(-2px); } .cta-card .tc-media{ position:relative; flex:0 0 38%; min-height:180px; } /* 左カラム。高さは右テキストに追従 */ .cta-card .tc-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .cta-card .tc-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:18px 24px; } .cta-card .tc-over{ display:block; font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.04em; margin-bottom:4px; } .cta-card .tc-ttl{ display:block; font-size:22px; font-weight:800; color:var(--navy); line-height:1.3; } .cta-card .tc-desc{ display:block; font-size:14px; color:#41505f; line-height:1.7; margin-top:8px; } .cta-card .tc-btn{ align-self:flex-start; margin-top:14px; background:var(--cta); color:#fff; border-radius:8px; padding:11px 22px; font-weight:700; font-size:14px; } .cta-card:hover .tc-btn{ background:var(--cta-dark); } /* ※注記（赤・本文より1サイズ小）。ツール側 .sub-note.caution のガイド版 */ .doc .sub-note{ font-size:14px; color:var(--muted); line-height:1.7; margin:6px 0 8px; } .doc .sub-note.caution{ color:var(--neg); font-weight:600; } .doc .sub-note.caution a{ color:var(--neg); text-decoration:underline; } /* 「ガイド一覧をすべて見る」ボタン */ .more-btn-wrap{ text-align:center; margin:22px 0 0; } .more-btn{ display:inline-block; padding:12px 26px; background:var(--navy); color:#fff; border-radius:9px; font-weight:700; font-size:15px; text-decoration:none; transition:background .15s ease, transform .15s ease, box-shadow .15s ease; } .more-btn:hover{ background:var(--navy-2); transform:translateY(-1px); box-shadow:0 6px 18px rgba(22,50,79,.16); } /* 用語ツールチップ（?付き・ホバー/タップで説明）。data-tip に説明文を入れる */ .term{ position:relative; border-bottom:1px dotted var(--muted); cursor:help; } .term-q{ font-size:.72em; font-weight:700; color:var(--ins); vertical-align:super; margin-left:1px; } .term:hover::after, .term:focus::after{ content:attr(data-tip); position:absolute; left:0; top:100%; margin-top:6px; z-index:70; width:max-content; max-width:min(280px,78vw); white-space:normal; text-align:left; background:var(--navy); color:#fff; font-size:12px; font-weight:400; line-height:1.65; letter-spacing:normal; padding:9px 11px; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.20); } .guide-related{ margin:48px 0 0; padding-top:20px; border-top:1px solid var(--line); } .guide-related > b{ display:block; font-size:18px; color:var(--navy); margin:0 0 14px; } .guide-related .tools{ grid-template-columns:repeat(3,1fr); gap:12px; } /* 外部リンク（target="_blank"）に別窓アイコンを自動付与。.btn・.no-ext は除外 */ a[target="_blank"]:not(.btn):not(.no-ext)::after{ content:""; display:inline-block; width:.72em; height:.72em; margin-left:.22em; vertical-align:baseline; background-color:currentColor; -webkit-mask:var(--ext-icon) center/contain no-repeat; mask:var(--ext-icon) center/contain no-repeat; } :root{ --ext-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M14%203h7v7h-2V6.41l-9.29%209.3-1.42-1.42%209.3-9.29H14V3zM5%205h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E"); } /* 画像プレースホルダ（Geminiで生成して に差し替える。差し替え後は削除）*/ .img-todo{ margin:16px 0; padding:14px 16px; border:1px dashed #c7a86a; background:#fdf8ee; border-radius:10px; } .img-todo .tag{ font-size:12px; font-weight:700; color:#8a6a1e; } .img-todo .role{ font-size:12.5px; color:#5a5330; margin:3px 0 6px; } .img-todo .prompt{ font-size:12px; color:#41505f; background:#fff; border:1px solid var(--line); border-radius:6px; padding:8px 10px; line-height:1.7; white-space:pre-wrap; } .doc figure.hero{ margin:0 0 18px; } .doc figure.hero img{ width:100%; height:auto; border-radius:12px; display:block; } /* 図解（SVG）*/ .doc figure.zu{ margin:18px 0; } .doc figure.zu img{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:10px; background:#fff; } /* 注記コンポーネント。見た目は共通で、.sub-note は font-size が小さいだけ。 1行なら

、複数の注記なら