:root {
  /* --- 色：ブランド（ネイビー/グリーン）を残しつつ誌面色を追加 --- */
  --paper:      #F1E7D1;   /* クラフト生成りの基調 */
  --paper-2:    #E8DABB;   /* 一段深い紙色 */
  --card:       #FBF6EA;   /* カード/フレームの明るい紙 */
  --ink:        #232017;   /* 温かみのある黒に近い文字色 */
  --ink-soft:   #5C5544;
  --navy:       #14246B;   /* ブランドネイビー（維持） */
  --navy-deep:  #0E1A50;
  --green:      #2E6B39;   /* ブランドグリーン（誌面向けに親しみある森緑へ） */
  --green-deep: #1F4E29;
  --olive:      #7C7E45;   /* セージオリーブ（誌面のベタ塗り帯） */
  --orange:     #E0552E;   /* バーミリオン（差し色） */
  --orange-deep:#BE3F1E;
  --line:       #D8C9A8;   /* 紙に馴染む罫線 */

  /* --- 書体（丸み・ポップ） --- */
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif; /* 見出し（FVと同じ角ゴ） */
  --font-round:   "Big Shoulders Display", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif; /* 数字・英字・バッジ（角ばったディスプレイ体） */
  --font-body:    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif; /* 本文 */
  --font-en:      "Quicksand", "Zen Kaku Gothic New", sans-serif; /* 細め幾何学サン（FV・キッカー） */
  --font-serif:   "Zen Old Mincho", "Hiragino Mincho ProN", serif; /* エディトリアルな細明朝 */
  --font-ui:      "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif; /* 洗練ゴシック（ヘッダー・バナー） */
  --font-headline:"Big Shoulders Display", "Zen Kaku Gothic New", sans-serif; /* 太字で特徴的なゴシック（FVキャッチ） */

  --header-h: 56px;
  --container-w: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 1.95;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
  word-break: normal;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-deep); }

/* 改行制御（共通ルール） */
span.line-chunk {
  display: inline-block;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* フォーカスインジケータ */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* スキップリンク */
.skip-link {
  position: absolute;
  left: 8px; top: 8px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 999px;
  transform: translateY(calc(-100% - 16px));
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* --- 共通レイアウト --- */
.container {
  width: min(100% - 36px, var(--container-w));
  margin-inline: auto;
}
.section { padding-block: clamp(64px, 10vw, 124px); }

/* セクションの紙地バリエーション */
.section--paper2 { background: var(--paper-2); }
.section--navy   { background: var(--navy);  color: #fff; }
.section--olive  { background: var(--olive); color: #fff; }
.section--green  { background: var(--green); color: #fff; }

/* ============================================================
   雑誌パーツ：見出しキッカー・バッジ・引用符・ボタン
   ============================================================ */

/* EN小見出し（字間広めキャップ）＋ JP */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--orange);
}
.kicker::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.section--navy .kicker,
.section--olive .kicker,
.section--green .kicker { color: #FFD9A0; }

/* セクション大見出し（FVと同じ角ゴシック） */
.sec-title {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(30px, 4.8vw, 56px);
  line-height: 1.2;
  letter-spacing: .03em;
  color: var(--ink);
  text-wrap: balance;
}
.section--navy .sec-title,
.section--olive .sec-title,
.section--green .sec-title { color: #fff; }
.sec-title .mark { color: var(--orange); }
.section--navy .sec-title .mark,
.section--green .sec-title .mark { color: #FFC9A0; }

/* EN特大ワード（Big Shoulders Display 太） */
.bigen {
  font-family: var(--font-round);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: .92;
}

/* リード文 */
.lead { max-width: 40em; line-height: 2; }
.lead p { margin: 0 0 1.3em; }
.lead p:last-child { margin-bottom: 0; }

/* 星バーストのバッジ */
.starburst {
  display: inline-grid;
  place-items: center;
  width: clamp(86px, 12vw, 116px);
  aspect-ratio: 1;
  background: var(--orange);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  /* 22ポイントのギザギザ */
  clip-path: polygon(
    50% 0%, 60% 8%, 72% 3%, 76% 16%, 90% 16%, 87% 29%, 99% 35%,
    90% 45%, 100% 55%, 88% 61%, 95% 73%, 81% 73%, 81% 87%, 69% 81%,
    62% 93%, 52% 84%, 42% 95%, 35% 82%, 22% 88%, 23% 74%, 9% 73%,
    16% 61%, 4% 54%, 14% 45%, 3% 36%, 16% 30%, 12% 17%, 26% 17%,
    29% 4%, 41% 9%
  );
}
.starburst span {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.25;
  letter-spacing: .04em;
}
.starburst .en {
  display: block;
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .85;
}

/* 丸タブ（カテゴリ等） */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  line-height: 1.4;
}
.pill--navy  { background: var(--navy);  color: #fff; }
.pill--green { background: var(--green); color: #fff; }
.pill--orange{ background: var(--orange);color: #fff; }
.pill--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }

/* ボタン（丸み・ポップ） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 32px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  text-decoration: none;
  border: 3px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .18s, background-color .2s, color .2s, border-color .2s;
}
.btn .arrow { font-family: var(--font-round); font-weight: 900; }
.btn:hover { transform: translateY(-2px); }
.btn--orange { background: var(--orange); color: #fff; }
.btn--orange:hover { background: var(--orange-deep); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--ghost-white { background: transparent; color: #fff; border-color: #fff; }
.btn--ghost-white:hover { background: #fff; color: var(--navy); }

/* もっと見るリンク */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--ink);
  text-decoration: none;
}
.more-link .jp-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.more-link::after {
  content: "→";
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-round);
  transition: transform .2s;
}
.more-link:hover::after { transform: translateX(4px); }
.section--navy .more-link,
.section--green .more-link { color: #fff; }
.section--navy .more-link .jp-note,
.section--green .more-link .jp-note { color: #E5E0CC; }

/* 縦組みの帯（雑誌の背） */
.vrail {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .22em;
}

/* ============================================================
   ヘッダー（マストヘッド風・クラフト紙バー）
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  font-family: var(--font-body);
  transition: background-color .3s, box-shadow .3s;
}
.site-header.is-scrolled {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(35, 32, 23, .07);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(100% - 40px, 1320px);
  margin-inline: auto;
  padding: clamp(6px, 0.8vw, 8px) 0;
}
/* ロゴ：ボックスなし・文字のみ */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  text-decoration: none;
  color: var(--ink);
}
.site-logo img { width: 34px; height: auto; }
.site-logo .logo-name {
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
  text-shadow: none;
}

/* ハンバーガー：ボックスなし */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .bar {
  width: 26px; height: 2.5px; border-radius: 2px;
  background: var(--ink);
  box-shadow: none;
  transition: transform .25s, opacity .25s, background-color .3s;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* スクロール後（明るい地の上）：文字を濃色へ */
.site-header.is-scrolled .site-logo,
.site-header.is-scrolled .logo-name { color: var(--ink); text-shadow: none; }
.site-header.is-scrolled .nav-toggle .bar { background: var(--ink); box-shadow: none; }

/* モバイルのメニューパネル（開いた時） */
.global-nav {
  position: fixed;
  inset: 0;
  background: var(--paper);
  padding: calc(var(--header-h) + 28px) 22px 44px;
  overflow-y: auto;
  display: none;
  z-index: -1;
}
.global-nav.is-open { display: block; }
.global-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.global-nav a:not(.btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px dotted var(--line);
}
.global-nav a:not(.btn)::after { content: "→"; font-family: var(--font-round); color: var(--orange); }
.global-nav a:not(.btn):hover { color: var(--green); }
.global-nav .nav-cta {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.global-nav .nav-cta .btn { font-family: var(--font-ui); font-weight: 700; letter-spacing: .08em; }

@media (min-width: 992px) {
  .nav-toggle { display: none; }
  /* デスクトップ：ボックスなし・文字リンクのみ */
  .global-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    overflow: visible;
    background: transparent;
    z-index: auto;
  }
  .global-nav > ul {
    flex-direction: row;
    align-items: center;
    gap: clamp(8px, 2vw, 32px);
  }
  .global-nav a:not(.btn) {
    position: relative;
    min-height: 42px;
    padding: 6px 2px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .08em;
    border-bottom: 0;
    color: var(--ink);
    text-shadow: none;
  }
  .global-nav a:not(.btn)::after { display: none; }
  .global-nav a:not(.btn)::before {
    content: "";
    position: absolute; left: 2px; right: 2px; bottom: 0;
    height: 1.5px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform .22s;
  }
  .global-nav a:not(.btn):hover { background: transparent; color: var(--ink); }
  .global-nav a:not(.btn):hover::before { transform: scaleX(1); }
  .global-nav .nav-cta { margin: 0 0 0 clamp(12px, 2vw, 28px); }
  .global-nav .nav-cta .btn {
    min-height: 40px;
    padding: 9px 24px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .08em;
    background: var(--orange);
    color: #fff;
    border: 0;
    border-radius: 0;
    text-shadow: none;
  }
  .global-nav .nav-cta .btn:hover {
    background: var(--orange-deep);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
  }
  /* スクロール後：ナビ文字は濃色へ、CTAボタンはオレンジのまま */
  .site-header.is-scrolled .global-nav a:not(.btn) { color: var(--ink); text-shadow: none; }
  .site-header.is-scrolled .global-nav .nav-cta .btn { color: #fff; }
}

/* 右下固定の採用バナー */
.recruit-banner {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(16px, 4vh, 30px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: clamp(112px, 16vw, 150px);
  height: clamp(112px, 16vw, 150px);
  background: transparent;
  color: #fff;
  text-decoration: none;
  text-align: center;
  isolation: isolate;
  transition: transform .2s, filter .2s;
}
.recruit-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--orange);
  clip-path: polygon(50.0% 0.0%, 55.0% 5.8%, 61.1% 1.3%, 64.7% 8.0%, 71.7% 5.0%, 73.7% 12.3%, 81.2% 10.9%, 81.5% 18.5%, 89.1% 18.8%, 87.7% 26.3%, 95.0% 28.3%, 92.0% 35.3%, 98.7% 38.9%, 94.2% 45.0%, 100.0% 50.0%, 94.2% 55.0%, 98.7% 61.1%, 92.0% 64.7%, 95.0% 71.7%, 87.7% 73.7%, 89.1% 81.2%, 81.5% 81.5%, 81.2% 89.1%, 73.7% 87.7%, 71.7% 95.0%, 64.7% 92.0%, 61.1% 98.7%, 55.0% 94.2%, 50.0% 100.0%, 45.0% 94.2%, 38.9% 98.7%, 35.3% 92.0%, 28.3% 95.0%, 26.3% 87.7%, 18.8% 89.1%, 18.5% 81.5%, 10.9% 81.2%, 12.3% 73.7%, 5.0% 71.7%, 8.0% 64.7%, 1.3% 61.1%, 5.8% 55.0%, 0.0% 50.0%, 5.8% 45.0%, 1.3% 38.9%, 8.0% 35.3%, 5.0% 28.3%, 12.3% 26.3%, 10.9% 18.8%, 18.5% 18.5%, 18.8% 10.9%, 26.3% 12.3%, 28.3% 5.0%, 35.3% 8.0%, 38.9% 1.3%, 45.0% 5.8%);
  filter: drop-shadow(0 10px 16px rgba(35, 32, 23, .3));
  transition: background-color .2s;
}
@keyframes recruit-seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .recruit-banner::before { animation: recruit-seal-spin 22s linear infinite; }
}
.recruit-banner > * { position: relative; z-index: 1; }
.recruit-banner:hover { transform: translateY(-3px) scale(1.03); }
.recruit-banner:hover::before { background: var(--orange-deep); }
.recruit-banner__en {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  opacity: .85;
  white-space: nowrap;
}
.recruit-banner__text {
  font-family: var(--font-ui);
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
.recruit-banner__arrow {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}

/* ============================================================
   FV ── 雑誌の表紙
   ============================================================ */
.cover {
  position: relative;
  min-height: 100svh;
  display: flex;
  --band-l: 34%;
  --band-r: 62%;
  background: var(--paper);
  padding: calc(var(--header-h) + 52px) clamp(18px, 4vw, 56px) clamp(30px, 5vw, 60px);
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--green);
  clip-path: polygon(0 var(--band-l, 34%), 100% var(--band-r, 62%), 100% 100%, 0 100%);
  animation: cover-band-reveal 1.15s cubic-bezier(.16,.84,.34,1) both;
}
@keyframes cover-band-reveal {
  from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 var(--band-l, 34%), 100% var(--band-r, 62%), 100% 100%, 0 100%); }
}
@keyframes cover-band-sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cover::before { animation: none; }
}

.cover__stage {
  width: min(100%, 1140px);
  margin: auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.6vw, 26px);
  color: var(--ink);
}

/* 上部中央：エディトリアルなキッカー（白ゴシック・写真に少し重ねる） */
/* 左上：エディトリアルな会社紹介ブロック（参考画像の左上のような左揃え） */
.cover__pre {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -92%);
  z-index: 5;
  text-align: center;
  white-space: nowrap;
  text-shadow: none;
}
.cover__pre-sm {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(10px, 1.3vw, 13px);
  letter-spacing: .3em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--green);
}
.cover__pre-lg {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--green) 70%, transparent);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 26px);
  letter-spacing: .1em;
  line-height: 1.2;
  color: #fff;
}
.cover__lead {
  position: absolute;
  top: clamp(16px, 6vw, 54px);
  left: clamp(-40px, -4vw, -14px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.cover__lead-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(10px, 1.2vw, 12px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.cover__lead-brand img { width: 26px; height: auto; }
.cover__lead-tx {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(14px, 2.1vw, 20px);
  line-height: 1.45;
  letter-spacing: .08em;
}
.cover__lead-tx span {
  background: #fff;
  color: var(--green-deep);
  padding: 5px 13px;
  box-shadow: 0 6px 18px rgba(20,36,24,.2);
}
.cover__lead-tx .ttl { font-size: 1.12em; }

/* 歩く作業員のシール（ダイカット風・緑帯の上） */
.cover__mascot {
  position: absolute;
  left: clamp(6px, 3vw, 60px);
  bottom: clamp(4px, 1.6vw, 22px);
  z-index: 4;
  width: clamp(92px, 12.5vw, 184px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 20px rgba(20, 36, 24, .32));
}

/* 両サイドの縦組みテキスト（背表紙ラベル風・ワイド画面のみ） */
.cover__rail {
  position: absolute;
  bottom: clamp(40px, 8vh, 80px);
  z-index: 5;
  display: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.cover__rail::before {
  content: "";
  display: block;
  width: 2px;
  height: 30px;
  margin: 0 auto 16px;
  background: var(--orange);
}
.cover__rail--l {
  bottom: clamp(20px, 6%, 48px);
  left: clamp(-34px, -2.4vw, -16px);
}
.cover__rail--r {
  right: clamp(-34px, -2.4vw, -16px);
  bottom: auto;
  top: clamp(20px, 6%, 48px);
  color: var(--green);
}
@media (min-width: 1180px) {
  .cover__rail { display: block; }
}

/* 中央の写真フレーム（背景色の上に配置） */
.cover__hero {
  position: relative;
  width: 100%;
}
.cover__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  border-radius: 6px 48px 6px 48px;
  box-shadow: 0 30px 64px rgba(20,36,24,.24);
}
.cover__slides { position: absolute; inset: 0; }
.cover__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  opacity: 0;
}
.cover__slide--1 { opacity: 1; }
@keyframes cover-slide-fade {
  0%, 28% { opacity: 1; }
  35%, 94% { opacity: 0; }
  100% { opacity: 1; }
}
/* ケン・バーンズ：写真全体をゆっくりズーム＋パン（常に動き続ける） */
@keyframes cover-kenburns {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.6%, -1.1%, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .cover__slide { animation: cover-slide-fade 18s ease-in-out infinite; }
  .cover__slide--2 { animation-delay: -12s; }
  .cover__slide--3 { animation-delay: -6s; }
  .cover__slides {
    transform-origin: 52% 44%;
    animation: cover-kenburns 26s ease-in-out infinite alternate;
  }
}
.cover__wash {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,18,11,.30) 0%, rgba(8,18,11,.06) 42%, rgba(8,18,11,.44) 100%),
    color-mix(in srgb, var(--green) 22%, transparent);
}

/* 写真に重ねる大見出し */
.cover__title {
  position: absolute; inset: 0; z-index: 2;
  margin: 0; padding: clamp(12px, 3vw, 40px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 1.4vw, 14px);
  color: #fff; text-align: center;
}
.cover__title-co {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(12px, 1.8vw, 18px);
  letter-spacing: .18em;
  margin-bottom: clamp(2px, 0.6vw, 6px);
  white-space: nowrap;
}
.cover__title-a {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(20px, 4.6vw, 56px);
  letter-spacing: .05em;
  line-height: 1.04;
  white-space: nowrap;
}
.cover__title-b {
  display: flex;
  justify-content: center;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(54px, 15vw, 178px);
  letter-spacing: .015em;
  line-height: .9;
}
.cover__title-b span { display: block; }
.cover__title-jp {
  margin-top: clamp(16px, 2.6vw, 28px);
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(20px, 4.2vw, 42px);
  letter-spacing: .12em;
  line-height: 1.5;
  color: #fff;
}
.cover__title-jp .mark { color: var(--orange); }

/* キャッチコピー（日本語・中央） */
.cover__slogan {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 4.6vw, 40px);
  letter-spacing: .08em;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}
.cover__slogan .mark { color: var(--orange); }

/* サービス情報（背景色の上・グリーン文字） */
.cover__facts {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 20px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(13px, 1.7vw, 16px);
  letter-spacing: .14em;
  color: #fff;
}
.cover__facts .yr {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: .2em;
  white-space: nowrap;
  color: #FFD9A0;
}

/* 最下部：字間広めキャプション（背景色の上・濃色） */
.cover__caption {
  margin: clamp(-14px, -1vw, -4px) auto 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(15px, 2.2vw, 20px);
  letter-spacing: .08em;
  line-height: 1.85;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}
/* キャプション下のまっすぐなライン */
.cover__caption::after {
  content: "";
  display: block;
  width: clamp(56px, 8vw, 88px);
  height: 3px;
  margin: clamp(12px, 1.6vw, 18px) auto 0;
  background: var(--orange);
}

/* ============================================================
   FV ── パーツの登場アニメーション（読み込み時に一度）
   prefers-reduced-motion: reduce では完成状態を静止表示。
   ============================================================ */
