/* ======================================================================
   CO・COでんき minimal bundle (scoped)
   - Scope: .denki / #denki / denki-hero / sticky-banner / pagetop / footer
   - Goal : Keep independent from global index.css, easy to read/maintain
   - Notes: Do NOT edit index.css from here. Add denki-only overrides here.
====================================================================== */

/* --------------------------------------------------------------
  0) Design Tokens
-------------------------------------------------------------- */
:root {
  --color-key: #1976D2;
  --color-accent: #FF9800;
  --color-text: #333;
  --color-text-wh: #fff;
  --color-bg: #fff;
  --color-theme-gleen:#00c000;
  --color-theme-blue:#6495ED;

    /* ▼ Gutenberg プリセット色を denki 用に乗っ取り */
    --wp--preset--color--vivid-green-cyan: var(--color-theme-gleen);
    --wp--preset--color--vivid-cyan-blue:  var(--color-theme-blue);
    --wp--preset--color--vivid-red: #de624a; /* ← これ追加 */

  /* shared tokens for denki */
  --color-primary: #de624a;
  --color-text-sub: #555;
  --color-muted: #666;
  --border-light: #eee;

  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;

  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* --------------------------------------------------------------
  1) Base (denki page scope)
  - ページ全体（ヘッダ/本文/フッタ）を denki フォント＆センタリング基準
  - hero(.denki-hero...)ブロックそのものは変更しない
-------------------------------------------------------------- */
body.denki {
  color: var(--color-text);
  background: var(--color-bg);
  font-family:
    "Zen Maru Gothic","Noto Sans JP","Hiragino Kaku Gothic ProN",
    "Yu Gothic",system-ui,-apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* 基本は中央寄せ（パンくずなどは個別ルールで左寄せ） */
  text-align: center;
}
/* denki の本文エリアのデフォ色（エディタコンテンツ向け） */
body.denki .content :where(p, li, figcaption, h1, h2, h3, h4, h5, h6):not(.has-text-color,.contact_content_heading,.has-inline-color) {
  color: var(--color-text);
}

/* ▼ ブロックエディタのカラーパレットを優先させる（denki 用） */
body.denki .content .has-vivid-green-cyan-color {
  color: var(--wp--preset--color--vivid-green-cyan) !important;
}

body.denki .content .has-vivid-cyan-blue-color {
  color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
/* denki：インラインカラー（<mark> 等）は優先して出す */
body.denki .content .has-inline-color.has-vivid-red-color {
  color: var(--wp--preset--color--vivid-red) !important;
}

/* Gutenberg の「白文字」指定をちゃんと効かせる */
body.denki .content .has-white-color {
  color: #fff !important;
}

/* グループに has-white-color が付いたときも子要素に継承させる */
body.denki .content .has-white-color * {
  color: inherit;
}
/* =========================================================
   Editor font-size utilities（large / x-large / medium / small）
   - Gutenberg が自動で付ける .has-*-font-size を上書き適用
   - denki ページだけ適用
========================================================= */

body.denki .content .has-small-font-size {
  font-size: 0.875rem !important; /* 14px */
}

body.denki .content .has-medium-font-size {
  font-size: 1rem !important; /* 16px */
}

body.denki .content .has-large-font-size {
  font-size: 1.25rem !important; /* 約20px */
}

body.denki .content .has-x-large-font-size {
  font-size: 1.5rem !important; /* 約24px */
}

body.denki .content .has-xx-large-font-size {
  font-size: 2rem !important; /* 32pxなど。必要なら入れる */
}
/* 固定ページ共通のラッパだけ中央寄せ */
body.denki .content,
body.denki .content_inner,
body.denki .content_inner-small,
body.denki .content--narrow {
  margin-left: auto;
  margin-right: auto;
}
/* =========================================
   denki features：セクション間の縦リズム調整
   （content_inner-small 直下の子ブロックに効かせる）
========================================= */
body.denki .content_inner-small > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* 2つ目以降のブロックの頭に余白を足す */
body.denki .content_inner-small > :not(:first-child) {
  margin-top: 50px;  /* ← ここを 40〜56px くらいで好みに調整 */
}

/* 見出しと段落のデフォルトマージンを少し整理 */
body.denki .content .wp-block-heading {
  margin: 16px 0 12px;
}

/*body.denki .content p {
  margin: 0 0 1.4em;
}*/
/* 幅制御（denki 固定ページ共通） */
body.denki .content_inner {
  max-width: 1110px;
  padding: 0 16px;
}

body.denki .content_inner-small {
  max-width: 960px;
  padding: 0 16px;
}

body.denki .content--narrow {
  max-width: 640px;
  padding: 0 16px;
}
/* テキスト要素は親の text-align を継承 */
body.denki p {
  text-align: inherit;
}
body.denki ul,
body.denki ol {
  text-align: inherit;
  list-style-position: inside;
}

/* =========================================================
   Editor text-align utilities（left / center / right / justify）
   - Gutenberg が付ける .has-text-align-* を denki ページで優先
========================================================= */

body.denki .content .has-text-align-left {
  text-align: left !important;
}

body.denki .content .has-text-align-center {
  text-align: center !important;
}

body.denki .content .has-text-align-right {
  text-align: right !important;
}

body.denki .content .has-text-align-justify {
  text-align: justify !important;
}

/* 段落・リストの行間を少しゆったりめに */
body.denki .content p,
body.denki .content li {
  line-height: 1.9;
}
/* ベース：denki 内のリンク共通
   - 本文コンテンツ＋フッターメニュー＋stickyバナー＋4つの魅力
   - CTAやTELなど「専用色があるパーツ」は除外する
*/
body.denki .content a,
.denki-footer-nav__list a,
.denki-footer-terms a,
.sticky-banner a,
.denki-benefits .benefit__link {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}

body.denki .content a:hover,
.denki-footer-nav__list a:hover,
.denki-footer-terms a:hover,
.sticky-banner a:hover,
.denki-benefits .benefit__link:hover,
.p-denki-cta a:hover {
  opacity: .7;
}

/* --------------------------------------------------------------
  2) Layout Container
-------------------------------------------------------------- */

/* ===== Shared container rule for denki/p-footer__tel/denki-footer__inner ===== */
.denki .l-container,
.p-footer__tel .l-container,
.denki-footer__inner {
  max-width: 1110px;
  margin: 0 auto;
}

.denki .l-container {
  padding: 0 16px;
}

.denki-footer-terms {
  text-align: center; /* or center */
  margin-top: 16px;
  font-size: 1.2rem;
  color: var(--color-text-wh); 
  text-shadow:
    0 0 3px rgba(0,0,0,0.7),
    0 0 6px rgba(0,0,0,0.7),
    0 0 10px rgba(0,0,0,0.75);
}
.denki-footer-terms a {
  text-decoration: underline;
}
.denki-footer__bottom {
  /* 既存に加えて */
  padding-top: 24px;
}
.denki-footer__divider {
  margin: 12px auto 16px;
  max-width: 960px;
  border: 0;
  border-top: 1px solid var(--border-light);
}
.denki-footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* --------------------------------------------------------------
  3) Utilities
