/* ハイライトセクション専用：300〜1000pxでのレスポンシブ化 */
@media (max-width: 1000px) {

    /* セクション全体の左右安全余白とフル幅化（他セクションへは影響なし） */
    section.highlight {
        width: 100%;
        max-width: 100%;
    }

    section.highlight .container {
        padding-inline: 16px;
        /* 端の文字欠け防止 */
    }

    /* タイトル - 事業紹介と同じサイズに統一 */
    section.highlight .highlight__title {
        font-size: clamp(24px, 7vw, 36px);
        line-height: 1.25;
        margin: 0 0 20px;
        text-align: center;
        font-weight: 800;
    }

    /* コンテンツ：1カラム化＋十分な間隔 */
    section.highlight .highlight__content {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    /* 各アイテム：画像→本文の縦並び。背景レイヤや影があっても崩さない */
    section.highlight .highlight__item {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 12px;
        align-items: start;
    }

    /* 画像：比率を固定して切り抜き、横幅いっぱい。角丸/影は既存を尊重 */
    section.highlight .highlight__item-image {
        width: 100%;
    }

    section.highlight .highlight__item-image img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        /* 4/3が良ければ 4/3 に変更可 */
        object-fit: cover;
    }

    /* テキストブロック：中央寄せ＋行長制御で読みやすく */
    section.highlight .highlight__item-content {
        width: min(92vw, 720px);
        margin: 0 auto;
        text-align: left;
        /* 説明文は読みやすい左寄せ */
    }

    section.highlight .highlight__item-title {
        font-size: clamp(18px, 5.2vw, 24px);
        line-height: 1.35;
        margin: 0 0 12px;
        /* 8pxから12pxに変更 */
        word-break: keep-all;
        text-wrap: balance;
    }

    section.highlight .highlight__item-text {
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.85;
        margin: 0;
        max-width: 72ch;
        /* 行長の上限 */
        overflow-wrap: anywhere;
        /* はみ出しゼロ */
        word-break: normal;
        padding-top: 15px;
    }

    /* セクション内のアニメーション初期非表示を解除（見えなくなる事故防止） */
    section.highlight [data-ani] {
        opacity: 1 !important;
        transition: none !important;
    }

    /* 余白の最終調整（上下の呼吸をそろえる） */
    section.highlight {
        padding-block: 32px;
        position: relative !important;
        overflow: hidden !important;
    }

    /* 背景要素のスタイルを確実に適用 */
    section.highlight .highlight__bg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background:
            radial-gradient(600px 600px at 12% 18%, rgba(199, 226, 255, 0.5) 0%, rgba(199, 226, 255, 0.0) 60%),
            radial-gradient(520px 520px at 86% 72%, rgba(191, 225, 255, 0.45) 0%, rgba(191, 225, 255, 0.0) 62%),
            linear-gradient(160deg, #f7fbff 0%, #ffffff 60%, #eef6ff 100%) !important;
        opacity: 0.9 !important;
    }

    /* レスポンシブ時にも背景アニメーションを有効化 */
    /* worksセクションと同じ実装：style.cssの固定transformを無効化してアニメーションを適用 */
    /* メディアクエリを767px以下に限定して、style.cssの固定transformを確実に上書き */
}

