/* ============================================
   optical_fiber.css
   光回線取次事業ページ固有スタイル
   ============================================ */


/* ============================================
   スムーズスクロール
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* スティッキーヘッダー分のオフセット */
#about,
#strengths,
#support {
    scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ============================================
   0. FV イントロアニメーション
   ============================================ */

@keyframes fv-intro-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    background-color: var(--color-white-1);
}

/* callcenter.css はこのページのみ読み込まれるため直接対象指定 */

/* ヘッダー: 1s 後にふわっと表示 */
.header__inner {
    animation: fv-intro-fade-up 0.8s ease 1s both;
}

/* FV コンテンツ: ヘッダーより 0.12s 遅れて表示 */
.lower-fv__content {
    animation: fv-intro-fade-up 0.8s ease 1.12s both;
}

/* アクセシビリティ: モーション低減設定 */
@media (prefers-reduced-motion: reduce) {

    .header__inner,
    .lower-fv__content {
        animation: none;
    }
}


/* ============================================
   1. FV（ファーストビュー）
   ============================================ */

.lower-fv {
    align-items: flex-end;
    display: flex;
    overflow: hidden;
    padding-bottom: 78px;
    /* 左余白: ヘッダーロゴと左端を揃える（max-width 1370px + ヘッダー内側padding） */
    padding-left: calc((100vw - min(1370px, calc(100vw - 30px))) / 2 + clamp(20px, 2.55vw, 35px));
    position: relative;
}

.lower-fv--callcenter {
    height: 800px;
}

/* 背景画像: 全面カバーのため position:absolute を使用（必要な例外） */
.lower-fv__bg {
    inset: 0;
    position: absolute;
    z-index: -1;

}

.lower-fv__bg img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.lower-fv__overlay {
    background-color: var(--color-navy-3);
    inset: 0;
    opacity: 0.5;
    position: absolute;
}

.lower-fv__content {
    position: relative;
    z-index: 1;
}

.lower-fv__label {
    align-items: center;
    display: flex;
    gap: 8px;
}

.lower-fv__subtitle {
    color: var(--color-white-1);
    font-family: var(--font-family-noto-sans-jp);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    letter-spacing: var(--letter-spacing-10);
}

.lower-fv__title-en {
    color: var(--color-white-1);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-80);
    font-weight: var(--font-weight-700);
    line-height: 1.1;
    margin-block-start: 16px;
}

.lower-fv__bar {
    background-color: var(--color-gold-1);
    height: 5px;
    margin-block-start: 17px;
    width: 80px;
    margin-bottom: 27px;
}

.lower-fv__title-ja {
    color: var(--color-white-1);
    font-family: var(--font-family-noto-sans-jp);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-700);
    margin-block-start: 10px;
}


/* ============================================
   2. business-banner（マーキー）
   ============================================ */

.business-banner {
    background-color: var(--color-white-1);
    margin-block-start: -42px;
    overflow: hidden;
}

.business-banner__inner {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
}

.business-banner__row {
    color: #01496b;
    font-family: "Outfit", var(--font-family-figtree), sans-serif;
    font-size: 160px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: normal;
    overflow: hidden;
    white-space: nowrap;
}

.business-banner__track {
    align-items: center;
    display: flex;
    inline-size: max-content;
    min-inline-size: 100%;
    will-change: transform;
    animation: business-banner-marquee 24s linear infinite;
}

.business-banner__track--reverse {
    animation-direction: reverse;
}

.business-banner:hover .business-banner__track,
.business-banner__track:has(.business-banner__group:hover) {
    animation-play-state: paused;
}

.business-banner__group {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: max(18px, 1vw);
    padding-inline-end: max(72px, 4vw);
}

.business-banner__row--top .business-banner__group {
    gap: max(34px, 1.8vw);
}

.business-banner__row--bottom {
    margin-block-start: min(-34px, -1.8vw);
}

.business-banner__text {
    display: block;
    flex: 0 0 auto;
    font-weight: 400;
}

.business-banner__text--caps {
    font-weight: 700;
}

.business-banner__accent {
    font-weight: 900;
}

.business-banner__logo {
    display: inline-flex;
    flex: 0 0 auto;
    height: 0.8625em;
    margin-inline: 2px 10px;
    width: 1.4875em;
}

