/* アクリルワールド グッズシミュレーター
 * すべて .aw-sim の中だけに効くようにしています（テーマのCSSと干渉しにくくするため）。
 * 色を変えたいときは下の変数を書き換えてください。 */
.aw-sim{
  --aw-bg:#F6F4F8; --aw-surface:#FFFFFF; --aw-surface-2:#FBF9FD; --aw-ink:#4A3B4E; --aw-ink-2:#7A6C80;
  --aw-line:#E9E3EF; --aw-purple:#8367C7; --aw-purple-soft:#F0EAFB; --aw-pink:#FF6B81; --aw-pink-2:#FF8E9E;
  --aw-grid-strong:#DAD1E6; --aw-stage:#FDFCFE; --aw-shadow:0 10px 30px rgba(74,59,78,.08);
  --aw-r:18px;
  --aw-sticky-top:100px;   /* プレビューを固定表示するときの上の余白（テーマのヘッダーの高さに合わせて調整） */
  --aw-f-head:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  --aw-f-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --aw-f-num:"Lato","Noto Sans JP",sans-serif;
  background:var(--aw-bg); color:var(--aw-ink); font-family:var(--aw-f-body); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased; border-radius:28px; padding:28px 16px 32px; margin:0 auto; max-width:1240px;
}
.aw-sim .aw-inner{container-type:inline-size}
.aw-sim *,.aw-sim *::before,.aw-sim *::after{box-sizing:border-box}
.aw-sim [hidden]{display:none!important}
.aw-sim button,.aw-sim input,.aw-sim select,.aw-sim textarea{font:inherit;color:inherit;letter-spacing:normal;text-transform:none;margin:0;min-height:0;box-shadow:none}
.aw-sim h2,.aw-sim h3,.aw-sim p,.aw-sim dl,.aw-sim dd,.aw-sim pre{margin:0;padding:0;border:0;background:none}
.aw-sim h2::before,.aw-sim h2::after,.aw-sim h3::before,.aw-sim h3::after{content:none;display:none}
.aw-sim img{max-width:100%;height:auto}
.aw-sim :focus-visible{outline:3px solid var(--aw-purple);outline-offset:2px;border-radius:8px}

.aw-sim .aw-intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:22px}
.aw-sim .aw-eyebrow{font-family:var(--aw-f-num);font-weight:900;letter-spacing:.14em;font-size:12px;color:var(--aw-pink)}
.aw-sim .aw-title{font-family:var(--aw-f-head);font-weight:800;font-size:clamp(24px,3.4vw,34px);line-height:1.35;margin:2px 0 6px;color:var(--aw-ink);text-wrap:balance}
.aw-sim .aw-intro p{color:var(--aw-ink-2);max-width:60ch}
.aw-sim .aw-note{font-size:12.5px;color:var(--aw-ink-2);background:var(--aw-surface);border:1px dashed var(--aw-grid-strong);border-radius:12px;padding:8px 12px;max-width:340px}

.aw-sim .aw-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:start}
.aw-sim .aw-stage-col{position:sticky;top:var(--aw-sticky-top);z-index:50}

/* プレビュー */
.aw-sim .aw-stage{background:var(--aw-surface);border-radius:28px;box-shadow:var(--aw-shadow);padding:14px}
.aw-sim .aw-canvas-box{position:relative;border-radius:20px;overflow:hidden;background:var(--aw-stage);aspect-ratio:1/1;max-width:100%}
.aw-sim .aw-canvas-box{width:min(100%,max(300px,calc(100vh - var(--aw-sticky-top) - 110px)));margin-inline:auto}
.aw-sim .aw-canvas-box canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.aw-sim #aw-pieceCanvas{cursor:grab;touch-action:none}
.aw-sim #aw-pieceCanvas:active{cursor:grabbing}
.aw-sim .aw-stage-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:12px 8px 4px;font-size:13px;color:var(--aw-ink-2)}
.aw-sim .aw-stage-meta b{color:var(--aw-ink);font-family:var(--aw-f-num);font-variant-numeric:tabular-nums}
.aw-sim .aw-drag-hint{position:absolute;left:12px;bottom:12px;font-size:12px;background:rgba(255,255,255,.88);color:var(--aw-ink-2);padding:4px 10px;border-radius:99px;pointer-events:none}

