@charset "UTF-8";
/* =========================================================================
   サンプル建築会社 コーポレートサイト  style.css
   design-spec.md(l0d.png解析)/ lower-design-policy.md / motion-spec.md 準拠
   構成:
     1. デザイントークン(CSSカスタムプロパティ)
     2. リセット・ベース
     3. レイアウト共通(container / section head / btn)
     4. ヘッダー(ユーティリティバー / メインヘッダー / ナビ / モバイルメニュー)
     5. トップページ各セクション
     6. 下層ページ共通パーツ(ページヒーロー / テーブル / FAQ / フォーム / フィルタ)
     7. フッター / モバイル固定CTAバー
     8. モーション(初期状態・is-inview・reduced-motion)
     9. レスポンシブ
   ========================================================================= */

/* ============================ 1. トークン ============================ */
:root{
  /* --- 配色(design-spec 1-1) --- */
  --color-navy:        #0B2C59;
  --color-navy-deep:   #072048;
  --color-orange:      #DE7137;   /* 装飾罫線・アクセント(文字を乗せない) */
  --color-orange-safe: #B8511A;   /* 白文字を乗せるボタン・タグ(AA適合) */
  --color-green-tag:   #356D30;
  --color-bg-white:    #FFFFFF;
  --color-bg-blue-tint:#DBEAF8;
  --color-text-gray:   #52555A;
  --color-map-light:   #C9DCF0;
  --color-line:        #E4E4E6;

  --color-text:        var(--color-navy);
  --accent-motion:     var(--color-orange); /* 進捗リング・フィルバー(motion-spec 4-2) */

  /* --- スペーシングスケール(8px基準) --- */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px;
  --sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-80:80px; --sp-96:96px; --sp-120:120px;

  /* --- 角丸 --- */
  --radius-card:16px;
  --radius-pill:9999px;

  /* --- 影 --- */
  --shadow-card:0 8px 24px rgba(11,44,89,0.10);
  --shadow-card-hover:0 12px 32px rgba(11,44,89,0.16);

  /* --- レイアウト --- */
  --container:1200px;
  --gutter:24px;
  --header-h:76px;

  /* --- フォント --- */
  --font-sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --font-serif:"Noto Serif JP","PT Serif",Georgia,serif;

  /* --- モーショントークン(motion-spec 3章) --- */
  --ease-standard:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-impact:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-hover:0.2s; --dur-hover-lg:0.3s; --dur-zoom:0.4s;
  --dur-base:0.6s; --dur-slow:0.8s; --dur-curtain:1.0s; --dur-mask-open:1.1s;
  --stagger-step:0.1s; --stagger-step-lg:0.15s;
}

/* ============================ 2. リセット・ベース ============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg-white);
  line-height:1.85;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3,h4{line-height:1.5;font-weight:700;}
/* セクションタイトル級の見出しは明朝体(Noto Serif JP)。本文・カード内小見出し・eyebrow・ボタン・ナビ・フォームラベルはゴシックのまま */
.hero h1,
.page-hero h1,
.section-head h2,
.intro-left h2,
.axis1-body h2,
.area-text h2,
.final-main h2,
.cta-band h2{font-family:var(--font-serif);}
:focus-visible{outline:3px solid var(--color-orange);outline-offset:3px;border-radius:2px;}
::selection{background:var(--color-navy);color:#fff;}

/* ============================ 3. レイアウト共通 ============================ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:88px;position:relative;}
.section--tint{background:var(--color-bg-blue-tint);}
.section--navy{background:var(--color-navy);color:#fff;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* --- セクション見出し(中央・オレンジ下線)design-spec 1-3節パターン1 --- */
.section-head{text-align:center;max-width:760px;margin-inline:auto;margin-bottom:48px;}
.section-tag{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  color:var(--color-orange-safe);margin-bottom:14px;
}
.section-head h2{
  font-size:clamp(1.5rem,3.2vw,2rem);color:var(--color-navy);letter-spacing:.02em;
  position:relative;padding-bottom:18px;
}
.section-head h2::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:30px;height:3px;border-radius:2px;background:var(--color-orange);
}
.section--navy .section-head h2{color:#fff;}
.section-head .lead{margin-top:20px;color:var(--color-text-gray);font-size:1rem;}
.section--navy .section-head .lead{color:rgba(255,255,255,.86);}

/* --- 左寄せ見出し(オレンジ下線)design-spec 1-3節パターン2 --- */
.head-left{margin-bottom:20px;}
.head-left .section-tag{margin-bottom:10px;}
.head-left h2,.head-left h3{
  color:var(--color-navy);position:relative;padding-bottom:14px;font-size:clamp(1.35rem,2.6vw,1.75rem);
}
.head-left h2::after,.head-left h3::after{
  content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:2px;background:var(--color-orange);
}

/* --- ボタン --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--radius-pill);
  font-size:.95rem;font-weight:700;line-height:1.3;letter-spacing:.02em;
  white-space:nowrap;text-align:center;
  transition:background var(--dur-hover) var(--ease-hover),
             color var(--dur-hover) var(--ease-hover),
             border-color var(--dur-hover) var(--ease-hover),
             box-shadow var(--dur-hover) var(--ease-hover),
             transform var(--dur-hover) var(--ease-hover);
}
.btn__arrow{display:inline-block;transition:transform var(--dur-hover-lg) var(--ease-hover);}
.btn:hover .btn__arrow{transform:translateX(5px);}       /* CTA-03 矢印スライド */
.btn--primary{background:var(--color-navy);color:#fff;}
.btn--primary:hover{background:var(--color-navy-deep);box-shadow:var(--shadow-card-hover);}
.btn--accent{background:var(--color-orange-safe);color:#fff;}
.btn--accent:hover{background:#9d440f;box-shadow:var(--shadow-card-hover);}
.btn--outline{background:#fff;color:var(--color-navy);border:1.5px solid var(--color-navy);}
.btn--outline:hover{background:var(--color-navy);color:#fff;}
.btn--lg{padding:18px 40px;font-size:1.02rem;}
.btn--block{width:100%;}

/* --- テキストリンク(矢印付き) --- */
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.92rem;
  color:var(--color-navy);transition:gap var(--dur-hover) var(--ease-hover),color var(--dur-hover) var(--ease-hover);
}
.link-arrow::after{content:"→";transition:transform var(--dur-hover) var(--ease-hover);}
.link-arrow:hover{color:var(--color-orange-safe);}
.link-arrow:hover::after{transform:translateX(4px);}
.center-btn{text-align:center;margin-top:44px;}

/* --- タグ(工種・カテゴリ) --- */
.tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  padding:4px 12px;border-radius:var(--radius-pill);color:#fff;background:var(--color-navy);
}
.tag--kenchiku{background:var(--color-navy);}
.tag--doboku{background:var(--color-orange-safe);}
.tag--news{background:var(--color-orange-safe);}
.tag--works-update{background:var(--color-green-tag);}

/* --- 汎用カード --- */
.card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;}

/* ============================ 4. ヘッダー ============================ */
/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:500;background:#fff;box-shadow:0 1px 0 var(--color-line);}
.utility-bar{background:var(--color-navy);color:#fff;font-size:.78rem;}
.util-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;}
.util-left{color:rgba(255,255,255,.9);letter-spacing:.02em;}
.util-right{display:flex;align-items:center;gap:18px;}
.util-tel{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.9);}
.util-tel img{width:15px;filter:brightness(0) invert(1);}
.util-tel small{color:rgba(255,255,255,.6);font-size:.72rem;}
.util-cta{padding:8px 20px;font-size:.82rem;}

.header-main{transition:padding var(--dur-hover-lg) var(--ease-hover);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;transition:padding var(--dur-hover-lg) var(--ease-hover);}
.site-header.is-scrolled .header-inner{padding-block:8px;}          /* NV-02 ヘッダー縮小 */

.logo-block{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo-mark{width:46px;height:46px;transition:width var(--dur-hover-lg) var(--ease-hover),height var(--dur-hover-lg) var(--ease-hover);}
.site-header.is-scrolled .logo-mark{width:40px;height:40px;}
.logo-text{font-weight:700;font-size:1.18rem;color:var(--color-navy);letter-spacing:.02em;line-height:1.3;}
.logo-text small{display:block;font-weight:500;font-size:.66rem;color:var(--color-text-gray);letter-spacing:.06em;margin-top:1px;}

.gnav ul{display:flex;gap:30px;}
.gnav a{position:relative;font-size:.95rem;font-weight:500;color:var(--color-navy);padding:6px 0;}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--color-orange);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-hover-lg) var(--ease-standard);}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1);}   /* NV-01 下線ドロー */
.gnav a[aria-current="page"]{font-weight:700;}

