html {
    font-size: 18px;
}

button {
    cursor: pointer;
}

.non-from-pc {
    display: none;
}

.from-pc {
    display: block;
}

.carousel {
    .slide {
        &::scroll-marker {
            transition-property: background-color;
            transition-duration: .2s;
        }

        &::scroll-marker:hover {
            background-color: var(--airconmart-green) !important;
        }

        &::scroll-marker:active {
            background-color: var(--airconmart-l-blue) !important;
        }
    }
}

.pagination {
    button {
        transition-property: background-color;
        transition-duration: .2s;

        &:hover {
            background-color: var(--airconmart-green) !important;
        }

        &:active {
            background-color: var(--airconmart-l-blue) !important;
        }
    }
}

.to-main {
    border-radius: 44.5px;
}

header {
    &:has(#hmbg-btn) {
        justify-content: flex-start;
        gap: 2%;
        padding-right: 5%;

        nav {
            display: contents;

            ul {
                display: contents;

                li {
                    display: contents;

                    &:first-of-type {
                        a {
                            margin-left: auto;
                        }
                    }

                    a {
                        color: var(--airconmart-black);
                        position: relative;
                        display: block;
                        padding-top: 26px;
                        height: calc(1em + 26px);
                        transition-property: color;
                        transition-duration: .2s;

                        &:hover {
                            color: var(--airconmart-green);
                        }

                        &:active {
                            color: var(--airconmart-l-blue);
                        }
                    }
                }
            }
        }
    }
}

#hmbg-btn {
    display: none;
}

aside {
    &:not(.from-tb) {
        a {
            transition-property: border-color;
            transition-duration: .2s;

            &:hover {
                border-color: gray;
            }

            &:last-of-type {
                &::after {
                    transition-property: background-color;
                    transition-duration: .2s;
                }

                &:hover {
                    &::after {
                        background-color: var(--airconmart-green);
                    }
                }

                &:active {
                    &::after {
                        background-color: var(--airconmart-l-blue);
                    }
                }
            }
        }
    }

    &.from-tb {
        width: 110px;

        div {
            height: 205px;
        }
    }
}

#hero {
    height: 80svh;

    img {
        height: 100%;
    }

    strong {
        font-size: 36px;
        padding-left: 24vw;

        .bigger {
            font-size: 60px;
        }
    }
}

#catch {
    .flex-box {
        display: flex;
        justify-content: center;
        gap: 3%;
    }

    p {
        font-size: 30px;
        margin: unset;

        span {
            font-size: 20px;
        }
    }

    .img-container {
        margin: unset;
    }

    .carousel {
        gap: 50px;
        height: 280px;

        &::scroll-marker-group {
            gap: 32px;
        }

        .slide {
            width: 600px;
        }
    }

    .pagination {
        gap: 32px;
    }
}

#info {
    .eye-catch {
        height: calc(100svh - 245px);

        h2 {
            font-size: 24px;
            width: 700px;
            margin-top: 300px;
        }
    }

    >img {
        width: 183px;
        margin: 30px;
    }
}

#stable-market {
    &::after {
        height: 325px;
    }

    h3 {
        font-size: 28px;

        span {
            font-size: 38px;
        }
    }

    h4 {
        font-size: 30px;
        width: 1125px;
        padding: 22px 0;
    }

    ol {
        anchor-name: --stable-reason;
        width: 1250px;

        li {
            position: relative;
            width: 520px;
            height: 80px;
            margin: 20px 0 20px 30px;
            cursor: pointer;

            &::before {
                padding-left: 18px;
            }

            &:hover {
                background-color: var(--airconmart-green);
            }

            &:active {
                background-color: var(--airconmart-l-blue);
            }

            &.active {
                button {
                    background-color: var(--airconmart-green);
                }
            }
        }
    }

    #stable-carousel {
        position-anchor: --stable-reason;
        position: absolute;
        top: calc(anchor(top) + 85px);
        right: calc(anchor(right) + 37px);

        &::scroll-button(right),
        &::scroll-button(left) {
            content: none;
        }
    }

    button {
        position: absolute;
        top: 50%;
        right: -2em;
        display: block;
        width: 1em;
        height: 1em;
        background-color: var(--airconmart-l-blue);
        margin-left: 1em;
        clip-path: shape(from 0 0,
                line to 100% 50%,
                line to 0 100%,
                close);
        translate: 0 -50%;
    }
}

