* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition-duration: .4s;
}

::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition-duration: .4s;
}

html {
    --kaiteki-yellow: #FFDE59;
    --kaiteki-blue: #00396D;
    --kaiteki-orange: #F8C15C;
    --kaiteki-lavender: #8FA9EC;
    --kaiteki-emerald: #5DC390;
    --kaiteki-violet: #E36CC6;
    --kaiteki-cyan: #BAE8ED;
    --kaiteki-grass: #B5E3B5;
    --kaiteki-pink: #E88C8D;
    --kaiteki-black: #3C3535;
    --line-green: #06C755;
    --instagram-pink: #E54771;
    --before-after-anime-duration: 12s;
    font-family: "Noto Sans JP";
    color: #fff;
    scroll-behavior: smooth;
    scroll-padding-top: 66px;
    background-color: var(--kaiteki-blue);

    &:has(.open),
    &:has([open]) {
        overflow: clip;
    }
}

li {
    list-style-type: none;
    list-style-position: inside;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

address {
    font-style: normal;
}

.from-tb,
.from-pc {
    display: none;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.house-symbol {
    font-size: 16px;
    color: var(--kaiteki-blue);
    letter-spacing: 0.12em;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 235px;
    height: 80px;
    margin: auto;
    background-color: var(--kaiteki-yellow);
    clip-path: polygon(0 24px, 50% 0, 100% 24px, 100% 100%, 0 100%);

    >span {
        &:nth-of-type(1) {
            position: absolute;
            top: 3px;
            left: 3px;
            width: calc(100% - 6px);
            height: calc(100% - 6px);
            clip-path: inherit;
            background-color: #fff;

            span {
                position: absolute;
                top: 3px;
                left: 3px;
                width: calc(100% - 6px);
                height: calc(100% - 6px);
                clip-path: inherit;
                background-color: var(--kaiteki-blue);

                span {
                    background-color: #fff;
                    top: 3px;
                    left: 3px;
                    width: calc(100% - 6px);
                    height: calc(100% - 6px);
                }
            }
        }

        &:nth-of-type(2) {
            position: relative;
            line-height: 1.4em;

            span {
                font-size: 24px;
                font-weight: 900;
                color: var(--kaiteki-yellow);
                -webkit-text-stroke: 6px var(--kaiteki-blue);
                paint-order: stroke;
                display: block;
            }
        }

        &.img-container {
            position: absolute;
            right: 10px;
            bottom: 2px;
            display: block;
            aspect-ratio: 1;
            width: 48px;
        }
    }

    &.only-one {
        width: 317px;
        justify-content: flex-start;
        align-items: flex-end;
        padding-left: 60px;
        padding-bottom: 25px;

        span {
            &:nth-of-type(2) {
                span {
                    -webkit-text-stroke-width: 8px;
                    font-size: 28px;
                    letter-spacing: 0.12em;
                }
            }

            &.img-container {
                right: 43px;
                width: 60px;
                height: 60px;
            }
        }
    }
}

.caption {
    font-size: 0;
}

.logo {
    position: relative;
    display: block;
    margin: 0 auto 6%;

    span {
        position: absolute;
        height: calc(100% / 11 * 3);
        width: calc(100% / 11 * 3);
        background-color: #fff;

        &::before,
        &::after {
            content: "";
            position: absolute;
            display: block;
        }

        &:nth-of-type(1) {
            top: 0;
            right: 0;

            &::before,
            &::after {
                top: 0;
                right: 0;
                background-color: #fff;
            }

            &::before {
                width: calc(100% / 3 * 7);
                height: 100%;
            }

            &::after {
                width: 100%;
                height: calc(100% / 3 * 7);
            }
        }

        &:nth-of-type(2) {
            top: calc(100% / 11 * 4);
            left: calc(100% / 11 * 4);

            &::before,
            &::after {
                background-color: var(--kaiteki-yellow);
                width: 100%;
                height: 100%;
            }

            &::before {
                top: calc(100% / 3 * -4);
                left: calc(100% / 3 * -4);
            }

            &::after {
                bottom: calc(100% / 3 * -4);
                right: calc(100% / 3 * -4);
            }
        }

        &:nth-of-type(3) {
            left: 0;
            bottom: 0;

            &::before,
            &::after {
                left: 0;
                bottom: 0;
                background-color: #fff;
            }

            &::before {
                width: calc(100% / 3 * 7);
                height: 100%;
            }

            &::after {
                width: 100%;
                height: calc(100% / 3 * 7);
            }
        }
    }
}

.carousel {
    display: flex;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    overflow-y: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::scroll-button(*) {
        background-color: transparent;
        border: none;
        cursor: pointer;
    }

    &::-webkit-scrollbar {
        display: none;
    }

    .slide {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

.type-1 {
    scroll-behavior: smooth;
    scroll-margin-bottom: -100svh;
    padding-bottom: 66px;

    ~.swiper-nav {
        position: absolute;
        top: 160px;
        z-index: 1;
        aspect-ratio: 1;
        width: 50px;
        background-color: var(--kaiteki-yellow);

        &#price-swiper-nav-next {
            right: calc(50% - 160px);
            clip-path: polygon(20% 0, 100% 50%, 20% 100%);
        }

        &#price-swiper-nav-prev {
            left: calc(50% - 160px);
            clip-path: polygon(80% 0, 0 50%, 80% 100%);
        }

        &:disabled {
            background-color: var(--kaiteki-black);
        }

        &:active:not(:disabled) {
            translate: 0 10px;
        }
    }

    ~#price-swiper-page {
        display: flex;
        justify-content: center;
        gap: 15px;
        height: 66px;
        padding-top: 11px;

        .swiper-pagination-bullet {
            content: "";
            display: block;
            aspect-ratio: 1;
            width: unset;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
            transition-duration: .4s;
            cursor: pointer;
            opacity: 1;

            &.swiper-pagination-bullet-active {
                background-color: var(--kaiteki-yellow);
            }
        }
    }

    .slide {
        width: 100%;
        padding-top: 39px;
        container-type: scroll-state;

        &.water-heater {
            --theme-color: var(--kaiteki-orange);

            dl {
                dt {
                    span {
                        .img-container {
                            rotate: 15deg;
                        }
                    }
                }
            }
        }

        &.stove {
            --theme-color: var(--kaiteki-lavender);
        }

        &.range-food {
            --theme-color: var(--kaiteki-emerald);
        }

        &.toilet {
            --theme-color: var(--kaiteki-violet);
        }

        &.sink {
            --theme-color: var(--kaiteki-cyan);
        }

        &.kitchen {
            --theme-color: var(--kaiteki-grass);
        }

        &.bath {
            --theme-color: var(--kaiteki-pink);
        }

        /* a {
            position: fixed;
            position-anchor: var(--anchor);
            top: anchor(top);
            left: anchor(left);
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 73px;

            &.lonly {
                width: 100%;
            }
        } */

        dl {
            width: 330px;
            margin: auto;
            box-shadow: 0px 4px 4px 0px #00000040;

            dt {
                font-size: 24px;
                font-weight: 700;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 45px;
                background-color: var(--theme-color);

                span {
                    font-size: 24px;
                    display: flex;
                    align-items: center;

                    .img-container {
                        aspect-ratio: 1;
                        display: inline-block;
                        width: 1em;
                    }
                }
            }

            dd {
                border: 3px solid var(--theme-color);

                &.img-container {
                    position: relative;
                    width: 100%;
                    height: 220px;
                    overflow: clip;
                    border-bottom-width: 0;
                    filter: brightness(1.1);

                    img {
                        object-fit: cover;
                    }

                    &.zoom {
                        img {
                            position: absolute;
                            top: 60%;
                            left: 70%;
                            display: block;
                            width: 150%;
                            height: 150%;
                            translate: -50% -50%;
                        }
                    }
                }

                &:not(.img-container) {
                    position: relative;
                    font-size: 20px;
                    font-weight: 700;
                    color: var(--kaiteki-black);
                    text-align: center;
                    border-top-width: 0;
                    padding-top: 37px;
                    padding-bottom: 26px;
                    background-color: #fff;

                    >span {
                        &.deco {
                            position: absolute;
                            top: 0;
                            right: 0;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 16px;
                            aspect-ratio: 1;
                            width: 80px;
                            translate: 0 -50%;
                        }

                        &:not(.deco) {
                            font-size: 32px;
                            color: var(--kaiteki-blue);
                            padding-left: 15px;

                            span {
                                font-size: 56px;

                                span {
                                    font-size: 72px;
                                }
                            }
                        }
                    }
                }
            }
        }

        @container scroll-state(snapped: x) {
            a {
                color: var(--kaiteki-yellow);
            }
        }
    }
}

#price-swiper-pagi {
    position: relative;
    display: flex;
    flex-wrap: wrap;

    &::before,
    &::after {
        content: "";
        position: absolute;
        display: block;
        width: 265px;
        height: 3px;
        background-color: var(--kaiteki-yellow);
    }

    &::before {
        top: 0;
        left: 0;
    }

    &::after {
        right: 0;
        bottom: 0;
    }

    button {
        display: block;
        width: 50%;
        height: 73px;
        display: flex;
        justify-content: center;
        align-items: center;

        &.lonly {
            width: 100%;
        }

        &.swiper-pagination-custom-active {
            color: var(--kaiteki-yellow);
        }
    }
}

