/* ============================================
   page-denki.css
   p- 接頭辞：でんきページ固有セクション
   ============================================ */


/* ============================================
   p-kv（KVセクション）
   ============================================ */
.p-kv {
  position: relative;
  overflow: hidden;
  background: #FEF7DF;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--header-height) * -1);
}

.p-kv__bg-deco {
  position: absolute;
  inset: 0;
  width: max(151px,11.8vw);
  height: max(153px,11.95vw);
  top: 36.41vw;
  left: -5.08vw;
  z-index: 0;
}

.p-kv__inner {
  position: relative;
  z-index: 1;
  padding: calc(var(--header-height) + 7.81vw) 0 7.81vw 7.81vw;
}
.p-kv__inner .l-breadcrumb{
  position: absolute;
  top: calc(var(--header-height) + 1.5rem);
  left: 1.5rem;
}

.p-kv__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3.13vw;
  width: fit-content;
}

.p-kv__logo {
  width: 19.45vw;
  height: auto;
}

.p-kv__copy-wrap {
  position: relative;
}

.p-kv__copy {
  display: block;
  width: 53.91vw;
  height: auto;
}

.p-kv__desc {
  font-size: max(14px, 1.17vw);
  line-height: var(--leading-loose);
  color: var(--color-text);
}

.p-kv__btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.p-kv__btn {
  --btn-color: var(--color-denki);
}

/* プランを見るボタンを左に表示（PC） */
.p-kv__btns .c-arrow-btn--ghost {
  order: -1;
  background: var(--color-white);
}

/* イラスト */
.p-kv__illust {
  position: absolute;
  top: 11.56vw;
  right: 6.25vw;
  width: max(242px,25.78vw);
  height: max(242px,25.78vw);
  z-index: 3;
}

/* ポイントカード */
.p-kv__point {
  position: absolute;
  align-self: end;
  justify-self: end;
  right: 11.09vw;
  top: 34.53vw;
}

.p-kv__point-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 21.875vw; /* 280px */
  height: auto;
}

.p-kv__point-deco1 {
  position: absolute;
  top: 0.7vw;
  left: -3.13vw;
  width: 6.8vw;
  height: 6.88vw;
  z-index: 1;
}

.p-kv__point-deco2 {
  position: absolute;
  bottom: -3.59vw;
  right: -5.08vw;
  width: 11vw;
  height: auto;
  z-index: 1;
}

.p-kv__point-catalog {
  position: absolute;
  bottom: -1.5625vw;
  right: -4.77vw;
  width: 8.44vw;
  height: auto;
  z-index: 3;
}

/* ============================================
   p-kv SP（〜768px）
   ============================================ */
@media (max-width: 768px) {
  .p-kv {
    min-height: auto;
  }
  .p-kv__bg-deco{
    display: none;
  }

  .p-kv__inner {
    position: relative;
    padding: calc(var(--header-height) + 17.95vw) 4.1vw 25.64vw 4.1vw;
  }

  .p-kv__content {
    z-index: 2;
    gap: 6.15vw;
    padding-right: 0;
  }
  .p-kv__inner .l-breadcrumb {
    top: calc(var(--header-height) + 1rem);
    left: 1rem;
}  

  .p-kv__logo {
    width: 46.15vw;
  }

  .p-kv__copy {
    width: 90.51vw;
  }

.p-kv__desc {
    font-size: 16px;
  }

  .p-kv__btns {
    flex-direction: column-reverse;
    gap: 1rem;
  }

  .p-kv__btn {
    font-size: 16px;
  }

  .p-kv__illust {
    position: absolute;
    top: 94vw;
    right: -8.72vw;
    width: 55vw;
    height: auto;
    object-fit: initial;
    z-index: 3;
  }

  .p-kv__point {
    position: relative;
    margin: 12.05vw auto 0;
    top: unset;
    right: unset;
    width: fit-content;
  }

  .p-kv__point-img {
    width: 70.51vw;
  }

  .p-kv__point-deco1 {
    top: 2.31vw;
    left: -9.49vw;
    width: 22.31vw;
    height: 22.56vw;
  }

  .p-kv__point-deco2 {
    bottom: -11.79vw;
    right: -14.62vw;
    width: 36.92vw;
  }

  .p-kv__point-catalog {
    bottom: -4.36vw;
    right: -14.62vw;
    width: 27.69vw;
    height: 32.05vw;
  }
}

