@charset "utf-8";
:root {
	--color--black: #000000;
}
.pc {
    display: inline-block;
}
.sp {
    display: none;
}
.view_pc {
    display: block;
}
.view_sp {
    display: none;
}
body {
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body {
	min-height: 100vh;
	margin: 0px;
	padding: 0px;
	background-color: #ffffff;
	scroll-behavior: smooth;
	color: #000000;
	font-family: "Hina Mincho", serif;
	text-rendering: optimizeSpeed;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
a {
    display: block;
}
.__kakugo {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}
.__worksans {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    -webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}
body.scroll-stop {
	overflow: hidden;
}
img{
    width: 100%;
    height: auto;
}
#wrap{
    width: 100%;
    height: 100%;
    background-image: url(../image/bg_image@pc.webp);
    background-size: 100% auto;
    background-position: top center;
}
    header{
        width: 100%;
        height: 130px;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 100;
    }
        .header__inner{
            width: 100%;
            height: 100%;
            margin: 0 auto;
            position: relative;
        }
            .header__logo{
                width: 121px;
                height: auto;
                position: absolute;
                top: 50px;
                left: 60px;
            }
                .header__logo_link{
                    width: 100%;
                    height: auto;
                    pointer-events: auto;
                }
                .header__logo_link.hero__logo_second{
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                }
            .header__btn_contents{
                width: fit-content;
                height: auto;
                display: flex;
                align-items: flex-start;
                column-gap: 20px;
                position: absolute;
                top: 45px;
                right: 53px;
            }
                .header__btn_contents_lang{
                    width: 140px;
                    min-width: 140px;
                    height: auto;
                    border: 1px #fff solid;
                    border-radius: 4px;
                    position: relative;
                    z-index: 99;
                    transition: 0.3s;
                }
                    .header__btn_contents_lang_heading{
                        width: 100%;
                        height: auto;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        column-gap: 8px;
                        cursor: pointer;
                        pointer-events: auto;
                        padding: 9px 24px 8px;
                    }
                        .header__btn_contents_lang_heading_txt{
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 2.2;
                            letter-spacing: 0.15em;
                            color: #FFFFFF;
                            transition: 0.3s;
                        }
                        .header__btn_contents_lang_heading_arrow{
                            width: 12px;
                            height: auto;
                            flex-shrink: 0;
                            transition: 0.3s;
                        }
                        .active .header__btn_contents_lang_heading_arrow{
                            transform: scaleY(-1);
                        }
                    .header__btn_contents_lang_contents{
                        display: none;
                        width: 100%;
                        height: auto;
                        padding: 0px 14px 10px 14px;
                        pointer-events: auto;
                    }
                        .header__btn_contents_lang_contents_link{
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 2.2;
                            letter-spacing: 0.15em;
                            color: #FFFFFF;
                            padding-left: 10px;
                            position: relative;
                            transition: 0.3s;
                            padding-left: 22px;
                        }
                        .header__btn_contents_lang_contents_link:first-of-type{
                            border-top: 1px solid #898989;
                            padding-top: 6px;
                        }
                        .header__btn_contents_lang_contents_link::before{
                            content: "";
                            width: 3px;
                            height: 3px;
                            background-color: #fff;
                            position: absolute;
                            left: 10px;
                            top: 50%;
                            transform: translate(0%, -50%);
                            border-radius: 50%;
                            transition: 0.3s;
                        }
                        .header__btn_contents_lang_contents_link:first-of-type::before{
                            top: calc(50% + 3px);
                        }
                    @media (any-hover: hover) {
                        .header__btn_contents_lang_contents_link:hover{
                            color: #FFAA00;
                        }
                        .header__btn_contents_lang_contents_link:hover::before{
                            background-color: #FFAA00;
                        }
                    }
                .hamburger{
                    display: block;
                    width: 50px;
                    height: 50px;
                    position: relative;
                    z-index: 100;
                }
                    .hbg_btn{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        padding: 0;
                        cursor: pointer;
                        pointer-events: auto;
                    }
                        .hbg_btn__inner{
                            width: 36px;
                            height: 16px;
                            position: relative;
                        }
                            .hbg_btn_icon{
                                width: 100%;
                                height: 2px;
                                background-color: #fff;
                                position: absolute;
                            }
                            .hbg_btn_icon_top{
                                top: 0;
                                left: 0;
                            }
                            .hbg_btn_icon_btm{
                                bottom: 0;
                                left: 0;
                            }
                            .open .hbg_btn_icon_top{
                                animation: open_hbg_btn_line_top 0.3s forwards;
                            }
                            .open .hbg_btn_icon_btm{
                                animation: open_hbg_btn_line_btm 0.3s forwards;
                            }
                            .close .hbg_btn_icon_top{
                                animation: close_hbg_btn_line_top 0.3s forwards;
                            }
                            .close .hbg_btn_icon_btm{
                                animation: close_hbg_btn_line_btm 0.3s forwards;
                            }
                            @keyframes open_hbg_btn_line_top {
                                0%{
                                    transform: translateY(0px) rotate(0deg);
                                }
                                60%{
                                    transform: translateY(7px) rotate(0deg);
                                }
                                100%{
                                    transform: translateY(7px) rotate(-30deg);
                                    background-color: #000;
                                }
                            }
                            @keyframes open_hbg_btn_line_btm {
                                0%{
                                    transform: translateY(0px) rotate(0deg);
                                }
                                60%{
                                    transform: translateY(-7px) rotate(0deg);
                                }
                                100%{
                                    transform: translateY(-7px) rotate(30deg);
                                    background-color: #000;
                                }
                            }
                            @keyframes close_hbg_btn_line_top {
                                0%{
                                    transform: translateY(7px) rotate(-30deg);
                                }
                                40%{
                                    transform: translateY(7px) rotate(0deg);
                                }
                                100%{
                                    transform: translateY(0px) rotate(0deg);
                                    background-color: #fff;
                                }
                            }
                            @keyframes close_hbg_btn_line_btm {
                                0%{
                                    transform: translateY(-7px) rotate(30deg);
                                }
                                40%{
                                    transform: translateY(-7px) rotate(0deg);
                                }
                                100%{
                                    transform: translateY(0px) rotate(0deg);
                                    background-color: #fff;
                                }
                            }
            .global_nav{
                display: none;
                width: 586px;
                height: 100vh;
                background-image: url(../image/nav_bg.webp);
                background-size: cover;
                background-position: top center;
                z-index: 99;
                position: absolute;
                right: 0;
                top: 0;
                pointer-events: auto;
            }
                .global_nav__inner {
                    width: 100%;
                    height: 100dvh;
                    padding: 0 0 40px;
                    overflow: auto;
                }
                    .global_nav_logo{
                        width: 176px;
                        height: auto;
                        margin: 0 auto;
                        padding: 104px 0 69px 0;
                    }
                        .global_nav_sns{
                            display: flex;
                            align-items: center;
                            column-gap: 10px;
                            width: 170px;
                            height: auto;
                            margin: 60px 64px 0 auto;
                        }
                            .global_nav_sns_link{
                                width: 50px;
                                height: auto;
                                transition: 0.3s;
                            }
                        @media (any-hover: hover) {
                            .global_nav_sns_link:hover{
                                opacity: 0.7;
                            }
                        }
                        .global_nav__contents{
                            width: 55%;
                            height: auto;
                            margin: 0 auto;
                        }
                            .global_nav_list{
                                width: 100%;
                                height: auto;
                                display: flex;
                                flex-direction: column;
                                row-gap: 36px;
                            }
                                .global_nav_item{
                                    width: 100%;
                                    height: auto;
                                }
                                    .global_nav_item a{
                                        width: 100%;
                                        height: auto;
                                        display: flex;
                                        flex-direction: column;
                                        row-gap: 10px;
                                        padding-left: 18px;
                                        font-size: clamp(20px, 1.5vw, 20px);
                                        font-weight: 400;
                                        line-height: 1;
                                        letter-spacing: 0.2em;
                                        color: #232423;
                                        border-left: 1.15px solid #232423;
                                        transition: 0.3s;
                                    }
                                @media (any-hover: hover) {
                                    .global_nav_item a:hover{
                                        opacity: 0.7;
                                    }
                                }
                                        .global_nav_item_min{
                                            font-size: clamp(13px, 1vw, 13px);
                                            font-weight: 400;
                                            line-height: 1;
                                            letter-spacing: 0.2em;
                                            color: #232423;
                                        }
/* フッター */
footer{
    width: 100%;
    height: auto;
    background-image: url(../image/footer_bg@pc.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
    .footer__inner{
        width: 80%;
        height: auto;
        margin: 0 auto;
        padding: 100px 0 123px 0;
        position: relative;
    }
        .footer__contents{
            width: 100%;
            height: auto;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            column-gap: 100px;
        }
            .footer__contents_logo{
                width: 40%;
                height: auto;
                max-width: 397px;
            }
            .footer__nav_list{
                width: 50%;
                display: flex;
                flex-wrap: wrap;
                row-gap: 30px;
            }
                .footer__nav_item{
                    width: fit-content;
                    height: auto;
                    padding: 0 33px 0 15px;
                    border-left: 1px solid #6F6F6F;
                    transition: 0.6s;
                }
            @media (any-hover: hover) {
                .footer__nav_item:hover{
                    border-left: 1px solid #fff;
                }
            }
                    .footer__nav_link{
                        display: flex;
                        flex-direction: column;
                        row-gap: 1px;
                        transition: 0.3s;
                    }
                        .footer__nav_link_main{
                            font-size: clamp(16px, 1.25vw, 16px);
                            font-weight: 400;
                            line-height: 1.5;
                            letter-spacing: 0.1em;
                            color: #FFFFFF;
                            flex: 0 0 auto;
                        }
                        .footer__nav_link_sub{
                            font-size: clamp(10px, 0.78vw, 10px);
                            font-weight: 400;
                            line-height: 2.2;
                            letter-spacing: 0.2em;
                            color: #FFFFFF;
                            flex: 0 0 auto;
                        }
            .copy{
                writing-mode: vertical-rl;
                font-size: clamp(10px, 0.78vw, 10px);
                font-weight: 400;
                line-height: 2.2;
                letter-spacing: 0.2em;
                color: #FFFFFF;
                position: absolute;
                top: 50%;
                left: 25px;
                transform: translate(0%, -50%);
            }
            .footer__totop_wrap{
                column-gap: 22px;
                position: absolute;
                bottom: 28px;
                right: 0;
            }
                .to__top{
                    padding: 13px 25px 13px 29px;
                    font-size: clamp(12px, 0.9vw, 12px);
                    font-weight: 400;
                    line-height: 1.5;
                    letter-spacing: 0.1em;
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;
                    column-gap: 10px;
                    border-radius: 4px;
                    border: 1px solid #fff;
                    transition: 0.3s;
                    cursor: pointer;
                }
            @media (any-hover: hover) {
                .to__top:hover{
                    opacity: 0.7;
                }
            }
                .to__top.view_sp{
                    display: none;
                }
                    .to__top_arrow{
                        width: 9px;
                        height: auto;
                    }
            .footer_nav_sns{
                display: flex;
                align-items: center;
                position: absolute;
                left: 0;
                bottom: 33.85px;
                column-gap: 10px;
            }
                .footer_nav_sns_link{
                    width: 50px;
                    height: auto;
                    transition: 0.3s;
                }
            @media (any-hover: hover) {
                .footer_nav_sns_link:hover{
                    opacity: 0.7;
                }
            }

/* SP ================================================== */
@media all and (max-width:820px){
.pc {
    display: none;
}
.sp {
    display: inline-block;
}
.view_pc {
    display: none;
}
.view_sp {
    display: block;
}
#wrap{
    width: 100%;
    height: 100%;
    background-image: url(../image/bg_image@sp.webp);
    background-size: 100% auto;
    background-position: top center;
}
            .header__logo{
                width: 96px;
                top: 44px;
                left: 32px;
            }
            .header__btn_contents{
                flex-direction: column-reverse;
                align-items: flex-end;
                row-gap: 3px;
                top: 34px;
                right: 30px;
            }
                .header__btn_contents_lang{
                    width: 87px;
                    height: auto;
                    border: 1px #fff solid;
                    border-radius: 4px;
                    position: relative;
                    z-index: 99;
                    transition: 0.3s;
                    min-width: auto;
                }
                    .header__btn_contents_lang_heading{
                        column-gap: 6px;
                        padding: 9px 11px 8px 14px;
                    }
                        .header__btn_contents_lang_heading_txt{
                            font-size: 10px;
                        }
                    .header__btn_contents_lang_contents{
                        display: none;
                        width: 100%;
                        height: auto;
                        padding: 0 9px 16px 9px;
                        row-gap: 10px;
                        pointer-events: auto;
                    }
                        .header__btn_contents_lang_contents_link{
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 1;
                            letter-spacing: 0.15em;
                            color: #FFFFFF;
                            padding-top: 16px;
                            padding-left: 2px;
                        }
                        .header__btn_contents_lang_contents_link:first-of-type{
                            padding-top: 20px;
                        }
                        .header__btn_contents_lang_contents_link::before{
                            display: none;
                        }
                .hamburger{
                    margin-top: 0;
                    right: -7px;
                }
            .global_nav{
                display: none;
                width: 100%;
                height: 100vh;
            }
                .global_nav__inner {
                    padding: 0 0 60px;
                    overflow: auto;
                }
                    .global_nav_logo{
                        width: 138px;
                        padding: calc((67 / 375) * 100vw) 0 calc((35 / 375) * 100vw) 0;
                    }
                        .global_nav_sns {
                            width: 210px;
                            height: auto;
                            display: flex;
                            align-items: center;
                            column-gap: calc((15 / 375) * 100vw);
                            margin: 30px auto 0;
                            padding-bottom: 30px;
                        }
                            .global_nav_sns_link{
                                width: calc((60 / 375) * 100vw);
                            }
                        .global_nav__contents{
                            width: 70%;
                            padding-bottom: calc((37 / 375) * 100vw);
                        }
                            .global_nav_list{
                                width: 100%;
                                height: auto;
                                display: flex;
                                flex-direction: column;
                                row-gap: calc((22 / 375) * 100vw);
                            }
                                .global_nav_item{
                                    width: 100%;
                                    height: auto;
                                }
                                    .global_nav_item a{
                                        width: 100%;
                                        height: auto;
                                        display: flex;
                                        flex-direction: column;
                                        row-gap: 10px;
                                        padding-left: 17px;
                                        font-size: calc((18 / 375) * 100vw);
                                        font-weight: 400;
                                        line-height: 1;
                                        letter-spacing: 0.2em;
                                        color: #232423;
                                        border-left: 1.15px solid #000;
                                        transition: 0.3s;
                                    }
                                    html[lang="en"] .global_nav_item a{
                                        letter-spacing: 0.07em;
                                    }
                                        .global_nav_item_min{
                                            font-size: calc((12 / 375) * 100vw);
                                            font-weight: 400;
                                            line-height: 1;
                                            letter-spacing: 0.2em;
                                            color: #232423;
                                        }
/* フッター */
footer{
    background-image: url(../image/footer_bg@sp.webp);
}
    .footer__inner{
        width: 84%;
        height: auto;
        margin: 0 auto;
        padding: 50px 0 181px 0;
    }
        .footer__contents{
            flex-direction: column;
            row-gap: 38px;
            align-items: center;
        }
            .footer__contents_logo{
                width: 37%;
                height: auto;
                min-width: 136px;
            }
            .footer__nav_list{
                width: 100%;
                flex-direction: column;
                row-gap: 30px;
            }
                .footer__nav_item{
                    width: fit-content;
                    height: auto;
                    padding: 0 0 0 15px;
                    border-left: 1px solid #fff;
                }
                    .footer__nav_link{
                        display: flex;
                        align-items: center;
                        flex-direction: row;
                        row-gap: 1px;
                        transition: 0.3s;
                        column-gap: 10px;
                    }
                @media (any-hover: hover) {
                    .footer__nav_link:hover{
                        opacity: 0.7;
                    }
                }
                        .footer__nav_link_main{
                            font-size: clamp(16px, 1.25vw, 16px);
                            font-weight: 400;
                            line-height: 1.5;
                            letter-spacing: 0.2em;
                            color: #FFFFFF;
                        }
                        .footer__nav_link_sub{
                            font-size: clamp(10px, 0.78vw, 10px);
                            font-weight: 400;
                            line-height: 2.2;
                            letter-spacing: 0.2em;
                            color: #FFFFFF;
                            padding-top: 2px;
                        }
            .copy{
                writing-mode: horizontal-tb;
                width: 84%;
                padding: 10px 0;
                position: absolute;
                top: unset;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 0%);
                text-align: center;
                color: #B4AFA4;
                border-top: 1px solid #B4AFA4;
            }
            .footer__totop_wrap{
                width: 84%;
                border-radius: 4px;
                overflow: hidden;
                display: block;
                position: absolute;
                bottom: 80px;
                right: 50%;
                transform: translateX(50%);
            }
            @media (any-hover: hover) {
                .to__top:hover{
                    opacity: 0.7;
                }
            }
                .to__top.view_pc{
                    display: none;
                }
                    .to__top_arrow{
                        width: 9px;
                        height: auto;
                    }
                .to__top.view_sp{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 38px;
                    height: 36px;
                    position: absolute;
                    padding: 0;
                    top: 47px;
                    right: 0;
                }
            .footer_nav_sns{
                display: flex;
                align-items: center;
                position: absolute;
                left: 50%;
                bottom: 82px;
                column-gap: 15px;
                transform: translateX(-50%);
            }
                .footer_nav_sns_link{
                    width: 60px;
                    height: auto;
                    transition: 0.3s;
                }
            @media (any-hover: hover) {
                .footer_nav_sns_link:hover{
                    opacity: 0.7;
                }
            }
}