/* =========================================
   レガシーCSS
   ここにあるルールは、新しい仕組みに置き換えたら徐々に削除していく予定。
   新規追加は common.css 側に書くこと。
   ========================================= */

/* スクロールをぬるっと */
html {
  scroll-behavior: smooth;
}

/* SHARE ボタン用 */
.sns-btn__item.fb {display: none;}/*Facebookを消す*/
.sns-btn__item.hatebu {display: none;}/*はてブを消す*/
.sns-btn__item.pkt {display: none;}/*Pocketを消す*/

/* ヒーローの Amazon ボタン用 */
.hero-amazon-btn,
.hero-amazon-btn a {
  border-radius: 999px;      /* まん丸ボタン */
  padding: 0.8em 2.4em;      /* 少し細長く */
  font-size: 16px;           /* 文字サイズ控えめに */
  /*box-shadow: 0 0px 0 #d37a00; */ /* 影で立体感 */
}
/* ホバーしたときのちょっとした動き */
.hero-amazon-btn:hover,
.hero-amazon-btn a:hover {
  transform: translateY(1px);
  /*box-shadow: 0 0px 0 #d37a00;*/
}

/* ▼ ヒーローのサブボタン全体（ためし読み／みんなの感想） */
.hero-sub-buttons {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* 中の pの余白リセット＆センター寄せ */
.hero-sub-buttons .wp-block-sgb-btn {
  margin: 0;
  text-align: center;
}
/* SANGOボタン本体（a.btn.flat2）をゴーストボタンっぽく */
.hero-sub-buttons .btn.flat2 {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  color: #ffffff !important;
  padding: 8px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: none;
}
/* ホバー時：白塗り＋文字をヒーロー背景より少し濃い青に */
.hero-sub-buttons .btn.flat2:hover {
  background-color: #ffffff !important;
  color: #007ec6 !important;
}

/* 右下の「一番上にもどる」ボタン。
   表示タイミング：assets/js/back-to-top.js がスクロール総量の50%を超えたら
   .is-visible を付与する。デフォルトは非表示にしておき、初期描画から JS 起動までの
   一瞬チラつき（描画→is-hidden付与までの間に見えてしまう）を防ぐ。
   ※JS非読込時は永遠に非表示になる。フォールバックとして常時表示にしたければ
     .is-visible を初期から付ける運用にする（現状はチラつき防止を優先）。
   アイコン：HTML側に <span class="back-to-top-icon"> を置き、
     CSSの背景SVG（assets/images/common/icons/chevron-up.svg）で chevron-up を描画。 */
p.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  margin: 0;
  padding: 0.65em 1.4em;
  background: linear-gradient(180deg, #ffffff 0%, #e8f6ff 100%);
  color: #0287cb;
  border: 1px solid rgba(0, 160, 233, 0.15);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 999;
  /* 3D風プッシュボタン：青系の落ち影＋ぼかし影で浮き上がり感 */
  box-shadow:
    0 3px 0 rgba(0, 130, 195, 0.35),
    0 6px 14px rgba(0, 100, 160, 0.18);
  transition: opacity 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
  /* デフォルトは非表示。JS が閾値超えに応じて .is-visible を付与する */
  opacity: 0;
  pointer-events: none;
}
/* JS が閾値超えで付与。フェードイン＋クリック有効化 */
p.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}
/* ホバーで少し浮く＋影を強める */
p.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 0 rgba(0, 130, 195, 0.4),
    0 9px 20px rgba(0, 100, 160, 0.24);
}
/* 押下時は沈める */
p.back-to-top:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 0 rgba(0, 130, 195, 0.3),
    0 4px 8px rgba(0, 100, 160, 0.16);
}
/* ボタン内のリンクから下線などを完全に消す */
p.back-to-top a,
p.back-to-top a:link,
p.back-to-top a:visited,
p.back-to-top a mark {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.back-to-top-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0287cb !important;
  background-color: transparent !important;
  line-height: 1;
}
/* chevron-up（V字を上向きにした矢印）の実SVGファイルを背景で描画。
   data URI を Brave の Shields がブロックする実例があったため、実ファイル参照にしている。
   stroke 色は SVG ファイル内で SANGO ブランド青 #0287cb を直書き。 */
.back-to-top-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: url("../images/common/icons/chevron-up.svg") center / contain no-repeat;
}
/* スマホ（幅600px以下）：丸ボタン化、テキストは隠してアイコンのみ */
@media (max-width: 600px) {
  p.back-to-top {
    right: 14px;
    bottom: 14px;
    padding: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
  }
  p.back-to-top a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  /* SPではテキスト非表示。アイコンだけが大きく見える形に */
  .back-to-top-label .bt-label-pc,
  .back-to-top-label .bt-label-sp {
    display: none;
  }
  .back-to-top-icon {
    width: 22px;
    height: 22px;
  }
}