/**
 * ENEGYM ハンバーガーメニュー（.drawer--v2）とフッター（.footer--v2）2026-10-07
 * 中身は functions.php の enegym_site_drawer() / enegym_site_footer()。全テンプレート共通。
 * 既存CSS（subpage-heavy / blog-common の .drawer・.footer、blog-common の .footer *{color:inherit !important} など）に
 * 負けないよう、二重クラスで詳しく指定し、色や書体は !important で固定している。
 */

/* ===================== ハンバーガーメニュー ===================== */
.drawer.drawer--v2{
  z-index:70 !important;                 /* 固定ヘッダー（50）より上。閉じるボタンはメニューの中に持つ */
  width:100% !important; max-width:none !important; height:100% !important;
  padding:calc(env(safe-area-inset-top, 0px) + 12px) 24px calc(env(safe-area-inset-bottom, 0px) + 26px) !important;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(255,156,0,.20), transparent 60%),
    radial-gradient(80% 40% at 0% 100%, rgba(233,135,0,.10), transparent 70%),
    #221b15 !important;
  box-shadow:none !important;
  overflow-y:auto; overscroll-behavior:contain;
  display:flex !important; flex-direction:column !important;
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.7,0,.2,1) !important;
}
.drawer.drawer--v2.open{ transform:translateX(0); }
body:has(.drawer--v2.open){ overflow:hidden; }   /* 開いている間は後ろのページを動かさない */

