@charset "UTF-8";
@import url("grid.css");

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #fff;
    text-decoration-line: none;
}
a:hover { 
    color: #999;
}

section.content{
	margin: 0 auto;
text-align:center;}

/*ヘッダー
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 0 0;
}
.header-box {
	margin-left: auto;
	margin-top: 8px;
}
.contact-button {
	padding: 1rem;
	border: 2px solid #000;
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: #f7f7f7;    
}
nav a {
    padding: 0.5rem;
}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    margin-bottom: 10px;
}
.header #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open,#close  {
    display: block;
    width: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}
    
/*メイン画像
-------------------------------------*/
.main_bk{
	position: relative;
	padding: 7vh 0 5vh 0;
	margin: 0;
	background: #1F1C1C url("../img/bk_pt.png") repeat;}
.mainimg img {
    width: 100vw;
}
.mainimg {
	padding:0;}

@media screen and (min-width: 768px){
/* PC時はメイン画像縮小 */
.mainimg {text-align:center !important;}
.mainimg img {width: 60%;}
}

.btn_area{
	background:#eae071;
	text-align: center;
	color:#4D4D4D;
	padding:10% 0;
	font-size:1.4em;
}
.btn_area p{
	margin: 0 0 5%;
    padding: 0 7%;
}
.btn_area img{}

.btn_area a img {
  -webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
       -o-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
}
.btn_area a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

/*ループ画像
-------------------------------------*/
/* 1.親スタイルリセットとペース設定 ++++++++++ */
.slider-box p, .slider-box div, .loop-box ul, .loop-box li {
  box-sizing: border-box; margin: 0 !important; padding: 0 !important;
}

/* 2.ベースBOXの設定 +++++++++++++++++++++ */
.slider-box {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%; /* 画面又は親要素に対するサイズ - 変更可 */
  margin: 8vh auto 0; /* Box外の余白 - 変更可 */
  padding: 0; /* 上端からスライダーまでの距離 - 変更可・削除可 */
}

/* 4.スライダー本体とアニメーションの基本設定 ++++++++++++++ */
.loop-box{
  position: relative;
  width: 100%;
  overflow: hidden; 
}
.loop-box, .loop-box ul {
  height: 270px; /* スライダーの高さ - 変更注意 */
}
.loop-box ul {
  position: absolute; left: 0; top: 0;
  display: flex; 
  justify-content: space-between;
  background: #000; /* スライダーの背景色 - 変更可 */
  list-style: none;
  max-width: 10000%; 
  min-width: 100%;
  width: calc(270px * 1.5 * 3); /* 画像の横幅×枚数 - 変更注意・変更可・変更注意 */
  animation: 90s linear infinite; /* アニメーション設定 - 変更可 */
}
.loop-box li {
  display: flex;
  align-items: center; 
  justify-content: center;
  color: #fff;
  width: calc(100% / 3); /* li の幅を均等にする - 削除可・変更注意 */
}
.loop-box img {
  height: auto;
  width: 100%;
}

@media screen and (max-width: 768px){
	/* スマホ時は画像小さめ */
	.slider-box {
	  margin: 2vh auto 0; /* Box外の余白 - 変更可 */
	}
	.loop-box, .loop-box ul {
  	height: 200px; /* スライダーの高さ - 変更注意 */}
	.loop-box ul {
  	width: calc(200px * 1.1 * 3); /* 画像の横幅×枚数 - 変更注意・変更可・変更注意 */}
	}


/* 5.アニメーション個別設定 ++++++++++ */
.loop-box ul.loop1 {
  animation-name: loop1;
}
.loop-box ul.loop2 {
  animation-name: loop2;
}
@keyframes loop1 {
  0% {transform: translateX(0); }
  49.99999% {transform: translateX(-100%); }
  50% {transform: translateX(100%); }
}
@keyframes loop2 {
  0% {transform: translateX(100%); }
  100%{transform: translateX(-100%); }
}


/*メインコンテンツ
-------------------------------------*/
main {
    margin: 0;
}
section {
	margin: 0;s
}
.gray-back {
	background: url("../img/bk_marble.jpg") repeat;
	background-size: contain;
	padding: 5rem 0 0 0;
	overflow: hidden;
}

/*キャッチコピー
-------------------------------------*/
.catch {
    text-align: center;
	background: url("../img/bk_gold.jpg") repeat;
	background-size: contain;
	padding: 4rem 0 1rem;
	overflow: hidden;
}
.catch h2 {
    padding: 2rem;
    background: #51171e;
    margin: 2rem auto 3rem;
    position: relative;
    font-size: 2rem;
    width: 70%;
}
.catch h2::after {
width: 0;
height: 0;
position: absolute;
top: 100%;
left: 55%;
margin: 0 0 0 -60px;
border: 20px solid transparent;
border-top-color: #51171e;
content: '';
}
.under {
    padding:0 1rem 1rem 1rem;
}
.center {
	text-align: center;
}



/*予約ボタン
-------------------------------------*/
.re_store_list{
	width: 100%;
    display: flex;
    justify-content:space-evenly;
    position: relative;
    top: 20px;
    padding: 0 10px;
}
.re_store_box{
	position: relative;
    width: 23%;
    height: 130px;
	padding: 5px 0;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
    font-weight: 500;
    font-size: 16px;
}
.re_store_logo img {
    box-shadow: none;
	padding:3% 3% 0;
}
.store_txt {
    text-align: center;
	color: #393939;
	white-space: nowrap;
}



@media screen and (max-width: 767px){
.catch h2{
    width: 90%;}
.subsc_area {
	width:80% !important;
		margin: 3rem auto!important;}
.subsc_img{
	width: 70%;
}
	
.re_store_list {
    align-content: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;}
.re_store_box {
    height: 110px;
    align-items: center;
    width: 48%;
    margin-bottom: 20px;
    font-size: .8rem;}
	.store_txt {font-size:1.5rem;}

	.catchbtn{
		width:90%!important;
	}
	.catch h2::after {
left: 60%;}
}

.subsc_area{
	position: relative;
	background:url("../img/bk_pt.png") repeat #dc8e0e;
    margin: 10rem auto 5rem;
    padding: 1.5rem;
    font-weight: 600;
    font-size: 2.5rem;
    width: 60%;
	border: #a00d20 10px solid;
}
.subsc_area a:hover{
	color:#CECECE;	
}
.subsc_area span{
	font-size:0.8em!important;
}
.subsc_img{
	position: absolute;
	top:-20%;
	left:-10%;
	width: 25%;
}


.toptitle{
	margin:0 auto 4rem; 
	padding: 1.5rem 2rem;
  color: #fff;
  background:#000 url("../img/bk_pt.png") repeat;
  -webkit-box-shadow: 5px 5px 0 #43151b;
  box-shadow: 5px 5px 0 #43151b;
}


/*お品書き
-------------------------------------*/
h3.menu_title{
	text-align: center;
	margin: 8rem 0 3rem 0;
    letter-spacing: .3rem;
    font-size: 2em;
	clear: both;
}
h3.menu_title a:hover{
	color: #FFF;
	
}
ul.menu_list {
	flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    padding: 3rem 0;
}
ul.menu_list li{
	list-style: none;
	font-size:2rem;
	padding:0 30px;
	border-right:1px #fff solid;
}
ul.menu_list li:last-child{
	border: none !important;}


.bkw_box {
	background:#e1e3ef;
	margin:0;
	padding:0.2rem 0 0.8rem;
	color:#282828;
	box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
	margin-bottom: 3rem;
}
.bkw_box h3{font-size: 2rem;
margin:2rem 0;
clear: both;}

.btn{
	text-align: center;
	margin: 2rem auto 6rem;
	font-size:2rem;
	background:url("../img/bk_pt.png") repeat #cd5e3c;
	width:50%;
}
.btn a{
	padding:2.5rem;
	color:#000;
}

.menubox{
	background:#fff;
	padding: 3rem;
	margin:2rem;
	color: #393939;
	overflow: hidden;
}
.menubox p{
	font-size:2rem;
	margin: 2rem 2rem 1rem 2rem;
	
}
.stitle{
	font-size:2rem;
	display: block;
	clear: both;
}

dl.menu_inner{
	padding:2rem;
	clear: both;
}
dl.menu_inner dt{
	padding:1rem;
	font-size:2.2rem;
	border-bottom:#666 1px solid;
	font-weight:600;
}
dl.menu_inner dd{
	padding:2rem 2rem 0;
	font-size:2rem
}
.price{
	font-size: 2.5rem;
    display: block;
    float: right;
    margin: 5% 0;
}
.sm{font-size:0.5em;}

@media screen and (max-width: 767px){
	
	ul.menu_list li {
    padding: 0 20px;}
	.menubox{
	padding: 1rem;}
	dl.menu_inner{
		padding:1rem;
	overflow: hidden;}
	dl.menu_inner dd {
    padding: 1.5rem 1rem 0 2rem;
    line-height: 2;}
	.list_right{
		float: right;}
	.btn{
	width:100%;}
	
}

/*スタッフ
-------------------------------------*/
.stuff_area{
	background:url("../img/bk_pt.png") repeat #e8d3d1;}
.insta_imglist {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 0;
	flex-wrap: wrap;}
.insta_imglist li {
	margin:0 0 1rem;
    width: 250px;
	clear: both;}
.insta_imglist li a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	position: inherit;}

.insta_btn{
	display:block;
	background:linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%); color: #fff;
	text-align: center;}
