/* ===== 20_site.css ===== */
/* ===== :root 画像変数（data:URI → {{MEDIA}}トークン化済み） ===== */
:root{
--i-about-band-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/about-band.webp");
--i-work-las-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/work-las.webp");
--i-work-conv-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/work-conv.webp");
--i-method-las-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/method-las.webp");
--i-method-conv-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/method-conv.webp");
--i-proof-las-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/proof-las.webp");
--i-proof-cert-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/proof-cert.webp");
--i-door-order-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/door-order.webp");
--i-door-recruit-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/door-recruit.webp");
--i-hero-site-1-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/hero-site-1.webp");
--i-hero-site-2-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/hero-site-2.webp");
--i-hero-site-3-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/hero-site-3.webp");
--i-work-01-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/work-01.webp");
--i-work-02-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/work-02.webp");
--i-work-03-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/work-03.webp");
--i-blog-01-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/blog-01.webp");
--i-blog-02-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/blog-02.webp");
--i-blog-03-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/blog-03.webp");
--i-adobestock-77864621-jpeg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/adobestock-77864621.webp");
--i-belief-helmet-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/belief-helmet.webp");
--i-work-04-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/work-04.webp");
--i-nw-pour-work-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/nw-pour-work.webp");
--i-recruit-staff-walk-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/recruit-staff-walk.webp");
--i-recruit-env-staff-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/recruit-env-staff.webp");
--i-adobestock-77864621-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/adobestock-77864621-jpg.webp");
--i-nw-env-atmosphere-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/nw-env-atmosphere.webp");
--i-staff-illust-k-png: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/staff-illust-k.webp");
--i-staff-illust-s-png: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/staff-illust-s.webp");
--i-staff-illust-y2-png: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/staff-illust-y2.webp");
--i-adobestock-179710260-jpeg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/adobestock-179710260.webp");
--i-nw-rebar-mesh-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/nw-rebar-mesh.webp");
--i-cta-phone-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/cta-phone.webp");
--i-light-fx-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/light-fx.webp");
--i-work-05-jpg: url("https://cdn.cuezilla-cms.com/enjoyworks-test25.tech/images/1465/work-05.webp");
}

/* ===== CSS.home（トップページ） ===== */
/* ============================================================
   株式会社TAKEDAGUMI — Corporate Site / Top
   コンセプト：確かを、組み上げる。
   配色：型枠素材色（ウレタンオレンジ／コンパネ木肌／コンクリートグレー）

   ── 実装ルール（厳守）────────────────────────────────
   1. フォントサイズは最低 1rem(=16px) 以上。これ未満は禁止。
   2. 固定値ではなく clamp() で流動。中間幅のズレは clamp で吸収。
   3. ブレークポイントは構造が変わる2点のみ（1240px / 640px）。
   ──────────────────────────────────────────────────────
   ============================================================ */
:root{
  /* トープ基調（上品なグレージュ／型枠・コンクリート連想） */
  --orange:#C5611F;     /* アクセント：クリアなコッパーオレンジ */
  --orange-d:#A5440D;   /* 濃いバーントオレンジ（白背景の文字可） */
  --wood:#C2A37E;       /* コンパネ木肌（マット） */
  --concrete:#908578;   /* コンクリート／トープグレー */
  /* ベース */
  --ink:#3b342c;        /* 本文（濃いトープブラウン） */
  --gray:#7b7064;       /* 補助テキスト（トープグレー） */
  --line:#ddd4c6;       /* 罫線 */
  --bg:#f1ece3;         /* 背景（ウォームグレージュ） */
  --bg-alt:#e7e0d3;     /* 交互背景（トープ） */
  --dark:#171B23;       /* ダーク帯（ネイビーブラック／紺寄り） */
  --white:#ffffff;
  --enji:#9E2B2B;        /* CTAホバー：えんじ（伝統色の深紅・視認性重視で明るめ） */
  --grad:#ED8A26;
  /* フォント */
  --serif:"Cormorant Garamond",serif;
  --en:"Outfit",sans-serif;
  --jp:"Noto Sans JP",sans-serif;
  --mincho:"Shippori Mincho",serif; /* 明朝（主要見出し・和の語り口） */
  /* レイアウト */
  --maxw:1180px;
  --pad:clamp(22px,5vw,40px);          /* セクション左右余白（流動） */
  --gap:clamp(18px,2.4vw,30px);        /* グリッド間隔（流動） */
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;}      /* 1rem = 16px 基準 */
body{
  font-family:var(--jp);
  color:var(--ink);
  background-color:var(--bg);
  /* 和紙テクスチャ（ごく薄い繊維グレイン・外部素材なし） */
  background-image:
    radial-gradient(circle at 50% 50%,rgba(124,108,86,.05) 0,transparent 60%),
    repeating-linear-gradient(0deg,rgba(124,108,86,.022) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(124,108,86,.022) 0 1px,transparent 1px 3px);
  font-size:1rem;                                 /* 最低値=本文基準 */
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
h1,h2,h3{line-height:1.3;}

/* ============================================================
   共通パーツ
   ============================================================ */
/* ============================================================
   光の演出レイヤー（メイン画像内・screen合成・左右のみ）
   ============================================================ */
/* 光の演出（メイン画像内・screen合成・左右のみ） */
.light-fx{
  position:absolute;left:50%;top:50%;z-index:1;
  width:min(150vw,2400px);aspect-ratio:5000/1365;
  background:var(--i-light-fx-jpg) center/contain no-repeat;
  mix-blend-mode:screen;opacity:.5;pointer-events:none;
  transform:translate(-50%,-50%);
  animation:lightFloat 16s ease-in-out infinite alternate;
  will-change:transform;
}
/* 上下には動かさない・中心の高さを固定して左右へゆっくりスライドのみ */
@keyframes lightFloat{
  from{transform:translate(-58%,-50%);}
  to{transform:translate(-42%,-50%);}
}
@media(prefers-reduced-motion:reduce){.light-fx{animation:none;}}

.section{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,120px) var(--pad);}
#proof{padding-top:clamp(64px,9vw,120px);}
.section-alt{background:var(--bg-alt);max-width:none;}
.section-alt .sec-head,.section-alt > *:not(.service-wrap){max-width:var(--maxw);margin-left:auto;margin-right:auto;}

/* パターンB：罫線フランク（—— CONTACT ——）＋Oswald・間隔詰め */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;line-height:1;
  font-family:"Oswald",sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:.2em;
  color:var(--orange);text-transform:uppercase;margin-bottom:.4em;
}
.eyebrow::before,.eyebrow::after{content:"";width:30px;height:2px;background:var(--orange);}
.eyebrow.light{color:var(--wood);}
.eyebrow.light::before,.eyebrow.light::after{background:var(--wood);}

.sec-head{margin-bottom:clamp(36px,5vw,56px);text-align:center;}
.sec-title{
  font-family:var(--mincho);font-size:clamp(1.85rem,4.4vw,3rem);font-weight:800;letter-spacing:.06em;
  color:var(--ink);
  clip-path:inset(0 0 100% 0);opacity:0;
  transition:clip-path 1s var(--ease),opacity 1s var(--ease);
}
/* 見出しの登場演出：下から上へワイプ（ラッパーの .in で発火） */
.sec-head.in .sec-title,.service-head.in .sec-title{clip-path:inset(0 0 -4% 0);opacity:1;}
.sec-title.left{text-align:left;}
.sec-sub{font-size:1rem;color:var(--gray);margin-top:.8em;letter-spacing:.04em;}

/* 矢印付きリンク */
.more-link{
  display:inline-flex;align-items:center;gap:.7em;margin-top:clamp(28px,4vw,44px);
  font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:var(--orange-d);
  padding:.7em 1.4em .7em 1.5em;border:1.5px solid var(--orange-d);
  background:rgba(168,124,88,.06);white-space:nowrap;
  transition:background .3s var(--ease),color .3s,box-shadow .3s,transform .3s;
}
.more-link i{width:30px;height:2px;background:var(--orange-d);position:relative;}
.more-link i::after{content:"";position:absolute;right:0;top:-3px;width:8px;height:8px;border-top:2px solid var(--orange-d);border-right:2px solid var(--orange-d);transform:rotate(45deg);}
.more-link:hover{background:var(--orange-d);color:#fff;box-shadow:0 8px 20px rgba(168,124,88,.28);}
.more-link:hover i,.more-link:hover i::after{background:#fff;border-color:#fff;}
.more-link.light{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);}
.more-link.light i,.more-link.light i::after{background:#fff;border-color:#fff;}
.more-link.light:hover{background:#fff;color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.25);}
.more-link.light:hover i,.more-link.light:hover i::after{background:var(--ink);border-color:var(--ink);}

/* プライマリボタン */
.btn-primary{
  display:inline-flex;align-items:center;gap:.8em;
  font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:var(--ink);
  background:#fff;border:2px solid #fff;
  padding:clamp(14px,1.5vw,17px) clamp(28px,3vw,40px);border-radius:0;
  transition:background .35s,border-color .35s,color .35s,transform .3s,box-shadow .3s;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.btn-primary i{width:18px;height:2px;background:currentColor;position:relative;}
.btn-primary i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.btn-primary:hover{background:transparent;border-color:#fff;color:#fff;transform:translateY(-3px);box-shadow:none;}
/* ヒーロー：アクション2列（相談＋採用） */
.hero-actions{display:flex;flex-wrap:wrap;gap:clamp(12px,1.4vw,16px);align-items:center;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:#fff;
  background:transparent;border:2px solid rgba(255,255,255,.72);
  padding:clamp(14px,1.5vw,17px) clamp(24px,2.6vw,34px);border-radius:0;
  transition:background .35s,border-color .35s,color .35s,transform .3s;
}
.btn-ghost i{width:16px;height:2px;background:currentColor;position:relative;}
.btn-ghost i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-3px);}
/* ヒーローのボタンは色を付けて目立たせる（btn-primaryは他CTAと共用のためヒーロー内に限定） */
.hero-actions .btn-primary{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 12px 30px rgba(197,97,31,.42);}
.hero-actions .btn-primary:hover{background:var(--orange-d);border-color:var(--orange-d);color:#fff;transform:translateY(-3px);box-shadow:0 16px 38px rgba(165,68,13,.5);}
.hero-actions .btn-ghost{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.2);}
.hero-actions .btn-ghost:hover{background:transparent;border-color:#fff;color:#fff;transform:translateY(-3px);}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:clamp(74px,7vw,90px);              /* 固定高さ＝CVボタンを100%にする基準 */
  padding:0 0 0 var(--pad);                  /* 右はCVボタンを端まで通すため0 */
  transition:height .4s,background .4s,box-shadow .4s;
}
/* 上部：画像の上でもナビ・ロゴが読めるよう、ヘッダー全体に暗い帯を敷く（スクロールで消える） */
.header::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:100%;
  background:rgba(18,22,32,.9);
  pointer-events:none;z-index:-1;transition:opacity .4s;
}
.header.scrolled::before{opacity:0;}
.header.scrolled{
  background:rgba(241,236,227,.92);backdrop-filter:blur(12px);
  height:clamp(60px,5.5vw,72px);box-shadow:0 6px 24px rgba(44,39,34,.08);
}
.logo{display:flex;flex-direction:column;line-height:1.2;}
.logo-mark .corp{display:block;font-size:.34em;font-weight:600;letter-spacing:.14em;line-height:1;margin-bottom:.2em;}
/* 既定（ヒーロー上＝透明ヘッダー）は白文字、スクロール後に濃色へ */
/* ロゴは拡大。補足テキストはロゴとの比率優先で縮小（ユーザー指示により16px下限の例外） */
.logo-mark{font-family:var(--en);font-size:clamp(1.75rem,2.3vw,2.15rem);font-weight:700;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);transition:color .4s,text-shadow .4s;}
.logo-sub{font-family:var(--mincho);font-weight:600;font-size:.72rem;letter-spacing:.02em;color:rgba(255,255,255,.9);margin-top:1px;text-shadow:0 2px 12px rgba(0,0,0,.35);transition:color .4s,text-shadow .4s;}
.header.scrolled .logo-mark{color:var(--ink);text-shadow:none;}
.header.scrolled .logo-sub{color:var(--gray);text-shadow:none;}
.gnav > ul{display:flex;align-items:center;gap:clamp(16px,1.8vw,30px);list-style:none;}
.gnav a{
  font-size:1rem;font-weight:700;letter-spacing:.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);
  position:relative;padding:6px 0;white-space:nowrap;transition:color .4s,text-shadow .4s;
}
.header.scrolled .gnav a{color:var(--ink);text-shadow:none;}
.gnav > ul > li{position:relative;}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--grad);transition:width .35s var(--ease);}
.gnav > ul > li > a:hover::after{width:100%;}
/* 子メニュー（階層化） */
.has-sub > a{display:inline-flex;align-items:center;gap:.4em;}
.has-sub > a::before{content:"";order:2;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s;}
.subnav{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;background:var(--white);box-shadow:0 14px 34px rgba(44,39,34,.18);
  list-style:none;padding:14px 0;display:block;
  opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;z-index:10;
}
.subnav li{display:block;}
.subnav::before{content:"";position:absolute;top:-10px;left:0;width:100%;height:10px;} /* hoverブリッジ */
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.has-sub:hover > a::before{transform:translateY(1px) rotate(225deg);}
.subnav a{display:block;width:100%;box-sizing:border-box;color:var(--ink)!important;text-shadow:none!important;font-size:1rem;font-weight:700;padding:14px 30px;white-space:nowrap;}
.subnav a::after{display:none;}
.subnav a:hover{background:var(--bg-alt);color:var(--orange-d)!important;}
.header-cta{
  height:100%;display:inline-flex;align-items:center;          /* ヘッダー高さに対して100% */
  font-size:1.0625rem;font-weight:700;letter-spacing:.06em;color:#fff;white-space:nowrap;
  background:var(--grad);background-size:200% 100%;
  padding:0 clamp(28px,2.8vw,48px);border-radius:0;transition:background .35s;
}
.header-cta:hover{background:var(--enji);}
.hamburger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:8px;margin-right:var(--pad);}
.hamburger span{width:28px;height:2px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:.3s;}
.header.scrolled .hamburger span{background:var(--ink);box-shadow:none;}

/* ============================================================
   HERO ① — スライダー
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;overflow:hidden;}
.hero-slider{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  filter:contrast(1.18) brightness(.82) saturate(1.16);   /* 3枚を同値で統一：くっきり・鮮やか・明るめ（鮮明さ重視） */
  transition:opacity 1.4s var(--ease),transform 7s linear;
}
.hero-slide.is-active{opacity:1;transform:scale(1);z-index:1;}
/* ヒーロー画像はドラッグ差し替え可能なimage-slot。表示中のスライドにドロップできるよう最前面に */
.hero-slide image-slot{position:absolute;inset:0;display:block;width:100%;height:100%;}
.hero-slide image-slot img{width:100%;height:100%;object-fit:cover;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(28,23,19,.82) 0%,rgba(28,23,19,.44) 30%,rgba(28,23,19,.1) 58%,transparent 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:clamp(108px,14vh,150px) var(--pad) clamp(96px,16vh,180px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,56px);
  pointer-events:none;   /* ヒーローへのドロップを背面のimage-slotへ通す */
}
.hero-copy{max-width:560px;color:#fff;pointer-events:none;}
.hero-actions,.hero-actions a{pointer-events:auto;}   /* ボタンは操作可能に */
/* 表示順：見出し→左文字群。左群はスピーディに遅れて表示 */
.hero-copy.reveal{transition:opacity .5s var(--ease) .5s,transform .5s var(--ease) .5s;}
.hero-en{font-family:var(--en);font-size:clamp(1rem,1.6vw,1.25rem);font-weight:600;letter-spacing:.18em;color:#fff;text-shadow:0 2px 12px rgba(15,11,8,.8),0 1px 4px rgba(15,11,8,.7);margin-bottom:.9em;}
.hero-sub{font-family:var(--mincho);font-size:clamp(1.0625rem,1.8vw,1.4rem);font-weight:600;line-height:1.85;margin-bottom:2em;text-shadow:0 3px 16px rgba(15,11,8,.82),0 1px 4px rgba(15,11,8,.72);}
.hero-spec{display:inline-block;font-weight:800;color:#fff;font-size:1.32em;letter-spacing:.04em;border-bottom:3px solid var(--grad);padding-bottom:.06em;}
/* 大見出し：右側に縦書き2行（2回り大きく＋縦線） */
.hero-jp{
  position:relative;align-self:center;writing-mode:vertical-rl;
  font-family:var(--mincho);font-weight:600;font-size:clamp(2.1rem,4.7vw,4.2rem);
  letter-spacing:.12em;line-height:1.7;color:#fff;margin:0;flex-shrink:0;
  margin-top:clamp(20px,5vh,60px);
  text-shadow:0 4px 28px rgba(15,11,8,.72),0 2px 6px rgba(15,11,8,.62);
}
/* 各行（列）は白文字。罫線は文字寄りに */
.hero-jp .hl{position:relative;display:block;block-size:max-content;height:max-content;padding-right:clamp(8px,0.9vw,13px);color:#fff;}
/* 行ごとの罫線（その行の高さに一致）。確か(1) → 組み上げる。(2) の順に上から伸びる */
.hero-jp .hl::before{content:"";position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);}
.hero-jp.in .hl:nth-child(1)::before{transform:scaleY(1);transition-delay:.18s;}
.hero-jp.in .hl:nth-child(2)::before{transform:scaleY(1);transition-delay:.42s;}
/* 登場演出（スピーディ）：見出しが先に表示 */
.hero-jp.reveal{opacity:0;transform:translateX(22px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.hero-jp.reveal.in{opacity:1;transform:none;}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;}
.scroll-cue span{font-family:var(--en);font-size:1rem;letter-spacing:.28em;color:rgba(255,255,255,.85);}
.scroll-cue i{width:1px;height:46px;background:rgba(255,255,255,.5);position:relative;overflow:hidden;}
.scroll-cue i::after{content:"";position:absolute;top:0;left:0;width:100%;height:50%;background:var(--orange);animation:scrolldot 1.8s var(--ease) infinite;}
@keyframes scrolldot{0%{transform:translateY(-100%);}100%{transform:translateY(200%);}}

/* ============================================================
   ② 意味の回収（パララックス背景）
   ============================================================ */
.section-dark{background:var(--dark);position:relative;overflow:hidden;}
.section-dark::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--grad);
}
.meaning{
  padding:clamp(110px,16vw,200px) var(--pad);
  position:relative;overflow:hidden;
  background:var(--i-adobestock-77864621-jpg) center/cover no-repeat;
}
.meaning::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(241,236,227,.9);
}
.meaning-inner{max-width:920px;margin:0 auto;text-align:center;position:relative;z-index:1;}

/* コンセプト：三角インフォグラフィック（柔軟/確実/継承） */
.concept-tri{position:relative;width:min(620px,94%);margin:clamp(28px,4vw,44px) auto clamp(40px,6vw,70px);aspect-ratio:1/0.9;}
.ct-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.ct-side{fill:none;stroke-width:13;stroke-linecap:round;}
.ct-side--a{stroke:#EE9A33;}
.ct-side--b{stroke:#C04A26;}
.ct-side--c{stroke:#C79A4A;}
.ct-center{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;line-height:1;}
.ct-center-en{font-family:"Oswald",sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:.5em;}
.ct-center-num{font-family:"Oswald",sans-serif;font-weight:600;font-size:clamp(2.6rem,5.2vw,3.6rem);color:var(--ink);line-height:1;}
.ct-center-jp{font-family:var(--mincho);font-weight:700;font-size:clamp(1rem,1.7vw,1.2rem);color:var(--ink);letter-spacing:.06em;margin-top:.2em;}
.ct-node{position:absolute;transform:translate(-50%,-50%);
  width:clamp(120px,18vw,168px);height:clamp(120px,18vw,168px);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12em;
  color:#fff;box-shadow:0 16px 36px rgba(44,39,34,.22);}
.ct-node--top{left:50%;top:17.8%;background:#C04A26;}
.ct-node--bl{left:15%;top:83.3%;background:#EE9A33;}
.ct-node--br{left:85%;top:83.3%;background:#C79A4A;}
.ct-word{font-family:var(--mincho);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.06em;}
.ct-en{font-family:"Oswald",sans-serif;font-weight:500;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.92;}
@media(max-width:600px){.ct-node{width:clamp(100px,27vw,128px);height:clamp(100px,27vw,128px);}.ct-word{font-size:clamp(1.4rem,6.4vw,1.7rem);}}
.meaning-body{display:flex;flex-direction:column;gap:1.4em;}
.meaning-lead{font-family:var(--mincho);font-weight:800!important;color:var(--ink);font-size:clamp(1.5rem,3.4vw,2.3rem)!important;line-height:1.55!important;letter-spacing:.01em;}
.meaning-lead::after{content:"";display:block;width:56px;height:4px;background:var(--grad);margin-top:.7em;}
.meaning-body p{font-family:var(--mincho);font-size:clamp(1.0625rem,1.7vw,1.3rem);font-weight:600;color:var(--ink);line-height:2.6;text-wrap:pretty;}
/* セク1に統合する概念カード（見出しなし） */
.meaning-cards{
  margin-top:clamp(36px,4.5vw,60px);
  width:min(var(--maxw), calc(100vw - 2*var(--pad)));
  margin-left:50%;transform:translateX(-50%);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);text-align:center;
}
@media(max-width:860px){.meaning-cards{grid-template-columns:1fr;width:100%;margin-left:0;transform:none;}}

/* ============================================================
   選ばれる理由の根拠（画像＋見出し＋本文／交互エディトリアル）
   ============================================================ */
.proof{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:clamp(56px,8vw,120px);}
.proof-row{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,5.5vw,88px);align-items:center;}
.proof-row:nth-child(even){grid-template-columns:1fr 1.3fr;}
.proof-row:nth-child(even) .proof-fig{order:2;}
.proof-fig{position:relative;}
.proof-img{
  aspect-ratio:4/3;width:100%;background-size:cover;background-position:center;
  box-shadow:0 30px 76px rgba(44,39,34,.2);
}
.proof-fig .proof-badge{
  position:absolute;left:clamp(-12px,-1vw,-20px);bottom:clamp(-16px,-1.6vw,-24px);
  display:flex;align-items:baseline;gap:.18em;
  background:var(--white);border-left:4px solid var(--orange-d);
  padding:clamp(14px,1.6vw,20px) clamp(18px,2vw,26px);box-shadow:0 12px 30px rgba(44,39,34,.12);
}
.proof-badge .pb-num{font-family:"Oswald",sans-serif;font-weight:600;font-size:clamp(1.9rem,3vw,2.7rem);color:var(--orange-d);line-height:1;}
.proof-badge .pb-label{font-family:var(--mincho);font-weight:700;font-size:clamp(1rem,1.2vw,1.12rem);color:var(--gray);}
.proof-en{font-family:"Oswald",sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.2em;color:var(--orange);margin-bottom:.7em;}
.proof-body h3{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.5;color:var(--ink);margin-bottom:.7em;text-wrap:balance;
}
.proof-body p{font-family:var(--mincho);font-weight:600;font-size:clamp(1.0625rem,1.4vw,1.18rem);line-height:2.15;color:var(--gray);text-wrap:pretty;word-break:auto-phrase;}
.proof-body .more-link{margin-top:1.3em;}
@media(max-width:760px){
  .proof-row,.proof-row:nth-child(even){grid-template-columns:1fr;gap:clamp(28px,6vw,40px);}
  .proof-row:nth-child(even) .proof-fig{order:0;}
}

/* ============================================================
   ③ 根拠カード
   ============================================================ */
.reasons{
  text-align:center;
  position:relative;overflow:hidden;
  max-width:none;
  background:var(--i-adobestock-179710260-jpeg) center/cover no-repeat;
  background-attachment:fixed;
}
.reasons::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(241,236,227,.82);}
.reasons .sec-head,.reasons .reason-grid,.reasons .more-link{
  position:relative;z-index:1;
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
}
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:center;}
.reason-card{
  position:relative;background:var(--white);border-radius:0;
  padding:clamp(26px,3.4vw,40px);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(44,39,34,.05);
  display:flex;flex-direction:column;align-items:center;
}
.reason-num{font-family:"Oswald",sans-serif;font-weight:600;font-style:normal;font-size:3.2rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.reason-card h3{font-size:1.3rem;font-weight:700;color:var(--ink);margin:.5em 0 .6em;}
.reason-card p{font-size:1rem;color:var(--gray);}

/* ============================================================
   ④ サービス（2カラム）
   ============================================================ */
.service{background:var(--white);}
.service-wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start;}
.service-head .service-lead{font-family:var(--mincho);font-size:clamp(1.0625rem,1.4vw,1.2rem);font-weight:600;color:var(--ink);margin-top:1.2em;line-height:1.95;}
.service-head .more-link{margin-right:1.5em;}
.service-list{border-top:2px solid var(--orange);margin-top:clamp(24px,3.2vw,36px);}
.service-list > div{padding:clamp(18px,2.4vw,26px) 4px;border-bottom:1px solid var(--line);}
.service-list dt{font-family:var(--en);font-size:1rem;font-weight:700;letter-spacing:.08em;color:var(--orange-d);margin-bottom:.3em;}
.service-list dd{font-size:1.125rem;font-weight:700;color:var(--ink);}

/* ============================================================
   TWO-DOOR
   ============================================================ */
.twodoor{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.25);}
.door{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(56px,8vw,110px) var(--pad);
  display:flex;flex-direction:column;justify-content:center;gap:.6em;
  min-height:clamp(280px,32vw,420px);transition:transform .5s var(--ease);
}
.door::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(14,18,26,.9) 0%,rgba(14,18,26,.5) 50%,rgba(14,18,26,.14) 80%,rgba(14,18,26,0) 100%);pointer-events:none;}
.door > *{position:relative;z-index:1;}
.door::after{content:"";position:absolute;inset:0;z-index:-1;transition:transform .6s var(--ease);filter:saturate(1.14) contrast(1.08);}
.door-order::after{background-image:var(--i-door-order-jpg);background-size:cover;background-position:center;}
.door-recruit::after{background-image:var(--i-door-recruit-jpg);background-size:cover;background-position:center;}
.door:hover::after{transform:scale(1.05);}
.door-en{font-family:var(--en);font-size:1rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.4);}
.door-jp{font-family:var(--mincho);font-size:clamp(1.7rem,3.7vw,2.5rem);font-weight:800;letter-spacing:.06em;text-shadow:0 2px 12px rgba(0,0,0,.45);}
.door p{font-size:1rem;color:rgba(255,255,255,.9);max-width:34em;text-shadow:0 1px 8px rgba(0,0,0,.4);}
.door-link{display:inline-flex;align-items:center;gap:.7em;margin-top:.6em;font-size:1rem;font-weight:700;letter-spacing:.04em;}
.door-link i{width:34px;height:2px;background:#fff;position:relative;transition:width .35s var(--ease);}
.door-link i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);}
.door:hover .door-link i{width:54px;}