-------------------------------------------------------------- */
._flex { display: flex; }
._ac   { align-items: center; }
._jc   { justify-content: space-between; }

._tac  { text-align: center; }

.fs-small { font-size: .9rem; }

/* SP/PC visibility */
._spHide { display: block; }
._pcHide { display: none; }

@media (max-width: 767px) {
  ._spHide { display: none; }
  ._pcHide { display: block; }
}
/* --------------------------------------------------------------
   3.1) Block editor basics (denki pages only)
   - columns / group / image / table
-------------------------------------------------------------- */

/* ブロック要素の上下マージン */
.denki .content .wp-block-group,
.denki .content .wp-block-columns,
.denki .content .wp-block-image,
.denki .content .wp-block-table {
  margin: 32px auto;}

/* denki-note-grid だけ上書き */
.denki-note-grid .wp-block-group,
.denki-note-grid .wp-block-columns,
.denki-note-grid .wp-block-image,
.denki-note-grid .wp-block-table {
  margin-top: 0;
  margin-bottom: 0;
} 

/* Columns */
.denki .content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.denki .content .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

/* SP では縦積み */
@media (max-width: 767px) {
  .denki .content .wp-block-columns {
    flex-direction: column;
  }
}
/* ▼ Columns：SP で 2 列表示にする（汎用） */
@media (max-width: 767px) {

  .denki .content .wp-block-columns {
    flex-wrap: wrap;
    flex-direction: row !important; /* 縦積みを上書き */
    row-gap: 20px;
    column-gap: 24px;
  }

  .denki .content .wp-block-columns > .wp-block-column {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 画像ブロック */
.denki .content figure.wp-block-image {
  text-align: center;
}

.denki .content figure.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* テーブルブロック */
.denki .content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}

.denki .content .wp-block-table th,
.denki .content .wp-block-table td {
  padding: 8px 10px;
  border: 1px solid #ddd;
  font-size: .95rem;
}

.denki .content .wp-block-table th {
  background: #f7f5ed;
  font-weight: 600;
}

/* （必要なら）中央寄せ aligncenter の対応 */
.denki .content .wp-block-table.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------
  4) Buttons
-------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 16px;
  line-height: 1;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-outline {
  background: #fff;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}


/* --------------------------------------------------------------
  5) Icons
-------------------------------------------------------------- */
.material-icons-round {
  line-height: 1;
  vertical-align: middle;
}
/* ----------------------------------------------------------------------
  3) Header (simple)
---------------------------------------------------------------------- */
.denki .p-header{
  background:#fff;
  border-bottom:1px solid var(--border-light);
  position: fixed;          /* ← 常に上部固定（sticky→fixed） */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;            /* pagetop(>1000) より上 */
  transition: box-shadow .2s ease, background-color .2s ease;
}

/* reserve space under fixed header (prevents breadcrumb from being hidden) */
.p-header__spacer{
  height: 90px; /* must match .p-header__headerBox min-height (PC) */
}
@media (max-width:767px){
  .p-header__spacer{
    height: 85px; /* must match .p-header__headerBox min-height (SP) */
  }
}

/* スクロール時に影を付けて段差を明確に */
.denki .p-header.is-scrolled{
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  
}
.denki .p-header__headerBox
{ display:flex; align-items:center; justify-content:space-between; gap:16px; } /* gap:16に統一 */
.denki .p-header .l-container{ padding: 0 16px; }
.denki .p-header__headerBox{ min-height: 64px; }
.denki .p-header__headerBox__logo img{ display:block; width:220px; height:auto; }
@media (max-width:767px){ .denki .p-header__headerBox__logo img{ width:56vw; } }

/* duo logos */
.denki .p-header__headerBox__logo .denki-logo-main{
  display:block; width:180px; height:auto; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));
}
.denki .p-header__headerBox__miraie img{
  display:block; width:120px; height:auto; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));
}
@media (max-width:767px){
  .denki .p-header__headerBox{ gap:10px; }
  .denki .p-header__headerBox__logo .denki-logo-main{ width:48vw; }
  .denki .p-header__headerBox__miraie img{ width:26vw; }
  /* SP: ヘッダーをよりタイトに */
  .denki .p-header .l-container{ padding: 0 12px; }
  .denki .p-header__headerBox{ min-height: 56px; }
  .denki .p-header__headerBox__logo .denki-logo-main{ width: 44vw; }
  .denki .p-header__headerBox__miraie img{ width: 22vw; }
}

