/*
Theme Name: Asahi Construction
Theme URI: https://example.com/
Author: Asahi Web Team
Description: 宮崎県日向市の建設会社向けオリジナルテーマ。全画面写真と大型タイポグラフィ、パステル調の明るい配色でダイナミックに動くデザイン。
Version: 2.7.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asahi-construction
*/
/* ==========================================================
Variables / Base
========================================================== */
:root{
--ink:#2e4d61;
--text:#4c6878;
--text-dim:#8aa2af;
--accent:#5bb8e3;
--accent-d:#3d9ccb;
--accent-deep:#2e7ea9;
--mint:#9fd8bb;
--sun:#f6ae5c;
--paper:#eef7fb;
--mist:#ddeef7;
--white:#ffffff;
/* カード面：背景（点群シーン／固定写真）を透かす共通の白。ぼかしは掛けず、
不透明度だけで調整する（POINTカード・施工実績・活動報告・社員ブログ・Recruit・白ボタン） */
--card-bg:rgba(255,255,255,.85);
--card-bg-soft:rgba(255,255,255,.85); /* 受賞・施工実績リストの地。いまはカード面と同値 */
/* トップの活動報告・社員ブログのカード（写真の下の文字帯）用。
以前はここだけ薄くしていたが、いまはカード面と同じ濃さに揃えている */
--card-bg-airy:rgba(255,255,255,.85);
--line:rgba(46,77,97,.14);
--ff-base:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',YuGothic,sans-serif;
/* 見出し・キャッチ用。もとは Shippori Mincho（明朝）だったが、
サイト全体を明朝なしで統一するため、字面のすっきりした Zen Kaku Gothic New に変更。
この書体は 600 を持たないので、指定は 400／500／700／900 のいずれかにすること
（600 を書くと 700 に丸められて意図より太くなる）。 */
--ff-disp:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',YuGothic,sans-serif;
--ff-en:'Outfit','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
--ease:cubic-bezier(.22,1,.36,1);
--sec-pad:clamp(54px,7vw,88px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:90px;}
body{
font-family:var(--ff-base);
color:var(--text);
background:var(--white);
line-height:2;
letter-spacing:.06em;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;vertical-align:bottom;}
a{color:inherit;text-decoration:none;transition:.35s;}
ul,ol{list-style:none;}
h1,h2,h3,h4{color:var(--ink);line-height:1.5;font-weight:700;}
.container{width:min(1680px,92%);margin-inline:auto;}
.container.wide{width:min(2040px,95%);}
.section{padding:var(--sec-pad) 0;position:relative;}
/* セクション区切りのヘアラインは廃止（背景グラデーションで自然に接続するため） */
/* ---------- section heading（日本語を主役に） ---------- */
.sec-head{margin-bottom:clamp(44px,6vw,72px);position:relative;z-index:1;}
.sec-head .en{
display:inline-flex;align-items:center;gap:14px;
font-family:var(--ff-en);font-weight:700;text-transform:uppercase;
font-size:.76rem;letter-spacing:.3em;line-height:1;color:var(--accent-deep);
}
.sec-head .en::before{content:"";width:36px;height:2px;border-radius:2px;background:var(--accent);}
.sec-head h2,.sec-head .jp{
display:block;margin-top:16px;color:var(--ink);
font-size:clamp(1.9rem,4.4vw,3rem);font-weight:700;letter-spacing:.1em;line-height:1.45;
}
.sec-head h2 .bar{
display:block;width:50px;height:3px;border-radius:3px;background:var(--accent);margin-top:20px;
}
.sec-head.center{text-align:center;}
.sec-head.center .en{justify-content:center;}
.sec-head.center .en::after{content:"";width:36px;height:2px;border-radius:2px;background:var(--accent);}
.sec-head.center h2 .bar{margin-inline:auto;}
/* giant ghost word behind sections (JS drifts it on scroll) */
.bg-txt{
position:absolute;z-index:0;top:clamp(10px,3vw,40px);right:-1vw;
font-family:var(--ff-en);font-weight:800;line-height:1;letter-spacing:.02em;
font-size:clamp(5rem,15vw,13rem);user-select:none;pointer-events:none;
color:transparent;-webkit-text-stroke:1.5px rgba(91,184,227,.28);
white-space:nowrap;will-change:transform;
}
/* ---------- floating pastel blobs ---------- */
.blob{
display:none; /* 背景のシミ（パステルのぼかし円）を非表示 */
position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(2px);
animation:blobFloat 16s ease-in-out infinite alternate;
}
@keyframes blobFloat{
0%{transform:translate(0,0) scale(1);}
50%{transform:translate(-46px,38px) scale(1.12);}
100%{transform:translate(30px,-30px) scale(.94);}
}
/* ---------- 光の波（背景・スクロールで展開） ---------- */
.wave-fx{
position:absolute;left:0;right:0;bottom:0;height:clamp(200px,26vw,360px);z-index:0;
pointer-events:none;opacity:.5;transform-origin:bottom center;
background:url(assets/img/wave.svg) repeat-x;background-size:50% 100%;
animation:waveFlow 22s linear infinite;
will-change:transform,background-position;
}
@keyframes waveFlow{from{background-position-x:0}to{background-position-x:-50%}}
/* 指定セクション（Vision/Works/Activity/People/Blog）では水色の波を非表示 */
.works .wave-fx,.activity .wave-fx,.people .wave-fx,.blog-sec .wave-fx{display:none;}
/* ---------- WebGL 背景エフェクト（assets/js/fx.js） ----------
data-fx を持つ要素に canvas が挿し込まれる。canvas 自体の濃さは
JS が style.opacity で与える（data-fx-opacity で上書き可）。 */
.fx-layer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
/* ヒーロー：動画と暗幕グラデーションの上、コピーの下に重ねる */
.hero .fx-layer{z-index:1;}
/* 画面幅が狭いときは主張を抑える（文字の可読性を優先） */
@media(max-width:900px){
.hero .fx-canvas{opacity:.24!important;}
}
/* ABOUT〜JOURNAL の WebGL 背景（ground / grid / sunburst / truss / ripple）は一旦停止中。
効果そのものは assets/js/fx.js に残してあるので、front-page.php の各セクションへ
data-fx="…" の span を戻せば復活する。付随する mask 指定はここに置いていた。 */
/* ---------- buttons ---------- */
.btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
min-width:230px;padding:16px 26px;
background:var(--accent-d);color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.14em;
border:1px solid var(--accent-d);border-radius:3px;overflow:hidden;z-index:1;
box-shadow:0 10px 26px rgba(61,156,203,.28);
}
.btn::before{
content:"";position:absolute;inset:0;background:var(--accent-deep);z-index:-1;
transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.btn:hover{color:#fff;border-color:var(--accent-deep);transform:translateY(-3px);box-shadow:0 16px 32px rgba(61,156,203,.36);}
.btn:hover::before{transform:scaleX(1);transform-origin:left;}
.btn .arw{
font-family:var(--ff-en);font-size:1rem;transition:transform .35s var(--ease);flex:none;
}
.btn:hover .arw{transform:translateX(8px);}
.btn.ghost{background:transparent;color:var(--accent-deep);box-shadow:none;}
.btn.ghost:hover{color:#fff;}
.btn.mint{background:var(--mint);border-color:var(--mint);color:#2c5c44;box-shadow:0 10px 26px rgba(159,216,187,.4);}
.btn.mint::before{background:#7cc9a2;}
.btn.mint:hover{color:#2c5c44;border-color:#7cc9a2;}
.btn.white{background:#fff;border-color:#fff;color:var(--accent-deep);box-shadow:0 10px 26px rgba(46,77,97,.2);}
.btn.white:hover{color:#fff;border-color:var(--accent);}
.btn.white::before{background:var(--accent);}
/* 各セクションのボタン（一覧／私たちについて／受賞実績 一覧）は、カード面と同じ
半透明の白に合わせる。ヒーローの白ボタン（.hero-btns）は動画上なのでベタ白のまま。 */
.cta .btn.white,
.about-cta .btn,
.award .cta .btn{
background:var(--card-bg);border-color:var(--card-bg);color:var(--accent-deep);
box-shadow:0 10px 26px rgba(46,77,97,.2);
}
/* もともと青ベタだったボタンにも、白ボタンと同じホバー（水色に塗りつぶし）を与える */
.about-cta .btn::before,
.award .cta .btn::before{background:var(--accent);}
.about-cta .btn:hover,
.award .cta .btn:hover{color:#fff;border-color:var(--accent);}
.btn.on-dark{background:rgba(255,255,255,.14);backdrop-filter:blur(4px);border-color:rgba(255,255,255,.7);color:#fff;box-shadow:none;}
.btn.on-dark::before{background:var(--accent);}
.btn.on-dark:hover{border-color:var(--accent);}
/* chips */
.chip{
display:inline-block;padding:4px 14px;font-size:.7rem;font-weight:700;letter-spacing:.14em;
background:var(--accent-d);color:#fff;border-radius:3px;
}
/* ==========================================================
Loading（点群スキャン演出）
※ 描画は assets/js/loader.js。配色・書体はこの演出専用なので、
テーマの :root 変数とぶつからないよう --ld-* として #loader に閉じ込める。
========================================================== */
#loader{
--ld-hydro:#0F5C82;
--ld-ink:#06364B;
--ld-dawn:#E08A2C;
--ld-display:"Helvetica Neue",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
--ld-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",system-ui,sans-serif;
--ld-mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
position:fixed;inset:0;z-index:9999;overflow:hidden;
background:linear-gradient(180deg,#E7F3FA 0%,#D3E9F4 52%,#BDDFEE 100%);
color:var(--ld-ink);font-family:var(--ld-jp);
cursor:grab;touch-action:none;
transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1);
}
#loader.is-done{opacity:0;transform:scale(1.025);pointer-events:none;}
/* 読み込み画面を出さない遷移（header.php の判定で html に付く）。
要素は直後のスクリプトで取り除くが、それまでの一瞬も描かせない */
.no-loader #loader{display:none;}
#loader.dragging{cursor:grabbing;}
/* 点群は「読み込み切ってから」出す。取り込み中はこのキャンバスを伏せておき、
背景のグラデーション（＝空）とバーだけを見せる。 */
#loader #gl{
position:absolute;inset:0;width:100%;height:100%;display:block;
opacity:0;transition:opacity .55s cubic-bezier(.4,0,.2,1);
}
#loader.is-reveal #gl{opacity:1;}
/* 読み込み中は回せないのでカーソルも変えない */
#loader:not(.is-reveal){cursor:default;}
/* ===== 四隅のトンボ（測量レティクル） ===== */
#loader .tick{position:absolute;width:15px;height:15px;border:0 solid rgba(6,54,75,.3);}
#loader .tick--tl{top:26px;left:26px;border-top-width:1px;border-left-width:1px;}
#loader .tick--tr{top:26px;right:26px;border-top-width:1px;border-right-width:1px;}
#loader .tick--bl{bottom:26px;left:26px;border-bottom-width:1px;border-left-width:1px;}
#loader .tick--br{bottom:26px;right:26px;border-bottom-width:1px;border-right-width:1px;}
/* ===== 社章＋社名（WebGL が点で組み上げる。DOM は実寸の下描き） ===== */
#loader .mark{
position:absolute;top:27%;left:50%;transform:translate(-50%,-50%);
text-align:center;width:100%;pointer-events:none;
}
/* 社章も社名も既定は透明。読み込み中（バーだけの時間）は出さず、点群の演出に
入ってから点で組み上げる。WebGL で描けないときだけ JS が .in で DOM 側を出す。
（opacity なのは、点群の位置決めのために実寸で測る必要があるため — 非表示にはしない） */
#loader .mark__a{
font-family:var(--ld-display);font-weight:400;
font-size:clamp(17px,4.5vw,62px);letter-spacing:.24em;text-indent:.24em;
margin:0;line-height:1;white-space:nowrap;color:var(--ld-ink);
opacity:0;transition:opacity 1.1s cubic-bezier(.16,.8,.3,1);
}
#loader .mark__a.in{opacity:1;}
#loader .logo{display:block;flex:none;width:100%;height:100%;object-fit:contain;}
#loader .mark__logo{
width:clamp(66px,10vw,116px);height:clamp(66px,10vw,116px);
margin:0 auto clamp(24px,3.4vw,42px);
opacity:0;
transition:opacity 1.1s cubic-bezier(.16,.8,.3,1);
}
#loader .mark__logo.in{opacity:1;}
/* WebGL が点で描くときは DOM 側を出さない（読み上げは残る） */
.gl-text #loader .mark__a,
.gl-text #loader .mark__logo{opacity:0;transition:none;}
/* ===== HUD（進捗バー＋ステータス） ===== */
#loader .hud{
position:absolute;bottom:10%;left:50%;transform:translateX(-50%);
width:min(680px,76vw);pointer-events:none;
}
#loader .rule{position:relative;height:1px;background:rgba(15,92,130,.22);}
#loader .rule__fill{
position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;
background:linear-gradient(90deg,var(--ld-hydro) 0%,var(--ld-hydro) 82%,var(--ld-dawn) 100%);
box-shadow:0 0 14px rgba(224,138,44,.55);
}
#loader .meta{
display:flex;justify-content:space-between;align-items:baseline;
padding-top:13px;font-family:var(--ld-mono);font-size:11px;letter-spacing:.14em;
color:rgba(6,54,75,.6);
}
#loader .meta__status{font-family:var(--ld-jp);letter-spacing:.16em;}
#loader .meta__pct{font-variant-numeric:tabular-nums;color:var(--ld-hydro);}
#loader .caption{
margin-top:7px;font-family:var(--ld-mono);font-size:10px;letter-spacing:.16em;
color:rgba(6,54,75,.38);font-variant-numeric:tabular-nums;
}
/* 読み込みの目盛り（バー・％・状態・点数）は取り込み中だけのもの。
点群が出たら引っ込めて、キャンバスに集中させる。 */
#loader .rule,
#loader .meta,
#loader .caption{transition:opacity .5s cubic-bezier(.4,0,.2,1);}
#loader.is-reveal .rule,
#loader.is-reveal .meta,
#loader.is-reveal .caption{opacity:0;}
/* 操作の案内は、点群が出て回せるようになってから */
#loader .hint{
display:block;margin-top:9px;font-family:var(--ld-mono);font-size:10px;
letter-spacing:.16em;color:rgba(6,54,75,.34);
opacity:0;
}
#loader.is-reveal .hint{animation:ldHintIn .9s .9s forwards;}
@keyframes ldHintIn{to{opacity:1;}}
@media (prefers-reduced-motion: reduce){
#loader{transition-duration:.3s;}
#loader.is-done{transform:none;}
/* 表示するかどうかは .in（JS）に任せ、ここではフェードだけ止める */
#loader .mark__logo,#loader .mark__a{transition:none;}
#loader #gl{transition:none;}
#loader .hint{opacity:1;animation:none;}
}
/* ==========================================================
Header
========================================================== */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;
display:flex;align-items:center;justify-content:space-between;
padding:0 clamp(18px,3vw,40px);height:92px;gap:16px;
transition:background .5s,height .5s,box-shadow .5s,color .5s;
color:#fff;
}
.site-header.scrolled{
background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
height:72px;box-shadow:0 6px 26px rgba(46,77,97,.1);color:var(--ink);
}
/* 下層ページは常に明るいヘッダー */
.site-header.on-light{
background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
box-shadow:0 6px 26px rgba(46,77,97,.1);color:var(--ink);
}
/* 下層ページでは、ヘッダーの地色をページ地色（body.sub-page のグラデーション上端）
と同じ水色に合わせて、白い帯として浮かないようにする。
境界の影は出さず、下端の細い白ハイライトだけでツヤの続きを表現する。 */
body.sub-page .site-header.on-light{
background:linear-gradient(180deg,rgba(235,246,253,.94) 0%,rgba(223,240,250,.9) 100%);
-webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);
box-shadow:none;border-bottom:1px solid rgba(255,255,255,.6);
color:var(--ink);
}
/* ページ最上部（未スクロール）では地色を敷かず、ページ背景をそのまま通す。
body.sub-page の背景は固定なので、帯の継ぎ目がまったく出ない */
body.sub-page .site-header.on-light:not(.scrolled){
background:transparent;
-webkit-backdrop-filter:none;backdrop-filter:none;
border-bottom-color:transparent;
}
/* 本文がヘッダーの下へ潜り込むときだけ、ごく薄い影で段差を示す */
body.sub-page .site-header.on-light.scrolled{
background:linear-gradient(180deg,rgba(235,246,253,.96) 0%,rgba(221,239,250,.93) 100%);
box-shadow:0 6px 22px rgba(46,77,97,.07);
}
.brand{display:flex;align-items:center;gap:12px;color:inherit;}
.brand .logo-mark{width:42px;height:42px;flex:none;transform:translateY(3px);}
.brand .brand-txt{display:flex;flex-direction:column;line-height:1.35;}
.brand .tagline{font-size:.52rem;letter-spacing:.18em;font-weight:500;opacity:.78;}
.brand .name{font-weight:700;font-size:1.62rem;letter-spacing:.08em;color:inherit;font-family:var(--ff-base);line-height:1.2;}
.gnav{display:flex;align-items:center;height:100%;}
.gnav ul{display:flex;align-items:center;height:100%;}
.gnav li{height:100%;}
.gnav li a{
height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
padding:0 clamp(8px,.95vw,15px);color:inherit;position:relative;
}
.gnav li a .jp{font-size:.82rem;font-weight:700;letter-spacing:.1em;}
.gnav li a .en{font-family:var(--ff-en);font-size:.58rem;color:var(--accent);letter-spacing:.24em;text-transform:uppercase;font-weight:600;}
.site-header.scrolled .gnav li a .en,
.site-header.on-light .gnav li a .en{color:var(--accent-d);}
.gnav li a::after{
content:"";position:absolute;left:50%;bottom:18px;width:0;height:2px;border-radius:2px;
background:var(--accent);transition:.35s var(--ease);transform:translateX(-50%);
}
.gnav li a:hover::after{width:56%;}
.gnav .nav-contact{display:flex;align-items:center;}
.gnav .nav-contact a{
background:var(--accent-d);color:#fff;height:auto;padding:11px 20px;margin-left:14px;
border-radius:3px;transition:.35s;
}
.gnav .nav-contact a:hover{background:var(--accent-deep);}
.gnav .nav-contact a .en{color:rgba(255,255,255,.75);}
.site-header.scrolled .gnav .nav-contact a .en,
.site-header.on-light .gnav .nav-contact a .en{color:rgba(255,255,255,.75);}
.gnav .nav-contact a::after{display:none;}
/* hamburger */
.menu-btn{
display:none;width:72px;height:72px;border:none;background:transparent;cursor:pointer;
position:relative;z-index:1200;flex:none;
}
.menu-btn span{
display:block;width:30px;height:2px;background:currentColor;margin:5px auto;border-radius:2px;
transition:.4s var(--ease);
}
body.nav-open .menu-btn{color:var(--ink);}
body.nav-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .menu-btn span:nth-child(2){opacity:0;transform:translateX(-10px);}
body.nav-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:1080px){
.menu-btn{display:block;}
.gnav{
position:fixed;inset:0;
/* height:100%（PC用の指定）が残るとヘッダーの高さに潰れるので必ず打ち消す */
height:auto;
/* 背景は透過させない（下のページが透けて読めなくなるのを防ぐ） */
background:linear-gradient(180deg,#f6fbfe 0%,#e3f1fa 100%);
-webkit-backdrop-filter:none;backdrop-filter:none;
flex-direction:column;justify-content:flex-start;align-items:center;
padding:80px 0 calc(28px + env(safe-area-inset-bottom));
overflow-y:auto;overscroll-behavior:contain;
opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
z-index:1100;color:var(--ink);
}
body.nav-open .gnav{opacity:1;visibility:visible;}
/* margin-block:auto ＝ 余裕があれば中央、項目が多いときは上下に収める */
.gnav ul{flex-direction:column;height:auto;gap:2px;width:min(440px,86%);margin-block:auto;}
.gnav li{height:auto;width:100%;opacity:0;transform:translateY(24px);transition:.6s var(--ease);}
body.nav-open .gnav li{opacity:1;transform:none;}
body.nav-open .gnav li:nth-child(2){transition-delay:.05s}
body.nav-open .gnav li:nth-child(3){transition-delay:.1s}
body.nav-open .gnav li:nth-child(4){transition-delay:.15s}
body.nav-open .gnav li:nth-child(5){transition-delay:.2s}
body.nav-open .gnav li:nth-child(6){transition-delay:.25s}
body.nav-open .gnav li:nth-child(7){transition-delay:.3s}
body.nav-open .gnav li:nth-child(8){transition-delay:.35s}
.gnav li a{
flex-direction:row;justify-content:space-between;padding:16px 10px;color:var(--ink);
border-bottom:1px solid var(--line);
}
.gnav li a .jp{font-size:1.05rem;}
.gnav li a .en{color:var(--accent-d);}
.gnav li a::after{display:none;}
.gnav .nav-contact a{margin:18px 0 0;background:var(--accent-d);color:#fff;padding:16px 20px;border-bottom:none;}
}
/* ==========================================================
Hero — fullscreen slideshow
========================================================== */
.hero{
position:relative;height:100svh;min-height:620px;overflow:hidden;
display:flex;align-items:flex-end;background:var(--mist);
}
/* ヒーロー背景動画 */
.hero-video-wrap{position:absolute;inset:0;overflow:hidden;background:var(--ink);}
.hero-video{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;
}
.hero::before{
content:"";position:absolute;inset:0;z-index:1;
background:
linear-gradient(80deg,rgba(38,74,96,.42) 0%,rgba(38,74,96,.12) 40%,transparent 62%),
linear-gradient(0deg,rgba(33,68,90,.42) 0%,transparent 30%),
linear-gradient(180deg,rgba(33,68,90,.42) 0%,transparent 16%);
}
.hero-inner{
position:relative;z-index:2;width:min(2040px,95%);margin-inline:auto;
padding-bottom:clamp(120px,16vh,170px);
}
.hero-eyebrow{
margin-top:40px;
font-family:var(--ff-en);font-weight:600;font-size:clamp(.68rem,1vw,.8rem);
letter-spacing:.42em;color:#fff;text-transform:uppercase;
display:flex;align-items:center;gap:16px;
opacity:0;animation:fadeIn 1.2s .9s forwards;
text-shadow:0 2px 10px rgba(33,68,90,.7);
}
.hero-eyebrow::before{content:"";width:52px;height:2px;border-radius:2px;background:var(--accent);}
.hero-catch{
margin-top:20px;
font-family:var(--ff-base);font-weight:900;color:#fff;
font-size:clamp(2.7rem,7.6vw,6.2rem);line-height:1.26;letter-spacing:.06em;
text-shadow:0 2px 12px rgba(33,68,90,.5),0 8px 40px rgba(33,68,90,.45);
}
/* キーボード入力風タイプ表示（点滅カーソル付き） */
.hero-catch .type-catch,.hero-lead .type-lead{display:inline;}
.hero-catch{min-height:2.52em;}
.type-catch.typing::after,.type-lead.typing::after{
content:"";display:inline-block;width:.06em;height:1.05em;background:currentColor;
margin-left:.05em;vertical-align:-.12em;animation:caretBlink .8s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}
/* IME変換中（かな入力）の単語だけ下線 */
.type-catch .ime,.type-lead .ime{
text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;
text-decoration-color:rgba(255,255,255,.65);
}
.hero-lead{
margin-top:26px;color:#fff;font-weight:500;min-height:4.4em;
font-size:clamp(.9rem,1.4vw,1.05rem);letter-spacing:.16em;line-height:2.1;
text-shadow:0 2px 10px rgba(33,68,90,.7),0 6px 26px rgba(33,68,90,.5);
}
.hero-btns{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:fadeIn 1.4s 1.45s forwards;}
@keyframes fadeIn{to{opacity:1}}
/* 装飾文字（左に縦 ASAHI / 下に横 CONSTRUCTION） */
.hero-mark{
position:absolute;z-index:1;font-family:var(--ff-en);font-weight:800;line-height:1;
color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);
user-select:none;pointer-events:none;
opacity:0;animation:fadeIn 2s 1.2s forwards;
}
/* キーボードで1文字ずつ打つように表示 */
.hero-mark.typemark{opacity:1;animation:none;}
.hero-mark.typemark i{font-style:normal;display:inline-block;opacity:0;animation:typeChar .04s steps(1) forwards;}
@keyframes typeChar{from{opacity:0}to{opacity:1}}
/* ASAHI：縦書き・左端の装飾 */
.hero-mark.v{
writing-mode:vertical-rl;text-orientation:mixed;
left:-6px;top:clamp(96px,12vh,150px);
font-size:clamp(3.4rem,6.4vw,6.6rem);letter-spacing:.08em;line-height:1;
-webkit-text-stroke-color:rgba(255,255,255,.22);
}
/* CONSTRUCTION：下部・横書き */
.hero-mark.h{
right:clamp(14px,2.6vw,46px);bottom:clamp(8px,2.4vh,28px);
font-size:clamp(3rem,9vw,8rem);letter-spacing:.1em;line-height:.86;
}
/* 本文と被りやすい幅ではASAHIを隠す */
@media(max-width:1280px){.hero-mark.v{display:none;}}
@media(max-width:900px){
.hero-mark.h{font-size:clamp(2rem,8vw,4rem);right:12px;bottom:12px;}
}
/* slide progress dots */
.hero-nav{
position:absolute;left:clamp(18px,3vw,44px);bottom:44px;z-index:3;
display:flex;flex-direction:column;gap:14px;
}
.hero-nav button{
width:3px;height:34px;border:none;background:rgba(255,255,255,.4);cursor:pointer;
transition:.4s;padding:0;border-radius:3px;
}
.hero-nav button.active{background:#fff;}
/* vertical scroll sign */
.scroll-sign{
position:absolute;right:clamp(18px,2.6vw,40px);bottom:0;z-index:3;
display:flex;flex-direction:column;align-items:center;gap:12px;
font-family:var(--ff-en);font-size:.64rem;letter-spacing:.34em;color:#fff;writing-mode:vertical-rl;
}
.scroll-sign::after{
content:"";width:2px;height:78px;border-radius:2px;background:linear-gradient(#fff,transparent);
animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:900px){
.hero-nav{display:none;}
.hero-inner{padding-bottom:110px;}
}
/* ==========================================================
News ticker（ヒーロー直下・横流れ）
========================================================== */
.news-ticker{
position:relative;z-index:6;display:flex;align-items:stretch;
background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(46,77,97,.06);
}
.news-ticker .label{
flex:none;display:flex;align-items:center;gap:12px;padding:0 clamp(18px,2.6vw,34px);
background:var(--accent-d);color:#fff;
}
.news-ticker .label .en{font-family:var(--ff-en);font-weight:800;letter-spacing:.14em;font-size:1rem;}
.news-ticker .label .jp{font-size:.62rem;letter-spacing:.22em;opacity:.85;}
.news-ticker .track-wrap{flex:1;min-width:0;overflow:hidden;position:relative;}
.news-ticker .track{display:flex;width:max-content;align-items:stretch;animation:ticker 45s linear infinite;}
.news-ticker:hover .track{animation-play-state:paused;}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.news-ticker .tick{
display:inline-flex;align-items:center;gap:14px;padding:16px clamp(22px,3vw,44px);
color:var(--text);white-space:nowrap;border-right:1px solid var(--line);
}
.news-ticker .tick .date{font-family:var(--ff-en);color:var(--accent-deep);font-size:.82rem;letter-spacing:.08em;flex:none;}
.news-ticker .tick .chip{font-size:.6rem;padding:3px 10px;flex:none;}
.news-ticker .tick .ttl{font-size:.9rem;transition:.3s;}
.news-ticker .tick:hover .ttl{color:var(--accent-deep);}
.news-ticker .more{
flex:none;display:flex;align-items:center;gap:8px;padding:0 clamp(16px,2.2vw,28px);
font-family:var(--ff-en);font-weight:700;font-size:.78rem;letter-spacing:.14em;
color:var(--accent-deep);border-left:1px solid var(--line);
}
.news-ticker .more .arw{transition:.3s;}
.news-ticker .more:hover{background:var(--paper);}
.news-ticker .more:hover .arw{transform:translateX(5px);}
@media(max-width:640px){
.news-ticker .label .jp{display:none;}
.news-ticker .more{padding:0 16px;}
}
/* ==========================================================
認証・宣言バナー（ヒーロー直下・横流れ / 背景透過）
========================================================== */
.logo-marquee{
position:relative;z-index:6;background:transparent;
padding:clamp(11px,1.5vw,20px) 0;overflow:hidden; /* 帯の縦幅は 0.75 倍に圧縮 */
border-bottom:1px solid rgba(46,77,97,.1);
}
.logo-marquee .track-wrap{overflow:hidden;position:relative;width:100%;
-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* ロゴは6セット複製（functions.php）。-50%＝3セット分＝約4500pxを165秒で流す＝約27px/秒。
セット数を変えたら秒数も同じ倍率で調整すること。 */
.logo-marquee .track{display:flex;width:max-content;align-items:center;animation:ticker 165s linear infinite;}
.logo-marquee:hover .track{animation-play-state:paused;}
.logo-marquee .bn{
flex:none;display:inline-flex;align-items:center;justify-content:center;
padding:0 clamp(24px,3.4vw,52px);
}
.logo-marquee .bn img{
height:clamp(39px,3.75vw,56px);width:auto;object-fit:contain; /* 帯に合わせて 0.75 倍 */
/* JPG等の白背景を背景になじませて消す */
mix-blend-mode:multiply;
filter:saturate(1.02);transition:transform .35s var(--ease),opacity .35s;
opacity:.92;
}
.logo-marquee .bn:hover img{transform:translateY(-3px) scale(1.04);opacity:1;}
@media(max-width:640px){
.logo-marquee .bn img{height:35px;}
.logo-marquee .bn{padding:0 20px;}
}
/* フッター上部の横流れ：フッター最上部に帯として配置 */
.site-footer .logo-marquee.in-footer{
margin-top:calc(-1 * var(--f-pad-top)); /* footerのpadding-top分だけ上端へ（値は .site-footer 側で定義） */
margin-bottom:clamp(40px,5vw,64px);
padding:clamp(14px,1.65vw,23px) 0; /* 帯の縦幅は 0.75 倍に圧縮 */
/* フッターのすりガラスの上に、帯だけもう少しだけ白を足して境目とロゴを立たせる */
background:rgba(255,255,255,.45); /* もとは #fff の白帯。フッターより少し明るくして帯として見せる */
border-top:1px solid var(--line);
border-bottom:1px solid rgba(46,77,97,.1);
}
/* ==========================================================
Section background FX（フラットな面パターン＋紙目のグレイン）
セクションの ::before にパターン、::after にグレインを敷く。どちらも
z-index:0 / pointer-events:none で、内容(.container)を z-index:1 に持ち上げる。
グラデーション・影・光沢は使わず、線とドットの単色パターンだけで構成する。
========================================================== */
:root{
--fx-ink:46,126,169; /* パターンの基準色（rgb 値のみ。rgba() に流し込む） */
--fx-grain:.38; /* グレインの濃さ */
/* 面用の粒。明暗どちらの粒も出るので、下地を濁らせずに紙の目を出せる。
baseFrequency は高DPIの縮小で潰れない粗さ（.7 前後）にしている */
--fx-grain-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
/* 布目（リネン）の繊維。等方性のノイズだと「粒」＝ホコリに見えるため、
baseFrequency を軸ごとに大きく変えた異方性ノイズを縦横で重ねて「織り」にする:
h = 横に伸びた繊維（X の周波数を低く、Y を高く）
v = 縦に伸びた繊維（その逆）
saturate 0 で明暗両方の値が出るため、糸のハイライトと影が同時に出る。
大きなうねり（低周波のムラ）は入れない＝シミ・汚れに見えるため。 */
--fx-linen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 1.2' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.5' intercept='-.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2 .006' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.42' intercept='-.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23h)'/%3E%3Crect width='400' height='400' filter='url(%23v)'/%3E%3C/svg%3E");
/* 白いパネル用。同じ布目を弱めた版（background-image のレイヤーには opacity を指定できないため内部で調整） */
--fx-linen-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 1.2' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.3' intercept='-.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2 .006' numOctaves='2' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.26' intercept='-.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23h)'/%3E%3Crect width='400' height='400' filter='url(%23v)'/%3E%3C/svg%3E");
/* 文字を紙の質感に見せる用の粒。白い粒を疎に散らす（濃さは rect の opacity で調整） */
--fx-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0' intercept='1'/%3E%3CfeFuncG type='linear' slope='0' intercept='1'/%3E%3CfeFuncB type='linear' slope='0' intercept='1'/%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='.62'/%3E%3C/svg%3E");
}
/* ABOUT は壁紙（紙目・粒）を持たない。背景は WebGL の点群スキャンに置き換えた */
.works::before,.works::after,
.award::before,.award::after,
.activity::before,.activity::after,
.blog-sec::before,.blog-sec::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
}
/* 内容はパターンより前面へ */
.works>.container,.award>.container,
.activity>.container,.blog-sec>.container{position:relative;z-index:1;}
/* ---- 紙目のグレイン（SVGノイズ。外部画像を持たない）----
feFuncA discrete で「疎な粒」に間引く。これで通常のアルファ合成でも
全面が灰色に濁らず、mix-blend-mode を使わずに済む（これらのセクションは
backdrop-filter:blur を持つため、ブレンド指定を重ねると合成コストが跳ねる）。 */
.works::after,.award::after,
.activity::after,.blog-sec::after{
background-image:var(--fx-grain-img);
background-size:240px 240px;
opacity:var(--fx-grain);
}
/* ---- WORKS：製図メッシュ（細32px＋太128pxの2段グリッド）---- */
.works::before{
background-image:
linear-gradient(to right ,rgba(var(--fx-ink),.10) 1px,transparent 1px),
linear-gradient(to bottom,rgba(var(--fx-ink),.10) 1px,transparent 1px),
linear-gradient(to right ,rgba(var(--fx-ink),.05) 1px,transparent 1px),
linear-gradient(to bottom,rgba(var(--fx-ink),.05) 1px,transparent 1px);
background-size:128px 128px,128px 128px,32px 32px,32px 32px;
-webkit-mask:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
mask:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}
/* ---- AWARD：ハーフトーン状のドット＋測量の同心円（右上から減衰）---- */
.award::before{
background-image:
radial-gradient(rgba(var(--fx-ink),.30) 1px,transparent 1.7px),
repeating-radial-gradient(circle at 50% 50%,transparent 0 46px,rgba(91,184,227,.16) 46px 47px);
background-size:20px 20px,560px 560px;
background-position:0 0,right -140px top -80px;
background-repeat:repeat,no-repeat;
-webkit-mask:radial-gradient(115% 100% at 88% 4%,#000 6%,transparent 72%);
mask:radial-gradient(115% 100% at 88% 4%,#000 6%,transparent 72%);
}
/* ---- ACTIVITY：斜めのハッチング ---- */
.activity::before{
background-image:repeating-linear-gradient(135deg,rgba(var(--fx-ink),.07) 0 1.5px,transparent 1.5px 14px);
-webkit-mask:linear-gradient(180deg,#000 0,#000 30%,transparent 84%);
mask:linear-gradient(180deg,#000 0,#000 30%,transparent 84%);
}
/* ---- BLOG：ドットマトリクス（上から下へ減衰）---- */
.blog-sec::before{
background-image:radial-gradient(rgba(var(--fx-ink),.22) 1px,transparent 1.6px);
background-size:22px 22px;
-webkit-mask:linear-gradient(180deg,#000 0,transparent 62%);
mask:linear-gradient(180deg,#000 0,transparent 62%);
}
/* ==========================================================
Vision / About
========================================================== */
/* VISIONセクション：7.jpgを全面に敷き、右上→左下の対角線で「切れて見える」よう
明るいツヤありパネルを左上に重ねる。実際には画像はクロップしない。 */
.about{
overflow:clip;
/* 地色のうえに、地盤改良工事の3Dモデルが組み上がる WebGL を敷く（.fx-about） */
background-color:#c9e6f5;
/* コピーと写真はセクション上部。上部に背景英字VISION用の余白を確保 */
padding-top:clamp(116px,15vh,190px);
padding-bottom:clamp(72px,9vh,132px);
}
/* 背景写真とフィルターは削除（ツヤあり水色背景のみ） */
.about-photo{display:none;}
/* 3Dモデルの背景は、本文が載る左上を弱め、右下ほど濃く残す。
線が細いので、文字の可読性を落とさずに奥行きだけが伝わる。 */
.about .fx-about{
-webkit-mask-image:radial-gradient(105% 78% at 60% 55%,#000 0%,rgba(0,0,0,.92) 52%,rgba(0,0,0,.45) 80%,rgba(0,0,0,0) 100%);
mask-image:radial-gradient(105% 78% at 60% 55%,#000 0%,rgba(0,0,0,.92) 52%,rgba(0,0,0,.45) 80%,rgba(0,0,0,0) 100%);
}
@media(max-width:900px){
/* 縦に長い版では主張を抑える（文字の可読性を優先） */
.about .fx-about .fx-canvas{opacity:.3!important;}
}
.about .container{position:relative;z-index:2;}
/* 背景の「VISION」は左テキスト側に配置し、右カラムの写真と重ならないようにする */
.about .bg-txt{
left:-1vw;right:auto;
top:clamp(2px,1.2vw,16px);bottom:auto;
font-size:clamp(3.4rem,8.6vw,7rem);
}
@media(max-width:900px){
.about .bg-txt{top:clamp(2px,2vw,14px);}
}
/* 2カラム（左:テキスト / 右:写真）内での読みやすい行長 */
.about .txt{max-width:640px;}
.about .sec-head{margin-bottom:22px;}
.about .stats{margin-top:26px;}
.about .stat{padding:16px 6px;}
.about .txt>p:last-child{margin-top:24px!important;}
.about .txt .d1 p:last-child{margin-bottom:0;}
.about .grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,4vw,60px);align-items:start;position:relative;z-index:1;}
/* 見出し「家族に誇れる仕事を。」 */
.about .sec-head h2{font-size:clamp(2.3rem,5vw,3.7rem);white-space:nowrap;}
.about .sec-head .en{font-size:.86rem;letter-spacing:.32em;}
.about .stat .num{font-size:clamp(2.1rem,3.8vw,3rem);}
.about .stat .lbl{font-size:.78rem;}
.about .catch{
font-family:var(--ff-disp);font-weight:500;color:var(--ink);
font-size:clamp(1.85rem,3.9vw,2.85rem);line-height:1.6;letter-spacing:.06em;margin-bottom:24px;
position:relative;border-left:4px solid var(--accent);
padding:12px 18px;
}
.about .txt p{margin-bottom:1em;font-size:1.2rem;line-height:1.95;}
.about .txt .em{color:var(--accent-deep);font-weight:700;}
.about .visual{
position:relative;
/* 写真の上端を見出し「家族に誇れる仕事を。」の上端に合わせる（Our Visionラベル分だけ下げる） */
margin-top:calc(.86rem + 16px);
/* 少し中央寄りへ */
margin-right:clamp(12px,4vw,72px);
}
.about .visual .ph{overflow:hidden;position:relative;border-radius:12px;box-shadow:0 22px 44px rgba(46,77,97,.18);}
.about .visual .ph img{display:block;width:100%;height:clamp(340px,44vw,560px);object-fit:cover;}
/* 5.jpg を大きく1枚・水彩ウォッシュ風マスク（中央は鮮明・端は柔らかくにじむ） */
.about .visual .ph.big{
border-radius:0;box-shadow:none;overflow:visible;
-webkit-mask:url(assets/img/watercolor.svg) center / 100% 100% no-repeat;
mask:url(assets/img/watercolor.svg) center / 100% 100% no-repeat;
filter:drop-shadow(0 18px 30px rgba(46,77,97,.16));
}
.about .visual .ph.big img{width:100%;height:clamp(400px,50vw,680px);object-fit:cover;border-radius:0;}
/* ペンキのブラシで描いた跡だけ写真が見える演出（粗い不定形） */
.about .visual .ph.brush{
overflow:visible;border-radius:0;
filter:drop-shadow(0 16px 26px rgba(46,77,97,.22));
}
.about .visual .ph.brush img{border-radius:0;}
/* 1枚目（大）*/
.about .visual .ph.b1{
width:82%;
-webkit-mask:url(assets/img/brush.svg) center / 100% 100% no-repeat;
mask:url(assets/img/brush.svg) center / 100% 100% no-repeat;
}
/* 2枚目（小・右下に重ねる）*/
.about .visual .ph.b2{
position:absolute;right:-2%;bottom:-4%;width:48%;z-index:2;
-webkit-mask:url(assets/img/brush2.svg) center / 100% 100% no-repeat;
mask:url(assets/img/brush2.svg) center / 100% 100% no-repeat;
}
.about .visual .ph.b2 img{height:clamp(180px,23vw,300px);}
.about .visual .cap{
position:absolute;left:-4px;top:-6px;z-index:3;background:var(--accent-d);color:#fff;
font-family:var(--ff-en);font-size:.66rem;letter-spacing:.3em;padding:10px 18px;font-weight:600;border-radius:3px;
box-shadow:0 10px 24px rgba(61,156,203,.3);
}
@media(max-width:900px){
.about .visual .ph.b1{width:88%;}
.about .visual .ph.b2{width:52%;right:0;bottom:-6%;}
}
@media(max-width:900px){
/* minmax(0,1fr)：見出しの white-space:nowrap で列が min-content まで広がり
テキストと写真が画面右にはみ出すのを防ぐ（1カラム時のみ折り返しを許可） */
.about .grid{grid-template-columns:minmax(0,1fr);gap:54px;}
.about .sec-head h2{white-space:normal;}
.about .visual{order:-1;margin-top:10px;margin-right:0;}
.about .visual::after{right:-12px;top:14px;}
}
/* スマホ：見出し・キャッチは1行に収まるサイズへ */
@media(max-width:560px){
.about .sec-head h2{font-size:clamp(1.6rem,8vw,2.3rem);}
.about .catch{font-size:clamp(1.25rem,6.2vw,1.85rem);padding:10px 14px;}
}
/* ---------- Vision POINT カード（3つの強み） ---------- */
.about-points{
position:relative;z-index:1;
margin-top:clamp(48px,7vw,96px);
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(18px,2vw,30px);
align-items:stretch;
}
.pt-card{
position:relative;display:flex;flex-direction:column;
background:var(--card-bg);
border:1px solid var(--line);border-radius:18px;
padding:clamp(26px,2.4vw,38px) clamp(22px,2.2vw,32px) clamp(24px,2.4vw,32px);
box-shadow:0 22px 46px rgba(46,77,97,.12);
overflow:hidden;
transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
/* 上端のアクセントバー */
.pt-card::before{
content:"";position:absolute;left:0;top:0;width:100%;height:5px;
background:linear-gradient(90deg,var(--accent),var(--accent-deep));
}
.pt-card:hover{transform:translateY(-6px);box-shadow:0 30px 58px rgba(46,77,97,.2);}
.pt-no{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;}
.pt-no .lbl{font-family:var(--ff-en);font-weight:700;font-size:.72rem;letter-spacing:.3em;color:var(--accent-deep);}
.pt-no .no{
font-family:var(--ff-en);font-weight:800;line-height:1;letter-spacing:.02em;
font-size:clamp(2.4rem,4vw,3.3rem);color:var(--accent);
}
.pt-ttl{
font-family:var(--ff-disp);font-weight:700;letter-spacing:.04em;
font-size:clamp(1.18rem,1.7vw,1.42rem);line-height:1.55;color:var(--ink);margin-bottom:14px;
}
.pt-body{
font-size:.92rem;line-height:1.95;letter-spacing:.02em;color:var(--text-dim);
margin-bottom:auto;
}
/* POINTカードの結び。『あさひフィロソフィ』『土木の道』からの引用を、
数字のかわりにカードの足元へ置く（.pt-stats と同じ位置・同じ余白）。 */
.pt-quote{
margin-top:32px;padding-top:20px;
border-top:1px solid rgba(46,77,97,.14);
font-family:var(--ff-disp);font-weight:600;
font-size:.86rem;line-height:1.85;letter-spacing:.03em;
color:var(--accent-deep);
}
.pt-stats{display:flex;gap:12px;margin-top:32px;}
.pt-stat{
flex:1;min-width:0;text-align:center;
background:var(--paper);border-radius:14px;padding:26px 10px 22px;
}
/* 数字は太らせず、字面を大きくして見せる。
Outfit の 500 まで落とし、字送りを詰めて数字を等幅に揃える */
.pt-stat .n{
display:block;font-family:var(--ff-en);font-weight:500;
line-height:1.02;font-size:clamp(2.7rem,4.2vw,3.9rem);
letter-spacing:-.015em;font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
color:var(--accent-deep);
}
/* 単位（%・件・分…）は数字の添え物。細く小さく、色も一段落とす */
.pt-stat .n small{
font-family:var(--ff-base);font-weight:500;font-size:.86rem;
letter-spacing:.04em;margin-left:5px;color:var(--text-dim);
}
.pt-stat .l{display:block;font-size:.74rem;font-weight:600;letter-spacing:.05em;line-height:1.5;color:var(--text-dim);margin-top:8px;}
@media(max-width:900px){
.about-points{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;}
}
/* POINTカード下の中央CTA */
.about-cta{text-align:center;margin-top:clamp(40px,5vw,64px);}
/* stats */
.stats{display:flex;gap:0;margin-top:44px;border:1px solid var(--line);border-radius:6px;background:var(--white);overflow:hidden;}
.stat{flex:1;min-width:0;text-align:center;padding:22px 8px;position:relative;}
.stat+.stat{border-left:1px solid var(--line);}
.stat .num{font-family:var(--ff-en);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--accent-deep);line-height:1.1;}
.stat .num small{font-size:.85rem;font-family:var(--ff-base);font-weight:700;margin-left:2px;color:var(--ink);}
.stat .lbl{font-size:.72rem;color:var(--text-dim);font-weight:700;letter-spacing:.16em;margin-top:6px;}
/* ==========================================================
Activity（活動報告）
========================================================== */
.activity{
/* 前後セクションと境界を作らないよう、上端=award下端色 → 中間=薄緑 → 下端=blog上端色 で橋渡し */
background:linear-gradient(180deg,#e2f3fc 0%,#e6f4ee 50%,#f3faf8 100%);
overflow:hidden;
}
.activity .blob.b1{width:520px;height:520px;top:-160px;left:-140px;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 65%);}
.activity .blob.b2{display:none;}
/* 最新5件を1行に並べる。1枚は小さくなるので、下の余白と文字も一段落とす */
.activity .cards{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.5vw,22px);position:relative;z-index:1;}
.act-card{
display:block;color:var(--text);background:var(--card-bg);border-radius:10px;overflow:hidden;
box-shadow:0 14px 30px rgba(46,77,97,.12);
transition:transform .5s var(--ease),box-shadow .5s;
}
.act-card:hover{transform:translateY(-8px);box-shadow:0 24px 44px rgba(46,77,97,.2);}
.act-card .ph{overflow:hidden;aspect-ratio:16/10;background:var(--mist);}
.act-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.act-card:hover .ph img{transform:scale(1.07);}
.act-card .body{padding:15px 15px 18px;}
/* 日付はカードの入り口なので、薄いグレーではなく水色で少し前に出す */
.act-card .date{
display:block;font-family:var(--ff-en);font-size:.8rem;font-weight:600;
letter-spacing:.1em;color:var(--accent-deep);font-variant-numeric:tabular-nums;
}
/* 日付と活動区分は1行に。区分名が長いものがあるので、入らなければ折り返す */
.act-card .act-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.act-card .act-meta .chip{font-size:.62rem;padding:2px 9px;letter-spacing:.1em;}
.act-card h3{font-size:.88rem;font-weight:700;line-height:1.6;letter-spacing:.04em;margin-top:6px;transition:.3s;}
.act-card:hover h3{color:var(--accent-deep);}
.act-card p{font-size:.76rem;line-height:1.85;color:var(--text-dim);margin-top:8px;}
.activity .cta{text-align:center;margin-top:clamp(44px,6vw,64px);position:relative;z-index:1;}
/* 5列だと窮屈になる幅から段階的に折り返す */
@media(max-width:1240px){.activity .cards{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.activity .cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.activity .cards{grid-template-columns:1fr;}}
/* 活動報告一覧も同じ考え方で、行の間隔を列より広くとる（.archive-grid と揃える） */
.activity-archive{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(38px,3.6vw,58px) clamp(14px,1.5vw,22px);}
@media(max-width:1240px){.activity-archive{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.activity-archive{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.activity-archive{grid-template-columns:1fr;}}
/* ==========================================================
Award（受賞実績）
========================================================== */
.award{overflow:hidden;}
/* 上端を基準に組む（センタリングだと .award-list の下げ量が両カラムの
高さ差で変わってしまい、見出しと揃わなくなる）
※施工実績（.works）も同じ組み方なので、以下は2セクション共通 */
.award .grid,
.works .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,80px);align-items:start;position:relative;z-index:1;}
/* .award .txt p より詳細度を上げておく（下の指定に食われて小さくなるのを防ぐ） */
.award .txt .catch,
.works .txt .catch{
font-family:var(--ff-disp);font-weight:500;color:var(--ink);
font-size:clamp(1.18rem,1.8vw,1.5rem);line-height:1.85;letter-spacing:.08em;margin-bottom:20px;
}
.award .txt p,
.works .txt p{font-size:1rem;line-height:2;}
/* 受賞リストの地。ぼかしは掛けず、カード面より一段薄い白で背景を透かす */
.award-list{
border-top:1px solid var(--line);
background:var(--card-bg-soft);
border-radius:2px;
/* リストの上端を見出し（受賞実績／施工実績）の文字の上端に合わせる。
内訳＝ENラベルの行ボックス(1rem × body の line-height 2 ＝ 2rem。
.en は inline-flex で 12px 程度しかないため、行の高さ＝ strut で決まる)
＋ h2 の margin-top(16px)
＋ h2 の行間の上半分(font-size × (1.45-1)/2 = ×.225)
見出しサイズは clamp で可変なので、同じ式で追従させる。
実測（Chrome）で h2 の文字上端＝グリッド上端＋58.8px、この式も 58.8px。 */
margin-top:calc(2rem + 16px + clamp(1.9rem,4.4vw,3rem) * .225);
}
/* 見出し下のリード文・本文も同じ地色に。ぼかしは掛けない
（濃さを変えるときは :root の --card-bg を動かす） */
.about .catch,
.about .txt .d1,
.award-lead{
background:var(--card-bg);
border-radius:2px;
}
.about .txt .d1{padding:16px 20px 18px 22px;}
/* 受賞実績は、キャッチと本文を1枚の面にまとめる。
改行位置は front-page.php 側で固定済みなので、面は文字幅ぴったりまで縮める */
.award-lead{
padding:14px 18px 16px;
width:-webkit-fit-content;width:fit-content;max-width:100%;
}
.award-lead .catch{margin-bottom:14px;}
.award-list li{border-bottom:1px solid var(--line);}
.award-list li a{
display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);
/* 面の左右端と中身のあいだの余白 */
padding:22px clamp(18px,1.8vw,28px);
color:var(--text);transition:.35s var(--ease);
}
/* ホバーで少し右へ送る（基準の余白に足す） */
.award-list li a:hover{background:var(--paper);padding-left:calc(clamp(18px,1.8vw,28px) + 10px);}
/* 一覧ページの .ay-year と同じ組み方（太らせず、字面を大きく・等幅で） */
.award-list .year{
flex:none;font-family:var(--ff-en);font-weight:500;font-size:1.3rem;
color:var(--accent-deep);letter-spacing:-.005em;
font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.award-list .info{flex:1;min-width:0;}
.award-list .ttl{display:block;font-weight:700;color:var(--ink);font-size:.98rem;line-height:1.7;letter-spacing:.06em;transition:.3s;}
.award-list li a:hover .ttl{color:var(--accent-deep);}
.award-list .by{display:block;font-size:.78rem;color:var(--text-dim);margin-top:4px;}
.award-list .arw{flex:none;position:relative;top:3px;font-family:var(--ff-en);color:var(--accent-d);transition:transform .35s var(--ease);}
.award-list li a:hover .arw{transform:translateX(6px);}
/* 一覧ボタンは2カラムの外・下部中央 */
.award .cta{text-align:center;margin-top:clamp(48px,6vw,72px);position:relative;z-index:1;}
/* 施工実績の一覧（.award-list を流用）。左端は年号ではなく工種なので、
和文フォントの小さめのラベルに差し替える */
.works-list .cat{
/* 「補修工事／道路工事」のように複数付くこともあるので2行ぶんの幅で受ける */
flex:none;width:9.4em;font-family:var(--ff-base);font-weight:700;font-size:.78rem;
line-height:1.5;letter-spacing:.06em;color:var(--accent-deep);word-break:keep-all;
}
.works-list .ttl{font-size:1rem;}
/* 一覧ページのリストは左端に施工写真のサムネイルを置く。
並びは サムネイル → 発注者 → 工事種別 → 工事名（DOM順のまま） */
.works-list.has-thumb li a{gap:clamp(12px,1.2vw,20px);padding:14px clamp(20px,2.2vw,34px);}
.works-list.has-thumb li a:hover{padding-left:calc(clamp(20px,2.2vw,34px) + 10px);}
.works-list.has-thumb .ph{
flex:none;width:clamp(96px,11vw,150px);aspect-ratio:4/3;
overflow:hidden;border-radius:8px;background:var(--mist);
}
.works-list.has-thumb .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.works-list.has-thumb li a:hover .ph img{transform:scale(1.06);}
/* 写真が無い工事の枠。無関係な代替写真を出さず、社章だけを置いた無地の面にする */
.ph-none{
width:100%;height:100%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(140deg,var(--mist),var(--paper));
border:1px solid rgba(91,184,227,.28);border-radius:8px;
}
/* .works-list.has-thumb .ph img（width/height:100%）より詳細度を上げて打ち消す */
.ph-none .ph-none-mark,
.works-list.has-thumb .ph .ph-none-mark{
width:38px;height:38px;max-width:38px;object-fit:contain;opacity:.3;
}
/* 一覧の hover 拡大は写真だけに掛ける（社章は動かさない） */
.works-list.has-thumb li a:hover .ph .ph-none-mark{transform:none;}
/* 発注者。工事名より控えめにしつつ、機関名が読める大きさを確保する。
「宮崎県 県土整備部 日向土木事務所」のような長い名称は空白位置で折り返す */
.works-list .client{
flex:none;width:10.6em;font-family:var(--ff-base);font-weight:500;font-size:.86rem;
line-height:1.5;letter-spacing:.02em;color:var(--text);word-break:keep-all;
}
/* 発注者が1件も入っていない一覧では、列そのものを畳む */
.works-list:not(.has-client) .client{display:none;}
/* 施工実績一覧：施工年ごとのグループ（受賞実績一覧の年グループと同じ組み方）
行が横に伸びると工事名と矢印のあいだが空くので、行幅を絞ってコンパクトにする。
横位置はコンテナの中央（年見出しもリストと同じ幅に揃う） */
.works-year-list{max-width:1200px;margin-inline:auto;}
.wy-group{margin-bottom:clamp(26px,3.4vw,44px);}
.wy-group .award-list{margin-top:0;} /* トップの2カラム用の下げ量はここでは不要 */
@media(max-width:700px){
/* スマホは写真を小さくし、発注者と工事種別は工事名の上に回す */
.works-list.has-thumb li a{flex-wrap:wrap;gap:10px 14px;padding:14px 16px;}
.works-list.has-thumb .ph{width:84px;border-radius:7px;}
.works-list.has-thumb .client,
.works-list.has-thumb .cat{width:auto;order:-1;font-size:.72rem;}
.works-list.has-thumb .cat::before{content:"／";margin-right:.5em;opacity:.5;}
.works-list.has-thumb .info{flex:1 1 60%;}
}
@media(max-width:900px){
.award .grid,
.works .grid{grid-template-columns:1fr;gap:44px;}
.award-list{margin-top:0;} /* 縦積みでは gap があるので不要 */
.award-list .year{font-size:1.12rem;}
.works-list .cat{width:5.8em;font-size:.74rem;}
}
/* 受賞実績アーカイブ：工事関係／その他の2列 */
.award-groups{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px);align-items:start;}
.award-col-ttl{
font-size:clamp(1.2rem,2vw,1.6rem);color:var(--ink);letter-spacing:.08em;
margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--accent);
display:flex;align-items:center;gap:10px;
}
.award-col-ttl::before{content:"";width:8px;height:20px;border-radius:3px;background:var(--accent);}
.award-empty{color:var(--text-dim);font-size:.9rem;padding:12px 2px;}
@media(max-width:820px){.award-groups{grid-template-columns:1fr;gap:40px;}}
/* 年グループ（年は1度だけ、各表彰に月を表示） */
.ay-group{margin-bottom:clamp(22px,3vw,32px);}
/* 年は太らせず、字面を大きくして見せる（POINTの数字と同じ考え方）。
Outfit の 500 まで落とし、字送りを詰めて数字を等幅に揃える */
.ay-year{
font-family:var(--ff-en);font-weight:500;font-size:clamp(1.55rem,2.8vw,2.05rem);
color:var(--accent-deep);letter-spacing:-.005em;line-height:1;
font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
/* 「年」は数字の添え物。和文フォントに戻して細く小さく、色も一段落とす */
.ay-year small{
font-family:var(--ff-base);font-size:.46em;font-weight:500;
letter-spacing:.06em;margin-left:5px;color:var(--text-dim);
}
.ay-items{list-style:none;margin:0;padding:0;}
.ay-items li{border-bottom:1px solid var(--line);}
.ay-items li a{
/* 右は矢印が面の端に貼り付かないよう、左より広めに取る */
display:flex;align-items:baseline;gap:14px;padding:14px 20px 14px 6px;
color:var(--text);transition:.3s var(--ease);
}
.ay-items li a:hover{background:var(--paper);padding-left:12px;}
.ay-mon{
flex:none;min-width:46px;font-family:var(--ff-en);font-weight:500;
color:var(--accent-d);font-size:.95rem;letter-spacing:0;
font-variant-numeric:tabular-nums;
}
.ay-info{flex:1;min-width:0;}
.ay-info .ttl{display:block;font-weight:700;color:var(--ink);font-size:.95rem;line-height:1.65;letter-spacing:.04em;transition:.3s;}
.ay-items li a:hover .ttl{color:var(--accent-deep);}
.ay-info .by{display:block;font-size:.76rem;color:var(--text-dim);margin-top:4px;}
/* ベースライン揃えだと題の行に沈んで見えるので、少し持ち上げる */
.ay-items .arw{flex:none;position:relative;top:-3px;font-family:var(--ff-en);color:var(--accent-d);transition:transform .35s var(--ease);}
.ay-items li a:hover .arw{transform:translateX(5px);}
/* ==========================================================
Works
========================================================== */
.works{overflow:hidden;}
/* トップの施工実績は受賞実績と同じ「左＝見出し＋リード／右＝一覧」の組み方に変更したため、
カードのグリッド（.works .cards）は廃止。.work-card 自体は一覧ページで使い続ける */
/* 施工実績はトップ・一覧ページともリスト表示（.works-list）に切り替えたため、
以下の .work-card 一式は現在どこからも使っていない。カード表示に戻すとき用に残す */
.work-card{
display:block;color:var(--text);position:relative;
background:var(--card-bg);border-radius:10px;overflow:hidden;
box-shadow:0 14px 30px rgba(46,77,97,.12);
transition:transform .5s var(--ease),box-shadow .5s;
}
.work-card:hover{transform:translateY(-8px);box-shadow:0 24px 44px rgba(46,77,97,.2);}
.work-card .ph{overflow:hidden;aspect-ratio:4/3;position:relative;background:var(--mist);}
.work-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.work-card:hover .ph img{transform:scale(1.08);}
/* カテゴリチップはDOM上 .body の先頭。PCでは従来どおり写真の左下に重ねて見せる */
.work-card .body .chip{position:absolute;left:20px;top:-10px;transform:translateY(-100%);z-index:2;}
.work-card .ph::after{
content:"→";position:absolute;right:0;bottom:0;width:42px;height:42px;
background:var(--accent-d);color:#fff;display:flex;align-items:center;justify-content:center;
font-family:var(--ff-en);font-size:1rem;border-radius:8px 0 8px 0;
transform:translateY(100%);transition:.45s var(--ease);
}
.work-card:hover .ph::after{transform:none;}
.work-card .body{padding:20px 20px 24px;position:relative;}
.work-card h3{font-size:.95rem;font-weight:700;line-height:1.7;transition:.3s;letter-spacing:.06em;}
.work-card:hover h3{color:var(--accent-deep);}
.work-card .place{
font-family:var(--ff-en);font-size:.72rem;color:var(--text-dim);margin-top:6px;
display:flex;align-items:center;gap:8px;letter-spacing:.14em;
}
.work-card .place::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--accent);}
/* 一覧ページは5列に並ぶので、カードの中身を一段詰める（トップの2列は従来どおり） */
.archive-grid .work-card .body{padding:15px 15px 18px;}
.archive-grid .work-card .body .chip{left:15px;font-size:.64rem;padding:3px 10px;}
.archive-grid .work-card h3{font-size:.88rem;line-height:1.62;letter-spacing:.05em;}
.archive-grid .work-card .place{font-size:.66rem;margin-top:5px;gap:6px;letter-spacing:.1em;}
.archive-grid .work-card .place::before{width:14px;}
.archive-grid .work-card .ph::after{width:34px;height:34px;font-size:.86rem;}
.works .cta{text-align:center;margin-top:clamp(48px,6vw,72px);position:relative;z-index:1;}
/* ==========================================================
People
========================================================== */
.people{background:var(--paper);overflow:hidden;}
.people .blob.b1{width:420px;height:420px;top:-120px;left:-100px;background:radial-gradient(circle,rgba(159,216,187,.4),transparent 65%);}
.people .blob.b2{width:340px;height:340px;bottom:-100px;right:4%;background:radial-gradient(circle,rgba(91,184,227,.26),transparent 65%);animation-delay:-5s;}
.people .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(44px,6vw,80px);align-items:center;position:relative;z-index:1;}
.people .grid .txt{order:2;text-align:center;display:flex;flex-direction:column;align-items:center;}
.people .grid .txt .sec-head .en{justify-content:center;}
.people .grid .txt .sec-head h2 .bar{margin-inline:auto;}
.people .grid .phs{order:1;}
.people .catch{
font-family:var(--ff-disp);font-weight:500;color:var(--ink);
font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.9;letter-spacing:.08em;margin-bottom:26px;
}
.people .txt p{font-size:.95rem;}
.people .phs{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;}
.people .phs .ph{overflow:hidden;position:relative;border-radius:8px;box-shadow:0 14px 30px rgba(46,77,97,.14);}
.people .phs .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.people .phs .ph:hover img{transform:scale(1.06);}
.people .phs .ph.tall{grid-row:span 2;}
.people .phs .ph:nth-child(2){transform:translateY(24px);}
@media(max-width:900px){.people .grid{grid-template-columns:1fr;gap:44px;}}
/* ==========================================================
Blog
========================================================== */
.blog-sec{background:var(--white);overflow:hidden;}
.blog-sec .blob{display:none;}
.blog-sec .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,60px);position:relative;z-index:1;}
.blog-sec .head-row .sec-head{margin-bottom:0;}
.blog-sec .head-row p{font-size:.9rem;color:var(--text-dim);}
/* 活動報告と同じく最新5件を1行に。1枚は小さめでよい */
/* align-items:start … グリッドの既定（stretch）だと、1枚でもタイトルが長いカードが
あると行の全カードがその高さに引き伸ばされ、短いカードに白い余白が残ります。
JSが動かずカルーセルにならなかったときも、各カードを内容なりの高さにします。 */
.blog-sec .cards{display:grid;grid-template-columns:repeat(5,1fr);align-items:start;gap:clamp(14px,1.6vw,24px);position:relative;z-index:1;}
/* 説明文を外したぶん、ボタンをカードに寄せる */
.blog-sec .cta{text-align:center;margin-top:clamp(26px,3.2vw,42px);position:relative;z-index:1;}
/* 施工実績・活動報告と同じく、文字まわりは白地のカードに載せる */
.blog-card{
display:flex;flex-direction:column;color:var(--text);
background:var(--card-bg);border-radius:10px;overflow:hidden;
box-shadow:0 14px 30px rgba(46,77,97,.12);
transition:transform .5s var(--ease),box-shadow .5s;
}
.blog-card:hover{transform:translateY(-8px);box-shadow:0 24px 44px rgba(46,77,97,.2);}
.blog-card .ph{flex:none;overflow:hidden;aspect-ratio:4/3;position:relative;background:var(--mist);}
.blog-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.blog-card:hover .ph img{transform:scale(1.07);}
.blog-card .new{
position:absolute;top:0;left:0;background:var(--sun);color:#fff;
font-family:var(--ff-en);font-weight:700;font-size:.62rem;letter-spacing:.2em;
padding:6px 12px;z-index:2;border-radius:0 0 8px 0;
}
/* 活動報告カードと同じ扱い（水色・少し大きく） */
.blog-card .date{
display:block;margin:15px 15px 0;font-family:var(--ff-en);font-size:.8rem;font-weight:600;
letter-spacing:.1em;color:var(--accent-deep);font-variant-numeric:tabular-nums;
}
/* min-height … 1行タイトルでも2行ぶんの白い面を確保する（カルーセル側と同じ考え方）。 */
.blog-card h3{font-size:.86rem;font-weight:700;line-height:1.65;margin:5px 15px 0;transition:.3s;letter-spacing:.05em;min-height:calc(1.65em * 2);}
.blog-card:hover h3{color:var(--accent-deep);}
.blog-card .chip{
margin:10px 15px 18px;align-self:flex-start;
background:transparent;color:var(--accent-deep);border:1px solid var(--accent);
padding:2px 10px;font-size:.66rem;letter-spacing:.1em;
}
@media(max-width:1240px){.blog-sec .cards{grid-template-columns:repeat(3,1fr);}}
@media(max-width:1000px){.blog-sec .cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.blog-sec .cards{grid-template-columns:1fr;}}
/* ==========================================================
カード・カルーセル（活動報告／社員ブログ）
カードを円周上に並べ、中央に来た1枚だけを大きく見せる。
ドラッグ／スワイプ／横スクロールで輪が回り、通り過ぎたカードは
奥へ引いて小さくなる（ゲームのキャラ選択画面のような見え方）。
※ JS が動かない環境では is-ready が付かず、これまで通り .cards の
グリッドとして並ぶ（ここのルールは全て .is-ready の中に閉じる）。
========================================================== */
.cv-stage.is-ready{
/* 5枚を重ねずに並べるには、使える幅の約 1/4.6 が1枚ぶん。
広い画面では 400px で頭打ち（中央の1枚が大きくなりすぎないように） */
--cv-w:clamp(214px,20.5vw,400px);
--cv-h:clamp(286px,24.4vw,476px);
display:block;position:relative;
/* 弧の広さは JS が「使える幅」から決めるので、ここは目一杯に取る */
width:100%;margin-inline:auto;
height:var(--cv-h);
perspective:1500px;
/* 縦方向のページスクロールは殺さず、横のドラッグだけ拾う */
touch-action:pan-y;
cursor:grab;
user-select:none;-webkit-user-select:none;
}
.cv-stage.is-ready.is-dragging{cursor:grabbing;}
.cv-stage.is-ready > .act-card,
.cv-stage.is-ready > .blog-card{
position:absolute;left:50%;top:0;
width:var(--cv-w);height:var(--cv-h);
margin-left:calc(var(--cv-w) / -2);
display:flex;flex-direction:column;
transform-origin:50% 50%;
backface-visibility:hidden;
will-change:transform,opacity;
/* 位置は毎フレーム JS が書くので、transition は持たせない */
transition:box-shadow .4s var(--ease);
box-shadow:0 14px 30px rgba(46,77,97,.14);
/* 面はグリッド時と同じ濃さ（85%）に揃える。
以前はカード同士が重なるため 97% でほぼ塗りつぶしていたが、
トップでも他セクションと同じ透け具合にするため合わせている。
※重なった奥のカードがうっすら透ける。塗りつぶしに戻すなら .97 に。 */
background:var(--card-bg);
}
/* 中央の1枚だけ影を強くして「選ばれている」ことを示す */
.cv-stage.is-ready > .is-center{box-shadow:0 30px 60px rgba(46,77,97,.26);}
.cv-stage.is-ready > .is-center:hover{box-shadow:0 34px 68px rgba(46,77,97,.32);}
.cv-stage.is-ready img{-webkit-user-drag:none;user-drag:none;}
/* --- カード中身：高さを固定したので、写真と本文の取り分を決める --- */
.cv-stage.is-ready .ph{flex:none;aspect-ratio:16/10;}
/* 活動報告カードは日付と見出しだけ（抜粋は載せない）。
抜粋のぶんの白い帯が余るので、カード自体の高さを詰める。
写真は 16:10 固定なので「写真の高さ＋文字に要るぶん」で決める。
（JS はカードの幅しか見ていないので、高さを変えても弧の計算には影響しない） */
.cv-stage.is-ready > .act-card{height:clamp(244px, calc(12.8vw + 126px), 376px);}
.cv-stage.is-ready .act-card .body{flex:1 1 auto;min-height:0;overflow:hidden;padding:14px 17px 16px;}
.cv-stage.is-ready .act-card h3{
font-size:.95rem;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.cv-stage.is-ready .blog-card .ph{aspect-ratio:4/3;}
/* 社員ブログのカードだけは、高さを内容なりにします（2026-08-14）。
以前は他のカードと同じ --cv-h の固定高だったため、タイトルが1行の記事でも
3行ぶんの白い面が確保され、下に余白が残っていました。
※ 弧の計算に使うのはカードの「幅」だけなので、高さを変えても並びは崩れません
（活動報告のカードも同じ理由で高さを別に指定しています）。 */
.cv-stage.is-ready > .blog-card{height:auto;}
.cv-stage.is-ready .blog-card h3{
font-size:.93rem;
/* 極端に長いタイトルだけは3行で打ち切る（カードが伸びすぎるのを防ぐため）。 */
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
/* ★白い面の下限（2026-08-14 改定）。
「夏休み」のような1行のタイトルのカードと同じ高さまで詰めます。
以前は2行ぶんを確保していましたが、短いタイトルのカードに白が余りました。
長いタイトルは、この下限を超えて2〜3行ぶんに伸びます。
行数を変えたいときは、この 2 を 1 や 3 に変えてください。 */
min-height:calc(1.65em * 2);
}
/* margin-top:auto をやめる。余った空間へ押し下げず、見出しのすぐ下に置く。
下の余白（18px）は元のまま残し、白い面が詰まって見えないようにする。 */
.cv-stage.is-ready .blog-card .chip{margin-top:10px;margin-bottom:18px;}
/* トップページだけ、活動報告と社員ブログのカードの文字帯をさらに透かす。
写真の下の帯＝カード自身の地色なので、ここを --card-bg-airy に差し替える
（写真部分は img が覆っているので見た目は変わらない）。
一覧ページ（/activity/・/blog/）は同じ .act-card / .blog-card を使うが、
背景も文字量も違うので、body.home に限定して従来の濃さのままにしている。 */
body.home .act-card,
body.home .blog-card{background:var(--card-bg-airy);}
/* --- 左右の矢印 --- */
.cv-nav{
/* カードは重なり順を z-index 1000 前後で入れ替えるので、その上に置く */
position:absolute;top:50%;z-index:1200;
width:clamp(38px,3.4vw,50px);height:clamp(38px,3.4vw,50px);
transform:translateY(-50%);
display:grid;place-items:center;
border:0;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.92);color:var(--accent-deep);
box-shadow:0 8px 22px rgba(46,77,97,.2);
transition:background .3s,transform .3s var(--ease),box-shadow .3s;
}
.cv-nav:hover{background:var(--accent-deep);color:#fff;box-shadow:0 12px 28px rgba(46,77,97,.3);}
.cv-nav:active{transform:translateY(-50%) scale(.92);}
.cv-nav svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.cv-nav.prev{left:0;}
.cv-nav.next{right:0;}
/* --- 何枚目を見ているか。数百件あるのでドットではなく細い目盛り --- */
.cv-meter{
position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:1;
display:flex;align-items:center;gap:14px;
width:min(360px,80%);
margin-top:clamp(20px,2.4vw,30px);
}
.cv-meter__track{
flex:1 1 auto;height:3px;border-radius:99px;overflow:hidden;
background:rgba(46,77,97,.16);
}
.cv-meter__track i{
display:block;height:100%;border-radius:99px;background:var(--accent-deep);
transition:width .45s var(--ease);
}
.cv-meter__num{
flex:none;font-family:var(--ff-en);font-size:.72rem;letter-spacing:.12em;
color:var(--text-dim);font-variant-numeric:tabular-nums;
}
.cv-meter__num b{color:var(--accent-deep);font-weight:700;}
/* 続きを取りに行っている間だけ、目盛りをうっすら点滅させる */
.cv-stage.is-loading .cv-meter__track{animation:cvPulse 1s var(--ease) infinite;}
@keyframes cvPulse{0%,100%{opacity:1;}50%{opacity:.45;}}
/* 目盛りはステージの外側（下）に浮かせているので、一覧ボタンはその下へ逃がす */
.cv-stage.is-ready ~ .cta{margin-top:clamp(58px,5vw,76px);}
@media(prefers-reduced-motion:reduce){
.cv-stage.is-ready > .act-card,
.cv-stage.is-ready > .blog-card{transition:none;}
}
/* ==========================================================
Recruit — fullscreen CTA
========================================================== */
.recruit{position:relative;overflow:hidden;padding-block:clamp(46px,6vw,92px);}
/* 文言と写真をひとつのカードに一体化（全幅の帯ではなく、中央に置いた1枚のカード）。
幅は他セクションの .container と同じ min(1680px,92%) に合わせる。 */
/* カード本体：ぼかし縁（マスクのグラデーション）はやめて、
.blog-card など他セクションのカードと同じ「白地＋角丸＋落ち影」の枠に統一。 */
.recruit-split{
position:relative;
display:grid;grid-template-columns:0.86fr 1.14fr;align-items:stretch;
min-height:min(58vh,520px);
width:min(1680px,92%);margin-inline:auto;
background:var(--card-bg);
border-radius:10px;overflow:hidden;
box-shadow:0 14px 30px rgba(46,77,97,.12);
}
/* テキスト側：カード面の透過は .recruit-split 側で持つので、ここは地色を敷かない */
.recruit-text{
position:relative;z-index:1;
display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
padding:clamp(38px,3.8vw,64px) clamp(30px,3vw,56px);
background:transparent;
}
.recruit-text::before,
.recruit-text::after{content:none;}
/* 写真側：文字面との境目にサイト共通のヘアラインを1本 */
.recruit-photo{
position:relative;z-index:1;overflow:hidden;background:var(--mist);
box-shadow:inset 1px 0 0 var(--line);
}
/* 拡大は掛けない（掛けるとその分だけ両端・上下が切れる）。上下の切り落としは
人物の顔が残る位置（やや上寄り）に寄せる。 */
.recruit-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:none;}
/* 他セクションの写真と同じく素のまま見せる（上部ぼかしは廃止） */
.recruit-photo::after{content:none;}
/* テキスト要素 */
.recruit-text>*{position:relative;z-index:2;}
/* 白地に変えたため、WebGL の光の層は敷かない */
.recruit-text>.fx-layer{display:none;}
/* 見出しまわりは .sec-head.center と同じ組み方（EN ラベル＋両側の水色バー） */
.recruit .word{
display:flex;align-items:center;justify-content:center;gap:16px;font-family:var(--ff-en);font-weight:700;
font-size:.76rem;line-height:1;letter-spacing:.3em;color:var(--accent-deep);text-transform:uppercase;margin-bottom:0;
}
.recruit .word .en{display:inline-flex;align-items:center;gap:14px;}
.recruit .word .en::before,
.recruit .word .en::after{content:"";width:36px;height:2px;border-radius:2px;background:var(--accent);}
/* 「Careers 2026」の添え字（.tag）は 2026-08-14 に廃止。
.word は justify-content:center なので、添え字が無くなれば Recruit が中央に来ます。 */
.recruit h2{
font-family:var(--ff-base);font-weight:700;color:var(--ink);
font-size:clamp(1.9rem,2.6vw,3rem);line-height:1.45;letter-spacing:.1em;margin:16px 0 0;
white-space:nowrap;
}
/* .sec-head h2 .bar と同じ 50×3px の水色バー */
.recruit h2::after{
content:"";display:block;width:50px;height:3px;border-radius:3px;background:var(--accent);
margin:20px auto 0;
}
.recruit .lead{color:var(--text);font-size:.95rem;line-height:2;font-weight:500;max-width:480px;margin:24px auto 0;}
/* 1文目は改行して2行組みに（従来の
と同じ見え方） */
.recruit .lead .ln1{display:block;}
.recruit .btn{margin-top:28px;}
@media(max-width:860px){
.recruit-split{grid-template-columns:1fr;min-height:0;}
/* 縦積み時は写真が上・文言が下 */
.recruit-photo{
order:-1;min-height:0;aspect-ratio:16/9; /* 16:9 のまま出して集合写真を切らない */
box-shadow:inset 0 -1px 0 var(--line);
}
.recruit-photo img{object-position:center;}
}
/* ==========================================================
固定背景シーン（人を知る〜Recruit・スクロールで背景固定）
========================================================== */
.fixed-scene{position:relative;padding-block:0;}
/* 背景写真：シーンの間だけ画面に固定され、シーン終端（Recruit）で一緒にスクロールして抜ける */
.fixed-scene .scene-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.fixed-scene .scene-bg-inner{
position:sticky;top:0;height:100svh;
background:linear-gradient(135deg,#c9e8f7 0%,#eaf7fe 42%,#f7fdff 60%,#dff2fc 100%);
}
/* 各項目は半透明の自前背景を持ち、下の固定写真がうっすら透ける */
.fixed-scene .people{position:relative;z-index:1;background:rgba(238,247,251,.8);backdrop-filter:blur(3px);margin-block:0;}
.fixed-scene .blog-sec{position:relative;z-index:1;background:rgba(255,255,255,.78);backdrop-filter:blur(3px);margin-block:0;}
.fixed-scene .recruit{position:relative;z-index:1;background:transparent;}
/* 固定背景シーン2（施工実績・受賞実績）：背景写真はいったん削除、明るいパステル背景に */
.fixed-scene.fs2 .scene-bg-inner{
background:linear-gradient(135deg,#c9e8f7 0%,#eaf7fe 42%,#f7fdff 60%,#dff2fc 100%);
}
.fixed-scene.fs2 .works,
.fixed-scene.fs2 .award{
position:relative;z-index:1;backdrop-filter:blur(3px);
margin-block:0;
}
/* 施工実績：クールな水色系背景 */
.fixed-scene.fs2 .works{
background:linear-gradient(180deg,rgba(238,247,251,.82) 0%,rgba(224,241,250,.86) 100%);
}
/* 受賞実績：水色基調のまま施工実績より一段深い水色に（境界は統一区切りで表現） */
.fixed-scene.fs2 .award{
background:linear-gradient(180deg,rgba(215,238,250,.9) 0%,rgba(226,243,252,.86) 100%);
}
/* ==========================================================
ABOUT 〜 JOURNAL をひと続きの地色にする（.flow-scene）
従来はセクションごとに別の背景（水色→濃い水色→薄緑→白）を持たせていたため、
境目が帯になって見えていた。ここでは中の背景をすべて透明にし、
ブロック全体に1枚のグラデーションだけを敷く。壁紙のパターン（方眼・ドット・
斜線）もセクションごとに違って区切りに見えるので、あわせて止める。
========================================================== */
.flow-scene{
position:relative;
background:linear-gradient(180deg,
#cfe9f7 0%,
#e2f2fb 22%,
#eef8fd 46%,
#e9f5f2 70%,
#f6fbfa 88%,
#fdfefe 100%);
}
/* 中の背景はすべて透かして、上の1枚だけを見せる */
.flow-scene .about,
.flow-scene .activity,
.flow-scene .blog-sec{background:none;}
.flow-scene .fixed-scene.fs2 .scene-bg-inner,
.flow-scene .fixed-scene .scene-bg-inner{background:none;}
.flow-scene .fixed-scene.fs2 .works,
.flow-scene .fixed-scene.fs2 .award,
.flow-scene .fixed-scene .blog-sec{
background:none;
-webkit-backdrop-filter:none;backdrop-filter:none;
}
/* セクションごとに違う壁紙のパターンは、それ自体が区切りに見えるので止める */
.flow-scene .works::before,
.flow-scene .award::before,
.flow-scene .activity::before,
.flow-scene .blog-sec::before,
.flow-scene .works::after,
.flow-scene .award::after,
.flow-scene .activity::after,
.flow-scene .blog-sec::after{display:none;}
/* 白いにじみ（ACTIVITY 左上）も帯の切れ目に見えるので隠す */
.flow-scene .blob{display:none;}
/* ==========================================================
点群モーフィングの固定背景（.pc-scene）※いまはPCのみ
ヒーロー／ロゴ帯／お知らせより下、フッターの上まで（ABOUT〜Recruit）を
1枚の3D背景でつなぐ。stage を position:sticky で画面に貼り付け、
帯を抜けると内容と一緒に流れて消える。
描画は assets/js/pointcloud-bg.js（元データ: pointcloud-bg_2.html）。
スマホ／タブレット（〜900px）では stage を出さず、
従来どおり .flow-scene のグラデーションを地色に使う。
========================================================== */
.pc-scene{position:relative;}
.pc-scene__stage{display:none;}
@media(min-width:901px){
.pc-scene__stage{
display:block;
position:sticky;top:0;z-index:0;
/* 高さは1画面分確保しつつ、後続の内容は同じ位置から重ねて始める */
height:100vh;margin-bottom:-100vh;
pointer-events:none;overflow:hidden;
}
.pc-scene__sky,
.pc-scene__canvas,
.pc-scene__veil{position:absolute;inset:0;pointer-events:none;}
.pc-scene__sky{
z-index:0;
background:
radial-gradient(120% 85% at 50% 4%, #ffffff 0%, transparent 58%),
radial-gradient(95% 70% at 12% 100%, #bfe4f5 0%, transparent 62%),
radial-gradient(80% 60% at 88% 20%, #d8f0fa 0%, transparent 58%),
linear-gradient(180deg,#f2fbff 0%,#dff1fa 48%,#c9e7f6 100%);
}
.pc-scene__canvas{z-index:1;width:100%;height:100%;display:block;}
/* 本文の可読性を保つための薄い膜（元HTMLの .vignette を少し強めたもの）。
濃いと点群のコントラストが潰れて粗く見えるので、中央はできるだけ抜く。
上下端は帯の継ぎ目を隠すために残す。 */
.pc-scene__veil{
z-index:2;
background:
linear-gradient(180deg,
rgba(246,252,255,.92) 0%,
rgba(246,252,255,.15) 13%,
rgba(240,250,255,.15) 84%,
rgba(226,243,251,.94) 100%),
radial-gradient(78% 62% at 50% 50%,rgba(255,255,255,.10) 0%,rgba(240,250,255,.40) 100%);
}
/* 地色は点群背景に任せるので、ひと続きのグラデーションは外す */
.pc-scene .flow-scene{background:none;}
/* 背景の巨大英字（ABOUT / WORKS / AWARD / ACTIVITY / JOURNAL）は
点群と重なって煩雑になるので、PCでは出さない（スマホ版は従来どおり） */
.pc-scene .bg-txt{display:none;}
/* 内容は必ず背景より前面へ */
.pc-scene .flow-scene,
.pc-scene .recruit{position:relative;z-index:1;}
/* 背景をマウスでドラッグして回している間だけ。
本文の上から始めたドラッグでも回せるよう、この間は文字・リンクの
ホバーと選択を止める（リンクは動かさずにクリックしたときだけ反応する）。 */
.pc-scene.is-orbiting{
cursor:grabbing;
-webkit-user-select:none;user-select:none;
}
.pc-scene.is-orbiting .flow-scene,
.pc-scene.is-orbiting .recruit{pointer-events:none;}
}
/* ==========================================================
Footer
========================================================== */
.site-footer{
/* 背景は透過。うしろ（body の地色や、後ろに敷いたもの）がそのまま見える。
※もとの水色グラデーションに戻すときは、下のコメントの1行に差し替える。
background:linear-gradient(180deg,var(--paper) 0%,#eaf5fb 18%,#e4f1f9 34%,var(--mist) 52%,#d5e9f5 70%,#cbe3f2 86%,#c2ddef 100%); */
/* 地色は半透明の白（ぼかしなし）。カード面（--card-bg＝85%）より
わずかに透ける 80% を、フッターと .pagetop だけで使っている。 */
background:rgba(255,255,255,.8);
/* 地色が薄いぶん、文字は一段濃い --ink に寄せて読みやすさを保つ */
/* 上端の余白。ロゴ帯（.in-footer）はこの値をそのまま打ち消して上端に貼り付くので、
変数にして必ず同じ値を使う（別々に書くと帯だけ上下にずれる） */
--f-pad-top:clamp(52px,6vw,84px);
color:var(--ink);padding:var(--f-pad-top) 0 0;
position:relative;overflow:hidden;border-top:1px solid var(--line);
}
/* 紙目レイヤー。地色（上の linear-gradient）の上に、粒だけを半透明で重ねる。
本文は .top / .bottom が z-index:1、巨大英字は .big-en が z-index:0 で
どちらもこの canvas より後ろの DOM 順なので、粒は必ず一番下に敷かれる。 */
.site-footer .footer-grain{
position:absolute;inset:0;width:100%;height:100%;
z-index:0;pointer-events:none;display:block;
}
/* 白帯（横流れロゴ）は紙目より前面へ */
.site-footer .logo-marquee.in-footer{position:relative;z-index:1;}
.site-footer a{color:var(--ink);}
.site-footer a:hover{color:var(--accent-deep);}
/* 左＝会社情報／右＝リンク集。会社情報は必要幅だけ取り、残りをリンク集に回す */
.site-footer .top{
display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,2.6vw,40px);
padding-bottom:clamp(36px,4.2vw,58px);position:relative;z-index:1;
}
/* リンク集：左に MENU、右に CONTENTS。CONTENTS が残り幅いっぱいに広がる。
別種の項目だと一目で分かるよう、2ブロックの間はたっぷり空ける */
.site-footer .f-menus{
display:grid;grid-template-columns:max-content minmax(0,1fr);
gap:clamp(48px,6vw,110px);
}
/* MENU は上から下→右列の順で2列に折る（4行で収める） */
.site-footer .f-nav--main{
display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);
grid-auto-columns:max-content;column-gap:clamp(22px,2.2vw,34px);
}
/* CONTENTS は MENU より一段弱い扱い。
等幅の列に並べると短い項目（SDGs など）の右に余白が大きく残るので、
各項目を実寸のまま横に詰めて折り返す（flex）。行数は幅なりに決まる。 */
.site-footer .f-nav--sub{
display:flex;flex-wrap:wrap;
column-gap:clamp(14px,1.3vw,20px);
}
/* 幅ゼロ高さゼロで1行ぶんを占め、次の項目を強制的に改行させる区切り（footer.php が挿入） */
.site-footer .f-nav--sub .f-br{flex:0 0 100%;height:0;margin:0;}
.site-footer .brand{color:var(--ink);}
/* フッターは全体的に文字を少し大きくしています（2026-08-14）。
.brand はヘッダーと共用なので、ここでフッターぶんだけ上書きします。 */
.site-footer .brand .name{color:var(--ink);font-size:1.74rem;}
.site-footer .brand .tagline{color:var(--accent-deep);opacity:1;font-size:.58rem;}
.site-footer .addr{margin-top:20px;font-size:.92rem;font-style:normal;line-height:2.2;}
.site-footer .f-social{display:flex;gap:12px;margin-top:24px;}
.site-footer .f-social a{
width:42px;height:42px;border-radius:50%;flex:none;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.6);border:1px solid rgba(46,77,97,.16);color:var(--accent-deep);
transition:.3s var(--ease);
}
.site-footer .f-social a:hover{
background:var(--accent-d);border-color:var(--accent-d);color:#fff;
transform:translateY(-3px);box-shadow:0 10px 22px rgba(61,156,203,.32);
}
.site-footer .f-social svg{width:19px;height:19px;fill:currentColor;}
.site-footer .f-social .ig svg{width:20px;height:20px;fill:none;}
.site-footer .f-ttl{
font-family:var(--ff-en);letter-spacing:.3em;font-size:.74rem;color:var(--accent-deep);
margin-bottom:18px;font-weight:700;
}
/* 行頭の横棒が行によって太く／細く見えるのを防ぐための決め事が2つある。
(1) 行の高さを整数pxで固定する。
body の line-height:2 のままだと1行 14.08px×2＝28.16px と小数になり、
行が下へ行くほど半端な座標に積み上がる。高さ2pxの棒がピクセルの境目を
またぐ量が行ごとに変わるため、アンチエイリアスで太さがバラついて見える。
行送り（棒と棒の間隔）は今までどおりになるよう margin-bottom で調整している。
(2) a を inline-flex ではなく flex にする。
inline-flex だと最初の子（＝棒の擬似要素）でベースラインが決まり、
行の高さが font 由来の小数に引きずられて (1) が効かなくなる。
※棒自体には flex:none。幅が詰まったとき棒だけ縮んで短くなるのを防ぐ。 */
/* 文字を少し大きくしたぶん、行の高さも整数pxのまま 20px→22px に上げ、
margin-bottom を 20px→18px に下げて、行送り（合計40px）は元のままにしています。 */
.site-footer .f-nav li{margin-bottom:18px;font-size:.95rem;line-height:22px;}
.site-footer .f-nav li a{display:flex;align-items:center;gap:10px;line-height:22px;}
.site-footer .f-nav li a::before{content:"";flex:none;width:14px;height:2px;border-radius:2px;background:var(--accent);transition:.3s;}
.site-footer .f-nav li a:hover::before{width:24px;}
/* CONTENTS 側は MENU の下位。文字・行間・目印を少しずつ小さくして強さを落とす */
/* こちらも同じ考え方で 18px→20px、margin-bottom 13px→11px（行送り31pxのまま）。 */
.site-footer .f-nav--sub li{margin-bottom:11px;font-size:.85rem;line-height:20px;}
/* 項目名は途中で折り返さない（「情報セキュリティ基本方針」も1行のまま） */
.site-footer .f-nav--sub li a{gap:8px;line-height:20px;opacity:.84;transition:opacity .3s;white-space:nowrap;}
.site-footer .f-nav--sub li a::before{width:9px;background:var(--accent-d);opacity:.7;}
.site-footer .f-nav--sub li a:hover{opacity:1;}
.site-footer .f-nav--sub li a:hover::before{width:16px;opacity:1;}
.site-footer .f-contents .f-ttl{font-size:.68rem;opacity:.8;}
.site-footer .f-btns{display:flex;flex-wrap:wrap;gap:20px;align-items:center;align-content:center;justify-content:flex-start;}
.site-footer .f-btns .btn{
flex:none;width:clamp(166px,12vw,200px);height:clamp(166px,12vw,200px);
aspect-ratio:1;border-radius:50%;overflow:hidden;
flex-direction:column;justify-content:center;gap:8px;padding:0;
min-width:0;text-align:center;font-size:.96rem;line-height:1.4;letter-spacing:.08em;
}
.site-footer .f-btns .btn::before{border-radius:50%;}
.site-footer .f-btns .btn .arw{font-size:1.26rem;}
/* フッターの丸ボタンはブランドカラー寄りの淡いパステルに（お問い合わせ＝水色／採用＝ミント） */
.site-footer .f-btns .btn{background:#c7e6f4;border-color:#c7e6f4;color:#2f6d8c;box-shadow:0 10px 26px rgba(120,190,225,.32);}
.site-footer .f-btns .btn::before{background:#a6d8ef;}
.site-footer .f-btns .btn:hover{color:#245976;border-color:#a6d8ef;}
.site-footer .f-btns .btn.mint{background:#c6ecd8;border-color:#c6ecd8;color:#2c5c44;box-shadow:0 10px 26px rgba(150,210,180,.34);}
.site-footer .f-btns .btn.mint::before{background:#a5ddbe;}
.site-footer .f-btns .btn.mint:hover{color:#234c37;border-color:#a5ddbe;}
/* フッター幅いっぱいに敷く透かし文字。1行で全部見えることが前提なので、
画面幅から文字サイズを決める。ASAHI CONSTRUCTION は Outfit 800 の実測で
11.74em 幅（letter-spacing 込み）なので、8.6vw では 101vw になり
overflow:hidden で両端が削れていた。
フォールバックは Arial 系だけにしておく。--ff-en の後ろには Noto Sans JP や
Yu Gothic が並んでいて、和文書体の欧文は Outfit よりかなり幅広なため、
ウェブフォントが届かない環境ではそれだけで画面幅を超えてしまう。
6.8vw なら Outfit で約 80vw、Arial でも約 85vw で、どちらでも収まる。
下限は置かない（狭い画面ほど小さくしないと入りきらないため）。 */
.site-footer .big-en{
font-family:'Outfit',Arial,'Helvetica Neue',sans-serif;
font-weight:800;line-height:1;letter-spacing:.02em;
font-size:min(6.8vw,7.6rem);white-space:nowrap;text-align:center;
color:transparent;-webkit-text-stroke:1.5px rgba(91,184,227,.3);
user-select:none;pointer-events:none;margin-bottom:-.12em;position:relative;z-index:0;
}
.site-footer .bottom{
border-top:1px solid var(--line);padding:22px 0;position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
font-size:.74rem;letter-spacing:.1em;
}
.site-footer .bottom .links{display:flex;gap:24px;}
/* リンク集が横に伸びきれない幅では、会社情報の下へ回す */
@media(max-width:1100px){.site-footer .top{grid-template-columns:1fr;}}
@media(max-width:640px){
/* スマホ：MENU の下に CONTENTS（区切りが分かるよう縦の間隔は広めに） */
.site-footer .f-menus{grid-template-columns:1fr;gap:44px;}
}
@media(max-width:560px){
/* スマホ：丸ボタンは中央揃え（横2つが画面幅に収まるサイズに） */
.site-footer .f-btns{justify-content:center;}
.site-footer .f-btns .btn{width:min(40vw,170px);height:min(40vw,170px);font-size:.9rem;}
}
/* ページ上部へ戻る：カード面・各ボタンと同じ半透明の白（ぼかしなし） */
.pagetop{
position:fixed;right:20px;bottom:20px;width:52px;height:52px;border-radius:50%;
/* フッターと同じ 80%（カード面より少しだけ透ける） */
background:rgba(255,255,255,.8);color:var(--accent-deep);border:1px solid rgba(255,255,255,.8);cursor:pointer;
box-shadow:0 10px 26px rgba(46,77,97,.2);
opacity:0;visibility:hidden;transition:.4s;z-index:900;font-family:var(--ff-en);font-size:1rem;
}
.pagetop.show{opacity:1;visibility:visible;}
.pagetop:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-4px);}
/* ==========================================================
Sub pages
========================================================== */
/* 下層ページ共通の地色：水色系のツヤありグラデーション。
1枚目＝左上から差す白いハイライト（ツヤ）
2枚目＝斜めに走る control 光沢の帯（ごく薄く）
3枚目＝上から下へ抜ける水色のベース
背景は固定して、スクロールしてもツヤの位置が動かないようにする */
body.sub-page{
background:
radial-gradient(115% 72% at 10% -12%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 58%),
linear-gradient(104deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.42) 48%, rgba(255,255,255,0) 62%),
linear-gradient(180deg, #e8f5fd 0%, #d9edf9 34%, #e6f4fb 68%, #f3fafe 100%);
background-attachment:fixed;
background-repeat:no-repeat;
}
/* 写真は廃止。固定ヘッダー（92px）を避けるぶんだけ上を空けた、
タイトルだけの帯。地色は body.sub-page のグラデーションに任せる */
.page-hero{
position:relative;padding:clamp(116px,14vh,136px) 0 clamp(16px,2.2vw,26px);
background:transparent;color:var(--ink);overflow:hidden;
}
.page-hero .container{position:relative;z-index:2;}
.page-hero .en{
display:inline-flex;align-items:center;gap:14px;font-family:var(--ff-en);font-weight:700;
text-transform:uppercase;font-size:.76rem;line-height:1;letter-spacing:.3em;color:var(--accent-deep);
}
.page-hero .en::before{content:"";width:36px;height:2px;border-radius:2px;background:var(--accent);}
.page-hero h1{
display:block;margin-top:16px;color:var(--ink);
font-size:clamp(2rem,5vw,3.4rem);font-weight:700;letter-spacing:.1em;line-height:1.4;
}
.page-hero .bar{display:block;width:50px;height:3px;border-radius:3px;background:var(--accent);margin-top:16px;}
.breadcrumb{font-size:.72rem;margin-top:18px;color:var(--text-dim);letter-spacing:.12em;font-family:var(--ff-en);}
.breadcrumb a{color:var(--text);}
.breadcrumb a:hover{color:var(--accent-deep);}
.breadcrumb .sep{margin:0 10px;opacity:.5;}
/* 写真の帯が無くなったぶん、本文も上に詰める */
.content-area{padding:clamp(30px,4vw,50px) 0 clamp(70px,10vw,120px);}
.content-area.narrow .container{width:min(880px,90%);}
/* 固定ページのように本文が先頭に来る場合、記事見出しとの間隔（.entry-content の
margin-top）は不要。写真の帯を外したぶん、ここも上に詰める */
.content-area .container > .entry-content:first-child{margin-top:0;}
/* single post */
.post-head .meta{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.post-head .date{font-family:var(--ff-en);color:var(--text-dim);letter-spacing:.1em;}
.post-head h1{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.7;letter-spacing:.06em;}
.post-thumb{margin:34px 0;overflow:hidden;border-radius:8px;}
/* 施工実績のメイン写真。下のサムネイルを選ぶと、この写真が差し替わる。
読み込みの一瞬だけ薄くして、切り替わったことが分かるようにする */
.works-main img{width:100%;transition:opacity .3s var(--ease);}
.works-main img.is-swapping{opacity:.3;}
/* 施工実績の写真を選ぶサムネイル。枚数が少なくても大きくなりすぎないよう
auto-fill で並べ、余った列は空けておく */
.works-gallery{
display:grid;gap:clamp(8px,1vw,14px);margin:0 0 34px;
grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
}
.works-gallery .wg-thumb{
display:block;padding:0;margin:0;border:0;background:var(--mist);
border-radius:8px;overflow:hidden;cursor:pointer;
box-shadow:0 0 0 0 var(--accent);transition:box-shadow .25s var(--ease);
}
.works-gallery img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease);}
.works-gallery .wg-thumb:hover img{transform:scale(1.04);}
.works-gallery .wg-thumb.is-active{box-shadow:0 0 0 3px var(--accent);}
.works-gallery .wg-thumb.is-active img{opacity:.82;}
.works-gallery .wg-thumb:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px;}
.entry-content{margin-top:38px;}
/* 大項目（h2）と小項目（h3）の間隔が近いと、どこまでが1つの章か読み取れない。
h2 の前は h3 の前の約5倍あけて、章の切れ目をはっきりさせる。
（h3 側を詰めたぶん、h2 側は開けすぎなくても差が出る）
段落側の margin-bottom は h3 の margin-top と相殺（大きいほうが勝つ）ため、
章の中を詰めるには段落の余白も一緒に下げる必要がある。
先頭要素は上の余白を打ち消す（.entry-content 自体の margin-top で足りている）。 */
.entry-content > :first-child{margin-top:0;}
.entry-content h2{
font-size:1.35rem;margin:3.4em 0 1.1em;padding-bottom:14px;position:relative;letter-spacing:.08em;
}
.entry-content h2::after{
content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px;background:var(--line);
}
.entry-content h2::before{
content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;border-radius:2px;background:var(--accent);z-index:1;
}
/* 小項目は逆に本文へ寄せる。見出しと直後の本文が1かたまりに見えるのが狙い */
.entry-content h3{font-size:1.1rem;margin:1.15em 0 .45em;padding-left:16px;border-left:3px solid var(--accent);}
.entry-content p{margin-bottom:1.35em;font-size:.95rem;}
.entry-content ul,.entry-content ol{margin:0 0 1.35em .2em;}
/* h3 の直前の段落だけ下余白を消す。段落どうしの行間は本文用のまま残したいので、
段落側を一律に詰めるのではなく :has でこのケースだけ狙い撃ちする。
:has 非対応ブラウザでは段落の margin-bottom（1.35em）が効いて少し広がるだけ。 */
.entry-content p:has(+ h3),
.entry-content ul:has(+ h3),
.entry-content ol:has(+ h3){margin-bottom:0;}
.entry-content ul li{position:relative;padding-left:22px;margin-bottom:.5em;font-size:.95rem;}
.entry-content ul li::before{content:"";position:absolute;left:0;top:.75em;width:9px;height:9px;border-radius:50%;background:var(--accent);}
.entry-content ol{margin-left:1.4em;}
.entry-content ol li{list-style:decimal;margin-bottom:.5em;font-size:.95rem;}
.entry-content blockquote{background:var(--paper);padding:24px 28px;margin:0 0 1.6em;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;}
.entry-content table{width:100%;border-collapse:collapse;margin-bottom:1.8em;}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:14px 18px;text-align:left;font-size:.9rem;}
.entry-content th{background:var(--paper);color:var(--ink);width:28%;font-weight:700;}
.entry-content img{border-radius:8px;}
.entry-content .wp-block-button__link{background:var(--accent-d);border-radius:3px;}
/* 旧サイトから移した資料ページ（健康経営・環境方針など）は、認定証や掲示物の
スキャン画像が主役になる。中央寄せ・カード面と同じ余白でそろえる。 */
.entry-content figure{margin:0 0 1.8em;text-align:center;}
.entry-content figure img{max-width:100%;height:auto;box-shadow:0 6px 22px rgba(20,40,70,.08);}
.entry-content figcaption{margin-top:.7em;font-size:.82rem;color:var(--text-dim);text-align:center;}
.entry-content .wp-block-gallery{gap:18px;}
.entry-content .wp-block-gallery figure{margin:0;}
/* 日付・出典・注記。本文より一段落として読ませる。 */
.entry-content .pg-note{font-size:.84rem;color:var(--text-dim);margin-bottom:1em;}
/* 外部リンクの矢印は英字フォントで小さく */
.entry-content .ext{font-family:var(--ff-en);font-size:.86em;}
/* ==========================================================
方針ページ（安全衛生方針・環境方針）
会社が掲示している文面をそのまま載せるので、
スローガン／行動指針／署名の3つのかたまりで読ませる。
========================================================== */
/* ここは本文の共通スタイル（.entry-content p / ol li など）より強くする必要が
あるので、すべて .entry-content から書く。外すと文字が本文サイズに戻る。 */
/* スローガンは掲示物でいちばん大きい言葉。囲みや影で飾らず、
上下の細い罫だけにして、文字の大きさそのもので見せる。 */
.entry-content .policy-slogan{
margin:0 0 clamp(34px,4.4vw,56px);
padding:clamp(24px,3.2vw,40px) 0;
border-block:1px solid var(--line);
text-align:center;
}
/* ラベルの中身は「スローガン」という和文。英字用の指定（Outfit・uppercase・
広い字間）のままだと和文がつぶれて小さく見えるので、本文書体で組み直す。 */
.entry-content .policy-slogan__label{
display:block;margin-bottom:clamp(10px,1.4vw,16px);
font-family:var(--ff-base);font-weight:700;
font-size:clamp(.92rem,1.5vw,1.08rem);letter-spacing:.18em;
color:var(--accent-deep);
}
/* 大きく出すが太らせない。太字で埋めるとふくらんで見えるので、
ウェイトは落として字間で存在感を作る。 */
.entry-content .policy-slogan__txt{
margin:0;font-weight:500;line-height:1.65;letter-spacing:.1em;color:var(--ink);
font-size:clamp(1.34rem,3.4vw,2.3rem);
}
/* 前後の波ダッシュは飾りなので、文字として持たずCSSで添える */
.entry-content .policy-slogan__txt::before{content:"～ ";color:var(--accent);font-weight:500;}
.entry-content .policy-slogan__txt::after{content:" ～";color:var(--accent);font-weight:500;}
/* 行動指針は「番号／見出し語／本文」の3つだけ。
丸バッジなどは付けず、番号は英字を大きく淡く置いて目次のように読ませる。 */
.entry-content .policy-acts{
list-style:none;counter-reset:pa;
margin:0 0 clamp(34px,4.4vw,52px);padding:0;
}
.entry-content .policy-acts > li{
counter-increment:pa;list-style:none;margin:0;
display:grid;grid-template-columns:auto minmax(0,1fr);
gap:5px clamp(16px,2.2vw,28px);
padding:clamp(18px,2.2vw,26px) 0;
border-bottom:1px solid var(--line);
}
.entry-content .policy-acts > li:first-child{border-top:1px solid var(--line);}
.entry-content .policy-acts > li::before{
content:counter(pa);grid-row:1 / span 2;
font-family:var(--ff-en);font-weight:400;line-height:1.1;letter-spacing:.02em;
font-size:clamp(1.5rem,3.2vw,2.1rem);color:var(--accent);
}
.entry-content .policy-act__ttl{
grid-column:2;font-weight:700;letter-spacing:.07em;color:var(--accent-deep);
font-size:clamp(1.06rem,2.1vw,1.34rem);line-height:1.5;
}
.entry-content .policy-act__body{
grid-column:2;color:var(--text);line-height:1.95;
font-size:clamp(.98rem,1.7vw,1.1rem);
}
/* 環境方針の末尾の宣言と2つの合言葉 */
.entry-content .policy-creed{margin:0 0 clamp(30px,4vw,46px);}
/* ここもスローガンと同じ考え方で、太らせずに大きさで見せる */
.entry-content .policy-creed__lead{
margin:0 0 clamp(14px,1.8vw,20px);font-weight:500;line-height:1.95;letter-spacing:.08em;
color:var(--ink);font-size:clamp(1.06rem,2.1vw,1.32rem);
}
.entry-content .policy-creed__list{margin:0;padding:0;list-style:none;counter-reset:pc;}
.entry-content .policy-creed__list li{
counter-increment:pc;list-style:none;position:relative;padding-left:1.9em;margin:0;
line-height:2;font-size:clamp(.98rem,1.7vw,1.1rem);
}
.entry-content .policy-creed__list li::before{
content:counter(pc) ".";position:absolute;left:0;
font-family:var(--ff-en);font-weight:500;color:var(--accent);
}
.entry-content .policy-creed__list li + li{margin-top:6px;}
.entry-content .policy-sign{margin-top:clamp(30px,4vw,48px);text-align:right;}
.entry-content .policy-sign__date{margin:0 0 10px;font-size:.9rem;color:var(--text-dim);letter-spacing:.06em;}
.entry-content .policy-sign__name{
margin:0;font-weight:700;line-height:1.9;letter-spacing:.08em;color:var(--ink);
font-size:clamp(1rem,1.8vw,1.18rem);
}
.entry-content .policy-sign__name em{font-style:normal;font-weight:500;font-size:.82em;color:var(--text-dim);margin-right:.5em;}
@media(max-width:560px){
/* 番号を上に逃がして、見出し語と本文に幅をぜんぶ使わせる */
.entry-content .policy-acts > li{grid-template-columns:1fr;gap:2px;}
.entry-content .policy-acts > li::before{grid-row:auto;font-size:1.34rem;line-height:1.4;}
.entry-content .policy-sign{text-align:left;}
}
/* ==========================================================
会社案内（会社概要・沿革）
========================================================== */
/* 会社概要は表が主役のページなので、.narrow の 880px では窮屈でした。
幅を広げ、あわせて文字も一段上げています（2026-08-14）。
幅の指定は「私たちについて」の各セクション（.ab-inner）と同じ考え方です。 */
.content-area.narrow.pg-company .container{width:min(1120px,92%);}
.pg-company .entry-content p,
.pg-company .entry-content ul li,
.pg-company .entry-content ol li{font-size:1.02rem;}
.pg-company .cp-table th,
.pg-company .cp-table td{font-size:1rem;padding:18px 22px;}
.pg-company .cp-list li{font-size:.97rem;}
.pg-company .cp-office-name,
.pg-company .cp-lead{font-size:1.02rem;}
.company-profile{margin-top:clamp(6px,1.6vw,18px);}
.company-profile .cp-ttl{
font-size:clamp(1.4rem,2.6vw,2rem);color:var(--ink);letter-spacing:.08em;
margin:clamp(40px,5vw,60px) 0 22px;padding-bottom:14px;
border-bottom:2px solid var(--accent);display:flex;align-items:center;gap:12px;
}
.company-profile .cp-ttl:first-child{margin-top:0;}
.company-profile .cp-ttl::before{content:"";width:9px;height:22px;border-radius:3px;background:var(--accent);}
.cp-table{width:100%;border-collapse:collapse;margin-bottom:0;}
.cp-table th,.cp-table td{
border:1px solid var(--line);padding:16px 20px;text-align:left;vertical-align:top;
font-size:.92rem;line-height:1.9;
}
.cp-table th{
background:var(--paper);color:var(--ink);font-weight:700;
/* 項目名はどれも5文字までなので、割合ではなく文字量に合わせた幅で止める */
white-space:nowrap;width:9em;letter-spacing:.04em;
}
.cp-office{margin-bottom:16px;}
.cp-office:last-child{margin-bottom:0;}
.cp-office-name{
display:inline-block;font-weight:700;color:var(--accent-deep);
letter-spacing:.06em;margin-bottom:6px;
}
.cp-office-name::after{content:"";display:block;width:26px;height:2px;border-radius:2px;background:var(--accent);margin-top:6px;}
/* 事業内容：業種リスト */
.cp-lead{display:inline-block;font-weight:700;color:var(--ink);margin-bottom:10px;letter-spacing:.04em;}
.cp-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 18px;margin:0;padding:0;list-style:none;}
.cp-list li{position:relative;padding-left:16px;font-size:.9rem;line-height:1.7;}
.cp-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent);}
@media(max-width:700px){.cp-list{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.cp-list{grid-template-columns:1fr;}}
/* 本社アクセスマップ */
.cp-map-frame{
position:relative;
width:100%;height:clamp(300px,42vw,460px);
border-radius:10px;overflow:hidden;border:1px solid var(--line);
box-shadow:0 14px 34px rgba(46,77,97,.1);
}
.cp-map-frame iframe{width:100%;height:100%;border:0;display:block;}
/* 支店マップ（見出しは本社アクセスと同じ .cp-ttl を使う） */
/* Maps Embed は枠が横400px未満になると簡易表示（地図内の移動・拡大ができない）に
切り替わる。4列だと1枚205pxしか取れず操作できないため2列にして幅を確保する。 */
.cp-branch-maps{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px);}
.cp-branch{display:flex;flex-direction:column;}
/* 支店名は小見出しくらいの大きさに（旧「支店アクセス」見出しと同じサイズ） */
.cp-branch-name{
font-weight:700;color:var(--accent-deep);font-size:clamp(1.05rem,1.6vw,1.25rem);
letter-spacing:.08em;line-height:1.5;margin-bottom:10px;
}
/* 本社マップより背は低いが、操作できる高さは確保する */
.cp-map-frame.small{height:clamp(220px,22vw,300px);box-shadow:0 10px 24px rgba(46,77,97,.1);}
/* Googleマップへのリンク。地図の上には重ねない（重ねるとドラッグを奪ってしまう） */
.cp-map-open{
align-self:flex-start;margin-top:6px;
font-size:.76rem;font-weight:700;letter-spacing:.04em;color:var(--accent-deep);
display:inline-flex;align-items:center;gap:5px;
}
.cp-map-open:hover{color:var(--accent-d);text-decoration:underline;}
.cp-map-open .ext{font-family:var(--ff-en);font-size:.86em;}
.cp-branch-addr{font-size:.76rem;line-height:1.7;color:var(--text-dim);margin-top:8px;}
@media(max-width:700px){.cp-branch-maps{grid-template-columns:1fr;}}
/* 沿革：年号を英字フォントでアクセント（「1959年」ぶんの幅だけ確保する） */
.cp-history th{
width:7.4em;color:var(--accent-deep);font-family:var(--ff-en);letter-spacing:.06em;
}
@media(max-width:600px){
.cp-table,.cp-table tbody,.cp-table tr,.cp-table th,.cp-table td{display:block;width:100%;}
.cp-table th{border-bottom:none;padding-bottom:8px;}
.cp-table td{border-top:none;padding-top:8px;}
.cp-table tr+tr{margin-top:-1px;}
}
/* ==========================================================
私たちについて（about）
本文はリード文だけ。以降は about-body.php の全幅セクションが続く。
========================================================== */
/* リードだけの本文カラムは、下に続くセクションと余白が二重にならないよう詰める */
.content-area.lead-only{padding-bottom:0;}
.content-area.lead-only .entry-content p:last-child{margin-bottom:0;}
/* リードは下の各セクション（.ab-inner）と同じ幅まで広げる。
.narrow の 880px だとこの一文が3行に折れてしまうため、ここだけ上書きする。 */
.content-area.narrow.lead-only .container{width:min(1280px,92%);}
.entry-content p.about-lead{
font-size:clamp(1.1rem,1.55vw,1.26rem);font-weight:500;color:var(--ink);line-height:2.1;
}
/* --- ページ内の行き先（目次チップ） --- */
.about-jump{
width:min(1280px,92%);margin:clamp(30px,4vw,46px) auto 0;
display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.about-jump a{
display:flex;flex-direction:column;gap:2px;align-items:center;
padding:12px 26px;border-radius:999px;background:var(--white);
border:1px solid var(--line);box-shadow:0 6px 18px rgba(46,77,97,.06);
transition:transform .35s var(--ease),box-shadow .35s,border-color .35s,background-color .35s;
}
.about-jump a:hover{
transform:translateY(-3px);border-color:var(--accent);background:var(--paper);
box-shadow:0 14px 30px rgba(46,77,97,.13);
}
.about-jump .aj-en{
font-family:var(--ff-en);font-weight:700;font-size:.66rem;letter-spacing:.24em;
text-transform:uppercase;color:var(--accent-deep);line-height:1;
}
.about-jump .aj-jp{font-size:.95rem;font-weight:700;color:var(--ink);letter-spacing:.06em;line-height:1.4;}
/* --- セクション共通 --- */
.about-sec{position:relative;padding:clamp(56px,8vw,104px) 0;overflow:hidden;}
/* 「私たちについて」は読み物のページなので、幅を広く使い、本文も一段大きくしています
（2026-08-14。1120px → 1280px）。目次チップとリード文も同じ幅にそろえます。 */
.about-sec .ab-inner{width:min(1280px,92%);margin-inline:auto;position:relative;z-index:1;}
/* 本文まわりの文字。読み物のページなので、2段階に分けて上げています
（2026-08-14：初回 .92rem前後→1rem前後、さらにもう一段 1.08rem前後へ）。 */
.phi-lead,
.mv-lead,
.ch-lead{font-size:1.1rem;line-height:2.1;}
.phi-body,
.vs-body,
.mv-txt,
.ch-body{font-size:1.08rem;line-height:2.05;}
.mv-value-body{font-size:1.06rem;line-height:2;}
.phi-book-lead{font-size:1.02rem;line-height:1.85;}
.phi-book-meta dd{font-size:1.06rem;}
.vs-lead-body{font-size:clamp(1.08rem,1.5vw,1.16rem);line-height:2.1;}
/* 小見出しも本文に合わせて少し上げる（大見出し・数字は元のまま）。 */
.phi-ttl{font-size:clamp(1.2rem,2.05vw,1.42rem);}
.phi-book-ttl{font-size:clamp(1.1rem,1.85vw,1.3rem);}
.vs-ttl{font-size:clamp(1.2rem,2.15vw,1.5rem);}
.ch-ttl{font-size:clamp(1.24rem,2.25vw,1.56rem);}
.mv-value-ttl{font-size:clamp(1.1rem,1.95vw,1.3rem);}
.phi-book-meta dt{font-size:.82rem;}
.about-sec .sec-head{margin-bottom:clamp(30px,4vw,48px);}
.about-sec .sec-head h2{font-size:clamp(1.78rem,3.75vw,2.65rem);}
/* --- あさひフィロソフィ（2部） --- */
/* 上のリード文（body のパステル地）から白へ、境目を出さずにつなぐ */
.ab-philosophy{background:linear-gradient(180deg,rgba(255,255,255,0),var(--white) 34%);}
.phi-lead{font-size:.95rem;line-height:2.1;margin-bottom:clamp(30px,4vw,44px);}
/* ★2列。カードは2枚（第1部・第2部）です。以前は3か条だったので3列でした。
カードを増減させたときは、この列数も合わせて直してください。
列数が枚数より多いと、右側が空いたまま残ります。 */
.phi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px);}
.phi-card{
position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;
padding:clamp(30px,3.2vw,40px) clamp(24px,2.6vw,32px) clamp(28px,3vw,36px);
box-shadow:0 10px 26px rgba(46,77,97,.06);
transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.phi-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 20px 42px rgba(46,77,97,.13);}
/* 見出し頭の漢数字（.phi-no）は「いらない」との指示で廃止。
戻すときは about-body.php の span と合わせて復活させる */
.phi-ttl{font-family:var(--ff-disp);font-size:clamp(1.1rem,1.9vw,1.32rem);letter-spacing:.04em;margin-bottom:.7em;}
.phi-body{font-size:.92rem;line-height:2.05;}
/* --- 手帳の案内：写真（左）＋本文（右）。写真が無いときは1列に落とす --- */
.phi-book{
margin-top:clamp(26px,3.4vw,40px);
/* 表紙図は縦長（412:706 ＝ 高さが幅の約1.71倍）なので、幅を広げるとこの列だけ
極端に高くなり、行の高さが図で決まって説明文の下に大きな空きが残る。
150px だと図の高さ約257px に対し説明文は約176px で、80px 以上が空いていた。
図の高さが説明文とほぼ揃う 120px まで絞る。 */
display:grid;grid-template-columns:minmax(0,clamp(96px,10vw,120px)) minmax(0,1fr);
/* 説明文は箱の上端からはじめる。中央揃えだと上に空きができて、
「頒布のご案内」のタグが宙に浮いて見えるため。 */
gap:clamp(18px,2.2vw,28px);align-items:start;
background:var(--paper);border:1px solid var(--line);border-radius:16px;
padding:clamp(20px,2.4vw,28px);
}
/* 表紙は SVG で描いた図（写真ではない）。影は角丸に沿わせたいので
filter:drop-shadow を使う（box-shadow だと四角い影になる） */
/* 図がわずかに余っても、残りを下だけに落とさず上下に振り分ける */
.phi-book-ph{margin:0;align-self:center;}
.phi-book-svg{
display:block;width:100%;height:auto;
filter:drop-shadow(0 16px 26px rgba(23,59,105,.28));
}
/* 箔押し文字。実物の表紙は明朝の箔押しなので、ここだけ明朝を当てる
（サイト本体は明朝なしで統一しているので、この用途以外に広げないこと）。
ウェブフォントが来る前は端末の明朝でつなぎ、無ければ serif に落とす。 */
.phi-book-svg .phi-book-foil{
font-family:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho',YuMincho,'MS PMincho',serif;
font-weight:700;
}
.phi-book-svg .phi-book-t1{font-size:31px;letter-spacing:4.6px;}
.phi-book-svg .phi-book-t2{font-size:27px;letter-spacing:3.4px;}
/* 表紙図の列を細くしたぶんキャプションが2行に折れるので、折り返しを禁止し、
足りない幅は左右のマイナスマージン（＝図と本文のすき間）で借りる */
.phi-book-cap{
margin:7px -26px 0;text-align:center;white-space:nowrap;
font-size:clamp(.5rem,.62vw,.56rem);color:var(--text-dim);letter-spacing:.02em;
}
.phi-book-tag{
display:inline-block;margin-bottom:9px;padding:3px 11px;border-radius:999px;
background:var(--accent);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.12em;
}
.phi-book-ttl{font-family:var(--ff-disp);font-size:clamp(1.02rem,1.7vw,1.2rem);letter-spacing:.04em;margin-bottom:.45em;}
.phi-book-lead{font-size:.88rem;line-height:1.85;}
/* 価格と連絡先は、幅が足りるうちは横に2つ並べて縦の高さを稼がない。
ここは実際に問い合わせてもらうための情報なので、本文より少し大きく出す。
本文とのあいだは詰めて、ひとかたまりに見せる。 */
.phi-book-meta{
margin-top:9px;
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:7px 22px;
}
.phi-book-meta > div{
display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;
padding-top:7px;border-top:1px dashed var(--line);
}
.phi-book-meta dt{
flex:none;min-width:6.4em;font-size:.76rem;font-weight:700;letter-spacing:.08em;color:var(--text-dim);
}
.phi-book-meta dd{font-size:.94rem;}
/* 金額と電話番号は「読み取ってもらう数字」なので Outfit ではなく本文書体で組む。
「500円」の円や「（代表）」と同じ書体になり、混植も解消される。 */
.phi-book-meta dd strong{font-family:var(--ff-base);font-size:1.42rem;font-weight:700;color:var(--accent-deep);letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.phi-book-meta dd a{color:var(--accent-deep);font-family:var(--ff-base);font-size:1.26rem;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.phi-book-meta dd a:hover{color:var(--accent);}
@media(max-width:820px){
.phi-grid{grid-template-columns:1fr;}
/* 写真は本文の上へ。横幅いっぱいだと大きすぎるので少し絞る */
.phi-book{grid-template-columns:1fr;}
.phi-book-ph{max-width:128px;margin-inline:auto;}
.phi-book-meta{grid-template-columns:1fr;}
.phi-book-meta dt{min-width:100%;}
}
/* --- 旭が目指すもの --- */
.ab-vision{background:linear-gradient(180deg,var(--white),var(--paper));}
.vs-lead{
border-left:4px solid var(--accent);padding:6px 0 6px clamp(20px,2.6vw,32px);
margin-bottom:clamp(34px,4.5vw,54px);
}
.vs-lead-ttl{
font-family:var(--ff-disp);color:var(--ink);font-weight:700;
font-size:clamp(1.5rem,3.6vw,2.35rem);line-height:1.5;letter-spacing:.04em;margin-bottom:.5em;
}
.vs-lead-body{font-size:clamp(.92rem,1.3vw,1rem);line-height:2.1;}
.vs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px);}
.vs-card{
position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;
padding:clamp(26px,3vw,36px) clamp(24px,2.8vw,34px) clamp(28px,3vw,36px);
box-shadow:0 10px 26px rgba(46,77,97,.06);overflow:hidden;
transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.vs-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 20px 42px rgba(46,77,97,.13);}
.vs-card.wide{grid-column:1 / -1;}
/* 通し番号（01〜04）。白抜き（text-stroke）は輪郭が歪んで読みにくかったので、
癖のない Noto Sans JP のベタ塗りにした。飾りとして薄く置くだけにして、
書体そのものは見出しと同じ系統に揃えている。 */
.vs-no{
position:absolute;top:clamp(14px,1.8vw,20px);right:clamp(18px,2.2vw,26px);
font-family:var(--ff-base);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1;
letter-spacing:.02em;font-variant-numeric:tabular-nums;
color:rgba(91,184,227,.5);user-select:none;
}
.vs-ttl{
font-family:var(--ff-disp);font-size:clamp(1.12rem,2vw,1.4rem);letter-spacing:.04em;
margin-bottom:.7em;padding-right:2.6em;
}
.vs-body{font-size:.92rem;line-height:2.05;}
@media(max-width:820px){
.vs-grid{grid-template-columns:1fr;}
}
/* --- 土木の道（淡い水色の地に、白いクレド面を1枚置く） ---
独立セクションは廃止し、いまは使命（Mission）の中身として .mv-block.is-credo の中で使う */
/* 問いかけは独立した見出しではなく本文の書き出し。紙の中に、本文と同じ左揃えで置く */
.cr-q{
font-family:var(--ff-disp);color:var(--ink);
font-size:clamp(1.08rem,1.7vw,1.3rem);letter-spacing:.06em;line-height:2.1;
margin-bottom:clamp(18px,2.2vw,28px);
}
/* 本文は白い面に載せる。地色を濃くせずに、ここだけ別の紙という見え方をつくる */
.cr-body{
width:min(780px,100%);margin-inline:auto;
background:var(--white);border:1px solid var(--line);border-radius:18px;
padding:clamp(30px,4vw,52px) clamp(24px,3.6vw,56px);
box-shadow:0 14px 34px rgba(46,77,97,.08);
}
.cr-stanza p{
font-family:var(--ff-disp);font-size:clamp(.95rem,1.35vw,1.06rem);
line-height:2.35;letter-spacing:.05em;color:var(--ink);
}
/* 連と連のあいだは罫線を引かず、余白だけで区切る */
.cr-stanza+.cr-stanza{margin-top:clamp(22px,2.8vw,34px);}
/* 結びと署名も同じ紙の上。本文より一段大きくして「読み終わり」を示す */
.cr-end{
text-align:center;font-family:var(--ff-disp);color:var(--ink);
font-size:clamp(1.2rem,2.6vw,1.7rem);letter-spacing:.08em;line-height:1.8;
margin-top:clamp(30px,4vw,46px);
}
.cr-end .em{color:#e0913a;}
/* 署名は手紙と同じで右に寄せる */
.cr-sign{
text-align:right;margin-top:18px;font-size:.8rem;letter-spacing:.1em;color:var(--text-dim);
}
.cr-end .sp-br{display:none;}
@media(max-width:560px){.cr-end .sp-br{display:inline;}}
/* --- 使命・展望・価値観（Mission / Vision / Value） --- */
/* 上（旭が目指すもの）の終わりの色から始めて、下（挑戦！3K＋G！）の始まりの色で終える */
/* 中ほど（ちょうど「土木の道」が載るあたり）だけ一段沈ませて紙面に奥行きを出す。
以前は淡い緑を挟んでいたが、前後のセクションが水色系なので mist で通す */
.ab-mvv{background:linear-gradient(180deg,var(--paper) 0%,var(--mist) 26%,var(--white) 58%,var(--paper) 100%);}
.mv-lead{font-size:.95rem;line-height:2.1;margin-bottom:clamp(28px,3.6vw,42px);}
/* --- 3つを1本の線でつなぐ ---
使命・展望・価値観はそれぞれ別のものではなく地続きの考え方なので、
カードで区切らず、左に通した縦線と節目の点でつなぐ。
線はスクロールに合わせて上から伸び（.mv-track__fill）、
節目に差しかかった点が灯る（.mv-block.visible::before）。 */
.mv-track{
--rail:clamp(26px,3.4vw,52px);
position:relative;padding-left:var(--rail);
}
/* 下地の線。上下端は消して、前後の話から切り離さない */
.mv-track::before{
content:'';position:absolute;left:calc(var(--rail) / 2 - 1.5px);top:0;bottom:0;width:3px;border-radius:3px;
background:linear-gradient(180deg,
rgba(91,184,227,0) 0%,rgba(91,184,227,.28) 5%,
rgba(91,184,227,.28) 95%,rgba(91,184,227,0) 100%);
}
/* 読み進めたぶんだけ伸びる線（高さは main.js が入れる） */
.mv-track__fill{
position:absolute;left:calc(var(--rail) / 2 - 1.5px);top:0;width:3px;height:0;border-radius:3px;
background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);
will-change:height;
}
/* 見出し（Mission…）は横幅をめいっぱい使って上に置く。
左右2段にすると「Society5.0 まだ見ぬ未来をDobokuする」のような長い題が
狭い列で途中から折り返してしまうため、幅を与えて1行で読ませる。 */
.mv-block{
position:relative;
padding:0 0 0 clamp(4px,1vw,14px);
}
.mv-block+.mv-block{margin-top:clamp(46px,6vw,88px);}
/* 節目の点。線の上に重ねて、通過すると灯る */
.mv-block::before{
content:'';position:absolute;z-index:1;top:6px;left:calc(var(--rail) / -2 - 9px);
width:18px;height:18px;border-radius:50%;
background:var(--white);border:3px solid rgba(91,184,227,.4);
transition:background .55s ease,border-color .55s ease,box-shadow .55s ease,transform .55s ease;
}
.mv-block.visible::before{
background:var(--accent);border-color:var(--accent);
box-shadow:0 0 0 6px rgba(91,184,227,.16);
transform:scale(1.08);
}
.mv-head{
position:relative;margin-bottom:clamp(18px,2.4vw,30px);
padding-bottom:clamp(12px,1.6vw,20px);
border-bottom:1px solid rgba(91,184,227,.3);
}
/* 項目名（Mission／使命）は塗りや太字に頼らず、
大きさと字間のゆとりで立たせる。線の細い書体のまま広く組むほうが締まって見える */
.mv-tag{
display:flex;align-items:baseline;gap:clamp(10px,1.4vw,16px);
margin-bottom:clamp(8px,1.2vw,14px);white-space:nowrap;
padding:0;background:none;border:0;border-radius:0;box-shadow:none;
font-family:var(--ff-en);font-weight:500;
font-size:clamp(1.6rem,3.6vw,2.65rem);letter-spacing:.22em;
text-transform:uppercase;color:var(--accent-deep);line-height:1.15;
}
/* 英語だけだと伝わらないので、細い罫を挟んで日本語を並べる */
.mv-tag em{
font-family:var(--ff-base);font-style:normal;font-weight:500;
font-size:clamp(1.02rem,2vw,1.42rem);letter-spacing:.2em;
text-transform:none;color:var(--ink);
padding-left:clamp(12px,1.6vw,20px);border-left:1px solid rgba(91,184,227,.5);
}
/* 題は項目名より一段控えめにして、読む順番をはっきりさせる */
.mv-ttl{
font-family:var(--ff-disp);font-size:clamp(1.2rem,2.4vw,1.75rem);
letter-spacing:.03em;line-height:1.6;color:var(--ink);
}
/* 幅に余裕のある画面では、題を途中で折り返さない */
@media(min-width:901px){
.mv-ttl{white-space:nowrap;}
}
.mv-txt{font-size:.92rem;line-height:2.05;}
/* Mission の中身は「土木の道」そのもの。問いかけも含めて白い紙（.cr-body）1枚に収める */
.mv-block.is-credo .cr-body{padding:clamp(26px,3.4vw,42px) clamp(22px,3.2vw,44px);}
/* Value：番号は丸札にせず、POINTカード（.pt-no）と同じ「大きな英数字」で示す。
丸で囲うと札が主役になってしまうので、数字そのものの大きさと細い縦罫で区切る */
.mv-values{display:grid;gap:clamp(14px,1.8vw,20px);}
.mv-value{
position:relative;
display:grid;grid-template-columns:auto 1fr;column-gap:clamp(16px,2.2vw,26px);row-gap:6px;align-items:center;
padding:clamp(16px,2vw,22px) clamp(16px,2.2vw,24px);
padding-left:clamp(19px,2.2vw,27px);
background:var(--paper);border:1px solid rgba(91,184,227,.3);border-radius:14px;
overflow:hidden;
}
/* 左端の細いアクセント。丸札の代わりに、ここで3つの並びにリズムを付ける */
.mv-value::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--accent),var(--accent-deep));
}
/* 太らせると数字だけが腫れて見える。Society の番号（.sc-no em）と同じく
Outfit の 400 まで落とし、字送りを広げて細く大きく組む */
.mv-value-no{
grid-row:1 / 3;align-self:center;
padding-right:clamp(16px,2.2vw,26px);
border-right:1px solid rgba(91,184,227,.4);
font-family:var(--ff-en);font-weight:400;line-height:.85;letter-spacing:.06em;
font-variant-numeric:tabular-nums;
font-size:clamp(2.4rem,4.2vw,3.3rem);color:var(--accent-deep);
}
.mv-value-ttl{font-size:clamp(1.02rem,1.8vw,1.2rem);letter-spacing:.04em;}
.mv-value-body{font-size:.9rem;line-height:2;}
/* 狭い画面では数字を本文の上に置き、横罫で区切る（縦罫のままだと本文が細くなりすぎる） */
@media(max-width:520px){
.mv-value{grid-template-columns:1fr;row-gap:10px;}
.mv-value-no{
grid-row:auto;justify-self:start;
padding:0 0 8px;border-right:0;border-bottom:1px solid rgba(91,184,227,.4);
font-size:2.2rem;
}
}
/* Society 1.0→5.0 の階段図 */
.sc-fig{margin-top:clamp(24px,3vw,34px);}
.sc-steps{
display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px);align-items:end;
}
.sc-step{
position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;
padding:clamp(14px,1.7vw,20px) clamp(10px,1.3vw,16px) clamp(16px,1.9vw,22px);
display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
box-shadow:0 8px 20px rgba(46,77,97,.06);
/* 右へ行くほど1段ずつ持ち上げて、階段に見せる */
margin-bottom:calc(var(--lift) * clamp(12px,1.7vw,24px));
}
/* 持ち上げたぶんの下を「蹴上げ」で埋める */
.sc-step::after{
content:"";position:absolute;left:10%;right:10%;top:100%;
height:calc(var(--lift) * clamp(12px,1.7vw,24px));
background:linear-gradient(180deg,rgba(91,184,227,.28),rgba(91,184,227,0));
border-radius:0 0 8px 8px;
}
.sc-icon{
display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
background:var(--paper);border:1px solid rgba(91,184,227,.4);color:var(--accent-deep);
}
.sc-icon svg{width:22px;height:22px;}
/* 「Society 4.0」は太らせずに、細く広く組んで数字だけ大きく見せる。
時代名（.sc-ttl）を主役にしたぶん、こちらは軽さで対比をつくる。 */
.sc-no{
font-family:var(--ff-en);font-weight:400;font-size:.68rem;letter-spacing:.22em;
text-transform:uppercase;color:var(--text-dim);line-height:1.3;
}
.sc-no em{
font-style:normal;font-weight:500;font-size:1.5em;color:var(--accent-deep);
letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
/* 時代の名前がこの図の主役。ひと回り大きくして、下に短い線を敷いて他と差をつける。
Noto Sans JP の 800 は漢字の画がつぶれて重かったため、
ふところの広い Zen Kaku Gothic New の 700 に変更（この書体に 800 は無い）。 */
.sc-ttl{
position:relative;margin-top:2px;padding-bottom:11px;
font-family:var(--ff-disp);
font-weight:700;font-size:clamp(1.02rem,1.9vw,1.34rem);letter-spacing:.03em;
color:var(--ink);line-height:1.45;
}
.sc-ttl::after{
content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
width:28px;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--accent),var(--accent-deep));
}
/* 英語名も同じ調子で、太さではなく字間で見せる */
.sc-en{font-family:var(--ff-en);font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);line-height:1.2;}
.sc-body{font-size:.76rem;line-height:1.85;color:var(--text-dim);}
/* --- 画面に入ったら、地面から1段ずつ伸び上がる ----------------------------
各段は下端を軸に縦へ伸ばす。文字は伸びきってから出すので、
引き伸ばし中の文字がつぶれて見えることがない。 */
.sc-grow .sc-step{
transform-origin:50% 100%;
transition:transform .78s var(--ease),opacity .3s linear;
transition-delay:calc(var(--lift) * .11s);
}
.sc-grow .sc-step > *{
transition:opacity .5s var(--ease),transform .5s var(--ease);
transition-delay:calc(var(--lift) * .11s + .42s);
}
.sc-grow:not(.visible) .sc-step{transform:scaleY(.06);opacity:.5;}
.sc-grow:not(.visible) .sc-step > *{opacity:0;transform:translateY(12px);}
@media(prefers-reduced-motion:reduce){
.sc-grow .sc-step,
.sc-grow .sc-step > *{transition:none;}
.sc-grow:not(.visible) .sc-step{transform:none;opacity:1;}
.sc-grow:not(.visible) .sc-step > *{opacity:1;transform:none;}
}
/* 5.0 だけは色を変えて、これから向かう段だとわかるようにする */
.sc-step.is-now{
background:linear-gradient(170deg,#fff8ee,var(--white));
border-color:rgba(246,174,92,.7);box-shadow:0 14px 32px rgba(224,145,58,.18);
}
.sc-step.is-now::after{background:linear-gradient(180deg,rgba(246,174,92,.4),rgba(246,174,92,0));}
.sc-step.is-now .sc-icon{background:rgba(246,174,92,.16);border-color:rgba(246,174,92,.6);color:#e0913a;}
.sc-step.is-now .sc-no em,.sc-step.is-now .sc-ttl{color:#c97a24;}
.sc-step.is-now .sc-ttl::after{background:linear-gradient(90deg,#f6ae5c,#c97a24);}
/* 図の下、5.0 の中身（サイバー＋フィジカル＝人間中心の社会） */
.sc-now{
margin-top:clamp(20px,2.6vw,30px);
/* 面は「ほぼ白の水色」。図そのものが白い面の集まりなので、地をこれ以上濃くすると
カードの輪郭が全部消える。線もごく細く、囲いだと分かる程度に留める。 */
background:linear-gradient(180deg,#f7fbfe 0%,#f2f8fc 100%);
border:1px solid rgba(91,184,227,.28);border-radius:22px;
padding:clamp(22px,3.2vw,44px) clamp(18px,3vw,40px);
}
/* この箱の見出し。和文が主なので英字用の詰めをやめ、本文の見出し並みの大きさにする */
.sc-now-ttl{
display:flex;align-items:center;gap:12px;
/* 800 は Zen Kaku Gothic New に存在せず 900 に丸められて太くなるので 700 で止める */
font-weight:700;font-size:clamp(1.02rem,2vw,1.34rem);letter-spacing:.06em;line-height:1.5;
color:var(--accent-deep);margin-bottom:clamp(16px,2vw,22px);
}
.sc-now-ttl::before{
content:"";flex:none;width:26px;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--accent),var(--accent-deep));
}
/* 図に入る前の一行。図は要素が多いので、先に結論を1行で言い切っておく。
★見出し（.sc-now-ttl）は左端ぞろえ、この行は図と同じく中央ぞろえ。
図の中身が左右対称なので、この行だけ左に寄っていると軸が2本あるように見える。 */
.sc-now-lead{
margin:0 auto clamp(22px,3vw,38px);text-align:center;
font-weight:700;font-size:clamp(.98rem,1.85vw,1.3rem);letter-spacing:.05em;line-height:1.7;
color:var(--accent-deep);
}
/* --- Society5.0 のループ図 ---
現場（フィジカル）とデータ（サイバー）を上下2本の流れで往復させ、
その真ん中に人を置く。足し算の等式ではなく「回り続けている」ことを見せる。 */
.sc-loop{
position:relative;
/* 両端のカードに説明文が入ったぶん、図そのものが大きくなった。
970px ＝ ノード300 × 2 ＋ 円210 ＋ 列間80 × 2。
枠（.mv-body の実寸で約970px）いっぱいまで使い切る幅なので、
ノードの幅を広げるときは列間を削って合計を保つこと。 */
width:min(100%,970px);margin-inline:auto;
display:grid;align-items:center;
grid-template-columns:1fr clamp(150px,21vw,210px) 1fr;
grid-template-areas:
"up up up"
"phys core cyber"
"down down down";
gap:clamp(14px,2vw,22px) clamp(16px,2.6vw,34px);
margin-bottom:clamp(22px,3vw,38px);
}
.sc-loop .up{grid-area:up;}
.sc-loop .down{grid-area:down;}
.sc-loop .phys{grid-area:phys;}
.sc-loop .cyber{grid-area:cyber;}
.sc-loop .sc-core{grid-area:core;}
/* 流れの帯：点線の中ほどに札を置き、線の終端に小さな矢じりを立てる。
★線は「太い実線＋大きな矢じり」から点線に変えている（2026-08-14）。
実線だと帯そのものが図の主役になり、両端のカードより目立っていた。
点線は「まだ流れている途中」に見えるので、往復の図と合う。
★点の間隔は repeating-linear-gradient で作る。border:dotted は
ブラウザごとに点の大きさと間隔が変わり、上下の線がそろわない。 */
.sc-flow{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(58px,6vw,70px);}
.sc-flow::before{
content:'';position:absolute;left:3%;right:3%;top:50%;height:2px;transform:translateY(-50%);
background-image:repeating-linear-gradient(90deg,
rgba(91,184,227,.75) 0 3px, rgba(91,184,227,0) 3px 9px);
}
.sc-flow::after{
content:'';position:absolute;top:50%;transform:translateY(-50%);
border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.sc-flow.up::after{right:calc(3% - 8px);border-left:9px solid rgba(91,184,227,.95);}
.sc-flow.down::after{left:calc(3% - 8px);border-right:9px solid rgba(91,184,227,.95);}
/* 和文と英字を同じ行に並べると 14px と 10px が baseline で混ざって読みにくいので、上下に積む */
.sc-flow-label{
position:relative;z-index:1;display:inline-flex;flex-direction:column;align-items:center;gap:3px;
padding:12px 34px;border-radius:999px;
background:var(--white);border:1px solid rgba(91,184,227,.42);
box-shadow:0 2px 10px rgba(46,77,97,.05);
font-size:clamp(.94rem,1.5vw,1.04rem);font-weight:700;letter-spacing:.06em;color:var(--ink);line-height:1.35;
}
.sc-flow-label em{
font-family:var(--ff-en);font-style:normal;font-weight:600;
font-size:.82rem;letter-spacing:.06em;color:var(--accent-deep);line-height:1.3;white-space:nowrap;
}
/* 線の上を流れるデータの粒。
★止まった絵では見えない部分なので、デザイン案（静止画）には描かれていない。
この節で言いたいのは「行き来し続けていること」なので、動きだけ残している。
いらなければ、この .sc-dot と @keyframes sc-run ごと消してよい
（HTML 側の も一緒に消すこと）。 */
.sc-dot{
position:absolute;top:50%;left:5%;width:6px;height:6px;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 3px rgba(91,184,227,.14);
transform:translate(-50%,-50%);opacity:0;will-change:left;
animation:sc-run 3.3s linear infinite;animation-delay:var(--d,0s);
}
.sc-flow.down .sc-dot{animation-direction:reverse;}
@keyframes sc-run{
0%{left:5%;opacity:0}
10%{opacity:1}
90%{opacity:1}
100%{left:95%;opacity:0}
}
/* 中心：人。まわりの破線がゆっくり回って、絶えず巡っていることを示す */
/* 中身は「Society 5.0（小さいラベル）＋人間中心の社会（主役の行）」の2行。
2行まとめて中央に置くと、主役の行だけが中心より下（直径184pxで実測17px下）に落ちて
下がりに見える。下側に余白を足して、ブロック全体を少し持ち上げ、光学的な中心に合わせる */
/* ★飾りは「細い円の線」1本だけにしている（2026-08-14）。
以前は 影の輪＋回る破線の輪 の2重で、円のまわりが3本線に見えて重かった。
地も塗らず白のまま。両端のカードと同じ白にそろえると、3つが同じ高さに並ぶ。 */
.sc-core{
position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
padding-bottom:clamp(10px,1.2vw,16px);
aspect-ratio:1;border-radius:50%;text-align:center;
background:var(--white);
border:1px solid rgba(91,184,227,.55);
}
.sc-core-en{
font-family:var(--ff-en);font-weight:600;font-size:clamp(.86rem,1.35vw,1.02rem);
letter-spacing:.06em;color:var(--accent-d);white-space:nowrap;
}
/* 1行で組む。円の直径 210px に対し 7文字 × 約21px ＝ 約147px なので収まる */
.sc-core-jp{font-size:clamp(1.02rem,1.75vw,1.28rem);font-weight:700;letter-spacing:.04em;color:var(--ink);line-height:1.5;white-space:nowrap;}
/* 両端：現場とデータ。
1fr のまま置くと余白を全部吸って横長の箱になり、中身に対して間延びする。
幅に上限をかけて高さ成りにすると、中身がそのまま正方形に近い比率になる。 */
.sc-loop .phys{justify-self:start;}
.sc-loop .cyber{justify-self:end;}
/* ★左右2枚は同じ見た目にする（2026-08-14）。
以前はデータ側だけ水色を敷いていたが、「現場」と「データ」は
どちらが上でもなく行き来する関係なので、片方だけ強いと図の意味が変わる。 */
.sc-node{
/* 幅は説明文が2行で収まるところで決めている。内寸 300px ＝ 340 − 左右20px。
★300px を切ると「取得したデータを解析・設計・シミュレーションに活用し、
最適な判断と効率化を実現。」が3行に折れ、左右のカードの背が揃わなくなる。
説明文を長くするときは、この幅も一緒に見直すこと。 */
width:min(100%,340px);
/* 万一どちらかが1行多くなっても、2枚の背は揃える（上から順に読む図なので、
中身は上ぞろえのまま。中央ぞろえにすると見出しの高さがずれる）。 */
align-self:stretch;
display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
padding:clamp(18px,2.2vw,26px) clamp(16px,1.9vw,20px);border-radius:18px;
background:var(--white);border:1px solid rgba(91,184,227,.26);
box-shadow:0 6px 20px rgba(46,77,97,.05);
}
/* 図の意味を担うラベルなので、飾りサイズではなく読める大きさで置く */
.sc-node-en{
font-family:var(--ff-en);font-weight:600;font-size:clamp(.82rem,1.3vw,.95rem);letter-spacing:.13em;
text-transform:uppercase;color:var(--accent-d);
}
.sc-node-ttl{font-size:clamp(1.28rem,2.4vw,1.76rem);font-weight:700;letter-spacing:.05em;color:var(--ink);line-height:1.4;}
/* 構成要素は必ず1行に並べる（折り返すと図の読み順が崩れるため） */
.sc-node-tags{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px;}
.sc-node-tags li{
flex:none;white-space:nowrap;
padding:6px 11px;border-radius:999px;background:var(--paper);
border:1px solid rgba(91,184,227,.26);
font-size:.74rem;font-weight:500;letter-spacing:.03em;color:var(--text);line-height:1.6;
}
/* カードの説明文。見出し・タグは中央ぞろえだが、ここだけ左ぞろえにする。
2行の文を中央ぞろえにすると行頭がそろわず、読むときに目が戻る位置を探すことになる。 */
.sc-node-txt{
align-self:stretch;text-align:left;
margin-top:2px;font-size:.8rem;line-height:1.85;letter-spacing:.02em;color:var(--text);
}
/* --- 図の下のまとめ ---
循環の説明 → 旭建設が実際にやっていること → その結果（4つの言葉）。
図とひと続きに見えないよう、面をひとつ内側に敷いて区切っている。 */
.sc-sum{
background:rgba(91,184,227,.10);border-radius:16px;
padding:clamp(20px,2.6vw,32px) clamp(18px,3vw,40px);
}
.sc-sum-txt{
text-align:center;font-size:clamp(.88rem,1.35vw,.98rem);line-height:2;letter-spacing:.03em;color:var(--ink);
}
/* 上の一般論に対して、こちらは自社の話。一段落として続きに見せる */
.sc-sum-note{
margin-top:10px;text-align:center;
font-size:clamp(.8rem,1.2vw,.88rem);line-height:1.95;letter-spacing:.02em;color:var(--text);
}
/* 4つの言葉。上の文の結論なので、罫線で1段区切ってから並べる。
★区切り線は面いっぱいに引かない。少し内側で止めるほうが、
面の中の仕切りだと分かる（端まで引くと面が2つに割れて見える）。 */
.sc-sum-keys{
list-style:none;margin:clamp(16px,2vw,22px) auto 0;padding:clamp(16px,2vw,22px) 0 0;
width:min(100%,86%);border-top:1px solid rgba(46,77,97,.13);
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
}
.sc-sum-keys li{
padding:2px clamp(14px,2.4vw,32px);
font-size:clamp(.86rem,1.3vw,.96rem);font-weight:700;letter-spacing:.05em;
color:var(--accent-deep);line-height:1.7;
}
/* 仕切りは項目のあいだにだけ。両端に出さないよう :first-child は外す */
.sc-sum-keys li + li{border-left:1px solid rgba(91,184,227,.42);}
@media(max-width:760px){
/* 横に3つ並べきれないので、上から下へ1周する形に組み替える */
.sc-loop{
grid-template-columns:1fr;
grid-template-areas:"phys" "up" "cyber" "down" "core";
}
/* 縦1列では左右に寄せる意味がないので、中央の線に揃えて中央寄せにする */
.sc-loop .phys,.sc-loop .cyber{justify-self:center;}
.sc-flow{min-height:92px;}
/* 縦向きの点線に組み替える（横のときと点の間隔をそろえる） */
.sc-flow::before{
left:50%;right:auto;top:4px;bottom:4px;height:auto;width:2px;transform:translateX(-50%);
background-image:repeating-linear-gradient(180deg,
rgba(91,184,227,.75) 0 3px, rgba(91,184,227,0) 3px 9px);
}
.sc-flow.up::after,.sc-flow.down::after{
left:50%;right:auto;top:auto;bottom:-4px;transform:translateX(-50%);
border:0;border-left:6px solid transparent;border-right:6px solid transparent;
border-top:9px solid rgba(91,184,227,.95);
}
.sc-dot{display:none;}
.sc-core{aspect-ratio:auto;border-radius:18px;padding:20px 18px;}
/* 縦1列では、両端のカードも中央の円も同じ幅にそろえる */
.sc-node{width:min(100%,340px);}
/* 4つの言葉は1行に収まらないので2つずつ。
折り返すと行頭の項目に左の仕切りが残るので、そこだけ消す */
.sc-sum-keys{width:100%;}
.sc-sum-keys li{flex:0 0 50%;padding-inline:8px;text-align:center;}
.sc-sum-keys li + li{border-left:0;}
.sc-sum-keys li:nth-child(2n){border-left:1px solid rgba(91,184,227,.42);}
.sc-sum-keys li:nth-child(n+3){margin-top:12px;}
}
@media(prefers-reduced-motion:reduce){
.sc-dot{display:none;}
}
@media(max-width:560px){
/* 線の溝を詰めて本文の幅を確保する */
.mv-track{--rail:22px;}
.mv-block::before{width:14px;height:14px;left:calc(var(--rail) / -2 - 7px);top:5px;}
.mv-block+.mv-block{margin-top:40px;}
/* 項目名は「MISSION｜使命」が1行に収まる範囲まで詰める。字間は残して印象を変えない */
.mv-tag{gap:9px;font-size:clamp(1.3rem,7vw,1.75rem);letter-spacing:.12em;}
.mv-tag em{padding-left:10px;font-size:clamp(.92rem,4.2vw,1.1rem);letter-spacing:.12em;}
}
@media(max-width:820px){
/* 5段の階段は横に並べきれないので、縦に積んだ一覧へ切り替える */
.sc-steps{grid-template-columns:1fr;padding-bottom:0;}
.sc-step{
margin-bottom:0;flex-direction:row;align-items:center;text-align:left;gap:14px;flex-wrap:wrap;
}
.sc-step::after{display:none;}
.sc-icon{flex:none;}
.sc-no{order:-1;flex:none;}
.sc-en{display:none;}
.sc-body{flex:1 1 100%;}
/* 横並びになるので、時代名の下線も左寄せに合わせる */
.sc-ttl{padding-bottom:9px;}
.sc-ttl::after{left:0;transform:none;}
}
/* --- 挑戦！3K＋G！（3K+G!） --- */
/* 下端は透明に抜いて、body のパステル背景（コンテンツ一覧の下地）と境目が出ないようにする */
.ab-challenge{background:linear-gradient(180deg,var(--paper) 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,0) 100%);}
.ch-lead{font-size:.95rem;line-height:2.1;margin-bottom:clamp(30px,4vw,44px);}
.ch-swap{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:clamp(16px,2.4vw,34px);
background:var(--white);border:1px solid var(--line);border-radius:18px;
padding:clamp(26px,3.4vw,42px) clamp(22px,3vw,40px);
box-shadow:0 12px 30px rgba(46,77,97,.07);
margin-bottom:clamp(34px,4.5vw,54px);
}
.ch-from li,.ch-to li{line-height:1.9;white-space:nowrap;}
.ch-from li{
color:var(--text-dim);font-size:clamp(.95rem,1.5vw,1.1rem);font-weight:500;
text-decoration:line-through;text-decoration-color:rgba(138,162,175,.7);
}
.ch-to li{
color:var(--accent-deep);font-weight:800;letter-spacing:.03em;
font-size:clamp(1.15rem,2.6vw,1.75rem);
}
.ch-arw{font-family:var(--ff-en);font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--accent);line-height:1;}
.ch-plus{
display:inline-flex;align-items:center;gap:2px;
font-weight:800;color:var(--ink);font-size:clamp(1rem,1.9vw,1.25rem);letter-spacing:.04em;
padding:10px 20px;border-radius:999px;background:rgba(246,174,92,.16);border:1px solid rgba(246,174,92,.5);
}
.ch-plus em{font-family:var(--ff-en);font-style:normal;font-weight:800;color:var(--sun);font-size:1.25em;margin:0 2px;}
.ch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px);}
.ch-card{
position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;
padding:clamp(26px,3vw,34px);box-shadow:0 10px 26px rgba(46,77,97,.06);overflow:hidden;
transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.ch-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 20px 42px rgba(46,77,97,.13);}
.ch-key{
position:absolute;top:-.14em;right:.12em;font-family:var(--ff-en);font-weight:800;
font-size:clamp(4.4rem,8vw,6rem);line-height:1;
color:transparent;-webkit-text-stroke:1.5px rgba(91,184,227,.3);user-select:none;pointer-events:none;
}
.ch-card:nth-child(4) .ch-key{-webkit-text-stroke-color:rgba(246,174,92,.45);}
.ch-ttl{font-size:clamp(1.15rem,2.1vw,1.45rem);letter-spacing:.04em;margin-bottom:.6em;position:relative;}
.ch-body{font-size:.92rem;line-height:2.05;margin-bottom:1.1em;position:relative;}
.ch-tags{display:flex;flex-wrap:wrap;gap:8px;position:relative;}
.ch-tags li{
font-size:.76rem;letter-spacing:.04em;color:var(--accent-deep);line-height:1.6;
padding:5px 13px;border-radius:999px;background:var(--paper);border:1px solid rgba(91,184,227,.35);
}
@media(max-width:820px){
.ch-grid{grid-template-columns:1fr;}
/* 横並びだと1行に収まらないので、上から下への置き換え図に切り替える */
.ch-swap{flex-direction:column;gap:14px;}
.ch-from,.ch-to{text-align:center;}
.ch-arw{transform:rotate(90deg);line-height:1;}
.ch-plus{margin-top:6px;}
}
/* 各固定ページへのリンク一覧 */
.about-links{
width:min(1240px,92vw);margin:0 auto;
padding-bottom:clamp(70px,10vw,120px);
}
/* 見出しは本文カラム（narrow）と同じ幅・左インデントに揃え、下線を引く */
.about-links .cp-ttl{
width:min(880px,90vw);margin:0 auto clamp(28px,3.4vw,44px);
text-align:left;
font-size:1.35rem;padding-bottom:16px;position:relative;letter-spacing:.08em;
}
.about-links .cp-ttl::after{
content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px;background:var(--line);
}
.about-links .cp-ttl::before{
content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;border-radius:2px;background:var(--accent);z-index:1;
}
.al-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,1.7vw,24px);}
.al-card{
flex:1 1 250px;max-width:320px;
display:flex;align-items:center;gap:14px;
padding:22px 24px;border-radius:14px;background:var(--white);
border:1px solid var(--line);box-shadow:0 8px 22px rgba(46,77,97,.06);
color:var(--ink);position:relative;overflow:hidden;
transition:transform .35s var(--ease),box-shadow .35s,border-color .35s,background-color .35s;
}
.al-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease);}
/* ホバーは淡い水色（--paper）に。濃くしすぎず、文字が読みやすい程度の色変化に留める */
.al-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(46,77,97,.14);border-color:var(--accent);background:var(--paper);}
.al-card:hover::before{transform:scaleY(1);transform-origin:top;}
.al-card:hover .al-ttl{color:var(--accent-deep);}
.al-num{font-family:var(--ff-en);font-weight:800;font-size:.95rem;color:var(--accent);letter-spacing:.04em;flex:none;}
.al-ttl{flex:1;min-width:0;font-weight:700;font-size:.92rem;letter-spacing:.02em;line-height:1.5;white-space:nowrap;transition:color .35s;}
.al-arw{flex:none;font-family:var(--ff-en);color:var(--accent-d);transition:transform .35s var(--ease);}
.al-card:hover .al-arw{transform:translateX(5px);}
.post-nav{display:flex;justify-content:space-between;gap:14px;margin-top:70px;}
.post-nav a{font-size:.85rem;font-weight:700;letter-spacing:.1em;}
.post-nav a:hover{color:var(--accent-deep);}
/* archive list — 記事系ページ（施工実績・活動報告・社員ブログ・カテゴリー）は5列 */
/* 一覧ページは行がいくつも続くので、列の間隔より行の間隔をはっきり広くとる。
そうしないと縦横が同じ間隔になり、どこまでが1行なのか目で追いにくい */
.archive-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(38px,3.6vw,58px) clamp(14px,1.6vw,24px);}
@media(max-width:1240px){.archive-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:900px){.archive-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.archive-grid{grid-template-columns:1fr;}}
.news-list li{border-bottom:1px solid var(--line);}
.news-list li:first-child{border-top:1px solid var(--line);}
.news-list li a{display:flex;align-items:baseline;gap:24px;padding:26px 10px;color:var(--text);flex-wrap:wrap;transition:.3s;}
.news-list li a:hover{background:var(--paper);padding-left:20px;}
.news-list .date{font-family:var(--ff-en);color:var(--text-dim);flex:none;letter-spacing:.1em;font-size:.85rem;}
.news-list .ttl{flex:1;min-width:200px;font-weight:500;}
.news-list li a:hover .ttl{color:var(--accent-deep);}
/* pagination */
.pagination{margin-top:70px;display:flex;justify-content:center;}
.pagination .nav-links{display:flex;gap:10px;}
.pagination .page-numbers{
width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
border:1px solid var(--line);color:var(--ink);font-family:var(--ff-en);font-weight:600;transition:.3s;
}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--accent-d);color:#fff;border-color:var(--accent-d);}
/* contact box */
.contact-box{
background:linear-gradient(140deg,var(--paper),#eaf7f0);border:1px solid var(--line);
border-radius:12px;padding:clamp(34px,5vw,56px);text-align:center;margin-top:60px;
}
.contact-box .tel{
font-family:var(--ff-en);font-weight:800;font-size:clamp(1.9rem,4vw,2.8rem);
color:var(--ink);letter-spacing:.05em;display:block;
}
.contact-box .tel:hover{color:var(--accent-deep);}
.contact-box .note{font-size:.82rem;color:var(--text-dim);}
.contact-box .btn{margin-top:20px;}
/* ==========================================================
Reveal animations (replayable)
========================================================== */
.reveal{opacity:0;transform:translateY(56px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
.reveal.left{transform:translateX(-64px);}
.reveal.right{transform:translateX(64px);}
.reveal.zoom{transform:scale(.92);}
.reveal.visible{opacity:1;transform:none;}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}
/* photo reveal（下から浮き上がる） */
.ph-reveal{position:relative;overflow:hidden;opacity:0;transform:translateY(64px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);will-change:opacity,transform;}
.ph-reveal.visible{opacity:1;transform:translateY(0);}
.ph-reveal img{transform:none;filter:none;}
.ph-blinds{display:none;}
/* text line mask */
.txt-mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;}
.txt-mask>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);}
.txt-mask.visible>span{transform:none;}
.txt-mask.tm2>span{transition-delay:.12s}
.txt-mask.tm3>span{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
html{scroll-behavior:auto;}
.reveal,.ph-reveal,.txt-mask>span{opacity:1;transform:none;filter:none;}
.ph-reveal::after,.ph-blinds{display:none;}
.hero-catch .line span,.hero-eyebrow,.hero-lead,.hero-btns,.hero-mark,.hero-mark.typemark i{opacity:1;transform:none;animation:none;}
.blob,.wave-fx{animation:none;}
.news-ticker .track{animation:none;transform:none;}
.fixed-scene{background-attachment:scroll;}
.about{min-height:0;}
.about-photo-inner{position:absolute;inset:0;top:0;height:100%;}
}
/* utility */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.aligncenter{display:block;margin-inline:auto;}
.tac{text-align:center;}
/* ==========================================================
スマホ専用：ページ全体をコンパクトに（PC版には一切影響させない）
- 施工実績／活動報告／社員ブログ … 縦積みカード → 「左サムネ＋右タイトル」の横並びリスト
- Recruit … 写真の上に文言を重ねて1画面に集約
※ すべて max-width:560px の中だけで完結させること
========================================================== */
@media(max-width:560px){
/* ---------- 共通：リスト化した3セクション ---------- */
/* 一覧ページも同じカードを使うので、必ず1列にしてから横並びにする */
.works .cards,
.activity .cards,
.blog-sec .cards,
.archive-grid,
.activity-archive{grid-template-columns:1fr;gap:12px;}
/* 一覧ページの2つ（社員ブログ・活動報告）は1件ずつ縦に続くので、少し間隔をあける */
.archive-grid,
.activity-archive{gap:18px;}
.works .cta,
.award .cta,
.activity .cta{margin-top:28px;}
.blog-sec .cta{margin-top:20px;}
/* ---------- 施工実績 ---------- */
.work-card{
display:grid;grid-template-columns:104px minmax(0,1fr);gap:13px;align-items:center;
background:rgba(255,255,255,.94);border-radius:12px;padding:10px;
box-shadow:0 8px 20px rgba(46,77,97,.12);
}
.work-card .ph{aspect-ratio:1;border-radius:9px;}
.work-card .ph::after{display:none;} /* hover用の矢印はタッチ端末では不要 */
/* カテゴリはサムネイルの上ではなく、工事名の側（本文カラム）に置く */
.work-card .body .chip{
position:static;transform:none;display:inline-block;
margin-bottom:5px;font-size:.58rem;padding:3px 9px;letter-spacing:.06em;
}
.work-card .body{padding:0;}
.work-card h3{font-size:.88rem;line-height:1.6;}
.work-card .place{margin-top:5px;font-size:.66rem;}
.work-card .place::before{width:14px;}
/* ---------- 活動報告 ---------- */
.act-card{
display:grid;grid-template-columns:104px minmax(0,1fr);gap:13px;align-items:center;
padding:10px;border-radius:12px;box-shadow:0 8px 20px rgba(46,77,97,.12);
}
.act-card .ph{aspect-ratio:1;border-radius:9px;}
.act-card .body{padding:0;}
.act-card .date{font-size:.74rem;}
.act-card h3{margin-top:5px;font-size:.88rem;line-height:1.6;}
.act-card p{display:none;} /* 抜粋は詰めるため非表示 */
/* ---------- 社員ブログ（.ph / .date / h3 / .chip の4要素を2列に配置） ---------- */
.blog-card{
display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:13px;align-items:start;
border-radius:12px;padding:10px;box-shadow:0 8px 20px rgba(46,77,97,.12);
}
.blog-card .ph{grid-column:1;grid-row:1/span 3;align-self:center;aspect-ratio:1;border-radius:9px;}
.blog-card .new{font-size:.54rem;padding:4px 8px;border-radius:9px 0 8px 0;}
.blog-card .date{grid-column:2;grid-row:1;margin:0;font-size:.74rem;}
.blog-card h3{grid-column:2;grid-row:2;margin:5px 0 0;font-size:.88rem;line-height:1.6;}
.blog-card .chip{grid-column:2;grid-row:3;justify-self:start;margin:7px 0 0;font-size:.6rem;padding:2px 10px;}
/* ---------- トップの回転カルーセルだけは横並びリスト化しない ----------
（スワイプで回す見せ方が主役なので、上のリスト化ルールを打ち消す） */
/* カードの高さはスマホだと 286px（--cv-h の下限）しかなく、写真を引いた残りに
日付・見出し・抜粋が収まりきらずに、最後の行が途中で切れていた。
ここで高さを足したうえで、見出しの行数も抑えて必ず収まるようにする。
※ --cv-h はここ（スマホ）だけの上書き。PC 側の clamp() は触らない。
JS はカードの幅しか見ていないので、高さを変えても弧の計算には影響しない。 */
.cv-stage.is-ready{--cv-h:320px;}
.cv-stage.is-ready > .act-card,
.cv-stage.is-ready > .blog-card{padding:0;border-radius:10px;}
.cv-stage.is-ready .ph{border-radius:0;}
.cv-stage.is-ready .blog-card .ph{grid-column:auto;grid-row:auto;align-self:auto;}
.cv-stage.is-ready .act-card .body{padding:13px 14px 15px;}
.cv-stage.is-ready .act-card .date,
.cv-stage.is-ready .blog-card .date{font-size:.76rem;}
.cv-stage.is-ready .blog-card .date{margin:13px 14px 0;}
/* 見出しは2行まで。長いタイトルは「…」で丸める（途中で切れるのを防ぐ） */
.cv-stage.is-ready .act-card h3,
.cv-stage.is-ready .blog-card h3{
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.cv-stage.is-ready .act-card h3{margin-top:6px;font-size:.9rem;}
.cv-stage.is-ready .blog-card h3{margin:6px 14px 0;font-size:.9rem;}
/* タグはカード下端に寄せる（PC と同じ。見出しが1行でも位置が揃う） */
.cv-stage.is-ready .blog-card .chip{margin:auto 14px 15px;font-size:.62rem;padding:2px 10px;}
/* ---------- Recruit：写真は切り取らず、写真の下に文言を置く ---------- */
/* 11.jpg は 1920x1080 の横並び集合写真。縦長にクロップすると両端の社員が
切れてしまうため、スマホでは 16:9 のまま全幅で表示して全員を見せる。 */
.recruit{padding-block:34px 40px;}
.recruit-split{
grid-template-columns:1fr;min-height:0;
}
.recruit-photo{
order:-1;aspect-ratio:16/9;min-height:0;background:var(--mist);
}
.recruit-photo img{
position:static;width:100%;height:100%;object-fit:cover;transform:none;
}
.recruit-text{
justify-content:flex-start;
padding:24px 20px 30px;
}
.recruit .word{font-size:.68rem;letter-spacing:.26em;gap:10px;}
.recruit .word .en{gap:10px;}
.recruit .word .en::before,
.recruit .word .en::after{width:24px;}
.recruit h2{
white-space:normal;
font-size:clamp(1.5rem,6vw,2rem);margin:12px 0 0;letter-spacing:.08em;line-height:1.55;
}
.recruit h2::after{width:40px;height:3px;margin-top:14px;}
.recruit .lead{font-size:.82rem;line-height:1.9;margin-top:16px;}
.recruit .btn{
margin-top:22px;min-width:0;width:min(100%,262px);
padding:13px 20px;font-size:.82rem;letter-spacing:.1em;gap:10px;
}
.recruit .btn .arw{font-size:.9rem;}
}
/* ==========================================================
スマホ専用：ヒーロー（PC版には一切影響させない）
- 動画は全画面ではなく PC と同じ 16:9 の帯で表示する
- ロゴ／社名（ヘッダー）とボタンは動画の外へ独立させる
- メインコピーは 16:9 の中に収まるサイズへ縮小
※ すべて max-width:560px の中だけで完結させること
========================================================== */
@media(max-width:560px){
/* 動画の外（明るい背景）にヘッダーが乗るので、トップでも白ヘッダーにする */
body.home .site-header{
background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
color:var(--ink);box-shadow:0 6px 26px rgba(46,77,97,.1);
}
.hero{
display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;
align-items:stretch;height:auto;min-height:0;
padding-top:64px; /* 固定ヘッダー分（スマホは64px） */
padding-bottom:92px; /* 動画下のボタン領域 */
background:linear-gradient(180deg,var(--paper) 0%,var(--white) 100%);
}
/* 動画：PCと同じ 16:9 の帯 */
.hero-video-wrap{
position:relative;inset:auto;grid-area:1/1;
width:100%;aspect-ratio:16/9;background:var(--ink);
}
.hero-video{
top:0;left:0;transform:none;
width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;
}
/* 上に重ねるグラデーションも動画の帯の中だけに収める */
.hero::before{position:relative;inset:auto;grid-area:1/1;z-index:1;pointer-events:none;}
/* コピーは動画の帯の中に重ねる（下寄せ＝映像の上半分を見せる） */
.hero-inner{
grid-area:1/1;position:relative;z-index:2;
width:100%;margin:0;padding:10px 16px 12px;
display:flex;flex-direction:column;justify-content:flex-end;
}
/* コピーを下寄せにしたぶん、下側のスクリムを少し強めて可読性を確保 */
.hero::before{
background:linear-gradient(0deg,
rgba(20,52,72,.7) 0%,
rgba(20,52,72,.44) 40%,
rgba(20,52,72,.08) 68%,
transparent 100%);
}
.hero-eyebrow{display:none;} /* 社名はヘッダーにあるため帯の中では省く */
.hero-catch{
margin-top:0;min-height:2.6em;
font-size:clamp(1.12rem,5.4vw,1.62rem);line-height:1.3;letter-spacing:.02em;
text-shadow:0 2px 10px rgba(33,68,90,.55);
}
.hero-lead{
margin-top:8px;min-height:3.6em;
font-size:.6rem;line-height:1.8;letter-spacing:.06em;
}
/* ボタンは動画の外（帯のすぐ下）へ */
.hero-btns{
position:absolute;top:100%;left:18px;right:18px;margin-top:18px;
display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.hero-btns .btn{
min-width:0;width:100%;padding:13px 6px;
font-size:.72rem;letter-spacing:.04em;gap:6px;
}
.hero-btns .btn .arw{font-size:.82rem;}
/* 明るい背景の上に置くため、配色を差し替える */
.hero-btns .btn.white{
background:#fff;border-color:var(--accent);color:var(--accent-deep);
box-shadow:0 8px 18px rgba(46,77,97,.14);
}
.hero-btns .btn.on-dark{
background:var(--accent-d);border-color:var(--accent-d);color:#fff;
-webkit-backdrop-filter:none;backdrop-filter:none;
box-shadow:0 8px 18px rgba(61,156,203,.28);
}
/* 帯の外にはみ出す装飾は非表示 */
.hero-mark.h{display:none;}
.scroll-sign{display:none;}
}
/* ==========================================================
ハンバーガーメニュー：オーバーレイを画面全体に正しく出す
ヘッダーに backdrop-filter が効いていると、その要素が
position:fixed の子要素の「包含ブロック」になってしまい、
.gnav がヘッダーの高さ（92px）の中に閉じ込められて
メニューが本文の上にはみ出す（背景が透けて読めない）。
メニューを開いている間だけ backdrop-filter を外して回避する。
※ ハンバーガーが出る 1080px 以下だけの指定。PC表示には影響しない
※ .home 付きの指定は、スマホ用の body.home .site-header より
詳細度を上げて確実に打ち消すため
========================================================== */
@media(max-width:1080px){
body.nav-open{overflow:hidden;}
/* ★下層ページ用の3つのセレクタを必ず含めること（2026-08-14 修正）。
body.nav-open .site-header だけでは詳細度が (0,2,1) しかなく、
body.sub-page .site-header.on-light（0,3,1）や
body.sub-page .site-header.on-light.scrolled（0,4,1）に負けます。
負けると backdrop-filter が残り、ヘッダーが position:fixed の
「包含ブロック」になって .gnav がヘッダーの高さの中に閉じ込められ、
メニューを押しても出てこなくなります（実測で高さ108pxしかない状態）。
トップページでは .on-light が付かないため、この不具合は出ませんでした。 */
body.nav-open .site-header,
body.nav-open.home .site-header,
body.sub-page.nav-open .site-header.on-light,
body.sub-page.nav-open .site-header.on-light:not(.scrolled),
body.sub-page.nav-open .site-header.on-light.scrolled{
background:transparent;box-shadow:none;border-bottom-color:transparent;
-webkit-backdrop-filter:none;backdrop-filter:none;
color:var(--ink);
}
/* オーバーレイ（z-index:1100）より前面に出してロゴを見せる */
body.nav-open .brand{position:relative;z-index:1200;color:var(--ink);}
}
/* ==========================================================
スマホ専用：お知らせ（横流れ → 最新3件の固定リスト）
横に流れる表示はスマホだと読み取れないため、
新着3件をその場に固定してコンパクトに並べる。
※ すべて max-width:560px の中だけで完結させること
========================================================== */
@media(max-width:560px){
.news-ticker{flex-wrap:wrap;}
.news-ticker .label{order:1;flex:none;padding:0 14px;gap:8px;}
.news-ticker .label .en{font-size:.86rem;}
.news-ticker .more{order:2;margin-left:auto;border-left:none;padding:9px 14px;font-size:.7rem;}
/* 流れる動きを止めて縦並びのリストにする */
.news-ticker .track-wrap{order:3;flex:0 0 100%;overflow:visible;border-top:1px solid var(--line);}
.news-ticker .track{display:block;width:100%;animation:none;}
.news-ticker .tick{
display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
column-gap:10px;width:100%;padding:9px 14px;
border-right:none;border-bottom:1px solid rgba(46,77,97,.1);
}
.news-ticker .tick.dup{display:none;} /* 横流れ用の複製は出さない */
.news-ticker .tick:nth-child(n+4){display:none;} /* 表示は新着3件まで */
.news-ticker .tick:nth-child(3),
.news-ticker .tick:last-child{border-bottom:none;}
.news-ticker .tick .chip{display:none;} /* TOPICSラベルは省いて詰める */
.news-ticker .tick .date{font-size:.66rem;}
.news-ticker .tick .ttl{
font-size:.78rem;line-height:1.5;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
}
/* ==========================================================
スマホ専用：About Us（写真をコンパクトにして上に詰める）
※ すべて max-width:560px の中だけで完結させること
========================================================== */
@media(max-width:560px){
.about{padding-top:76px;padding-bottom:56px;}
/* 背景の巨大英字は WORKS / AWARD / ACTIVITY / JOURNAL と同じ大きさに揃える */
.about .bg-txt{font-size:clamp(5rem,15vw,13rem);}
.about .grid{gap:24px;}
.about .visual{margin-top:4px;}
.about .visual .ph{border-radius:10px;}
.about .visual .ph img{height:clamp(168px,44vw,200px);}
.about .sec-head{margin-bottom:16px;}
.about-points{margin-top:36px;}
}
/* ==========================================================
スマホ専用：ヘッダーの社名が2行に折り返さないようにする
横幅の狭い端末（〜375px）だと「旭建設株式会社」が
ロゴ＋ハンバーガーに挟まれて改行してしまうため、
画面幅に追従するサイズへ落として必ず1行に収める。
※ すべて max-width:560px の中だけで完結させること
========================================================== */
/* スマホではヘッダーを詰める（2026-08-14）。92px は指で持つ画面には高すぎ、
本文の見える範囲がそのぶん削られるため。採用サイト（assets/recruit/css の
--rc-header-h）とも同じ数字にそろえてある。 */
@media(max-width:768px){
.site-header{height:64px;}
.site-header.scrolled{height:56px;}
.brand .logo-mark{width:34px;height:34px;transform:translateY(2px);}
.brand .name{font-size:1.24rem;}
.brand .tagline{font-size:.44rem;}
/* ハンバーガーもヘッダーに収まる大きさに */
.menu-btn{width:56px;height:56px;}
.menu-btn span{width:26px;margin:4px auto;}
}
@media(max-width:560px){
.brand{min-width:0;}
.brand .brand-txt{min-width:0;}
.brand .name{
white-space:nowrap;
font-size:clamp(1.02rem,5.6vw,1.32rem);letter-spacing:.06em;
}
.brand .tagline{white-space:nowrap;font-size:.44rem;letter-spacing:.15em;}
}
/* ==========================================================================
スマホ専用の調整（2026-08-14）
--------------------------------------------------------------------------
★ここに書いたものは、パソコン版には一切効きません。
以前これらを全幅に書いてしまい、パソコン版の見た目まで変えてしまいました。
同じ間違いを繰り返さないよう、スマホ向けの指示はこの節にまとめます。
★指示の内容
・読み込み画面の英字社名を大きく（点で描くので小さいと潰れる）
・キャッチの書体を本文と同じ Noto Sans JP に
・施工実績／受賞実績の1件あたりを低く（文字も合わせて小さく）
・活動報告／社員ブログのカードの白い面を、1行タイトルのカードと同じ高さまで
========================================================================== */
@media(max-width:768px){
/* --- 読み込み画面：英字社名を一回り大きく --- */
#loader .mark__a{ font-size:clamp(21px,6.4vw,74px); }
/* --- キャッチの書体を本文（.pt-body）と同じにそろえる --- */
.about .catch,
.award .txt .catch,
.works .txt .catch,
.people .catch{ font-family:var(--ff-base); }
/* --- 受賞実績：1件を低く。字面も一段小さくして釣り合いを取る --- */
.award-list li a{ gap:clamp(14px,3.6vw,24px); padding:11px clamp(14px,3.6vw,20px); }
.award-list li a:hover{ padding-left:calc(clamp(14px,3.6vw,20px) + 10px); }
.award-list .year{ font-size:1.12rem; }
.award-list .ttl{ font-size:.9rem; line-height:1.6; letter-spacing:.05em; }
.award-list .by{ font-size:.72rem; margin-top:2px; }
/* --- 施工実績：写真も一緒に小さくしないと、写真の高さで行が決まってしまう --- */
.works-list.has-thumb li a{ gap:clamp(10px,2.6vw,16px); padding:8px clamp(14px,3.6vw,20px); }
.works-list.has-thumb li a:hover{ padding-left:calc(clamp(14px,3.6vw,20px) + 10px); }
.works-list.has-thumb .ph{ width:clamp(68px,17vw,92px); }
.works-list .cat{ width:7.6em; font-size:.72rem; }
.works-list .ttl{ font-size:.9rem; }
/* --- 活動報告／社員ブログのカード ---
白い面は「1行ぶん」に詰めたうえで、全カードで同じ高さにそろえます。
★min-height ではなく height（＝固定）にするのが要点です。
min-height だと、見出しが2行の記事だけ背が伸びて不揃いになります。
height で1行ぶんに固定し、はみ出す見出しは1行で切ります（…で省略）。 */
.cv-stage.is-ready > .act-card{ height:auto; }
.cv-stage.is-ready .act-card .body{ flex:0 0 auto; }
/* ★高さは em ではなく px で決めること。
em はその要素の font-size 基準なので、カルーセル（.93rem）と
グリッド（.86rem）で高さが変わり、16px〜25px とバラバラになりました。
px で固定すれば、どの並び方でも同じ高さになります。 */
.cv-stage.is-ready .act-card h3,
.act-card h3,
.cv-stage.is-ready .blog-card h3,
.blog-card h3{
height:24px; min-height:0; line-height:24px;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
}
/* ★カテゴリのタグ（.chip）が無い記事だけ、カードが55px低くなっていました。
タグが付いていないときは、同じ大きさの空きを代わりに置いてそろえます。
55px の内訳 … タグ本体 27px ＋ 上の余白 10px ＋ 下の余白 18px。 */
.blog-card:not(:has(.chip))::after,
.act-card:not(:has(.chip))::after{
content:""; display:block; height:27px; margin:10px 15px 18px;
}
/* --- 受賞実績／施工実績：1件ごとの高さをそろえる ---
見出しが長い件だけ2行になって行の高さが変わっていたので、1行で切ります。
件名は続きをタップすれば全文が読めるので、一覧では1行で足ります。 */
.award-list .ttl,
.works-list .ttl{
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
}
.award-list .by{
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
}
/* 工種のラベルも2行になることがあるので、1行に固定して高さを合わせる */
.works-list .cat{
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
}
}
/* ==========================================================================
スマホ専用：施工実績の一覧ページ（/works/）を読める形にする（2026-08-14）
--------------------------------------------------------------------------
もとは「写真・発注者・工種・工事名」を横1行に詰めていました。
スマホでは幅が足りず、いちばん読みたい工事名が「…」で切れていました
（実測：工事名の枠が257pxしかなく、発注者が3行に折れて縦にも膨らむ）。
写真を左のサムネイルに固定し、右側に「工事名 → 工種 → 発注者」を縦に積みます。
★HTMLの並び順は 写真→発注者→工種→工事名 です。順番を入れ替えたいので
グリッドの領域名（grid-template-areas）で置き場所を決めています。
HTMLは触っていません（パソコン版の並びを変えないため）。
★トップページの一覧（.works .works-list）はこの指定の対象外です。
あちらは1行で高さをそろえる形のままにします。
========================================================================== */
@media (max-width:768px){
.works-year-list .works-list.has-thumb li a{
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-areas:
"ph ttl"
"ph cat"
"ph client";
align-items:start; align-content:center;
column-gap:12px; row-gap:3px;
padding:10px clamp(14px,3.6vw,18px);
}
.works-year-list .works-list.has-thumb li a:hover{ padding-left:clamp(14px,3.6vw,18px); }
.works-year-list .works-list .ph{ grid-area:ph; width:84px; align-self:center; }
.works-year-list .works-list .info{ grid-area:ttl; min-width:0; }
.works-year-list .works-list .cat{ grid-area:cat; width:auto; font-size:.7rem; }
.works-year-list .works-list .client{
grid-area:client; width:auto; font-size:.68rem; line-height:1.5; color:var(--text-dim);
}
/* 工事名はいちばん読みたいところなので、2行まで見せます */
.works-year-list .works-list .ttl{
font-size:.88rem; line-height:1.5; -webkit-line-clamp:2;
}
}
/* ==========================================================================
スマホ専用：受賞実績の一覧ページ（/award/）を施工実績一覧と同じ密度にする（2026-08-14）
--------------------------------------------------------------------------
1件あたりの余白が広く、字も大きいため、スマホでは1画面に2〜3件しか入らず
一覧として見渡せませんでした。施工実績一覧（上のブロック）と同じ考え方で、
余白・文字サイズを一段落として1件をコンパクトにします。
★すべて .award-groups（受賞実績一覧ページだけに付く親）で囲っています。
.ay-year / .ay-items は施工実績一覧ページ（.works-year-list）と共有の
クラスなので、囲わないと施工実績側の年見出しまで小さくなってしまいます。
★パソコン版（769px以上）はこのブロックの外なので、一切変わりません。
========================================================================== */
@media (max-width:768px){
/* 「工事関連表彰／その他の表彰」の見出し。区切りとして分かればよいので控えめに */
.award-groups{ gap:28px; }
.award-groups .award-col-ttl{
font-size:1.05rem; letter-spacing:.06em;
margin-bottom:12px; padding-bottom:8px;
}
.award-groups .award-col-ttl::before{ width:6px; height:16px; }
/* 年のかたまり同士の間隔 */
.award-groups .ay-group{ margin-bottom:20px; }
/* 年の数字。パソコン版ほど大きくしなくても年の切れ目は分かります */
.award-groups .ay-year{
font-size:1.3rem; margin-bottom:4px; padding-bottom:6px;
}
/* 1件ぶんの行。上下の余白と行間を詰めます */
.award-groups .ay-items li a{
align-items:flex-start; gap:10px;
padding:9px 2px 9px 4px;
}
/* タップ時に左へずれると読みにくいので、押し込みの動きは止めます */
.award-groups .ay-items li a:hover{ background:none; padding-left:4px; }
.award-groups .ay-mon{
min-width:34px; font-size:.78rem; line-height:1.5; padding-top:1px;
}
/* 表彰名はいちばん読みたいところなので、2行まで見せます */
.award-groups .ay-info .ttl{
font-size:.86rem; line-height:1.5; letter-spacing:.02em;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
/* 表彰した団体名は補足なので一段小さく、1行で切ります */
.award-groups .ay-info .by{
font-size:.68rem; line-height:1.5; margin-top:2px;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
}
.award-groups .ay-items .arw{ top:0; font-size:.82rem; line-height:1.5; padding-top:1px; }
}