/* ============================================================ 無双シリーズ共通の見た目（1枚で全製品を揃える）考え方は総合LP(/zone)と同じ3つ：紺 = 構造（見出し・枠・ヘッダー）… 押せない朱 = 押せるものだけ（ボタン・リンク）丸 = 押せる（ボタンは必ず丸い） ★設計の要点（失敗して学んだこと2つ）★ (1) 要素を直接塗らない「h2は紺」「カードは生成り」と書いたら、製品内の暗い区画に紺文字が乗って消えた。ここでやってよいのは ①製品の変数の差し替え ②明暗に無関係なもの（書体・角丸・ボタンの形）だけ。明暗の判断は製品側に任せる。 (2) 変数名は必ず --musou- で始める最初 --card / --paper / --kon という短い名前で定義したところ、ショート動画無双が自前で持っていた --card(暗い紺 #161d31) を上書きしてしまい、暗い画面の中でカードだけ生成り色になって文字が消えた（7箇所）。 **短い名前は製品と衝突する。** 新しく足す変数も必ず --musou- を付けること。使い方: 各製品の直前で読み込む。 ============================================================ */ /* ---------- 1. ブランドの色（すべて --musou- 始まり） ---------- */ :root { --musou-paper: #f6efdc; /* 生成りの紙 */ --musou-paper2: #efe6cd; --musou-card: #fffdf4; /* 少し明るい紙 = カード */ --musou-kon: #22456e; /* 紺（構造） */ --musou-kon2: #16304f; --musou-shu: #cf3a2b; /* 朱（押せるものだけ） */ --musou-shu2: #a92c20; --musou-kin: #b8860b; /* 金（控えめな装飾） */ --musou-ink: #23303f; --musou-sub: #5d6b7a; --musou-line: #ded4bc; --tag: var(--musou-kon); /* 製品ごとの目印。下で製品別に上書き */ } /* ---------- 2. 製品が使っている変数に流し込む ---------- これだけで配色がブランドに寄る。要素は触らないので暗い区画も壊れない。 ★ :root ではなく body に付けているのは、「暗い画面が前提の製品」をで除外するため。それらは本文の色が薄い(--ink:#eef1ff 等)ので、背景だけ生成りにすると白地に白文字になって読めなくなる。書体とボタンだけ揃える。判定は「--ink の明るさが0.5超」。今のところ素性無双とショート動画の2つ。 */ html:not([data-musou-dark]) body:not([data-musou-dark]) { --bg: var(--musou-paper); --panel: var(--musou-card); --card: var(--musou-card); --paper: var(--musou-paper); --ink: var(--musou-ink); --sub: var(--musou-sub); --line: var(--musou-line); /* ★--accent は入れない★ 製品によって意味が違う。「差し色」として使う製品(補助金・融資・税金・人間)と、「薄い面の背景」として使う製品(note・店舗・マップ・インタビュー)がある。一律に紺(暗い)を入れると後者の面が暗転し、その上の暗い文字が読めなくなる。実際 note無双の左パネルで文字が読めなくなった(上野さん指摘)。差し色をブランドに寄せる必要がある製品は、その製品側で直接直している。 */ --accent-soft: #eae3ce; --navy: var(--musou-kon); --blue: var(--musou-kon); --blue2: var(--musou-kon2); --lp-paper: var(--musou-paper); --lp-ink: var(--musou-kon2); --lp-ink2: var(--musou-kon); --lp-brush: var(--musou-shu); --lp-gold: var(--musou-kin); } /* ---------- 2-2. 背景を直書きしている製品を揃える ---------- 多くの製品は body{background:var(--bg)} なので上の変数差し替えだけで揃うが、 note無双・店舗無双・マップ無双・金継ぎ無双は**背景を直接書いている**ため効かず、 1つだけ緑〜紫のグラデーションのまま浮いていた(上野さん指摘)。ここだけは要素を塗る。★暗い画面の製品(data-musou-dark)は除外しているので安全。 ※文字色は触らない。これらはもともと明るい背景に濃い文字の製品なので、背景を生成りにしても読みやすさは変わらない(カードは白のまま)。 */ html:not([data-musou-dark]) body[data-musou="note"], html:not([data-musou-dark]) body[data-musou="tenpo"], html:not([data-musou-dark]) body[data-musou="map"], html:not([data-musou-dark]) body[data-musou="meguri"] { background: var(--musou-paper); background-image: none; } /* ---------- 2-3. 製品名の「無双」を金にする ---------- 「note無双」「店舗無双」のように前半と後半が同じ黒だと、どこまでが製品名か分からず読みにくい(上野さん指摘)。商談無双だけ以前から金で分けていたので、それを全製品の決まりにする。前半＝そのまま(紺や黒) / 「無双」＝金。暗い画面では金が沈むので明るい金にする。 */ .musou-mu { color: var(--musou-kin); font-weight: inherit; } html[data-musou-dark] .musou-mu, body[data-musou-dark] .musou-mu { color: #e3b341; } /* ---------- 3. 書体（明暗に関係しないので安全） ---------- */ body { font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif; } h1, h2, h3 { font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: .02em; /* ★色は指定しない。暗い区画の見出しを潰さないため */ } /* ---------- 4. 押せるもの＝丸くて朱 ---------- */ button, .btn, input[type="submit"], input[type="button"], a.btn { font-family: "Zen Maru Gothic", "Noto Sans JP", system-ui, sans-serif; border-radius: 999px; cursor: pointer; } /* 主役のボタンだけ朱にする。すべての button を朱にすると閉じる[×]や小さな補助ボタンまで赤くなり「押させたい所」が分からなくなる。 */ .btn-primary, .btn-cta, button.primary, input[type="submit"] { background: var(--musou-shu); color: #fff8ec; border: none; } .btn-primary:hover, .btn-cta:hover, button.primary:hover, input[type="submit"]:hover { background: var(--musou-shu2); } /* 2番目の選択肢は紙地に紺の線（明るい画面の製品だけ） */ body:not([data-musou-dark]) .btn-ghost, body:not([data-musou-dark]) .btn-sub, body:not([data-musou-dark]) .btn-secondary { background: var(--musou-card); color: var(--musou-kon); border: 1px solid var(--musou-kon); } /* まるいものは押せる、を守る */ .badge, .chip, .pill, .tag { border-radius: 999px; } /* ---------- 5. 入力欄 ---------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea { border-radius: 10px; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--musou-shu); outline-offset: 1px; } /* ---------- 6. 面の角丸だけ揃える（色は触らない） ---------- */ .card, .panel, .box { border-radius: 12px; } /* ---------- 7. 製品ごとの目印 ---------- 全体を揃えると「いま何の製品を見ているか」が分かりにくくなる。そこで画面のいちばん上に4pxの帯を出して、色で製品を見分けられるようにする。面ではなく線なので、文字の読みやすさには影響しない。製品側はを書くだけ。色はここで一元管理する。 */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--tag); z-index: 9999; pointer-events: none; } body[data-musou="kaitaku"] { --tag: #1e6fd9; } /* 開拓無双 */ body[data-musou="syoudan"] { --tag: #cf3a2b; } /* 商談無双 */ body[data-musou="hojokin"] { --tag: #0e8a5f; } /* 補助金無双 */ body[data-musou="yushi"] { --tag: #1d62d1; } /* 融資無双 */ body[data-musou="zeikin"] { --tag: #2456b8; } /* 税金無双 */ body[data-musou="ningen"] { --tag: #8b5cf6; } /* 人間無双 */ body[data-musou="note"] { --tag: #2cb696; } /* note無双 */ body[data-musou="tenpo"] { --tag: #e8820c; } /* 店舗無双 */ body[data-musou="map"] { --tag: #d94f2b; } /* マップ無双 */ body[data-musou="ad"] { --tag: #4a56e2; } /* 広告無双 */ body[data-musou="sujou"] { --tag: #7a5af8; } /* 素性無双 */ body[data-musou="meguri"] { --tag: #c9803a; } /* 金継ぎ無双 */ body[data-musou="short"] { --tag: #ff2d55; } /* ショート動画無双 */ body[data-musou="interview"] { --tag: #6b7280; } /* インタビュー数珠つなぎ */ body[data-musou="ec"] { --tag: #b8860b; } /* EC/AIO/MEO診断 */ body[data-musou="brandpulse"] { --tag: #4ecdaf; } /* BrandPulse */ body[data-musou="teleapo"] { --tag: #0f9b8e; } /* テレアポ無双 */ body[data-musou="news"] { --tag: #ff9f2e; } /* ニュース無双 */ .musou-tag, .product-tag { border-left: 4px solid var(--tag); padding-left: 8px; } /* ---------- 8. スマホ ---------- */ @media (max-width: 640px) { .btn-primary, .btn-cta { width: 100%; } .btn-inline, .btn-sm, .kcopy { width: auto; } } /* ===== かんたん表示 ===== 読み物は画面の一番下の「くわしく」にまとめて退ける（musou_switcher.js が移す）。閉じているのが普通の状態。開きたい人だけ開く。 */ .musou-more{max-width:1080px;margin:26px auto 8px;padding:0 16px} .musou-more>summary{cursor:pointer;list-style:none;display:inline-block; font-size:14px;color:#5d6b7a;border:1px solid #d8dfe8;background:#fff; border-radius:999px;padding:10px 18px;min-height:44px;line-height:24px} .musou-more>summary::-webkit-details-marker{display:none} .musou-more>summary:hover{background:#f4f7fb} .musou-more[open]>summary{margin-bottom:10px} .musou-more>section,.musou-more>.card,.musou-more>.sec{opacity:.92} /* ===== 押しやすくする（小学生でも触れる大きさに） ===== ★44px★ は指で押せる最小の目安。これより小さいと押し間違える。入力欄は16px以上（iOSは16px未満だと触った瞬間に画面が勝手に拡大する）。 */ /* ★文字サイズは指定しない★ 共通CSSは製品のCSSより後に読まれるので、ここで font-size を書くと製品が決めた大きさを縮めてしまう（実際にLPで起きた）。押しやすさは「高さ」だけで足りる。 */ button,.btn,a.btn,[role=button],input[type=submit],input[type=button]{min-height:44px} .btn-cta,.btn.big{min-height:52px} /* 16pxは好みではなく不具合防止（iOSは16px未満だと触った瞬間に拡大して押せなくなる） */ input,select,textarea{min-height:44px;font-size:16px} input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px} label{cursor:pointer} summary{min-height:34px} @media(max-width:560px){ .btn-cta,.btn.big{width:100%} .musou-more{margin-top:20px} }