@charset "UTF-8";

/* ============================================
   CSS カスタムプロパティ（変数）
   ============================================ */
:root {
  /* カラー */
  --color-primary: #FFB900;
  --color-primary-dark: #E5A600;
  --color-secondary: #2CB2E1;
  --color-blue-dark: #137FA5;
  --color-teal: #007460;
  --color-teal-mid: #0B6965;
  --color-teal-light: #4AB5C7;
  --color-teal-pale: #A3D8E0;
  --color-teal-very-pale: #D3EBF0;
  --color-green: #18AD6B;
  --color-text: #62686C;
  --color-white: #ffffff;
  --color-bg-light: #F6F8FF;
  --color-bg-pale: #E0F7FF;
  --color-border: #EFF1F9;

  /* フォントサイズ */
  --fs-xxl: 56px;
  --fs-xl: 40px;
  --fs-lg: 32px;
  --fs-md: 24px;
  --fs-base: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  /* 行間 */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* スペース */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 56px;
  --space-xxl: 80px;

  /* コンテナ幅 */
  --container-max: 1280px;
  --container-padding: 80px;

  /* ボーダー半径 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 40px;
  --radius-xl: 72px;
  --radius-full: 9999px;
}


.PC {
  display: block !important;
}

.SP {
  display: none !important;
}

.SP_f {
  display: none !important;
}

@media (max-width: 767px) {
  .PC {
    display: none !important;
  }

  .SP {
    display: block !important;
  }

  .SP_f {
    display: flex !important;
  }
}


/* ============================================
   ベーススタイル
   ============================================ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fs-base);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: var(--lh-normal);
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  /* Chrome/Safari用 */
  -moz-osx-font-smoothing: grayscale;
  /* Firefox用 */
}


img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

/* ============================================
   共通コンポーネント
   ============================================ */

/* コンテナ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 16px 48px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
  text-align: center;
  line-height: 1.4;
}

.btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 11px 11px 20px 0px rgba(222, 161, 0, 0.5);
}

.btn--secondary {
  background-color: var(--color-blue-dark);
  color: var(--color-white);
}

.btn--sm {
  padding: 8px 24px;
  font-size: var(--fs-sm);
}

.btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ============================================
   ヘッダー
   ============================================ */
.header {
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: 5px solid var(--color-border);
  box-shadow: 0px 4px 44px 0px rgba(186, 197, 205, 0.24);
  max-width: 1830px;
  width: 96%;
  border-radius: 50px;
  border: 5px solid #EFF1F9;
  background: #FFF;
  box-shadow: 0 4px 44px 0 rgba(186, 197, 205, 0.24);
  margin: 33px auto 0;
}

.header__inner {
  margin: 0 auto;
  padding: 24px 50px;
}

.header__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  height: auto;
}

.header__logo--elfmio {
  width: auto;
  max-height: 30px;
}

.header__logo--isuzu {
  width: auto;
  max-height: 30px;
}

/* ============================================
   メインビジュアル（ヒーロー）
   ============================================ */
.hero {
  background: var(--color-white);
  padding: 24px 0 0;
  max-width: 1550px;
  margin: 0 auto;
  width: 96%;
}

.hero__card {
  display: flex;
  overflow: hidden;
  background: var(--color-white);
  margin: 0 auto;
  align-items: center;
}

/* 左：テキストエリア */
.hero__left {
  flex: 0 0 690px;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 40px;
  padding: 0px 80px 0px 80px;
}

.hero__text-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero__text-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero__catchcopy {
  font-size: 24px;
  font-weight: 700;
  color: #9FA0A0;
  line-height: 1.5;
}

.hero__sub-catchcopy {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.hero__title-pkg {
  width: 100%;
}

.hero__title-elfmio {
  width: 100%;
  max-width: 580px;
}

/* 右：ビジュアルエリア */
.hero__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 860px;
}

/* 車両セクション ラッパー（バッジ浮かせるため） */
.hero__car-wrap {
  position: relative;
  padding-top: 28px;
}

/* 車両セクション（水色背景） */
.hero__car-section {
  background-color: #E0F7FF;
  border-radius: 24px;
  padding: 24px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  min-height: 280px;
}

/* バッジ共通 */
.hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 48px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 900;
  font-size: 32px;
  border-radius: 40px;
  border: 4px solid var(--color-white);
  white-space: nowrap;
  max-width: 272px;
  width: 100%;
  line-height: 1;
}

/* 「車両」バッジ：車両セクション上部中央に浮く */
.hero__badge--vehicle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

/* ボトム ラッパー（バッジ浮かせるため） */
.hero__items-wrap {
  position: relative;
  padding-top: 28px;
}

