html {
    font-size: 18px;
    scroll-padding-top: 131px;

    &:has(.open) {
        overflow-y: scroll;
    }
}

.for-tb {
    display: none;
}

.for-mb-tb {
    display: none !important;
}

.from-pc {
    display: block;
}

.row-from-pc {
    display: flex;
    flex-direction: row;
}

.house-symbol {
    font-size: 36px;
    width: 542px;
    height: 189px;
    /* margin-left: calc((50% - 542px) / 2); */
    clip-path: polygon(0 72px, 50% 0, 100% 72px, 100% 100%, 0 100%);

    >span {
        &:nth-of-type(1) {
            top: 5px;
            left: 5px;
            width: calc(100% - 10px);
            height: calc(100% - 10px);

            span {
                top: 5px;
                left: 5px;
                width: calc(100% - 10px);
                height: calc(100% - 10px);

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

        &:nth-of-type(2) {
            span {
                -webkit-text-stroke-width: 12px;
                font-size: 56px;
            }
        }
    }

    &.only-one {
        width: 562px;
        height: 155px;
        padding-left: 80px;
        padding-bottom: 40px;
        margin-top: 213px;
        margin-left: auto;

        span {
            &:nth-of-type(2) {
                span {
                    -webkit-text-stroke-width: 12px;
                    font-size: 56px;
                }
            }

            &.img-container {
                right: 40px;
                bottom: 10px;
                width: 130px;
                height: 110px;
            }
        }
    }
}

.type-1 {
    padding: 0;
    width: 1180px;
    max-width: unset;

    .slide {
        width: 340px;
        margin: 0 25px;
    }
}

.carousel-nav {
    display: none;
}

.tik-tok,
.instagram {
    &:hover {
        img {
            rotate: 30deg;
        }
    }
}

#main-header {
    align-items: center;
    height: 100px;
    padding-right: 40px;
    margin-top: -131px;

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

    h1 {
        font-size: 15px;
        margin-left: 60px;

        a {
            font-size: 16px;

            .logo {
                width: 40px;
            }

            >span {
                &:not(.logo) {
                    font-size: 8px;
                }
            }
        }
    }

    .contents {
        display: contents;
        align-items: center;
        gap: 100px;

        .call {
            font-size: 42px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-box-trim: trim-both;
            position: relative;
            margin-left: auto;

            .img-container {
                position: absolute;
                left: 0;
                display: inline-block;
                width: 45px;
                height: 45px;
                aspect-ratio: unset;
                translate: -50px;
            }
        }

        #ham-menu {
            position: static;
            z-index: 0;
            flex-direction: row;
            gap: 2vw;
            height: unset;
            width: unset;
            padding: 0;
            margin-left: auto;

            &::before {
                content: none;
            }

            .sleeping-dog {
                display: none;
            }

            a {
                font-size: 24px;
                pointer-events: auto;

                &:hover {
                    color: var(--kaiteki-yellow);
                }

                &:active {
                    translate: 0 .2em;
                    transition-duration: 0s;
                }
            }
        }
    }

    #ham-button {
        display: none;
    }
}

footer {
    >img {
        object-position: center 30%;
    }

    .row-from-pc {
        position: relative;
        width: 1272px;
        padding-top: 88px;
        margin: auto;

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 468px;
            width: 2px;
            height: 100%;
            background-color: #fff;
            border-radius: 2px;
        }

        .logo-container {
            font-size: 40px;
            text-align: center;
            min-width: 468px;

            .logo {
                width: 160px;
            }
        }

        .container {
            flex: 1;

            .pagination {
                font-size: 20px;
                gap: 24px 65px;
                padding-top: 0;

                &::before {
                    content: none;
                }

                a {
                    &:hover {
                        color: var(--kaiteki-yellow);
                    }

                    &:active {
                        translate: 0 .2em;
                        transition-duration: 0s;
                    }
                }
            }

            address {
                .post {
                    span {
                        font-size: 20px;
                    }
                }
            }

            .row-from-tb {
                gap: 68px;
                margin-bottom: 72px;

                .call {
                    font-size: 42px;

                    .from-pc {
                        display: flex;

                    }
                }
            }
        }
    }

    .sleeping-dog {
        .img-container {
            width: 160px;
            height: 114px;
        }

        .bubble-group {
            right: 80px;
            bottom: 100px;

            .bubble {
                width: 17px;

                &:nth-of-type(1) {
                    top: 15px;
                    right: 26px;
                }

                &:nth-of-type(2) {
                    top: 8px;
                    right: 10px;
                }
            }
        }

        .snore {
            right: 30px;
            bottom: 20px;
        }
    }
}

