@charset "UTF-8";

@media (min-width: 450px) {
    .sp {
        display: none;
    }
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Hannari", serif;
    font-weight: 400;
    line-height: 2.5;
    background-color: #260D00;
    color: #eaeaea;
    box-sizing: border-box;
}
body.no-scroll {
    overflow: hidden;
}
h1, h2, h3, h4, h5, p {
    margin: 0;
}
p {
    font-size: 1rem;
    letter-spacing: .1vw;
}
img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
}
ul {
    padding-inline-start: 0%;
}
li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    list-style: none;
}
a {
    text-decoration: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: #eaeaea;
}
section {
    width: 100%;
    margin: 0 0 40vw 0;
    position: relative;
}
.bg_img {
    opacity: 0;
}
.common-wrap {
    width: 80%;
    padding: 0;
    border: 0;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 99;
}
.clear::after {
    content: '';
    clear: both;
    display: block;
}
.en {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: .2vw;
}


/* Show Images Animation Setting */
@keyframes show-images {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes show-switching-logo {
    0% {
        opacity: 0;
    }
    100% {
        opacity: .4;
    }
}
/* ****************************************** */


/* FV Show Images Animation Trigger */
.fv .lang-switching-wrap.fv-animation {
    animation: show-images 1.5s ease-in-out;
    animation-fill-mode: both;
    animation-delay: .5s;
}
.fv .logo-wrap.fv-animation {
    animation: show-images 1.5s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 1.3s;
}
.fv .bg_img.fv-animation {
    animation: show-images 2s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 2.3s;
}
.fv .menu-container.fv-animation {
    animation: show-images 1.5s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 2.8s;
}
.fv .scroll.fv-animation {
    animation: show-images 2s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 3.3s;
}
/* ****************************************** */


/* Show images Animation Trigger */
.bg_img.active {
    animation: show-images 1s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 0s;
}
.common-wrap.active {
    animation: show-images 1.5s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 1.2s;
}
footer .logo.active {
    animation: show-images 1s ease-in-out;
    animation-fill-mode: both;
    animation-delay: .8s;
}
footer .contact-info.active {
    animation: show-images 1s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 1.2s;
}
/* ****************************************** */



/* *************************************

    LANGUAGE SWITCHING

************************************** */
.lang-switching {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: fixed;
    background-color: #260D00;
    z-index: 110;
}
.lang-switching .lang-switching-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
    position: absolute;
    top: 40%;
    z-index: 110;
    opacity: 0;
}
.lang-switching .lang-switching-wrap li {
    margin-right: 2%;
    transition: .5s;
}
.lang-switching .lang-switching-wrap li:nth-child(even) {
    transform: scaleY(.6);
}
.lang-switching .lang-switching-wrap .en:hover {
    cursor: pointer;
    opacity: .6;
    transition: .5s;
}
.lang-switching img {
    width: 35%;
    margin: -19% 0 0 0;
    opacity: 0;
}
.lang-switching img.lang-switching-animation {
    animation: show-switching-logo 3s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 0s;
}
.lang-switching .lang-switching-wrap.lang-switching-animation {
    animation: show-images 3s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 1.5s;
}
/* ****************************************** */



