@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

body,
header,
footer {
    background-color: #fcf5ee !important;
    font-family: 'Noto Serif JP', serif !important;

    .en-txt {
        font-family: 'Playfair Display', serif;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

h1,
.p-mainVisual__slideTitle,
.c-gnav>.menu-item,
button,
.menu-item,
.c-headLogo__link,
.p-breadcrumb__text,
.copyright {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

h1,
h2,
h3,
h4,
h5,
p,
span,
a {
    color: #666 !important;
}

.l-article {
    max-width: 100% !important;
}

.top #content {
    padding-top: 6em;
}

.p-mainVisual__slideTitle {
    font-size: 7vw;
    white-space: nowrap;
}

@media (min-width: 960px) {
    .p-fixBtnWrap {
        bottom: 5.5em;
        right: 0.5em;
    }
}

.grecaptcha-badge {
    z-index: 100;
}

.fadeIn_up {
    opacity: 0;
    transform: translate(0, 50%);
    transition: 2s;
}

.fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1;
}

.section_hr02 {
    width: 50%;
    margin: 2.5rem auto !important;
    display: block;
}

.pc_none {
    display: none;

    @media screen and (max-width: 768px) {
        display: block;
    }
}

.sp_none {
    display: block;

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

.-type-card .p-postList__item {
    margin-bottom: 2.5em;
    margin-top: 0;
    padding: 0 .5em;
    width: calc((100% - 2rem) / 3);

    @media screen and (max-width: 768px) {
        width: 100%;
    }
}

.c-postTitle__ttl,
.c-pageTitle {
    color: #fff !important;
}

.c-widget__title.-spmenu {
    color: #666;
    background: #e9e1da;
}

.c-listMenu a:hover {
    background-color: #fcf5ee !important;
}

.p-fixBtnWrap {
    @media screen and (max-width: 768px) {
        bottom: 6em;
        right: 0.5em;
    }
}

.top-wrap {
    .top-inner {
        .mscopy {
            margin: 5rem 0;

            @media screen and (max-width: 768px) {
                margin: 3rem 0;
            }

            .maincopy {
                font-size: clamp(26px, 1.526vw - -20.27px, 32px);
            }

            .maincopy,
            .subcopy {
                text-align: center;
                line-height: 3;
                margin-bottom: 2rem;

                @media screen and (max-width: 768px) {
                    line-height: 1.5;
                }

                p {
                    line-height: 3;
                }
            }
        }

        .top-content01 {
            margin: 5rem 0;

            @media screen and (max-width: 768px) {
                margin: 3rem 0;
            }

            .tc01-inner {
                margin: 2rem 0;

                .content-link {
                    display: flex;
                    gap: 2rem;
                    justify-content: center;
                    flex-wrap: wrap;

                    li {
                        list-style: none;
                        width: calc((100% - 4rem) / 3);
                        max-width: 240px;
                        text-align: center;
                        margin: 0 !important;

                        @media screen and (max-width: 768px) {
                            width: 50%;
                            max-width: 100%;
                            min-width: 320px;
                        }

                        a {
                            color: #666;
                            background: #e9e1da;
                            display: block;
                            padding: 10px;
                        }
                    }
                }
            }
        }

        .top-content02 {
            margin: 5rem 0;

            @media screen and (max-width: 768px) {
                margin: 3rem 0;
            }

            .tc02-inner {
                margin: 4rem 0;

                .tc02-flex {
                    display: flex;
                    gap: 4rem;
                    flex-wrap: wrap;

                    @media screen and (max-width: 768px) {
                        gap: 2rem;
                    }

                    .image-wrap {
                        width: calc((100% - 8rem) / 3);

                        @media screen and (max-width: 768px) {
                            width: 100%;
                        }

                        img {
                            width: 100%;
                        }
                    }

                    p {
                        display: none;
                    }
                }
            }
        }

        .top-content03 {
            margin: 5rem 0;

            @media screen and (max-width: 768px) {
                margin: 3rem 0;
            }

            .tc03-inner {
                margin: 6rem 0;

                @media screen and (max-width: 768px) {
                    margin: 3rem 0;
                }

                h2 {
                    background-color: inherit;
                    color: #666;
                    text-align: center;
                    margin-bottom: 2rem;
                    line-height: 2;

                    &::before {
                        display: none;
                    }
                }

                h4 {
                    border-left: none;
                    text-align: center;
                    margin: 2rem 0;
                }

                p {
                    text-align: center;
                }

                .tc03-text {
                    margin: 3rem 0;

                    p {
                        line-height: 3;
                    }
                }
            }
        }

        .top-content04 {
            margin: 5rem 0;

            @media screen and (max-width: 768px) {
                margin: 3rem 0;
            }

            .tc04-inner {
                margin: 4rem 0;
                border: 1px solid rgba(0, 0, 0, .1);
                padding: 2rem;

                @media screen and (max-width: 768px) {
                    margin: 3rem 0;
                }

                .tc04-read {

                    h3 {
                        padding: 0;
                        display: flex;
                        gap: 1rem;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 2rem;

                        &::before {
                            display: none;
                        }
                    }
                }

                .tc04-flex {
                    display: flex;
                    border: 1px solid rgba(0, 0, 0, .1);

                    @media screen and (max-width: 768px) {
                        flex-flow: column;
                    }

                    div {
                        width: calc(100% / 2);

                        @media screen and (max-width: 768px) {
                            width: 100%;
                            ;
                        }

                        &.tc04-image {
                            img {
                                aspect-ratio: 3 / 1;
                                height: 100%;
                                object-fit: cover;
                                display: block;
                            }
                        }

                        &.tc04-text {
                            display: flex;
                            flex-flow: column;
                            justify-content: center;
                            padding: 2rem;

                            p {
                                line-height: 2;
                            }
                        }
                    }
                }
            }
        }
    }
}

.members-wrap {
    .members-inner {
        .members-content {
            .mc01-inner {
                .mc01-frex {
                    display: flex;
                    row-gap: 4rem;
                    column-gap: 2rem;
                    flex-wrap: wrap;


                    .iframe-wrap {
                        width: calc((100% - 4rem) / 3);
                        display: flex;
                        flex-flow: column;
                        justify-content: space-between;

                        @media (768px <=width <=1024px) {
                            width: calc((100% - 2rem) / 2);
                        }

                        @media screen and (max-width: 768px) {
                            width: 100%;
                        }


                        h2 {
                            background-color: inherit;
                            color: #666;
                            text-align: center;
                            padding: 0 !important;
                            margin-bottom: 1rem;

                            @media (768px <=width <=1024px) {
                                font-size: clamp(16px, 1.9531vw - -1px, 21px);
                            }

                            &::before {
                                display: none;
                            }

                            @media screen and (min-width: 1024px) {
                                font-size: clamp(18px, 2.173vw - 4.2608px, 24px);
                            }
                        }

                        >div {
                            a {
                                img {
                                    aspect-ratio: 16/9;
                                }

                                br {
                                    display: none;
                                }
                            }
                        }

                        p {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

.works-wrap {
    .works-inner {
        .tab-contents {
            .works-content {
                .works-inner {
                    .works-flex {
                        display: flex;
                        gap: 4rem;
                        flex-wrap: wrap;

                        .tc01-contents,
                        .tc02-contents,
                        .tc03-contents {
                            width: calc((100% - 8rem) / 3);
                            position: relative;


                            @media screen and (max-width: 1024px) {
                                width: calc((100% - 4rem) / 2);
                            }

                            @media screen and (max-width: 768px) {
                                width: 100%;
                            }

                            br {
                                display: none;
                            }

                            img {
                                filter: grayscale(100%);
                                transition: filter 0.6s ease;
                                display: block;
                            }

                            span {
                                position: absolute;
                                left: 0%;
                                top: 20%;
                                font-size: 24px;
                                color: #fff;
                                transition: 0.6s;
                            }

                            &:hover {
                                img {
                                    filter: grayscale(0%);
                                }

                                span {
                                    left: 50%;
                                    top: 5%;
                                    transform: translateX(-50%);
                                }
                            }
                        }

                        p,
                        br {
                            display: none;
                        }

                    }
                }
            }
        }

        &.tab {

            .tab-buttons {
                display: flex;
                justify-content: center;
                gap: 1rem;

                br {
                    display: none;
                }
            }

            .tab-buttons button {
                cursor: pointer;
                font-size: 16px;
                border-bottom: 2px solid transparent;
                transition: all 0.3s;
                color: #666;
                background: #e9e1da;
                display: block;
                padding: 10px;
                width: calc((100% - 4rem) / 3);
                max-width: 240px;
                text-align: center;
                margin: 0 !important;
                line-height: 1.5;
            }

            .tab-buttons button:hover {
                background: #d4bca7;
            }

            .tab-buttons button.active {
                border-bottom: 2px solid #d4bca7;
                color: #666;
            }

            .tab-contents .content {
                display: none;
                padding: 4rem 0;
                animation: fadeIn 0.3s ease-in-out;
            }

            .tab-contents .content.active {
                display: block;
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }

                to {
                    opacity: 1;
                }
            }
        }
    }
}

.service-wrap {
    .service-inner {
        .service-content {
            margin: 5rem 0;

            @media screen and (max-width: 768px) {
                margin: 3rem 0;
            }

            .sc01-inner,
            .sc02-inner,
            .sc03-inner {
                h2 {

                    background-color: inherit;
                    color: #666;
                    text-align: center;
                    margin-bottom: 2rem;

                    &::before {
                        display: none;
                    }

                    @media screen and (max-width: 768px) {
                        line-height: 2;
                    }
                }
            }

            .sc01-text,
            .sc02-text,
            .sc03-text {
                p {
                    text-align: center;
                    line-height: 3;
                }
            }
        }
    }
}

.aboutus-wrap {
    max-width: 800px;
    margin: 0 auto;
    font-weight: 400 !important;

    .aboutus-inner {
        .aboutus-content {
            margin: 80px 0;

            @media screen and (max-width: 768px) {
                margin: 60px 0;
            }

            .ac01-inner,
            .ac02-inner,
            .ac03-inner {
                h2 {

                    background-color: inherit;
                    color: #666;
                    text-align: center;
                    margin-bottom: 2rem;

                    &::before {
                        display: none;
                    }
                }
            }

            .ac01-text,
            .ac02-text {
                >div {
                    margin: 4em 0;
                }

                p {
                    text-align: center;
                    line-height: 3;
                }
            }

            .ac03-text {
                table {
                    margin: 80px 0;

                    @media screen and (max-width: 768px) {
                        margin: 60px 0;
                    }

                    tr {
                        th {
                            background: inherit;
                            font-weight: 500 !important;
                            white-space: nowrap;
                        }

                        td {
                            .wpcf7-form-control-wrap {

                                input,
                                textarea {
                                    width: 100%;
                                }
                            }
                        }

                        th,
                        td {
                            border: 0px !important;
                            border-bottom: 1px solid var(--color_border--table, #dcdcdc) !important;
                            padding: 1rem !important;
                        }
                    }
                }
            }

            .ac02-image {
                display: flex;
                gap: 4rem;

                img {
                    width: 100%;
                    height: max-content;
                    position: sticky !important;
                    position: -webkit-sticky;
                    object-fit: contain;
                    top: 20%;
                }

                br {
                    display: none !important;
                }
            }

            .ac02-flex {
                display: flex;
                flex-wrap: wrap;
                gap: 2rem;

                @media screen and (max-width: 768px) {
                    flex-flow: column;
                }

                .ac02-image {
                    width: calc(30% - 2rem);

                    @media screen and (max-width: 768px) {
                        width: 100%;
                    }
                }

                .ac02-text {
                    width: calc(70% - 2rem);

                    @media screen and (max-width: 768px) {
                        width: 100%;
                    }
                }

                >p {
                    display: none;
                }
            }
        }
    }
}

.contact-wrap {
    max-width: 800px;
    margin: 0 auto;

    .contact-inner {
        .contact-text {
            text-align: center;
        }

        .contact-content {
            table {
                margin: 80px 0;

                @media screen and (max-width: 768px) {
                    margin: 60px 0;
                }

                tr {
                    th {
                        background: inherit;
                        font-weight: 500 !important;
                    }

                    td {
                        .wpcf7-form-control-wrap {

                            input,
                            textarea {
                                width: 100%;
                            }
                        }
                    }

                    th,
                    td {
                        border: 0px !important;
                        border-bottom: 1px solid var(--color_border--table, #dcdcdc) !important;
                    }
                }
            }
        }
    }

    .wpcf7-submit {
        margin: 0 auto;
        display: block;
        padding: 0.5rem 2rem;
        border-radius: 50vw;
    }
}

.page-id-3 {
    .privacy-wrap {
        h2 {
            background-color: inherit;
            color: #666;
            text-align: left;
            margin-bottom: 2rem;
            line-height: 2;
            padding-left: 0;


            &::before {
                display: none;
            }
        }

        ul {
            li {
                list-style: decimal;
            }
        }
    }
}

.l-header__bar {
    display: none;
}