.pagenavi {
    font-size: 18px;
    font-weight: 900;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 270px;
    height: 65px;
    margin: 0 auto;

    a,
    span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
    }

    a {
        color: var(--kaiteki-blue);
        border: 1px solid var(--kaiteki-blue);
    }

    span {
        background-color: var(--kaiteki-blue);
    }

    .prev,
    .next {
        position: relative;

        &::after {
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            background-color: var(--kaiteki-blue);
        }
    }

    .prev {
        &::after {
            clip-path: polygon(100% 0, 0 50%, 100% 100%);
        }
    }

    .next {
        &::after {
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
    }
}

.sleeping-dog {
    position: absolute;
    top: 0;
    right: 0;

    .img-container {
        position: absolute;
        top: 0;
        right: 0;
        width: 134px;
        height: 100px;

        img {
            object-position: right;
        }
    }

    .bubble-group {
        position: absolute;
        top: 21px;
        right: 101px;

        .bubble {
            position: absolute;
            aspect-ratio: 1;
            width: 16px;

            &:nth-of-type(1) {
                top: 4px;
                right: 30px;
            }

            &:nth-of-type(2) {
                top: 0;
                right: 12px;
            }

            &:nth-of-type(3) {
                top: 19px;
                right: 0;
            }
        }
    }

    .snore {
        position: absolute;
        top: 50px;
        right: 64px;
        width: 110px;
        rotate: 16deg;

        span {
            &:not(.caption) {
                font-size: 12px;
                font-weight: 700;

                span {
                    font-size: calc(100% + 2px)
                }
            }
        }
    }
}

