@charset "UTF-8";
/* =========================================================
   協和産業株式会社 コーポレートサイト v2
   Design Reference: oribest.co.jp style
   Corporate Color: Deep Regeneration Green #1F5C4A
   ========================================================= */

:root {
  --green: #1F5C4A;
  --green-dark: #143b2f;
  --green-deep: #0e2a22;
  --leaf: #6BAF45;
  --leaf-soft: #8cc56a;
  --bg: #ffffff;
  --bg-tint: #f4f8f5;
  --bg-tint2: #e8f1eb;
  --ink: #1b2b24;
  --muted: #5d6f67;
  --line: #dce7e0;
  --line-soft: #edf3ef;
  --white: #ffffff;
  --maxw: 1140px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 20px 44px -24px rgba(15,42,34,.42);
  --shadow-soft: 0 10px 32px -20px rgba(15,42,34,.30);
  --font-jp: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Jost", "Noto Sans JP", sans-serif;
  --py: clamp(90px, 11vw, 140px);
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0; font-family: var(--font-jp); color: var(--ink);
  background: var(--bg); line-height: 1.85; font-size: 16px;
  -webkit-font-smoothing: antialiased; text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block }
a { color: inherit; text-decoration: none; transition: .25s }
ul { margin: 0; padding: 0; list-style: none }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; margin: 0 }
p { margin: 0 0 1.1em }
.container { width: 90%; max-width: var(--maxw); margin-inline: auto }

/* ========== HEADER ========== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.scrolled { box-shadow: 0 6px 22px -10px rgba(15,42,34,.28) }
.logo-jp, .logo-en, .gnav a { transition: color .3s ease }
/* ホバーでヘッダー背景がふわっとフェードイン（日発 .header_bg 相当）＝半透明ダークグリーン＋すりガラス。透過ヒーロー時のみ */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(14,42,34,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s ease-out }
body.home .site-header:not(.scrolled):hover::before { opacity: 1 }