/* 767px以下でstyle.cssの固定transformを上書きしてアニメーションを適用 */
@media (max-width: 767px) {

    body section.highlight::before,
    html body section.highlight::before,
    section.highlight::before {
        content: '' !important;
        position: absolute !important;
        top: 20% !important;
        left: 50% !important;
        width: 1600px !important;
        height: 200px !important;
        background: linear-gradient(180deg, #e3f0ff 0%, #ffffff 50%, #eef6ff 100%) !important;
        border-radius: 9999px !important;
        box-shadow: 0 8px 32px rgba(160, 190, 255, 0.15) !important;
        opacity: 0.8 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        /* style.cssの固定transformを削除（transformプロパティ自体を削除） */
        transform: unset !important;
        will-change: transform !important;
        animation: rotate-slow-top 15s linear infinite !important;
        /* アニメーション内のtransformが適用される */
    }

    body section.highlight .highlight__bg::before,
    html body section.highlight .highlight__bg::before,
    section.highlight .highlight__bg::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 1800px !important;
        height: 260px !important;
        background: linear-gradient(180deg, #ffffff 0%, #e3f0ff 55%, #d7eaff 100%) !important;
        border-radius: 9999px !important;
        box-shadow: 0 12px 40px rgba(160, 190, 255, 0.18) !important;
        opacity: 0.9 !important;
        /* style.cssの固定transformを削除（transformプロパティ自体を削除） */
        transform: unset !important;
        will-change: transform !important;
        animation: rotate-slow-center 20s linear infinite !important;
        /* アニメーション内のtransformが適用される */
    }

    body section.highlight .highlight__bg::after,
    html body section.highlight .highlight__bg::after,
    section.highlight .highlight__bg::after {
        content: '' !important;
        position: absolute !important;
        bottom: 20% !important;
        left: 50% !important;
        width: 2000px !important;
        height: 140px !important;
        background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%) !important;
        border-radius: 9999px !important;
        box-shadow: 0 10px 30px rgba(150, 180, 240, 0.16) !important;
        opacity: 0.85 !important;
        /* style.cssの固定transformを削除（transformプロパティ自体を削除） */
        transform: unset !important;
        will-change: transform !important;
        animation: rotate-slow-bottom 25s linear infinite !important;
        /* アニメーション内のtransformが適用される */
    }

    /* コンテンツを前面に表示 */
    section.highlight .container {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* 768px-1000pxの範囲でもアニメーションを適用 */
@media (min-width: 768px) and (max-width: 1000px) {

    body section.highlight::before,
    html body section.highlight::before,
    section.highlight::before {
        content: '' !important;
        position: absolute !important;
        top: 20% !important;
        left: 50% !important;
        width: 1600px !important;
        height: 200px !important;
        background: linear-gradient(180deg, #e3f0ff 0%, #ffffff 50%, #eef6ff 100%) !important;
        border-radius: 9999px !important;
        box-shadow: 0 8px 32px rgba(160, 190, 255, 0.15) !important;
        opacity: 0.8 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        /* style.cssの固定transformを削除（transformプロパティ自体を削除） */
        transform: unset !important;
        will-change: transform !important;
        animation: rotate-slow-top 15s linear infinite !important;
        /* アニメーション内のtransformが適用される */
    }

    body section.highlight .highlight__bg::before,
    html body section.highlight .highlight__bg::before,
    section.highlight .highlight__bg::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 1800px !important;
        height: 260px !important;
        background: linear-gradient(180deg, #ffffff 0%, #e3f0ff 55%, #d7eaff 100%) !important;
        border-radius: 9999px !important;
        box-shadow: 0 12px 40px rgba(160, 190, 255, 0.18) !important;
        opacity: 0.9 !important;
        /* style.cssの固定transformを削除（transformプロパティ自体を削除） */
        transform: unset !important;
        will-change: transform !important;
        animation: rotate-slow-center 20s linear infinite !important;
        /* アニメーション内のtransformが適用される */
    }

    body section.highlight .highlight__bg::after,
    html body section.highlight .highlight__bg::after,
    section.highlight .highlight__bg::after {
        content: '' !important;
        position: absolute !important;
        bottom: 20% !important;
        left: 50% !important;
        width: 2000px !important;
        height: 140px !important;
        background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%) !important;
        border-radius: 9999px !important;
        box-shadow: 0 10px 30px rgba(150, 180, 240, 0.16) !important;
        opacity: 0.85 !important;
        /* style.cssの固定transformを削除（transformプロパティ自体を削除） */
        transform: unset !important;
        will-change: transform !important;
        animation: rotate-slow-bottom 25s linear infinite !important;
        /* アニメーション内のtransformが適用される */
    }

    /* コンテンツを前面に表示 */
    section.highlight .container {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* 回転アニメーションの定義 */
@keyframes rotate-slow-top {
    0% {
        transform: translate(-50%, 0) rotate(-18deg);
    }

    100% {
        transform: translate(-50%, 0) rotate(342deg);
    }
}

@keyframes rotate-slow-center {
    0% {
        transform: translate(-50%, -50%) rotate(-18deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(342deg);
    }
}

@keyframes rotate-slow-bottom {
    0% {
        transform: translate(-50%, 0) rotate(-18deg);
    }

    100% {
        transform: translate(-50%, 0) rotate(342deg);
    }
}