/* nav (desktop) */
.denki .p-header__headerBox__navList{ margin-left:auto; }
.denki .p-header__headerBox__navList>ul{ display:flex; gap:20px; align-items:center; }
.denki .p-header__headerBox__navList a{
text-decoration:none;
color:var(--color-text);
display:inline-flex;
align-items:center;
gap:.3em;
}
/* dropdown */
.denki .p-header__headerBox__hasChild,
.denki .p-header__headerBox__navList__hasChild{ position:relative; }
.denki .p-header__headerBox__navList__dropdown{
  position:absolute; left:0; top:100%; min-width:180px; background:#fff; border:1px solid var(--border-light);
  border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.08); padding:8px 0; display:none; z-index:1000;
}
.denki .p-header__headerBox__navList__dropdown li{ white-space:nowrap; }
.denki .p-header__headerBox__navList__dropdown a{ display:block; padding:10px 14px; }
.denki .p-header__headerBox__navList__dropdown a:hover{ background:#f8f8f8; }
@media (min-width:768px){
  .denki .p-header__headerBox__navList__hasChild:hover>.p-header__headerBox__navList__dropdown{ display:block; }
}

.denki .p-header__headerBox__humbergerBox{
  display:none;
  width:48px;
  height:48px;
  cursor:pointer;
  position:relative;
  -webkit-tap-highlight-color: transparent;
  /* ▼ 既定のボタン“枠/背景”を消す（最小変更） */
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
}
.denki .p-header__headerBox__humbergerBox__icon,
.denki .p-header__headerBox__humbergerBox__icon:before,
.denki .p-header__headerBox__humbergerBox__icon:after{
  content:""; position:absolute; left:10px; right:10px; height:2px; background:#333; transition:.25s;
}
.denki .p-header__headerBox__humbergerBox__icon{ top:50%; transform:translateY(-50%); }
.denki .p-header__headerBox__humbergerBox__icon:before{ top:-8px; }
.denki .p-header__headerBox__humbergerBox__icon:after{ top:8px; }
@media (max-width:767px ){
  .denki .p-header__headerBox__humbergerBox{ display:block; }
  .denki .p-header__headerBox__navList{
    position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid #eee; display:none;
  }
  .denki .p-header__headerBox__navList>ul{ display:block; padding:8px 0; }
  .denki .p-header__headerBox__navList li{ border-bottom:1px solid #f3f3f3; }
  .denki .p-header__headerBox__navList li:last-child{ border-bottom:0; }
  .denki .p-header__headerBox__navList a{ display:block; padding:14px 16px; }
  .denki .p-header.is-open .p-header__headerBox__navList{ display:block; }
  .denki .p-header.is-open .p-header__headerBox__humbergerBox__icon{ background:transparent; }
  .denki .p-header.is-open .p-header__headerBox__humbergerBox__icon:before{ transform:translateY(8px) rotate(45deg); }
  .denki .p-header.is-open .p-header__headerBox__humbergerBox__icon:after{ transform:translateY(-8px) rotate(-45deg); }
  .denki .p-header__headerBox__navList__dropdown{
     position:static; border:0; box-shadow:none; padding:0; display:none;
     position:absolute; left:0; top:100%; min-width:180px; background:#fff; border:1px solid var(--border-light);
    }
  }

/* header deps (from global minimal) */
.header_content{ display:flex; align-items:center; gap:12px; }
.header .hamburger_open{ display:block; }
.header.menuOpen .hamburger_open{ animation:fadeOut .3s ease 0s both; }
.header.menuOpen .hamburger_close{ display:block; animation:fadeIn .3s ease 0s both; }

/* ----------------------------------------------------------------------
  4) Breadcrumb (左寄せ・メイン幅内)
---------------------------------------------------------------------- */
#denki .breadcrumb .content_inner{ max-width:1110px; margin:0 auto; padding:0 16px; }

/* 左寄せかつ折り返し調整 */
#denki .breadcrumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:flex-start; text-align:left; list-style-position:outside;
}
#denki .breadcrumb li{ display:flex; align-items:center; }
/* 区切り (Material Icons Round の chevron_right) */
#denki .breadcrumb li:not(:last-child){ position:relative; margin-right:2em; }
#denki .breadcrumb li:not(:last-child)::after{
  content:"\e5e1"; font-family:"Material Icons Round"; position:absolute; top:50%; right:-1.5em; transform:translateY(-50%);
  line-height:1; vertical-align:middle;
}
#denki .breadcrumb li a,
#denki .breadcrumb li p{ white-space:nowrap; }
#denki .breadcrumb li p{ overflow:hidden; text-overflow:ellipsis; }

