/* =====================================================================
   top5.css ｜ version 5 専用スタイル（top4.css のコピー。v4 は変更しない）
   top.css ｜ 統合トップ（提案1のレイアウト × 提案2の動画ヒーロー）
   明るいブルースカイ系コーポレート / ネイビー＋ゴールド
   ※ page_id: top（template: html_5）専用の単独CSS
   ベースは top1.css。ヒーローを動画化し、LINE/Instagram ボタン・
   キャッチコピーの飛び出しアニメ・数値カウントアップを追加。
   ===================================================================== */

:root {
  --navy:     #16335f;
  --navy-2:   #0f2746;
  --navy-3:   #1d4a86;
  --navy-ink: #13294b;
  --gold:     #bf9b53;
  --gold-d:   #a5823a;
  --gold-l:   #d8bd86;
  /* サブカラー：ミスト（ネイビー系の薄色。ヘッダー等の明るい面に使用） */
  --sub:      #e4ebf4;
  --sub-d:    #cfdae9;
  --sub-l:    #f2f6fb;
  --sub-line: rgba(22,51,95,.20);
  --ink:      #1b2738;
  --gray:     #5a6678;
  --gray-2:   #8b95a4;
  --paper:    #ffffff;
  --paper-2:  #f3f5f8;
  --paper-3:  #e9edf2;
  --line:     rgba(22, 51, 95, .14);
  --line-2:   rgba(22, 51, 95, .08);
  --shadow:   0 18px 50px rgba(15, 39, 70, .14);
  --radius:   4px;
  --maxw:     1180px;
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --font-disp:"Zen Kaku Gothic New", system-ui, sans-serif;
  --font-serif:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body:"Noto Sans JP", system-ui, sans-serif;
}

/* ---- reset（単独CSSなので素直にリセット） ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-disp); font-weight: 900; line-height: 1.32; color: var(--navy); }
h2 { font-family: var(--font-serif); font-weight: 800; letter-spacing: .03em; }
::selection { background: var(--navy); color: #fff; }

.p1-wrap { width: min(var(--maxw), 92vw); margin-inline: auto; }
.p1-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- 共通：セクション見出し ---- */
.p1-sec { padding: clamp(3.6rem, 7vw, 6.4rem) 0; }
.p1-eyebrow { display: block; margin-bottom: .3rem; }
.p1-eyebrow .ja { font-family: var(--font-disp); font-weight: 900; font-size: 1.06rem; color: var(--navy); letter-spacing: .04em; }
.p1-eyebrow .en { display: block; font-size: .7rem; letter-spacing: .28em; color: var(--gold); font-weight: 700; margin-top: .2rem; }
.p1-h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: .01em; }
.p1-h2 em { font-style: normal; color: var(--gold); }
.p1-lead { color: var(--gray); font-size: .94rem; }