/* ============================================================
   ⑤ 採用ブランチ
   ============================================================ */
.recruit-branch{text-align:center;}
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:center;}
.branch-card{
  background:linear-gradient(160deg,#fff,#fbf6ef);border:1px solid var(--line);
  border-radius:0;padding:clamp(26px,3.4vw,38px);
  border-top:4px solid var(--wood);
  display:flex;flex-direction:column;align-items:center;
}
.branch-card h3{font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:.5em;}
.branch-card p{font-size:1rem;color:var(--gray);word-break:auto-phrase;}
.branch-links{display:flex;gap:clamp(16px,3vw,40px);justify-content:center;flex-wrap:wrap;}

/* ============================================================
   ⑦ 施工実績 / ブログ
   ============================================================ */
.works,.blog{text-align:center;}
.blog{
  position:relative;overflow:hidden;
  background:var(--i-adobestock-179710260-jpeg) center/cover no-repeat;
  background-attachment:fixed;
  max-width:none;
}
.blog::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(241,236,227,.82);}
.blog .sec-head,.blog .blog-grid,.blog .more-link{
  position:relative;z-index:1;
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
}
.works{background:var(--dark);}
.works .sec-title{color:#fff;}
.works .sec-sub{color:rgba(255,255,255,.6);}
.works .work-card p{color:rgba(255,255,255,.9);}
.works-grid,.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:left;}
.work-card,.blog-card{display:block;transition:transform .4s var(--ease);}
.work-card:hover,.blog-card:hover{transform:translateY(-6px);}
.work-thumb,.blog-thumb{
  aspect-ratio:4/3;border-radius:0;background-size:cover;background-position:center;
  margin-bottom:1em;box-shadow:0 8px 22px rgba(44,39,34,.1);transition:box-shadow .4s;
}
.work-card:hover .work-thumb,.blog-card:hover .blog-thumb{box-shadow:0 16px 36px rgba(168,124,88,.2);}
.work-cat,.blog-cat{
  display:inline-block;font-size:1rem;font-weight:700;letter-spacing:.04em;color:#fff;
  background:var(--grad);padding:2px 14px;border-radius:0;margin-bottom:.5em;
}
.work-card p,.blog-card p{font-size:1.0625rem;font-weight:700;color:var(--ink);}

/* ============================================================
   ③b コンセプト3本柱（柔軟・確実・継承／各ページ導線）
   ============================================================ */
.concept-grid{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:left;
}
.concept-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--white);border:1px solid var(--line);border-top:4px solid var(--orange-d);
  padding:clamp(22px,2.4vw,32px);box-shadow:0 10px 30px rgba(44,39,34,.05);
}
.concept-ic{
  display:flex;align-items:center;justify-content:center;
  width:clamp(52px,5.4vw,62px);height:clamp(52px,5.4vw,62px);border-radius:50%;
  border:2px solid var(--orange-d);color:var(--orange-d);margin-bottom:clamp(16px,2vw,22px);
}
.concept-ic svg{width:46%;height:46%;display:block;}
.concept-ic svg *{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.concept-jp{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.2rem,1.6vw,1.42rem);letter-spacing:.04em;line-height:1.4;
  color:var(--ink);margin-bottom:.2em;
}
.concept-en{
  font-family:"Oswald",sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.2em;
  color:var(--orange);margin-bottom:.6em;
}
.concept-desc{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(.95rem,1.15vw,1.02rem);color:var(--gray);line-height:1.75;flex:1;
  word-break:auto-phrase;
}
.concept-card .more-link{margin-top:1.1em;align-self:center;}

/* ============================================================
   ⑤ 採用ブランチ（背景画像＋ガラスカード／柔軟な人へ）
   ============================================================ */
.recruit-branch{
  position:relative;overflow:hidden;max-width:none;text-align:center;
  background:linear-gradient(rgba(40,33,28,.84),rgba(40,33,28,.84)),var(--i-work-05-jpg) center/cover;
}
.recruit-branch > *{position:relative;z-index:1;max-width:var(--maxw);margin-left:auto;margin-right:auto;}
.recruit-branch .sec-title{color:#fff;}
.recruit-branch .sec-sub{color:rgba(255,255,255,.72);}
.recruit-branch .branch-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-top:4px solid var(--wood);text-align:center;padding:clamp(26px,3.2vw,38px);
}
.recruit-branch .branch-ic{
  display:flex;align-items:center;justify-content:center;
  width:clamp(48px,5vw,58px);height:clamp(48px,5vw,58px);border-radius:50%;
  border:2px solid var(--wood);color:var(--wood);margin-bottom:clamp(14px,1.8vw,20px);
}
.recruit-branch .branch-ic svg{width:46%;height:46%;display:block;}
.recruit-branch .branch-ic svg *{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.recruit-branch .branch-card h3{color:#fff;}
.recruit-branch .branch-card p{color:rgba(255,255,255,.82);}
@media(prefers-reduced-motion:no-preference){.recruit-branch{background-attachment:fixed;}}
@media(max-width:640px){.recruit-branch{background-attachment:scroll;}}
/* ⑤ 採用メガバナー */
.recruit-branch .branch-links{margin-top:clamp(36px,4.5vw,56px);}
.recruit-mega{
  display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,40px);
  width:min(100%,720px);
  padding:clamp(26px,3.4vw,40px) clamp(30px,4vw,56px);
  background:var(--orange);color:#fff;
  border:0;text-decoration:none;
  box-shadow:0 18px 44px rgba(0,0,0,.32);
  transition:background .35s,transform .3s,box-shadow .3s;
}
.recruit-mega:hover{background:var(--orange-d);transform:translateY(-4px);box-shadow:0 22px 52px rgba(0,0,0,.4);}
.recruit-mega-text{display:flex;flex-direction:column;align-items:flex-start;gap:.35em;line-height:1;}
.recruit-mega-en{font-family:var(--en);font-size:clamp(.9rem,1.3vw,1.05rem);font-weight:600;letter-spacing:.22em;opacity:.85;}
.recruit-mega-jp{font-family:var(--mincho);font-weight:800;font-size:clamp(1.35rem,2.4vw,1.9rem);letter-spacing:.04em;}
.recruit-mega-arrow{position:relative;flex:none;width:clamp(38px,4.5vw,52px);height:clamp(38px,4.5vw,52px);border:2px solid rgba(255,255,255,.7);border-radius:50%;}
.recruit-mega-arrow::after{content:"";position:absolute;left:50%;top:50%;width:26%;height:26%;border-top:2px solid #fff;border-right:2px solid #fff;transform:translate(-65%,-50%) rotate(45deg);}
.recruit-mega:hover .recruit-mega-arrow{border-color:#fff;}
@media(max-width:520px){.recruit-mega{gap:16px;padding:24px 26px;}}


/* ④b 対応工事 method カード（画像つき） */
.method-grid{
  max-width:var(--maxw);margin:0 auto clamp(28px,3.6vw,44px);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);text-align:left;
}
.method-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s;}
.method-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(168,124,88,.18);}
.method-thumb{aspect-ratio:16/10;background-size:cover;background-position:center;}
image-slot.proof-img{display:block;height:auto;aspect-ratio:4/3;width:100%;}
image-slot.method-thumb{display:block;height:auto;aspect-ratio:16/10;width:100%;}
.method-body{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;}
.method-en{font-family:"Oswald",sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.18em;color:var(--orange);margin-bottom:.5em;}
.method-card h3{font-family:var(--mincho);font-weight:800;font-size:clamp(1.2rem,1.7vw,1.5rem);color:var(--ink);margin-bottom:.6em;}
.method-card p{font-size:1rem;color:var(--gray);line-height:1.9;flex:1;word-break:auto-phrase;}
.method-card .more-link{margin-top:1.2em;align-self:center;}
.service-spec{
  max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--orange);
}
.service-spec > div{padding:clamp(18px,2.4vw,26px) clamp(8px,1.5vw,18px);border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.service-spec > div:last-child{border-right:0;}
.service-spec dt{font-family:"Oswald",sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.08em;color:var(--orange-d);margin-bottom:.4em;}
.service-spec dd{font-family:var(--mincho);font-size:clamp(1rem,1.2vw,1.1rem);font-weight:700;color:var(--ink);line-height:1.6;}
@media(max-width:860px){
  .concept-grid{grid-template-columns:1fr;}
  .method-grid{grid-template-columns:1fr;}
  .service-spec{grid-template-columns:1fr;}
  .service-spec > div{border-right:0;}
}


/* ============================================================
   ⑥ デュアルCTA
   ============================================================ */
.cta-dual{text-align:center;}
.cta-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);text-align:left;}
.cta-card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:0;
  padding:clamp(48px,5.2vw,62px) clamp(26px,3.2vw,40px) clamp(26px,3.2vw,40px);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
}
.cta-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(168,124,88,.16);border-color:var(--orange);}
/* バッジはカード左上隅に密着 */
.cta-cat{position:absolute;top:-1px;left:-1px;display:inline-block;font-size:1rem;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--orange);padding:5px 18px;border-radius:0;}
.cta-card h3{font-size:1.4rem;font-weight:900;color:var(--ink);margin-bottom:.35em;}
.cta-card p{font-size:1rem;color:var(--gray);margin:0;padding-right:2.4em;}
/* リンク性を示す角矢印（テキストは廃止／カード全体がリンク）＝右端・天地センター */
.cta-card::after{
  content:"";position:absolute;top:50%;right:clamp(24px,2.8vw,34px);
  width:14px;height:14px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);
  transform:translateY(-50%) rotate(45deg);opacity:.75;transition:right .35s var(--ease),opacity .35s;
}
.cta-card:hover::after{right:clamp(18px,2.2vw,26px);opacity:1;}

.tel-block{
  width:100%;margin-top:clamp(18px,2.6vw,30px);overflow:hidden;
  display:flex;align-items:stretch;
  background:var(--white);border:1px solid var(--line);border-radius:0;
  box-shadow:0 10px 30px rgba(44,39,34,.06);
}
.tel-info{
  flex:1 1 56%;display:flex;flex-direction:column;align-items:flex-start;gap:.3em;
  padding:clamp(24px,3vw,40px) clamp(28px,4vw,52px);z-index:1;
}
.tel-label{font-size:1rem;letter-spacing:.08em;color:var(--gray);}
.tel-num{font-family:var(--en);font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:700;letter-spacing:.02em;color:var(--orange-d);line-height:1.2;pointer-events:none;cursor:default;}
.tel-time{font-size:1rem;color:var(--gray);text-align:left;}
/* 右側に画像：左を白フェードでカード背景になじませ、高さいっぱいに */
.tel-photo{
  flex:1 1 44%;align-self:stretch;min-height:100%;
  background-image:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.9) 16%,rgba(255,255,255,0) 52%),var(--i-cta-phone-jpg);
  background-size:cover;background-position:center right;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;z-index:60;background:var(--dark);color:#fff;padding:clamp(48px,7vw,72px) var(--pad) 30px;}