#top-eye-catch {
    height: 100svh;
    padding-top: calc((100svh - 131px + (-69.6vw / 891 * 440)) / 2 + 131px);

    .carousel-clipper {
        position: relative;
        overflow: clip;
        aspect-ratio: 891 / 440;
        width: 69.6vw;
        margin: 0;


    }

    .swiper-wrapper {
        position: absolute;
        /* top: calc(((100svh - 131px + (-69.6vw / 891 * 440)) / 2 + 131px) * -1); */
        top: 0;
        left: 0;
        flex-direction: column;
        aspect-ratio: 891 / 440;
        width: 100%;
        height: 100%;
        margin: 0;
        scroll-snap-type: y mandatory;

        scrollbar-width: none;
        -ms-overflow-style: none;

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

        .slide {
            aspect-ratio: 891 / 440;
            width: 69.6vw;
            height: unset;
            /* padding-top: calc((100svh - 131px + (-69.6vw / 891 * 440)) / 2 + 131px); */
            container-type: scroll-state;
            scroll-snap-align: start;
			transition-property: all;
			
			&:has(a:hover) {
				filter: grayscale(.7);
			}

            /* @container scroll-state(snapped: y) {
                .thumb {
                    border-width: 0;

                    &::before {
                        width: 50px;
                    }

                    &::after {
                        width: 20px;
                    }

                    .bg-black {
                        opacity: 0;
                    }
                }
            } */
        }
    }

    .slide-prime {
        position: relative;
        aspect-ratio: 891 / 440;
        width: 69.6vw;
    }

    .thumb {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        aspect-ratio: 891 / 440;
        width: unset;
        height: 500%;
        border: 3px solid #FFFFFF;
        transform-origin: top left;
        scale: calc(1 / 16 * 3);

        &::before,
        &::after {
            content: "";
            position: absolute;
            right: 100%;
            display: block;
            width: 0;
            background-color: var(--kaiteki-yellow);
        }

        &::before {
            top: 50%;
            height: 50px;
            translate: 0 -50%;
            clip-path: polygon(100% 0, 100% 100%, 0 50%);
        }

        &::after {
            top: 0;
            height: 100%;
        }

        &:hover {
            &::before {
                width: 50px;
            }

            &::after {
                width: 20px;
            }
        }

        .bg-black {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: var(--kaiteki-black);
            opacity: .8;
        }
    }

    .more-info {
        font-weight: 600;
        font-size: 24px;
        width: 313px;
        height: 55px;
        padding-top: 6px;
    }

    .top-slide-1 {

        &.thumb,
        .slide-prime {
            padding-top: 2vw;
        }

        .slide-prime {
            .more-info {
                &:hover {
                    color: var(--kaiteki-black);

                    &::before {
                        background-color: #fff;
                        opacity: 1;
                    }

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

        p,
        .moc-p {
            font-size: 3.75vw;
            margin-top: 0;

            span {
                font-size: 30px;
            }
        }

        strong {
            font-size: 3.125vw;
            margin-top: 10vw;
            margin-right: 76px;

            span {
                font-size: 3.75vw;
            }
        }
    }

    .top-slide-2 {

        &.thumb,
        .slide-prime {
            padding-top: 7vw;
        }

        .slide-prime {
            .more-info {
                &:hover {
                    color: var(--kaiteki-black);

                    &::before {
                        background-color: #fff;
                        opacity: 1;
                    }

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

        p,
        .moc-p {
            font-size: 4.5vw;
            display: block;
            margin-top: 0;
            margin-left: 44px;
        }

        strong {
            font-size: 3.2vw;
            top: 9vw;

            span {
                font-size: 4.5vw;
            }
        }
    }

    .top-slide-3 {
        &.thumb,
        .slide-prime {
            gap: 5.8vw;
            padding-left: 7vw;
            padding-bottom: 3.5vw;
        }

        &.thumb {
            display: flex;
        }

        .slide-prime {
            aspect-ratio: 891 / 440;
            width: 69.6vw;
            height: unset;
        }

        span {
            &.voice {
                font-size: 3.175vw;
                top: 5vw;
                left: 4.4vw;

                &::before,
                &::after {
                    width: 33.8vw;
                }

                span {
                    font-size: 3.9vw;
                }
            }

            &.click-here {
                font-size: 4.06vw;

                span {
                    font-size: 3.175vw;
                }
            }
        }

        .img-container {
            &.tik-tok {
                display: block;
                width: 9.375vw;
                height: 9.375vw;

                &.from-pc {
                    scale: .25;
                }
            }
        }
    }

    #top-carousel-nav {
        position: absolute;
        top: calc((100svh - 131px + (-69.6vw / 891 * 440)) / 2 + 131px);
        right: 3vw;
        width: calc(100vw - 69.6vw - 6vw);
        height: calc(69.6vw / 891 * 440);

        .swiper-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            transform: none !important;

            div {
                position: relative;
                aspect-ratio: 891 / 440;
                width: unset;
                height: calc(69.6vw / 891 * 440 / 4);
                margin: 0 auto;
                filter: brightness(1);

                &.swiper-slide-thumb-active {
                    .thumb {
                        border-width: 0;
                        filter: brightness(1.1);

                        &::before {
                            width: 50px;
                        }

                        &::after {
                            width: 20px;
                        }

                        .bg-black {
                            opacity: 0;
                        }
                    }
                }
            }
        }
    }
}

#sticky-sns {
    top: 131px;
    width: 100%;

    .sns-container {
        top: 20px;
        right: 20px;
        left: unset;
        overflow: clip;

        .tik-tok,
        .instagram {
            width: 75px;
            margin-bottom: 10px;
        }
    }
}

#charm {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px;

    .container {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        width: auto;
        height: 682px;
        padding-top: 0;
        margin: 0;
        border-width: 5px;

        .sleeping-dog {
            .img-container {
                width: 134px;
                height: 198px;

                img {
                    object-fit: cover;
                }
            }

            .bubble-group {
                right: 170px;

                .bubble {
                    width: 28px;

                    &:nth-of-type(1) {
                        right: 55px;
                    }

                    &:nth-of-type(2) {
                        right: 23px;
                    }
                }
            }

            .snore {
                top: 70px;
                right: 130px;
                width: 170px;

                >span {
                    &:not(.caption) {
                        font-size: 18px;
                    }
                }
            }
        }

        h2 {
            font-size: 56px;

            span {
                &:nth-of-type(2) {
                    font-size: 46px;
                }

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

        ol {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: nowrap;
            max-width: unset;
            margin: 0;

            li {
                margin: 0;

                .img-container {
                    width: 230px;

                    &::before {
                        font-size: 48px;
                        width: 78px;
                        height: 78px;
                        padding-left: 23px;
                    }
                }

                dt,
                dd {
                    text-align: start;
                    width: fit-content;
                    margin-right: auto;
                    margin-left: auto;
                }

                dt {
                    font-size: 20px;
                    height: 71px;

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

#price {
    padding-bottom: 80px;

    .house-symbol {
        span {
            &:nth-of-type(2) {
                >span {
                    -webkit-text-stroke-width: 12px;
                }
            }

            &.img-container {
                bottom: -8px;
                width: 113px;
            }
        }
    }

    >.img-container {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 331px;
        height: 441px;

        p {
            font-size: 24px;
            top: 68px;
            left: unset;
            right: 100%;
            width: 370px;
            translate: none;

            &::before {
                width: 355px;
            }

            &::after {
                bottom: -110px;
                width: 374px;
            }

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

#example {
    padding-bottom: 120px;

    .house-symbol {
        span {
            &.img-container {
                bottom: 25px;
                width: 70px;
            }
        }
    }

    .container {
        &::before {
            top: -109px;
            height: calc(100% + 109px);
        }

        .type-1 {

            .slide {
				&:has(a:hover) {
					scale: 1.05;	
				}
				
                dl {
                    dd {
                        &:not(.img-container) {
                            span {
                                &.deco {
                                    align-items: start;
                                    padding-top: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .link-container {
            padding-bottom: 114px;

            a {
                /* box-shadow: 0 0 0 var(--kaiteki-blue);

                &:hover {
                    box-shadow: 0 10px 0 #fff;
                    translate: 0 -10px;
                }

                &:active {
                    transition-duration: 0s;
                    box-shadow: 0 0 0 var(--kaiteki-blue);
                    translate: none;
                } */

                &:hover {
                    color: var(--kaiteki-blue);
                    background-color: var(--kaiteki-yellow);
                    border-color: var(--kaiteki-blue);

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

#before-after {
    position: relative;
    padding-bottom: 57px;

    .house-symbol {
        color: var(--kaiteki-blue);
        position: absolute;
        top: 20px;
        left: 50%;
        z-index: 1;
        display: flex;
        background-color: var(--kaiteki-yellow);
        translate: -50%;

        >span {
            &:nth-of-type(1) {
                background-color: #fff;

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

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

            &:nth-of-type(2) {
                span {
                    color: var(--kaiteki-yellow);
                    -webkit-text-stroke: 12px var(--kaiteki-blue);
                    paint-order: stroke;
                }
            }

            &.img-container {
                right: 25px;
                bottom: 15px;
                width: 68px;
            }
        }
    }

    .collision {
        display: flex;
        height: calc(100svh - 131px);

        .before,
        .after {
            position: static;
            animation-name: none;

            p {
                animation-name: none;
                font-size: 28px;
                width: 232px;
                height: 50px;
            }

            img {
                animation-name: none;
            }
        }

        span {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 150px;
            background-color: var(--kaiteki-blue);
            clip-path: polygon(0 calc(100% / 3), calc(100% / 5 * 3) calc(100% / 3), calc(100% / 5 * 3) 0, 100% 50%, calc(100% / 5 * 3) 100%, calc(100% / 5 * 3) calc(100% / 3 * 2), 0 calc(100% / 3 * 2));
            translate: -50% -50%;

            span {
                width: calc(100% - 10px);
                height: calc(100% - 10px);
                background-color: var(--kaiteki-yellow);
                clip-path: polygon(0 calc(100% / 3 + 5px), calc(100% / 5 * 3 + 7px) calc(100% / 3 + 5px), calc(100% / 5 * 3 + 7px) 7px, calc(100% - 5px) 50%, calc(100% / 5 * 3 + 7px) calc(100% - 7px), calc(100% / 5 * 3 + 7px) calc(100% / 3 * 2 - 5px), 0 calc(100% / 3 * 2 - 5px));
            }
        }
    }

    .row-from-pc {
        justify-content: space-between;
        flex-direction: row-reverse;
        width: 1280px;
        margin: auto;

        >div {
            &:not(.img-container) {
                padding-right: 91px;
            }
        }
    }
}

#flow {
    position: relative;
    padding-top: 105px;
    padding-bottom: 118px;
    border-width: 8px;

    .column-from-tb {
        &:nth-of-type(1) {
            position: relative;

            .house-symbol {
                margin-bottom: 363px;

                span {
                    &:nth-of-type(2) {
                        padding-top: 32px;
                    }

                    &.img-container {
                        width: 61px;
                        bottom: 20px;
                    }
                }
            }

            >.img-container {
                position: absolute;
                top: 400px;
                right: 0;
                width: 200px;
                height: 180px;
                margin: 0;

                p {
                    font-size: 24px;
                    top: 10%;
                    width: 450px;
                    translate: 0 -50%;

                    &::before {
                        width: 409px;
                    }

                    &::after {
                        width: 422px;
                    }

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

        &:nth-last-of-type(1) {
            padding-top: 65px;

            ol {
                li {
                    width: 741px;

                    &::marker {
                        font-size: 48px;
                    }

                    &:not(:nth-last-of-type(1), :nth-last-of-type(2)) {
                        margin-left: auto;
                    }

                    &:nth-last-of-type(2) {
                        padding-top: 73px;
                    }

                    dl {
                        dt {
                            font-size: 24px;
                        }

                        dd {
                            button {
                                font-size: 24px;
                                margin-top: 23px;
                                -webkit-text-stroke: 6px transparent;

                                &:hover {
                                    color: var(--kaiteki-blue);
                                    -webkit-text-stroke-color: #fff;
                                    paint-order: stroke;

                                    &::before {
                                        background-color: #fff;
                                    }

                                    &::after {
                                        background-color: #fff;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .img-container {
                position: absolute;
                right: 0;
                bottom: 74px;
                width: 56.4vw;
                height: 483px;
                margin: 0;
            }
        }
    }


    >.img-container {
        position: absolute;
        top: 860px;
        left: 0;
        width: 57.7vw;
        height: 865px;
        margin: 0;

        img {
            object-position: 60%;
        }
    }

    dialog {

        &::scroll-button(right),
        &::scroll-button(left) {
            top: 660px;
        }

        &::scroll-button(right):hover:not(:disabled),
        &::scroll-button(left):hover:not(:disabled) {
            background-color: #fff;
        }

        .slide {
            .thumb {
                width: 900px;
                height: 600px;
                margin: 41px auto 0;
            }
        }

        .swiper-nav {
            top: 700px;
        }

        .close-btn {
            top: 725px;
            right: 30%;

            &:hover {
                background-color: #fff;
                opacity: .8;

                &::before,
                &::after {
                    background-color: var(--kaiteki-blue);
                }
            }
        }
    }
}

.tag-button-group-blog {
    button {
        width: 220px;

        /* &:hover {
            span {
                box-shadow: 0 10px 0 hsl(from var(--kaiteki-blue) h calc(s * 2) calc(l * 2));
                translate: 0 -10px;
            }
        }

        &:active {
            span {
                transition-duration: 0s;
                box-shadow: 0 0 0 var(--kaiteki-blue);
                translate: none;
            }
        }

        span {
            background-color: #fff;
            box-shadow: 0 0 0 var(--kaiteki-blue);
        } */

        &:hover {
            span {
                &::after {
                    opacity: 1;
                }
            }
        }

        span {
            position: relative;

            &::after {
                content: "";
                position: absolute;
                right: 1em;
                width: .8em;
                height: .8em;
                background-color: var(--kaiteki-blue);
                clip-path: polygon(0 0, 100% 50%, 0 100%);
                opacity: 0;
            }
        }
    }
}

#tag-date-container {
    justify-content: flex-start;
    flex-direction: column;
    gap: 40px;

    #tag-container,
    #date-container {
        margin: 0;

        h3 {
            margin-bottom: 40px;
        }

        form {
            gap: 20px;
			
			button {
				transition-duration: .2s;
					
				&:hover {
					opacity: .8;
				}
			}

            /* button {
                &:hover {
                    span {
                        box-shadow: 0 10px 0 hsl(from var(--kaiteki-blue) h calc(s * 2) calc(l * 2));
                        translate: 0 -10px;
                    }
                }

                &:active {
                    span {
                        transition-duration: 0s;
                        translate: none;
                        box-shadow: 0 0 0 var(--kaiteki-blue);
                    }
                }

                span {
                    display: inline-block;
                    box-shadow: 0 0 0 var(--kaiteki-blue);
                }
            } */
        }
    }
}

#blog-archive {
    position: relative;
    padding-bottom: 80px;

    .row-from-pc {
        justify-content: center;
        gap: 40px;

        #blogs {
            width: 800px;
            height: 1465px;
            padding-top: 40px;

            article {
                width: 721px;
                height: 220px;

                &:has(a:hover) {
                    .texts {
                        .link-container {
                            span {
                                opacity: 1;
                            }
                        }
                    }
                }

                .thumb {
                    width: 260px;
                    height: 165px;
                }

                .texts {
                    h2 {
                        font-size: 20px;
                    }

                    .link-container {
                        span {
                            opacity: 0;
                        }
                    }

                    /* .link-container {
                        a {
                            &:hover {

                                &::after {
                                    animation-name: hoveringAnimPart1, hoveringAnimPart2;
                                    animation-duration: 2s;
                                    animation-iteration-count: infinite;
                                }
                            }
                        }
                    } */
                }
            }

            .pagenavi {
                a {
                    /* box-shadow: 0 0 0 var(--kaiteki-blue);

                    &:hover {
                        box-shadow: 0 10px 0 hsl(from var(--kaiteki-blue) h calc(s * 2) calc(l * 2));
                        translate: 0 -10px;
                    }

                    &:active {
                        transition-duration: 0s;
                        box-shadow: 0 0 0 from var(--kaiteki-blue);
                        translate: none;
                    } */

                    &:hover {
                        background-color: var(--kaiteki-yellow);
                    }
                }
            }
        }
    }

    .dog {
        position: absolute;
        right: 0;
        bottom: 0;

        .img-container {
            p {
                font-size: 24px;
                right: 50%;
                width: 264px;
            }
        }
    }
}

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

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

    #tag-button-group-cons {
        display: flex;
        width: 1120px;
        padding: 45px;
        margin: 78px auto 0;

        h3 {
            justify-content: center;
            flex-direction: column;
            border-bottom: none;
            width: 180px;
            height: 180px;
            padding: unset;
            margin: 10px 0 0 0;
            border-right: 1px solid var(--kaiteki-blue);

            span {
                &.img-container {
                    width: 97px;
                    height: 97px;
                    margin: 0 auto;
                }
            }
        }

        form {
            gap: 20px 20px;
            width: 845px;

            button {
                /* &:hover {
                    span {
                        box-shadow: 0 10px 0 hsl(from var(--kaiteki-blue) h calc(s * 2) calc(l * 2));
                        translate: 0 -10px;
                    }
                }

                &:active {
                    span {
                        transition-duration: 0s;
                        box-shadow: 0 0 0 var(--kaiteki-blue);
                        translate: none;
                    }
                }

                span {
                    box-shadow: 0 0 0 from var(--kaiteki-blue);
                    background-color: var(--kaiteki-blue);
                } */

                &:hover {
                    span {
                        &::after {
                            opacity: 1;
                        }
                    }
                }

                span {
                    position: relative;

                    &::after {
                        content: "";
                        position: absolute;
                        right: 1em;
                        width: .8em;
                        height: .8em;
                        background-color: #fff;
                        clip-path: polygon(0 0, 100% 50%, 0 100%);
                        opacity: 0;
                    }
                }
            }
        }
    }

    #constructions {
        gap: 40px 65px;
        margin: 0 20px;

        article {
            /* box-shadow: 0 0 0 var(--theme-color);

            &:has(a:hover) {
                box-shadow: 0 10px 0 hsl(from var(--theme-color) h s calc(l / 2));
                translate: 0 -10px;
            }

            &:has(a:active) {
                box-shadow: 0 0 0 var(--theme-color);
                translate: none;
            } */

            &:has(a:hover) {
                .thumb {
                    &.zoom {
                        img {
                            width: 165%;
                            height: 165%;
                        }
                    }

                    img {
                        width: 105%;
                        height: 105%;
                    }
                }
            }

            .thumb {
                position: relative;
                overflow: clip;

                &.zoom {
                    img {
                        position: absolute;
                    }
                }

                img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    translate: -50% -50%;
                }
            }

            .texts {
                form {
                    button {
                        /* box-shadow: 0 0 0 var(--kaiteki-black);

                        &:hover {
                            box-shadow: 0 10px 0 hsl(from var(--kaiteki-black) h calc(s * 2) calc(l * 2));
                            translate: 0 -10px;
                        }

                        &:active {
                            transition-duration: 0s;
                            box-shadow: 0 0 0 var(--kaiteki-black);
                            translate: none;
                        } */

                        &:hover {
                            &::after {
                                opacity: 1;
                            }
                        }

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

    .pagenavi {
        a {
            /* box-shadow: 0 0 0 var(--kaiteki-blue);

            &:hover {
                box-shadow: 0 10px 0 hsl(from var(--kaiteki-blue) h calc(s * 2) calc(l * 2));
                translate: 0 -10px;
            }

            &:active {
                transition-duration: 0s;
                box-shadow: 0 0 0 from var(--kaiteki-blue);
                translate: none;
            } */

            &:hover {
                color: var(--kaiteki-blue);
                background-color: var(--kaiteki-yellow);

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

#about-corpo {
    .border-container {
        padding: 160px 80px 80px;

        .house-symbol {
            padding-left: 150px;
            margin-bottom: 60px;
        }

        .container {
            width: 1120px;
            margin: auto;

            .president-container {
                position: absolute;
                margin-top: 0;

                .img-container {
                    width: 384px;
                    height: 563px;
    
                    img {
                        top: -2%;
                        left: 0;
                        width: 100%;
                        height: 104%;
                    }
                }
            }


            #president-greeting {
                width: 800px;
                padding: 80px 59px 130px 74px;
                margin-right: 0;

                h3 {
                    font-size: 42px;
                }

                strong {
                    font-size: 28px;
                }

                .img-container {
                    width: 251px;
                    height: 335px;
                }
            }
        }
    }

    #corpo-info {
        padding: 80px 0;

        dl {
            width: 960px;
            padding: 26px 60px;

            dt {
                display: inline-block;
                width: 321px;
            }

            dd {
                padding: 0;
            }
        }
    }
}

#blog {
    .row-from-pc {
        gap: 60px;
        justify-content: center;

        #single-texts {
            article {
                anchor-name: --blog-container;
                width: 760px;

                .blog-meta {
                    .tag-button-group-blog {
                        button {
                            span {
                                background-color: var(--kaiteki-blue);

                                &::after {
                                    background-color: #fff;
                                }
                            }
                        }
                    }
                }

                h3 {
                    &::before {
                        width: 760px;
                    }
                }
            }

            .navigation {
                a {
                    /* box-shadow: 0 0 0 var(--kaiteki-blue);

                    &:hover {
                        box-shadow: 0 10px 0 #fff;
                        translate: 0 -10px;
                    }

                    &:active {
                        transition-duration: 0s;
                        box-shadow: 0 0 0 var(--kaiteki-blue);
                        translate: none;
                    } */

                    &:hover {
                        color: var(--kaiteki-blue);
                        background-color: var(--kaiteki-yellow);

                        &::before,
                        &::after {
                            background-color: var(--kaiteki-blue);
                        }
                    }
                }
            }
        }
    }
}

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

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

    #construction-prime {
        h3 {
            font-size: 32px;

            >span {
                display: flex;
                align-items: center;
                gap: 36px;
                padding-left: 30px;
                padding-right: 30px;

                span {
                    font-size: 28px;
                    min-width: 20%;
                }
            }
        }

        .row-from-pc {
            justify-content: center;
            gap: 90px;
            margin-bottom: 126px;

            .thumb {
                width: 300px;
                height: 300px;
                margin: 0;
            }

            .measure-nav {

                #construction-swiper {
                    .swiper-wrapper {
                        width: 730px;
                        height: 450px;
                    }

                    #construction-swiper-pagi {
                        .swiper-pagination-bullet:hover {

                            &::before {
                                translate: 0 -5px;
                            }
                        }
                    }
                }

                .swiper-nav {
                    width: 100px;
                    height: 100px;

                    &:hover:not(:disabled),
                    &:hover:not(:disabled) {
                        span {
                            background-color: var(--kaiteki-yellow);
                        }
                    }
                }

                #construction-swiper-nav-next {
                    right: -50px;
                }

                #construction-swiper-nav-prev {
                    left: -50px;
                }
            }
        }
    }

    #construction-info {
        width: fit-content;

        li {
            &:not(:first-of-type) {
                dl {
                    dd {
                        text-align: start;
                    }
                }
            }

            dl {
                display: flex;
                background-color: #E5EAF0;

                dt {
                    font-size: 28px;
                    width: 330px;
                    padding-top: 27px;
                    padding-bottom: 27px;
                    border: none;
                }

                dd {
                    width: 790px;
                    padding-top: 14px;
                    padding-bottom: 7px;
                    border-left: 2px solid var(--kaiteki-black);
                }
            }
        }
    }

    .navigation {
        width: 900px;

        a {
            /* box-shadow: 0 0 0 var(--kaiteki-blue);

            &:hover {
                box-shadow: 0 10px 0 #fff;
                translate: 0 -10px;
            }

            &:active {
                transition-duration: 0s;
                box-shadow: 0 0 0 var(--kaiteki-blue);
                translate: none;
            } */

            &:hover {
                color: var(--kaiteki-blue);
                background-color: var(--kaiteki-yellow);

                &::before,
                &::after {
                    background-color: var(--kaiteki-blue);
                }
            }
        }
    }
}

@keyframes mesmerizerAnim {
    from {
        opacity: 0;
    }

    to {
        scale: 0;
    }
}

/* @keyframes hoveringAnimPart1 {
    0% {
        translate: 0;
    }

    33% {
        translate: 50%;
    }

    66% {
        translate: -50%;
    }

    100% {
        translate: 0;
    }
}

@keyframes hoveringAnimPart2 {
    90% {
        rotate: x 360deg;
    }

    100% {
        rotate: 0;
    }
} */

@media screen and (min-width: 1500px) {
    #charm {
        .container {
            justify-content: space-between;
        }
    }

    #flow {
        .column-from-tb {
            &:nth-last-of-type(1) {
                ol {
                    li {
                        margin: 0 auto 0 10vw;

                        &:not(:nth-last-of-type(1), :nth-last-of-type(2)) {
                            margin-right: 10vw;
                        }
                    }
                }
            }
        }

        dialog {
            &::scroll-button(*) {
                top: 700px;
            }

            .slide {
                .thumb {
                    width: 960px;
                    height: 640px;
                }
            }
        }
    }
}