/* ==========================================================
   /enepippi  エネピ10周年 公式キャラクター「エネピッピ」紹介ページ
   デザイン: Figma LP > 完成 (node 7639-19083)
   - セクション（カード）は画像で表現
   - 「これからのエネピッピ」のみボタンをHTMLで配置
   - 背景固定＋スクロールでコンテンツが浮き上がるアニメーション
   ========================================================== */

/* ----- tokens ----- */
:root {
  --black-100: #4a4933;
  --black-120: #22221a;
  --blue-100: #006e96;
  --blue-120: #005a7a;
  --enepi-blue-50: #009de6;
  --enepi-blue-10: #dcf2fd;
  --enepi-blue-30: #acd9ef;
  --orange-50: #ea6101;
  --orange-70: #d15700;
  --orange-100: #b54500;
  --yellow-10: #fff2c7;
  --yellow-30: #efdda4;
  --grad-blue-btn: linear-gradient(265deg, #009de5 4%, #006e96 84%);
}

/* ----- スケール基準 -----
   390px幅のデザインを基準にする。1rem = 390px時の10px。
   390px未満: 画面幅に比例してコンテンツを縮小(remがvw連動)。
   390px以上: コンテンツ幅は390pxで固定し、左右の余白(背景)だけが広がる。
   ヘッダー/フッターは本サイトLP準拠のためpx固定のまま。 */
html {
  font-size: min(calc(100vw / 39), 10px);
  /* 上下端でのオーバースクロール(バウンス)を無効化し、
     最上部・最下部でヘッダー/フッターが動かないようにする */
  overscroll-behavior: none;
}
/* 縦スクロール以外でコンテンツを動かさない */
html, body { overflow-x: clip; }

/* ----- reset ----- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; height: auto; }

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  color: var(--black-120);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* device switch: SP/Tab(base) / PC(>=1280px) */
.pc-only { display: none !important; }
@media (min-width: 1280px) {
  .pc-only { display: block !important; }
  span.pc-only { display: inline !important; }
}

/* ==========================================================
   固定背景（スクロールしてもコンテンツのみが動く）
   ========================================================== */
.bg-fixed {
  position: fixed;
  /* ヘッダーの真下から背景を配置(FVで氷山が完全に見える)。
     360px未満はヘッダーが zoom で縮むので高さも連動 */
  top: calc(54px * var(--header-zoom, 1));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #fff;
  /* 高さは画面高さ(ヘッダー下〜下端)に固定し、
     画面幅が広がったら左右の表示範囲が広がる。
     画像は左右ミラー連結(3200x1200)で、横リピートしても継ぎ目が出ない */
  background-image: url("../images/bg-ice-wide.jpg");
  /* webp優先・jpgフォールバック(image-set非対応ブラウザは上のjpgを使う) */
  background-image: -webkit-image-set(url("../images/bg-ice-wide.webp") 1x);
  background-image: image-set(url("../images/bg-ice-wide.webp") type("image/webp"), url("../images/bg-ice-wide.jpg") type("image/jpeg"));
  background-size: auto 100%;
  background-position: center top;
  background-repeat: repeat-x;
}
@media (min-width: 1280px) {
  .bg-fixed { top: 81px; }
}

/* ==========================================================
   Header（本サイトLP準拠）
   ========================================================== */
.header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* オーバースクロールでページが引っ張られた場合も背景が見えないよう
   ヘッダー上部を白で延長しておく(overscroll-behavior非対応環境向け) */
.header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: #fff;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px; /* SP/Tab は54px固定 */
  padding: 0 16px;
  max-width: 1280px;
  margin: 0 auto;
  /* 360px未満はブロックごと比例縮小(--header-zoom は index.html 冒頭のscriptが設定) */
  zoom: var(--header-zoom, 1);
}
@media (max-width: 359.98px) {
  .header-inner { width: 360px; } /* 360px基準のまま zoom で画面幅にフィット */
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}
.header-logo { width: 84px; }
.header-badge { width: 61px; }
.header-right { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  background: var(--grad-blue-btn);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
  text-decoration: none;
}
.header-tel-badge {
  background: #fff;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-100);
}
.header-tel-num {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
@media (min-width: 1280px) {
  .header-inner { height: 81px; /* PC は81px固定 */ }
  .header-logo { width: 77px; }
  .header-badge { width: 67px; }
  .header-tel-num { font-size: 18px; }
  .header-hours {
    font-size: 12px;
    color: var(--black-100);
    white-space: nowrap;
  }
}

/* ==========================================================
   本文カラム（390px基準・画面幅に比例して拡縮）
   ========================================================== */
.page {
  width: 100%;
  max-width: 390px; /* 390px以上ではコンテンツ幅を広げない */
  margin: 0 auto;
  padding: 0 1.6rem 1.6rem; /* 両サイド余白16px(390px基準) */
}
.section > img { width: 100%; }

/* カード画像はバッジ・キャラのはみ出し分を含んで書き出しているため、
   フレーム間 32px になるよう余白を微調整 */
.section-hero {
  margin: 1.4rem -0.8rem 0; /* ヘッダーとの間に14pxの余白(背景が見える) */
}
.section-about { margin-top: 0.2rem; }
.section-episodes { margin-top: 0.8rem; }
.section-omoi { margin-top: 0.8rem; }
.section-next { margin-top: 1.3rem; /* バッジはみ出し(15px)込みの画像のため詰める */ }

/* ==========================================================
   これからのエネピッピ
   （カード本体はボタン部分を空けた透過画像。ボタンはその上に絶対配置）
   ========================================================== */
.next-card { position: relative; }
.next-img { width: 100%; }

/* 画像内の空きスペース位置（カード座標をpng書き出し範囲366x743.5に換算した%） */
.next-card .btn-sns,
.next-card .btn-primary {
  position: absolute;
  left: 4.372%;   /* (12+4)/366 */
  width: 91.257%; /* 334/366 */
  height: 6.86%;  /* 51/743.5 */
}
.next-slot-1 { top: 30.531%; } /* SNS: (212+15)/743.5 */
.next-slot-2 { top: 39.005%; }
.next-slot-3 { top: 47.478%; }
.next-slot-4 { top: 55.951%; }
.next-slot-5 { top: 76.126%; } /* CTA: (551+15)/743.5 */
.next-slot-6 { top: 84.599%; }

/* ----- 共通: 立体ボタン（面 + 3pxオフセットの土台） ----- */
.btn-sns,
.btn-primary {
  display: block;
  text-decoration: none;
}
.btn-sns-bar,
.btn-primary-bar {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  right: 0;
  bottom: 0;
  border-radius: 0.4rem;
  background: var(--blue-120);
}
.btn-sns-face,
.btn-primary-face {
  position: absolute;
  top: 0;
  left: 0;
  right: 0.3rem;
  bottom: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
  border: 0.1rem solid var(--enepi-blue-50);
  border-radius: 0.4rem;
  background: #fff;
  transition: background-color 0.15s ease;
}
/* クリック（押下）時: 面が土台の位置まで沈む */
.btn-sns:active .btn-sns-face,
.btn-primary:active .btn-primary-face {
  transform: translate(0.3rem, 0.3rem);
}
.btn-sns:active .btn-sns-bar,
.btn-primary:active .btn-primary-bar {
  opacity: 0;
}

/* ----- SNSボタン ----- */
.btn-sns-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  flex-shrink: 0;
}
.btn-sns-label {
  flex: 1;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--enepi-blue-50);
}
.btn-sns-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 3.8rem;
  flex-shrink: 0;
}
.btn-sns-arrow img { width: 2rem; height: auto; }
/* アイコンは各ボタンごとにデザイン上のサイズへ拡縮 */
.next-slot-1 .btn-sns-icon img { width: 3.8rem; height: auto; }
.next-slot-2 .btn-sns-icon img { width: 2.3rem; height: auto; }
.next-slot-3 .btn-sns-icon img { width: 2.2rem; height: auto; }
.next-slot-4 .btn-sns-icon img { width: 2rem; height: auto; }
.btn-sns:hover .btn-sns-face { background: #f0faff; }

/* ----- 電気・ガスCTA（Figmaの Default / Hover / Pressed 準拠） ----- */
.btn-primary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  flex-shrink: 0;
}
.btn-primary-icon img { width: auto; height: 3.3rem; }
.btn-primary-label {
  flex: 1;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
}
.btn-primary-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.3rem;
  flex-shrink: 0;
}
.btn-primary-arrow img { width: 3.3rem; height: auto; }

