@charset "utf-8";

html { scroll-behavior: smooth; }

/* =========================
   Base
========================= */
.lp-form{
  color:#333;
  font-size:16px;
  line-height:1.6;
  padding: 0 15px;
  margin-bottom: 120px;
}

.lp-form *{ box-sizing:border-box; }

.lp-form__title{
  font-size:22px;
  font-weight:700;
  margin:0 0 18px;
  text-align:center;
}

/* notice */
.lp-form__notice{
  max-width:980px;
  margin:0 auto 14px;
  padding:12px 14px;
  border-radius:4px;
  font-size:14px;
}
.lp-form__notice--ok{
  background:#e9f6ee;
  border:1px solid #bfe3cc;
  color:#1b6b3a;
}
.lp-form__notice--ng{
  background:#fff1f1;
  border:1px solid #f0b6b6;
  color:#b3261e;
}

/* =========================
   Layout (left label / right field)
========================= */
.lp-form__form{
  max-width:980px;
  margin:0 auto;
}

.lp-form__rows{
  margin:0;
  padding:0;
}

/* 1行 */
.lp-form__row{
  display:flex;
  align-items:stretch;
  padding:22px 0;
  border-bottom:1px solid #e6e6e6;
}
.lp-form__row:first-child{
  border-top:1px solid #e6e6e6;
}

/* dt/dd を横並びの列にする */
.lp-form__row dt{
  width:260px;
  min-width:260px;
  padding-right:18px;
  font-size:16px;
  font-weight:500;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
}

.lp-form__row dd{
  flex:1;
  min-width:0;
  margin:0;
}

/* 必須バッジ */
.lp-form .req{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:20px;
  min-width:38px;
  padding:0 8px;
  border-radius:2px;
  background:#c40016;
  color:#fff;
  font-size:11px;
  font-weight:400;
  line-height:1;
  margin-top:2px;
  flex:0 0 auto;
}

/* hint */
.lp-form__hint{
  margin:6px 0 0;
  font-size:14.5px;
  color:#666;
  line-height:1.5;
  font-weight:400;
}

/* =========================
   Inputs
========================= */
.lp-form input[type="text"],
.lp-form input[type="email"],
.lp-form input[type="tel"],
.lp-form input[type="number"],
.lp-form input[type="date"],
.lp-form select,
.lp-form textarea{
  width:100%;
  height:44px;
  padding:10px 12px;
  border:1px solid #d9d9d9;
  background:#fff;
  border-radius:2px;
  font-size:16px;
  outline:none;
}

.lp-form textarea{
  height:auto;
  min-height:120px;
  resize:vertical;
}

.lp-form input::placeholder,
.lp-form textarea::placeholder{
  color:#b3b3b3;
}

/* focus */
.lp-form input:focus,
.lp-form select:focus,
.lp-form textarea:focus{
  border-color:#5aa7d8;
  box-shadow:0 0 0 3px rgba(90,167,216,0.18);
}

/* select arrow */
.lp-form select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:36px;
}

/* option color */
.lp-form select option:not(:checked){
  color:#000 !important;
}

/* =========================
   Radios / Checkbox
========================= */
.lp-form__radios{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  align-items:center;
}

.lp-form__radios label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  cursor:pointer;
}

/* 既定の丸/四角は一旦統一して整える */
.lp-form__radios input[type="radio"],
.lp-form__check input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#0073aa; /* 近年ブラウザならこれで整う */
}

/* privacy line */
.lp-form__check{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  cursor:pointer;
}

/* =========================
   Conditional rows (JSでdisplay切替想定)
========================= */
.lp-form__row[data-cond]{
  /* 初期は表示。JS側で必要に応じてnoneにする */
}

/* =========================
   Submit
========================= */
.lp-form__actions{
  padding:26px 0 10px;
  text-align:center;
}

.lp-form__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:min(420px, 100%);
  height:64px;
  border:0;
  border-radius:4px;
  background:#3a86b8;
  color:#fff;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  transition:transform .08s ease, opacity .2s ease;
}

.lp-form__submit:hover{ opacity:.9; }
.lp-form__submit:active{ transform:translateY(1px); }

/* =========================
   Responsive
========================= */
@media (max-width:768px){
  .lp-form__row{
    flex-direction:column;
    padding:16px 0;
  }

  .lp-form__row dt{
    width:100%;
    min-width:0;
    padding-right:0;
    margin-bottom:10px;
    align-items:center;
  }

  .lp-form .req{ margin-top:0; }

  .lp-form__actions{ padding-top:18px; }
}

/* =========================
   Input background states
========================= */