.stuff_area .txt{
	font-size:2rem;
	color:#301D05;
	margin-top:3rem;
	text-align: center;}

@media screen and (max-width: 767px){
	.insta_imglist li:nth-child(odd) {
    float: left;}
	.insta_imglist li {
    width: 48%;}
	}

/*アクセス
-------------------------------------*/
.flow.row {
	margin-bottom: 3rem;
}
.ac_detail{
	text-align: center;
	margin: 2rem auto;
	clear: both;
}

/*フッター
-------------------------------------*/
footer {
    background-color: #000;
    padding:0;
	text-align: center;
	width: 100%;
	position: relative;
}
footer .logo{
	width: 10%;
	margin: 5rem auto;
}
footer p{
	line-height:1.8;
}
footer p span{
	font-weight: 600;
	font-size:2.2rem;
}

@media screen and (max-width: 767px){
	footer .logo{
	width: 20%;}
}

/* ボタン全体 */
.flowbtn17{
border-radius:50%;
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:30px;
text-decoration:none;
transition:.5s;
background-color:#fff;
color:#000;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn17:hover{
text-decoration:none;
}
/* アイコンをど真ん中に */
.flowbtn17 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitterマウスホバー時 */
.flowbtn17.fl_tw2:hover{
background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}
/* Instagramマウスホバー時 */
.flowbtn17.insta_btn2:hover{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;		
}
/* Facebookマウスホバー時 */
.flowbtn17.fl_fb2:hover{
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);	
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);
}

ul.snsbtniti{
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    width: 200px;
    height: 50px;
    margin: 5rem auto ;

}
ul.snsbtniti li{
	
}
/* ulタグの内側余白を０にする */
ul.snsbtniti2{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* ボタン同士の余白 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center !important;
}

/*お問い合わせ
-------------------------------------*/
.contact-box {
	border: 1px solid #ccc;
	text-align: center;
	padding: 2rem 0;
}
.table {
	margin: 4rem 0;
}
.table th {
	width: 250px;
}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: #000;
	font-size:0.8em;
}
.copyright a {
    color: #fff;
    text-decoration: none;
	display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background: #000;
    color: #fff;
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background: #666;
}

/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 768px){
	
/*ヘッダー
-------------------------------------*/
.header-box {
	display: none;
}	
/*お問い合わせ
-------------------------------------*/
.table th {
	width: 100%;
	display: block;
}	
.table td {
	display: block;
}
}