@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@900&display=swap");

:root {
    --fair-brown: #594c3c;
    --fair-orange: #dc4f03;
    --fair-cream: #fdf4d9;
    --fair-beige: #f8d28e;
}

html {
    scroll-padding-top: 80px;
}

/*===== トップページ共通クラス ここから =====*/

.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;
}

.coming-soon__title,
.related-fair__title,
.coming-soon__notice-inner {
    margin: 0;
    font-family: "Zen Maru Gothic", "Yu Gothic", YuGothic, Meiryo, sans-serif;
    font-weight: 900;
}

/*===== トップページ共通クラス ここまで =====*/

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

.fair-hero {
    position: relative;
    height: min(832px, 43.333vw);
    overflow: hidden;
    background-color: #fcf5eb;
}

.fair-hero::before {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: clamp(213.435px, 128.346px + 22.69vw, 564px);
    background: url("../img/page-bg.png") center top / 100% 100% no-repeat;
    content: "";
}

.fair-hero__canvas {
    position: relative;
    width: 100%;
    height: 100%;
    margin-inline: auto;
}

.fair-hero__flag,
.fair-hero__content,
.fair-hero__product {
    position: absolute;
}

.fair-hero__flag {
    top: min(2px, 0.104vw);
    width: min(576.479px, 30.025vw);
    max-width: none;
    height: auto;
    aspect-ratio: 577 / 251;
}

.fair-hero__flag--left {
    left: 0;
}

.fair-hero__flag--right {
    right: 0;
}

.fair-hero__content {
    top: min(50px, 2.604vw);
    left: 50%;
    display: flex;
    width: min(916px, 47.708vw);
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.fair-hero__subtitle {
    width: min(624.652px, 32.534vw);
    height: auto;
    aspect-ratio: 626 / 147;
}

.fair-hero__logo {
    position: relative;
    width: 100%;
    margin-top: min(10px, 0.521vw);
    aspect-ratio: 916 / 579;
}

.fair-hero__logo-art {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fair-hero__product {
    z-index: 1;
    max-width: none;
    height: auto;
}

.fair-hero__product--bath {
    top: 1.544%;
    left: -23.581%;
    width: 30.022%;
}

.fair-hero__product--floor-heating {
    top: 54.912%;
    left: -32.314%;
    width: 25.655%;
}

.fair-hero__product--fan-heater {
    top: 18.297%;
    left: 96.834%;
    width: 38.537%;
}

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

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

.coming-soon {
    --section-gap: clamp(1.25rem, 0.947rem + 1.295vw, 2.5rem);
    padding: clamp(1.875rem, 1.572rem + 1.295vw, 3.125rem) 0;
    background: var(--fair-cream);
}

.coming-soon__title {
    color: var(--fair-brown);
    font-size: clamp(1rem, 0.545rem + 1.942vw, 2.875rem);
    line-height: normal;
    text-align: center;
}

.coming-soon__title span {
    display: block;
}

.coming-soon__notice {
    display: flex;
    width: 100%;
    padding: 5px;
    align-items: center;
    justify-content: center;
    background-color: #ffefc8;
    background-image: url("../img/venue-frame.png"), linear-gradient(115deg, #ffeab9 2%, #fff8e1 55%, #ffefc8 99%);
    background-repeat: repeat, no-repeat;
    background-position: left top, center;
    background-size: 264px 272px, 100% 100%;
    filter: drop-shadow(0 2px 3.5px rgba(51, 0, 0, 0.3));
}

.coming-soon__notice-inner {
    display: flex;
    width: 100%;
    height: clamp(8.875rem, 6.493rem + 10.162vw, 18.6875rem);
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    overflow: hidden;
    color: var(--fair-orange);
    background-color: #fefefe;
    background-image:
        url("../img/pin.png"),
        url("../img/pin.png"),
        url("../img/pin.png"),
        url("../img/pin.png");
    background-repeat: no-repeat;
    background-position:
        12px 12px,
        calc(100% - 12px) 12px,
        12px calc(100% - 12px),
        calc(100% - 12px) calc(100% - 12px);
    background-size: 9px 10px;
    box-shadow: 0 1px 1px rgba(51, 0, 0, 0.25);
    font-size: clamp(2.875rem, 2.389rem + 2.071vw, 4.875rem);
    line-height: normal;
    white-space: nowrap;
}

/*===== 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: #edd18c;
}

.related-fair .fair-stack {
    justify-content: center;
}

.related-fair__title {
    width: 100%;
    color: inherit;
    font-size: clamp(24px, 5.6vw, 38px);
    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(14px, 3.781vw, 29px);
    filter: drop-shadow(2.6px 2.6px 1.3px 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: 2745 / 1188;
    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 {
        height: clamp(332.8px, 415.267px - 10.738vw, 375px);
    }

    .fair-hero__flag {
        top: clamp(-5px, -10.533px + 1.476vw, 0.799px);
        width: clamp(157.805px, 88.352px + 18.521vw, 230.592px);
    }

    .fair-hero__content {
        top: clamp(20px, 120.641px - 13.104vw, 71.5px);
        width: clamp(293.591px, 224.117px + 18.526vw, 366.4px);
    }

    .fair-hero__subtitle {
        width: clamp(200.21px, 152.833px + 12.634vw, 249.861px);
    }

    .fair-hero__logo {
        margin-top: clamp(0px, -3.817px + 1.018vw, 4px);
    }

    .fair-hero__product--bath {
        top: clamp(-13.05px, -28.915px + 4.231vw, 3.576px);
        left: clamp(-86.4px, 20.495px - 13.919vw, -31.7px);
        width: clamp(75px, 41.603px + 8.906vw, 110px);
    }

    .fair-hero__product--floor-heating {
        top: clamp(127.176px, 216.627px - 11.647vw, 172.95px);
        left: clamp(-118.4px, 47.121px - 21.552vw, -33.7px);
        width: clamp(75px, 56.87px + 4.835vw, 94px);
    }

    .fair-hero__product--fan-heater {
        top: clamp(42.376px, 68.902px - 3.454vw, 55.95px);
        left: clamp(244.3px, 138.861px + 28.117vw, 354.8px);
        width: clamp(80px, 21.603px + 15.573vw, 141.2px);
    }

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

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

    .coming-soon__notice-inner {
        padding: 10px 5px;
    }

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

}

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

    .fair-hero {
        height: 100vw;
    }

    .fair-hero::before {
        height: 56.916vw;
    }

    .fair-hero__flag {
        top: -1.333vw;
        width: 42.081vw;
    }

    .fair-hero__content {
        top: 19.067vw;
        width: 78.291vw;
    }

    .fair-hero__subtitle {
        width: 53.389vw;
    }

    .fair-hero__product--bath {
        top: -7.032%;
        left: -10.797%;
        width: 25.546%;
    }

    .fair-hero__product--floor-heating {
        top: 93.195%;
        left: -11.479%;
        width: 25.546%;
    }

    .fair-hero__product--fan-heater {
        top: 30.149%;
        left: 83.211%;
        width: 27.249%;
    }

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

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

    .coming-soon__notice-inner {
        font-size: clamp(2.1875rem, 12.27vw, 2.875rem);
    }

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