.footer::before{content:"";position:absolute;inset:0;z-index:0;background:url('../images/AdobeStock_341601085.jpeg') center/cover;opacity:.07;mix-blend-mode:screen;pointer-events:none;}
.footer-top,.copyright{position:relative;z-index:1;}
/* お問い合わせ導線（住所の下：電話 → ボタンの順） */
.footer-contact-block{margin-top:clamp(20px,2.5vw,28px);}
.footer-contact-label{font-size:1rem;letter-spacing:.1em;color:rgba(255,255,255,.7);margin-bottom:.2em;}
.footer-tel{font-family:var(--en);font-weight:700;font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:.01em;color:#fff;line-height:1.2;display:inline-block;transition:color .3s;}
.footer-tel:hover{color:var(--wood);}
.footer-tel-time{font-size:1rem;color:rgba(255,255,255,.6);margin-top:.4em;}
.footer-btn{
  display:inline-flex;align-items:center;gap:.8em;margin-top:1em;
  font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:#fff;white-space:nowrap;
  background:var(--grad);background-size:200% 100%;border:2px solid transparent;
  padding:clamp(14px,1.6vw,18px) clamp(28px,3vw,44px);transition:background .35s,border-color .35s;
}
.footer-btn i{width:18px;height:2px;background:#fff;position:relative;}
.footer-btn i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);}
/* 暗い背景でも視認できるよう、ホバーで白い罫線（アウトライン）に */
.footer-btn:hover{background:transparent;border-color:#fff;}
.footer-top{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:clamp(30px,5vw,60px);}
.footer-brand .logo-mark{font-size:1.7rem;}
.footer-biz{font-family:var(--mincho);font-weight:600;font-size:1rem;color:rgba(255,255,255,.78);margin-top:.8em;}
.footer-addr{font-size:1rem;color:rgba(255,255,255,.6);margin-top:1em;line-height:1.9;}
/* NAV：カテゴリ別グループで整列（全ページ導線を確保） */
.footer-home{display:inline-block;}
.footer-nav{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(24px,3vw,48px) clamp(32px,5vw,72px);align-content:start;}
.fnav-col{display:flex;flex-direction:column;gap:.85em;}
.fnav-head{font-family:var(--mincho);font-weight:700;font-size:1rem;letter-spacing:.06em;color:var(--wood);margin-bottom:.25em;}
.footer-nav a{font-size:1rem;letter-spacing:.02em;color:rgba(255,255,255,.82);transition:color .3s;}
.footer-nav a:hover{color:var(--wood);}
.copyright{text-align:center;font-family:var(--en);font-size:1rem;letter-spacing:.06em;color:rgba(255,255,255,.45);margin-top:clamp(40px,6vw,60px);}

/* ============================================================
   PAGE TOP
   ============================================================ */
.pagetop{
  position:fixed;bottom:24px;right:24px;z-index:90;
  width:52px;height:52px;border:none;border-radius:0;cursor:pointer;
  background:var(--grad);color:#fff;font-size:1rem;
  opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;
  box-shadow:0 8px 20px rgba(168,124,88,.3);
}
.pagetop.show{opacity:1;pointer-events:auto;}
.pagetop:hover{transform:translateY(-4px);}

/* ============================================================
   REVEAL アニメーション
   ============================================================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-slide{transition:opacity .6s;}
  .sec-title,.meaning-title.reveal{clip-path:none;opacity:1;}
  .hero-jp.reveal{opacity:1;transform:none;}
  .hero-jp .hl::before{transform:scaleY(1);transition:none;}
}

/* モバイルメニュー（右ドロワー＋背景ぼかし） */
.mobile-menu{
  position:fixed;inset:0;z-index:200;
  background:rgba(40,34,29,.45);                 /* 乗算的な暗幕 */
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);   /* 元ページをガウスぼかし */
  opacity:0;pointer-events:none;transition:opacity .35s;overflow:hidden;   /* 駐機中のパネルを画面外でクリップ */
}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mm-panel{
  position:absolute;top:0;right:0;height:100%;width:min(82vw,340px);
  background:var(--dark);box-shadow:-20px 0 60px rgba(0,0,0,.4);
  padding:clamp(64px,16vw,82px) clamp(22px,5vw,30px) clamp(28px,6vw,40px);  /* 上部はハンバーガー分を確保 */
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s var(--ease);
  overflow-y:auto;
}
.mobile-menu.open .mm-panel{transform:translateX(0);}
/* メニュー展開時：ヘッダーをドロワーの上に出し、開閉は同位置のハンバーガー（×化）で行う */
body.menu-open .header{z-index:300;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;}
body.menu-open .logo,body.menu-open .header-cta{opacity:0;visibility:hidden;pointer-events:none;}
body.menu-open .hamburger{pointer-events:auto;}
/* 閉じる×は常に暗色ドロワー上にあるため白で直書き固定 */
.hamburger.active span,body.menu-open .hamburger span{background:#fff!important;box-shadow:none!important;}
.mm-panel nav{display:flex;flex-direction:column;}
.mm-panel a{
  text-align:left;font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:#fff;
  padding:.85em .2em;border-bottom:1px solid rgba(255,255,255,.1);transition:color .3s;
}
.mm-panel a:hover{color:var(--wood);}
.mm-panel .mm-sub{font-size:1rem;font-weight:600;color:rgba(255,255,255,.78);padding-left:1.2em;margin-left:.4em;border-left:2px solid rgba(194,163,126,.55);}
.mm-panel .mm-sub:hover{border-left-color:var(--wood);}
.mm-panel .mm-cta{
  margin-top:1.2em;background:var(--grad);color:#fff;text-align:center;
  padding:15px;border-bottom:none;letter-spacing:.06em;transition:background .35s;
}
.mm-panel .mm-cta:hover{background:var(--enji);color:#fff;}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ============================================================
   レスポンシブ ── 構造が変わる2点のみ
   中間幅のズレは clamp() で吸収（微調整BPは追加しない）
   ============================================================ */

/* ① 1240px：ナビ→ハンバーガー（CTAは残して目立たせる） / 主要グリッド 3→2列・2→1列 */
@media(max-width:1240px){
  .gnav{display:none;}
  .hamburger{display:flex;}
  .header-cta{margin-left:auto;}   /* CTA＋ハンバーガーを右に寄せ、CTAを常時表示 */
  .reason-grid,.branch-grid,.works-grid,.blog-grid{grid-template-columns:repeat(2,1fr);}
  .service-wrap{grid-template-columns:1fr;}
  .cta-cards{grid-template-columns:1fr 1fr;}
}

/* ② 640px：すべて1カラムへ */
@media(max-width:640px){
  .meaning,.reasons,.blog{background-attachment:scroll;}
  .reason-grid,.branch-grid,.works-grid,.blog-grid,
  .twodoor,.cta-cards{grid-template-columns:1fr;}
  .service-head .more-link{display:flex;margin-right:0;}
  /* ヘッダー：小画面でもCTAを確保しオーバーフロー回避 */
  .header{gap:10px;}
  .logo-mark{font-size:1.4rem;}
  .logo-sub{display:none;}
  .logo{justify-content:center;}
  .header-cta{font-size:1rem;letter-spacing:.02em;padding:0 clamp(14px,4vw,20px);}
  .hamburger{margin-right:clamp(14px,4vw,22px);}
  .footer-top{flex-direction:column;}
  .footer-btn{width:100%;justify-content:center;}
  .footer-nav{grid-template-columns:1fr 1fr;}
  /* 電話：スマホ時のみタップ（発信）可。画像は非表示にして全幅テキストに */
  .tel-photo{display:none;}
  .tel-num{pointer-events:auto;cursor:pointer;}
  /* ヒーロー：見出しと文字群を縦並び（見出し=右／文字群=左の位置は維持） */
  .hero-inner{flex-direction:column-reverse;justify-content:center;gap:clamp(28px,6vh,52px);padding-bottom:clamp(100px,18vh,160px);}
  .hero-jp{align-self:flex-end;font-size:2.05rem;margin-top:0;writing-mode:vertical-rl;}
  .hero-copy{align-self:flex-start;max-width:100%;}
}

/* ============================================================
   文字の視認性向上：細い明朝・本文を太めにして「はっきり」と
   ============================================================ */
body{font-weight:500;}
.meaning-title{font-weight:600;}
.hero-sub,
.meaning-body p,
.proof-body p,
.service-head .service-lead,
.concept-desc,
.method-card p,
.door p,
.footer-biz,
.footer-addr,
.footer-nav a,
.work-card p,
.blog-card p,
.cta-card p,
.branch-card p{font-weight:700;}


#splash{
  position:fixed;inset:0;z-index:9999;
  width:100vw;height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:#161210;
  overflow:hidden;
}
#splash::before{
  content:"";position:absolute;inset:0;
  background:var(--i-adobestock-77864621-jpeg) center/cover;
  opacity:.08;pointer-events:none;
}
.splash-inner{position:relative;text-align:center;}
.splash-eyebrow{
  font-family:"Oswald",sans-serif;font-size:.8125rem;font-weight:600;
  letter-spacing:.45em;color:rgba(255,255,255,.35);
  margin-bottom:1.6em;
  animation:splFade .7s ease .1s both;
}
.splash-logo{
  display:flex;justify-content:center;gap:.03em;
  line-height:1;overflow:hidden;
}
.splash-logo span{
  font-family:var(--en);font-weight:700;
  font-size:clamp(1.4rem,3vw,2.8rem);
  letter-spacing:-.02em;color:#fff;
  display:inline-block;
  animation:splLetter .65s cubic-bezier(.33,1,.68,1) both;
}
.splash-rule{
  width:clamp(120px,18vw,200px);height:2px;
  background:linear-gradient(90deg,#c8904a,#e8c07a,#c8904a);
  margin:1.4em auto;
  animation:splFade .5s ease .9s both;
}
.splash-sub{
  font-family:"Noto Sans JP",sans-serif;font-size:clamp(.75rem,1.1vw,.9375rem);
  letter-spacing:.22em;color:rgba(255,255,255,.45);
  animation:splFade .6s ease 1.1s both;
}
.splash-bar{
  width:clamp(140px,18vw,220px);height:1px;
  background:rgba(255,255,255,.1);
  margin:2.2em auto 0;overflow:hidden;
}
.splash-bar-fill{
  height:100%;
  background:linear-gradient(90deg,#c8904a,#e8c07a);
  animation:splBar 1.5s cubic-bezier(.37,0,.63,1) .6s both;
}
@keyframes splLetter{
  from{opacity:0;transform:translateY(.4em);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes splFade{
  from{opacity:0;}to{opacity:1;}
}
@keyframes splBar{
  from{width:0;}to{width:100%;}
}
#splash.is-out{
  animation:splashOut .7s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes splashOut{
  to{transform:translateY(-100%);}
}
/* ===== TOPページ限定：エネルギッシュ調整（鮮やかなオレンジ） ===== */
:root{
  --orange:#E8730C;    /* 鮮やかなオレンジ（参考サイト寄り） */
  --orange-d:#C25A08;  /* 白背景の文字可・濃い方 */
  --grad:#FF9024;      /* アクセントライン・下線 */
  --navy:#21406B;      /* 紺色（参考サイトの夜の現場・信頼） */
}
/* 見出しラベルを少し強く */
.eyebrow{font-size:1.15rem;letter-spacing:.24em;}
/* コンセプトカードの上部アクセントを鮮やかオレンジに */
.concept-card{border-top-color:var(--orange);}
/* twodoorのリンク矢印を鮮やかオレンジで強調 */
.door-link i{background:var(--grad)!important;}
.door-link i::after{border-top-color:var(--grad)!important;border-right-color:var(--grad)!important;}
/* 3つの軸：紺・オレンジ・スチールで明確に色分け（力強く） */
.ct-node--top{background:#21406B;}   /* 確実＝紺（信頼） */
.ct-node--bl{background:#E8730C;}    /* 柔軟＝オレンジ */
.ct-node--br{background:#6C7784;}    /* 継承＝スチールグレー */
.ct-side--a{stroke:#E8730C;}
.ct-side--b{stroke:#21406B;}
.ct-side--c{stroke:#6C7784;}
.ct-center-num{color:var(--orange);}
/* ヒーロー：紺を効かせた夜の現場感（画像はくっきり保持） */
.hero::after{background:linear-gradient(to top,rgba(16,22,40,.92) 0%,rgba(16,22,40,.52) 32%,rgba(18,24,42,.14) 60%,transparent 100%);}



.sub-cta-tel{margin-top:1.3em;font-size:.95rem;color:rgba(255,255,255,.72);}
.sub-cta-tel a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.45);}
.footer-tel-lead{font-size:.95rem;color:rgba(255,255,255,.6);margin:.15em 0 1em;}
.footer-tel-mini{font-size:.9rem;color:rgba(255,255,255,.55);margin-top:.9em;}
.footer-tel-mini a{color:rgba(255,255,255,.82);}

/* ===== CSS.sub（下層ページ共通） ===== */
/* ============================================================
   株式会社TAKEDAGUMI — Corporate Site / Top
   コンセプト：確かを、組み上げる。
   配色：型枠素材色（ウレタンオレンジ／コンパネ木肌／コンクリートグレー）

   ── 実装ルール（厳守）────────────────────────────────
   1. フォントサイズは最低 1rem(=16px) 以上。これ未満は禁止。
   2. 固定値ではなく clamp() で流動。中間幅のズレは clamp で吸収。
   3. ブレークポイントは構造が変わる2点のみ（1240px / 640px）。
   ──────────────────────────────────────────────────────
   ============================================================ */
:root{
  /* トープ基調（上品なグレージュ／型枠・コンクリート連想） */
  --orange: #E8730C;
    --orange-d: #C25A08;  /* 濃いバーントオレンジ（白背景の文字可） */
  --wood:#C2A37E;       /* コンパネ木肌（マット） */
  --concrete:#908578;   /* コンクリート／トープグレー */
  /* ベース */
  --ink:#3b342c;        /* 本文（濃いトープブラウン） */
  --gray:#7b7064;       /* 補助テキスト（トープグレー） */
  --line:#ddd4c6;       /* 罫線 */
  --bg:#f1ece3;         /* 背景（ウォームグレージュ） */
  --bg-alt:#e7e0d3;     /* 交互背景（トープ） */
  --dark:#171B23;       /* ダーク帯（ネイビーブラック／紺寄り） */
  --white:#ffffff;
  --enji:#9E2B2B;        /* CTAホバー：えんじ（伝統色の深紅・視認性重視で明るめ） */
  --grad:#ED8A26;
  /* フォント */
  --serif:"Cormorant Garamond",serif;
  --en:"Outfit",sans-serif;
  --jp:"Noto Sans JP",sans-serif;
  --mincho:"Shippori Mincho",serif; /* 明朝（主要見出し・和の語り口） */
  /* レイアウト */
  --maxw:1180px;
  --pad:clamp(22px,5vw,40px);          /* セクション左右余白（流動） */
  --gap:clamp(18px,2.4vw,30px);        /* グリッド間隔（流動） */
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;}      /* 1rem = 16px 基準 */
body{
  font-family:var(--jp);
  color:var(--ink);
  background-color:var(--bg);
  /* 和紙テクスチャ（ごく薄い繊維グレイン・外部素材なし） */
  background-image:
    radial-gradient(circle at 50% 50%,rgba(124,108,86,.05) 0,transparent 60%),
    repeating-linear-gradient(0deg,rgba(124,108,86,.022) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(124,108,86,.022) 0 1px,transparent 1px 3px);
  font-size:1rem;                                 /* 最低値=本文基準 */
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
h1,h2,h3{line-height:1.3;}

/* ============================================================
   共通パーツ
   ============================================================ */
/* ============================================================
   光の演出レイヤー（メイン画像内・screen合成・左右のみ）
   ============================================================ */
/* 光の演出（メイン画像内・screen合成・左右のみ） */
.light-fx{
  position:absolute;left:50%;top:50%;z-index:1;
  width:min(150vw,2400px);aspect-ratio:5000/1365;
  background:var(--i-light-fx-jpg) center/contain no-repeat;
  mix-blend-mode:screen;opacity:.5;pointer-events:none;
  transform:translate(-50%,-50%);
  animation:lightFloat 16s ease-in-out infinite alternate;
  will-change:transform;
}
/* 上下には動かさない・中心の高さを固定して左右へゆっくりスライドのみ */
@keyframes lightFloat{
  from{transform:translate(-58%,-50%);}
  to{transform:translate(-42%,-50%);}
}
@media(prefers-reduced-motion:reduce){.light-fx{animation:none;}}

.section{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,120px) var(--pad);}
#proof{padding-top:clamp(64px,9vw,120px);}
.section-alt{background:var(--bg-alt);max-width:none;}
.section-alt .sec-head,.section-alt > *:not(.service-wrap){max-width:var(--maxw);margin-left:auto;margin-right:auto;}

/* パターンB：罫線フランク（—— CONTACT ——）＋Oswald・間隔詰め */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;line-height:1;
  font-family:"Oswald",sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:.2em;
  color:var(--orange);text-transform:uppercase;margin-bottom:.4em;
}
.eyebrow::before,.eyebrow::after{content:"";width:30px;height:2px;background:var(--orange);}
.eyebrow.light{color:var(--wood);}
.eyebrow.light::before,.eyebrow.light::after{background:var(--wood);}

.sec-head{margin-bottom:clamp(36px,5vw,56px);text-align:center;}
.sec-title{
  font-family:var(--mincho);font-size:clamp(1.85rem,4.4vw,3rem);font-weight:800;letter-spacing:.06em;
  color:var(--ink);
  clip-path:inset(0 0 100% 0);opacity:0;
  transition:clip-path 1s var(--ease),opacity 1s var(--ease);
}
/* 見出しの登場演出：下から上へワイプ（ラッパーの .in で発火） */
.sec-head.in .sec-title,.service-head.in .sec-title{clip-path:inset(0 0 -4% 0);opacity:1;}
.sec-title.left{text-align:left;}
.sec-sub{font-size:1rem;color:var(--gray);margin-top:.8em;letter-spacing:.04em;}

/* 矢印付きリンク */
.more-link{
  display:inline-flex;align-items:center;gap:.7em;margin-top:clamp(28px,4vw,44px);
  font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:var(--orange-d);
  padding:.7em 1.4em .7em 1.5em;border:1.5px solid var(--orange-d);
  background:rgba(168,124,88,.06);white-space:nowrap;
  transition:background .3s var(--ease),color .3s,box-shadow .3s,transform .3s;
}
.more-link i{width:30px;height:2px;background:var(--orange-d);position:relative;}
.more-link i::after{content:"";position:absolute;right:0;top:-3px;width:8px;height:8px;border-top:2px solid var(--orange-d);border-right:2px solid var(--orange-d);transform:rotate(45deg);}
.more-link:hover{background:var(--orange-d);color:#fff;box-shadow:0 8px 20px rgba(168,124,88,.28);}
.more-link:hover i,.more-link:hover i::after{background:#fff;border-color:#fff;}
.more-link.light{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);}
.more-link.light i,.more-link.light i::after{background:#fff;border-color:#fff;}
.more-link.light:hover{background:#fff;color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.25);}
.more-link.light:hover i,.more-link.light:hover i::after{background:var(--ink);border-color:var(--ink);}

/* プライマリボタン */
.btn-primary{
  display:inline-flex;align-items:center;gap:.8em;
  font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:var(--ink);
  background:#fff;border:2px solid #fff;
  padding:clamp(14px,1.5vw,17px) clamp(28px,3vw,40px);border-radius:0;
  transition:background .35s,border-color .35s,color .35s,transform .3s,box-shadow .3s;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.btn-primary i{width:18px;height:2px;background:currentColor;position:relative;}
.btn-primary i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.btn-primary:hover{background:transparent;border-color:#fff;color:#fff;transform:translateY(-3px);box-shadow:none;}
/* ヒーロー：アクション2列（相談＋採用） */
.hero-actions{display:flex;flex-wrap:wrap;gap:clamp(12px,1.4vw,16px);align-items:center;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:#fff;
  background:transparent;border:2px solid rgba(255,255,255,.72);
  padding:clamp(14px,1.5vw,17px) clamp(24px,2.6vw,34px);border-radius:0;
  transition:background .35s,border-color .35s,color .35s,transform .3s;
}
.btn-ghost i{width:16px;height:2px;background:currentColor;position:relative;}
.btn-ghost i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-3px);}
/* ヒーローのボタンは色を付けて目立たせる（btn-primaryは他CTAと共用のためヒーロー内に限定） */
.hero-actions .btn-primary{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 12px 30px rgba(197,97,31,.42);}
.hero-actions .btn-primary:hover{background:var(--orange-d);border-color:var(--orange-d);color:#fff;transform:translateY(-3px);box-shadow:0 16px 38px rgba(165,68,13,.5);}
.hero-actions .btn-ghost{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.2);}
.hero-actions .btn-ghost:hover{background:transparent;border-color:#fff;color:#fff;transform:translateY(-3px);}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:clamp(74px,7vw,90px);              /* 固定高さ＝CVボタンを100%にする基準 */
  padding:0 0 0 var(--pad);                  /* 右はCVボタンを端まで通すため0 */
  transition:height .4s,background .4s,box-shadow .4s;
}
/* 上部：画像の上でもナビ・ロゴが読めるよう、ヘッダー全体に暗い帯を敷く（スクロールで消える） */
.header::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:100%;
  background:rgba(18,22,32,.9);
  pointer-events:none;z-index:-1;transition:opacity .4s;
}
.header.scrolled::before{opacity:0;}
.header.scrolled{
  background:rgba(241,236,227,.92);backdrop-filter:blur(12px);
  height:clamp(60px,5.5vw,72px);box-shadow:0 6px 24px rgba(44,39,34,.08);
}
.logo{display:flex;flex-direction:column;line-height:1.2;}
.logo-mark .corp{display:block;font-size:.34em;font-weight:600;letter-spacing:.14em;line-height:1;margin-bottom:.2em;}
/* 既定（ヒーロー上＝透明ヘッダー）は白文字、スクロール後に濃色へ */
/* ロゴは拡大。補足テキストはロゴとの比率優先で縮小（ユーザー指示により16px下限の例外） */
.logo-mark{font-family:var(--en);font-size:clamp(1.75rem,2.3vw,2.15rem);font-weight:700;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);transition:color .4s,text-shadow .4s;}
.logo-sub{font-family:var(--mincho);font-weight:600;font-size:.72rem;letter-spacing:.02em;color:rgba(255,255,255,.9);margin-top:1px;text-shadow:0 2px 12px rgba(0,0,0,.35);transition:color .4s,text-shadow .4s;}
.header.scrolled .logo-mark{color:var(--ink);text-shadow:none;}
.header.scrolled .logo-sub{color:var(--gray);text-shadow:none;}
.gnav > ul{display:flex;align-items:center;gap:clamp(16px,1.8vw,30px);list-style:none;}
.gnav a{
  font-size:1rem;font-weight:700;letter-spacing:.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);
  position:relative;padding:6px 0;white-space:nowrap;transition:color .4s,text-shadow .4s;
}
.header.scrolled .gnav a{color:var(--ink);text-shadow:none;}
.gnav > ul > li{position:relative;}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--grad);transition:width .35s var(--ease);}
.gnav > ul > li > a:hover::after{width:100%;}
/* 子メニュー（階層化） */
.has-sub > a{display:inline-flex;align-items:center;gap:.4em;}
.has-sub > a::before{content:"";order:2;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s;}
.subnav{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;background:var(--white);box-shadow:0 14px 34px rgba(44,39,34,.18);
  list-style:none;padding:14px 0;display:block;
  opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;z-index:10;
}
.subnav li{display:block;}
.subnav::before{content:"";position:absolute;top:-10px;left:0;width:100%;height:10px;} /* hoverブリッジ */
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.has-sub:hover > a::before{transform:translateY(1px) rotate(225deg);}
.subnav a{display:block;width:100%;box-sizing:border-box;color:var(--ink)!important;text-shadow:none!important;font-size:1rem;font-weight:700;padding:14px 30px;white-space:nowrap;}
.subnav a::after{display:none;}
.subnav a:hover{background:var(--bg-alt);color:var(--orange-d)!important;}
.header-cta{
  height:100%;display:inline-flex;align-items:center;          /* ヘッダー高さに対して100% */
  font-size:1.0625rem;font-weight:700;letter-spacing:.06em;color:#fff;white-space:nowrap;
  background:var(--grad);background-size:200% 100%;
  padding:0 clamp(28px,2.8vw,48px);border-radius:0;transition:background .35s;
}
.header-cta:hover{background:var(--enji);    color: #fff!important;}
.hamburger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:8px;margin-right:var(--pad);}
.hamburger span{width:28px;height:2px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:.3s;}
.header.scrolled .hamburger span{background:var(--ink);box-shadow:none;}

/* ============================================================
   HERO ① — スライダー
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;overflow:hidden;}
.hero-slider{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  filter:contrast(1.18) brightness(.82) saturate(1.16);   /* 3枚を同値で統一：くっきり・鮮やか・明るめ（鮮明さ重視） */
  transition:opacity 1.4s var(--ease),transform 7s linear;
}
.hero-slide.is-active{opacity:1;transform:scale(1);z-index:1;}
/* ヒーロー画像はドラッグ差し替え可能なimage-slot。表示中のスライドにドロップできるよう最前面に */
.hero-slide image-slot{position:absolute;inset:0;display:block;width:100%;height:100%;}
.hero-slide image-slot img{width:100%;height:100%;object-fit:cover;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(28,23,19,.82) 0%,rgba(28,23,19,.44) 30%,rgba(28,23,19,.1) 58%,transparent 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:clamp(108px,14vh,150px) var(--pad) clamp(96px,16vh,180px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,56px);
  pointer-events:none;   /* ヒーローへのドロップを背面のimage-slotへ通す */
}
.hero-copy{max-width:560px;color:#fff;pointer-events:none;}
.hero-actions,.hero-actions a{pointer-events:auto;}   /* ボタンは操作可能に */
/* 表示順：見出し→左文字群。左群はスピーディに遅れて表示 */
.hero-copy.reveal{transition:opacity .5s var(--ease) .5s,transform .5s var(--ease) .5s;}
.hero-en{font-family:var(--en);font-size:clamp(1rem,1.6vw,1.25rem);font-weight:600;letter-spacing:.18em;color:#fff;text-shadow:0 2px 12px rgba(15,11,8,.8),0 1px 4px rgba(15,11,8,.7);margin-bottom:.9em;}
.hero-sub{font-family:var(--mincho);font-size:clamp(1.0625rem,1.8vw,1.4rem);font-weight:600;line-height:1.85;margin-bottom:2em;text-shadow:0 3px 16px rgba(15,11,8,.82),0 1px 4px rgba(15,11,8,.72);}
.hero-spec{display:inline-block;font-weight:800;color:#fff;font-size:1.32em;letter-spacing:.04em;border-bottom:3px solid var(--grad);padding-bottom:.06em;}
/* 大見出し：右側に縦書き2行（2回り大きく＋縦線） */
.hero-jp{
  position:relative;align-self:center;writing-mode:vertical-rl;
  font-family:var(--mincho);font-weight:600;font-size:clamp(2.1rem,4.7vw,4.2rem);
  letter-spacing:.12em;line-height:1.7;color:#fff;margin:0;flex-shrink:0;
  margin-top:clamp(20px,5vh,60px);
  text-shadow:0 4px 28px rgba(15,11,8,.72),0 2px 6px rgba(15,11,8,.62);
}
/* 各行（列）は白文字。罫線は文字寄りに */
.hero-jp .hl{position:relative;display:block;block-size:max-content;height:max-content;padding-right:clamp(8px,0.9vw,13px);color:#fff;}
/* 行ごとの罫線（その行の高さに一致）。確か(1) → 組み上げる。(2) の順に上から伸びる */
.hero-jp .hl::before{content:"";position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);}
.hero-jp.in .hl:nth-child(1)::before{transform:scaleY(1);transition-delay:.18s;}
.hero-jp.in .hl:nth-child(2)::before{transform:scaleY(1);transition-delay:.42s;}
/* 登場演出（スピーディ）：見出しが先に表示 */
.hero-jp.reveal{opacity:0;transform:translateX(22px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.hero-jp.reveal.in{opacity:1;transform:none;}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;}
.scroll-cue span{font-family:var(--en);font-size:1rem;letter-spacing:.28em;color:rgba(255,255,255,.85);}
.scroll-cue i{width:1px;height:46px;background:rgba(255,255,255,.5);position:relative;overflow:hidden;}
.scroll-cue i::after{content:"";position:absolute;top:0;left:0;width:100%;height:50%;background:var(--orange);animation:scrolldot 1.8s var(--ease) infinite;}
@keyframes scrolldot{0%{transform:translateY(-100%);}100%{transform:translateY(200%);}}

/* ============================================================
   ② 意味の回収（パララックス背景）
   ============================================================ */
.section-dark{background:var(--dark);position:relative;overflow:hidden;}
.section-dark::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--grad);
}
.meaning{
  padding:clamp(110px,16vw,200px) var(--pad);
  position:relative;overflow:hidden;
  background:var(--i-adobestock-77864621-jpg) center/cover no-repeat;
}
.meaning::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(241,236,227,.9);
}
.meaning-inner{max-width:920px;margin:0 auto;text-align:center;position:relative;z-index:1;}

/* コンセプト：三角インフォグラフィック（柔軟/確実/継承） */
.concept-tri{position:relative;width:min(620px,94%);margin:clamp(28px,4vw,44px) auto clamp(40px,6vw,70px);aspect-ratio:1/0.9;}
.ct-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.ct-side{fill:none;stroke-width:13;stroke-linecap:round;}
.ct-side--a{stroke:#EE9A33;}
.ct-side--b{stroke:#C04A26;}
.ct-side--c{stroke:#C79A4A;}
.ct-center{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;line-height:1;}
.ct-center-en{font-family:"Oswald",sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:.5em;}
.ct-center-num{font-family:"Oswald",sans-serif;font-weight:600;font-size:clamp(2.6rem,5.2vw,3.6rem);color:var(--ink);line-height:1;}
.ct-center-jp{font-family:var(--mincho);font-weight:700;font-size:clamp(1rem,1.7vw,1.2rem);color:var(--ink);letter-spacing:.06em;margin-top:.2em;}
.ct-node{position:absolute;transform:translate(-50%,-50%);
  width:clamp(120px,18vw,168px);height:clamp(120px,18vw,168px);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12em;
  color:#fff;box-shadow:0 16px 36px rgba(44,39,34,.22);}
.ct-node--top{left:50%;top:17.8%;background:#C04A26;}
.ct-node--bl{left:15%;top:83.3%;background:#EE9A33;}
.ct-node--br{left:85%;top:83.3%;background:#C79A4A;}
.ct-word{font-family:var(--mincho);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.06em;}
.ct-en{font-family:"Oswald",sans-serif;font-weight:500;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.92;}
@media(max-width:600px){.ct-node{width:clamp(100px,27vw,128px);height:clamp(100px,27vw,128px);}.ct-word{font-size:clamp(1.4rem,6.4vw,1.7rem);}}
.meaning-body{display:flex;flex-direction:column;gap:1.4em;}
.meaning-lead{font-family:var(--mincho);font-weight:800!important;color:var(--ink);font-size:clamp(1.5rem,3.4vw,2.3rem)!important;line-height:1.55!important;letter-spacing:.01em;}
.meaning-lead::after{content:"";display:block;width:56px;height:4px;background:var(--grad);margin-top:.7em;}
.meaning-body p{font-family:var(--mincho);font-size:clamp(1.0625rem,1.7vw,1.3rem);font-weight:600;color:var(--ink);line-height:2.6;text-wrap:pretty;}
/* セク1に統合する概念カード（見出しなし） */
.meaning-cards{
  margin-top:clamp(36px,4.5vw,60px);
  width:min(var(--maxw), calc(100vw - 2*var(--pad)));
  margin-left:50%;transform:translateX(-50%);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);text-align:center;
}
@media(max-width:860px){.meaning-cards{grid-template-columns:1fr;width:100%;margin-left:0;transform:none;}}

/* ============================================================
   選ばれる理由の根拠（画像＋見出し＋本文／交互エディトリアル）
   ============================================================ */
.proof{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:clamp(56px,8vw,120px);}
.proof-row{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,5.5vw,88px);align-items:center;}
.proof-row:nth-child(even){grid-template-columns:1fr 1.3fr;}
.proof-row:nth-child(even) .proof-fig{order:2;}
.proof-fig{position:relative;}
.proof-img{
  aspect-ratio:4/3;width:100%;background-size:cover;background-position:center;
  box-shadow:0 30px 76px rgba(44,39,34,.2);
}
.proof-fig .proof-badge{
  position:absolute;left:clamp(-12px,-1vw,-20px);bottom:clamp(-16px,-1.6vw,-24px);
  display:flex;align-items:baseline;gap:.18em;
  background:var(--white);border-left:4px solid var(--orange-d);
  padding:clamp(14px,1.6vw,20px) clamp(18px,2vw,26px);box-shadow:0 12px 30px rgba(44,39,34,.12);
}
.proof-badge .pb-num{font-family:"Oswald",sans-serif;font-weight:600;font-size:clamp(1.9rem,3vw,2.7rem);color:var(--orange-d);line-height:1;}
.proof-badge .pb-label{font-family:var(--mincho);font-weight:700;font-size:clamp(1rem,1.2vw,1.12rem);color:var(--gray);}
.proof-en{font-family:"Oswald",sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.2em;color:var(--orange);margin-bottom:.7em;}
.proof-body h3{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.5;color:var(--ink);margin-bottom:.7em;text-wrap:balance;
}
.proof-body p{font-family:var(--mincho);font-weight:600;font-size:clamp(1.0625rem,1.4vw,1.18rem);line-height:2.15;color:var(--gray);text-wrap:pretty;word-break:auto-phrase;}
.proof-body .more-link{margin-top:1.3em;}
@media(max-width:760px){
  .proof-row,.proof-row:nth-child(even){grid-template-columns:1fr;gap:clamp(28px,6vw,40px);}
  .proof-row:nth-child(even) .proof-fig{order:0;}
}

/* ============================================================
   ③ 根拠カード
   ============================================================ */
.reasons{
  text-align:center;
  position:relative;overflow:hidden;
  max-width:none;
  background:var(--i-adobestock-179710260-jpeg) center/cover no-repeat;
  background-attachment:fixed;
}
.reasons::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(241,236,227,.82);}
.reasons .sec-head,.reasons .reason-grid,.reasons .more-link{
  position:relative;z-index:1;
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
}
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:center;}
.reason-card{
  position:relative;background:var(--white);border-radius:0;
  padding:clamp(26px,3.4vw,40px);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(44,39,34,.05);
  display:flex;flex-direction:column;align-items:center;
}
.reason-num{font-family:"Oswald",sans-serif;font-weight:600;font-style:normal;font-size:3.2rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.reason-card h3{font-size:1.3rem;font-weight:700;color:var(--ink);margin:.5em 0 .6em;}
.reason-card p{font-size:1rem;color:var(--gray);}

/* ============================================================
   ④ サービス（2カラム）
   ============================================================ */
.service{background:var(--white);}
.service-wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start;}
.service-head .service-lead{font-family:var(--mincho);font-size:clamp(1.0625rem,1.4vw,1.2rem);font-weight:600;color:var(--ink);margin-top:1.2em;line-height:1.95;}
.service-head .more-link{margin-right:1.5em;}
.service-list{border-top:2px solid var(--orange);margin-top:clamp(24px,3.2vw,36px);}
.service-list > div{padding:clamp(18px,2.4vw,26px) 4px;border-bottom:1px solid var(--line);}
.service-list dt{font-family:var(--en);font-size:1rem;font-weight:700;letter-spacing:.08em;color:var(--orange-d);margin-bottom:.3em;}
.service-list dd{font-size:1.125rem;font-weight:700;color:var(--ink);}

/* ============================================================
   TWO-DOOR
   ============================================================ */
.twodoor{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.25);}
.door{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(56px,8vw,110px) var(--pad);
  display:flex;flex-direction:column;justify-content:center;gap:.6em;
  min-height:clamp(280px,32vw,420px);transition:transform .5s var(--ease);
}
.door::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(14,18,26,.9) 0%,rgba(14,18,26,.5) 50%,rgba(14,18,26,.14) 80%,rgba(14,18,26,0) 100%);pointer-events:none;}
.door > *{position:relative;z-index:1;}
.door::after{content:"";position:absolute;inset:0;z-index:-1;transition:transform .6s var(--ease);filter:saturate(1.14) contrast(1.08);}
.door-order::after{background-image:var(--i-door-order-jpg);background-size:cover;background-position:center;}
.door-recruit::after{background-image:var(--i-door-recruit-jpg);background-size:cover;background-position:center;}
.door:hover::after{transform:scale(1.05);}
.door-en{font-family:var(--en);font-size:1rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.4);}
.door-jp{font-family:var(--mincho);font-size:clamp(1.7rem,3.7vw,2.5rem);font-weight:800;letter-spacing:.06em;text-shadow:0 2px 12px rgba(0,0,0,.45);}
.door p{font-size:1rem;color:rgba(255,255,255,.9);max-width:34em;text-shadow:0 1px 8px rgba(0,0,0,.4);}
.door-link{display:inline-flex;align-items:center;gap:.7em;margin-top:.6em;font-size:1rem;font-weight:700;letter-spacing:.04em;}
.door-link i{width:34px;height:2px;background:#fff;position:relative;transition:width .35s var(--ease);}
.door-link i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);}
.door:hover .door-link i{width:54px;}

/* ============================================================
   ⑤ 採用ブランチ
   ============================================================ */
.recruit-branch{text-align:center;}
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:center;}
.branch-card{
  background:linear-gradient(160deg,#fff,#fbf6ef);border:1px solid var(--line);
  border-radius:0;padding:clamp(26px,3.4vw,38px);
  border-top:4px solid var(--wood);
  display:flex;flex-direction:column;align-items:center;
}
.branch-card h3{font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:.5em;}
.branch-card p{font-size:1rem;color:var(--gray);word-break:auto-phrase;}
.branch-links{display:flex;gap:clamp(16px,3vw,40px);justify-content:center;flex-wrap:wrap;}

/* ============================================================
   ⑦ 施工実績 / ブログ
   ============================================================ */
.works,.blog{text-align:center;}
.blog{
  position:relative;overflow:hidden;
  background:var(--i-adobestock-179710260-jpeg) center/cover no-repeat;
  background-attachment:fixed;
  max-width:none;
}
.blog::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(241,236,227,.82);}
.blog .sec-head,.blog .blog-grid,.blog .more-link{
  position:relative;z-index:1;
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
}
.works{background:var(--dark);}
.works .sec-title{color:#fff;}
.works .sec-sub{color:rgba(255,255,255,.6);}
.works .work-card p{color:rgba(255,255,255,.9);}
.works-grid,.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:left;}
.work-card,.blog-card{display:block;transition:transform .4s var(--ease);}
.work-card:hover,.blog-card:hover{transform:translateY(-6px);}
.work-thumb,.blog-thumb{
  aspect-ratio:4/3;border-radius:0;background-size:cover;background-position:center;
  margin-bottom:1em;box-shadow:0 8px 22px rgba(44,39,34,.1);transition:box-shadow .4s;
}
.work-card:hover .work-thumb,.blog-card:hover .blog-thumb{box-shadow:0 16px 36px rgba(168,124,88,.2);}
.work-cat,.blog-cat{
  display:inline-block;font-size:1rem;font-weight:700;letter-spacing:.04em;color:#fff;
  background:var(--grad);padding:2px 14px;border-radius:0;margin-bottom:.5em;
}
.work-card p,.blog-card p{font-size:1.0625rem;font-weight:700;color:var(--ink);}

/* ============================================================
   ③b コンセプト3本柱（柔軟・確実・継承／各ページ導線）
   ============================================================ */
.concept-grid{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:left;
}
.concept-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--white);border:1px solid var(--line);border-top:4px solid var(--orange-d);
  padding:clamp(22px,2.4vw,32px);box-shadow:0 10px 30px rgba(44,39,34,.05);
}
.concept-ic{
  display:flex;align-items:center;justify-content:center;
  width:clamp(52px,5.4vw,62px);height:clamp(52px,5.4vw,62px);border-radius:50%;
  border:2px solid var(--orange-d);color:var(--orange-d);margin-bottom:clamp(16px,2vw,22px);
}
.concept-ic svg{width:46%;height:46%;display:block;}
.concept-ic svg *{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.concept-jp{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.2rem,1.6vw,1.42rem);letter-spacing:.04em;line-height:1.4;
  color:var(--ink);margin-bottom:.2em;
}
.concept-en{
  font-family:"Oswald",sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.2em;
  color:var(--orange);margin-bottom:.6em;
}
.concept-desc{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(.95rem,1.15vw,1.02rem);color:var(--gray);line-height:1.75;flex:1;
  word-break:auto-phrase;
}
.concept-card .more-link{margin-top:1.1em;align-self:center;}

