@charset "UTF-8";

/* * {
    outline: 1px solid rgb(35, 207, 147)
} */

html {
    font-size: 100%;
}
body {
    width: 100%;
    max-width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
/* header---------------------------- */
.hanabi-logo {
    margin-top: 5px;
    height: 70px;
    width: 200px;
    margin-left: 10px;
}
.hanabi-logo:hover {
    filter: opacity(45%);
}
.page-icon {
    padding-right: 30px;
}
.icon-nav {
    display: flex;
    flex-direction: row;
    justify-content: right;
    list-style: none;
}
.icon-nav-box {
    display: flex;
}
.icon-nav li {
    color: black;
    padding-left: 10px;
}
.icon-nav-tel {
    display: flex;
    padding-right: 8px;
}
.icon-nav-tel:hover {
    filter: opacity(45%);
}
.icon-nav-tel-phn {
    height: 30px;
    padding-right: 8px;
}
.icon-nav-num {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    color: #000000;
    /* border: 1px solid; */
}
.icon-nav-item-box {
    display: flex;
}
.icon-nav-item {
    padding-left: 5px;
}
.icon-nav-item:hover {
    filter: opacity(45%);
}
.icon-nav-ln {
    width: 30px;
}
.main-nav {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    padding-top: 24px;
    list-style: none;
}
.main-nav-h-pd {
    padding-left: 30px;
}
.main-nav a {
    color: black;
    text-decoration: none;
}
.main-nav a:hover {
    color: rgb(137, 137, 137);
}
.page-header {
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 0 2%;
}

/* footer---------------------------------------- */
.footer {
    padding-top: 40px;
}
.footer-page {
    width: 80%;
    margin: 0 auto;
}
.footer-box {
    display: flex;
}
.footer-logo {
    height: 88px;
    width: 48px;
}
.footer-logo:hover {
    filter: opacity(45%);
}
.footer-nav {
    padding-left: 30px;
}
.footer-nav-box {
    display: flex;
}
.main-nav-f {
    font-size: 12px;
    font-weight: 700;
    list-style: none;
    display: flex;
    padding-top: 24px;
}
.main-nav-f a {
    color: black;
    text-decoration: none;
}
.main-nav-f a:hover {
    color: rgb(137, 137, 137);
}
.main-nav-f-pd {
    padding-right: 25px;
}
.icon-nav-f {
    display: flex;
    list-style: none;
    padding-top: 18px;
}
.icon-nav-num-f {
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #000000;
}
.footer .icon-nav-tel-phn {
    height: 22px;
}
.footer .icon-nav-item {
    height: 20px;
}
.copy {
    font-weight: 700;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    margin: 5px 0;
}

/* main----------------------------- */

.page-wrapper {
    width: 100%;
    margin: 0 auto;
    background-color: black;
}
.page-wide {
    width: 900px;
    margin: 0 auto;
    color: white;
    padding-bottom: 100px;
}
.bg-top {
    width: 100%;
    position: relative;
}
.bg-top-text {
    color: white;
    font-family: "Noto Serif JP", serif;
    font-size: 45px;
    font-weight: 700;
    position: absolute;
    top: 75%;
    left: 10%;
}
.big-bg {
    width: 100%;
    height: 930px;
    object-fit: cover;
    background-color: gray;
}

.concept {
    width: 100%;
    margin: 0 auto;
    padding-top: 150px;
}
.concept-box {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 70px;
    padding-left: 0;
}
.concept-box-logo {
    width: 145px;
}
.concept-box-text {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.8;
    padding-top: 50px;
}
.concept-text {
    width: 62%;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 auto;
    padding-top: 50px;
    /* border: 2px solid #333; */
}

/*==================================================
スライダーのためのcss
===================================*/

.set-slide {
    margin: -5px 0;
}
.set-slide-item {
    width: 100%;/*スライダー内の画像を横幅100%に*/
    height: 240px;
    object-fit: cover;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
/* .set-slider .slick-slide {
    margin:0;
} */

/* .set-img-area {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.set-img-item {
    width: 100%;
    height: 260px;
    object-fit: cover;
    background-color: black;
} */

/* cssのみのスライドショー--------------------- */
/* .set-img-box {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.set-img-area {
  display: flex;
  animation: slide-flow 40s infinite linear 1s both;
}
.set-img-item{
  width: 300px;
  height: 300px;
  object-fit:cover;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
} */

.page-indent {
    background-color: black;
    height: 50px;
}
.info-area {
    height: 200px;
}
.info-wrapper {
    width: 450px;
    margin: 0 auto;
}
.info-title {
    padding-top: 100px;
    padding-bottom: 40px;
    text-align: center;
    font-size: 24px;
}
.info-artcl {
    height: 75px;
    padding-left: 30px;/* これはダミー */
}
.info-artcl-item {
    padding: 10px 0;
    font-size: 14px;
    color: rgb(0, 0, 0);
}
.other-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 40px;
    padding-top: 100px;
}
.other-grid-box {
    display: flex;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    height: 170px;
    padding-left: 20px;
}
.other-grid-box:hover {
    filter: opacity(75%);
}
.other-grid-box-img{
    width: 170px;
    height: 170px;
    object-fit: cover;
    background-color: gray;
}
.other-grid-left {
    width: 50%;
}
.other-grid-title {
    display: flex;
    align-items: center;
    padding-top: 15px;
}
.other-grid-title p {
    color: black;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}
.other-line {
    width: 100%;
    margin-left: 5px;
    margin-right: 5px;
    border-bottom: solid rgb(0, 0, 0) 1px;
}
.other-grid-text-box {
    display: flex;
    align-items: center;
    height: 130px;
}
.other-grid-text {
    color: black;
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
}
.recruit {
    display: flex;
    justify-content: center;
    padding-top: 100px;
}
.recruit-text {
    width: 600px;
    background-color: white;
    color: black;
    text-align: center;
}
.recruit-text:hover {
    filter: opacity(75%);
}
.recruit-text-us {
    font-size: 16px;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 10px;
}
.recruit-text-come {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 20px;
}
.order-box {
    display: flex;
    justify-content: space-between;
    padding-top: 100px;
}
.order-time-text {
    text-align: right;
}
.order-img {
    width: 430px;
    height: 320px;
    object-fit: cover;
    background-color: gray;
}
.location-area {
    width: 500px;
    margin: 0 auto;
    padding-top: 100px;
}
.location-address {
    font-size: 16px;
    padding-bottom: 20px;
}
.sp-i {
    display: none;
}
/* ここから下層ページ-------------------------------------- */
.page-title {
    background-color: black;
    height: 100px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    font-weight: 700;
}

/* 店内---------------------------------------------------------- */
.interior-exp {
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 80px;
}
.interior-img {
    width: 900px;
    height: 450px;
    object-fit: cover;
    background-color: gray;
}
.interior-text {
    padding-top: 60px;
    padding-bottom: 100px;
}
.interior-text h2 {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    padding-bottom: 20px;
}
.interior-text h3 {
    font-size: 16px;
    padding-top: 10px;
    line-height: 1.6;
}
.interior-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 30px;
    row-gap: 30px;
}
.interior-grid-img {
    width: 280px;
    height: 360px;
    object-fit: cover;
    background-color: gray;
}
.interior-grid-text {
    display: flex;
    align-items: flex-end;
}
.interior-bfree {
    display: flex;
    align-items: flex-end;
    padding-top: 60px;
}
.interior-bfree-img {
    width: 450px;
    height: 320px;
    object-fit: cover;
    background-color: gray;
}
.interior-bfree-text {
    font-size: 18px;
    padding-left: 20px;
}
.sp {
    display: none;
}
/* こだわり------------------------------------------------------ */
.premium-box {
    padding-top: 60px;
    padding-bottom: 30px;
    display: flex;
    align-items: flex-end;
}
.premium-box-img {
    width: 158px;
    height: 158px;
}
.premium-box-copy {
    font-weight: 700;
    padding-left: 24px;
}
.premium-text {
    padding-top: 20px;
    padding-bottom: 20px;
}
.premium-img {
    width: 900px;
    height: 500px;
    object-fit: cover;
    background-color: gray;
}
.bokujou-box {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    margin-bottom: 60px;
}
.bokujou-box h2 {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
}
.bokujou-box p {
    font-size: 16px;
    line-height: 1.7;
    text-align: justify;
    padding-top: 14px;
    padding-right: 30px;
}
.bokujou-box img {
    width: 450px;
    height: 300px;
    background-color: gray;
}
.kodawari-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 15px;
    padding-bottom: 20px;
}
.kodawari-grid-box {
    text-align: center;
    background-color: white;
    color: black;
    padding-bottom: 20px;
}
.kodawari-grid-title {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
}
.kodawari-grid-text {
    font-size: 16px;
    padding-top: 10px;
}
/* メニュー------------------------------------------------------ */
.menu-recom {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.7;
    padding-top: 60px;
}
.menu-recom2 {
    font-weight: 700;
    line-height: 1.7;
    padding-top: 40px;
    padding-bottom: 40px;
}
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 75px;
    row-gap: 50px;
    margin-bottom: 30px;
}
.menu-grid-item-img {
    width: 250px;
    height: 200px;
    object-fit: cover;
    background-color: gray;
}
.menu-grid-title {
    font-weight: 700;
    padding-top: 10px;
}
.menu-grid-price {
    font-size: 14px;
    padding-top: 6px;
}
.menu-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 100px;
    row-gap: 50px;
    padding-top: 100px;
    padding-bottom: 30px;
}
.menu-list-grid-item {
    width: 100%;
}
.menu-list-grid-line {
    width: 100%;
    border-bottom: 1px solid;
}
.menu-list-grid-top {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 700;
    padding: 6px;
    text-align: center;
    align-items: center;
}
.menu-list-grid-box {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}
.menu-list-grid-title{
    font-weight: 700;
}
.menu-list-grid-dot {
    width: 100%;
    border-bottom: 1px dotted;
}
.menu-list-grid-exp {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    padding-top: 2px;
    padding-bottom: 4px;
}
.menu-tax {
    font-size: 22px;
    text-align: center;
    padding: 20px;
}
/* テイクアウト------------------------------------------------------ */
.tkout-top {
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    padding-top: 65px;
    padding-bottom: 50px;
}
.tkout-logo {
    width: 730px;
    height: 533px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    background-image: url(../img/tk_logo_02.png);
    background-position: 84px 0;
}
.tkout-logo-item {
    width: 155px;
}
.tkout-logo-bnt {
    font-family: "Noto Serif JP", serif;
    font-size: 80px;
    font-weight: 700;
    color: rgb(183, 147, 94);
}
.tkout-logo-recom {
    text-decoration: underline 1px rgb(99, 97, 97);
    text-underline-offset: 6px;
    padding-top: 5px;
    line-height: 2.0;
}
.tkout-logo-vtc {
    font-family: "Noto Serif JP", serif;
    font-size: 15px;
    writing-mode: vertical-rl;
    letter-spacing: 0.15em;
    position: absolute;
    top: 60px;
    right: 32%;
}
.tkout-top2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 100px;
}
.tkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 105px;
    row-gap: 100px;
}
.tkout-grid-item-img {
    width: 230px;
    height: 145px;
    object-fit: cover;
    /* background-color: gray; */
}
.tkout-grid-title {
    font-size: 16px;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
}
.tkout-grid-price {
    font-size: 14px;
}
.tkout-grid-item-img2 {
    width: 230px;
    height: 230px;
    object-fit: cover;
    /* background-color: gray; */
}
.tkout-tax {
    font-size: 22px;
    text-align: center;
    padding: 50px;
}
.tkout-call {
    text-align: center;
}
.tkout-call-title {
    padding-top: 200px;
    padding-bottom: 30px;
}
.tkout-call-box {
    display: flex;
    justify-content: center;
}
.tkout-call-box:hover {
    filter: opacity(70%);
}
.tkout-call-icon {
    width: 50px;
    object-fit: cover;
}
.tkout-call-num {
    font-size: 40px;
    font-weight: 700;
    padding-left: 10px;
    text-decoration: none;
    color: #ffffff;
}
.tkout-call-text {
    font-size: 16px;
    padding-top: 20px;
}
/* 採用情報------------------------------------------------------ */
.recruit-page ul {
    list-style: none;
}
.recruit-title {
    font-family: "Noto Serif JP", serif;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 60px;
}
.recruit-title h2 {
    font-size: 24px;
}
.recruit-line {
    width: 900px;
    border-bottom: 1px solid;
}
.recruit-contents {
    padding: 26px 0;
    line-height: 1.8;
}
.recruit-call {
    text-align: center;
    padding-top: 90px;
}
.recruit-call-text {
    font-weight: 700;
}
.recruit-call-tel {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.recruit-call-tel:hover {
    filter: opacity(70%);
}
.recruit-call-tel-icon {
    width: 50px;
    object-fit: contain;
}
.recruit-call-tel-num {
    font-size: 40px;
    font-weight: 700;
    padding-left: 15px;
    text-decoration: none;
    color: #ffffff;
}

/* ご予約-------------------------------------------------------- */
.resorve-hot {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
}
.resorve-hot-text {
    font-weight: 700;
    padding-bottom: 30px;
}
.resorve-hot-link:hover {
    filter: opacity(70%);
}

/* ご予約について-------------------------------------------------- */
.atn-area {
    color: #ffffff;
    padding-top: 20px;
    padding-bottom: 100px;
    margin: 0 auto;
    width: 730px;
}
.atn-line {
    border-bottom: 1px solid;
    margin-bottom: 20px;
}
.atn-padding {
    padding-left: 6px;
}
.atn-ttl {
    font-size: 22px;
    margin-top: 40px;
    font-weight: bold;
}
.atn-ttl-res {
    text-align: center;
    margin-top: 120px;
    margin-bottom: 40px;
}
.atn-ttl-sub {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.7;
    margin-top: 22px;
}
.atn-ttl-sub2 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
}
.atn-area p {
    font-size: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.atn-sub {
    font-size: 20px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 8px;
}

/* 新着情報-------------------------------------------------------- */
.news {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
}

.spacer {
    margin-top: 80px; /* タイトルと文章の間に20pxの余白を追加 */
}

.news-text {
    font-weight: 700;
    padding-bottom: 30px;
}
.news-link:hover {
    filter: opacity(70%);
}

.news p {
    text-align: left; /* 文章を左寄せに */
    margin-bottom: 16px; /* 段落の間に余白を追加 */
}

.news ul {
    padding-left: 20px; /* リストの左側にスペースを追加 */
    text-align: left; /* リストのテキストも左寄せに */
}

.news li {
    margin-bottom: 8px; /* リストアイテムの間に余白を追加 */
}

/* responsive-screen----------------------------- */
@media not screen and (min-width: 768px) {
    html {
        font-size: 100%;
    }
    body {
        width: 100%;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 14px;
    }
    a {
        text-decoration: none;
    }
    img {
        max-width: 100%;
    }
    .page-header {
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    .hanabi-logo {
        margin-top: 5px;
        height: 50px;
        width: 140px;
    }
    .hanabi-logo:hover {
        filter: opacity(45%);
    }
    .page-icon .icon-nav {
        width: 100%;
    }
    /*
    .icon-nav li {
        color: black;
        padding-left: 10px;
    }*/
    .icon-nav-tel {
        padding: 20px 10px 20px 0;
    }
    /*
    .icon-nav-tel:hover {
        filter: opacity(45%);
    }*/
    /* .icon-nav-tel-phn {
        height: 50px;
        padding-right: 8px;
    } */
    
    .icon-nav-num {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
    }
       
    
    .page-icon .icon-nav-item {
        width: 40px;
        height: 40px;
        object-fit: cover;
        margin-top: 4px;
        margin-right: 10px;
    }
    /*
    .icon-nav-item:hover {
        filter: opacity(45%);
    }
    */
    .icon-nav-ln {
        width: 50px;
    }
    .main-nav {
        padding-top: 0px;
    }
    
    .openbtn {
        position: absolute;
        z-index: 9999; /*ボタンを最前面に*/
        top: 20px;
        right: 5px;
        cursor: pointer;
        width: 60px;
        height: 80px;
      }
      /*×に変化*/
    .openbtn span {
        display: inline-block;
        -webkit-transition: all 0.1s;
        transition: all 0.1s;
        position: absolute;
        top: 8px;
        height: 1px;
        border-radius: 10px;
        background-color: #1a1a1a;
        width: 50px;
    }
    .openbtn span:nth-of-type(1) {
        top: 24px;
    }
    .openbtn span:nth-of-type(2) {
        top: 52px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 32px;
        left: 0px;
        -webkit-transform: translateY(6px) rotate(-45deg);
                transform: translateY(6px) rotate(-45deg);
        width: 85%;
    }
    .openbtn.active span:nth-of-type(2) {
        top: 44px;
        left: 0px;
        -webkit-transform: translateY(-6px) rotate(45deg);
                transform: translateY(-6px) rotate(45deg);
        width: 85%;
    }
/* メニューのレイアウト */
    .main-nav-box {
        width: 80%;
        background-color: rgba(255, 255, 255, 0.990);
        position:absolute;
        z-index: 900;
        padding: 5%;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    .main-nav-logo-sp {
        display: inline-block;
        width: 70px;
        margin-bottom: 10px;
    }
    .main-nav-box .main-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: left;
    }
    .main-nav-hako {
        width: 80%;
    }
    .main-nav-line {
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid rgba(193, 193, 193, 0.957);
        padding-left: 40px;
    }
    .main-nav-sp {
        width: 100%;
    }
    .main-nav-sp .main-nav-h-pd {
        font-size: 14px;
        padding: 10px 0;
    }
    .main-nav-box .icon-nav {
        margin-top: 0;
    }
    .icon-nav {
        display: flex;
        flex-direction: column;
    }
    .icon-nav-item-box {
        display: flex;
        flex-direction: row;
    }
    .btn-hdn.hidden {
        display: none;
    }
    /* クラスが付与される前のレイアウト */
    #gnav {
        position: fixed;
        z-index: 999;
        top: 0;
        right: -120%;
        height: 100%; 
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
    /* クラスが付与された後のレイアウト */
    #gnav.list_active #gnav_list {
        position: fixed;
        z-index: 999;
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
      #gnav.list_active {
        right: 0;
    }
/* footer---------------------------------------- */
    .footer {
        padding-top: 30px;
    }
    .footer-page {
        width: 100%;
        margin: 0 auto;
    }
    .footer-box {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        padding: 0 10%;
    }
    .footer-logo {
        width: 50px;
        height: 100px;
    }
    .footer-nav {
        padding-left: 0px;
    }
    .footer-nav-box {
        flex-direction: column;
        justify-content: space-between;
    }
    .main-nav-f {
        font-size: 14px;
        font-weight: 700;
        display: flex;
        padding-top: 6px;
        list-style: none;
    }
    .main-nav-f-pd {
        padding-right: 20px;
    }
    .footer .icon-nav-box {
        flex-direction: column;
    }
    .icon-nav-f {
        display: flex;
        list-style: none;
        padding-top: 0px;
    }
    .icon-nav-num-f {
        font-size: 20px;
        font-weight: 700;
    }
    .footer .icon-nav-tel-phn {
        height: 28px;
    }
    .footer .icon-nav-item {
        width: 35px;
        height: 30px;
        margin-right: 8px;
    }
    .copy {
        font-weight: 700;
        display: flex;
        justify-content: center;
        padding-top: 30px;
        margin: 5px 0;
    }
    
    /* main----------------------------- */
    .page-wrapper {
        width: 100%;
        margin: 0 auto;
        background-color: black;
    }
    .page-wide {
        width: 90%;
        margin: 0 auto;
        color: white;
        padding-bottom: 50px;
    }
    .bg-top {
        width: 100%;
        height: 930px;
        /* position: static; */
        display: flex;
        flex-direction: column;
    }
    .bg-top-text {
        color: white;
        font-family: "Noto Serif JP", serif;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.7;
        text-align: center;
        position: static;
        padding-top: 100px;
        padding-bottom: 60px;
    }
    .big-bg {
        width: 100%;
        height: 700px;
        object-fit: cover;
        background-color: gray;
    }
    
    .concept {
        width: 90%;
        padding-top: 0;
    }
    .concept-box {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .concept-box-logo {
        margin-top: 60px;
        width: 145px;
    }
    .concept-box-text {
        font-family: "Noto Serif JP", serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.8;
        padding-top: 20px;
        padding-right: 0px; 
    }
    .concept-text {
        width: 80vw;
        font-size: 16px;
        line-height: 1.6;
        margin:0 auto;
        padding-top: 50px;
    }

    .set-slide-item {
        height: 200px;
    }
    
    .page-indent {
        background-color: black;
        height: 20px;
    }
    .info-area {
        height: 400px;
    }
    .info-wrapper {
        width: 450px;
        margin: 0 auto;
    }
    .info-title {
        padding-top: 90px;
        padding-bottom: 40px;
        text-align: center;
        font-size: 24px;
    }
    .info-artcl {
        height: 130px;
        padding-left: 30px;/* これはダミー */
    }
    .info-artcl-item {
        padding: 10px 0;
    }
    .other-grid {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 40px;
        row-gap: 30px;
        padding: 20px 5%;
    }
    .other-grid-box {
        display: flex;
        justify-content: space-between;
        background-color: rgb(255, 255, 255);
        height: 170px;
        padding-left: 20px;
    }
    .other-grid-box:hover {
        filter: opacity(75%);
    }
    .other-grid-box-img{
        width: 50%;
        height: 170px;
        object-fit: cover;
        background-color: gray;
    }
    .other-grid-left {
        width: 50%;
    }
    .other-grid-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 15px;
    }
    .other-grid-title p {
        color: black;
        font-size: 20px;
        font-weight: 700;
        white-space: nowrap;
    }
    .other-line {
        width: 85%;
        margin-left: 0;
        margin-right: 10px;
        padding-top: 10px;
        border-bottom: solid rgb(0, 0, 0) 1px;
    }
    .other-grid-text-box {
        display: flex;
        align-items: center;
        height: 100px;
    }
    .other-grid-text {
        color: black;
        font-family: "Noto Serif JP", serif;
        font-size: 16px;
        font-weight: 700;
    }
    .recruit {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 40px;
    }
    .recruit-text {
        width: 80vw;
        background-color: white;
        color: black;
        text-align: center;
    }
    .recruit-text:hover {
        filter: opacity(75%);
    }
    .recruit-text-us {
        font-size: 14px;
    }
    .recruit-text-come {
        font-family: "Noto Serif JP", serif;
        font-size: 16px;
        font-weight: 700;
    }
    .order-box {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        padding-top: 100px;
    }
    .order-time-text {
        font-size: 12px;
        text-align: right;
    }
    .order-img {
        width: 80%;
        height: 260px;
        object-fit: cover;
        background-color: gray;
        margin-bottom: 20px;
    }
    .location-area {
        width: 80%;
        margin: 0 auto;
        padding-top: 100px;
    }
    .location-address {
        font-size: 16px;
        text-align: center;
        padding-bottom: 20px;
    }
    .pc-i {
        display: none;
    }
    .sp-i {
        display: block;
        margin: 0 auto;
    }
    

    /* ご予約について-------------------------------------------------- */
    .atn-area {
        padding-top: 20px;
        padding-bottom: 80px;
        margin: 0 auto;
        width: 85%;
    }
    .atn-line {
        border-bottom: 1px solid;
        margin-bottom: 20px;
    }
    .atn-padding {
        padding-left: 4px;
    }
    .atn-ttl {
        font-size: 18px;
        margin-top: 40px;
        font-weight: bold;
        text-align: center;
    }
    .atn-ttl-sub {
        font-size: 16px;
        font-weight: bold;
        line-height: 1.7;
        margin-top: 22px;
    }
    .atn-ttl-sub2 {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
    }
    .atn-area p {
        font-size: 14px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .atn-sub {
        font-size: 16px;
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: 8px;
    }

    /* ここから下層ページ-------------------------------------- */
    .page-title {
        background-color: black;
        height: 60px;
        margin-bottom: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 20px;
        font-weight: 700;
    }
    
    /* 店内---------------------------------------------------------- */
    .interior-exp {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.7;
        text-align: center;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .interior-img {
        width: 90%;
        height: 300px;
        display: block;
        margin: 0 auto;
        object-fit: cover;
        background-color: gray;
    }
    .interior-text {
        width: 90%;
        margin: 0 auto;
        padding-top: 60px;
        padding-bottom: 100px;
    }
    .interior-text h2 {
        font-size: 18px;
        padding-bottom: 20px;
    }
    .interior-text h3 {
        font-size: 14px;
        padding-top: 10px;
        line-height: 1.7;
    }
    .interior-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 30px;
        row-gap: 30px;
    }
    .interior-grid-img {
        width: 280px;
        height: 360px;
        object-fit: cover;
        background-color: gray;
    }
    .interior-grid-text {
        display: flex;
        align-items: flex-end;
    }
    .interior-bfree {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 60px;
    }
    .interior-bfree-img {
        width: 90%;
        height: 320px;
        object-fit: cover;
        background-color: gray;
    }
    .interior-bfree-text {
        font-size: 18px;
        padding-top: 6px;
        padding-left: 0px;
        margin-bottom: 20px;
    }
    .interior-kid-img {
        width: 90%;
        height: 500px;
        object-fit: cover;
    }
    .interior-kid-text {
        font-size: 18px;
        padding-top: 6px;
    }
    /* スライドショー--------------------------------- */
    .interior-slide-sp {
        width: 90%;
        height: 400px;
        margin: 0 auto;
        /* border: 3px solid salmon; */
    }
    .slider {
        position:relative;
        z-index: 1;
        /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
        height: 100%;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    }
    /*　背景画像設定　*/
    .slider-item01 {
        background: url(../img/h_int_04.jpg);
    }
    .slider-item02 {
        background: url(../img/h_int_05.jpg);
    }
    .slider-item03 {
        background: url(../img/h_int_06.jpg);
    }
    .slider-item04 {
        background: url(../img/h_int_07.jpg);
    }
    .slider-item {
        width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
        height:400px;/*各スライダー全体の縦幅を画面の高さいっぱい（400px）にする*/
        background-repeat: no-repeat;/*背景画像をリピートしない*/
        background-position: center;/*背景画像の位置を中央に*/
        background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
    }
    /*矢印の設定*/
    /*戻る、次へ矢印の位置*/
    .slick-prev, 
    .slick-next {
        position: absolute;/*絶対配置にする*/
        z-index: 3;
        top: 180px;
        cursor: pointer;/*マウスカーソルを指マークに*/
        outline: none;/*クリックをしたら出てくる枠線を消す*/
        border-top: 2px solid #ccc;/*矢印の色*/
        border-right: 2px solid #ccc;/*矢印の色*/
        height: 25px;
        width: 25px;
    }
    .slick-prev {/*戻る矢印の位置と形状*/
        left:2.5%;
        transform: rotate(-135deg);
    }
    .slick-next {/*次へ矢印の位置と形状*/
        right:2.5%;
        transform: rotate(45deg);
    }
    
    /*ドットナビゲーションの設定*/
    .slick-dots {
      position: relative;
      z-index: 3;
        text-align:center;
      margin: -50px 0 0 0;
    }
    .slick-dots li {
        display:inline-block;
      margin:0 5px;
    }
    .slick-dots button {
        color: transparent;
        outline: none;
        width:8px;/*ドットボタンのサイズ*/
        height:8px;/*ドットボタンのサイズ*/
        display:block;
        border-radius:50%;
        background:#ccc;/*ドットボタンの色*/
    }
    .slick-dots .slick-active button{
        background:#333;/*ドットボタンの現在地表示の色*/
    }
    
    /*========= レイアウトのためのCSS ===============*/
    ul{
      margin:0;
      padding: 0;
      list-style: none;
    }
    .slide-wrapper{
      position: relative;
    }
    .interior-slide-sp {
        display: block;
    }

    /* こだわり------------------------------------------------------ */
    .premium-box {
        width: 100%;
        margin: 0 auto;
        padding-top: 60px;
        padding-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .premium-box-img {
        width: 140px;
        height: 140px;
    }
    .premium-box-copy {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.8;
        text-align: center;
        margin-top: 30px;
        padding-left: 0px;
    }
    .pc {
        display: none;
    }
    .premium-text-area {
        width: 95%;
        margin: 0 auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
    }
    .premium-text {
        width: 100%;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .premium-img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        background-color: gray;
    }
    .bokujou-rs {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 30px;
        margin-bottom: 60px;
    }
    .bokujou-rs h2 {
        font-family: "Noto Serif JP", serif;
        font-size: 20px;
        line-height: 1.6;
    }
    .bokujou-rs p {
        font-size: 14px;
        line-height: 1.5;
        text-align: justify;
        padding-top: 15px;
        padding-bottom: 20px;
        padding-right: 0px;
    }
    .bokujou-rs img {
        width: 100%;
        height: 200px;
        margin-top: 15px;
        object-fit: cover;
        background-color: gray;
    }

    .kodawari-grid {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0px;
        row-gap: 50px;
        padding-bottom: 20px;
    }
    .kodawari-grid-box {
        text-align: center;
    }
    .kodawari-grid-title {
        font-weight: 700;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .kodawari-grid-text {
        font-size: 16px;
        padding-top: 10px;
    }
    /* メニュー------------------------------------------------------ */
    .menu-recom {
        width: 85%;
        margin: 0 auto;
        font-family: "Noto Serif JP", serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.7;
        padding-top: 60px;
    }
    .menu-recom2 {
        width: 85%;
        margin: 0 auto;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.7;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .menu-grid {
        width: 80vw;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 30px;
        row-gap: 30px;
    }
    .menu-grid-item-img {
        width: 200px;
        height: 150px;
        background-color: gray;
    }
    .menu-grid-title {
        font-weight: 700;
        padding-top: 10px;
    }
    .menu-grid-price {
        font-size: 14px;
        padding-top: 6px;
    }
    .menu-list-grid {
        width: 80vw;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 100px;
        row-gap: 50px;
        padding-top: 150px;
        padding-bottom: 50px;
    }
    .menu-list-grid-item {
        width: 100%;
    }
    .menu-list-grid-line {
        width: 100%;
        border-bottom: 1px solid;
    }
    .menu-list-grid-top {
        font-family: "Noto Serif JP", serif;
        font-size: 18px;
        font-weight: 700;
        padding: 6px;
        text-align: center;
        align-items: center;
    }
    .menu-list-grid-box {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }
    .menu-list-grid-title{
        font-weight: 700;
    }
    .menu-list-grid-dot {
        width: 100%;
        border-bottom: 1px dotted;
    }
    .menu-list-grid-exp {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.6;
        padding-top: 2px;
        padding-bottom: 4px;
    }
    .menu-tax {
        font-size: 16px;
    }
    /* テイクアウト------------------------------------------------------ */
    .tkout-top {
        font-weight: 700;
        line-height: 1.8;
        text-align: center;
        padding-top: 65px;
        padding-bottom: 50px;
    }
    .tkout-logo {
        width: 90vw;
        height: 350px;
        margin: 0 auto;
        position: relative;
        text-align: center;
        background-image: url(../img/tk_logo_02.png);
        background-size: contain;
        background-position: 70px 0;
        margin-bottom: 100px;
    }
    .tkout-logo-item {
        width: 155px;
    }
    .tkout-logo-bnt {
        font-size: 80px;
        /* font-weight: 700; */
        color: rgb(183, 147, 94);
    }
    .tkout-logo-recom {
        text-decoration: underline 1px rgb(99, 97, 97);
        text-underline-offset: 6px;
        padding-top: 5px;
        line-height: 2.0;
    }
    .tkout-logo-vtc {
        font-family: "Noto Serif JP", serif;
        font-size: 15px;
        writing-mode: vertical-rl;
        letter-spacing: 0.15em;
        position: absolute;
        top: 60px;
        right: 15%;
    }
    .tkout-top2 {
        font-size: 10px;
        font-weight: 400;
        line-height: 1.7;
        text-align: center;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .tkout-grid {
        width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        row-gap: 40px;
    }
    .tkout-grid-item-img {
        width: 200px;
        height: 120px;
        object-fit: cover;
        /* background-color: gray; */
    }
    .tkout-grid-title {
        font-size: 16px;
        font-weight: 700;
        padding-top: 10px;
        padding-bottom: 6px;
    }
    .tkout-grid-price {
        font-size: 14px;
    }
    .tkout-grid-item-img2 {
        width: 160px;
        height: 160px;
        object-fit: cover;
        /* background-color: gray; */
    }
    .tkout-tax {
        font-size: 16px;
    }
    .tkout-call {
        text-align: center;
    }
    .tkout-call-title {
        padding-top: 40px;
        padding-bottom: 30px;
    }
    .tkout-call-box {
        display: flex;
        justify-content: center;
    }
    .tkout-call-box:hover {
        filter: opacity(70%);
    }
    .tkout-call-icon {
        width: 40px;
        object-fit: contain;
    }
    .tkout-call-num {
        font-size: 34px;
        font-weight: 700;
        padding-left: 10px;
    }
    .tkout-call-text {
        font-size: 16px;
        padding-top: 20px;
    }
    /* 採用情報------------------------------------------------------ */
    .recruit-page ul {
        list-style: none;
    }
    .recruit-title {
        text-align: center;
        padding-top: 50px;
        padding-bottom: 60px;
    }
    .recruit-title h2 {
        font-size: 20px;
    }
    .recruit-line {
        width: 100%;
        border-bottom: 1px solid;
    }
    .recruit-contents {
        padding: 20px 0;
        line-height: 1.8;
    }
    .recruit-call {
        text-align: center;
        padding-top: 90px;
    }
    .recruit-call-text {
        font-weight: 700;
    }
    .recruit-call-tel {
        display: flex;
        justify-content: center;
        padding-top: 20px;
    }
    .recruit-call-tel:hover {
        filter: opacity(70%);
    }
    .recruit-call-tel-icon {
        width: 40px;
        object-fit: contain;
    }
    .recruit-call-tel-num {
        font-size: 32px;
        font-weight: 700;
        padding-left: 10px;
    }
    
    /* ご予約-------------------------------------------------------- */
    .resorve-hot {
        text-align: center;
        padding-top: 100px;
    }
    .resorve-hot-text {
        font-weight: 700;
        padding-bottom: 30px;
    }
    .resorve-hot-link:hover {
        filter: opacity(70%);
    }
  }