/* ========== styles.css (no border around image) ========== */
/* ベース */
:root{
  --bg:#f6f6f6;
  --card:#ffffff;
  --ink:#151515;
  --muted:#666;
  --accent:#2bb741; /* LINEグリーン */
  --accent-ink:#fff;
  --shadow:0 10px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, "Noto Sans JP", sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* メインカード（枠） */
.container{
  max-width: 760px;
  margin: clamp(12px, 3vw, 24px) auto;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3.5vw, 28px);
}

/* 画像を枠幅にフィット（縁取りなし・線なし） */
.poster{
  margin: 0 0 clamp(14px, 2.8vw, 20px);
  padding: 0;                 /* ← 余白を削除して縁をなくす */
  border: none;               /* ← 線を完全にオフ */
  background: transparent;    /* ← 白い縁に見えないよう透明に */
  box-shadow: none;           /* ← 内側の薄い影も除去 */
}
.poster img{
  display:block;
  width:100%;
  height:auto;
  border-radius: clamp(10px, 2vw, 16px); /* 任意：角丸だけ残す（不要なら0に） */
  background: transparent;
}

/* 見出し・情報 */
.brand{
  margin: 0 0 .5rem;
  font-size: clamp(20px, 3.5vw, 28px);
  letter-spacing: .02em;
}

.info dl{margin:0}
.info .row{
  display:grid;
  grid-template-columns: 7.5em 1fr;
  gap:.75rem 1.25rem;
  padding:.45rem 0;
  border-bottom:1px dashed #ddd;
}
.info .row:last-child{border-bottom:none}
.info dt{
  font-weight:700;
  color:#333;
}
.info dd{
  margin:0;
  color:#111;
}
.info a{
  color:inherit;
  text-decoration-color:#bbb;
  text-underline-offset: 3px;
}
.info a:hover{ text-decoration-color:#888 }

/* LINE ブロック */
.line-block{
  margin-top: clamp(18px, 3vw, 28px);
  text-align:center;
}
.line-block h2{
  margin:.2rem 0 .25rem;
  font-size: clamp(18px, 3vw, 22px);
}
.hint{
  margin:.25rem 0 1rem;
  color:var(--muted);
  font-size:.95rem;
}

.line-btn{
  display:inline-block;
  padding:.9rem 1.15rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 6px 16px rgba(43,183,65,.24);
  transition: transform .06s ease, filter .2s ease;
}
.line-btn:active{ transform: translateY(1px) }

.qr{
  display:block;
  margin: 1rem auto 0;
  width:min(260px, 70%);
}
.qr img{
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow: var(--shadow);
  background:#fff;
}

/* フッター */
.footer{
  text-align:center;
  color:#999;
  padding: 24px 12px 8px;
  font-size:.9rem;
}

/* 小さめ端末の微調整 */
@media (max-width:420px){
  .info .row{ grid-template-columns: 6.5em 1fr; }
}