/* Aster Draw — 公開入口の見た目 (Phase 313)
   ⚠️ 本体の src/styles.css (567KB) は読み込まない。検索から来た人の最初の 1 枚なので軽さを優先する。
   主役は assets/hero-home.jpg。絵を小さく飾らず、画面の上半分を絵にして「世界」を先に見せ、
   そのあと紙の上で情報を静かに並べる。カードを敷き詰めない・数字タイルを並べない。 */
:root{
  --paper:#faf8f3; --paper-2:#f4f0e7; --ink:#1f1c17; --ink-2:#4a443a; --ink-3:#7d7466;
  --rule:#e2dccf; --lamp:#a8762a; --lamp-2:#f7f0df; --link:#2c5a4c;
  --measure:40rem;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#14120f; --paper-2:#1b1814; --ink:#efeae0; --ink-2:#b9b1a3; --ink-3:#8a8172;
         --rule:#2f2a23; --lamp:#d9ae5c; --lamp-2:#241d12; --link:#8cc4b0; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.8;letter-spacing:.01em}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.25rem}
a{color:var(--link);text-underline-offset:.18em}

/* --- 銘 (ヘッダは絵の上に重ねる。帯にしない) ------------------------------- */
.mark{position:absolute;top:0;left:0;right:0;z-index:2}
.mark .wrap{display:flex;align-items:center;gap:.5rem;padding-top:1rem;padding-bottom:1rem}
/* ⚠️ 絵の上でも墨色。白文字にして絵を暗くする方向へ戻さない (Phase 293) */
.mark a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:#23201b;
  font-weight:700;font-size:.98rem;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.mark .glyph{width:1.45rem;height:1.45rem;display:grid;place-items:center;border-radius:.4rem;
  background:#a8762a;color:#fff;font-size:.86rem;line-height:1}

/* --- 絵 -------------------------------------------------------------------
   ⚠️ Phase 293 (fa77234) の判断に従う: **絵を暗幕で潰して白文字にしない**。
   hero-home.jpg は輝度中央値 194 の高明度の絵画で、暗色 overlay を掛けると
   空の水色・逆光の暖色・竜が消える。文字は墨色のまま絵の明るい面へ直接置く。 */
.scene{position:relative;isolation:isolate}
.scene>img{display:block;width:100%;height:100%;object-fit:cover;object-position:18% 42%}
.scene.tall{height:46vh;min-height:14.5rem;max-height:20rem}
.scene.band{height:26vw;min-height:7rem;max-height:11rem}
/* 絵が紙に沈み込む。矩形で切らないことで「空気」を残す (暗くはしない) */
.scene::after{content:"";position:absolute;inset:auto 0 -1px 0;height:38%;
  background:linear-gradient(180deg,transparent,var(--paper) 94%);pointer-events:none}
.scene.band::after{height:58%}
/* 絵の上に置く見出し。空と海のいちばん明るい面に乗せる */
.on-scene{position:absolute;left:0;right:0;top:3.1rem;z-index:1}
.on-scene .wrap{padding-right:1.25rem}
@media (min-width:26rem){.on-scene .wrap{padding-right:20%}}
.on-scene .eyebrow{margin:0 0 .3rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  color:#3a352c;text-shadow:0 1px 0 rgba(255,255,255,.5)}

/* --- 見出し --------------------------------------------------------------- */
.lede-block{position:relative;z-index:1;padding-top:.9rem}
h1{font-size:1.5rem;line-height:1.46;margin:0 0 .45rem;letter-spacing:.005em;font-weight:800;
  color:var(--ink)}
.on-scene h1{margin:0;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.page h1{font-size:1.34rem;margin-top:.1rem}
.sub{color:var(--ink-2);font-size:.94rem;margin:.15rem 0 0}
.on-scene .sub{color:var(--ink);font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.45)}
/* Phase 329: ハブで「何のサイトか」の次に読む 1 文 */
.lead{font-size:1rem;font-weight:600;color:var(--ink);margin:.1rem 0 0;line-height:1.75}
.crumb{font-size:.8rem;color:var(--ink-3);margin:0 0 .35rem}
.crumb a{color:var(--ink-3)}

/* --- 今日 ----------------------------------------------------------------- */
.today{margin:1.25rem 0 0;padding:.9rem 1rem;border-radius:.6rem;
  background:var(--lamp-2);border:1px solid var(--rule)}
.today .cap{font-size:.76rem;color:var(--lamp);font-weight:700;letter-spacing:.08em;margin:0}
.today .big{font-size:1.22rem;font-weight:800;margin:.1rem 0 .55rem;color:var(--ink);line-height:1.4}
.today .big em{font-style:normal;color:var(--lamp)}
.today ol{list-style:none;margin:0;padding:0}
.today li{font-size:.9rem;color:var(--ink-2);padding:.42rem 0;border-top:1px solid var(--rule)}
.today li:first-child{border-top:0}
/* 応募先と締切時刻を 1 行目、商品名を 2 行目に。横並びにすると狭い幅で折り返しが乱れる */
.today li .h{display:flex;gap:.5rem;align-items:baseline}
.today li b{color:var(--ink);font-weight:700;min-width:0;overflow-wrap:anywhere}
.today li .t{margin-left:auto;flex:0 0 auto;font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--lamp)}
.today li .p{display:block;margin:.05rem 0 0;overflow-wrap:anywhere;line-height:1.6}
.today .more{font-size:.85rem;color:var(--ink-3);margin:.5rem 0 0}
/* Phase 329: 状況カードの中の要点行 (最大 3 件)。罫は上側だけにして二重線にしない */
.today .rows{margin:0}
.today .rows>li{padding:.55rem 0;border-bottom:0}
.today .rows .row-t{font-size:.95rem;margin:0 0 .1rem}

/* --- 章 ------------------------------------------------------------------- */
h2{font-size:.82rem;font-weight:700;letter-spacing:.1em;color:var(--ink-3);
  margin:2.4rem 0 .1rem;text-transform:none}
h2::after{content:"";display:block;height:1px;background:var(--rule);margin-top:.45rem}
.note{color:var(--ink-2);font-size:.9rem;margin:.6rem 0}

/* --- 索引 (カードにしない。罫で分ける) ------------------------------------- */
.index{list-style:none;margin:0;padding:0}
.index>li{border-bottom:1px solid var(--rule)}
.index>li:last-child{border-bottom:0}
/* ⚠️ 商品と応募先のリンクは同じ見た目に揃える。:link/:visited を明示して、
   ブラウザの既定 visited 色で 1 つだけ色が変わることを構造的に防ぐ */
.index a.t,
.index a.t:link,
.index a.t:visited{display:block;padding:.9rem 0 .2rem;font-size:1.02rem;font-weight:700;
  color:var(--ink);text-decoration:none;line-height:1.5}
.index a.t:hover,
.index a.t:focus-visible{color:var(--link);text-decoration:underline;text-underline-offset:.2em}
.index .m{font-size:.85rem;color:var(--ink-3);padding:0 0 .85rem;margin:0}
.index .m span+span::before{content:"・";margin:0 .2rem;color:var(--rule)}
.open{color:var(--lamp);font-weight:700}

/* --- 抽選の行 -------------------------------------------------------------
   ⚠️ クラス名は生成側に合わせる (row-t / row-m / row-c)。
      Phase 313 で CSS を書き直したとき `.rows .t` / `.rows .m` にしてしまい、
      **行のスタイルが 1 つも当たっていなかった** (区切りの「・」も出ず
      「8月30日まで当選発表 9月15日受取」と地続きに読めていた)。 */
.rows{list-style:none;margin:.2rem 0 0;padding:0}
.rows>li{padding:.9rem 0;border-bottom:1px solid var(--rule)}
.rows>li:last-child{border-bottom:0}
.rows .row-t{font-size:.98rem;font-weight:700;margin:0 0 .3rem;line-height:1.55;color:var(--ink)}
.rows .row-m{font-size:.87rem;color:var(--ink-2);margin:.1rem 0 0;line-height:1.7}
.rows .row-m span+span::before{content:"・";margin:0 .3rem;color:var(--rule)}
/* 応募条件は「読む」ものなので、日付より一段静かに・ぶら下げて区別する */
/* Phase 329: 応募先の公式ページへ (data の applicationUrl だけ) */
.rows .row-o{font-size:.84rem;margin:.2rem 0 0}
.rows .row-o a::after{content:" ↗"}
.rows .row-c{font-size:.83rem;color:var(--ink-3);margin:.35rem 0 0;line-height:1.75;
  padding-left:.85rem;border-left:2px solid var(--rule)}

/* --- CTA (1 枚だけ。灯り色の実体ボタン) ------------------------------------
   Phase 329: 行き先を 2 つ (全抽選 / 応募管理) の実体リンクにした。カードは黒のまま */
.cta{display:block;margin:1.6rem 0 .4rem;padding:1.05rem 1.2rem 1.15rem;border-radius:.55rem;
  background:var(--ink);color:var(--paper);
  box-shadow:0 1px 0 rgba(0,0,0,.05)}
.cta b{display:block;font-size:1.02rem;font-weight:700;margin-bottom:.15rem}
.cta span{font-size:.86rem;opacity:.78;line-height:1.6;display:block}
.cta .acts{display:flex;flex-direction:column;align-items:stretch;gap:.55rem;margin:.8rem 0 0}
/* ⚠️ 黒いカードは維持したまま「押せる」ことを言う。カードごと矢印だけ、では気づかれない */
.cta .go,
.cta .go:link,
.cta .go:visited{display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-decoration:none;
  word-break:keep-all;overflow-wrap:anywhere;
  background:var(--lamp);color:#fff;font-weight:700;font-size:.9rem;
  padding:.5rem .95rem;border-radius:999px;min-height:44px;box-sizing:border-box;line-height:1.35}
.cta .go::after{content:"→";font-weight:700;flex:0 0 auto}
.cta .go.sec,
.cta .go.sec:link,
.cta .go.sec:visited{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(250,248,243,.45)}
.cta .go:hover,
.cta .go:focus-visible{filter:brightness(1.08);text-decoration:underline;text-underline-offset:.2em}
@media (prefers-color-scheme: dark){
  .cta .go.sec,.cta .go.sec:link,.cta .go.sec:visited{box-shadow:inset 0 0 0 1px rgba(20,18,15,.45)}
}

/* --- 脚 ------------------------------------------------------------------- */
.foot{margin-top:3rem;border-top:1px solid var(--rule);background:var(--paper-2)}
.foot .wrap{padding-top:1.2rem;padding-bottom:2.4rem}
.foot p{font-size:.82rem;color:var(--ink-3);margin:.4rem 0;line-height:1.75}
.pair{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.pair li{font-size:.9rem}
main{padding-bottom:1rem}

@media (min-width:30rem){
  .cta .acts{flex-direction:row;flex-wrap:wrap;align-items:center}
  .cta .go,.cta .go:link,.cta .go:visited{justify-content:flex-start}
}
@media (min-width:46rem){
  body{font-size:16.5px}
  h1{font-size:2.05rem}
  .page h1{font-size:1.6rem}
  .scene.tall{height:52vh;min-height:22rem;max-height:30rem}
  .scene.band{height:16rem;max-height:16rem}
  .on-scene{top:4rem}
}