@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Serif+JP:wght@200..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');

/*========================================================
    変数
==========================================================*/
/* フォント */
:root {
    --font-ja-gothic: "Zen Kaku Gothic New", sans-serif;
    --font-bold:"Zen Antique", serif;
    --font-ja-mincho: "Noto Serif JP", serif;
    --font-en-gothic: "Fira Sans", sans-serif;
    --font-en-mincho: "PT Serif", serif;
}

/* カラー */
:root {
    --main-color01: #6a0702;
    --design-color01: #4a4a4a;
    --design-color02: #d2d2d2;
    --design-color03: #2d2d2e;

    --font-color01: #a9a9a9;
    --font-color02: #d1d1d1;
}


/*========================================================
    表示・非表示
==========================================================*/
@media (min-width: 960px) { /* PC */
    .is_tab {
        display: none;
    }

    .is_sp {
        display: none;
    }

    .is_tab-sp {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 959px) { /* tab */
    .is_pc {
        display: none;
    }

    .is_sp {
        display: none;
    }
}

@media (max-width: 767px) { /* sp */
    .is_pc {
        display: none;
    }

    .is_tab {
        display: none;
    }

    .is_pc-tab {
        display: none;
    }
}


/*========================================================
    基本設定
==========================================================*/
html {
    scroll-behavior: smooth;

    @media (min-width: 960px) {
        scroll-padding-top: clamp(3.75rem, 2.805rem + 3.88vw, 7.457rem);
    }
}

body {
    overflow-x: hidden;
}

img {
    width: 100%;
}

a {
    display: block;

    &:hover {
        opacity: .5;
        cursor: pointer;
    }
}

.section-tit_ja {
    padding-bottom: 1.3em;
    font-family: var(--font-ja-gothic);
    font-weight: 700;
    letter-spacing: .08em;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
        width: 33.7px;
        height: 1.5px;
    }

    @media (max-width: 767px) {
        &::before {
            width: 20px;
        }
    }
}


.section-tit_en {
    font-family: var(--font-en-gothic);
    font-size: clamp(1.75rem, 1.415rem + 1.37vw, 3.063rem);
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--design-color01);
    margin-top: 1em;
}