#main-header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -60px;

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    &::before {
        z-index: -1;
        background-color: var(--kaiteki-blue);
        opacity: .8;
    }

    &::after {
        border: 3px solid var(--kaiteki-yellow);
        pointer-events: none;
    }

    &:has(#ham-button.open) {
        #ham-menu {
            top: 0;
        }
    }

    h1 {
        align-self: center;
        font-size: 7px;
        text-align: center;
        margin-left: 20px;

        a {
            .logo {
                aspect-ratio: 1;
                width: 30px;
            }

            >span {
                &:not(.logo) {
                    font-size: 2px;
                    color: var(--kaiteki-yellow);
                    display: block;
                }
            }
        }
    }

    .contents {
        display: contents;

        .call {
            font-size: 24px;
            font-weight: 900;
            align-self: center;

            .img-container {
                display: block;
                width: 24px;
                margin: 3px auto 0;
                aspect-ratio: 1;
                filter: brightness(25);
            }

            a,
            div {
                display: flex;
                gap: 7px;
            }
        }

        #ham-menu {
            text-align: center;
            position: fixed;
            z-index: -2;
            top: -100%;
            left: 0;
            display: flex;
            justify-content: start;
            flex-direction: column;
            gap: 5svh;
            width: 100%;
            height: 100%;
            padding-top: calc(66px + 150px + 10svh);

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
                background-color: var(--kaiteki-blue);
                opacity: .8;
            }

            .sleeping-dog {
                top: 10svh;
                transform-origin: top right;
                scale: 1.5;
            }

            a {
                font-size: 24px;
                font-weight: 900;
                letter-spacing: 0.12em;
                position: relative;
            }
        }
    }

    #ham-button {
        position: relative;
        display: block;
        width: 70px;
        height: 60px;

        >span {
            &:not(.side) {
                display: block;
                width: 30px;
                height: 2px;
                margin: auto;
                background-image: linear-gradient(to right, var(--kaiteki-yellow) 0%, var(--kaiteki-yellow) 100%, #aa8904 100%);
            }

            &:nth-of-type(1) {
                background-image: linear-gradient(to left, var(--kaiteki-yellow) 0%, var(--kaiteki-yellow) 100%, #aa8904 100%);
                transform-origin: left center;
            }

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

            &:nth-of-type(2) {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 30px;
                height: 30px;
                transform-origin: center bottom;
                translate: -50% -50%;
                clip-path: polygon(calc(50% - 15px) calc(50% - 1px), calc(50% + 15px) calc(50% - 1px), calc(50% + 15px) calc(50% + 1px), calc(50% - 15px) calc(50% + 1px));
            }

            &:nth-of-type(3) {
                transform-origin: right center;
            }

            &.side {
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 20px;
                width: 100%;
                height: 100%;

                span {
                    position: relative;
                    display: block;
                    width: 30px;
                    height: 2px;
                    margin: 0 auto;

                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        display: block;
                        aspect-ratio: 1;
                        width: 8px;
                        background-color: var(--kaiteki-yellow);
                        translate: 0 -50%;
                    }

                    &:nth-of-type(1) {
                        transform-origin: right center;
                        rotate: y -90deg;

                        &::after {
                            left: 0;
                        }
                    }

                    &:nth-of-type(2) {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 30px;
                        height: 30px;
                        transform-origin: center top;
                        translate: -50% -50%;
                        rotate: x -90deg;

                        &::after {
                            left: 50%;
                            background-color: #fff;
                            translate: -50% -50%;
                        }
                    }

                    &:nth-of-type(3) {
                        transform-origin: left center;
                        rotate: y 90deg;

                        &::after {
                            right: 0;
                        }
                    }
                }
            }
        }

        &.open {
            >span {
                &:nth-of-type(1) {
                    background-image: linear-gradient(to left, var(--kaiteki-yellow) 0%, var(--kaiteki-yellow) 0%, #aa8904 100%);
                    rotate: y -90deg;
                }

                &:nth-of-type(2) {
                    rotate: x 90deg;
                }

                &:nth-of-type(3) {
                    background-image: linear-gradient(to right, var(--kaiteki-yellow) 0%, var(--kaiteki-yellow) 0%, #aa8904 100%);
                    rotate: y -90deg;
                }

                &.side {
                    span {
                        &:nth-of-type(1) {
                            rotate: none;
                        }

                        &:nth-of-type(2) {
                            rotate: none;
                        }

                        &:nth-of-type(3) {
                            rotate: none;
                        }
                    }
                }
            }
        }
    }
}

footer {
    position: relative;
    z-index: 1;
    padding-top: 50px;
    border: 4px solid var(--kaiteki-yellow);

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--kaiteki-blue);
        opacity: .8;
    }

    >img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        object-fit: cover;
        object-position: 20%;
    }

    .row-from-pc {
        .logo-container {
            position: relative;
            font-size: 20px;
            font-weight: 700;
            width: fit-content;
            margin: 0 auto;

            .logo {
                aspect-ratio: 1;
                width: 90px;
            }

            >span {
                &:not(.logo) {
                    font-size: 8px;
                    letter-spacing: .3em;
                    color: var(--kaiteki-yellow);
                    text-align: center;
                    display: block;
                }
            }
        }

        .container {
            .pagination {
                font-size: 18px;
                font-weight: 900;
                position: relative;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 36px 72px;
                width: 287px;
                padding: 31px 0 21px;
                margin: auto;

                &::before,
                &::after {
                    content: "";
                    width: 240px;
                    height: 1px;
                    background-color: #fff;
                }

                a {
                    text-align: center;
                    width: 90px;
                }
            }

            address,
            .info {
                position: relative;
                max-width: 375px;
                margin: auto;
            }

            address {
                font-weight: 700;
                letter-spacing: .12em;
                padding-left: 63px;

                .post,
                .street {
                    span {
                        font-weight: 900;
                    }
                }

                .post {
                    display: block;
                }
            }

            .info {

                dt,
                dd {
                    display: inline-block;
                }

                dl {
                    font-weight: 700;
                    padding-left: 63px;
                    letter-spacing: .12em;
                }

                dt {
                    width: 90px;
                }

                dd {
                    font-weight: 900;
                    font-size: 20px;
                }

                .hours {
                    margin-top: 13px;
                }
            }

            .row-from-tb {
                .call {
                    font-size: 28px;
                    font-weight: 900;
                    letter-spacing: .12em;
                    position: relative;
                    margin-top: 15px;
                    margin-bottom: 15px;

                    .img-container {
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        filter: brightness(20);
                    }

                    a,
                    .from-pc {
                        justify-content: center;
                        align-items: center;
                        gap: 7px;
                    }

                    a {
                        display: flex;
                    }
                }
            }
        }
    }

    .small-container {
        text-align: center;
        position: relative;
        margin-bottom: 12px;

        small {
            font-size: 10px;
            letter-spacing: .14em;
        }
    }
}

#top-eye-catch {
    position: relative;
    width: 100%;
    height: 311px;
    padding-top: 80px;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--kaiteki-black);
        opacity: .5;
    }
    
    .bg-img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
    }

    .swiper-wrapper {
        height: 190px;

        .slide {
            position: relative;
            width: 330px;
            height: 100%;
			
			a {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
        }
    }

    .top-slide-1 {

        p,
        .moc-p,
        strong {
            font-size: 20px;
            font-weight: 700;
            text-shadow: 0px 4px 4px #00000040;
            width: fit-content;
        }

        p,
        .moc-p {
            margin: 25px auto 0;

            &::after {
                content: "";
                position: absolute;
                left: -5px;
                bottom: 0;
                display: block;
                width: calc(100% + 10px);
                height: 2px;
                background-color: #fff;
                box-shadow: 0px 4px 4px #00000040;
            }

            span {
                font-size: 14px;
                line-height: 2em;
            }
        }

        strong {
            display: block;
            margin: 36px 9px 0 auto;

            span {
                font-size: 24px;
                color: var(--kaiteki-yellow);
            }
        }

        .more-info {
            &::before {
                opacity: .8;
                background-color: var(--kaiteki-blue);
            }
        }
    }

    .top-slide-2 {
        z-index: 1;

        .bg {
            position: absolute;
            top: 0;
            right: 0;
            z-index: -1;
            display: block;
            width: 60%;
            height: calc(100% + 1px);
            background-color: var(--kaiteki-blue);
            opacity: .8;
            clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
        }

        img {
            z-index: -1;
        }

        p,
        .moc-p {
            font-size: 20px;
            font-weight: 900;
            color: var(--instagram-pink);
            text-align: start;
            margin-top: 48px;
            margin-left: 24px;
            -webkit-text-stroke: 12px #fff;
            paint-order: stroke;
        }

        strong {
            font-size: 14px;
            text-align: center;
            position: absolute;
            top: 60px;
            right: 12px;

            span {
                font-size: 20px;
                color: var(--kaiteki-yellow);
            }
        }

        .more-info {
            &::before {
                opacity: .55;
                background-color: var(--instagram-pink);
            }
        }
    }

    .top-slide-3 {

        &.thumb,
        .slide-prime {
            justify-content: start;
            align-items: flex-end;
            gap: 30px;
            padding-left: 21px;
            padding-bottom: 19px;
            background-color: var(--kaiteki-blue);
        }

        .slide-prime {
            display: flex;
            width: 100%;
            height: 100%;
        }

        .img-container {
            &.tik-tok {
                width: 48px;
                height: 48px;
            }

            &.dog {
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;

                img {
                    object-position: right;
                }
            }

            img {
                position: static;
                inset: unset;
                object-fit: contain;
            }
        }

        span {
            &.voice {
                font-weight: 700;
                position: absolute;
                top: 13px;
                left: 27px;
                display: inline-block;
                transform-origin: top left;
                rotate: 3.91deg;

                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    display: block;
                    width: 180px;
                    height: 1px;
                    background-color: #fff;
                }

                &::before {
                    top: -10px;
                    right: -10px;
                    rotate: 7deg;
                }

                &::after {
                    right: -10px;
                    bottom: -20px;
                    rotate: -7deg;
                }

                span {
                    font-size: 20px;
                    color: var(--kaiteki-yellow);
                }
            }

            &.click-here {
                text-align: center;
                font-size: 21px;
                font-weight: 700;

                span {
                    font-size: 16px;
                    color: var(--kaiteki-yellow);
                    display: block;
                }
            }
        }
    }

    img {
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
    }

    p,
    .moc-p,
    strong {
        position: relative;
        letter-spacing: .12em;
    }

    .more-info {
        text-align: center;
        letter-spacing: .12em;
        position: absolute;
        right: -1px;
        bottom: 0;
        z-index: 0;
        display: block;
        width: 192px;

        &::before {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            z-index: -1;
            display: block;
            width: 100%;
            height: 100%;
            clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
        }

        &::after {
            content: "";
            display: inline-block;
            width: .6em;
            height: 1em;
            padding-left: 10px;
            background-color: #fff;
            clip-path: polygon(25% 20%, 100% 60%, 25% 100%);
        }
    }
}

