@charset "utf-8";

/**/
/*
背景色:#4D331A
文字色：#ece8e0
強調色:#FF8000
リンク色:#EDB882
*/
/**/


* {
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	font-style:normal;
}

html{
	/*font-family: "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;*/
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	margin:0;
}

body{
	font-size: 14px;
	line-height:1.5em;
	margin:0 auto;
	color:#ece8e0;
	width: 1000px;
	height: 100vh;
	background-color:#4D331A;
	background-image:url("../img/bg-img.png");
	border: 0px solid #FFF;
}


	@media screen and (max-width: 769px) {
		body{
			width: 100%;
		}
	}

img{
	border-style:none;
}

a,
a:visited,
a:hover {
	color:#EDB882;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	a-decoration: none;
}

/*汎用*/
.display-none{
	display:none;
}
.clear-b{
	clear: both;
}

em{
	color:#FF8000;
	font-weight: bold;
}

/*****HEADER*****/
header{
	display: block;
	width:100%;
	margin: 0 auto:
	overflow: hidden;
	align-items: center;
	border: 0px solid #00F;
}

.logo {
	margin:0 auto;
	text-align:center;
	border: 0px solid #00F;
	width:100%;
}

/*****navメニュー*****/
/* メニュー黒ポチを消す */
.nav_list {
	list-style: none;
}

.nav_content{
	width: 100%;
	border: 0px solid orange;
	margin-bottom: 5px;
	overflow: hidden;
}

.nav_list{
	width: 100%;
	/*margin-left: 20%;*/
	padding-left:0;
	border: 0px solid #FFF;
}

.nav_item {
	list-style:none;
	/*width: calc(33.3% - 2px);*/
	width: calc(100% / 3);
	font-size: 110%;
	letter-spacing: 3px;
	font-weight: 400;
	line-height: 45px;
	border: 1px solid orange;
	color: #313131;
	cursor: pointer;
	text-align: center;
	float: left;
}

.nav_item:hover{
	background-color: #ece8e0;
	transition: background-color 0.5s ease-out;
	color: #4D331A;
}
.nav_item a{
	text-decoration: none;
}



/*
/*****img slider*****/
#imgSlider {
	width: 100%;
	height: 580px;
	/*height: auto;*/
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
	position: relative;
}

#imgSlider img {
	top: 0;
	left: 0;
	position: absolute;
}
/*****END img slider*****/

*/

/*****main以下*****/

h2{
	color: #FF8000;
	margin: 20px;
	text-align: center;
}

h3{
	color: #FF8000;
	margin: 18px;
	text-align: center;
}

h4{
	color:#ece8e0;
	margin: 18px;
	text-align: center;
}

main {
	border: px solid #0F0;
}


section{
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;

}
article{
	width: 100%;
	margin-bottom: 30px;
	/*background-color: #f9f9f9;*/
	overflow: hidden;
	float: left;
}

@media(min-width:769px){
	/* PCの場合縦書き */
	/*****縦書き*****/
	.middle {
		text-align: center;
		border: 0px solid #0F0;
	}

	.vertical {
		-webkit-writing-mode: vertical-rl;
		-moz-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-ms-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		text-align: left;
		text-orientation: upright;
		height: 500px;
		width: 950px;
		display: inline-block;
		font-size:16px;
		line-height:250%;
		background-color: #982222;
		/*border: 0px solid #7EA8BE;*/
		border: 0px solid #F00;
	}

	.vertical p {
		margin: 1em 1em;
		padding: 30px 100px;
		letter-spacing: 0.2em;
		color:#ece8e0;
	}

	.vertical_logo {
		border: 0px solid #FFF;
	}

}/* END PCの場合縦書き　end @media(min-width:769px) */

/*スマホの場合*/
.middle {
	border: 0px solid #0F0;
	/*display:flex;*/
	overflow: hidden;
	width:100%;
	height: auto;
	margin:0 0 3% 0;
	background-color: #982222;
}
.vertical {
	border: 0px solid #0F0;
	background-color: #982222;
	letter-spacing: 0.2em;
	color:#ece8e0;
}
.vertical p {
	width:70%;
	float: right;
	border: 0px solid #FFF;
	padding: 3% 5% 5% 5%;
	background-color: #982222;
}

	/* iPhone SEなど　400pixel以下 */
	@media(max-width:400px){
		.vertical p {
			width:60%;
		}
	}



.vertical_logo {
	background-color: #982222;
	width: 30%;
	float: left;
	border: 0px solid #FFF;
}

/*****End 縦書き*****/

.inside {
  list-style-position: inside;
  list-style-type: square;
  margin: 20px;
}

/*****ULタグ*****/


@media(min-width:769px){
	.box-outline{
		display:flex;
		width:100%;
		margin:0;
		border:0px solid #FFF;
	}

	.box1,
	.box2 {
		width:50%;
	}

	.box3 {
		width:33.3%;
	}
}/* end @media(min-width:769px) */

.box1,
.box2 {
	margin:0 auto;
	border:0px solid #982222;
}

.box3 {
	margin:0 auto;
	border:1px solid #982222;
}


.box1 img {
	width:100%;
}
aside {
	margin:0 0 5% 0;
}



/*****Google カレンダー*****/
.googleCalendar {
	width: 100%;
}

.googleCalendar iframe {
	width: 100%;
	height: 900px;
  }
  @media all and (min-width: 768px) {
	.googleCalendar iframe {
	  height: 900px;
	}
  }