/* ============================================================
   ⑤ 採用ブランチ（背景画像＋ガラスカード／柔軟な人へ）
   ============================================================ */
.recruit-branch{
  position:relative;overflow:hidden;max-width:none;text-align:center;
  background:linear-gradient(rgba(40,33,28,.84),rgba(40,33,28,.84)),var(--i-work-05-jpg) center/cover;
}
.recruit-branch > *{position:relative;z-index:1;max-width:var(--maxw);margin-left:auto;margin-right:auto;}
.recruit-branch .sec-title{color:#fff;}
.recruit-branch .sec-sub{color:rgba(255,255,255,.72);}
.recruit-branch .branch-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-top:4px solid var(--wood);text-align:center;padding:clamp(26px,3.2vw,38px);
}
.recruit-branch .branch-ic{
  display:flex;align-items:center;justify-content:center;
  width:clamp(48px,5vw,58px);height:clamp(48px,5vw,58px);border-radius:50%;
  border:2px solid var(--wood);color:var(--wood);margin-bottom:clamp(14px,1.8vw,20px);
}
.recruit-branch .branch-ic svg{width:46%;height:46%;display:block;}
.recruit-branch .branch-ic svg *{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.recruit-branch .branch-card h3{color:#fff;}
.recruit-branch .branch-card p{color:rgba(255,255,255,.82);}
@media(prefers-reduced-motion:no-preference){.recruit-branch{background-attachment:fixed;}}
@media(max-width:640px){.recruit-branch{background-attachment:scroll;}}
/* ⑤ 採用メガバナー */
.recruit-branch .branch-links{margin-top:clamp(36px,4.5vw,56px);}
.recruit-mega{
  display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,40px);
  width:min(100%,720px);
  padding:clamp(26px,3.4vw,40px) clamp(30px,4vw,56px);
  background:var(--orange);color:#fff;
  border:0;text-decoration:none;
  box-shadow:0 18px 44px rgba(0,0,0,.32);
  transition:background .35s,transform .3s,box-shadow .3s;
}
.recruit-mega:hover{background:var(--orange-d);transform:translateY(-4px);box-shadow:0 22px 52px rgba(0,0,0,.4);}
.recruit-mega-text{display:flex;flex-direction:column;align-items:flex-start;gap:.35em;line-height:1;}
.recruit-mega-en{font-family:var(--en);font-size:clamp(.9rem,1.3vw,1.05rem);font-weight:600;letter-spacing:.22em;opacity:.85;}
.recruit-mega-jp{font-family:var(--mincho);font-weight:800;font-size:clamp(1.35rem,2.4vw,1.9rem);letter-spacing:.04em;}
.recruit-mega-arrow{position:relative;flex:none;width:clamp(38px,4.5vw,52px);height:clamp(38px,4.5vw,52px);border:2px solid rgba(255,255,255,.7);border-radius:50%;}
.recruit-mega-arrow::after{content:"";position:absolute;left:50%;top:50%;width:26%;height:26%;border-top:2px solid #fff;border-right:2px solid #fff;transform:translate(-65%,-50%) rotate(45deg);}
.recruit-mega:hover .recruit-mega-arrow{border-color:#fff;}
@media(max-width:520px){.recruit-mega{gap:16px;padding:24px 26px;}}


/* ④b 対応工事 method カード（画像つき） */
.method-grid{
  max-width:var(--maxw);margin:0 auto clamp(28px,3.6vw,44px);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);text-align:left;
}
.method-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s;}
.method-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(168,124,88,.18);}
.method-thumb{aspect-ratio:16/10;background-size:cover;background-position:center;}
image-slot.proof-img{display:block;height:auto;aspect-ratio:4/3;width:100%;}
image-slot.method-thumb{display:block;height:auto;aspect-ratio:16/10;width:100%;}
.method-body{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;}
.method-en{font-family:"Oswald",sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.18em;color:var(--orange);margin-bottom:.5em;}
.method-card h3{font-family:var(--mincho);font-weight:800;font-size:clamp(1.2rem,1.7vw,1.5rem);color:var(--ink);margin-bottom:.6em;}
.method-card p{font-size:1rem;color:var(--gray);line-height:1.9;flex:1;word-break:auto-phrase;}
.method-card .more-link{margin-top:1.2em;align-self:center;}
.service-spec{
  max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--orange);
}
.service-spec > div{padding:clamp(18px,2.4vw,26px) clamp(8px,1.5vw,18px);border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.service-spec > div:last-child{border-right:0;}
.service-spec dt{font-family:"Oswald",sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.08em;color:var(--orange-d);margin-bottom:.4em;}
.service-spec dd{font-family:var(--mincho);font-size:clamp(1rem,1.2vw,1.1rem);font-weight:700;color:var(--ink);line-height:1.6;}
@media(max-width:860px){
  .concept-grid{grid-template-columns:1fr;}
  .method-grid{grid-template-columns:1fr;}
  .service-spec{grid-template-columns:1fr;}
  .service-spec > div{border-right:0;}
}


/* ============================================================
   ⑥ デュアルCTA
   ============================================================ */
.cta-dual{text-align:center;}
.cta-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);text-align:left;}
.cta-card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:0;
  padding:clamp(48px,5.2vw,62px) clamp(26px,3.2vw,40px) clamp(26px,3.2vw,40px);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
}
.cta-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(168,124,88,.16);border-color:var(--orange);}
/* バッジはカード左上隅に密着 */
.cta-cat{position:absolute;top:-1px;left:-1px;display:inline-block;font-size:1rem;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--orange);padding:5px 18px;border-radius:0;}
.cta-card h3{font-size:1.4rem;font-weight:900;color:var(--ink);margin-bottom:.35em;}
.cta-card p{font-size:1rem;color:var(--gray);margin:0;padding-right:2.4em;}
/* リンク性を示す角矢印（テキストは廃止／カード全体がリンク）＝右端・天地センター */
.cta-card::after{
  content:"";position:absolute;top:50%;right:clamp(24px,2.8vw,34px);
  width:14px;height:14px;border-top:2px solid var(--orange);border-right:2px solid var(--orange);
  transform:translateY(-50%) rotate(45deg);opacity:.75;transition:right .35s var(--ease),opacity .35s;
}
.cta-card:hover::after{right:clamp(18px,2.2vw,26px);opacity:1;}

.tel-block{
  width:100%;margin-top:clamp(18px,2.6vw,30px);overflow:hidden;
  display:flex;align-items:stretch;
  background:var(--white);border:1px solid var(--line);border-radius:0;
  box-shadow:0 10px 30px rgba(44,39,34,.06);
}
.tel-info{
  flex:1 1 56%;display:flex;flex-direction:column;align-items:flex-start;gap:.3em;
  padding:clamp(24px,3vw,40px) clamp(28px,4vw,52px);z-index:1;
}
.tel-label{font-size:1rem;letter-spacing:.08em;color:var(--gray);}
.tel-num{font-family:var(--en);font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:700;letter-spacing:.02em;color:var(--orange-d);line-height:1.2;pointer-events:none;cursor:default;}
.tel-time{font-size:1rem;color:var(--gray);text-align:left;}
/* 右側に画像：左を白フェードでカード背景になじませ、高さいっぱいに */
.tel-photo{
  flex:1 1 44%;align-self:stretch;min-height:100%;
  background-image:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.9) 16%,rgba(255,255,255,0) 52%),var(--i-cta-phone-jpg);
  background-size:cover;background-position:center right;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;z-index:60;background:var(--dark);color:#fff;padding:clamp(48px,7vw,72px) var(--pad) 30px;}