@keyframes cover-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cover-drop {
  from { opacity: 0; transform: translate(-50%, calc(-92% - 18px)); }
  to   { opacity: 1; transform: translate(-50%, -92%); }
}
@keyframes cover-slide-in {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cover-frame-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cover-letter-pop {
  0%   { opacity: 0; transform: translateY(34px) scale(.7); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cover-line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes cover-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes cover-letter-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes cover-title-sheen {
  0%        { background-position: 185% 50%; }
  45%, 100% { background-position: -55% 50%; }
}

@media (prefers-reduced-motion: no-preference) {
  .cover__frame   { animation: cover-frame-in 1s cubic-bezier(.16,.84,.34,1) .1s both; }
  .cover__title-a {
    background: linear-gradient(100deg, #fff 38%, #FFE3B8 50%, #fff 62%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation:
      cover-rise .8s cubic-bezier(.16,.84,.34,1) .55s both,
      cover-title-sheen 5s ease-in-out 1.6s infinite;
  }
  .cover__title-b span {
    display: block;
    animation:
      cover-letter-pop .62s cubic-bezier(.2,.9,.3,1.3) both,
      cover-letter-wave 2.8s ease-in-out infinite;
  }
  .cover__title-b span:nth-child(1) { animation-delay: .72s, 1.95s; }
  .cover__title-b span:nth-child(2) { animation-delay: .80s, 2.07s; }
  .cover__title-b span:nth-child(3) { animation-delay: .88s, 2.19s; }
  .cover__title-b span:nth-child(4) { animation-delay: .96s, 2.31s; }
  .cover__title-b span:nth-child(5) { animation-delay: 1.04s, 2.43s; }
  .cover__title-b span:nth-child(6) { animation-delay: 1.12s, 2.55s; }
  .cover__title-b span:nth-child(7) { animation-delay: 1.20s, 2.67s; }
  .cover__title-jp { animation: cover-rise .8s cubic-bezier(.16,.84,.34,1) 1.4s both; }
  .cover__pre     { animation: cover-drop .85s cubic-bezier(.16,.84,.34,1) .4s both; }
  .cover__lead    { animation: cover-slide-in .85s cubic-bezier(.16,.84,.34,1) .55s both; }
  .cover__facts   { animation: cover-rise .8s cubic-bezier(.16,.84,.34,1) 1.6s both; }
  .cover__caption { animation: cover-rise .8s cubic-bezier(.16,.84,.34,1) 1.75s both; }
  .cover__caption::after {
    transform-origin: center;
    animation: cover-line-grow .7s cubic-bezier(.16,.84,.34,1) 2.4s both;
  }
  .cover__rail { animation: cover-rise .9s cubic-bezier(.16,.84,.34,1) 1.5s both; }
  .cover__mascot {
    animation:
      cover-fade 1s ease 1.7s both,
      mascot-bob 3.4s ease-in-out 1.7s infinite;
  }
}

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (min-width: 880px) {
  .cover__frame { aspect-ratio: 12 / 5; }
  .cover__title-b { font-size: clamp(92px, 13.5vw, 198px); }
}

/* ============================================================
   MESSAGE ── 特大引用符のプルクオート特集
   ============================================================ */
.message {
  position: relative;
  background: var(--green);
  color: #fff;
  padding-block: clamp(18px, 2.6vw, 32px) clamp(34px, 5vw, 60px);
  padding-inline: 0;
  margin-top: -1px;
}
.message .eyebrow {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 4px 18px;
  border-radius: 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .22em;
}
.message .big-en {
  color: var(--paper);
  margin-top: 6px;
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  filter: url(#stamp-fade);
}
.message--center .container {
  width: min(100% - 36px, var(--container-w));
  max-width: none;
  margin-inline: auto;
  text-align: center;
  position: relative;
  padding: clamp(22px, 3.4vw, 44px) clamp(20px, 4vw, 56px) clamp(28px, 4vw, 52px);
  border: 5px solid var(--paper);
  border-radius: 0;
}

/* 上の小ラベル（両側に短いライン） */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .34em;
  color: var(--ink-soft);
}
.eyebrow::before,
.eyebrow::after {
  display: none;
}

/* 特大の英字見出し（FVと同じ Big Shoulders） */
.big-en {
  margin: 12px 0 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(34px, 6.5vw, 64px);
  letter-spacing: .05em;
  line-height: .96;
  color: var(--ink);
}

/* 全幅写真＋画像を跨ぐ英字キャッチ（直角・グラデなし） */
.message__figure {
  position: relative;
  margin: clamp(18px, 2.8vw, 32px) 0 clamp(58px, 8.5vw, 104px);
}
.message__figframe {
  position: relative;
  overflow: hidden;
}
.message__figframe img {
  display: block;
  width: 100%;
  height: clamp(200px, 34vw, 380px);
  object-fit: cover;
}
.message__script {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  transform: translateY(50%);
  z-index: 2;
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .5);
}
.message__script-sm {
  display: block;
  font-size: clamp(18px, 3vw, 34px);
  line-height: 1;
  letter-spacing: .06em;
}
.message__script-lg {
  display: block;
  font-size: clamp(48px, 11vw, 120px);
  line-height: .86;
}

/* キャッチ＋本文（中央寄せ） */
.message__catch {
  margin: clamp(18px, 2.8vw, 30px) 0 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(24px, 4.4vw, 44px);
  line-height: 1.5;
  letter-spacing: .02em;
  text-wrap: balance;
}
.message__catch .mark { color: #FFD9A0; }
.message__lead {
  margin: clamp(16px, 2.4vw, 22px) auto 0;
  max-width: 42em;
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 2;
}
.message__lead p { margin: 0 0 1.2em; }
.message__lead p:last-child { margin: 0; }

/* ============================================================
   HISTORY ── 年表特集（navy地）
   ============================================================ */
.history__grid { display: block; }
.history__head { margin: 0 0 clamp(10px, 1.4vw, 16px); }
/* 树2A：罫線マストヘッド（横罫の上にオレンジボックス・右にSINCE） */
.history__masthead {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 2px solid var(--ink);
  padding-top: 14px;
}
.history__masthead .kicker { margin-top: -15px; }
.history__since {
  margin-left: auto;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 15px);
  letter-spacing: .18em;
  color: var(--ink-soft);
}
/* 透かし語（案Bのみ表示） */
.history__ghost { display: none; }
/* ===== 案B：大型ステンシル透かし ===== */
.history--mast-b .history__head { position: relative; }
.history--mast-b .history__ghost {
  display: block;
  position: absolute;
  top: -26px;
  left: -4px;
  margin: 0;
  z-index: 0;
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(56px, 11vw, 104px);
  line-height: .8;
  letter-spacing: .02em;
  color: rgba(35, 32, 23, .10);
  pointer-events: none;
  user-select: none;
}
.history--mast-b .history__masthead {
  position: relative;
  z-index: 1;
  border-top: 0;
  padding-top: 0;
}
.history--mast-b .history__masthead .kicker { margin-top: 0; margin-bottom: 8px; }
.history--mast-b .history__since { display: none; }
.history--mast-b .sec-title { position: relative; z-index: 1; }
/* Historyの小見出しはMESSAGE見出し同様にオレンジのボックスで囲う */
.history__head .kicker,
.bizshow__head .kicker {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 4px 18px;
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 23px;
  letter-spacing: .1em;
}
.history__head .kicker::before,
.bizshow__head .kicker::before { display: none; }
/* タイトル（積み重ねてきた、歴史。） */
.history__head .sec-title {
  font-size: clamp(30px, 4.8vw, 56px);
  margin-top: 14px;
}
/* OUR BUSINESSの大見出しもHISTORYと同じサイズ感に揃える */
.business .sec-title { font-size: clamp(30px, 4.8vw, 56px); margin-top: 14px; }
/* ショーケースと地続きの一つのセクションに見せる（下余白を詰める） */
.business { padding-bottom: clamp(6px, 1.2vw, 14px); }
/* 導入からショーケースへの距離も詰める */
.bizshow { margin-top: -1px; }
/* 背景の英字透かし（案Bと同じ手法） */
.business__head { position: relative; }
.business__ghost {
  position: absolute;
  top: -26px;
  left: -4px;
  margin: 0;
  z-index: 0;
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(56px, 11vw, 104px);
  line-height: .8;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .13);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.business__head .kicker,
.business__head .sec-title { position: relative; z-index: 1; }
.business__head .kicker { margin-top: 0; }
.history__row { display: grid; gap: clamp(22px, 3.5vw, 44px); }
.history__media {
  position: relative;
  width: 100%;
  margin: 0;
}
.history__shot {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
/* 横長の1枚大画像（見出しの上・左寄せ） */
.history__shot--solo {
  box-shadow: 0 18px 40px rgba(35, 32, 23, .18);
}
.history__shot--solo .history__ph { height: auto; aspect-ratio: 16 / 9; }
.history__shot--solo img { aspect-ratio: 16 / 9; height: auto; }
.history__media img { display: block; width: 100%; object-fit: cover; }
.history__ph {
  display: grid;
  place-items: center;
  width: 100%;
  background: rgba(35, 32, 23, .05);
  border: 1px dashed rgba(35, 32, 23, .28);
}
.history__ph span {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: .28em;
  color: rgba(35, 32, 23, .42);
}
.history__shot--solo .history__ph,
.history__shot--front .history__ph { height: auto; aspect-ratio: 16 / 9; }
.history__year {
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(40px, 8vw, 72px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.history__year small { font-size: .42em; letter-spacing: .14em; }
.history__catch {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(19px, 2.6vw, 28px);
  line-height: 1.34;
  letter-spacing: .02em;
  text-wrap: pretty;
}
.history__catch .line-chunk { display: block; }
.history__body .lead { margin-top: clamp(16px, 2.2vw, 22px); max-width: 34em; }
.history__links { margin-top: clamp(22px, 3vw, 32px); }
.history__btn { letter-spacing: .04em; }
@media (min-width: 940px) {
  .history__row { grid-template-columns: 1.1fr 1fr; align-items: center; }
}

/* ============================================================
   OUR BUSINESS ── カタログ4枚（角丸クリッピング）
   ============================================================ */
.biz-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: clamp(34px, 5vw, 56px);
}
@media (min-width: 640px) { .biz-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px){ .biz-cards { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.biz-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.biz-card:hover,
.biz-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(35,32,23,.18);
}
.biz-card__media { position: relative; overflow: hidden; }
.biz-card__media image-slot,
.biz-card__media img {
  display: block;
  width: 100%;
  height: clamp(180px, 30vw, 220px);
  object-fit: cover;
}
.biz-card__no {
  position: absolute;
  top: 12px; left: 12px;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 15px;
}
.biz-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.biz-card__en {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
}
.biz-card__jp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 20px);
}
.biz-card__desc { font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.biz-card__arrow {
  margin-top: auto;
  align-self: flex-end;
  font-family: var(--font-round);
  font-weight: 900;
  color: var(--orange);
}
.business__foot { margin-top: clamp(34px, 5vw, 52px); display: flex; }

/* ============================================================
   OUR BUSINESS ── 事業ショーケース（green・ピン留めスクロール）
   ============================================================ */
.bizshow {
  position: relative;
  background: #E9E7E2;
  color: var(--ink);
  height: calc(100vh + var(--panels) * 64vh);
}
/* ── History → Our Business 斜め境界（独立ディバイダ：ピン留めと非干渉） ── */
.seam-diag {
  position: relative;
  height: clamp(64px, 8vw, 132px);
  background: #E9E7E2;          /* 下＝Business 側 */
  line-height: 0;
  margin: 0;
}
.seam-diag svg { display: block; width: 100%; height: 100%; }
.seam-diag .seam-fill { fill: var(--paper-2); }   /* 上＝History の紙色 */
.seam-diag .seam-line {
  stroke: var(--orange);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
/* 下側の境界：Our Business → Works（上と平行・同じ角度） */
.seam-diag--btm { background: #F1E7D1; }          /* 下＝Works の紙色 */
.seam-diag--btm .seam-fill { fill: #E9E7E2; }     /* 上＝Business の灰 */
.bizshow__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 見出し＋カード＋ドットのまとまりをピン内で上下中央に配置（ヘッダー下のクリアランス＋透過英字の上端マージンは padding で確保） */
  justify-content: center;
  padding: calc(var(--header-h) + clamp(28px, 5vh, 64px)) 0 clamp(28px, 5vh, 64px);
}
/* ピン留め中も常に見えるセクション見出し */
.bizshow__head {
  position: relative;
  z-index: 1;
  flex: none;
  /* 見出しと画像の間隔は History セクションと同等（同じ値）まで詰める */
  margin-bottom: clamp(10px, 1.4vw, 16px);
}
/* 見出し背後の英字透かし */
.bizshow__ghost {
  position: absolute;
  top: -26px;
  left: -4px;
  margin: 0;
  z-index: 0;
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(56px, 11vw, 104px);
  line-height: .8;
  letter-spacing: .02em;
  color: rgba(35, 32, 23, .10);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.bizshow__head .kicker,
.bizshow__head .sec-title { position: relative; z-index: 1; }
.bizshow__head .kicker { margin-top: 0; margin-bottom: 8px; }
.bizshow__head .sec-title {
  color: var(--ink);
  /* History セクションと同じ見出しサイズ・上マージンに統一 */
  font-size: clamp(30px, 4.8vw, 56px);
  margin-top: 14px;
}
.bizshow__head .sec-title .mark { color: var(--orange); }
/* フラットなライトグレー地（上のセクションと色差をつける） */
.bizshow__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #E9E7E2;
  z-index: 0;
}
.bizshow__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  flex: 0 1 auto;
  width: 100%;
  background: var(--card);
  /* シャープ角（面取りなし）――影はラッパー.bizshow__cardwrap::afterで背面に付与 */
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  position: relative;
  z-index: 1;
}
/* カードのラッパー：幅を担い、背面のハード影を載せる */
.bizshow__cardwrap {
  position: relative;
  flex: 0 1 auto;
  width: min(100% - 36px, var(--container-w));
}
/* ハード影：面取りしない墨色の長方形を右下にオフセット――右上のカットから影の塊がのぞく */
.bizshow__cardwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  background: var(--ink);
  z-index: 0;
}
/* カードは見出し直下に詰めて配置（まとまりの上下中央寄せはピン側の justify-content で行う） */
.bizshow__body {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  align-items: safe center;
  justify-content: center;
}

/* 左：カード内いっぱいの写真 */
.bizshow__media {
  position: relative;
  min-height: clamp(210px, 34vh, 300px);
}
.bizshow__envert {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.bizshow__en {
  position: absolute;
  left: clamp(10px, 1.4vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: .04em;
  opacity: 0;
  transition: opacity .6s ease;
  color: rgba(255,255,255,.9);
  text-shadow: 0 3px 18px rgba(0,0,0,.45);
  font-family: var(--font-headline);
  font-weight: 800;
  line-height: .82;
  letter-spacing: .04em;
}
.bizshow__en.is-active { opacity: 1; }
.bizshow__en b {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 800;
  font-size: clamp(26px, 5.4vh, 52px);
}
.bizshow__photos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.bizshow__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s ease, transform 1.1s ease;
}
.bizshow__photo.is-active { opacity: 1; transform: none; }

/* 右：番号＋事業名＋ボタン（左揃え） */
.bizshow__content { position: relative; text-align: left; padding: clamp(12px, 2vh, 32px) clamp(22px, 3.4vw, 46px); }
.bizshow__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--orange);
}
.bizshow__stack {
  position: relative;
  display: grid;
}
.bizshow__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,.84,.34,1);
  pointer-events: none;
}
.bizshow__slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.bizshow__no {
  margin: 0;
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(34px, 5.6vw, 78px);
  line-height: .92;
  letter-spacing: .03em;
  filter: url(#stamp-fade);
  color: var(--ink);
}
.bizshow__no i { color: var(--orange); font-style: normal; }
.bizshow__jp {
  margin: 2px 0 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 40px);
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--ink);
}
.bizshow__sub {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.5;
  color: var(--ink);
}
.bizshow__desc {
  margin: 5px 0 0;
  max-width: 30em;
  font-size: clamp(13px, 1.4vw, 14.5px);
  line-height: 1.65;
  color: var(--ink-soft);
}
.bizshow__btn { margin-top: clamp(12px, 1.8vw, 20px); min-height: 44px; }

/* 進行ドット */
.bizshow__dots {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  gap: 10px;
  justify-content: center;
  /* ハード影（14px）分を見込んだ上で、カードとドットの間隔を確保 */
  margin-top: clamp(30px, 3.6vh, 48px);
}
.bizshow__dot {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  color: rgba(35,32,23,.45);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  border-bottom: 2px solid rgba(35,32,23,.2);
  transition: color .25s, border-color .25s;
}
.bizshow__dot.is-active { color: var(--ink); border-bottom-color: var(--orange); }
.bizshow__dot:hover { color: var(--ink); }

@media (min-width: 880px) {
  .bizshow__inner {
    grid-template-columns: 1.05fr .95fr;
    gap: 0;
  }
  .bizshow__media { min-height: clamp(190px, 30vh, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .bizshow__en,
  .bizshow__photo,
  .bizshow__slide { transition: none; }
}

/* ============================================================
   WORKS ── 写真ギャラリー（olive地）
   ============================================================ */
.works__head {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(30px, 5vw, 48px);
}
@media (min-width: 900px) { .works__head { grid-template-columns: 1fr auto; align-items: end; } }
.works__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (min-width: 760px) { .works__gallery { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.works__cell {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.16);
  box-shadow: 0 12px 26px rgba(35,32,23,.2);
}
.works__cell image-slot,
.works__cell img {
  display: block;
  width: 100%;
  height: clamp(150px, 26vw, 230px);
  object-fit: cover;
}
.works__cell--wide { grid-column: span 2; }
.works__cap {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 5px 12px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
}
.works__foot { margin-top: clamp(30px, 5vw, 44px); display: flex; }

/* ============================================================
   STRENGTH ── なぜSEIKEN？ ナンバリング特集
   ============================================================ */
.strength__grid { display: grid; gap: clamp(32px, 5vw, 56px); }
.strength__list { list-style: none; margin: clamp(20px,4vw,32px) 0 0; padding: 0; display: grid; gap: 16px; }
.strength__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px 18px;
  align-items: start;
  padding: clamp(20px, 3vw, 28px);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 20px;
}
.strength__no {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}
.strength__item:nth-child(2) .strength__no { background: var(--green); }
.strength__item:nth-child(3) .strength__no { background: var(--orange); }
.strength__item:nth-child(4) .strength__no { background: var(--olive); }
.strength__item h3 {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 2.6vw, 23px);
  line-height: 1.45;
}
.strength__item p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.strength__media { display: flex; flex-direction: column; gap: 22px; }
.strength__photo { border-radius: 22px; overflow: hidden; box-shadow: 0 16px 34px rgba(35,32,23,.16); }
.strength__photo img,
.strength__photo image-slot { display: block; width: 100%; height: clamp(240px, 48vw, 420px); object-fit: cover; }
.strength__foot { display: flex; }
@media (min-width: 980px) {
  .strength__grid { grid-template-columns: 1.12fr .88fr; align-items: start; }
}

/* ============================================================
   RECRUIT ── 採用CTA特集（green地）
   ============================================================ */
.recruit__grid { display: grid; gap: clamp(28px, 5vw, 52px); }
.recruit__media { border-radius: 24px; overflow: hidden; box-shadow: 0 18px 40px rgba(31,78,41,.34); }
.recruit__media img,
.recruit__media image-slot { display: block; width: 100%; height: clamp(260px, 52vw, 460px); object-fit: cover; }
.recruit__close {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6vw, 56px);
  line-height: 1.3;
  letter-spacing: .01em;
  text-wrap: balance;
}
.recruit__close .accent {
  display: inline-block;
  color: #fff;
  background: var(--orange);
  padding: 0 .2em;
  border-radius: 10px;
  transform: rotate(-2deg);
}
.recruit__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (min-width: 940px) {
  .recruit__grid { grid-template-columns: 1.08fr 1fr; align-items: center; }
  .recruit__media { order: 2; }
}
.recruit__tiles {
  list-style: none;
  margin: clamp(40px, 7vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 620px)  { .recruit__tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .recruit__tiles { grid-template-columns: repeat(4, 1fr); } }
.recruit-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 132px;
  padding: 22px 22px 20px;
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  transition: background-color .2s, transform .2s;
}
.recruit-tile:hover { background: rgba(255,255,255,.2); transform: translateY(-3px); }
.recruit-tile .en {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .1em;
}
.recruit-tile .jp { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.recruit-tile .desc { margin: 0; font-size: 12.5px; line-height: 1.7; color: #EAF3EC; }
.recruit-tile::after {
  content: "→";
  position: absolute;
  right: 18px; bottom: 14px;
  font-family: var(--font-round);
  font-weight: 900;
  color: #FFD9A0;
}

/* ============================================================
   フッター（奥付風）
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(48px, 7vw, 80px) 0 0;
}
.site-footer a { color: var(--paper); }
.footer__grid { display: grid; gap: 36px; }
.footer__brand .site-logo { background: var(--orange); color: #fff; }
.footer__brand address {
  font-style: normal;
  font-size: 13.5px;
  line-height: 2;
  color: #C8BEA6;
  margin: 18px 0 0;
}
.footer__nav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
}
.footer__nav a {
  display: flex; align-items: center;
  min-height: 46px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.footer__nav a:hover { color: var(--orange); }
.footer__cta { display: flex; flex-direction: column; gap: 12px; }
.footer__bottom {
  margin-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid rgba(241,231,209,.2);
  padding: 18px 0;
}
.footer__bottom-inner {
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start;
  font-size: 12px; color: #C8BEA6;
}
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; color: #C8BEA6; }
@media (min-width: 940px) {
  .footer__grid { grid-template-columns: 1.3fr 1fr .8fr; gap: 56px; }
  .footer__bottom-inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============================================================
   SAFETY ── 安全への取り組み（navy地・現場の鉄則）
   ============================================================ */
.safety { background: #14110a; color: #fff; position: relative; overflow: hidden; }
.safety__haz {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--orange) 0 16px, #1a1208 16px 32px);
}
.safety__top {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin-bottom: clamp(30px, 3.6vw, 46px);
}
@media (min-width: 940px) {
  .safety__top { grid-template-columns: 1.35fr .65fr; }
  .safety__zero { max-width: none; margin-inline: 0; }
}
.safety__kick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 16px;
}
.safety__kick i {
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--orange);
  display: inline-block;
}
.safety__title {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(30px, 4.8vw, 56px);
  line-height: 1.16;
  letter-spacing: .005em;
}
.safety__title .mk { color: var(--orange); }
.safety__title .jp { font-family: var(--font-ui); font-weight: 900; }
.safety__lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.95;
  color: #C8C3B4;
}
.safety__zero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: clamp(24px, 2.8vw, 34px) clamp(20px, 2.4vw, 30px);
  border: 2px solid var(--orange);
  border-radius: 8px 28px 8px 28px;
  background: rgba(224, 85, 46, .08);
}
.safety__zero b {
  display: block;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--orange);
}
.safety__zero span {
  display: block;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .26em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #fff;
}
.safety__zero small {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: #C8C3B4;
}
.safety__rules {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.safety__rule {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(22px, 3vw, 32px) 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
@media (min-width: 780px) {
  .safety__rule { grid-template-columns: auto clamp(230px, 30vw, 320px) 1fr; align-items: center; min-height: clamp(82px, 6.5vw, 96px); }
  .safety__rule h3 { white-space: nowrap; }
  .safety__mark { align-self: center; transform: none; }
}
.safety__mark {
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--orange);
  align-self: start;
  transform: translateY(.5em);
}
.safety__rule h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.35;
  color: #fff;
}
.safety__rule p { margin: 0; font-size: 14.5px; line-height: 1.85; color: #C8C3B4; }
.safety__foot { margin-top: clamp(30px, 4vw, 42px); display: flex; }
.safety__foot .more-link {
  padding: 13px 24px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-radius: 8px 22px 8px 22px;
  background: rgba(255, 255, 255, .04);
  transition: background .2s, border-color .2s;
}
.safety__foot .more-link:hover {
  background: var(--orange);
  border-color: var(--orange);
}
.safety__foot .more-link:hover .jp-note { color: #fff; }
.safety__foot .more-link:hover::after { background: #fff; color: var(--orange); }
.safety .more-link { color: #fff; }
.safety .more-link .jp-note { color: #C8C3B4; }

/* ============================================================
   DATA ── 数字で見るSEIKEN（紙地・特大数字）
   ============================================================ */
.data__grid {
  list-style: none;
  margin: clamp(28px, 5vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (min-width: 720px)  { .data__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.data__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(20px, 3vw, 30px) clamp(16px, 2.4vw, 24px);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 20px;
}
.data__num {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--orange);
}
.data__num .unit {
  font-size: .42em;
  margin-left: .12em;
  color: var(--ink);
}
.data__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 16px);
  letter-spacing: .02em;
  line-height: 1.45;
}
.data__label small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.data__note {
  margin: clamp(20px, 3vw, 28px) 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: .02em;
}

/* ============================================================
   フッター追記：電話・会社概要（奥付）
   ============================================================ */
.footer__tel {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin: 20px 0 0;
  padding: 14px 22px;
  background: rgba(241,231,209,.08);
  border: 1px solid rgba(241,231,209,.28);
  border-radius: 16px;
  text-decoration: none;
}
.footer__tel .lab {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: #C8BEA6;
}
.footer__tel .num {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: .04em;
  color: var(--paper);
}
.footer__tel .num .arrow { display: none; }
.footer__tel .person { font-size: 11.5px; color: #C8BEA6; }

.footer__company {
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(241,231,209,.2);
}
.footer__company-h {
  font-family: var(--font-round);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--orange);
  margin: 0 0 18px;
}
.footer__company dl {
  margin: 0;
  display: grid;
  gap: 0;
}
.footer__company div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 0 16px;
  padding: 11px 0;
  border-bottom: 1px dotted rgba(241,231,209,.22);
  font-size: 13px;
  line-height: 1.7;
}
.footer__company dt { font-family: var(--font-display); font-weight: 700; color: var(--paper); }
.footer__company dd { margin: 0; color: #C8BEA6; }
@media (min-width: 760px) {
  .footer__company dl { grid-template-columns: 1fr 1fr; gap: 0 48px; }
}

/* ============================================================
   入場アニメーション（reduced-motion を尊重・停止状態が既定）
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .cover__photo,
  .cover__headline > *,
  .cover__lines li {
    animation: mag-rise .8s cubic-bezier(.22,1,.36,1) both;
  }
  .cover__headline > *:nth-child(2) { animation-delay: .08s; }
  .cover__headline > *:nth-child(3) { animation-delay: .16s; }
  .cover__headline > *:nth-child(4) { animation-delay: .24s; }
  .cover__lines li:nth-child(2) { animation-delay: .1s; }
  .cover__lines li:nth-child(3) { animation-delay: .2s; }
}
@keyframes mag-rise {
  from { opacity: 0; transform: translateY(26px); }
}

/* ============================================================
   FVデザインとの統一 ── 署名となる非対称フレーム角＋スクロール登場
   ============================================================ */
/* 大判の特集写真は、FVの写真フレームと同じ非対称角で揃える */
.strength__photo,
.recruit__media {
  border-radius: 8px 36px 8px 36px;
}

/* スクロールで各要素がふわっと立ち上がる（FVの入場演出に呼応） */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s cubic-bezier(.16, .84, .34, 1),
    transform .7s cubic-bezier(.16, .84, .34, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* MESSAGEのボックスは枠ごと、大きく下からせり上がる */
.message--center .container.reveal { transform: translateY(110px); transition-duration: 1.05s; }
.message--center .container.reveal.is-in { transform: none; }
/* OUR BUSINESS：カードが順番に下からせり上がる（やや大きめ・ゆっくり） */
.biz-card.reveal { transform: translateY(46px) scale(.985); transition-duration: .82s; }
.biz-card.reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   下層ページ ヒーロー（マストヘッド）の入場演出
   見出しは「左→右」へワイプして現れる。reduced-motion は静止。
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .svc-hero__topline { animation: sh-fade .6s ease .05s both; }
  .svc-hero__topline .grow { transform-origin: left; animation: sh-rule .8s cubic-bezier(.16,.84,.34,1) .15s both; }
  .svc-hero .crumbs { animation: sh-fadeup .6s ease both; }
  .svc-hero__stencil { animation: sh-wipe-l 1.05s cubic-bezier(.22,.7,.2,1) .22s both; }
  .svc-hero__title { animation: sh-wipe-l .85s cubic-bezier(.22,.7,.2,1) .60s both; }
  .svc-hero__lead { animation: sh-fadeup .8s cubic-bezier(.16,.84,.34,1) .82s both; }
  .svc-hero__index { animation: sh-fadeup .75s cubic-bezier(.16,.84,.34,1) .96s both; }
  .svc-frame { animation: sh-frame 1s cubic-bezier(.16,.84,.34,1) .5s both; }
}
@keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sh-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sh-wipe-l {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  6%   { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 -2% 0 0); }
}
@keyframes sh-frame {
  0%   { opacity: 0; transform: scale(1.08); clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

/* 見出しは「左→右」へワイプして現れる（TOP・下層共通） */
.reveal.is-head {
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .95s cubic-bezier(.22,.7,.2,1), opacity .4s ease;
  will-change: clip-path, opacity;
}
.reveal.is-head.is-in { transform: none; clip-path: inset(0 -3% 0 0); }
@media (prefers-reduced-motion: reduce) {
  .reveal.is-head { clip-path: none; transition: none; }
}

/* ============================================================
   下部セクション（STRENGTH / SAFETY / DATA / RECRUIT）を
   上部の編集トンマナへ統一
   - 見出し背後の特大ゴースト英字（Saira Stencil）
   - kicker をオレンジ角ラベル（Saira Stencil）へ
   - 黒い太縁取りを廃し、紙色ヘアライン＋柔らかい影＋FV署名の非対称フレーム角に
   ============================================================ */
.sec-head { position: relative; }
.sec-ghost {
  position: absolute;
  top: clamp(-30px, -2.4vw, -20px);
  left: -4px;
  margin: 0;
  z-index: 0;
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(54px, 10.5vw, 100px);
  line-height: .8;
  letter-spacing: .02em;
  color: rgba(35, 32, 23, .085);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.section--navy .sec-ghost,
.section--green .sec-ghost { color: rgba(255, 255, 255, .10); }
/* 前面要素はゴーストの上へ（ゴースト自身は除外） */
.sec-head > :not(.sec-ghost) { position: relative; z-index: 1; }
.safety__seal,
.recruit__media { position: relative; z-index: 1; }

/* kicker をオレンジ角ラベル（Saira Stencil）に統一（History/Business と同意匠） */
.strength .kicker,
.safety .kicker,
.data .kicker,
.recruit .kicker {
  display: inline-block;
  margin: 0 0 14px;
  background: var(--orange);
  color: #fff;
  padding: 4px 18px;
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 23px;
  letter-spacing: .1em;
}
.strength .kicker::before,
.safety .kicker::before,
.data .kicker::before,
.recruit .kicker::before { display: none; }

/* 内容カード：黒い太縁取り＆20px角丸を廃し、紙色ヘアライン＋柔らかい影＋
   FV署名の非対称フレーム角に統一（写真フレームと同じ系統の角に） */
.strength__item,
.data__cell {
  border: 1px solid var(--line);
  border-radius: 6px 28px 6px 28px;
  box-shadow: 0 10px 26px rgba(35, 32, 23, .07);
}
.safety__rule {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px 28px 6px 28px;
}
.recruit-tile {
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 6px 28px 6px 28px;
}
/* 番号バッジも同じ非対称角を小さく効かせて呼応 */
.strength__no,
.safety__rule-no { border-radius: 4px 14px 4px 14px; }

/* ============================================================
   STRENGTH ── 大きな行を縦に積み、スクロールで1つずつ立ち上がる特集
   （参考：縦書きラベル＋特大ナンバー＋写真＋緑の三角／誌面トンマナ）
   ============================================================ */
.strength__rows {
  margin-top: clamp(26px, 4.5vw, 44px);
  display: grid;
  gap: 0;
}
.strength-row {
  position: relative;
  display: grid;
  gap: clamp(18px, 3vw, 36px);
  padding: clamp(34px, 6vw, 76px) 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.strength-row:first-child { border-top: 0; padding-top: clamp(8px, 2vw, 20px); }

/* 番号列：縦書きラベル＋特大ナンバー */
.strength-row__idx {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
}
.strength-row__vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.strength-row__no {
  display: flex;
  align-items: baseline;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(62px, 10.5vw, 132px);
  line-height: .8;
  letter-spacing: -.02em;
  color: var(--ink);
}
.strength-row__no i { color: var(--orange); font-style: normal; }

/* 本文列 */
.strength-row__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
}
.strength-row__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.32;
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: pretty;
}
.strength-row__desc {
  margin: 0 0 20px;
  max-width: 38em;
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.95;
  color: var(--ink-soft);
}
.strength-row__more { margin: 0; }
.strength-row__more .more-link { white-space: nowrap; }

/* 写真列：FV署名の非対称フレーム角＋背後の緑の三角 */
.strength-row__media { position: relative; }
.strength-row__photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 8px 36px 8px 36px;
  box-shadow: 0 18px 40px rgba(35, 32, 23, .18);
}
.strength-row__photo image-slot,
.strength-row__photo img {
  display: block;
  width: 100%;
  height: clamp(220px, 30vw, 340px);
  object-fit: cover;
}
.strength-row__tri {
  position: absolute;
  z-index: 0;
  top: clamp(-18px, -2vw, -30px);
  left: clamp(-18px, -2vw, -30px);
  width: clamp(96px, 14vw, 168px);
  aspect-ratio: 1;
  background: var(--green);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  filter: drop-shadow(0 10px 18px rgba(31, 78, 41, .28));
}

@media (min-width: 880px) {
  .strength-row {
    grid-template-columns: minmax(132px, 200px) minmax(0, 1fr) clamp(300px, 33vw, 460px);
    min-height: clamp(360px, 54vh, 540px);
  }
}

/* セクション末尾のCTA */
.strength__cta { margin: clamp(30px, 5vw, 48px) 0 0; display: flex; }

/* --- スクロール登場アニメーション（行が視界に入ると1つずつ立ち上がる） --- */
@media (prefers-reduced-motion: no-preference) {
  .strength-row .strength-row__no { opacity: 0; transform: translateX(-26px); }
  .strength-row .strength-row__vlabel { opacity: 0; transform: translateY(16px); }
  .strength-row .strength-row__eyebrow,
  .strength-row .strength-row__title,
  .strength-row .strength-row__desc,
  .strength-row .strength-row__more { opacity: 0; transform: translateY(22px); }
  .strength-row .strength-row__tri { opacity: 0; transform: scale(.5); }
  .strength-row .strength-row__photo { opacity: 0; transform: translateX(38px); }
  .strength-row :is(.strength-row__no, .strength-row__vlabel, .strength-row__eyebrow, .strength-row__title, .strength-row__desc, .strength-row__more, .strength-row__tri, .strength-row__photo) {
    transition: opacity .7s cubic-bezier(.16,.84,.34,1), transform .8s cubic-bezier(.16,.84,.34,1);
    will-change: opacity, transform;
  }
  .strength-row.is-in .strength-row__no,
  .strength-row.is-in .strength-row__vlabel,
  .strength-row.is-in .strength-row__eyebrow,
  .strength-row.is-in .strength-row__title,
  .strength-row.is-in .strength-row__desc,
  .strength-row.is-in .strength-row__more,
  .strength-row.is-in .strength-row__tri,
  .strength-row.is-in .strength-row__photo { opacity: 1; transform: none; }

  /* 立ち上がりの時間差 */
  .strength-row.is-in .strength-row__no { transition-delay: .02s; }
  .strength-row.is-in .strength-row__vlabel { transition-delay: .10s; }
  .strength-row.is-in .strength-row__eyebrow { transition-delay: .14s; }
  .strength-row.is-in .strength-row__title { transition-delay: .20s; }
  .strength-row.is-in .strength-row__desc { transition-delay: .28s; }
  .strength-row.is-in .strength-row__more { transition-delay: .34s; }
  .strength-row.is-in .strength-row__tri { transition-delay: .12s; }
  .strength-row.is-in .strength-row__photo { transition-delay: .18s; }
}

@media (max-width: 879px) {
  .strength-row__vlabel { writing-mode: horizontal-tb; transform: none; letter-spacing: .26em; }
  .strength-row__idx { gap: 14px; }
  .strength-row__media { max-width: 520px; }
}

/* 電話番号の注釈：求人媒体の営業電話お断り */
.footer__tel .note { display:block; margin-top:6px; font-size:11px; line-height:1.5; letter-spacing:.02em; color:#C8BEA6; }

/* ===== 本体追加 : add-v3.css ===== */
/* === add.css 貼り付け ここから（v3：サブカル雑誌型 配色） === */

/* ------------------------------------------------------------
   新着情報（NEWS帯）design-parts-52 系
   - 固有IDに依存しないよう [class*="design-parts-52"] で指定
   - 焼き込み色（ラベル #bf172e／背景 #dddddd）を雑誌型サイト配色に上書き
   ------------------------------------------------------------ */
section[class*="design-parts-52"].bg-color {
  background: #fff !important;
  padding: 16px 0 !important;
}
section[class*="design-parts-52"] .container {
  width: min(100% - 36px, 1180px) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding: 0 !important;
}
section[class*="design-parts-52"] .content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
section[class*="design-parts-52"] h4.banner-area {
  margin: 0 !important;
  padding: 8px 22px !important;
  align-self: flex-start !important;
  background: #E0552E !important;          /* orange */
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-family: var(--font-round) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  line-height: 1.4 !important;
}
/* CMSでラベル未設定（banner-area が空）だとオレンジのピルが文字なしのblobに見える。
   空の時だけ「お知らせ」を補完（CMSでラベルを入れればその文字が優先され、これは無効化）。 */
section[class*="design-parts-52"] h4.banner-area:empty::before { content: "お知らせ"; }
section[class*="design-parts-52"] ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
section[class*="design-parts-52"] ul li a {
  display: block !important;
  padding: 10px 4px !important;
  color: #232017 !important;
  text-decoration: none !important;
}
section[class*="design-parts-52"] ul li a:hover .d-inline-block {
  color: #2E6B39 !important;
  text-decoration: underline !important;
}
section[class*="design-parts-52"] .parts-52-textarea {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
section[class*="design-parts-52"] .parts-52-textarea span.date {
  font-family: var(--font-round) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  letter-spacing: .08em !important;
  color: #E0552E !important;
}
section[class*="design-parts-52"] .parts-52-textarea span.d-inline-block {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
}

/* PC（992px以上）：NEWSラベル＋記事を横1行・min-height 60px */
@media (min-width: 992px) {
  section[class*="design-parts-52"].bg-color { padding: 14px 0 !important; }
  section[class*="design-parts-52"] .content {
    flex-direction: row !important;
    align-items: center !important;
    min-height: 60px !important;
    gap: 28px !important;
  }
  section[class*="design-parts-52"] h4.banner-area { align-self: center !important; }
  section[class*="design-parts-52"] ul { flex: 1 !important; }
  section[class*="design-parts-52"] ul li a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 4px 0 !important;
  }
  section[class*="design-parts-52"] .parts-52-textarea {
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
  }
}

/* ------------------------------------------------------------
   BLOGセクション parts131415_blog 系（3列カードグリッド）
   - 固有IDに依存しないよう [class*="parts131415_blog"] で指定
   - 焼き込み（h2 #ffffff／bg-img の元サイト背景画像）を雑誌型配色に上書き
   ------------------------------------------------------------ */
section[class*="parts131415_blog"].bg-img {
  background-image: radial-gradient(#E8DABB 1.4px, transparent 1.5px) !important;
  background-size: 18px 18px !important;
  background-color: #F1E7D1 !important;    /* paper */
  padding: clamp(64px, 10vw, 124px) 18px !important;  /* .section と同値に揃える（上部マージンと統一） */
}
section[class*="parts131415_blog"] .container-lg {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding: 0 !important;
}
section[class*="parts131415_blog"] .parts131415_blog_title_wrap {
  margin: 0 0 36px !important;
  text-align: left !important;
}
section[class*="parts131415_blog"] .parts131415_blog_title_wrap h2 {
  margin: 0 0 8px !important;
  color: #232017 !important;
  font-family: var(--font-round) !important;
  font-size: clamp(34px, 6vw, 60px) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
}
section[class*="parts131415_blog"] .parts131415_blog_title_wrap p {
  margin: 0 !important;
  color: #5C5544 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
section[class*="parts131415_blog"] .row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (min-width: 576px) and (max-width: 767px) {
  section[class*="parts131415_blog"] .row { grid-template-columns: repeat(2, 1fr) !important; }
}
/* タブレット以上：WORKS／BLOG の記事を3列で表示 */
@media (min-width: 768px) {
  section[class*="parts131415_blog"] .row { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
}
section[class*="parts131415_blog"] .col {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
section[class*="parts131415_blog"] .card {
  background: #FBF6EA !important;          /* card cream */
  border: 2px solid #232017 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  height: 100% !important;
  transition: transform .2s, box-shadow .2s !important;
}
section[class*="parts131415_blog"] .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 30px rgba(35,32,23,.18) !important;
}
section[class*="parts131415_blog"] .card-body {
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 18px 22px !important;
}
section[class*="parts131415_blog"] h5.card-title {
  order: 0 !important;
  margin: 0 0 12px !important;
  align-self: flex-start !important;
  background: #2E6B39 !important;          /* green */
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  line-height: 1.4 !important;
  padding: 5px 14px !important;
  text-align: left !important;
}
section[class*="parts131415_blog"] .card-body a {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  color: #232017 !important;
  text-decoration: none !important;
}
section[class*="parts131415_blog"] .card-body a:hover p.card-text {
  color: #2E6B39 !important;
  text-decoration: underline !important;
}
section[class*="parts131415_blog"] p.card-text {
  margin: 0 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
}
section[class*="parts131415_blog"] .parts131415_blog_thumbnail {
  overflow: hidden !important;
  border-radius: 14px !important;
}
section[class*="parts131415_blog"] .parts131415_blog_thumbnail img {
  width: 100% !important;
  height: 205px !important;
  object-fit: cover !important;
  display: block !important;
}
@media (min-width: 576px) {
  section[class*="parts131415_blog"] .parts131415_blog_thumbnail img { height: 215px !important; }
}
@media (min-width: 992px) {
  section[class*="parts131415_blog"] .parts131415_blog_thumbnail img { height: 240px !important; }
}

/* ------------------------------------------------------------
   WORKS インスタンス（parts131415_blog_rcGKTP4UeU）限定の上書き
   ※BLOG（別インスタンス）には影響させない
   ※サフィックス _rcGKTP4UeU は実機(enjoyworks-test17)の施工実績パーツの実ID（2026-06確認済）。
     当初の連番 _001 はプレースホルダで未適用だった。**パーツを作り直すとIDが変わる**ため、
     その際は新IDへ要差し替え（実機DOMで section の class を確認）。
   - 角丸を廃止（カード／サムネ／カテゴリ）し直線基調に
   - 見出しを上のセクション（kicker + sec-title）の意匠に合わせる
   ------------------------------------------------------------ */
/* 角丸の廃止（直線基調） */
section.parts131415_blog_rcGKTP4UeU .card,
section.parts131415_blog_rcGKTP4UeU .parts131415_blog_thumbnail,
section.parts131415_blog_rcGKTP4UeU h5.card-title {
  border-radius: 0 !important;
}
/* 右上・左下をカットした多角形フレーム。
   黒い太縁取りは廃止し、紙色のヘアライン（カード地＝line色／中身＝card色を
   1.5px内側に重ねて縁取りを表現）＋切り口に沿う柔らかい影で誌面に馴染ませる。
   --cut でカット量を一括管理。 */
section.parts131415_blog_rcGKTP4UeU .card {
  --cut: clamp(18px, 2.4vw, 26px);
  background: var(--line) !important;        /* 縁取りの色（カット辺にも沿う） */
  border: 0 !important;
  padding: 1.5px !important;                  /* この厚みがヘアラインになる */
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  ) !important;
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10)) !important;
  transition: transform .2s, filter .2s !important;
}
section.parts131415_blog_rcGKTP4UeU .card-body {
  background: var(--card) !important;         /* カード本体のクリーム地 */
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  ) !important;
}
section.parts131415_blog_rcGKTP4UeU .card:hover {
  box-shadow: none !important;
  filter: drop-shadow(0 16px 30px rgba(35, 32, 23, .18)) !important;
}
/* 見出し：MESSAGEセクションの見出し意匠に合わせる
   （オレンジ角ラベル ＋ Saira Stencil One の特大英字／stamp-fade）
   ※クリーム地のため英字色は ink に調整 */
section.parts131415_blog_rcGKTP4UeU .parts131415_blog_title_wrap {
  margin: 0 0 clamp(30px, 5vw, 48px) !important;
  text-align: center !important;
}
section.parts131415_blog_rcGKTP4UeU .parts131415_blog_title_wrap::before {
  content: "施工実績";
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 4px 18px;
  border-radius: 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .22em;
  line-height: 1.6;
  margin: 0 0 6px;
}
section.parts131415_blog_rcGKTP4UeU .parts131415_blog_title_wrap h2 {
  margin: 0 !important;
  font-family: "Saira Stencil One", var(--font-headline) !important;
  font-weight: 400 !important;
  font-size: clamp(34px, 6.5vw, 64px) !important;
  letter-spacing: .05em !important;
  line-height: .96 !important;
  color: var(--ink) !important;
  filter: url(#stamp-fade);
}
/* 見出し下のリード文 */
section.parts131415_blog_rcGKTP4UeU .parts131415_blog_title_wrap p {
  margin: 16px auto 0 !important;
  max-width: 38em !important;
  color: #5C5544 !important;
  font-weight: 500 !important;
  font-size: clamp(15px, 1.6vw, 17px) !important;
  line-height: 1.8 !important;
}

/* ------------------------------------------------------------
   STRENGTH ── カード（案F：写真左フルハイト × 大見出し）
   - 番号・縦ラベル・緑の三角は廃止
   - 英字キッカー＋短い罫を「目印」に。見出しは角ゴ900で大きく
   ------------------------------------------------------------ */
.strength-cards {
  margin-top: clamp(26px, 4.5vw, 44px);
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
.scard {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px 48px 14px 48px;
  box-shadow: 0 22px 56px rgba(35, 32, 23, .16);
}
.scard__photo { position: relative; }
.scard__photo image-slot,
.scard__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scard__body {
  padding: clamp(28px, 3.6vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scard__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--orange);
}
.scard__eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--orange); }
.scard__title {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.28;
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: pretty;
}
.scard__desc {
  margin: 0 0 22px;
  max-width: 34em;
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  line-height: 1.95;
  color: var(--ink-soft);
}
.scard__more { margin: 0; }
.scard__more .more-link { white-space: nowrap; }

@media (min-width: 880px) {
  .scard {
    display: grid;
    grid-template-columns: clamp(300px, 42%, 480px) minmax(0, 1fr);
    min-height: clamp(380px, 52vh, 520px);
  }
}
@media (max-width: 879px) {
  .scard__photo { height: clamp(200px, 52vw, 300px); }
  .scard__title { font-size: clamp(26px, 7vw, 36px); }
}

/* ------------------------------------------------------------
   STRENGTH ── ピン留めスタック
   セクションを固定したまま、スクロールでカードが下からせり上がり
   1枚ずつ重なる（OUR BUSINESS と同系統のピン機構）
   ------------------------------------------------------------ */
.strengthpin {
  position: relative;
  background: var(--paper-2);
  color: var(--ink);
  height: calc(100vh + var(--panels, 4) * 72vh);
}
.strengthpin__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 3vw, 34px);
  padding: calc(var(--header-h) + clamp(18px, 3.5vh, 48px)) 0 clamp(18px, 3.5vh, 48px);
}
/* 見出しは HISTORY／OUR BUSINESS と同じ横罫マストヘッド（.mast）に統一。
   舞台（全面写真カード）は縦方向に伸縮させ、ピン内に収める。 */
.strengthpin .mast { margin-bottom: 0; flex: none; z-index: 4; }

/* カードの舞台（縦に伸縮・最大440） */
.strengthpin__stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-height: 200px;
  max-height: 440px;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 26px 60px rgba(35, 32, 23, .18);
}
/* STRENGTH のカードは「全面写真＋主張を重ねる」エディトリアル仕様。
   業務案内（bizshow）の写真＋本文カードと差別化する。 */
.strengthpin .scard {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--ink);
  overflow: hidden;
  transform: translateY(115%);   /* 初期は舞台の下。JS がスクロールに連動して配置 */
  will-change: transform;
}
.strengthpin .scard__photo { position: absolute; inset: 0; height: 100%; }
.strengthpin .scard__photo image-slot,
.strengthpin .scard__photo img { width: 100%; height: 100%; object-fit: cover; }
/* 文字可読性のための暗幕（下ほど濃く） */
.strengthpin .scard::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(20,18,12,0) 0%,
    rgba(20,18,12,.06) 34%,
    rgba(20,18,12,.58) 70%,
    rgba(20,18,12,.88) 100%);
}
/* 大きな連番（エディトリアルの指標） */
.strengthpin .scard__index {
  position: absolute; z-index: 2;
  top: clamp(6px, 1.4vw, 16px);
  right: clamp(16px, 2.6vw, 34px);
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(60px, 9vw, 124px);
  line-height: .8;
  letter-spacing: .02em;
  color: rgba(255,255,255,.16);
  pointer-events: none; user-select: none;
}
.strengthpin .scard__overlay {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 3vw, 48px);
  /* テキストの左端を見出し（.container）と同じグリッド線に揃える */
  padding-left: max(18px, calc((100% - var(--container-w)) / 2));
  display: flex; flex-direction: column;
  gap: clamp(8px, 1vw, 14px);
}
.strengthpin .scard__eyebrow {
  margin: 0;
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-en);
  font-weight: 600; font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: .24em; text-transform: uppercase;
  color: #fff;
}
.strengthpin .scard__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--orange); }
.strengthpin .scard__kw {
  text-transform: none; letter-spacing: .06em;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(11px, 1.2vw, 13px);
  color: #FFD9A0;
  border-left: 1px solid rgba(255,255,255,.4);
  padding-left: 12px;
}
.strengthpin .scard__title {
  margin: 0;
  font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.16; letter-spacing: .01em;
  color: #fff; text-wrap: pretty;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.strengthpin .scard__title .line-chunk { display: block; overflow-wrap: normal; }
.strengthpin .scard__desc {
  margin: 0; max-width: 42em;
  font-size: clamp(13.5px, 1.5vw, 16px);
  line-height: 1.85; color: rgba(255,255,255,.86);
}
.strengthpin .scard__more { margin: 2px 0 0; }
.strengthpin .scard__more .more-link { color: #fff; }

/* 進行ドット（英字ラベル） */
.strengthpin__dots {
  position: relative;
  z-index: 4;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  margin-top: 0;
}
.spin-dot {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 2px;
  min-height: 36px;
  white-space: nowrap;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color .25s, border-color .25s;
}
.spin-dot.is-active { color: var(--ink); border-bottom-color: var(--orange); }
.spin-dot:hover { color: var(--ink); }

.strengthpin__cta {
  position: relative;
  z-index: 4;
  flex: none;
  display: flex;
  justify-content: center;
  margin: 0;
}

/* 低い表示領域（ノートPC・小さなプレビュー枠など）では
   見出し・カード・余白を引き締めて、CTA まで必ず収める */
@media (max-height: 720px) {
  .strengthpin .mast .sec-title { font-size: clamp(22px, 3vw, 32px); }
  .strengthpin__stage { max-height: 360px; }
  .strengthpin .scard__index { font-size: clamp(48px, 7vw, 84px); }
  .strengthpin .scard__overlay { padding: clamp(14px, 2.2vw, 30px); padding-left: max(18px, calc((100% - var(--container-w)) / 2)); gap: 6px; }
  .strengthpin .scard__title { font-size: clamp(24px, 3.4vw, 38px); }
  .strengthpin .scard__desc { font-size: 13px; line-height: 1.6; }
}

/* JS無効・低モーション時：ピンをやめ、見出しは横組み・カードは縦積みで全件表示 */
.strengthpin.is-static { height: auto; }
.strengthpin.is-static .strengthpin__pin { position: static; height: auto; min-height: 0; overflow: visible; padding: clamp(48px, 8vw, 100px) 0; }
.strengthpin.is-static .strengthpin__stage { height: auto; max-height: none; display: grid; gap: clamp(20px, 3vw, 30px); box-shadow: none; }
.strengthpin.is-static .scard { position: relative; transform: none; height: clamp(360px, 60vw, 520px); border-radius: 0; }
.strengthpin.is-static .scard__photo { position: absolute; inset: 0; height: 100%; }

/* ------------------------------------------------------------
   HISTORY × OUR BUSINESS ── 横罫マストヘッド（Plan A）
   "歴史"でつながる対の見出しを同じ意匠で揃える。
   旧来のオレンジ角ラベル／透かし語は使わない。
   ------------------------------------------------------------ */
.mast {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 38px);
  margin-top: 0;
  margin-bottom: clamp(22px, 3vw, 34px);
  position: relative;
  z-index: 1;
}
.mast__lead { flex: none; display: flex; flex-direction: column; gap: 10px; }
.mast__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--orange);
}
.mast__kicker::before { content: ""; width: 26px; height: 2px; background: var(--orange); }
.mast .sec-title {
  margin: 0;
  font-size: clamp(30px, 4.8vw, 56px);
  line-height: 1.16;
  letter-spacing: .02em;
  color: var(--ink);
}
.mast__rule {
  flex: 1 1 auto;
  height: 0;
  border-top: 1.5px solid var(--ink);
  margin-bottom: 14px;
}
.mast__index { flex: none; margin: 0 0 4px; text-align: right; line-height: 1; }
.mast__index b {
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: .04em;
  color: var(--ink);
}
.mast__index small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .mast { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .mast__rule { display: none; }
  .mast__index { text-align: left; }
}