.sns-more {
    padding: 24px 0;

    .sns-inner {
        width: min(75%, 1825px);
        padding: 3% 0;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        gap: 5%;
        justify-content: center;

        @media (max-width: 680px) {
            align-items: center;
            flex-direction: column;
            width: 95%;
            padding: 12% 0 min(17%, 100px);
        }

        .text-box {
            width: min(65%, 444px);

            @media (max-width: 680px) {
                width: 85%;
            }

            .txt {
                font-family: var(--font-ja-gothic);
                font-size: clamp(0.813rem, 0.646rem + 0.35vw, 1.063rem);
                font-weight: 500;
                color: var(--main-color01);
                line-height: 1.82em;
                letter-spacing: .14em;
                text-align: center;
                white-space: nowrap;
                z-index: 2;

                @media (max-width: 680px) {
                    font-size: clamp(0.813rem, 0.476rem + 1.38vw, 1.063rem);
                }
            }

            .string {
                margin-top: 15px;
            }
        }

        .sns {
            display: flex;
            gap: 26px;

            @media (max-width: 680px) {
                margin-top: min(7%, 40px);
                justify-content: center;
                gap: 10px;
            }

            .btn {
                width: clamp(4.375rem, 3.897rem + 1.96vw, 6.25rem);
                aspect-ratio: 1 / 1;
                border-radius: 100vh;
                position: relative;
                background-color: var(--main-color01);
                background: linear-gradient(-45deg, var(--main-color01) 50%, #ae7976 60%, var(--main-color01) 70%);
                background-size: 600% 100%;

                &:hover {
                    opacity: 1;
                    -webkit-animation: shine 20s infinite;
                    animation: shine 20s infinite;
                    -webkit-animation-delay: 0s;
                    animation-delay: 0s;
                    -webkit-animation-timing-function: linear;
                    animation-timing-function: linear;
                }

                img {
                    width: 35px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .sns-name {
                    position: absolute;
                    left: 50%;
                    bottom: -1.3em;
                    transform: translateX(-50%);
                    font-family: var(--font-en-gothic);
                    font-size: clamp(0.813rem, 0.749rem + 0.26vw, 1.063rem);
                    font-weight: 500;
                    color: var(--main-color01);
                    pointer-events: none;
                }
            }
        }
    }
}

@keyframes shine {
    0% {
        background-position-x: 410%;
    }
    50% {
        background-position-x: 0%;
    }
    100% {
        background-position-x: -410%;
    }
}



/*========================================================
    #header
==========================================================*/
.header-wrap {
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 10;
    transition: .5s;

    &.change-color {
        background-color: rgba(40, 40, 40, .7);
    }
    .inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: min(95%, 1385px);
        margin: 0 auto;
        padding: 1.5% 0;

        .header-logo {
            width: clamp(13.813rem, 12.076rem + 7.12vw, 20.625rem);
        }
    }

    @media (max-width: 959px) {
        background-color: transparent;
        position: absolute;
        top: 3%;

        .inner {
            width: 94%;
            padding: 0;
        }
    }
}




/*  ハンバーガー
==========================================================*/
@media (max-width: 959px) {
    .drawer-hamburger {
        top: 3%;
        right: 3% !important;
        width: 52px;
        height: 52px;
        padding: 12.5px;
        border: 1px solid #fff;
        border-radius: 50%;
        box-sizing: border-box;
        z-index: 11;
        background-color: var(--main-color01);

        &:hover {
            background-color: var(--main-color01);
        }
    }

    .drawer-hamburger-icon,
    .drawer-hamburger-icon::after,
    .drawer-hamburger-icon::before {
        background: #fff;
        height: 1.5px;
    }

    .drawer-hamburger-icon::before {
        top: -8px;
    }

    .drawer-hamburger-icon {
        top: -5px;
    }

    .drawer-hamburger-icon::after {
        top: 8px;
    }
}

button {
    padding: 0;
    border: none;
    outline: none;
}

.drawer-overlay {
    z-index: 9;
}

/*  ナビゲーション
==========================================================*/
.header_menu,
.footer-menu {
    display: flex;
    column-gap: 1.5em;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-ja-gothic);
    font-size: clamp(1.181rem, 1.148rem + 0.14vw, 1.313rem);
    font-weight: 500;
    letter-spacing: .08rem;

    a {
        color: #fff;
        padding: .2em;

        @media (max-width: 767px) {
            color: #000;
        }
    }

    .contact-link {
        padding: .8em 2em;
        background-color: var(--main-color01);
        border-radius: 100vh;
        color: #fff;
        border: var(--main-color01) solid 2px;
        transition: all .3s;

    }

    .sns {
        display: flex;
        gap: 13px;

        a {
            width: 40px;
        }
    }

    @media (max-width: 1100px) {
        column-gap: .8em;

        .contact-link {
            padding: .6em 1.3em;
        }
    }
}

@media (max-width: 959px) {

    .header_menu {
        flex-flow: column;
        align-items: flex-start;
        margin: 5em 0 0 1.6em;
        row-gap: .7em;
        letter-spacing: .1em;

        >li {
            width: 100%;

            a {
                width: 100%;
            }
        }

        .contact-link {
            width: 48%;
            margin-top: 1.5em;
        }

        .sns {
            gap: 5px;

            a {
                width: 30px;
            }
        }
    }
}

.header-nav {
    z-index: 10;
}


/*========================================================
    mv, main-tit
==========================================================*/
.mv-container {
    position: relative;

    &::before {
        position: absolute;
        content: '';
        top: 58%;
        left: 16%;
        background: url(../img/top/daruma-img_eh.png) no-repeat center center / contain;
        width: clamp(3.438rem, 2.705rem + 3.01vw, 6.313rem);
        aspect-ratio: 10 / 11;
        z-index: 3;
    }
    @media (max-width: 767px) {
        &::before {
            top: 45%;
            left: 7%;
        }
    }

    .main-tit {
        position: absolute;
        top: 46%;
        transform: translateY(-50%);
        left: 16%;
        font-family: var(--font-ja-mincho);
        color: #fff;
        font-size: clamp(1.188rem, 0.825rem + 1.81vw, 3rem);
        font-weight: 900;
        line-height: 1.8em;
        letter-spacing: .16em;
        z-index: 3;

        @media (max-width: 767px) {
            top: 63%;
            transform: translateY(0);
            left: 7%;
        }

        .ruby {
            position: relative;
            &::before {
                position: absolute;
                content: "リフォーム";
                top: -0.5em;
                left: 48%;
                transform: translateX(-50%);
                font-size: 40%;
                letter-spacing: .18em;
                line-height: 1em;
                white-space: nowrap;
            }
        }
    }
}

