/*===== あったかフェア共通クラス ここから =====*/

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*===== あったかフェア共通クラス ここまで =====*/

/*===== fair-hero ここから =====*/

.fair-hero {
    position: relative;
    padding-top: clamp(30px, calc(25.146px + 1.294vw), 50px);
    padding-bottom: clamp(0px, calc(-12.136px + 3.236vw), 50px);
    background: #faf3e8;
    overflow: clip;
}

.fair-hero__brush {
    position: absolute;
    top: -1.7%;
    left: -43.07%;
    width: 186.4%;
    max-width: none;
    height: 6.22%;
    object-fit: fill;
}

.fair-hero__stage {
    position: relative;
    width: min(calc(100% - 40px), 1200px);
    margin-inline: auto;
    padding-top: clamp(176px, calc(136.437px + 10.55vw), 339px);
}

.fair-hero__brand {
    position: absolute;
    top: clamp(0px, calc(24.854px - 1.294vw), 20px);
    left: 50%;
    z-index: 2;
    width: min(calc(100vw - 12px), clamp(362px, calc(221.954px + 37.346vw), 939px));
    aspect-ratio: 788.606 / 362;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
}

.fair-hero__photo-frame {
    height: clamp(260px, calc(221.165px + 10.356vw), 420px);
    border-radius: clamp(20px, calc(7.864px + 3.236vw), 70px) clamp(20px, calc(7.864px + 3.236vw), 70px) 0 0;
    box-shadow: 0 0 7.5px rgba(51, 0, 0, 0.24);
    overflow: hidden;
}

.fair-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 87% center;
}

@media screen and (min-width: 768px) {
    .fair-hero__photo {
        object-position: 87% 60%;
    }
}

.fair-hero__date {
    width: clamp(225px, calc(117.476px + 28.673vw), 668px);
    margin: clamp(15px, calc(10.146px + 1.294vw), 35px) auto 0;
}

.fair-hero__date img {
    width: 100%;
    height: auto;
    aspect-ratio: 668 / 178;
}

.fair-hero__offer {
    position: relative;
    width: clamp(225px, calc(-11.65px + 63.107vw), 1200px);
    max-width: 100%;
    height: clamp(123px, calc(93.146px + 7.961vw), 246px);
    margin: clamp(20px, calc(18.544px + 0.388vw), 26px) auto 0;
    overflow: visible;
}

.fair-hero__offer-copy {
    display: flex;
    margin: 0;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(20px, calc(11.99px + 2.136vw), 53px);
    color: #483925;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif;
    font-size: clamp(17px, calc(10.263px + 1.796vw), 44.755px);
    font-weight: 800;
    line-height: 1.706;
    letter-spacing: 0.2em;
    text-align: center;
    white-space: nowrap;
}

.fair-hero__offer-copy em {
    font-style: normal;
    text-emphasis: filled #e75e2b;
    text-emphasis-position: over;
}

.fair-hero__product {
    position: absolute;
    z-index: 1;
    max-width: none;
    object-fit: contain;
}

.fair-hero__product--ceiling-heater {
    top: 22.358%;
    left: -1.5%;
    width: 17.167%;
    transform: rotate(-3.55deg);
}

.fair-hero__product--fan-heater {
    top: -73.577%;
    right: 1.667%;
    width: 13.667%;
    transform: rotate(-7.43deg);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.fair-hero__product--clothes-dryer {
    top: 25.61%;
    right: -0.167%;
    width: 13.583%;
    transform: rotate(4.7deg);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.fair-hero__product--water-heater {
    top: -65.041%;
    left: 1.417%;
    width: 9.917%;
    transform: rotate(10.84deg);
}

/*===== fair-hero ここまで =====*/

/*===== coming-soon ここから =====*/

.coming-soon {
    display: flex;
    height: clamp(185px, calc(169.421px + 4.155vw), 249.188px);
    align-items: center;
    justify-content: center;
    gap: clamp(1px, calc(-1.184px + 0.5825vw), 10px);
    background: #faf3e8;
}

.coming-soon__title {
    width: clamp(225px, calc(175px + 13.333vw), 431px);
    margin: 0;
    color: #594c3c;
    font-family: "Rounded Mplus 1c", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic",
        YuGothic, sans-serif;
    font-size: clamp(32.48px, calc(25.198px + 1.942vw), 62.48px);
    font-weight: 500;
    line-height: 46.015px;
    white-space: nowrap;
}

.coming-soon__character-frame {
    position: relative;
    width: clamp(75.449px, calc(49.346px + 6.961vw), 183px);
    height: clamp(78px, calc(51.011px + 7.197vw), 189.188px);
}

.coming-soon__character {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 105.465%;
    max-width: none;
    height: 108.358%;
    transform: translate(-50%, -50%);
}

/*===== coming-soon ここまで =====*/

/*===== related-fair ここから =====*/

.related-fair {
    --section-gap: clamp(1.25rem, 0.947rem + 1.295vw, 2.5rem);
    padding-block: clamp(1.1607rem, 0.684rem + 2.036vw, 3.125rem);
    color: #483925;
    background: #e9bd98;
}

.related-fair__title {
    width: 100%;
    margin: 0;
    font-size: clamp(24px, 5.6vw, 38px);
    font-weight: 800;
    line-height: normal;
    text-align: center;
}

.related-fair__banner-link {
    display: block;
    width: min(100%, 46.5555rem);
    margin-inline: auto;
    margin-top: 20px;
    border-radius: clamp(0.2715rem, 0.116rem + 0.664vw, 0.8771rem);
    box-shadow: 0 clamp(0.1086rem, 0.052rem + 0.241vw, 0.3508rem) clamp(0.0543rem, 0.026rem + 0.121vw, 0.1754rem) rgba(51, 0, 0, 0.25);
    overflow: hidden;
    transition: transform 0.25s ease;
}

.related-fair__banner-link:focus-visible {
    outline: 3px solid var(--color-brand);
    outline-offset: 6px;
}

.related-fair__banner {
    width: 100%;
    height: auto;
    aspect-ratio: 1490 / 645;
    transition: filter 0.25s ease;
}

@media (hover: hover) {
    .related-fair__banner-link:hover {
        transform: translateY(-4px) scale(1.015);
    }

    .related-fair__banner-link:hover .related-fair__banner {
        filter: brightness(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {

    .related-fair__banner-link,
    .related-fair__banner {
        transition: none;
    }
}

/*===== related-fair ここまで =====*/

@media screen and (max-width: 767px) {
    /*===== fair-hero（SP） ここから =====*/

    .fair-hero__product--ceiling-heater {
        top: -4.065%;
        left: -16%;
        width: 24.889%;
    }

    .fair-hero__product--fan-heater {
        top: -6.504%;
        right: -24.889%;
        width: 22.667%;
        transform: none;
    }

    .fair-hero__product--clothes-dryer {
        top: 36%;
        right: -27%;
        width: 21.778%;
        transform: rotate(-10.74deg);
    }

    .fair-hero__product--water-heater {
        top: 42%;
        left: -20%;
        width: 14%;
    }

    /*===== fair-hero（SP） ここまで =====*/

    /*===== coming-soon（SP） ここから =====*/

    .coming-soon {
        flex-direction: column;
    }

    /*===== coming-soon（SP） ここまで =====*/

    /*===== related-fair（SP） ここから =====*/

    .related-fair__banner-link {
        margin-top: 0;
    }

    /*===== related-fair（SP） ここまで =====*/
}