@charset "UTF-8";

/* =====================================================================
   ポピンズ ハワイ お問い合わせ（日本語／英語共通）
   page-hawaii-form.php（/hawaii/contact/）と
   page-hawaii-form-en.php（/hawaii/english/contact/）が読み込む。
   全セレクタを #rnw-hwf 配下にスコープしている（.head .body .btn などの汎用名のため）。
   見た目は総合English /english/contact/ のステップフォームと同じ構成で、
   色はハワイページのボタン色（--rnw-link #912344）に合わせている。
   ===================================================================== */

#rnw-hwf {
  --hwf-main: #912344;       /* = --rnw-link。ハワイページの赤ボタン */
  --hwf-main-deep: #6f1a34;
  --hwf-soft: #f8ebef;
  --hwf-ink: #444444;        /* = --rnw-text */
  --hwf-sub: #7a7a7a;
  --hwf-line: #e2e2e2;       /* = --rnw-border */
  --hwf-bg: #faf7f2;         /* = --rnw-bg1 */
  --hwf-err: #d0314f;

  background: var(--hwf-bg);
  color: var(--hwf-ink);
  font-family: var(--rnw-font-jp, 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif);
  line-height: 1.7;
  /* 固定ヘッダーの高さぶん下げる。--rnw-header-h-pc は top-chrome.css で
     PC 88px／1023px以下は SPヘッダー＋1px に切り替わる。 */
  padding: calc(var(--rnw-header-h-pc, 88px) + 32px) 16px 64px;
}

/* 英語版（page-hawaii-form-en.php）は英語ハワイのヘッダー（hawaii/css/chrome.css の .hwc-header）。
   1023px以下はSPヘッダー 59px（--hwc-header-h-sp）。1024px以上は 88px で上の指定のまま。 */
@media only screen and (max-width: 1023px) {
  #rnw-hwf[data-lang="en"] { padding-top: calc(var(--hwc-header-h-sp, 59px) + 32px); }
}

#rnw-hwf *,
#rnw-hwf *::before,
#rnw-hwf *::after { box-sizing: border-box; }

#rnw-hwf input,
#rnw-hwf select,
#rnw-hwf textarea,
#rnw-hwf button { font: inherit; color: inherit; }

#rnw-hwf [hidden] { display: none !important; }

#rnw-hwf .shell { max-width: 640px; margin: 0 auto; }

/* --- ヘッダー帯・ステップ --- */
#rnw-hwf .head { background: linear-gradient(135deg, var(--hwf-main) 0%, var(--hwf-main-deep) 100%); color: #fff; border-radius: 16px 16px 0 0; padding: 30px 32px 24px; }
#rnw-hwf .head h1 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: .02em; }
#rnw-hwf .head p { margin: 0; font-size: 13px; color: rgba(255,255,255,.85); }

#rnw-hwf .steps { display: flex; margin: 22px 0 0; }
#rnw-hwf .snode { flex: 1; text-align: center; position: relative; }
#rnw-hwf .snode::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: rgba(255,255,255,.25); }
#rnw-hwf .snode:first-child::before { display: none; }
#rnw-hwf .snode.done::before, #rnw-hwf .snode.active::before { background: rgba(255,255,255,.9); }
#rnw-hwf .sdot { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.2); color: #fff; position: relative; z-index: 1; transition: background .25s, transform .25s; }
#rnw-hwf .snode.active .sdot { background: #fff; color: var(--hwf-main); transform: scale(1.08); }
#rnw-hwf .snode.done .sdot { background: rgba(255,255,255,.9); color: var(--hwf-main); }
#rnw-hwf .slabel { font-size: 11px; color: rgba(255,255,255,.8); }
#rnw-hwf .snode.active .slabel { color: #fff; }

/* --- 本体 --- */
#rnw-hwf .body { background: #fff; border-radius: 0 0 16px 16px; padding: 30px 32px 34px; box-shadow: 0 8px 30px rgba(145,35,68,.08); }
#rnw-hwf .panel { display: none; animation: rnw-hwf-fade .3s ease; }
#rnw-hwf .panel.active { display: block; }
@keyframes rnw-hwf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#rnw-hwf .lead { text-align: center; font-size: 16px; font-weight: 700; margin: 0 0 18px; }
#rnw-hwf .psub { text-align: center; font-size: 13px; color: var(--hwf-sub); margin: -8px 0 20px; }
#rnw-hwf .qhead { font-size: 14px; font-weight: 700; margin: 26px 0 14px; padding-top: 20px; border-top: 1px solid var(--hwf-line); }
#rnw-hwf [data-section] > .qhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#rnw-hwf .note { font-size: 12px; color: var(--hwf-sub); margin: 6px 0 0; }

/* --- サービス選択 --- */
#rnw-hwf .radios { display: flex; flex-direction: column; gap: 10px; }
#rnw-hwf .radio-row { position: relative; display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--hwf-line); border-radius: 10px; padding: 14px 16px; cursor: pointer; font-size: 15px; font-weight: 500; transition: border-color .2s, background .2s; }
#rnw-hwf .radio-row:hover { border-color: var(--hwf-main); }
#rnw-hwf .radio-row.selected { border-color: var(--hwf-main); background: var(--hwf-soft); }
#rnw-hwf .radio-row small { display: block; font-size: 12px; font-weight: 400; color: var(--hwf-sub); }
#rnw-hwf .radio-row .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--hwf-line); flex: 0 0 auto; position: relative; }
#rnw-hwf .radio-row.selected .dot { border-color: var(--hwf-main); }
#rnw-hwf .radio-row.selected .dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--hwf-main); }
#rnw-hwf .radio-row input { position: absolute; opacity: 0; pointer-events: none; }
#rnw-hwf .radio-row input:focus-visible + .dot { outline: 2px solid var(--hwf-main); outline-offset: 2px; }

