/*
  kissntell-reserve-table.css
  ============================================================
  kissntell-reserve.jpg 忠実再現 — 精密版（レスポンシブ検証・修正版）
  元画像: 2130 × 1102px
  既存サイト基準: html { font-size: 62.5% } → 1rem = 10px
                  main { max-width: 1200px }

  ■ ブレークポイントはサイト全体（style.css）と統一
      PC     : min-width 1200px
      タブレット: 600px 〜 1199px
      SP     : max-width 599px（テーブルを縦積みに変換）

  ■ 今回のレスポンシブ検証で修正した点
      1) .rsv-bana-wrap の margin に単位なしの値「10」があり
         CSSとして無効（宣言ごと無視される）→ 単位を付けて修正
      2) バナー画像とテーブル外枠の左右インセットが
         ブレークポイントごとにズレていた（PC:10px差 / タブレット:10px差 / SP:5px差）
         → 左右の余白を .rsv-outer の padding に一本化し、
           子要素（banner・frame）は margin:0 に統一してズレを解消
      3) .rsv-outer に不要な color / font-size が指定されており
         子要素は個別に色・サイズを持つため実害はないが、
         デッドコードとして整理
      4) 600px⇔599pxの境界で width:80%→90%に急変し
         わずかな見た目のジャンプがあったため、
         両ブレークポイントで同一の「outer固定padding」方式に統一し解消
  ============================================================
*/

/* ── 最外ラッパー
   横幅960px・センター配置
   左右の余白はここで一元管理（子要素のmarginでは持たない）
─────────────────────────────────── */
.rsv-outer {
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
    background: #ffffff;
    box-sizing: border-box;
}

/* ── ヘッダーバナー画像
   左右の余白は親(.rsv-outer)のpaddingに委ねるため margin:0
─────────────────────────────────── */
.rsv-bana-wrap {
    margin: 20px 20px 0;
    line-height: 0;
}
.rsv-bana-wrap img {
    width: 100%;
    padding: 20px 0px;
    height: auto;
    display: block;
}

/* ── 注記テキスト ── */
.rsv-note {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #111111;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    background: #ffffff;
}

/* ── 外枠（テーブルのコンテナ）
   左右margin廃止 → 親の padding とだけ揃える
─────────────────────────────────── */
.rsv-frame {
    border: 0px solid #111111;
    background: #ffffff;
    padding-top: 2.7rem;
    padding-bottom: 4.7rem;
    padding-left: 0;
    padding-right: 0;
}

/* ── テーブル本体 ── */
.rsv-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #ffffff;
}

.rsv-col-l,
.rsv-col-r {
    width: 50%;
}

/* ── セル共通 ── */
.rsv-td {
    vertical-align: top;
    background: #ffffff;
    padding-top: 2.7rem;
    padding-bottom: 1.7rem;
    padding-right: 2.7rem;
    padding-left: 5.7rem; /* 右列デフォルト */
}

/* 左列: padding-left 32px → 1.8rem */
.rsv-td:first-child {
    padding-left: 1.8rem;
}

/* 横罫線（行の下ボーダー） */
.rsv-td-bl {
    border-bottom: 0px solid #111111;
}

/* 縦罫線（左列の右ボーダー） */
.rsv-td-br {
    border-right: 0px solid #111111;
}

/* ── 店舗名
   長い英数字（TOWER RECORDS ONLINE等）が
   狭い画面ではみ出さないよう word-break を追加
─────────────────────────────────── */
.rsv-store {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.3;
    color: #111111;
    margin-bottom: 1.4rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 店舗名リンク：色を継承（黒）にし、下線を消す。ホバーで薄く変化 */
.rsv-store a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.rsv-store a:hover {
    opacity: 0.65;
}

/* TOWER RECORDS 2行目インデント（◆1文字幅分）
   PC/タブレット幅では改行してインデント、
   SP縦積み時は br.rsv-br を非表示にして1行の自然な折り返しに変更 */
.rsv-indent {
    display: inline-block;
    padding-left: 1em;
}

/* ── 説明文 ── */
.rsv-desc {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.75;
    color: #333333;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* リンクの下線は特典テーブル内のみ除去（サイト全体のリンクに影響させない） */
.rsv-outer a {
    text-decoration: none;
}

/* ══════════════════════════════════════
   レスポンシブ（サイト全体の基準に統一）
   PC: min-width 1200px（デフォルト値がそのまま適用）
   タブレット: 600px〜1199px
   SP: max-width 599px（縦積み）

   左右の余白は .rsv-outer の padding のみで管理し、
   .rsv-bana-wrap / .rsv-frame は margin:0 のまま揃える
   ══════════════════════════════════════ */

/* ── タブレット（600px〜1199px） ── */
@media (max-width: 1199px) and (min-width: 600px) {
    .rsv-outer {
        width: 80%;
        background-color: #fff;
        padding: 0px 5px;
        margin:8px auto;
        color: #555;
        font-size: 1.1rem;
		box-sizing: border-box;
    }
	
    .rsv-bana-wrap {
        width: 95%;
        margin: 0px 10 0;
    }

    .rsv-note  { font-size: 2.0rem; }
    .rsv-store { font-size: 1.8rem; margin-bottom: 1.0rem; }
    .rsv-desc  { font-size: 1.4rem; }
    .rsv-td    { padding: 2.0rem 2.0rem 1.4rem 3.0rem; }
    .rsv-td:first-child { padding-left: 1.4rem; }
}

/* ── SP（〜599px）: テーブルを縦積みに変換 ── */
@media (max-width: 599px) {
    .rsv-outer {
        width: 90%;
        background-color: #fff;
        padding: 0px 5px;
        margin:8px auto;
        color: #555;
        font-size: 1.1rem;
		box-sizing: border-box;
    }

    .rsv-bana-wrap {
        width: 95%;
        margin: 0px 10px 0px;
    }

    .rsv-frame {
        margin: 0;
        padding-top: 1.5rem;
        padding-bottom: 2.0rem;
    }

    .rsv-note {
        font-size: 1.4rem;
        padding-top: 1.0rem;
        padding-bottom: 0.3rem;
    }

    /* テーブルをブロック化して縦積み */
    .rsv-table,
    .rsv-table tbody,
    .rsv-table tr,
    .rsv-table td {
        display: block;
        width: 100% !important;
    }

    .rsv-td {
        padding: 1.5rem 1.6rem 1.2rem 1.6rem;
        border-right: none !important;
        border-bottom: 1.5px solid #111111;
    }

    /* 最終行・最終セルのボーダーなし */
    .rsv-table tbody tr:last-child td:last-child {
        border-bottom: none;
    }

    .rsv-store {
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
    }

    .rsv-desc {
        font-size: 1.2rem;
    }

    /* 縦積みで列幅が広がるため、TOWER RECORDSの強制改行を解除し
       ブラウザの自然な折り返しに任せる（改行位置の最適化） */
    br.rsv-br {
        display: none;
    }

    /* 改行を解除した分、インデントも不要にする */
    .rsv-indent {
        padding-left: 0;
    }
}

/* ── 極小デバイス（〜360px）: さらにフォントを微調整 ── */
@media (max-width: 360px) {
    .rsv-outer { padding: 0 10px; }
    .rsv-store { font-size: 1.3rem; }
    .rsv-desc  { font-size: 1.15rem; }
    .rsv-td    { padding: 1.2rem 1.3rem 1.0rem 1.3rem; }
}