@charset "utf-8";
/*
 * ======================================
 * 株式会社エネルギーソリューション サイト固有CSS
 * ======================================
 *
 * 共通CSS（css/main.css ← scss/site-main.scss）で再現できない
 * claude-design-output/ の実数値だけをここに定義する。
 * すべて .es- プレフィックス。
 *
 * --------------------------------------
 * 元データ実数値（目視推定禁止の基準値）
 * --------------------------------------
 *  ■ コンテナ
 *   標準              : width:96% / max-width:1400px / margin:0 auto
 *   md（記事詳細）     : width:100% / max-width:1100px
 *   sm（TOP補助金・お知らせ）: width:100% / max-width:1000px
 *   form（お問い合わせ）: width:96%  / max-width:900px
 *   text（代表挨拶）    : width:100% / max-width:900px
 *  ■ セクション上下padding
 *   TOP               : clamp(56px,7vw,96px)  ＋ 左右 20px
 *   下層              : clamp(48px,6vw,80px)  ＋ 左右 20px
 *   ごあいさつ下        : calc(clamp(56px,7vw,96px) + clamp(60px,7vw,120px))
 *   ページヒーロー上     : calc(clamp(48px,6vw,80px) + 112px)
 *   ページヒーロー下     : calc(clamp(48px,6vw,80px) + clamp(30px,4vw,70px))
 *   記事詳細ヒーロー     : 上 calc(clamp(36px,4vw,56px) + 112px)
 *                        下 calc(clamp(36px,4vw,56px) + clamp(30px,4vw,70px))
 *  ■ 基準gap
 *   カード grid        : 24px（3カード）/ 20px（枠内カード・事例）/ 32px（TOP設備4枚）
 *   2カラム            : clamp(40px,5vw,72px)（ごあいさつ）/ 48px（TOP BCP）/ 4%（下層サイドバー）
 *   フッター            : clamp(40px,6vw,80px)
 *   パネル内ブロック区切り : padding-top:36px / margin-top:36px / border-top:1px solid #ece7df
 *  ■ カラム比率
 *   下層サイドバー型      : 30% / 66%（justify-content:space-between・gap 4%・sticky top 104px）
 *   記事一覧・記事詳細     : auto-fit minmax(280px,1fr)＋本文 grid-column:span 2（＝2:1）
 *   ごあいさつ           : auto-fit minmax(420px,1fr)（＝1:1）
 *   会社概要dl           : minmax(120px,180px) / 1fr
 *   お知らせ行（TOP）     : minmax(96px,auto) / minmax(88px,auto) / 1fr
 *   お知らせ行（一覧）     : 120px / 1fr
 *   フロー行             : 22px / 1fr（gap 0 18px・丸16px/border 2px #eb9a18・線1px #e0dbd2）
 *  ■ ヘッダー
 *   高さ112px / margin-bottom:-112px / inner width96% padding 0 20px gap20px
 *   ロゴ画像 clamp(46px,5vw,72px) / ロゴ文字 clamp(12px,1.25vw,17px) 700 ls.02em lh1.4
 *   白ピル radius99px padding 10px 10px 10px clamp(16px,2.4vw,32px) gap clamp(12px,1.8vw,24px)
 *   ナビ gap clamp(12px,1.9vw,26px) / 文字 clamp(12px,1.15vw,15px) 700 #1f2d33
 *   電話ボタン padding 12px clamp(12px,1.6vw,20px) / CTA padding 12px clamp(14px,1.7vw,22px)
 *  ■ 色（元データ）
 *   #9dd48f 淡グリーン / #4e8f3a 濃グリーン / #57c2e7 スカイ / #eb9a18 オレンジ
 *   #f7ee56 イエロー / #1f2d33 濃文字 / #40545b #3d5057 本文 / #5d6f75 #7c8b90 補助
 *   #fbf3ee 帯背景 / #fdfcfa カード / #faf8f5 事例カード / #e7f2e2 カテゴリバッジ
 *   #f2f8fb・#1f7fa3 数値ブロック / #dbe7de・#6d8177 記事プレースホルダ / #d8cd12 POWERラベル
 *   罫線 #e4e0d8 / #ece7df / #eceae4 / #e0d9cf / #d8d3ca / #d5d0c6 / #e0dbd2 / #b8c0c3
 *  ■ 透過（厳密一致）
 *   固定背景 overview-bg.jpg      : opacity .10
 *   フッターテクスチャ             : opacity .55
 *   TOP BCP背景 bg-gradient.jpg   : opacity .07
 *   ヒーロー白幕                  : rgba(255,255,255,0.82)
 *   MV白グラデ                    : 90deg rgba(255,255,255,0.94) 0% / 0.86 42% / 0.1 78%
 *   MVスライド                    : opacity 1 ⇄ 0 / transition 1.2s ease
 *   ウォッシュ背景（4層radial）      : sky .22 / yellow .30 / green .26 / orange .13
 *  ■ font-weight
 *   700 … 見出し・ナビ・CTA・バッジ・事例名・dt・自己負担
 *   500 … 本文（Zen Kaku Gothic New は 500/700 のみ読み込み）・フッターナビ・
 *          サービスヒーローのリード・アンカーピル・記事の前後リンク
 *   600 … ページネーション現在ページ（Outfit）
 *  ■ line-height（数値一致）
 *   1.2 / 1.35 / 1.4 / 1.5 / 1.55 / 1.6 / 1.7 / 1.75 / 1.8 / 1.85 / 1.9 / 1.95
 *   2 / 2.05 / 2.1 / 2.2 / 2.3
 *  ■ 意図的なはみ出し
 *   MVお知らせ帯 … right:0 / bottom:32px / width:min(440px,86%) /
 *                  border-radius:10px 0 0 10px（画面右端に密着。clipしない）
 *   強みセクション上のアーチ … translateY(calc(-100% + 1px)) で上セクションへ張り出す
 *   企業理念の写真2枚 … aspect-ratio:1/1.08 の枠内で absolute 配置（52%/40%）
 *  ■ ボックスシャドウ
 *   元データに box-shadow は 0 件。影は一切使わない（フラット）。
 *  ■ トランジション
 *   color 0.45s ease / background-color 0.45s ease / opacity 1.2s ease のみ
 *
 * --------------------------------------
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * --------------------------------------
 *  .es-wash              - 4層radialグラデのウォッシュ背景
 *  .es-pagebg            - 全画面固定の写真背景（opacity .10）
 *  .es-inner + --md/--sm/--form/--text - 1400/1100/1000/900px コンテナ
 *  .es-sec + --sub/--pt0/--pb0/--greeting/--band/--texture - セクション上下padding
 *  .es-arch / __shape    - セクション上端のアーチ（上セクションへ張り出す）
 *  .es-ttl + --page/--sub/--mid/--lh15/--center - 見出し（clamp）
 *  .es-en + --orange/__dot - Outfit の英語小見出し（●付き）
 *  .es-head / --center   - 見出し＋EN のまとまり
 *  .es-txt + サイズ/lh/色 modifier、.es-note / --12 / --14
 *  .es-btn + --orange/--green/--dark/--sky/--white/--sm/--lg/--xl/__dot、.es-btns
 *  .es-header / __inner / .es-logo / .es-headbar / .es-nav / .es-headtel / .es-headcta
 *  .es-footer + 各部分要素、.es-spnav__tel
 *  .es-hero / __photo / __veil / __inner / __lead、.es-crumb
 *  .es-mv / __slide / __veil / __body / __en / __ttl / __lead / __news / __scroll
 *  .es-card-point / .es-card-step / .es-svc / .es-svc-main / .es-round
 *  .es-panel / .es-block / .es-h3 / __bar / .es-label / .es-h3row
 *  .es-note-card / __ttl、.es-cta-band、.es-anchors / .es-anchor
 *  .es-split / __side / __body、.es-case / 各部分要素
 *  .es-dl / __key / __val（会社概要テーブル）
 *  .es-table + --data / --amount / __head / __row / __cell / __cell--key / --amount
 *  .es-flow / __row / __rail / __dot / __line / __body / __label / __ttl（STEP）
 *  .es-stat / __num / __label（数値ブロック）、.es-marks / .es-mark、.es-chip
 *  .es-photoduo / __img（TOP写真2枚組）、.es-photoarc / __a / __b（企業理念）
 *  .es-overview / __inner（会社概要の白パネル）
 *  .es-flexcards / .es-lifeline / __icon / __ttl（BCPライフライン3枚）
 *  .es-worry（補助金のお悩み）、.es-tlist__item / __dot（対象取り組みリスト）
 *  .es-plan__kw / __dl / __key--strong / __val--strong（導入プラン）
 *  .es-tel-btn（お問い合わせの大電話ボタン）
 *  .es-newsrow / .es-newshead / .es-newslist（TOPお知らせ）
 *  .es-entryrow / .es-side / .es-sidecta / .es-pager / .es-article / .es-callout / .es-artnav
 *  .es-form / __field / __label / __req / __input / __submit、.es-privacy__ttl
 *  .es-footer__tagline（ラフ記載のタグライン。元データには無い追加分）
 *  .es-fc-* / .es-bg-*（ロゴ4色）、.es-txt-left、.es-my-20
 *  .es-g-*（元データのgrid実数値）
 *  .es-mb-* / .es-mt-*（tabletで半減しない固定余白）
 *  .es-reveal（スクロールフェードイン。JSで is-in 付与）
 *
 * --------------------------------------
 * 共通SCSSに不足していたもの（5分類）
 * --------------------------------------
 *  値の粒度不足：
 *   - clamp() ベースの流体タイポ／流体余白が utility に無い
 *     （fz-* は 10/12/13/14/16/18… の固定刻みで 15/17/19/21/23/26px が出せない）
 *   - line-height 1.5/1.55/1.85/1.95/2.05/2.1/2.2/2.3 が lh-* に無い（1〜2の7段のみ）
 *   - 余白 6/12/14/18/22/24/26/32/36/44px、gap 8/12/14/16/18/24/26/32/36px が刻みに無い
 *   - 角丸 3/6/8/12/16/99px（rounded-sm=5px / rounded=10px / rounded-lg=20px のみ）
 *   - mb-* は 40 以上が tablet で自動半減するため、元データの固定余白を再現できない
 *   - コンテナ 1400px＋96%（container-wide は 1320px 以下で 95%＋10px padding に切替）
 *  指定方向不足：
 *   - grid-template-columns の非等分指定（30%/66%、1.6fr/1fr、minmax(120px,180px)/1fr）
 *   - auto-fit minmax() 系の grid が grid-auto（250px固定）以外に無い
 *   - position:sticky の top 値指定（pos-sticky は top:0 固定。元データは top:104px）
 *  状態不足：
 *   - transition の個別プロパティ指定（元データは color / background-color の 0.45s のみ。
 *     .transition は all 0.3s 固定）
 *   - a:hover{opacity:.8} を打ち消す手段（元データは opacity を変えない）
 *  構造不足：
 *   - セクション上端のアーチ（border-radius 50% 50% 0 0 / 100% 100% 0 0 ＋ 上へ張り出し）
 *   - パネル内をボーダーで区切る「ブロック積み」構造（.es-block）
 *   - 見出し左の2色グラデーションバー（heading-bar--two-tone は border-left で色2段のみ）
 *   - 縦線でつなぐSTEPリスト（timeline は __dot 8px 固定。元データは16px枠線丸＋1px線）
 *  装飾パターン不足：
 *   - 4層 radial-gradient のウォッシュ背景
 *   - 写真＋白幕82%＋下端アーチのページヒーロー
 *   - イエローの文字ハイライト帯（marker は linear-gradient 70% の蛍光ペン型のみ）
 */