/* トップページ：FVの上は透明ナビ＋白文字、スクロールで白背景ナビへ切替 */
body.home .site-header {
  position: fixed; left: 0; width: 100%;
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
body.home .site-header.scrolled {
  background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(12px); border-bottom-color: var(--line-soft);
}
/* モバイルメニューを開いたときは全ページ共通の白ヘッダーに統一 */
body.nav-open .site-header,
body.home.nav-open .site-header,
body.home.nav-open .site-header:not(.scrolled) { background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line-soft) }
body.home.nav-open .site-header:not(.scrolled) .logo-jp { color: var(--green) }
body.home.nav-open .site-header:not(.scrolled) .logo-en { color: var(--leaf) }
/* メニュー開：ハンバーガー(→×)とMENU/CLOSE表記は白（グリーンのオーバーレイ上に乗るため） */
body.nav-open .nav-toggle-box span { background: #fff }
body.nav-open .nav-toggle-txt { color: #fff }
body.home .site-header:not(.scrolled) .logo-jp { color: #fff }
body.home .site-header:not(.scrolled) .logo-en { color: rgba(255,255,255,.78) }
body.home .site-header:not(.scrolled) .gnav a:not(.nav-cta) { color: #fff }
body.home .site-header:not(.scrolled) .gnav a .en { color: rgba(255,255,255,.72) }
body.home .site-header:not(.scrolled) .gnav a::after { background: #fff }
body.home .site-header:not(.scrolled) .gnav ul::after { opacity: 1 }
body.home .site-header:not(.scrolled) .nav-toggle-box span { background: #fff }
body.home .site-header:not(.scrolled) .nav-toggle-txt { color: #fff }
@media (max-width: 860px) {
  /* モバイルはグリーンオーバーレイなので、ホーム透過時も文字は白＋リーフで統一 */
  body.home .site-header:not(.scrolled) .gnav a:not(.nav-cta) { color: #fff }
  body.home .site-header:not(.scrolled) .gnav a .en { color: var(--leaf) }
  .site-header::before { display: none }
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; width: 100%; padding-left: clamp(20px, 3vw, 44px);
  position: relative; z-index: 1;
}
.logo { display: flex; flex-direction: column; line-height: 1.15 }
.logo-jp { font-weight: 700; font-size: 1.75rem; color: var(--green); letter-spacing: .06em }
.logo-en { font-family: var(--font-en); font-size: .62rem; letter-spacing: .24em; color: var(--leaf); text-transform: uppercase; margin-top: 4px }
.gnav ul { display: flex; align-items: center; gap: 28px; position: relative }
/* 日発式の白い横レール：ホーム〜お問い合わせを結ぶ1px線。透過ヒーロー時のみ表示（ナビの視認性確保） */
.gnav ul::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #fff; opacity: 0; transition: opacity .35s ease }
.gnav a { font-weight: 600; font-size: 1.02rem; position: relative; height: 72px; justify-content: center; color: var(--ink); letter-spacing: .04em; display: inline-flex; flex-direction: column; align-items: center }
.gnav a .jp { display: inline-block; line-height: 1.2 }
.gnav a .en { font-size: .6rem; font-weight: 500; letter-spacing: .2em; color: var(--muted); text-align: center; margin-top: 5px; font-family: var(--font-en) }
/* 下線＝日発式：英文字の“下”＝項目の最下部に太帯（幅=文字ぴったり・中央）／ホバー・現在ページでフェードイン */
.gnav a::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 8px; background: var(--green); opacity: 0; transition: opacity .4s ease-out }
.gnav a:hover, .gnav a[aria-current="page"] { color: var(--green) }
.gnav a:hover::after, .gnav a[aria-current="page"]::after { opacity: 1 }
.gnav a.nav-cta {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: 72px; padding: 0 40px; white-space: nowrap; line-height: 1;
  background: var(--green); color: #fff !important;
  font-weight: 600; font-size: 1.02rem; letter-spacing: .04em;
}
.gnav a.nav-cta:hover { background: var(--leaf) }
.nav-cta::after { display: none }
.nav-cta span { line-height: 1 }
.nav-cta-icon { width: 24px; height: 24px }
.nav-toggle { display: none; border: 0; background: transparent; width: 46px; height: 46px; cursor: pointer; padding: 0; position: relative }
.nav-toggle-box { display: block; width: 26px; height: 16px; position: relative; margin: 0 auto }
.nav-toggle-box span { position: absolute; left: 0; width: 26px; height: 2px; background: var(--green); border-radius: 2px; transition: transform .3s, opacity .3s, background .3s }
.nav-toggle-box span:nth-child(1) { top: 0 }
.nav-toggle-box span:nth-child(2) { top: 7px }
.nav-toggle-box span:nth-child(3) { top: 14px }
.nav-toggle-txt { display: block; margin-top: 4px; font-style: normal; font-family: var(--font-en); font-size: 9px; font-weight: 700; letter-spacing: .14em; line-height: 1; color: var(--green); transition: color .3s; text-align: center }
.nav-toggle-txt::after { content: "MENU" }
.nav-toggle.active .nav-toggle-txt::after { content: "CLOSE" }
/* ナビのラッパー：PCではレイアウトに影響させない（モバイルでのみクリップ用ボックスになる） */
.nav-drawer { display: contents }
/* ドロワー内の会社名・電話番号はPCでは非表示（モバイルオーバーレイ専用） */
.gnav-head, .gnav-foot { display: none }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border-radius: 999px; font-weight: 600; font-size: .9rem;
  border: 1.5px solid transparent; cursor: pointer; transition: .25s; letter-spacing: .06em;
}
.btn .arw { transition: .25s }
.btn:hover .arw { transform: translateX(5px) }
.btn-primary { background: var(--green); color: #fff }
.btn-primary:hover { background: var(--leaf); border-color: var(--leaf) }
.btn-ghost { background: transparent; border-color: var(--green); color: var(--green) }
.btn-ghost:hover { background: var(--green); color: #fff }
.btn-light { background: #fff; color: var(--green) }
.btn-light:hover { background: var(--bg-tint) }
.btn-outline-white { background: transparent; border-color: rgba(255,255,255,.55); color: #fff }
.btn-outline-white:hover { background: rgba(255,255,255,.1) }

/* ========== HERO (TOP) ========== */
.hero {
  position: relative; min-height: 90vh; display: flex; align-items: center; color: #fff; overflow: hidden;
  z-index: 1;
}
.hero-bg { position: absolute; inset: 0; z-index: 0 }

/* K overlay */
.hero-k {
  position: absolute;
  left: -2%;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  animation: heroK 1.4s cubic-bezier(0.22, 1, 0.36, 1) .15s both;
}
@keyframes heroK {
  from { transform: translateX(-18%); opacity: 0 }
  to   { transform: translateX(0);    opacity: 1 }
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover }
/* ファーストビュー背景スライド（5枚・ゆっくり拡大しながらクロスフェード / Ken Burns） */
/* 5枚・1枚5.5秒表示（DUR=5500）。activeでscale1→1.1へ7s拡大／非activeはフェード中もscaleを保持し、消えてからリセット（transform遅延 0s 1.5s）＝「拡大後に縮小」が見えないようにする */
.hero-bg .hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1);
  transition: opacity 1.5s ease, transform 0s linear 1.5s;
  will-change: opacity, transform;
}
.hero-bg .hero-slide.is-active {
  opacity: 1;
  transform: scale(1.1);
  transition: opacity 1.5s ease, transform 7s linear 0s;
}
@keyframes heroKenBurns {
  from { transform: scale(1) }
  to   { transform: scale(1.12) }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg .hero-slide { transition: opacity .6s ease }
  .hero-bg .hero-slide.is-active { transform: none }
}
/* FV スライド切り替えドット（右下） */
.hero-dots {
  position: absolute; right: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 48px);
  z-index: 3; display: flex; gap: 12px;
}
.hero-dot {
  width: 13px; height: 13px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.35); border: 1.5px solid rgba(255,255,255,.85);
  transition: background-color .25s, transform .25s;
}
.hero-dot:hover { background: rgba(255,255,255,.7) }
.hero-dot.is-active { background: #fff; transform: scale(1.15) }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(8,24,18,.90) 0%, rgba(15,42,34,.80) 38%, rgba(31,92,74,.46) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: 90%; max-width: var(--maxw); margin-inline: auto; padding: 60px 0 80px;
}
.hero-eyebrow {
  font-family: var(--font-en); letter-spacing: .32em; font-size: .68rem;
  color: var(--leaf-soft); text-transform: uppercase; margin-bottom: 22px;
}
.hero-copy-en {
  font-family: var(--font-en); font-size: clamp(3rem, 8.5vw, 7rem); font-weight: 700;
  letter-spacing: .03em; line-height: 1; color: #fff; margin-bottom: 16px;
}
.hero-copy-jp {
  font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 700;
  letter-spacing: .08em; color: rgba(255,255,255,.78); margin-bottom: 28px;
}
.hero-sub {
  font-size: clamp(.88rem, 1.8vw, 1.05rem); max-width: 46ch;
  color: rgba(225,240,232,.80); margin-bottom: 42px; line-height: 1.95;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap }
.hero-scroll {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--font-en); font-size: .56rem; letter-spacing: .28em;
  color: rgba(255,255,255,.4); writing-mode: vertical-rl;
}

/* ========== SECTION BASE ========== */
.section { padding: var(--py) 0; position: relative }
.section--tint { background: var(--bg-tint) }
.section--dark {
  background: linear-gradient(140deg, var(--green-deep) 0%, var(--green) 100%);
  color: #eaf3ee;
}

.section--cut {
  z-index: 1;
}

/* OUR STORY 円形サブ画像 */
/* ===== OUR STORY セクション（プレビュー版 ourstory_section.html と同一レイアウト） ===== */
.ourstory-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start }
.ourstory-eyebrow { display: block; font-family: var(--font-en); font-weight: 600; font-size: .8rem; letter-spacing: .28em; color: #2e6b4f; margin-bottom: 18px }
.ourstory-title { font-family: var(--font-en); font-weight: 700; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: .02em; color: #1f4d38; line-height: 1.05; margin-bottom: 22px }
.ourstory-lead { font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: #26302b; line-height: 1.6; margin-bottom: 24px }
.ourstory-text { font-size: .94rem; color: #4a544e; line-height: 1.9; margin-bottom: 20px }
.ourstory-text strong { color: #26302b; font-weight: 700 }
.ourstory-circles { display: flex; gap: 26px; margin-top: 44px }
.ourstory-circle { flex: 1 1 0; min-width: 0; max-width: 260px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 14px 30px rgba(31,77,56,.14) }
.ourstory-main { width: 100%; border-radius: 18px; box-shadow: 0 20px 45px rgba(31,77,56,.14); display: block }
.ourstory-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px }
/* 左右の余白は「10拠点」が1行に収まる幅を確保するため14px */
.ourstory-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 14px; text-align: center }
.ourstory-num { white-space: nowrap }
.ourstory-num { font-family: var(--font-en); font-weight: 700; font-size: clamp(2.8rem, 5.5vw, 4rem); line-height: 1; color: #1f4d38 }
.ourstory-num small { font-size: .28em; font-weight: 500; margin-left: 3px; white-space: nowrap }
.ourstory-slabel { font-size: .86rem; color: #4a544e; margin-top: 14px; line-height: 1.5 }
.ourstory-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 15px 34px; border: 1.5px solid #2e6b4f; border-radius: 999px; color: #2e6b4f; font-weight: 500; font-size: .92rem; text-decoration: none; transition: .25s }
.ourstory-btn:hover { background: #2e6b4f; color: #fff }
.ourstory-btn .arw { transition: .25s }
.ourstory-btn:hover .arw { transform: translateX(4px) }
@media (max-width: 820px){
  /* スマホ：タイトル→コピー→画像→数字 の順に */
  .ourstory-feature { grid-template-columns: 1fr; gap: 28px }
  .ourstory-circles { display: flex; gap: 16px; margin-top: 28px; justify-content: center }
  .ourstory-circle { max-width: 150px; border-width: 5px }
  .ourstory-stats { gap: 12px }
  .ourstory-stat { padding: 22px 10px }
  .ourstory-num { font-size: clamp(2.2rem, 5.8vw, 3rem) }
}
@media (max-width: 480px){
  /* 1973 / 5拠点 / 10拠点 は狭い画面でも3つ横並びを維持 */
  .ourstory-stats { grid-template-columns: repeat(3, 1fr); gap: 8px }
  .ourstory-stat { padding: 18px 5px }
  .ourstory-num { font-size: clamp(1.8rem, 8.6vw, 2.6rem) }
  .ourstory-num small { font-size: .3em; margin-left: 1px }
  .ourstory-slabel { font-size: .7rem; margin-top: 9px; line-height: 1.45 }
  .ourstory-circle { max-width: 132px }
}

/* BUSINESS 丸ごと画像 */
.section--biz2 { padding-block: 0 !important }
.biz-full { display: block; line-height: 0 }
.biz-full img { width: 100%; display: block }

/* BUSINESS レイヤー分離版（背景画像＋HTMLテキスト＋SVG図） */
.biz2-sec { position: relative; overflow: hidden }
.biz2-bg { position: absolute; inset: 0; z-index: 0 }
.biz2-bg img { width: 100%; height: 100%; object-fit: cover }
.biz2-bg::after { content: ""; position: absolute; inset: 0; background: rgba(12,36,28,.28) }
.biz2-inner { position: relative; z-index: 1; display: block; color: #fff; text-decoration: none }
.biz2-inner:hover .biz2-diagram { transform: translateY(-4px) }
/* BUSINESS：花びらの下の「もっと詳しく見る」ボタン */
.biz2-more-wrap { text-align: center; margin-top: clamp(40px, 6vw, 72px) }
.biz2-inner:hover .btn-outline-white { background: rgba(255,255,255,.12) }
.biz2-title {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 4.4rem); letter-spacing: .1em;
  text-align: center; color: #fff; margin: 0 0 8px;
}
/* BUSINESS の下の和文サブ「事業内容」 */
.biz2-jp-sub {
  text-align: center; font-weight: 700; letter-spacing: .12em;
  font-size: clamp(1rem, 2vw, 1.3rem); color: rgba(255,255,255,.88);
  margin: 0 0 clamp(26px, 4vw, 52px);
}
.biz2-grid {
  display: grid; align-items: center;
  grid-template-columns: 1fr minmax(320px, 580px) 1fr;
  grid-template-areas: "i1 dg i2" "i3 dg i4";
  column-gap: clamp(20px, 3.5vw, 52px); row-gap: clamp(40px, 7vw, 110px);
}
.biz2-diagram { grid-area: dg; transition: transform .3s; position: relative; container-type: inline-size }
.biz2-diagram svg, .biz2-diagram img { width: 100%; height: auto; display: block }
.biz2-diagram img { filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)) }
/* 図形は画像・数字と中央文字はHTMLで重ねる（拡大してもボヤけない／文言修正が容易）。cqwで図の大きさに追従 */
.biz2-dg-overlay { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-jp); color: #1a1a1a }
.biz2-dg-num { position: absolute; transform: translate(-50%,-50%); font-family: var(--font-en), var(--font-jp); font-weight: 700; font-size: 13cqw; line-height: 1; letter-spacing: .02em }
.biz2-dg-num.n1 { left: 18.5%; top: 18% }
.biz2-dg-num.n2 { left: 81.5%; top: 18% }
.biz2-dg-num.n3 { left: 18.5%; top: 82% }
.biz2-dg-num.n4 { left: 81.5%; top: 82% }
.biz2-dg-center { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); width: 40cqw; text-align: center }
.biz2-dg-title { display: block; font-weight: 700; font-size: 7.7cqw; line-height: 1.1; letter-spacing: .02em }
.biz2-dg-desc { display: block; margin-top: .5em; font-weight: 700; font-size: 3.5cqw; line-height: 1.5; color: #2a2a2a }
.biz2-i1 { grid-area: i1; justify-self: end }
.biz2-i2 { grid-area: i2; justify-self: start }
.biz2-i3 { grid-area: i3; justify-self: end }
.biz2-i4 { grid-area: i4; justify-self: start }
.biz2-item { max-width: 24em }
.biz2-item h3 {
  display: flex; align-items: flex-end; gap: 10px; line-height: 1;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem); font-weight: 700;
  letter-spacing: .05em; color: #fff; margin: 0 0 10px; white-space: nowrap;
}
.biz2-num { font-family: var(--font-en); font-weight: 600; font-size: 1.3em; line-height: 1; letter-spacing: .06em; transform: translateY(0.18em) }
.biz2-item p { font-size: .88rem; line-height: 1.9; color: rgba(255,255,255,.9); margin: 0 }
@media (max-width: 900px){
  .biz2-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "dg" "i1" "i2" "i3" "i4";
    row-gap: 22px;
  }
  .biz2-diagram { width: 100%; max-width: min(400px, 100%); margin: 0 auto 14px; justify-self: center }
  .biz2-i1, .biz2-i2, .biz2-i3, .biz2-i4 { justify-self: start }
  .biz2-item { max-width: none }
}

/* BUSINESS 4事業の循環図（はっきり表示・フチだけ緑に馴染ませる） */
.section--biz2 { position: relative; overflow: hidden }
.biz-figure { width: 100%; margin: clamp(20px, 3vw, 36px) 0 0 }
.biz-figure img {
  width: 100%; display: block;
  opacity: .62;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 72%, transparent 99%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 72%, transparent 99%);
}
.biz-cta { text-align: center; margin-top: clamp(28px, 4vw, 48px) }
.section--biz2 > .container { position: relative; z-index: 1 }

/* ========== BACKGROUND WATERMARK ========== */
.bg-word {
  position: absolute;
  font-family: var(--font-en); font-size: clamp(100px, 19vw, 240px);
  font-weight: 700; letter-spacing: -.02em;
  color: rgba(31, 92, 74, .055);
  right: -10px; bottom: 0;
  pointer-events: none; user-select: none;
  white-space: nowrap; line-height: 1; z-index: 0;
}
.section--dark .bg-word { color: rgba(255,255,255,.07) }
.section--tint .bg-word { color: rgba(31,92,74,.045) }

/* ========== SECTION HEADINGS ========== */
.sec-head { max-width: 760px; margin-bottom: 60px; position: relative; z-index: 1 }
.sec-head.center { margin-inline: auto; text-align: center }

/* Large EN title (main heading) */
.sec-en-title {
  font-family: var(--font-en); font-size: clamp(2rem, 5.5vw, 4.4rem); font-weight: 700;
  letter-spacing: .07em; color: var(--green); line-height: 1; margin-bottom: 16px; text-transform: uppercase;
}
.section--dark .sec-en-title { color: #fff }

/* JP subtitle under the EN title */
.sec-jp-sub {
  font-size: clamp(.96rem, 2vw, 1.3rem); font-weight: 700;
  color: var(--ink); letter-spacing: .05em; margin-bottom: 12px;
}
.section--dark .sec-jp-sub { color: rgba(255,255,255,.88) }

.sec-lead { color: var(--muted); font-size: .98rem; line-height: 1.9; max-width: 58ch }
.section--dark .sec-lead { color: rgba(196,214,204,.9) }
.sec-head.center .sec-lead { margin-inline: auto }
/* リード文を1行で（狭い画面は折り返し） */
.sec-lead--1line { max-width: none; white-space: nowrap }
@media (max-width: 760px){ .sec-lead--1line { white-space: normal; max-width: 58ch } }
/* スマホ：セクション見出しは全ページ左揃え・説明文は流し込み
   （WHY NOW / STRENGTHS / CLOSED LOOP / COMPANY PROFILE / HISTORY / GROUP / PROCESS / TECHNOLOGY） */
@media (max-width: 860px){
  .sec-head.center { text-align: left; margin-inline: 0 }
  .sec-head.center .sec-lead { margin-inline: 0; max-width: none; white-space: normal }
  .sec-head.center .sec-lead br { display: none }
}

/* OUR STORY プロローグ（about）：和文コピーを主役に（英語コンセプトは署名アクセントへ） */
.ourstory-prologue-jp {
  font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.55rem); line-height: 1.34;
  letter-spacing: .02em; color: var(--ink); margin: 0 0 14px;
}
.ourstory-prologue-sig {
  font-family: var(--font-en); font-weight: 600;
  font-size: clamp(.78rem, 1.3vw, .95rem); letter-spacing: .3em;
  text-transform: uppercase; color: #7f948b; margin: 0 0 26px;
}

/* INTRO / PHILOSOPHY プロローグ（センター）：和文メッセージを主役に、英語はアイブロウへ */
.prologue-eyebrow {
  display: block; font-family: var(--font-en); font-weight: 600;
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: #2e6b4f; margin-bottom: 18px;
}
.prologue-lead {
  font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.5;
  letter-spacing: .02em; color: var(--ink); margin: 0 0 20px;
}

/* 事業内容INTRO：テキスト左＋花びら図右（明背景用に影を最適化） */
.intro-text { position: relative; z-index: 1 }
.intro-biz-diagram { width: 100%; max-width: 420px; margin-inline: auto }
.biz2-diagram.intro-biz-diagram img { filter: drop-shadow(0 7px 18px rgba(15,42,34,.26)) }

/* Small decorative label (kept for feature cards) */
.ttl-en {
  font-family: var(--font-en); letter-spacing: .22em; font-size: .68rem;
  text-transform: uppercase; color: var(--leaf); font-weight: 500;
}

/* Old sec-label (kept for compatibility in feature bodies) */
.sec-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-en); letter-spacing: .22em; font-size: .68rem;
  text-transform: uppercase; color: var(--leaf); font-weight: 500; margin-bottom: 10px;
}
.section--dark .sec-label { color: var(--leaf-soft) }
.sec-label::before {
  content: ""; width: 16px; height: 16px; border: 1.5px solid currentColor;
  border-radius: 50%; border-top-color: transparent; border-right-color: transparent;
  display: inline-block; transform: rotate(45deg);
}

/* ========== PAGE HERO (sub-pages) ========== */
.page-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(45px, 6.5vw, 80px) 0 clamp(30px, 4vw, 50px);
  z-index: 1;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--green-deep) 0%, var(--green-dark) 60%, var(--green) 100%);
}
.page-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 150% at 100% -10%, rgba(107,175,69,.22), transparent 55%);
}
/* ABOUT帯：about_view2.jpg を透かしで重ねる（緑にブレンド／テキストは前面） */
.page-hero--about .page-hero-bg { background: url(../img/about_view2.jpg?v=2) 50% 14% / cover no-repeat }
.page-hero--about .page-hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(9,40,29,.82) 0%, rgba(12,44,34,.55) 48%, rgba(14,42,34,.42) 100%) }
/* BUSINESS帯：business-back.jpg を透かしで重ねる（濃淡＝ABOUTと同一グラデ） */
.page-hero--business .page-hero-bg { background: url(../img/business-back3.jpg) center/cover no-repeat }
.page-hero--business .page-hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(9,40,29,.82) 0%, rgba(12,44,34,.55) 48%, rgba(14,42,34,.42) 100%) }
/* TECHNOLOGY帯：ourstory7.png を透かしで重ねる（濃淡＝ABOUTと同一グラデ） */
.page-hero--tech .page-hero-bg { background: url(../img/strong2.jpg) 50% 20% / cover no-repeat }
.page-hero--tech .page-hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(9,40,29,.82) 0%, rgba(12,44,34,.55) 48%, rgba(14,42,34,.42) 100%) }
.page-hero--contact .page-hero-bg { background: url(../img/toiawase_image2.jpg) center / cover no-repeat }
.page-hero--privacy .page-hero-bg { background: url(../img/privacy_image3.jpg) 50% 40% / cover no-repeat }
.page-hero--privacy .page-hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(9,40,29,.82) 0%, rgba(12,44,34,.55) 48%, rgba(14,42,34,.42) 100%) }
.page-hero--contact .page-hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(9,40,29,.82) 0%, rgba(12,44,34,.55) 48%, rgba(14,42,34,.42) 100%) }
/* ヒーローの大文字は合体アウトラインのSVG画像を使用 */
.page-hero-word {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%); z-index: 0;
  height: clamp(60px, 13.5vw, 185px); width: auto;
  opacity: .5; pointer-events: none; user-select: none;
}
.page-hero .container { position: relative; z-index: 1 }
.page-hero-eyebrow {
  font-family: var(--font-en); letter-spacing: .32em; font-size: .66rem;
  color: var(--leaf-soft); text-transform: uppercase; margin-bottom: 10px;
}
/* 帯：和文見出しを主役に大きく、英字は小さく下に（全ページ共通） */
.page-hero h1 {
  font-family: var(--font-jp); font-size: clamp(1.45rem, 3.5vw, 2.4rem);
  font-weight: 700; letter-spacing: .04em; text-transform: none;
  line-height: 1.3; color: #fff; margin-bottom: 10px;
}
.page-hero-jp { font-size: clamp(.96rem, 2vw, 1.2rem); color: rgba(255,255,255,.65); letter-spacing: .06em }
.page-hero-en-small { font-family: var(--font-en); font-size: clamp(.85rem, 1.8vw, 1.1rem); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--leaf-soft); margin: 0 }
.crumbs { font-size: .76rem; color: rgba(255,255,255,.38); margin-top: 18px }
.crumbs a:hover { color: rgba(255,255,255,.75) }

