@charset "UTF-8";
/* ==========================================================================
   LINEお友だちキャンペーン 専用スタイル（2026仕様）
   /css/yoshioka2026.css の後に読み込む。
   旧 line.css / form.css / message.css の役割をこの1枚に統合したもの。
   ========================================================================== */

/* ---- ページ見出し（他ページと共通仕様） ---- */
.page-head { padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.4rem, 3vw, 2rem); }
.page-head h1 { font-size: var(--step-2); font-weight: 900; letter-spacing: 0.02em; margin: 0.6rem 0 0; }
.page-head h1 span { display: inline-block; }
.page-head .lead { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.9; margin: 1rem 0 0; max-width: 62ch; }
.page-head .lead b { color: var(--ink); font-weight: 800; }

.crumbs { font-size: 0.76rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 1.4rem; }
.crumbs a { color: var(--ink-faint); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 0.5em; }

.block { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* ---- 小見出し（faq2026 の faq-group-head と同仕様） ---- */
.cp-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 2px solid var(--accent);
  margin: clamp(2.2rem, 5vw, 3.2rem) 0 1.2rem;
}
.cp-head h2 { font-size: var(--step-1); font-weight: 900; letter-spacing: 0.02em; }
.cp-head .en {
  font-family: var(--f-disp); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); margin-left: auto;
}

/* ---- リード文 ---- */
.cp-lead {
  font-size: var(--step-1);
  font-weight: 800;
  line-height: 1.7;
  margin: 0 0 1.2rem;
  max-width: 48ch;
}
.cp-lead .accent { color: var(--accent); }
.cp-note { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.9; margin: 0.8rem 0 0; }
.cp-note small { font-size: 0.88em; color: var(--ink-faint); }

/* ---- キャンペーン期間 ----
   日付の表記はTOPの開催日（.hero-meta の 2026.8.28(金) — 8.30(日)）に合わせる。
   ※クラス名に .day / .days は使わないこと。yoshioka2026.css の
     スケジュール用スタイル（枠線・余白）を拾ってしまう。 */
.cp-period {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 3vw, 2.6rem);
  padding: clamp(1.3rem, 3.5vw, 2rem) clamp(1.2rem, 3vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-bright);
  border-radius: 3px;
}
.cp-period__item { text-align: center; }
.cp-period__k {
  display: block;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.45rem;
}
.cp-period__v {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: clamp(1.5rem, 4.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0;
}
.cp-period__v small { font-size: 0.5em; font-weight: 700; color: var(--ink-soft); margin-left: 0.15em; }
.cp-period__v small.sat { color: #1E5FA8; }
.cp-period__v small.sun { color: #B22A2E; }
.cp-period__t {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}
.cp-period__sep {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--ink-faint);
  margin-top: 1.1rem; /* ラベル(Start/End)の分だけ日付の行に高さを合わせる */
}

/* ---- 賞品リスト ---- */
.prize-visual { margin: 0 0 1.2rem; text-align: center; }
.prize-visual img { margin-inline: auto; border: 0px solid var(--line); border-radius: 3px; }
.prize-visual small { display: block; margin-top: 0.5rem; color: var(--ink-faint); font-size: 0.78rem; }
/* 仮画像の表示幅。本番画像に差し替えたらこの指定ごと外してよい。 */
.prize-visual--placeholder img { width: 100%; max-width: 900px; }

.prize-list { display: grid; gap: 0.6rem; }
.prize-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-bright);
  border-radius: 3px;
}
.prize-list .shohin { font-weight: 800; font-size: 0.98rem; line-height: 1.6; }
.prize-list .ninzu {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- LINEアカウント2枚並び ---- */
.line-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.2rem);
}
.line-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid #06C755; /* LINEブランドカラー。ここだけ差し色として使う */
  border-radius: 3px;
  text-align: center;
}
.line-card__logo { width: min(250px, 70%); }
.line-card h3 { font-size: 0.98rem; font-weight: 800; line-height: 1.6; }
.line-card h3 small { display: block; margin-top: 0.3rem; font-size: 0.78rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0.04em; }
.line-card .cta { margin-top: auto; }
.line-card .cta.solid { width: 100%; justify-content: center; }
.line-card__add img { margin-inline: auto; }

