@charset "UTF-8";

/* --- 全体の揺れ・はみ出しをカット --- */
.sp-rl-wrap {
    width: 100%;
    overflow-x: hidden; /* 画面外への飛び出しをブロック */
    margin: 0 auto;
    padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    background-color: #fff;
    box-sizing: border-box;
}

/* 全要素の幅計算を厳格化 ＆ 長いテキストの突き抜けを防止 */
.sp-rl-wrap *,
.sp-rl-wrap *::before,
.sp-rl-wrap *::after {
    box-sizing: border-box;
    max-width: 100% !important;
    word-wrap: break-word;      /* 英単語やURLの強制改行 */
    overflow-wrap: break-word;  /* 英単語やURLの強制改行 */
}

/* --- ヘッダーセクション --- */
.sp-header {
    text-align: center;
    padding: 25px 0 10px; /* 左右パディングを0にして画像を端まで出す準備 */
    width: 100%;
}
.sp-brand-tag {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #888;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.sp-main-title {
    font-size: 19px;
    color: #002e5d;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 15px 8px; /* テキストには余白を持たせる */
}

/* --- 価格エリア（拡大・センター・赤字） --- */
.sp-header-price {
    text-align: center !important;
    margin: 20px 0 25px;
    padding: 15px 0;
    background-color: #fff;
    width: 100%;
}
.sp-price-label {
    color: #d32f2f;
    font-weight: bold;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}
.sp-price-val {
    font-size: 42px !important; /* 24pxから大幅に拡大 */
    font-weight: bold;
    color: #d32f2f !important;
    line-height: 1;
}
.sp-price-tax {
    font-size: 14px;
    font-weight: normal;
    color: #333;
}

.sp-catch {
    font-size: 12px;
    color: #666;
    margin: 10px 15px;
    line-height: 1.5;
    font-weight: 500;
}

/* --- 画像設定：画面端までフルサイズ表示 --- */
.sp-img-full {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 15px auto !important;
    padding: 0 !important;
    vertical-align: bottom; /* 画像下の謎の余白を消す */
}

/* --- 各項目セクション --- */
.sp-text-section {
    padding: 30px 15px;
    text-align: left;
    width: 100%;
}
.sp-h2-title {
    font-size: 17px;
    color: #002e5d;
    font-weight: bold;
    margin-bottom: 12px;
    border-left: 4px solid #002e5d;
    padding-left: 12px;
}
.sp-desc-p {
    font-size: 14px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 15px 0;
}

/* --- プレミアムボックス --- */
.sp-premium-box {
    background-color: #f7f9fb;
    margin: 10px 15px 30px;
    padding: 20px;
    border: 1px solid #e0e6ed;
    text-align: left;
    /* marginとpaddingを含めても幅を超えないよう幅指定はなし（自動計算） */
}
.sp-premium-box h3 {
    font-size: 15px;
    color: #002e5d;
    margin-bottom: 8px;
    font-weight: bold;
}

/* --- サイズ表（罫線を #999 に強化） --- */
.sp-table-area {
    padding: 0 15px;
    margin-bottom: 30px;
    width: 100%;
}
.sp-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* テーブル幅を100%に強制固定（必須） */
    font-size: 12px;
    border: 1px solid #999 !important;
}
.sp-data-table th, .sp-data-table td {
    border: 1px solid #999 !important;
    padding: 12px 2px;
    text-align: center;
    word-break: break-all; /* セル内の文字を強制改行して押し出しを防ぐ */
}
.sp-data-table th {
    background-color: #fcfcfc;
    color: #002e5d;
    font-weight: bold;
}
.sp-table-head {
    background-color: #002e5d !important;
    color: #fff !important;
    border: 1px solid #002e5d !important;
}
.sp-row-highlight {
    background-color: #fffafa;
    color: #d32f2f;
    font-weight: bold;
}

/* --- バナー --- */
.sp-banner-link {
    display: block;
    margin-bottom: 12px;
    padding: 0;
    width: 100%;
}
.sp-banner-link img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}