/* ========== GRID ========== */
.grid { display: grid; gap: 28px }
.cols-2 { grid-template-columns: repeat(2, 1fr) }
.cols-3 { grid-template-columns: repeat(3, 1fr) }
.cols-4 { grid-template-columns: repeat(4, 1fr) }
.cols-2-center { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center }

/* ========== CARDS ========== */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 38px 32px; box-shadow: var(--shadow-soft); transition: .3s; position: relative; z-index: 1;
  overflow: hidden;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow) }
.card-media {
  margin: -38px -32px 22px; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card-media img { transform: scale(1.05) }
.card-icon {
  width: 52px; height: 52px; border-radius: 12px; background: var(--bg-tint2);
  color: var(--green); display: grid; place-items: center; margin-bottom: 20px;
}
.card-icon svg { width: 26px; height: 26px }
.card-title { font-size: 1.1rem; margin-bottom: 10px; color: var(--green-dark); letter-spacing: .04em }
/* プライバシーポリシー等の本文 */
.legal { max-width: 860px; margin-inline: auto; position: relative; z-index: 1 }
.legal > p { color: var(--ink); line-height: 1.95; margin: 0 0 16px }
.legal h2 { font-size: 1.2rem; color: var(--green-dark); margin: 44px 0 14px; padding-bottom: 9px; border-bottom: 2px solid var(--line); letter-spacing: .04em }
.legal ul { margin: 0 0 16px; padding-left: 1.3em; color: var(--ink); line-height: 1.9 }
.legal li { margin-bottom: 6px }
.legal a { color: var(--green); text-decoration: underline }
.legal address { font-style: normal; line-height: 1.95; color: var(--ink) }
.legal .legal-meta { margin-top: 44px; color: var(--muted); font-size: .9rem; line-height: 1.8 }
/* STRENGTHS：細かい緑ドットのハーフトーン背景 */
#strengths {
  background-color: #f7f8f8;
  background-image: radial-gradient(rgba(255,255,255,.9) 1.4px, transparent 1.6px);
  background-size: 11px 11px;
}
/* WHY NOW：背景にWORLD画像を薄く透かしで敷く */
#whynow { position: relative; overflow: hidden }
#whynow::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url(../img/world2.jpg) center / cover no-repeat;
  opacity: .14;
}
#whynow > .container { position: relative; z-index: 1 }
@media (max-width: 760px) {
  /* スマホ：WHY NOW背景をWHY NOWの始まりから見えるよう上寄せ＋拡大 */
  #whynow::before { background-size: 155% auto; background-position: center top; opacity: .18 }
}
/* 技術とこだわり：装置カード・WHY NOWカードの見出しを大きく */
#technology .card-title, #whynow .card-title { font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin-bottom: 12px }
/* WHY NOW：「再生材の品質が大幅に改善」がカード幅に収まるよう字送りとサイズを微調整 */
#whynow .card-title { font-size: clamp(1.1rem, 1.72vw, 1.45rem); letter-spacing: .01em }
/* WHY NOW の数値は3項目のため3列に */
#whynow .stats { grid-template-columns: repeat(3, 1fr) }
/* WHY NOW の数値は OUR STORY のピックアップ数字とサイズ・太さを揃える */
#whynow .stat-num { font-size: clamp(2.8rem, 5.5vw, 4rem); font-weight: 700 }
#whynow .stat-num small { font-size: .28em; font-weight: 500; margin-left: 3px; white-space: nowrap }
/* 「/4」は欧文のため同じ指定でも和文より字面が小さく見える。「拠点」と字面の高さが揃うよう約1.11倍に */
#whynow .stat:first-child .stat-num small { font-size: .31em }
/* WHY NOWの画像は縦長・横長が混在するため、切り取らず全体を表示（余白は各画像の地色に合わせる） */
#whynow .card-media img { object-fit: contain }
#whynow .card:nth-child(1) .card-media img { background: #FBFAFA }
#whynow .card:nth-child(2) .card-media img { background: #F5F3F4 }
#whynow .card:nth-child(3) .card-media img { background: #F3F1F2 }
#whynow .card:hover .card-media img { transform: none }
/* WHY NOW：3枚とも緑背景・白文字で統一 */
#whynow .card { background: var(--green); border-color: var(--green) }
#whynow .card .card-title { color: #fff }
#whynow .card .card-text { color: rgba(255,255,255,.9) }
#technology .card-icon { width: 84px; height: 84px; border-radius: 16px; margin: 0 auto 24px; transition: background-color .25s ease, color .25s ease }
#technology .card-icon svg { width: 46px; height: 46px; stroke-width: 1.6 }
/* ホバーでアイコンの色が変わる（背景=緑／アイコン=白） */
#technology .card:hover .card-icon { background: var(--green); color: #fff }
/* 装置カードはアイコン・装置名をセンター揃え。説明文はボックスに流し込み（左揃え） */
#technology .card { text-align: center }
#technology .card-text { text-align: left }
.card-text { color: var(--muted); font-size: .92rem; margin: 0; line-height: 1.85 }