.business-banner__logo img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.business-banner__photo {
    aspect-ratio: 227 / 120;
    border-radius: var(--radius-5);
    display: inline-flex;
    flex: 0 0 auto;
    height: 0.75em;
    margin-inline: -2px 2px;
    overflow: hidden;
    width: 1.41875em;
}

.business-banner__photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

@keyframes business-banner-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* ============================================
   3. 本文エリア
   ============================================ */

.callcenter-body {
    box-sizing: border-box;
    padding-block: 72px 81px;
    padding-inline-start: max(3.47%, calc(((100% - var(--container-max-width)) / 2) + 54.7px));
    width: 100%;
}


/* ============================================
   3. サイドバー：ページ内ナビゲーション
   ============================================ */
.lower-layout {
    grid-template-columns: 268px minmax(0, 1fr);
    max-width: 1385.3px;
}

/* ============================================
   4. セクション共通
   ============================================ */

.callcenter-section-en {
    color: var(--color-gold-1);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    font-style: normal;
    line-height: var(--line-height-160);
    text-transform: uppercase;
    padding-top: 1px;
}

/* 暗背景上で使う白バリエーション（サポート体制カード内） */
.callcenter-section-en--light {
    color: var(--color-white-1);
    padding-top: 35px;
}

.callcenter-section-heading {
    color: var(--color-navy-2);
    font-family: var(--font-family-noto-sans-jp);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    letter-spacing: var(--letter-spacing-10);
    padding-top: 10px;
}

.callcenter-section-heading--span {
    color: var(--color-navy-2);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-36);
    font-weight: var(--font-weight-700);
    letter-spacing: var(--letter-spacing-10);
}


/* ============================================
   5. コールセンター事業とは（ABOUT）
   ============================================ */

/* 暗背景ゾーン: ABOUT大画像 + Serviceを#003D56背景でまとめる */
.callcenter-dark-zone {
    background-color: var(--color-navy-2);
    margin-block-start: 54px;
    border-radius: 10px 0 0 10px;
}

.callcenter-about__img {
    overflow: hidden;
    width: 100%;
}

.callcenter-about__img img {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}


/* ============================================
   6. 事業内容（Service）— 暗背景上
   ============================================ */

.callcenter-service {
    /* padding-inline: Figmaではservice cards両端に約50px余白あり */

    padding: 45px 35px 47px 48px;
    max-width: 1035px;
}

.callcenter-service-card {
    align-items: center;
    column-gap: 4%;
    display: grid;
    grid-template-columns: 45% 1fr;
    /* body(45%) | img(~51%) */
}

/* service 02: order で img を左・body を右に反転 */
.callcenter-service-card--reverse {
    grid-template-columns: 1fr 45%;
    /* img(~51%) | body(45%) */
}

.callcenter-service-card--reverse .callcenter-service-card__body {
    order: 2;
}

/* ラベル: Figmaでは白（暗背景上） */
.callcenter-service-card__label {
    color: var(--color-white-1);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-700);
    text-transform: uppercase;
    padding-top: 20px;
}

/* タイトル: Figmaでは白（暗背景上） */
.callcenter-service-card__title {
    color: var(--color-white-1);
    font-family: var(--font-family-noto-sans-jp);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-700);
    letter-spacing: 2.5px;
    margin-block-start: 12px;
}

/* 本文: Figmaでは白（暗背景上） */
.callcenter-service-card__text {
    color: var(--color-white-1);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-30);
    margin-block-start: 22px;
    letter-spacing: 0.40px;
}

.callcenter-service-card__img {
    /* Figma: 478 × 290 ≈ 5:3 */
    aspect-ratio: 478 / 290;
    border-radius: var(--radius-10);
    overflow: hidden;
}

.callcenter-service-card--reverse .callcenter-service-card__img {
    order: 1;
}

.callcenter-service-card__img img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 10px;
}

/* service 01 / 02 の間の区切り線（Figma: #EBEBEB, h:2px） */
.callcenter-service__divider {
    background-color: #EBEBEB;
    height: 2px;
    margin-block: 49px;
    width: 100%;
}


/* ============================================
   7. 弊社の強み（Strengths）
   ============================================ */

.callcenter-strengths {
    padding-block: 50px;
    padding-right: 30px;
    max-width: 1035px;
}

