/* Predy Gifts のトップ・企画履歴・当選履歴（白い地＋5色。🔴ベージュ禁止） */
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* 上の帯 */
.hd{display:block;height:auto;border-bottom:2px solid var(--ink);background:var(--white);position:sticky;top:0;z-index:20}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.logo{gap:0}
.nav{display:flex;gap:2px}
.nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 8px;font-size:13px;font-weight:700;text-decoration:none;border-radius:10px}
.nav a:hover{background:var(--paper2)}

/* いちばん上＝表紙（11/1 boss「案1 企画を表紙にする・最高」）
   受付中の企画そのものを表紙にする。一番大きい見出しが賞品名で、企画が変わるたびに表紙も変わる。独立した札は置かない */
.cover{position:relative;padding:20px 0 30px}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,var(--or) 0 20%,var(--rd) 20% 40%,var(--bl) 40% 60%,var(--gn) 60% 80%,var(--yl) 80%)}
.cv .r1{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:20px}
.cv .num{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.live{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700}
.live[hidden]{display:none}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gn);box-shadow:0 0 0 3px rgba(18,176,95,.18)}
.cv h1{font-weight:900;font-size:clamp(28px,8.2vw,32px);line-height:1.32;letter-spacing:-.01em;margin-top:10px}
.cv h1 .pz{background:linear-gradient(transparent 64%,var(--yl) 64% 94%,transparent 94%)}   /* 黄の印は賞品名だけ */
.cv .sub{font-size:16px;font-weight:700;margin-top:8px}
.cv .sub span{display:block;font-size:13px;color:var(--mute);font-weight:500}
.kp{word-break:keep-all;overflow-wrap:anywhere}   /* <wbr> と空白でだけ折る（「に。」だけが次の行に落ちないように） */
.kv{margin:6px 0 0}
.kv img{display:block;height:160px;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
.when{display:grid;grid-template-columns:auto 1fr;gap:0 14px;margin-top:6px;padding:10px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.when dt{font-size:12px;font-weight:700;color:var(--mute);padding-top:3px}
.when dd{font-family:var(--disp);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.info .empty{margin-top:10px}
/* ガチャのページへ：青の面に玉3つ。玉と字はひとつのリンク */
.go1{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:0 14px;min-height:104px;margin-top:16px;padding:6px 20px 6px 8px;
  background:var(--bl);color:var(--white);border-radius:18px;text-decoration:none;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.go1:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.go1 img{display:block;width:92px;height:auto;margin:-14px 0 -8px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.22))}
.go1 b{display:block;font-size:20px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.go1 small{display:block;font-size:12px;font-weight:500;opacity:.92;margin-top:2px;word-break:keep-all;overflow-wrap:anywhere}
.go1 .arw{width:11px;height:11px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg);margin-right:4px}
/* 試遊の入口（企画がないときだけ表紙に出す）：本番と同じ青にしない。白に墨の線、矢印は緑 */
.go1.try1{background:var(--white);color:var(--ink);border:2px solid var(--ink)}
.go1.try1 .arw{color:var(--gn)}
.go1:focus-visible{outline:3px solid var(--bl);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .go1{transition:none} .go1:active{transform:none} }
@media (min-width:860px){
  .cover{padding:48px 0 60px}
  .cv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-areas:"top top" "art info";gap:0 80px;align-items:center}
  .cv-hd{grid-area:top}
  .cv h1{font-size:52px;line-height:1.22;margin-top:14px}
  .cv .sub{font-size:20px;margin-top:10px;display:flex;align-items:baseline;gap:16px}
  .cv .sub span{display:inline;font-size:14px}
  .kv{grid-area:art;margin:16px 0 0}
  .kv img{height:auto;width:100%;max-width:500px}
  .info{grid-area:info;margin-top:16px}
  .when dd{font-size:20px}
  .go1{grid-template-columns:96px minmax(0,1fr) auto;min-height:108px;margin-top:22px}
  .go1 img{width:96px}
  .go1 b{font-size:22px}
}

/* 段の見出し（頭に色の四角） */
.blk{margin-top:44px}
.sec{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:900;letter-spacing:.02em}
.sec i{width:14px;height:14px;border-radius:4px;background:var(--c,var(--or));border:2px solid var(--ink)}
.how{--c:var(--bl)} .trial{--c:var(--gn)} .recent-c{--c:var(--yl)} .recent-w{--c:var(--rd)}
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.more{min-height:44px;display:inline-flex;align-items:center;font-size:13px;font-weight:700}
.empty{margin-top:14px;font-size:15px;line-height:1.9}
.empty a{font-weight:700}

/* 「過去の企画一覧」（11/1 boss「右下とかに過去の企画一覧を入れたい」） */
.past{display:flex;justify-content:flex-end;margin-top:4px}
.past a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:13px;font-weight:700;color:var(--ink);text-underline-offset:4px}
.past a::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}

