@charset "utf-8";

.testimony-section {
  --bg: #f7f7f8;
  --paper: #ffffff;
  --ink: #121317;
  --muted: #807a6b;
  --line: #e5e7eb;
  --radius: 20px;
  --shadow: 0 10px 25px rgba(0, 0, 0, .06);
  --pad: clamp(16px, 3vw, 28px);
  max-width: 860px;
  margin: auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  .testimony-section {
    --bg: #2e2a1d;
    --paper: #1a1913;
    --ink: #f5f5f6;
    --muted: #aaa99a;
    --line: #2b2a23;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  }
}

.testimony-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .testimony-card {
    grid-template-columns: 360px 1fr;
  }
}

.testimony-media {
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--pad);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fafafa, #f3f4f6);
}

@media (prefers-color-scheme: dark) {
  .testimony-media {
    background: linear-gradient(180deg, #473b12, #252313);
  }
}

@media (min-width: 880px) {
  .testimony-media {
    border-bottom: none;
    border-right: 1px solid var(--line);
  }
}

.testimony-media figure {
  margin: 0;
  width: min(100%, 420px);
  display: grid;
  gap: 12px;
  text-align: center;
}

.testimony-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #dfe3ea;
}

.testimony-media figcaption {
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--muted);
}

.testimony-content {
  padding: var(--pad);
  display: grid;
  gap: clamp(14px, 2.2vw, 18px);
}

.testimony-title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: .02em;
}

.testimony-bubble {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(14px, 2.5vw, 20px);
  background: #fff;
}

@media (prefers-color-scheme: dark) {
  .testimony-bubble {
    background: #ccb800d3;
  }
}

.testimony-note {
  font-size: .92rem;
  color: var(--muted);
}

.step-box {
  position: relative;
  display: flex;
  align-items: center;
  /* 縦方向センター */
  padding: 20px 24px 20px 80px;
  /* ← 左に余白を取り、バッジと重ならないように */
  margin: 16px auto;
  max-width: 700px;

  border: 2px solid #ffe815;
  border-radius: 12px;
  background: #1b1b1b url("https://www.transparenttextures.com/patterns/always-grey.png");
  box-shadow: 0 0 10px rgba(173, 150, 20, 0.5);
  color: #fff;
  box-sizing: border-box;
}

/* 番号バッジ：左に固定して上下中央 */
.step-num {
  position: absolute;
  left: 12px;
  /* ボックス内の固定位置 */
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffe815;
  color: #1b1b1b;
  font-weight: 700;
  font-size: 2.0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(173, 150, 20, 0.6);
}

/* 本文はボックスの中央寄せ */
.step-content {
  width: 100%;
  /* 中央寄せのために横幅を確保 */
  text-align: center;
  /* 文字を中央寄せ */
  margin: 0 auto;
  /* ブロック自体も中央 */
}

.step-content h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
  font-weight: 700;
}

.step-content p {
  margin: 0;
  line-height: 1.5;
}

.highlight {
  color: #ff3333;
  font-weight: 700;
  font-size: 2.4rem;
}