.drawer--v2 .dv2-top{ display:flex; align-items:center; justify-content:space-between; min-height:60px; }
.drawer--v2 .dv2-logo img{ height:46px !important; width:auto !important; display:block; margin:0 !important; }
.drawer--v2 .dv2-close{
  all:unset; box-sizing:border-box; cursor:pointer; position:relative;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.08); transition:background .2s, transform .3s;
}
.drawer--v2 .dv2-close span{ position:absolute; left:13px; top:22px; width:20px; height:2px; border-radius:2px; background:#fff; }
.drawer--v2 .dv2-close span:first-child{ transform:rotate(45deg); }
.drawer--v2 .dv2-close span:last-child{ transform:rotate(-45deg); }
.drawer--v2 .dv2-close:hover{ background:#ff9c00; transform:rotate(90deg); }
.drawer--v2 .dv2-close:focus-visible{ outline:3px solid #ff9c00; outline-offset:2px; }

.drawer--v2 .dv2-label{
  margin:26px 0 10px !important; padding:0 !important;
  font-family:"Oswald", sans-serif !important; font-size:12px !important; letter-spacing:.32em !important;
  color:rgba(255,255,255,.45) !important;
}
.drawer--v2 .dv2-list{ list-style:none !important; margin:0 !important; padding:0 !important; border-top:1px solid rgba(255,255,255,.12); }
.drawer--v2 .dv2-list li{ border-bottom:1px solid rgba(255,255,255,.12) !important; margin:0 !important; }
.drawer--v2 .dv2-list a{
  display:grid !important; grid-template-columns:38px 1fr auto; align-items:baseline; gap:0 8px;
  padding:18px 4px !important; text-decoration:none !important; color:#fff !important;
  transition:transform .25s ease, color .2s;
}
.drawer--v2 .dv2-no{ font-family:"Oswald", sans-serif !important; font-size:13px !important; color:#ff9c00 !important; letter-spacing:.06em; }
.drawer--v2 .dv2-jp{ font-size:22px !important; font-weight:900 !important; color:#fff !important; letter-spacing:.04em; line-height:1.3; }
.drawer--v2 .dv2-en{ font-family:"Oswald", sans-serif !important; font-size:12px !important; letter-spacing:.22em !important; color:rgba(255,255,255,.45) !important; }
.drawer--v2 .dv2-list a:hover{ transform:translateX(6px); }
.drawer--v2 .dv2-list a:hover .dv2-jp,
.drawer--v2 .dv2-list a[aria-current="page"] .dv2-jp{ color:#ff9c00 !important; }
.drawer--v2 .dv2-list a[aria-current="page"] .dv2-en::before{ content:"● "; color:#ff9c00; font-size:8px; vertical-align:2px; }
.drawer--v2 .dv2-list a:focus-visible{ outline:2px solid #ff9c00; outline-offset:-2px; border-radius:6px; }

.drawer--v2 .dv2-contact{ margin-top:6px; }
.drawer--v2 .dv2-lead{ margin:0 0 12px !important; font-size:13px !important; color:rgba(255,255,255,.75) !important; line-height:1.7 !important; }
.drawer--v2 .dv2-line,
.footer--v2 .fv2-line{
  display:flex !important; align-items:center; justify-content:center; gap:10px;
  min-height:54px; border-radius:999px; background:#06C755 !important; color:#fff !important;
  font-size:16px !important; font-weight:700 !important; letter-spacing:.06em; text-decoration:none !important;
  box-shadow:0 14px 30px -18px rgba(6,199,85,.9); transition:transform .2s, filter .2s;
}
.drawer--v2 .dv2-line img,
.footer--v2 .fv2-line img{ width:26px !important; height:26px !important; margin:0 !important; filter:brightness(10); }
.drawer--v2 .dv2-line:hover,
.footer--v2 .fv2-line:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.drawer--v2 .dv2-info{
  margin:16px 0 0 !important; padding:14px 16px !important; border-radius:14px;
  background:rgba(255,255,255,.05); display:grid; gap:6px;
}
.drawer--v2 .dv2-info div{ display:grid; grid-template-columns:62px 1fr; gap:10px; }
.drawer--v2 .dv2-info dt{ font-size:11.5px !important; font-weight:700 !important; color:rgba(255,255,255,.5) !important; padding-top:2px; }
.drawer--v2 .dv2-info dd{ margin:0 !important; font-size:13px !important; color:rgba(255,255,255,.9) !important; line-height:1.6 !important; }

.drawer--v2 .dv2-bottom{ margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.drawer--v2 .dv2-sns,
.footer--v2 .fv2-sns{ display:flex; gap:12px; }
.drawer--v2 .dv2-sns a,
.footer--v2 .fv2-sns a{
  width:42px; height:42px; border-radius:50% !important; display:flex !important; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1) !important; transition:background .2s, transform .2s;
}
.drawer--v2 .dv2-sns a img,
.footer--v2 .fv2-sns a img{ width:58% !important; height:58% !important; object-fit:contain; margin:0 !important; }
.drawer--v2 .dv2-sns a:hover,
.footer--v2 .fv2-sns a:hover{ background:#ff9c00 !important; transform:translateY(-3px); }
.drawer--v2 .dv2-pp{ font-size:12px !important; color:rgba(255,255,255,.6) !important; text-decoration:underline !important; text-underline-offset:3px; }

/* 開いたとき、項目が順番にすっと入ってくる */
.drawer--v2 .dv2-label,
.drawer--v2 .dv2-list li,
.drawer--v2 .dv2-contact,
.drawer--v2 .dv2-bottom{ opacity:0; transform:translateX(28px); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.drawer--v2.open .dv2-label,
.drawer--v2.open .dv2-list li,
.drawer--v2.open .dv2-contact,
.drawer--v2.open .dv2-bottom{ opacity:1; transform:none; }
.drawer--v2.open .dv2-list li:nth-child(1){ transition-delay:.16s; }
.drawer--v2.open .dv2-list li:nth-child(2){ transition-delay:.21s; }
.drawer--v2.open .dv2-list li:nth-child(3){ transition-delay:.26s; }
.drawer--v2.open .dv2-list li:nth-child(4){ transition-delay:.31s; }
.drawer--v2.open .dv2-contact{ transition-delay:.38s; }
.drawer--v2.open .dv2-bottom{ transition-delay:.44s; }
.drawer--v2.open .dv2-label{ transition-delay:.12s; }

/* PC：右から幅440pxで出す（左は暗い幕。押すと閉じる） */
@media screen and (min-width:769px){
  .drawer.drawer--v2{ width:440px !important; box-shadow:-20px 0 60px rgba(0,0,0,.45) !important; }
  .drawer-overlay{ z-index:65 !important; }
}

/* ===================== フッター ===================== */
.footer.footer--v2{
  position:relative; overflow:hidden; container-type:inline-size;
  background:#221b15 !important; color:#fff !important; text-align:left !important; padding:0 !important;
}
.footer.footer--v2::before{ content:""; display:block; height:4px; background:linear-gradient(90deg, #ff9c00, #e98700 55%, rgba(233,135,0,0)); }
.footer--v2 .fv2-inner{ position:relative; z-index:1; padding:44px 24px 26px; }
.footer--v2 .fv2-logo{ display:inline-block; }
.footer--v2 .fv2-logo img{ width:150px !important; height:auto !important; display:block; margin:0 !important; }
.footer.footer--v2 .fv2-tag{ margin:12px 0 0 !important; font-size:13px !important; color:rgba(255,255,255,.75) !important; letter-spacing:.06em; line-height:1.7 !important; }
.footer.footer--v2 .fv2-tag span{ margin-left:10px; color:rgba(255,255,255,.5) !important; }
.footer--v2 .fv2-line{ margin-top:22px; }
.footer--v2 .fv2-info{ margin:26px 0 0 !important; padding:0 !important; border-top:1px solid rgba(255,255,255,.12); }
.footer--v2 .fv2-info div{ display:grid; grid-template-columns:68px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.footer.footer--v2 .fv2-info dt{ font-size:12px !important; font-weight:700 !important; color:rgba(255,255,255,.55) !important; padding-top:1px; }
.footer.footer--v2 .fv2-info dd{ margin:0 !important; font-size:13.5px !important; color:rgba(255,255,255,.92) !important; line-height:1.7 !important; }
.footer.footer--v2 .fv2-info dd a{ display:inline-block; margin-top:4px; color:#ffc56f !important; text-decoration:underline !important; text-underline-offset:3px; font-size:12.5px !important; }
.footer--v2 .fv2-nav{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.footer.footer--v2 .fv2-nav a{
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  padding:12px 2px; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:13.5px !important; color:rgba(255,255,255,.88) !important; text-decoration:none !important; transition:color .2s;
}
.footer.footer--v2 .fv2-nav a::after{ content:"›"; color:#ff9c00; font-size:16px; }
.footer.footer--v2 .fv2-nav a:hover{ color:#ff9c00 !important; }
.footer--v2 .fv2-sns{ margin-top:24px; }
.footer.footer--v2 .fv2-copy{ margin:22px 0 0 !important; font-size:11px !important; letter-spacing:.12em; color:rgba(255,255,255,.5) !important; }
/* 一番下の大きなブランド文字（読み上げない飾り） */
.footer.footer--v2 .fv2-giant{
  margin:0 0 -0.16em -0.04em !important; padding:0 !important; white-space:nowrap; pointer-events:none; user-select:none;
  font-family:"Oswald", sans-serif !important; font-weight:700 !important; line-height:.82 !important; letter-spacing:.01em;
  font-size:110px !important; font-size:30cqw !important;
  color:transparent !important; -webkit-text-stroke:1px rgba(255,156,0,.38);
}

@media (prefers-reduced-motion: reduce){
  .drawer.drawer--v2,
  .drawer--v2 .dv2-label, .drawer--v2 .dv2-list li, .drawer--v2 .dv2-contact, .drawer--v2 .dv2-bottom,
  .drawer--v2 .dv2-list a, .drawer--v2 .dv2-close{ transition:none !important; }
}

/* ===================== 下層ページのFV（.lfv）2026-10-07 =====================
 * 中身は functions.php の enegym_lower_fv()。写真の背景＋左寄せの大きな英字＋日本語＋ひとこと、下端は斜め。
 * 写真はゆっくり寄りから引きへ、英字は下からせり上がる（動きを減らす設定の人には動かさない）。
 */
.lfv{
  position:relative; overflow:hidden; isolation:isolate; color:#fff; background:#221b15;
  min-height:340px; padding:94px 24px 58px;
  display:flex; flex-direction:column; justify-content:flex-end;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
}
.lfv.is-compact{ min-height:230px; padding-bottom:48px; }
/* 斜めの切り口の下に、すぐ下の色付き区画（料金表のオレンジ）を回り込ませる。FVを上に重ねる */
.lfv{ z-index:1; }
.lfv + .plan-page{ margin-top:-28px; padding-top:38px !important; }
.lfv-bg{
  position:absolute; inset:0; z-index:-1;
  background-image:var(--lfv-bg); background-size:cover; background-position:var(--lfv-pos, center);
  transform:scale(1.12); animation:lfvZoom 1.8s cubic-bezier(.2,.7,.2,1) forwards;
}
.lfv-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(34,27,21,.55) 0%, rgba(34,27,21,.25) 38%, rgba(34,27,21,.9) 100%),
    linear-gradient(90deg, rgba(34,27,21,.78) 0%, rgba(34,27,21,.15) 75%),
    radial-gradient(70% 50% at 0% 100%, rgba(255,156,0,.28), transparent 70%);
}
.lfv-in{ position:relative; max-width:560px; }
.lfv .lfv-kicker{ margin:0 0 10px !important; font-family:"Oswald", sans-serif !important; font-size:11px !important; letter-spacing:.32em !important; color:#ffb547 !important; opacity:0; animation:lfvFade .6s ease .15s forwards; }
.lfv .lfv-en{ margin:0 !important; overflow:hidden; line-height:.95 !important; padding-bottom:2px; }
.lfv .lfv-en span{
  display:inline-block; font-family:"Oswald", sans-serif !important; font-weight:700 !important;
  font-size:clamp(52px, 17vw, 78px) !important; letter-spacing:.04em; color:#fff !important; line-height:.95 !important;
  text-shadow:0 6px 30px rgba(0,0,0,.35); transform:translateY(105%); animation:lfvUp .85s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
.lfv.is-compact .lfv-en span{ font-size:46px !important; }
.lfv .lfv-jp{
  display:flex; align-items:center; gap:10px; margin:14px 0 0 !important;
  font-size:15px !important; font-weight:700 !important; color:#fff !important; letter-spacing:.06em; line-height:1.5 !important;
  opacity:0; animation:lfvFade .6s ease .5s forwards;
}
.lfv .lfv-jp::before{ content:""; width:28px; height:3px; border-radius:3px; background:#ff9c00; flex:none; }
.lfv .lfv-lead{ margin:10px 0 0 !important; max-width:26em; font-size:13px !important; line-height:1.85 !important; color:rgba(255,255,255,.86) !important; opacity:0; animation:lfvFade .6s ease .65s forwards; }
.lfv-ticker{ position:relative; margin-top:22px; }
.lfv-ticker .news-ticker{ margin:0 !important; }
@keyframes lfvZoom{ to{ transform:scale(1); } }
@keyframes lfvUp{ to{ transform:none; } }
@keyframes lfvFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .lfv-bg, .lfv .lfv-en span, .lfv .lfv-kicker, .lfv .lfv-jp, .lfv .lfv-lead{ animation:none !important; transform:none !important; opacity:1 !important; }
}