@charset "UTF-8";

/* =============================================================
   お金の増やし方ガイド LP
   デザイン基準幅 900px。数値はすべて 900px 換算の比率で指定し、
   画面幅に関係なくカンプ通りの見た目でスケールする。
   ============================================================= */

:root {
  --design-w: 900px;
  --page-bg: #ffffff;
  --footer-color: #808080;
  --font-sans: "Helvetica Neue", Arial, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

body {
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: #333;
}

/* ページ本体：カンプ幅で頭打ち、以下は等倍縮小 */
.page {
  width: 100%;
  max-width: var(--design-w);
  margin-inline: auto;
  background: var(--page-bg);
  overflow: hidden;
}

/* 通常の縦積みセクション（02〜05）。画像は隙間なく連結する */
.band img,
.hero__bg,
.voices__bg,
.faq__head {
  width: 100%;
}

/* -------------------------------------------------------------
   01 ファーストビュー ＋ CTA ボタン
   ボタンは 01 の余白部分（上から 1187/1603）に重ねる
   ------------------------------------------------------------- */
.hero {
  position: relative;
}

.hero__cta {
  position: absolute;
  top: 74.05%;
  left: 0;
  width: 100%;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

.hero__cta img {
  width: 100%;
}

/* pulse：拡大縮小を繰り返してタップを誘導（既存LP共通の定義に合わせる） */
@-webkit-keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.pulse {
  display: block;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* -------------------------------------------------------------
   06 利用者の声：背景の上をカードがゆっくり横スクロール
   カードは等倍（747 / 900 = 83%）で配置。カード画像には左右 10px 前後の
   透明マージン（影）が含まれるため、カンプの見た目（カード間 35px）に
   合わせて gap は 15 / 900 とする。単位はすべて 900px 基準の cqw。
   ------------------------------------------------------------- */
.voices {
  position: relative;
  container-type: inline-size;
}

.voices__viewport {
  position: absolute;
  top: 19.22%;
  left: 0;
  width: 100%;
  /* 横スクロールは JS が指に 1:1 で追従して制御する。
     ブラウザ標準の慣性スクロールを使うと、勢いで数枚分流れてから
     吸着で引き戻される動きになるため overflow は hidden にしている
     （スクリプトからの scrollLeft 操作は hidden でも有効）。 */
  overflow: hidden;
  scroll-behavior: auto;
  touch-action: pan-y; /* 縦スワイプはページのスクロールに渡す */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.voices__viewport.is-dragging {
  cursor: grabbing;
}

.voices__viewport.is-dragging img {
  pointer-events: none;
}

.voices__track {
  display: flex;
  align-items: flex-start;
  gap: 1.67cqw;
  padding-inline: 6.67cqw;
  width: max-content;
  margin: 0;
}

.voices__item {
  flex: 0 0 83cqw;
}

.voices__item img {
  width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* container query 非対応ブラウザ向けフォールバック
   （ページ幅 = min(100vw, 900px) なので同じ寸法になる） */
@supports not (width: 1cqw) {
  .voices__track {
    gap: min(1.67vw, 15px);
    padding-inline: min(6.67vw, 60px);
  }
  .voices__item {
    flex: 0 0 min(83vw, 747px);
  }
}

/* -------------------------------------------------------------
   07〜11 よくある質問（タップで開く／戻る）
   ------------------------------------------------------------- */
.faq__item {
  display: block;
  width: 100%;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.faq__item img {
  width: 100%;
}

.faq__open {
  display: none;
}

.faq__item[aria-expanded="true"] .faq__closed {
  display: none;
}

.faq__item[aria-expanded="true"] .faq__open {
  display: block;
}

/* -------------------------------------------------------------
   少し開ける（139 / 900）→ トップ繰り返し
   ------------------------------------------------------------- */
.spacer {
  padding-top: 15.44%;
}

/* -------------------------------------------------------------
   フッター
   ------------------------------------------------------------- */
.site-footer {
  width: 100%;
  max-width: var(--design-w);
  margin-inline: auto;
  background: var(--page-bg);
  text-align: center;
  padding: 21.8% 1rem 2.7%;
}

.site-footer p {
  color: var(--footer-color);
  font-size: clamp(10px, 2.45vw, 22px);
  line-height: 1.6;
}

/* -------------------------------------------------------------
   アニメーション抑制設定を尊重
   ------------------------------------------------------------- */
/* @media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
} */