@charset "utf-8";

/* ======================
common
=======================*/
:root {
    --primary-white: #FCFAEE;
    --primary-gold: #DDBD87;
    --primary-red: #B8001F;
    --primary-green: #A4B89F;
    --primary-darkGreen: #6B7968;
    --primary-brown: #7E4307;
}

html {
    font-size: 62.5%;
    background-image: url(../image/background_snowSP.png);
    background-repeat: no-repeat;
    background-size: cover;
}

body {
    font-family:
        "Emblema One",
        "Zen Kaku Gothic Antique",
        "Train One",
        serif;
    font-style: normal;
    color: var(--primary-brown);
    line-height: 1.6;
}

.container {
    overflow: hidden;
}

img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* common pc */
@media screen and (min-width: 769px) {
    html {
        background-image: url(../image/background_snowLP.png);
    }
}/* pc 769px */


/* ======================
header
=======================*/
.header {
    display: flex;
    justify-content: space-between;
}

h1 {
    width: 102px;
    position: fixed;
    top: 4px;
    left: 6px;
    z-index: 99;
}

/* nav　初期表示 */
.nav {
    width: 367px;
    height: 367px;
    background-image: url(../image/part05.png), url(../image/part06.png), url(../image/background_menu.png);
    background-repeat: no-repeat;
    background-size: 149px, 171px, contain;
    background-position: left 52px bottom 57px, right 50px top 20px, 50% 50%;
    position: fixed;
    top: -85px;
    right: -360px;
    z-index: 100;
    transition: all 0.8s;
}

.nav__header {
    position: relative;
    margin: 130px 20px 0 0;
}

.nav__btn {
    content: '';
    position: absolute;
    width: 26px;
    top: -35px;
    right: 40px;
}

.nav__topic {
    color: var(--primary-gold);
    text-align: center;
    font-size: 2.8rem;
    line-height: 1.1;
    position: relative;
}

.nav__topic::before {
    content: '';
    position: absolute;
    background-image: url(../image/part_ribbon01.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 24px;
    height: 11px;
    transform: rotate(-44.826deg);
    top: 2px;
    left: 77px;
}

.brBtn {
    display: none;
}

.nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 29px 20px 0 0;
}

.nav__item {
    margin-top: 6px;
    display: flex;
    align-items: center;
}

.nav__icon {
    width: 11px;
    margin-right: 5px;
}

.nav__item a {
    color: var(--primary-white);
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.3;
}

.nav__btnLp {
    display: none;
}

/* nav表示 */
.nav.active {
    right: -50px;
}

.header__btn {
    width: 120px;
    position: fixed;
    top: -42px;
    right: -3%;
    z-index: 2;
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.25));
}

/* nav hover */
.nav__item a:hover {
    color: var(--primary-red);
}


/* header pc */
@media screen and (min-width: 769px) {
    h1 {
        width: 16.7%;
        top: 12px;
        left: 41px;
    }
    
    .nav {
        width: 746px;
        height: 746px;
        background-size: 316px, 322px, contain;
        background-position: left 120px bottom 116px,left 300px top 120px, 50% 50%;
        top: -119px;
        right: -746px;
    }

    .nav__header {
        margin: 220px 180px 0 0;
    }

    .nav__btn {
        width: 64px;
        top: -85px;
        right: -10px;
        z-index: 102;
    }
    
    .nav__btnLp {
        display: block;
    }

    .nav__btnSp {
        display: none;
    }
    
    .nav__topic {
        text-align: right;
        font-size: 7.0rem;
    }
    
    .nav__topic::before {
        width: 93px;
        height: 43px;
        top: -2px;
        left: 85px;
    }
    
    .brBtn {
        display: inline;
    }

    .nav__list {
        align-items: flex-end;
        margin: 18px 180px 0 0;
    }
    
    .nav__item {
        margin-top: 8px;
    }
    
    .nav__icon {
        width: 27px;
    }
    
    .nav__item a {
        text-align: right;
        font-size: 2.0rem;
    }

    .header__btn {
        width: 220px;
        top: -10.0%;
        right: -2%;
    }

    .nav.active {
        right: -150px;
    }
}/* pc 769px */


/* ======================
footer
=======================*/
.footer {
    height: 432px;
    background-image: url(../image/background_footerSP.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 150px;
}

.footer__part {
    height: 70px;
    position: relative;
}

.footer__part01 {
    content: '';
    position: absolute;
    width: 137px;
    top: -38px;
    left: 1px;
}

.footer__part02 {
    content: '';
    position: absolute;
    width: 43px;
    top: -10px;
    left: 55%;
}

.footer__part03 {
    content: '';
    position: absolute;
    width: 73px;
    top: -28px;
    left: 76%;
}

.footer__part01Lp {
    display: none;
}

.footer__group {
    margin: 30px 0 0 20px;
}

.footer__topic {
    color: var(--primary-gold);
    font-size: 2.8rem;
    line-height: 1.3;
}

.sns {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.sns__itemInsta {
    width: 21px;
    height: 21px;
    background-image: url(../image/icon_insta.png);
    background-size: contain;
}

.sns__itemInsta:hover {
    background-image: url(../image/icon_instaHover.png);
}

.sns__itemX {
    width: 18px;
    height: 18px;
    margin-left: 15px;
    background-image: url(../image/icon_x.png);
    background-size: contain;
}

.sns__itemX:hover {
    background-image: url(../image/icon_xHover.png);
}

.footerNav {
    margin-top: 20px;
}

.footerNav__item {
    display: flex;
    align-items: center;
}

.footerNav__item img {
    width: 18px;
}

.footerNav__item a {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-left: 5px;
}

.copy {
    color: var(--primary-gold);
    font-size: 1.2rem;
    line-height: 1.8;
    margin: 58px 0 0 15px;
}

/* footer pc */
@media screen and (min-width: 769px) {
    .footer {
        background-image: url(../image/background_footerLP.png);
        background-size: cover;
        margin-top: 300px;
    }

    .footer__part01 {
        display: none;
    }

    .footer__part01Lp {
        display: block;
        content: '';
        position: absolute;
        width: 30.2%;
        transform: rotate(12.738deg);
        top: -70px;
        left: 20px;
    }

    .footer__part02 {
        width: 12.8%;
        top: -120px;
        left: 55%;
    }
    
    .footer__part03 {
        width: 14.6%;
        top: -115px;
        left: 79%;
    }
    
    .footer__group {
        display: flex;
        padding: 0px 20px;
        align-items: center;
        justify-content: center;
        gap: 350px;
        margin: 65px 0 0 0;
        /* height: 485px; */
    }
    
    .footer__topic {
        font-size: 3.8vw;
        line-height: 1.1;
    }
    
    .sns {
        margin-top: 40px;
    }
    
    .sns__itemInsta {
        width: 35px;
        height: 35px;
    }
    
    .sns__itemX {
        width: 30px;
        height: 30px;
        margin-left: 31px;
    }
    
    .footerNav {
        margin-top: 0;
    }
    
    .footerNav__item {
        margin-top: 10px;
    }

    .footerNav__item:first-of-type {
        margin-top: 0;
    }

    .footerNav__item a {
        font-size: 1.2vw;
        line-height: 1.8;
        margin-left: 10px;
    }
    
    .copy {
        font-size: 1.0vw;
        line-height: 1.8;
        text-align: center;
        margin: 38px 0 0 0;
    }
}/* pc 769px */