@charset "utf-8";
/* CSS Document */
.-hbg main .pageColor, .-hbg main .pageColor a {
  color: #000;
}

:root {
  /* ===== タイポグラフィ ===== */
  --font-jp: 'Noto Sans JP', sans-serif;   /* 和文基準 */
  --font-en: 'Plus Jakarta Sans', var(--font-jp), sans-serif; /* 英字ラベル/見出し（和文が混ざった場合はNoto Sans JPにフォールバック） */
  --font-base: 16px;                        /* 本文標準（最小12pxを下回らせない） */

  /* ===== カラー（実使用に合わせて再定義） ===== */
  --text-main: #190317;        /* 本文・見出し（PDF仕様書全体で一貫して使われる黒文字色） */
  --text-sub: #676767;         /* サブ/注釈（無彩色グレー・白で約5.7:1＝AA）。PDF仕様は#808080(AA未達)だが先方確認待ちのため一旦維持 */
  --text-mid: #5a5360;         /* 中濃度プラム（淡背景の上でAAを保つ文字色／solution等） */
  --brand: #0e4383;            /* ブランドネイビー（#0d4384と統一） */
  --brand-hover: #1565c0;      /* ブランドのhover（同意ボタン等） */
  --accent-red: #9f362c;       /* モーダル等の赤茶アクセント */
  --bg-white: #ffffff;
  --bg-light-blue: #dce6ef;
  --bg-section-grey: #f4f5f7;
  --border-grey: #d3d3d3;

  /* ===== レイアウト ===== */
  --content-width: 1200px;     /* 標準インナー幅（hero以外の全セクション共通） */
  --hero-content-width: 1080px; /* heroエリアのみこの幅を維持（--content-widthの対象外） */
  --page-pad: clamp(16px, calc(6.11vw - 6.9px), 40px); /* 左右余白：スマホ(≤375)16px → 768pxで40px → 以降40px上限（375/768の2点を通す線形補間） */
  --gutter: 24px;              /* グリッド溝 */
  --cols: 12;                  /* 12カラム */
  --space: 8px;                /* 余白の基本単位（8pxの倍数で積む） */
  --section-pad: 200px;        /* セクション上下余白の標準（最大目安） */
  --header-height: 80px;
  --marquee-size: clamp(56px, 12vw, 124px); /* ZERO HURDLEマーキーの文字サイズ（hero/bottom-heroで共通） */
}
body {
  margin: 0;
  padding: 0;
}
/* LP本体だけにフォント・色・基準を適用（共通の header / footer には被せない）。
   共通CSSが「.-hbg main .container」に游ゴシックを当てている(0,2,1)ため、
   それより高い詳細度で .container を上書きしてLP全体をNotoにする。 */
.pg-SpecialEcomagicIndex .st-Main .container {
  font-family: var(--font-jp);
  font-size: var(--font-base);
  font-weight: 400;
  color: var(--text-main);
  line-height: 1.6;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.contentBox {
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
  box-sizing: border-box;
}
.sp-br {
  display: none; /* SP専用改行：PCでは無効（SPメディアクエリでinlineに）*/
}
.card-animate {
  opacity: 0;
  transition: opacity 0.6s ease; /* スライド廃止＝その場フェード */
}
.card-animate.is-visible {
  opacity: 1;
}
.animate-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}
/* card-animateの派生：下から浮き上がりながらフェード（flash-spec-media/remote-spec-images専用） */
.card-animate--rise {
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.card-animate--rise.is-visible {
  transform: translateY(0);
}
/* 文字色ワイプ：薄グレーの文字が、下→上へ黒(--text-main)に満ちる（SmartHR風）。
   グレーと黒の2色を1枚のグラデ背景にして文字型に切り抜き(文字自体は透明)、
   2倍丈のグラデの表示位置を上(グレー)→下(黒)へスライドさせる */
.text-fill-wipe {
  background-image: linear-gradient(to top, var(--text-main) 50%, #d4d4d4 50%);
  background-repeat: no-repeat;
  background-size: 100% 200%;  /* 上半分=グレー / 下半分=黒 の2倍丈 */
  background-position: 0 0%;   /* 初期：上(グレー)を表示＝全部グレー */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0.9s ease;
}
.text-fill-wipe.is-visible {
  background-position: 0 100%; /* 下(黒)へスライド＝下から黒く満ちる */
}
/* 白→黒バリアント（bottom-hero等の濃い背景用）：ベースを白にして黒が下から満ちる */
.text-fill-wipe--white {
  background-image: linear-gradient(to top, var(--text-main) 50%, #ffffff 50%);
}
/* グレー→白バリアント（flash-spec等の暗い背景用）：最終色を白にして下から白く満ちる */
.text-fill-wipe--dark {
  background-image: linear-gradient(to top, #ffffff 50%, #666666 50%);
}
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 99999;
  background-color: var(--bg-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.global-header img {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}
.hero {
  position: relative;
  margin-top: -51px;
  width: 100%;
  height: calc(100vh - 110px); /* FV位置のヘッダー実寸110px（共通fixedヘッダー）。下端が100dvhちょうど */
  height: calc(100dvh - 110px);
  background-color: #a0b4c7;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../../assets/img/special/ecomagic/firstview.webp');
  background-image: -webkit-image-set(url('../../assets/img/special/ecomagic/firstview.webp') 1x, url('../../assets/img/special/ecomagic/firstview@2x.webp') 2x);
  background-image: image-set(url('../../assets/img/special/ecomagic/firstview.webp') 1x, url('../../assets/img/special/ecomagic/firstview@2x.webp') 2x);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* テキストエリアは左端から171px（.hero-innerのmargin-leftで一括管理） */
  padding-bottom: calc(var(--marquee-size) * 0.8 + 8px); /* マーキー実高さ(line-height 0.8)+余白ぶんだけ中央を上へ逃がし、被りを防止 */
  box-sizing: border-box;
}
.hero-inner {
  width: min(var(--hero-content-width), calc(100% - var(--page-pad) * 2)); /* heroエリアのみ1080pxを維持 */
  box-sizing: border-box;
  margin-left: 171px; /* ロゴ・見出し・サブタイトル・ボタンで左端を統一 */
}
/* FV登場順：①「ドレン配管工事不要」(hero-title=text-fill-wipe)が先 → ②ロゴ/サブ/ボタンが後（その場フェード）*/
.hero-title {
  transition-delay: 0.3s; /* text-fill-wipe(塗りワイプ)の開始をZERO HURDLEと揃える */
  background-image: linear-gradient(to top, var(--text-main) 50%, rgba(255, 255, 255, 0.5) 50%); /* この見出しだけ半透明白→黒 */
}
.hero-logo-img,
.hero-subtitle,
.hero-btn {
  opacity: 0;
  animation: hero-in 0.8s ease 1.9s both;
}
@keyframes hero-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-logo-img,
  .hero-subtitle,
  .hero-btn { opacity: 1; animation: none; }
}
.hero-logo-img {
  display: block;
  height: 92px;
  width: auto;
  margin-bottom: calc(var(--space) * 3); /* 24px：lp_customに合わせる */
}
.hero-title {
  font-size: clamp(32px, 6vw, 57px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 calc(var(--space) * 3) 0; /* 24px */
  letter-spacing: 0.15em;
  color: var(--text-main);
}
.hero-subtitle {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 calc(var(--space) * 3) 0; /* 24px */
  letter-spacing: 0.1em;
  color: var(--text-main);
}
/* 共通リセット(.-hbg main .container h1/p{margin:0}・詳細度0,2,2)に勝つため詳細度を上げて余白を付与 */
.pg-SpecialEcomagicIndex .st-Main .hero-title {
  margin-bottom: calc(var(--space) * 2); /* 16px：h1↔p・lp_customに合わせる */
}
.pg-SpecialEcomagicIndex .st-Main .hero-subtitle {
  margin-bottom: calc(var(--space) * 6); /* 48px：p↔a・lp_customに合わせる */
}
/* B案：テキスト＋輪郭円(矢印)の共通ボタン。hoverで円が中心から塗り拡がる（daimatsu風）。
   FV(.hero-btn) と merit の Read more(.btn-large) で共有する */
.hero-btn,
.btn-large {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* flex-direction:columnの親(stretch)でも幅を伸ばさず、クリック領域をテキスト+円だけに保つ */
  gap: 24px; /* 文字↔円の間 */
  background-color: transparent;
  border: none;
  text-decoration: none;
  box-shadow: none !important;
}
.btn-large { /* <button> 用リセット */
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.hero-btn-text,
.btn-large-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-main);
  transition: color 0.3s ease;
}
.btn-large-text {
  font-family: 'Plus Jakarta Sans', var(--font-jp), sans-serif; /* 和文ボタン文言も混在するためNoto Sans JPにフォールバック */
}
.hero-btn-circle,
.btn-large-circle {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 1px solid var(--text-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}
.hero-btn-circle::before,
.btn-large-circle::before { /* 中心から塗り拡がる円 */
  content: '';
  position: absolute;
  inset: -1px; /* 容器より少し大きくして境目のガビガビを消す（円の::before自体がクリップ）*/
  background-color: var(--brand);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s ease;
}
.hero-btn-circle .material-symbols-outlined,
.btn-large-circle .material-symbols-outlined {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-main);
  transition: color 0.3s ease;
}
.hero-btn:hover .hero-btn-text,
.btn-large:hover .btn-large-text {
  color: var(--brand);
}
.hero-btn:hover .hero-btn-circle,
.btn-large:hover .btn-large-circle {
  border-color: var(--brand);
}
.hero-btn:hover .hero-btn-circle::before,
.btn-large:hover .btn-large-circle::before {
  transform: scale(1);
}
.hero-btn:hover .hero-btn-circle .material-symbols-outlined,
.btn-large:hover .btn-large-circle .material-symbols-outlined {
  color: var(--bg-white);
}
/* hero内オーバーレイ：ZERO HURDLE（フェード→左へ無限マーキー）*/
.zero-hurdle {
  position: absolute;
  left: 0;
  bottom: 0; /* 完全に下端 */
  width: 100%;
  overflow: hidden;
  opacity: 0; /* 初期：隠す */
  animation: hero-in 0.8s ease 0.3s both; /* フェード出現 */
}
.zero-hurdle-track {
  display: flex;
  width: max-content; /* 全コピー分の幅 */
  white-space: nowrap;
  animation: zh-marquee 90s linear 2.8s infinite; /* hero-inner後に左へ無限スクロール */
}
.zero-hurdle-text {
  flex-shrink: 0;
  margin-right: 0.4em; /* コピー間のアキ（均一＝シームレス用）*/
  font-family: var(--font-en);
  font-size: var(--marquee-size);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.7); /* 半透明の白（lp_customに合わせる） */
}
@keyframes zh-wipe {
  from { -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); }
  to   { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}
@keyframes zh-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 6コピー＝2セット分の半分。シームレス */
}
@media (prefers-reduced-motion: reduce) {
  .zero-hurdle { opacity: 1; animation: none; }
  .zero-hurdle-track { animation: none; }
}
.problems {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: var(--section-pad) 0 0; /* 上200。下は.problems-card自身のpaddingで確保 */
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--bg-white);
}
.problems-inner {
  position: relative;
  z-index: 2; /* 画像に半分重なる見出しを前面に */
  width: min(1600px, calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
}
/* PDF仕様：画像は横幅1600px、見出しの下半分が画像の上端に重なる配置 */
.problems-card {
  position: relative;
  z-index: 1;
  width: min(1600px, calc(100% - var(--page-pad) * 2));
  margin: -260px auto 0; /* 見出しの高さの約半分を負のマージンで引き上げて重ねる */
  padding: 200px 0 100px; /* 本文の位置は変えず、画像だけ上に伸ばすためpadding-topを増加 */
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 16px; /* kinou-white-boxと同じ角丸 */
  /* 白のオーバーレイ(40%)を重ねて画像を60%相当の見え方にし、本文の可読性を上げる */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    url('../../assets/img/special/ecomagic/kowasukabe.webp');
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    -webkit-image-set(url('../../assets/img/special/ecomagic/kowasukabe.webp') 1x, url('../../assets/img/special/ecomagic/kowasukabe@2x.webp') 2x);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    image-set(url('../../assets/img/special/ecomagic/kowasukabe.webp') 1x, url('../../assets/img/special/ecomagic/kowasukabe@2x.webp') 2x);
  background-size: cover, cover;
  background-position: center, center; /* 第2レイヤー(写真)のY位置はJS(scroll)でcenter±30px程度に微調整 */
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed; /* パララックス：画像をビューポートに固定し、カードだけがスクロールして見える範囲が変わる */
}
.problems-card-inner {
  max-width: 1200px; /* カード(1600px)より狭く、文字幅だけ1200px以内に収める */
  margin: 0 auto;
  padding: 0 var(--page-pad);
  box-sizing: border-box;
}
.section-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--bg-white);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 60px 0;
  letter-spacing: 0.15em;
}
.pg-SpecialEcomagicIndex .st-Main .problems-main-title {
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 700;
  color: var(--text-main);
  text-align: left;
  max-width: 1200px; /* カード(1600px)より狭く、文字幅だけ1200px以内に収める */
  line-height: 1.5;
  margin: 0 auto clamp(56px, 9.375vw, 120px); /* font-sizeと同じ仕組みのclamp。最大64px時に120px、比率も含めて追従。左右autoで1200px幅を中央寄せ */
  padding: 0 var(--page-pad); /* box内の本文(.problems-card-inner)と左端を揃える */
  box-sizing: border-box;
  letter-spacing: 0.2em;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt"; /* 約物(？等)の全角アキを詰める（PC/SP共通） */
  transition-delay: 0s;
}
.problems-lead {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 4); /* 32px：段落間 */
  margin: 0 0 calc(var(--space) * 6) 0; /* 48px：本文↓ボタン */
}
.problems-lead-text {
  font-size: 18px;
  color: var(--text-sub);
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin: 0;
}
.obstacles {
  width: 100%;
  padding: 200px 0 160px;
  background-color: var(--bg-white);
  box-sizing: border-box;
  overflow: hidden;
}
.obstacles-inner {
  width: min(1600px, calc(100% - var(--page-pad) * 2)); /* このセクションだけ標準contentBox(1080px)より広い1600px幅 */
  margin: 0 auto 84px;
  box-sizing: border-box;
}
.obstacles-title {
  font-size: clamp(28px, 5vw, 74px);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin: 0;
  text-align: center;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
/* 共通リセット(.-hbg main .container h2{margin:0}・詳細度0,2,2)に勝つため詳細度を上げて余白を付与 */
.pg-SpecialEcomagicIndex .st-Main .obstacles-title {
  margin-bottom: clamp(56px, 8.108vw, 120px); /* font-sizeと同じ仕組みのclamp。最大74px時に120px、比率も含めて追従（problems-main-title/merit-titleと同じ階層） */
}
.obstacles-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0;
}
/* hero の ZERO HURDLE(.zero-hurdle-track / zh-marquee) と同じ考え方：
   5枚+複製5枚(aria-hidden)をtrackに並べ、-50%まで移動して継ぎ目なくループ */