.googlemap{
	width: 100%;
	height: 100%;
	text-align: center;
	margin : 0;
	border: 0px solid #F00;
}
@media all and (min-width: 768px) {
	.googlemap iframe {
	  height: 450px;
	  margin : 0 auto;
	}
  }


/*****FOOTER*****/


footer{

	width: 100%;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: #4D331A;
}

footer address{
	font-size: 100%;
	color:#ece8e0;
	letter-spacing: 5px;
}



/*共通*/

.img1{
	width: 100%;
}

.textarea{
	color:#ece8e0;
	width: 100%;
}

.textarea p {

}

.shop1,
.shop2,
.shop3,
.shop4,
.shop5,
.shop6,
.shop7 {
  position: relative;
  padding: 0 0 0 10%;
	margin:0 0 3% 0;
}

.shopdata:before {
  position: absolute;
  top: 1px;
  left: 3%;
}
.shop1:before {
  content: url('../img/icon/shop.png');
}

.shop2:before {
  content: url('../img/icon/clock.png');
}

.shop3:before {
  content: url('../img/icon/close.png');
}

.shop4:before {
  content: url('../img/icon/pay.png');
}

.shop4 img {
  width: auto;
}

.shop5:before {
  content: url('../img/icon/phone.png');
}

.shop6:before {
  content: url('../img/icon/train.png');
}

.shop7:before {
  content: url('../img/icon/takaway.png');
}





/*****MailForm*****/
#formWrap {
	width:80%;
	margin:0 auto;
	color:#ece8e0;
	line-height:120%;
	font-size:100%;
}

#formWrap p{
	margin:5% auto;
}

table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}

table.formTable td,table.formTable th{
	border:1px solid orange;
	padding:10px;
}

table.formTable th{
	width:25%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
	color: #4D331A;
	font-weight: bold;
}


	/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
	@media screen and (max-width:769px) {
		#formWrap {
			width:95%;
			margin:0 auto;
		}

		table.formTable th, table.formTable td {
			width:auto;
			display:block;
		}

		table.formTable th {
			margin-top:5px;
			border-bottom:0;
		}

		form input[type="text"], form textarea {
			width:80%;
			padding:5px;
			font-size:110%;
			display:block;
		}

		form input[type="submit"], form input[type="reset"], form input[type="button"] {
			display:block;
			width:100%;
			height:40px;
		}
	}
/*****END MailForm*****/

/* カレンダー */

/* 店舗カレンダー タイトル */
.calendartitle {
	text-align:center;
	width:100%;
}

/*.calendartitle :before {
	content: url('../img/icon/calendar.png');
}*/


#calendar {
	margin:0 auto;
	border-collapse:  collapse;	/* セルの線を重ねる */
	width:90%;
}

#calendar th,td {
	border: solid 1px;	/* 枠線指定 */
	height: 30px;
}

/* 年月 */
.month {
	border-collapse: collapse;
	text-align:center;
	border: solid 0px;	/* 枠線指定 */
	background-color:#000;
	color: #fff;
}
.month td{
	border: solid 1px #000;	/* 枠線指定 */
	background-color:#000;
	color: #fff;
}

/* 曜日 */
.weektitle {
	text-align:center;
	background-color:#CCC;
}

.weekdays {
	text-align:center;
	background-color:#FFF;
}

.days {
	color: #000;
}

.dayoff {
	background-color:#F66;
}

.calendaratt {
	width:95%;
	text-align:right;
}
.calendaratt em{
	color:#F66;
}

/* END カレンダー */









/* カルーセル全体 */
.carousel {
	border: solid 0px #fff;
  display: flex;
  justify-content: center;
}

.contains {
  /* 下の.slideも同じサイズ */
  /*width: 320px;
  height: 180px;*/
  width: 100%;
  height: 320px;
  overflow: hidden;
  position: relative;
  padding: 0;
  list-style: none;
}

.slide_select {
  display: none;	/* スライド切り換え用ラジオボタン非表示 */
}

/* 各スライド */
.slide {
  /* 上の.containsも同じサイズ */
  /*width: 320px;
  height: 180px;*/
  width: 100%;
  height: 320px;
  position: absolute;	/* スライドの初期値は選択されていないので透明にしておく */
  opacity: 0;
}

.slide img {
  width: 100%;
  height: 100%;
}


/* スライド移動ボタンエリア */
.move_controler {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
/* スライド移動の各ボタン */
.button_move {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  border-radius: 100%;
  cursor: pointer;
  /* 普段はやや薄くする */
  opacity: 0.5;
  /* スライドより前面にする */
  z-index: 2;
}
/* ホバー時はやや明るくする */
.button_move:hover {
  opacity: 0.75;
}
/* スライド移動ボタンの色 */
.button_move {
  background-color: #fdfdfd;
}
/* 1番目のスライド選択時 */
/* 1番目のスライドの透明度を0にして表示する */
.slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
  opacity: 1;
}
/* 1番目のスライドの前へ次へボタンの領域を */
.slide_select:nth-of-type(1):checked
  ~ .move_controler
  .button_move:nth-of-type(1) {
  opacity: 1;
}
.slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
  opacity: 1;
}
.slide_select:nth-of-type(2):checked
  ~ .move_controler
  .button_move:nth-of-type(2) {
  opacity: 1;
}
.slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
  opacity: 1;
}
.slide_select:nth-of-type(3):checked
  ~ .move_controler
  .button_move:nth-of-type(3) {
  opacity: 1;
}
.slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
  opacity: 1;
}
.slide_select:nth-of-type(4):checked
  ~ .move_controler
  .button_move:nth-of-type(4) {
  opacity: 1;
}