/* スマホ時の微調整（任意） */
@media (max-width: 768px) {
  .step-box {
    padding-left: 76px;
  }

  .step-num {
    left: 10px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}


.notice {
  margin: 0 auto;
  text-align: center;
  background: transparent;
  /* 背景透過 */
  padding: 1em;
  max-width: 2000px;
}

/* 上の挨拶文 */
.important-box .to {
  color: #ffffff;

  @media screen and (max-width: 768px) {
    font-size: 2.7rem;
  }

  @media screen and (min-width: 768px) {
    font-size: 5.5rem;
  }

  font-weight: 900;
}

.important-box {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1em 2em;
  border: 4px solid #eeff00;
  background: rgba(0, 0, 0, 0.85);
  /* 薄い赤背景で透過感 */
  box-shadow: 0 0 20px rgba(251, 255, 0, 0.7), 0 0 40px rgba(255, 230, 0, 0.4);
  animation: boxPulse 1.2s infinite alternate;
}

/* 「重要」テキスト */
.important {
  @media screen and (max-width: 768px) {
    font-size: 8rem;
  }

  @media screen and (min-width: 768px) {
    font-size: 17rem;
  }

  font-weight: 900;
  color: #ff0000;
  text-align: center;
  display: inline-block;
  animation: textBlink 0.8s infinite alternate;
}

/* テキスト点滅 */
@keyframes textBlink {
  from {
    opacity: 1;
    color: #ff0000;
  }

  to {
    opacity: 0.3;
    color: #ff3636;
  }
}

/* ボックスの発光アニメーション */
@keyframes boxPulse {
  from {
    box-shadow: 0 0 15px rgba(255, 208, 0, 0.6), 0 0 30px rgba(255, 238, 0, 0.3);
  }

  to {
    box-shadow: 0 0 30px rgb(179, 8, 8), 0 0 60px rgba(238, 255, 0, 0.6);
  }
}

/* 「登録情報の更新が必要です」 */
.headline {
  @media screen and (max-width: 768px) {
    font-size: 2rem;
  }

  @media screen and (min-width: 768px) {
    font-size: 7rem;
  }

  font-weight: 800;
  color: #000;
  background: linear-gradient(0deg, #ffe600, #fff176);
  border: 3px solid #000;
  padding: 0.3em 0.8em;
}

.headline-head {
  font-weight: 800;
  color: #000;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(0deg, #ffe600, #fff176);
  border: 3px solid #000;
  padding: 2px
}

.headline-head .txt {
  @media screen and (max-width: 768px) {
    font-size: 2rem;
  }

  @media screen and (min-width: 768px) {
    font-size: 4rem;
  }
}


.perk-box {
  --accent: #8a2be2;
  --accent-2: #00d4ff;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --sub-fg: color-mix(in srgb, var(--fg) 70%, transparent);

  position: relative;
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 28px 28px;
  /* 上の余白を広げる */
  border-radius: 16px;

  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) border-box;
  border: 1.5px solid transparent;

  color: var(--fg);
  font: 500 17px/1.8 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;

  box-shadow: 0 1px 0 rgba(0, 0, 0, .06),
    0 10px 30px rgba(28, 28, 35, .10);

  transition: transform .18s ease, box-shadow .18s ease;
}

.perk-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06),
    0 16px 40px rgba(28, 28, 35, .14);
}

/* 見出し（中央上配置） */
.perk-box::before {
  content: attr(data-title);
  display: block;
  margin: 0 auto 10px auto;
  font-weight: 800;
  font-size: clamp(1.5rem, 2vw + 1.2rem, 2rem);
  /* 大きめ */
  text-align: center;

  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 小見出し（中央上配置） */
.perk-box::after {
  content: attr(data-subtitle);
  display: block;
  margin: 0 auto 20px auto;
  font-weight: 600;
  font-size: clamp(1rem, 1.2vw + 0.9rem, 1.3rem);
  text-align: center;
  color: var(--sub-fg);

  padding: 6px 14px;
  border-radius: 999px;
  width: fit-content;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 12%, transparent) 0%,
      color-mix(in srgb, var(--accent-2) 12%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.t_glossy {
  position: relative;
  display: inline-block;
  font-weight: 900;
  font-family: "Noto Sans JP", system-ui, sans-serif;

  /* レスポンシブ大文字 */
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  line-height: 1.1;

  /* メイン赤 */
  color: #e60023;

  /* 立体感＋ハイライト */
  text-shadow:
    0 1px 0 #000000,
    0 2px 0 #1d0e11,
    0 3px 2px rgba(0, 0, 0, 0.25),
    0 -1px 2px rgba(255, 200, 200, 0.6);
  /* 上側の白光 */

  overflow: hidden;
  /* 擬似要素のはみ出し防止 */
}

.scroll-btn {
  position: fixed;
  right: 40px;
  bottom: 30px;
  padding: 14px 24px;
  background: #FFD700; /* 黄色 */
  color: #333;
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 9999;
  text-align: center;
}

/* 表示時 */
.scroll-btn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ホバー（PCのみ効く） */
.scroll-btn:hover {
  background: #FFC107;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

/* ===== スマホ用スタイル ===== */
@media (max-width: 768px) {
  .scroll-btn {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    padding: 16px;
    font-size: 18px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
  }
}