/* ----------------------------------------------------------------------
  5) Hero (静止画→後日動画差替え)
---------------------------------------------------------------------- */
.denki-hero{ position:relative; overflow:hidden; contain:layout paint; }
.denki-hero__bg{ position:relative; aspect-ratio:1280/720; background:#eaf6ff; }
.denki-hero__image,
.denki-hero__video{ width:100%; height:100%; object-fit:cover; display:block; }

/* オーバーレイ装飾（PNG/SVG） */
.denki-hero__decor>img,
.denki-hero__marks>img{
  position:absolute; display:block; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.12)); /* 素材側に影を焼かない */
}

.denki-hero{
  --sun-vw: 20vw;     /* 基本の相対サイズ（画面幅に対する割合） */
  --sun-max: 380px;   /* 最大サイズ（上限） */
}

  /* 中央ロゴ＋サブロゴをまとめたブロック */
  .denki-hero__logoBlock {
    position: absolute;
    left: 50%;
    top: 12%;                 /* PC 基準の縦位置（必要なら調整） */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;                /* 吹き出しとサブロゴの間の余白 */
    text-align: center; 
  }
  
  /* 中央の特別バルーン（二層）本体は「サイズだけ」管理 */
  .denki-hero__marks .balloon.center {
    position: relative;
    width: min(30vw, 320px);
    transform: none;
    animation: pop-center .45s ease .4s both;
  }

  .denki-hero__marks .balloon.center .balloon-inner {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68%;
    height: auto;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,.12));
  }

  /* サブロゴは普通のブロック要素として扱う */
  .denki-hero__sublogo {
    position: static;
    text-align: center;
  }

  .denki-hero__sublogo img {
    display: block;
    max-width: 460px;
    width: 56vw;
  }

  .denki-hero__sublogo p {
    margin: 4px 0 0;
    font-size: 0.9rem;
  }

  @media (max-width:767px){
    .denki-hero{
      --sun-vw:26vw;
      --sun-max:170px;
    }
  }
/* sun & clouds */
.denki-hero__decor .sun{
  top:3%;
  left:10%;
  width:min(var(--sun-vw), var(--sun-max)); /* ← ここでサイズ制御 */
  animation:sun-pop .6s ease .2s both, sun-rotate 40s linear infinite;
}
.denki-hero__decor .cloud.c1{ top:16%; left:22%; width:min(16vw,220px); animation:cloud-float 12s ease-in-out infinite .8s; }
.denki-hero__decor .cloud.c2{ top:26%; left:64%; width:min(18vw,260px); animation:cloud-float 14s ease-in-out infinite 1.2s; }

/* ---- Bird size knobs (match static image scale) ---- */
.denki-hero{
  --bird-width-pc: 230px;   /* PC時の見た目サイズ。必要に応じて調整 */
  --bird-width-sp: 150px;   /* SP時の見た目サイズ。必要に応じて調整 */
  --bird-scale: .85;       /* 補正用スケール（そのままでOK。画像差替え時のみ微調整） */
}
@media (min-width:768px){
  .denki-hero{ --bird-width: var(--bird-width-pc); }
}
@media (max-width:767px){
  .denki-hero{ --bird-width: var(--bird-width-sp); }
}

/* birds（右→左に移動：単体）-------------------------------------- */
/* 画面右の外から左の外へ通過。少し下＆ひと回り小さく */
@keyframes bird-move {
  from { transform: translateX(120vw) scale(var(--bird-scale)); } /* 右の外 */
  to   { transform: translateX(-20vw) scale(var(--bird-scale)); } /* 左の外 */
}
@keyframes bird-bob {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -20px; }
}
/* 初期位置は左オフセットを基準に、transform で右→左へ流す */
.denki-hero__decor .bird{
  top: 38%;              /* もう少し下を飛ぶ */
  left: -15vw;           /* 左側の基準点（ここから transform で動く） */
  width: var(--bird-width);        /* ← ここだけ触ればサイズ調整可 */
  opacity: 0;
  transform: translateX(120vw) rotateY(180deg) scale(var(--bird-scale));
  --dur: 28s;
  --bob: 4.2s;
}
.denki-hero.is-inview .denki-hero__decor .bird{
  opacity: 1;
  animation:
    bird-move var(--dur) linear infinite,
    bird-bob  var(--bob) ease-in-out infinite;
}

/* logo / balloons — PC基準のレイアウトのみ残す（重複削除済） */
.denki-hero__marks .mark-main{
  left:50%; top:18%; width:min(36vw,520px); transform:translateX(-50%); animation:pop .45s ease .25s both;
}
.denki-hero__marks .mark-mirai{ left:8%; top:3%; width:min(12vw,140px); animation:pop .45s ease .35s both; }
.denki-hero__marks .balloon.b1{ left:2%; top:55%; width:min(14vw,110px); animation:bob 5.6s ease-in-out infinite; }
.denki-hero__marks .balloon.b2{ left:14%; top:58%; width:min(14vw, 130px); animation:bob 6.2s ease-in-out infinite .6s; }
.denki-hero__marks .balloon.b3{ left:23%; top:40%; width:min(13vw,140px); animation:bob 5.6s ease-in-out infinite; }
.denki-hero__marks .balloon.b4{ left:38%; top:65%; width:min(12.5vw,165px); animation:bob 6.0s ease-in-out infinite .3s; }
.denki-hero__marks .balloon.b5{ left:65%; top:60%; width:min(13vw,170px); animation:bob 6.2s ease-in-out infinite .6s;}
.denki-hero__marks .balloon.b6{ left:80%; top:43%; width:min(12vw,160px); animation:bob 5.6s ease-in-out infinite; }


/* クリック貫通 */
.denki-hero__decor>img,
.denki-hero__marks>img,
.denki-hero__marks .balloon.center{ pointer-events:none; }