/* ---- ボタン ---- */
.p1-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 2.2em;
  min-width: 200px; padding: .95em 1.4em;
  font-family: var(--font-body); font-weight: 700; font-size: .92rem; letter-spacing: .04em;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.p1-btn svg { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* メタル調：ベース色の斜めグラデーション＋上辺ハイライト/下辺シャドウ */
.p1-btn--navy {
  color: #fff;
  background-image: linear-gradient(135deg, #2f5d9c 0%, var(--navy) 52%, var(--navy-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.28);
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}
.p1-btn--navy:hover {
  background-image: linear-gradient(135deg, #3a6cad 0%, var(--navy-3) 52%, var(--navy) 100%);
  transform: translateY(-2px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.35);
}
.p1-btn--gold {
  color: #fff;
  background-image: linear-gradient(135deg, var(--gold-l) 0%, var(--gold) 52%, var(--gold-d) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40), inset 0 -1px 0 rgba(0,0,0,.24);
  text-shadow: 0 1px 1px rgba(0,0,0,.22);
}
.p1-btn--gold:hover {
  background-image: linear-gradient(135deg, #ecd9a4 0%, var(--gold-l) 52%, var(--gold) 100%);
  transform: translateY(-2px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.45);
}
.p1-btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.p1-btn--ghost:hover { border-color: var(--navy); transform: translateY(-2px); }
.p1-btn--ghost-w { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.45); }
.p1-btn--ghost-w:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
/* LINE / Instagram（提案2より移植・p1サイズに調整） */
.p1-btn--line {
  justify-content: center; gap: .55em; min-width: 0; color: #fff;
  background-image: linear-gradient(135deg, #2ad06a 0%, #06c755 55%, #04a647 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px rgba(6,199,85,.30);
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.p1-btn--line:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 32px rgba(6,199,85,.42); }
.p1-btn--ig {
  justify-content: center; gap: .55em; min-width: 0; color: #fff; border: 0;
  background-image: linear-gradient(45deg, #feda75, #fa7e1e 28%, #d62976 58%, #962fbf 80%, #4f5bd5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 22px rgba(214,41,118,.30);
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.p1-btn--ig:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 34px rgba(214,41,118,.44); }

/* =================== HEADER =================== */
.p1-header {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  height: 70px; padding: 0 clamp(1rem, 3vw, 2rem);
  /* サブカラーの明るい面。濃色のページヘッダー／動画ヒーローどちらの上でもナビが読める。
     ※再生中の動画の上では backdrop-filter が毎フレーム再合成でカクつくため使用しない。 */
  background: rgba(228,235,244,.90);
  border-bottom: 1px solid var(--sub-line);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.p1-header.is-scrolled {
  background: var(--sub);
  box-shadow: 0 6px 24px rgba(15,39,70,.12);
  border-bottom-color: rgba(22,51,95,.30);
}
.p1-brand { display: flex; align-items: center; gap: .6rem; }
.p1-brand .mk { width: 40px; height: 40px; display: grid; place-items: center; background: var(--navy); color: #fff; border-radius: 3px; }
.p1-brand .p1-logo { height: 46px; width: auto; display: block; }
.p1-brand .mk svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.p1-brand .tx { line-height: 1.2; }
.p1-brand .tx .co { font-size: .6rem; color: var(--gray); letter-spacing: .05em; }
.p1-brand .tx .nm { font-family: var(--font-disp); font-weight: 900; font-size: 1.02rem; color: var(--navy); }
.p1-nav { display: flex; align-items: center; gap: 1.3rem; }
.p1-nav a { font-size: .84rem; font-weight: 500; color: var(--ink); position: relative; padding: .3em 0; }
.p1-nav a:hover { color: var(--navy-3); }
.p1-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--gold); transition: width .22s; }
.p1-nav a:hover::after { width: 100%; }
.p1-nav .na { font-size: .84rem; font-weight: 500; color: var(--gray-2); cursor: default; }
.p1-head-actions { display: flex; align-items: center; gap: 1rem; }
.p1-tel { display: flex; align-items: center; gap: .5rem; }
.p1-tel svg { width: 22px; height: 22px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p1-tel .num { font-family: var(--font-disp); font-weight: 900; font-size: 1.12rem; color: var(--navy); line-height: 1; }
/* サブカラー地の上で小文字が薄くならないよう、--gray より一段濃く（コントラスト 5.1:1） */
.p1-tel .hours { font-size: .58rem; color: #4c5666; letter-spacing: .04em; }
.p1-head-cta { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.2em; color: #fff; font-weight: 700; font-size: .84rem; border-radius: var(--radius);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 12%, rgba(255,255,255,0) 46%, rgba(0,0,0,.08) 64%, rgba(0,0,0,.26) 100%),
    linear-gradient(180deg, var(--gold-l) 0%, var(--gold) 50%, var(--gold-d) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.26);
  text-shadow: 0 1px 1px rgba(0,0,0,.22); }
.p1-head-cta svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p1-head-cta:hover {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.14) 14%, rgba(255,255,255,0) 48%, rgba(0,0,0,.08) 66%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, #e7d29c 0%, var(--gold-l) 50%, var(--gold) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60); }
.p1-burger { display: none; width: 44px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--sub-line); border-radius: 3px; cursor: pointer; }
.p1-burger span { width: 20px; height: 2px; background: var(--navy); transition: .2s; }

/* =================== HERO（動画背景） =================== */
.p1-hero { position: relative; min-height: 86vh; display: flex; align-items: center; padding: 110px 0 8vh; overflow: hidden; }
.p1-hero-bg { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 80% 0%, #eaf3fc 0%, #cfe2f6 45%, #9cc0e8 100%);
}
/* 動画メディア：右側に表示し、左 32% は sky 背景へマスクで溶かす（提案1の photo と同じ意匠） */
.p1-hero-media { position: absolute; inset: 0; z-index: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
.p1-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s var(--ease); will-change: opacity; filter: contrast(1.05) saturate(1.06); }
.p1-hero-vid.is-active { opacity: 1; }
.p1-hero-scrim { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(244,248,253,.96) 0%, rgba(244,248,253,.78) 30%, rgba(244,248,253,.2) 56%, transparent 75%); }
/* 中央寄せせず全幅＋左固定余白（padding-left）で配置 */
.p1-hero .p1-wrap { position: relative; z-index: 3; width: 100%; max-width: none; margin-inline: 0; padding-left: clamp(2rem, 7vw, 7rem); padding-right: clamp(1.5rem, 5vw, 4rem); }
.p1-hero-eyebrow { font-size: .8rem; letter-spacing: .14em; color: var(--navy-3); font-weight: 700; margin-bottom: 1.2rem; }
.p1-hero h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); line-height: 1.22; letter-spacing: .01em; margin-bottom: 1.4rem; }
.p1-hero p.sub { font-size: clamp(.98rem, 1.5vw, 1.15rem); color: var(--navy-ink); max-width: 30ch; margin: 0 0 2.2rem; font-weight: 500; }
.p1-hero-sns { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.p1-hero-sns .p1-btn { min-width: 0; padding: .85em 1.5em; }
.p1-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }
.p1-hero-vert { position: absolute; right: clamp(1rem, 3vw, 2.4rem); top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: rgba(255, 255, 255, .8); padding: 1.2rem .88rem; border-radius: 14px;
  border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(22, 51, 95, .16); }
.p1-hero-vert .v { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .22em; }
.p1-hero-vert .v.navy { font-family: var(--font-disp); font-weight: 900; font-size: 1.18rem; color: var(--navy); }
.p1-hero-vert .v.gold { font-size: .72rem; color: var(--gold); letter-spacing: .34em; font-weight: 700; }
/* 半角ラテン語（AI 等）を縦中横で正立表示 */
.p1-hero-vert .tcy { text-combine-upright: all; -webkit-text-combine: horizontal; letter-spacing: 0; position: relative; right: .1em; }
/* 映像切り替えコントロール */
.p1-hero-switch { margin-top: clamp(1.4rem, 3vw, 2.2rem); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.p1-vswitch { display: inline-flex; align-items: center; gap: .55em; background: rgba(255,255,255,.6); border: 1px solid var(--line); color: var(--navy); padding: .6em 1.1em; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: .8rem; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s, border-color .25s, transform .25s var(--ease); }
.p1-vswitch svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p1-vswitch:hover { background: #fff; border-color: var(--navy); transform: translateY(-2px); }
.p1-vdots { display: inline-flex; align-items: center; gap: 8px; }
.p1-vdots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(22,51,95,.25); transition: background .35s var(--ease), width .35s var(--ease); }
.p1-vdots i.is-on { background: var(--gold); width: 22px; border-radius: 999px; }

/* =================== STRENGTH =================== */
.p1-strength { background: var(--paper); }
.p1-strength-inner { display: grid; grid-template-columns: minmax(220px, .9fr) 2.4fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.p1-strength-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.4; }
.p1-strength-head .en { display: block; margin-top: .6rem; font-size: .72rem; letter-spacing: .28em; color: var(--gold); font-weight: 700; }
.p1-stats { display: grid; grid-template-columns: repeat(5, 1fr); }
.p1-stat { padding: .4rem 1.1rem; border-left: 1px solid var(--line); text-align: center; }
.p1-stat:first-child { border-left: 0; }
.p1-stat .ic { color: var(--gold); margin-bottom: .5rem; }
.p1-stat .ic svg { width: 30px; height: 30px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.p1-stat .k { font-size: .72rem; color: var(--gray); font-weight: 700; letter-spacing: .04em; }
.p1-stat .v { font-family: var(--font-disp); font-weight: 900; font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--navy); line-height: 1.1; margin: .15rem 0; }
.p1-stat .v .num { display: inline-block; font-variant-numeric: tabular-nums; }
.p1-stat .v small { font-size: .42em; color: var(--gold); margin-left: .1em; font-weight: 900; }
.p1-stat .d { font-size: .72rem; color: var(--gray); line-height: 1.5; }

/* =================== BUSINESS =================== */
.p1-business { background: var(--paper-2); }
.p1-split { display: grid; grid-template-columns: minmax(240px, .8fr) 2.2fr; gap: clamp(1.6rem, 3.5vw, 3rem); align-items: center; }
.p1-split-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.42; margin: .7rem 0 1rem; }
.p1-split-head .p1-lead { margin-bottom: 1.6rem; }
/* 事業内容の5項目：写真をやめ「文字＋出現アニメーション」に変更（先方 8/22 依頼❻の【質問】）
   ・番号／項目名／一行説明の3要素だけで構成する。写真は使わない。
   ・項目名は top5.js が1文字ずつ <span class="c"> に分解し、--i の順に立ち上がる。
     JS が動かない・prefers-reduced-motion の場合は分解せず、そのまま表示される。
   ・行の遅延は --d（:nth-child で定義）。番号・名前・下線のすべてがこれを基準に段階的に動く。
   ・写真に戻す場合は scratchpad の backup_parts522.sql / top5.css.bak を参照。 */
.p1-biz-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.p1-biz-row { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  column-gap: clamp(1rem, 2.2vw, 1.9rem); padding: clamp(1.15rem, 2.2vw, 1.55rem) 0;
  border-bottom: 1px solid var(--line); }
.p1-biz-row:nth-child(1) { --d: 0s; }
.p1-biz-row:nth-child(2) { --d: .10s; }
.p1-biz-row:nth-child(3) { --d: .20s; }
.p1-biz-row:nth-child(4) { --d: .30s; }
.p1-biz-row:nth-child(5) { --d: .40s; }
/* [data-rise] の transition ショートハンドより後に効かせるため詳細度を上げている */
.p1-biz-row[data-rise] { transition-delay: var(--d); }
/* 下線をゴールドで左から引く */
.p1-biz-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform 1s var(--ease); transition-delay: calc(var(--d) + .10s); }
.p1-biz-row.on::after { transform: scaleX(1); }
.p1-biz-no { font-family: var(--font-disp); font-weight: 900; font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1; color: var(--gold); letter-spacing: .01em; transform: skewX(-8deg); min-width: 2.05em; }
.p1-biz-name { font-family: var(--font-disp); font-weight: 900;
  font-size: clamp(1.12rem, 1.8vw, 1.45rem); line-height: 1.4; color: var(--navy);
  margin: 0 0 .34rem; perspective: 560px; perspective-origin: 50% 58%; }
/* 1文字ずつ手前から飛んできて、面に「張り付く」擬似3D。
   奥行きの出し方は2本立て：
     (1) perspective + translateZ／rotateX・rotateY で立体的に傾けて飛ばす
     (2) text-shadow を斜めに多層で重ねて厚み（押し出し）を作る
   着地の瞬間に押し出しが 0 に潰れ、同時に縦につぶれる（scale 1.07 / .90）ことで
   「ぺたっと貼り付いた」感じを出している。奇数・偶数文字で rotateY の向きを
   逆にしてあるので、1文字ずつ別々に張り付いて見える。 */
.p1-biz-name .c { display: inline-block; opacity: 0; transform-origin: 50% 70%;
  will-change: transform, opacity, filter; }
.p1-biz-row.on .p1-biz-name .c {
  animation: p1BizStick .82s cubic-bezier(.18, .72, .24, 1) both;
  animation-delay: calc(var(--d) + var(--i) * .048s + .05s); }
.p1-biz-row.on .p1-biz-name .c:nth-child(even) { animation-name: p1BizStickB; }
@keyframes p1BizStick {
  0%   { opacity: 0; transform: translateZ(160px) translateY(-.16em) rotateX(42deg) rotateY(-16deg);
         filter: blur(3px);
         text-shadow: .045em .055em 0 rgba(22,51,95,.40), .09em .11em 0 rgba(22,51,95,.30),
                      .135em .165em 0 rgba(22,51,95,.20), 0 .32em .5em rgba(15,39,70,.30); }
  26%  { opacity: 1; filter: blur(0); }
  70%  { opacity: 1; transform: translateZ(0) translateY(0) rotateX(0) rotateY(0) scale(1.07, .90);
         filter: blur(0);
         text-shadow: .012em .015em 0 rgba(22,51,95,.22), .024em .03em 0 rgba(22,51,95,.12),
                      0 .06em .12em rgba(15,39,70,.18); }
  86%  { transform: scale(.99, 1.03); }
  100% { opacity: 1; transform: none; filter: blur(0); text-shadow: none; }
}
/* 偶数文字用：傾きと押し出しを左右反転しただけで、動きの流れは同じ */
@keyframes p1BizStickB {
  0%   { opacity: 0; transform: translateZ(160px) translateY(-.16em) rotateX(42deg) rotateY(16deg);
         filter: blur(3px);
         text-shadow: -.045em .055em 0 rgba(22,51,95,.40), -.09em .11em 0 rgba(22,51,95,.30),
                      -.135em .165em 0 rgba(22,51,95,.20), 0 .32em .5em rgba(15,39,70,.30); }
  26%  { opacity: 1; filter: blur(0); }
  70%  { opacity: 1; transform: translateZ(0) translateY(0) rotateX(0) rotateY(0) scale(1.07, .90);
         filter: blur(0);
         text-shadow: -.012em .015em 0 rgba(22,51,95,.22), -.024em .03em 0 rgba(22,51,95,.12),
                      0 .06em .12em rgba(15,39,70,.18); }
  86%  { transform: scale(.99, 1.03); }
  100% { opacity: 1; transform: none; filter: blur(0); text-shadow: none; }
}
.p1-biz-desc { margin: 0; max-width: 42em; font-size: .86rem; line-height: 1.85; color: var(--gray); }

/* =================== WORKS =================== */
.p1-works { background: var(--paper-2); padding-top: 0; }
.p1-works-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.p1-work-fig { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; box-shadow: var(--shadow); }
.p1-work-fig .ph { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s ease; }
.p1-work-fig .ph.is-empty { background: linear-gradient(160deg, #294d7f, #122b53); display: grid; place-items: center; color: rgba(255,255,255,.5); font-size: .72rem; }
.p1-work:hover .p1-work-fig .ph { transform: scale(1.06); }
.p1-work-cap { display: flex; align-items: baseline; gap: .6rem; margin-top: .8rem; }
.p1-work-cap .no { font-family: var(--font-disp); font-weight: 900; font-size: 1.5rem; color: var(--gold); line-height: 1; }
.p1-work-cap .ttl { font-family: var(--font-disp); font-weight: 700; font-size: .92rem; color: var(--navy); }

/* =================== INSTAGRAM（提案2のSNSデザインを移植） =================== */
.p1-insta { background: var(--paper-2); }
.p1-insta-head { max-width: 760px; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.p1-insta-head .p1-h2 { margin: .55rem 0 .9rem; }
.p1-insta-board {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(1.1rem, 3vw, 1.8rem);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.p1-insta-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.1rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line-2); }
.p1-insta-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-family: var(--font-disp); font-weight: 900; font-size: .92rem; letter-spacing: .04em;
  background: linear-gradient(135deg, var(--gold-l), var(--gold-d));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--shadow);
}
.p1-insta-avatar--staff { background: linear-gradient(135deg, var(--navy-3), var(--navy-2)); }
.p1-insta-id { display: flex; flex-direction: column; gap: .2rem; margin-right: auto; }
.p1-insta-ttl { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-disp); font-weight: 900; font-size: 1.12rem; color: var(--navy); line-height: 1.2; }
.p1-insta-ttl svg { width: 1.1em; height: 1.1em; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.p1-insta-handle { font-size: .78rem; color: var(--gray-2); letter-spacing: .03em; }
.p1-insta-follow { min-width: 0; padding: .7em 1.2em; gap: .9em; font-size: .84rem; }
.p1-insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.p1-insta-post { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; }
.p1-insta-post .ph { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .45s var(--ease); }
.p1-insta-post .ph.is-empty { display: grid; place-items: center; background: linear-gradient(160deg, #284c7e, #122b53); color: rgba(255,255,255,.45); font-size: .6rem; letter-spacing: .12em; }
.p1-insta-post .ov { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,39,70,.46); opacity: 0; transition: opacity .25s ease; }
.p1-insta-post .ov svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p1-insta-post:hover .ph { transform: scale(1.07); }
.p1-insta-post:hover .ov { opacity: 1; }
.p1-insta-note { color: var(--gray-2); font-size: .76rem; margin: .4rem 0 0; }
/* ボードが複数並ぶとき（top）だけ段階的に出現させる。data-d の代わり（パーツ共用のため） */
.p1-insta-board + .p1-insta-board { transition-delay: .08s; }
.p1-insta-board + .p1-insta-board + .p1-insta-board { transition-delay: .16s; }

/* --- 下層ページ用：単独ボードの SNS 誘導ストリップ --- */
.p1-insta.is-sub { background: linear-gradient(180deg, var(--sub-l), var(--sub)); border-top: 1px solid var(--sub-line); }
.p1-insta.is-sub .p1-insta-head { max-width: 760px; margin-inline: auto; margin-bottom: clamp(1.4rem, 3.2vw, 2.2rem); text-align: center; }
.p1-insta.is-sub .p1-h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
.p1-insta.is-sub .p1-insta-board { margin-bottom: clamp(1rem, 2.4vw, 1.4rem); }
.p1-insta.is-sub .p1-insta-note { text-align: center; }

/* =================== ABOUT =================== */
.p1-about { position: relative; background: var(--navy-2); color: #fff; overflow: hidden; }
.p1-about-photo { position: absolute; inset: 0 0 0 42%; z-index: 0; overflow: hidden; }
.p1-about-photo.is-empty { background: linear-gradient(120deg, #1a3866, #0c1f3b); }
/* パララックス2レイヤー（背景=about_back.jpg / 全景=about_front.png） */
.p1-about-layer { position: absolute; inset: 0;
  background-size: 108%; background-repeat: no-repeat; background-position: center; will-change: transform; }
.p1-about-back  { z-index: 0; background-size: 135%; }
.p1-about-front { z-index: 2; }
.p1-about-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--navy-2) 0%, rgba(15,39,70,.7) 30%, rgba(15,39,70,.2) 70%); }
.p1-about .p1-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
.p1-about-head .p1-eyebrow .ja { color: #fff; }
.p1-about-head h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.4; margin: .7rem 0 1.2rem; }
.p1-about-head p { color: rgba(255,255,255,.8); font-size: .92rem; margin: 0 0 1.6rem; max-width: 42ch; }
.p1-about-quote { text-align: right; }
.p1-about-quote p { font-family: var(--font-disp); font-weight: 900; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.7; color: #fff; }
.p1-about-quote em { font-style: normal; color: var(--gold-l); }

/* =================== RECRUIT + CONTACT =================== */
.p1-rc { position: relative; overflow: hidden; }
.p1-rc-photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; }
.p1-rc-photo.is-empty { background: linear-gradient(160deg, #20457a, #0e2549); }
.p1-rc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-2) 0%, rgba(15,39,70,.55) 48%, rgba(15,39,70,.85) 100%); }
.p1-rc .p1-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 7fr 3fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 5rem); }
.p1-recruit, .p1-contact { color: #fff; }
.p1-recruit .p1-eyebrow .ja, .p1-contact .p1-eyebrow .ja { color: #fff; }
.p1-recruit h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.4; margin: .6rem 0 1rem; }
.p1-recruit p { color: rgba(255,255,255,.82); font-size: .9rem; max-width: 34ch; margin: 0 0 1.6rem; }
.p1-contact { position: relative; padding-left: clamp(1.2rem, 3vw, 3rem); }
.p1-contact .note { color: var(--gold-l); font-size: .82rem; font-weight: 700; letter-spacing: .06em; margin-bottom: .4rem; }
.p1-contact h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .6rem; }
.p1-contact p { color: rgba(255,255,255,.8); font-size: .88rem; margin: 0 0 1.4rem; }
.p1-contact .p1-btn { min-width: 280px; }
.p1-contact-ico { width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; display: grid; place-items: center; margin-bottom: 1rem; color: var(--gold-l); }
.p1-contact-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 861px) {
  .p1-rc {
    background: var(--navy-2);
    --rc-edge: calc(50% + 0.2 * min(var(--maxw), 92vw) - 0.2 * clamp(1.5rem, 4vw, 3.5rem));
  }
  .p1-rc-photo {
    clip-path: polygon(0 0, calc(var(--rc-edge) + 42px) 0, calc(var(--rc-edge) - 42px) 100%, 0 100%);
  }
  .p1-rc-photo::after {
    background: linear-gradient(90deg, rgba(15,39,70,.28) 0%, rgba(15,39,70,.5) 45%, var(--navy-2) calc(var(--rc-edge) - 6px));
  }
}