/* 「公共充電カード」バッジ：左ボックス上部に浮く */
.hero__badge--pubcard {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* 「充電器」バッジ：右ボックス上部に浮く */
.hero__badge--charger {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.hero__car-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  margin-top: 10px;
}

.hero__main-car {
  flex: 1;
  max-width: 65%;
  max-height: 305px;
  object-fit: contain;
  object-position: bottom;
}

.hero__thumbs {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 175px;
  align-self: center;
}

.hero__thumb {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero__thumb-badge {
  display: inline-block;
  background: #B5B5B5;
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  border: 2px solid var(--color-white);
  align-self: flex-start;
  max-width: 170px;
  width: 100%;
  text-align: center;
}

.hero__thumb img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* ボトム */
.hero__bottom {
  background: var(--color-white);
  display: flex;
  padding: 24px 0;
  gap: 24px;
}

/* ボトムの各アイテム（水色背景ボックス） */
.hero__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #E0F7FF;
  border-radius: 24px;
  padding: 50px 16px 24px;
  min-height: 160px;
  position: relative;
}

.hero__item-img {
  width: 283px;
  object-fit: contain;
}

.anchor-nav__bottom-bg {
  margin-top: 40px;
}

/* ============================================
   内部リンクナビゲーション
   ============================================ */
.anchor-nav {
  background-size: cover;
  background-position: bottom;
  background-color: #ffffff;
  padding: 48px 0 0px;

}

.anchor-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.anchor-nav__row {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.anchor-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 8px 48px;
  background: var(--color-white);
  border: 6px solid #EFF1F9;
  border-radius: 40px;
  box-shadow:
    11px 11px 20px 0px rgba(224, 230, 243, 1),
    11px -11px 22px 0px rgba(230, 230, 230, 0.2),
    -11px 11px 22px 0px rgba(230, 230, 230, 0.2),
    inset -1px -1px 2px 0px rgba(230, 230, 230, 0.5),
    inset 1px 1px 2px 0px rgba(255, 255, 255, 0.3);
  font-size: 18px;
  font-weight: 700;
  color: #8990A3;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s;
  width: 30%;
  padding: 8px 0;
  min-width: 380px;
  justify-content: center;
}

.anchor-nav__btn span {
  color: #8990A3;
}

.anchor-nav__btn:hover {
  background: #238EB4;
}

.anchor-nav__btn:hover span {
  color: #ffffff;
}

.anchor-nav__btn:hover .anchor-nav__arrow {
  content: url('../images/anchor_icon_hover.png');
}

.anchor-nav__arrow {
  width: 20px;
  height: 12px;
  flex-shrink: 0;
}

.anchor-nav__btn--wide {
  min-width: 304px;
  justify-content: center;
}

/* ============================================
   EV導入サポートエリア
   ============================================ */
.support {
  padding: 120px 0 80px;
  background-color: var(--color-bg-light);
}

.support__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
}

.support__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  padding: 0 var(--container-padding);
}

.support__heading {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
}

.support__heading-yellow {
  font-size: 64px;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 0.72;
}

.support__heading-mid {
  font-size: 48px;
  font-weight: 900;
  color: var(--color-blue-dark);
  line-height: 0.96;
}

.support__heading-light {
  font-size: 64px;
  font-weight: 900;
  color: var(--color-secondary);
  line-height: 0.72;
}

.support__desc {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-blue-dark);
  line-height: 1.58;
  text-align: center;
}

.support__cards {
  display: flex;
  gap: 64px;
  align-self: stretch;
  width: 96%;
  margin: 0 auto;
}

.support__card {
  flex: 1;
  background-color: var(--color-white);
  border: 9px solid var(--color-border);
  border-radius: 72px;
  padding: 48px 32px;
  position: relative;
}

.support__card-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.support__card-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-blue-dark);
  line-height: 1.2;
  text-align: center;
}

.support__card-title sup {
  vertical-align: top;
  position: relative;
  top: -0.1em;
  font-weight: 700;
  color: var(--color-blue-dark);
}

.support__card-img {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

.support__card-desc {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.6;
}

.support__card-note {
  color: var(--color-text);
  margin-top: -25px;
}

.support__card-icon {
  position: absolute;
  top: -28px;
  left: -36px;
  width: 136px;
  height: auto;
}

.support__btn-wrap {
  display: flex;
  justify-content: center;
}

.support__contact-link {
  font-size: 32px;
  font-weight: 900;
  color: var(--color-secondary);
  text-decoration: none;
  line-height: 1.44;
  text-align: center;
}

/* ============================================
   車両と充電器エリア
   ============================================ */
.car-set {
  position: relative;
  overflow: hidden;
}

.car-set__top-bg {
  width: 100%;
  line-height: 0;
}

.car-set__top-bg img {
  width: 100%;
  display: block;
}

.car-set__bottom-bg {
  width: 100%;
  line-height: 0;
  margin-top: -80px;
}

.car-set__bottom-bg img {
  width: 100%;
  display: block;
}

.car-set__bg-wrap {
  background-image: url('../images/car_set_bg.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 80px 0 80px;
  min-height: 100%;
}

.car-set__intro {
  padding: 60px 0;
  margin: 0 auto;
  width: 96%;
}

.car-set__intro-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  /*padding: 0 var(--container-padding);*/
  text-align: left;
}

.car-set__intro-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.48;
  letter-spacing: 0.09em;
  margin-bottom: var(--space-sm);
}

.car-set__intro-title--hl {
  color: var(--color-secondary);
  font-size: 56px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.56px;
}

.car-set__intro-title--hl_2 {
  color: var(--color-primary);
  font-size: 56px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.56px;
}

.car-set__intro-desc {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.6;
}

/* 選べる2つの架装タイプ */
.car-type {
  margin-bottom: var(--space-xxl);
}

.car-type__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px;
  background-color: var(--color-white);
  border: 8px solid var(--color-border);
  border-radius: 72px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 96%;
}

.car-type__header {
  margin-bottom: 0;
}

.car-type__title-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.car-type__title-img {
  height: auto;
  width: auto;
  max-width: 500px;
  width: 49%;
  margin-left: -30px;
}

.car-type__elfmio-title {
  height: auto;
  width: auto;
  max-width: 500px;
  width: 49%;
}

.car-type__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.car-type__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.car-type__item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.car-type__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.car-type__item-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.2;
}

.car-type__item-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 80px;
  justify-content: center;
}

.car-type__img-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.car-type__img {
  width: 420px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.car-type__model {
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.4;
  text-align: right;
  width: 100%;
}

.car-type__model-note {
  color: var(--color-text);
  text-align: right;
  width: 100%;
}

.car-type__spec-table {
  width: 331px;
  border-collapse: collapse;
  font-size: 14px;
  flex-shrink: 0;
}

.car-type__spec-table th,
.car-type__spec-table td {
  padding: 8px 12px;
  border: 1px solid #9C9E9F;
  line-height: 1.4;
  vertical-align: middle;
}

.car-type__spec-table th {
  background-color: #DCEBF6;
  font-weight: 500;
  color: var(--color-text);
  width: 120px;
  white-space: nowrap;
}

.car-type__spec-table td {
  background-color: var(--color-white);
  color: var(--color-text);
}

.car-type__note {
  font-size: var(--fs-xs);
  color: var(--color-text);
  line-height: 1.6;
  display: flex;
  gap: 4px;
  max-width: 780px;
  margin: 0 auto;
}

.car-type__note-label {
  flex-shrink: 0;
  font-size: var(--fs-xs);
}

/* 利便性 */
.convenience {
  margin-bottom: var(--space-xxl);
}

.convenience__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px;
  background-color: var(--color-white);
  border: 8px solid var(--color-border);
  border-radius: 72px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 96%;
}