/* ----------------------------------------------------------------------
  7) Sticky banner / Back-to-top
---------------------------------------------------------------------- */
/* keyframes (共通) */
@-webkit-keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadeOut{from{opacity:1;}to{opacity:0;}}
@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}

/* pagetop */
.pagetop{
  z-index:1000; position:fixed; transition:opacity .25s ease,bottom .3s;
  display:inline-block; opacity:0; pointer-events:none; /* 非表示時無効 */
}
.pagetop img{ width:100%; }
.pagetop.is-show{ opacity:1; pointer-events:auto; }
.pagetop.absolute{ position:absolute; opacity:1; }
.pagetop.fadeIn{ -webkit-animation:fadeIn .3s ease 0s both; animation:fadeIn .3s ease 0s both; }
.pagetop.fadeOut{ -webkit-animation:fadeOut .3s ease 0s both; animation:fadeOut .3s ease 0s both; }

@media (min-width:768px){
  .pagetop{ width:80px; right:20px; bottom:35px; }
}
@media (max-width:767px){
  .pagetop{ width:11.7333333333vw; right:4vw; bottom:calc(env(safe-area-inset-bottom,0px) + 4vw); }
  .pagetop.absolute{ bottom:26.6666666667vw; }
}

/* sticky banner container */
.sticky-banner{
  position:fixed; z-index:1000; right:-10px; top:50%; transform:translateY(-50%);
  transition:opacity .25s ease, visibility .25s ease;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .12));
}
.sticky-banner:not(.is-visible){ opacity:0; visibility:hidden; pointer-events:none; }
.sticky-banner.is-visible{ opacity:1; visibility:visible; pointer-events:auto; }
.sticky-banner.fadeIn{ animation:fadeIn .3s ease 0s both; opacity:1; }
.sticky-banner.fadeOut{ animation:fadeOut .3s ease 0s both; }

/* PC: 縦長バナー */
.sticky-banner__link picture{ display:block; }
.sticky-banner__btn{ display:none; }

/* SP: 下部 pill ボタン（pagetop と横並び） */
@media (max-width:767px){
  .sticky-banner{
    left:4vw;
    right:calc(4vw + 13.8vw); /* pagetop(約11.73vw) + 余白 ~2vw */
    top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 4vw); transform:none;
  }
  .sticky-banner__link picture{ display:none; }
  .sticky-banner__btn{
    display:inline-flex; align-items:center; justify-content:center; width:100%;
    gap:.5rem; padding:3.2vw 4vw; line-height:1;
    border-radius:999px; font-weight:700;
    background:#c45d47; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.15);
  }
  .sticky-banner__btn .material-icons-round,
  .sticky-banner__btn i{ font-size:1.25em; line-height:1; }
}
/* pagetop が被る場合の前後関係 */
a.pagetop{ z-index:1100; }

/* ----------------------------------------------------------------------
  8) Footer (電話 / コピーライト / CTA)
---------------------------------------------------------------------- */

/* 問合せ電話帯（共通パーツ） */
.p-footer__tel {
  background: #f7f5ed;
  border-top: 1px solid var(--border-light);
}
.p-footer__tel .l-container {
  padding: 24px 16px;
}
.p-footer__tel__inner {
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  text-align: center;
}
.p-footer__tel__numberBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.p-footer__tel__numberBox__title {
  color: var(--color-muted);
}
.p-footer__tel__numberBox__number a {
  font-size: 32px;
  font-weight: 800;
  text-decoration: none;
  color: var(--color-primary);
  letter-spacing: .02em;
}
.p-footer__tel__notice {
  color: var(--color-muted);
}

/* 背景付きフッター本体（CTA〜フッターメニューのゾーン） */
.denki-footer {
  text-align: center;
  padding: 0;
  background: transparent;
}

/* 背景画像を <img> で全体表示 */
.denki-footer__bg {
  position: relative;
}

.denki-footer__bgImage {
  display: block;
  width: 100%;
  height: auto;  /* 画像の比率で高さが決まる（＝上下全部見える） */
}

/* 画像の上にコンテンツを重ねるレイヤー */
.denki-footer__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* 既存の max-width ルールに padding を足すイメージ */
.denki-footer__inner {
  padding: 40px 16px 32px;
}
/* 一番下の白帯ロゴエリア（背景画像の外側） */
.denki-footer__bottom {
  margin-top: 0;
  padding: 16px 16px 24px;
  background: #fff;
  border-top: 1px solid var(--border-light);
}
/* 2つのロゴを横並びセンター揃えに */
.denki-footer .footer_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 8px 0;
}

/* ロゴ画像の基本サイズ */
.denki-footer .footer_logo img {
  display: block;
  margin: 0;
  height: 44px;
  width: auto;
}

/* CO・COでんきロゴを少し大きく、未来ロゴを少し小さめにする場合 */
.denki-footer .footer_logo .denki-logo-main {
  height: 48px;
}

.denki-footer .footer_logo .denki-logo-mirai {
  height: 40px;
}

/* SP はちょい小さく */
@media (max-width: 767px) {
  .denki-footer .footer_logo .denki-logo-main {
    height: 40px;
  }
  .denki-footer .footer_logo .denki-logo-mirai {
    height: 34px;
  }
}
.denki-footer .parent-link,
.denki-footer .parent-link p {
  margin: 20px 0;
}
.denki-footer .copyright {
  display: block;
  margin-top: 8px;
}