/* mvスライド */
.swiper-pagination {
    bottom: 2.4em !important;
    z-index: 3;

    @media (max-width:959px) {
        bottom: 12px !important;
    }
}

.swiper-pagination-bullet {
    width: clamp(0.5rem, 0.468rem + 0.13vw, 0.625rem);
    height: clamp(0.5rem, 0.468rem + 0.13vw, 0.625rem);
    margin: 0 10px !important;
    background-color: transparent;
    border: solid 1px #fff;
    opacity: 1;

    @media (max-width: 959px) {
        width: 6.4px;
        height: 6.4px;
    }
    @media (max-width: 767px) {
        margin: 0 5px !important;
    }
}

.swiper-pagination-bullet-active {
    background-color: #fff;
}



/*========================================================
    #service
==========================================================*/
.service-wrap {
    padding-top: 10%;
    background-color: var(--main-color01);
    position: relative;

    &::before {
        position: absolute;
        content: "";
        background: url(../img/top/service_bg01.png) no-repeat top right / contain;
        width: 26.5%;
        height: 39.2%;
        top: 0;
        right: 0;
    }

    @media (max-width: 959px) {
        &::before {
            width: 46%;
            height: 45vw;
        }
    }

    @media (max-width: 767px) {
        padding-top: 17%;
    }

    .section-tit_ja {
        font-size: clamp(0.813rem, 0.653rem + 0.65vw, 1.438rem);
        color: #fff;

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

    .section-tit_en {
        color: var(--font-color01);
        margin-bottom: 1.7em;
    }

    .inner {
        width: min(90%, 1323px);
        margin: 0 auto;
        padding-bottom: 12%;
        position: relative;
        z-index: 2;

        @media (max-width: 767px) {
            width: 92%;
            padding-bottom: 25%;
        }

        >.txt {
            font-family: var(--font-ja-gothic);
            font-size: clamp(0.875rem, 0.795rem + 0.33vw, 1.188rem);
            font-weight: 500;
            line-height: 1.8em;
            letter-spacing: .08em;
            color: #fff;
            text-align: left;
            margin: 3em auto 0;
            text-align: center;

            @media (max-width: 767px) {
                margin-top: 3em;
            }
        }
    }

    .text-wrap {
        width: 61%;
        margin: 0 auto;
        padding-bottom: max(70px, 8.7%);

        @media (max-width: 767px) {
            width: 95%;
        }

        .tit {
            font-family: var(--font-bold);
            font-size: clamp(1.25rem, 0.345rem + 3.71vw, 2.125rem);
            font-weight: 600;
            color: #fff;
            letter-spacing: .1em;
            line-height: 1.5em;
            text-align: center;
            margin-bottom: 1.67em;

            @media (max-width: 767px) {
                text-align: center;
            }
        }

        .txt {
            font-family: var(--font-ja-gothic);
            font-size: clamp(0.938rem, 0.874rem + 0.26vw, 1.188rem);
            line-height: 1.89em;
            letter-spacing: .08em;
            color: #fff;
            margin-bottom: 3.6em;
        }

        .btn {
            width: min(87%, 371px);
            height: clamp(3.25rem, 0.405rem + 11.67vw, 6rem);
            margin: 0 auto;
            background-color: #fff;
            border-radius: 100vh;
            overflow: hidden;
            position: relative;

            @media (max-width: 767px) {
                width: 82%;
            }

            a {
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: clamp(3.25rem, 0.405rem + 11.67vw, 6rem);
                font-family: var(--font-ja-gothic);
                font-weight: 500;
                font-size: clamp(1.063rem, 0.416rem + 2.65vw, 1.688rem);
                text-align: center;
                letter-spacing: .08em;
                padding: 0 3em;
                position: relative;

                &::before {
                    position: absolute;
                    content: '';
                    top: 50%;
                    right: 1.6em;
                    transform: translateY(-50%);
                    background-color: var(--main-color01);
                    width: 11.5px;
                    height: 11.5px;
                    border-radius: 50%;
                    transition: 0.2s 0.15s ease;
                }
                &::after {
                    position: absolute;
                    content: "";
                    width: 10px;
                    height: 6px;
                    border-top: 2px solid var(--main-color01);
                    right: 1.8em;
                    top: 50.5%;
                    transform: translate(5px, -50%);
                    transition: 0.5s ease;
                    opacity: 0;
                    transform-origin: right bottom;
                }
                &:hover::before {
                    width: 30px;
                    height: 2px;
                    border-radius: 2px;
                    transform: translate(5px, -50%);
                    transition: 0.3s ease;
                }
                &:hover::after {
                    transform: translate(5px, -59%) rotate(45deg);
                    opacity: 1;
                    transition: 0.2s 0.15s ease;
                }

                @media (max-width: 767px) {
                    &::before {
                        width: 8px;
                        height: 8px;
                        transition: all .2s;
                    }
                    &:hover::before {
                        width: 20px;
                        height: 2px;
                        border-radius: 2px;
                        transform: translate(5px, -50%);
                        transition: all .1s 0s;
                    }
                    &::after {
                        transition: all .2s;
                    }
                    &:hover::after {
                        transition: all .2s;
                    }
                }

                .sub {
                    font-size: 80%;
                    margin-left: 0.57em;
                }
            }
        }
    }

    .sns-more {
        background-color: #fcf8f7;
        position: relative;

        &::before {
            position: absolute;
            content: '';
            bottom: 100%;
            left: 0;
            background: url(../img/top/service_bg02.png) no-repeat bottom left / contain;
            width: 30%;
            aspect-ratio: 28 / 31;
            z-index: 1;
        }

        @media (max-width: 767px) {
            &::before {
                width: 40%;
            }
        }
    }

    .service-img {
        height: clamp(11.875rem, 6.793rem + 20.85vw, 31.813rem);
        position: relative;


        img {
            object-fit: cover;
            height: 100%;
        }
    }
}

.service-link {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;

    @media (max-width: 959px) {
        width: 100%;
        display: flex;
        flex-flow: column;
    }

    .service-block {
        overflow: hidden;
        position: relative;

        &:hover {
            opacity: 1;

            .back {
                transform:scale(1.2);
                opacity: 1;
                transition: 1s all;
            }
        }

        .back {
            transition: .5s all;

            &::before {
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                background-color: rgba(9, 16, 81, 0.4);
                width: 100%;
                height: 100%;
            }
        }

        .service-name {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--font-ja-mincho);
            font-size: clamp(1.375rem, 1.04rem + 1.37vw, 2.688rem);
            font-weight: 700;
            letter-spacing: .1em;
            color: #fff;
            white-space: nowrap;
            text-align: center;

            &.tyou {
                transform: translate(-50%, -50%) scale(.8, 1);
            }
        }

        .num {
            position: absolute;
            top: 1.36em;
            left: 1.3em;
            width: clamp(0.625rem, 0.529rem + 0.39vw, 1rem);
            height: clamp(7.125rem, 6.01rem + 4.58vw, 11.5rem);

            @media (max-width: 767px) {
                top: .65em;
                left: .75em;
            }
        }
    }
}





