@charset "utf-8";

/* Contents
 * ****************************
 *
 * 1: general style
 * 2: body
 * 3: container
 * 4: header
 * 5: content
 * 6: navi
 * 7: footer
 *
 * ****************************
 */


/*
======= 1: general style =======
*/
* {
	margin:0;
	padding:0;
	font-style:normal;
	outline:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	box-sizing:border-box;
}

html {
	width:100%;
	height:100%;
	overflow-y:scroll;
}
::selection {
	background:#F9D3D4; /* Safari */
}
::-moz-selection {
	background:#F9D3D4; /* Firefox */
}
@media screen and (max-width:768px) {
	html {
		overflow-y:auto;
	}
}

/*
======= 2: body =======
*/
body {
	min-width:320px;
	color:#000;
	height:100%;
	font-family:"ヒラギノ角ゴ Pro",Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,sans-serif;
	line-height:2;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
@media screen and (max-width:768px) {
	body {
		line-height:1.5;
	}
}
.imgFree img {
	max-width:100%!important;
	width:auto;
	height:auto!important;
}

/*
======= 3: container =======
*/
#container {
	width:970px;
	margin:0 auto;
	font-size:15px;
}
#topicPath {
	padding:20px 0 20px;
}
#topicPath li {
	display:inline-block;
}
#topicPath li:after {
	content:">";
	margin-left:0.5em;
}
#topicPath li:last-child:after {
	content:none;
}
#topicPath a {
	color:#666;
}
#topicPath li,
#topicPath a:hover {
	color:#000;
}
@media screen and (max-width:768px) {
	#container {
		width:auto;
		min-width:320px;
		font-size:12px;
	}
	#topicPath { display:none; }
}

/*
======= 4: header =======
*/
header {
	position:relative;
	width:970px;
	margin:0 auto;
	height:110px;
}
#logo,
.hTxt01,
.hTxt02,
.btnReserve01,
.hTxtTel01,
.hListSNS01 {
	position:absolute;
}
#logo {
	top:0;
	left:0;
}
#logo a {
	position: relative;
	display:block;
	overflow:hidden;
	width:250px;
	height:100px;
}
#logo a img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.hTxt01 {
	right:0;
	font-size:11px;
}

.hTxt02 {
	top:73px;
	right:5px;
}

.hTxt02 span{
	font-size: 140%;
}

.btnReserve01 {
	top: 25px;
	right: 0;
}
.btnReserve01 a {
	display:block;
	overflow:hidden;
	width:214px;
	height:42px;
}
.btnReserve01 a img:nth-child(1) {
	position:absolute;
	top:0;
	left:0;
	z-index:100;
}
.btnReserve01 a img:nth-child(2) {
	position:absolute;
	top:0;
	left:0;
	z-index:1000;
	display:none;
}
.btnReserve01 a:hover img:nth-child(2) {
	display:block;
}
.hTxtTel01 {
	font-weight: bold;
	font-size:1.1em;
	top:63px;
	right:0;
	
}
.hTxtTel01:before {
	content: "TEL";
	font-size:0.7em;
	padding-right: 5px;
}


.hListSNS01,
.contSNS01 {
	letter-spacing:-0.4em;
}
.hListSNS01 {
	top:38px;
	right:227px;
}
.hListSNS01 li,
.contSNS01 li {
	display:inline-block;
	letter-spacing:0;
	background-color:#8D8D8D;
}
.hListSNS01 li {
	margin-left:10px;
}
.iconFB.active { background-color:#ACC5E2; }
.iconTW.active { background-color:#7FD0DD; }
.iconLINE.active { background-color:#95CC87; }
.iconYoutube.active { background-color:#F49A9A; }
.iconInsta.active { background-color:#F79A9A; }
.iconEdit.active { background-color:#F4C592; }

.hListSNS01 li a,
.contSNS01 li a {
	display:block;
	overflow:hidden;
	width:30px;
	height:30px;
	background-size:20px 20px;
	background-repeat:no-repeat;
	background-position:5px 5px;
	text-indent:-9999px;
}
.iconFB a { background-image:url(../../img/common/icon_fb.png); }
.iconTW a { background-image:url(../../img/common/icon_tw.png); }
.iconLINE a { background-image:url(../../img/common/icon_line.png); }
.iconYoutube a { background-image:url(../../img/common/icon_youtube.png); }
.iconInsta a { background-image:url(../../img/common/icon_insta.png); }
.iconEdit a { background-image:url(../../img/common/icon_edit.png); }

.hListSNS01 li a:hover,
.contSNS01 li a:hover {
	opacity:0.5;
}


@media screen and (max-width:768px) {
	header {
		width:auto;
		height:58px;
	}
	#logo {
		display:block;
		width:150px;
		height:58px;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	#logo a {
		position: absolute;
		display:block;
		width:150px;
		height:58px;
		margin:0 auto;
		background-size:contain;
		background-position: 50% 50%;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.hTxt01,
	.hTxt02,
	.hTxtTel01,
	.hListSNS01,
	.btnReserve01 { display:none; }
}

/*
======= 5: content =======
*/
.contentInner {
}
@media screen and (max-width:768px) {
	.contentInner {
		padding:15px;
	}
}

/*
======= 6: navi =======
*/

/* [gNavi] ----------*/
#gNaviBase {
	position:relative;
	z-index:1000;
	padding:10px 0;
	border-top:2px solid #000;
	border-bottom:2px solid #000;
	line-height:1.4;
	font-size:14px;
}
#gNavi {
	width:970px;
	height:60px;
	margin:0 auto;
}
#gNavi > ul {
	display:table;
	table-layout:fixed;
	width:100%;
	height:100%;
	border-collapse:collapse;
	border-spacing:0;
	
}
#gNavi > ul > li {
	display:table-cell;
	position:relative;
	width:12.5%;
	height:100%;
	border-left:2px solid #999;
	border-right:2px solid #999;
	vertical-align:middle;
}
#gNavi > ul > li > a {
	display:table;
	width:100%;
	height:100%;
	text-align:center;
	color:#000;
}
#gNavi > ul > li:hover > a {
	background:#000;
	color:#FFF;
}
#gNavi > ul > li > a > span {
	display:table-cell;
	width:100%;
	height:100%;
	padding:10px 0;
	vertical-align:middle;
	font-family:"Raleway", sans-serif;
}
#gNavi > ul > li > a > span:last-child,
#gNavi > ul > li:hover > a > span:first-child { display:none; }
#gNavi > ul > li:hover > a > span:last-child {
	display:table-cell;
	font-family:inherit;
	font-size:12px;
}

