@charset "UTF-8";
/* ============================================================
   PHOTO FACTORY LAR  料金計算カート（calc-studio / calc-location 共通）
   lar.css のトークンをそのまま使用（水色 #C4DDE1 / ゴールド #B9AB7A / 紺 #0a112d）
   ============================================================ */

.calc-wrap{max-width:560px;margin:0 auto;}

.calc-balloon{max-width:340px;margin:0 auto 22px;background:var(--sky-dd);color:#fff;
  font-size:12.5px;text-align:center;padding:11px 16px;border-radius:10px;position:relative;line-height:1.8;}
.calc-balloon::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:var(--sky-dd);border-bottom:0;}

.calc-info{font-size:12px;line-height:1.9;color:var(--sub);text-align:center;
  background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;margin:0 0 20px;}

/* ---- 人を追加するカード ---- */
.person{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px;
  background:#fff;box-shadow:var(--sh);}
.person-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.person-num{font-size:13px;font-weight:700;color:#fff;background:var(--sky-d);
  padding:4px 14px;border-radius:14px;letter-spacing:.04em;}
.del{font-family:var(--sans);font-size:11.5px;color:var(--sub);background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:4px 12px;cursor:pointer;}
.del:active{background:var(--soft);}

.field{margin-bottom:12px;}
.field label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:5px;}
.person select,.outfit select{width:100%;font-family:var(--sans);font-size:14px;color:var(--text);
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0l5.5 7 5.5-7z' fill='%23B9AB7A'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;}

.subtotal{text-align:right;font-size:12.5px;color:var(--sub);border-top:1px dotted var(--line);
  padding-top:10px;margin-top:4px;}
.subtotal b{color:var(--sky-dd);font-size:15px;margin-left:5px;font-weight:700;}

/* ---- 1着＝ワンセット ---- */
.outfit{border:1px solid var(--line);border-radius:10px;padding:12px 12px 10px;margin-bottom:12px;background:var(--soft);}
.outfit-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;
  color:var(--sky-dd);font-weight:700;margin-bottom:8px;letter-spacing:.04em;}
.del-outfit{border:none;background:#fff;color:var(--sub);width:22px;height:22px;border-radius:50%;
  cursor:pointer;font-size:13px;line-height:1;border:1px solid var(--line);}
.orow{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.orow>label{font-size:11.5px;color:var(--sub);width:96px;flex:none;
  display:flex;align-items:center;gap:5px;}

/* 料金表の 1〜4 と同じ番号を入力欄にも付けて、どこの料金か対応が分かるようにする */
.onum{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:none;border-radius:50%;
  background:var(--sky-d);color:#fff;font-size:10px;font-weight:700;
  font-family:var(--sans);line-height:1;letter-spacing:0;}

/* 2 レンタル料は自動計算のため、選ぶのではなく金額を表示する */
.o-rental{flex:1;font-size:13px;color:var(--text);font-weight:600;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;}
.o-rental.is-free{color:var(--gold-d);}

/* ---- 外出レンタル（スタジオ料金とは別枠）---- */
.out-block{margin:9px -4px 2px;padding:9px 10px;border-radius:9px;
  background:#fff;border:1px dashed var(--line);}
.out-block.on{border-style:solid;border-color:var(--gold);background:#fffdf7;}
.out-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;}
.out-toggle input{accent-color:var(--gold-d);width:17px;height:17px;flex:none;}
.out-t{flex:1;min-width:0;font-size:12px;color:var(--text);line-height:1.5;}
.out-t small{display:block;font-size:10.5px;color:var(--sub);margin-top:1px;line-height:1.45;}
.out-p{font-size:12.5px;color:var(--gold-d);font-weight:700;flex:none;white-space:nowrap;align-self:flex-start;padding-top:1px;}
.loc{flex:1;display:flex;gap:14px;}
.loc-opt{font-size:12.5px;color:var(--text);display:flex;align-items:center;gap:4px;cursor:pointer;}
.loc-opt input{accent-color:var(--sky-d);}
.oprice{text-align:right;font-size:12.5px;color:var(--sky-dd);font-weight:600;
  border-top:1px dotted var(--line);padding-top:7px;margin-top:4px;}
.free-tag{display:inline-block;background:#fff;color:var(--gold-d);border:1px solid var(--gold);
  border-radius:10px;font-size:10.5px;padding:1px 8px;margin-right:6px;letter-spacing:.02em;}

.add-outfit{font-family:var(--sans);font-size:11.5px;color:var(--sky-dd);background:#fff;
  border:1px solid var(--sky-d);border-radius:16px;padding:6px 16px;cursor:pointer;margin-bottom:4px;}
.add-outfit:active{background:var(--soft);}

/* ---- 1歳バースデーオプション ---- */
.bday{border:1px solid var(--gold);border-radius:10px;background:#fdfbf4;
  padding:11px 13px 8px;margin:0 0 12px;}
.bday-h{font-size:12px;font-weight:700;color:var(--gold-d);letter-spacing:.08em;margin-bottom:7px;}
.bday-opt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);
  padding:7px 2px;cursor:pointer;border-top:1px dotted var(--line);}
.bday-opt:first-of-type{border-top:none;}
.bday-opt input{accent-color:var(--gold);flex:none;width:16px;height:16px;}
.bo-name{flex:1;line-height:1.5;}
.bo-name small{display:block;font-size:10.5px;color:var(--sub);}
.bday-opt b{color:var(--gold-d);font-weight:700;font-size:13px;white-space:nowrap;}

/* ---- 人を追加ボタン ---- */
.add-btn{display:block;width:100%;font-family:var(--sans);font-weight:700;font-size:14.5px;
  color:var(--sky-dd);background:#fff;border:1.5px dashed var(--sky-d);border-radius:14px;
  padding:15px;cursor:pointer;margin-bottom:28px;letter-spacing:.04em;}
.add-btn:active{background:var(--soft);}