/* 受付前・受付終了の告知 */
.cp-status {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-bright);
  border-radius: 3px;
  text-align: center;
  font-weight: 800;
  line-height: 1.8;
}

/* ---- 注意事項 ---- */
.cp-notes {
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 3vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-bright);
  border-radius: 3px;
}
.cp-notes li {
  position: relative;
  padding-left: 1.2em;
  margin-top: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.cp-notes li:first-child { margin-top: 0; }
.cp-notes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.back-row { margin: clamp(2rem, 5vw, 3rem) 0 clamp(1rem, 3vw, 2rem); display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ==========================================================================
   応募フォーム（bin/line_form.php が出力する dl/dt/dd 構造にあてる）
   ========================================================================== */
#form { margin-top: clamp(1.2rem, 3vw, 2rem); }
#form h3 {
  font-size: var(--step-1);
  font-weight: 900;
  padding: 0.7rem 0;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 1.2rem;
}
#form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#form legend { display: none; }

#form dl {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1rem, 2.5vw, 1.6rem);
}
#form dt {
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
#form dt.noborder, #form dt:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
#form dt em {
  font-style: normal;
  margin-left: 0.5em;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  background: var(--accent-bright);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: 0.1em;
}
#form dt strong {
  display: block;
  margin-top: 0.4rem;
  color: #B22A2E;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.7;
}
#form dd { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
#form dd.address { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
#form dd.address span { flex: none; }

#form input[type="text"],
#form input[type="email"],
#form input[type="number"],
#form select {
  font-family: inherit;
  font-size: 1rem; /* 16px未満だとiOSでフォーカス時に拡大するため下げない */
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.7em 0.8em;
  max-width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#form input::placeholder { color: var(--ink-faint); }
#form input:focus, #form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 35%, transparent);
}
#form input.text, #form input[type="email"] { width: min(28em, 100%); }
#form input.num { width: 7em; }
#form input.address2 { width: min(24em, 100%); }
#form select { width: min(14em, 100%); }

/* 郵便番号からの住所自動入力ボタン */
#form input[type="button"] {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.65em 1em;
  margin-left: 0.4em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#form input[type="button"]:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--accent-ink); }

/* 送信・確認・戻るボタン */
#form input[type="submit"],
.form input[type="submit"] {
  font-family: var(--f-disp);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  padding: 0.95rem 3rem;
  border: 0;
  border-radius: 2px;
  background: var(--accent-bright);
  color: var(--accent-ink);
  cursor: pointer;
  transition: transform 0.15s, filter 0.2s;
}
#form input[type="submit"]:hover,
.form input[type="submit"]:hover { filter: brightness(1.07); transform: translateY(-2px); }

/* 「前のページに戻る」は控えめに（Hidden_Form_Local の2つ目のフォーム） */
.form + .form input[type="submit"] {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.form + .form input[type="submit"]:hover { background: var(--surface-2); filter: none; }

.form { margin-top: 1rem; }
.center { text-align: center; }
#form p.center { margin: 1.6rem 0 0; }

/* 確認画面 */
#form dd.bold { font-weight: 800; color: var(--ink); font-size: 0.98rem; }

/* ==========================================================================
   メッセージ（旧 message.css：#message.info / .success / .warning / .error）
   アイコン画像は使わず、左罫の色で状態を示す。
   ========================================================================== */
#message {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: 3px;
  background: var(--surface);
  font-size: 0.9rem;
  line-height: 1.8;
}
#message p { margin: 0; }
#message.info { border-left-color: var(--accent-bright); }
#message.success { border-left-color: #2E7D32; font-weight: 800; }
#message.warning { border-left-color: #B8860B; }
#message.error { border-left-color: #B22A2E; color: #B22A2E; font-weight: 700; }

@media (max-width: 640px) {
  .prize-list li { grid-template-columns: 1fr; }
  .prize-list .ninzu { text-align: right; }
  #form input[type="button"] { margin: 0.4rem 0 0; }
  #form input[type="submit"], .form input[type="submit"] { width: 100%; padding-inline: 1rem; }
}