.hamburger{display:none;width:44px;height:44px;position:relative;flex-shrink:0;}
.hamburger span{position:absolute;left:10px;width:24px;height:2px;background:var(--color-navy);transition:transform .3s var(--ease-standard),opacity .3s;}
.hamburger span:nth-child(1){top:14px;}
.hamburger span:nth-child(2){top:21px;}
.hamburger span:nth-child(3){top:28px;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* モバイルメニュー(NV-03 フルスクリーン) */
.mobile-menu{
  position:fixed;inset:0;z-index:490;background:var(--color-navy);color:#fff;
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--ease-standard),transform .35s var(--ease-standard),visibility .35s;
  overflow-y:auto;
}
.mobile-menu.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.mobile-menu a{
  font-size:1.1rem;font-weight:500;padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.14);
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease-standard),transform .4s var(--ease-standard);
}
.mobile-menu.is-open a{opacity:1;transform:translateY(0);}
.mobile-menu .mm-cta{margin-top:24px;border-bottom:none;}
.mobile-menu .mm-cta .btn{width:100%;}

/* ============================ 5. トップページ ============================ */
/* ----- ヒーロー(MV-05 斜めマスク / MV-03 ケンバーンズ / MV-06 パララックス) ----- */
.hero{position:relative;overflow:hidden;background:#fff;}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;align-items:center;min-height:560px;position:relative;}
.hero-copy{padding:72px 56px 120px max(24px, calc((100vw - 1200px) / 2 + 24px));position:relative;z-index:2;}
.hero-badge-line{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.04em;
  color:var(--color-orange-safe);margin-bottom:20px;
}
.hero h1{
  font-size:clamp(1.75rem,3.6vw,2.7rem);line-height:1.42;color:var(--color-navy);
  letter-spacing:.01em;margin-bottom:22px;
}
.hero p.sub{font-size:1.02rem;color:var(--color-text-gray);margin-bottom:20px;line-height:1.95;}
.hero-area{font-size:.9rem;font-weight:700;color:var(--color-navy);margin-bottom:28px;}
.hero-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.hero-cta .sublink{font-weight:700;font-size:.92rem;color:var(--color-navy);display:inline-flex;align-items:center;gap:6px;transition:gap var(--dur-hover) var(--ease-hover),color var(--dur-hover);}
.hero-cta .sublink::after{content:"→";transition:transform var(--dur-hover) var(--ease-hover);}
.hero-cta .sublink:hover{color:var(--color-orange-safe);}
.hero-cta .sublink:hover::after{transform:translateX(4px);}

/* MV外の恒常フェード:写真をテキスト列側(左)へ拡張し、左端を白背景へグラデーションで溶かす(design l0d.png:約34%まで白→約56%で完全に写真) */
.hero-image{position:absolute;top:0;right:0;bottom:0;width:70%;overflow:hidden;z-index:1;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 6%,#000 38%);
          mask-image:linear-gradient(to right,transparent 0%,transparent 6%,#000 38%);}
.hero-photo-inner{position:absolute;top:-8%;left:0;width:100%;height:116%;will-change:transform;}
.hero-image .hero-photo{width:100%;height:100%;object-fit:cover;will-change:transform;}
/* MV-03 ケンバーンズ(マスク完了後に付与・img にスケール、パララックスは inner にtranslate) */
.hero-image.is-open .hero-photo{animation:kenburns 16s ease-in-out 0s infinite alternate;}
@keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.10);}}
/* MV-05 斜めマスク2枚(.js スコープ必須:JS無効時はマスク自体を出さず写真を素で表示) */
.js .hero-mask{position:absolute;inset:0;z-index:2;background:#fff;pointer-events:none;
  transition:transform var(--dur-mask-open) var(--ease-standard);}