/* *************************************

    FIRST VIEW

************************************** */
.fv {
    position: relative;
    width: 100%;;
}
.fv .en {
    font-size: .8rem;
}
.fv .lang-switching-wrap {
    display: flex;
    align-items: center;
    margin: 4vw 0 0 18%;
    opacity: 0;
    transform-origin: top left;
    padding: 1rem 0;
}
.fv .lang-switching-wrap a {
    transition: .5s;
    position: relative;
    padding-right: 2rem;
    padding-left: 1rem;
    line-height: 1;
}
.fv .lang-switching-wrap a::after {
    content: "｜";
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transition: .5s;
    line-height: 1;
}
.fv .lang-switching-wrap a:last-of-type::after {
    display: none;
}
.fv .lang-switching-wrap .en:hover {
    cursor: pointer;
    opacity: .6;
    transition: .5s;
}
.fv .logo-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 92%;
    position: absolute;
    top: 48%;
    left: 4%;
    opacity: 0;
    z-index: 99;
}
.fv .logo-content {
    display: flex;
    align-items: center;
}
.fv .logo {
    width: 17%;
    margin-right: 6%;
}
.fv .logo-type {
    width: 10%;
}
.fv .catch {
    font-size: 1.2rem;
}
.fv .bg_img {
    opacity: 0;
}
.fv .bg_img img {
    width: 80%;
    margin: .5% 2% 1% 18%;
}
.fv .menu-container {
    float: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 6% 0 0;
    padding: 0;
    opacity: 0;
}
.fv .menu-container:hover {
    cursor: pointer;
    opacity: .6;
    transition: .5s;
}
.fv .menu-container p {
    margin: 0 1.5vw 0 0;
    padding: 0;
}
.fv .menu-container img {
    width: .8rem;
    margin: 0;
    padding: 0;
}
/* ****** スクロールコンテンツ ****** */
.fv .scroll {
    transform: rotate(90deg);
    position: absolute;
    top: 100%;
    left: -2%;
    width: 16%;
    opacity: 0;
}
.fv .scroll p {
    letter-spacing: .1vw;
}
.fv .scroll::before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #bababa;
}
.fv .scroll::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #878787;
    animation: scrollbar-moving 3s linear infinite;
    animation-play-state: running;
    transform-origin: left top;
}
/* Scroll animation setting */
@keyframes scrollbar-moving {
    0% {
        transform: scaleX(0);
    }
    40% {
        transform: scaleX(.5);
    }
    80% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(1);
    }
}
/* ****************************************** */




/* *************************************

    TAILCOAT

************************************** */
.tailcoat h2 {
    width: 40%;
    margin-bottom: 2%;
}
/* ****************************************** */



/* *************************************

    SPACE

************************************** */
.space h2 {
    width: 27%;
    margin: 0 0 2% 73%;
}
.space .common-wrap p {
    text-align: right;
}
/* ****************************************** */



/* *************************************

    COLLECTION

************************************** */
.collection h2 {
    width: 38%;
    margin-bottom: 2%;
}
/* ****************************************** */



/* *************************************

    POSTSCRIPT

************************************** */
.ps .common-wrap {
    text-align: right;
    padding-right: 2%;
    transform: translateY(-2%);
}
.ps .bg_img img {
    width: 80%;
    margin-left: 10%;
}
/* ****************************************** */