/* CTA 行（資料請求＋問い合わせ先） */
.p-denki-cta {
  background: transparent;      /* 背景はフッター画像に任せる */
  border-top: none;
  padding: 32px 0 16px;
}
.p-denki-cta .l-container {
  padding: 0 16px;
}

/* LP 下部の2枚カードを縦に積む（PC/SP 共通） */
.p-denki-cta__row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 各カード（資料請求／お問い合わせ） */
.p-denki-cta__card {
  background: rgba(255, 255, 255, .7);  /* 白70%くらい透過 */
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: 24px 24px;
}

/* カード内：タイトル＋リード＋ボタン */
.p-denki-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}
/* 共通のセクションタイトル */
.denki-section-title {
  font-size: 22px;
  line-height: 1.3;
  margin: 0;
  color: var(--color-text);
  font-weight: 700;
}
.p-denki-cta__lead {
  margin: 0;
  color: var(--color-text-sub);
}

/* 電話カード用：上のカードと同じ縦リズムに合わせる */
.p-denki-cta__tel {
  margin: auto;
}
.p-denki-cta__tel-number {
  font-size: 45px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--color-primary);

}
.p-denki-cta__tel a {
  font-size: 45px;
  font-weight: 800;
  text-decoration: none;
  color: var(--color-primary);
  letter-spacing: .02em;
}
.p-denki-cta__notice {
  margin: 0;
  color: var(--color-muted);
}
.p-footer__tel__label {
  margin: 0;
  color: var(--color-muted);
}

.p-denki-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.p-denki-cta__btn {
  min-width: 220px;
  justify-content: center;
}

/* Responsive for footer blocks */
@media (max-width: 767px) {
  /* 問い合わせTEL */
  .p-footer__tel .l-container {
    padding: 20px 12px;
  }
  .p-footer__tel__inner {
    gap: 12px;
  }
  .p-footer__tel__numberBox__number a {
    font-size: 7.2vw;
  }
  .p-denki-cta__tel a {
    font-size: 7.2vw;
  }

  /* CTA カード */
  .p-denki-cta {
    padding: 28px 0 12px;
  }
  .p-denki-cta .l-container {
    padding: 0 12px;
  }
  .p-denki-cta__card {
    padding: 20px 16px;
  }
  .denki-section-title,
  .p-denki-cta__title,
  .p-footer__tel__title {
    font-size: 5.6vw;
  }
  .p-denki-cta__btn {
    flex: 1 1 100%;
  }

  /* SP フッター：高さ控えめ＋センター基準そのまま */
 /* フッター全体の余白 */
 .denki-footer {
  padding: 0;
}

/* SP は背景を CSS 側で cover 表示に戻す */
.denki-footer__bg {
  background-image: url('../images/service/denki/bgr_footer.jpg');
  background-size: cover;
  background-position: left bottom;
}
/* PC 用の <img> は SP では非表示 */
.denki-footer__bgImage {
  display: none;
}
/* オーバーレイは通常フローに戻す */
.denki-footer__overlay {
  position: static;
}

.denki-footer__inner {
  padding: 28px 12px 24px;
}
.denki-footer__bottom {
  padding: 12px 12px 20px;
}
}  
  /* =========================================================
   Hero balloons as groups: base + inner logo (center sync)
   - <div class="balloon bN"> 内に
     <img class="balloon-base"> と <img class="balloon-inner">
   - 位置（left/top/width）は既存の .balloon.b1..b6 ルールが効く
   - 下の --inner を吹き出し別に微調整可能
========================================================= */

/* 見た目/重なり：単体imgと同じ影・クリック貫通 */
.denki-hero__marks > img,
.denki-hero__marks  > .balloon {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12));
  pointer-events: none; /* 装飾なのでクリックを奪わない */
}

/* グループ内部：ベースは100%、ロゴは中央にフィット */
.denki-hero__marks .balloon .balloon-base {
  display: block;
  width: 100%;
  height: auto;
}

/* 中央ロゴの共通サイズ（%指定で各バルーンに追従） */
.denki-hero__marks .balloon {
  --inner: 60%;           /* デフォ：ロゴの幅 */
  --inner-offset: 0;      /* 必要なら微調整（px/%) */
  --inner-x: 0;        /* ← 左右追加 */
}
.denki-hero__marks .balloon .balloon-inner {
  position: absolute;
  inset: 0;
  width: var(--inner);
  height: auto;
  margin: auto;
  transform: translate(var(--inner-x), var(--inner-offset));
}

/* 吹き出し別のロゴ縮尺微調整（必要に応じて変えてOK） */
.denki-hero__marks .balloon.b1 { --inner: 54%; --inner-offset: 3px; --inner-x: -8px;}
.denki-hero__marks .balloon.b2 { --inner: 56%; --inner-offset: -25px; }
.denki-hero__marks .balloon.b3 { --inner: 56%; --inner-offset: -8px; }
.denki-hero__marks .balloon.b4 { --inner: 46%; --inner-offset: 1px; --inner-x: 6px;}
.denki-hero__marks .balloon.b5 { --inner: 54%; --inner-offset:-20px; }
.denki-hero__marks .balloon.b6 { --inner: 54%; --inner-offset: 10px; }