#sticky-sns {
    position: sticky;
    top: 60px;
    left: 0;
    z-index: 9;
    margin-bottom: 160px;

    .sns-container {
        position: absolute;
        top: 6px;
        left: 6px;

        .tik-tok,
        .instagram {
            display: block;
            aspect-ratio: 1;
            width: 40px;
        }

        .instagram {
            img {
                border-radius: 50%;
            }
        }
    }
}

#charm {
    position: relative;
    padding-top: 34px;
    padding-bottom: 40px;
    margin-top: -160px;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: .74;
    }
	
	.bg-img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		
		img {
			object-fit: cover;
		}
	}

    .container {
        position: relative;
        width: auto;
        padding-top: 128px;
        margin: 0 29px;
        border: 1px solid var(--kaiteki-yellow);

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #00396D;
            opacity: .56;
        }

        h2 {
            text-align: center;
            letter-spacing: 0.12em;
            position: relative;

            span {
                &:nth-of-type(1) {
                    color: var(--kaiteki-yellow);
                }

                &:nth-of-type(3) {
                    font-size: 36px;
                }
            }
        }

        ol {
            counter-reset: number 0;
            position: relative;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 650px;
            margin: auto;

            li {
                counter-increment: number 1;
                width: 264px;
                margin: 50px 25px 0;

                &:nth-of-type(4) {
                    img {
                        object-position: left;
                    }
                }

                .img-container {
                    position: relative;
                    aspect-ratio: 1;
                    width: 170px;
                    margin: auto;

                    &::before {
                        content: counter(number);
                        font-size: 30px;
                        font-weight: 900;
                        color: var(--kaiteki-blue);
                        position: absolute;
                        top: -5px;
                        left: -5px;
                        display: block;
                        width: 50px;
                        height: 50px;
                        padding-left: 15px;
                        background-color: #fff;
                        border-radius: 50%;
                        box-shadow: 0px 4px 4px #00000040;
                        animation-name: noticeLikeAnim;
                        animation-timeline: view();
                    }

                    img {
                        object-fit: cover;
                        border-radius: 50%;
                        box-shadow: 0px 4px 4px #00000040;
                    }
                }

                dt,
                dd {
                    text-shadow: 0px 4px 4px #00000040;
                }

                dt {
                    font-weight: 700;
                    text-align: center;
                    margin-top: 20px;

                    span {
                        font-size: 20px;
                        font-weight: 900;
                        color: var(--kaiteki-yellow);
                    }
                }

                dd {
                    width: 264px;
                    margin: 10px auto 43px;
                }
            }
        }
    }
}

#price {
    position: relative;
    padding-top: 40px;

    .type-1 {
        .slide {
            dl {
                dd {
                    &:not(.img-container) {
                        span {
                            &.deco {
                                color: #fff;
                                background-color: var(--theme-color);
                                border-radius: 50%;

                            }
                        }
                    }
                }
            }
        }
    }

    >.img-container {
        position: relative;
        margin: 175px 0 0 auto;
        width: 185px;
        height: 246px;

        p {
            font-weight: 700;
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            transform-origin: right;
            translate: -75%;
            rotate: 22deg;

            &::before,
            &::after {
                content: "";
                position: absolute;
                display: block;
                height: 2px;
                background-color: #fff;
            }

            &::before {
                width: 200px;
                transform-origin: right center;
                rotate: 10deg;
                translate: 10px 0;
            }

            &::after {
                bottom: -15px;
                width: 195px;
                transform-origin: right center;
                rotate: -10deg;
                translate: 20px;
            }

            span {
                font-size: 20px;
                color: var(--kaiteki-yellow);
            }
        }
    }
}

#example {
    position: relative;
    z-index: 1;
    padding-top: 40px;
    padding-bottom: 50px;
    background-color: #fff;
    overflow: clip;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding-top: 34px;
        padding-bottom: 40px;
        opacity: .5;
    }

    .bg-img {
        position: absolute;
        top: -10%;
        left: -10%;
        aspect-ratio: 1;
        height: 120%;
        z-index: -1;
    }

    .house-symbol {
        z-index: 1;

        span {
            &:nth-of-type(1) {
                background-color: var(--kaiteki-blue);

                span {
                    background-color: #fff;

                    span {
                        background-color: var(--kaiteki-blue);
                    }
                }
            }

            &:nth-of-type(2) {
                color: #fff;
            }

            &.img-container {
                right: 30px;
                bottom: 10px;
                width: 35px;

                img {
                    filter: brightness(30);
                }
            }
        }
    }

    .container {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: -49px;
            left: 2%;
            display: block;
            width: 96%;
            height: calc(100% + 49px);
            background-color: #fff;
            opacity: .6;
        }

        .type-1 {
            overflow: visible;
            flex-wrap: wrap;
            justify-content: center;

            &::scroll-button(*) {
                content: none;
            }

            .slide {
                &::scroll-marker {
                    content: none;
                }
            }

            .slide {
				position: relative;
				padding: 0;
				margin-top: 39px;
				
                &::scroll-marker {
                    border: 1px solid var(--kaiteki-blue);
                }

                a {
                    position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
                }

                dl {
                    dt {
                        font-size: 24px;
                        position: relative;

                        span {
                            font-size: 18px;

                            span {
                                font-size: 24px;
                            }
                        }
                    }

                    dd {
                        border: none;

                        &.img-container {
                            padding: 18px 15px 0;
                            background-color: #fff;
                        }

                        &:not(.img-container) {
                            span {
                                &.deco {
                                    color: var(--kaiteki-yellow);
                                    background-color: var(--kaiteki-blue);
                                    rotate: -11deg;
                                    clip-path: path("M 52.8 0.4 l -24.7215 -0.0002 l -20 14.5309 l -7.6394 23.5116 l 7.6393 23.5114 l 20.0002 14.5308 l 24.7215 0.0002 l 20 -14.5309 l 7.6394 -23.5116 l -7.6393 -23.5114 z");
                                }
                            }
                        }
                    }
                }

                @container scroll-state(snapped: x) {
                    a {
                        color: var(--kaiteki-yellow);
                        -webkit-text-stroke: 1px var(--kaiteki-blue);
                        paint-order: stroke;
                    }
                }
            }
        }

        .link-container {
            position: relative;
            text-align: center;
            padding-top: 40px;
            padding-bottom: 38px;

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 240px;
                height: 60px;
                margin: auto;
                background-color: var(--kaiteki-blue);
                border-radius: 40px;
                border: 2px solid #fff;

                &::after {
                    content: "";
                    display: inline-block;
                    width: 1em;
                    height: 1em;
                    margin-left: 1em;
                    background-color: #fff;
                    clip-path: polygon(20% 0, 100% 50%, 20% 100%);
                }
            }
        }
    }
}

