/* サウザンドキャンドル ロマンティックディナー（thousand-candles.html 専用）
   共通の css/rpm.css のあとに読み込む */

/* ---------- ご案内 ---------- */
.tc-price small { font-size: .7rem; }
.tc-notice { max-width: 42rem; margin: 1.5rem auto 2rem; padding: 1.25rem; border-left: 3px solid var(--red); border-radius: var(--radius); background: var(--bg-ash); text-align: center; }
.tc-notice p { margin-bottom: .5rem; }
.tc-notice strong { color: var(--ink); }
.tc-notice .btn { margin-top: .5rem; }

/* ---------- 会場 ---------- */
.tc-mapwrap { margin: 2rem auto; }
@media (min-width: 768px) { .tc-mapwrap { max-width: 70%; } }   /* 画面いっぱいにしない（PC・iPad は70%） */
.venue__text { margin: .9rem 0 0; font-size: .75rem; line-height: 1.9; text-align: left; }

.tc-foot { margin-top: 1rem; margin-bottom: 0; }

/* ---------- サブナビの「ご予約」ボタン ---------- */
.subnav a.subnav__cta { align-self: center; margin-left: .25rem; padding: .3rem .9rem; border-radius: .25rem; background: var(--red); color: #fff; }
.subnav a.subnav__cta:hover { background: var(--red-hover); color: #fff; }

/* ---------- 白いパネル（読み物） ---------- */
.tc-panel { max-width: 54rem; margin-inline: auto; padding: 1.75rem 1.25rem; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.tc-panel + .tc-panel { margin-top: 2rem; }
.tc-panel > :last-child { margin-bottom: 0; }
.tc-panel .checks { margin-bottom: 1.25rem; }
.tc-panel a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .tc-panel { padding: 2.25rem 2.5rem; } }
.h-lg { font-size: 1.15rem; margin-bottom: .9rem; }
.tc-quote { margin: 1.25rem 0; text-align: center; font-size: 1rem; line-height: 1.8; color: var(--red); }
.tc-honey { display: grid; gap: 1.25rem; margin-block: 1.25rem; }
.tc-honey p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .tc-honey { grid-template-columns: repeat(3, 1fr); } }
.tc-villa__price { color: var(--ink); }
.tc-cta .btn { min-width: 16.5rem; }
@media (max-width: 575.98px) { .tc-cta .btn { width: 100%; } }

/* ---------- 予約フォーム（JS は js/thousand-candles.js） ---------- */
.tc-form-wrap { max-width: 760px; margin: 0 auto; }
.tc-form-wrap .title { margin-bottom: 1.25rem; }
.tc-form-note { margin: 0 0 1.75rem; padding: 1.1rem 1.25rem; background: #fff; border-left: 3px solid var(--red); font-size: .8rem; line-height: 1.8; }
.tc-form { display: grid; gap: 1.35rem; }
.tc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; align-items: start; }
.tc-field { display: grid; gap: .5rem; }
.tc-lang-bar { display: flex; justify-content: center; align-items: center; gap: .35rem; margin: 0 0 .85rem; }
.tc-lang-bar button { min-height: 44px; background: none; border: 0; padding: .35rem .55rem; font: inherit; font-weight: 700; font-size: 14px; color: #6b6b6b; cursor: pointer; }
.tc-lang-bar button.active { color: var(--red); text-decoration: underline; }
.tc-field label { font-size: .75rem; color: var(--ink); }
.tc-label-en { display: block; letter-spacing: .04em; }
.tc-label-local { display: block; margin-top: .15rem; color: var(--text); font-size: .92em; line-height: 1.5; }
#reserve.lang-en .tc-label-local { display: none; }
.tc-field .req { color: var(--red); margin-left: .25rem; font-size: .7rem; }
#tc-name { text-transform: uppercase; }
.tc-field input[type="text"],
.tc-field input[type="email"],
.tc-field input[type="tel"],
.tc-field input[type="date"],
.tc-field input[type="time"],
.tc-field select {
  box-sizing: border-box; width: 100%; height: 48px; min-height: 48px; padding: 0 14px;
  border: 1px solid #d6d6d6; border-radius: 0; background: #fff;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
}
.tc-field select {
  padding-right: 36px; appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.tc-field textarea {
  box-sizing: border-box; width: 100%; min-height: 140px; padding: 12px 14px;
  border: 1px solid #d6d6d6; background: #fff; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); resize: vertical;
}
.tc-field input:focus-visible, .tc-field select:focus-visible, .tc-field textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.tc-field input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin-right: .35rem; vertical-align: -.15rem; accent-color: var(--red); }
.tc-field small { color: #6b6b6b; font-size: .7rem; line-height: 1.7; }
.tc-form-errors { margin: 0 0 1.5rem; padding: 1rem 1.1rem; background: #fff5f5; border: 1px solid #f0caca; color: #8a1f1f; font-size: .8rem; }
.tc-form-errors ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.tc-form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .5rem; }
.tc-form-actions .btn { min-width: 16.5rem; margin: 0; cursor: pointer; font-family: inherit; }
.tc-form-actions .btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.tc-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tc-confirm-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #d6d6d6; }
.tc-confirm-list li { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #d6d6d6; align-items: start; }
.tc-confirm-list strong { font-size: .7rem; letter-spacing: .08em; color: #6b6b6b; font-weight: 400; }
.tc-confirm-list span { white-space: pre-wrap; word-break: break-word; color: var(--ink); }
[hidden] { display: none !important; }
@media (max-width: 700px) {
  .tc-form-row { grid-template-columns: 1fr; }
  .tc-confirm-list li { grid-template-columns: 1fr; gap: .35rem; }
}
@media (max-width: 575.98px) { .tc-form-actions .btn { width: 100%; } }
#reserve { scroll-margin-top: 8.6rem; }   /* リーフがサブナビに隠れない位置で止める */

/* ---------- 予約フォーム：進行状況（1 入力 → 2 内容確認 → 3 WhatsAppで送信） ----------
   いまの段階は JS が #reserve の data-step に書き込む。表示の切り替えは CSS で行う */
.tc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: none; }
.tc-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 0 .25rem; color: #6b6b6b; font-size: .7rem; line-height: 1.4; text-align: center; }
.tc-steps li + li::before { content: ""; position: absolute; top: .95rem; right: 50%; width: 100%; height: 2px; background: #d6d6d6; }
.tc-steps__n { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 2px solid #d6d6d6; border-radius: 50%; background: #fff; color: #6b6b6b; font: 700 .8rem/1 system-ui, -apple-system, sans-serif; }
.tc-steps li[aria-current="step"] { color: var(--red); font-weight: 700; }
.tc-steps li[aria-current="step"] .tc-steps__n { border-color: var(--red); background: var(--red); color: #fff; }
/* 済んだ段階 */
#reserve[data-step="2"] .tc-steps li:nth-child(1) .tc-steps__n,
#reserve[data-step="3"] .tc-steps li:nth-child(-n+2) .tc-steps__n { border-color: var(--red); color: var(--red); }
#reserve[data-step="2"] .tc-steps li:nth-child(2)::before,
#reserve[data-step="3"] .tc-steps li + li::before { background: var(--red); }
/* 段階ごとの案内文 */
.tc-note { display: none; }
#reserve[data-step="1"] .tc-note--1,
#reserve[data-step="2"] .tc-note--2,
#reserve[data-step="3"] .tc-note--3 { display: block; }
/* WhatsApp での手順 */
.tc-wa { margin-top: 1.75rem; padding: 1.25rem; border: 1px solid #cfe9d9; border-radius: var(--radius); background: #f3fbf6; }
.tc-wa__title { margin: 0 0 .75rem; font-size: .9rem; }
.tc-wa__list { margin: 0 0 1rem; padding-left: 1.4em; font-size: .8rem; line-height: 1.8; }
.tc-wa__list li + li { margin-top: .4rem; }
.tc-wa__send { vertical-align: -.4em; margin-left: .15rem; }
.tc-wa__warn { margin: 0 0 .5rem; color: var(--red); font-size: .85rem; font-weight: 700; line-height: 1.7; }
.tc-wa__after { margin: 0; font-size: .75rem; }
.tc-steps__t { word-break: keep-all; }
@media (max-width: 575.98px) { .tc-steps li { font-size: .6rem; } }
.tc-closed { text-align: center; margin-bottom: 0; }