/* CLAT-JAPAN キャップカテゴリTOP リニューアル 既定はスマホ（添付モック）。768px以上でPC向けに列数・文字サイズを調整 */ /* ===================================================================== CLAT-JAPAN キャップカテゴリ（/products/category/012）スマホ版 想定幅：360〜430px（モバイル専用・メディアクエリなし） 色：ティール #24bbb7 / CTAオレンジ #f80 / 価格レッド #E64552（common.css 準拠） ===================================================================== */ #capx-site,:is(#capx,#capx2,#capx3,#capx4){ --teal:#24bbb7;--teal-d:#1a9894;--teal-l:#e9f8f7;--teal-ll:#f4fbfb; --orange:#f80;--orange-d:#d96f00;--price:#E64552; --ink:#333;--sub:#666;--line:#e5e5e5;--bg:#f5f5f5; --c1:#E64552;--c2:#24bbb7;--c3:#24bbb7;--c4:#f80;--c5:#24bbb7;--gold:#24bbb7;--red:#f80;--navy:#1a9894; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; color:var(--ink);max-width:600px;margin:0 auto; } #capx-site *,:is(#capx,#capx2,#capx3,#capx4) *,:is(#capx,#capx2,#capx3,#capx4) *::before,:is(#capx,#capx2,#capx3,#capx4) *::after{box-sizing:border-box} #capx-site a,:is(#capx,#capx2,#capx3,#capx4) a{color:inherit} :is(#capx,#capx2,#capx3,#capx4) img{max-width:100%;height:auto;display:block} :is(#capx,#capx2,#capx3,#capx4) h1,:is(#capx,#capx2,#capx3,#capx4) h2,:is(#capx,#capx2,#capx3,#capx4) h3,:is(#capx,#capx2,#capx3,#capx4) p{margin:0} :is(#capx,#capx2,#capx3,#capx4) h2,:is(#capx,#capx2,#capx3,#capx4) h3{border:none;background:none;line-height:1.45;font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-consult .ans ul{list-style:disc} :is(#capx,#capx2,#capx3,#capx4){font-size:14.5px;line-height:1.75;padding-bottom:78px} /* ---------- ヘッダー（SP） ---------- */ #capx-site header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 #eee} #capx-site .hd-top{display:flex;align-items:center;gap:12px;padding:10px 14px} #capx-site .hd-menu{width:26px;height:19px;display:flex;flex-direction:column;justify-content:space-between;background:none;border:0;padding:0;flex:none} #capx-site .hd-menu span{height:2.5px;background:#222;border-radius:2px} #capx-site .hd-logo{flex:1;min-width:0} #capx-site .hd-logo img{height:26px;width:auto;max-width:150px;display:block} #capx-site .hd-icons{display:flex;gap:12px} #capx-site .hd-icons a{display:flex;flex-direction:column;align-items:center;font-size:9.5px;font-weight:500;gap:2px;text-decoration:none;white-space:nowrap} #capx-site .hd-icons svg{width:24px;height:24px} #capx-site .hd-icons .tel svg{color:var(--teal)} #capx-site .hd-search{display:flex;align-items:center;gap:8px;margin:0 14px 10px;border:1.5px solid #222;border-radius:8px;padding:0 12px;height:42px} #capx-site .hd-search svg{width:20px;height:20px;flex:none} #capx-site .hd-search input{border:0;outline:0;font-size:16px;width:100%;font-family:inherit;background:transparent} #capx-site .crumb{background:var(--bg);padding:9px 14px} #capx-site .crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:12px;font-weight:500} #capx-site .crumb li+li::before{content:"｜";margin:0 2px} #capx-site .crumb a{color:var(--teal);text-decoration:none} #capx-site .capx-titlebar{background:var(--teal);color:#fff;display:flex;align-items:center;gap:14px;padding:14px 16px} #capx-site .capx-titlebar svg{width:30px;height:30px;flex:none} #capx-site .capx-titlebar h1{margin:0;font-size:19px;font-weight:700;letter-spacing:.04em;line-height:1.35} /* ---------- 共通 ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-wrap{padding:0 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-sec{padding:40px 0} :is(#capx,#capx2,#capx3,#capx4) .capx-sec.alt{background:var(--bg)} :is(#capx,#capx2,#capx3,#capx4) .capx-head{text-align:center;margin-bottom:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-en{display:block;font-family:Roboto,sans-serif;color:var(--teal);font-weight:700;font-size:11.5px;letter-spacing:.18em;margin-bottom:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-h2{font-size:21px;font-weight:700;line-height:1.5;letter-spacing:.03em;color:#222} :is(#capx,#capx2,#capx3,#capx4) .capx-h2::after{content:"";display:block;width:32px;height:3px;background:var(--teal);border-radius:2px;margin:10px auto 0} :is(#capx,#capx2,#capx3,#capx4) .capx-lead{color:var(--sub);margin:4px 0 22px;font-size:13.5px;text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-note{font-size:11.5px;color:var(--sub);margin-top:8px;line-height:1.6} :is(#capx,#capx2,#capx3,#capx4) .capx-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:13px 16px;border-radius:6px;font-weight:700;text-decoration:none;font-size:16px;line-height:1.3;text-align:center;width:100%} :is(#capx,#capx2,#capx3,#capx4) .capx-btn small{font-size:11px;font-weight:500;opacity:.92} :is(#capx,#capx2,#capx3,#capx4) .capx-btn-red{background:var(--orange);color:#fff;box-shadow:0 3px 0 var(--orange-d)} :is(#capx,#capx2,#capx3,#capx4) .capx-btn-navy{background:var(--teal);color:#fff;box-shadow:0 3px 0 var(--teal-d)} :is(#capx,#capx2,#capx3,#capx4) .capx-existing{border:2px dashed #b9bfcc;border-radius:8px;padding:16px;text-align:center;color:#7a8191;background:#fafafa;font-size:12.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-existing b{display:block;color:#4a5160;font-size:13px} /* 横スワイプ共通 */ :is(#capx,#capx2,#capx3,#capx4) .capx-swipe{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none} :is(#capx,#capx2,#capx3,#capx4) .capx-swipe::-webkit-scrollbar{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-swipe>*{scroll-snap-align:start} :is(#capx,#capx2,#capx3,#capx4) .capx-swipe-hint{text-align:right;font-size:11.5px;color:var(--teal-d);font-weight:700;margin:-4px 0 6px} /* ---------- ① FV（タオルSPと同じ構成：写真の上に文字を重ねる） ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-fv-main{position:relative;overflow:hidden;min-height:330px} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-img{position:absolute;inset:0;width:100%;height:100%;background:#f3f6f6} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-img picture{display:block;width:100%;height:100%} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-img img{width:100%;height:100%;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-text{position:relative;z-index:1;padding:20px 16px 22px 24px;container-type:inline-size} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-catch{font-size:clamp(20px,6.2vw,26px);font-weight:900;line-height:1.45;letter-spacing:.03em;color:#333;-webkit-text-stroke:5px #fff;paint-order:stroke fill} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-catch-line{display:inline-block;white-space:nowrap;font-size:min(1em,calc(100cqi / 13.8))} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-catch mark{background:linear-gradient(transparent 50%,#fff100 50%);color:#333;padding-right:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-points{list-style:none;margin:32px 0 0;padding:0} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-points li{display:table;border-left:5px solid var(--teal);padding:0 6px 0 12px;color:var(--teal-d);font-weight:700;font-size:16px;line-height:1.35;margin-bottom:8px;background:rgba(255,255,255,.75)} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-sub{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;background:rgba(255,255,255,.75)} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);background:var(--teal-l)} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-bar li{grid-column:span 2;text-align:center;color:var(--teal-d);font-weight:700;font-size:12px;padding:15px 2px;position:relative;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-bar li:nth-child(n+4){grid-column:span 3;border-top:1px solid #d3eeec} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-bar li::before{content:"✓ "} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-bar li:not(:first-child):not(:nth-child(4))::after{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:#c9e9e7} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-intro{padding:18px 16px 0;font-size:14.5px;color:#555;line-height:1.75} :is(#capx,#capx2,#capx3,#capx4) .capx-delivery{padding-top:16px} /* ---------- ② ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-prob ul{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:0;margin:0} :is(#capx,#capx2,#capx3,#capx4) .capx-prob li{list-style:none;background:#fff;border:2px solid var(--teal-l);border-radius:10px;padding:12px 8px;text-align:center;font-size:12.5px;font-weight:700;line-height:1.5} :is(#capx,#capx2,#capx3,#capx4) .capx-prob li:last-child{grid-column:1/-1} :is(#capx,#capx2,#capx3,#capx4) .capx-prob li br{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-prob svg{width:30px;height:30px;margin:0 auto 6px;display:block;color:var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-prob-why{margin-top:16px;background:var(--teal-ll);border-left:4px solid var(--teal);border-radius:8px;padding:14px;font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-prob-why b{color:var(--teal-d)} /* ---------- ③ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-ans{display:grid;gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-ans-card{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center;background:#fff;border:2px solid var(--teal-l);border-radius:10px;padding:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-ans-card .ico{grid-row:1/3;width:48px;height:48px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-ans-card .ico svg{width:24px;height:24px} :is(#capx,#capx2,#capx3,#capx4) .capx-ans-card h3{font-size:12px;color:var(--teal-d);font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-ans-card .big{font-size:18px;font-weight:900;color:var(--price);line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-ans-card .big br{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-ans-card p{grid-column:1/-1;font-size:12.5px;color:var(--sub);margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-manifesto{margin-top:22px;text-align:center;font-size:16px;font-weight:700;line-height:1.8;color:#222} :is(#capx,#capx2,#capx3,#capx4) .capx-manifesto s{text-decoration:none;color:var(--sub);font-size:13px;display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-manifesto mark{background:linear-gradient(transparent 62%,#fff2a8 62%);color:var(--teal-d)} /* ---------- ④ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-merit{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-merit div{background:#fff;border-radius:10px;padding:12px 8px;text-align:center;border:1px solid var(--line)} :is(#capx,#capx2,#capx3,#capx4) .capx-merit svg{width:26px;height:26px;margin:0 auto 4px;display:block;color:var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-merit b{display:block;font-size:15px} :is(#capx,#capx2,#capx3,#capx4) .capx-merit span{font-size:11.5px;color:var(--sub)} :is(#capx,#capx2,#capx3,#capx4) .capx-method{background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column} :is(#capx,#capx2,#capx3,#capx4) .capx-method.main{border:2px solid var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-method .img{aspect-ratio:4/3;background:#e9eeee} :is(#capx,#capx2,#capx3,#capx4) .capx-method .img img{width:100%;height:100%;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-method .body{padding:12px 14px 14px;flex:1;display:flex;flex-direction:column} :is(#capx,#capx2,#capx3,#capx4) .capx-method .tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:4px;color:#fff;margin-bottom:4px;align-self:flex-start;background:var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-method h3{font-size:17px;font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-method p{font-size:12.5px;color:var(--sub);margin:4px 0 8px;flex:1} :is(#capx,#capx2,#capx3,#capx4) .capx-method dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:12px;margin:0;border-top:1px dashed var(--line);padding-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-method dt{color:var(--sub)}:is(#capx,#capx2,#capx3,#capx4) .capx-method dd{margin:0;font-weight:700} /* ---------- 表 ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-table-wrap{border-radius:10px;border:1px solid var(--line);background:#fff;overflow:hidden} :is(#capx,#capx2,#capx3,#capx4) table.capx-tbl{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl th,:is(#capx,#capx2,#capx3,#capx4) .capx-tbl td{padding:9px 4px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle;line-height:1.45} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl thead th{background:var(--teal);color:#fff;font-weight:700;font-size:11.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl thead th.hl{background:var(--teal-d)} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl tbody th{text-align:left;background:#fafafa;font-weight:700;padding-left:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl td.hl{background:var(--teal-ll);font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl small{font-size:10px;color:var(--sub)} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .m{font-size:17px;line-height:1;font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .m-ex{color:var(--price)}:is(#capx,#capx2,#capx3,#capx4) .m-gd{color:var(--teal)}:is(#capx,#capx2,#capx3,#capx4) .m-tr{color:#9aa1b0}:is(#capx,#capx2,#capx3,#capx4) .m-ng{color:#c3c8d2} :is(#capx,#capx2,#capx3,#capx4) .capx-reco{display:grid;gap:10px;margin-top:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-reco div{background:#fff;border-radius:10px;padding:12px 14px;border-top:4px solid var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-reco h3{font-size:14.5px;font-weight:700;margin-bottom:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-reco ul{margin:0;padding-left:1.2em;font-size:12.5px} /* ---------- ⑥ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-tiers{display:grid;gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier{display:grid;grid-template-columns:110px 1fr;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .img{grid-row:1/5;grid-column:1;background:#eef0f0;height:100%;min-height:120px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .img img{width:100%;height:100%;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .top{grid-column:2;padding:10px 12px 0;display:flex;align-items:baseline;gap:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .area{font-size:24px;font-weight:900;color:var(--teal-d);line-height:1.1} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .area small{font-size:11px;font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .lbl{font-size:11.5px;color:var(--sub);font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .price{grid-column:2;font-size:22px;font-weight:900;color:var(--price);padding:2px 12px 0;line-height:1.3} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .price small{font-size:10.5px;color:var(--sub);font-weight:500} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .use{grid-column:2;font-size:11.5px;color:var(--sub);padding:0 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .ex{grid-column:2;font-size:11px;color:var(--sub);padding:2px 12px 10px} :is(#capx,#capx2,#capx3,#capx4) .capx-price-sub{display:grid;gap:16px;margin-top:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-price-sub h3{font-size:14px;font-weight:700;margin-bottom:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-price-sub .capx-tbl tbody th{width:58%} :is(#capx,#capx2,#capx3,#capx4) .capx-points{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-points span{background:var(--teal-l);color:var(--teal-d);font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px} /* ---------- （旧）料金計算フォーム用：現在未使用 ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-sim{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-drop{border:2px dashed var(--teal);border-radius:10px;background:var(--teal-ll);min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;position:relative} :is(#capx,#capx2,#capx3,#capx4) .capx-drop input{position:absolute;inset:0;opacity:0} :is(#capx,#capx2,#capx3,#capx4) .capx-drop canvas{max-width:100%;max-height:180px;display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-drop svg{width:36px;height:36px;color:var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-drop p{font-size:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-form{display:grid;gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-form label{font-size:12.5px;font-weight:700;display:block;margin-bottom:3px} :is(#capx,#capx2,#capx3,#capx4) .capx-row{display:grid;grid-template-columns:1fr 1fr;gap:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-form input[type=number],:is(#capx,#capx2,#capx3,#capx4) .capx-form select{width:100%;padding:9px 10px;border:1px solid #ccc;border-radius:6px;font-size:16px;background:#fff;font-family:inherit} :is(#capx,#capx2,#capx3,#capx4) .capx-seg{display:flex;border:1px solid #ccc;border-radius:6px;overflow:hidden} :is(#capx,#capx2,#capx3,#capx4) .capx-seg button{flex:1;padding:10px 4px;border:0;background:#fff;font-size:14px;font-weight:700;color:var(--sub);font-family:inherit} :is(#capx,#capx2,#capx3,#capx4) .capx-seg button.on{background:var(--teal);color:#fff} :is(#capx,#capx2,#capx3,#capx4) .capx-check{font-size:12px;display:flex;gap:6px;align-items:center;font-weight:500!important} :is(#capx,#capx2,#capx3,#capx4) .capx-result{border:2px solid var(--teal);border-radius:10px;padding:12px 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-result .r1{font-size:12px;color:var(--sub)} :is(#capx,#capx2,#capx3,#capx4) .capx-result .r2{font-size:21px;font-weight:900;line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-result .r2 b{color:var(--price)} :is(#capx,#capx2,#capx3,#capx4) .capx-result .r3{font-size:11.5px;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-result .warn{background:#fff3cd;color:#7a5a00;border-radius:6px;padding:6px 8px;font-size:11.5px;margin-top:6px;display:none} /* ---------- ⑧ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-why{display:grid;gap:10px;margin-bottom:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-why div{background:#fff;border-radius:10px;padding:12px 14px;border:1px solid var(--line);font-size:12.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-why h3{font-size:14px;font-weight:700;margin-bottom:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-why .old h3{color:var(--sub)} :is(#capx,#capx2,#capx3,#capx4) .capx-why .new{border:2px solid var(--teal)}:is(#capx,#capx2,#capx3,#capx4) .capx-why .new h3{color:var(--teal-d)} :is(#capx,#capx2,#capx3,#capx4) .capx-flow ol{list-style:none;padding:0;margin:0;display:grid;gap:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px 10px 52px;position:relative;min-height:52px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);border:7px solid transparent;border-top:8px solid var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-flow .n{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow b{display:block;font-size:14px;line-height:1.4} :is(#capx,#capx2,#capx3,#capx4) .capx-flow b br{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-flow span:not(.n){display:block;font-size:11.5px;color:var(--sub);line-height:1.5} :is(#capx,#capx2,#capx3,#capx4) .capx-tajima{margin-top:16px;background:#fff;border-radius:10px;padding:14px;border:1px solid var(--line)} :is(#capx,#capx2,#capx3,#capx4) .capx-tajima .lg{display:inline-block;background:var(--teal);color:#fff;font-weight:900;font-size:12px;padding:4px 10px;border-radius:6px;margin-bottom:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-tajima .lg br{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-tajima h3{font-size:14px;font-weight:700;margin-bottom:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-tajima p{font-size:12.5px;color:var(--sub)} /* ---------- ⑨ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-pick{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;text-decoration:none;display:flex;flex-direction:column} :is(#capx,#capx2,#capx3,#capx4) .capx-pick .why{font-size:11px;font-weight:700;color:#fff;background:var(--teal);padding:2px 8px;border-radius:4px;align-self:flex-start} :is(#capx,#capx2,#capx3,#capx4) .capx-pick h3{font-size:16px;font-weight:700;margin:6px 0 0} :is(#capx,#capx2,#capx3,#capx4) .capx-pick .meta{font-size:11px;color:var(--sub)} :is(#capx,#capx2,#capx3,#capx4) .capx-pick p{font-size:12.5px;margin:6px 0;flex:1} :is(#capx,#capx2,#capx3,#capx4) .capx-pick .yen{font-size:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-pick .yen b{font-size:20px;color:var(--price)} :is(#capx,#capx2,#capx3,#capx4) .capx-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-shapes a{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12px;font-weight:700;text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-shapes a img{aspect-ratio:1/1;object-fit:cover;width:100%;background:#eef0f0} :is(#capx,#capx2,#capx3,#capx4) .capx-shapes a span{display:block;padding:6px 2px;line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-shapes small{font-size:9.5px;font-weight:500;color:var(--sub)} /* ---------- ⑩ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-cases{display:grid;grid-template-columns:1fr 1fr;gap:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-case{background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--line)} :is(#capx,#capx2,#capx3,#capx4) .capx-case .img{aspect-ratio:1/1;background:#e9eeee} :is(#capx,#capx2,#capx3,#capx4) .capx-case .img img{width:100%;height:100%;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-case .t{padding:8px 10px} :is(#capx,#capx2,#capx3,#capx4) .capx-case b{font-size:13px;display:block;line-height:1.4} :is(#capx,#capx2,#capx3,#capx4) .capx-case span{font-size:11px;color:var(--sub);line-height:1.4;display:block} /* ---------- ⑪ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-consult details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden} :is(#capx,#capx2,#capx3,#capx4) .capx-consult summary{list-style:none;cursor:pointer;padding:13px 40px 13px 12px;font-weight:700;font-size:14px;position:relative;display:flex;gap:8px;align-items:flex-start;line-height:1.5} :is(#capx,#capx2,#capx3,#capx4) .capx-consult summary::-webkit-details-marker{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-consult summary::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-consult details[open] summary::after{content:"−"} :is(#capx,#capx2,#capx3,#capx4) .capx-consult summary .q{flex:none;background:var(--teal);color:#fff;border-radius:4px;font-size:11px;padding:1px 6px;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-consult .ans{padding:0 14px 14px;font-size:13px;line-height:1.7} :is(#capx,#capx2,#capx3,#capx4) .capx-consult .ans p{margin:0 0 .7em} :is(#capx,#capx2,#capx3,#capx4) .capx-consult .ans p:last-child{margin-bottom:0} :is(#capx,#capx2,#capx3,#capx4) .capx-consult .ans ul{margin:4px 0 .7em;padding-left:1.2em} :is(#capx,#capx2,#capx3,#capx4) .capx-consult .ans a{color:var(--teal-d);font-weight:700} /* ---------- ⑫ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-vs td.hl{color:var(--price)} :is(#capx,#capx2,#capx3,#capx4) .capx-vs .capx-tbl tbody th{width:32%} /* ---------- ⑬ FAQ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-faq details{border-bottom:1px solid var(--line);background:#fff} :is(#capx,#capx2,#capx3,#capx4) .capx-faq summary{list-style:none;cursor:pointer;padding:13px 32px 13px 40px;font-weight:700;position:relative;font-size:14px;line-height:1.55} :is(#capx,#capx2,#capx3,#capx4) .capx-faq summary::-webkit-details-marker{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-faq summary::before{content:"Q";position:absolute;left:4px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:13px;font-family:Roboto,sans-serif} :is(#capx,#capx2,#capx3,#capx4) .capx-faq summary::after{content:"";position:absolute;right:10px;top:19px;width:8px;height:8px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg)} :is(#capx,#capx2,#capx3,#capx4) .capx-faq details[open] summary::after{transform:rotate(-135deg);top:23px} :is(#capx,#capx2,#capx3,#capx4) .capx-faq .a{padding:0 8px 14px 40px;font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-faq .a a{color:var(--teal-d)} :is(#capx,#capx2,#capx3,#capx4) .capx-faq-grid{border-top:1px solid var(--line)} /* ---------- ⑮ ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-final{background:var(--teal-l);text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-final h2{font-size:20px;font-weight:700;color:#222;margin-bottom:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-final p{color:var(--sub);margin-bottom:16px;font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-final .btns{display:grid;gap:12px} /* ---------- 画面下 固定CTA ---------- */ :is(#capx,#capx2,#capx3,#capx4) .capx-fixcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;padding:10px 80px calc(14px + env(safe-area-inset-bottom));background:transparent;pointer-events:none;transform:translateY(110%);transition:transform .25s} :is(#capx,#capx2,#capx3,#capx4) .capx-fixcta.show{transform:none} :is(#capx,#capx2,#capx3,#capx4) .capx-fixcta.is-dismissed{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-fixcta a{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:100%;max-width:640px;min-height:48px;padding:12px 40px;border:2px solid #fff;border-radius:999px;background:#24bbb7;color:#fff;font-size:15px;font-weight:700;letter-spacing:.06em;text-decoration:none;box-shadow:0 3px 12px rgba(0,0,0,.2);box-sizing:border-box} /* ===================== 最短お届け日（刺繍・プリント） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-ship{border:1.5px solid #9fd9d6;border-radius:14px;background:#fff;padding:12px 10px 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-row{display:grid;grid-template-columns:1fr 1fr} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;color:#24bbb7;font-weight:700;padding:2px 4px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item+.capx-ship-item{border-left:1px solid #cfe9e7} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item .k{background:var(--teal);color:#fff;border-radius:4px;font-size:11px;padding:2px 8px;line-height:1.5} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item svg{width:20px;height:20px;flex:none} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item .s{font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item b{font-family:Roboto,"Noto Sans JP",sans-serif;font-size:28px;font-weight:700;line-height:1;letter-spacing:.01em;color:#24bbb7} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-note{font-size:11.5px;color:#555;margin-top:8px;line-height:1.6} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item{flex-direction:row} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;align-items:baseline} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item .k{grid-column:1/-1;justify-self:center;margin:0 0 6px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item svg{align-self:center} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item{gap:3px;padding:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item svg{width:16px;height:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item .s{font-size:11.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item b{font-size:clamp(22px,6.6vw,28px)} /* ===================== 3列表示（④刺繍方法・⑨おすすめキャップ） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} /* ④ 写真＋名前（タオルのシーン選択と同じ見せ方） */ :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .capx-method{border:0;background:none;border-radius:0;overflow:visible} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .capx-method.main{border:0} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .img{aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#e3eded} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .body{padding:8px 0 0;position:relative} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .tag{position:absolute;top:-30px;left:6px;font-size:9.5px;padding:1px 6px} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 h3{font-size:13px;line-height:1.35;letter-spacing:-.01em} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 p{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 dl{display:block;border:0;padding:2px 0 0;font-size:11px;line-height:1.45} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 dt,:is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 dd:nth-of-type(2){display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 dd{font-weight:500;color:var(--sub)} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 dd:first-of-type{color:var(--price);font-weight:700} /* ⑨ コンパクトカード */ :is(#capx,#capx2,#capx3,#capx4) .capx-picks.capx-grid3 .capx-pick{padding:10px 8px;border-radius:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-picks.capx-grid3 .why{font-size:9.5px;padding:2px 5px;line-height:1.35;align-self:stretch;text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-picks.capx-grid3 h3{font-size:13px;line-height:1.35;margin-top:8px;flex:1} :is(#capx,#capx2,#capx3,#capx4) .capx-picks.capx-grid3 .meta,:is(#capx,#capx2,#capx3,#capx4) .capx-picks.capx-grid3 p{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-picks.capx-grid3 .yen{font-size:10px;line-height:1.3;margin-top:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-picks.capx-grid3 .yen b{font-size:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-picks.capx-grid3 .yen b::before{content:"\A";white-space:pre} /* ===================== 文字揃え：ブロックは中央配置、文章は左揃え ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-h2{display:inline-block;text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-lead{display:table;margin-left:auto;margin-right:auto;text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-manifesto{display:table;margin-left:auto;margin-right:auto;text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-final h2,:is(#capx,#capx2,#capx3,#capx4) .capx-final p{display:table;margin-left:auto;margin-right:auto;text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-prob li .t{display:inline-block;text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-merit span{display:inline-block;text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-existing{text-align:left} /* ===================== ④ おすすめな理由（画像＋文章・スマホ） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-reasons{display:grid;gap:12px;margin-bottom:24px} :is(#capx,#capx2,#capx3,#capx4) .capx-reason{display:grid;grid-template-columns:118px 1fr;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-reason .img{position:relative;border-radius:8px;overflow:hidden;background:#e3eded;aspect-ratio:1/1;align-self:start} :is(#capx,#capx2,#capx3,#capx4) .capx-reason .img img{width:100%;height:100%;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-reason .no{position:absolute;left:6px;top:6px;background:var(--teal);color:#fff;font-family:Roboto,sans-serif;font-weight:700;font-size:11px;padding:1px 6px;border-radius:3px} :is(#capx,#capx2,#capx3,#capx4) .capx-reason h3{font-size:17px;font-weight:700;color:#222;line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-reason .catch{color:var(--teal-d);font-weight:700;font-size:12.5px;margin:1px 0 4px;line-height:1.5} :is(#capx,#capx2,#capx3,#capx4) .capx-reason p:not(.catch){font-size:12.5px;color:#555;line-height:1.7} /* ===================== ④ 小見出し：加工方法は3種類 ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-subhead{text-align:center;margin:4px 0 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-subhead h3{display:inline-flex;align-items:center;gap:0;font-size:18px;font-weight:700;color:#222} :is(#capx,#capx2,#capx3,#capx4) .capx-subhead h3::before,:is(#capx,#capx2,#capx3,#capx4) .capx-subhead h3::after{content:"";width:22px;height:2px;background:var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-subhead h3 span{color:var(--teal-d);font-size:1.15em} :is(#capx,#capx2,#capx3,#capx4) .capx-subhead h3::before{margin-right:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-subhead h3::after{margin-left:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-subhead p{display:table;margin:6px auto 0;text-align:left;font-size:12.5px;color:var(--sub)} /* ===================== ⑥ 面積別料金：3列横並び（スマホ） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-tiers{grid-template-columns:repeat(3,1fr);gap:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier{display:flex;flex-direction:column;text-align:center;border-radius:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .top{order:1;flex-direction:column;align-items:center;gap:0;padding:8px 4px 6px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .area{font-size:22px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .area small{display:block;font-size:10px;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .lbl{font-size:10.5px;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .img{order:2;min-height:0;height:auto;aspect-ratio:1/1} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .price{order:3;font-size:18px;padding:8px 2px 0;line-height:1.2} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .price small{display:block;font-size:9.5px;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .use{order:4;font-size:10.5px;line-height:1.45;padding:6px 6px 0;text-align:left;flex:1} :is(#capx,#capx2,#capx3,#capx4) .capx-tier .ex{order:5;font-size:9.5px;line-height:1.45;padding:6px 6px 8px;text-align:left;background:var(--bg);margin-top:6px} /* ===================== 画像拡大（ダイレクトカラーの工程画像と同じモーダル） ===================== */ :is(#capx,#capx2,#capx3,#capx4) img.capx-zoomable{cursor:zoom-in} :is(#capx,#capx2,#capx3,#capx4) .capx-zoomwrap{position:relative} :is(#capx,#capx2,#capx3,#capx4) .capx-zoomicon{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;pointer-events:none} :is(#capx,#capx2,#capx3,#capx4) .capx-zoomicon svg{width:15px;height:15px} .capx-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(30,30,30,.90)} .capx-lb.open{display:flex} .capx-lb-dialog{position:relative;width:auto;max-width:100%;max-height:90vh} .capx-lb-close{position:fixed;top:20px;right:20px;width:44px;height:44px;z-index:1;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.15);color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:all .2s ease} .capx-lb-close:hover{background:rgba(255,255,255,.25);transform:rotate(90deg)} .capx-lb-body{background:#fff;padding:20px;border-radius:6px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)} .capx-lb-body img{display:block;width:auto;max-width:100%;max-height:calc(90vh - 40px);height:auto;border-radius:2px} @media (max-width:767px){ .capx-lb{padding:12px} .capx-lb-body{padding:12px} } /* ===================== ⑥ サイズ感と料金の目安（スマホ・3列横並び） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-pill{display:table;margin:0 auto 8px;background:#efe3d3;color:#4a3a28;font-weight:700;font-size:12px;padding:4px 14px;border-radius:99px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-size{border-radius:8px;padding:10px 5px 6px;display:flex;flex-direction:column} :is(#capx,#capx2,#capx3,#capx4) .capx-size h3{text-align:center;font-size:16px;font-weight:700;color:#1d2a44;line-height:1.3} :is(#capx,#capx2,#capx3,#capx4) .capx-size .for{font-size:10px;color:#444;margin:2px 2px 6px;line-height:1.45;min-height:2.9em} :is(#capx,#capx2,#capx3,#capx4) .capx-size .pic{border-radius:6px;overflow:hidden} :is(#capx,#capx2,#capx3,#capx4) .capx-size .pic img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:0 50%} :is(#capx,#capx2,#capx3,#capx4) .capx-size .spec{display:grid;gap:6px;background:#fff;border-radius:6px;margin:6px 0 0;padding:8px 4px;flex:1} :is(#capx,#capx2,#capx3,#capx4) .capx-size .spec>div{text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-size .spec>div+div{border-top:1px solid #eee;padding-top:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-size dt{font-size:9.5px;font-weight:700;color:#555;line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-size dd{margin:2px 0 0;font-size:10.5px;font-weight:700;color:#1d2a44;line-height:1.3} :is(#capx,#capx2,#capx3,#capx4) .capx-size dd b{font-size:17px;font-weight:900;font-family:Roboto,"Noto Sans JP",sans-serif} :is(#capx,#capx2,#capx3,#capx4) .capx-size dd b.yen{color:var(--price)} :is(#capx,#capx2,#capx3,#capx4) .capx-size dd small{display:block;font-size:9px;font-weight:500;color:#666;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizeex-wrap{margin-top:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizeex-head{font-size:12px;color:#444;margin-bottom:8px;line-height:1.6} :is(#capx,#capx2,#capx3,#capx4) .capx-sizeex-head span{display:table;background:#1d2a44;color:#fff;font-weight:700;font-size:12.5px;padding:3px 12px;border-radius:99px;margin-bottom:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizeex-list{display:grid;grid-template-columns:1fr 1fr;gap:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizeex-item{margin:0;background:#fff;border-radius:8px;overflow:hidden;text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-sizeex-item img{width:100%;aspect-ratio:230/190;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-sizeex-item figcaption{font-size:12px;font-weight:700;padding:6px 4px 8px;line-height:1.4} :is(#capx,#capx2,#capx3,#capx4) .capx-sizeex-item figcaption span{display:block;font-size:10.5px;color:var(--price);margin-top:1px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp{background:#fdf0ee;border-radius:10px;padding:14px;margin-top:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp .t{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:#8a2a1a;margin-bottom:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp .t svg{width:24px;height:24px;flex:none;color:#e0502a} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp p{font-size:12.5px;color:#444;line-height:1.7} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp .capx-btn{margin-top:12px;border-radius:99px;font-size:15px} /* ===================== ⑧ ご注文から出荷まで（4ステップ・スマホ） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-flowtitle{text-align:center;font-size:15px;font-weight:700;color:var(--teal-d);margin:2px 0 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizeex-item .capx-zoomicon{bottom:auto;top:6px} /* ===================== ⑩ お客様の声（カルーセル） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-rvs{position:relative} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/4);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-track::-webkit-scrollbar{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-rv{scroll-snap-align:start;background:#fff;border:1px solid #e3e3e3;border-radius:10px;overflow:hidden;display:flex;flex-direction:column} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .pic{aspect-ratio:16/10;background:#f3f3f3} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .pic img{width:100%;height:100%;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .body{padding:12px 16px 14px;display:flex;flex-direction:column;flex:1} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .top{display:flex;justify-content:space-between;align-items:center;gap:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .stars{color:#f5b301;font-size:14px;letter-spacing:1px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .tag{background:var(--teal-l);color:var(--teal-d);font-weight:700;font-size:12px;padding:2px 9px;border-radius:3px;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .meta{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:10px 0 8px;font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv dt{color:#888;font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-rv dd{margin:0;font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-rv dd a{color:var(--teal-d);text-underline-offset:3px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .txt{font-size:13px;line-height:1.75;color:#333;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} :is(#capx,#capx2,#capx3,#capx4) .capx-rv.open .txt{-webkit-line-clamp:unset;display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .more{align-self:flex-start;background:none;border:0;padding:4px 0 0;color:var(--teal-d);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .foot{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;font-size:12px;color:#888} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav{position:absolute;top:24%;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(220,220,220,.85);color:#fff;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.1)} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav.prev{left:-12px}:is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav.next{right:-12px} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav[disabled]{opacity:0;pointer-events:none} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-more{text-align:center;margin-top:22px} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-more a{display:inline-flex;align-items:center;gap:10px;border:1.5px solid #222;border-radius:99px;padding:12px 30px;font-weight:700;font-size:14px;text-decoration:none;background:#fff} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-track{grid-auto-columns:84%;margin:0 -16px;padding:2px 16px;scroll-padding-left:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav{width:38px;height:38px;font-size:22px;top:20%} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav.prev{left:4px}:is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav.next{right:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .body{padding:10px 14px 12px} /* ⑩ お客様の声：写真を小さめに（全体が見えるよう余白を付けて収める） */ :is(#capx,#capx2,#capx3,#capx4) .capx-rv .pic{aspect-ratio:auto;height:130px;background:#fff;padding:8px 8px 0} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .pic img{object-fit:contain} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-track{grid-auto-columns:76%} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav{top:62px} /* ===================== ⑨ あなたに合ったキャップを選ぶ ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-sel-kicker{text-align:center;font-size:15px;font-weight:500;color:#333;margin-bottom:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-kicker::before,:is(#capx,#capx2,#capx3,#capx4) .capx-sel-kicker::after{content:"＼";color:#f0b400;font-weight:700;margin:0 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-kicker::after{content:"／"} :is(#capx,#capx2,#capx3,#capx4) .capx-sel{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-panel{border-radius:14px;padding:22px 16px 18px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-panel.emb{background:#fbf3ec} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-panel.shp{background:#eef4f9} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl{display:flex;align-items:center;gap:14px;margin:0 8px 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl>svg{width:46px;height:46px;flex:none;color:#1d2a44} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl h3{font-size:24px;font-weight:900;color:#1d2a44;line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl h3 em{font-style:normal;font-size:1.15em} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl p{font-size:13px;color:#444;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl .capx-sel-ainote{font-size:11px;color:#777;margin-top:4px;line-height:1.6} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:10px;padding:8px 8px 14px;text-decoration:none;color:#1d2a44;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:.15s} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick:hover{box-shadow:0 6px 16px rgba(0,0,0,.1);transform:translateY(-2px)} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .badge{position:absolute;top:14px;left:14px;z-index:1;background:var(--teal);color:#fff;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .pic{position:relative;display:block;width:100%;border-radius:8px;overflow:hidden;background:#f2f0ec} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .pic img{width:100%;aspect-ratio:258/346;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .nm{font-size:17px;font-weight:900;margin-top:12px;line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .mt{font-size:11.5px;color:#777;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen{font-size:12px;color:#333;margin-top:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen b{font-size:20px;color:var(--price);margin-left:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen .tax{font-size:10px;font-weight:500;color:#666;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-sel .go{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid #9aa3b5;color:#1d2a44;margin-top:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel .go svg{width:18px;height:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-note{font-size:11px;color:#777;margin:10px 4px 0;line-height:1.6} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:10px;padding:10px 8px 14px;text-decoration:none;color:#1d2a44;transition:.15s} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape:hover{box-shadow:0 6px 16px rgba(0,0,0,.08)} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .pic{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#f4f6f8} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .pic img{width:100%;height:100%;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .nm{font-size:14px;font-weight:700;margin-top:8px;line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .nm small{display:block;font-size:10.5px;font-weight:500;color:#777} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .go{width:32px;height:32px;margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-all{margin-top:24px;text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-all a{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:min(100%,820px);border:1.5px solid #1d2a44;border-radius:99px;padding:16px 20px;font-weight:700;font-size:17px;color:#1d2a44;text-decoration:none;background:#fff} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-all svg{width:20px;height:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel{grid-template-columns:1fr;gap:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-kicker{font-size:12.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-kicker::before,:is(#capx,#capx2,#capx3,#capx4) .capx-sel-kicker::after{margin:0 6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-panel{padding:16px 10px 14px;border-radius:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl{gap:10px;margin:0 4px 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl>svg{width:34px;height:34px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl h3{font-size:19px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl p{font-size:11.5px;line-height:1.55} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-picks,:is(#capx,#capx2,#capx3,#capx4) .capx-sel-shapes{gap:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick{padding:5px 5px 10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .badge{top:9px;left:9px;font-size:9.5px;padding:1px 6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .nm{font-size:13px;margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .mt{font-size:9.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen{font-size:9.5px;margin-top:4px;line-height:1.3} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen b{font-size:16px;margin:0} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen b::before{content:"\A";white-space:pre} :is(#capx,#capx2,#capx3,#capx4) .capx-sel .go{width:30px;height:30px;margin-top:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel .go svg{width:15px;height:15px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-note{font-size:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape{padding:6px 5px 10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .nm{font-size:12px;margin-top:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .nm small{font-size:9px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .go{width:28px;height:28px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-all{margin-top:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-all a{width:100%;font-size:15px;padding:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel .go{margin-top:auto} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen{margin-bottom:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .nm{margin-bottom:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick{min-width:0} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .nm{font-size:clamp(10.5px,3.1vw,13px);letter-spacing:-.04em;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .mt{letter-spacing:-.03em;line-height:1.35} /* ⑩ お客様の声：ウェアページのスマホ表示に合わせる */ :is(#capx,#capx2,#capx3,#capx4) .capx-sec.alt[aria-labelledby="capx-s10"]{background:#fff} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-track{grid-auto-columns:72%;gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv{border:1px solid #e6e6e6;border-radius:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .pic{height:140px;padding:10px 10px 0} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .body{padding:10px 14px 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .stars{font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .tag{font-size:11.5px;padding:3px 9px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .meta{font-size:12.5px;margin:10px 0 8px;gap:4px 18px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .txt{font-size:12.5px;line-height:1.75} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .more{font-size:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-rv .foot{font-size:11.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav{top:128px;width:40px;height:40px;font-size:22px;background:rgba(150,150,150,.55);box-shadow:none} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav.prev{left:2px}:is(#capx,#capx2,#capx3,#capx4) .capx-rvs-nav.next{right:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-more{margin-top:26px} :is(#capx,#capx2,#capx3,#capx4) .capx-rvs-more a{padding:12px 28px;font-size:14px} /* ===================== ② お悩み解決（バッグページと同じ構成） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-sec.alt[aria-labelledby="capx-s2"]{background:#fff} :is(#capx,#capx2,#capx3,#capx4) .capx-solhead{border-bottom:2px solid var(--teal);padding-bottom:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-solhead h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;color:#222;line-height:1.45} :is(#capx,#capx2,#capx3,#capx4) .capx-sollead{margin:14px 0 18px;font-size:15px;color:#333} :is(#capx,#capx2,#capx3,#capx4) .capx-sol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sol li{background:#fff;border:1px solid #ddd;border-radius:10px;padding:18px 16px 16px;display:flex;flex-direction:column;align-items:center} :is(#capx,#capx2,#capx3,#capx4) .capx-sol .ic{width:54px;height:54px;border-radius:50%;background:#d8f0ee;color:#1d4f4c;display:grid;place-items:center;flex:none} :is(#capx,#capx2,#capx3,#capx4) .capx-sol .ic svg{width:30px;height:30px} :is(#capx,#capx2,#capx3,#capx4) .capx-sol h3{font-size:16px;font-weight:700;color:#222;text-align:center;line-height:1.5;margin:12px 0 8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sol p{font-size:13px;line-height:1.75;color:#333;text-align:left;align-self:stretch} :is(#capx,#capx2,#capx3,#capx4) .capx-solhead h2{font-size:19px;font-weight:900;line-height:1.4;color:#333} :is(#capx,#capx2,#capx3,#capx4) .capx-sollead{font-size:13px;margin:10px 0 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-sol{grid-template-columns:1fr 1fr;gap:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sol li{padding:14px 10px 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sol .ic{width:46px;height:46px} :is(#capx,#capx2,#capx3,#capx4) .capx-sol .ic svg{width:25px;height:25px} :is(#capx,#capx2,#capx3,#capx4) .capx-sol h3{font-size:13px;margin:8px 0 6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sol p{font-size:11.5px;line-height:1.65} /* ===================== ⑥ サイズ感と料金（スマホ：見やすさ優先の1列） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-szlist{display:grid;gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow{display:grid;grid-template-columns:44% 1fr;align-items:center;gap:12px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .pic{border-radius:6px;overflow:hidden;background:#eef0f0} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .pic img{width:100%;aspect-ratio:1.1/1;object-fit:cover;object-position:0 50%} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .nm{font-size:17px;font-weight:900;color:#1d2a44;line-height:1.3} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .nm span{display:block;font-size:11.5px;font-weight:500;color:#666;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .ar{font-size:13px;font-weight:700;color:#1d2a44;margin-top:8px;line-height:1.3} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .ar b{font-size:22px;font-family:Roboto,"Noto Sans JP",sans-serif} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .ar small{display:block;font-size:11.5px;font-weight:500;color:#666} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .yen{font-size:14px;font-weight:700;color:var(--price);margin-top:6px;line-height:1} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .yen b{font-size:26px;font-family:Roboto,"Noto Sans JP",sans-serif} :is(#capx,#capx2,#capx3,#capx4) .capx-sznote{font-size:11px;color:#777;margin-top:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-szsub{font-size:15px;font-weight:700;color:#1d2a44;margin:22px 0 10px;padding-left:10px;border-left:4px solid var(--teal);line-height:1.3} :is(#capx,#capx2,#capx3,#capx4) .capx-szexs{display:grid;grid-template-columns:1fr 1fr;gap:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-szex{margin:0;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #eee} :is(#capx,#capx2,#capx3,#capx4) .capx-szex img{width:100%;aspect-ratio:230/190;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-szex figcaption{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;font-size:12.5px;font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-szex figcaption b{color:var(--price);font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-szex .capx-zoomicon{bottom:auto;top:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp{background:#fdf0ee;border-radius:10px;padding:14px;margin-top:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp .t{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:#8a2a1a;margin-bottom:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp .t svg{width:22px;height:22px;color:#e0502a} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp p{font-size:12.5px;color:#444;line-height:1.7} :is(#capx,#capx2,#capx3,#capx4) .capx-sizehelp .capx-btn{margin-top:10px;border-radius:99px;font-size:15px;padding:12px} /* ===================== ⑥ 「サイズだけで料金が決まる」訴求 ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-pill{background:var(--teal);color:#fff} :is(#capx,#capx2,#capx3,#capx4) #capx-price .capx-lead strong{color:var(--teal-d);background:linear-gradient(transparent 62%,#fff2a8 62%)} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr;gap:18px;counter-reset:s} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow li{position:relative;background:#fff;border:2px solid var(--teal);border-radius:12px;padding:16px 14px;text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow li+li::before{content:"";position:absolute;left:-22px;top:50%;transform:translateY(-50%);border:8px solid transparent;border-left:12px solid var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow .no{display:inline-block;font-family:Roboto,sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--teal-d);background:var(--teal-l);border-radius:99px;padding:1px 10px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow b{display:block;font-size:19px;font-weight:900;margin:6px 0 2px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow .d{display:block;font-size:13px;line-height:1.6;text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-lead{text-align:center;margin:0 0 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-lead span{display:inline-block;font-weight:900;font-size:18px;color:#1d2a44;border-bottom:3px solid #fff100;padding:0 4px 2px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow{margin-bottom:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;text-align:left;padding:10px 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow .no{grid-row:1/3;font-size:10.5px;padding:2px 8px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow b{font-size:15.5px;margin:0} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow .d{font-size:11.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow li+li::before{left:50%;top:-16px;transform:translateX(-50%);border:7px solid transparent;border-top:9px solid var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-lead span{font-size:16px} /* ⑥ 料金カード：正方形の写真＋下に文字（3列） */ :is(#capx,#capx2,#capx3,#capx4) .capx-szlist{grid-template-columns:repeat(3,1fr);gap:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;align-items:stretch} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .pic{border-radius:0;aspect-ratio:1/1} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .pic img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;object-position:7% 50%} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .tx{padding:8px 8px 10px;text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .nm{font-size:15px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .nm span{font-size:9.5px;line-height:1.4;min-height:2.8em;letter-spacing:-.04em} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .ar{font-size:10.5px;margin-top:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .ar b{font-size:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .ar small{font-size:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .yen{font-size:11px;margin-top:6px;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .yen b{font-size:21px} /* ⑥ 料金カード：スライド表示 */ :is(#capx,#capx2,#capx3,#capx4) .capx-szslider{position:relative} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szlist{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0 -16px;padding:2px 14% 4px;scroll-padding:0 14%} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szlist::-webkit-scrollbar{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow{scroll-snap-align:center;border-radius:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .pic img{object-position:7% 50%} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .tx{padding:12px 12px 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .nm{font-size:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .nm span{font-size:12px;min-height:0;letter-spacing:0} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar{font-size:13px;margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar b{font-size:24px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar small{display:inline;font-size:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen{font-size:15px;margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen b{font-size:30px} :is(#capx,#capx2,#capx3,#capx4) .capx-sznav{position:absolute;top:34%;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:rgba(36,187,183,.92);color:#fff;font-size:24px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:pointer} :is(#capx,#capx2,#capx3,#capx4) .capx-sznav.prev{left:-6px}:is(#capx,#capx2,#capx3,#capx4) .capx-sznav.next{right:-6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sznav[disabled]{opacity:0;pointer-events:none} :is(#capx,#capx2,#capx3,#capx4) .capx-szdots{display:flex;justify-content:center;gap:8px;margin-top:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-szdots i{width:8px;height:8px;border-radius:50%;background:#cfdcdc;transition:.2s} :is(#capx,#capx2,#capx3,#capx4) .capx-szdots i.on{background:var(--teal);width:22px;border-radius:99px} /* ④ おすすめな理由：2列（写真の下に文字） */ :is(#capx,#capx2,#capx3,#capx4) .capx-reasons{grid-template-columns:1fr 1fr;gap:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-reason{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden} :is(#capx,#capx2,#capx3,#capx4) .capx-reason .img{border-radius:0;aspect-ratio:1/1;width:100%} :is(#capx,#capx2,#capx3,#capx4) .capx-reason .txt{padding:10px 10px 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-reason h3{font-size:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-reason .catch{font-size:11.5px;margin:2px 0 6px;line-height:1.45} :is(#capx,#capx2,#capx3,#capx4) .capx-reason p:not(.catch){font-size:11.5px;line-height:1.7} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .use{font-size:13px;font-weight:700;color:#1d2a44;line-height:1.4} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .use{font-size:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .use+.ar{margin-top:6px} /* ===================== ⑩ 用途別 刺繍デザインのアイデア（タブ） ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-idtabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-idtabs button{font-family:inherit;font-size:15px;font-weight:700;color:var(--teal-d);background:#fff;border:2px solid var(--teal);border-radius:99px;padding:11px 6px;cursor:pointer;line-height:1.3;transition:.15s} :is(#capx,#capx2,#capx3,#capx4) .capx-idtabs button[aria-selected="true"]{background:var(--teal);color:#fff} :is(#capx,#capx2,#capx3,#capx4) .capx-idtabs button:focus-visible{outline:3px solid #fff100;outline-offset:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-idaddition{margin:0 0 16px;font-size:14px;line-height:1.8;color:#555;text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-idscroll{position:relative} :is(#capx,#capx2,#capx3,#capx4) .capx-idnav{position:absolute;top:203px;z-index:2;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:50%;border:0;background:rgba(36,187,183,.92);color:transparent;font-size:0;line-height:0;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:pointer} :is(#capx,#capx2,#capx3,#capx4) .capx-idnav::before{content:"";display:block;width:9px;height:9px;border-top:2.5px solid #fff;border-right:2.5px solid #fff;box-sizing:border-box} :is(#capx,#capx2,#capx3,#capx4) .capx-idnav.prev::before{transform:translateX(2px) rotate(-135deg)} :is(#capx,#capx2,#capx3,#capx4) .capx-idnav.next::before{transform:translateX(-2px) rotate(45deg)} :is(#capx,#capx2,#capx3,#capx4) .capx-idnav.prev{left:-6px} :is(#capx,#capx2,#capx3,#capx4) .capx-idnav.next{right:-6px} :is(#capx,#capx2,#capx3,#capx4) .capx-idnav[disabled]{opacity:0;pointer-events:none} :is(#capx,#capx2,#capx3,#capx4) .capx-idtrack{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-idpanel[hidden]{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-idpanel{animation:capxFade .25s ease} @keyframes capxFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} :is(#capx,#capx2,#capx3,#capx4) .capx-idea{margin:0;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e5e5} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic{position:relative;aspect-ratio:4/3;background:#f4f2ee} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic>a{display:block;height:100%} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic>img, :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic>a>img{width:100%;height:100%;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .dt{position:absolute;right:10px;bottom:10px;width:34%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.18)} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .dt img{width:100%;height:100%;object-fit:cover} :is(#capx,#capx2,#capx3,#capx4) .capx-idea figcaption{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:16px;font-weight:700;color:#1d2a44;line-height:1.4} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .no{flex:none;font-family:Roboto,sans-serif;font-size:13px;color:#fff;background:var(--teal);border-radius:4px;padding:1px 7px} :is(#capx,#capx2,#capx3,#capx4) .capx-iddots{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-idnote{font-size:12px;color:#777;margin-top:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-idtabs{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-idtabs button{font-size:13.5px;padding:10px 4px} :is(#capx,#capx2,#capx3,#capx4) .capx-idtrack{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;scroll-padding:0 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-idtrack::-webkit-scrollbar{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-idea{scroll-snap-align:start} :is(#capx,#capx2,#capx3,#capx4) .capx-idea figcaption{font-size:16px;padding:12px 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-iddots{display:flex;justify-content:center;gap:8px;margin-top:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-iddots i{width:8px;height:8px;border-radius:50%;background:#cfdcdc;transition:.2s} :is(#capx,#capx2,#capx3,#capx4) .capx-iddots i.on{background:var(--teal);width:22px;border-radius:99px} :is(#capx,#capx2,#capx3,#capx4) .capx-idnote{font-size:11px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea figcaption a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;width:100%} :is(#capx,#capx2,#capx3,#capx4) .capx-idea figcaption a::after{content:"›";margin-left:auto;color:var(--teal);font-size:20px;line-height:1} :is(#capx,#capx2,#capx3,#capx4) .capx-idea:hover figcaption a{color:var(--teal-d)} :is(#capx,#capx2,#capx3,#capx4) .capx-idea figcaption{font-size:clamp(13px,4vw,16px)} :is(#capx,#capx2,#capx3,#capx4) .capx-idea figcaption a{letter-spacing:-.02em;line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-idea{display:flex;flex-direction:column} :is(#capx,#capx2,#capx3,#capx4) .capx-idea figcaption{padding-bottom:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .desc{margin:0;padding:0 16px 16px;font-size:13px;line-height:1.7;color:#555} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .desc{padding:0 14px 14px;font-size:12.5px} /* ⑩ アイデアカード：商品詳細＋刺繍込み価格。写真サイズはバッグ「おすすめのバッグ」に合わせる */ :is(#capx,#capx2,#capx3,#capx4) .capx-idea{display:flex;flex-direction:column;border-radius:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic{background:transparent;aspect-ratio:1/1;width:100%;max-width:160px;margin:12px auto 0;padding:0;display:flex;align-items:center;justify-content:center} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic>a{display:flex;align-items:center;justify-content:center;width:100%;height:100%} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic>img, :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic>a>img{width:auto;max-width:100%;max-height:100%;height:auto;object-fit:contain} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .info{display:flex;flex-direction:column;flex:1;padding:12px 16px 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .nm{text-align:center;font-size:14px;font-weight:900;color:#222;line-height:1.4} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:9px 0 0;padding:0} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .tags li{background:var(--teal-l);color:#1d4f4c;font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .desc{margin:11px 0 0;padding:0;font-size:11.5px;line-height:1.8;color:#555;flex:1} :is(#capx,#capx2,#capx3,#capx4) .capx-idea-desc-pc{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-idea-desc-sp{display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-idtrack.capx-idtrack-one{grid-template-columns:1fr;grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin:0;padding:0} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .price{margin:10px 0 0;font-size:12.5px;font-weight:700;color:#222;line-height:1.55} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .price b, :is(#capx,#capx2,#capx3,#capx4) .capx-idea .price span.price{font-size:20px;color:#f05a00;font-family:Roboto,"Noto Sans JP",sans-serif;margin-left:4px;font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .price small{font-size:11px;font-weight:500;color:#666;margin:0 2px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .price .tax{font-size:11px;font-weight:500;color:#666;margin-left:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pnote{margin:6px 0 0;font-size:10px;color:#777;line-height:1.65} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .more{align-self:center;display:inline-flex;align-items:center;gap:7px;margin-top:12px;border:1.5px solid #1d4f4c;border-radius:99px;padding:6px 14px;font-size:11px;font-weight:700;color:#1d4f4c;text-decoration:none;background:#fff} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .more::after{content:"›";font-size:16px;line-height:1} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .more:hover{background:var(--teal-l)} /* ===================== ③ 4つのポイント ===================== */ :is(#capx,#capx2,#capx3,#capx4) .capx-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;background:#fff;border:2px solid var(--teal-l);border-radius:12px;padding:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts .ic{width:64px;height:64px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center} :is(#capx,#capx2,#capx3,#capx4) .capx-pts .ic svg{width:32px;height:32px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts .no{font-family:Roboto,sans-serif;font-weight:700;font-size:14px;color:var(--teal);letter-spacing:.06em;line-height:1} :is(#capx,#capx2,#capx3,#capx4) .capx-pts h3{font-size:18px;font-weight:900;color:#222;line-height:1.45;margin:4px 0 6px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts .tx{font-size:14px;line-height:1.8;color:#555} :is(#capx,#capx2,#capx3,#capx4) .capx-pts{grid-template-columns:1fr;gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts li{grid-template-columns:48px 1fr;gap:12px;padding:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts .ic{width:48px;height:48px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts .ic svg{width:25px;height:25px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts .no{font-size:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts h3{font-size:15.5px;margin:3px 0 4px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts .tx{font-size:12.5px;line-height:1.7} :is(#capx,#capx2,#capx3,#capx4) section[aria-labelledby="capx-s3"] .capx-head{margin-bottom:24px} :is(#capx,#capx2,#capx3,#capx4) section[aria-labelledby="capx-s3"] .capx-solhead{margin-bottom:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-method .use{font-size:14px;color:#555;line-height:1.6;margin:4px 0 0} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .use{display:block;font-size:11.5px;line-height:1.5;margin-top:3px} :is(#capx,#capx2,#capx3,#capx4) .capx-method .price{font-size:15px;font-weight:700;color:var(--price);margin:2px 0 0} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .price{display:block;font-size:11.5px;margin-top:1px} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .use{color:#666} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-points li{background:none} /* ③ お悩み解決：4項目（ラベル｜一文） */ :is(#capx,#capx2,#capx3,#capx4) .capx-pts4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 li{background:#fff;border:2px solid var(--teal-l);border-radius:12px;padding:20px 14px;text-align:center;display:flex;flex-direction:column;align-items:center} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .ic{width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .ic svg{width:28px;height:28px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .lb{display:inline-block;margin:12px 0 8px;background:var(--teal-l);color:var(--teal-d);font-weight:900;font-size:15px;padding:2px 14px;border-radius:99px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .tx{font-size:16px;font-weight:700;color:#222;line-height:1.6} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4{grid-template-columns:1fr;gap:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 li{flex-direction:row;text-align:left;gap:12px;padding:12px 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .ic{width:42px;height:42px;flex:none} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .ic svg{width:22px;height:22px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .lb{margin:0;flex:none;font-size:13px;padding:2px 10px;min-width:72px;text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .tx{font-size:14px;line-height:1.5} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .lb{min-width:0;width:68px;padding:2px 0} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 li{gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-pts4 .tx span{display:inline-block} /* ③ お悩み（Q）→ 解決（A）カード */ :is(#capx,#capx2,#capx3,#capx4) .capx-qa{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa li{background:#fff;border:1px solid #e3e6e6;border-radius:12px;overflow:hidden;display:flex;flex-direction:column} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q{position:relative;margin:0;background:#f3f4f4;padding:14px 18px;font-size:16px;font-weight:700;color:#555;display:flex;align-items:center;gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q::after{content:"";position:absolute;left:18px;bottom:-11px;border:11px solid transparent;border-bottom:0;border-top-color:#f3f4f4} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .lb{flex:none;background:#fff;color:#888;border:1px solid #d6d9d9;font-size:12px;font-weight:700;padding:1px 10px;border-radius:99px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .a{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;padding:22px 18px 20px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa h3{font-size:18px;font-weight:900;color:var(--teal-d);line-height:1.45;margin:2px 0 6px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .tx{margin:0;font-size:14px;line-height:1.8;color:#555} :is(#capx,#capx2,#capx3,#capx4) .capx-qa{grid-template-columns:1fr;gap:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q{font-size:14.5px;padding:12px 14px;gap:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q::after{left:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .lb{font-size:11px;padding:1px 8px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .a{grid-template-columns:42px 1fr;gap:12px;padding:18px 14px 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa h3{font-size:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .tx{font-size:13px;line-height:1.75} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q::after{left:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .a{display:block;padding:20px 20px 20px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .a h3{margin-top:0} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q{font-size:15px;line-height:1.45;padding:12px 14px;gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q .qt{flex:1;min-width:0;font-size:15px;line-height:1.45} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q::after{left:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .a{padding:16px 16px 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .tx+.tx{margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .nt{margin:6px 0 0;font-size:11.5px;color:#888;line-height:1.6} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .kome{font-size:.65em;vertical-align:super;line-height:0;margin-left:1px;color:#888} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .nt{font-size:11px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .nt{font-size:10.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa h3 span{display:inline-block} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-intro{font-size:13px;line-height:1.85;color:#555} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-note{text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-more{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:5px 5px 5px 18px;border:2px solid #fff;border-radius:999px;background:#24bbb7;color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em;text-decoration:none;box-shadow:0 3px 12px rgba(0,0,0,.2);box-sizing:border-box} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-more svg{width:28px;height:28px;padding:6px;border-radius:50%;background:#fff;color:#24bbb7;box-sizing:border-box} #capx-select{scroll-margin-top:64px} /* FVバランス調整 */ :is(#capx,#capx2,#capx3,#capx4) .capx-fv-main{min-height:0} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-text{padding:28px 16px 86px 24px} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-points{margin-top:22px;margin-left:-12px} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-points li{margin-bottom:9px;font-size:14px;padding:0 6px 0 10px} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-points li:last-child{margin-bottom:0} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-more{bottom:20px} /* 加工方法 2×2 */ :is(#capx,#capx2,#capx3,#capx4) .capx-grid3.capx-m4{grid-template-columns:repeat(2,1fr);gap:18px 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-m4 .img{aspect-ratio:1/1} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 .tag{top:-32px;left:8px;font-size:10.5px;padding:2px 8px} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 h3{font-size:15px} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 .price{font-size:13px;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 .use{font-size:12.5px;line-height:1.55} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 .price,:is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 .use{flex:none} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 .use{text-wrap:pretty} /* 加工方法〜比較を同じ背景で連続表示 */ :is(#capx,#capx2,#capx3,#capx4) .capx-sec-method{background:#eaf6f5} :is(#capx,#capx2,#capx3,#capx4) .capx-sec[aria-labelledby="capx-s4b"]{padding-bottom:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-sec-method .capx-table-wrap{background:#fff} :is(#capx,#capx2,#capx3,#capx4) .capx-sec[aria-labelledby="capx-s5"]{padding-top:28px} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th:nth-child(1){width:23%} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th:nth-child(2),:is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th:nth-child(3){width:20.5%} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th:nth-child(4),:is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th:nth-child(5){width:18.5%} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th:nth-child(4){width:17.5%} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl tbody tr:last-child td{font-size:11px} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl tbody tr:last-child > th, :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl tbody tr:last-child > td{padding-bottom:0;border-bottom:none} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-note{margin-top:0} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl th,:is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl td{padding-left:2px;padding-right:2px} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th{font-size:11px} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl tbody th{font-size:10px;letter-spacing:-.02em;padding-left:5px;padding-right:1px} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl td.rec{font-size:10.5px;font-weight:700;color:#333;line-height:1.45} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl tr.has-thr td{border-bottom:none;padding-bottom:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl tr.thr-row td{position:relative;padding:0 3px 8px;border-top:none;vertical-align:top} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .thr{display:block;border-top:none;padding-top:0;margin:0 6px;font-size:10px;line-height:1.4;color:var(--teal-d);font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl td.area{font-size:11px;line-height:1.5} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl sup{font-size:8px;color:var(--teal-d);margin-left:1px} :is(#capx,#capx2,#capx3,#capx4) .capx-thr-note{color:var(--teal-d);font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .thr-box{display:flex;background:#eaf6f5;border-radius:6px;padding:5px 3px;font-size:10.5px;line-height:1.45;color:var(--teal-d);font-weight:700;letter-spacing:0} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .thr-box .nw{white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .thr-box b{display:block;font-size:9px;color:#666;font-weight:700} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .thr-box.ng{background:#f2f2f2;color:#888} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .thr-box{min-height:0;flex-direction:column;justify-content:center;box-sizing:border-box} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .thr-box.ng{position:absolute;top:0;right:3px;bottom:8px;left:3px;height:auto} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .thr-box small.cond{display:block;font-size:9px;color:var(--teal-d);font-weight:500;margin-top:1px;line-height:1.4} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-lead{margin-bottom:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-sub{text-align:center;font-size:13px;color:#555;line-height:1.7;margin:0 0 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-sub{margin-bottom:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-item{text-align:center;margin:0 0 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-item{font-size:13px;font-weight:700;color:var(--teal-d)} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-item a{color:inherit;text-decoration:underline} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .yen .pre{display:block;font-size:11px;font-weight:700;color:#555;margin-bottom:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-method .price .pre{display:inline;margin:0 2px 0 0;font-size:11px;font-weight:700;color:#666} :is(#capx,#capx2,#capx3,#capx4) .capx-method .price .v{white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-method .price .vs{display:inline-flex;flex-direction:column;vertical-align:top} :is(#capx,#capx2,#capx3,#capx4) .capx-method .price .kome{font-size:.65em;vertical-align:.35em;margin-left:1px} :is(#capx,#capx2,#capx3,#capx4) .capx-method p.sub{display:block;font-size:11.5px;font-weight:700;color:var(--teal-d);line-height:1.5;margin:2px 0 8px;flex:none} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .capx-method p.sub{display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-method p.pnote{display:block;flex:none;font-size:11px;line-height:1.5;color:#777;margin:2px 0 4px} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3 .capx-method p.pnote{display:block;font-size:10px;color:#777;margin:2px 0 4px} @media (max-width:350px){ :is(#capx,#capx2,#capx3,#capx4) .capx-method .price .v{white-space:normal} } :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow{scroll-snap-align:start} /* サイズカード：面積の右横に料金、下に刺繍込み料金 */ :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .capx-bal{margin:8px 0 0;padding-top:8px;border-top:1px dashed #ddd;font-size:12px;font-weight:700;color:#1d2a44;line-height:1.4;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-bal .lb{display:inline;margin:0 4px 0 0;font-size:11px;color:#555} :is(#capx,#capx2,#capx3,#capx4) .capx-bal b{font-size:20px;font-weight:900;color:var(--price);font-family:Roboto,"Noto Sans JP",sans-serif} :is(#capx,#capx2,#capx3,#capx4) .capx-bal small{font-size:11px;font-weight:500;color:#555} :is(#capx,#capx2,#capx3,#capx4) .capx-bal .kome{font-size:9px;vertical-align:.6em;margin-left:1px;color:#777;font-weight:500} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .ar .lbl{display:block;font-size:10.5px;font-weight:700;color:#555;margin-bottom:2px;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szlist{grid-auto-columns:84%;padding:2px 16px 4px;scroll-padding:0 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .tx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding-left:8px;padding-right:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar{grid-column:1;margin:0;padding-right:6px;white-space:normal} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar small{display:block;margin:2px 0 0;font-size:9.5px;white-space:nowrap;letter-spacing:-.02em} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen{grid-column:2;margin:0;padding-left:8px;border-left:1px solid #e5e5e5;line-height:1.25;white-space:nowrap;font-size:12px;letter-spacing:-.01em} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen .pre{display:block;margin:0 0 2px;font-size:10.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen b{font-size:22px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen small{display:inline;font-size:9.5px;margin:0} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .capx-bal{grid-column:1/-1} @media (max-width:350px){ :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .tx{padding-left:6px;padding-right:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar b{font-size:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar small{font-size:8.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen{font-size:10.5px;padding-left:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen b{font-size:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen small{font-size:8.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-bal{font-size:11px} :is(#capx,#capx2,#capx3,#capx4) .capx-bal b{font-size:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-bal .lb{font-size:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-szrow .ar .lbl{font-size:9.5px} } :is(#capx,#capx2,#capx3,#capx4) .capx-h2{text-align:center} /* 見出しをお悩みセクションと同じスタイルに統一 */ :is(#capx,#capx2,#capx3,#capx4) .capx-head{text-align:left;border-bottom:2px solid var(--teal);padding-bottom:10px;margin-bottom:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-h2{display:block;text-align:left;font-size:19px;font-weight:900;color:#333;line-height:1.4;letter-spacing:0} :is(#capx,#capx2,#capx3,#capx4) .capx-h2::after{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-lead{text-align:left;margin-left:0;margin-right:0;max-width:none} :is(#capx,#capx2,#capx3,#capx4) .capx-head + .capx-lead{display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-grid3.capx-m4 .img{aspect-ratio:1/1} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-lead{text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-lead span{border-bottom:0;padding:0} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-sub,:is(#capx,#capx2,#capx3,#capx4) .capx-szflow-item{text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-flowtitle{text-align:left} /* 翌々日出荷の流れ：工程写真（仮枠）。SPは2×2 */ :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li .ph{display:block;aspect-ratio:4/3;width:100%;margin:0 0 8px;border-radius:8px;overflow:hidden;background:#eef0f0} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li .ph img{width:100%;height:100%;object-fit:cover;display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 ol{grid-template-columns:repeat(2,1fr);gap:14px 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li{display:flex;flex-direction:column;align-items:stretch;padding:8px 8px 12px;min-height:0} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li .n{left:12px;top:12px;transform:none;width:24px;height:24px;font-size:12px;z-index:1} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li b,:is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li span:not(.n){text-align:left} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li b{font-size:12.5px;line-height:1.4;letter-spacing:0} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li span:not(.n){margin-top:4px;font-size:11px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li::after{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li:nth-child(odd)::after{display:block;content:"";position:absolute;left:auto;right:-14px;top:50%;bottom:auto;transform:translateY(-50%);border:6px solid transparent;border-left:8px solid var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li:nth-child(2)::after{display:block;content:"";position:absolute;left:0;right:auto;top:auto;bottom:-16px;z-index:1;transform:translateX(-50%);border:6px solid transparent;border-top:8px solid var(--teal)} @media (max-width:374px){:is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li b{font-size:12px}} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shapes{grid-template-columns:repeat(4,1fr)} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape{padding:6px 3px 8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .nm{font-size:10.5px;line-height:1.35} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .go{width:24px;height:24px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .go{margin-top:auto} :is(#capx,#capx2,#capx3,#capx4) .capx-feature .capx-wrap{padding-left:0;padding-right:0} :is(#capx,#capx2,#capx3,#capx4) .capx-feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-feat a{display:block;text-decoration:none;color:#222} :is(#capx,#capx2,#capx3,#capx4) .capx-feat .pic{position:relative;display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#ececec} :is(#capx,#capx2,#capx3,#capx4) .capx-feat .pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-feat b{display:block;font-size:13px;font-weight:900;color:#333;margin-top:8px;line-height:1.45} :is(#capx,#capx2,#capx3,#capx4) .capx-feat .d{display:block;font-size:10.5px;font-weight:500;color:#333;line-height:1.6;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-more{text-align:right;margin:12px 0 0;font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-more a{color:var(--teal-d);font-weight:700;text-decoration:none} :is(#capx,#capx2,#capx3,#capx4) .capx-infobtn{margin:0} :is(#capx,#capx2,#capx3,#capx4) .capx-infobtn a{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border:2px solid var(--teal);border-radius:999px;background:#fff;color:var(--teal-d);font-weight:700;text-decoration:none} :is(#capx,#capx2,#capx3,#capx4) .capx-infobtn a svg{width:18px;height:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-infobtn a:hover{background:var(--teal-l)} :is(#capx,#capx2,#capx3,#capx4) .capx-infobtn{text-align:center} :is(#capx,#capx2,#capx3,#capx4) .capx-infobtn a{width:100%;justify-content:center;box-sizing:border-box} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape{padding-bottom:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .nm{margin-bottom:0} /* おすすめキャップ：説明文入りの横型カード。4件目以降は「もっと見る」 */ :is(#capx,#capx2,#capx3,#capx4) .capx-sel-picks:not(.open) .capx-sel-extra{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-morewrap{text-align:center;margin:12px 0 4px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-more{font-family:inherit;display:inline-flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--teal);color:var(--teal-d);font-weight:700;font-size:14px;border-radius:999px;padding:9px 26px;cursor:pointer} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-more svg{width:16px;height:16px;transition:transform .2s} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-more[aria-expanded="true"] svg{transform:rotate(180deg)} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-picks{grid-template-columns:1fr;gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick{display:grid;grid-template-columns:38% 1fr;column-gap:12px;align-items:start;text-align:left;padding:10px 12px 12px 10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .pic{grid-column:1;grid-row:1/span 5} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .pic img{aspect-ratio:3/4} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .nm,:is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .mt,:is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen,:is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .desc{grid-column:2} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .nm{font-size:clamp(12px,3.5vw,15px);letter-spacing:0;margin-top:2px;padding-right:0;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .mt{font-size:10.5px;min-height:0;padding-right:0} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen{font-size:11px;margin:4px 0 0} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen b{font-size:18px;margin-left:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen b::before{content:none} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .desc{display:block;grid-column:2;font-size:11.5px;line-height:1.6;color:#555;text-align:left;margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .go{position:absolute;right:10px;top:10px;width:26px;height:26px;margin:0} /* 形から選ぶ：説明つき3列 */ :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shapes{grid-template-columns:repeat(3,1fr);gap:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape{padding:6px 6px 10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .nm{font-size:12px;min-height:2.7em;margin-top:6px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;align-content:center} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .ds{display:block;font-size:10.5px;line-height:1.55;color:#666;margin-top:4px;text-align:left;width:100%} /* 画面下CTAは絞り込みボタンより手前 */ :is(#capx,#capx2,#capx3,#capx4) .capx-fixcta{z-index:1100} #capx2,#capx3,#capx4{padding-bottom:0;max-width:none;margin-left:0;margin-right:0} /* 商品一覧下のFAQはページ中央に置く */ #capx4{margin-left:auto;margin-right:auto;width:100%} #capx-select,#capx-price,#productsBox,#capx-info{scroll-margin-top:100px} /* キャップ担当のおすすめ（モバイルは cap_renewal_sp に合わせる） */ :is(#capx,#capx2,#capx3,#capx4) .capx-head:has(> #capx-s4),:is(#capx,#capx2,#capx3,#capx4) .capx-head:has(> #capx-s8){container-type:inline-size} :is(#capx,#capx2,#capx3,#capx4) #capx-s4{white-space:nowrap;font-size:min(19px,calc(100cqw / 29))} :is(#capx,#capx2,#capx3,#capx4) #capx-s8{white-space:nowrap;font-size:min(19px,calc(100cqw / 23))} :is(#capx,#capx2,#capx3,#capx4) .capx-head + .capx-staff{margin:18px 0 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .who{display:grid;grid-template-columns:60px auto minmax(0,1fr);grid-template-areas:"photo name dept" "duty duty duty";align-items:center;column-gap:8px;row-gap:8px;padding-left:0;container-type:inline-size} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .photo{grid-area:photo;width:60px;height:60px;border-radius:50%;overflow:hidden;background:#e3eded;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.08)} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .photo img{width:100%;height:100%;object-fit:cover;display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .prof,:is(#capx,#capx2,#capx3,#capx4) .capx-staff .info{display:contents} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .prof p{margin:0} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .nm{grid-area:name;font-size:16px;font-weight:700;color:#222;line-height:1.3;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .dept{grid-area:dept;min-width:0;border-left:2px solid #cfe3e2;padding:1px 0 1px 8px;font-size:10px;color:var(--sub);line-height:1.5;letter-spacing:0} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .duty{grid-area:duty;margin-top:2px;color:#444;line-height:1.55;font-size:min(10.5px,calc(100cqi / 29.5))} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .duty span{display:block;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble{position:relative;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 16px 18px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble::before,:is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble::after{content:"";position:absolute;width:0;height:0;border-style:solid} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble::before{top:-12px;left:19px;border-width:0 11px 12px 11px;border-color:transparent transparent var(--line) transparent} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble::after{top:-10px;left:20px;border-width:0 10px 11px 10px;border-color:transparent transparent #fff transparent} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble{container-type:inline-size} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .ttl{font-size:min(16px,calc(100cqw / 24.6));font-weight:700;color:var(--teal-d);line-height:1.55;margin:0 0 10px;padding-bottom:10px;border-bottom:1px dashed #cfe3e2;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble p{font-size:13px;color:#333;line-height:1.9;margin:0 0 8px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble p:last-child{margin-bottom:0} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble strong{color:#222;background:linear-gradient(transparent 62%,var(--teal-l) 62%)} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .key{margin:16px 0 4px;padding:12px 8px;background:var(--teal-l);border-radius:8px;font-size:clamp(11px,3.05vw,14px);font-weight:700;color:#222;text-align:left;line-height:1.6;word-break:normal;overflow-wrap:normal;white-space:nowrap} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .pt{clear:both;font-size:14px;font-weight:700;color:var(--teal-d);line-height:1.6;margin:18px 0 6px;padding-left:10px;border-left:3px solid var(--teal);word-break:keep-all;overflow-wrap:anywhere} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .pt .tag{display:block;width:max-content;margin:0 0 4px;background:var(--teal);color:#fff;font-size:10.5px;font-weight:700;padding:1px 9px;border-radius:99px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .kome{font-size:.6em;font-weight:400;vertical-align:.55em;margin:0 1px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .note{font-size:11px;color:var(--sub);line-height:1.7;margin-top:-2px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff figure{margin:0} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .fig,:is(#capx,#capx2,#capx3,#capx4) .capx-staff .fig.fig-slide{float:none;width:85%;max-width:none;margin:14px auto 18px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl{position:relative} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:8px;aspect-ratio:1/1;background:#eef3f3;outline:none} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-track::-webkit-scrollbar{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-track:focus-visible{box-shadow:0 0 0 3px var(--teal-l),0 0 0 4px var(--teal)} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-item{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-item img,:is(#capx,#capx2,#capx3,#capx4) .capx-staff .fig-img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-btn{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--teal-d);box-shadow:0 2px 8px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-btn svg{width:14px;height:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-prev{left:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-next{right:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-btn:disabled{opacity:0;pointer-events:none} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-dots{display:flex;justify-content:center;gap:8px;margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#cfdedd;cursor:pointer} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-dots button[aria-current="true"]{background:var(--teal);width:20px;border-radius:99px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .fig-img{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#eef3f3} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .rest{display:flex;flex-direction:column} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .rest > .fig{order:1;align-self:center} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .rest > .note ~ *{order:2} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .rest > .pt{margin-top:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .rest::after{content:"";display:none;clear:both} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .rest p:last-child{margin-bottom:0} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble.is-collapsed .rest{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble.is-collapsed > p:last-of-type{position:relative;max-height:5.8em;overflow:hidden} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble.is-collapsed > p:last-of-type::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;background:linear-gradient(rgba(255,255,255,0),#fff)} :is(#capx,#capx2,#capx3,#capx4) .capx-staff-tg{display:none;align-items:center;justify-content:center;gap:6px;clear:both;margin:14px auto 0;min-width:70%;padding:10px 18px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--teal-d);background:#fff;border:1.5px solid var(--teal);border-radius:99px;cursor:pointer} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble.is-collapsed .capx-staff-tg,:is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .rest ~ .capx-staff-tg[aria-expanded="true"]{display:flex} :is(#capx,#capx2,#capx3,#capx4) .capx-staff-tg svg{width:16px;height:16px;transition:transform .2s} :is(#capx,#capx2,#capx3,#capx4) .capx-staff-tg[aria-expanded="true"] svg{transform:rotate(180deg)} /* ===================== PC（768px以上） ===================== */ @media (min-width: 768px){ :is(#capx,#capx2,#capx3,#capx4){ max-width:1200px; font-size:14px; padding-bottom:0; } :is(#capx,#capx2,#capx3,#capx4) .capx-wrap{padding:0 30px} :is(#capx,#capx2,#capx3,#capx4) .capx-sec{padding:64px 0} :is(#capx,#capx2,#capx3,#capx4) .capx-head{margin-bottom:24px;padding-bottom:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-h2{font-size:22px;font-weight:900} :is(#capx,#capx2,#capx3,#capx4) #capx-s4,:is(#capx,#capx2,#capx3,#capx4) #capx-s8{white-space:normal;font-size:22px} :is(#capx,#capx2,#capx3,#capx4) .capx-lead{font-size:13px;margin-bottom:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-solhead h2{font-size:22px;font-weight:900} #capx{padding-bottom:64px} :is(#capx,#capx2,#capx3,#capx4) .capx-fixcta{justify-content:flex-end;padding:8px 24px 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-fixcta a{width:auto;min-width:220px;max-width:280px;min-height:40px;padding:8px 28px;font-size:14px} /* FV */ :is(#capx,#capx2,#capx3,#capx4) .capx-fv-main{min-height:440px} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-text{padding:52px 40px 108px 48px;max-width:720px} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-catch{font-size:40px;line-height:1.28} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-points{margin-top:20px;margin-left:0} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-points li{font-size:18px;font-weight:900;margin-bottom:8px;padding:0 6px 0 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-more{right:24px;bottom:24px;font-size:15px} :is(#capx,#capx2,#capx3,#capx4) .capx-fv-intro{font-size:13px;line-height:1.8;padding:22px 30px 0} :is(#capx,#capx2,#capx3,#capx4) .capx-delivery{max-width:720px;margin:0 auto;padding-top:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship{padding:16px 18px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item b{font-size:32px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item .s{font-size:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-ship-item .k{font-size:13px} /* お悩み */ :is(#capx,#capx2,#capx3,#capx4) .capx-qa{grid-template-columns:1fr 1fr;gap:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q{font-size:15px;line-height:1.45;padding:14px 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q .qt{font-size:15px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .q::after{left:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa h3{font-size:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .tx{font-size:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-qa .a{padding:22px 18px 18px} /* キャップ担当のおすすめ */ :is(#capx,#capx2,#capx3,#capx4) .capx-head + .capx-staff{margin-top:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .who{display:flex;align-items:center;gap:24px;padding-left:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .photo{width:130px;height:130px;border-width:4px;box-shadow:0 4px 14px rgba(0,0,0,.08)} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .prof{display:flex;align-items:center;gap:26px;min-width:0;flex:1} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .nm{font-size:22px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .info{display:block;flex:1;min-width:0;border-left:2px solid #cfe3e2;padding:2px 0 2px 26px;container-type:inline-size} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .dept{border-left:0;padding:0;font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .duty{font-size:min(14px,calc(100cqi / 29));line-height:1.8;margin-top:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble{margin-top:18px;border-radius:14px;padding:28px 34px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble::before{left:62px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble::after{left:63px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .ttl{font-size:20px;line-height:1.5;margin-bottom:14px;padding-bottom:12px;white-space:normal} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble p{font-size:14.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .key{margin:20px 0 6px;padding:14px 18px;border-radius:10px;font-size:17px;text-align:center;white-space:normal} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .pt{font-size:16px;margin:22px 0 8px;padding-left:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .pt .tag{display:inline-block;width:auto;margin:0 10px 0 0;font-size:12px;padding:2px 10px;vertical-align:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .note{font-size:12px;margin-top:-4px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .rest{display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .rest > .fig{order:0;align-self:auto} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .bubble .rest > .pt{margin-top:22px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .rest::after{display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .fig,:is(#capx,#capx2,#capx3,#capx4) .capx-staff .fig.fig-slide{float:right;width:300px;margin:4px 0 12px 24px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-track{border-radius:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-btn{width:34px;height:34px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .sl-btn svg{width:18px;height:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff .fig-img{border-radius:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-staff-tg{margin-top:18px;min-width:200px;padding:10px 24px;font-size:14px} /* おすすめな理由：4列 */ :is(#capx,#capx2,#capx3,#capx4) .capx-reasons{grid-template-columns:repeat(4,1fr);gap:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-reason h3{font-size:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-reason .catch, :is(#capx,#capx2,#capx3,#capx4) .capx-reason p:not(.catch){font-size:12px} /* 加工方法：4列 */ :is(#capx,#capx2,#capx3,#capx4) .capx-grid3.capx-m4{grid-template-columns:repeat(4,1fr);gap:22px 14px} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 h3{font-size:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 .price{font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-methods.capx-m4 .use{font-size:12px;line-height:1.6} /* 比較表 */ :is(#capx,#capx2,#capx3,#capx4) .capx-tbl{font-size:12px} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th{font-size:13px} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl tbody th{font-size:13px;letter-spacing:0} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl th, :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl td{padding:12px 6px} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl tbody tr:last-child td{font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .thr-box{font-size:12px;min-height:0} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl tr.has-thr td{border-bottom:none;padding-bottom:6px} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl tr.thr-row td{padding:0 4px 10px;border-top:none} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl .thr-box.ng{top:0;right:4px;bottom:10px;left:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-tbl .m{font-size:20px} /* 料金の3ステップ：横並び */ :is(#capx,#capx2,#capx3,#capx4) .capx-szflow{grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:28px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow li{display:block;text-align:left;padding:20px 16px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow .no{display:inline-block;font-size:12px;vertical-align:middle} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow b{display:inline;font-size:15px;margin:0 0 0 8px;vertical-align:middle} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow .d{font-size:12px;text-align:left;margin-top:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow li+li::before{ left:-22px;top:50%;transform:translateY(-50%); border:8px solid transparent;border-left:12px solid var(--teal) } :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-lead span{font-size:15px} :is(#capx,#capx2,#capx3,#capx4) .capx-szflow-sub{font-size:13px} /* 面積カード：3列固定（スライド解除） */ :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szlist{ display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:row; gap:16px;overflow:visible;margin:0;padding:0;scroll-padding:0 } :is(#capx,#capx2,#capx3,#capx4) .capx-sznav, :is(#capx,#capx2,#capx3,#capx4) .capx-szdots{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .nm{font-size:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .nm span{font-size:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar{font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar b{font-size:24px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .ar .lbl{font-size:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen{font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .yen b{font-size:24px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .capx-bal{font-size:13px} :is(#capx,#capx2,#capx3,#capx4) .capx-szslider .capx-szrow .capx-bal b{font-size:22px} /* 出荷の流れ：4列（写真付きカードの余白は維持） */ :is(#capx,#capx2,#capx3,#capx4) .capx-flowtitle{font-size:15px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow ol{grid-template-columns:repeat(4,1fr);gap:22px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow li{padding:16px 14px 16px 52px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow4 li{padding:8px 8px 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow li:not(:last-child)::after{ display:block;left:auto;right:-18px;bottom:auto;top:50%;transform:translateY(-50%); border:7px solid transparent;border-left:9px solid var(--teal) } :is(#capx,#capx2,#capx3,#capx4) .capx-flow b{font-size:13.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-flow span:not(.n){font-size:12px} /* 商品の選び方：刺繍おすすめは横一列、その下に形から選ぶ */ :is(#capx,#capx2,#capx3,#capx4) .capx-sel{grid-template-columns:1fr;gap:20px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-panel{padding:22px 16px 18px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl h3{font-size:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-ttl p{font-size:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-picks{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-picks:not(.open) .capx-sel-extra{display:flex} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-panel.emb .capx-sel-morewrap{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick{display:flex;flex-direction:column;align-items:stretch;text-align:left;height:100%;padding:8px 8px 12px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .pic{width:100%} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .nm{font-size:12.5px;white-space:nowrap;letter-spacing:-.02em;margin-top:8px;padding-right:0} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .mt{font-size:10px;padding-right:0} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen{font-size:11px;margin:4px 0 0} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen b{font-size:16px;margin-left:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .yen b::before{content:none} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .desc{font-size:11px;line-height:1.55;margin-top:6px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-pick .go{top:6px;right:6px;width:22px;height:22px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shapes{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:1000px;margin-left:auto;margin-right:auto} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape{padding:4px 4px 8px;border-radius:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .pic{border-radius:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .nm{font-size:12px;min-height:2.4em;margin-top:4px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-shape .ds{font-size:10.5px;line-height:1.45;margin-top:2px} :is(#capx,#capx2,#capx3,#capx4) .capx-sel-all a{width:min(100%,560px);font-size:16px} /* アイデア：タブは件数に合わせて均等割り。商品は3件ずつ横スクロール */ :is(#capx,#capx2,#capx3,#capx4) .capx-idtabs{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea-desc-pc{display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-idea-desc-sp{display:none} :is(#capx,#capx2,#capx3,#capx4) .capx-idtabs button{font-size:13px;padding:12px 8px} :is(#capx,#capx2,#capx3,#capx4) .capx-idtrack{ display:grid;grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:calc((100% - 32px) / 3); gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; margin:0;padding:0 0 10px;scrollbar-width:thin } :is(#capx,#capx2,#capx3,#capx4) .capx-idtrack::-webkit-scrollbar{display:block;height:8px} :is(#capx,#capx2,#capx3,#capx4) .capx-idtrack .capx-idea{height:100%} :is(#capx,#capx2,#capx3,#capx4) .capx-idtrack .capx-idea .more{margin-top:12px} :is(#capx,#capx2,#capx3,#capx4) .capx-iddots{display:flex} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic{max-width:140px;margin-top:18px} :is(#capx,#capx2,#capx3,#capx4) .capx-idnav{top:189px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .nm{font-size:16px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .desc{font-size:11.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .info{padding:10px 14px 18px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .more{font-size:11.5px;padding:7px 16px} /* FAQ：質問は1列 */ :is(#capx,#capx2,#capx3,#capx4) .capx-faq-grid{display:block} :is(#capx,#capx2,#capx3,#capx4) .capx-faq summary{font-size:14px} :is(#capx,#capx2,#capx3,#capx4) .capx-faq .a{font-size:14px} /* 特集：バッグの特集カードと同じ4列・同じカード幅 */ :is(#capx,#capx2,#capx3,#capx4) .capx-feat{grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;max-width:none} :is(#capx,#capx2,#capx3,#capx4) .capx-feat b{font-size:13.5px} :is(#capx,#capx2,#capx3,#capx4) .capx-feat .d{font-size:11px} :is(#capx,#capx2,#capx3,#capx4) .capx-infobtn a{width:auto;min-width:280px} } @media (min-width: 1001px){ :is(#capx,#capx2,#capx3,#capx4) .capx-idea .pic{max-width:190px;margin-top:24px} :is(#capx,#capx2,#capx3,#capx4) .capx-idnav{top:249px} :is(#capx,#capx2,#capx3,#capx4) .capx-idea .info{padding:14px 20px 22px} } /* 加工方法を比較：見出し＝色付きの加工名ラベル＋写真 */ :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th{vertical-align:middle;background:#fff;color:#333;padding:0 0 4px;border-left:2px solid #fff;border-right:2px solid #fff;border-bottom:1px solid var(--line)} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th.k{color:#1d2a44;padding:0 4px;width:23%} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th .nm{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;box-sizing:border-box;height:3.4em;min-height:0;line-height:1.3;color:#fff;font-weight:700;padding:5px 1px} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th.c1 .nm{background:#24bbb7} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th.c2 .nm{background:#3d9be9} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th.c3 .nm{background:#f39a3d} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th.c4 .nm{background:#ef7c9b} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th .ph{display:block;margin:0} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th .ph img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0 0 6px 6px;background:#f4f6f8} :is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th.c1,:is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th.c2,:is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th.c3,:is(#capx,#capx2,#capx3,#capx4) [aria-labelledby="capx-s5"] .capx-tbl thead th.c4{width:19.25%;vertical-align:top} /* 一覧2ページ目以降：固定CTA用の下余白は不要。タイトル直下の案内文は間隔を詰める */ #capx.capx-pager{padding-bottom:0} #capx.capx-pager > .capx-sec{padding-top:0} #capx.capx-pager .capx-fv-intro{padding-top:8px} @media (min-width: 768px){ #capx.capx-pager{padding-bottom:0} #capx.capx-pager > .capx-sec{padding-top:4px} #capx.capx-pager .capx-fv-intro{padding-top:8px} } /* 作製事例・最近チェックした商品：capx-head / capx-h2 と同一 */ #productsBox .capx-head{text-align:left;border-bottom:2px solid #24bbb7;padding:0 0 10px;margin:0 0 20px} #productsBox .capx-head > h2.capx-h2{display:block;box-sizing:border-box;text-align:left;margin:0 !important;padding:0 !important;border:none !important;background:none !important;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;font-size:19px !important;font-weight:900 !important;color:#333 !important;line-height:1.4 !important;letter-spacing:0 !important} #productsBox .capx-head > h2.capx-h2::before,#productsBox .capx-head > h2.capx-h2::after{content:none !important;display:none !important} @media (min-width: 768px){ #productsBox .capx-head{margin-bottom:24px;padding-bottom:12px} #productsBox .capx-head > h2.capx-h2{font-size:22px !important;font-weight:900 !important} } /* 絞り込みが丸ボタンになる幅：商品件数からFAQ見出しの直前まで */ @media (max-width: 1800px){ #filterToggleBtn.cap-filter-range{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility 0s linear .25s; } #filterToggleBtn.cap-filter-range.is-on{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease, visibility 0s linear 0s; } }