#before-after {
    .house-symbol {
        display: none;
    }

    .collision {
        position: relative;
        width: 100%;
        height: 368px;
        background-color: #fff;

        .before,
        .after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            animation-name: opaAnim;
            animation-duration: var(--before-after-anime-duration);
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-fill-mode: both;
            overflow: clip;

            p {
                font-weight: 900;
                position: absolute;
                bottom: 0;
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 145px;
                height: 35px;
                /* animation-name: beforeAfterMoveAnime; */
                animation-name: none;
                animation-duration: var(--before-after-anime-duration);
                animation-delay: calc(var(--before-after-anime-duration) / 4 * 3 * -1);
                animation-timing-function: linear;
                animation-iteration-count: infinite;
            }

            img {
                animation-name: scaleAnim;
                animation-duration: var(--before-after-anime-duration);
                animation-delay: calc(var(--before-after-anime-duration) / 4 * 3 * -1);
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                animation-fill-mode: both;
                object-fit: cover;
            }
        }

        .before {
            p {
                color: var(--kaiteki-blue);
                left: 0;
                background-color: #fff;
                border: 2px solid var(--kaiteki-blue);
            }
        }

        .after {
            animation-delay: calc(var(--before-after-anime-duration) / 2 * -1);

            p {
                color: #fff;
                right: 0;
                background-color: var(--kaiteki-blue);
                border: 2px solid var(--kaiteki-yellow);
            }

            img {
                animation-delay: calc(var(--before-after-anime-duration) / 2 * -1);
                animation-direction: reverse;
            }
        }
    }

    .row-from-pc {
        >div {
            &:not(.img-container) {
                >p {
                    font-size: 20px;
                    font-weight: 900;
                    letter-spacing: 0.12em;
                    text-align: center;
                    width: 350px;
                    margin: 40px auto 0;
                    border: 3px solid #fff;

                    span {
                        &.yellow {
                            font-size: 24px;
                            color: var(--kaiteki-yellow);
                        }
                    }
                }

                .cost {
                    font-weight: 700;
                    background-color: #fff;
                    width: 350px;
                    padding: 7px 11px 10px;
                    margin: auto;

                    p {
                        color: var(--kaiteki-blue);
                        text-align: center;
                        padding: 23px 0;
                        border: 3px solid var(--kaiteki-blue);

                        span {
                            &:not(.line) {
                                font-size: 20px;
                            }

                            &.line {
                                display: block;
                                width: 230px;
                                height: 2px;
                                margin: 12px auto 6px;
                                background-color: var(--kaiteki-blue);
                            }
                        }
                    }
                }
            }

            &.img-container {
                position: relative;
                width: 106px;
                height: 132px;
                margin-top: 90px;

                p {
                    font-weight: 700;
                    position: absolute;
                    top: 10px;
                    left: 0;
                    width: 180px;
                    transform-origin: left center;
                    translate: 75%;
                    rotate: -24.22deg;

                    &::before,
                    &::after {
                        content: "";
                        position: absolute;
                        left: -15px;
                        display: block;
                        width: 100%;
                        height: 2px;
                        background-color: #fff;
                    }

                    &::before {
                        top: -5px;
                        transform-origin: left center;
                        rotate: -7deg;
                    }

                    &::after {
                        bottom: -5px;
                        transform-origin: left center;
                        rotate: 7deg;
                    }

                    span {
                        font-size: 20px;
                        color: var(--kaiteki-yellow);
                    }
                }
            }
        }
    }
}

#flow {
    padding-top: 44px;
    padding-bottom: 43px;
    border: 4px solid var(--kaiteki-yellow);
    border-bottom: none;

    .column-from-tb {
        &:nth-of-type(1) {
            .house-symbol {
                >span {
                    &:nth-of-type(1) {
                        background-color: var(--kaiteki-blue);

                        span {
                            background-color: #fff;

                            span {
                                background-color: var(--kaiteki-blue);
                            }
                        }
                    }

                    &:nth-of-type(2) {
                        padding-top: 16px;
                        padding-right: 16px;
                        color: #fff;

                        span {
                            display: inline;
                        }
                    }

                    &.img-container {
                        bottom: 10px;
                        right: 20px;
                        width: 30px;
                    }
                }
            }

            >.img-container {
                position: relative;
                width: 112px;
                height: 108px;
                margin-top: 115px;
                margin-left: auto;
                margin-bottom: 40px;

                p {
                    font-weight: 700;
                    position: absolute;
                    top: -20px;
                    right: calc(100% - 32px);
                    width: 278px;
                    rotate: 14.28deg;

                    &::before,
                    &::after {
                        content: "";
                        position: absolute;
                        display: block;
                        width: 250px;
                        height: 2px;
                        background-color: #fff;
                    }

                    &::before {
                        top: -10px;
                        transform-origin: right center;
                        rotate: 7deg;
                    }

                    &::after {
                        bottom: -10px;
                        transform-origin: right center;
                        rotate: -7deg;
                    }

                    span {
                        font-size: 20px;
                        color: var(--kaiteki-yellow);
                    }
                }

                img {
                    object-fit: cover;
                    object-position: bottom;
                }
            }
        }

        &:nth-last-of-type(1) {
            ol {
                padding-top: 17px;
                text-align: center;
                counter-reset: count 0;

                li {
                    counter-increment: count 1;
                    padding: 26px 0;

                    &::before {
                        content: "0" counter(count);
                        font-size: 32px;
                        color: var(--kaiteki-yellow);
                    }

                    dl {
                        font-weight: 700;
                        width: 300px;
                        margin: auto;
                        padding-top: 21px;

                        dt {
                            font-size: 20px;
                            padding-bottom: 12px;
                        }

                        dd {
                            text-align: start;

                            button {
                                font-size: 18px;
                                font-weight: 900;
                                color: var(--kaiteki-yellow);
                                letter-spacing: 0.03em;
                                position: relative;
                                display: block;
                                width: fit-content;
                                margin: auto;

                                &::before {
                                    content: "";
                                    position: absolute;
                                    left: -5px;
                                    bottom: -5px;
                                    display: block;
                                    width: calc(100% + 10px);
                                    height: 2px;
                                    background-color: var(--kaiteki-yellow);
                                }

                                &::after {
                                    content: "";
                                    display: inline-block;
                                    width: 1em;
                                    height: .8em;
                                    margin-left: .5em;
                                    background-color: var(--kaiteki-yellow);
                                    clip-path: polygon(0 0, 100% 50%, 0 100%);
                                }
                            }
                        }
                    }
                }
            }

            .img-container {
                height: 375px;
                clip-path: polygon(100% 100%, 40% 100%, 10% 50%, 45% 0, 100% 0);

                img {
                    object-fit: cover;
                    object-position: 35%;
                }
            }
        }
    }

    >.img-container {
        height: 375px;
        margin-top: 4px;
        clip-path: polygon(0 0, 60% 0, 90% 50%, 55% 100%, 0 100%);

        img {
            object-fit: cover;
            object-position: 75%;
        }
    }

    dialog {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 15;
        display: flex;
        max-width: unset;
        max-height: unset;
        width: 100%;
        height: 100svh;
        background-color: transparent;
        border: none;

        &:not([open]) {
            opacity: 0;
            visibility: hidden;

            .swiper-nav {
                opacity: 0;
            }
        }

        &::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            display: block;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: var(--kaiteki-blue);
            opacity: .8;
        }

        .swiper-nav {
            position: absolute;
            top: 500px;
            z-index: 16;
            aspect-ratio: 1;
            width: 50px;
            background-color: var(--kaiteki-yellow);
            transition-duration: .4s;

            &:active:not(:disabled),
            &:active:not(:disabled) {
                translate: 0 10px;
            }

            &:disabled,
            &:disabled {
                background-color: var(--kaiteki-black);
            }
        }

        #flow-swiper-nav-next {
            right: calc(50% - 100px);
            clip-path: polygon(20% 0, 100% 50%, 20% 100%);
        }

        #flow-swiper-nav-prev {
            left: calc(50% - 100px);
            clip-path: polygon(80% 0, 0 50%, 80% 100%);
        }

        .slide {
            width: 100%;
            height: 100%;

            .thumb {
                position: relative;
                width: stretch;
                height: 325px;
                margin: 10px;

                img {
                    object-fit: cover;
                }

                h3 {
                    letter-spacing: .03em;
                    color: #fff;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    padding: 5px 1em;
                    background-color: var(--kaiteki-blue);
                    border: 1px solid #fff;
                }
            }
        }

        .close-btn {
            position: fixed;
            right: 19px;
            top: 525px;
            z-index: 2;
            width: 50px;
            height: 50px;

            &::before,
            &::after {
                content: "";
                position: absolute;
                top: 0;
                display: block;
                width: 2px;
                height: 70px;
                background-color: var(--kaiteki-yellow);
            }

            &::before {
                left: 0;
                transform-origin: top left;
                rotate: -45deg;
            }

            &::after {
                right: 0;
                transform-origin: top right;
                rotate: 45deg;
            }
        }
    }
}

