/* ========== ベース ========== */
:root{
  --pink:#d2458c;
  --green:#41a141;
  --green-dark:#2f9a3f;
  --mint:#e6ffe6;
  --mint-head:#c8f7c8;
  --yellow:#ffeb99;
}

*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }
p{ margin:0; }



/* ========== 見出し（プレゼントアイテム紹介） ========== */
.section-box{
  border:4px solid var(--pink);
  background:#fde6f5;
  border-radius:20px;
  padding:12px;
  text-align:center;
  margin:20px 0;
}
.section-title{
  color:var(--pink);
  font-weight:700;
  font-size:1.8rem;
}

@media (max-width:600px){
  .section-title{
    font-size:1.5rem;
  }
}

@media (max-width:414px){
  .section-title{
    font-size:1.25rem;
  }
}


/* ========== アイテムカード ========== */
.item-box{
  display:flex;
  gap:15px;
  align-items:flex-start;
  border:4px solid var(--pink);
  border-radius:20px;
  padding:15px;
  margin:20px 0;
  text-align:left;
  background:repeating-linear-gradient(
    -45deg,#fde6f5, #fde6f5 10px, #fbd9f0 10px, #fbd9f0 20px
  );
}
.item-left{ flex:0 0 auto; }
.item-left img{
  width:80px;
}
.item-right{ flex:1 1 auto; }
.item-name{
  display:inline-block;
  margin-bottom:8px;
  padding:4px 12px;
  border-radius:10px;
  font-weight:700;
  font-size:1.1rem;
  color:#fff;
}
.item-name.red{ background:#ff6c6c; }
.item-name.orange{ background:#ff9900; }



/* ========== ゲーム特典（外枠＋タイトル帯） ========== */
.reward-box{
  display:flex;
  flex-direction:column;   /* ←横並びをやめる */
  border:4px solid #41a141;
  overflow:hidden;         /* ←テーブルを中に収める */
}

.reward-title{
  background:var(--mint-head);
  color:#000000;
  font-weight:700;
  font-size:1.5rem;
  text-align:center;
  padding:12px 0;
  border-bottom:2px solid #41a141; /* 表と接続 */
}



/* ========== テーブル本体（均一な格子線） ========== */
.reward-table-wrap{
  position:relative;
  overflow-x:visible;   /* ← auto / scroll を使わない */
}

.reward-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;   /* ← 列幅固定 & 折り返し前提 */
}

/* 1列目（条件など）は少し広め */
.reward-table th:first-child,
.reward-table td:first-child{
  width:16%;
}

/* 残り4列 */
.reward-table th:not(:first-child),
.reward-table td:not(:first-child){
  width:21%;
}

.reward-table th,
.reward-table td{
  border:2px solid var(--green-dark);
  padding:10px 8px;
  text-align:center;

  /* 折り返し制御 */
  white-space:normal;        /* ← nowrap を解除 */
  word-break:break-word;     /* ← 英数字も折る */
  overflow-wrap:anywhere;    /* ← 最後の保険 */
}

/* テーブルの1列目を黄色背景＆太字にする */
.reward-table tbody th.left{
  background:var(--yellow);
  text-align:left;
  font-weight:700;
  padding-left:10px;
  white-space:normal;   /* ← ここ重要 */
}

/* テーブルの1行目を太字にする */
.reward-table tr:first-child th{
  font-weight:700;
}

/* 見出し行の1列目だけ黄色背景にする */
.reward-table thead th:first-child{
  background: var(--yellow);
}

/* 見出し行の2～5列目はミント色背景にする */
.reward-table thead th:not(:first-child){
  background: var(--mint-head);
}

/* 見出し以外のセルは白背景 */
.reward-table tbody td{
  background:#fff;
}

@media (max-width:768px){
  .reward-table th,
  .reward-table td{
    font-size:0.85rem;
    padding:8px 6px;
    line-height:1.35;
  }
}