/*========================================================
    #About
==========================================================*/
.about-wrap {
    padding: 11% 0 9.5%;
    position: relative;

    &::before {
        position: absolute;
        content: "";
        top: -10%;
        right: 5.2%;
        background: url(../img/top/bg-img01.png) no-repeat center center / contain;
        width: 18%;
        height: 21%;
    }

    &::after {
        position: absolute;
        content: '';
        bottom: -16.5%;
        left: -9.6%;
        background: url(../img/top/about-bg.png) no-repeat center center / contain;
        width: 19%;
        height: 37.7%;
    }

    @media (max-width: 767px) {
        padding: 18% 0 17%;

        &::before {
            width: 30%;
        }
        &::after {
            left: -12.6%;
            bottom: -9%;
            width: 32%;
            height: 17.7%;
        }
    }

    .section-tit_ja {
        font-size: clamp(0.813rem, 0.605rem + 0.85vw, 1.625rem);
        letter-spacing: .08em;
        color: var(--main-color01);

        &::before {
            background-color: var(--design-color02);
        }
    }

    .section-tit_en {
        color: var(--design-color02);
        margin-bottom: 2.3em;
    }

    .inner {
        width: min(90%, 1365px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        @media (max-width: 767px) {
            width: 89%;
            flex-flow: column;
            row-gap: 2.1em;
            margin: 1.4em auto 0;
        }

        .about-img {
            width: 50%;

            @media (max-width: 959px) {
                width: 45%;
            }

            @media (max-width: 767px) {
                width: 100%;
            }
        }
    }
    .text-box {
        width: 45%;
        font-family: var(--font-ja-gothic);

        @media (max-width: 959px) {
            width: 49.3%;
        }

        @media (max-width: 767px) {
            width: 100%;
        }

        .tit {
            font-family: var(--font-bold);
            font-size: clamp(1.125rem, 0.902rem + 0.92vw, 2rem);
            letter-spacing: .1em;
            line-height: 1.8em;
        }

        .txt {
            font-weight: 500;
            font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1.063rem);
            line-height: 1.9em;
            margin-top: 2em;

            @media (max-width: 1200px) {
                margin-top: 3em;
            }

            @media (max-width: 959px) {
                margin-top: 2em;
            }
        }
    }
}



