/* =========================================================== 仕事タイプ診断（2026-08-09 全面リニューアル） 参考にした16タイプ診断の結果画面の作りを土台にしている。 ・タイプの色で塗った全面ヒーロー（下端は曲線） ・上に貼りつくアクションバー ・番号つきの節 ・つまみ付きのスライダーで軸を見せる ・見出し＋一言の二段リスト（強み・落とし穴） ・続きは登録で解除するカード 【色の決まり】 タイプの色は4グループ（PI/PS/TI/TS）で、`--g1` `--g2` `--gc` `--gd` `--gt` を JSがカードに流し込む。**CSSにタイプ名を書かない**（8タイプぶんの分岐を CSSに持つと、文言と色の対応が2か所に散る）。 =========================================================== */ :root { --dg-ink: #16202e; --dg-ink-2: #55637a; --dg-line: #e8edf5; --dg-bg: #f5f7fb; --dg-radius: 20px; --dg-shadow: 0 2px 4px rgba(20, 32, 51, .04), 0 12px 32px rgba(20, 32, 51, .07); } /* ===== 導入（診断をはじめる前） ===== */ .dg-intro { position: relative; overflow: hidden; padding: clamp(48px, 12vw, 96px) 0 clamp(56px, 14vw, 104px); background: radial-gradient(120% 90% at 15% 0%, rgba(59, 130, 246, .30), transparent 60%), radial-gradient(120% 90% at 90% 20%, rgba(139, 92, 246, .28), transparent 60%), linear-gradient(160deg, #0b1220, #16233b 55%, #101a2c); color: #fff; text-align: center; } /* 細かい格子。のっぺりした単色を避けるためだけの装飾なので、薄く */ .dg-intro::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); pointer-events: none; } .dg-intro > * { position: relative; z-index: 1; } .dg-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); font-size: clamp(12px, 3vw, 13px); font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .92); } .dg-eyebrow .icon { width: 15px; height: 15px; } .dg-title { margin: 20px 0 14px; font-size: clamp(30px, 8.6vw, 62px); font-weight: 900; line-height: 1.16; letter-spacing: -.02em; } .dg-title em { font-style: normal; background: linear-gradient(96deg, #7dd3fc, #c4b5fd 55%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; } .dg-lead { margin: 0 auto 30px; max-width: 34em; /* 下限 13→15px、色 .74→.88（2026-09-17）。濃紺の上の .74 は薄く、 3行に折り返す説明文としては読みづらかった */ font-size: clamp(15px, 3.7vw, 17px); line-height: 1.95; color: rgba(255, 255, 255, .88); } /* 【2026-09-17】いちど左そろえにしたが戻した。 ここは濃紺いっぱいの「表紙」で、しるし・見出し・説明・8つの札まで 中央に積んで1枚の絵にしてある。ここだけ本文を左に寄せると絵が崩れる。 読み物のページ（トップ・一覧・ヘルプ）は左、表紙は中央、と使い分ける。 */ .dg-lead strong { color: #fff; font-weight: 700; } /* 8タイプの札。イラストが用意できるまで、文字だけで見せる */ .dg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin: 0 auto 32px; } .dg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); font-size: clamp(12px, 3vw, 13px); font-weight: 700; color: rgba(255, 255, 255, .88); animation: dg-chip-in .5s cubic-bezier(.2, .8, .2, 1) both; } .dg-chip b { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .55); } @keyframes dg-chip-in { from { opacity: 0; transform: translateY(8px); } } /* ---- 2つの診断を見比べる ---- かかる時間と、わかること。**この2つだけ**を並べる。 ここで中身を語り出すと、受ける前に読む量が増えて始めてもらえない。 **登録の話はここに書かない**（受ける前に出すと身構えられる）。 受けられるほう（かんたん）を明るく、まだのほう（くわしい）を沈めて、 いま押せるのがどちらかを色でも分かるようにしている。 */ .dg-modes { display: grid; gap: 12px; max-width: 720px; margin: 0 auto 22px; text-align: left; } @media (min-width: 620px) { .dg-modes { grid-template-columns: 1fr 1fr; align-items: stretch; } } .dg-mode { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 4vw, 22px); border-radius: 18px; } .dg-mode-now { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(6px); } .dg-mode-next { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); } .dg-mode-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; } .dg-mode-name { font-size: clamp(17px, 4.8vw, 20px); font-weight: 900; letter-spacing: -.01em; color: #fff; } .dg-mode-next .dg-mode-name { color: rgba(255, 255, 255, .82); } .dg-mode-time { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; } .dg-mode-what { margin: 0; font-size: clamp(13px, 3.6vw, 14.5px); line-height: 1.85; } .dg-mode-what b { color: #fff; font-weight: 700; } .dg-mode-soon { margin-top: auto; padding-top: 8px; /* 12→13px、色 .55→.72（2026-09-17）。文になっているうえ濃紺の上の .55 は ほとんど読めなかった。「いつ受けられるのか」を伝える大事な一行 */ font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .72); } .dg-mode-now .dg-start { margin-top: auto; width: 100%; } .dg-start { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 34px; border: none; border-radius: 999px; background: #fff; color: #0b1220; cursor: pointer; font-size: clamp(14px, 4vw, 17px); font-weight: 900; letter-spacing: .01em; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s; } .dg-start:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 0, 0, .38); } .dg-start:active { transform: translateY(0); } .dg-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; margin: 20px 0 0; font-size: clamp(12px, 3vw, 13px); color: rgba(255, 255, 255, .58); } .dg-meta span { display: inline-flex; align-items: center; gap: 6px; } .dg-meta svg { width: 14px; height: 14px; opacity: .8; } /* ===== 設問 ===== */ .dg-quiz-wrap { min-height: 78vh; padding: 0 0 60px; background: radial-gradient(80% 50% at 50% 0%, rgba(37, 99, 235, .07), transparent 70%), var(--dg-bg); } /* 進捗。**上に貼りつける。**何問目かが常に見えていないと、 4段階の強制選択は「あとどれくらい？」で離脱しやすい */ /* ヘッダーも貼りつくので、その下に置く。高さは画面幅で変わるため JS が測る */ .dg-progress { position: sticky; top: var(--dg-head, 0px); z-index: 9; padding: 14px 0 12px; background: rgba(245, 247, 251, .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--dg-line); } .dg-progress-inner { max-width: 640px; margin: 0 auto; padding: 0 16px; } .dg-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .dg-progress-step { font-size: 13px; font-weight: 900; color: var(--dg-ink); } .dg-progress-step b { font-size: 19px; } .dg-progress-step i { font-style: normal; color: var(--dg-ink-2); font-weight: 700; } .dg-progress-pct { font-size: 12px; font-weight: 700; color: var(--dg-ink-2); } .dg-progress-bar { height: 7px; border-radius: 999px; background: #dfe6f1; overflow: hidden; } .dg-progress-fill { height: 100%; border-radius: 999px; width: 0; background: linear-gradient(90deg, #3b82f6, #8b5cf6); transition: width .45s cubic-bezier(.2, .8, .2, 1); } .dg-qstage { max-width: 640px; margin: 0 auto; padding: 26px 16px 40px; display: grid; gap: 16px; } /* ---- 設問1つぶん ---- 縦に並べてスクロールで進む（1問ずつ差し替える形はやめた）。 **答えた問題は薄くする。** どこまで済んだかが、読まなくても分かる。 */ .dg-q { background: #fff; border: 1px solid var(--dg-line); border-radius: 20px; padding: clamp(18px, 4.6vw, 26px); box-shadow: 0 1px 2px rgba(20, 32, 51, .04), 0 8px 24px rgba(20, 32, 51, .05); animation: dg-q-in .4s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .35s ease, filter .35s ease; } .dg-q[hidden] { display: none; } .dg-q.is-done { opacity: .48; } .dg-q.is-done:hover, .dg-q.is-done:focus-within { opacity: 1; } @keyframes dg-q-in { from { opacity: 0; transform: translateY(14px); } } .dg-q-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; } .dg-q-no { width: 30px; height: 30px; flex-shrink: 0; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #eef3fb; color: #3b5b8c; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; } .dg-q.is-done .dg-q-no { background: #dcfce7; color: #15803d; } .dg-q-text { margin: 0; flex: 1 1 auto; font-size: clamp(16px, 4.4vw, 20px); font-weight: 900; line-height: 1.6; letter-spacing: -.01em; color: var(--dg-ink); word-break: auto-phrase; } .dg-q-lead { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #eff6ff; color: #1d4ed8; font-size: 13px; font-weight: 700; line-height: 1.7; /* 12〜13px→13px 固定（2026-09-15 スマホの可読性） */ } /* 2つの選択肢のあいだに置く仕切り。**別々のことを聞かれているのではなく、 どちらかを選ぶのだ**と、読む前に分かるようにする */ .dg-or { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; color: #93a0b5; letter-spacing: .04em; } .dg-or::before, .dg-or::after { content: ; flex: 1 1 auto; height: 1px; background: var(--dg-line); } /* ---- 選択肢 ---- **どちらか一方を選ぶ**ことと、**強さは2段階**であることが、 読まなくても分かる形にしてある。 上下はJSがランダムに入れ替えるので、色は「極」ではなく「上か下か」に付く （色で極が分かると、途中で気づいた人の答えが歪む）。 */ .dg-opts { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .dg-opt { border: 1.5px solid var(--dg-line); border-radius: 16px; background: #fff; padding: 16px; transition: border-color .2s, box-shadow .2s, background .2s; } .dg-opt:has(.is-picked) { border-color: var(--oc); background: var(--ol); box-shadow: 0 4px 18px color-mix(in srgb, var(--oc) 16%, transparent); } .dg-opt-1 { --oc: #2563eb; --ol: #eff6ff; } .dg-opt-2 { --oc: #ea580c; --ol: #fff7ed; } .dg-opt-text { margin: 0 0 12px; padding-left: 26px; position: relative; font-size: clamp(14.5px, 4vw, 16.5px); font-weight: 700; line-height: 1.7; color: var(--dg-ink); word-break: auto-phrase; } /* 文の頭に印を置く。**2つの文が並んでいる**ことが一目で分かる */ .dg-opt-text::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--oc) 22%, #fff); border: 2px solid var(--oc); } .dg-opt:has(.is-picked) .dg-opt-text::before { background: var(--oc); } .dg-opt-btns { display: flex; gap: 8px; padding-left: 26px; } .dg-opt-btn { flex: 1 1 0; min-height: 48px; padding: 8px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 2px solid color-mix(in srgb, var(--oc) 30%, #fff); border-radius: 999px; background: #fff; color: var(--oc); cursor: pointer; font: inherit; font-size: clamp(13px, 3.3vw, 13.5px); font-weight: 800; /* 下限 12→13px（2026-09-15） */ white-space: nowrap; transition: background .16s, border-color .16s, color .16s, transform .12s; } .dg-opt-btn:hover { background: var(--ol); border-color: var(--oc); } .dg-opt-btn:active { transform: scale(.97); } .dg-opt-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--oc) 45%, #fff); outline-offset: 2px; } /* 強さの丸。**「かなり近い」だけ大きい。** 同じ大きさで並べると、どちらが強いのかが文字を読むまで分からない */ .dg-opt-dot { width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid currentColor; flex-shrink: 0; } .dg-opt-btn:last-child .dg-opt-dot { width: 16px; height: 16px; } .dg-opt-btn.is-picked { background: var(--oc); border-color: var(--oc); color: #fff; animation: dg-pick .3s cubic-bezier(.2, .8, .2, 1); } .dg-opt-btn.is-picked .dg-opt-dot { background: #fff; border-color: #fff; } @keyframes dg-pick { 45% { transform: scale(1.06); } } @media (max-width: 400px) { .dg-opt { padding: 14px; } .dg-opt-text { padding-left: 22px; } .dg-opt-btns { padding-left: 0; gap: 6px; } } /* ===== 結果 ===== */ .dg-result { display: none; } .dg-result.is-on { display: block; } /* --- 右下に浮かぶボタン（2026-08-10）--- 上に貼りつける形はやめた。ヘッダーと二重に貼りつき、 **結果の見出しが隠れて**いたうえ、いちばん読ませたいところに帯がかぶっていた。 「もう一度診断する」はここに置かない（押す機会がいちばん少ないものが、 常に見えている必要はない）。いちばん下に薄く置いてある。 */ .dg-fabs { position: fixed; right: 14px; bottom: 14px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .dg-fabs[hidden] { display: none; } .dg-fab { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--dg-line); border-radius: 999px; background: #fff; color: var(--gc, #2563eb); cursor: pointer; font: inherit; font-size: 13px; font-weight: 900; text-decoration: none; box-shadow: 0 4px 10px rgba(20, 32, 51, .1), 0 12px 28px rgba(20, 32, 51, .16); transition: transform .16s, box-shadow .16s; } .dg-fab svg { width: 21px; height: 21px; flex-shrink: 0; } .dg-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(20, 32, 51, .12), 0 18px 36px rgba(20, 32, 51, .2); } .dg-fab:active { transform: none; } .dg-fab:focus-visible { outline: 3px solid var(--gc, #2563eb); outline-offset: 3px; } /* 保存は文字つきの錠剤。**いちばん押してほしいので、色を持たせる** */ .dg-fab-main { width: auto; min-width: 54px; height: 54px; padding: 0 20px; border: none; color: #fff; background: linear-gradient(115deg, var(--g1, #3b82f6), var(--g2, #8b5cf6)); box-shadow: 0 6px 14px color-mix(in srgb, var(--g1, #3b82f6) 30%, transparent), 0 14px 32px color-mix(in srgb, var(--g1, #3b82f6) 26%, transparent); } .dg-fab-main svg { width: 17px; height: 17px; } /* 保存済みの人には、押す必要が無いことが分かる見た目にする */ .dg-fab-main.is-done { background: #fff; color: #047857; border: 1px solid #a7f3d0; box-shadow: 0 4px 10px rgba(20, 32, 51, .1), 0 12px 28px rgba(20, 32, 51, .14); } /* 浮かぶボタンが最後の行にかぶらないよう、下に場所を空ける */ .dg-match { padding-bottom: 110px; } @media (max-width: 380px) { .dg-fab { width: 48px; height: 48px; } .dg-fab-main { height: 48px; padding: 0 16px; font-size: 12.5px; } } /* PCではサイドバーが保存ボタンを持つので、浮かぶボタンは出さない（二重になる） */ @media (min-width: 1024px) { .dg-fabs { display: none; } } /* --- ヒーロー（2026-08-18 Canvaデザイン準拠に刷新）--- オーナー制作のCanva（EFFORT ページ1）を実測して再現した。 ・タイプ色のベタ塗りの帯が上部に走る（グラデではなくフラット。帯色は --band） ・帯の下端は**右下がりの斜め**（実測：左63.4%→右91%＝約5.4度） ・左にキャラクター。斜めの境界をまたいで白地に立つ ・中央〜やや左寄りに「あなたの仕事タイプ」＋カタカナのタイプ名（白） ・右に巨大なローマ字3文字。**帯と同じclip-pathの中に置く**ので、 斜めの切り口で文字がそのまま切れる（Canvaと同じ見え方） ・3文字の意味・グループ・タグラインは帯の下の白地へ 【動き（オーナー承認済みの設計）】 帯が左からサッと走る → キャラがポンと弾んで登場 → ラベル・タイプ名が浮き上がる → 巨大3文字が右から流れ込む → 白地の情報が続く */ .dg-hero { position: relative; padding: 0; /* **純白にすること（#f5f7fb にしない）。** 巨大3文字は白で、斜めの下では 背景と同化して見えなくなる設計（オーナー指定）。下地が少しでも 灰色がかっていると文字が浮いて見える（2026-08-18 指摘） */ background: #fff; } .dg-hero2-frame { /* Canvaの実測比率：キャンバス1366×768のうち、帯とキャラが載る上部470pxぶん */ position: relative; overflow: hidden; height: clamp(250px, 68vw, 340px); } .dg-hero2-band { position: absolute; inset: 0; z-index: 0; background: var(--band, var(--gc)); /* 右下がりの斜め。スマホはPCより角度を強めて（オーナー了承）帯の懐を深くし、 PCと同じ「文字の上7割が帯・下3割が白に沈む」構図を作る。 2026-08-20 オーナー指示で少し緩めた（左端52%→58%。約15°→約13°）。 右端92%は動かさない：下げると3文字の帯掛かりが減って、また見えなくなる */ clip-path: polygon(0 0, 100% 0, 100% 92%, 0 58%); animation: dgh-band .55s cubic-bezier(.22, .7, .3, 1) both; } /* 巨大な3文字。白・極太・右端で少し切る（Canvaどおり）。 斜めから下は純白の下地と同化して消える */ .dg-hero2-code { /* サイズはvw可変。スマホは文字が画面幅の半分以上を占めるため、 斜めの高低差で**先頭の文字だけ深く削られて読めなくなる**。 文字を高めに置き（bottom 15%）字間も締めて、先頭の文字でも 7割以上が帯に載るようにしてある（下の白への沈みはP/S側の裾で出る） */ position: absolute; z-index: 1; right: -1.5vw; bottom: 15%; font-size: clamp(96px, 26vw, 128px); font-weight: 900; line-height: 1; color: #fff; white-space: nowrap; animation: dgh-code .6s .5s cubic-bezier(.2, .75, .25, 1) both; } /* 1文字＝固定幅のマス。グリフ幅の差（Iが細い等）でタイプごとに 全体の大きさ・位置が変わって見えないようにする。 スマホは字間を締めて（.62em）横の広がり＝斜めの高低差の影響を抑える */ .dg-hero2-code i { display: inline-block; width: .62em; font-style: normal; text-align: center; } .dg-hero2-char { /* 高さ基準で置く（幅基準だと縦長のキャラの頭がフレームからはみ出す）。 Canva実測：キャラの高さ＝フレームの74.5%・足元は下から8% */ position: absolute; left: 3%; bottom: 4%; z-index: 2; height: 58%; transform-origin: 50% 100%; animation: dgh-pop .55s .3s cubic-bezier(.34, 1.45, .5, 1) both; } .dg-hero2-char img { display: block; height: 100%; width: auto; /* 影は付けない（オーナー指摘：足元に影が入って白と同化しきれていなかった。 Canvaの原案もフラットで影なし） */ } /* 画像が無いときの保険（白いシルエット）。通常は出ない */ .dg-hero2-char.is-ph svg { display: block; width: 100%; height: auto; opacity: .8; } .dg-hero2-txt { /* ど真ん中に置く（オーナー指摘：センターに来ていなかった） */ position: absolute; z-index: 3; text-align: center; top: clamp(14px, 5vw, 34px); left: 0; right: 0; color: #fff; } .dg-hero2-label { margin: 0 0 clamp(2px, 1vw, 8px); font-size: clamp(12px, 3.4vw, 20px); font-weight: 800; letter-spacing: .08em; animation: dgh-up .45s .55s ease-out both; } .dg-hero2-name { margin: 0; font-size: clamp(30px, 8.6vw, 62px); font-weight: 900; line-height: 1.05; letter-spacing: .02em; animation: dgh-up .5s .65s cubic-bezier(.2, .8, .2, 1) both; } /* 帯の下の白地：3文字の意味 → グループ → タグライン （2026-08-19 刷新。細枠のバーは安っぽかったので、ヒーローと同じ語彙＝ 斜めに切ったタイル・帯色グラデ・極太文字で作り直した） */ .dg-hero2-sub { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; padding: clamp(6px, 2vw, 12px) 16px clamp(22px, 4.5vw, 32px); text-align: center; } .dg-hero2-sub > * { animation: dgh-up .5s both; } .dg-hero2-sub > .dg-code-tiles { animation-delay: .85s; } .dg-hero2-sub > .dg-group-tag { animation-delay: .95s; } .dg-hero2-sub > .dg-hero-tagline { animation-delay: 1.02s; } /* 3文字＝斜めのタイル（ヒーローの帯・節番号と同じ角度の語彙）。 下に短い言い換えを添える（コードだけでは意味が繋がらない） */ .dg-code-tiles { display: flex; gap: clamp(10px, 3vw, 16px); margin: 4px 0 0; } .dg-code-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; } .dg-code-tile { display: flex; align-items: center; justify-content: center; width: clamp(66px, 19vw, 86px); height: clamp(54px, 15vw, 68px); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); background: linear-gradient(115deg, var(--band, var(--gc)), var(--g2, var(--band))); color: #fff; font-size: clamp(27px, 8vw, 36px); font-weight: 900; line-height: 1; } .dg-code-cell i { font-style: normal; font-size: clamp(11px, 3.1vw, 12.5px); font-weight: 800; color: #5b6b7a; white-space: nowrap; } /* グループ札。斜めに切った淡色の札に、濃色の太字 */ .dg-group-tag { margin: 16px 0 0; padding: 6px 18px; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); background: color-mix(in srgb, var(--band, var(--gc)) 12%, #fff); } .dg-group-tag span { font-size: clamp(11.5px, 3.2vw, 13px); font-weight: 800; letter-spacing: .04em; color: color-mix(in srgb, var(--band, var(--gc)) 74%, #1f2430); } /* タグライン。帯色の鍵括弧で挟んで「そのタイプの一言」らしく見せる */ .dg-hero-tagline { position: relative; margin: 14px auto 0; max-width: 27em; font-size: clamp(15px, 4.1vw, 19px); font-weight: 800; line-height: 1.9; color: #26303c; } .dg-hero-tagline::before, .dg-hero-tagline::after { font-weight: 900; color: var(--band, var(--gc)); } .dg-hero-tagline::before { content: "「"; margin-right: 1px; } .dg-hero-tagline::after { content: "」"; margin-left: 1px; } @keyframes dgh-band { from { transform: translate3d(-102%, 0, 0); } } @keyframes dgh-code { from { opacity: 0; transform: translate3d(10vw, 0, 0); } } @keyframes dgh-pop { 0% { opacity: 0; transform: scale(.5) translateY(30px); } 60% { opacity: 1; transform: scale(1.07) translateY(-6px); } 100% { opacity: 1; transform: none; } } @keyframes dgh-up { from { opacity: 0; transform: translateY(14px); } } @media (prefers-reduced-motion: reduce) { .dg-hero2-band, .dg-hero2-code, .dg-hero2-char, .dg-hero2-label, .dg-hero2-name, .dg-hero2-sub > * { animation: none; } } /* PC：Canvaの実測値そのまま（帯 左63.4%→右91%、キャラ左4%、3文字は右端で切る） */ @media (min-width: 760px) { .dg-hero2-frame { height: clamp(300px, 34.4vw, 470px); } .dg-hero2-band { clip-path: polygon(0 0, 100% 0, 100% 91%, 0 63.4%); } .dg-hero2-code { /* 少し大きめ・やや上へ（帯にかかる割合を増やして読み取れるように）。 下は帯を越えて純白の下地と同化して消える */ right: -1vw; bottom: 2%; font-size: clamp(160px, 16.2vw, 222px); } .dg-hero2-code i { width: .68em; } .dg-hero2-char { left: 4%; bottom: 8%; height: 72%; width: auto; } .dg-hero2-txt { top: clamp(24px, 4vw, 56px); left: 0; right: 0; } .dg-hero2-label { font-size: clamp(18px, 2.5vw, 34px); } .dg-hero2-name { font-size: clamp(50px, 6.3vw, 84px); } } /* --- 本文 --- 地色にタイプ色の淡いにじみを2か所置く。タイプが変わると空気も変わる。 下地はヒーローと同じ**純白**（灰がかった地だとヒーローとの境目に段差が出て、 巨大3文字の「同化」も崩れる） */ .dg-body { background: radial-gradient(46% 24% at 100% 0%, color-mix(in srgb, var(--gc, #2563eb) 7%, transparent), transparent 72%), radial-gradient(38% 20% at 0% 30%, color-mix(in srgb, var(--gc, #2563eb) 5%, transparent), transparent 72%), #fff; padding: 0 0 72px; } .dg-container { max-width: 760px; margin: 0 auto; padding: 0 16px; } /* ---- PCの2段組み（本文＋右の貼りつくサイドバー）---- 参考UIと同じ構造。サイドバーには「タイプの札・このページ内の目次・保存」を まとめてある。**スマホでは出さない**（右下に浮かぶボタンが同じ役目を持つ）。 逆にPCではボタンが二重になるので、浮かぶボタンのほうを消す（下の media）。 */ .dg-side { display: none; } @media (min-width: 1024px) { /* **align-items: start を付けないこと。** 付けるとサイドバー列の高さが 中身ぶんしかなくなり、sticky の可動域がゼロになって貼りつかない （列いっぱいに伸ばした aside の中を .dg-side-inner が滑る作り） */ .dg-body .dg-container.dg-cols { max-width: 1140px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 44px; } .dg-side { display: block; } .dg-side[hidden] { display: none; } /* 節1つぶんの上余白と同じだけ下げて、本文の1節目と頭をそろえる */ .dg-side-inner { position: sticky; top: calc(var(--dg-head, 0px) + 20px); padding-top: clamp(28px, 7vw, 48px); } } .dg-side-card { background: #fff; border: 1px solid var(--dg-line); border-radius: 18px; border-top: 4px solid var(--gc); box-shadow: var(--dg-shadow); overflow: hidden; } .dg-side-type { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; } /* タイプの札。ヒーロー・節番号と同じ平行四辺形（斜めの語彙で統一） */ .dg-side-code { width: 58px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); background: linear-gradient(115deg, var(--g1), var(--g2)); color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .06em; } .dg-side-label { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--dg-ink-2); } .dg-side-name { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -.01em; color: var(--dg-ink); } .dg-side-heading { margin: 0; padding: 12px 18px 4px; border-top: 1px solid var(--dg-line); font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--dg-ink-2); } .dg-toc { display: block; padding: 4px 0 8px; } .dg-toc a { display: flex; align-items: baseline; gap: 8px; padding: 9px 18px 9px 15px; border-left: 3px solid transparent; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--dg-ink-2); text-decoration: none; transition: background .15s, color .15s, border-color .15s; } /* #94a3b8 だと白地で 2.9:1 しかない。12px はサイト基準（4.5:1）で ink-2 を使う */ .dg-toc a b { font-size: 12px; font-weight: 900; color: var(--dg-ink-2); font-variant-numeric: tabular-nums; } .dg-toc a:hover { background: #f5f7fb; color: var(--dg-ink); } /* いま読んでいる節。スクロールに合わせて JS が付け替える */ .dg-toc a.is-on { border-left-color: var(--gc); background: var(--gt); color: var(--gd); } .dg-toc a.is-on b { color: var(--gc); } .dg-side-actions { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 16px; border-top: 1px solid var(--dg-line); } .dg-side-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--dg-line); background: #fff; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 800; text-decoration: none; color: var(--dg-ink); transition: border-color .16s, background .16s, transform .16s; } .dg-side-btn svg { width: 17px; height: 17px; flex-shrink: 0; } .dg-side-btn:hover { border-color: #cfd9e8; background: #f8fafc; } .dg-side-btn-main { border: none; color: #fff; background: linear-gradient(115deg, var(--g1), var(--g2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--g1) 30%, transparent); } .dg-side-btn-main:hover { background: linear-gradient(115deg, var(--g1), var(--g2)); transform: translateY(-1px); } .dg-side-btn-main.is-done { background: #ecfdf5; color: #047857; box-shadow: none; border: 1.5px solid #a7f3d0; } /* 目次から飛んだとき、貼りつくヘッダーに見出しが隠れないための余白 */ .dg-sec { scroll-margin-top: calc(var(--dg-head, 0px) + 20px); } .dg-sec { padding: clamp(28px, 7vw, 48px) 0 0; } .dg-sec-head { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } /* ヒーローの巨大3文字と同じモチーフ：見出しの背後に大きな「01」〜をタイプ色の 超淡色で敷く。読ませる要素ではないので、本文より必ず薄く（装飾のみ） */ .dg-sec-head::before { content: attr(data-ghost); position: absolute; right: -4px; top: 50%; transform: translateY(-52%); font-size: clamp(64px, 16vw, 96px); font-weight: 900; line-height: 1; letter-spacing: -.02em; color: color-mix(in srgb, var(--band, var(--gc)) 9%, transparent); pointer-events: none; user-select: none; } /* 番号は平行四辺形の札。ヒーローの斜めの切り口と同じ角度の語彙で統一する （傾いたステッカー札はやめた。2026-08-14 のスマート化） */ .dg-sec-no { width: 44px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); background: linear-gradient(115deg, var(--g1), var(--g2)); color: #fff; font-size: 15px; font-weight: 900; } .dg-sec-title { margin: 0; font-size: clamp(20px, 5.6vw, 28px); font-weight: 900; letter-spacing: -.02em; color: var(--dg-ink); } /* 見出しのマーカーは**タイプの帯色の淡色**で引く（黄色をやめた。 ヒーローのCanvaトーンに黄色が無く、タイプ色で全体を染める方針のため）。 span に引くのは、2行に折れたとき行ごとに塗るため */ .dg-sec-title span { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--band, var(--gc)) 22%, #fff) 62%); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 2px; } .dg-sec-lead { margin: -6px 0 18px; font-size: clamp(12px, 3.4vw, 14px); line-height: 1.85; color: var(--dg-ink-2); } .dg-card { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); box-shadow: var(--dg-shadow); padding: clamp(18px, 4.6vw, 28px); } /* --- 軸のスライダー --- */ .dg-axis + .dg-axis { margin-top: 26px; padding-top: 26px; border-top: 1px dashed var(--dg-line); } .dg-axis-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; } /* **どの文字の話かを、いちばん大きく出す。** 3文字コードと本文が繋がらない、が最初の版のいちばんの弱点だった */ .dg-axis-letter { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--ac) 14%, #fff); color: var(--ac); font-size: 22px; font-weight: 900; } .dg-axis-lines { flex: 1 1 auto; min-width: 0; } .dg-axis-q { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--dg-ink-2); } /* 見出しは flex にしない。**長いラベルのときに数字だけが次の行へ落ちる。** ふつうの文として流し、数字を後ろに続ける */ .dg-axis-headline { margin: 0; font-size: clamp(15px, 4.2vw, 18px); font-weight: 900; color: var(--dg-ink); letter-spacing: -.01em; line-height: 1.45; word-break: auto-phrase; } .dg-axis-headline b { margin-left: 8px; color: var(--ac); font-size: clamp(19px, 5.2vw, 24px); font-variant-numeric: tabular-nums; white-space: nowrap; } .dg-chip-clarity { flex-shrink: 0; white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; } /* はっきり度チップもタイプの帯色でそろえる（緑・黄をやめた） */ .dg-clarity-hi { background: color-mix(in srgb, var(--band, var(--gc)) 14%, #fff); color: color-mix(in srgb, var(--band, var(--gc)) 76%, #000); } .dg-clarity-mid { background: #e8edf4; color: #475569; } .dg-clarity-lo { background: #eef1f6; color: #64748b; } /* 【つまみの位置の決まり】 **つまみは「右側の極をどれだけ選んだか」の位置に置く。** 自分が寄っている側に、つまみが寄る。 帯そのものは端まで色が入る（参考にした診断と同じ）。 帯を途中で切ると「塗られた長さ＝どちらの割合？」が読み取れず、 左右のラベルとどちらが対応するのか分からなくなる。 */ .dg-slider { position: relative; height: 12px; margin: 6px 0 10px; } .dg-slider-track { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--ac) 16%, #eef2f7); overflow: hidden; } .dg-slider-fill { height: 100%; width: 0; border-radius: 999px; background: var(--ac); transition: width .9s cubic-bezier(.2, .8, .2, 1); } /* つまみの中に自分の文字が入る（位置＝寄り、文字＝どちら側か、が1点で読める） */ .dg-slider-knob { position: absolute; top: 50%; left: 0; width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 3px solid var(--ac); /* 12pxの小さい文字なので、軸色をそのまま使わず暗めに寄せる （黄土色の軸 #D97706 が白地で 4.5:1 を割るため） */ color: color-mix(in srgb, var(--ac) 78%, #000); font-size: 12px; font-weight: 900; line-height: 1; transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(20, 32, 51, .2); transition: left 1.1s cubic-bezier(.2, .8, .2, 1); } .dg-slider-ends { display: flex; justify-content: space-between; gap: 12px; font-size: clamp(12px, 3vw, 12.5px); color: var(--dg-ink-2); line-height: 1.5; } /* **`min-width: 0` を外さないこと。** flex の既定（auto）だと、 「課題・情報に関心が向く」のような長いラベルが縮まず、カードからはみ出す */ .dg-slider-ends span { flex: 1 1 0; min-width: 0; word-break: auto-phrase; } .dg-slider-ends span:last-child { text-align: right; } .dg-slider-ends .is-mine { color: var(--dg-ink); font-weight: 800; } /* 両端にも文字を出す。**どちらの端がどの文字なのか**が分かれば、 つまみの位置がそのまま意味になる */ .dg-slider-ends b { display: inline-block; margin-right: 5px; padding: 1px 6px; border-radius: 5px; background: #eef2f7; color: #55637a; font-size: 12px; font-weight: 900; } .dg-slider-ends span:last-child b { margin: 0 0 0 5px; } /* 12pxの白文字なので地色を暗めに寄せる（#D97706 のままだと 4.5:1 を割る） */ .dg-slider-ends .is-mine b { background: color-mix(in srgb, var(--ac) 78%, #000); color: #fff; } .dg-axis-meaning { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ac) 7%, #fff); border-left: 3px solid var(--ac); font-size: clamp(12px, 3.3vw, 13.5px); line-height: 1.85; color: #3c4a60; } /* 注意書きは「しっぽ付きの吹き出し」。色はタイプの帯色の淡色（トンマナ統一） */ .dg-note { position: relative; margin: 26px 0 0; padding: 16px 18px; border-radius: 16px; background: color-mix(in srgb, var(--band, var(--gc)) 7%, #fff); border: 1.5px solid color-mix(in srgb, var(--band, var(--gc)) 30%, #fff); font-size: clamp(12px, 3.3vw, 13.5px); line-height: 1.9; color: color-mix(in srgb, var(--band, var(--gc)) 55%, #26303c); } .dg-note::before { content: ""; position: absolute; top: -8px; left: 34px; width: 14px; height: 14px; transform: rotate(45deg); background: color-mix(in srgb, var(--band, var(--gc)) 7%, #fff); border-left: 1.5px solid color-mix(in srgb, var(--band, var(--gc)) 30%, #fff); border-top: 1.5px solid color-mix(in srgb, var(--band, var(--gc)) 30%, #fff); } .dg-note b { display: block; margin-bottom: 4px; color: color-mix(in srgb, var(--band, var(--gc)) 72%, #1f2430); } /* --- ベース人格 --- */ .dg-base { text-align: center; } .dg-base-key { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--gt); /* 12px の小さな文字。帯色そのままでは淡地の上で 4.5:1 を割る（PIC実測3.36）。 暗めに寄せて色味だけ残す */ color: color-mix(in srgb, var(--gc) 68%, #000); font-size: 12px; font-weight: 900; letter-spacing: .16em; } .dg-base-title { margin: 14px 0 10px; font-size: clamp(18px, 5vw, 25px); font-weight: 900; line-height: 1.5; letter-spacing: -.02em; color: var(--gd); } .dg-base-desc { margin: 0 auto; max-width: 34em; font-size: clamp(13px, 3.6vw, 15px); line-height: 1.95; color: #3c4a60; } .dg-base-plus { margin: 22px auto 0; max-width: 34em; padding: 16px 18px; border-radius: 14px; background: var(--gt); text-align: left; } .dg-base-plus b { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 900; letter-spacing: .1em; color: color-mix(in srgb, var(--gc) 68%, #000); /* 12px は帯色のままだと読めない */ } .dg-base-plus p { margin: 0; font-size: clamp(13px, 3.6vw, 14.5px); line-height: 1.85; color: #3c4a60; } .dg-prose { margin: 0; font-size: clamp(13.5px, 3.8vw, 15.5px); line-height: 2.05; color: #2f3c52; } /* --- 見出し＋一言のリスト（強み・落とし穴） --- */ .dg-list { list-style: none; margin: 0; padding: 0; } .dg-list li { display: flex; gap: 14px; padding: 16px 0; } .dg-list li + li { border-top: 1px solid var(--dg-line); } /* PCでは2列に並べる（参考UIの「あなたの強み」と同じ形） */ @media (min-width: 760px) { .dg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; } .dg-list li:nth-child(2) { border-top: 0; } } .dg-list-icon { width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid currentColor; font-size: 13px; font-weight: 900; } /* **中のSVGには必ず大きさを与える。** 幅も高さも指定しないと、flex の中で本来の比率のまま伸びて、 ボタンや丸を突き破る（実際に登録ボタンが潰れた） */ .dg-list-icon svg { width: 14px; height: 14px; } .dg-list-good .dg-list-icon { color: #059669; } .dg-list-care .dg-list-icon { color: #d97706; } .dg-list-check .dg-list-icon { color: var(--gc); } .dg-list-t { margin: 0 0 4px; font-size: clamp(14.5px, 4vw, 17px); font-weight: 900; line-height: 1.6; color: var(--dg-ink); letter-spacing: -.01em; } .dg-list-d { margin: 0; font-size: clamp(12.5px, 3.4vw, 14px); line-height: 1.85; color: var(--dg-ink-2); } /* --- 向いていそうな仕事 --- */ .dg-jobs { display: grid; gap: 12px; } .dg-job { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--gt); border: 1px solid color-mix(in srgb, var(--gc) 16%, transparent); } .dg-job-no { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--gc); color: #fff; font-size: 12px; font-weight: 900; } .dg-job-n { margin: 0 0 3px; font-size: clamp(14.5px, 4vw, 16.5px); font-weight: 900; color: var(--gd); } .dg-job-w { margin: 0; font-size: clamp(12px, 3.3vw, 13.5px); line-height: 1.8; color: #46556d; } /* --- 近いタイプとの違い --- */ .dg-neighbors { display: grid; gap: 12px; } .dg-neighbor { padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--dg-line); } .dg-neighbor-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .dg-neighbor-code { padding: 3px 9px; border-radius: 7px; background: #eef2f7; font-size: 12px; font-weight: 900; letter-spacing: .1em; color: #475569; } .dg-neighbor-name { font-size: clamp(14px, 3.8vw, 16px); font-weight: 900; color: var(--dg-ink); } .dg-neighbor-q { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--dg-ink-2); } .dg-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; } .dg-vs-side { padding: 10px 12px; border-radius: 10px; font-size: clamp(12px, 3.2vw, 13px); line-height: 1.6; } .dg-vs-mine { background: var(--gt); color: var(--gd); font-weight: 800; } .dg-vs-mine b { display: block; font-size: 12px; font-weight: 900; letter-spacing: .08em; opacity: .7; margin-bottom: 3px; } .dg-vs-theirs { background: #f3f5f9; color: #5a6a82; } .dg-vs-theirs b { display: block; font-size: 12px; font-weight: 900; letter-spacing: .08em; opacity: .65; margin-bottom: 3px; } /* VSは黒丸の札を少し傾けて。対戦カードの語彙で「比べている」ことを一目で */ .dg-vs-mid { align-self: center; width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dg-ink); color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .02em; transform: rotate(-8deg); } /* --- 登録で解除するところ --- */ .dg-locked { position: relative; } .dg-locked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 420px) { .dg-locked-grid { gap: 10px; } } /* PCでは4つ横一列（参考UIの「影響力のある特性」と同じ形） */ @media (min-width: 760px) { .dg-locked-grid { grid-template-columns: repeat(4, 1fr); } } .dg-locked-item { text-align: center; padding: 8px 4px; } /* 破線＝「まだ無い・これから」の記号。実線だと「壊れて開かない」に見える */ .dg-locked-ring { width: clamp(84px, 24vw, 108px); height: clamp(84px, 24vw, 108px); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2.5px dashed var(--lc, #cbd5e1); color: #9aa7bb; background: #fff; } .dg-locked-ring svg { width: 26px; height: 26px; } .dg-locked-t { margin: 0; font-size: clamp(12.5px, 3.4vw, 14px); font-weight: 800; line-height: 1.5; color: #475569; } .dg-unlock { position: relative; margin-top: 26px; padding: 30px 20px 22px; border: 1.5px solid color-mix(in srgb, var(--gc) 30%, transparent); border-radius: 18px; background: #fff; text-align: center; } .dg-unlock-badge { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(115deg, var(--g1), var(--g2)); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--g1) 40%, transparent); } .dg-unlock-badge svg { width: 20px; height: 20px; } .dg-unlock-t { margin: 0 0 8px; font-size: clamp(17px, 4.8vw, 22px); font-weight: 900; letter-spacing: -.02em; color: var(--dg-ink); } .dg-unlock-d { margin: 0 auto 18px; max-width: 26em; font-size: clamp(12.5px, 3.4vw, 14px); line-height: 1.9; color: var(--dg-ink-2); } .dg-unlock-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 clamp(20px, 5vw, 30px); border-radius: 999px; background: linear-gradient(115deg, var(--g1), var(--g2)); color: #fff; font-size: clamp(14px, 3.9vw, 16px); font-weight: 900; text-decoration: none; box-shadow: 0 8px 24px color-mix(in srgb, var(--g1) 38%, transparent); transition: transform .18s, box-shadow .18s; /* 「マイページで確認する」が3行に折れていた（390px で実測）。 文の途中で折るくらいなら、はみ出さない範囲で1行に保つ */ white-space: nowrap; max-width: 100%; } .dg-unlock-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .dg-unlock-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px color-mix(in srgb, var(--g1) 45%, transparent); } .dg-unlock-note { margin: 12px 0 0; font-size: 12px; color: var(--dg-ink-2); } /* 登録済みの人には、鍵ではなく中身が出る */ .dg-unlocked-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 18px; padding: 10px 16px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: clamp(12px, 3.3vw, 13.5px); font-weight: 800; } .dg-unlocked-note svg { width: 16px; height: 16px; } /* 節3の中の小見出し（番号なしの箇条書き扱い）。 帯色の斜めダッシュ＋極太文字で、節見出しより一段軽く */ .dg-sub + .dg-sub { margin-top: 22px; } .dg-sub-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: clamp(15px, 4.2vw, 18px); font-weight: 900; color: var(--dg-ink); } .dg-sub-h::before { content: ""; width: 16px; height: 4px; border-radius: 2px; background: var(--band, var(--gc)); transform: skewX(-18deg); } .dg-sub-lead { margin: -4px 0 10px; font-size: clamp(12px, 3.4vw, 13.5px); line-height: 1.8; color: var(--dg-ink-2); } /* --- 3〜5節の登録ゲート（2026-08-19）--- 本物の中身をぼかしてチラ見せ → 「登録で見られるもの」リスト → LINEのCTA。 「これ見れるなら登録しよ」と思わせるための節なので、鍵は威圧的にせず、 中身が実在することが伝わる作りにする */ .dg-gate-stack { display: flex; flex-direction: column; gap: 12px; } .dg-gate-peek { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); box-shadow: var(--dg-shadow); } .dg-gate-peek-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--band, var(--gc)) 14%, #fff); } .dg-gate-peek-title { flex: 1 1 auto; min-width: 0; font-size: clamp(14px, 3.9vw, 16px); font-weight: 900; color: var(--dg-ink); word-break: auto-phrase; /* 「場面」だけが2行目に落ちる、を防ぐ */ } .dg-gate-lock { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--band, var(--gc)) 10%, #fff); color: color-mix(in srgb, var(--band, var(--gc)) 74%, #1f2430); font-size: 12px; font-weight: 800; white-space: nowrap; } .dg-gate-lock svg { width: 12px; height: 12px; } /* 中身は本物をぼかす。読ませないが「実在する」ことは伝わる濃さ */ .dg-gate-blur { padding: 14px 16px 6px; max-height: 132px; filter: blur(6px); user-select: none; pointer-events: none; /* 下端をフェードで消して「まだ続きがある」ことを見せる */ -webkit-mask-image: linear-gradient(#000 40%, transparent 96%); mask-image: linear-gradient(#000 40%, transparent 96%); } .dg-gate-cta { position: relative; margin-top: 16px; padding: 22px 18px 20px; background: #fff; border-radius: var(--dg-radius); border: 2px solid color-mix(in srgb, var(--band, var(--gc)) 55%, #fff); box-shadow: 0 16px 40px color-mix(in srgb, var(--band, var(--gc)) 16%, transparent); text-align: center; } .dg-gate-cta-t { margin: 0 0 12px; font-size: clamp(15px, 4.2vw, 18px); font-weight: 900; color: var(--dg-ink); } .dg-gate-list { list-style: none; margin: 0 auto 16px; padding: 0; max-width: 21em; text-align: left; display: flex; flex-direction: column; gap: 8px; } .dg-gate-list li { display: flex; align-items: baseline; gap: 8px; font-size: clamp(12.5px, 3.5vw, 14px); line-height: 1.7; color: #3a4453; } .dg-gate-list li b { color: var(--dg-ink); } .dg-gate-list li svg { width: 14px; height: 14px; flex-shrink: 0; align-self: center; color: var(--band, var(--gc)); } /* CTAはLINEの緑（登録＝LINEだと一目で分かる色。サイト共通の作法） */ .dg-gate-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 clamp(20px, 6vw, 34px); border-radius: 999px; background: #06c755; color: #fff; font-size: clamp(14px, 4vw, 16px); font-weight: 900; text-decoration: none; box-shadow: 0 8px 22px rgba(6, 199, 85, .35); transition: transform .16s, box-shadow .16s; max-width: 100%; white-space: nowrap; } .dg-gate-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(6, 199, 85, .4); } .dg-gate-note { margin: 10px 0 0; font-size: 12px; color: var(--dg-ink-2); } /* --- 下の締め --- */ .dg-foot { margin-top: clamp(30px, 8vw, 52px); text-align: center; } /* もう一度診断する。**薄く、小さく。** 押す機会がいちばん少ないので、 目に留まりはするが手を伸ばす先には見えない重さにしてある */ .dg-retake { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--dg-line); background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--dg-ink-2); transition: background .16s, color .16s, border-color .16s; } .dg-retake svg { width: 15px; height: 15px; } .dg-retake:hover { background: #fff; color: var(--dg-ink); border-color: #cfd9e8; } .dg-disclaimer { margin: 26px auto 0; max-width: 40em; font-size: 12px; line-height: 1.9; color: var(--dg-ink-2); } /* 共有画像は canvas に直接描く（`js/diagnosis-share.js`）。 画面外にDOMを組んで写し取る方法は取っていない。 変換ライブラリを足すとCDNが1本増え、Webフォントの読み込み待ちや CSSの対応漏れで端末によって崩れるため。 */ /* --- 結果の下に並べる募集 --- */ .dg-match { background: #fff; border-top: 1px solid var(--dg-line); padding: clamp(34px, 8vw, 56px) 0; } .dg-match-h { text-align: center; margin-bottom: 22px; } .dg-match-title { margin: 0 0 6px; font-size: clamp(19px, 5.2vw, 26px); font-weight: 900; color: var(--dg-ink); } .dg-match-note { margin: 0; font-size: clamp(12px, 3.3vw, 13.5px); color: var(--dg-ink-2); } .dg-match-wrap { position: relative; } .dg-match-list.is-blurred { filter: blur(8px); pointer-events: none; user-select: none; } .dg-skel-card { display: flex; gap: 12px; align-items: center; } .dg-skel-card .int-card-thumb { background: #e8eaed; } .dg-skel-card .int-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; } .dg-skel { display: block; height: 12px; border-radius: 6px; background: #e8eaed; } .dg-skel-tag { width: 32%; } .dg-skel-title { width: 86%; height: 16px; } .dg-skel-sub { width: 54%; } .dg-match-gate { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; text-align: center; padding: 30px 20px 20px; background: rgba(255, 255, 255, .88); border-radius: var(--dg-radius); } .dg-match-gate p { margin: 0; font-size: clamp(12.5px, 3.4vw, 14px); font-weight: 700; line-height: 1.7; color: var(--dg-ink); } /* 画面に入ったら浮き上がる。**動きを減らす設定の人には出さない** */ .dg-reveal { opacity: 0; transform: translateY(22px); } .dg-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); } @media (prefers-reduced-motion: reduce) { .dg-reveal, .dg-reveal.is-in { opacity: 1; transform: none; transition: none; } .dg-q.is-active, .dg-chip { animation: none; } /* ヒーローの帯・キャラ・文字の動きも止める（定義は上の dgh-* ブロックにもある） */ .dg-hero2-band, .dg-hero2-code, .dg-hero2-char, .dg-hero2-label, .dg-hero2-name, .dg-hero2-sub > * { animation: none; } .dg-slider-fill, .dg-slider-knob, .dg-ri-fill { transition: none; } } /* ===== くわしい診断（STEP2・2026-08-20） ===== 出題3形式（Likert・Best-Worst）と結果の節5〜8。 アクセントは本文と同じく帯色（--band）から派生させる。 */ /* 入口ボタンは