/* =========================================================================
   AI相談 新機能用スコープCSS
   - 本物サイトのトンマナ（赤 #dc2d2d / CTA #c22121 / 価格 #fe0000 /
     リンク #006ce6 / 背景 #ededed / 枠 #ccc / 本文13px / 角丸4px / 薄影）に準拠
   - common.css と競合しないよう原則 .aimock 配下にスコープ
   - お客様向けは「赤系トンマナ維持でレスポンシブ化」
   ========================================================================= */
:root{
  --hh-red:#dc2d2d;        /* ブランド赤（ヘッダー帯・見出し） */
  --hh-red-pure:#ff0000;   /* 検索ボタン等の純赤 */
  --hh-price:#fe0000;      /* 価格 */
  --hh-cta:#c22121;        /* CTA濃赤 */
  --hh-cta-dark:#a81c1c;
  --hh-link:#006ce6;
  --hh-link-hover:#00a8ff;
  --hh-bg:#ededed;
  --hh-paper:#ffffff;
  --hh-line:#cccccc;
  --hh-line-soft:#ebebeb;
  --hh-ink:#333333;
  --hh-muted:#666666;
  --hh-muted2:#999999;
  --hh-soft-red:#fff2f2;
  --hh-soft-blue:#eef6ff;
  --hh-radius:4px;
  --hh-shadow:0 1px 3px rgba(0,0,0,.10);
}
/* body の素地は新デザイン common_2 に委譲（白背景・14px・Hiragino）。
   box-sizing は新機能ラッパ内だけに限定し、実 header/footer/gNavi を壊さない */
.aimock-wrap *, .aimock-modal *, .reqFlow *{ box-sizing:border-box; }