/* 試遊へのリンクのボタン（玉3つの絵と▶） */
.go{display:grid;grid-template-columns:minmax(0,40%) 1fr;grid-template-areas:"art text" "art play";align-items:center;gap:10px 14px;padding:10px;
  border:2px solid var(--ink);border-radius:18px;background:var(--white);box-shadow:0 5px 0 var(--ink);text-decoration:none;color:var(--ink);
  transition:transform .08s,box-shadow .08s}
.go:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.go-art{grid-area:art;aspect-ratio:1/1;max-width:180px;align-self:center}
.go-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(0,0,0,.18))}
.go-text{grid-area:text;align-self:end;padding-top:6px}
.go-text b{display:block;font-size:18px;font-weight:900;line-height:1.35}
.go-text small{display:block;font-size:12px;line-height:1.6;margin-top:4px}
.go-play{grid-area:play;align-self:start;width:52px;height:52px;border-radius:50%;background:var(--ink);position:relative}
.go-play::after{content:"";position:absolute;left:20px;top:16px;border-left:15px solid var(--white);border-top:10px solid transparent;border-bottom:10px solid transparent}
/* 試遊は小さいバナー（11/1 boss「試遊はバナーサイズ下げてもいい」） */
.go.small{margin-top:14px;max-width:400px;grid-template-columns:72px 1fr;grid-template-areas:"art text" "art play";gap:2px 12px;padding:8px 12px;box-shadow:0 4px 0 var(--ink)}
.go.small .go-text{padding-top:2px}
.go.small .go-text b{font-size:16px}
.go.small .go-play{background:var(--gn);width:44px;height:44px}
.go.small .go-play::after{left:17px;top:13px;border-left-width:13px;border-top-width:9px;border-bottom-width:9px}
/* 参加のしかた */
.steps{list-style:none;margin-top:14px;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps li:nth-child(1){--k:var(--or)} .steps li:nth-child(2){--k:var(--bl)} .steps li:nth-child(3){--k:var(--gn)}
.steps li b{flex:none;width:44px;height:44px;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:21px;color:var(--white);background:var(--k);border:2px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink)}
.steps strong{display:block;font-size:16px;font-weight:900}
.steps span{display:block;font-size:13px;color:var(--mute)}
@media (min-width:860px){ .steps{grid-template-columns:repeat(3,1fr);gap:20px} }

/* 最近の企画・当選、履歴のページ */
.two{display:grid;gap:0 40px}
@media (min-width:860px){ .two{grid-template-columns:1fr 1fr;align-items:start} }
.two .blk{padding:0}
.list{list-style:none;margin-top:8px}
.list li{padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.list li:last-child{border-bottom:1px solid var(--line)}
.list .none{display:block;color:var(--mute)}
.list .w{display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:baseline}
.list .w:nth-child(5n+1){--k:var(--or)} .list .w:nth-child(5n+2){--k:var(--rd)} .list .w:nth-child(5n+3){--k:var(--bl)} .list .w:nth-child(5n+4){--k:var(--gn)} .list .w:nth-child(5n+5){--k:var(--yl)}
.list .d{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.list .id{font-weight:900;overflow-wrap:anywhere}
.list .id::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--k);margin-right:8px;vertical-align:1px}
.list .pz{grid-column:2;font-size:12px;color:var(--mute)}
.list .c{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline}
.list .c .d{font-family:var(--body);font-size:13px;color:var(--ink)}
.list .c .pz{grid-column:1;font-size:13px;color:var(--ink)}
.list .c .pz em{font-style:normal;font-size:12px;color:var(--mute);margin-left:6px}
.list .c .st{grid-column:2;grid-row:1;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;border:1.5px solid var(--ink)}
.list .c .st.open{background:var(--gn);color:var(--white)}
.list .c .links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 16px}
.list .c .links a{min-height:44px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;overflow-wrap:anywhere}

/* 履歴のページの頭 */
.page-h{padding-top:24px}
.page-h h1{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:28px;font-weight:900}
.page-h h1 i{width:16px;height:16px;border-radius:4px;background:var(--c);border:2px solid var(--ink)}
.page-h p{font-size:13px;color:var(--mute);margin-top:4px}
.page-c{--c:var(--yl)} .page-w{--c:var(--rd)}

/* 下の帯 */
.ft{margin-top:64px;border-top:2px solid var(--ink)}
.ft-in{display:flex;gap:20px;justify-content:center;padding-top:12px;padding-bottom:calc(28px + env(safe-area-inset-bottom));font-size:13px}
.ft a{min-height:44px;display:inline-flex;align-items:center;color:var(--mute)}
/* 320px：ロゴと上の帯の字を1行に保つ */
.logo,.nav a{white-space:nowrap}
@media (max-width:359px){.logo{font-size:17px}.hd-in{gap:6px}.nav a{padding:0 5px;font-size:12px}}