/*========================================================
    #feature
==========================================================*/
.feature-wrap {
    padding: 6.5% 0 10%;
    background-color: var(--main-color01);

    @media (max-width: 767px) {
        padding: 18% 0 26%;
    }

    .section-tit_ja {
        font-size: clamp(1rem, 0.793rem + 0.85vw, 1.813rem);
        color: #fff;

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

    .inner {
        width: min(90%, 1298px);
        margin: 0 auto;
        display: flex;
        column-gap: 1.6em;
        padding-top: 6%;

        @media (max-width: 767px) {
            width: 60%;
            flex-flow: column;
            row-gap: 1em;
            padding-top: 16%;
        }

        .block {
            position: relative;

            .txt {
                position: absolute;
                left: 50%;
                bottom: 2.2em;
                transform: translateX(-50%);
                font-family: var(--font-ja-gothic);
                font-size: clamp(0.888rem, 0.716rem + 0.71vw, 1.563rem);
                font-weight: 700;
                letter-spacing: .08em;
                white-space: nowrap;
            }
        }
    }
}




/*========================================================
    #info
==========================================================*/
.info-wrap {
    background: url(../img/top/info-bg.jpg) no-repeat center center / cover;
    padding: 11% 0 8%;

    @media (max-width: 767px) {
        padding: 17% 0 24%;
    }

    .inner {
        width: min(80%,1298px);
        margin: 0 auto;
        background-color: #fff;
        padding: 9% 6% 11%;

        .tit-box {
            .section-title {
                font-family: var(--font-ja-mincho);
                font-size: clamp(1.375rem, 1.12rem + 1.05vw, 2.375rem);
                font-weight: 600;
                letter-spacing: .2em;
            }

            .section-title_sub {
                font-family: var(--font-ja-gothic);
                font-size: clamp(0.563rem, 0.451rem + 0.46vw, 1rem);
                letter-spacing: .08em;
                margin: 1.75em auto 6.7em 0;
            }
        }

        @media (max-width: 767px) {
            padding: 14% 5% 11%;

            .tit-box {
                margin-left: 4.3%;

                .section-title_sub {
                    margin: 1.3em 0 6.3em;

                }
            }
        }
    }
}

.info-container {
    width: 82%;
    margin: 0 auto;

    dl {
        display: flex;
        flex-wrap: wrap;
        border-bottom: #d3d3d3 solid 1px;
        padding: min(6%, 42px) 0;
        padding-left: 10px;
    }

    dt,
    dd {
        position: relative;
        font-family: var(--font-ja-gothic);
        color: var(--design-color01);

        @media (max-width: 767px) {

            &.two-line {
                line-height: 1.42em;
                display: grid;
                place-items: center start;
            }
        }
    }

    dt {
        width: 20%;
        font-size: clamp(0.813rem, 0.669rem + 0.59vw, 1.375rem);
        font-weight: 700;
        letter-spacing: .075em;
        line-height: 1.5em;
    }

    dd {
        width: 80%;
        font-size: clamp(0.875rem, 0.748rem + 0.52vw, 1.375rem);
        font-weight: 500;
        letter-spacing: .04em;
        line-height: 1.7em;
    }

    @media (max-width: 767px) {
        width: 100%;

        dt {
            width: 32%;
        }

        dd {
            width: 68%;
        }
    }
}




/*========================================================
    #contact
==========================================================*/
.contact-wrap {
    padding: 7% 0;

    @media (max-width: 767px) {
        padding: 13% 0 18%;
    }

    .section-tit_ja_sub {
        font-family: var(--font-ja-gothic);
        font-weight: 700;
        letter-spacing: .08em;
        text-align: center;
        font-size: clamp(0.813rem, 0.685rem + 0.52vw, 1.313rem);
        line-height: 1.6em;
        color: var(--main-color01);
        margin-bottom: 1.2em;

        @media (max-width: 767px) {
            margin-bottom: 2.2em;
        }
    }

    .section-tit_en {
        color: var(--font-color02);
        margin: 0;
    }

    .inner {
        padding-top: 2.5%;
        width: min(91%, 1135px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        @media (max-width: 959px) {
            padding-top: 14%;
            flex-flow: column;
        }

        .btn-box {
            width: 70%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            @media (max-width: 767px) {
                width: 100%;
                flex-flow: column;
            }
        }

        .btn {
            background-color: var(--main-color01);
            border-radius: 100vh;
        }

        .tel {
            padding: 0 1.2em;
            height: clamp(4.375rem, 3.897rem + 1.96vw, 6.25rem);
            font-family: var(--font-ja-mincho);
            font-size: clamp(1.625rem, 1.275rem + 1.44vw, 3rem);
            color: #fff;
            display: flex;
            align-items: center;


            .sub {
                font-family: var(--font-ja-gothic);
                font-size: 18px;
                margin-right: 1em;
            }

            @media (max-width: 767px) {
                grid-column: span 2 / span 2;
            }
        }

        .sns {
            display: flex;
            gap: 26px;

            @media (max-width: 767px) {
                margin-top: 20px;
                justify-content: center;
                gap: 10px;
            }

            .btn {
                width: clamp(4.375rem, 3.897rem + 1.96vw, 6.25rem);
                aspect-ratio: 1 / 1;
                position: relative;

                img {
                    width: 35px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .sns-name {
                    position: absolute;
                    left: 50%;
                    bottom: -1.3em;
                    transform: translateX(-50%);
                    font-family: var(--font-en-gothic);
                    font-size: clamp(0.813rem, 0.749rem + 0.26vw, 1.063rem);
                    font-weight: 500;
                    color: var(--main-color01);
                }
            }
        }


        .txt {
            font-family: var(--font-ja-gothic);
            font-weight: 500;
            font-size: clamp(0.75rem, 0.654rem + 0.39vw, 1.125rem);
            letter-spacing: .08em;
            line-height: 1.6em;
            color: var(--main-color01);

            @media (max-width: 959px) {
                margin-top: 3em;
                text-align: center;
            }

            @media (min-width: 768px) and (max-width: 959px) {
                br {
                    display: none;
                }
            }
        }
    }
}


/*========================================================
    Google-map
==========================================================*/
.map-wrap {
    height: clamp(22.188rem, 20.706rem + 6.08vw, 28rem);
}


/*========================================================
    #footer
==========================================================*/
.footer-wrap {
    background: url(../img/top/footer-bg.jpg) no-repeat center center / cover;
    background-color: rgba(0, 0, 0, 0.7);
    background-blend-mode: overlay;
    padding: 4.6em 0 9.6em;

    @media (max-width: 767px) {
        padding: 2.8em 0 3.3em;
        background: url(../img/top/footer-bg_sp.jpg) no-repeat center center / cover;
        background-color: rgba(0, 0, 0, 0.7);
        background-blend-mode: overlay;    
    }

    .inner {
        width: min(90%, 1300px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        @media (max-width: 767px) {
            width: 80%;
            flex-flow: column;
            row-gap: 3em;

            .footer-nav {
                display: inline-block;
                margin: 0 auto;
            }
        }
    }

    .logo {
        width: clamp(13.125rem, 12.01rem + 4.58vw, 17.5rem);
        margin-bottom: 1.6em;
    }

    .text-box {
        font-family: var(--font-ja-gothic);
        font-size: clamp(0.938rem, 0.858rem + 0.33vw, 1.25rem);
        font-weight: 500;
        letter-spacing: .1em;
        line-height: 1.75em;
        color: #fff;

        .time {
            margin-top: 1.38em;
        }

        a {
            display: inline-block;
            color: #fff;
        }

        .add {
            .br {
                @media  (min-width: 1130px) {
                    display: none;
                }
            }
        }

        .sns {
            margin-top: 21px;
            display: flex;
            align-items: center;
            gap: 10px;

            a {
                width: 30px;
            }
        }
    }

    .footer-nav {
        @media (max-width: 767px) {
            display: inline-block;
            margin: 0 auto;
        }

        .footer-menu {
            font-size: clamp(1.188rem, 1.156rem + 0.13vw, 1.313rem);

            @media (min-width: 768px) and (max-width: 959px) {
                font-size: clamp(0.875rem, 0.763rem + 0.46vw, 1.313rem);
                column-gap: .8em;
            }

            a {
                color: #fff;
            }
        }
    }
}


/*  Copy
==========================================================*/
.footer-copy {
    display: block;
    font-family: var(--font-ja-gothic);
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    padding: .8em 0;
    background-color: #ddd;

    @media (max-width: 767px) {
        margin-bottom: clamp(3.15rem, -0.098rem + 16.24vw, 7.688rem);
    }
}


/*  mobile-nav
==========================================================*/
@media (max-width: 767px) {
    .mobile-nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: var(--design-color03);
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        z-index: 8;

        li {

            &:not(:first-child) {
                border-left: 1px solid #000;
            }

            a {
                display: block;
                width: min(100%, 153px);
                height: 100%;
            }
        }
    }
}







/*  About-Page
==========================================================*/


/*  #header
==========================================================*/

.about_header {
    position: sticky;
    background-color: #fff;

    &.change-color {
        background-color: #fff;
    }

    @media (max-width: 959px) {
        position: static;

        .inner {
            padding: 3vw 0;
        }
    }

    @media (max-width: 590px) {

        .inner {
            padding: 4vw 0;
        }
    }

    .header_menu {
        li a:not(.contact-link) {
            color: var(--main-color01);
        }
    }
}


/* mv */
.works-mv {
    height: clamp(9.5rem, 5.931rem + 14.64vw, 23.5rem);
    position: relative;

    &::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);

    }

    img {
        height: 100%;
        object-fit: cover;
    }

    @media (max-width: 767px) {
        object-position: bottom;
    }
}


/*  #works
==========================================================*/
.works-wrap {
    padding: 7% 0 16%;
    background-color: #f4f4f4;
    position: relative;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/works/works-bg.png);
        width: min(30%, 460px);
        aspect-ratio: 92 / 91;
        top: -1px;
        right: 0;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .section-tit_ja {
        font-family: var(--font-ja-gothic);
        font-size: clamp(0.813rem, 0.605rem + 0.85vw, 1.625rem);
        font-weight: 500;
        letter-spacing: .08em;
        color: var(--main-color01);

        &::before {
            background-color: var(--font-color01);
        }
    }

    .section-tit_en {
        color: var(--font-color01);

        @media (max-width: 767px) {
            margin-bottom: 0;
        }
    }

    .sns-more {
        padding: 50px 0 0 0;

        .sns-inner {
            padding: 4% 0;
        }
    }

    .inner {
        width: min(90%, 1418px);
        margin: 0 auto;
        padding-top: min(17.8%, 75px);

        @media (max-width: 959px) {
            width: 90%;
        }
    }
}

