/* ============================================================
  v6 BASE CSS RESET (2025-09-09 reset)
  - index.php / confirm.php をこの1枚で統一
  - 既存HTMLは変更不要
  - CJKの1文字折りを禁止（break-all対策）
============================================================ */

/* ---- 基本リセット ---- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl){ margin: 0 0 .8em; }
img, video { max-width: 100%; height: auto; }

/* ---- 文字まわり（CJKの不自然な折返しを防止） ---- */
html, body, table, th, td, p, span, div, li, dt, dd, label {
  word-break: normal;
  white-space: normal;
  overflow-wrap: break-word;
  line-break: auto;
  letter-spacing: normal;
}

/* ---- ベース ---- */
:root{
  --max-w: 720px;
  --bg: #f9f9f9;
  --fg: #333;
  --muted: #666;
  --border: #bbb;
  --primary: #1976d2;
  --primary-dark:#115293;
  --danger:#d32f2f;
  --ok-bg:#f6fff6; --ok-bd:#8c8; --ok-fg:#060;
  --err-bg:#ffe9e9; --err-bd:#e19; --err-fg:#900;
  --notice-bg:#fff3e0; --notice-bd:#fb8c00; --notice-fg:#4e342e;
}

body{
  font-family:'Segoe UI','Noto Sans JP',system-ui,-apple-system,Meiryo,Arial,sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  padding: 2em;
  margin: 0 auto;
  max-width: var(--max-w);
}

/* 見出し */
h1{ font-size: clamp(1.25rem, 2.6vw, 1.8rem); margin: .2em 0 1em; }

/* ============================================================
  共通UI
============================================================ */
/* === フォーム共通ヘッダー画像（フルブリード表示）=== */
/* .form-container の内側に置く .form-hero を、外枠カードと一体化して見せる */
.form-hero{
  /* 親 .form-container の padding:2em を打ち消して “端まで” 見せる */
  margin: -2em -2em 1.2em;   /* 上左右だけマイナス、下は余白を残す */
  overflow: hidden;          /* 角丸からはみ出さないように */
  border-radius: 12px 12px 0 0; /* 上辺だけ角丸（.form-container と揃える） */
}

/* 実画像の伸縮ルール：フォーム幅にフィット */
.form-hero img{
  display: block;     /* 下にできる隙間を防止 */
  width: 100%;        /* 横幅いっぱい */
  height: auto;       /* 縦横比を維持 */
}

/* コンテナ */
.form-container{
  background:#fff;
  padding:2em;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  display:flex; flex-direction:column;
}

/* ラベル */
label{
  margin-top:1.5em;
  display:block;
  font-weight:bold;
  color: var(--fg);
}

