/* E-217: グッズのページとお礼のページ。今のサイトの A の色・書体・ボタンのまま、ポリシーのページの枠を広げて使う。
   追記1: 大きい写真のスライダーと拡大、小さい写真の並び(送れる)、色のボタン(goods.js)。
   追記2: 節(ユーザートレカ・ストラップ・ステッカー・アクセサリー)と上に残るメニュー、スマホは1列。 */
.goods-page .goods-document{max-width:1180px}
.goods-page .policy-heading h1{font-size:clamp(42px,5.3vw,68px)}

/* 追記4:先頭は見出しの代わりに STORES のバナー(lib/goods.ts の GOODS_BANNER)。h1「グッズ」は見えない形で残す。
   PC は幅 800px まで中央、スマホ・タブレットは中身の幅いっぱい。下の区切りの線はメニューの下の線に任せる */
.goods-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.goods-page .policy-document.goods-document{padding-top:32px}
.goods-page .policy-heading.goods-heading{padding:0;border:0;margin:0}
.goods-banner{display:block;width:100%;max-width:800px;height:auto;aspect-ratio:1600/726;margin:0 auto}
.goods-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}

/* 上のメニュー:押すとその節へ。ページを送っても上に残る(ヘッダーの開いたメニュー z-index:3 より下)。
   今いる節に印(goods.js)。節の見出しは、メニューの下に来るように止める */