.convenience__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.convenience__title-img {
  height: auto;
  width: auto;
  flex-shrink: 0;
  max-width: 500px;
  width: 49%;
  margin-left: -30px;
}

.convenience__header-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.convenience__subtitle {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.convenience__desc {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.6;
}

.convenience__list {
  display: flex;
  gap: 45px;
  justify-content: space-between;
  align-items: stretch;
}

.convenience__item {
  flex: 1;
  background-color: #EFF5F9;
  border-radius: 16px;
  height: 343px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.convenience__item-label {
  display: flex;
  align-items: center;
  gap: 0 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 25px 0px 10px 0px;
  justify-content: center;
}

.convenience__item-label img {
  width: 23px;
  height: 24px;
  flex-shrink: 0;
}

.convenience__item-label span {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.3;
}

.convenience__item-label small {
  font-size: 16px;
  color: var(--color-secondary);
  display: block;
  width: 100%;
  padding-left: 31px;
  text-align: center;
}

.convenience__img {
  flex: 1;
  object-fit: contain;
  object-position: center;
  /*width: 100%;
  padding: 8px 24px 16px;*/
  width: 187px;
  margin: 0 auto;
}

.convenience__img3 {
  width: 80%;
}

/* 安全装置 */
.safety {
  margin-bottom: var(--space-xxl);
}

.safety__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px;
  background-color: var(--color-white);
  border: 8px solid var(--color-border);
  border-radius: 72px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 96%;
}

.safety__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.safety__title-img {
  height: auto;
  width: auto;
  max-width: 500px;
  width: 49%;
  margin-left: -30px;
}

.safety__header-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.safety__subtitle {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.33;
}

.safety__desc {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.6;
}

.safety__content-box {
  background-color: #EFF5F9;
  border-radius: 16px;
  padding: 36px 44px;
}

.safety__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.safety__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.safety__item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.safety__item-label--center {
  justify-content: center;
  max-width: 471px;

}

.safety__item-label img {
  width: 23px;
  height: 24px;
  flex-shrink: 0;
}

.safety__item-label span {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.3;
}

.safety__img {
  width: 98%;
  object-fit: contain;
  max-width: 781px;
  margin: 0 auto;
}

.safety__item-body {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
}

.safety__item-body .safety__img {
  width: auto;
  max-width: 45%;
  flex-shrink: 0;
}

.safety__text-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
}

.safety__notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.safety__note {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.6;
}

.safety__margin {
  margin-top: 16px;
}

/* 充電器セット */
.charger-set {
  margin-bottom: var(--space-lg);
  margin-bottom: 120px;
}

.charger-set__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px;
  background-color: var(--color-white);
  border: 8px solid var(--color-border);
  border-radius: 72px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 96%;
}

.charger-set__cols {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: stretch;
}

.charger-set__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.charger-set__item:first-child {
  flex: 1;
}

.charger-set__item:last-child {
  width: 520px;
  flex-shrink: 0;
}

.charger-set__title {
  font-size: 48px;
  font-weight: 900;
  color: var(--color-secondary);
  line-height: 1.2;
}

.charger-set__item-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1;
}

.charger-set__item-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.charger-set__item-label img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.charger-set__item-label span {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-secondary);
}

.charger-set__img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.charger-set__img {
  width: 100%;
  max-width: 350px;
  object-fit: contain;
}

.charger-set__spec-table {
  width: 100%;
  max-width: 330px;
  border-collapse: collapse;
  font-size: 16px;
  margin: 0 auto;
}

.charger-set__spec-table th,
.charger-set__spec-table td {
  padding: 10px 16px;
  border: 1px solid #9B9B9B;
  line-height: 1.4;
}

.charger-set__spec-table th {
  background-color: #EFF5F9;
  font-weight: 700;
  color: var(--color-text);
  width: 100px;
  white-space: nowrap;
}

.charger-set__spec-table td {
  background-color: var(--color-white);
  color: var(--color-text);
}

.charger-set__card-img {
  width: 318px;
  max-width: 100%;
  margin: 0 auto;
}

.charger-set__card-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.charger-set__note {
  font-size: 14px;
  color: var(--color-secondary);
  line-height: 1.6;
}

/* 充電カードプラン */
.card-plan {
  display: flex;
  gap: 40px;
  align-items: stretch;
}

.card-plan__section {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-plan__label {
  background-color: var(--color-teal);
  color: var(--color-white);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 10px 28px 8px;
  border-radius: 999px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  max-width: 181px;
  width: 100%;
  min-height: 60px;
}

.card-plan__sub-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
}

.card-plan__body {
  margin-top: -20px;
  padding: 60px 20px 50px;
  background-color: var(--color-bg-light);
  border-radius: 16px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  flex: 1;
}

.card-plan__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.card-plan__type {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

.card-plan__price-wrap {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.card-plan__price-txt1 {
  justify-content: center;
}

.card-plan__price-big {
  font-size: 48px;
  font-weight: 900;
  color: var(--color-teal);
  line-height: 1;
}

.card-plan__price-small {
  font-size: 32px;
  font-style: normal;
  font-weight: 900;
  line-height: 32px;
  color: var(--color-teal);
  font-weight: 700;
  line-height: 1;
}

.card-plan__unit {
  font-size: 14px;
  color: var(--color-teal);
  font-weight: 700;
  line-height: 1.6;
}

.card-plan__note {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  margin-left: 1em;
  text-indent: -1em;
}

.card-plan__feature-body {
  margin-top: -20px;
  padding: 60px 20px 50px;
  background-color: var(--color-bg-light);
  border-radius: 16px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  flex: 1;
}

.card-plan__feature-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-teal-mid);
  margin-bottom: 8px;
}