/* PC：プレビューが画面の高さに収まるように */
.aw-sim .aw-size-toggle{display:none}
.aw-sim .aw-hint-touch{display:none}
@container (max-width:900px){
  .aw-sim .aw-layout{grid-template-columns:1fr;gap:16px}
  /* スマホ・タブレット：プレビューを小さめにして画面上部に追従 */
  .aw-sim .aw-stage-col{margin-inline:-16px;padding:6px 16px 10px;background:var(--aw-bg);box-shadow:0 10px 14px -12px rgba(74,59,78,.35)}
  .aw-sim .aw-stage{padding:8px;border-radius:20px}
  .aw-sim .aw-canvas-box{width:min(100%,38vh);border-radius:14px}
  .aw-sim .aw-stage-col.is-compact .aw-canvas-box{width:min(100%,22vh)}
  .aw-sim .aw-stage-meta{padding:6px 4px 0;font-size:11.5px;gap:2px 10px;align-items:center}
  .aw-sim .aw-meta-grid{display:none}
  .aw-sim .aw-size-toggle{display:inline-block;margin-left:auto;border:0;background:var(--aw-purple-soft);color:var(--aw-purple);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;cursor:pointer;line-height:1.6}
  .aw-sim .aw-drag-hint{left:6px;bottom:6px;font-size:10.5px;padding:2px 8px}
}
@media (pointer:coarse){
  .aw-sim #aw-pieceCanvas{touch-action:pan-y}
  .aw-sim .aw-hint-mouse{display:none}
  .aw-sim .aw-hint-touch{display:inline}
}

/* ステップ */
.aw-sim .aw-steps{display:flex;flex-direction:column;gap:16px}
.aw-sim .aw-step{background:var(--aw-surface);border-radius:var(--aw-r);padding:20px;box-shadow:var(--aw-shadow)}
.aw-sim .aw-step-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:14px}
.aw-sim .aw-step-n{width:30px;height:30px;border-radius:50%;background:var(--aw-purple);color:#fff;font-family:var(--aw-f-num);font-weight:900;display:grid;place-items:center;font-size:14px;flex:none}
.aw-sim .aw-step-h h2{font-family:var(--aw-f-head);font-weight:800;font-size:18px;line-height:1.4;color:var(--aw-ink)}
.aw-sim .aw-step-h span{font-size:12.5px;color:var(--aw-ink-2);margin-left:auto}
.aw-sim .aw-group{margin-top:14px}
.aw-sim .aw-group:first-child{margin-top:0}
.aw-sim .aw-g-label{font-size:13px;font-weight:700;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}

.aw-sim .aw-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@container (max-width:560px){.aw-sim .aw-types{grid-template-columns:repeat(2,minmax(0,1fr))}}
.aw-sim .aw-type{border:2px solid var(--aw-line);background:var(--aw-surface-2);border-radius:16px;padding:12px 8px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:border-color .15s,background .15s,transform .15s;color:var(--aw-ink)}
.aw-sim .aw-type svg{width:40px;height:40px;color:var(--aw-purple)}
.aw-sim .aw-type b{font-family:var(--aw-f-head);font-size:13.5px;line-height:1.35}
.aw-sim .aw-type small{font-size:11px;color:var(--aw-ink-2);line-height:1.3}
.aw-sim .aw-type:hover{transform:translateY(-2px);background:var(--aw-surface-2)}
.aw-sim .aw-type[aria-pressed="true"]{border-color:var(--aw-purple);background:var(--aw-purple-soft)}

.aw-sim .aw-chips{display:flex;flex-wrap:wrap;gap:8px}
.aw-sim .aw-chip{border:2px solid var(--aw-line);background:var(--aw-surface-2);color:var(--aw-ink);border-radius:99px;padding:7px 14px;cursor:pointer;font-size:13.5px;font-weight:500;line-height:1.5;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,background .15s}
.aw-sim .aw-chip:hover{background:var(--aw-surface-2);border-color:var(--aw-grid-strong)}
.aw-sim .aw-chip small{font-size:11.5px;color:var(--aw-ink-2);font-family:var(--aw-f-num);font-variant-numeric:tabular-nums}
.aw-sim .aw-chip[aria-pressed="true"]{border-color:var(--aw-purple);background:var(--aw-purple-soft);color:var(--aw-purple);font-weight:700}
.aw-sim .aw-chip[aria-pressed="true"] small{color:var(--aw-purple)}
.aw-sim .aw-sw{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block}

.aw-sim .aw-drop{position:relative;border:2px dashed var(--aw-grid-strong);border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px;background:var(--aw-surface-2);cursor:pointer;transition:border-color .15s,background .15s;margin:0}
.aw-sim .aw-drop:hover,.aw-sim .aw-drop.is-over{border-color:var(--aw-purple);background:var(--aw-purple-soft)}
.aw-sim .aw-thumb{width:64px;height:64px;border-radius:12px;background:var(--aw-stage) center/contain no-repeat;border:1px solid var(--aw-line);flex:none}
.aw-sim .aw-drop b{display:block;font-size:14px;word-break:break-all}
.aw-sim .aw-drop small{color:var(--aw-ink-2);font-size:12px;display:block;line-height:1.5}
.aw-sim .aw-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.aw-sim .aw-err{color:#D9435B;font-size:12.5px;margin-top:6px}
.aw-sim .aw-sliders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@container (max-width:560px){.aw-sim .aw-sliders{grid-template-columns:1fr}}
.aw-sim .aw-sl label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--aw-ink-2);margin:0}
.aw-sim .aw-sl label b{color:var(--aw-ink);font-family:var(--aw-f-num);font-variant-numeric:tabular-nums}
.aw-sim input[type=range]{width:100%;accent-color:var(--aw-purple);padding:0;border:0;background:transparent}
.aw-sim .aw-link-btn{background:none;border:0;color:var(--aw-purple);font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 0}

