/* ============================================================
   株式会社九州テクノサービス  コーポレートサイト
   ベース案：案A（濃紺ヒーロー）
   ============================================================ */

:root{
  --navy:#0a2c5c;
  --navy-2:#123f7d;
  --blue:#1667d6;
  --blue-light:#3b8bf0;
  --sky:#eaf3fd;
  --gray:#f5f7fa;
  --line:#e2e8f0;
  --text:#1f2937;
  --text-sub:#5b6675;
  --white:#fff;
  --radius:10px;
  --radius-lg:14px;          /* 経営理念・採用リードなど大きな面 */
  --shadow:0 4px 18px rgba(16,42,80,.08);
  --container:1160px;

  /* --- 文字サイズ ---
     役割ごとに9段階だけを使い、.95/.98/1.05rem のような中間の刻みは作らない。 */
  --fs-2xs:.72rem;           /* 日付・タグ・コピーライト */
  --fs-xs:.8rem;             /* 英字ラベル・注記 */
  --fs-sm:.88rem;            /* 補助文・キャプション */
  --fs-md:1rem;              /* 本文 */
  --fs-lg:1.2rem;            /* 小見出し */
  --fs-xl:1.35rem;           /* 電話番号・強調 */
  --fs-2xl:1.6rem;           /* 中見出し */
  --fs-3xl:2.1rem;           /* セクション見出し・ページ見出し */
  --fs-4xl:2.5rem;           /* ヒーロー内の従属見出し */
  --fs-hero:4.2rem;          /* ヒーロー見出し */
  --fs-hero-md:3.6rem;       /* 同・タブレット */
  --fs-hero-sm:3rem;         /* 同・スマートフォン */

  /* --- 余白の段階 ---
     padding / margin / gap には次の値だけを使う（すべて4pxの倍数）。
     4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 56 / 64 / 72 / 80 / 96
     1〜3px は罫線・下線の位置調整に限る。18px や 22px のような
     中間の値を足すと、同じ役割の余白が場所ごとにズレていく。 */

  /* --- ボタン UI ガイド（Primary=コーポレートブルー） --- */
  --primary:#0d47a1;         /* Primary  */
  --primary-hover:#1a5fc4;   /* Hover：やや明るいブルー */
  --primary-active:#0a2f6b;  /* Active：濃紺 */
  --btn-light:#e8f1ff;       /* Light Blue */
  --btn-light-2:#d6e6ff;     /* Light Blue（濃いめ／hover用） */
  --btn-bg:#f3f6fa;          /* Background */
  --btn-border:#e5e7eb;      /* Border */
  --btn-outline:#bcd3f2;     /* アウトライン枠 */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{
  scroll-behavior:smooth;scroll-padding-top:96px;
  color-scheme:light;                     /* 端末のダークモードで配色が勝手に反転するのを防ぐ */
  /* iOS でページの端を引っ張ったとき、本文の外側に見える色。
     ヒーローの背景ともフッターとも同じ紺にしておくと、上下どちらで
     引っ張っても地の色がつながって見える。 */
  background:var(--navy);
}
body{
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  color:var(--text);
  line-height:1.75;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;transition:color .2s,background .2s,opacity .2s;}
ul{list-style:none;}

/* タップ時の反応を速く、既定の青いハイライトは自前の状態表現に任せる */
a,button,summary,[role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(13,71,161,.12);
}

/* 見出しは語の途中で不自然に折れないように */
h1,h2,h3{text-wrap:balance;}

/* 電話番号は桁幅を揃える */
.header__tel a,.contact__tel,.recruit-cta__tel{font-variant-numeric:tabular-nums;}

.container{width:min(92%,var(--container));margin-inline:auto;}

/* 長い URL・メールアドレス・型番などで横スクロールが出ないように */
p,li,td,th,dd{overflow-wrap:break-word;}
.work__body,.wcard__body,.contact__block>div{min-width:0;}

/* ============================================================
   フォーカス表示（キーボード操作時のみ）
   ブラウザ既定の細い枠は濃紺背景の上で見えなくなるため、
   全ての操作要素に共通のリングを敷く。
   ============================================================ */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--primary);
  outline-offset:3px;
  border-radius:4px;
}
/* 濃色背景の上（ヒーロー・採用バナー・フッター・ローダー）は白のリング */
.hero :focus-visible,
.recruit :focus-visible,
.page-hero :focus-visible,
.recruit-cta :focus-visible,
.footer :focus-visible{
  outline-color:#fff;
}

/* 本文へスキップ（キーボード／スクリーンリーダー用） */
.skip-link{
  position:absolute;left:16px;top:-100px;z-index:9999;
  background:var(--primary);color:#fff;font-weight:700;font-size:var(--fs-sm);
  padding:12px 24px;border-radius:0 0 var(--radius) var(--radius);
  transition:top .2s;
}
.skip-link:focus{top:0;}

/* 画面には出さないが、読み上げと検索エンジンには届くテキスト。
   display:none や visibility:hidden だと読み上げからも消えてしまう。 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================
   ボタン（UIボタン&コンポーネントデザイン準拠）
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-weight:700;font-size:var(--fs-md);line-height:1.2;letter-spacing:.02em;
  border-radius:var(--radius);padding:16px 24px;
  cursor:pointer;border:1.5px solid transparent;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .15s;
}
.btn__ico{font-size:1.05em;line-height:1;}
.btn__arrow{margin-left:auto;font-size:1.15em;line-height:1;transition:transform .2s;}
.btn:hover .btn__arrow{transform:translateX(3px);}

/* ① プライマリー（塗り） */
.btn--primary,.btn--contact{
  background:var(--primary);color:#fff;
  box-shadow:0 6px 16px rgba(13,71,161,.28);
}
.btn--primary:hover,.btn--contact:hover{
  background:var(--primary-hover);box-shadow:0 8px 22px rgba(13,71,161,.34);transform:translateY(-2px);
}
.btn--primary:active,.btn--contact:active{
  background:var(--primary-active);box-shadow:0 3px 10px rgba(13,71,161,.30);transform:translateY(0);
}
/* Instagram公式ボタン。ブランドのグラデーションで一目で分かるようにする。 */
.btn--instagram{
  background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);
  color:#fff;box-shadow:0 6px 16px rgba(204,35,102,.28);margin-top:12px;
}
.btn--instagram:hover{box-shadow:0 8px 22px rgba(204,35,102,.34);transform:translateY(-2px);color:#fff;}
.btn--instagram:active{box-shadow:0 3px 10px rgba(204,35,102,.30);transform:translateY(0);}

/* ② セカンダリー（アウトライン） */
.btn--outline{
  background:#fff;color:var(--primary);border-color:var(--btn-outline);
  box-shadow:0 2px 8px rgba(13,71,161,.08);
}
.btn--outline:hover{background:var(--btn-light);border-color:var(--primary);}
.btn--outline:active{background:var(--btn-light-2);border-color:var(--primary-active);color:var(--primary-active);}

/* ③ ゴースト（ミニマル） */
.btn--ghost{background:var(--btn-light);color:var(--primary);border-color:transparent;}
.btn--ghost:hover{background:var(--btn-light-2);}
.btn--ghost:active{background:#c3d9fb;color:var(--primary-active);}

/* 白（濃色背景の上で使用） */
.btn--white{background:#fff;color:var(--primary);box-shadow:0 6px 16px rgba(0,0,0,.18);}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.24);}
.btn--white:active{transform:translateY(0);background:var(--btn-light);}

/* サイズ・幅 */
.btn--lg{padding:16px 32px;}
.btn--sm{padding:12px 16px;font-size:var(--fs-sm);border-radius:8px;}
.btn--block{width:100%;margin-top:auto;}

/* 無効（Disabled） */
.btn:disabled,.btn.is-disabled,.btn[aria-disabled="true"]{
  background:#eef1f6;color:#aab3c0;border-color:var(--btn-border);
  box-shadow:none;cursor:not-allowed;pointer-events:none;transform:none;
}

/* ============================================================
   ヘッダー
   ============================================================ */
.header{
  position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--line);
}
.header__inner{
  width:min(96%,1320px);margin-inline:auto;
  display:flex;align-items:center;gap:24px;
  height:76px;
}
/* ロゴは「マーク＋社名」の組み。社名が読める大きさを確保する（ヘッダー高76pxのうち50px） */
.header__logo img{height:50px;width:auto;}

.gnav{margin-left:auto;}
.gnav__list{display:flex;gap:24px;font-weight:500;font-size:var(--fs-sm);}
.gnav__list a{position:relative;padding:8px 0;color:var(--text);}
.gnav__list a:hover{color:var(--blue);}
.gnav__list a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--blue);transition:width .25s;
}
.gnav__list a:hover::after{width:100%;}

.header__cta{display:flex;align-items:center;gap:16px;}
.header__tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;}
.header__tel a{display:flex;align-items:center;gap:8px;color:var(--navy);font-weight:900;font-size:var(--fs-xl);}
.header__tel-time{font-size:var(--fs-2xs);color:var(--text-sub);white-space:nowrap;}

.hamburger{
  display:none;flex-direction:column;gap:4px;width:34px;height:30px;
  background:none;border:none;cursor:pointer;justify-content:center;
}
.hamburger span{display:block;height:3px;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .3s;}
.hamburger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ============================================================
   共通：写真プレースホルダー（画像未配置時に表示）
   ============================================================ */
