@font-face {
    font-family: "Futura Hv BT Heavy";
    src: url("../fonts/Futura Hv BT Heavy.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Corporate";
    src: url("../fonts/Corporate-Logo-Rounded-Bold-ver3.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "DIN 2014";
    src: url("../fonts/DIN-2014_Demi.otf");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
.corpFont {
    font-family: "Corporate", sans-serif;
}
.futFont {
    font-family: "Futura Hv BT Heavy", sans-serif;
}
/* appBanner */
.acAppBanner {
    display: none;
    background: #00AFEC;
}

@media (max-width: 768px) {
    .acAppBanner {
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
        padding: 15px 15px 20px;
        border-radius: 10px;
        display: block;
        position: relative;
        overflow: hidden;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .ribbon {
        position: absolute;
        max-width: 76px;
        width: 100%;
        top: -2px;
        left: -3px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .ribbon {
        aspect-ratio: 74 / 72;
        object-fit: cover;
        display: block;
        height: auto;
        width: 100%;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .acImg {
        max-width: 225px;
        width: 100%;
        margin: 0 auto 7px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerTitle {
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 25.82px;
        letter-spacing: -0.39px;
        line-height: 1.36;
        text-shadow: 0 2px 2px rgba(0,0,0,0.25);
        margin-bottom: -2px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerTitle .sm {
        font-size: 23.24px;

    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .ptText {
        position: relative;
        font-size: 48.34px;
        color: #FFDD2D;
        -webkit-text-stroke: 1px #007097;
        font-weight: 900;
        text-shadow: 0 3px 3px rgba(0,0,0,0.25);
        padding: 0 21px;
        text-align: center;
        line-height: 1.2;
        width: fit-content;
        margin: 0 auto 3px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .ptText::before {
        content: "";
        position: absolute;
        display: block;
        left: -11px;
        top: 50%;
        transform: translateY(-50%) rotate(69.5deg);
        width: 36.18px;
        height: 2px;
        box-shadow: 2px 1px 2px rgba(0,0,0,0.25);
        background: #FFDD2D;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .ptText::after {
        content: "";
        position: absolute;
        display: block;
        right: -12px;
        top: 49%;
        transform: translateY(-50%) rotate(-69.5deg);
        width: 36.18px;
        height: 2px;
        box-shadow: -2px 1px 2px rgba(0, 0, 0, 0.25);
        background: #FFDD2D;;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .ptText .spc {
        margin-left: -5px;
        margin-right: -5px;
        font-size: 23.54px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .ptText .spc0 {
        letter-spacing: -2px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .ptText .pt {
        font-family: "Roboto", sans-serif;
        font-size: 25.2px;
        transform: translateX(2px);
        display: inline-block;
        background-image: radial-gradient(circle, #1F7AD6, #1F7AD6);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: #FFDD2D;
        -webkit-text-stroke: 2px transparent;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .ptText .GET {
        font-size: 32.77px;
        margin-left: 5px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .code {
        background: white;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0.88px;
        color: #5E5E5E;
        line-height: 1.4;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        max-width: 250px;
        width: 100%;
        margin: 0 auto;
        padding: 7px 10px;
        border: none;
        font-family: "Noto Sans JP", sans-serif;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .code span {
        display: block;
        margin-top: 2px;
        padding-right: 30px;
        position: relative;
        width: fit-content;
        font-family: "DIN 2014", sans-serif;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 2px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .code span::before {
        content: "";
        position: absolute;
        display: block;
        right: 1px;
        top: 45%;
        transform: translateY(-50%);
        width: 20px;
        aspect-ratio: 1/1;
        background: url("../images/aircon-banner/copy-icon.svg") no-repeat top center;
        background-size: 100%;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerList {
        display: flex;
        gap: 8px;
        border: none;
        padding: 0;
        max-width: 256px;
        width: 100%;
        margin: 10px auto 0;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerList li {
        flex: 0 0 calc((100% - 16px) / 3);
        border-radius: 100%;
        background: #1F7AD6;
        color: white;
        aspect-ratio: 1/1;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        line-height: 1.28;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerList li .icon {
        display: block;
        width: fit-content;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerList li .icon img {
        width: 33.33%;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerList li:nth-child(2) .icon img {
        width: 48.33%;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerList li:nth-child(3) .icon img {
        width: 33.33%;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerNote {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.3;
        color: white;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 8px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerBtn {
        max-width: 278px;
        width: 100%;
        margin: 6.8px auto 0;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerBtn a {
        color: white;
        background: #FFDD2D;
        color: #1F7AD6;    
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 60px;
        font-size: 12.3px;
        font-weight: 700;
        padding: 8px 10px 8px 16px;
        text-decoration: none;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .bannerBtn a .icon {
        max-width: 35px;
        width: 100%;
        margin-right: 10px;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .text {
        padding-right: 22.6px;
        position: relative;
    }
    .contentWrap .contentMain .areaBlog .blogContent .acAppBanner .text::after {
        content: "";
        position: absolute;
        display: block;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 12.58px;
        aspect-ratio: 12.58 / 10.63;
        background: url("../images/aircon-banner/download-icon-blue.png") no-repeat top center;
        background-size: 100%;
    }
}
/* appBannerTop */
.appTopBanner {
    display: none;
}
@media (max-width: 768px) {
    body:has(.appTopBanner) .contentWrap {
        padding-top: clamp(20px, calc(12.723vw - 27.71px), 70px);
    }
    .appTopBanner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        padding: clamp(10.11px, calc(2.568vw + 1.28px), 21px) 3.49vw;
        background: #00AFEC;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }
    .appTopBanner.isHidden {
        transform: translateY(-100%);
    }
    .appTopBanner .appTopBannerLogo {
        width: 9.30vw;
        transform: translateX(-0.29vw);
    }
    .appTopBanner .appTopBannerLogo img {
        display: block;
        aspect-ratio: 1/1;
        width: 100%;
        object-fit: cover;
    }
    .appTopBanner .appTopBannerText {
        font-size: 3.49vw;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.35vw;
        color: white;
        margin-right: 2.62vw;
        margin-left: 2.03vw;
        transform: translateY(0.29vw);
    }
    .appTopBanner .appTopBannerText .spc {
        letter-spacing: 0;
    }
    .appTopBanner .appTopBannerText .num {
        color: #FFDD2D;
        display: inline;
        font-size: 4.65vw;
        font-family: "Futura Hv BT Heavy", sans-serif;
    }
    .appTopBanner .appTopBannerText .num .sm {
        font-size: 2.91vw;
        font-family: "Noto Sans JP", sans-serif;
    }
    .appTopBanner .appTopBannerText .num .fs14 {
        font-size: 4.07vw;
        font-family: "Noto Sans JP", sans-serif;
    }
    .appTopBanner .appTopBannerButton {
        min-width: 21.51vw;
        flex-shrink: 0;
    }
    .appTopBanner .appTopBannerButton a {
        display: block;
        width: 100%;
        border-radius: 1.45vw;
        font-size: 2.91vw;
        background: #0063CD;
        color: white;
        padding: 2.03vw 2.03vw 2.03vw;
        line-height: 1.2;
        font-weight: bold;
        transform: translateY(0.29vw) translateX(0.29vw);
    }
    .appTopBanner .appTopBannerButton a span {
        display: block;
        padding-right: 4.07vw;
        position: relative;
    }
    .appTopBanner .appTopBannerButton a span::before {
        content: "";
        display: block;
        position: absolute;
        width: 3.20vw;
        aspect-ratio: 11/9.29;
        right: 1.45vw;
        top: 50%;
        transform: translateY(-50%);
        background: url("../images/aircon-banner/download-icon.png") center no-repeat;
        background-size: 100%;
    }
}
@media (max-width: 430px) {
    body:has(.appTopBanner) .contentWrap {
        padding-top: 20px;
    }
}