@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .ecl-container / --wide / --md / --form  - コンテナ幅（1300 / 1300 / 1200 / 880px）
 * .ecl-section / --sub / --md / --pale / --gray / --dark / --relative / --pt0 / --pb0
 *              / --works-list / --entry    - clamp() ベースのセクション余白＋面の色
 * .ecl-header / __inner / __logo / __nav / __right / __cta / __cta-icon
 *                                          - 日本語のみ・右寄せナビの sticky ヘッダー
 * .ecl-sns-icon / --light                  - SNSアイコン（ヘッダー緑／フッター淡緑）
 * .ecl-mv / __slider / __slide / __img / __veil / __content / __catch / __en / __rule / __sub
 *                                          - TOP メインビュー（左からの白ベール）
 * .ecl-iconbar / --solar / __inner / __item / __icon / __ja / __en
 *                                          - 事業アイコン帯（淡緑・等分割・縦罫）
 * .ecl-about / __bg / __scrim / __inner / __heading / __en / __ja / __text
 *                                          - 大きな薄い英字に日本語を重ねる暗色 ABOUT
 * .ecl-heading / --center / --center-lg / __en / __ja （色・サイズ modifier 付き）
 *                                          - 英字（Cormorant）＋日本語のセクション見出し
 * .ecl-sechead / --end / --works / __title / __lead
 *              / __catch / --works / --flow / --white
 *                                          - 見出し＋リード文の横並びヘッダー行
 * .ecl-lead / --sub / .ecl-note / .ecl-chips / .ecl-chip
 *                                          - リード文・注記・エリアチップ
 * .ecl-btn / --solid / --outline / --white / --sm
 * .ecl-arrow / --left / .ecl-textlink / --lh
 *                                          - 角丸ゼロのボタン群と矢印（Font Awesome）
 * .nav-toggle / .sp-nav（共通クラスの上書き）  - SPハンバーガーとフルスクリーンナビの配色
 * .ecl-topservice / __visual / __img / __list / __link / __en / __ja / __text / __arrow
 *                                          - TOP SERVICE（ホバーで左写真をクロスフェード）
 * .ecl-worksbnr / __img / __veil / __inner / __body / __text
 *                                          - TOP WORKS バナー（濃緑グラデ＋白ボタン）
 * .ecl-area / __body / __ja / __map         - 対応エリア2カラム
 * .ecl-cta / __bg / __veil / __inner / --wide / __main / __heading / __text / __btns / __side
 *                                          - 各ページ最下部のお問い合わせCTA
 * .ecl-hero / __bg / __veil / __content / __catch / __en-sm / __en / __ja
 *                                          - 下層ページ共通ヒーロー
 * .ecl-leaf / --hero-tl / --hero-bl / --sec-tr / --str-bl / --str-tr / --solar-bl / --cta
 *                                          - 葉・枝のカット素材あしらい
 * .ecl-breadcrumb-bar / .ecl-breadcrumb     - ＞区切りのパンくず帯
 * .ecl-cards3 / .ecl-card / __img / __body / __title / __rule / __text
 *                                          - サービスカード（タイトル左に3px縦罫）
 * .ecl-strength / --dark / __item / __icon / __ja / __text
 *                                          - 罫線で区切る強みカード（淡緑面／暗色面）
 * .ecl-flow / __item / __img / __body / __num / __ja / __text
 *                                          - 写真下端に重なる円形番号バッジのフロー
 * .ecl-solarcards / .ecl-solarcard / __img / __fade / __body / __num / __ja / __text
 *                                          - 写真からアクセント色へ溶けるサービスカード
 * .ecl-business / __img / __body / __lead / __text / __btn
 *                                          - 法人・施工会社様へ（写真＋テキスト）
 * .ecl-works / --solar / --boxed / __item / __img / __body / __date / __title
 *                                          - 施工実績カード（全ページ共通でサムネ＋日付＋タイトル）
 * .ecl-anchors / .ecl-anchor               - 施工実績一覧のカテゴリアンカーボタン
 * .ecl-worksblock / __head / __en / __ja / __foot
 *                                          - 施工実績一覧のカテゴリ別ブロック
 * .ecl-entry / __main / __meta / __cat / __date / __title / __sub / __main-img
 *             / __ba / __ba-item / __badge / __body / __back / __side
 * .ecl-sidebox / __title / __body / __link - 記事詳細とサイドバー
 * .ecl-spec / __row / __k / __v            - 記事詳細の仕様テーブル（divベース）
 * .ecl-message / __title / __body / __catch / __text / __sign
 * .ecl-overview / __table / __cards / .ecl-ov__row / __k / __v
 * .ecl-linkcard / __label / __icon / __title / __note
 * .ecl-contactcards / .ecl-contactcard / __label / __value / __note
 * .ecl-form / __grid / __row / __block / __label / __req / __input / __file / __privacy / __submit
 *                                          - 会社概要ページ内のお問い合わせフォーム
 * .ecl-footer / __body / __inner / __logo / __contact / __tel / __hours / __sns / __nav
 *             / __bottom / __copyright     - 深緑フッター
 * .ecl-page-top / __link                   - 右下固定の丸型ページトップ
 * .ecl-sp-fixed-bar / __link / --line      - SP固定バー（TEL・LINE）
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ■ 値の粒度不足
 *   - 余白・文字サイズがすべて clamp()（例 padding:clamp(60px,9vw,120px)、
 *     font-size:clamp(30px,3.8vw,48px)）で設計されている。共通の
 *     $section_padding / .fz-* / .mb-* は固定値のみのため再現できない。
 *   - コンテナ幅が 1440 / 1280 / 1200 / 880px の4種類。共通は3種類（base/wide/narrow）。
 *
 * ■ 指定方向不足
 *   - ヒーロー・CTAの「左からの白グラデーションベール」（黒暗幕ではない）。
 *     .page-hero__overlay は rgba(黒,.4) の一色のみで、方向付きベールが無い。
 *   - 装飾画像を枠外（top:-50px / left:-60px）にはみ出させる配置。
 *     .deco-item--offset-lg は margin -60px のみで、四隅ごとの個別オフセットが持てない。
 *
 * ■ 状態不足
 *   - 「リンクのホバーで、別の要素（左側の写真）をクロスフェードで切り替える」
 *     連動ホバー。共通の hover utility は自要素のみを対象にしている。
 *
 * ■ 構造不足
 *   - 大きな薄い英字の「上に」日本語見出しを重ねて中央配置する ABOUT US 見出し。
 *     .heading-big--overlap は縦の重なり（margin-top マイナス）で、
 *     完全な重ね合わせ（position:absolute で同一行に重ねる）ができない。
 *   - 写真の下端に円形番号バッジを重ねるフローカード。.card-flow は
 *     カード内に番号を置く構造で、写真との重なりを持たない。
 *   - サービスカードのタイトル左に高さ追従の3px縦罫（align-self:stretch）。
 *     .heading-bar は border-left で、テキスト行高に追従する別要素にできない。
 *
 * ■ 装飾パターン不足
 *   - 写真の下端から背景色へ溶ける多段グラデーション
 *     （rgba(84,133,53,0)→.28→.72→不透明）。.bg-photo-fade は横方向のみ。
 *   - box-shadow:0 0 0 1px による「隣り合うセルの罫線を重ねる」グリッド区切り。
 *     共通には border 系のみで、gap:0 グリッドの重複罫線対策が無い。
 *
 */

/* ==========================================================================
   0. 土台（デザイン元の共通値）
   ========================================================================== */