/* === add.css 貼り付け ここまで === */

/* ------------------------------------------------------------
   WORKS（施工実績）セクションの上下を細かいギザギザの切り口に。
   上＝直上 OUR BUSINESS のグレー／下＝直下 STRENGTH の紙色2を
   それぞれ三角の歯にして、紙を切り抜いたような境界をつくる。
   ------------------------------------------------------------ */
section.parts131415_blog_rcGKTP4UeU { position: relative; }
section.parts131415_blog_rcGKTP4UeU::before,
section.parts131415_blog_rcGKTP4UeU::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 11px;
  z-index: 3;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 14px 11px;
}
/* 上：グレー（#E9E7E2）の歯が下向きに食い込む */
section.parts131415_blog_rcGKTP4UeU::before {
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11'%3E%3Cpath d='M0 0 H14 L7 11 Z' fill='%23E9E7E2'/%3E%3C/svg%3E");
  background-position: top left;
}
/* 下：紙色2（#E8DABB）の歯が上向きに食い込む */
section.parts131415_blog_rcGKTP4UeU::after {
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11'%3E%3Cpath d='M0 11 H14 L7 0 Z' fill='%23E8DABB'/%3E%3C/svg%3E");
  background-position: bottom left;
}

/* ------------------------------------------------------------
   BLOG インスタンス（parts131415_blog_K8NtgolPPD）限定の上書き
   ※サフィックス _K8NtgolPPD は実機のブログパーツの実ID（2026-06確認済／当初連番 _000 は未適用）。
     パーツ再作成時は新IDへ要差し替え。
   ※WORKS（_rcGKTP4UeU）と同じ意匠でそろえる：カット角カード／ステンシル見出し／
     角ラベル／歯型の境界。ただし差し色は WORKS=バーミリオン に対し
     BLOG=ブランドネイビーへ振り、全く同じ色にはしない。
   ------------------------------------------------------------ */