/* *************************************

    FOOTER

************************************** */
footer {
    text-align: center;
}
footer .logo {
    text-align: center;
    margin-bottom: 7vw;
    opacity: 0;
}
footer .logo img {
    width: 6%;
}
footer .contact-info {
    width: 100%;
    opacity: 0;
}
footer .contact-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 3vw 0;
    width: 100%;
}
footer .contact-wrap a {
    margin: 0;
    padding: 0;
}
footer .contact-wrap li {
    margin-right: 1%;
    padding: 0;
}
footer .contact-wrap li:nth-of-type(2) {
    padding: 0;
}
footer .contact-wrap li:last-child {
    margin-right: 0;
}
footer .contact-tel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .5s;
    white-space: nowrap;
}
footer .contact-tel:hover {
    opacity: .6;
    transition: .5s;
}
footer .contact-tel img {
    width: auto;
    height: .8rem;
    margin-right: 5%;
}
footer .contact-tel p {
    padding: 0;
}
footer .contact-insta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .5s;
    white-space: nowrap;
}
footer .contact-insta:hover {
    opacity: .6;
    transition: .5s;
}
footer .contact-insta p {
    padding: 0;
}
footer .contact-insta img {
    width: .8rem;
    margin-left: 10%;
}
footer .copy-right {
    width: 100%;
    height: 3vw;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer .copy-right p {
    font-size: .7rem;
    color: #260D00;
    letter-spacing: .1vw;
}


@media (max-width: 1024px) {
    p {
        font-size: 1.2vmax;
    }
    .en {
        font-size: 1.4vmax;
    }


    /* *************************************

        LANGUAGE SWITCHING

    ************************************** */
    .lang-switching img {
        margin: -20vmin 0 0 0;
    }
    /* ****************************************** */


    /* *************************************

        FIRST VIEW

    ************************************** */
    .fv .en {
        font-size: .9vmax;
    }
    .fv .catch {
        font-size: 1.6vmax;
    }
    .fv .menu-container img {
        width: 1vmax;
    }
    /* ****************************************** */



    /* *************************************

        POSTSCRIPT

    ************************************** */
    .ps .common-wrap {
        transform: translateY(-15%);
    }
    /* ****************************************** */



    /* *************************************

        FOOTER

    ************************************** */
    footer .contact-tel img {
        height: 1.2vmax;
    }
    footer .contact-insta img {
        width: 1.2vmax;
    }
    footer .copy-right {
        height: 4vmax;
    }
    footer .copy-right p {
        font-size: .9vmax;
    }
}
@media (max-width: 480px) {
    /* Smart Phone */
    p {
        font-size: 3.4vmin;
    }
    .en {
        font-size: 3.8vmin;
    }
    section {
        margin: 0 0 100vmin 0;
    }
    .common-wrap {
        width: 95%;
        top: 70%;
        left: 5%;
        transform: translateY(0);
    }
    /* ****************************************** */



    /* *************************************

        LANGUAGE SWITCHING

    ************************************** */
    .lang-switching img {
        margin: -30% 0 0 0;
    }
    /* ****************************************** */



    /* *************************************

        FIRST VIEW

    ************************************** */
    .fv .en {
        font-size: 3.4vmin;
        letter-spacing: .5vmin;
    }
    .fv .lang-switching-wrap {
        margin: 6vmin 0 0 20%;
    }
    .fv .lang-switching-wrap li {
        margin-right: 4%;
    }
    .fv .logo-wrap {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 92%;
        top: 38%;
        left: 6%;
    }
    .fv .logo {
        width: 14%;
        margin-right: 2%;
    }
    .fv .logo-type {
        width: 28%;
        margin: 45% 0 0 70%;
    }
    .fv .catch {
        font-size: 4vmin;
    }
    .fv .bg_img img {
        width: 76%;
        margin: .5% 0% 1% 24%;
    }
    .fv .menu-container img {
        width: 3.2vmin;
    }
    /* ****** スクロールコンテンツ ****** */
    .fv .scroll {
        top: 94%;
        left: -12%;
        width: 56%;
    }
    /* ****************************************** */




    /* *************************************

        TAILCOAT

    ************************************** */
    .tailcoat h2 {
        width: 95%;
        margin-bottom: 4%;
    }
    /* ****************************************** */



    /* *************************************

        SPACE

    ************************************** */
    .space h2 {
        width: 65%;
        margin: 0 0% 4% 30%;
    }
    .space .common-wrap p {
        margin-right: 5%;
        letter-spacing: .8vmin;
    }
    /* ****************************************** */



    /* *************************************

        COLLECTION

    ************************************** */
    .collection h2 {
        width: 91%;
        margin-bottom: 4%;
    }
    /* ****************************************** */



    /* *************************************

        POSTSCRIPT

    ************************************** */
    .ps .common-wrap {
        padding-right: 5%;
    }
    .ps .bg_img img {
        width: 100%;
        margin-bottom: 130vmin;
        margin-left: 0%;
    }
    /* ****************************************** */



    /* *************************************

        FOOTER

    ************************************** */
    footer .logo img {
        width: 17.6%;
    }
    footer .contact-wrap {
        margin: 0 0 10vmin 0;
    }
    footer .contact-wrap li {
        margin-right: 6%;
    }
    footer .contact-wrap li:nth-of-type(2) {
        margin-right: 4%;
    }
    footer .contact-tel img {
        height: 3.2vmin;
        margin-right: 9%;
    }
    footer .contact-insta img {
        width: 3.2vmin;
        margin-left: 20%;
    }
    footer .copy-right {
        height: 12vmin;
    }
    footer .copy-right p {
        font-size: 3vmin;
    }
}