@charset "utf-8";

/* index btn */
.index_btn {
    padding: 10px 13px 9px;
    border-radius: 30.5px;
    background-color: rgba(98, 76, 63, 1);
    width: 61px;
    height: 61px;
    box-shadow: 0 3px 4px 0 rgba(36, 36, 36, 0.20);
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 100;
    cursor: pointer;
}

.index_btn p {
    color: #FFFEFD;
    text-align: center;
    font-family: "Marcellus";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
}

.index_btn img {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0px auto;
}

/* article__header */
.article__header--mvSp {
    display: block;
    margin-left: auto;
    width: 94.1vw;
    max-width: 100%;
}

.article__header--mvPc {
    display: none;
}

.article__headerText {
    color: #4D3F35;
    font-family: "Noto Serif JP";
    font-size: clamp(25px, 8vw, 30px);
    font-style: normal;
    font-weight: 300;
    line-height: 35px;
    letter-spacing: 0.21rem;
    display: block;
    margin: 8px auto 0px;
    max-width: 350px;
}

.article__headerText span {
    display: block;
    text-align: right;
    font-size: clamp(21px, 6.933333333333333vw, 26px);
    letter-spacing: 0.36rem;
}

/* tab 769px */
@media screen and (min-width:769px) {
    .article__header--mvSp {
        display: none;
    }

    .article__header--mvPc {
        display: block;
        margin-left: auto;
        width: 94.8vw;
        max-width: 100%;
    }
}

/* tab 769px */

/* about */
.section__about {
    margin: 73.5px auto 0px;
}

.section__about div {
    padding: 40px 5.2% 0px;
}

.section__title--about {
    width: 100px;
    margin: 0px auto;
    position: relative;
}

.section__title--about::after {
    content: "";
    display: block;
    width: 30px;
    height: 29px;
    background: url(../images/butterfly.png) no-repeat;
    background-size: contain;
    margin-top: 0px;
    position: absolute;
    right: -21.5px;
    top: -15px;
}

.about__title {
    color: #242424;
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: clamp(13px, 4.8vw, 18px);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.18rem;
}

.about__text {
    color: #242424;
    font-family: "Noto Sans JP";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 350;
    line-height: normal;
    padding: 30px 0px 0px;
    text-align: center;
}

.about__text span {
    display: block;
    padding: 15px 0px 0px;
}

/* tab 769px */
@media screen and (min-width:769px) {
    .section__about {
        margin: 110px auto 0px;
    }

    .section__title--about {
        width: 134px;
    }

    .section__title--about::after {
        position: absolute;
        right: -20.5px;
        top: -11px;
    }
}

/* staff */
.section__title--staff {
    margin: 113.5px auto 0px;
}

.staff__contents {
    display: grid;
    gap: 7.466666666666667vw;
    grid-template-areas:
        "areaA areaB"
        "areaC areaD"
        "areaE areaF";
    padding: 0px 11.1%;
    margin-top: 40px;
}

.staff__person {
    margin: 0px auto;
}

.staff__person--1 {
    grid-area: areaA;
}

.staff__person--2 {
    grid-area: areaB;
}

.staff__person--3 {
    grid-area: areaC;
}

.staff__person--4 {
    grid-area: areaD;
}

.staff__person--5 {
    grid-area: areaE;
}

.staff__imgSp {
    display: block;
    margin: 0px auto;
}

.staff__imgPc {
    display: none;
}

.staff__position {
    width: fit-content;
    margin: 5px auto 0px;
    color: #242424;
    text-align: center;
    font-family: " Marcellus";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-bottom: 1px solid rgba(180, 160, 147, 0.80);
}

.staff__name {
    color: #242424;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 350;
    line-height: normal;
    margin: 3px auto 0px;
}

.btn--staff {
    display: block;
    width: 61.3vw;
    min-width: 230px;
    max-width: 250px;
    height: 54px;
    padding: 15px 30px;
    border-radius: 50px;
    background-color: #B4A093;
    color: #000;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 350;
    line-height: normal;
    margin: 40px auto 0px;
}

.btn--staff::after {
    content: "";
    display: inline-block;
    width: 7.1px;
    height: 13px;
    background: url(../images/arrowBtn.png) no-repeat;
    background-size: contain;
    margin-left: 10px;
}

/* products */
.section__products {
    margin: 100px auto 0px;
    padding: 79px 5.2%;
    background-color: #FCF7F0;
}

.products__imgSp {
    display: block;
    margin: 40px auto 0px;
}

.products__imgPc {
    display: none;
}

.products__title {
    color: #242424;
    font-family: "Noto Serif JP";
    font-size: clamp(17px, 5.866666666666667vw, 22px);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin-top: 15px;
}

.products__text {
    color: #242424;
    font-family: "Noto Sans JP";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 350;
    line-height: normal;
    margin-top: 10px;
    min-width: 93.86666666666667vw;
}

.btn--products {
    display: block;
    width: 61.3vw;
    min-width: 230px;
    max-width: 250px;
    height: 54px;
    padding: 15px 30px;
    border-radius: 50px;
    background-color: #B4A093;
    color: #000;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 350;
    line-height: normal;
    margin: 40px auto 0px;
}

.btn--products::after {
    content: "";
    display: inline-block;
    width: 7.1px;
    height: 13px;
    background: url(../images/arrowBtn.png) no-repeat;
    background-size: contain;
    margin-left: 10px;
}

/* access */
.section__access {
    margin: 100px auto 0px;
}

.access__map {
    width: 100%;
    margin-top: 40px;
}

.access__title {
    color: #242424;
    font-family: "Noto Sans JP";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 350;
    line-height: normal;
}

.access__list {
    padding: 15px 6.7% 0px;
}

.access__item {
    margin-top: 25px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(180, 160, 147, 0.80);
}

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

.access__item:last-of-type {
    border-bottom: none;
}

.access__detail--weekday {
    display: flex;
    gap: 10.66666666666667vw;
}

.access__title--weekday {
    color: #242424;
    font-family: "Noto Sans JP";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 350;
    line-height: normal;
}

.access__detail--weekend {
    margin-top: 12px;
    display: flex;
    gap: 6.4vw;
}

.access__title--weekend {
    color: #242424;
    font-family: "Noto Sans JP";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 350;
    line-height: normal;
}

.access__text {
    margin-top: 12px;
    color: #242424;
    font-family: "Noto Sans JP";
    font-size: clamp(11px, 4.266666666666667vw, 16px);
    font-style: normal;
    font-weight: 350;
    line-height: normal;
}

/* scroll */
.section__about {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s, transform 1s;
}

.section__about.visible {
    opacity: 1;
    transform: translateY(0px);
}

.section__staff {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s, transform 1s;
}

.section__staff.visible {
    opacity: 1;
    transform: translateY(0px);
}

.section__products {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s, transform 1s;
}

.section__products.visible {
    opacity: 1;
    transform: translateY(0px);
}

.section__access {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s, transform 1s;
}

.section__access.visible {
    opacity: 1;
    transform: translateY(0px);
}