/* 既存のbobアニメは .balloon.bN にそのまま効く（divでもOK） */
/* ----------------------------------------------------------------------
  9) Small motions (hero)
---------------------------------------------------------------------- */
@keyframes pop{ from{opacity:0; transform:translate(-50%,-6px) scale(.98);} to{opacity:1; transform:translate(-50%,0) scale(1);} }
@keyframes sun-pop{ from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }
@keyframes sun-rotate{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@keyframes cloud-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

/* 動きを好まないユーザー */
@media (prefers-reduced-motion:reduce){
  .denki-hero__decor img,
  .denki-hero__marks img{ animation:none !important; }
}

/* ----------------------------------------------------------------------
  5.1) Hero — SP overrides (single, consolidated)
  - 背景をセンター基準でわずかに縮小
  - センターロゴを小さく＆上に
  - 他の吹き出しはSPで非表示（視認性優先）
---------------------------------------------------------------------- */
@media (max-width:767px){
  /* 背景：縦長＋センター基準縮小（余白が出にくい安全値） */
  .denki-hero__bg{
    aspect-ratio: 3 / 3;
  }
  .denki-hero__image{
    object-position: 50% 24%;
    transform-origin: 50% 22%;
  }

  /* 中央ロゴ＋サブロゴのブロック全体を少し上に */
  .denki-hero__logoBlock {
    top: 20%;
    gap: 8px;
  }

  /* センターロゴ（角丸）は親の中で相対サイズだけ調整 */
  .denki-hero__marks .balloon.center{
    width: 62vw;
  }

  .denki-hero__sublogo img {
    width: 68vw;
    max-width: none;
  }

  .denki-hero__sublogo p {
    font-size: 0.85rem;
  }

  /* みらいへコープ（左上） */
  .denki-hero__marks .mark-mirai{
    top: 2.5%;
    left: 15%;
    width: 20vw;
  }

  /* 吹き出し群はSPでは非表示（センターのみ残す） */
  .denki-hero__marks .balloon:not(.center){
    display: none !important;
  }
}

/* --- Point ribbons (entry content friendly / overlap hero) --- */
.denki-point-ribbons{
  /* ヒーローにかぶせる（上方向へ重ねる） */
  --overlap: 80px;                 /* PCのかぶせ量：適宜調整 */
  margin: calc(-1 * var(--overlap)) auto 8px;
  position: relative;
  z-index: 6;                       /* ヒーロー前景より上に */
  text-align: center;
}
.denki-point-ribbons .ribbon-row{
  max-width: 720px;                    /* ← 全体幅を約720pxに */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;                            /* ← すこし詰める（必要なら 12px でもOK） */
  align-items: start;
  justify-items: center;
}

.denki-point-ribbons .ribbon{ width: 100%; }
.denki-point-ribbons .ribbon img{
  display: block;
  width: 100%;                          /* コンテナにフィット */
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.12));
}