/* 角丸の廃止（直線基調） */
section.parts131415_blog_K8NtgolPPD .card,
section.parts131415_blog_K8NtgolPPD .parts131415_blog_thumbnail,
section.parts131415_blog_K8NtgolPPD h5.card-title {
  border-radius: 0 !important;
}
/* 右上・左下をカットした多角形フレーム（WORKSと共通の構造） */
section.parts131415_blog_K8NtgolPPD .card {
  --cut: clamp(18px, 2.4vw, 26px);
  background: var(--line) !important;
  border: 0 !important;
  padding: 1.5px !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  ) !important;
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10)) !important;
  transition: transform .2s, filter .2s !important;
}
section.parts131415_blog_K8NtgolPPD .card-body {
  background: var(--card) !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  ) !important;
}
section.parts131415_blog_K8NtgolPPD .card:hover {
  box-shadow: none !important;
  filter: drop-shadow(0 16px 30px rgba(35, 32, 23, .18)) !important;
}
/* カテゴリのピル：WORKS=グリーン に対し BLOG=ネイビー で差別化 */
section.parts131415_blog_K8NtgolPPD h5.card-title {
  background: var(--navy) !important;
}
/* リンクのホバー色もネイビーへ（WORKSはグリーンのまま） */
section.parts131415_blog_K8NtgolPPD .card-body a:hover p.card-text {
  color: var(--navy) !important;
}
/* 見出し：WORKSと同じステンシル意匠。ラベルはネイビー＋「ブログ」 */
section.parts131415_blog_K8NtgolPPD .parts131415_blog_title_wrap {
  margin: 0 0 clamp(30px, 5vw, 48px) !important;
  text-align: center !important;
}
section.parts131415_blog_K8NtgolPPD .parts131415_blog_title_wrap::before {
  content: "ブログ";
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 4px 18px;
  border-radius: 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .22em;
  line-height: 1.6;
  margin: 0 0 6px;
}
section.parts131415_blog_K8NtgolPPD .parts131415_blog_title_wrap h2 {
  margin: 0 !important;
  font-family: "Saira Stencil One", var(--font-headline) !important;
  font-weight: 400 !important;
  font-size: clamp(34px, 6.5vw, 64px) !important;
  letter-spacing: .05em !important;
  line-height: .96 !important;
  color: var(--ink) !important;
  filter: url(#stamp-fade);
}
section.parts131415_blog_K8NtgolPPD .parts131415_blog_title_wrap p {
  margin: 16px auto 0 !important;
  max-width: 38em !important;
  color: #5C5544 !important;
  font-weight: 500 !important;
  font-size: clamp(15px, 1.6vw, 17px) !important;
  line-height: 1.8 !important;
}
/* 歯型の境界（WORKSと同じ手法／上は緑のRECRUIT、下は黒の奥付に合わせる） */
section.parts131415_blog_K8NtgolPPD { position: relative; }
section.parts131415_blog_K8NtgolPPD::before,
section.parts131415_blog_K8NtgolPPD::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 11px;
  background-repeat: repeat-x;
  z-index: 2;
  pointer-events: none;
}
/* 上：緑（#2E6B39 RECRUIT）の歯が下向きに食い込む */
section.parts131415_blog_K8NtgolPPD::before {
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11'%3E%3Cpath d='M0 0 H14 L7 11 Z' fill='%232E6B39'/%3E%3C/svg%3E");
  background-position: top left;
}
/* 下：黒に近いインク（#232017 奥付）の歯が上向きに食い込む */
section.parts131415_blog_K8NtgolPPD::after {
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11'%3E%3Cpath d='M0 11 H14 L7 0 Z' fill='%23232017'/%3E%3C/svg%3E");
  background-position: bottom left;
}

/* ------------------------------------------------------------
   FOOTER（奥付）── 雑誌の奥付らしく、ステンシルの透かし＋誌面意匠で締める。
   ブロック上部の境界は BLOG 側の黒い歯型が担うため、追加の罫は置かない。
   ------------------------------------------------------------ */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(56px, 8vw, 96px) !important;
}
/* 特大ステンシルの透かし（WORKS / BLOG / RECRUIT 見出しと同系の意匠） */
.site-footer .footer__ghost {
  position: absolute;
  z-index: 0;
  margin: 0;
  left: clamp(-6px, -1vw, 0px);
  bottom: clamp(-14px, -1.4vw, -6px);
  font-family: "Saira Stencil One", var(--font-round);
  font-weight: 400;
  font-size: clamp(96px, 20vw, 300px);
  line-height: .8;
  letter-spacing: .04em;
  color: rgba(241, 231, 209, .05);   /* paper を極薄で */
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.site-footer .container { position: relative; z-index: 1; }
/* ロゴブロック：オレンジ角版を廃止。ヘッダー同様「マーク＋白文字」のクリーンな扱いに。
   下にピーチの細い罫を引いて奥付の見出しらしく締める。 */
.site-footer .footer__brand .site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
  background: none !important;
  color: var(--paper) !important;
  border-bottom: 2px solid rgba(255, 201, 160, .45);
}
.site-footer .footer__brand .site-logo img { width: 40px; height: auto; }
.site-footer .footer__brand .site-logo .logo-name {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(19px, 2.3vw, 24px);
  letter-spacing: .04em;
  color: var(--paper) !important;
}
/* ナビ：英字の小見出しを付けて「目次」らしく */
.site-footer .footer__nav-h {
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--peach);
}
.site-footer .footer__nav-h::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 9px;
  vertical-align: middle;
  background: var(--peach);
}
.site-footer .footer__nav a:hover { color: var(--peach) !important; }
/* CTA：RECRUIT セクションと同じ作り込みボタンへ統一（列いっぱいに） */
.site-footer .footer__cta { gap: 14px; }
.site-footer .footer__cta .cta {
  width: 100%;
  justify-content: space-between;
  min-height: 58px;
}
.site-footer .footer__cta .cta--primary {
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .45) !important;
}
.site-footer .footer__cta .cta--primary:hover {
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .45) !important;
}
/* 奥付の最下段：差し色のヘアラインで締める */
.site-footer .footer__bottom {
  border-top-color: rgba(241, 231, 209, .16) !important;
}
/* 電話ブロック：丸いガラス箱を廃止。誌面の意匠に合わせ、上のヘアライン＋
   ピーチの英字ラベル＋大きな番号のクリーンな組みに。 */
.site-footer .footer__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(241, 231, 209, .16) !important;
  border-radius: 0 !important;
}
.site-footer .footer__tel .lab {
  font-family: var(--font-en) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--peach) !important;
}
.site-footer .footer__tel .num {
  font-family: var(--font-round) !important;
  font-weight: 900 !important;
  font-size: clamp(26px, 3.6vw, 34px) !important;
  letter-spacing: .02em !important;
  line-height: 1.04 !important;
  color: var(--paper) !important;
}
.site-footer .footer__tel .person {
  font-size: 11.5px !important;
  color: #C8BEA6 !important;
}

/* ------------------------------------------------------------
   RESPONSIVE 詰め（スマホ / タブレット）
   ------------------------------------------------------------ */
/* FV：白ラベル（cover__lead）は広い画面では写真フレーム左へ意図的に食み出すが、
   中幅以下ではフレームがほぼ全幅になり文字が画面外に切れる。1024px以下で食み出しを止める。 */
@media (max-width: 1024px) {
  .cover .cover__lead { left: clamp(2px, 1.4vw, 14px) !important; }
}

/* FV：縦幅が狭いウィンドウでも最下部キャプション（稼ぎも〜ごまかさない。）まで
   ファーストビューに収める。写真フレームは 16:10 のため幅基準だと縦に大きく伸び、
   短い画面では帯下の facts／caption を画面外へ押し出す。フレーム高さをビューポート
   高さ基準で上限化し、スタック全体を圧縮して収める（スマホ全面構成は除外）。 */
@media (min-width: 601px) {
  .cover__frame {
    max-height: calc(100svh - 360px);
  }
}
@media (min-width: 601px) and (max-height: 760px) {
  .cover {
    padding-top: calc(var(--header-h) + clamp(20px, 3vw, 40px));
    padding-bottom: clamp(20px, 3vw, 36px);
  }
  .cover__stage { gap: clamp(12px, 1.6vw, 18px); }
  .cover__frame { max-height: calc(100svh - 320px); }
}

/* FV：タブレット幅では 100svh のカバー内で内容が上下中央寄せ（.cover__stage の
   margin:auto）になり、ヘッダー下に空白が空きすぎる。強制高さを内容寄りまで下げて
   余剰を圧縮し、上下の空きを詰める（中央寄せ自体は維持して絶対配置要素の整合を保つ）。 */
@media (min-width: 600px) and (max-width: 1024px) {
  .cover {
    min-height: 76svh !important;
    padding-top: calc(var(--header-h) + clamp(14px, 2vw, 24px)) !important;
    padding-bottom: clamp(36px, 6vw, 72px) !important;
  }
}

/* スマホFV：ヘッダーが暗い写真の上に重なるため、トップ（未スクロール・メニュー閉）では
   ロゴ文字とハンバーガーを白＋影にして視認性を確保する。
   ※ .cover（暗い写真FV）を持つページ限定。サブページ（紙地ヒーロー）では適用しない。
   スクロール後（紙バー）／メニュー展開時（紙パネル）は従来の濃色のまま。 */
@media (max-width: 600px) {
  body:has(.cover) .site-header:not(.is-scrolled):not(:has(.global-nav.is-open)) .site-logo,
  body:has(.cover) .site-header:not(.is-scrolled):not(:has(.global-nav.is-open)) .logo-name {
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  }
  body:has(.cover) .site-header:not(.is-scrolled) .nav-toggle[aria-expanded="false"] .bar {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  }
}

/* サブページ：全面写真の暗いキービジュアル（[data-dark-hero]）を持つページは、
   トップ（未スクロール・メニュー閉）でヘッダーを白抜きに。デスクトップのナビ文字も白へ。
   スクロール後（紙バー）／メニュー展開時（紙パネル）は従来の濃色のまま。 */
body:has([data-dark-hero]) .site-header:not(.is-scrolled):not(:has(.global-nav.is-open)) .site-logo,
body:has([data-dark-hero]) .site-header:not(.is-scrolled):not(:has(.global-nav.is-open)) .logo-name {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
body:has([data-dark-hero]) .site-header:not(.is-scrolled) .nav-toggle[aria-expanded="false"] .bar {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
@media (min-width: 992px) {
  body:has([data-dark-hero]) .site-header:not(.is-scrolled) .global-nav a:not(.btn) {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  }
}

/* FV：スマホ専用＝案C（フルブリード写真ヒーロー）。
   写真を全面に敷き、緑の対角帯を最下部に重ね、会社名・白ラベルを左上、
   大見出し＋歩く職人＋事業情報を帯の上に白で配置する。 */
@media (max-width: 600px) {
  .cover {
    display: block !important;
    min-height: 100svh;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
  }
  /* 元の対角グリーン帯（写真の背面）はフルブリードで隠れるため無効化 */
  .cover::before { display: none !important; }

  /* 写真を全面に */
  .cover__stage { position: absolute !important; inset: 0 !important; width: 100%; margin: 0 !important; display: block !important; z-index: 0; gap: 0 !important; }
  .cover__hero { position: absolute !important; inset: 0 !important; display: block !important; width: 100%; }
  .cover__rail { display: none !important; }
  .cover__frame {
    position: absolute !important; inset: 0 !important;
    width: 100%; height: 100%;
    aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important;
  }
  /* 可読性のための暗幕（上下を締める） */
  .cover__wash {
    background: linear-gradient(180deg, rgba(8,18,11,.55) 0%, rgba(8,18,11,.12) 30%, rgba(8,18,11,.30) 56%, rgba(8,18,11,.88) 100%) !important;
  }
  /* 緑の対角帯（写真の上・テキストの下）。frame内に重ねて層を確保 */
  .cover__frame::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
    background: var(--green);
    clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 100%);
    z-index: 2;
  }

  /* 会社名キッカー（左上・大きめ） */
  .cover__pre {
    position: absolute !important; top: 64px !important; left: 20px !important; right: 20px !important; bottom: auto !important;
    transform: none !important; animation: none !important;
    text-align: left; white-space: normal; margin: 0; z-index: 5;
  }
  .cover__pre-sm { display: block; font-family: var(--font-en); font-weight: 600; font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--peach); }
  .cover__pre-lg { display: block; font-family: var(--font-round); font-weight: 800; font-size: 25px; letter-spacing: .04em; color: #fff; margin-top: 3px; }

  /* 白ラベル（左端から・1枚の白箱に2行） */
  .cover__lead {
    position: absolute !important; top: 138px !important; left: 0 !important; right: auto !important; bottom: auto !important;
    transform: none !important; animation: none !important; z-index: 5;
    align-items: flex-start;
  }
  .cover__lead-tx { background: #fff; padding: 9px 16px; gap: 2px; box-shadow: 0 8px 18px rgba(20,36,24,.25); }
  .cover__lead-tx span { background: none !important; color: var(--green-deep) !important; padding: 0 !important; box-shadow: none !important; font-size: 14.5px; line-height: 1.55; }

  /* 大見出し（帯の上・白・左寄せ） */
  .cover__title {
    position: absolute !important; top: auto !important; left: 20px !important; right: 20px !important; bottom: 80px !important;
    padding: 0 !important; margin: 0; z-index: 6;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
    text-align: left; color: #fff; gap: 0;
  }
  .cover__title-a  { color: #fff; font-size: 18px; letter-spacing: .06em; }
  .cover__title-b  { justify-content: flex-start; color: #fff; font-size: 57px; line-height: .84; letter-spacing: .005em; }
  .cover__title-jp { color: #fff; margin-top: 10px; font-size: 22px; letter-spacing: .04em; line-height: 1.45; }
  .cover__title-jp .mark { color: var(--orange); }

  /* 歩く職人：HISTORYの右隣・反転（テキスト右ラインに合わせる） */
  .cover__mascot {
    display: block !important;
    position: absolute !important; top: auto !important; left: auto !important; right: 20px !important; bottom: 108px !important;
    width: 60px !important; height: auto !important;
    transform: scaleX(-1); z-index: 6;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.5));
  }

  /* 事業情報（帯の最下部・白・左寄せ／住所は非表示） */
  .cover__facts {
    position: absolute !important; top: auto !important; left: 20px !important; right: 20px !important; bottom: 34px !important;
    justify-content: flex-start; z-index: 6; gap: 3px 14px; font-size: 12px; line-height: 1.25;
  }
  .cover__facts .yr { flex: 0 0 100%; white-space: nowrap; color: var(--peach); margin-bottom: 0; }
  .cover__facts span:last-child { display: none; }

  /* 最下部キャプションはスマホでは省略（フルブリード構成のため） */
  .cover__caption { display: none !important; }
}

/* スマホFV：画面が低い機種（小型Android・SE系・ブラウザUI表示時）でも
   キャッチが写真に迫りすぎず収まるよう、見出し・帯下要素を一段縮めて余裕を持たせる。
   ※要素はすべて下端基準の絶対配置なので文字が切れることはないが、窮屈さを回避する。 */
@media (max-width: 600px) and (max-height: 700px) {
  .cover__title { bottom: 86px !important; }
  .cover__title-b { font-size: 46px !important; }
  .cover__title-jp { font-size: 18px !important; margin-top: 6px !important; }
  .cover__mascot { width: 50px !important; bottom: 108px !important; }
  .cover__facts {
    bottom: 22px !important; font-size: 10.5px !important;
    flex-wrap: nowrap !important; white-space: nowrap !important; gap: 0 10px !important;
    overflow: hidden !important;
  }
  /* 低い画面は1行圧縮：年号をインラインへ戻し、業種を主要2つに絞る */
  .cover__facts .yr { flex: none !important; margin-bottom: 0 !important; }
  .cover__facts span:nth-child(3) { display: none !important; }
}
@media (max-width: 600px) and (max-height: 600px) {
  .cover__pre-lg { font-size: 22px !important; }
  .cover__title-b { font-size: 40px !important; }
  .cover__title-jp { font-size: 17px !important; }
  .cover__title { bottom: 80px !important; }
}

/* ------------------------------------------------------------
   RECRUIT ── 案A：シネマティック・ヒーロー（全面写真＋作り込みCTA）
   旧来の左右グリッド（コピー＋写真）を、全面写真＋暗幕の一枚絵に置換。
   写真は image-slot のまま（差し替え可）。
   ------------------------------------------------------------ */
:root { --peach: #FFC9A0; }

.recruit--hero {
  position: relative;
  overflow: hidden;
  background: var(--green);
  padding-block: clamp(64px, 9vw, 120px) clamp(48px, 6vw, 84px);
}
/* 背景写真（全面） */
.recruit--hero .recruit__bg { position: absolute; inset: 0; z-index: 0; }
.recruit--hero .recruit__bg image-slot,
.recruit--hero .recruit__bg img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* 文字可読性のための暗幕（左ほど濃く／下も締める） */
.recruit--hero .recruit__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(20,40,24,.95) 0%, rgba(31,78,41,.84) 44%, rgba(31,78,41,.30) 100%),
    linear-gradient(0deg, rgba(15,28,18,.62) 0%, rgba(15,28,18,0) 48%);
}
.recruit--hero .container { position: relative; z-index: 1; }
/* 大型ステンシル透かし */
.recruit--hero .recruit__ghost {
  position: absolute; z-index: 0; margin: 0;
  top: clamp(4px, 1.6vw, 24px); right: -1.5vw;
  font-family: "Saira Stencil One", var(--font-headline); font-weight: 400;
  font-size: clamp(92px, 16vw, 220px); line-height: .8; letter-spacing: .02em;
  color: rgba(255,255,255,.07); pointer-events: none; user-select: none;
}
/* 縦組みレール */
.recruit--hero .recruit__rail {
  position: absolute; z-index: 1; left: clamp(8px, 1.4vw, 20px); top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-en); font-weight: 600; font-size: 12px;
  letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.recruit--hero .recruit__inner { position: relative; max-width: 760px; }
.recruit--hero .kicker { margin: 0; color: var(--peach); }
.recruit--hero .kicker::before { background: var(--peach); }
.recruit--hero .recruit__kj {
  margin-left: 10px; font-family: var(--font-ui); font-weight: 700;
  font-size: .9em; letter-spacing: .1em; text-transform: none; color: rgba(255,255,255,.72);
}
.recruit--hero .recruit__title {
  margin: 18px 0 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(38px, 6.4vw, 80px); line-height: 1.1; letter-spacing: .02em;
  color: #fff; text-wrap: balance;
}
.recruit--hero .recruit__title .mark { color: var(--peach); }
.recruit--hero .recruit__lead {
  margin: 22px 0 0; max-width: 30em;
  font-size: clamp(14.5px, 1.6vw, 16.5px); line-height: 1.95; color: rgba(255,255,255,.9);
}
.recruit--hero .recruit__close {
  margin: 28px 0 30px; padding-left: clamp(16px, 1.5vw, 20px);
  border-left: 3px solid var(--peach);
  font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(21px, 3vw, 34px); line-height: 1.32; letter-spacing: .02em;
  color: #fff; text-wrap: balance;
}
.recruit--hero .recruit__close .pop { color: var(--peach); }
.recruit--hero .recruit__cta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (min-width: 992px) {
  .recruit__cta .cta { width: 240px; max-width: 100%; justify-content: space-between; }
}

/* 作り込みCTA：英字小見出し＋日本語の2段ラベル＋丸い矢印バッジ。
   主CTAは印刷物風のハード影（押下で沈む）。 */
.cta {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 11px 13px 11px 26px; min-height: 62px;
  border-radius: 999px; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; position: relative;
  transition: transform .16s, background-color .2s, color .2s, box-shadow .2s, border-color .2s;
}
.cta__tx { display: flex; flex-direction: column; gap: 3px; line-height: 1.05; }
.cta__en { font-family: var(--font-en); font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }
.cta__jp { font-family: var(--font-ui); font-weight: 900; font-size: clamp(15px, 1.7vw, 17px); letter-spacing: .03em; white-space: nowrap; }
.cta__arr {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--font-headline); font-weight: 900; font-size: 19px; flex: none;
  transition: transform .2s, background-color .2s, color .2s;
}
.cta:hover .cta__arr { transform: translateX(3px); }
.cta--primary { background: var(--orange); color: #fff; box-shadow: 6px 6px 0 rgba(18,26,14,.34); }
.cta--primary .cta__en { color: #FFE2C9; }
.cta--primary .cta__arr { background: #fff; color: var(--orange); }
.cta--primary:hover { background: var(--orange-deep); transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(18,26,14,.34); }
.cta--ghost { background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.72); }
.cta--ghost .cta__en { color: var(--peach); }
.cta--ghost .cta__arr { background: rgba(255,255,255,.16); color: #fff; }
.cta--ghost:hover { background: #fff; color: var(--green-deep); border-color: #fff; }
.cta--ghost:hover .cta__en { color: var(--orange-deep); }
.cta--ghost:hover .cta__arr { background: var(--green); color: #fff; }

@media (max-width: 720px) {
  .recruit--hero .recruit__rail { display: none; }
  .recruit--hero .recruit__bg::after {
    background:
      linear-gradient(120deg, rgba(20,40,24,.92) 0%, rgba(31,78,41,.78) 60%, rgba(31,78,41,.5) 100%),
      linear-gradient(0deg, rgba(15,28,18,.6) 0%, rgba(15,28,18,0) 50%);
  }
}

/* MESSAGE：スマホでキャッチが過剰に折り返す問題の対策。
   text-wrap:balance が行箱を縮めて「なぜ「自分の歴史を創ろう」」が
   途中で割れるため、チャンク単位の改行（2行）に固定する。 */
@media (max-width: 600px) {
  .message__catch {
    font-size: 24px;
    line-height: 1.5;
    text-wrap: normal;
    margin-inline: -16px;
  }
  .message__catch .line-chunk {
    display: block;
    overflow-wrap: normal;
    word-break: keep-all;
  }
}

/* SAFETY：スマホ（<780px）で .safety__rule が2カラム（auto 1fr）のため、
   子が3つ（▶マーク・見出し・説明文）だと説明文が1カラム目に回り込み、
   auto カラムが説明文幅まで広がって見出しが20pxに潰れる。
   見出し・説明文を2カラム目に揃え、マークだけを1カラム目に置く。 */
@media (max-width: 779px) {
  .safety__rule {
    grid-template-columns: auto 1fr !important;
    column-gap: 14px !important;
  }
  .safety__rule h3,
  .safety__rule p {
    grid-column: 2 !important;
  }
}

/* OUR BUSINESS（bizshow）：スマホではピン留め内の内容（画像287px＋本文）が
   100vh に収まりきらず、はみ出しが下パディングを食ってドット下のマージンが消える。
   画像・余白・ドット間隔を圧縮して中身を収め、ドット下に余白が残るようにする。 */
@media (max-width: 600px) {
  .bizshow__pin {
    padding-top: calc(var(--header-h) + clamp(10px, 2.4vh, 22px)) !important;
    padding-bottom: clamp(22px, 3.4vh, 38px) !important;
  }
  .bizshow__media { min-height: clamp(150px, 23vh, 200px) !important; }
  .bizshow__content { padding: clamp(14px, 2vh, 22px) 20px !important; }
  .bizshow__dots { margin-top: clamp(14px, 2vh, 20px) !important; }
}

/* ===== 下層共通(service) : service.css ===== */
/* ============================================================
   SEIKEN｜業務案内 /service ── ページ専用スタイル
   トンマナ：雑誌型エディトリアル（style-v3.css の変数・パーツに準拠）
   モバイルファースト / WCAG 2.1 AA
   ============================================================ */

/* ---- パンくず（共通の小ナビ） ---- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crumbs a { color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.crumbs a:hover { color: var(--orange-deep); }
.crumbs .sep { color: var(--line); }
.crumbs [aria-current] { color: var(--ink); white-space: nowrap; }

/* ============================================================
   1. ページヒーロー
   ============================================================ */
/* タイポ・マストヘッド（写真なし・特大ステンシル「SERVICE」を主役に組む） */
.svc-hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  padding-top: calc(var(--header-h) + clamp(30px, 5.5vw, 64px));
  padding-bottom: clamp(40px, 7vw, 84px);
}
.svc-hero__inner { position: relative; z-index: 1; border-bottom: 1px solid var(--line); padding-bottom: clamp(20px, 3vw, 32px); }
/* 上辺：英字マージナリア＋ヘアラインの「奥付」風ライン */
.svc-hero__topline {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: clamp(10px, 1.4vw, 14px);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-en); font-weight: 600;
  font-size: clamp(10px, 1.1vw, 12px); letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-soft);
}
.svc-hero__topline span:not(.grow) { white-space: nowrap; }
.svc-hero__topline .grow { flex: 1; height: 1px; background: var(--line); }
/* 特大ステンシル（版ズレ・かすれの“スタンプ感”） */
.svc-hero__stencil {
  margin: clamp(10px, 1.6vw, 18px) 0 0;
  font-family: "Saira Stencil One", var(--font-headline); font-weight: 400;
  font-size: clamp(56px, 17.5vw, 210px); line-height: .82; letter-spacing: .015em;
  color: var(--ink); filter: url(#stamp-fade);
  white-space: nowrap; user-select: none;
}
.svc-hero__stencil .om { color: var(--orange); }
.svc-hero__row {
  display: grid; gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(16px, 2.4vw, 26px); align-items: end;
}
.svc-hero__title {
  margin: 10px 0 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(27px, 4.6vw, 52px); line-height: 1.2; letter-spacing: .02em;
  color: var(--ink); text-wrap: balance;
}
.svc-hero__title .mark { color: var(--orange); }
.svc-hero__lead {
  margin: clamp(14px, 2vw, 18px) 0 0; max-width: 30em;
  font-weight: 500; color: var(--ink-soft); line-height: 1.95;
}
/* 業務インデックス（取り扱う工事を一行で） */
.svc-hero__index {
  display: flex; flex-wrap: wrap; gap: 8px 0; align-items: center;
  margin-top: clamp(20px, 3vw, 32px); padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--line);
  font-family: var(--font-ui); font-weight: 800;
  font-size: clamp(14px, 1.7vw, 18px); color: var(--ink);
}
.svc-hero__index .s {
  color: var(--line); margin: 0 clamp(12px, 1.8vw, 22px);
  font-family: var(--font-round); font-weight: 900;
}
@media (min-width: 820px) { .svc-hero__row { grid-template-columns: 1.1fr .9fr; } }
@media (max-width: 600px) { .svc-hero__topline .mid { display: none; } }
/* ヒーロー写真：角カットの紙ヘアラインフレーム */
.svc-frame {
  --cut: clamp(20px, 3vw, 34px);
  position: relative;
  background: var(--line);
  padding: 1.5px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  filter: drop-shadow(0 14px 30px rgba(35, 32, 23, .16));
}
.svc-frame > image-slot,
.svc-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
/* aspect-ratio を持つメディア枠の中でフレームを全面に伸ばす（主力事業の写真で使用） */
.svc-core__media > .svc-frame { position: absolute; inset: 0; }

/* ============================================================
   2. 主力事業｜鉄骨工事（エディトリアル：写真＋本文）
   ============================================================ */
.svc-core__grid { display: grid; gap: clamp(26px, 4vw, 52px); }
/* ヒーロー直下：上余白を詰める（ヒーロー下部の余白と二重取りしない） */
.svc-core { padding-top: clamp(24px, 3.5vw, 48px); }
.svc-core__media { position: relative; aspect-ratio: 4 / 3; }
.svc-core__body { min-width: 0; }
.svc-core__title {
  margin: 12px 0 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(27px, 4.2vw, 46px);
  line-height: 1.24;
  letter-spacing: .03em;
}
.svc-core__title .mark { color: var(--orange); }
.svc-core__text {
  margin: clamp(16px, 2.2vw, 22px) 0 0;
  max-width: 34em;
  line-height: 2;
  color: var(--ink-soft);
}
.svc-core__text p { margin: 0 0 1.1em; }
.svc-core__text p:last-child { margin-bottom: 0; }
/* 抜き出しの一言 */
.svc-pull {
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 4px solid var(--orange);
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
}

@media (min-width: 768px) {
  .svc-core__grid { grid-template-columns: .92fr 1.08fr; align-items: center; }
  .svc-core__media { aspect-ratio: 1 / 1; }
}

/* ============================================================
   3. 取り扱う工事（角カットカードのグリッド）
   ============================================================ */
.svc-works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(30px, 4vw, 48px);
  align-items: start;
}
.svc-card {
  --cut: clamp(18px, 2.2vw, 24px);
  position: relative;
  background: var(--line);
  padding: 1.5px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10));
  transition: filter .25s, transform .25s;
}
.svc-card:hover { filter: drop-shadow(0 16px 30px rgba(35, 32, 23, .18)); transform: translateY(-2px); }
.svc-card__body {
  position: relative;
  height: 100%;
  background: var(--card);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 2.4vw, 24px);
  row-gap: 6px;
  align-items: center;
  align-content: start;
}
.svc-card__no {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(40px, 5.4vw, 58px);
  line-height: 1;
  color: var(--orange);
  letter-spacing: .01em;
}
.svc-card__name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.3;
  letter-spacing: .03em;
  color: var(--ink);
}
.svc-card__tag {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  padding: 0;
  background: none;
  color: var(--green);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(12px, 1.4vw, 13px);
  letter-spacing: .12em;
}
.svc-card__tag::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.svc-card__tag--main { color: var(--orange); }
.svc-card__desc {
  grid-column: 1 / -1;
  margin: clamp(14px, 1.8vw, 18px) 0 0;
  padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--line);
  font-size: clamp(13.5px, 1.5vw, 15px);
  line-height: 1.85;
  color: var(--ink-soft);
}
.svc-card__desc .name { color: var(--ink); font-weight: 700; }