.js .hero-mask--l{clip-path:polygon(0 0,58% 0,42% 100%,0 100%);}
.js .hero-mask--r{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%);}
.js .hero-image.is-open .hero-mask--l{transform:translateX(-110%);}
.js .hero-image.is-open .hero-mask--r{transform:translateX(110%);}

/* ----- 実績数値バッジ(stat-cluster / TX-04 強化版) ----- */
/* 背景は透明:バッジ行をヒーロー写真の下側に大きく重ねる(design:写真高の約19%が重なる)。カード間・両脇からは写真が見える */
.stat-cluster{background:transparent;padding-block:0 64px;margin-top:-104px;position:relative;z-index:6;}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:960px;margin-inline:auto;}
.stat-card{
  display:flex;align-items:center;gap:18px;background:#fff;border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:22px 26px;
}
.stat-icon{position:relative;width:56px;height:56px;flex-shrink:0;display:grid;place-items:center;
  background:var(--color-navy);border-radius:50%;}
.stat-icon .ic-fill{width:100%;height:100%;object-fit:contain;}
.stat-icon .ic-line{width:56%;filter:brightness(0) invert(1);} /* ネイビー線画→白 */
/* badge-history.png 専用:不透明ネイビー円+建物シルエット透明抜き画像は、抜き部分に白背景を透かして建物を白く見せる(ic-line方式のネイビー背景とは別扱い) */
.stat-icon.bg-white,.svc-icon.bg-white,.summary-badge .sb-icon.bg-white{background:#fff;}
.stat-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none;}
.stat-ring circle{fill:none;stroke:var(--accent-motion);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:opacity .4s var(--ease-standard);}
.stat-text .stat-num{font-family:var(--font-serif);font-weight:700;font-size:1.9rem;color:var(--color-navy);
  line-height:1.1;font-variant-numeric:tabular-nums;display:inline-block;}
.stat-text .stat-unit{font-family:var(--font-serif);font-weight:700;font-size:1.1rem;color:var(--color-navy);}
.stat-text .stat-label{font-size:.78rem;color:var(--color-text-gray);margin-top:3px;}
.stat-num.is-counted{animation:countpunch .15s var(--ease-impact);}
@keyframes countpunch{0%{transform:scale(1.04);}100%{transform:scale(1);}}

/* ----- イントロ(私たちについて) ----- */
.intro{background:#fff;}
.intro-card{
  position:relative;display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;
  background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;
}
.intro-left{padding:48px 40px;}
.intro-left .section-tag{display:block;}
.intro-left h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--color-navy);line-height:1.5;position:relative;padding-bottom:16px;}
.intro-left h2::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:3px;border-radius:2px;background:var(--color-orange);}
.intro-right{position:relative;padding:48px 44px;display:flex;align-items:center;min-height:280px;}
.intro-right .intro-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.intro-right::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#fff 6%,rgba(255,255,255,.86) 40%,rgba(255,255,255,.55) 100%);}
.intro-right p{position:relative;z-index:2;color:var(--color-text-gray);font-size:1rem;line-height:1.95;}

/* ----- 訴求軸1 ネイビー統計バナー(TX-04 フィルバー) ----- */
.axis1{background:var(--color-navy);color:#fff;padding-block:0;overflow:hidden;}
.axis1-grid{display:grid;grid-template-columns:0.9fr 1.1fr;align-items:stretch;}
.axis1-photo-wrap{position:relative;min-height:420px;overflow:hidden;}
.axis1-photo{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;will-change:transform;}
.axis1-body{padding:72px 56px;}
.axis1-body h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:#fff;line-height:1.55;margin-bottom:36px;}
.axis1-numbers{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.bignum{position:relative;}
.bignum .figrow{display:flex;align-items:baseline;gap:4px;}
/* 数字サイズはビューポート別:狭幅では2カラムに収まる控えめサイズ(base)、広いデスクトップは min-width:1025px で design相当まで拡大 */
.bignum .figure{font-family:var(--font-serif);font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);
  line-height:1;color:#fff;font-variant-numeric:tabular-nums;display:inline-block;}
.bignum .unit{font-family:var(--font-serif);font-weight:700;font-size:1.5rem;color:#fff;}
.bignum .fillbar{height:2px;width:0;background:var(--accent-motion);margin:14px 0 12px;transition:none;}
.bignum .cap{font-size:.86rem;color:rgba(255,255,255,.82);line-height:1.7;}
.bignum.is-counted .figure{animation:countpunch .15s var(--ease-impact);}

/* ----- 事業内容 2カード ----- */
.services{background:#fff;}
.service-two{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1000px;margin-inline:auto;}
.service-block{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow var(--dur-hover-lg) var(--ease-hover);}
.service-block .photo{aspect-ratio:16/9;overflow:hidden;}
.service-block .photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-zoom) var(--ease-standard);}
.service-block:hover .photo img{transform:scale(1.06);}   /* CD-03 */
.service-block .body{padding:26px 28px 30px;flex:1;display:flex;flex-direction:column;}
.service-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.svc-icon{width:48px;height:48px;flex-shrink:0;background:var(--color-navy);border-radius:50%;display:grid;place-items:center;}
.svc-icon .ic-fill{width:100%;height:100%;object-fit:contain;}
.svc-icon .ic-line{width:60%;filter:brightness(0) invert(1);}
.service-block h3{font-size:1.25rem;color:var(--color-navy);}
.service-block p{font-size:.92rem;color:var(--color-text-gray);line-height:1.9;margin-bottom:22px;}
.service-block .btn{margin-top:auto;align-self:flex-start;}

/* ----- 選ばれる3つの理由 ----- */
.reasons{background:#fff;}
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1000px;margin-inline:auto;}
.reason-card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:36px 28px 32px;text-align:center;}
.reason-num{font-family:var(--font-serif);font-weight:700;font-size:1.5rem;color:var(--color-orange);line-height:1;margin-bottom:12px;}
.reason-icon{height:76px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.reason-icon img{height:100%;width:auto;object-fit:contain;}
.reason-card h3{font-size:1.12rem;color:var(--color-navy);margin-bottom:12px;}
.reason-card p{font-size:.9rem;color:var(--color-text-gray);line-height:1.9;text-align:left;}

/* ----- 施工実績ピックアップ ----- */
.works-pickup{background:#fff;}
.works-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:1100px;margin-inline:auto;margin-bottom:44px;}
.works-head .section-head{text-align:left;margin:0;}
.works-head .section-head h2::after{left:0;transform:none;}
.works-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;max-width:1100px;margin-inline:auto;}
.works-grid .work-card{flex:0 1 336px;max-width:350px;}
.work-card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;
  display:flex;flex-direction:column;transition:transform var(--dur-hover-lg) var(--ease-hover),box-shadow var(--dur-hover-lg) var(--ease-hover);}