.aw-sim .aw-qty-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.aw-sim .aw-qty-in{display:flex;align-items:center;border:2px solid var(--aw-line);border-radius:12px;overflow:hidden;background:var(--aw-surface-2)}
.aw-sim .aw-qty-in button{border:0;background:none;width:40px;height:42px;padding:0;cursor:pointer;font-size:18px;color:var(--aw-purple)}
.aw-sim .aw-qty-in input{width:90px;border:0;background:none;text-align:center;font-family:var(--aw-f-num);font-weight:900;font-size:18px;font-variant-numeric:tabular-nums;height:42px;padding:0}
.aw-sim .aw-qty-in input:focus{outline:none}
.aw-sim .aw-tiers{font-size:12px;color:var(--aw-ink-2);margin-top:8px}

/* 見積り */
.aw-sim .aw-est{background:var(--aw-surface);border-radius:var(--aw-r);box-shadow:var(--aw-shadow);padding:20px;border:2px solid var(--aw-purple-soft)}
.aw-sim .aw-est h2{font-family:var(--aw-f-head);font-weight:800;font-size:18px;margin-bottom:10px;color:var(--aw-ink)}
.aw-sim .aw-est dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
.aw-sim .aw-est dt{color:var(--aw-ink-2);font-weight:400;margin:0}
.aw-sim .aw-est dd{text-align:right;font-family:var(--aw-f-num);font-weight:700;font-variant-numeric:tabular-nums}
.aw-sim .aw-total{border-top:1px solid var(--aw-line);margin-top:8px;padding-top:10px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.aw-sim .aw-total > span{font-weight:700}
.aw-sim .aw-total b{font-family:var(--aw-f-num);font-weight:900;font-size:30px;color:var(--aw-pink);font-variant-numeric:tabular-nums;line-height:1.1}
.aw-sim .aw-total small{display:block;text-align:right;font-size:12px;color:var(--aw-ink-2);font-weight:500}
.aw-sim .aw-lead{font-size:13px;margin-top:8px;color:var(--aw-ink-2)}
.aw-sim .aw-lead b{color:var(--aw-ink)}
.aw-sim .aw-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:16px}
@container (max-width:420px){.aw-sim .aw-actions{grid-template-columns:1fr}}
.aw-sim .aw-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:99px;padding:14px 18px;font-family:var(--aw-f-head);font-weight:800;font-size:15px;line-height:1.4;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s}
.aw-sim .aw-btn:hover{transform:translateY(-1px)}
.aw-sim .aw-btn:disabled{opacity:.6;cursor:wait;transform:none}
.aw-sim .aw-btn-main,.aw-sim .aw-btn-main:hover,.aw-sim .aw-btn-main:visited{background:linear-gradient(90deg,var(--aw-pink),var(--aw-pink-2));color:#fff;box-shadow:0 8px 20px rgba(255,107,129,.35)}
.aw-sim .aw-btn-sub,.aw-sim .aw-btn-sub:hover,.aw-sim .aw-btn-sub:visited{background:var(--aw-purple-soft);color:var(--aw-purple)}
.aw-sim .aw-fine{font-size:11.5px;color:var(--aw-ink-2);margin-top:10px}

/* スマホ用 下部バー */
.aw-sim .aw-mbar{display:none}
@media (max-width:900px){
  .aw-sim .aw-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9990;background:var(--aw-surface);box-shadow:0 -6px 20px rgba(74,59,78,.12);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));align-items:center;justify-content:space-between;gap:12px}
  .aw-sim .aw-mbar small{display:block;font-size:11px;color:var(--aw-ink-2)}
  .aw-sim .aw-mbar b{font-family:var(--aw-f-num);font-weight:900;font-size:20px;color:var(--aw-pink);font-variant-numeric:tabular-nums}
  .aw-sim .aw-mbar .aw-btn{padding:11px 16px;font-size:14px}
}