#rnw-hwf .square { margin-top: 18px; padding: 18px 20px; border-radius: 10px; background: var(--hwf-soft); text-align: center; font-size: 14px; }
#rnw-hwf .square p { margin: 0 0 14px; }
#rnw-hwf .square .btn { display: inline-block; min-width: 240px; text-decoration: none; }

#rnw-hwf .hint { font-size: 13px; color: var(--hwf-main); background: var(--hwf-soft); border-radius: 8px; padding: 12px 14px; margin: 0 0 20px; }

/* --- 入力欄 --- */
#rnw-hwf .field { margin-bottom: 18px; }
#rnw-hwf .lbl { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
#rnw-hwf .req { color: var(--hwf-main); font-size: 11px; margin-left: 6px; }
#rnw-hwf .opt { color: var(--hwf-sub); font-size: 11px; margin-left: 6px; }

#rnw-hwf .field input[type="text"],
#rnw-hwf .field input[type="email"],
#rnw-hwf .field input[type="tel"],
#rnw-hwf .field input[type="date"],
#rnw-hwf .field input[type="number"],
#rnw-hwf .field select,
#rnw-hwf .field textarea { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--hwf-line); border-radius: 8px; font-size: 16px; line-height: 1.5; background: #fcfcfc; -webkit-appearance: none; appearance: none; }
#rnw-hwf .field select { padding-right: 32px; background: #fcfcfc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23444'/%3E%3C/svg%3E") no-repeat right 12px center; }
#rnw-hwf .field textarea { min-height: 96px; resize: vertical; }
#rnw-hwf .field input:focus,
#rnw-hwf .field select:focus,
#rnw-hwf .field textarea:focus { outline: none; border-color: var(--hwf-main); background-color: #fff; }
#rnw-hwf .field.is-error input,
#rnw-hwf .field.is-error select,
#rnw-hwf .field.is-error textarea { border-color: var(--hwf-err); }

#rnw-hwf .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#rnw-hwf .row-time { display: flex; align-items: center; gap: 10px; }
#rnw-hwf .row-time select { flex: 1; }
#rnw-hwf .row-age { display: flex; align-items: center; gap: 8px; }
#rnw-hwf .field .row-age input { width: 88px; }
#rnw-hwf .row-age span { margin-right: 10px; font-size: 14px; }

#rnw-hwf .inline-radios { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; }
#rnw-hwf .inline-radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#rnw-hwf .inline-radios input { width: 18px; height: 18px; margin: 0; accent-color: var(--hwf-main); }

#rnw-hwf .err { color: var(--hwf-err); font-size: 12px; margin-top: 5px; }

/* --- 確認 --- */
#rnw-hwf .review { border: 1px solid var(--hwf-line); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
#rnw-hwf .review dl { margin: 0; display: grid; grid-template-columns: 40% 60%; }
#rnw-hwf .review dt { background: #f7f7f7; padding: 11px 14px; font-size: 13px; color: var(--hwf-sub); border-bottom: 1px solid var(--hwf-line); }
#rnw-hwf .review dd { margin: 0; padding: 11px 14px; font-size: 14px; border-bottom: 1px solid var(--hwf-line); white-space: pre-wrap; word-break: break-word; }
#rnw-hwf .review dl:last-child dt,
#rnw-hwf .review dl:last-child dd { border-bottom: 0; }

#rnw-hwf .consent { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; background: #f7f7f7; padding: 14px 16px; border-radius: 8px; cursor: pointer; }
#rnw-hwf .consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--hwf-main); flex: 0 0 auto; }
#rnw-hwf .consent a { color: var(--hwf-main); text-decoration: underline; }

/* --- ボタン --- */
#rnw-hwf .nav { display: flex; gap: 12px; margin-top: 28px; }
#rnw-hwf .btn { flex: 1; padding: 14px; border-radius: 28px; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; cursor: pointer; border: 0; transition: background .2s, opacity .2s; }
#rnw-hwf .btn-next,
#rnw-hwf .btn-submit { background: var(--hwf-main); color: #fff; }
#rnw-hwf .btn-next:hover,
#rnw-hwf .btn-submit:not(:disabled):hover { background: var(--hwf-main-deep); }
#rnw-hwf .btn-back { background: #fff; color: var(--hwf-main); border: 1.5px solid var(--hwf-line); flex: 0 0 110px; }
#rnw-hwf .btn-back:hover { border-color: var(--hwf-main); }
#rnw-hwf .btn-submit:disabled { opacity: .45; cursor: not-allowed; }

#rnw-hwf .back { margin: 26px 0 0; text-align: center; font-size: 13px; }
#rnw-hwf .back a { color: var(--hwf-main); text-decoration: underline; }

@media (max-width: 480px) {
  #rnw-hwf .head, #rnw-hwf .body { padding-left: 20px; padding-right: 20px; }
  #rnw-hwf .row2, #rnw-hwf .review dl { grid-template-columns: 1fr; gap: 0; }
  #rnw-hwf .review dt { border-bottom: 0; padding-bottom: 2px; }
  #rnw-hwf .review dd { padding-top: 2px; }
  #rnw-hwf .slabel { font-size: 10px; }
  #rnw-hwf .btn-back { flex-basis: 96px; }
}

/* --- フッターの「Company／企業情報」を出さない（2026-09-25 指示） ---
   フッターは総合トップ共通の renewal/site-footer.php。共通側は触らず、
   このCSSを読むフォームのページだけで消す（SP .rnw-footer 内／PC .rnw-footer-pc 内の両方）。 */
.rnw-footer-company { display: none; }