@charset "utf-8";
/* page-goods.css — フォトグッズ */

/* ===== HERO（コンパクト・画像なしグラデ） ===== */
/* HERO：手に取ったフォトブックの実写を敷き、上部を暗くするスクリム＋ブランド色ティントを重ねる
   （見出し・パンくずは上部配置のため、明るい障子側＝上を濃いめに落として白文字を読ませる） */
.ph{position:relative;padding:118px 0 46px;overflow:hidden;
    background:linear-gradient(180deg,rgba(38,18,71,.72) 0%,rgba(38,18,71,.42) 30%,rgba(38,18,71,.30) 60%,rgba(38,18,71,.55) 100%),
               linear-gradient(150deg,rgba(122,52,192,.40) 0%,rgba(232,32,144,.24) 55%,rgba(245,133,42,.12) 100%),
               url('../img/goods-hero.webp') center 42%/cover}
.ph .crumbs{position:relative;z-index:2;max-width:1120px;width:100%;margin:0 auto;padding:0 40px}
.ph .crumbs ol{list-style:none;display:flex;gap:8px;padding:0;margin:0;font-size:.76rem;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.ph .crumbs li{color:rgba(255,255,255,.85)}
.ph .crumbs li:not(:last-child)::after{content:"›";margin-left:8px;color:rgba(255,255,255,.6)}
.ph .crumbs a{color:#fff}
.ph-body{position:relative;z-index:2;max-width:1120px;width:100%;margin:14px auto 0;padding:0 40px}
.ph-title{font-family:var(--min);font-weight:800;color:#fff;font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:.12em;margin:10px 0 16px;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.ph-tag{color:#fff;font-family:var(--min);font-weight:500;font-size:clamp(.92rem,1.35vw,1.1rem);letter-spacing:.06em;line-height:1.8;margin-bottom:0;text-shadow:0 2px 16px rgba(0,0,0,.4)}

/* 共通見出し要素 */
.gd-idx{display:inline-block;font-family:var(--cor);font-style:italic;font-size:1.1rem;letter-spacing:.1em;color:var(--gold);margin-bottom:10px}
.gd-idx.light{color:#FFE3A6}
.gd-eng{font-family:var(--jp);letter-spacing:.28em;text-transform:uppercase;font-size:.62rem;font-weight:600;display:block;margin-bottom:8px}

/* ===== 01 KEEP IT（HERO直下：光源なし） ===== */
.gd-intro{background:linear-gradient(180deg,var(--void-2) 0%,var(--void) 100%);text-align:center}
.gd-intro .eng{color:var(--pink);margin-bottom:14px}
.gd-intro h2{font-family:var(--min);font-weight:700;color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.08em;margin:0 0 26px}
.gd-intro p{max-width:660px;margin:0 auto 16px;color:var(--soft-2);font-size:.9rem;line-height:2.05;letter-spacing:.02em}

/* ===== 02 FRAME & DISPLAY ===== */
.gd-frame{position:relative;overflow:hidden;background:linear-gradient(140deg,#C21038 0%,#E01560 46%,#6A2CB0 100%)}
.gd-frame::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(130px);opacity:.4;background:var(--purple);bottom:-180px;right:-120px;pointer-events:none}
.gd-frame .mw{position:relative;z-index:1}
.gd-head{margin-bottom:42px}
.gd-head .eng{color:#fff;opacity:.9}
.gd-head h2{font-family:var(--min);font-weight:700;color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.08em;margin:4px 0 0}
.gd-items{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gd-item{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.26);display:flex;flex-direction:column}
.gd-img{position:relative;display:block;aspect-ratio:4/3;background-size:cover;background-position:center}
.gd-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:rgba(255,255,255,.92);font-family:var(--min);font-size:1rem;letter-spacing:.16em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.gd-soon small{font-family:var(--cor);font-style:italic;font-size:.72rem;letter-spacing:.08em;opacity:.85}
.gd-item-b{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.gd-item-b .gd-eng{color:var(--magenta)}
.gd-item-b h3{font-family:var(--min);font-weight:700;color:var(--ink);font-size:1.15rem;letter-spacing:.04em;margin:0 0 12px}
.gd-item-b p{color:var(--ink-2);font-size:.82rem;line-height:1.95;margin:0 0 18px;flex:1}
.gd-price{font-family:var(--min);font-weight:700;font-size:1.5rem;letter-spacing:.02em;background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.gd-price small{font-size:.72rem;font-weight:500;margin-left:4px;-webkit-text-fill-color:var(--ink-2);color:var(--ink-2)}
.gd-ship{display:block;margin-top:6px;color:var(--ink-mut);font-size:.7rem;letter-spacing:.02em}

/* ===== 03 PHOTOBOOKS ===== */
.gd-books{position:relative;overflow:hidden;background:linear-gradient(155deg,#2A1150 0%,#6A2CB0 48%,#E82090 100%)}
.gd-books::after{content:"";position:absolute;width:540px;height:540px;border-radius:50%;filter:blur(130px);opacity:.34;background:var(--gold);bottom:-190px;left:-130px;pointer-events:none}
.gd-books .mw{position:relative;z-index:1}
.gd-books .gd-head .eng{color:#fff;opacity:.9}
.gd-books .gd-head h2{font-family:var(--min);font-weight:700;color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.08em;margin:4px 0 0}
.gd-book{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.28);margin-bottom:32px}
.gd-book:last-child{margin-bottom:0}
.gd-book-top{display:grid;grid-template-columns:300px 1fr;gap:0}
.gd-img--book{aspect-ratio:auto;height:100%;min-height:280px}
.gd-book-info{padding:32px 34px}
.gd-book-info .gd-eng{color:var(--magenta)}
.gd-book-info h3{font-family:var(--min);font-weight:700;color:var(--ink);font-size:1.3rem;letter-spacing:.04em;margin:0 0 6px}
.gd-size{display:inline-block;color:var(--ink-mut);font-size:.74rem;letter-spacing:.06em;margin-bottom:14px}
.gd-book-info p{color:var(--ink-2);font-size:.83rem;line-height:2;margin:0 0 18px}
.gd-from{font-family:var(--min);font-weight:700;color:var(--ink);font-size:1.15rem;letter-spacing:.02em}
.gd-from .gd-from-p{font-size:.82rem;color:var(--ink-2);margin-right:6px}
.gd-from small{font-size:.7rem;font-weight:500;color:var(--ink-2);margin-left:2px}
.gd-tbl-wrap{padding:0 34px 32px}
.gd-tbl-label{display:block;color:var(--ink-mut);font-size:.72rem;letter-spacing:.06em;margin:6px 0 14px}
.gd-tbl{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.gd-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 6px;border:1px solid rgba(122,52,192,.2);border-radius:10px;background:#fff;text-align:center}
.gd-cell .gd-p{font-family:var(--cor);font-style:italic;font-weight:600;color:var(--magenta);font-size:.94rem}
.gd-cell .gd-y{font-family:var(--min);font-weight:700;color:var(--ink);font-size:.9rem}
.gd-cell .gd-yi{color:var(--ink-mut);font-size:.64rem}

/* ===== NOTES ===== */
.gd-notes{background:var(--void)}
.gd-notes .mw{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.gd-note-col h3{font-family:var(--min);font-weight:700;color:#fff;font-size:1.05rem;letter-spacing:.06em;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid rgba(198,168,222,.2)}
.gd-note-col ul{list-style:none;margin:0;padding:0}
.gd-note-col li{position:relative;padding-left:18px;margin-bottom:12px;color:var(--soft-2);font-size:.82rem;line-height:1.85}
.gd-note-col li::before{content:"–";position:absolute;left:0;color:var(--pink)}

/* ===== CTA（page-about.css からコピー） ===== */
.hubcta{padding:0}
.hubcta{position:relative;text-align:center;background:#2A1150 url('../img/flower-shizuku.jpg') center/cover}
.hubcta::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(106,44,176,.74) 0%,rgba(232,32,144,.6) 40%,rgba(47,182,230,.56) 68%,rgba(245,133,42,.66) 100%)}
.hubcta .mw{position:relative;z-index:1;padding:96px 40px}
.hubcta .eng{color:rgba(255,255,255,.9)}
.hubcta h2{font-family:var(--min);font-weight:700;color:#fff;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.7;letter-spacing:.06em;margin:14px 0 12px;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.hubcta p{color:rgba(255,255,255,.92);font-size:.82rem;margin-bottom:28px;letter-spacing:.04em}
.hubcta .book{background:#fff;color:#8A1E5A}

/* ===== レスポンシブ ===== */
@media(max-width:900px){
  .ph{padding:96px 0 38px}.ph .crumbs{padding:0 24px}.ph-body{padding:0 24px}
  .gd-items{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .gd-book-top{grid-template-columns:1fr}
  .gd-img--book{min-height:200px;aspect-ratio:16/10}
  .gd-book-info{padding:26px 24px}
  .gd-tbl-wrap{padding:0 24px 26px}
  .gd-notes .mw{grid-template-columns:1fr;gap:34px}
  .hubcta .mw{padding:74px 24px}
}
@media(max-width:520px){
  .gd-tbl{grid-template-columns:repeat(2,1fr)}
}