/* =================== FOOTER =================== */
.p1-footer { background: var(--paper); color: var(--gray); padding: 3.4rem 0 1.6rem; border-top: 1px solid var(--line); }
.p1-foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; }
.p1-foot-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.p1-foot-brand .mk { width: 40px; height: 40px; display: grid; place-items: center; background: var(--navy); color: #fff; border-radius: 3px; }
.p1-foot-brand .mk svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.p1-foot-brand .p1-foot-logo { height: 46px; width: auto; display: block; }
.p1-foot-brand .nm { font-family: var(--font-disp); font-weight: 900; color: var(--navy); font-size: 1.04rem; }
.p1-foot-addr { font-size: .8rem; line-height: 1.9; }
.p1-foot-col h4 { color: var(--navy); font-size: .8rem; letter-spacing: .1em; margin: 0 0 .9rem; font-weight: 700; }
.p1-foot-links { display: grid; gap: .5rem; }
.p1-foot-links a { font-size: .82rem; }
.p1-foot-links a:hover { color: var(--gold-d); }
.p1-foot-line .box { display: flex; gap: .8rem; align-items: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; padding: .8rem; }
.p1-foot-line .qr { width: 62px; height: 62px; padding: 3px; background: #fff; border: 1px solid var(--line); border-radius: 3px; display: grid; place-items: center; color: var(--navy); font-size: .54rem; font-family: inherit; flex: none; cursor: zoom-in; transition: border-color .2s ease, box-shadow .2s ease; }
.p1-foot-line .qr img { width: 100%; height: 100%; object-fit: contain; }
.p1-foot-line .qr:hover, .p1-foot-line .qr:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(191,155,83,.30); outline: none; }

/* QRコード拡大表示（.p1-qr-open のクリックで画面中央にオーバーレイ／top.js が制御）
   ※ヒーロー動画の上に重なるため backdrop-filter は使わない */
.p1-qrlb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 5vw; background: rgba(15,39,70,.76); }
.p1-qrlb.is-open { display: flex; }
.p1-qrlb-inner { position: relative; background: #fff; border-radius: 6px; padding: clamp(1rem,3vw,1.6rem); box-shadow: 0 30px 80px rgba(0,0,0,.45); text-align: center; animation: p1-qrlb-in .22s var(--ease); }
.p1-qrlb-inner img { width: min(72vw, 60vh, 360px); height: auto; display: block; }
.p1-qrlb-inner .cap { margin: .9rem 0 0; font-family: var(--font-disp); font-weight: 700; font-size: .88rem; color: var(--navy); }
.p1-qrlb-inner .cap:empty { display: none; }
.p1-qrlb-close { position: fixed; top: 14px; right: 16px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.34); z-index: 2; }
.p1-qrlb-close:hover { background: var(--navy-3); }
@keyframes p1-qrlb-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
body.p1-noscroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .p1-qrlb-inner { animation: none; } }

/* 原寸表示（data-full あり）＝ 写真ギャラリー用のバリアント */
.p1-qrlb.is-full .p1-qrlb-inner { background: transparent; box-shadow: none; padding: 0; max-width: 94vw; }
.p1-qrlb.is-full .p1-qrlb-stage { position: relative; min-height: 30vh; display: grid; place-items: center; }
.p1-qrlb.is-full .p1-qrlb-inner img,
.p1-qrlb.is-full .p1-qrlb-inner video { width: auto; max-width: 94vw; max-height: 80vh; border-radius: 4px; background: #0b1a30; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.p1-qrlb.is-full .p1-qrlb-inner .cap { color: #fff; font-size: .84rem; margin-top: .8rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* 前後ナビ（グループ指定があるときだけ出す） */
.p1-qrlb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; padding: 0; border: 0; border-radius: 4px; background: rgba(15,39,70,.55); color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; display: none; z-index: 2; }
.p1-qrlb.has-nav .p1-qrlb-nav { display: block; }
.p1-qrlb-nav:hover { background: var(--navy); }
.p1-qrlb-prev { left: 10px; }
.p1-qrlb-next { right: 10px; }
.p1-qrlb-count { position: fixed; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: rgba(255,255,255,.8); font-size: .78rem; letter-spacing: .08em; }
.p1-qrlb-count:empty { display: none; }
/* 読み込み中の目印 */
.p1-qrlb.is-loading .p1-qrlb-stage::after { content: ""; position: absolute; width: 28px; height: 28px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: p1-qrlb-spin .8s linear infinite; }
@keyframes p1-qrlb-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .p1-qrlb-nav { width: 38px; height: 54px; font-size: 1.5rem; }
  .p1-qrlb.is-full .p1-qrlb-inner img,
  .p1-qrlb.is-full .p1-qrlb-inner video { max-height: 68vh; }
}
.p1-foot-line .tx .lg { display: inline-flex; align-items: center; gap: .4em; color: #06c755; font-weight: 700; font-size: .82rem; }
.p1-foot-line .tx a.lg:hover { text-decoration: underline; }
.p1-foot-line .tx .lg svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.p1-foot-line .tx p { margin: .3rem 0 0; font-size: .76rem; }
.p1-foot-bottom { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); font-size: .72rem; letter-spacing: .04em; color: var(--gray-2); }