.ph{position:relative;background:linear-gradient(135deg,#dfe9f7,#c5d8f0);overflow:hidden;}
.ph::after{
  content:attr(data-ph);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:8px;
  color:#7f97bd;font-weight:700;font-size:var(--fs-xs);letter-spacing:.03em;z-index:0;
}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}

/* ============================================================
   ヒーロー
   ============================================================ */
/* 画像に社名・キャッチコピー・サービス名が焼き込まれているため、上に文字を重ねない。
   画像は切り抜かずに全体を見せる（切ると焼き込みの文字が欠ける）。 */
.hero{
  background:var(--navy);color:#fff;
  /* 動画は画面に貼り付けてあり流れの外にあるので、
     その分だけ本文を下げて、1画面目が動画だけになるようにする。
     svh を知らない古いブラウザ向けに、先に vh で同じ値を置いておく。 */
  padding-top:100vh;
  padding-top:100svh;
  position:relative;
}
.hero__banner img{width:100%;height:auto;display:block;}

/* ヒーロー動画。画面いっぱいに敷き、その上を本文がせり上がって覆っていく。
   position:fixed なので、スクロールしても動画はその場に留まる。
   重なり順はヘッダー（100）より下、本文（1）よりさらに下に置く。 */
.hero__banner{
  position:fixed;inset:0;z-index:0;
  background:var(--navy);overflow:hidden;
}
/* 動画を透かす最後の区画（採用情報）を通り過ぎたら、敷いてある動画を隠す。
   ここから下はお問い合わせ（水色）とフッター（紺）で覆われているので
   見た目は変わらないが、iOS でページ下端を引っ張ったときや、アドレスバーの
   出入りで本文が画面を満たしきらない瞬間に、フッターの下から動画がのぞくのを防げる。
   クラスの付け外しは js/main.js が行う。 */
.hero__banner.is-passed{visibility:hidden;}
.hero__video{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 38%;
}
/* スマホは画面の形が映像（縦向き）に近いので、切り抜きは中央のままでよい。 */
@media (max-width:820px){
  .hero__video{object-position:center;}
}

/* 社名とキャッチコピー。以前は写真に焼き込まれていた文字を、文字として重ねている。
   動画は画面に貼り付けてあるが、この文字は .hero（流れの中にある要素）を基準に
   置いてあるので、スクロールすると一緒に上へ抜けていく。
   1画面目の高さだけの箱を作り、その下端に文字を寄せている。
   重なり順 2 は、下からせり上がる本文の背景（1）より手前に出すため。
   そうしないと、本文が近づいたときに文字が背景に飲まれて暗くなる。 */
.hero__overlay{
  position:absolute;left:0;right:0;top:0;z-index:2;
  height:100vh;
  height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(20px,5vw,64px) clamp(48px,8vh,96px);
  /* 映像の明暗にかかわらず読めるよう、下から濃紺を敷く。
     下端は、続く本文の背景となじむ濃さで止める。 */
  background:linear-gradient(to bottom,
    rgba(10,44,92,0) 55%,
    rgba(10,44,92,.45) 80%,
    rgba(10,44,92,.74) 100%);
  pointer-events:none;   /* 文字だけなので、下の操作を邪魔しない */
}
.hero__title{
  font-size:clamp(1.4rem,4.2vw,3rem);font-weight:900;line-height:1.25;
  letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.hero__title span{display:block;font-size:.5em;font-weight:700;letter-spacing:.18em;margin-bottom:.3em;}
.hero__catch{
  margin-top:clamp(8px,1.4vw,16px);
  font-size:clamp(.85rem,1.9vw,1.35rem);font-weight:700;line-height:1.7;
  color:var(--sky,#cfe6fb);text-shadow:0 2px 10px rgba(0,0,0,.4);
}

/* 動きを控えたい設定のときは、再生せず静止画のままにする（再生停止は js/main.js 側）。 */

/* ヒーロー以降のセクションも、貼り付けた動画より手前に置く。
   指定がないと、下へ進んでも動画が背後に見えたままになる。 */
/* ヒーロー以降の中身は、画面に貼り付けた動画より手前に出す。
   フッターも忘れずに含める。指定がないと、位置指定のない要素は
   動画（位置指定あり）より奥に描かれ、ページ下端で動画が透けて見える。 */
main > section:not(.hero),
.footer{position:relative;z-index:1;}
/* :where() で詳細度を下げ、.page-hero や .contact など
   自前の背景色を持つセクションが上書きできるようにする。 */
main > :where(section:not(.hero)){background:#fff;}
main > section.recruit{background:transparent;}

/* 本文。貼り付けた動画より手前に置き、せり上がって動画に重なる。
   背景は塗りつぶさず半透明にして、後ろの動画をうっすら透かす。
   そのままだと動く映像に文字が紛れるので、背景側だけをぼかして
   （backdrop-filter）落ち着かせたうえで文字を載せている。
   濃さ .74 は、映像の最も明るい箇所（照明）に重なった場合でも
   本文の読みやすさの目安（コントラスト比 4.5）を満たす下限。
   これ以上薄くすると明るい場面で文字が沈む。 */
.hero__inner{
  position:relative;z-index:1;
  width:100%;
}
/* 背景を「色」と「ぼかし」の2層に分ける。
   色は、上の文字の暗がり（.hero__overlay の下端 .74）と同じ濃さの一枚。
   継ぎ目の上下で濃さが揃うので、どこで切り替わったか分からない。
   ぼかしは色と同じ層に入れると濃さごと薄まってしまうため、別の層にして
   継ぎ目から 140px かけて効き始めさせる。一定の濃紺の下で映像の細部が
   だんだん柔らかくなるだけなので、線には見えない。 */
.hero__inner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(10,44,92,.74);
}
.hero__inner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,1) 140px);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,1) 140px);
}
/* ぼかしに対応していないブラウザでは、映像がそのまま透けて文字が読みにくく
   なるため、代わりに濃さを足して読みやすさを確保する。 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero__inner::before{background:rgba(10,44,92,.88);}
}
.hero__inner > *{width:min(92%,var(--container));margin-inline:auto;}
.hero__inner{padding:48px 0 56px;}
.hero__desc{font-size:var(--fs-md);color:#cdddf2;line-height:1.9;}

/* 3ポイント（白カード）
   3列に並べると1枚あたりの幅が足りず、長い文言が細かく折り返して読めない。
   横長のカードを縦に3枚積んで、どの幅でも同じ読み順・同じ見え方に揃える。 */
.hero__points{
  display:grid;grid-template-columns:1fr;gap:16px;
  max-width:720px;margin-top:40px;
}
.hero__point{
  background:#fff;border-radius:var(--radius);padding:16px;
  display:flex;align-items:center;gap:12px;color:var(--navy);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.hero__point-ico{
  font-size:var(--fs-xl);width:44px;height:44px;flex:none;border-radius:8px;
  background:var(--sky);display:flex;align-items:center;justify-content:center;
}
.hero__point p{font-weight:700;font-size:var(--fs-sm);line-height:1.35;}

/* ============================================================
   セクション共通
   ============================================================ */
.section{padding:80px 0;}
.section--gray{background:var(--gray);}
.section__head{text-align:center;margin-bottom:48px;}
.section__en{
  display:block;color:var(--blue-light);font-weight:700;letter-spacing:.2em;
  font-size:var(--fs-sm);
}
.section__title{
  font-size:var(--fs-3xl);font-weight:900;color:var(--navy);margin-top:4px;
}
.section__desc{color:var(--text-sub);margin-top:12px;}

/* ---------- 事業内容：横一列をゆっくり流す ---------- */
/* 動かすのは transform だけ。スクロール位置を毎フレーム書き換えると
   そのたびに再描画が走り、間に合わないと前フレームの絵が残って
   カードが二重に見える。transform は合成処理だけで済むので起きない。
   そのぶん端末標準の横スクロールは使えないので、指・マウス・
   トラックパッドの操作は js/main.js が受け取って移動量に反映する。 */
.service-viewport{
  /* 既定は手で送れる横スクロール。JS が複製を作れたら流す方式に切り替える。
     JS が動かない環境でも、指やトラックパッドで8件すべて見られる。 */
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--btn-outline) var(--btn-bg);
}
.service-viewport::-webkit-scrollbar{height:8px;}
.service-viewport::-webkit-scrollbar-track{background:var(--btn-bg);border-radius:4px;}
.service-viewport::-webkit-scrollbar-thumb{background:var(--btn-outline);border-radius:4px;}

/* 流す方式に切り替わったあと。終わりが無いのでスクロールバーは出さない。 */
.service-viewport.is-ready{
  overflow:hidden;
  touch-action:pan-y;   /* 縦のページ送りは端末に任せ、横だけ自前で扱う */
  cursor:grab;
}
.service-viewport.is-ready::-webkit-scrollbar{display:none;}
.service-viewport.is-dragging{cursor:grabbing;user-select:none;}

.service-row{
  display:flex;gap:24px;width:max-content;
  padding:8px 0 24px;   /* 上下はカードの影の逃げ */
}
.service-viewport.is-ready .service-row{will-change:transform;}
.service-row > .service-card{flex:0 0 250px;}
/* 4枚がちょうど収まる幅にすると「まだ続きがある」ことが伝わらないため、
   5枚目が少し覗く幅にしてある。 */
.service-row > .service-card{flex:0 0 250px;}
/* 横に送っている最中、静止したポインタの下をカードが通るたびに浮き上がると、
   1枚ずつ跳ねて動きが乱れて見える。ここのカードはリンクではないので浮きは無くす。 */
.service-row > .service-card:hover{transform:none;box-shadow:inset 0 0 0 1px var(--line),var(--shadow);}