.card-plan__feature-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  list-style: disc;
  padding-left: 20px;
}

.card-plan__feature-list li {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-normal);
}

/* 充電スポット */
.charging-spot {
  padding: 100px 0;
  max-width: 1280px;
  margin: 0 auto;
}

.charging-spot__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.charging-spot__text {
  font-size: 24px;
  color: var(--color-blue-dark);
  font-weight: 700;
  line-height: var(--lh-loose);
}

.charging-spot__sub {
  color: var(--color-secondary);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: "Noto Sans JP";
  font-size: 32px;
  font-style: normal;
  font-weight: 900;
  line-height: 46px;
  margin-top: 70px;
}

.charging-spot__btn {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 4px 4px 16px rgba(186, 197, 205, 0.4);
  width: 100%;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.charging-spot__btn:hover {
  box-shadow: 4px 8px 24px rgba(44, 178, 225, 0.3);
  opacity: 0.8;
}

.charging-spot__btn img {
  width: 100%;
}

.car-set__enquiry {
  display: flex;
  justify-content: center;
  padding: var(--space-xl) 0;
}

/* ============================================
   フルメンテナンスリース（Features）
   ============================================ */
.features {
  position: relative;
  overflow: hidden;
}

.features__top-bg {
  width: 100%;
  line-height: 0;
}

.features__top-bg img {
  width: 100%;
  display: block;
}

.features__main {
  background-color: var(--color-primary);
  position: relative;
  padding: 0 0 80px;
}

.features__main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/features_bubble_bg_pc.png');
  background-size: cover;
  background-position: top center;
  pointer-events: none;
  mix-blend-mode: overlay;
  height: 73%;
}

.features__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}

.features__heading-area {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.features__heading {
  font-size: var(--fs-xxl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  text-shadow: 0px 0px 12px rgba(223, 135, 2, 1);
  text-align: left;
}

.features__heading-mid {
  font-family: "Noto Sans JP";
  color: var(--color-white);
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.features__desc {
  font-size: 20px;
  color: var(--color-white);
  line-height: var(--lh-loose);
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  width: 100%;
}

/* セクション（特長・安心） */
.features__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 48px;
  position: relative;
}

.features__section-title-wrap {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
}

.features__section-tag {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-xl);
  font-weight: 900;
  padding: 16px 96px;
  border-radius: var(--radius-lg);
  white-space: nowrap;
  border: 5px solid var(--color-white);
}

.features__section-tag--anshin {
  background-color: var(--color-primary);
}

.features__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-xl);
  overflow: hidden;
}

.features__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  padding: 40px 0;
  border-bottom: 5px solid rgba(255, 185, 0, 0.15);
  min-width: 0;
}

.features__item:first-child {
  padding-top: 0;
}

.features__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.features__item-num-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 160px;
}

.features__item-num-wrap img {
  width: 75%;
}

.features__item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  z-index: 1;
  position: relative;
}

.features__item-badge--anshin {
  background-color: var(--color-primary);
}

.features__item-num {
  font-size: 140px;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1.2;
  opacity: 0.5;
  margin-top: -20px;
  position: relative;
  z-index: 0;
}

.features__item-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.6;
  text-align: left;
  width: 36%;
  flex-shrink: 0;
}

.features__item-text-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 400px;
  width: 36%;
  flex-shrink: 0;
}

.features__item-text-wrap p {
  width: 100%;
}

.features__item-note {
  font-size: var(--fs-xs);
  color: var(--color-text);
  line-height: 1.6;
  text-align: left;
  margin-left: 1em;
  text-indent: -1em;
}

.features__item-img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 480px;
  height: auto;
  object-fit: contain;
}

/* フルメンテナンスリースに含まれているもの */
.lease-includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-self: stretch;
}

.lease-includes__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-white);
  line-height: var(--lh-tight);
}

.lease-includes__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-self: stretch;
}

.lease-includes__item {
  flex: 1 1 calc(14% - 12px);
  min-width: 140px;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 16px 0px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}

.features__bottom-bg {
  width: 100%;
  line-height: 0;
  background-color: #F6F8FF;
}

.features__bottom-bg img {
  width: 100%;
  display: block;
}

.features__btn-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-md) 0 0;
}

.btn--features {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 4px solid var(--color-white);
  box-shadow: 11px 11px 20px 0px rgba(222, 161, 0, 1), 11px -11px 22px 0px rgba(252, 196, 172, 0.2), -11px 11px 22px 0px rgba(218, 134, 78, 0.2);
  font-size: var(--fs-lg);
  padding: 20px 64px;
  border-radius: var(--radius-sm);
}

/* ============================================
   いすゞEVアシストセンター
   ============================================ */
.callcenter {
  padding: 120px 0 0;
  background-color: #F6F8FF;
  position: relative;
}

.callcenter__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.callcenter__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  width: 100%;
}

/* lead + sub-lead グループ（内部 gap 16px） */
.callcenter__lead-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.callcenter__lead {
  font-size: 32px;
  font-weight: 900;
  color: var(--color-blue-dark);
  line-height: 2;
  text-align: center;
}

.callcenter__sub-lead {
  font-size: 50px;
  font-weight: 900;
  color: #62686C;
  line-height: 1.3;
  text-align: center;
}

.callcenter__sub-lead-hl {
  color: var(--color-green);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 50.4px;
  font-style: normal;
  font-weight: 900;
  line-height: 64.8px;
}

.callcenter__sub-lead-mid {
  color: var(--color-text);
  font-family: "Noto Sans JP";
  font-size: 36px;
  font-style: normal;
  font-weight: 900;
  line-height: 64.8px;
}

.callcenter__title {
  font-size: 72px;
  font-weight: 900;
  color: var(--color-blue-dark);
  line-height: 0.9;
  letter-spacing: -0.03em;
  -webkit-text-stroke: 6px var(--color-white);
  paint-order: stroke fill;
  text-align: center;
}

