@charset "UTF-8";
/* 沼津市「長寿を祝う会」申込フォーム — 高齢者向けアクセシブルスタイル
   文字サイズ可変（fs-s/fs-m/fs-l で --base-font を切替、rem基準で全体スケール）。 */

:root{
  --base-font: 20px;          /* 既定=中。fs-s/fs-l で上書き */
  --font-ud:"BIZ UDPGothic","Yu Gothic","游ゴシック",Meiryo,"メイリオ",sans-serif;   /* 本文＝UDゴシック太字 */
  --font-mincho:"Yu Mincho","游明朝","Hiragino Mincho ProN",serif;                    /* 見出し＝明朝 */
  --crim:#9E1B32; --dcrim:#7A1226; --gold:#B0883A;
  --ink:#22201d; --mut:#5a5248;
  --ok-bg:#e6f4ea; --ok-bd:#2e7d46;
  --err-bg:#fdecea; --err-bd:#c62828;
  --line:#d8d2c4; --card:#ffffff; --page:#f6f3ec;
  --focus:#1558d6;
  --radius:12px;
}
html.fs-s{ --base-font:17px; }
html.fs-m{ --base-font:20px; }
html.fs-l{ --base-font:25px; }

*{ box-sizing:border-box; }
html{ font-size:var(--base-font); }
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--font-ud); font-weight:700;   /* UDゴシック・太字で表示 */
  line-height:1.8; -webkit-text-size-adjust:100%;
}

/* 見出しの大きな文字は明朝体 */
.cj-header__title, .cj-lead__title, .cj-card__title, .cj-subcard__title,
.cj-confirm-banner__big, .cj-review__h, .cj-complete__title, .cj-status-card__title{
  font-family:var(--font-mincho);
}

/* スキップリンク */
.cj-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--crim); color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 0;
}
.cj-skip:focus{ left:0; }

