/* ============================================================ つどえ（tsudoe.com）共通スタイル 5ページ（/ /service /price /faq /about）すべてがこの1ファイルを読む。 色や文字サイズを変えるときは、ここだけ直せば全ページに反映される。 ============================================================ */ :root{ /* このサイトは明るい配色で設計済み。ブラウザの自動ダークモード変換 （Android Chromeの「ウェブサイトを暗くする」等）が背景を暗転させると 墨色のロゴ画像が沈んで見えなくなるため、変換しないよう宣言する。 ※利用者が自分で入れたDark Reader等の拡張までは止められない（2026-08-05実測） */ color-scheme:only light; --paper:#F7F5EF; /* 生成り（washi） */ --paper-2:#F1EEE5; /* 少し沈めた面 */ --ink:#2B3336; /* 墨＝ロゴの実測色（#2B3336）に統一 */ --sub:#5A6265; /* 副次テキスト */ --line:rgba(43,51,54,.15); --hair:rgba(43,51,54,.10); /* 押せる部品の輪郭用。区切り線より濃くする。 枠線だけで形が分かるボタンは、輪郭に3:1以上のコントラストが要る。 .42 では 2.31:1 で足りなかったので .58 にした（実測 3.48:1） */ --line-ui:rgba(43,51,54,.58); /* ── 伝統色を3色。場面とプランに1色ずつ割り当てる ── 藍＝見つけてもらう／整備　茜＝選んでもらう／集客　常磐＝また来てもらう 紫＝ブランド（冠位十二階で最上位の色。格の表現として選んだ） */ --ai:#1F5670; /* 藍 */ --ai-deep:#17435A; --ai-tint:#E7EEF1; --akane:#A8443A; /* 茜 */ --akane-tint:#F7EBE8; --tokiwa:#2C6B52; /* 常磐 */ --tokiwa-tint:#E6EFE9; --murasaki:#63497A; /* 古代紫 */ --murasaki-tint:#F0EAF4; /* 「いま（困りごと）」を表す色。中身は茜だが、役割が違うので別名にしておく。 あとで困りごとの赤だけ変えたくなったとき、他の茜を巻き込まないため。 実測：茜×生成り 5.42:1／茜×茜tint 5.07:1（どちらも4.5:1以上で合格） */ --now:var(--akane); --now-tint:var(--akane-tint); --now-line:rgba(168,68,58,.30); /* ── 濃紺と金 ── 金は「濃い面の上でだけ」使う。生成りの上では薄すぎて読めないため （金×生成り＝2.2:1で不合格、金×濃紺＝6.8:1で合格。実測値） */ --navy:#16202E; /* 濃紺。お約束セクションの地 */ --gold:#C4A265; /* 金。番号・おすすめの印にだけ使う */ --ln:#06C755; /* LINEブランドグリーン：LINEカード内のみで使用 */ --mincho:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif; --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",system-ui,sans-serif; --latin:"Georgia","Times New Roman",serif; } *{margin:0;padding:0;box-sizing:border-box} /* ページ内リンクで飛んだとき、固定ヘッダーの下に見出しが隠れないようにする。 スマホはヘッダーが2段（約106px）になるので、そのぶん余白を多く取る */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:118px} /* 画面が狭いとメニューが2行になり、ヘッダーが154pxまで伸びる。 そのぶん余白を増やさないと、リンクで飛んだ先の見出しがヘッダーに隠れる */ @media(max-width:359px){html{scroll-padding-top:166px}} @media(min-width:900px){html{scroll-padding-top:80px}} body{ font-family:var(--gothic); background:var(--paper);color:var(--ink); font-size:19.5px;line-height:1.88;letter-spacing:.015em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} :focus-visible{outline:2.5px solid var(--ai);outline-offset:3px;border-radius:2px} /* 濃紺の面の上では、藍の枠は地の色に沈んで見えない。金に切り替える （金×濃紺＝6.8:1。キーボードで操作する人が、いまどこにいるか分かるように） */ .promise :focus-visible{outline-color:var(--gold)} ::selection{background:var(--ai);color:#fff} .wrap{max-width:1080px;margin:0 auto;padding:0 22px} @media(min-width:820px){.wrap{padding:0 40px}} .mincho{font-family:var(--mincho)} h1,h2,h3{font-family:var(--mincho);font-weight:600;line-height:1.42;letter-spacing:.01em} /* ラベル。狭い画面では折り返しを許して、語の途中で切れないようにする */ .eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:14px;font-weight:700;letter-spacing:.18em;color:var(--sub)} .eyebrow>span{white-space:nowrap} .eyebrow .en{font-family:var(--latin);font-style:italic;letter-spacing:.06em;color:var(--ai);font-weight:400;font-size:15px} .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--ai);display:inline-block;flex-shrink:0} @media(max-width:560px){.eyebrow{font-size:13px;letter-spacing:.14em}} /* ── 章のしるし（.chap）。トップの本題を3つに区切る印。 01 なぜ、いま必要か → 02 頼むと、どうなるか → 03 つどえを選ぶ理由。 この3つは「読む人が順番に浮かべる問い」なので、番号の順序が情報そのもの。 料金とご相談は物語ではなく手続きなので、小さい .eyebrow のまま残す。 大小の差があること自体が「ここが本題です」という合図になる。 番号は aria-hidden にしてある。読み上げでは章が出てくる順番そのものが 順序を伝えるので、「ゼロイチ」と読み上げても情報は増えないため （.sc-no・.ph-n と同じ考え方）。 */ .chap{display:grid;grid-template-columns:auto 1fr;align-items:center; gap:0 clamp(15px,2.6vw,22px); margin-bottom:clamp(10px,1.6vw,16px); padding-bottom:clamp(15px,2.2vw,19px); border-bottom:1px solid var(--line)} .chap-n{font-family:var(--latin);font-style:italic;font-weight:400; font-size:clamp(38px,6.4vw,54px);line-height:.92; letter-spacing:.02em;color:var(--ai)} .chap-b{display:grid;gap:2px;min-width:0} .chap-t{font-family:var(--mincho);font-weight:600; font-size:clamp(19.5px,3.1vw,24px);line-height:1.45;letter-spacing:.05em} .chap-en{font-family:var(--latin);font-style:italic;font-size:15px; letter-spacing:.08em;line-height:1.3;color:var(--ai)} /* 章と章のつなぎ目に置く丸。「まだ下に続きます」という合図。 意味は章の番号と見出しの言葉が持っているので、この形は飾り扱いでよい。 丸の地色を次の章の色（生成り）にしてあるので、濃紺の章の下では 次の章に穴が開いたように見え、境目をまたいで話が続くことが伝わる */ .to-next{position:relative} .to-next::before{content:"";position:absolute;z-index:2; left:50%;bottom:0;width:46px;height:46px; transform:translate(-50%,50%); border-radius:50%;background:var(--paper); border:1px solid var(--line)} .to-next::after{content:"";position:absolute;z-index:3; left:50%;bottom:0;width:11px;height:11px; transform:translate(-50%,calc(50% - 3px)) rotate(45deg); border-right:1.7px solid var(--ai); border-bottom:1.7px solid var(--ai)} /* 強調は色だけで行う（筆風アンダーラインは 2026-07-31 に削除） */ .em{color:var(--ai)} /* スマホでだけ効く改行。見出しの最後の1〜2文字だけが 次の行に落ちる（「す。」だけの行ができる）のを防ぐために使う */ @media(min-width:560px){.br-sp{display:none}} .btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;font-family:var(--gothic);font-weight:700;font-size:17.5px;letter-spacing:.04em;min-height:58px;padding:16px 32px;border-radius:4px;transition:transform .18s ease,background .2s,color .2s,box-shadow .2s} .btn.primary{background:var(--ai);color:#fff} .btn.primary:hover{background:var(--ai-deep);transform:translateY(-1px);box-shadow:0 6px 20px rgba(31,86,112,.22)} .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-ui)} .btn.ghost:hover{border-color:var(--ink);transform:translateY(-1px)} .btn .arw{font-size:18px} /* スマホではボタンを縦に積んで幅いっぱいに。 指で押せる面が広がり、2つ並びの端が揃わない見た目も防ぐ（2026-08-01） */ @media(max-width:560px){ .cta-row{flex-direction:column;align-items:stretch} .cta-row .btn{width:100%} } .skip{position:fixed;top:-100px;left:16px;z-index:300;background:var(--ink);color:#fff;padding:12px 20px;font-weight:700;border-radius:4px;transition:top .2s} .skip:focus{top:12px} /* ヘッダー メニューの