.footer::before{content:"";position:absolute;inset:0;z-index:0;background:url('../images/AdobeStock_341601085.jpeg') center/cover;opacity:.07;mix-blend-mode:screen;pointer-events:none;}
.footer-top,.copyright{position:relative;z-index:1;}
/* お問い合わせ導線（住所の下：電話 → ボタンの順） */
.footer-contact-block{margin-top:clamp(20px,2.5vw,28px);}
.footer-contact-label{font-size:1rem;letter-spacing:.1em;color:rgba(255,255,255,.7);margin-bottom:.2em;}
.footer-tel{font-family:var(--en);font-weight:700;font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:.01em;color:#fff;line-height:1.2;display:inline-block;transition:color .3s;}
.footer-tel:hover{color:var(--wood);}
.footer-tel-time{font-size:1rem;color:rgba(255,255,255,.6);margin-top:.4em;}
.footer-btn{
  display:inline-flex;align-items:center;gap:.8em;margin-top:1em;
  font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:#fff;white-space:nowrap;
  background:var(--grad);background-size:200% 100%;border:2px solid transparent;
  padding:clamp(14px,1.6vw,18px) clamp(28px,3vw,44px);transition:background .35s,border-color .35s;
}
.footer-btn i{width:18px;height:2px;background:#fff;position:relative;}
.footer-btn i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);}
/* 暗い背景でも視認できるよう、ホバーで白い罫線（アウトライン）に */
.footer-btn:hover{background:transparent;border-color:#fff;}
.footer-top{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:clamp(30px,5vw,60px);}
.footer-brand .logo-mark{font-size:1.7rem;}
.footer-biz{font-family:var(--mincho);font-weight:600;font-size:1rem;color:rgba(255,255,255,.78);margin-top:.8em;}
.footer-addr{font-size:1rem;color:rgba(255,255,255,.6);margin-top:1em;line-height:1.9;}
/* NAV：カテゴリ別グループで整列（全ページ導線を確保） */
.footer-home{display:inline-block;}
.footer-nav{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(24px,3vw,48px) clamp(32px,5vw,72px);align-content:start;}
.fnav-col{display:flex;flex-direction:column;gap:.85em;}
.fnav-head{font-family:var(--mincho);font-weight:700;font-size:1rem;letter-spacing:.06em;color:var(--wood);margin-bottom:.25em;}
.footer-nav a{font-size:1rem;letter-spacing:.02em;color:rgba(255,255,255,.82);transition:color .3s;}
.footer-nav a:hover{color:var(--wood);}
.copyright{text-align:center;font-family:var(--en);font-size:1rem;letter-spacing:.06em;color:rgba(255,255,255,.45);margin-top:clamp(40px,6vw,60px);}

/* ============================================================
   PAGE TOP
   ============================================================ */
.pagetop{
  position:fixed;bottom:24px;right:24px;z-index:90;
  width:52px;height:52px;border:none;border-radius:0;cursor:pointer;
  background:var(--grad);color:#fff;font-size:1rem;
  opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;
  box-shadow:0 8px 20px rgba(168,124,88,.3);
}
.pagetop.show{opacity:1;pointer-events:auto;}
.pagetop:hover{transform:translateY(-4px);}

/* ============================================================
   REVEAL アニメーション
   ============================================================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-slide{transition:opacity .6s;}
  .sec-title,.meaning-title.reveal{clip-path:none;opacity:1;}
  .hero-jp.reveal{opacity:1;transform:none;}
  .hero-jp .hl::before{transform:scaleY(1);transition:none;}
}

/* モバイルメニュー（右ドロワー＋背景ぼかし） */
.mobile-menu{
  position:fixed;inset:0;z-index:200;
  background:rgba(40,34,29,.45);                 /* 乗算的な暗幕 */
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);   /* 元ページをガウスぼかし */
  opacity:0;pointer-events:none;transition:opacity .35s;overflow:hidden;   /* 駐機中のパネルを画面外でクリップ */
}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mm-panel{
  position:absolute;top:0;right:0;height:100%;width:min(82vw,340px);
  background:var(--dark);box-shadow:-20px 0 60px rgba(0,0,0,.4);
  padding:clamp(64px,16vw,82px) clamp(22px,5vw,30px) clamp(28px,6vw,40px);  /* 上部はハンバーガー分を確保 */
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s var(--ease);
  overflow-y:auto;
}
.mobile-menu.open .mm-panel{transform:translateX(0);}
/* メニュー展開時：ヘッダーをドロワーの上に出し、開閉は同位置のハンバーガー（×化）で行う */
body.menu-open .header{z-index:300;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;}
body.menu-open .logo,body.menu-open .header-cta{opacity:0;visibility:hidden;pointer-events:none;}
body.menu-open .hamburger{pointer-events:auto;}
/* 閉じる×は常に暗色ドロワー上にあるため白で直書き固定 */
.hamburger.active span,body.menu-open .hamburger span{background:#fff!important;box-shadow:none!important;}
.mm-panel nav{display:flex;flex-direction:column;}
.mm-panel a{
  text-align:left;font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:#fff;
  padding:.85em .2em;border-bottom:1px solid rgba(255,255,255,.1);transition:color .3s;
}
.mm-panel a:hover{color:var(--wood);}
.mm-panel .mm-sub{font-size:1rem;font-weight:600;color:rgba(255,255,255,.78);padding-left:1.2em;margin-left:.4em;border-left:2px solid rgba(194,163,126,.55);}
.mm-panel .mm-sub:hover{border-left-color:var(--wood);}
.mm-panel .mm-cta{
  margin-top:1.2em;background:var(--grad);color:#fff;text-align:center;
  padding:15px;border-bottom:none;letter-spacing:.06em;transition:background .35s;
}
.mm-panel .mm-cta:hover{background:var(--enji);color:#fff;}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ============================================================
   レスポンシブ ── 構造が変わる2点のみ
   中間幅のズレは clamp() で吸収（微調整BPは追加しない）
   ============================================================ */

/* ① 1240px：ナビ→ハンバーガー（CTAは残して目立たせる） / 主要グリッド 3→2列・2→1列 */
@media(max-width:1240px){
  .gnav{display:none;}
  .hamburger{display:flex;}
  .header-cta{margin-left:auto;}   /* CTA＋ハンバーガーを右に寄せ、CTAを常時表示 */
  .reason-grid,.branch-grid,.works-grid,.blog-grid{grid-template-columns:repeat(2,1fr);}
  .service-wrap{grid-template-columns:1fr;}
  .cta-cards{grid-template-columns:1fr 1fr;}
}

/* ② 640px：すべて1カラムへ */
@media(max-width:640px){
  .meaning,.reasons,.blog{background-attachment:scroll;}
  .reason-grid,.branch-grid,.works-grid,.blog-grid,
  .twodoor,.cta-cards{grid-template-columns:1fr;}
  .service-head .more-link{display:flex;margin-right:0;}
  /* ヘッダー：小画面でもCTAを確保しオーバーフロー回避 */
  .header{gap:10px;}
  .logo-mark{font-size:1.4rem;}
  .logo-sub{display:none;}
  .logo{justify-content:center;}
  .header-cta{font-size:1rem;letter-spacing:.02em;padding:0 clamp(14px,4vw,20px);}
  .hamburger{margin-right:clamp(14px,4vw,22px);}
  .footer-top{flex-direction:column;}
  .footer-btn{width:100%;justify-content:center;}
  .footer-nav{grid-template-columns:1fr 1fr;}
  /* 電話：スマホ時のみタップ（発信）可。画像は非表示にして全幅テキストに */
  .tel-photo{display:none;}
  .tel-num{pointer-events:auto;cursor:pointer;}
  /* ヒーロー：見出しと文字群を縦並び（見出し=右／文字群=左の位置は維持） */
  .hero-inner{flex-direction:column-reverse;justify-content:center;gap:clamp(28px,6vh,52px);padding-bottom:clamp(100px,18vh,160px);}
  .hero-jp{align-self:flex-end;font-size:2.05rem;margin-top:0;writing-mode:vertical-rl;}
  .hero-copy{align-self:flex-start;max-width:100%;}
}

/* ============================================================
   文字の視認性向上：細い明朝・本文を太めにして「はっきり」と
   ============================================================ */
body{font-weight:500;}
.meaning-title{font-weight:600;}
.hero-sub,
.meaning-body p,
.proof-body p,
.service-head .service-lead,
.concept-desc,
.method-card p,
.door p,
.footer-biz,
.footer-addr,
.footer-nav a,
.work-card p,
.blog-card p,
.cta-card p,
.branch-card p{font-weight:700;}

/* ============================================================
   TAKEDAGUMI — 下層ページ共通スタイル
   トップページの設計DNAを踏襲：
   ・eyebrow両端罫線 / sec-titleクリップワイプ（style.css側を流用）
   ・数字はgradのbackground-clip:text（.reason-num踏襲）
   ・明朝の繊細な大見出し / gradの縦罫線アクセント（hero-jp踏襲）
   ・トープ系の温かい影 + translateYリフト（.reason-card踏襲）
   ・--grad 4pxトップバー（.section-dark踏襲）
   ============================================================ */

/* ── A-1. 下層ヘッダー（Sub Hero） ───────────────────────────
   トップヒーロー踏襲：横書き大見出し（左下）＋暗幕グラデ＋光の演出。
   光はトップと同じ拡大率。ヒーローの overflow:hidden で内側にトリミング。
   ──────────────────────────────────────────────────────── */
.sub-hero{
  position:relative;overflow:hidden;
  min-height:clamp(420px,60vh,600px);
  display:flex;align-items:flex-end;
  background:var(--i-adobestock-179710260-jpeg) center/cover no-repeat;
  background-attachment:fixed;
}
/* heroと同質の暗幕グラデ（左濃→右やや透ける） */
.sub-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(56,48,41,.95) 0%,rgba(56,48,41,.72) 52%,rgba(56,48,41,.48) 100%);
}
/* section-dark踏襲：上端のgrad帯 */
.sub-hero::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;
  background:var(--grad);z-index:4;
}
/* 光の演出はトップページ(.light-fx)のみ。下層ヒーローでは非表示 */
.sub-hero-light{display:none;}
/* コピー（左下／hero-copyの位置）。文字領域はデバイス幅に揃える（左右--padのみ） */
.sub-hero-inner{
  position:relative;z-index:3;width:100%;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(120px,18vh,168px) var(--pad) clamp(46px,7vw,72px) var(--pad);
}
/* hero-en踏襲：罫線なしの繊細な英字eyebrow */
.sub-hero-en{
  font-family:"Oswald",sans-serif;font-size:clamp(1rem,1.5vw,1.25rem);font-weight:600;
  letter-spacing:.2em;color:var(--wood);margin-bottom:.9em;
}
/* hero-jp .hl::before踏襲：見出し左のgrad縦罫線 */
.sub-hero-title{
  position:relative;padding-left:clamp(18px,2vw,28px);
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(2.2rem,5.4vw,3.9rem);letter-spacing:.08em;line-height:1.42;
  color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35);
  margin-bottom:clamp(16px,2vw,24px);
}
.sub-hero-title::before{
  content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:4px;background:var(--grad);
}
.sub-hero-lead{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:2.1;
  color:rgba(255,255,255,.85);max-width:100%;
  text-shadow:0 2px 16px rgba(0,0,0,.3);
}

/* ── A-2. パンくずリスト ─────────────────────────────────── */
.breadcrumb{
  background:var(--bg-alt);border-bottom:1px solid var(--line);
  padding:clamp(13px,1.6vw,17px) var(--pad);
      display: block!important;
          margin-bottom: 0!important;
}
.breadcrumb ol{
  display:flex;align-items:center;flex-wrap:wrap;
  list-style:none;max-width:var(--maxw);margin:0 auto;
  font-size:1rem;letter-spacing:.02em;
}
.breadcrumb li{display:flex;align-items:center;color:var(--gray);}
.breadcrumb li+li::before{
  content:"";width:6px;height:6px;margin:0 .7em;
  border-top:1.5px solid var(--orange);border-right:1.5px solid var(--orange);
  transform:rotate(45deg);
}
.breadcrumb a{color:var(--gray);transition:color .3s;}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb li:last-child{color:var(--ink);font-weight:700;}

/* ── B-1. ページリード ───────────────────────────────────── */
.page-lead{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(72px,10vw,120px) var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.92fr);
  gap:clamp(36px,6vw,84px);align-items:start;
}
.page-lead-label{
  position:sticky;top:clamp(96px,11vw,124px);
}
.page-lead-label .en{
  display:block;font-family:"Oswald",sans-serif;font-weight:600;
  font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1;letter-spacing:.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-lead-label .jp{
  display:block;margin-top:.7em;
  font-family:var(--mincho);font-weight:700;font-size:1rem;letter-spacing:.14em;
  color:var(--orange-d);
}
.page-lead-label .jp::before{
  content:"";display:inline-block;width:24px;height:2px;background:var(--grad);
  vertical-align:middle;margin-right:.7em;
}
.page-lead-body h2{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:.04em;line-height:1.5;
  color:var(--ink);margin-bottom:1em;
}
.page-lead-body p{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(1.0625rem,1.4vw,1.2rem);color:var(--ink);line-height:2.3;margin-bottom:1.5em;
}
.page-lead-body p:last-child{margin-bottom:0;}
.page-lead-pullquote{
  position:relative;margin:2em 0;padding:1.4em 1.7em 1.4em 2.1em;
  background:linear-gradient(160deg,#fff,#fbf6ef);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(168,124,88,.08);
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(1.125rem,1.7vw,1.35rem);line-height:1.95;color:var(--orange-d);
}
.page-lead-pullquote::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);
}

/* ── B-2. テキスト＋画像（交互レイアウト） ──────────────── */
.feature-list{max-width:none;}
.feature{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:clamp(420px,46vw,600px);
}
.feature:nth-child(even){direction:rtl;}
.feature:nth-child(even)>*{direction:ltr;}
.feature-img{
  position:relative;overflow:hidden;
  background-size:cover;background-position:center;
}
.feature-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(56,48,41,.18),rgba(56,48,41,0) 60%);
}
.feature-body{
  padding:clamp(48px,6.5vw,92px) clamp(36px,5vw,76px);
  display:flex;flex-direction:column;justify-content:center;
}
.feature:nth-child(odd) .feature-body{background:var(--white);}
.feature:nth-child(even) .feature-body{background:linear-gradient(160deg,#fff,#f7f1e8);}
/* reason-num踏襲：grad抜き文字（.feature-body p の詳細度に勝たせる） */
.feature-body .feature-num{
  font-family:"Oswald",sans-serif;font-weight:600;
  font-size:clamp(3.6rem,6vw,5.5rem);line-height:1;letter-spacing:.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  margin-bottom:.1em;
}
/* 背景囲みなし・メインカラー文字（.feature-body p の詳細度に勝たせる） */
.feature-body .feature-tag{
  display:inline-block;align-self:flex-start;
  font-family:"Oswald",sans-serif;font-size:1.0625rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grad);margin-bottom:1em;
}
.feature-body h3{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.4rem,2.5vw,2.05rem);letter-spacing:.04em;line-height:1.4;
  color:var(--ink);margin-bottom:.85em;
}
.feature-body p{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(1.0625rem,1.4vw,1.15rem);color:var(--ink);line-height:2.2;margin-bottom:1.2em;
}
.feature-body p:last-of-type{margin-bottom:0;}
.feature-body .more-link{margin-top:clamp(20px,2.5vw,30px);}

/* ── B-3. 施工フロー（縦タイムライン） ─────────────────── */
.flow-wrap{max-width:800px;margin:0 auto;padding:0 var(--pad);}
.flow-list{position:relative;list-style:none;padding-left:clamp(82px,11vw,116px);}
/* 左端の細い縦軸（gradから線へフェード）。数字はその右に置き重ねない */
.flow-list::before{
  content:"";position:absolute;top:.4em;bottom:.4em;
  left:clamp(8px,1.1vw,12px);width:2px;
  background:linear-gradient(to bottom,var(--grad),var(--line) 14%,var(--line));
}
.flow-item{position:relative;margin-bottom:clamp(40px,5.5vw,64px);}
.flow-item:last-child{margin-bottom:0;}
/* 囲みなし：grad抜きの大きな数字（reason-num踏襲）。左ガター＝ラインの右隣に配置 */
.flow-num{
  position:absolute;top:-.12em;left:calc(-1 * clamp(54px,7vw,86px));
  font-family:"Oswald",sans-serif;font-weight:600;
  font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;letter-spacing:.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.flow-item h4{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.2rem,1.9vw,1.45rem);color:var(--ink);
  margin-bottom:.55em;padding-top:.15em;
}
.flow-item p{font-size:1rem;color:var(--gray);line-height:1.95;}
.flow-note{
  display:inline-flex;align-items:center;gap:.5em;margin-top:.7em;
  font-size:1rem;font-weight:700;letter-spacing:.04em;color:var(--orange-d);
  background:#fbf2e6;border:1px solid #ecd9bf;padding:3px 14px;
}
.flow-note::before{content:"";width:6px;height:6px;background:var(--grad);}
/* スケジュール用：時刻ラベル（大きな数字ではなく、ガター内に収まる単色時刻） */
.flow-list.is-schedule{padding-left:clamp(30px,11vw,116px);}
.flow-list.is-schedule .flow-num{
  top:.15em;left:calc(-1 * clamp(62px,8.6vw,94px));
  font-size:clamp(1.05rem,1.5vw,1.4rem);font-weight:700;white-space:nowrap;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--orange-d);-webkit-text-fill-color:var(--orange-d);
}

/* ── B-4. テーブル ──────────────────────────────────────── */
.info-table-wrap{max-width:900px;margin:0 auto;overflow-x:auto;}
.info-table{width:100%;border-collapse:collapse;font-size:1.0625rem;}
.info-table tr{border-bottom:1px solid var(--line);}
.info-table tr:first-child{border-top:3px solid var(--grad);}
.info-table tr:last-child{border-bottom:2px solid var(--line);}
.info-table th{
  width:min(210px,28%);text-align:left;vertical-align:top;
  padding:clamp(20px,2.2vw,26px) clamp(18px,2vw,24px);
  font-family:var(--mincho);font-weight:700;letter-spacing:.06em;
  color:var(--orange-d);white-space:nowrap;
}
.info-table td{
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px);
  color:var(--ink);line-height:2;
}
.info-table th{padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px);}
/* ゼブラで長い表でも視線が迷わない */
.info-table tbody tr:nth-child(even){background:rgba(168,124,88,.045);}

/* ── B-4b. 比較表（3列・バランス重視） ─────────────────── */
.compare-wrap{max-width:780px;margin:0 auto;overflow-x:auto;}
.compare-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-family:var(--mincho);font-size:clamp(1rem,1.2vw,1.0625rem);
  table-layout:fixed;
}
.compare-table th,.compare-table td{
  padding:clamp(18px,2.1vw,26px) clamp(16px,1.8vw,22px);
  text-align:center;vertical-align:top;line-height:1.75;
}
.compare-table col.ct-col-item{width:24%;}
.compare-table col.ct-col-val{width:38%;}
.compare-table thead th{
  font-weight:800;font-size:clamp(1.05rem,1.4vw,1.25rem);
  border-bottom:1px solid var(--line);
}
.compare-table thead th.ct-las{
  color:var(--orange-d);border-bottom:3px solid var(--grad);
}
.compare-table thead th.ct-conv{color:var(--ink);}
.compare-table tbody th,.compare-table tbody td{border-bottom:1px solid var(--line);}
.compare-table tbody th.ct-item{
  font-weight:700;color:var(--gray);letter-spacing:.04em;
}
.compare-table tbody td{color:var(--ink);font-weight:600;}
.compare-table td.ct-las{
  background:linear-gradient(180deg,rgba(200,144,74,.07),rgba(200,144,74,.025));
  color:var(--orange-d);font-weight:700;
}

/* ── B-5. FAQアコーディオン ─────────────────────────────── */
.faq-list{max-width:900px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:3px solid var(--grad);}
.faq-q{
  display:flex;align-items:flex-start;gap:1em;width:100%;
  padding:clamp(22px,2.6vw,30px) 0;
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(1.0625rem,1.5vw,1.2rem);color:var(--ink);line-height:1.65;
  transition:color .3s;
}
.faq-q:hover{color:var(--orange);}
/* 囲みなし：grad/メインカラーの大きな英字 */
.faq-q-badge,.faq-a-badge{
  flex-shrink:0;width:clamp(26px,2.6vw,34px);
  font-family:"Oswald",sans-serif;font-weight:600;
  font-size:clamp(1.5rem,2vw,1.85rem);line-height:1.05;
}
.faq-q-badge{color:var(--grad);}
.faq-q-text{flex:1;}
/* 囲みなし：プラス/クロスの線のみ */
.faq-icon{
  flex-shrink:0;width:20px;height:20px;position:relative;margin-top:.3em;
}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--orange);
  transition:transform .3s var(--ease);
}
.faq-icon::before{width:18px;height:2px;transform:translate(-50%,-50%);}
.faq-icon::after{width:2px;height:18px;transform:translate(-50%,-50%);}
.faq-item.is-open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);}
/* minmax(0,…)で下限を0に固定。overflow:hiddenでトラック超過分(inner)をクリップ */
.faq-a{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;transition:grid-template-rows .4s var(--ease);}
.faq-item.is-open .faq-a{grid-template-rows:minmax(0,1fr);}
/* min-height:0 でauto高さコンテナでも0frが真に0へ潰れる（閉時に1行も見せない） */
.faq-a-inner{overflow:hidden;min-height:0;display:flex;gap:1em;padding:0 0 clamp(22px,2.6vw,30px);}
.faq-a-badge{color:var(--orange-d);}
.faq-a-text{flex:1;font-size:1rem;color:var(--gray);line-height:2;padding-top:.15em;}

/* ── B-6. スタッフカード ────────────────────────────────── */
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.staff-card{
  background:linear-gradient(160deg,#fff,#fbf6ef);
  border:1px solid var(--line);border-top:4px solid var(--wood);
  overflow:hidden;
}
.staff-photo{
  aspect-ratio:3/4;background-size:cover;background-position:center top;
  position:relative;overflow:hidden;
}
image-slot.staff-photo{display:block;width:100%;height:auto;align-self:stretch;}
.staff-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(56,48,41,.35),rgba(56,48,41,0) 55%);
}
/* 写真プレースホルダー（差し替え用グレースペース） */
.staff-photo.is-empty{background:linear-gradient(160deg,#e2ddd3,#d2ccc0);}
.staff-photo.is-empty::after{display:none;}
.staff-photo.is-empty::before{
  content:"PHOTO";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:"Oswald",sans-serif;font-size:1rem;font-weight:600;letter-spacing:.2em;
  color:rgba(86,72,58,.30);
}
.staff-body{padding:clamp(22px,2.6vw,30px);}
.staff-role{
  font-family:"Oswald",sans-serif;font-size:1rem;font-weight:600;letter-spacing:.14em;
  color:var(--orange);margin-bottom:.35em;
}
.staff-name{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.2rem,1.8vw,1.4rem);color:var(--ink);line-height:1.3;
}
.staff-kana{
  display:block;font-family:var(--mincho);font-size:1rem;font-weight:400;
  color:var(--gray);letter-spacing:.06em;margin:.25em 0 .9em;
}
.staff-msg{font-size:1rem;color:var(--gray);line-height:1.9;}
.staff-tags{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.9em;}
.staff-tag{
  font-size:1rem;font-weight:700;letter-spacing:.04em;
  color:var(--orange-d);border:1px solid var(--wood);padding:1px 11px;
}

/* ── B-7. 記事一覧＋ページネーション ───────────────────── */
.article-list{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.8vw,36px);
  max-width:var(--maxw);margin:0 auto;
}
.article-card{
  display:flex;flex-direction:column;
  background:#fff;border-radius:2px;overflow:hidden;
  box-shadow:0 2px 18px rgba(44,39,34,.07);
  border:1px solid rgba(44,39,34,.06);
  transition:transform .35s,box-shadow .35s;
  color:inherit;
}
@media(hover:hover){
  .article-card:hover{transform:translateY(-5px);box-shadow:0 10px 36px rgba(44,39,34,.14);}
}
.article-thumb{
  aspect-ratio:16/9;background-size:cover;background-position:center;
  width:100%;flex-shrink:0;
  transition:transform .6s;
}
@media(hover:hover){.article-card:hover .article-thumb{transform:scale(1.04);}}
.article-body{
  padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px) clamp(18px,2.2vw,28px);
  display:flex;flex-direction:column;flex:1;
}
.article-meta{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;margin-bottom:.7em;}
.article-cat{
  font-size:.875rem;font-weight:700;letter-spacing:.04em;
  color:#fff;background:var(--grad);padding:2px 12px;
}
.article-date{font-family:"Oswald",sans-serif;font-weight:500;font-size:.9375rem;color:var(--gray);letter-spacing:.04em;}
.article-title{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(1rem,1.3vw,1.175rem);color:var(--ink);line-height:1.65;
  transition:color .3s;
}
@media(hover:hover){.article-card:hover .article-title{color:var(--orange-d);}}
.article-excerpt{
  font-size:1rem;color:var(--gray);line-height:1.85;margin-top:.5em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pagination{
  display:flex;justify-content:center;align-items:center;gap:.45em;
  padding:clamp(40px,5vw,60px) 0 0;
}
.page-btn{
  min-width:46px;height:46px;padding:0 .4em;
  display:flex;align-items:center;justify-content:center;
  font-family:"Oswald",sans-serif;font-size:1.0625rem;font-weight:600;
  border:2px solid var(--line);color:var(--gray);background:none;cursor:pointer;
  transition:border-color .3s,color .3s,background .3s,transform .3s;
}
.page-btn:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);}
.page-btn.is-active{background:var(--grad);color:#fff;border-color:var(--grad);}
.page-btn.is-disabled{opacity:.35;pointer-events:none;}

/* ── B-8. ブログ サイドバーレイアウト ───────────────────── */
.blog-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:clamp(32px,4vw,60px);
  align-items:start;
}
.blog-main .article-list{grid-template-columns:repeat(2,1fr);max-width:none;margin:0;}
.sidebar-widget{
  background:#fff;border:1px solid var(--line);
  padding:clamp(20px,2.5vw,28px);
  margin-bottom:clamp(20px,2.5vw,28px);
}
.sidebar-widget:last-child{margin-bottom:0;}
.sidebar-widget-title{
  font-family:var(--mincho);font-size:1.0625rem;font-weight:700;color:var(--ink);
  padding-bottom:.65em;margin-bottom:.9em;
  border-bottom:2px solid var(--orange);
}
.latest-posts{list-style:none;padding:0;margin:0;}
.latest-post-item{border-bottom:1px solid var(--line);padding:.7em 0;}
.latest-post-item:first-child{padding-top:0;}
.latest-post-item:last-child{border-bottom:none;padding-bottom:0;}
.latest-post-item a{display:block;text-decoration:none;}
.latest-post-date{font-family:"Oswald",sans-serif;font-size:.8125rem;color:var(--gray);letter-spacing:.04em;display:block;margin-bottom:.2em;}
.latest-post-title{font-size:.9rem;color:var(--ink);line-height:1.55;transition:color .3s;}
@media(hover:hover){.latest-post-item a:hover .latest-post-title{color:var(--orange-d);}}
.cat-list{list-style:none;padding:0;margin:0;}
.cat-list li{border-bottom:1px solid var(--line);}
.cat-list li:last-child{border-bottom:none;}
.cat-list a{
  display:flex;justify-content:space-between;align-items:center;
  padding:.6em 0;font-size:.9375rem;color:var(--ink);
  text-decoration:none;transition:color .3s;
}
@media(hover:hover){.cat-list a:hover{color:var(--orange-d);}}
.cat-list a span{font-family:"Oswald",sans-serif;font-size:.875rem;color:var(--gray);}