/* ---- 合計 ---- */
.calc-total{display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#7EB6BF,#6A8488);color:#fff;border-radius:14px;
  padding:16px 22px;margin-top:6px;font-size:14.5px;box-shadow:var(--sh);}
.calc-total-num{font-size:26px;font-weight:700;letter-spacing:.02em;font-family:var(--en);}
.calc-total-note{font-size:11.5px;color:var(--sub);text-align:center;line-height:1.9;margin:14px 0 0;}

@media(min-width:760px){
  .calc-total-num{font-size:28px;}
}

/* ---- ご来店支度／出張支度 切替（ロケーションのみ） ---- */
.shitaku-sw{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;
  background:#fff;border:1px solid var(--gold);border-radius:12px;
  padding:12px 16px;margin:0 0 18px;}
.shitaku-sw .sw-label{font-size:12px;color:var(--gold-d);letter-spacing:.08em;font-weight:700;}
.shitaku-sw .sw-opt{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--text);cursor:pointer;}
.shitaku-sw .sw-opt input{accent-color:var(--gold);}

/* ---- 見積りの注記 ---- */
.calc-total-note b{color:var(--gold-d);}

/* ---- 料金一覧表（既存の料金構成ページと同じ内容） ---- */
.ptable{margin:34px auto 0;}
.pt-h{font-family:var(--serif);text-align:center;font-size:18px;font-weight:500;
  letter-spacing:.16em;color:var(--ink);margin:0 0 8px;}