@media (min-width: 640px) {
  .svc-works__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   4. 協力会社募集（グリーン帯）
   ============================================================ */
.svc-partner {
  position: relative;
  overflow: hidden;
  background: var(--olive);
  color: #fff;
}
/* 背景写真（任意・ドロップ式）＋オリーブのオーバーレイ（右濃→左薄）で白文字を担保。レイアウトは左右反転（コンテンツ右） */
.svc-partner__bg { position: absolute; inset: 0; z-index: 0; }
.svc-partner__bg image-slot,
.svc-partner__bg img { width: 100%; height: 100%; object-fit: cover; }
.svc-partner__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(255deg, rgba(52, 54, 26, .96) 0%, rgba(86, 88, 46, .88) 46%, rgba(124, 126, 69, .55) 100%),
    linear-gradient(0deg, rgba(36, 37, 16, .5) 0%, rgba(36, 37, 16, 0) 60%);
}
/* モバイルは全幅組みになるため、左右グラデではなく均一に濃いオリーブで白文字を担保 */
@media (max-width: 767px) {
  .svc-partner__scrim {
    background: linear-gradient(180deg, rgba(52, 54, 26, .9) 0%, rgba(62, 64, 32, .82) 100%);
  }
}
.svc-partner__ghost {
  position: absolute;
  left: clamp(-14px, -1vw, 0); bottom: clamp(-22px, -2vw, -10px);
  margin: 0; z-index: 1;
  font-family: "Saira Stencil One", var(--font-headline);
  font-weight: 400;
  font-size: clamp(64px, 16vw, 200px);
  line-height: .78;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .08);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.svc-partner__inner { position: relative; z-index: 2; display: grid; gap: clamp(20px, 3vw, 32px); }
.svc-partner .kicker { color: var(--peach); }
.svc-partner__title {
  margin: 12px 0 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(24px, 3.8vw, 40px);
  line-height: 1.3;
  letter-spacing: .03em;
  color: #fff;
  text-wrap: balance;
}
.svc-partner__text {
  margin: clamp(14px, 2vw, 20px) 0 0;
  max-width: 34em;
  line-height: 1.95;
  color: rgba(255, 255, 255, .9);
}
.svc-partner__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 3vw, 30px); justify-content: flex-start; }

/* このセクションのCTA：角ラベル分割（オレンジ角ラベル＋白ヘアライン枠・直線基調） */
.svc-partner__btn {
  display: inline-flex; align-items: stretch; min-height: 62px;
  border: 2px solid rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.svc-partner__btn-tag {
  display: grid; place-items: center;
  padding: 0 clamp(16px, 2vw, 22px);
  background: var(--orange); color: #fff;
  font-family: var(--font-en); font-weight: 700;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.svc-partner__btn-main {
  display: flex; align-items: center; gap: 16px;
  padding: 0 clamp(18px, 2.4vw, 26px); color: #fff;
}
.svc-partner__btn-jp {
  font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(15px, 1.7vw, 17px); letter-spacing: .03em; white-space: nowrap;
}
.svc-partner__btn-arr {
  font-family: var(--font-headline); font-weight: 900; font-size: 19px;
  color: var(--peach); transition: transform .2s;
}
.svc-partner__btn:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.svc-partner__btn:hover .svc-partner__btn-arr { transform: translateX(4px); }

@media (min-width: 768px) {
  .svc-partner__inner { grid-template-columns: 1fr min(54%, 42rem); align-items: start; }
  .svc-partner__lead, .svc-partner__cta { grid-column: 2; }
  .svc-partner__cta { justify-content: flex-start; }
}

/* ── 対のもう片側（.svc-partner--flip）：コンテンツ左・ゴースト右・写真は右に覗く ── */
.svc-partner--flip .svc-partner__ghost { left: auto; right: -10px; }
@media (min-width: 768px) {
  .svc-partner--flip .svc-partner__scrim {
    background:
      linear-gradient(105deg, rgba(52, 54, 26, .96) 0%, rgba(86, 88, 46, .88) 46%, rgba(124, 126, 69, .55) 100%),
      linear-gradient(0deg, rgba(36, 37, 16, .5) 0%, rgba(36, 37, 16, 0) 60%);
  }
  .svc-partner--flip .svc-partner__inner { grid-template-columns: min(54%, 42rem) 1fr; }
  .svc-partner--flip .svc-partner__lead,
  .svc-partner--flip .svc-partner__cta { grid-column: 1; }
}

/* ============================================================
   5. もっと詳しく（鉄骨工事とは？へのリンクカード）
   ============================================================ */
.svc-deeper__link {
  --cut: clamp(20px, 2.6vw, 30px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  margin-top: clamp(26px, 3.4vw, 40px);
  padding: clamp(26px, 3.6vw, 44px) clamp(24px, 3.4vw, 46px);
  background: var(--paper);
  border: 1.5px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  text-decoration: none;
  color: var(--ink);
  transition: background-color .25s, transform .25s;
}
.svc-deeper__link:hover { background: var(--card); transform: translateY(-2px); }
.svc-deeper__q {
  margin: 0 0 6px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}
.svc-deeper__h {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.32;
  letter-spacing: .02em;
}
.svc-deeper__sub { margin: 8px 0 0; font-size: clamp(13px, 1.5vw, 15px); color: var(--ink-soft); line-height: 1.8; }
.svc-deeper__arr {
  flex: none;
  display: grid; place-items: center;
  width: clamp(52px, 6vw, 64px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 28px);
  transition: transform .25s, background-color .25s;
}
.svc-deeper__link:hover .svc-deeper__arr { background: var(--orange-deep); transform: translateX(4px); }

/* ============================================================
   6. クロージングCTA（写真＋暗幕のシネマ帯）
   ============================================================ */
.svc-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.svc-cta__bg { position: absolute; inset: 0; z-index: 0; }
.svc-cta__bg image-slot,
.svc-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.svc-cta__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(14, 26, 80, .94) 0%, rgba(20, 36, 107, .82) 48%, rgba(20, 36, 107, .42) 100%),
    linear-gradient(0deg, rgba(10, 18, 50, .6) 0%, rgba(10, 18, 50, 0) 55%);
}
.svc-cta__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 9vw, 110px);
  display: grid;
  gap: clamp(22px, 3vw, 32px);
  justify-items: center;
  text-align: center;
}
.svc-cta .kicker { color: var(--peach); }
.svc-cta__title {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 72px);
  line-height: 1.18;
  letter-spacing: .02em;
  color: #fff;
  text-wrap: balance;
}
.svc-cta__text { margin: clamp(12px, 1.8vw, 18px) auto 0; max-width: 36em; color: rgba(255, 255, 255, .88); line-height: 1.95; }
.svc-cta__row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(8px, 1.4vw, 14px); justify-content: center; }

/* クロージングCTAのボタン：ソリッド＋丸矢印を角だけシャープに＋強めのハード影（下の分割型ボタンと差別化） */
.svc-cta .cta { border-radius: 0; width: 280px; max-width: 100%; justify-content: space-between; }
.svc-cta .cta--primary { box-shadow: 8px 8px 0 rgba(8, 14, 36, .55); }
.svc-cta .cta--primary:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 rgba(8, 14, 36, .55); }

@media (min-width: 768px) {
  .svc-cta__row { justify-content: center; }
}

/* ===== about : about.css ===== */
@charset "utf-8";
/* ============================================================
   私たちについて（/about）専用スタイル
   - service.css の svc-hero / svc-frame / svc-cta を流用しつつ、
     代表メッセージ・価値観カード・歩みタイムライン・会社概要ティーザーを追加。
   - 配色・書体はトンマナのトークンのみ使用。
   ============================================================ */

/* ---- ヒーロー英字（ABOUT 用に上書き：SERVICE より字幅が狭いので少し大きめ可） ---- */
.svc-hero__stencil.is-about { font-size: clamp(64px, 18.5vw, 230px); }

/* ============================================================
   2. 代表メッセージ
   ============================================================ */
.abt-msg { background: var(--paper); }
.abt-msg__grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 880px) {
  .abt-msg__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}
/* 左：写真＋縦組みプルクオート */
.abt-msg__media { position: relative; aspect-ratio: 4 / 5; }
.abt-msg__media > .svc-frame { position: absolute; inset: 0; }
.abt-msg__pull {
  position: absolute; top: clamp(14px, 2vw, 22px); right: clamp(10px, 1.4vw, 16px);
  margin: 0; z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-serif, "Zen Old Mincho", serif); font-weight: 600;
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1.5; letter-spacing: .14em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.abt-msg__pull .mk { color: var(--peach); }
/* 右：本文 */
.abt-msg__title {
  margin: 12px 0 0;
  font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(25px, 3.6vw, 42px); line-height: 1.28; letter-spacing: .02em;
  color: var(--ink); text-wrap: balance;
}
.abt-msg__title .mark { color: var(--orange); }
.abt-msg__text { margin: clamp(18px, 2.6vw, 26px) 0 0; }
.abt-msg__text p {
  margin: 0 0 1.1em; max-width: 38em;
  color: var(--ink-soft); font-weight: 500; line-height: 2.0;
}
.abt-msg__text p:last-child { margin-bottom: 0; }
.abt-msg__sign {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: clamp(22px, 3vw, 30px); padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid var(--line);
}
.abt-msg__sign .role { font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.abt-msg__sign .name { font-family: var(--font-ui); font-weight: 900; font-size: clamp(16px, 1.9vw, 19px); letter-spacing: .04em; color: var(--ink); }

/* ============================================================
   3. 大切にしていること（角カット3カード）
   ============================================================ */
.abt-values__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(30px, 4vw, 48px); align-items: stretch;
}
@media (min-width: 760px) { .abt-values__grid { grid-template-columns: repeat(3, 1fr); } }
/* 角カット＋紙ヘアラインの縁取り（トンマナ §4） */
.abt-vcard {
  --cut: clamp(18px, 2.4vw, 26px);
  background: var(--line); padding: 1.5px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10));
  transition: filter .2s;
}
.abt-vcard:hover { filter: drop-shadow(0 16px 30px rgba(35, 32, 23, .18)); }
.abt-vcard__body {
  height: 100%; background: var(--card);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: clamp(24px, 3vw, 34px);
  display: grid; grid-template-columns: auto 1fr; column-gap: clamp(14px, 2vw, 20px); row-gap: 6px;
  align-items: center; align-content: start;
}
.abt-vcard__no {
  grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; white-space: nowrap;
  font-family: var(--font-round); font-weight: 900; font-size: clamp(38px, 5vw, 54px); line-height: 1;
  color: var(--orange); letter-spacing: .01em;
}
.abt-vcard__en {
  grid-column: 2; grid-row: 1; align-self: end; margin: 0;
  font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.abt-vcard__name {
  grid-column: 2; grid-row: 2; align-self: start; margin: 0;
  font-family: var(--font-ui); font-weight: 900; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.3; letter-spacing: .03em; color: var(--ink);
}
.abt-vcard__desc {
  grid-column: 1 / -1; margin: clamp(14px, 1.8vw, 18px) 0 0; padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--line);
  font-size: clamp(13.5px, 1.5vw, 15px); line-height: 1.9; color: var(--ink-soft);
}
.abt-vcard__desc .em { color: var(--ink); font-weight: 700; }

/* ============================================================
   4. 歩み（ネイビー地・縦タイムライン）
   ============================================================ */
.abt-history { position: relative; overflow: hidden; }
.abt-history .sec-ghost { color: rgba(255, 255, 255, .08); }
.abt-tl { margin-top: clamp(34px, 5vw, 56px); display: grid; gap: 0; }
.abt-tl__item {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  column-gap: clamp(18px, 3vw, 32px);
  padding-bottom: clamp(26px, 4vw, 44px);
}
/* 縦のレール（マーカー列の中心を貫く） */
.abt-tl__rail { grid-column: 1; display: flex; flex-direction: column; align-items: center; }
.abt-tl__dot {
  width: 16px; height: 16px; flex: none; margin-top: 6px;
  background: var(--peach);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* 菱形 */
}
.abt-tl__line { width: 2px; flex: 1; margin-top: 8px; background: rgba(255, 201, 160, .3); }
.abt-tl__item:last-child .abt-tl__line { display: none; }
.abt-tl__item:last-child { padding-bottom: 0; }
.abt-tl__body { grid-column: 2; padding-bottom: 2px; }
.abt-tl__yr {
  margin: 0; font-family: var(--font-round); font-weight: 900;
  font-size: clamp(22px, 3vw, 30px); letter-spacing: .04em; color: var(--peach); line-height: 1;
}
.abt-tl__h {
  margin: 10px 0 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(18px, 2.2vw, 24px); line-height: 1.4; letter-spacing: .02em; color: #fff; text-wrap: balance;
}
.abt-tl__d {
  margin: 10px 0 0; max-width: 42em;
  color: rgba(255, 255, 255, .82); font-weight: 500; line-height: 1.95;
}
@media (min-width: 720px) {
  .abt-tl__item { grid-template-columns: 9rem auto 1fr; }
  .abt-tl__yr--side { grid-column: 1; text-align: right; padding-top: 0; }
  .abt-tl__rail { grid-column: 2; }
  .abt-tl__body { grid-column: 3; }
  .abt-tl__yr--inline { display: none; }
}
.abt-tl__yr--side { display: none; }
@media (min-width: 720px) { .abt-tl__yr--side { display: block; } }

/* ============================================================
   5. 会社概要ティーザー（paper-2・定義リスト＋導線）
   ============================================================ */
