/* S3CR SHOP — 軽量CSS。装飾は控えめ、視認性重視、スマホ1カラム。 */ :root{ --fg:#1a1a1a; --muted:#666; --line:#e3e3e3; --bg:#fff; --soft:#f7f7f8; --accent:#111; --accent-fg:#fff; --danger:#c0392b; --ok:#1e7d34; --badge:#333; --radius:10px; --maxw:960px; /* ★★2026-09-18（Retail 35章）: 幅の原本は2つ。 --maxw … 読む幅（960px）。全画面の本文と、トップのバナー中央（960-32＝928px）が読む。★値を変えるとバナーの寸法が変わる --maxw-wide … 広い幅（1280px）。トップと商品一覧の本文（body.list-wide）と、全画面のヘッダー・フッターの枠が読む ★@media の境目（960 / 1200）には変数を使えないので数字で書いてある。どちらかの値を変えたら境目も見直す。 */ --maxw-wide:1280px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; font-size:15px; } a{color:inherit} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px} img{max-width:100%; display:block} /* header/footer */ .site-header{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.95); backdrop-filter:saturate(1.2) blur(4px); z-index:10} /* ★★2026-09-10 発注者依頼: ヘッダの縦幅を 1.5 倍（56px → 84px）。 ロゴの上限もあわせて 1.5 倍（32px → 48px）にしないと、帯だけ広がって間延びする。 */ .header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; height:84px} .brand{font-weight:700; font-size:18px; text-decoration:none; letter-spacing:.02em; min-width:0; display:inline-flex; align-items:center; gap:8px} /* ★ロゴはショップ名を置き換えず左隣に並ぶ。縮まないように flex-shrink:0。 */ .brand-logo{max-height:48px; width:auto; flex:0 0 auto} .brand-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* ★★2026-09-14 発注者依頼: ナビ（商品・マイページ・ログアウト・カート）をショップ名・ロゴより**やや下**に。 ・ショップ名・ロゴは動かさない（.brand は .header-inner の align-items:center のまま） ・ナビだけ下端に寄せ、下に 18px 残す＝ロゴの上限 48px を中央に置いたときの下端（(84-48)/2）とそろう ・ヘッダの高さ（84px）は変えない。align-self と margin はこの箱の中での置き場所しか変えない ・項目どうしの縦位置は、ナビの中の align-items:center でそろったまま ★600px 以下では2段に折り返すので、下の @media で元に戻す（戻さないと下に 18px 伸びる）。 */ .header-nav{display:flex; align-items:center; gap:14px; flex:0 0 auto; align-self:flex-end; margin-bottom:18px} /* ★アイコンと文字を横に並べる。align-items:center で、絵の高さが変わっても文字は動かない。 */ .header-nav a{text-decoration:none; font-size:14px; display:inline-flex; align-items:center; gap:6px} /* ★★2026-09-10 発注者依頼: ホバーで下線。 ★下線は text-decoration で引くこと。border-bottom で引くと**その分だけ背が伸びて** ヘッダの高さと文字の位置が動く（完成条件「hover で高さや文字位置が動かない」）。 ★text-underline-offset は線の位置だけを動かすもので、箱の大きさには影響しない。 */ .header-nav a:hover, .header-nav a:focus-visible{text-decoration:underline; text-underline-offset:4px} /* ★★アイコンの高さをここで固定する。 元画像の縦横比がばらばらでも、height を決め打ちすれば**必ずそろう** （完成条件「ヘッダーアイコンの高さが揃っている」）。 ★width:auto と組み合わせ、横は絵なりに伸ばす（潰さない）。 ★display:block で下の余白（inline の行間）を消す。これが残ると1pxずれて見える。 */ .nav-ico{height:20px; width:auto; flex:0 0 auto; display:block} /* ★ヘッダのログアウト。POST が要るのでボタンだが、見た目は隣のリンクに合わせる（2026-09-07）。 ★色は店頭の語彙（--fg / --muted）を使う。--ink は管理画面の app.css の語彙で、ここには無い。 */ .header-logout{margin:0; display:inline-flex} .header-logout button{appearance:none; background:none; border:0; padding:0; margin:0; cursor:pointer; font:inherit; font-size:14px; color:var(--muted); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px} .header-logout button:hover, .header-logout button:focus-visible{color:var(--fg); text-decoration:underline; text-underline-offset:4px} .cart-link{text-decoration:none; font-size:14px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap} .cart-badge{display:inline-block; min-width:20px; text-align:center; background:var(--accent); color:var(--accent-fg); border-radius:999px; font-size:12px; padding:1px 6px; margin-left:2px} /* ★★2026-09-16 発注者依頼: カートから出る吹き出し（_footer.php）。 ・「カートに追加しました」（5秒／画面タップで消える）と「購入手続きはこちら」の2つ ・★.header-nav には position を足さない（ヘッダの並びが崩れる）。位置は JS が カートの座標を測って top / right に入れる。ここでは見た目と、三角の位置の受け口だけ。 ・★ヘッダ（z-index:10）より上に出す。下だとヘッダの背景に隠れる。 */ .cart-toast{position:fixed; z-index:60; max-width:min(78vw, 280px); background:#1f2430; color:#fff; border-radius:8px; padding:10px 14px; font-size:14px; line-height:1.5; box-shadow:0 6px 20px rgba(0,0,0,.22)} /* 三角（カートを指す）。--tip は JS が入れる＝「箱の右端から、三角の左端まで」の距離。 ★カートの真ん中を指すように JS が計算する（カートの文字数で幅が変わってもずれない）。 */ .cart-toast::after{content:""; position:absolute; top:-7px; right:var(--tip, 20px); border:7px solid transparent; border-top:0; border-bottom-color:#1f2430} .cart-toast a{color:#fff; text-decoration:underline; text-underline-offset:3px; font-weight:700} .site-footer{border-top:1px solid var(--line); margin-top:48px; padding:24px 0 32px; color:var(--muted); font-size:13px} .footer-nav{display:flex; gap:8px 20px; flex-wrap:wrap; margin-bottom:14px} .footer-nav a{text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px} .footer-meta{display:flex; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; font-size:12px} /* ★★2026-09-14: ヘッダを2段にする境目を 480px → 600px に上げた（発注者の了承済み）。 481〜600px 付近（iPad の画面分割など）でログイン中だと、1段のままのナビ（商品・マイページ・ログアウト・ カート＋件数＝約 376px）に押されて、ショップ名が「S…」か、まったく見えなくなっていた。 ★ヘッダの規則はこのブロックだけ。480px の他のブロック（バリエーション等）は動かしていない。 */ @media (max-width:600px){ .brand{font-size:15px} /* ★ヘッダの項目が増えたぶん、狭い画面でショップ名が消えないようにする（2026-09-07）。 ・ブランドは最低 6em を確保（ここが無いと 320px で「S.」まで潰れる） ・ナビは入りきらなければ2段に折り返す。そのぶん高さを伸ばせるように 固定の height をやめる（固定のままだと折り返した項目がはみ出す） */ /* ★★2026-09-10 発注者依頼「スマホでヘッダが左に寄りすぎる」の正体はここ。 .header-inner は .wrap と**同じ要素**（
）なので、 ここで padding を書くと .wrap の `padding:0 16px` を**丸ごと上書き**する。 `padding:6px 0` は左右を **0** にしていた ＝ 画面の端に貼り付いていた。 → 左右は 16px を保ったまま、上下だけ足す。 */ .header-inner{gap:8px; height:auto; min-height:84px; padding:8px 16px; flex-wrap:wrap} .brand{font-size:16px; flex:1 1 auto; min-width:6em} .brand-logo{max-height:40px} .header-nav{gap:10px; flex-wrap:wrap; justify-content:flex-end; row-gap:6px; align-self:auto; margin-bottom:0} .header-nav a{font-size:13px} .header-logout button{font-size:13px} /* ★狭い画面では絵も少し小さく。★height で決めるので、そろうことは変わらない。 */ .nav-ico{height:18px} } /* flash */ .flash{padding:10px 14px; border-radius:var(--radius); margin:16px 0; font-size:14px} .flash-error{background:#fdecec; color:var(--danger); border:1px solid #f4c7c3} .flash-success{background:#eaf7ee; color:var(--ok); border:1px solid #bfe6c9} .flash-info{background:var(--soft); border:1px solid var(--line)} /* cover */ .cover{width:100%; aspect-ratio:16/6; object-fit:cover; border-radius:var(--radius); margin:16px 0; background:var(--soft)} /* ★★2026-09-17 発注者依頼: トップ本文のショップ名は見た目から消す（ヘッダーのショップ名は残す）。 見出しは読み上げ用に残すので、画面には出さない（.vh＝visually hidden）。 */ .vh{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0} /* トップの本文。消した見出しのぶん、前の要素（ヘッダー・バナー・カバー・お知らせ）から 20px 空ける。 ★20px は他の店頭画面のヘッダー → h1.page と同じ。マージンは相殺されるので、どれが上に来ても 20px。 */ .top-body{margin-top:20px} /* product grid */ .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; background:var(--bg); transition:box-shadow .15s} .card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)} .card .thumb{aspect-ratio:1/1; object-fit:cover; background:var(--soft); width:100%} .card .no-img{aspect-ratio:1/1; background:var(--soft); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px} .card .body{padding:10px 12px; display:flex; flex-direction:column; gap:4px} .card .name{font-size:14px; font-weight:600; line-height:1.4} .card .price{font-size:15px; font-weight:700} .badges{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:2px} .badge{font-size:11px; padding:2px 8px; border-radius:999px; background:var(--badge); color:#fff; line-height:1.5} .badge.mto{background:#2d6cdf} .badge.soldout{background:#888} .badge.closed{background:#b23} /* product detail */ .detail{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:20px 0} .gallery .main{aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); background:var(--soft); width:100%} .gallery .no-img{aspect-ratio:1/1; border-radius:var(--radius); background:var(--soft); display:flex; align-items:center; justify-content:center; color:var(--muted)} .thumbs{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap} .thumbs img{width:64px; height:64px; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:pointer; opacity:.7} .thumbs img.active,.thumbs img:hover{opacity:1; border-color:var(--accent)} .pd-name{font-size:22px; margin:0 0 8px} .pd-price{font-size:24px; font-weight:800; margin:8px 0} .pd-desc{white-space:normal; color:#333; margin:14px 0; font-size:14px} .mto-box{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; font-size:14px; margin:12px 0} .mto-box dt{color:var(--muted); font-size:12px} .mto-box dd{margin:0 0 8px; font-weight:600} /* forms */ label{display:block; font-size:13px; color:var(--muted); margin:10px 0 4px} input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select,textarea{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:15px; background:#fff; color:var(--fg); font-family:inherit; } textarea{min-height:90px; resize:vertical} .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px} .qty{width:88px} select.variant{max-width:100%} /* buttons */ .btn{display:inline-block; border:none; border-radius:8px; padding:12px 20px; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; text-align:center} .btn-primary{background:var(--accent); color:var(--accent-fg)} .btn-primary:disabled{opacity:.5; cursor:not-allowed} .btn-block{display:block; width:100%} .btn-line{background:#fff; color:var(--fg); border:1px solid var(--line)} .btn-danger{background:var(--danger); color:#fff} .btn-sm{padding:6px 12px; font-size:13px} /* tables */ table{width:100%; border-collapse:collapse; font-size:14px} th,td{padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top} th{color:var(--muted); font-weight:600; font-size:12px} .right{text-align:right} .tot{font-size:16px} .tot .total{font-weight:800; font-size:20px} /* summary box */ .summary{border:1px solid var(--line); border-radius:var(--radius); padding:16px; background:var(--soft)} .summary .line{display:flex; justify-content:space-between; padding:6px 0; font-size:14px} .summary .line.total{border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-size:18px; font-weight:800} .muted{color:var(--muted); font-size:13px} .note{font-size:13px; color:var(--muted); margin:6px 0} .center{text-align:center} h1.page{font-size:20px; margin:20px 0 12px} .issue{color:var(--danger); font-size:13px} #card-container{margin:10px 0; padding:2px; min-height:44px} .pay-errors{color:var(--danger); font-size:13px; margin:8px 0} .section{margin:26px 0} /* responsive */ @media (max-width:720px){ .grid{grid-template-columns:repeat(2,1fr)} .detail{grid-template-columns:1fr} .row2{grid-template-columns:1fr} } @media (max-width:420px){ .grid{grid-template-columns:1fr 1fr; gap:12px} } /* ============================================================ トップと商品一覧だけ、PC で商品を横に最大5点並べる（2026-09-18 発注者依頼・Retail 35章） ・印は body.list-wide。立てるのは DOCROOT/index.php の case 'shop_top': case 'items': の1か所だけ （= / ・ /top ・ /items）。★
の書き方は変えない（試験4本が完全一致で縛っている）。 ・広げるのは本文（main）だけ。バナーは main の外で --maxw を読むので 928×522 のまま。 ★--maxw を書き換えないこと（全画面の本文とバナーが一緒に広がる）。 ・列: 1200px 以上 5列／960〜1199px 4列／721〜959px 3列（既定の .grid）／720px 以下 2列（上の既存の規則）。 PC に出るカードは 219px 以上（設置前の最小＝721px・3列と同じ。新しい段の最小は 960px・4列の 220px）。 ★min-width だけで足すこと。max-width で書くと .list-wide .grid（詳細度が高い）が 720px 以下の2列の規則に勝ち、スマホが3列以上になる。 ★auto-fit / auto-fill は使わない（6列以上になる幅が出る／1点だけの作品でカードが横いっぱいに伸びる）。 ・minmax(0,1fr) … 今は .card の overflow:hidden のおかげで列が押し広げられないが、それに頼らないための防御。 ・特設ページ（feature.php）も _grid.php を読むが、印が無いので 3列・960px のまま。 */ .list-wide main.wrap{max-width:var(--maxw-wide)} /* ★カバー画像と特設への導線は、今までと同じ大きさで中央に置く（バナー中央と同じ列・同じ式）。 top.php に部品を足したら、ここへ入れるかどうかを決めること（入れないと広い幅いっぱいに広がる）。 */ .list-wide .cover, .list-wide .feature-links{max-width:calc(var(--maxw) - 32px); margin-left:auto; margin-right:auto} /* ★5列だとカードの中で文字に使える幅が約211px。スペースの無い長い英数字の商品名が右端で切れて見えなくなるのを防ぐ */ .list-wide .card .name{overflow-wrap:anywhere} @media (min-width:960px){ .list-wide .grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (min-width:1200px){ .list-wide .grid{grid-template-columns:repeat(5,minmax(0,1fr))} } /* ★★2026-09-18（発注者決定 A）: ヘッダーとフッターの枠は、全画面で広い幅にそろえる。 ・一覧の画面では、ロゴ・見出し・商品の並び・フッターの左右の端がそろう。 ・全画面で同じ幅にする（一覧の画面だけ広げると、画面を移るたびにロゴが 160px 跳ねる）。 ★変えるのは幅だけ。高さ 84px・ナビの位置・600px で2段にする境目・左右の余白 16px は変えない。 */ .site-header > .wrap, .site-footer > .wrap{max-width:var(--maxw-wide)} /* ---- admin ---- */ .admin-nav{background:#111; color:#fff} .admin-nav .wrap{display:flex; gap:16px; align-items:center; height:52px; flex-wrap:wrap} .admin-nav a{color:#ddd; text-decoration:none; font-size:14px} .admin-nav a:hover,.admin-nav a.active{color:#fff} .admin-nav .sp{margin-left:auto} .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0} .stat{border:1px solid var(--line); border-radius:var(--radius); padding:16px} .stat .n{font-size:26px; font-weight:800} .stat .l{color:var(--muted); font-size:12px} .admin-table td,.admin-table th{font-size:13px} .pill{font-size:11px; padding:2px 8px; border-radius:999px; background:#eee; color:#333} .pill.paid{background:#e3f2e8; color:#1e7d34} .pill.shipped{background:#e3ecf7; color:#1c56b0} .pill.pending{background:#fbeee0; color:#a5642a} .pill.refunded,.pill.cancelled{background:#f7e3e3; color:#b23} .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0} .toolbar .sp{margin-left:auto} fieldset{border:1px solid var(--line); border-radius:var(--radius); margin:16px 0; padding:14px} legend{font-size:13px; color:var(--muted); padding:0 6px} .variant-row,.image-row{display:grid; grid-template-columns:2fr 1.4fr 1fr 1fr 1fr auto; gap:8px; align-items:end; margin-bottom:8px} @media (max-width:720px){ .stat-grid{grid-template-columns:1fr 1fr} .variant-row{grid-template-columns:1fr 1fr} } /* 特定商取引法に基づく表記 */ .tokusho{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px} .tokusho th,.tokusho td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top} .tokusho th{width:34%;background:#fafafa;font-weight:600;white-space:normal} @media (max-width:640px){ .tokusho,.tokusho tbody,.tokusho tr,.tokusho th,.tokusho td{display:block;width:100%} .tokusho th{border-bottom:none;background:#fafafa} .tokusho td{border-top:none;margin-bottom:2px} } /* よくある質問(FAQ) */ .faq-list{margin-top:10px;border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:10px;padding:16px 40px 16px 4px;position:relative;font-weight:600;line-height:1.6} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";position:absolute;right:10px;top:14px;font-size:20px;color:var(--muted);font-weight:400} .faq-item[open] summary::after{content:"–"} .faq-badge{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#111;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:700} .faq-qtext{flex:1} /* ★答えの中は「Aの丸」の右に、本文 → リンク の順で**縦に**積む（2026-09-07）。 以前は display:flex で［Aの丸］［本文］［リンク］を横一列に並べていたため、 ラベルやURLが長いとリンクの列が幅を取り、本文が1文字ぶんの縦帯になって 極端に伸びていた（実測: 本文の幅29px・高さ594px）。 grid の2列（丸／中身）にして、本文とリンクを同じ列の上下に置く。 */ .faq-answer{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:0 4px 18px 4px} .faq-answer::before{content:"A";align-self:start;width:24px;height:24px;border-radius:50%;background:#f0f0f0;color:#333;font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:700} .faq-atext{grid-column:2;line-height:1.8;color:#333} .faq-links{grid-column:2;min-width:0;margin-top:2px;display:flex;flex-direction:column;gap:8px} .faq-link-row{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;background:#fafafa;border:1px solid var(--line);border-radius:8px;padding:8px 12px} .faq-link-row a{font-weight:600;min-width:0;overflow-wrap:anywhere} .faq-link-url{font-size:12px;color:var(--muted);word-break:break-all} /* 注文照会 */ .lk-h{font-size:15px;margin:22px 0 8px;padding-bottom:6px;border-bottom:2px solid #111} .lk-status{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fafafa} .lk-status.is-cancel{background:#fdf3f3;border-color:#f0c8c8} .lk-status-label{font-size:18px;font-weight:700} .lk-status-desc{font-size:13px;color:#555;margin-top:2px} .lk-steps{display:flex;gap:6px;margin-top:14px} .lk-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:#aaa} .lk-step .dot{width:28px;height:28px;border-radius:50%;background:#e5e5e5;color:#999;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .lk-step.done{color:#111} .lk-step.done .dot{background:#111;color:#fff} .lk-receipt-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .lk-receipt-actions form{display:inline} /* 納品書出力 */ /* ★会員の導線（引換ページ・購入手続き。2026-09-09 発注者依頼） ★会員登録は任意なので、目立たせすぎない（買えなくなったと思わせない）。 */ .member-invite{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:14px 0;background:#fafafa} .member-invite ul{margin:0;padding-left:1.2em} .member-invite li{margin:3px 0;font-size:14px;line-height:1.7} .member-invite .muted{margin:8px 0 0;font-size:12px} .pk-filter{background:#fafafa;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px} .pk-filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:end} .pk-filter-row > div{min-width:150px} .pk-filter-row label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px} .pk-filter-btn{min-width:auto !important} .pk-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 6px} .pk-check{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer} .pk-check input{width:auto;margin:0} /* ============================================================ M7: トップバナー / 特設ページ / 発売日・予約 ★外部JS・外部CSSライブラリに依存しない（docs/requirements.md §4-1） ============================================================ */ /* --- トップバナー（ループ式のカルーセル） --- ★★2026-09-14 発注者依頼で作り直した（HTML と JS は app/views/front/_banners.php）。 ・ヘッダの**直下**、
の**外**に出る（_header.php）。上の余白は 0。 .wrap の外なので横幅は画面ちょうど＝左右に前後のバナーを見せられる。 ★100vw や負のマージンで .wrap からはみ出させる形にしないこと。100vw は縦スクロールバーの幅を 含むので、環境によっては**必ず横スクロールが出る**。 ・中央のバナーの幅は読む幅の列（--maxw の中身＝960-16×2＝928px）とそろえ、画面が狭いときは 84%。 ★2026-09-18 から、トップと商品一覧の本文（商品の並び）は広い幅（--maxw-wide・中身は最大 1248px）に広がる。 バナーは --maxw のまま（寸法を変えない・Retail 35章）。--maxw-wide に替えると PC で 1248×702 になる。 残りの左右に、前後のバナーの一部が見える。間隔は小さめ（8px）。 ・角は丸めない（border-radius を付けない。背景の帯も敷かない）。 ・JS が動く前（と動かない環境）は、横スクロールできる帯（スクロールスナップ）。 JS が動くと .is-ready が付き、帯を transform で動かす（ループは JS の複製で作る）。 */ .bnr{ --bnr-w:min(calc(var(--maxw) - 32px), 84%); --bnr-gap:8px; position:relative; margin:0 0 8px; } /* ★帯の最大幅は「中央＋前後1枚ずつ」（928×3＋8×2＝2800px）。これより広い画面（横長モニタ・縮小表示）で 帯を画面いっぱいにすると、ループの付け替えの直前に、左右の複製（2枚ずつ）の外側の何も無い所が見える。 */ .bnr-viewport{overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; max-width:calc((var(--maxw) - 32px) * 3 + var(--bnr-gap) * 2); margin:0 auto} .bnr-viewport::-webkit-scrollbar{display:none} /* ★position:relative は JS が slide.offsetLeft を「帯の中での位置」として読むため。 */ .bnr-track{display:flex; gap:var(--bnr-gap); position:relative} /* ★flex-basis の % も margin の % も、同じ「帯の幅（＝画面の幅）」を基準に解決される。 だから左の余白 (100% - 幅) / 2 で、JS が無くても1枚目が中央に来る。 */ .bnr-slide{flex:0 0 var(--bnr-w); scroll-snap-align:center; user-select:none; -webkit-user-select:none} .bnr-slide:first-child{margin-left:calc((100% - var(--bnr-w)) / 2)} .bnr-slide:last-child{margin-right:calc((100% - var(--bnr-w)) / 2)} .bnr-slide a{display:block; text-decoration:none; position:relative} /* ★キーボードで来たときの枠は**内側**に描く。リンクは絵と同じ大きさで、外側に描くと上下が枠 （overflow:hidden）に切られて見えない。黒と白の二重にして、暗い絵でも明るい絵でも見えるようにする。 */ .bnr-slide a:focus-visible{outline:none} .bnr-slide a:focus-visible::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 3px var(--accent), inset 0 0 0 6px #fff} /* ★★2026-09-15 発注者依頼: 表示比率は **PC 16:9・スマホ 4:3** に統一（境目は 640px。SP用画像の と同じ）。 ・比率は枠（aspect-ratio）で決める。★auto を付けないこと（付けると読み込んだ絵の比率が優先され、 バナーごとに高さが変わる） ・絵は object-fit:cover で**切り抜く**（縦横に引き伸ばさない）。切り抜きの基準は**中央**（object-position） ・高さを px で決め打ちしないこと（幅に合わせて比率どおりに伸び縮みさせる） ★同じ画面の中では全部のバナーが同じ比率・同じ大きさになる（SP用の画像の有無で変えない）。 */ .bnr-slide img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:50% 50%; display:block; -webkit-user-drag:none} /* ★touch-action: 縦のスクロールと2本指の拡大はブラウザに任せ、横の動きだけを受け取る。 pinch-zoom を付け忘れると、バナーの上から始めた拡大が効かない（小さな文字を読めない）。 */ .bnr.is-ready .bnr-viewport{overflow:hidden; scroll-snap-type:none; touch-action:pan-y pinch-zoom} /* ★transition の時間は _banners.php の MOVE_MS と同じ値にすること（ループの付け替えの時機がずれる） */ .bnr.is-ready .bnr-track{transition:transform .45s cubic-bezier(.25,.8,.25,1); will-change:transform} .bnr.is-ready .bnr-slide{margin-left:0; margin-right:0} .bnr.is-dragging{cursor:grabbing} .bnr-dots{display:flex; justify-content:center; gap:8px; margin-top:10px} .bnr-dot{ width:8px; height:8px; padding:0; border:none; border-radius:50%; background:#ccc; cursor:pointer; transition:background .2s, transform .2s; } .bnr-dot.is-current{background:var(--accent); transform:scale(1.3)} @media (max-width:640px){ /* ★スマホは読みやすさを優先して、中央のバナーを画面の幅いっぱい近くに（左右 20px ずつ）。 間隔 6px を引いた残り 14px ずつに、前後のバナーが少しだけ見える。 */ .bnr{--bnr-w:calc(100% - 40px); --bnr-gap:6px} /* ★1枚だけのときは前後が無いので、画面の左右いっぱいに（2026-09-10 発注者依頼のまま）。 */ .bnr[data-count="1"]{--bnr-w:100%} /* ★★スマホは全部のバナーを 4:3（2026-09-15 発注者依頼）。PC の 16:9 の高さを持ち越さない。 SP用の画像が無いバナーは、PC用の画像を中央を基準に 4:3 へ切り抜く（左右が切れる）。 ★2026-09-14 版の「SP用の画像があるときだけ 4:3・無いものは contain」はやめた （バナーごと・店ごとに高さが変わり、完成条件「すべて同じ比率・同じ大きさ」に合わない）。 */ .bnr-slide img{aspect-ratio:4/3} } @media (prefers-reduced-motion: reduce){ .bnr.is-ready .bnr-track{transition:none} .bnr-dot{transition:none} } /* --- トップから特設ページへの導線 --- */ .feature-links{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 24px} .feature-link{ display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg); } .feature-link img{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--soft)} .feature-link span{display:block; padding:8px 10px; font-size:13px; font-weight:600; line-height:1.4} @media (max-width:720px){ .feature-links{grid-template-columns:1fr 1fr; gap:10px} } /* --- 特設ページ（ブロックを積む） --- */ .ft-page{margin:0 0 40px} .ft-block{margin:0 0 36px} .ft-block:last-child{margin-bottom:0} .ft-hero{margin:0 -16px 36px; text-align:center} .ft-hero img{width:100%; height:auto; object-fit:cover; display:block} .ft-hero-body{padding:18px 16px 0} .ft-hero h1{font-size:24px; margin:0 0 6px; line-height:1.35} .ft-hero .ft-sub{color:var(--muted); font-size:14px; margin:0} .ft-hero .ft-release{font-size:15px; font-weight:700; margin:10px 0 0} .ft-h{font-size:19px; margin:0 0 12px; padding-bottom:6px; border-bottom:2px solid var(--fg)} .ft-text{font-size:15px; line-height:1.9; color:#333; white-space:pre-wrap; overflow-wrap:anywhere} .ft-image img{width:100%; height:auto; border-radius:var(--radius)} .ft-cap{font-size:12px; color:var(--muted); margin-top:6px; text-align:center} /* 動画（YouTube）。★IDだけを埋め込む。生URLは src に入れない（app/lib/content.php） */ .ft-video{position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000} .ft-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0} .ft-bonus,.ft-notice{border-radius:var(--radius); padding:14px 16px; font-size:14px; line-height:1.8} .ft-bonus{background:#fff8e6; border:1px solid #f0dfb0} .ft-notice{background:var(--soft); border:1px solid var(--line); color:#444} .ft-bonus h2,.ft-notice h2{font-size:15px; margin:0 0 8px} /* カウントダウン */ .ft-cd{text-align:center; border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px; background:var(--soft)} .ft-cd-label{font-size:13px; color:var(--muted); margin:0 0 10px} .ft-cd-nums{display:flex; justify-content:center; gap:14px} .ft-cd-unit{min-width:56px} .ft-cd-n{font-size:28px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums} .ft-cd-u{font-size:11px; color:var(--muted)} .ft-cd-over{font-size:15px; font-weight:700} @media (max-width:420px){ .ft-cd-nums{gap:8px} .ft-cd-unit{min-width:44px} .ft-cd-n{font-size:22px} } /* --- 発売日・形態ラベル・予約バッジ --- */ .badge.preorder{background:#b4532a} .badge.edition{background:#555} .release{font-size:13px; color:var(--muted)} .pd-release{font-size:14px; margin:4px 0 0} .pd-release strong{font-weight:700; color:var(--fg)} .preorder-note{background:#fff8e6; border:1px solid #f0dfb0; border-radius:var(--radius); padding:12px 14px; font-size:13px; line-height:1.8; margin:12px 0} /* ★★2026-09-16 発注者依頼: 同梱不可のお知らせ（商品ページ・カート）。 ★予約の注記（薄い黄）とは別の色にする。並んで出ることがあり、同じ色だと1つに見える。 */ .no-combine-note{background:#fdeeee; border:1px solid #e9c3c3; border-radius:var(--radius); padding:12px 14px; font-size:13px; line-height:1.8; margin:12px 0; font-weight:600} /* 同じ作品の他の形態（作品グループ） */ .editions{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 0} .edition-card{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:8px; padding:6px 10px 6px 6px; font-size:13px; } .edition-card.is-current{border-color:var(--accent); background:var(--soft); font-weight:700} .edition-card img{width:36px; height:36px; object-fit:cover; border-radius:4px; background:var(--soft)} /* ============================================================ M8: 購入者向け UI（アーティスト EC 特化） ★スマホ優先。表組みで横に並べない。 ============================================================ */ /* --- 作品（形態違いのまとまり） --- */ .work{margin:0 0 34px} .work-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid var(--fg)} .work-name{font-size:18px; margin:0; line-height:1.4} .work-release{font-size:13px; font-weight:700} .work-count{font-size:12px; color:var(--muted); margin-left:auto} /* ★狭い画面では auto マージンで単独行に飛ばさず、発売日の隣に並べる */ @media (max-width:560px){ .work-head{gap:4px 8px} .work-name{flex:0 0 100%; font-size:16px} .work-count{margin-left:0} } .work-other{font-size:16px; margin:34px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line)} /* ★★2026-09-16 発注者依頼: ツアー／イベントのグループ（店頭トップと商品一覧。2026-09-17〜）。作品の**上の層**なので、 作品の見出し（.work-name 18px）より大きく・強くして、層の違いが一目で分かるようにする。 */ .tour{margin:0 0 44px} .tour-name{font-size:22px; margin:0 0 16px; line-height:1.4; padding-bottom:10px; border-bottom:2px solid var(--accent)} /* 未分類の見出しは控えめに（グループを作った店でだけ出る） */ .tour-other{margin-top:44px; border-bottom-color:var(--line); color:var(--muted); font-size:18px} @media (max-width:640px){ .tour-name{font-size:19px} .tour-other{font-size:16px} } /* --- 購入ステップ --- */ .steps{display:flex; list-style:none; margin:0 0 20px; padding:0; gap:6px; counter-reset:step} .steps li{flex:1; text-align:center; font-size:12px; color:#aaa; padding:8px 2px 6px; border-top:3px solid var(--line); counter-increment:step} .steps li::before{content:counter(step) ". "} .steps li.done{color:var(--muted); border-top-color:var(--muted)} .steps li.current{color:var(--fg); font-weight:700; border-top-color:var(--accent)} /* --- カート（カード型） --- */ .cart-list{border-top:1px solid var(--line); margin-bottom:20px} .cart-item{display:grid; grid-template-columns:88px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:start} .cart-item.is-unavailable{opacity:.6} .cart-thumb{display:block; width:88px; text-decoration:none} .cart-thumb img{width:88px; height:88px; object-fit:cover; border-radius:8px; background:var(--soft)} .cart-thumb .no-img{display:flex; width:88px; height:88px; align-items:center; justify-content:center; background:var(--soft); border-radius:8px; color:var(--muted); font-size:11px} .cart-body{min-width:0} .cart-name{font-weight:600; font-size:15px; text-decoration:none; line-height:1.45; display:block} .cart-meta{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:5px} .cart-controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px} .cart-controls form{display:flex; gap:6px; align-items:center; margin:0} .qty-form .qty-label{margin:0; font-size:12px} .cart-item .qty{width:72px} .cart-price{text-align:right; white-space:nowrap} .cart-line-total{font-weight:700; font-size:16px} .cart-foot{max-width:420px; margin-left:auto} .empty{text-align:center; padding:40px 0} .btn-quiet{background:none; border:none; color:var(--muted); text-decoration:underline; padding:6px 4px; cursor:pointer; font-size:13px} .link-quiet{color:var(--muted); font-size:13px} @media (max-width:560px){ .cart-item{grid-template-columns:72px 1fr; gap:12px} .cart-thumb, .cart-thumb img, .cart-thumb .no-img{width:72px} .cart-thumb img, .cart-thumb .no-img{height:72px} /* 金額は画像の下ではなく、本文の下に回して右寄せ */ .cart-price{grid-column:2; text-align:left; margin-top:2px} .cart-line-total{font-size:17px} .cart-foot{max-width:none} } /* --- 購入手続き --- */ .checkout{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start; margin:20px 0} .checkout-side{position:sticky; top:72px} .sec-h{font-size:16px; margin:24px 0 4px} .secure-note{margin-top:10px} @media (max-width:820px){ .checkout{grid-template-columns:1fr; gap:8px} /* ★スマホでは合計と支払いボタンを先に見せる。 住所を全部埋めてから金額に気づく、という順序にしない。 */ .checkout-side{position:static; order:-1} .checkout-main{order:1} } /* --- 注文完了 --- */ .done-hero{text-align:center; padding:20px 0 24px} .done-mark{width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--ok); color:#fff; font-size:30px; line-height:56px} .done-number{font-size:15px; margin:14px 0 4px} .done-number strong{display:block; font-size:22px; letter-spacing:.06em; margin-top:2px} .done-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:18px 0 10px} .ship-to{background:var(--soft); border-radius:var(--radius); padding:14px 16px; font-size:14px; line-height:1.8} /* ============================================================ M10: シリアル引換（購入者向け） ★金額は出さない。会場でお支払い済み。 ============================================================ */ .serial-form{max-width:420px; margin:16px 0} .serial-input{ font-size:22px; letter-spacing:.18em; text-align:center; font-weight:700; text-transform:uppercase; padding:14px 12px; } .serial-item{display:flex; gap:14px; align-items:center; margin:16px 0; border:1px solid var(--line); border-radius:var(--radius); padding:12px} .serial-thumb{width:72px; height:72px; object-fit:cover; border-radius:8px; background:var(--soft); flex:0 0 auto} .serial-name{font-weight:700; font-size:16px; line-height:1.4} /* 種類（サイズ）の選択。★指で押せる大きさにする */ .variant-picker{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 4px} .variant-opt{ display:flex; align-items:center; gap:8px; margin:0; cursor:pointer; border:1px solid var(--line); border-radius:10px; padding:12px 18px; font-size:15px; color:var(--fg); min-width:88px; justify-content:center; } .variant-opt input{width:auto; margin:0} .variant-opt:has(input:checked){border-color:var(--accent); background:var(--soft); font-weight:700} /* ★2026-09-18 発注者依頼: 売り切れの種類は薄く・押せない形で並べ、「売り切れ」の札を添える（views/front/serial.php） */ /* ★札は1行のまま（white-space:nowrap）。狭い画面で入りきらないときは札ごと次の行へ回す（flex-wrap）。 それまでは3つ並びのスマホ幅で「売／り／切／れ」と1文字ずつ縦に折れていた。 */ .variant-opt.is-soldout{color:var(--muted); background:var(--soft); border-style:dashed; cursor:not-allowed; opacity:.6; flex-wrap:wrap; row-gap:4px} .soldout-tag{font-size:11px; font-weight:700; color:#fff; background:#888; border-radius:999px; padding:1px 8px; line-height:1.5; white-space:nowrap} .variant-only{margin:18px 0 6px; font-size:15px} /* ★2026-09-18 発注者依頼: シリアル引換の確認画面（views/front/serial.php の step=review）。 ・住所・電話番号・メールアドレスは間違いが多いので、太字＋薄い黄色の帯で目立たせる（発注者決定）。 ・並びは .summary.summary-info（ラベル＋値・左揃え・480px 以下はラベルを上に積む）を使い回す。 */ .sr-variant{margin:2px 0} .sr-review{margin:16px 0} .sr-emph{background:#fff6cc; border:1px solid #efd77a; border-radius:8px; padding:10px 12px; margin:10px 0 6px} .sr-emph-head{font-size:13px; font-weight:700; color:#5c4700; margin:0 0 4px} /* ★.summary-info .line > span:first-child（後ろにある・同じ詳細度）に負けないよう .summary-info から指す */ .summary-info .sr-emph .line > span:first-child{color:#5c4700} .sr-emph .line > span:last-child{font-size:16px} .sr-emph .line strong{font-weight:800} .sr-mail-note{font-size:12px; margin:4px 0 0} .sr-question{font-size:17px; font-weight:700; text-align:center; margin:24px 0 12px} .sr-actions{display:flex; flex-direction:column; gap:10px} @media (max-width:480px){ .variant-opt{flex:1 1 calc(33% - 10px); padding:12px 8px; min-width:0} .serial-input{font-size:19px; letter-spacing:.12em} } /* ============================================================ Phase 10: マイページ（お客様のログイン） ★ページ内