:root {
  --ecl-base: #2d5a32;
  --ecl-sub: #5f9146;
  --ecl-accent: #548535;
  --ecl-pale: #edf5e5;
  --ecl-gray: #f2f3f1;
  --ecl-dark: #1f4426;
  --ecl-ink: #33403a;
  --ecl-ink-sub: rgba(51, 64, 58, .85);
  --ecl-ink-weak: rgba(51, 64, 58, .72);
  --ecl-line: rgba(45, 90, 50, .18);
  --ecl-line-thin: rgba(45, 90, 50, .09);
  --ecl-lightgreen: #a9cf8f;
  --ecl-imgbg: #e8efe1;
  /* ヘッダーはMV・下層ヒーローの上に重ねる。ページ最上部は白のレイヤーで、
     下にいくほど透明にして写真へふわっと溶かす。スクロールすると白面に切り替わる
     （切替は js/common.js が html に .is-scrolled を付与）。
     --ecl-header-h はヘッダーの高さ。MV・ヒーローの上余白としても使う */
  --ecl-header-h: 88px;
  --ecl-header-bg: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 45%, rgba(255, 255, 255, .34) 78%, rgba(255, 255, 255, 0) 100%);
  /* 基準コンテンツ幅。MV・アイコン帯・CTA・本文列（.ecl-container）がこの1箇所で揃う */
  --ecl-w: 1200px;
  --ecl-pad-x: clamp(20px, 4vw, 60px);
  --ecl-pad-y: clamp(64px, 8vw, 112px);
  --ecl-pad-y-sub: clamp(60px, 9vw, 120px);
  /* 見出し行の縦罫（.ecl-sechead）の左右アキ。罫の両側に同値で入るので、
     ここ1箇所で SERVICE・OUR STRENGTH・FLOW の区切り線の余白が揃う */
  --ecl-rule-gap: clamp(32px, 5vw, 72px);
}

a {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease;
}
a:hover {
  opacity: 1;
}

@keyframes ecl-fadeup {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* 矢印（デザイン元の「⟶」を Font Awesome で置き換え） */
.ecl-arrow {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.ecl-arrow::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f178";
  display: inline-block;
  line-height: 1;
}
.ecl-arrow--left::before { content: "\f177"; }
/* 下向きの山形（＞を下に向けた形）。ページ内アンカー用 */
.ecl-arrow--down::before { content: "\f078"; }

/* ==========================================================================
   1. レイアウト（コンテナ・セクション）
   ========================================================================== */
/* 固定ヘッダーに隠れないよう、ページ内アンカーの着地位置をずらす */
[id] { scroll-margin-top: calc(var(--ecl-header-h) + 16px); }

.ecl-container       { max-width: var(--ecl-w); margin: 0 auto; }
.ecl-container--wide { max-width: var(--ecl-w); margin: 0 auto; }
.ecl-container--md   { max-width: 1200px; margin: 0 auto; }
.ecl-container--form { max-width: 880px;  margin: 0 auto; }

.ecl-section        { padding: var(--ecl-pad-y) var(--ecl-pad-x); }
.ecl-section--sub   { padding: var(--ecl-pad-y-sub) var(--ecl-pad-x); }
.ecl-section--md    { padding: clamp(52px, 7vw, 96px) var(--ecl-pad-x); }
.ecl-section--pt0   { padding-top: 0; }
.ecl-section--pb0   { padding-bottom: 0; }
.ecl-section--gray  { background: var(--ecl-gray); }
.ecl-section--pale  { background: var(--ecl-pale); }
.ecl-section--dark  { background: var(--ecl-dark); }
.ecl-section--relative { position: relative; overflow: hidden; }
.ecl-section--relative > .ecl-container,
.ecl-section--relative > .ecl-container--wide { position: relative; z-index: 2; }

/* ==========================================================================
   2. ヘッダー
   ========================================================================== */
/* MV・ヒーローに重ねるので fixed。
   最上部 … 白のレイヤーを敷き、下にいくほど透明にして写真へふわっと溶かす（::before）
   スクロール後 … 白面に切り替わる（::after）
   2枚を opacity でクロスフェードさせる（グラデーションと単色は transition が効かないため） */
.ecl-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
.ecl-header::before,
.ecl-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity .35s ease;
}
.ecl-header::before { background: var(--ecl-header-bg); }
.ecl-header::after {
  background: #fff;
  box-shadow: inset 0 -1px 0 rgba(45, 90, 50, .14);
  opacity: 0;
}
.is-scrolled .ecl-header::before { opacity: 0; }
.is-scrolled .ecl-header::after  { opacity: 1; }

.ecl-header .ecl-sns-icon { color: var(--ecl-base); }
.ecl-header .ecl-sns-icon:hover { color: var(--ecl-sub); }

.ecl-header__inner {
  position: relative;   /* 上の2枚のレイヤーより前面に出す */
  z-index: 1;
  max-width: 1440px;
  height: auto;
  min-height: var(--ecl-header-h);
  padding: 0 clamp(20px, 3vw, 40px);
  gap: clamp(14px, 1.8vw, 30px);
  flex-wrap: wrap;
}
/* ロゴ高さ 75px ＋ 上下 padding 6px ＝ 87px で、ヘッダーの min-height（88px）に収まる
   （ヘッダーを高くせずにロゴだけ大きくできる上限）。
   ヘッダーの地は最上部・スクロール後とも白系なので、ロゴは通常版のみ使う */
.ecl-header__logo { padding: 6px 0; }
.ecl-header__logo img { height: 75px; width: auto; display: block; }

.ecl-header__nav {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  margin-right: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: clamp(20px, 2.2vw, 30px);
}
.ecl-header__nav .header__nav-item a { padding: 5px 0; }
.ecl-header__nav .header__nav-item a::after { display: none; }
.ecl-header__nav .header__nav-ja {
  margin-top: 0;
  /* ロゴを大きくしたぶんナビも上げる。狭い幅では 13px まで戻して折返しを防ぐ
     （ナビは1100px以下で非表示になり、SPナビに切り替わる） */
  font-size: clamp(13px, 1.1vw, 15.5px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #3c4a3e;
  white-space: nowrap;
}
.ecl-header__nav .header__nav-item a:hover .header__nav-ja { color: var(--ecl-sub); }
.ecl-header__nav .header__nav-item--current a { border-bottom: 1px solid var(--ecl-base); }
.ecl-header__nav .header__nav-item--current .header__nav-ja { color: var(--ecl-base); }

.ecl-header__right { gap: 14px; height: auto; }

.ecl-sns-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ecl-sub);
  font-size: 19px;
  line-height: 1;
}
.ecl-sns-icon:hover { color: var(--ecl-base); }
.ecl-sns-icon--light { color: var(--ecl-lightgreen); font-size: 20px; }
.ecl-sns-icon--light:hover { color: #fff; }

.ecl-header__cta {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  height: auto;
  padding: 16px 22px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  white-space: nowrap;
  border-radius: 999px;
}
.ecl-header__cta:hover { background: var(--ecl-accent); }
.ecl-header__cta-icon { font-size: 17px; }

/* SNS3アイコン：画面右端の中央に縦並びで固定（ヘッダーから移設）。
   右下のページトップボタンとは高さが離れているため干渉しない */
.ecl-sns-fixed {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(45, 90, 50, .14);   /* 1pxのすき間が区切り罫に見える */
}
.ecl-sns-fixed .ecl-sns-icon {
  width: 46px;
  height: 46px;
  background: #fff;
  color: var(--ecl-base);
  transition: background .25s ease, color .25s ease;
}
.ecl-sns-fixed .ecl-sns-icon:hover { background: var(--ecl-base); color: #fff; }

/* ハンバーガー：白系のヘッダー上では枠なし・深緑の3本線。開いたら白線にする */
.nav-toggle {
  top: 12px;
  right: 10px;
  background: transparent;
  backdrop-filter: none;
}
.nav-toggle .nav-toggle__line { background: var(--ecl-base); }
.nav-toggle.is-active .nav-toggle__line { background: #fff; }

/* SPナビ：下地が透けないよう不透明にする（共通は .97 の半透明） */
.sp-nav {
  background: linear-gradient(160deg, #2d5a32 0%, #1f4426 100%);
  padding-bottom: calc(40px + 70px);
}
.sp-nav__link { letter-spacing: .06em; }
.sp-nav__en { font-family: "Cormorant Garamond", serif; font-size: 1.1rem; letter-spacing: .18em; }

/* SPナビ下部 */
.ecl-sp-nav__tel { color: #fff; font-family: "Noto Sans JP", sans-serif; letter-spacing: .06em; }
.ecl-sp-nav__tel::before { color: #fff; }
.ecl-sp-nav__sns { display: flex; justify-content: center; gap: 18px; margin-top: 18px; }

/* ==========================================================================
   3. TOP メインビュー
   ========================================================================== */
.ecl-mv {
  position: relative;
  background: #fff;
  overflow: hidden;
  min-height: clamp(340px, 36vw, 520px);
  display: flex;
  align-items: center;
  /* ヘッダーが重なるぶん、中央寄せのテキストを下げる（写真＝__slider は inset:0 なので影響なし） */
  padding-top: var(--ecl-header-h);
}
/* CMSスライダー差し替え時も外枠の高さが効くよう #slideshow に明示的な高さを持たせる */
.ecl-mv__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: clamp(340px, 36vw, 520px);
  z-index: 0;
}
.ecl-mv__slider .swiper-slide,
.ecl-mv__slide { width: 100%; height: 100%; }
.ecl-mv__img,
.ecl-mv__slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  display: block;
}
/* 白ベール：写真をできるだけ見せつつ、文字の下だけ濃さを残す。
   停止位置は実測した文字の右端に合わせている（PC＝57%／SP＝91%） */
.ecl-mv__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .0) -17%, rgba(255, 255, 255, .84) 15%, rgba(255, 255, 255, .66) 56%, rgba(255, 255, 255, 0.26) 59%, rgba(255, 255, 255, 0) 76%);
}
.ecl-mv__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ecl-w);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--ecl-pad-x);
  animation: ecl-fadeup 1s both;
}
.ecl-mv__catch {
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .14em;
  color: #3c4a3e;
}
.ecl-mv__en {
  margin: clamp(14px, 2vw, 26px) 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 6.2vw, 80px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .055em;
  color: var(--ecl-base);
}
.ecl-mv__rule {
  display: block;
  width: 52px;
  height: 1px;
  background: var(--ecl-sub);
  margin: clamp(26px, 3.5vw, 44px) 0;
}
.ecl-mv__sub {
  font-size: clamp(17px, 2.1vw, 25px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--ecl-base);
}

