/*
Theme Name: kakakutenka-kumamoto
Description: LP用
Version: 1.0
Author: ADP
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "メイリオ", sans-serif;
  line-height: 1.6;
  color: #333;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

/* ============================
   LP 全体レイアウト
============================ */

.lp-main {
  width: 100%;
  display: flex;
  justify-content: center;
}

.lp-wrapper {
  width: 768px;         /* 基本幅 */
  max-width: 100%;      /* スマホでは縮む */
  margin: 0 auto;
}

.lp-wrapper img {
  display: block;
  width: 100%;          /* wrapper の幅にフィット */
  height: auto;
}

.btn_to_form {
	width: 94.4%;
	top: 57.4%;
	left: 3.8%;
	transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
.btn_to_form:hover {
  transform: scale(1.02) translateY(-.5%);
  opacity: 0.7;
}


/* ============================
   アンケート用ラジオボタン（CF7）
   幅600px / 高さ68px / フォント35px を基準にスケール
============================ */

/* 各質問ブロックの余白（背景画像に合わせた位置調整） */
.lp-q {
  margin: 0 auto 80%;
}
.lp-q.lp-q2,
.lp-q.lp-q4 {
  margin: 0 auto 72%;
}
.lp-q.lp-q5 {
  margin: 0 auto 33%;
}

/* ラジオボタングループ：LP幅の78.125%（=600/768） */
.wpcf7-radio.lp-radio {
  display: block;
  width: 78.125%;       /* LP幅768px時に 600px */
  max-width: 600px;     /* 大きくなりすぎないように */
  margin: 0 auto;
}

/* LIっぽく縦に並べる */
.wpcf7-radio.lp-radio .wpcf7-list-item {
  display: block;
  margin: 0 0 4%;
}

/* label全体をボタン化 */
.wpcf7-radio.lp-radio .wpcf7-list-item label {
  display: block;
  cursor: pointer;
}

/* 元のラジオ丸を非表示 */
.wpcf7-radio.lp-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* ボタンの見た目（共通） */
.wpcf7-radio.lp-radio .wpcf7-list-item-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;       /* テキスト左寄せ */
  width: 100%;
  padding: 0 24px;
  border-radius: 8px;
  border: 1px solid #ccc;         /* ピンク枠 */
  background: #ffffff;
  color: #333333;
  text-align: left;
  white-space: nowrap;               /* 1行で表示（縦横比維持のため） */
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* PC基準サイズ（LP幅768px以上のとき） */
@media (min-width: 769px) {
  .wpcf7-radio.lp-radio .wpcf7-list-item-label {
    height: 68px;                    /* 縦68px固定 */
    font-size: 35px;                 /* フォント35px */
  }
}

/* スマホ・タブレットなど LP幅が小さいとき（縦横比に応じてスケール） */
@media (max-width: 768px) {
  .wpcf7-radio.lp-radio .wpcf7-list-item-label {
    /* 幅は 78.125% 指定の親に合わせて自動縮小されるので、
       縦方向とフォントを比率で縮小する */
    height: 8.854166vw;              /* 68px * (100 / 768) ≒ 8.854vw */
    font-size: 4.557292vw;           /* 35px * (100 / 768) ≒ 4.557vw */
    padding: 0 3.125vw;              /* 24px * (100 / 768) = 3.125vw */
    border-radius: 1.041666vw;       /* 8px * (100 / 768) ≒ 1.042vw */
  }
}

/* ホバー時（PC用） */
.wpcf7-radio.lp-radio .wpcf7-list-item label:hover .wpcf7-list-item-label {
  background: #ffe7ec;
}

/* チェックされている項目の見た目 */
.wpcf7-radio.lp-radio input[type="radio"]:checked + .wpcf7-list-item-label {
  background: #ee6269;     /* ピンク */
  color: #ffffff;
  border-color: #ee6269;
}

/* 最後の選択肢の下マージン調整 */
.wpcf7-radio.lp-radio .wpcf7-list-item:last-child {
  margin-bottom: 0;
}

/* 説明テキストを画像の代わりに音声読み上げだけさせたい場合用（視覚的には非表示） */
.lp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================
   送信ボタン：アンケートを送信
   基準サイズ w479px / h108px / font-size 44px
   ＋ LP幅に応じて等比縮小
============================ */

.lp-submit {
  text-align: center;
  margin: 0 auto;
  position: relative; /* スピナー位置の基準にする */
}

.lp-submit .wpcf7-submit {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;

  display: flex;       /* 中央寄せ＋縦中央 */
  align-items: center;
  justify-content: center;
  margin: 0 auto;      /* 中央配置 */

  /* ▼ 768px時のデザイン基準に対する比率指定 */
  width: 62.3698%;     /* 479 / 768 * 100 ≒ 62.37% */
  height: 14.0625vw;   /* 108 / 768 * 100 = 14.0625vw */

  /* 角丸・余白も比例させる */
  padding: 0 4vw;
  border-radius: 1.302vw;

  /* グラデーション背景＆影 */
  background: linear-gradient(180deg, #ff8b6e 0%, #ee6269 100%);
  box-shadow: 0 1.3vw 2vw rgba(0, 0, 0, 0.18);

  /* テキスト：中央寄せ＆スケール */
  color: #ffffff;
  font-weight: 700;
  font-size: 5.7292vw;       /* 44 / 768 * 100 ≒ 5.73vw */
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
	
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

/* PC幅では基準値で固定（大きくなりすぎないよう上限指定） */
@media (min-width: 768px) {
  .lp-submit .wpcf7-submit {
    width: 479px;
    height: 108px;
    font-size: 35px;
    border-radius: 10px;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2);
  }
}

/* ホバー時（PC） */
.lp-submit .wpcf7-submit:hover {
  transform: translateY(0.2vw);
  opacity: 0.8;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3);
}

/* フォーカスリング（キーボード操作用） */
.lp-submit .wpcf7-submit:focus-visible {
  outline: 0.2rem solid #ffffff;
  outline-offset: 0.2rem;
}

/* ▼ 送信ボタンがスピナーで左にズレないように調整 */
.lp-submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* ボタン幅 62.3698% の右端あたりに配置 */
  right: calc(50% - (62.3698% / 2));
  margin: 0 !important;
}

/* PC幅でのスピナー位置（ボタン幅479pxで計算） */
@media (min-width: 768px) {
  .lp-submit .wpcf7-spinner {
    right: calc(50% - 239.5px); /* 479px / 2 */
  }
}

/* Turnstile が吐く余計な <br> を非表示にする */
.lp-submit > br {
  display: none !important;
}

/* Turnstile 本体が挿入する改行も念のため消す */
.cf-turnstile-br {
  display: none !important;
}


/* ============================
   LP1：アンケートフォーム背景エリア
============================ */

.lp-form-section {
  position: relative;
  width: 768px;
  max-width: 100%;
  margin: 0 auto;
}

/* 背景画像（5_01〜5_07） */
.lp-form-section__bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* フォームを画像の上に重ねる */
.lp-form-section__form {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;  /* 上寄せで重ねる。中央にしたければ center */
  pointer-events: none;     /* 背景だけならクリック無効 */
}

/* 実際のフォームコンテンツだけクリック可＋幅をLP幅内に合わせる */
.lp-form-section__form .wpcf7 {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding-top: 86%;        /* 上からどれくらい下げるか（デザインに合わせて調整） */
  pointer-events: auto;
}