/* 公開予約フォーム 共通スタイル（旧 public/base.html のインラインCSSを分離）
   ページ固有のCSSは static/css/<page>.css に置き、各テンプレの {% block head %} で読み込む。 */
:root{
  --accent:#0C3449; --accent-mid:#165070; --accent-hover:#1a5070;
  --accent-pale:#e8f0f5; --accent-light:#c8dce8;
  --gold:#b8924a; --gold-pale:#f5efe4; --gold-dark:#9e7a3a;
  --text-main:#1A1A1A; --text-sub:#555; --text-light:#888;
  --border:#E2E8F0; --bg-white:#fff; --bg-light:#F8F9FA; --bg-mid:#F1F5F9; --bg-dark:#0a1e2a;
  --radius:6px;
  --serif:'Noto Serif JP',serif; --sans:'Noto Sans JP',sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--sans);font-size:16px;color:var(--text-main);background:var(--bg-mid);line-height:1.75;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
a{color:var(--accent-mid);}
.pf-banner{width:100%;background:var(--accent);line-height:0;text-align:center;}
/* デザイン済みバナーは全体を見せる（切り取らない）。幅に合わせて縮小・原寸超は拡大しない。 */
.pf-banner img{display:block;width:100%;max-width:1600px;height:auto;margin:0 auto;}
.pf-header{background:var(--accent);color:#fff;padding:14px 20px;text-align:center;}
.pf-header .brand{font-family:var(--serif);font-size:17px;letter-spacing:.06em;}
.pf-header .eyebrow{color:var(--gold);font-size:12px;letter-spacing:.14em;margin-bottom:2px;}
.pf-wrap{max-width:640px;margin:0 auto;padding:20px 16px 56px;}
.pf-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;margin-bottom:16px;}
h1{font-family:var(--serif);font-size:21px;font-weight:600;margin:0 0 6px;color:var(--accent);}
h2{font-family:var(--serif);font-size:16px;font-weight:600;margin:0 0 10px;color:var(--accent);}
.lead{color:var(--text-sub);font-size:14px;margin:0 0 18px;}
.muted{color:var(--text-light);font-size:13px;}
/* ステップ表示（1着物 → 2日時 → 3ご連絡先。番号バッジ＋連結線で"手順"が分かるように） */
.pf-steps{display:flex;align-items:center;justify-content:center;gap:0;margin:0 0 20px;flex-wrap:nowrap;overflow-x:auto;}
.pf-steps span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-light);white-space:nowrap;font-weight:500;}
.pf-steps span b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:#fff;border:1.5px solid var(--border);color:var(--text-light);font-size:12px;font-weight:700;flex:0 0 auto;}
.pf-steps span:not(:last-child)::after{content:"";width:20px;height:1.5px;background:var(--border);margin:0 8px;flex:0 0 auto;}
.pf-steps span.on{color:var(--accent);font-weight:700;}
.pf-steps span.on b{background:var(--accent);border-color:var(--accent);color:#fff;}
.pf-steps span.done{color:var(--accent-mid);}
.pf-steps span.done b{background:var(--accent-mid);border-color:var(--accent-mid);color:#fff;}
/* ボタン */
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:var(--radius);
  padding:13px 22px;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;text-align:center;font-family:inherit;}
.btn:hover{background:var(--accent-hover);}
.btn-gold{background:var(--gold);}.btn-gold:hover{background:var(--gold-dark);}
.btn-ghost{background:#fff;color:var(--accent);border:1px solid var(--border);}
.btn-block{display:block;width:100%;}
.btn-lg{padding:15px 22px;font-size:16px;}
/* フォーム */
label{display:block;font-size:13px;color:var(--text-sub);margin:12px 0 4px;font-weight:500;}
.req{color:var(--gold-dark);font-size:12px;margin-left:4px;}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],textarea,select{
  width:100%;padding:12px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:16px;font-family:inherit;background:#fff;color:var(--text-main);}
textarea{min-height:70px;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-light);border-color:var(--accent-mid);}
/* シーンカード */
.pf-scenes{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pf-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 10px;text-decoration:none;color:var(--accent);
  font-family:var(--serif);font-size:15px;transition:.15s;min-height:96px;text-align:center;}
.pf-scene:hover{border-color:var(--accent-mid);box-shadow:0 4px 14px rgba(12,52,73,.08);}
.pf-scene .ico{font-size:24px;line-height:1;}
/* 品目リスト */
.pf-item{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--border);}
.pf-item:last-child{border-bottom:0;}
.pf-item .nm{flex:1;font-size:15px;}
.pf-item .du{color:var(--text-light);font-size:12px;}
.qty{display:flex;align-items:center;gap:8px;}
.qty button{width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:var(--radius);font-size:18px;color:var(--accent);cursor:pointer;line-height:1;}
.qty input{width:44px;text-align:center;padding:6px 2px;}
/* 時間チップ */
.pf-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;}
.pf-time{position:relative;}
.pf-time input{position:absolute;opacity:0;}
.pf-time label{display:block;text-align:center;margin:0;padding:12px 6px;border:1px solid var(--border);border-radius:var(--radius);
  background:#fff;color:var(--accent);font-size:15px;font-weight:500;cursor:pointer;}
.pf-time input:checked+label{background:var(--accent);color:#fff;border-color:var(--accent);}
/* サマリー */
.pf-summary{background:var(--bg-light);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;font-size:14px;}
.pf-summary .row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--border);}
.pf-summary .row:last-child{border-bottom:0;}
.pf-summary .row .k{color:var(--text-sub);}
.notice{background:var(--gold-pale);border-left:3px solid var(--gold);padding:11px 14px;border-radius:0 var(--radius) var(--radius) 0;font-size:13px;color:#5a4a2a;margin:0 0 16px;}
.flash{padding:11px 14px;border-radius:var(--radius);margin-bottom:14px;font-size:14px;}
.flash.error{background:#fbe9e6;color:#b3402f;border:1px solid #f0c8c1;}
.flash.ok{background:#e7f3ec;color:#2e7d52;border:1px solid #bfe0cd;}
.pf-foot{text-align:center;color:var(--text-light);font-size:12px;padding:8px 0 0;}
.backlink{display:inline-block;margin-top:14px;color:var(--text-sub);font-size:13px;text-decoration:none;}
/* 選んだお着物のカード表示（日時ページ・ご連絡先ページ 共通） */
.pf-picked-head{font-family:var(--serif);font-size:14px;color:var(--accent);font-weight:600;margin:0 0 10px;}
.pk{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;background:#fff;}
.pk:last-child{margin-bottom:0;}
.pk-thumb{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:0 0 52px;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--accent),var(--accent-mid));color:#fff;font-size:24px;}
.pk-thumb img{width:100%;height:100%;object-fit:cover;}
.pk-title{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--text-main);line-height:1.3;}
.pk-sub{color:var(--text-sub);font-size:12px;margin-top:2px;}
/* 下部の戻る導線（全ステップ共通） */
.pf-back{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
.pf-back .btn{flex:1;min-width:150px;max-width:260px;}
@media(max-width:480px){ .pf-scenes{gap:10px;} h1{font-size:19px;} }