/* ==========================================================================
   4. 事業アイコン帯
   ========================================================================== */
.ecl-iconbar {
  background: var(--ecl-pale);
  border-top: 1px solid rgba(45, 90, 50, .14);
}
.ecl-iconbar__inner {
  max-width: var(--ecl-w);
  margin: 0 auto;
  padding: 0 var(--ecl-pad-x);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ecl-iconbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 34px 18px;
  color: #3c4a3e;
}
/* 縦罫は上下いっぱいではなく、余白を残した短い線（高さ＝アイテムの60%・上下中央）。
   太陽光ページの帯（--solar）は箱型の枠線なので対象外 */
.ecl-iconbar:not(.ecl-iconbar--solar) .ecl-iconbar__item::after,
.ecl-iconbar:not(.ecl-iconbar--solar) .ecl-iconbar__item:first-child::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: rgba(95, 145, 70, .18);
}
.ecl-iconbar:not(.ecl-iconbar--solar) .ecl-iconbar__item::after { right: 0; }
.ecl-iconbar:not(.ecl-iconbar--solar) .ecl-iconbar__item:first-child::before { left: 0; }
.ecl-iconbar__item:hover { color: var(--ecl-base); }
/* デザイン元は 34px 角の線画SVG。Font Awesome に置き換えるため、
   グリフは 30px にして枠だけ 34px に揃える（後続要素のY位置がずれないように） */
.ecl-iconbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  font-size: 30px;
  line-height: 1;
  color: var(--ecl-sub);
}
.ecl-iconbar__ja {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
}
.ecl-iconbar__en {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .2em;
  color: var(--ecl-base);
}
/* 太陽光ページ：5分割・英字なし・罫線は box-shadow で重ねる */
.ecl-iconbar--solar .ecl-iconbar__inner {
  max-width: 1440px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.ecl-iconbar--solar .ecl-iconbar__item {
  padding: 32px 16px;
  border: none;
  box-shadow: 0 0 0 1px rgba(95, 145, 70, .18);
}
.ecl-iconbar--solar .ecl-iconbar__ja {
  line-height: 1.4;
  color: var(--ecl-base);
}

/* ==========================================================================
   5. ABOUT US（暗色面・英字に日本語を重ねる）
   ========================================================================== */
.ecl-about {
  position: relative;
  overflow: hidden;
  background: var(--ecl-dark);
  padding: clamp(76px, 10vw, 140px) var(--ecl-pad-x);
}
/* 写真を強めに出し、かぶせる暗幕も薄くして全体を明るく。
   本文が白文字なので、上下は中央より濃いままにして読みやすさを保つ */
.ecl-about__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .78;
}
.ecl-about__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 50, 28, .56) 0%, rgba(24, 50, 28, .42) 50%, rgba(24, 50, 28, .56) 100%);
}
.ecl-about__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.ecl-about__heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(8px, 1.4vw, 18px);
}
.ecl-about__en {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(46px, 8vw, 108px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .22);
  white-space: nowrap;
}
.ecl-about__ja {
  position: absolute;
  left: 0;
  right: 0;
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
  color: #fff;
}
.ecl-about__text {
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: .05em;
  color: #fff;
}
.ecl-about__text + .ecl-about__text { margin-top: clamp(16px, 2vw, 24px); }

/* ==========================================================================
   6. 見出し・リード文
   ========================================================================== */
.ecl-heading { margin-bottom: clamp(28px, 3.5vw, 48px); }
.ecl-heading--center { text-align: center; margin-bottom: clamp(28px, 3.5vw, 44px); }
/* CONTACT の見出しだけ下余白が広い（デザイン元 clamp(32px,4vw,56px)） */
.ecl-heading--center-lg { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }

.ecl-heading__en {
  display: block;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(43px, 3.8vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ecl-base);
}
.ecl-heading__en--sub   { color: var(--ecl-sub); }
.ecl-heading__en--pale  { color: var(--ecl-lightgreen); }
.ecl-heading__en--md    { font-size: clamp(28px, 3.4vw, 44px); }
.ecl-heading__en--cta   { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: .14em; }

