@charset "UTF-8";

/* ----------------------
ヘッダー SP
------------------------*/

/* ------------ ナビゲーション SP ------------ */
nav.gNav {
	position: fixed;
	top: -420px;
	width: 100%;
	transition: 0.5s;
	z-index: 99;
}

nav.gNav li {border-bottom: 1px #ccc solid;}

nav.gNav li a {
	display: block;
	width: 100%;
	padding: 10px 0;
	text-align: center;
	background: rgba(255,255,255,0.8);
	color: #333;
	line-height: 1.5;
	font-size: 18px; font-size: 1.8rem;
	font-family: 'Merriweather', serif;
}

nav.gNav li a:hover{
	color: #a40000;
}

nav.gNav li a span{
	display: block;
	font-size: 14px; font-size: 1.4rem;
}

/* ------------ ハンバーガーボタン SP ------------ */
.gNav button {
  display: block;
  background: #fff;
  padding: 0 1em;
  width: 70px;
  color: #333;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 999;
  text-align: center;
  outline: none;
  opacity: 0.8;
  border: 0;
}

/* ------------ ハンバーガーボタン3本線 SP ------------ */
.gNav button span.bar {
  display: block;
  height: 2px;
  background-color: #333;
  margin: 10px 0;
  transition: 0.3s;
  transform-origin: 0 0;
}
.gNav button .close {
  letter-spacing: 0.08em;
  display: none;
  margin: 10px 0;
}
.gNav button .menu {
  display: block;
  margin: 10px 0;
}

/*  メニューアクティブ時 SP  */
.gNav button.active span.bar {
  width: 49px;
} 
.gNav button.active .bar1 {
  transform: rotate(30deg);
}
.gNav button.active .bar2 {
  opacity: 0;
}
.gNav button.active .bar3 {
  transform: rotate(-30deg);
}
.gNav button.active .menu {
  display: none;
}
.gNav button.active .close {
  display: block;
}

.gNav button:hover {
	opacity: 0.8;
}

nav.gNav.active {
	top: 0;
}


/*-- キャッチとSNS　SP --*/
.head-txt{
	display: flex;
	justify-content: space-between;
	padding: 20px 10px;
}

.head-txt p:first-child{
	width: 65%;
	font-size: 14px; font-size: 1.4rem;
	line-height: 1.4;
}

.head-txt p:last-child{
	width: 25%;
	margin-right: 10%;
}


header h1{text-align: center;}

/*-- メイン画像 SP --*/
.ph-head{
	display: flex;
	flex-direction: column;
}

.ph-head p{text-align: center;}
.ph-head p:first-child,
.ph-head p:nth-child(2){display: block;}
.ph-head p:last-child{display: none;}

/* ----------------------
コンテンツ SP
------------------------*/
#container{padding-bottom: 50px;}

/* 共通 SP 
---------------------------*/
.noto{
	padding-bottom: 25px;
	text-align: center;
	font-family: 'Abel', sans-serif;
	font-size: 24px; font-size: 2.4rem;
	font-weight: bold;
}

.noto + p{
	padding: 0 0 25px 0;
	text-align: center;
}


/*下層ページの見出しh2用　SP*/
.noto-page{
	padding: 15px;
	background: #f5f5f5;
	text-align: center;
	font-family: 'Abel', sans-serif;
	font-size: 24px; font-size: 2.4rem;
	font-weight: bold;	
}


/* ----------------------
フッター SP
------------------------*/
footer{background-color: #a40000;}

#foot-in{
	max-width: 1080px;
	margin: 0 auto;
	padding:0 15px 20px;
	color: #fff;
	position: static;
}

#foot-in section{
	max-width: 420px;
	margin:0 auto;
	text-align: left;
}

#foot-in section h2{
	text-align: center;
	padding-bottom: 10px;
}

.footR{
	width: auto;
	padding-bottom: 50px;
	position: static;
	top:0;
	right:0;
}

.footR p{
	padding-bottom: 10px;
	text-align: right;
}

.copy{
	padding: 10px 0;
	text-align: center;
	color: #fff;	
	background-color: #2d0c0c;
}

/* 予約ボタン SP
----------------------*/
.rev-pc{display: none;}

.rev-sp{
	width: 100%;
	padding: 20px;
	background-color: #cb2990;
	position: fixed;
	bottom: 0;
	left:0;
	z-index: 9999;
}

.rev-sp-in a{display: block;}

.rev-sp-rev{
	width: 280px;
	margin:0 auto;
	line-height: 1.5;
	padding: 5px 50px 0 0;
	background: url("../img/icon-rev-arow.gif") no-repeat 85% center;
}

.rev-sp-rev ol{
	padding-left: 60px;
 	background: url("../img/icon-rev-crender.gif") no-repeat left center;
}

.rev-sp-rev ol li:first-child{
	font-size: 18px; font-size: 1.8rem;
	color: #fff;
}

.rev-sp-in ol li:last-child{
	font-size: 14px; font-size: 1.4rem;
	color: #fff100;
}




/*----------------------------------------------------
タブレット/ SP用 480 
----------------------------------------------------*/
@media print, screen and (min-width: 480px) {

	/*-- キャッチとSNS　SP 480 --*/ 
	.head-txt p:last-child{
		width: 20%;
		margin-right: 5%;
	}

	/*-- メイン画像 SP 480- --*/
	.ph-head{flex-direction: row;}
	.ph-head p{text-align: left;}
}



/*----------------------------------------------------
タブレット/ PC用 768- 
----------------------------------------------------*/
@media print, screen and (min-width: 768px) {

	/* ----------------------
	ヘッダー PC
	------------------------*/
	/*-- キャッチとSNS　PC 768 --*/ 
	.head-txt p:first-child{width: 85%;}
	.head-txt p:last-child{
		width: 10%;
		margin-right: 5%;
	}

	.ph-head p:first-child,
	.ph-head p:nth-child(2){display: none;}
	.ph-head p:last-child{display: block;}


	/* ----------------------
	フッター SP
	------------------------*/
	#foot-in{position: relative;}

	#foot-in section{
		max-width: 420px;
		margin:0 auto;
		text-align: center;
	}

	.footR{
		position: absolute;
		width: 100px;
		top:120px;
		right:0;	
	}

	/* 予約ボタン PC
	----------------------*/
	.rev-sp{display: none;}

	.rev-pc{
		display: block;
		position: fixed;
		top:400px;
		right:0;
		z-index: 9999;
	}


	/* ----------------------
	コンテンツ PC
	------------------------*/
	#container{padding-bottom: 100px;}

	.noto{padding-bottom: 25px;}
	.noto + p{padding: 0 0 50px 0;}

}


/*----------------------------------------------------
タブレット/ PC用 1024- 
----------------------------------------------------*/
@media print, screen and (min-width: 1024px) {
	/*-- キャッチとSNS　PC 1024 --*/ 
	.head-txt p:last-child{width: 10%;}
}

/*----------------------------------------------------
タブレット/ PC用 1200- 
----------------------------------------------------*/
@media print, screen and (min-width: 1240px) {
	/*-- キャッチとSNS　PC 1024 --*/ 
	.head-txt p:last-child{width: 5%;}
}

/*----------------------------------------------------
タブレット/ PC用 1200- 
----------------------------------------------------*/
@media print, screen and (min-width: 1600px) {
	/*-- キャッチとSNS　PC 1024 --*/ 
	.head-txt p:last-child{width: 2%;}
}