.work-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);}  /* CD-02 */
.work-card .thumb{aspect-ratio:4/3;overflow:hidden;}
.work-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-zoom) var(--ease-standard);}
.work-card:hover .thumb img{transform:scale(1.06);}   /* CD-03 */
.work-card .body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;gap:10px;}
.work-card h3{font-size:1.02rem;color:var(--color-navy);line-height:1.6;}
.work-card p{font-size:.86rem;color:var(--color-text-gray);line-height:1.85;}
.work-card .btn{margin-top:auto;align-self:flex-start;}

/* ----- 対応エリア ----- */
.area{background:#fff;}
/* 基本の対応エリアグリッド(下層 service 等で使用:地図+テキストの2カラム) */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1060px;margin-inline:auto;}
/* トップの対応エリア:水色インセットパネル + 3カラム(テキスト|地図|チェックリストカード) */
.area-inner{background:var(--color-bg-blue-tint);border-radius:24px;padding:clamp(32px,4.5vw,60px) clamp(24px,4vw,60px);max-width:1160px;margin-inline:auto;}
.area-inner .area-grid{grid-template-columns:0.82fr 1.55fr 0.85fr;gap:clamp(24px,3vw,44px);max-width:none;}
.area-map-wrap{position:relative;overflow:hidden;}
.area-map-wrap img{width:100%;height:auto;will-change:transform;}
.area-text h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--color-navy);line-height:1.55;position:relative;padding-bottom:16px;margin-bottom:20px;}
.area-text h2::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:3px;border-radius:2px;background:var(--color-orange);}
.area-text .section-tag{display:block;}
.area-text p{color:var(--color-text-gray);font-size:.98rem;line-height:1.95;margin-bottom:20px;}
/* パーツ:主な対応エリア(チェックリストカード) */
.area-card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:26px 26px 28px;}
.area-card-title{text-align:center;font-size:1.05rem;font-weight:700;color:var(--color-navy);letter-spacing:.02em;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid rgba(11,44,89,.12);}
.area-list{display:flex;flex-direction:column;gap:16px;}
.area-list li{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:500;color:var(--color-navy);}
.area-list li img{width:18px;height:18px;flex-shrink:0;}
.area-note{font-size:.8rem;color:var(--color-text-gray);margin-top:0;}