/* 電気（オレンジ） */
.btn-primary--elec .btn-primary-bar { background: var(--orange-100); }
.btn-primary--elec .btn-primary-face {
  background: var(--yellow-10);
  border-color: var(--orange-50);
}
.btn-primary--elec .btn-primary-label { color: var(--orange-70); }
.btn-primary--elec:hover .btn-primary-face { background: var(--yellow-30); }

/* ガス（水色） */
.btn-primary--gas .btn-primary-bar { background: var(--blue-120); }
.btn-primary--gas .btn-primary-face {
  background: var(--enepi-blue-10);
  border-color: var(--enepi-blue-50);
}
.btn-primary--gas .btn-primary-label { color: var(--enepi-blue-50); }
.btn-primary--gas:hover .btn-primary-face { background: var(--enepi-blue-30); }

/* ==========================================================
   スクロールアニメーション（時間差で浮き上がる）
   ========================================================== */
/* JSが動く環境(html.js)でだけ初期状態を非表示にする。JS無効・未実行なら最初から全表示 */
.js .reveal {
  opacity: 0;
  transform: translateY(3.2rem);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 初期表示時に画面内にある要素はアニメなしで即座に定位置表示 */
.js .reveal.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   Footer（本サイトLP準拠）
   ========================================================== */
.footer {
  background: #fff;
  padding: 20px 16px 0;
  text-align: center;
}
/* 最下部のオーバースクロールは html の overscroll-behavior: none で抑止
   (下向きに白帯を伸ばすとスクロール領域が増えてしまうため要素では対応しない) */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  max-width: 358px;
  margin: 0 auto;
}
.footer-links a {
  font-size: 14px;
  color: #484500;
  text-decoration: none;
  white-space: nowrap;
}
.footer-copy {
  margin-top: 12px;
  font-size: 12px;
  color: #484500;
}
.footer-zigexn {
  margin-top: 20px;
  background: #e9e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 8px 16px;
}
.footer-zigexn img { height: 40px; width: auto; }