/* 「2026-2027年 年末年始・冬休みの合宿免許」ページ固有スタイル。
   メインカラムの白背景やセクション区切りは top-renewal.css / guide-common.css の
   標準デザインをそのまま使い、ここではこのページ内の部品だけを定義する。
   色は guide-common.css の :root 変数を再利用し、同じ色を別名で再定義しない。
   冬のページだが青一色にはしない。CTA・選択状態はネクストのオレンジ、
   一時帰宅は淡い青、現地で年越しは淡い紫を補助色として使う。 */

.season-winter-page {
  --wp-home: #3a6ea5;
  --wp-home-bg: #eef4fb;
  --wp-stay: #6b5aa6;
  --wp-stay-bg: #f2eefb;
  --wp-check: #7a7f80;
  --wp-check-bg: #f2f4f4;
  --wp-yearend: #9a7600;
  --wp-yearend-bg: #fffbe6;
}

/* ---------- あなたはどの過ごし方？（クイック選択） ---------- */

.wp-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.wp-quick__item {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 18px 18px 16px;
  border: 1px solid var(--guide-border);
  border-radius: 16px;
  background: #fff;
  color: var(--guide-ink);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(45, 52, 54, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wp-quick__item:hover,
.wp-quick__item:focus-visible {
  border-color: var(--guide-orange);
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.14);
}

.wp-quick__item strong {
  font-size: 1.05rem;
  line-height: 1.5;
}

.wp-quick__count {
  color: var(--guide-orange-deep);
  font-weight: 700;
}

.wp-quick__note {
  color: var(--guide-muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ---------- ネクストおすすめ枠 ---------- */

.wp-recommend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 0;
}

/* 比較一覧の日程行と同じ読み方（ラベル＋値）にそろえたカード。
   教習所名だけを見出しにして、おすすめ理由は本文の重さに落とす。 */
.wp-rec {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--guide-border);
  border-radius: 16px;
  background: var(--guide-gold-pale);
}

.wp-rec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.wp-rec__pref {
  flex: 1 0 100%;
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.82rem;
}

.wp-rec__name {
  margin: 2px 0 0;
  font-size: 1.12rem;
  line-height: 1.5;
}

.wp-rec__reason {
  margin: 8px 0 0;
  color: var(--guide-muted);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
}

/* 値はラベルとセットで出す。何の日付・何の金額かをタグに推測させない。 */
.wp-rec__spec {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}

.wp-rec__spec > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff;
}

.wp-rec__spec dt {
  flex: 0 0 6em;
  color: var(--guide-muted);
  font-size: 0.82rem;
}

.wp-rec__spec dd {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 700;
}

.wp-rec__note {
  margin: 8px 0 0;
  color: var(--guide-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

/* CTAはカード下端でそろえる（カードごとの行数差で位置がずれないように） */
.wp-rec__actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.wp-rec__actions .guide-button {
  margin: 0;
  width: 100%;
  padding: 12px 18px;
  font-size: 0.95rem;
}

/* 比較一覧へ送る副CTA。オレンジは申込ボタンだけに残す。 */
.wp-rec__plans { font-size: 0.9rem; }

/* ---------- 絞り込み・並び替え ---------- */

.wp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 10px;
}

.wp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wp-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--guide-border);
  border-radius: 999px;
  background: #fff;
  color: var(--guide-ink);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}

.wp-filter span {
  color: var(--guide-muted);
  font-size: 0.8rem;
}

.wp-filter.is-active {
  border-color: var(--guide-orange-deep);
  background: var(--guide-orange-deep);
  color: #fff;
}

.wp-filter.is-active span {
  color: rgba(255, 255, 255, 0.85);
}

.wp-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.wp-sort select {
  padding: 8px 10px;
  border: 1px solid var(--guide-border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 0.9rem;
}

.wp-result {
  margin: 0 0 14px;
  color: var(--guide-muted);
  font-size: 0.88rem;
}

.wp-empty {
  margin: 16px 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--guide-soft);
}

/* ---------- 学校カード ---------- */

.wp-list {
  display: grid;
  gap: 16px;
}

.wp-card {
  padding: 20px;
  border: 1px solid var(--guide-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(45, 52, 54, 0.05);
}

.wp-card.is-focused {
  border-color: var(--guide-orange);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.18);
}

.wp-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wp-card__pref {
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.82rem;
}

.wp-card__name {
  margin: 2px 0 0;
  font-size: 1.1rem;
  line-height: 1.5;
}

.wp-card__name a {
  color: inherit;
}

.wp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
}

.wp-badge--recommend {
  background: var(--guide-gold-pale);
  color: var(--guide-gold-dark);
  border: 1px solid var(--guide-gold);
}

.wp-badge--home { background: var(--wp-home-bg); color: var(--wp-home); }
.wp-badge--stay { background: var(--wp-stay-bg); color: var(--wp-stay); }
.wp-badge--check { background: var(--wp-check-bg); color: var(--wp-check); }
.wp-badge--year-end { background: var(--wp-yearend-bg); color: var(--wp-yearend); }