/* =================== FAB =================== */
.p1-fab { position: fixed; right: 14px; bottom: 14px; z-index: 90; display: flex; flex-direction: column; gap: .55rem; }
.p1-fab a { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.1em; border-radius: 4px; font-weight: 700; font-size: .82rem; color: #fff; box-shadow: var(--shadow); }
.p1-fab a.tel { background: var(--navy); }
.p1-fab a.line { background: #06c755; }
.p1-fab a.ig { background: linear-gradient(45deg, #feda75, #fa7e1e 28%, #d62976 58%, #962fbf 80%, #4f5bd5); }
.p1-fab a svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* =================== 出現アニメ（スクロール） =================== */
[data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-rise].on { opacity: 1; transform: none; }

/* =================== ヒーロー：ロード時アニメ =================== */
/* eyebrow / sub / ボタン群 / スイッチ：フェード＋せり上がり（段階遅延） */
.p1-hero [data-load] { opacity: 0; transform: translateY(22px); animation: p1HeroIn .85s var(--ease) forwards; }
.p1-hero [data-load="1"] { animation-delay: .10s; }
.p1-hero [data-load="3"] { animation-delay: .62s; }
.p1-hero [data-load="4"] { animation-delay: .78s; }
.p1-hero [data-load="5"] { animation-delay: .92s; }
.p1-hero [data-load="6"] { animation-delay: 1.04s; }
@keyframes p1HeroIn { to { opacity: 1; transform: none; } }

/* キャッチコピー：行ごとに奥から立体的に「飛び出す」3Dエフェクト
   （深い奥＋傾き＋ブラーで沈んだ状態 → 手前へダイナミックに起き上がり →
     大きめオーバーシュート → 細かく揺り戻して着地。長尺でダイナミックに） */
.p1-hero-title { overflow: visible; perspective: 900px; perspective-origin: 30% 100%; }
.p1-hero-title .ln { display: block; padding-bottom: .06em; transform-style: preserve-3d; }
.p1-hero-title .t { display: inline-block; transform-origin: 50% 100%; backface-visibility: hidden; will-change: transform, opacity, filter;
  opacity: 0; transform: translateZ(-460px) translateY(64%) rotateX(-92deg) rotateZ(-4deg) scale(.86);
  filter: blur(6px);
  text-shadow: 0 24px 46px rgba(15, 39, 70, .34);
  animation: p1Line3D 1.7s cubic-bezier(.16, .84, .24, 1.12) forwards; }
.p1-hero-title .ln:nth-child(1) .t { animation-delay: .30s; }
.p1-hero-title .ln:nth-child(2) .t { animation-delay: .92s; }
.p1-hero-title em { font-style: normal; color: var(--gold); }
@keyframes p1Line3D {
  0%   { opacity: 0; transform: translateZ(-460px) translateY(64%) rotateX(-92deg) rotateZ(-4deg) scale(.86); filter: blur(6px); }
  32%  { opacity: 1; }
  56%  { opacity: 1; transform: translateZ(72px)  translateY(-4%) rotateX(12deg) rotateZ(1.6deg) scale(1.06); filter: blur(0); }
  76%  {              transform: translateZ(-22px) translateY(0)   rotateX(-4deg) rotateZ(-.6deg) scale(.99); }
  90%  {              transform: translateZ(10px)  translateY(0)   rotateX(2deg)  rotateZ(.2deg)  scale(1.008); }
  100% { opacity: 1; transform: translateZ(0)     translateY(0)   rotateX(0)     rotateZ(0)      scale(1); filter: blur(0); text-shadow: 0 10px 24px rgba(15, 39, 70, .30), 0 3px 8px rgba(15, 39, 70, .24); }
}

/* =================== レスポンシブ =================== */
@media (max-width: 1000px) {
  .p1-strength-inner { grid-template-columns: 1fr; }
  .p1-stats { grid-template-columns: repeat(5, 1fr); }
  .p1-split { grid-template-columns: 1fr; }
  .p1-works-cards { grid-template-columns: repeat(2, 1fr); }
  .p1-foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .p1-nav, .p1-tel { display: none; }
  .p1-burger { display: flex; }
  /* スマホ：お問い合わせボタンはアイコンのみ */
  .p1-head-cta { gap: 0; padding: .7em; }
  .p1-head-cta .t { display: none; }
  .p1-head-cta svg { width: 1.3em; height: 1.3em; }
  .p1-nav.open { display: flex; position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--sub); border-bottom: 1px solid var(--sub-line); padding: .4rem 1.2rem 1.2rem; box-shadow: 0 12px 28px rgba(15,39,70,.14); }
  .p1-nav.open a, .p1-nav.open .na { padding: .9rem 0; border-bottom: 1px solid var(--sub-d); }
  .p1-hero-vert { display: none; }
  .p1-hero { min-height: 78vh; }
  .p1-hero-media { -webkit-mask-image: none; mask-image: none; }
  .p1-hero-scrim { background: linear-gradient(180deg, rgba(244,248,253,.92) 0%, rgba(244,248,253,.66) 36%, rgba(244,248,253,.42) 100%); }
  .p1-biz-row { column-gap: .9rem; padding: 1rem 0; }
  .p1-biz-no { min-width: 1.9em; }
  .p1-biz-desc { font-size: .8rem; }
  .p1-about .p1-wrap, .p1-rc .p1-wrap { grid-template-columns: 1fr; }
  .p1-about-photo { inset: 0; opacity: .35; }
  .p1-about-quote { text-align: left; }
  .p1-contact { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-left: 0; padding-top: 1.6rem; }
}
@media (max-width: 560px) {
  .p1-stats { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0; }
  .p1-works-cards { grid-template-columns: 1fr 1fr; }
  .p1-insta-grid { gap: .3rem; }
  .p1-insta-id { width: 100%; order: 3; margin-right: 0; }
  .p1-insta-follow { margin-left: auto; }
  .p1-foot-top { grid-template-columns: 1fr; }
  .p1-hero h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .p1-hero-sns .p1-btn { flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; transition: none; }
  .p1-biz-row::after { transform: scaleX(1); transition: none; }
  .p1-biz-name .c { opacity: 1; transform: none; filter: none; text-shadow: none; animation: none; }
  .p1-hero [data-load] { opacity: 1; transform: none; animation: none; }
  .p1-hero-title .t { opacity: 1; transform: none; animation: none; filter: none; text-shadow: 0 10px 24px rgba(15, 39, 70, .30), 0 3px 8px rgba(15, 39, 70, .24); }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   top3.css 追加分（page_id: top / version 3 専用）
   共有 top.css は変更せず、本ファイルのみ差し替えて読み込む。
   - ヒーロー縦書きの可読性調整
   - STRENGTH を8指標（4×2）に
   - REASONS（選ばれる理由）/ FLOW（施工の流れ）/ PHILOSOPHY（企業理念）新設
   - 事業内容/施工実績の見積りボタン行、施工実績3列
   ===================================================================== */

/* ヒーロー縦書き：長めの文言でも収まるよう縮小 */
.p1-hero-vert .v.navy { font-size: .98rem; letter-spacing: .12em; }

/* ボタンを横並びにする行 */
.p1-btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* =================== STRENGTH（8指標 4×2） =================== */
.p1-stats { grid-template-columns: repeat(4, 1fr); row-gap: 1.8rem; }
.p1-stat { border-left: 1px solid var(--line); }
.p1-stat:nth-child(4n+1) { border-left: 0; }
.p1-stat .v.txt { font-size: clamp(1.2rem, 2.2vw, 1.7rem); letter-spacing: .02em; }

/* =================== REASONS（選ばれる理由） =================== */
.p1-reasons { background: var(--paper); }
.p1-reasons-head { max-width: 780px; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.p1-reasons-head .p1-h2 { margin: .5rem 0 .8rem; }
.p1-reasons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.p1-reason { position: relative; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1.7rem 1.3rem 1.4rem; box-shadow: var(--shadow); overflow: hidden; }
.p1-reason .rno { position: absolute; right: .6rem; top: .1rem; font-family: var(--font-disp); font-weight: 900; font-size: 2.6rem; color: var(--line); line-height: 1; }
.p1-reason .ric { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-bottom: .9rem; background: linear-gradient(135deg, var(--navy-3), var(--navy-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow); }
.p1-reason .ric svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p1-reason h3 { font-family: var(--font-disp); font-weight: 900; font-size: 1.02rem; color: var(--navy); margin-bottom: .5rem; line-height: 1.5; }
.p1-reason p { font-size: .82rem; color: var(--gray); line-height: 1.85; }

/* =================== FLOW（施工の流れ） =================== */
.p1-flow { background: var(--paper-2); }
.p1-flow-head { text-align: center; max-width: 720px; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); }
.p1-flow-head .p1-eyebrow { display: inline-block; }
.p1-flow-head .p1-h2 { margin: .5rem 0 .8rem; }
.p1-flow-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.p1-flow-step { position: relative; text-align: center; padding: 1.5rem 1rem 1.3rem; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.p1-flow-step .dot { width: 48px; height: 48px; margin: 0 auto .8rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-disp); font-weight: 900; font-size: 1.24rem; color: #fff; background: linear-gradient(135deg, var(--gold-l), var(--gold-d)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.p1-flow-step h4 { font-family: var(--font-disp); font-weight: 900; font-size: .96rem; color: var(--navy); margin-bottom: .4rem; }
.p1-flow-step p { font-size: .78rem; color: var(--gray); line-height: 1.75; }
.p1-flow-step:not(:last-child)::after { content: ""; position: absolute; right: -.66rem; top: 50%; width: .52rem; height: .52rem; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: translateY(-50%) rotate(45deg); z-index: 2; }

/* =================== PHILOSOPHY（企業理念） =================== */
.p1-philo { background: var(--paper); }
.p1-philo-inner { max-width: 920px; margin-inline: auto; }
.p1-philo-lead { font-family: var(--font-serif); font-weight: 800; color: var(--navy); font-size: clamp(1.4rem, 3vw, 2.15rem); line-height: 1.7; margin: .7rem 0 1.7rem; }
.p1-philo-body p { color: var(--ink); font-size: .93rem; line-height: 2.05; margin: 0 0 1.15rem; }
.p1-philo-name { margin-top: 2.4rem; padding: clamp(1.4rem, 3vw, 2rem); background: var(--paper-2); border: 1px solid var(--line-2); border-left: 4px solid var(--gold); border-radius: var(--radius); }
.p1-philo-name h3 { font-family: var(--font-serif); font-weight: 800; font-size: 1.22rem; color: var(--navy); margin-bottom: .9rem; }
.p1-philo-name p { font-size: .9rem; line-height: 1.98; color: var(--ink); margin: 0 0 .6rem; }
.p1-philo-name .mission { font-family: var(--font-disp); font-weight: 900; color: var(--navy); font-size: 1.04rem; line-height: 1.85; margin-top: 1.1rem; }
.p1-philo-name .mission em { font-style: normal; color: var(--gold-d); }
.p1-philo b, .p1-philo strong { font-weight: 900; color: var(--navy); }

/* =================== 施工実績：v3 は6枚を3列 =================== */
.p1-works-cards.is-6 { grid-template-columns: repeat(3, 1fr); }

/* =================== レスポンシブ（追加・末尾で優先） =================== */
@media (max-width: 1000px) {
  .p1-reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .p1-flow-steps { grid-template-columns: repeat(3, 1fr); }
  .p1-flow-step:not(:last-child)::after { display: none; }
  .p1-works-cards.is-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .p1-stats { grid-template-columns: repeat(2, 1fr); }
  .p1-stat { border-left: 1px solid var(--line); }
  .p1-stat:nth-child(2n+1) { border-left: 0; }
}
@media (max-width: 560px) {
  .p1-stats { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 0; }
  .p1-reasons-grid { grid-template-columns: 1fr; }
  .p1-flow-steps { grid-template-columns: 1fr; }
}

/* =====================================================================
   サブページ共通（business / kachikomi / works / company / recruit / news）
   ※ header/footer/sprite/fab は共有パーツ。本文はこの pagehead + 各コンポーネント。
   トップ(top)はこれらのクラスを使わないため影響なし。
   ===================================================================== */
.p1-pagehead { position: relative; background: var(--navy-2); color:#fff; overflow:hidden;
  padding: calc(70px + clamp(2.6rem,5vw,4.2rem)) 0 clamp(2.2rem,4vw,3.2rem); }
.p1-pagehead::before { content:""; position:absolute; inset:0; z-index:1;
  background: radial-gradient(120% 140% at 85% -10%, rgba(47,93,156,.55), transparent 60%); }
/* 背景写真レイヤー（ページごとに page_data の style="background-image:url(...)" で指定）
   画像は res/images/head_{page_id}.jpg（1600x640 / 5:2）。要素が無いページは従来どおりネイビー1色。 */
.p1-pagehead-bg { position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; filter:saturate(.92) contrast(1.05); }
/* 写真が見えるよう薄めのオーバーレイ。文字が乗る左側だけ濃く、右へ抜ける。
   最も濃い左端でも 白文字 9.9:1 / lead(白82%) 6.9:1 を確保。 */
.p1-pagehead-bg::after { content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(15,39,70,.84) 0%, rgba(15,39,70,.68) 36%, rgba(15,39,70,.38) 68%, rgba(15,39,70,.18) 100%); }
/* 写真がある場合は、上に重なる放射グラデ（::before）も控えめに */
.p1-pagehead:has(.p1-pagehead-bg)::before { opacity: .5; }
.p1-pagehead .p1-wrap { position:relative; z-index:2; }
.p1-pagehead .crumb { font-size:.72rem; letter-spacing:.04em; color:rgba(255,255,255,.62); margin-bottom:.8rem; }
.p1-pagehead .crumb a { color:rgba(255,255,255,.62); }
.p1-pagehead .crumb a:hover { color:var(--gold-l); }
.p1-pagehead .p1-eyebrow .ja { color:#fff; }
.p1-pagehead h1 { color:#fff; font-family:var(--font-serif); font-weight:800; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.4; margin:.2rem 0 0; }
.p1-pagehead .lead { color:rgba(255,255,255,.82); font-size:.95rem; max-width:62ch; margin:.9rem 0 0; }

/* 汎用カードグリッド */
.p1-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.p1-card { position:relative; background:var(--paper-2); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem 1.4rem; }
.p1-card .no { font-family:var(--font-disp); font-weight:900; color:var(--gold); font-size:1.1rem; }
.p1-card h3 { font-family:var(--font-disp); font-weight:900; color:var(--navy); font-size:1.06rem; margin:.3rem 0 .5rem; line-height:1.5; }
.p1-card p { font-size:.84rem; color:var(--gray); line-height:1.85; }
.p1-card a.more { display:inline-flex; align-items:center; gap:.4em; margin-top:.7rem; font-size:.8rem; font-weight:700; color:var(--navy-3); }
.p1-card a.more svg { width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* 会社概要テーブル */
.p1-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.p1-table th, .p1-table td { text-align:left; vertical-align:top; padding:1rem .4rem; border-bottom:1px solid var(--line); line-height:1.85; }
.p1-table th { width:30%; color:var(--navy); font-weight:700; white-space:nowrap; }
.p1-table td { color:var(--ink); }

/* 準備中ノート */
.p1-prep { text-align:center; padding:clamp(2rem,5vw,3.4rem); border:1px dashed var(--line); border-radius:var(--radius); color:var(--gray); background:var(--paper-2); font-size:.9rem; }
.p1-prep .ic { color:var(--gold); margin-bottom:.6rem; }
.p1-prep .ic svg { width:34px; height:34px; margin:0 auto; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* 下部CTAバンド */
.p1-cta-band { background:var(--navy-2); color:#fff; text-align:center; padding:clamp(2.6rem,5vw,4rem) 0; }
.p1-cta-band h2 { color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.5rem; }
.p1-cta-band p { color:rgba(255,255,255,.8); font-size:.9rem; margin:0 0 1.4rem; }
.p1-cta-band .p1-btn-row { justify-content:center; }

/* サブページ本文セクション見出し */
.p1-sec .p1-sec-h { margin-bottom:clamp(1.4rem,3vw,2rem); }
.p1-sec .p1-sec-h h2 { font-size:clamp(1.5rem,2.8vw,2rem); }
.p1-lead-block p { color:var(--gray); font-size:.94rem; line-height:2; margin:0 0 1rem; }
/* セクションの交互背景（recruit の page_meta と同じ定義） */
.p1-sec.is-alt { background: var(--paper-2); }

/* 写真つきカード（事業内容・カチコミ足場） */
.p1-card.has-ph { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.p1-card-ph { display:block; overflow:hidden; }
.p1-card-ph img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in;
  transition:transform .45s var(--ease); }
.p1-card.has-ph:hover .p1-card-ph img { transform:scale(1.05); }
.p1-card-body { padding:1.5rem 1.4rem 1.6rem; }

/* 写真ギャラリー（施工風景・事業所と現場） */
.p1-shots { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,2vw,1.3rem); }
.p1-shots.is-3 { grid-template-columns:repeat(3,1fr); }
.p1-shot { margin:0; background:var(--paper-2); border:1px solid var(--line-2);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.p1-sec.is-alt .p1-shot { background:var(--paper); }
.p1-shot a { display:block; overflow:hidden; }
.p1-shot img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in;
  transition:transform .45s var(--ease); }
.p1-shot a:hover img { transform:scale(1.05); }
.p1-shot figcaption { padding:.85rem 1rem 1.05rem; font-size:.78rem; color:var(--gray); line-height:1.8; }
.p1-shot figcaption b { display:block; font-family:var(--font-disp); font-weight:900;
  color:var(--navy); font-size:.9rem; margin-bottom:.2rem; }

/* 写真つきリード（2カラム） */
.p1-leadfig { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.2rem,3vw,2.4rem); align-items:center; }
.p1-leadfig p { color:var(--gray); font-size:.94rem; line-height:2; margin:0 0 1rem; }
.p1-leadfig p:last-child { margin-bottom:0; }
.p1-leadfig figure { margin:0; }
.p1-leadfig img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; cursor:zoom-in;
  border-radius:var(--radius); border:1px solid var(--line-2); box-shadow:var(--shadow); }

@media (max-width:900px){ .p1-cards{grid-template-columns:repeat(2,1fr);}
  .p1-shots, .p1-shots.is-3 { grid-template-columns:repeat(2,1fr); }
  .p1-leadfig { grid-template-columns:1fr; } }
@media (max-width:560px){ .p1-cards{grid-template-columns:1fr;} .p1-table th{width:38%;} }
@media (max-width:480px){ .p1-shots, .p1-shots.is-3 { grid-template-columns:1fr; } }
/* 狭幅では本文が全幅になるため、写真の上のスクリムを縦方向に強める */
@media (max-width:820px){
  .p1-pagehead-bg::after {
    background: linear-gradient(180deg, rgba(15,39,70,.52) 0%, rgba(15,39,70,.74) 48%, rgba(15,39,70,.9) 100%);
  }
}

/* =================== 見積り依頼フォーム（.p1-form / app_estimation） =================== */
.p1-form { max-width: 880px; margin-inline: auto; }
.p1-form-block { background:var(--paper-2); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(1.4rem,3.5vw,2.2rem); margin-bottom:1.6rem; }
.p1-form-h3 { font-family:var(--font-disp); font-weight:900; color:var(--navy); font-size:1.14rem; margin:0 0 1.2rem; padding-bottom:.7rem; border-bottom:2px solid var(--gold); display:flex; flex-wrap:wrap; align-items:baseline; gap:.6em; }
.p1-form-h3 small { font-weight:400; font-size:.78rem; color:var(--gray); font-family:var(--font-body); }
.p1-form-h3 .req-note { font-weight:400; font-size:.76rem; color:var(--gray); font-family:var(--font-body); margin-left:auto; }
.p1-form-h4 { font-family:var(--font-disp); font-weight:700; color:var(--navy); font-size:.98rem; margin:1.4rem 0 .8rem; }
.p1-form-h4:first-of-type { margin-top:0; }
.p1-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem 1.4rem; }
.p1-field { display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.p1-field--full { grid-column:1 / -1; }
.p1-field > label { font-family:var(--font-disp); font-weight:700; color:var(--navy); font-size:.9rem; }
.p1-field > label small { font-weight:400; font-size:.76rem; color:var(--gray); font-family:var(--font-body); }
.p1-field .req { color:#c0392b; font-size:.8em; vertical-align:top; margin-right:.15em; }
.p1-field input[type=text], .p1-field input[type=email], .p1-field input[type=number],
.p1-field input[type=date], .p1-field select, .p1-field textarea {
  width:100%; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  padding:.7em .9em; font-size:1rem; font-family:var(--font-body); color:var(--ink); }
.p1-field textarea { resize:vertical; line-height:1.7; }
.p1-field input:focus, .p1-field select:focus, .p1-field textarea:focus { outline:none; border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.p1-field-zip { display:flex; gap:.6rem; }
.p1-field-zip input { flex:1; min-width:0; }
.p1-field-zip .p1-zip-btn { min-width:0; white-space:nowrap; padding:.6em 1em; font-size:.82rem; gap:.4em; }
.p1-field-msg { min-height:1.1em; margin:0; font-size:.78rem; color:#c0392b; }
.p1-field-msg:empty { min-height:0; }
.p1-field-unit { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.p1-field-unit input { border:0 !important; box-shadow:none !important; flex:1; min-width:0; }
.p1-field-unit input:focus { outline:none; }
.p1-field-unit:focus-within { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.p1-field-unit .unit { display:flex; align-items:center; padding:0 .9em; background:var(--navy-2); color:#fff; font-size:.8rem; white-space:nowrap; }
.p1-field-opt { display:flex; flex-wrap:wrap; gap:1rem; padding-top:.2rem; }
.p1-check { display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-body); font-size:.92rem; color:var(--ink); cursor:pointer; }
.p1-check input { width:1.05em; height:1.05em; accent-color:var(--gold-d); }
.p1-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* =================== 入力検証（Bootstrap 互換のクラス名） ===================
   .is-invalid … 不正なコントロール ／ .invalid-feedback … その直下のメッセージ
   top.js の form[data-validate] バリデータが付け外しする。Bootstrap 本体は読み込まない。 */
.invalid-feedback { display:none; margin:.2rem 0 0; font-size:.78rem; line-height:1.7; color:#c0392b; }
.invalid-feedback:not(:empty) { display:block; }
.p1-form .is-invalid, .p1-calc .is-invalid {
  border-color:#c0392b !important; box-shadow:inset 0 0 0 1px #c0392b !important; background-color:#fdf5f4; }
.p1-form .is-invalid:focus, .p1-calc .is-invalid:focus {
  box-shadow:inset 0 0 0 2px rgba(192,57,43,.45) !important; }
/* 枠を持つのがラッパー側の項目（郵便番号・単位付き・ラジオ群） */
.p1-field-zip.is-invalid, .p1-field-unit.is-invalid, .p1-calc-input.is-invalid {
  border-color:#c0392b; box-shadow:inset 0 0 0 1px #c0392b; }
.p1-calc-radios.is-invalid, .p1-field-opt.is-invalid {
  border:1px solid #c0392b; border-radius:var(--radius); padding:.5rem; background:#fdf5f4; }
/* フォーム上部のまとめエラー */
.p1-form-alert { display:none; margin:0 0 1.4rem; padding:.95rem 1.15rem; border-radius:var(--radius);
  background:#fdecea; border:1px solid #f0bdba; border-left:3px solid #c0392b;
  color:#8c2c22; font-size:.86rem; line-height:1.9; }
.p1-form-alert.is-shown { display:block; }
.p1-form-alert b { display:block; font-family:var(--font-disp); font-weight:900; margin-bottom:.2rem; }

.p1-form-actions { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:1.8rem; }
.p1-form-actions .p1-btn { min-width:240px; justify-content:center; gap:.8em; }
.p1-form-actions--single { justify-content:flex-end; }
/* 確認画面 */
.p1-form-note { font-size:.86rem; color:var(--gray); line-height:1.9; margin-bottom:1.4rem; text-align:center; }
.p1-form-review { border-top:1px solid var(--line); margin:0 0 1.6rem; }
.p1-form-review .row { display:grid; grid-template-columns:34% 1fr; gap:1rem; padding:.85rem .4rem; border-bottom:1px solid var(--line); }
.p1-form-review dt { font-family:var(--font-disp); font-weight:700; color:var(--navy); font-size:.88rem; }
.p1-form-review dd { margin:0; color:var(--ink); font-size:.92rem; line-height:1.8; word-break:break-word; }
.p1-form-review .row.is-empty dd .none { color:var(--gray); font-size:.84rem; }
/* 完了・エラー画面 */
.p1-form--result { max-width:640px; text-align:center; padding:clamp(2rem,5vw,3.4rem) 0; }
.p1-form--result .p1-form-ico { width:64px; height:64px; margin:0 auto 1.2rem; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--navy-3),var(--navy-2)); box-shadow:var(--shadow); }
.p1-form--result .p1-form-ico svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.p1-form--result h2 { font-family:var(--font-disp); font-weight:900; color:var(--navy); font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:.8rem; }
.p1-form--result p { color:var(--gray); font-size:.94rem; line-height:2; margin:0 0 .8rem; }
.p1-form--result .p1-form-sub { font-size:.82rem; }
.p1-form--result .p1-btn { min-width:260px; justify-content:center; gap:.8em; margin-top:1.2rem; }
.p1-form--error .p1-form-ico { background:linear-gradient(135deg,#c0392b,#8e2a20); }
@media (max-width:640px){
  .p1-form-grid { grid-template-columns:1fr; }
  .p1-form-actions--single { justify-content:center; }
  .p1-form-actions .p1-btn, .p1-form--result .p1-btn { width:100%; min-width:0; }
  .p1-form-review .row { grid-template-columns:1fr; gap:.2rem; }
}

/* =====================================================================
   top4.css 追加分（version 4 専用）  2026-08-10
   「HPリニューアル版 修正依頼事項」の反映分。共有 top.css は変更していない。
   ここで定義するクラスは v4 のページ／パーツからのみ参照される。
   ===================================================================== */

/* --- 共通ユーティリティ（■2 スマホの折り返し） ----------------------- */
/* 単語の途中で切れてほしくない語に付ける */
.p1-nw { white-space: nowrap; }
/* スマホ幅（720px 以下）でだけ有効になる改行 */
.p1-brsp { display: none; }
@media (max-width: 720px) { .p1-brsp { display: inline; } }
/* PC でだけ有効になる改行（スマホでは詰めて表示する） */
@media (max-width: 720px) { .p1-brpc { display: none; } }

/* --- ■2 スマホ専用の文字サイズと改行位置 ----------------------------- */
@media (max-width: 720px) {
  /* 日本語を文節単位で折り返す。未対応ブラウザでは宣言ごと無視され従来動作に戻る */
  body { word-break: auto-phrase; line-break: strict; }
  h1, h2, h3, h4, p, li, dd, dt, th, td, figcaption, label, .p1-btn, .p1-lead {
    word-break: auto-phrase; line-break: strict;
  }
  /* 見出しは行数のバランスを取る */
  h1, h2, h3, .p1-h2 { text-wrap: balance; }
  p, li, figcaption { text-wrap: pretty; }

  /* 本文まわりの文字サイズをスマホ用に少し下げ、1行の文字数を確保する */
  .p1-hero h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); line-height: 1.34; }
  .p1-hero .sub { font-size: .9rem; line-height: 1.95; }
  .p1-hero-eyebrow { font-size: .72rem; line-height: 1.8; }
  .p1-h2 { font-size: clamp(1.32rem, 5.6vw, 1.8rem); line-height: 1.45; }
  .p1-lead { font-size: .88rem; line-height: 1.95; }
  .p1-pagehead h1 { font-size: clamp(1.5rem, 6.4vw, 2.1rem); line-height: 1.42; }
  .p1-pagehead .lead { font-size: .86rem; line-height: 1.95; }
  .p1-card p, .p1-work-cap .ttl, .p1-stat .d { line-height: 1.85; }
  .p1-btn { font-size: .86rem; }
}
@media (max-width: 420px) {
  .p1-hero h1 { font-size: clamp(1.62rem, 7.6vw, 2.1rem); }
}

/* --- ■1 スマホ右下の固定ボタン --------------------------------------- */
/* Instagram を外し「LINEで相談」「電話する」の2つに。スマホでは画面下の横並びバー。
   本文・入力欄・申込みボタンに重ならないよう、フッター側に余白を確保する。 */
@media (max-width: 860px) {
  .p1-fab {
    right: 0; left: 0; bottom: 0; gap: .5rem;
    flex-direction: row; align-items: stretch;
    padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.95);
    border-top: 1px solid var(--sub-line);
    box-shadow: 0 -6px 20px rgba(15,39,70,.14);
  }
  .p1-fab a {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: .9em .6em; font-size: .9rem; border-radius: 6px;
  }
  /* 固定バーの高さぶん、ページ末尾に余白を足す */
  body:has(.p1-fab) .p1-footer { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* --- ■4 ヘッダーはスクロール後に 20% 小さくする ---------------------- */
.p1-header { --p1-head-h: 70px; height: var(--p1-head-h); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, height .22s ease; }
.p1-header.is-scrolled { --p1-head-h: 56px; }   /* 70px の 80% */
.p1-header .p1-brand .p1-logo,
.p1-header .p1-brand .tx .nm,
.p1-header .p1-tel,
.p1-header .p1-head-cta { transition: height .22s ease, font-size .22s ease, padding .22s ease, transform .22s ease; }
.p1-header.is-scrolled .p1-brand .p1-logo { height: 37px; }
.p1-header.is-scrolled .p1-brand .tx .nm { font-size: .86rem; }
.p1-header.is-scrolled .p1-brand .tx .co { font-size: .54rem; }
.p1-header.is-scrolled .p1-nav a { font-size: .78rem; }
.p1-header.is-scrolled .p1-tel .num { font-size: .94rem; }
.p1-header.is-scrolled .p1-tel .hours { font-size: .58rem; }
.p1-header.is-scrolled .p1-head-cta { padding: .55em 1.1em; font-size: .78rem; }
@media (max-width: 860px) {
  /* 展開メニューの位置もヘッダーの高さに追従させる */
  .p1-nav.open { top: var(--p1-head-h); inset-inline: 0; bottom: auto; }
}

/* --- ■4 トップのヒーロー：依頼につながるボタンを優先 ----------------- */
.p1-hero-cta.is-priority { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.p1-hero-cta.is-priority .p1-btn { justify-content: center; }
.p1-btn--lg { font-size: 1rem; padding: 1.05em 2em; }
.p1-btn--lg small {
  margin-left: .5em; padding: .18em .6em; border-radius: 999px;
  background: rgba(255,255,255,.26); font-size: .72em; font-weight: 700; letter-spacing: .04em;
}
@media (max-width: 720px) {
  .p1-hero-cta.is-priority { flex-direction: column; align-items: stretch; gap: .6rem; }
  .p1-hero-cta.is-priority .p1-btn { width: 100%; }
  .p1-btn--lg { font-size: .94rem; padding: .95em 1.2em; }
}

/* --- ■10 企業理念：Purpose --------------------------------------------- */
.p1-philo-name .mission .p1-purpose {
  display: block; margin-bottom: .55rem;
  font-family: var(--font-disp); font-weight: 900; font-size: .82rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-d);
}

/* --- ■16 5ステップの説明カード：スマホの縦余白を約25%縮小 ------------- */
@media (max-width: 720px) {
  .p1-flow-steps { gap: .7rem; }
  .p1-flow-step { padding: 1.1rem 1rem .95rem; }
  .p1-flow-step .dot { width: 38px; height: 38px; margin-bottom: .55rem; font-size: 1.05rem; }
  .p1-flow-step h4 { margin-bottom: .28rem; }
  .p1-flow-step p { line-height: 1.7; }
}

/* --- ■7 事業内容カード：「詳しく見る」を外して表示を統一 -------------- */
.p1-cards-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: clamp(1.6rem, 4vw, 2.4rem); }

/* --- ■8 施工実績カード：写真つき＋建物情報 ---------------------------- */
.p1-wcard { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.p1-wcard-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sub-l); }
.p1-wcard-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.p1-wcard-ph:hover img { transform: scale(1.05); }
.p1-wcard-body { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.p1-wcard-body .no { font-family: var(--font-disp); font-weight: 900; font-size: .82rem; color: var(--gold-d); letter-spacing: .12em; }
.p1-wcard-body h3 { font-family: var(--font-disp); font-weight: 900; color: var(--navy); font-size: 1.04rem; margin: .12rem 0 .5rem; }
.p1-wcard-body > p { font-size: .84rem; color: var(--gray); line-height: 1.85; margin: 0 0 .8rem; }
.p1-wspec { margin: auto 0 0; border-top: 1px solid var(--line); font-size: .8rem; }
.p1-wspec div { display: grid; grid-template-columns: 6.6em 1fr; gap: .6rem; padding: .48rem 0; border-bottom: 1px solid var(--line); }
.p1-wspec dt { color: var(--navy); font-weight: 700; }
.p1-wspec dd { margin: 0; color: var(--gray); line-height: 1.75; }

/* --- ■12 採用：入口を2つに分ける -------------------------------------- */
.p1-rec-gates { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); }
.p1-rec-gate {
  display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--paper); border: 1px solid var(--line-2); border-top: 3px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.p1-rec-gate:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,39,70,.14); }
.p1-rec-gate .gic { width: 48px; height: 48px; margin-bottom: .9rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--navy-3), var(--navy-2)); }
.p1-rec-gate .gic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p1-rec-gate h3 { font-family: var(--font-disp); font-weight: 900; color: var(--navy); font-size: clamp(1.05rem, 2.2vw, 1.3rem); margin-bottom: .5rem; }
.p1-rec-gate .for { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--gold-d); margin-bottom: .5rem; }
.p1-rec-gate p { font-size: .86rem; color: var(--gray); line-height: 1.9; margin: 0 0 1.1rem; }
.p1-rec-gate .p1-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 720px) { .p1-rec-gates { grid-template-columns: 1fr; } .p1-rec-gate .p1-btn { align-self: stretch; justify-content: center; } }

/* --- ■13 概算と正式見積りの違い --------------------------------------- */
.p1-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); }
.p1-choice { display: flex; flex-direction: column; padding: clamp(1.3rem, 2.8vw, 1.9rem); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.p1-choice.is-primary { border-top: 3px solid var(--gold); }
.p1-choice.is-secondary { border-top: 3px solid var(--navy-3); }
.p1-choice .tag { align-self: flex-start; padding: .22em .8em; border-radius: 999px; background: var(--sub); color: var(--navy); font-size: .72rem; font-weight: 700; letter-spacing: .06em; margin-bottom: .6rem; }
.p1-choice h3 { font-family: var(--font-disp); font-weight: 900; color: var(--navy); font-size: clamp(1.02rem, 2.2vw, 1.24rem); margin-bottom: .45rem; }
.p1-choice .who { font-size: .84rem; color: var(--navy-3); font-weight: 700; line-height: 1.8; margin: 0 0 .5rem; }
.p1-choice p { font-size: .84rem; color: var(--gray); line-height: 1.9; margin: 0 0 1rem; }
.p1-choice ul { list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: .82rem; color: var(--gray); }
.p1-choice li { position: relative; padding-left: 1.1em; line-height: 1.9; }
.p1-choice li::before { content: ""; position: absolute; left: 0; top: .72em; width: .42em; height: .42em; border-radius: 50%; background: var(--gold); }
.p1-choice .p1-btn { margin-top: auto; justify-content: center; }
@media (max-width: 720px) { .p1-choices { grid-template-columns: 1fr; } }

/* --- ■14 お問い合わせ：任意項目のたたみ込み --------------------------- */
.p1-form-optional { margin-top: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); background: rgba(228,235,244,.35); }
.p1-form-optional > summary {
  cursor: pointer; list-style: none; padding: .85rem 1.1rem;
  font-family: var(--font-disp); font-weight: 700; font-size: .88rem; color: var(--navy);
  display: flex; align-items: center; gap: .5em;
}
.p1-form-optional > summary::-webkit-details-marker { display: none; }
.p1-form-optional > summary::before { content: "＋"; color: var(--gold-d); font-weight: 900; }
.p1-form-optional[open] > summary::before { content: "－"; }
.p1-form-optional > summary small { font-weight: 400; color: var(--gray); font-size: .78rem; }
.p1-form-optional .p1-form-grid { padding: 0 1.1rem 1.1rem; }

/* --- ■14 LINE 友だち追加（スマホはボタン、PCはQR） -------------------- */
.p1-line-add {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .9em 1.6em; border-radius: 6px; background: #06c755; color: #fff;
  font-weight: 700; font-size: .92rem; box-shadow: var(--shadow);
}
.p1-line-add:hover { filter: brightness(1.06); }
.p1-line-add svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.p1-line-box { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; padding: clamp(1.1rem,2.6vw,1.6rem); border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.p1-line-box .qr { width: 132px; height: 132px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: zoom-in; }
.p1-line-box .qr img { width: 100%; height: 100%; display: block; }
.p1-line-box h3 { font-family: var(--font-disp); font-weight: 900; color: var(--navy); font-size: 1rem; margin-bottom: .35rem; }
.p1-line-box p { font-size: .82rem; color: var(--gray); line-height: 1.85; margin: 0 0 .8rem; }
/* スマホ：QR は出さず、押すと LINE が直接開くボタンだけにする */
@media (max-width: 720px) {
  .p1-line-box { grid-template-columns: 1fr; text-align: center; }
  .p1-line-box .qr { display: none; }
  .p1-line-add { width: 100%; }
}
/* PC：ボタンは出さず QR で案内する（PCで押しても LINE アプリが開かないため） */
@media (min-width: 721px) { .p1-line-box .p1-line-add.is-sp-only { display: none; } }
/* フッターの LINE 欄も同じ考え方でスマホは友だち追加ボタンに切り替える */
.p1-foot-line .p1-line-add { display: none; margin-top: .5rem; padding: .7em 1.1em; font-size: .82rem; }
@media (max-width: 720px) {
  .p1-foot-line .box .qr { display: none; }
  .p1-foot-line .p1-line-add { display: inline-flex; }
  .p1-foot-line .tx p small { display: none; }
}

/* --- ■15 見積り依頼フォーム：3ステップ -------------------------------- */
.p1-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 .6rem; padding: 0; }
.p1-steps li { position: relative; padding: .75rem .6rem .7rem 2.6rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); color: var(--gray-2); font-size: .82rem; line-height: 1.5; }
.p1-steps li .n { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sub-d); color: var(--navy); font-family: var(--font-disp); font-weight: 900; font-size: .82rem; }
.p1-steps li .t { display: block; font-weight: 700; color: inherit; }
.p1-steps li.is-current { border-color: var(--gold); background: #fffaf0; color: var(--navy); box-shadow: inset 0 0 0 1px var(--gold); }
.p1-steps li.is-current .n { background: linear-gradient(135deg, var(--gold-l), var(--gold-d)); color: #fff; }
.p1-steps li.is-done { color: var(--navy); cursor: pointer; }
.p1-steps li.is-done .n { background: var(--navy-3); color: #fff; }
.p1-steps li.is-done .n::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; background: inherit; border-radius: 50%; }
.p1-steps-bar { height: 5px; border-radius: 999px; background: var(--sub-d); overflow: hidden; margin: 0 0 1.6rem; }
.p1-steps-bar span { display: block; height: 100%; width: 33.333%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-l), var(--gold-d)); transition: width .35s var(--ease); }
.p1-form.is-stepped .p1-step-pane[hidden] { display: none; }
.p1-form-actions.p1-step-actions { justify-content: space-between; }
.p1-form-actions.p1-step-actions .p1-btn { min-width: 200px; }
@media (max-width: 720px) {
  .p1-steps { grid-template-columns: 1fr; gap: .35rem; }
  .p1-steps li { padding: .6rem .6rem .55rem 2.5rem; font-size: .8rem; }
  .p1-steps li:not(.is-current):not(.is-done) { display: none; }
  .p1-form-actions.p1-step-actions { flex-direction: column-reverse; }
  .p1-form-actions.p1-step-actions .p1-btn { width: 100%; min-width: 0; }
}
/* 「未定」「不明」のチェックが入ったら、その項目の入力欄を無効化して見た目でも分かるように */
.p1-field.is-unknown input:not([type=checkbox]),
.p1-field.is-unknown select { opacity: .5; pointer-events: none; background: var(--sub-l); }
.p1-field-hint { margin: .25rem 0 0; font-size: .78rem; color: var(--gray-2); line-height: 1.7; }

/* --- 追補（v4） -------------------------------------------------------- */
/* .p1-btn は display:inline-flex を持つため hidden 属性に勝ってしまう。
   ステップフォームの「戻る／次へ／確認する」を確実に隠すための打ち消し。 */
.p1-form [hidden] { display: none !important; }

/* 画面幅で出し分ける説明文（LINE の案内など） */
.p1-only-sp { display: none; }
@media (max-width: 720px) {
  .p1-only-sp { display: inline; }
  .p1-only-pc { display: none; }
}

/* --- ■2 ヘッダーの文字が単語の途中で折り返さないようにする ------------ */
/* 1200〜1400px あたりでナビ項目や「お問い合わせ」が「事業内／容」のように
   途中で切れていたため、折り返しを禁止したうえで幅に応じて詰める。 */
.p1-header .p1-nav a,
.p1-header .p1-head-cta .t,
.p1-header .p1-tel .num,
.p1-header .p1-tel .hours { white-space: nowrap; }
.p1-header .p1-tel > span { display: flex; flex-direction: column; gap: .18rem; }
@media (max-width: 1400px) {
  .p1-header .p1-nav { gap: 1rem; }
  .p1-header .p1-nav a { font-size: .8rem; }
  .p1-header .p1-tel .hours { font-size: .54rem; }
}
@media (max-width: 1200px) {
  .p1-header .p1-nav { gap: .72rem; }
  .p1-header .p1-nav a { font-size: .76rem; }
  .p1-header .p1-tel .num { font-size: 1rem; }
  .p1-header .p1-tel .hours { display: none; }
  .p1-header .p1-head-cta { padding: .7em .95em; font-size: .78rem; }
}
@media (max-width: 1000px) and (min-width: 861px) {
  .p1-header .p1-brand .tx .nm { font-size: .9rem; }
  .p1-header .p1-nav { gap: .58rem; }
  .p1-header .p1-nav a { font-size: .73rem; }
}

/* =========================================================================
   ■15 添付ファイル（現場写真・図面）
   ========================================================================= */
.p1-field .p1-any { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.04em;
  color:var(--gray); background:var(--paper-2); border:1px solid var(--line-2);
  border-radius:2px; padding:.12em .5em; margin-left:.4em; vertical-align:middle; }

.p1-field--file input[type=file] { width:100%; font-family:var(--font-body); font-size:.86rem;
  color:var(--ink); background:var(--paper); border:1px dashed var(--line-2);
  border-radius:var(--radius); padding:.85em .9em; cursor:pointer; }
.p1-field--file input[type=file]:hover { border-color:var(--gold); }
.p1-field--file input[type=file]::file-selector-button { font-family:var(--font-body); font-size:.82rem;
  font-weight:700; color:#fff; background:var(--navy); border:0; border-radius:4px;
  padding:.55em 1.1em; margin-right:.9em; cursor:pointer; }
.p1-field--file input[type=file]::file-selector-button:hover { background:var(--navy-3); }
.p1-field--file.has-error input[type=file] { border-color:#c0392b; background:#fdf5f4; }

.p1-file-error:empty { display:none; }
.p1-file-error { margin:.5rem 0 0; font-size:.8rem; line-height:1.7; color:#c0392b; font-weight:700; }

.p1-file-list { list-style:none; margin:0 0 .7rem; padding:0; }
.p1-file-list li { display:flex; flex-wrap:wrap; align-items:center; gap:.5em .9em;
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:4px;
  padding:.55em .8em; margin-bottom:.35rem; font-size:.84rem; }
.p1-file-list .fn { flex:1 1 auto; min-width:0; word-break:break-all; color:var(--ink); }
.p1-file-list .fs { flex:0 0 auto; font-size:.76rem; color:var(--gray-2); font-variant-numeric:tabular-nums; }
.p1-file-list .p1-file-del { flex:0 0 auto; font-size:.78rem; color:var(--gray); }
.p1-file-list.is-confirm li { background:transparent; border:0; padding:0; margin-bottom:.2rem; }

@media (max-width: 720px) {
  .p1-field--file input[type=file] { font-size:.8rem; padding:.75em .7em; }
  .p1-field--file input[type=file]::file-selector-button { margin-right:.6em; padding:.5em .9em; }
}

/* =========================================================================
   LINE 導線の運用切り替え用（既定値）
   .p1-line-ask  … LINE を「相談・お問い合わせ窓口」として案内している箇所（通常は表示）
   .p1-line-info … LINE を「友だち追加・お知らせ配信」として案内する差し替え文言（通常は非表示）
   初期運用中はこの2つを res/css/line-inquiry-off.css で入れ替えている。
   ========================================================================= */
.p1-line-info { display: none !important; }

/* =========================================================================
   お知らせ一覧（news モジュール／{m:news;listPage} など）
   ========================================================================= */
.p1-news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.p1-news-item { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 1.4rem;
  align-items: start; padding: 1.15rem .2rem; border-bottom: 1px solid var(--line); }
.p1-news-meta { display: flex; align-items: center; gap: .7rem; padding-top: .1rem; }
.p1-news-meta .date { font-family: var(--font-disp); font-weight: 700; color: var(--gray);
  font-size: .86rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.p1-news-tag { display: inline-block; flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--navy); border-radius: 2px; padding: .28em .8em; white-space: nowrap; }
.p1-news-tag.is-holiday { background: #b4483c; }
.p1-news-tag.is-works   { background: var(--gold-d); }
.p1-news-tag.is-recruit { background: #1c6b41; }
.p1-news-tag.is-media   { background: var(--navy-3); }

.p1-news-main .ttl { margin: 0; font-size: .94rem; line-height: 1.85; color: var(--ink); font-weight: 500; }
.p1-news-main .ttl a { display: inline-flex; align-items: center; gap: .35em; color: var(--navy-3);
  font-weight: 700; text-decoration: underline; text-underline-offset: .22em;
  text-decoration-color: rgba(29,74,134,.32); }
.p1-news-main .ttl a:hover { text-decoration-color: currentColor; }
.p1-news-main .ttl a svg { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 本文・添付は既定で閉じておく（開閉に JS を使わない） */
.p1-news-detail { margin-top: .45rem; }
.p1-news-detail > summary { display: inline-flex; align-items: center; gap: .4em; cursor: pointer;
  font-size: .78rem; font-weight: 700; color: var(--gray); list-style: none;
  border: 1px solid var(--line-2); border-radius: 3px; padding: .3em .9em; background: var(--paper-2); }
.p1-news-detail > summary::-webkit-details-marker { display: none; }
.p1-news-detail > summary::before { content: "＋"; font-size: .9em; color: var(--gold-d); }
.p1-news-detail[open] > summary::before { content: "－"; }
.p1-news-detail > summary:hover { border-color: var(--gold); color: var(--navy); }
.p1-news-detail .inner { margin-top: .8rem; padding: 1rem 1.1rem; background: var(--sub-l);
  border: 1px solid var(--sub-line, var(--line-2)); border-radius: var(--radius); }
.p1-news-detail .txt { font-size: .88rem; line-height: 2; color: var(--gray); }
.p1-news-detail .txt :first-child { margin-top: 0; }
.p1-news-detail .txt :last-child { margin-bottom: 0; }
.p1-news-detail .txt img { max-width: 100%; height: auto; }
.p1-news-detail .txt p { margin: 0 0 .8em; }
.p1-news-detail .txt ul, .p1-news-detail .txt ol { margin: .8em 0; padding-left: 0; list-style: none; }
.p1-news-detail .txt li { position: relative; padding-left: 1.15em; margin-bottom: .5em; }
.p1-news-detail .txt li::before { content: ""; position: absolute; left: .15em; top: .85em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.p1-news-detail .txt ol { counter-reset: n; }
.p1-news-detail .txt ol li { padding-left: 1.6em; }
.p1-news-detail .txt ol li::before { counter-increment: n; content: counter(n) "."; top: 0;
  width: auto; height: auto; border-radius: 0; background: none; color: var(--gold-d); font-weight: 700; font-size: .9em; }
.p1-news-detail .txt b, .p1-news-detail .txt strong { color: var(--navy); }
.p1-news-detail .txt a { color: var(--navy-3); font-weight: 700; text-decoration: underline; }
.p1-news-detail .fig { margin: .9rem 0 0; }
.p1-news-detail .fig img { max-width: min(100%, 420px); height: auto; border-radius: 4px;
  border: 1px solid var(--line-2); cursor: zoom-in; display: block; }
.p1-news-detail .dl { margin: .9rem 0 0; font-size: .84rem; }
.p1-news-detail .dl a { display: inline-flex; align-items: center; gap: .4em; color: var(--navy-3); font-weight: 700; }
.p1-news-detail .dl a svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ページ送り */
.p1-news-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .4rem; margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }
.p1-news-pager .num, .p1-news-pager .nav { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4em; padding: .5em .8em; font-size: .82rem; font-weight: 700; border-radius: 3px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--navy-3); }
.p1-news-pager a:hover { border-color: var(--gold); }
.p1-news-pager .is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.p1-news-pager .is-off { color: var(--gray-2); opacity: .5; }

@media (max-width: 720px) {
  .p1-news-item { grid-template-columns: 1fr; gap: .45rem; padding: 1rem .1rem; }
  .p1-news-meta { gap: .55rem; }
  .p1-news-main .ttl { font-size: .9rem; line-height: 1.8; }
  .p1-news-detail .inner { padding: .9rem; }
}

/* =========================================================================
   FOOTER：オンライン明細サービスへのリンク（version 5 追加 2026-08-26）
   コピーライト行を左、明細サービス2件を右に置く小さめのユーティリティ行。
   ========================================================================= */
.p1-foot-bottom { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 1.4rem; }
.p1-foot-copy { margin: 0; min-width: 0; }
.p1-foot-ext { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .1rem .45rem; font-size: .7rem; color: var(--gray); }
.p1-foot-ext a:hover { color: var(--gold-d); text-decoration: underline; }
.p1-foot-ext .sep { color: var(--gray-2); opacity: .6; }

@media (max-width: 560px) {
  /* スマホは1列。明細リンクをコピーライトより上に出す */
  .p1-foot-bottom { justify-content: flex-start; gap: .45rem; }
  .p1-foot-ext { order: -1; }
}

/* 本社（奈良）住所：目立たせず、羽曳野の住所の下に小さく添える（v5 追加 2026-08-26） */
.p1-foot-addr-hq { margin: .45rem 0 0; font-size: .68rem; line-height: 1.7;
  color: var(--gray-2); letter-spacing: .01em; }