/* desc + bullets グループ（内部 gap 4px） */
.callcenter__bullets-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 991px;
  max-width: 100%;
}

.callcenter__desc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 500;
  color: #000000;
  line-height: 1.667;
  align-items: baseline;
}

.callcenter__desc::before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background-color: var(--color-blue-dark);
  flex-shrink: 0;
}

.callcenter__bullets {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.callcenter__bullet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 500;
  color: #000000;
  line-height: 1.667;
  align-items: baseline;
}

.callcenter__bullet-item::before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background-color: var(--color-blue-dark);
  flex-shrink: 0;
}

/* コンテンツエリア：縦積み・中央揃え */
.callcenter__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.callcenter__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.callcenter__scene-title {
  font-size: 24px;
  font-weight: 700;
  color: #62686C;
  text-align: left;
}

.callcenter__scene-list {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.callcenter__scene-item {
  background-color: var(--color-blue-dark);
  color: #ffffff;
  border-radius: 8px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 274px;
  box-sizing: border-box;
}

.callcenter__scene-name {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.callcenter__scene-sub {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

.callcenter__img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 120px;
}

.callcenter__img {
  width: 100%;
  max-width: 720px;
}

.callcenter__service-list {
  font-size: 24px;
  font-weight: 700;
  color: #62686C;
  line-height: 1.333;
  text-align: left;
}

.callcenter__btn-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-xl) 0;
}

.callcenter__bottom-bg {
  width: 100%;
  line-height: 0;
  background-color: #ffffff;
}

.callcenter__bottom-bg img {
  width: 100%;
  display: block;
}

/* lease options */
.lease-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-self: stretch;
}

.lease-options__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-white);
  line-height: var(--lh-tight);
}

.features__contact-link {
  text-align: center;
  leading-trim: both;
  color: var(--color-white);
  text-edge: cap;
  font-family: "Noto Sans JP";
  font-size: 32px;
  font-style: normal;
  font-weight: 900;
  line-height: 46px;
}

.lease-options__content {
  background-color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 16px 0px;
  text-align: center;
}

.lease-options__text {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-white);
  line-height: var(--lh-tight);
}

/* ============================================
   商品ページバナー
   ============================================ */
.product-banner {
  padding: var(--space-xxl) 0;
  background-color: var(--color-white);
}

.product-banner__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.product-banner__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.product-banner__txt {
  color: var(--color-secondary);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: "Noto Sans JP";
  font-size: 32px;
  font-style: normal;
  font-weight: 900;
  line-height: 46px;
}

.product-banner__lead-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 130px;
}

.product-banner__lead-title img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.product-banner__lead-title span {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-secondary);
}

.product-banner__lead-desc {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: var(--lh-normal);
}

.product-banner__link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: opacity 0.2s, transform 0.2s;
  border: 6px solid var(--color-border);
}

.product-banner__link:hover {
  opacity: 0.8;
}

.product-banner__img {
  width: 100%;
}

/* ============================================
   PC / SP 表示切り替えユーティリティ
   ============================================ */
@media screen and (max-width: 768px) {
  .pcOnly {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .spOnly {
    display: none !important;
  }
}

footer ---------------------------------------- */ #footer .footer-bana-area {
  padding: 45px 0;
  border-top: solid 1px #ccc;
  text-align: center;
}

#footer .footer-bana-area a {
  padding: 20px 0;
  border-radius: 10px;
  display: inline-block;
  max-width: 580px;
  width: 96%;
}

#footer .footer-bana-area a img {
  width: 100%;
}

#footer .footer-menu-area {
  padding: 55px 0;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  text-align: center;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#footer .footer-menu-area .sns {
  width: 45%;
  padding-left: 14%;
  box-sizing: border-box;
  font-weight: bold;
}

#footer .footer-menu-area .menu {
  width: 55%;
  display: flex;
  align-items: center;
}

#footer .footer-menu-area .sns ul li {
  margin: 0 10px;
  display: inline-block;
}

#footer .footer-menu-area .sns .sns-twitter img {
  width: 35px;
  margin-right: 5px;
}

#footer .footer-menu-area .sns .sns-facebook img {
  width: 30px;
  margin-right: 5px;
}

#footer .footer-menu-area .menu ul li {
  display: inline-block;
  padding: 0 20px;
  position: relative;
}

#footer .footer-menu-area .menu ul li::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  right: -1px;
  width: 1px;
  height: 1em;
  background-color: #888;
}

#footer .footer-menu-area .menu ul li:last-of-type::after {
  display: none;
}

#footer .copyright {
  text-align: center;
  font-size: 1.3rem;
  line-height: 100px;
}

@media screen and (max-width: 1000px) {
  #footer .footer-menu-area {
    display: block;
    padding: 0;
  }

  #footer .footer-menu-area .sns {
    width: 100%;
    padding: 40px 0;
    border-bottom: solid 1px #ccc;
  }

  #footer .footer-menu-area .menu {
    padding: 40px 0;
    width: 100%;
  }

  #footer .footer-menu-area .menu ul {
    text-align: center;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  #footer .footer-bana-area {
    padding: 40px 0;
  }

  #footer .footer-bana-area a {
    padding: 13px 0;
  }

  #footer .footer-bana-area a img {
    width: 94%;
  }

  #footer {
    margin-bottom: 62px;
  }

  #footer .footer-menu-area .sns {
    padding: 20px 0;
  }

  #footer .footer-menu-area .sns ul li {
    display: block;
    margin: 20px 0;
  }

  #footer .footer-menu-area .menu {
    padding: 25px 0;
  }

  #footer .footer-menu-area .menu ul li {
    display: block;
  }

  #footer .footer-menu-area .menu ul li::after {
    display: none;
  }
}

/* ============================================
   レスポンシブ対応
   ============================================ */