@media (max-width: 489px) {
  .p-kv__illust {
    top: 107.18vw;
    width: 62.05vw;
  }
}


/* ============================================
   p-feature（MIRAでんきの3つの魅力）
   ============================================ */
.p-feature {
  position: relative;
  padding: var(--section-py) var(--section-px);
  background: var(--color-bg-off-white);
  overflow: hidden;
}

/* 背景装飾SVG：inset: 0 で section 全体を覆い、preserveAspectRatio="xMidYMid slice" で縦100%を維持しつつ横は中央クリップ */
.p-feature__bg-deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.p-feature__bg-deco-path {
  fill: var(--color-bg-gray);
}

.p-feature__bg-deco--sp {
  display: none;
}

.p-feature__inner {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  z-index: 1;
}

/* カードグリッド */
.p-feature__cards {
  display: flex;
  gap: 1.5rem;
}

/* カード（p-concept__feature と同パターン） */
.p-feature__card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  margin-top: 27px;
  padding: 2.5rem 1.5rem 1.5rem;
  border: 1px solid var(--color-page-key);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

/* アイコンバッジ：カード上辺の中央をまたぐ正円 */
.p-feature__card-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  background: var(--color-white);
  border: 1px solid var(--color-page-key);
  border-radius: 50%;
  color: var(--color-page-key);
  font-size: var(--text-2xl);
  z-index: 1;
}

.p-feature__card-title {
  font-family: var(--font-round);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-page-key);
  line-height: var(--leading-tight);
}

.p-feature__card-desc {
  font-size: 16px;
  color: var(--color-text);
  line-height: var(--leading-loose);
  text-align: left;
}

/* SP */
@media (max-width: 768px) {
  .p-feature__bg-deco--pc {
    display: none;
  }

  .p-feature__bg-deco--sp {
    display: block;
  }

  .p-feature__cards {
    flex-direction: column;
    gap: 1rem;
  }

  .p-feature__card {
    padding: 2.5rem 1.25rem 1.25rem;
  }
}


/* ============================================
   p-plan（料金プラン）
   ============================================ */
.p-plan {
  position: relative;
  padding: var(--section-py) var(--section-px);
  background: #FFEDE0;
  overflow: hidden;
}

/* 背景装飾SVG：右端寄せ、縦100% */
.p-plan__bg-deco {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
  user-select: none;
}

.p-plan__bg-deco-path {
  fill: #FFE7D6;
}

.p-plan__bg-deco--sp {
  display: none;
}

.p-plan__inner {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* カードグリッド：バッジがカード上にはみ出るので padding-top を確保 */
.p-plan__cards {
  display: flex;
  gap: 40px;
  justify-content: center;
}

/* カード共通 */
.p-plan__card {
  position: relative;
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-denki);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-service-denki);
  overflow: visible;
}

/* バッジ：カードの上に飛び出す配置 */
.p-plan__card-badge {
  position: absolute;
  top: 0;
  right: 24px;
  transform: translateY(-100%);
  padding: 0.375rem 1rem 0.5rem;
  background: var(--color-denki);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-family: var(--font-round);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  line-height: var(--leading-none);
  white-space: nowrap;
}

/* カードヘッダー（プラン名エリア） */
.p-plan__card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem 2rem;
  background: #FEF7DF;
  border-bottom: 1px solid var(--color-denki);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  text-align: center;
}

.p-plan__card-name {
  font-family: var(--font-round);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.p-plan__card-sub {
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  line-height: var(--leading-none);
}

/* カードボディ */
.p-plan__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

/* おすすめ対象ボックス */
.p-plan__card-recommend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--color-bg-gray-light);
  border-radius: var(--radius-sm);
}

.p-plan__card-recommend-label {
  font-size: var(--text-xs);
  font-weight: bold;
  color: var(--color-text-sub);
  line-height: var(--leading-none);
  background: var(--color-white);
  padding: .25rem 1rem;
  border-radius: var(--radius-md);
  width: fit-content;
}