.service-box {
    &:nth-of-type(n+2) {
        margin-top: 18%;
    }

    @media (max-width: 767px) {
        &:nth-of-type(n+2) {
            margin-top: 37%;
        }
    }

    .num {
        display: inline-flex;
        align-items: center;
        font-family: var(--font-en-gothic);
        font-weight: 400;
        font-size: clamp(0.5rem, 0.325rem + 0.72vw, 1.188rem);
        color: var(--main-color01);
        margin-bottom: 1.3em;
        padding-left: 8px;

        span {
            display: flex;
            align-items: center;
            font-size: clamp(0.438rem, 0.294rem + 0.59vw, 1rem);
            letter-spacing: .1em;

            &::before {
                content: "";
                width: clamp(2.375rem, 1.626rem + 3.07vw, 5.313rem);
                height: 1px;
                display: block;
                margin: 0 .7em;
                background-color: var(--main-color01);
            }
        }

        @media (max-width: 959px) {
            padding: 0;
        }
    }

    .service-type {
        font-family: var(--font-ja-mincho);
        font-size: clamp(1.375rem, 1.04rem + 1.37vw, 2.688rem);
        color: var(--main-color01);
        font-weight: 900;
        letter-spacing: .1em;
        padding: 0 0 0.72em 8px;
        margin-bottom: 3.52em;
        position: relative;

        &::before {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: var(--main-color01);
        }

        @media (max-width: 959px) {
            padding-left: 0;

            &::before {
                width: 100vw;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}

.works-box {
    width: min(95%, 1252px);
    margin: 0 auto;

    &:nth-of-type(n+2) {
        margin-top: 7.8%;
    }

    @media (max-width: 767px) {
        &:nth-of-type(n+2) {
            margin-top: 18%;
        }
    }
}

.box-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    @media (max-width: 767px) {
        flex-flow: column;
    }

    .img {
        width: min(47%, 520px);
        position: relative;

        @media (max-width: 767px) {
            width: 100%;
        }

        .item {
            width: 48.6%;

            .tag {
                position: absolute;
                bottom: 0;
                left: 0;
                font-family: var(--font-en-gothic);
                font-size: clamp(0.625rem, 0.402rem + 0.92vw, 1.5rem);
                color: white;
                padding: .4em  .5em .3em;
                background-color: #030000;
            }
        }

        .swiper-pagination {
            text-align: right;
            top: auto !important;
            left: auto !important;
            right: 0 !important;
            bottom: -18px !important;
            font-size: 11px;
            color: #000;

            @media (max-width: 767px) {
                bottom: -16px !important;
            }
        }

        /* 現在のスライド番号 */
        .swiper-pagination-current,
        .swiper-pagination-total {
            padding: 0 .5em;
        }

        .swiper-button-prev,
        .swiper-button-next {
            width: clamp(1.25rem, 1.091rem + 0.65vw, 1.875rem);
            height: clamp(1.25rem, 1.091rem + 0.65vw, 1.875rem);

            &::after {
                content: "";
                background-image: url(../img/works/swiper-btn.png);
                background-size: contain;
                background-repeat: no-repeat;
                width: 100%;
                height: 100%;
            }

            &.swiper-button-prev {
                left: -30px !important;

                @media (max-width: 767px) {
                    left: -20px !important;
                }
            }

            &.swiper-button-next {
                right: -30px !important;

                &::after {
                    transform: scale(-1, 1);
                }

                @media (max-width: 767px) {
                    right: -20px !important;
                }
            }
        }

    }

    .text-box {
        width: min(48%, 597px);

        @media (max-width: 767px) {
            width: 100%;
            margin-top: 10%;
        }

        .works-tit {
            font-family: var(--font-ja-gothic);
            font-size: clamp(1.125rem, 0.87rem + 1.05vw, 2.125rem);
            letter-spacing: .04em;
            font-weight: 500;
            margin-bottom: 2em;
            margin-left: -0.5em;
        }

        .part {
            display: flex;
            align-items: center;
            font-family: var(--font-ja-gothic);
            font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.5rem);
            margin-bottom: 1em;

            @media (min-width: 1340px) {
                white-space: nowrap;
            }

            span {
                font-size: clamp(0.75rem, 0.718rem + 0.13vw, 0.875rem);
                font-weight: 400;
                color: #fff;
                background-color: var(--main-color01);
                border-radius: 100vh;
                padding: .5em .8em;
                margin-right: 1em;
                white-space: nowrap;

                @media (max-width: 767px) {
                    margin-right: 0.3em;
                }
            }
        }

        .txt {
            font-family: var(--font-ja-gothic);
            font-size: clamp(0.75rem, 0.559rem + 0.78vw, 1.5rem);
            font-weight: 400;
            line-height: 1.3em;
        }
    }

}





/*========================================================
    soon Page
==========================================================*/
.soon-wrap {
    background-color: var(--design-color01);

    .soon-img {
        width: 100vw;
        height: 448px;
        overflow: hidden;

        @media (max-width: 767px) {
            height: 200px;
        }

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

    .inner {
        text-align: center;
        padding: 10% 0;

        .tit {
            font-family: var(--font-en-gothic);
            font-size: clamp(2.344rem, 0.923rem + 7.1vw, 6.25rem);
            color: #fff;
            font-weight: 500;
        }

        .txt {
            margin-top: 1em;
            font-family: var(--font-ja-gothic);
            font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
            color: #fff;
            line-height: 1.4em;
        }
    }
}


/*========================================================
    アニメーション
==========================================================*/

/* .main-tit */
.clip_main {
    --clip01: 125%;
    --clip02: 100%;
    clip-path: polygon(0 0, var(--clip01) 0, var(--clip02) 100%, 0% 100%);
}

/* .section-tit */
.clip_sec {
    --clip: 0%;
    -webkit-clip-path: inset(0 var(--clip) 0 0);
    clip-path: inset(0 var(--clip) 0 0);

    --position: -50%;
    width: fit-content;
    position: relative;
    left: 50%;
    transform: translateX(var(--position));
}



/* .num */
.clipNum {
    --clip: 0%;
    -webkit-clip-path: inset(0 var(--clip) 0 0);
    clip-path: inset(0 var(--clip) 0 0);
}

/* .service-name */
.lineClip {
    --lineClip: 70.7%;

    &::before {
        -webkit-clip-path: circle(var(--lineClip) at 50% 50%);
        clip-path: circle(var(--lineClip) at 50% 50%);
    }
}

/* item画像 */
.imgClip {
    --clip01: 100%;
    --clip02: 150%;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 100% 100%);
    clip-path: polygon(-30px 0, var(--clip01) 0, var(--clip02) 108%, -30px 108%);
}