/* ヘッダー */
.cj-header{ background:#fff; border-bottom:3px solid var(--gold); }
.cj-header__inner{
  max-width:820px; margin:0 auto; padding:.7rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.cj-header__title{
  margin:0; font-family:"Yu Mincho","游明朝",serif; color:var(--crim);
  font-size:1.15rem; font-weight:700; line-height:1.4;
}
.cj-fiscal{
  display:inline-block; font-size:.7rem; border:1px solid var(--crim); color:var(--crim);
  border-radius:14px; padding:0 .6rem; margin-right:.5rem; vertical-align:middle;
}
.cj-header__sub{ font-size:.85rem; color:var(--mut); }

/* 文字サイズ調整 */
.cj-fontsize{ display:flex; align-items:center; gap:.35rem; }
.cj-fontsize__label{ font-size:.8rem; color:var(--mut); margin-right:.2rem; }
.cj-fontsize__btn{
  min-width:2.6rem; min-height:2.6rem; padding:.2rem .5rem;
  font-size:1rem; border:2px solid var(--gold); background:#fff; color:var(--dcrim);
  border-radius:8px; cursor:pointer; font-weight:700;
}
.cj-fontsize__btn[aria-pressed="true"]{ background:var(--gold); color:#fff; }
.cj-fontsize__btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* メイン */
.cj-main{ max-width:820px; margin:0 auto; padding:1.2rem 1rem 3rem; }
.cj-lead{ text-align:center; margin:1rem 0 1.4rem; }
.cj-lead__title{ font-family:"Yu Mincho","游明朝",serif; color:var(--crim); font-size:1.5rem; margin:.2rem 0 .6rem; line-height:1.4; }
.cj-lead__text{ font-size:1rem; color:var(--ink); margin:0; }

/* 開催概要アコーディオン */
.cj-accordion{ background:#fff; border:2px solid var(--gold); border-radius:var(--radius); margin:0 0 1.4rem; overflow:hidden; }
.cj-accordion__head{
  list-style:none; cursor:pointer; padding:1rem 1.2rem; font-size:1.15rem; font-weight:700;
  color:var(--dcrim); background:#fbf6ec; display:flex; align-items:center; gap:.6rem;
}
.cj-accordion__head::-webkit-details-marker{ display:none; }
.cj-accordion__head:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
.cj-accordion__icon{ width:1.1rem; height:1.1rem; border-right:3px solid var(--crim); border-bottom:3px solid var(--crim); transform:rotate(45deg); transition:transform .2s; flex:none; margin-top:-.3rem; }
.cj-accordion[open] .cj-accordion__icon{ transform:rotate(-135deg); margin-top:.2rem; }
.cj-accordion__body{ padding:1rem 1.2rem 1.3rem; border-top:1px solid var(--line); }
.cj-accordion__h{ font-family:var(--font-mincho); font-size:1.15rem; color:var(--dcrim); margin:.8rem 0 .5rem; border-bottom:2px solid var(--gold); padding-bottom:.3rem; }
.cj-accordion__h:first-child{ margin-top:0; }
.cj-accordion__foot{ font-size:.9rem; color:var(--mut); margin:1rem 0 0; }
.cj-outline{ display:grid; grid-template-columns:5.5rem 1fr; gap:.4rem .9rem; margin:0; }
.cj-outline dt{ color:var(--mut); }
.cj-outline dd{ margin:0; }
.cj-outline__events{ margin:.4rem 0 0; padding-left:1.2rem; }
.cj-outline__events li{ margin:.15rem 0; }
.cj-performers-list{ margin:0; font-size:1.1rem; }
@media(max-width:520px){ .cj-outline{ grid-template-columns:1fr; gap:.1rem; } .cj-outline dt{ margin-top:.5rem; } }

/* カード */
.cj-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.1rem; margin:0 0 1.2rem; box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.cj-card__title{
  display:flex; align-items:center; gap:.6rem; margin:0 0 1rem;
  font-size:1.25rem; color:var(--dcrim); border-bottom:2px solid var(--gold); padding-bottom:.6rem;
}
.cj-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:50%; background:var(--crim); color:#fff;
  font-size:1.05rem; font-weight:700; flex:none;
}
.cj-subcard{ background:#faf8f3; border:1px solid var(--line); border-radius:10px; padding:.9rem; margin-bottom:.9rem; }
.cj-subcard__title{ margin:0 0 .7rem; font-size:1.05rem; color:var(--dcrim); }

/* フィールド */
.cj-field{ margin:0 0 1.1rem; padding:.7rem .8rem; border-radius:10px; border:1px solid transparent; }
.cj-field:last-child{ margin-bottom:0; }
.cj-label{ display:block; font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.cj-req{ display:inline-block; background:var(--crim); color:#fff; font-size:.72rem; font-weight:700; padding:.05rem .5rem; border-radius:5px; margin-left:.4rem; vertical-align:middle; }
.cj-help{ font-size:.9rem; color:var(--mut); margin:0 0 .5rem; line-height:1.6; }
.cj-note{ font-size:1rem; background:#fff8e8; border:1px solid var(--gold); border-radius:8px; padding:.6rem .8rem; margin:0 0 .8rem; }

.cj-input{
  width:100%; font-size:1.15rem; padding:.7rem .8rem; line-height:1.5;
  border:2px solid #b8b0a0; border-radius:9px; background:#fff; color:var(--ink);
  min-height:3rem; font-family:inherit;
}
.cj-input:focus-visible, .cj-select:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; border-color:var(--focus); }
.cj-input--num{ letter-spacing:.08em; }
.cj-input--postal{ max-width:11rem; }
.cj-select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%237A1226' d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; padding-right:2.4rem; }
.cj-select--narrow{ max-width:9rem; }

.cj-postal-row{ display:flex; gap:.6rem; align-items:flex-start; flex-wrap:wrap; }

/* 妥当（薄緑）／不備（薄赤）ティント */
.cj-field--ok{ background:var(--ok-bg); border-color:var(--ok-bd); }
.cj-field--ok .cj-input, .cj-field--ok .cj-select{ border-color:var(--ok-bd); }
.cj-field--error{ background:var(--err-bg); border-color:var(--err-bd); }
.cj-field--error .cj-input, .cj-field--error .cj-select{ border-color:var(--err-bd); }
.cj-field__msg{ display:none; }
.cj-field__msg--show, .cj-field--error .cj-field__msg{ display:block; color:var(--dcrim); font-size:.95rem; font-weight:700; margin-top:.45rem; }

/* 長い値（メールアドレス・住所）は折り返して入力欄自体が縦に広がる（textarea・自動リサイズ）
   文字は縮小しないため、はみ出さず全文が見える。 */
.cj-textfit{
  resize:none; overflow:hidden;
  white-space:pre-wrap; word-break:break-all; overflow-wrap:anywhere;
  font-family:inherit;
}
/* 電話番号は数字の途中ではなく、ハイフンの位置で折り返す（読みやすさのため） */
.cj-input--num.cj-textfit{ word-break:normal; overflow-wrap:break-word; }

/* ラジオ・チェック（大きめ） */
.cj-radios{ display:flex; gap:.8rem; flex-wrap:wrap; }
.cj-radio{ display:flex; align-items:center; gap:.5rem; border:2px solid #b8b0a0; border-radius:10px; padding:.6rem 1.1rem; background:#fff; cursor:pointer; font-size:1.1rem; min-height:3rem; }
/* 選ぶと緑（＝正しく選べた合図）。赤系だと「間違い」と誤解されるため。 */
.cj-radio input{ width:1.5rem; height:1.5rem; accent-color:var(--ok-bd); }
.cj-radio:has(input:checked){ border-color:var(--ok-bd); background:var(--ok-bg); font-weight:700; }
.cj-check{ display:flex; align-items:center; gap:.6rem; font-size:1.15rem; cursor:pointer; }
.cj-check input{ width:1.7rem; height:1.7rem; accent-color:var(--ok-bd); }

/* 希望の回：選択肢が長いため、全幅の縦並びラジオにして全文を折り返し表示する
   （select の選択肢は折り返せず見切れるため） */
.cj-radios--stack{ flex-direction:column; gap:.6rem; }
.cj-radios--stack .cj-radio{ width:100%; padding:.7rem .9rem; align-items:flex-start; }
.cj-radios--stack .cj-radio input{ flex:none; margin-top:.15rem; }
.cj-choice{ flex:1; min-width:0; display:block; line-height:1.45; }
.cj-choice__date{ display:block; }
.cj-choice__time{ display:block; font-weight:400; }

/* 条件表示 */
.cj-conditional{ margin-top:.6rem; }
.cj-conditional[hidden]{ display:none; }

/* 同意 */
.cj-consent-box{ background:#faf8f3; border:1px solid var(--line); border-radius:8px; padding:.9rem; font-size:.95rem; margin-bottom:1rem; max-height:16rem; overflow:auto; }

/* ボタン */
.cj-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; padding:.7rem 1.4rem; border-radius:10px;
  border:2px solid transparent; cursor:pointer; text-decoration:none; min-height:3rem; font-family:inherit;
}
.cj-btn--primary{ background:var(--crim); color:#fff; }
.cj-btn--primary:hover{ background:var(--dcrim); }
.cj-btn--sub{ background:#fff; color:var(--dcrim); border-color:var(--gold); }
.cj-btn--big{ font-size:1.3rem; padding:1rem 2rem; width:100%; max-width:26rem; }
.cj-btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.cj-btn[disabled]{ opacity:.6; cursor:progress; }

.cj-submit-row{ text-align:center; margin-top:1.6rem; }
.cj-submit-note{ font-size:.95rem; color:var(--mut); margin:.8rem 0 0; }

/* 上部アラート */
.cj-alert{ border-radius:10px; padding:1rem 1.1rem; margin:0 0 1.2rem; }
.cj-alert--error{ background:var(--err-bg); border:2px solid var(--err-bd); }
.cj-alert__title{ margin:0 0 .3rem; font-size:1.15rem; font-weight:700; color:var(--dcrim); }
.cj-alert__body{ margin:0; font-size:1rem; }

/* 確認画面 */
.cj-confirm-banner{ text-align:center; background:#fff8e8; border:3px solid var(--crim); border-radius:14px; padding:1.4rem 1rem; margin:0 0 1.4rem; }
.cj-confirm-banner__lead{ margin:0; font-size:1.1rem; color:var(--dcrim); }
.cj-confirm-banner__big{ margin:.2rem 0 .6rem; font-size:1.8rem; font-weight:800; color:var(--crim); font-family:"Yu Mincho","游明朝",serif; }
.cj-confirm-banner__note{ margin:0; font-size:1.05rem; }
.cj-review{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; margin-bottom:1.4rem; }
.cj-review__h{ font-size:1.15rem; color:var(--dcrim); border-bottom:2px solid var(--gold); padding-bottom:.4rem; margin:1.2rem 0 .6rem; }
.cj-review__h:first-child{ margin-top:0; }
.cj-review__dl{ display:grid; grid-template-columns:9rem 1fr; gap:.3rem .8rem; margin:0; }
.cj-review__dl dt{ color:var(--mut); font-size:1rem; }
.cj-review__dl dd{ margin:0; font-size:1.1rem; font-weight:700; word-break:break-all; }
.cj-review__none{ font-size:1.1rem; font-weight:700; margin:.2rem 0; }
.cj-confirm-actions{ text-align:center; }
.cj-confirm-actions__main{ margin-bottom:.8rem; }
.cj-confirm-actions__main .cj-btn, .cj-confirm-actions__back .cj-btn{ margin:0 auto; }
.cj-confirm-actions__back{ margin-bottom:.4rem; }

/* 完了画面 */
.cj-complete{ text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.2rem; }
.cj-complete__check{ width:5rem; height:5rem; margin:0 auto 1rem; border-radius:50%; background:var(--ok-bd); color:#fff; font-size:3rem; display:flex; align-items:center; justify-content:center; }
.cj-complete__title{ font-size:1.7rem; color:var(--ok-bd); margin:0 0 1.2rem; font-family:"Yu Mincho","游明朝",serif; }
.cj-complete__receipt{ background:#f6f3ec; border:2px dashed var(--gold); border-radius:12px; padding:1.2rem; margin:0 0 1.4rem; }
.cj-complete__receipt-label{ margin:0; font-size:1rem; color:var(--mut); }
.cj-complete__receipt-no{ margin:.2rem 0; font-size:2.2rem; font-weight:800; letter-spacing:.05em; color:var(--dcrim); }
.cj-complete__receipt-note{ margin:0; font-size:.95rem; color:var(--mut); }
.cj-complete__mail{ font-size:1.05rem; margin:0 0 1.2rem; }
.cj-complete__mail-warn{ background:#fdecea; border:1px solid var(--err-bd); border-radius:8px; padding:.8rem; font-size:1rem; text-align:left; }
.cj-complete__after{ font-size:1rem; color:var(--mut); }

/* 状態カード（受付前/終了） */
.cj-status-card{ text-align:center; background:#fff; border:2px solid var(--gold); border-radius:14px; padding:2.4rem 1.4rem; margin-top:1.5rem; }
.cj-status-card__mark{ display:inline-block; background:var(--crim); color:#fff; font-size:1rem; font-weight:700; padding:.3rem 1.2rem; border-radius:20px; margin:0 0 1rem; }
.cj-status-card__title{ font-size:1.5rem; color:var(--dcrim); margin:0 0 1rem; font-family:"Yu Mincho","游明朝",serif; }
.cj-status-card__text{ font-size:1.1rem; margin:0; }

/* フッター */
.cj-footer{ background:#fff; border-top:3px solid var(--gold); margin-top:2rem; }
.cj-footer__inner{ max-width:820px; margin:0 auto; padding:1.4rem 1rem; text-align:center; }
.cj-footer__addr{ font-size:.95rem; margin:0 0 .3rem; }
.cj-footer__org{ font-weight:700; color:var(--dcrim); margin:0 0 .5rem; font-size:1.05rem; }
.cj-footer__line{ font-size:1rem; margin:0 0 .3rem; }
.cj-footer__line a{ color:var(--crim); font-weight:700; text-decoration:none; }
.cj-footer__note{ font-size:.9rem; color:var(--mut); margin:.6rem 0 0; }

@media (max-width:520px){
  .cj-header__inner{ justify-content:center; }
  .cj-review__dl{ grid-template-columns:1fr; gap:.1rem; }
  .cj-review__dl dt{ margin-top:.6rem; }
  .cj-btn--big{ font-size:1.2rem; }

  /* 文字サイズ「大」でも入力欄の表示幅を確保するため、左右の余白だけpx固定にする
     （縦の余白は rem のまま＝ゆとりを維持。入力欄の文字は縮小しない） */
  .cj-main{ padding-left:10px; padding-right:10px; }
  .cj-card{ padding-left:12px; padding-right:12px; }
  .cj-field{ padding-left:8px; padding-right:8px; }
  .cj-input{ padding-left:10px; padding-right:10px; }
  .cj-input--num{ letter-spacing:0; }  /* 電話番号の横幅を稼ぐ */
  .cj-subcard{ padding-left:10px; padding-right:10px; }
  /* 希望の回のラジオ：文字の折り返しを減らすため左右の余白と丸印を少し詰める */
  .cj-radios--stack .cj-radio{ padding-left:8px; padding-right:8px; gap:.4rem; }
  .cj-radios--stack .cj-radio input{ width:1.4rem; height:1.4rem; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }