/* ============================ */
/* 基本設定・変数 */
/* ============================ */
:root {
  --primary-color: #3386ff;
  --light-blue-bg: #eff6ff;
  --white-color: #ffffff;
  --text-color: #343a40;
  --gray-color: #f8f9fa;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  color: var(--text-color);
  background-color: var(--white-color);
  line-height: 1.7;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================ */
/* ヘッダー */
/* ============================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 80px;
  background-color: #fff;
  transition: background 0.3s ease;
  border-bottom: 1px solid #dee2e6;
}

.header.is-scrolled {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  border-bottom: none;
}

.header__inner {
  width: 100%;
  height: 100%;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.header__logo img {
  height: 40px;
}

.header__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ============================ */
/* 共通ボタンのスタイル */
/* ============================ */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  transition: opacity 0.3s;
  border: 1px solid transparent;
  white-space: nowrap;
}

.c-btn:hover {
  opacity: 0.8;
}

.c-btn.is-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}

.c-btn.is-secondary {
  background-color: var(--white-color);
  border-color: var(--text-color);
  color: var(--text-color);
}

/* PC表示ではアイコンを非表示 */
.c-btn__icon {
  display: none;
}

/* ============================ */
/* ヘッダーとヒーローのスマホ対応 (767px以下) */
/* ============================ */
@media screen and (max-width: 767px) {
  /* ★ヘッダーの高さを調整 */
  .header {
    height: 60px;
  }

  .header__inner {
    padding: 0 15px;
  }

  .header__logo img {
    height: 32px;
  }

  /* --- ヒーローセクション --- */
  .hero {
    /* ★スマホヘッダーの高さ(60px)分の青い余白を確保 */
    padding-top: 110px;
    /* ★PC用のmargin-topをリセットして白い余白をなくす */
    margin-top: 0;
  }

  /* PC用のテキストを非表示に */
  .c-btn__text {
    display: none;
  }

  /* アイコンを表示 */
  .c-btn__icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  /* ボタンを円形にする */
  .c-btn {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  /* ボタンの色を維持 */
  .c-btn.is-primary {
    background-color: var(--primary-color);
  }

  .c-btn.is-secondary {
    background-color: var(--white-color);
    border-color: #ccc;
    /* 枠線を少し薄く */
  }
}

/* ============================ */
/* ヒーローセクション */
/* ============================ */
.hero {
  background-color: #2c89ff;
  padding-top: 110px;
  /* PCヘッダーの高さ分の青い余白を確保 */
  text-align: center;
  position: relative;
  margin-top: 0;
  /* 白い余白の原因になる可能性があるので削除 */
}

.hero__image--pc,
.hero__image--sp,
.hero__title--sp {
  max-width: 1200px;
  margin: 0 auto;
  display: block;
}

/* PC/SP切り替えの基本設定 */
.hero__image--pc {
  display: none;
  position: relative;
  left: 20px;
  /* デフォルト（スマホ）では非表示 */
}

/* 画像の基本設定 */
.hero__image img,
.hero__title--sp img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ用の左右余白 */
.hero__title--sp,
.hero__image--sp {
  padding: 0 20px;
  box-sizing: border-box;
}

/* PC用ボタン */
.hero__btn {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-450px);
  background-color: #ffff00;
  color: #0046a0;
  font-weight: bold;
  font-size: clamp(14px, 2vw, 18px);
  padding: clamp(0.5em, 1.2vw, 0.8em) clamp(4em, 7vw, 6em);
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.hero__btn:hover {
  background-color: #ffe600;
}

/* ============================ */
/* タイトル帯（スマホ用） */
/* ============================ */
.title-banner {
  background-color: #2e8df6;
  /* 青帯の色を保持 */
  padding: clamp(20px, 4vw, 32px) 0;
  text-align: center;
  color: var(--white-color);
}

.title-banner__title {
  display: flex;
  flex-wrap: nowrap;
  /* 改行防止 */
  justify-content: center;
  align-items: flex-end;
  gap: 0.5em;
  font-size: clamp(16px, 4.5vw, 28px);
  line-height: 1.2;
  white-space: nowrap;
}

.title-banner__main-text {
  font-weight: 700;
}

.title-banner__ruby-text {
  display: inline-flex;
  flex-direction: column-reverse;
  /* 上にルビが来るように反転 */
  align-items: center;
  font-size: clamp(18px, 5vw, 32px);
  line-height: 1;
}

.title-banner__ruby-text .accent {
  color: #ffff00;
  /* Esco-α を黄色で */
  font-weight: 800;
}

.title-banner__ruby-text rt {
  font-size: 12px;
  font-weight: 400;
  color: white;
  /* ルビの色は白 */
  margin-bottom: -0.4em;
  /* 上との距離を調整 */
}

/* ============================ */
/* 特徴セクション（最終完成版） */
/* ============================ */
.features__content {
  padding: 80px 0;
  background-color: #f0f8ff;
}

.features__intro {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 50px;
  text-align: center;
}

.features__intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features__headline {
  font-size: 25px;
  font-weight: 900;
  color: var(--primary-color);
  display: inline-block;
  background: linear-gradient(transparent 70%, #fff100 70%);
  line-height: 1.8;
  margin-bottom: 30px;
}

.features__intro-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  max-width: 1000px;
  /* 全体の最大幅 */
  width: 100%;
  margin: 0 auto;
}

.features__intro-text {
  flex: 1;
  max-width: 480px;
  /* 説明文をキュッとする */
  text-align: left;
}

.features__intro-text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}

