/* 収納ぴったり計算の見た目（2026-11-05。ユーザー：格式高い感じに）。
   計算ページ（pittari.html）とお店×場所のページ（pittari/*.html）だけ。<body class="pt-lux"> のときに効く（tools/keisan_pages.mjs が付ける）。
   動き・文は変えず、上に重ねるだけ。考え方：細い線・角は小さく・色は深い緑と銅色の差し色・余白は広め */
body.pt-lux {
  --main: #1D5F56; --main-dark: #164A43; --main-soft: #EEF4F1; --main-line: #D5E3DE;
  --line: #E7E1D6; --bg: #F6F3ED; --surface: #FFFFFF; --text: #1F2326; --muted: #6E6A63;
  --cu: #A2683A; --cu-soft: #F7EEE5; --ink: #1F2326;
  --serif: inherit; /* 2026-11-05 ユーザー：フォントはいまのまま（明朝はやめた） */
  background: var(--bg); color: var(--text); letter-spacing: .02em; font-feature-settings: "palt";
}
/* 上のバー */
.pt-lux .topbar { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.pt-lux .topbar .home { font-family: var(--serif); font-weight: 700; letter-spacing: .06em; }
.pt-lux .crumb { font-size: 12px; letter-spacing: .06em; margin: 10px 0 18px; }
.pt-lux .crumb a { text-decoration: none; }
/* 本文の紙 */
.pt-lux .wrap { max-width: 760px; }
.pt-lux .doc { border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 24px 60px -32px rgba(31,35,38,.18); padding: 44px 22px 36px; }
@media (min-width: 600px) { .pt-lux .doc { padding: 64px 56px 48px; } }
/* いちばん上 */
.pt-lux .kicker { background: none; border-radius: 0; padding: 0; color: var(--cu); font-size: 11.5px; font-weight: 700; letter-spacing: .32em; display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.pt-lux .kicker::before { content: 'STORAGE FIT'; font-family: var(--serif); letter-spacing: .28em; color: var(--ink); }
.pt-lux .kicker::after { content: ''; flex: 0 0 36px; height: 1px; background: var(--cu); order: -1; }
.pt-lux h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 6.8vw, 36px); line-height: 1.45; letter-spacing: .02em; margin: 0 0 24px; }
.pt-lux .date { font-size: 11.5px; letter-spacing: .12em; margin: 0 0 26px; }
.pt-lux .lead { font-weight: 500; font-size: 15.5px; line-height: 2; color: #3A3D40; padding: 18px 0 0; border-top: 1px solid var(--line); }
.pt-lux .pt-cred { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.pt-lux .pt-cred li { padding: 0 14px; border-left: 1px solid var(--line); line-height: 1.3; }
.pt-lux .pt-cred li:first-child { padding-left: 0; border-left: 0; }
.pt-lux .pt-cred b { font-family: var(--serif); font-size: 15px; color: var(--ink); margin-right: 2px; }
/* 計算の箱 */
.pt-lux .ks-tool { margin: 34px 0 30px; padding: 26px 20px 8px; background: #FCFBF8; border: 1px solid var(--line); border-radius: 4px; position: relative; }
@media (min-width: 600px) { .pt-lux .ks-tool { padding: 34px 32px 12px; } }
.pt-lux .ks-tool::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, var(--main), var(--main) 60%, var(--cu) 60%, var(--cu)); }
.pt-lux .ks-tool input, .pt-lux .ks-tool select { border: 1px solid #D9D2C5; border-radius: 3px; background: #fff; }
.pt-lux .ks-tool input:focus, .pt-lux .ks-tool select:focus { outline: none; border-color: var(--main); box-shadow: 0 0 0 3px rgba(29,95,86,.12); }
/* 手順の見出し：01・02 */
.pt-lux .pt-step { padding: 4px 0 22px; }
.pt-lux .pt-step + .pt-step { border-top: 1px solid var(--line); padding-top: 24px; }
.pt-lux .pt-sh { gap: 12px; margin: 0 0 16px; }
.pt-lux .pt-num { display: inline-flex; white-space: nowrap; flex: none; width: auto; height: auto; background: none; border-radius: 0; color: var(--cu); font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: .02em; padding-right: 12px; border-right: 1px solid var(--line); line-height: 1; }
.pt-lux .pt-num::before { content: '0'; }
.pt-lux .pt-sh b { font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.pt-lux .pt-sh small { padding-left: 0; margin-top: 0; letter-spacing: .03em; }
/* 場所のタブ */
.pt-lux .pt-place { gap: 0 2px; border-bottom: 1px solid var(--line); padding-bottom: 0; margin-bottom: 14px; }
.pt-lux .pt-place button { border-radius: 0; padding: 8px 10px 10px; font-weight: 500; letter-spacing: .04em; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pt-lux .pt-place button.on { background: none; color: var(--ink); font-weight: 700; border-bottom-color: var(--main); }
/* よくある大きさ・選ぶもの */
.pt-lux .pt-ps button { border-radius: 3px; border: 1px solid var(--line); color: var(--ink); font-weight: 500; letter-spacing: .03em; padding: 8px 13px; }
.pt-lux .pt-ps button:hover { border-color: var(--main); }
.pt-lux .pt-ps button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pt-lux .pt-kinds label { border-radius: 3px; border-color: #DDD6CA; color: #4A4D50; padding: 6px 12px; letter-spacing: .03em; }
.pt-lux .pt-kinds label:has(input:checked) { border-color: var(--main); color: var(--main); background: var(--main-soft); }
.pt-lux .pt-stuff label:has(input:checked) { border-color: var(--cu); color: var(--cu); background: var(--cu-soft); }
.pt-lux .pt-seg, .pt-lux .pt-unit, .pt-lux .pt-view { border-color: #D9D2C5; border-radius: 3px; }
.pt-lux .pt-seg button.on, .pt-lux .pt-unit button.on { background: var(--main); }
.pt-lux .pt-view button.on { background: var(--ink); }
/* 寸法：数字を明朝で大きく */
.pt-lux .pt-dims { gap: 10px; }
.pt-lux .pt-u input { font-family: var(--serif); font-size: 22px !important; font-weight: 700; padding-top: 10px; padding-bottom: 10px; letter-spacing: .02em; }
.pt-lux .pt-u i { font-size: 12px; letter-spacing: .08em; }
.pt-lux .ks-lbl, .pt-lux .pt-kl { letter-spacing: .06em; font-weight: 700; font-size: 12.5px; color: #4A4D50; }
/* 細かい条件・持っているケース */
.pt-lux .pt-opt { border-top-color: var(--line); padding-top: 14px; }
.pt-lux .pt-opt summary, .pt-lux .pt-own summary, .pt-lux .pt-entry summary { letter-spacing: .04em; }
.pt-lux .pt-row { border-radius: 4px; border-color: var(--line); }
.pt-lux .pt-note { border-radius: 3px; background: var(--cu-soft); color: #6E4A2A; }
/* 結果のまとめ */
.pt-lux .pt-sum { margin: 34px 0 18px; padding: 22px 0 0; border-top: 1px solid var(--ink); }
.pt-lux .pt-sum-k { color: var(--cu) !important; letter-spacing: .24em !important; font-size: 11.5px !important; }
.pt-lux .pt-sum p:not(.pt-sum-k):not(.pt-sum-s):not(.pt-sum-tot), .pt-lux .pt-sum-main { font-family: var(--serif); font-size: 17px; line-height: 1.8; letter-spacing: .03em; }
.pt-lux .pt-sum-ul { font-family: inherit; } .pt-lux .pt-sum-ul li { border-color: rgba(0,0,0,.12); } .pt-lux .pt-sum-item b { font-family: var(--serif); font-size: 16px; } .pt-lux .pt-sum-item small, .pt-lux .pt-sum-what { font-family: var(--sans, inherit); letter-spacing: .02em; } .pt-lux .pt-sum-n { color: var(--cu, var(--main)); } .pt-lux .pt-sum-tot { font-family: var(--serif); font-size: 15px !important; }
.pt-lux .pt-h, .pt-lux .pt-h1 { font-family: var(--serif); font-weight: 700; letter-spacing: .05em; font-size: 18px; }
/* 結果のカード */
.pt-lux .pt-card { border-radius: 4px; border-color: var(--line); padding: 18px; }
.pt-lux .pt-card.best { border: 1px solid var(--ink); box-shadow: none; outline: 1px solid var(--line); outline-offset: 5px; padding: 24px 22px; margin: 8px 6px 22px; }
.pt-lux .pt-tag { background: none; color: var(--cu); border: 1px solid var(--cu); border-radius: 2px; letter-spacing: .2em; font-size: 10.5px; padding: 3px 10px; }
.pt-lux .pt-tag.sub { color: var(--main); border-color: var(--main); }
.pt-lux .pt-brand { letter-spacing: .14em; font-weight: 500; font-size: 11.5px; }
.pt-lux .pt-name { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: .03em; }
.pt-lux .pt-n em { font-family: var(--serif); font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.pt-lux .best .pt-n em { font-size: 52px; }
.pt-lux .pt-meter { height: 3px; border-radius: 0; background: #ECE7DE; }
.pt-lux .pt-meter i { border-radius: 0; background: linear-gradient(90deg, var(--main), #2E7F73); }
.pt-lux .pt-meta { letter-spacing: .03em; }
.pt-lux .pt-near { border-radius: 3px; background: var(--cu-soft); color: #7A4E28; }
.pt-lux .pt-see { border-radius: 2px; }
/* ボタン */
.pt-lux .pt-acts button, .pt-lux .pt-share button, .pt-lux .pt-share a, .pt-lux .pt-memo button, .pt-lux .pt-memo a { border-radius: 3px; border-color: #D9D2C5; color: var(--ink); font-weight: 500; letter-spacing: .04em; padding: 8px 14px; }
.pt-lux .pt-acts button:hover, .pt-lux .pt-share button:hover, .pt-lux .pt-share a:hover { border-color: var(--main); color: var(--main); }
.pt-lux .pt-acts button.pt-totk { background: var(--main); border-color: var(--main); color: #fff; }
.pt-lux .ks-add { border-radius: 3px; }
.pt-lux .pt-tk { border: 1px solid var(--line); border-radius: 4px; background: #FCFBF8; }
/* 表・よくある質問・関連 */
.pt-lux .ks-tbl th { background: #F3EFE8; letter-spacing: .04em; }
.pt-lux .ks-tbl tr.best td { background: var(--main-soft); }
.pt-lux .doc h2 { font-family: var(--serif); font-weight: 700; letter-spacing: .05em; }
.pt-lux .ks-faq details { border-bottom-color: var(--line); padding: 14px 0; }
.pt-lux .ks-faq summary { font-weight: 600; letter-spacing: .03em; }
.pt-lux .related ul a, .pt-lux .ks-list a { border-radius: 4px; }
.pt-lux .cta { border-radius: 4px; }
/* お店×場所のページ */
.pt-lux .pt-lp-tbl td, .pt-lux .pt-lp-tbl th { letter-spacing: .03em; }
.pt-lux .site-footer { letter-spacing: .04em; }

/* カーテンのサイズ計算（2026-11-05。body.cf-lux。同じ見た目に合わせる） */
.cf-lux .kicker::before { content: 'CURTAIN FIT'; }
.cf-lux .cf-m-fig { border-radius: 4px; border-color: var(--line); }
.cf-lux .cf-lt { font-size: 13px; letter-spacing: .04em; }
.cf-lux .cf-lt b { width: auto; height: auto; background: none; border-radius: 0; color: var(--cu); font-size: 15px; font-weight: 700; }
.cf-lux .cf-n1 { color: var(--main) !important; }
.cf-lux .cf-ps .pt-ps button { border-radius: 3px; }
.cf-lux .cf-ps .pt-ps button small { color: var(--muted); }
.cf-lux .cf-cnt { border-radius: 3px; border-color: #D9D2C5; }
.cf-lux .cf-cnt button { border-radius: 2px; background: var(--main-soft); }
.cf-lux .cf-cnt b { font-size: 19px; }
.cf-lux .cf-feat button { border-radius: 3px; border-color: #DDD6CA; color: #4A4D50; letter-spacing: .03em; }
.cf-lux .cf-feat button.on { border-color: var(--main); background: var(--main-soft); }
.cf-lux .cf-feat button.on::before { content: ''; }
.cf-lux .cf-sum { background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 22px 0 0; margin: 34px 0 18px; }
.cf-lux .cf-sum > .cf-k { color: var(--cu); letter-spacing: .24em; font-size: 11.5px; font-weight: 700; }
.cf-lux .cf-big { font-weight: 800; font-size: 22px; letter-spacing: .02em; margin: 6px 0 2px; }
.cf-lux .cf-big2 { color: var(--main); }
.cf-lux .cf-hook { font-size: 13px; line-height: 1.8; color: #3A3D40; margin: 8px 0 0; padding: 10px 12px; background: #FCFBF8; border: 1px solid var(--line); border-radius: 3px; }
.cf-lux .cf-hook b { color: var(--cu); font-size: 11.5px; letter-spacing: .2em; margin-right: 10px; }
.cf-lux .cf-pair { background: #fff; border: 1px solid var(--ink); border-radius: 0; outline: 1px solid var(--line); outline-offset: 5px; padding: 20px 20px 16px; margin: 20px 6px 8px; }
.cf-lux .cf-pair > .cf-k { color: var(--cu); letter-spacing: .2em; font-size: 11.5px; font-weight: 700; }
.cf-lux .cf-pair ul { font-size: 14px; line-height: 1.8; }
.cf-lux .cf-tot b { font-weight: 800; }
.cf-lux .cf-acts button { border-radius: 3px; border-color: #D9D2C5; color: var(--ink); font-weight: 500; letter-spacing: .04em; padding: 8px 14px; }
.cf-lux .cf-acts button:hover { border-color: var(--main); color: var(--main); }
.cf-lux .cf-acts button.pri { background: var(--main); border-color: var(--main); color: #fff; }
.cf-lux .cf-sec h3 { font-weight: 700; letter-spacing: .05em; font-size: 18px; padding-top: 18px; border-top: 1px solid var(--line); margin-top: 26px; }
.cf-lux .cf-card.pt-card.best { border: 1px solid var(--ink); box-shadow: none; outline: 1px solid var(--line); outline-offset: 5px; padding: 24px 22px; margin: 8px 6px 22px; }
.cf-lux .cf-brand { letter-spacing: .14em; font-weight: 500; font-size: 11.5px; }
.cf-lux .cf-name { font-weight: 700; font-size: 16px; letter-spacing: .03em; }
.cf-lux .cf-size b { font-weight: 800; font-size: 22px; }
.cf-lux .cf-b { border-radius: 2px; background: none !important; border: 1px solid currentColor; letter-spacing: .1em; font-size: 10.5px; }
.cf-lux .cf-b.g { color: var(--main); } .cf-lux .cf-b.m { color: var(--cu); }
.cf-lux .cf-tags span { border-radius: 2px; }
.cf-lux .cf-order { border-radius: 3px; }
.cf-lux .cf-more summary { letter-spacing: .04em; }
/* 窓の一覧 */
.cf-add { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.cf-add .cf-k { font-size: 12.5px; font-weight: 700; color: #4A4D50; margin-bottom: 6px; }
.cf-addrow { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-addrow input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #D9D2C5; border-radius: 3px; }
.cf-addrow button { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border: 1px solid var(--cu); color: var(--cu); background: #fff; border-radius: 3px; cursor: pointer; }
.cf-list { margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ink); }
.cf-list[hidden] { display: none; }
.cf-lk { margin: 0; color: var(--cu); letter-spacing: .24em; font-size: 11.5px; font-weight: 700; }
.cf-list h3 { font-size: 18px; letter-spacing: .05em; margin: 6px 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .cf-list h3 small { font-size: 12px; font-weight: 500; color: var(--muted); }
.cf-list ol { margin: 0; padding: 0; list-style: none; counter-reset: cfl; }
.cf-list li { counter-increment: cfl; display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cf-list li::before { content: counter(cfl, decimal-leading-zero); color: var(--cu); font-weight: 700; font-size: 15px; min-width: 1.8em; }
.cf-list li > div { flex: 1; min-width: 0; font-size: 13px; line-height: 1.7; }
.cf-list li b { font-size: 15px; margin-right: 8px; } .cf-list li small { color: var(--muted); font-size: 12px; } .cf-list li span { display: block; color: #3A3D40; }
.cf-list li p { margin: 0; display: flex; gap: 4px; flex: none; }
.cf-list li p button { font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid #D9D2C5; background: #fff; border-radius: 3px; cursor: pointer; color: var(--ink); }
.cf-list .cf-tot { margin: 12px 0 0; font-size: 15px; } .cf-list .cf-tot b { font-size: 19px; }
.cf-list .cf-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }

/* ほかの計算ツール（2026-11-05。body.ks-lux。見出しの上の英字は data-en） */
.ks-lux .kicker::before { content: attr(data-en); }
.ks-lux .ks-big li { border-radius: 3px; border-color: var(--line); padding: 12px 14px; }
.ks-lux .ks-big li { font-size: 11.5px; letter-spacing: .1em; color: var(--muted); }
.ks-lux .ks-big b { font-weight: 800; font-size: 24px; letter-spacing: .01em; color: var(--ink); }
.ks-lux .ks-hl { border-radius: 0; border-left-color: var(--cu); background: #fff; }
.ks-lux .ks-room, .ks-lux .ks-x { border-radius: 3px; }
.ks-lux .ks-list a { border-radius: 3px; border-color: var(--line); }
.ks-lux .ks-list a:hover { border-color: var(--main); }