/* ----- ご相談の流れ ----- */
.flow{background:#fff;}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1080px;margin-inline:auto;align-items:start;}
.flow-step{text-align:center;padding:8px;}
.flow-stepnum{width:40px;height:40px;border-radius:50%;background:var(--color-navy);color:#fff;
  font-family:var(--font-serif);font-weight:700;font-size:1.05rem;display:grid;place-items:center;margin:0 auto 16px;}
.flow-icon{height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.flow-icon img{height:100%;width:auto;object-fit:contain;}
.flow-step h3{font-size:1rem;color:var(--color-navy);margin-bottom:10px;}
.flow-step p{font-size:.85rem;color:var(--color-text-gray);line-height:1.8;}
.flow-steps .flow-arrow{align-self:center;display:none;}
/* 区切り矢印はステップ間に擬似要素で(PC) */
.flow-steps{position:relative;}
.flow-step{position:relative;}
.flow-step:not(:first-child)::before{
  content:"›";position:absolute;left:-8px;top:8px;transform:translateX(-50%);
  font-size:1.8rem;color:var(--color-map-light);font-weight:400;line-height:1;
}

/* ----- お知らせ(リスト形式) ----- */
.news{background:#fff;}
.news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:960px;margin-inline:auto;margin-bottom:36px;}
.news-head .section-head{text-align:left;margin:0;}
.news-head .section-head h2::after{left:0;transform:none;}
.news-list{max-width:960px;margin-inline:auto;border-top:1px solid var(--color-line);}
.news-item{display:flex;align-items:center;gap:22px;padding:20px 6px;border-bottom:1px solid var(--color-line);
  transition:background var(--dur-hover) var(--ease-hover);}
.news-item:hover{background:#f7fafd;}
.news-item time{font-size:.86rem;color:var(--color-text-gray);flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.news-item .tag{flex-shrink:0;}
.news-item .news-title{font-size:.95rem;font-weight:500;color:var(--color-navy);}
.news-item:hover .news-title{color:var(--color-orange-safe);}

/* ----- 会社概要サマリー ----- */
.company{background:#fff;}
.company-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;max-width:1040px;margin-inline:auto;}
.company-photo-wrap{position:relative;overflow:hidden;border-radius:var(--radius-card);box-shadow:var(--shadow-card);aspect-ratio:4/3;}
.company-photo-wrap img{position:absolute;top:-6%;left:0;width:100%;height:112%;object-fit:cover;will-change:transform;}
.company-note{font-size:1rem;color:var(--color-navy);font-weight:500;margin-bottom:20px;line-height:1.9;}
.company-table{width:100%;border-collapse:collapse;margin-bottom:26px;}
.company-table th,.company-table td{text-align:left;padding:13px 4px;border-bottom:1px solid var(--color-line);font-size:.92rem;vertical-align:top;}
.company-table th{color:var(--color-navy);font-weight:700;width:34%;white-space:nowrap;}
.company-table td{color:var(--color-text-gray);}
.company-placeholder{display:inline-block;font-size:.76rem;color:var(--color-text-gray);background:#eef2f7;border-radius:var(--radius-pill);padding:2px 12px;}

/* ----- 最終CTA帯 ----- */
.final-cta{background:var(--color-navy);color:#fff;overflow:hidden;}
.final-grid{display:grid;grid-template-columns:0.7fr 1.3fr;gap:44px;align-items:center;}
.final-photo{overflow:hidden;border-radius:var(--radius-card);}
.final-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.final-main h2{font-size:clamp(1.4rem,2.8vw,2rem);color:#fff;line-height:1.5;margin-bottom:18px;}
.final-main p{color:rgba(255,255,255,.86);margin-bottom:26px;}
.final-actions{display:flex;flex-wrap:wrap;gap:28px;align-items:center;}
.final-tel{color:#fff;}
.final-tel .lbl{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.75);margin-bottom:4px;}
.final-tel .lbl img{width:16px;filter:brightness(0) invert(1);}
.final-tel .num{font-family:var(--font-serif);font-weight:700;font-size:1.5rem;color:#fff;}
.final-tel .num small{display:block;font-family:var(--font-sans);font-weight:400;font-size:.72rem;color:rgba(255,255,255,.7);}
.final-note{font-size:.82rem;color:rgba(255,255,255,.75);margin-top:24px;line-height:1.9;}

/* ============================ 6. 下層ページ共通 ============================ */
/* パンくず */
.breadcrumb{background:#fff;}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--color-text-gray);padding-top:20px;}
.breadcrumb li{display:flex;align-items:center;gap:6px;}
.breadcrumb li:not(:last-child)::after{content:"›";color:var(--color-map-light);}
.breadcrumb a:hover{color:var(--color-orange-safe);text-decoration:underline;}
.breadcrumb [aria-current="page"]{color:var(--color-navy);}

/* ページヒーロー(タイトル帯)lower-design-policy 1-2 */
.page-hero{background:#fff;padding-block:36px 40px;}
.page-hero h1{font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--color-navy);position:relative;padding-bottom:18px;}
.page-hero h1::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:4px;border-radius:2px;background:var(--color-orange);}
.page-hero .page-lead{margin-top:22px;color:var(--color-text-gray);font-size:1rem;max-width:820px;line-height:1.95;}

/* 記事本文 */
.prose{max-width:820px;margin-inline:auto;}
.prose h2{font-size:1.4rem;color:var(--color-navy);margin:40px 0 16px;position:relative;padding-left:16px;}
.prose h2::before{content:"";position:absolute;left:0;top:.25em;width:5px;height:1.1em;border-radius:2px;background:var(--color-orange);}
.prose h3{font-size:1.12rem;color:var(--color-navy);margin:28px 0 12px;}
.prose p{color:var(--color-text-gray);margin-bottom:16px;line-height:1.95;}
.prose ul{margin:0 0 16px;padding-left:2px;}
.prose ul li{position:relative;padding-left:22px;margin-bottom:8px;color:var(--color-text-gray);}
.prose ul li::before{content:"";position:absolute;left:2px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--color-orange);}
.prose img{border-radius:var(--radius-card);box-shadow:var(--shadow-card);margin:20px 0;}

/* 会社概要ページ:表 */
.info-table{width:100%;border-collapse:collapse;max-width:820px;margin-inline:auto;background:#fff;
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;}
.info-table th,.info-table td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--color-line);font-size:.94rem;vertical-align:top;}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none;}
.info-table th{color:var(--color-navy);font-weight:700;width:32%;background:#f7fafd;white-space:nowrap;}
.info-table td{color:var(--color-text-gray);}

/* 代表挨拶 */
.greeting-grid{display:grid;grid-template-columns:0.75fr 1.25fr;gap:44px;align-items:start;max-width:1000px;margin-inline:auto;}
.greeting-photo{overflow:hidden;border-radius:var(--radius-card);box-shadow:var(--shadow-card);}
.greeting-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.greeting-body .greeting-lead{font-size:1.3rem;font-weight:700;color:var(--color-navy);line-height:1.6;margin-bottom:22px;position:relative;padding-bottom:16px;}
.greeting-body .greeting-lead::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:3px;border-radius:2px;background:var(--color-orange);}
.greeting-body p{color:var(--color-text-gray);margin-bottom:16px;line-height:1.95;}
.greeting-sign{text-align:right;font-weight:700;color:var(--color-navy);margin-top:24px;}
.greeting-sign small{display:block;font-weight:400;font-size:.82rem;color:var(--color-text-gray);}

/* 理念3カード(選ばれる理由スタイル流用) */
.philosophy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1000px;margin-inline:auto;}
.philosophy-card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:36px 28px;text-align:center;}
.philosophy-card .reason-icon{height:70px;}
.philosophy-card h3{font-size:1.3rem;color:var(--color-navy);margin-bottom:14px;letter-spacing:.05em;}
.philosophy-card p{font-size:.9rem;color:var(--color-text-gray);line-height:1.9;text-align:left;}

/* 資格・許認可 プレースホルダー枠(P16 / CD-05) */
.cred-box{max-width:820px;margin-inline:auto;background:#fff;border:1.5px solid var(--color-line);border-radius:var(--radius-card);padding:28px 32px;}
.cred-box .cred-lead{color:var(--color-text-gray);margin-bottom:18px;}
.cred-list li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-line);font-weight:700;color:var(--color-navy);}
.cred-list li:last-child{border-bottom:none;}
.cred-icon{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.cred-icon img{width:44px;height:44px;}

/* アクセス */
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;max-width:1000px;margin-inline:auto;}
.access-map{border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);border:0;}
.access-map iframe{width:100%;height:340px;border:0;display:block;}
.access-info p{color:var(--color-text-gray);margin-bottom:14px;line-height:1.95;}
.access-info .addr{display:flex;align-items:flex-start;gap:10px;font-weight:700;color:var(--color-navy);font-size:1.05rem;margin-bottom:16px;}
.access-info .addr img{width:22px;margin-top:3px;}