#feature {
    .eye-catch {
        height: 750px;

        &::before {
            width: 1024px;
        }

        +.img-container {
            width: 860px;
            height: 415px;
        }

        p {
            font-size: 30px;
        }
    }
}

#amazing {
    h3 {
        font-size: 28px;
    }

    ul {
        font-size: 34px;
        width: 1200px;

        li {
            width: 570px;
            height: 110px;
        }
    }
}

#vacuuming {
    h3 {
        font-size: 38px;
        height: 92px;
    }

    p {
        &:first-of-type {
            top: 190px;
        }

        &:nth-of-type(2) {
            margin-right: 145px;
            margin-bottom: 234px;
        }

        &:last-of-type {
            font-size: 48px;
        }
    }

    .img-container {
        &:first-of-type {
            width: 924px;
        }

        &:nth-of-type(2) {
            width: 676px;
            bottom: 36px;

            &::before {
                top: 228px;
            }
        }

        &:nth-of-type(3) {
            width: 832px;
        }
    }
}

#cant-inherit {
    ul {
        font-size: 34px;
        width: 1200px;

        li {
            width: 570px;
            height: 110px;
        }
    }
}

#check-point {
    padding-bottom: 450px;

    +.line {
        font-size: 28px;
        margin-top: 0;

        .blue {
            font-size: 38px;
        }
    }

    p {
        font-size: 34px;
        width: 1200px;
        max-width: calc(100% - 220px);
        border-radius: 40px;

        img {
            right: 100px;
            bottom: -250px;
            width: 250px;
            height: 300px;
        }
    }
}

#reality {
    article {
        width: 570px;

        h3 {
            font-size: 28px;
        }

        ul {
            font-size: 24px;

            li {
                line-height: 2em;
            }
        }
    }

    .carousel {
        height: 350px;

        .slide {
            width: 525px;
        }
    }
}

#craftsman-feedback {
    width: 1200px;

    article {
        &:nth-of-type(even) {
            .feedback {
                margin-right: auto;
            }

            .introduce {
                margin-right: auto;
                padding-left: 213px;

                img {
                    left: -121px;
                }

                p {
                    text-align: left;
                }
            }
        }

        &:last-of-type {
            .feedback {
                font-size: 32px;
            }
        }
    }

    .feedback {
        font-size: 34px;
        width: 753px;
        height: 348px;
    }

    .introduce {
        width: 831px;
        margin: 80px auto 120px;
        padding-left: 18px;

        img {
            right: -121px;
            width: 315px;
            height: 315px;
        }

        li {
            &::before {
                margin-right: unset;
            }
        }
    }
}

#about {
    .eye-catch {
        height: calc(100svh - 245px);
    }

    h2 {
        margin-right: 132px;
    }
}

#merit {
    width: 1200px;
}

#dont-worry {
    margin-bottom: 400px;

    >div {
        img {
            width: 170px;
            height: 300px;
        }
    }

    p {
        font-size: 30px;
        height: 100px;

        &:has(span) {
            &::before {
                bottom: 0;
            }

            &::after {
                top: 50px;
            }
        }
    }

    h3 {
        font-size: 44px;
    }

    ul {
        font-size: 36px;
        font-weight: 600;
        width: 1200px;
        max-width: calc(100% - 220px - 24px);

        li {
            height: 100px;
            box-shadow: 12px 12px var(--airconmart-blue);
        }
    }
}