/* ==========================================================================
   1. 基礎（body / 固定背景 / ウォッシュ）
   ========================================================================== */
body {
  font-weight: 500; /* Zen Kaku Gothic New は 500/700 のみ読み込み */
}

.es-wash {
  background:
    radial-gradient(58% 52% at 10% 16%, rgba(87, 194, 231, 0.22) 0%, rgba(87, 194, 231, 0) 62%),
    radial-gradient(52% 48% at 90% 10%, rgba(247, 238, 86, 0.30) 0%, rgba(247, 238, 86, 0) 64%),
    radial-gradient(62% 58% at 80% 86%, rgba(157, 212, 143, 0.26) 0%, rgba(157, 212, 143, 0) 66%),
    radial-gradient(48% 44% at 22% 92%, rgba(235, 154, 24, 0.13) 0%, rgba(235, 154, 24, 0) 62%),
    #ffffff;
}

.es-pagebg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28614/overview-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
}

/* ==========================================================================
   2. コンテナ / セクション
   ========================================================================== */
.es-inner {
  width: 96%;
  max-width: 1400px;
  margin: 0 auto;
}
.es-inner--md   { width: 100%; max-width: 1100px; margin: 0 auto; }
.es-inner--sm   { width: 100%; max-width: 1000px; margin: 0 auto; }
.es-inner--form { width: 96%;  max-width: 900px;  margin: 0 auto; }
.es-inner--text { width: 100%; max-width: 900px;  margin: 0 auto; }