.features__intro-image {
  flex-shrink: 0;
  max-width: 300px;
  display: flex;
  justify-content: center;
}

.features__intro-image img {
  max-width: 80%;
  height: auto;
}

.text-emphasis {
  color: #007bff;
  font-weight: bold;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.c-feature-card {
  background-color: #ffffff;
  padding: 30px 24px 36px;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 6px 0 #78b5ff, 0 6px 20px rgba(0, 123, 255, 0.15);
  text-align: center;
  height: 100%;
}

.c-feature-card:hover {
  transform: none;
}

.c-feature-card__icon {
  margin-top: 10px;
  margin-bottom: 8px;
  /* ← 以前は15px、詰める */
  max-height: 100px;
  /* ← 少し大きくする（比率維持） */
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.c-feature-card__icon img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
}

.c-feature-card h4 {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 -8px;
  color: #007bff;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-feature-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  min-height: 4.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.feature-button {
  display: inline-block;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  background-color: #007bff;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(0, 123, 255, 0.25);
  margin-top: 40px;
  transition: background-color 0.3s, transform 0.2s ease;
}

.feature-button:hover {
  background-color: #005dc2;
  transform: scale(1.05);
}

.c-btn-area {
  text-align: center;
}

/* ============================ */
/* 助成金案内セクション（最終修正版） */
/* ============================ */
.grant-section {
  background-color: #2684ff;
  color: #fff;
  padding: 80px 20px;
  text-align: center;
}

.grant-container {
  max-width: 1000px;
  margin: 0 auto;
}

.grant-heading {
  margin-bottom: 40px;
}

.grant-title {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.3;
}

.grant-label {
  font-size: 22px;
  margin-right: 0.8em;
}

.grant-title .emphasis {
  color: #fff200;
  font-size: 1.5em;
}

.grant-body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.grant-icon {
  flex-shrink: 0;
}

.grant-icon img {
  width: 220px;
  height: auto;
}

.grant-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
}