.abt-facts__inner { max-width: 760px; }
.abt-facts__dl {
  margin: clamp(20px, 3vw, 28px) 0 0; display: grid; gap: 0;
  border-top: 2px solid var(--ink);
}
.abt-facts__row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: clamp(10px, 2vw, 20px);
  padding: clamp(12px, 1.8vw, 16px) 0; border-bottom: 1px solid var(--line);
}
.abt-facts__row dt {
  font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
  align-self: center;
}
.abt-facts__row dd { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: clamp(14.5px, 1.6vw, 16px); color: var(--ink); line-height: 1.7; }
.abt-facts__row dd small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-soft); margin-top: 3px; letter-spacing: 0; }
/* 導線：角ラベル分割ボタン（紙地用｜オレンジ角ラベル＋インクのヘアライン枠） */
.abt-facts__btn {
  display: inline-flex; align-items: stretch; min-height: 60px;
  margin-top: clamp(22px, 3vw, 30px);
  border: 2px solid var(--ink); text-decoration: none;
  transition: background-color .2s;
}
.abt-facts__btn-tag {
  display: grid; place-items: center; padding: 0 clamp(16px, 2vw, 22px);
  background: var(--orange); color: #fff;
  font-family: var(--font-en); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.abt-facts__btn-main { display: flex; align-items: center; gap: 16px; padding: 0 clamp(18px, 2.4vw, 26px); color: var(--ink); }
.abt-facts__btn-jp { font-family: var(--font-ui); font-weight: 900; font-size: clamp(15px, 1.7vw, 17px); letter-spacing: .03em; white-space: nowrap; }
.abt-facts__btn-arr { font-family: var(--font-headline); font-weight: 900; font-size: 19px; color: var(--orange); transition: transform .2s; }
.abt-facts__btn:hover { background: rgba(35, 32, 23, .05); }
.abt-facts__btn:hover .abt-facts__btn-arr { transform: translateX(4px); }

/* ===== company : company.css ===== */
@charset "utf-8";
/* ============================================================
   会社概要（/about/company）専用スタイル
   - service.css の svc-hero / svc-cta を流用。
   - 会社概要表（定義リスト）・事業内容・アクセスを追加。
   - 配色・書体はトンマナのトークンのみ。
   ============================================================ */

.svc-hero__stencil.is-company { font-size: clamp(48px, 13.5vw, 170px); }

/* ============================================================
   会社概要表（定義リスト）
   ============================================================ */
.cmp-profile__dl {
  margin: clamp(28px, 4vw, 44px) 0 0;
  border-top: 2px solid var(--ink);
}
.cmp-profile__row {
  display: grid; grid-template-columns: 1fr; gap: 2px clamp(16px, 3vw, 36px);
  padding: clamp(16px, 2.4vw, 22px) 0; border-bottom: 1px solid var(--line);
  align-items: center;
}
@media (min-width: 640px) { .cmp-profile__row { grid-template-columns: 12rem 1fr; } }
.cmp-profile__row dt {
  margin: 0; align-self: center;
  font-family: var(--font-en); font-weight: 600; font-size: clamp(11px, 1.2vw, 12px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.cmp-profile__row dt .ja {
  display: block; margin-top: 4px;
  font-family: var(--font-ui); font-weight: 800; font-size: clamp(13px, 1.5vw, 15px);
  letter-spacing: .04em; text-transform: none; color: var(--ink);
}
.cmp-profile__row dd {
  margin: 0; font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14.5px, 1.6vw, 16px); line-height: 1.85; color: var(--ink);
}
.cmp-profile__row dd b { font-weight: 800; }
.cmp-profile__row dd small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.cmp-profile__row dd .biz {
  display: flex; flex-wrap: wrap; gap: 8px 0; align-items: center; margin: 0;
  font-weight: 700;
}
.cmp-profile__row dd .biz .s { color: var(--line); margin: 0 clamp(10px, 1.6vw, 16px); font-family: var(--font-round); font-weight: 900; }

/* ============================================================
   アクセス（Googleマップ埋め込みが主役）
   ============================================================ */
.cmp-access__head {
  display: grid; gap: clamp(16px, 2.6vw, 24px); align-items: end;
  margin-bottom: clamp(22px, 3.2vw, 34px);
}
.cmp-access__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2.4vw, 28px);
  padding-top: clamp(14px, 2vw, 18px); border-top: 1px solid var(--line);
}
.cmp-access__addr {
  margin: 0; font-style: normal;
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7; color: var(--ink);
}
.cmp-access__addr .zip {
  display: block; margin-bottom: 2px;
  font-family: var(--font-round); font-weight: 700; font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: .06em; color: var(--ink-soft);
}
.cmp-access__tel {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding-left: clamp(14px, 2.4vw, 28px); border-left: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.cmp-access__tel .lab { font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.cmp-access__tel .num { font-family: var(--font-round); font-weight: 900; font-size: clamp(22px, 3vw, 32px); letter-spacing: .02em; color: var(--ink); line-height: 1.15; white-space: nowrap; }
.cmp-access__tel .person { font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--ink-soft); }
/* 全幅のマップ埋め込み（紙ヘアライン枠） */
.cmp-access__embed {
  position: relative; width: 100%; aspect-ratio: 16 / 7;
  background: var(--card); padding: 1.5px;
  border: 1px solid var(--line);
  filter: drop-shadow(0 14px 30px rgba(35, 32, 23, .14));
}
.cmp-access__embed iframe,
.cmp-access__embed image-slot,
.cmp-access__embed img {
  display: block; width: 100%; height: 100%; border: 0; object-fit: cover;
}
@media (max-width: 640px) { .cmp-access__embed { aspect-ratio: 4 / 5; } }

/* 電話番号の注釈：求人媒体の営業電話お断り */
.cmp-access__tel .note { display:block; margin-top:6px; font-family: var(--font-ui); font-size:12px; line-height:1.6; color: var(--ink-soft); }

/* ===== faq : faq.css ===== */
/* ============================================================
   SEIKEN｜よくあるご質問 /about/faq ── ページ専用スタイル
   トンマナ：雑誌型エディトリアル（style-v3.css の変数・パーツに準拠）
   svc-hero / .section / .kicker / .sec-title / svc-cta を再利用
   アコーディオン＝ネイティブ <details>/<summary>（キーボード操作可）
   §6：同じ構造・別の差し色（採用＝orange／取引＝navy）
   ============================================================ */

.faq { padding-top: clamp(16px, 2.4vw, 32px); }

.faq-group { margin-top: clamp(28px, 3.6vw, 44px); }
.faq-group + .faq-group { margin-top: clamp(44px, 6vw, 80px); }

/* グループ見出し（角ラベル＋ラベル名） */
.faq-grouphead { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 16px); margin-bottom: clamp(18px, 2.4vw, 26px); }
.faq-grouphead__tag {
  flex: none; display: inline-grid; place-items: center;
  padding: 6px clamp(12px, 1.6vw, 16px);
  font-family: var(--font-ui); font-weight: 800;
  font-size: clamp(12px, 1.4vw, 14px); letter-spacing: .14em;
  color: #fff; background: var(--orange);
}
.faq-grouphead__en {
  font-family: var(--font-en); font-weight: 600; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}

/* アコーディオン項目 */
.faq-list { display: grid; gap: clamp(10px, 1.4vw, 14px); }
.faq-item {
  border: 1px solid var(--line); background: var(--card);
  transition: border-color .2s, box-shadow .2s;
}
.faq-item[open] { border-color: var(--orange); box-shadow: 0 8px 22px rgba(35, 32, 23, .08); }
.faq-item > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: clamp(12px, 1.8vw, 18px);
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 24px);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.faq-q-badge {
  flex: none; font-family: var(--font-round); font-weight: 900;
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1; color: var(--orange);
}
.faq-q-text {
  align-self: center;
  font-family: var(--font-ui); font-weight: 800;
  font-size: clamp(15.5px, 1.9vw, 18px); line-height: 1.5; letter-spacing: .01em; color: var(--ink);
  text-wrap: pretty;
}
/* 開閉アイコン（＋ → ×） */
.faq-toggle {
  flex: none; position: relative; width: clamp(22px, 2.6vw, 26px); height: clamp(22px, 2.6vw, 26px);
  align-self: center;
}
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--orange);
  transition: transform .25s ease;
}
.faq-toggle::before { width: 100%; height: 2px; transform: translate(-50%, -50%); }
.faq-toggle::after { width: 2px; height: 100%; transform: translate(-50%, -50%); }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item[open] .faq-toggle::before { transform: translate(-50%, -50%) rotate(180deg); }

.faq-a {
  padding: 0 clamp(16px, 2.2vw, 24px) clamp(18px, 2.4vw, 24px);
  margin-left: calc(clamp(20px, 2.6vw, 26px) + clamp(12px, 1.8vw, 18px));
}
.faq-a p {
  margin: 0; padding-top: clamp(14px, 1.8vw, 18px); border-top: 1px solid var(--line);
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14px, 1.6vw, 15.5px); line-height: 1.95; color: var(--ink-soft);
}
.faq-a p .em { color: var(--ink); font-weight: 700; }

/* ── 取引先グループ：差し色をネイビーに振り分け（同じ構造） ── */
.faq-group--biz .faq-grouphead__tag { background: var(--navy); }
.faq-group--biz .faq-q-badge { color: var(--navy); }
.faq-group--biz .faq-item[open] { border-color: var(--navy); }
.faq-group--biz .faq-item > summary:focus-visible { outline-color: var(--navy); }
.faq-group--biz .faq-toggle::before, .faq-group--biz .faq-toggle::after { background: var(--navy); }

/* ===== form : form.css ===== */
@charset "utf-8";
/* ============================================================
   お問い合わせ（/form/inquiry）・協力会社募集 = CueZilla CMSフォーム
   add.css 貼り付け用：実在クラスを上書きして見た目だけ整える。
   ★実機(enjoyworks-test17)で確認したフォームの実構造（2026-06 時点）:
     .formWrapbg > .formWrap > section#formSec.form > .sectionInner > .formBox
       > (dt > label > span.req[必須]) + (dd > input/textarea)
     送信ボタン = input.wpcf7-submit（Contact Form 7系）／プライバシー = .privacypolicy*
   ※受領モックや 70_実セレクタ参考 の parts213_form_wrap / dl / .required / .contact_submit
     とは別skin。当サイトは上記セマンティッククラス（番号非依存）で記述する。
   ・フォームは装飾枠なしのフラット設計（囲みカード/塗り/角丸/影/色帯/区切り罫を足さない）。
   ・静的部分（下層ヘッダー/フッター）はサイト共通CSSで装飾。
   ============================================================ */

/* === add.css 貼り付け ここから（お問い合わせ parts213 / 導入文 parts210）=== */

/* 導入文（parts210系・フォーム上） */
.parts210_section_content { background: #F1E7D1 !important; padding-block: clamp(30px, 5vw, 52px) clamp(8px, 2vw, 16px) !important; }
.parts210_content_wrap { width: min(100% - 36px, 720px) !important; margin-inline: auto !important; }
.parts210_content {
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 500 !important;
  font-size: clamp(14.5px, 1.7vw, 16px) !important; line-height: 1.95 !important; color: #5C5544 !important;
}

/* フォーム本体（CueZilla 実スキン：.formWrapbg/.formWrap/#formSec.form/.sectionInner/.formBox）：フラット */
.formWrapbg, section#formSec.form { background: #F1E7D1 !important; }
section#formSec.form { padding-block: clamp(20px, 3vw, 32px) clamp(48px, 7vw, 88px) !important; }
.formWrap { width: min(100% - 36px, 720px) !important; margin-inline: auto !important; }
#formSec .sectionInner { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; }

/* 各項目（.formBox 内の dt=ラベル / dd=入力）：区切り罫や囲みを足さずシンプルに縦並び */
.formBox { display: block !important; }
.formBox dt {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 0 8px !important; padding: 0 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 800 !important;
  font-size: clamp(14px, 1.6vw, 16px) !important; letter-spacing: .03em !important; color: #232017 !important;
}
.formBox dt label { margin: 0 !important; font-weight: inherit !important; color: inherit !important; }
.formBox dd { margin: 0 0 clamp(22px, 3vw, 30px) !important; padding: 0 !important; }

/* 必須バッジ（.req） */
.formBox .req {
  display: inline-block !important; background: #E0552E !important; color: #fff !important;
  border-radius: 0 !important; padding: 2px 9px !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 700 !important;
  font-size: 11px !important; letter-spacing: .08em !important; line-height: 1.6 !important;
}

/* 入力欄（フラット・角丸なし・ヘアライン）。当サイトは email/tel も type=text のため type を限定しない */
.formBox input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.formBox textarea {
  width: 100% !important; box-sizing: border-box !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 500 !important;
  font-size: 16px !important; color: #232017 !important;
  background: #FBF6EA !important; border: 1px solid #D8C9A8 !important; border-radius: 0 !important;
  padding: 12px 14px !important; line-height: 1.6 !important;
  transition: border-color .15s, box-shadow .15s;
}
.formBox textarea { min-height: 200px !important; resize: vertical !important; }
.formBox input::placeholder, .formBox textarea::placeholder { color: #A89C81 !important; }
.formBox input:focus, .formBox textarea:focus {
  outline: none !important; border-color: #E0552E !important; box-shadow: 0 0 0 3px rgba(224, 85, 46, .15) !important;
}

/* チェックボックス／ラジオ群（項目選択がある場合の保険） */
.formBox dd label:has(input[type="checkbox"]), .formBox dd label:has(input[type="radio"]) {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  margin: 0 18px 8px 0 !important; cursor: pointer !important; font-weight: 600 !important; font-size: 15px !important;
}
.formBox input[type="checkbox"], .formBox input[type="radio"] { width: 18px !important; height: 18px !important; accent-color: #E0552E !important; flex: none !important; }

/* エラー表示（CueZilla の .error と Contact Form 7 の検証メッセージ両対応） */
.formBox .error, .formBox .wpcf7-not-valid-tip, .wpcf7-response-output {
  margin: 6px 0 0 !important; font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 600 !important;
  font-size: 12.5px !important; color: #BE3F1E !important;
}

/* 送信／確認ボタン（input.wpcf7-submit）：控えめ・直線基調。テーマ(Bootstrap) .btn を上書き */
.formBox .wpcf7-submit, .formBox input[type="submit"], .formBox button[type="submit"] {
  display: inline-block !important; width: auto !important; cursor: pointer !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 800 !important;
  font-size: 16px !important; letter-spacing: .08em !important;
  color: #232017 !important; background: transparent !important;
  border: 2px solid #232017 !important; border-radius: 0 !important;
  padding: 14px 44px !important; margin-top: clamp(8px, 2vw, 16px) !important;
  transition: background-color .2s, color .2s;
}
.formBox .wpcf7-submit:hover, .formBox input[type="submit"]:hover, .formBox button[type="submit"]:hover {
  background: #E0552E !important; border-color: #E0552E !important; color: #fff !important;
}

/* プライバシーポリシー（フォーム下・.formWrapbg 内） */
.privacypolicy { width: min(100% - 36px, 720px) !important; margin-inline: auto !important; margin-top: clamp(40px, 6vw, 64px) !important; padding-bottom: clamp(40px, 7vw, 80px) !important; }
.privacypolicyTitle {
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 800 !important;
  font-size: clamp(15px, 1.8vw, 18px) !important; color: #232017 !important; margin-bottom: 10px !important;
}
.privacypolicyContent {
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-size: 13px !important; line-height: 1.9 !important; color: #5C5544 !important;
  background: #FBF6EA !important; border: 1px solid #D8C9A8 !important; padding: 16px 18px !important; max-height: 220px !important; overflow: auto !important;
}
/* === add.css 貼り付け ここまで === */

/* ===== member : member.css ===== */
/* ============================================================
   SEIKEN｜職人紹介 /recruit/member ── ページ専用スタイル
   トンマナ：雑誌型エディトリアル（style-v3.css の変数・パーツに準拠）
   svc-hero / .section / .kicker / .sec-title / svc-frame / svc-cta を再利用
   ============================================================ */

/* ============================================================
   1. 代表メッセージ（写真＋大きな引用）
   ============================================================ */
.mbr-msg__grid { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; }
@media (min-width: 860px) { .mbr-msg__grid { grid-template-columns: .82fr 1.18fr; } }
.mbr-msg__media { position: relative; aspect-ratio: 4 / 5; }
.mbr-msg__media > .svc-frame { position: absolute; inset: 0; }
.mbr-msg__body { min-width: 0; }
.mbr-msg__quote {
  margin: clamp(12px, 1.8vw, 18px) 0 0;
  font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(24px, 3.6vw, 38px); line-height: 1.5; letter-spacing: .01em; color: var(--ink);
  text-wrap: balance;
}
.mbr-msg__quote .mark { color: var(--orange); }
.mbr-msg__lead {
  margin: clamp(18px, 2.4vw, 26px) 0 0; max-width: 36em;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14.5px, 1.7vw, 16px); line-height: 2; color: var(--ink-soft);
}
.mbr-msg__sign {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: clamp(20px, 2.6vw, 28px) 0 0; padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--line);
}
.mbr-msg__sign .role {
  font-family: var(--font-en); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--orange); white-space: nowrap;
}
.mbr-msg__sign .name { font-family: var(--font-ui); font-weight: 800; font-size: clamp(15px, 1.7vw, 17px); color: var(--ink); }

/* ============================================================
   2. 社員インタビュー（角カットの紙ヘアラインカード）
   ============================================================ */
.mbr-list {
  display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(30px, 4vw, 48px);
}
@media (min-width: 680px) { .mbr-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mbr-list { grid-template-columns: repeat(3, 1fr); } }
.mbr-card {
  --cut: clamp(18px, 2.2vw, 24px);
  position: relative; background: var(--line); padding: 1.5px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10));
  transition: filter .25s, transform .25s;
}
.mbr-card:hover { filter: drop-shadow(0 16px 30px rgba(35, 32, 23, .18)); transform: translateY(-2px); }
.mbr-card__body {
  height: 100%; background: var(--card);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  display: flex; flex-direction: column;
}
.mbr-card__photo {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.mbr-card__photo image-slot { display: block; width: 100%; height: 100%; }
.mbr-card__inner { padding: clamp(20px, 2.6vw, 28px); display: flex; flex-direction: column; flex: 1; }
.mbr-card__role {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-family: var(--font-en); font-weight: 600; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--orange);
}
.mbr-card__role .yr {
  font-family: var(--font-ui); font-weight: 800; font-size: 12.5px;
  letter-spacing: .04em; text-transform: none; color: var(--ink-soft);
}
.mbr-card__role .yr::before { content: ""; display: inline-block; width: 14px; height: 2px; background: var(--line); margin-right: 9px; vertical-align: middle; }
.mbr-card__name {
  margin: clamp(10px, 1.4vw, 13px) 0 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(20px, 2.4vw, 25px); line-height: 1.3; letter-spacing: .02em; color: var(--ink);
}
.mbr-card__name .sfx { font-size: .62em; font-weight: 700; color: var(--ink-soft); margin-left: 4px; }
.mbr-card__quote {
  margin: clamp(12px, 1.6vw, 16px) 0 0; padding-left: 14px;
  border-left: 3px solid var(--orange);
  font-family: var(--font-ui); font-weight: 800; font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.6; letter-spacing: .01em; color: var(--ink); text-wrap: balance;
}
.mbr-card__bio {
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  font-size: clamp(13.5px, 1.5vw, 14.5px); line-height: 1.85; color: var(--ink-soft);
}
.mbr-list__note {
  margin: clamp(20px, 2.8vw, 30px) 0 0;
  font-size: clamp(12.5px, 1.4vw, 13.5px); line-height: 1.7; color: var(--ink-soft);
}

/* ============================================================
   3. 続けられる理由（紙地・中央エディトリアル）
   ============================================================ */
.mbr-stay { position: relative; overflow: hidden; background: var(--paper); }
.mbr-stay__inner {
  position: relative; z-index: 1; display: grid; justify-items: center;
  text-align: center; gap: clamp(16px, 2.2vw, 24px);
}
.mbr-stay .kicker { justify-content: center; }
.mbr-stay__big {
  margin: 4px 0 0; max-width: 20em;
  font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(30px, 5.2vw, 60px); line-height: 1.24; letter-spacing: .02em;
  color: var(--ink); text-wrap: balance;
}
.mbr-stay__big .mark { color: var(--orange); }
.mbr-stay__d {
  margin: clamp(6px, 1.2vw, 12px) 0 0; max-width: 36em;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14.5px, 1.7vw, 16px); line-height: 1.95; color: var(--ink-soft);
}

/* ============================================================
   2-2. 社内の様子（安全周知会｜動画＋写真グリッド）
   ============================================================ */