/* ── B-9. お問い合わせフォーム ──────────────────────────── */
.form-wrap{max-width:880px;margin:0 auto;}
.form-group{margin-bottom:clamp(24px,3vw,34px);}
.form-label{
  display:flex;align-items:center;gap:.6em;
  font-family:var(--mincho);font-weight:700;font-size:1.0625rem;
  color:var(--ink);margin-bottom:.7em;
}
.form-badge-req,.form-badge-opt{
  font-size:1rem;font-weight:700;letter-spacing:.04em;padding:1px 10px;
}
.form-badge-req{color:#fff;background:var(--orange);}
.form-badge-opt{color:var(--gray);border:1px solid var(--line);}
.form-input,.form-select,.form-textarea{
  display:block;width:100%;border-radius:0;
  font-family:var(--jp);font-size:1.0625rem;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--line);
  padding:clamp(13px,1.5vw,17px) clamp(15px,1.8vw,19px);
  transition:border-color .3s,box-shadow .3s;outline:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--orange);border-left-color:var(--grad);
  box-shadow:0 6px 22px rgba(168,124,88,.12);
}
.form-textarea{resize:vertical;min-height:180px;line-height:1.9;}
.form-note{font-size:1rem;color:var(--gray);margin-top:.5em;line-height:1.7;}
.form-note a{color:var(--orange);}
.form-privacy{
  display:flex;align-items:flex-start;gap:.75em;
  margin-bottom:clamp(32px,4vw,46px);
  font-size:1rem;color:var(--gray);line-height:1.7;
}
.form-privacy input[type="checkbox"]{
  flex-shrink:0;width:18px;height:18px;margin-top:.2em;accent-color:var(--orange);
}
.form-submit{display:flex;justify-content:center;}
.btn-submit{
  display:inline-flex;align-items:center;gap:.85em;border-radius:0;cursor:pointer;
  font-size:1.0625rem;font-weight:700;letter-spacing:.06em;color:#fff;
  background:var(--grad);border:2px solid var(--grad);
  padding:clamp(16px,1.8vw,21px) clamp(56px,8vw,90px);
  box-shadow:0 12px 30px rgba(168,124,88,.22);
  transition:background .35s,color .35s,transform .3s,box-shadow .35s;
}
.btn-submit:hover{
  background:transparent;color:var(--orange-d);
  transform:translateY(-3px);box-shadow:none;
}
.btn-submit i{width:20px;height:2px;background:currentColor;position:relative;}
.btn-submit i::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);
}

/* ── A-3. ページ下部CTA ─────────────────────────────────── */
.sub-cta{
  position:relative;overflow:hidden;background:var(--dark);
  padding:clamp(80px,11vw,128px) var(--pad);text-align:center;
}
/* section-dark踏襲：上端grad帯 */
.sub-cta::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--grad);z-index:3;
}
/* フッター同様の薄い漆喰テクスチャ */
.sub-cta::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:url('../images/AdobeStock_341601085.jpeg') center/cover;
  opacity:.07;mix-blend-mode:screen;pointer-events:none;
}
.sub-cta>*{position:relative;z-index:2;}
.sub-cta-en{
  display:inline-flex;align-items:center;gap:14px;
  font-family:"Oswald",sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:.2em;
  color:var(--wood);text-transform:uppercase;margin-bottom:.6em;
}
.sub-cta-en::before,.sub-cta-en::after{content:"";width:30px;height:2px;background:var(--wood);}
.sub-cta-title{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.7rem,3.8vw,2.7rem);letter-spacing:.05em;line-height:1.4;
  color:#fff;margin-bottom:clamp(16px,2vw,22px);
}
/* TAKEDAGUMI はヘッダーロゴ(.logo-mark)と同フォント */
.sub-cta-title .brand{font-family:var(--en);font-weight:700;letter-spacing:-.01em;}
.sub-cta-lead{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(1.0625rem,1.4vw,1.15rem);line-height:2.05;
  color:rgba(255,255,255,.74);max-width:580px;margin:0 auto clamp(34px,4.5vw,50px);
}
.sub-cta-btns{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.2vw,26px);flex-wrap:wrap;
}
/* 暗背景用アウトラインボタン（btn-primaryの対） */
.btn-outline{
  display:inline-flex;align-items:center;gap:.7em;border-radius:0;
  font-size:1.0625rem;font-weight:700;letter-spacing:.04em;color:#fff;
  background:transparent;border:2px solid rgba(255,255,255,.5);
  padding:clamp(14px,1.5vw,17px) clamp(28px,3vw,40px);
  transition:background .35s,border-color .35s,color .35s;
}
.btn-outline:hover{background:#fff;border-color:#fff;color:var(--ink);}
/* 下層CTAのボタンは持ち上げ無し（btn-primaryはトップ共有のためここで打ち消す） */
.sub-cta .btn-primary:hover{transform:none;}

/* ── A-4. 関連ページリンク ──────────────────────────────── */
/* コンクリート画像をそのまま背景に（乗算・暗幕なし） */
.related{position:relative;overflow:hidden;background:var(--i-adobestock-179710260-jpeg) center/cover;padding:clamp(56px,8vw,88px) var(--pad);}
.related-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.related-card{
  display:flex;align-items:center;justify-content:space-between;gap:1.2em;
  padding:clamp(26px,3.2vw,36px);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(44,39,34,.05);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
}
.related-card:hover{
  transform:translateY(-6px);box-shadow:0 18px 44px rgba(168,124,88,.16);border-color:var(--orange);
}
.related-label{
  font-family:"Oswald",sans-serif;font-size:1rem;font-weight:600;letter-spacing:.14em;
  color:var(--orange);margin-bottom:.35em;
}
.related-title{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.1rem,1.6vw,1.25rem);color:var(--ink);
}
/* 囲みなし：シェブロンのみ。ホバーで右へスライド */
.related-arrow{
  flex-shrink:0;width:14px;height:14px;position:relative;
  transition:transform .3s var(--ease);
}
.related-card:hover .related-arrow{transform:translateX(5px);}
.related-arrow::after{
  content:"";position:absolute;top:50%;left:0;width:11px;height:11px;
  border-top:2px solid var(--orange);border-right:2px solid var(--orange);
  transform:translateY(-50%) rotate(45deg);transition:border-color .3s;
}
.related-card:hover .related-arrow::after{border-color:var(--orange-d);}

/* ── コンクリートテクスチャ帯セクション ──────────────────── */
/* section-darkのバリアント：AdobeStock_77864621.jpegで素材感を強調 */
.section-concrete{
  position:relative;overflow:hidden;
  background:#2b2420;
  padding:clamp(72px,10vw,120px) var(--pad);
}
.section-concrete::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--i-adobestock-77864621-jpeg) center/cover;
  opacity:.22;pointer-events:none;
}
.section-concrete::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;
  background:var(--grad);z-index:2;
}
.section-concrete-inner{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
}
.section-concrete .eyebrow{color:var(--wood);opacity:.9;}
.section-concrete .sec-title{color:#fff;}
.section-concrete .sec-sub{color:rgba(255,255,255,.6);}

/* ── フルブリードコンクリートパネル（視覚的区切り） ──────── */
.concrete-panel{
  position:relative;overflow:hidden;
  min-height:clamp(240px,30vh,340px);
}
.concrete-panel-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  background-attachment:fixed;
}
.concrete-panel::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(56,48,41,.7) 0%,rgba(43,36,32,.9) 100%);
}
.concrete-panel::after{
  content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;
  background:var(--grad);z-index:3;
}
.concrete-panel-inner{
  position:relative;z-index:2;
  min-height:inherit;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:clamp(48px,7vw,72px) var(--pad);
  gap:clamp(12px,1.4vw,18px);
}
.concrete-panel-en{
  font-family:"Oswald",sans-serif;font-size:clamp(1rem,1.4vw,1.15rem);font-weight:600;
  letter-spacing:.22em;color:var(--wood);
}
.concrete-panel-text{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.85rem);letter-spacing:.08em;line-height:1.65;
  color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35);
}