.obstacles-gallery {
  width: min(1600px, calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
  overflow: hidden;
}
.obstacles-gallery-track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: obstacles-marquee 60s linear infinite;
}
.obstacles-gallery-item {
  flex-shrink: 0;
}
/* 5枚は奇数なので「5枚単位」で判定すると複製の継ぎ目(5枚目→複製1枚目)が上下とも同じ高さになってしまう。
   トラック全体の偶数番目で判定すれば、継ぎ目も含めて途切れず上下交互になる */
.obstacles-gallery-item:nth-child(even) {
  margin-top: 80px;
}
.obstacles-gallery-item img {
  display: block;
  height: 412px;
  width: auto;
  border-radius: 8px; /* explanation-img-box等、他の画像と統一 */
}
@keyframes obstacles-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .obstacles-gallery-track { animation: none; }
}
.sequence-section {
  height: 310vh;   /* 250vh(アニメ滑走路) + 60vh(最後のコマで0.6画面ぶん溜めてからスクロール解除) */
  position: relative;
  z-index: 3;
}
.sticky-container {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  width: 100%;
  background-color: var(--bg-light-blue);
  overflow: hidden;
}
#sequence-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transform: translateZ(0);
  will-change: transform;
}
.sequence-fallback-img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.overlay-white-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 284px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100%);
  z-index: 2;
  pointer-events: none;
  transform: translateZ(0);
}
.overlay-kaiketu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center calc(100% + 1px); /* 画像を1px下げ、にじむ下端をsticky-containerのoverflow:hiddenでクリップして白線を消す */
  background-size: auto;
  background-repeat: no-repeat;
  background-image: url('../../assets/img/special/ecomagic/kaiketu.webp');
  background-image: -webkit-image-set(url('../../assets/img/special/ecomagic/kaiketu.webp') 1x, url('../../assets/img/special/ecomagic/kaiketu@2x.webp') 2x);
  background-image: image-set(url('../../assets/img/special/ecomagic/kaiketu.webp') 1x, url('../../assets/img/special/ecomagic/kaiketu@2x.webp') 2x);
  z-index: 3;
  pointer-events: none;
  transform: translateZ(0);
}
.solution-content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.solution-text-box {
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(50% - var(--gutter) / 2);   /* 12カラムの右6カラム分(=grid-column 7/13相当)。problems左テキストと対称 */
  text-align: left;
  transform: translateY(-50%); /* 中央配置（スライド廃止。中身を順に出す）*/
}
.solution-title {
  font-size: clamp(26px, 4vw, 56px);
  font-weight: 700;
  margin: 0 0 32px 0;
  line-height: 1.5;
  letter-spacing: 0.15em;
  /* 白→text-mid(黒の一段下)の塗りワイプ。is-activeで①白フェードイン→②塗りワイプの2段 */
  background-image: linear-gradient(to top, var(--text-mid) 50%, rgba(255, 255, 255, 0.5) 50%);
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: 0 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0; /* 初期：隠す（is-activeで白がふわっと出る）*/
  transition: opacity 0.5s ease, background-position 0.9s ease 0.5s; /* 先に白フェード→遅れてワイプ */
}
.pg-SpecialEcomagicIndex .st-Main .solution-title {
  margin-bottom: 32px;  /* 共通リセット(0,2,2)に勝つため詳細度0,3,0で上書き */
}
.solution-text-box.is-active .solution-title {
  opacity: 1; /* ①白でフェードイン */
  background-position: 0 100%; /* ②下からtext-midに満ちる */
}
.solution-desc {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-sub);
  line-height: 1.8;
  margin: 0;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.solution-text-box.is-active .solution-desc {
  opacity: 1;
  transition-delay: 0s; /* タイトルの白フェードと同時に出す */
}
.yaku {
  font-feature-settings: "palt" 1;   /* 約物(括弧等)だけ囲んでアキを詰める */
}
.kinou-bg-wrapper {
  position: relative;
  z-index: 2; /* sequence-section(3)より背面＝canvas側が前面で、kinouの白い上端を覆って隠す */
  margin-top: -3px; /* sequence-section(z:3)の下に潜らせ、グラデ継ぎ目のサブピクセル隙間(白線)を塞ぐ */
  background-position: center top;
  background-size: auto;
  background-repeat: no-repeat;
  background-image: url('../../assets/img/special/ecomagic/kinou.webp');
  background-image: -webkit-image-set(url('../../assets/img/special/ecomagic/kinou.webp') 1x, url('../../assets/img/special/ecomagic/kinou@2x.webp') 2x);
  background-image: image-set(url('../../assets/img/special/ecomagic/kinou.webp') 1x, url('../../assets/img/special/ecomagic/kinou@2x.webp') 2x);
  padding: 80px 0 160px 0;
  box-sizing: border-box;
}
/* 1921px以上はネイティブ幅(1921px)を超えて左右に隙間が出るため coverに切替（継ぎ目のズレは許容。1920は普及帯なのでautoで継ぎ目優先）*/
@media (min-width: 1921px) {
  .overlay-kaiketu,
  .kinou-bg-wrapper {
    background-size: cover;
  }
}
.kinou-white-box {
  width: min(1200px, calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding-top: 120px;
  padding-bottom: 120px;
  padding-left: 0;   /* 内側コンテンツ(最大1080)を中央寄せして側余白は可変に。固定paddingは廃止 */
  padding-right: 0;
  box-sizing: border-box;
}
.kinou-white-box .section-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;   /* セクション見出しは中央寄せのまま（solutionは左寄せだがレイアウト都合で維持）*/
  line-height: 1.5;
  letter-spacing: 0.15em;
  margin: 0;
}
.pg-SpecialEcomagicIndex .st-Main .active-cases .section-title {
  margin-top: 120px;   /* 区切りからの上アキ */
  margin-bottom: 72px;   /* CASEあしらいのはみ出し(top:-34)込みでの下アキ */
}
.drain-explanation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  /* 幅はcontentBoxクラス(min(1080,100%-48)・中央寄せ)に委ねる＝コンテンツ最大1080・側余白可変 */
}
.drain-explanation-header {
  margin: 0 0 64px 0;
}
.drain-explanation-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
}
/* 共通リセット(.-hbg main .container p{margin:0}・詳細度0,2,2)に勝つため詳細度を上げて余白を付与 */
.pg-SpecialEcomagicIndex .st-Main .drain-explanation-badges {
  margin-bottom: 56px;
}
.badge-new {
  font-family: var(--font-en);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--accent-red);
}
.drain-explanation-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.15em;
}
.badge-patent {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--accent-red);
  box-sizing: border-box;
  color: var(--accent-red);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.drain-explanation-lead {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.8;
  letter-spacing: 0.1em;
  max-width: 768px;
  margin: 0;
}
/* 共通リセット(.-hbg main .container p{margin:0}・詳細度0,2,2)に勝つため詳細度を上げてmargin:autoを付与（中央寄せ） */
.pg-SpecialEcomagicIndex .st-Main .drain-explanation-lead {
  margin-left: auto;
  margin-right: auto;
}
.explanation-cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;   /* カード同士（縦）の間隔 */
  width: 100%;   /* 親(white-box=最大1080)をフルに使う。左右1列の余白は12グリッド側で作る */
  margin: 0;
  padding: 0;
  list-style: none;
}
.explanation-card {
  position: relative;   /* step-labelを画像左上に絶対配置するための基準 */
  display: grid;
  grid-template-columns: auto 1fr;   /* 画像は実際の幅ぶんだけ、残り全部をテキストに（画像を縦296px固定にしたため） */
  gap: 48px;   /* 画像↔テキストの間（kinou各gapと統一）*/
  align-items: center;   /* 画像をテキストに対して縦中央揃え */
  width: 100%;
  opacity: 1;   /* カード自体は静止。画像=ワイプ／文=フェードアップ で個別に出す（card-animateのopacity:0を上書き）*/
}
.explanation-card > * {
  min-width: 0;   /* グリッドアイテムのはみ出し対策 */
}
.explanation-card.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.explanation-img-box {
  position: relative;   /* step-labelを画像の左上に配置する基準 */
  grid-column: 1;   /* 実際の画像幅ぶんの列（auto） */
  height: 296px;
  aspect-ratio: 450 / 250;   /* 高さ296px基準で幅を自動計算（元の比率を維持） */
  border-radius: 8px;
  overflow: hidden;
  -webkit-clip-path: inset(0 100% 0 0);   /* 初期：右を全クリップ＝左端のみ（ワイプ前）*/
  clip-path: inset(0 100% 0 0);
  transition: -webkit-clip-path 0.8s ease, clip-path 0.8s ease;
}
.explanation-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.explanation-text-box {
  grid-column: 2;   /* 画像の右、残り幅いっぱい */
  position: relative;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;   /* 画像の高さ(296px)まで伸ばして余白を確保 */
  z-index: 1;
}
/* テキスト(1st STEP・見出し・説明文)はアニメさせず最初から表示。出すのは画像のワイプのみ */
.explanation-card.is-visible .explanation-img-box {   /* 画像を左→右へワイプ表示 */
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
/* あしらい：大きな番号＋小さなSTEP（縦並び）*/
.step-label {
  position: absolute; /* カード基準で画像左上に引っ掛ける（画像外へはみ出しOK）*/
  top: -34px;
  left: -24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center; /* STEPと番号を中央揃え */
  line-height: 1;
  /* 画像と一緒に現れる：初期は非表示、カードのis-visibleでフェードイン（画像ワイプと同尺）*/
  opacity: 0;
  transition: opacity 0.8s ease;
}
.explanation-card.is-visible .step-label,
.active-card.is-visible .step-label {
  opacity: 1;
}
/* activeは画像ワイプと同じ時差（2枚目+0.2s / 3枚目+0.4s）*/
.active-card:nth-child(2) .step-label { transition-delay: 0.2s; }
.active-card:nth-child(3) .step-label { transition-delay: 0.4s; }
/* 流れるグラデ（プラム→ネイビー→プラム）。背景を200%幅にしてpositionをループ */
@keyframes step-grad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.step-num {
  font-family: var(--font-en);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(to right, var(--text-mid), var(--brand), var(--text-mid));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: step-grad 5s ease infinite;
}
.step-word {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2em;
  margin-bottom: -10px; /* STEP↓番号 を近づける */
  background: linear-gradient(to right, var(--text-mid), var(--brand), var(--text-mid));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: step-grad 5s ease infinite;
}
/* あしらい：数字の塊の右に傾けたスラッシュ(/)を描画。文字と同じ流れるグラデ */
.step-label::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -15px;
  width: 3px;
  height: 92px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--text-mid), var(--brand), var(--text-mid));
  background-size: 200% 100%;
  animation: step-grad 5s ease infinite;
  transform: rotate(34deg);
  transform-origin: bottom center;
}
/* 共通リセット(p margin:0)に勝つため詳細度を上げてmargin付与 */
.pg-SpecialEcomagicIndex .st-Main .step-label {
  margin-bottom: calc(var(--space) * 2);   /* 16px：番号ブロック→見出し */
}
.explanation-title {
  font-size: 28px;
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: 0.15em;
  margin: 0 0 8px 0;
  line-height: 1.4;
}
/* 共通リセット(h3 margin:0)に勝つため詳細度を上げてmargin付与（8px） */
.pg-SpecialEcomagicIndex .st-Main .explanation-title {
  margin-bottom: var(--space);
}
.explanation-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  margin: 0;
  color: var(--text-sub);
  letter-spacing: 0.1em;
}
/* 本文(explanation-desc)の直下に配置する注釈 */
.drain-explanation-note {
  display: flex;          /* ※と本文を分離。※は固定幅・本文は残り幅で折り返す＝ぶら下げを箱内に収める */
  align-items: flex-start;
  width: 100%;
  margin: 0;
  font-size: 14px; /* 本文(18px)よりはっきり小さくし、注釈だと分かるように */
  font-weight: 400;
  color: var(--text-sub);
  background: transparent;
  letter-spacing: 0.05em;
}
/* 共通リセット(.-hbg main .container p{padding:0;margin:0}・詳細度0,2,2)に勝つため詳細度を上げてmargin-top/padding-bottomを付与 */
.pg-SpecialEcomagicIndex .st-Main .drain-explanation-note {
  margin-top: calc(var(--space) * 2); /* 16px：本文↓注釈の間隔 */
  padding-bottom: calc(var(--space) * 6); /* 48px：注釈↓ボタンの間隔 */
  line-height: 1.6;
}
.drain-explanation-note .note-mark {
  flex: 0 0 auto;   /* ※は固定幅 */
}
.drain-explanation-note .note-body {
  flex: 1 1 auto;   /* 残り幅いっぱいに広がり、折り返しても※の右に揃う */
  min-width: 0;
}
.kinou-divider {
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));   /* コンテンツ(最大1080)幅に揃える */
  height: 1px;
  background-color: #d9d9d9;
  margin-top: 120px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  border: none;
}
.active-cases {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  box-sizing: border-box;
  /* 幅はcontentBoxクラス(min(1080,100%-48)・中央寄せ)に委ねる */
}
.active-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;   /* カード間隔（kinou各gapと統一）。広げたい場合はここを増やす */
  width: 100%;   /* full幅（左右余白なし）。3枚で1080をいっぱいに使う */
  margin: 0;
  padding: 0;
  list-style: none;
}
.active-cards-wrapper > * {
  min-width: 0;   /* グリッドアイテムのはみ出し対策 */
}
.active-card {
  position: relative;
  grid-column: auto;   /* repeat(3,1fr)の各列に1枚ずつ */
  height: auto;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  opacity: 1;   /* カード自体は静止。文字は最初から表示・画像だけワイプ（card-animateのopacity:0を上書き）*/
}
.active-card-img-box {
  width: 100%;
  aspect-ratio: 688 / 800; /* 6:7に近い縦長比率で固定（PC用）。画像は2倍サイズ688×800を想定 */
  border-radius: 8px;
  overflow: hidden;
  -webkit-clip-path: inset(0 100% 0 0);   /* 初期：右を全クリップ（ワイプ前）*/
  clip-path: inset(0 100% 0 0);
  transition: -webkit-clip-path 0.8s ease, clip-path 0.8s ease;
}
.active-card:nth-child(2) .active-card-img-box { transition-delay: 0.2s; } /* 3枚を少し時差で */
.active-card:nth-child(3) .active-card-img-box { transition-delay: 0.4s; }
.active-card.is-visible .active-card-img-box {   /* 左→右へワイプ表示 */
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.active-card-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.active-card-text-box {
  width: 100%;
  margin-top: 24px;   /* 画像↔テキストの間（paddingから変更）*/
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}
.active-card-label {
  display: flex;
  align-items: center;
  gap: 12px; /* ドット群↔ラベル文字（target-labelと統一） */
  font-family: 'Plus Jakarta Sans', var(--font-jp), sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-sub);
  margin: 0 0 8px 0;
  letter-spacing: 0.2em;
}
.active-card-title {
  font-size: 27px;
  font-weight: 500;
  color: var(--text-main);
  margin: 0 0 8px 0;
  line-height: 1.4;
  letter-spacing: 0.15em;
  min-height: calc(1.4 * 3 * 1em); /* CASE3が3行になったため3行分を確保 */
}
/* 共通リセット(p/h3 margin:0)に勝つため詳細度を上げてmargin付与 */
.pg-SpecialEcomagicIndex .st-Main .active-card-label,
.pg-SpecialEcomagicIndex .st-Main .active-card-title {
  margin-bottom: var(--space);   /* 8px */
}
.active-card-desc {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 2); /* 16px：li間はpaddingではなくgapで確保 */
  font-size: 18px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.8;
  margin: 0;
  letter-spacing: 0.1em;
  list-style-type: none;
  padding: 0;
}
.active-card-desc li {
  position: relative;
  padding: 0 0 0 1.2em;   /* 折り返し2行目以降も「・」の右に揃うぶら下げインデント */
}
.active-card-desc li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
.pg-SpecialEcomagicIndex .st-Main .merit {
  padding-top: calc(var(--space) * 25); /* 200px：セクション上の余白（共通リセットに勝つ詳細度） */
  padding-bottom: 120px; /* 次セクションとの間隔 */
}
.pg-SpecialEcomagicIndex .st-Main .merit-title {
  font-size: clamp(28px, 5vw, 74px);
  font-weight: 700;
  margin: 0 0 120px; /* 見出し下の余白（共通リセットに勝つ詳細度） */
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: var(--text-main);
  text-align: center;
}
.merit-detail-inner {
  position: relative;
  z-index: 20;
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  align-items: center;
}
.merit-detail-inner > * {
  min-width: 0;   /* グリッドアイテムの初期min-width:autoを解除（画像はみ出し対策） */
}
.merit-detail-inner::before {
  content: '';
  position: absolute;
  top: -88px;
  left: -160px;
  width: 100%;
  height: 120%;
  background: url('../../assets/img/special/ecomagic/enn.webp') left top/auto 100% no-repeat;
  z-index: -1; /* テキストの背後にグラデを敷く。コンテンツ左端起点に固定 */
  pointer-events: none;
}
.merit-detail-text-box {
  grid-column: 1 / 8;   /* 左7カラム */
}
.merit-detail-subtitle {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-main);
  line-height: 1.8;
  letter-spacing: 0.1em;
}
.merit-detail-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.15em;
  line-height: 1.4;
}
.pg-SpecialEcomagicIndex .st-Main .merit-detail-title {
  margin: 0 0 32px 0; /* 共通リセット(p margin)に勝つ詳細度 */
}
.merit-detail-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin: 0;
  max-width: calc(var(--content-width) / 2 - var(--gutter) / 2);   /* 6カラム相当（≒528px）で折り返す */
}
.merit-detail-img-box {
  grid-column: 8 / 13;   /* 右5カラム（空きはcol7） */
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.merit-detail-img {
  width: 100%;
  aspect-ratio: 984 / 376; /* 黄金比の2乗(φ²≒2.618)に近い比率で固定。PC/SP共通・画像は2倍サイズ984×376を想定 */
  border-radius: 8px;
  overflow: hidden;
  /* 見出しの塗りワイプ完了後（JSでimg-boxにis-visible付与）に左→右で順次表示 */
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: -webkit-clip-path 0.8s ease, clip-path 0.8s ease;
}
.merit-detail-img-box.is-visible .merit-detail-img {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.merit-detail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.target-details-section {
  position: relative;
  z-index: 5; /* 自己完結のスタッキングコンテキストにし、内部のtarget-scroll-content(z:10)をルートに漏らさない（sequence-sectionと同じ設計） */
  height: 2700px;
  background-color: var(--bg-white);
  margin-bottom: calc(var(--space) * 20); /* 160px：次セクション(flash-spec)との間隔 */
}
.target-sticky-bg {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  width: 100%;
  overflow: hidden;
  z-index: 1;
}
#target-sequence-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  will-change: transform;
  z-index: 1;
}
.target-fallback-img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.target-canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  transform: translateZ(0);
}
.target-scroll-content {
  position: relative;
  z-index: 10;
  margin-top: calc(-100vh + var(--header-height));
}
.target-block {
  height: 900px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.target-content-inner {
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.target-block-1 .target-content-inner {
  align-items: flex-start;
}
.target-block-2 .target-content-inner {
  align-items: flex-end;
}
.target-block-3 .target-content-inner {
  align-items: flex-start;
}
.target-text-area {
  color: var(--text-main);
}
.target-label {
  display: flex;
  align-items: center;
  gap: 12px; /* ドット群↔ラベル文字 */
  font-size: 24px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.4;
  letter-spacing: 0.15em;
}
/* showa-kogyo風：少し重なる丸2つ（青＋オレンジ）。reveal時に青→0.2s遅れオレンジで跳ねる */
.label-dots {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* CASE3専用：ドット2つの代わりにシンプルな横棒アイコン */
.label-bar {
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--text-sub);
  flex-shrink: 0;
}
.label-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  filter: blur(2px); /* ふんわりぼかす（数値を上げるほど滲む）*/
}
.label-dot--blue {
  background: var(--brand); /* ネイビー */
}
.label-dot--orange {
  background: #db2615;
  margin-left: -4px; /* 青に少し重ねる */
}
@keyframes label-dot-bound {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
/* スクロールするたびに再発火（JSが画面内の .label-dots に .is-bounce を付与→終了で外す）。
   青→0.2s遅れオレンジの順にぴょこっと跳ねる */
.label-dots.is-bounce .label-dot--blue {
  animation: label-dot-bound 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.label-dots.is-bounce .label-dot--orange {
  animation: label-dot-bound 0.6s cubic-bezier(0.86, 0, 0.07, 1) 0.2s;
}
.target-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: var(--text-main);
}
.pg-SpecialEcomagicIndex .st-Main .target-title {
  margin-bottom: var(--space); /* 8px（h2リセットに勝つ詳細度） */
}
.target-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.8;
  letter-spacing: 0.1em;   /* 18px本文 */
  margin: 0;
}
.pg-SpecialEcomagicIndex .st-Main .target-desc {
  margin-bottom: 48px; /* 説明文と下のボタンの間隔（pリセットに勝つ詳細度） */
}
/* .btn-large / .btn-large-text / .btn-large-circle のスタイルは
   FV と共通化し、上部「共通ボタン」ブロック(.hero-btn と同セレクタ群)で定義 */
.flash-spec {
  position: relative;
  width: 100%;
  min-height: 760px;
  background-color: #1a1a1a;
  background-image: url('../../assets/img/special/ecomagic/FLashseinou.webp');
  background-image: -webkit-image-set(url('../../assets/img/special/ecomagic/FLashseinou.webp') 1x, url('../../assets/img/special/ecomagic/FLashseinou@2x.webp') 2x);
  background-image: image-set(url('../../assets/img/special/ecomagic/FLashseinou.webp') 1x, url('../../assets/img/special/ecomagic/FLashseinou@2x.webp') 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}
.flash-spec-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 12px;
  width: 100%;
  font-size: 64px;
  font-weight: 700;
  color: var(--bg-white);
  letter-spacing: 0.2em;
  margin: 0;
  padding: 0 var(--page-pad);
  box-sizing: border-box;
}
.pg-SpecialEcomagicIndex .st-Main .flash-spec-title {
  /* 共通リセット(.-hbg main .container h2{padding:0;margin:0}・詳細度0,2,2)に勝つため詳細度を上げてpadding-top/bottomを付与 */
  padding-top: 120px;
  padding-bottom: 120px;
}
.flash-spec-row {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end; /* 画像をflash-spec-content(テキスト列)の下端に揃える */
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
}
.flash-spec-media {
  flex: 0 0 auto;
  /* 右端(テキストとの境目)は動かさず、左端だけビューポート端まで伸ばす。
     row左端からビューポート端までの距離ぶんを幅に足し、同じ量だけ負のmarginで引き戻す */
  width: calc(45% + var(--page-pad) + max(var(--page-pad), (100vw - var(--content-width)) / 2));
  max-width: calc(640px + var(--page-pad) + max(var(--page-pad), (100vw - var(--content-width)) / 2));
  margin-left: calc(-1 * max(var(--page-pad), (100vw - var(--content-width)) / 2));
  aspect-ratio: 4 / 3; /* 高さをcontent全体に揃えず、拡大率(クロップ量)を抑える */
  overflow: hidden;
}
.flash-spec-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center; /* 右基準でカバーし、はみ出た左側だけ見切れる（幅が変わっても比率で追従） */
}
.flash-spec-content {
  flex: 1 1 auto;
  padding: 0 0 80px 64px;
  box-sizing: border-box;
  color: var(--bg-white);
}
.flash-spec-logo {
  height: 104px;
  width: auto;
  display: block;
}
.flash-spec-stats {
  display: flex;
  gap: 64px;
  margin: 0;
}
.flash-spec-stat-label {
  font-size: 28px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: 0.1em;
}
.flash-spec-stat-value {
  font-family: var(--font-en);
  font-size: clamp(56px, 9vw, 110px); /* 幅が狭まるとflexの最小幅制約で右にはみ出すため可変に */
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bg-white);
  margin: 0;
  line-height: 1;
  white-space: nowrap; /* flexの縮小でunit(号/L/分)+sup(※1/※2)だけが2行目に折り返されるのを防止 */
}
.flash-spec-stat-value .num {
  letter-spacing: -0.05em; /* 数字部分だけ字詰め */
}
/* 共通リセット(.-hbg main .container p{margin:0}・詳細度0,2,2)に勝つため詳細度を上げてmargin-topを付与 */
.pg-SpecialEcomagicIndex .st-Main .flash-spec-stat-value {
  margin-top: -0.73em; /* フォントの上のアキ（アセント余白）を打ち消す。font-sizeがclampになったためem指定で追従 */
}
.flash-spec-stat-value .unit {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0em;
  margin-left: 4px;
}
.flash-spec-stat-value sup {
  font-size: 10px;
  margin-left: 2px;
  top: -1.5em;
}
.flash-spec-desc {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.9;
  letter-spacing: 0.08em;
  margin: 0 0 16px 0;
  max-width: 480px;
}
.flash-spec-desc sup {
  font-size: 11px;
  font-weight: 400;
}
.flash-spec-footnote {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #ffffff;
  line-height: 1.6;
  margin: 0 0 48px 0;
}
.flash-spec .btn-large-text {
  color: var(--bg-white);
  opacity: 0.6; /* 暗い背景ではホバー色(--brand)が同化して見えにくいため、透明度でホバーを表現 */
  transition: opacity 0.3s ease;
}
.flash-spec .btn-large-circle {
  border-color: var(--bg-white);
}
.flash-spec .btn-large-circle::before {
  background-color: var(--bg-white); /* 塗り広がるアニメーションの色（暗い背景では白に） */
}
.flash-spec .btn-large-circle .material-symbols-outlined {
  color: var(--bg-white); /* 矢印は通常時は白 */
}
.flash-spec .btn-large:hover .btn-large-text {
  color: var(--bg-white);
  opacity: 1;
}
.flash-spec .btn-large:hover .btn-large-circle .material-symbols-outlined {
  color: var(--text-sub);
}
.flash-spec-note {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #ffffff;
  line-height: 1.6;
  margin: 16px 0 0 0;
}
/* 共通リセット(.-hbg main .container p{margin:0}・詳細度0,2,2)に勝つため詳細度を上げて余白を付与 */
.pg-SpecialEcomagicIndex .st-Main .flash-spec-stat-label {
  margin-bottom: 12px;
}
.pg-SpecialEcomagicIndex .st-Main .flash-spec-desc {
  margin-bottom: calc(var(--space) * 2); /* 16px */
}
.pg-SpecialEcomagicIndex .st-Main .flash-spec-footnote {
  margin-bottom: 48px;
}
.pg-SpecialEcomagicIndex .st-Main .flash-spec-note {
  margin-top: 16px;
}
.remote-spec {
  position: relative;
  width: 100%;
  height: 540px;
  overflow: hidden;
}
.remote-spec-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.remote-spec-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 var(--page-pad) 0 64px;
  color: var(--bg-white);
}
.remote-spec-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--bg-white);
  letter-spacing: 0.15em;
  line-height: 1.5;
  margin: 0;
}
.pg-SpecialEcomagicIndex .st-Main .remote-spec-title {
  /* 共通リセット(.-hbg main .container h2{padding:0;margin:0}・詳細度0,2,2)に勝つため詳細度を上げて余白を付与 */
  margin-bottom: 32px; /* 40pxサイズの見出しと統一 */
}
.remote-spec-desc {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin: 0;
}
.pg-SpecialEcomagicIndex .st-Main .remote-spec-desc {
  margin-bottom: 48px;
}
.remote-spec-images {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 48px 0;
  padding: 0;
  list-style: none;
}
.remote-spec-image img {
  display: block;
  height: 120px;
  width: auto;
}
/* 共通リセット(.-hbg main .container ul{margin:0}・詳細度0,2,2)に勝つため詳細度を上げてmargin-bottomを付与 */
.pg-SpecialEcomagicIndex .st-Main .remote-spec-images {
  margin-bottom: 48px;
}
.remote-spec .btn-large-text {
  color: var(--bg-white);
  opacity: 0.6; /* 暗い背景ではホバー色(--brand)が同化して見えにくいため、透明度でホバーを表現 */
  transition: opacity 0.3s ease;
}
.remote-spec .btn-large-circle {
  border-color: var(--bg-white);
}
.remote-spec .btn-large-circle::before {
  background-color: var(--bg-white); /* 塗り広がるアニメーションの色（暗い背景では白に） */
}
.remote-spec .btn-large-circle .material-symbols-outlined {
  color: var(--bg-white); /* 矢印は通常時は白 */
}
.remote-spec .btn-large:hover .btn-large-text {
  color: var(--bg-white);
  opacity: 1;
}
.remote-spec .btn-large:hover .btn-large-circle .material-symbols-outlined {
  color: var(--text-sub);
}
.faq {
  width: 100%;
  padding: calc(var(--space) * 15) 0 calc(var(--space) * 20); /* 上120 / 下160 */
  background-color: var(--bg-section-grey);
  display: flex;
  justify-content: center;
}
.faq-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));
  box-sizing: border-box;
}
.faq-title {
  font-family: var(--font-en);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: var(--text-main);
  text-align: center;
}
.pg-SpecialEcomagicIndex .st-Main .faq-title {
  margin: 0 0 calc(var(--space) * 7) 0; /* 56px：共通リセット(h2 margin)に勝つ詳細度 */
}
.faq-list-area {
  width: 100%;
  max-width: 768px;   /* リーディング幅：和文18pxで1行を約40字に抑える（共通のデバイス境界と同値） */
  border-top: 1px solid var(--border-grey);
}
.faq-item {
  position: relative;
  border-bottom: 1px solid var(--border-grey);
}
/* hoverで下端にネイビーのborderが左→右に伸びる */
.faq-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brand);   /* hoverのborder色：ネイビー */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.faq-item:hover::after {
  transform: scaleX(1);
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: calc(var(--space) * 4) calc(var(--space) * 2); /* 上下32px / 左右16px：複数行でも崩れないよう上下paddingで高さを作る */
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-main);
  letter-spacing: 0.1em;   /* 18px本文は0.1em */
  cursor: pointer;
  text-align: left;
}
.faq-q-mark {
  font-family: 'Plus Jakarta Sans', var(--font-jp), sans-serif;
  font-weight: 400;
}
.faq-icon {
  position: relative;
  width: 24px;
  height: 24px;
  /* サークル地をSTEP/CASEと同じ流れるグラデ（プラム→ネイビー）に */
  background: linear-gradient(to right, var(--text-mid), var(--brand), var(--text-mid));
  background-size: 200% 100%;
  animation: step-grad 5s ease infinite;
  border-radius: 50%;
  font-size: 0; /* テキストの「+」は隠し、下の2本線で描画（グリフのベアリングずれを排除して完全center） */
  transition: transform 0.3s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background-color: var(--bg-white);
}
/* 細い軸(1px)は整数pxに固定してサブピクセル滲み（白が透ける現象）を防ぐ。長い軸のみ中央寄せ */
.faq-icon::before { width: 11px; height: 1px; top: 12px; left: 50%; transform: translateX(-50%); } /* 横棒 */
.faq-icon::after  { width: 1px; height: 11px; left: 12px; top: 50%; transform: translateY(-50%); } /* 縦棒 */
.faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-item.is-open .faq-answer-wrapper {
  grid-template-rows: 1fr;
}
.faq-answer {
  overflow: hidden;
}
.faq-answer-inner a {
  color: #0d52db; /* サイト共通の本文リンク色（.calc-Section p a等と統一） */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-answer-inner {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--text-mid);
  padding: 0 calc(var(--space) * 2) calc(var(--space) * 4); /* 左右16px：質問文と左端を揃える / 下32px */
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}
.contact-download {
  width: 100%;
  padding: 0 0 calc(var(--space) * 20) 0; /* 下160px / 上余白はfaqの下paddingに一本化（連続グレー帯のため0） */
  background-color: var(--bg-section-grey);
}
.cd-main-title {
  font-family: var(--font-jp);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-main);
  letter-spacing: 0.15em;
  text-align: center;
}
.pg-SpecialEcomagicIndex .st-Main .cd-main-title {
  margin: 0 0 calc(var(--space) * 7) 0; /* 56px：共通リセット(h2 margin)に勝つ詳細度 */
}
.cd-inner {
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--space) * 6); /* 48px：列間（8pxグリッド準拠） */
  box-sizing: border-box;
}
.cd-col {
  min-width: 0; /* グリッドアイテムの初期min-width:auto解除 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cd-col-title {
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 400;
  color: var(--text-main);
  letter-spacing: 0.15em;
  line-height: 1.4;
}
.pg-SpecialEcomagicIndex .st-Main .cd-col-title {
  margin: 0 0 calc(var(--space) * 2) 0; /* 16px：タイトル→ボタン群（h3リセットに勝つ詳細度） */
}
.cd-btn-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space) * 2); /* 16px */
}
/* 透明＋枠線、hoverで白が中心から塗り拡がる（文字/アイコンはtext-mainに） */
.cd-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--brand);
  border-radius: 8px;
  text-decoration: none;
  color: var(--brand);
  transition: color 0.3s ease, border-color 0.3s ease;
  box-shadow: none !important;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cd-btn::before { /* 中心から塗り拡がる面 */
  content: '';
  position: absolute;
  inset: -1px; /* 枠線分まで覆う */
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg-white);
  border-radius: inherit;
  transform: scale(0);
  transition: transform 0.4s ease;
}
.cd-btn > * { /* アイコン・テキストを塗り面より前面に */
  position: relative;
  z-index: 1;
}
.cd-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.cd-btn:hover::before {
  transform: scale(1);
}
.cd-btn:hover .cd-btn-text,
.cd-btn:hover .cd-icon,
.cd-btn:hover .cd-icon-large {
  color: var(--brand);
}
.cd-btn-left,
.cd-btn-center {
  width: 100%;
  padding: calc(var(--space) * 5) 0; /* 上下40px / 左右0（中身は中央寄せのため左右padding不要） */
  gap: var(--space); /* 8px：アイコン↔テキスト */
}
/* Downloadボタン単体をContactの.cd-btn-largeと同じ高さまで引き伸ばす（アイコンは2行テキストに対し縦中央のまま） */
.cd-btn-group--fill {
  flex: 1;
}
.cd-btn-fill {
  flex: 1;
  width: 100%;
}
/* お問い合わせ(.cd-btn-large)と同じ「アイコン上・テキスト下」の縦並びに */
.cd-btn-stacked {
  flex-direction: column;
  gap: 16px;
}
.cd-btn-stacked .cd-icon {
  font-size: 56px; /* cd-btn-largeと同サイズに統一 */
}
.cd-btn-large {
  width: 100%;
  flex: 1;
  flex-direction: column;
  gap: 16px;
}
.cd-btn-text {
  font-family: var(--font-jp);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.08em; /* 16px本文ルール */
  transition: color 0.3s ease;
}
.cd-icon {
  font-size: 32px;
  font-weight: 300; /* 標準の400だと太く見えるため細めに */
  color: var(--brand); /* ネイビー（枠・文字と統一）*/
  transition: color 0.3s ease;
}
.cd-btn-left .cd-icon {
  font-weight: 400; /* WEBカタログ・製品ページ（open_in_new）は元の太さを維持 */
}
.cd-btn-large .cd-icon {
  font-size: 56px;
}
.cd-icon-large {
  font-size: 40px;
  color: var(--brand); /* ネイビー（枠・文字と統一）*/
  transition: color 0.3s ease;
}
.purpose-footer-dummy {
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 20px;
  box-sizing: border-box;
}
.purpose-footer-dummy img {
  width: 100%;
  max-width: 1174px;
  height: auto;
  display: block;
}
.bottom-hero {
  width: 100%;
  height: 50vh;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../../assets/img/special/ecomagic/firstview2.webp');
  background-image: -webkit-image-set(url('../../assets/img/special/ecomagic/firstview2.webp') 1x, url('../../assets/img/special/ecomagic/firstview2@2x.webp') 2x);
  background-image: image-set(url('../../assets/img/special/ecomagic/firstview2.webp') 1x, url('../../assets/img/special/ecomagic/firstview2@2x.webp') 2x);
  display: flex;
  align-items: center;
  position: relative; /* 下端マーキーの基準 */
  overflow: hidden;   /* マーキーのはみ出しを隠す */
}
.bottom-hero-inner {
  width: min(var(--content-width), calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  z-index: 1; /* マーキーより前面 */
}
/* bottom-hero下端：ZERO HURDLE を流しっぱなしで横スクロール（フェード/遅延なし・即ループ）。
   テキスト見た目(.zero-hurdle-text)とマーキー(zh-marquee)はFVと共通 */
.bottom-hero-marquee {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}
.bottom-hero-marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: zh-marquee 90s linear infinite; /* 即開始・無限ループ */
}
@media (prefers-reduced-motion: reduce) {
  .bottom-hero-marquee-track { animation: none; }
}
.bottom-hero-logo {
  height: 70px;
  width: auto;
  display: block;
  margin-left: var(--space); /* 8px */
  margin-bottom: calc(var(--space) * 4); /* 32px */
}
.bottom-hero-title {
  font-size: clamp(28px, 5vw, 56px); /* 他の大見出し(merit/problems)と統一 */
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.15em;
}
/* 共通CSS「.-hbg main .container p{line-height:2}」(0,2,2)に勝つ詳細度でline-height/marginを付与（FVのhero-titleと同じ1.3） */
.pg-SpecialEcomagicIndex .st-Main .bottom-hero-title {
  line-height: 1.3;
  margin: 0 0 calc(var(--space) * 4) 0; /* 32px */
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000; /* .global-header(99999)より前面に出す */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  background-color: var(--bg-white);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 8px;
  padding: 50px 40px;
  position: relative;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.modal-overlay.is-active .modal-content {
  transform: translateY(0);
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-sub);
  transition: opacity 0.3s;
}
.modal-close:hover {
  opacity: 0.5;
}
/* ============================================================
   ターゲット詳細モーダル（Read more で開く seko / kanri / owner）
   ※ .modal-overlay / .modal-content / .modal-close は上の共通定義を使用
   ============================================================ */