.goods-menu{position:sticky;top:0;z-index:2;margin:24px 0 0;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #e3e6ec}
.goods-menu ul{display:flex;gap:6px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.goods-menu ul::-webkit-scrollbar{display:none}
.goods-menu li{flex:0 0 auto}
.goods-menu a{display:block;padding:15px 18px 12px;border-bottom:3px solid transparent;color:#5d6575;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:.04em;white-space:nowrap;text-decoration:none;touch-action:manipulation}
.goods-menu a:hover{color:#10182b}
.goods-menu a[aria-current="true"]{color:#10182b;border-bottom-color:#ee4776}
.goods-menu a:focus-visible{outline:2px solid #3880ff;outline-offset:-2px}
.goods-section{outline:none;margin-top:56px;scroll-margin-top:calc(var(--goods-menu-height,52px) + 20px)}
.goods-section+.goods-section{margin-top:96px}
.goods-section-title{margin-bottom:28px;padding-left:14px;border-left:4px solid #ee4776;font-size:26px;line-height:1.4;letter-spacing:.04em;font-weight:750}

/* ユーザートレカの節の「ご注文の流れ」 */
.goods-flow{margin:-8px 0 36px;padding:22px 26px;background:#f4f5f8}
.goods-flow h3{font-size:16px;line-height:1.6;font-weight:700}
.goods-flow ol{margin:10px 0 0;padding-left:22px;color:#434c5d}
.goods-flow li{font-size:14px;line-height:1.9}
.goods-flow li+li{margin-top:4px}
.goods-flow a{color:#10182b;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.goods-card{display:flex;flex-direction:column;min-width:0}
.goods-gallery{min-width:0}

/* 大きい写真:横にスワイプできる並び(トップの画像スライダーと同じ作り) */
.goods-stage{position:relative;aspect-ratio:4/5;background:#f4f5f8;overflow:hidden}
.goods-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;scrollbar-width:none;cursor:zoom-in}
.goods-track::-webkit-scrollbar{display:none}
.goods-track[data-slider-gestures]{cursor:zoom-in}
.goods-track[data-slider-gestures].is-slider-gesturing{cursor:grabbing}
.goods-track:focus-visible{outline:2px solid #3880ff;outline-offset:-2px}
.goods-slide{flex:0 0 100%;width:100%;min-width:0;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.goods-slide img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
/* 左右の矢印:マウスのある PC で、写真にマウスを乗せたときだけ(スマホでは出さない) */
.goods-arrow{display:none}
@media(hover:hover) and (pointer:fine){
 .goods-arrow{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:0;border-radius:50%;background:transparent;color:#10182b;font:18px/1 Arial,sans-serif;cursor:pointer;isolation:isolate;opacity:0;transition:opacity .18s}
 .goods-arrow::before{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(255,255,255,.82);box-shadow:0 1px 7px rgba(16,24,43,.18);z-index:-1}
 .goods-arrow:not(:disabled):hover::before{background:rgba(255,255,255,.96)}
 .goods-arrow-prev{left:6px}
 .goods-arrow-next{right:6px}
 .goods-stage:hover .goods-arrow:not(:disabled),.goods-arrow:focus-visible:not(:disabled){opacity:1}
 .goods-arrow:disabled{visibility:hidden}
 .goods-arrow:focus-visible{outline:2px solid #3880ff;outline-offset:1px}
}

/* 小さい写真の並び:1列に収まらない商品は指・マウスで横に送れる。続きがある側の端をぼかす */
.goods-thumbs{display:flex;gap:6px;margin-top:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;scrollbar-width:none}
.goods-thumbs::-webkit-scrollbar{display:none}
.goods-thumbs:not([data-scrollable]){cursor:auto}
.goods-thumbs[data-more-right]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
.goods-thumbs[data-more-left]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent)}
.goods-thumbs[data-more-left][data-more-right]{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
.goods-thumbs button{flex:0 0 52px;width:52px;height:52px;padding:0;border:2px solid transparent;background:#f4f5f8;overflow:hidden;cursor:pointer}
.goods-thumbs[data-scrollable] button{cursor:inherit}
.goods-thumbs button[aria-current="true"]{border-color:#ee4776}
.goods-thumbs button:focus-visible{outline:2px solid #3880ff;outline-offset:1px}
.goods-thumbs img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none}

.goods-body{display:flex;flex-direction:column;flex:1;margin-top:18px}
.goods-body h3{font-size:20px;line-height:1.5;letter-spacing:.02em;font-weight:700}
.goods-body .goods-price{font-size:22px;font-weight:700;line-height:1.5;margin-top:6px;font-variant-numeric:tabular-nums}
.goods-body .goods-price small{font-size:12px;font-weight:500;margin-left:4px;color:#525968}
.goods-body .goods-note{font-size:14px;line-height:1.9;color:#525968;margin-top:10px}

/* 色のボタン(色の名前)と、今選んでいる色(「購入する」のすぐ上) */
/* カラーのプルダウン(「購入する」のすぐ上。選んでいる色がそのまま見える)。文字は 16px(iPhone が触ったときに拡大しない大きさ) */
.goods-color{display:block;margin-top:16px}
.goods-color-label{display:block;margin-bottom:6px;font-size:12px;font-weight:600;line-height:1.5;color:#525968}
.goods-color-label small{font-size:11px;font-weight:500;margin-left:2px}
.goods-color-box{position:relative;display:block}
.goods-color-box::after{content:"";position:absolute;top:50%;right:16px;width:8px;height:8px;margin-top:-6px;border-right:2px solid #10182b;border-bottom:2px solid #10182b;transform:rotate(45deg);pointer-events:none}
.goods-color select{display:block;width:100%;min-height:48px;margin:0;padding:10px 44px 10px 14px;border:1px solid #cdd1d9;border-radius:8px;background:#fff;color:#10182b;font-family:inherit;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:.02em;-webkit-appearance:none;appearance:none;cursor:pointer}
.goods-color select:hover{border-color:#8b92a1}
.goods-color select:focus-visible{outline:2px solid #3880ff;outline-offset:2px}
.goods-body .goods-buy{margin-top:auto;width:100%}
.goods-body>:nth-last-child(2){margin-bottom:20px}

.goods-notes{margin-top:72px;padding:32px 36px;background:#f4f5f8}
.goods-notes h2{font-size:19px;line-height:1.6;font-weight:700;padding-left:14px;border-left:3px solid #ee4776}
.goods-notes ul{margin:16px 0 0;padding-left:22px;color:#434c5d}
.goods-notes li{font-size:15px;line-height:2}
.goods-notes p{margin-top:14px}
.goods-notes a{text-decoration:underline;text-underline-offset:4px;color:#10182b;font-size:14px;font-weight:600}
.goods-document+.policy-return{max-width:1180px}
.goods-thanks-actions{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 48px}
.goods-thanks-actions .goods-thanks-home{background:#10182b}
.goods-thanks-actions .goods-thanks-home:hover{background:#29334a}

/* 画面いっぱいの拡大(goods.js が1つ作る) */
html.goods-zoom-is-open,html.goods-zoom-is-open body{overflow:hidden}
/* 同意の帯(site-consent.css 10000〜10001)と開発・プレビューの確認用の地域の帯(10002)より上 */
.goods-zoom{position:fixed;inset:0;z-index:10003;background:rgba(10,14,24,.96);overscroll-behavior:contain}
.goods-zoom[hidden]{display:none}
.goods-zoom-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;touch-action:pan-x pinch-zoom;scrollbar-width:none;outline:none}
.goods-zoom-track::-webkit-scrollbar{display:none}
.goods-zoom-track[data-slider-gestures]{cursor:auto}
.goods-zoom-track[data-slider-gestures].is-slider-gesturing{cursor:grabbing}
.goods-zoom-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:56px 12px}
.goods-zoom-slide img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.goods-zoom-close{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:1;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:28px/1 Arial,sans-serif;cursor:pointer}
.goods-zoom-close:hover{background:rgba(255,255,255,.26)}
.goods-zoom-close:focus-visible,.goods-zoom-arrow:focus-visible{outline:2px solid #8fb6ff;outline-offset:2px}
.goods-zoom-count{position:absolute;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));margin:0;text-align:center;color:rgba(255,255,255,.82);font-size:13px;letter-spacing:.1em;font-variant-numeric:tabular-nums;pointer-events:none}
.goods-zoom[data-single] .goods-zoom-count{display:none}
.goods-zoom-arrow{display:none}
@media(hover:hover) and (pointer:fine){
 .goods-zoom-arrow{position:absolute;top:50%;z-index:1;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font:20px/1 Arial,sans-serif;cursor:pointer}
 .goods-zoom-arrow:hover{background:rgba(255,255,255,.3)}
 .goods-zoom-prev{left:16px}
 .goods-zoom-next{right:16px}
 .goods-zoom-arrow:disabled{visibility:hidden}
 .goods-zoom[data-single] .goods-zoom-arrow{display:none}
}

@media(max-width:1000px){.goods-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}}
@media(max-width:700px){
 .goods-page .policy-heading h1{font-size:42px}
 /* メニューは画面の幅いっぱいに、4つを1行に(320px でも) */
 .goods-page .policy-document.goods-document{padding-top:16px}
 .goods-menu{margin:14px -24px 0;padding:0 8px}
 .goods-menu ul{gap:0}
 .goods-menu li{flex:1 1 auto}
 .goods-menu a{padding:13px 2px 10px;text-align:center;font-size:clamp(11.5px,3.6vw,14px);letter-spacing:0}
 .goods-section{margin-top:40px}
 .goods-section+.goods-section{margin-top:72px}
 .goods-section-title{margin-bottom:22px;font-size:22px}
 .goods-flow{margin:-4px 0 28px;padding:18px 18px}
 .goods-flow li{font-size:13px;line-height:1.85}
 /* スマホは1商品1幅(1列) */
 .goods-grid{grid-template-columns:minmax(0,1fr);gap:56px}
 .goods-body{margin-top:14px}
 .goods-body h3{font-size:18px}
 .goods-body .goods-price{font-size:20px;margin-top:4px}
 .goods-body .goods-note{font-size:13px;line-height:1.85;margin-top:8px}
 .goods-body .goods-buy{min-height:50px}
 .goods-body>:nth-last-child(2){margin-bottom:16px}
 .goods-zoom-slide{padding:60px 0}
 .goods-notes{margin-top:64px;padding:24px 20px}
 .goods-notes h2{font-size:17px}
 .goods-notes li{font-size:14px}
 .goods-thanks-actions .button{width:100%}
}