@charset "UTF-8";

/* 全体設定 */

/* * {
    margin:0;
    padding:0;
} */

html { 
    scroll-behavior: smooth; 
}

body {
    font-family: ''; /* フォント指定 */
    font-size: 15px;
    background: #eeeeee;
    /* width: 1200px;
    margin: 0 auto; */
}

/* ヘッター */
header {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    border-top: 5px solid #79a1b1;
    background: #FFFFFF;
    position: sticky;
    top: 0;
    left: 0;
    opacity: 0.95;
    z-index: 1000;
}

.logo{
    margin: auto 0 auto 10px; /* ロゴ位置調整 */
}

.rightbox {
    display: flex;
    justify-content: flex-end; /* ナビメニューを右寄せ */
    /* background-color: #d9d9e6; */
    margin-left: auto; /* これでこの要素と右側の要素が右寄せになる */
    padding: 30px;
}

.tel {
    padding: 15px 20px 0 0;
}

.tel img {
    padding: 0 30px 0 0;
}

.nav ul {
    display: flex; /* 横並び変更 */
    list-style: none; /* リストの点を消す */
    /* padding-left: 0; 左の余白をなくす */
    padding: 25px 0 0 0;
}

.nav li {
    width: 100px;
    text-align: center;
    border-right: 1px solid #ddd;
}

.nav li:first-child {
    border-left: 1px solid #ddd;
}

/* フッター */
footer {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    font-weight: bold;
    color:#FFFFFF;
    background: #454545;
    border-bottom: 5px solid #79a1b1;
}

.information ul {
        list-style: none; /* リストの点を消す */
        padding-left: 10px; 
}

.information li {
    font-size: 12px;
}

.tp {
    padding: 10px 0 0 0;
    font-size: 16px !important;
}

.rsv {
    padding: 20px 0 0 0;
    font-size: 15px !important;
}

.sns {
    display: flex;
}

.Instagram {
    padding: 20px 30px 10px 10px;
}

.x {
    padding: 20px 30px 10px 10px;
}

/* メイン設定 */
main {
    width: 1200px;
    margin: 0 auto;
    background: #ffffff; /* 範囲判定用 */
}

.home_img {
    text-align: center;
}

.home_img img {
    display: inline-block;
}

.news {
    text-align: center;
    padding: 20px 0 40px 10px;
    position: relative; /* 基準にする */
}

.news::before {
  content: "";
  position: absolute;
  top: 10px; /* 上辺に配置 */
  left: 50%; /* 中央起点 */
  transform: translateX(-50%); /* 中央寄せ */
  width: 40px; /* 線の長さ（一部だけにする） */
  height: 3px; /* 線の太さ */
  background-color: rgb(0, 0, 0); /* 線の色 */
}

.news h2 {
        padding: 0 0 20px 0;
}

.news ul {
    list-style: none; /* リストの点を消す */
}

.concept_conteiner {
    padding:  0 0 100px 0 !important;
}

.concept_conteiner h2 {
    text-align: center;
    padding: 20px 0 20px 0px;
    position: relative; /* 基準にする */
}

.concept_conteiner h2::before {
  content: "";
  position: absolute;
  top: 10px; /* 上辺に配置 */
  left: 50%; /* 中央起点 */
  transform: translateX(-50%); /* 中央寄せ */
  width: 40px; /* 線の長さ（一部だけにする） */
  height: 3px; /* 線の太さ */
  background-color: rgb(0, 0, 0); /* 線の色 */
}

.concept {
    display: flex; /* 横並び変更 */
    width: 900px;
    background-color: rgb(227, 227, 227);
    margin: 0 auto;
}

.int {
    padding: 20px 0 0 15px;
}

.sin {
    width: 200px;
    margin: 0 0 0 auto;
}


/* 画像スクロール用CSS */
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 6);
}
.scroll-infinity__item>img {
  width: 100%;
}
.scroll-infinity {
    padding: 40px 0 0 0;
}

/* .menu {
    padding: 20px 0 0 0;
    border-top: 5px solid #79a1b1;
} */

.menu h2 {
    text-align: center;
    padding: 20px 0 20px 0px;
    position: relative; /* 基準にする */
}

.menu h2::before {
  content: "";
  position: absolute;
  top: 10px; /* 上辺に配置 */
  left: 50%; /* 中央起点 */
  transform: translateX(-50%); /* 中央寄せ */
  width: 40px; /* 線の長さ（一部だけにする） */
  height: 3px; /* 線の太さ */
  background-color: rgb(0, 0, 0); /* 線の色 */
}

/*LAUNCH*/
.lunch {
    display: flex; /* 横並び変更 */
    width: 1100px;
    background-color: rgb(227, 227, 227);
    margin: 0 auto;
}

.lunch ul {
    list-style: none; /* リストの点を消す */
    display: flex; /* 横並び変更 */
    margin: 0 50px 0 auto;
}