.callcenter-strengths__header {
    margin-block-end: 70px;
}

.callcenter-strengths__points {
    display: flex;
    flex-direction: column;
}

/* POINT 間の区切り線（Figma: Rectangle 94/108, #EBEBEB, h:2px） */
.callcenter-strengths__divider {
    background-color: #EBEBEB;
    height: 2px;
    margin-block: 56px;
    width: 100%;
}

.callcenter-point {
    align-items: center;
    column-gap: 5%;
    display: grid;
    grid-template-columns: 50% 1fr;
    /* img(50%) | body(~45%) */
}

/* POINT 02: order で body を左・img を右に反転 */
.callcenter-point--reverse {
    grid-template-columns: 1fr 50%;
    /* body(~45%) | img(50%) */
}

.callcenter-point--reverse .callcenter-point__body {
    order: 1;
}

.callcenter-point__body {
    padding-top: 0;
}

/* Figma: 503 × 290 ≈ 7:4 */
.callcenter-point__img,
.callcenter-point__img--2,
.callcenter-point__img--3 {
    aspect-ratio: 503 / 290;
    border-radius: var(--radius-10);
    overflow: hidden;
}

.callcenter-point--reverse .callcenter-point__img,
.callcenter-point--reverse .callcenter-point__img--2,
.callcenter-point--reverse .callcenter-point__img--3 {
    order: 2;
}

.callcenter-point__img img,
.callcenter-point__img--2 img .callcenter-point__img--3 img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}



.callcenter-point__label {
    color: var(--color-gold-1);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-700);
    line-height: 160%;
    text-transform: uppercase;
    margin: 20px 0 0 1px;
}

/* .callcenter-point__label--2 {
    color: var(--color-gold-1);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-700);
    line-height: 160%;
    text-transform: uppercase;
    margin: 8px 0 0 1px;
} */

.callcenter-point__label--3 {
    color: var(--color-gold-1);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-700);
    line-height: 160%;
    text-transform: uppercase;
    margin: 8px 0 0 1px;
}

.callcenter-point__title {
    color: var(--color-navy-2);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-700);
    letter-spacing: var(--letter-spacing-10);
    margin: 0 0 0 1px;
    margin-block-start: 19px;
}

/* .callcenter-point__title--2 {
    color: var(--color-navy-2);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-700);
    letter-spacing: var(--letter-spacing-10);
    margin-block-start: 12px;
    margin: 19px 0 0 1px;
} */

.callcenter-point__title--3 {
    color: var(--color-navy-2);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-700);
    letter-spacing: var(--letter-spacing-10);
    margin-block-start: 12px;
    margin: 19px 0 0 1px;
}

.callcenter-point__text {
    color: var(--color-black-2);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-30);
    margin-block-start: 18px;
}

/* .callcenter-point__text--2 {
    color: var(--color-black-2);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-30);
    margin-block-start: 13px;
} */

.callcenter-point__text--3 {
    color: var(--color-black-2);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-30);
    margin-block-start: 13px;
}



/* ============================================
   8. サポート体制（紺丸角カード）
   ============================================ */

.callcenter-support {
    padding-block-start: 40px;
    padding-right: 50px;
    max-width: 1035px;
}

/* カード本体: Figma Rectangle 112（#003D56, borderRadius:10px, shadow） */
.callcenter-support__card {
    background-color: var(--color-navy-2);
    border-radius: var(--radius-10);
    box-shadow: 0 0 15px rgba(0, 30, 43, .2);
    display: flex;
    min-height: 422px;
    overflow: hidden;
}

/* 左: テキスト + ボタン */
.callcenter-support__content {
    flex: 1;
    min-width: 0;
    padding: 39px 35px 40px 51px;
}

/* 見出し: Figmaでは白（暗背景上）*/
.callcenter-support__heading {
    color: var(--color-white-1);
    font-family: var(--font-family-noto-sans-jp);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-700);
    letter-spacing: var(--letter-spacing-10);
    line-height: 45px;
    margin-block-start: 13px;
}

.callcenter-support__heading--span {
    color: var(--color-white-1);
    font-family: var(--font-family-figtree);
    font-size: var(--font-size-36);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-45);
    letter-spacing: var(--letter-spacing-10);
}