/* 初期状態（未入力） */
.lp-form input[type="text"],
.lp-form input[type="email"],
.lp-form input[type="tel"],
.lp-form input[type="number"],
.lp-form input[type="date"],
.lp-form select,
.lp-form textarea{
  background-color: #f5f5f5;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* hover時 */
.lp-form input[type="text"]:hover,
.lp-form input[type="email"]:hover,
.lp-form input[type="tel"]:hover,
.lp-form input[type="number"]:hover,
.lp-form input[type="date"]:hover,
.lp-form select:hover,
.lp-form textarea:hover{
  background-color: #cccccc;
}

/* focus時（入力中） */
.lp-form input[type="text"]:focus,
.lp-form input[type="email"]:focus,
.lp-form input[type="tel"]:focus,
.lp-form input[type="number"]:focus,
.lp-form input[type="date"]:focus,
.lp-form select:focus,
.lp-form textarea:focus{
  background-color: #ffffff;
}

/* =========================
   Hover border (same blue as focus)
========================= */

.lp-form input[type="text"]:hover,
.lp-form input[type="email"]:hover,
.lp-form input[type="tel"]:hover,
.lp-form input[type="number"]:hover,
.lp-form input[type="date"]:hover,
.lp-form select:hover,
.lp-form textarea:hover{
  border-color: #5aa7d8;
}

/* =========================
   Radio label hover & checked (button unchanged)
========================= */

/* ラベルをホバー対象にする（見た目は最小） */
.lp-form__radios label{
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color .2s ease, color .2s ease;
}

/* hover：背景だけ薄く */
.lp-form__radios label:hover{
  background-color: #f5f5f5;
}


/* checked：文字色のみ青 */
.lp-form__radios label:has(input[type="radio"]:checked){
  color: #5aa7d8;
}

.lp-form__zip{
  display:flex;
  align-items:center;
  gap:8px;
}

.lp-form__zip input{
  width:120px;
  text-align:center;
}

.lp-form__zip-sep{
  font-weight:700;
  color:#666;
}

.lp-form input.autofilled{
  background:#eef6fc;
}

.lp-form__zip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.lp-form__zip input{
  width:auto;
  flex:0 0 auto;
}

.lp-form__row input[name="address"]{ margin-bottom: 10px;}

.lp-form__zip input[name="zip1"]{ width:90px; }
.lp-form__zip input[name="zip2"]{ width:120px; }

.lp-form__zip-btn{
  height:44px;
  padding:0 14px;
  border:1px solid #d9d9d9;
  background:#f5f5f5;
  border-radius:2px;
  cursor:pointer;
  font-weight:600;
}

.lp-form__zip-btn:hover{
  background:#ededed;
  border-color:#5aa7d8; /* 確認と同じ青 */
}

.lp-form__hint--zip{
  width:100%;
  margin-top:6px;
}


.lp-form__lock.is-locked{
  opacity: .55;
  pointer-events: none;
}

.lp-form__consent{
  max-width: 980px;
  margin: 0 auto 60px;
  padding: 16px 14px;
  border: 1px solid #e6e6e6;
  background: #f7f7f7;
  border-radius: 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 120px;
}

/* 注意事項全体 */
.lp-form__anno{
  max-width: 980px;
  margin: 40px auto 10px;
  padding: 20px;
  font-size: 16px;
  line-height: 1.7;
  border: 1px solid #ddd;
  
}


/* スクロール枠 */
.lp-form__anno-body{
  max-height: 200px;   /* 約5行分 */
  overflow-y: auto;
  padding-right: 10px;
}

/* ※注意事項 */
.lp-form__anno-title{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* 本文 */
.lp-form__anno-body p{
  margin: 8px 0 16px;
}

/* 【◯◯について】 */
.lp-form__anno-heading{
  font-size: 16px;
  font-weight: 700;
  margin-top: 18px;
  margin-bottom: 6px;
}

.lp-form__check input[disabled] + span,
.lp-form__check input[disabled]{
  cursor: not-allowed;
  opacity: 0.5;
}
/* 中身を縦に積んで、全体をセンター */
.lp-form__consent-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}



.lp-form__hint{
  transition: opacity .3s ease;
}

.lp-form__hint.is-hidden{
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
}

/* ヒント（赤） */
#js-consent-hint{
  color: #c40016;
  text-align: center;
  margin: 0; /* 消える時の高さ影響を最小化 */
}

/* 消える（高さも消す） */
.lp-form__hint{
  transition: opacity .3s ease, max-height .3s ease, margin .3s ease;
  max-height: 80px; /* 2行分くらい */
}

.lp-form__hint.is-hidden{
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
}
/* =====================================
   LP Form Error Color
   ===================================== */
.lp-form__notice--ng{
  color: #c40016;
}

/* 背景付きのアラートなら（任意） */
.lp-form__notice--ng{
  border: 1px solid #c40016;
  background: rgba(196, 0, 22, 0.06);
}

/* 各フィールド直下のエラー表示（後で出す想定のクラス） */
.lp-form__error{
  color: #c40016;
  font-size: 14px;
  line-height: 1.4;
  margin-top: 6px;
}

/* エラー時の入力枠（任意：使うなら input に is-error を付ける） */
.lp-form__lock input.is-error,
.lp-form__lock select.is-error,
.lp-form__lock textarea.is-error{
  border-color: #c40016;
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 0, 22, 0.12);
}