/* ===================== CSS ===================== */
/* ---------------------------------------------
基本リセット
--------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; line-height: 1.7; color: #111; }
img, svg, video { max-width: 100%; height: auto; display: block;margin: 0 auto; }
a { color: inherit; text-decoration: none; }


/* ---------------------------------------------
レイアウト設定
・スマホ: 左右ぴったり（幅100%、余白なし）
・PC: 中央寄せ（最大幅480px）
--------------------------------------------- */
:root {
--content-max: 480px; /* PC版の幅を480pxに固定 */
}


.container {
width: 100%;
margin-inline: auto;
max-width: var(--content-max);
}


/* スマホ時（768px以下）は余白ゼロで両端ぴったり */
.pad {
padding: 24px 0;
}


@media (max-width: 768px) {
.container {
max-width: 100%; /* スマホは全幅 */
}
.pad {
padding: 0; /* スマホは余白なし */
}
}


/* 余白ユーティリティ（必要なら使用） */
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }


/* 見出しなどの最低限スタイル */
h1, h2, h3 { line-height: 1.3; margin: 0; }
h1 { font-size: clamp(24px, 4.2vw, 40px); }
h2 { font-size: clamp(20px, 3.6vw, 28px); margin-top: 32px; }
p { margin: 16px 0 0; }


/* フッタの最小デザイン（任意） */
.l-footer { color: #666; font-size: 14px; padding:30px 30px 122px 30px;}

/* ポップアップCSS */

/* ▼ LINE登録ポップアップ：CSS（head内に配置） */
.line-popup-overlay {
  position: fixed;
  inset: 0;
  display: none; /* 初期は非表示 */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  /* 対応ブラウザで背景をぼかす */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
}

.line-popup-overlay.is-active {
  display: flex;
  animation: lp-fade-in 200ms ease-out;
}

@keyframes lp-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}

.line-popup {
  box-sizing: border-box;
  width: min(92vw, 560px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  animation: lp-pop 220ms ease-out forwards;
}

@keyframes lp-pop {
  to { transform: translateY(0) scale(1); }
}

.line-popup-close {
  position: absolute;
  right: 10px;
  top: 8px;
  font-size: 28px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #222;
  cursor: pointer;
}

.line-popup-banner {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.line-popup-cta {
  display: block;
  /* padding: 16px 20px 24px; */
  text-align: center;
}

.line-popup-cta-img {
  width: 80%;
  height: auto;
  display: inline-block;
  max-width: 420px; /* 画像が大きすぎる場合の上限 */
　margin-bottom: 10px;
}

/* スマホ向け微調整（中央表示はPC/スマホ共通で固定配置＆中央寄せ） */
@media (max-width: 480px) {
  .line-popup {
    width: min(94vw, 420px);
    border-radius: 14px;
  }
  .line-popup-close {
    right: -10px;
    top: -2px;
  }
  .c-amountTag{
    gap:50px;
}
  .c-amountTag-other{
    gap: 76px;
  }
  .l-footer{
    padding: 30px 30px 63px 30px;
  }
}
/* ▲ LINE登録ポップアップ：CSS */


/* ポップアップCSS ここまで */

/* 固定フッターメニュー */

 :root{
    /* レイアウト調整用（必要に応じて変更） */
    --ff-gap: 0px;        /* 画像ボタン間の控えめな隙間 */
    --ff-margin: -35px;     /* スマホで左右端にベタ付かない余白 */
    --ff-img-h-mb: 109px;   /* モバイル時の画像ボタン高さ */
    --ff-img-h-pc: 160px;   /* PC時の画像ボタン高さ */
  }

  /* 透明な固定コンテナ */
  .floating-footer{
    position: fixed;
    z-index: 9999;
    left: 47%;
    transform: translateX(-50%);
    bottom: max(var(--ff-margin), env(safe-area-inset-bottom, 0px));
    /* display: flex; */
    align-items: center;
    gap: var(--ff-gap);
    background: transparent; /* 背景は透明 */
    max-width: calc(100% - (var(--ff-margin) * 2)); /* スマホで左右端に付かない */
    width: max-content;
    pointer-events: none; /* 透明領域の誤タップ防止 */
  }

  /* 画像ボタン（a） */
  .ff-imgbtn{
    display: inline-block;
    pointer-events: auto; /* a要素はクリック可能に */
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, filter;
    transition: transform .12s ease, filter .12s ease;
  }
  .ff-imgbtn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
  .ff-imgbtn:active{ transform: translateY(0); filter: brightness(.98); }
  .ff-imgbtn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; border-radius: 12px; }

  /* 画像自体のサイズ管理（高さ基準で縮小拡大、縦横比は画像に従う） */
  .ff-img{
    display: block;
    height: var(--ff-img-h-mb);
    width: auto;
  }

  /* PCでは中央寄せ＆少し大きめに */
  @media (min-width: 1024px){
    .ff-img{ height: var(--ff-img-h-pc); }
  }

  /* 極端に狭い端末での折返し対策（必要なら） */
  @media (max-width: 360px){
    .floating-footer{
      flex-wrap: wrap;
      justify-content: center;
      row-gap: var(--ff-gap);
    }
    .ff-imgbtn{
      flex: 1 1 auto;
      text-align: center;
    }
    .ff-img{
      margin-inline: auto;
      max-width: 100%;
      height: 52px; /* さらに少し低めにして収まりを良く */
    }
  }

  /* 動きが苦手なユーザー配慮 */
  @media (prefers-reduced-motion: reduce){
    .ff-imgbtn{ transition: none; }
  }

/* 固定フッターメニュー ここまで */

/* 保障内容一覧 アイコンメニュー */

/* 固定ヘッダーがある場合の着地位置調整（例: 80px） */
.lp-section {
  scroll-margin-top: 80px;
}

/* ===== メニュー帯 ===== */
:root {
  --menu-bg: #F25454; /* メニュー帯の背景色（任意に調整） */
  --menu-radius: 16px; /* 帯の角丸 */
  --menu-gap: 24px;    /* タイル間の余白 */
  --menu-max: 1100px;  /* 最大幅 */
  --menu-pad: 24px;    /* 帯の内側余白 */
}

.lp-menu {
  background-color: #ffcbcb;
  border-radius: var(--menu-radius);
  padding: var(--menu-pad);
  margin: 24px auto;
}

.lp-menu__inner {
  max-width: var(--menu-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--menu-gap);
}

/* ===== タイル（= 画像を置く枠） ===== */
.lp-menu__tile {
  display: block;
  aspect-ratio: 1 / 1;        /* 正方形 */
  position: relative;
  overflow: hidden;            /* タップ領域をきれいに */
  text-decoration: none;
  outline: none;
}

/* 画像は“赤い角丸の正方形+文字+イラスト”を1枚で用意して差し替え */
.lp-menu__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* 画像の比率を保ちつつ収める（余白OK） */
  display: block;
}