.ecl-heading__ja {
  display: block;
  margin: 14px 0 0;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .14em;
  color: inherit;
}
.ecl-heading__ja--base  { color: var(--ecl-base); }
.ecl-heading__ja--white { color: #fff; }

/* SERVICE見出し：左の英日タイトルと右のリード文の間に縦罫を入れる。
   罫線の左右が同じ余白になるよう、gap と __lead の padding-left を
   同じ --ecl-rule-gap にしている（余白の増減は :root の1箇所で調整） */
.ecl-sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ecl-rule-gap);
  margin-bottom: clamp(48px, 6vw, 84px);
}
/* 縦罫は上下いっぱいではなく、中央に短めに入れる（高さ＝ブロックの72%） */
.ecl-sechead > .ecl-sechead__lead {
  position: relative;
  padding-left: var(--ecl-rule-gap);
}
.ecl-sechead > .ecl-sechead__lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 72%;
  background: var(--ecl-line);
}
/* OUR STRENGTH・FLOW の見出し行。見出しとキャッチを縦積みにして中央揃え（縦罫なし） */
.ecl-sechead--end {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2vw, 22px);
  margin-bottom: clamp(30px, 4vw, 54px);
}
.ecl-sechead--end > .ecl-sechead__catch { flex: 0 1 auto; }
.ecl-sechead--works {
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  margin-bottom: clamp(30px, 4vw, 54px);
}
.ecl-sechead__title { flex: 0 0 auto; }
/* max-width は注記が2行で収まる幅（1000px）。760pxだと3行に割れる */
.ecl-sechead__lead  { flex: 1 1 400px; min-width: 0; max-width: 1000px; }
.ecl-sechead__catch {
  flex: 1 1 320px;
  min-width: 0;
  font-size: clamp(14px, 1.7vw, 22px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--ecl-base);
}
.ecl-sechead__catch--works {
  flex: 1 1 280px;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.7;
  color: inherit;
}
.ecl-sechead__catch--flow {
  flex: 1 1 300px;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.7;
  color: inherit;
}
.ecl-sechead__catch--white { color: #fff; }

.ecl-lead {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .05em;
}
.ecl-lead--sub { font-size: clamp(17px, 1.9vw, 24px); }

.ecl-note {
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: .05em;
  color: var(--ecl-ink-weak);
}
.ecl-lead + .ecl-note      { margin-top: 18px; }
.ecl-lead--sub + .ecl-note { margin-top: clamp(18px, 2.2vw, 28px); }

.ecl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ecl-chip {
  border: 1px solid var(--ecl-line);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* ==========================================================================
   7. ボタン・テキストリンク
   ========================================================================== */
.ecl-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: none;
}
.ecl-btn--solid {
  gap: 16px;
  background: var(--ecl-base);
  color: #fff;
  padding: 20px 34px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
}
.ecl-btn--solid:hover { background: var(--ecl-accent); color: #fff; }
.ecl-btn--sm { padding: 18px 30px; }
.ecl-btn--outline {
  gap: 12px;
  border: 1px solid rgba(95, 145, 70, .55);
  color: var(--ecl-base);
  padding: 20px 30px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .08em;
}
.ecl-btn--outline:hover { border-color: var(--ecl-base); color: var(--ecl-base); background: rgba(45, 90, 50, .04); }
.ecl-btn--white {
  gap: 14px;
  background: #fff;
  color: var(--ecl-base);
  padding: 18px 30px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
}

.ecl-textlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--ecl-ink);
}
/* 施工実績一覧のブロック末尾リンクだけ行高 1.6（デザイン元の指定） */
.ecl-textlink--lh { line-height: 1.6; }
.ecl-textlink .ecl-arrow { color: var(--ecl-base); }
.ecl-textlink:hover { color: var(--ecl-sub); }
.ecl-textlink:hover .ecl-arrow { color: var(--ecl-sub); }

/* ==========================================================================
   8. TOP SERVICE（ホバー連動の写真クロスフェード）
   ========================================================================== */
.ecl-topservice {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
}
.ecl-topservice__visual {
  flex: 1 1 380px;
  min-width: 0;
  position: relative;
  min-height: clamp(320px, 38vw, 560px);
  overflow: hidden;
  background: var(--ecl-imgbg);
}
.ecl-topservice__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.ecl-topservice__img.is-active { opacity: 1; }
.ecl-topservice__list {
  flex: 1 1 400px;
  min-width: 0;
  border-top: 1px solid var(--ecl-line);
}
.ecl-topservice__link {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--ecl-line);
}
.ecl-topservice__body { flex: 1 1 auto; min-width: 0; }
/* デザイン元はインラインの span（親の strut が行高を決める）。
   display:block にすると行が 4px 詰まるため inline のまま使う */
.ecl-topservice__en {
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .24em;
  color: var(--ecl-base);
}
.ecl-topservice__ja {
  display: block;
  margin-top: 8px;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .06em;
  color: var(--ecl-base);
}
.ecl-topservice__text {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ecl-ink-sub);
}
.ecl-topservice__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--ecl-base);
  color: #fff;
  font-size: 14px;
  transition: background .25s ease;
}
.ecl-topservice__link:hover .ecl-topservice__arrow { background: var(--ecl-accent); }

/* ==========================================================================
   9. TOP WORKS バナー
   ========================================================================== */
.ecl-worksbnr {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: clamp(260px, 26vw, 360px);
  background: var(--ecl-base);
}
.ecl-worksbnr__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.ecl-worksbnr__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(45, 90, 50, .88) 0%, rgba(45, 90, 50, .72) 42%, rgba(45, 90, 50, .2) 78%, rgba(45, 90, 50, .05) 100%);
}
.ecl-worksbnr__inner {
  position: relative;
  z-index: 2;
  min-height: clamp(260px, 26vw, 360px);
  padding: clamp(34px, 4.5vw, 64px) clamp(24px, 4vw, 60px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  align-items: flex-end;
  justify-content: space-between;
}
.ecl-worksbnr__body { display: block; }
.ecl-worksbnr__text {
  display: block;
  margin-top: clamp(18px, 2.2vw, 28px);
  max-width: 50ch;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .9);
}
.ecl-worksbnr:hover .ecl-btn--white { background: var(--ecl-pale); }

/* ==========================================================================
   10. AREA
   ========================================================================== */
