/* ============================================================
   08-highlights.css
   3つのお楽しみカード
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
#highlights{background:var(--paper)}
.hl-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hl-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:26px 24px 96px;position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.hl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--navy)}
.hl-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--navy) 1.5px,transparent 1.5px) 0 0/10px 6px repeat-x,var(--yellow);
}
/* 切り取り線 ── 「券」のように見せるミシン目。右端は折り目の下に潜る */
.hl-card::after{
  content:'';position:absolute;left:0;right:0;bottom:92px;z-index:1;
  border-top:2px dashed var(--line-strong);
}
/* 大きな連番 ── マーカーを引いたような下地と、下に目盛りを一本 */
.hl-card .n{
  display:inline-block;align-self:flex-start;
  font-family:var(--font-mono);font-weight:700;
  font-size:2.5rem;line-height:1;letter-spacing:.01em;color:var(--navy);
  padding:2px 7px 9px;margin:0 0 14px -7px;position:relative;
  background:linear-gradient(var(--yellow-soft),var(--yellow-soft)) 0 55%/100% 40% no-repeat;
  transition:background-size .3s ease;
}
.hl-card:hover .n{background-size:100% 62%}
.hl-card .n::after{
  content:'';position:absolute;left:7px;bottom:0;width:52px;height:7px;
  background:
    linear-gradient(90deg,var(--navy) 1.5px,transparent 1.5px) 0 0/11px 7px repeat-x,
    linear-gradient(var(--yellow),var(--yellow)) 0 100%/100% 2.5px no-repeat;
}
/* 左下の絵記号 ── 中身がひとめでわかるように */
.hl-card .mark{
  position:absolute;left:24px;bottom:16px;width:58px;height:58px;z-index:1;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.hl-card .mark svg{width:100%;height:auto;display:block}
.hl-card:hover .mark{transform:translateY(-5px) rotate(-6deg) scale(1.06)}
.hl-card h3{margin:0 0 10px;font-weight:900;font-size:1.16rem;color:var(--navy);letter-spacing:.03em}
.hl-card p{margin:0;font-size:.9rem;color:var(--ink-soft);flex:1}
.hl-card .when{
  margin-top:18px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  line-height:1.75;color:var(--navy);background:var(--yellow-soft);
  border-radius:8px;padding:6px 11px;display:inline-block;align-self:flex-start;
}
.hl-card .when i{font-style:normal;margin-left:.5em;opacity:.72;white-space:nowrap}
/* 右下の折り目 ── 三角のタブ */
.hl-card .go{
  position:absolute;right:0;bottom:0;width:168px;height:108px;z-index:2;
  background:var(--navy);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  transition:background .25s,width .25s,height .25s;
  filter:drop-shadow(-3px -3px 4px rgba(17,26,60,.18));
}
.hl-card .go i{
  position:absolute;right:13px;bottom:11px;
  font-style:normal;font-weight:700;font-size:.74rem;letter-spacing:.06em;
  line-height:1;color:var(--yellow);white-space:nowrap;
}
.hl-card .go i::after{content:'→';margin-left:7px;display:inline-block;transition:transform .25s}
.hl-card:hover .go{background:var(--navy-deep);width:180px;height:116px}
.hl-card:hover .go i::after{transform:translateX(4px)}