/* 枠線は border ではなく内側の影で描く。
   border + overflow:hidden は、要素が小数ピクセル位置に来たときに
   枠線と切り抜きの丸め方がズレ、角で画像が枠から数px はみ出すことがある。
   内側の影なら中身の上に重ねて描かれるので、この食い違いが起きない。 */
.service-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);
  transition:transform .25s,box-shadow .25s;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px var(--line),0 12px 30px rgba(16,42,80,.15);
}
/* 画像自体にも角丸を持たせ、親の切り抜きに頼りきらないようにする */
.service-card__img{aspect-ratio:16/10;border-radius:var(--radius) var(--radius) 0 0;}
.service-card__foot{
  display:flex;align-items:center;gap:12px;padding:16px;
  font-weight:700;color:var(--navy);
}
.service-card__ico{
  font-size:var(--fs-lg);width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--sky);display:flex;align-items:center;justify-content:center;
}

/* ---------- カードをタップして詳細を開く ---------- */
/* カード全体を押せるようにするため中身を button で包んでいる。
   見た目は元のカードのままにしたいので、ボタン既定の枠・背景・
   文字設定だけを打ち消す。 */
.service-card__btn{
  display:block;width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.service-card__btn:focus-visible{outline:3px solid var(--blue-light);outline-offset:-3px;}
/* 押せることが伝わるよう、画像の右上に「＋」を置く */
.service-card__badge{
  position:absolute;top:8px;right:8px;z-index:2;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(16,42,80,.2);
  transition:background .25s,color .25s;
}
.service-card__badge svg{width:16px;height:16px;display:block;}
.service-card__btn:hover .service-card__badge,
.service-card__btn:focus-visible .service-card__badge{background:var(--primary);color:#fff;}

/* ============================================================
   3カラム（実績／会社概要／代表メッセージ）
   ============================================================ */
.three-col{
  display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:24px;align-items:stretch;
}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:24px;
}
.panel__head h3{font-size:var(--fs-xl);color:var(--navy);font-weight:900;}
.panel__link{color:var(--blue);font-size:var(--fs-sm);font-weight:700;}
.panel__link:hover{text-decoration:underline;}

.works{display:flex;flex-direction:column;gap:16px;}
.work{display:flex;gap:16px;}
.work__img{width:120px;flex:none;aspect-ratio:4/3;border-radius:8px;}
.work__img.ph::after{font-size:var(--fs-2xs);}
.work__tag{
  display:inline-block;background:var(--blue);color:#fff;font-size:var(--fs-2xs);font-weight:700;
  padding:2px 8px;border-radius:4px;margin-bottom:4px;
}
.work__title{font-weight:700;font-size:var(--fs-md);color:var(--navy);}
.work__text{font-size:var(--fs-xs);color:var(--text-sub);margin-top:4px;}
.work__date{font-size:var(--fs-2xs);color:#9aa6b5;}

/* 会社概要テーブル */
.company-table{width:100%;border-collapse:collapse;margin-bottom:24px;font-size:var(--fs-sm);}
.company-table th,.company-table td{
  text-align:left;padding:12px 4px;border-bottom:1px solid var(--line);vertical-align:top;
}
.company-table th{color:var(--text-sub);font-weight:700;white-space:nowrap;width:34%;}
.company-table td .sub{display:block;color:var(--text-sub);font-size:var(--fs-xs);margin-top:2px;}

/* 代表メッセージ */
.message{display:flex;flex-direction:column;height:100%;}
.message__top{display:flex;gap:16px;align-items:center;margin-bottom:16px;}
.message__photo{width:74px;height:74px;flex:none;border-radius:50%;}
.message__photo.ph::after{font-size:0;}
.message__catch{font-weight:900;color:var(--navy);font-size:var(--fs-md);line-height:1.5;}
.message__text{font-size:var(--fs-sm);color:var(--text-sub);margin-bottom:24px;}

/* ============================================================
   採用バナー
   ============================================================ */
.recruit{position:relative;overflow:hidden;color:#fff;background:var(--navy);}
/* 背景写真（全面カバー）
   z-index:0 を必ず付ける。付けないと、中の img が持つ z-index:1（.ph img 由来）が
   この階層を突き抜けて、下の可読性スクリム（::before / z-index:1）と同じ順位になり、
   後に描かれる写真がスクリムの上に乗って文字が読めなくなる。 */
.recruit__bg{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#1c4a86,#0f2c55);}
.recruit__bg::after{color:rgba(255,255,255,.35);font-size:var(--fs-xs);}
.recruit__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* 可読性スクリム（左を濃く→右へ抜ける） */
.recruit::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,26,56,.95) 0%,rgba(10,44,92,.86) 40%,rgba(16,54,110,.55) 70%,rgba(22,103,214,.30) 100%);
}
/* 装飾グロー */
.recruit::after{
  content:"";position:absolute;z-index:1;top:-42%;right:-6%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,139,240,.38),rgba(59,139,240,0) 70%);pointer-events:none;
}
.recruit__inner{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:80px 0;flex-wrap:wrap;
}
.recruit__copy{max-width:600px;}
.recruit__en{
  display:inline-flex;align-items:center;gap:12px;
  letter-spacing:.22em;font-weight:700;font-size:var(--fs-xs);color:var(--blue-light);margin-bottom:16px;
}
.recruit__en::before{content:"";width:30px;height:2px;background:var(--blue-light);border-radius:2px;}
.recruit__copy h2{
  font-size:var(--fs-3xl);font-weight:900;line-height:1.28;letter-spacing:.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.28);
}
.recruit__copy p{margin-top:16px;color:#dbe8f8;font-size:var(--fs-md);line-height:1.9;}
.recruit__tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.recruit__tags li{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);font-weight:700;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.recruit__tags li::before{content:"✓";color:var(--blue-light);font-weight:900;font-size:.9em;}
.recruit__btn{flex:none;}

/* ============================================================
   お問い合わせ・アクセス
   ============================================================ */
.contact{background:var(--sky);padding:64px 0;}
.contact__inner{
  display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;
}
.contact__block{display:flex;gap:16px;align-items:flex-start;}
.contact__block--center{
  flex-direction:column;align-items:center;text-align:center;
  background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);
}
.contact__block h3{color:var(--navy);font-size:var(--fs-md);font-weight:900;margin-bottom:4px;}
.contact__block p{font-size:var(--fs-sm);color:var(--text-sub);}
.contact__tel{font-size:var(--fs-3xl);font-weight:900;color:var(--navy);line-height:1.2;display:inline-flex;align-items:center;gap:8px;}
.contact__tel svg{width:.85em;height:.85em;flex:none;}
.contact__time{font-size:var(--fs-xs);color:var(--text-sub);margin:4px 0 16px;}
.contact__map{color:var(--blue);font-weight:700;font-size:var(--fs-sm);margin-top:8px;display:inline-block;}
.contact__map:hover{text-decoration:underline;}

/* ============================================================
   フッター
   ============================================================ */