.ecl-area {
  border-top: 1px solid rgba(45, 90, 50, .12);
  padding-top: clamp(40px, 5vw, 70px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  align-items: flex-start;
}
.ecl-area__body { flex: 1 1 340px; min-width: 0; max-width: 560px; }
.ecl-area__ja   { margin: 14px 0 clamp(22px, 2.6vw, 32px); }
/* 余った幅は本文とマップの間に寄せて、マップをコンテナの右端まで送る */
.ecl-area__map  { flex: 0 1 480px; min-width: 0; max-width: 480px; margin-left: auto; }
.ecl-area__map img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   11. お問い合わせCTA
   ========================================================================== */
.ecl-cta {
  position: relative;
  background: #fff;
  overflow: hidden;
}
.ecl-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 左右反転して掲載する（object-position は反転前の写真に対する指定になる） */
.ecl-cta__bg--flip { transform: scaleX(-1); }
/* 左からのベールは白の透過。文字が載る左〜中央を濃く、右は写真を残す */
.ecl-cta__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .74) 38%, rgba(255, 255, 255, .38) 62%, rgba(255, 255, 255, .06) 84%, rgba(255, 255, 255, 0) 100%);
}
.ecl-cta__inner {
  position: relative;
  z-index: 2;
  max-width: var(--ecl-w);
  margin: 0 auto;
  padding: var(--ecl-pad-y) var(--ecl-pad-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.ecl-cta__inner--wide { max-width: var(--ecl-w); padding: var(--ecl-pad-y-sub) var(--ecl-pad-x); }
/* 右のキャッチがない構成では本文が伸びきってしまうので、読みやすい行長で止める。
   ベールが濃い左側に文字をまとめ、右側は写真を見せる */
.ecl-cta__main { flex: 1 1 420px; min-width: 0; max-width: 620px; }
.ecl-cta__heading {
  margin-top: clamp(18px, 2.4vw, 30px);
  font-size: clamp(18px, 2.6vw, 27px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--ecl-base);
}
.ecl-cta__text {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: .05em;
  color: var(--ecl-ink);
}
.ecl-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: clamp(28px, 3.5vw, 44px);
}
/* 電話番号ボタンは写真の上に載るので、枠線だけの透明ではなく白ベタにする */
.ecl-cta .ecl-btn--outline { background: #fff; }
.ecl-cta .ecl-btn--outline:hover { background: var(--ecl-pale); }
/* 背景の色面なし。筆文字は墨色のまま写真の上に載せる */
.ecl-cta__side {
  flex: 0 0 auto;
  padding: clamp(20px, 2.2vw, 28px) 0;
  text-align: right;
}
/* 筆文字キャッチ画像（透過PNG・墨色をそのまま使う） */
.ecl-cta__side-img {
  display: block;
  width: clamp(190px, 24vw, 320px);
  height: auto;
  margin-left: auto;
}
.ecl-cta__side-ja {
  font-family: "Klee One", serif;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.8;
  color: var(--ecl-base);
}
.ecl-cta__side-en {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .3em;
  color: var(--ecl-base);
}

/* ==========================================================================
   12. 下層ヒーロー・パンくず・葉のあしらい
   ========================================================================== */
.ecl-hero {
  background: #fff;
  min-height: clamp(340px, 36vw, 520px);
  display: flex;
  align-items: center;
  /* MVと同じく、重なるヘッダーのぶんテキストを下げる */
  padding-top: var(--ecl-header-h);
}
.ecl-hero__bg { object-position: 60% 50%; }
/* デザイン元では葉のあしらいが白ベールより手前に載る（ベールと同じ重なり階層で後勝ち）。
   共通の .page-hero__overlay は z-index:1 のため 0 に戻す。
   ベールは実測した文字の右端（PC＝40%／SP＝77%）までを濃く保ち、そこから一気に抜く */
.ecl-hero__veil {
  z-index: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .88) 34%, rgba(255, 255, 255, .55) 52%, rgba(255, 255, 255, .12) 66%, rgba(255, 255, 255, 0) 76%);
}
.ecl-hero__content {
  display: block;
  height: auto;
  width: 100%;
  max-width: var(--ecl-w);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--ecl-pad-x);
  animation: ecl-fadeup 1s both;
}
.ecl-hero__catch {
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .14em;
  color: #3c4a3e;
}
.ecl-hero__en-sm {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .3em;
  color: var(--ecl-base);
}
.ecl-hero__en {
  margin: clamp(18px, 2.4vw, 32px) 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(40px, 4.4vw, 74px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ecl-base);
}
.ecl-hero__ja {
  margin-top: clamp(12px, 1.6vw, 20px);
  font-size: clamp(18px, 1.9vw, 25px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .12em;
  color: var(--ecl-base);
}

.ecl-leaf { position: absolute; pointer-events: none; z-index: 0; }
.ecl-leaf--hero-tl  { top: -50px;  left: -60px;  width: clamp(120px, 15vw, 210px); opacity: .85; }
.ecl-leaf--hero-bl  { bottom: -40px; left: 2%;   width: clamp(90px, 11vw, 150px);  opacity: .6; transform: rotate(-12deg); }
.ecl-leaf--sec-tr   { top: -20px;  right: -30px; width: clamp(120px, 15vw, 210px); opacity: .5; }
.ecl-leaf--str-bl   { bottom: -30px; left: -50px; width: clamp(140px, 18vw, 250px); opacity: .55; }
.ecl-leaf--str-tr   { top: -30px;  right: -40px; width: clamp(150px, 19vw, 270px); opacity: .5; }
.ecl-leaf--solar-bl { bottom: -40px; left: -50px; width: clamp(140px, 18vw, 250px); opacity: .5; }
.ecl-leaf--cta      { top: 6%; right: 38%; width: clamp(60px, 7vw, 100px); opacity: .55; transform: rotate(8deg); z-index: 1; }

.ecl-breadcrumb-bar { border-bottom: 1px solid rgba(45, 90, 50, .1); }
.ecl-breadcrumb {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px var(--ecl-pad-x);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .08em;
}
.ecl-breadcrumb__list { gap: 10px; }
.ecl-breadcrumb .breadcrumb__item:not(:last-child)::after {
  content: "＞";
  margin: 0 0 0 10px;
  color: var(--ecl-ink-sub);
}
.ecl-breadcrumb .breadcrumb__link,
.ecl-breadcrumb .breadcrumb__current { color: var(--ecl-ink-sub); }
.ecl-breadcrumb .breadcrumb__link:hover { color: var(--ecl-base); text-decoration: none; }

/* ==========================================================================
   13. サービスカード（縦罫あしらい）
   ========================================================================== */
.ecl-cards3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(260px, 28%), 1fr));
  gap: clamp(16px, 3vw, 50px);
}
/* 写真＋テキストのカードは囲み枠なし（テキストの周りに枠線を回さない） */
.ecl-card {
  background: #fff;
  display: flex;
  flex-direction: column;
}
.ecl-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ecl-imgbg); }
.ecl-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecl-card__body { padding: 22px 2px; display: flex; flex-direction: column; flex: 1; }
.ecl-card__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
}
.ecl-card__rule {
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 1.2em;
  background: var(--ecl-sub);
}
.ecl-card__text {
  margin-top: 12px;
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ecl-ink-weak);
}
.ecl-card__text--ink { color: var(--ecl-ink-sub); }

/* ==========================================================================
   14. 強みカード（罫線区切り／淡緑面・暗色面）
   ========================================================================== */
.ecl-strength {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0;
  background: var(--ecl-pale);
}
.ecl-strength__item {
  background: var(--ecl-pale);
  box-shadow: 0 0 0 1px var(--ecl-line);
  padding: clamp(26px, 3vw, 42px) clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
/* デザイン元は 40px 角の線画SVG。枠を 40px に揃えてグリフだけ 34px にする */
.ecl-strength__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: 34px;
  line-height: 1;
  color: var(--ecl-sub);
}
.ecl-strength__ja {
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--ecl-base);
}
.ecl-strength__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  color: rgba(60, 74, 62, .78);
}
.ecl-strength--dark,
/* 強みカードの下に置くキャッチ（見出し行から移設） */
.ecl-strength__catch {
  margin-top: clamp(26px, 3.2vw, 44px);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .05em;
  text-align: center;
  color: var(--ecl-base);
}
.ecl-strength--dark .ecl-strength__item { background: var(--ecl-dark); }
/* 暗色面では緑の枠線が沈むので白系に反転 */
.ecl-strength--dark .ecl-strength__item { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.ecl-strength--dark .ecl-strength__item { box-shadow: 0 0 0 1px rgba(169, 207, 143, .28); }
.ecl-strength--dark .ecl-strength__icon { color: var(--ecl-lightgreen); }
.ecl-strength--dark .ecl-strength__ja   { color: #fff; }
.ecl-strength--dark .ecl-strength__text { color: rgba(255, 255, 255, .85); }

/* ==========================================================================
   15. FLOW（写真下端に円形番号バッジ）
   ========================================================================== */
.ecl-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
/* サービスカードと同じく囲み枠なし */
.ecl-flow__item {
  position: relative;
  background: #fff;
  padding-bottom: 4px;
}
.ecl-flow__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ecl-imgbg); }
.ecl-flow__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* バッジが写真の下端にちょうど半分かかる量（円の直径の半分）を保つ */
.ecl-flow__body { position: relative; z-index: 2; padding: 0 18px 20px; margin-top: -26px; }
/* 番号は和文明朝でやや大きく */
.ecl-flow__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ecl-base);
  color: #fff;
  font-family: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}
.ecl-flow__ja {
  margin-top: 14px;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--ecl-base);
}
.ecl-flow__text {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .04em;
  color: var(--ecl-ink-sub);
}

/* ==========================================================================
   16. 太陽光サービスカード（写真→アクセント色へ溶ける）
   ========================================================================== */
.ecl-solarcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
/* 面の色は基調の深緑。アクセント（#548535）でベタ塗りすると黄緑が強く出すぎるため、
   写真から溶け込む色も深緑に合わせ、アクセントはホバー等の差し色に留める */
.ecl-solarcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ecl-base);
}
.ecl-solarcard__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ecl-base);
}
.ecl-solarcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecl-solarcard__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45, 90, 50, 0) 30%, rgba(45, 90, 50, .28) 60%, rgba(45, 90, 50, .72) 85%, #2d5a32 100%);
}
.ecl-solarcard__body {
  position: relative;
  padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* 番号は明朝体で大きく取り、和文見出し（最大19px）とのジャンプ率を稼ぐ。
   数字は欧文明朝ではなく和文明朝で出す（FLOWの番号と共通） */
.ecl-solarcard__num {
  font-family: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: clamp(46px, 4.8vw, 68px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .04em;
  /* 淡緑にして白見出しとの主従をつける（暗色面の英字と同じ扱い） */
  color: var(--ecl-lightgreen);
}
.ecl-solarcard__ja {
  margin-top: 12px;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  color: #fff;
}
.ecl-solarcard__text {
  margin-top: 14px;
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .88);
}

/* ==========================================================================
   17. FOR BUSINESS
   ========================================================================== */
.ecl-business {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.ecl-business__img { flex: 1 1 360px; min-width: 0; }
.ecl-business__img > div {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--ecl-line-thin);
  overflow: hidden;
  background: var(--ecl-imgbg);
}
.ecl-business__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.ecl-business__body { flex: 1 1 380px; min-width: 0; }
.ecl-business__lead {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .05em;
}
.ecl-business__text { margin-top: clamp(16px, 2vw, 24px); }
.ecl-business__btn  { margin-top: clamp(24px, 3vw, 36px); }

/* ==========================================================================
   18. 施工実績カード
   ========================================================================== */
/* 記事はCMS出力で件数が変動する。auto-fit だと記事が1〜3件のときに
   余ったトラックが潰れてカードが巨大化するため、auto-fill で列数を固定する */
.ecl-works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 21%), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.ecl-works__item { display: block; color: var(--ecl-ink); }
.ecl-works__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ecl-imgbg);
}
.ecl-works__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ecl-works__item:hover .ecl-works__img img { transform: scale(1.05); }
/* 日付は明朝体・緑。数字は欧文明朝（Cormorant）ではなく和文明朝で出す */
.ecl-works__date {
  margin-top: 14px;
  font-family: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .1em;
  color: var(--ecl-sub);
}
.ecl-works__title {
  margin-top: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .05em;
}
/* 施工実績一覧：白カード型 */
.ecl-works--boxed .ecl-works__item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ecl-line-thin);
}
.ecl-works--boxed .ecl-works__img { border: none; }
.ecl-works--boxed .ecl-works__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.ecl-works--boxed .ecl-works__date { margin-top: 0; }
.ecl-works--boxed .ecl-works__title { margin-top: 12px; }