.tag-button-group-blog {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 35px;
    width: auto;
    max-width: 670px;
    margin: 40px auto;

    button {
        width: 150px;
        height: 40px;
        padding: 2px 4px;
        background-color: #fff;

        span {
            font-size: 18px;
            font-weight: 900;
            color: var(--kaiteki-blue);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            border: 1px solid var(--kaiteki-blue);
        }
    }
}

#tag-date-container {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 1;

    #tag-container,
    #date-container {
        width: 355px;
        padding-bottom: 42px;
        margin: 40px 10px 0;
        border: 2px solid #fff;
        background-color: var(--kaiteki-blue);

        h3 {
            font-size: 20px;
            font-weight: 700;
            color: var(--kaiteki-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60px;
            margin-bottom: 20px;
            background-color: #fff;
        }

        form {
            font-size: 18px;
            font-weight: 700;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;

            button {
                width: 235px;
                border-bottom: 1px solid #fff;
            }

            .accordion {
                height: 1.5em;
                overflow: clip;

                &:has(button.open) {
                    .plus {
                        &::before {
                            height: 0;
                        }
                    }
                }

                button:not(.accordion-button) {
                    padding: 10px 0;
                    border-color: none;

                    &:last-child {
                        border-color: #fff;
                    }
                }

                .plus {
                    position: relative;
                    display: inline-block;
                    width: .8em;
                    height: .1em;
                    margin: .45em 0 .45em 1em;
                    background-color: #fff;

                    &::before {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        display: inline-block;
                        width: .1em;
                        height: .8em;
                        background-color: #fff;
                        translate: -50% -50%;
                    }
                }
            }
        }
    }
}

#blog-archive {
    .row-from-pc {
        #blogs {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 40px;
            background-color: #fff;
            padding: 40px 12px 60px;

            article {
                position: relative;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 20px;
                width: 350px;
                height: 470px;
                padding: 21px 25px;
                background-color: var(--kaiteki-blue);

                &::after {
                    content: "";
                    position: absolute;
                    top: 10px;
                    left: 9px;
                    display: block;
                    width: calc(100% - 18px);
                    height: calc(100% - 20px);
                    border: 2px solid #fff;
                    pointer-events: none;
                }

                a {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }

                .thumb {
                    width: 300px;
                    height: 190px;

                    img {
                        object-fit: cover;
                    }
                }

                .texts {
                    width: 300px;

                    .blog-meta {
                        display: flex;
                        align-items: center;
                        gap: 27px;
                        padding-left: 9px;
                        margin-bottom: 20px;

                        time {
                            font-size: 18px;
                            font-weight: 900;
                        }

                        .tag-button-group-blog {
                            margin: 0;

                            button {
                                z-index: 1;
                            }
                        }
                    }

                    h3 {
                        font-size: 18px;
                        margin-bottom: 19px;
                    }

                    p {
                        padding: 0 7px;
                        opacity: .8;
                    }

                    .link-container {
                        font-size: 18px;
                        font-weight: 700;
                        text-align: right;

                        span {
                            position: relative;
                            text-box-trim: trim-both;

                            &::after {
                                content: "";
                                display: inline-block;
                                width: 0.85em;
                                height: 0.85em;
                                margin-left: 0.5em;
                                background-color: #fff;
                                clip-path: polygon(0 0, 100% 50%, 0% 100%);
                            }
                        }
                    }
                }
            }
        }
    }

    .dog {
        padding-top: 165px;

        .img-container {
            position: relative;
            width: 158px;
            height: 153px;
            margin-left: auto;

            p {
                font-size: 20px;
                font-weight: 700;
                position: absolute;
                right: 60%;
                bottom: 100%;
                width: 240px;
                transform-origin: bottom right;
                rotate: 14.13deg;

                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    display: block;
                    height: 2px;
                    background-color: #fff;
                }

                &::before {
                    top: -15px;
                    right: -10px;
                    width: 273px;
                    rotate: 3.31deg;
                }

                &::after {
                    bottom: -15px;
                    right: -10px;
                    width: 269px;
                    rotate: -0.73deg
                }

                span {
                    font-size: 24px;
                    color: var(--kaiteki-yellow);
                }
            }

            img {
                object-fit: cover;
            }
        }
    }
}