/* CLOSED LOOP 調整 */
.closedloop .sec-head.center { max-width: none }
.closedloop .sec-lead { max-width: none; white-space: nowrap }
.closedloop .card-title { font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 700; white-space: nowrap }
.closedloop-extra { margin-top: 48px }
.closedloop-extra .card { max-width: 560px; margin-inline: auto; text-align: center; background: var(--green); border-color: var(--green) }
.closedloop-extra .card-title { color: #fff }
.closedloop-extra .card-text { color: rgba(255,255,255,.88) }
.closedloop-extra .card { transition: background-color .25s, border-color .25s }
.closedloop-extra .card:hover { background: var(--leaf); border-color: var(--leaf) }
@media (max-width: 960px){
  .closedloop .sec-lead { white-space: normal; max-width: 58ch }
}
@media (max-width: 560px){
  .closedloop .card-title { white-space: normal }
}

/* ========== PILLARS ========== */
.pillar {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 42px 34px 36px; overflow: hidden; box-shadow: var(--shadow-soft); transition: .3s; z-index: 1;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow) }
.pillar-no {
  font-family: var(--font-en); font-size: 4rem; font-weight: 700;
  color: var(--bg-tint2); line-height: 1; position: absolute; top: 14px; right: 20px;
}
.pillar h3 { font-size: 1.2rem; color: var(--green-dark); margin-bottom: 8px; letter-spacing: .05em }
.pillar .ttl-en { display: block; margin-bottom: 14px; font-size: .66rem }
.pillar p { color: var(--muted); font-size: .92rem; margin: 0 }

