/* ========================================================= 案2：白地 × Anton の巨大英字 × インクの染み 参照元：`droom_recruit_D.html`（13案時代のD案。旧NetlifyのURL /droom_recruit_d）。 site.css の後ろ、ページ固有CSSより後ろで読ませる。 **HTMLは案1とまったく同じ。文言・並び順は一切変えていない。** この1枚を外せば案1に戻る。 ★ 2026-08-08 の指示で決めた3つのルール。**迷ったらここに戻る。** 1. 面は「白」と「黒」の2つだけ。 薄グレー・テラコッタ地・黄地はやめた。節ごとに白と黒が交互に入れ替わる。 → 色がとっ散らからず、そのぶん強調色が効く。 2. 色は「点」で使う。 **テラコッタ（主）と黄（従）の2色**だけが、強調・ラベル・下線に出る。 シアン／ライム／ピンクは **FVの染みと、キャリア4段の識別**にしか使わない。 3. 書体は2つだけ。 **Anton**（英字の見出しと数字）と **Noto Sans JP**（それ以外ぜんぶ）。 Oswald はやめた。ラベル類は Noto Sans JP の 900＋字間広めで代用する。 **1rem 未満の文字を作らない。** 小さいと読めないため。 ★ FVは参照画像のとおり「写真なし・タイポが主役・色の染みが散る」。 構成は変えられないので写真の枠（.fv-bg）は残っているが、 **写真を消して、染みを描くための下地として使い回している。** ========================================================= */ :root{ --k-ink:#111111; --k-paper:#FFFFFF; --k-gray:#6B6B6B; --k-line:#E6E6E6; --k1:#FF4B1F; /* terracotta ＝ 主 */ --k2:#FFD400; /* yellow ＝ 従 */ --k3:#4EC8E8; /* cyan ＝ 染み・キャリアのみ */ --k4:#8BD94A; /* lime ＝ 染み・キャリアのみ */ --k5:#FF63A5; /* pink ＝ 染み・キャリアのみ */ --an:'Anton','Noto Sans JP',sans-serif; /* 欧文ラベルの代わり。書体を増やさずに「ラベルらしさ」を出す */ --k-lab:900 1.02rem/1.5 'Noto Sans JP',sans-serif; /* 2026-08-21：FVの絵の具の飛沫。白い面の背景にも使い回せるよう変数にした */ --ink-splash:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201400%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20aria-hidden%3D%22true%22%3E%20%3Cdefs%3E%20%3Cfilter%20id%3D%22ink1%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.014%22%20numOctaves%3D%224%22%20seed%3D%227%22%20result%3D%22n1%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n1%22%20scale%3D%22190%22%2F%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%22ink2%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.021%22%20numOctaves%3D%225%22%20seed%3D%2219%22%20result%3D%22n2%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n2%22%20scale%3D%22150%22%2F%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%22ink3%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.03%22%20numOctaves%3D%223%22%20seed%3D%2241%22%20result%3D%22n3%22%2F%3E%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n3%22%20scale%3D%22110%22%2F%3E%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Cg%20filter%3D%22url%28%23ink1%29%22%20opacity%3D%22.85%22%3E%20%3Ccircle%20cx%3D%221240%22%20cy%3D%22150%22%20r%3D%22145%22%20fill%3D%22%23FFD400%22%2F%3E%20%3Ccircle%20cx%3D%221345%22%20cy%3D%22305%22%20r%3D%22100%22%20fill%3D%22%23FF4B1F%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20filter%3D%22url%28%23ink2%29%22%20opacity%3D%22.8%22%3E%20%3Ccircle%20cx%3D%221265%22%20cy%3D%22715%22%20r%3D%22118%22%20fill%3D%22%2300C2E0%22%2F%3E%20%3Ccircle%20cx%3D%221330%22%20cy%3D%22720%22%20r%3D%2295%22%20fill%3D%22%237BD91F%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20filter%3D%22url%28%23ink3%29%22%20opacity%3D%22.75%22%3E%20%3Ccircle%20cx%3D%22140%22%20cy%3D%22770%22%20r%3D%22115%22%20fill%3D%22%23FF3B8E%22%2F%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22640%22%20r%3D%2270%22%20fill%3D%22%23FFD400%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20filter%3D%22url%28%23ink3%29%22%20opacity%3D%22.55%22%3E%20%3Ccircle%20cx%3D%221350%22%20cy%3D%22480%22%20r%3D%2246%22%20fill%3D%22%23FF3B8E%22%2F%3E%20%3Ccircle%20cx%3D%22250%22%20cy%3D%22120%22%20r%3D%2252%22%20fill%3D%22%2300C2E0%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } body{background:var(--k-paper);color:var(--k-ink);font-weight:400;} /* 見出しの英字と数字。ここだけ Anton */ .enh,.ladder .st,.qa .q .n,.chapter .no,.iv .no,.ba2 .t,.cta .script{ font-family:var(--an);font-weight:400;letter-spacing:.01em;} .enh{line-height:.9;text-transform:uppercase;} /* ラベル類は Noto Sans JP の 900＋字間。1rem を下回らせない */ .lab,.hook .lab,.thesis .lab,.cover .lab,.mcard .tagm,.mcard .rom,.mcard .ro, .mnav .no,.iv-name .rom,.fv .scroll,.cta .fine,.hnav a,.logo b,.logo span{ font-family:'Noto Sans JP',sans-serif;} .lab,.hook .lab,.thesis .lab,.cover .lab{font:var(--k-lab);letter-spacing:.2em;} /* 強調のしかた（白い面）：テラコッタの文字＋黄色の下線 */ .fv h1 em,.doubt .hd em,.avg b,.thesis .sub b{ font-style:normal;color:var(--k1);padding:0 .04em; background:linear-gradient(transparent 68%,var(--k2) 68%,var(--k2) 94%,transparent 94%);} /* 黒い面：下線とテラコッタがぶつかって読みにくいので、黄の文字だけにする */ .mono .last em,.qa .a b,.hook p.bd b{ font-style:normal;color:var(--k2);background:none;padding:0;} /* ---------- 帯は出さない（2026-08-08 の指示） ---------- */ .marquee{display:none;} /* ---------- ヘッダー ---------- */ header{background:rgba(255,255,255,.9);backdrop-filter:blur(14px); border-bottom:1px solid var(--k-line);} .logo{gap:.7rem;} .logo::before{content:"";width:14px;height:14px;background:var(--k1);rotate:45deg;flex:0 0 auto;} .logo b{color:var(--k-ink);font-weight:900;letter-spacing:.22em;font-size:1.06rem;} .logo span{color:var(--k-gray);font-weight:700;font-size:1rem;letter-spacing:.12em;} .hnav a{background:transparent;color:var(--k-ink);font-weight:900; font-size:1rem;letter-spacing:.06em;padding:0 1.1rem;} .hnav a:nth-child(n){background:transparent;color:var(--k-ink);border-radius:0;margin:0;padding:0 1.1rem;} .hnav a:last-child{background:var(--k-ink);color:#fff;border-radius:100px; margin:.85rem 1.1rem .85rem .5rem;padding:0 1.6rem;} .hnav a:hover{filter:none;color:var(--k1);} .hnav a:last-child:hover{background:var(--k1);color:#fff;} /* ========================================================= FV：写真なし。白地にインクの染みが散り、文字だけで見せる （参照画像のとおり） 染みは要素が足りないので、空いている擬似要素を総動員して6つ描いている： .fv::before / .fv::after / .fv-bg::before / .fv-bg::after / .fv-bg .ph::before / .fv-bg .ph::after .fv-bg（元は写真の器）は下地として使い回し、写真そのものは消している。 形は border-radius を4隅バラバラにして、丸ではなく有機的な形にしている。 ========================================================= */ .fv{display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden; min-height:min(100svh,780px);background:var(--k-paper); padding:calc(var(--hdr) + clamp(2rem,5vw,4rem)) 6vw clamp(3rem,7vw,5.5rem);} /* 2026-08-09：FVも中央に置く（左端に寄っていたため） */ .fv-in{order:2;position:relative;z-index:3;width:100%;max-width:1240px;margin:0 auto;padding:0; text-align:center;} /* 写真を消して、**旧D案のインク染み（SVG）そのもの**を敷く。 参照元 `droom_recruit_D.html` の をそのまま data URI にしたもの。 円を feTurbulence + feDisplacementMap で歪ませて作った、あの飛沫の形。 近似の丸で作り直すと別物になるので、**必ず現物を使う**こと。 作り直すときは：droom_recruit_D.html から を取り出し、 class を xmlns に差し替えて URL エンコードするだけ。 ★ 2026-08-09：見出しを中央に置いたら、飛沫が文字にかぶった （「悪くない。」の句点にピンクが乗り、2行目の右端にシアンがかかった）。 **形と色はそのまま、円の位置だけを画面の四隅へ逃がしている。** viewBox は 1400x900、cover で見えるのは概ね y=100〜800 の帯。 文字が入るのは x=300〜1100 / y=330〜560 なので、ここに円を置かない。 */ .fv-bg{position:absolute;inset:0;order:1;z-index:0;overflow:hidden;pointer-events:none; /* ★ site.css の .fv-bg は background:#0C1A19（暗い地）を持っている。 background-image だけ足すと、その地色が飛沫の隙間から透けて全面が暗くなる。 必ず background-color:transparent で消すこと。 */ background-color:transparent; background-image:var(--ink-splash); background-size:cover;background-position:center;background-repeat:no-repeat; /* 向こうと同じ出方：少し大きい状態からゆっくり戻る */ opacity:0;transform:scale(1.06);} .fv.ready .fv-bg{opacity:1;transform:none; transition:opacity 1.5s ease,transform 2.2s cubic-bezier(.2,.7,.2,1);} .fv-bg .ph{display:none;} /* 自作の丸い染みはやめた（本物と形が違うため） */ .fv::before,.fv::after,.fv-bg::before,.fv-bg::after, .fv-bg .ph::before,.fv-bg .ph::after{display:none!important;content:none;} /* 冒頭の1行は、参照画像と同じ「頭に短い罫を引いたラベル」に */ .fv .script{font-family:'Noto Sans JP',sans-serif;font-weight:900;color:var(--k1); transform:none;text-shadow:none;letter-spacing:.2em;line-height:1.5; font-size:clamp(1rem,1.5vw,1.14rem);margin-bottom:1.4rem; display:flex;align-items:center;justify-content:center;gap:.9rem;} .fv .script::before{content:"";width:clamp(34px,4vw,56px);height:3px;background:var(--k1); flex:0 0 auto;} /* 写真が無いぶん、見出しは思い切り大きく。全幅を使えるので割れる心配も無い */ .fv h1{color:var(--k-ink);text-shadow:none;line-height:1.3;letter-spacing:-.03em; font-size:clamp(2.1rem,5.6vw,4.6rem);} .fv .sub{color:var(--k-ink);text-shadow:none;font-weight:900;margin-top:2rem; font-size:clamp(1.16rem,2.2vw,1.4rem);} /* 染みの上に乗ることがあるので、グレーではなく黒。シアンでもピンクでも読める */ .fv .scroll{color:var(--k-ink);font-weight:900;writing-mode:horizontal-tb; left:auto;right:6vw;bottom:clamp(1.4rem,3vw,2.4rem);letter-spacing:.28em;font-size:1rem;} .fv .scroll::after{background:var(--k-ink);width:56px;height:2px;} @media(max-width:760px){ /* ★ 狭い画面では染みが見出しに乗って読めなくなる（実際、オレンジが 「こんなもんじゃない。」の上にかぶった）。**2つだけ、文字に触れない隅に置く。** 上の余白も増やして、黄が見出しの上で止まるようにしている */ .fv{min-height:0;padding-top:calc(var(--hdr) + 4.6rem); padding-bottom:clamp(2.6rem,7vw,3.8rem);} .fv h1{font-size:clamp(1.9rem,7.4vw,2.6rem);} .fv .scroll{display:none;} /* 狭い画面は画面が短いぶん、飛沫がどう動かしても見出しに重なる。 位置をずらすのは諦めて、**濃度だけ落として文字を優先**する。 色の印象は残るし、見出しは黒のまま読める（PCは濃いまま） */ .fv-bg{opacity:0;} .fv.ready .fv-bg{opacity:.5;} } /* ========================================================= 面は白と黒だけ。節ごとに入れ替わる ========================================================= */ /* ★ 2026-08-09：節と節のあいだの空白を詰めた。 「変な空白」という指摘のため。**何も無い帯が 230〜320px 続く場所が7つあった** （節の下の余白 112px と、次の節の上の余白 141px が足し算になっていたのが原因）。 案1は同じ場所が 135〜153px で収まっているので、そこに合わせる。 数え方：ページ全体のスクリーンショットで「1色しか無い行」が続く長さを測る。 */ .sec{padding:clamp(64px,7.6vw,108px) 0;} .cta{padding:clamp(48px,5.6vw,80px) 6vw clamp(64px,7.6vw,108px);} /* ※ 節ごとの下の余白は、下の各節のルール（.mono / .doubt / .thesis / .mgrid）で まとめて指定している。ここで padding-bottom を足しても後ろの一括指定に負ける。 */ /* ★ 2026-08-09：左寄せをやめて中央組みに戻した。 「文章が左に寄っていて変」「右に変な空白ができる」という指摘のため。 **本文の行そのものは左揃えのまま**（中央揃えの本文は読みにくいので）、 入れ物のほうを中央に置いて、左右の余白を同じにしている。 見出し・帯・締めの一行だけは中央揃えにする。 */ .band{text-align:center;padding:clamp(2.6rem,5.6vw,4.6rem) 6vw clamp(1.6rem,3vw,2.4rem);} .band .enh{margin-bottom:.1rem;font-size:clamp(3.2rem,9vw,7.4rem);} .band p{font-weight:900;line-height:1.45;letter-spacing:-.015em; font-size:clamp(1.5rem,4.4vw,2.9rem);} /* 共感＝黒 */ .band.teal{background:var(--k-ink);color:#fff;} .band.teal .enh{color:var(--k2);} /* 問題提起＝白 */ .band.yellow{background:var(--k-paper);color:var(--k-ink);} .band.yellow .enh{color:var(--k1);} /* 解決策提示＝白 */ .band.lime{background:var(--k-paper);color:var(--k-ink);} .band.lime .enh{color:var(--k1);} /* メンバー＝黒 */ .band.pink{background:var(--k-ink);color:#fff;} .band.pink .enh{color:var(--k2);} /* 節の頭（巨大英字＋日本語の一行）も中央に。 site.css では左揃えだが、案2はここだけ左に残ると右側が大きく空いて見える */ .facts .enh,.facts .jph,.sec .enh,.sec .jph,.mcover .enh,.mcover .jp,.mcover .bd{ text-align:center;} /* ---------- 共感：黒 ---------- */ .mono{background:var(--k-ink);color:#fff;padding:clamp(1rem,2vw,1.6rem) 6vw clamp(2.6rem,5.4vw,4.4rem);} .mono-in{max-width:860px;margin:0 auto;} .mono p{color:#D6D6D6;} .mono .lead{color:#A8A8A8;padding-left:1.2rem;border-left:3px solid var(--k2);font-weight:700;} .mono .voice,.mono .last{color:#fff;} .mono .voice .k{color:var(--k2);} .mono hr{border-top-color:#2C2C2C;} /* ---------- 問題提起：白 ---------- */ .doubt{background:var(--k-paper);padding:clamp(1rem,2vw,1.6rem) 6vw clamp(2.6rem,5.4vw,4.4rem);} .doubt-in{max-width:860px;margin:0 auto;} .doubt .hd,.doubt .awake{color:var(--k-ink);} .doubt .re{color:var(--k-gray);font-weight:700;} .doubt p.bd{color:#333;} /* ---------- 社長ストーリーの入口：黒 ---------- */ .hook{background:var(--k-ink);color:#fff;grid-template-columns:.85fr 1.15fr;align-items:start; gap:clamp(2rem,5vw,4.5rem);max-width:none;margin:0;padding:clamp(2.6rem,5.6vw,4.6rem) 6vw;} .hook .ph{order:1;min-height:0;aspect-ratio:4/5;border-radius:4px;} .hook .box{order:2;background:transparent;padding:0;} .hook .lab{color:var(--k2);} .hook .h{color:#fff;} .hook p.bd{color:#D6D6D6;} .hook .q{color:var(--k2);font-weight:900;} /* 黒い面の上なので、引用は黄のベタに黒文字で立てる */ .hook .said{background:var(--k2);color:var(--k-ink);border:0;border-radius:4px; padding:clamp(1.6rem,3vw,2.2rem);font-weight:900;line-height:1.75;} .hook .said .k{color:var(--k1);} @media(max-width:820px){ .hook{grid-template-columns:1fr;} .hook .ph{aspect-ratio:4/3;} } /* ---------- 解決策提示：白 ---------- */ .thesis{background:var(--k-paper);color:var(--k-ink);text-align:center; padding:clamp(1rem,2vw,1.6rem) 6vw clamp(2.6rem,5.4vw,4.4rem);} .thesis .lab{color:var(--k1);} .thesis h2{color:var(--k-ink);} .thesis .sub{max-width:820px;margin:clamp(1.6rem,3vw,2.4rem) auto 0;} .thesis .sub p{color:#333;} /* ---------- キャリアステップ：白。カードは黒3px枠、hoverで影がずれる ---------- */ .facts{background:var(--k-paper);} .facts .enh{color:var(--k1) !important;font-size:clamp(3.2rem,9vw,7.4rem);} .facts .jph{color:var(--k-ink);} .ladder{grid-template-columns:repeat(4,1fr);gap:1.1rem;background:transparent; max-width:1240px;margin:0 auto;padding:0 6vw;} .ladder>div, .ladder>div:nth-child(1),.ladder>div:nth-child(2), .ladder>div:nth-child(3),.ladder>div:nth-child(4){background:#fff;} .ladder>div{border:3px solid var(--k-ink);border-radius:4px; min-height:clamp(150px,16vw,200px);padding:clamp(1.5rem,2.6vw,2rem); transition:transform .35s,box-shadow .35s;} .ladder>div:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--k-ink);} /* 4段の識別だけは5色を使う（ここが唯一の例外） */ .ladder .st{opacity:1;line-height:.95;font-size:clamp(1.6rem,2.9vw,2.4rem);} .ladder>div:nth-child(1) .st{color:var(--k1);} .ladder>div:nth-child(2) .st{color:var(--k3);} .ladder>div:nth-child(3) .st{color:var(--k5);} .ladder>div:nth-child(4) .st{color:var(--k4);} .ladder h3{color:var(--k-ink);margin-top:.6rem;font-size:clamp(1.14rem,2.2vw,1.44rem);} .ladder .arw{color:var(--k-gray);opacity:1;font-family:'Noto Sans JP',sans-serif;} .rule-list{max-width:860px;margin-left:auto;margin-right:auto;} .rule-list li{color:var(--k-ink);border-top-color:var(--k-line);} .rule-list li:last-child{border-bottom-color:var(--k-line);} .rule-list li::before{color:var(--k1);font-family:'Noto Sans JP',sans-serif;} .avg{color:var(--k-ink);text-align:center;} @media(max-width:900px){.ladder{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.ladder{grid-template-columns:1fr;}} /* ---------- メンバー：黒 ---------- */ .mgrid{background:var(--k-ink);grid-template-columns:repeat(5,1fr); gap:1.1rem;padding:clamp(1rem,2vw,1.6rem) 6vw clamp(2.6rem,5.4vw,4.4rem);} .mcard{background:#1D1D1D;border-radius:4px;transition:transform .35s;} .mcard:hover{transform:translateY(-6px);} .mcard .ph{aspect-ratio:1/1;} .mcard .ov{background:transparent;padding:1.5rem 1.4rem 1.7rem;} .mcard .tagm, .mcard:nth-child(4n+1) .tagm,.mcard:nth-child(4n+2) .tagm, .mcard:nth-child(4n+3) .tagm,.mcard:nth-child(4n+4) .tagm{ position:static;background:transparent;color:var(--k2);padding:0; font-weight:900;font-size:1rem;letter-spacing:.16em;margin-bottom:.7rem;} .mcard .nm{color:#fff;} .mcard .rom{color:#9A9A9A;font-weight:700;font-size:1rem;letter-spacing:.1em;} .mcard .ro{color:#B4B4B4;font-weight:700;font-size:1.06rem;letter-spacing:.06em;} .mcard .ba{border-top-color:#333;} .mcard .ba .was{color:#A8A8A8;} .mcard .ba .now{color:var(--k2);} /* 5枚なので、途中の幅では 3列→2列→1列 と落とす（1枚だけあぶれるのは許容） */ @media(max-width:1280px){.mgrid{grid-template-columns:repeat(3,1fr);gap:1.4rem;}} @media(max-width:900px){.mgrid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.mgrid{grid-template-columns:1fr;}} /* ---------- Q&A：白。カードは黒 ---------- */ .sec:not(.facts){background:var(--k-paper);} .sec:not(.facts) .enh{color:var(--k1) !important;font-size:clamp(3.2rem,9vw,7.4rem);} .sec:not(.facts) .jph{color:var(--k-ink);} .qa{max-width:1040px;margin-left:auto;margin-right:auto;} .qa-item{background:var(--k-ink);color:#fff;border:0;border-radius:4px; margin-bottom:1.1rem;padding:clamp(1.6rem,3vw,2.4rem);} .qa-item:last-child{border:0;} .qa .q .n{color:var(--k2);font-size:clamp(1.7rem,3vw,2.3rem);} .qa .q h3{color:#fff;} .qa .a p{color:#D6D6D6;} .qa .a .said{background:#000;border-left:4px solid var(--k2);color:#fff;border-radius:4px;} .qa .a .said .k{color:var(--k2);} .qa .a .fin{color:var(--k2);} /* ---------- CTA：黒 ---------- */ .cta{background:var(--k-ink);color:#fff;text-align:center;} .cta .script{color:var(--k1);transform:none;line-height:.95;text-transform:uppercase; font-size:clamp(2.6rem,8vw,6rem);margin-bottom:1rem;} .cta h2{color:#fff;} .cta p{color:#CFCFCF;} .cta .fine{color:#9A9A9A;font-weight:700;font-size:1.02rem;} /* ---------- ボタン ---------- */ .btn{border-radius:100px;transition:transform .3s,background .3s,border-color .3s,color .3s;} .btn.p{background:var(--k1);color:#fff;} .btn.p:hover{background:var(--k2);color:var(--k-ink);transform:translateY(-4px);} .btn.s{background:transparent;color:var(--k-ink);border:2px solid var(--k-ink);} .btn.s:hover{background:var(--k-ink);color:#fff;transform:translateY(-4px);} /* 黒い面の上では白抜きにする */ .cta .btn.s,.hook .btn.s,.mono .btn.s,.backnav .btn.s,.mend .btn.s{ color:#fff;border-color:#4A4A4A;} .cta .btn.s:hover,.hook .btn.s:hover,.backnav .btn.s:hover,.mend .btn.s:hover{ background:#fff;color:var(--k-ink);border-color:#fff;} footer{background:var(--k-ink);border-top:1px solid #2A2A2A;} footer span{color:#8A8A8A;} .needchk{background:var(--k1);color:#fff;} /* ========================================================= 別ページ（社長ストーリー／メンバー紹介）。同じ2ルールで通す ========================================================= */ /* ---------- 社長ストーリー ---------- */ body.story-page{background:var(--k-paper);} .cover{background:var(--k-paper);border-bottom:3px solid var(--k-ink);} .cover .bg{background-color:#EFEFEF;} .cover .lab{color:var(--k1);} .cover .said{color:var(--k-ink);} .cover .said .k{color:var(--k1);} .cover .attr{color:#333;} .chapter{background:var(--k-paper);} .chapter .no{color:var(--k1);} .chapter h2{color:var(--k-ink);} .chapter .rule{background:var(--k1);height:4px;} .chapter p.t{color:#333;} .chapter p.t b{color:var(--k-ink);} .chapter .say{color:var(--k-ink);} .chapter .say .k{color:var(--k1);} .chapter .say-a{color:var(--k-gray);font-weight:700;} /* 名指しの一行。2色だけで押し引きを作る */ .chapter .hit{background:var(--k-ink);color:#fff;border-radius:4px;} .chapter .hit.lime{background:var(--k2);color:var(--k-ink);} .chapter .hit.pink{background:var(--k1);color:#fff;} .band-photo{background-color:#EFEFEF;} .sign{background:var(--k-paper);} .sign-in{border-top:3px solid var(--k-ink);} .sign .last{color:var(--k1);} .sign .who{color:#333;} .sign .who b{color:var(--k-ink);} .backnav{background:var(--k-ink);} /* ---------- メンバー紹介 ---------- */ body.members-page{background:var(--k-paper);} .mcover{background:var(--k-ink);color:#fff;} .mcover .enh{color:var(--k2);font-size:clamp(3.2rem,9vw,7.4rem);} .mcover .jp{color:#fff;} /* 本文は 56ch の細い箱なので、中央揃えにするだけだと箱ごと左に残る。箱も中央に置く */ .mcover .bd{color:#CFCFCF;margin-left:auto;margin-right:auto;} .mnav{background:var(--k-ink);} .mnav-in{background:#2C2C2C;} .mnav a{background:#1D1D1D;} .mnav a:hover{background:#262626;} .mnav .no{color:var(--k2);font-weight:900;font-size:1rem;letter-spacing:.16em;} .mnav .nm{color:#fff;} .mnav .ro{color:#B4B4B4;font-size:1.06rem;} .iv{border-top:1px solid var(--k-line);background:var(--k-paper);} .iv .no{color:var(--k1);} .iv h2{color:var(--k-ink);} .iv h2 .k{color:var(--k1);} .iv-head .ph{background-color:#EFEFEF;border-radius:4px;} .iv-name{color:var(--k-ink);} .iv-name .rom{color:var(--k-gray);font-weight:700;font-size:1.02rem;letter-spacing:.1em;} .iv-meta{color:var(--k1);} /* Before → After。BEFOREは薄グレー、AFTERは黒に反転 */ .ba2 > div{border-radius:4px;} .ba2 .was{background:#F2F2F2;} .ba2 .now{background:var(--k-ink);color:#fff;} .ba2::after{background:var(--k-ink);} .ba2 .was .t{color:#7C7C7C;} /* 2026-08-21：2.93:1 で基準割れだったので少し濃く（4.0:1） */ .ba2 .now .t{color:var(--k2);} .ba2 .was li{color:#555;border-top-color:#DDD;} .ba2 .now li{color:#fff;border-top-color:#333;} .iv-cm{border-left:6px solid var(--k1);color:var(--k-ink);} .mend{background:var(--k-ink);} .mend p{color:#fff;} /* ---------- 狭い画面での詰め（2026-08-08） ---------- ラベル類を 1rem まで上げたぶん、390px でヘッダーが横にはみ出していた。 **文字は小さくせず、余白と字間で詰める**（読めなくなっては本末転倒なため） */ @media(max-width:760px){ .logo{padding-left:1rem;padding-right:.5rem;gap:.5rem;} .logo::before{width:11px;height:11px;} .logo b{font-size:.98rem;letter-spacing:.1em;} .hnav a{padding:0 .5rem;font-size:.95rem;letter-spacing:0;} .hnav a:last-child{margin:.7rem .5rem .7rem .25rem;padding:0 .85rem;} } /* 「要確認」の印が 10px しかなく読めなかったので上げる */ .needchk{font-size:.95rem;padding:.2rem .6rem;} /* 2026-08-09：鉤括弧「」への色付けは読みづらいだけとの指摘。地の文と同じ色に統一 */ .k{color:inherit !important;} /* ---------- 白い面に、FVと同じ飛沫を薄く敷く（2026-08-21） ---------- */ /* 文字の下に色が来ると読みにくくなるので、opacity は実測して決めている。 中身は z-index で必ず飛沫より上に出す */ .ink-bg{position:relative;isolation:isolate;} /* 節の縦がFVより長いので、引き伸ばすと飛沫が細く潰れる。横幅だけ合わせて上に置き、 下（BEFORE/AFTERの面）にはかからないようにする */ /* 上端に飛沫が来ると、節の番号（テラコッタの大きい数字）が飛沫にかぶって 2.96:1 まで落ちた（大きい文字の基準は3:1）。飛沫を少し下げて番号を白地に残す */ /* 節ごとに絵を持たせると、節の境目で飛沫がスパッと切れて「変に区切られて」見える。 background-attachment:fixed にすると、どの節も画面を基準に描くので、 境目をまたいで1枚の絵としてつながって見える */ .ink-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--ink-splash);background-size:100% auto;background-position:center top; background-repeat:no-repeat;background-attachment:fixed;opacity:.26;} /* スマホの Safari は background-attachment:fixed をまともに扱わない（描画が飛ぶ）。 小さい画面では素直にスクロールさせる */ @media(max-width:900px){.ink-bg::before,.band::before{background-attachment:scroll;}} @media(max-width:700px){.ink-bg::before{opacity:.16;}} /* ---------- 案D：節タイトルの帯の中に、FVと同じ飛沫を薄く（2026-08-21・本人決定） ---------- 白い帯／黒い帯のどちらにも入れて、節タイトルの見え方を揃える。 黒い面では色が沈むので、そちらだけ濃さを上げている */ .band{position:relative;overflow:hidden;} /* 帯と本文の面で濃さが違うと、境目に薄い段差が見える。 白い帯は本文と同じ濃さ・同じ座標系にして、1枚の絵としてつなげる */ .band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--ink-splash);background-size:100% auto;background-position:center top; background-repeat:no-repeat;background-attachment:fixed;opacity:.26;} /* 黒い面では色が沈むので、濃さを上げて色を出す（黒地なので 0.8 でほぼ原色に見える） */ .band.teal::before,.band.pink::before{opacity:.8;} .band > *{position:relative;z-index:1;} @media(max-width:700px){.band::before{opacity:.22;}.band.teal::before,.band.pink::before{opacity:.4;}} /* ---------- ページごとに、飛沫の散らし方を変える（2026-08-21） ---------- 全ページに同じ絵が同じ大きさで出ると「壁紙」に見えるので、 ページの性格に合わせて 大きさ・寄せ方・濃さ を変えている */ /* トップ：いちばん大きく、四隅に。FVの続きに見えるように */ body:not(.members-page):not(.about-page):not(.story-page) .ink-bg::before, body:not(.members-page):not(.about-page):not(.story-page) .band:not(.teal):not(.pink)::before{ background-size:100% auto;background-position:center top;opacity:.26;} /* 先輩を知る：人が主役なので控えめに */ body.members-page .ink-bg::before, body.members-page .band:not(.teal):not(.pink)::before{background-size:110% auto;background-position:center top;opacity:.22;} /* Droomを知る：情報量が多いので、少し大きめにして左右どちらにも飛沫が来るように */ body.about-page .ink-bg::before, body.about-page .band:not(.teal):not(.pink)::before{background-size:118% auto;background-position:center top;opacity:.26;} /* 代表を知る：手紙なので、紙の外側にだけ大きくにじませる */ body.story-page .ink-bg::before{background-size:120% auto;background-position:center top;opacity:.2;} /* スマホは画面に占める割合が大きくなるので、飛沫を薄くする。 ページごとの指定より後ろ・強い書き方にしないと効かない（一度効かなかった） */ @media(max-width:700px){ /* ページごとの指定（body.about-page ～）のほうが強いので、ここは !important で上書きする */ body .ink-bg::before,body .band:not(.teal):not(.pink)::before{opacity:.18 !important;} } /* ---------- 黒い面にも柄を入れる（2026-08-21：「一部なくなるところはいらない」） ---------- 黒の上では色が沈むので、白い面より濃くする。数字は白い面と同じ見え方になるよう合わせた */ .ink-dark::before{opacity:.55 !important;} @media(max-width:700px){.ink-dark::before{opacity:.42 !important;}} /* ---------- スマホのヘッダー：項目が縦書きに潰れるのを止める（2026-08-21） ---------- 「ホーム／先輩を知る／代表を知る／Droomを知る／話を聞く」の5つが 390px に入りきらず、 1文字ずつ縦に折れていた。折らずに、字と余白を詰めて収める */ @media(max-width:760px){ .hnav a{white-space:nowrap;padding:0 .5rem !important;font-size:.78rem;line-height:1.35;} .hnav a br{display:inline;} .hnav a:last-child{padding:0 .8rem !important;} } @media(max-width:420px){ .hnav a{padding:0 .34rem !important;font-size:.72rem;} .hnav a:last-child{padding:0 .62rem !important;} } /* ---------- PCで下のほうの節に柄が来ない問題（2026-08-21） ---------- fixed は「画面」を基準に1枚だけ描く。size が 100% auto だと画面の上から 900pxぶんしか絵が無く、その下にある節（PCのCTAなど）が空になっていた。 画面いっぱいに広げて、どの高さでも飛沫が来るようにする。 ページ別の指定より後ろ・強い書き方にしないと効かない */ @media(min-width:901px){ body .ink-bg::before,body .band::before{background-size:cover !important;} }