#construction-example {
    .house-symbol {
        padding-left: 88px;

        span {
            &.img-container {
                right: 70px;
                bottom: 15px;
                width: 36px;
                height: 39px;
            }
        }
    }

    #tag-button-group-cons {
        padding-top: 20px;
        padding-bottom: 31px;
        margin-top: 42px;
        background-color: #fff;
        border: 3px solid var(--kaiteki-yellow);

        h3 {
            color: var(--kaiteki-blue);
            display: flex;
            width: 300px;
            height: 61px;
            padding-left: 58px;
            margin: 0 auto 20px;
            border-bottom: 1px solid var(--kaiteki-blue);

            span {
                &.img-container {
                    display: inline-block;
                    width: 50px;
                    height: 50px;
                    margin-right: 11px;
                }

                &:not(.img-container) {
                    align-self: center;
                    letter-spacing: .12em;
                }
            }
        }

        form {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px 35px;

            button {
                width: 150px;
                height: 40px;
                padding: 2px 4px;
                background-color: var(--kaiteki-blue);

                span {
                    font-size: 18px;
                    font-weight: 900;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    border: 1px solid #fff;
                }
            }
        }
    }

    #constructions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 40px;
        padding-top: 40px;

        article {
            position: relative;
            --theme-color: var(--kaiteki-black);
            color: var(--kaiteki-black);
            width: 330px;
            padding-bottom: 42px;
            background-color: #fff;
            border: 3px solid var(--theme-color);


            &.water-heater {
                --theme-color: var(--kaiteki-orange);
            }

            &.stove {
                --theme-color: var(--kaiteki-lavender);
            }

            &.range-food {
                --theme-color: var(--kaiteki-emerald);
            }

            &.toilet {
                --theme-color: var(--kaiteki-violet);
            }

            &.sink {
                --theme-color: var(--kaiteki-cyan);
            }

            &.kitchen {
                --theme-color: var(--kaiteki-grass);
            }

            &.bath {
                --theme-color: var(--kaiteki-pink);
            }

            a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .thumb {
                width: 100%;
                height: 230px;
                overflow: clip;

                &.zoom {
                    position: relative;

                    img {
                        position: absolute;
                        top: 60%;
                        left: 70%;
                        display: block;
                        width: 150%;
                        height: 150%;
                        translate: -50% -50%;
                    }
                }

                img {
                    object-fit: cover;
                }
            }

            .texts {
                position: relative;

                h3 {
                    font-size: 18px;
                    color: #fff;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 190px;
                    padding: 5px 0px 5px 25px;
                    background-color: var(--kaiteki-black);
                    translate: 0 -50%;
                }

                form {
                    min-height: 87px;
                    button {
                        position: relative;
                        z-index: 1;
                        color: #fff;
                        padding: 6px 4px;
                        margin: 32px 0 20px 10px;
                        background-color: var(--kaiteki-black);
                    }
                }

                div {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 140px;

                    p {
                        font-size: 18px;
                        margin: 0 auto;

                        &:nth-of-type(1) {
                            width: 286px;
                        }

                        &.price {
                            font-weight: 900;
                            width: fit-content;

                            span {
                                font-size: 28px;
                                padding-right: 6px;
                                padding-left: 6px;
                            }
                        }
                    }
                }
            }
        }
    }

    .pagenavi {
        margin-top: 40px;
        margin-bottom: 60px;

        .prev,
        .next {
            &::after {
                background-color: #fff;
            }
        }

        a {
            color: #fff;
            border-color: #fff;
        }

        span {
            color: var(--kaiteki-blue);
            background-color: #fff;
        }
    }
}

#about-corpo {
    margin-top: -160px;

    .border-container {
        padding: 160px 10px 35px;
        border: 3px solid var(--kaiteki-yellow);

        .house-symbol {
            padding-left: 80px;
            margin-bottom: 40px;
        }

        .container {
            .name {
                position: absolute;
                right: 20px;
                bottom: 15px;

                span {
                    font-weight: 700;
                }
            }

            #president-greeting {
                color: var(--kaiteki-black);
                letter-spacing: .12em;
                position: relative;
                padding: 120px 35px 15px;

                h3 {
                    font-size: 24px;
                    color: var(--kaiteki-yellow);
                    -webkit-text-stroke: var(--kaiteki-blue) 4px;
                    paint-order: stroke;
                    text-align: center;
                    position: relative;
                    z-index: 1;
                    margin-bottom: 45px;
                }

                >span {
                    &:not(.name) {
                        text-align: center;
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        margin: auto;
                        background-color: var(--kaiteki-yellow);
                        clip-path: polygon(0 10%, 50% 0, 100% 10%, 100% 100%, 0 100%);

                        span {
                            position: absolute;
                            top: 5px;
                            left: 5px;
                            width: calc(100% - 10px);
                            height: calc(100% - 10px);
                            clip-path: inherit;
                            background-color: #fff;

                            span {
                                position: absolute;
                                top: 5px;
                                left: 5px;
                                width: calc(100% - 10px);
                                height: calc(100% - 10px);
                                clip-path: inherit;
                                background-color: var(--kaiteki-blue);

                                span {
                                    background-color: #fff;
                                    top: 5px;
                                    left: 5px;
                                    width: calc(100% - 10px);
                                    height: calc(100% - 10px);
                                }
                            }
                        }
                    }

                }

                strong {
                    font-weight: 900;
                    letter-spacing: .12em;
                    position: relative;
                    display: block;
                    width: fit-content;
                    margin: 0 auto 13px;
                }

                p {
                    position: relative;
                    margin-bottom: 3em;
                }

                .img-container {
                    position: relative;
                    width: 100%;
                    height: 320px;

                    img {
                        object-fit: cover;
                        object-position: bottom left;
                    }
                }
            }
        }
    }

    #corpo-info {
        color: var(--kaiteki-black);
        letter-spacing: .12em;
        position: relative;
        z-index: 1;
        padding: 40px 0;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            background-color: var(--kaiteki-blue);
            opacity: .8;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            object-fit: cover;
        }

        dl {
            position: relative;
            width: 320px;
            padding: 9px 20px;
            margin: auto;
            background-color: #fff;

            &:nth-of-type(odd) {
                background-color: #E5EAF0;
            }

            dt {
                font-weight: 700;
            }

            dd {
                padding-left: 1em;

                &.full-width {
                    padding-left: .5em;
                }

                span {
                    display: block;
                }
            }
        }
    }
}