/* キーボード操作/ホバー時のわかりやすい反応 */
.lp-menu__tile:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,.9);
  border-radius: 12px;
}
.lp-menu__tile:hover img {
  transform: translateY(-1px) scale(1.01);
}
.lp-menu__tile img {
  transition: transform .15s ease;
}

/* ===== レスポンシブ ===== */
@media (max-width: 960px) {
  /* .lp-menu__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } */
}
@media (max-width: 520px) {
  :root { --menu-gap: 8px; --menu-pad: 12px; }
  .lp-menu__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 保障内容一覧 アイコンメニュー ここまで */

/* 全体 */
.lp-jump-gallery {
  max-width: 1040px;
  margin: 0 auto;
  padding: 35px 6px;
}

/* 上：横並び */
.lp-jump-gallery__top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.lp-jump-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  /* クリック領域をしっかり */
  -webkit-tap-highlight-color: transparent;
}

.lp-jump-card:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.35);
  outline-offset: 3px;
}

/* 背景の薄赤い丸 */
.lp-jump-card__circle {
  position: absolute;
  inset: auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255, 90, 90, 0.16);
  /* “背景にある”感じ */
  left: -18px;
  top: -18px;
  z-index: 0;
  filter: blur(0.2px);
}

/* 四角い画像 */
.lp-jump-card__img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形 */
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  transition: transform 220ms ease, filter 220ms ease;
}

.lp-jump-card:hover .lp-jump-card__img {
  transform: scale(1.03);
  filter: saturate(1.05);
}

/* 下：縦並び */
.lp-jump-gallery__bottom {
  display: grid;
  gap: 24px;
}

.lp-detail {
  border-radius: 16px;
  overflow: hidden;
}

.lp-detail__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* スマホでも4つ横一列のままにする */
@media (max-width: 768px) {
  .lp-jump-gallery__top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px; /* スマホは余白だけ少し詰めると収まりやすい */
  }

  .lp-jump-card {
    border-radius: 10px;
  }

  .lp-jump-card__circle {
    width: 92px;
    height: 92px;
    left: -10px;
    top: -10px;
  }
}

/* タップ時の青いハイライトを消す（iOS/Android） */
.lp-jump-card {
  -webkit-tap-highlight-color: transparent;
}

/* 押しっぱなしっぽく見える原因になりがちな active/visited の見た目を固定 */
.lp-jump-card:active,
.lp-jump-card:visited {
  transform: none;
  filter: none;
  opacity: 1;
}

/* hover効果がある場合、スマホ(hoverなし端末)では効かせない */
@media (hover: none) {
  .lp-jump-card:hover .lp-jump-card__img {
    transform: none;
    filter: none;
  }
}

/* フォーカスが残って枠や見た目が変になるのを抑制（キーボード操作は残す） */
.lp-jump-card:focus {
  outline: none;
}
.lp-jump-card:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.35);
  outline-offset: 3px;
}

:root { --fixed-footer-h: 72px; } /* 固定フッターの高さに合わせて */

.fixed-footer-spacer {
  height: var(--fixed-footer-h);
}

#line-popup-overlay { display: none; }
#line-popup-overlay.is-open { display: block; }