.mbr-inside { background: var(--card); }
.mbr-inside__lead {
  margin: clamp(18px, 2.4vw, 26px) auto 0; max-width: 46em;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14.5px, 1.7vw, 16px); line-height: 2; color: var(--ink-soft);
}
.mbr-inside__grid {
  display: grid; gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(26px, 3.6vw, 42px);
}
@media (min-width: 860px) { .mbr-inside__grid { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.mbr-inside__feature { margin: 0; }
.mbr-inside__video {
  display: block; width: 100%; aspect-ratio: 3 / 4; max-height: 72vh;
  object-fit: cover; background: #14110c;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
@media (min-width: 860px) { .mbr-inside__video { aspect-ratio: 4 / 3; } }
.mbr-inside__feature figcaption,
.mbr-inside__thumbs figcaption {
  margin-top: 10px; font-family: var(--font-ui); font-weight: 700;
  font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft);
}
.mbr-inside__thumbs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 18px);
}
.mbr-inside__ph {
  margin: 0; position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.mbr-inside__ph image-slot { display: block; width: 100%; height: 100%; }

/* ===== partner : partner.css ===== */
@charset "utf-8";
/* ============================================================
   協力会社募集（応募フォーム）= Cuezilla parts219系（添付欄なし）
   add.css 貼り付け用：実在クラスを上書きして見た目だけ整える。
   ・フォームは装飾枠なしのフラット設計。
   ・履歴書/職務経歴書の添付欄（dl.attach/attach2）は出さない（協力会社募集のため）。
   ============================================================ */

/* === add.css 貼り付け ここから（協力会社募集 parts219）=== */

/* 導入文（parts210系・フォーム上） */
.parts210_section_content { background: #F1E7D1 !important; padding-block: clamp(30px, 5vw, 52px) clamp(8px, 2vw, 16px) !important; }
.parts210_content_wrap { width: min(100% - 36px, 720px) !important; margin-inline: auto !important; }
.parts210_content {
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 500 !important;
  font-size: clamp(14.5px, 1.7vw, 16px) !important; line-height: 1.95 !important; color: #5C5544 !important;
}

/* フォーム本体（contact_section＝parts219）：フラット */
.contact_section { background: #F1E7D1 !important; padding-block: clamp(20px, 3vw, 32px) clamp(48px, 7vw, 88px) !important; }
.parts219_section_form { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.parts219_form_wrap { width: min(100% - 36px, 720px) !important; margin-inline: auto !important; }
.parts219_form_wrap form { display: block !important; }

/* 各項目（dl）：区切り罫や囲みを足さずシンプルに縦並び */
.parts219_form_wrap dl {
  display: grid !important; gap: 8px !important; margin: 0 0 clamp(22px, 3vw, 30px) !important; padding: 0 !important; border: 0 !important;
}
.parts219_form_wrap dt {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 800 !important;
  font-size: clamp(14px, 1.6vw, 16px) !important; letter-spacing: .03em !important; color: #232017 !important;
}
.parts219_form_wrap dd { margin: 0 !important; }

/* 必須バッジ */
.parts219_form_wrap .required {
  display: inline-block !important; background: #E0552E !important; color: #fff !important;
  border-radius: 0 !important; padding: 2px 9px !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 700 !important;
  font-size: 11px !important; letter-spacing: .08em !important; line-height: 1.6 !important;
}
/* 注記（赤字・小） */
.parts219_form_wrap .attention {
  display: block !important; margin-top: 4px !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 500 !important;
  font-size: 12px !important; line-height: 1.7 !important; color: #BE3F1E !important; letter-spacing: 0 !important;
}

/* 入力欄（フラット・角丸なし・ヘアライン） */
.parts219_form_wrap input[type="text"],
.parts219_form_wrap input[type="email"],
.parts219_form_wrap input[type="tel"],
.parts219_form_wrap textarea {
  width: 100% !important; box-sizing: border-box !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 500 !important;
  font-size: 16px !important; color: #232017 !important;
  background: #FBF6EA !important; border: 1px solid #D8C9A8 !important; border-radius: 0 !important;
  padding: 12px 14px !important; line-height: 1.6 !important;
  transition: border-color .15s, box-shadow .15s;
}
.parts219_form_wrap textarea { min-height: 180px !important; resize: vertical !important; }
.parts219_form_wrap input::placeholder,
.parts219_form_wrap textarea::placeholder { color: #A89C81 !important; }
.parts219_form_wrap input:focus,
.parts219_form_wrap textarea:focus {
  outline: none !important; border-color: #E0552E !important; box-shadow: 0 0 0 3px rgba(224, 85, 46, .15) !important;
}

/* 住所行（〒＋郵便番号＋住所） */
.parts219_form_wrap .form_address dd { display: grid !important; gap: 10px !important; }
.parts219_form_wrap .form_address .zip { max-width: 220px !important; }

/* エラー表示 */
.parts219_form_wrap .error {
  margin: 6px 0 0 !important; font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 600 !important;
  font-size: 12.5px !important; color: #BE3F1E !important;
}

/* 送信ボタン（控えめ・直線基調） */
.parts219_form_wrap .contact_submit { margin-top: clamp(8px, 2vw, 16px) !important; }
.parts219_form_wrap .contact_submit input[type="submit"] {
  display: inline-block !important; cursor: pointer !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 800 !important;
  font-size: 16px !important; letter-spacing: .08em !important;
  color: #232017 !important; background: transparent !important;
  border: 2px solid #232017 !important; border-radius: 0 !important;
  padding: 14px 44px !important; transition: background-color .2s, color .2s;
}
.parts219_form_wrap .contact_submit input[type="submit"]:hover { background: #E0552E !important; border-color: #E0552E !important; color: #fff !important; }
/* === add.css 貼り付け ここまで === */

/* ===== privacy : privacy.css ===== */
@charset "utf-8";
/* ============================================================
   プライバシーポリシー（/privacy）専用スタイル
   - service.css の svc-hero を流用。長文を読みやすく組む誌面型ドキュメント。
   - 配色・書体はトンマナのトークンのみ。
   ============================================================ */

.svc-hero__stencil.is-privacy { font-size: clamp(40px, 11vw, 140px); }

.pp-doc { background: var(--paper); }
.pp-doc__inner { width: min(100% - 36px, 760px); margin-inline: auto; }

/* リード */
.pp-lead {
  margin: 0 0 clamp(30px, 5vw, 52px);
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14.5px, 1.7vw, 16px); line-height: 2.0; color: var(--ink-soft);
}

/* 条項 */
.pp-art { margin: 0 0 clamp(30px, 4.5vw, 48px); }
.pp-art:last-of-type { margin-bottom: 0; }
.pp-art__h {
  display: flex; align-items: baseline; gap: clamp(10px, 1.6vw, 16px);
  margin: 0 0 clamp(12px, 1.8vw, 18px); padding-bottom: clamp(10px, 1.4vw, 14px);
  border-bottom: 1px solid var(--line);
}
.pp-art__no {
  flex: none; white-space: nowrap; font-family: var(--font-round); font-weight: 900;
  font-size: clamp(18px, 2.2vw, 24px); line-height: 1; color: var(--orange); letter-spacing: .02em;
}
.pp-art__t {
  margin: 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(17px, 2.1vw, 22px); line-height: 1.4; letter-spacing: .02em; color: var(--ink); text-wrap: balance;
}
.pp-art__b { font-family: var(--font-ui); font-weight: 500; }
.pp-art__b p { margin: 0 0 1em; line-height: 2.0; color: var(--ink-soft); }
.pp-art__b p:last-child { margin-bottom: 0; }
.pp-art__b ol,
.pp-art__b ul { margin: .4em 0 1em; padding-left: 1.4em; }
.pp-art__b li { margin: 0 0 .5em; line-height: 1.95; color: var(--ink-soft); }
.pp-art__b li:last-child { margin-bottom: 0; }

/* 制定日・事業者表記 */
.pp-meta {
  margin: clamp(36px, 5vw, 60px) 0 0; padding-top: clamp(20px, 3vw, 28px);
  border-top: 2px solid var(--ink);
  font-family: var(--font-ui); font-weight: 500; font-size: clamp(13px, 1.5vw, 14.5px);
  line-height: 1.9; color: var(--ink-soft);
}
.pp-meta b { display: block; margin-top: 8px; font-weight: 800; color: var(--ink); }
.pp-meta .date { font-family: var(--font-round); font-weight: 700; letter-spacing: .04em; }

/* ===== reason : reason.css ===== */
@charset "utf-8";
/* ============================================================
   選ばれる理由（/reason）専用スタイル
   - service.css の svc-hero / svc-frame / svc-cta を流用。
   - 4つの理由を写真＋本文の左右交互エディトリアルで展開。
   - 配色・書体はトンマナのトークンのみ。
   ============================================================ */

/* ヒーロー英字（REASON） */
.svc-hero__stencil.is-reason { font-size: clamp(58px, 16vw, 196px); }

/* ============================================================
   理由インデックス（ヒーロー直下の導入：4つの理由を一覧）
   ============================================================ */
.rsn-intro { padding-top: clamp(24px, 3.5vw, 48px); padding-bottom: 0; }
.rsn-intro__lead {
  margin: clamp(18px, 2.6vw, 28px) 0 0; max-width: 40em;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px); line-height: 1.7; letter-spacing: .02em; color: var(--ink); text-wrap: balance;
}
.rsn-intro__lead .mark { color: var(--orange); }

/* ============================================================
   理由ブロック（写真＋本文・左右交互）
   ============================================================ */
.rsn-item { position: relative; overflow: hidden; }
.rsn-item--paper2 { background: var(--paper-2); }
/* 特大ゴースト番号 */
.rsn-item__ghost {
  position: absolute; top: clamp(-18px, -1.6vw, -8px); right: clamp(-8px, -0.6vw, 0);
  margin: 0; z-index: 0;
  font-family: var(--font-round); font-weight: 900;
  font-size: clamp(120px, 22vw, 300px); line-height: .8; letter-spacing: -.01em;
  color: rgba(224, 85, 46, .07); pointer-events: none; user-select: none;
}
.rsn-item__grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(26px, 4vw, 56px); align-items: center;
}
@media (min-width: 880px) {
  .rsn-item__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* 偶数（--flip）は写真を右へ */
  .rsn-item--flip .rsn-item__media { order: 2; }
}
/* 写真 */
.rsn-item__media { position: relative; aspect-ratio: 4 / 3; }
.rsn-item__media > .svc-frame { position: absolute; inset: 0; }
/* 本文 */
.rsn-item__body { min-width: 0; }
.rsn-item__no {
  margin: 0; font-family: var(--font-round); font-weight: 900;
  font-size: clamp(40px, 5.2vw, 60px); line-height: 1; letter-spacing: .02em; color: var(--orange);
}
.rsn-item__eyebrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0;
  font-family: var(--font-en); font-weight: 600; font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.rsn-item__eyebrow > span:first-child { white-space: nowrap; }
.rsn-item__eyebrow .kw {
  font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: none; color: var(--orange);
  padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap;
}
.rsn-item__title {
  margin: 12px 0 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(26px, 4vw, 46px); line-height: 1.22; letter-spacing: .02em; color: var(--ink); text-wrap: balance;
}
.rsn-item__title .mark { color: var(--orange); }
.rsn-item__text {
  margin: clamp(16px, 2.2vw, 22px) 0 0; max-width: 34em;
  color: var(--ink-soft); font-weight: 500; line-height: 2;
}
.rsn-item__text p { margin: 0 0 1.1em; }
.rsn-item__text p:last-child { margin-bottom: 0; }
/* 数値プルーフ（誌面的な統計表示・ボタンと見間違えないよう箱は使わない） */
.rsn-item__proof {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin: clamp(20px, 2.8vw, 28px) 0 0; padding: clamp(12px, 1.6vw, 16px) 0 0;
  border-top: 1px solid var(--line);
}
.rsn-item__proof b {
  font-family: var(--font-round); font-weight: 900; font-size: clamp(34px, 5vw, 52px); line-height: .9; color: var(--orange); letter-spacing: .01em;
}
.rsn-item__proof span {
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(12.5px, 1.5vw, 14px); letter-spacing: .04em; color: var(--ink-soft);
}

/* ===== safety : safety.css ===== */
/* ============================================================
   SEIKEN｜安全への取り組み /service/safety ── ページ専用スタイル
   トンマナ：雑誌型エディトリアル（style-v3.css の変数・パーツに準拠）
   モバイルファースト / WCAG 2.1 AA
   svc-hero / .section / .kicker / .sec-title / svc-cta は共通パーツを再利用
   ============================================================ */

/* ============================================================
   1. リード（現場写真フルブリード＋スクリム｜鉄骨詳細の案Eと家族）
   ============================================================ */
.saf-intro {
  position: relative; padding-top: 0;
  min-height: clamp(420px, 64vh, 620px); display: grid; overflow: hidden;
}
.saf-intro__bg { position: absolute; inset: 0; z-index: 0; }
.saf-intro__bg image-slot { display: block; width: 100%; height: 100%; }
.saf-intro__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,18,12,.14) 0%, rgba(20,18,12,.52) 56%, rgba(20,18,12,.85) 100%);
}
.saf-intro__rail {
  position: absolute; top: clamp(14px,2vw,20px); right: clamp(12px,1.6vw,16px); z-index: 2;
  writing-mode: vertical-rl; font-family: var(--font-en); font-weight: 600;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.saf-intro__over {
  position: relative; z-index: 2; align-self: end;
  padding-top: clamp(56px,11vh,110px); padding-bottom: clamp(28px,4vw,48px);
}
.saf-intro .kicker { color: var(--peach); }
.saf-intro__h {
  margin: 10px 0 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(26px,4.4vw,48px); line-height: 1.24; letter-spacing: .02em;
  color: #fff; text-wrap: balance; max-width: 24em;
}
.saf-intro__h .mark { color: var(--peach); }
.saf-intro__lead {
  margin: clamp(14px,2vw,20px) 0 0; max-width: 36em;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14.5px,1.7vw,16px); line-height: 1.95; color: rgba(255,255,255,.86);
}
.saf-intro__lead .lead-lg {
  display: block; margin-bottom: .5em; font-weight: 800; color: #fff;
  font-size: clamp(16px,2vw,20px); line-height: 1.6;
}

/* ============================================================
   2. 現場の鉄則（角カットの紙ヘアラインカード × 3）
   ============================================================ */
.saf-rules {
  display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 26px);
  margin-top: clamp(30px, 4vw, 48px);
}
@media (min-width: 760px) { .saf-rules { grid-template-columns: repeat(3, 1fr); } }
.saf-rule {
  --cut: clamp(18px, 2.2vw, 24px);
  position: relative; background: var(--line); padding: 1.5px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10));
  transition: filter .25s, transform .25s;
}
.saf-rule:hover { filter: drop-shadow(0 16px 30px rgba(35, 32, 23, .18)); transform: translateY(-2px); }
.saf-rule__body {
  height: 100%; background: var(--card);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: clamp(24px, 3vw, 32px);
}
.saf-rule__idx {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-en); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--orange);
}
.saf-rule__idx::before {
  content: ""; width: 9px; height: 9px; background: var(--orange); transform: rotate(45deg);
}
.saf-rule__h {
  margin: clamp(14px, 1.8vw, 18px) 0 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(20px, 2.4vw, 25px); line-height: 1.4; letter-spacing: .02em;
  color: var(--ink); text-wrap: balance; min-height: 2.8em;
}
.saf-rule__d {
  margin: 10px 0 0; font-size: clamp(13.5px, 1.5vw, 15px);
  line-height: 1.85; color: var(--ink-soft);
}

/* ============================================================
   3. 無事故の実績（ネイビー帯・中央マニフェスト）
   ============================================================ */
.saf-proof { position: relative; overflow: hidden; }
.saf-proof .sec-ghost { color: rgba(255, 255, 255, .08); }
.saf-proof__inner {
  position: relative; z-index: 1; display: grid; justify-items: center;
  text-align: center; gap: clamp(16px, 2.2vw, 24px);
}
.saf-proof .kicker { color: var(--peach); justify-content: center; }
.saf-proof__big {
  margin: 4px 0 0; max-width: 18em;
  font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(30px, 5.2vw, 60px); line-height: 1.24; letter-spacing: .02em;
  color: #fff; text-wrap: balance;
}
.saf-proof__big .mark { color: var(--peach); }
.saf-proof__d {
  margin: clamp(6px, 1.2vw, 12px) 0 0; max-width: 34em;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14.5px, 1.7vw, 16px); line-height: 1.95; color: rgba(255, 255, 255, .86);
}

/* ============================================================
   4. なぜ徹底するのか（エディトリアル：見出し左／引用＋本文右）
   ============================================================ */
.saf-why__grid { display: grid; gap: clamp(22px, 3.4vw, 44px); align-items: start; margin-top: clamp(28px, 4vw, 50px); }
@media (min-width: 860px) { .saf-why__grid { grid-template-columns: .9fr 1.1fr; } }
.saf-why__pull {
  margin: 0; padding-left: clamp(18px, 2.2vw, 26px);
  border-left: 4px solid var(--orange);
  font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(23px, 3.4vw, 34px); line-height: 1.5; letter-spacing: .01em; color: var(--ink);
  text-indent: -.62em;
}
.saf-why__pull .line-chunk { text-indent: 0; }
.saf-why__pull .mark { color: var(--orange); }
.saf-why__text {
  margin: 0; max-width: 38em;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14.5px, 1.7vw, 16px); line-height: 2; color: var(--ink-soft);
}
.saf-why__text p { margin: 0 0 1.1em; }
.saf-why__text p:last-child { margin-bottom: 0; }

/* ===== steel : steel.css ===== */
@charset "utf-8";
/* ============================================================
   鉄骨工事詳細（/service/steel）専用スタイル
   - service.css の svc-hero / svc-cta を流用。
   - 守備範囲の対比・工程ステップ・対応できる現場を追加。
   - 配色・書体はトンマナのトークンのみ。
   ============================================================ */

.svc-hero__stencil.is-steel { font-size: clamp(58px, 16vw, 200px); }

/* リード（ヒーロー直下：太罫を持たず、上余白を詰めてヒーローに連続させる） */
.stl-intro { padding-top: clamp(26px, 4vw, 46px); }
.stl-intro__inner {
  display: grid; gap: clamp(18px, 3vw, 44px); align-items: start;
}
@media (min-width: 860px) { .stl-intro__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.stl-intro__head { position: relative; }
.stl-intro__rail {
  display: none; position: absolute; top: 2px; right: clamp(18px, 2.4vw, 30px);
  writing-mode: vertical-rl; font-family: var(--font-en); font-weight: 600;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft);
}
@media (min-width: 860px) { .stl-intro__rail { display: block; } }
.stl-intro__title {
  margin: 12px 0 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(23px, 3.1vw, 36px); line-height: 1.3; letter-spacing: .02em; color: var(--ink); text-wrap: balance;
}
.stl-intro__title .mark { color: var(--orange); }
.stl-intro__lead {
  margin: 0; max-width: 34em;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(15px, 1.7vw, 17px); line-height: 2.05; color: var(--ink-soft);
}
.stl-intro__lead .mark { color: var(--ink); font-weight: 700; }
.stl-intro__lead .lead-lg {
  display: block; margin-bottom: .7em;
  font-weight: 900; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.55; color: var(--ink); letter-spacing: .01em;
}

/* ============================================================
   リード（案E：フルブリード写真＋スクリム＋テキストオーバーレイ）
   ============================================================ */
.stl-intro--photo {
  position: relative; padding-top: 0;
  min-height: clamp(440px, 68vh, 660px); display: grid; overflow: hidden;
}
.stl-intro__bg { position: absolute; inset: 0; z-index: 0; }
.stl-intro__bg image-slot { display: block; width: 100%; height: 100%; }
.stl-intro__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,18,12,.12) 0%, rgba(20,18,12,.5) 56%, rgba(20,18,12,.84) 100%);
}
.stl-intro__photorail {
  position: absolute; top: clamp(14px,2vw,20px); right: clamp(12px,1.6vw,16px); z-index: 2;
  writing-mode: vertical-rl; font-family: var(--font-en); font-weight: 600;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.stl-intro__over {
  position: relative; z-index: 2; align-self: end;
  padding-top: clamp(60px,12vh,120px); padding-bottom: clamp(28px,4vw,48px);
}
.stl-intro--photo .kicker { color: var(--peach); }
.stl-intro__h {
  margin: 10px 0 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(28px,5vw,54px); line-height: 1.22; letter-spacing: .02em;
  color: #fff; text-wrap: balance; max-width: 16em;
}
.stl-intro__h .mark { color: var(--peach); }
.stl-intro__overlead {
  margin: clamp(14px,2vw,20px) 0 0; max-width: 34em;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(14.5px,1.7vw,16px); line-height: 1.95; color: rgba(255,255,255,.86);
}
.stl-intro__overlead .lead-lg {
  display: block; margin-bottom: .5em; font-weight: 800; color: #fff;
  font-size: clamp(16px,2vw,20px); line-height: 1.6;
}

/* ============================================================
   守備範囲：担うこと／担わないこと（正規カードの対・差し色で区別）
   ============================================================ */
.stl-scope__grid { display: grid; gap: clamp(18px, 2.6vw, 28px); margin-top: clamp(30px, 4vw, 48px); align-items: stretch; }
@media (min-width: 760px) { .stl-scope__grid { grid-template-columns: 1fr 1fr; } }
/* 角カット＋紙ヘアラインの縁取り（トンマナ§4・二層） */
.stl-scope__col {
  --cut: clamp(18px, 2.4vw, 26px);
  background: var(--line); padding: 1.5px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10));
}
.stl-scope__body {
  height: 100%; background: var(--card);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: clamp(26px, 3.4vw, 38px);
}
.stl-scope__col--dont .stl-scope__body { background: var(--card); }
/* 見出し帯：大きな番号＋EN＋ラベル */
.stl-scope__top { display: flex; align-items: baseline; gap: clamp(12px, 1.8vw, 16px); margin: 0 0 clamp(16px, 2.2vw, 20px); padding-bottom: clamp(12px, 1.6vw, 16px); border-bottom: 1px solid var(--line); }
.stl-scope__idx { flex: none; white-space: nowrap; font-family: var(--font-round); font-weight: 900; font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: .02em; }
.stl-scope__col--do .stl-scope__idx { color: var(--orange); }
.stl-scope__col--dont .stl-scope__idx { color: var(--navy); }
.stl-scope__lab { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.stl-scope__lab .en { font-family: var(--font-en); font-weight: 600; font-size: clamp(11px, 1.3vw, 12px); letter-spacing: .2em; text-transform: uppercase; }
.stl-scope__col--do .stl-scope__lab .en { color: var(--orange); }
.stl-scope__col--dont .stl-scope__lab .en { color: var(--navy); }
.stl-scope__h {
  margin: 0 0 clamp(14px, 2vw, 18px); font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(17px, 2.1vw, 22px); line-height: 1.35; letter-spacing: .02em; color: var(--ink); text-wrap: balance;
}
.stl-scope__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(10px, 1.4vw, 13px); }
.stl-scope__list li {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-ui); font-weight: 600; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.7; color: var(--ink);
}
.stl-scope__list li::before {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: 2px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.stl-scope__col--do .stl-scope__list li::before { background: var(--orange); }
.stl-scope__col--dont .stl-scope__list li { color: var(--ink); font-weight: 500; }
.stl-scope__col--dont .stl-scope__list li::before { background: var(--navy); }
.stl-scope__note { margin: clamp(16px, 2.2vw, 20px) 0 0; font-family: var(--font-ui); font-weight: 500; font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }

/* ============================================================
   工程ステップ（ネイビー地・コンパクト縦タイムライン）
   ============================================================ */
.stl-flow { position: relative; overflow: hidden; }
.stl-flow .sec-ghost { color: rgba(255, 255, 255, .08); }
.stl-flow__grid {
  margin-top: clamp(28px, 3.4vw, 42px); position: relative;
  display: grid; grid-template-columns: 1fr; gap: 0; max-width: 760px;
}
.stl-step {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: clamp(44px, 6vw, 54px) 1fr;
  column-gap: clamp(16px, 2.2vw, 24px);
  padding-bottom: clamp(18px, 2.4vw, 28px);
}
.stl-step:last-child { padding-bottom: 0; }
/* 番号の中心を通り、次のステップへ伸びる縦罫 */
.stl-step::before {
  content: ""; position: absolute; z-index: 0;
  left: clamp(21px, 3vw, 26px); width: 2px; background: rgba(255, 201, 160, .3);
  top: clamp(30px, 4vw, 38px); bottom: 0;
}
.stl-step:last-child::before { display: none; }
.stl-step__no {
  grid-column: 1; grid-row: 1 / 3; align-self: start; justify-self: center;
  position: relative; z-index: 1; margin: 0; display: block; text-align: center;
  background: var(--navy); padding-bottom: 6px;
  font-family: var(--font-round); font-weight: 900; font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1; color: var(--peach); letter-spacing: .01em; white-space: nowrap;
}
.stl-step__h {
  grid-column: 2; grid-row: 1; align-self: center;
  margin: 0; font-family: var(--font-ui); font-weight: 900;
  font-size: clamp(16px, 1.9vw, 20px); line-height: 1.35; letter-spacing: .02em; color: #fff;
}
.stl-step__d {
  grid-column: 2; grid-row: 2; max-width: 40em;
  margin: 6px 0 0; font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(13px, 1.5vw, 14.5px); line-height: 1.75; color: rgba(255, 255, 255, .82);
}

/* ============================================================
   対応できる現場（菱形マーカー＋大ラベルのインデックス）
   ============================================================ */
.stl-types__row {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  margin-top: clamp(28px, 4vw, 44px); background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 1024px) { .stl-types__row { grid-template-columns: repeat(5, 1fr); } }
.stl-type {
  position: relative; display: flex; flex-direction: row; align-items: center;
  gap: 16px; min-height: 64px;
  padding: 14px clamp(18px, 4vw, 26px); background: var(--card);
  transition: background .25s ease;
}
@media (min-width: 1024px) {
  .stl-type {
    flex-direction: column; justify-content: center; gap: clamp(12px, 1.5vw, 16px);
    min-height: clamp(112px, 12vw, 140px);
    padding: clamp(22px, 2.8vw, 32px) clamp(18px, 2.2vw, 24px);
  }
}
.stl-type::before {
  content: ""; width: 10px; height: 10px; background: var(--orange); transform: rotate(45deg);
  flex: 0 0 auto;
}
.stl-type__t {
  font-family: var(--font-ui); font-weight: 900; font-size: clamp(16px, 2vw, 20px);
  letter-spacing: .03em; line-height: 1.4; color: var(--ink); text-wrap: balance;
}
@media (hover: hover) {
  .stl-type:hover { background: var(--paper-2); }
}
.stl-types__photos {
  display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(12px, 1.6vw, 18px);
}
@media (min-width: 640px) { .stl-types__photos { grid-template-columns: 1fr 1fr; } }
.stl-types__photo {
  margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line);
  background: var(--paper-2);
}
.stl-types__photo image-slot { display: block; width: 100%; height: 100%; }

/* ===== works : works.css ===== */
@charset "utf-8";
/* ============================================================
   施工実績（/blog-ex/instance）= Cuezilla parts228系
   add.css 貼り付け用：動的ブロックの実在クラスを上書きして見た目だけ整える。
   自己完結（色・フォントをこのファイルで定義／theme に勝つよう !important）。
   ※静的部分（下層ヘッダー/導入/フッター）は別途サイト共通CSSで装飾。
   ============================================================ */

/* === add.css 貼り付け ここから（施工実績 parts228）=== */
.parts228_section {
  background: var(--paper) !important;
  padding-block: clamp(40px, 7vw, 88px) !important;
}
.parts228_wrap { width: min(100% - 36px, 1180px) !important; margin-inline: auto !important; }

/* 一覧グリッド：PC3列／タブレット2列／スマホ1列 */
.parts228_post_list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(20px, 2.6vw, 30px) !important;
}
@media (min-width: 600px) { .parts228_post_list { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 980px) { .parts228_post_list { grid-template-columns: repeat(3, 1fr) !important; } }

/* カード：角カット多角形＋柔らかい影（角丸なし）
   border-radius/overflow は cuezilla-skin が 6px/hidden を当てるため 0/visible で上書き */
.parts228_post_wrap {
  --cut: clamp(16px, 2.2vw, 24px);
  position: relative !important;
  background: var(--card) !important;
  border: 0 !important; border-radius: 0 !important; overflow: visible !important;
  padding: 0 0 clamp(20px, 2.4vw, 26px) !important;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))) !important;
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10));
  transition: filter .2s, transform .2s;
}
.parts228_post_wrap:hover { filter: drop-shadow(0 16px 30px rgba(35, 32, 23, .18)); transform: translateY(-2px); }

/* サムネイル（角丸なし・cover・上部全幅） */
.parts228_post_img { display: block !important; margin: 0 0 clamp(14px, 1.8vw, 18px) !important; }
.parts228_post_img a { display: block !important; }
.parts228_post_img img {
  display: block !important; width: 100% !important; aspect-ratio: 4 / 3 !important;
  object-fit: cover !important; border-radius: 0 !important;
}

/* 日付（ステータス行）：英字ディスプレイ体で小さく
   display/align を明示して cuezilla-skin の部分適用に依存しないようにする
   ※CMS実テンプレートでは parts228_post_title-excerpt が status の子に
     なるケースがある。flex-wrap:wrap + flex-basis:100% で縦積みを保証する */