/* ==========================================================================
   19. 施工実績一覧（アンカー＋カテゴリ別ブロック）
   ========================================================================== */
.ecl-anchors { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ecl-anchor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  background: #fff;
  border: 1px solid var(--ecl-sub);
  color: var(--ecl-base);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
  white-space: nowrap;
}
.ecl-anchor:hover { background: var(--ecl-base); border-color: var(--ecl-base); color: #fff; }
/* 右端の矢印（ページ内の該当ブロックへ送るので下向き） */
.ecl-anchor .ecl-arrow { flex: none; font-size: 12px; color: var(--ecl-sub); }
.ecl-anchor:hover .ecl-arrow { color: #fff; }

/* 施工実績一覧：上下で余白が違う（上 clamp(48px,6vw,84px) / 下 clamp(60px,9vw,120px)） */
.ecl-section--works-list { padding-top: clamp(48px, 6vw, 84px); padding-bottom: var(--ecl-pad-y-sub); }

.ecl-worksblock { scroll-margin-top: 96px; margin-top: clamp(48px, 6vw, 84px); }
/* カテゴリ見出しは色面の帯。3カテゴリとも太陽光ページと同じアクセント色で統一する */
.ecl-worksblock__head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 26px);
  align-items: baseline;
  padding: clamp(14px, 1.8vw, 20px) clamp(18px, 2.4vw, 32px);
  background: var(--ecl-accent);
}
/* 和文を主・英字を従にする（和文が大きく先、英字は小さく後ろ） */
.ecl-worksblock__ja {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 27px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  color: #fff;
}
.ecl-worksblock__en {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(11px, 1.3vw, 17px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--ecl-lightgreen);
}
.ecl-worksblock .ecl-works { margin-top: clamp(24px, 3vw, 36px); }

/* 施工実績一覧：1カテゴリの記事を全件読み込み、あふれた分は枠内スクロール。
   max-height はカード約3段ぶん（サムネ4:3＋日付＋タイトル） */
.ecl-works--scroll {
  max-height: clamp(560px, 70vh, 920px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(45, 90, 50, .35) transparent;
}
.ecl-works--scroll::-webkit-scrollbar { width: 6px; }
.ecl-works--scroll::-webkit-scrollbar-track { background: rgba(45, 90, 50, .06); }
.ecl-works--scroll::-webkit-scrollbar-thumb { background: rgba(45, 90, 50, .35); }

/* ==========================================================================
   20. 施工実績 詳細
   ========================================================================== */
/* 記事詳細：上 clamp(40px,5vw,72px) / 下 clamp(60px,9vw,120px) */
.ecl-section--entry { padding-top: clamp(40px, 5vw, 72px); padding-bottom: var(--ecl-pad-y-sub); }

.ecl-entry {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 44px);
  align-items: flex-start;
}
.ecl-entry__main { flex: 1 1 460px; min-width: 0; }
.ecl-entry__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ecl-entry__cat {
  background: var(--ecl-base);
  color: #fff;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
}
/* 日付は和文明朝（施工実績カードの日付と同じ扱い） */
.ecl-entry__date {
  font-family: "Zen Old Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--ecl-ink-sub);
}
/* 日付のすぐ下に置き、下だけに罫線を引く（上には引かない） */
.ecl-entry__title {
  margin: 10px 0 0;
  padding-bottom: clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid var(--ecl-line);
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}
.ecl-entry__sub {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--ecl-ink-sub);
}
.ecl-entry__main-img {
  margin-top: clamp(24px, 3vw, 36px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ecl-line-thin);
  overflow: hidden;
  background: var(--ecl-imgbg);
}
.ecl-entry__main-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecl-entry__ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(16px, 2vw, 24px);
}
.ecl-entry__ba-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ecl-line-thin);
  overflow: hidden;
  background: var(--ecl-imgbg);
}
.ecl-entry__ba-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecl-entry__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(45, 90, 50, .85);
  color: #fff;
  padding: 6px 11px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
}
.ecl-entry__badge--after { background: var(--ecl-base); font-weight: 700; }
.ecl-entry__body {
  margin-top: clamp(30px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ecl-entry__body p {
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: .05em;
  color: rgba(51, 64, 58, .82);
}
/* 記事本文はCMS（管理画面）から入る。写真・表が枠をはみ出さないようにする */
.ecl-cms-body img { max-width: 100%; height: auto; }
.ecl-cms-body table { max-width: 100%; }
.ecl-cms-body iframe { max-width: 100%; }

/* 前後の記事リンク（CMS出力：.pages > .page_prev / .page_next） */
.ecl-entry__pager { margin-top: clamp(32px, 4vw, 52px); }
.ecl-entry__pager .pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding-top: clamp(18px, 2vw, 24px);
  text-align: center;
}
.ecl-entry__pager a {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--ecl-base);
}
.ecl-entry__pager a:hover { color: var(--ecl-accent); }

/* 一覧へ戻るボタン。サイドバーのCATEGORYの下に置くので、幅はサイドバーいっぱい */
.ecl-entry__back { display: flex; }
.ecl-entry__back .ecl-btn { width: 100%; justify-content: center; }
.ecl-entry__side { flex: 0 1 280px; min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }

.ecl-spec { margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid rgba(45, 90, 50, .1); }
.ecl-spec__row { display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(45, 90, 50, .1); }
.ecl-spec__k {
  flex: 0 0 160px;
  padding: 16px 18px;
  background: rgba(45, 90, 50, .03);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .08em;
}
.ecl-spec__v {
  flex: 1 1 220px;
  min-width: 0;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .04em;
  color: rgba(51, 64, 58, .8);
}

.ecl-sidebox { border: 1px solid rgba(45, 90, 50, .12); background: #fff; }
.ecl-sidebox__title {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(45, 90, 50, .1);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
}
.ecl-sidebox__body { padding: 16px 18px; }
.ecl-sidebox__link {
  display: block;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .05em;
  border-bottom: 1px solid rgba(45, 90, 50, .07);
}

/* ==========================================================================
   21. 会社概要
   ========================================================================== */
/* 見出しと本文の間に、SERVICE見出し（.ecl-sechead）と同じ縦罫を入れる。
   罫の左右アキは --ecl-rule-gap で共通、高さはブロックの72%・上下中央 */
.ecl-message { display: flex; flex-wrap: wrap; gap: var(--ecl-rule-gap); align-items: flex-start; }
.ecl-message__title { flex: 0 0 210px; }
.ecl-message__body  {
  position: relative;
  flex: 1 1 400px;
  min-width: 0;
  padding-left: var(--ecl-rule-gap);
}
.ecl-message__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 72%;
  background: var(--ecl-line);
}
.ecl-message__catch {
  font-size: clamp(19px, 2.2vw, 29px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .05em;
}
.ecl-message__text {
  margin-top: clamp(20px, 2.5vw, 32px);
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: .05em;
  color: rgba(51, 64, 58, .8);
}
.ecl-message__sign {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--ecl-ink-sub);
}