#gNavi .child {
	display:none;
	position:absolute;
	left:0;
	border:1px solid #FFF;
	border-bottom:0;
	background:rgba(0,0,0,0.8);
	text-align:left;
}
#gNavi > ul > li:hover .child { display:block; }
#gNavi .child li { border-bottom:1px solid #FFF; }
#gNavi .child a {
	display:block;
	padding:10px 20px 10px 10px;
	white-space:nowrap;
	font-size:15px;
	color:#FFF;
}
#gNavi .child a:hover { background:#000; }
/* [btnMenu] ----------*/
#btnMenu {
	display:none;
}
@media screen and (min-width:769px) {
	#gNavi > ul {
		display:table !important;
	}
}
@media screen and (max-width:768px) {
/* [gNavi] ----------*/
	#gNaviBase {
		position:static;
		padding:0;
		border:0;
		font-size:11px;
	}
	#gNavi {
		width:auto;
		height:auto;
	}
	#gNavi > ul,
	#gNavi > ul > li,
	#gNavi > ul > li > a,
	#gNavi > ul > li > a > span {
		display:block;
		width:auto;
		height:auto;
	}
	
	#gNavi > ul {
		display:none;
		position:absolute;
		top:58px;
		left:0;
		width:100%;
		z-index:8000;
	}
	#gNavi > ul > li {
		border-left:0;
		border-right:0;
		border-bottom:1px solid #999;
	}
	#gNavi > ul > li:last-child { border:0; }
	#gNavi > ul > li > a {
		padding:3px 0;
		background:rgba(0,0,0,0.8);
		color:#FFF;
	}
	#gNavi > ul > li:hover > a {
		background:rgba(119,119,119,0.7);
	}
	#gNavi > ul > li > a > span {
		text-align:center;
		padding:10px 0;
	}
	#gNavi > ul > li > a > span br { display:none; }
	#gNavi > ul > li > a > span:last-child { display:none !important; }
	#gNavi > ul > li:hover > a > span:first-child { display:block !important; }
	#gNavi .child { display:none !important; }

/* [btnMenu] ----------*/
	#btnMenu,
	#btnMenu #menuInner,
	#btnMenu #menuInner span,
	#btnMenu #menuInner::before,
	#btnMenu #menuInner::after {
		display:inline-block;
		transition:all 0.3s;
		box-sizing:border-box;
	}
	
	#btnMenu {
		position:absolute;
		top:13px;
		right:15px;
		width:26px;
		height:30px;
		background:url(../../img/common/btn_sp_menu.png) 50% 100% no-repeat;
		background-size:26px 6px;
	}
	
	#btnMenu #menuInner {
		position:relative;
		width:26px;
		height:18px;
	}

	#btnMenu #menuInner span,
	#btnMenu #menuInner::before,
	#btnMenu #menuInner::after {
		display:block;
		position:absolute;
		right:0;
		width:26px;
		height:2px;
		overflow:hidden;
		font-size:0;
		background-color:#000;
	}
	#btnMenu #menuInner::before,
	#btnMenu #menuInner::after {
		content:"";
	}
	#btnMenu #menuInner::before {
		top:0;
	}
	#btnMenu #menuInner span {
		overflow:hidden;
		text-indent:-9999px;
		top:50%;
		margin-top:-1px;
	}
	#btnMenu #menuInner::after {
		bottom:0;
	}
	#btnMenu.active #menuInner::before {
		-webkit-transform:translateY(8px) rotate(-45deg);
		transform:translateY(8px) rotate(-45deg);
	}
	#btnMenu.active #menuInner span {
		opacity:0;
	}
	#btnMenu.active #menuInner::after {
		-webkit-transform:translateY(-8px) rotate(45deg);
		transform:translateY(-8px) rotate(45deg);
	}
}

