@charset "utf-8";

/* ============================================================
   オリジナル付帯オプションサービス（/docomoHikari_detail/Option）
   ページ固有スタイル
   ============================================================ */

/* 見出し横のプラン対象バッジ（例：「1Gプランのみ対象」） */
.U-planBadge {
    display: inline-block;
    margin-left: 16px;
    padding: 6px 16px;
    border-radius: 10px;
    background: #e60012;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    vertical-align: middle;
}

/* SPでは見出しの下に折り返して収まる。狭幅で見出しに食い込まないよう上余白のみ確保 */
@media (max-width: 767px) {
    .U-planBadge {
        margin-top: 8px;
    }
}

/* お問い合わせ電話：1Gプラン用／10Gプラン用の2番号を併記する際のプラン別ラベル */
.infoTelLabel {
    font-size: 1.6rem;
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 6px;
}

/* 問い合わせ欄：左「メールで気軽に」を右「電話で詳しく」の高さに対し縦中央に配置（2カラム時のみ有効） */
.infoList--02 {
    align-items: center;
}

/* 電話番号テキスト。
   番号ごとにSVG画像を用意すると番号追加のたびに素材が必要になるため、
   既存の番号SVG（img-telnum02.svg）と同じ大きさ・太さ・電話アイコンをテキストで再現する */
.telnum--txt {
    position: relative;
    display: inline-block;
    padding-left: 30px;
    font-size: 3.8rem;
    font-weight: bold;
    line-height: 1.2;
    color: #333;
    text-decoration: none;
    margin-bottom: 15px;
}

.telnum--txt::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 30px;
    background: url(../img/sec_info/img-telicon.svg) center/contain no-repeat;
}

/* タブレット時は既存の .telnum に合わせて縮小 */
@media screen and (max-width: 1000px) {
    .telnum--txt {
        font-size: 3.2rem;
    }
}