@charset "UTF-8";

/* ============
    COMMON
============== */
:root {
    --primary-lightbrown: #DBB49D;
    --primary-brown: #360000;
    --primary-middlebrown: #B4927F;
    --primary-white: #FFF;
    --contentpaddeing: 6%;

}

html {
    font-size: 62.5%;
}

body {
    color: var(--primary-brown, #360000);
    font-family:
        "Averia Sans Libre",
        "Noto Sans JP",
        Arial,
        sans-serif;
    font-style: normal;
    line-height: 1.5;
    background-color: var(--primary-lightbrown, #DBB49D);
}

/* ============
    LOADING
============== */
#loading {
    width: 100%;
    height: 100vh;
    background-color: var(--primary-lightbrown, #DBB49D);
    transition: all 0.4s;
}

.shop_name {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.name_item {
    color: var(--primary-brown);
    font-size: 2.4rem;
    opacity: 0;
    transform: translateY(-20px);
    animation: shopname 1 1.2s ease-in-out forwards;
}

.name_item:nth-of-type(1) {
    animation-delay: 0s;
}

.name_item:nth-of-type(2) {
    animation-delay: 0.5s;
}

.name_item:nth-of-type(3) {
    animation-delay: 0.8s;
}

/* ==loading-animation== */
@keyframes shopname {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==END of loading== */

.loaded {
    display: none;
}

/* ==loaded FAIDEIN container== */
.container {
    visibility: hidden;
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

.container.open {
    visibility: visible;
    opacity: 1;
}

.no-animation .fadein {
    animation: none;
}

/* ============
    HEADER
============== */

.header__topic {
    color: var(--primary-brown);
    font-size: 2rem;
    font-weight: 700;
}

.nav__topic {
    color: var(--primary-white);
    font-size: 2rem;
    font-weight: 700;
}

.header {
    display: flex;
    width: 100%;
    padding: 10px 20px;
    justify-content: space-between;
    align-items: center;
}

.header__group {
    position: relative;
}

.header.toppage {
    position: absolute;
    top: 0;
    left: 0;
}

/* ==fixed== */
.header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    justify-content: space-between;
    background-color: var(--primary-brown);
}

.header__topic.fixed {
    color: var(--primary-white);
    transition: all 0.5s ease-in-out;
}

/* ==NAV初期表示== */

.nav {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

/* ==NAV ACTIVE表示== */
.nav.active {
    opacity: 1;
    z-index: 100;
    background-color: rgba(44, 27, 16, 0.9);
    background-image: url('/assets/images/mainIMG__SP.png');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    background-blend-mode: screen;
    pointer-events: auto;
}

.nav__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.nav__list {
    color: var(--primary-white);
    font-family: "Averia Sans Libre";
    font-size: 1.6rem;
    font-weight: 700;
    padding: 60px 20px;
}

.nav__item {
    padding-bottom: 20px;
}

.nav__item a::before {
    display: inline-block;
    content: '';
    width: 20px;
    height: 1px;
    background-color: var(--primary-white);
    transform: translateY(-5px);
    margin-right: 10px;
}

.body-no-scroll {
    overflow: hidden;
}

/* ==NAV PC表示== */
@media screen and (min-width: 769px) {

    .header {
        justify-content: flex-end;
    }

    .header__topic {
        display: none;
    }


    .nav__header {
        display: none;
    }

    .nav {
        background-color: transparent;
        width: auto;
        height: auto;
        position: relative;
        transform: translateX(0);
        z-index: 1000;
        opacity: 1;
        pointer-events: visible;
    }

    .nav__list {
        display: flex;
        padding: 10px;
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--primary-white);
    }

    .nav__item {
        padding-bottom: 0;
        margin-left: 16px;
    }

    .nav__item a::before {
        display: none;
    }

    /* ==fixed== */
    .header.fixed .nav__list {
        color: var(--primary-white);
    }

    .header__topic.fixed {
        display: block;
        transition: all 0.3s ease-in-out;
    }

}

/* ==NAVボタン== */
.nav__btn {
    width: 25px;
    height: 25px;
    display: block;
    cursor: pointer;
}

.header__btn {
    width: 30px;
    height: 23px;
    display: block;
    cursor: pointer;
    transition: opacity 0.5s ease-in-out;
}

.header__btn.active {
    display: none;
}

/* ==NAVボタン PC== */
@media screen and (min-width: 769px) {
    .header__btn {
        display: none;
    }

}

/* ============
    FADEIN
============== */
.fadein {
    transform: translate(0, 50px);
    opacity: 0;
    transition: 1.2s;
}

.fadein.animated {
    transform: translate(0, 0);
    opacity: 1;
}

/* ============
    MAIN
============== */

/* ==FIRST VIEW== */
.mainIMG__SP {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: top left;
}

.mainIMG__PC {
    display: none;
}

.topic_pc {
    display: none;
}

/* ==FIRST VIEW PC== */
@media screen and (min-width: 769px) {

    .mainIMG__SP {
        display: none;
    }

    .mainIMG__PC {
        display: block;
        width: 100%;
        height: 100vh;
        object-position: top left;
        z-index: -1;
        object-fit: cover;
    }

    .article__header {
        position: relative;
        text-align: center;
        z-index: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .topic_pc {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        color: var(--primary-white);
        font-size: 4rem;
        font-weight: 700;
        z-index: 100;
    }
}

/* ==backgroundIMG== */

.roof--index {
    position: fixed;
    top: 55px;
    left: 0;
    width: 100%;
    z-index: 9;
    display: none;
}

.roof--index.fixed {
    display: block;
    transition: all 0.8s ease-in-out;
}

.roof::after {
    content: '';
    display: block;
    width: 100%;
    height: 60px;
    background-image: url('/assets/images/roof_2-8.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    object-fit: cover;
    object-position: top;
    position: absolute;
    top: -8px;
    z-index: 1;
}

.shop_roof {
    position: relative
}

.shop_roof::after {
    content: '';
    display: block;
    width: 100%;
    height: 70px;
    background-image: url('/assets/images/shop_roof_6-8.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    object-fit: cover;
    object-position: top;
    position: absolute;
    top: -8px;
    z-index: 1;
}

@media screen and (min-width: 769px) {

    .roof::after {
        height: 120px;
    }

    .shop_roof::after {
        height: 200px;
    }
}

/* ==SECTION== */

.section {
    padding: 20px var(--contentpaddeing);
}

.section__topic {
    color: var(--primary-brown);
    font-family: "Averia Sans Libre";
    font-size: 1.6rem;
    font-weight: 700;
    width: 100px;
    border-top: 1px solid var(--primary-white);
    border-bottom: 1px solid var(--primary-white);
    padding: 10px 0;
    margin: 50px auto;
    text-align: center;
}


@media screen and (min-width: 769px) {
    .section_group {
        z-index: 10;
    }

}

/* ==SECTIONタイトル fadein== */
.section__topic.animated {
    border-top: 2px solid var(--primary-brown);
    border-bottom: 2px solid var(--primary-brown);
    width: 200px;
}

/* ==SECTIONタイトル PC表示== */
@media screen and (min-width: 769px) {
    .section__topic {
        margin: 80px auto;
        font-size: 2.4rem;
    }
}

/* ==CONSEPT== */
.section--concept {
    padding-top: 20px;
}

.concept__txt {
    color: var(--primary-brown);
    text-align: center;
    font-family: "Noto Sans Javanese";
    font-size: 1.2rem;
    line-height: 2;
}

/* ==CONCEPT PC表示== */
@media screen and (min-width: 769px) {
    .spbr {
        display: none;
    }

    .concept__txt {
        font-size: 1.6rem;
    }
}

/* ==NEWS== */

.news__list {
    background-color: var(--primary-white);
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-radius: 10px;
    border: var(--primary-middlebrown) 1px solid;
    padding: 20px 10px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), 8px 8px 16px rgba(0, 0, 0, 0.1);
    height: 200px;
    overflow: hidden;
    transition: height 0.5s ease;
    position: relative;
}

.news__txt {
    color: var(--primary-brown);
    font-family: "Noto Sans Javanese";
    font-size: 1.2rem;
    padding-top: 10px;
    border-bottom: 1px solid var(--primary-lightbrown);
}

.news__txt:first-of-type {
    padding-top: 0;
}

.news__txt:nth-last-of-type(2) {
    margin-bottom: 20px;
}

.news__txt time {
    color: var(--primary-lightbrown);
    display: block;
    padding: 5px;
}

.news__txt p {
    padding: 5px;
}

.news__txt--more {
    font-size: 1.4rem;
    pointer-events: auto;
    position: absolute;
    bottom: 5px;
    right: 20px;
}

.hidden {
    display: none;
}

/* ==NEWS PC表示== */

@media screen and (min-width: 769px) {

    .news__list {
        padding: 40px 20px;
        height: auto;
        overflow: visible;
    }

    .news__txt {
        font-size: 1.6rem;
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
    }

    .news__txt p {
        margin-left: 20px;
    }

    .news__txt--more {
        display: none;
    }

    .hidden {
        display: flex;
    }
}

/* ==GALLERY== */

.gallery__list {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}

.gallery__item img {
    width: 100%;
    border-radius: 10px;
}

.gallery__item {
    margin: 0 10px;
}

/* ==ACCESS== */

.section--access {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 40px;
}

.map {
    width: 100%;
    max-width: 1200px;
    min-height: 300px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}

/* ==ACCESS PC== */
@media screen and (min-width: 769px) {
    .map {
        height: 400px;
    }
}



/* ==SHOP== */

.section--shop {
    background-color: var(--primary-white);
    padding-top: 20px;
    position: relative;
}

.section--shop .section__topic {
    margin: 100px auto 50px;
}

.shop_img {
    width: 100%;
    border-radius: 10px;
}

.shop_topicgroup {
    padding-top: 20px;
}

.shop__topic {
    font-size: 2rem;
    font-weight: 700;
}

.shop__sub {
    vertical-align: baseline;
    margin-left: 10px;
}

.address,
.openclosed {
    font-size: 1.4rem;
    padding-top: 10px;
}

.phone {
    font-size: 1.8rem;
    padding-top: 10px;
    font-weight: 700;
}

.sns {
    display: flex;
    padding-top: 20px;
}

.sns__item {
    width: 25px;
    height: 25px;
    margin-right: 20px;
}

/* ==SHOP PC== */
@media screen and (min-width: 769px) {
    .section--shop {
        padding-bottom: 80px;
        margin-top: 100px;
    }

    .shop_img {
        width: 40%;
        max-height: 400px;
        object-fit: cover;
    }

    .shop__info {
        display: flex;
        justify-content: center;
    }

    .shop_topicgroup {
        display: block;
        margin-left: 20px;
    }

    .address,
    .openclosed {
        font-size: 1.6rem;
    }

    .sns__item {
        width: 40px;
        height: 40px;
        margin-right: 30px;
    }
}

/* ============
    FOOTER
============== */

.copyright {
    background-color: var(--primary-brown);
    color: var(--primary-white);
    text-align: center;
    font-size: 1.4rem;
    padding: 10px 0;
}

@media screen and (min-width: 769px) {
    .footer {
        z-index: 100;
        position: relative;
    }

    .copyright {
        font-size: 1.6rem;
    }
}

/* ============
    SCROLLTOP
============== */

.pagetop_container {
    position: fixed;
    bottom: 40px;
    right: 0;
    z-index: 100;
    background-color: var(--primary-white);
    border-radius: 20px 0 0 20px;
    padding: 10px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 8px 8px 16px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    display: none;
}

.arrow {
    /* margin-bottom: 10px; */
    width: 20px;
    height: 20px;
}

.pagetop {
    font-size: 1.4rem;
    text-align: center;
}