.es-sec {
  padding: clamp(56px, 7vw, 96px) 20px;
}
.es-sec--sub      { padding: clamp(48px, 6vw, 80px) 20px; }
.es-sec--pt0      { padding-top: 0; }
.es-sec--pb0      { padding-bottom: 0; }
.es-sec--greeting { padding-bottom: calc(clamp(56px, 7vw, 96px) + clamp(60px, 7vw, 120px)); }
.es-sec--white    { background: #ffffff; }
.es-sec--band     { position: relative; background: #fbf3ee; padding: 0 20px clamp(56px, 7vw, 96px); }
.es-sec--texture  { position: relative; background: #ffffff; overflow: hidden; }

.es-sec__texture {
  position: absolute;
  inset: 0;
  background-image: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28614/bg-gradient.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.07;
  pointer-events: none;
}
.es-sec__body { position: relative; }

/* セクション上端のアーチ（上のセクションへ張り出す） */
.es-arch {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(60px, 7vw, 120px);
  transform: translateY(calc(-100% + 1px));
  overflow: hidden;
  pointer-events: none;
}
.es-arch__shape {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  bottom: -1px;
  background: #fbf3ee;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ==========================================================================
   3. 見出し / テキスト
   ========================================================================== */
.es-ttl {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.6;
  color: #1f2d33;
}
.es-ttl--lh15 { line-height: 1.5; }
.es-ttl--page { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.5; }
.es-ttl--sub  { font-size: clamp(24px, 3.2vw, 34px); }
.es-ttl--mid  { font-size: clamp(22px, 3vw, 32px); }

.es-en {
  display: block;
  margin-top: 10px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #9dd48f;
}
.es-en--orange { color: #eb9a18; }
.es-en__dot {
  font-size: 0.42em;
  vertical-align: 0.3em;
  margin-right: 0.5em;
}

.es-head         { margin-bottom: clamp(28px, 3.5vw, 44px); }
.es-head--center { text-align: center; }

/* 本文 */
.es-txt {
  margin: 0;
  font-size: 16px;
  line-height: 2.05;
  color: #3d5057;
}
.es-txt--15    { font-size: 15px; }
.es-txt--17    { font-size: 17px; }
.es-txt--f18   { font-size: clamp(16px, 2vw, 18px); }
.es-txt--f21   { font-size: clamp(17px, 2.2vw, 21px); }
.es-txt--lh18  { line-height: 1.8; }
.es-txt--lh19  { line-height: 1.9; }
.es-txt--lh195 { line-height: 1.95; }
.es-txt--lh2   { line-height: 2; }
.es-txt--lh21  { line-height: 2.1; }
.es-txt--lh22  { line-height: 2.2; }
.es-txt--lh23  { line-height: 2.3; }
.es-txt--mute  { color: #5d6f75; }
.es-txt--ink   { color: #40545b; }
.es-txt--dark  { color: #1f2d33; }
.es-txt--center { text-align: center; }
.es-txt--right  { text-align: right; }
.es-txt--w40   { max-width: 40em; }
.es-txt--w38   { max-width: 38em; }
.es-txt--w34   { max-width: 34em; }

.es-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.95;
  color: #5d6f75;
}
.es-note--12 { font-size: 12px; line-height: 1.9; }
.es-note--14 { font-size: 14px; line-height: 1.7; }

/* 固定余白（main.css の mb-* は 40 以上が tablet で半減するため別建て） */
.es-mb-0  { margin-bottom: 0; }
.es-mb-6  { margin-bottom: 6px; }
.es-mb-10 { margin-bottom: 10px; }
.es-mb-12 { margin-bottom: 12px; }
.es-mb-14 { margin-bottom: 14px; }
.es-mb-18 { margin-bottom: 18px; }
.es-mb-20 { margin-bottom: 20px; }
.es-mb-22 { margin-bottom: 22px; }
.es-mb-24 { margin-bottom: 24px; }
.es-mb-26 { margin-bottom: 26px; }
.es-mb-28 { margin-bottom: 28px; }
.es-mb-32 { margin-bottom: 32px; }
.es-mb-36 { margin-bottom: 36px; }
.es-mb-40 { margin-bottom: 40px; }
.es-mb-44 { margin-bottom: 44px; }
.es-mt-6  { margin-top: 6px; }
.es-mt-10 { margin-top: 10px; }
.es-mt-12 { margin-top: 12px; }
.es-mt-14 { margin-top: 14px; }
.es-mt-16 { margin-top: 16px; }
.es-mt-18 { margin-top: 18px; }
.es-mt-20 { margin-top: 20px; }
.es-mt-34 { margin-top: 34px; }
.es-mt-36 { margin-top: 36px; }
.es-mt-44 { margin-top: 44px; }
.es-mt-48 { margin-top: 48px; }

/* ==========================================================================
   4. ボタン
   ========================================================================== */
.es-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  border: none;
  border-radius: 99px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.45s ease, color 0.45s ease;
}
.es-btn:hover { opacity: 1; }
.es-btn__dot { font-size: 7px; }

.es-btn--orange { background: #eb9a18; color: #ffffff; }
.es-btn--orange:hover { background: #cf8410; color: #ffffff; }
.es-btn--green { background: #9dd48f; color: #ffffff; }
.es-btn--green:hover { background: #1f2d33; color: #ffffff; } /* ホバーは本文の文字色（暗めグレー） */
.es-btn--dark { background: #1f2d33; color: #ffffff; }
.es-btn--dark:hover { background: #35474f; color: #ffffff; }
.es-btn--sky { background: #57c2e7; color: #ffffff; }
.es-btn--sky:hover { background: #33b0dd; color: #ffffff; }
.es-btn--white { background: #ffffff; color: #4e8f3a; }

.es-btn--sm { padding: 14px 26px; }
.es-btn--lg { padding: 18px 44px; font-size: 17px; }
.es-btn--xl { padding: 20px 40px; font-size: 16px; }

.es-btns {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}
.es-btns--left { justify-content: flex-start; }

/* ==========================================================================
   5. ヘッダー（元データ：MVに重なる透過ヘッダー・高さ112px）
   ========================================================================== */
.es-header {
  position: relative;
  z-index: 50;
  height: 112px;
  margin-bottom: -112px;
  background: transparent;
}
.es-header__inner {
  max-width: none;
  width: 96%;
  height: 112px;
  padding: 0 20px;
  gap: 20px;
  flex-wrap: nowrap;
}

.es-logo {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  min-width: 0;
  text-decoration: none;
}
.es-logo:hover { opacity: 1; }
.es-logo .es-logo__img {
  height: clamp(46px, 5vw, 72px);
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.es-logo__name {
  font-size: clamp(12px, 1.25vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #1f2d33;
  word-break: keep-all;
  white-space: nowrap;
}

.es-headbar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
  flex-wrap: nowrap;
  min-width: 0;
  padding: 10px 10px 10px clamp(16px, 2.4vw, 32px);
  border-radius: 99px;
  background: #ffffff;
}

.es-nav {
  gap: clamp(12px, 1.9vw, 26px);
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: min-content;
}
.es-nav__item { position: relative; }
.es-nav .es-nav__link {
  display: block;
  padding: 0;
  font-size: clamp(12px, 1.15vw, 15px);
  font-weight: 700;
  color: #1f2d33;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.45s ease;
}
.es-nav .es-nav__link::after { display: none; }
.es-nav .es-nav__link:hover { color: #eb9a18; opacity: 1; }
.es-nav .es-nav__link.is-current { color: #eb9a18; }
.es-nav .es-nav__link.is-current::after {
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  margin-top: 4px;
  background: #eb9a18;
}

.es-headutil {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  flex-shrink: 0;
}
.es-headtel,
.es-headcta {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 99px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  font-size: clamp(12px, 1.15vw, 15px);
  font-weight: 700;
  transition: background-color 0.45s ease;
}
.es-headtel {
  padding: 12px clamp(12px, 1.6vw, 20px);
  background: #9dd48f;
  letter-spacing: 0.02em;
}
.es-headtel::before { content: none; }
.es-headtel:hover { background: #85c473; opacity: 1; }
.es-headcta {
  padding: 12px clamp(14px, 1.7vw, 22px);
  background: #eb9a18;
}
.es-headcta:hover { background: #cf8410; opacity: 1; }

/* SPナビ下部の電話 */
.es-spnav__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Outfit", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}
.es-spnav__tel-icon { font-size: 0.7em; }
.es-spnav__hours {
  margin: 8px 0 0;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
}

/* SPナビ（ハンバーガー展開後）
   共通CSS（main.css）は「英語ラベル左／日本語右」の両端揃えだが、
   本案件は英語を出さず日本語だけを左に寄せる。 */
.sp-nav__en { display: none; }
.sp-nav__list { text-align: left; }
.sp-nav__link { justify-content: flex-start; }
/* 矢印アイコン（main.css の ::after）は flex-start だと文字の直後に来るため、右端へ戻す */
.sp-nav__link::after { margin-left: auto; }

/* ==========================================================================
   6. ページヒーロー（写真＋白幕82%＋下端アーチ）
   ========================================================================== */
.es-hero {
  position: relative;
  padding: calc(clamp(48px, 6vw, 80px) + 112px) 20px calc(clamp(48px, 6vw, 80px) + clamp(30px, 4vw, 70px));
  border-radius: 0 0 50% 50% / 0 0 clamp(30px, 4vw, 70px) clamp(30px, 4vw, 70px);
  overflow: hidden;
}
.es-hero--entry {
  padding-top: calc(clamp(36px, 4vw, 56px) + 112px);
  padding-bottom: calc(clamp(36px, 4vw, 56px) + clamp(30px, 4vw, 70px));
}
.es-hero__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.es-hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  pointer-events: none;
}
.es-hero__inner {
  position: relative;
  width: 96%;
  max-width: 1400px;
  margin: 0 auto;
}
.es-hero__inner--md { width: 100%; max-width: 1100px; }
.es-hero__lead {
  margin: 0;
  font-size: 16px;
  line-height: 2.1;
  color: #3d5057;
  max-width: 38em;
}
.es-hero__lead--w40 { max-width: 40em; }
.es-hero__lead--svc {
  margin: 0 0 32px;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  line-height: 2;
  max-width: 40em;
  color: #1f2d33;
}

/* パンくず */
.es-crumb {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
  font-size: 12px;
  color: #5d6f75;
}
.es-crumb--flush { margin-bottom: 0; }
.es-crumb__link {
  color: #5d6f75;
  text-decoration: none;
  transition: color 0.45s ease;
}
.es-crumb__link:hover { color: #eb9a18; opacity: 1; }
.es-crumb__sep,
.es-crumb__current { color: #5d6f75; }

/* ==========================================================================
   7. フッター
   ========================================================================== */
.es-footer {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 20px 32px;
  background: #ffffff;
  color: #1f2d33;
  overflow: hidden;
}
.es-footer__texture {
  position: absolute;
  inset: 0;
  background-image: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28614/footer-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  pointer-events: none;
}
.es-footer__inner {
  position: relative;
  width: 96%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(40px, 6vw, 80px);
}
.es-footer__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.es-footer__logo-img {
  height: 96px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.es-footer__name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
.es-footer__addr {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #5d6f75;
}
.es-footer__nav {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.es-footer__link {
  font-size: 15px;
  font-weight: 500;
  color: #1f2d33;
  text-decoration: none;
  transition: color 0.45s ease;
}
.es-footer__link:hover { color: #eb9a18; opacity: 1; }
.es-footer__sep {
  font-size: 13px;
  color: #b8c0c3;
}
.es-footer__copy {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #5d6f75;
}
.es-footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: clamp(0px, 4vw, 64px);
  border-left: 1px solid #e4e0d8;
}
.es-footer__tel {
  font-family: "Outfit", sans-serif;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1f2d33;
  text-decoration: none;
  transition: color 0.45s ease;
}
.es-footer__tel:hover { color: #eb9a18; opacity: 1; }
.es-footer__hours {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 2;
  color: #5d6f75;
}
.es-footer__hours--tight { margin-top: 4px; }
.es-footer__right .es-btn { margin-top: 44px; }

/* ==========================================================================
   8. スクロールフェードイン（インタラクション：低〜中）
   ========================================================================== */
.es-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.es-reveal.is-in {
  opacity: 1;
  transform: none; /* translateY(0) は包含ブロックを作り position:sticky を壊すため none */
}
@media (prefers-reduced-motion: reduce) {
  .es-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   9. レスポンシブ（共通パーツ）
   ========================================================================== */
@media (max-width: 1100px) {
  .es-headbar { display: none; }
}
@media (max-width: 896px) {
  .es-footer__right {
    padding-left: 0;
    padding-top: 40px;
    border-left: none;
    border-top: 1px solid #e4e0d8;
  }
}
@media (max-width: 639px) {
  .es-header,
  .es-header__inner { height: 88px; }
  .es-header { margin-bottom: -88px; }
  .es-hero { padding-top: calc(clamp(48px, 6vw, 80px) + 88px); }
  .es-hero--entry { padding-top: calc(clamp(36px, 4vw, 56px) + 88px); }
  .es-logo__name { font-size: 11px; }
  /* SPはハンバーガーメニューで全ページに行けるため、フッターナビは出さない */
  .es-footer__nav { display: none; }
  .es-footer__logo-img { height: 72px; }
  .es-footer__tel { font-size: 26px; }
  .es-btns { margin-top: 32px; }
}

/* ==========================================================================
   10. 色ユーティリティ（ロゴ4色。元データのラベル・番号丸で使用）
   ========================================================================== */
.es-fc-green  { color: #9dd48f; }
.es-fc-sky    { color: #57c2e7; }
.es-fc-orange { color: #eb9a18; }
.es-fc-yellow { color: #d8cd12; }
.es-fc-mute   { color: #5d6f75; }
.es-bg-green  { background: #9dd48f; }
.es-bg-sky    { background: #57c2e7; }
.es-bg-orange { background: #eb9a18; }
.es-txt-left  { text-align: left; }

/* ==========================================================================
   11. grid（元データの実数値）
   ========================================================================== */
.es-g-a160-16 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; }
.es-g-a180-20 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 20px; min-width: 0; }
.es-g-a220-20 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.es-g-a220-32 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 32px; }
.es-g-a240-26 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 26px; }
.es-g-a280-20 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.es-g-a280-24 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.es-g-a300-20 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.es-g-a300-32 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; align-items: center; }
.es-g-a320-48 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; align-items: center; }
.es-g-a340-36 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 36px; align-items: center; }
.es-g-a420-72 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(40px, 5vw, 72px); align-items: center; }
.es-g-3-24 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.es-g-3-20 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.es-g-2-20 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.es-g-2-40 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.es-g-stack { display: grid; }
.es-g-stack--26 { gap: 26px; }

/* ==========================================================================
   12. メインビュー（#slideshow は CMSスライダー差し替え枠）
   ========================================================================== */
.es-mv { position: relative; }

#slideshow {
  position: relative;
  height: clamp(520px, 70vw, 760px);
  overflow: hidden;
}
#slideshow .swiper-slide,
#slideshow .main_slider__inner {
  position: absolute;
  inset: 0;
}
#slideshow .main_slider__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- 静止画スライダー（CMS差し替え時に削除）
      CMSスライダー出力には .es-mv__slide が付かないため、差し替え後は
      下記が一切当たらず、CMS側のSwiperがそのまま動く。 */
#slideshow .es-mv__slide {
  opacity: 0;
  z-index: 0;
  transition: opacity 1.4s ease;
}
#slideshow .es-mv__slide.is-active {
  opacity: 1;
  z-index: 1;
}
/* Ken Burns（keyframes slideshow-zoom は main.css で定義済み） */
#slideshow .es-mv__slide.is-active img {
  animation: slideshow-zoom 8s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  #slideshow .es-mv__slide { transition-duration: 0.01ms; }
  #slideshow .es-mv__slide.is-active img { animation: none; }
}

.es-mv__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.86) 42%, rgba(255, 255, 255, 0.1) 78%);
  pointer-events: none;
}
.es-mv__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.es-mv__inner {
  width: 96%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  pointer-events: auto;
}
.es-mv__en {
  display: block;
  margin-bottom: 18px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #9dd48f;
}
.es-mv__ttl {
  margin: 0 0 20px;
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #1f2d33;
  word-break: keep-all;
}
.es-mv__ttl-line { display: block; }
.es-mv__lead {
  margin: 0 0 28px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 2.05;
  color: #3d5057;
  max-width: 32em;
}

.es-mv__news {
  position: absolute;
  right: 0;
  bottom: 32px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(440px, 86%);
  padding: 16px;
  background: #ffffff;
  border-radius: 10px 0 0 10px;
  text-decoration: none;
  transition: background-color 0.45s ease;
}
.es-mv__news:hover { background: #fdfcfa; opacity: 1; }
.es-mv__news-img {
  flex-shrink: 0;
  width: 132px;
  height: 92px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
/* サムネイル未登録の記事はロゴを出す（CMSテンプレートの <if_no_image>）。
   ロゴは余白付きの透過PNGなので、cover だと切れる・伸びるため contain にする。 */
.es-mv__news-img--logo {
  object-fit: contain;
  padding: 8px;
  background: #f7f6f2;
}
.es-mv__news-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.es-mv__news-ttl {
  /* CMS化後はタグ側で文字数を切れないため、2行を超えたら省略する */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: #1f2d33;
}
.es-mv__news-date {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #5d6f75;
}

/* スクロール誘導（ラフ指定：下向き矢印＋SCROLL・ゆっくり上下） */
.es-mv__scroll {
  position: absolute;
  left: 28px;
  bottom: 32px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #5d6f75;
  text-decoration: none;
  transition: color 0.45s ease;
}
.es-mv__scroll:hover { color: #eb9a18; opacity: 1; }
.es-mv__scroll-icon {
  font-size: 12px;
  animation: es-scroll-bob 2.4s ease-in-out infinite;
}
@keyframes es-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .es-mv__scroll-icon { animation: none; }
}

/* ==========================================================================
   13. ごあいさつ（写真2枚の段違い）
   ========================================================================== */
.es-photoduo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.es-photoduo__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.es-photoduo__img--offset { margin-top: 56px; }

/* ==========================================================================
   14. 強み（POINTカード）
   ========================================================================== */
.es-card-point {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: #ffffff;
  border-radius: 10px;
}
.es-card-point__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.es-card-point__head-body { min-width: 0; }
.es-card-point__label {
  display: block;
  margin-bottom: 10px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.es-card-point__ttl {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
  min-height: calc(21px * 1.55 * 2);
}
.es-card-point__num {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
}
.es-card-point__txt {
  margin: 18px 0 24px;
  font-size: 16px;
  line-height: 2;
  color: #5d6f75;
}
.es-card-point__img {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ==========================================================================
   15. 事業内容（TOP）
   ========================================================================== */
.es-svc-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 36px;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.es-svc-main__img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  min-width: 0;
}
.es-svc-main__body { min-width: 0; }
.es-svc-main__icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
}
.es-svc-main__ttl {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 700;
}

.es-svc {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
}
.es-svc__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.es-svc__body { padding: 18px 0 0; }
.es-svc__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
}
.es-svc__ttl {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}
.es-svc__txt {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #5d6f75;
}

/* ==========================================================================
   16. TOP BCP（丸カード）
   ========================================================================== */
.es-round {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
  min-height: 340px;
  background: #ffffff;
  border-radius: 999px;
}
.es-round__label {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.es-round__ttl {
  margin-top: 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
.es-round__icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin: 20px 0;
}
.es-round__txt {
  font-size: 14px;
  line-height: 1.85;
  color: #5d6f75;
}

/* ==========================================================================
   17. 補助金3ステップ（STEPカード）
   ========================================================================== */
.es-card-step {
  padding: 24px 24px 30px;
  background: #ffffff;
  border-radius: 8px;
}
.es-card-step__img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-bottom: 22px;
}
.es-card-step__label {
  display: block;
  margin-bottom: 10px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #eb9a18;
}
.es-card-step__ttl {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #1f2d33;
}
.es-card-step__txt {
  margin: 0;
  font-size: 16px;
  line-height: 1.95;
  color: #5d6f75;
}

/* ==========================================================================
   18. お知らせ（TOP）
   ========================================================================== */
.es-newshead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.es-newslist { display: grid; }
.es-newsrow {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(88px, auto) 1fr;
  gap: 8px 20px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eceae4;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.45s ease;
}
.es-newsrow:hover { background: #fdfcfa; opacity: 1; }
.es-newsrow__date {
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  color: #7c8b90;
}
.es-newsrow__cat {
  font-size: 12px;
  font-weight: 700;
  color: #1f2d33;
  background: #e7f2e2;
  border-radius: 3px;
  padding: 4px 10px;
  text-align: center;
}
.es-newsrow__ttl {
  font-size: 16px;
  line-height: 1.8;
}

/* ==========================================================================
   19. 下層共通：パネル / ブロック / 小見出し / 注記カード / 事例カード
   ========================================================================== */
.es-panel {
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(26px, 3.6vw, 48px);
}
.es-block {
  padding-top: 36px;
  margin-top: 36px;
  border-top: 1px solid #ece7df;
}
.es-h3row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.es-h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.6;
  color: #1f2d33;
}
.es-h3--sm {
  margin: 0 0 12px;
  font-size: 19px;
}
.es-h3__bar {
  flex-shrink: 0;
  display: block;
  width: 8px;
  height: 28px;
  border-radius: 99px;
  background: linear-gradient(#eb9a18 0 50%, #f7ee56 50% 100%);
}
.es-h3__bar--sm { height: 24px; }
.es-label {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #5d6f75;
}
.es-label--12 {
  font-size: 12px;
  letter-spacing: 0.18em;
}

.es-note-card {
  background: #fdfcfa;
  border-radius: 10px;
  padding: 28px 26px;
}
.es-note-card__ttl {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: #1f2d33;
}
.es-note-card__ttl--tight { margin-bottom: 12px; }

.es-case {
  background: #faf8f5;
  border-radius: 10px;
  overflow: hidden;
}
.es-case--single { max-width: 320px; }
.es-case__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.es-case__body { padding: 18px 20px; }
.es-case__spec {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5d6f75;
}
.es-case__name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

/* 緑地のリンクバナー */
.es-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 30px;
  border-radius: 12px;
  background: #9dd48f;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.45s ease;
}
.es-cta-band:hover { background: #8ac977; opacity: 1; }
.es-cta-band__txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}
.es-cta-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 14px 26px;
  border-radius: 99px;
  background: #ffffff;
  color: #4e8f3a;
  font-size: 15px;
  font-weight: 700;
}

/* ==========================================================================
   20. レスポンシブ（TOP・共通コンポーネント）
   ========================================================================== */
@media (max-width: 896px) {
  /* MV内の新着記事：PCはMV右下に重ねる absolute カードだが、
     タブレット以下はMVの下に全幅の帯として置く。
     ※ position:static にすると z-index が無効になり、.es-mv__veil（半透明の
       グラデ・inset:0）が新着記事の上に重なってしまうため relative にする。 */
  .es-mv__news {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 3;
    width: 100%;
    margin-top: 0;
    border-radius: 0;
  }
  /* ヴェールはスライド部分だけを覆えばよい（新着記事にはかけない） */
  .es-mv__veil { bottom: auto; height: clamp(520px, 70vw, 760px); }
  .es-g-3-24,
  .es-g-3-20,
  .es-g-2-40 { grid-template-columns: repeat(2, 1fr); }
  .es-round { min-height: 300px; padding: 40px 20px; }
}
@media (max-width: 639px) {
  /* MVキャッチコピー：PCは word-break:keep-all で文節を保つが、SPでは
     「非常時の電気と水の備えが、」が1行のまま画面幅を超えるため、
     折り返しを許可し文字サイズも画面幅に追従させる（横スクロールの原因だった）。 */
  .es-mv__ttl {
    font-size: clamp(22px, 6.4vw, 28px);
    word-break: normal;
  }
  .es-mv__news { gap: 14px; }
  .es-mv__news-img { width: 96px; height: 72px; }
  .es-mv__scroll { display: none; }
  .es-g-3-24,
  .es-g-3-20,
  .es-g-2-20,
  .es-g-2-40 { grid-template-columns: 1fr; }
  .es-g-2-40 { gap: 0; }
  .es-photoduo__img--offset { margin-top: 28px; }
  .es-card-point__ttl { font-size: 19px; min-height: 0; }
  .es-card-point__num { width: 46px; height: 46px; font-size: 19px; }
  .es-svc-main__ttl { font-size: 22px; }
  /* SERVICE：SPではアイコンを見出しの左に並べる（縦積みだと間延びするため）。
     説明文は2列目の下に回して、アイコン分のインデントを付けない。 */
  .es-svc__body,
  .es-svc-main__body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon ttl"
      "txt  txt";
    align-items: center;
    column-gap: 12px;
  }
  .es-svc__icon,
  .es-svc-main__icon {
    grid-area: icon;
    margin-bottom: 0;
  }
  .es-svc__ttl,
  .es-svc-main__ttl {
    grid-area: ttl;
    margin: 0;
  }
  .es-svc__txt,
  .es-svc-main__body > p {
    grid-area: txt;
    margin-top: 12px;
  }
  .es-svc__icon { width: 46px; height: 46px; }
  .es-svc-main__icon { width: 56px; height: 56px; }
  .es-round { min-height: 0; border-radius: 20px; padding: 32px 20px; }
  .es-newsrow {
    grid-template-columns: auto 1fr;
    padding: 18px 4px;
  }
  .es-newsrow__ttl { grid-column: 1 / -1; }
  /* カテゴリは 1fr 列に入るため、そのままだと行末まで伸びる。テキスト幅に収める。 */
  .es-newsrow__cat { justify-self: start; }
  .es-h3 { font-size: 20px; }
  .es-cta-band { padding: 22px 20px; }
  .es-cta-band__txt { font-size: 16px; }
}

/* ==========================================================================
   21. 追加 grid / 余白（下層ページ）
   ========================================================================== */
.es-g-a380-80 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: clamp(40px, 5vw, 80px); align-items: center; }
.es-g-a280-56 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(32px, 5vw, 56px); align-items: start; }
.es-g-stack--24 { gap: 24px; }
.es-g-stack--14 { gap: 14px; }
.es-g-stack--36 { gap: 36px; }
.es-mb-16 { margin-bottom: 16px; }
.es-my-20 { margin: 20px 0; }
.es-sec--flush { padding: 0 20px; }

/* ==========================================================================
   22. 下層サイドバー型レイアウト（30% / 66%・sticky top 104px）
   ========================================================================== */
.es-split {
  display: grid;
  grid-template-columns: 30% 66%;
  justify-content: space-between;
  gap: 4%;
  align-items: start;
}
.es-split__side {
  position: sticky;
  top: 104px;
  text-align: left;
  margin-bottom: 0;
}
.es-split__icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
  margin: 0 0 16px;
}
.es-split__icon--lg { width: 76px; height: 76px; }
.es-split__img {
  position: sticky;
  top: 104px;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.es-panel__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ==========================================================================
   23. ページ内アンカー（事業内容ヒーロー）
   ========================================================================== */
.es-anchors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.es-anchor {
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid #e0d9cf;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 500;
  color: #1f2d33;
  text-decoration: none;
  transition: color 0.45s ease, border-color 0.45s ease;
}
.es-anchor:hover {
  color: #4e8f3a;
  border-color: #9dd48f;
  opacity: 1;
}

/* ==========================================================================
   24. 会社概要（代表挨拶 / 企業理念 / 概要テーブル）
   ========================================================================== */
.es-photoarc {
  position: relative;
  min-width: 0;
  aspect-ratio: 1/1.08;
}
.es-photoarc__a,
.es-photoarc__b {
  position: absolute;
  aspect-ratio: 4/6;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}
.es-photoarc__a { left: 0;  top: 13%; width: 52%; }
.es-photoarc__b { right: 0; top: 32%; width: 40%; }

.es-overview {
  position: relative;
  width: 96%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  overflow: hidden;
}
.es-overview__inner {
  position: relative;
  width: 96%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 2.5vw, 40px);
  align-items: start;
}

.es-dl {
  margin: 0;
  flex: 0 1 900px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  border-top: 1px solid #e4e0d8;
}
.es-dl__key {
  padding: 22px 8px;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #e4e0d8;
}
.es-dl__val {
  margin: 0;
  padding: 22px 8px;
  font-size: 16px;
  line-height: 1.9;
  color: #3d5057;
  border-bottom: 1px solid #e4e0d8;
}
.es-dl__val--lh2 { line-height: 2; }

/* ==========================================================================
   25. 数値ブロック / イエローハイライト / チップ
   ========================================================================== */
.es-stat {
  background: #f2f8fb;
  border-radius: 10px;
  padding: 22px 20px;
}
.es-stat__num {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #1f7fa3;
}
.es-stat__label {
  font-size: 13px;
  color: #5d6f75;
}

.es-marks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  text-align: center;
}
.es-mark {
  display: inline-block;
  padding: 2px 8px;
  background: #f7ee56;
  border-radius: 3px;
  font-size: clamp(21px, 2.8vw, 30px);
  font-weight: 700;
  line-height: 1.7;
  color: #1f2d33;
}

.es-chip {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 12px;
  background: #f7ee56;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #1f2d33;
}

/* ==========================================================================
   26. BCP（お悩みカード / 解決カード / ライフライン / データ表）
   ========================================================================== */
.es-card-step__label--mute { color: #5d6f75; }
.es-note-card--26 { padding: 26px; }
.es-note-card__ttl--flush {
  margin: 0;
  line-height: 1.7;
}
.es-note-card__head { margin-bottom: 14px; }
.es-note-card__label {
  display: block;
  margin-bottom: 8px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #5d6f75;
}

.es-flexcards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.es-lifeline {
  flex: 0 1 300px;
  background: #fdfcfa;
  border-radius: 10px;
  padding: 36px 26px;
  text-align: center;
}
.es-lifeline__icon {
  width: 84px;
  height: 84px;
  object-fit: contain;
  display: block;
  margin: 0 auto 18px;
}
.es-lifeline__ttl {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
}
.es-label--block {
  display: block;
  margin-bottom: 14px;
}

.es-table {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ece7df;
}
.es-table__head,
.es-table__row {
  display: grid;
}
.es-table--data .es-table__head,
.es-table--data .es-table__row { grid-template-columns: 1.4fr 1fr 1fr; }
.es-table--amount .es-table__row { grid-template-columns: 1.6fr 1fr; }
.es-table__head {
  background: #fdfcfa;
  font-size: 13px;
  font-weight: 700;
  color: #5d6f75;
}
.es-table__row {
  border-top: 1px solid #ece7df;
  font-size: 16px;
}
.es-table--amount .es-table__row:first-child { border-top: none; }
.es-table__cell { padding: 18px 20px; color: #3d5057; }
.es-table__head .es-table__cell { padding: 16px 20px; color: #5d6f75; }
.es-table__cell--key { font-weight: 700; color: #1f2d33; }
.es-table--amount .es-table__cell {
  padding: 24px 26px;
  font-size: 16px;
  line-height: 1.95;
  color: #1f2d33;
}
.es-table__cell--amount {
  display: flex;
  align-items: center;
  background: #fdfcfa;
  font-weight: 700;
  line-height: 1.7;
}

/* ==========================================================================
   27. 補助金（お悩み / 対象リスト / プラン）
   ========================================================================== */
.es-worry {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

.es-tlist__item {
  display: flex;
  gap: 12px;
  padding: 20px 4px;
  border-bottom: 1px dashed #d5d0c6;
  font-size: 16px;
  line-height: 1.9;
}
.es-tlist__dot {
  flex-shrink: 0;
  margin-top: 9px;
  font-size: 8px;
  color: #4e8f3a;
}

.es-plan__kw {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: #1f2d33;
}
.es-plan__dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 16px;
  padding-top: 20px;
  border-top: 1px solid #ece7df;
  font-size: 16px;
}
.es-plan__dl dt { color: #5d6f75; }
.es-plan__dl dd {
  margin: 0;
  text-align: right;
  font-weight: 500;
}
.es-plan__dl .es-plan__key--strong { color: #1f2d33; font-weight: 700; }
.es-plan__dl .es-plan__val--strong { font-weight: 700; }

/* ==========================================================================
   28. フロー（STEP：縦線でつなぐ）
   ========================================================================== */
.es-flow { display: grid; }
.es-flow__row {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0 18px;
}
.es-flow__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.es-flow__dot {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  border: 2px solid #eb9a18;
  background: #ffffff;
}
.es-flow__line {
  display: block;
  flex: 1;
  width: 1px;
  margin-top: 6px;
  background: #e0dbd2;
}
.es-flow__body { padding-bottom: 34px; }
.es-flow__body--last { padding-bottom: 0; }
.es-flow__label {
  display: block;
  margin-bottom: 6px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #5d6f75;
}
.es-flow__ttl {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

/* ==========================================================================
   29. お問い合わせ（電話ボタン / フォーム）
   ========================================================================== */
.es-tel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 26px;
  border-radius: 99px;
  background: #9dd48f;
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color 0.45s ease;
}
.es-tel-btn:hover { background: #85c473; opacity: 1; }

.es-form {
  display: grid;
  gap: 26px;
}
.es-form__field {
  display: grid;
  gap: 10px;
}
.es-form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
}
.es-form__req {
  padding: 3px 8px;
  border-radius: 3px;
  background: #eb9a18;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}
.es-form__input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid #d8d3ca;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2d33;
  font-family: inherit;
  font-size: 16px;
  transition: border-color 0.45s ease;
}
.es-form__input:focus {
  border-color: #9dd48f;
  outline: none;
}
.es-form__input--area {
  line-height: 1.9;
  resize: vertical;
}
.es-form__submit { text-align: center; }

/* --------------------------------------------------------------------------
   CMSフォーム（cms_ajax / design_pattern=1）のデザイン上書き
   出力HTMLは変更できないため、CMS標準CSS（cdn.rs-sys.jp/css/cms/mail-form.css）を
   当サイトの .es-form__* と同じ見た目に上書きする。
   ※mail-form.css はCMSがbody内に後から挿入するため、必ずID（#cms-contact-1-1-area）
     で詳細度を上げて打ち勝つこと。セレクタからIDを外さない。
   -------------------------------------------------------------------------- */

/* -- 外枠：CMS標準の padding/背景をリセット（余白は .es-block 側で管理） */
#cms-contact-1-1-area .form-contents {
  padding: 0;
  margin: 0;
  background: transparent;
}
#cms-contact-1-1-area .form-contents form dl {
  display: grid;
  gap: 26px;
  margin-bottom: 32px;
}

/* -- 項目：dt横並び（float 280px）を解除して、ラベル上・入力下の縦積みに */
#cms-contact-1-1-area .form-contents form dl dt:not(.pattern-exclusion) {
  float: none;
  width: auto;
  padding-top: 0;
  margin: 0 0 10px;
}
#cms-contact-1-1-area .form-contents form dl dd:not(.pattern-exclusion) {
  padding: 0;
  margin: 0;
  border-bottom: none; /* CMS標準の区切り線を消す */
  line-height: inherit;
}

/* -- ラベル（.es-form__label 相当） */
#cms-contact-1-1-area .form-contents form dl dt:not(.pattern-exclusion) span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2d33;
}

/* -- 必須バッジ（.es-form__req 相当）※CMSは ::before の content で出力 */
#cms-contact-1-1-area .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: '必須';
  top: 0;
  margin-right: 0;
  padding: 3px 8px;
  border-radius: 3px;
  background: #eb9a18;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
/* -- 任意バッジ（CMS標準は content 未設定で非表示。ここで表示させる） */
#cms-contact-1-1-area .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before {
  content: '任意';
  top: 0;
  margin-right: 0;
  padding: 3px 8px;
  border-radius: 3px;
  background: #5d6f75;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* -- 入力欄（.es-form__input 相当） */
#cms-contact-1-1-area .form-contents dd:not(.pattern-exclusion) .textarea,
#cms-contact-1-1-area .form-pattern-1 dd:not(.pattern-exclusion) .textarea {
  width: 100%;
  height: auto;
  padding: 15px 16px;
  border: 1px solid #d8d3ca;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2d33;
  font-family: inherit;
  font-size: 16px;
  transition: border-color 0.45s ease;
}
#cms-contact-1-1-area .form-contents dd:not(.pattern-exclusion) input.textarea {
  height: auto;
}
#cms-contact-1-1-area .form-contents dd:not(.pattern-exclusion) textarea.textarea {
  line-height: 1.9;
  resize: vertical;
}
#cms-contact-1-1-area .form-contents dd:not(.pattern-exclusion) .textarea:focus {
  border-color: #9dd48f;
  outline: none;
}
#cms-contact-1-1-area .form-contents dd:not(.pattern-exclusion) .textarea::placeholder {
  color: #9aa7ac;
}

/* -- 送信ボタン（.es-btn .es-btn--orange .es-btn--lg 相当） */
#cms-contact-1-1-area .form-contents .submit-btn,
#cms-contact-1-1-area .form-pattern-1 .submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: auto;
  min-width: 260px;
  margin: 0 auto;
  padding: 18px 44px;
  border: none;
  border-radius: 99px;
  background: #eb9a18;
  color: #ffffff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.45s ease, color 0.45s ease;
}
#cms-contact-1-1-area .form-pattern-1 :not(.pattern-exclusion) button:hover,
#cms-contact-1-1-area .form-contents .submit-btn:hover {
  background: #cf8410;
  color: #ffffff;
  opacity: 1;
}
/* CMS標準の封筒アイコン（mask画像）を、当サイトのボタンと同じ丸ドットに置換 */
#cms-contact-1-1-area .form-contents .submit-btn::before,
#cms-contact-1-1-area .form-pattern-1 .submit-btn::before {
  content: "";
  order: 2; /* テキストの後ろへ */
  width: 7px;
  height: 7px;
  margin-right: 0;
  border-radius: 50%;
  background-color: currentColor;
  -webkit-mask-image: none;
  mask-image: none;
}

/* -- エラー／完了メッセージ（当サイトの配色に合わせる） */
#cms-contact-1-1-area .form-contents .form-err-msg {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid #e0a3a3;
  border-radius: 6px;
  background: #fdf3f3;
  color: #c0392b;
  font-size: 15px;
  line-height: 1.9;
}
#cms-contact-1-1-area .form-pattern-1 .form-thanks-msg {
  padding: 32px 24px;
  border: 1px solid #e4e0d8;
  border-radius: 8px;
  background: #fdfcfa;
}
#cms-contact-1-1-area .form-contents .form-thanks-msg p {
  color: #1f2d33;
  font-size: 16px;
  line-height: 1.9;
}
#cms-contact-1-1-area .form-pattern-1 .form-thanks-msg .back-home-btn a {
  border: none;
  border-radius: 99px;
  background: #9dd48f;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
}
#cms-contact-1-1-area .form-pattern-1 .form-thanks-msg .back-home-btn a:hover {
  background: #1f2d33;
}