/* モーダル */
html.aw-lock{overflow:hidden}
.aw-sim .aw-overlay{position:fixed;inset:0;z-index:99999;background:rgba(30,20,40,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.aw-sim .aw-modal{background:var(--aw-surface);border-radius:24px;max-width:640px;width:100%;max-height:calc(100% - 32px);overflow:auto;padding:22px;position:relative}
.aw-sim .aw-modal h3{font-family:var(--aw-f-head);font-weight:800;font-size:20px;margin-bottom:6px;padding-right:40px;color:var(--aw-ink)}
.aw-sim .aw-modal p{margin-bottom:12px;color:var(--aw-ink-2);font-size:13.5px}
.aw-sim .aw-x{position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0;border-radius:50%;border:0;background:var(--aw-purple-soft);color:var(--aw-purple);font-size:20px;line-height:1;cursor:pointer}
.aw-sim .aw-export-img{width:100%;border-radius:14px;border:1px solid var(--aw-line);display:block;margin-bottom:14px}
.aw-sim .aw-spec{background:var(--aw-surface-2);border:1px solid var(--aw-line);border-radius:12px;padding:12px 14px;font-family:var(--aw-f-body);font-size:13px;white-space:pre-wrap;line-height:1.7;color:var(--aw-ink);flex:1;min-width:0;overflow:visible}
.aw-sim .aw-form{display:grid;gap:12px}
.aw-sim .aw-form label{font-size:13px;font-weight:700;display:grid;gap:4px;margin:0}
.aw-sim .aw-form label i{font-style:normal;color:var(--aw-pink);font-size:11px;margin-left:4px}
.aw-sim .aw-form input,.aw-sim .aw-form textarea{width:100%;border:2px solid var(--aw-line);border-radius:12px;padding:10px 12px;background:var(--aw-surface-2);font-weight:400}
.aw-sim .aw-form input:focus,.aw-sim .aw-form textarea:focus{outline:none;border-color:var(--aw-purple)}
.aw-sim .aw-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.aw-sim .aw-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.aw-sim .aw-two{grid-template-columns:1fr}}
.aw-sim .aw-req-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.aw-sim .aw-req-head img{width:96px;height:96px;border-radius:14px;border:1px solid var(--aw-line);object-fit:cover;flex:none;background:#fff}
.aw-sim .aw-done{text-align:center;padding:20px 8px}
.aw-sim .aw-ok{width:64px;height:64px;border-radius:50%;background:var(--aw-purple-soft);color:var(--aw-purple);display:grid;place-items:center;margin:0 auto 10px;font-size:30px;font-weight:900}
@media (prefers-reduced-motion:reduce){.aw-sim *{transition:none!important}}
@media (max-width:900px){.aw-sim{padding-bottom:110px}}