.parts228_post_status {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  padding: 0 clamp(18px, 2.4vw, 24px) !important; margin: 0 !important;
}
.parts228_post_date {
  font-family: "Big Shoulders Display", sans-serif !important; font-weight: 700 !important;
  font-size: clamp(13px, 1.5vw, 15px) !important; letter-spacing: .06em !important;
  color: var(--ink-soft) !important; white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* タイトル
   status が flex 親になる場合も flex-basis:100% で必ず改行させる */
.parts228_post_title-excerpt { padding: 0 clamp(18px, 2.4vw, 24px) !important; margin: 6px 0 0 !important; flex: 0 0 100% !important; }
.parts228_post_title {
  margin: 0 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 900 !important;
  font-size: clamp(17px, 2vw, 20px) !important; line-height: 1.5 !important; letter-spacing: .02em !important;
  color: var(--ink) !important;
}
.parts228_post_title a { color: inherit !important; text-decoration: none !important; }
.parts228_post_title a:hover { color: var(--orange) !important; }

/* タグ（カテゴリピル：角丸・グリーン地）
   .parts228_section を親に付けて詳細度(0,2,0)→ cuezilla-skin(0,1,0)に確実に勝つ */
.parts228_section .parts-blog-ex-tag_wrap {
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
  padding: 0 clamp(18px, 2.4vw, 24px) !important; margin: clamp(12px, 1.6vw, 16px) 0 0 !important;
}
.parts228_section .parts-blog-ex_tag {
  display: inline-block !important;
  background: var(--green) !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important; padding: 3px 13px !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 700 !important;
  font-size: 12px !important; letter-spacing: .06em !important; text-decoration: none !important; line-height: 1.7 !important;
}
.parts228_section .parts-blog-ex_tag:hover { background: var(--green-deep) !important; }

/* 抜粋（既定で非表示＝CMS側で抜粋有効化したとき出る） */
.parts228_post_excerpt {
  padding: 0 clamp(18px, 2.4vw, 24px) !important; margin: 10px 0 0 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 500 !important;
  font-size: 13.5px !important; line-height: 1.85 !important; color: var(--ink-soft) !important;
}

/* ページネーション
   span:not(.current) → display:contents でボーダーボックスを消す（前へ/次へspan の2重線対策）
   blog.css(parts222)と同じパターン */
.parts228_pagenation {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important;
  gap: 8px !important; margin-top: clamp(34px, 5vw, 56px) !important;
}
.parts228_pagenation span:not(.current) { display: contents !important; }
.parts228_pagenation a,
.parts228_pagenation span.current {
  display: inline-grid !important; place-items: center !important;
  min-width: 44px !important; height: 44px !important; padding: 0 12px !important;
  font-family: "Big Shoulders Display", sans-serif !important; font-weight: 700 !important; font-size: 15px !important;
  color: var(--ink) !important; text-decoration: none !important;
  background: transparent !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
  transition: background-color .2s, color .2s, border-color .2s;
}
.parts228_pagenation a:hover { border-color: var(--orange) !important; color: var(--orange) !important; }
.parts228_pagenation .pagination_num.current {
  background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important;
}
.parts228_pagenation .pagination_prev,
.parts228_pagenation .pagination_next { letter-spacing: .04em !important; }
/* === add.css 貼り付け ここまで === */

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

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

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


/* ============================================================
   §0  トークン ─ ここだけ案件ごとに調整
   ============================================================ */
:root{
  /* --- 色: CueZilla テーマ変数から自動取得（無い場合のフォールバック付き） --- */
  --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  ページネーション（.pagination_* / [class*="_pagenation"]）
   ============================================================ */
.pagination_num, .pagination_prev, .pagination_next,
[class*="_pagenation"] a, [class*="_pagenation"] span{
  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, [class*="_pagenation"] .current, [class*="_pagenation"] .active{
  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; }
.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"]{
  display:block !important; 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_img"]{ width:100%; display:block; border-radius:0; }
/* カード内のテキストに左右余白 */
[class*="_post_status"]{ border:none !important; background:transparent !important; margin:14px 16px 0 !important; padding:0 !important; display:flex !important; gap:10px; align-items:center; }
[class*="_post_title-excerpt"]{ padding:10px 16px 16px !important; }
[class*="_post_title"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_post_excerpt"]{ color:var(--dyn-muted) !important; }
[class*="_post_date"]{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
.parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; }
a.parts-blog-ex_tag,
a.parts-blog-ex_tag:link,
a.parts-blog-ex_tag:visited,
.parts-blog-ex_tag{ display:inline-block !important; font-family:"Zen Kaku Gothic New",sans-serif !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.06em !important; line-height:1.7 !important; color:#fff !important; background:var(--green,#2E6B39) !important; border:0 !important; border-radius:999px !important; padding:3px 13px !important; text-decoration:none !important; }


/* ============================================================
   §5  サイドバー / 最近の投稿 / カテゴリ記事数
   ============================================================ */
[class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); }
[class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !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; }


/* ============================================================
   §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, .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; }
/* プライバシー同意 */
.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; }


/* ============================================================
   §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; }

/* ===== 案件追補(最終上書き) : _seiken-tweaks.css ===== */
/* ============================================================
   案件追補（C層・site.combined.css の最後＝最終上書き）
   - R-18: ヘッダーは position:fixed（--header-h:56px）。CueZilla がシステム描画する
           ページ（送信完了/404 等）が固定ヘッダーに潜り込まないよう skin に高さを渡す。
           自由下層ページは svc-hero が自前で上余白（var(--header-h)）を確保済み。
   - image-slot を <img> に静的化したことに伴う画像フィット補完。
     受領 CSS は大半の容器で image-slot と img の両セレクタを併記済みだが、
     一部（mbr-card__photo / saf-intro__bg / stl-intro__bg / stl-types__photo 等）は
     image-slot のみだったため、ここで img を同じ表示に合わせる。
   ============================================================ */
:root{ --fixed-header-h: 56px; }
@media (max-width: 991px){ :root{ --fixed-header-h: 52px; } }

/* R-20: テーマ(Bootstrap)の mark/.mark が黄色ハイライト背景＋余白を付けるのを打ち消す。
   SEIKEN の .mark は「色（オレンジ等）」のみ＝各セレクタが色を付与するので、ここでは背景・余白・角丸だけ無効化。 */
mark, .mark{ background-color: transparent !important; padding: 0 !important; border-radius: 0 !important; }

/* R-20: テーマ(Bootstrap) a:hover{color:#0A58CA}（青）の打ち消し。
   ※btn / cta / more-link / bizshow__btn / history__btn 等は受領デザインに独自ホバー色が
   　あるため触らない（受領どおりを尊重）。独自ホバーが無く青化するリンクだけを是正する。 */
a:not([class]):hover{ color: inherit; }
.recruit-tile:hover, .recruit-tile:hover *,
.recruit-banner:hover, .recruit-banner:hover *{ color: #fff; }

/* R-20: class付きボタン/CTAも Bootstrap reboot の a:hover{color:#0a58ca}（青）が
   .btn--*/.cta-- の色指定（非:hover・低詳細度）に勝って文字が青くなる。
   本来色を hover/focus で !important 再指定して打ち消す（背景の独自ホバーは維持）。
   ・TOP：代表の歩み/READ MORE=.btn--ink、選ばれる理由/安全=.btn--orange
   ・下層最下部CTA：お問い合わせ=.cta--primary */
.btn--ink:hover, .btn--ink:focus,
.btn--ink:hover .arrow, .btn--ink:focus .arrow{ color: var(--paper) !important; }
.btn--orange:hover, .btn--orange:focus,
.btn--orange:hover .arrow, .btn--orange:focus .arrow{ color: #fff !important; }
.btn--navy:hover, .btn--navy:focus{ color: #fff !important; }
.cta--primary:hover, .cta--primary:focus,
.cta--primary:hover .cta__en, .cta--primary:hover .cta__arr{ color: #fff !important; }

/* R-18: CueZilla が描画する記事詳細（ブログ/施工実績の個別記事）の記事ヘッダーが
   固定ヘッダーに潜り込まないよう上余白を確保（skin §11/§12 と同方針）。
   ※実機で潜り込みが残る/二重余白になる場合は live で値を調整。 */
[class*="_article_header"]{ padding-top: calc(var(--fixed-header-h, 0px) + 24px); }

/* 主要メディアフレーム（保険・既存 .svc-frame > img と同等） */
.svc-frame > img{ display:block; width:100%; height:100%; object-fit:cover; }

/* image-slot のみ指定だった容器の <img> フィット */
.mbr-card__photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.mbr-inside__ph img{ display:block; width:100%; height:100%; object-fit:cover; }
.saf-intro__bg img{ display:block; width:100%; height:100%; object-fit:cover; }
.stl-intro__bg img{ display:block; width:100%; height:100%; object-fit:cover; }
.stl-types__photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.cmp-access__embed img{ display:block; width:100%; height:100%; object-fit:cover; }
.strength__photo img{ display:block; width:100%; height:clamp(240px,48vw,420px); object-fit:cover; }
.recruit__media img{ display:block; width:100%; height:clamp(260px,52vw,460px); object-fit:cover; }
.biz-card__media img,
.works__cell img,
.strength-row__photo img{ display:block; width:100%; object-fit:cover; }

/* ===== blog : blog.css ===== */
/* ============================================================
   ブログ（/blog）= Cuezilla parts222系
   add.css 貼り付け用：動的ブロックの実在クラスを上書きして見た目だけ整える。
   ・記事カードはトンマナ準拠（BLOG＝ネイビーの差し色）で配色。
   ・サイドバーはルール準拠で「色はテーマ任せ」＝構造（余白・罫線・帯・枠）のみ。
   ============================================================ */

/* === add.css 貼り付け ここから（ブログ parts222）=== */
.parts222_section {
  position: relative !important;
  background: #F1E7D1 !important;
  padding-block: clamp(40px, 7vw, 88px) !important;
  padding-inline: 0 !important;
}
.parts222_section > h2 {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}

/* 2カラム：左＝記事一覧（広い）／右＝サイドバー（固定幅）。PC(992px+)のみ横並び */
/* クラス二重指定 .parts222_section.parts222_section → 詳細度(0,3,0)でsection/divどちらでも確実に勝つ */
.parts222_section .parts222_main { min-width: 0 !important; order: 1 !important; }
.parts222_section.parts222_section .parts222_wrap {
  width: calc(100% - 36px) !important; max-width: 1180px !important; margin-inline: auto !important;
  display: grid !important; grid-template-columns: 1fr !important; gap: clamp(28px, 4vw, 48px) !important;
  align-items: start !important;
}
@media (max-width: 991px) { .parts222_section.parts222_section .parts222_wrap { max-width: none !important; grid-template-columns: 1fr !important; } }
@media (max-width: 991px) { .parts222_section.parts222_section .parts222_wrap .parts222_main, .parts222_section.parts222_section .parts222_wrap .parts222_sidebar { grid-column: 1 / -1 !important; } }
@media (min-width: 992px) { .parts222_section.parts222_section .parts222_wrap { grid-template-columns: minmax(0, 1fr) 340px !important; gap: clamp(28px, 4vw, 48px) !important; } }

/* 一覧グリッド：600px以上で2列／スマホ1列 */
.parts222_post_list {
  display: grid !important; grid-template-columns: 1fr !important; gap: clamp(20px, 2.6vw, 30px) !important;
}
@media (min-width: 600px) { .parts222_post_list { grid-template-columns: repeat(2, 1fr) !important; } }

/* 記事カード：角カット多角形＋柔らかい影（角丸なし） */
.parts222_post_wrap {
  --cut: clamp(15px, 2vw, 22px);
  display: block !important; position: relative !important; text-decoration: none !important;
  background: #FBF6EA !important; border: 0 !important; padding: 0 0 clamp(18px, 2.2vw, 24px) !important;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))) !important;
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10));
  transition: filter .2s, transform .2s;
}
.parts222_post_wrap:hover { filter: drop-shadow(0 16px 30px rgba(35, 32, 23, .18)); transform: translateY(-2px); }

/* カード内リンク：全体クリック領域・下線消し・色リセット */
.parts222_post_wrap > a {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}
.parts222_post_img { display: block !important; margin: 0 0 clamp(12px, 1.6vw, 16px) !important; }
.parts222_post_img img {
  display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important;
  object-fit: cover !important; border-radius: 0 !important;
}

/* ステータス行：日付＋カテゴリを横並び */
.parts222_post_status {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important;
  padding: 0 clamp(16px, 2.2vw, 22px) !important; margin: 0 !important;
}
.parts222_post_date {
  font-family: "Big Shoulders Display", sans-serif !important; font-weight: 700 !important;
  font-size: clamp(12px, 1.4vw, 14px) !important; letter-spacing: .06em !important; color: #5C5544 !important; white-space: nowrap !important;
}
.parts222_post_category {
  display: inline-block !important; background: #14246B !important; color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important; padding: 2px 12px !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 700 !important;
  font-size: 11.5px !important; letter-spacing: .06em !important; line-height: 1.7 !important;
}

.parts222_post_title-excerpt { padding: 0 clamp(16px, 2.2vw, 22px) !important; margin: 8px 0 0 !important; }
.parts222_post_title {
  margin: 0 !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 900 !important;
  font-size: clamp(16px, 1.9vw, 19px) !important; line-height: 1.5 !important; letter-spacing: .02em !important;
  color: #232017 !important;
}
.parts222_post_wrap:hover .parts222_post_title { color: #14246B !important; }

/* ページネーション */
.parts222_pagenation {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important;
  gap: 8px !important; margin-top: clamp(30px, 4.5vw, 52px) !important;
}
.parts222_pagenation span:not(.current) { display: contents !important; }
.parts222_pagenation a,
.parts222_pagenation span.current {
  display: inline-grid !important; place-items: center !important;
  min-width: 44px !important; height: 44px !important; padding: 0 12px !important;
  font-family: "Big Shoulders Display", sans-serif !important; font-weight: 700 !important; font-size: 15px !important;
  color: #232017 !important; text-decoration: none !important;
  background: transparent !important; border: 1px solid #D8C9A8 !important; border-radius: 0 !important;
  transition: background-color .2s, color .2s, border-color .2s;
}
.parts222_pagenation a:hover { border-color: #14246B !important; color: #14246B !important; }
.parts222_pagenation .pagination_num.current {
  background: #14246B !important; border-color: #14246B !important; color: #fff !important;
}

/* ============ サイドバー（色はテーマ任せ＝構造スタイルのみ） ============ */
/* 詳細度(0,4,0)：テーマがsection/divどちらを使っても上書き不可 */
.parts222_section.parts222_section .parts222_wrap .parts222_sidebar { min-width: 0 !important; max-width: none !important; width: 100% !important; margin-top: 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: clamp(24px, 3vw, 32px) !important; order: 2 !important; }
/* default.css の max-width:47.735% を無効化（タブレット幅でwidgetが細くなるのを防ぐ） */
.parts222_sidebar .parts222_sidebar_wrap { max-width: none !important; width: 100% !important; }
.parts222_sidebar_wrap > h3,
.recent_posts_wrap .recent_post_title {
  margin: 0 0 clamp(10px, 1.4vw, 14px) !important; padding: 8px 0 !important;
  border-top: 2px solid currentColor !important; border-bottom: 1px solid currentColor !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 800 !important;
  font-size: clamp(14px, 1.6vw, 16px) !important; letter-spacing: .08em !important;
}
.parts222_sidebar_wrap ul,
.recent_posts_wrap ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.parts222_sidebar_wrap li,
.recent_posts_wrap li { border-bottom: 1px solid currentColor !important; }
.parts222_sidebar_wrap li a,
.recent_posts_wrap li a {
  display: block !important; padding: 12px 2px !important; text-decoration: none !important; color: inherit !important;
}
/* [class*="_sidebar_date"] generic skin 上書き対策：2クラスで詳細度 0,2,0 に */
.parts222_sidebar [class*="_sidebar_date"],
.parts222_sidebar_date {
  display: block !important; font-family: "Big Shoulders Display", sans-serif !important; font-weight: 700 !important;
  font-size: 12px !important; letter-spacing: .06em !important; opacity: .7 !important; color: inherit !important;
}
/* [class*="_sidebar_post_title"] generic skin 上書き対策 */
.parts222_sidebar [class*="_sidebar_post_title"],
.parts222_sidebar_post_title {
  margin: 3px 0 0 !important; font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 700 !important;
  font-size: 13.5px !important; line-height: 1.6 !important; color: inherit !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.parts222_sidebar_wrap li a:hover .parts222_sidebar_post_title { text-decoration: underline !important; }
/* カテゴリ：名称＋件数（小さな枠付きカウント） */
.parts222_sidebar_wrap.category_post_count li a {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
}
.parts222_sidebar_post_category { flex: 1 !important; min-width: 0 !important; margin: 0 !important; font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 700 !important; font-size: 13.5px !important; }
/* [class*="_sidebar_post_category_count"] generic skin 上書き対策 */
.parts222_sidebar_wrap [class*="_sidebar_post_category_count"],
.parts222_sidebar_post_category_count {
  flex: none !important; display: inline-grid !important; place-items: center !important;
  min-width: 26px !important; height: 22px !important; padding: 0 6px !important;
  background: transparent !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  font-family: "Big Shoulders Display", sans-serif !important; font-weight: 700 !important; font-size: 12px !important;
}
/* f_yugothic との詳細度競合を2クラス指定で解決 */
.f_yugothic.parts222_post_category {
  background: #14246B !important;
  color: #fff !important;
  border: 0 !important;
}

/* サイドバーh3・recent_posts_wrap 見出しのオレンジ背景を確実に消す（詳細度強化） */
.parts222_sidebar .parts222_sidebar_wrap > h3,
.parts222_sidebar h3,
.recent_posts_wrap .recent_post_title {
  background-color: transparent !important;
  color: inherit !important;
}
/* === add.css 貼り付け ここまで === */

/* ===== parts225 一覧 : parts225.css ===== */
/* === add.css 貼り付け ここから（parts225 一覧）=== */
.parts225_section {
  position: relative !important;
  background: #F1E7D1 !important;
  padding-block: clamp(40px, 7vw, 88px) !important;
  padding-inline: 0 !important;
}
.parts225_section h2 {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
.parts225_wrap {
  display: block !important;
  width: min(100% - 36px, 1180px) !important; max-width: none !important;
  margin-inline: auto !important; margin-top: 0 !important;
}
.parts225_main { display: block !important; width: 100% !important; }
.parts225_post_list {
  display: grid !important; grid-template-columns: 1fr !important;
  gap: clamp(20px, 2.6vw, 30px) !important;
  justify-content: normal !important; flex-wrap: unset !important;
}
.parts225_post_list::after { display: none !important; }
@media (min-width: 600px) { .parts225_post_list { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 900px) { .parts225_post_list { grid-template-columns: repeat(3, 1fr) !important; } }
.parts225_post_wrap {
  --cut: clamp(15px, 2vw, 22px);
  max-width: none !important; width: 100% !important; margin-bottom: 0 !important;
  display: block !important; position: relative !important;
  background: #FBF6EA !important; border: 0 !important; padding: 0 0 clamp(18px, 2.2vw, 24px) !important;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))) !important;
  filter: drop-shadow(0 10px 22px rgba(35, 32, 23, .10));
  transition: filter .2s, transform .2s;
}
.parts225_post_wrap:nth-last-child(-n+3) { margin-bottom: 0 !important; }
.parts225_post_wrap:hover { filter: drop-shadow(0 16px 30px rgba(35, 32, 23, .18)) !important; transform: translateY(-2px) !important; }
.parts225_post_wrap .parts225_post_img {
  display: block !important; height: auto !important;
  margin: 0 0 clamp(12px, 1.6vw, 16px) !important;
}
.parts225_post_wrap .parts225_post_img img {
  display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important;
  max-height: none !important; height: auto !important; object-fit: cover !important; border-radius: 0 !important;
}
.parts225_post_status {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important;
  justify-content: flex-start !important;
  padding: 0 clamp(16px, 2.2vw, 22px) !important; margin-bottom: 0 !important;
}
.parts225_post_date {
  font-family: "Big Shoulders Display", sans-serif !important; font-weight: 700 !important;
  font-size: clamp(12px, 1.4vw, 14px) !important; letter-spacing: .06em !important;
  color: #5C5544 !important; white-space: nowrap !important;
}
.parts225_post_category {
  display: inline-block !important; background: #14246B !important; color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important; padding: 2px 12px !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 700 !important;
  font-size: 11.5px !important; letter-spacing: .06em !important; line-height: 1.7 !important;
}
.f_yugothic.parts225_post_category {
  background: #14246B !important; color: #fff !important; border: 0 !important;
}
.parts225_post_title {
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 900 !important;
  font-size: clamp(16px, 1.9vw, 19px) !important; line-height: 1.5 !important; letter-spacing: .02em !important;
  color: #232017 !important;
  padding: 0 clamp(16px, 2.2vw, 22px) !important; margin: 8px 0 6px !important;
}
.parts225_post_wrap:hover .parts225_post_title { color: #14246B !important; }
.parts225_post_excerpt {
  font-family: "Zen Kaku Gothic New", sans-serif !important; font-weight: 500 !important;
  font-size: 13.5px !important; line-height: 1.85 !important; color: #5C5544 !important;
  padding: 0 clamp(16px, 2.2vw, 22px) !important; margin: 0 !important;
}
.parts225_pagenation {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important;
  gap: 8px !important; margin-top: clamp(30px, 4.5vw, 52px) !important;
}
.parts225_pagenation span:not(.current) { display: contents !important; }
.parts225_pagenation a,
.parts225_pagenation span.current {
  display: inline-grid !important; place-items: center !important;
  min-width: 44px !important; height: 44px !important; padding: 0 12px !important;
  font-family: "Big Shoulders Display", sans-serif !important; font-weight: 700 !important; font-size: 15px !important;
  color: #232017 !important; text-decoration: none !important;
  background: transparent !important; border: 1px solid #D8C9A8 !important; border-radius: 0 !important;
  transition: background-color .2s, color .2s, border-color .2s;
}
.parts225_pagenation a:hover { border-color: #14246B !important; color: #14246B !important; }
.parts225_pagenation span.current {
  background: #14246B !important; border-color: #14246B !important; color: #fff !important;
}

/* blog-ex タグ：a要素として明示指定 → Bootstrap a:link / a:visited と同詳細度(0,1,1)でファイル末尾が勝つ */
a.parts-blog-ex_tag,
a.parts-blog-ex_tag:link,
a.parts-blog-ex_tag:visited {
  color: #fff !important;
  background: var(--green, #2E6B39) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 3px 13px !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  line-height: 1.7 !important;
  text-decoration: none !important;
  display: inline-block !important;
}
a.parts-blog-ex_tag:hover { background: var(--green-deep, #1F4E29) !important; color: #fff !important; }
/* NEWSバッジと記事を横並びにし、白い枠内に収める */
.design-parts-52_Fmfvn0oOlH .container .content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  height: auto !important;
  gap: 12px !important;
}

.design-parts-52_Fmfvn0oOlH .container .content h4.banner-area {
  height: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.design-parts-52_Fmfvn0oOlH .container .content ul.mb-0 {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.design-parts-52_Fmfvn0oOlH .container .content ul.mb-0 li {
  padding: 0 !important;
}

/* 日付とタイトルを横並びにする（★追加分） */
.design-parts-52_Fmfvn0oOlH .container .content ul.mb-0 li .parts-52-textarea {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 白い枠（背景）の高さを中身に合わせる */
.design-parts-52_Fmfvn0oOlH.bg-color {
  height: auto !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
/* 有効時：オレンジ背景を打ち消して既定色に戻す */
.contact_submit,
.contact_submit button,
.contact_submit input:not(:disabled) {
  background: revert !important;
}
/* 無効時：グレーアウト */
.contact_submit input:disabled {
  background: #cccccc !important;
  color: #888888 !important;
  cursor: not-allowed !important;
}