/* ===== PCだけ右端に縦長タブ（非ホバー時も“可視部分”で中央寄せ） ===== */
@media (min-width: 1024px){

  .side-cta.side-cta--vertical{
    position: fixed;
    right: 0;
    top: 35%;
    display: grid;
    gap: 12px;
    z-index: 5000;
  }

  .side-cta__item{
    /* 調整用の変数：はみ出し量（px） */
    --peek: 22px;                    /* ←数値を増やすとより“はみ出し” */

    display: grid;
    place-items: center;             /* 縦横ど真ん中 */
    width: 70px;
    height: 180px;
    padding: 6px 0;

    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 14px 0 0 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    opacity: .97;

    /* タブを右へズラして“はみ出し” */
    transform: translateX(var(--peek));
    transition: transform .18s ease, box-shadow .2s ease, opacity .2s ease;
  }

  /* ラベル（ここに縦書きを当てる） */
  .side-cta__label{
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: block;
    line-height: 1;
    white-space: nowrap;
    text-align: center;

    /* 非ホバー時：タブのはみ出し量の半分だけ逆方向へ戻す＝可視部分の中央に来る */
    transform: translateX(calc(-0.5 * var(--peek)));
    transition: transform .18s ease;
  }

  /* ホバー/フォーカス時：タブを全開、ラベルの補正をゼロに */
  .side-cta__item:hover,
  .side-cta__item:focus-visible{
    transform: translateX(0);
    box-shadow: 0 16px 36px rgba(0,0,0,.24);
    outline: 3px solid #ffd166;
    outline-offset: 2px;
  }
  .side-cta__item:hover .side-cta__label,
  .side-cta__item:focus-visible .side-cta__label{
    transform: translateX(0);
  }

  /* 色（必要に応じて変更） */
  .side-cta__item--contact{ background: #d63e5c; }
  .side-cta__item--doc    { background: #79a814; }

  /* 動きに弱い利用者への配慮 */
  @media (prefers-reduced-motion: reduce){
    .side-cta__item{ transition: none; transform: translateX(0); }
    .side-cta__label{ transition: none; transform: none; }
  }
}

/* フォールバック（超古い環境向け）：縦書き不可なら横書き回転で代用 */
@supports not (writing-mode: vertical-rl){
  .side-cta__label{
    writing-mode: horizontal-tb;
    transform: rotate(-90deg); /* 簡易代替 */
  }
}

  .side-cta__item{
    box-sizing: border-box;       /* 追加：枠線でサイズが変わらない */
    border: 1px solid #fff;       /* 追加：白の2pxボーダー */
    box-shadow: 0 16px 36px rgba(0,0,0,.50); /* 変更：少し濃い影 */
  }
  .side-cta__item:hover,
  .side-cta__item:focus-visible{
    box-shadow: 0 22px 44px rgba(0,0,0,.35); /* 変更：ホバー時はさらに濃く */
  }


/* --- 出し分け --- */
@media (min-width:1024px){
  .mobile-cta{ display:none; }
}
@media (max-width:1023px){
  .side-cta{ display:none; } /* PC右タブは隠す */
}

/* --- スマホ：下固定の2ボタンバー --- */
@media (max-width:1023px){
  :root{ --cta-safe: env(safe-area-inset-bottom, 0px); }

  /* 本体 */
  .mobile-cta{
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 5000;
    padding: 10px 12px calc(10px + var(--cta-safe));
    background: rgba(255,255,255,.50); /* 半透明の白で土台 */
    backdrop-filter: blur(6px);
    display: flex;
    gap: 10px;
    box-shadow: 0 -10px 28px rgba(0,0,0,.12);
  }
  /* ボタン */
  .mobile-cta__btn{
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;                 /* タップ領域確保(>44px) */
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }
  .mobile-cta__btn--contact{ background:#d63e5c; }
  .mobile-cta__btn--doc    { background:#79a814; }

  .mobile-cta__btn:focus-visible{
    outline: 3px solid #ffd166; outline-offset: 2px;
  }

  /* コンテンツが隠れないように下余白を確保（iPhoneのホームバーも考慮） */
  body{ padding-bottom: calc(76px + var(--cta-safe)); }
}

/* 印刷時は非表示 */
@media print{
  .side-cta, .mobile-cta{ display:none !important; }
}

/* CTAラベルを常に白文字に */
.side-cta__item,
.side-cta__item .side-cta__label,
.mobile-cta__btn {
  color: #fff !important;
}

/* スマホ時、CTAがあるページだけフッター下に余白を足す */
@media (max-width:1023px){
  :root{
    --cta-safe: env(safe-area-inset-bottom, 0px);
    --mobile-cta-height: 68px; /* 必要に応じて 80〜96px で微調整 */
  }
  body.has-mobile-cta .copyright_wrap{
    margin-bottom: calc(var(--mobile-cta-height) + var(--cta-safe));
  }
  /* CTAが無いページ（=お問い合わせなど）は余白ゼロ */
  body:not(.has-mobile-cta) .copyright_wrap{
    margin-bottom: 0;
  }
}

/* JS起動までの瞬間チラ見え防止（すでに入れていれば不要） */
.side-cta { opacity: 0; pointer-events: none; transition: opacity .25s ease; }

/* いつでも最前面に出す（PC） */
@media (min-width:1024px){
  .side-cta.side-cta--vertical{
    z-index: 2147483647 !important; /* 32bit上限クラスの特大値 */
  }
}

/* 念のため：スマホ下部バーも最前面に */
@media (max-width:1023px){
  .mobile-cta{
    z-index: 2147483647 !important;
  }
}


html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}