#blog {
    padding-bottom: 40px;

    .house-symbol {
        padding-left: 82px;

        span {
            &.img-container {
                width: 50px;
            }
        }
    }

    .row-from-pc {
        #single-texts {
            article {
                color: var(--kaiteki-black);
                padding-top: 43px;
                padding-bottom: 80px;
                background-color: #fff;

                .blog-meta {
                    display: flex;
                    align-items: center;
                    gap: 27px;
                    margin-bottom: 20px;

                    >span {
                        padding-left: 9px;

                        time {
                            font-size: 18px;
                            padding-right: .5em;
                        }
                    }

                    .tag-button-group-blog {
                        margin: 0;

                        button {
                            background-color: var(--kaiteki-blue);

                            span {
                                color: #fff;
                                border: 1px solid #fff;
                            }
                        }
                    }
                }

                h3 {
                    position: relative;
                    font-weight: 700;
                    width: fit-content;
                    padding: 0 2em 5px;
                    margin: 0 auto 20px;

                    &::before {
                        content: "";
                        position: absolute;
                        left: 50%;
                        bottom: 0;
                        display: block;
                        width: 100vw;
                        height: .5px;
                        background-color: var(--kaiteki-black);
                        translate: -50%;
                    }
                }

                .thumb {
                    width: 350px;
                    height: 220px;
                    margin: 0 auto 40px;

                    img {
                        object-fit: cover;
                    }
                }

                .texts {
                    margin: 0 20px;
                }
            }

            .navigation {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 30px;
                padding: 40px 0;

                a {
                    font-size: 18px;
                    font-weight: 900;
                    border: 3px solid #fff;
                    border-radius: 40px;

                    &.prev-link {
                        position: relative;
                        padding: 15px;

                        &::before {
                            content: "";
                            display: inline-block;
                            width: 15px;
                            height: 15px;
                            margin-right: 15px;
                            background-color: #fff;
                            clip-path: polygon(0 50%, 80% 0, 80% 100%);
                        }
                    }

                    &.next-link {
                        position: relative;
                        padding: 15px;

                        &::after {
                            content: "";
                            display: inline-block;
                            width: 15px;
                            height: 15px;
                            margin-left: 15px;
                            background-color: #fff;
                            clip-path: polygon(100% 50%, 20% 0, 20% 100%);
                        }
                    }

                    &:not(.prev-link):not(.next-link) {
                        font-size: 20px;
                        padding: 15px 46px;
                    }
                }
            }
        }
    }
}

#construction {
    padding-bottom: 40px;

    .house-symbol {
        span {
            &.img-container {
                right: 70px;
                bottom: 7px;
            }
        }
    }

    #construction-prime {
        h3 {
            font-size: 20px;
            font-weight: 900;
            letter-spacing: .12em;
            color: var(--kaiteki-black);
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            width: fit-content;
            max-width: 80%;
            padding: 5px;
            margin: 40px auto;
            background-color: #fff;

            >span {
                width: fit-content;
                padding: 5px 5px 10px;
                border: 3px solid var(--kaiteki-blue);

                span {
                    display: block;
                }
            }
        }

        .row-from-pc {
            .thumb {
                position: relative;
                width: 200px;
                height: 200px;
                margin: 0 auto 40px;

                p {
                    font-size: 18px;
                    font-weight: 900;
                    letter-spacing: .12em;
                    color: var(--kaiteki-blue);
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 112px;
                    height: 35px;
                    background-color: #fff;
                    border: 2px solid var(--kaiteki-blue);
                }

                img {
                    object-fit: cover;
                }
            }

            .measure-nav {
                position: relative;

                #construction-swiper {
                    .swiper-wrapper {
                        position: relative;
                        margin-block: 0;
                        padding-inline: 0;
                        height: 231px;

                        .slide {
                            position: relative;
                            width: 100%;
                            height: 100%;

                            .img-container {
                                width: 100%;
                                height: 100%;

                                img {
                                    object-fit: cover;
                                }
                            }

                            p {
                                font-size: 18px;
                                font-weight: 900;
                                letter-spacing: .12em;
                                color: #fff;
                                position: absolute;
                                right: 0;
                                bottom: 0;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 112px;
                                height: 35px;
                                background-color: var(--kaiteki-blue);
                                border: 2px solid var(--kaiteki-yellow);
                            }
                        }
                    }

                    #construction-swiper-pagi {
                        position: static;
                        display: flex;
                        justify-content: center;
                        gap: 12px;
                        height: 64px;
                        padding-top: 14px;

                        .swiper-pagination-bullet {
                            width: 10px;
                            height: 10px;
                            margin: 0;
                            opacity: 1;
                            background-color: transparent;

                            &::before {
                                content: "";
                                display: block;
                                width: 100%;
                                height: 100%;
                                background-color: #fff;
                                border-radius: 50%;
                                transition-duration: .4s;
                            }

                            &.swiper-pagination-bullet-active {
                                &::before {
                                    background-color: #EEFF00;
                                }
                            }
                        }
                    }
                }

                .swiper-nav {
                    position: absolute;
                    top: calc(50% - 50px);
                    z-index: 1;
                    width: 50px;
                    height: 50px;
                    padding-block: 0;
                    padding-inline: 0;
                    background-color: var(--kaiteki-blue);
                    border: 2px solid var(--kaiteki-yellow);

                    &:active:not(:disabled),
                    &:active:not(:disabled) {
                        span {
                            translate: 0 10px;
                        }
                    }

                    &:disabled,
                    &:disabled {
                        span {
                            filter: invert(.7);
                        }
                    }

                    span {
                        display: block;
                        width: 100%;
                        height: 100%;
                        background-color: #fff;
                    }
                }

                #construction-swiper-nav-next {
                    right: 0;

                    span {
                        clip-path: polygon(70% 50%, 35% 30%, 35% 70%);
                    }
                }

                #construction-swiper-nav-prev {
                    left: 0;

                    span {
                        clip-path: polygon(30% 50%, 65% 30%, 65% 70%);
                    }
                }
            }
        }
    }

    #construction-info {
        width: 330px;
        margin: 0 auto 40px;

        li {

            &:not(:last-of-type) {
                border-bottom: .5px solid var(--kaiteki-black);
            }

            dl {
                color: var(--kaiteki-black);

                dt {
                    font-size: 20px;
                    font-weight: 900;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 44px;
                    background-color: #E5EAF0;
                    border-bottom: .5px solid var(--kaiteki-black);
                }

                dd {
                    font-size: 18px;
                    padding: 20px 22px;
                    background-color: #fff;

                    span {
                        display: inline-block;
                    }
                }
            }
        }
    }

    .navigation {
        flex-direction: row;
        justify-content: center;
        gap: 60px;

        .contents {
            display: flex;
            justify-content: center;
            gap: 105px;
            margin-bottom: 41px;
        }

        >a {
            margin: auto;
        }

        a {
            font-size: 20px;
            font-weight: 900;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 230px;
            height: 50px;
            border-radius: 40px;
            border: 2px solid #fff;

            &.prev-link,
            &.next-link {
                font-size: 18px;
                width: 112px;
            }

            &.prev-link {
                &::before {
                    content: "";
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    margin-top: 4px;
                    margin-right: 8px;
                    background-color: #fff;
                    clip-path: polygon(0 50%, 80% 0, 80% 100%);
                }
            }

            &.next-link {
                &::after {
                    content: "";
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    margin-top: 4px;
                    margin-left: 8px;
                    background-color: #fff;
                    clip-path: polygon(100% 50%, 20% 0, 20% 100%);
                }
            }
        }
    }
}

@keyframes opaAnim {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    34% {
        opacity: 1;
    }

    66% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes scaleAnim {
    from {
        scale: 1;
    }

    to {
        scale: 1.1;
    }
}

@keyframes beforeAfterMoveAnime {
    from {
        left: 0;
    }

    to {
        left: calc(100% - 145px);
    }
}

@keyframes noticeLikeAnim {
    0% {}

    49% {
        background-color: #fff;
    }

    50% {
        background-color: var(--kaiteki-yellow);

    }

    100% {
        background-color: var(--kaiteki-yellow);
    }
}