@charset "UTF-8";
/* =========================================================
   お話会アーカイブの申込フォーム（/ohanashikai/request/）
   ・年配の方でも読みやすいよう、本文は PC で 1rem（20px）以上
   ・読み込みは request.css?v=日付（tools/request-build.js の CSS_VER）。変えたら日付も変える
   ========================================================= */
.request-lead { max-width: 720px; margin: 0 auto 2.4rem; }
.request-lead p { font-size: 1rem; }
.request-price { margin-top: 1rem; font-family: var(--serif); font-size: 1.1rem !important; color: var(--black); }
.request-price strong { color: var(--berry); font-size: 1.2em; }
.request-note { font-size: .85rem !important; color: var(--ink-soft); }

.request-form { max-width: 680px; margin: 0 auto; padding: 2.4rem 2.2rem; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--magenta); text-align: left; }
.request-field { margin: 0 0 2rem; padding: 0; border: 0; min-width: 0; }
.request-field > label, .request-field > legend, .request-name label { display: block; margin: 0 0 .6rem; padding: 0; font-weight: 700; font-size: 1rem; color: var(--black); }
.request-req, .request-opt { display: inline-block; margin-left: .6em; padding: .05em .55em; border-radius: 3px; font-size: .7rem; font-weight: 700; vertical-align: .12em; }
.request-req { background: var(--berry); color: #fff; }
.request-opt { background: var(--off); color: var(--ink-soft); }
.request-form input[type="text"], .request-form input[type="email"], .request-form select, .request-form textarea {
  display: block; width: 100%; box-sizing: border-box; padding: .75em .85em; border: 1px solid #bdb7b0; border-radius: 6px;
  background: #fff; font: inherit; font-size: max(16px, 1rem); color: var(--ink);   /* 16px 以上：スマホで入力時に拡大されないように */
}
.request-form input:focus, .request-form select:focus, .request-form textarea:focus { outline: 2px solid var(--orchid); outline-offset: 1px; border-color: var(--orchid); }
.request-radio { display: inline-flex; align-items: center; gap: .5em; margin: 0 1.8em .5em 0; font-size: 1rem; cursor: pointer; }
.request-radio input { width: 1.3em; height: 1.3em; accent-color: var(--berry); }
.request-help { margin: .5rem 0 0; font-size: .82rem; color: var(--ink-soft); }
.request-help--top { margin: 0 0 1rem; }
.request-name { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.request-privacy { margin: .4rem 0 1.4rem; font-size: .82rem; color: var(--ink-soft); text-align: center; }
.request-submit { margin: 0; text-align: center; }
.request-submit .btn { min-width: 16em; }
.request-submit .btn[disabled] { opacity: .6; cursor: default; }

/* ---- ご希望の回：年ごとの小見出し＋1回1枚のカード ---- */
.request-cards { display: flex; flex-direction: column; gap: .75rem; }
.request-year { margin: 1rem 0 .1rem; padding-left: .7rem; border-left: 4px solid var(--magenta); font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--black); }
.request-year:first-child { margin-top: 0; }
.request-card {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; cursor: pointer;
  background: #fff; border: 2px solid var(--line); border-radius: 10px; transition: border-color .15s, background-color .15s;
}
.request-card:hover { border-color: var(--orchid); }
.request-card input { flex: none; width: 1.6rem; height: 1.6rem; margin: 0; accent-color: var(--berry); cursor: pointer; }
.request-card-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.request-card-month { font-size: .8rem; color: var(--ink-soft); letter-spacing: .04em; }
.request-card-title { font-size: 1rem; font-weight: 700; line-height: 1.6; color: var(--black); }
/* 選んだカード（JS が is-checked を付ける。JS が動かない環境でも :has で同じ見た目） */
.request-card.is-checked, .request-card:has(input:checked) { border-color: var(--berry); background: #fdf1f6; }
.request-card input:focus-visible { outline: 3px solid var(--orchid); outline-offset: 2px; }

/* 選択中の件数と合計 */
.request-total { margin: 1.2rem 0 0; padding: .9rem 1rem; background: var(--off); border-radius: 8px; font-size: 1rem; text-align: center; }
.request-total strong { color: var(--berry); font-size: 1.15em; }

/* スパム対策の欄（人間には見えない。display:none だと入力しないボットもいるので画面外に出す） */
.request-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* エラー画面 */
.request-error { padding: 2rem 1.6rem; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--berry); }
.request-error-title { font-family: var(--serif); font-weight: 700; font-size: 1.2rem !important; color: var(--berry); }

@media (max-width: 760px) {
  .request-form { padding: 1.6rem 1rem; }
  .request-card { padding: .9rem .9rem; gap: .8rem; }
  .request-card-title { font-size: .95rem; }
  .request-submit .btn { min-width: 0; width: 100%; }
}
.request-total .nw { display: inline-block; white-space: nowrap; }