.wp-card__reason {
  margin: 10px 0 0;
  font-weight: 700;
}

.wp-card__members {
  margin: 10px 0 0;
  font-size: 0.88rem;
}

.wp-card__members summary {
  cursor: pointer;
  color: var(--guide-orange-deep);
}

.wp-card__members ul {
  margin: 8px 0;
  padding-left: 1.2em;
  color: var(--guide-muted);
}

.wp-card__members p {
  margin: 0;
  color: var(--guide-muted);
}

/* ---------- 日程行 ---------- */

.wp-plans {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.wp-plan {
  padding: 14px 16px;
  border: 1px solid var(--guide-border);
  border-radius: 14px;
  background: var(--guide-soft);
}

.wp-plan.is-selected {
  border-color: var(--guide-orange-deep);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--guide-orange-deep);
}

/* JSが動いているときだけ4件目以降を畳む */
.wp-list.is-enhanced .wp-plan.is-extra { display: none; }

.wp-plan__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.wp-plan__arrow { color: var(--guide-muted); }

/* 1枚のカードに年内卒業と年越しが混ざるので、年越し方法は日程行にも出す */
.wp-plan__type { font-size: 0.74rem; }

.wp-plan__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  color: var(--guide-muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.wp-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 8px 0 0;
}

.wp-price {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.wp-price__label {
  /* 「キャンペーン」のような長い区分名が1文字ずつ折り返されないようにする */
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--guide-muted);
  font-size: 0.8rem;
}

.wp-price__value { min-width: 0; }

.wp-price__value {
  font-weight: 700;
}

.wp-price__tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--guide-border);
  color: var(--guide-muted);
  font-size: 0.74rem;
}

.wp-plan__note {
  margin: 6px 0 0;
  color: var(--guide-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.wp-plan__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 12px 0 0;
}

.wp-plan__cta {
  margin: 0;
  padding: 10px 18px;
  font-size: 0.9rem;
}

.wp-compare-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  cursor: pointer;
}

.wp-compare-check input { width: 18px; height: 18px; }

.wp-compare-check input:disabled + span { color: var(--guide-muted); }

.wp-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 0;
}

.wp-card__more { margin: 0; }