/* 事業内容:工種ブロック */
.service-detail{max-width:960px;margin-inline:auto;}
.service-item{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--color-line);}
.service-item:last-child{border-bottom:none;}
.service-item .si-icon{width:56px;height:56px;flex-shrink:0;background:var(--color-bg-blue-tint);border-radius:50%;display:grid;place-items:center;}
.service-item .si-icon img{width:60%;height:60%;object-fit:contain;}
.service-item h3{font-size:1.2rem;color:var(--color-navy);margin-bottom:10px;}
.service-item p{color:var(--color-text-gray);line-height:1.95;}
.service-photo-band{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:36px auto 0;}
.service-photo-band img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-card);box-shadow:var(--shadow-card);}

/* お見積り注記ボックス */
.note-box{max-width:820px;margin-inline:auto;background:var(--color-bg-blue-tint);border-radius:var(--radius-card);
  padding:28px 32px;display:flex;gap:18px;align-items:flex-start;}
.note-box img{width:44px;flex-shrink:0;}
.note-box p{color:var(--color-navy);line-height:1.9;font-size:.96rem;}

/* 流れ(縦・下層用)は .flow-steps を流用 */

/* FAQ アコーディオン(P6) */
.faq-list{max-width:860px;margin-inline:auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;}
.faq-q{width:100%;display:flex;align-items:center;gap:14px;padding:20px 24px;text-align:left;font-weight:700;color:var(--color-navy);font-size:1rem;line-height:1.6;}
.faq-q .faq-qmark{width:30px;height:30px;flex-shrink:0;background:var(--color-bg-blue-tint);border-radius:50%;display:grid;place-items:center;color:var(--color-navy);font-family:var(--font-serif);font-weight:700;}
.faq-q .faq-toggle{margin-left:auto;flex-shrink:0;width:24px;height:24px;position:relative;transition:transform .3s var(--ease-standard);}
.faq-q .faq-toggle::before,.faq-q .faq-toggle::after{content:"";position:absolute;top:50%;left:50%;background:var(--color-orange-safe);border-radius:2px;transition:opacity .3s;}
.faq-q .faq-toggle::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.faq-q .faq-toggle::after{width:2px;height:14px;transform:translate(-50%,-50%);}
.faq-q[aria-expanded="true"] .faq-toggle::after{opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-standard);}
.faq-a-inner{padding:0 24px 22px 68px;color:var(--color-text-gray);line-height:1.95;font-size:.94rem;}
.faq-a-inner .faq-note{display:inline-block;font-size:.78rem;color:var(--color-text-gray);background:#f4f1ea;border-radius:6px;padding:4px 10px;margin-top:8px;}

/* 施工実績:フィルタ */
.works-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto 40px;}
.filter-btn{border:1.5px solid var(--color-line);border-radius:var(--radius-pill);padding:9px 20px;font-size:.86rem;font-weight:700;color:var(--color-navy);background:#fff;transition:all var(--dur-hover) var(--ease-hover);}
.filter-btn:hover{border-color:var(--color-navy);}
.filter-btn.is-active{background:var(--color-navy);color:#fff;border-color:var(--color-navy);}
.works-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1100px;margin-inline:auto;}

/* サマリー(実績)バッジ大 */
.summary-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:720px;margin:0 auto 8px;}
.summary-badge{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:32px 28px;display:flex;align-items:center;gap:22px;}
.summary-badge .sb-icon{width:64px;height:64px;flex-shrink:0;background:var(--color-navy);border-radius:50%;display:grid;place-items:center;}
.summary-badge .sb-icon img{width:64%;filter:brightness(0) invert(1);}
.summary-badge .sb-icon .ic-fill{width:100%;height:100%;filter:none;object-fit:contain;}
.summary-badge .sb-num{font-family:var(--font-serif);font-weight:700;font-size:2.4rem;color:var(--color-navy);line-height:1;font-variant-numeric:tabular-nums;display:inline-block;}
.summary-badge .sb-unit{font-family:var(--font-serif);font-weight:700;font-size:1.2rem;color:var(--color-navy);}
.summary-badge .sb-label{font-size:.82rem;color:var(--color-text-gray);margin-top:6px;}
.summary-badge .sb-num.is-counted{animation:countpunch .15s var(--ease-impact);}

/* 汎用:下層CTA帯 */
.cta-band{background:var(--color-navy);color:#fff;text-align:center;}
.cta-band h2{font-size:clamp(1.4rem,2.8vw,1.9rem);color:#fff;margin-bottom:16px;}
.cta-band h2::after{display:none;}
.cta-band p{color:rgba(255,255,255,.86);margin-bottom:28px;max-width:640px;margin-inline:auto;}

/* お問い合わせ:フォーム */
.contact-layout{max-width:820px;margin-inline:auto;}
.form-intro{background:var(--color-bg-blue-tint);border-radius:var(--radius-card);padding:18px 24px;font-size:.88rem;color:var(--color-navy);margin-bottom:32px;line-height:1.85;}
.form-field{margin-bottom:24px;}
.form-field label{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--color-navy);margin-bottom:8px;font-size:.94rem;}
.badge-req,.badge-opt{font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);}
.badge-req{background:var(--color-orange-safe);color:#fff;}
.badge-opt{background:#eef2f7;color:var(--color-text-gray);}
.form-field input,.form-field select,.form-field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--color-navy);
  border:1.5px solid var(--color-line);border-radius:10px;padding:13px 16px;background:#fff;
  transition:border-color var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover) var(--ease-hover);
}
.form-field textarea{resize:vertical;min-height:140px;line-height:1.8;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--color-navy);box-shadow:0 0 0 3px rgba(11,44,89,.12);}
.form-field .hint{font-size:.78rem;color:var(--color-text-gray);margin-top:6px;}
.form-consent{display:flex;align-items:flex-start;gap:10px;background:#f7fafd;border-radius:10px;padding:16px 18px;margin-bottom:28px;font-size:.9rem;color:var(--color-navy);}
.form-consent input{width:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:var(--color-navy);}
.form-consent a{text-decoration:underline;font-weight:700;}
.form-submit{text-align:center;}
.contact-side{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:820px;margin:44px auto 0;}
.contact-card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:26px 28px;}
.contact-card h3{font-size:1.05rem;color:var(--color-navy);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.contact-card h3 img{width:26px;}
.contact-card p{font-size:.9rem;color:var(--color-text-gray);line-height:1.9;margin-bottom:10px;}
.contact-card .tel-num{font-family:var(--font-serif);font-weight:700;font-size:1.3rem;color:var(--color-navy);}

/* お問い合わせ・流れ3ステップ(横並び) */
.steps-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px;margin:0 auto;}
.steps-3 .flow-step:not(:first-child)::before{font-size:1.6rem;}

/* プライバシーポリシー */
.policy{max-width:820px;margin-inline:auto;}
.policy .policy-intro{color:var(--color-text-gray);margin-bottom:28px;line-height:1.95;}
.policy section{padding:0;margin-bottom:28px;}
.policy h2{font-size:1.15rem;color:var(--color-navy);position:relative;padding-left:16px;margin-bottom:12px;}
.policy h2::before{content:"";position:absolute;left:0;top:.2em;width:5px;height:1.15em;border-radius:2px;background:var(--color-orange);}
.policy p,.policy li{color:var(--color-text-gray);line-height:1.95;}
.policy ul{margin:8px 0 8px 4px;}
.policy ul li{position:relative;padding-left:20px;margin-bottom:6px;}
.policy ul li::before{content:"";position:absolute;left:2px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--color-orange);}
.policy .policy-date{margin-top:32px;color:var(--color-text-gray);font-size:.9rem;}