.grant-desc {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.grant-info dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grant-info .grant-row {
  display: flex;
  font-size: 16px;
  line-height: 1.7;
}

.grant-info .grant-row dt {
  min-width: 80px;
  font-weight: bold;
  flex-shrink: 0;
}

.grant-info .grant-row dd {
  margin: 0;
}

.grant-cta {
  margin-top: 10px;
}

.grant-btn {
  display: inline-block;
  padding: 14px 40px;
  background-color: #fff;
  color: #007bff;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.grant-btn:hover {
  background-color: #e8f0ff;
  transform: translateY(-2px);
}



/* ============================ */
/* CTAバナーセクション */
/* ============================ */
.c-banner-message {
  background-color: var(--primary-color);
  padding: 60px 20px;
  text-align: center;
  color: #fff;
}

.c-banner-message__inner {
  max-width: 800px;
  margin: 0 auto;
}

.c-banner-message__text {
  font-size: 30px;
  font-weight: 900;
  color: #ffff00;
  /* 黄色 */
  margin: 0 0 20px;
}

.c-banner-message__sub {
  font-size: 18px;
  color: #ffffff;
  margin: 0 0 30px;
}

.download-button {
  display: inline-block;
  padding: 16px 48px;
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
  /* 青文字 */
  background-color: #ffffff;
  /* 白背景 */
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.download-button:hover {
  background-color: #f2f8ff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- スマホ対応 --- */
@media (max-width: 767px) {
  .c-banner-message__text {
    font-size: 24px;
  }

  .c-banner-message__sub {
    font-size: 16px;
  }

  .download-button {
    padding: 14px 32px;
    font-size: 16px;
  }
}

/* ============================ */
/* 導入事例セクション (最終修正版) */
/* ============================ */
.c-case {
  padding: 80px 20px;
  background-color: #f0f8ff;
  text-align: center;
}

.c-case-title {
  font-size: 28px;
  font-weight: 900;
  padding: 0 10px;
  color: #007bff;
  display: inline-block;
  background: linear-gradient(transparent 70%, #fff100 70%);
  line-height: 1.8;
  margin-bottom: 40px;
}

.c-case__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.c-case__card-horizontal {
  background: #fff;
  border: 3px solid #3386ff;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  gap: 30px;
  text-align: left;
}

.c-case__visual {
  flex: 0 0 30%;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.c-case__label {
  font-size: 22px;
  font-weight: 700;
  color: #0066cc;
  margin: 0 0 15px;
}

.c-case__image {
  max-width: 100%;
  height: auto;
  margin-top: auto;
}

.c-case__details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c-case__data-columns {
  display: flex;
  gap: 30px;
  flex-grow: 1;
}

.c-case__data-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c-case__data-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.c-case__data-title::before {
  content: '';
  display: block;
  width: 8px;
  height: 1.2em;
  background-color: #3386ff;
}

.c-case__data-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.c-case__data-label {
  font-size: 13px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid #3386ff;
  background-color: #fff;
  color: #3386ff;
  width: 140px;
  text-align: center;
  box-sizing: border-box;
}

.c-case__data-label.is-after,
.c-case__data-label.is-darkblue {
  background-color: #3386ff;
  color: #ffff00;
  border-color: #3386ff;
}

.c-case__data-label.is-blue {
  background-color: #fff;
  border: 1px solid #3386ff;
  color: #3386ff;
}

.c-case__data-value {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.c-case__data-value.is-red {
  color: #ff3333;
  font-size: 1.6em;
}

.c-case__data-unit {
  font-size: 0.8em;
  font-weight: normal;
}

.c-case__arrow-wrapper {
  text-align: center;
  margin: 8px 0;
}

.c-case__arrow {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #ff3333;
}

.c-case__data-summary,
.c-case__data-total {
  font-weight: bold;
  display: inline;
  background: linear-gradient(transparent 65%, #fff100 65%);
  padding: 0 4px;
  font-size: 16px;
  /* ★サイズを統一 */
}

.c-case__data-summary {
  margin-top: auto;
  /* ★下に配置 */
  display: block;
  text-align: center;
}

.is-emphasis {
  color: #ff3333;
  font-size: 1.4em;
}

.is-emphasis.is-red-text {
  color: #ff3333;
}

.is-emphasis-small {
  font-size: 1.4em;
}

.c-case__data-pre-total {
  font-size: 14px;
  margin-top: auto;
  /* ★矢印と合計を下に配置 */
  margin-bottom: 4px;
  text-align: center;
}

.c-case__arrow-inline {
  color: #ff3333;
  font-weight: bold;
  margin-left: 8px;
}

.c-case__data-total {
  text-align: center;
  display: block;
}

.is-emphasis-large {
  font-size: 1.8em;
  font-weight: 900;
}

.c-case__footer {
  background-color: #3386ff;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  padding: 8px 12px;
  border-radius: 10px;
  text-align: center;
  margin-top: 20px;
}

.is-yellow-text {
  color: #ffff00;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 991px) {
  .c-case__card-horizontal {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .c-case__data-columns {
    flex-direction: column;
  }
}

/* ============================ */
/* ご提案フローセクション */
/* ============================ */
.p-flow {
  padding: 60px 20px;
  background-color: #f0f8ff;
  text-align: center;
}

.p-flow__title {
  font-size: 28px;
  font-weight: 900;
  display: inline-block;
  background: linear-gradient(transparent 70%, #fff100 70%);
  color: #007bff;
  padding: 0 12px;
  margin-bottom: 40px;
}

.p-flow__wrapper {
  background: #fff;
  border-radius: 16px;
  padding: 40px 20px;
  margin: 0 auto 20px;
  max-width: 1200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.p-flow__box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0px;
  max-width: 1200px;
  margin: 0 auto 24px;
}

.p-flow__item {
  position: relative;
  min-width: 200px;
  width: 240px;
  padding: 20px 10px;
  color: #fff;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}

.p-flow__item::after {
  content: "?";
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #007bff;
}

.p-flow__text {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.6;
}

.p-flow__time {
  margin-top: 8px;
  font-size: 14px;
  color: #cce3f8;
}

.is-blue {
  background-color: #00a5e5;
}

.is-blue-dark {
  background-color: #0062b3;
}

.is-navy {
  background-color: #112a7d;
}

.is-navy-dark {
  background-color: #0a1a4f;
}

.p-flow__note {
  font-size: 14px;
  color: #333;
  margin-top: 8px;
  margin-bottom: 0px;
}

.p-flow__support {
  font-size: 28px;
  font-weight: bold;
}

.p-flow__support .em {
  color: #007bff;
  font-size: 36px;
}

/* ============================ */
/* お問い合わせセクション */
/* ============================ */
.contact {
  background-color: #fff;
  padding: 60px 20px 40px;
  text-align: center;
}

.c-section-title {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
  display: inline-block;
  background: linear-gradient(transparent 70%, #fff100 70%);
  padding: 0 12px;
  margin-bottom: 40px;
}

.contact__form-area {
  background-color: #fff;
  padding: 40px;
  text-align: center;
  border-radius: 8px;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

.contact__form-area [data-mrc-webform] {
  text-align: left;
}

/* ============================ */
/* フッター */
/* ============================ */
.footer {
  background-color: #007bff;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}

.footer__logo {
  margin-bottom: 20px;
}

.footer__logo img {
  height: 40px;
  width: auto;
}

.footer__address {
  font-size: 13px;
  line-height: 1.8;
}

/* ============================ */
/* スクロールアニメーション */
/* ============================ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================= */
/* ↓↓↓ レスポンシブ対応はここに集約 ↓↓↓ */
/* ================================================================= */

/* ============================ */
/* PC / タブレット (768px以上) */
/* ============================ */
@media (min-width: 768px) {

  /* --- ヒーローセクション --- */
  .hero__title--sp {
    display: none;
  }

  .hero__image--pc {
    display: block;
  }

  .hero__image--sp {
    display: none;
  }

  .hero__btn {
    transform: translateX(-400px);
  }

  /* --- タイトル帯 --- */
  .title-banner {
    display: none;
  }
}

/* ============================ */
/* PC (1000px以上) */
/* ============================ */
@media (min-width: 1000px) {
  .hero__btn {
    transform: translateX(-520px);
  }
}

/* ============================ */
/* PC (1200px以上) */
/* ============================ */
@media (min-width: 1200px) {
  .hero__btn {
    transform: translateX(-600px);
  }
}


/* ============================ */
/* タブレット (991px以下) */
/* ============================ */
@media (max-width: 991px) {


}


/* ============================ */
/* スマートフォン (767px以下) */
/* ============================ */
@media (max-width: 767px) {

  /* --- 全体・共通 --- */
  body {
    line-height: 1.6;
  }

  .container {
    padding: 0 15px;
  }

  /* --- ヘッダー --- */
  .header__inner {
    padding: 10px 15px;
  }

  .header__logo img {
    height: 32px;
  }

  .c-btn {
    padding: 6px 16px;
    font-size: 13px;
  }

  /* --- ヒーローセクション --- */
  .hero {
    padding-top: 90px;
    /* ★スマホヘッダーの高さ分の青い余白を確保 */
    margin-top: 0;
    /* ★不要な白い余白を削除 */
  }

  .hero__btn {
    display: none;
  }


  /* --- 特徴セクション --- */
  .features__content {
    padding: 60px 0;
  }

  .features__intro {
    padding: 20px;
    margin-bottom: 40px;
  }

  .features__headline {
    font-size: 20px;
    /* ★文字サイズを調整 */
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
    background: none;
    /* ★黄色いラインを削除 */
    padding: 0 10px;
    /* 左右の窮屈さを解消 */
  }

  .features__intro-body {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .features__intro-text {
    max-width: 100%;
  }

  .features__intro-text p {
    font-size: 15px;
  }

  .features__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .c-feature-card h4 {
    font-size: 18px;
  }

  .c-feature-card p {
    font-size: 15px;
  }

  .feature-button {
    padding: 14px 24px;
    font-size: 16px;
  }

	
	
/* ============================ */
/* ▼▼▼ スマホ専用：助成金セクションレイアウト修正（最終反映版） ▼▼▼ */
/* ============================ */
@media screen and (max-width: 767px) {
  .grant-section {
    padding: 60px 20px;
  }

  .grant-container {
    display: block;
  }

  /* タイトルを冒頭に三行で中央揃え（"最大5000万円"を一行に） */
  .grant-heading {
    margin-bottom: 24px;
    text-align: center;
  }

  .grant-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.6;
    white-space: normal;
    font-weight: bold;
  }

  .grant-title .grant-label {
    font-size: 28px;
    margin-bottom: 8px;
  }

  .grant-title .emphasis {
    font-size: 48px;
    color: #fff200;
    font-weight: 900;
    line-height: 1.2;
  }

  .grant-title > span:not(.grant-label):not(.emphasis) {
    font-size: 32px;
    margin-top: 4px;
  }

  /* 説明文を画面幅いっぱいに一行で */
  .grant-desc {
    font-size: 14px;
    font-weight: normal;
    margin: 16px 0;
    text-align: center;
    display: block;
  }

  /* grant-iconは非表示に */
  .grant-icon {
    display: none;
  }

  /* 助成率と上限額を横並びに */
  .grant-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .grant-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .grant-info dl {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 0;
    text-align: left;
  }

  .grant-row {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.6;
    min-width: 140px;
  }

  .grant-row dt {
    font-weight: bold;
    margin-bottom: 4px;
  }

  .grant-row dd {
    margin: 0;
  }

  .grant-cta {
    margin-top: 24px;
    text-align: center;
  }

  .grant-btn {
    display: inline-block;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 50px;
    text-decoration: none;
    background: #fff;
    color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

@media screen and (max-width: 767px) {
  .grant-amount-line {
    white-space: nowrap;
  }
}


	
	
	

  

  /* --- 導入事例セクション --- */
  .c-case {
    padding: 60px 20px;
  }

  .c-case-title {
    font-size: 22px;
    margin-bottom: 40px;
  }

  .c-case__container {
    flex-direction: column;
    gap: 20px;
  }

  .c-case__card {
    width: 100%;
  }

  /* --- ご提案フローセクション --- */
  .p-flow {
    padding: 60px 20px;
  }

  .p-flow__title {
    font-size: 22px;
  }

  .p-flow__box {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .p-flow__item {
    margin-bottom: -10px;
  }

  .p-flow__item:last-child {
    margin-bottom: 0;
  }

  .p-flow__item:first-child {
    width: 90%;
    padding: 30px 10px;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  }

  .p-flow__item:not(:first-child) {
    width: 90%;
    padding: 30px 10px;
    clip-path: polygon(0 15%, 50% 0, 100% 15%, 100% 85%, 50% 100%, 0 85%);
  }

  .p-flow__item::after {
    display: none !important;
  }

  .p-flow__support {
    font-size: 20px;
  }

  .p-flow__support .em {
    font-size: 1.2em;
  }

  /* --- お問い合わせセクション --- */
  .contact {
    padding: 60px 20px;
  }

  .c-section-title {
    font-size: 22px;
  }

  .contact__form-area {
    padding: 20px;
  }
}


/* ============================================ */
/* ▼▼▼【追記】グラフカード PCレイアウト修正 ▼▼▼ */
/* ============================================ */
@media screen and (min-width: 768px) {

  /* グラフカード全体をGridレイアウトに変更 */
  .c-card--graph {
    display: grid;
    /* 左に画像エリア(40%)、右にテキストエリア(残り)の2列を作成 */
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 20px;
  }

  /* タイトル（.c-card__header）を右側のエリアに配置 */
  .c-card--graph .c-card__header {
    grid-column: 2 / 3;
    text-align: left;
    /* テキストを左揃えに変更 */
    margin-bottom: -8px;
    /* ★ここの余白を15pxから8pxに修正 */
  }

  /* .c-card__bodyのボックスを解除し、中の要素を直接Gridで扱えるようにする */
  .c-card--graph .c-card__body {
    display: contents;
  }

  /* 画像（.c-card__visual-area）を左側のエリアに配置 */
  .c-card--graph .c-card__visual-area {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* 縦に2つのエリアを結合して高さを確保 */
  }

  /* 説明文（.c-card__text-area）を右側のエリア（タイトルの下）に配置 */
  .c-card--graph .c-card__text-area {
    grid-column: 2 / 3;
  }
}

/* ============================================ */
/* ▼▼▼【追記】導入事例セクションのレイアウト調整 ▼▼▼ */
/* ============================================ */

/* 1. フッター（投資回収の部分）を非表示にする */
.c-case__footer {
  display: none;
}

/* 2. カード内の縦方向の揃えを上揃えにし、不要な余白をなくす */
.c-case__card-horizontal {
  align-items: flex-start;
}

/* 3. 画像エリアを少し小さくする */
.c-case__visual {
  flex-basis: 25%;
  /* 横幅の割合を30%から25%に縮小 */
}

/* 4. 説明文エリアの文字を少し大きくしてバランスを調整 */
/* (補足：画像の縦横比は元のCSSで維持されています) */
.c-case__data-value {
  font-size: 20px;
  /* 18pxから少し大きく */
}

.c-case__data-summary,
.c-case__data-total {
  font-size: 18px;
  /* 16pxから少し大きく */
}

/* 5. 左右カラムの行の高さを揃える */
.c-case__data-row {
  min-height: 48px;
  /* 各行に最小の高さを設定して高さを揃える */
}

/* 6. 「使用量削減金額」の数値全体を赤字にする */
.c-case__data-label.is-darkblue+.c-case__data-value {
  color: #ff3333;
}




/* ============================================ */
/* ▼▼▼【追記】導入実績セクションのレイアウト調整（最終決定版） ▼▼▼ */
/* ============================================ */

/* --- 全画面共通の調整 --- */
/* 1. フッターを非表示にする */
.c-case__footer {
  display: none;
}

/* 2. 「使用量削減金額」の数値を赤字にする */
.c-case__data-label.is-darkblue+.c-case__data-value {
  color: #ff3333;
}


/* --- PC表示 (800px以上) の設定 --- */
@media screen and (min-width: 800px) {

  /* カードを横長レイアウトに */
  .c-case__card-horizontal {
    flex-direction: row;
    align-items: stretch;
  }

  /* 画像エリアの幅を確保 */
  .c-case__visual {
    flex: 0 0 28%;
    padding-right: 20px;
  }

  .c-case__details {
    flex: 1 1 72%;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* データ列を横並びに */
  .c-case__data-columns {
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-grow: 1;
  }

  .c-case__data-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* 文字がはみ出さないように自動調整 */
  .c-case__data-value {
    font-size: clamp(14px, 2.2vw, 20px);
    white-space: nowrap;
  }

  .c-case__data-label {
    font-size: clamp(11px, 1.5vw, 13px);
    padding: 4px 8px;
    white-space: nowrap;
  }

  .c-case__data-title {
    font-size: clamp(13px, 1.8vw, 16px);
    white-space: nowrap;
    margin-bottom: 6px;
  }

  .c-case__arrow-wrapper {
    margin: 4px 0;
  }

  .c-case__data-summary,
  .c-case__data-total {
    display: block;
    text-align: center;
    margin-top: auto;
    font-size: clamp(14px, 1.8vw, 18px);
  }
}


/* --- タブレット表示 (500px ? 799px) の設定 --- */
@media screen and (min-width: 500px) and (max-width: 799px) {

  /* カードを縦積みレイアウトに */
  .c-case__card-horizontal {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  /* 画像エリア */
  .c-case__visual {
    width: 60%;
    max-width: 300px;
    margin-bottom: 15px;
  }

  /* データエリア */
  .c-case__details {
    width: 100%;
  }

  /* データ列の横並びを強制 */
  .c-case__data-columns {
    display: flex;
    flex-direction: row;
    gap: 15px;
  }

  .c-case__data-column {
    flex: 1;
    min-width: 0;
  }

  /* タブレットでも文字がはみ出さないように自動調整 */
  .c-case__data-value {
    font-size: clamp(12px, 3vw, 18px);
    white-space: nowrap;
  }

  .c-case__data-label {
    font-size: clamp(10px, 2.2vw, 12px);
    padding: 3px 6px;
    white-space: nowrap;
  }

  .c-case__data-title {
    font-size: clamp(12px, 2.5vw, 15px);
    white-space: nowrap;
    margin-bottom: 6px;
  }

  .c-case__data-summary,
  .c-case__data-total {
    display: block;
    text-align: center;
    font-size: clamp(12px, 2.5vw, 16px);
  }
}

/* --- スマホ表示 (499px以下) の設定 --- */
@media screen and (max-width: 499px) {

  /* カード全体の中身を中央に配置 */
  .c-case__card-horizontal {
    align-items: center;
    padding: 20px;
  }

  /* 画像エリア */
  .c-case__visual {
    width: 80%;
    max-width: 280px;
    margin-bottom: 15px;
  }

  /* データエリア */
  .c-case__details {
    width: 100%;
  }

  /* データ列のブロックを縦に並べ、ブロック自体を中央に配置 */
  .c-case__data-columns {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ★データブロックを中央へ */
    gap: 15px;
  }

  .c-case__data-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* ★データブロックの中身は左揃えに */
    width: 100%;
    max-width: 280px;
    /* ブロックが広がりすぎないように */
    gap: 4px;
  }

  /* データ行は「ラベル」と「数値」の横並びに戻す */
  .c-case__data-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
  }

  /* 中央揃えにしたい要素だけ個別に指定 */
  .c-case__arrow-wrapper,
  .c-case__data-summary,
  .c-case__data-total,
  .c-case__data-pre-total {
    width: 100%;
    text-align: center;
  }

  .c-case__data-summary,
  .c-case__data-total {
    display: block;
  }

  /* 文字サイズ */
  .c-case__data-title {
    margin-bottom: 6px;
  }
}


/* ============================================ */
/* ▼▼▼【追記】ご提案フローのレイアウト調整 ▼▼▼ */
/* ============================================ */

/* --- PC・タブレット表示 (768px以上) の設定 --- */
@media screen and (min-width: 768px) {

  /* 横並びを維持 */
  .p-flow__box {
    display: flex;
    flex-wrap: nowrap;
    /* 折り返さない */
  }

  /* 各アイテムが柔軟に伸縮するように */
  .p-flow__item {
    flex: 1;
    /* スペースを均等に分け合う */
    min-width: 0;
    /* 縮小を許可する */
    width: auto;
    /* 固定幅を解除 */
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
    /* 横向き矢印の形状を維持 */
  }

  /* 文字サイズを画面幅に応じて自動調整し、改行を防ぐ */
  .p-flow__text {
    font-size: clamp(11px, 1.6vw, 16px);
  }

  .p-flow__time {
    font-size: clamp(9px, 1.4vw, 14px);
  }

  /* 横向きの矢印を表示 */
  .p-flow__item::after {
    display: block;
  }
}


/* --- スマホ表示 (767px以下) の設定 --- */
@media screen and (max-width: 767px) {

  /* 縦積みのレイアウトに変更 */
  .p-flow__box {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    /* ★アイテム間に隙間を空ける */
  }

  .p-flow__item {
    width: 90%;
    max-width: 380px;
    padding: 20px 15px;
    /* margin-bottom の指定を削除 */
  }

  /* 【最重要】矢印の形状を修正 */
  /* 1番目のアイテム：上は平ら、下はV字 */
  .p-flow__item:first-child {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  }

  /* 2番目以降のアイテム：上はV字、下もV字 */
  .p-flow__item:not(:first-child) {
    clip-path: polygon(50% 15%, 100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
  }

  /* 元の矢印は非表示に */
  .p-flow__item::after,
  .p-flow__item::before {
    display: none;
  }
}

/* ============================ */
/* 取り付けイメージ (修正版) */
/* ============================ */
.c-install-image {
  padding: 80px 20px;
  background-color: #ffffff;
}

.c-install-image__container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.c-install-title {
  font-size: 28px;
  font-weight: 900;
  padding: 0 10px;
  color: #007bff;
  display: inline-block;
  background: linear-gradient(transparent 70%, #fff100 70%);
  line-height: 1.8;
  margin-bottom: 40px;
}

.c-install-image__inner {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.c-install-image__visual {
  flex: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-install-image__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-install-image__descriptions {
  flex: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}

.c-card {
  background: #fff;
  border: 2px solid #007bff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  text-align: left;
}

.c-card__desc {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

/* --- カード? (Esco-α) --- */
.c-card--esco {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
}

.c-card--esco .c-card__visual-area {
  flex: 0 0 110px;
}

.c-card--esco .c-card__visual-area img {
  width: 100%;
  height: auto;
}

.c-card--esco .c-card__text-area {
  flex: 1;
}

.c-card__title-main {
  font-size: 32px;
  font-weight: bold;
  color: #007bff;
  line-height: 1.1;
  margin: 0 0 0.5em 0;
}

.c-card__title-main .subtitle {
  display: block;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 4px;
}

.c-card__title-main rt {
  font-size: 13px;
  font-weight: normal;
}

/* --- カード? (見える化) --- */
.c-card--graph {
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  gap: 20px;
}

.c-card--graph .c-card__header {
  grid-column: 2 / 3;
  text-align: left;
  margin-bottom: -8px;
}

.c-card--graph .c-card__body {
  display: contents;
}

.c-card--graph .c-card__visual-area {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.c-card--graph .c-card__visual-area img {
  width: 100%;
  display: block;
}

.c-card--graph .c-card__text-area {
  grid-column: 2 / 3;
}

.c-card__title-sub {
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
  margin: 0;
  line-height: 1.5;
}

.highlight {
  background-color: #fff100;
  padding: 0.1em 0.3em;
  border-radius: 4px;
}

@media screen and (max-width: 767px) {
  /* ======================================================== */
  /* ▼▼▼ 取り付けイメージ スマホ用【縦積みレイアウト版】▼▼▼ */
  /* ======================================================== */

  /* --- 基本設定（セクション全体とカードの縦積み） --- */
  .c-install-image { padding: 60px 20px; }
  .c-install-title { font-size: 22px; }
  .c-install-image__inner { flex-direction: column; gap: 20px; }
  .c-install-image__descriptions {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .c-install-image__descriptions > .c-card {
    padding: 24px;
    text-align: left;
  }

  /* --- 【NEW】タイトルに直接バーを追加するスタイル --- */
  .c-card__title-main,
  .c-card__title-sub {
    position: relative;
    padding-left: 20px; /* バーのためのスペース */
    margin-bottom: 16px; /* タイトルと説明文の間の隙間 */
  }
  .c-card__title-main::before,
  .c-card__title-sub::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: #007bff;
    border-radius: 3px;
  }

  /* --- 各要素のフォントやマージンを調整 --- */
  .c-card__title-main {
    font-size: 20px;
    line-height: 1.4;
    margin: 0;
    margin-bottom: 16px;
  }
  .c-card__title-main .subtitle {
    font-size: 13px;
  }
  .c-card__title-sub {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 16px;
    white-space: normal; /* 折り返しを許可 */
  }
  .c-card__desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }

  /* --- レイアウト用の不要なスタイルをリセット --- */
  .c-card--esco .c-card__text-area { display: block; }
  .c-card--graph { display: block; }
  .c-card__header { margin: 0; }
  .c-card--graph .c-card__header { margin: 0; }

  /* --- アイコン非表示 --- */
  .c-card--esco .c-card__visual-area,
  .c-card--graph .c-card__visual-area {
    display: none !important;
  }
}

 .c-card__title-main ruby {
    /* 基準点にするため relative を指定 */
    position: relative;
    /* ruby要素自体の高さをなくす */
    vertical-align: bottom;
  }

  .c-card__title-main ruby {
    position: static;
  }
  
  /* rtタグを通常のテキストのように扱う */
  .c-card__title-main rt {
    all: unset; /* ブラウザのデフォルトスタイルを一旦すべて解除 */
    display: inline; /* 通常のテキストとして横に並べる */
    font-size: 16px; /* メインの文字サイズに合わせる */
    font-weight: bold;
    margin-left: 0.5em; /* Esco-αとの間に少し隙間を空ける */
  }
}

/* スマホだけ改行用 */
.sp-only-br {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-only-br {
    display: block;
    height: 0;
    content: "";
  }
}