.footer{background:var(--navy);color:#fff;padding:40px 0 24px;}
.footer__inner{display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
/* 白ヌキのロゴを使うので、白地に敷き直す必要がなくなった */
.footer__logo img{height:44px;width:auto;}
.footer__nav{display:flex;gap:24px;flex-wrap:wrap;font-size:var(--fs-sm);margin-left:auto;}
.footer__nav a{color:#cdddf2;}
.footer__nav a:hover{color:#fff;}
.footer__copy{
  text-align:center;font-size:var(--fs-xs);color:#9db4d4;margin-top:24px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:16px;
}

/* ---------- ページトップ ---------- */
/* 位置は safe-area を足す。iPhone のホームバーに重なると押しにくい。 */
.pagetop{
  position:fixed;z-index:90;
  right:calc(24px + env(safe-area-inset-right));
  bottom:calc(24px + env(safe-area-inset-bottom));
  width:48px;height:48px;border-radius:50%;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xl);box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:opacity .3s,background .3s,transform .3s;
}
.pagetop.is-show{opacity:1;pointer-events:auto;transform:none;}
.pagetop:hover{background:var(--navy-2);}

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width:1080px){
  .three-col{grid-template-columns:1fr;}
}

@media (max-width:820px){
  .header__inner{height:64px;gap:12px;}
  .header__logo img{height:40px;}
  /* 電話は残す。スマホこそタップして掛ける導線なので、ここで消してしまわない。
     受付時間とフォームボタンはメニュー内・本文側にあるので、幅を優先して省く。 */
  .header__cta{display:flex;margin-left:auto;gap:8px;}
  .header__cta .btn--contact{display:none;}
  .header__tel-time{display:none;}
  .header__tel a{font-size:var(--fs-md);gap:6px;}
  /* 閉じている間は visibility:hidden にする。max-height:0 だけだと
     隠れているリンクに Tab キーでフォーカスが入り、行方不明になる。 */
  .gnav{
    position:fixed;inset:64px 0 auto 0;background:#fff;margin:0;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .35s ease,visibility 0s linear .35s;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
  }
  .gnav.is-open{max-height:80vh;visibility:visible;transition:max-height .35s ease,visibility 0s;}
  .gnav__list{flex-direction:column;gap:0;padding:8px 0;}
  .gnav__list li{border-bottom:1px solid var(--line);}
  .gnav__list a{display:block;padding:16px 24px;font-size:var(--fs-md);}
  .gnav__list a::after{display:none;}
  .hamburger{display:flex;}   /* 右端寄せは .header__cta の margin-left:auto が担う */

  .hero__inner{padding:32px 0 40px;}
  .hero__points{max-width:none;margin-top:32px;}
  .recruit__inner{padding:56px 0;flex-direction:column;align-items:flex-start;gap:24px;}
  .recruit__copy h2{font-size:var(--fs-2xl);}
  .recruit::after{width:340px;height:340px;top:-24%;}

  .section{padding:56px 0;}
  .section__title{font-size:var(--fs-2xl);}
  .service-row{gap:16px;}
  /* 220px だと2枚がちょうど収まってしまい、続きがあることが伝わらない。
     3枚目が20px 覗き、かつラベルが1行に収まる幅として 204px にしている。 */
  .service-row > .service-card{flex-basis:204px;}
  /* 1枚が220pxになると「貯湯槽・業務用タンク」が不自然な位置で
     折り返すため、ラベルだけ一段小さくして1行に収める。 */
  .service-card__foot{font-size:var(--fs-sm);gap:8px;padding:16px 12px;}
  .service-card__ico{width:30px;height:30px;}

  .contact__inner{grid-template-columns:1fr;gap:24px;}
  .contact__block{justify-content:center;}
  .footer__nav{margin:0;justify-content:center;}
  .footer__inner{justify-content:center;text-align:center;}
}

@media (max-width:480px){
  .recruit__copy h2{font-size:var(--fs-2xl);}
  .contact__tel{font-size:var(--fs-2xl);}
}

/* ============================================================
   下層ページ共通（代表挨拶 など）
   ============================================================ */
.page-hero{
  background:linear-gradient(120deg,#071f42,var(--navy) 70%,var(--navy-2));
  color:#fff;padding:56px 0;text-align:center;
}
.page-hero__en{color:var(--blue-light);font-weight:700;letter-spacing:.2em;font-size:var(--fs-sm);}
.page-hero__title{font-size:var(--fs-3xl);font-weight:900;margin-top:8px;}
.page-hero__lead{margin-top:16px;color:#cdddf2;font-size:var(--fs-md);}
/* 実績エリア（施工実績ページのヘッダー内） */
.page-hero__area{
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px;
  margin-top:20px;padding:10px 22px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  color:#e6f0fb;font-size:var(--fs-sm);line-height:1.7;
}
.page-hero__area b{color:var(--blue-light);font-weight:700;letter-spacing:.06em;}

/* 代表挨拶 */
/* 下層ページ共通：ページ末尾の「トップページへ戻る」 */
.greeting__back{text-align:center;margin-top:48px;}

/* ============================================================
   代表挨拶ページ
   ------------------------------------------------------------
   左に写真（代表者＋取扱設備）、右に本文を置いた見開き。
   写真列の右端を斜めに切り落とし、本文側の白へ流し込む。
   ============================================================ */
.message{background:#fff;}
.message__inner{
  display:grid;
  grid-template-columns:minmax(300px,38%) 1fr;
  /* 左右の高さを揃える。本文は長いので、そのままだと写真列の下に
     白い空きが残る。写真列を伸ばして最後まで写真で埋める。 */
  align-items:stretch;
  max-width:1240px;margin-inline:auto;
}

/* --- 左：写真列 --- */
.message__visual{
  position:relative;
  background:var(--navy);
  /* 中身がこの枠より下へ出ないよう切り落とす。
     clip は hidden と違ってスクロールの入れ物を作らないので、
     中の貼り付き（sticky）を壊さずに歯止めだけをかけられる。 */
  overflow:clip;
}
/* 中身を縦に積むのは内側の箱の役目。狭い画面ではここに貼り付きをかける。 */
.message__visual-inner{
  display:flex;flex-direction:column;
  height:100%;
}
.message__portrait{position:relative;margin:0;}
.message__portrait img{width:100%;height:auto;display:block;}

/* 写真列の締めの街並み。高さが余ったぶんは設備写真が引き受けるので、
   ここは元の比率のまま置く。 */
.message__city{flex:none;}
.message__city img{width:100%;height:auto;display:block;}

/* 取扱設備。写真の上に英語＋日本語の名前を重ねる。 */
/* 余った高さを4枚で等分する。写真が足りない高さのときも
   minmax の下限で潰れない。 */
.message__equip{
  list-style:none;display:grid;gap:2px;flex:1;
  grid-auto-rows:minmax(clamp(120px,15vw,190px),1fr);
}
.message__equip-item{position:relative;overflow:hidden;}
.message__equip-item img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* 名前が写真に埋もれないよう、左から濃紺を敷く。 */
.message__equip-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(7,26,56,.72) 0%,rgba(7,26,56,.30) 55%,rgba(7,26,56,.05) 100%);
}
.message__equip-label{
  position:absolute;left:clamp(16px,2.2vw,28px);bottom:clamp(14px,2vw,22px);z-index:1;
  color:#fff;line-height:1.25;
}
.message__equip-label b{
  display:block;font-weight:700;letter-spacing:.06em;
  font-size:clamp(.95rem,1.5vw,1.4rem);
}
.message__equip-label{font-size:var(--fs-sm);font-weight:500;}

/* --- 右：本文 --- */
.message__body{
  padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px) clamp(56px,6vw,88px);
}
.message__head{margin-bottom:clamp(28px,3.4vw,44px);}
.message__title{
  font-family:"Noto Serif JP",serif;font-weight:700;
  color:var(--navy);letter-spacing:.08em;line-height:1.2;
  font-size:clamp(2.1rem,4.6vw,3.4rem);
}
.message__lead{
  font-family:"Noto Serif JP",serif;font-weight:600;
  /* 見出しの下に置く一行。金色にして、濃紺の見出しと差をつける。 */
  color:#a9853f;
  margin-top:clamp(12px,1.6vw,20px);
  font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.65;letter-spacing:.04em;
}
.message__head::after{
  content:"";display:block;height:1px;background:var(--line);
  margin-top:clamp(20px,2.6vw,32px);
}
.message__text p{
  margin-bottom:1.25em;font-size:var(--fs-md);line-height:2.05;color:var(--text);
}
.message__text p:last-child{margin-bottom:0;}
.message__sign{
  margin-top:clamp(32px,4vw,52px);text-align:right;
  font-family:"Noto Serif JP",serif;font-weight:600;
  color:var(--navy);line-height:1.9;font-size:var(--fs-lg);letter-spacing:.06em;
}
.message__back{margin-top:clamp(36px,4.5vw,56px);text-align:center;}

/* 画面が狭くても、デザイン原本と同じ見開き（左＝写真／右＝本文）のまま。
   上下に積み替えると原本の印象が変わってしまうため、
   代わりに写真列を細くし、本文まわりの余白を詰めて幅を確保する。 */
@media (max-width:900px){
  .message__inner{grid-template-columns:minmax(0,30%) 1fr;}
  /* 本文がずっと長いので、そのまま伸ばすと設備写真が縦の糸のようになる。
     内側の箱を画面の高さぶんだけ持たせて貼り付け、スクロール中も
     原本と同じ比率のまま見え続けるようにする。
     外側は升目いっぱいのままなので、下の段へはみ出すことがない。
     ヘッダー（高さ65px・貼り付き）の下から始める。 */
  .message__visual-inner{
    position:sticky;top:65px;
    height:calc(100vh - 65px);
    height:calc(100svh - 65px);
    /* 画面がとても縦長な場合でも、外側の枠より高くならないようにする。
       上の切り落としと合わせて、はみ出しの逃げ道をなくしている。 */
    max-height:100%;
  }
  .message__portrait,
  .message__city{flex:none;}
  .message__body{
    padding:clamp(24px,4.2vw,40px) clamp(14px,3vw,28px) clamp(36px,5vw,56px);
  }
  .message__text p{font-size:var(--fs-sm);line-height:1.95;}
  .message__equip-label b{font-size:clamp(.62rem,2vw,.9rem);letter-spacing:.03em;}
  .message__equip-label{font-size:clamp(.6rem,1.8vw,.8rem);}
  .message__equip-label{left:clamp(8px,1.6vw,16px);bottom:clamp(8px,1.6vw,14px);}
  .message__lead-br{display:none;}
}
/* さらに狭い画面。写真列をもう一段細くして、本文の1行の長さを保つ。 */
@media (max-width:560px){
  .message__inner{grid-template-columns:minmax(0,26%) 1fr;}
  .message__body{padding:20px 12px 32px;}
  .message__title{font-size:clamp(1.5rem,7vw,2.1rem);}
  .message__lead{font-size:clamp(.8rem,3.4vw,1rem);}
  .message__text p{margin-bottom:1.15em;}
  .message__sign{font-size:var(--fs-md);}
  /* 細い帯に英字が収まらないので、日本語だけにする */
  .message__equip-label b{display:none;}
  .message__equip-label{font-size:clamp(.6rem,2.6vw,.78rem);font-weight:700;}
}

@media(max-width:640px){
  .page-hero__title{font-size:var(--fs-2xl);}
  /* 折り返すとピル型の角丸が崩れるため、角丸を小さくする。画面端に接しないよう左右に余白を残す */
  .page-hero__area{max-width:calc(100% - 40px);padding:12px 18px;border-radius:14px;font-size:var(--fs-xs);}
}

/* ============================================================
   ローディング画面
   ・バーは実際の読み込み状況を示す（一定速度で流れる見せかけにしない）
   ・同一セッションの2ページ目以降は出さない（js/main.js で制御）
   ・TOP（index.html）だけは、この下のスプラッシュが代わりに出る
   ============================================================ */

/* 表示中は背後がスクロールしないように固定する。
   scrollbar-gutter を添えないと、スクロールバーが消えた分だけ
   本文が横にずれ、ローダーが消えた瞬間に画面が跳ねて見える。 */
html.is-loading{overflow:hidden;scrollbar-gutter:stable;}

.loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 8%,rgba(59,139,240,.20),rgba(59,139,240,0) 62%),
    linear-gradient(125deg,#071f42 0%,var(--navy) 55%,var(--navy-2) 100%);
  transition:opacity .45s ease,visibility .45s ease;
}
.loader.is-hidden{opacity:0;visibility:hidden;}

.loader__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;
}
/* 白ヌキのロゴをそのまま濃紺の上に置く。
   ロゴに社名が入っているので、社名テキストは重ねて出さない。 */
