/* ==========================================================================
top.css — トップページ専用
--------------------------------------------------------------------------
このファイルは index.html だけが読み込みます。
下層ページ（about / work / people / career / recruit）は従来どおり
css/style.css を使っているので、ここを触っても下層ページには影響しません。
★以前あった読み込み画面（#loader）は廃止し、その白い面・球体・文字を
そのままヒーローに移しました。2 と 5 の両方を見てください。
構成
1. 変数・土台
1-2. 読み込み画面（ブート）… 白い面＋ロゴ＋帯だけの簡単なもの
2. ヒーローの白い面／球体／見出し（もと読み込み画面）
3. サイト本体の背景（グラデーション／浮遊する球／きらめき）
4. ヘッダー・ドロワー
5. ヒーロー
6. セクション共通（.sec / .reveal など）
7. INTRO（3本柱）／CONTENTS（入口カード）／DATA（数字）
8. CONTACT・フッター
========================================================================== */
/* ================= 1. 変数・土台 ================= */
:root{
/* ヘッダーの高さ。★css/style.css の同名の変数と必ず同じ数字にすること。
top.css と style.css は同時には読まれないため、両方に定義が要ります。 */
--rc-header-h:92px; /* 通常時（会社サイトの .site-header と同値） */
--rc-header-h-solid:72px; /* 下へスクロールしたとき */
--ice:#F2FAFE; --aqua:#8FD4EC; --aqua-d:#3FA3CC; --deep:#16506E;
--ink:#1B4257; --ink-s:#6C93A8;
--blue:#0B6FC4; --cyan:#00C0F0; --cyan-l:#7FDCF5; --cyan-p:#B9ECFA;
--navy:#06263F; --gray:#5B7385; --gray-l:#9DB3C1; --white:#fff;
--line:rgba(6,38,63,.14); --sky-l:#F1FAFD;
/* --- パステルのアクセント -------------------------------------------
水色一色だと少し硬い印象になるので、ピンク・オレンジ・レモン・ミント・
ラベンダーを加えた6色を「明るい雰囲気」の共通パレットにしています。
〇〇 … 淡いほう。面（球体・カードの背景・帯）に使います
〇〇-d … 濃いほう。文字・線・縁取りに使います（淡い色だと読めないため）
-d のほうは、白い背景で 11px 前後の文字に使っても読める濃さにしてあります
（淡いパステルのまま文字にすると、明るい画面ではほぼ見えません）。
色を変えるときは、まずこの12個だけを触ってください。 */
/* 注意書き用の赤。面に使う淡いほうと、文字・線に使う濃いほう。
«読んでおいてほしい» 注記（HOUSING の入居についてのお願い）だけに使います。
多用すると効きめが落ちるので、ほかの場所には広げないでください。 */
--alert:#C8102E; --alert-l:#F7D7DD; --alert-bg:#FFF5F7;
--rose:#FFC8DD; --rose-d:#D6497D;
--peach:#FFD6BA; --peach-d:#DE7429;
--lemon:#FFEDBA; --lemon-d:#C08E0E;
--mint:#C3F1DE; --mint-d:#1FA377;
--lilac:#DCD3FB; --lilac-d:#7761D8;
--sky:#B9ECFA; --sky-d:#3FA3CC;
/* 〇〇-s … -d と同じくらいの「濃さ」のまま、鮮やかさだけを落とした色。
-d は文字としてはっきり出したい場所（帯・ラベル）に、
-s は面が広くて色が主張しすぎる場所（CONTENTS のカード）に使います。
濃さはほぼ同じなので、やさしく見えても読みにくくはなりません。
ただし黄色・オレンジだけは、文字が読める濃さまで落とすと必ず茶色や砂色に
見えてしまいます。そのため、
・オレンジ（WORK）は彩度を上げて、はっきりオレンジに見える濃さで止める
・黄色（PEOPLE）はあきらめて、若草色（--leaf-s）に置き換える
という扱いにしています。 */
--rose-s:#DB6A9E;
--peach-s:#DD7B45;
--leaf-s:#5C9E52;
--mint-s:#4E9C82;
--lilac-s:#8578C0;
--sky-s:#5E97B4;
/* カード上端などのアクセント。上のパレットを順に並べたものです */
--t1:var(--rose); --t2:var(--peach); --t3:var(--lemon); --t4:var(--mint); --t5:var(--lilac);
/* 大きな見出し（読み込み画面の future ／ ヒーローの「まちのかたち」）用の
ピンク→コーラルピンク。2か所でそろえたいので、ここ1か所で持っています。
文字が大きいぶん、-d よりも彩度を落とした淡いトーンにしています。
終点をオレンジまで振らず桃色寄りで止めて、全体をやさしいピンクに見せています。 */
--happy:#E08BAB;
--happy-grad:linear-gradient(100deg,#E08BAB 0%,#E89BAF 52%,#EFAFAC 100%);
/* ベースの水色。下層ページの body（style.css の --sky）と同じ値です */
--sky-base:#E1F4FB;
--ease:cubic-bezier(.22,.75,.25,1); --ease-out:cubic-bezier(.16,1,.3,1);
--pad:clamp(20px,5vw,90px); --maxw:1400px;
--ff-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,sans-serif;
--ff-en:"Inter","Noto Sans JP",sans-serif;
/* ヘッダー（上部メニュー）の英字だけは、会社サイトと同じ Outfit を使います。
本文の英字（--ff-en＝Inter）は採用サイトのままです（2026-09-18）。 */
--ff-en-hdr: 'Outfit','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
--ff-ld:"Manrope","Inter","Noto Sans JP",sans-serif;
/* POINT 01〜03 の実績数字（0件・30分 など）用。下層ページの
「データで見る旭建設」（data.html）と同じ Manrope にそろえてあります。
css/style.css の --ff-num と同じ内容です。片方を変えたら、もう一方も。 */
--ff-num:"Manrope","Inter","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth}
body{
min-height:100%;
font-family:var(--ff-jp);
/* ★地色は «白» です（2026-09-18）。以前は --ice（#F2FAFE）でした。
ヒーローの白い面（.hero-white）と同じ白を、サイト全体に広げる指定です。
戻すときは、ここと下の #site の2か所を同時に直してください。 */
color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--aqua-d);outline-offset:3px;border-radius:6px}
img{max-width:100%}
/* ================= 1-2. 読み込み画面（ブート） =================
★中身は css/boot.css に移しました（2026-09-22）。
トップ（top.css）と下層ページ（style.css）の両方で同じ読み込み画面を
出すようになったため、1か所で持てるよう別ファイルにしています。
.boot / .boot__poly / .boot__logo / .boot__en / .boot__bar と
html.is-hold の指定は、すべて boot.css にあります。
★読み込ませているのは inc/recruit.php（asahi-recruit-boot）です。 */
/* ================= 2. ヒーローの白い面 =================
もとは独立した読み込み画面（#loader）でしたが、トップページのヒーローに
統合しました。読み込み画面・進み具合の数字・帯・「もう一度みる」は廃止です。
ここが受け持つのは「1画面ぶんの白」だけで、球体と文字は下の 2-2／5 にあります。
★ヘッダーの後ろから始めたいので、.hero ではなく #site 直下に置いた
1枚の面（.hero-white）にしています。.hero に背景を持たせると、
ヘッダーのぶんだけ上に水色が残って、境目が線に見えます。
★下端に向かって透明にしてあるので、スクロールすると下から
#site の水色と .bg のモヤが現れます。JS は使っていません。
★高さは 1.7画面ぶん。1画面目はもちろん、その次の WHO WE ARE の見出しと
リード文までは白のままで、3本柱（POINT 01〜03）に入るあたりで
水色に変わりきります。
白い区間を変えたいときは、下の3つの数字だけを見てください。
height … 面全体の長さ（ここで水色に変わりきります）
66% … 真っ白のままの区間の終わり（＝約1.12画面ぶん）
84% … 薄く残っている区間（ここから先で一気に抜けます）
★height と % は必ず一緒に動かしてください。height だけ伸ばすと、
白い区間ではなく「うっすら白い区間」だけが長くなります。
★以前は 135vh／62%（白は約0.84画面ぶん）でした。 */
.hero-white{
position:absolute; left:0; right:0; top:0; height:170vh;
z-index:1; pointer-events:none;
background:linear-gradient(180deg,
#FFFFFF 0%, #FFFFFF 66%, rgba(255,255,255,.82) 84%, rgba(255,255,255,0) 100%);
}
/* --- ヒーローの図形（パステルの低ポリ）--------------------------------
2026-08-15、球体がはじける形から差し替えました。
パステルの三角形が四辺を囲み、まん中は白く抜けます。抜けたところが文字の場所です。
■ 置き場所は HTML 側
1枚ずつの位置・大きさ・傾き・色は page-templates/recruit-index.php の
$asahi_poly（三角形）と $asahi_poly_bits（細かい飾り）にあります。
図形を足し引きするときは «あちらだけ» を触ってください。ここは «描き方» です。
■ 動きは2つを重ねています
polyIn … 外から飛び込んでくる（最初の1回だけ）
polyFloat … そのあとずっと、ゆっくり漂い続ける
★2つは別のプロパティで動かします。polyIn は transform、
polyFloat は translate と rotate。同じ transform で書くと取り合いになり、
あとから始まったほうしか効きません（ここは何度も踏んだ落とし穴です）。
★漂いの周期（--t）は1枚ずつ変えてあります。そろえると全部が同じ拍で
動いて «機械のよう» に見えます。
■ 重なり
.poly は文字（.hero-in）より «後ろ»。図形は文字の上に出しません。 */
/* ★上へ «メニューバーの高さ» ぶん伸ばします（2026-08-15）。
ヒーローの箱はバーの下から始まるので、伸ばさないとバーの裏だけ図形が無く、
そこだけ白い帯になります（バーを透過しても白いまま、という状態でした）。
★メニューバー（.nav）は z-index:50 でこれより手前です。ロゴとメニューの文字は
図形に隠れません。バー自体は地色を持たないので、図形がバーの中を通り抜けます。
★overflow:hidden は残します。図形が画面の外へはみ出して
横スクロールが出るのを止めるためです。 */
.poly{
position:absolute; z-index:1; pointer-events:none;
left:0; right:0; top:calc(-1 * var(--rc-header-h)); bottom:-26vh;
/* ★奥行き。これが «奥の1点から手前へ飛び出してくる» 見え方の元です。
旧デザインの球体（.ld__orbs）と同じ考え方で、値も同じ 1100〜1200px 台です。
消すと、ただ «中心から外へ滑る» だけの平たい動きになります。
★perspective-origin は «消失点» です。ここへ向かって奥がすぼまります。
文字のかたまりの中心（横50%・縦44%あたり）に合わせてあります。 */
perspective:1200px; perspective-origin:50% 44%;
/* ★下は «切らずに» 消します（2026-08-16 の指定）。
overflow:hidden で切ると、ヒーローと下のセクションのあいだに
まっすぐな境目が出ます。いまは下 22%〜100% で少しずつ透明にして、
図形が下の背景へ溶けていくようにしています。
★横のはみ出しは #site の overflow-x:clip が受け持つので、
ここで切らなくても横スクロールは出ません。 */
-webkit-mask:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.55) 88%,transparent 100%);
mask:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.55) 88%,transparent 100%);
}
/* --- 三角形 ---
★clip-path は HTML から --cp で渡します（上向き・下向き・左右向きの4種類）。
★mix-blend-mode:multiply は «三角形どうしが重なったところだけ» 濃くします。
.poly は z-index を持つ独立した層なので、後ろの白い面とは混ざりません
（混ざると全体が濁ります）。normal に戻すと、上に載ったほうの色で
べったり塗りつぶされ、重なりの濃淡が消えます。 */
/* 4枚組みの四角形（.pf）と、1枚だけの三角形（i）は «同じ動き» をします。
★.pf は入れ物です。中の4枚は動かさず、入れ物ごと動かしてください。
面ごとに動かすと、時間が経つほど4枚が離れて四角形が崩れます。 */
/* 4枚組みの四角形（.pf）と、1枚だけの三角形（.poly > i）は «同じ動き» です。
★動き（transform／animation）は必ず «外側» に付けてください。
中の面に付けると、入れ物の opacity:0 が解除されず図形がまるごと消えます
（2026-08-15、実際にそれで全部消えました）。 */
.poly > .pf,
.poly > i{
position:absolute; display:block;
left:calc(var(--nx) * 1%); top:calc(var(--ny) * 1%);
width:var(--s); height:var(--s);
opacity:0;
will-change:transform, translate, rotate;
/* ★出だしは «画面のまん中»。そこから自分の場所へ飛び出します。
クラッカーのように «はじける» 見え方にするための指定です。
(46 - --nx) は「自分の場所からまん中までの距離」。--nx は単位なしの数字
（％のつもりの値）なので、1vw を掛けて長さに直しています。
--s の半分を引いているのは、図形の «左上» ではなく «中心» を
まん中に寄せるためです。 */
/* ★出だしは «画面のまん中の、ずっと奥»。そこから手前へ飛び出してきます。
旧デザインの球体（orbBurst）と同じ作りです。
translate … 自分の場所からまん中まで «ぴったり» 寄せる（1.0倍）
translateZ … 奥へ 1500px 下げる。手前へ来るぶんが «飛び出し» になります
★奥行きを付けずに translate だけにすると、まん中から端へ «滑る» だけの
平たい動きになります（2026-08-16、実際そう見えていました）。
★scale は使いません。奥にあるものは perspective が自動で小さくします。 */
transform:translate3d(calc((46 - var(--nx)) * 1vw - var(--s) / 2),
calc((44 - var(--ny)) * 1vh - var(--s) / 2),
-1500px)
rotate(calc(var(--r) - 100deg));
/* ★出てくるのは «全部いっしょ» です（2026-08-16 の指定）。
polyIn の待ち時間は .04s の決め打ちで、図形ごとに変えません。
1枚ずつずらすと «あとから図形が増えていく» ように見えます。
★漂い（polyFloat）のほうは、逆に «ずらす» のが要点です。
待ち時間をマイナスにすると «途中から始まった» 状態で動き出すので、
出た瞬間から全部が違う向きに漂います。0 にすると全部同じ拍で動きます。 */
animation:polyIn 1.25s .04s cubic-bezier(.24,.6,.32,1) forwards,
polyFloat var(--t) calc(var(--d) * -9) ease-in-out infinite;
}
/* 1枚だけの三角形の中身 */
.poly > i{
clip-path:var(--cp);
background:linear-gradient(150deg, var(--c1) 0%, var(--c2) 78%, #FFFFFF 100%);
mix-blend-mode:multiply;
}
/* 四角形を作る4枚の面。
★面ごとの明暗は «色» で付けています（透明度ではありません）。
透明度で付けると、重なったところが濁ります。
★ここに transform や animation を書かないでください。4枚がバラバラに動いて
四角形が崩れ、破片が増えていくように見えます。 */
.poly > .pf > i{
position:absolute; inset:0; display:block;
clip-path:var(--cp); background:var(--c);
mix-blend-mode:multiply;
}
/* 奥の1点から、手前の «自分の場所» へまっすぐ出てきます。
★行き過ぎてから戻す（オーバーシュート）はしません。手前まで来たあとに
一度後退して見えるので、まっすぐ到着して止めています。
★最後の translateZ:60px は «少しだけ手前» で止める指定です。0 にすると
飛び出してきた勢いが最後に消えて、平たく着地して見えます。 */
@keyframes polyIn{
0% { opacity:0 }
16% { opacity:var(--o) }
100%{ opacity:var(--o);
transform:translate3d(0,0,60px) rotate(var(--r)); }
}
/* 漂い。ずっと止まりません。
★単位は vw（画面幅基準）です。％にしてはいけません。
translate の％は «その要素自身の大きさ» が基準なので、小さい図形ほど
ほとんど動きません（実測：直径6pxの丸で 0.09px ＝ 完全に見えない）。
2026-08-15、％から vw に直しました。戻さないでください。
★1.5vw は 1440px 幅で約22px。3〜4秒かけて動くので、見ていて分かる速さです。
周期（--t）は HTML 側で1枚ずつ 8〜16秒に散らしてあります。
★大きさ（scale）も一緒に呼吸させています。位置と回転だけだと «滑っている»
ように見え、ふわふわ浮いている感じが出ません。 */
@keyframes polyFloat{
0%,100%{ translate:0 0; rotate:0deg; scale:1; }
25% { translate:1.6vw -2.1vw; rotate:7deg; scale:1.07; }
50% { translate:-1.3vw 1.5vw; rotate:-5.5deg; scale:.95; }
75% { translate:2.0vw 1.2vw; rotate:4deg; scale:1.04; }
}
/* --- 細かい飾り ---------------------------------------------------------
pb-grid … 点の格子（ハーフトーン）
pb-lines … 斜め線の束
pb-tri … 線だけの小さな三角
pb-dot … 小さな丸（塗り）
★どれも «ゆっくり点滅しながら漂う» だけです。三角形より弱い動きにしないと、
画面のあちこちが同じ強さで動いて、目のやり場がなくなります。 */
.poly > span{
position:absolute; display:block; left:var(--x); top:var(--y);
opacity:0;
/* ★周期（--t）と待ち時間（--d）は HTML 側で1つずつ違う値を配っています。
全部そろえると、25個が同じ拍で動いて «機械のよう» に見えます。 */
/* ★出るまでの時間は «はじける動き» に合わせて短くしています（2026-08-15）。
以前は 1秒かけて 0.5〜1.4秒後に出ていたため、はじけ終わったあとに
«あとから数個ずつ増える» ように見えていました。 */
/* 飾りも «全部いっしょ» に出します（理由は上の .pf と同じ）。
漂いのほうは、待ち時間をマイナスにしてばらしています。 */
animation:bitIn .5s .12s var(--ease-out) forwards,
bitFloat var(--t) calc(var(--d) * -7) ease-in-out infinite;
}
@keyframes bitIn{ to{ opacity:1 } }
/* ★こちらも単位は vw です。％だと «その要素自身の大きさ» が基準になり、
直径6pxの丸では 0.09px しか動かず、止まって見えます（2026-08-15 修正）。 */
@keyframes bitFloat{
0%,100%{ translate:0 0; scale:1; }
33% { translate:-.8vw 1.0vw; scale:1.22; }
66% { translate:.6vw -.7vw; scale:.86; }
}
.pb-grid{
width:var(--w); height:var(--h);
background-image:radial-gradient(var(--c) 1.1px, transparent 1.2px);
background-size:9px 9px;
}
/* 斜めの細い線。1本ずつ置きます。
★以前は «8本並びの束» を縞のグラデーションで作っていましたが、
デザイン案にその形は無く、代わりに «長さの違う1本線» が散っています
（2026-08-15 の指摘）。束に戻さないでください。
★長さ（--w）と角度（--r）と太さ（--th）は HTML 側で1本ずつ変えています。 */
.pb-line{
width:var(--w); height:var(--th); background:var(--c);
transform:rotate(var(--r)); transform-origin:0 50%;
border-radius:2px;
}
/* 線だけの小さな三角。
★2026-08-15 修正。以前は «べた塗りの三角 + 白い内側» で作っていたため、
下のパステル三角に «白い穴» を空けていました。
いまは1枚の clip-path で «外まわりを1周 → 内まわりを逆に1周» とたどり、
そのあいだ（＝枠の太さぶん）だけを塗っています。内側は塗りません。
★数字は、外の三角と、そこから1.5px内側に縮めた三角の頂点です。
太さを変えるときは、内側の3点だけを動かしてください。 */
.pb-tri{
width:var(--w); height:var(--w);
background:var(--c);
clip-path:polygon(
50% 0%, 100% 100%, 0% 100%, 50% 0%,
50% 7%, 7% 93%, 93% 93%, 50% 7%);
}
.pb-dot{
width:var(--w); height:var(--w); border-radius:50%; background:var(--c);
}
/* 動きを減らす設定のときは、飛び込みも漂いも止めて «最初から置いてある» 形に */
@media (prefers-reduced-motion:reduce){
.poly > i{ opacity:var(--o); transform:rotate(var(--r)); animation:none; }
.poly > span{ opacity:1; animation:none; }
}
/* --- 見出し ------------------------------------------------------------
1行に並べ、単語ごとに左から開きます。
.ld__ttl … 全体の組み
.ld__w … 単語の枠（はみ出しを隠す）
.ld__mv … 左から開く（変形だけ） */
.ld__eyebrow{ display:block; margin-bottom:clamp(16px,2.6vh,28px); }
.ld__cat{ display:inline-block; font-family:var(--ff-ld);
font-size:clamp(12.5px,1.6vw,19px); font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:var(--blue); white-space:nowrap;
opacity:0; transform:translateX(-14px);
animation:fadeUp .8s .12s var(--ease-out) forwards; }
.ld__ttl{
font-family:var(--ff-ld); font-weight:800; letter-spacing:-.01em;
/* ★白く抜けたまん中に収める大きさです。これより大きくすると
«#future» の行が三角形の上まではみ出します。 */
font-size:clamp(30px,5.2vw,84px); line-height:1.12; color:var(--deep);
text-transform:uppercase; white-space:nowrap;
}
/* トップページの見出し「まちのかたち」と同じ配色（ピンク→オレンジ） */
.ld__ttl em{ font-style:normal; color:var(--happy); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.ld__ttl em{ background:var(--happy-grad);
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent; }
}
/* ★1行ずつ «窓» に入れて、左から開かせます。
display:block なので Create ／ #future ／ with us. が3行に分かれます。
inline-block に戻すと横1列になり、白く抜けたまん中に収まりません。 */
.ld__w{ display:block; overflow:hidden;
padding-bottom:.14em; margin-bottom:-.14em; }
.ld__mv{ display:block; clip-path:inset(0 100% 0 0); transform:translateX(-.09em);
animation:wipeIn .80s var(--ease-out) forwards; }
/* 単語の間隔。ローディング全体は 3.2〜3.8 秒＋余韻 0.9 秒なので、
最後の単語が出そろってからも 1.5 秒ほど間があります。
★1つ目（CREATE）は、球がはじけるのと同時に出さないでください。
球は 0 秒から 1.25 秒かけて飛び、手前を通り抜ける球（.ld__orb--fly）が
消えきるのが 1.1 秒あたりです。以前は .20s で、はじけた瞬間と重なって
どちらも印象が薄くなっていました。いまは .65s ＝「はじけて、ひと呼吸おいて
から出る」位置にしています。
★3つの数字は 0.75 秒間隔でそろえています。1つ目を動かすときは、
2つ目・3つ目と社名（.ld__co の animation-delay）も同じだけずらしてください
（1つ目だけ遅らせると、2つ目とくっついて読めなくなります）。 */
.ld__w:nth-child(1) .ld__mv{ animation-delay:.65s }
.ld__w:nth-child(2) .ld__mv{ animation-delay:1.40s }
.ld__w:nth-child(3) .ld__mv{ animation-delay:2.15s }
@keyframes wipeIn{ to{ clip-path:inset(0 -.12em 0 0); transform:none } }
/* --- 社名：本文の見出しラベル（.sec__en）と同じ組み方 --- */
/* ★中央ぞろえなので、左の色帯（::before）は付けません。
左にだけ飾りがあると、文字のかたまりの軸が2本あるように見えます。 */
.ld__co{ display:block; margin-top:clamp(28px,4vh,48px);
font-family:var(--ff-jp); font-feature-settings:"palt";
font-size:clamp(16px,2.4vw,28px); font-weight:700; letter-spacing:.12em; color:var(--deep);
/* 見出しを 0.45 秒ずらしたぶん、社名も同じだけ後ろへ（2.30s → 2.75s） */
opacity:0; transform:translateX(-14px); animation:fadeUp .85s 2.75s var(--ease-out) forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
.ld__mv{ transform:none; clip-path:none; animation:none }
.ld__cat{ opacity:1; transform:none; animation:none }
.ld__co{ opacity:1; transform:none; animation:none }
}
/* ================= 3. サイト本体の背景 ================= */
/* 背景は下層ページの「3分で分かる、〇〇建設という会社。」の面（style.css の
.sec--haze）と同じものを、トップページ全体に敷いています。
土台はベタの水色で、その上に白〜水色〜青の大きな光を置いて強くぼかし、
ゆっくり漂わせる、という作りです。 */
/* ★overflow-x:clip は、ヒーローの球体が左右にはみ出しても横スクロールが
出ないようにするためのものです。
hidden ではなく clip なのは、hidden にするとヘッダーの position:sticky が
効かなくなるからです（clip はスクロールの器を作りません）。 */
/* ★地色は «白» です（2026-09-18）。以前は --sky-base（#E1F4FB）でした。
ヒーローの白い面（.hero-white）は下端へ向かって透明になるので、
スクロールするとここの色が出てきます。白にしておかないと、
«上だけ白くて途中から水色に戻る» という見え方になります。
★css/style.css の body の地色と必ず同じにしてください。 */
#site{position:relative;z-index:1;background:#fff;overflow-x:clip}
/* ★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} }
/* ★モヤは «消して» あります（2026-09-18）。地色を白にした指定に合わせたものです。
水色のモヤが残っていると、白くしたはずの面にうっすら青が乗り、
ヒーロー（真っ白）との境目が «帯» に見えます。
★戻すときは、この display:none の1行を消すだけです。
描き方（上の radial-gradient の並び）は消さずに残してあります。
★css/style.css の同じ節も一緒に直してください。 */
.bg::before{ display:none }
/* --- 光の結晶（ページ全体に散る小さなきらめき） ------------------------
球体より手前、本文より奥の層。数を絞り、点滅の周期をばらしています。
粒そのものは js/top.js が敷き詰めます（数は SPARKS）。 */
.spark{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* 芯は白のまま、外側だけ粒ごとに色を変えています。
色は js/top.js が --tint / --glow を inline で振り分けます。 */
.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 } }
/* --- 白い光の粒（ローディング背景と同じ見え方） ------------------------
ローディングの背景（js/top.js の BG_F シェーダー）が描いている、色の付かない
小さな白い玉です。同じ調子のものを本文にも散らしています。
★きらめき（.spark）とは別物です。あちらは色付き・星形で点滅、
こちらは白一色・真円で、ゆっくり上へ流れるだけです。
★画面に固定しています（.bg と同じ）。ページに貼る（absolute）と縦に
長すぎて、1画面に何個見えるかが決められなくなります。
★粒そのものは js/top.js が置きます（数は CONFIG.grains）。 */
.grain{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
transition:opacity .5s var(--ease-out); }
/* ICT & DX（土木は、デジタルでもっと面白くなる。）の面では粒を消します。
点群の3D背景の上にパステルの粒が重なると、点群のほうが読み取れません。
★消えている間は粒の動きも止めます（画面外の見えないものを動かし続けても
絵は変わらないのに、いちばん重い面で描画の負担だけが増えます）。
★付け外しは js/top.js のスクロール監視が行います。 */
.grain.is-off{ opacity:0; }
.grain.is-off i{ animation-play-state:paused; }
/* ★粒の色は1つずつ変えています。色は js/top.js が --g（R,G,B の3つの数字）を
inline で振り分けます。ここに書いてある白は、JS が動かなかったときの控えです。
★--g は「rgb の値だけ」を持たせています（#ffffff ではなく 255,255,255）。
rgba() の中で透明度と組み合わせるためで、書き方を変えると色が出なくなります。
★芯は濃く、外へ向けて消えるグラデーションのままにしてください。
単色の丸にすると、粒ではなく「点々」に見えます。 */
.grain i{ position:absolute; display:block; border-radius:50%;
background:radial-gradient(circle,
rgba(var(--g,255,255,255),.95) 0%,
rgba(var(--g,255,255,255),.78) 34%,
rgba(var(--g,255,255,255),0) 70%);
opacity:0; will-change:transform;
animation-name:grainUp; animation-timing-function:linear;
animation-iteration-count:infinite; }
/* 上へ流れて、端で消えてから元の位置に戻ります。
消さずに戻すと、その瞬間だけ粒が飛んだように見えます。
★まっすぐ上がるだけだと、動いていることに気づいてもらえません。
左右にも振って（±18px前後）、水の中の泡のように見せています。
振れ幅を大きくしすぎると、上る動きより横揺れが目立って落ち着きません。
★速さは js/top.js の dur（1周にかかる秒数）で決めています。
移動量はここの 70vh 固定なので、dur を小さくすると速くなります。 */
@keyframes grainUp{
0% { opacity:0; transform:translate3d(0,0,0) }
12% { opacity:.85 }
30% { transform:translate3d(16px,-21vh,0) }
55% { transform:translate3d(-14px,-38vh,0) }
80% { opacity:.85; transform:translate3d(11px,-56vh,0) }
100%{ opacity:0; transform:translate3d(0,-70vh,0) }
}
@media (prefers-reduced-motion:reduce){ .grain{ display:none } }
/* ================= 3-3. 右上の多角形 =================
下層ページの右上にあるもの（css/style.css の .phero__blob）と、
形も大きさも位置も同じです。ページを移っても飾りが変わって見えないよう、
片方だけ直さないでください。
★ヒーローの上には出しません。手前を飛んでいく球体（.ld__orbs）と重なると
画面が渋滞します。ヒーローを抜けたところで js/top.js が .is-on を付け、
そこから先は画面の右上に残ります（position:fixed）。
★二重構造にしています。外側（.topblob）＝位置と出し入れ、
内側（.spin）＝ずっと回っている層。1枚にまとめると、
出るときのフェードと回転が同じ transform を取り合います。
★z-index は 0。本文（.sec は 3、.hero は 2）より必ず後ろに置きます。 */
.topblob{
position:fixed; right:-6vw; top:-10vh;
width:min(60vmin,620px); height:min(60vmin,620px);
z-index:0; pointer-events:none;
/* ★消えるのは 0.9秒（ゆっくり引く）、出るのは 0.45秒（すぐ戻る）。
出るほうも 0.9秒にすると、判定の位置を早めても「遅い」と感じます。 */
opacity:0; transition:opacity .9s var(--ease-out);
}
.topblob.is-on{ opacity:1; transition-duration:.45s; }
.topblob .spin{
display:block; width:100%; height:100%;
/* 面としては水色を主役にし、端に少しだけミントを出します
（下層ページは最後の色がページごとの --accent に変わります） */
background:linear-gradient(140deg,var(--cyan-l) 0%,var(--sky) 45%,var(--mint) 100%);
clip-path:polygon(28% 0,100% 10%,86% 58%,100% 88%,44% 100%,0 76%,8% 26%);
animation:blobSpin 30s linear infinite;
}
@keyframes blobSpin{ to{ transform:rotate(360deg) scale(1.06); } }
/* 動きを減らす設定のときは、回転だけ止めて、面はそのまま出します */
@media (prefers-reduced-motion:reduce){
.topblob .spin{ animation:none; }
.topblob{ transition:none; }
}
/* ================= 4. ヘッダー・ドロワー ================= */
/* ★並びは下層ページのヘッダー（css/style.css の .header）と同じです。
左＝ロゴ、右＝メニューとENTRY。メニューを中央に戻したいときは
.logo の margin-right:auto を外してください（下層ページもあわせて）。 */
/* ★2026-08-14: 高さを会社サイトのヘッダーと同じ 92px（スクロール後72px）に固定します。
余白（padding）で高さを作ると、社名が2段になったぶんだけ伸びて 101px になり、
下層ページのヘッダー（css/style.css の .header／92px 固定）とも食い違います。
高さそのものを決めてしまえば、中身が変わっても揃ったままです。 */
/* ★z-index はドロワー（.drawer＝40）より上にすること。下にすると、メニューを
開いたときにヘッダーが覆われ、閉じるための×（ハンバーガー）が押せなくなります
（2026-08-14 修正。会社サイトも、メニューを開くとロゴとボタンが前面に出ます）。 */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;
gap:16px;height:var(--rc-header-h);padding:0 clamp(18px,3vw,40px);
transition:background .3s ease,box-shadow .3s ease,height .3s ease}
/* ★すりガラス（backdrop-filter のぼかし）は使いません。
下層ページのヘッダー（css/style.css の .header.is-solid）と同じく、
白の透明度だけで調整しています。 */
/* ★2026-08-15、ヒーローの «パステルの低ポリ» をヘッダーにも広げました。
下へスクロールして白い面になったとき、下端に «パステルの細い帯» が出ます。
灰色1本の線だと、ヒーローの色から急に事務的な見た目に切り替わっていました。
★帯の色の並びは、ヒーローの三角形と同じ «ピンク→黄→ミント→水色→青→紫» です。
順番を変えると、スクロールの前後で色の流れがつながらなくなります。 */
/* ★下へスクロールしたときも «うっすら» にします。真っ白にすると、
せっかく透過したバーがそこで急に板になります。 */
.nav.stuck{background:rgba(255,255,255,.82); backdrop-filter:blur(6px);
height:var(--rc-header-h-solid);
box-shadow:0 1px 0 rgba(6,38,63,.05)}
.nav::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
opacity:0; transition:opacity .35s ease;
background:linear-gradient(90deg,
#F6DCE9 0%, #FAE7BE 20%, #DAF0EA 40%, #DCEEFA 60%, #CFE3F8 80%, #E0DCF5 100%);
}
.nav.stuck::after{ opacity:1 }
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none;margin-right:auto}
/* --- 丸いシンボルマーク ---------------------------------------------------
会社サイト（asahi-hp/theme/asahi-construction/company-logo.png）と同じ、
マーク単体の画像です。css/style.css の .logo__mark と同じ大きさにすること。 */
/* ★2026-08-14: 会社サイトのヘッダー（.brand .logo-mark）と同じ 42×42px。
css/style.css の .logo__mark と必ず同じ大きさにすること。 */
/* object-fit:contain は必須（元画像 513×533 の縦長。無いと横に潰れます）。 */
.logo__mark{height:43px;width:43px;flex:none;display:block;object-fit:contain;transform:translateY(3px)}
/* 社名とキャッチの2段組み。会社サイトの .brand-txt と同じです。 */
.logo__txt{display:flex;flex-direction:column;line-height:1.35}
.logo__tag{font-size:.52rem;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）。 */
.logo__name{font-size:1.62rem;font-weight:700;letter-spacing:.05em;
color:var(--navy);white-space:nowrap;line-height:1.2}
/* ★メニューの見た目も下層ページ（css/style.css の .gnav）と同じにそろえています。
★2026-08-14: 会社サイトのヘッダー（asahi-hp のテーマ／style.css の .gnav li a）と
同じ組みにしました。日本語（.jp）の下に英字（.en）を小さく置き、
下線は中央から左右へ 56% まで伸びます。数値は会社サイトの実寸どおり：
.jp … 13.1px／太さ700／字間 .1em .en … 9.3px／太さ600／字間 .24em／大文字
片方だけ直すとページを移ったときにメニューが変わって見えるので、
css/style.css の .gnav と必ず両方あわせてください。 */
/* ★2026-09-18 ご指示：上部メニューの «色以外» を会社サイトのヘッダーと同じ数字に
そろえました。合わせ先は theme/asahi-construction/style.css の
「.site-header ／ .brand ／ .gnav li a」です。突き合わせた項目：
高さ 92px（スクロール後72px）／左右の余白 clamp(18px,3vw,40px)＝最大40px／要素の間隔 16px
ロゴ 43×43px・ロゴと社名の間 8px・社名 1.62rem／字間.05em・キャッチ .52rem
項目 高さ100%・左右余白 clamp(8px,.95vw,15px)・日本語と英字の間 2px
日本語 .82rem／太さ700／字間.1em／行間2
英字 Outfit／.58rem／太さ600／字間.24em／行間2
下線 下から18px
★行間は会社サイトが body の 2、採用サイトは 1.95 です。ヘッダーだけ 2 と書いて
上書きしています。消すと英字の位置が 0.4px ほどずれます。
★英字の書体は会社サイトと同じ Outfit（--ff-en-hdr）。本文の英字（--ff-en＝Inter）は
採用サイトのままです。Outfit は inc/recruit.php の ASAHI_RECRUIT_FONTS で読みます。
★css/style.css（下層ページ）と css/top.css（トップページ）の両方に同じ指定が要ります。 */
.gnav{display:flex;align-items:center;gap:0;height:100%}
.gnav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
height:100%;padding:0 clamp(8px,.95vw,15px);overflow:hidden;text-decoration:none;color:var(--navy);
font-feature-settings:"palt";white-space:nowrap}
.gnav a .jp{display:block;font-size:.82rem;font-weight:700;letter-spacing:.1em;line-height:2;
transition:transform .45s var(--ease)}
.gnav a .en{display:block;font-family:var(--ff-en-hdr);font-size:.58rem;font-weight:600;
letter-spacing:.24em;line-height:2;text-transform:uppercase;color:var(--cyan);
transition:transform .45s var(--ease)}
/* 下線もパステル。1本の水色だと、ヒーローの色数の多さから浮きます。
★項目ごとに色を変えるのは下の :nth-child です。 */
/* ★2026-09-18：下線の位置を「バーの下端から」ではなく「項目名の中央から」に
変えました。バーはスクロールすると 92px → 72px に縮みます（.nav.stuck）。
項目名は上下中央ぞろえなので 10px しか上がらないのに、下端を基準にした
下線（もとの bottom:18px）は 20px 上がり、英字に 7.4px 食い込んでいました。
26px の内訳は «項目名の高さの半分 23.4px ＋ すきま 2.6px»。
css/style.css・会社サイトの style.css と同じ考え方・同じ数字です。 */
.gnav a::after{content:"";position:absolute;left:50%;top:50%;bottom:auto;width:0;height:2px;border-radius:2px;
background:var(--uc,var(--cyan));transform:translate(-50%,var(--gnav-line-drop,26px));transition:width .35s var(--ease-out)}
/* ★セレクタは «.gnav a:nth-child(n)» です。«.gnav li a» ではありません。
このメニューは で、li で囲んでいません。
li 付きで書くと1つも当たらず、下線は既定の水色のままになります
（2026-08-15、実際にそれで «反映されていない» 状態でした）。
★色の並びはヒーローの三角形と同じ «ピンク→黄→ミント→水色→青→紫» です。 */
.gnav a:nth-child(1){ --uc:#F0A9C8 }
.gnav a:nth-child(2){ --uc:#F2C97E }
.gnav a:nth-child(3){ --uc:#8FD6C4 }
.gnav a:nth-child(4){ --uc:#8FC4EE }
.gnav a:nth-child(5){ --uc:#A7B6E8 }
.gnav a:nth-child(6){ --uc:#C2A9E6 }
/* 英字の小さいラベルも、その項目の色にそろえます（既定の水色1色だと浮きます） */
.gnav a .en{ color:var(--uc,var(--cyan)) }
.gnav a.is-current{ color:var(--navy) }
.gnav a.is-current .en{ color:var(--uc,var(--blue)) }
/* ★2026-09-18: 下線はカーソルを載せている間だけ（css/style.css と同じ扱い）。
スクロールでヘッダーが動くため、現在地の下線は出しません。 */
@media(hover:hover){.gnav a:hover::after{width:56%}}
.gnav a:hover .jp,.gnav a:hover .en{transform:translateY(-2px)}
/* ★ボタンの地もパステルの流れに合わせます（濃紺のべた塗りから変更）。
文字は白のままにしたいので、パステルの中では濃いめの青〜紫で組んでいます。
これ以上淡くすると白い文字が読めません。 */
.hbtn{display:inline-flex;align-items:center;gap:8px;flex:none;
background:linear-gradient(100deg,#5FA9D8 0%,#7E9BDE 55%,#9B90DA 100%);color:#fff;
text-decoration:none;font-family:var(--ff-en);font-size:12px;font-weight:800;letter-spacing:.14em;
padding:12px 22px;border-radius:999px;box-shadow:0 8px 20px rgba(110,130,200,.28);
transition:transform .2s ease,box-shadow .2s ease}
.hbtn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(110,130,200,.34)}
.hbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.hbtn:hover svg{transform:translateX(4px)}
/* ★2026-09-18 ご指示：大きさと3本の位置を、会社サイトのハンバーガー
（theme/asahi-construction/style.css の .menu-btn）と同じ数字にしました。
箱 72×72px（768px以下は 56×56px）／線 30×2px（768px以下は 26px）
線の間隔 margin:5px auto（768px以下は 4px）／開いたとき ±7px で45度
★色（パステルの3色）は採用サイトのままです。
★css/style.css と css/top.css の両方に同じ指定が要ります。 */
.burger{display:none;flex:none;width:72px;height:72px;border:0;background:none;cursor:pointer;
position:relative;z-index:41}
/* ★3本それぞれ違うパステルにします。紺1色だと、ヒーローの色数の中で
そこだけ «別のサイトの部品» に見えます。
★閉じるときは45度に組み合わさるので、上下2本の色が交わって見えます。
上下を近い色にすると交差が分かりにくくなるため、離れた色にしてあります。 */
.burger span{display:block;height:2px;width:30px;margin:5px auto;border-radius:2px;
transition:transform .35s var(--ease),opacity .25s ease}
.burger span:nth-child(1){ background:linear-gradient(90deg,#F0A9C8,#F2C97E) }
.burger span:nth-child(2){ background:linear-gradient(90deg,#8FD6C4,#8FC4EE) }
.burger span:nth-child(3){ background:linear-gradient(90deg,#8FC4EE,#C2A9E6) }
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:translateX(-10px)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ハンバーガーメニュー（2026-08-14 作り直し）
会社サイトのスマホメニュー（style.css の 1080px 以下の .gnav）と同じ組みです。
★css/style.css の同じ節と必ず両方あわせて直してください。 */
.drawer{position:fixed;inset:0;z-index:40;visibility:hidden;pointer-events:none;
opacity:0;transition:opacity .4s var(--ease),visibility .4s}
.drawer.is-open{visibility:visible;pointer-events:auto;opacity:1}
/* 項目を押したあとは «ふわっと消える» のを止めて即座に閉じる。0.4秒かけて
薄くなる途中に次のページの読み込みが重なると、前のページの上にメニューが
透けて残り、押した残像に見えていた（2026-09-08）。
指で押したときに機械が出す «灰色の四角» も消す。 */
.drawer.is-closing,
.drawer.is-closing .drawer__list li,
.burger.is-closing span{transition:none}
.burger,
.drawer a{-webkit-tap-highlight-color:transparent}
.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;
display:flex;flex-direction:column;align-items:center;
padding:calc(var(--rc-header-h) + 24px) 0 calc(28px + env(safe-area-inset-bottom))}
/* ★項目は上から詰めます（2026-08-14 修正）。以前は margin-block:auto で上下中央に
寄せていましたが、項目が5つと少ないため、会社サイトと並べたときに
「真ん中に固まっている」と明らかに違って見えていました。
★display:flex ＋ gap:2px は会社サイト（.gnav ul）と同じ。 */
.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;text-decoration:none;color:#2e4d61;
border-bottom:1px solid rgba(46,77,97,.14)}
/* line-height:2 は会社サイトと同じ（body の既定値）。1.4 だと1行あたり10px低くなります。 */
.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;
text-decoration:none;transition:background .35s var(--ease)}
@media (hover:hover){ .drawer__cta:hover{background:#2e7ea9;color:#fff} }
/* ================= 5. ヒーロー ================= */
/* 左右の余白と中身の箱は下層ページ（style.css の .phero / .phero__inner）と
同じ組みです。どのページを開いても、文章の始まる位置が変わりません。 */
/* ★高さは「1画面ぶん − ヘッダー」。上の .hero-white は 170vh なので、
1画面目はもちろん、次の WHO WE ARE の見出しあたりまで白のままです。
★clip-path の下だけマイナス（-130vh）にしているのは、球体をヒーローの
外まではみ出させて描くためです。0 に戻すと、下にスクロールしたときに
球が1画面目の下端でまっすぐ途切れます。
左右と上はヒーローの箱どおりに切っています。
★以前は -55vh でした。それだと、はじけて下へ流れた球（右のオレンジなど）が
WHO WE ARE の途中で水平にスパッと切れて見えていました。
-130vh にして、球が最後まで（自然に薄くなりきるまで）描かれるようにしています。
ここを詰めると、また途中で直線に切れます。 */
/* ★clip-path は付けません（2026-08-15）。以前は球体をヒーローの外まで
はみ出させるために -130vh にしていましたが、いまの図形は
.poly の overflow:hidden で箱の中に収めています。
★以下は球体だったころの覚え書きです（戻すときのために残します）。
・clip-path の上下がマイナスなのは、球体をヒーローの外まで
見せるためでした。
下（-130vh）… 下にスクロールしたとき、球が1画面目の下端でまっすぐ
途切れて見えないように。
上（-130vh）… 上へ飛んでいく球が、メニューバーの高さのところで
切られないように。メニューバーは画面の上端に貼り付く
（position:sticky）ので、ヒーローの箱はその下から始まります。
ここを 0 に戻すと、球はバーの下端でスパッと消えます。
※メニューバー自体は地色を持たない（.nav に background なし。
スクロールして .stuck が付いたときだけ白くなる）ので、
球はバーの中を通り抜けて見えます。ロゴとメニューの文字は球より前です。 */
/* ★文字は «まん中» に置きます（2026-08-15）。デザイン案では四辺を三角形が囲み、
まん中だけ白く抜けています。その抜けたところが文字の場所です。
左ぞろえに戻すと、左の三角形に文字が重なります。 */
/* ★高さは «1.3画面ぶん» です（2026-08-16、1画面ぶんから広げました）。
図形を置ける範囲を下へ伸ばすためです。
★増やしたぶん（30vh）は、そのまま下の余白に足しています。
.hero は align-items:center なので、こうしないと文字のかたまりが
真ん中＝画面の下のほうへ落ちて、開いた瞬間に見えなくなります。
高さを変えるときは、下の余白の 30vh も必ず同じだけ動かしてください。 */
.hero{position:relative;z-index:2;min-height:calc(130vh - var(--rc-header-h));
display:flex;align-items:center;justify-content:center;text-align:center;
padding:clamp(30px,5vw,60px) var(--pad) calc(30vh + clamp(70px,9vw,110px))}
/* 図形（.poly）より前に出すため、ここだけ z-index を持たせています */
.hero-in{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;width:100%}
/* 文字は読み込み画面のもの（.ld__eyebrow／.ld__ttl／.ld__co）をそのまま使います。
組みと色の指定は上の「2-3. 見出し」にまとめてあります。
★以前ここにあった .hero__en（ASAHI CONSTRUCTION）、.hero h1
（一緒に働こう！…）、.hero__tag（採用特設サイトの札）は、
読み込み画面の文字に置き換えたので削除しました。 */
.lead{margin-top:22px;max-width:41em;font-size:clamp(13.5px,1.5vw,15.5px);line-height:2.15;color:#4C6E82}
/* z-index は図形（.poly）より前。付けないと、図形に隠れて読めません */
/* --- 「下へスクロール」の合図。ヒーローの左下に置きます -------------------
★横線が伸び縮みするだけの形から、縦線を光が下へ流れる形に変えました。
横に動く線では「下へスクロールしてください」が伝わりません。
動きの向きは、してほしい操作の向きにそろえてください。
★z-index は 3。ヒーローの図形（.poly）より前に出します。2 のままだと
球が重なったときに文字が沈んで、見えなくなります。
★pointer-events:none。飾りなので、クリックの邪魔をしません。 */
.scroll{position:absolute;z-index:3;left:var(--pad);bottom:30px;
display:flex;flex-direction:column;align-items:flex-start;gap:12px;
font-family:var(--ff-en);font-size:10.5px;font-weight:700;letter-spacing:.28em;
color:var(--aqua-d);pointer-events:none}
/* 縦の細い溝。この中を光が下へ流れます */
.scroll s{position:relative;display:block;width:1px;height:56px;margin-left:2px;
background:rgba(63,163,204,.25);text-decoration:none;overflow:hidden}
.scroll s::after{content:"";position:absolute;left:0;top:0;width:100%;height:42%;
background:linear-gradient(180deg,rgba(63,163,204,0),var(--aqua-d));
animation:scDown 1.9s var(--ease-out) infinite}
/* 下まで流れたら、少し間をおいてまた上から。60%以降を「間」にしています
（切れ目なく流し続けると、うるさくて逆に目が慣れてしまいます） */
@keyframes scDown{0%{transform:translateY(-100%)}60%,100%{transform:translateY(240%)}}
@media (prefers-reduced-motion:reduce){
.scroll s::after{animation:none;transform:translateY(0);height:100%;opacity:.6}
}
/* 画面が低いときは、ヒーローの文字とぶつかるので隠します */
@media (max-height:560px){ .scroll{display:none} }
/* ================= 6. セクション共通 ================= */
/* ★z-index:3 は、ヒーローからはみ出してきた球体（.hero は z-index:2）より
本文を前に出すためのものです。セクション自体は透明なので、球は今までどおり
見えたままで、文字とカードだけが球の手前に来ます。
ここを外すと、WHO WE ARE の本文や POINT 01〜03 の上に球の色がかぶって、
文字が読みにくくなります。 */
.sec{ position:relative; z-index:3; 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; }
.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:3px;
background:var(--acc,var(--cyan)); }
#about { --acc:linear-gradient(90deg,var(--rose-d),var(--peach-d)); }
#works { --acc:linear-gradient(90deg,var(--sky-d),var(--mint-d)); }
#ict { --acc:linear-gradient(90deg,var(--cyan-l),#fff); }
#contents{ --acc:linear-gradient(90deg,var(--mint-d),var(--lemon-d)); }
#data { --acc:linear-gradient(90deg,var(--peach-d),var(--lemon-d)); }
#entry { --acc:linear-gradient(90deg,var(--lilac-d),var(--rose-d)); }
.sec__ttl{ font-size:clamp(26px,4.2vw,54px); font-weight:900; line-height:1.3; font-feature-settings:"palt"; color:var(--navy); }
.sec__lead{ margin-top:22px; max-width:64ch; color:var(--gray); font-size:15px; line-height:2.05; }
/* --- リビール（画面に入ったら出る） -------------------------------------
★カードの動きは「1つの transform を、3つの役目で分け合う」形にしています。
ばらばらに transform を書くと、あとから書いたものが前のものを消して
しまうためです（ホバーで浮かせた瞬間に登場の動きが飛ぶ、など）。
--mY / --mS / --mR … 登場ぶん（下から・小さく・少し倒れた状態から戻る）
--hY / --hS … ホバーぶん（浮き上がり・拡大）
--tX / --tY … カーソルを追いかける傾き（js/top.js が入れます）
この3つを下の calc で1つにまとめているので、
ホバーの指定は「transform を書き替える」のではなく
「--hY を変える」と書いてください。 */
.reveal{
opacity:0; transform:translate3d(0,52px,0) scale(.972);
transition:opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }
[data-stagger]>*{
opacity:0;
--mY:66px; --mS:.9; --mR:9deg; /* 登場前の位置・大きさ・傾き */
--hY:0px; --hS:1; /* ホバーの浮きと拡大 */
--tX:0deg; --tY:0deg; /* カーソル追従の傾き */
transform:
perspective(1200px)
translate3d(0, calc(var(--mY) + var(--hY)), 0)
rotateX(calc(var(--mR) + var(--tX)))
rotateY(var(--tY))
scale(calc(var(--mS) * var(--hS)));
transform-origin:50% 85%;
transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out);
}
[data-stagger].is-in>*{ opacity:1; --mY:0px; --mS:1; --mR:0deg; }
/* カーソルで傾けている最中だけ、追従を速くします（登場はゆっくりのまま）。
このクラスは js/top.js が付け外しします。 */
[data-stagger]>*.is-tilting{
transition:transform .16s cubic-bezier(.2,.7,.3,1),
box-shadow .45s var(--ease), background .45s var(--ease),
border-color .45s var(--ease) !important;
}
/* --- カードの上を走る光 --------------------------------------------------
ホバーした瞬間に、斜めの白い帯が1回だけ左から右へ抜けます。
★親に position:relative と overflow:hidden が要ります。
★帯そのものはクリックの邪魔にならないよう pointer-events:none です。 */
.pillar::after, .ict__card::after, .gate__card::after, .house__card::after{
content:""; position:absolute; z-index:4; pointer-events:none;
top:-70%; left:-75%; width:42%; height:240%; opacity:0;
background:linear-gradient(100deg,
rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 48%, rgba(255,255,255,0) 100%);
transform:rotate(15deg);
}
.pillar:hover::after, .ict__card:hover::after,
.gate__card:hover::after, .house__card:hover::after{
animation:cardShine .9s var(--ease-out) forwards;
}
/* ★left ではなく transform で動かします（left で動かすと、
はみ出した帯のぶんだけ毎回レイアウトを計算し直してカクつきます）。
520% は帯そのものの幅に対する割合です（カードの横幅の約2.2枚ぶん）。 */
@keyframes cardShine{
0% { opacity:0; transform:translate3d(0,0,0) rotate(15deg); }
14% { opacity:1; }
100%{ opacity:0; transform:translate3d(520%,0,0) rotate(15deg); }
}
/* --- 見出しラベルの線が伸びる --- */
.sec__head .sec__en::before{ width:0; transition:width .9s var(--ease-out) .18s; }
.sec__head.is-in .sec__en::before{ width:26px; }
/* --- 画面の外へ出たものを、出る前の状態に戻すとき ----------------------
js/top.js が一瞬だけ付けるクラスです。付いている間は動きを止めるので、
戻す作業が「時間ゼロ」で終わります（画面の外での作業なので見えません）。
★これが無いと、戻りきる前に画面へ入り直したとき、
中途半端な位置から動き出して、動きが弱く見えます。 */
.is-reset, .is-reset *{
transition:none !important;
animation:none !important;
}
/* --- 画像の枠（写真差し替え箇所） --- */
.fig{ position:relative; overflow:hidden; }
.fig>.ph{ position:absolute; inset:0; width:100%; height:100%; }
.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 を指定します） */
.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; }
/* 写真がまだ用意できていない枠。工種ごとに色みだけ変えて、
data-img に書いた説明文がそのまま出ます（.ph::after）。
実写に差し替えるときは class を ph--img にして、
style="background-image:url(images/photo/〇〇.jpg)" を付けてください。 */
.ph--bridge { background-image:linear-gradient(150deg,#2a4a70,#122842 60%,#050f1c); }
.ph--slope { background-image:linear-gradient(150deg,#3c4b33,#1d2a26 60%,#0a1216); }
.ph--tunnel { background-image:linear-gradient(150deg,#4a5566,#241f24 55%,#0a0a0f); }
.ph--disaster{ background-image:linear-gradient(150deg,#6b4327,#2a1c1c 60%,#0d0b10); }
/* ================= 7. INTRO / CONTENTS / DATA ================= */
/* --- INTRO：リード文・3本柱・大きな写真 --- */
.about__lead p{ font-size:clamp(16px,1.7vw,22px); line-height:2.15; font-weight:500; max-width:900px; color:var(--gray); } /* 2026-09-23 下の «人と地域を、つなぐ。» の本文（.work__txt）と同じ灰色に */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,36px); margin-top:clamp(46px,6vw,80px); }
.pillar{
background:var(--white); border-radius:8px; padding:clamp(24px,2.6vw,38px);
position:relative; overflow:hidden;
display:flex; flex-direction:column;
border-top:4px solid transparent;
box-shadow:0 10px 30px -22px rgba(6,38,63,.5);
transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out),
box-shadow .55s var(--ease);
}
/* ホバー。transform は書かず、上の --hY / --hS だけを変えます
（書き替えるとカーソル追従の傾きが消えます） */
.pillar:hover{ --hY:-12px; --hS:1.02; box-shadow:0 34px 60px -34px rgba(6,38,63,.45); }
/* 上端の色が、ホバーでカードの中へにじみ出します
（上の色の線＝border-top と同じ色。--pc は nth-child で入っています） */
.pillar::before{
content:""; position:absolute; left:0; right:0; top:0; height:180px; z-index:0;
background:radial-gradient(120% 100% at 22% 0%, var(--pc,var(--cyan)), transparent 72%);
opacity:0; transition:opacity .6s var(--ease);
}
.pillar:hover::before{ opacity:.13; }
.pillar>*{ position:relative; z-index:1; }
.pillar__no{ transition:transform .5s var(--ease), letter-spacing .5s var(--ease); }
.pillar:hover .pillar__no{ transform:translateX(4px); letter-spacing:.22em; }
.pillar__facts b{ display:inline-block; transition:transform .55s var(--ease); }
.pillar:hover .pillar__facts b{ transform:translateY(-5px) scale(1.06); }
/* 3本柱は、上端の線と POINT の文字を1枚ずつ違う色にしています */
.pillars .pillar:nth-child(1){ border-top-color:var(--rose); --pc:var(--rose-d); }
.pillars .pillar:nth-child(2){ border-top-color:var(--peach); --pc:var(--peach-d); }
.pillars .pillar:nth-child(3){ border-top-color:var(--mint); --pc:var(--mint-d); }
.pillar__no{ font-family:var(--ff-en); font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--pc,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"; color:var(--navy); }
.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); list-style:none;
}
/* 数字は「データで見る旭建設」（data.html）と同じ Manrope。
tabular-nums は、数える動き（js の cnt）で数字が入れ替わっても
横幅がガタつかないようにするためです。 */
.pillar__facts b{
font-family:var(--ff-num); font-variant-numeric:tabular-nums;
font-size:clamp(46px,4.6vw,68px); font-weight:800;
color:var(--blue); letter-spacing:-.02em; line-height:1.05;
}
/* li の文字サイズは、そのまま「単位」（件・分・%・年・名）の大きさになります。
数字のとなりに小さく置くと読み取りづらいので、数字の3割ほどの大きさにしています。 */
.pillar__facts li{ font-size:clamp(18px,1.7vw,24px); font-weight:800; color:var(--pc,var(--cyan)); }
.pillar__facts b{ margin-right:3px; }
.pillar__facts span{ display:block; font-size:12.5px; color:var(--gray-l); margin-top:8px; font-weight:400; line-height:1.7; }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr; } }
@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 li{ font-size:16px; }
.pillar__facts span{ margin-top:5px; font-size:11.5px; }
}
.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; color:var(--navy); }
@media (max-width:900px){ .bigvisual .fig{ aspect-ratio:4/3; } }
/* --- 会社紹介動画のカード -------------------------------------------------
サムネイルを押すと、その枠の中に YouTube を差し込んで再生します（js/video.js）。
ページを開いた時点では画像だけなので、トップページの表示は重くなりません。
同じ見た目のカードを career.html でも使っています（css/style.css の 20.5 章）。
片方の見た目を変えたら、もう一方も合わせてください。
サムネイルは images/yt-company.jpg（YouTube の maxresdefault を保存したもの）。 */
.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); }
.vid__thumb{ display:block; position:relative; aspect-ratio:16/9; background:var(--navy); }
.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:62px; height:62px; 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:10px 0 10px 17px;
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(20px,2.4vw,30px); }
.vid__ttl{ display:block; font-size:clamp(16px,1.8vw,21px); font-weight:900; line-height:1.6; color:var(--navy); }
.vid__txt{ display:block; margin-top:10px; font-size:13.5px; line-height:2; color:var(--gray); }
.vid__src{ display:block; margin-top:12px; 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; }
/* 横長版。サムネイルを左、文章を右に置きます（トップページで使用） */
.vid--wide{ display:grid; grid-template-columns:minmax(0,1.05fr) 1fr; align-items:stretch; margin-top:clamp(40px,5vw,72px); }
.vid--wide .vid__body{ align-self:center; }
@media (max-width:760px){ .vid--wide{ grid-template-columns:1fr; } }
/* --- 特集版（トップページの会社紹介動画だけ） ----------------------------
上の白いカードを土台にして、ここで「見たくなる見た目」に着せ替えています。
・右側の文章の面は、白 → 淡い水色のグラデーション（明るいまま）
・中身は MOVIE のラベル（小さな点が点滅）／キャッチコピー／説明の一文／
再生の案内、の4つだけ。読みやすさを優先して、間隔を広くとっています
・再生ボタンを大きくし、輪が広がる動きを足しています
・写真の左下だけ、うっすら影を敷いて PLAY MOVIE の文字を置きます
★このファイル（top.css）はトップページ専用なので、career.html の動画カードは
今までどおりの白いカードのままです。両方の見た目をそろえたくなったときは、
この章をまるごと css/style.css の 20.5 章へコピーしてください。
★色の面はすべて「透明度で重ねた色」です。すりガラス（backdrop-filter）は
使っていません。もっと濃く（薄く）したいときは、rgba の最後の数字だけを
上げ下げしてください。 */
.vid--feature{
grid-template-columns:minmax(0,1.18fr) 1fr;
border-color:var(--cyan-p); border-radius:16px; background:var(--white);
box-shadow:0 26px 60px -40px rgba(6,38,63,.35);
}
/* 写真の左下だけ、ごく薄く影を落として PLAY MOVIE を読めるようにします
（全体を暗くすると、写真そのものが暗く見えてしまうため） */
.vid--feature .vid__thumb::after{
content:""; position:absolute; inset:auto 0 0 0; height:34%;
background:linear-gradient(to top, rgba(6,38,63,.5), rgba(6,38,63,0));
pointer-events:none;
}
.vid__hint{
position:absolute; z-index:1;
left:clamp(14px,1.6vw,24px); bottom:clamp(14px,1.6vw,24px);
display:inline-flex; align-items:center; gap:9px;
font-family:var(--ff-en); font-size:11px; font-weight:800; letter-spacing:.18em; color:#fff;
}
.vid__hint::before{ content:""; width:24px; height:1.5px; background:var(--cyan); }
/* 再生ボタン。大きめにして、外側に輪が広がります */
.vid--feature .vid__play{
width:clamp(64px,6vw,88px); height:clamp(64px,6vw,88px);
background:rgba(0,192,240,.92); border-color:rgba(255,255,255,.9);
}
.vid--feature .vid__play::before{
content:""; position:absolute; inset:-2px; border-radius:50%;
border:1.5px solid rgba(255,255,255,.8);
animation:vidRipple 2.6s var(--ease-out) infinite;
}
@keyframes vidRipple{
0%{ transform:scale(1); opacity:.75 }
70%,100%{ transform:scale(1.8); opacity:0 }
}
.vid--feature:hover .vid__play{ background:var(--blue); }
/* 文章の面。右上から淡い水色が差してくる程度で、地は白のままです */
.vid--feature .vid__body{
padding:clamp(26px,3vw,46px);
background:
radial-gradient(125% 100% at 100% 0%, rgba(0,192,240,.16), rgba(0,192,240,0) 64%),
linear-gradient(180deg, rgba(241,250,253,.9), rgba(255,255,255,0) 70%);
}
.vid__label{ display:flex; align-items:center; gap:12px; }
.vid__badge{
display:inline-flex; align-items:center; gap:7px; flex:none;
padding:7px 15px; border-radius:999px;
background:var(--cyan); border:1px solid var(--cyan);
font-family:var(--ff-en); font-size:13px; font-weight:700; letter-spacing:.14em; color:#fff;
}
.vid__badge::before{
content:""; width:7px; height:7px; border-radius:50%; background:#fff;
animation:vidBlink 1.9s var(--ease) infinite;
}
@keyframes vidBlink{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.3; transform:scale(.65) } }
.vid--feature .vid__ttl{
font-size:16px; font-weight:700; letter-spacing:.08em; line-height:1; color:var(--navy);
}
/* 中身は「ラベル → キャッチ → 一文 → 再生の案内」の4つだけです。
詰まって見えないよう、間隔は広めにとっています。
★項目を足すと一気に窮屈になる場所なので、増やさないでください。 */
.vid__catch{
margin-top:22px;
font-size:clamp(23px,2.6vw,36px); font-weight:600; line-height:1.65;
color:var(--navy); font-feature-settings:"palt";
}
.vid__catch em{
font-style:normal; color:var(--blue);
background:linear-gradient(transparent 66%, var(--cyan-p) 66%);
}
.vid--feature .vid__txt{ margin-top:20px; font-size:14px; line-height:2.1; color:var(--gray); }
.vid__cta{
display:inline-flex; align-items:center; gap:11px; margin-top:30px;
font-size:12.5px; font-weight:700; color:var(--blue);
}
.vid__ctaico{
position:relative; flex:none; width:28px; height:28px; border-radius:50%;
background:var(--cyan-p); border:1.5px solid var(--cyan);
transition:background .35s var(--ease), border-color .35s var(--ease);
}
.vid__ctaico::after{
content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
border-style:solid; border-width:5px 0 5px 8px;
border-color:transparent transparent transparent var(--blue);
transition:border-left-color .35s var(--ease);
}
.vid--feature:hover .vid__ctaico{ background:var(--cyan); border-color:var(--cyan); }
.vid--feature:hover .vid__ctaico::after{ border-left-color:#fff; }
/* 再生が始まったら、写真側の飾り（暗いぼかしと PLAY MOVIE）は消えます
（js/video.js が .vid__thumb の中身を YouTube に入れ替えるため） */
.vid--feature.is-playing .vid__thumb::after{ display:none; }
@media (max-width:760px){
.vid--feature{ grid-template-columns:1fr; }
}
/* --- WORKS：私たちがつくっているもの -----------------------------------
もとは下層ページ（css/style.css の 15. WORKS）にあったものを、
「会社を知る」ページの廃止にともないトップページへ持ってきました。
写真と文章を左右に並べ、1本おきに左右を入れ替えます（.work--rev）。
最後の災害復旧だけ、写真を横長にして1列で見せます（.work--wide）。 */
.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; }
/* --- WORKS の登場 --------------------------------------------------------
写真は外から滑り込み、文章は反対側から少し遅れて入ります。
左右どちらから来るかは --fromX で決めています（1本おきに入れ替わるので、
.work--rev は符号を逆にしています）。 */
.work{ --fromX:-70px; }
.work--rev{ --fromX:70px; }
.work--wide{ --fromX:0px; }
.work .work__img{
opacity:0; transform:translate3d(var(--fromX),0,0);
transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.work.is-in .work__img{ opacity:1; transform:none; }
.work .work__body{
opacity:0; transform:translate3d(calc(var(--fromX,0px) * -.5), 0, 0);
transition:opacity 1.05s var(--ease-out) .16s, transform 1.05s var(--ease-out) .16s;
}
.work.is-in .work__body{ opacity:1; transform:none; }
/* 写真は少し寄って置き、スクロールに合わせて上下にずらします（js/top.js）。
ホバーでゆっくり寄ります。translate と scale を別々の指定にしているのは、
スクロール追従（速い）と寄り（ゆっくり）の時間を分けるためです。 */
.work__img .ph{
scale:1.18; translate:0 var(--pcY,0px);
transition:scale 1.2s var(--ease-out);
}
.work.is-in .work__img .ph{ scale:1.1; }
.work.is-in .work__img:hover .ph{ scale:1.16; }
/* タグは1つずつ、ぽんぽんと出ます */
.work .work__tags li{
opacity:0; transform:translate3d(0,12px,0);
transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), background .35s var(--ease), color .35s var(--ease);
}
.work.is-in .work__tags li{ opacity:1; transform:none; }
.work.is-in .work__tags li:nth-child(1){ transition-delay:.42s }
.work.is-in .work__tags li:nth-child(2){ transition-delay:.50s }
.work.is-in .work__tags li:nth-child(3){ transition-delay:.58s }
.work.is-in .work__tags li:nth-child(4){ transition-delay:.66s }
.work.is-in .work__tags li:nth-child(5){ transition-delay:.74s }
.work__tags li:hover{ background:var(--navy); color:#fff; }
/* 工種のバッジは、入ってきたあとに一度だけ弾みます */
.work.is-in .work__cat{ animation:catPop .7s var(--ease-out) .3s both; }
@keyframes catPop{
0% { opacity:0; transform:translate3d(0,10px,0) scale(.86); }
60% { opacity:1; transform:translate3d(0,0,0) scale(1.06); }
100%{ opacity:1; transform:none; }
}
.work__cat{
/* ★2026-09-22：「小さい」との指定で 11.5px → 16px。見出し（.work__ttl）と
本文（17px）の間に入る文字なので、本文より大きくはしていません。
文字を大きくしたぶん、丸みのある面（padding）も広げています。 */
display:inline-block; font-size:16px; font-weight:700; letter-spacing:.1em; color:var(--navy);
padding:9px 20px; border-radius:999px; background:var(--sky); margin-bottom:20px;
}
/* 工種ごとにバッジの色を変えています（ローディングの球と同じパレット） */
.works .work:nth-child(1) .work__cat{ background:var(--sky); }
.works .work:nth-child(2) .work__cat{ background:var(--mint); }
.works .work:nth-child(3) .work__cat{ background:var(--lilac); }
.works .work:nth-child(4) .work__cat{ background:var(--lemon); }
.works .work:nth-child(5) .work__cat{ background:var(--rose); }
.work__cat--accent{ background:var(--peach); color:var(--navy); }
.work__ttl{ font-size:clamp(24px,3.2vw,42px); font-weight:900; line-height:1.36; margin-bottom:20px;
font-feature-settings:"palt"; color:var(--navy); }
.work__txt{ font-size:17px; color:var(--gray); line-height:2.05; }
.work__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; list-style:none; }
.work__tags li{ font-size:12px; padding:6px 14px; background:var(--white); border-radius:999px; color:var(--gray); }
.work--wide{ grid-template-columns:1fr; }
/* ここだけ「文章 → 写真」の順にしています（他は写真が先）。
HTML の並びは他の項目とそろえたまま、order で上下を入れ替えています。 */
.work--wide .work__img{ aspect-ratio:24/7; order:2; }
.work--wide .work__body{ max-width:920px; }
.work__note{ margin-top:22px; padding:20px 24px; background:var(--white); border-left:3px solid var(--peach-d);
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; }
}
@media (max-width:620px){
.works{ gap:34px; }
.work__cat{ font-size:14px; padding:7px 16px; margin-bottom:14px; }
.work__ttl{ font-size:21px; margin-bottom:14px; }
.work__txt{ font-size:15px; line-height:1.95; }
.work__tags{ margin-top:16px; }
}
/* ==========================================================================
ICT & DX の見出しの後ろ：3D点群モーフィング（.pc-scene）
--------------------------------------------------------------------------
旭建設コーポレートサイト（asahi-hp）のトップページと同じ点群です。
ただし向こうは複数セクションを1枚の背景でつなぐ大きな仕掛けなのに対し、
ここは「見出しブロックの後ろだけ」に限定しています。
★キャンバスは透明です（renderer は alpha:true、clearColor のα＝0）。
点だけが .sec--navy の濃い青の上に浮くので、面の色にも白抜き文字にも
手を入れる必要がありません。
・.pc-scene や .pc-scene__stage に背景色を付けないでください。
面が二重になり、前後のセクションから浮きます（一度やって戻しました）。
★点群が動くのは PC（901px以上）だけ。スマホ・タブレットでは器ごと隠し、
スクリプトも読み込みません（重い形状データも組みません）。
★キャンバスの大きさは clientWidth / clientHeight を見ています。
高さが潰れると図形も潰れるので、min-height を下げすぎないでください。
========================================================================== */
.pc-scene{ position:relative; }
/* 中身は必ず点群より前面へ */
.pc-scene>*:not(.pc-scene__stage){ position:relative; z-index:1; }
.pc-scene__stage{ display:none; }
@media (min-width:901px){
/* 面いっぱい・端から端まで。
★absolute の inset:0 は「親のパディングの内側」ではなく
パディングを含んだ箱いっぱいに広がります。なので .sec の余白を
打ち消す負のマージンは要りません（入れると二重にずれます）。
★.sec--full>* の max-width が効かないよう、下で打ち消しています。 */
.sec--full>.pc-scene__stage{ max-width:none; margin-inline:0; }
.pc-scene__stage{
display:block; position:absolute; inset:0; z-index:0;
pointer-events:none; overflow:hidden;
}
.pc-scene__canvas{ display:block; width:100%; height:100%; }
/* 文字の下に点や方眼が来ると読みにくいので、文字のまわりに白いにじみを置きます。
★背景が明るい面になったので、影は白です（濃紺の影に戻すと、文字のまわりだけ
黒く曇って汚れて見えます）。
★膜（半透明の長方形）は置かないでください。どんなグラデーションで書いても
器の縁が直線で出て、面の上に板を貼ったように見えます
（linear／radial の両方で試して、どちらも駄目でした）。
輪郭を持たない影で処理するのが正解です。 */
.pc-scene .sec__en,
.pc-scene .sec__ttl,
.pc-scene .sec__lead{ text-shadow:0 0 16px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.9); }
/* カードは後ろの点が透けるように。
★不透明にしないでください。点群がカードの下で完全に隠れて、
面の上半分にしか点が無いように見えます。
★すりガラス（backdrop-filter のぼかし）は使いません。ぼかす代わりに
面の透明度を下げて（＝白を濃くして）文字を読みやすくしています。 */
.pc-scene .ict__card{
background:rgba(255,255,255,.86);
}
.pc-scene .ict__card:hover{ background:rgba(255,255,255,.92); }
}
/* --- ICT & DX ------------------------------------------------------------
★以前はこのセクションだけ濃い青の面（.sec--navy）でしたが、他のセクションと
同じ背景（#site の水色のもや）にそろえたため、いまトップページで
.sec--navy を使っている場所はありません。青い面に戻したくなったときのために
定義だけ残しています（index.html の #ict に sec--navy を足せば戻ります）。
ただし、戻す場合はカードの中の文字色（下の濃紺）も白抜きに戻してください。 */
.sec--navy{
background:linear-gradient(150deg,#2978be 0%,#35a0cb 55%,#276eab 100%);
color:var(--white);
}
.sec--navy .sec__ttl{ color:var(--white); }
.sec--navy .sec__en{ color:var(--cyan-l); }
.sec--navy .sec__lead{ color:rgba(255,255,255,.85); }
.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(20px,2vw,28px);
background:rgba(255,255,255,.86); border:1px solid var(--line);
transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out),
border-color .5s var(--ease), background .5s var(--ease),
box-shadow .5s var(--ease);
}
/* ホバーは --hY / --hS で（transform を直接書かないこと。上の 6章を参照） */
.ict__card:hover{
border-color:var(--blue); background:rgba(255,255,255,.94);
--hY:-12px; --hS:1.025;
box-shadow:0 30px 54px -30px rgba(6,38,63,.4);
}
.ict__icon{ display:block; width:42px; height:42px; margin-bottom:16px; border-radius:11px;
background:var(--sky-l); border:1px solid var(--line); position:relative;
transition:transform .55s var(--ease), background .5s var(--ease), border-color .5s var(--ease); }
/* アイコンはホバーで一度くるっと回ります */
.ict__card:hover .ict__icon{ transform:rotate(-8deg) scale(1.12) translateY(-2px); border-color:var(--blue); }
.ict__icon::after{ transition:transform .55s var(--ease); }
.ict__card:hover .ict__icon::after{ transform:translate(-50%,-50%) rotate(18deg); }
/* 「従来 → 現在」の矢印が、ホバーで右へ伸びます */
.ict__icon::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:18px; height:18px; background:var(--navy); }
.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(11,111,196,.22); }
.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; }
/* アイコンの色は6枚とも変えています。
★カードが明るいので、パステル（--sky など）ではなく濃い方（--sky-d など）を
使ってください。淡い色だと白い面に溶けて形が見えなくなります。 */
.ict__card:nth-child(1) .ict__icon::after{ background:var(--sky-d); }
.ict__card:nth-child(2) .ict__icon::after{ background:var(--mint-d); }
.ict__card:nth-child(3) .ict__icon::after{ background:var(--lemon-d); }
.ict__card:nth-child(4) .ict__icon::after{ background:var(--peach-d); }
.ict__card:nth-child(5) .ict__icon::after{ background:var(--rose-d); }
.ict__card:nth-child(6) .ict__icon::after{ background:var(--lilac-d); }
.ict__card h3{ font-size:clamp(16px,1.7vw,19px); font-weight:700; margin-bottom:10px; line-height:1.55; color:var(--navy); }
.ict__card p{ font-size:13.5px; line-height:1.85; color:var(--gray); }
/* ★「従来◯◯ → 現在◯◯」の比較（.ict__ba）は、実際と違う数字が
混じっていたため、6枚とも削除しました（2026-09-22）。
入れ直すときは、必ず社内で確認の取れた数字だけにしてください。
それに合わせて、カードの余白・アイコン・行間を詰めてあります。 */
.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(--blue); }
@media (max-width:1000px){ .ict__cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .ict__cards{ grid-template-columns:1fr; } }
/* --- HOUSING：社宅 -------------------------------------------------------
当社所有の賃貸物件を社宅として使える、という案内の2枚組カード。
★写真は images/housing/ に置いています。差し替えるときは ![]()
を。
★最後の注意書き（.house__note）を消さないでください。
「社員専用ではないので空き次第」という条件を外すと、
入社時に必ず部屋があるという約束に読めてしまいます。 */
.house{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,32px); }
.house__card{
position:relative;
background:var(--white); border-radius:10px; overflow:hidden;
box-shadow:0 12px 34px rgba(6,38,63,.07);
transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out),
box-shadow .5s var(--ease);
}
/* ホバーは --hY / --hS で（transform を直接書かないこと。上の 6章を参照） */
.house__card:hover{ --hY:-12px; --hS:1.015; box-shadow:0 34px 66px -28px rgba(6,38,63,.34); }
.house__img{ aspect-ratio:16/10; background:var(--sky); overflow:hidden; }
/* 写真は少し大きめに置いておき、スクロールに合わせて上下にずらします
（ずらし幅は js/top.js。translate と scale を別々の指定にしているのは、
ゆっくりの拡大と、スクロール追従の移動がぶつからないようにするためです）。 */
.house__img img{
width:100%; height:100%; object-fit:cover; display:block;
scale:1.1; translate:0 var(--pcY,0px);
transition:scale .8s var(--ease);
}
.house__card:hover .house__img img{ scale:1.17; }
.house__body{ padding:clamp(22px,2.6vw,34px); }
.house__area{
display:inline-block; padding:5px 14px; border-radius:999px;
background:var(--sky); color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.04em;
}
.house__ttl{ margin:14px 0 20px; font-size:clamp(19px,2.2vw,26px); font-weight:900; line-height:1.5; }
.house__spec{ border-top:1px solid var(--line); }
.house__spec>div{
display:grid; grid-template-columns:5.5em 1fr; gap:14px;
padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.7;
}
.house__spec dt{ color:var(--gray); font-weight:700; }
.house__spec dd{ margin:0; color:var(--navy); }
.house__txt{ margin-top:18px; font-size:13.5px; line-height:2; color:var(--gray); }
.house__note{
margin-top:clamp(26px,3.2vw,44px);
background:var(--alert-bg); border:1px solid var(--alert-l);
border-left:6px solid var(--alert); border-radius:0 10px 10px 0;
padding:clamp(24px,3vw,40px);
}
.house__note h3{
display:flex; align-items:center; gap:11px;
font-size:clamp(18px,2vw,21px); font-weight:700; color:var(--alert);
letter-spacing:.02em; line-height:1.4; margin-bottom:16px;
}
/* 見出しの頭に付く «!» の丸。文字ではなく印なので読み上げからは外しています */
.house__note__mark{
flex:none; display:grid; place-items:center; width:28px; height:28px;
border-radius:50%; background:var(--alert); color:var(--white);
font-size:17px; font-weight:700; line-height:1;
}
.house__note p{ font-size:15.5px; line-height:2.05; color:var(--navy); }
.house__note p + p{ margin-top:16px; }
/* ★ここだけ赤。読み落とされると困るところに限って使っています */
.house__note b{ color:var(--alert); font-weight:700; }
@media (max-width:820px){
.house{ grid-template-columns:1fr; }
.house__spec>div{ grid-template-columns:5em 1fr; gap:10px; font-size:13px; }
}
/* --- CONTENTS：各ページへの入口カード --- */
.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); text-decoration:none;
padding:clamp(24px,2.6vw,40px); min-height:290px; display:flex; flex-direction:column;
box-shadow:0 10px 30px -24px rgba(6,38,63,.5);
transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out),
box-shadow .6s var(--ease);
}
/* ホバーは --hY / --hS で（transform を直接書かないこと。上の 6章を参照） */
.gate__card:hover{ --hY:-16px; --hS:1.03; box-shadow:0 44px 70px -32px rgba(6,38,63,.42); }
.gate__card:active{ --hY:-6px; --hS:1.005; }
.gate__blob{
position:absolute; right:-30%; bottom:-40%; width:75%; aspect-ratio:1;
/* 背景に浮いている球体と同じ描き方。色をカードごとに変えています */
background:radial-gradient(circle at var(--bp,38% 32%),
#FFFFFF 0%, var(--b0,#F7FCFE) 28%, var(--b1) 64%, var(--b2) 100%);
/* --- 正七角形 ---
★2026-08-15、正しい正七角形に直しました。
以前は polygon(50% 0,92% 18%,100% 62%,68% 100%,20% 92%,0 44%,14% 10%) と
手で置いた値で、辺の長さも角度もバラバラの «不等辺七角形» でした。
★数字は「中心(50%,50%)から半径50%の円に、頂点を7つ等間隔（51.43度ずつ）
打った位置」です。上（12時）から時計回りに並んでいます。
電卓で出した値なので、手で丸めないでください。辺の長さが狂います。
★この箱は aspect-ratio:1（＝正方形）です。％は正方形に対する割合なので、
箱が正方形であるかぎり «正» 七角形のままです。
aspect-ratio を外したり、width と height を別々に指定したりすると、
縦か横につぶれて正七角形ではなくなります。
★拡大（scale）は縦横おなじ倍率なので、大きくしても正七角形のままです。 */
clip-path:polygon(50.00% 0.00%,89.09% 18.83%,98.75% 61.13%,71.69% 95.05%,
28.31% 95.05%,1.25% 61.13%,10.91% 18.83%);
z-index:0;
/* 置いてあるだけだと止まって見えるので、ふだんもゆっくり回しています。
★6枚が同時に同じ向きを向かないよう、下で1枚ずつ遅らせています。
★ホバー中は止めて、下の「90度＋拡大」に切り替わります。 */
animation:blobDrift 18s ease-in-out infinite;
/* ★ホバーの回転・拡大は、transform ではなく rotate / scale で書きます。
この2つは transform とは別の property なので、上の漂い（transform を
動かすアニメーション）に «重ねがけ» できます。
★以前は transform で書いていたため、ホバーの瞬間に漂いを止める
（animation:none）必要があり、そこで一度ぱっと基準の向きへ戻ってから
回り始めていました。その «戻り» のせいで回転が読み取れず、
「回っていない」ように見えていました（2026-08-15 の指摘）。
transform に戻さないでください。 */
rotate:0deg; scale:1;
transition:rotate .85s var(--ease-out), scale .85s var(--ease-out);
}
@keyframes blobDrift{
0% { transform:rotate(0deg) scale(1); }
35% { transform:rotate(14deg) scale(1.08); }
70% { transform:rotate(-9deg) scale(1.04); }
100%{ transform:rotate(0deg) scale(1); }
}
.gate__card:nth-child(1) .gate__blob{ animation-delay:-1.5s }
.gate__card:nth-child(2) .gate__blob{ animation-delay:-4.5s }
.gate__card:nth-child(3) .gate__blob{ animation-delay:-7.5s }
.gate__card:nth-child(4) .gate__blob{ animation-delay:-10.5s }
.gate__card:nth-child(5) .gate__blob{ animation-delay:-13.5s }
.gate__card:nth-child(6) .gate__blob{ animation-delay:-16.5s }
/* 6枚とも別々のパステル。--gc は数字の縁取りに使う濃いほうの色です */
.gate__card:nth-child(1){ --gc:var(--rose-s) }
.gate__card:nth-child(2){ --gc:var(--peach-s) }
.gate__card:nth-child(3){ --gc:var(--leaf-s) }
.gate__card:nth-child(4){ --gc:var(--mint-s) }
.gate__card:nth-child(5){ --gc:var(--lilac-s) }
.gate__card:nth-child(6){ --gc:var(--sky-s) }
/* 球体の色。いちばん濃い --b2 を淡くして、面の主張を弱めています */
.gate__card:nth-child(1) .gate__blob{ --b0:#FFF6F9; --b1:#FFE6EF; --b2:#FFCCDF; --bp:34% 28% } /* ピンク */
.gate__card:nth-child(2) .gate__blob{ --b0:#FFF8F2; --b1:#FFE9D3; --b2:#FFCFAA; --bp:44% 30% } /* オレンジ */
.gate__card:nth-child(3) .gate__blob{ --b0:#F8FDF3; --b1:#EAF7DE; --b2:#CFEDB8; --bp:32% 38% } /* 若草 */
.gate__card:nth-child(4) .gate__blob{ --b0:#F5FDFA; --b1:#E0F7EE; --b2:#B6E9D6; --bp:46% 26% } /* ミント */
.gate__card:nth-child(5) .gate__blob{ --b0:#FAF8FE; --b1:#ECE6FD; --b2:#D6CDF8; --bp:30% 34% } /* ラベンダー */
.gate__card:nth-child(6) .gate__blob{ --b0:#F5FCFE; --b1:#DEF3FC; --b2:#BCE3F4; --bp:42% 36% } /* 水色 */
/* ホバー：くるっと少し回りながら、大きくなります。
★38度は «回ったと分かる» ぎりぎりの角度です。7角形なので、これより小さいと
«少し形が変わっただけ» に見えます。逆に90度まで回すと «向きが変わった»
だけになって、くるっとした感じが出ません。
★漂い（blobDrift）は止めません。止めると、そこで一度戻って見えます。 */
.gate__card:hover .gate__blob{ rotate:38deg; scale:1.3; }
/* rotate / scale を別々に書けない古いブラウザ用。
こちらは今までどおり transform で、漂いを止めてから回します。 */
@supports not (rotate: 1deg){
.gate__blob{ transition:transform .85s var(--ease-out); }
.gate__card:hover .gate__blob{ animation:none; transform:rotate(38deg) scale(1.3); }
}
.gate__card>*:not(.gate__blob){ position:relative; z-index:2; }
/* 01・02 …の番号。
以前は中抜き（-webkit-text-stroke）で出していましたが、細い輪郭だけだと
数字が読み取りにくかったので、Manrope（--ff-ld）でふつうに塗って出します。
目立ちすぎないように、少しだけ薄くしてホバーで濃くなります。 */
.gate__no{
font-family:var(--ff-ld); font-weight:600; letter-spacing:.04em;
font-size:clamp(24px,2.4vw,34px); line-height:1;
color:var(--gc,var(--aqua-d)); opacity:.72;
transition:opacity .5s var(--ease), color .5s var(--ease);
}
.gate__card:hover .gate__no{ opacity:1; transform:translateY(-4px) scale(1.08); }
.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(--gc,var(--blue)); }
.gate__ja{ font-size:clamp(18px,2vw,24px); font-weight:600; margin-top:6px; color:var(--navy); }
.gate__desc{ margin-top:16px; font-size:13px; line-height:1.95; color:var(--gray); }
/* 中身も、カードより少しだけ大きく動かして奥行きを出します
（時間差をつけると、ばらばらに浮き上がって見えます） */
.gate__no,.gate__en,.gate__ja,.gate__desc,.gate__go{
transition:transform .55s var(--ease), opacity .5s var(--ease), color .5s var(--ease);
}
.gate__en{ transition-delay:.02s } .gate__ja{ transition-delay:.05s }
.gate__desc{ transition-delay:.08s } .gate__go{ transition-delay:.11s }
.gate__card:hover .gate__en{ transform:translate3d(0,-7px,0); letter-spacing:.05em; }
.gate__card:hover .gate__ja{ transform:translate3d(0,-5px,0); }
.gate__card:hover .gate__desc{ transform:translate3d(0,-3px,0); }
.gate__card:hover .gate__go{ transform:translate3d(4px,-2px,0); }
.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(--gc,var(--blue));
}
.gate__go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; 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); } }
@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; }
.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%; }
}
/* --- DATA：数字のダイジェスト --- */
.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(--white); padding:clamp(24px,3vw,40px) 18px; text-align:center; border-top:3px solid transparent; }
/* 4つのマスは、上端の線と単位の文字を1つずつ違う色にしています */
.digest__cell:nth-child(1){ border-top-color:var(--rose); --dc:var(--rose-d); }
.digest__cell:nth-child(2){ border-top-color:var(--peach); --dc:var(--peach-d); }
.digest__cell:nth-child(3){ border-top-color:var(--lemon); --dc:var(--lemon-d); }
.digest__cell:nth-child(4){ border-top-color:var(--mint); --dc:var(--mint-d); }
/* ★ここの数字は Inter（--ff-en）のままです。Manrope にそろえたくなったら、
下の --ff-en を --ff-num に替えてください（POINT の数字と同じになります）。 */
.digest__cell b{ font-family:var(--ff-en); font-variant-numeric:tabular-nums; font-size:clamp(34px,4.6vw,58px); font-weight:800; line-height:1; color:var(--blue); letter-spacing:-.02em; }
/* 単位（日・時間・%・件）。小さいと読み取りづらいので、数字の3割ほどの大きさです */
.digest__cell i{ font-style:normal; font-size:clamp(16px,1.5vw,21px); font-weight:800; color:var(--dc,var(--cyan)); margin-left:5px; }
.digest__cell span{ display:block; margin-top:12px; font-size:12.5px; color:var(--gray); line-height:1.7; }
@media (max-width:760px){ .digest{ grid-template-columns:repeat(2,1fr); } }
.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; }
/* 注記のあとに置く「データで見る旭建設へ」ボタンの器。中央ぞろえ専用です */
.data__act{ margin-top:clamp(24px,3vw,40px); text-align:center; }
@media (max-width:600px){ .data__act .btn{ width:100%; justify-content:center; padding-inline:20px; } }
.cnt{ font-variant-numeric:tabular-nums; }
/* --- PC / SP の出し分け --- */
.sp{ display:none; }
@media (max-width:767px){ .sp{ display:inline; } }
.pc{ display:inline; }
@media (max-width:767px){ .pc{ display:none; } }
/* ================= 8. CONTACT・フッター ================= */
.btn{
position:relative; display:inline-flex; align-items:center; gap:14px;
padding:18px 32px; border-radius:999px; overflow:hidden; text-decoration:none;
font-size:14px; font-weight:700; letter-spacing:.07em; line-height:1;
transition:color .45s var(--ease), border-color .45s var(--ease);
isolation:isolate;
}
.btn>*{ position:relative; z-index:2; }
.btn svg{ width:18px; height:18px; position:relative; z-index:2; fill:none; stroke:currentColor;
stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--ease); }
.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--lg{ padding:24px 46px; font-size:15px; }
/* 線だけのボタン。カーソルを合わせると濃紺が左から流れ込みます */
.btn--line{ border:1.5px solid var(--navy); color:var(--navy); }
.btn--line::before{ background:var(--navy); }
.btn--line:hover{ color:var(--white); }
/* --- CONTACT ---------------------------------------------------------------
面で区切りません。背景も余白のリズムも本文と同じまま、
中央にそろえた見出しと大きなボタンだけで「最後のひと言」にしています。
★下層ページのフッター（css/style.css の .footer__cta）も同じ形にそろえています。
片方だけ直すと見た目がずれるので、変えるときは両方あわせてください。 */
.contact__grid{ text-align:center; }
/* CONTACT は中央ぞろえなので、見出しラベルの左の線は出しません
（出すと画面の左端に線だけが取り残されます） */
.contact__grid .sec__en{ padding-left:0; margin-bottom:24px; }
.contact__grid .sec__en::before{ content:none; }
.contact__ttl{
font-size:clamp(30px,5.2vw,68px); font-weight:900; line-height:1.3;
color:var(--blue); font-feature-settings:"palt";
}
.contact__lead{ margin-top:26px; font-size:15px; line-height:2.15; color:var(--navy); }
.contact__act{ display:flex; flex-direction:column; align-items:center; gap:28px; margin-top:48px; }
.contact__tel{ font-size:13px; color:var(--gray); line-height:2 }
.contact__tel a{
display:inline-block; margin-left:10px; font-family:var(--ff-en); font-size:17px;
color:var(--navy); text-decoration:none; border-bottom:1px solid rgba(6,38,63,.35);
transition:color .35s var(--ease), border-color .35s var(--ease);
}
.contact__tel a:hover{ color:var(--blue); border-color:var(--blue); }
/* --- エントリーの入口（新卒／中途の2つの面）--------------------------------
「あなたのエントリーを、お待ちしています。」の下に置く、正方形の面2つです。
募集要項ページ（recruit.html）の「採用区分をお選びください」と
同じ形にそろえてあります。押すと recruit.html の該当する募集要項へ移ります。
新卒 … recruit.html#entry-new （募集要項の下にマイナビの帯があります）
中途 … recruit.html#entry-form（エントリーフォーム）
★トップページ（index.html）と下層ページ（js/layout.js）で同じものを出します。
見た目の指定は css/top.css と css/style.css の両方にあります。
片方だけ直すと、ページを移ったとき見た目が変わります。
★以前ここにあった横長のカード（.route / .route__card）は、
この形に置き換えたので削除しました（2026-08-13）。 */
.rtabs{
display:grid; grid-template-columns:repeat(2,clamp(240px,30vw,340px));
justify-content:center; gap:clamp(12px,1.6vw,20px);
margin:clamp(34px,4.4vw,52px) auto 0; text-align:center;
}
/* 正方形。中身は縦も横も中央にそろえます */
.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;
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);
}
.rtab:hover{
border-color:var(--cyan); transform:translateY(-3px);
box-shadow:0 18px 40px -28px rgba(6,38,63,.45);
}
/* --- アクセント（新卒＝アクア／中途＝ピーチ）--------------------------
★これまで2回、色で飾る方向（上に太い帯／面に色を敷く／角から光をにじませる）
を試しましたが、どちらも安っぽいという指摘でした（2026-08-13）。
3案目のいまは「色で飾らない」方針にしています。
・面は白のまま。地色にパステルを敷きません。
・色は【枠線の細いグラデーション】と【丸い矢印ボタン】の2か所だけ。
・押せることは、色ではなく形（丸いボタン）と動きで伝えます。
★枠線は border-color では描けません（1本の線に色を流せないため）。
padding-box と border-box の2枚重ねで、内側は白、枠だけ
グラデーションにしています。border-image と違い、角丸が保たれます。
★面を塗る・帯を足す・札を付けるのは、いずれも過去に却下されています。
戻さないでください。
★色は css/style.css の .rtabs--link と同じ値です。このファイルには
--c-aqua などの変数が無いので、値を直接書いています。
変えるときは必ず両方そろえてください。 */
.rtab:nth-child(1){ --dl:#8FE3F5; --dc:#0F7F9E; }
.rtab:nth-child(2){ --dl:#FFC0A3; --dc:#DE7429; }
.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);
}
.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）。飾りは付けず、字間だけで見せます */
.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 の両方に
… を書き足してください。
★引き換えに «押せること» を伝える手がかりが減っています。
カード全体がリンクなので、カーソルを乗せたときの浮き上がりだけが合図です。 */
.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;
}
.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);
}
.rtab:hover .rtab__go{
background:none; border:0; color:var(--navy);
}
.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);
}
/* 英字の大きさ・字間は下層ページと同じ */
.rtab i{ font-family:var(--ff-en); font-style:normal; font-size:11.5px; font-weight:800;
letter-spacing:.18em; }
.rtab b{ font-size:clamp(21px,2.6vw,30px); font-weight:500; letter-spacing:.08em;
line-height:1.4; color:var(--navy); }
.rtab span{ font-size:13px; font-weight:400; line-height:1.85; color:var(--gray-l); }
/* 矢印の線の引き方だけ、ここで共通に決めます（形と色は上のアクセント側） */
.rtab__go svg{ fill:none; stroke:currentColor; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; }
/* 狭い画面でも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; }
/* 丸い矢印ボタンは、狭い画面では文字を出さず丸だけにします
（文字を入れると2行に折れて面をはみ出します）。 */
.rtab__go{ padding:0; font-size:0; gap:0; }
.rtab__go svg{ width:34px; height:34px; padding:10px; }
}
/* ==========================================================================
エントリーの2枚（新卒採用／中途採用）— 2026-09-18 ご指示で作り直し
--------------------------------------------------------------------------
«ミニマルすぎる／このサイトに合っていない» とのご指摘で、トップページの
入口カード（css/top.css の .gate__card）と同じ組み立てにそろえました。
・白い面＋右下にパステルの正七角形（.rtab__blob）。gate と同じ描き方です。
・左ぞろえで «英字の小見出し → 和文 → 説明 → ENTRY と矢印» の順に積みます。
・カーソルを乗せると、面が浮き、七角形が回り、中身が少し遅れて動きます。
★過去に却下された «面を塗る／上に太い帯／角から光をにじませる»（2026-08-13）は
使っていません。地色は白のままで、色は «七角形・英字・矢印» の3か所だけです。
★募集要項ページのタブ（.rtabs:not(.rtabs--link)）は対象外です。
あちらは «選ぶ» 部品なので、正方形・中央ぞろえのままにしています。
★この節は上の .rtabs--link の指定を «後ろから» 上書きしています。
順番を入れ替えると、正方形・中央ぞろえに戻ります。
★css/style.css（下層ページ）と css/top.css（トップページ）の両方に
同じものが要ります。片方だけ直すと、ページを移ると形が変わります。
========================================================================== */
.rtabs--link{
grid-template-columns:repeat(2,minmax(0,1fr));
max-width:min(880px,100%); margin-inline:auto;
gap:clamp(14px,1.8vw,24px); text-align:left;
}
.rtabs--link .rtab{
overflow:hidden; aspect-ratio:auto; min-height:clamp(190px,18vw,232px);
align-items:flex-start; justify-content:flex-start; gap:0;
/* ★text-align も必ず書きます。基底の .rtab（選ぶタブ版と共通）が center なので、
書かないと «折り返した2行目だけ中央寄り» になります。1行に収まっている
あいだは左ぞろえに見えるため、気づきにくい崩れ方をします（2026-09-18）。 */
text-align:left;
padding:clamp(22px,2.4vw,34px);
border:1px solid color-mix(in srgb, var(--dl) 50%, white);
border-radius:8px;
box-shadow:0 10px 30px -24px rgba(6,38,63,.5);
transition:transform .55s var(--ease), box-shadow .6s var(--ease),
border-color .45s var(--ease);
}
.rtabs--link .rtab:hover{
transform:translateY(-10px);
border-color:color-mix(in srgb, var(--dl) 85%, white);
box-shadow:0 44px 70px -34px color-mix(in srgb, var(--dc) 46%, transparent);
}
.rtabs--link .rtab:active{ transform:translateY(-3px); }
/* 七角形より前に置いた中身は、七角形の上に出します */
.rtabs--link .rtab > *:not(.rtab__blob){ position:relative; z-index:2; }
/* --- 右下のパステル（正七角形）-------------------------------------------
★頂点の数字は「中心(50%,50%)から半径50%の円に、頂点を7つ等間隔（51.43度）
打った位置」です。電卓で出した値なので手で丸めないでください。辺が狂います。
★この箱は aspect-ratio:1（正方形）です。外すと «正» 七角形でなくなります。
★回転・拡大は transform ではなく rotate / scale で書きます。transform は
下の漂い（blobDrift）が使っているので、重ねると漂いが一度戻ってしまいます。 */
.rtab__blob{
/* ★大きさと位置は «面の右下にちょっと覗く» くらいに留めます。
72%／right:-28%／bottom:-38% だと、この面の高さ（232px）に対して
七角形が大きすぎ、辺が文字の横を横切って «図形が主役» に見えました。 */
position:absolute; right:-17%; bottom:-52%; width:56%; aspect-ratio:1; z-index:0;
pointer-events:none;
background:radial-gradient(circle at var(--bp,40% 30%),
#FFFFFF 0%, var(--b0) 28%, var(--b1) 64%, var(--b2) 100%);
clip-path:polygon(50.00% 0.00%,89.09% 18.83%,98.75% 61.13%,71.69% 95.05%,
28.31% 95.05%,1.25% 61.13%,10.91% 18.83%);
rotate:0deg; scale:1;
animation:blobDrift 18s ease-in-out infinite;
transition:rotate .85s var(--ease-out), scale .85s var(--ease-out);
}
/* 色は新卒＝水色／中途＝オレンジ。トップページの入口カードと同じ値です。
★css/style.css（下層ページ）では、同じ3行のあたまが .rtabs--link ではなく
.rtabs になっています。あちらには募集要項ページの «選ぶタブ版» もあり、
そちらにも同じ七角形を出しているためです（2026-09-18）。
このファイルが読まれるのはトップページだけで、選ぶタブ版はありません。
«食い違っている» と思って .rtabs に広げないでください。意味はありません。 */
.rtabs--link .rtab:nth-child(1) .rtab__blob{ --b0:#F5FCFE; --b1:#DEF3FC; --b2:#BCE3F4; --bp:42% 36%; }
.rtabs--link .rtab:nth-child(2) .rtab__blob{ --b0:#FFF8F2; --b1:#FFE9D3; --b2:#FFCFAA; --bp:44% 30%; animation-delay:-6s; }
.rtabs--link .rtab:hover .rtab__blob{ rotate:38deg; scale:1.3; }
@media (prefers-reduced-motion:reduce){
.rtab__blob{ animation:none; transition:none; }
.rtabs--link .rtab:hover .rtab__blob{ rotate:0deg; scale:1; }
}
/* --- 中身 ---------------------------------------------------------------- */
.rtabs--link .rtab i{ font-size:11.5px; font-weight:800; letter-spacing:.18em; color:var(--dc); }
.rtabs--link .rtab b{
margin-top:10px; font-size:clamp(22px,2.5vw,30px); font-weight:900;
letter-spacing:.06em; line-height:1.35; color:var(--navy);
}
.rtabs--link .rtab > span:not(.rtab__blob){
margin-top:12px; font-size:13px; line-height:1.95; color:var(--gray);
}
/* «ENTRY ＋ 矢印» の1行。2026-08-15 にいったん外した .rtab__go を、
トップページの入口カード（.gate__go）と同じ形で戻しました。
★丸い面は付けません（以前の «丸い矢印ボタン» とは別物です）。 */
.rtabs--link .rtab__go{
margin-top:auto; padding:22px 0 0; display:inline-flex; align-items:center; gap:10px;
font-family:var(--ff-en); font-style:normal; font-size:11px; font-weight:700;
letter-spacing:.14em; color:var(--dc); background:none; border:0; box-shadow:none;
}
.rtabs--link .rtab__go svg{
width:16px; height:16px; padding:0; flex:none;
border-radius:0; background:none; box-shadow:none; color:currentColor;
transition:transform .45s var(--ease);
}
.rtabs--link .rtab:hover .rtab__go{ background:none; border:0; color:var(--dc); }
.rtabs--link .rtab:hover .rtab__go svg{ transform:translateX(6px); box-shadow:none; }
/* 中身も、面より少しだけ大きく・少しずつ遅れて動かして奥行きを出します */
.rtabs--link .rtab i,.rtabs--link .rtab b,
.rtabs--link .rtab > span:not(.rtab__blob),.rtabs--link .rtab__go{
transition:transform .55s var(--ease), color .5s var(--ease);
}
.rtabs--link .rtab b{ transition-delay:.03s; }
.rtabs--link .rtab > span:not(.rtab__blob){ transition-delay:.06s; }
.rtabs--link .rtab__go{ transition-delay:.09s; }
.rtabs--link .rtab:hover i{ transform:translateY(-5px); }
.rtabs--link .rtab:hover b{ transform:translateY(-4px); }
.rtabs--link .rtab:hover > span:not(.rtab__blob){ transform:translateY(-2px); }
/* 狭い画面は1列。正方形をやめたので、縦に積んでも長くなりません
（トップページの入口カード .gate と同じ区切り・同じ考え方です）。 */
@media (max-width:620px){
.rtabs--link{ grid-template-columns:1fr; gap:12px; max-width:none; }
.rtabs--link .rtab{ min-height:0; padding:20px 22px; }
.rtabs--link .rtab i{ font-size:10.5px; letter-spacing:.14em; }
.rtabs--link .rtab b{ margin-top:7px; font-size:20px; }
.rtabs--link .rtab > span:not(.rtab__blob){ margin-top:8px; font-size:12.5px; line-height:1.8; padding-right:22%; }
.rtabs--link .rtab__go{ padding-top:14px; font-size:10.5px; gap:8px; }
.rtabs--link .rtab__go svg{ width:15px; height:15px; }
.rtab__blob{ width:38%; right:-10%; bottom:-34%; }
}
/* ふだんは線だけ。カーソルを合わせると水色が左から流れ込みます */
.btn--entry{
border:1.5px solid var(--navy); color:var(--navy);
justify-content:center; min-width:min(420px,86vw); padding-inline:56px;
font-family:var(--ff-en); font-weight:800; letter-spacing:.16em;
}
/* CONTACT のボタンだけ、ひとまわり大きくします */
.contact__act .btn--lg{ padding:30px 56px; font-size:17px; letter-spacing:.2em; }
.btn--entry::before{ background:linear-gradient(120deg,
var(--rose) 0%,var(--peach) 30%,var(--lemon) 55%,var(--mint) 78%,var(--lilac) 100%); }
.btn--entry:hover{ color:var(--navy); border-color:var(--rose-d); }
/* 狭い画面では、ボタンを画面幅いっぱいに広げます */
@media (max-width:900px){
.contact__act .btn--lg{ width:100%; min-width:0; padding-inline:24px; }
}
/* ==========================================================================
フッター
★寸法は会社サイト（C:\Users\MICHIHIRO\Desktop\develop\asahi-hp のテーマ）の
.site-footer をそのまま写しています。数字（幅・間隔・文字の大きさ）は
向こうに合わせてあるので、片方だけ変えないでください。
.foot … .site-footer（上の余白 clamp(52px,6vw,84px)）
.foot-in … .container.wide > .top（幅 min(2040px,95%) を中央寄せ）
.foot-big … .big-en
.foot-bottom … .container.wide > .bottom
========================================================================== */
/* 地色は白。ページ全体の背景（水色のモヤ＝.bg）はここで止めて、
フッターだけを白い面にしています（会社サイトのフッターと同じ考え方）。
大きな英字（.foot-big）は幅からはみ出すので overflow:hidden で切ります。 */
.foot{ position:relative; z-index:2; border-top:1px solid var(--line);
background:var(--white); overflow:hidden;
padding:clamp(52px,6vw,84px) 0 0; }
/* 左＝会社情報（ロゴ・社名・住所・SNS を縦に）、右＝リンク集。
会社情報は必要な幅（最大340px）だけ取り、残りをリンク集に回します。 */
.foot-in{ width:min(2040px,95%); max-width:none; margin-inline:auto; padding:0 0 clamp(36px,4.2vw,58px);
display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
gap:clamp(24px,2.6vw,40px); }
.foot-brand{ min-width:0 }
/* ロゴはヘッダー（.logo）と同じ組み方＝丸いマーク＋社名（文字）。
社名の書体・太さ・字間はヘッダーの .logo__name と必ず同じにしてください
（画像の社名を使うと、ヘッダーと書体が違って見えます）。 */
/* ★2026-08-14: 大きさを会社サイトのフッター（.site-footer .brand）にそろえました。
以前はマーク38px・社名21pxで、会社サイトより一回り小さく見えていました。
css/style.css の .footer__logo-* と必ず同じ数字にすること。 */
.foot-logo{ display:flex; align-items:center; gap:12px; }
.foot-logo__mark{ height:42px; width:42px; flex:none; display:block; object-fit:contain; transform:translateY(3px); }
.foot-logo__txt{ display:flex; flex-direction:column; line-height:1.35; }
.foot-logo__tag{ font-size:9.3px; letter-spacing:.18em; font-weight:500;
color:var(--blue); white-space:nowrap; }
.foot-logo__name{ font-size:27.8px; font-weight:700; letter-spacing:.08em;
color:var(--navy); white-space:nowrap; line-height:1.2; }
.foot-en{ margin-top:10px; font-family:var(--ff-en); font-size:11px; font-weight:800;
letter-spacing:.22em; color:var(--blue); }
/* キャッチは社名の上（.foot-logo__tag）へ移したので、独立した行は持ちません。 */
.foot address{ margin-top:20px; font-style:normal; font-size:.92rem; line-height:2.2; color:var(--gray); }
/* --- SNS ボタン -------------------------------------------------------
本文のカード（.card）と同じ「白い面＋やわらかい影」でそろえています。
カーソルを合わせると、サービスごとのパステルが面に流れ込みます。
アイコンは塗り（fill）で描くので、他の SVG（線で描くもの）と設定が逆です。 */
/* 大きさ・間隔は会社サイトの .f-social と同じ（42px の丸／間 12px／上 24px）。 */
.foot-sns{ display:flex; gap:12px; margin-top:24px; list-style:none; }
/* ★フッターの地色が白になったので、縁は白ではなく薄い線にしています
（白い縁だと、白い面の上では輪郭が消えて丸が浮いて見えません）。 */
.foot-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(22,80,110,.08);
transition:transform .25s var(--ease), background .3s var(--ease),
color .3s var(--ease), box-shadow .25s var(--ease);
}
.foot-sns svg{ width:19px; height:19px; fill:currentColor; stroke:none; }
.foot-sns a:hover{ transform:translateY(-3px); color:var(--navy);
box-shadow:0 12px 22px rgba(22,80,110,.16); }
.foot-sns li:nth-child(1) a:hover{ background:var(--sky); }
.foot-sns li:nth-child(2) a:hover{ background:var(--lilac); }
.foot-sns li:nth-child(3) a:hover{ background:var(--rose); }
.foot-sns li:nth-child(4) a:hover{ background:var(--peach); }
/* --- リンク集（MENU／CONTENTS）----------------------------------------
会社サイト（C:\Users\MICHIHIRO\Desktop\develop\asahi-hp のテーマ／footer.php）
と同じ組み方です。マス（カード）ではなく、行頭に短い横棒を置いた文字のリストで、
左＝MENU（ページ名だけ）／右＝CONTENTS（各ページの中身へ直接飛ぶ）の2ブロック。
MENU は必要な幅だけ取り、残った幅を CONTENTS に回します。
★下層ページのフッターは js/layout.js が同じものを組み立てています
（見た目は css/style.css の .footer__menus）。片方だけ直さないでください。 */
.foot-menus{ display:grid; grid-template-columns:max-content minmax(0,1fr);
gap:clamp(48px,6vw,110px); }
/* 見出し（MENU / CONTENTS）。英字・字間広め・小さく。 */
.foot-ttl{ font-family:var(--ff-en); font-size:.68rem; font-weight:700; letter-spacing:.3em;
color:var(--blue); margin-bottom:18px; }
.foot-contents .foot-ttl{ font-size:.62rem; opacity:.8; }
.foot-list{ list-style:none; margin:0; padding:0; }
/* MENU は上から下→右列の順に、2列（1列3行）で折ります。 */
.foot-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 だと最初の子（＝横棒）で
ベースラインが決まり、行の高さが文字由来の小数に引きずられます。 */
.foot-list li{ margin-bottom:20px; font-size:.88rem; line-height:20px; }
.foot-list a{ display:flex; align-items:center; gap:10px; line-height:20px;
font-weight:500; letter-spacing:.03em; color:var(--navy);
text-decoration:none; transition:color .3s var(--ease); }
/* 行頭の横棒。カーソルを合わせると伸びます。
※棒には flex:none。幅が詰まったとき棒だけ縮んで短くなるのを防ぎます。 */
.foot-list a::before{ content:""; flex:none; width:14px; height:2px; border-radius:2px;
background:var(--blue); transition:width .3s var(--ease); }
.foot-list a:hover{ color:var(--blue); }
.foot-list a:hover::before{ width:24px; }
/* CONTENTS は MENU の下位。字も横棒も少しずつ小さくして強さを落とします。
等幅の列に並べると短い項目の右に余白が大きく残るので、実寸のまま横に詰めて
折り返します（行数は幅なりに決まります）。項目名は途中で折り返しません。 */
.foot-list--sub{ display:flex; flex-wrap:wrap; column-gap:clamp(14px,1.3vw,20px); }
.foot-list--sub li{ margin-bottom:13px; font-size:.79rem; line-height:18px; }
.foot-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); }
.foot-list--sub a::before{ width:9px; opacity:.7; transition:width .3s var(--ease), opacity .3s var(--ease); }
.foot-list--sub a:hover{ opacity:1; color:var(--navy); }
.foot-list--sub a:hover::before{ width:16px; opacity:1; }
/* 幅ゼロ・高さゼロで1行ぶんを占め、次の項目を次の行へ送る区切りです。
CONTENTS をページごとのまとまりで改行させるために置いています。 */
.foot-list--sub .foot-br{ flex:0 0 100%; height:0; margin:0; }
/* --- 大きな英字 --------------------------------------------------------
会社サイト（asahi-hp のテーマ／footer.php の .big-en）と同じものです。
塗りは透明で、輪郭線だけの文字を1行で敷きます。
・折り返さない（white-space:nowrap）ので、狭い画面では左右がはみ出します。
はみ出したぶんは .foot の overflow:hidden で切っています。
・下の余白を -.12em にして、文字の下の余白ぶんだけ帯に寄せています。
・読ませる文字ではないので、選択もクリックもできないようにしています
（HTML 側でも aria-hidden を付けて、読み上げの対象から外しています）。 */
.foot-big{
margin:0 0 -.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%)）で引きます。 */
.foot-bottom{ width:min(2040px,95%); max-width:none; margin:0 auto;
padding:22px 0; border-top:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between;
gap:14px; flex-wrap:wrap; font-size:.74rem; letter-spacing:.1em; }
.copy{ font-size:inherit; letter-spacing:inherit; color:var(--gray-l); }
/* ==========================================================================
フッターを会社サイトと同じ見た目にそろえる（2026-08-14）
--------------------------------------------------------------------------
項目名・項目数・リンク先だけは採用サイトのまま。それ以外は会社サイトの実値に
合わせています。色は会社サイトのパレットを --f-* としてフッターの中だけで持ちます。
★css/style.css の同じ節（.footer ～）と必ず同じ数字にしてください。
========================================================================== */
.foot{
--f-ink:#2e4d61; --f-accent:#5bb8e3; --f-accent-d:#3d9ccb;
--f-accent-deep:#2e7ea9; --f-line:rgba(46,77,97,.14);
/* 地色は単色の淡い水色（css/style.css の .footer__body と同じ #f3f9fd）。
半透明にすると背景のポリゴンが透けて色ムラになるので、単色にしています。 */
background:#f3f9fd; border-top-color:var(--f-line); color:var(--f-ink);
}
.foot-logo__tag{ color:var(--f-accent-deep); }
.foot-logo__name{ color:var(--f-ink); }
.foot address{ color:var(--f-ink); }
.foot-ttl{ font-size:.74rem; color:var(--f-accent-deep); }
.foot-contents .foot-ttl{ font-size:.68rem; }
.foot-list li{ margin-bottom:18px; font-size:.95rem; line-height:22px; }
.foot-list a{ line-height:22px; color:var(--f-ink); font-weight:inherit; letter-spacing:normal; }
.foot-list a::before{ background:var(--f-accent); }
.foot-list a:hover{ color:var(--f-accent-deep); }
.foot-list--sub li{ margin-bottom:11px; font-size:.85rem; line-height:20px; }
.foot-list--sub a{ line-height:20px; color:var(--f-ink); }
.foot-list--sub a::before{ background:var(--f-accent-d); }
.foot-list--sub a:hover{ color:var(--f-ink); }
.foot-sns a{ background:rgba(255,255,255,.6); border:1px solid rgba(46,77,97,.16);
color:var(--f-accent-deep); box-shadow:none; }
/* 会社サイトはSNSごとに色を変えず、どれも同じ水色になります。 */
.foot-sns a:hover,
.foot-sns li:nth-child(1) a:hover,
.foot-sns li:nth-child(2) a:hover,
.foot-sns li:nth-child(3) a:hover,
.foot-sns li:nth-child(4) 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 だけ線画なので、塗りではなく線で描きます。 */
.foot-sns .ig svg{ width:20px; height:20px; fill:none; }
/* 大きな英字（会社サイトは 6.8vw 上限 7.6rem。以前は 8.6vw で大きすぎた） */
.foot-big{ font-size:min(6.8vw,7.6rem); -webkit-text-stroke:1.5px rgba(91,184,227,.3); }
.foot-bottom{ border-top-color:var(--f-line); color:var(--f-ink); }
.copy{ color:var(--f-ink); }
.foot-links{ display:flex; gap:24px; }
.foot-links a{ color:var(--f-ink); }
.foot-links a:hover{ color:var(--f-accent-deep); }
/* 折り返す幅も会社サイトと同じです。
リンク集が横に伸びきれない幅（1100px）で、会社情報の下へ回します */
@media (max-width:1100px){ .foot-in{ grid-template-columns:1fr } }
/* スマホでは MENU の下に CONTENTS。別ものだと分かるよう間隔は広めに取ります */
@media (max-width:640px){
.foot-menus{ grid-template-columns:1fr; gap:44px; }
.foot-list--main{ grid-template-rows:repeat(6,auto); }
}
/* ヘッダーがせり上がります。
★以前はローディングが明けた合図（body.is-ready）を待っていましたが、
読み込み画面を廃止したので、開いた時点で流れます。 */
.rise{opacity:0;transform:translateY(24px);
animation:riseIn .75s cubic-bezier(.2,1,.3,1) var(--d,0s) forwards}
@keyframes riseIn{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .rise{opacity:1;transform:none;animation:none} }
/* メニューの文字数が増えた（「データで見る旭建設」）ぶん、
横幅が足りなくなる手前で字間と間隔を詰め、1080px でハンバーガーに切り替えます。
★以前は 900px まで横並びのままで、ロゴ＋メニュー＋ENTRY が収まりきらず、
文字が折り返したり ENTRY が押し出されたりしていました。 */
@media (max-width:1180px){
/* 2段組みにしたので、詰めるのは項目の左右余白と日本語の字間です。 */
.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}
/* 字が小さくなって項目名の高さが 46.8px → 44px になるので、
下線を下げる量も «高さの半分 22px ＋ すきま 2.6px» に合わせます。 */
.gnav a{--gnav-line-drop:24.6px}
}
@media (max-width:1080px){
.gnav,.nav .hbtn{display:none}
.burger{display:block}
}
/* スマホではヘッダーを詰めます（2026-08-14）。92px は指で持つ画面には高すぎ、
本文の見える範囲が削られるためです。css/style.css と同じ数字です。
★この節はスマホ専用です。パソコン版の指定は絶対に書き換えないこと。 */
@media (max-width:768px){
:root{ --rc-header-h:64px; --rc-header-h-solid:56px; }
/* ハンバーガーもヘッダーに収まる大きさに（会社サイトの .menu-btn と同じ） */
.burger{ width:56px; height:56px; }
.burger span{ width:26px; margin:4px auto; }
/* ★社名の大きさは、会社サイトのヘッダー（テーマ直下の style.css の「.brand .name」）と
同じ数字です（2026-08-14）。以前は 19px で、会社サイトより小さく見えていました。
560px 以下の指定は、下の「スマホ専用の調整」の節にあります。
★css/style.css（下層ページ）の同じ節とセットで直してください。 */
.logo__mark{height:34px;width:34px;transform:translateY(2px)}
.logo__name{font-size:1.24rem}
.logo__tag{font-size:.44rem}
/* --- ヒーローの見出し ---
3行に分ける組み（.ld__w が block）と中央ぞろえは、いまはパソコン版と共通です。
スマホでは大きさだけ画面幅に合わせます。 */
.ld__ttl{ font-size:clamp(30px,9.4vw,60px); line-height:1.16; }
.ld__co{ font-size:13px; letter-spacing:.10em; margin-top:clamp(20px,3vh,32px); }
}
@media (max-width:760px){
/* 高さは .nav 側（--rc-header-h）で決めているので、ここでは左右の余白だけ詰めます。 */
.nav,.nav.stuck{padding:0 18px}
/* ★2026-08-14: スマホでは文字のかたまりを上へ寄せます。
.hero は align-items:center なので、下の余白を増やすと中身が上へ動きます。
76px → 150px → 250px と、二段階で上へ寄せています。
下端の「SCROLL」の合図（.scroll）と重ならない空きも確保できます。
高さの基準もヘッダーの変数に合わせます（64px 直書きだとズレる）。 */
.hero{padding:8px 20px 250px;min-height:calc(100vh - var(--rc-header-h))}
/* 文字を上へ寄せたぶん、スクロールを促す縦線も一緒に上げます（2026-08-14）。
下端に取り残されると、文字のかたまりとの間が空きすぎて別々のものに見えます。 */
.scroll{left:20px;bottom:110px}
.foot-in,.foot-bottom{padding-left:20px;padding-right:20px}
}
/* ==========================================================================
9. 動きの強化（あとから足したぶん）
--------------------------------------------------------------------------
カードの登場・ホバー・カーソル追従の傾きは 6章にまとめてあります。
ここは、そこに入りきらなかった細かいものだけです。
・DATA の数字マス（1マスずつ時間差で出す／ホバーで数字が跳ねる）
・会社紹介動画のカード
・ボタンと矢印
・動きを減らす設定のときの打ち消し
========================================================================== */
/* --- DATA：数字のマス ----------------------------------------------------
器（.digest）が .reveal なので、中のマスは器が出たあとに1つずつ出します。 */
.digest__cell{
opacity:0; transform:translate3d(0,26px,0);
transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), background .4s var(--ease);
}
.digest.is-in .digest__cell{ opacity:1; transform:none; }
.digest.is-in .digest__cell:nth-child(1){ transition-delay:.06s }
.digest.is-in .digest__cell:nth-child(2){ transition-delay:.16s }
.digest.is-in .digest__cell:nth-child(3){ transition-delay:.26s }
.digest.is-in .digest__cell:nth-child(4){ transition-delay:.36s }
.digest__cell b{ display:inline-block; transition:transform .5s var(--ease); }
.digest__cell:hover b{ transform:translateY(-6px) scale(1.06); }
.digest__cell:hover{ background:var(--sky-l); }
/* --- 会社紹介動画のカード（再生中は動かしません） --- */
.vid:not(.is-playing):hover{ transform:translateY(-6px) scale(1.008); box-shadow:0 34px 60px -34px rgba(6,38,63,.45); }
.vid__thumb img{ transition:scale 1.1s var(--ease-out); scale:1.06; translate:0 var(--pcY,0px); }
.vid:not(.is-playing):hover .vid__thumb img{ scale:1.12; }
.vid.is-playing .vid__thumb img{ scale:1; translate:none; }
.vid__thumb{ overflow:hidden; }
/* --- ボタンの矢印を、少し先へ --- */
.btn svg,.hbtn svg{ transition:transform .45s var(--ease); }
.btn:hover svg,.hbtn:hover svg{ transform:translateX(5px); }
/* --------------------------------------------------------------------------
追従CTA（右下の「募集要項／ENTRY」）
--------------------------------------------------------------------------
★下層ページ（css/style.css の「31. 追従CTA」）と同じ見た目にそろえています。
数字（位置・大きさ・色）を変えるときは、必ず両方そろえてください。
片方だけ直すと、ページを移ったときにボタンが動いて見えます。
★出す／隠すは js/top.js（.is-show を付け外し）。HTMLは index.html の
いちばん下に直接書いてあります。 */
.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; }
.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; text-decoration:none;
box-shadow:0 16px 36px -16px rgba(6,38,63,.5);
transition:background .4s var(--ease), color .4s var(--ease);
}
/* ★2026-08-13、ここは「募集要項」1つだけになりました。.fixcta__sub は
使っていません（以前の「募集要項（白い面）」用の指定です）。 */
.fixcta__sub{ background:var(--white); color:var(--navy); }
.fixcta__sub:hover{ background:var(--navy); color:var(--white); }
/* 矢印のぶん文字が左に寄って見えるので、左の余白を「矢印＋間隔」だけ広げます。
日本語なので、英字用の書体・字間はやめて太さ500にしています。
★地色は置きません（background:none）。カーソルを乗せたときに
左から流れ込む水色（下の ::before）は、この要素の後ろ（z-index:-1）に
描いているので、地色を塗るとその色に隠れて見えなくなります。 */
.fixcta__main{
position:relative; overflow:hidden;
background:none; border:1.5px solid var(--navy); color:var(--navy);
font-weight:500; letter-spacing:.08em;
padding-left:calc(26px + 16px + 9px);
transition:color .45s var(--ease), border-color .45s var(--ease);
}
/* ふだんは線だけ。カーソルを当てると水色系のパステルが左から現れます
（round を付けないと切り抜きが長方形になり、角丸の外へ一瞬はみ出します）。 */
.fixcta__main::before{
content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
background:linear-gradient(120deg,var(--cyan-p) 0%,#8FE3F5 52%,var(--cyan-l) 100%);
clip-path:inset(0 100% 0 0 round 999px);
transition:clip-path .55s var(--ease-out);
}
.fixcta__main:hover::before{ clip-path:inset(0 0 0 0 round 999px); }
.fixcta__main:hover{ color:var(--navy); }
.fixcta__main svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
transition:transform .4s var(--ease); }
.fixcta__main:hover svg{ transform:translateX(4px); }
@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）
--------------------------------------------------------------------------
★ここに書いたものはパソコン版（769px以上）には効きません。
スマホ向けの指示は、既存の行を書き換えず必ずこの節に追記すること。
★css/style.css の同じ名前の節（下層ページ側）と対になっています。
片方だけ直すと、ページを移ったとき見た目が変わります。
========================================================================== */
@media (max-width:768px){
/* --- 画面の下に貼り付く「募集要項」ボタンを出さない ---
スクロールしても付いて回るため、本文の下のほうがいつも隠れていました。
行き先（募集要項）は、ヘッダーのメニューと各ページ下の
「あなたのエントリーを、お待ちしています。」からたどれるので、
このボタンが無くても入口は失われません。
★パソコン版では今までどおり出ます。 */
.fixcta{ display:none; }
/* --- エントリーの2枚を「横長のカードを縦に2つ」にする ---
募集要項ページ（css/style.css の同じ指定）と数字までそろえています。
もとは正方形（aspect-ratio:1/1）を横に2枚並べていたため、
ページによってカードの形が違って見えていました。
★css/style.css 側と必ずセットで直してください。 */
.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 は recruit-index.php と js/layout.js）。 */
/* ★中央にそろえるのは「募集要項」の文字であって、文字＋丸い矢印の固まりではありません。
ふつうに 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; }
}
/* 社名の狭い画面ぶん。会社サイトの @media(max-width:560px) と同じ数字です。 */
@media (max-width:560px){
.logo{ gap:5px; }
.logo__name{ white-space:nowrap; font-size:clamp(1.02rem,5.6vw,1.38rem); letter-spacing:.06em; }
.logo__tag{ white-space:nowrap; font-size:.44rem; letter-spacing:.15em; }
}
/* --- 動きを減らす設定のとき --------------------------------------------
★ここは必ずいちばん最後に置いてください。上のどれよりも後ろにないと、
打ち消せません。
★止まらない動き（.gate__blob）は animation:none で完全に止めます。
duration を 0.001 秒にするだけだと、無限にくり返す動きは
ちらつき続けてしまいます。 */
@media (prefers-reduced-motion:reduce){
.reveal,[data-stagger]>*,
.work .work__img,.work .work__body,.work .work__tags li,
.digest__cell{ opacity:1 !important; transform:none !important; }
html{scroll-behavior:auto}
*{ animation-duration:.001s !important; transition-duration:.12s !important; }
.gate__blob,.work.is-in .work__cat,
.vid__badge::before,.vid--feature .vid__play::before{ animation:none !important; }
.vid--feature .vid__play::before{ opacity:0 !important; }
.pillar:hover::after,.ict__card:hover::after,
.gate__card:hover::after,.house__card:hover::after{ animation:none !important; opacity:0 !important; }
.work__img .ph,.house__img img,.vid__thumb img{ scale:1 !important; translate:none !important; }
}
/* ==========================================================================
タップで操作する端末（スマホ・タブレット）では、ホバーの見た目を出さない
--------------------------------------------------------------------------
スマホでカードを指で押してページを移り、ブラウザの「戻る」で帰ってくると、
そのカードだけ浮き上がったまま（ホバーしたまま）になります。
タップした指が離れても、ブラウザは「そこにポインタがある」と見なし続けるためで、
別の場所を触るまで元に戻りません。
このサイトのホバーは、浮き上がりと拡大を --hY / --hS の2つの変数に集約し、
影と光沢（::after）だけを個別に指定する作りになっています。
そこで hover:none（＝ホバーできない端末）のときだけ、その4つを打ち消します。
★hover:none の中だけで完結させること。パソコンには一切影響しません。
★css/style.css の同じ節と両方あわせて直してください。
========================================================================== */
@media (hover:none){
/* 浮き上がり・拡大。この2変数はホバー専用なので、まとめて無効化してよい */
*:hover{ --hY:0px !important; --hS:1 !important; }
/* 影は、それぞれの通常時の値へ戻す */
.pillar:hover{ box-shadow:0 10px 30px -22px rgba(6,38,63,.5); }
.house__card:hover{ box-shadow:0 12px 34px rgba(6,38,63,.07); }
.gate__card:hover{ box-shadow:0 10px 30px -24px rgba(6,38,63,.5); }
.ict__card:hover{ box-shadow:none; border-color:var(--line); background:rgba(255,255,255,.86); }
/* 斜めに走る光沢は出さない */
.pillar:hover::after, .ict__card:hover::after,
.gate__card:hover::after, .house__card:hover::after{ animation:none; opacity:0; }
}
/* --- 旧デザインの «粒» と «きらめき» は止めています -----------------------
★2026-08-16。ヒーローを低ポリに作り替えたあとも、この2つが動き続けていて、
5〜20秒かけて «あとから図形が増えてくる» ように見えていました。
#grain … 25個・周期17〜21秒（下から上へ流れる玉）
#spark … 52個・周期5〜7.5秒（点滅するきらめき）
いまのヒーローには三角形・点・線がそろっているので、重ねる必要がありません。
★中身は js/top.js が作っています。ここで «見せない» だけにしているのは、
戻したくなったときに1行消せば済むようにするためです。
完全に止めるなら js/top.js の CONFIG.grains / CONFIG.sparks を 0 にします。 */
#grain, #spark{ display:none }
/* ==========================================================================
日本語の折り返し（2026-09-22）
--------------------------------------------------------------------------
説明文が「部屋探しから始めなくて済／みます。」のように、文の途中の
おかしな位置で折り返していました。word-break:auto-phrase は、文節
（意味の切れ目）で折り返す指定です（Chrome・Edge が対応）。
対応していないブラウザでは、これまでどおりの折り返しになるだけです。
★HTMLの改行が半角スペースになり「1棟ずつ。 遠方から」のように字間が
空く問題は、テンプレート側で説明文を1行にまとめて直しました。
説明文を書き足すときも、文の途中で改行しないでください。
========================================================================== */
body[data-page] p,
body[data-page] li,
body[data-page] dd,
body[data-page] h2,
body[data-page] h3,
body[data-page] figcaption{ word-break:auto-phrase; }
/* 説明文の
は、文の切れ目で改行するために入れています。
幅が狭いところでは、かえって読みにくいので効かせません。 */
@media (max-width:640px){
.sec__lead br{ display:none; }
}
/* 説明文の1行を、もう少し長くします（2026-09-22）。
もとの 64ch は «半角64文字ぶん» ＝ 全角32文字ほどしかなく、1つの文が
«部屋探しから始めなくて／済みます。» のように2行へ割れていました。 */
.sec__lead, .phero__lead{ max-width:46em; }
/* ==========================================================================
エントリーの2枚（新卒採用／中途採用）を大きく（2026-09-22 ご指示）
--------------------------------------------------------------------------
«新卒採用／中途採用» のカードは2種類あります。
.rtabs--link … トップと各ページの下にある «リンク版»（横長・左ぞろえ）
.rtabs:not(.rtabs--link) … 募集要項ページの «タブ版»（正方形・中央ぞろえ）
枠・色・形・ぞろえはそのままに、寸法と文字だけを上げています。
カード 433×232 → 631×348 ／ 340×340 → 480×480
名前 clamp(22px,2.5vw,30px) → clamp(33px,3.8vw,46px)
説明 13px → 20px ／ 英字 11.5px → 17px
★文字は «.rtab b» では効きません。リンク版に «.rtabs--link .rtab b» という
強い指定があり、そちらが勝ちます（実際に一度、効かないまま出していました）。
必ず .rtabs--link / .rtabs:not(.rtabs--link) を頭に付けて書いてください。
★リンク版の幅は .rtabs--link の max-width（880px → 1320px）で決まります。
.rtabs の grid-template-columns に固定幅を書くと、max-width を無視して
画面からはみ出します。書かないでください。
★この上書きはファイルの末尾にあります。狭い画面の指定（768px以下の
«縦に2つ»、620px以下の文字）は、後に書いたほうが勝つ決まりで潰れるので、
下の @media で書き戻しています。消さないでください。
========================================================================== */
.rtabs--link{ max-width:min(1320px,100%); gap:clamp(20px,2.6vw,34px); }
.rtabs--link .rtab{ min-height:clamp(280px,26vw,348px); padding:clamp(32px,3.6vw,50px); }
.rtabs--link .rtab i{ font-size:17px; letter-spacing:.16em; }
.rtabs--link .rtab b{ font-size:clamp(33px,3.8vw,46px); margin-top:14px;
/* ★2026-09-22：「太い」との指定で 900 → 700（基のリンク版は 900）。
Noto Sans JP は 400/500/700/900 しか読んでいないので、600 と書いても 700 で出ます。
もっと細くするなら 500。（全社共通の約束で 800・900 は使いません） */
font-weight:700; }
.rtabs--link .rtab > span:not(.rtab__blob){ font-size:20px; line-height:1.9; margin-top:16px; }
/* ★2026-09-22：「2027」だけ小さかった件。説明文の中の 2027 に
基の .rtab span{ font-size:13px } が当たっていました（上の指定は > なので子の span だけ）。
同じ理由で色も var(--gray-l) のままだったので（親は var(--gray)）、チューニングも一緒に。
内側の span は親をそのまま継ぐようにします。狭い画面の 17px / 15.5px にも自動で付いていきます */
.rtabs--link .rtab > span:not(.rtab__blob) span{
font-size:inherit; color:inherit; font-weight:inherit; line-height:inherit;
}
.rtabs--link .rtab__go{ font-size:15px; gap:13px; padding-top:26px; }
.rtabs--link .rtab__go svg{ width:22px; height:22px; }
.rtabs:not(.rtabs--link){ grid-template-columns:repeat(2,clamp(340px,42vw,480px)); gap:clamp(18px,2.4vw,30px); }
.rtabs:not(.rtabs--link) .rtab{ padding:clamp(26px,3.2vw,40px); gap:16px; }
.rtabs:not(.rtabs--link) .rtab i{ font-size:17px; letter-spacing:.16em; }
.rtabs:not(.rtabs--link) .rtab b{ font-size:clamp(33px,3.8vw,46px); }
.rtabs:not(.rtabs--link) .rtab span:not(.rtab__blob){ font-size:20px; line-height:1.8; }
@media (max-width:768px){
/* 横長のカードを縦に2つ。形と矢印は今までどおりで、文字だけ上げています */
.rtabs,.rtabs--link,.rtabs:not(.rtabs--link){
grid-template-columns:1fr; justify-content:stretch; gap:14px; max-width:none;
}
.rtab{ aspect-ratio:auto; gap:9px; }
.rtabs--link .rtab,.rtabs:not(.rtabs--link) .rtab{ min-height:0; padding:24px; }
.rtabs--link .rtab i,.rtabs:not(.rtabs--link) .rtab i{ font-size:14px; }
.rtabs--link .rtab b,.rtabs:not(.rtabs--link) .rtab b{ font-size:27px; margin-top:8px; }
.rtabs--link .rtab > span:not(.rtab__blob),
.rtabs:not(.rtabs--link) .rtab span:not(.rtab__blob){ font-size:17px; line-height:1.75; margin-top:10px; }
.rtabs--link .rtab__go{ font-size:13px; gap:9px; padding-top:16px; }
.rtabs--link .rtab__go svg{ width:18px; height:18px; }
/* ★タブ版の丸い矢印は、もとの数字のまま（丸34px＋間隔10px＝-44px の関係を崩さない） */
.rtabs:not(.rtabs--link) .rtab__go{ font-size:12.5px; gap:10px; }
.rtabs:not(.rtabs--link) .rtab__go svg{ width:34px; height:34px; padding:10px; margin-right:-44px; }
}
@media (max-width:560px){
.rtabs--link .rtab,.rtabs:not(.rtabs--link) .rtab{ padding:20px 18px; }
.rtabs--link .rtab b,.rtabs:not(.rtabs--link) .rtab b{ font-size:24px; }
.rtabs--link .rtab > span:not(.rtab__blob),
.rtabs:not(.rtabs--link) .rtab span:not(.rtab__blob){ font-size:15.5px; }
}