@charset "UTF-8"; /* ========================================================================== 〇〇建設 採用特設サイト / style.css 水色基調・3Dフライイン・スクロールスクラブ ========================================================================== */ /* -------------------------------------------------------------------------- 0. TOKENS -------------------------------------------------------------------------- */ :root{ /* ヘッダーの高さ。ヒーローやドロワーの上余白もこの値を使うので、 ここを変えれば全部そろって動きます（2026-08-14）。 スマホでは高さを詰めます（下の @media を参照）。 ★css/top.css の同名の変数と必ず同じ数字にしてください。 top.css と style.css は同時には読まれないため、両方に定義が要ります。 */ --rc-header-h:92px; /* 通常時（会社サイトの .site-header と同値） */ --rc-header-h-solid:72px; /* 下へスクロールしたとき */ --sky: #e1f4fb; /* ベースの水色 */ --sky-l: #f1fafd; --sky-d: #c6e8f7; --cyan: #00c0f0; /* アクセント */ --cyan-l: #7fdcf5; --cyan-p: #b9ecfa; --blue: #0b6fc4; /* 見出しの青 */ --blue-d: #06529b; --navy: #06263f; /* 本文の文字色（背景には使いません） */ --ink: #0a1a2b; /* 濃い面（ICT・サマリー・エントリー等の背景）。 暗くなりすぎないよう、紺ではなく明るい青を使います。 */ --deep: #0c66b5; --deep-2: #0a5aa0; /* ---- パステルパレット -------------------------------------------- ベースは水色のまま、面ごとに色を差してカラフルにします。 パステルを背景に使うところは、文字色を必ず --navy にしてください （白文字にするとコントラストが取れません）。 */ --c-aqua: #8fe3f5; --c-mint: #a3e4c8; --c-lemon: #ffdf8a; --c-peach: #ffc0a3; --c-pink: #ffb0cf; --c-lilac: #c6b9ff; /* 上のパステルを、そのまま文字に使うと白い背景ではほぼ見えません。 単位（名・歳・％ など）や小さなラベルに色を付けるための「濃いほう」です。 上の6色と1対1で対応していて、白地で 12px の文字に使っても読める濃さです。 ★カード上部のラインは淡いほう（--c-〇〇）、そのカードの単位は 濃いほう（--c-〇〇-d）を使います。必ず対で直してください。 ★色を替えるときは、白い背景に置いて読めるかを必ず確かめてください。 */ --c-aqua-d: #0f7f9e; --c-mint-d: #1fa377; --c-lemon-d: #c08e0e; --c-peach-d: #de7429; --c-pink-d: #d6497d; --c-lilac-d: #6d55d0; /* セクション背景（面）は水色・青系だけに限定します。 パステルはバッジやポリゴンなど小さなアクセントにのみ使い、 大きな面には出しません（急に雰囲気が変わって見えるため）。 */ --t-1: #f2fafd; /* いちばん淡い */ --t-2: #eaf6fc; --t-3: #e6f4fb; /* ページ遷移のペンキ用。上のパステルより少しだけ淡いトーン */ --w-aqua: #b1ebf8; --w-mint: #bfecd9; --w-lemon: #ffe9ae; --w-peach: #ffd2bd; --w-pink: #ffc8de; --w-lilac: #d7cdff; --gray: #5b7385; --gray-l: #9db3c1; --line: rgba(6,38,63,.14); --white: #fff; --ff-jp: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; --ff-en: "Inter","Noto Sans JP",sans-serif; /* 大きく見せる数字用。Inter は 800 まで太らせて字間を詰めると読みにくいので、 ふところが広くて数字が判別しやすい Manrope を先に置いています。 Manrope を読み込んでいないページでは Inter に落ちます。 */ --ff-num:"Manrope","Inter","Noto Sans JP",sans-serif; --ease: cubic-bezier(.22,.75,.25,1); --ease-out: cubic-bezier(.16,1,.3,1); --pad: clamp(20px,5vw,90px); --maxw: 1400px; /* 既定のアクセント（トップページ） */ --accent: var(--c-aqua); --tint: var(--t-1); } /* ページごとのアクセント色。layout.js が を付けます。 --accent はバッジ・ポリゴンなど小さな要素専用。面の色（--tint）は青系のままにします。 */ /* 「会社を知る」（about.html）は廃止し、内容はトップページと data.html に移しました */ body[data-page="data"] { --accent:var(--c-aqua); --tint:var(--t-2); } body[data-page="work"] { --accent:var(--c-lemon); --tint:var(--t-1); } body[data-page="people"] { --accent:var(--c-pink); --tint:var(--t-2); } body[data-page="career"] { --accent:var(--c-lilac); --tint:var(--t-1); } body[data-page="recruit"]{ --accent:var(--c-peach); --tint:var(--t-2); } /* -------------------------------------------------------------------------- 1. BASE -------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--sky); color:var(--navy); font-family:var(--ff-jp); font-size:16px; line-height:1.95; letter-spacing:.02em; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body.is-locked{ overflow:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul,ol,dl,dd{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,p,figure{ margin:0; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } table{ border-collapse:collapse; width:100%; } svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } ::selection{ background:var(--cyan); color:var(--white); } main{ position:relative; z-index:1; } section[id]{ scroll-margin-top:72px; } /* ★募集要項ページだけ、ヒーローの次のセクションの上の余白を詰めます。 他のページは、この余白（最大132px）の直後に「01 — THE JOB／施工管理って、 何をする仕事？」のような大きな見出しが来るので間が持ちます。 募集要項ページは、そのセクションの見出しを削除した経緯があり （01 — ENVIRONMENT）、余白の直後に来るのが「LOCAL LIFE」の小さな字 だけなので、空白だけが続いて離れすぎに見えていました。 ★このページに見出しを戻したときは、この指定も外してください。 */ body[data-page="recruit"] .phero + .sec{ padding-top:clamp(40px,5vw,72px); } /* #entry（募集要項の中の「新卒／中途を選ぶ箱」）、#entry-new（新卒の募集要項）、 #entry-form（中途のエントリーフォーム）は section ではないので、上の行が効きません。 ヘッダーの下に隠れないよう、ここで同じだけ余白を取ります。 */ #entry:not(section), #entry-new, #entry-mid, #entry-form{ scroll-margin-top:96px; } .sp{ display:none; } @media (max-width:767px){ .sp{ display:inline; } } /* .sp の逆。PC でだけ出したいものに使います */ .pc{ display:inline; } @media (max-width:767px){ .pc{ display:none; } } /* -------------------------------------------------------------------------- 1-2. ページ全体の背景（トップページと共通） トップページ（css/top.css の .bg / .spark）とまったく同じものを、 下層ページ全体にも敷いています。 土台 … body の --sky（ベタの水色） .bg … 白〜水色〜青の大きな光をぼかして、ゆっくり漂わせる面 .spark … ページ全体に散る小さなきらめき 器（空の
）は js/layout.js が、きらめきの粒は js/main.js が 差し込みます。色や動きを変えるときは top.css 側もそろえてください。 ★.bg の position は fixed のままにしてください（absolute にしないこと）。 radial-gradient の % は「その要素の幅と高さ」で解かれます。ページは 縦に非常に長いので、absolute（＝ページ全体の高さ）にすると 38% 42% の円が細長い縦帯に化け、左右で背景が二段に見えます。 画面に固定しておけば、つねにビューポートの比率で解かれます。 -------------------------------------------------------------------------- */ .bg{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; } .bg::before{ content:""; position:absolute; inset:-18%; opacity:.85; /* 白・水色・青系だけ。緑や黄や紫を混ぜると、重なった部分が濁って 黒ずんで見えるため、この面では使いません（色みはカードや粒で出します）。 */ background: radial-gradient(38% 42% at 18% 26%, rgba(143,227,245,.62), transparent 70%), radial-gradient(34% 40% at 80% 20%, rgba(185,236,250,.58), transparent 70%), radial-gradient(44% 40% at 64% 78%, rgba(255,255,255,.70), transparent 70%), radial-gradient(36% 42% at 26% 84%, rgba(127,220,245,.48), transparent 70%), radial-gradient(32% 36% at 92% 62%, rgba(160,208,255,.46), transparent 70%); filter:blur(46px); animation:hazeDrift 34s ease-in-out infinite alternate; } @keyframes hazeDrift{ from{ transform:translate3d(-2%,-1.5%,0) scale(1); } to { transform:translate3d(2%,1.5%,0) scale(1.08); } } @media (prefers-reduced-motion:reduce){ .bg::before{ animation:none; } } /* --- 光の結晶（本文より奥に散る小さなきらめき） ------------------------
の中に敷くので、ページの高さいっぱいに散ります。 粒そのものは js/main.js が敷き詰めます。 */ .spark{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } /* 芯は白のまま、外側だけ粒ごとに色を変えています。 色は js/main.js が --tint / --glow を inline で振り分けます。 ★--tint は「粒のふちの色」用です。セクションの面の色（:root の --tint）とは 別物ですが、この中でしか使わないので衝突しません。 */ .spark .sp{ position:absolute; display:block; opacity:0; background:linear-gradient(158deg,#FFFFFF 0%,#FFFFFF 52%,var(--tint,#F0FAFE) 100%); clip-path:polygon(50% 0%,100% 30%,82% 100%,18% 100%,0% 30%); filter:drop-shadow(0 0 5px var(--glow,rgba(255,255,255,.95))); animation:twk 7s ease-in-out infinite; } /* 四方に伸びる光条 */ .spark .sp.st{ background:#FFFFFF; clip-path:polygon(50% 0%,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0% 50%,43% 43%); filter:drop-shadow(0 0 6px var(--glow,rgba(255,255,255,1))); } @keyframes twk{ 0%,100%{ opacity:0; transform:scale(.55) rotate(0deg) } 18% { opacity:.9; transform:scale(1.08) rotate(12deg) } 34% { opacity:.35; transform:scale(.92) rotate(20deg) } 52% { opacity:.85; transform:scale(1.14) rotate(30deg) } 76% { opacity:.15; transform:scale(.78) rotate(42deg) } } @media (prefers-reduced-motion:reduce){ .spark{ display:none } } /* -------------------------------------------------------------------------- 2. 画像プレースホルダ（写真差し替え箇所） -------------------------------------------------------------------------- */ .ph{ position:relative; overflow:hidden; background:#0a2b45; background-image:linear-gradient(150deg,#1b5b86,#0a2b45 60%,#04141f); isolation:isolate; } .ph::after{ content:attr(data-img); position:absolute; left:10px; right:10px; bottom:10px; font-size:10.5px; line-height:1.55; letter-spacing:.05em; color:rgba(255,255,255,.6); border-left:2px solid var(--cyan); padding:3px 0 3px 7px; font-feature-settings:"palt"; } .ph::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 22% 12%, rgba(0,192,240,.3), transparent 62%); } /* 実写を入れた枠。プレースホルダーのグラデーション・説明テキスト・光の膜を消します。 画像そのものは、使う場所ごとに style="background-image:url(...)" で指定します。 */ .ph--img{ background-color:#0a2b45; background-size:cover; background-position:center; background-repeat:no-repeat; background-image:none; } .ph--img::before, .ph--img::after{ content:none; } .ph--road { background-image:linear-gradient(150deg,#1d5f8c,#0b2c46 60%,#04141f); } .ph--river { background-image:linear-gradient(150deg,#0e6172,#0a2d3d 60%,#04131c); } .ph--bridge { background-image:linear-gradient(150deg,#2a4a70,#122842 60%,#050f1c); } .ph--slope { background-image:linear-gradient(150deg,#3c4b33,#1d2a26 60%,#0a1216); } .ph--disaster{ background-image:linear-gradient(150deg,#6b4327,#2a1c1c 60%,#0d0b10); } .ph--survey { background-image:linear-gradient(150deg,#17578e,#0b2a4a 60%,#050f1e); } /* トンネル坑内。奥へ向かって暗くなる見え方に合わせて、暖色の照明を少し混ぜています */ .ph--tunnel { background-image:linear-gradient(150deg,#4a5566,#241f24 55%,#0a0a0f); } /* 以前の #0d7196 は青緑が強すぎたので、彩度を抑えたスチールブルーに */ .ph--drone { background-image:linear-gradient(150deg,#3d7291,#24465a 60%,#101f29); } .ph--town { background-image:linear-gradient(150deg,#2a6289,#153450 60%,#07121e); } .ph--safety,.ph--quality,.ph--schedule,.ph--cost,.ph--meeting,.ph--photo{ background-image:linear-gradient(150deg,#194672,#0c2440 60%,#050e1a); } .ph--p1{ background-image:linear-gradient(160deg,#245a86,#0e2941 60%,#06111e); } .ph--p2{ background-image:linear-gradient(160deg,#31527a,#17253c 60%,#080d17); } .ph--p3{ background-image:linear-gradient(160deg,#136a86,#0b303f 60%,#05121a); } .ph--p4{ background-image:linear-gradient(160deg,#4a4a33,#232526 60%,#0b0d10); } .ph--p5{ background-image:linear-gradient(160deg,#374a70,#181f36 60%,#090c15); } /* -------------------------------------------------------------------------- 3. 背景のポリゴン（スクロールでぐるんと回る） -------------------------------------------------------------------------- */ .blob{ position:absolute; z-index:0; pointer-events:none; background:linear-gradient(140deg,var(--cyan-l),var(--cyan-p) 55%,#dcf4fc); will-change:transform; } .blob--1{ clip-path:polygon(50% 0,92% 18%,100% 62%,68% 100%,20% 92%,0 44%,14% 10%); } .blob--2{ clip-path:polygon(28% 0,100% 10%,86% 58%,100% 88%,44% 100%,0 76%,8% 26%); } .blob--3{ clip-path:polygon(50% 2%,88% 26%,74% 74%,32% 98%,4% 60%,16% 18%); } .blob--4{ clip-path:polygon(0 22%,58% 0,100% 30%,88% 82%,34% 100%,6% 72%); } .blob--solid{ background:linear-gradient(140deg,var(--cyan),var(--cyan-l)); } .blob--ghost{ background:linear-gradient(140deg,rgba(0,192,240,.22),rgba(127,220,245,.08)); } /* ポリゴンは「外側＝スクロール連動」「内側＝常時回転」の二重構造。 同じ要素にCSSアニメーションとJSのtransformを併用すると競合するため。 */ .spin{ display:block; width:100%; height:100%; animation:blobSpin 34s linear infinite; } /* 画像のスクロールズームを、はみ出さないように受け止める枠 */ .fig{ position:relative; overflow:hidden; } .fig>.ph{ position:absolute; inset:0; width:100%; height:100%; } /* -------------------------------------------------------------------------- 4. BUTTON -------------------------------------------------------------------------- */ .btn{ position:relative; display:inline-flex; align-items:center; gap:14px; padding:18px 32px; border-radius:999px; overflow:hidden; font-size:14px; font-weight:700; letter-spacing:.07em; line-height:1; transition:color .45s var(--ease), border-color .45s var(--ease); /* ::before を後ろに回すため、ここで重なりの基準をつくります */ isolation:isolate; } .btn>*{ position:relative; z-index:2; } .btn svg{ width:18px; height:18px; position:relative; z-index:2; transition:transform .45s var(--ease); } /* ラベルが素のテキストのボタンもあるので、 塗りは z-index:-1 で文字より奥に置きます（0 や auto だと文字が隠れます） */ .btn::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; transform:scaleX(0); transform-origin:right center; transition:transform .55s var(--ease-out); } .btn:hover::before{ transform:scaleX(1); transform-origin:left center; } .btn:hover svg{ transform:translateX(6px); } .btn--fill{ background:var(--blue); color:var(--white); } .btn--fill::before{ background:var(--navy); } .btn--cyan{ background:var(--cyan); color:var(--navy); } .btn--cyan::before{ background:var(--navy); } .btn--cyan:hover{ color:var(--white); } .btn--line{ border:1.5px solid var(--navy); color:var(--navy); } .btn--line::before{ background:var(--navy); } .btn--line:hover{ color:var(--white); } .btn--ghost{ border:1.5px solid rgba(255,255,255,.6); color:var(--white); } .btn--ghost::before{ background:var(--white); } .btn--ghost:hover{ color:var(--navy); border-color:var(--white); } .btn--lg{ padding:24px 46px; font-size:15px; } .btn--sm{ padding:13px 24px; font-size:13px; } /* エントリー用のパステルボタン。 ボタン本体は overflow:hidden なので、ぼかした光は box-shadow で外側に出します （擬似要素だと角丸で切り取られてしまうため）。文字は濃紺で可読性を確保。 */ .entry .btn--fill, .footer__cta .btn--fill{ color:var(--navy); background:linear-gradient(120deg,var(--c-aqua) 0%,var(--c-lilac) 48%,var(--c-pink) 100%); box-shadow:0 12px 34px -8px rgba(198,185,255,.95), 0 6px 20px -6px rgba(143,227,245,.9); } /* ENTRY セクションのボタンは、ヒーローの「募集要項を見る」と同じ見せ方に。 ふだんは線だけ、カーソルを当てるとグラデーションが左から現れます。 clip-path で見える範囲だけを広げるので、共通の scaleX 方式と違って グラデーションが引き伸ばされず、そのままの形で出ます。 */ .entry .btn--fill{ background:none; border:1.5px solid var(--navy); box-shadow:none; } .entry .btn--fill::before{ background:linear-gradient(120deg,var(--c-aqua) 0%,var(--c-lilac) 48%,var(--c-pink) 100%); transform:none; /* round を付けないと切り抜きが長方形になり、角丸の外へ一瞬はみ出します */ clip-path:inset(0 100% 0 0 round 999px); transition:clip-path .6s var(--ease-out); } .entry .btn--fill:hover::before{ transform:none; clip-path:inset(0 0 0 0 round 999px); } /* CONTACT の ENTRY は青系でそろえます */ .footer__cta .btn--fill::before{ background:linear-gradient(120deg,var(--cyan-p) 0%,var(--c-aqua) 55%,var(--cyan-l) 100%); } /* box-shadow は overflow の外へ出るので使いません */ .entry .btn--fill:hover{ color:var(--navy); } /* CONTACT の ENTRY は青系でそろえるので、下に落ちる光も水色にします （暖色のままだとボタンの下から赤い光がにじみます） */ /* box-shadow は overflow の外へ出るので使いません */ .footer__cta .btn--fill:hover{ color:var(--navy); } /* CONTACT（エントリーをお待ちしています）の本エントリーだけは、 ふだんは線だけの状態にして、カーソルを合わせたときに色がつきます。 色そのものは共通の ::before（レモン〜ピーチ〜ピンク）が担当します。 */ .footer__cta .btn--fill{ background:none; border:1.5px solid var(--navy); box-shadow:none; transition:color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); } /* にじみが広がるだけなので、輪郭線は消さずに残します */ /* -------------------------------------------------------------------------- 5. LOADER -------------------------------------------------------------------------- */ /* 読み込み画面の退場。 以前は clip-path で下から幕を上げていましたが、いかにも幕らしく野暮ったいので、 光が広がって溶けるように、ふわっと拡大しながらぼけて消える形にしています。 */ .loader{ position:fixed; inset:0; z-index:9999; background:var(--sky); display:grid; place-items:center; transform:scale(1); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); } .loader.is-done{ opacity:0; transform:scale(1.09); filter:blur(12px); pointer-events:none; } /* 文字だけ少し先に、上へ抜けるように消す */ .loader__inner{ transition:opacity .5s var(--ease-out), transform .65s var(--ease-out); } .loader.is-done .loader__inner{ opacity:0; transform:translateY(-20px); } /* blob は transform をアニメーションが握っているので、opacity だけで消す */ .loader.is-done .loader__blob{ opacity:0; transition:opacity .75s var(--ease-out); } .loader__blob{ position:absolute; width:64vmin; height:64vmin; opacity:.85; background:conic-gradient(from 200deg, var(--c-aqua) 0deg, var(--c-mint) 70deg, var(--c-lemon) 140deg, var(--c-peach) 200deg, var(--c-pink) 260deg, var(--c-lilac) 320deg, var(--c-aqua) 360deg); clip-path:polygon(50% 0,92% 18%,100% 62%,68% 100%,20% 92%,0 44%,14% 10%); animation:blobSpin 9s linear infinite; } @keyframes blobSpin{ to{ transform:rotate(360deg) scale(1.06); } } .loader__inner{ position:relative; text-align:center; padding:0 24px; } .loader__copy{ color:var(--blue); font-size:clamp(19px,3.2vw,34px); font-weight:900; letter-spacing:.04em; opacity:0; transform:translateY(16px); animation:loadIn .9s .15s var(--ease-out) forwards; } @keyframes loadIn{ to{ opacity:1; transform:none; } } .loader__bar{ width:min(300px,58vw); height:2px; margin:26px auto 12px; background:rgba(6,38,63,.16); overflow:hidden; } .loader__bar span{ display:block; height:100%; width:0; background:var(--blue); } .loader__num{ font-family:var(--ff-en); color:var(--gray); font-size:12px; letter-spacing:.14em; } .loader__num i{ font-style:normal; } /* -------------------------------------------------------------------------- 6. ページ遷移カーテン（廃止） -------------------------------------------------------------------------- */ /* パステルの4分割パネルで画面を覆う遷移演出は削除しました。 ページ間の移動はブラウザ標準の遷移だけです（HTML・JS 側も撤去済み）。 */ /* -------------------------------------------------------------------------- 7. HEADER -------------------------------------------------------------------------- */ /* ★左右の余白と要素の間隔は、トップページのヘッダー（css/top.css の .nav）と 同じ数字にしてください。以前ここだけ var(--pad)（最大90px）だったため、 トップページ（最大44px）から下層ページへ移ると、 ロゴと社名が右へ飛ぶように見えていました。 本文の左余白（--pad）とは別物です。そろえるのはヘッダーどうしです。 */ /* ★高さの 70px / 58px は、トップページの .nav（上下 16px / 10px の余白＋ ロゴ 38px）とちょうど同じ数字です。ロゴの上下位置をそろえるためなので、 ロゴの大きさを変えたときは、この2つも計算し直してください。 */ /* ★2026-08-14: 高さは --rc-header-h（PC 92px／スマホ 64px）。会社サイトの .site-header と同値です。ヒーローやドロワーの上余白も同じ変数を使うので、 数字を直すときは :root の1か所だけで済みます。 */ .header{ position:fixed; top:0; left:0; width:100%; height:var(--rc-header-h); z-index:900; display:flex; align-items:center; gap:clamp(12px,2vw,28px); padding:0 clamp(20px,4vw,44px); transition:background .5s var(--ease), height .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); } /* ヒーローの上にいる間は透過。抜けたら下地を敷いて文字を読めるようにします。 水色だと帯として主張するので白にしています。 ★すりガラス（backdrop-filter のぼかし）は使いません。 後ろの文字がにじんで読みにくくなるため、白の透明度だけで調整します。 */ .header.is-solid{ background:rgba(255,255,255,.94); box-shadow:0 1px 0 var(--line); height:var(--rc-header-h-solid); } .header.is-hidden{ transform:translateY(-100%); } /* トップページのヒーローは写真＋左側を暗くした膜なので、紺のロゴと紺の文字は そのままでは読めません。ヘッダーが透過している間だけ白抜きに切り替えます。 白いロゴ画像は用意せず、filter で紺を白に抜いています （brightness(0) でいったん真っ黒にしてから invert(1) で白へ）。 下へスクロールして白い帯（.is-solid）になったら、元の紺に戻ります。 下層ページのヒーロー（.phero）は明るい面なので対象外です。 */ body[data-page="index"] .header{ transition:color .5s var(--ease); } body[data-page="index"] .header:not(.is-solid){ color:#fff; } /* ヘッダー自身が持つ、薄い黒の膜。 ヒーローの写真は画面の右端まで来るので、白いヘルメットやシャツの上に ナビの白文字が乗ると読めなくなります。ヒーロー側の上端にも膜を敷いて いますが、そちらはヒーローの箱と一緒に上へ流れてしまい、 スクロール中（ヘッダーが透過のまま／まだ白い帯になる前）に効きません。 ヘッダーに付けておけば、後ろに何が来ても必ず読めます。 */ body[data-page="index"] .header:not(.is-solid)::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(4,18,31,.52) 0%, rgba(4,18,31,.12) 74%, rgba(4,18,31,0) 100%); } body[data-page="index"] .header:not(.is-solid) .logo__mark{ filter:brightness(0) invert(1); } body[data-page="index"] .header:not(.is-solid) .logo__name{ color:#fff; } /* 社名の上のキャッチも、透過ヘッダーの間は白抜きにします。 */ body[data-page="index"] .header:not(.is-solid) .logo__tag{ color:rgba(255,255,255,.85); } body[data-page="index"] .header:not(.is-solid) .gnav a.is-current{ color:#fff; } /* 英字（.en）は水色のままだと写真の上で沈むので、透過ヘッダーの間は白寄りにします。 会社サイトのヘッダーでも、白ヘッダーになる前は同じ扱いです。 */ body[data-page="index"] .header:not(.is-solid) .gnav a .en{ color:rgba(255,255,255,.78); } body[data-page="index"] .header:not(.is-solid) .gnav a.is-current .en{ color:#fff; } body[data-page="index"] .header:not(.is-solid) .hbtn--main{ border-color:rgba(255,255,255,.8); color:#fff; } body[data-page="index"] .header:not(.is-solid) .hbtn--main:hover{ background:rgba(255,255,255,.14); } body[data-page="index"] .header:not(.is-solid) .burger span{ background:#fff; } /* ★ロゴまわりはトップページ（css/top.css の .logo / .logo__mark / .logo__name / .logo__sub）と 同じ設定にそろえています。片方だけ直すとページを移ったときに大きさや色が 変わって見えるので、変えるときは両方あわせてください。 */ .logo{ display:flex; align-items:center; gap:12px; margin-right:auto; } /* --- 丸いシンボルマーク --------------------------------------------------- 会社サイト（asahi-hp/theme/asahi-construction/company-logo.png）と同じ、 マーク単体の画像です。マーク＋社名が1枚に入った logo-navy.png は ヘッダーでは使いません（社名部分の書体が下の .logo__name と別物になるため）。 */ /* ★2026-08-14: 会社サイトのヘッダー（.brand .logo-mark）と同じ 42×42px にしました。 以前は clamp(28px,3vw,38px) で、会社サイトより一回り小さく見えていました。 */ /* ★object-fit:contain は必須です。元画像は 513×533 の縦長なので、 これが無いと 42×42 に押し込まれて社章が横に潰れます。 会社サイトも「42×42の枠＋contain」で、実寸は約40×42になります。 */ .logo__mark{ height:42px; width:42px; flex:none; object-fit:contain; transform:translateY(3px); transition:transform .5s var(--ease), height .5s var(--ease); } .logo:hover .logo__mark{ transform:translateY(3px) scale(1.03); } /* 社名とキャッチの2段組み。会社サイトの .brand-txt と同じです。 */ .logo__txt{ display:flex; flex-direction:column; line-height:1.35; } .logo__tag{ font-size:8.3px; letter-spacing:.18em; font-weight:500; opacity:.78; color:var(--navy); white-space:nowrap; } /* --- 社名 ----------------------------------------------------------------- ★会社サイトのヘッダー（asahi-hp/theme/asahi-construction/style.css の 「.brand .name」）に合わせています：Noto Sans JP／太さ700／字間 .08em。 字間を広めに取ってあるので、700 でも黒い塊になりません。 字間を詰めると、とたんに「ぼってり」して見えるので、.08em は下げないこと。 ★元のロゴ画像の丸ゴシックは、ヘッダーの大きさまで縮めると画数の多い字が つぶれて読みづらいので、ヘッダーでは使いません。 */ /* ★2026-08-14: 会社サイトの .brand .name と同じ 25.9px（＝1.62rem）にしました。 以前は clamp(16px,1.7vw,21px) で、会社サイトより明らかに小さく見えていました。 */ .logo__name{ font-size:25.9px; font-weight:700; letter-spacing:.08em; color:var(--navy); white-space:nowrap; line-height:1.2; } /* ★下へスクロールしてもロゴは縮めません。トップページ（css/top.css の .nav）が 縮めないので、そろえています。片方だけ縮むと、ページを移ったときに ロゴの大きさが変わって見えます。 */ /* スマホではヘッダーを詰めます（2026-08-14）。92px は指で持つ画面には高すぎ、 本文の見える範囲が削られるためです。会社サイトの .site-header と同じ数字です。 */ /* ★社名の大きさは、会社サイトのヘッダー（asahi-hp/theme/asahi-construction/style.css の 「.brand .name」）と1つずつ同じ数字にしています（2026-08-14）。 以前は 19px／18px で、会社サイト（19.84px／最大21.12px）より小さく、 ページを移ると社名が縮んで見えていました。 ★区切りも会社サイトに合わせて 768px と 560px です。600px にすると、 561〜600px のあいだだけ2つのサイトで大きさが変わります。 ★会社サイト側を直したら、必ずこことセットで直してください （css/top.css の同じ節も一緒に）。 */ @media (max-width:768px){ :root{ --rc-header-h:64px; --rc-header-h-solid:56px; } .logo__mark{ height:34px; width:34px; transform:translateY(2px); } .logo__name{ font-size:1.24rem; } .logo__tag{ font-size:.44rem; } } @media (max-width:560px){ /* 狭い画面では画面幅に追従させます（会社サイトと同じ clamp）。 マークの大きさは会社サイトでは 34px のまま変えないので、ここでも変えません。 */ .logo__name{ white-space:nowrap; font-size:clamp(1.02rem,5.6vw,1.32rem); letter-spacing:.06em; } .logo__tag{ white-space:nowrap; font-size:.44rem; letter-spacing:.15em; } } /* ★2026-08-14: 会社サイトのヘッダー（asahi-hp のテーマ／style.css の .gnav li a）と 同じ組みにそろえました。日本語（.jp）の下に英字（.en）を小さく置き、 下線は中央から左右へ伸びます。数値は会社サイトの実寸に合わせています： .jp … .82rem ＝ 13.1px ／ 太さ700 ／ 字間 .1em .en … .58rem ＝ 9.3px ／ 太さ600 ／ 字間 .24em ／ 大文字 項目の左右の間隔 … clamp(8px,.95vw,15px)（gap ではなく padding で取る） ★palt は字間の詰め。カタカナや「・」まわりの余白を詰めて、 1語のかたまりとして読めるようにするためです。 */ .gnav{ display:flex; align-items:center; gap:0; } .gnav a{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px clamp(8px,.95vw,15px); font-feature-settings:"palt"; overflow:hidden; } .gnav a .jp{ display:block; font-size:13.1px; font-weight:700; letter-spacing:.1em; transition:transform .45s var(--ease); } .gnav a .en{ display:block; font-family:var(--ff-en); font-size:9.3px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); transition:transform .45s var(--ease); } /* 下線は中央から左右へ。会社サイトと同じく、幅は 56% で止めます。 */ .gnav a::after{ content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; border-radius:2px; background:var(--cyan); transform:translateX(-50%); transition:width .35s var(--ease-out); } .gnav a:hover::after,.gnav a.is-current::after{ width:56%; } .gnav a:hover .jp,.gnav a:hover .en{ transform:translateY(-2px); } .gnav a.is-current{ color:var(--blue); } .gnav a.is-current .en{ color:var(--blue); } .hbtn{ isolation:isolate; display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.06em; transition:background .4s var(--ease), color .4s var(--ease); } .hbtn svg{ width:15px; height:15px; transition:transform .4s var(--ease); } .hbtn:hover svg{ transform:translateX(4px); } .hbtn--sub{ border:1.5px solid var(--navy); } .hbtn--sub:hover{ background:var(--navy); color:var(--white); } .hbtn--main{ background:none; border:1.5px solid var(--navy); color:var(--navy); font-family:var(--ff-en); letter-spacing:.1em; } .burger{ display:none; width:46px; height:46px; position:relative; z-index:1001; } .burger span{ position:absolute; left:12px; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform .5s var(--ease), opacity .3s, background .3s; } .burger span:nth-child(1){ top:17px; } .burger span:nth-child(2){ top:23px; } .burger span:nth-child(3){ top:29px; } .burger.is-open span{ background:var(--navy); } .burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .burger.is-open span:nth-child(2){ opacity:0; } .burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* メニューの文字数が増えた（「データで見る旭建設」）ぶん、 横並びが苦しくなる手前で字間と間隔を詰めます。1200px 以下は従来どおりハンバーガー。 */ /* 2段組みにしたので、詰めるのは項目の左右余白と日本語の字間です（top.css と同じ）。 */ @media (max-width:1360px){ .gnav a{ padding-left:7px; padding-right:7px; } .gnav a .jp{ font-size:12.2px; letter-spacing:.06em; } .gnav a .en{ font-size:8.8px; letter-spacing:.2em; } } @media (max-width:1200px){ .gnav,.hbtn--sub{ display:none; } .burger{ display:block; } } @media (max-width:600px){ .hbtn--main{ display:none; } } /* -------------------------------------------------------------------------- 8. DRAWER -------------------------------------------------------------------------- */ /* ========================================================================== ハンバーガーメニュー（2026-08-14 全面的に作り直し） -------------------------------------------------------------------------- 会社サイトのスマホメニュー（asahi-hp のテーマ／style.css の 「@media(max-width:1080px)」の .gnav）と同じ組みにそろえています。 ・淡い水色のグラデーションを画面いっぱいに敷いて、すっと現れる ・1行に「日本語（左）＋英字（右）」、下に細い罫線 ・上から順に少しずつ遅れて浮かび上がる ・最後に面ボタン（会社サイトは「お問い合わせ」、こちらは「募集要項」） 以前は、右上から円が広がる演出＋回転する多角形＋大きな見出し＋連番でしたが、 会社サイトと別物だったため廃止しました。 ★css/top.css の同じ節と必ず両方あわせて直してください。 ========================================================================== */ .drawer{ position:fixed; inset:0; z-index:890; pointer-events:none; visibility:hidden; opacity:0; transition:opacity .4s var(--ease), visibility .4s; } .drawer.is-open{ pointer-events:auto; visibility:visible; opacity:1; } .drawer__bg{ position:absolute; inset:0; background:linear-gradient(180deg,#f6fbfe 0%,#e3f1fa 100%); } .drawer__inner{ position:relative; height:100%; overflow-y:auto; overscroll-behavior:contain; padding:calc(var(--rc-header-h) + 24px) 0 calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; } /* ★項目は上から詰めます（2026-08-14 修正）。 以前は margin-block:auto で上下中央に寄せていましたが、採用サイトは項目が 5つと少ないため、会社サイト（項目が多く上から詰まって見える）と並べたときに 「真ん中に固まっている」と、明らかに違って見えていました。 ★display:flex ＋ gap:2px は会社サイト（.gnav ul）と同じ。ただの ul のままだと gap が効かず、項目が隙間なく詰まります。 */ .drawer__list{ list-style:none; width:min(440px,86%); margin-block:0; display:flex; flex-direction:column; gap:2px; } .drawer__list li{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .drawer.is-open .drawer__list li{ opacity:1; transform:none; } .drawer.is-open .drawer__list li:nth-child(2){ transition-delay:.05s; } .drawer.is-open .drawer__list li:nth-child(3){ transition-delay:.1s; } .drawer.is-open .drawer__list li:nth-child(4){ transition-delay:.15s; } .drawer.is-open .drawer__list li:nth-child(5){ transition-delay:.2s; } .drawer.is-open .drawer__list li:nth-child(6){ transition-delay:.25s; } .drawer__list a{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:16px 10px; color:var(--f-ink,#2e4d61); border-bottom:1px solid rgba(46,77,97,.14); } /* ★line-height:2 は会社サイトと同じ（body の既定値）。1.4 にすると1行あたり 10px 低くなり、メニュー全体が詰まって見えます（2026-08-14 修正）。 */ .drawer__ja{ font-size:1.05rem; font-weight:700; letter-spacing:.04em; line-height:2; } .drawer__en{ font-family:var(--ff-en); font-size:.58rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#3d9ccb; } .drawer__list a.is-current .drawer__ja{ color:#2e7ea9; } /* 会社サイトの .gnav .nav-contact a と同じ面ボタン */ .drawer__cta{ width:min(440px,86%); margin:18px 0 0; padding:16px 20px; text-align:center; background:#3d9ccb; color:#fff; font-weight:700; letter-spacing:.06em; border-radius:3px; transition:background .35s var(--ease); } .drawer__cta:hover{ background:#2e7ea9; color:#fff; } /* -------------------------------------------------------------------------- 9. HERO（トップページ） -------------------------------------------------------------------------- */ /* ヒーローは画面1つぶん。背景は images/hero/4.jpg の1枚です。 background-attachment:fixed が「固定背景」の本体です。 写真は画面（ビューポート）に対して置かれるのでスクロールしても動かず、 一方で背景は .hero の箱の中だけに描かれるため、はみ出す心配もありません。 結果、スクロールすると文字だけが上に流れ、写真はその場に残り、 次のセクションが下から写真を覆っていきます。 組み方は「文字は左の濃紺の面、写真は右を横に流れる帯」です。 調整するのはこのあたりだけです。 --hero-strip-w … 右の帯の幅。広げるほど写真が主役になります。 --hero-shot-w … 写真1枚の幅。狭くすると枚数が多く見えます。 --hero-slide … 帯が半周する時間。長くするほどゆっくり流れます。 --hero-tint … 写真に重ねる青。写真はモノクロにしてあり、 この色を soft-light で重ねて青く見せています。 もっと強く青くしたいなら var(--cyan) にしてください。 */ /* 写真の帯が見える範囲。ヒーローと INTRO をまとめて囲っています。 中の position:fixed（＝流れる帯）をこの箱の中だけに切り抜きます。 overflow:hidden では position:fixed の子は切り抜けないため、 clip-path が必要です。これがないと帯がページのどこにでも出ます。 帯を見せる範囲を変えたいときは、この div が囲むセクションを増減してください。 */ /* ★写真の帯に関わる変数は、必ずこの .herozone 側に置いてください。 帯（.hero__strip）は .hero の外にあるので、.hero に書いた変数は 帯に届きません（--hero-shot-w が未定義になり、写真の幅が 0 になります）。 --hero-shot-w … 写真1枚の幅。狭くすると枚数が多く見えます。 --hero-slide … 帯が1周する時間。長くするほどゆっくり流れます。 --hero-tint … 写真の色を揃えるために重ねる青（soft-light）。 --hero-lift … 暗部を持ち上げて明るく見せる層の色（screen）。 --hero-lift-a … その層の強さ。上げるほど明るく、上げすぎると白っぽく濁ります。 --hero-tone-a … その青の強さ。下げるほど青が薄れ、 モノクロ写真の素の階調に近づきます。 --hero-seam … 写真と写真の隙間の色。 ※写真1枚ごとに違うパステルを当てる案は試して見送りました（main.js に経緯）。 色は帯全体でこの --hero-tint 1つに統一しています。 */ .herozone{ --hero-shot-w:clamp(240px,21vw,420px); --hero-slide:90s; --hero-tint:#5cc3de; --hero-lift:#b4e8f7; --hero-lift-a:.24; --hero-tone-a:.5; --hero-seam:#2b7fbe; position:relative; clip-path:inset(0); } .hero{ /* 左右の余白。文字の左端と、SCROLL の右端をここでそろえます */ --hero-padx:clamp(24px,6vw,110px); /* 文字が乗る左側にかける青い膜の濃さ。 下げるほど後ろの写真がはっきり見え、上げるほど文字が読みやすくなります。 .84 あたりが「写真がうっすら分かる／白文字も読める」の境目です。 これより下げると、写真に写っている人の顔が見出しの真後ろに来たときに 文字が読み取りにくくなります。 ※膜の色を明るくしてあるので、これ以上明るい青にすると 本文（.hero__lead）の白文字が 4.5:1 を割ります。 */ --hero-veil:.84; position:relative; height:100svh; overflow:hidden; /* 文字は左・縦は中央。右を流れる写真とぶつからないようにしています */ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:96px var(--hero-padx); /* 背景は敷きません。後ろの帯を透かすため、色は下の ::before の膜で付けます。 （不透明な背景を敷くと写真が完全に隠れます） */ } /* 左にかける青い膜。半透明なので、後ろの写真がうっすら透けます。 右へ向かって消えるので、人物側は写真そのままの明るさで出ます。 2枚目は、ヘッダーが乗る帯をほんのり締めるためのものです。 */ .hero::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background: /* 左〜中央（文字が乗る範囲）は青をやや深めに保ちます。 ここを明るい青にすると、明るい写真が本文の真後ろを通った瞬間に 白文字のコントラストが 3.7:1 まで落ちました（4.5:1 が必要）。 明るい雰囲気は膜ではなく、写真側（brightness／screen の層）で作っています。 文字が乗らない右側だけは明るい水色まで振っています。 */ linear-gradient(90deg, rgba(14,92,158,var(--hero-veil)) 0%, rgba(18,104,172,calc(var(--hero-veil) - .02)) 34%, rgba(60,165,220,calc(var(--hero-veil) * .42)) 62%, rgba(60,165,220,0) 82%), /* 画面上端を軽く締めるだけの膜。ナビの文字の読みやすさは ヘッダー自身の ::before が受け持つので、ここは控えめにしています。 */ linear-gradient(180deg, rgba(4,18,31,.2) 0%, rgba(4,18,31,0) 13%); } /* 画面いっぱいを流れる写真の帯。 position:fixed で画面に貼り付けてあるので、スクロールしても上下に動きません。 見える範囲は親（.herozone）の clip-path が決めています。 */ .hero__strip{ position:fixed; top:0; left:0; z-index:1; width:100%; height:100svh; overflow:hidden; /* 中の soft-light を、写真だけを相手に合成させます。 これがないと、下にあるページ全体の色と混ざってしまいます。 */ isolation:isolate; } /* 写真を横一列に並べたレール。main.js が同じ並びを2回入れるので、 幅の半分ぶん動かしたところで元の絵柄に戻り、継ぎ目なくつながります。 */ .hero__track{ display:flex; width:max-content; height:100%; /* 写真の間の隙間に敷く色。ここを透明にすると、上に重なる青の層が そのまま出て、明るい水色の帯が何本も光ってしまいます （ヘッダーの白い文字も読みにくくなります）。 以前は紺（#052033）でしたが、暗い縦線が何本も入って重く見えたので、 左の膜と同じ青の系統まで明るくしています。 */ background:var(--hero-seam); animation:heroSlide var(--hero-slide) linear infinite; will-change:transform; } @keyframes heroSlide{ to{ transform:translateX(-50%); } } /* 写真の間隔は gap ではなく margin-right で取っています。 gap だと最後の1枚のうしろに隙間が付かないため、 1周ぶんの幅とレール全体の半分がぴったり一致せず、 ループのつなぎ目で数ピクセル飛んでしまいます。 */ .hero__shot{ flex:none; width:var(--hero-shot-w); height:100%; margin-right:12px; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:var(--hero-seam); /* 色はここで捨てて、下の2枚の層で付け直します。 元写真の色をそのまま青に寄せる（hue-rotate 等）方法だと、 写真ごとに元の色が違うぶん仕上がりが揃いませんでした。 brightness / contrast は「全体が暗く重い」対策です。 コントラストを少し落としてから明るさを上げると、 黒く沈んでいた作業着や影が持ち上がり、締まりは残ります。 */ filter:grayscale(1) contrast(.84) brightness(1.24); } /* 1枚目：暗部を持ち上げる層。 screen は「暗いところだけを明るくする」合成なので、 影で黒く潰れていた部分が浮き上がって軽くなります。 */ .hero__strip::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--hero-lift); opacity:var(--hero-lift-a); mix-blend-mode:screen; } /* 2枚目：色を揃える層。モノクロの写真に soft-light で青を乗せると、 明るいところは水色、暗いところは青に寄り、全部の写真の色が揃います。 --hero-tone-a で薄めているので、青は「ほんのり乗っている」程度です。 青をはっきり出したいなら 1 に近づけてください。 */ .hero__strip::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:var(--hero-tint); opacity:var(--hero-tone-a); mix-blend-mode:soft-light; } @media (prefers-reduced-motion:reduce){ .hero__track{ animation:none; } } /* スマホ。横幅が足りないので「左に文字・右に写真」をやめ、 写真の上に文字を中央で重ねます。 帯の position:fixed も解除します（iOS Safari で描画が安定しないため）。 固定をやめるので、帯はヒーローの中だけに収まります （INTRO で写真が透ける演出も、スマホでは出ません）。 */ @media (max-width:768px){ /* 写真の幅は .herozone 側で。.hero に書いても帯には届きません */ .herozone{ --hero-shot-w:clamp(200px,52vw,300px); } .hero{ justify-content:flex-end; align-items:center; /* 上はヘッダーぶん＋余白。ヘッダーの高さは --rc-header-h で決めているので、 ここに数字を直接書かないこと（スマホで高さを詰めたときにずれます）。 */ padding:calc(var(--rc-header-h) + 32px) var(--pad) clamp(56px,8vh,88px); } .hero__strip{ position:absolute; height:100%; } /* 写真が全面に来るので、青い横向きの膜はやめて、 文字が乗る下側だけを縦に暗くします。 */ .hero::before{ background: linear-gradient(180deg, rgba(4,18,31,.44) 0%, rgba(4,18,31,0) 16%), linear-gradient(180deg, rgba(4,18,31,0) 28%, rgba(4,18,31,.5) 54%, rgba(4,18,31,.82) 82%, rgba(4,18,31,.92) 100%); } .hero__body{ max-width:100%; text-align:center; } .hero__btns{ justify-content:center; } .hero__scroll{ left:50%; right:auto; transform:translateX(-50%); } } /* スマホ限定。ヒーローは height:100svh + overflow:hidden なので、 中身の合計が画面の高さを超えると、はみ出したぶんが切れて見えなくなります。 上下の余白と行間を詰め、見出しの下限サイズも下げて収まるようにします。 PC版（601px 以上）には一切影響しません。 */ @media (max-width:600px){ .hero{ padding:var(--rc-header-h) var(--pad) 72px; } .hero__eyebrow{ margin-bottom:16px; } .hero__ttl{ font-size:clamp(34px,9.8vw,50px); line-height:1.26; } .hero__lead{ margin-top:18px; font-size:13px; line-height:1.95; } .hero__btns{ margin-top:26px; } .hero__btns .btn{ padding-block:15px; min-width:min(300px,86vw); } .hero__scroll{ bottom:14px; } } /* 文字は画面の左半分に収めます。人物（右）に文字がかからない幅が上限です。 広げたいときは 54% を上げてください（上げるほど人物に近づきます）。 */ .hero__body{ position:relative; z-index:3; text-align:left; max-width:min(640px,54%); } /* 以前ここには「文字の裏に敷く白い膜」がありました。 背景が写真になり、文字を白抜きにしたので不要です（白い膜の上に白い文字は読めない）。 代わりに .hero::before の下向きの暗いグラデーションで コントラストを取っています。濃さの調整はそちらで行ってください。 */ .hero__eyebrow{ display:inline-block; font-size:19px; letter-spacing:.14em; color:var(--blue); font-weight:700; /* 写真の上に乗るので、下地の白は以前（.7）より不透明にしています */ padding:13px 32px; border-radius:999px; background:rgba(255,255,255,.88); margin-bottom:30px; opacity:0; transform:translateY(10px); } .is-loaded .hero__eyebrow{ animation:fadeUp .9s 1.1s var(--ease-out) forwards; } /* スマホ限定。「／」と「年度 新卒採用」の間で折り返せてしまい、 半端な位置で改行されるため、1行に収まる大きさへ落としたうえで 折り返しそのものを禁止します。PC版のサイズには影響しません。 */ @media (max-width:600px){ .hero__eyebrow{ font-size:clamp(10.5px,3.2vw,13px); letter-spacing:.05em; padding:9px 16px; margin-bottom:22px; white-space:nowrap; max-width:100%; } } @keyframes fadeUp{ to{ opacity:1; transform:none; } } /* 見出しはゴシック（Noto Sans JP の最太 900）。サイト共通の見出しと同じ書体です。 手書き（Klee One）→ 明朝（Noto Serif JP）と試して、どちらもやめました。 太いゴシックは面で塊になるので、写真の上でもいちばん強く立ちます。 字面が詰まるぶん、字間（letter-spacing）はわずかに開けています。 */ .hero__ttl{ font-family:var(--ff-jp); /* 左半分に収める組みになったので、以前（最大128px）より少し落としています。 これ以上大きくすると「人生を幸せに」が1行で入らず、途中で折り返します。 */ font-size:clamp(40px,5.8vw,92px); font-weight:900; line-height:1.3; letter-spacing:.02em; /* 背景が写真なので白抜き。写真の明るい部分に重なっても輪郭が消えないよう、 広めの影（20px）で沈ませ、細い影（3px）で縁を締めています。 */ color:#fff; text-shadow:0 2px 20px rgba(4,18,31,.6), 0 1px 3px rgba(4,18,31,.45); } /* 現れ方は行ごとに1回だけ。ふわっと上がって出るだけの、素直な動きです （文字ごとの傾きや揺れは手書きの表現だったので入れていません）。 */ .hero__ttl-line{ display:block; opacity:0; transform:translateY(20px); } .is-loaded .hero__ttl-line{ animation:fadeUp .95s .4s var(--ease-out) forwards; } .is-loaded .hero__ttl-line:nth-child(2){ animation-delay:.56s; } .mask{ display:block; overflow:hidden; } .mask>span{ display:block; transform:translateY(115%); } .is-loaded .hero__lead>span{ animation:maskUp 1.1s .9s var(--ease-out) forwards; } @keyframes maskUp{ to{ transform:none; } } .hero__lead{ margin-top:30px; font-size:clamp(13.5px,1.4vw,17px); line-height:2.15; /* 見出しほど強くは出さず、少し落とした白。影は読みやすさの保険です */ color:rgba(255,255,255,.94); text-shadow:0 1px 14px rgba(4,18,31,.65); } .hero__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-start; margin-top:40px; opacity:0; transform:translateY(14px); } /* ボタンは1つだけなので、幅を広めに取ります（文字と同じく左そろえ） */ .hero__btns .btn{ justify-content:center; min-width:min(320px,100%); padding-inline:44px; } /* 共通の .btn--line は紺の線と紺の文字ですが、写真の上では沈んで見えません。 ヒーローの中だけ白抜きにします（ホバー時のパステルの塗りと紺文字は共通のまま）。 */ .hero__btns .btn--line{ border-color:rgba(255,255,255,.88); color:#fff; backdrop-filter:blur(2px); } /* box-shadow は overflow:hidden の対象外でボタンの外へはみ出すため使いません。 色の変化は内側のにじみ（::before）だけで表現します。 */ .hero__btns .btn--line:hover{ color:var(--navy); } /* -------------------------------------------------------------------------- トップページの大きいボタン（ヒーローの「募集要項を見る」と CONTACT の ENTRY） サイト共通の .btn::before（左から色が流れ込む）をそのまま使います。 ぼかした円を重ねる方式はやめました。overflow の外に光が出たり、 背景が透ける場所で見え方が変わったりと、扱いが安定しないためです。 -------------------------------------------------------------------------- */ /* ホバーで、ボタンの中にグラデーションが左から現れます。 共通の .btn::before は scaleX で伸ばす方式ですが、それだと グラデーションごと引き伸ばされて、単色の帯にしか見えません。 ここでは clip-path で「見える範囲」だけを広げ、 グラデーションの形はそのまま保つようにしています。 */ .hero__btns .btn--line::before{ /* 配色は ENTRY セクションのボタン（.entry .btn--fill）と同じものです */ background:linear-gradient(120deg,var(--c-aqua) 0%,var(--c-lilac) 48%,var(--c-pink) 100%); transform:none; /* round を付けないと切り抜きが長方形になり、角丸の外へ一瞬はみ出します */ clip-path:inset(0 100% 0 0 round 999px); transition:clip-path .6s var(--ease-out); } .hero__btns .btn--line:hover::before{ transform:none; clip-path:inset(0 0 0 0 round 999px); } .hero__btns .btn--line:hover{ color:var(--navy); } .is-loaded .hero__btns{ animation:fadeUp 1s 1.35s var(--ease-out) forwards; } /* クラッカーから舞う、雪のきらめき。初回表示のときだけ JS が差し込み、 終わったら消えます。外側の i が飛ぶ軌道、内側の b が瞬きを担当します。 （軌道と瞬きの周期を分けたいので、2要素構成にしています） */ .pop{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; } .pop i{ position:absolute; display:block; opacity:0; will-change:transform,opacity; /* 序盤に進みすぎると一瞬で画面外へ消えるので、減速はゆるめにしています */ animation-name:popFly; animation-timing-function:cubic-bezier(.3,.5,.6,1); animation-fill-mode:both; } .pop b{ display:block; width:100%; height:100%; animation-name:popTwinkle; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; } /* ちらちら瞬く。粒ごとに周期が違うので、全体が同時に光ることはありません */ @keyframes popTwinkle{ 0% { transform:scale(.45) rotate(0deg); opacity:.35; } 100%{ transform:scale(1.2) rotate(32deg); opacity:1; } } /* はじけたら落ちずに、そのまま画面の外まで飛び抜けます。 飛距離は JS 側で画面サイズから算出しているので、必ず画面外へ出ます。 */ @keyframes popFly{ 0% { transform:translate3d(0,0,0) scale(.45); opacity:0; } 7% { opacity:1; } 78% { opacity:1; } 100%{ transform:translate3d(var(--tx), var(--ty), 0) scale(1); opacity:0; } } /* SCROLL の合図は右下（人物の足元あたり）に置きます。 以前は中央下でしたが、左そろえのボタンと重なるため移しました。 */ .hero__scroll{ position:absolute; right:var(--hero-padx); bottom:26px; z-index:4; display:flex; flex-direction:column; align-items:center; gap:12px; font-family:var(--ff-en); font-size:9.5px; letter-spacing:.24em; color:rgba(255,255,255,.9); /* 右下は膜がかからない（写真が明るいまま）ので、影で輪郭を確保します */ text-shadow:0 1px 6px rgba(4,18,31,.85); /* スクロールが始まったら引っ込めます。値は main.js が書き換えます */ transition:opacity .4s var(--ease); } .hero__scroll i{ display:block; width:1px; height:52px; background:rgba(255,255,255,.35); overflow:hidden; position:relative; } .hero__scroll i::after{ content:""; position:absolute; inset:0; background:#fff; animation:scrollLine 2.2s var(--ease) infinite; } @keyframes scrollLine{ 0%{ transform:translateY(-100%); } 55%,100%{ transform:translateY(100%); } } /* -------------------------------------------------------------------------- 10. 下層ページのヒーロー -------------------------------------------------------------------------- */ .phero{ position:relative; overflow:hidden; padding:calc(var(--rc-header-h) + clamp(60px,10vw,130px)) var(--pad) clamp(50px,7vw,100px); min-height:52svh; display:flex; align-items:center; } /* 右上の多角形。position:fixed なので、スクロールしても画面の右上に残ります （回転・拡大は main.js の data-fx がスクロール量に応じて付けています）。 .phero の overflow:hidden では切り取られません（fixed は祖先の overflow の 影響を受けないため）。文字の下に敷くので z-index は 0、クリックも拾いません。 */ .phero__blob{ position:fixed; right:-6vw; top:-10vh; width:min(60vmin,620px); height:min(60vmin,620px); z-index:0; pointer-events:none; } .phero__blob .spin{ /* 面としては水色を主役にし、アクセント色は端に少しだけ出す */ background:linear-gradient(140deg,var(--cyan-l) 0%,var(--c-aqua) 45%,var(--accent) 100%); clip-path:polygon(28% 0,100% 10%,86% 58%,100% 88%,44% 100%,0 76%,8% 26%); animation-duration:30s; } .phero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; width:100%; } .phero__en{ font-family:var(--ff-en); font-size:clamp(44px,9vw,130px); font-weight:800; line-height:1; letter-spacing:.02em; color:var(--blue); } /* line-height を指定しないと body の 1.95 を継いでしまい、 改行したときに行間が開きすぎるので明示しています */ .phero__ttl{ font-size:clamp(24px,3.4vw,46px); font-weight:900; line-height:1.38; margin-top:14px; color:var(--navy); font-feature-settings:"palt"; } /* text-wrap:pretty は、最後の1行に1〜2文字だけ残るのを防ぐためです （対応していないブラウザでは、ふつうの折り返しに戻るだけです） */ .phero__lead{ margin-top:22px; max-width:64ch; font-size:15px; line-height:2.1; color:var(--gray); text-wrap:pretty; } .phero__nav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; } .phero__nav a{ font-size:12.5px; font-weight:700; padding:11px 20px; border-radius:999px; background:rgba(255,255,255,.75); transition:background .35s var(--ease), color .35s var(--ease); } .phero__nav a:hover{ background:var(--navy); color:var(--white); } /* -------------------------------------------------------------------------- 11. （欠番）背景に降るパステルの粒 以前はここに「降ってくる粒（.snow）」がありましたが、背景を トップページとそろえるため、その場でまたたく「光の結晶」 （上の「1-2. ページ全体の背景」の .spark）に置き換えました。 -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 11-1b. 回転する多角形の面（CONTENTS セクション） ぼかしたパステルの多角形（.polys）がゆっくり漂う面です。 形・色・大きさ・速さは下の nth-child で1枚ずつ変えられます。 -------------------------------------------------------------------------- */ .sec--polys{ position:relative; z-index:1; overflow:hidden; isolation:isolate; } /* 多角形の層（.polys）は positioned なので、指定がないと本文より手前に描かれます。 見出しとカードだけ挙げていると、表など他の要素の上に色が乗ってしまうため、 .polys 以外のすべての直下要素を前面に出します。 */ .sec--polys>*:not(.polys){ position:relative; z-index:2; } /* .sec--full>* が本文幅で頭打ちにするので、この層だけ解除して画面幅いっぱいに広げます */ .sec--polys>.polys{ max-width:none; margin-inline:0; } .polys{ position:absolute; top:0; bottom:0; left:0; right:0; z-index:0; pointer-events:none; overflow:hidden; } /* 外枠：ぼかしだけを担当します。 （clip-path は filter のあとに効くので、同じ要素でぼかすと切り口が硬く残ります。 .hero__blob と同じく、ぼかしは親側に置いています） */ .polys__s{ position:absolute; display:block; filter:blur(54px); /* ここを上げるほど輪郭が溶けます */ opacity:.7; } /* 中身：多角形に切り抜いて、ゆっくり回します */ .polys__s>i{ display:block; width:100%; height:100%; will-change:transform; animation-name:polySpin; animation-timing-function:linear; animation-iteration-count:infinite; } @keyframes polySpin{ 0% { transform:rotate(0deg) scale(1); } 50% { transform:rotate(180deg) scale(1.12); } 100%{ transform:rotate(360deg) scale(1); } } /* --- 形と色：10種類を順に繰り返します ------------------------------------ */ /* 三角形 */ .polys__s:nth-child(10n+1)>i{ background:linear-gradient(140deg,var(--c-aqua),var(--c-mint)); clip-path:polygon(50% 0,100% 100%,0 100%); animation-duration:64s; } /* 五角形 */ .polys__s:nth-child(10n+2)>i{ background:linear-gradient(140deg,var(--c-lilac),var(--c-pink)); clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%); animation-duration:82s; animation-direction:reverse; } /* 六角形 */ .polys__s:nth-child(10n+3)>i{ background:linear-gradient(140deg,var(--c-lemon),var(--c-peach)); clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); animation-duration:74s; } /* 菱形 */ .polys__s:nth-child(10n+4)>i{ background:linear-gradient(140deg,var(--c-peach),var(--c-lemon)); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); animation-duration:58s; animation-direction:reverse; } /* 七角形 */ .polys__s:nth-child(10n+5)>i{ background:linear-gradient(140deg,var(--c-mint),var(--c-aqua)); clip-path:polygon(50% 0,89% 20%,98% 62%,72% 96%,28% 96%,2% 62%,11% 20%); animation-duration:96s; } /* 台形 */ .polys__s:nth-child(10n+6)>i{ background:linear-gradient(140deg,var(--c-pink),var(--c-lilac)); clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); animation-duration:70s; animation-direction:reverse; } /* 八角形 */ .polys__s:nth-child(10n+7)>i{ background:linear-gradient(140deg,var(--c-aqua),var(--c-lilac)); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); animation-duration:88s; } /* 平行四辺形 */ .polys__s:nth-child(10n+8)>i{ background:linear-gradient(140deg,var(--c-lemon),var(--c-mint)); clip-path:polygon(28% 0,100% 0,72% 100%,0 100%); animation-duration:62s; animation-direction:reverse; } /* 五芒星寄りの多角形 */ .polys__s:nth-child(10n+9)>i{ background:linear-gradient(140deg,var(--c-peach),var(--c-pink)); clip-path:polygon(50% 0,66% 34%,100% 38%,74% 62%,84% 100%,50% 78%,16% 100%,26% 62%,0 38%,34% 34%); animation-duration:78s; } /* 不定形の多角形 */ .polys__s:nth-child(10n+10)>i{ background:linear-gradient(140deg,var(--c-mint),var(--c-lemon)); clip-path:polygon(38% 2%,86% 14%,100% 54%,72% 92%,26% 100%,0 66%,8% 24%); animation-duration:92s; animation-direction:reverse; } /* --- 位置と大きさ：左端から右端まで散らします ---------------------------- */ .polys__s:nth-child(1) { top:-4%; left:0%; width:120px; height:120px; } .polys__s:nth-child(2) { top:16%; left:8%; width:140px; height:140px; } .polys__s:nth-child(3) { top:52%; left:2%; width:130px; height:130px; } .polys__s:nth-child(4) { top:80%; left:10%; width:105px; height:105px; } .polys__s:nth-child(5) { top:30%; left:18%; width:150px; height:150px; } .polys__s:nth-child(6) { top:66%; left:24%; width:100px; height:100px; } .polys__s:nth-child(7) { top:4%; left:30%; width:125px; height:125px; } .polys__s:nth-child(8) { top:44%; left:36%; width:110px; height:110px; } .polys__s:nth-child(9) { top:88%; left:40%; width:135px; height:135px; } .polys__s:nth-child(10){ top:22%; left:46%; width:145px; height:145px; } .polys__s:nth-child(11){ top:60%; left:52%; width:115px; height:115px; } .polys__s:nth-child(12){ top:-2%; left:58%; width:130px; height:130px; } .polys__s:nth-child(13){ top:36%; left:64%; width:100px; height:100px; } .polys__s:nth-child(14){ top:74%; left:70%; width:140px; height:140px; } .polys__s:nth-child(15){ top:10%; left:76%; width:120px; height:120px; } .polys__s:nth-child(16){ top:48%; left:82%; width:150px; height:150px; } .polys__s:nth-child(17){ top:84%; left:88%; width:110px; height:110px; } .polys__s:nth-child(18){ top:26%; left:93%; width:135px; height:135px; } @media (max-width:820px){ .polys__s{ filter:blur(40px); opacity:.62; } .polys__s:nth-child(n){ width:90px; height:90px; } } @media (prefers-reduced-motion:reduce){ .polys__s>i{ animation:none; } } /* -------------------------------------------------------------------------- 11-2. モヤがかかった面（面としては、もう描いていません） 以前はこのクラスの ::before で大きなパステルの光を描いていましたが、 トップページと背景をそろえるため、モヤはページ全体の固定レイヤー （上の「1-2. ページ全体の背景」の .bg）に一本化しました。 ここが受け持つのは、位置の基準と、はみ出しのクリップだけです。 ★::before を復活させないでください。全体のモヤと二重になり、 この面だけ色が濃く見えます。 ★.sec--haze > *{ position:relative; z-index:1 } も戻さないでください。 スマホ幅で本文の左端に縦線が出る不具合の原因でした（実機で切り分け済み）。 -------------------------------------------------------------------------- */ /* ★はみ出しを切るのは overflow:clip にしています。hidden だと、この面自体が 「スクロールできる箱」になり、中に position:sticky を置いたときに 画面ではなくこの面を基準に貼り付いてしまいます（過去に、インタビューの 写真がそれで位置ずれを起こしました）。clip は切り取るだけで スクロール容器になりません。hidden に戻さないでください。 */ .sec--haze{ position:relative; overflow:clip; } /* -------------------------------------------------------------------------- 12. SECTION 共通 -------------------------------------------------------------------------- */ .sec{ position:relative; padding:clamp(70px,10vw,150px) var(--pad); max-width:var(--maxw); margin-inline:auto; } .sec--full{ max-width:none; } .sec--full>*{ max-width:var(--maxw); margin-inline:auto; } /* ページのアクセント色を薄く敷いた面。カード類は白なので浮き上がります */ /* 上のほうだけ半透明にして、後ろの写真の帯（.hero__strip）をうっすら見せる面。 トップページの INTRO（WHO WE ARE）に付けています。 止め位置を % ではなく px で書いているのは、この面が縦に非常に長く （カードや大きい写真を含めて 3000px 近く）、% だと「上のほうだけ」が 面の高さ次第で大きくずれてしまうためです。 写真をもっと見せたいなら 1つ目の .86 を下げてください。 色は --sky（#e1f4fb）と同じ値です。 ★薄くしすぎないこと。この面の見出しは紺色の文字なので、 .58 まで透かすと写真の白いシャツや黒い上着と柄がぶつかり、 計算上のコントラストは足りていても文字が読み取れなくなります。 写真は「うっすら地紋として分かる」程度に留めるのが正解です。 */ .sec--overstrip{ /* ★z-index が必須です。帯（.hero__strip）は z-index:1 なので、 指定しない（＝auto）とこの面の背景より帯が上に描かれ、 下の半透明グラデーションがまったく効きません。 */ position:relative; z-index:2; background:linear-gradient(180deg, rgba(225,244,251,.86) 0px, rgba(225,244,251,.93) 320px, var(--sky) 560px); } /* スマホでは帯の固定を解除しているので、この面の後ろに写真は来ません。 ★ここで背景を消しておくこと。消さないと、上にある 「@media (max-width:900px) の .sec--haze{ background:none }」を このクラスが上書きしてしまい、本文左端に縦線が出る不具合が再発します。 */ @media (max-width:900px){ .sec--overstrip{ background:none; z-index:auto; } } /* 以前は淡い青（--tint）を敷いていましたが、背景をトップページと同じ 「ページ全体で1枚」にそろえるため、面の色は付けません。 ここに背景を戻すと、その区間だけ後ろのモヤときらめきが隠れます。 */ .sec--white{ background:transparent; } .sec--navy{ background:linear-gradient(150deg,var(--deep) 0%,#1a93c4 55%,var(--deep-2) 100%); color:var(--white); } .sec--sky{ background:var(--white); } .sec__head{ margin-bottom:clamp(40px,5.5vw,74px); position:relative; z-index:2; } .sec__en{ font-family:var(--ff-en); font-size:11.5px; font-weight:800; letter-spacing:.2em; color:var(--blue); padding-left:38px; position:relative; margin-bottom:18px; } .sec__en::before{ content:""; position:absolute; left:0; top:50%; width:26px; height:2px; background:var(--cyan); } .sec__ttl{ font-size:clamp(26px,4.2vw,54px); font-weight:900; line-height:1.3; font-feature-settings:"palt"; } .sec__lead{ margin-top:22px; max-width:64ch; color:var(--gray); font-size:15px; line-height:2.05; } .sec--navy .sec__en{ color:var(--cyan); } .sec--navy .sec__lead{ color:rgba(255,255,255,.85); } .sec__hint{ display:inline-block; margin-left:6px; font-size:12px; color:var(--blue); white-space:nowrap; } /* リビール（スクロールに合わせた出現） ★js/main.js が、画面に入ったら .is-in を付け、外へ出たら外します。 何回スクロールしても毎回出ます。 */ .reveal{ opacity:0; transform:translateY(42px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); } .reveal.is-in{ opacity:1; transform:none; } [data-stagger]>*{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); } [data-stagger].is-in>*{ opacity:1; transform:none; } /* 画面の外へ出たものを、出る前の状態に戻すときだけ付くクラス。 js/main.js が一瞬だけ付けます。付いている間は動きを止めるので、 戻す作業が「時間ゼロ」で終わります（画面の外での作業なので見えません）。 ★これが無いと、戻りきる前に画面へ入り直したとき、 中途半端な位置から動き出して、動きが弱く見えます。 ★css/top.css にも同じものがあります（トップページ用）。 */ .is-reset,.is-reset *{ transition:none !important; animation:none !important; } /* ★重要★ スマホ幅では、インタビューの大カードだけリビールを止める。 .itv__card はスマホで1カラムになると1枚あたり1000px超の巨大な要素になる。 これに transform のアニメーションをかけると合成レイヤーに昇格し、 背後の .snow（position:fixed／粒に will-change:transform）と重なった状態で 古い描画面が .itv の範囲だけ残ることがある。 結果、.itv と同じ大きさの背景のコピーが横にずれて重なり、 「背景が二段」「本文の左端に縦の境界」に見える。 transform が収束してレイヤーが再合成される約0.5秒後に自然に直るため、 一瞬のちらつきとして現れる。 小さい要素では起きないので、止めるのは大カードだけでよい。 ★ここに transform を戻すと再発する。 */ @media (max-width:900px){ .itv__card.reveal{ opacity:1; transform:none; transition:none; } } @media (prefers-reduced-motion:reduce){ .reveal,[data-stagger]>*, /* 左右から寄ってくる写真と説明パネル（16. WORK の .mag）も止めます */ .mag>.mag__item>.mag__img,.mag>.mag__item>.mag__body{ opacity:1 !important; transform:none !important; } /* 左から開く 05〜07 のカードも止めます */ .mag__trio .mag__item.reveal{ clip-path:none !important; transform:none !important; } .mask>span{ transform:none !important; } /* ヒーローの見出しは、動きを止めたうえで必ず見えるようにしておきます */ .hero__ttl-line{ animation:none !important; opacity:1 !important; transform:none !important; } *{ animation-duration:.001s !important; } } /* -------------------------------------------------------------------------- 13. トップページ：各ページへの入口カード -------------------------------------------------------------------------- */ .gate{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); } .gate__card{ position:relative; overflow:hidden; border-radius:8px; background:var(--white); padding:clamp(24px,2.6vw,40px); min-height:290px; display:flex; flex-direction:column; transition:transform .6s var(--ease), box-shadow .6s var(--ease); } .gate__card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(6,38,63,.4); } .gate__blob{ position:absolute; right:-30%; bottom:-40%; width:75%; aspect-ratio:1; background:linear-gradient(140deg,var(--cyan-l),var(--cyan-p)); clip-path:polygon(50% 0,92% 18%,100% 62%,68% 100%,20% 92%,0 44%,14% 10%); transition:transform .9s var(--ease-out); z-index:0; } .gate__card:hover .gate__blob{ transform:rotate(90deg) scale(1.25); } .gate__card>*:not(.gate__blob){ position:relative; z-index:2; } /* 番号は大きく。中を抜いた縁取り文字にして、主役の見出しを邪魔しないようにします。 縁取りが効かない環境でも消えないよう、まず塗りの色を持たせてから @supports の中で透明＋縁取りに切り替えています。 */ .gate__no{ font-family:var(--ff-en); font-weight:800; letter-spacing:-.02em; font-size:clamp(30px,3.4vw,50px); line-height:.95; color:var(--cyan-p); transition:color .5s var(--ease); } .gate__card:hover .gate__no{ color:var(--cyan-l); } @supports (-webkit-text-stroke:1px red){ .gate__no{ color:transparent; -webkit-text-stroke:1.6px var(--cyan-l); transition:-webkit-text-stroke-color .5s var(--ease); } .gate__card:hover .gate__no{ color:transparent; -webkit-text-stroke-color:var(--blue); } } .gate__en{ font-family:var(--ff-en); font-size:clamp(26px,3vw,40px); font-weight:800; letter-spacing:.02em; line-height:1.1; margin-top:4px; color:var(--blue); } .gate__ja{ font-size:clamp(18px,2vw,24px); font-weight:900; margin-top:6px; } .gate__desc{ margin-top:16px; font-size:13px; line-height:1.95; color:var(--gray); } .gate__go{ margin-top:auto; padding-top:22px; display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-en); font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--blue); } .gate__go svg{ width:16px; height:16px; transition:transform .45s var(--ease); } .gate__card:hover .gate__go svg{ transform:translateX(6px); } @media (max-width:1000px){ .gate{ grid-template-columns:repeat(2,1fr); } } /* スマホは1列。縦に6枚並ぶので、余白と文字を詰めて高さを抑えます。 PC版のサイズには影響しません。 */ @media (max-width:620px){ .gate{ grid-template-columns:1fr; gap:14px; } .gate__card{ min-height:0; padding:20px 22px; } .gate__no{ font-size:26px; line-height:1; } .gate__en{ font-size:24px; margin-top:2px; } .gate__ja{ font-size:16px; margin-top:4px; } /* 右下の図形にかからないよう、文章の右側を空けます。 改行位置は HTML 側の
で指定しているので、 ここは「はみ出さないための保険」です。 */ .gate__desc{ margin-top:10px; font-size:12.5px; line-height:1.8; padding-right:38%; } .gate__go{ padding-top:14px; } /* 右下の多角形を小さくして、文章と重なる面積を減らします */ .gate__blob{ width:52%; right:-16%; bottom:-26%; } } /* トップの数字ダイジェスト */ .digest{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; } .digest__cell{ background:var(--sky-l); padding:clamp(24px,3vw,40px) 18px; text-align:center; } .digest__cell b{ font-family:var(--ff-en); font-size:clamp(34px,4.6vw,58px); font-weight:800; line-height:1; color:var(--blue); letter-spacing:-.02em; } .digest__cell i{ font-style:normal; font-size:13px; font-weight:700; color:var(--cyan); margin-left:4px; } .digest__cell span{ display:block; margin-top:12px; font-size:12px; color:var(--gray); line-height:1.7; } @media (max-width:760px){ .digest{ grid-template-columns:repeat(2,1fr); } } /* -------------------------------------------------------------------------- 14. ABOUT -------------------------------------------------------------------------- */ .about__lead p{ font-size:clamp(16px,1.7vw,22px); line-height:2.15; font-weight:500; max-width:900px; } .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,36px); margin-top:clamp(46px,6vw,80px); } /* 本文の行数がカードごとに違うので、縦積みにして数字を下ぞろえにします。 これをしないと、3行になったカードだけ数字が下に押し出されて高さがそろいません。 */ .pillar{ background:var(--white); border-radius:8px; padding:clamp(24px,2.6vw,38px); position:relative; overflow:hidden; display:flex; flex-direction:column; } .pillar__no{ font-family:var(--ff-en); font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--cyan); } .pillar__ttl{ margin:14px 0 16px; font-size:clamp(19px,2vw,26px); font-weight:900; line-height:1.5; font-feature-settings:"palt"; } /* 余った高さをここで吸収し、下の数字を必ず底へ落とす */ .pillar__txt{ font-size:14.5px; color:var(--gray); line-height:2.05; margin-bottom:auto; } .pillar__facts{ display:flex; gap:clamp(22px,2.6vw,38px); justify-content:center; text-align:center; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); } .pillar__facts b{ font-family:var(--ff-en); font-size:clamp(46px,4.6vw,68px); font-weight:800; color:var(--blue); letter-spacing:-.02em; line-height:1.05; } .pillar__facts span{ display:block; font-size:11.5px; color:var(--gray-l); margin-top:6px; } @media (max-width:900px){ .pillars{ grid-template-columns:1fr; } } /* スマホは1列。3枚が縦に積まれるので、余白・行間・数字を詰めます。 数字は下ぞろえのままなので、詰めても3枚の見え方は揃います。 */ @media (max-width:620px){ .pillars{ gap:14px; margin-top:34px; } .pillar{ padding:20px 22px; } .pillar__ttl{ margin:10px 0 10px; font-size:18px; line-height:1.45; } .pillar__txt{ font-size:13.5px; line-height:1.85; } .pillar__facts{ margin-top:16px; padding-top:14px; gap:20px; } .pillar__facts b{ font-size:34px; } .pillar__facts span{ margin-top:3px; } } .bigvisual{ margin-top:clamp(50px,7vw,100px); } .bigvisual .fig{ aspect-ratio:21/8; border-radius:8px; } .bigvisual__cap{ margin-top:22px; font-size:clamp(15px,1.6vw,21px); font-weight:700; line-height:1.9; } @media (max-width:900px){ .bigvisual .fig{ aspect-ratio:4/3; } } /* -------------------------------------------------------------------------- 15. WORKS -------------------------------------------------------------------------- */ .works{ display:flex; flex-direction:column; gap:clamp(40px,5vw,84px); } .work{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,4vw,64px); align-items:center; } .work--rev .work__img{ order:2; } .work__img{ aspect-ratio:16/11; border-radius:8px; } .work__cat{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--navy); padding:7px 16px; border-radius:999px; background:var(--cyan); margin-bottom:20px; } .work__cat--accent{ background:var(--navy); color:var(--white); } .work__ttl{ font-size:clamp(24px,3.2vw,42px); font-weight:900; line-height:1.36; margin-bottom:20px; font-feature-settings:"palt"; } .work__txt{ font-size:15px; color:var(--gray); line-height:2.1; } .work__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; } .work__tags li{ font-size:12px; padding:6px 14px; background:var(--white); border-radius:999px; color:var(--gray); } .work--wide{ grid-template-columns:1fr; } .work--wide .work__img{ aspect-ratio:24/7; } .work--wide .work__body{ max-width:920px; } .work__note{ margin-top:22px; padding:20px 24px; background:var(--white); border-left:3px solid var(--cyan); border-radius:0 6px 6px 0; font-size:13.5px; line-height:2; color:var(--gray); } @media (max-width:900px){ .work,.work--rev{ grid-template-columns:1fr; } .work--rev .work__img{ order:0; } .work--wide .work__img{ aspect-ratio:16/10; } } /* -------------------------------------------------------------------------- 16. JOB -------------------------------------------------------------------------- */ /* 見出し（.sec__ttl）と左端をそろえます。 .sec--full>* の margin-inline:auto が効くので、900px の箱のままだと セクションの中央に寄ってしまいます。外側は見出しと同じ幅の箱にして、 読みやすさのための 900px は中身の側にかけます。 */ .job__intro{ max-width:var(--maxw); margin-inline:auto; margin-bottom:clamp(40px,5vw,70px); } .job__intro > *{ max-width:900px; } .job__big{ font-size:clamp(24px,3.6vw,46px); font-weight:900; line-height:1.5; margin-bottom:26px; font-feature-settings:"palt"; } .job__big em{ font-style:normal; color:var(--blue); } .job__txt{ font-size:15.5px; line-height:2.15; color:var(--gray); } .job__txt b{ color:var(--navy); } .job__caution{ margin-top:22px; padding:18px 24px; background:var(--white); border-radius:6px; font-size:13.5px; line-height:1.95; color:var(--gray); } /* -------------------------------------------------------------------------- 業務内容 7項目とも「大きな写真＋文章の白いパネル」で組み方をそろえ、 写真とパネルの左右だけを、項目ごとに交互に入れ替えています。 --a〜--g のクラスは、いまは色（--mc）を決めるためだけに使っています。 広い画面（1001px 以上）だけこの組み方になり、狭い画面では すべて「写真の下に文章」の1列に戻ります（下の @media を参照）。 -------------------------------------------------------------------------- */ .mag{ display:flex; flex-direction:column; gap:clamp(56px,7vw,116px); } .mag__item{ position:relative; } /* 項目ごとの色。数字・見出しの下線・箇条書きの丸に使います */ .mag__item--a{ --mc:#DD6A45; } /* 安全管理 */ .mag__item--b{ --mc:#2E8FB8; } /* 品質管理 */ .mag__item--c{ --mc:#4E9C5C; } /* 工程管理 */ .mag__item--d{ --mc:#7B6BC8; } /* 原価管理 */ .mag__item--e{ --mc:#2FA08A; } /* 発注者との打ち合わせ */ .mag__item--f{ --mc:#C2628E; } /* 書類・写真管理 */ .mag__item--g{ --mc:#2E9AC0; } /* ICT施工 */ .mag__img{ border-radius:10px; } .mag__no{ font-family:var(--ff-en); font-size:clamp(38px,4.4vw,64px); font-weight:800; line-height:.9; letter-spacing:-.02em; color:var(--mc); } .mag__cat{ margin-top:10px; display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--navy); } /* 見出しの上の短い線。数字と同じ色でそろえます */ .mag__cat::before{ content:""; width:26px; height:2px; background:var(--mc); } .mag__ttl{ margin-top:14px; font-size:clamp(21px,2.5vw,34px); font-weight:700; line-height:1.55; font-feature-settings:"palt"; } .mag__txt{ margin-top:16px; font-size:15px; line-height:2.1; color:var(--gray); } .mag__list{ margin-top:24px; display:grid; gap:10px; } .mag__list li{ position:relative; padding-left:24px; font-size:13.5px; line-height:1.75; } .mag__list li::before{ content:""; position:absolute; left:0; top:.5em; width:11px; height:11px; border:2px solid var(--mc); border-radius:50%; } /* --- 05〜07 は補足あつかいなので、3つ横並びの小さめのカードにまとめます --- */ .mag__trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); } .mag__trio .mag__item{ display:flex; flex-direction:column; overflow:hidden; background:var(--white); border-radius:10px; } .mag__trio .mag__img{ aspect-ratio:16/9; border-radius:0; } .mag__trio .mag__body{ flex:1; display:flex; flex-direction:column; padding:clamp(20px,2.2vw,30px); } .mag__trio .mag__no { font-size:clamp(26px,2.4vw,36px); } .mag__trio .mag__ttl{ margin-top:12px; font-size:clamp(16px,1.35vw,20px); line-height:1.6; } .mag__trio .mag__txt{ margin-top:12px; font-size:13.5px; line-height:1.95; } /* 箇条書きはカードの下端でそろえます（高さが違っても行がそろう） */ .mag__trio .mag__list{ margin-top:auto; padding-top:18px; gap:8px; } .mag__trio .mag__list li{ font-size:12.5px; } @media (max-width:900px){ .mag__trio{ grid-template-columns:1fr; } } /* --- 05〜07 の登場：左から順に「ボン・ボン・ボン」と開く ----------------- トップページのヒーロー（Create / happiness / with us. ＝ css/top.css の .ld__mv）と同じ「左から開く（clip-path のワイプ）」動きです。 ヒーローは1語0.80秒・0.75秒間隔でゆっくり読ませますが、こちらは カード3枚を続けざまに出したいので、0.5秒・0.13秒間隔まで詰めています。 ★1枚ずつずらす時間は work.html の data-reveal-delay に書いてあります （0 / 130 / 260ミリ秒）。js/main.js がそれを読んで transition-delay に 入れるので、ここ（CSS）には遅れを書かないでください。両方に書くと JS のインライン指定が勝って、CSS 側が効かず混乱のもとになります。 ★上の .reveal（下から浮き上がる）はここで打ち消しています。 縦と横が混ざると「左から開く」動きに見えなくなるためです。 */ .mag__trio .mag__item.reveal{ opacity:1; clip-path:inset(0 100% 0 0); transform:translateX(-18px); transition:clip-path .5s var(--ease-out), transform .5s var(--ease-out); } .mag__trio .mag__item.reveal.is-in{ clip-path:inset(0 0 0 0); transform:none; } @media (min-width:1001px){ /* 01〜04 は、12分割のグリッドに写真とパネルを同じ row で置きます。 列の範囲を少し重ねているので、パネルが写真の上に乗ります。 （.mag の直下だけが対象。3つ並びの 05〜07 には効きません） */ .mag > .mag__item{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(16px,2vw,34px); } .mag > .mag__item > *{ grid-row:1; } .mag > .mag__item > .mag__img{ grid-column:1/9; aspect-ratio:16/9; } .mag > .mag__item > .mag__body{ grid-column:7/13; z-index:1; align-self:end; margin-bottom:-34px; background:var(--white); border-radius:10px; padding:clamp(28px,3vw,46px); box-shadow:0 34px 64px -38px rgba(6,38,63,.45); } /* 偶数番目（02・04）は左右を入れ替え。写真が右、パネルが左になります */ .mag > .mag__item:nth-child(even) > .mag__img { grid-column:5/13; } .mag > .mag__item:nth-child(even) > .mag__body{ grid-column:1/7; } /* 02（品質管理）は白いパネルが写真の左およそ4分の1に重なります。 実写の人物が左寄りなので、少し寄せて（拡大して左端をそろえて） 人物がパネルに隠れないようにしています */ .mag > .mag__item--b > .mag__img.ph--img{ background-size:120% auto; background-position:left 22%; } } /* --- 01〜04 の登場：写真と説明パネルが左右から来て、中央で合わさる ------ トップページの「私たちが、つくっているもの。」（css/top.css の .work）と 同じ考え方です。写真が外側から滑り込み、説明パネルが反対側から 少し遅れて入り、まん中で重なります。 どちら側から来るかは --fromX で決めています。01・03 は写真が左なので 写真は左から、パネルは右から。02・04 は左右が入れ替わるので符号も逆です。 ★親（.mag__item.reveal）の「下から浮き上がる」動きは、ここで止めています。 縦と横が混ざると、左右から寄ってくる動きに見えなくなるためです。 .is-in は js/main.js が付け外しします（何回スクロールしても動きます）。 ★1000px 以下では効かせません。1列に積む組みなので横に動かす余地が無く、 画面の外へはみ出して横スクロールが出るだけになります。 */ @media (min-width:1001px){ .mag > .mag__item.reveal{ opacity:1; transform:none; transition:none; } .mag > .mag__item{ --fromX:-90px; } .mag > .mag__item:nth-child(even){ --fromX:90px; } .mag > .mag__item > .mag__img{ opacity:0; transform:translate3d(var(--fromX),0,0); transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); } .mag > .mag__item.is-in > .mag__img{ opacity:1; transform:none; } /* パネルは写真と反対側から。少し遅らせると「あとから重なる」順に見えます */ .mag > .mag__item > .mag__body{ opacity:0; transform:translate3d(calc(var(--fromX) * -1),0,0); transition:opacity 1.05s var(--ease-out) .14s, transform 1.05s var(--ease-out) .14s; } .mag > .mag__item.is-in > .mag__body{ opacity:1; transform:none; } } /* 狭い画面では、すべて「写真 → 文章」の素直な1列に戻します */ @media (max-width:1000px){ .mag > .mag__item{ display:flex; flex-direction:column; gap:20px; } .mag > .mag__item > .mag__img{ aspect-ratio:16/9; } } /* -------------------------------------------------------------------------- 17-1. WORKS（工事実績・work.html の 03） -------------------------------------------------------------------------- 件数が多いので、写真は置かず「工事種別の札＋工事名＋明細」だけの 軽いカードを並べます。中身は js/main.js が site-data.js の works から作ります。 ★工事名は長いものが多い（60字を超えるものもあります）ので、 カードの高さはそろえません。文字を小さくして読ませます。 */ /* ★並べ方は「横スクロールの1列」です（work.html）。器は .pj__track と 兼用にしているので、幅・すき間・左の余白は .pj__track 側で決まります。 縦に積む格子（display:grid）に戻さないでください。件数が増えるほど ページが縦に伸び、その下のエントリー欄まで遠くなります。 */ .wk{ align-items:stretch; } .wk__card{ width:clamp(268px,26vw,340px); flex:none; display:flex; flex-direction:column; user-select:none; background:var(--white); border-radius:10px; border:1.5px solid var(--line); padding:clamp(20px,2.2vw,28px); position:relative; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } /* --- 写真枠 ----------------------------------------------------------- ★写真が無い工事のほうが多いので、枠は必ず出します（あるものだけ枠を 出すと、横に並んだカードの高さがそろわず階段状になります）。 写真が無いときは、その工種の色をうっすら敷いた面に工種名を置きます。 ★カードの左右いっぱいに広げるため、padding のぶんだけ外へ出しています。 */ .wk__img{ margin:calc(clamp(20px,2.2vw,28px) * -1) calc(clamp(20px,2.2vw,28px) * -1) 18px; aspect-ratio:16/10; } .wk__img--none{ display:grid; place-items:center; background:linear-gradient(140deg, color-mix(in srgb, var(--dl,var(--c-aqua)) 34%, white) 0%, color-mix(in srgb, var(--dl,var(--c-aqua)) 10%, white) 100%); } /* ★工事種別の文字は入れません。すぐ下に同じ言葉の札があるので、 二重になります。会社ホームページの施工実績と同じく社章を置きます。 */ .wk__img--none img{ width:clamp(52px,7vw,72px); height:auto; opacity:.34; } .wk__card:hover{ transform:translateY(-6px); border-color:var(--dl,var(--c-aqua)); box-shadow:0 26px 48px -28px color-mix(in srgb, var(--dc,var(--c-aqua-d)) 50%, transparent); } /* 明細は、工事名の長さが違ってもカードの下端にそろえます */ .wk__card .wk__meta{ margin-top:auto; } /* 工事種別ごとに、札と上のラインの色を変えます。 ★色は「並び順」ではなく「工事種別」で決めています。同じ種別の工事は 一覧のどこに出ても同じ色になるので、見分けがつきます。 site-data.js に新しい工事種別を足したときは、ここにも1行足してください （足し忘れても、既定のアクア色で出るだけで壊れません）。 ★パステルは6色しかないので、近い工種でまとめています。 水系（河川・護岸・砂防）＝ライラック 土系（造成・地すべり）＝ピンク まとめ方を変えるときは、6色に収まる範囲で組み直してください。 */ .wk__card[data-cat="道路工事"] { --dl:var(--c-aqua); --dc:var(--c-aqua-d); } .wk__card[data-cat="橋梁工事"] { --dl:var(--c-mint); --dc:var(--c-mint-d); } .wk__card[data-cat="トンネル工事"]{ --dl:var(--c-mint); --dc:var(--c-mint-d); } .wk__card[data-cat="補修工事"] { --dl:var(--c-peach); --dc:var(--c-peach-d); } .wk__card[data-cat="法面工事"] { --dl:var(--c-lemon); --dc:var(--c-lemon-d); } .wk__card[data-cat="砂防工事"] { --dl:var(--c-lilac); --dc:var(--c-lilac-d); } .wk__card[data-cat="河川工事"] { --dl:var(--c-lilac); --dc:var(--c-lilac-d); } .wk__card[data-cat="護岸工事"] { --dl:var(--c-lilac); --dc:var(--c-lilac-d); } .wk__card[data-cat="造成工事"] { --dl:var(--c-pink); --dc:var(--c-pink-d); } .wk__card[data-cat="地すべり工事"]{ --dl:var(--c-pink); --dc:var(--c-pink-d); } .wk__cat{ align-self:flex-start; padding:5px 13px; border-radius:999px; background:color-mix(in srgb, var(--dl,var(--c-aqua)) 42%, white); font-size:11.5px; font-weight:500; letter-spacing:.08em; color:var(--dc,var(--blue)); } .wk__ttl{ margin:14px 0 16px; font-size:15px; font-weight:500; line-height:1.75; color:var(--navy); font-feature-settings:"palt"; } /* 明細。ラベルと中身を2列にして、中身の左端をそろえます */ .wk__meta{ display:grid; gap:7px; padding-top:14px; border-top:1px solid var(--line); } .wk__meta>div{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:start; } .wk__meta dt{ font-size:11.5px; font-weight:500; line-height:1.9; color:var(--gray-l); letter-spacing:.04em; } .wk__meta dd{ font-size:12.5px; line-height:1.9; color:var(--gray); } /* 横スクロールなので、狭い画面でも列は増やしません。カードだけ細くします */ @media (max-width:620px){ .wk__card{ width:min(78vw,300px); } .wk__meta>div{ grid-template-columns:58px minmax(0,1fr); gap:8px; } } /* 横スクロールの下に置く注記。見出しと同じく、本文幅の箱に入れて左端をそろえます （セクション本体は padding-inline:0 なので、そのままだと画面の端に付きます）。 */ .data__note--pj{ padding-inline:var(--pad); max-width:calc(var(--maxw) + var(--pad) * 2); margin-inline:auto; } /* -------------------------------------------------------------------------- 17. 横スクロールの列（.pj） -------------------------------------------------------------------------- work.html の「03 — WORKS（工事実績）」で使っています。 ★2026-08-13 まではプロジェクトストーリー（読み物3本）の器でしたが、 工事実績のカード（.wk__card）を並べる器として使い回しています。 .pj__card は、そのときの読み物カード用の指定です（いまは未使用）。 ★中身が変わっても、左端のフェード・指でのドラッグ・下の進み具合の帯は そのまま効きます（js/main.js の #pjScroller）。 */ .sec--project{ padding-inline:0; } /* セクション本体は padding-inline:0（横スクロールを画面幅いっぱいに出すため）なので、 見出しには「最大幅＋左右余白ぶん」の箱を持たせます。 box-sizing:border-box では padding が max-width の内側に食い込むため、 var(--maxw) のままだと広い画面で文字の開始位置が他セクションより --pad ぶん右にずれます（--maxw + --pad×2 にすると内容幅がちょうど --maxw になる）。 */ .sec--project .sec__head{ padding-inline:var(--pad); max-width:calc(var(--maxw) + var(--pad) * 2); margin-inline:auto; } /* リード文は1行に収めます（共通の .sec__lead は 64ch で折り返すため、 ここだけ幅の上限を外しています）。文章を足すと2行になるので、 長くしたいときは横スクロールの列との間隔も見直してください。 */ .sec--project .sec__lead{ max-width:none; } /* スクロール枠は画面幅いっぱいまで使います。 共通の .sec--full>* が本文幅（1400px）で頭打ちにするため、そのままだと 広い画面では「箱の左縁＝画面の途中」でカードがスパッと切れてしまいます。 */ .sec--project>.pj-clip{ max-width:none; margin-inline:0; } /* 左のフェードが完了する位置。アニメで動かすため @property で型を登録します （登録しないと数値として補間されず、パッと切り替わってしまいます） */ @property --pjFade{ syntax:""; inherits:false; initial-value:90px; } /* 左端はスパッと切らず、グラデーションのマスクでじわじわ消していきます。 ★マスクは必ずスクロールしない .pj-clip（親）側に。スクロールする .pj に かけると、マスクが中身と一緒に流れて途中から先が見えなくなります。 止まっているときのフェード幅は本文の左余白まで＝先頭カードは欠けません。 スクロールを始めると .is-scrolled でフェード幅がぐっと広がり、 カードは画面の1/3あたりから薄くなり始めます。 */ .pj-clip{ --pjFade:max(var(--pad), calc((100vw - var(--maxw)) / 2)); transition:--pjFade .6s var(--ease); -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--pjFade)); mask-image:linear-gradient(to right, transparent 0, #000 var(--pjFade)); } /* 少しでもスクロールしたら（main.js が付け外し）フェード幅を広げる */ .pj-clip.is-scrolled{ --pjFade:min(36vw,560px); } .pj{ overflow-x:auto; scrollbar-width:none; cursor:grab; } .pj::-webkit-scrollbar{ display:none; } .pj.is-drag{ cursor:grabbing; } /* 先頭カードの初期位置を、見出しの文字と同じ「本文の左端」に合わせます */ .pj__track{ display:flex; gap:clamp(18px,2.2vw,32px); width:max-content; padding:0 max(var(--pad), calc((100vw - var(--maxw)) / 2)); } .pj__card{ width:clamp(300px,38vw,540px); flex:none; background:var(--white); border-radius:10px; padding:clamp(20px,2.2vw,32px); user-select:none; transition:transform .6s var(--ease), box-shadow .6s var(--ease); } .pj__card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -32px rgba(6,38,63,.4); } .pj__img{ aspect-ratio:16/9; border-radius:6px; margin-bottom:24px; } .pj__cat{ font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--blue); } .pj__ttl{ margin:12px 0 22px; font-size:clamp(21px,2.4vw,32px); font-weight:900; line-height:1.42; font-feature-settings:"palt"; } .pj__meta{ display:grid; gap:8px; padding:18px 0; border-block:1px solid var(--line); margin-bottom:22px; } .pj__meta div{ display:flex; gap:14px; font-size:12.5px; } .pj__meta dt{ width:64px; flex:none; color:var(--gray-l); } .pj__meta dd{ margin:0; } .pj__story{ display:grid; gap:15px; } .pj__story p{ font-size:13.5px; line-height:2; color:var(--gray); } .pj__story b{ display:inline-block; margin-right:10px; padding:2px 10px; border-radius:3px; background:var(--cyan); color:var(--navy); font-size:11px; letter-spacing:.06em; vertical-align:2px; } /* 見出し（.sec--project .sec__head）と同じ理由で、最大幅は余白ぶん広げます */ .pj__progress{ position:relative; max-width:calc(var(--maxw) + var(--pad) * 2); margin:34px auto 0; padding-inline:var(--pad); } .pj__progress::before{ content:""; position:absolute; left:var(--pad); right:var(--pad); top:0; height:2px; background:var(--line); } .pj__progress span{ position:relative; display:block; height:2px; background:var(--blue); width:20%; transition:width .2s linear; } /* -------------------------------------------------------------------------- 18. INTERVIEW -------------------------------------------------------------------------- */ .itv{ display:flex; flex-direction:column; gap:clamp(44px,6vw,90px); } .itv__card{ display:grid; grid-template-columns:.95fr 1fr; gap:clamp(24px,4vw,64px); align-items:start; } /* ★左右を入れ替える版。列の幅も一緒に入れ替えます。 これが無いと、写真の入る列が .95fr から 1fr に変わり、 INTERVIEW 01 と 02 で写真の幅（546px と 575px）がずれます。 */ .itv__card--rev{ grid-template-columns:1fr .95fr; } .itv__card--rev .itv__img{ order:2; } /* 写真が 16:9 の横長なので、枠も 16:9 に。 縦長（3/4）のままだと cover で横が半分以上切り落とされます。 */ /* ★写真はカードの先頭ではなく、少し下げて置きます。 見出し（2行）の1行目と2行目のあいだから始まる高さです。 以前 position:sticky が効いていた頃の見え方をそのまま残しています。 ★スクロール追従はしません（sticky に戻すと、INTERVIEW 01 と 02 で 写真の高さがそろわなくなります。2026-08-14）。 ★数字は見出しの大きさに連動させています。見出し（.itv__ttl）の 文字サイズを変えたときは、ここも見直してください。 */ .itv__img{ aspect-ratio:16/9; border-radius:8px; margin-top:clamp(52px,7.6vw,100px); } .itv__no{ font-family:var(--ff-en); font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--cyan); } .itv__ttl{ margin:14px 0 12px; font-size:clamp(22px,2.9vw,38px); font-weight:900; line-height:1.45; font-feature-settings:"palt"; } .itv__prof{ font-size:12.5px; color:var(--gray-l); padding-bottom:26px; border-bottom:1px solid var(--line); } .itv__qa{ display:grid; gap:26px; margin-top:28px; } .itv__qa dt{ font-size:14.5px; font-weight:700; color:var(--blue); margin-bottom:8px; } .itv__qa dd{ font-size:14.5px; line-height:2.1; color:var(--gray); padding-left:18px; border-left:2px solid var(--cyan-p); } .itv__mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); } .itv__minicard{ background:var(--white); border-radius:8px; padding:clamp(20px,2.2vw,28px); } /* 27.jpg / 4.jpg も 16:9。5.jpg 等も同様なので枠をそろえます */ .itv__miniimg{ aspect-ratio:16/9; border-radius:6px; margin-bottom:20px; } .itv__minicard h3{ margin:12px 0; font-size:clamp(17px,1.8vw,23px); font-weight:900; line-height:1.5; font-feature-settings:"palt"; } .itv__mtxt{ margin-top:14px; font-size:14px; line-height:2.05; color:var(--gray); } /* 旧サイトから移設したインタビューのカード内で使う体裁。 ★.itv__prof は本来インタビュー大枠用で下の余白が広いので、ここだけ詰めています。 */ .itv__mini .itv__prof{ padding-bottom:16px; } /* 顔写真は横長ではないので、16:9 で切ると頭が切れます。4:3 で上寄せに */ .itv__miniimg--face{ aspect-ratio:4/3; background-position:center 20%; } @media (max-width:900px){ .itv__card,.itv__card--rev{ grid-template-columns:1fr; } .itv__card--rev .itv__img{ order:0; } /* 1列に積むので、写真を下げる必要はありません */ .itv__img{ aspect-ratio:16/9; margin-top:0; } .itv__mini{ grid-template-columns:1fr; } } /* -------------------------------------------------------------------------- 19. DAY -------------------------------------------------------------------------- */ .day{ position:relative; } .day__line{ position:absolute; left:118px; top:14px; bottom:80px; width:2px; background:var(--line); } .day__line span{ display:block; width:100%; height:0; background:var(--blue); } .day__list{ display:grid; gap:clamp(24px,3vw,44px); } .day__item{ display:grid; grid-template-columns:120px 1fr; gap:36px; align-items:baseline; } .day__time{ font-family:var(--ff-en); font-size:clamp(20px,2.2vw,30px); font-weight:800; color:var(--blue); text-align:right; padding-right:8px; } .day__body{ position:relative; padding-left:34px; } .day__body::before{ content:""; position:absolute; left:-6px; top:.55em; width:13px; height:13px; border-radius:50%; background:var(--sky); border:2px solid var(--cyan); z-index:2; } .day__body h3{ font-size:clamp(16px,1.8vw,21px); font-weight:700; margin-bottom:8px; } .day__body p{ font-size:14px; line-height:2.05; color:var(--gray); } .day__note{ margin:40px 0 0 156px; padding:18px 24px; background:var(--white); border-radius:6px; font-size:13.5px; color:var(--gray); line-height:1.95; } .day__note b{ font-family:var(--ff-en); font-size:16px; color:var(--blue); } @media (max-width:768px){ .day__line{ left:5px; } .day__item{ grid-template-columns:1fr; gap:4px; padding-left:30px; } .day__time{ text-align:left; padding-right:0; } .day__body{ padding-left:0; } .day__body::before{ left:-31px; } .day__note{ margin-left:0; } } /* -------------------------------------------------------------------------- 20. EDUCATION -------------------------------------------------------------------------- */ .edu__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,40px); } .edu__ttl{ display:flex; align-items:center; gap:14px; font-size:clamp(18px,2vw,25px); font-weight:900; margin-bottom:24px; } .edu__ttl i{ font-family:var(--ff-en); font-style:normal; font-size:11px; font-weight:800; width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--cyan); color:var(--navy); } .edu__ttl--c{ justify-content:center; } .edu__block{ background:var(--white); border-radius:8px; padding:clamp(24px,3vw,40px); } .edu__list li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; padding:15px 0; border-bottom:1px solid var(--line); font-size:14.5px; } .edu__list b{ font-weight:700; } .edu__list span{ font-size:12.5px; color:var(--gray-l); text-align:right; } .edu__note{ margin-top:22px; font-size:13px; line-height:2; color:var(--gray); } /* 情報量が多い面なので、濃い青ではなく淡い水色＋濃色文字にしています */ .edu__lic{ margin-top:clamp(36px,4.5vw,66px); color:var(--navy); border-radius:10px; padding:clamp(28px,4vw,60px); background:linear-gradient(140deg,#eaf6fd 0%,#dbeffb 100%); border:1px solid rgba(11,111,196,.14); } /* ★このブロックのクラス名は .lic3 です。.lic ではありません。 recruit.html の資格手当テーブル（20.9 の .lic）と名前がぶつかり、 あとに書いてある向こうの指定に上書きされて3カラムが崩れました。 戻さないでください。career.html 側は .lic3 で固定です。 */ .lic3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,44px); margin-top:32px; align-items:start; } .lic__col{ min-width:0; } .lic__head{ font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--blue); padding-bottom:14px; border-bottom:1px solid rgba(11,111,196,.24); margin-bottom:18px; } /* ★ :not(.lic__tags) は必須です。外すと、この指定（詳細度が上）が 下の .lic__tags li に勝ってしまい、タグの左右パディングが0・文字14pxになって 資格名が丸枠からはみ出します。戻さないでください。 */ .lic__col>ul:not(.lic__tags)>li{ padding:9px 0; font-size:14px; line-height:1.6; color:var(--gray); } .lic__col>ul>li b{ color:var(--navy); margin-left:6px; } .lic__note{ margin-top:16px; font-size:12.5px; line-height:1.95; color:var(--gray); } /* 資格名／金額／円 の3列。金額を等幅数字で右に揃えます */ .lic__pay li{ display:grid; grid-template-columns:1fr auto auto; column-gap:10px; align-items:baseline; border-bottom:1px dashed rgba(11,111,196,.26); } .lic__pay li>span{ min-width:0; } .lic__pay b{ font-family:var(--ff-num); font-variant-numeric:tabular-nums; font-size:22px; font-weight:800; color:var(--blue); white-space:nowrap; margin-left:0; } .lic__pay i{ font-style:normal; font-size:12px; color:var(--gray); } .lic__tags{ display:flex; flex-wrap:wrap; gap:7px; } /* 「ドローン国家資格（二等）」のような長い名前でも枠内に収まるように、 max-width:100% と折り返しを効かせています */ .lic__tags li{ max-width:100%; padding:6px 12px; background:rgba(255,255,255,.7); border:1px solid rgba(11,111,196,.22); border-radius:999px; font-size:11.5px; line-height:1.5; color:var(--gray); overflow-wrap:anywhere; word-break:normal; } /* 3カラムのまま幅だけ詰まると金額が資格名を押し出すので、先に数字を小さくします */ @media (max-width:1080px){ .lic__pay b{ font-size:18px; } .lic__col>ul:not(.lic__tags)>li{ font-size:13px; } } @media (max-width:900px){ .edu__grid{ grid-template-columns:1fr; } .lic3{ grid-template-columns:1fr; } } /* -------------------------------------------------------------------------- 20.5 宮崎県産業開発青年隊への派遣（career.html の #seinentai） -------------------------------------------------------------------------- */ /* 横並びのときは、左のリンクカードと右の表の高さをそろえます。 余った高さは写真（.sntai__thumb）に持たせるので、 下に空白ができるのではなく、写真が縦に伸びます。 */ .sntai{ display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:clamp(20px,2.6vw,40px); align-items:stretch; } /* 公式サイトへのリンクカード。マイナビのバナーと同じ「白カード＋水色に光る」動きにそろえています */ .sntai__site{ display:flex; flex-direction:column; overflow:hidden; background:var(--white); border:1.5px solid var(--line); border-radius:10px; transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .sntai__site:hover{ border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 18px 40px -28px rgba(6,38,63,.45); } /* 集合写真は横幅いっぱいに人が並んでいて、左右を切ると端の人が欠けます。 そのため写真枠は元データと同じ 4:3 に固定し（切り取りなしで全員入ります）、 高さをそろえるために余った分は下の .sntai__body が受け取ります。 */ .sntai__thumb{ display:block; position:relative; aspect-ratio:4/3; flex:0 0 auto; overflow:hidden; background:var(--t-3); } /* 集合写真は下のほうが地面だけなので、上ぞろえで切ります（人物が切れません） */ .sntai__thumb img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block; } /* 右の表に合わせて伸びた分はここが受け取ります。 文章は上のまま、「公式サイトを見る」だけがカードの下端に付きます。 */ .sntai__body{ padding:clamp(18px,2.2vw,26px); flex:1 1 auto; display:flex; flex-direction:column; } .sntai__ttl{ display:block; font-size:clamp(17px,1.9vw,21px); font-weight:900; line-height:1.6; } .sntai__url{ display:block; margin-top:6px; font-family:var(--ff-en); font-size:12.5px; letter-spacing:.04em; color:var(--blue); word-break:break-all; } .sntai__txt{ display:block; margin-top:12px; font-size:13.5px; line-height:1.95; color:var(--gray); } .sntai__go{ display:inline-flex; align-items:center; align-self:flex-start; gap:8px; margin-top:auto; padding-top:16px; font-size:14px; font-weight:700; color:var(--navy); } .sntai__go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); } .sntai__site:hover .sntai__go svg{ transform:translateX(5px); } /* 訓練の中身。中のカードが余った高さを受け取れるよう、縦のフレックスにしています （左の写真カードと高さをそろえたときに、下が空かないようにするため） */ .sntai__facts{ background:var(--white); border-radius:8px; padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; } /* ★この面（青年隊の紹介）は、全体に文字が小さすぎて読み飛ばされる、という 指摘を受けて一段ずつ大きくしています。小さく戻さないでください。 ここは「派遣制度がどういうものか」を伝える、このページの要のひとつです。 ※注記（.sntai__note）だけは、意図的にいちばん小さいままにしています。 */ .sntai__head{ font-size:14px; font-weight:700; letter-spacing:.12em; color:var(--blue); padding-bottom:14px; border-bottom:1px solid rgba(11,111,196,.24); margin-bottom:6px; } .sntai__note{ margin-top:18px; font-size:12.5px; line-height:1.95; color:var(--gray-l); } /* 「どんなところか」の5枚のカード。 罫線だけの素の表だと読み飛ばされるので、 ・1枚ごとに独立したカードにして、番号のバッジと上辺の線で色を差す ・結論の中の数字だけを大きく見せる ・カーソルを乗せるとカードが少し浮き、枠がそのカードの色になる の3点で、目が動くようにしています。 */ .fact{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.2vw,14px); margin:12px 0 0; /* 余った高さは各行が均等に受け取ります */ flex:1 1 auto; grid-auto-rows:1fr; } .fact__card{ display:flex; flex-direction:column; min-width:0; padding:clamp(15px,1.7vw,20px); background:var(--white); border:1.5px solid var(--line); border-top:3px solid var(--c); border-radius:10px; transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } /* 01 だけ横2列ぶん。文章がいちばん長いので、ここで折り返しを稼ぎます */ .fact__card--wide{ grid-column:1/-1; } .fact__card:hover{ transform:translateY(-3px); border-color:var(--c); box-shadow:0 20px 40px -30px rgba(6,38,63,.5); } /* カードごとの色。パステルは番号のバッジと上辺の線だけに使い、 面は白のままにします（パステルを面に敷くと文字が読みにくくなります） */ .fact__card:nth-child(1){ --c:var(--c-aqua); } .fact__card:nth-child(2){ --c:var(--c-mint); } .fact__card:nth-child(3){ --c:var(--c-lemon); } .fact__card:nth-child(4){ --c:var(--c-peach); } .fact__card:nth-child(5){ --c:var(--c-lilac); } .fact__label{ display:flex; align-items:center; gap:11px; font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--blue); } /* 番号は丸いバッジに。パステルの上なので文字は紺です */ .fact__no{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--c); color:var(--navy); font-family:var(--ff-num); font-style:normal; font-size:12.5px; font-weight:800; letter-spacing:.02em; } .fact__body{ margin:11px 0 0; min-width:0; } /* ★結論の一行。ここだけ拾い読みしても内容が分かる部分なので、 いちばん大きくしています（14.5px では小さすぎる、という指摘あり）。 */ .fact__key{ margin:0; font-size:clamp(15px,1.35vw,17.5px); font-weight:700; line-height:1.75; text-wrap:pretty; } /* 数字だけを大きく。行の高さが少し増えますが、そのぶん数字が目に入ります */ .fact__key em{ font-family:var(--ff-num); font-style:normal; font-size:1.55em; font-weight:800; line-height:1; letter-spacing:-.01em; color:var(--blue); padding-inline:.06em; } /* text-wrap:pretty は、最後の1行に1文字だけ残るのを防ぐためです */ .fact__sub{ margin:8px 0 0; font-size:13.5px; line-height:1.95; color:var(--gray); text-wrap:pretty; } /* 狭い画面では1列に。カードなので、そのまま縦に積むだけで読めます */ @media (max-width:620px){ .fact{ grid-template-columns:1fr; grid-auto-rows:auto; } } /* 派遣中の費用と給与。訓練の内容（.sntai__facts）とは性質が違うので、 青年隊のグリッドの下に横一列で独立させています。 応募者がいちばん気にする条件なので、「¥0 / 100%」の数字で先に結論を見せ、 そのあとに言葉で言い切る順番にしています。 */ .sntai__cost{ position:relative; overflow:hidden; margin-top:clamp(18px,2.2vw,30px); background:var(--white); border-radius:12px; /* 下だけ少し詰めています（最後の行が小さな補足文なので、 上下同じだけ空けると下が空きすぎて見えます） */ padding:clamp(26px,3.2vw,46px) clamp(26px,3.2vw,46px) clamp(22px,2.6vw,34px); box-shadow:0 26px 56px -42px rgba(6,38,63,.42); } /* 上辺の帯。1色のベタ塗りより、水色→青のグラデーションのほうが軽く見えます */ .sntai__cost::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--cyan),var(--blue) 72%,var(--blue-d)); } .sntai__cost-en{ margin:0; font-family:var(--ff-en); font-size:11px; font-weight:700; letter-spacing:.22em; color:var(--cyan); } .sntai__cost-ttl{ margin:9px 0 0; font-size:clamp(18px,2.2vw,26px); font-weight:900; line-height:1.65; } /* 「会社が持ちます」だけを水色のマーカーで引き立てます（下線よりやわらかく見えます） */ .sntai__cost-ttl em{ font-style:normal; background:linear-gradient(transparent 62%, var(--cyan-p) 62%); } .cost3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(22px,2.8vw,36px); } /* 3つは1枚のカードの中にあるので、囲み枠ではなく細い縦罫で区切ります */ .cost3__item{ min-width:0; padding-inline:clamp(14px,1.8vw,26px); } .cost3__item:first-child{ padding-left:0; } .cost3__item:last-child{ padding-right:0; } .cost3__item + .cost3__item{ border-left:1px solid var(--line); } /* 項目名（学費／寮の光熱費／入隊中の給与）。 隣の数字が最大62pxあるため、11.5pxでは何の項目か読み取れず埋もれていた。 何についての金額なのかが先に伝わるべきなので、はっきり読める大きさにする。 */ .cost3__tag{ margin:0; display:inline-flex; align-items:center; height:34px; padding:0 17px; border-radius:99px; background:var(--t-3); color:var(--blue); font-size:16px; font-weight:700; letter-spacing:.06em; line-height:1; } /* 数字と単位はベースラインでそろえます（¥ と % は数字より小さく） */ .cost3__fig{ margin:14px 0 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 7px; font-family:var(--ff-num); font-size:clamp(40px,5vw,62px); font-weight:800; line-height:1.05; letter-spacing:-.02em; color:var(--blue); } .cost3__sym{ font-size:.46em; font-weight:700; } /* 何が0なのかを、数字のすぐ横に小さく添えます */ .cost3__unit{ font-family:var(--ff-jp); font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--gray); } .cost3__lead{ margin:15px 0 0; font-size:14.5px; font-weight:700; line-height:1.7; } /* text-wrap:pretty は、最後の1行に1文字だけ残るのを防ぐためです （対応していないブラウザでは、ふつうの折り返しに戻るだけです） */ .cost3__txt{ margin:7px 0 0; font-size:12.5px; line-height:1.9; color:var(--gray-l); text-wrap:pretty; } @media (max-width:820px){ /* 縦並びのときは、縦罫ではなく上の横罫で区切ります */ .cost3{ grid-template-columns:1fr; } .cost3__item{ padding:22px 0 0; } .cost3__item:first-child{ padding-top:0; } .cost3__item + .cost3__item{ border-left:0; border-top:1px solid var(--line); } } @media (max-width:900px){ .sntai{ grid-template-columns:1fr; } } /* 動画カード。サムネイルを押すと、その枠の中に YouTube を差し込んで再生します （動きは js/video.js。最初は画像だけなので、開いた時点では YouTube を読みません）。 ★同じ見た目を index.html でも使うので、css/top.css にも同じ内容を置いています。 どちらかを直したら、もう一方も直してください。 */ .vids{ margin-top:clamp(30px,3.6vw,52px); } .vids__head{ font-size:clamp(16px,1.9vw,21px); font-weight:900; } .vids__txt{ margin-top:10px; font-size:13.5px; line-height:2; color:var(--gray); } .vids__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,26px); margin-top:22px; } @media (max-width:700px){ .vids__grid{ grid-template-columns:1fr; } } .vid{ display:block; overflow:hidden; background:var(--white); border:1.5px solid var(--line); border-radius:10px; transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .vid:hover{ border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 18px 40px -28px rgba(6,38,63,.45); } /* YouTube のサムネイル（hqdefault）は4:3で上下に黒帯が入るため、 16:9 で切り抜いて帯を隠しています。object-fit:cover が効くので画像は歪みません。 */ .vid__thumb{ display:block; position:relative; aspect-ratio:16/9; background:#06263f; } .vid__thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .vid__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:rgba(6,38,63,.72); border:1.5px solid rgba(255,255,255,.6); transition:background .35s var(--ease), transform .35s var(--ease); } .vid__play::after{ content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; } .vid:hover .vid__play{ background:var(--blue); transform:translate(-50%,-50%) scale(1.06); } .vid__body{ display:block; padding:clamp(16px,2vw,22px); } .vid__ttl{ display:block; font-size:14.5px; font-weight:700; line-height:1.75; } .vid__src{ display:block; margin-top:7px; font-size:12px; color:var(--gray-l); } /* 再生中。差し込んだ YouTube が枠いっぱいになり、カードは動かないようにします （再生中にホバーで浮き上がると、押しにくくなるため） */ .vid__thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .vid.is-playing{ border-color:var(--cyan); } .vid.is-playing:hover{ transform:none; box-shadow:none; } /* -------------------------------------------------------------------------- 21. CAREER STEP -------------------------------------------------------------------------- */ .step{ display:grid; gap:clamp(14px,1.8vw,24px); } .step__item{ display:grid; grid-template-columns:210px 1fr; gap:clamp(18px,2.6vw,44px); } .step__bar{ position:relative; display:flex; align-items:center; justify-content:center; border-radius:8px; overflow:hidden; background:linear-gradient(135deg,var(--cyan),var(--blue)); color:var(--white); font-size:clamp(16px,1.8vw,22px); font-weight:900; padding:26px 16px; } .step__bar::after{ content:""; position:absolute; right:-30px; top:0; width:60px; height:100%; background:rgba(255,255,255,.14); transform:skewX(-18deg); } .step__item[data-step="1"] .step__bar{ opacity:.7; } .step__item[data-step="2"] .step__bar{ opacity:.82; } .step__item[data-step="3"] .step__bar{ opacity:.92; } .step__body{ background:var(--white); border-radius:8px; padding:clamp(22px,2.6vw,36px); } .step__body h3{ font-size:clamp(18px,2.1vw,26px); font-weight:900; margin-bottom:18px; } .step__body ul{ display:flex; flex-wrap:wrap; gap:8px; } .step__body li{ font-size:13px; padding:7px 14px; background:var(--sky); border-radius:999px; color:var(--gray); } .step__sal{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; } .step__sal b{ font-family:var(--ff-en); font-size:30px; font-weight:800; color:var(--blue); margin:0 4px; } .step__sal i{ font-style:normal; font-size:12px; color:var(--gray-l); margin-left:8px; } .step__note{ margin-top:26px; font-size:12.5px; color:var(--gray-l); line-height:1.9; } @media (max-width:768px){ .step__item{ grid-template-columns:1fr; gap:0; } .step__bar{ border-radius:8px 8px 0 0; padding:16px; } .step__body{ border-radius:0 0 8px 8px; } } /* -------------------------------------------------------------------------- 22. ICT -------------------------------------------------------------------------- */ .ict__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); } .ict__card{ position:relative; overflow:hidden; border-radius:8px; padding:clamp(24px,2.6vw,36px); background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.26); transition:border-color .5s var(--ease), transform .5s var(--ease), background .5s var(--ease); } .ict__card:hover{ border-color:var(--cyan-l); background:rgba(255,255,255,.17); transform:translateY(-6px); } .ict__icon{ display:block; width:48px; height:48px; margin-bottom:22px; border-radius:12px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); position:relative; } .ict__icon::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; background:var(--white); } .ict__icon[data-icon="drone"]::after{ clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); } .ict__icon[data-icon="machine"]::after{ clip-path:polygon(0 100%,0 40%,45% 40%,45% 0,100% 0,100% 100%); } .ict__icon[data-icon="tablet"]::after{ border-radius:3px; height:22px; width:15px; } .ict__icon[data-icon="remote"]::after{ border-radius:50%; width:12px; height:12px; box-shadow:0 0 0 4px rgba(0,192,240,.25); } .ict__icon[data-icon="ai"]::after{ clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%); } .ict__icon[data-icon="board"]::after{ height:14px; width:20px; border-radius:2px; } .ict__card h3{ font-size:clamp(16px,1.7vw,20px); font-weight:700; margin-bottom:14px; line-height:1.6; } .ict__card p{ font-size:13.5px; line-height:2; color:rgba(255,255,255,.86); } .ict__ba{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.26); font-size:12px; flex-wrap:wrap; } .ict__before{ color:rgba(255,255,255,.6); text-decoration:line-through; } .ict__ba i{ width:20px; height:1px; background:var(--cyan-l); position:relative; flex:none; } .ict__ba i::after{ content:""; position:absolute; right:0; top:-2.5px; border-left:5px solid var(--cyan-l); border-block:3px solid transparent; } .ict__after{ color:var(--white); font-weight:700; } .ict__msg{ margin-top:clamp(40px,5vw,70px); text-align:center; font-size:clamp(15px,1.9vw,23px); font-weight:700; line-height:2; } .ict__msg em{ font-style:normal; color:var(--cyan-l); } @media (max-width:1000px){ .ict__cards{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .ict__cards{ grid-template-columns:1fr; } } /* -------------------------------------------------------------------------- 23. DATA -------------------------------------------------------------------------- */ /* 罫線は「枠の背景をすき間から覗かせる」のではなく、セルの outline で描いています。 ★戻さないでください。項目数が列数の倍数にならないとき（今は10項目・4列）、 背景を敷く書き方だと最終行の空いたところが灰色の板になって見えます。 outline は場所を取らないので、1pxのすき間で隣どうし重なって1本に見え、 何も無いところには何も描かれません。 */ .data__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:transparent; } .data__cell{ background:var(--white); outline:1px solid var(--line); padding:clamp(26px,3vw,44px) clamp(16px,2vw,26px); text-align:center; border-top:3px solid transparent; } /* 上端の線と単位の文字を、4マスごとに色替えします（トップページの数字マスと同じ考え方）。 ★地（背景）は白のままにしてください。面をパステルで塗ると、上に乗る青い数字の コントラストが落ちて、かえって読みにくくなります。色は線と単位だけで出します。 ★--dc は「白い背景で読める濃さ」のパステルです。:root には無い色なので、 ここでだけ持っています。色を替えるときは、この4行だけを触ってください。 */ .data__cell:nth-child(4n+1){ border-top-color:var(--c-pink); --dc:var(--c-pink-d); } .data__cell:nth-child(4n+2){ border-top-color:var(--c-peach); --dc:var(--c-peach-d); } .data__cell:nth-child(4n+3){ border-top-color:var(--c-lemon); --dc:var(--c-lemon-d); } .data__cell:nth-child(4n) { border-top-color:var(--c-mint); --dc:var(--c-mint-d); } .data__cell b{ font-family:var(--ff-num); font-size:clamp(42px,5.4vw,66px); font-weight:700; line-height:1; letter-spacing:.005em; color:var(--blue); font-variant-numeric:tabular-nums; } /* 単位（%・時間・名・件）。小さいと読み取りづらいので、数字の3割ほどの大きさにします */ .data__cell i{ font-style:normal; font-size:clamp(17px,1.7vw,23px); font-weight:800; color:var(--dc,var(--blue)); margin-left:7px; } .data__cell span{ display:block; margin-top:16px; font-size:13.5px; color:var(--gray); line-height:1.75; } .data__note{ margin-top:22px; font-size:12px; color:var(--gray-l); line-height:1.9; } .data__note a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; } @media (max-width:900px){ .data__grid{ grid-template-columns:repeat(2,1fr); } } /* 「データで見る旭建設」は大項目が5つあり、既定の余白のままだと グラフとグラフのあいだが空きすぎて間延びします。この面だけ少し詰めます。 ★ページ全体の既定値（.sec / .sec__head）は触らないでください。 他のページは文章主体なので、いまの余白でちょうどよく組めています。 */ body[data-page="data"] .sec{ padding-block:clamp(52px,7vw,104px); } body[data-page="data"] .sec__head{ margin-bottom:clamp(30px,3.6vw,48px); } /* -------------------------------------------------------------------------- 23-2. DASHBOARD（data.html の会社データ） -------------------------------------------------------------------------- カード（.dcard）を並べた面と、その中に置く4つの部品でできています。 .dcard__fig … 大きい数字（KPI） .donut … 円（ドーナツ）グラフ＋凡例（男女構成・部門別） .meter … 全体に対する1つの割合（35歳未満・60歳以上） .cols … 分布の縦棒グラフ（年代別・勤続年数別） .bars … 内訳の横棒グラフ（居住地） .donut / .cols / .bars の中身は js/dashboard.js が作ります。 ★グラフの色について ・年代／勤続年数のように「順序のあるもの」と、円グラフの扇は、 水色の濃淡（--bar-1〜7 / --pie-1〜6）で塗ります。淡→濃の一本道に してあり、隣どうしの明るさの差と、いちばん淡い色の白背景に対する コントラストは検証済みです。 ・円グラフを6色の「別々の色相」にはしないでください。緑とピンク、 緑とオレンジは P型・D型色覚で判別できず、6色そろえると並べ替えても 必ずこの衝突が起きます。濃淡なら明るさの差が全員に残ります。 ・居住地のように順序に意味がないものは、全部 --bar-flat の1色です。 棒の長さで分かることを色でも繰り返すと、読み取りの手がかりが濁ります。 ・男女構成だけは「別のもの同士」なので、青とオレンジの2色にしています （色覚特性があっても見分けられる組み合わせを選んでいます）。 それでも色だけに頼らせないよう、必ず凡例と実数を出しています。 -------------------------------------------------------------------------- */ .dash{ display:grid; gap:clamp(14px,1.6vw,22px); /* グラフの色。ここだけ直せば全部のグラフに効きます。 ★パステル寄りの色にしていますが、「明るさの順番」は必ず守ってください。 1 → 7、1 → 6 と進むにつれて、必ず暗くなるように選んでいます。 色相（水色・青・すみれ）はその上に乗せているだけの飾りです。 これがあるので、色の見分けがつきにくい方でも、白黒に写しても、 どちらが多いか少ないかが同じ順番で読めます。 色を替えるときは、スマホの「グレースケール表示」で見て、 上から下へ確実に濃くなっているかを確かめてください。 */ --bar-track:#eaf6fc; /* 棒の下に敷く薄い溝 */ --bar-flat:#5ec0e0; /* 順序のないデータの既定色（下の --flat-1〜6 で上書きされます） */ --bar-1:#c7f2e2; /* ここから下は順序のあるデータ用（淡→濃） */ --bar-2:#9ae7e6; --bar-3:#6fd6f2; --bar-4:#4fbdec; --bar-5:#3f9fe0; --bar-6:#3a80cf; --bar-7:#3d63b8; /* いちばん濃いところ。紺まで落とすと暗く見えるので中くらいの青で止めます */ --seg-a:#3fa8dc; /* 男女構成の2色 */ --seg-b:#eba055; /* 順序のないデータ（居住地など）用のパステル6色。 こちらは「どちらが多いか」を色で示さないので、色相をばらけさせています （長さで読むグラフなので、色は見分けの手がかりとしてだけ働きます）。 */ --flat-1:#7fd7ea; --flat-2:#9fdcc4; --flat-3:#f3cf8a; --flat-4:#f4b79c; --flat-5:#efa8c4; --flat-6:#b7aeea; /* 円グラフの扇の色（多い順に濃→淡）。 ★上の --bar-* と同じで、明るさの順番だけは崩さないでください。 6つの扇を「別々の色相（緑・ピンク・オレンジ…）」でそろえると、 P型・D型色覚では必ず区別できない組み合わせが出ます。 明るさが順に変われば、全員が同じ順番で読めます。 */ --pie-1:#4a86cf; /* いちばん大きい扇。面が広いので、棒より1段明るくしています */ --pie-2:#4fa3de; --pie-3:#5cbdea; --pie-4:#77d3f0; --pie-5:#9ae4e8; --pie-6:#bdf0dd; /* 2つに分かれるとき（男女構成）だけは別々の色。 この2色は色覚特性があっても見分けられる組み合わせです。 */ --duo-1:var(--seg-a); --duo-2:var(--seg-b); } .dash + .dash{ margin-top:clamp(14px,1.6vw,22px); } .dash--4{ grid-template-columns:repeat(4,1fr); } .dash--3{ grid-template-columns:repeat(3,1fr); } /* グラフの段は、行数が違うと高さもそろわないので上ぞろえにします。 （KPIを並べる段は高さをそろえたほうがきれいなので、既定の stretch のまま） */ .dash--2{ grid-template-columns:1fr 1fr; align-items:start; } /* 総人数を大きく出す段。カードは2枚（総人数／男女の構成）。 ★列の幅は下の .dash--2 と同じ 1fr 1fr にしてください。片方だけ広くすると、 カードとカードのすき間（縦の切れ目）が、その下の段とずれて見えます。 */ .dash--hero{ grid-template-columns:1fr 1fr; } /* 高さをそろえたい段に付けます（.dash--2 は既定で上ぞろえのため） */ .dash--even{ align-items:stretch; } /* 「見出し＋数字」だけの段。説明の行が無いぶん、カードを低くします */ .dash--slim .dcard{ padding:clamp(18px,1.9vw,24px) clamp(20px,2.2vw,28px); } .dash--slim .dcard__fig{ margin-top:8px; } @media (max-width:1000px){ .dash--4{ grid-template-columns:repeat(2,1fr); } .dash--3,.dash--2,.dash--hero{ grid-template-columns:1fr; } } @media (max-width:560px){ .dash--4{ grid-template-columns:1fr; } } .dcard{ background:var(--white); border-radius:8px; padding:clamp(22px,2.5vw,34px); border-top:3px solid var(--dl,var(--c-aqua)); } /* 面ごとに上のラインの色を変えます（既存の .data__cell と同じ考え方）。 ★1枚のカードにつき、色を2つセットで持たせています。 --dl … 上部のラインの色（淡いパステル） --dc … そのカードの中の「単位」の文字色（同じ色の濃いほう） こうしておくと、単位の色はカードの線の色に自動でそろいます。 カードを増やしたり並べ替えたりしても、ずれることはありません。 */ .dash>.dcard:nth-child(6n+1){ --dl:var(--c-aqua); --dc:var(--c-aqua-d); } .dash>.dcard:nth-child(6n+2){ --dl:var(--c-mint); --dc:var(--c-mint-d); } .dash>.dcard:nth-child(6n+3){ --dl:var(--c-lemon); --dc:var(--c-lemon-d); } .dash>.dcard:nth-child(6n+4){ --dl:var(--c-peach); --dc:var(--c-peach-d); } .dash>.dcard:nth-child(6n+5){ --dl:var(--c-pink); --dc:var(--c-pink-d); } .dash>.dcard:nth-child(6n+6){ --dl:var(--c-lilac); --dc:var(--c-lilac-d); } /* カードの見出し。すべて同じ見た目にそろえています。 ★.dcard__lab（「総人数」など単独の数字を出すカード）と .dcard__ttl（グラフを載せるカード）で、文字の大きさ・太さ・色は同じ。 違うのは .dcard__ttl に下線が付くことだけです（グラフとの区切り）。 片方だけ触らないでください。カードごとに見出しの調子が変わります。 */ .dcard__lab, .dcard__ttl{ font-size:16px; font-weight:700; letter-spacing:.06em; color:var(--gray); line-height:1.65; } .dcard__ttl{ padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid var(--line); } /* 見出しの右に小さく添える補足（「全82名」など）。 ★いまは使っている箇所がありません（母数はカードの中の数字とグラフで 読めるので、見出しからは外しました）。 また添えたくなったときのために指定だけ残してあります。 */ .dcard__ttl i{ font-style:normal; font-weight:500; font-size:12.5px; letter-spacing:0; color:var(--gray-l); margin-left:9px; } @media (max-width:520px){ .dcard__lab,.dcard__ttl{ font-size:15px; } } .dcard__fig{ margin-top:12px; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 6px; } /* 大きい数字は等幅数字にしません（121 のような並びが間延びして見えるため） */ .dcard__fig b{ font-family:var(--ff-num); font-size:clamp(38px,4.4vw,56px); font-weight:700; line-height:1; letter-spacing:.005em; color:var(--blue); } /* 単位（名・年・％ など）。数字の3割ほどの大きさにして、読み取れるようにします。 色は、そのカードの上部のラインと同じ色（濃いほう）です → .dcard の --dc */ .dcard__fig i{ font-style:normal; font-size:clamp(16px,1.6vw,21px); font-weight:800; color:var(--dc,var(--blue)); } /* 数字の意味を書く見出し（「平均年齢」「平均勤続年数」）。 ★数字のすぐ左に、同じ行で置きます。以前は margin-left:auto で右端へ 飛ばし、13px にしていましたが、数字から離れすぎ・小さすぎて 「何の数字か分からない」状態でした。離さない・小さくしないこと。 */ .dcard__fig .dcard__cap{ font-size:clamp(15px,1.5vw,18px); font-weight:700; letter-spacing:.04em; color:var(--gray); margin-right:4px; } /* このページで1つだけの「いちばん大きい数字」 */ .dcard--hero .dcard__fig b{ font-size:clamp(58px,7.6vw,96px); } /* 数字ではなく文字（設立日・カンマ区切りの売上高など）を大きく置くとき。 ★上の .dcard__fig b より詳しい書き方（クラス2つ）にしておくこと。 .dcard__txt だけだと負けて、56pxのまま折り返します。 */ .dcard__fig .dcard__txt{ font-family:var(--ff-num); font-size:clamp(21px,2.3vw,29px); font-weight:700; line-height:1.3; color:var(--blue); } .dcard__sub{ margin-top:15px; font-size:13.5px; color:var(--gray); line-height:1.9; } .dcard__sub b{ font-family:var(--ff-num); font-size:19px; font-weight:700; color:var(--navy); margin:0 3px; } .dcard__note{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--gray); line-height:1.95; } .dcard__meta{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; } .dcard__meta li{ font-size:14px; padding:10px 18px; background:var(--sky-l); border-radius:999px; color:var(--gray); } .dcard__meta b{ font-family:var(--ff-num); font-size:21px; font-weight:700; color:var(--blue); margin:0 4px; } /* 内訳を「読ませる数字」として大きく出す形（総人数カードの3マス）。 ★丸いタグ（上の既定形）だと数字が21pxまでで、カードの下半分が 大きく空いて見えました。マスに分けて数字を3倍近くまで上げています。 ★マスの数を増やすときは grid の列数も直してください。 */ .dcard__meta--big{ margin-top:clamp(24px,2.6vw,32px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.1vw,14px); } /* ★スマホでは2列（2026-08-14）。3列だと1マスが細く、 「役員・顧問」のような長い見出しが折り返して読みづらくなります。 年代別の各項目と同じ考え方で、半分の幅を2つ並べます。 */ @media (max-width:768px){ .dcard__meta--big{ grid-template-columns:repeat(2,1fr); } } .dcard__meta--big li{ padding:clamp(16px,1.8vw,22px) 8px; border-radius:8px; text-align:center; background:var(--sky-l); color:var(--gray); } .dcard__meta--big span{ display:block; font-size:13.5px; font-weight:700; color:var(--gray); margin-bottom:10px; line-height:1.5; letter-spacing:.02em; } .dcard__meta--big b{ font-size:clamp(30px,3.6vw,46px); line-height:1; margin:0; } /* 単位の色は、そのカード上部のラインと同じ色（--dc）にそろえます */ .dcard__meta--big i{ font-style:normal; font-size:15px; font-weight:800; color:var(--dc,var(--blue)); margin-left:3px; } /* 幅の狭い画面では「役員・顧問」が折り返して高さがそろわなくなるので 1列に積みます（数字は大きいままにしておきます） */ @media (max-width:400px){ .dcard__meta--big{ grid-template-columns:1fr; } } /* 小さい数字を並べる枠（平均年齢の内訳など）。 数字が小さくて読みづらかったので、枠を広げて数字を大きくしています。 ★1マスの最小幅（minmax の 100px）と数字の大きさはセットです。数字だけ 大きくすると、幅の狭い画面で「38.4」が折り返します。 */ .minis{ margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:10px; } .minis li{ background:var(--sky-l); border-radius:6px; padding:16px 8px; text-align:center; } .minis span{ display:block; font-size:12.5px; color:var(--gray); margin-bottom:9px; line-height:1.5; } .minis b{ font-family:var(--ff-num); font-size:28px; font-weight:700; color:var(--blue); line-height:1; } /* 単位（歳・年）の色も、カード上部のラインと同じ色（--dc）にそろえます */ .minis i{ font-style:normal; font-size:13px; font-weight:800; color:var(--dc,var(--blue)); margin-left:3px; } /* ---- 全体に対する1つの割合（35歳未満／60歳以上） ---- */ .meters{ margin-top:22px; display:grid; gap:16px; } .meter{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 12px; } .meter__lab{ font-size:14.5px; color:var(--gray); } .meter__lab b{ font-family:var(--ff-num); font-size:22px; font-weight:700; color:var(--navy); margin:0 4px; } .meter__pct{ font-family:var(--ff-num); font-size:20px; font-weight:800; color:var(--blue); font-variant-numeric:tabular-nums; } .meter__track{ grid-column:1/-1; display:block; height:12px; border-radius:999px; background:var(--bar-track); overflow:hidden; } .meter__fill{ display:block; height:100%; width:0; border-radius:999px; background:var(--bar-flat); transition:width 1.1s var(--ease-out) .15s; } .reveal.is-in .meter__fill{ width:var(--w); } /* 表の上に置く要点のメーター。表と地続きに見えないよう少し離します */ .meter--lead{ margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); } /* ---- 円（ドーナツ）グラフ（男女構成・部門別）---- 扇は js/dashboard.js が conic-gradient で描きます。 ★角度だけでは 9.8% と 8.5% の区別がつかないので、 凡例に人数と構成比を必ず並べてください。円だけを置かないこと。 */ .pie{ display:grid; grid-template-columns:minmax(140px,200px) 1fr; gap:clamp(16px,2.2vw,30px); align-items:center; margin-top:10px; } /* 幅の狭いカード（上段に3枚並ぶ男女構成）は、横に並べると凡例が潰れて 「男／性」と改行されます。円を上、凡例を下に積みます。 */ .pie--tight{ grid-template-columns:1fr; justify-items:center; gap:16px; } /* ★穴の大きさと真ん中の文字は、必ずセットで調整してください。 円を小さくしたのに文字がそのままだと、文字が穴から扇へはみ出します。 */ .pie--tight .donut{ max-width:228px; } .pie--tight .donut__hole{ inset:22%; } .pie--tight .donut__num b{ font-size:36px; } .pie--tight .donut__num i{ font-size:14px; } .pie--tight .donut__cap{ margin-top:9px; font-size:12.5px; } @media (max-width:640px){ .pie{ grid-template-columns:1fr; gap:20px; justify-items:center; } } .pie .dlegend{ width:100%; } .donut{ position:relative; width:100%; aspect-ratio:1; } /* --- 円が描かれる動き ------------------------------------------------- 画面に入ると、12時の位置から時計回りに扇が一周描かれます。 ★仕組み ・--sweep は「どこまで描いたか」の角度です。この角度までを 見せる型（mask）を扇にかぶせ、0度→360度へ動かして描き出します。 ・角度そのものを動かすには @property の登録が要ります。登録が無いと 0度から360度へ一瞬で切り替わってしまい、描かれて見えません。 （@property に未対応の古いブラウザでは、動かずにパッと出ます。 中身は読めるので、それで構いません） ★ふわっと弾ませるため、大きさは行き過ぎてから戻る曲線 cubic-bezier(.34,1.56,.64,1) を使っています。 */ @property --sweep{ syntax:''; inherits:false; initial-value:0deg; } .donut__ring{ position:absolute; inset:0; border-radius:50%; --sweep:0deg; -webkit-mask-image:conic-gradient(#000 var(--sweep), transparent 0); mask-image:conic-gradient(#000 var(--sweep), transparent 0); opacity:0; transform:scale(.86); transition:opacity .3s var(--ease-out), transform .9s cubic-bezier(.34,1.56,.64,1), --sweep 1.15s cubic-bezier(.16,1,.3,1); } .reveal.is-in .donut__ring{ opacity:1; transform:none; --sweep:360deg; } /* 動きを減らす設定の方には、描く動きも弾みも出しません */ @media (prefers-reduced-motion:reduce){ .donut__ring{ --sweep:360deg; opacity:1; transform:none; transition:none; } } /* 真ん中の穴。カードの地色（白）でくり抜いています */ .donut__hole{ position:absolute; inset:23%; border-radius:50%; background:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1; } /* ★穴（上の inset）を先に広げてから、文字を大きくしています。順番を逆にすると 文字が穴からはみ出して、扇の上に重なります。 */ .donut__num b{ font-family:var(--ff-num); font-size:clamp(27px,3vw,38px); font-weight:700; color:var(--blue); } .donut__num i{ font-style:normal; font-size:14px; font-weight:800; color:var(--dc,var(--blue)); margin-left:3px; } .donut__cap{ margin-top:9px; font-size:12.5px; color:var(--gray); letter-spacing:.02em; } /* 円グラフの凡例。ここが値の読み取り口なので、必ず人数と構成比を出します */ .dlegend{ display:grid; gap:2px; } .dlegend li{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:0 11px; padding:10px 7px; border-radius:6px; font-size:15px; line-height:1.5; transition:background .25s var(--ease); } .dlegend li:hover{ background:var(--sky-l); } .dlegend i{ width:13px; height:13px; border-radius:3px; flex:none; } .dlegend__nm{ color:var(--navy); } .dlegend__n{ font-family:var(--ff-num); font-variant-numeric:tabular-nums; font-size:20px; font-weight:700; color:var(--navy); } .dlegend__n em{ font-style:normal; font-size:13px; font-weight:800; color:var(--dc,var(--blue)); margin-left:3px; } .dlegend__pct{ font-family:var(--ff-num); font-variant-numeric:tabular-nums; font-size:15px; font-weight:700; color:var(--gray); min-width:56px; text-align:right; } @media (max-width:420px){ .dlegend li{ font-size:13px; gap:0 8px; padding:8px 4px; } .dlegend__n{ font-size:17px; } .dlegend__pct{ font-size:13px; min-width:46px; } } /* ---- 分布の縦棒グラフ（年代別・勤続年数別）---- 左から右へ年齢／年数が進みます。山の形がそのまま見えるように縦にしています。 中身は js/dashboard.js が作ります。 */ .cols{ margin-top:4px; } /* ★縦棒グラフのすぐ下に説明文が来るときは、説明側の区切り線を消します。 グラフの基準線（下の .cols__plot の border-bottom）と、説明の区切り線 （.dcard__note の border-top）が18pxしか離れておらず、 横線が2本並んで見えるためです。線は基準線の1本だけにします。 */ .cols + .dcard__note{ border-top:0; padding-top:0; margin-top:17px; } .cols__plot{ /* ★minmax(0,1fr) にすること（2026-08-14 修正）。1fr のままだと、各列の最小幅が 「中身の幅」になり、ラベルや数字がカードより広いときに右端がはみ出して 切れて見えます（スマホで実測 611px の枠に 633px 必要な状態でした）。 minmax(0,…) にすると、中身より狭くなってよいと伝わり、枠に収まります。 */ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:clamp(4px,.8vw,12px); height:clamp(192px,21vw,244px); border-bottom:1px solid var(--line); /* 目盛り線は引かず、基準線だけ */ } .cols__item{ position:relative; display:grid; grid-template-rows:1fr auto; } .cols__col{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; } .cols__val{ margin-bottom:8px; font-family:var(--ff-num); font-size:18px; font-weight:700; color:var(--navy); line-height:1; white-space:nowrap; } .cols__val i{ font-style:normal; font-size:12px; font-weight:800; color:var(--dc,var(--blue)); margin-left:2px; } .cols__bar{ width:100%; max-width:30px; height:0; border-radius:4px 4px 0 0; /* 伸びる先だけ丸め、根元は四角のまま */ background:var(--bar-flat); transition:height 1.05s var(--ease-out); transition-delay:calc(var(--i,0) * 55ms); } .reveal.is-in .cols__bar{ height:var(--h); } .cols__bar[data-step="1"]{ background:var(--bar-1); } .cols__bar[data-step="2"]{ background:var(--bar-2); } .cols__bar[data-step="3"]{ background:var(--bar-3); } .cols__bar[data-step="4"]{ background:var(--bar-4); } .cols__bar[data-step="5"]{ background:var(--bar-5); } .cols__bar[data-step="6"]{ background:var(--bar-6); } .cols__bar[data-step="7"]{ background:var(--bar-7); } /* ★下の padding が、ラベル（10代／1年未満…）と基準線のすき間になります。 .cols__plot は高さが決まっているので、ここを増やすとラベルが上に寄り、 線との間が空きます（棒の高さはそのぶん縮むので、線を離すときは .cols__plot の height も一緒に増やしてください）。 */ .cols__lab{ padding:12px 0 12px; text-align:center; font-size:13.5px; color:var(--gray); line-height:1.4; white-space:nowrap; } /* 触れたときだけ構成比を出します。人数は常に出ているので、 ここが読めなくても値が分からなくなることはありません。 */ .cols__item::after{ content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% - 26px); transform:translate(-50%,6px); z-index:3; pointer-events:none; padding:7px 12px; border-radius:999px; white-space:nowrap; background:var(--navy); color:var(--white); font-size:11.5px; line-height:1; opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease); } .cols__item:hover::after{ opacity:1; transform:translate(-50%,0); } .cols__item:hover .cols__bar{ filter:saturate(1.15) brightness(.94); } /* ★スマホでは数字とラベルを小さくします（2026-08-14。以前は440px以下だけでした）。 1列あたりの「中身の幅」が小さくなり、7列でもカードに収まります。 */ @media (max-width:768px){ .cols__plot{ gap:4px; } .cols__val{ font-size:16px; } .cols__val i{ display:none; } /* 「名」は上の見出しで分かるので、幅を数字に回します */ .cols__lab{ font-size:11.5px; letter-spacing:-.02em; } } @media (max-width:440px){ .cols__plot{ gap:3px; } .cols__val{ font-size:15px; } .cols__lab{ font-size:11px; } } /* ---- 内訳の横棒グラフ ---- 表（）のまま組んでいます。棒が読めない環境でも、 人数と構成比が数字で並んだ表として読めるようにするためです。 */ .bars{ width:100%; border-collapse:collapse; } .bars thead th{ font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--gray-l); text-align:right; white-space:nowrap; padding:0 0 11px; border-bottom:1px solid var(--line); } .bars thead th:first-child{ text-align:left; } .bars tbody th{ font-weight:500; font-size:15px; text-align:left; color:var(--navy); white-space:nowrap; padding:12px 14px 12px 4px; } .bars td{ padding:12px 0; vertical-align:middle; } .bars tbody tr{ transition:background .25s var(--ease); } .bars tbody tr:hover{ background:var(--sky-l); } /* 棒の列だけ伸び縮みさせ、数字の列は内容ぴったりに固定します。 ★左余白は「td.クラス名」で書くこと。クラス名だけだと上の .bars td に負けて padding が 0 になり、人数と構成比がくっついて見えます。 */ .bars td.bars__c-bar{ width:99%; } .bars td.bars__c-val, .bars td.bars__c-pct{ width:1%; white-space:nowrap; text-align:right; font-family:var(--ff-num); font-variant-numeric:tabular-nums; } .bars td.bars__c-val{ padding-left:20px; font-size:20px; font-weight:700; color:var(--navy); } .bars td.bars__c-val i{ font-style:normal; font-size:13px; font-weight:800; color:var(--dc,var(--blue)); margin-left:3px; } .bars td.bars__c-pct{ padding-left:18px; padding-right:4px; font-size:15px; font-weight:700; color:var(--gray); } .bars thead th:nth-child(3){ padding-left:20px; } .bars thead th:nth-child(4){ padding-left:18px; padding-right:4px; } .bars__track{ display:block; height:14px; border-radius:2px; background:var(--bar-track); } .bars__fill{ display:block; height:100%; width:0; min-width:3px; border-radius:0 4px 4px 0; /* 伸びる先だけ丸め、根元は四角のまま */ background:var(--bar-flat); transition:width 1.05s var(--ease-out); transition-delay:calc(var(--i,0) * 55ms); } .reveal.is-in .bars__fill{ width:var(--w); } /* 順序のないデータ（居住地）は、1行ずつ違うパステルにします。 ★data-step が付いている棒（年代・勤続年数）は対象外です。あちらは 「多い→少ない」を明るさで見せているので、色をばらけさせてはいけません。 */ .bars tbody tr:nth-child(6n+1) .bars__fill:not([data-step]){ background:var(--flat-1); } .bars tbody tr:nth-child(6n+2) .bars__fill:not([data-step]){ background:var(--flat-2); } .bars tbody tr:nth-child(6n+3) .bars__fill:not([data-step]){ background:var(--flat-3); } .bars tbody tr:nth-child(6n+4) .bars__fill:not([data-step]){ background:var(--flat-4); } .bars tbody tr:nth-child(6n+5) .bars__fill:not([data-step]){ background:var(--flat-5); } .bars tbody tr:nth-child(6n) .bars__fill:not([data-step]){ background:var(--flat-6); } .bars__fill[data-step="1"]{ background:var(--bar-1); } .bars__fill[data-step="2"]{ background:var(--bar-2); } .bars__fill[data-step="3"]{ background:var(--bar-3); } .bars__fill[data-step="4"]{ background:var(--bar-4); } .bars__fill[data-step="5"]{ background:var(--bar-5); } .bars__fill[data-step="6"]{ background:var(--bar-6); } .bars__fill[data-step="7"]{ background:var(--bar-7); } /* 画面には出さず、読み上げにだけ残したい見出し */ .u-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* スマホ幅では列の幅を固定します。 ★これが無いと「シビルワーカー（作業班）」のような長い名前に押されて 棒の列が数十pxまで潰れ、グラフとして読めなくなります（実機で確認済み）。 名前は折り返してよいので、棒の幅を先に確保します。 */ @media (max-width:560px){ .bars{ table-layout:fixed; } .bars thead th:nth-child(1){ width:31%; } /* ★数字を大きくしたぶん、列の幅も広げてあります。数字だけ大きくすると 「12名」が2行に折り返します。幅と文字サイズはセットで直してください。 */ .bars thead th:nth-child(3){ width:66px; padding-left:10px; } .bars thead th:nth-child(4){ width:58px; padding-left:8px; } .bars tbody th{ white-space:normal; font-size:13px; padding-right:10px; line-height:1.55; } .bars td.bars__c-val{ font-size:17px; padding-left:10px; } .bars td.bars__c-pct{ font-size:13px; padding-left:8px; } } /* 動きを減らす設定のときは、伸びる演出をやめて最初から実寸で出します */ @media (prefers-reduced-motion:reduce){ .bars__fill,.meter__fill{ transition:none; width:var(--w); } .cols__bar{ transition:none; height:var(--h); } .donut__ring{ transition:none; opacity:1; transform:none; } } /* -------------------------------------------------------------------------- 23-3. LICENSE（資格手当の一覧／recruit.html） -------------------------------------------------------------------------- 分野ごとに4枚のカードへ分け、それぞれ「資格名／月額」の表にしています。 中身は js/main.js が js/site-data.js の licenseList から作ります。 ★資格名の下の小さい文字（）は支給条件です。 「1級土木施工管理技士補」は2級の有無で額が変わるため、これが無いと 同じ資格が2つ並んでいるだけに見えます。消さないでください。 -------------------------------------------------------------------------- */ /* ★4つの分類は、資格の数がそろっていません（5／9／9／6件）。 2列のグリッド（display:grid）にすると、1段目でいちばん高いカードの 下端まで2段目が始められず、件数の少ない分類の下に大きな空きができます。 段組み（columns）にすると、カードが上から順に流れて2列に振り分けられ、 ブラウザが左右の高さがそろうところで折り返します。 ★grid に戻さないでください。分類ごとの件数をそろえない限り、 また同じ空きが出ます（分類は資格の種類なので、数はそろえられません）。 ★break-inside:avoid が無いと、1つの分類が列をまたいで割れます。 */ .lic{ columns:2; column-gap:clamp(16px,2vw,26px); } /* 上のラインの色と、金額の単位（円）の色をセットで持たせます。 データで見る旭建設の他のカード（.dcard / .data__cell）と同じ考え方です。 --dl … 上のラインの色（淡いパステル） --dc … そのカードの中の「円」の文字色（同じ色の濃いほう） */ .lic__group{ background:var(--white); border-radius:8px; padding:clamp(22px,2.5vw,32px); border-top:3px solid var(--dl,var(--c-aqua)); break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:clamp(16px,2vw,26px); } .lic__group:nth-child(1){ --dl:var(--c-aqua); --dc:var(--c-aqua-d); } .lic__group:nth-child(2){ --dl:var(--c-mint); --dc:var(--c-mint-d); } .lic__group:nth-child(3){ --dl:var(--c-lemon); --dc:var(--c-lemon-d); } .lic__group:nth-child(4){ --dl:var(--c-peach); --dc:var(--c-peach-d); } .lic__ttl{ font-size:16px; font-weight:700; letter-spacing:.06em; color:var(--gray); line-height:1.65; margin-bottom:16px; } .lic__table{ width:100%; border-collapse:collapse; } .lic__table thead th{ font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--gray-l); text-align:right; padding:0 0 9px; border-bottom:1px solid var(--line); white-space:nowrap; } .lic__table thead th:first-child{ text-align:left; } .lic__table tbody th{ text-align:left; font-weight:500; font-size:14px; color:var(--navy); padding:11px 14px 11px 2px; line-height:1.55; } /* 支給条件。資格名のすぐ下に小さく置きます */ .lic__table tbody th em{ display:block; margin-top:3px; font-style:normal; font-size:11.5px; color:var(--gray); line-height:1.5; } .lic__table td{ width:1%; white-space:nowrap; text-align:right; padding:11px 2px 11px 14px; font-family:var(--ff-num); font-variant-numeric:tabular-nums; } /* ★このページの主役は金額です。資格名（14px）より一段大きくして、 行の中で先に目に入るようにしています。小さくしないでください。 数え上がる途中で桁が増えても行がずれないよう、 上の td で font-variant-numeric:tabular-nums を掛けています。 */ .lic__table td b{ font-size:clamp(19px,1.9vw,24px); font-weight:700; line-height:1.15; letter-spacing:.005em; color:var(--blue); } .lic__table td i{ font-style:normal; font-size:12.5px; font-weight:800; color:var(--dc,var(--blue)); margin-left:4px; } .lic__table tbody tr{ transition:background .25s var(--ease); } .lic__table tbody tr:hover{ background:var(--sky-l); } .lic__table tbody tr + tr th, .lic__table tbody tr + tr td{ border-top:1px solid var(--line); } @media (max-width:900px){ .lic{ columns:1; } } @media (max-width:420px){ .lic__table tbody th{ font-size:13px; } .lic__table td b{ font-size:18px; } } /* -------------------------------------------------------------------------- 24. ENVIRONMENT -------------------------------------------------------------------------- */ .env__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); } .env__box{ background:var(--white); border-radius:8px; padding:clamp(22px,2.4vw,32px); } .env__box h3{ font-size:16px; font-weight:900; padding-bottom:16px; border-bottom:2px solid var(--cyan); } .env__box li{ padding:15px 0; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.9; color:var(--gray); } .env__box li:last-child{ border-bottom:0; } .env__box b{ display:block; font-size:14.5px; color:var(--navy); font-weight:700; margin-bottom:3px; } .env__honest{ margin-top:clamp(26px,3vw,42px); background:var(--white); border-left:4px solid var(--navy); border-radius:0 8px 8px 0; padding:clamp(24px,3vw,40px); } .env__honest h3{ font-size:17px; font-weight:900; margin-bottom:14px; } .env__honest p{ font-size:14.5px; line-height:2.1; color:var(--gray); } .env__honest a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; } /* ★margin-top は「上に別の箱（休日・時間／お金・手当…の4枚）が並んでいた頃」の 名残です。セクションの先頭に来るときは、セクション自身の上余白と二重に なって離れすぎるので、下の :first-child で打ち消します。 */ .env__local{ margin-top:clamp(40px,5vw,76px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); align-items:center; } /* 見出しを左カラムに入れて、写真を見出しの高さから始めるパターン。 （people.html「距離が近いから」で使用。インタビュー欄と同じ、 写真がタイトルの横に来る見え方に揃えるため） ・見出しがカラム内に入るので、上の余白は不要 → margin-top を消す ・写真をタイトルの高さに合わせたいので、中央揃えではなく上揃えにする */ .env__local--head{ margin-top:0; align-items:start; } /* セクションの先頭に来るとき（募集要項ページの LOCAL LIFE）は上の余白を持たせません */ .sec > .env__local:first-child{ margin-top:0; } .env__local--head .sec__head{ margin-bottom:clamp(22px,2.6vw,34px); } /* 見出しが本文幅いっぱいではなく半分の幅に入るので、そのままの文字サイズだと 「任される仕事は大き／い。」のように不自然に折り返す。カラム幅に合わせて少し小さくする。 */ .env__local--head .sec__ttl{ font-size:clamp(24px,3.1vw,40px); } .env__local-en{ font-family:var(--ff-en); font-size:11px; font-weight:800; letter-spacing:.2em; color:var(--cyan); } .env__local-txt h3{ margin:14px 0 20px; font-size:clamp(22px,2.8vw,36px); font-weight:900; line-height:1.42; font-feature-settings:"palt"; } .env__local-txt p{ font-size:14.5px; line-height:2.1; color:var(--gray); } .env__local-list{ margin-top:26px; display:grid; gap:11px; } .env__local-list li{ position:relative; padding-left:26px; font-size:14px; } .env__local-list li::before{ content:""; position:absolute; left:2px; top:.55em; width:11px; height:6px; border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan); transform:rotate(-45deg); } .env__local-img{ aspect-ratio:4/3; border-radius:8px; } @media (max-width:1100px){ .env__grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .env__grid,.env__local{ grid-template-columns:1fr; } } /* -------------------------------------------------------------------------- 25. REQUIREMENTS -------------------------------------------------------------------------- */ /* 新卒／中途の切り替え。見た目は仕事紹介のタブ（.job__tab）にそろえていますが、 .job__panel は「写真＋文章」の2カラム前提なので、 表1枚を全幅で出す募集要項には使えません。そのため別に用意しています。 */ /* ★募集要項は、ほかのセクション（本文幅 1400px）より狭くしています。 ここだけ「表の1行に長い文章が丸ごと入る」ので、1400px いっぱいだと 1行が長くなりすぎて目が戻れません。読みやすい行長で頭打ちにします。 見出し（.sec__head）も同じ幅にそろえないと、左端がずれて見えます。 recruit.html の #requirements にだけ効かせています。 */ #requirements>*{ max-width:1080px; } /* --- 新卒／中途の切り替え ----------------------------------------------- ★このサイトでいちばん大事な分かれ道です。ここで選んだほうだけが、 募集要項もエントリーも表示されます（新卒を見ている人に、中途の エントリーフォームは出ません）。だから「いま自分はどちらを見ているか」が ひと目で分かるように、次の3つで強い差を付けています。 ・2つを画面幅いっぱいの大きな面にする ・選んでいるほうだけ面の色を変え、「選択中」の札を出す ・選んでいないほうは白い面のまま、文字も薄くする ★太さは 500 のままです。日本語は太くすると画数の多い字が潰れて ぼってり見えるので、目立たせるのは大きさ・面の色・余白で行います。 700 以上に上げないでください。英字（NEW GRADUATE / CAREER）だけは 小さいので 800 にしています。 */ /* 選ぶ前の呼びかけ。ページを開いた時点では、この呼びかけと下の2つの面だけが 出ています（募集要項もエントリーフォームも、選ぶまで出しません）。 */ /* ★「募集要項」の見出しのすぐ下に続く説明文なので、見出しとの間は 他のセクションの説明文（.sec__lead の margin-top:22px）と同じにします。 ふつうの .sec__head の下余白（最大74px）のままだと離れすぎます。 */ #requirements .sec__head{ margin-bottom:22px; } /* ★呼びかけと下の2つの面は、ひとつの「選択画面」として中央にそろえます （表や文章の左ぞろえとは別扱いです。左に寄せ直さないでください）。 */ .rchoose{ margin-bottom:20px; text-align:center; font-size:16px; font-weight:500; letter-spacing:.06em; color:var(--navy); } .rchoose span{ display:block; margin-top:7px; font-size:13px; font-weight:400; color:var(--gray); } /* ★2つの面は正方形に近い形にしています。 以前は 1fr ずつで横幅いっぱい（1枚530px×高さ130px）に伸びていて、 横長すぎました。列の幅を決め打ちし、下の aspect-ratio で 縦横を同じにしています。1fr に戻すとまた横長になります。 ★justify-content:center で、2枚を欄の中央に置いています。 */ .rtabs{ display:grid; grid-template-columns:repeat(2,clamp(240px,30vw,340px)); justify-content:center; gap:clamp(12px,1.6vw,20px); margin-bottom:clamp(26px,3.4vw,42px); } /* まだどちらも選ばれていないときは、2つとも同じ強さで見せます （選択中の面が出るのは、押されたあとだけです） */ /* 正方形なので、中身は縦も横も中央にそろえます */ .rtab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; aspect-ratio:1/1; padding:clamp(18px,2.2vw,28px); border-radius:12px; border:1.5px solid var(--line); background:var(--white); text-align:center; cursor:pointer; transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .rtab i{ font-family:var(--ff-en); font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.18em; color:var(--gray-l); transition:color .35s var(--ease); } .rtab b{ font-size:clamp(21px,2.6vw,30px); font-weight:500; letter-spacing:.08em; line-height:1.4; color:var(--gray); transition:color .35s var(--ease); } .rtab span{ font-size:13px; font-weight:400; line-height:1.85; color:var(--gray-l); transition:color .35s var(--ease); } .rtab:hover{ transform:translateY(-2px); border-color:var(--cyan-p); } /* 選んでいるほう。面の色を変え、右上に「選択中」の札を出します */ .rtab.is-active{ background:linear-gradient(120deg,var(--cyan-p) 0%,var(--sky-d) 100%); border-color:transparent; box-shadow:0 14px 30px -20px rgba(0,192,240,.9); } .rtab.is-active i{ color:var(--blue); } .rtab.is-active b{ color:var(--navy); } .rtab.is-active span{ color:var(--navy); opacity:.72; } .rtab.is-active::after{ content:"選択中"; position:absolute; top:12px; right:14px; padding:4px 11px; border-radius:999px; background:var(--white); font-size:10.5px; font-weight:500; letter-spacing:.08em; color:var(--blue); } /* --- 選ぶタブも、エントリー欄のカードと同じ見た目にそろえます ------------- ここは募集要項ページ（recruit.html）の「採用区分をお選びください」です。 各ページ下の「あなたのエントリーを、お待ちしています。」のカード （.rtabs--link）と、線・角丸・色の出し方を同じにしています。 ・面は白のまま。地色にパステルを敷きません。 ・枠は4辺とも同じ色・同じ太さの単色（2px）。 ・色は新卒＝アクア／中途＝ピーチ。英字と枠だけで出します。 ★違いは「選んだ状態（.is-active）」があることだけです。 選んだほうは、枠を濃いほうの色にして、うっすら地色を敷き、 右上に「選択中」の札を出します。押せる／押した の差がここで出ます。 ★片方だけ直すと、ページを移ったとき見た目が変わります。 .rtabs--link 側と必ずセットで直してください。 */ .rtabs:not(.rtabs--link) .rtab:nth-child(1){ --dl:var(--c-aqua); --dc:var(--c-aqua-d); } .rtabs:not(.rtabs--link) .rtab:nth-child(2){ --dl:var(--c-peach); --dc:var(--c-peach-d); } .rtabs:not(.rtabs--link) .rtab{ border:2px solid color-mix(in srgb, var(--dl) 85%, white); border-radius:14px; background:var(--white); box-shadow:0 2px 3px -2px rgba(6,38,63,.10); transition:transform .45s var(--ease), box-shadow .5s var(--ease), border-color .45s var(--ease), background .45s var(--ease); } /* 選ぶ前でも、名前は紺のままにします（灰色にすると「押せない」ように見えます）。 どちらを選んでいるかは、下の .is-active の枠と札で示します。 */ .rtabs:not(.rtabs--link) .rtab i{ color:var(--dc,var(--blue)); } .rtabs:not(.rtabs--link) .rtab b{ color:var(--navy); } .rtabs:not(.rtabs--link) .rtab:hover{ transform:translateY(-6px); border-color:var(--dc); box-shadow:0 30px 50px -30px color-mix(in srgb, var(--dc) 62%, transparent); } /* 選んだほう。水色のグラデーションで塗りつぶすのはやめました（2026-08-14）。 枠を濃い色にして、地色はごく薄く敷くだけにしています。 */ .rtabs:not(.rtabs--link) .rtab.is-active{ border-color:var(--dc); background:color-mix(in srgb, var(--dl) 14%, white); box-shadow:0 22px 40px -28px color-mix(in srgb, var(--dc) 62%, transparent); } .rtabs:not(.rtabs--link) .rtab.is-active i{ color:var(--dc); } .rtabs:not(.rtabs--link) .rtab.is-active b{ color:var(--navy); } .rtabs:not(.rtabs--link) .rtab.is-active span{ color:var(--gray); opacity:1; } /* 「選択中」の札も、その面の色にそろえます */ .rtabs:not(.rtabs--link) .rtab.is-active::after{ background:var(--dc); color:var(--white); } /* --- リンクとして使う版（.rtabs--link） ------------------------------- 「あなたのエントリーを、お待ちしています。」の下に置いている2つの面です。 トップページ（index.html の #entry）と、下層ページのフッター （js/layout.js が組み立てる .footer__cta）の両方で使います。 募集要項ページの「採用区分をお選びください」と同じ形にそろえてあります。 ★違いは「押すと recruit.html へ移動する」ことだけなので、 下向きの矢印つきの1行（.rtab__go）を足して、リンクだと分かるようにしています。 ★選ぶタブではないので、is-active は付きません。 */ .rtabs--link{ margin-top:clamp(34px,4.4vw,52px); margin-bottom:0; } /* リンク版の矢印。線の引き方だけここで決めます （丸い形と色は、下の「アクセント」の .rtabs--link .rtab__go svg 側です）。 */ .rtab__go{ display:inline-flex; align-items:center; } .rtab__go svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* リンク版は押せることを先に伝えたいので、名前の色は最初から濃くしておきます （タブ版は「選んでいないほう」を薄く見せるため、あえて灰色にしています）。 */ .rtabs--link .rtab b{ color:var(--navy); } /* --- アクセント（新卒＝アクア／中途＝ピーチ）-------------------------- ★これまで2回、色で飾る方向（上に太い帯／面に色を敷く／角から光をにじませる） を試しましたが、どちらも安っぽいという指摘でした（2026-08-13）。 3案目のいまは「色で飾らない」方針にしています。 ・面は白のまま。地色にパステルを敷きません。 ・色は【枠線の細いグラデーション】と【丸い矢印ボタン】の2か所だけ。 ・押せることは、色ではなく形（丸いボタン）と動きで伝えます。 ★枠線は border-color では描けません（1本の線に色を流せないため）。 padding-box と border-box の2枚重ねで、内側は白、枠だけ グラデーションにしています。border-image と違い、角丸が保たれます。 ★面を塗る・帯を足す・札を付けるのは、いずれも過去に却下されています。 戻さないでください。 */ .rtabs--link .rtab:nth-child(1){ --dl:var(--c-aqua); --dc:var(--c-aqua-d); } .rtabs--link .rtab:nth-child(2){ --dl:var(--c-peach); --dc:var(--c-peach-d); } .rtabs--link .rtab{ /* ★線はほんの少しだけ厚くしています（1.5px→2px）。 3px 以上にすると、白い面に対して線が主役になって重く見えます。 ★以前は枠をグラデーションにしていましたが、辺ごとに色が変わって見え、 上と下で違う色に見えるという指摘がありました（2026-08-14）。 いまは4辺とも同じ色・同じ太さの単色です。グラデーションに戻さないでください。 */ border:2px solid color-mix(in srgb, var(--dl) 85%, white); border-radius:14px; background:var(--white); box-shadow:0 2px 3px -2px rgba(6,38,63,.10); transition:transform .45s var(--ease), box-shadow .5s var(--ease), border-color .45s var(--ease); } .rtabs--link .rtab:hover{ transform:translateY(-6px); /* ★border-color は必ずここで指定します。書かないと、上にある .rtab:hover の border-color（薄い水色）が効いてしまい、 中途（オレンジ）まで水色の枠になります。消さないでください。 */ border-color:var(--dc); box-shadow:0 30px 50px -30px color-mix(in srgb, var(--dc) 62%, transparent); } /* 英字（NEW GRADUATE / CAREER）。飾りは付けず、字間だけで見せます */ .rtabs--link .rtab i{ color:var(--dc,var(--blue)); } /* --- 丸い矢印ボタン --------------------------------------------------- ★以前の「うっすら水色の楕円に文字を入れた札」から変えました。 文字は地の色のまま小さく置き、矢印だけを丸で囲みます。 押す場所が丸ひとつに定まるので、視線の止まる場所がはっきりします。 ★丸の大きさ（38px）は指で押せる下限に近い寸法です。小さくしないでください。 */ /* ★2026-08-15、CTAカードの «丸い矢印つきの1行»（.rtab__go）は HTML から外しました。 トップページのカードを、募集要項ページのカードと同じ見た目にそろえるためです （違いはこの1行だけで、枠・角丸・影・余白・文字の大きさは元から同じでした）。 ★下の指定はどこからも使われていませんが、戻すときのために残してあります。 戻すときは page-templates/recruit-index.php と js/layout.js の両方に … を書き足してください。 ★引き換えに «押せること» を伝える手がかりが減っています。 カード全体がリンクなので、カーソルを乗せたときの浮き上がりだけが合図です。 */ .rtabs--link .rtab__go{ display:inline-flex; align-items:center; line-height:1; margin-top:6px; padding:0; gap:12px; background:none; border:0; box-shadow:none; /* は既定で斜体になるので、必ず normal に戻します */ font-style:normal; color:var(--gray); font-size:12.5px; font-weight:500; letter-spacing:.04em; } .rtabs--link .rtab__go svg{ box-sizing:border-box; width:38px; height:38px; padding:11px; flex:none; border-radius:50%; color:var(--navy); background:linear-gradient(140deg, var(--dl) 0%, color-mix(in srgb, var(--dl) 42%, white) 100%); transition:transform .45s var(--ease), box-shadow .45s var(--ease); } .rtabs--link .rtab:hover .rtab__go{ background:none; border:0; color:var(--navy); } .rtabs--link .rtab:hover .rtab__go svg{ transform:translateX(4px) scale(1.06); box-shadow:0 10px 20px -10px color-mix(in srgb, var(--dc) 75%, transparent); } /* スマホでも2つ並べたままにします（1列にすると、正方形のぶん縦に長くなりすぎます）。 幅は画面に合わせて詰め、余白と文字だけ小さくします。 */ @media (max-width:560px){ .rtabs{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .rtab{ padding:15px 12px; gap:7px; } .rtab i{ font-size:10px; letter-spacing:.12em; } .rtab b{ font-size:17px; } .rtab span{ font-size:11.5px; line-height:1.7; } .rtab.is-active::after{ top:9px; right:10px; padding:3px 8px; font-size:9.5px; } /* 丸い矢印ボタンは、狭い画面では文字を出さず丸だけにします （文字を入れると2行に折れて面をはみ出します）。 */ .rtab__go{ padding:0; font-size:0; gap:0; } .rtab__go svg{ width:34px; height:34px; padding:10px; } } /* パネルの先頭に置く「いま見ているほう」の帯。タブと同じ言葉を繰り返して、 スクロールで見出しが画面から消えたあとでも分かるようにしています。 */ .rpanel__now{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(18px,2.2vw,26px); font-size:14px; font-weight:500; letter-spacing:.06em; color:var(--navy); } .rpanel__now::before{ content:""; width:22px; height:2px; border-radius:2px; flex:none; background:linear-gradient(90deg,var(--cyan) 0%,var(--sky-d) 100%); } .rpanel__now i{ font-family:var(--ff-en); font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.18em; color:var(--blue); } /* エントリー欄はページ全体が中央ぞろえなので、中身は左ぞろえに戻します。 ★以前はこの上に見出し（ENTRY／未来を一緒に創る仲間へ。）があったので 上に余白を取っていました。見出しを外したので 0 にしています。 ★幅はフォーム本体（.eform の 760px）と同じにしています。 ここだけ広げると、中のフォームが左に寄って見えます。 */ .entry__tabs{ max-width:760px; margin:0 auto; text-align:left; } /* 新卒を選んだとき・まだ選んでいないときは、この欄の中身が 問い合わせ先の1行だけになります。そのままだと上下が空きすぎるので、 フォームが出ていないときだけ余白を詰めます。上は、すぐ上にある マイナビの帯とつなげて読ませたいので、多めに詰めています。 （:has が使えない古いブラウザでは、今までどおりの余白のままです） */ .entry:not(:has(.rpanel.is-active)){ padding-top:clamp(14px,1.8vw,28px); padding-bottom:clamp(44px,5.5vw,80px); } .entry:not(:has(.rpanel.is-active)) .entry__contact{ margin-top:0; } .entry__formlead{ margin-bottom:6px; font-size:14px; line-height:2.05; color:var(--navy); } /* ★以前はここで .entry__tabs .eform{ margin-inline:0 } と左に寄せていました。 いまは入れ物（.entry__tabs）の幅をフォームと同じ 760px にしたので、 寄せる必要がありません。足すと右側だけ余白が空いて左に寄って見えます。 */ /* エントリー欄の新卒側は、カードが1枚だけなので幅を絞ります */ .route--solo{ grid-template-columns:minmax(0,1fr); max-width:560px; margin-top:0; } /* 募集要項の表の下に置く、新卒のエントリー入口（マイナビ）。 表とくっついて見えないよう、上に線を1本引いて離しています。 */ .rentry{ margin-top:clamp(34px,4.4vw,54px); padding-top:clamp(30px,3.8vw,46px); border-top:1px solid var(--line); } /* 募集要項セクションの下は、すぐ次に「エントリーフォーム（中途）」や 「問い合わせ先（新卒）」が続きます。話がつながっているので、 ふつうのセクションの下余白（最大150px）ほどは空けません。 ★上の .entry の padding-top と2つでひと組です。 */ body[data-page="recruit"] #requirements{ padding-bottom:clamp(36px,4.6vw,72px); } .rpanel{ display:none; } /* panelIn は仕事紹介のタブと共用のキーフレームです */ .rpanel.is-active{ display:block; animation:panelIn .6s var(--ease-out); } /* マイナビの帯（新卒の募集要項のいちばん下＝.rentry の中）。 ★横長です。ロゴ／説明／エントリーボタンを横一列に並べます。 縦長のカード（.route__card）に戻さないでください。 ロゴは images/mynavi.png（554×140px＝横長の約4:1）。 height だけ指定して width:auto にしているので、比率は崩れません。 */ .mynavi{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(16px,2.6vw,36px); padding:clamp(22px,3vw,32px) clamp(24px,3.4vw,40px); background:var(--white); border:1.5px solid var(--line); border-radius:10px; transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .mynavi:hover{ border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 18px 40px -28px rgba(6,38,63,.45); } .mynavi__logo{ height:clamp(28px,3.2vw,42px); width:auto; flex:none; } .mynavi__body{ flex:1 1 240px; } .mynavi__ttl{ display:block; font-size:clamp(15px,1.7vw,19px); font-weight:700; line-height:1.6; color:var(--navy); } .mynavi__txt{ display:block; margin-top:6px; font-size:13px; line-height:1.9; color:var(--gray); } /* エントリーのボタン。 ★水色のグラデーション＋青く光る影だと、帯の中でここだけが強く浮きます。 「あなたのエントリーを、お待ちしています。」の面のボタン（.rtab__go）と 同じ、うっすらした面と細い線だけにそろえています。 カーソルを乗せたときだけ、少し色が付きます。 */ .mynavi__go{ display:inline-flex; align-items:center; gap:9px; flex:none; padding:12px 22px; border-radius:999px; background:var(--sky-l); border:1px solid var(--line); color:var(--gray); font-size:13px; font-weight:500; letter-spacing:.04em; transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .mynavi:hover .mynavi__go{ background:var(--sky); border-color:var(--cyan-p); color:var(--navy); } .mynavi__go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); } .mynavi:hover .mynavi__go svg{ transform:translateX(5px); } @media (max-width:600px){ .mynavi{ gap:16px; } .mynavi__go{ width:100%; justify-content:center; } } /* 未入力の注意書き。公開前に気づけるよう、あえて目立たせています。 ★中途採用の条件が入ったので、いまは使っている箇所がありません。 また「未入力です」と出したい場面のために、指定だけ残してあります。 */ .req__todo{ margin-bottom:20px; padding:16px 22px; border-radius:8px; background:#fff6e0; border:1.5px dashed #e0a83c; color:#7a5510; font-size:13.5px; line-height:1.95; } .req__table{ background:var(--white); border-radius:8px; overflow:hidden; } .req__table th,.req__table td{ text-align:left; vertical-align:top; padding:24px 22px; border-bottom:1px solid var(--line); font-size:14.5px; line-height:2; } .req__table th{ width:210px; font-weight:700; background:var(--sky-l); color:var(--blue); } .req__table td b{ font-family:var(--ff-en); font-size:19px; color:var(--blue); } /* ★display:block です。inline-block だと、前の文に続けて同じ行に並んでしまい （例：「8:00〜17:00（休憩90分／実働7時間30分） 休憩は10:00に…」）、 本文と但し書きの区別がつきません。必ず改行させてください。 */ .req__table small{ display:block; margin-top:6px; font-size:12px; color:var(--gray-l); line-height:1.8; } /* 初任給の一覧。学歴名の長さが違っても金額の左端が揃うよう、2列の grid にしています。 1列目は max-content なので、いちばん長い学歴名（短大・専門・高専卒）に自動で合わせます。 */ .salary{ display:grid; grid-template-columns:max-content 1fr; column-gap:1.4em; row-gap:2px; align-items:baseline; } .salary dt{ white-space:nowrap; } .salary dd{ margin:0; } .req__parent{ margin-top:clamp(30px,3.6vw,52px); color:var(--white); border-radius:10px; padding:clamp(28px,3.4vw,52px); background:linear-gradient(140deg,var(--deep) 0%,var(--deep-2) 100%); } .req__parent h3{ font-size:clamp(18px,2vw,25px); font-weight:900; margin-bottom:16px; } .req__parent p{ font-size:14.5px; line-height:2.15; color:rgba(255,255,255,.88); margin-bottom:26px; max-width:78ch; } .req__parent .btn--line{ border-color:rgba(255,255,255,.5); color:var(--white); } .req__parent .btn--line::before{ background:var(--white); } .req__parent .btn--line:hover{ color:var(--navy); border-color:var(--white); } @media (max-width:768px){ .req__table th,.req__table td{ display:block; width:auto; padding:14px 18px; border-bottom:0; } .req__table tr{ display:block; border-bottom:1px solid var(--line); } } /* -------------------------------------------------------------------------- 26. FAQ -------------------------------------------------------------------------- */ .faq{ display:grid; gap:clamp(28px,3.4vw,50px); max-width:1000px; } .faq__cat{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--navy); padding:8px 18px; border-radius:999px; background:var(--cyan); margin-bottom:10px; } .acc{ border-bottom:1px solid var(--line); } .acc__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; text-align:left; font-size:15.5px; font-weight:700; line-height:1.7; transition:color .35s var(--ease); } .acc__q:hover{ color:var(--blue); } .acc__q i{ position:relative; width:22px; height:22px; flex:none; } .acc__q i::before,.acc__q i::after{ content:""; position:absolute; left:50%; top:50%; background:var(--blue); transform:translate(-50%,-50%); transition:transform .45s var(--ease); } .acc__q i::before{ width:16px; height:2px; } .acc__q i::after{ width:2px; height:16px; } .acc.is-open .acc__q i::after{ transform:translate(-50%,-50%) rotate(90deg); } .acc__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease-out); } .acc.is-open .acc__a{ grid-template-rows:1fr; } .acc__a>p{ overflow:hidden; font-size:14.5px; line-height:2.1; color:var(--gray); } .acc.is-open .acc__a>p{ padding-bottom:26px; } /* -------------------------------------------------------------------------- 28. ENTRY -------------------------------------------------------------------------- */ /* 他ページの CONTACT（.footer__cta）と同じ見た目にそろえています。 面の色は置かず、ページ全体の背景（.bg）をそのまま透かし、 見出しは青（--blue）。以前はここに虹色の丸（.entry__blob）を 回していましたが、このセクションだけ配色が浮くため取りやめました。 ※片方だけ直すとずれるので、変えるときは .footer__cta もあわせてください。 */ .entry{ position:relative; text-align:center; color:var(--navy); padding:clamp(70px,9.5vw,150px) var(--pad); background:transparent; } /* ★募集要項ページでは、この欄は「募集要項の続き」です（間に見出しがありません）。 中途ならエントリーフォーム、新卒なら問い合わせ先が、そのまま続きます。 上の余白を section と同じだけ取ると離れすぎるので、上だけ詰めます。 下の余白は、次の「よくある質問」との間なので、そのままです。 ★募集要項セクション側の下余白（下の #requirements の行）と2つで ひと組の間隔です。片方だけ変えると、詰めたつもりが変わりません。 */ body[data-page="recruit"] .entry{ padding-top:clamp(18px,2.4vw,38px); } .entry__inner{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; } .entry__en{ font-family:var(--ff-en); font-size:12px; font-weight:800; letter-spacing:.28em; color:var(--blue); margin-bottom:22px; } .entry__ttl{ font-size:clamp(28px,5vw,66px); font-weight:900; line-height:1.32; color:var(--blue); font-feature-settings:"palt"; } /* max-width の ch は半角文字の幅が基準。和文は約2ch なので、 1行 34 文字を折り返さずに収めるには 68ch 以上が必要です。 62ch のままだと
の前でさらに折り返され、3行になります。 */ .entry__lead{ margin:28px auto 0; max-width:72ch; font-size:15px; line-height:2.15; color:var(--navy); } .entry__btns{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:44px; } /* 他の ENTRY ボタンと表記・見た目をそろえます。 左の余白を「矢印の幅＋間隔」だけ広げているのは、右にある矢印のぶん 文字が左に寄って見えるのを打ち消すためです（他の ENTRY ボタンと同じ処理）。 */ .entry__btns .btn{ font-family:var(--ff-en); font-weight:800; letter-spacing:.16em; padding-left:calc(46px + 18px + 14px); } /* エントリー欄の下の連絡先。ページの終わりでこれだけが残る場面があるので、 13px では小さすぎました。本文と同じくらいの大きさにしています。 電話番号はいちばん読ませたいので、さらに一段大きくしています （日本語の小さい字なので、太さは 500 までにとどめます）。 */ .entry__contact{ margin-top:48px; font-size:15px; color:var(--gray); line-height:2.1; } .entry__contact-tel{ margin-top:6px; font-size:clamp(16px,1.9vw,20px); font-weight:500; color:var(--navy); } .entry__contact a{ color:var(--navy); border-bottom:1px solid rgba(6,38,63,.35); font-family:var(--ff-en); letter-spacing:.04em; } /* -------------------------------------------------------------------------- 29. FOOTER -------------------------------------------------------------------------- */ /* 背景はページ全体のもの（.bg）をそのまま透かします。 面の色を入れると、フッターの手前だけ色が変わって見えます。 */ /* 大きな英字（.footer__big）は幅からはみ出すので overflow:hidden で切ります */ .footer{ position:relative; z-index:2; background:transparent; overflow:hidden; } /* ★トップページの CONTACT（index.html の #entry／css/top.css の .contact__*）と 同じ形にそろえています。面の色もポリゴンも置かず、ページ全体の背景 （.bg）がそのまま見える状態にしています。 片方だけ直すと見た目がずれるので、変えるときは top.css 側もあわせてください。 */ .footer__cta{ position:relative; text-align:center; color:var(--navy); padding:clamp(70px,9.5vw,150px) var(--pad); background:transparent; } .footer__cta-inner{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; } .footer__cta-en{ font-family:var(--ff-en); font-size:12px; font-weight:800; letter-spacing:.28em; color:var(--blue); margin-bottom:22px; } .footer__cta-ttl{ font-size:clamp(27px,4.6vw,58px); font-weight:900; line-height:1.34; color:var(--blue); font-feature-settings:"palt"; } /* 1行で見せたいので折り返しを止めます（幅の上限も外します）。 ただし狭い画面では横にはみ出すため、下のメディアクエリで折り返しを戻します。 */ .footer__cta-lead{ margin:26px auto 0; max-width:none; white-space:nowrap; font-size:15px; line-height:2.15; color:var(--navy); } @media (max-width:620px){ .footer__cta-lead{ white-space:normal; max-width:36ch; } } .footer__cta-btns{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:48px; } /* ボタンは1つだけなので、中央にそろえて大きく見せます （トップページの .contact__act .btn--lg と同じ寸法）。 ラベルが英字なので欧文フォントを当てています。 */ .footer__cta-btns .btn{ justify-content:center; min-width:min(420px,86vw); padding:30px 56px; font-size:17px; font-family:var(--ff-en); font-weight:800; letter-spacing:.2em; } /* 狭い画面では、ボタンを画面幅いっぱいに広げます */ @media (max-width:900px){ .footer__cta-btns .btn{ width:100%; min-width:0; padding-inline:24px; } } .footer__cta-note{ margin-top:40px; font-size:13px; color:var(--gray); } .footer__cta-note a{ color:var(--navy); margin-left:10px; border-bottom:1px solid rgba(6,38,63,.35); font-family:var(--ff-en); font-size:15px; } /* スマホは改行して電話番号を次の行に出すので、左の余白は不要（あると字下げに見える） */ @media (max-width:767px){ .footer__cta-note a{ margin-left:0; display:inline-block; margin-top:6px; } } /* --- エントリーの入口（新卒＝マイナビ／中途＝エントリーフォーム）---------- 白いカードを2枚、横に並べます。カードの中身は上から ラベル（新卒採用／中途採用）→ 目印（マイナビのロゴ／ENTRY FORM の英字） → 見出し → 説明 → ボタン の順です。目印の高さを決め打ちにしているのは、ロゴのある側とない側で 見出しの位置がずれないようにするためです。ボタンは card の下端にそろえます。 ★2026-08-13 現在、この .route 一式を使っている場所はありません。 ・募集要項ページの新卒のマイナビ … 横長の帯（.mynavi）に変えました ・各ページの「あなたのエントリーを、お待ちしています。」 … 正方形の2つの面（.rtabs / .rtab）に変えました 横長のカードをまた使いたくなったときのために残してあります。 不要と判断したら、この段落ごと消して構いません （css/top.css の同じ指定は削除済みです）。 */ .route{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,26px); margin:clamp(38px,4.6vw,58px) auto 0; max-width:1020px; text-align:left; } .route__card{ display:flex; flex-direction:column; align-items:flex-start; padding:clamp(24px,2.8vw,36px); border-radius:12px; background:var(--white); border:1.5px solid var(--line); text-decoration:none; transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .route__card:hover{ border-color:var(--cyan); transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(6,38,63,.45); } /* 「新卒採用」「中途採用」の札。日本語の小さい字なので太さは500です */ .route__label{ padding:5px 13px; border-radius:999px; background:var(--sky-l); font-size:11.5px; font-weight:500; letter-spacing:.12em; color:var(--blue); } /* 目印。高さを決めて、2枚のカードで見出しの高さをそろえます */ .route__mark{ display:flex; align-items:center; height:clamp(28px,3.2vw,40px); margin:20px 0 15px; } .route__mark img{ height:100%; width:auto; display:block; } .route__mark i{ font-family:var(--ff-en); font-style:normal; font-size:clamp(15px,1.7vw,20px); font-weight:800; letter-spacing:.16em; color:var(--blue); opacity:.6; } .route__ttl{ font-size:clamp(15px,1.7vw,19px); font-weight:700; line-height:1.7; color:var(--navy); } .route__txt{ margin:10px 0 26px; font-size:13px; line-height:1.95; color:var(--gray); } /* ボタン。カードの下端にそろえます（margin-top:auto） */ .route__go{ align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px; background:linear-gradient(120deg,var(--sky) 0%,var(--cyan-p) 100%); border:1px solid rgba(0,192,240,.35); color:var(--navy); font-size:13px; font-weight:700; letter-spacing:.04em; box-shadow:0 8px 22px -14px rgba(0,192,240,.6); transition:box-shadow .35s var(--ease), border-color .35s var(--ease); } .route__card:hover .route__go{ border-color:rgba(0,192,240,.6); box-shadow:0 12px 26px -14px rgba(0,192,240,.8); } .route__go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); } .route__card:hover .route__go svg{ transform:translateX(5px); } /* 狭い画面では2枚を縦に積みます */ @media (max-width:760px){ .route{ grid-template-columns:1fr; } .route__go{ width:100%; justify-content:center; } } /* -------------------------------------------------------------------------- 中途採用エントリーフォーム（recruit.html の #entry-form） ★送信（メール送信）の設定はこれから行います。いまは js/main.js が 入力内容と添付を確かめて、「送信の設定はこれからです」と案内するだけです。 -------------------------------------------------------------------------- */ .eform{ max-width:760px; margin:clamp(30px,4vw,48px) auto 0; } .eform__row{ margin-bottom:22px; } /* 日本語の小さい字なので、ラベルの太さは500です（700 にすると重く見えます） */ .eform__label{ display:block; margin-bottom:9px; font-size:13.5px; font-weight:500; letter-spacing:.04em; color:var(--navy); } .eform__req{ display:inline-block; margin-left:9px; padding:3px 9px; border-radius:4px; background:#ffe9f1; color:var(--c-pink-d); font-size:10.5px; font-weight:500; letter-spacing:.08em; } .eform__input{ width:100%; padding:14px 16px; border-radius:8px; border:1.5px solid var(--line); background:var(--white); font:inherit; font-size:15px; color:var(--navy); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .eform__input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(0,192,240,.14); } .eform__textarea{ resize:vertical; line-height:1.9; } /* 添付欄。点線の枠にして「ファイルを入れるところ」だと分かるようにしています */ .eform__file{ width:100%; padding:12px 14px; border-radius:8px; border:1.5px dashed var(--line); background:var(--white); font:inherit; font-size:13.5px; color:var(--navy); } /* ★「ファイルを選択」は、送信ボタンほど目立たせません。 水色のグラデーションだと、本当に押してほしい送信ボタンと同じ強さになり、 どちらが最後の操作か分かりにくくなります。白地に細い線だけにしています。 */ .eform__file::file-selector-button{ margin-right:14px; padding:9px 17px; border-radius:999px; cursor:pointer; border:1px solid var(--line); background:var(--white); color:var(--gray); font:inherit; font-size:12.5px; font-weight:500; transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); } .eform__file:hover::file-selector-button{ border-color:var(--cyan-p); color:var(--navy); background:var(--sky-l); } .eform__help{ margin-top:8px; font-size:12px; line-height:1.9; color:var(--gray); } .eform__agree{ display:flex; align-items:flex-start; gap:11px; margin-top:30px; font-size:13.5px; line-height:1.9; color:var(--navy); cursor:pointer; } .eform__agree input{ flex:none; margin-top:5px; width:18px; height:18px; accent-color:var(--blue); } .eform__foot{ margin-top:34px; text-align:center; } .eform__submit{ min-width:min(360px,86vw); justify-content:center; } /* 入力が足りないときの案内と、足りない欄の枠（js/main.js が付け外しします） */ .eform__msg{ margin-top:18px; font-size:13.5px; line-height:1.95; } .eform__msg.is-err{ color:var(--c-pink-d); } .eform__msg.is-ok{ color:var(--blue); } .eform__input.is-err,.eform__file.is-err{ border-color:var(--c-pink-d); } @media (max-width:600px){ .eform__submit{ width:100%; min-width:0; } } /* 募集要項ページは直前に同じ役割のENTRYセクションがあるので出さない */ body[data-page="recruit"] .footer__cta{ display:none; } /* ★寸法は会社サイト（C:\Users\MICHIHIRO\Desktop\develop\asahi-hp のテーマ）の .site-footer をそのまま写しています。数字（幅・間隔・文字の大きさ）は 向こうに合わせてあるので、片方だけ変えないでください。 .footer__body … .container.wide > .top（幅 min(2040px,95%) を中央寄せ） .footer__big … .big-en .footer__bottom … .container.wide > .bottom ★見た目はトップページ（css/top.css の .foot 一式）とそろえています。 ★地色は白。ページ全体の背景（水色のモヤ＝.bg）はここで止めて、 フッターだけを白い面にしています。白は会社情報から下だけで、 上の CONTACT（.footer__cta）はトップページと同じく背景を透かしたままです。 白い面は画面の端まで広げ、中身だけを min(2040px,95%) に収めます。 */ .footer__body{ background:var(--white); border-top:1px solid var(--line); padding:clamp(52px,6vw,84px) 0 clamp(36px,4.2vw,58px); } .footer__inner{ width:min(2040px,95%); margin-inline:auto; display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(24px,2.6vw,40px); } .footer__brand{ min-width:0; } /* ロゴはヘッダー（.logo）と同じ組み方＝丸いマーク＋社名（文字）。 社名の書体・太さ・字間はヘッダーの .logo__name と必ず同じにしてください （画像の社名を使うと、ヘッダーと書体が違って見えます）。 */ /* ★2026-08-14: 大きさを会社サイトのフッター（footer.php ／ style.css の .site-footer .brand）にそろえました。以前はマーク38px・社名21pxで、 会社サイトより一回り小さく見えていました。 マーク 42×42px （.brand .logo-mark） キャッチ 9.3px ＝.58rem（.site-footer .brand .tagline） 社名 27.8px ＝1.74rem（.site-footer .brand .name） 住所 14.7px ＝ .92rem（.site-footer .addr） */ .footer__logo{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } /* object-fit:contain は必須（元画像 513×533 の縦長。無いと横に潰れます）。 */ .footer__logo-mark{ height:42px; width:42px; flex:none; display:block; object-fit:contain; transform:translateY(3px); } .footer__logo-txt{ display:flex; flex-direction:column; line-height:1.35; } .footer__logo-tag{ font-size:9.3px; letter-spacing:.18em; font-weight:500; color:var(--blue); white-space:nowrap; } .footer__logo-name{ font-size:27.8px; font-weight:700; letter-spacing:.08em; color:var(--navy); white-space:nowrap; line-height:1.2; } .footer__en{ font-family:var(--ff-en); font-size:10.5px; letter-spacing:.2em; color:var(--blue); } /* キャッチは社名の上（.footer__logo-tag）へ移したので、独立した行は持ちません。 */ .footer__addr{ margin-top:20px; font-size:.92rem; line-height:2.2; color:var(--gray); } /* --- SNS ボタン ------------------------------------------------------- トップページ（css/top.css の .foot-sns）と同じ見た目にそろえています。 アイコンは塗り（fill）で描くので、他の SVG（線で描くもの）と設定が逆です。 */ /* 大きさ・間隔は会社サイトの .f-social と同じ（42px の丸／間 12px／上 24px）。 */ .footer__sns{ display:flex; gap:12px; margin-top:24px; list-style:none; } /* ★フッターの地色が白になったので、縁は白ではなく薄い線にしています （白い縁だと、白い面の上では輪郭が消えて丸が浮いて見えません）。 */ .footer__sns a{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--white); border:1px solid var(--line); color:var(--deep); box-shadow:0 6px 16px rgba(6,38,63,.08); transition:transform .25s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .25s var(--ease); } .footer__sns svg{ width:19px; height:19px; fill:currentColor; stroke:none; } .footer__sns a:hover{ transform:translateY(-3px); color:var(--navy); box-shadow:0 12px 22px rgba(6,38,63,.14); } .footer__sns li:nth-child(1) a:hover{ background:var(--w-aqua); } .footer__sns li:nth-child(2) a:hover{ background:var(--w-lilac); } .footer__sns li:nth-child(3) a:hover{ background:var(--w-pink); } .footer__sns li:nth-child(4) a:hover{ background:var(--w-peach); } /* --- リンク集（MENU／CONTENTS）---------------------------------------- 会社サイト（C:\Users\MICHIHIRO\Desktop\develop\asahi-hp のテーマ／footer.php） と同じ組み方です。マス（カード）ではなく、行頭に短い横棒を置いた文字のリストで、 左＝MENU（ページ名だけ）／右＝CONTENTS（各ページの中身へ直接飛ぶ）の2ブロック。 MENU は必要な幅だけ取り、残った幅を CONTENTS に回します。 ★中身は js/layout.js が組み立てます。トップページは index.html に同じものを 直接書いてあります（見た目は css/top.css の .foot-menus）。 片方だけ直すと、ページを移ったときに見た目が変わります。 */ .footer__menus{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:clamp(48px,6vw,110px); } /* 見出し（MENU / CONTENTS）。英字・字間広め・小さく。 */ .footer__ttl{ font-family:var(--ff-en); font-size:.68rem; font-weight:700; letter-spacing:.3em; color:var(--blue); margin-bottom:18px; } .footer__contents .footer__ttl{ font-size:.62rem; opacity:.8; } .footer__list{ list-style:none; margin:0; padding:0; } /* MENU は上から下→右列の順に、2列（1列3行）で折ります。 */ .footer__list--main{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(3,auto); grid-auto-columns:max-content; column-gap:clamp(22px,2.2vw,34px); } /* 行の高さは整数px（20px）で固定します。行送りが小数だと行が下へ行くほど 半端な座標に積み上がり、高さ2pxの横棒がピクセルの境目をまたぐ量が行ごとに 変わって、棒の太さがバラついて見えるためです。行間は margin-bottom で取ります。 ★a は inline-flex ではなく flex。inline-flex だと最初の子（＝横棒）で ベースラインが決まり、行の高さが文字由来の小数に引きずられます。 */ .footer__list li{ margin-bottom:20px; font-size:.88rem; line-height:20px; } .footer__list a{ display:flex; align-items:center; gap:10px; line-height:20px; font-weight:500; letter-spacing:.03em; color:var(--navy); transition:color .3s var(--ease); } /* 行頭の横棒。カーソルを合わせると伸びます。 ※棒には flex:none。幅が詰まったとき棒だけ縮んで短くなるのを防ぎます。 */ .footer__list a::before{ content:""; flex:none; width:14px; height:2px; border-radius:2px; background:var(--blue); transition:width .3s var(--ease); } .footer__list a:hover{ color:var(--blue); } .footer__list a:hover::before{ width:24px; } /* CONTENTS は MENU の下位。字も横棒も少しずつ小さくして強さを落とします。 等幅の列に並べると短い項目の右に余白が大きく残るので、実寸のまま横に詰めて 折り返します（行数は幅なりに決まります）。項目名は途中で折り返しません。 */ .footer__list--sub{ display:flex; flex-wrap:wrap; column-gap:clamp(14px,1.3vw,20px); } .footer__list--sub li{ margin-bottom:13px; font-size:.79rem; line-height:18px; } .footer__list--sub a{ gap:8px; line-height:18px; color:var(--gray); white-space:nowrap; opacity:.84; transition:opacity .3s var(--ease), color .3s var(--ease); } .footer__list--sub a::before{ width:9px; opacity:.7; transition:width .3s var(--ease), opacity .3s var(--ease); } .footer__list--sub a:hover{ opacity:1; color:var(--navy); } .footer__list--sub a:hover::before{ width:16px; opacity:1; } /* 幅ゼロ・高さゼロで1行ぶんを占め、次の項目を次の行へ送る区切りです。 CONTENTS をページごとのまとまりで改行させるために置いています。 */ .footer__list--sub .footer__br{ flex:0 0 100%; height:0; margin:0; } /* --- 大きな英字 -------------------------------------------------------- 会社サイト（asahi-hp のテーマ／footer.php の .big-en）と同じものです。 塗りは透明で、輪郭線だけの文字を1行で敷きます。 ・折り返さない（white-space:nowrap）ので、狭い画面では左右がはみ出します。 はみ出したぶんは .footer の overflow:hidden で切っています。 ・下の余白を -.12em にして、文字の下の余白ぶんだけ帯に寄せています。 ・読ませる文字ではないので、選択もクリックもできないようにしています （HTML 側でも aria-hidden を付けて、読み上げの対象から外しています）。 ★見た目はトップページ（css/top.css の .foot-big）とそろえています。 */ .footer__big{ background:var(--white); margin-bottom:-.12em; font-family:var(--ff-en); font-weight:800; line-height:1; letter-spacing:.02em; /* ★大きさ・線の太さは会社サイトの .big-en と同じです。 1行が画面幅よりわずかに広くなるので、左右の端で少しだけ切れます。 これは向こうも同じ（.site-footer の overflow:hidden で切っている）で、 わざと端まで満たしている表現です。収めようとして小さくしないでください。 線の色だけ、こちらのパレットの水色（--sky-d）に置き換えています。 */ font-size:clamp(2.6rem,8.6vw,8rem); white-space:nowrap; text-align:center; color:transparent; -webkit-text-stroke:1.5px rgba(63,163,204,.3); user-select:none; pointer-events:none; } /* いちばん下の帯（コピーライト＋PAGE TOP）。白い面は端まで、区切り線と中身は 上のブロックと同じ幅（min(2040px,95%)）にそろえます（会社サイトと同じ）。 */ .footer__bottom{ background:var(--white); } .footer__bottom-in{ width:min(2040px,95%); margin-inline:auto; padding:22px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:.74rem; letter-spacing:.1em; color:var(--gray-l); } /* ========================================================================== フッターを会社サイトと同じ見た目にそろえる（2026-08-14） -------------------------------------------------------------------------- 項目名・項目数・リンク先だけは採用サイトのまま。それ以外（文字の大きさ、 行送り、色、地色、SNS、大きな英字、最下段）は会社サイトの実値に合わせています。 採用サイトのパレット（--navy / --blue など）とは色が違うため、 会社サイトの色を --f-* として、このフッターの中だけで持ちます。 ★会社サイト側（asahi-hp/theme/asahi-construction/style.css の .site-footer）を 直したときは、必ずここも同じ数字に直してください。 ========================================================================== */ .footer{ --f-ink:#2e4d61; /* 会社サイト --ink 文字・リンク */ --f-accent:#5bb8e3; /* 会社サイト --accent MENU の行頭の横棒 */ --f-accent-d:#3d9ccb; /* 会社サイト --accent-d CONTENTS の横棒・SNSのホバー */ --f-accent-deep:#2e7ea9; /* 会社サイト --accent-deep 見出し・キャッチ・SNSの字 */ --f-line:rgba(46,77,97,.14); } /* 地色は単色の淡い水色。会社サイトのフッター（80%白 × 水色の地）が実際に見えている 色に合わせています。 ★半透明にしてはいけません。会社サイトの背景は一様な水色ですが、採用サイトの背景には 黄色や緑のポリゴンがあり、透かすとフッターに色ムラが出て別物に見えます。 */ .footer__body{ background:#f3f9fd; border-top:1px solid var(--f-line); color:var(--f-ink); } .footer__big{ background:#f3f9fd; } .footer__bottom{ background:#f3f9fd; } /* --- 社名まわり --- */ .footer__logo-tag{ color:var(--f-accent-deep); } .footer__logo-name{ color:var(--f-ink); } .footer__addr{ color:var(--f-ink); font-style:normal; } /* --- 見出し（MENU / CONTENTS）--- */ .footer__ttl{ font-size:.74rem; color:var(--f-accent-deep); } .footer__contents .footer__ttl{ font-size:.68rem; } /* --- リンク（行の高さは整数pxのまま、行送りの合計は会社サイトと同じ）--- */ .footer__list li{ margin-bottom:18px; font-size:.95rem; line-height:22px; } .footer__list a{ line-height:22px; color:var(--f-ink); font-weight:inherit; letter-spacing:normal; } .footer__list a::before{ background:var(--f-accent); } .footer__list a:hover{ color:var(--f-accent-deep); } .footer__list--sub li{ margin-bottom:11px; font-size:.85rem; line-height:20px; } .footer__list--sub a{ line-height:20px; color:var(--f-ink); } .footer__list--sub a::before{ background:var(--f-accent-d); } .footer__list--sub a:hover{ color:var(--f-ink); } /* --- SNS（丸の大きさ42px・間隔12px・上余白24px はもともと一致）--- */ .footer__sns a{ background:rgba(255,255,255,.6); border:1px solid rgba(46,77,97,.16); color:var(--f-accent-deep); box-shadow:none; } .footer__sns a:hover{ background:var(--f-accent-d); border-color:var(--f-accent-d); color:#fff; transform:translateY(-3px); box-shadow:0 10px 22px rgba(61,156,203,.32); } /* Instagram だけ線画なので、塗りではなく線で描きます。 */ .footer__sns .ig svg{ width:20px; height:20px; fill:none; } /* --- 大きな英字（会社サイトは 6.8vw 上限 7.6rem。以前は 8.6vw で大きすぎた）--- */ .footer__big{ font-size:min(6.8vw,7.6rem); -webkit-text-stroke:1.5px rgba(91,184,227,.3); } /* --- 最下段 --- */ .footer__bottom-in{ border-top:1px solid var(--f-line); color:var(--f-ink); } .footer__links{ display:flex; gap:24px; } .footer__links a{ color:var(--f-ink); } .footer__links a:hover{ color:var(--f-accent-deep); } /* 折り返す幅も会社サイトと同じです。 リンク集が横に伸びきれない幅（1100px）で、会社情報の下へ回します */ @media (max-width:1100px){ .footer__inner{ grid-template-columns:1fr; } } /* スマホでは MENU の下に CONTENTS。別ものだと分かるよう間隔は広めに取ります */ @media (max-width:640px){ .footer__menus{ grid-template-columns:1fr; gap:44px; } .footer__list--main{ grid-template-rows:repeat(6,auto); } } /* -------------------------------------------------------------------------- 30. カラフル化：同じ種類の要素に順番でパステルを割り当てる ここをまとめて書き換えれば、サイト全体の色の出方が変わります。 パステルを背景に使う場合、文字色は必ず --navy に。 -------------------------------------------------------------------------- */ /* トップの入口カード */ .gate__card:nth-child(1) .gate__blob{ background:linear-gradient(140deg,var(--c-aqua),var(--c-mint)); } .gate__card:nth-child(2) .gate__blob{ background:linear-gradient(140deg,var(--c-mint),var(--c-lemon)); } .gate__card:nth-child(3) .gate__blob{ background:linear-gradient(140deg,var(--c-pink),var(--c-peach)); } .gate__card:nth-child(4) .gate__blob{ background:linear-gradient(140deg,var(--c-lilac),var(--c-pink)); } .gate__card:nth-child(5) .gate__blob{ background:linear-gradient(140deg,var(--c-peach),var(--c-lemon)); } .gate__card:nth-child(6) .gate__blob{ background:linear-gradient(140deg,var(--c-aqua),var(--c-lilac)); } /* 工種のラベル */ .works .work:nth-child(1) .work__cat{ background:var(--c-aqua); } .works .work:nth-child(2) .work__cat{ background:var(--c-mint); } .works .work:nth-child(3) .work__cat{ background:var(--c-lilac); } .works .work:nth-child(4) .work__cat{ background:var(--c-lemon); } /* 5番目はトンネル工事。6番目（災害復旧）は下の --accent が色を持っています */ .works .work:nth-child(5) .work__cat{ background:var(--c-pink); } .work__cat--accent{ background:var(--c-peach); color:var(--navy); } /* ICTのアイコン（濃い青の面の上なので、少し彩度を落として使う） */ .ict__card:nth-child(1) .ict__icon::after{ background:var(--c-aqua); } .ict__card:nth-child(2) .ict__icon::after{ background:var(--c-mint); } .ict__card:nth-child(3) .ict__icon::after{ background:var(--c-lemon); } .ict__card:nth-child(4) .ict__icon::after{ background:var(--c-peach); } .ict__card:nth-child(5) .ict__icon::after{ background:var(--c-pink); } .ict__card:nth-child(6) .ict__icon::after{ background:var(--c-lilac); } /* 数字カード：上辺に色を差す */ .data__cell{ border-top:3px solid transparent; } .data__cell:nth-child(6n+1){ border-top-color:var(--c-aqua); } .data__cell:nth-child(6n+2){ border-top-color:var(--c-mint); } .data__cell:nth-child(6n+3){ border-top-color:var(--c-lemon); } .data__cell:nth-child(6n+4){ border-top-color:var(--c-peach); } .data__cell:nth-child(6n+5){ border-top-color:var(--c-pink); } .data__cell:nth-child(6n+6){ border-top-color:var(--c-lilac); } .digest__cell{ border-top:3px solid transparent; } .digest__cell:nth-child(1){ border-top-color:var(--c-aqua); } .digest__cell:nth-child(2){ border-top-color:var(--c-mint); } .digest__cell:nth-child(3){ border-top-color:var(--c-peach); } .digest__cell:nth-child(4){ border-top-color:var(--c-lilac); } /* 3つの柱 */ .pillars .pillar{ border-top:4px solid transparent; } .pillars .pillar:nth-child(1){ border-top-color:var(--c-aqua); } .pillars .pillar:nth-child(2){ border-top-color:var(--c-mint); } .pillars .pillar:nth-child(3){ border-top-color:var(--c-lilac); } /* 働く環境の4カード */ .env__grid .env__box:nth-child(1) h3{ border-bottom-color:var(--c-aqua); } .env__grid .env__box:nth-child(2) h3{ border-bottom-color:var(--c-lemon); } .env__grid .env__box:nth-child(3) h3{ border-bottom-color:var(--c-mint); } .env__grid .env__box:nth-child(4) h3{ border-bottom-color:var(--c-pink); } /* キャリアステップ：段ごとに色を変え、文字は濃色に */ .step__bar{ color:var(--navy); } .step__item[data-step="1"] .step__bar{ background:linear-gradient(135deg,var(--c-aqua),var(--c-mint)); opacity:1; } .step__item[data-step="2"] .step__bar{ background:linear-gradient(135deg,var(--c-mint),var(--c-lemon)); opacity:1; } .step__item[data-step="3"] .step__bar{ background:linear-gradient(135deg,var(--c-lemon),var(--c-peach)); opacity:1; } .step__item[data-step="4"] .step__bar{ background:linear-gradient(135deg,var(--c-peach),var(--c-lilac)); opacity:1; } .step__bar::after{ background:rgba(255,255,255,.4); } /* 教育セクションの番号 */ .edu__ttl i{ color:var(--navy); } .edu__grid .edu__block:nth-child(1) .edu__ttl i{ background:var(--c-aqua); } .edu__grid .edu__block:nth-child(2) .edu__ttl i{ background:var(--c-lilac); } /* FAQのカテゴリ */ .faq .faq__group:nth-child(1) .faq__cat{ background:var(--c-aqua); } .faq .faq__group:nth-child(2) .faq__cat{ background:var(--c-lemon); } .faq .faq__group:nth-child(3) .faq__cat{ background:var(--c-pink); } /* インタビューの見出し番号 */ .itv__minicard:nth-child(1) .itv__no{ color:#e8629b; } .itv__minicard:nth-child(2) .itv__no{ color:#c79a17; } .itv__minicard:nth-child(3) .itv__no{ color:#7d63d8; } /* 一日の流れ：時刻の丸を順番に色替え */ .day__list .day__item:nth-child(4n+1) .day__body::before{ border-color:var(--c-aqua); } .day__list .day__item:nth-child(4n+2) .day__body::before{ border-color:var(--c-mint); } .day__list .day__item:nth-child(4n+3) .day__body::before{ border-color:var(--c-peach); } .day__list .day__item:nth-child(4n+4) .day__body::before{ border-color:var(--c-lilac); } /* -------------------------------------------------------------------------- 31. 追従CTA -------------------------------------------------------------------------- */ .fixcta{ position:fixed; right:24px; bottom:24px; z-index:880; display:flex; gap:10px; opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .6s var(--ease), transform .6s var(--ease); } /* ★ふだんは薄く出します。ページの中身を読んでいる間ずっと右下に はっきり乗っていると、本文より先に目に入って邪魔になるためです。 カーソルを乗せると、はっきり見えるところまで戻します。 ★ぼかし（すりガラス）は使いません。透明度だけで調整します。 */ .fixcta.is-show{ opacity:.5; transform:none; pointer-events:auto; } .fixcta.is-show:hover, .fixcta.is-show:focus-within{ opacity:1; } /* ★2026-08-13、ここは「募集要項」1つだけになりました。 以前は「募集要項（白い面）＋ENTRY（線で丸く囲んだ形）」の2つでしたが、 行き先が同じなので1つにまとめ、見た目は ENTRY 側（線で囲んだ形）を 引き継いでいます。.fixcta__sub は使っていません。 */ .fixcta__sub,.fixcta__main{ isolation:isolate; display:inline-flex; align-items:center; gap:9px; border-radius:999px; padding:16px 26px; font-size:13px; font-weight:700; letter-spacing:.05em; box-shadow:0 16px 36px -16px rgba(6,38,63,.5); transition:background .4s var(--ease), color .4s var(--ease); } .fixcta__sub{ background:var(--white); color:var(--navy); } /* 日本語なので、英字用の書体・字間はやめて太さ500にしています （13px の日本語を 700 にすると、画数の多い字がつぶれてぼってり見えます）。 ★地色は置きません（background:none）。カーソルを乗せたときに 左から流れ込む水色（下の ::before）は、この要素の後ろ（z-index:-1）に 描いているので、地色を塗るとその色に隠れて見えなくなります。 */ .fixcta__main{ background:none; border:1.5px solid var(--navy); color:var(--navy); font-weight:500; letter-spacing:.08em; } .fixcta__main svg{ width:16px; height:16px; transition:transform .4s var(--ease); } .fixcta__main:hover svg{ transform:translateX(4px); } /* -------------------------------------------------------------------------- エントリー系ボタンのホバー ぼかした円を重ねる方式はやめ、背景色をそのまま切り替えます。 -------------------------------------------------------------------------- */ /* ふだんは背景なしの線だけ。カーソルを当てると水色系のパステルが左から現れます。 大きいボタン（ヒーロー／ENTRY）と同じ clip-path 方式にして、 グラデーションが引き伸ばされないようにしています。 */ .hbtn--main, .fixcta__main{ position:relative; overflow:hidden; transition:color .45s var(--ease), border-color .45s var(--ease); } .hbtn--main::before, .fixcta__main::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(120deg,var(--cyan-p) 0%,var(--c-aqua) 52%,var(--cyan-l) 100%); /* round を付けないと切り抜きが長方形になり、角丸の外へ一瞬はみ出します */ clip-path:inset(0 100% 0 0 round 999px); transition:clip-path .55s var(--ease-out); } .hbtn--main:hover::before, .fixcta__main:hover::before{ clip-path:inset(0 0 0 0 round 999px); } .hbtn--main:hover, .fixcta__main:hover{ color:var(--navy); } .fixcta__sub:hover { background:var(--navy); color:var(--white); } /* -------------------------------------------------------------------------- ENTRY ボタンの文字の視覚的な中央ぞろえ 矢印を右に置いているぶん、「文字＋間隔＋矢印」の固まりを中央に寄せると 文字そのものは左にずれて見えます。 左の余白を「矢印の幅＋間隔」だけ広げると、文字がボタンの中央に来ます。 -------------------------------------------------------------------------- */ .hbtn--main { padding-left:calc(22px + 15px + 9px); } /* 余白 + 矢印 + 間隔 */ .fixcta__main { padding-left:calc(26px + 16px + 9px); } .footer__cta-btns .btn{ padding-left:calc(44px + 18px + 14px); } @media (max-width:768px){ .fixcta{ right:12px; left:12px; bottom:12px; } .fixcta__sub,.fixcta__main{ flex:1; justify-content:center; padding:15px 10px; font-size:12.5px; } } /* ========================================================================== スマホ専用の調整（2026-08-14） -------------------------------------------------------------------------- ★ここに書いたものはパソコン版には効きません。 スマホ向けの指示は、既存の行を書き換えず必ずこの節に追記すること。 確認は bash tools/css-baseline.sh check（@media の外が変わっていないか） ========================================================================== */ @media (max-width:768px){ /* --- 施工管理の7枚を、すべて「発注者との打ち合わせ」と同じカードにする --- 01〜04 は大きな写真＋長文の記事組み、05〜07（.mag__trio）は 写真16:9＋白いカードのコンパクトな組みでした。 スマホでは記事組みが縦に伸びすぎるので、全部カード組みにそろえます。 指定は .mag__trio .mag__item のものと同じ数字です。 */ .mag{ display:grid; gap:clamp(16px,4vw,28px); } .mag .mag__item{ display:flex; flex-direction:column; overflow:hidden; background:var(--white); border-radius:10px; } .mag .mag__img{ aspect-ratio:16/9; border-radius:0; } .mag .mag__body{ flex:1; display:flex; flex-direction:column; padding:clamp(20px,5vw,30px); } .mag .mag__no{ font-size:clamp(26px,7vw,36px); } .mag .mag__ttl{ margin-top:12px; font-size:clamp(16px,4.4vw,20px); line-height:1.6; } .mag .mag__txt{ margin-top:12px; font-size:13.5px; line-height:1.95; } .mag .mag__list{ margin-top:auto; padding-top:18px; gap:8px; } /* 3枚並びも1枚ずつの縦並びにします（横3列だと1枚が細くなりすぎます） */ .mag__trio{ grid-template-columns:1fr; } /* --- 01〜04 の出方を 05〜07 とそろえる --- 01〜04 の「左右から寄ってきて重なる」動きは、1001px 以上でしか効きません （1列に積むスマホでは横に動かす余地が無いため）。そのぶんスマホでは ふつうの「下から浮き上がる」だけになり、05〜07 の「左から開く」と 出方が違って見えていました。カードの形は上でそろえたので、 動きも 05〜07 と同じ「左から開く」にそろえます。 ★数字は .mag__trio .mag__item.reveal（このファイルの上のほう）と同じです。 変えるときは両方そろえてください。 ★1枚ずつずらす遅れ（data-reveal-delay）は 05〜07 だけに付いています。 01〜04 は1枚ずつ画面へ入ってくるので、遅れは要りません。 */ .mag > .mag__item.reveal{ opacity:1; clip-path:inset(0 100% 0 0); transform:translateX(-18px); transition:clip-path .5s var(--ease-out), transform .5s var(--ease-out); } .mag > .mag__item.reveal.is-in{ clip-path:inset(0 0 0 0); transform:none; } /* --- エントリーの2枚を「横長のカードを縦に2つ」にする --- もとは正方形（aspect-ratio:1/1）を横に2枚並べていました。 スマホでは1枚あたりが小さくなりすぎるので、幅いっぱいの横長にして 上下に積みます。正方形の指定を外すのが要点です。 */ .rtabs{ grid-template-columns:1fr; justify-content:stretch; gap:12px; } .rtab{ aspect-ratio:auto; padding:18px 20px; gap:7px; text-align:center; align-items:center; } /* 横長になって幅ができたので、丸い矢印の左の文字を出し直します （正方形だったころは2行に折れて面をはみ出すので font-size:0 で消していました）。 文字は「募集要項」だけです。「とエントリー」は に入れてあり、 スマホでは出ません（HTML は js/layout.js）。 ★css/top.css 側と必ずセットで直してください。 */ /* ★中央にそろえるのは「募集要項」の文字であって、文字＋丸い矢印の固まりではありません。 ふつうに justify-content:center にすると、矢印のぶんだけ文字が左へずれます。 矢印に「幅＋間隔ぶん」の負の余白（-44px ＝ 丸34px ＋ 間隔10px）を持たせると、 中央ぞろえの計算から矢印が外れ、文字だけがカードの中心に来ます。 矢印はその右隣に、はみ出す形で置かれます。 ★丸の大きさか間隔を変えたら、-44px も必ず合わせて直してください。 */ .rtab__go{ font-size:12.5px; gap:10px; justify-content:center; } .rtab__go svg{ width:34px; height:34px; padding:10px; margin-right:-44px; } /* --- 画面の下に貼り付く「募集要項」ボタンを出さない --- スクロールしても付いて回るため、本文の下のほうがいつも隠れていました。 行き先（募集要項）は、ヘッダーのメニューと各ページ下の 「あなたのエントリーを、お待ちしています。」からたどれるので、 このボタンが無くても入口は失われません。 ★パソコン版では今までどおり出ます。 ★css/top.css（採用トップ）側と必ずセットで直してください。 */ .fixcta{ display:none; } }