.loader__logo img{height:72px;width:auto;display:block;}
.loader__tagline{
  color:#9db4d4;font-size:var(--fs-xs);letter-spacing:.06em;margin-top:24px;
}
/* 進捗バー：--progress（0〜1）を JS が書き換える */
.loader__bar{
  width:180px;height:2px;border-radius:2px;margin-top:32px;
  background:rgba(255,255,255,.16);overflow:hidden;
}
.loader__bar span{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  transform:scaleX(var(--progress,.06));transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.16,.8,.3,1);
}

/* 立ち上がりは下から静かに。拡大縮小のポップは使わない。 */
.loader__logo,.loader__tagline,.loader__bar{
  animation:loaderIn .5s cubic-bezier(.16,.8,.3,1) both;
}
.loader__tagline{animation-delay:.08s;}
.loader__bar{animation-delay:.16s;}
@keyframes loaderIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .loader__logo,.loader__tagline,.loader__bar{animation:none;}
  .loader__bar span{transition:none;}
}

/* ============================================================
   オープニング（スプラッシュ）／TOPのみ
   ------------------------------------------------------------
   濃紺の全面に、ロゴの輪郭を文字ごとに1本ずつ描き、
   描き終わりを追いかけて塗りが乗る。全部そろったら退場する。

   進み方（js/main.js が時計を持つ）
     0.0s  1文字目を描き始める（以後 0.18 秒ずつ遅れて次の文字へ）
     0.8s  1文字目に塗りが乗る（以後 0.15 秒ずつ遅れて次の文字へ）
     2.8s  最後の文字が描き終わる／3.0s すべて塗り終わる
     4.0s  左上のヘッダーロゴの位置・大きさへ寄っていく（1.05秒）。
           同時に濃紺の幕が引いて（0.8秒）本編が見えてくる
     5.05s ヘッダーロゴにぴたりと重なったところで幕を外す
   ============================================================ */
.splash{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:#071f42;
}
.splash.is-hidden{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease;}

.splash__wrap{width:min(74vw,600px);will-change:transform;}

/* 退場：左上のヘッダーロゴの位置・大きさへ寄っていき、そのまま重なる。
   寄せ先は画面幅やヘッダーの高さで変わるため CSS には書けない。
   js/main.js が両方の絵柄を実測して --fly-* に入れる。
   基点を左上にしているのは、絵柄の左上どうしを合わせる計算だから。 */
.splash__wrap.is-fly{
  transform-origin:top left;
  transform:translate(var(--fly-x,0),var(--fly-y,0)) scale(var(--fly-scale,1));
  transition:transform 1.05s cubic-bezier(.55,0,.18,1);
}
/* 寄っていく間に濃紺の幕が引き、着いたころには本編が見えている。
   幕が透ける間はもう操作の邪魔をしない。 */
.splash.is-revealing{
  background-color:transparent;pointer-events:none;
  transition:background-color .8s ease;
}
/* ヘッダーロゴが見当たらないとき（と動きを控える設定のとき）の逃げ道。
   寄せ先が測れないので、その場で静かに消える。 */
.splash__wrap.is-out{opacity:0;transition:opacity .5s ease;}
.splash__logo{width:100%;height:auto;display:block;}

/* 描く前の状態。線の長さ（--len）は経路ごとに違うので js/main.js が測って入れる。
   測る前に線が出てしまわないよう、初期値は十分大きい値にしてある。 */
.sp-elem{
  fill:transparent;stroke:#019be6;stroke-width:1.4;stroke-miterlimit:10;
  stroke-dasharray:var(--len,4000);stroke-dashoffset:var(--len,4000);
}
/* 動きは is-ready を付けてから効かせる。長さを入れる時点で効いていると、
   その入れ替え自体がアニメーションになって線が一瞬ちらつく。 */
.splash__logo.is-ready .sp-elem{
  transition:
    stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) var(--draw-delay,0s),
    fill .7s cubic-bezier(.47,0,.745,.715) var(--fill-delay,.8s);
}
.splash__logo.is-active .sp-elem{stroke-dashoffset:0;fill:#019be6;}

/* 描く順番と時間差。左から順に、ロゴマーク→社名。 */
.sp-elem-1 {--draw-delay:0s;    --fill-delay:.8s;}
.sp-elem-2 {--draw-delay:.18s;  --fill-delay:.95s;}
.sp-elem-3 {--draw-delay:.36s;  --fill-delay:1.1s;}
.sp-elem-4 {--draw-delay:.54s;  --fill-delay:1.25s;}
.sp-elem-5 {--draw-delay:.72s;  --fill-delay:1.4s;}
.sp-elem-6 {--draw-delay:.9s;   --fill-delay:1.55s;}
.sp-elem-7 {--draw-delay:1.08s; --fill-delay:1.7s;}
.sp-elem-8 {--draw-delay:1.26s; --fill-delay:1.85s;}
.sp-elem-9 {--draw-delay:1.44s; --fill-delay:2s;}
.sp-elem-10{--draw-delay:1.62s; --fill-delay:2.15s;}
.sp-elem-11{--draw-delay:1.8s;  --fill-delay:2.3s;}

/* 動きを控えたい設定のときは、描かずに塗った状態で静かに出す。
   退場も寄せずに、その場で静かに消す（寄せる処理は js 側で止めている）。 */
@media (prefers-reduced-motion:reduce){
  .splash__logo.is-ready .sp-elem{transition:fill .01s;}
  .sp-elem{stroke-dashoffset:0;}
  .splash__wrap.is-fly{transform:none;transition:opacity .4s ease;opacity:0;}
}

/* ============================================================
   会社案内ページ
   ============================================================ */
.company-page{padding:72px 0;}
.company-sec{max-width:920px;margin:0 auto 64px;}
.company-sec:last-child{margin-bottom:0;}
.sec-title2{text-align:center;margin-bottom:40px;}
.sec-title2 span{
  display:block;color:var(--blue-light);font-weight:700;letter-spacing:.2em;font-size:var(--fs-xs);margin-bottom:4px;
}
.sec-title2 h2{font-size:var(--fs-2xl);color:var(--navy);font-weight:900;}

/* 経営理念 */
.philosophy{
  background:var(--sky);border-radius:var(--radius-lg);padding:48px 32px;text-align:center;
}
.philosophy__lead{
  font-size:var(--fs-2xl);font-weight:900;color:var(--navy);line-height:1.7;
}
.philosophy__note{color:var(--text-sub);margin-top:16px;font-size:var(--fs-md);}
.action-list{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;
}
@media(max-width:900px){
  .action-list{grid-template-columns:repeat(2,1fr);}
  /* 2カラムなら幅に余裕があるので、見出しを本文サイズに戻す */
  .action-item .ttl{font-size:var(--fs-md);}
}
.action-item{
  background:#fff;border-radius:var(--radius);padding:24px 16px;box-shadow:var(--shadow);
}
/* 4カラム時は幅が狭いため、見出しが折り返さないよう1段小さくする */
.action-item .ttl{font-weight:900;color:var(--navy);margin-top:8px;font-size:var(--fs-sm);}
.action-item .txt{font-size:var(--fs-xs);color:var(--text-sub);margin-top:4px;}

/* 会社概要テーブル（大） */
.info-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.info-table th,.info-table td{text-align:left;padding:16px 24px;border-bottom:1px solid var(--line);vertical-align:top;font-size:var(--fs-md);}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none;}
.info-table th{background:#f5f8fc;color:var(--navy);font-weight:700;white-space:nowrap;width:200px;}
.info-table td .sub{display:block;color:var(--text-sub);font-size:var(--fs-sm);margin-top:4px;}

/* 会社概要の中の箇条書き（有資格者・主要取引先・指定サービス店）。
   項目数が多いものは、点を打った一覧にして拾い読みしやすくする。 */
.info-list{list-style:none;display:grid;gap:6px;}
.info-list li{position:relative;padding-left:16px;line-height:1.7;}
.info-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--blue);
}
/* 社名など短い項目は2列に並べる。狭い画面では1列に戻す。 */
.info-list--2col{grid-template-columns:repeat(2,1fr);gap:6px 24px;}
.info-list + .sub{margin-top:10px;}
@media (max-width:720px){
  .info-list--2col{grid-template-columns:1fr;}
}

/* 事業内容リスト */
.biz-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.biz-list li{
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px;
  display:flex;align-items:center;gap:12px;font-weight:700;color:var(--navy);box-shadow:var(--shadow);
}
.biz-list li .ico{width:34px;height:34px;}