/* レイアウト：レスポンシブの新機能ラッパ（実header/footerの間に挟む） */
.aimock-wrap{ max-width:1000px; margin:0 auto; padding:18px 14px 40px; }
.aic-page .aimock-wrap{ max-width:972px; } /* AI相談フロー：本番 #contents と同幅に揃える（色味は現状維持） */
.aimock-bc{ padding:12px 14px 0; font-size:12px; color:var(--hh-muted); background:transparent; }
.aimock-bc a{ color:var(--hh-link); text-decoration:none; } .aimock-bc a:hover{ text-decoration:underline; }
.aimock-bc span{ color:#bbb; margin:0 4px; }

/* 共通カード/パネル */
.aimock .panel{ background:var(--hh-paper); border-radius:var(--hh-radius); box-shadow:var(--hh-shadow); }
.aimock .panel-pad{ padding:20px; }
@media(max-width:600px){ .aimock .panel-pad{ padding:14px; } }

/* AI相談ステップ */
.aimock .ai-flow-steps{
  display:grid;
  grid-template-columns:auto minmax(34px,1fr) auto minmax(34px,1fr) auto;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
}
.aimock .ai-flow-steps-result{ max-width:840px; margin:0 auto 16px; }
.aimock .ai-flow-step{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:#9a9a9a;
  font-size:14px;
  font-weight:bold;
  white-space:nowrap;
}
.aimock .ai-flow-step .step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:1px solid #dddddd;
  border-radius:50%;
  background:#fff;
  color:#999;
  font-size:13px;
  line-height:1;
}
.aimock .ai-flow-step.is-active{ color:var(--hh-red); }
.aimock .ai-flow-step.is-active .step-num,
.aimock .ai-flow-step.is-done .step-num{
  border-color:var(--hh-red);
  background:var(--hh-red);
  color:#fff;
}
.aimock .ai-flow-step.is-done{ color:#777; }
.aimock .step-line{ height:1px; min-width:0; background:#e5e5e5; }
.aimock .step-line.is-done{ background:#f1b5b5; }
@media(max-width:640px){
  .aimock .ai-flow-steps{ gap:7px; margin-bottom:14px; }
  .aimock .ai-flow-step{ gap:5px; font-size:11px; }
  .aimock .ai-flow-step .step-num{ width:24px; height:24px; flex-basis:24px; font-size:12px; }
}
@media(max-width:380px){
  .aimock .ai-flow-steps{ grid-template-columns:auto 18px auto 18px auto; }
  .aimock .ai-flow-step{ flex-direction:column; align-items:center; gap:3px; white-space:normal; text-align:center; line-height:1.25; }
}

/* セクション見出し（赤の縦バー＋太字。サイトの見出し調） */
.aimock .sec-ttl{ font-size:18px; font-weight:bold; color:#222; margin:0 0 16px; padding:0 0 12px 12px;
  border-bottom:1px solid var(--hh-line-soft); border-left:5px solid var(--hh-red); line-height:1.3; }
.aimock .sec-ttl .lead{ display:block; font-size:12px; color:var(--hh-muted); font-weight:normal; margin-top:4px; }
.aimock .sub-ttl{ font-size:15px; font-weight:bold; color:#222; margin:0 0 12px; display:flex; align-items:center; gap:6px; }
.aimock .sub-ttl i{ width:18px; height:18px; color:var(--hh-red); }

/* フォーム */
.aimock .field{ margin-bottom:20px; }
.aimock .field > label, .aimock .flabel{ display:flex; align-items:center; gap:6px; min-height:24px; font-weight:bold; color:#333; margin-bottom:8px; font-size:13px; }
.aimock .flabel i{ width:16px; height:16px; color:var(--hh-red); }
.aimock .required-badge{ display:inline-flex; align-items:center; justify-content:center; height:18px; padding:0 6px; border-radius:3px; background:var(--hh-cta); color:#fff; font-size:10px; line-height:1; font-weight:bold; }
.aimock .row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:600px){ .aimock .row2{ grid-template-columns:1fr; gap:0; } }
.aimock input[type=text], .aimock input[type=number], .aimock input[type=date], .aimock select{
  width:100%; padding:10px; border:1px solid var(--hh-line); border-radius:var(--hh-radius);
  font-size:14px; color:#333; background:#fff; outline:none; }
.aimock #order-form input[type=text]:not(.date-part), .aimock #order-form input[type=number], .aimock #order-form select{
  height:38px; padding-top:0; padding-bottom:0;
}
.aimock input:focus, .aimock select:focus{ border-color:var(--hh-red); box-shadow:0 0 0 2px var(--hh-soft-red); }
.aimock .hint{ font-size:11px; color:var(--hh-muted2); }

/* 日程タブ切替 */
.aimock .seg{ display:inline-flex; background:#f1f1f1; border:1px solid var(--hh-line); border-radius:var(--hh-radius); padding:2px; }
.aimock .seg button{ border:0; background:transparent; color:var(--hh-muted); font-size:12px; padding:6px 12px; border-radius:3px; cursor:pointer; }
.aimock .seg button.on{ background:#fff; color:var(--hh-red); font-weight:bold; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.aimock .date-row{ display:flex; align-items:center; gap:8px; }
.aimock .date-row .arr{ color:var(--hh-muted2); }
.aimock .flex-row{ display:flex; align-items:center; gap:8px; }
.aimock .date-pair{ display:flex; align-items:center; gap:8px; width:100%; }
.aimock .date-group{ flex:1; display:flex; align-items:center; gap:4px; min-height:38px; padding:0 10px; border:1px solid var(--hh-line); border-radius:var(--hh-radius); background:#fff; }
.aimock .date-label{ flex:0 0 auto; margin-right:4px; color:#333; font-size:12px; font-weight:bold; }
.aimock .date-unit{ flex:0 0 auto; color:var(--hh-muted); font-size:12px; }
.aimock .date-group .date-part{ width:2.5em; min-width:0; padding:0; border:0; border-radius:0; background:transparent; text-align:center; box-shadow:none; }
.aimock #order-form .date-group .date-part{ height:auto; padding:0; }
.aimock .date-group .date-part:focus{ border:0; box-shadow:none; outline:1px solid var(--hh-red); outline-offset:2px; }
@media(max-width:600px){
  .aimock .date-pair{ flex-direction:column; align-items:stretch; }
  .aimock .date-row .arr{ display:none; }
}

/* 人数 */
.aimock .people{ display:flex; gap:14px; }
.aimock .people .col{ flex:1; display:flex; align-items:center; height:38px; border:1px solid var(--hh-line); border-radius:var(--hh-radius); background:#fff; overflow:hidden; }
.aimock .people .col span{ flex:0 0 48px; padding:0 0 0 10px; font-size:12px; color:var(--hh-muted); }
.aimock .people .col input{ border:0; border-radius:0; box-shadow:none; min-width:0; }
.aimock #order-form .people .col input{ height:36px; padding-top:0; padding-bottom:0; }
.aimock .people .col:focus-within{ border-color:var(--hh-red); box-shadow:0 0 0 2px var(--hh-soft-red); }

/* 予算 */
.aimock .yen-wrap{ position:relative; }
.aimock .yen-wrap .yen{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--hh-muted); }
.aimock .yen-wrap input{ padding-left:26px; }

/* こだわり条件チップ */
.aimock .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.aimock .chip{ cursor:pointer; user-select:none; padding:8px 14px; border:1px solid var(--hh-line); border-radius:999px;
  font-size:13px; color:#555; background:#fff; transition:all .12s; }
.aimock .chip:hover{ border-color:var(--hh-red); background:var(--hh-soft-red); }
.aimock .chip.on{ background:var(--hh-red); border-color:var(--hh-red); color:#fff; font-weight:bold; }
.aimock .chip[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.aimock .chip[aria-disabled="true"]:hover{ border-color:var(--hh-line); background:#fff; }
.aimock .chip-help{ margin-top:8px; font-size:12px; color:var(--hh-muted); line-height:1.6; }
.aimock .chip-warn{ min-height:1.3em; margin-top:6px; font-size:12px; font-weight:bold; color:var(--hh-cta); }

/* ボタン（サイトCTA調：濃赤＋下影、hoverで持ち上がる） */
.aimock .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:0; border-radius:var(--hh-radius); font-weight:bold; text-decoration:none; transition:all .12s; }
.aimock .btn-cta{ background:var(--hh-cta); color:#fff; font-size:16px; padding:14px 20px; width:100%;
  box-shadow:0 2px 0 #8f1717; }
.aimock .btn-cta:hover{ background:var(--hh-cta-dark); transform:translateY(-1px); box-shadow:0 3px 0 #8f1717; }
.aimock .btn-cta:active{ transform:translateY(1px); box-shadow:0 1px 0 #8f1717; }
.aimock .btn-sub{ background:#fff; color:#444; border:1px solid var(--hh-line); padding:11px 16px; font-size:13px; }
.aimock .btn-sub:hover{ background:#f5f5f5; }
.aimock .btn-red{ background:var(--hh-cta); color:#fff; padding:11px 16px; font-size:13px; box-shadow:0 2px 0 #8f1717; }
.aimock .btn-red:hover{ background:var(--hh-cta-dark); }
.aimock .btn-reset{ width:100%; min-height:38px; margin-bottom:10px; border:1px solid var(--hh-line); background:#fff; color:#444; font-size:13px; box-shadow:none; }
.aimock .btn-reset:hover{ background:#f7f7f7; }
.aimock .submit-note{ text-align:center; font-size:11px; color:var(--hh-muted); margin-top:10px; }
.aimock .ai-notice{ margin:12px 0 0; padding:12px 14px; border:1px solid #fed7aa; background:#fff7ed; border-radius:8px; color:#7c2d12; font-size:12px; line-height:1.7; }
.aimock .ai-notice strong{ display:block; color:#9a3412; margin-bottom:3px; }
.aimock .ai-notice a{ color:#8f1717; font-weight:bold; text-decoration:underline; }
.aimock .constraint-note{ margin:8px 0 0; color:var(--hh-muted); font-size:12px; line-height:1.7; }

/* ベース商品カード（?base=商品ID で表示。商品詳細からの引き継ぎ感を明示） */
.aimock .base-product-card{ position:relative; display:flex; gap:14px; align-items:center; margin-bottom:16px; padding:14px 44px 14px 14px; border:1px solid #f3d0d0; background:var(--hh-soft-red); border-radius:8px; }
.aimock .base-product-thumb{ flex:0 0 72px; width:72px; height:72px; border-radius:6px; overflow:hidden; background:#eee; }
.aimock .base-product-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.aimock .base-product-body{ min-width:0; flex:1; }
.aimock .base-product-tag{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:bold; color:var(--hh-cta); background:#fff; border:1px solid #f0c9c9; border-radius:999px; padding:2px 9px; margin-bottom:6px; }
.aimock .base-product-name{ margin:0 0 2px; font-size:14px; font-weight:bold; color:#222; line-height:1.4; }
.aimock .base-product-no{ margin:0 0 2px; font-size:11px; color:var(--hh-muted); }
.aimock .base-product-desc{ margin:0; font-size:12px; color:var(--hh-cta); font-weight:bold; }
.aimock .base-product-close{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; border:1px solid #f0c9c9; background:#fff; color:var(--hh-cta); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.aimock .base-product-close:hover{ background:#fff0f0; }
@media(max-width:480px){
  .aimock .base-product-card{ padding:12px 40px 12px 12px; gap:10px; }
  .aimock .base-product-thumb{ flex-basis:56px; width:56px; height:56px; }
  .aimock .base-product-name{ font-size:13px; }
}
.aimock .start-guide{ margin:-4px 0 16px; padding:10px 12px; border:1px solid var(--hh-line-soft); border-radius:8px; background:#fafafa; color:#555; font-size:13px; line-height:1.7; }
.aimock .form-warn{ min-height:1.4em; margin:0 0 8px; color:var(--hh-cta); font-size:12px; font-weight:bold; text-align:center; }

/* 注意事項・個人情報保護方針 */
.aimock .policy-wrap{ max-width:860px; margin:0 auto; padding:18px 14px 56px; }
.aimock .policy-bc{ font-size:12px; color:var(--hh-muted); margin:6px 0 14px; }
.aimock .policy-bc a{ color:var(--hh-link); text-decoration:none; }
.aimock .policy-bc a:hover{ text-decoration:underline; }
.aimock .policy-card{ background:#fff; border:1px solid var(--hh-line); border-radius:var(--hh-radius); box-shadow:var(--hh-shadow); padding:22px 24px 26px; }
.aimock .policy-card h1{ margin:0 0 12px; padding-left:12px; border-left:5px solid var(--hh-red); color:#222; font-size:22px; font-weight:bold; line-height:1.35; }
.aimock .policy-lead{ margin:0 0 22px; color:#555; font-size:13px; line-height:1.9; }
.aimock .policy-card h2{ margin:22px 0 8px; padding-bottom:7px; border-bottom:1px solid var(--hh-line-soft); color:#222; font-size:15px; font-weight:bold; }
.aimock .policy-card p,
.aimock .policy-card li{ color:#444; font-size:13px; line-height:1.9; }
.aimock .policy-card ul{ margin:0 0 0 1.2em; padding:0; }
.aimock .policy-card li{ margin:3px 0; }
.aimock .policy-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.aimock .policy-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:10px 16px; border:0; border-radius:var(--hh-radius); font-family:inherit; font-size:13px; font-weight:bold; text-decoration:none; cursor:pointer; appearance:none; }
.aimock .policy-btn.main{ color:#fff; background:var(--hh-cta); box-shadow:0 2px 0 #8f1717; }
.aimock .policy-btn.sub{ color:#444; background:#fff; border:1px solid var(--hh-line); }
@media(max-width:600px){
  .aimock .policy-card{ padding:18px 14px 22px; }
  .aimock .policy-card h1{ font-size:19px; }
  .aimock .policy-actions{ display:grid; }
}

/* ローディング */
.aimock .loading-box{ text-align:center; padding:60px 20px; }
.aimock .spinner-hh{ width:48px; height:48px; border:5px solid #f0d3d3; border-top-color:var(--hh-red); border-radius:50%;
  margin:0 auto 22px; animation:hhspin .9s linear infinite; }
@keyframes hhspin{ to{ transform:rotate(360deg);} }

/* 結果：2カラム */
.aimock .result-grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; align-items:start; max-width:1180px; margin:0 auto; }
.aimock .result-grid .result-plan{ max-width:none; margin:0; }
@media(max-width:900px){ .aimock .result-grid{ display:block; max-width:860px; } }
.aimock .hero{ position:relative; }
.aimock .hero img{ width:100%; height:230px; object-fit:cover; border-radius:var(--hh-radius) var(--hh-radius) 0 0; display:block; background:#eee; }
.aimock .hero .badge{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:var(--hh-red);
  font-weight:bold; font-size:12px; padding:5px 12px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.2); display:inline-flex; gap:5px; align-items:center; }

/* 希望条件サマリー */
.aimock .summary{ background:#f8f8f8; border:1px solid var(--hh-line-soft); border-radius:var(--hh-radius); padding:14px 16px; margin-bottom:20px; }
.aimock .summary h4{ margin:0 0 10px; font-size:13px; font-weight:bold; color:#444; border-bottom:1px solid #e2e2e2; padding-bottom:8px; }
.aimock .summary ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
@media(max-width:600px){ .aimock .summary ul{ grid-template-columns:1fr; } }
.aimock .summary li{ font-size:12px; }
.aimock .summary li .k{ color:var(--hh-muted2); margin-right:6px; }
.aimock .summary li .v{ font-weight:bold; color:#333; }
.aimock .summary li.full{ grid-column:1 / -1; }
.aimock .summary .prefs{ display:inline-flex; flex-wrap:wrap; gap:5px; }
.aimock .summary .sp-tag{ font-size:11px; font-weight:bold; color:var(--hh-cta); background:var(--hh-soft-red); border:1px solid #f3d0d0; border-radius:999px; padding:2px 9px; }
.aimock .summary h4 .note-ai{ float:right; font-weight:normal; font-size:11px; color:var(--hh-cta); background:var(--hh-soft-red); border-radius:999px; padding:2px 9px; }
.aimock .ftext{ width:100%; padding:10px; border:1px solid var(--hh-line); border-radius:var(--hh-radius); font-size:14px; color:#333; background:#fff; outline:none; resize:vertical; font-family:inherit; line-height:1.6; }
.aimock .ftext:focus{ border-color:var(--hh-red); box-shadow:0 0 0 2px var(--hh-soft-red); }

/* タイムライン */
.aimock .timeline{ position:relative; }
.aimock .day{ margin-bottom:26px; }
.aimock .day-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.aimock .day-badge{ width:50px; height:50px; border-radius:50%; background:var(--hh-red); color:#fff; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.aimock .day-badge .d-lbl{ font-size:9px; letter-spacing:1px; font-weight:bold; }
.aimock .day-badge .d-num{ font-size:20px; font-weight:bold; line-height:1; }
.aimock .day-head h5{ margin:0; font-size:16px; font-weight:bold; color:#222; }
.aimock .acts{ padding-left:14px; border-left:2px solid #f0d3d3; margin-left:24px; }
.aimock .act{ position:relative; padding:0 0 18px 18px; }
.aimock .act:before{ content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--hh-red); }
.aimock .act .time{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:bold; color:var(--hh-red);
  background:var(--hh-soft-red); border:1px solid #f3d0d0; border-radius:4px; padding:3px 10px; margin-bottom:8px; }
.aimock .act h6{ margin:0 0 6px; font-size:14px; font-weight:bold; color:#222; }
.aimock .act p{ margin:0; font-size:13px; color:#555; }
.aimock .act img{ width:100%; max-height:220px; object-fit:cover; border-radius:4px; margin:8px 0; background:#f0f0f0; }

/* 価格ボックス */
.aimock .price-box{ background:linear-gradient(135deg,#fff6f6,#fdeaea); border:1px solid #f3d0d0; border-radius:8px; padding:20px; margin-top:24px; }
.aimock .price-box .lbl{ font-size:12px; color:var(--hh-cta); font-weight:bold; margin:0 0 8px; display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.aimock .price-box .total{ font-size:34px; font-weight:900; color:var(--hh-price); letter-spacing:-1px; }
.aimock .price-box .calc{ font-size:12px; color:var(--hh-muted); margin-top:4px; }
.aimock .price-box .note{ font-size:11px; color:var(--hh-muted); background:rgba(255,255,255,.7); border:1px solid #fff; border-radius:4px; padding:8px; margin-top:10px; }
.aimock .price-variable{ display:inline-flex; align-items:center; min-height:20px; padding:1px 8px; border-radius:999px; background:#fff; border:1px solid #f0c9c9; color:var(--hh-cta); font-size:11px; line-height:1; }
.aimock .reason-box{ margin:12px 0 0; padding:12px 14px; border:1px solid #bae6fd; background:#f0f9ff; border-radius:8px; color:#075985; font-size:13px; line-height:1.7; }
.aimock .reason-box strong{ display:block; margin-bottom:3px; color:#0c4a6e; }
.aimock .hotel-box{ margin:12px 0 0; padding:12px 14px; border:1px solid #e5e7eb; background:#fff; border-radius:8px; color:#374151; font-size:13px; line-height:1.7; }
.aimock .hotel-box strong{ display:block; margin-bottom:5px; color:#222; }
.aimock .hotel-main{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:3px; }
.aimock .hotel-main #hotel-name{ font-weight:bold; color:#222; }
.aimock .hotel-main #hotel-class{ display:inline-flex; align-items:center; min-height:20px; padding:1px 8px; border-radius:999px; border:1px solid #f0c9c9; background:var(--hh-soft-red); color:var(--hh-cta); font-size:11px; font-weight:bold; line-height:1; }
.aimock .hotel-box p{ margin:0; color:#555; font-size:12px; line-height:1.7; }
.aimock .plan-adjust-note{ margin:0 0 12px; padding:9px 12px; border:1px solid #f0c9c9; background:#fff7f7; border-radius:8px; color:#8f1717; font-size:12px; font-weight:bold; line-height:1.6; }
.aimock .price-includes{ margin:10px 0 0; padding:12px 14px; border:1px solid #e5e7eb; background:#f9fafb; border-radius:8px; color:#374151; font-size:12px; line-height:1.7; }
.aimock .price-includes ul{ margin:6px 0 0 18px; padding:0; }
.aimock .price-includes li{ margin:2px 0; }

/* 結果フッターのボタン */
.aimock .result-actions{ display:flex; gap:10px; margin-top:18px; }
@media(max-width:600px){ .aimock .result-actions{ flex-direction:column; } }
.aimock .result-actions .btn{ flex:1; }

/* AIチャット */
.aimock .chat{ display:flex; flex-direction:column; height:520px; }
@media(max-width:900px){ .aimock .chat{ height:auto; } }
.aimock .chat-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--hh-soft-red); border-bottom:1px solid #f3d0d0; border-radius:var(--hh-radius) var(--hh-radius) 0 0; }
.aimock .chat-head .ava{ width:34px; height:34px; border-radius:6px; background:var(--hh-red); color:#fff; display:flex; align-items:center; justify-content:center; }
.aimock .chat-head h2{ margin:0; font-size:13px; font-weight:bold; color:#333; }
.aimock .chat-head p{ margin:1px 0 0; font-size:11px; color:var(--hh-cta); }
.aimock .chat-body{ flex:1; overflow-y:auto; padding:14px; background:#fafafa; min-height:240px; }
.aimock .msg{ display:flex; gap:8px; margin-bottom:12px; }
.aimock .msg .ava{ width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.aimock .msg.bot .ava{ background:var(--hh-soft-red); color:var(--hh-red); }
.aimock .msg.user{ flex-direction:row-reverse; }
.aimock .msg.user .ava{ background:#e2e2e2; color:#555; }
.aimock .msg .bubble{ max-width:80%; padding:9px 12px; border-radius:12px; font-size:13px; line-height:1.6; }
.aimock .msg.bot .bubble{ background:#fff; border:1px solid var(--hh-line); color:#444; border-top-left-radius:2px; }
.aimock .msg.user .bubble{ background:var(--hh-red); color:#fff; border-top-right-radius:2px; }
.aimock .chat-foot{ padding:10px 12px; background:#fff; border-top:1px solid var(--hh-line-soft); }
.aimock .chat-foot form{ display:flex; gap:8px; }
.aimock .chat-foot input{ flex:1; padding:10px; border:1px solid var(--hh-line); border-radius:20px; font-size:13px; }
.aimock .chat-foot button[type=submit]{ background:var(--hh-red); color:#fff; border:0; border-radius:50%; width:40px; height:40px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.aimock .chat-foot button[type=submit]:hover{ background:var(--hh-cta-dark); }

/* 完了 */
.aimock .done-box{ text-align:center; padding:48px 20px; max-width:480px; margin:0 auto; }
.aimock .done-box .ic{ width:64px; height:64px; border-radius:50%; background:#e8f7ee; color:#258a55; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.aimock .done-box h2{ font-size:20px; color:#222; margin:0 0 12px; }
.aimock .done-box p{ font-size:13px; color:#555; line-height:1.8; }
.aimock .done-box .done-no{ color:#333; font-weight:bold; margin:8px 0 10px; }
.aimock .done-box .done-no b{ color:var(--hh-cta); }
.aimock .done-flow{ display:grid; gap:8px; max-width:430px; margin:16px auto 0; padding:0; list-style:none; text-align:left; }
.aimock .done-flow li{ display:grid; grid-template-columns:100px minmax(0,1fr); gap:8px; align-items:start; padding:9px 10px; border:1px solid var(--hh-line-soft); border-radius:6px; background:#fff; font-size:12px; line-height:1.6; color:#555; }
.aimock .done-flow b{ color:#333; white-space:nowrap; }
.aimock .done-flow span{ min-width:0; }

/* モーダル */
.aimock-modal{ position:fixed; inset:0; background:rgba(40,40,40,.5); display:none; align-items:center; justify-content:center; z-index:9999; padding:16px; }
.aimock-modal.open{ display:flex; }
.aimock-modal .box{ background:#fff; border-radius:8px; max-width:520px; width:100%; padding:24px; position:relative; box-shadow:0 16px 40px rgba(0,0,0,.3); }
.aimock-modal h2{ font-size:17px; color:#222; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--hh-line-soft); display:flex; align-items:center; gap:8px; }
.aimock-modal h2 i{ color:#d99500; }
.aimock-modal .warn{ background:#fff8e7; border:1px solid #f0dba8; border-radius:6px; padding:14px; color:#7a5b00; font-size:13px; line-height:1.7; margin-bottom:16px; }
.aimock-modal .warn b{ display:block; margin-bottom:6px; color:#7a5b00; }
.aimock-modal .agree{ display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid transparent; border-radius:6px; cursor:pointer; margin-bottom:18px; }
.aimock-modal .agree:hover{ background:#f7f7f7; border-color:var(--hh-line-soft); }
.aimock-modal .agree input{ margin-top:2px; width:18px; height:18px; }
.aimock-modal .agree span{ font-size:13px; color:#444; }
.aimock-modal .m-actions{ display:flex; justify-content:flex-end; gap:10px; }
.aimock-modal .close{ position:absolute; top:14px; right:14px; background:#f0f0f0; border:0; border-radius:50%; width:28px; height:28px; cursor:pointer; color:#888; }
.aimock .btn[disabled]{ background:#cfcfcf; box-shadow:none; cursor:not-allowed; }

/* hidden util */
.aimock [hidden]{ display:none !important; }

/* ===== 結果見出し：スマホで「あなたへのおすすめツアーを作成しました！」が
   崩れて改行されないよう、SPではフォントを縮めて1行に収める ===== */
.aimock .result-head{ font-size:18px; font-weight:bold; color:#222; margin:0 0 4px;
  display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:nowrap; line-height:1.4; }
.aimock .result-head i{ flex:0 0 auto; }
.aimock .result-head .t{ white-space:nowrap; }
.aimock .result-lead{ font-size:12px; color:var(--hh-muted); margin:0; }
@media(max-width:600px){
  .aimock .result-head{ font-size:14px; }
  .aimock .result-head i{ width:16px !important; height:16px !important; }
}
@media(max-width:360px){
  .aimock .result-head{ font-size:13px; }
  .aimock .result-head .t{ white-space:normal; }   /* 極小幅のみ自然折返し許可 */
}

/* =========================================================================
   案1統合：スマホではツアー全画面＋AI相談を全画面モーダル化、下部ドック
   （PCは従来の2カラムを維持）
   ========================================================================= */
.aimock .chat-head .chat-close{ display:none; margin-left:auto; background:#fff; border:1px solid #f3d0d0; color:var(--hh-cta); border-radius:50%; width:28px; height:28px; cursor:pointer; flex-shrink:0; }
.aimock .chat-mini{ display:none; }
.aimock-dock{ display:none; }
@media(max-width:900px){
  /* 右カラムのチャットを全画面モーダル化 */
  .aimock .result-grid > .chat{ position:fixed; inset:0; z-index:9990; height:100%; border-radius:0;
    transform:translateY(101%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:0 -8px 30px rgba(0,0,0,.25); }
  .aimock .result-grid > .chat.open{ transform:translateY(0); }
  .aimock .chat-head .chat-close{ display:flex; align-items:center; justify-content:center; }
  .aimock .chat-mini{ display:flex; justify-content:space-between; align-items:center; padding:8px 14px; background:#fff; border-bottom:1px solid var(--hh-line-soft); font-size:11px; color:var(--hh-muted); }
  .aimock .chat-mini b{ color:var(--hh-price); }
  /* ツアー内の見積ボタンはドックに集約 */
  .aimock .result-actions .req-pc{ display:none; }
  /* 下部固定ドック */
  .aimock-dock{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9980; flex-direction:column; gap:8px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(to top,#fff 82%,rgba(255,255,255,0)); }
  .aimock-dock .btn{ width:100%; }
  .aimock-dock .dock-ai{ height:50px; font-size:15px; }
  .aimock-dock .dock-req{ height:44px; }
  /* ドックに隠れないよう余白確保 */
  .aimock #view-result{ padding-bottom:118px; }
}

/* =========================================================================
   見積依頼フロー（現状の予約に準拠：ログイン/SNS/会員登録 → 確認 → 完了）
   ========================================================================= */
/* 中央モーダル：半透明黒の背景＋幅を絞ったカード */
.reqFlow{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:20px; }
.reqFlow.open{ display:flex; }
.reqFlow .reqBackdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.reqFlow .reqCard{ position:relative; z-index:1; background:#fff; width:100%; max-width:560px; max-height:90vh;
  border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.4); display:flex; flex-direction:column; overflow:hidden; }
.reqFlow .reqHd{ flex-shrink:0; background:#fff; border-bottom:1px solid var(--hh-line); display:flex; align-items:center; gap:8px; padding:12px 14px; }
.reqFlow .reqHd h4{ margin:0 auto 0 0; font-size:15px; font-weight:bold; color:#222; }
.reqFlow .reqHd .x{ background:#f0f0f0; border:0; border-radius:50%; width:30px; height:30px; cursor:pointer; color:#666; }
.reqFlow .reqBody{ flex:1; overflow-y:auto; padding:16px; }
.reqFlow .fSec{ font-size:14px; font-weight:bold; color:#222; margin:0 0 10px; } .reqFlow .fSec span{ font-weight:normal; font-size:11px; color:var(--hh-muted); display:block; margin-top:3px; }
.reqFlow .req{ font-size:9px; color:#fff; background:var(--hh-cta); border-radius:3px; padding:1px 5px; margin-left:5px; vertical-align:1px; }
.reqFlow .loginCard{ background:#fff; border:1px solid var(--hh-line); border-radius:8px; padding:14px; margin-bottom:16px; }
.reqFlow .req-block-title{ margin:16px 0 8px; padding:8px 10px; background:#f9fafb; border:1px solid var(--hh-line); border-radius:6px; color:#374151; font-weight:bold; font-size:13px; }
.reqFlow .req-help{ font-size:12px; color:var(--hh-muted); line-height:1.7; margin:0 0 10px; }
/* 商品ページからの合流バナー・見積段階のカード不要注記（2026-08-05 MTG） */
.reqFlow .reqOriginNote{ border:1px solid #cfe0f2; background:#f2f7fc; border-radius:8px; padding:10px 12px; margin:0 0 12px; font-size:12px; line-height:1.7; color:#254c78; }
.reqFlow .reqOriginNote b{ display:block; margin-bottom:2px; }
.reqFlow .reqOriginNote .reqOriginMemo{ display:block; color:#4a6f9b; }
.reqFlow .reqCardNote{ border:1px solid var(--hh-line); background:#fafafa; border-radius:8px; padding:10px 12px; margin:0 0 14px; font-size:12px; line-height:1.7; color:#444; }
.reqFlow .fGrp{ margin-bottom:14px; } .reqFlow .fGrp > label{ font-size:12px; color:#444; font-weight:bold; display:block; margin-bottom:5px; }
.reqFlow .fInput{ width:100%; border:1px solid var(--hh-line); border-radius:6px; padding:10px; font-size:14px; outline:none; background:#fff; } .reqFlow .fInput:focus{ border-color:var(--hh-red); box-shadow:0 0 0 2px var(--hh-soft-red); }
.reqFlow .fInput.is-error{ border-color:var(--hh-cta); background:#fffafa; }
.reqFlow .fRow{ display:flex; gap:8px; } .reqFlow .fRow > *{ flex:1; }
.reqFlow .hint{ font-size:10.5px; color:var(--hh-muted2); margin-top:4px; line-height:1.5; }
.reqFlow .mailHint{ color:#1597d3; }
.reqFlow .mailWarn{ color:var(--hh-cta); }
.reqFlow .fieldError{ min-height:1.5em; margin:4px 0 0; color:var(--hh-cta); font-size:11px; font-weight:bold; line-height:1.5; }
.reqFlow .minichk{ font-size:11.5px; color:#555; display:flex; align-items:center; gap:6px; margin:6px 0 10px; }
.reqFlow .loginBtn{ width:100%; background:var(--hh-cta); color:#fff; border:0; border-radius:7px; padding:12px; font-size:14px; font-weight:bold; cursor:pointer; box-shadow:0 2px 0 #8f1717; }
.reqFlow .forgot{ display:inline-block; margin-top:9px; font-size:11.5px; color:var(--hh-link); }
.reqFlow .sns{ margin-top:13px; border-top:1px solid #eee; padding-top:12px; } .reqFlow .sns > p{ font-size:11px; color:var(--hh-muted); margin:0 0 8px; }
.reqFlow .snsBtn{ width:100%; border:1px solid var(--hh-line); background:#fff; border-radius:7px; padding:10px; font-size:13px; font-weight:bold; cursor:pointer; margin-bottom:7px; display:flex; align-items:center; justify-content:center; gap:8px; } .reqFlow .snsBtn.google{ color:#444; } .reqFlow .snsBtn.fb{ color:#1877f2; }
.reqFlow .regToggle{ width:100%; font-size:13px; font-weight:bold; color:#333; background:#fff; border:1px solid var(--hh-line); border-radius:8px; padding:12px 13px; margin:0 0 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; text-align:left; }
.reqFlow .regToggle:hover{ background:#fafafa; border-color:#e5b5b5; }
.reqFlow .regToggle i{ color:var(--hh-cta); transition:transform .16s ease; flex-shrink:0; }
.reqFlow .regToggle.open i{ transform:rotate(180deg); }
.reqFlow .registerFields{ border-top:1px dashed #e5e7eb; margin-top:4px; padding-top:10px; }
.reqFlow .agreeBox{ background:#fff; border:1px solid var(--hh-line); border-radius:8px; padding:12px; font-size:13px; display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; cursor:pointer; } .reqFlow .agreeBox input{ margin-top:2px; width:18px; height:18px; flex-shrink:0; } .reqFlow .agreeBox a{ color:var(--hh-link); }
.reqFlow .warnBox{ background:#fff8e7; border:1px solid #f0dba8; border-radius:8px; padding:13px; font-size:12.5px; color:#7a5b00; line-height:1.7; margin-bottom:16px; } .reqFlow .warnBox b{ display:block; margin-bottom:6px; }
.reqFlow .sumBox{ background:#fff; border:1px solid var(--hh-line); border-radius:8px; padding:4px 14px; font-size:13px; margin-bottom:16px; } .reqFlow .sumBox .r{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed #eee; } .reqFlow .sumBox .r:last-child{ border:0; } .reqFlow .sumBox .r span{ color:var(--hh-muted2); flex-shrink:0; } .reqFlow .sumBox .r b{ text-align:right; }
.reqFlow .reqFoot{ flex-shrink:0; padding:12px 14px; border-top:1px solid var(--hh-line); background:#fff; display:flex; gap:10px; }
/* 確認画面のツアー内容（コンパクト表示） */
.reqFlow .req-itin{ margin-bottom:14px; border:1px solid var(--hh-line-soft); border-radius:8px; padding:4px 12px; }
.reqFlow .req-itin + .warnBox{ margin-top:12px; }
.reqFlow .req-itin .d{ display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed #eee; }
.reqFlow .req-itin .d:last-child{ border:0; }
.reqFlow .req-itin .dn{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--hh-red); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:7px; font-weight:bold; line-height:1; }
.reqFlow .req-itin .dn b{ font-size:13px; }
.reqFlow .req-itin .dt h6{ margin:1px 0 3px; font-size:13px; color:#222; }
.reqFlow .req-itin .dt p{ margin:0; font-size:11px; color:var(--hh-muted); line-height:1.5; }
.reqFlow .reqFoot button{ border-radius:8px; padding:14px; font-size:14px; font-weight:bold; cursor:pointer; border:0; }
.reqFlow .reqFoot .back{ flex:0 0 90px; background:#fff; border:1px solid var(--hh-line); color:#555; }
.reqFlow .reqFoot .next{ flex:1; background:var(--hh-cta); color:#fff; box-shadow:0 2px 0 #8f1717; } .reqFlow .reqFoot .next:disabled{ background:#cfcfcf; box-shadow:none; cursor:not-allowed; }

/* =========================================================================
   案1：ツアー単一カラム ＋ AI相談モーダル（PC・スマホ共通）
   ========================================================================= */
.aimock .result-plan{ max-width:840px; margin:0 auto; }
.aimock .result-dock{ display:flex; gap:10px; max-width:840px; margin:16px auto 0; align-items:stretch; }
.aimock .result-dock .btn{ flex:1; }
.aimock .result-dock .act-redo{ flex:0 0 auto; }
.aimock .result-dock .act-ai{ font-size:15px; }
@media(max-width:900px){
  .aimock .result-dock{ position:fixed; left:0; right:0; bottom:0; z-index:60; margin:0; max-width:none; flex-wrap:wrap; gap:8px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(to top,#fff 84%,rgba(255,255,255,0)); }
  .aimock .result-dock .act-redo{ display:none; }            /* 狭幅では主要2ボタンに集約 */
  .aimock .result-dock .act-ai,
  .aimock .result-dock .act-req{ flex:1 1 0; min-width:0; height:48px; padding-left:8px; padding-right:8px; font-size:13px; }
  .aimock #view-result{ padding-bottom:86px; }
}

/* AI相談モーダル */
.chat-modal{ position:fixed; inset:0; z-index:9000; display:none; }
.chat-modal.open{ display:flex; flex-direction:column; }
.chat-modal .backdrop{ position:absolute; inset:0; background:rgba(30,30,30,.45); }
.chat-modal .chat-box{ position:relative; z-index:1; flex:1; min-height:0; display:flex; flex-direction:column; background:#fff; overflow:hidden; }
/* モーダル内ヘッダ（既存 .chat-head を流用しつつ閉じる常時表示） */
.chat-modal .chat-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--hh-soft-red); border-bottom:1px solid #f3d0d0; flex-shrink:0; }
.chat-modal .chat-head .ava{ width:34px; height:34px; border-radius:6px; background:var(--hh-red); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-modal .chat-head h2{ margin:0; font-size:13px; font-weight:bold; color:#333; } .chat-modal .chat-head p{ margin:1px 0 0; font-size:11px; color:var(--hh-cta); }
.chat-modal .chat-head .chat-close{ margin-left:auto; background:#fff; border:1px solid #f3d0d0; color:var(--hh-cta); border-radius:50%; width:28px; height:28px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.chat-modal .chat-mini{ display:flex; justify-content:space-between; align-items:center; padding:8px 14px; background:#fff; border-bottom:1px solid var(--hh-line-soft); font-size:11px; color:var(--hh-muted); flex-shrink:0; } .chat-modal .chat-mini b{ color:var(--hh-price); }
.chat-modal .chat-body{ flex:1; overflow-y:auto; padding:14px; background:#fafafa; }
.chat-modal .chat-foot{ padding:0 0 10px; background:#fff; border-top:1px solid var(--hh-line-soft); flex-shrink:0; }
.chat-quick{ display:flex; gap:7px; padding:9px 12px 4px; flex-wrap:wrap; } .chat-quick button{ font-size:11.5px; border:1px solid #f0c9c9; background:#fff; color:var(--hh-cta); border-radius:999px; padding:6px 11px; cursor:pointer; }
.chat-modal .chat-foot form{ display:flex; gap:8px; padding:6px 12px 0; } .chat-modal .chat-foot input{ flex:1; padding:10px; border:1px solid var(--hh-line); border-radius:20px; font-size:13px; } .chat-modal .chat-foot button[type=submit]{ background:var(--hh-red); color:#fff; border:0; border-radius:50%; width:40px; height:40px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
/* 「この内容で見積依頼」CTA：チャット枠の外・下に独立配置（高さ・フォント大きめ） */
.chat-modal .chat-cta{ position:relative; z-index:1; flex-shrink:0; padding:12px; background:#fff; }
.chat-modal .chat-cta .btn{ width:100%; height:56px; font-size:17px; }
/* 更新通知：価格や別ボタンを重複させず、スリムな1行（合計は上部ミニバーに集約） */
.chat-upd{ display:none; align-items:center; gap:6px; margin:8px 12px 0; background:#e9f8ef; border:1px solid #bfe6cf; color:#1c6b40; border-radius:8px; padding:7px 11px; font-size:12px; font-weight:bold; flex-shrink:0; } .chat-upd.show{ display:flex; } .chat-upd i{ color:#1f9d57; }
/* チャットヘッダ：戻る矢印（モバイル）／タイトル省略 */
.chat-modal .chat-back{ display:none; }
.chat-modal .chat-htxt{ min-width:0; }
.chat-modal .chat-htxt h2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:900px){
  .chat-modal .chat-back{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-left:-4px; background:transparent; border:0; color:var(--hh-cta); flex-shrink:0; cursor:pointer; }
}

/* PC(≥901px)：チャットを右カラムとして常時表示（モーダルではなくインライン）※基本ルールの後に置き上書き */
@media(min-width:901px){
  /* チャット＋CTAをまとめて右カラムに固定（スクロール追従）。
     高さは画面に収まるよう clamp し、入力欄・見積依頼ボタンが見切れないようにする */
  .chat-modal{ position:sticky !important; top:14px !important; align-self:start; display:flex !important; flex-direction:column; z-index:auto !important; }
  .chat-modal .backdrop{ display:none !important; }
  .chat-modal .chat-box{ flex:none; height:clamp(320px, calc(100vh - 380px), 560px); border:1px solid var(--hh-line); border-radius:10px; box-shadow:var(--hh-shadow); }
  .chat-modal .chat-head .chat-close{ display:none !important; }
  .chat-modal .chat-cta{ background:transparent; padding:12px 0 0; }   /* チャット枠の外・下に独立 */
  .aimock .result-dock{ max-width:1180px; }
  .aimock .result-dock .act-ai{ display:none; }   /* PCは右に常時表示のため不要 */
}
.flash-hl{ animation:flashHl 2.6s ease-out; border-radius:6px; }
@keyframes flashHl{ 0%{ background:#fff7c4; box-shadow:0 0 0 5px #ffe680; } 100%{ } }


/* 受付完了画面：マイページへの小さなリンク */
.aimock .done-action{ margin-top:22px; display:flex; justify-content:center; }
.aimock .done-action .btn{ min-width:260px; }

/* =========================================================================
   マイページ：現行サイトの骨格・トンマナに準拠
   （htdocs/css/style.css #contents #main #mypage / #side dl.mymenu が正）
   赤見出し #dc2c2e、薄ピンク #fff2f2、灰見出し #ededed、枠 #ccc、
   テーブル文字 #666、バウチャー発行済み #efffef、回答欄 #ffffde
   ========================================================================= */
body.mp2-page{ background:#fff; } /* 本番はbody白。グレーは#contents相当のパネル側 */
.aimock .mp2-wrap{ max-width:1280px; margin:0 auto; padding:12px 14px 30px; background:#fff; } /* コンテンツ幅は予約詳細・見積詳細・日程表と1280pxで統一（ユーザー指示）。背景は本番の#ededed帯だと全体が重いため白に変更（ユーザー指示） */
.aimock .mp2-bc{ list-style:none; display:flex; gap:4px; margin:0 0 10px; padding:0; font-size:12px; color:#333; }
.aimock .mp2-bc li + li:before{ content:"▶"; margin-right:4px; font-size:9px; color:var(--hh-link-hover); }
.aimock .mp2-bc a{ color:#333; text-decoration:underline; } .aimock .mp2-bc a:hover{ text-decoration:none; }

.aimock .mp2-head{ font-size:20px; font-weight:bold; color:#222; margin:14px 0 14px; padding-left:12px; border-left:5px solid var(--hh-red); } /* 予約手続き .rv-h1 と同じ赤縦バー見出し（ユーザー指示） */

.aimock .mp2-layout{ display:flex; gap:20px; align-items:flex-start; }
.aimock .mp2-main{ flex:1; min-width:0; order:2; }
.aimock .mp2-side{ flex:0 0 158px; order:1; }

.aimock .mp2-h2{ font-size:15px; font-weight:bold; color:#fff; background:#222; padding:7px 10px; margin:26px 0 10px; } /* 黒背景×白文字の黒帯見出し（ユーザー指示。#222はgNavi黒帯と同色） */
.aimock .mp2-h2:first-child{ margin-top:0; }
.aimock .mp2-ttl{ font-size:15px; font-weight:bold; color:#dc2c2e; background:#fff2f2; border:1px solid #ccc; padding:6px 10px; margin:0 0 10px; }

.aimock .mp2-lead{ font-size:12px; color:#666; line-height:1.7; margin:0 0 12px; }
.aimock .mp2-note{ font-size:11px; color:#999; margin-top:10px; }

.aimock .mp2-table{ width:100%; border-collapse:collapse; margin:0 0 14px; table-layout:fixed; }
.aimock .mp2-table td{ box-sizing:border-box; background:#fff; color:#666; padding:10px; vertical-align:top; } /* 罫線は重いため撤去（ユーザー指示） */
.aimock .mp2-table td.mp2-img{ width:261px; } /* 内容幅240px + padding20px + 罫線。imgbox240pxがはみ出さない幅 */
.aimock .mp2-table-cancel td{ opacity:.75; }

.aimock .mp2-imgbox{ margin:0; width:240px; height:180px; background:#eee; overflow:hidden; } /* 写真素材(280x210/400x300)と同じ4:3でクロップ最小 */
.aimock .mp2-imgbox img{ display:block; width:100%; height:100%; object-fit:cover; }
.aimock .mp2-table-cancel .mp2-imgbox img{ filter:grayscale(1); opacity:.7; }

.aimock .mp2-info{ margin:0 0 10px; padding:0; list-style:none; }
.aimock .mp2-info li{ display:table; width:100%; table-layout:fixed; margin-bottom:4px; }
.aimock .mp2-info li dl{ display:contents; }
.aimock .mp2-info li dt{ display:table-cell; width:100px; padding:4px 8px; text-align:center; vertical-align:middle; color:#666; font-weight:bold; background:#eee; font-size:11px; border-bottom:1px solid #fff; }
.aimock .mp2-info li dd{ display:table-cell; padding:4px 0 4px 10px; vertical-align:middle; color:#333; }
.aimock .mp2-info li.name dd{ font-size:14px; font-weight:bold; color:#000; }
.aimock .mp2-info li dd.mp2-price{ color:var(--hh-price); font-size:17px; font-weight:bold; } /* 正式見積の実額は本サイトの価格表現（赤太字）で強調 */
.aimock .mp2-info li.name dd a{ color:#000; font-weight:bold; text-decoration:underline; }
.aimock .mp2-info li.name dd a:hover{ text-decoration:none; }

/* 即予約確定の一覧（現行本番の赤字注意書き・集合時間強調に準拠） */
.aimock .mp2-notice-red{ margin:0 0 12px; padding:10px 12px; border:1px solid #f3c8c8; border-radius:4px; background:var(--hh-soft-red); }
.aimock .mp2-notice-red p{ margin:0 0 6px; font-size:12px; color:var(--hh-cta); line-height:1.7; }
.aimock .mp2-notice-red p:last-child{ margin-bottom:0; }
.aimock .mp2-important{ color:var(--hh-cta); font-weight:bold; }

.aimock .mp2-origin{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:#eee; color:#666; font-size:11px; font-weight:bold; vertical-align:middle; }
.aimock .mp2-origin.st-new{ background:var(--hh-soft-red); color:var(--hh-cta); }
.aimock .mp2-origin.st-ready{ background:#e8f7ee; color:#1c7a45; }
.aimock .mp2-origin.st-pending{ background:#fff4e0; color:#9a5b00; }
.aimock .mp2-origin.st-cancel{ background:#eee; color:#777; }
.aimock .mp2-origin.st-blue{ background:#eef6ff; color:#1e5fa8; }

.aimock .mp2-menu{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 8px; padding:0; list-style:none; }
.aimock .mp2-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:140px; min-height:32px; padding:6px 12px; border-radius:4px; border:2px solid #999; background:#fff; color:#999; font-size:12px; font-weight:bold; text-decoration:none; line-height:1.2; cursor:pointer; box-sizing:border-box; font-family:inherit; }
.aimock .mp2-btn.primary{ min-width:160px; color:#fff; border-color:var(--hh-cta); background:var(--hh-cta); box-shadow:0 2px 0 #8f1717; }
.aimock .mp2-btn.sub{ color:#0eb1df; border-color:#0eb1df; background:#fff; }
.aimock .mp2-btn.sm{ min-width:0; padding:6px 18px; }
.aimock .mp2-btn:hover{ opacity:.85; }
.aimock .mp2-btn.disabled{ background:#e9e9e9; border-color:#ddd; color:#b2b2b2; cursor:not-allowed; }
.aimock .mp2-btn.disabled:hover{ opacity:1; }

.aimock .mp2-status{ margin:0; font-size:12px; color:#333; line-height:1.7; }
.aimock .mp2-status b{ margin-right:6px; }
.aimock .mp2-status b.clr-red{ color:var(--hh-price); }
.aimock .mp2-status.st-new b{ color:var(--hh-cta); }
.aimock .mp2-status.st-ready b{ color:#1c7a45; }
.aimock .mp2-status.st-pending b{ color:#9a5b00; }
.aimock .mp2-status.st-cancel b{ color:#777; }
.aimock .mp2-status.st-attention{ padding:10px 12px; border:1px solid var(--hh-cta); border-radius:4px; background:var(--hh-soft-red); } /* 予約手配完了など、行動を促す案内は赤枠で強調（ユーザー指示） */

.aimock .mp2-cnt{ display:inline-block; margin-left:4px; font-size:10px; font-weight:bold; background:var(--hh-cta); color:#fff; border-radius:999px; padding:1px 6px; }

/* ボタンに満たない補助導線は控えめなテキストリンクで（ボタン乱立によるノイズ回避） */
.aimock .mp2-links{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 10px; padding:0; list-style:none; font-size:12px; }
.aimock .mp2-links a{ color:var(--hh-link); text-decoration:underline; }
.aimock .mp2-links a:hover{ color:var(--hh-link-hover); text-decoration:none; }
.aimock .mp2-links .disabled{ color:#b2b2b2; }

/* 担当者に相談する */
.aimock .mp2-thread{ margin-top:12px; padding-top:12px; border-top:1px dashed #ccc; }
.aimock .mp2-thread-ttl{ margin:0 0 8px; font-size:13px; font-weight:bold; color:#333; }
.aimock .mp2-thread-list{ margin:0 0 10px; }
.aimock .mp2-thread-empty{ margin:0 0 10px; font-size:12px; color:#999; }
.aimock .mp2-thread-item{ margin-bottom:8px; padding:9px 11px; border:1px solid #eee; border-radius:4px; background:#fff; }
.aimock .mp2-thread-item.hot{ background:#ffffde; border-color:#eeeecc; }
.aimock .mp2-thread-item.member{ background:#f7f7f7; }
.aimock .mp2-thread-label{ margin:0 0 4px; font-size:11px; font-weight:bold; color:#666; }
.aimock .mp2-thread-item.hot .mp2-thread-label{ color:#ff0000; }
.aimock .mp2-thread-body{ font-size:13px; color:#333; line-height:1.7; white-space:pre-wrap; }
.aimock .mp2-thread-form textarea.mp2-thread-area{ width:100%; padding:9px; border:1px solid #ccc; border-radius:4px; font-size:13px; color:#333; resize:vertical; font-family:inherit; line-height:1.6; box-sizing:border-box; }
.aimock .mp2-thread-form textarea.mp2-thread-area:focus{ outline:none; border-color:var(--hh-red); box-shadow:0 0 0 2px var(--hh-soft-red); }
.aimock .mp2-thread-form-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.aimock .mp2-thread-note{ margin:0; font-size:11px; color:#999; }

/* サイドメニュー（#contents #side dl.mymenu 相当） */
.aimock .mp2-side-box{ background:#fff; margin:0 0 14px; }
.aimock .mp2-side-ttl{ margin:0 0 8px; line-height:0; }
.aimock .mp2-side-ttl img{ display:block; width:100%; height:auto; }
.aimock .mp2-side-desc{ font-size:83%; color:#666; padding:3px; margin:0 0 10px; line-height:1.6; }
.aimock .mp2-menu-list{ margin:0; padding:0; border-top:1px solid #ccc; }
.aimock .mp2-menu-list dt,
.aimock .mp2-menu-list dd{ border-bottom:1px dotted #ccc; }
.aimock .mp2-menu-list dt{ border-top:0; }
.aimock .mp2-menu-list dd.first{ border-top:1px solid #ccc; }
.aimock .mp2-menu-list dt a,
.aimock .mp2-menu-list dd a{ display:block; padding:5px 3px 5px 10px; color:#006ce6; text-decoration:none; font-size:93%; }
.aimock .mp2-menu-list dt a{ font-weight:bold; background:#e6e6e6; font-size:100%; padding:5px 3px; }
.aimock .mp2-menu-list dt a:hover,
.aimock .mp2-menu-list dd a:hover{ color:#00a8ff; text-decoration:underline; }
.aimock .mp2-menu-cnt{ display:inline-block; margin-left:4px; font-size:10px; font-weight:bold; background:var(--hh-cta); color:#fff; border-radius:999px; padding:1px 7px; }
.aimock #headerBoxSp .mp2-menu-cnt{ line-height:1.5; vertical-align:middle; } /* ドロワー行の line-height:44px を継承させない */

/* SNSアカウントでログイン（メニュー内） */
.aimock .mp2-menu-list dd.mp2-sns{ padding:5px 3px 5px 10px; }
.aimock .mp2-menu-list dd.mp2-sns > a{ font-size:12px; white-space:nowrap; padding-left:0; padding-right:0; }
.aimock .mp2-menu-list dd.mp2-sns a{ display:inline; padding:0; }
.aimock .mp2-sns-icons{ display:flex; gap:10px; margin:8px 0 0; padding:0; }
.aimock .mp2-menu-list dd.mp2-sns .mp2-sns-ico{ display:inline-flex !important; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; padding:0; text-decoration:none; line-height:1; box-sizing:border-box; flex-shrink:0; overflow:hidden; }
.aimock .mp2-sns-ico svg{ display:block; flex-shrink:0; }
.aimock .mp2-sns-ico.google{ background:#fff; border:1px solid #ccc; }
.aimock .mp2-sns-ico.fb{ background:#1877f2; border:1px solid #1877f2; }

/* AIG海外旅行保険バナー（現行本番の実バナー画像を使用） */
.aimock .mp2-insurance{ line-height:0; }
.aimock .mp2-insurance img{ display:block; width:100%; height:auto; }

/* フッター：全ページ common_2 の標準レイアウト（パネル外・白背景・1行メニュー）に統一。
   本番マイページの「#contents 内フッター・560px二行折返し」は崩れて見えるため不採用（ユーザー指示）。
   SP の赤線区切りのみ下の media query 内で上書き */

@media(max-width:768px){
  /* ============ ページ枠組み：本番SPレイアウト準拠 ============
     本番はレスポンシブではなく SP 専用テンプレート（tpl/user/sp + /sp/css/style.css）。
     モックはレスポンシブのまま、SP時の枠組み（パンくず・見出し・メニュー・フッター）を
     本番SPの見た目に揃える。一覧カードの意匠はモック独自のまま維持 */
  .aimock .mp2-wrap{ background:#fff; padding:0 5px; } /* SPはグレー帯なし・白背景 */

  /* パンくず：赤帯（.page_nav ul.breadcrumb 相当） */
  .aimock .mp2-bc{ margin:0 -5px 15px; padding:0 5px 0 2%; background:#ca2c2b; font-size:13px; gap:0; }
  .aimock .mp2-bc li{ display:flex!important; align-items:center; color:#fff; }
  .aimock .mp2-bc li + li:before{ content:"▶"; margin:0 6px; font-size:8px; color:#fff; }
  .aimock .mp2-bc a{ color:#fff; padding:13px 0; text-decoration:none; }
  .aimock .mp2-bc li:last-child{ font-weight:bold; }

  /* マイページ見出しはPCと同じ赤縦バー、セクション見出しは黒帯（ともにユーザー指示） */
  .aimock .mp2-head{ margin:16px 0 18px; font-size:17px; padding:3px 0 3px 12px; }
  .aimock .mp2-h2{ margin:24px -14px 14px; padding:9px 14px; background:#222; border:0; color:#fff; font-size:16px; }
  .aimock .mp2-h2:first-child{ margin-top:0; }

  /* 並び順：本文 → AIGバナー → メニュー（本番SP: reserveList → myPageMenu） */
  .aimock .mp2-layout{ display:flex; flex-direction:column; }
  .aimock .mp2-main{ order:1; margin-top:0; }
  .aimock .mp2-side{ order:2; margin-top:30px; flex:none; width:auto; display:flex; flex-direction:column; }
  .aimock .mp2-side-ttl, .aimock .mp2-side-desc{ display:none; }
  .aimock .mp2-side > .mp2-side-box{ margin:0; order:2; }
  .aimock .mp2-side > .mp2-insurance{ order:1; margin:0 0 15px; }

  /* メニュー行（#contents .myPageMenu 相当：境界線 + 右赤シェブロン） */
  .aimock .mp2-menu-list{ border-top:1px solid #bbb; }
  .aimock .mp2-menu-list dt,
  .aimock .mp2-menu-list dd{ border:0; border-bottom:1px solid #bbb; background:url(../images/common_2/sp/hm_btn_icon_arrow.png) no-repeat right center; background-size:8% auto; }
  .aimock .mp2-menu-list dt a,
  .aimock .mp2-menu-list dd a{ display:block; padding:15px 40px 15px 15px; color:#000; font-size:14px; font-weight:normal; background:transparent; }
  .aimock .mp2-menu-list dd.first{ border-top:0; }
  .aimock .mp2-menu-list dd.mp2-sns{ padding:0; display:flex; align-items:center; }
  .aimock .mp2-menu-list dd.mp2-sns > a{ display:block; padding:15px 0 15px 15px; font-size:14px; }
  .aimock .mp2-sns-icons{ margin:0 0 0 12px; }

  /* フッター：赤線区切り（sp/css/common.css footer{border-top:2px solid #ca2c2b} 相当） */
  .mp2-page #footer{ margin:30px 0 0; padding:30px 0 20px; border-top:2px solid #ca2c2b; }

  /* ============ 一覧カード（モック独自の意匠を維持） ============ */
  /* SPは写真をカード上部の全幅バナーにして大きく見せる */
  .aimock .mp2-table, .aimock .mp2-table tbody, .aimock .mp2-table tr, .aimock .mp2-table td{ display:block; width:100%; }
  .aimock .mp2-table td.mp2-img{ width:100%; border-bottom:0; } /* PC用261px指定を上書き */
  .aimock .mp2-imgbox{ width:100%; height:auto; aspect-ratio:16/9; }
  .aimock .mp2-info li{ display:block; }
  .aimock .mp2-info li dt{ display:inline-block; width:auto; min-width:70px; background:transparent; padding:0; margin-right:6px; }
  .aimock .mp2-info li dd{ display:inline; padding:0; }
  .aimock .mp2-menu li{ flex:1 1 auto; min-width:0; }
  .aimock .mp2-btn{ min-width:0; width:100%; }
}

/* 本番サイトと同等のパンくず（breadcrumb4 相当。inner をレスポンシブ化のみ調整） */
.breadcrumb4{padding:11px 0;background-color:#eeeeee}
.breadcrumb4 .breadcrumb_in{max-width:1280px;margin:0 auto;letter-spacing:-.40em;padding:0 14px;box-sizing:border-box}
.breadcrumb4 ul{margin:0;padding:0;list-style:none}
.breadcrumb4 li{display:inline-block;vertical-align:middle;font-size:11px;font-weight:bold;line-height:20px;color:#666666;letter-spacing:normal;padding:0 18px 0 0}
.breadcrumb4 li a{display:inline-block;color:#006ce6;text-decoration:underline;background:url(../images/common_2/icon_breadcrumb.png) right 5px / 6px 10px no-repeat;line-height:20px;padding:0 18px 0 0}
.breadcrumb4 li:first-child{padding-left:0}
.breadcrumb4 li:last-child{padding-right:0}
.breadcrumb4 li:last-child a{background:none}

/* 予約一覧のステータスバッジ（パッと見でわかる色分けピル・塗りつぶしで強調） */
.aimock .mp2-stbadge{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:bold;border-radius:999px;padding:6px 18px;margin:0 0 12px;color:#fff;letter-spacing:.02em;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.aimock .mp2-stbadge::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
.aimock .mp2-stbadge.st-arranged{background:#1c7a45}
.aimock .mp2-stbadge.st-finished{background:#8a8a8a}
.aimock .mp2-stbadge.st-confirmed{background:#1257c9}
.aimock .mp2-stbadge.st-new{background:var(--hh-cta)}
.aimock .mp2-stbadge.st-ready{background:#1c7a45}
.aimock .mp2-stbadge.st-pending{background:#c77700}
.aimock .mp2-stbadge.st-cancel{background:#8a8a8a}

/* 一覧カード（予約確認・見積依頼一覧共通／提供Tailwindデザイン移植） */
.aimock .rvc-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden;margin:0 0 24px}
.aimock .rvc-card.is-finished{opacity:.75;filter:grayscale(20%);transition:opacity .2s,filter .2s}
.aimock .rvc-card.is-finished:hover{opacity:1;filter:none}
.aimock .rvc-main{display:flex;gap:32px;padding:28px 32px;align-items:flex-start}
.aimock .rvc-img{flex:0 0 256px;width:256px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#f3f4f6;border:1px solid #f3f4f6;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.aimock .rvc-img a{display:block;width:100%;height:100%}
.aimock .rvc-img img{width:100%;height:100%;object-fit:cover;display:block}
.aimock .rvc-body{flex:1;min-width:0;display:flex;flex-direction:column}
.aimock .rvc-st{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;margin:0 0 12px;align-self:flex-start}
.aimock .rvc-st .dot{width:6px;height:6px;border-radius:50%}
.aimock .rvc-st.st-arranged{background:#ecfdf5;color:#047857}.aimock .rvc-st.st-arranged .dot{background:#10b981}
.aimock .rvc-st.st-finished{background:#f3f4f6;color:#4b5563}
.aimock .rvc-st.st-confirmed{background:#eff6ff;color:#1d4ed8}.aimock .rvc-st.st-confirmed .dot{background:#3b82f6}
.aimock .rvc-st.st-new{background:#fef2f2;color:#b91c1c}.aimock .rvc-st.st-new .dot{background:#ef4444}
.aimock .rvc-st.st-ready{background:#ecfdf5;color:#047857}.aimock .rvc-st.st-ready .dot{background:#10b981}
.aimock .rvc-st.st-pending{background:#fffbeb;color:#b45309}.aimock .rvc-st.st-pending .dot{background:#f59e0b}
.aimock .rvc-st.st-cancel{background:#f3f4f6;color:#4b5563}
.aimock .rvc-title{font-size:17px;font-weight:bold;color:#111827;margin:0 0 18px;line-height:1.5}
.aimock .rvc-title a{color:inherit;text-decoration:none}.aimock .rvc-title a:hover{text-decoration:underline}
.aimock .rvc-title.is-strike{text-decoration:line-through;text-decoration-color:#d1d5db}
.aimock .rvc-dl{display:grid;grid-template-columns:120px 1fr;column-gap:16px;row-gap:10px;margin:0 0 22px}
.aimock .rvc-dl dt{font-size:13px;color:#6b7280;padding-top:2px}
.aimock .rvc-dl dd{font-size:15px;color:#111827;margin:0;line-height:1.7}
.aimock .rvc-dl dd.rem{font-size:13px;color:#4b5563}
.aimock .rvc-dl dd.imp{color:#dc2626;font-weight:bold}
.aimock .rvc-dl dd.price{color:var(--hh-price);font-weight:bold}
.aimock .rvc-rednote{font-size:13px;color:#dc2626;background:#fef2f2;padding:10px 12px;border-radius:8px;margin-top:8px}
.aimock .rvc-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.aimock .rvc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:220px;padding:10px 16px;font-size:13.5px;font-weight:600;border-radius:8px;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:pointer;font-family:inherit;border:0;white-space:nowrap;box-sizing:border-box;line-height:1.5}
.aimock .rvc-btn.dark{background:#111827;color:#fff}.aimock .rvc-btn.dark:hover{background:#1f2937}
.aimock .rvc-btn.line{background:#fff;border:1px solid #d1d5db;color:#374151}.aimock .rvc-btn.line:hover{background:#f9fafb}
.aimock .rvc-btn.soft{background:#f3f4f6;color:#374151;box-shadow:none}.aimock .rvc-btn.soft:hover{background:#e5e7eb}
.aimock .rvc-btn i{width:16px;height:16px;color:#9ca3af}
.aimock .rvc-btn.dark i{color:#d1d5db}
.aimock .rvc-btn.fit{width:auto;min-width:220px}
.aimock .rvc-btn.cta{background:var(--hh-cta);color:#fff;box-shadow:0 2px 0 #8f1717}
.aimock .rvc-btn.cta:hover{background:var(--hh-cta-dark)}
.aimock .rvc-btn.cta i{color:#fff}
.aimock .rvc-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:16px;font-size:13px;color:#6b7280}
.aimock .rvc-links a{color:#6b7280;text-decoration:underline;text-underline-offset:2px}
.aimock .rvc-links a:hover{color:#111827}
.aimock .rvc-links .mut{color:#9ca3af}
.aimock .rvc-note{display:flex;gap:10px;margin-top:20px;font-size:13px;color:#4b5563;background:rgba(249,250,251,.8);border:1px solid #f3f4f6;border-radius:8px;padding:14px;line-height:1.7}
.aimock .rvc-note i{width:18px;height:18px;color:#3b82f6;flex:none;margin-top:2px}
.aimock .rvc-note p{margin:0}
.aimock .rvc-thread{background:#f9fafb;border-top:1px solid #e5e7eb;padding:24px 32px;display:grid;gap:16px}
.aimock .rvc-thread h3{font-size:13.5px;font-weight:bold;color:#111827;margin:0;display:flex;align-items:center;gap:8px}
.aimock .rvc-thread h3 i{width:16px;height:16px;color:#9ca3af}
.aimock .rvc-cmts{display:grid;gap:10px}
.aimock .rvc-cmt{background:#fff;border:1px solid #fde68a;border-radius:8px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.aimock .rvc-cmt .head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.aimock .rvc-cmt .who{font-size:13px;font-weight:bold;color:#92400e}
.aimock .rvc-cmt .dt{font-size:11.5px;color:#ca8a04}
.aimock .rvc-cmt .body{font-size:14px;color:#1f2937;line-height:1.8}
.aimock .rvc-cmt.member{border-color:#e5e7eb}.aimock .rvc-cmt.member .who{color:#374151}.aimock .rvc-cmt.member .dt{color:#9ca3af}
.aimock .rvc-empty{font-size:13px;color:#6b7280;margin:0}
.aimock .rvc-form textarea{width:100%;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:12px;font-size:15px;min-height:100px;resize:vertical;font-family:inherit;box-sizing:border-box;line-height:1.7}
.aimock .rvc-form .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.aimock .rvc-form .note{font-size:13px;color:#6b7280}
.aimock .rvc-alert{display:flex;gap:12px;background:rgba(254,242,242,.5);border:1px solid #fee2e2;border-radius:12px;padding:16px;margin:0 0 20px;font-size:13px;color:#991b1b;line-height:1.8}
.aimock .rvc-alert i{width:18px;height:18px;color:#ef4444;flex:none;margin-top:3px}
.aimock .rvc-alert p{margin:0 0 6px}.aimock .rvc-alert p:last-child{margin:0}
@media(max-width:700px){
  .aimock .rvc-main{flex-direction:column;gap:18px;padding:18px 16px}
  .aimock .rvc-img{width:100%;flex:none}
  .aimock .rvc-btn{width:100%}
  .aimock .rvc-dl{grid-template-columns:1fr;row-gap:2px}
  .aimock .rvc-dl dd{margin-bottom:8px}
  .aimock .rvc-thread{padding:18px 16px}
  .aimock .rvc-form .foot{flex-direction:column;align-items:stretch}
}

/* 相談送信の上限ブロック表示 */
.aimock .rvc-limit{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:11px 14px;margin:10px 0 0;font-size:13.5px;font-weight:bold;color:#b91c1c;line-height:1.8}
.aimock .rvc-form textarea:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}
.aimock .rvc-btn:disabled{opacity:.45;cursor:default;pointer-events:none}

/* ============================================================
   参加者情報（パスポート情報）の登録 — 予約確認／見積依頼一覧 共通
   2026-08-08 ご要望①
   ============================================================ */
.aimock .rvc-pax{background:#f9fafb;border-top:1px solid #e5e7eb;padding:24px 32px;display:grid;gap:14px}
.aimock .rvc-pax h3{font-size:13.5px;font-weight:bold;color:#111827;margin:0;display:flex;align-items:center;gap:8px}
.aimock .rvc-pax h3 i{width:16px;height:16px;color:#9ca3af}
.aimock .pax-lead{margin:0;font-size:13px;color:#4b5563;line-height:1.8}
.aimock .pax-list{display:grid;gap:14px}
.aimock .pax-person{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px}
.aimock .pax-person .ttl{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.aimock .pax-person .ttl b{font-size:13.5px;color:#111827;font-weight:bold}
.aimock .pax-person .ttl .rep{font-size:11.5px;font-weight:bold;color:#1d4ed8;background:#eff6ff;border:1px solid #dbeafe;border-radius:999px;padding:2px 9px}
.aimock .pax-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.aimock .pax-f{display:grid;gap:4px;min-width:0;align-content:start}
.aimock .pax-f.wide{grid-column:1/-1}
.aimock .pax-f label{font-size:11.5px;font-weight:bold;color:#6b7280}
.aimock .pax-f label .req{color:#b91c1c;margin-left:3px}
/* box-sizing は .aimock-wrap 配下だけに効く指定のため、この画面（body.aimock 直下）では
   padding+border が幅に加算され、右隣の欄と重なっていた。ここだけ border-box にする */
.aimock .pax-f input,.aimock .pax-f select{box-sizing:border-box;width:100%;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:9px 10px;font-size:14px;color:#1f2937;font-family:inherit}
.aimock .pax-f input:focus,.aimock .pax-f select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.aimock .pax-f input:disabled,.aimock .pax-f select:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}
.aimock .pax-f .hint{font-size:11px;color:#9ca3af;line-height:1.6}
.aimock .pax-f.is-err input,.aimock .pax-f.is-err select{border-color:#ef4444;background:#fef2f2}
.aimock .pax-err{margin:0;font-size:13.5px;font-weight:bold;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:11px 14px}
.aimock .rvc-pax .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.aimock .rvc-pax .foot .note{font-size:13px;color:#6b7280}
.aimock .pax-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:bold;border:1px solid;line-height:1.6}
.aimock .pax-badge.none{background:#fffbeb;color:#b45309;border-color:#fde68a}
.aimock .pax-badge.part{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.aimock .pax-badge.done{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.aimock .rvc-btn .pax-badge{margin-left:2px}
@media(max-width:700px){
  .aimock .rvc-pax{padding:18px 16px}
  .aimock .pax-grid{grid-template-columns:1fr}
  .aimock .rvc-pax .foot{flex-direction:column;align-items:stretch}
}