.l_food_name {
    padding: 30px 100px 0 0px;
}

.l_food_price {
    padding: 35px 90px 0 0;
}

/*DINNER*/
.dinner {
    display: flex; /* 横並び変更 */
    width: 1100px;
    background-color: rgb(227, 227, 227);
    margin: 0 auto;
    /* padding: 100px 0 0 0; */
}

.dinner ul {
    list-style: none; /* リストの点を消す */
    display: flex; /* 横並び変更 */
    margin: 0 auto 0 50px;
}

.d_food_name {
    padding: 30px 100px 0 30px;
}

.d_food_price {
    padding: 40px 0 0 30px;
}

/*DINNER2*/
.dinner2 {
    display: flex; /* 横並び変更 */
    width: 1100px;
    background-color: rgb(227, 227, 227);
    margin: 0 auto;
}

.dinner2 ul {
    list-style: none; /* リストの点を消す */
    display: flex; /* 横並び変更 */
    margin: 0 50px 0 auto;
}

.d2_food_name {
    padding: 30px 100px 0 0px;
}

.d2_food_price {
    padding: 35px 90px 0 0;
}


/*DRINK*/
.drk {
    display: flex; /* 横並び変更 */
    width: 1100px;
    background-color: rgb(227, 227, 227);
    margin: 0 auto;
}

.drk ul {
    list-style: none; /* リストの点を消す */
    display: flex; /* 横並び変更 */
    margin: 0 50px 0 auto;
}

.drk_name {
    padding: 30px 0 0 40px;
}

.drk_price {
    padding: 35px 70px 0 ;
}

.dish {
    font-size: 20px; /* MENU料理名称フォントサイズ */
}

/*DRINK2*/
.drk2 {
    display: flex; /* 横並び変更 */
    width: 1100px;
    background-color: rgb(227, 227, 227);
    margin: 0 auto;
    /* padding: 100px 0 0 0; */
}

.drk2 ul {
    list-style: none; /* リストの点を消す */
    display: flex; /* 横並び変更 */
    margin: 0 auto 0 50px;
}

.drk2_name {
    padding: 30px 100px 0 30px;
}

.drk2_price {
    padding: 40px 0 0 30px;
}

/*ACCESS*/
.access {
    width: 1100px;
    /* background-color: rgb(227, 227, 227); */
    margin: 0 auto;
}

.access_conteiner {
    width: 800px;
    /* background-color: rgb(227, 227, 227); */
    margin: 0 auto;
}

.access_conteiner a {
    text-decoration: none;
}

.access h2 {
    text-align: center;
    padding: 20px 0 20px 0px;
    position: relative; /* 基準にする */
}

.access h2::before {
  content: "";
  position: absolute;
  top: 10px; /* 上辺に配置 */
  left: 50%; /* 中央起点 */
  transform: translateX(-50%); /* 中央寄せ */
  width: 40px; /* 線の長さ（一部だけにする） */
  height: 3px; /* 線の太さ */
  background-color: rgb(0, 0, 0); /* 線の色 */
}

.drink img {
    display: flex; /* 横並び変更 */
    width: 900px;
    background-color: rgb(227, 227, 227);
    margin: 0 auto;
}



/*ヘッダースクロール位置調整*/
#home {
  scroll-margin-top: 124px; /* ヘッダーの高さ分だけ上に余白を作る */
}

#about {
  scroll-margin-top: 170px; /* ヘッダー+スペースの高さ分だけ上に余白を作る */
}

#menu {
  scroll-margin-top: 170px; /* ヘッダー+スペースの高さ分だけ上に余白を作る */
}

#access {
  scroll-margin-top: 170px; /* ヘッダー+スペースの高さ分だけ上に余白を作る */
}



/*ワインリスト*/
.wine {
    display: flex;
    margin: 0 auto;
    width: 800px;
}

.wine ul {
    list-style: none; /* リストの点を消す */
    padding-left: 10px; 
    text-align: left;
}

.price {
    display: flex;
    padding: 20px 0 0 0;
    margin: 0 0 0 auto;
}

.border {
    border-bottom: 2px dotted  rgb(197, 197, 197);
    padding-bottom: 9px; /* 文字と線の間の余白 */
    margin: 0 auto 20px;
    width: 1000px;
}

.wine_list {
    text-align: center;
    width: 1200px;
    padding: 20px 0 40px 10px;
    position: relative; /* 基準にする */
}

.wine_list::before {
  content: "";
  position: absolute;
  top: 10px; /* 上辺に配置 */
  left: 50%; /* 中央起点 */
  transform: translateX(-50%); /* 中央寄せ */
  width: 40px; /* 線の長さ（一部だけにする） */
  height: 3px; /* 線の太さ */
  background-color: rgb(0, 0, 0); /* 線の色 */
}

.white {
    text-align: center;
}