@charset "UTF-8";
/* ==============================
article header 
=============================== */
.mainvisual {
    height: 100vh;
    width: 100%;
    background: url(../images/food.png);
    position: relative;
    background-position: 55% 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#firstView {
    height: 100vh;   /* ※非対応ブラウザ対策 */
    height: calc(var(--vh) * 100);
}

.mainvisual::after {
    position: absolute;
    content: 'お料理';
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    color: #fff;
    font-size: 1.9rem;
    letter-spacing: 0.2em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mainTopics {
    padding: 58px 8.6% ;
}

.mainTopics__name {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 2.3em; 
    letter-spacing: 0.06em;
    margin: 0 auto;
    text-align: left;
}

.mainTopics__txt {
    margin: 40px 0 auto;
    /* margin-top: 50px; */
    font-size: 1.4rem;
    line-height: 1.7em; 
    letter-spacing: 0.07em;
}

/* article header pc*/
@media screen and (min-width:769px) {
    .mainvisual {
        height: 100vh;
        width: 100%;
        /* background: url(../); */
        position: relative;
        background-position: 0 -10px;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .mainvisual::after {
        position: absolute;
        content: 'お料理';
        font-size: 4rem;
    }

    .mainTopics {
        padding: 188.5px 19.2%;
    }
    
    .wrap__box {
        text-align: center;
    }

    .mainTopics__name {
        text-align: center;
        font-size: 2.4rem;
        line-height: 2em; 
        letter-spacing: 0.08em;
    }
    
    .mainTopics__txt {
        font-size: 1.6rem;
        line-height: 2.6em; 
        letter-spacing: 0.08em;
        margin-top: 69px;
    }
}
    /* pc 769px */

/* restaurant */
.section--seiran, .section--shouhoukaku{
    padding: 0 4.8%;
}

.section--shouhoukaku {
    margin-top: 100px;
}

.txt__group {
    padding: 0 4%;
}

.restaurant__logo {
    width: 110px;
    height: 31px;
    margin: 0 auto;
}

.restaurant__txt {
    margin-top: 28px;
    font-size: 1.4rem;
    line-height: 1.42em; 
    letter-spacing: 0.07em;
}


/* restaurant__btn*/
.restaurant__wrap {
    /* text-align: center; */
    /* display: flex; */
    /* justify-content: space-between; */
    margin-top: 33px;
    margin-left: auto;
    padding: 0 29%;
}

.button3, .button4 {
    display:block;
    font-size: 1.1rem;
    line-height: 1.45em; 
    letter-spacing: 0.07em;
    color:#282828;
    margin-top:15px;
    cursor:pointer;
    position: relative;
    text-decoration: none;
}

.button3::after, .button4::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    left: 75px;    /* 位置 */
    width: 45px;    /* 長さ */
    height: 6px;
    border: none;
    border-right: 1px solid #282828;
    border-bottom: 1px solid #282828;
    transform: skew(45deg);
    transition: .3s;
}

.button3:hover::after, .button4:hover::after{
    right: 40px;
    width: 85px;
}

.restaurant__img {
    padding: 0 4%;
    margin-top: 32px;
}

.restaurant__detail {
    margin-top: 32px;
    padding: 0 4%;
}

.detail__item {
    display: flex;
    margin-top: 13.9px;
}

.detail__topic {
    font-family: Inter;
    font-size: 1.2rem;
    line-height: 1.98em; 
}

.detail__subtopic {
    font-family: Inter;
    color: #9c9c9c;
    font-size: 1.1rem;
    line-height: 1em; 
    display: inline-block;
    width: 55.4px;
    margin-right: 56.6px;
}

.detail__txt {
    font-family: Inter;
    font-size: 1.1rem;
    line-height: 1em; 
}

.food__carousel {
    display: flex;
    margin-top: 74px;
}

/* restaurant pc*/
@media screen and (min-width:769px) {
    .section--seiran, .section--shouhoukaku{
        padding: 0 8.7%;
    }
    
    .section--shouhoukaku {
        margin-top: 180px;
    }
    
    /* .seiran__group, .shouhoukaku__group {
        display: flex;
        padding: 0 6.2%;
    } */
    
    .restaurant__logo {
        width: 194px;
        height: 64px;
        margin: 0 auto;
    }

    .grid__container {
        display: grid;
        height: 476px;
        /* grid-template-columns: 653px auto; */
        grid-template-columns: 653px 381px;
        justify-content: space-between;
        align-items: center;
        grid-template-areas:
        "a b"
        "a c";
        column-gap: 150px;
        margin-top: 90px;
    }

    .txt__group {
        padding: 0 0;
        grid-area: b;
    }
    
    .restaurant__txt {
        margin-top: 0;
        font-size: 1.5rem;
        line-height: 1.86em; 
        letter-spacing: 0.06em;
    }
    
/* restaurant__btn pc*/
@media screen and (min-width:769px) {
    .restaurant__wrap {
        margin-top: 60px;
        padding: 0 0;
        margin-left: auto;
    }

    .button3, .button4 {
        display:block;
        font-size: 1.6rem;
        line-height: 1em; 
        letter-spacing: 0.05em;
        margin-top:20px;
        cursor:pointer;
        position: relative;
        text-decoration: none;
    }

    .button3::after, .button4::after{
        content: "";
        display: block;
        position: absolute;
        top: calc(50% - 5px);
        left: 120px;    /* 位置 */
        width: 60px;    /* 長さ */
        height: 6px;
        border: none;
        border-right: 1px solid #282828;
        border-bottom: 1px solid #282828;
        transform: skew(45deg);
        transition: .3s;
    }

    .button3:hover, .button4:hover {
        color: #615B54;
    }

    .button3:hover::after, .button4:hover::after{
        right: 40px;
        width: 100px;
        border-right: 1px solid #615B54;
        border-bottom: 1px solid #615B54;
    }
    
}
/* pc 769px */


    .restaurant__img {
        margin-top: 0;
        padding: 0 0;
        max-width: 653px;
        height: 476px;
        grid-area: a;
        object-fit: cover;
    }
    
    .restaurant__detail {
        margin-top: 61px;
        padding: 0 0;
        grid-area: c;
    }
    
    .detail__item {
        display: flex;
        margin-top: 13.9px;
    }
    
    .detail__topic {
        font-family: Inter;
        font-size: 1.2rem;
        line-height: 1.98em; 
    }
    
    .detail__subtopic {
        font-family: Inter;
        color: #9c9c9c;
        font-size: 1.1rem;
        line-height: 1em; 
        display: inline-block;
        width: 55.4px;
        margin-right: 56.6px;
    }
    
    .detail__txt {
        font-family: Inter;
        font-size: 1.1rem;
        line-height: 1em; 
    }
}
    

/* ==============================
slick
=============================== */
.slick-slider {
    overflow: hidden;
    margin: 70px auto 0;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.slider__item {
    margin: 0 15px;
}

.slider__item img {
    width: 100%;
    height: 180vw; 
    max-height: 400px; 
    min-height: 350px;
    object-fit: cover;
}

/* .slick-slider pc */
@media screen and (min-width:769px) {
    .slick-slider {
        margin: 115px auto 0;
        padding: 0 7.5%;
    }

    .slider__item {
        margin: 0 40px;
    }

    .slider__item img {
        width: 100%;
        height: 100vw; 
        max-height: 540px; 
        min-height:520px;
        object-fit: cover;
    }
}



/* ==============================
reservation
=============================== */
.section--reservation {
    margin-top:100px;
}

/*==========================
fadeIn
==========================*/
.fadeIn {
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.8s;
}

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