/* ========== FEATURE (image + text) ========== */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.feature + .feature { margin-top: 90px }
.feature--reverse .feature-media { order: 2 }
.feature-media img, .feature-media .ph { border-radius: var(--radius); box-shadow: var(--shadow); width: 100% }
/* 縦長写真は横幅を抑えて、列内で中央に配置 */
.feature-media--portrait img { max-width: 260px; margin-inline: auto; display: block }
/* 縦長写真2枚を横並び（ペア）で配置 */
.feature-media--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.feature-media--duo img { width: 100%; display: block }
/* 3枚コラージュ：縦長を左に大きく、横長2枚を右に積む */
.feature-media--trio {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  grid-template-areas: "c a" "c b";
}
.feature-media--trio img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none }
.feature-media--trio img:nth-child(1) { grid-area: c }
.feature-media--trio img:nth-child(2) { grid-area: a }
.feature-media--trio img:nth-child(3) { grid-area: b }
@media (max-width: 560px) {
  .feature-media--trio { grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "a b" }
}
/* ===== 事業内容タブUI ===== */
.biztab-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 0; position: relative; z-index: 2 }
.biztab-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; padding: 15px 12px;
  background: #fff; border: 2px solid var(--c); border-radius: 12px;
  color: var(--ink); font-weight: 700; font-size: clamp(1rem, 1.35vw, 1.22rem);
  letter-spacing: .02em; line-height: 1.35; text-align: center; cursor: pointer; transition: .25s;
}
/* タブごとの色を花びらに合わせる */
.biztab-btn[data-tab="1"] { --c: #DD8420 }
.biztab-btn[data-tab="2"] { --c: #A2BC20 }
.biztab-btn[data-tab="3"] { --c: #C1332B }
.biztab-btn[data-tab="4"] { --c: #2E75B5 }
.biztab-btn:hover { background: color-mix(in srgb, var(--c) 8%, #fff) }
.biztab-no { font-family: var(--font-en); font-weight: 700; font-size: 1.85rem; line-height: 1; color: var(--c) }
.biztab-btn.is-active { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 100%); border-color: var(--c); color: #fff }
.biztab-btn.is-active:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 100%) }
.biztab-btn.is-active .biztab-no { color: #fff }
/* アクティブなインデックスを下のパネル（紙）に接続して見せる */
.biztab-btn.is-active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -3px; padding-bottom: 12px }
/* 紹介パネルを1枚の「紙」に */
.biztab-panels { background: var(--bg-tint); border: 2px solid var(--line); border-radius: 14px; padding: clamp(28px, 3.5vw, 48px); position: relative; z-index: 1 }
.biztab-panel { display: none }
.biztab-panel.is-active { display: block; animation: biztabIn .5s ease }
@keyframes biztabIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.biztab-feature { margin-top: 0 }
/* タブパネル内：本文上のプロセスイラスト */
.biztab-illust { display: block; width: 100%; height: auto; margin: 0 0 20px }
/* 4パネルで写真エリアの高さを統一 */
.biztab-feature .feature-media { height: clamp(300px, 30vw, 400px) }
/* 再生原料事業：右の写真は左寄りにトリミング */
.biztab-panel[data-panel="1"] .feature-media--duo img:nth-child(2) { object-position: 28% center }
.biztab-feature .feature-media--trio { grid-template-rows: 1fr 1fr }
.biztab-feature .feature-media img { height: 100%; object-fit: cover }
/* プラント・機械開発の写真は右寄りにトリミング */
.biztab-panel[data-panel="2"] .feature-media img { object-position: 72% center }
/* スマホの3枚コラージュ（03 着色・コンパウンド）：高さ固定だと写真が下にはみ出し、
   イラスト・見出し・本文に重なるため、比率指定で自然な高さに収める */
@media (max-width: 560px) {
  .biztab-feature .feature-media--trio { height: auto; grid-template-rows: auto auto }
  .biztab-feature .feature-media--trio img { height: auto }
  .biztab-feature .feature-media--trio img:nth-child(1) { aspect-ratio: 16 / 10 }
  .biztab-feature .feature-media--trio img:nth-child(2),
  .biztab-feature .feature-media--trio img:nth-child(3) { aspect-ratio: 4 / 3 }
}
@media (prefers-reduced-motion: reduce) { .biztab-panel.is-active { animation: none } }
@media (max-width: 760px) {
  .biztab-nav { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px }
  .biztab-btn { min-height: 80px; padding: 12px 10px; font-size: clamp(.95rem, 3.2vw, 1.1rem) }
  .biztab-btn.is-active { border-radius: 12px; margin-bottom: 0; padding-bottom: 12px }
  .biztab-no { font-size: 1.6rem }
}
/* 狭い列に収める小型カード（着色・コンパウンドの物性4項目など） */
.cards--compact { gap: 14px }
.cards--compact .card { padding: 18px 18px }
.cards--compact .card-title { font-size: 1.1rem; margin-bottom: 6px }
.cards--compact .card-text { font-size: .82rem; line-height: 1.7 }
.feature-body { position: relative; z-index: 1 }
.feature-body h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--green-dark); margin-bottom: 10px; letter-spacing: .04em }
.feature-body h3 { font-size: 1.5rem; color: var(--green-dark); margin-bottom: 10px; letter-spacing: .04em }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.tag { font-size: .76rem; background: var(--bg-tint2); color: var(--green-dark); padding: 5px 14px; border-radius: 999px; letter-spacing: .04em }

/* ========== ISOMETRIC SECTION ========== */
.iso-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center }
.iso-body { position: relative; z-index: 1 }
.iso-media { position: relative; z-index: 1 }
.iso-media img, .iso-media svg { width: 100%; display: block }

/* REBORN EVERYWHERE 2×2グリッド＋中央円 */
.reborn-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 12px }
.reborn-cell { display: flex; flex-direction: column }
.reborn-cell img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 4px }
.reborn-label { text-align: center; font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: #26302b; padding: 10px 0 }
.reborn-grid .reborn-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; border: 8px solid #fff; box-shadow: 0 12px 34px rgba(15,42,34,.22); z-index: 2 }
@media (max-width: 600px){
  .reborn-grid { column-gap: 8px; row-gap: 8px }
  .reborn-label { font-size: .82rem; padding: 7px 0 }
  .reborn-grid .reborn-center { border-width: 6px }
}

/* ========== PROCESS FLOW ========== */
/* 再生原料製造の工程：縦フロー（flow.jpg デザイン準拠） */
.flow { max-width: 880px; margin-inline: auto; position: relative; z-index: 1 }
.flow-step { position: relative; padding-bottom: 46px }
.flow-step:last-child { padding-bottom: 0 }

/* 番号の円はカードの内側・左端に配置 */
.flow-badge {
  align-self: center; margin: 12px 16px 12px 20px;
  width: 84px; height: 84px; border-radius: 50%;
  background: #fff; border: 5px solid var(--green);
  display: grid; place-items: center; position: relative; z-index: 2;
}
.flow-badge span { font-family: var(--font-en); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--green) }
/* 次工程への下向き矢印：カードの下、円の真下に */
.flow-step:not(:last-child)::before {
  content: ""; position: absolute; left: 64px; transform: translateX(-50%);
  bottom: 25px; width: 10px; height: 21px; background: var(--green);
}
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; left: 64px; transform: translateX(-50%);
  bottom: 9px; width: 0; height: 0;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 16px solid var(--green);
}

.flow-card {
  background: #fff; border: 2.5px solid var(--green); border-radius: 10px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) 28%; align-items: stretch;
  min-height: 122px;
  transition: transform .3s ease, box-shadow .3s ease;
}
/* ホバー：カードを少し拡大＋影／番号の丸を黄緑に */
.flow-badge { transition: background-color .3s ease, border-color .3s ease }
.flow-badge span { transition: color .3s ease }
.flow-card:hover { transform: scale(1.03); box-shadow: 0 16px 34px -18px rgba(15,42,34,.45) }
.flow-card:hover .flow-badge { background: var(--leaf); border-color: var(--leaf) }
.flow-card:hover .flow-badge span { color: #fff }
.flow-main { padding-bottom: 12px }
.flow-title {
  background: var(--green); color: #fff;
  margin: 0 0 12px; padding: 9px 18px;
  font-size: 1.02rem; font-weight: 700; letter-spacing: .05em;
}
.flow-desc { margin: 0; padding: 0 18px; font-size: .88rem; line-height: 1.8; color: var(--ink) }
.flow-ill { position: relative; display: grid; place-items: center; padding: 14px 8px }
/* イラスト背景の楕円：横に平たい淡緑（flow.jpg 実測 #ECF8EC・約2.5:1） */
.flow-ill::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 96%; aspect-ratio: 2.5 / 1; border-radius: 50%; background: #ECF8EC;
}
.flow-ill img { position: relative; width: auto; height: auto; max-width: 92%; max-height: 100px; display: block }
/* 一部工程のイラストは、カード高さは変えずに視覚的に拡大 */
.flow-step:nth-child(1) .flow-ill,
.flow-step:nth-child(2) .flow-ill,
.flow-step:nth-child(3) .flow-ill,
.flow-step:nth-child(5) .flow-ill,
.flow-step:nth-child(7) .flow-ill { overflow: visible }
.flow-step:nth-child(1) .flow-ill img { transform: scale(1.24); transform-origin: center }
.flow-step:nth-child(2) .flow-ill img { transform: scale(1.3); transform-origin: center }
.flow-step:nth-child(3) .flow-ill img { transform: scale(1.28); transform-origin: center }
.flow-step:nth-child(5) .flow-ill img { transform: scale(1.26); transform-origin: center }
.flow-step:nth-child(7) .flow-ill img { transform: scale(1.24); transform-origin: center }