.pt-h::after{content:'';display:block;width:34px;height:1px;background:var(--gold);margin:12px auto 0;}
.pt-note{font-size:12px;color:var(--sub);text-align:center;line-height:1.9;margin:0 0 20px;}
.pt-sub{font-family:var(--serif);font-size:14.5px;font-weight:500;letter-spacing:.1em;
  color:#fff;background:var(--sky-dd);border-radius:4px;
  padding:7px 14px;margin:22px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pt-sub span{font-family:var(--sans);font-size:10.5px;letter-spacing:.04em;
  background:rgba(255,255,255,.22);border-radius:12px;padding:2px 10px;}
.pt-cau{font-size:11.5px;color:var(--sub);line-height:1.9;margin:14px 0 0;}

@media(max-width:380px){
      }

/* ---- 商品を選ぶ ---- */
.itempick{border:1px solid var(--gold);border-radius:14px;background:#fdfbf6;
  padding:16px 15px 14px;margin:18px 0 14px;}
.ip-head{font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:.1em;
  color:var(--gold-d);margin-bottom:13px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.ip-head small{font-family:var(--sans);font-size:11px;color:var(--sub);letter-spacing:0;}
.ip-field{margin-bottom:12px;}
.ip-field label{display:block;font-size:12px;color:var(--sub);margin-bottom:5px;}
.itempick select{width:100%;font-family:var(--sans);font-size:13.5px;color:var(--text);
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0l5.5 7 5.5-7z' fill='%23B9AB7A'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;}
.ip-deal{font-size:11px;line-height:1.8;color:var(--sub);margin:6px 0 0;}
.ip-deal.on{color:var(--gold-d);font-weight:700;}
.deal-tag{display:inline-block;background:var(--gold);color:#fff;border-radius:10px;
  font-size:10px;padding:1px 8px;margin-right:6px;font-weight:400;}

.ip-more{border-top:1px dotted var(--line);padding-top:10px;margin-top:10px;}
.ip-more summary{font-size:12.5px;color:var(--sky-dd);cursor:pointer;list-style:none;}
.ip-more summary::-webkit-details-marker{display:none;}
.ip-more summary::before{content:'＋ ';color:var(--gold);}
.ip-more[open] summary::before{content:'− ';}
.gd-list,.ex-list{margin-top:9px;}
.gd-opt{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text);
  padding:7px 2px;border-top:1px dotted var(--line);cursor:pointer;}
.gd-opt:first-child{border-top:none;}
.gd-opt input{accent-color:var(--gold);flex:none;}
.gd-nm{flex:1;line-height:1.5;}
.gd-opt b{color:var(--gold-d);font-size:12px;white-space:nowrap;}

.ex-row{display:flex;align-items:center;gap:8px;font-size:12.5px;
  padding:8px 2px;border-top:1px dotted var(--line);}
.ex-row:first-child{border-top:none;}
.ex-nm{flex:1;}
.ex-ct{display:flex;align-items:center;gap:8px;}
.ex-ct button{width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);
  background:#fff;color:var(--gold-d);font-size:14px;line-height:1;cursor:pointer;}
.ex-n{min-width:16px;text-align:center;color:var(--text);}
.ex-p{color:var(--gold-d);font-size:12px;white-space:nowrap;}

.ip-sum{text-align:right;font-size:12.5px;color:var(--sub);
  border-top:1px solid var(--line);padding-top:10px;margin-top:12px;}
.ip-sum b{color:var(--gold-d);font-size:15px;margin-left:6px;}

/* ---- 内訳 ---- */
.calc-breakdown{display:flex;gap:10px;margin-top:8px;}
.calc-breakdown div{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:9px 6px;font-size:11px;color:var(--sub);text-align:center;}
.calc-breakdown span{white-space:nowrap;}
.calc-breakdown b{color:var(--sky-dd);font-size:13.5px;white-space:nowrap;}

/* ---- 基本料金 ---- */
.basefee{border:1px solid var(--sky-d);border-radius:14px;background:#f7fbfc;
  padding:13px 15px;margin:0 0 16px;}
.bf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;color:var(--text);}
.bf-row + .bf-row{border-top:1px dotted var(--line);margin-top:9px;padding-top:9px;}
.bf-nm{line-height:1.6;}
.bf-nm small{display:block;font-size:10.5px;color:var(--sub);}
.bf-p{color:var(--sky-dd);font-size:15px;font-weight:700;white-space:nowrap;}
.bf-extra .ex-ct{gap:7px;font-size:12px;color:var(--sub);}
.bf-extra button{width:26px;height:26px;border-radius:50%;border:1px solid var(--sky-d);
  background:#fff;color:var(--sky-dd);font-size:14px;line-height:1;cursor:pointer;}
.bf-n{min-width:14px;text-align:center;color:var(--text);font-size:14px;}

/* 内訳が3つになったので折り返す */
.calc-breakdown{flex-wrap:wrap;}
.calc-breakdown div{flex:1 1 0;min-width:0;}

/* 料金表の先頭に置く基本料金の行 */

/* 撮影の種類（ロケーション／自宅出張） */
.bf-type{align-items:flex-start;flex-direction:column;gap:8px;}
.bf-opts{display:flex;flex-direction:column;gap:7px;width:100%;}
.bf-opt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;cursor:pointer;}
.bf-opt input{accent-color:var(--sky-d);flex:none;}
.bf-opt b{margin-left:auto;color:var(--sky-dd);font-size:14px;white-space:nowrap;}
.bf-opt:has(input:checked){border-color:var(--sky-d);background:#f2f9fa;}

/* 出張エリア（長いので折り返す） */
.bf-area{align-items:flex-start;}
.bf-area-nm{flex:1;font-size:11.5px;line-height:1.7;}
.bf-area b{margin-left:8px;}
/* 主役の追加 */
.bf-lead .bf-p{font-size:14px;}

/* ========== プランごとの色調 ==========
   ページ全体の印象を、プランごとに少しずつ変えています。 */
/* スタジオ：やわらかい水色 */
body.theme-studio{background:linear-gradient(180deg,#f6fbfc 0%,#ffffff 40%);}

/* ロケーション：新緑のグリーン */
body.theme-location{background:linear-gradient(180deg,#f5faf3 0%,#ffffff 40%);}
body.theme-location .pt-h::after,
body.theme-location .sec-h::after{background:#9bb493;}
body.theme-location .basefee{border-color:#9bb493;background:#f8fbf7;}
body.theme-location .bf-p,body.theme-location .bf-n{color:#5d7a55;}
body.theme-location .bf-opt:has(input:checked){border-color:#9bb493;background:#f2f8ef;}
body.theme-location .calc-total{background:linear-gradient(135deg,#9bb493,#6f8a67);}

/* ロケ＋スタジオ：やさしいラベンダー */
body.theme-locastudio{background:linear-gradient(180deg,#f9f7fc 0%,#ffffff 40%);}
body.theme-locastudio .pt-h::after,
body.theme-locastudio .sec-h::after{background:#b0a6c8;}
body.theme-locastudio .basefee{border-color:#b0a6c8;background:#faf8fd;}
body.theme-locastudio .bf-p,body.theme-locastudio .bf-n{color:#6f6690;}
body.theme-locastudio .bf-opt:has(input:checked){border-color:#b0a6c8;background:#f5f2fa;}
body.theme-locastudio .calc-total{background:linear-gradient(135deg,#b0a6c8,#7d739b);}

/* ========== 料金一覧（カード型・横に広げた見せ方） ========== */
.ptable{margin:34px auto 0;}
.pt-h{font-family:var(--serif);text-align:center;font-size:20px;font-weight:500;
  letter-spacing:.16em;color:var(--ink);margin:0 0 8px;}
.pt-note{font-size:12.5px;color:var(--sub);text-align:center;line-height:1.9;margin:0 0 22px;}

/* 区分の見出し（お子さま／きょうだい／大人 など） */
.pt-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--serif);font-size:16px;font-weight:500;letter-spacing:.12em;
  color:var(--ink);background:none;padding:0;margin:0;}
.pt-sub::before{content:'';width:22px;height:1px;background:var(--gold);flex:none;}
.pt-sub span{font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--gold-d);
  background:#fdfaf2;border:1px solid var(--gold);border-radius:14px;padding:3px 12px;}

/* 料金カード */
.pcards{display:grid;grid-template-columns:1fr;gap:12px;}
.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:16px 18px;box-shadow:0 3px 14px rgba(120,120,110,.08);
  transition:box-shadow .3s ease, transform .3s ease;}
.pcard:hover{box-shadow:0 6px 20px rgba(120,120,110,.14);transform:translateY(-2px);}
.pc-h{display:inline-block;font-family:var(--serif);font-size:12.5px;font-weight:700;
  letter-spacing:.08em;color:var(--sky-dd);background:var(--soft);
  border-radius:14px;padding:5px 14px;margin-bottom:11px;line-height:1.5;}
.pc-h br{display:none;}
.pc-b{font-size:13px;line-height:2.1;color:var(--text);}
.pc-b b{font-family:var(--serif);color:var(--gold-d);font-weight:700;font-size:15px;}
.pc-b small{display:block;font-size:11px;color:var(--sub);line-height:1.8;margin-top:5px;}
/* 基本料金のカードだけ少し目立たせる */
.pcard.base{background:linear-gradient(150deg,#fbfdfd,#f2f9fa);border-color:var(--sky-d);}
.pcard.base .pc-h{background:var(--sky-d);color:#fff;}
.pcard.base .pc-b b{color:var(--sky-dd);font-size:19px;}
.pt-cau{font-size:11.5px;color:var(--sub);line-height:1.9;margin:16px 0 0;text-align:center;}

@media(min-width:760px){
  .ptable{margin-top:40px;}
  .pt-h{font-size:23px;}
  .pt-sub{font-size:17px;}
  .pc-b{font-size:13.5px;}
}

/* プランごとの色調をカードにも反映 */
body.theme-location .pc-h{color:#5d7a55;background:#eff6ec;}
body.theme-location .pcard.base{background:linear-gradient(150deg,#fbfdfa,#f1f7ee);border-color:#9bb493;}
body.theme-location .pcard.base .pc-h{background:#9bb493;}
body.theme-location .pcard.base .pc-b b{color:#5d7a55;}
body.theme-locastudio .pc-h{color:#6f6690;background:#f3f0f8;}
body.theme-locastudio .pcard.base{background:linear-gradient(150deg,#fcfbfe,#f5f2fa);border-color:#b0a6c8;}
body.theme-locastudio .pcard.base .pc-h{background:#b0a6c8;}
body.theme-locastudio .pcard.base .pc-b b{color:#6f6690;}

/* 区分見出しの色をプランごとに */
body.theme-studio .pt-sub::before{background:#6A8488;}
body.theme-studio .pt-sub span{color:#54737a;background:#f2f9fa;border-color:#9fc3c9;}
body.theme-location .pt-sub::before{background:#7a9470;}
body.theme-location .pt-sub span{color:#5d7a55;background:#f2f8ef;border-color:#9bb493;}
body.theme-locastudio .pt-sub::before{background:#8a80a6;}
body.theme-locastudio .pt-sub span{color:#6f6690;background:#f5f2fa;border-color:#b0a6c8;}

/* 料金カード内の税別表記 */
.pc-b small{display:inline;font-size:10.5px;color:var(--sub);margin:0 0 0 2px;line-height:inherit;}
/* 各行を1項目ずつ読みやすく */
.pc-b{font-size:13px;line-height:2.2;}
.pc-b br + br{display:none;}

/* プランページのヒーローに、プランの写真を薄く敷く */
.plan-hero{position:relative;overflow:hidden;isolation:isolate;}
.plan-hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background-size:cover;background-position:center 40%;opacity:.20;}
body.theme-studio .plan-hero::before{background-image:url("/option/img/plan-studio.webp");}
body.theme-location .plan-hero::before{background-image:url("/option/img/plan-location.webp");background-position:center 48%;}
body.theme-locastudio .plan-hero::before{background-image:url("/option/img/plan-locastudio.webp");}

/* ===== かんたん見積りボタン（ヒーロー直下・目立たせる） ===== */
.quote-btn{display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(135deg,#7EB6BF,#5f8489);color:#fff;border-radius:18px;
  padding:20px 22px 22px;box-shadow:0 8px 24px rgba(90,120,125,.28);
  transition:transform .25s ease, box-shadow .25s ease;}
.quote-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(90,120,125,.34);}
.qb-en{font-family:var(--en);font-size:10.5px;letter-spacing:.3em;opacity:.9;}
.qb-t{font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:.14em;margin:7px 0 0;}
.qb-t::after{content:'';display:block;width:30px;height:1px;background:rgba(255,255,255,.75);margin:11px auto 0;}
.qb-d{font-size:12px;line-height:1.8;margin-top:11px;opacity:.95;}
body.theme-location .quote-btn{background:linear-gradient(135deg,#9bb493,#6f8a67);}
body.theme-locastudio .quote-btn{background:linear-gradient(135deg,#b0a6c8,#7d739b);}

/* ===== 衣装LISTへのバナー ===== */
.cos-banner{display:block;position:relative;overflow:hidden;border-radius:18px;
  max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);
  box-shadow:0 4px 18px rgba(120,120,110,.14);}
.cos-banner img{width:100%;height:200px;object-fit:cover;object-position:center 28%;display:block;}
.cb-cap{display:block;padding:16px 18px 20px;text-align:center;}
.cb-en{display:block;font-family:var(--en);font-size:10.5px;letter-spacing:.36em;color:var(--gold-d);}
.cb-t{display:block;font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.12em;
  color:var(--ink);margin:7px 0 0;}
.cb-d{display:block;font-size:12px;color:var(--sub);margin-top:9px;}
.cb-go{display:inline-block;font-family:var(--serif);font-size:12.5px;letter-spacing:.08em;
  color:#fff;background:var(--sky-d);border-radius:22px;padding:8px 26px;margin-top:14px;}
body.theme-location .cb-go{background:#9bb493;}
body.theme-locastudio .cb-go{background:#b0a6c8;}
@media(min-width:760px){
  .cos-banner img{height:260px;}
  .qb-t{font-size:26px;}
}

/* ===== 料金カードの中身：1項目1行で、高さを詰める ===== */
.pr-list{list-style:none;margin:0;padding:0;}
.pr-row:last-child{border-bottom:none;}
.pr-row.free .pr-txt{display:block;color:var(--sub);font-size:12px;}
.pr-note{font-size:11px;color:var(--sub);line-height:1.7;margin:9px 0 0;
  padding-top:8px;border-top:1px dotted var(--line);}
/* カードの余白を詰めて全体を短く */
.pcard{padding:14px 16px 12px;}
.pc-h{margin-bottom:9px;}
.pcard.base .pr-y{font-size:16px;}
body.theme-location .pr-y{color:#5d7a55;}
body.theme-locastudio .pr-y{color:#6f6690;}
/* ===== かんたん見積りボタン：ヒーローに掛けず、少し小さく ===== */
.quote-cta{max-width:520px;margin:24px auto 0;padding:0 16px;position:relative;z-index:5;}
.quote-btn{padding:16px 20px 17px;border-radius:16px;}
.qb-en{font-size:9.5px;letter-spacing:.26em;}
.qb-t{font-size:19px;margin:5px 0 0;}
.qb-t::after{margin:9px auto 0;}
.qb-d{font-size:11.5px;margin-top:8px;}
/* 押せることが伝わるアイコン */
.qb-t{display:inline-flex;align-items:center;gap:10px;}
.qb-tap{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.6);
  animation:tapPulse 2.2s ease-in-out infinite;}
.qb-tap svg{width:16px;height:16px;flex:none;}
@keyframes tapPulse{0%,100%{transform:scale(1);opacity:.95;}50%{transform:scale(1.12);opacity:1;}}
@media(prefers-reduced-motion:reduce){ .qb-tap{animation:none;} }
@media(min-width:760px){ .qb-t{font-size:22px;} }

/* ===== 料金一覧：区分ごとの開閉 ===== */
.pt-acc{border:1px solid var(--line);border-radius:16px;background:#fff;
  margin:0 0 12px;overflow:hidden;box-shadow:0 2px 10px rgba(120,120,110,.07);}
.pt-acc > summary{list-style:none;cursor:pointer;padding:16px 46px 16px 18px;
  position:relative;background:var(--soft);
  transition:background .2s ease;}
.pt-acc > summary::-webkit-details-marker{display:none;}
.pt-acc > summary:hover{background:#f1efe9;}
/* 開閉のしるし（＋／−） */
.pt-mark{position:absolute;right:18px;top:50%;width:15px;height:15px;
  transform:translateY(-50%);flex:none;}
.pt-mark::before,.pt-mark::after{content:'';position:absolute;background:var(--gold-d);
  border-radius:1px;transition:transform .25s ease, opacity .25s ease;}
.pt-mark::before{left:0;top:7px;width:15px;height:1.6px;}
.pt-mark::after{left:6.7px;top:0;width:1.6px;height:15px;}
.pt-acc[open] .pt-mark::after{transform:rotate(90deg);opacity:0;}
.pt-acc-b{padding:14px 14px 16px;}
.pt-acc-b .pcards{gap:10px;}
.pt-acc-b .pcard{box-shadow:none;border-color:var(--line);}

/* 区分見出しの装飾は開閉版に合わせる */
.pt-acc > summary.pt-sub::before{content:'';width:18px;height:1px;background:var(--gold);flex:none;}

@media(min-width:760px){
  .pt-acc > summary{padding:18px 52px 18px 22px;}
  .pt-acc-b{padding:16px 18px 20px;}
}

/* プランごとの色 */
body.theme-location .pt-mark::before,body.theme-location .pt-mark::after{background:#5d7a55;}
body.theme-locastudio .pt-mark::before,body.theme-locastudio .pt-mark::after{background:#6f6690;}

/* 区分見出し：ラベルが折り返しても収まるように */
.pt-acc > summary.pt-sub{flex-wrap:nowrap;align-items:center;}
.pt-acc > summary.pt-sub{display:flex;gap:10px;}
.pt-acc > summary .pt-lbl{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pt-acc > summary span:not(.pt-mark){font-family:var(--sans);font-size:10.5px;letter-spacing:.04em;
  color:var(--gold-d);background:#fdfaf2;border:1px solid var(--gold);border-radius:14px;
  padding:3px 10px;white-space:nowrap;}
@media(max-width:420px){
  .pt-acc > summary.pt-sub{font-size:14.5px;letter-spacing:.06em;}
  .pt-acc > summary span:not(.pt-mark){font-size:9.5px;padding:2px 8px;}
}

/* 「かんたん見積り」の下線は、マークを入れたので不要 */
.qb-t::after{display:none;}
.qb-d{margin-top:10px;}

/* 料金の行：狭い画面では金額を折り返さず、名前側を縮める */
@media(max-width:400px){
          .pcard.base }

/* ===== 料金の行：商品名は左、金額は右で列を揃える ===== */
.pr-list{display:grid;grid-template-columns:1fr max-content max-content;
  column-gap:0;list-style:none;margin:0;padding:0;}
/* 罫線は行全体に1本だけ引く（列ごとに切れないように） */
.pr-row{position:relative;}
.pr-row{display:contents;}
.pr-n,.pr-y,.pr-t{padding:9px 0;align-self:stretch;display:flex;align-items:center;
  box-shadow:0 1px 0 var(--line);}
.pr-n{padding-right:10px;}
.pr-y{padding-right:8px;}
.pr-n{min-width:0;text-align:left;font-size:12.5px;line-height:1.7;color:var(--text);
  word-break:auto-phrase;}
.pr-y{justify-content:flex-end;font-family:var(--serif);font-size:14.5px;font-weight:700;
  color:var(--ink);white-space:nowrap;flex:none;}
.pr-t{justify-content:flex-end;font-size:10.5px;color:var(--sub);white-space:nowrap;}
/* 最終行は罫線なし */
.pr-row:last-child .pr-n,.pr-row:last-child .pr-y,.pr-row:last-child .pr-t{box-shadow:none;}
.pr-row.free .pr-y{color:var(--gold-d);}
.pr-txt{grid-column:1 / -1;padding:9px 0;font-size:12px;color:var(--sub);
  box-shadow:0 1px 0 var(--line);}
.pcard.base .pr-y{font-size:16px;}
body.theme-location .pr-y{color:#5d7a55;}
body.theme-locastudio .pr-y{color:#6f6690;}

/* ===== ご来店支度／出張支度を1枚のカードで見比べる（2列表示）===== */
.pr-list.pr-2col{grid-template-columns:1fr max-content max-content;column-gap:10px;}
.pr-2col .pr-v{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  padding:9px 0;align-self:stretch;box-shadow:0 1px 0 var(--line);min-width:64px;}
.pr-2col .pr-v .pr-y{padding:0;box-shadow:none;display:block;}
.pr-2col .pr-v .pr-t{padding:0;box-shadow:none;display:block;line-height:1.5;}
.pr-2col .pr-row:last-child .pr-v{box-shadow:none;}
/* 見出し行（どちらの支度かを示す） */
.pr-2col .pr-head .pr-v{font-size:10.5px;color:var(--sub);letter-spacing:.02em;
  justify-content:center;padding-bottom:5px;}
.pr-2col .pr-head .pr-n{box-shadow:0 1px 0 var(--line);}
@media(max-width:400px){
  .pr-list.pr-2col{column-gap:6px;}
  .pr-2col .pr-v{min-width:58px;}
  .pr-2col .pr-head .pr-v{font-size:9.5px;}
}

@media(max-width:400px){
  .pr-list{column-gap:7px;}
  .pr-n{font-size:11.5px;}
  .pr-y{font-size:13.5px;}
  .pr-t{font-size:9.5px;}
  .pcard.base .pr-y{font-size:15px;}
}

/* 料金カードはPCでも2列まで。3列にすると商品名が折り返すため */
/* 商品名は途中で折り返さない（収まらない場合のみ縮める） */
.pr-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:759px){
  .pr-n{white-space:normal;overflow:visible;text-overflow:clip;word-break:auto-phrase;}
}

/* タブレット幅は1列に。2列だと長い商品名が収まらないため */

/* ===== 料金カードは1列。横幅を広くとって1商品1行に収める ===== */
.pcards{grid-template-columns:1fr;}
/* 商品名は折り返さない（幅が足りるので1行に収まる） */
.pr-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pr-y,.pr-t{white-space:nowrap;flex:none;}
@media(min-width:760px){
}

/* スマホは幅が足りないため、名前は切らずに折り返す（価格は1行のまま） */
@media(max-width:599px){
  .pr-n{white-space:normal;overflow:visible;text-overflow:clip;word-break:auto-phrase;}
}

/* 狭い端末（〜380px）は税別を下段に回し、商品名の幅を確保する */
@media(max-width:430px){
  /* 2列表示（ご来店支度／出張支度）のカードは、この段組みの対象外にする */
  .pr-list:not(.pr-2col){grid-template-columns:1fr max-content;}
  .pr-list:not(.pr-2col) .pr-t{grid-column:2;justify-content:flex-end;padding-top:0;
    box-shadow:0 1px 0 var(--line);}
  .pr-list:not(.pr-2col) .pr-n{grid-row:span 2;}
  .pr-list:not(.pr-2col) .pr-y{padding-bottom:0;box-shadow:none;}
  .pr-n{font-size:12px;}
}

/* ===== 料金一覧の横幅 ===== */
.ptable{max-width:1120px;}
.ptable-wrap{padding-left:14px;padding-right:14px;}
@media(min-width:760px){
  .ptable-wrap{padding-left:22px;padding-right:22px;}
}
@media(min-width:1200px){
  .ptable{max-width:1240px;}
}

/* 料金一覧のセクションは、共通の1080px制限より広くとる */
.sec.ptable-wrap{max-width:1320px;}

/* ===== PCは2列カードに（項目と金額が離れすぎるのを防ぐ） ===== */
@media(min-width:1000px){
  .pcards{grid-template-columns:1fr 1fr;gap:14px;}
  .pcard.base{grid-column:1 / -1;}      /* 基本料金だけ横いっぱい */
}

/* ===== 料金カードの見出し：番号を丸バッジで分かりやすく ===== */
.pc-h.has-num{display:inline-flex;align-items:center;gap:9px;
  background:var(--soft);border-radius:22px;padding:5px 15px 5px 5px;}
.pc-num{flex:none;width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sky-dd);color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:700;line-height:1;
  letter-spacing:0;padding:0;}
.pc-ttl{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--sky-dd);line-height:1.5;}
.pc-ttl br{display:none;}
body.theme-location .pc-num{background:#6f8a67;}
body.theme-location .pc-ttl{color:#5d7a55;}
body.theme-locastudio .pc-num{background:#7d739b;}
body.theme-locastudio .pc-ttl{color:#6f6690;}
@media(min-width:760px){
  .pc-num{width:31px;height:31px;font-size:18px;}
  .pc-ttl{font-size:14px;}
}
/* 案内文の番号を目立たせる */
.pt-note b{display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:50%;background:var(--sky-dd);color:#fff;
  font-family:var(--sans);font-size:14px;font-weight:700;margin:0 3px;vertical-align:middle;}
body.theme-location .pt-note b{background:#6f8a67;}
body.theme-locastudio .pt-note b{background:#7d739b;}

/* ===== 料金表の下：電卓に見立てた見積り誘導 ===== */
/* ボタン */
.ci-go{display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#7EB6BF,#5f8489);color:#fff;border-radius:14px;
  padding:15px 18px;box-shadow:0 6px 18px rgba(90,120,125,.3);
  transition:transform .2s ease, box-shadow .2s ease;}
.ci-go:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(90,120,125,.36);}
.ci-go-t{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.08em;}
.ci-go-ic{display:inline-flex;width:26px;height:26px;border-radius:50%;flex:none;
  align-items:center;justify-content:center;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.6);animation:tapPulse 2.2s ease-in-out infinite;}
.ci-go-ic svg{width:15px;height:15px;}

body.theme-location body.theme-location body.theme-location body.theme-location .ci-go{background:linear-gradient(135deg,#9bb493,#6f8a67);}
body.theme-locastudio body.theme-locastudio body.theme-locastudio body.theme-locastudio .ci-go{background:linear-gradient(135deg,#b0a6c8,#7d739b);}

@media(min-width:760px){
    .ci-go-t{font-size:17px;}
}

/* ===== スクロール中も出る追従ボタン ===== */
.calc-float{position:fixed;left:50%;transform:translate(-50%,120%);bottom:16px;z-index:70;
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,#7EB6BF,#5f8489);color:#fff;
  border-radius:30px;padding:12px 22px;box-shadow:0 8px 24px rgba(60,90,95,.34);
  font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.06em;
  transition:transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s ease;opacity:0;
  white-space:nowrap;}
.calc-float.on{transform:translate(-50%,0);opacity:1;}
.calc-float svg{width:17px;height:17px;flex:none;}
body.theme-location .calc-float{background:linear-gradient(135deg,#9bb493,#6f8a67);}
body.theme-locastudio .calc-float{background:linear-gradient(135deg,#b0a6c8,#7d739b);}
@media(prefers-reduced-motion:reduce){ .calc-float{transition:none;} }
@media(max-width:380px){ .calc-float{font-size:13px;padding:11px 18px;} }

/* ===== 料金表の下：見積り画面を再現した誘導 ===== */
.calc-invite{padding-top:6px;padding-bottom:44px;}
.ci-box{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:22px 20px 24px;
  box-shadow:0 6px 22px rgba(120,120,110,.14);}
.ci-head{font-family:var(--serif);text-align:center;font-size:16px;font-weight:700;
  letter-spacing:.08em;color:var(--ink);margin:0 0 16px;line-height:1.6;}
.ci-en{display:block;font-family:var(--en);font-size:10px;letter-spacing:.34em;
  color:var(--sky-dd);font-weight:600;margin-bottom:6px;}

/* 実際の見積り画面を思わせる、選択欄の見本 */
.ci-demo{background:var(--soft);border:1px solid var(--line);border-radius:14px;
  padding:12px 13px;}
.ci-row{display:flex;align-items:center;gap:10px;padding:7px 0;}
.ci-q{flex:none;width:6.5em;font-size:11.5px;color:var(--sub);}
.ci-a{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:12.5px;color:var(--text);}
.ci-caret{width:0;height:0;flex:none;
  border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:5.5px solid var(--gold);}
/* 合計の行：バーが伸びて「計算される」ことを表す */
.ci-sum{display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:11px;
  border-top:1px dotted var(--line);font-size:11.5px;color:var(--sub);}
.ci-sum span{flex:none;width:6.5em;}
.ci-bar{flex:1;height:15px;border-radius:8px;background:#fff;
  border:1px solid var(--line);overflow:hidden;display:block;}
.ci-bar i{display:block;height:100%;width:0;border-radius:8px;
  background:linear-gradient(90deg,var(--sky-d),var(--sky-dd));}
.calc-invite.shown .ci-bar i{animation:ciFill 1.6s cubic-bezier(.2,.7,.3,1) .3s forwards;}
@keyframes ciFill{ to{ width:78%; } }
@media(prefers-reduced-motion:reduce){ .ci-bar i{width:78%;animation:none;} }

.ci-lead{text-align:center;font-size:12.5px;line-height:2;color:var(--ink-soft);
  margin:15px 0 16px;}
.ci-lead b{color:var(--gold-d);font-weight:700;}

.ci-go{display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#7EB6BF,#5f8489);color:#fff;border-radius:14px;
  padding:15px 18px;box-shadow:0 6px 18px rgba(90,120,125,.3);
  transition:transform .2s ease, box-shadow .2s ease;}
.ci-go:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(90,120,125,.36);}
.ci-go-t{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.08em;}
.ci-go-ic{display:inline-flex;width:26px;height:26px;border-radius:50%;flex:none;
  align-items:center;justify-content:center;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.6);animation:tapPulse 2.2s ease-in-out infinite;}
.ci-go-ic svg{width:15px;height:15px;}

body.theme-location .ci-en{color:#5d7a55;}
body.theme-location .ci-bar i{background:linear-gradient(90deg,#9bb493,#6f8a67);}
body.theme-location .ci-go{background:linear-gradient(135deg,#9bb493,#6f8a67);}
body.theme-locastudio .ci-en{color:#6f6690;}
body.theme-locastudio .ci-bar i{background:linear-gradient(90deg,#b0a6c8,#7d739b);}
body.theme-locastudio .ci-go{background:linear-gradient(135deg,#b0a6c8,#7d739b);}

@media(min-width:760px){
  .ci-box{padding:26px 26px 28px;}
  .ci-head{font-size:18px;}
  .ci-q,.ci-sum span{width:8em;font-size:12.5px;}
  .ci-a{font-size:13.5px;}
  .ci-go-t{font-size:17px;}
}
@media(max-width:380px){ .ci-br{display:none;} }

/* ===== 商品：お得のご案内を目立たせる ===== */
.ip-deal-box{display:flex;align-items:flex-start;gap:10px;
  background:linear-gradient(135deg,#fdf8ec,#f9f1de);
  border:1.5px solid var(--gold);border-radius:14px;
  padding:13px 15px;margin:4px 0 14px;
  box-shadow:0 3px 12px rgba(160,140,90,.16);}
.ip-deal-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:24px;border-radius:12px;background:var(--gold);color:#fff;
  font-family:var(--serif);font-size:12px;font-weight:700;letter-spacing:.06em;}
.ip-deal{margin:0;font-size:12.5px;line-height:1.85;color:var(--ink);}
.ip-deal b{color:var(--gold-d);font-weight:700;font-size:13.5px;}
.ip-deal.on{color:var(--gold-d);font-weight:700;}
.deal-tag{display:inline-block;background:var(--gold);color:#fff;border-radius:10px;
  font-size:10px;padding:1px 8px;margin-right:6px;font-weight:400;}

/* 商品代の内訳 */
.ip-break{list-style:none;margin:12px 0 0;padding:11px 0 0;
  border-top:1px dotted var(--line);}
.ip-break li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12px;color:var(--text);padding:5px 0;line-height:1.6;}
.ip-break li b{flex:none;font-family:var(--serif);font-size:13px;color:var(--gold-d);
  white-space:nowrap;}
.ip-break .ip-empty{color:var(--sub);justify-content:center;font-size:11.5px;}

/* ===== 商品を写真で選ぶ ===== */
.pi-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px;}
.pi-card{position:relative;display:block;background:#fff;border:1.5px solid var(--line);
  border-radius:14px;overflow:hidden;cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.pi-card:hover{box-shadow:0 5px 16px rgba(120,120,110,.16);transform:translateY(-2px);}
.pi-card input{position:absolute;opacity:0;pointer-events:none;}
.pi-ph{display:block;width:100%;padding-top:100%;position:relative;background:#fcfbf9;}
.pi-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:center;display:block;}
.pi-ph.pi-none{padding-top:0;height:58px;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--sub);letter-spacing:.06em;}
.pi-body{display:block;padding:9px 10px 11px;}
.pi-nm{display:block;font-size:11.5px;line-height:1.55;color:var(--text);
  word-break:auto-phrase;min-height:2.2em;}
.pi-p{display:block;font-family:var(--serif);font-size:15px;font-weight:700;
  color:var(--gold-d);margin-top:5px;text-align:right;}
/* 選ばれた状態 */
.pi-check{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.9);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:all .2s ease;}
.pi-check::after{content:'';width:9px;height:5px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .2s ease;
  margin-top:-2px;}
.pi-card:has(input:checked){border-color:var(--gold);box-shadow:0 4px 14px rgba(160,140,90,.22);}
.pi-card:has(input:checked) .pi-check{background:var(--gold);border-color:var(--gold);}
.pi-card:has(input:checked) .pi-check::after{transform:rotate(-45deg) scale(1);}
.pi-card:has(input:checked) .pi-nm{color:var(--ink);font-weight:500;}

@media(min-width:560px){
  .pi-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .pi-nm{font-size:12.5px;}
}
@media(min-width:900px){
  .pi-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
}

/* 商品を選ぶ枠は、写真が見やすいよう横幅を広げる */
.itempick{max-width:none;}

/* ===== かんたん見積り：PCは横に広げて縦スクロールを抑える ===== */

/* 一覧は初めから開いておく（探しやすく、開く手間をなくす） */

/* 商品カードの価格：税別の注記を小さく添える */
.pi-p small{display:inline;font-size:9.5px;font-weight:400;color:var(--sub);
  font-family:var(--sans);margin-left:2px;letter-spacing:0;}
.ip-deal small{font-size:10px;font-weight:400;color:var(--sub);margin-left:2px;}
/* 帯を含む写真をそのまま見せる */
.pi-ph{background:#fff;}
.pi-ph img{object-fit:contain;}

/* ===== 商品カード：スマホ1列・PC3列で大きく ===== */
.pi-grid{grid-template-columns:1fr;}
@media(min-width:560px){ .pi-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:900px){ .pi-grid{grid-template-columns:repeat(3,1fr);} }
/* 1列のときは写真を大きく、名前と価格を左右に置く */
@media(max-width:559px){
  .pi-card{display:grid;grid-template-columns:132px 1fr;align-items:center;}
  .pi-ph{padding-top:0;height:132px;}
  .pi-body{padding:10px 12px;}
  .pi-nm{min-height:0;font-size:12.5px;}
  .pi-p{font-size:16px;}
  .pi-ph.pi-none{height:132px;font-size:12.5px;}
  /* 「選ばない」は名前を出さず、写真枠だけで示す */
  .pi-card:has(.pi-none) .pi-nm{display:none;}
  .pi-card:has(.pi-none){grid-template-columns:132px 1fr;}
}
.pi-p small{white-space:nowrap;}

/* ================================================================
   かんたん見積り：すべての枠を同じ幅に揃える
   幅を1本に統一し、中身を2列にすることで縦の長さも抑えます。
   ================================================================ */
.calc-wrap{max-width:1040px;}
/* 直下の要素はすべて同じ幅・同じ角丸で並べる */
.calc-wrap > *{margin-left:auto;margin-right:auto;}
.calc-balloon{max-width:none;}

@media(min-width:900px){
  /* ① 撮影する人のカードを2列に */
  #people{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
  .person{margin:0;}

  /* ② 基本料金の選択肢を横に並べる */
  .basefee{padding:18px 22px;}
  .bf-opts{flex-direction:row;flex-wrap:wrap;}
  .bf-opts .bf-opt{flex:1 1 200px;}

  /* ③ 総額と内訳を1本の帯にまとめる */
  .calc-total{display:flex;align-items:center;justify-content:space-between;
    padding:20px 28px;border-radius:18px 18px 0 0;margin-bottom:0;}
  .calc-breakdown{margin-top:0;border-radius:0 0 18px 18px;overflow:hidden;
    background:#fff;border:1px solid var(--line);border-top:none;gap:0;}
  .calc-breakdown div{border:none;border-radius:0;border-right:1px solid var(--line);
    background:#fff;padding:14px 12px;}
  .calc-breakdown div:last-child{border-right:none;}

  /* ④ 注意書きは横に広く、文字は中央に */
  .calc-caution{padding:22px 32px;}

  /* ⑤ 商品を選ぶ枠も同じ幅 */
  .itempick{max-width:none;}
  .pi-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
}

/* 枠線と角丸を揃えて、階段状に見えないようにする */
.basefee,.itempick,.calc-caution,.person,.addbtn-wrap{border-radius:18px;}

/* 商品カードの補足（現在は未使用。item-data.js に note:"…" を足すと表示されます） */
.pi-note{display:block;font-size:10.5px;line-height:1.6;color:var(--gold-d);
  background:#fdf9f0;border:1px solid rgba(185,171,122,.5);border-radius:6px;
  padding:3px 8px;margin-top:5px;}
@media(max-width:559px){ .pi-note{display:inline-block;} }

/* 商品名：カッコ内が途中で割れないようにする */
.pi-nm{line-break:strict;word-break:auto-phrase;text-wrap:pretty;}

/* データプラン欄の注意書き（主役が複数のときだけ出す） */
.ip-note{margin:7px 2px 0;font-size:11px;line-height:1.6;color:var(--gold-d);
  background:#fffdf7;border:1px solid var(--gold);border-radius:8px;padding:7px 10px;}

/* ---- ニューボーンのお衣装タイプ（おくるみ／衣装／はだかんぼ）---- */
.nb-block{margin:9px -4px;padding:10px;border-radius:9px;background:#fff;
  border:1px dashed var(--line);}
.nb-block.on{border-style:solid;border-color:var(--gold);background:#fffdf7;}
.nb-t{margin:0 0 7px;font-size:12px;color:var(--text);font-weight:600;
  display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;}
.nb-t small{flex-basis:100%;font-size:10.5px;color:var(--sub);font-weight:400;margin-top:2px;}
.nb-opts{display:flex;flex-wrap:wrap;gap:7px;}
.nb-opt{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text);
  background:var(--soft);border:1px solid var(--line);border-radius:18px;
  padding:7px 12px;cursor:pointer;}
.nb-opt input{accent-color:var(--sky-d);width:15px;height:15px;}
.nb-opt:has(input:checked){background:#fff;border-color:var(--sky-d);font-weight:600;}
.nb-p{display:block;text-align:right;margin-top:7px;font-size:12.5px;
  color:var(--gold-d);font-weight:700;}