/* アクセス */
.access{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
.access__info{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
.access__info dl{display:grid;grid-template-columns:88px 1fr;row-gap:16px;column-gap:12px;}
.access__info dt{color:var(--text-sub);font-weight:700;font-size:var(--fs-sm);}
.access__info dd{font-size:var(--fs-md);}
.access__map{border-radius:var(--radius);overflow:hidden;min-height:320px;border:1px solid var(--line);}
.access__map iframe{width:100%;height:100%;min-height:320px;border:0;display:block;}

@media (max-width:820px){
  .company-page{padding:56px 0;}
  .action-list{grid-template-columns:1fr;}
  .biz-list{grid-template-columns:1fr;}
  .access{grid-template-columns:1fr;}
  .info-table th{width:120px;padding:16px 16px;}
  .info-table td{padding:16px 16px;}
  .philosophy__lead{font-size:var(--fs-lg);}
}

/* スマホでは会社概要の見出しセルを上に重ねる縦積みにする。
   横並びのままだと本文列が狭くなり、数文字ごとに折り返して読みにくい。 */
@media (max-width:600px){
  .info-table tr{display:block;border-bottom:1px solid var(--line);}
  .info-table tr:last-child{border-bottom:none;}
  .info-table th,.info-table td{display:block;width:100%;border-bottom:none;}
  .info-table th{padding:12px 16px 10px;font-size:var(--fs-sm);}
  .info-table td{padding:12px 16px 16px;}
  .info-list{gap:8px;}
  .info-list li{line-height:1.6;}
}

/* ============================================================
   採用情報ページ
   ============================================================ */
/* リード（採用メッセージ） */
.recruit-lead{
  background:var(--sky);border-radius:var(--radius-lg);padding:48px 32px;text-align:center;
}
.recruit-lead__catch{font-size:var(--fs-2xl);font-weight:900;color:var(--navy);line-height:1.7;}
.recruit-lead__text{
  color:var(--text-sub);margin-top:16px;font-size:var(--fs-md);line-height:2;
  max-width:720px;margin-inline:auto;
}

/* 選考の流れ */
.flow{counter-reset:flow;display:flex;flex-direction:column;gap:16px;max-width:720px;margin:0 auto;}
.flow__step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 24px 24px 80px;
}
.flow__step::before{
  counter-increment:flow;content:counter(flow);
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:var(--fs-lg);
}
.flow__step h3{font-size:var(--fs-md);color:var(--navy);font-weight:900;}
.flow__step p{font-size:var(--fs-sm);color:var(--text-sub);margin-top:4px;}
.flow__step:not(:last-child)::after{
  content:"";position:absolute;left:41px;bottom:-16px;width:2px;height:16px;background:var(--line);
}

/* 採用CTA */
.recruit-cta{
  background:linear-gradient(110deg,var(--navy),var(--blue));color:#fff;border-radius:var(--radius-lg);
  padding:48px 32px;text-align:center;
}
.recruit-cta h2{font-size:var(--fs-2xl);font-weight:900;}
.recruit-cta p{color:#dce8f7;margin-top:12px;font-size:var(--fs-md);}
.recruit-cta__actions{
  display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:24px;
}
.recruit-cta__tel{font-size:var(--fs-3xl);font-weight:900;color:#fff;display:inline-flex;align-items:center;gap:8px;}
.recruit-cta__note{font-size:var(--fs-xs);color:#cdddf2;margin-top:4px;}

@media (max-width:640px){
  .recruit-lead{padding:32px 24px;}
  .recruit-lead__catch{font-size:var(--fs-lg);}
  .flow__step{padding:16px 16px 16px 72px;}
  .recruit-cta{padding:40px 24px;}
  .recruit-cta h2{font-size:var(--fs-xl);}
  .recruit-cta__tel{font-size:var(--fs-2xl);}
}

/* ============================================================
   UIパーツ（アイコンボタン／CTAピル／タブ）
   ============================================================ */
/* ---------- アイコンボタン ---------- */
.icon-btn{
  width:52px;height:52px;flex:none;border-radius:var(--radius);
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--primary);border:1.5px solid var(--btn-outline);
  font-size:var(--fs-lg);box-shadow:0 2px 8px rgba(13,71,161,.08);cursor:pointer;
  transition:background .2s,border-color .2s,box-shadow .2s,transform .15s;
}
.icon-btn:hover{background:var(--btn-light);border-color:var(--primary);transform:translateY(-2px);}
.icon-btn:active{background:var(--btn-light-2);transform:translateY(0);}
.icon-btn--primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 6px 16px rgba(13,71,161,.28);}
.icon-btn--primary:hover{background:var(--primary-hover);}
.icon-btn--sm{width:44px;height:44px;border-radius:var(--radius);font-size:var(--fs-lg);}

/* ---------- CTAピル（タグ・ラベルボタン） ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;font-weight:700;font-size:var(--fs-sm);
  background:#fff;color:var(--primary);border:1.5px solid #d5e3f7;
  box-shadow:0 2px 8px rgba(13,71,161,.08);cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s;
}
.pill .ico{font-size:1em;line-height:1;}
.pill:hover{background:var(--btn-light);border-color:var(--primary);transform:translateY(-1px);}
.pill--fill{background:var(--primary);color:#fff;border-color:var(--primary);}
.pill--fill:hover{background:var(--primary-hover);}

/* ---------- ナビゲーションタブ（グローバルナビ想定） ---------- */
.uitabs{
  display:inline-flex;gap:4px;background:#fff;border:1px solid var(--btn-border);
  border-radius:var(--radius);padding:8px;box-shadow:var(--shadow);flex-wrap:wrap;
}
.uitabs a{
  padding:12px 16px;border-radius:8px;font-weight:700;font-size:var(--fs-sm);
  color:var(--text-sub);position:relative;transition:color .2s,background .2s;
}
.uitabs a:hover{color:var(--primary);background:var(--btn-light);}
.uitabs a.is-active{color:var(--primary);}
.uitabs a.is-active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:2px;height:3px;
  border-radius:4px;background:var(--primary);
}

/* ---------- セクション内タブ ---------- */
.sectabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--btn-border);}
.sectabs a{
  padding:12px 16px;font-weight:700;font-size:var(--fs-sm);color:var(--text-sub);
  border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;
}
.sectabs a:hover{color:var(--primary);}
.sectabs a.is-active{color:var(--primary);border-bottom-color:var(--primary);}

/* ============================================================
   ラインSVGアイコン（絵文字からの差し替え）
   ============================================================ */
.hero__point-ico svg,
.service-card__ico svg{display:block;}
.hero__point-ico{color:var(--primary);}
.hero__point-ico svg{width:26px;height:26px;}
.service-card__ico{color:var(--primary);}
.service-card__ico svg{width:20px;height:20px;}

/* ボタン内アイコン */
.btn__ico svg{width:1.2em;height:1.2em;display:block;}
.recruit-cta__tel svg{width:.9em;height:.9em;flex:none;}
.header__tel-icon{display:inline-flex;align-items:center;}
.header__tel-icon svg{width:1em;height:1em;display:block;}

/* 下層ページのアイコン（会社案内・採用情報・お問い合わせ）。
   TOPと同じ「淡い丸地＋線アイコン」に揃える。絵文字はOS・ブラウザで
   字形と色が変わり、同じサイト内で見え方が割れるため使わない。 */
.action-item .ico,
.biz-list li .ico,
.contact__ico{
  flex:none;border-radius:50%;background:var(--sky);color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;
}
.action-item .ico{width:48px;height:48px;}
.action-item .ico svg{width:24px;height:24px;display:block;}
.biz-list li .ico svg{width:18px;height:18px;display:block;}
.contact__ico{width:44px;height:44px;}
.contact__ico svg{width:22px;height:22px;display:block;}

/* ============================================================
   スクロール演出（リビール／進捗バー／ヘッダー／パララックス）
   ============================================================ */
/* スクロール進捗バー */
.scroll-progress{
  position:fixed;top:0;left:0;width:100%;height:3px;z-index:200;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,var(--primary),var(--blue-light));
  box-shadow:0 0 8px rgba(13,71,161,.45);
}

/* ヘッダー：スクロールで浮き上がる */
.header{transition:box-shadow .3s ease,background .3s ease;}
.header.is-scrolled{box-shadow:0 6px 22px rgba(10,44,92,.10);}

/* リビール（JSが有効なときだけ初期状態を隠す） */
.reveal-on .reveal{
  opacity:0;transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1),transform .7s cubic-bezier(.16,.8,.3,1);
  transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform;
}
.reveal-on .reveal.rv-left{transform:translateX(-36px);}
.reveal-on .reveal.rv-right{transform:translateX(36px);}
.reveal-on .reveal.rv-scale{transform:scale(.93);}
/* 出現し終えたら will-change を外す。付けっぱなしにすると要素が
   合成レイヤーとして残り続け、古い描画が枠外へ写り込む原因になる。 */
.reveal-on .reveal.is-visible{opacity:1;transform:none;will-change:auto;}

/* 動きを抑える設定（OSの「視差効果を減らす」がオンのとき）
   進捗バーとスクロール追従を止めるだけでなく、hover で浮き上がる動きと
   スムーススクロールも切る。乗り物酔いに近い症状の原因になるため。 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .scroll-progress{display:none;}
  .btn:hover,.btn:active,
  .btn--primary:hover,.btn--contact:hover,.btn--white:hover,
  .icon-btn:hover,.pill:hover,
  .service-card:hover,.wcard:hover{transform:none;}
  .btn:hover .btn__arrow{transform:none;}
}

/* ============================================================
   施工・整備実績 一覧ページ
   ============================================================ */