/* タブレット (768px〜1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-padding: 40px;
    --fs-xxl: 40px;
    --fs-xl: 30px;
    --fs-lg: 24px;
    --fs-md: 20px;
  }

  /* ヒーロー タブレット */
  .hero {
    padding: 16px 24px 0;
  }

  .hero__card {
    border-radius: 32px;
  }

  .hero__left {
    flex: 0 0 320px;
    padding: 40px 24px 32px 32px;
    gap: 24px;
  }

  .hero__text-group {
    gap: 24px;
  }

  .hero__catchcopy {
    font-size: 16px;
  }

  .hero__sub-catchcopy {
    font-size: 20px;
  }

  .hero__title-pkg {
    max-width: 260px;
  }

  .hero__title-elfmio {
    max-width: 200px;
  }

  .hero__car-wrap {
    padding-top: 22px;
  }

  .hero__car-section {
    padding: 16px 20px 24px;
    min-height: 200px;
  }

  .hero__badge {
    font-size: 20px;
    padding: 10px 28px;
  }

  .hero__main-car {
    max-height: 200px;
  }

  .hero__thumbs {
    width: 38%;
    gap: 12px;
  }

  .hero__items-wrap {
    padding-top: 22px;
  }

  .hero__bottom {
    padding: 16px 20px;
    gap: 16px;
  }

  .hero__item {
    padding: 20px 12px;
    gap: 12px;
    min-height: 120px;
  }

  .hero__item-img {
    max-height: 90px;
  }

  /* アンカーナビ タブレット */
  .anchor-nav {
    padding: 32px 0 0;
  }

  .anchor-nav__btn {
    font-size: 15px;
    padding: 8px 28px;
    width: 100%;
    justify-content: center;
    position: relative;
    width: 330px;
  }

  .anchor-nav__arrow {
    position: absolute;
    right: 5%;
  }

  .anchor-nav__inner {
    gap: 16px;
  }

  .anchor-nav__row {
    gap: 16px;
    display: grid;
    width: 100%;
  }



  .support__heading-yellow,
  .support__heading-light {
    font-size: 48px;
  }

  .support__heading-mid {
    font-size: 36px;
  }

  .support__desc {
    font-size: 20px;
  }

  .support__cards {
    gap: var(--space-md);
    width: 96%;
    margin: 0 auto;
  }

  .support__card {
    border-width: 6px;
    padding: 40px 24px;
  }

  .support__card-title {
    font-size: 26px;
  }

  .support__card-desc {
    font-size: 18px;
  }

  .support__card-icon {
    width: 100px;
    top: -22px;
    left: -28px;
  }

  .support__contact-link {
    font-size: 24px;
  }

  .car-type__inner {
    width: 96%;
  }

  .convenience__inner {
    padding: 48px 40px;
    gap: 24px;
    width: 96%;
  }

  .convenience__list {
    gap: 24px;
  }

  .convenience__item {
    height: 280px;
  }

  .convenience__item-label {
    padding: 20px 12px 0 24px;
  }

  .safety__inner {
    padding: 48px 40px;
    gap: 32px;
  }

  .safety__content-box {
    padding: 28px 32px;
  }

  .safety__list {
    gap: 48px;
  }

  /* 充電器（タブレット） */
  .charger-set__inner {
    padding: 48px 40px;
    border-radius: 56px;
  }

  .charger-set__item:last-child {
    width: 420px;
  }

  .charger-set__title {
    font-size: 36px;
  }

  .card-plan {
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }

  .card-plan__section {
    width: 100%;
  }

  /* features（タブレット） */
  .features__item {
    gap: 24px;
  }

  .features__item-num-wrap {
    width: 130px;
  }

  .features__item-num {
    font-size: 100px;
  }

  .features__item-text,
  .features__item-text-wrap {
    width: 280px;
  }

  .features__item-num {
    font-size: 100px;
  }

  .features__section-tag {
    font-size: var(--fs-lg);
    padding: 12px 60px;
  }

  .lease-includes__item {
    flex: 1 1 calc(25% - 12px);
  }

  .callcenter__scene-list {
    gap: 30px;
  }

  .callcenter__scene-item {
    flex: 0 0 40%;
  }
}