/* SPは被せ量控えめ＆1列 */
@media (max-width: 767px){
  .denki-point-ribbons{ --overlap: 56px; margin: calc(-1 * var(--overlap)) auto 8px; }
  .denki-point-ribbons .ribbon-row{ max-width: 92vw; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* --- 4 benefits grid --- */
.denki-benefits{ padding: 48px 0 24px; text-align:center; }
.denki-benefits h2{ font-size: clamp(20px, 2.6vw, 28px); margin: 0 0 18px; }
.benefit-grid{
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 920px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px;
}
.benefit-grid .benefit img{ display:block; width:min(160px, 24vw); height:auto; margin: 0 auto 8px; }
.benefit-grid .benefit p{ margin: 0; }

@media (max-width: 1024px){
  .benefit-grid{ grid-template-columns: repeat(2, 1fr); gap: 22px 8px; }
}
@media (max-width: 560px){
  .benefit-grid{ grid-template-columns: 1fr 1fr; }
  .benefit-grid .benefit img{ width: 36vw; }
}

/* --- pop-in on scroll (reuses existing js observer hook) --- */
.js-pop{ opacity: 0; transform: translateY(12px) scale(.98); transition: .45s ease; }
.is-inview .js-pop,
.js-pop.is-inview{ opacity: 1; transform: translateY(0) scale(1); }

/* 電気・子ページ用サブヒーロー */
.p-denki-subhero {
  width: 100%;
  height: 560px; /* PC 基準で 560px */
  background: url('../images/service/denki/hero-bg_child.jpg')
              no-repeat center bottom;
  background-size: cover;
  display: flex;
  flex-direction: column;   /* ★ 追加：縦並びにする */
  align-items: center;      /* 中央寄せ */
  justify-content: center;  /* 中央寄せ */
  text-align: center;
  padding: 0 16px;
}

/* タイトル＋リードの共通幅（横にダラっと広がらないように） */
.p-denki-subhero__title,
.p-denki-subhero__lead {
  max-width: 640px;         /* 好きな値に調整してOK */
  margin-left: auto;
  margin-right: auto;
}

/* タイトル */
.p-denki-subhero__title {
  font-size: clamp(24px, 3vw, 34px);
  color:var(--color-text);
  font-weight: 700;
  text-shadow:
  0 0 2px rgba(255,255,255,0.9),
    0 0 3px rgba(255,255,255,0.9),
    0 0 6px rgba(255,255,255,0.8),
    0 0 10px rgba(255,255,255,0.9);
}

@media (max-width: 767px) {
  .p-denki-subhero {
    height: 320px; /* お好みで 280〜360 の間くらい */
    padding: 0 12px;
  }
}

/* リードテキスト */
.p-denki-subhero__lead {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-sub);
  text-shadow:
  0 0 2px rgba(255,255,255,0.9),  
  0 0 3px rgba(255,255,255,1),
    0 0 6px rgba(255,255,255,0.9),
    0 0 10px rgba(255,255,255,0.9);
}

/* タイトル＋リードのラッパ（使うならそのまま） */
.p-denki-subhero__inner {
  max-width: 640px;
  margin: 0 auto;
}
/* 電気・プラン吹き出し行 */
.denki .denki-plan-bubbles{
  margin: 40px auto 32px;
}

/* 吹き出し共通 */
.denki .denki-plan-bubble{
  position: relative;
  max-width: 340px;
  margin: 0 auto;

  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 36px 24px 28px;

  transition: transform .25s ease, box-shadow .25s ease;
}

.denki .denki-plan-bubble:hover{
  transform: translateY(-4px) scale(1.02);
}

/* 背景吹き出し画像：AI から書き出したSVG/PNGに差し替え */
.denki .denki-plan-bubble--basic{
  background-image: url('../images/service/denki/balloon-basic.svg');
  /*color: #007ac7;  文字色も青系に揃えるなら */
}
.denki .denki-plan-bubble--many{
  background-image: url('../images/service/denki/balloon-many.svg');
  color: #2e9f25;
}

/* 中身のテキスト */
.denki .denki-plan-bubble h2,
.denki .denki-plan-bubble h3,
.denki .denki-plan-bubble h4{
  margin: 0 0 4px;
  font-size: 1.25rem;
}
.denki .denki-plan-bubble p{
  margin: 0;
  font-size: .9rem;
}

/* SP 調整 */
@media (max-width: 767px){
  .denki .denki-plan-bubble{
    max-width: 92vw;
    padding: 28px 18px 24px;
  }
}

/* =========================================================
   FAQ accordion (detailsブロック活用)
   - JS不要・details標準開閉
   - denkiページだけに作用
========================================================= */

/* FAQ ラッパー */
.denki .denki-faq {
  margin: 40px auto;
  text-align: left;
}

/* 各FAQ アイテム */
.denki .denki-faq__item {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px 20px;
  background: #fff;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

/* summary（質問行） */
.denki .denki-faq__item > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: 4px 0;
  outline: none;
}

/* summary のデフォルト三角アイコンを非表示 */
.denki .denki-faq__item > summary::-webkit-details-marker {
  display: none;
}

/* 質問行にアイコン風の ▸ を付ける */
.denki .denki-faq__item > summary::before {
  content: "▸";
  font-size: .9em;
  color: var(--color-primary);
  transition: transform .25s ease;
}

/* open 時：矢印回転 */
.denki .denki-faq__item[open] > summary::before {
  transform: rotate(90deg);
}

/* 回答エリア */
.denki .denki-faq__a {
  margin-top: 10px;
  padding-top: 10px;
  color: var(--color-text-sub);
  border-top: 1px dashed var(--border-light);
}

/* =========================================================
   電気を選ぶ：メモカードグリッド
   - 外側 Group に .denki-note-grid を付与して使用
   - コルク背景は 100vw の帯として敷く
========================================================= */

/* content_inner-small 直下の .denki-note-grid の上下余白 */
body.denki .content_inner-small > .denki-note-grid {
  margin: 16px 0 0px;  /* 上少し・下は詰め気味に */
}

/* コルク帯ベース */
.denki-note-grid {
  position: relative;
  overflow: visible;
}

/* 画面幅いっぱいのコルク背景（擬似要素で敷く） */
.denki-note-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: url('../images/service/denki/bgr_cork.png') center / cover no-repeat;
}

/* 内側のインナー：中央寄せ＋幅制限＋縦余白 */
.denki-note-grid .wp-block-group__inner-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  text-align: center;
}

/* =========================================
   denki-note-grid 内のブロック間余白調整
========================================= */

/* グローバル 32px マージンを打ち消し（denki-note-grid 内だけ） */
.denki .content .denki-note-grid .wp-block-group,
.denki .content .denki-note-grid .wp-block-columns,
.denki .content .denki-note-grid .wp-block-image,
.denki .content .denki-note-grid .wp-block-table {
  margin-top: 0;
  margin-bottom: 0;
}
/* 上段・下段カラム：横 gap だけ活かす */
.denki-note-grid .wp-block-columns {
  gap: 16px 20px;
}

/* 上段と下段カラムの間だけ少し余白 */
.denki-note-grid .wp-block-columns + .wp-block-columns {
  margin-top: 14px;
}

/* カラム内の中身を中央寄せ */
.denki-note-grid .wp-block-column {
  display: flex;
  justify-content: center;
}

/* 各カラム直下の Group を「メモカード」にする */
.denki-note-grid .wp-block-column > .wp-block-group {
  background: url('../images/service/denki/memo.png') center top / contain no-repeat;
  width: 100%;
  max-width: 260px;        /* 3列・2列のサイズ統一 */
  padding: 40px 24px 32px; /* 上の余白でテキスト位置調整（もっと上げたければ 32〜36 くらいに） */
  min-height: 90px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* メモ内テキストの余白リセット */
.denki-note-grid .wp-block-column > .wp-block-group p {
  margin: 0;
}

/* =========================================
   SP 調整
========================================= */
@media (max-width: 767px) {
  .denki-note-grid .wp-block-group__inner-container {
    padding: 32px 16px 40px;
  }

  .denki-note-grid .wp-block-columns {
    gap: 16px;
    margin-top: 0;
  }

  .denki-note-grid .wp-block-columns + .wp-block-columns {
    margin-top: 24px;
  }

  .denki-note-grid .wp-block-column > .wp-block-group {
    max-width: 100%;
    padding: 44px 16px 24px;
    min-height: 200px;
  }
}