/* 本文: Figmaでは白（暗背景上）*/
.callcenter-support__text {
    color: var(--color-white-1);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-30);
    margin-block-start: 19px;
}

.callcenter-support__btn-wrap {
    margin-block-start: 22px;
}

/* 右: 写真 + グラデーションオーバーレイ + 装飾SVG
   Figma Mask group: 457 × 422px */
.callcenter-support__media {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    /* Figma: 457/1005 ≈ 45.5% */
    width: 45%;
}

/* 背景写真のみに適用（:first-child で装飾SVGを除外）*/
.callcenter-support__media img:first-child {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* グラデーションオーバーレイ
   Figma: linear-gradient(137deg, 青→白), opacity:0.85
   position:absolute を使用（必要な例外） */
.callcenter-support__media-overlay {
    background: linear-gradient(137deg, rgba(63, 131, 163, 1) 5%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 100%);
    inset: 0;
    opacity: .85;
    position: absolute;
}

/* 装飾SVGイラスト: Figma node 161:941
   Figma値: x:88, y:129, w:282, h:164 / Mask group 457×422px
   left: 88/457≈19.3% → 50%-half-width で中央揃え
   top:  129/422≈30.6%
   width: 282/457≈61.7%
   position:absolute を使用（必要な例外） */
.callcenter-support__icon {
    height: auto;
    max-width: 282px;
    width: min(50vw, 282px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    aspect-ratio: 282 / 164;
}

.btn--lg {
    width: 229px;
    height: 55px;
}

/* ============================================
   9. CTA ホバーアニメーション
   ============================================ */

/* ボタン全体: transition + hover brightness */
.btn {
    transition:
        filter 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
    filter: brightness(0.94);
}

/* アイコン枠: スライドアニメーション用の設定 */
.btn__icon-square {
    border: 1px solid transparent;
    /* ホバー時の 1px ずれ防止 */
    isolation: isolate;
    /* z-index をこの枠内に閉じ込める */
    overflow: hidden;
    /* スライドを枠内に収める */
    transition: color 0.18s ease 0.12s, border-color 0.2s ease;
}

/* スライドイン背景（::before） */
.btn__icon-square::before {
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s ease;
    z-index: 0;
}

/* 矢印を ::before より前面に */
.btn__icon-square .btn__arrow {
    position: relative;
    z-index: 1;
}

/* --- バリアントごとのスライドイン色 --- */

.btn--navy .btn__icon-square {
    border-color: var(--color-white-1);
}

.btn--navy .btn__icon-square::before {
    background-color: var(--color-navy-2);
}

.btn--outline .btn__icon-square,
.btn--white .btn__icon-square {
    border-color: var(--color-navy-2);
}

.btn--outline .btn__icon-square::before,
.btn--white .btn__icon-square::before {
    background-color: var(--color-white-1);
}

.btn--gold .btn__icon-square {
    background-color: var(--color-white-1);
    border-color: var(--color-white-1);
    color: var(--color-gold-2);
}

.btn--gold .btn__icon-square::before {
    background-color: var(--color-gold-2);
}

/* --- ホバー時: ::before スライドイン + 矢印色切り替え --- */

.btn:hover .btn__icon-square::before,
.btn:focus-visible .btn__icon-square::before {
    transform: scaleX(1);
}

.btn--navy:hover .btn__icon-square,
.btn--navy:focus-visible .btn__icon-square {
    color: var(--color-white-1);
}

.btn--outline:hover .btn__icon-square,
.btn--outline:focus-visible .btn__icon-square,
.btn--white:hover .btn__icon-square,
.btn--white:focus-visible .btn__icon-square {
    color: var(--color-navy-2);
}

.btn--gold:hover .btn__icon-square,
.btn--gold:focus-visible .btn__icon-square {
    color: var(--color-white-1);
}


/* ============================================
   10. レスポンシブ（タブレット: 769px〜1024px）
   ============================================ */

@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* FV */
    .lower-fv--callcenter {
        height: 600px;
    }

    .lower-fv__title-en {
        font-size: 56px;
    }

    .callcenter-section-en {
        padding-top: 20px;
    }

    .callcenter-about .lower-about {
        padding-inline: var(--container-padding-inline);
    }

    /* 修正⑤: 本文エリア padding */
    .callcenter-body {
        padding-block: 24px 80px;
        padding-inline-start: 0;
    }

    .callcenter-section-heading {
        font-size: var(--font-size-24);
    }

    /* 修正⑥: service / point タブレット列幅 */
    .callcenter-service-card {
        grid-template-columns: 48% 1fr;
    }

    .callcenter-service-card--reverse {
        grid-template-columns: 1fr 48%;
    }

    .callcenter-dark-zone {
        background-color: var(--color-navy-2);
        margin: 0 3.47%;
        margin-block-start: 54px;
        border-radius: 10px;
    }

    .callcenter-strengths {
        padding: 0 3.47%;
        padding-block: 50px;
    }

    .callcenter-point {
        grid-template-columns: 45% 1fr;
    }

    .callcenter-point--reverse {
        grid-template-columns: 1fr 45%;
    }

    .callcenter-support {
        padding: 0 3.47%;
        padding-block-start: 40px;
    }

    .callcenter-support__content {
        padding: 40px 32px;
    }

    /* 修正①: business-banner タブレット */
    .business-banner__row {
        font-size: clamp(96px, 12vw, 144px);
    }

    .business-banner__group {
        gap: clamp(12px, 1.6vw, 20px);
        padding-inline-end: clamp(40px, 4vw, 56px);
    }

    .business-banner__row--top .business-banner__group {
        gap: clamp(16px, 2.5vw, 28px);
    }

    .business-banner__row--bottom {
        margin-block-start: -20px;
    }

    .business-banner__logo {
        height: clamp(92px, 10.5vw, 124px);
        width: clamp(158px, 18vw, 214px);
    }

    .business-banner__photo {
        height: clamp(84px, 9vw, 108px);
        width: clamp(160px, 17vw, 204px);
    }
}


/* ============================================
   11. レスポンシブ（SP: 768px以下）
   ============================================ */

@media screen and (max-width: 768px) {

    /* FV */
    .lower-fv--callcenter {
        height: 500px;
        padding-bottom: 40px;
    }

    .lower-fv__title-en {
        font-size: 40px;
    }

    .lower-fv__subtitle {
        font-size: var(--font-size-16);
    }

    .lower-fv__title-ja {
        font-size: var(--font-size-18);
    }

    .callcenter-about .lower-about {
        padding-inline: var(--container-padding-inline)
    }

    /* 本文エリア */
    .callcenter-body {
        padding-block: 0 60px;
        /* 上padding 0: ナビを FV 直下に寄せる */
        padding-inline-start: 0;
    }

    /* 修正④: lower-fv__icon-small SP サイズ */
    .lower-fv__icon-small {
        height: 18px;
        width: 32px;
    }


    /* セクション共通 */
    .callcenter-section-heading {
        font-size: var(--font-size-24);
    }

    /* ABOUT */
    .callcenter-dark-zone {
        border-radius: 5px;
        margin: 32px 15px 0;
        padding-bottom: 16px;
    }

    /* Service */
    .callcenter-service {
        padding-block: 20px;
        padding-inline: var(--container-padding-inline);
        /* SP: 15px */
    }

    .callcenter-service-card,
    .callcenter-service-card--reverse {
        grid-template-columns: 1fr;
    }

    .callcenter-service-card--reverse .callcenter-service-card__body,
    .callcenter-service-card--reverse .callcenter-service-card__img {
        order: unset;
    }

    .callcenter-service-card__body {
        padding-top: 10px;
    }


    .callcenter-service-card__text {
        margin-top: 30px;
    }

    .callcenter-service-card__img {
        padding-top: 10px;
        margin-top: 20px;
    }

    .callcenter-service-card__img img {
        border-radius: 5px;
    }

    .callcenter-service__divider {
        margin-block: 20px;
    }

    .callcenter-service-card__label {
        color: var(--color-white-1);
        font-family: var(--font-family-figtree);
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-700);
        text-transform: uppercase;
        padding-top: 0;
    }

    .callcenter-service-card__title {
        margin-top: 24px;
    }


    /* Strengths */
    .callcenter-strengths {
        padding: 0;
        padding-block: 48px;
        margin: 0 15px;

    }

    .callcenter-strengths__header {
        margin-block-end: 32px;
    }

    .callcenter-strengths__divider {
        margin-block: 40px;
    }

    .callcenter-point,
    .callcenter-point--reverse {
        grid-template-columns: 1fr;
    }

    .callcenter-point--reverse .callcenter-point__body,
    .callcenter-point--reverse .callcenter-point__img--2,
    .callcenter-point--reverse .callcenter-point__img--2 img {
        order: unset;
        width: 100%;
    }

    .callcenter-point__img--3 img {
        width: 100%;
    }


    .callcenter-point__title {
        padding: 0;
        line-height: var(--line-height-160);
    }

    /* .callcenter-point__label--2 {
        color: var(--color-gold-1);
        font-family: var(--font-family-figtree);
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-700);
        line-height: var(--line-height-160);
        text-transform: uppercase;
        margin: 20px 0 0 1px;
    } */

    .callcenter-point__body {
        padding-top: 30px;
    }

    /* Support */
    .callcenter-support {
        padding: 0;
        padding-block-start: 48px;
        margin: 0 15px;
    }

    .callcenter-support__card {
        flex-direction: column;
        min-height: auto;
    }

    .callcenter-support__content {
        padding: 0 24px 32px;
    }

    .callcenter-support__media {
        aspect-ratio: 4 / 3;
        width: 100%;
    }

    /* 修正①: business-banner SP */
    .business-banner {
        margin-block-start: 50px;
    }

    .business-banner__row {
        font-size: 80px;
    }

    .business-banner__track {
        animation-duration: 18s;
    }

    .business-banner__group {
        gap: 0;
        padding-inline-end: 20px;
    }

    .business-banner__row--bottom {
        margin-block-start: -2px;
    }

    .business-banner__logo {
        height: 69px;
        width: 119px;
    }

    .business-banner__photo {
        height: 60px;
        margin-inline-start: 5px;
        width: 90px;
    }
}


