/* 作品別キャラ診断の配色。 土台のレイアウトは css/chiikawa-shindan.css をそのまま使い、 ここでは data-work ごとに色だけ差し替える。 ちいかわ診断（.cq に data-work が付かない）には一切当たらない。 */ /* ---- 呪術廻戦：紫 × 墨 ---- */ .cq[data-work="jujutsu"]{--ink:#2c2338;--muted:#6b6079;background:#f7f4fb} .cq[data-work="jujutsu"] a{color:#6b4a9e} .cq[data-work="jujutsu"] .cq-eyebrow, .cq[data-work="jujutsu"] .cq-card__scene, .cq[data-work="jujutsu"] .cq-article>header>p:first-child{color:#7d55b8} .cq[data-work="jujutsu"] .cq-hero h1{color:#2f2440} .cq[data-work="jujutsu"] .cq-hero__shade{background:linear-gradient(90deg,rgba(247,244,251,.97) 0%,rgba(247,244,251,.9) 43%,rgba(247,244,251,.08) 75%),linear-gradient(0deg,rgba(35,24,56,.22),transparent 50%)} .cq[data-work="jujutsu"] .cq-primary, .cq[data-work="jujutsu"] .cq-selfcta__btn{background:linear-gradient(135deg,#7d55b8,#4b3080);box-shadow:0 10px 24px rgba(75,48,128,.3)} .cq[data-work="jujutsu"] .cq-progress__track i{background:linear-gradient(90deg,#4b3080,#a678d6)} .cq[data-work="jujutsu"] .cq-option:hover, .cq[data-work="jujutsu"] .cq-option:focus-visible{border-color:#8b63c4;background:#f7f2fd} .cq[data-work="jujutsu"] .cq-option.is-selected{background:#efe6fb;border-color:#7d55b8} .cq[data-work="jujutsu"] .cq-match, .cq[data-work="jujutsu"] .cq-next__h b, .cq[data-work="jujutsu"] .cq-selfcta__h b{color:#6b4a9e} .cq[data-work="jujutsu"] .cq-radar__user{fill:rgba(125,85,184,.2);stroke:#7d55b8} .cq[data-work="jujutsu"] .cq-radar__char{fill:rgba(90,90,110,.16);stroke:#5c5570} .cq[data-work="jujutsu"] .cq-radar-legend span:before{background:#7d55b8} .cq[data-work="jujutsu"] .cq-radar-legend span+span:before{background:#5c5570} .cq[data-work="jujutsu"] .cq-axis-list i b{background:linear-gradient(90deg,#5c5570,#a678d6)} .cq[data-work="jujutsu"] .cq-result-reading h3{color:#7d55b8} .cq[data-work="jujutsu"] .cq-next{border-left-color:#7d55b8} .cq[data-work="jujutsu"] .cq-next__eyebrow{color:#7d55b8} .cq[data-work="jujutsu"] .cq-next__btn--primary{background:linear-gradient(135deg,#7d55b8,#4b3080);box-shadow:0 10px 24px rgba(75,48,128,.28)} .cq[data-work="jujutsu"] .cq-selfcta{background:linear-gradient(160deg,#f7f2fd 0%,#f2effa 52%,#eeeaf6 100%);border-color:#e2d7f2} .cq[data-work="jujutsu"] .cq-related, .cq[data-work="jujutsu"] .cq-axis-grid span{background:linear-gradient(135deg,#f2ecfb,#efeaf7)} /* ---- ジブリ：森の緑 × 空 ---- */ .cq[data-work="ghibli"]{--ink:#2b3a30;--muted:#5f7167;background:#f5faf5} .cq[data-work="ghibli"] a{color:#3f8a63} .cq[data-work="ghibli"] .cq-eyebrow, .cq[data-work="ghibli"] .cq-card__scene, .cq[data-work="ghibli"] .cq-article>header>p:first-child{color:#3f8a63} .cq[data-work="ghibli"] .cq-hero h1{color:#28402f} .cq[data-work="ghibli"] .cq-hero__shade{background:linear-gradient(90deg,rgba(245,250,245,.97) 0%,rgba(245,250,245,.9) 43%,rgba(245,250,245,.08) 75%),linear-gradient(0deg,rgba(30,58,42,.18),transparent 50%)} .cq[data-work="ghibli"] .cq-primary, .cq[data-work="ghibli"] .cq-selfcta__btn{background:linear-gradient(135deg,#5aab7c,#2f7a58);box-shadow:0 10px 24px rgba(47,122,88,.28)} .cq[data-work="ghibli"] .cq-progress__track i{background:linear-gradient(90deg,#6fb8d6,#5aab7c)} .cq[data-work="ghibli"] .cq-option:hover, .cq[data-work="ghibli"] .cq-option:focus-visible{border-color:#6bb391;background:#f2fbf6} .cq[data-work="ghibli"] .cq-option.is-selected{background:#e6f6ed;border-color:#4f9d74} .cq[data-work="ghibli"] .cq-match, .cq[data-work="ghibli"] .cq-next__h b, .cq[data-work="ghibli"] .cq-selfcta__h b{color:#2f7a58} .cq[data-work="ghibli"] .cq-radar__user{fill:rgba(90,171,124,.2);stroke:#3f8a63} .cq[data-work="ghibli"] .cq-radar__char{fill:rgba(111,184,214,.18);stroke:#5290ad} .cq[data-work="ghibli"] .cq-radar-legend span:before{background:#3f8a63} .cq[data-work="ghibli"] .cq-radar-legend span+span:before{background:#5290ad} .cq[data-work="ghibli"] .cq-axis-list i b{background:linear-gradient(90deg,#6fb8d6,#5aab7c)} .cq[data-work="ghibli"] .cq-result-reading h3{color:#3f8a63} .cq[data-work="ghibli"] .cq-next{border-left-color:#5aab7c} .cq[data-work="ghibli"] .cq-next__eyebrow{color:#3f8a63} .cq[data-work="ghibli"] .cq-next__btn--primary{background:linear-gradient(135deg,#5aab7c,#2f7a58);box-shadow:0 10px 24px rgba(47,122,88,.26)} .cq[data-work="ghibli"] .cq-selfcta{background:linear-gradient(160deg,#f1fbf5 0%,#eff8fb 52%,#f4faef 100%);border-color:#d8ecdf} .cq[data-work="ghibli"] .cq-related, .cq[data-work="ghibli"] .cq-axis-grid span{background:linear-gradient(135deg,#eaf7ef,#e9f4fa)} /* ---- HUNTER×HUNTER：緑 × 金 ---- */ .cq[data-work="hunterhunter"]{--ink:#26332b;--muted:#5f6f66;background:#f6faf6} .cq[data-work="hunterhunter"] a{color:#2f8f5f} .cq[data-work="hunterhunter"] .cq-eyebrow, .cq[data-work="hunterhunter"] .cq-card__scene, .cq[data-work="hunterhunter"] .cq-article>header>p:first-child{color:#b08a1e} .cq[data-work="hunterhunter"] .cq-hero h1{color:#23382c} .cq[data-work="hunterhunter"] .cq-hero__shade{background:linear-gradient(90deg,rgba(246,250,246,.97) 0%,rgba(246,250,246,.9) 43%,rgba(246,250,246,.08) 75%),linear-gradient(0deg,rgba(24,50,34,.2),transparent 50%)} .cq[data-work="hunterhunter"] .cq-primary, .cq[data-work="hunterhunter"] .cq-selfcta__btn{background:linear-gradient(135deg,#39a06c,#1f6b45);box-shadow:0 10px 24px rgba(31,107,69,.3)} .cq[data-work="hunterhunter"] .cq-progress__track i{background:linear-gradient(90deg,#1f6b45,#e0b83c)} .cq[data-work="hunterhunter"] .cq-option:hover, .cq[data-work="hunterhunter"] .cq-option:focus-visible{border-color:#4aa87a;background:#f1fbf5} .cq[data-work="hunterhunter"] .cq-option.is-selected{background:#e4f5eb;border-color:#2f8f5f} .cq[data-work="hunterhunter"] .cq-match, .cq[data-work="hunterhunter"] .cq-next__h b, .cq[data-work="hunterhunter"] .cq-selfcta__h b{color:#1f6b45} .cq[data-work="hunterhunter"] .cq-radar__user{fill:rgba(47,143,95,.2);stroke:#2f8f5f} .cq[data-work="hunterhunter"] .cq-radar__char{fill:rgba(224,184,60,.2);stroke:#b08a1e} .cq[data-work="hunterhunter"] .cq-radar-legend span:before{background:#2f8f5f} .cq[data-work="hunterhunter"] .cq-radar-legend span+span:before{background:#b08a1e} .cq[data-work="hunterhunter"] .cq-axis-list i b{background:linear-gradient(90deg,#e0b83c,#2f8f5f)} .cq[data-work="hunterhunter"] .cq-result-reading h3{color:#b08a1e} .cq[data-work="hunterhunter"] .cq-next{border-left-color:#e0b83c} .cq[data-work="hunterhunter"] .cq-next__eyebrow{color:#b08a1e} .cq[data-work="hunterhunter"] .cq-next__btn--primary{background:linear-gradient(135deg,#39a06c,#1f6b45);box-shadow:0 10px 24px rgba(31,107,69,.26)} .cq[data-work="hunterhunter"] .cq-selfcta{background:linear-gradient(160deg,#f1fbf5 0%,#fdf8e8 52%,#f4faef 100%);border-color:#e6e2c9} .cq[data-work="hunterhunter"] .cq-related, .cq[data-work="hunterhunter"] .cq-axis-grid span{background:linear-gradient(135deg,#e9f6ee,#fbf4e0)} /* ---- ハイキュー：烏野の橙 × 黒 ---- */ .cq[data-work="haikyu"]{--ink:#2c2a2a;--muted:#6e6663;background:#fff8f1} .cq[data-work="haikyu"] a{color:#c9631f} .cq[data-work="haikyu"] .cq-eyebrow, .cq[data-work="haikyu"] .cq-card__scene, .cq[data-work="haikyu"] .cq-article>header>p:first-child{color:#c9631f} .cq[data-work="haikyu"] .cq-hero h1{color:#2f2b28} .cq[data-work="haikyu"] .cq-hero__shade{background:linear-gradient(90deg,rgba(255,248,241,.97) 0%,rgba(255,248,241,.9) 43%,rgba(255,248,241,.08) 75%),linear-gradient(0deg,rgba(50,38,28,.2),transparent 50%)} .cq[data-work="haikyu"] .cq-primary, .cq[data-work="haikyu"] .cq-selfcta__btn{background:linear-gradient(135deg,#ef8a3c,#c9631f);box-shadow:0 10px 24px rgba(201,99,31,.3)} .cq[data-work="haikyu"] .cq-progress__track i{background:linear-gradient(90deg,#3a3f52,#ef8a3c)} .cq[data-work="haikyu"] .cq-option:hover, .cq[data-work="haikyu"] .cq-option:focus-visible{border-color:#e5934f;background:#fff5ea} .cq[data-work="haikyu"] .cq-option.is-selected{background:#fdeada;border-color:#d97528} .cq[data-work="haikyu"] .cq-match, .cq[data-work="haikyu"] .cq-next__h b, .cq[data-work="haikyu"] .cq-selfcta__h b{color:#c9631f} .cq[data-work="haikyu"] .cq-radar__user{fill:rgba(233,132,54,.2);stroke:#d97528} .cq[data-work="haikyu"] .cq-radar__char{fill:rgba(58,63,82,.16);stroke:#3a3f52} .cq[data-work="haikyu"] .cq-radar-legend span:before{background:#d97528} .cq[data-work="haikyu"] .cq-radar-legend span+span:before{background:#3a3f52} .cq[data-work="haikyu"] .cq-axis-list i b{background:linear-gradient(90deg,#3a3f52,#ef8a3c)} .cq[data-work="haikyu"] .cq-result-reading h3{color:#c9631f} .cq[data-work="haikyu"] .cq-next{border-left-color:#ef8a3c} .cq[data-work="haikyu"] .cq-next__eyebrow{color:#c9631f} .cq[data-work="haikyu"] .cq-next__btn--primary{background:linear-gradient(135deg,#ef8a3c,#c9631f);box-shadow:0 10px 24px rgba(201,99,31,.26)} .cq[data-work="haikyu"] .cq-selfcta{background:linear-gradient(160deg,#fff4e7 0%,#fdf0e3 52%,#f4f5f8 100%);border-color:#f0dcc6} .cq[data-work="haikyu"] .cq-related, .cq[data-work="haikyu"] .cq-axis-grid span{background:linear-gradient(135deg,#fdeeda,#eef0f5)} /* 正反対な君と僕。空色を主色にしたのは、既存5テーマ（紫・緑・緑・橙・桃）と ぶつからない唯一の系統だから。レーダーだけ〈あなた＝空色〉〈キャラ＝珊瑚色〉と 寒色/暖色で分け、作品名どおり正反対の2色が重なって見えるようにしてある。 */ .cq[data-work="seihantai"]{--ink:#2b333c;--muted:#63707d;background:#f5fafd} .cq[data-work="seihantai"] a{color:#2a6f9e} .cq[data-work="seihantai"] .cq-eyebrow, .cq[data-work="seihantai"] .cq-card__scene, .cq[data-work="seihantai"] .cq-article>header>p:first-child{color:#2a6f9e} .cq[data-work="seihantai"] .cq-hero h1{color:#27333d} /* 背景が他作品より明るい（平均輝度158／ジブリは128）ので、同じ濃さで覆うと 教室が白く飛んで絵が消える。見出しは濃色なので薄くしても読める。 */ .cq[data-work="seihantai"] .cq-hero__shade{background:linear-gradient(90deg,rgba(245,250,253,.9) 0%,rgba(245,250,253,.76) 43%,rgba(245,250,253,.04) 75%),linear-gradient(0deg,rgba(28,52,72,.14),transparent 50%)} .cq[data-work="seihantai"] .cq-primary, .cq[data-work="seihantai"] .cq-selfcta__btn{background:linear-gradient(135deg,#5aa8d8,#2a6f9e);box-shadow:0 10px 24px rgba(42,111,158,.28)} .cq[data-work="seihantai"] .cq-progress__track i{background:linear-gradient(90deg,#e88fa4,#5aa8d8)} .cq[data-work="seihantai"] .cq-option:hover, .cq[data-work="seihantai"] .cq-option:focus-visible{border-color:#7cbbe0;background:#eff8fd} .cq[data-work="seihantai"] .cq-option.is-selected{background:#e2f1fa;border-color:#4a97c8} .cq[data-work="seihantai"] .cq-match, .cq[data-work="seihantai"] .cq-next__h b, .cq[data-work="seihantai"] .cq-selfcta__h b{color:#2a6f9e} .cq[data-work="seihantai"] .cq-radar__user{fill:rgba(90,168,216,.2);stroke:#2a6f9e} .cq[data-work="seihantai"] .cq-radar__char{fill:rgba(232,143,164,.18);stroke:#d4708c} .cq[data-work="seihantai"] .cq-radar-legend span:before{background:#2a6f9e} .cq[data-work="seihantai"] .cq-radar-legend span+span:before{background:#d4708c} .cq[data-work="seihantai"] .cq-axis-list i b{background:linear-gradient(90deg,#e88fa4,#5aa8d8)} .cq[data-work="seihantai"] .cq-result-reading h3{color:#2a6f9e} .cq[data-work="seihantai"] .cq-next{border-left-color:#5aa8d8} .cq[data-work="seihantai"] .cq-next__eyebrow{color:#2a6f9e} .cq[data-work="seihantai"] .cq-next__btn--primary{background:linear-gradient(135deg,#5aa8d8,#2a6f9e);box-shadow:0 10px 24px rgba(42,111,158,.26)} .cq[data-work="seihantai"] .cq-selfcta{background:linear-gradient(160deg,#eef7fc 0%,#e8f2f9 52%,#fdf1f4 100%);border-color:#d5e6f1} .cq[data-work="seihantai"] .cq-related, .cq[data-work="seihantai"] .cq-axis-grid span{background:linear-gradient(135deg,#e6f3fb,#fceff2)} /* ヒーロー画像が未生成のときも、のっぺりしないよう地の色を敷く */ .cq[data-work] .cq-hero{background:linear-gradient(140deg,#ffffff 0%,#f2eef8 100%)} .cq[data-work="ghibli"] .cq-hero{background:linear-gradient(140deg,#ffffff 0%,#e9f5ec 100%)} .cq[data-work="seihantai"] .cq-hero{background:linear-gradient(140deg,#ffffff 0%,#e8f2fa 100%)} .cq[data-work="hunterhunter"] .cq-hero{background:linear-gradient(140deg,#ffffff 0%,#eaf5ee 100%)} .cq[data-work="haikyu"] .cq-hero{background:linear-gradient(140deg,#ffffff 0%,#fdeeda 100%)} .cq[data-work] .cq-hero:not(:has(.cq-hero__art)){min-height:auto} .cq[data-work] .cq-hero:not(:has(.cq-hero__art)) .cq-hero__content{padding:58px 32px 54px} @media(max-width:720px){ .cq[data-work] .cq-hero:not(:has(.cq-hero__art)) .cq-hero__content{padding:44px 22px 38px} } /* 結果ヒーローの背景が未生成のときの下敷き */ .cq[data-work] .cq-result-hero{background-color:#f1ecf7} .cq[data-work="ghibli"] .cq-result-hero{background-color:#e9f5ec} .cq[data-work="hunterhunter"] .cq-result-hero{background-color:#eaf5ee} .cq[data-work="haikyu"] .cq-result-hero{background-color:#fdeeda} /* 作品名が長いぶん、ちいかわ診断より見出しを小さくする。 「呪術廻戦キャラ診断」「ハンターハンター診断」が320pxで1字だけ改行されるのを防ぐ。 */ .cq[data-work] .cq-hero h1{font-size:clamp(24px,7.2vw,54px)} .cq[data-work] .cq-hero h1 span{font-size:.62em} /* ============================================================ （下の DARK-HERO GROUP に統合済み。ここは設問中・算出中の背景だけ残す） jujutsu の絵は夜の情景なので、ヒーローと結果は暗幕＋白文字にする。 （既定の明るい幕だと絵がほぼ白く飛ぶ） ============================================================ */ .cq[data-work="jujutsu"] .cq-hero__shade{ background:linear-gradient(90deg,rgba(16,10,28,.95) 0%,rgba(16,10,28,.84) 46%,rgba(16,10,28,.3) 82%), linear-gradient(0deg,rgba(11,7,20,.72),transparent 55%)} .cq[data-work="jujutsu"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="jujutsu"] .cq-eyebrow{color:#c9a7f5} .cq[data-work="jujutsu"] .cq-hero__lead{color:#ddd3ec} .cq[data-work="jujutsu"] .cq-hero__lead strong{color:#fff} .cq[data-work="jujutsu"] .cq-facts li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#eee8f7} .cq[data-work="jujutsu"] .cq-hero__note{color:#a99cbb} .cq[data-work="jujutsu"] .cq-hero .b5shb__head{color:#c9a7f5} .cq[data-work="jujutsu"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(max-width:720px){ .cq[data-work="jujutsu"] .cq-hero__shade{ background:linear-gradient(0deg,rgba(16,10,28,.97) 0%,rgba(16,10,28,.88) 56%,rgba(16,10,28,.25) 100%)} } /* 結果ヒーロー：明るい楕円の幕を暗いものに差し替える */ .cq[data-work="jujutsu"] .cq-result-hero:before{background:rgba(14,9,26,.72);filter:blur(22px)} .cq[data-work="jujutsu"] .cq-result-hero{color:#f2edf9} .cq[data-work="jujutsu"] .cq-result-hero>p:first-child{color:#c9a7f5} .cq[data-work="jujutsu"] .cq-result-hero h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5)} .cq[data-work="jujutsu"] .cq-result-hero .cq-match{color:#c9a7f5} .cq[data-work="jujutsu"] .cq-result-hero__catch{color:#e6ddf3} .cq[data-work="jujutsu"] .cq-typechips span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff} /* 設問中と結果算出中の背景（画像がある作品だけ効く） */ .cq[data-work] .cq-stage--art .cq-card{background:rgba(255,255,255,.96)} .cq[data-work="jujutsu"] .cq-stage--art{ background-size:cover;background-position:center;background-attachment:scroll; border-radius:22px;padding-top:26px;padding-bottom:26px} .cq[data-work="jujutsu"] .cq-stage--art .cq-progress__meta{color:#d7c9ec} .cq[data-work="jujutsu"] .cq-loading--art{background-size:cover;background-position:center;color:#f2edf9} .cq[data-work="jujutsu"] .cq-loading--art p{color:#fff} .cq[data-work="jujutsu"] .cq-loading--art small{color:#c6b8de} .cq[data-work="jujutsu"] .cq-loading--art i{border-color:rgba(255,255,255,.28);border-top-color:#c9a7f5} /* ===== DARK-HERO GROUP ===================================== ヒーロー画像が暗い作品は、白文字＋暗幕にそろえる。 左半分の実測輝度: jujutsu 11 / haikyu 49 / hunterhunter 64（ghibli 125 は対象外） ========================================================== */ .cq[data-work="jujutsu"] .cq-hero__shade{background:linear-gradient(90deg,rgba(16,10,28,.95) 0%,rgba(16,10,28,.84) 46%,rgba(16,10,28,.3) 82%),linear-gradient(0deg,rgba(11,7,20,.72),transparent 55%)} .cq[data-work="jujutsu"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="jujutsu"] .cq-eyebrow{color:#c9a7f5} .cq[data-work="jujutsu"] .cq-hero__lead{color:#e7e2ee} .cq[data-work="jujutsu"] .cq-hero__lead strong,.cq[data-work="jujutsu"] .cq-hero__lead b{color:#fff} .cq[data-work="jujutsu"] .cq-facts li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#f0ecf6} .cq[data-work="jujutsu"] .cq-hero__note{color:#ada5b8} .cq[data-work="jujutsu"] .cq-hero .b5shb__head{color:#c9a7f5} .cq[data-work="jujutsu"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="jujutsu"] .cq-result-hero:before{background:rgba(14,9,26,.72);filter:blur(22px)} .cq[data-work="jujutsu"] .cq-result-hero{color:#f4f1f8} .cq[data-work="jujutsu"] .cq-result-hero>p:first-child{color:#c9a7f5} .cq[data-work="jujutsu"] .cq-result-hero h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5)} .cq[data-work="jujutsu"] .cq-result-hero .cq-match{color:#c9a7f5} .cq[data-work="jujutsu"] .cq-result-hero__catch{color:#e9e4f0} .cq[data-work="jujutsu"] .cq-typechips span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff} @media(max-width:720px){.cq[data-work="jujutsu"] .cq-hero__shade{background:linear-gradient(0deg,rgba(16,10,28,.97) 0%,rgba(16,10,28,.88) 56%,rgba(16,10,28,.25) 100%)}} .cq[data-work="hunterhunter"] .cq-hero__shade{background:linear-gradient(90deg,rgba(12,22,16,.95) 0%,rgba(12,22,16,.84) 46%,rgba(12,22,16,.3) 82%),linear-gradient(0deg,rgba(8,16,11,.72),transparent 55%)} .cq[data-work="hunterhunter"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="hunterhunter"] .cq-eyebrow{color:#e6c765} .cq[data-work="hunterhunter"] .cq-hero__lead{color:#e7e2ee} .cq[data-work="hunterhunter"] .cq-hero__lead strong,.cq[data-work="hunterhunter"] .cq-hero__lead b{color:#fff} .cq[data-work="hunterhunter"] .cq-facts li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#f0ecf6} .cq[data-work="hunterhunter"] .cq-hero__note{color:#ada5b8} .cq[data-work="hunterhunter"] .cq-hero .b5shb__head{color:#e6c765} .cq[data-work="hunterhunter"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="hunterhunter"] .cq-result-hero:before{background:rgba(10,20,14,.72);filter:blur(22px)} .cq[data-work="hunterhunter"] .cq-result-hero{color:#f4f1f8} .cq[data-work="hunterhunter"] .cq-result-hero>p:first-child{color:#e6c765} .cq[data-work="hunterhunter"] .cq-result-hero h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5)} .cq[data-work="hunterhunter"] .cq-result-hero .cq-match{color:#e6c765} .cq[data-work="hunterhunter"] .cq-result-hero__catch{color:#e9e4f0} .cq[data-work="hunterhunter"] .cq-typechips span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff} @media(max-width:720px){.cq[data-work="hunterhunter"] .cq-hero__shade{background:linear-gradient(0deg,rgba(12,22,16,.97) 0%,rgba(12,22,16,.88) 56%,rgba(12,22,16,.25) 100%)}} .cq[data-work="haikyu"] .cq-hero__shade{background:linear-gradient(90deg,rgba(26,20,16,.95) 0%,rgba(26,20,16,.84) 46%,rgba(26,20,16,.3) 82%),linear-gradient(0deg,rgba(18,13,10,.72),transparent 55%)} .cq[data-work="haikyu"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="haikyu"] .cq-eyebrow{color:#f2a15c} .cq[data-work="haikyu"] .cq-hero__lead{color:#e7e2ee} .cq[data-work="haikyu"] .cq-hero__lead strong,.cq[data-work="haikyu"] .cq-hero__lead b{color:#fff} .cq[data-work="haikyu"] .cq-facts li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#f0ecf6} .cq[data-work="haikyu"] .cq-hero__note{color:#ada5b8} .cq[data-work="haikyu"] .cq-hero .b5shb__head{color:#f2a15c} .cq[data-work="haikyu"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="haikyu"] .cq-result-hero:before{background:rgba(22,17,13,.72);filter:blur(22px)} .cq[data-work="haikyu"] .cq-result-hero{color:#f4f1f8} .cq[data-work="haikyu"] .cq-result-hero>p:first-child{color:#f2a15c} .cq[data-work="haikyu"] .cq-result-hero h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5)} .cq[data-work="haikyu"] .cq-result-hero .cq-match{color:#f2a15c} .cq[data-work="haikyu"] .cq-result-hero__catch{color:#e9e4f0} .cq[data-work="haikyu"] .cq-typechips span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff} @media(max-width:720px){.cq[data-work="haikyu"] .cq-hero__shade{background:linear-gradient(0deg,rgba(26,20,16,.97) 0%,rgba(26,20,16,.88) 56%,rgba(26,20,16,.25) 100%)}} /* 代表3人の判定根拠 */ .cq-cases{display:grid;gap:12px;margin-top:18px} .cq-case{background:#fff;border:1px solid #eee7ef;border-left:4px solid currentColor;border-radius:14px;padding:18px 20px} .cq-case__name{margin:0 0 8px;font-size:16px;font-weight:900;line-height:1.5} .cq-case__name span{display:inline-block;margin-left:9px;padding:4px 9px;border-radius:999px;background:#f4f0f8;font-size:11px;font-weight:800;vertical-align:middle} .cq-case__why{margin:0;font-size:14px;line-height:1.95} @media(min-width:760px){.cq-cases{grid-template-columns:repeat(3,1fr)}} /* ===== 判定対象キャラのカード（64タイプキャラの絵つき） ===== */ .cq-cardgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px} .cq-card2{position:relative;display:block;background:#fff;border:1px solid #eee6ef;border-radius:16px; padding:14px 12px 12px;text-decoration:none;color:inherit;text-align:center; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .cq-card2:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(70,50,90,.13);border-color:#d9c9e8} .cq-card2__art{display:block;width:88px;height:88px;margin:0 auto 10px;border-radius:50%;overflow:hidden; background:linear-gradient(150deg,#f6f1fb,#eef6f2);display:grid;place-items:center} .cq-card2__art img{width:100%;height:100%;object-fit:cover;display:block} .cq-card2__art i{font-style:normal;font-size:34px} .cq-card2__name{display:block;font-size:14px;font-weight:900;line-height:1.45;margin:0 0 8px} .cq-card2__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:4px} .cq-tag{font-style:normal;font-size:10px;font-weight:800;padding:3px 7px;border-radius:99px;background:#f2eef7;color:#5d4a68} .cq-tag--mbti{background:#ece4f8;color:#5b46a0} .cq-tag--s{background:#fff2dc;color:#a5701a} .cq-tag--a{background:#fde9f0;color:#b23a68} .cq-tag--v{background:#e2f4f0;color:#26786a} .cq-tag--f{background:#eeeaf8;color:#5b4a94} .cq-card2__b5{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:9px; padding-top:9px;border-top:1px dashed #ece3f2} .cq-card2__b5 img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none} .cq-card2__b5 em{font-style:normal;font-size:9.5px;font-weight:800;color:#877a92;line-height:1.4;text-align:left} /* 一覧から64タイプ／ビッグ5診断への橋 */ .cq-bridge2{margin-top:20px;padding:24px 20px;border-radius:20px; background:linear-gradient(150deg,#f7f2fd,#eef7f3);border:1px solid #e6dcf0} .cq-bridge2__lead{margin:0 0 16px;font-size:14px;line-height:2;color:#5b5065} .cq-bridge2__lead b{color:#3f3349} .cq-bridge2__btns{display:flex;flex-wrap:wrap;gap:9px} .cq-bridge2__btn{flex:1 1 220px;display:flex;align-items:center;justify-content:center;text-align:center; min-height:52px;padding:12px 16px;border-radius:13px;text-decoration:none;font-size:13.5px;font-weight:900; line-height:1.5;border:1.5px solid #ddd0ea;color:#5d4a68;background:#fff; transition:transform .18s ease,box-shadow .18s ease} .cq-bridge2__btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(83,59,91,.13)} .cq-bridge2__btn--primary{border-color:transparent;color:#fff;background:linear-gradient(135deg,#8163c4,#5b46a0); box-shadow:0 10px 24px rgba(91,70,160,.26)} @media(min-width:600px){.cq-cardgrid{grid-template-columns:repeat(3,1fr);gap:12px}} @media(min-width:900px){.cq-cardgrid{grid-template-columns:repeat(4,1fr)}.cq-card2__art{width:104px;height:104px}} /* 暗いヒーローの作品では、橋のブロックも作品色に寄せる */ .cq[data-work="ghibli"] .cq-bridge2__btn--primary{background:linear-gradient(135deg,#5aab7c,#2f7a58);box-shadow:0 10px 24px rgba(47,122,88,.26)} .cq[data-work="hunterhunter"] .cq-bridge2__btn--primary{background:linear-gradient(135deg,#39a06c,#1f6b45);box-shadow:0 10px 24px rgba(31,107,69,.26)} .cq[data-work="haikyu"] .cq-bridge2__btn--primary{background:linear-gradient(135deg,#ef8a3c,#c9631f);box-shadow:0 10px 24px rgba(201,99,31,.26)} /* ===== BUTTON COLOR FIX ========================================== 作品別の .cq[data-work="X"] a{color} が、ボタンの白文字を潰していた。 リンク色はテキストリンクにだけ効かせ、ボタンは明示的に戻す。 ================================================================ */ .cq[data-work] .cq-next__btn{color:#5d4a68} .cq[data-work] .cq-next__btn--primary{color:#fff} .cq[data-work] .cq-bridge2__btn{color:#5d4a68} .cq[data-work] .cq-bridge2__btn--primary{color:#fff} .cq[data-work] .cq-selfcta__btn{color:#fff} .cq[data-work] .cq-primary{color:#fff} .cq[data-work] .cq-card2{color:#443653} .cq[data-work] .cq-card2 .cq-card2__name{color:#443653} .cq[data-work] .cq-dictionary{color:#5b46a0} .cq[data-work] .cq-char-grid a{color:#443653} .cq[data-work] .cq-related a{color:#5b46a0} .cq[data-work] .cq-bridge__card{color:#443653} /* 暗いヒーローの作品は、ヒーロー内のリンクだけ白に寄せる */ .cq[data-work="jujutsu"] .cq-hero a, .cq[data-work="hunterhunter"] .cq-hero a, .cq[data-work="haikyu"] .cq-hero a{color:#fff} /* ===== 念系統（ハンターハンター） ===== */ .cq-nen{margin-top:16px;padding:26px 22px;border-radius:22px;color:#eaf6ee; background:linear-gradient(155deg,#123122 0%,#0d2419 55%,#16281c 100%); border:1px solid rgba(224,184,60,.32);box-shadow:0 14px 34px rgba(10,30,20,.28)} .cq-nen__eyebrow{margin:0 0 9px;font:900 11px/1 Poppins,sans-serif;letter-spacing:.16em;color:#e6c765} .cq-nen__h{margin:0 0 16px;font-size:clamp(19px,4vw,25px);line-height:1.5;color:#fff} .cq-nen__h b{color:#e6c765} .cq-nen__main{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 16px} .cq-nen__badge{padding:9px 16px;border-radius:999px;background:linear-gradient(135deg,#e6c765,#b99427); color:#1a2a1e;font-size:15px;font-weight:900} .cq-nen__tag{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:800} .cq-nen__pct{font:900 13px/1 Poppins,sans-serif;color:#e6c765} .cq-nen__desc{margin:0 0 14px;font-size:14px;line-height:2;color:#d5e6da} .cq-nen__second{margin:0 0 12px;padding:12px 15px;border-radius:12px;background:rgba(255,255,255,.07); font-size:13px;line-height:1.9;color:#c8ddce} .cq-nen__second b{color:#e6c765} .cq-nen__note{margin:0;font-size:10.5px;line-height:1.8;color:#8fa896} /* ===== 向いているポジション（ハイキュー） ===== */ .cq-pos{margin-top:16px;padding:26px 22px;border-radius:22px;color:#fff5ec; background:linear-gradient(155deg,#2f2419 0%,#3d2b18 55%,#2a2320 100%); border:1px solid rgba(239,138,60,.36);box-shadow:0 14px 34px rgba(40,26,14,.28)} .cq-pos__eyebrow{margin:0 0 9px;font:900 11px/1 Poppins,sans-serif;letter-spacing:.16em;color:#f2a15c} .cq-pos__h{margin:0 0 16px;font-size:clamp(19px,4vw,25px);line-height:1.5;color:#fff} .cq-pos__h b{color:#f2a15c} .cq-pos__main{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 16px} .cq-pos__badge{padding:9px 16px;border-radius:999px;background:linear-gradient(135deg,#f2a15c,#c9631f); color:#fff;font-size:15px;font-weight:900} .cq-pos__en{font:900 11px/1 Poppins,sans-serif;letter-spacing:.14em;color:#c8a789} .cq-pos__tag{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:800} .cq-pos__pct{font:900 13px/1 Poppins,sans-serif;color:#f2a15c} .cq-pos__desc{margin:0 0 12px;font-size:14px;line-height:2;color:#ecdcce} .cq-pos__who{margin:0 0 12px;padding:11px 15px;border-radius:12px;background:rgba(255,255,255,.08); font-size:13px;line-height:1.85;color:#e6d3c2} .cq-pos__who b{color:#f2a15c} .cq-pos__second{margin:0 0 12px;font-size:13px;line-height:1.9;color:#d9c7b7} .cq-pos__second b{color:#f2a15c} .cq-pos__note{margin:0;font-size:10.5px;line-height:1.8;color:#a8968a} /* ===== 領域展開の到達度（呪術廻戦） ===== */ .cq-ryo{margin-top:16px;padding:26px 22px;border-radius:22px;color:#efe9fa; background:linear-gradient(155deg,#1a1230 0%,#241a3f 55%,#150f26 100%); border:1px solid rgba(166,120,214,.34);box-shadow:0 14px 34px rgba(20,12,40,.32)} .cq-ryo__eyebrow{margin:0 0 9px;font:900 11px/1 Poppins,sans-serif;letter-spacing:.16em;color:#c9a7f5} .cq-ryo__h{margin:0 0 18px;font-size:clamp(19px,4vw,25px);line-height:1.5;color:#fff} .cq-ryo__h b{color:#c9a7f5} .cq-ryo__gauge{position:relative;height:12px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:0 0 10px} .cq-ryo__gauge i{display:block;height:100%;border-radius:inherit; background:linear-gradient(90deg,#5b46a0,#a678d6,#e0c7ff);transition:width .6s ease} .cq-ryo__val{position:absolute;right:0;top:-22px;font:900 12px/1 Poppins,sans-serif;color:#c9a7f5} .cq-ryo__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:0 0 18px} .cq-ryo__steps span{text-align:center;padding:7px 3px;border-radius:8px;font-size:10.5px;font-weight:800; background:rgba(255,255,255,.06);color:#9d90b5;border:1px solid transparent} .cq-ryo__steps span.is-on{background:rgba(166,120,214,.26);color:#fff;border-color:rgba(201,167,245,.5)} .cq-ryo__lead{margin:0 0 12px;font-size:15px;font-weight:800;line-height:1.85;color:#fff} .cq-ryo__desc{margin:0 0 14px;font-size:14px;line-height:2;color:#d8cfe8} .cq-ryo__note{margin:0;font-size:10.5px;line-height:1.8;color:#948aa8} .cq-ryo.is-master{border-color:rgba(224,199,255,.55)} .cq-ryo.is-training .cq-ryo__gauge i{background:linear-gradient(90deg,#4a4060,#7d6f9e)} /* ===== 到達レベル（ハイキュー） ===== */ .cq-lv{margin-top:16px;padding:26px 22px;border-radius:22px;color:#fff6ee; background:linear-gradient(155deg,#20242f 0%,#332821 55%,#1d2028 100%); border:1px solid rgba(239,138,60,.34);box-shadow:0 14px 34px rgba(20,22,30,.3)} .cq-lv__eyebrow{margin:0 0 9px;font:900 11px/1 Poppins,sans-serif;letter-spacing:.16em;color:#f2a15c} .cq-lv__h{margin:0 0 16px;font-size:clamp(19px,4.2vw,26px);line-height:1.5;color:#fff} .cq-lv__h b{color:#f2a15c} .cq-lv__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 0 18px} .cq-lv__steps span{text-align:center;padding:8px 2px;border-radius:8px;font-size:9.5px;font-weight:800; background:rgba(255,255,255,.06);color:#9a9188;border:1px solid transparent;line-height:1.35} .cq-lv__steps span.is-on{background:linear-gradient(135deg,rgba(242,161,92,.3),rgba(201,99,31,.28)); color:#fff;border-color:rgba(242,161,92,.55)} .cq-lv__lead{margin:0 0 12px;font-size:15px;font-weight:800;line-height:1.85;color:#fff} .cq-lv__desc{margin:0 0 18px;font-size:14px;line-height:2;color:#e2d5c9} .cq-lv__bars{list-style:none;padding:0;margin:0 0 16px} .cq-lv__bars li{display:grid;grid-template-columns:70px 1fr 30px;gap:9px;align-items:center;margin:0 0 9px;font-size:11.5px;font-weight:800} .cq-lv__bars i{height:8px;background:rgba(255,255,255,.1);border-radius:9px;overflow:hidden} .cq-lv__bars i b{display:block;height:100%;background:linear-gradient(90deg,#c9631f,#f2a15c)} .cq-lv__bars strong{text-align:right;color:#f2a15c;font-family:Poppins,sans-serif} .cq-lv__tip{margin:0 0 12px;padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.07); font-size:13px;line-height:1.9;color:#e6d8ca} .cq-lv__tip b{display:block;margin-bottom:4px;color:#f2a15c} .cq-lv__note{margin:0;font-size:10.5px;line-height:1.8;color:#a2968b} /* ===== 念系統レーダー ===== */ .cq-nen__radar{margin:6px 0 18px;display:flex;justify-content:center} .cq-nen__radar svg{width:100%;max-width:340px;height:auto;overflow:visible} .cq-nen__radar .nr-grid polygon{fill:none;stroke:rgba(230,199,101,.16);stroke-width:1} .cq-nen__radar .nr-grid line{stroke:rgba(230,199,101,.16);stroke-width:1} .cq-nen__radar .nr-area{fill:url(#nrFill);stroke:#e6c765;stroke-width:2.2;stroke-linejoin:round} .cq-nen__radar .nr-dot{fill:#0d2419;stroke:#e6c765;stroke-width:2} .cq-nen__radar .nr-dot--top{fill:#e6c765;stroke:#fff;stroke-width:2.5} .cq-nen__radar .nr-label{font-size:11px;font-weight:800;fill:#a9c4b2} .cq-nen__radar .nr-label--top{fill:#e6c765;font-size:12.5px} /* ===== PHOTO BAND ===== 背景写真が見える帯を上に作る。文字は下半分に寄せる。 */ .cq[data-work] .cq-ryo, .cq[data-work] .cq-nen, .cq[data-work] .cq-pos, .cq[data-work] .cq-lv{padding-top:96px;background-position:center top} .cq-kusa{padding-top:96px;background-position:center top} @media(min-width:700px){ .cq[data-work] .cq-ryo, .cq[data-work] .cq-nen, .cq[data-work] .cq-pos, .cq[data-work] .cq-lv{padding-top:130px} .cq-kusa{padding-top:130px} } /* ===== カード上部の写真（2026-08-13） ===== 背景に敷いて幕をかけると暗い写真が沈むので、無加工で出す。 */ .cq-cardphoto{margin:-26px -22px 20px;line-height:0;border-radius:22px 22px 0 0;overflow:hidden;background:#12101c} .cq-cardphoto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} .cq[data-work] .cq-ryo, .cq[data-work] .cq-nen, .cq[data-work] .cq-pos, .cq[data-work] .cq-lv{padding-top:26px} @media(min-width:700px){.cq[data-work] .cq-ryo,.cq[data-work] .cq-nen,.cq[data-work] .cq-pos,.cq[data-work] .cq-lv{padding-top:26px}} /* ===== HERO PHOTO VISIBILITY ===== 幕が濃すぎて（左.95・中央.84）ヒーロー写真がほぼ潰れていた。 文字は左に寄っているので、左だけ残して右へ抜く。 モバイルは文字が下にくるので、下だけ濃くする。 */ .cq[data-work="jujutsu"] .cq-hero__shade, .cq[data-work="hunterhunter"] .cq-hero__shade, .cq[data-work="haikyu"] .cq-hero__shade{ background:linear-gradient(90deg,rgba(16,10,28,.90) 0%,rgba(16,10,28,.62) 38%,rgba(16,10,28,.14) 68%,rgba(16,10,28,0) 100%), linear-gradient(0deg,rgba(11,7,20,.45),transparent 42%)} .cq[data-work="hunterhunter"] .cq-hero__shade{ background:linear-gradient(90deg,rgba(12,22,16,.90) 0%,rgba(12,22,16,.62) 38%,rgba(12,22,16,.14) 68%,rgba(12,22,16,0) 100%), linear-gradient(0deg,rgba(8,16,11,.45),transparent 42%)} .cq[data-work="haikyu"] .cq-hero__shade{ background:linear-gradient(90deg,rgba(26,20,16,.90) 0%,rgba(26,20,16,.62) 38%,rgba(26,20,16,.14) 68%,rgba(26,20,16,0) 100%), linear-gradient(0deg,rgba(18,13,10,.45),transparent 42%)} @media(max-width:720px){ .cq[data-work="jujutsu"] .cq-hero__shade{ background:linear-gradient(0deg,rgba(16,10,28,.94) 0%,rgba(16,10,28,.74) 42%,rgba(16,10,28,.16) 78%,rgba(16,10,28,0) 100%)} .cq[data-work="hunterhunter"] .cq-hero__shade{ background:linear-gradient(0deg,rgba(12,22,16,.94) 0%,rgba(12,22,16,.74) 42%,rgba(12,22,16,.16) 78%,rgba(12,22,16,0) 100%)} .cq[data-work="haikyu"] .cq-hero__shade{ background:linear-gradient(0deg,rgba(26,20,16,.94) 0%,rgba(26,20,16,.74) 42%,rgba(26,20,16,.16) 78%,rgba(26,20,16,0) 100%)} } /* ===== ほかの作品でも診断する（2026-08-13） ===== 1作品だけ受けて帰ってしまうのがもったいないので、次の1本へ送る。 カードの絵はヒーロー画像から起こした小さなサムネイル（1枚12〜20KB）。 */ .cq-cross{margin:30px 0 0} .cq-cross--inresult{margin:22px 0 0} .cq-cross__grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin:14px 0 0} .cq-cross__card{ display:flex;flex-direction:column;border-radius:16px;overflow:hidden; background:#fff;border:1.5px solid #e8e2f0;text-decoration:none; box-shadow:0 6px 18px rgba(48,34,72,.07); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} .cq-cross__card:hover{ transform:translateY(-2px);box-shadow:0 12px 26px rgba(48,34,72,.13);border-color:#d8cce9} .cq-cross__art{display:block;line-height:0;background:#e9e4f0} .cq-cross__art img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} .cq-cross__body{display:block;padding:11px 12px 6px} .cq-cross__name{display:block;font-size:14px;font-weight:900;color:#2f2838;line-height:1.4} .cq-cross__sub{display:block;margin:4px 0 0;font-size:11.5px;font-weight:700;color:#7a6f8a;line-height:1.5} .cq-cross__meta{display:block;margin:6px 0 0;font-size:11px;font-weight:700;color:#9a90aa} .cq-cross__go{ display:block;margin:auto 12px 12px;padding:9px 8px;border-radius:999px; background:#6b3fa0;color:#fff;font-size:12px;font-weight:900;text-align:center;letter-spacing:.01em} /* 遷移先の作品の色をボタンに出す。どこへ行くのかが色でも分かるようにする。 */ .cq-cross__card[data-work="jujutsu"] .cq-cross__go{background:#4b3080} .cq-cross__card[data-work="ghibli"] .cq-cross__go{background:#2f7d55} .cq-cross__card[data-work="hunterhunter"] .cq-cross__go{background:#1f6b45} .cq-cross__card[data-work="haikyu"] .cq-cross__go{background:#d2721f} .cq-cross__card[data-work="chiikawa"] .cq-cross__go{background:#e4739b} .cq-cross__card[data-work="seihantai"] .cq-cross__go{background:#2f7fae} @media(max-width:400px){ .cq-cross__grid{grid-template-columns:repeat(2,1fr);gap:10px} .cq-cross__name{font-size:13px} .cq-cross__sub{font-size:11px} .cq-cross__go{margin:auto 9px 9px;padding:8px 6px;font-size:11.5px} } /* ===== 書き下ろしの結果本文（2026-08-14） ===== 辞典の引用ではなく〈あなた〉の話にしたので、頭の一行を強く見せる。 */ .cq-reading__catch{ margin:0 0 16px;padding:14px 16px;border-radius:12px; background:#faf7fd;border-left:4px solid #6b3fa0; font-size:15px;font-weight:900;line-height:1.75;color:#2f2838} .cq-reading__note{ margin:16px 0 0;font-size:11.5px;line-height:1.85;color:#8a7f9c} /* 2026-08-14: 2位3位は辞典へのリンクをやめて、順位の表示だけにした。 リンクでなくなったぶん、押せそうに見える装飾を外す。 */ .cq-runners .cq-runner{ display:flex;align-items:center;gap:9px; padding:12px 13px;border-radius:13px;background:#fff; border:1.5px solid #ece5f5;text-decoration:none;cursor:default} .cq-runners .cq-runner em{ flex:0 0 auto;font:900 11px/1 Poppins,sans-serif;color:#a99cbb;font-style:normal} .cq-runners .cq-runner span{flex:0 0 auto;font-size:19px;line-height:1} .cq-runners .cq-runner b{flex:1 1 auto;font-size:14px;font-weight:900;color:#2f2838} .cq-runners .cq-runner small{flex:0 0 auto;font-size:11px;font-weight:700;color:#8a7f9c} @media(max-width:400px){ .cq-runners .cq-runner{flex-wrap:wrap;gap:6px 8px} .cq-runners .cq-runner small{flex:1 1 100%} } /* 本文の最後から、次に読むものへつなぐ一文。 コラムへの誘導は静かな補足に留める。下の64タイプ診断と competing させない。 */ .cq-reading__bridge{ position:relative;margin:15px 0 0;padding:13px 16px;border-radius:13px; background:#faf7fd;border:1px solid #efe8f6; font-size:13px;line-height:1.95;color:#544766} /* 64タイプ診断へつなぐ一文。 ここは結果画面でいちばん先へ進んでほしい導線なので、注意書きではなく「招き」にする。 文面が「この下の診断で」と言っているので、矢印で実際に下を指す。 */ .cq-reading__bridge.cq-reading__bridge--quiz{ margin-top:12px;padding:18px 19px 20px;border:0;border-radius:17px; background:linear-gradient(152deg,#f5edfd 0%,#fdeef3 100%); box-shadow:0 9px 24px rgba(107,63,160,.11); color:#453257;font-weight:700;letter-spacing:.01em} .cq-reading__bridge--quiz:after{ content:"";display:block;width:11px;height:11px;margin:12px auto 0; border-right:2.5px solid #8b5fc0;border-bottom:2.5px solid #8b5fc0; border-radius:1px;transform:rotate(45deg);opacity:.7} @media (prefers-reduced-motion:no-preference){ .cq-reading__bridge--quiz:after{animation:cqBridgeNudge 2.6s ease-in-out infinite} } @keyframes cqBridgeNudge{ 0%,100%{transform:rotate(45deg) translate(0,0)} 50%{transform:rotate(45deg) translate(3px,3px)}} /* 2026-08-23: ONE PIECEの海賊度ゲージ。既存の cq-pos の中で使う。 */ .cq-gauge{margin:14px 0 4px} .cq-gauge__bar{position:relative;height:16px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.14)} .cq-gauge__fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#e8a33c,#d9603a)} .cq-gauge__labels{display:flex;justify-content:space-between;margin:7px 2px 0;font-size:13px;font-weight:800;letter-spacing:.02em} .cq-gauge__labels b:first-child{color:#f0b25a} .cq-gauge__labels b:last-child{color:#9fb6d4} /* 画像付きの導線（2026-08-25）。シェアの直後に置く。 テキストリンクだけでは踏まれなかったので、絵で「自分の型も見たい」に繋ぐ。 */ .cq-dousen{display:grid;gap:10px;margin:22px 0 0;} .cq-dousen__card{display:grid;grid-template-columns:78px 1fr;grid-template-rows:auto auto auto; gap:2px 12px;align-items:center;text-decoration:none;color:inherit; background:#fff;border:2px solid #e6e9f0;border-radius:14px;padding:12px 14px; transition:border-color .15s,box-shadow .15s;} .cq-dousen__card:hover{border-color:#7349d1;box-shadow:0 4px 16px rgba(115,73,209,.14);} .cq-dousen__card img{grid-row:1/4;width:78px;height:78px;object-fit:contain;border-radius:10px;background:#f6f7fb;} .cq-dousen__t{font-size:14.5px;font-weight:900;line-height:1.5;} .cq-dousen__t b{color:#7349d1;} .cq-dousen__d{font-size:11.5px;line-height:1.7;color:#666e7d;} .cq-dousen__b{font-size:12.5px;font-weight:900;color:#7349d1;} @media (min-width:760px){.cq-dousen{grid-template-columns:1fr 1fr;}} /* ============================================================ 2026-08-29: 作品ごとの配色を全作品ぶん揃える。 実測で、テーマが入っていたのは5本だけで、残りはちいかわの見た目のまま出ていた。 深さがばらつかないよう、呪術のブロックを雛形にして生成している （生成器 gen_work_themes_0829.py）。手で足すときも同じ24ルールを守ること。 ============================================================ */ /* ---- NARUTO：火の国の橙 × 忍の藍 ---- */ .cq[data-work="naruto"]{--ink:#33261c;--muted:#6b6157;background:#fdf6ee} .cq[data-work="naruto"] a{color:#8a4213} .cq[data-work="naruto"] .cq-eyebrow, .cq[data-work="naruto"] .cq-card__scene, .cq[data-work="naruto"] .cq-article>header>p:first-child{color:#e07b2c} .cq[data-work="naruto"] .cq-hero h1{color:#3f332a} .cq[data-work="naruto"] .cq-hero__shade{background:linear-gradient(90deg,rgba(253,246,238,.97) 0%,rgba(253,246,238,.9) 43%,rgba(253,246,238,.08) 75%),linear-gradient(0deg,rgba(51,38,28,.22),transparent 50%)} .cq[data-work="naruto"] .cq-primary, .cq[data-work="naruto"] .cq-selfcta__btn{background:linear-gradient(135deg,#e07b2c,#8a4213);box-shadow:0 10px 24px rgba(138,66,19,.3)} .cq[data-work="naruto"] .cq-progress__track i{background:linear-gradient(90deg,#8a4213,#f2b276)} .cq[data-work="naruto"] .cq-option:hover, .cq[data-work="naruto"] .cq-option:focus-visible{border-color:#e9a067;background:#fdf6f0} .cq[data-work="naruto"] .cq-option.is-selected{background:#fbeee4;border-color:#e07b2c} .cq[data-work="naruto"] .cq-option span{background:#fbeee4;color:#8a4213} .cq[data-work="naruto"] .cq-option.is-selected span{background:#e07b2c;color:#fff} .cq[data-work="naruto"] .cq-progress__meta{color:#6b6157} .cq[data-work="naruto"] .cq-card__scene{color:#8a4213} .cq[data-work="naruto"] .cq-match, .cq[data-work="naruto"] .cq-next__h b, .cq[data-work="naruto"] .cq-selfcta__h b{color:#8a4213} .cq[data-work="naruto"] .cq-radar__user{fill:rgba(224,123,44,.2);stroke:#e07b2c} .cq[data-work="naruto"] .cq-radar__char{fill:rgba(107,97,87,.16);stroke:#6b6157} .cq[data-work="naruto"] .cq-radar-legend span:before{background:#e07b2c} .cq[data-work="naruto"] .cq-radar-legend span+span:before{background:#6b6157} .cq[data-work="naruto"] .cq-axis-list i b{background:linear-gradient(90deg,#6b6157,#f2b276)} .cq[data-work="naruto"] .cq-result-reading h3{color:#e07b2c} .cq[data-work="naruto"] .cq-next{border-left-color:#e07b2c} .cq[data-work="naruto"] .cq-next__eyebrow{color:#e07b2c} .cq[data-work="naruto"] .cq-next__btn--primary{background:linear-gradient(135deg,#e07b2c,#8a4213);box-shadow:0 10px 24px rgba(138,66,19,.28)} .cq[data-work="naruto"] .cq-selfcta{background:linear-gradient(160deg,#fdf6f0 0%,#fcf2ea 52%,#fdf6f0 100%);border-color:#f8e2d1} .cq[data-work="naruto"] .cq-related, .cq[data-work="naruto"] .cq-axis-grid span{background:linear-gradient(135deg,#fdf6f0,#fdf8f4)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="naruto"] .cq-hero__shade{background:linear-gradient(90deg,rgba(31,17,6,.95) 0%,rgba(31,17,6,.84) 46%,rgba(31,17,6,.30) 82%),linear-gradient(0deg,rgba(20,11,4,.72),transparent 55%)} .cq[data-work="naruto"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="naruto"] .cq-hero__lead{color:#f9e5d5} .cq[data-work="naruto"] .cq-hero__lead strong, .cq[data-work="naruto"] .cq-hero__lead b{color:#fff} .cq[data-work="naruto"] .cq-hero__note{color:#f3caab} .cq[data-work="naruto"] .cq-hero .cq-eyebrow{color:#f5d5bb} .cq[data-work="naruto"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="naruto"] .cq-hero .b5shb__head{color:#f5d5bb} .cq[data-work="naruto"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="naruto"] .cq-hero__shade{background:linear-gradient(90deg,rgba(31,17,6,.95) 0%,rgba(31,17,6,.86) 52%,rgba(31,17,6,.16) 88%),linear-gradient(0deg,rgba(20,11,4,.70),transparent 55%)} } /* ---- ONE PIECE：海の青 × 帆の白 ---- */ .cq[data-work="onepiece"]{--ink:#1e2b36;--muted:#5b6b78;background:#eef7fc} .cq[data-work="onepiece"] a{color:#0f4a72} .cq[data-work="onepiece"] .cq-eyebrow, .cq[data-work="onepiece"] .cq-card__scene, .cq[data-work="onepiece"] .cq-article>header>p:first-child{color:#1f7fb8} .cq[data-work="onepiece"] .cq-hero h1{color:#2c3842} .cq[data-work="onepiece"] .cq-hero__shade{background:linear-gradient(90deg,rgba(238,247,252,.97) 0%,rgba(238,247,252,.9) 43%,rgba(238,247,252,.08) 75%),linear-gradient(0deg,rgba(30,43,54,.22),transparent 50%)} .cq[data-work="onepiece"] .cq-primary, .cq[data-work="onepiece"] .cq-selfcta__btn{background:linear-gradient(135deg,#1f7fb8,#0f4a72);box-shadow:0 10px 24px rgba(15,74,114,.3)} .cq[data-work="onepiece"] .cq-progress__track i{background:linear-gradient(90deg,#0f4a72,#87c6e6)} .cq[data-work="onepiece"] .cq-option:hover, .cq[data-work="onepiece"] .cq-option:focus-visible{border-color:#5ea3cc;background:#eff6fa} .cq[data-work="onepiece"] .cq-option.is-selected{background:#e2eef6;border-color:#1f7fb8} .cq[data-work="onepiece"] .cq-option span{background:#e2eef6;color:#0f4a72} .cq[data-work="onepiece"] .cq-option.is-selected span{background:#1f7fb8;color:#fff} .cq[data-work="onepiece"] .cq-progress__meta{color:#5b6b78} .cq[data-work="onepiece"] .cq-card__scene{color:#0f4a72} .cq[data-work="onepiece"] .cq-match, .cq[data-work="onepiece"] .cq-next__h b, .cq[data-work="onepiece"] .cq-selfcta__h b{color:#0f4a72} .cq[data-work="onepiece"] .cq-radar__user{fill:rgba(31,127,184,.2);stroke:#1f7fb8} .cq[data-work="onepiece"] .cq-radar__char{fill:rgba(91,107,120,.16);stroke:#5b6b78} .cq[data-work="onepiece"] .cq-radar-legend span:before{background:#1f7fb8} .cq[data-work="onepiece"] .cq-radar-legend span+span:before{background:#5b6b78} .cq[data-work="onepiece"] .cq-axis-list i b{background:linear-gradient(90deg,#5b6b78,#87c6e6)} .cq[data-work="onepiece"] .cq-result-reading h3{color:#1f7fb8} .cq[data-work="onepiece"] .cq-next{border-left-color:#1f7fb8} .cq[data-work="onepiece"] .cq-next__eyebrow{color:#1f7fb8} .cq[data-work="onepiece"] .cq-next__btn--primary{background:linear-gradient(135deg,#1f7fb8,#0f4a72);box-shadow:0 10px 24px rgba(15,74,114,.28)} .cq[data-work="onepiece"] .cq-selfcta{background:linear-gradient(160deg,#eff6fa 0%,#e9f2f8 52%,#eff6fa 100%);border-color:#cee3ef} .cq[data-work="onepiece"] .cq-related, .cq[data-work="onepiece"] .cq-axis-grid span{background:linear-gradient(135deg,#eff6fa,#f4f9fb)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="onepiece"] .cq-hero__shade{background:linear-gradient(90deg,rgba(4,18,26,.95) 0%,rgba(4,18,26,.84) 46%,rgba(4,18,26,.30) 82%),linear-gradient(0deg,rgba(3,11,17,.72),transparent 55%)} .cq[data-work="onepiece"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="onepiece"] .cq-hero__lead{color:#d2e5f1} .cq[data-work="onepiece"] .cq-hero__lead strong, .cq[data-work="onepiece"] .cq-hero__lead b{color:#fff} .cq[data-work="onepiece"] .cq-hero__note{color:#a5cce3} .cq[data-work="onepiece"] .cq-hero .cq-eyebrow{color:#b7d6e8} .cq[data-work="onepiece"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="onepiece"] .cq-hero .b5shb__head{color:#b7d6e8} .cq[data-work="onepiece"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="onepiece"] .cq-hero__shade{background:linear-gradient(90deg,rgba(4,18,26,.95) 0%,rgba(4,18,26,.86) 52%,rgba(4,18,26,.16) 88%),linear-gradient(0deg,rgba(3,11,17,.70),transparent 55%)} } /* ---- 鬼滅の刃：大正の墨 × 竹の緑 ---- */ .cq[data-work="kimetsu"]{--ink:#1f2622;--muted:#5f6b64;background:#f1f8f4} .cq[data-work="kimetsu"] a{color:#17452f} .cq[data-work="kimetsu"] .cq-eyebrow, .cq[data-work="kimetsu"] .cq-card__scene, .cq[data-work="kimetsu"] .cq-article>header>p:first-child{color:#2f7a5a} .cq[data-work="kimetsu"] .cq-hero h1{color:#2c332f} .cq[data-work="kimetsu"] .cq-hero__shade{background:linear-gradient(90deg,rgba(241,248,244,.97) 0%,rgba(241,248,244,.9) 43%,rgba(241,248,244,.08) 75%),linear-gradient(0deg,rgba(31,38,34,.22),transparent 50%)} .cq[data-work="kimetsu"] .cq-primary, .cq[data-work="kimetsu"] .cq-selfcta__btn{background:linear-gradient(135deg,#2f7a5a,#17452f);box-shadow:0 10px 24px rgba(23,69,47,.3)} .cq[data-work="kimetsu"] .cq-progress__track i{background:linear-gradient(90deg,#17452f,#8ac6ac)} .cq[data-work="kimetsu"] .cq-option:hover, .cq[data-work="kimetsu"] .cq-option:focus-visible{border-color:#699f88;background:#f0f6f3} .cq[data-work="kimetsu"] .cq-option.is-selected{background:#e4eeea;border-color:#2f7a5a} .cq[data-work="kimetsu"] .cq-option span{background:#e4eeea;color:#17452f} .cq[data-work="kimetsu"] .cq-option.is-selected span{background:#2f7a5a;color:#fff} .cq[data-work="kimetsu"] .cq-progress__meta{color:#5f6b64} .cq[data-work="kimetsu"] .cq-card__scene{color:#17452f} .cq[data-work="kimetsu"] .cq-match, .cq[data-work="kimetsu"] .cq-next__h b, .cq[data-work="kimetsu"] .cq-selfcta__h b{color:#17452f} .cq[data-work="kimetsu"] .cq-radar__user{fill:rgba(47,122,90,.2);stroke:#2f7a5a} .cq[data-work="kimetsu"] .cq-radar__char{fill:rgba(95,107,100,.16);stroke:#5f6b64} .cq[data-work="kimetsu"] .cq-radar-legend span:before{background:#2f7a5a} .cq[data-work="kimetsu"] .cq-radar-legend span+span:before{background:#5f6b64} .cq[data-work="kimetsu"] .cq-axis-list i b{background:linear-gradient(90deg,#5f6b64,#8ac6ac)} .cq[data-work="kimetsu"] .cq-result-reading h3{color:#2f7a5a} .cq[data-work="kimetsu"] .cq-next{border-left-color:#2f7a5a} .cq[data-work="kimetsu"] .cq-next__eyebrow{color:#2f7a5a} .cq[data-work="kimetsu"] .cq-next__btn--primary{background:linear-gradient(135deg,#2f7a5a,#17452f);box-shadow:0 10px 24px rgba(23,69,47,.28)} .cq[data-work="kimetsu"] .cq-selfcta{background:linear-gradient(160deg,#f0f6f3 0%,#eaf2ee 52%,#f0f6f3 100%);border-color:#d1e2db} .cq[data-work="kimetsu"] .cq-related, .cq[data-work="kimetsu"] .cq-axis-grid span{background:linear-gradient(135deg,#f0f6f3,#f5f8f7)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="kimetsu"] .cq-hero__shade{background:linear-gradient(90deg,rgba(7,17,13,.95) 0%,rgba(7,17,13,.84) 46%,rgba(7,17,13,.30) 82%),linear-gradient(0deg,rgba(4,11,8,.72),transparent 55%)} .cq[data-work="kimetsu"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="kimetsu"] .cq-hero__lead{color:#d5e4de} .cq[data-work="kimetsu"] .cq-hero__lead strong, .cq[data-work="kimetsu"] .cq-hero__lead b{color:#fff} .cq[data-work="kimetsu"] .cq-hero__note{color:#accabd} .cq[data-work="kimetsu"] .cq-hero .cq-eyebrow{color:#bcd4ca} .cq[data-work="kimetsu"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="kimetsu"] .cq-hero .b5shb__head{color:#bcd4ca} .cq[data-work="kimetsu"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="kimetsu"] .cq-hero__shade{background:linear-gradient(90deg,rgba(7,17,13,.95) 0%,rgba(7,17,13,.86) 52%,rgba(7,17,13,.16) 88%),linear-gradient(0deg,rgba(4,11,8,.70),transparent 55%)} } /* ---- 薬屋のひとりごと：後宮の翡翠 × 朱 ---- */ .cq[data-work="kusuriya"]{--ink:#1e2a29;--muted:#62706e;background:#eef8f6} .cq[data-work="kusuriya"] a{color:#14514a} .cq[data-work="kusuriya"] .cq-eyebrow, .cq[data-work="kusuriya"] .cq-card__scene, .cq[data-work="kusuriya"] .cq-article>header>p:first-child{color:#2f8a7d} .cq[data-work="kusuriya"] .cq-hero h1{color:#2c3736} .cq[data-work="kusuriya"] .cq-hero__shade{background:linear-gradient(90deg,rgba(238,248,246,.97) 0%,rgba(238,248,246,.9) 43%,rgba(238,248,246,.08) 75%),linear-gradient(0deg,rgba(30,42,41,.22),transparent 50%)} .cq[data-work="kusuriya"] .cq-primary, .cq[data-work="kusuriya"] .cq-selfcta__btn{background:linear-gradient(135deg,#2f8a7d,#14514a);box-shadow:0 10px 24px rgba(20,81,74,.3)} .cq[data-work="kusuriya"] .cq-progress__track i{background:linear-gradient(90deg,#14514a,#8ecec3)} .cq[data-work="kusuriya"] .cq-option:hover, .cq[data-work="kusuriya"] .cq-option:focus-visible{border-color:#69aba1;background:#f0f7f6} .cq[data-work="kusuriya"] .cq-option.is-selected{background:#e4f0ee;border-color:#2f8a7d} .cq[data-work="kusuriya"] .cq-option span{background:#e4f0ee;color:#14514a} .cq[data-work="kusuriya"] .cq-option.is-selected span{background:#2f8a7d;color:#fff} .cq[data-work="kusuriya"] .cq-progress__meta{color:#62706e} .cq[data-work="kusuriya"] .cq-card__scene{color:#14514a} .cq[data-work="kusuriya"] .cq-match, .cq[data-work="kusuriya"] .cq-next__h b, .cq[data-work="kusuriya"] .cq-selfcta__h b{color:#14514a} .cq[data-work="kusuriya"] .cq-radar__user{fill:rgba(47,138,125,.2);stroke:#2f8a7d} .cq[data-work="kusuriya"] .cq-radar__char{fill:rgba(98,112,110,.16);stroke:#62706e} .cq[data-work="kusuriya"] .cq-radar-legend span:before{background:#2f8a7d} .cq[data-work="kusuriya"] .cq-radar-legend span+span:before{background:#62706e} .cq[data-work="kusuriya"] .cq-axis-list i b{background:linear-gradient(90deg,#62706e,#8ecec3)} .cq[data-work="kusuriya"] .cq-result-reading h3{color:#2f8a7d} .cq[data-work="kusuriya"] .cq-next{border-left-color:#2f8a7d} .cq[data-work="kusuriya"] .cq-next__eyebrow{color:#2f8a7d} .cq[data-work="kusuriya"] .cq-next__btn--primary{background:linear-gradient(135deg,#2f8a7d,#14514a);box-shadow:0 10px 24px rgba(20,81,74,.28)} .cq[data-work="kusuriya"] .cq-selfcta{background:linear-gradient(160deg,#f0f7f6 0%,#eaf3f2 52%,#f0f7f6 100%);border-color:#d1e5e2} .cq[data-work="kusuriya"] .cq-related, .cq[data-work="kusuriya"] .cq-axis-grid span{background:linear-gradient(135deg,#f0f7f6,#f5f9f8)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="kusuriya"] .cq-hero__shade{background:linear-gradient(90deg,rgba(7,19,18,.95) 0%,rgba(7,19,18,.84) 46%,rgba(7,19,18,.30) 82%),linear-gradient(0deg,rgba(4,12,11,.72),transparent 55%)} .cq[data-work="kusuriya"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="kusuriya"] .cq-hero__lead{color:#d5e8e5} .cq[data-work="kusuriya"] .cq-hero__lead strong, .cq[data-work="kusuriya"] .cq-hero__lead b{color:#fff} .cq[data-work="kusuriya"] .cq-hero__note{color:#acd0cb} .cq[data-work="kusuriya"] .cq-hero .cq-eyebrow{color:#bcdad5} .cq[data-work="kusuriya"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="kusuriya"] .cq-hero .b5shb__head{color:#bcdad5} .cq[data-work="kusuriya"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="kusuriya"] .cq-hero__shade{background:linear-gradient(90deg,rgba(7,19,18,.95) 0%,rgba(7,19,18,.86) 52%,rgba(7,19,18,.16) 88%),linear-gradient(0deg,rgba(4,12,11,.70),transparent 55%)} } /* ---- 進撃の巨人：壁の石 × 錆 ---- */ .cq[data-work="shingeki"]{--ink:#262220;--muted:#6a655f;background:#f7f3ee} .cq[data-work="shingeki"] a{color:#4a2e1d} .cq[data-work="shingeki"] .cq-eyebrow, .cq[data-work="shingeki"] .cq-card__scene, .cq[data-work="shingeki"] .cq-article>header>p:first-child{color:#8a5a3c} .cq[data-work="shingeki"] .cq-hero h1{color:#332f2d} .cq[data-work="shingeki"] .cq-hero__shade{background:linear-gradient(90deg,rgba(247,243,238,.97) 0%,rgba(247,243,238,.9) 43%,rgba(247,243,238,.08) 75%),linear-gradient(0deg,rgba(38,34,32,.22),transparent 50%)} .cq[data-work="shingeki"] .cq-primary, .cq[data-work="shingeki"] .cq-selfcta__btn{background:linear-gradient(135deg,#8a5a3c,#4a2e1d);box-shadow:0 10px 24px rgba(74,46,29,.3)} .cq[data-work="shingeki"] .cq-progress__track i{background:linear-gradient(90deg,#4a2e1d,#d2a887)} .cq[data-work="shingeki"] .cq-option:hover, .cq[data-work="shingeki"] .cq-option:focus-visible{border-color:#ab8873;background:#f7f3f1} .cq[data-work="shingeki"] .cq-option.is-selected{background:#f0eae6;border-color:#8a5a3c} .cq[data-work="shingeki"] .cq-option span{background:#f0eae6;color:#4a2e1d} .cq[data-work="shingeki"] .cq-option.is-selected span{background:#8a5a3c;color:#fff} .cq[data-work="shingeki"] .cq-progress__meta{color:#6a655f} .cq[data-work="shingeki"] .cq-card__scene{color:#4a2e1d} .cq[data-work="shingeki"] .cq-match, .cq[data-work="shingeki"] .cq-next__h b, .cq[data-work="shingeki"] .cq-selfcta__h b{color:#4a2e1d} .cq[data-work="shingeki"] .cq-radar__user{fill:rgba(138,90,60,.2);stroke:#8a5a3c} .cq[data-work="shingeki"] .cq-radar__char{fill:rgba(106,101,95,.16);stroke:#6a655f} .cq[data-work="shingeki"] .cq-radar-legend span:before{background:#8a5a3c} .cq[data-work="shingeki"] .cq-radar-legend span+span:before{background:#6a655f} .cq[data-work="shingeki"] .cq-axis-list i b{background:linear-gradient(90deg,#6a655f,#d2a887)} .cq[data-work="shingeki"] .cq-result-reading h3{color:#8a5a3c} .cq[data-work="shingeki"] .cq-next{border-left-color:#8a5a3c} .cq[data-work="shingeki"] .cq-next__eyebrow{color:#8a5a3c} .cq[data-work="shingeki"] .cq-next__btn--primary{background:linear-gradient(135deg,#8a5a3c,#4a2e1d);box-shadow:0 10px 24px rgba(74,46,29,.28)} .cq[data-work="shingeki"] .cq-selfcta{background:linear-gradient(160deg,#f7f3f1 0%,#f3eeec 52%,#f7f3f1 100%);border-color:#e5dbd4} .cq[data-work="shingeki"] .cq-related, .cq[data-work="shingeki"] .cq-axis-grid span{background:linear-gradient(135deg,#f7f3f1,#f9f7f5)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="shingeki"] .cq-hero__shade{background:linear-gradient(90deg,rgba(19,13,8,.95) 0%,rgba(19,13,8,.84) 46%,rgba(19,13,8,.30) 82%),linear-gradient(0deg,rgba(12,8,5,.72),transparent 55%)} .cq[data-work="shingeki"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="shingeki"] .cq-hero__lead{color:#e8ded8} .cq[data-work="shingeki"] .cq-hero__lead strong, .cq[data-work="shingeki"] .cq-hero__lead b{color:#fff} .cq[data-work="shingeki"] .cq-hero__note{color:#d0bdb1} .cq[data-work="shingeki"] .cq-hero .cq-eyebrow{color:#dacac1} .cq[data-work="shingeki"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="shingeki"] .cq-hero .b5shb__head{color:#dacac1} .cq[data-work="shingeki"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="shingeki"] .cq-hero__shade{background:linear-gradient(90deg,rgba(19,13,8,.95) 0%,rgba(19,13,8,.86) 52%,rgba(19,13,8,.16) 88%),linear-gradient(0deg,rgba(12,8,5,.70),transparent 55%)} } /* ---- 銀魂：江戸の藍 × 銀 ---- */ .cq[data-work="gintama"]{--ink:#21262e;--muted:#646b74;background:#f0f4f9} .cq[data-work="gintama"] a{color:#1a3760} .cq[data-work="gintama"] .cq-eyebrow, .cq[data-work="gintama"] .cq-card__scene, .cq[data-work="gintama"] .cq-article>header>p:first-child{color:#33639e} .cq[data-work="gintama"] .cq-hero h1{color:#2e333b} .cq[data-work="gintama"] .cq-hero__shade{background:linear-gradient(90deg,rgba(240,244,249,.97) 0%,rgba(240,244,249,.9) 43%,rgba(240,244,249,.08) 75%),linear-gradient(0deg,rgba(33,38,46,.22),transparent 50%)} .cq[data-work="gintama"] .cq-primary, .cq[data-work="gintama"] .cq-selfcta__btn{background:linear-gradient(135deg,#33639e,#1a3760);box-shadow:0 10px 24px rgba(26,55,96,.3)} .cq[data-work="gintama"] .cq-progress__track i{background:linear-gradient(90deg,#1a3760,#9abddf)} .cq[data-work="gintama"] .cq-option:hover, .cq[data-work="gintama"] .cq-option:focus-visible{border-color:#6c8fb9;background:#f1f4f8} .cq[data-work="gintama"] .cq-option.is-selected{background:#e4ebf2;border-color:#33639e} .cq[data-work="gintama"] .cq-option span{background:#e4ebf2;color:#1a3760} .cq[data-work="gintama"] .cq-option.is-selected span{background:#33639e;color:#fff} .cq[data-work="gintama"] .cq-progress__meta{color:#646b74} .cq[data-work="gintama"] .cq-card__scene{color:#1a3760} .cq[data-work="gintama"] .cq-match, .cq[data-work="gintama"] .cq-next__h b, .cq[data-work="gintama"] .cq-selfcta__h b{color:#1a3760} .cq[data-work="gintama"] .cq-radar__user{fill:rgba(51,99,158,.2);stroke:#33639e} .cq[data-work="gintama"] .cq-radar__char{fill:rgba(100,107,116,.16);stroke:#646b74} .cq[data-work="gintama"] .cq-radar-legend span:before{background:#33639e} .cq[data-work="gintama"] .cq-radar-legend span+span:before{background:#646b74} .cq[data-work="gintama"] .cq-axis-list i b{background:linear-gradient(90deg,#646b74,#9abddf)} .cq[data-work="gintama"] .cq-result-reading h3{color:#33639e} .cq[data-work="gintama"] .cq-next{border-left-color:#33639e} .cq[data-work="gintama"] .cq-next__eyebrow{color:#33639e} .cq[data-work="gintama"] .cq-next__btn--primary{background:linear-gradient(135deg,#33639e,#1a3760);box-shadow:0 10px 24px rgba(26,55,96,.28)} .cq[data-work="gintama"] .cq-selfcta{background:linear-gradient(160deg,#f1f4f8 0%,#ebeff5 52%,#f1f4f8 100%);border-color:#d2ddea} .cq[data-work="gintama"] .cq-related, .cq[data-work="gintama"] .cq-axis-grid span{background:linear-gradient(135deg,#f1f4f8,#f5f7fa)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="gintama"] .cq-hero__shade{background:linear-gradient(90deg,rgba(7,14,22,.95) 0%,rgba(7,14,22,.84) 46%,rgba(7,14,22,.30) 82%),linear-gradient(0deg,rgba(5,9,14,.72),transparent 55%)} .cq[data-work="gintama"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="gintama"] .cq-hero__lead{color:#d6e0ec} .cq[data-work="gintama"] .cq-hero__lead strong, .cq[data-work="gintama"] .cq-hero__lead b{color:#fff} .cq[data-work="gintama"] .cq-hero__note{color:#adc1d8} .cq[data-work="gintama"] .cq-hero .cq-eyebrow{color:#becde0} .cq[data-work="gintama"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="gintama"] .cq-hero .b5shb__head{color:#becde0} .cq[data-work="gintama"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="gintama"] .cq-hero__shade{background:linear-gradient(90deg,rgba(7,14,22,.95) 0%,rgba(7,14,22,.86) 52%,rgba(7,14,22,.16) 88%),linear-gradient(0deg,rgba(5,9,14,.70),transparent 55%)} } /* ---- ハリー・ポッター：蝋燭の金 × 城の石 ---- */ .cq[data-work="harrypotter"]{--ink:#2a2620;--muted:#6d675c;background:#faf5ea} .cq[data-work="harrypotter"] a{color:#5e4113} .cq[data-work="harrypotter"] .cq-eyebrow, .cq[data-work="harrypotter"] .cq-card__scene, .cq[data-work="harrypotter"] .cq-article>header>p:first-child{color:#a8792a} .cq[data-work="harrypotter"] .cq-hero h1{color:#37332d} .cq[data-work="harrypotter"] .cq-hero__shade{background:linear-gradient(90deg,rgba(250,245,234,.97) 0%,rgba(250,245,234,.9) 43%,rgba(250,245,234,.08) 75%),linear-gradient(0deg,rgba(42,38,32,.22),transparent 50%)} .cq[data-work="harrypotter"] .cq-primary, .cq[data-work="harrypotter"] .cq-selfcta__btn{background:linear-gradient(135deg,#a8792a,#5e4113);box-shadow:0 10px 24px rgba(94,65,19,.3)} .cq[data-work="harrypotter"] .cq-progress__track i{background:linear-gradient(90deg,#5e4113,#e2c07c)} .cq[data-work="harrypotter"] .cq-option:hover, .cq[data-work="harrypotter"] .cq-option:focus-visible{border-color:#c09f66;background:#f9f6f0} .cq[data-work="harrypotter"] .cq-option.is-selected{background:#f4eee3;border-color:#a8792a} .cq[data-work="harrypotter"] .cq-option span{background:#f4eee3;color:#5e4113} .cq[data-work="harrypotter"] .cq-option.is-selected span{background:#a8792a;color:#fff} .cq[data-work="harrypotter"] .cq-progress__meta{color:#6d675c} .cq[data-work="harrypotter"] .cq-card__scene{color:#5e4113} .cq[data-work="harrypotter"] .cq-match, .cq[data-work="harrypotter"] .cq-next__h b, .cq[data-work="harrypotter"] .cq-selfcta__h b{color:#5e4113} .cq[data-work="harrypotter"] .cq-radar__user{fill:rgba(168,121,42,.2);stroke:#a8792a} .cq[data-work="harrypotter"] .cq-radar__char{fill:rgba(109,103,92,.16);stroke:#6d675c} .cq[data-work="harrypotter"] .cq-radar-legend span:before{background:#a8792a} .cq[data-work="harrypotter"] .cq-radar-legend span+span:before{background:#6d675c} .cq[data-work="harrypotter"] .cq-axis-list i b{background:linear-gradient(90deg,#6d675c,#e2c07c)} .cq[data-work="harrypotter"] .cq-result-reading h3{color:#a8792a} .cq[data-work="harrypotter"] .cq-next{border-left-color:#a8792a} .cq[data-work="harrypotter"] .cq-next__eyebrow{color:#a8792a} .cq[data-work="harrypotter"] .cq-next__btn--primary{background:linear-gradient(135deg,#a8792a,#5e4113);box-shadow:0 10px 24px rgba(94,65,19,.28)} .cq[data-work="harrypotter"] .cq-selfcta{background:linear-gradient(160deg,#f9f6f0 0%,#f6f2ea 52%,#f9f6f0 100%);border-color:#ece2d0} .cq[data-work="harrypotter"] .cq-related, .cq[data-work="harrypotter"] .cq-axis-grid span{background:linear-gradient(135deg,#f9f6f0,#fbf8f4)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="harrypotter"] .cq-hero__shade{background:linear-gradient(90deg,rgba(24,17,6,.95) 0%,rgba(24,17,6,.84) 46%,rgba(24,17,6,.30) 82%),linear-gradient(0deg,rgba(15,11,4,.72),transparent 55%)} .cq[data-work="harrypotter"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="harrypotter"] .cq-hero__lead{color:#eee4d4} .cq[data-work="harrypotter"] .cq-hero__lead strong, .cq[data-work="harrypotter"] .cq-hero__lead b{color:#fff} .cq[data-work="harrypotter"] .cq-hero__note{color:#dcc9aa} .cq[data-work="harrypotter"] .cq-hero .cq-eyebrow{color:#e3d4bb} .cq[data-work="harrypotter"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="harrypotter"] .cq-hero .b5shb__head{color:#e3d4bb} .cq[data-work="harrypotter"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="harrypotter"] .cq-hero__shade{background:linear-gradient(90deg,rgba(24,17,6,.95) 0%,rgba(24,17,6,.86) 52%,rgba(24,17,6,.16) 88%),linear-gradient(0deg,rgba(15,11,4,.70),transparent 55%)} } /* ---- 僕のヒーローアカデミア：ヒーローの黄 × 藍 ---- */ .cq[data-work="heroaca"]{--ink:#23262e;--muted:#6a6d75;background:#fcf7e6} .cq[data-work="heroaca"] a{color:#6f5005} .cq[data-work="heroaca"] .cq-eyebrow, .cq[data-work="heroaca"] .cq-card__scene, .cq[data-work="heroaca"] .cq-article>header>p:first-child{color:#c8960f} .cq[data-work="heroaca"] .cq-hero h1{color:#30333b} .cq[data-work="heroaca"] .cq-hero__shade{background:linear-gradient(90deg,rgba(252,247,230,.97) 0%,rgba(252,247,230,.9) 43%,rgba(252,247,230,.08) 75%),linear-gradient(0deg,rgba(35,38,46,.22),transparent 50%)} .cq[data-work="heroaca"] .cq-primary, .cq[data-work="heroaca"] .cq-selfcta__btn{background:linear-gradient(135deg,#c8960f,#6f5005);box-shadow:0 10px 24px rgba(111,80,5,.3)} .cq[data-work="heroaca"] .cq-progress__track i{background:linear-gradient(90deg,#6f5005,#f2d071)} .cq[data-work="heroaca"] .cq-option:hover, .cq[data-work="heroaca"] .cq-option:focus-visible{border-color:#d7b352;background:#fbf8ee} .cq[data-work="heroaca"] .cq-option.is-selected{background:#f8f1e0;border-color:#c8960f} .cq[data-work="heroaca"] .cq-option span{background:#f8f1e0;color:#6f5005} .cq[data-work="heroaca"] .cq-option.is-selected span{background:#c8960f;color:#fff} .cq[data-work="heroaca"] .cq-progress__meta{color:#6a6d75} .cq[data-work="heroaca"] .cq-card__scene{color:#6f5005} .cq[data-work="heroaca"] .cq-match, .cq[data-work="heroaca"] .cq-next__h b, .cq[data-work="heroaca"] .cq-selfcta__h b{color:#6f5005} .cq[data-work="heroaca"] .cq-radar__user{fill:rgba(200,150,15,.2);stroke:#c8960f} .cq[data-work="heroaca"] .cq-radar__char{fill:rgba(106,109,117,.16);stroke:#6a6d75} .cq[data-work="heroaca"] .cq-radar-legend span:before{background:#c8960f} .cq[data-work="heroaca"] .cq-radar-legend span+span:before{background:#6a6d75} .cq[data-work="heroaca"] .cq-axis-list i b{background:linear-gradient(90deg,#6a6d75,#f2d071)} .cq[data-work="heroaca"] .cq-result-reading h3{color:#c8960f} .cq[data-work="heroaca"] .cq-next{border-left-color:#c8960f} .cq[data-work="heroaca"] .cq-next__eyebrow{color:#c8960f} .cq[data-work="heroaca"] .cq-next__btn--primary{background:linear-gradient(135deg,#c8960f,#6f5005);box-shadow:0 10px 24px rgba(111,80,5,.28)} .cq[data-work="heroaca"] .cq-selfcta{background:linear-gradient(160deg,#fbf8ee 0%,#faf4e7 52%,#fbf8ee 100%);border-color:#f3e8ca} .cq[data-work="heroaca"] .cq-related, .cq[data-work="heroaca"] .cq-axis-grid span{background:linear-gradient(135deg,#fbf8ee,#fcfaf3)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="heroaca"] .cq-hero__shade{background:linear-gradient(90deg,rgba(28,21,2,.95) 0%,rgba(28,21,2,.84) 46%,rgba(28,21,2,.30) 82%),linear-gradient(0deg,rgba(18,13,1,.72),transparent 55%)} .cq[data-work="heroaca"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="heroaca"] .cq-hero__lead{color:#f4eacf} .cq[data-work="heroaca"] .cq-hero__lead strong, .cq[data-work="heroaca"] .cq-hero__lead b{color:#fff} .cq[data-work="heroaca"] .cq-hero__note{color:#e9d59f} .cq[data-work="heroaca"] .cq-hero .cq-eyebrow{color:#edddb2} .cq[data-work="heroaca"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="heroaca"] .cq-hero .b5shb__head{color:#edddb2} .cq[data-work="heroaca"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="heroaca"] .cq-hero__shade{background:linear-gradient(90deg,rgba(28,21,2,.95) 0%,rgba(28,21,2,.86) 52%,rgba(28,21,2,.16) 88%),linear-gradient(0deg,rgba(18,13,1,.70),transparent 55%)} } /* ---- マーベル：コミックの赤 × 黒 ---- */ .cq[data-work="marvel"]{--ink:#201f21;--muted:#6b6669;background:#fdf1f1} .cq[data-work="marvel"] a{color:#6e1116} .cq[data-work="marvel"] .cq-eyebrow, .cq[data-work="marvel"] .cq-card__scene, .cq[data-work="marvel"] .cq-article>header>p:first-child{color:#c1262d} .cq[data-work="marvel"] .cq-hero h1{color:#2d2c2e} .cq[data-work="marvel"] .cq-hero__shade{background:linear-gradient(90deg,rgba(253,241,241,.97) 0%,rgba(253,241,241,.9) 43%,rgba(253,241,241,.08) 75%),linear-gradient(0deg,rgba(32,31,33,.22),transparent 50%)} .cq[data-work="marvel"] .cq-primary, .cq[data-work="marvel"] .cq-selfcta__btn{background:linear-gradient(135deg,#c1262d,#6e1116);box-shadow:0 10px 24px rgba(110,17,22,.3)} .cq[data-work="marvel"] .cq-progress__track i{background:linear-gradient(90deg,#6e1116,#ec8f92)} .cq[data-work="marvel"] .cq-option:hover, .cq[data-work="marvel"] .cq-option:focus-visible{border-color:#d26368;background:#fbf0f0} .cq[data-work="marvel"] .cq-option.is-selected{background:#f7e3e4;border-color:#c1262d} .cq[data-work="marvel"] .cq-option span{background:#f7e3e4;color:#6e1116} .cq[data-work="marvel"] .cq-option.is-selected span{background:#c1262d;color:#fff} .cq[data-work="marvel"] .cq-progress__meta{color:#6b6669} .cq[data-work="marvel"] .cq-card__scene{color:#6e1116} .cq[data-work="marvel"] .cq-match, .cq[data-work="marvel"] .cq-next__h b, .cq[data-work="marvel"] .cq-selfcta__h b{color:#6e1116} .cq[data-work="marvel"] .cq-radar__user{fill:rgba(193,38,45,.2);stroke:#c1262d} .cq[data-work="marvel"] .cq-radar__char{fill:rgba(107,102,105,.16);stroke:#6b6669} .cq[data-work="marvel"] .cq-radar-legend span:before{background:#c1262d} .cq[data-work="marvel"] .cq-radar-legend span+span:before{background:#6b6669} .cq[data-work="marvel"] .cq-axis-list i b{background:linear-gradient(90deg,#6b6669,#ec8f92)} .cq[data-work="marvel"] .cq-result-reading h3{color:#c1262d} .cq[data-work="marvel"] .cq-next{border-left-color:#c1262d} .cq[data-work="marvel"] .cq-next__eyebrow{color:#c1262d} .cq[data-work="marvel"] .cq-next__btn--primary{background:linear-gradient(135deg,#c1262d,#6e1116);box-shadow:0 10px 24px rgba(110,17,22,.28)} .cq[data-work="marvel"] .cq-selfcta{background:linear-gradient(160deg,#fbf0f0 0%,#f9e9ea 52%,#fbf0f0 100%);border-color:#f1cfd1} .cq[data-work="marvel"] .cq-related, .cq[data-work="marvel"] .cq-axis-grid span{background:linear-gradient(135deg,#fbf0f0,#fcf4f4)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="marvel"] .cq-hero__shade{background:linear-gradient(90deg,rgba(27,5,6,.95) 0%,rgba(27,5,6,.84) 46%,rgba(27,5,6,.30) 82%),linear-gradient(0deg,rgba(17,3,4,.72),transparent 55%)} .cq[data-work="marvel"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="marvel"] .cq-hero__lead{color:#f3d4d5} .cq[data-work="marvel"] .cq-hero__lead strong, .cq[data-work="marvel"] .cq-hero__lead b{color:#fff} .cq[data-work="marvel"] .cq-hero__note{color:#e6a8ab} .cq[data-work="marvel"] .cq-hero .cq-eyebrow{color:#ebbabc} .cq[data-work="marvel"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="marvel"] .cq-hero .b5shb__head{color:#ebbabc} .cq[data-work="marvel"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="marvel"] .cq-hero__shade{background:linear-gradient(90deg,rgba(27,5,6,.95) 0%,rgba(27,5,6,.86) 52%,rgba(27,5,6,.16) 88%),linear-gradient(0deg,rgba(17,3,4,.70),transparent 55%)} } /* ---- 東京喰種：白黒 × 血の赤 ---- */ .cq[data-work="tokyoghoul"]{--ink:#1b1b1f;--muted:#66646a;background:#f6f2f2} .cq[data-work="tokyoghoul"] a{color:#5c0f16} .cq[data-work="tokyoghoul"] .cq-eyebrow, .cq[data-work="tokyoghoul"] .cq-card__scene, .cq[data-work="tokyoghoul"] .cq-article>header>p:first-child{color:#a8202c} .cq[data-work="tokyoghoul"] .cq-hero h1{color:#29292c} .cq[data-work="tokyoghoul"] .cq-hero__shade{background:linear-gradient(90deg,rgba(246,242,242,.97) 0%,rgba(246,242,242,.9) 43%,rgba(246,242,242,.08) 75%),linear-gradient(0deg,rgba(27,27,31,.22),transparent 50%)} .cq[data-work="tokyoghoul"] .cq-primary, .cq[data-work="tokyoghoul"] .cq-selfcta__btn{background:linear-gradient(135deg,#a8202c,#5c0f16);box-shadow:0 10px 24px rgba(92,15,22,.3)} .cq[data-work="tokyoghoul"] .cq-progress__track i{background:linear-gradient(90deg,#5c0f16,#dd8d94)} .cq[data-work="tokyoghoul"] .cq-option:hover, .cq[data-work="tokyoghoul"] .cq-option:focus-visible{border-color:#c05e67;background:#f9eff0} .cq[data-work="tokyoghoul"] .cq-option.is-selected{background:#f4e2e4;border-color:#a8202c} .cq[data-work="tokyoghoul"] .cq-option span{background:#f4e2e4;color:#5c0f16} .cq[data-work="tokyoghoul"] .cq-option.is-selected span{background:#a8202c;color:#fff} .cq[data-work="tokyoghoul"] .cq-progress__meta{color:#66646a} .cq[data-work="tokyoghoul"] .cq-card__scene{color:#5c0f16} .cq[data-work="tokyoghoul"] .cq-match, .cq[data-work="tokyoghoul"] .cq-next__h b, .cq[data-work="tokyoghoul"] .cq-selfcta__h b{color:#5c0f16} .cq[data-work="tokyoghoul"] .cq-radar__user{fill:rgba(168,32,44,.2);stroke:#a8202c} .cq[data-work="tokyoghoul"] .cq-radar__char{fill:rgba(102,100,106,.16);stroke:#66646a} .cq[data-work="tokyoghoul"] .cq-radar-legend span:before{background:#a8202c} .cq[data-work="tokyoghoul"] .cq-radar-legend span+span:before{background:#66646a} .cq[data-work="tokyoghoul"] .cq-axis-list i b{background:linear-gradient(90deg,#66646a,#dd8d94)} .cq[data-work="tokyoghoul"] .cq-result-reading h3{color:#a8202c} .cq[data-work="tokyoghoul"] .cq-next{border-left-color:#a8202c} .cq[data-work="tokyoghoul"] .cq-next__eyebrow{color:#a8202c} .cq[data-work="tokyoghoul"] .cq-next__btn--primary{background:linear-gradient(135deg,#a8202c,#5c0f16);box-shadow:0 10px 24px rgba(92,15,22,.28)} .cq[data-work="tokyoghoul"] .cq-selfcta{background:linear-gradient(160deg,#f9eff0 0%,#f6e9ea 52%,#f9eff0 100%);border-color:#ecced1} .cq[data-work="tokyoghoul"] .cq-related, .cq[data-work="tokyoghoul"] .cq-axis-grid span{background:linear-gradient(135deg,#f9eff0,#fbf4f4)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="tokyoghoul"] .cq-hero__shade{background:linear-gradient(90deg,rgba(24,4,6,.95) 0%,rgba(24,4,6,.84) 46%,rgba(24,4,6,.30) 82%),linear-gradient(0deg,rgba(15,3,4,.72),transparent 55%)} .cq[data-work="tokyoghoul"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="tokyoghoul"] .cq-hero__lead{color:#eed2d5} .cq[data-work="tokyoghoul"] .cq-hero__lead strong, .cq[data-work="tokyoghoul"] .cq-hero__lead b{color:#fff} .cq[data-work="tokyoghoul"] .cq-hero__note{color:#dca6ab} .cq[data-work="tokyoghoul"] .cq-hero .cq-eyebrow{color:#e3b8bb} .cq[data-work="tokyoghoul"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="tokyoghoul"] .cq-hero .b5shb__head{color:#e3b8bb} .cq[data-work="tokyoghoul"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="tokyoghoul"] .cq-hero__shade{background:linear-gradient(90deg,rgba(24,4,6,.95) 0%,rgba(24,4,6,.86) 52%,rgba(24,4,6,.16) 88%),linear-gradient(0deg,rgba(15,3,4,.70),transparent 55%)} } /* ---- 名探偵コナン：夜の紺 × 赤信号 ---- */ .cq[data-work="conan"]{--ink:#1c2230;--muted:#626a78;background:#f0f4fa} .cq[data-work="conan"] a{color:#10305c} .cq[data-work="conan"] .cq-eyebrow, .cq[data-work="conan"] .cq-card__scene, .cq[data-work="conan"] .cq-article>header>p:first-child{color:#1f4d8f} .cq[data-work="conan"] .cq-hero h1{color:#2a2f3c} .cq[data-work="conan"] .cq-hero__shade{background:linear-gradient(90deg,rgba(240,244,250,.97) 0%,rgba(240,244,250,.9) 43%,rgba(240,244,250,.08) 75%),linear-gradient(0deg,rgba(28,34,48,.22),transparent 50%)} .cq[data-work="conan"] .cq-primary, .cq[data-work="conan"] .cq-selfcta__btn{background:linear-gradient(135deg,#1f4d8f,#10305c);box-shadow:0 10px 24px rgba(16,48,92,.3)} .cq[data-work="conan"] .cq-progress__track i{background:linear-gradient(90deg,#10305c,#87aada)} .cq[data-work="conan"] .cq-option:hover, .cq[data-work="conan"] .cq-option:focus-visible{border-color:#5e7fae;background:#eff3f7} .cq[data-work="conan"] .cq-option.is-selected{background:#e2e8f0;border-color:#1f4d8f} .cq[data-work="conan"] .cq-option span{background:#e2e8f0;color:#10305c} .cq[data-work="conan"] .cq-option.is-selected span{background:#1f4d8f;color:#fff} .cq[data-work="conan"] .cq-progress__meta{color:#626a78} .cq[data-work="conan"] .cq-card__scene{color:#10305c} .cq[data-work="conan"] .cq-match, .cq[data-work="conan"] .cq-next__h b, .cq[data-work="conan"] .cq-selfcta__h b{color:#10305c} .cq[data-work="conan"] .cq-radar__user{fill:rgba(31,77,143,.2);stroke:#1f4d8f} .cq[data-work="conan"] .cq-radar__char{fill:rgba(98,106,120,.16);stroke:#626a78} .cq[data-work="conan"] .cq-radar-legend span:before{background:#1f4d8f} .cq[data-work="conan"] .cq-radar-legend span+span:before{background:#626a78} .cq[data-work="conan"] .cq-axis-list i b{background:linear-gradient(90deg,#626a78,#87aada)} .cq[data-work="conan"] .cq-result-reading h3{color:#1f4d8f} .cq[data-work="conan"] .cq-next{border-left-color:#1f4d8f} .cq[data-work="conan"] .cq-next__eyebrow{color:#1f4d8f} .cq[data-work="conan"] .cq-next__btn--primary{background:linear-gradient(135deg,#1f4d8f,#10305c);box-shadow:0 10px 24px rgba(16,48,92,.28)} .cq[data-work="conan"] .cq-selfcta{background:linear-gradient(160deg,#eff3f7 0%,#e9edf4 52%,#eff3f7 100%);border-color:#ced8e6} .cq[data-work="conan"] .cq-related, .cq[data-work="conan"] .cq-axis-grid span{background:linear-gradient(135deg,#eff3f7,#f4f6f9)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="conan"] .cq-hero__shade{background:linear-gradient(90deg,rgba(4,11,20,.95) 0%,rgba(4,11,20,.84) 46%,rgba(4,11,20,.30) 82%),linear-gradient(0deg,rgba(3,7,13,.72),transparent 55%)} .cq[data-work="conan"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="conan"] .cq-hero__lead{color:#d2dbe9} .cq[data-work="conan"] .cq-hero__lead strong, .cq[data-work="conan"] .cq-hero__lead b{color:#fff} .cq[data-work="conan"] .cq-hero__note{color:#a5b8d2} .cq[data-work="conan"] .cq-hero .cq-eyebrow{color:#b7c6db} .cq[data-work="conan"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="conan"] .cq-hero .b5shb__head{color:#b7c6db} .cq[data-work="conan"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="conan"] .cq-hero__shade{background:linear-gradient(90deg,rgba(4,11,20,.95) 0%,rgba(4,11,20,.86) 52%,rgba(4,11,20,.16) 88%),linear-gradient(0deg,rgba(3,7,13,.70),transparent 55%)} } /* ============================================================ 2026-08-29: 作品ごとの配色を全作品ぶん揃える。 実測で、テーマが入っていたのは5本だけで、残りはちいかわの見た目のまま出ていた。 深さがばらつかないよう、呪術のブロックを雛形にして生成している （生成器 gen_work_themes_0829.py）。手で足すときも同じ24ルールを守ること。 ============================================================ */ /* ---- コードギアス：帝国の紫 × 古金 ---- */ .cq[data-work="geass"]{--ink:#241a33;--muted:#6a6275;background:#f6f2fb} .cq[data-work="geass"] a{color:#3d2260} .cq[data-work="geass"] .cq-eyebrow, .cq[data-work="geass"] .cq-card__scene, .cq[data-work="geass"] .cq-article>header>p:first-child{color:#7b4fa8} .cq[data-work="geass"] .cq-hero h1{color:#31283f} .cq[data-work="geass"] .cq-hero__shade{background:linear-gradient(90deg,rgba(246,242,251,.97) 0%,rgba(246,242,251,.9) 43%,rgba(246,242,251,.08) 75%),linear-gradient(0deg,rgba(36,26,51,.22),transparent 50%)} .cq[data-work="geass"] .cq-primary, .cq[data-work="geass"] .cq-selfcta__btn{background:linear-gradient(135deg,#7b4fa8,#3d2260);box-shadow:0 10px 24px rgba(61,34,96,.3)} .cq[data-work="geass"] .cq-progress__track i{background:linear-gradient(90deg,#3d2260,#c3a3e0)} .cq[data-work="geass"] .cq-option:hover, .cq[data-work="geass"] .cq-option:focus-visible{border-color:#a080c0;background:#f6f3f9} .cq[data-work="geass"] .cq-option.is-selected{background:#eee8f4;border-color:#7b4fa8} .cq[data-work="geass"] .cq-option span{background:#eee8f4;color:#3d2260} .cq[data-work="geass"] .cq-option.is-selected span{background:#7b4fa8;color:#fff} .cq[data-work="geass"] .cq-progress__meta{color:#6a6275} .cq[data-work="geass"] .cq-card__scene{color:#3d2260} .cq[data-work="geass"] .cq-match, .cq[data-work="geass"] .cq-next__h b, .cq[data-work="geass"] .cq-selfcta__h b{color:#3d2260} .cq[data-work="geass"] .cq-radar__user{fill:rgba(123,79,168,.2);stroke:#7b4fa8} .cq[data-work="geass"] .cq-radar__char{fill:rgba(106,98,117,.16);stroke:#6a6275} .cq[data-work="geass"] .cq-radar-legend span:before{background:#7b4fa8} .cq[data-work="geass"] .cq-radar-legend span+span:before{background:#6a6275} .cq[data-work="geass"] .cq-axis-list i b{background:linear-gradient(90deg,#6a6275,#c3a3e0)} .cq[data-work="geass"] .cq-result-reading h3{color:#7b4fa8} .cq[data-work="geass"] .cq-next{border-left-color:#7b4fa8} .cq[data-work="geass"] .cq-next__eyebrow{color:#7b4fa8} .cq[data-work="geass"] .cq-next__btn--primary{background:linear-gradient(135deg,#7b4fa8,#3d2260);box-shadow:0 10px 24px rgba(61,34,96,.28)} .cq[data-work="geass"] .cq-selfcta{background:linear-gradient(160deg,#f6f3f9 0%,#f2edf6 52%,#f6f3f9 100%);border-color:#e2d8ec} .cq[data-work="geass"] .cq-related, .cq[data-work="geass"] .cq-axis-grid span{background:linear-gradient(135deg,#f6f3f9,#f8f6fb)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="geass"] .cq-hero__shade{background:linear-gradient(90deg,rgba(17,11,24,.95) 0%,rgba(17,11,24,.84) 46%,rgba(17,11,24,.30) 82%),linear-gradient(0deg,rgba(11,7,15,.72),transparent 55%)} .cq[data-work="geass"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="geass"] .cq-hero__lead{color:#e5dcee} .cq[data-work="geass"] .cq-hero__lead strong, .cq[data-work="geass"] .cq-hero__lead b{color:#fff} .cq[data-work="geass"] .cq-hero__note{color:#cab9dc} .cq[data-work="geass"] .cq-hero .cq-eyebrow{color:#d5c7e3} .cq[data-work="geass"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="geass"] .cq-hero .b5shb__head{color:#d5c7e3} .cq[data-work="geass"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="geass"] .cq-hero__shade{background:linear-gradient(90deg,rgba(17,11,24,.95) 0%,rgba(17,11,24,.86) 52%,rgba(17,11,24,.16) 88%),linear-gradient(0deg,rgba(11,7,15,.70),transparent 55%)} } /* ---- Re:ゼロから始める異世界生活：夜明けの藍 × 蝋燭 ---- */ .cq[data-work="rezero"]{--ink:#1e2233;--muted:#666c7d;background:#f1f3fa} .cq[data-work="rezero"] a{color:#22315e} .cq[data-work="rezero"] .cq-eyebrow, .cq[data-work="rezero"] .cq-card__scene, .cq[data-work="rezero"] .cq-article>header>p:first-child{color:#4a63a8} .cq[data-work="rezero"] .cq-hero h1{color:#2c2f3f} .cq[data-work="rezero"] .cq-hero__shade{background:linear-gradient(90deg,rgba(241,243,250,.97) 0%,rgba(241,243,250,.9) 43%,rgba(241,243,250,.08) 75%),linear-gradient(0deg,rgba(30,34,51,.22),transparent 50%)} .cq[data-work="rezero"] .cq-primary, .cq[data-work="rezero"] .cq-selfcta__btn{background:linear-gradient(135deg,#4a63a8,#22315e);box-shadow:0 10px 24px rgba(34,49,94,.3)} .cq[data-work="rezero"] .cq-progress__track i{background:linear-gradient(90deg,#22315e,#a6b7e0)} .cq[data-work="rezero"] .cq-option:hover, .cq[data-work="rezero"] .cq-option:focus-visible{border-color:#7d8fc0;background:#f2f4f9} .cq[data-work="rezero"] .cq-option.is-selected{background:#e7ebf4;border-color:#4a63a8} .cq[data-work="rezero"] .cq-option span{background:#e7ebf4;color:#22315e} .cq[data-work="rezero"] .cq-option.is-selected span{background:#4a63a8;color:#fff} .cq[data-work="rezero"] .cq-progress__meta{color:#666c7d} .cq[data-work="rezero"] .cq-card__scene{color:#22315e} .cq[data-work="rezero"] .cq-match, .cq[data-work="rezero"] .cq-next__h b, .cq[data-work="rezero"] .cq-selfcta__h b{color:#22315e} .cq[data-work="rezero"] .cq-radar__user{fill:rgba(74,99,168,.2);stroke:#4a63a8} .cq[data-work="rezero"] .cq-radar__char{fill:rgba(102,108,125,.16);stroke:#666c7d} .cq[data-work="rezero"] .cq-radar-legend span:before{background:#4a63a8} .cq[data-work="rezero"] .cq-radar-legend span+span:before{background:#666c7d} .cq[data-work="rezero"] .cq-axis-list i b{background:linear-gradient(90deg,#666c7d,#a6b7e0)} .cq[data-work="rezero"] .cq-result-reading h3{color:#4a63a8} .cq[data-work="rezero"] .cq-next{border-left-color:#4a63a8} .cq[data-work="rezero"] .cq-next__eyebrow{color:#4a63a8} .cq[data-work="rezero"] .cq-next__btn--primary{background:linear-gradient(135deg,#4a63a8,#22315e);box-shadow:0 10px 24px rgba(34,49,94,.28)} .cq[data-work="rezero"] .cq-selfcta{background:linear-gradient(160deg,#f2f4f9 0%,#edeff6 52%,#f2f4f9 100%);border-color:#d7ddec} .cq[data-work="rezero"] .cq-related, .cq[data-work="rezero"] .cq-axis-grid span{background:linear-gradient(135deg,#f2f4f9,#f6f7fb)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="rezero"] .cq-hero__shade{background:linear-gradient(90deg,rgba(10,14,24,.95) 0%,rgba(10,14,24,.84) 46%,rgba(10,14,24,.30) 82%),linear-gradient(0deg,rgba(7,9,15,.72),transparent 55%)} .cq[data-work="rezero"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="rezero"] .cq-hero__lead{color:#dbe0ee} .cq[data-work="rezero"] .cq-hero__lead strong, .cq[data-work="rezero"] .cq-hero__lead b{color:#fff} .cq[data-work="rezero"] .cq-hero__note{color:#b7c1dc} .cq[data-work="rezero"] .cq-hero .cq-eyebrow{color:#c5cde3} .cq[data-work="rezero"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="rezero"] .cq-hero .b5shb__head{color:#c5cde3} .cq[data-work="rezero"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="rezero"] .cq-hero__shade{background:linear-gradient(90deg,rgba(10,14,24,.95) 0%,rgba(10,14,24,.86) 52%,rgba(10,14,24,.16) 88%),linear-gradient(0deg,rgba(7,9,15,.70),transparent 55%)} } /* ---- ブルーロック：照明の青 × 芝 ---- */ .cq[data-work="bluelock"]{--ink:#16202b;--muted:#5c6873;background:#eef5fb} .cq[data-work="bluelock"] a{color:#0d3c66} .cq[data-work="bluelock"] .cq-eyebrow, .cq[data-work="bluelock"] .cq-card__scene, .cq[data-work="bluelock"] .cq-article>header>p:first-child{color:#1f6fb2} .cq[data-work="bluelock"] .cq-hero h1{color:#242d38} .cq[data-work="bluelock"] .cq-hero__shade{background:linear-gradient(90deg,rgba(238,245,251,.97) 0%,rgba(238,245,251,.9) 43%,rgba(238,245,251,.08) 75%),linear-gradient(0deg,rgba(22,32,43,.22),transparent 50%)} .cq[data-work="bluelock"] .cq-primary, .cq[data-work="bluelock"] .cq-selfcta__btn{background:linear-gradient(135deg,#1f6fb2,#0d3c66);box-shadow:0 10px 24px rgba(13,60,102,.3)} .cq[data-work="bluelock"] .cq-progress__track i{background:linear-gradient(90deg,#0d3c66,#8cc0e4)} .cq[data-work="bluelock"] .cq-option:hover, .cq[data-work="bluelock"] .cq-option:focus-visible{border-color:#5e97c8;background:#eff5fa} .cq[data-work="bluelock"] .cq-option.is-selected{background:#e2ecf5;border-color:#1f6fb2} .cq[data-work="bluelock"] .cq-option span{background:#e2ecf5;color:#0d3c66} .cq[data-work="bluelock"] .cq-option.is-selected span{background:#1f6fb2;color:#fff} .cq[data-work="bluelock"] .cq-progress__meta{color:#5c6873} .cq[data-work="bluelock"] .cq-card__scene{color:#0d3c66} .cq[data-work="bluelock"] .cq-match, .cq[data-work="bluelock"] .cq-next__h b, .cq[data-work="bluelock"] .cq-selfcta__h b{color:#0d3c66} .cq[data-work="bluelock"] .cq-radar__user{fill:rgba(31,111,178,.2);stroke:#1f6fb2} .cq[data-work="bluelock"] .cq-radar__char{fill:rgba(92,104,115,.16);stroke:#5c6873} .cq[data-work="bluelock"] .cq-radar-legend span:before{background:#1f6fb2} .cq[data-work="bluelock"] .cq-radar-legend span+span:before{background:#5c6873} .cq[data-work="bluelock"] .cq-axis-list i b{background:linear-gradient(90deg,#5c6873,#8cc0e4)} .cq[data-work="bluelock"] .cq-result-reading h3{color:#1f6fb2} .cq[data-work="bluelock"] .cq-next{border-left-color:#1f6fb2} .cq[data-work="bluelock"] .cq-next__eyebrow{color:#1f6fb2} .cq[data-work="bluelock"] .cq-next__btn--primary{background:linear-gradient(135deg,#1f6fb2,#0d3c66);box-shadow:0 10px 24px rgba(13,60,102,.28)} .cq[data-work="bluelock"] .cq-selfcta{background:linear-gradient(160deg,#eff5fa 0%,#e9f1f7 52%,#eff5fa 100%);border-color:#cedfee} .cq[data-work="bluelock"] .cq-related, .cq[data-work="bluelock"] .cq-axis-grid span{background:linear-gradient(135deg,#eff5fa,#f4f8fb)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="bluelock"] .cq-hero__shade{background:linear-gradient(90deg,rgba(4,16,25,.95) 0%,rgba(4,16,25,.84) 46%,rgba(4,16,25,.30) 82%),linear-gradient(0deg,rgba(3,10,16,.72),transparent 55%)} .cq[data-work="bluelock"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="bluelock"] .cq-hero__lead{color:#d2e2f0} .cq[data-work="bluelock"] .cq-hero__lead strong, .cq[data-work="bluelock"] .cq-hero__lead b{color:#fff} .cq[data-work="bluelock"] .cq-hero__note{color:#a5c5e0} .cq[data-work="bluelock"] .cq-hero .cq-eyebrow{color:#b7d1e6} .cq[data-work="bluelock"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="bluelock"] .cq-hero .b5shb__head{color:#b7d1e6} .cq[data-work="bluelock"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="bluelock"] .cq-hero__shade{background:linear-gradient(90deg,rgba(4,16,25,.95) 0%,rgba(4,16,25,.86) 52%,rgba(4,16,25,.16) 88%),linear-gradient(0deg,rgba(3,10,16,.70),transparent 55%)} } /* ============================================================ 2026-08-29: 作品ごとの配色を全作品ぶん揃える。 実測で、テーマが入っていたのは5本だけで、残りはちいかわの見た目のまま出ていた。 深さがばらつかないよう、呪術のブロックを雛形にして生成している （生成器 gen_work_themes_0829.py）。手で足すときも同じ24ルールを守ること。 ============================================================ */ /* ---- ツイステッドワンダーランド：夜の学舎の金 × 紫紺 ---- */ .cq[data-work="twst"]{--ink:#221d30;--muted:#6a6478;background:#f9f5ea} .cq[data-work="twst"] a{color:#5c4108} .cq[data-work="twst"] .cq-eyebrow, .cq[data-work="twst"] .cq-card__scene, .cq[data-work="twst"] .cq-article>header>p:first-child{color:#a67c1f} .cq[data-work="twst"] .cq-hero h1{color:#2f2b3c} .cq[data-work="twst"] .cq-hero__shade{background:linear-gradient(90deg,rgba(249,245,234,.97) 0%,rgba(249,245,234,.9) 43%,rgba(249,245,234,.08) 75%),linear-gradient(0deg,rgba(34,29,48,.22),transparent 50%)} .cq[data-work="twst"] .cq-primary, .cq[data-work="twst"] .cq-selfcta__btn{background:linear-gradient(135deg,#a67c1f,#5c4108);box-shadow:0 10px 24px rgba(92,65,8,.3)} .cq[data-work="twst"] .cq-progress__track i{background:linear-gradient(90deg,#5c4108,#e3c67e)} .cq[data-work="twst"] .cq-option:hover, .cq[data-work="twst"] .cq-option:focus-visible{border-color:#bfa15e;background:#f9f6ef} .cq[data-work="twst"] .cq-option.is-selected{background:#f3eee2;border-color:#a67c1f} .cq[data-work="twst"] .cq-option span{background:#f3eee2;color:#5c4108} .cq[data-work="twst"] .cq-option.is-selected span{background:#a67c1f;color:#fff} .cq[data-work="twst"] .cq-progress__meta{color:#6a6478} .cq[data-work="twst"] .cq-card__scene{color:#5c4108} .cq[data-work="twst"] .cq-match, .cq[data-work="twst"] .cq-next__h b, .cq[data-work="twst"] .cq-selfcta__h b{color:#5c4108} .cq[data-work="twst"] .cq-radar__user{fill:rgba(166,124,31,.2);stroke:#a67c1f} .cq[data-work="twst"] .cq-radar__char{fill:rgba(106,100,120,.16);stroke:#6a6478} .cq[data-work="twst"] .cq-radar-legend span:before{background:#a67c1f} .cq[data-work="twst"] .cq-radar-legend span+span:before{background:#6a6478} .cq[data-work="twst"] .cq-axis-list i b{background:linear-gradient(90deg,#6a6478,#e3c67e)} .cq[data-work="twst"] .cq-result-reading h3{color:#a67c1f} .cq[data-work="twst"] .cq-next{border-left-color:#a67c1f} .cq[data-work="twst"] .cq-next__eyebrow{color:#a67c1f} .cq[data-work="twst"] .cq-next__btn--primary{background:linear-gradient(135deg,#a67c1f,#5c4108);box-shadow:0 10px 24px rgba(92,65,8,.28)} .cq[data-work="twst"] .cq-selfcta{background:linear-gradient(160deg,#f9f6ef 0%,#f6f2e9 52%,#f9f6ef 100%);border-color:#ebe2ce} .cq[data-work="twst"] .cq-related, .cq[data-work="twst"] .cq-axis-grid span{background:linear-gradient(135deg,#f9f6ef,#fbf8f4)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="twst"] .cq-hero__shade{background:linear-gradient(90deg,rgba(23,17,4,.95) 0%,rgba(23,17,4,.84) 46%,rgba(23,17,4,.30) 82%),linear-gradient(0deg,rgba(15,11,3,.72),transparent 55%)} .cq[data-work="twst"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="twst"] .cq-hero__lead{color:#ede5d2} .cq[data-work="twst"] .cq-hero__lead strong, .cq[data-work="twst"] .cq-hero__lead b{color:#fff} .cq[data-work="twst"] .cq-hero__note{color:#dbcba5} .cq[data-work="twst"] .cq-hero .cq-eyebrow{color:#e3d5b7} .cq[data-work="twst"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="twst"] .cq-hero .b5shb__head{color:#e3d5b7} .cq[data-work="twst"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="twst"] .cq-hero__shade{background:linear-gradient(90deg,rgba(23,17,4,.95) 0%,rgba(23,17,4,.86) 52%,rgba(23,17,4,.16) 88%),linear-gradient(0deg,rgba(15,11,3,.70),transparent 55%)} } /* ---- 文豪ストレイドッグス：港町の煉瓦 × ガス灯 ---- */ .cq[data-work="bungo"]{--ink:#2a2320;--muted:#6f665e;background:#faf4ef} .cq[data-work="bungo"] a{color:#5a1f14} .cq[data-work="bungo"] .cq-eyebrow, .cq[data-work="bungo"] .cq-card__scene, .cq[data-work="bungo"] .cq-article>header>p:first-child{color:#9b4030} .cq[data-work="bungo"] .cq-hero h1{color:#37302d} .cq[data-work="bungo"] .cq-hero__shade{background:linear-gradient(90deg,rgba(250,244,239,.97) 0%,rgba(250,244,239,.9) 43%,rgba(250,244,239,.08) 75%),linear-gradient(0deg,rgba(42,35,32,.22),transparent 50%)} .cq[data-work="bungo"] .cq-primary, .cq[data-work="bungo"] .cq-selfcta__btn{background:linear-gradient(135deg,#9b4030,#5a1f14);box-shadow:0 10px 24px rgba(90,31,20,.3)} .cq[data-work="bungo"] .cq-progress__track i{background:linear-gradient(90deg,#5a1f14,#dc9e8d)} .cq[data-work="bungo"] .cq-option:hover, .cq[data-work="bungo"] .cq-option:focus-visible{border-color:#b7756a;background:#f8f2f1} .cq[data-work="bungo"] .cq-option.is-selected{background:#f2e6e4;border-color:#9b4030} .cq[data-work="bungo"] .cq-option span{background:#f2e6e4;color:#5a1f14} .cq[data-work="bungo"] .cq-option.is-selected span{background:#9b4030;color:#fff} .cq[data-work="bungo"] .cq-progress__meta{color:#6f665e} .cq[data-work="bungo"] .cq-card__scene{color:#5a1f14} .cq[data-work="bungo"] .cq-match, .cq[data-work="bungo"] .cq-next__h b, .cq[data-work="bungo"] .cq-selfcta__h b{color:#5a1f14} .cq[data-work="bungo"] .cq-radar__user{fill:rgba(155,64,48,.2);stroke:#9b4030} .cq[data-work="bungo"] .cq-radar__char{fill:rgba(111,102,94,.16);stroke:#6f665e} .cq[data-work="bungo"] .cq-radar-legend span:before{background:#9b4030} .cq[data-work="bungo"] .cq-radar-legend span+span:before{background:#6f665e} .cq[data-work="bungo"] .cq-axis-list i b{background:linear-gradient(90deg,#6f665e,#dc9e8d)} .cq[data-work="bungo"] .cq-result-reading h3{color:#9b4030} .cq[data-work="bungo"] .cq-next{border-left-color:#9b4030} .cq[data-work="bungo"] .cq-next__eyebrow{color:#9b4030} .cq[data-work="bungo"] .cq-next__btn--primary{background:linear-gradient(135deg,#9b4030,#5a1f14);box-shadow:0 10px 24px rgba(90,31,20,.28)} .cq[data-work="bungo"] .cq-selfcta{background:linear-gradient(160deg,#f8f2f1 0%,#f5ecea 52%,#f8f2f1 100%);border-color:#e9d5d1} .cq[data-work="bungo"] .cq-related, .cq[data-work="bungo"] .cq-axis-grid span{background:linear-gradient(135deg,#f8f2f1,#faf5f5)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="bungo"] .cq-hero__shade{background:linear-gradient(90deg,rgba(22,9,7,.95) 0%,rgba(22,9,7,.84) 46%,rgba(22,9,7,.30) 82%),linear-gradient(0deg,rgba(14,6,4,.72),transparent 55%)} .cq[data-work="bungo"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="bungo"] .cq-hero__lead{color:#ebd9d6} .cq[data-work="bungo"] .cq-hero__lead strong, .cq[data-work="bungo"] .cq-hero__lead b{color:#fff} .cq[data-work="bungo"] .cq-hero__note{color:#d7b3ac} .cq[data-work="bungo"] .cq-hero .cq-eyebrow{color:#dfc2bd} .cq[data-work="bungo"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="bungo"] .cq-hero .b5shb__head{color:#dfc2bd} .cq[data-work="bungo"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="bungo"] .cq-hero__shade{background:linear-gradient(90deg,rgba(22,9,7,.95) 0%,rgba(22,9,7,.86) 52%,rgba(22,9,7,.16) 88%),linear-gradient(0deg,rgba(14,6,4,.70),transparent 55%)} } /* ---- ジョジョの奇妙な冒険：陽射しの金 × 石の影 ---- */ .cq[data-work="jojo"]{--ink:#251f2e;--muted:#6c6572;background:#fbf6e9} .cq[data-work="jojo"] a{color:#6b4b03} .cq[data-work="jojo"] .cq-eyebrow, .cq[data-work="jojo"] .cq-card__scene, .cq[data-work="jojo"] .cq-article>header>p:first-child{color:#c08a14} .cq[data-work="jojo"] .cq-hero h1{color:#322c3b} .cq[data-work="jojo"] .cq-hero__shade{background:linear-gradient(90deg,rgba(251,246,233,.97) 0%,rgba(251,246,233,.9) 43%,rgba(251,246,233,.08) 75%),linear-gradient(0deg,rgba(37,31,46,.22),transparent 50%)} .cq[data-work="jojo"] .cq-primary, .cq[data-work="jojo"] .cq-selfcta__btn{background:linear-gradient(135deg,#c08a14,#6b4b03);box-shadow:0 10px 24px rgba(107,75,3,.3)} .cq[data-work="jojo"] .cq-progress__track i{background:linear-gradient(90deg,#6b4b03,#edc670)} .cq[data-work="jojo"] .cq-option:hover, .cq[data-work="jojo"] .cq-option:focus-visible{border-color:#d2ab56;background:#fbf7ef} .cq[data-work="jojo"] .cq-option.is-selected{background:#f7f0e0;border-color:#c08a14} .cq[data-work="jojo"] .cq-option span{background:#f7f0e0;color:#6b4b03} .cq[data-work="jojo"] .cq-option.is-selected span{background:#c08a14;color:#fff} .cq[data-work="jojo"] .cq-progress__meta{color:#6c6572} .cq[data-work="jojo"] .cq-card__scene{color:#6b4b03} .cq[data-work="jojo"] .cq-match, .cq[data-work="jojo"] .cq-next__h b, .cq[data-work="jojo"] .cq-selfcta__h b{color:#6b4b03} .cq[data-work="jojo"] .cq-radar__user{fill:rgba(192,138,20,.2);stroke:#c08a14} .cq[data-work="jojo"] .cq-radar__char{fill:rgba(108,101,114,.16);stroke:#6c6572} .cq[data-work="jojo"] .cq-radar-legend span:before{background:#c08a14} .cq[data-work="jojo"] .cq-radar-legend span+span:before{background:#6c6572} .cq[data-work="jojo"] .cq-axis-list i b{background:linear-gradient(90deg,#6c6572,#edc670)} .cq[data-work="jojo"] .cq-result-reading h3{color:#c08a14} .cq[data-work="jojo"] .cq-next{border-left-color:#c08a14} .cq[data-work="jojo"] .cq-next__eyebrow{color:#c08a14} .cq[data-work="jojo"] .cq-next__btn--primary{background:linear-gradient(135deg,#c08a14,#6b4b03);box-shadow:0 10px 24px rgba(107,75,3,.28)} .cq[data-work="jojo"] .cq-selfcta{background:linear-gradient(160deg,#fbf7ef 0%,#f9f3e8 52%,#fbf7ef 100%);border-color:#f1e5cb} .cq[data-work="jojo"] .cq-related, .cq[data-work="jojo"] .cq-axis-grid span{background:linear-gradient(135deg,#fbf7ef,#fcf9f3)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="jojo"] .cq-hero__shade{background:linear-gradient(90deg,rgba(27,19,3,.95) 0%,rgba(27,19,3,.84) 46%,rgba(27,19,3,.30) 82%),linear-gradient(0deg,rgba(17,12,2,.72),transparent 55%)} .cq[data-work="jojo"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="jojo"] .cq-hero__lead{color:#f2e8d0} .cq[data-work="jojo"] .cq-hero__lead strong, .cq[data-work="jojo"] .cq-hero__lead b{color:#fff} .cq[data-work="jojo"] .cq-hero__note{color:#e6d0a1} .cq[data-work="jojo"] .cq-hero .cq-eyebrow{color:#ebdab4} .cq[data-work="jojo"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="jojo"] .cq-hero .b5shb__head{color:#ebdab4} .cq[data-work="jojo"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="jojo"] .cq-hero__shade{background:linear-gradient(90deg,rgba(27,19,3,.95) 0%,rgba(27,19,3,.86) 52%,rgba(27,19,3,.16) 88%),linear-gradient(0deg,rgba(17,12,2,.70),transparent 55%)} } /* ============================================================ 2026-08-29: 作品ごとの配色を全作品ぶん揃える。 実測で、テーマが入っていたのは5本だけで、残りはちいかわの見た目のまま出ていた。 深さがばらつかないよう、呪術のブロックを雛形にして生成している （生成器 gen_work_themes_0829.py）。手で足すときも同じ24ルールを守ること。 ============================================================ */ /* ---- 葬送のフリーレン：古い森の翠 × 夕暮れの金 ---- */ .cq[data-work="frieren"]{--ink:#1e2723;--muted:#616e68;background:#f2f8f4} .cq[data-work="frieren"] a{color:#1d4433} .cq[data-work="frieren"] .cq-eyebrow, .cq[data-work="frieren"] .cq-card__scene, .cq[data-work="frieren"] .cq-article>header>p:first-child{color:#3f7a5e} .cq[data-work="frieren"] .cq-hero h1{color:#2c3430} .cq[data-work="frieren"] .cq-hero__shade{background:linear-gradient(90deg,rgba(242,248,244,.97) 0%,rgba(242,248,244,.9) 43%,rgba(242,248,244,.08) 75%),linear-gradient(0deg,rgba(30,39,35,.22),transparent 50%)} .cq[data-work="frieren"] .cq-primary, .cq[data-work="frieren"] .cq-selfcta__btn{background:linear-gradient(135deg,#3f7a5e,#1d4433);box-shadow:0 10px 24px rgba(29,68,51,.3)} .cq[data-work="frieren"] .cq-progress__track i{background:linear-gradient(90deg,#1d4433,#96c9b0)} .cq[data-work="frieren"] .cq-option:hover, .cq[data-work="frieren"] .cq-option:focus-visible{border-color:#759f8b;background:#f2f6f4} .cq[data-work="frieren"] .cq-option.is-selected{background:#e6eeea;border-color:#3f7a5e} .cq[data-work="frieren"] .cq-option span{background:#e6eeea;color:#1d4433} .cq[data-work="frieren"] .cq-option.is-selected span{background:#3f7a5e;color:#fff} .cq[data-work="frieren"] .cq-progress__meta{color:#616e68} .cq[data-work="frieren"] .cq-card__scene{color:#1d4433} .cq[data-work="frieren"] .cq-match, .cq[data-work="frieren"] .cq-next__h b, .cq[data-work="frieren"] .cq-selfcta__h b{color:#1d4433} .cq[data-work="frieren"] .cq-radar__user{fill:rgba(63,122,94,.2);stroke:#3f7a5e} .cq[data-work="frieren"] .cq-radar__char{fill:rgba(97,110,104,.16);stroke:#616e68} .cq[data-work="frieren"] .cq-radar-legend span:before{background:#3f7a5e} .cq[data-work="frieren"] .cq-radar-legend span+span:before{background:#616e68} .cq[data-work="frieren"] .cq-axis-list i b{background:linear-gradient(90deg,#616e68,#96c9b0)} .cq[data-work="frieren"] .cq-result-reading h3{color:#3f7a5e} .cq[data-work="frieren"] .cq-next{border-left-color:#3f7a5e} .cq[data-work="frieren"] .cq-next__eyebrow{color:#3f7a5e} .cq[data-work="frieren"] .cq-next__btn--primary{background:linear-gradient(135deg,#3f7a5e,#1d4433);box-shadow:0 10px 24px rgba(29,68,51,.28)} .cq[data-work="frieren"] .cq-selfcta{background:linear-gradient(160deg,#f2f6f4 0%,#ecf2ef 52%,#f2f6f4 100%);border-color:#d5e2dc} .cq[data-work="frieren"] .cq-related, .cq[data-work="frieren"] .cq-axis-grid span{background:linear-gradient(135deg,#f2f6f4,#f5f8f7)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="frieren"] .cq-hero__shade{background:linear-gradient(90deg,rgba(9,17,13,.95) 0%,rgba(9,17,13,.84) 46%,rgba(9,17,13,.30) 82%),linear-gradient(0deg,rgba(6,11,8,.72),transparent 55%)} .cq[data-work="frieren"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="frieren"] .cq-hero__lead{color:#d9e4df} .cq[data-work="frieren"] .cq-hero__lead strong, .cq[data-work="frieren"] .cq-hero__lead b{color:#fff} .cq[data-work="frieren"] .cq-hero__note{color:#b2cabf} .cq[data-work="frieren"] .cq-hero .cq-eyebrow{color:#c2d4cb} .cq[data-work="frieren"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="frieren"] .cq-hero .b5shb__head{color:#c2d4cb} .cq[data-work="frieren"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="frieren"] .cq-hero__shade{background:linear-gradient(90deg,rgba(9,17,13,.95) 0%,rgba(9,17,13,.86) 52%,rgba(9,17,13,.16) 88%),linear-gradient(0deg,rgba(6,11,8,.70),transparent 55%)} } /* ---- チェンソーマン：雨のアスファルト × 血の赤 ---- */ .cq[data-work="chainsaw"]{--ink:#1d1c1e;--muted:#6b6668;background:#f9f1f1} .cq[data-work="chainsaw"] a{color:#611013} .cq[data-work="chainsaw"] .cq-eyebrow, .cq[data-work="chainsaw"] .cq-card__scene, .cq[data-work="chainsaw"] .cq-article>header>p:first-child{color:#b3272c} .cq[data-work="chainsaw"] .cq-hero h1{color:#2b2a2c} .cq[data-work="chainsaw"] .cq-hero__shade{background:linear-gradient(90deg,rgba(249,241,241,.97) 0%,rgba(249,241,241,.9) 43%,rgba(249,241,241,.08) 75%),linear-gradient(0deg,rgba(29,28,30,.22),transparent 50%)} .cq[data-work="chainsaw"] .cq-primary, .cq[data-work="chainsaw"] .cq-selfcta__btn{background:linear-gradient(135deg,#b3272c,#611013);box-shadow:0 10px 24px rgba(97,16,19,.3)} .cq[data-work="chainsaw"] .cq-progress__track i{background:linear-gradient(90deg,#611013,#e59396)} .cq[data-work="chainsaw"] .cq-option:hover, .cq[data-work="chainsaw"] .cq-option:focus-visible{border-color:#c86367;background:#faf0f0} .cq[data-work="chainsaw"] .cq-option.is-selected{background:#f5e3e4;border-color:#b3272c} .cq[data-work="chainsaw"] .cq-option span{background:#f5e3e4;color:#611013} .cq[data-work="chainsaw"] .cq-option.is-selected span{background:#b3272c;color:#fff} .cq[data-work="chainsaw"] .cq-progress__meta{color:#6b6668} .cq[data-work="chainsaw"] .cq-card__scene{color:#611013} .cq[data-work="chainsaw"] .cq-match, .cq[data-work="chainsaw"] .cq-next__h b, .cq[data-work="chainsaw"] .cq-selfcta__h b{color:#611013} .cq[data-work="chainsaw"] .cq-radar__user{fill:rgba(179,39,44,.2);stroke:#b3272c} .cq[data-work="chainsaw"] .cq-radar__char{fill:rgba(107,102,104,.16);stroke:#6b6668} .cq[data-work="chainsaw"] .cq-radar-legend span:before{background:#b3272c} .cq[data-work="chainsaw"] .cq-radar-legend span+span:before{background:#6b6668} .cq[data-work="chainsaw"] .cq-axis-list i b{background:linear-gradient(90deg,#6b6668,#e59396)} .cq[data-work="chainsaw"] .cq-result-reading h3{color:#b3272c} .cq[data-work="chainsaw"] .cq-next{border-left-color:#b3272c} .cq[data-work="chainsaw"] .cq-next__eyebrow{color:#b3272c} .cq[data-work="chainsaw"] .cq-next__btn--primary{background:linear-gradient(135deg,#b3272c,#611013);box-shadow:0 10px 24px rgba(97,16,19,.28)} .cq[data-work="chainsaw"] .cq-selfcta{background:linear-gradient(160deg,#faf0f0 0%,#f7e9ea 52%,#faf0f0 100%);border-color:#eecfd1} .cq[data-work="chainsaw"] .cq-related, .cq[data-work="chainsaw"] .cq-axis-grid span{background:linear-gradient(135deg,#faf0f0,#fbf4f4)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="chainsaw"] .cq-hero__shade{background:linear-gradient(90deg,rgba(25,5,6,.95) 0%,rgba(25,5,6,.84) 46%,rgba(25,5,6,.30) 82%),linear-gradient(0deg,rgba(16,4,4,.72),transparent 55%)} .cq[data-work="chainsaw"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="chainsaw"] .cq-hero__lead{color:#f0d4d5} .cq[data-work="chainsaw"] .cq-hero__lead strong, .cq[data-work="chainsaw"] .cq-hero__lead b{color:#fff} .cq[data-work="chainsaw"] .cq-hero__note{color:#e1a9ab} .cq[data-work="chainsaw"] .cq-hero .cq-eyebrow{color:#e7babb} .cq[data-work="chainsaw"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="chainsaw"] .cq-hero .b5shb__head{color:#e7babb} .cq[data-work="chainsaw"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="chainsaw"] .cq-hero__shade{background:linear-gradient(90deg,rgba(25,5,6,.95) 0%,rgba(25,5,6,.86) 52%,rgba(25,5,6,.16) 88%),linear-gradient(0deg,rgba(16,4,4,.70),transparent 55%)} } /* ---- SPY×FAMILY：砂岩の校舎 × 真鍮 ---- */ .cq[data-work="spy"]{--ink:#262219;--muted:#6d675c;background:#faf5e9} .cq[data-work="spy"] a{color:#553708} .cq[data-work="spy"] .cq-eyebrow, .cq[data-work="spy"] .cq-card__scene, .cq[data-work="spy"] .cq-article>header>p:first-child{color:#9a6a1e} .cq[data-work="spy"] .cq-hero h1{color:#332f27} .cq[data-work="spy"] .cq-hero__shade{background:linear-gradient(90deg,rgba(250,245,233,.97) 0%,rgba(250,245,233,.9) 43%,rgba(250,245,233,.08) 75%),linear-gradient(0deg,rgba(38,34,25,.22),transparent 50%)} .cq[data-work="spy"] .cq-primary, .cq[data-work="spy"] .cq-selfcta__btn{background:linear-gradient(135deg,#9a6a1e,#553708);box-shadow:0 10px 24px rgba(85,55,8,.3)} .cq[data-work="spy"] .cq-progress__track i{background:linear-gradient(90deg,#553708,#dcb972)} .cq[data-work="spy"] .cq-option:hover, .cq[data-work="spy"] .cq-option:focus-visible{border-color:#b6945d;background:#f8f5ef} .cq[data-work="spy"] .cq-option.is-selected{background:#f2ece2;border-color:#9a6a1e} .cq[data-work="spy"] .cq-option span{background:#f2ece2;color:#553708} .cq[data-work="spy"] .cq-option.is-selected span{background:#9a6a1e;color:#fff} .cq[data-work="spy"] .cq-progress__meta{color:#6d675c} .cq[data-work="spy"] .cq-card__scene{color:#553708} .cq[data-work="spy"] .cq-match, .cq[data-work="spy"] .cq-next__h b, .cq[data-work="spy"] .cq-selfcta__h b{color:#553708} .cq[data-work="spy"] .cq-radar__user{fill:rgba(154,106,30,.2);stroke:#9a6a1e} .cq[data-work="spy"] .cq-radar__char{fill:rgba(109,103,92,.16);stroke:#6d675c} .cq[data-work="spy"] .cq-radar-legend span:before{background:#9a6a1e} .cq[data-work="spy"] .cq-radar-legend span+span:before{background:#6d675c} .cq[data-work="spy"] .cq-axis-list i b{background:linear-gradient(90deg,#6d675c,#dcb972)} .cq[data-work="spy"] .cq-result-reading h3{color:#9a6a1e} .cq[data-work="spy"] .cq-next{border-left-color:#9a6a1e} .cq[data-work="spy"] .cq-next__eyebrow{color:#9a6a1e} .cq[data-work="spy"] .cq-next__btn--primary{background:linear-gradient(135deg,#9a6a1e,#553708);box-shadow:0 10px 24px rgba(85,55,8,.28)} .cq[data-work="spy"] .cq-selfcta{background:linear-gradient(160deg,#f8f5ef 0%,#f5f0e8 52%,#f8f5ef 100%);border-color:#e9dece} .cq[data-work="spy"] .cq-related, .cq[data-work="spy"] .cq-axis-grid span{background:linear-gradient(135deg,#f8f5ef,#faf8f4)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="spy"] .cq-hero__shade{background:linear-gradient(90deg,rgba(22,15,4,.95) 0%,rgba(22,15,4,.84) 46%,rgba(22,15,4,.30) 82%),linear-gradient(0deg,rgba(14,10,3,.72),transparent 55%)} .cq[data-work="spy"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="spy"] .cq-hero__lead{color:#ebe1d2} .cq[data-work="spy"] .cq-hero__lead strong, .cq[data-work="spy"] .cq-hero__lead b{color:#fff} .cq[data-work="spy"] .cq-hero__note{color:#d7c3a5} .cq[data-work="spy"] .cq-hero .cq-eyebrow{color:#dfcfb7} .cq[data-work="spy"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="spy"] .cq-hero .b5shb__head{color:#dfcfb7} .cq[data-work="spy"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="spy"] .cq-hero__shade{background:linear-gradient(90deg,rgba(22,15,4,.95) 0%,rgba(22,15,4,.86) 52%,rgba(22,15,4,.16) 88%),linear-gradient(0deg,rgba(14,10,3,.70),transparent 55%)} } /* ---- BLEACH：白黒 × 霊圧の蒼 ---- */ .cq[data-work="bleach"]{--ink:#1a1c20;--muted:#5f666e;background:#eef4fa} .cq[data-work="bleach"] a{color:#123c66} .cq[data-work="bleach"] .cq-eyebrow, .cq[data-work="bleach"] .cq-card__scene, .cq[data-work="bleach"] .cq-article>header>p:first-child{color:#2f6fae} .cq[data-work="bleach"] .cq-hero h1{color:#282a2d} .cq[data-work="bleach"] .cq-hero__shade{background:linear-gradient(90deg,rgba(238,244,250,.97) 0%,rgba(238,244,250,.9) 43%,rgba(238,244,250,.08) 75%),linear-gradient(0deg,rgba(26,28,32,.22),transparent 50%)} .cq[data-work="bleach"] .cq-primary, .cq[data-work="bleach"] .cq-selfcta__btn{background:linear-gradient(135deg,#2f6fae,#123c66);box-shadow:0 10px 24px rgba(18,60,102,.3)} .cq[data-work="bleach"] .cq-progress__track i{background:linear-gradient(90deg,#123c66,#8fbde0)} .cq[data-work="bleach"] .cq-option:hover, .cq[data-work="bleach"] .cq-option:focus-visible{border-color:#6997c5;background:#f0f5f9} .cq[data-work="bleach"] .cq-option.is-selected{background:#e4ecf4;border-color:#2f6fae} .cq[data-work="bleach"] .cq-option span{background:#e4ecf4;color:#123c66} .cq[data-work="bleach"] .cq-option.is-selected span{background:#2f6fae;color:#fff} .cq[data-work="bleach"] .cq-progress__meta{color:#5f666e} .cq[data-work="bleach"] .cq-card__scene{color:#123c66} .cq[data-work="bleach"] .cq-match, .cq[data-work="bleach"] .cq-next__h b, .cq[data-work="bleach"] .cq-selfcta__h b{color:#123c66} .cq[data-work="bleach"] .cq-radar__user{fill:rgba(47,111,174,.2);stroke:#2f6fae} .cq[data-work="bleach"] .cq-radar__char{fill:rgba(95,102,110,.16);stroke:#5f666e} .cq[data-work="bleach"] .cq-radar-legend span:before{background:#2f6fae} .cq[data-work="bleach"] .cq-radar-legend span+span:before{background:#5f666e} .cq[data-work="bleach"] .cq-axis-list i b{background:linear-gradient(90deg,#5f666e,#8fbde0)} .cq[data-work="bleach"] .cq-result-reading h3{color:#2f6fae} .cq[data-work="bleach"] .cq-next{border-left-color:#2f6fae} .cq[data-work="bleach"] .cq-next__eyebrow{color:#2f6fae} .cq[data-work="bleach"] .cq-next__btn--primary{background:linear-gradient(135deg,#2f6fae,#123c66);box-shadow:0 10px 24px rgba(18,60,102,.28)} .cq[data-work="bleach"] .cq-selfcta{background:linear-gradient(160deg,#f0f5f9 0%,#eaf1f7 52%,#f0f5f9 100%);border-color:#d1dfed} .cq[data-work="bleach"] .cq-related, .cq[data-work="bleach"] .cq-axis-grid span{background:linear-gradient(135deg,#f0f5f9,#f5f8fb)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="bleach"] .cq-hero__shade{background:linear-gradient(90deg,rgba(7,16,24,.95) 0%,rgba(7,16,24,.84) 46%,rgba(7,16,24,.30) 82%),linear-gradient(0deg,rgba(4,10,16,.72),transparent 55%)} .cq[data-work="bleach"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="bleach"] .cq-hero__lead{color:#d5e2ef} .cq[data-work="bleach"] .cq-hero__lead strong, .cq[data-work="bleach"] .cq-hero__lead b{color:#fff} .cq[data-work="bleach"] .cq-hero__note{color:#acc5df} .cq[data-work="bleach"] .cq-hero .cq-eyebrow{color:#bcd1e5} .cq[data-work="bleach"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="bleach"] .cq-hero .b5shb__head{color:#bcd1e5} .cq[data-work="bleach"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="bleach"] .cq-hero__shade{background:linear-gradient(90deg,rgba(7,16,24,.95) 0%,rgba(7,16,24,.86) 52%,rgba(7,16,24,.16) 88%),linear-gradient(0deg,rgba(4,10,16,.70),transparent 55%)} } /* ---- キングダム：黄土の平原 × 青銅 ---- */ .cq[data-work="kingdom"]{--ink:#28221a;--muted:#6e675c;background:#faf4e8} .cq[data-work="kingdom"] a{color:#57370c} .cq[data-work="kingdom"] .cq-eyebrow, .cq[data-work="kingdom"] .cq-card__scene, .cq[data-work="kingdom"] .cq-article>header>p:first-child{color:#a06a24} .cq[data-work="kingdom"] .cq-hero h1{color:#352f28} .cq[data-work="kingdom"] .cq-hero__shade{background:linear-gradient(90deg,rgba(250,244,232,.97) 0%,rgba(250,244,232,.9) 43%,rgba(250,244,232,.08) 75%),linear-gradient(0deg,rgba(40,34,26,.22),transparent 50%)} .cq[data-work="kingdom"] .cq-primary, .cq[data-work="kingdom"] .cq-selfcta__btn{background:linear-gradient(135deg,#a06a24,#57370c);box-shadow:0 10px 24px rgba(87,55,12,.3)} .cq[data-work="kingdom"] .cq-progress__track i{background:linear-gradient(90deg,#57370c,#dfb87c)} .cq[data-work="kingdom"] .cq-option:hover, .cq[data-work="kingdom"] .cq-option:focus-visible{border-color:#bb9461;background:#f8f5f0} .cq[data-work="kingdom"] .cq-option.is-selected{background:#f3ece3;border-color:#a06a24} .cq[data-work="kingdom"] .cq-option span{background:#f3ece3;color:#57370c} .cq[data-work="kingdom"] .cq-option.is-selected span{background:#a06a24;color:#fff} .cq[data-work="kingdom"] .cq-progress__meta{color:#6e675c} .cq[data-work="kingdom"] .cq-card__scene{color:#57370c} .cq[data-work="kingdom"] .cq-match, .cq[data-work="kingdom"] .cq-next__h b, .cq[data-work="kingdom"] .cq-selfcta__h b{color:#57370c} .cq[data-work="kingdom"] .cq-radar__user{fill:rgba(160,106,36,.2);stroke:#a06a24} .cq[data-work="kingdom"] .cq-radar__char{fill:rgba(110,103,92,.16);stroke:#6e675c} .cq[data-work="kingdom"] .cq-radar-legend span:before{background:#a06a24} .cq[data-work="kingdom"] .cq-radar-legend span+span:before{background:#6e675c} .cq[data-work="kingdom"] .cq-axis-list i b{background:linear-gradient(90deg,#6e675c,#dfb87c)} .cq[data-work="kingdom"] .cq-result-reading h3{color:#a06a24} .cq[data-work="kingdom"] .cq-next{border-left-color:#a06a24} .cq[data-work="kingdom"] .cq-next__eyebrow{color:#a06a24} .cq[data-work="kingdom"] .cq-next__btn--primary{background:linear-gradient(135deg,#a06a24,#57370c);box-shadow:0 10px 24px rgba(87,55,12,.28)} .cq[data-work="kingdom"] .cq-selfcta{background:linear-gradient(160deg,#f8f5f0 0%,#f6f0e9 52%,#f8f5f0 100%);border-color:#eadecf} .cq[data-work="kingdom"] .cq-related, .cq[data-work="kingdom"] .cq-axis-grid span{background:linear-gradient(135deg,#f8f5f0,#faf8f4)} /* ヒーローは「暗い覆い＋白文字」にする。 明るい絵の作品で、暗い文字をそのまま乗せると読めなくなるため （2026-08-29に鬼滅で実際に起きた）。呪術と同じ作りに揃えた。 */ .cq[data-work="kingdom"] .cq-hero__shade{background:linear-gradient(90deg,rgba(22,15,5,.95) 0%,rgba(22,15,5,.84) 46%,rgba(22,15,5,.30) 82%),linear-gradient(0deg,rgba(14,10,3,.72),transparent 55%)} .cq[data-work="kingdom"] .cq-hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)} .cq[data-work="kingdom"] .cq-hero__lead{color:#ece1d3} .cq[data-work="kingdom"] .cq-hero__lead strong, .cq[data-work="kingdom"] .cq-hero__lead b{color:#fff} .cq[data-work="kingdom"] .cq-hero__note{color:#d9c3a7} .cq[data-work="kingdom"] .cq-hero .cq-eyebrow{color:#e1cfb9} .cq[data-work="kingdom"] .cq-facts li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} .cq[data-work="kingdom"] .cq-hero .b5shb__head{color:#e1cfb9} .cq[data-work="kingdom"] .cq-hero .b5shb__btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#fff} @media(min-width:760px){ .cq[data-work="kingdom"] .cq-hero__shade{background:linear-gradient(90deg,rgba(22,15,5,.95) 0%,rgba(22,15,5,.86) 52%,rgba(22,15,5,.16) 88%),linear-gradient(0deg,rgba(14,10,3,.70),transparent 55%)} } /* ===== ハイキュー: 最初の画面に開始ボタンを入れる（2026-09-07） ===== 本番・390px幅の実測で、開始ボタンが 807px（下部固定ナビの裏）に落ちていた（ジブリは 729px で画面内）。 リードを1文にしたうえで、スマホだけヒーローの最低高さを外して絵の余白を詰める。ほかの作品には効かない。 */ @media(max-width:720px){ .cq[data-work="haikyu"] .cq-hero{min-height:0} .cq[data-work="haikyu"] .cq-hero__content{padding-top:168px} /* 9/7 納品の明るいヒーロー（朝の体育館）に合わせて、見出しの背後まで暗幕を伸ばす。上の空は残す */ .cq[data-work="haikyu"] .cq-hero__shade{background:linear-gradient(0deg,rgba(26,20,16,.96) 0%,rgba(26,20,16,.88) 48%,rgba(26,20,16,.6) 70%,rgba(26,20,16,.1) 100%)} } /* ===== ナイトミュージアム: 開始ボタンを最初の画面に入れる（2026-09-12） ===== ハイキューと同じ処置。390px幅の実測で、絵を入れた直後の開始ボタンは 728px にあり、 ハイキュー（改善後 646px）より下、ジブリ（728px）と同じ位置だった。 ヒーローの最低高さを外して上余白を詰めると 646px 付近に上がる。ほかの作品には効かない。 */ @media(max-width:720px){ .cq[data-work="nightmuseum"] .cq-hero{min-height:0} .cq[data-work="nightmuseum"] .cq-hero__content{padding-top:168px} } @media(max-width:359px){ .cq[data-work="nightmuseum"] .cq-hero__content{padding-top:96px} } /* 結果で出るもの（作品データの hook）。開始ボタンの下に3つ。絵が無ければ絵文字 */ .cq-hook{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0;padding:0;max-width:560px} .cq-hook li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 6px 9px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.06)} .cq-hook img{width:44px;height:44px;border-radius:12px;object-fit:cover} .cq-hook i{font-style:normal;font-size:26px;line-height:1.2} .cq-hook b{font-size:12px;font-weight:900;line-height:1.35;color:#2f2b28} .cq-hook span{font-size:10.5px;line-height:1.5;color:#6b5f7d} @media(max-width:720px){ .cq[data-work="haikyu"] .cq-hook li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)} .cq[data-work="haikyu"] .cq-hook b{color:#fff} .cq[data-work="haikyu"] .cq-hook span{color:rgba(255,255,255,.8)} } @media(max-width:359px){ .cq[data-work="haikyu"] .cq-hero__content{padding-top:96px} .cq-hook{gap:6px}.cq-hook li{padding:8px 4px 7px}.cq-hook span{font-size:10px} }