/* 事業内容セクション専用：300〜1000pxでのレスポンシブ化 */
@media (min-width:300px) and (max-width:1000px) {

    /* セクション全体の左右安全余白とフル幅化 */
    section.service {
        width: 100%;
        max-width: 100%;
    }

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

    /* タイトル統一 */
    section.service .en {
        font-size: clamp(22px, 6.5vw, 32px) !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    section.service .jp {
        font-size: clamp(18px, 5vw, 24px) !important;
        line-height: 1.3 !important;
        margin-top: 8px !important;
    }

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

    /* 各カード：画像→本文の縦並び */
    section.service .card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 12px !important;
        align-items: start !important;
    }

    /* 画像：比率を固定して切り抜き、横幅いっぱい */
    section.service .card-media {
        width: 100% !important;
    }

    section.service .card-media img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4/3 !important;
        object-fit: cover !important;
    }

    /* テキストブロック：中央寄せ＋行長制御で読みやすく */
    section.service .card-body {
        width: min(92vw, 720px) !important;
        margin: 0 auto !important;
        text-align: left !important;
        padding: 16px 20px !important;
    }

    section.service .card-title {
        font-size: clamp(18px, 5.2vw, 24px) !important;
        line-height: 1.35 !important;
        margin: 0 0 12px !important;
        word-break: keep-all !important;
        text-wrap: balance !important;
    }

    section.service .card-desc {
        font-size: clamp(14px, 3.8vw, 16px) !important;
        line-height: 1.85 !important;
        margin: 0 !important;
        max-width: 72ch !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* セクション内のアニメーション初期非表示を解除 */
    section.service [data-ani] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* 余白の最終調整 */
    section.service {
        padding-block: 32px !important;
    }

    /* =========================================================
       Service Section - New Design (300px–1000px)
       写真が丸みを帯びたフレームに収まり、その下にテキストが配置されたパネル
       ========================================================= */

    /* カード全体の新しいデザイン - PCの色とレイアウトを維持 */
    .service-card__front {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        /* PC時と同じく下寄せ */
        padding: 16px 10px 10px 10px !important;
        /* 画像上部にスペースを確保：上16px、他10px */
        background: var(--card-color, #e74c3c) !important;
        /* CSS変数で個別の色を維持 */
        border-radius: 20px !important;
        /* PC時の角丸 */
        box-shadow: none !important;
        /* レスポンシブ時は影を削除 */
    }

    /* 画像をPC時と同じレイアウトで配置 */
    .service-card__image {
        flex: 1 1 80%;
        /* PC時と同じ比率 */
        overflow: hidden;
        margin: 12px 6px 0 6px;
        /* PC時と同じマージン + 上部にスペース追加 */
        border-radius: 12px;
        /* PC時の角丸 */
    }

    /* 画像のスタイリング */
    .service-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* テキストラベルのスタイリング - PC時のレイアウトを維持 */
    .service-card__label {
        flex: 0 0 20%;
        /* PC時と同じ比率 */
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 18px;
        color: #fff;
        letter-spacing: 0.05em;
        padding: 16px 0;
        /* PC時のpadding */
    }
}

/* スマホ版（300px〜349px）専用CSS - 350〜1000pxと同じレイアウトを維持（微調整のみ） */
@media screen and (min-width: 300px) and (max-width: 349px) {

    /* タイトル統一（300〜349pxではやや小さめに調整） */
    section.service .en {
        font-size: clamp(20px, 6.2vw, 30px) !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    section.service .jp {
        font-size: clamp(16px, 4.8vw, 22px) !important;
        line-height: 1.3 !important;
        margin-top: 8px !important;
    }

    /* カードタイトル（300〜349pxではやや小さめに調整） */
    section.service .card-title {
        font-size: clamp(16px, 4.8vw, 22px) !important;
        line-height: 1.35 !important;
        margin: 0 0 12px !important;
        word-break: keep-all !important;
        text-wrap: balance !important;
    }

    /* カード説明文（300〜349pxではやや小さめに調整） */
    section.service .card-desc {
        font-size: clamp(13px, 3.5vw, 15px) !important;
        line-height: 1.85 !important;
        margin: 0 !important;
        max-width: 72ch !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* テキストラベルのスタイリング（300〜349pxではやや小さめに調整） */
    .service-card__label {
        font-size: 16px !important;
        padding: 14px 0 !important;
    }
}