/* -- SP */
@media (max-width: 767px) {
  #cms-contact-1-1-area .form-contents form dl { gap: 20px; }
  #cms-contact-1-1-area .form-contents .submit-btn,
  #cms-contact-1-1-area .form-pattern-1 .submit-btn {
    width: 100%;
    min-width: 0;
    padding: 16px 24px;
    font-size: 16px;
  }
}
.es-privacy__ttl {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
}
.es-note--lh2 { line-height: 2; }

/* ==========================================================================
   30. お知らせ一覧 / 記事詳細
   ========================================================================== */
.es-blogmain {
  min-width: 0;
  grid-column: span 2;
}
.es-entryrow {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 24px;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #eceae4;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.45s ease;
}
.es-entryrow:hover { background: #fdfcfa; opacity: 1; }
.es-entryrow__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.es-entryrow__date {
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  color: #5d6f75;
}
.es-entryrow__cat {
  padding: 3px 10px;
  border-radius: 3px;
  background: #e7f2e2;
  font-size: 12px;
  font-weight: 700;
  color: #1f2d33;
}
.es-entryrow__ttl {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}
.es-entryrow__txt {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #5d6f75;
}

/* CMSのページャーは記事が1ページに収まると <%page_link%> が空になる。
   空の .es-pager が margin-top だけ残らないよう非表示にする。 */
.es-pager:empty { display: none; }
.es-pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 44px;
}
.es-pager__cur,
.es-pager__link {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  color: #1f2d33;
  text-decoration: none;
}
.es-pager__cur {
  background: #9dd48f;
  font-weight: 600;
}
.es-pager__link {
  border: 1px solid #e4e0d8;
  transition: background-color 0.45s ease;
}
.es-pager__link:hover { background: #f7f6f2; opacity: 1; }
.es-pager__next {
  height: 42px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e0d8;
  border-radius: 6px;
  font-size: 15px;
  color: #1f2d33;
  text-decoration: none;
  transition: background-color 0.45s ease;
}

/* -- ページャー（ブログCMS出力）
      CMSは .es-pager の中に
        <div class="pages"><div class="page_prev|page_next"><a>…</a></div></div>
      を返す（ページ番号ではなく前／次の2つ）。
      静的版の .es-pager__next と同じ見た目に合わせる。 */
.es-pager .pages {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.es-pager .page_prev a,
.es-pager .page_next a {
  height: 42px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e0d8;
  border-radius: 6px;
  font-size: 15px;
  color: #1f2d33;
  text-decoration: none;
  transition: background-color 0.45s ease;
}
.es-pager .page_prev a:hover,
.es-pager .page_next a:hover { background: #f7f6f2; opacity: 1; }
.es-pager__next:hover { background: #f7f6f2; opacity: 1; }

.es-side {
  min-width: 0;
  display: grid;
  gap: 36px;
}
.es-side__ttl {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #9dd48f;
  font-size: 16px;
  font-weight: 700;
}
.es-side__link {
  padding: 12px 4px;
  border-bottom: 1px solid #eceae4;
  font-size: 15px;
  color: #1f2d33;
  text-decoration: none;
  transition: color 0.45s ease;
}
.es-side__link:hover { color: #4e8f3a; opacity: 1; }
.es-side__link.is-current {
  color: #4e8f3a;
  font-weight: 700;
}

/* -- 月別アーカイブ（ブログCMS出力）
      CMSは <ul><li><a href="entry_list.php?d=YYYY-MM"> のプレーンなリストを返すため、
      サイドバーの .es-side__link と同じ見た目になるよう当て直す。 */
.es-archive ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.es-archive li { margin: 0; }
.es-archive a {
  display: block;
  padding: 12px 4px;
  border-bottom: 1px solid #eceae4;
  font-size: 15px;
  color: #1f2d33;
  text-decoration: none;
  transition: color 0.45s ease;
}
.es-archive a:hover { color: #4e8f3a; opacity: 1; }
.es-side__recent {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.es-side__recent-date {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  color: #5d6f75;
}
.es-side__recent-ttl {
  font-size: 15px;
  line-height: 1.7;
}
.es-sidecta {
  background: #ffffff;
  border-radius: 8px;
  padding: 26px 24px;
}
.es-sidecta__ttl {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}
.es-sidecta__btn {
  display: block;
  padding: 13px 18px;
  border-radius: 6px;
  background: #eb9a18;
  color: #1f2d33;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.45s ease;
}
.es-sidecta__btn:hover { background: #cf8410; color: #ffffff; opacity: 1; }

.es-article { min-width: 0; }
.es-article__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.es-article__cat {
  padding: 4px 12px;
  border: 1px solid #9dd48f;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #9dd48f;
}
.es-article__date {
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  color: #5d6f75;
}
.es-article__ttl {
  margin: 0 0 32px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.7;
}
.es-article__thumb {
  height: clamp(200px, 26vw, 320px);
  margin-bottom: 40px;
  background: #dbe7de;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #6d8177;
}
/* -- 記事本文（ブログCMS出力）
      CMSは <div><p>…</p><br>… の素のHTMLを返す（クラスなし）。
      main.css の * { margin:0 } で段落が詰まるため、ここで本文用の体裁を当てる。 */
.es-article__body {
  font-size: 16px;
  line-height: 2.2;
  color: #3d5057;
}
.es-article__body p { margin: 0 0 24px; }
.es-article__body p:last-child { margin-bottom: 0; }
.es-article__body h2 {
  margin: 40px 0 20px;
  padding-left: 14px;
  border-left: 4px solid #9dd48f;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  color: #1f2d33;
}
.es-article__body h3 {
  margin: 32px 0 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: #1f2d33;
}
.es-article__body a {
  color: #4e8f3a;
  text-decoration: underline;
}
.es-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}
.es-article__body ul,
.es-article__body ol {
  margin: 0 0 24px;
  padding-left: 1.4em;
}
.es-article__body ul { list-style: disc; }
.es-article__body ol { list-style: decimal; }
.es-article__body li { margin-bottom: 8px; }
.es-article__body table {
  margin: 0 0 24px;
  border-collapse: collapse;
}
.es-article__body th,
.es-article__body td {
  padding: 10px 14px;
  border: 1px solid #e4e0d8;
}
.es-article__body blockquote {
  margin: 0 0 24px;
  padding: 20px 24px;
  border-left: 4px solid #e4e0d8;
  background: #fdfcfa;
}

.es-article__h2 {
  margin: 16px 0 0;
  padding-left: 14px;
  border-left: 4px solid #9dd48f;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}
.es-callout {
  border-radius: 8px;
  padding: 26px 28px;
}
.es-artnav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #eceae4;
}
.es-artnav__link {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.es-artnav__link--strong { font-weight: 700; }

/* ==========================================================================
   31. レスポンシブ（下層ページ）
   ========================================================================== */
@media (max-width: 1100px) {
  .es-split__side,
  .es-split__img { position: static; top: auto; }
}
@media (max-width: 896px) {
  .es-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .es-split__img { aspect-ratio: 16/9; }
  .es-photoarc { aspect-ratio: 1/0.8; }
  .es-overview__inner { justify-content: flex-start; }
  .es-table--amount .es-table__row { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .es-blogmain { grid-column: auto; }
  .es-g-a280-56 { grid-template-columns: 1fr; }
  .es-entryrow {
    grid-template-columns: 1fr;
    padding: 20px 4px;
  }
  .es-entryrow__meta { flex-direction: row; align-items: center; }
  .es-dl { grid-template-columns: 1fr; }
  .es-dl__key { padding-bottom: 0; border-bottom: none; }
  .es-dl__val { padding-top: 8px; }
  .es-overview { width: 100%; padding: 28px 20px; }
  .es-overview__inner { width: 100%; }
  .es-lifeline { flex: 1 1 100%; padding: 28px 20px; }
  .es-stat { padding: 18px 16px; }
  .es-plan__kw { font-size: 28px; }
  .es-flow__ttl { font-size: 18px; }
  .es-anchor { font-size: 13px; padding: 8px 14px; }
  .es-article__h2 { font-size: 18px; }
  .es-callout { padding: 22px 20px; }
  /* 参考データ表は見出し行の意味を保つため、縦積みではなく横スクロールにする */
  .es-table--data { overflow-x: auto; }
  .es-table--data .es-table__head,
  .es-table--data .es-table__row { min-width: 520px; }
  .es-table--data .es-table__cell { padding: 14px 14px; }
  .es-table--data .es-table__head .es-table__cell { padding: 12px 14px; }
  .es-table--amount .es-table__cell { padding: 18px 20px; }
}

/* ==========================================================================
   32. 微差分（元データの実数値に合わせる個別調整）
   ========================================================================== */
/* BCPサポート体制の写真は margin-bottom:20px（お悩みカードは22px） */
.es-card-step__img--mb20 { margin-bottom: 20px; }

/* フッターのタグライン（ラフ記載のフッター掲載項目。元データには無いためコピーライトと同トーンで追加） */
.es-footer__tagline {
  margin: 0 0 6px;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9dd48f;
}