/* ── 実績数値ハイライト（.section-concrete内で使用） ───────── */
.stat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
  max-width:var(--maxw);margin:0 auto;
}
.stat-item{
  text-align:center;
  padding:clamp(28px,3.5vw,44px) clamp(16px,2vw,28px);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-top:3px solid var(--grad);
}
.stat-num{
  font-family:"Oswald",sans-serif;font-weight:600;
  font-size:clamp(3rem,5.5vw,4.8rem);line-height:1;letter-spacing:.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  display:inline-block;
}
.stat-unit{
  font-family:"Oswald",sans-serif;font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:600;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.stat-label{
  font-family:var(--mincho);font-weight:700;font-size:1rem;letter-spacing:.08em;
  color:rgba(255,255,255,.65);margin-top:.5em;
  display:block;
}
.stat-desc{
  font-size:1rem;color:rgba(255,255,255,.42);line-height:1.75;margin-top:.35em;
}

/* ── 施工実績グリッド（works-grid） ──────────────────────── */
.works-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px);
  max-width:var(--maxw);margin:0 auto;
}
.works-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 6px 20px rgba(44,39,34,.07);
  transition:transform .4s var(--ease),box-shadow .4s;
}
@media(hover:hover){
  .works-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(168,124,88,.20);}
}
.works-card-thumb{
  aspect-ratio:4/3;
  background-size:cover;background-position:center;
  transition:transform .6s var(--ease);
}
@media(hover:hover){
  .works-card:hover .works-card-thumb{transform:scale(1.06);}
}
.works-card-body{
  display:flex;flex-direction:column;gap:.55em;
  padding:clamp(18px,2vw,26px);
  flex:1;
}
.works-card-date{
  font-family:"Oswald",sans-serif;font-size:.95rem;font-weight:500;
  color:var(--gray);letter-spacing:.05em;
}
.works-card-title{
  font-family:var(--mincho);font-weight:700;font-size:1.0625rem;
  color:var(--ink);line-height:1.65;
}
.works-card-cat{
  align-self:flex-start;margin-top:auto;
  font-family:"Noto Sans JP",sans-serif;font-size:.78rem;font-weight:500;
  color:var(--ink);background:var(--cream,#f6f1e8);
  border:1px solid var(--line);
  padding:5px 13px;letter-spacing:.04em;
}
/* 先頭カードのみ大判フィーチャー（HTML不変・CSS上書きのみ）：2列幅＋画像左・本文右 */
.works-grid .works-card:first-child{grid-column:span 2;flex-direction:row;}
.works-grid .works-card:first-child .works-card-thumb{flex:1 1 58%;aspect-ratio:16/10;}
.works-grid .works-card:first-child .works-card-body{
  flex:1 1 42%;justify-content:center;
  padding:clamp(26px,3vw,48px);gap:.7em;
}
.works-grid .works-card:first-child .works-card-date{font-size:1.05rem;}
.works-grid .works-card:first-child .works-card-title{font-size:clamp(1.2rem,1.8vw,1.6rem);}
/* 均等3列モード（先頭カードのフィーチャー化を無効化） */
.works-grid.is-equal .works-card:first-child{grid-column:auto;flex-direction:column;}
.works-grid.is-equal .works-card:first-child .works-card-thumb{flex:none;aspect-ratio:4/3;}
.works-grid.is-equal .works-card:first-child .works-card-body{padding:clamp(18px,2vw,26px);gap:.55em;justify-content:flex-start;}

/* ── 採用求人票（job-card / job-table） ──────────────────── */
.job-card{
  background:linear-gradient(160deg,#fff,#fbf6ef);
  border:1px solid var(--line);border-top:4px solid var(--grad);
  padding:clamp(28px,4vw,44px);
  max-width:900px;margin-left:auto;margin-right:auto;
  margin-bottom:var(--gap);
  position:relative;overflow:hidden;
}
.job-card::after{
  content:"";position:absolute;inset:0;
  background:url('/images/AdobeStock_341601085.jpeg') center/cover;
  opacity:.03;mix-blend-mode:multiply;pointer-events:none;
}
.job-card-en{
  font-family:"Oswald",sans-serif;font-size:1rem;font-weight:600;letter-spacing:.18em;
  color:var(--orange);margin-bottom:.4em;position:relative;
}
.job-card-title{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);
  margin-bottom:clamp(18px,2.2vw,26px);position:relative;
}
.job-table{border-collapse:collapse;width:100%;position:relative;}
.job-table tr{border-bottom:1px solid var(--line);}
.job-table tr:first-child{border-top:1px solid var(--line);}
.job-table th{
  width:min(160px,26%);text-align:left;vertical-align:top;
  padding:clamp(13px,1.6vw,17px) clamp(14px,1.8vw,18px);
  font-family:var(--mincho);font-weight:700;letter-spacing:.04em;
  color:var(--orange-d);white-space:nowrap;font-size:1rem;
}
.job-table td{
  padding:clamp(13px,1.6vw,17px) clamp(14px,1.8vw,18px);
  color:var(--ink);line-height:1.9;font-size:1rem;
}
.job-badge{
  display:inline-block;font-size:1rem;font-weight:700;letter-spacing:.04em;
  color:#fff;background:var(--grad);padding:8px 14px;
  margin-right:.4em;margin-bottom:.5em;
}
.job-badge.is-welcome{background:var(--orange-d);}

/* ── 全幅イメージバンド（写真＋引用オーバーレイ） ─────────── */
.image-band{
  position:relative;overflow:hidden;
  min-height:clamp(320px,40vw,520px);
  display:flex;align-items:center;
  background-size:cover;background-position:center;
}
.image-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(36,30,26,.74),rgba(36,30,26,.32) 64%,rgba(36,30,26,.12));
}
.image-band-inner{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:clamp(48px,8vw,96px) var(--pad);
}
.image-band-en{
  font-family:"Oswald",sans-serif;font-size:clamp(1rem,1.4vw,1.2rem);font-weight:600;
  letter-spacing:.2em;color:var(--wood);margin-bottom:1em;
}
.image-band-quote{
  max-width:18em;
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.7;letter-spacing:.05em;
  color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.image-band-quote .em{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.image-band-cap{
  margin-top:1.4em;font-family:var(--mincho);font-weight:600;
  font-size:clamp(1rem,1.3vw,1.125rem);line-height:2;color:rgba(255,255,255,.82);
  max-width:34em;
}
@media(prefers-reduced-motion:reduce){.image-band{background-attachment:scroll;}}
@media(max-width:640px){.image-band{background-attachment:scroll;}}

/* ── 柱リスト（塗りの番号バッジ＋横組みエディトリアル） ───── */
.pillar-list{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  border-top:2px solid var(--ink);
}
.pillar-item{
  display:grid;
  grid-template-columns:clamp(56px,6vw,80px) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:center;
  padding:clamp(28px,3.6vw,46px) 0;
  border-bottom:1px solid var(--line);
}
.pillar-num{
  display:flex;align-items:center;justify-content:center;
  width:clamp(56px,6vw,80px);height:clamp(56px,6vw,80px);
  background:var(--orange-d);color:#fff;
  font-family:"Oswald",sans-serif;font-weight:600;
  font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;letter-spacing:.02em;
}
.pillar-head{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.5;letter-spacing:.04em;
  color:var(--ink);margin-bottom:.5em;
}
.pillar-body{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(1rem,1.3vw,1.125rem);line-height:2.05;color:var(--gray);
  text-wrap:pretty;
}

/* ── 保証カード（チェック章＋上罫・クリーム塗り） ─────────── */
.assure-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
}
.assure-card{
  position:relative;
  background:linear-gradient(165deg,#fff,#f4ede1);
  border:1px solid var(--line);border-top:4px solid var(--orange-d);
  padding:clamp(30px,3.4vw,42px) clamp(24px,2.6vw,34px);
  box-shadow:0 10px 30px rgba(44,39,34,.06);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.assure-check{
  display:flex;align-items:center;justify-content:center;
  width:clamp(40px,4vw,52px);height:clamp(40px,4vw,52px);
  border:2px solid var(--orange-d);border-radius:50%;
  margin-bottom:clamp(16px,1.8vw,22px);
}
.assure-check::after{
  content:"";display:block;
  width:clamp(13px,1.3vw,17px);height:clamp(7px,.7vw,9px);
  border-left:3px solid var(--orange-d);border-bottom:3px solid var(--orange-d);
  transform:translateY(-15%) rotate(-45deg);
}
.assure-card h3{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.15rem,1.6vw,1.38rem);line-height:1.5;color:var(--ink);
  margin-bottom:.7em;
}
.assure-card p{
  font-family:var(--mincho);font-weight:600;
  font-size:1rem;line-height:1.95;color:var(--gray);text-wrap:pretty;
}
@media(max-width:780px){
  .pillar-item{grid-template-columns:clamp(50px,13vw,64px) 1fr;gap:clamp(16px,4vw,24px);}
  .assure-grid{grid-template-columns:1fr;}
  .honest-pair{grid-template-columns:1fr;}
}

/* ── 本音ペア（やりがい＝明／大変なこと＝暗の対カード） ─────── */
.honest-pair{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
}
.honest-card{
  position:relative;overflow:hidden;
  padding:clamp(32px,4vw,52px) clamp(28px,3.2vw,44px);
  border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.honest-card.is-good{background:linear-gradient(160deg,#fff,#f4ede1);border-top:4px solid var(--orange-d);}
.honest-card.is-tough{background:#2b2420;border-top:4px solid var(--wood);border-color:#2b2420;}
.honest-mark{
  display:flex;align-items:center;justify-content:center;
  width:clamp(44px,4.4vw,56px);height:clamp(44px,4.4vw,56px);
  font-family:"Oswald",sans-serif;font-weight:600;font-size:clamp(1.6rem,2.4vw,2rem);line-height:1;
  margin-bottom:clamp(18px,2vw,24px);
}
.honest-card.is-good .honest-mark{background:var(--orange-d);color:#fff;}
.honest-card.is-tough .honest-mark{border:2px solid var(--wood);color:var(--wood);}
.honest-en{
  font-family:"Oswald",sans-serif;font-size:1rem;font-weight:600;letter-spacing:.16em;
  margin-bottom:.6em;
}
.honest-card.is-good .honest-en{color:var(--orange);}
.honest-card.is-tough .honest-en{color:var(--wood);}
.honest-card h3{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.5;margin-bottom:.7em;
}
.honest-card.is-good h3{color:var(--ink);}
.honest-card.is-tough h3{color:#fff;}
.honest-card p{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(1rem,1.3vw,1.1rem);line-height:2.05;text-wrap:pretty;
}
.honest-card.is-good p{color:var(--gray);}
.honest-card.is-tough p{color:rgba(255,255,255,.82);}

/* ── 人物像カード（中央寄せ・下罫アクセント） ──────────────── */
.persona-grid{
  max-width:920px;margin:0 auto;
  display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);
}
.persona-card{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange-d);
  padding:clamp(24px,3vw,34px) clamp(26px,3.2vw,40px);
  text-align:left;box-shadow:0 8px 26px rgba(44,39,34,.05);
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);
}
.persona-kw{
  flex:none;width:clamp(96px,12vw,140px);
  font-family:"Oswald",sans-serif;font-size:clamp(1rem,1.3vw,1.18rem);font-weight:600;letter-spacing:.14em;
  color:var(--orange);padding-right:clamp(18px,2.4vw,32px);
  border-right:2px solid var(--line);
}
.persona-body{flex:1;}
.persona-card h3{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.5;color:var(--ink);
  margin-bottom:.4em;text-wrap:balance;
}
.persona-card p{
  font-family:var(--mincho);font-weight:600;
  font-size:1rem;line-height:1.9;color:var(--gray);text-wrap:pretty;word-break:auto-phrase;
}
@media(max-width:600px){
  .persona-card{flex-direction:column;align-items:flex-start;gap:clamp(12px,3vw,16px);}
  .persona-kw{width:auto;border-right:0;border-bottom:2px solid var(--line);padding-right:0;padding-bottom:.5em;}
}

/* ── 子ページ導線カードの画像（branch-card サムネ） ─────────── */
.branch-card{overflow:hidden;padding:0;display:flex;flex-direction:column;align-items:stretch;}
.branch-thumb{
  width:100%;align-self:stretch;
  aspect-ratio:16/10;background-size:cover;background-position:center;
  transition:transform .6s var(--ease);
}
@media(hover:hover){.branch-card:hover .branch-thumb{transform:scale(1.05);}}
.branch-card-body{
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;flex:1;
}
.branch-card-body .more-link{margin-top:auto;}

/* ── 成長マップ（横連結タイムライン） ───────────────────────── */
.growth-map{
  position:relative;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,1vw,16px);
}
.growth-step{position:relative;text-align:center;padding-top:clamp(58px,7vw,84px);}
/* 連結ライン（ノード中心の高さに通す） */
.growth-step::before{
  content:"";position:absolute;top:clamp(26px,3.2vw,38px);left:-50%;width:100%;height:3px;
  background:var(--line);z-index:0;
}
.growth-step:first-child::before{display:none;}
.growth-node{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:clamp(52px,6.4vw,76px);height:clamp(52px,6.4vw,76px);border-radius:50%;
  background:var(--orange-d);color:#fff;
  font-family:"Oswald",sans-serif;font-weight:600;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1;
  box-shadow:0 6px 18px rgba(134,96,63,.28);
}
.growth-step:last-child .growth-node{background:var(--ink);}
.growth-stage{
  font-family:"Oswald",sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.14em;
  color:var(--orange);margin-bottom:.5em;
}
.growth-step h4{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.45;color:var(--ink);
  margin-bottom:.6em;text-wrap:balance;
}
.growth-step p{
  font-family:var(--mincho);font-weight:600;
  font-size:.95rem;line-height:1.8;color:var(--gray);text-wrap:pretty;
}
.growth-note{
  display:inline-flex;align-items:center;gap:.5em;margin-top:.8em;
  font-size:.85rem;font-weight:700;color:var(--orange-d);
}
.growth-note::before{content:"";width:6px;height:6px;background:var(--grad);}
@media(max-width:780px){
  .growth-map{grid-template-columns:1fr;gap:clamp(20px,4vw,28px);}
  .growth-step{padding-top:0;padding-left:clamp(64px,16vw,84px);text-align:left;min-height:clamp(56px,14vw,76px);}
  .growth-step::before{top:0;left:clamp(26px,8vw,38px);width:3px;height:100%;}
  .growth-step:first-child::before{display:block;top:50%;height:50%;}
  .growth-step:last-child::before{height:50%;}
  .growth-node{top:50%;left:0;transform:translateY(-50%);}
}

/* ── アイコンカード（reason-card の番号→ライン円アイコン） ──── */
.ricon{
  display:flex;align-items:center;justify-content:center;
  width:clamp(52px,5.4vw,64px);height:clamp(52px,5.4vw,64px);border-radius:50%;
  border:2px solid var(--orange-d);color:var(--orange-d);
  margin-bottom:clamp(16px,1.8vw,22px);
}
.ricon svg{width:48%;height:48%;display:block;}
.ricon svg *{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* ── 手当カード（アイコン横置き＋値の強調） ───────────────── */
.perk-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);
}
.perk-card{
  display:flex;align-items:flex-start;gap:clamp(16px,2vw,24px);
  background:linear-gradient(160deg,#fff,#fbf6ef);
  border:1px solid var(--line);border-left:4px solid var(--orange-d);
  padding:clamp(24px,3vw,34px);
}
.perk-ic{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:clamp(48px,5vw,60px);height:clamp(48px,5vw,60px);border-radius:50%;
  background:rgba(134,96,63,.08);color:var(--orange-d);
}
.perk-ic svg{width:48%;height:48%;display:block;}
.perk-ic svg *{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.perk-body{flex:1;}
.perk-body h3{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--ink);margin-bottom:.4em;
}
.perk-val{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(1rem,1.3vw,1.1rem);color:var(--orange-d);line-height:1.7;
}
.perk-note{
  display:block;margin-top:.4em;
  font-family:var(--mincho);font-weight:600;font-size:.95rem;color:var(--gray);line-height:1.7;
}
@media(max-width:640px){.perk-grid{grid-template-columns:1fr;}}

/* ── 次ページ導線ストリップ（Next cue） ─────────────────────── */
.nextcue{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.nextcue-card{
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);
  padding:clamp(26px,3.6vw,42px) clamp(26px,3.6vw,48px);
  background:linear-gradient(160deg,#fff,#f4ede1);
  border:1px solid var(--line);border-left:4px solid var(--orange-d);
  text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s;
}
@media(hover:hover){.nextcue-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(168,124,88,.16);}}
.nextcue-main{flex:1;}
.nextcue-label{
  font-family:"Oswald",sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.2em;
  color:var(--orange);margin-bottom:.5em;display:flex;align-items:center;gap:.6em;
}
.nextcue-label::before{content:"";width:26px;height:2px;background:var(--grad);}
.nextcue-title{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(1.3rem,2.2vw,1.8rem);color:var(--ink);line-height:1.4;margin-bottom:.35em;
}
.nextcue-text{font-family:var(--mincho);font-weight:600;font-size:1rem;color:var(--gray);line-height:1.8;}
.nextcue-arrow{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:clamp(52px,5.4vw,64px);height:clamp(52px,5.4vw,64px);border-radius:50%;
  background:var(--orange-d);transition:transform .35s var(--ease);
}
.nextcue-arrow::after{
  content:"";width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff;
  transform:rotate(45deg);margin-left:-4px;
}
@media(hover:hover){.nextcue-card:hover .nextcue-arrow{transform:translateX(5px);}}
@media(max-width:560px){
  .nextcue-card{flex-direction:column;align-items:flex-start;text-align:left;}
}

/* ── レスポンシブ ────────────────────────────────────────── */
@media(max-width:1240px){
  .feature-body{padding:clamp(40px,6vw,72px) clamp(28px,4vw,56px);}
  .staff-grid{grid-template-columns:repeat(2,1fr);}
  .related-grid{grid-template-columns:repeat(3,1fr);}
  .works-grid{grid-template-columns:repeat(2,1fr);}
  .article-list{grid-template-columns:repeat(2,1fr);}
  .blog-layout{grid-template-columns:minmax(0,1fr) 240px;gap:clamp(24px,3vw,40px);}
}
@media(max-width:900px){
  .blog-layout{grid-template-columns:1fr;}
  .blog-sidebar{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,24px);}
  .sidebar-widget{margin-bottom:0;}
}
@media(max-width:640px){
  .sub-hero{background-attachment:scroll;min-height:clamp(380px,62vh,500px);}
.sub-hero-title{font-size:clamp(1.9rem,8vw,2.6rem);}
  .sub-hero-lead{max-width:100%;}
  .page-lead{grid-template-columns:1fr;gap:clamp(20px,5vw,32px);}
  .page-lead-label{position:static;}
  .feature{grid-template-columns:1fr;min-height:auto;}
  .feature:nth-child(even){direction:ltr;}
  .feature-img{aspect-ratio:16/10;}
  .feature-body{padding:clamp(36px,8vw,52px) var(--pad);}
  .staff-grid{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  .info-table th,.info-table td{display:block;width:100%;}
  .info-table th{padding-bottom:.2em;}
  .info-table td{padding-top:.3em;}
  .article-list{grid-template-columns:1fr;}
  .article-body{padding:clamp(14px,4vw,20px);}
  .blog-sidebar{grid-template-columns:1fr;}
  /* ① 施工フロー：罫線を消し、番号を上に置いて本文幅を最大化 */
  .flow-wrap{padding:0;}
  .flow-list{padding-left:0;}
  .flow-list::before{display:none;}
  .flow-num{position:static;display:block;margin-bottom:.05em;}
  .flow-item h4{padding-top:0;}
  /* ② CTAボタン：縦並び時に横幅を揃える */
  .sub-cta-btns{flex-direction:column;}
  .sub-cta .btn-primary,.btn-outline{width:100%;justify-content:center;}
  /* 新規クラス */
  .works-grid{grid-template-columns:1fr;}
  .works-grid .works-card:first-child{grid-column:span 1;flex-direction:column;}
  .works-grid .works-card:first-child .works-card-thumb{aspect-ratio:4/3;}
  .stat-grid{grid-template-columns:1fr;}
  .concrete-panel-bg{background-attachment:scroll;}
  .job-table th,.job-table td{display:block;width:100%;}
  .job-table th{padding-bottom:.2em;}
  .job-table td{padding-top:.3em;}
}

/* 日本語の文節単位改行（「を、」等が行頭に孤立するのを防ぐ） */
.reason-card p,.honest-card p,.persona-card p,.assure-card p,.perk-body p,
.page-lead-body p,.sub-hero-lead,.nextcue-text,.growth-step p,.feature-body p{
  word-break:auto-phrase;
}

/* ============================================================
   文字の視認性向上：細い明朝・本文を太めにして「はっきり」と
   ============================================================ */
.page-lead-body p,
.page-lead-body h2,
.sub-hero-lead,
.feature-body p,
.reason-card p,
.honest-card p,
.persona-card p,
.assure-card p,
.perk-body p,
.growth-step p,
.pillar-body,
.nextcue-text,
.info-table td,
.info-table th{font-weight:700;}

.sub-cta-tel{margin-top:1.3em;font-size:.95rem;color:rgba(255,255,255,.72);}
.sub-cta-tel a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.45);}
.footer-tel-lead{font-size:.95rem;color:rgba(255,255,255,.6);margin:.15em 0 1em;}
.footer-tel-mini{font-size:.9rem;color:rgba(255,255,255,.55);margin-top:.9em;}
.footer-tel-mini a{color:rgba(255,255,255,.82);}


/* ===== 40_skin.css ===== */
/* ============================================================
   ★★★ このファイルは【全案件共通の資産】です。案件では編集しないでください ★★★
   ------------------------------------------------------------
   （Claude Code / Claude Design / 手作業、いずれの経路でも同じです）

   ■ 案件ごとの調整は、必ず `override.css` に書いてください。
     読み込み/結合順が  … → style.css → cuezilla-skin.css → 【override.css】  なので、
     override.css に書いた指定は本ファイルに打ち消されません。**案件の上書きが効く唯一の場所です。**
     （例: カード面を白にしたい → override.css に `:root{ --dyn-surface:#fff; }`）

   ■ なぜ編集してはいけないか
     本ファイルを案件で書き換えた瞬間、その案件の skin は共通資産から切り離されます。
     以後、共通側で直した修正（カード高さの不揃い／サイドバーの可読性／
     フォーム送信ボタンの崩れ 等）が **その案件には二度と届きません**。
     実際に S01189 で本ファイルの §0 が案件調整で書き換えられ、共通修正が届かなくなりました。
     「毎案件おなじ崩れを直している」の原因はこれです。

   ■ 共通で直すべき崩れを見つけたら
     案件で握り込まず、正本 `skin/cuezilla-skin.css` へ還流してください（全案件に効きます）。
     還流し忘れると、次の同期でその修正は消えます。

   詳細は R-30（70_運用ルール/運用ルール集.md）。
   ============================================================ */

/* ============================================================
   CueZilla 動的パーツ スキンキット v1.0
   ------------------------------------------------------------
   目的: ブログ/施工実績(blog-ex)/お問い合わせ/パンくず/ページヘッダー等の
         CueZilla 既定パーツを、サイトのトンマナ（ダーク/ライト・ブランド色・
         フォント・角丸）に "自動で寄せる" 汎用CSS。案件ごとの調整を最小化する。

   思想:
     (1) 色は CueZilla テーマ変数(--main-color 等)から自動連動
         → サイトのテーマ設定がそのまま skin にも効く（色は一元管理）
     (2) フォント/角丸/グリッド幅はトークンで指定（テーマ変数に無いため）
     (3) partsNNN は採番が可変だが接尾辞は共通(_post_wrap 等)
         → 属性セレクタ [class*="_xxx"] で番号非依存に当てる（単一属性セレクタまで。積んで詳細度を稼がない）

   ★適用範囲と安全契約（重要・memory: cuezilla-css-safety-contract）:
     ・本skinは「CueZilla既定の動的パーツ」だけを寄せる。サイトのフリーコーディング設計には当てない
       （生成サイトCSSは変数非依存＋具体値＋自作接頭辞クラスで組む＝構造的に非衝突・skinと干渉しない）。
     ・[class*=…]を積んで詳細度を同点/超過させる手法は禁止（脆い・過剰マッチ・アーマーレース）。
       単一の番号非依存セレクタ＋!important1個で当てる（theme_defaultは非importantなので確定勝ち）。
     ・!important可は「レイヤーで越えられない相手」＝theme_default／body内インライン／BSユーティリティ／
       .partsNNN_blog_<ID>(0,3,0) のみ。後者(0,3,0)+!importantには詳細度で負けるため、
       負けた時だけ §14 の手順で実採番(0,3,1)を【案件CSS】に足して勝つ（汎用skinには番号を書かない）。
     ・変数の注意：実機は body内コンポ<style>の:rootが7色(--main-color等)を撒きうる（490件中16件）。
       →§0の--dyn-*はその頁で乗っ取られ得る。動的パーツの色合わせには許容だが、サイト設計の主機構にしない。

   使い方:
     1. §0 のトークンを案件に合わせて調整（ダーク/ライトはプリセットをコピー）
     2. CueZilla テーマカラー(--main-color 等)をブランド値に設定
     3. 本ファイルをサイト全体CSS(AddCssInfo)へ貼る（サイト固有のフリーコーディングCSSの後ろ）
   ============================================================ */


/* ============================================================
   §0  トークン ─ ここだけ案件ごとに調整
   ============================================================ */
:root{
  /* --- 色: CueZilla テーマ変数から自動取得（無い場合のフォールバック付き） ---
     ※これらは【動的パーツの色合わせ用】。生成サイトCSSはこの変数に依存せず具体値で書く（安全契約）。
       実機では body内コンポ<style>の:rootが --main-color 等を頁単位で上書きしうる＝--dyn-*も追従する。 */
  --dyn-bg:        var(--background-color, #ffffff);   /* ページ/セクション背景 */
  --dyn-surface:   var(--temporary-color, #f4f4f2);    /* カード/パネル/入力欄の面 */
  --dyn-text:      var(--text-color, #222222);         /* 本文 */
  --dyn-heading:   var(--text-color, #111111);         /* 見出し */
  --dyn-muted:     var(--sub-color, #8a8a8a);          /* 補助/日付 */
  --dyn-border:    var(--sub-color, #dddddd);          /* 罫線/枠 */
  --dyn-accent:    var(--main-color, #1e3a5f);         /* アクセント（ボタン/チップ/見出しバー） */
  --dyn-accent-2:  var(--link-color, var(--main-color, #1e3a5f)); /* リンク/ホバー */
  --dyn-on-accent: #ffffff;                             /* アクセント面の上の文字 */

  /* --- フォント（site.css の :root に定義があればそれを使用） --- */
  --dyn-font-display: var(--font-display, "Noto Serif JP","Yu Mincho",serif);
  --dyn-font-body:    var(--font-body, "Noto Sans JP","Yu Gothic",sans-serif);
  --dyn-font-numeric: var(--font-numeric, "EB Garamond","Noto Serif JP",serif);

  /* --- 角丸（チップ/ボタン/カード）。角なしにするなら 0 --- */
  --dyn-radius: 6px;
  /* --- 一覧カードの最小幅 / 段組ギャップ --- */
  --dyn-card-min: 300px;
  --dyn-gap: 32px;
}

/* === テーマ プリセット（使う方を §0 の後にコピペして上書き） =========
   【ダーク】
   :root{
     --dyn-bg:#0A0A0A; --dyn-surface:#111110; --dyn-text:#F4F1EC; --dyn-heading:#FAF7F1;
     --dyn-muted:#8C857A; --dyn-border:#3A352D; --dyn-accent:#8E3A22; --dyn-accent-2:#B0533A;
     --dyn-on-accent:#FAF7F1; --dyn-radius:0;
   }
   【ライト】
   :root{
     --dyn-bg:#ffffff; --dyn-surface:#f7f7f5; --dyn-text:#222222; --dyn-heading:#111111;
     --dyn-muted:#8a8a8a; --dyn-border:#e3e3e3; --dyn-accent:#1e3a5f; --dyn-accent-2:#1e3a5f;
     --dyn-on-accent:#ffffff; --dyn-radius:6px;
   }
   ※ CueZilla テーマ変数(--main-color 等)を設定する場合は §0 が自動連動するのでプリセット不要。
   ============================================================ */


/* ============================================================
   §1  パンくず（CueZilla parts###_breadcrumb / p-breadcrumb）
   実markup: div.parts###_breadcrumb.p-breadcrumb.c-breadcrumb
             > ul.p-breadcrumb__inner(BreadcrumbList) > li.p-breadcrumb__item(ListItem)
   CueZilla共通CSSにパンくず装飾は無い → skin側で横並び・区切り・配色を付与
   ============================================================ */
[class*="_breadcrumb"], .p-breadcrumb{ background:var(--dyn-bg) !important; }
.p-breadcrumb__inner{
  list-style:none; margin:0 auto; padding:14px 24px;
  max-width:1200px; display:flex; flex-wrap:wrap; align-items:center;
}
.p-breadcrumb__item{
  display:inline-flex; align-items:center;
  color:var(--dyn-muted) !important; font-family:var(--dyn-font-body);
  font-size:.78rem; letter-spacing:.04em;
}
.p-breadcrumb__item a{ color:var(--dyn-muted) !important; text-decoration:none; }
.p-breadcrumb__item a:hover{ color:var(--dyn-accent-2) !important; text-decoration:underline; }
.p-breadcrumb__item:last-child{ color:var(--dyn-text) !important; }   /* 現在地 */
/* 区切り（2件目以降の前に "›"） */
.p-breadcrumb__item + .p-breadcrumb__item::before{
  content:"\203A"; margin:0 .6em; color:var(--dyn-border) !important; font-size:.95em;
}
.p-breadcrumb meta{ display:none; }   /* schema.org の <meta itemprop="position"> は非表示 */


/* ============================================================
   §2  ページヘッダー（[class*="_article_header"]）画像上のタイトル
   ============================================================ */
[class*="_article_header"] .ja, [class*="_article_header"] h1, [class*="_article_header"] h2{
  color:var(--dyn-heading) !important; font-family:var(--dyn-font-display) !important;
  text-shadow:0 2px 14px rgba(0,0,0,.5) !important;
}
[class*="_article_header"] .en{ color:var(--dyn-muted) !important; font-family:var(--dyn-font-numeric) !important; letter-spacing:.1em; text-shadow:0 1px 10px rgba(0,0,0,.5) !important; }


/* ============================================================
   §3  ページネーション（2系統。テーマCSSの持ち方が違うので扱いを分ける＝崩れ防止）
   ・.pagination_*（enjoyworks系）            … テーマが素 → 体裁＋色を一式付与
   ・[class*="_pagenation"]（parts222/225/228系）… テーマが体裁を持つ（flex/padding/border/白黒ハードコード）
        → レイアウト・サイズはテーマに任せ、ハードコードの白黒(#000/#fff)だけブランド色へ置換（最小限）。
          a/.current 以外（余白用の素の <span>）には触らない＝二重ボックス化を防ぐ。
          --dyn-accent は §0 で var(--main-color) にバインド済み＝サイトのCMS色に自動一致（案件側の手当て不要）。
   ============================================================ */
/* (A) pagination_* 系：テーマ装飾が無いので一式付与 */
.pagination_num, .pagination_prev, .pagination_next{
  font-family:var(--dyn-font-numeric); color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.pagination_num.current{ background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.pagination_num:hover, .pagination_prev:hover, .pagination_next:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }

/* (B) _pagenation 系：色だけ寄せる（ジオメトリはテーマのまま＝箱を再定義しない） */
[class*="_pagenation"] a{ border-color:var(--dyn-accent) !important; color:var(--dyn-text) !important; }
[class*="_pagenation"] span.current, [class*="_pagenation"] .current, [class*="_pagenation"] .active{
  background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
[class*="_pagenation"] a:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }
.pe-none{ opacity:.3; pointer-events:none; }


/* ============================================================
   §4  ブログ / 施工実績(blog-ex) 一覧（番号非依存）
   ============================================================ */
/* 一覧セクションの地 */
[class*="_post_list"], [class*="_post_wrap"]{ } /* 下で個別指定 */
/* カード並び（最小幅を確保して細くなりすぎない） */
[class*="_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; }
/* カード */
[class*="_post_wrap"]{
  /* カード等寸化：中身を縦に積み、内側の <a>/本文枠を flex で伸長させて高さを揃える（S01189還流） */
  display:flex !important; flex-direction:column;
  margin:0 !important;   /* theme_default の margin-bottom(55px等)残存で最終行カードだけ高さ不揃いになるのを打ち消す */
  width:auto !important; max-width:none !important; text-decoration:none;
  background:var(--dyn-surface) !important; border:1px solid var(--dyn-border) !important;
  border-radius:var(--dyn-radius); overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
[class*="_post_wrap"]:hover{ transform:translateY(-4px); border-color:var(--dyn-accent-2) !important; }
[class*="_post_wrap"] > a{ display:flex; flex-direction:column; flex:1 1 auto; color:inherit; }  /* カード全体ラップ<a>を縦伸長（内容を上下に満たす） */
/* サムネ等寸化：グリッド列の幅から高さを算出（幅制約下＝§6.5の aspect-ratio×height 併用の罠には該当しない） */
[class*="_post_img"]{ width:100%; display:block; border-radius:0; aspect-ratio:16/10; overflow:hidden; }
[class*="_post_img"] img{ width:100%; height:100%; object-fit:cover; display:block; }
/* カード内のテキストに左右余白 */
[class*="_post_status"]{ border:none !important; background:transparent !important; margin:14px 16px 0 !important; padding:0 !important; display:flex !important; flex-wrap:wrap; justify-content:flex-start !important; gap:10px; align-items:center; }
[class*="_post_status"]:has([class*="_title-excerpt"]){ display:block !important; }   /* parts228系「日付｜タイトル」の横並びを解除（:has非対応環境ではflex-wrapで折返し） */
[class*="_post_title-excerpt"]{ padding:10px 16px 16px !important; flex:1 1 auto; }   /* 本文枠を伸長＝カード等寸化の要 */
[class*="_post_status"]:has([class*="_title-excerpt"]) [class*="_title-excerpt"]{ padding:10px 0 16px !important; }   /* 施工実績は左端揃え */
[class*="_post_title"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; font-weight:700 !important; line-height:1.5; }
[class*="_post_excerpt"]{ color:var(--dyn-muted) !important; }
[class*="_post_date"]{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* カテゴリ/ステータスは1チップに。
   テーマは既に _post_category に border:1px solid var(--main-color) を持つ＝枠を“足す”と2重になるので
   同一要素に !important で単一の枠を確定（色は --dyn-accent=var(--main-color) で一致）。幅は % 制約を解除し content 幅に。 */
[class*="_post_category"]:not([class*="_sidebar"]), [class*="_post_status"] > span:last-child{
  /* :not(_sidebar) ＝ この§4チップ装飾が §5 の _sidebar_post_category_count へ漏れ二重適用されるのを防ぐ（S01189還流） */
  width:auto; max-width:none !important;
  background:var(--dyn-bg) !important; border:1px solid var(--dyn-accent) !important;
  border-radius:var(--dyn-radius); padding:2px 8px; color:var(--dyn-accent) !important;
}
.parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; }
.parts-blog-ex_tag{ font-size:.72rem; color:var(--dyn-muted) !important; background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:2px 8px; }

/* --- 一覧パーツ固有の崩れ2点（実共有CSS=theme parts222/225/228 を突き合わせて確定）---
   (a) 自動セクション見出し（「ブログ」「施工実績」等）の撤去：
       テーマは `.parts222_section h2 / .parts228_section h2` に
       color:var(--main-color)/font-size:35px/text-align:center を付与し、
       一覧上部に大見出しを自動描画する。自前の下層ヘッダー(hero)と二重化＝崩れ。
       → 一覧パーツ(_post_list を含む _section)直下の素の h2 だけ隠す。
         残したいサイトは案件CSSで個別に復帰。`:has()` 非対応保険に f_meiryo 版も併記。 */
[class*="_section"]:has([class*="_post_list"]) > h2,
[class*="_section"] > h2.f_meiryo{ display:none !important; }
/* (b) flex前提の余白スペーサー ::after の無効化：
       テーマは `.parts228_post_list::after{content:"";width:32.465%}` で flex の最終行詰めをする。
       §4 で _post_list を grid 化すると、この ::after が「空のゴースト列」になり最終行が片寄る。
       → grid では不要なので除去（content:none で擬似要素自体を消す）。 */
[class*="_post_list"]::after{ content:none !important; display:none !important; }


/* ============================================================
   §5  サイドバー / 最近の投稿 / カテゴリ記事数
   ============================================================ */
[class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); }
/* サイドバー見出し（「最近の投稿」「カテゴリ」）の可読性を確保。
   theme_default は `.partsNNN_sidebar h3{ background-color:var(--main-color); color:#fff }` と
   色を直当てするが、§12 の見出しリセットが**背景だけ**を transparent にするため、
   ライト基調の案件では「白地に白文字」で消える（ダーク案件では地に映えるため露見しない）。
   背景は戻さず（skinのフラット化方針を維持）、文字色だけトークンへ寄せて両基調で可読にする。
   あわせて左右パディングも解除する：`padding:15px 20px` は**帯があった前提**の内側余白のため、
   帯を透明化したまま残すと「見出しだけ20px字下げ」になり、直下の日付／タイトルと文頭がズレる。
   （詳細ページ側の .recent_post_title には下で同じ手当てをしており、一覧側だけ取り残されていた） */
[class*="_sidebar"] h3{ color:var(--dyn-heading) !important; padding-left:0 !important; padding-right:0 !important; }
[class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
/* 「最近の投稿」見出し（詳細ページ側）の帯を外して一覧側と体裁を揃える。
   theme_default は `.recent_posts_wrap .recent_post_title{ background-color:var(--main-color); color:#fff }` で帯を敷くが、
   §12 の見出しリセットは (a) 包み(parts166_single_article / parts-blog-ex-single-wrap)が `_section` を含まない
   (b) 要素が <div>（h2/h3でない）── の2点で**届かず**、帯だけが生き残る。
   一方すぐ上の §5 が文字色を --dyn-heading（＝ライトでは濃色）へ寄せるため「濃い帯に濃い文字」となり、
   案件ごとに帯との視認性を見て文字色を手当てする必要があった。帯を外せば一覧（§12で帯が外れる）と揃い、手当ても不要になる。
   ※帯を活かしたい案件は案件側で `background:var(--dyn-accent); color:var(--dyn-on-accent)` を再指定する。 */
.recent_post_title{ background:transparent !important; padding-left:0 !important; }
[class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* 記事li の区切り罫線：theme_default が #666 をハードコードしており地に合わず過剰に見える → トークンへ */
[class*="_sidebar"] ul li, .recent_posts_wrap ul li{ border-bottom-color:var(--dyn-border) !important; }
/* カテゴリ右の記事数を視認できるチップに */
[class*="_sidebar_post_category_count"]{ background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:0 8px !important; }
/* カテゴリ一覧 li：theme_default 由来の左右縦罫線(1px solid #666)を除去（下罫線は区切りとして意図的に残す）。S01189還流 */
[class*="category_post_count"] li{ border-left:0 !important; border-right:0 !important; }
/* カテゴリ名と件数チップが重ならないよう両端寄せ。
   あわせて左右パディングを解除：theme_default は `.category_post_count ul li a{ padding:15px 20px }` と
   **帯／箱があった前提**の字下げを持つため、帯を外した状態では
   カテゴリ名だけが 20px 右にずれ、見出し(h3)や「最近の投稿」リストと頭が揃わない。
   上下15pxはタップ領域として残す。 */
[class*="category_post_count"] li a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding-left:0 !important; padding-right:0 !important; }


/* ============================================================
   §6  詳細ページ（本文 / 署名 / SNS / 詳細内スライダー）
   ============================================================ */
.parts-blog-ex_text{ font-family:var(--dyn-font-body); color:var(--dyn-text) !important; line-height:1.9; }
.parts-blog-ex_text h2, .parts-blog-ex_text h3{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
.signature_wrap{ font-family:var(--dyn-font-display); color:var(--dyn-muted) !important; border-top:1px solid var(--dyn-border); padding-top:16px; }
.slick-prev, .slick-next{ color:var(--dyn-accent-2) !important; }
/* ※詳細本文の親ラッパーが固定class薄め。崩れる場合は実ページで本文コンテナを確認し追補 */


/* ============================================================
   §7  お問い合わせフォーム
   ============================================================ */
.contact_section, [class*="_section_form"], [class*="_section_content"], [class*="_content_wrap"], [class*="_content"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
[class*="_form_wrap"]{ max-width:720px; margin:0 auto; }
[class*="_form_wrap"] label, [class*="_form_wrap"] dt, [class*="_form_wrap"] .ja, [class*="_form_wrap"] .en{ color:var(--dyn-text) !important; }
/* 入力欄を十分な大きさに（チェック/ラジオは除外） */
[class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]),
[class*="_form_wrap"] dd select{ width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important; min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
[class*="_form_wrap"] textarea, .form_textarea textarea{ width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
/* チェックボックス/ラジオはサイズ統一 */
[class*="_form_wrap"] input[type="checkbox"], [class*="_form_wrap"] input[type="radio"]{ width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important; vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important; }
/* 必須バッジ: 文字を中央・折り返さない・角丸はトークン */
.required{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.error{ color:var(--dyn-accent-2) !important; }
/* 「お問い合わせ内容」を囲む大きな箱(枠線)を撤去 */
.form_textarea, .form_text_dt{ border:none !important; background:transparent !important; }
/* 送信ボタン。★セレクタに包み(.contact_submit 自体)を含めないこと：
   包みは複数ボタンを載せるレイアウト用のdivで、ここを accent で塗ると
   (a) 完了ページ=藍の包みに藍のボタンが乗って同化し、ボタンが消えて見える
   (b) 確認ページ=すぐ下でアウトライン化する「戻る」が藍地に濃色文字となり判読不能（実測 1.01:1）
   になる。当てる先はボタン実体だけでよい（dynamic-form.md §1 の意図も「送信 .contact_submit input = accent地」）。 */
.contact_submit button, .contact_submit input{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; border:none !important; border-radius:var(--dyn-radius) !important; }
/* 確認ページの「戻る」は副ボタン（送信＝アクセント／戻る＝アウトライン）＝誤導線防止 */
.contact_submit input[name="back"]{ background:transparent !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; }
/* 送信前 disabled（reCAPTCHA未完了）の見え方 */
.contact_submit input[disabled]{ opacity:.5; cursor:not-allowed; }

/* --- フォーム実コードで頻出するが §7本体に無かった部品（parts213等の実装を突き合わせ）--- */
/* ファイル添付の自作UI：受領インライン<style>が #eee 地・#999 文字・明るいグラデで固定し、
   ダーク地で白い箱・低コントラストになる。トークンで地・枠・文字を寄せる（label_file_upload に限定）。 */
.label_file_upload{ display:block; width:100%; padding:12px 14px; cursor:pointer;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
.label_file_upload button{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; pointer-events:none; }
.label_file_upload span, #file-chosen, [id$="filechosen"]{ color:var(--dyn-muted) !important; }
.des{ color:var(--dyn-muted) !important; }
/* 注意書き（文字数制限・ファイル名規則等の補助）：色未指定/未定義var(--red)で可読性がばらつくため muted で固定（AA確保色） */
.attention{ color:var(--dyn-muted) !important; }
/* 郵便番号は narrow に保つ：上の入力欄ルール `[class*="_form_wrap"] dd input:not([checkbox]):not([radio])`
   は (0,3,2)+!important で .zip も全幅化し〒[郵便番号][住所]を壊す。これに勝つよう :not() を重ねて
   詳細度を (0,4,2) に上げて .zip だけ幅を戻す（parts219等 form_address系・番号非依存）。 */
[class*="_form_wrap"] dd input.zip:not([type="checkbox"]):not([type="radio"]){ width:9em !important; max-width:9em !important; display:inline-block; margin-right:8px; }
/* プライバシー同意 */
.privacypolicy{ background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:16px; color:var(--dyn-muted) !important; }
.privacypolicy-link{ color:var(--dyn-accent-2) !important; }
/* 電話/メール等の content バー（角丸はトークン） */
[class*="_content"] [class*="btn"], [class*="_content"] a[class*="round"]{ border-radius:var(--dyn-radius) !important; }


/* ============================================================
   §7b  お問い合わせフォーム ─ wpcf7 / .formBox 系（第2系統）
   ------------------------------------------------------------
   【重要】フォームには構造が2系統ある（dynamic-harvest.js の「フォーム系統」で判定）：
     ・§7  = parts_form/dl 系（[class*="_form_wrap"] / dt / dd / .required / .contact_submit）
     ・§7b = wpcf7/.formBox 系（.formWrap > .formBox > dt>label>span.req + dd>input,
              送信=input.wpcf7-submit。SEIKEN/協力会社フォーム等 Contact Form 7 由来）
   §7 の `[class*="_form_wrap"]` は §7b 構造に当たらないため、当該系統では本セクションが要る。
   いずれも番号非依存のセマンティッククラスで記述。
   ============================================================ */
.formWrapbg, .formWrap, .form, [class*="formSec"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.formWrap{ max-width:720px; margin:0 auto; }
.formBox{ margin-bottom:20px; }
.formBox dt, .formBox label{ color:var(--dyn-text) !important; }
.formBox dd input:not([type="checkbox"]):not([type="radio"]),
.formBox dd select,
.formWrap input[type="text"], .formWrap input[type="email"], .formWrap input[type="tel"]{
  width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important;
  min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formBox dd textarea, .formWrap textarea{
  width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formWrap input[type="checkbox"], .formWrap input[type="radio"]{
  width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important;
  vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important;
}
/* 必須バッジ（wpcf7系は .req） */
.req, .formBox .req{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important;
  white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important;
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
.wpcf7-not-valid-tip, .wpcf7-response-output{ color:var(--dyn-accent-2) !important; }
/* 送信（Contact Form 7） */
input.wpcf7-submit, .formWrap button[type="submit"]{
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
  border:none !important; border-radius:var(--dyn-radius) !important;
  min-height:54px !important; padding:14px 28px !important; font-size:16px !important; cursor:pointer;
}
/* プライバシー同意（両系統共通の .privacypolicy* は §7 で適用済） */


/* ============================================================
   §14  自動CSSに負けた時の手順（R-27）※汎用アーマーは持たない＝安全契約
   ------------------------------------------------------------
   CueZilla は body内コンポ<style>でパーツ単位に `.partsNNN_blog_<ID> .card .card-body{…!important}`
   等の高詳細度(0,3,0)+!important を吐く。§1〜§9 の単一属性セレクタ(0,1,0〜0,2,0)+!important は
   同プロパティで【負ける】（症状：当てているのに反映されない＝崩れの常連）。

   → 【禁止】[class*=…]を積んで(0,3,0)に並べる汎用アーマー（脆い・過剰マッチ・アーマーレース）。
        ＝以前ここにあった `[class*="parts"][class*="_blog"] .card` 等は本契約により撤去した。
        （theme_default 非importantへの色寄せは §8 の単一 `[class*="_blog"] .card`(0,2,0)+!important で足りる）
   → 【正】負けたパーツだけ、harvestで実採番を取り【案件CSS】末尾に (0,3,1) を1個足して確実に勝つ：
        section.parts131415_blog_xxxx .card .card-body{ … !important }   ← 実採番。構造変化に不感
     ※ skin は全案件共通なので案件固有の番号は書かない（負けた時だけ案件側で対処）。
     ※ 採番取得＝verify/dynamic-harvest.js。当て方＝50_CSS・動的ページ/動的ページCSS_実セレクタ参考.md §14。 */
/* 見出しのテーマ装飾(角丸/中央寄せ/背景/罫線)残りをパーツ内でリセット（R-21）。
   theme_default は非importantなので、単一 [class*="_section"] + !important で確定勝ち（[class*]を積まない）。 */
[class*="_section"] h2, [class*="_section"] h3{
  border-radius:0 !important; background:transparent !important; border:none !important; text-align:inherit !important;
}


/* ============================================================
   §8  トップ用 お知らせ/ブログ teaser（notice-news / blog teaser）
   ============================================================ */
.parts040506_notice-news{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.parts040506_notice-news *{ color:var(--dyn-text) !important; }
.parts040506_notice-news .title, .parts040506_notice-news .title a{ color:var(--dyn-heading) !important; }
.parts040506_notice-news [class*="date"], .parts040506_notice-news .f_yugothic{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
.parts040506_notice-news .more{ white-space:nowrap !important; color:var(--dyn-accent-2) !important; }
.parts040506_notice-news a{ color:var(--dyn-accent-2) !important; }
/* サムネ型ブログ teaser */
[class*="_blog_title_wrap"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_blog_thumbnail"]{ border-radius:var(--dyn-radius); }
/* teaser内が Bootstrap .card（既定で白）の場合のダーク/トーン化 */
[class*="_blog"] .card{ background:var(--dyn-surface) !important; border-color:var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; }
[class*="_blog"] .card-title, [class*="_blog"] .card-text{ color:var(--dyn-text) !important; }
[class*="_blog"] .card-title{ font-family:var(--dyn-font-display) !important; }


/* ============================================================
   §9  Bootstrap汎用クラスの地ならし（パーツ内に限定）
       text-dark / bg-light 等がパーツ内でトーンを乱すのを抑える
   ============================================================ */
[class*="parts"] .text-dark{ color:var(--dyn-text) !important; }
[class*="parts"] .bg-light{ background:var(--dyn-surface) !important; }
.card-header.bg-light{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }


/* ============================================================
   §10  プライバシーポリシー（templates/privacy-policy.html のフリーコーディング設置版）
   ※CueZilla既定パーツ(item_title/item_description)へ転記する場合は §5 等で別途適用される
   ============================================================ */
.privacy{ max-width:880px; margin:0 auto; padding:64px 24px; color:var(--dyn-text); font-family:var(--dyn-font-body); line-height:1.9; }
.privacy__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,4vw,2.6rem); }
.privacy__subtitle{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:1.2rem; margin-top:8px; }
.privacy__lead{ color:var(--dyn-muted); margin:24px 0 40px; }
.privacy-item{ margin-bottom:32px; }
.privacy-item__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); border-left:3px solid var(--dyn-accent); padding-left:12px; margin-bottom:12px; }
.privacy-item__body{ color:var(--dyn-text); }
/* 原文の (1)(2)… 表記を維持（auto ol の "1." ではなく括弧付き番号で表示） */
.privacy-item__list{ list-style:none; counter-reset:pp; margin:8px 0; padding:0; }
.privacy-item__list li{ counter-increment:pp; padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); }
.privacy-item__list li::before{ content:"(" counter(pp) ") "; }


/* ============================================================
   §11  下層ヘッダーパーツ（templates/subpage-header.html）
   サイトヘッダーとパンくずの間。フリーコーディングで別パーツ化
   ============================================================ */
/* padding-top に固定ヘッダー高さ(--fixed-header-h)を加算＝固定ヘッダーへのめり込み防止。
   固定ヘッダーが無いサイトは既定0で無影響。固定ヘッダー採用サイトは案件CSSで :root{ --fixed-header-h:88px } 等を設定（R-18）。 */
.subpage-header{ position:relative; padding:calc(72px + var(--fixed-header-h, 0px)) 24px 72px; background:var(--dyn-surface); text-align:center; overflow:hidden; }
.subpage-header__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; z-index:0; }
.subpage-header__inner{ position:relative; z-index:1; }
.subpage-header__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,3rem); line-height:1.3; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.subpage-header__en{ font-family:var(--dyn-font-numeric); color:var(--dyn-muted); letter-spacing:.12em; margin-top:8px; }


/* ============================================================
   §12  システム定型ページ：送信完了(thanks) / 404
   templates/thanks.html, templates/404.html 用。トークンスキン準拠
   ============================================================ */
.thanks, .notfound{ max-width:760px; margin:0 auto; padding:calc(80px + var(--fixed-header-h, 0px)) 24px 96px; text-align:center; }
/* CueZilla 既定404（section.not-found）はレイアウトを変えず、固定ヘッダー分の上余白だけ確保（R-18） */
.not-found{ padding-top: calc(var(--fixed-header-h, 0px) + 24px); }
.thanks__title, .notfound__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.3; margin-bottom:28px; }
.thanks__lead, .notfound__lead{ color:var(--dyn-text); line-height:2; margin-bottom:40px; }
.thanks__action, .notfound__action{ margin-top:8px; }


/* ============================================================
   §13  Bootstrap(テーマ)既定の恒久打ち消し（R-20）
   ------------------------------------------------------------
   CueZillaテーマが読み込む Bootstrap の "素のタグ/汎用クラス" が
   フリーHTMLに当たって崩す症状を、案件ごとの手当て無しで地ならしする。
   ここは確認済みの実害2件（test0605）に限定して打ち消す。
   ※「色/余白/タイポ」を意図して変える装飾は接頭辞クラス(.xw- 等)で
     付け直す＝下記より高詳細度になり、本セクションに勝つ（壊さない）。
   ============================================================ */
/* (a) <mark> / .mark の黄ハイライト背景：ロゴや見出しが黄色い箱になる症状 → 無効化。
       意図的なマーカー装飾は専用クラスで（Bootstrap名 .mark を流用しない＝R-20）。 */
mark, .mark{
  background-color:transparent !important; color:inherit !important;
  padding:0 !important; border-radius:0 !important;
}
/* (b) a:hover が Bootstrap青(#0a58ca)になる症状 → 既定は「ホバーで色を変えない」。
       !important は付けない＝個別のホバー装飾(接頭辞クラスや site.css の指定)が
       そのまま勝ち、未指定リンクだけが青化を免れる（フォールバック）。 */
a:hover{ color:inherit; }

/* (c) 電話番号リンク(tel:)の最低タップ確保（R-24／§5.5-3）。
       本文中インラインでも折り返さない。CTA/ボタン用途は接頭辞クラスで44px確保。 */
a[href^="tel:"]{ white-space:nowrap; }


/* ===== 50_override.css ===== */
/* ============================================================
   O00922 株式会社TAKEDAGUMI — 追補/override CSS
   結合順は convert が prio=3（最後）で当てる。site.css・skin の後に読まれる。
   ============================================================ */

/* --- JS安全装置：BODY内JSが実行されない/失敗しても画面が固まらないための救済（cz-judgment §4.2） ---
   受領CSSは .reveal{opacity:0} と #splash{position:fixed;inset:0;z-index:9999} でJS前提の初期非表示を持つ。
   body-inline.js が起動時に html.js を付与する。JSが動かないと html に js が付かない＝下記が効いて全消え/白画面を回避。 */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
html:not(.js) #splash { display: none !important; }
.header-wrap h2.header,
.header-wrap p.subheader {
  position: static !important;
  width: auto !important;
  height: auto !important;
  z-index: auto !important;
  pointer-events: none !important;
}
.parts213_section_form,.parts219_section_form{
        background: var(--bg-alt)!important;
}
.parts213_section_form dl,.parts219_section_form dl{
        display: block!important;
}
.parts213_section_form dt,.parts219_section_form dt{
    display: block!important;
        max-width: 100%!important;
}
.gnav ul{
      margin-bottom: 0!important;
}
.recruit-mega:hover,.twodoor a:hover,.gnav a:hover{
        color: #fff!important;
}
.gnav .subnav a:hover{
    color: var(--ink) !important;
}
.header.scrolled .gnav a:hover{
        color: var(--ink)!important;
}
.parts222_sidebar_wrap{
        background: #fff!important;
    padding: 10px!important;
}
.parts222_sidebar_wrap h3{
        border-bottom: 2px solid var(--orange)!important;
}
.parts222_section{
        background-color: #f0ebe200!important;
}
.parts222_post_wrap .parts222_post_img img{
        object-fit: fill!important;
}
.parts222_post_wrap,.parts228_post_wrap{
        border-radius: 0!important;
    border: none !important;
}
.parts222_section{
        padding-top: 1px!important;
}
.parts228_section{
    background-color: #e7e0d3!important;
    padding-top: 1px!important;
}
.parts131415_blog_9gspxtuKZI.bg-color,.parts131415_blog_ZGD7zRu9Bc.bg-color{
        background-color: #f1ece300!important;
    padding-top: 1px!important;
    padding-bottom: 1px!important;
}
.recruit-branch .branch-ic{
        margin-right: auto!important;
    margin-left: auto!important;
}
.recruit-branch .branch-ic svg{
        display: inline!important;
}
/*  スマホ  */
@media screen and (max-width: 640px){
	.honest-pair{
	        display: block!important;
	}
.honest-card.is-good{
	     margin-bottom: 20px!important;
	}
}

.growth-note::before{content:"";width:6px;height:6px;background:var(--grad);}
.growth-map--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:780px){
  .growth-map,
  .growth-map--4{grid-template-columns:1fr;gap:clamp(20px,4vw,28px);}
  .growth-step{padding-top:0;padding-left:clamp(64px,16vw,84px);text-align:left;min-height:clamp(56px,14vw,76px);}
  .growth-step::before{top:0;left:clamp(26px,8vw,38px);width:3px;height:100%;}
  .growth-step:first-child::before{display:block;top:50%;height:50%;}
  .growth-step:last-child::before{height:50%;}
  .growth-node{top:50%;left:0;transform:translateY(-50%);}
  .growth-stage{margin-bottom:.35em;}
  .growth-step h4{margin-bottom:.35em;}
  .growth-note{margin-top:.5em;}
}