.works-page{padding:72px 0;}
.work-filter{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:16px;}
.work-count{text-align:center;font-size:var(--fs-sm);color:var(--text-sub);margin-bottom:40px;}
.work-filter button{
  border:1.5px solid var(--line);background:#fff;color:var(--text-sub);font-family:inherit;
  font-weight:700;font-size:var(--fs-sm);padding:8px 24px;border-radius:999px;cursor:pointer;
  transition:color .2s,background .2s,border-color .2s;
}
.work-filter button:hover{border-color:var(--blue);color:var(--blue);}
.work-filter button.is-active{background:var(--blue);border-color:var(--blue);color:#fff;}

.work-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.wcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;
}
.wcard:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(16,42,80,.15);}
.wcard.is-hidden{display:none;}
/* 絞り込みで現れるカードは、少し浮かせてから定位置に落ち着かせる。
   display の即切り替えだけだと、並び替わりが唐突に見えるため。
   付け外しは js/main.js（ボタンを押したときだけ。初期表示では付けない）。 */
.wcard.is-appear{animation:wcardIn .38s cubic-bezier(.16,.8,.3,1) both;}
@keyframes wcardIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .wcard.is-appear{animation:none;}
}
.wcard__img{aspect-ratio:4/3;}
.wcard__body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1;}
.wcard__tag{
  align-self:flex-start;background:var(--blue);color:#fff;font-size:var(--fs-2xs);font-weight:700;
  padding:3px 12px;border-radius:4px;
}
.wcard__title{font-size:var(--fs-lg);font-weight:900;color:var(--navy);line-height:1.45;}
.wcard__text{font-size:var(--fs-sm);color:var(--text-sub);flex:1;}
.wcard__meta{
  display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--fs-xs);color:var(--text-sub);
  border-top:1px solid var(--line);padding-top:12px;margin-top:4px;
}
.wcard__meta b{color:var(--navy);font-weight:700;margin-right:4px;}
.wcard__date{font-size:var(--fs-2xs);color:#9aa6b5;}

@media(max-width:1080px){.work-list{grid-template-columns:repeat(2,1fr);}}
@media(max-width:820px){.works-page{padding:56px 0;}}
@media(max-width:640px){.work-list{grid-template-columns:1fr;}}

/* ============================================================
   事業内容モーダル（カードをタップして開く詳細）
   ============================================================ */
/* dialog 要素を使い、背面の操作止め・Esc で閉じる・フォーカスの
   閉じ込めはブラウザ側の仕組みに任せる。
   display は [open] のときだけ flex にする。素の .service-modal{display:flex}
   と書くと、閉じている dialog まで表示されてしまうため。 */
.service-modal{
  /* 画面の高さの単位。スマホの 1vh は「アドレスバーが隠れたときの高さ」を
     指すため、そのまま使うと実際に見えている範囲より大きく見積もってしまい、
     中身がアドレスバーの下に潜る。対応ブラウザでは「いま見えている高さ」を
     指す svh に差し替える。以降、縦方向はすべてこの単位で書く。 */
  --vu:1vh;
  /* 中身の縦の余白。画面が低いほど詰まる。 */
  --modal-py:clamp(16px,calc(2.6 * var(--vu)),24px);
  --modal-px:24px;
  /* 写真に許す高さ。画面ごとに下の @media で入れ替える。 */
  --photo-h:min(300px,calc(32 * var(--vu)));
  width:min(92vw,560px);max-height:calc(92 * var(--vu));padding:0;border:0;
  border-radius:var(--radius-lg);background:#fff;color:var(--text);
  overflow:hidden;box-shadow:0 24px 60px rgba(10,44,92,.3);
  /* 画面中央に置く。冒頭の *{margin:0} が dialog 既定の margin:auto を
     打ち消してしまうため、ここで明示的に戻す。 */
  margin:auto;
}
@supports (height:1svh){
  .service-modal{--vu:1svh;}
}
.service-modal[open]{display:block;animation:modalIn .32s cubic-bezier(.16,.8,.3,1);}
.service-modal::backdrop{background:rgba(10,44,92,.55);}
.service-modal[open]::backdrop{animation:backdropIn .32s ease;}
@keyframes modalIn{
  from{opacity:0;transform:translateY(18px) scale(.97);}
  to{opacity:1;transform:none;}
}
@keyframes backdropIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .service-modal[open],
  .service-modal[open]::backdrop{animation:none;}
}
body.is-modal-open{overflow:hidden;}

.service-modal__close{
  position:absolute;top:12px;right:12px;z-index:3;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(16,42,80,.2);
  transition:background .2s,color .2s;
}
.service-modal__close:hover{background:var(--primary);color:#fff;}
.service-modal__close:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px;}
.service-modal__close svg{width:20px;height:20px;display:block;}

/* 写真から本文までをまとめて縦に送る。写真の高さを固定して本文だけを
   スクロールさせると、ウィンドウが低い環境で本文の取り分が数十pxになり、
   見出しすら読めなくなる。
   高さの調整に flex は使わない。flex の伸縮指定は、高さが中身次第の
   dialog の中で解釈がブラウザごとに割れ、モーダルごと潰れることがある
   （Safari で発生）。ここは dialog の max-height をそのまま受け継いで、
   はみ出したぶんだけスクロールさせるだけにする。 */
.service-modal__scroll{max-height:inherit;overflow-y:auto;}

/* 事業内容の写真は 1.5〜1.78 の横長で、中心は 16:10。
   高さに上限を置くとき、枠の幅をそのままにすると枠だけが平たくなり、
   object-fit が写真の上下を切り落として「細長い帯」になってしまう。
   そこで上限は高さ（--photo-h）で持ち、幅はその 1.6 倍までに抑えて、
   枠ごと 16:10 のまま小さくする。写真は小さくなっても全体が残る。 */
.service-modal__img{
  width:min(100%,calc(var(--photo-h) * 1.6));aspect-ratio:16/10;
  margin-inline:auto;background:var(--gray);
}
/* contain は写真の全体を必ず収める。16:10 から外れた写真だけ、
   余った側に背景色の細い帯が出る（切り落とすよりは良い）。 */
.service-modal__img img{width:100%;height:100%;object-fit:contain;display:block;}

/* 写真が複数あるときの切り替え見本。写真のすぐ下に置き、
   本文をスクロールしても位置が動かないよう flex:none で固定する。 */
.service-modal__thumbs{display:flex;flex-wrap:wrap;gap:8px;padding:12px 24px 0;}
.service-modal__thumb{
  width:72px;aspect-ratio:16/10;padding:0;cursor:pointer;overflow:hidden;
  border:2px solid transparent;border-radius:8px;background:var(--gray);
  box-shadow:inset 0 0 0 1px var(--line);transition:border-color .2s;
}
.service-modal__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.service-modal__thumb:hover{border-color:var(--btn-outline);}
.service-modal__thumb[aria-pressed="true"]{border-color:var(--primary);}

/* 本文の余白。左右は幅ごとに、上下は画面の高さに合わせて決める。
   上下を幅の指定（@media max-width）で書くと、狭くて低い端末で
   高さ側の調整が後ろの指定に負けて効かなくなるため、上下は
   clamp(…vh…) にまとめて一か所で決めている。 */
.service-modal__body{padding:var(--modal-py) var(--modal-px);}
.service-modal__head{display:flex;align-items:center;gap:12px;}
.service-modal__ico{
  width:40px;height:40px;flex:none;border-radius:50%;
  background:var(--sky);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.service-modal__ico svg{width:22px;height:22px;display:block;}
.service-modal__title{font-size:var(--fs-2xl);font-weight:900;color:var(--navy);line-height:1.3;}

/* 段の間隔も画面の高さに合わせて縮める。広げるとモーダルが画面から
   はみ出してスクロールが必要になるため、数値を触るときは実際の表示で
   高さを確かめること。 */
.service-detail__lead{margin-top:clamp(8px,calc(1.5 * var(--vu)),12px);line-height:1.8;}
.service-detail__subhead{
  margin-top:clamp(12px,calc(2.2 * var(--vu)),18px);font-weight:700;color:var(--navy);font-size:var(--fs-sm);
  letter-spacing:.05em;
}
.service-detail__list{margin-top:clamp(8px,calc(1.2 * var(--vu)),10px);list-style:none;display:grid;gap:clamp(5px,calc(.8 * var(--vu)),6px);}
.service-detail__list li{position:relative;padding-left:20px;line-height:1.7;font-size:var(--fs-sm);}
.service-detail__list li::before{
  content:'';position:absolute;left:4px;top:.65em;
  width:6px;height:6px;border-radius:50%;background:var(--blue-light);
}
.service-detail__note{
  margin-top:clamp(10px,calc(1.7 * var(--vu)),14px);padding:clamp(8px,calc(1.2 * var(--vu)),10px) 14px;
  background:var(--sky);border-radius:var(--radius);
  font-size:var(--fs-sm);color:var(--navy);line-height:1.7;
}

.service-modal__cta{
  margin-top:clamp(12px,calc(2.2 * var(--vu)),18px);padding-top:clamp(12px,calc(2.2 * var(--vu)),18px);
  border-top:1px solid var(--line);
}
.service-modal__cta p{font-size:var(--fs-sm);color:var(--text-sub);}
.service-modal__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(10px,calc(1.5 * var(--vu)),12px);}
/* 低い画面ではボタンの上下も詰める。指で押せる44pxは下限として残す。 */
.service-modal__actions .btn{padding:clamp(13px,calc(2 * var(--vu)),16px) 24px;}

/* 横に余裕がある画面では、写真（左）と本文（右）を並べる。
   縦一列のままだと写真の高さぶんだけ本文が押し出され、ノートPCの
   画面では全体を読むのにスクロールが必要になるため。
   写真は本文の高さいっぱいまで伸ばす（object-fit:cover で切り取る）。 */