.p-plan__card-recommend-desc {
  font-size: var(--text-base);
  color: var(--color-text);
  font-weight: 500;
  line-height: var(--leading-loose);

}

/* フィーチャーリスト */
.p-plan__card-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  list-style: none;
}

.p-plan__card-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-normal);
  border-bottom: 1px dashed var(--color-text-sub);
}

.p-plan__card-item .fa-check {
  flex-shrink: 0;
  color: var(--color-denki);
  font-size: 16px;
  -webkit-text-stroke: 1.5px currentColor;
}

.p-plan__card-item .fa-gift {
  flex-shrink: 0;
  color: var(--color-denki);
  font-size: 18px;
}

/* 申し込みボタン：カード幅いっぱい */
.p-plan__card-btn {
  width: 100%;
  --btn-color: var(--color-denki);
}

/* プラン診断エリア */
.p-plan__diagnosis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 3.5rem;
}

/* 吹き出し（フワフワアニメーション） */
.p-plan__bubble {
  position: relative;
  padding: 0.875rem 1.5rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  font-family: var(--font-round);
  font-size: 14px;
  font-weight: 700;
  color: #009999;
  text-align: center;
  line-height: var(--leading-normal);
  animation: planBubbleFloat 3s ease-in-out infinite;

  /* 下向き三角（吹き出しのしっぽ） */
  &::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 14px solid transparent;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-top-color: var(--color-white);
    border-bottom: none;
  }
}

@keyframes planBubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* 診断ボタン */
.p-plan__diagnosis-btn {
  --btn-color: #009999;
  width: 260px;
}

/* SP */
@media (max-width: 768px) {
  .p-plan__bg-deco--pc {
    display: none;
  }

  .p-plan__bg-deco--sp {
    display: block;
  }

  .p-plan__inner{
    max-width: none;
  }
  .p-plan__cards {
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
  }

  .p-plan__card {
    width: 100%;
    max-width: 380px;
  }
}


/* ============================================
   p-partner（HTBエナジーとの連携）
   ============================================ */
.p-partner {
  background: var(--color-bg-gray-light);
  overflow: hidden;
}

/* グリッド：テキスト列は可変、画像列は480px固定 */
.p-partner__inner {
  display: grid;
  grid-template-columns: 1fr 480px;
  align-items: stretch;
}

/* 左カラム：テキスト群。セクションの padding はこちら側のみ */
.p-partner__text {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: var(--section-py) 4rem var(--section-py) var(--section-px);
}

.p-partner__head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-partner__label {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.275rem 1.25rem;
  border: 1px solid var(--color-page-key);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-none);
  color: var(--color-page-key);
  background: var(--color-white);
}

.p-partner__title {
  font-family: var(--font-round);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.p-partner__desc {
  font-size: var(--text-base);
  color: var(--color-text-sub);
  line-height: var(--leading-loose);
}

/* フィーチャーリスト */
.p-partner__features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
}

.p-partner__feature {
  width: 252px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--color-page-key);
  border-radius: var(--radius-sm);
  font-family: var(--font-round);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-page-key);
  background: var(--color-white);
}

.p-partner__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  font-size: 24px;
  color: var(--color-page-key);
}

.p-partner__feature-divider {
  width: 1px;
  height: 1.25em;
  background: var(--color-page-key);
  flex-shrink: 0;
}

.p-partner__image {
  position: relative;
  min-height: 400px;
  padding-right: var(--section-py) ;
  display: grid;
  align-items: center;
}
.p-partner__image img {
  width: 100%;
  display: block;
}

/* SP */
@media (max-width: 768px) {
  .p-feature__inner{
    max-width: none;
  }
  .p-partner__inner {
    grid-template-columns: 1fr;
  }

  .p-partner__text {
    padding: 3.5rem 1.25rem;
    gap: 2rem;
  }

  .p-partner__title {
    font-size: var(--text-3xl);
  }

  .p-partner__title + .p-partner__desc {
    margin-top: 0.5rem;
  }
  
  .p-partner__features {
    align-items: center;
  }
  .p-partner__image {
    padding: 0 3rem 3.5rem;
    min-height: 300px;
    order: 1;
  }

  .p-partner__text {
    order: 0;
  }
}