/* テーブルを上、リンクカード2枚を下に横並び（旧：左右2カラム）。
   コンテナ（--md＝1200px）いっぱいだと値の右側が空きすぎるので、この塊だけ幅を絞る */
.ecl-overview {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 44px);
}
/* 罫線は緑。上端にも1本引く */
.ecl-overview__table {
  width: 100%;
  min-width: 0;
  background: #fff;
  border-top: 1px solid var(--ecl-sub);
}
.ecl-ov__row { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ecl-sub); }
/* 項目名の列は深緑ベタ＋白文字 */
.ecl-ov__k {
  flex: 0 0 160px;
  padding: 18px 22px;
  background: var(--ecl-base);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .1em;
}
.ecl-ov__v {
  flex: 1 1 240px;
  min-width: 0;
  padding: 18px 22px;
  background: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: .04em;
  color: rgba(51, 64, 58, .82);
}
.ecl-overview__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.ecl-linkcard {
  border: 1px solid rgba(95, 145, 70, .4);
  background: #fff;
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ecl-base);
}
.ecl-linkcard:hover { border-color: var(--ecl-base); color: var(--ecl-base); }
.ecl-linkcard__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .26em;
  color: var(--ecl-base);
}
.ecl-linkcard__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(45, 90, 50, .22);
  color: var(--ecl-base);
  font-size: 20px;
  letter-spacing: 0;
}
.ecl-linkcard__title {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
}
.ecl-linkcard__note {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .06em;
  color: rgba(60, 74, 62, .85);
}

.ecl-contactcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
/* 会社概要のリンクカード（白地＋細い緑枠）と見分けがつくよう、
   こちらは淡緑の面＋左端の太い縦バーであしらう */
.ecl-contactcard {
  min-width: 0;
  background: var(--ecl-pale);
  border: none;
  border-left: 4px solid var(--ecl-sub);
  padding: clamp(22px, 2.8vw, 32px) clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ecl-base);
  transition: background .25s ease, border-color .25s ease;
}
.ecl-contactcard:hover { background: #e2eecf; border-left-color: var(--ecl-base); color: var(--ecl-base); }
.ecl-contactcard__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .26em;
  color: var(--ecl-base);
}
.ecl-contactcard__value {
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}
.ecl-contactcard__value--sm {
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  letter-spacing: .06em;
}
.ecl-contactcard__note {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .06em;
  color: rgba(60, 74, 62, .85);
}

/* フォーム */
/* 左揃え＋左に縦罫のあしらい（サービスカードのタイトルと同じ 3px の縦バー） */
.ecl-form__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 66px);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--ecl-base);
}
.ecl-form__title::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 1.2em;
  background: var(--ecl-sub);
}
.ecl-form { background: #fff; margin-top: clamp(24px, 3vw, 40px); }
/* フォームCMSの出力ラッパー */
.form-contents { padding: 0; margin: auto; }
.ecl-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.ecl-form__row   { display: flex; flex-direction: column; gap: 10px; }
.ecl-form__block { margin-top: clamp(20px, 2.4vw, 30px); }
.ecl-form__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
}
.ecl-form__req { color: #b4462f; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.ecl-form__input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid rgba(45, 90, 50, .2);
  border-radius: 0;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ecl-ink);
}
.ecl-form__input:focus { outline: none; border-color: var(--ecl-sub); }
textarea.ecl-form__input { line-height: 1.9; resize: vertical; }
.ecl-form__file {
  border: 1px dashed rgba(45, 90, 50, .28);
  background: #fff;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ecl-form__file-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(45, 90, 50, .2);
  color: var(--ecl-sub);
  font-size: 18px;
}
.ecl-form__file-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--ecl-ink-sub);
}
.ecl-form__privacy {
  margin-top: clamp(22px, 2.6vw, 32px);
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ecl-ink-sub);
}
.ecl-form__privacy a { border-bottom: 1px solid rgba(45, 90, 50, .3); }
.ecl-form__submit {
  margin-top: clamp(24px, 3vw, 36px);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--ecl-base);
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 22px 44px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  cursor: pointer;
  transition: background .25s ease;
}
.ecl-form__submit:hover { background: var(--ecl-accent); }
.ecl-form__submit .ecl-arrow { color: var(--ecl-lightgreen); }

/* --------------------------------------------------------------------------
   プライバシーポリシー（フォーム下のアコーディオン）
   <details>/<summary> で開閉するのでJSは不要
   -------------------------------------------------------------------------- */
.ecl-policy {
  margin-top: clamp(28px, 3.4vw, 44px);
  background: #fff;
  border: 1px solid var(--ecl-line);
}
.ecl-policy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(15px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--ecl-base);
  cursor: pointer;
  list-style: none;           /* Firefox の三角マーカーを消す */
}
.ecl-policy__head::-webkit-details-marker { display: none; }
.ecl-policy__head::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1px solid var(--ecl-base);
  border-bottom: 1px solid var(--ecl-base);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s ease;
}
.ecl-policy[open] .ecl-policy__head::after { transform: translateY(2px) rotate(-135deg); }
.ecl-policy__head:hover { background: rgba(45, 90, 50, .04); }
.ecl-policy__body {
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.4vw, 28px) clamp(24px, 2.8vw, 34px);
  border-top: 1px solid var(--ecl-line-thin);
}
.ecl-policy__body > p {
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ecl-ink-sub);
}
.ecl-policy__subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(22px, 2.4vw, 30px) 0 10px;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--ecl-base);
}
/* 見出し左の縦罫はサービスカード（.ecl-card__rule）と同じあしらい */
.ecl-policy__subtitle::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 1.2em;
  background: var(--ecl-sub);
}
.ecl-policy__list {
  margin-top: 10px;
  padding-left: 1.3em;
  list-style: disc;
}
.ecl-policy__list li {
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ecl-ink-sub);
}

/* ==========================================================================
   22. フッター・固定UI
   ========================================================================== */
.ecl-footer { background: var(--ecl-base); padding: clamp(36px, 4vw, 52px) var(--ecl-pad-x); }
.ecl-footer__body { padding: 0; background: transparent; }
/* 左＝ロゴ・住所／中＝電話・営業時間・SNS／右＝ナビ の3ブロック。
   2ブロックだと中央が大きく空くため、連絡先を中列に独立させて幅を埋める */
