:root{ --ink:#1b2342; --sub:#8b91a6; --line:#ecebf2; --paper:#fff; --cream:#faf7f2;
        --blue:#5fbfd6; --blue-soft:#e9f7fb; --pink:#ef9cb5; --pink-soft:#fdeef3; --yellow:#f6c84c; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif; line-height:1.8; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
p,.sd-combo,.sd-coord-chip .cl{ word-break:auto-phrase; line-break:strict; overflow-wrap:break-word; }
/* 見出しは文節(、。)でのみ折る=どの端末/幅でも「に。」等の独り残りを防ぐ(iPhone Safari は auto-phrase 非対応のため keep-all+<wbr> で制御) */
h1,h2,h3,.sd-coord-cta-h,.sd-coord-lead{ word-break:keep-all; line-break:strict; overflow-wrap:break-word; }
.sd-nb{ white-space:nowrap; }  /* この塊の中では絶対に折らない(文節を丸ごと改行) */
.smk-note{ background:#1b2342; color:#fff; text-align:center; font-size:12px; padding:9px 14px; letter-spacing:.03em; font-family:"Noto Sans JP"; }
.smk-note b{ color:#7fd8ea; }
.smk-wrap{ max-width:1120px; margin:0 auto; padding:0 20px 120px; }
.eng{ font-family:"Josefin Sans",sans-serif; }

/* HERO */
.sd-hero{ text-align:center; padding:104px 8px 40px; }
.sd-logo{ height:36px; width:auto; margin:0 auto 44px; }
.sd-hero h2{ font-size:clamp(25px,5vw,38px); font-weight:500; color:#3a4566; line-height:1.95; letter-spacing:.04em; margin:0; }
.sd-hero h2 .hl{ background:linear-gradient(transparent 60%, var(--blue-soft) 60%); padding:0 .12em; font-weight:700; }
.sd-hero h2 .pk{ color:var(--pink); font-weight:700; }
.sd-script{ font-family:"Parisienne",cursive; color:var(--blue); font-size:clamp(21px,3.6vw,31px); font-weight:400; display:block; margin-bottom:22px; }
.sd-hero p{ color:#7a8098; font-size:14.5px; line-height:2.1; margin:34px auto 0; max-width:520px; }
.sd-hero p + p{ margin-top:16px; }
.sd-dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin:50px auto 0; max-width:278px; }
.sd-dots i{ width:17px; height:17px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.05) inset; }
.sd-introfig{ max-width:440px; margin:46px auto 0; aspect-ratio:16/10; border:1px solid var(--line); border-radius:18px; background:#fbfbfd; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:#b3b8c8; }
.sd-introfig i{ font-size:26px; }
.sd-introfig span{ font-size:12px; letter-spacing:.14em; }
.sd-introfig img{ width:100%; height:100%; object-fit:cover; display:block; }

/* section heads */
.sd-sec{ text-align:center; margin:128px 0 44px; }
.sd-sec .lb{ font-family:"Josefin Sans"; letter-spacing:.34em; font-size:11.5px; color:var(--blue); font-weight:600; }
.sd-sec h2{ font-size:clamp(21px,3.4vw,28px); font-weight:700; color:#36405f; margin:14px 0 10px; letter-spacing:.03em; line-height:1.5; }
.sd-sec p{ color:var(--sub); font-size:13.5px; margin:0 auto; max-width:500px; line-height:1.9; }

/* builder */
.sd-simcard{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px 18px; }
.sd-builder{ display:grid; grid-template-columns:1fr; gap:18px; }
.sd-prev{ display:flex; flex-direction:column; align-items:center; }
.sd-mat{ width:100%; max-width:300px; position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:#eef0f4; box-shadow:0 12px 26px -14px rgba(27,35,66,.45); }
.sd-mat img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .18s; }
.sd-mat.is-loading img{ opacity:.55; }
.sd-mat-load{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--sub); font-size:13px; }
.sd-combo{ margin-top:12px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 18px; }
.sd-combo .cl{ font-size:10.5px; color:var(--sub); letter-spacing:.1em; }
.sd-combo .cv{ font-weight:700; font-size:15.5px; }
.sd-combo .x{ color:var(--pink); margin:0 7px; font-weight:700; }
.sd-step-h{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; margin:0 0 11px; }
.sd-step-n{ display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; background:var(--blue); color:#fff; font-family:"Josefin Sans"; font-size:12px; font-weight:700; }
.sd-step-h small{ font-weight:400; font-size:11.5px; color:var(--sub); }
.sd-step + .sd-step{ margin-top:16px; }
.sd-body{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sd-body button{ cursor:pointer; border:2px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; padding:0; transition:.15s; text-align:center; }
.sd-body button:hover{ border-color:var(--blue); }
.sd-body button.on{ border-color:var(--ink); box-shadow:0 5px 14px rgba(27,35,66,.1); }
.sd-body .sw{ height:44px; background-size:cover; background-position:center; background-repeat:no-repeat; }
.sd-body span{ display:block; font-size:12px; font-weight:700; padding:6px 4px; }
.sd-thread{ display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:12px 8px; justify-items:center; }
.sd-chip{ cursor:pointer; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; }
.sd-dot{ width:35px; height:35px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line); transition:.15s; position:relative; background-size:cover; background-position:center; background-repeat:no-repeat; }
.sd-chip:hover .sd-dot{ box-shadow:0 0 0 2px var(--blue); }
.sd-chip.on .sd-dot{ box-shadow:0 0 0 2.5px var(--ink); transform:scale(1.1); }
.sd-chip.on .sd-dot::after{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.sd-clbl{ display:none; }
.sd-chip.on .sd-clbl{ color:var(--ink); font-weight:700; }
.sd-bnote{ text-align:center; font-size:13px; line-height:1.75; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:22px 0 0; }
.sd-bnote i{ color:var(--blue); margin-right:6px; }
.sd-bnote b{ color:#2f9cb4; }
/* シミュレーター → 上部プルダウン 連動デモ（本番では実select検知で非表示） */
.sd-demo{ display:none; max-width:420px; margin:18px auto 0; border:1px solid var(--line); border-radius:16px; background:#fff; padding:15px 16px 17px; box-shadow:0 8px 26px rgba(31,42,79,.06); }
.sd-demo-h{ font-size:12px; color:var(--blue); font-weight:700; letter-spacing:.03em; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.sd-demo-h em{ color:#a8adc0; font-weight:500; font-style:normal; letter-spacing:0; }
.sd-demo-row{ display:grid; grid-template-columns:78px 1fr; align-items:center; gap:10px; margin-top:9px; }
.sd-demo-row > span{ font-size:12px; color:var(--sub); }
.sd-demo-sel{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:13px; color:#a7abbb; background:#fafafb; }
.sd-demo-sel.on{ color:var(--ink); border-color:#cfe6ee; background:#fff; font-weight:500; }
.sd-demo-sel i{ color:#c6cad8; font-size:10px; }
.sd-demo-sel.flash{ animation:sdflash .65s ease; }
@keyframes sdflash{ 0%{ background:#e7f4f8; border-color:var(--blue); } 100%{ background:#fff; } }

/* gallery */
.sd-gal{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.sd-gal figure{ margin:0; background:var(--cream); border-radius:16px; overflow:hidden; transition:.18s; }
.sd-gal figure:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(27,35,66,.1); }
.sd-gal img{ width:100%; }
.sd-gal figcaption{ text-align:center; font-size:12.5px; font-weight:700; padding:11px 6px 14px; }
.sd-gal .e{ color:var(--pink); margin:0 5px; }

/* total coordinate (実写) */
.sd-coord{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.sd-coord-media{ border-radius:20px; overflow:hidden; box-shadow:0 26px 50px -28px rgba(27,35,66,.5); }
.sd-coord-media img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.sd-coord-tx{ text-align:center; }  /* モバイルは他セクションと同じく中央寄せ(PCは下の@mediaで左寄せに戻す) */
.sd-coord-tx h3{ font-size:clamp(19px,3vw,25px); font-weight:700; color:#36405f; line-height:1.75; margin:0 0 20px; letter-spacing:.03em; }
.sd-coord-tx h3 em{ font-style:normal; color:var(--pink); }
.sd-coord-lead{ font-size:13.5px; line-height:1.95; color:#7a8098; margin:0 0 30px; }
/* トリオチップ=可変幅で常に1行(96px固定をやめ flex:1、ラベルは絶対配置で×を画像中央に揃える) */
.sd-coord-combo{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:10px; margin:0 auto 46px; max-width:430px; }
.sd-coord-chip{ position:relative; text-align:center; flex:1 1 0; min-width:0; max-width:128px; }
.sd-coord-chip .ci{ display:block; width:100%; height:auto; aspect-ratio:96/70; border-radius:11px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.sd-coord-chip .ci img{ width:100%; height:100%; object-fit:cover; }
.sd-coord-chip .cl{ position:absolute; left:50%; transform:translateX(-50%); top:100%; margin-top:9px; white-space:nowrap; font-size:12px; font-weight:700; line-height:1.4; }
.sd-coord-x{ flex:0 0 auto; font-family:"Josefin Sans"; font-size:22px; color:var(--blue); line-height:1; }
/* シート/ハンドルへの動線=正方形画像カード2列(クリック可) */
.sd-coord-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:440px; margin:0 auto; }
.sd-coord-card{ display:block; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:.2s; }
.sd-coord-card:hover{ box-shadow:0 14px 28px -10px rgba(27,35,66,.3); transform:translateY(-2px); }
.sd-coord-card .pic{ display:block; aspect-ratio:1/1; overflow:hidden; }
.sd-coord-card .pic img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s ease; }
.sd-coord-card:hover .pic img{ transform:scale(1.05); }
.sd-coord-card .lbl{ display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 8px; font-size:12.5px; font-weight:700; line-height:1.3; text-align:center; }
.sd-coord-card .lbl i{ color:var(--blue); font-size:10px; }
.sd-coord-banner{ margin:40px auto 0; border-radius:20px; overflow:hidden; box-shadow:0 26px 50px -28px rgba(27,35,66,.5); }
.sd-coord-banner img{ width:100%; height:auto; display:block; }
.sd-coord-cta{ margin-top:44px; display:flex; flex-direction:column; gap:26px; text-align:center; }
.sd-coord-cta-head{ text-align:center; margin-bottom:6px; }
.sd-coord-cta-h{ font-size:clamp(19px,3vw,25px); font-weight:700; color:#36405f; line-height:1.65; letter-spacing:.03em; margin:0 0 12px; }
.sd-coord-cta-h em{ font-style:normal; color:var(--pink); }
.sd-coord-cta-sub{ font-size:13.5px; color:var(--sub); line-height:1.95; margin:0 auto; max-width:480px; }
.sd-notes{ margin-top:104px; }
.sd-notes .sd-fit{ margin-top:0; }
.sd-close .fbtn{ margin-top:30px; }
.sd-hero .fbtn{ margin-top:56px; }
html{ scroll-behavior:smooth; }
@media(min-width:760px){ .smk-wrap{ padding-left:48px; padding-right:48px; } .sd-coord{ grid-template-columns:1fr 1fr; gap:50px; } .sd-coord-tx{ text-align:left; } .sd-coord-cta{ display:grid; grid-template-columns:330px 1fr; gap:50px; align-items:center; max-width:940px; margin:84px auto 0; } .sd-coord-cta-head{ text-align:left; margin-bottom:0; } .sd-coord-cta-sub{ margin:0; max-width:none; } .sd-coord-cards{ max-width:none; gap:18px; } }

/* 19 colors */
.sd-pal{ padding:0; }
.sd-pal img{ width:100%; max-width:560px; margin:0 auto; border-radius:14px; border:1px solid var(--line); }

/* quality (light & airy / floormatカテゴリー風) */
.sd-quality{ margin-top:128px; }
.sd-quality .sd-sec{ margin:0 0 50px; }
.sd-feat{ display:grid; grid-template-columns:1fr 1fr; gap:40px 22px; }
.sd-feat-c{ text-align:left; }
.sd-feat-img{ position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#eef1f5; }
.sd-feat-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sd-feat-img .ph{ position:absolute; top:8px; right:8px; font-size:9px; letter-spacing:.08em; color:#fff; background:rgba(27,35,66,.5); border-radius:5px; padding:2px 7px; }
.sd-feat-no{ font-family:"Josefin Sans",sans-serif; font-weight:600; font-size:19px; color:var(--blue); line-height:1; margin:13px 0 0; }
.sd-feat-c b{ display:block; font-size:14.5px; color:var(--ink); font-weight:700; letter-spacing:.02em; margin:5px 0 7px; line-height:1.5; }
.sd-feat-c p{ font-size:12.5px; color:var(--sub); margin:0; line-height:1.8; }

/* delivery / 納期 */
.sd-delivery{ max-width:520px; margin:34px auto 0; border:1px solid var(--line); border-radius:18px; padding:30px 26px 28px; text-align:center; }
.sd-delivery .dh{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.08em; }
.sd-delivery .dh i{ color:var(--blue); }
.sd-delivery .dlead{ font-size:15px; color:var(--ink); line-height:1.95; margin:16px 0 0; font-weight:500; }
.sd-delivery .dlead em{ font-style:normal; color:var(--blue); font-weight:700; font-size:1.18em; }
.sd-delivery .dsub{ font-size:12.5px; color:var(--sub); line-height:1.9; margin:13px 0 0; }
.sd-delivery .dsub b{ color:#2f9cb4; font-weight:700; }
.sd-delivery .dcaution{ font-size:11.5px; color:#9aa0b2; line-height:1.75; margin:18px 0 0; padding-top:15px; border-top:1px solid var(--line); }
.sd-delivery .dcaution i{ color:var(--pink); margin-right:5px; }

/* 選べるカラーパターン (生地3色) */
.sd-pat{ margin-top:120px; }
.sd-pat .sd-sec{ margin:0 0 40px; }
.sd-pat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:430px; margin:0 auto; }
.sd-pat-item{ text-align:center; }
.sd-pat-item img{ width:100%; aspect-ratio:1/1; border-radius:50%; object-fit:cover; border:1px solid var(--line); background:#eef0f4; display:block; }
.sd-pat-item .nm{ display:block; margin-top:13px; font-size:13px; color:var(--ink); font-weight:700; line-height:1.4; }
.sd-pat-item .nm small{ display:block; font-size:10.5px; color:var(--sub); font-weight:500; letter-spacing:.08em; margin-bottom:1px; }

/* グレード・適合確認 notice */
.sd-fit{ max-width:520px; margin:104px auto 0; border:1px solid var(--line); border-radius:18px; padding:28px 24px; background:#fafbfc; text-align:center; }
.sd-fit .fh{ display:flex; justify-content:center; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink); margin:0 0 16px; }
.sd-fit .fh i{ color:var(--pink); }
.sd-fit p{ font-size:12.5px; color:var(--sub); line-height:1.95; margin:0 0 10px; }
/* 共通ボタン(白地・水色枠ピル) */
.fbtn{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink); text-decoration:none; border:1px solid var(--blue); background:#fff; border-radius:999px; padding:13px 28px; transition:.2s; cursor:pointer; }
.fbtn i{ color:var(--blue); font-size:11px; }
.fbtn:hover{ background:#f3fbfd; }
.sd-fit a.fbtn{ margin-top:6px; }
/* simulator 確定 */
.sd-confirm{ text-align:center; margin-top:24px; }
.sd-confirm-note{ font-size:12px; color:var(--sub); line-height:1.7; margin:13px 0 0; }
.sd-confirm-note.done{ color:var(--blue); font-weight:600; }
.sd-confirm-note i{ margin-right:5px; }
.sd-demo-note{ font-size:10.5px; color:var(--sub); line-height:1.65; margin:15px 0 0; padding-top:13px; border-top:1px solid var(--line); }
.sd-finalize{ margin:22px 0 0; padding-top:22px; border-top:1px solid var(--line); }
.sd-finalize .sd-confirm{ margin-top:0; }
.sd-finalize .sd-demo{ border:none; background:none; box-shadow:none; max-width:440px; margin:18px auto 0; padding:18px 0 0; border-top:1px solid var(--line); }

/* closing */
.sd-close{ text-align:center; margin-top:104px; }
.sd-close img{ width:100%; border-radius:18px; margin-bottom:40px; }
.sd-close h2{ font-size:clamp(20px,3.4vw,27px); font-weight:700; color:#36405f; line-height:1.65; letter-spacing:.03em; margin:0 0 10px; }
.sd-close .pk{ color:var(--pink); }
.sd-close p{ color:var(--sub); font-size:13.5px; margin:0; }
.sd-close-back{ margin-top:22px; }
.sd-close-back a{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:13px 30px; transition:.2s; }
.sd-close-back a:hover{ border-color:var(--blue); background:#f3fbfd; }
.sd-close-back i{ font-size:12px; color:var(--blue); }

@media(min-width:760px){
  .sd-builder{ grid-template-columns:340px 1fr; align-items:start; gap:30px; }
  .sd-prev{ position:sticky; top:20px; }
  /* 確定エリア=PCはデモ枠(注文オプション)を横長(3項目を横並び)で左、確定ボタンを右に(本番でデモ枠非表示でもflexで中央) */
  .sd-finalize{ display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:36px; }
  .sd-finalize .sd-confirm{ order:2; flex:0 0 auto; margin:0; max-width:240px; }
  .sd-finalize .sd-demo{ order:1; flex:1 1 auto; max-width:680px; margin:0; border:1px solid var(--line); background:#fafbfc; border-radius:14px; padding:16px 20px 16px; }
  .sd-finalize .sd-demo-grid{ display:flex; gap:16px; align-items:flex-start; }
  .sd-finalize .sd-demo-row{ flex:1 1 0; min-width:0; margin-top:0; display:block; }
  .sd-finalize .sd-demo-row > span{ display:block; font-size:11px; margin-bottom:5px; }
  .sd-gal{ grid-template-columns:repeat(3,1fr); }
  .sd-introfig{ max-width:680px; }
  .sd-feat{ grid-template-columns:repeat(3,1fr); gap:50px 32px; }
  .sd-pat-grid{ max-width:600px; }
  .sd-pal img{ max-width:780px; }
  .sd-coord-banner{ max-width:620px; }
  .sd-close{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; text-align:left; }
  .sd-close img{ margin-bottom:0; }
  .sd-notes{ display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:1000px; margin-left:auto; margin-right:auto; align-items:start; }
  .sd-notes .sd-fit, .sd-notes .sd-delivery{ margin:0; max-width:none; }
}
@media(max-width:520px){
  .sd-feat{ gap:40px 16px; }
}