/* 素材未納品の箇所用プレースホルダー（斜線ハッチング＋ラベル）。data-placeholder属性の値を表示 */
.img-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  background-image: repeating-linear-gradient(45deg, #e2e2e2 0, #e2e2e2 1px, transparent 1px, transparent 10px);
  border: 1px dashed #b3b3b3;
  box-sizing: border-box;
  color: #999999;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: center;
  overflow: hidden;
}
.img-placeholder::before {
  content: attr(data-placeholder);
  padding: 4px 8px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
}
#modal-seko .modal-content,
#modal-kanri .modal-content,
#modal-owner .modal-content {
  width: 94vw;
  max-width: 1200px;
  padding: 64px;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 閉じるボタンを固定するため、スクロールは.modal-scroll-body側で行う */
}
#modal-seko .modal-scroll-body,
#modal-kanri .modal-scroll-body,
#modal-owner .modal-scroll-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* flex子要素でoverflow-y:autoを効かせるために必要 */
  scrollbar-gutter: stable; /* オーバーレイ型スクロールバーが要素に被らないよう常に幅を確保 */
  scrollbar-width: thin; /* Firefox：スクロールバーを細く */
  margin-right: -28px; /* スクロールバーの中心を閉じるボタンの中心に合わせる */
  padding-right: 16px; /* 本文の右端は他辺と同じ64px相当を維持 */
}