@media (min-width:760px) and (min-height:600px), (min-width:900px){
  .service-modal{width:min(94vw,960px);--modal-py:clamp(18px,calc(3 * var(--vu)),28px);--modal-px:28px;}
  /* 写真列は幅の 40%。ただし px でも上下限を置き、ウィンドウが狭いときに
     本文列まで細くなって縦に伸びるのを防ぐ。 */
  .service-modal__scroll{display:grid;grid-template-columns:minmax(0,clamp(320px,44%,460px)) minmax(0,1fr);}
  /* 左の列は grid の既定（stretch）で本文と同じ高さになる。
     写真はその中で目一杯まで大きくし、余った上下は台紙の色で埋める。
     枠を列いっぱいに引き伸ばして cover で埋めると、横長の写真の左右が
     半分近く切り落とされるため、ここは contain で全体を見せる。 */
  .service-modal__media{
    display:flex;flex-direction:column;justify-content:center;gap:10px;
    background:var(--sky);padding:14px;
  }
  /* 枠は列いっぱいに取り、写真はその中で contain により中央に置かれる。
     余った上下は台紙の色（--sky）が出る。 */
  .service-modal__img{
    flex:1;min-height:0;width:100%;aspect-ratio:auto;margin:0;background:transparent;
  }
  .service-modal__thumbs{flex:none;padding:0;justify-content:center;}
  /* 閉じるボタンは本文（右の列）の上に重なる。白地でも見失わないよう
     枠線を足し、見出しがボタンの下に潜らないよう右を空けておく。 */
  .service-modal__close{background:#fff;box-shadow:0 2px 10px rgba(16,42,80,.16);border:1px solid var(--line);}
  .service-modal__head{padding-right:36px;}
}

/* 二段組のまま画面が低いときは、写真列を細くして本文列に幅を渡す。
   本文列が細いと行数が増え、そのぶん縦に伸びてしまうため。 */
@media (min-width:900px) and (max-height:600px){
  .service-modal__scroll{grid-template-columns:minmax(0,clamp(260px,34%,380px)) minmax(0,1fr);}
}

/* 画面が特に低いときは、見出しまわりも小さくして本文の場所を作る。 */
@media (max-height:640px){
  .service-modal{max-height:calc(95 * var(--vu));}
  .service-modal__ico{width:34px;height:34px;}
  .service-modal__ico svg{width:19px;height:19px;}
  .service-modal__title{font-size:var(--fs-xl);}
}

/* 二段組にできない幅では縦一列のまま。狭い画面ほど本文が縦に伸びるので、
   写真の取り分と段の間隔を、二段組のときよりさらに詰める。 */
@media (max-width:759px), (max-width:899px) and (max-height:599px){
  .service-modal{
    --modal-py:clamp(14px,calc(2.2 * var(--vu)),18px);
  }
  .service-modal__thumbs{padding:10px 16px 0;}
  .service-modal__title{font-size:var(--fs-xl);}
  .service-detail__lead{margin-top:clamp(8px,calc(1.2 * var(--vu)),10px);line-height:1.75;}
  .service-detail__subhead{margin-top:clamp(11px,calc(1.8 * var(--vu)),14px);}
  .service-detail__list{margin-top:clamp(7px,calc(1 * var(--vu)),9px);gap:clamp(4px,calc(.7 * var(--vu)),5px);}
  .service-detail__list li{line-height:1.65;}
  .service-detail__note{
    margin-top:clamp(9px,calc(1.4 * var(--vu)),12px);padding:clamp(7px,calc(1.1 * var(--vu)),9px) 12px;line-height:1.65;
  }
  .service-modal__cta{margin-top:clamp(10px,calc(1.8 * var(--vu)),14px);padding-top:clamp(10px,calc(1.8 * var(--vu)),14px);}
  .service-modal__actions{margin-top:clamp(8px,calc(1.3 * var(--vu)),10px);}
  .service-modal__actions .btn{padding:clamp(13px,calc(2 * var(--vu)),15px) 18px;}
}

/* 縦一列になる幅では、画面いっぱいのシートとして開く。
   カード状に余白を残すと、その余白のぶんだけ本文が画面からはみ出すうえ、
   写真に回せる高さも減る。角丸と左右の余白を捨てて全部を中身に使う。 */
@media (max-width:759px), (max-width:899px) and (max-height:599px){
  .service-modal{
    width:100%;height:calc(100 * var(--vu));max-height:calc(100 * var(--vu));
    border-radius:0;--modal-px:16px;
  }
  /* 高さが確定しているので、ここだけは flex で「本文を置いた残り」を写真へ
     配分できる。文章の短いサービスほど写真が大きくなる。
     （高さが中身次第のままで flex を使うと Safari でモーダルごと潰れるため、
     この全面シートのときに限って使う。） */
  .service-modal__scroll{height:100%;display:flex;flex-direction:column;}
  .service-modal__media{
    flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;
  }
  .service-modal__img{flex:1;min-height:0;width:100%;aspect-ratio:auto;margin:0;}
  .service-modal__thumbs{flex:none;}
  /* 写真が縮みきったときは閉じるボタンが白地の上に出るので、輪郭を足す。 */
  .service-modal__close{background:#fff;border:1px solid var(--line);}
  .service-modal__head{padding-right:36px;}
  /* 画面下端まで届いたとき、問い合わせボタンがホームバーの下に潜らないよう
     端末の安全領域ぶんだけ下を空ける（該当しない環境では 0 になる）。 */
  /* 幅の広い窓でシートになったとき、1行が長くなりすぎないよう中央に寄せる。 */
  .service-modal__body{
    flex:none;width:100%;max-width:680px;margin-inline:auto;
    padding-bottom:calc(var(--modal-py) + env(safe-area-inset-bottom));
  }
}

@media (max-width:480px){
  .service-modal__actions .btn{width:100%;justify-content:center;}
}

/* 画面の小さい端末は、写真と見出しをさらに小さくして本文の場所を作る。 */
@media (max-width:400px){
  .service-modal{--modal-px:14px;}
  .service-modal__head{gap:10px;}
  .service-modal__ico{width:34px;height:34px;}
  .service-modal__ico svg{width:19px;height:19px;}
  .service-modal__title{font-size:var(--fs-lg);}
}

/* ここから下は、縦も横も小さい端末への段階的な追い込み。
   上の幅ごとの指定より後ろに置かないと、写真の高さが上書きされて効かない。
   削る順番は「写真 → 文字の大きさ」。本文の情報は落とさない。 */
@media (max-width:899px) and (max-height:700px){
  /* リード文だけ本文サイズから補助サイズへ落とす。箇条書きと同じ大きさになる。 */
  .service-detail__lead{font-size:var(--fs-sm);}
}

/* 見えている高さが 600px を切ったら、注記まわりの文字も一段落とす。 */
@media (max-width:899px) and (max-height:600px){
  .service-detail__list li{line-height:1.55;}
  .service-detail__note{font-size:var(--fs-xs);line-height:1.55;}
  .service-modal__cta p{font-size:var(--fs-xs);}
}

/* 狭くて低い画面では、本文を置いた残りが数十pxしかなく、写真を出しても
   判別できない大きさにしかならない。そこは写真を出さず本文に回す
   （同じ写真はタップ元のカードに出ている）。 */
@media (max-width:400px) and (max-height:600px){
  .service-modal__media{display:none;}
}

/* ============================================================
   事業内容：主力3種（ボイラー・冷却塔・業務用ポンプ）
   ============================================================ */
/* 押して開くカードではなく、写真と詳細を最初から大きく見せる。
   写真とテキストは1件ごとに左右を入れ替え、縦に読み進めやすくする。 */
.service-feature{display:grid;gap:56px;margin-bottom:72px;}
.feature{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:40px;align-items:center;
}
.feature:nth-child(even) .feature__media{order:2;}

/* 白やグレー背景の製品写真は、枠が無いと背景に溶けて輪郭が分からなくなる。
   カードと同じく、内側の影で細い枠を描く。 */
.feature__img{
  aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--gray);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);
}
.feature__img img{width:100%;height:100%;object-fit:cover;display:block;}

.feature__thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.feature__thumb{
  width:88px;aspect-ratio:16/10;padding:0;cursor:pointer;overflow:hidden;
  border:2px solid transparent;border-radius:8px;background:var(--gray);
  box-shadow:inset 0 0 0 1px var(--line);transition:border-color .2s;
}
.feature__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.feature__thumb:hover{border-color:var(--btn-outline);}
.feature__thumb[aria-pressed="true"]{border-color:var(--primary);}

.feature__head{display:flex;align-items:center;gap:12px;}
.feature__ico{
  width:48px;height:48px;flex:none;border-radius:50%;
  background:var(--sky);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.feature__ico svg{width:24px;height:24px;display:block;}
.feature__title{font-size:var(--fs-2xl);font-weight:900;color:var(--navy);line-height:1.3;}

/* 「そのほかの取扱設備」 */
.service-sub{
  text-align:center;font-size:var(--fs-lg);font-weight:700;color:var(--navy);
  margin-bottom:32px;
}
.service-sub::after{
  content:"";display:block;width:40px;height:3px;border-radius:2px;
  background:var(--blue-light);margin:12px auto 0;
}

@media (max-width:820px){
  .service-feature{gap:40px;margin-bottom:48px;}
  .feature{grid-template-columns:1fr;gap:24px;}
  /* 縦並びでは写真を必ず先に出す（左右入れ替えの指定を戻す） */
  .feature:nth-child(even) .feature__media{order:0;}
  .feature__title{font-size:var(--fs-xl);}
  .feature__ico{width:40px;height:40px;}
  .feature__ico svg{width:20px;height:20px;}
  .feature__thumb{width:72px;}
}