.wp-card__more-btn {
  padding: 8px 14px;
  border: 1px solid var(--guide-border);
  border-radius: 999px;
  background: #fff;
  color: var(--guide-orange-deep);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.wp-card__detail { font-size: 0.88rem; }

/* ---------- 表 ---------- */

/* 表は .guide-table-scroll の中で横スクロールさせる。
   列ごとに最小幅を持たせないと、料金など長い列に押されて教習所名が
   1文字ずつ折り返されるので、幅は縮めずスクロールで見せる。 */
.wp-table {
  width: 100%;
  /* 下で指定する列ごとの最小幅の合計より広くしておく。ここが足りないと
     ブラウザが最小幅を無視して列を圧縮し、教習所名が1文字ずつ折り返る。 */
  min-width: 940px;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
}

.wp-table th,
.wp-table td {
  padding: 14px 16px;
  border: 1px solid var(--guide-border);
  vertical-align: top;
  text-align: left;
  line-height: 1.7;
}

.wp-table thead th {
  background: var(--guide-soft);
  white-space: nowrap;
}

/* 教習所名の列 */
.wp-table tbody th {
  min-width: 13em;
  font-weight: 700;
}

.wp-table td { min-width: 6.5em; }

/* 日付だけの列は折り返さない */
.wp-table__date { white-space: nowrap; }

/* 料金は金額と注記が入るので広めに取る */
.wp-table__price { min-width: 16em; }

.wp-table__prices {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-table__prices li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}

.wp-table__prices span {
  flex: 0 0 auto;
  color: var(--guide-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.wp-table__pref {
  display: block;
  color: var(--guide-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.wp-table__note {
  display: block;
  margin-top: 4px;
  color: var(--guide-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.wp-table__cta {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--guide-orange-deep);
  color: #fff;
  font-size: 0.84rem;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- 3パターンの説明 ---------- */

.wp-pattern {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.wp-pattern__item {
  padding: 18px;
  border: 1px solid var(--guide-border);
  border-radius: 16px;
}

.wp-pattern__item h3 { margin: 0 0 8px; font-size: 1.02rem; }
.wp-pattern__item p { margin: 0; line-height: 1.8; }

.wp-pattern__item--year-end { background: var(--wp-yearend-bg); }
.wp-pattern__item--home { background: var(--wp-home-bg); }
.wp-pattern__item--stay { background: var(--wp-stay-bg); }

/* ---------- 現地で年越しのカード ---------- */

.wp-stay {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid var(--guide-border);
  border-radius: 18px;
  background: var(--wp-stay-bg);
}

.wp-stay__pref { margin: 0; color: var(--guide-muted); font-size: 0.82rem; }
.wp-stay__name { margin: 2px 0 12px; font-size: 1.12rem; }
.wp-stay__name a { color: inherit; }

.wp-stay__spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0 0 16px;
}

.wp-stay__spec > div {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
}

.wp-stay__spec dt {
  flex: 0 0 6.5em;
  color: var(--guide-muted);
  font-size: 0.84rem;
}

.wp-stay__spec dd { margin: 0; font-weight: 700; }

/* ---------- 交通費・確認リスト ---------- */

.wp-transport,
.wp-checklist {
  display: grid;
  gap: 0;
  margin: 18px 0;
  border: 1px solid var(--guide-border);
  border-radius: 14px;
  overflow: hidden;
}

.wp-transport dt,
.wp-checklist dt {
  padding: 12px 16px 4px;
  background: var(--guide-soft);
  font-weight: 700;
}

.wp-transport dd,
.wp-checklist dd {
  margin: 0;
  padding: 4px 16px 14px;
  background: var(--guide-soft);
  line-height: 1.8;
}

.wp-transport dd:not(:last-child),
.wp-checklist dd:not(:last-child) {
  border-bottom: 1px solid var(--guide-border);
}

.wp-inline-links { margin: 10px 0 0; }

/* ---------- 関連リンク ---------- */

.wp-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.wp-related-card {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--guide-border);
  border-radius: 14px;
  background: #fff;
  color: var(--guide-ink);
  text-decoration: none;
}

.wp-related-card:hover { border-color: var(--guide-orange); }
.wp-related-card span { color: var(--guide-muted); font-size: 0.86rem; line-height: 1.6; }

/* ---------- 比較トレイ ---------- */

/* 画面に居座るバーなので、1行に収まる高さに抑える。
   PCでは「選択中 n/3 ＋ 選んだ日程 ＋ 比べる」を横一列に並べる。 */
.wp-tray {
  position: fixed;
  left: 50%;
  bottom: 76px;
  z-index: 60;
  width: min(660px, calc(100vw - 20px));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 12px;
  border: 1px solid var(--guide-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(45, 52, 54, 0.16);
}

/* display を持つ要素は hidden 属性だけでは隠れないので明示する */
.wp-tray[hidden] { display: none; }

.wp-tray__title {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.wp-tray__title span { color: var(--guide-orange-deep); }

.wp-tray__list {
  flex: 1 1 12em;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.wp-tray__list li {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--guide-border);
  border-radius: 999px;
  font-size: 0.74rem;
}

.wp-tray__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-tray__remove {
  flex: 0 0 auto;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--guide-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.wp-tray__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.wp-tray__actions .guide-button { margin: 0; padding: 7px 14px; font-size: 0.82rem; }

.wp-tray__actions .guide-button::after { margin-left: 6px; }

.wp-tray__clear {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--guide-muted);
  font-family: inherit;
  font-size: 0.76rem;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- 比較モーダル ---------- */

.wp-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(45, 52, 54, 0.5);
}

/* display を持つ要素は hidden 属性だけでは隠れないので明示する */
.wp-modal[hidden] { display: none; }

.wp-modal__inner {
  width: min(920px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.wp-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--guide-border);
}

.wp-modal__head h2 { margin: 0; font-size: 1.05rem; }

.wp-modal__close {
  padding: 8px 14px;
  border: 1px solid var(--guide-border);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.wp-modal__body {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: auto;
}

.wp-table--compare { min-width: 560px; }
.wp-table--compare thead th:first-child,
.wp-table--compare tbody th { white-space: nowrap; }

body.wp-modal-open { overflow: hidden; }

/* ---------- SP ---------- */

@media (max-width: 767px) {
  .wp-quick,
  .wp-recommend,
  .wp-pattern,
  .wp-related-grid,
  .wp-stay__spec {
    grid-template-columns: minmax(0, 1fr);
  }

  .wp-controls { align-items: stretch; gap: 8px; margin-top: 16px; }
  .wp-sort { justify-content: flex-end; }

  /* 絞り込みは縦に積み上がると場所を取るので、詰めて2行に収める */
  .wp-filters { gap: 6px; }
  .wp-filter { padding: 7px 11px; font-size: 0.84rem; }

  .wp-card { padding: 16px; }
  .wp-plan { padding: 12px 14px; }
  .wp-plan__dates { font-size: 0.98rem; }
  .wp-plan__cta { width: 100%; text-align: center; }

  /* SPは「選択中 n/3 ＋ 比べる」を1行目、選んだ日程を2行目の横スクロールに畳んで
     画面を塞がない高さにする */
  .wp-tray { bottom: 70px; padding: 8px 10px; gap: 6px; }
  .wp-tray__title { order: 0; }
  .wp-tray__actions { order: 1; }

  .wp-tray__list {
    order: 2;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .wp-tray__list li { flex: 0 0 auto; max-width: 60vw; }
}