.navy2{
    color: #003D56;
}
.gold{
    color: #C28E0F;
}

.optical_fiber-gradation-zone{
    background: linear-gradient(
  90deg,
  #E9E9E9 0%,
  #FFFFFF 50%,
  #E4E4E4 100%
);
    margin-block-start: 54px;
    border-radius: 10px 0 0 10px;
}
.optical_fiber-service-card{
    display: flex;
    flex-direction: column;
}
.centaer_img{
    margin: 0 auto;
}
.optical_fiber-service-card-2{
    display: flex;
    align-items: center;
    gap: 30px;
}
.optical_fiber-service-card-2 > *:first-child{
    flex: 4.5;
}

.optical_fiber-service-card-2 > *:last-child{
    flex: 5.0;
}
.optical_fiber-service-card-2 .callcenter-section-heading{
    margin-bottom: 40px;
}
.optical_fiber-service-card-2 .callcenter-strengths__header{
    margin-bottom: 20px;
}
.text_box{
    max-width: 420px;
}
.x-plus img{
    object-position: left;
}

/* ============================================
   SP: サービスカードの余白・縦並び修正
   ============================================ */
@media screen and (max-width: 768px) {
    /* グラデーション背景ボックスの内側余白を確保（背景に余白がない問題の修正） */
    .optical_fiber-gradation-zone {
        margin-block-start: 40px;
        padding: 32px 0;
    }

    .optical_fiber-gradation-zone .callcenter-service {
        padding-block: 0;
        padding-inline: 24px;
    }

    /* 光回線でよくあるお悩み（problem）: セクション上下に余白 */
    .optical_fiber-service-card {
        gap: 24px;
    }

    /* 通信代理店事業／代理店パートナー支援: SPで縦並びにし余白を確保 */
    .optical_fiber-service-card-2 {
        flex-direction: column;
        gap: 24px;
    }

    .optical_fiber-service-card-2 > *:first-child,
    .optical_fiber-service-card-2 > *:last-child {
        flex: initial;
        width: 100%;
    }

    .optical_fiber-service-card-2 .callcenter-section-heading {
        margin-bottom: 20px;
    }

    .text_box {
        max-width: none;
    }
}
@media screen and (max-width: 1024px) {
.optical_fiber-gradation-zone{
    margin-left: 15px;
    margin-right: 15px;
    border-radius:10px ;
}
}

@media screen and (max-width: 768px) {
    .callcenter-section-heading.callcenter-section-heading2 {
        margin-top: -40px;
    }
}