/* ========================================
   イラストアクセント配置
   ======================================== */

/* 共通スタイル */
.illust-accent {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.illust-accent img {
    display: block;
    width: 100%;
    height: auto;
}

.illust-accent.is-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
}

.illust-accent--aircon.is-visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0) !important;
}

/* ========================================
   1. 猛暑 → temp-graph-section 右端
   ======================================== */
.illust-accent--mousho {
    right: -20px;
    top: 40px;
    width: 440px;
    transform: translateX(30px);
}

/* ========================================
   2. 暑いアイス → hokkaido-section 左下（グラフ付近）
   ======================================== */
.illust-accent--ice {
    left: 20px;
    top: -40px;
    width: 360px;
    transform: translateX(-30px);
}

/* ========================================
   3. 睡眠 → hokkaido-section 「寝苦しい夜」カード横
   ======================================== */
.illust-accent--sleep {
    right: 80px;
    bottom: -60px;
    width: 420px;
    transform: translateX(30px);
}

/* ========================================
   4. エアコン → expertise-section 見出し横
   ======================================== */
.illust-accent--aircon {
    left: 20px;
    top: 30%;
    width: 300px;
    transform: translateY(-50%) translateX(-20px);
    opacity: 0;
}

/* ========================================
   5. 涼しいハンドファン → interim-cta-section 左側
   ======================================== */
.illust-accent--fan {
    right: 20px;
    bottom: 20px;
    width: 400px;
    transform: translateX(30px);
}

/* ========================================
   6. 涼しいお茶 → merit-standalone 右側
   ======================================== */
.illust-accent--tea {
    right: 20px;
    bottom: 60px;
    width: 440px;
    transform: translateX(30px);
}

/* ========================================
   7. 家族 → contact-form-section 右側
   ======================================== */
.contact-form-section {
    overflow: hidden;
}

.illust-accent--family {
    right: 20px;
    bottom: 40px;
    width: 560px;
    transform: translateY(30px);
}

/* ========================================
   レスポンシブ: タブレット (max-width: 1200px)
   ======================================== */
@media (max-width: 1200px) {
    .illust-accent--mousho {
        width: 360px;
        right: -10px;
    }

    .illust-accent--ice {
        width: 300px;
        left: 10px;
    }

    .illust-accent--sleep {
        width: 340px;
    }

    .illust-accent--aircon {
        width: 250px;
        left: -40px;
    }

    .illust-accent--fan {
        width: 340px;
    }

    .illust-accent--tea {
        width: 360px;
    }

    .illust-accent--family {
        width: 460px;
    }
}

/* ========================================
   レスポンシブ: タブレット小 (max-width: 991px)
   ======================================== */
@media (max-width: 991px) {
    .illust-accent--mousho {
        width: 280px;
        top: 20px;
        right: -5px;
    }

    .illust-accent--ice {
        width: 200px;
        left: 5px;
        top: -20px;
    }

    .illust-accent--sleep {
        width: 260px;
        right: -20px;
        bottom: -40px;
    }

    .illust-accent--aircon {
        width: 200px;
        left: -20px;
    }

    .illust-accent--fan {
        width: 280px;
        right: 10px;
        bottom: 20px;
    }

    .illust-accent--tea {
        width: 300px;
        right: 10px;
    }

    .illust-accent--family {
        width: 360px;
        right: 10px;
    }
}

/* ========================================
   レスポンシブ: スマホ (max-width: 767px)
   ======================================== */
@media (max-width: 767px) {
    .illust-accent {
        position: relative;
        display: block;
        margin: 20px auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .illust-accent--mousho {
        width: 280px;
    }

    .illust-accent--ice {
        width: 260px;
    }

    .illust-accent--sleep {
        width: 320px;
    }

    .illust-accent--aircon {
        width: 240px;
        margin: 10px auto 24px;
    }

    .illust-accent--fan {
        width: 300px;
    }

    .illust-accent--tea {
        width: 320px;
    }

    .illust-accent--family {
        width: 400px;
        margin: 20px auto 10px;
    }

    .illust-accent.is-visible {
        opacity: 1;
    }
}