/* 共通：ヘッダー（左に縦線つきタイトル） */
.modal-seko-header,
.modal-owner-header {
  position: relative;
  margin-bottom: 40px;
  padding-left: 32px;
}
.modal-seko-header::before,
.modal-owner-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
}
.modal-seko-header::before { background-color: var(--accent-red); }
.modal-owner-header::before { background-color: var(--brand); }
.modal-seko-title,
.modal-owner-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0 0 15px 0;
}
.modal-seko-title { color: var(--accent-red); }
.modal-owner-title { color: var(--brand); }
.modal-seko-subtitle,
.modal-owner-subtitle {
  font-size: 19px;
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin: 0;
}
.modal-owner-subtitle {
  font-size: 20px;
}

/* 共通：ボディ（左右2カラム） */
.modal-seko-body,
.modal-kanri-body,
.modal-owner-body {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.modal-seko-left { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.modal-owner-left { width: 60%; display: flex; flex-direction: column; }
.modal-seko-right { width: 48%; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.modal-owner-right { width: 48%; display: flex; flex-direction: column; }

/* 共通：画像 */
.modal-seko-img img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ------------------------------------------------------------
   モーダル①  施工業者様向け  (#modal-seko)
   ------------------------------------------------------------ */
.modal-seko-row { display: flex; align-items: flex-start; gap: 16px; }
.modal-seko-img { width: auto; height: 130px; flex-shrink: 0; }
.modal-seko-img img { width: auto; }
.modal-seko-text-box { display: flex; flex-direction: column; gap: 8px; }
.modal-seko-tag {
  display: block;
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  background-color: var(--accent-red);
  color: var(--bg-white);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 4px 10px;
}
.modal-seko-text { font-size: 16px; font-weight: 500; color: var(--text-sub); letter-spacing: 0.08em; line-height: 1.5; margin: 0; }
.modal-seko-right-title { font-size: 16px; font-weight: 500; color: var(--text-sub); letter-spacing: 0.08em; line-height: 1.6; }
.modal-seko-time-compare { display: flex; justify-content: center; }
.modal-seko-time-img { width: 100%; max-width: 432px; height: auto; display: block; margin: 0 auto; }
.modal-seko-note-group { display: flex; flex-direction: column; gap: 8px; }
.modal-seko-note { font-size: 14px; font-weight: 500; color: var(--text-sub); letter-spacing: 0.08em; line-height: 1.4; margin: 0; }

/* ------------------------------------------------------------
   モーダル②  管理会社様向け  (#modal-kanri)
   ------------------------------------------------------------ */
.modal-kanri-body {
  display: block; /* seko/ownerは左右2カラムのflexだが、kanriは表1本なのでblockに戻す */
  width: 100%;
}
.modal-kanri-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  color: var(--text-sub);
  line-height: 1.5;
  table-layout: fixed;
}
.modal-kanri-table th,
.modal-kanri-table td {
  border: 1px solid var(--border-grey);
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  font-weight: 500;
}
.modal-kanri-table-subrow {
  background-color: #e6e6e6;
  color: var(--text-sub);
  text-align: left;
}
.modal-kanri-table-group {
  background-color: #e6e6e6;
  color: var(--text-sub);
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}
.modal-kanri-table-rowhead {
  background-color: #e6e6e6;
}
.modal-kanri-table-corner {
  background-color: var(--text-sub);
  color: var(--bg-white);
  text-align: left;
}
.modal-kanri-table thead th {
  background-color: #e6e6e6;
}
.modal-kanri-table thead th.modal-kanri-table-highlight {
  background-color: var(--accent-red);
  color: var(--bg-white);
}
.modal-kanri-table thead th.modal-kanri-table-dark {
  background-color: var(--text-sub);
  color: var(--bg-white);
}
.modal-kanri-table-highlight {
  background-color: rgba(159, 54, 44, 0.08); /* accent-redの薄い背景 */
}
.modal-kanri-table-photo-row td.modal-kanri-table-highlight {
  background-color: var(--bg-white); /* 写真行だけは画像が入るので背景白のまま */
}
.modal-kanri-table td.modal-kanri-table-strong {
  color: var(--accent-red);
  font-weight: 700;
  font-size: 20px;
}
.modal-kanri-table td.modal-kanri-table-bold {
  font-weight: 600;
}
.modal-kanri-table td.modal-kanri-table-col1 {
  background-color: var(--bg-section-grey);
}
.modal-kanri-table-row-tall th,
.modal-kanri-table-row-tall td {
  padding-top: 16px;
  padding-bottom: 16px;
}
.modal-kanri-table td.modal-kanri-table-maru {
  background-color: rgba(159, 54, 44, 0.08); /* accent-redの薄い背景 */
  color: var(--accent-red);
  font-weight: 600;
}
.modal-kanri-device-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  font-size: 10px;
}
img.modal-kanri-device-img {
  width: auto;
  aspect-ratio: auto;
  height: 96px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
img.modal-kanri-device-img--lg {
  height: 128px;
}
.modal-kanri-table-arrow-cell {
  position: relative;
}
.modal-kanri-table-arrow-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -12px; /* 三角形の幅24pxの半分がセル境界線に乗るように */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 24px solid var(--accent-red);
  z-index: 1;
}
.modal-kanri-note-right { font-size: 14px; color: var(--text-sub); line-height: 1.4; margin: 8px 0 0 0; text-align: right; }

/* ------------------------------------------------------------
   モーダル③  オーナー様向け  (#modal-owner)
   ------------------------------------------------------------ */
.modal-owner-col-title { font-size: 16px; font-weight: 500; color: var(--text-sub); letter-spacing: 0.08em; line-height: 1.5; margin: 0 0 15px 0; }
.modal-owner-note-group { display: flex; flex-direction: column; gap: 8px; }
.modal-owner-note { font-size: 14px; font-weight: 500; color: var(--text-sub); letter-spacing: 0.08em; line-height: 1.4; margin: 0; }
.modal-owner-img-bou { width: 100%; margin: 0 0 16px 0; }
.modal-owner-img-bou img { display: block; width: 100%; height: auto; }
.modal-owner-block { background-color: var(--bg-light-blue); padding: 16px; border-radius: 8px; margin-bottom: 20px; }
.modal-owner-block:last-child { margin-bottom: 0; }
.modal-owner-block--eco { background-color: #eaf3ea; } /* subsidyブロックと差別化する薄い緑（背景のみ・文字色はbrandで統一） */
.modal-owner-lead { font-size: 16px; font-weight: 500; color: var(--text-sub); line-height: 1.8; margin: 0 0 4px 0; }
.modal-owner-highlight {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--brand);
}
.modal-owner-highlight--eco {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-sub);
  border-bottom-color: #2e7d32; /* 緑ブロックに合わせた下線色 */
}
.modal-owner-highlight-accent {
  color: var(--brand);
  font-weight: 500;
}
.modal-owner-row { display: flex; align-items: center; gap: 8px; margin-top: 24px; margin-bottom: 16px; }
.modal-owner-badge { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.modal-owner-icon { width: 120px; height: auto; display: block; font-size: 10px; }
.modal-owner-icon--eco { width: 48px; height: 48px; display: block; }
.modal-owner-row-text-small { font-size: 16px; font-weight: 500; color: var(--text-sub); line-height: 1.6; margin: 0; }
.modal-owner-row-text-bold { font-size: 18px; font-weight: 600; color: var(--text-sub); line-height: 1.4; margin: 4px 0 0 0; }
.modal-owner-url { font-size: 14px; color: var(--text-sub); line-height: 1.4; margin: 0; word-break: break-all; }
.modal-owner-yen-box { background-color: var(--bg-white); border-radius: 8px; padding: 16px 20px; }
.modal-owner-yen { font-size: 15px; font-weight: 500; color: var(--brand); line-height: 1.8; margin: 0 0 8px 0; }
.modal-owner-yen-num { font-size: 24px; font-weight: 500; color: var(--brand); }
.modal-owner-stats { display: flex; align-items: center; gap: 16px; }
.modal-owner-stat-line2 { display: contents; } /* PCはグルーピング無し、SPでのみ意味を持つ */
.modal-owner-stat { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.modal-owner-stat--column { flex-direction: column; align-items: flex-start; }
.modal-owner-stat-label { font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--text-sub); line-height: 1.3; }
.modal-owner-stat-label--sm { font-size: 10px; text-align: center; }
.modal-owner-stat-value { font-family: var(--font-jp); font-size: 16px; font-weight: 500; color: var(--text-sub); line-height: 1; }
.modal-owner-stat-value--lg { font-size: 24px; font-weight: 600; }

/* 共通リセット(.-hbg main .container p{line-height:2}・詳細度0,2,2)に勝つため、<p>タグの各要素のline-heightを詳細度を上げて再指定 */
.pg-SpecialEcomagicIndex .st-Main .modal-seko-subtitle,
.pg-SpecialEcomagicIndex .st-Main .modal-owner-subtitle { line-height: 1.8; }
.pg-SpecialEcomagicIndex .st-Main .modal-seko-subtitle,
.pg-SpecialEcomagicIndex .st-Main .modal-owner-subtitle { margin-top: 8px; }
.pg-SpecialEcomagicIndex .st-Main .modal-seko-text { line-height: 1.5; }
.pg-SpecialEcomagicIndex .st-Main .modal-seko-note { line-height: 1.75; }
.pg-SpecialEcomagicIndex .st-Main .modal-kanri-note-right { line-height: 1.4; }
.pg-SpecialEcomagicIndex .st-Main .modal-owner-note { line-height: 1.75; }
.pg-SpecialEcomagicIndex .st-Main .modal-owner-lead { line-height: 1.8; }
.pg-SpecialEcomagicIndex .st-Main .modal-owner-highlight { line-height: 1.5; }
.pg-SpecialEcomagicIndex .st-Main .modal-owner-row-text-small { line-height: 1.6; }
.pg-SpecialEcomagicIndex .st-Main .modal-owner-row-text-bold { line-height: 1.4; }
.pg-SpecialEcomagicIndex .st-Main .modal-owner-url { line-height: 1.4; }
.pg-SpecialEcomagicIndex .st-Main .modal-owner-yen { line-height: 1.8; }

/* 共通.sw-Section{margin-bottom:35px/PC70px}を高詳細度で0に（PC/SPともフッター手前の余白を詰める）*/
.pg-SpecialEcomagicIndex .st-Main .sw-Section {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   モーダル（seko/kanri/owner）スマホ表示調整
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  #modal-seko .modal-content,
  #modal-kanri .modal-content,
  #modal-owner .modal-content {
    width: 90vw !important;
    height: auto !important;
    padding: 40px 20px !important;
    max-width: 480px !important;
  }
  .modal-seko-body,
  .modal-owner-body { flex-direction: column; }
  .modal-seko-right,
  .modal-owner-right { width: 100%; margin-top: 0; }
  .modal-owner-note { font-size: 12px; /* PC14pxを縮小 */ }
  .modal-seko-note { font-size: 12px; /* PC14pxを縮小 */ }
  .modal-owner-note-group,
  .modal-seko-note-group { line-height: 1.5; gap: 4px; /* PC8pxを詰め */ }
  .modal-close { top: 2px; right: 2px; /* PCのtop20/right25より右上に */ }
  #modal-seko .modal-scroll-body,
  #modal-kanri .modal-scroll-body,
  #modal-owner .modal-scroll-body { margin-right: -2px; padding-right: 12px; /* PCと同じ考え方でSPの閉じるボタン位置に合わせて再計算 */ }
  .modal-owner-row {
    justify-content: center; /* 行の中身をカード幅に対して中央に */
  }
  .modal-owner-row:not(:has(.modal-owner-icon--eco)) {
    flex-direction: column; /* バッジ行のみ縦並びに */
    align-items: center;
    gap: 12px;
  }
  .modal-owner-row:has(.modal-owner-icon--eco) {
    flex-wrap: wrap; /* アイコン+目標年度(1行目)と残り2項目(2行目)を分ける */
    row-gap: 8px;
  }
  .modal-owner-row:has(.modal-owner-icon--eco) .modal-owner-stats {
    display: contents; /* ラッパーを解除し、icon/目標年度/残り2項目を同じ行コンテキストに */
  }
  .modal-owner-stat--column {
    flex-direction: row; /* 目標年度ラベルと値を縦積みから横並びに */
    align-items: center;
  }
  .modal-owner-icon--eco {
    width: 28px; /* PC48pxを縮小 */
    height: 28px;
  }
  .modal-owner-stat-line2 {
    display: flex; /* PCのcontentsを解除し、2項目をひとまとまりの箱に */
    align-items: center;
    justify-content: center; /* 2行目の中身も中央に */
    gap: 8px;
    flex-basis: 100%; /* 箱ごと2行目へ強制改行（中の2項目は箱内で横並び） */
  }
  .modal-owner-stat-label--sm {
    font-size: 11px; /* PC10pxを微調整 */
  }
  .modal-owner-stat-value--lg {
    font-size: 24px;
  }
  .modal-seko-row { flex-direction: column; align-items: flex-start; gap: 8px; /* PC20pxを縮小 */ }
  .modal-seko-text-box { display: contents; } /* ラッパーを解除しtag/imgと同じ並び順コンテキストに */
  .modal-seko-tag { order: 1; }
  .modal-seko-img { order: 2; height: auto; width: 100%; }
  .modal-seko-img img { width: 100%; height: auto; }
  .modal-seko-text { order: 3; }
  .modal-owner-left { width: 100%; }
  .modal-owner-img-bou,
  .modal-owner-img-hyou { width: 100%; margin-left: 0; }
  .modal-kanri-table-scroll { overflow-x: auto; }
  .modal-kanri-table { font-size: 14px; min-width: 600px; }
  .modal-kanri-table-photo-row td.modal-kanri-table-highlight {
    padding-left: 4px; /* PC10pxを詰め、エコマジック画像の拡大分の余白を確保 */
    padding-right: 4px;
  }
  img.modal-kanri-device-img--lg {
    width: 100%; /* 画像自体が横長のため、レターボックスにならないよう横幅いっぱいに */
    height: auto;
  }
  img.modal-kanri-device-img:not(.modal-kanri-device-img--lg) {
    width: 70%; /* エコマジック以外を縮小し、相対的にエコマジックを大きく見せる */
  }
  .modal-kanri-table-arrow-cell img.modal-kanri-device-img {
    width: 50%; /* 従来型給湯器はさらに縮小 */
  }
  .modal-kanri-table-arrow-cell::after {
    right: -8px; /* 三角形の幅16pxの半分がセル境界線に乗るように */
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 16px solid var(--accent-red);
  }
  .modal-kanri-table td.modal-kanri-table-strong { font-size: 18px; /* PC20pxを縮小 */ }
  .modal-kanri-table th.modal-kanri-table-subrow { text-align: left; /* th,tdの中央揃えより詳細度を上げて左揃えに */ }
  .modal-seko-header, .modal-owner-header { margin-bottom: 20px; padding-left: 16px; /* PC40px/32pxを縮小 */ }
  .modal-seko-header::before, .modal-owner-header::before { width: 6px; /* PC8pxを縮小 */ }
  .modal-seko-title, .modal-owner-title { font-size: 20px; }
  .modal-seko-subtitle, .modal-owner-subtitle { font-size: 14px; }
  .modal-seko-text, .modal-seko-right-title, .modal-owner-col-title { font-size: 14px; }
  .modal-seko-time-img {
    max-width: 100%;
  }
  .modal-owner-row {
    gap: 6px; /* PC8pxを詰め */
    margin-top: 16px; /* PC24pxの目安を詰め */
  }
  .modal-owner-icon:not(.modal-owner-icon--eco) {
    width: 90px; /* PC120pxだとスタッツ3項目と並べた際に窮屈なため縮小（--ecoアイコンは対象外、48x48固定のため） */
  }
  .merit-detail-subtitle {
    font-size: 18px; /* PC20px→SP18px */
  }
}

@media (max-width: 767px) {
  .sp-br {
    display: inline; /* SP専用改行を有効化 */
  }
  .pc-br {
    display: none; /* PC専用改行：SPでは無効化（自然折り返し）*/
  }
  #sequence-canvas,
  #target-sequence-canvas {
    display: none !important;
  }
  /* fallback<img>(sequence/target)はSPでも非表示のまま（solution=bg-image方式 / target=3ブロックのみ）。baseのdisplay:noneに任せる */
  .sequence-section {
    height: auto !important;
  }
  .sticky-container {
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }
  /* solution: canvasもfallback<img>も使わず、PS_sp.webpを背景にしてテキストを乗せる（白スクリムで可読性確保）*/
  .overlay-white-fade,
  .overlay-kaiketu {
    display: none;
  }
  .solution-content {
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
    pointer-events: auto;
    overflow: hidden; /* ぼかしたPS_sp疑似要素のはみ出しをクリップ */
  }
  .solution-content::before,
  .solution-content::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  .solution-content::before { /* 製品画像＋白半透明（ぼかす）*/
    background:
      linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), /* 白半透明（明るさ確保）*/
      url('../../assets/img/special/ecomagic/PS_sp.webp') center / cover no-repeat; /* 製品画像 */
    filter: blur(4px);
    transform: scale(1.06); /* blurの透明縁が出ないよう拡大 */
    z-index: 0;
  }
  .solution-content::after { /* グラデ：ぼかさず上に重ねる */
    background: url('../../assets/img/special/ecomagic/kaiketu.webp') center / cover no-repeat;
    z-index: 1;
  }
  .solution-text-box {
    position: relative; /* 疑似要素より前面に */
    z-index: 2;
    opacity: 1 !important;
    transform: none !important; /* 中央寄せのtranslateYを打ち消す */
    width: auto;
    padding: 100px var(--page-pad) 80px; /* 上100/下80。左右はpage-pad（このセクションは全幅=外側gutterが無いため必須）*/
    text-align: left;
  }
  .solution-title,
  .solution-desc {
    color: var(--text-main); /* SPは背景が画像なので一段濃く（PCはtext-mid） */
  }
  .solution-title {
    font-size: clamp(32px, 6vw, 44px); /* SPは最小32px */
    background: none; /* PCの塗りワイプを解除（SPはis-active発火しないため実色表示）*/
    -webkit-text-fill-color: var(--text-main);
    opacity: 1; /* baseのopacity:0を解除（SPは常時表示）*/
  }
  .solution-desc {
    font-size: 16px; /* PC18pxを縮小（obstacles-descと同様、SP幅では18pxだと行長が短すぎるため） */
    opacity: 1; /* SPはis-active発火しないので常時表示 */
  }
  .target-details-section {
    height: auto !important;
    margin-bottom: 80px; /* PC160の/2 */
  }
  .target-sticky-bg {
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }
  .target-scroll-content {
    margin-top: 0 !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 48px; /* ブロック間アキ（gapで一元管理）*/
  }
  .target-block {
    height: auto !important;
    padding: 0; /* 上下padding撤去（ブロック間アキは別途調整）*/
  }
  .hero {
    margin-top: 0; /* PCの-51px詰めはSPでは不要（ヘッダー/余白高さが異なるため）*/
    padding-bottom: 0; /* SPでは商品画像との住み分け上寄せ(80px)は不要 */
    justify-content: center; /* PC専用の左揃え(171px)はSPでは不要 */
    background-position: 43% 0%; /* 給湯器を左端に一部残しつつ、テキストと被らないように */
    background-size: auto 130%; /* coverだと縦に余白が無く動かせないため、少し拡大して縦位置調整の余地を作る */
  }
  .hero-inner {
    margin-left: 0; /* PC専用の171pxオフセットを解除 */
    margin-top: -64px; /* 中央よりやや上に */
  }
  .hero-logo-img {
    height: 54px; /* PC(92px)の指定をwidth150px相当の見た目サイズに変換(元のアスペクト比 1048:374) */
    margin-bottom: 40px;
  }
  .hero-title {
    font-size: clamp(40px, 6vw, 68px); /* SPは最小40px */
  }
  .hero-subtitle {
    font-size: 16px;
  }
  .pg-SpecialEcomagicIndex .st-Main .section-title {
    font-size: clamp(32px, 6vw, 40px); /* SPは最小32px（高詳細度でkinou-white-boxのclampに勝つ・!important不要）*/
  }
  .problems {
    height: auto;
    padding: 100px 0 0; /* PC(200)の/2。左右は contentBox(--page-pad) に一本化 */
  }
  .problems-card {
    width: 100%; /* PCはmin(1600px,...)でインセットするが、SPは.problems(左右paddingなし)いっぱいに全幅表示 */
    margin: -112px 0 0; /* 左右のautoセンタリングを解除しフルブリードに */
    padding: 80px 0 60px;
    border-radius: 0; /* フルブリードのため角丸を解除 */
    background-image: none; /* SPは::beforeの固定高さレイヤーに置き換え */
  }
  .problems-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 700px; /* 本文の折り返し行数でカード自体の高さが変動しても、背景の切り取られ方が変わらないよう固定 */
    z-index: -1;
    /* 白のオーバーレイをSPのみ60%に強め、写真を40%相当の見え方に（PCは40%のまま） */
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
      url('../../assets/img/special/ecomagic/kowasukabe.webp');
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
      -webkit-image-set(url('../../assets/img/special/ecomagic/kowasukabe.webp') 1x, url('../../assets/img/special/ecomagic/kowasukabe@2x.webp') 2x);
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
      image-set(url('../../assets/img/special/ecomagic/kowasukabe.webp') 1x, url('../../assets/img/special/ecomagic/kowasukabe@2x.webp') 2x);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }
  .problems-lead-text {
    font-size: 16px; /* PC18pxを縮小（obstacles-descと同様、SP幅では18pxだと行長が短すぎるため） */
    font-weight: 500;
    color: var(--text-main); /* PCのtext-subより濃く */
  }
  .pg-SpecialEcomagicIndex .st-Main .problems-main-title {
    margin-bottom: 60px; /* PCが高詳細度(120)のため同詳細度で上書き */
    font-size: clamp(25px, 5vw, 56px); /* SPは最小25pxに（375で1行に収める） */
  }
  .obstacles {
    padding: 80px 0;
  }
  .obstacles-inner {
    margin-bottom: 40px;
  }
  .pg-SpecialEcomagicIndex .st-Main .obstacles-title {
    margin-bottom: 32px; /* PC側の高詳細度clampを上書き */
  }
  .obstacles-desc {
    font-size: 16px;
  }
  .obstacles-gallery-item img {
    height: 260px;
  }
  .drain-explanation-header {
    margin-bottom: 40px;
  }
  .drain-explanation-lead {
    font-size: 16px; /* PC18pxを縮小（obstacles-descと同様、SP幅では18pxだと行長が短すぎるため） */
  }
  .drain-explanation-badges {
    flex-wrap: wrap;
    justify-content: space-between; /* NEWと特許バッジを両端に */
    align-items: flex-start; /* 上揃え */
    gap: 0;
  }
  .pg-SpecialEcomagicIndex .st-Main .drain-explanation-badges {
    margin-bottom: 32px; /* PC側の56pxを上書き */
  }
  .badge-new {
    order: 1;
    align-self: flex-end; /* 特許バッジ(円52px)の下端に揃える */
    font-size: 24px; /* PC34pxを縮小（badge-patentの64→52と同程度の比率） */
  }
  .badge-patent {
    order: 2;
    margin-top: 8px; /* 円バッジが行内で最も背が高くalign-selfでは動かせないため、margin-topで下にずらす */
    margin-bottom: -8px; /* マイナスマージンで下の見出しテキストに少しかぶるように */
  }
  .drain-explanation-title {
    order: 3;
    width: 100%; /* 強制的に次の行へ折り返す */
    text-align: center;
    font-size: clamp(32px, 6vw, 40px); /* PC48pxを.section-titleと同じSPスケールに統一 */
  }
  .badge-patent {
    width: 52px;
    height: 52px;
    font-size: 11px;
    line-height: 1.2;
  }
  .kinou-bg-wrapper {
    padding: 60px 0 80px; /* 左右はpage-padに一本化（下はPC160の/2=80・上80据え置き）*/
    background-size: cover; /* SPは継ぎ目無視。グラデが見切れないよう全面を覆う */
  }
  .kinou-white-box {
    padding: 60px 0; /* 左右はcontentBox(page-pad)に一本化（上下PC120の/2=60）*/
    border-radius: 8px;
  }
  .kinou-divider {
    margin-top: 60px; /* PC120の/2 */
  }
  .explanation-card {
    grid-template-columns: 1fr;   /* モバイルは1カラムで縦積み */
    gap: 16px; /* 画像↔文（縦）。カード間(.explanation-cards-wrapper)はPC同様48のまま */
    transform: translateY(40px);
  }
  .explanation-card.is-visible {
    transform: translateY(0);
  }
  .explanation-img-box {
    grid-column: auto;
    width: 100%;
    height: auto; /* PC側の固定296pxがSPまで残り、幅可変で比率が崩れていたバグを修正 */
    aspect-ratio: 1 / 1; /* SP専用：正方形に固定（元の310×296に近い比率で、PCの1.8とは別に指定） */
    min-height: 200px;
    border-radius: 8px;
  }
  .explanation-text-box {
    grid-column: auto;
    width: 100%;
    min-height: auto;
    /* paddingは撤去：画像↔文の間隔は .explanation-card の gap に一本化（PCも0）*/
  }
  .explanation-title {
    font-size: clamp(22px, 5vw, 26px); /* SPは最小22px */
  }
  .explanation-desc {
    font-size: 16px; /* PC18pxを縮小（obstacles-descと同様、SP幅では18pxだと行長が短すぎるため） */
  }
  .pg-SpecialEcomagicIndex .st-Main .drain-explanation-note {
    padding-bottom: 24px; /* PC48の/2：注釈↓ボタンの間隔 */
  }
  .pg-SpecialEcomagicIndex .st-Main .active-cases .section-title {
    margin-top: 60px; /* PC120の/2（PCが高詳細度のため同詳細度で上書き）*/
    margin-bottom: 40px; /* PCの56→40 */
  }
  .active-cards-wrapper {
    grid-template-columns: 1fr;   /* モバイルは1カラムで縦積み */
    justify-items: center;
  }
  .active-card {
    grid-column: auto;
    width: 100%;
    height: auto;
  }
  .active-card-img-box {
    height: auto;
    aspect-ratio: 640 / 360; /* 16:9で横長に切り替え（PCの縦長6:7から向きが変わるためSP専用比率）。画像は2倍サイズ640×360を想定 */
  }
  .active-card-text-box {
    height: auto;
    min-height: auto;
    margin-top: 16px; /* 画像↔文（PCは24・SPは16）*/
  }
  .active-card-title {
    font-size: 22px;
    min-height: auto; /* SPは縦積みで高さ揃え不要なため、3行分確保をやめて詰める */
  }
  .active-card-label {
    font-size: 14px; /* PC15pxを縮小 */
  }
  .active-card-desc {
    font-size: 16px; /* PC18pxを縮小（obstacles-descと同様、SP幅では18pxだと行長が短すぎるため） */
  }
  .pg-SpecialEcomagicIndex .st-Main .merit {
    padding-top: 100px;    /* PC200の/2 */
    padding-bottom: 60px;  /* PC120の/2 */
  }
  .merit-detail-inner {
    grid-template-columns: 1fr; /* desktopの12カラムを単一カラムに（未指定だと狭幅で列が潰れて画像/文字が崩れる）*/
    gap: 40px;
  }
  .merit-detail-inner::before {
    top: -80px; /* 見出し付近にさらに寄せるため上にずらす */
    left: calc(var(--page-pad) * -1); /* page-padガター分を食い込ませて画面端まで */
    width: calc(100% + var(--page-pad) * 2); /* ビューポート幅いっぱい（左右の切れを解消）*/
    height: 100%; /* PCの120%だとSPの縦積みレイアウトで次セクションまで背景がはみ出すため100%に */
    background-position: 65% top; /* 見出し（三方全ての〜）付近に背景が来るよう上寄せ、左寄りに */
    background-size: 100%;
  }
  .merit-detail-text-box,
  .merit-detail-img-box {
    grid-column: auto; /* 1/8・8/13指定を解除（残すと暗黙カラム生成で崩れる）*/
  }
  .pg-SpecialEcomagicIndex .st-Main .merit-title {
    font-size: 32px;
    margin-bottom: 32px; /* PC120pxを縮小 */
    position: relative;
    z-index: 21; /* merit-detail-inner(z-index:20)の背景より前面に */
  }
  .merit-detail-title {
    font-size: 28px;
    text-align: left;
  }
  .merit-detail-desc {
    font-size: 16px; /* PC18pxを縮小（obstacles-descと同様、SP幅では18pxだと行長が短すぎるため） */
  }
  .target-content-inner {
    padding: 0; /* 左右は page-pad inner に一本化（20px直書きは二重インセット）*/
  }
  .target-block-1 .target-content-inner,
  .target-block-2 .target-content-inner,
  .target-block-3 .target-content-inner {
    align-items: center;
    text-align: center;
  }
  .target-label {
    font-size: 18px; /* PC24px→SP18px */
  }
  .target-text-area {
    text-align: left; /* 親のtext-align:centerがinline-flexの.btn-largeにのみ効いてしまうため解除 */
  }
  .target-title {
    font-size: 24px;
    align-self: flex-start; /* 親のalign-items:centerによる中央寄せを解除し左端に */
    text-align: left; /* 親のtext-align:centerを解除 */
    width: 100%;
  }
  .pg-SpecialEcomagicIndex .st-Main .target-desc {
    font-size: 16px; /* PC18pxを縮小（obstacles-descと同様、SP幅では18pxだと行長が短すぎるため） */
    margin-bottom: 24px; /* →Read moreボタン（PC48→SP24・高詳細度で上書き）*/
    align-self: flex-start; /* 親のalign-items:centerによる中央寄せを解除し左端に */
    text-align: left; /* 親のtext-align:centerを解除 */
  }
  .flash-spec {
    min-height: auto; /* PC固定760pxを撤去し、paddingベースの可変高さに */
  }
  .flash-spec-title {
    font-size: clamp(28px, 8vw, 40px); /* PC64pxを他の見出しスケール(40px系)に揃えて縮小 */
    row-gap: 8px; /* ロゴと文字が2段になった際の縦の間隔 */
  }
  .flash-spec-title .text-fill-wipe--dark {
    text-align: center; /* 2段目になった際、箱幅いっぱいの中でテキストを中央に */
    font-size: 28px;
  }
  .pg-SpecialEcomagicIndex .st-Main .flash-spec-title {
    padding-top: 60px; /* PC120の/2 */
    padding-bottom: 32px;
  }
  .flash-spec-logo {
    height: 64px; /* PC104pxのままだと横幅(約416px)がSP幅を超えるため縮小 */
  }
  .flash-spec-row {
    flex-direction: column-reverse; /* 横並び(画像+テキスト)を縦積みに、上下は逆順(文字→画像) */
    align-items: stretch;
  }
  .flash-spec-media {
    width: 100%;
    max-width: none;
    margin-left: 0;
    aspect-ratio: 1209 / 647; /* FLash.webp実比率で高さを可変に */
  }
  .flash-spec-media img {
    object-position: center;
  }
  .flash-spec-content {
    padding: 0 0 60px; /* PC専用の左64pxオフセットを撤去。上余白なし、下端60px */
  }
  .flash-spec-stats {
    gap: 32px; /* PC56pxの約半分強 */
  }
  .flash-spec-stat-label {
    font-size: 18px; /* PC28px→SP18px */
  }
  .pg-SpecialEcomagicIndex .st-Main .flash-spec-stat-label {
    margin-bottom: 8px; /* PC12pxに対しSPは元の8pxを維持 */
  }
  .flash-spec-stat-value .unit {
    font-size: 18px; /* PC24pxを縮小、SPは変更なしの現状維持 */
  }
  .pg-SpecialEcomagicIndex .st-Main .flash-spec-stat-value {
    margin-top: -0.5em; /* PCの-0.73emだとSPでは詰まりすぎるため調整 */
  }
  .pg-SpecialEcomagicIndex .st-Main .flash-spec-footnote {
    margin-bottom: 24px; /* PC48の/2 */
  }
  .remote-spec {
    height: auto; /* PC固定540pxを撤去。中身(remote-spec-content)の高さに追従させる */
  }
  .remote-spec-content {
    position: relative; /* PCの絶対配置(高さ100%基準)をやめ、通常フローでセクションの高さを決める側に */
    height: auto;
    padding: 60px 0; /* PC専用の左64pxオフセットを撤去（横はwidth側のpage-padインセットに一本化） */
  }
  .remote-spec-title {
    font-size: clamp(24px, 6vw, 32px); /* PC40pxを縮小 */
    text-align: center;
  }
  .pg-SpecialEcomagicIndex .st-Main .remote-spec-title {
    margin-bottom: 16px; /* PC32の/2 */
  }
  .pg-SpecialEcomagicIndex .st-Main .remote-spec-desc {
    margin-bottom: 24px; /* PC48の/2 */
  }
  .remote-spec-images {
    gap: 12px; /* PC16の目安を詰め */
    margin: 0;
    justify-content: center; /* PCは左寄せだがSPは中央に */
  }
  .pg-SpecialEcomagicIndex .st-Main .remote-spec-images {
    margin-bottom: 24px; /* PC48の/2 */
  }
  .remote-spec-image img {
    height: 80px; /* PC120pxを縮小 */
  }
  .faq {
    padding: 60px 0 80px; /* PC(120/160)の/2 */
  }
  .faq-title {
    font-size: clamp(27px, 6vw, 40px); /* SPは最小27px */
  }
  .pg-SpecialEcomagicIndex .st-Main .faq-title {
    margin-bottom: calc(var(--space) * 4); /* 32px（PC56→SP32・高詳細度で上書き）*/
  }
  .faq-question {
    font-size: 15px;
    padding: 10px 0;
    height: auto;
    min-height: 70px;
  }
  .faq-icon {
    flex-shrink: 0;
    margin-left: 10px;
  }
  .contact-download {
    padding: 0 0 80px 0; /* 下はPC160の/2=80（上はfaq下paddingに一本化＝0）*/
  }
  .cd-main-title {
    font-size: clamp(27px, 6vw, 40px); /* SPは最小27px */
  }
  .pg-SpecialEcomagicIndex .st-Main .cd-main-title {
    margin-bottom: calc(var(--space) * 4); /* 32px（PC56→SP32・高詳細度で上書き）*/
  }
  .cd-col-title {
    font-size: clamp(22px, 5vw, 26px); /* SPは最小22px */
  }
  .cd-inner {
    grid-template-columns: 1fr; /* gapはbaseの48を継承（PCと同値）*/
  }
  .cd-col {
    width: 100%;
  }
  .cd-btn-left,
  .cd-btn-center,
  .cd-btn-large,
  .cd-btn-fill {
    width: 100%;
    max-width: 343px; /* 375のcontent幅(375-page-pad*2)。375で目一杯・広SPでも同サイズ中央 */
  }
  .cd-btn-large,
  .cd-btn-stacked {
    flex: none; /* baseのflex:1を解除 */
    flex-direction: row;
    padding: 24px 0; /* PC40pxを縮小 */
  }
  .cd-btn-text {
    font-size: 20px; /* PC28pxを縮小 */
  }
  .cd-btn-left,
  .cd-btn-center {
    padding: 24px 0; /* PC40pxを縮小 */
  }
  .cd-icon {
    font-size: 24px; /* PC32pxを縮小 */
    font-weight: 400; /* SPは全アイコン太さ統一 */
  }
  .cd-btn-large .cd-icon,
  .cd-btn-stacked .cd-icon {
    font-size: 24px; /* PC56pxを縮小 */
  }
  .cd-icon-large {
    font-size: 24px; /* 他アイコン(cd-icon=24px)と揃える */
  }
  .bottom-hero-title {
    font-size: clamp(32px, 5vw, 56px); /* SPは最小32px */
  }
  .bottom-hero {
    background-position: 43% 0%; /* 給湯器がテキストと被らないように、heroと同じ調整 */
    background-size: auto 130%;
  }
}