@charset "utf-8";

/* ============================================================
   10Gプランページ 専用スタイル
   （/docomoHikari_detail/10G）

   本ページは SIS for ドコモ光トップ（docomoHikari）のコンポーネントを流用しているため、
   head では docomoHikari の style_pc / style_sp の後に本ファイルを読み込む。
   ============================================================ */

/* ヒーローのタイトル（新規ロゴ画像は作成せずテキストで表示）
   元CSSにコメントアウトで残っていた .slideTitle の定義を復用 */
.slideTitle {
    font-size: 4.4rem;
    font-weight: 900;
    color: #fff;
    background-color: #ff6a00;
    display: inline-block;
    margin-bottom: 24px;
    padding: 4px 20px;
}

@media (max-width: 767px) {
    .slideTitle {
        font-size: 2.6rem;
        padding: 4px 12px;
    }
}

/* ヒーロー（sec_mv）の高さ＝上下余白を圧縮し、縦方向の間延びを解消（左右の余白は変更なし） */
.slideInner {
    height: 330px;
}

@media all and (max-width: 1100px) {
    .slideInner {
        height: 400px;
    }
}

@media screen and (max-width: 767px) {
    .slideInner {
        height: 370px;
    }

    .slideTextArea {
        padding-bottom: 110px;
    }
}

/* ヒーローのキャッチ可読性改善：背景イラストと重なっても読めるよう、文字背後に半透明の白帯を敷き文字色を濃くする */
.slideText {
    display: inline-block;
    background: rgba(255, 255, 255, 0.82);
    color: #cf0f31;
    font-size: 2.6rem;
    font-weight: bold;
    padding: 10px 22px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    /* ★下の余白（1つの数値）：大きいほど中身が上へ＝背景の人物から離れる */
    margin-bottom: 120px;
}

/* ★上の余白（1つの数値）：大きいほど中身が下へ＝タイトル上の詰まりを解消 */
.mvTitle {
    margin-top: 64px;
}

/* スマホは .slideTextArea が通常フロー（絶対中央寄せでない）でPC用の大きな上下余白は不要・重なりも無い */
@media screen and (max-width: 767px) {
    .slideText {
        /* SPはPCと同じ2.6remだと4行に増えてズーモと重なるため控えめに */
        font-size: 1.8rem;
        margin-bottom: 0;
    }

    .mvTitle {
        margin-top: 0;
    }
}

/* ページ内リンクで見出しが画面上端に張り付かないよう余白を確保 */
section[id] {
    scroll-margin-top: 24px;
}

/* ABOUTセクションの上下余白
   上＝ヒーローとの間隔（この数値だけで微調整。大きいほどABOUTが下がる）
   下＝ABOUT本文が直後のPOINTセクション背景に接しないよう確保 */
#ancor_about {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* 10Gプランのポイント：カード化して座布団を敷く */
#ancor_10gdetail .dListItem {
    background: #fff;
    border-radius: 24px;
    padding: 112px 40px 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

#ancor_10gdetail .dListTitle {
    padding-top: 180px;
}

/* カード化に合わせたキー画像の表示枠。
   枠を広げる場合は下の .dListTitle の padding-top も同じだけ増やすこと（アイコンと見出しが重なるため） */
#ancor_10gdetail .dListTitle::before {
    top: 8px;
    width: 260px;
    height: 150px;
    border-radius: 12px;
    /* style_pc.css の .dListItem:nth-of-type(n) が background ショートハンドで指定しており、
       基底の background-size:contain がautoに戻されるため、縮小した枠に収まるよう再指定する */
    background-size: contain;
}

/* 10ギガプランのポイント：アイコンを新素材に差し替え（①吹き出し＋10G ②地図＋虫眼鏡）
   #ancor_10gdetail 配下に限定しているため、1ギガ側の既存アイコンには影響しない */
#ancor_10gdetail .dListItem:nth-of-type(1) .dListTitle::before {
    background-image: url(../img/sec_detail/icon-dlist01-10g.svg);
}

#ancor_10gdetail .dListItem:nth-of-type(2) .dListTitle::before {
    background-image: url(../img/sec_detail/icon-dlist02-10g.svg);
}

/* テキスト主体セクションの共通レイアウト */
.l-textSection {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.l-textSection p + p {
    margin-top: 16px;
}

.l-textSection a {
    color: #0b5ed7;
    text-decoration: underline;
}

/* ご利用料金：2タイプ（家/建物）のアイコンは残しつつ中央寄せの一組にし、金額は下に1回だけ大きく中央表示 */
.chargeList {
    justify-content: center;
    gap: 56px;
}

.charge10g-priceOne {
    text-align: center;
    margin-bottom: 30px;
}

.charge10g-priceOne .charge10g-note {
    font-size: 1.4rem;
    font-weight: bold;
    color: #55504a;
    margin-bottom: 8px;
}

/* おトク1・2の背景：画面左右いっぱいに広がるグレーのフルワイド帯。中のコンテンツは従来どおり中央寄せ */
.otoku-fullbg {
    background-color: #f2f4f5;
    padding: 64px 0;
}

.otoku-fullbg .detaiInner {
    margin-top: 0;
}

@media (max-width: 767px) {
    .otoku-fullbg {
        padding: 40px 0;
    }
}

/* おトクセクション冒頭のキャッチコピー（2行・後半を特大の赤字） */
.point-catch {
    /* ★ここの1つの値だけでマスコットとの距離を微調整（大きいほどキャッチが上へ／小さいほど密着） */
    --catch-gap: 28px;
    text-align: center;
    color: #1a1a1a;
    font-weight: 900;
    line-height: 1.25;
    margin: 0 0 var(--catch-gap);
}

/* 1行目は黒字 */
.point-catch__lead {
    display: block;
    font-size: 3.0rem;
    color: #1a1a1a;
}

/* 2行目は赤字 */
.point-catch__main {
    display: inline-block;
    font-size: 6.0rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #cf0f31;
}

.point-catch__slash {
    margin: 0 .12em;
    font-weight: 900;
}

@media (max-width: 767px) {
    .point-catch {
        margin-bottom: 40px;
    }

    .point-catch__lead {
        font-size: 1.8rem;
    }

    .point-catch__main {
        font-size: 3.4rem;
    }
}

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

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

/* 電話番号テキスト。
   番号ごとにSVG画像を用意すると番号追加のたびに素材が必要になるため、
   既存の番号SVG（img-telnum02.svg）と同じ大きさ・太さ・電話アイコンをテキストで再現する。
   ※オプションページ（option.css）にも同じ定義あり。共通化する場合は両方をまとめること */
.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;
    }
}

/* Wi-Fiルータ注記：1つ目の枠（カード）の直下・枠外に配置 */
#ancor_10gdetail .dList .dListNote {
    margin: -90px 0 120px;
}

@media screen and (max-width: 767px) {
    #ancor_10gdetail .dList .dListNote {
        margin: -56px 0 80px;
    }
}

/* 対応回線・提供エリア：NTT東西の2ボタンを横並び（SPは縦積み） */
#ancor_10gdetail .areaLinks {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

#ancor_10gdetail .areaLinks .c-btn {
    margin: 0;
    /* PCは2つ横並び（.c-btn--opp a の 488px だとコンテンツ幅を超えるため縮める） */
    flex: 0 1 380px;
}

#ancor_10gdetail .areaLinks .c-btn a {
    width: 100%;
}

@media screen and (max-width: 767px) {
    #ancor_10gdetail .areaLinks {
        gap: 16px;
    }

    #ancor_10gdetail .areaLinks .c-btn {
        flex: 0 0 100%;
    }
}