/* Sample-only boundary: fixed fixtures, accessible native dialogs, in-memory receipt marks only. */
.sop-root{--mint-ink:#24221f;--mint-focus:#00a6f4;--fixed-top-bar-background:rgb(255 255 255 / 98%);color:#24221f;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;line-height:1.5}
.sop-main{background:#fff}
.sop-root *{box-sizing:border-box}
.sop-root button,.sop-root input,.sop-root select{font-family:inherit}
.sop-root button:focus-visible,.sop-root a:focus-visible,.sop-root input:focus-visible,.sop-root select:focus-visible{outline:2px solid #00a6f4;outline-offset:3px}
.sop-root button:disabled{border-color:#e2e3e3;background:#efefef;color:#8a857e;cursor:not-allowed}
.sop-introduction h1{font-family:"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(2.4rem,calc(4vw - 1.92px),2.83rem);font-weight:400;line-height:1.08;letter-spacing:-.045em;outline:none}
.sop-sample-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:12px;color:#0069a9}
.sop-sample-label>span{background:#eff9ff;padding:5px 9px}
.sop-sample-label>button{min-height:44px;border:0;padding:4px 8px;color:inherit;background:transparent;text-decoration:underline;cursor:pointer}
.sop-sample-management{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:3px;border-radius:10px;background:#efefef}
.sop-sample-management button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 6px;border:1px solid transparent;border-radius:8px;background:transparent;font:inherit;font-size:.72rem;font-weight:700;color:#6f6a62;text-align:center;cursor:pointer}
.sop-sample-management button[aria-current]{border-color:#e1e3e3;background:#fff;color:#24221f;cursor:default}
.sop-sample-management strong{border:1px solid #c6da00;border-radius:999px;padding:3px 6px;font-size:10px;background:#e8ff3f;color:#181818}
.sop-sample-feature-notice{box-sizing:border-box;width:min(390px,calc(100vw - 40px));margin:auto;padding:34px 32px 30px;border:1px solid #e1e3e3;border-radius:16px;background:#fff;color:#24221f;text-align:center;box-shadow:0 20px 70px rgb(0 0 0 / 22%)}
.sop-sample-feature-notice::backdrop{background:rgb(24 24 24 / 42%);animation:sopFeatureDim .18s ease-out both}
.sop-sample-feature-notice:not([open]){display:none}
.sop-sample-feature-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:#6f6a62;line-height:1;cursor:pointer}
.sop-root .sop-sample-feature-close:focus-visible{outline:2px solid #00a6f4;outline-offset:-3px}
.sop-sample-feature-close svg{display:block}
.sop-sample-feature-eyebrow{margin:0 0 12px;color:#0069a9;font-size:11px;font-weight:700;letter-spacing:.12em}
.sop-sample-feature-notice h2{margin:0 0 14px;font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;font-size:24px;font-weight:500;line-height:1.45}
.sop-sample-feature-notice>p:last-child{margin:0;color:#6f6a62;font-size:13px;line-height:1.8}
.sop-sample-feature-notice[data-rich="true"]{width:min(520px,calc(100vw - 40px));padding:42px 48px 38px;border-radius:20px;box-shadow:0 28px 100px rgb(0 0 0 / 28%)}
.sop-sample-feature-notice[data-rich="true"]::backdrop{background:rgb(16 16 16 / 58%);backdrop-filter:blur(3px)}
.sop-sample-feature-mark{width:76px;height:76px;margin:0 auto 10px;color:#181818}
.sop-sample-feature-mark svg{display:block;width:100%;height:100%}
.sop-sample-feature-mark .sop-sample-feature-f{stroke:#3a86f6}
.sop-sample-feature-mark .sop-sample-feature-spark{fill:#eafe57;stroke:#181818;stroke-width:1.2}
.sop-sample-feature-notice[data-rich="true"] .sop-sample-feature-eyebrow{margin-bottom:22px;color:#181818;font-size:16px;letter-spacing:.26em;padding-left:.26em}
.sop-sample-feature-notice[data-rich="true"] h2{margin-bottom:22px;font-size:clamp(28px,4vw,34px);line-height:1.55;letter-spacing:.045em}
.sop-sample-feature-notice[data-rich="true"] h2.sop-sample-feature-title-brand{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-weight:700;letter-spacing:.12em;padding-left:.12em}
.sop-sample-feature-notice[data-rich="true"]>p:last-child{font-size:14px;line-height:2}
.sop-sample-rail-buttons{display:flex;gap:6px;flex-shrink:0}
.sop-sample-rail-buttons button,.sop-sample-photo-nav button{min-width:44px;min-height:44px;border:1px solid #dedad2;background:#fff;color:#181818;font-size:18px;cursor:pointer}
.sop-sample-intro{font-size:14px;line-height:1.8}
.sop-sample-intro p{margin:18px 0}
.sop-sample-intro .sample-button{width:100%;margin-top:8px}
.sop-dialog{position:fixed;inset:auto 0 18px;margin:0 auto;border:0;max-width:calc(100% - 36px);overscroll-behavior:contain}
.sop-dialog::backdrop{background:rgb(33 31 28 / 42%);backdrop-filter:blur(4px)}
.sop-dialog:not([open]){display:none}
.sop-dialog header h2{overflow-wrap:anywhere}
.sop-dialog header>button{flex-shrink:0}
.sop-dialog .sop-receiptToggle{min-height:44px}
.sop-dialog .sop-receiptHint{font-size:12px}
.sop-sample-options{margin:22px 0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px}
.sop-sample-options legend{font-size:13px;font-weight:700;margin-bottom:8px}
.sop-sample-options label{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;background:#fff;border:1px solid #dedad2;font-size:13px;cursor:pointer}
.sop-sample-options label:has(:checked){background:#efefef;border-color:#24221f}
.sop-sample-options input{width:18px;height:18px;accent-color:#24221f}
.sop-sample-zoom-photo{position:relative;width:100%;height:min(48svh,460px);margin:16px 0 12px;background:#efefef;touch-action:pan-y;user-select:none}.sop-sample-zoom-photo img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.sop-sample-zoom-photo .catalog_preview_cardImageFrame[data-crossfade=true]{animation:none}
.sop-sample-photo-thumbnails{display:flex;gap:8px;width:min(100%,352px);margin:0 auto 16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-snap-type:x proximity}
.sop-sample-photo-thumbnails button{display:block;flex:0 0 calc((100% - 24px)/4);min-width:44px;min-height:72px;padding:3px;border:1px solid #dedad2;background:#fff;cursor:pointer;scroll-snap-align:start}
.sop-sample-photo-thumbnails[data-scrollable=true] button{flex-basis:76px}
.sop-sample-photo-thumbnails button[aria-pressed=true]{padding:2px;border:2px solid #24221f}
.sop-sample-photo-thumbnails img{display:block;width:100%;height:64px;object-fit:contain;background:#efefef}
.sop-sample-photo-nav{display:flex;align-items:center;justify-content:center;gap:24px}
.sop-billingDetails p{font-size:12px;line-height:1.7}
.sop-search input{min-width:0}
@media(max-width:1008px){.sop-introduction h1{font-size:clamp(1.6rem,calc(3.7vw - 1.776px),1.9rem)}}
@media(max-width:820px){.sop-root{--fixed-top-bar-background:rgb(255 255 255 / 76%)}}
@media(max-width:759px){
  .sop-sample-label{margin:0 8px 12px}
  .sop-introduction h1{font-size:clamp(1.2rem,6.1vw,1.5rem);line-height:1.12;letter-spacing:-.055em}
  .sop-mobileGrouping select{padding-right:8px}
  .sop-sample-rail-buttons{gap:4px}
  .sop-sample-rail-buttons button{min-width:36px}
  .sop-dialog{inset:auto 0 0;max-width:100%;max-height:88svh;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .sop-sample-management button{flex-direction:column;gap:2px;padding-inline:3px;white-space:nowrap;font-size:.68rem}
  .sop-sample-feature-notice{width:calc(100vw - 32px);padding:32px 22px 26px}
  .sop-sample-feature-notice[data-rich="true"]{width:calc(100vw - 32px);padding:36px 24px 30px}
  .sop-sample-feature-mark{width:68px;height:68px}
}
@media(prefers-reduced-motion:no-preference){.sop-dialog[open]{animation:sampleOrderedDialogIn .18s ease-out}.sop-sample-feature-notice[open]{animation:sopFeatureIn .22s ease-out both}.sop-sample-feature-notice[data-rich="true"][open]{animation:sopRichFeatureIn .36s cubic-bezier(.2,.85,.25,1) both}.sop-sample-feature-spark{transform-origin:65px 18px;animation:sopFeatureSpark .6s .16s both}@keyframes sampleOrderedDialogIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes sopFeatureIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@keyframes sopRichFeatureIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}@keyframes sopFeatureSpark{from{opacity:0;transform:scale(.45) rotate(-16deg)}to{opacity:1;transform:none}}@keyframes sopFeatureDim{from{background:rgb(24 24 24 / 0)}to{background:rgb(24 24 24 / 42%)}}}

.sop-sample-expand{display:none}
@media(max-width:759px){.sop-sample-expand{display:block;min-height:44px;margin:12px 16px 0;padding:8px 16px;background:#fff;border:1px solid #dedad2;font:inherit;font-size:12px;cursor:pointer}.sop-productGroup[data-expanded=true] .sop-productRail>.sop-productCard:nth-child(n+5){display:flex}}
@media(max-width:339px){.sop-productGroup[data-expanded=true] .sop-productRail>.sop-productCard:nth-child(n+5){display:grid}}

.sop-sample-receipt-status{font-size:12px;margin:16px 0}
.sop-sample-receipt-status strong{display:inline-block;padding:4px 8px;border:1px solid #e1e3e3;background:#fff}
.sop-sample-receipt-status strong[data-state="part"]{border-color:#e8ff3f;background:#fbfee3;color:#24221f}
.sop-sample-receipt-status strong[data-state="done"]{border-color:#bae6fd;background:#e0f2fe;color:#0369a1}

/* Product details use a full-height entrance and retain the dialog during exit. */
.sop-dialog.sop-productSheet[open]{animation:none}
@media(prefers-reduced-motion:no-preference){
  .sop-dialog.sop-productSheet[open]::backdrop{animation:sampleOrderedBackdropIn .48s ease both}
  .sop-dialog.sop-productSheet[data-motion="closing"]::backdrop{animation:sampleOrderedBackdropOut .38s ease both}
  @keyframes sampleOrderedBackdropIn{from{opacity:0}to{opacity:1}}
  @keyframes sampleOrderedBackdropOut{from{opacity:1}to{opacity:0}}
}