/*--------------------------------------------------------------
  Footer（スマホ固定CTA + 通常フッター）
  HTML前提：
  - 固定CTA： <div class="footer-transp"><div class="hide-pc">...</div></div>
  - 通常：    <section id="footer"><div class="inner">...</div><footer class="footer">...</footer></section>

  目的：
  1) スマホ：CTAを下部固定
  2) PC：CTAを非表示
  3) CTAが本文に被らないよう body に下余白
  4) #footer .inner の “広げると左寄り” を完全除去（main.cssのflex/55emを殺す）
  5) フッター文字は全部白
  6) <footer class="footer"> の下余白を根絶
  7) iPhone セーフエリア対応
--------------------------------------------------------------*/

/* iOSセーフエリア下 */
@supports (padding: env(safe-area-inset-bottom)){
  :root{ --safe-btm: env(safe-area-inset-bottom); }
}
@supports not (padding: env(safe-area-inset-bottom)){
  :root{ --safe-btm: 0px; }
}

/* ===== 調整パラメータ ===== */
:root{
  --cta-h: 64px;                       /* CTAバーの想定高さ（ボタン込み） */
  --cta-pad-y: 10px;                   /* CTA内上下padding */
  --cta-bg: rgba(255,255,255,.92);     /* CTA背景（白） */
  --cta-border: rgba(0,0,0,.08);       /* CTA境界線 */

  --footer-maxw: 72rem;                /* #footer .inner 最大幅（不要なら消す） */
}

/* ==========================================================
   1) スマホ：CTAバーを下部固定
   ========================================================== */
@media (max-width: 736px){

  /* CTAバー本体を固定（ここがメイン） */
  .footer-transp{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;

    background: var(--cta-bg) !important;
    border-top: 1px solid var(--cta-border);

    /* セーフエリア */
    padding-bottom: var(--safe-btm);
  }

  /* CTAの中身 */
  .footer-transp .hide-pc{
    padding: var(--cta-pad-y) 12px;
  }

  /* CTAが本文に被らないように下余白 */
  body{
    padding-bottom: calc(var(--cta-h) + var(--safe-btm)) !important;
  }
}

/* ==========================================================
   2) PC/タブレット：CTAは非表示 + body下余白ゼロ
   ========================================================== */
@media (min-width: 737px){
  .footer-transp{ display: none !important; }
  body{ padding-bottom: 0 !important; }
}

/* ==========================================================
   3) 通常フッター（#footer）を中央に固定
      - main.css の #footer .inner（display:flex / width:55em / padding:5em...）を殺す
   ========================================================== */
#footer{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* main.cssのflex/55emを完全に無効化して中央寄せ */
#footer .inner{
  display: block !important;              /* flex を殺す */
  width: 100% !important;                 /* 55em を殺す */
  max-width: var(--footer-maxw);
  margin: 0 auto !important;              /* 画面拡大しても常に中央 */
  padding: 10px 12px !important;          /* デカいpaddingを殺す */
  text-align: center !important;
  line-height: 1.6;
  box-sizing: border-box;
}

/* ==========================================================
   4) フッター文字は全部白（要件）
   ========================================================== */
#footer,
#footer *{
  color: #fff !important;
}

#footer a{
  color: #fff !important;
  border-bottom: 0 !important;            /* main.cssの点線下線を消す */
  text-decoration: none;
}
#footer a:hover{
  color: #fff !important;
}

/* ==========================================================
   5) <footer class="footer"> の余白/ズレを根絶
   ========================================================== */
#footer footer.footer{
  margin: 0 !important;
  padding: 10px 12px !important;
  background: rgba(0,0,0,0.55) !important; /* ← ここを追加/変更 */
  border-top: 1px solid rgba(255,255,255,0.12); /* 任意：境界が締まる */
}

#footer footer.footer .copyright{
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.6;
}

/* ==========================================================
   6) scroll-up：CTAに被らない位置（スマホ）
   ========================================================== */
#footer .scroll-up{
  position: fixed;
  display: none;
  right: 10px;
  bottom: calc(var(--cta-h) + var(--safe-btm) + 10px);
  z-index: 9999;
}

#footer .scroll-up a{
  background: #fff;
  display: block;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #000 !important;                 /* ボタン内は視認性確保 */
  opacity: 0.7;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.12);
}

#footer .scroll-up a:hover,
#footer .scroll-up a:active{
  opacity: 1;
  color: #000 !important;
}

/* scroll-up（ページ上部へ）アイコンを確実に表示 */
#footer .scroll-up a,
#footer .scroll-up a:visited {
  color: #fff; /* 背景に合わせて調整 */
}

#footer .scroll-up a:hover,
#footer .scroll-up a:focus {
  color: #fff; /* hoverで消えるならここも固定 */
}

#footer .scroll-up a .fa,
#footer .scroll-up a .fa::before {
  color: currentColor; /* a の色を継承させる */
}

#footer .scroll-up a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  text-decoration: none;
}
#footer .scroll-up a:hover {
  background: rgba(0,0,0,0.75);
}
#footer .scroll-up a .fa {
  font-size: 22px;
  line-height: 1;
}