/*
======= 7: footer =======
*/
/* [footer] ----------*/
footer {
	border-top:4px solid #000;
	background:#F3F3F3;
}
/* [fInner] ----------*/
.fInner {
	width:970px;
	margin:0 auto;
	padding:25px 0;
	font-size:13px;
}
.fInner a { color:#878787; }
.fInner a:hover { color:#000; }
.fInner h1 {
	margin-bottom:1.5em;
	font-size:14px;
}
.fInner .tel { margin-left:2em; }
/* [fNavi] ----------*/
#fNavi {
	padding:20px 0;
	background:#000;
	color:#FFF;
	font-size:12px;
}
#fNavi a { color:#FFF; }
#fNavi a:hover { color:#555; }
#fNavi dl {
	width:970px;
	margin:0 auto;
	letter-spacing:-0.4em;
}
#fNavi dl:first-child { margin-bottom:20px; } 
#fNavi dt,
#fNavi dd {
	display:inline-block;
	letter-spacing:normal;
	line-height:1;
	vertical-align:middle;
}
#fNavi dt {
	position:relative;
	width:87px;
	margin-right:1.5em;
	padding:5px 0;
	background:#555;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
}
#fNavi dt:after {
	content:"";
	position:absolute;
	top:50%;
	right:-6px;
	width:0;
	height:0;
	margin-top:-4px;
	border-style:solid;
	border-width:4px 0 4px 6px;
	border-color:transparent transparent transparent #555;
}
#fNavi dd {
	margin-right:1em;
	padding-right:1em;
	border-right:1px solid #555;
}
#fNavi dl dd:last-child {
	border:0;
	margin-right:0;
	padding-right:0;
}
/* [btnPagetop] ----------*/
#btnPagetop {
	width:970px;
	margin:0 auto;
	padding:20px 0;
	text-align:right;
}
#btnPagetop a {
	display:inline-block;
	padding:4px 0 2px 23px;
	background:url(../../img/common/icon_pagetop.gif) 0 50% no-repeat;
	background-size:13px;
	line-height:1;
	font-size:12px;
	text-transform:uppercase;
	color:#000;
}
#btnPagetop a:hover { color:#999; }
/* [copyright] ----------*/
#copyright { background:#FFF; }
#copyright small {
	display:block;
	width:970px;
	margin:0 auto;
	padding:30px 0 50px;
	background:#FFF;
	text-align:center;
	font-family:Helvetica,Arial,sans-serif;
	font-size:11px;
}
/* [sp accessMenu] ----------*/
#accessMenu { display:none; }

@media screen and (max-width:768px) {
/* [footer] ----------*/
	footer {
		padding-bottom:46px;
		border-top-width:2px;
	}
	.fInner,
	.fInner h1,
	#fNavi {
		font-size:12px;
	}
/* [fInner] ----------*/
	.fInner {
		width:auto;
		padding:25px 15px;
	}
	.fInner .tel {
		display:block;
		margin:0 0 1.5em 0;
	}
/* [fNavi] ----------*/
	#fNavi {
		width:auto;
		padding:20px 15px;
	}
	#fNavi dl { width:auto; }
	#fNavi dt {
		display:block;
		margin-bottom:10px;
	}
	#fNavi dd {
		display:inline;
		margin-bottom:10px;
		line-height:2;
	}
	#fNavi dd a {
		line-height:1;
	}
/* [btnPagetop] ----------*/
	#btnPagetop {
		width:auto;
		padding-right:15px;
	}
/* [copyright] ----------*/
	#copyright small {
		width:auto;
		padding:20px 0;
	}
/* [sp accessMenu] ----------*/
	#accessMenu {
		display:block;
		position:fixed;
		left:0;
		bottom:0;
		width:100%;
		min-width:320px;
		padding:13px 0;
		height:46px;
		background:#e88bba;
		line-height:1;
		z-index:1000;
	}
	#accessMenu ul {
		display:table;
		border-collapse:collapse;
		border-spacing:0;
		width:100%;
		height:100%;
	}
	#accessMenu li {
		display:table-cell;
		padding:0 10px;
		width: 50%;
		height:100%;
		text-align:center;
	}
	#accessMenu .reserve {
		border-left:1px solid #FFF;
	}
	#accessMenu a {
		display:inline-block;
		padding:5px 0;
		background-repeat:no-repeat;
		background-position:0 50%;
		background-size:auto 15px;
		white-space:nowrap;
		font-size:11px;
		font-weight:bold;
		color:#FFF;
	}
	#accessMenu .tel a {
		padding-left:20px;
		background-image:url(../../img/common/icon_tel.png);
	}
	#accessMenu .reserve a {
		padding-left:25px;
		background-image:url(../../img/common/icon_reserve.png);
	}
	#accessMenu .access a {
		padding-left:23px;
		background-image:url(../../img/common/icon_access.png);
	}
		
}