.ecl-footer__inner {
  max-width: var(--ecl-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
}
.ecl-footer__brand {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.ecl-footer__logo { flex: none; display: flex; }
/* フッターはヘッダーよりひとまわり大きく（デザイン元の 42:46 の比率を維持） */
.ecl-footer__logo img { height: 56px; width: auto; display: block; }
.ecl-footer__address {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .8);
}
/* 中列：電話・営業時間・SNSアイコン */
.ecl-footer__contact {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ecl-footer__tel {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  color: #fff;
}
.ecl-footer__tel:hover { color: var(--ecl-lightgreen); }
.ecl-footer__hours {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .7);
}
.ecl-footer__sns { display: flex; gap: 14px; margin-top: 6px; }
/* 右列：ナビは横並び。入りきらない場合は折り返して右揃えのまま積む。
   左・中列より背が低いので、行の高さに対して上下中央に置く */
.ecl-footer__nav {
  flex: 0 1 auto;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px clamp(14px, 1.6vw, 26px);
}
.ecl-footer__nav a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .88);
}
.ecl-footer__nav a:hover { color: #fff; }
.ecl-footer__bottom {
  max-width: var(--ecl-w);
  margin: clamp(26px, 3vw, 36px) auto 0;
  padding: clamp(18px, 2vw, 24px) 0 0;
  border-top: 1px solid rgba(169, 207, 143, .25);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
/* 共通の .footer-bottom__copyright は英字フォント指定だが、デザイン元は和文フォント */
.ecl-footer__copyright {
  flex: none;
  white-space: nowrap;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .85);
}

/* ページトップ：デザイン元は常時表示 */
.ecl-page-top {
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 60;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.ecl-page-top__link {
  width: 52px;
  height: 52px;
  font-size: 16px;
  box-shadow: 0 6px 20px rgba(24, 50, 28, .28);
}
.ecl-page-top__link:hover { background: var(--ecl-accent); }

/* SP固定バー：深緑ベタ。TELとLINEの間に白い区切り線を入れる */
.ecl-sp-fixed-bar {
  background: var(--ecl-base);
  border-top-color: rgba(255, 255, 255, .22);
  box-shadow: 0 -2px 10px rgba(24, 50, 28, .18);
}
.ecl-sp-fixed-bar .sp-fixed-bar__item + .sp-fixed-bar__item {
  border-left: 1px solid rgba(255, 255, 255, .3);
}
.ecl-sp-fixed-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
}
.ecl-sp-fixed-bar__link:hover { color: var(--ecl-lightgreen); }
.ecl-sp-fixed-bar__link--line { color: #fff; }

/* ==========================================================================
   23. レスポンシブ調整
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --ecl-header-h: 68px; }
  .ecl-header__inner { padding-right: 56px; }
  .ecl-header__logo { padding: 8px 0; }
  .ecl-header__logo img { height: 54px; }
}

@media (max-width: 896px) {
  /* 折り返して縦積みになったら縦罫は外し、上下の余白で区切る */
  /* 下部の固定バー（TEL・LINE）が出る幅なので、左端の固定SNSは出さない */
  .ecl-sns-fixed { display: none; }

  .ecl-sechead { gap: clamp(26px, 4vw, 40px); }
  .ecl-sechead > .ecl-sechead__lead { padding-left: 0; }
  .ecl-sechead > .ecl-sechead__lead::before { display: none; }

  .ecl-about__heading { flex-direction: column; }
  .ecl-about__ja { position: static; margin-top: 4px; }
  .ecl-cta__side { flex: 1 1 100%; text-align: left; }
  /* 縦積みになったら縦罫は外す（SERVICE見出しと同じ挙動） */
  .ecl-message__title { flex: 1 1 100%; }
  .ecl-message__body { padding-left: 0; }
  .ecl-message__body::before { display: none; }
  .ecl-overview__cards { grid-template-columns: minmax(0, 1fr); }
  .ecl-entry__side { flex: 1 1 100%; }
}

@media (max-width: 639px) {
  /* MV：キャッチを下寄せにして、上側に写真がそのまま見える余白をつくる */
  .ecl-mv { align-items: flex-end; min-height: 90vh; }
  .ecl-mv__content { padding-top: 0; padding-bottom: clamp(24px, 5vw, 40px); }
  /* SPは文字が画面幅いっぱい（91%）まで伸びるので、ベールは横ではなく縦方向に。
     上半分は写真をそのまま見せ、文字が載る下側にだけ白を残す */
  .ecl-mv__veil {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, .88) 64%, rgba(255, 255, 255, .93) 100%);
  }
  .ecl-hero__veil {
    background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .88) 62%, rgba(255, 255, 255, .72) 100%);
  }
  /* CTAもSPは文字が全幅に伸びるので、右端まで白ベールを残す */
  .ecl-cta__veil {
    background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .9) 55%, rgba(255, 255, 255, .78) 100%);
  }

  /* 事業アイコン帯：縦積みだと間延びするのでSPでも3分割のまま1行に収める。
     アイコン・文字・余白を詰めてコンパクトにする */
  /* アイコン帯はSPでは2列。行が埋まらず最後の1つだけ余る場合は、
     2列ぶんに結合して中央に据える（左端に1つだけ残らないようにする）。
     TOPの3項目・太陽光の5項目とも同じ挙動になる */
  .ecl-iconbar__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 10px;
  }
  .ecl-iconbar__item:last-child:nth-child(odd) { grid-column: span 2; }

  /* 区切り線はSPでは行内の間だけに出す。外周の縦罫と、2列結合した行の縦罫は消し、
     行と行の間は横罫でつなぐ（最後が1つだけ余っても左右のバランスが崩れない） */
  .ecl-iconbar:not(.ecl-iconbar--solar) .ecl-iconbar__item::after,
  .ecl-iconbar:not(.ecl-iconbar--solar) .ecl-iconbar__item:first-child::before { display: none; }
  .ecl-iconbar:not(.ecl-iconbar--solar) .ecl-iconbar__item:nth-child(odd):not(:last-child)::after {
    display: block;
    right: 0;
  }
  .ecl-iconbar:not(.ecl-iconbar--solar) .ecl-iconbar__item:nth-child(n+3)::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    transform: none;
    background: rgba(95, 145, 70, .18);
  }

  .ecl-iconbar__item { padding: 18px 10px; gap: 7px; }
  .ecl-iconbar__icon { height: 26px; font-size: 23px; }
  .ecl-iconbar__ja { font-size: 14px; line-height: 1.5; letter-spacing: .02em; }
  .ecl-iconbar__en { font-size: 9.5px; letter-spacing: .1em; }

  /* SPの基本テキストサイズ（共通CSSは 1.6rem＝16px）。
     px指定のコンポーネントには効かないので、必要に応じて個別に詰める */
  body { font-size: 13px; }

  /* ヒーローの小さい英字は詰めて、キャッチのすぐ下に置く */
  .ecl-hero__en-sm { margin-top: 0; font-size: 11px; }

  /* ABOUT本文は中央揃えだと行末がバラつくので、SPだけ左揃えにする（見出しは中央のまま） */
  .ecl-about__text { text-align: left; }

  /* 見出し下のキャッチは中央揃え。行の長さを均して、文節の途中で折り返さないようにする */
  .ecl-sechead__catch {
    text-align: center;
    text-wrap: balance;
    word-break: auto-phrase;
  }

  /* カード写真はSPだけ横長に（1カラムで縦に伸びすぎるのを抑える） */
  .ecl-card__img { aspect-ratio: 4.6 / 3; }
  .ecl-flow__img { aspect-ratio: 5 / 3; }

  /* 施工実績カードはSPでも2カラム（auto-fill のままだと1カラムに落ちる）。
     幅が半分になるぶん、日付・タイトルと余白を詰める */
  .ecl-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .ecl-works__date  { margin-top: 10px; font-size: 14px; }
  .ecl-works__title { margin-top: 0; font-size: 13px; line-height: 1.6; }

  /* SPは文字が全幅に伸びるので、横グラデをやめて一定の濃さのベタ1枚にする */
  .ecl-worksbnr__veil { background: rgba(45, 90, 50, .78); }
  .ecl-worksbnr__inner { align-items: flex-start; flex-direction: column; }
  .ecl-spec__k, .ecl-ov__k { flex: 1 1 100%; }
  .ecl-spec__v, .ecl-ov__v { flex: 1 1 100%; }
  /* カテゴリアンカーは3つを縦積みにして、ボタン幅を全幅で揃える */
  .ecl-anchors {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
  }
  .ecl-anchor {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 14px 10px;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .06em;
  }

  /* フォームは画面幅が狭いので内側の余白を詰める（セクション側のpaddingで確保） */
  .ecl-form { padding: 0; }

  /* SPはハンバーガーのSPナビと下部固定バーがあるので、フッターナビは出さない */
  .ecl-footer__nav { display: none; }
  /* 残るロゴ・住所・電話・SNSは中央寄せで縦に積む */
  .ecl-footer__inner { justify-content: center; text-align: center; }
  .ecl-footer__brand,
  .ecl-footer__contact { flex: 1 1 100%; align-items: center; }
  .ecl-footer__sns { justify-content: center; }
  .ecl-footer__bottom { padding-bottom: 70px; }
  .ecl-page-top { bottom: 74px; }
  .ecl-cta__btns .ecl-btn { flex: 1 1 100%; justify-content: center; }
}