#course {
    &::after {
        height: 327px;
    }

    h2 {
        font-size: 38px;
        height: 345px;
    }

    button {
        font-size: 24px;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            border: 5px solid transparent;
            transition-property: border-color;
            transition-duration: .2s;
            border-radius: inherit;
        }

        &:hover {
            &::before {
                border-color: gray;
            }
        }

        &:active {
            background-image: linear-gradient(var(--airconmart-l-blue));
        }
    }

    .btn-container {
        gap: 40px;
        width: fit-content;
        margin: 0 auto 50px;

        div {
            width: 300px;
        }
    }

    .course-accordion {
        h3 {
            font-size: 38px;
            width: calc(100% - 220px);
            margin: 0 110px 48px;

            span {
                &:first-of-type {
                    font-size: 48px;
                }

                &:last-of-type {
                    font-size: 28px;
                }
            }
        }

        .img-container {
            width: 80%;
            height: 400px;
        }

        >ul {
            font-size: 34px;
            width: calc(100% - 300px);
            margin-inline: 150px;

            li {
                padding-inline: 28px;
            }
        }

        >p {
            font-size: 34px;
            width: calc(100% - 220px);
            margin-inline: 110px;
        }

        >div {
            &:first-of-type {
                font-size: 28px;
                width: 663px;
                padding-left: 90px;
                margin-left: 0;
                vertical-align: top;
            }

            &:nth-of-type(3) {
                margin-top: 200px;

                h4 {
                    font-size: 48px;
                    margin-bottom: 27px;
                }

                li {
                    font-size: 34px;
                }
            }

            &:last-of-type {
                padding-bottom: 70px;

                >div {
                    display: flex;
                    flex-wrap: wrap;
                    width: calc(100% - 220px);
                    margin-inline: 110px;
                }

                h4 {
                    font-size: 38px;
                }

                p {
                    font-size: 34px;
                    width: fit-content;
                    margin-inline: auto;
                }

                small {
                    font-size: 24px;
                    width: 935px;
                    margin: 0 0 0 150px;
                }
            }
        }
    }
}

#distant {
    h3 {
        font-size: 30px;
        padding-right: 140px;

        span {
            font-size: 50px;
        }
    }

    strong {
        font-size: 46px;
        width: 1033px;
        padding-right: 130px;
    }

    ul {
        font-size: 30px;
        width: 662px;
        margin-left: 11.7vw;
    }

    >img {
        anchor-name: --distant-img;
        width: 1200px;
        max-width: calc(100% - 220px);
    }

    .coupon {
        position-anchor: --distant-img;
        font-family: "Zen Maru Gothic";
        font-size: 28px;
        font-weight: 600;
        color: var(--airconmart-orange);
        text-align: center;
        position: absolute;
        bottom: calc(anchor(bottom) + 30px);
        left: calc(anchor(left) + 50%);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 350px;
        height: 180px;
        background-image: url("../assets/imgs/クーポン券.png");
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        rotate: 3deg;

        span {
            display: contents;

            &:first-of-type {
                font-size: 60px;
            }

            &:last-of-type {
                font-size: 28px;
            }
        }
    }

    p {
        font-size: 26px;
        
        &:nth-of-type(1) {
            margin-right: 11.7vw;
    
            &::after {
                left: calc(120px - 12vw);
                bottom: calc(-127px + 1vw);
            }
    
            .bigger {
                font-size: 30px;
            }
        }
    }

    div {
        img {
            &:first-of-type {
                margin-right: 130px;
            }

            &:last-of-type {
                margin-left: 130px;
            }
        }
    }

    h4 {
        margin-left: calc(11.7vw + 117px);
    }
}

#management {
    h3 {
        border-left-width: 15px;
    }

    article {
        width: 578px;

        h4 {
            font-size: 40px;
        }

        p {
            font-size: 26px;
        }

        img {
            width: 578px;
            height: 325px;
        }
    }

    >p {
        font-size: 26px;
        padding: 26px 44px 48px;
    }
}

#support {
    h3 {
        font-size: 38px;
    }

    strong {
        font-size: 28px;

        .bigger {
            font-size: 34px;
        }
    }

    .flex {
        height: 257px;
    }
}

#faq {
    h3 {
        font-size: 38px;
    }

    button {
        transition-property: color;
        transition-duration: .2s;

        &:hover {
            color: var(--airconmart-green);
        }

        &:active {
            color: var(--airconmart-l-blue);
        }
    }

    button,
    .faq-accordion {
        width: 1000px;
    }

    button,
    .faq-accordion p {
        padding: 28px 154px;
    }
}