/* ========== STATS ========== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px }
.stat { text-align: center; padding: 20px; position: relative; z-index: 1 }
.stat-num { font-family: var(--font-en); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 500; color: var(--green); line-height: 1 }
.section--dark .stat-num { color: var(--leaf-soft) }
.stat-num small { font-size: .38em; margin-left: 4px; color: var(--muted) }
.stat-label { font-size: .94rem; color: var(--muted); margin-top: 10px }
.section--dark .stat-label { color: rgba(188,208,198,.85) }


/* ========== GALLERY ========== */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.gallery figure {
  margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-soft); transition: .3s; position: relative; z-index: 1;
}
.gallery figure:hover { transform: translateY(-5px); box-shadow: var(--shadow) }
.gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100% }
.gallery .fig-blank { aspect-ratio: 4/3; width: 100%; display: flex; align-items: center; justify-content: center; background: #eef1ee; color: #9aa8a0; font-size: .82rem; letter-spacing: .12em }
.gallery figcaption { padding: 16px 18px; line-height: 1.3 }
.gallery figcaption b { display: block; color: var(--green-dark); font-size: 1.4rem; letter-spacing: .04em; margin-bottom: 6px }
.gallery figcaption span { font-size: .8rem; color: var(--muted); line-height: 1.45 }

/* ========== FACILITIES（拠点・工場）リニューアル ========== */
/* 上部：タイトル＋拠点数（左）／日本地図（右） */
.fac-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.72fr); gap: clamp(24px,4vw,56px); align-items: center; position: relative; z-index: 1 }
.fac-title { margin-bottom: clamp(26px,3.2vw,40px) }
.fac-title .sec-en-title { margin: 0; color: #fff }
.fac-title .sec-jp-sub { margin: 4px 0 0; color: rgba(255,255,255,.85) }
.fac-stat { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px,2.6vw,36px); align-items: center; margin-bottom: clamp(18px,2vw,26px) }
.fac-stat-box { border: 1px solid rgba(255,255,255,.4); padding: 14px 10px; text-align: center; min-width: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px }
.fac-stat-lbl { font-size: .9rem; color: rgba(255,255,255,.9); letter-spacing: .06em }
.fac-stat-n { color: #fff; font-size: 1rem }
.fac-stat-n b { font-family: var(--font-en); font-size: clamp(1.9rem,3.2vw,2.7rem); font-weight: 700; margin-right: 3px }
.fac-stat-list { list-style: none; margin: 0; padding: 0; color: #fff; display: grid; gap: 9px }
.fac-stat-list li { position: relative; padding-left: 20px; font-size: .98rem; line-height: 1.35 }
.fac-stat-list li::before { content: "・"; position: absolute; left: 0; color: var(--leaf-soft) }
.fac-stat-list--dots li { min-height: 1em }
.fac-top-map { display: block }
.fac-top-map img { width: 100%; max-width: 360px; height: auto; display: block }
/* 全国回収拠点マップ */
.fac-map-cap { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .04em; margin: 0 0 12px; text-align: center }
.fac-japan-map { width: 100%; height: clamp(380px, 42vw, 560px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); background: #eef0ec }
.fac-japan-map.leaflet-container { background: #eef0ec; font: inherit }
.fac-japan { position: relative; max-width: 360px; margin: 0 auto }
.fac-japan img { width: 100%; height: auto; display: block }
.fac-mappin { position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; border: 2.5px solid #fff; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,.4) }
.fac-mappin--self { background: #d3313a; border-radius: 2px }
.fac-mappin--partner { background: #0b5c2c; border-radius: 50% }

/* FACILITIES サマリー（番号ボックス＋map2.png・添付レイアウト） */
.fac2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 56px); align-items: start }
.fac2-left .fac-title { margin-bottom: 26px }
.fac2-box { display: grid; grid-template-columns: 33% 1fr; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; overflow: hidden; margin-bottom: 20px }
.fac2-box-lbl { background: rgba(255,255,255,.06); padding: 22px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff }
.fac2-box-t { font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 12px }
.fac2-box-n { font-size: 1.2rem; letter-spacing: .04em }
.fac2-box-n b { font-family: var(--font-en); font-weight: 700; font-size: 3.5rem; margin-right: 3px; line-height: 1 }
.fac2-list { list-style: none; counter-reset: f; margin: 0; padding: 16px 22px; display: flex; flex-direction: column; justify-content: center }
.fac2-list li { counter-increment: f; display: flex; align-items: center; gap: 12px; padding: 3px 0; color: #fff; font-size: 1.08rem; font-weight: 700; letter-spacing: .02em }
.fac2-list li::before { content: counter(f); flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: .74rem; font-weight: 700; color: #fff }
.fac2-list--self li::before { background: #d3313a }
.fac2-list--partner li::before { background: #0b5c2c }
.fac2-right { position: relative; margin-top: clamp(24px, 4vw, 60px) }
.fac2-map { width: 100%; height: auto; display: block }
.fac2-info { position: absolute; left: 0; top: 5%; z-index: 1; max-width: 46%; display: flex; flex-direction: column; align-items: center; gap: 24px }
.fac2-circle { width: clamp(118px, 13vw, 168px); height: clamp(118px, 13vw, 168px); border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 700; font-size: clamp(.9rem, 1.35vw, 1.15rem); line-height: 1.7; letter-spacing: .04em }
.fac2-legend { display: flex; flex-direction: column; align-items: center; gap: 14px }
.fac2-lg-item { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: .98rem }
.fac2-lg { width: 20px; height: 20px; flex: none; box-sizing: border-box }
.fac2-lg--self { background: #d3313a; border: 2px solid #fff; border-radius: 2px }
.fac2-lg--partner { background: #0b5c2c; border: 2px solid #fff; border-radius: 50% }
@media (max-width: 900px) {
  .fac2 { grid-template-columns: 1fr; gap: 30px }
  .fac2-right { max-width: 440px; margin-inline: auto }
  .fac2-info { position: static; flex-direction: row; align-items: center; justify-content: center; gap: 26px; max-width: none; margin-bottom: 16px }
}
@media (max-width: 560px) {
  .fac2-box { grid-template-columns: 1fr }
  .fac2-box-lbl { flex-direction: row; justify-content: center; gap: 12px; padding: 12px }
  .fac2-box-t { margin-bottom: 0 }
  /* 円（協和関連会社 全国回収拠点）の右に凡例（自社工場/協力工場）を横並びで置く */
  .fac2-info { flex-direction: row; gap: 18px }
  .fac2-legend { align-items: flex-start; gap: 12px }
}
.fac-jp-pin { box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15,42,34,.5) }
.fac-jp-pin--self { background: #d3313a; border-radius: 2px }
.fac-jp-pin--partner { background: #2f8a3e; border-radius: 50% }
.fac-legend { display: flex; gap: 26px; justify-content: center; margin-top: 14px; color: rgba(255,255,255,.92); font-size: .92rem }
.fac-legend-item { display: inline-flex; align-items: center; gap: 8px }
.fac-legend-dot { width: 13px; height: 13px; border: 2px solid #fff; display: inline-block; box-sizing: border-box }
.fac-legend-dot--self { background: #d3313a; border-radius: 2px }
.fac-legend-dot--partner { background: #0b5c2c; border-radius: 50% }

/* 下部：エリアごとの Googleマップ＋工場カード */
.fac-area { margin-top: clamp(44px,5.5vw,72px); position: relative; z-index: 1 }
.fac-area-head { display: flex; align-items: center; gap: 22px; color: #fff; font-size: clamp(1.15rem,1.8vw,1.45rem); font-weight: 700; letter-spacing: .04em; margin-bottom: clamp(18px,2.4vw,28px) }
.fac-area-head::after { content: ""; flex: 1; height: 2px; background: rgba(255,255,255,.38) }
.fac-area-body { display: grid; grid-template-columns: minmax(0,42%) 1fr; gap: clamp(20px,3vw,36px); align-items: stretch }
.fac-area-map { position: relative; border-radius: var(--radius); overflow: hidden; min-height: clamp(300px,34vw,470px); background: #e6e8e4; box-shadow: var(--shadow-soft) }
.fac-area-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.fac-area-map .fac-map-canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.fac-area-map .fac-map-canvas.leaflet-container { background: #e6e8e4; font: inherit }
/* 三重（単独カード）：マップ高さを工場写真＋住所カードの高さに合わせる */
.fac-area--single .fac-area-map { min-height: 0 }
.leaflet-popup-content { font-size: .82rem; color: var(--ink) }
/* 番号付きピン（緑ブランド） */
.fac-pin { background: none; border: 0 }
.fac-pin-body { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #d3313a; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(15,42,34,.4) }
.fac-pin-body i { transform: rotate(45deg); font-style: normal; color: #fff; font-size: .82rem; font-weight: 700; font-family: var(--font-en, sans-serif); line-height: 1 }
.fac-cards figcaption b .fac-cardno { color: #d3313a; font-size: inherit; line-height: inherit }
.fac-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.6vw,20px); align-content: start }
.fac-cards figure { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); transition: .3s }
.fac-cards figure:hover { transform: translateY(-4px); box-shadow: var(--shadow) }
.fac-cards img { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block }
.fac-cards figcaption { padding: 12px 15px; line-height: 1.25 }
.fac-cards figcaption b { display: block; color: var(--green-dark); font-size: 1.18rem; letter-spacing: .02em; margin-bottom: 6px }
.fac-cards figcaption span { font-size: .82rem; color: var(--muted); line-height: 1.5 }

@media (max-width: 860px){
  .fac-top { grid-template-columns: 1fr; gap: 30px }
  .fac-top-map { max-width: 320px; margin-inline: auto }
  .fac-area-body { grid-template-columns: 1fr }
  .fac-area-map { min-height: 0; aspect-ratio: 16/10 }
}
@media (max-width: 520px){
  .fac-stat { grid-template-columns: 1fr; gap: 12px; justify-items: start }
  .fac-cards { grid-template-columns: 1fr }
}

/* ========== INFO TABLE ========== */
.info-table { width: 100%; border-collapse: collapse }
.info-table th, .info-table td {
  text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--line);
  vertical-align: top; font-size: .93rem;
}
.info-table th { width: 28%; color: var(--green-dark); font-weight: 600; background: var(--bg-tint); text-align: center; vertical-align: middle }
.info-table td { color: var(--ink) }
/* 沿革テーブル（日発 company/ に倣う：日付＋緑アクセント／内容） */
.history-table { width: 100%; border-collapse: collapse }
.history-table th, .history-table td { text-align: left; padding: 22px 22px; border-bottom: 1px solid var(--line); vertical-align: top }
.history-table th { width: 26%; color: var(--green-dark); font-weight: 700; font-size: 1rem; letter-spacing: .04em; position: relative; white-space: nowrap }
.history-table th::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green) }
.history-table td { color: var(--ink); font-size: .93rem; line-height: 1.85 }
@media (max-width: 640px){
  .history-table th, .history-table td { display: block; border-bottom: 0; padding: 0 }
  .history-table th { padding: 18px 0 10px; width: auto }
  .history-table th::after { left: 0 }
  .history-table td { padding-bottom: 18px; border-bottom: 1px solid var(--line) }
}

/* ========== PARTNERS ========== */
.partner-group { margin-bottom: 32px; position: relative; z-index: 1 }
.partner-group h4 { font-size: .96rem; color: var(--green); margin-bottom: 12px; padding-left: 14px; border-left: 3px solid var(--leaf); letter-spacing: .04em }
/* 取引先・所属団体：縦配列のリスト */
.partner-list { list-style: none; margin: 0; padding: 0 }
.partner-list li { padding: 9px 4px; font-size: .9rem; color: var(--ink); border-bottom: 1px solid var(--line); break-inside: avoid }
/* 所属団体：HPリンクありはホバーで緑（URL無しはテキストのまま） */
.partner-list a { color: inherit; text-decoration: none; transition: color .2s ease }
.partner-list a:hover { color: var(--leaf) }
/* 取引先は3列（縦にフロー） */
.partner-list--3col { columns: 3; column-gap: 44px }
/* 長い社名（日産トレーディング…）：広い画面は1行、狭い画面は折り返し（溢れ防止） */
.partner-list--3col li.pl-1line { white-space: nowrap; font-size: .82rem; letter-spacing: -.01em }
@media (max-width: 1200px){ .partner-list--3col li.pl-1line { white-space: normal; font-size: inherit; letter-spacing: normal } }
@media (max-width: 760px){ .partner-list--3col { columns: 2; column-gap: 32px } }
@media (max-width: 480px){ .partner-list--3col { columns: 1 } }

/* ========== CTA BAND ========== */
.cta-band {
  background: linear-gradient(125deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff; border-radius: 20px; padding: clamp(22px, 3.5vw, 38px) clamp(44px, 7vw, 76px); text-align: center;
  position: relative; overflow: hidden; z-index: 1;
}
.cta-band::before {
  content: ""; position: absolute; width: 360px; height: 360px;
  border: 48px solid rgba(255,255,255,.05); border-radius: 50%; right: -130px; bottom: -140px;
}
.cta-band h2 { font-size: clamp(1.25rem, 2.5vw, 1.8rem); margin-bottom: 14px; letter-spacing: .04em }
.cta-band p { color: rgba(220,238,228,.88); max-width: 52ch; margin: 0 auto 32px }
/* CTAを全幅の帯にしてフッター上に隙間なく密着（角丸なし・section下余白ゼロ・tint背景解除） */
.section:has(.cta-band) { background: transparent; padding: 0 }
.section:has(.cta-band) > .container { max-width: none; width: 100%; padding-inline: 0 }
/* CTA帯の直前セクション（CLOSED LOOP）の下余白を詰めて、間の白空白をなくす */
.closedloop { padding-bottom: clamp(76px, 9vw, 124px) }
/* 画像付きCTA：画像を左・テキストを左揃えで右（中央max-widthコンテナ／モバイルは縦積み） */
.cta-band--split { text-align: left }
.cta-split { position: relative; z-index: 1; width: 90%; max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 27%) 1fr; align-items: center; gap: clamp(36px, 5.5vw, 76px) }
.cta-band--split h2 { font-size: clamp(1.2rem, 2.3vw, 1.7rem) }
.cta-split-img { border-radius: 14px; overflow: hidden; box-shadow: 0 16px 36px rgba(0,0,0,.28) }
.cta-split-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: 50% 68%; transform: scale(1.12); display: block }
/* 事業内容CTAの写真（高純度を生む、独自技術。）は上寄りにトリミング */
.cta-split-img img[src*="strong2"] { object-position: 50% 42% }
.cta-band--split h2 { margin-bottom: 12px }
.cta-band--split p { max-width: none; margin: 0 0 24px }
@media (max-width: 760px) { .cta-split { grid-template-columns: 1fr; gap: 22px } }
/* CTA：企業様向けと採用向けを併記（左右2列＋仕切り線） */
.cta-split--duo { grid-template-columns: minmax(0, 20%) 1fr }
.cta-duo { display: grid; grid-template-columns: 0.86fr 1fr; gap: clamp(26px, 3.2vw, 46px) }
.cta-duo .cta-col + .cta-col {
  border-left: 3px solid rgba(255,255,255,.34);
  padding-left: clamp(26px, 3.2vw, 46px);
}
.cta-duo h2 { font-size: clamp(1.05rem, 1.6vw, 1.35rem) }
.cta-duo p { font-size: .9rem; margin-bottom: 18px }
@media (max-width: 900px) {
  .cta-split--duo { grid-template-columns: 1fr }
  .cta-duo { grid-template-columns: 1fr; gap: 24px }
  .cta-duo .cta-col + .cta-col {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.20); padding-top: 24px;
  }
}
.cta-band { border-radius: 0; padding-block: clamp(28px, 3vw, 42px) }
.cta-band p { margin-bottom: 22px }

/* CTA：企業様向け／採用向けを左右対称に（仕切り線を帯の中央に配置） */
.cta-split--even {
  position: relative; z-index: 1;
  width: 90%; max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0;
}
.cta-side--corp {
  display: grid; grid-template-columns: minmax(0, 33%) 1fr;
  align-items: center; gap: clamp(18px, 2.2vw, 28px);
  padding-right: clamp(30px, 3.6vw, 52px);
}
.cta-side--recruit {
  border-left: 1px solid rgba(255,255,255,.20);
  padding-left: clamp(30px, 3.6vw, 52px);
}
.cta-split--even .btn { white-space: nowrap }
.cta-split--even h2 { font-size: clamp(1.05rem, 1.6vw, 1.35rem); margin-bottom: 12px }
.cta-split--even p { font-size: .9rem; margin: 0 0 18px }
@media (max-width: 900px) {
  .cta-split--even { grid-template-columns: 1fr; gap: 24px }
  .cta-side--recruit {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.20); padding-top: 24px;
  }
}
@media (max-width: 760px) {
  .cta-side--corp { grid-template-columns: 1fr; gap: 18px; padding-right: 0 }
}

/* ========== FORM ========== */
.form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 50px); box-shadow: var(--shadow-soft);
}
.form-group { margin-bottom: 24px }
.form-group label { display: block; font-weight: 500; margin-bottom: 8px; color: var(--green-dark); font-size: .92rem }
.req { color: #c0392b; font-size: .75rem; margin-left: 8px; font-weight: 700 }
.opt { color: var(--muted); font-size: .75rem; margin-left: 8px }
.form-control {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .97rem; color: var(--ink); background: #fcfdfc; transition: .2s;
}
.form-control:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,92,74,.1); background: #fff }
textarea.form-control { min-height: 160px; resize: vertical }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.form-group label.check { display: flex; align-items: center; gap: 14px; background: var(--bg-tint); padding: 18px 20px; border-radius: var(--radius-sm); font-size: .9rem; color: var(--muted) }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); flex-shrink: 0 }
.check-text { line-height: 1.5 }
.form-actions { text-align: center; margin-top: 30px }
.form-note { font-size: .8rem; color: var(--muted); margin-top: 14px }
/* お問い合わせの種類（ラジオ） */
.radio-set { border: 0; padding: 0; margin: 0; min-width: 0 }
.radio-set legend { display: block; font-weight: 500; margin-bottom: 8px; color: var(--green-dark); font-size: .92rem; padding: 0 }
.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.form-group label.radio {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: .92rem; color: var(--ink); transition: .2s;
}
.radio:hover { border-color: var(--green) }
.radio input { width: 18px; height: 18px; accent-color: var(--green); flex-shrink: 0; margin: 0 }
.radio:has(input:checked) { border-color: var(--green); background: #fff; box-shadow: 0 0 0 2px rgba(31,92,74,.12) }
@media (max-width: 560px) { .radio-row { grid-template-columns: 1fr } }

.field-error { color: #c0392b; font-size: .8rem; margin-top: 6px; display: none }
.form-control.invalid { border-color: #c0392b }
.form-success { display: none; background: var(--bg-tint2); border: 1px solid var(--leaf); color: var(--green-dark); border-radius: var(--radius); padding: 30px; text-align: center; font-weight: 500 }
/* お問い合わせ：フォーム＋連絡先サイドバー。スマホは1カラム（旧inline指定だと切替わらず右にはみ出していた） */
.contact-grid { grid-template-columns: 1.6fr 1fr; gap: 52px; align-items: start }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px }
}
.contact-side { font-size: .92rem }
.contact-side .big { font-family: var(--font-en); font-size: clamp(2.05rem, 6.2vw, 3rem); line-height: 1.15; color: var(--green); font-weight: 500; letter-spacing: .01em; white-space: nowrap }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: 20px }
.map-embed iframe { display: block; width: 100%; height: 260px; border: 0 }
/* Googleフォーム埋め込み：中身ちょうどの高さにして下部の余白（「？」までの距離）を最小化。PC/スマホ別 */
.gform-embed { position: relative }
.gform-embed iframe { display: block; width: 100%; height: 980px; border: 0; border-radius: 12px }
@media (max-width: 860px) { .gform-embed iframe { height: 1320px } }

/* ========== PLACEHOLDER ========== */
.ph {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #cfe3d7; border-radius: var(--radius); display: grid; place-items: center;
  text-align: center; aspect-ratio: 4/3; font-size: .8rem; letter-spacing: .05em;
}

/* ========== FOOTER ========== */
.site-footer { background: var(--green-deep); color: rgba(195,214,204,.85); padding: 80px 0 32px; font-size: .9rem }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 40px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand .logo-jp { color: #fff; font-size: 1.5rem }
.footer-brand .logo-en { color: var(--leaf-soft) }
.footer-brand p { margin-top: 16px; color: rgba(159,192,174,.75); font-size: .83rem; line-height: 1.95 }
.footer-col h4 { color: rgba(255,255,255,.42); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; font-family: var(--font-en); margin-bottom: 18px }
.footer-col li { margin-bottom: 10px; line-height: 1.55 }
.footer-col a:hover { color: #fff }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 10px }
.copyright { font-family: var(--font-en); font-size: .68rem; letter-spacing: .08em; color: rgba(124,155,138,.7) }
.footer-group { font-size: .78rem; color: var(--leaf-soft) }

/* ========== REVEAL ANIMATION ========== */
.reveal { transition: opacity .75s ease, transform .75s ease }
.js .reveal { opacity: 0; transform: translateY(30px) }
.reveal.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none } }

/* プロローグ画像：左からゆっくりスライドイン（プロローグ感の演出） */
.reveal.reveal-left { transition: opacity 1s ease, transform 1.05s cubic-bezier(.16,.68,.32,1) }
.js .reveal.reveal-left { transform: translateX(-70px) }
.js .reveal.reveal-left.in { transform: none }
.section--story { overflow: hidden }
@media (prefers-reduced-motion: reduce) { .js .reveal.reveal-left { transform: none } }

/* プロローグ図：右からゆっくりスライドイン（reveal-left の逆） */
.reveal.reveal-right { transition: opacity 1s ease, transform 1.05s cubic-bezier(.16,.68,.32,1) }
.js .reveal.reveal-right { transform: translateX(70px) }
.js .reveal.reveal-right.in { transform: none }
@media (prefers-reduced-motion: reduce) { .js .reveal.reveal-right { transform: none } }

/* ========== RESPONSIVE ========== */
@media (max-width: 980px) {
  .feature { grid-template-columns: 1fr; gap: 32px }
  .feature--reverse .feature-media { order: 0 }
  .cols-4 { grid-template-columns: repeat(2, 1fr) }
  .stats { grid-template-columns: repeat(2, 1fr) }
  .iso-wrap { grid-template-columns: 1fr }
}
@media (max-width: 860px) {
  /* backdrop-filterはfixed子要素の包含ブロックをヘッダーに固定してしまうため、モバイルでは無効化（背景は不透明白なので見た目影響なし）。これによりドロワー/ラッパーがビューポート基準の全高になる */
  /* ※スクロール時(.scrolled)の指定は詳細度が高いため、全状態を明示的に打ち消す必要がある */
  .site-header,
  body.home .site-header,
  body.home .site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none }
  /* ドロワーをラッパーで囲みクリップ→右外への退避が横スクロールを生まない（stickyヘッダー非破壊） */
  .nav-drawer { display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 55 }
  .nav-toggle { display: block; z-index: 60 }
  .header-inner { padding-right: clamp(16px, 4vw, 24px) }
  /* 固定ヘッダー（社名）とヒーローコピーの間隔を広げる */
  .hero-inner { padding-top: clamp(150px, 26vh, 230px); padding-bottom: 60px }
  /* 日発式：全画面グリーンオーバーレイ（左上に会社名／JP大+EN小／電話番号） */
  .gnav {
    position: fixed; inset: 0; width: 100%;
    background: linear-gradient(165deg, var(--green) 0%, #0b3123 100%);
    transform: translateX(100%); transition: transform .4s cubic-bezier(.4,0,.2,1);
    padding: clamp(76px, 12vh, 104px) clamp(28px, 7vw, 56px) clamp(28px, 5vh, 44px);
    display: flex; flex-direction: column;
    pointer-events: auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .gnav.open { transform: none }
  /* 左上の会社名 */
  .gnav-head { display: block; position: absolute; top: clamp(20px, 3.4vh, 30px); left: clamp(28px, 7vw, 56px) }
  /* ※ヘッダーロゴ用の .logo-jp/.logo-en とはクラスを分離（ホーム時の色指定に潰されないため） */
  .gnav a.gnav-logo { display: block; height: auto; padding: 0; color: #fff }
  .gnav-logo-jp { display: block; color: #fff; font-size: clamp(1.6rem, 7vw, 2.1rem); font-weight: 700; letter-spacing: .06em; line-height: 1.15 }
  .gnav-logo-en { display: block; color: var(--leaf); font-size: .64rem; font-family: var(--font-en); letter-spacing: .22em; margin-top: 5px; text-transform: uppercase }
  /* メニュー項目 */
  .gnav ul { flex: 1 1 auto; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; width: 100% }
  .gnav ul::after { display: none }
  .gnav li { border-bottom: 1px solid rgba(255,255,255,.16) }
  .gnav li:first-child { border-top: 1px solid rgba(255,255,255,.16) }
  .gnav li:last-child { border: 0 }
  .gnav a { height: auto; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 14px; padding: clamp(15px, 2.4vh, 21px) 4px; color: #fff }
  .gnav a::after { display: none }
  .gnav a .jp { color: #fff; font-size: clamp(1.15rem, 5vw, 1.42rem); font-weight: 600; line-height: 1 }
  .gnav a .en { color: var(--leaf); font-size: .62rem; font-weight: 500; letter-spacing: .2em; margin-top: 0; text-align: left; text-transform: uppercase }
  .gnav a:hover .jp, .gnav a:active .jp, .gnav a[aria-current="page"] .jp { color: var(--leaf) }
  /* お問い合わせ（CTA）は白い丸ボタン風に */
  .gnav a.nav-cta { margin-top: clamp(18px, 3vh, 26px); flex-direction: row; align-items: center; justify-content: center; gap: 10px; height: auto; padding: 15px 24px; border-radius: 999px; background: #fff; color: var(--green) !important; font-size: 1.02rem; font-weight: 700 }
  .gnav a.nav-cta:hover { background: var(--leaf); color: #fff !important }
  .gnav a.nav-cta .nav-cta-icon { width: 22px; height: 22px }
  /* 電話番号 */
  .gnav-foot { display: block; margin-top: clamp(20px, 3.5vh, 30px); text-align: left }
  .gnav-foot-label { display: block; color: rgba(255,255,255,.8); font-size: 1.08rem; font-weight: 500; letter-spacing: .08em; margin-bottom: 8px }
  /* ※ .gnav a（font-size:1.02rem）に打ち勝つ詳細度が必要。paddingやflexも打ち消す */
  .gnav a.gnav-tel { display: inline-block; height: auto; padding: 0; color: #fff; font-family: var(--font-en); font-size: clamp(2.1rem, 9vw, 2.6rem); font-weight: 700; letter-spacing: .03em; line-height: 1.05 }
  body.nav-open { overflow: hidden }
  .nav-toggle.active .nav-toggle-box span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
  .nav-toggle.active .nav-toggle-box span:nth-child(2) { opacity: 0 }
  .nav-toggle.active .nav-toggle-box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
}
@media (max-width: 680px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr }
  /* 9つの独自技術：スマホはアイコン左＋機械名右の横並び（説明は下・全幅）で縦の長さを圧縮 */
  #technology .card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "text text"; column-gap: 14px; row-gap: 10px; text-align: left; align-items: center }
  #technology .card-icon { grid-area: icon; width: 54px; height: 54px; margin: 0; border-radius: 12px }
  #technology .card-icon svg { width: 30px; height: 30px }
  #technology .card-title { grid-area: title; margin: 0 }
  #technology .card-text { grid-area: text; margin: 0 }
  .cols-2-center { grid-template-columns: minmax(0, 360px) }
  .gallery { grid-template-columns: 1fr 1fr }
  .form-2col { grid-template-columns: 1fr }
  .footer-top { grid-template-columns: 1fr; gap: 30px }
  .flow-step { padding-bottom: 34px }
  .flow-badge { width: 56px; height: 56px; border-width: 4px; margin: 10px 10px 10px 12px }
  .flow-badge span { font-size: 1.4rem }
  .flow-step:not(:last-child)::before { left: 40px; height: 15px; width: 8px; bottom: 19px }
  .flow-step:not(:last-child)::after { left: 40px; bottom: 6px; border-left-width: 10px; border-right-width: 10px; border-top-width: 13px }
  .flow-card { min-height: 0; grid-template-columns: auto minmax(0, 1fr) 30% }
  .flow-title { margin: 0 0 8px; padding: 7px 12px; font-size: .92rem }
  .flow-desc { padding: 0 12px; font-size: .8rem }
  .flow-ill img { max-height: 66px }
  .stats { grid-template-columns: 1fr 1fr }
}
@media (max-width: 430px) {
  .gallery { grid-template-columns: 1fr }
  .hero { min-height: 82vh }
  .sec-en-title { letter-spacing: .04em }
}

/* CLOSED LOOP 3Dカルーセル */
.cl-carousel{position:relative;max-width:1000px;margin:44px auto 0;}
.cl-stage{position:relative;height:310px;perspective:1200px;transform-style:preserve-3d;}
.cl-slide{position:absolute;top:0;left:50%;width:440px;height:290px;margin-left:-220px;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s;will-change:transform;}
.cl-card{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 24px 50px -18px rgba(15,42,34,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:#fff;}
.cl-card::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,24,18,.86),rgba(31,92,74,.72));z-index:0;}
.cl-card>*{position:relative;z-index:1;}
.cl-num{font-family:var(--font-en);font-size:2.2rem;font-weight:700;color:var(--leaf-soft);line-height:1;margin-bottom:12px;letter-spacing:.05em;}
.cl-card h3{font-size:1.4rem;letter-spacing:.05em;margin-bottom:14px;color:#fff;}
.cl-card p{font-size:.92rem;line-height:1.85;margin:0;color:rgba(255,255,255,.9);}
.cl-arrow{display:flex;align-items:center;justify-content:center;flex:none;z-index:30;width:52px;height:52px;border-radius:50%;border:0;background:#fff;color:var(--green);font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:var(--shadow-soft);transition:.25s;}
.cl-arrow:hover{background:var(--green);color:#fff;}
.cl-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:26px;}
.cl-dots{display:flex;justify-content:center;gap:10px;}
.cl-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:0;cursor:pointer;padding:0;transition:.25s;}
.cl-dot.is-active{background:var(--green);transform:scale(1.3);}
@media(max-width:640px){.cl-slide{width:300px;margin-left:-150px;height:220px;}.cl-stage{height:240px;}.cl-card{padding:20px;}.cl-arrow{width:44px;height:44px;}}