/* 入力 */
input, textarea, select{
  font-size:1em;
  padding:.6em;
  background:#fff;
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:6px;
  margin-top:.3em;
  width:100%;
  box-sizing:border-box;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* ボタン（要素button + .btnクラス両対応） */
button, .btn{
  margin-top:2em;
  background: var(--primary);
  color:#fff;
  border:none;
  padding:.8em;
  font-weight:bold;
  border-radius:8px;
  transition: background .25s;
  width:100%;
  text-decoration:none;
  display:inline-block;
  text-align:center;
}
button:hover, .btn:hover{ background: var(--primary-dark); cursor:pointer; }
.btns{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.btn-primary{ background:#06c; color:#fff; }
.btn-secondary{ background:#eee; color:#333; }
.btn[disabled], button[disabled]{ opacity:.5; pointer-events:none; }

/* 必須マーク（.required / .req を統一） */
.required, .req{ color: var(--danger); font-weight:bold; }
.req{ margin-left:.25em; }

/* 注意テキスト */
p.warning{ color: var(--danger); font-size:90%; margin-top:.5em; }

/* 通知ボックス */
.notice-box{
  background: var(--notice-bg);
  border-left:6px solid var(--notice-bd);
  padding:1.2em;
  margin-top:2em;
  font-size:.95em;
  color: var(--notice-fg);
  border-radius:8px;
  font-weight:bold;
}
.notice-box.notice-wide{ max-width: 860px; margin:0 auto 1rem; }
.notice-box ul{ margin:.5em 0 1em 1.2em; padding-left:1em; }
.notice-box li{ list-style:disc; margin-bottom:.5em; }

/* 同意ボックス */
.consent-box{
  background:#fffde7;
  border:1px solid #fbc02d;
  padding:1.2em;
  margin-top:1em;
  border-radius:8px;
  font-size:1em;
  text-align:center;
}
.consent-box input[type="checkbox"]{
  transform:scale(1.3);
  margin-right:.5em;
  vertical-align:middle;
}
.consent-box strong{ color:#e65100; }

/* 成功/エラー枠（confirmで使用） */
.ok-box{ background: var(--ok-bg); border:1px solid var(--ok-bd); padding:12px; margin:10px 0; color:var(--ok-fg); }
.error-box{ background: var(--err-bg); border:1px solid var(--err-bd); padding:12px; margin:10px 0; color:var(--err-fg); }

/* サブイベント一覧（index） */
.sub-event-list{ margin:12px 0 18px; padding:12px; border:1px solid #ddd; border-radius:6px; background:#fafafa; }
.sub-event-list__title{ font-weight:bold; margin-bottom:6px; }
.sub-event-list__intro{ margin:0 0 8px; color:#555; font-size:.95em; }
.sub-event-list__items{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:6px; }
@media (min-width:640px){ .sub-event-list__items{ grid-template-columns:1fr 1fr; } }
.sub-event-list__item{ padding:8px 10px; border:1px solid #ddd; border-radius:6px; background:#fff; cursor:pointer; }
.sub-event-list__item:hover{ border-color:#aaa; }
.sub-event-list__item.is-selected{ border-color:#08c; box-shadow:0 0 0 2px rgba(0,136,204,.15) inset; }
.sub-event-list__label{ font-weight:bold; }
.sub-event-list__desc{ display:block; color:#666; font-size:.9em; margin-top:2px; }

/* 住所入力（yubinbango） */
.h-adr .p-country-name{ display:none !important; }

/* フッター */
footer.site-footer{ margin:2rem 0 1rem; text-align:center; }

/* ============================================================
  ページ固有：index の補助
============================================================ */
.form-group{ margin-top:1em; }
.form-control{ width:100%; max-width:100%; }
.help{ font-size:.9em; color:#666; margin-top:.25em; }
.form-row{ margin-top:1em; }
.form-label{ font-weight:bold; display:block; margin-bottom:.25em; }
.form-field{ margin-top:.25em; }

/* 生年月日行 */
.birthdate-row{ display:flex; gap:.5em; flex-wrap:wrap; }
.birthdate-row select{ width:auto; flex:1 1 30%; min-width:100px; }

/* 学割注釈・支払UI・委託プランの初期状態 */
#student_note{ margin-top:.25rem; display:none; }
#payment_date_block{ display:none; margin-top:.5rem; }
#payment_notice{ display:none; }
#consign_plan_block{ display:none; margin-top:.75rem; }

/* スマホ警告（JSでdisplay切替） */
#sp-warning{ display:none; }

/* プレビュー画像（index） */
#cut-preview{
  max-width:400px; width:auto; height:auto; display:none;
  margin-top:1em; border:1px solid #ccc; border-radius:4px;
}
@media (max-width:480px){
  #cut-preview{ max-width:90%; max-height:300px; }
}

/* ============================================================
  ページ固有：confirm の体裁
============================================================ */
table.confirm,
.confirm-table{
  width:100%;
  max-width:900px;
  border-collapse:collapse;
  margin:12px 0;
}
table.confirm th, table.confirm td,
.confirm-table th, .confirm-table td{
  border:1px solid #ccc;
  padding:8px;
  vertical-align:top;
  /* 改めて break-all を抑止 */
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
  letter-spacing:normal;
}
table.confirm th, .confirm-table th{
  background:#fafafa;
  width:30%;
}

/* 画像プレビュー（confirmの <img class="img-preview"> 用） */
.img-preview{ max-width:320px; height:auto; display:block; }

/* ============================================================
  レスポンシブ微調整
============================================================ */
@media (max-width:480px){
  body{ padding:1em; }
  .form-container{ padding:1.2em; }
  button, .btn{ font-size:1em; padding:.7em; }
}

/* 参加費の金額を強調表示 */
.price-amount {         /* デフォはオレンジ */
  font-size: 1.2em;
  font-weight: 700;
  color: #e65100;
}
.price-amount.is-red {  /* 赤にしたい時は .is-red を追加 */
  color: #d32f2f;
}

/* 未入力プレースホルダ */
.muted { color: #c2c2c2; }