/* スマートフォン (〜767px) */
@media (max-width: 767px) {
  :root {
    --container-padding: 20px;
    --fs-xxl: 28px;
    --fs-xl: 22px;
    --fs-lg: 20px;
    --fs-md: 18px;
    --fs-base: 14px;
    --fs-sm: 13px;
    --fs-xs: 11px;
    --space-xxl: 48px;
    --space-xl: 32px;
    --space-lg: 24px;
    --space-md: 16px;
  }

  /* ヘッダー */
  .header__inner {
    padding: 16px 20px;
  }

  .header__logo--elfmio,
  .header__logo--isuzu {
    max-height: 22px;
  }

  /* ヒーロー SP */
  .hero {
    padding: 12px 12px 0;
  }

  .hero__card {
    flex-direction: column;
    border-radius: 24px;
  }

  .hero__left {
    flex: none;
    padding: 20px 20px 16px;
    gap: 16px;
    justify-content: flex-start;
  }

  .hero__text-group {
    gap: 16px;
  }

  .hero__text-area {
    gap: 8px;
    width: 89%;
  }

  .hero__catchcopy {
    line-height: 2em;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
  }

  .hero__sub-catchcopy {
    letter-spacing: 1.2px;
    font-size: 24px;
    line-height: 32px;
  }

  .hero__title-pkg {
    max-width: 100%;
    width: 100%;
  }

  .hero__title-elfmio {
    max-width: 100%;
    width: 88%;
  }

  .hero__right {
    flex: none;
  }

  .hero__car-wrap {
    padding-top: 18px;
  }

  .hero__car-section {
    padding: 12px 12px 20px;
    min-height: 160px;
    gap: 8px;
  }

  .hero__badge {
    font-size: 14px;
    padding: 6px 18px;
    border-radius: 30px;
    border-width: 2px;
  }

  .hero__car-row {
    gap: 8px;
  }

  .hero__main-car {
    max-width: 65%;
    max-height: 140px;
  }

  .hero__thumbs {
    width: 80px;
    gap: 8px;
  }

  .hero__thumb-badge {
    font-size: 10px;
    padding: 2px 8px;
  }

  .hero__items-wrap {
    padding-top: 18px;
  }

  .hero__bottom {
    padding: 10px;
    gap: 8px;
  }

  .hero__item {
    padding: 16px 8px;
    gap: 8px;
    min-height: 100px;
  }

  .hero__item-img {
    max-height: 70px;
    margin: 15px 0 0;
  }

  /* アンカーナビ SP */
  .anchor-nav {
    padding: 24px 0 0;
  }

  .anchor-nav__inner {
    padding: 0 var(--container-padding);
    gap: 24px;
  }

  .anchor-nav__row {
    gap: 24px;
    display: grid;
    /*flex-wrap: wrap; */
  }

  .anchor-nav__btn {
    font-size: 13px;
    padding: 8px 16px;
    border-width: 3px;
    white-space: normal;
    text-align: center;
    justify-content: center;
    width: 300px;
    height: 24px;
    position: relative;
  }

  .anchor-nav__arrow {
    width: 14px;
    height: 9px;
    flex-shrink: 0;
    position: absolute;
    right: 4%;
  }

  /* サポート */
  .support {
    padding: 64px 0 80px;
    border-radius: 0 0 40px 40px;
  }

  .support__inner {
    padding: 0 20px;
    gap: 40px;
  }

  .support__header {
    gap: 24px;
    padding: 0px;
  }

  .support__heading {
    gap: 4px;
  }

  .support__heading-yellow,
  .support__heading-light {
    font-size: 28px;
    line-height: 1.2;
  }

  .support__heading-mid {
    font-size: 22px;
    line-height: 1.2;
  }

  .support__desc {
    font-size: 15px;
  }

  .support__cards {
    flex-direction: column;
    gap: 48px;
  }

  .support__card {
    border-width: 5px;
    border-radius: 40px;
    padding: 24px 20px 32px;
  }

  .support__card-inner {
    gap: 20px;
  }

  .support__card-note {
    margin-top: -15px;
  }

  .support__card-title {
    font-size: 22px;
  }

  .support__card-desc {
    font-size: 15px;
  }

  .support__card-icon {
    top: -20px;
    left: -20px;
    width: 60px;
  }

  .support__contact-link {
    font-size: 20px;
  }

  /* 車両セット */
  .car-set__bg-wrap {
    background-image: url(../images/car_set_bg_sp.png);
    background-size: cover;
    padding: 40px 0 60px;
  }

  .car-set__intro {
    padding: 32px 0;
  }

  .car-set__intro-inner {
    padding: 0 var(--container-padding);
  }

  .car-set__intro-title {
    font-size: 20px;
  }

  .car-set__intro-title--hl {
    font-size: 28px;
  }

  .car-set__intro-title--hl_2 {
    font-size: 28px;
  }

  /* 架装タイプ */
  .car-set__intro-title {
    font-size: 28px;
  }

  .car-set__intro-desc {
    font-size: 16px;
  }

  .car-type__inner {
    padding: 40px 32px;
    border-radius: 40px;
    border-width: 5px;
    gap: 32px;
  }

  .car-type__title-wrap {
    gap: 20px;
  }

  .car-type__title-img {
    height: 36px;
  }

  .car-type__elfmio-title {
    height: 30px;
  }

  .car-type__item-body {
    gap: 40px;
  }

  .car-type__img {
    width: 320px;
  }

  .car-type__spec-table {
    width: 280px;
  }

  /* 架装タイプ SP */
  .car-set__intro-title {
    font-size: 20px;
    letter-spacing: 0.03em;
    text-align: center;
  }

  .car-set__intro-desc {
    font-size: 14px;
  }

  .car-set__bottom-bg {
    margin-top: -90px;
  }


  .car-type__inner {
    padding: 32px 20px;
    border-radius: 24px;
    border-width: 6px;
    gap: 24px;
  }

  .car-type__title-wrap {
    gap: 0px;
    display: grid;
    width: 100%;
  }

  .car-type__title-img {
    height: auto;
    width: 100%;
    margin-left: 0px;
  }

  .car-type__elfmio-title {
    height: auto;
    width: 100%;
  }

  .car-type__item-body {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .car-type__img {
    width: 100%;
    max-width: 320px;
  }

  .car-type__spec-table {
    width: 70%;
    max-width: 320px;
    font-size: 13px;
  }

  .car-type__spec-table th {
    width: 100px;
  }

  /* 利便性 */
  .convenience__inner {
    padding: 32px 20px;
    border-radius: 40px;
    border-width: 5px;
    gap: 24px;
  }

  .convenience__header {
    gap: 24px;
  }

  .convenience__subtitle {
    font-size: 18px;
  }

  .convenience__desc {
    font-size: 15px;
  }

  .convenience__list {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .convenience__item {
    width: 100%;
    max-width: 360px;
    height: 280px;
    gap: 14px;
    padding-bottom: 15px;
  }

  .convenience__item-label {
    padding: 20px 12px 0 24px;
  }

  .convenience__title-img {
    margin-left: 0px;
    width: 100%;
  }

  /* 安全装置 */
  .safety__inner {
    padding: 32px 20px;
    border-radius: 40px;
    border-width: 5px;
    gap: 24px;
  }

  .safety__header {
    gap: 24px;
  }

  .safety__subtitle {
    font-size: 18px;
  }

  .safety__desc {
    font-size: 15px;
  }

  .safety__content-box {
    padding: 24px 20px;
  }

  .safety__list {
    gap: 40px;
  }

  .safety__title-img {
    max-height: auto;
    width: 100%;
    margin-left: 0;
  }

  .safety__item-body {
    flex-direction: column;
  }

  .safety__item-body .safety__img {
    max-width: 100%;
    width: 100%;
  }

  .safety__item-label--center {
    max-width: 100%;
    justify-content: flex-start;
  }

  .safety__item-label img {
    width: 20px;
    height: 20px;
  }

  .safety__item-label span {
    font-size: 18px;
    ;
  }

  .safety__note {
    font-size: 14px;
  }

  /* 充電器 */
  .charger-set__inner {
    padding: 32px 20px;
    border-radius: 40px;
    border-width: 5px;
  }

  .charger-set__cols {
    flex-direction: column;
    gap: 40px;
  }

  .charger-set__item:first-child,
  .charger-set__item:last-child {
    width: 100%;
    flex-shrink: 1;
  }

  .charger-set__title {
    font-size: 32px;
  }

  .charger-set__item-content {
    gap: 24px;
  }

  .charger-set__spec-table {
    width: 70%;
  }

  .charger-set__img-wrap {
    margin: 30px 0;
  }

  .charger-set__img {
    width: 50%;
  }

  .charger-set__card-img {
    width: 100%;
    max-width: 280px;
  }

  .card-plan {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .card-plan__section {
    width: 100%;
    max-width: 320px;
  }

  .card-plan__price-wrap {
    justify-content: center;
  }

  .card-plan__price-big {
    font-size: 58px;
  }

  .card-plan__price-small {
    font-size: 32px;
  }

  .card-plan__label {
    display: block;
    width: 80%;
    max-width: 100%;
    min-height: auto;
  }

  /* 充電スポット */
  .charging-spot {
    padding: 50px 0;
  }

  .charging-spot__btn {
    border-radius: 50px;
    border: none;
  }

  .charging-spot__inner {
    padding: 0 var(--container-padding);
  }

  .charging-spot__text {
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }

  .charging-spot__sub {
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 30px;
    margin-top: 25px;
  }

  /* Features */
  .features__inner {
    padding: 48px var(--container-padding);
    gap: 40px;
  }

  .features__main::before {
    background-image: url(../images/features_bubble_bg_sp.png);
    top: 60px;
  }

  .features__heading {
    font-size: 24px;
  }

  .features__heading-mid {
    font-size: 16px;
  }

  .features__desc {
    font-size: 14px;
  }

  .features__section {
    padding: 48px var(--container-padding) 32px;
    border-radius: 24px;
    margin-top: 20px;
  }

  .features__section-tag {
    font-size: 18px;
    padding: 10px 32px;
    white-space: normal;
    text-align: center;
    max-width: 280px;
  }

  .features__items {
    gap: 0;
    margin-top: var(--space-lg);
  }

  .features__item {
    flex-direction: column;
    align-items: start;
    gap: 16px;
    padding: 32px 0;
    border-bottom: 3px solid rgba(255, 185, 0, 0.15);
  }

  .features__item-num-wrap {
    width: auto;
    align-items: center;
  }

  .features__item-num-wrap img {
    width: 112px;
  }

  .features__section-title-wrap {
    width: 70%;
  }

  .features__item-num {
    font-size: 80px;
  }

  .features__item-text {
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    text-align: left;
    width: 100%;
  }

  .features__item-text-wrap {
    width: 100%;
  }

  .features__item-note {
    text-indent: -2em;
  }

  .lease-includes__list {
    gap: 8px;
  }

  .lease-includes__item {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
    padding: 12px 4px;
    font-size: 16px;
    border-radius: 4px;
  }

  .lease-includes__title {
    font-size: 16px;
  }

  .lease-options__text {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
  }

  /* コールセンター */
  .callcenter {
    padding: 80px 0;
  }

  .callcenter__inner {
    padding: 0 var(--container-padding);
    gap: 40px;
  }

  .callcenter__header {
    gap: 40px;
  }

  .callcenter__lead {
    font-size: 24px;
  }

  .callcenter__sub-lead {
    font-size: 32px;
  }

  .callcenter__title {
    font-size: 48px;
    -webkit-text-stroke: 4px var(--color-white);
  }

  .callcenter__desc,
  .callcenter__bullet-item {
    font-size: 18px;
  }

  .callcenter__desc::before,
  .callcenter__bullet-item::before {
    width: 11px;
    height: 11px;
  }

  .callcenter__scene-list {
    gap: 24px;
  }

  .callcenter__scene-item {
    flex: 0 0 220px;
    gap: 32px;
  }

  .callcenter__service-list {
    font-size: 18px;
  }

  /* 商品バナー */
  .product-banner__inner {
    padding: 0 var(--container-padding);
  }

  .product-banner__lead-title span {
    font-size: var(--fs-base);
  }

  .product-banner__link {
    border-radius: 10px;
  }

  .lease-options__content {
    padding: 16px 20px;
  }

  .lease-options__title {
    font-size: 18px;
  }

  .features__contact-link {
    leading-trim: both;

    text-edge: cap;
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 30px
  }

  /* フッター */
  /* コールセンター（SP） */
  .callcenter {
    padding: 60px 0 0;
  }

  .callcenter__inner {
    gap: 32px;
  }

  .callcenter__img-wrap {
    margin-bottom: 60px;
  }

  .callcenter__header {
    gap: 32px;
  }

  .callcenter__lead {
    font-size: 16px;
    line-height: 24px;
  }

  .callcenter__sub-lead {
    font-size: 24px;
  }

  .callcenter__sub-lead-hl {
    font-size: 32px;
    line-height: 1;
  }

  .callcenter__sub-lead-mid {
    line-height: 1;
    font-size: 24px;
  }

  .callcenter__title {
    font-size: 32px;
    -webkit-text-stroke: 3px var(--color-white);
    line-height: 1.2;
  }

  .callcenter__desc,
  .callcenter__bullet-item {
    font-size: 15px;
    align-items: baseline;
    line-height: 1.3;
  }

  .callcenter__bullets-group,
  .callcenter__bullets {
    gap: 16px;
  }


  .callcenter__scene-list {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .callcenter__scene-item {
    flex: 0 0 auto;
    width: 100%;
    gap: 0px;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    display: grid;
    text-align: center;
  }

  .callcenter__service-list {
    font-size: 15px;

  }

  .product-banner__txt {
    font-size: 20px;
    line-height: 30px;
  }

  .product-banner__lead-title {
    margin-top: 80px;
  }


}