/* ============================ 7. フッター・モバイルバー ============================ */
/* ===== footer ===== */
.site-footer{background:var(--color-navy);color:rgba(255,255,255,.82);padding-block:56px 0;font-size:.9rem;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;}
.footer-brand .logo-block{margin-bottom:16px;}
.footer-brand .logo-mark{filter:brightness(0) invert(1);opacity:.95;}
.footer-brand .logo-text{color:#fff;}
.footer-brand .logo-text small{color:rgba(255,255,255,.6);}
.footer-slogan{color:rgba(255,255,255,.7);font-size:.85rem;margin-bottom:16px;}
.footer-brand address{font-style:normal;line-height:1.9;color:rgba(255,255,255,.78);font-size:.85rem;}
.footer-col h4{color:#fff;font-size:.92rem;margin-bottom:16px;font-weight:700;}
.footer-col li{margin-bottom:10px;}
.footer-col a{color:rgba(255,255,255,.78);font-size:.86rem;transition:color var(--dur-hover) var(--ease-hover),padding var(--dur-hover);}
.footer-col a:hover{color:#fff;}
.footer-cta{margin-top:20px;}
.footer-cta .btn{width:100%;max-width:280px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-block:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.78rem;color:rgba(255,255,255,.6);}
.footer-bottom a:hover{color:#fff;}

/* モバイル固定CTAバー(CTA-05) */
.mobile-cta-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:400;background:#fff;
  box-shadow:0 -2px 12px rgba(11,44,89,.12);padding:8px 12px;
  transform:translateY(100%);transition:transform .35s var(--ease-standard);}
.mobile-cta-bar.is-visible{transform:translateY(0);}
.mobile-cta-bar .btn{width:100%;}

/* ============================ 8. モーション ============================ */
/* 初期状態(JS未発火/発火前) */
[data-motion]{will-change:auto;}
.js [data-motion="sc-03"],
.js [data-motion="tx-03"],
.js [data-motion="cd-01"]{opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
.js [data-motion="cd-01"][data-delay]{transition-delay:var(--d,0s);}
.js .is-inview{opacity:1!important;transform:none!important;}

/* TX-03 見出し行マスク/スライド(簡易:下から) */
.js [data-motion="tx-03"]{transform:translateY(26px);}

/* MV-02 行マスクリビール(ヒーローh1) */
.js .hero h1 .line{display:block;overflow:hidden;}
.js .hero h1 .line > span{display:block;transform:translateY(105%);transition:transform var(--dur-slow) var(--ease-standard);}
.js .hero.is-loaded h1 .line:nth-child(1) > span{transition-delay:.1s;}
.js .hero.is-loaded h1 .line:nth-child(2) > span{transition-delay:.2s;}
.js .hero.is-loaded h1 .line:nth-child(3) > span{transition-delay:.3s;}
.js .hero.is-loaded h1 .line:nth-child(4) > span{transition-delay:.4s;}
.js .hero.is-loaded h1 .line > span{transform:translateY(0);}
.hero h1 .line{line-height:1.4;}
/* ヒーローの他要素ロード演出 */
.js .hero .fade-load{opacity:0;transform:translateY(16px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
.js .hero.is-loaded .fade-load{opacity:1;transform:none;}
.js .hero.is-loaded .fade-load.d1{transition-delay:.5s;}
.js .hero.is-loaded .fade-load.d2{transition-delay:.6s;}
.js .hero.is-loaded .fade-load.d3{transition-delay:.7s;}
.js .hero.is-loaded .fade-load.d4{transition-delay:.8s;}

/* SC-04 画像カーテンリビール */
.js [data-motion="sc-04"]{position:relative;}
.js [data-motion="sc-04"]::after{content:"";position:absolute;inset:0;background:#fff;z-index:3;
  transform:scaleY(1);transform-origin:bottom;transition:transform var(--dur-curtain) var(--ease-soft);}
.js [data-motion="sc-04"].is-inview::after{transform:scaleY(0);}

/* CD-05 ボーダードロー(枠) */
.js [data-motion="cd-05"]{position:relative;}

/* Reduced-motion 一括無効化(motion-spec 8-1) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .js [data-motion]{opacity:1!important;transform:none!important;}
  .js .hero h1 .line > span{transform:none!important;}
  .js .hero .fade-load{opacity:1!important;transform:none!important;}
  .js [data-motion="sc-04"]::after{display:none!important;}
  .hero-image.is-open .hero-photo{animation:none!important;}
}

/* ============================ 9. レスポンシブ ============================ */
/* 広いデスクトップ:訴求軸1バナーを design l0d.png 相当(写真≈36%/テキスト≈64%)にし、大数字を見出しの約3倍まで拡大 */
@media (min-width:1025px){
  .axis1-grid{grid-template-columns:0.72fr 1.28fr;}
  .bignum .figure{font-size:clamp(3.4rem,6.4vw,6.2rem);}
  .bignum .unit{font-size:clamp(1.6rem,2.2vw,2.1rem);}
}

@media (max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
  .hero-copy{padding-right:32px;}
  /* トップ対応エリア:3カラムをタブレット以下で縦積み */
  .area-inner .area-grid{grid-template-columns:1fr;gap:28px;}
  .area-inner .area-map-wrap{max-width:520px;margin-inline:auto;}
  .area-inner .area-card{max-width:520px;margin-inline:auto;width:100%;}
}

@media (max-width:768px){
  .section{padding-block:56px;}
  .utility-bar{display:none;}                 /* SP: ユーティリティバー非表示(5-2) */
  .gnav{display:none;}
  .hamburger{display:block;}
  body{padding-bottom:70px;}
  .mobile-cta-bar{display:block;}

  /* ヒーロー */
  .hero-grid{grid-template-columns:1fr;min-height:0;}
  .hero-copy{padding:44px 20px 36px;max-width:none;justify-self:stretch;order:1;}
  /* SP:写真は縦積みに戻す。position:relative を維持し内部の絶対配置写真の包含ブロックを保つ(staticにすると写真がヒーロー全体へ広がる) */
  .hero-image{position:relative;top:auto;right:auto;bottom:auto;width:auto;order:2;min-height:0;aspect-ratio:16/10;z-index:auto;
    -webkit-mask-image:none;mask-image:none;}
  .hero-cta{gap:14px;}
  .hero-cta .btn{width:100%;}

  /* stat */
  .stat-cluster{margin-top:0;padding-top:40px;padding-bottom:40px;}
  .stat-row{grid-template-columns:1fr;gap:14px;}
  .stat-card{padding:18px 22px;}

  /* intro */
  .intro-card{grid-template-columns:1fr;}
  .intro-left{padding:32px 24px 20px;}
  .intro-right{padding:24px 24px 32px;min-height:0;}
  .intro-right::before{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.7) 100%);}

  /* axis1 */
  .axis1-grid{grid-template-columns:1fr;}
  .axis1-photo-wrap{min-height:0;aspect-ratio:16/9;order:-1;}
  .axis1-photo{position:absolute;inset:-4% 0;height:108%;}
  .axis1-body{padding:40px 24px;}
  .axis1-numbers{gap:24px;}

  /* services / reasons / works / philosophy / summary */
  .service-two,.reason-grid,.works-grid,.works-list-grid,.philosophy-grid,.summary-badges,.service-photo-band,.contact-side{grid-template-columns:1fr;}
  .works-head,.news-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .works-head .center-btn,.news-head{margin-bottom:24px;}

  /* area(下層 service の2カラムを縦積み) */
  .area-grid{grid-template-columns:1fr;gap:28px;}

  /* flow */
  .flow-steps,.steps-3{grid-template-columns:1fr;gap:8px;max-width:420px;}
  .flow-step{display:grid;grid-template-columns:auto 1fr;gap:16px;text-align:left;align-items:center;padding:14px 6px;}
  .flow-stepnum{margin:0;}
  .flow-icon{grid-row:1 / 3;grid-column:1;display:none;}
  .flow-step h3{margin-bottom:4px;}
  .flow-step:not(:first-child)::before{content:"↓";position:static;transform:none;display:block;grid-column:1 / -1;text-align:center;font-size:1.4rem;margin:-2px 0;color:var(--color-map-light);}

  /* news */
  .news-item{flex-wrap:wrap;gap:8px 14px;padding:16px 4px;}
  .news-item .news-title{flex-basis:100%;}

  /* company */
  .company-grid{grid-template-columns:1fr;gap:28px;}
  .company-photo-wrap{order:-1;}

  /* final cta */
  .final-grid{grid-template-columns:1fr;gap:24px;}
  .final-photo{max-width:360px;}
  .final-actions{gap:18px;}
  .final-actions .btn{width:100%;}

  /* 下層 */
  .greeting-grid,.access-grid{grid-template-columns:1fr;gap:24px;}
  .greeting-photo{max-width:320px;}
  .service-item{grid-template-columns:1fr;gap:12px;}
  .service-item .si-icon{width:48px;height:48px;}
  .info-table th{width:38%;font-size:.86rem;}
  .info-table th,.info-table td{padding:12px 14px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:24px 20px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-support{grid-column:1 / -1;}
}

@media (max-width:420px){
  .footer-top{grid-template-columns:1fr;}
  .stat-text .stat-num{font-size:1.7rem;}
}