@charset "utf-8";
/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
} /* end -599 */

@media (min-width: 600px) and (max-width:959px) {
} /* end 600-959 */

@media (min-width: 960px) {
} /* 960- */

@media (max-width: 768px) {
} /* end -768px */

@media (min-width: 769px) {
} /* 769px- */

/* ---------------------------------------- common */

header { background: #333; }
header .inner {
	font-size: 1.3rem;
	line-height: 1.5;
}


@media (max-width: 768px) {

	header { 
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		line-height: 1;
		padding: 1.5em; 
	}
	header .inner {
		display: -webkit-box;
		display: -webkit-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
	}
	header .logo { 
		width: 15%; 
		max-width: 60px;
	}
	header .connecting-info,
	header .gvn { display: none !important; }
	#mobile-menu { 
		display: table;
		table-layout: fixed;
	}
	#mobile-menu li { 
		display: table-cell;
		vertical-align: middle;
		padding: 0 .75em;
	}
	#mobile-menu a, header .drawer-toggle { 
		display: block;
		color: #fff; 
		font-size: 4.4rem;
	}


} /* end -768px */

@media (min-width: 769px) {

	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 220px;
		height: 100vh;
		color: #fff;
		overflow-y: scroll;
		-ms-overflow-style: none;    /* IE, Edge 対応 */
		scrollbar-width: none;       /* Firefox 対応 */
	}
	header::-webkit-scrollbar {  /* Chrome, Safari 対応 */
		display:none;
	}
	header .inner {
		padding: 2em;
	}
	
	header .logo { margin: 0 0 1.5em; }
	header .connecting-info { margin: 0 0 3em; }
	header .gvn li { margin: .5em 0; }
	header .gvn li a {
		display: block;
		padding: .25em 0;
	}
	#mobile-menu { display: none !important; }
	header .drawer-toggle { display: none !important; }

} /* 769px- */

/* ---------------------------------------- wrapper */


@media (max-width: 768px) {
	#wrapper .inner {
		padding: 0 1em;
	}
	section, article { padding: 3em 0; }
}

@media (min-width: 769px) {
	#wrapper {
		width : -webkit-calc(100% - 220px) ;
		width: calc(100% - 220px);
		margin-left: auto;
	}
	#wrapper .inner {
		padding: 0 2em;
	}
	section, article { padding: 3em 0; }
	section h2, article h2 { text-align: center; }
}

/* ---------------------------------------- visual */

#visual { position: relative; }
#visual.under::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url(../js/vegas/overlays/05.png);
	position: absolute;
	top: 0;
	left: 0;
}

/* home */

@media (max-width: 768px) {
	#slider {
		width: 100%;
		height: 70vh;
	}
	#visual h1 {
		position: absolute;
		top: 58%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		z-index: 9;
		width: 90%;
		color: #fff;
		line-height: 1.6;
		font-weight: bold;
		padding: 1em;
	}
}

@media (min-width: 769px) {
	#slider {
		width: 100%;
		height: 100vh;
	}
	#visual h1 {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		z-index: 9;
		width: 90%;
		color: #fff;
		line-height: 1.6;
		font-weight: bold;
		padding: 1em;
	}
}

@media (max-width: 599px) {
	#visual h1 { font-size: 2.0rem; }
	#visual.under { height: 70vh; }
} /* end -599 */

@media (min-width: 600px) and (max-width:959px) {
	#visual h1 { font-size: 2.4rem; }
	#visual.under { height: 60vh; }
} /* end 600-959 */

@media (min-width: 960px) {
	#visual h1 { font-size: 2.8rem; }
	#visual.under { height: 50vh; }
} /* 960- */


/* ----------------------------- connection */

#connection {
	background: rgba( 255, 255, 255, .5 );
	text-align: center; 
	font-family:'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', sans-serif;
}

#connection .telnum {
	line-height: 1;
}
#connection a.reservationBox span {
	font-size: 1.4rem;
	margin: 0 0 0 20px;
}
#connection a.reservationBox {
	display: inline-block;
	color: #fff;
	border: 1px #ccc solid;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	line-height: 1;
}
#connection a.reservationBox:hover {
	background: #fff;
	border: 1px #ccc solid;
	color: #333;
}

#connection ul li img {
	width: 3.2rem;
	height: auto;
	margin: 0 4px 0 0;
	vertical-align: baseline;
}

#connection p > img {
	width: 160px;
	height: auto;
	vertical-align: middle;
	margin: 0 0 10px;
}

#connection p .marks img {
	width: 40px;
	height: auto;
	vertical-align: middle;
	margin: 0 10px 0 0;
}

@media (max-width: 768px) {

	#connection { 
		background: #f5f5f5;
		padding: 3em 0 2.5em; 
	}	
	#connection ul { margin: 0 0 16px; }
	#connection ul li:last-child { margin: 4px 0 0; }
	#connection ul li .telnum {
		font-size: 1.8rem;
	}
	#connection ul li img + .telnum {
		font-size: 3.2rem;
	}

	#connection a.reservationBox { 
		font-size: 1.6rem; 
		padding: 16px;
	}
	
	#connection a.reservationBox span {
		font-size: 1.2rem;
		margin: 0 0 0 20px;
	}
	#connection p {
		font-size: 1.4rem;
		vertical-align: middle;
		margin: 24px 0 0;
	}

	#connection p .marks { display: inline-block; }
	
	#connection p span {
		white-space: nowrap;
	}
	#connection p span + span.telnum {
		margin: 0 12px 0;
	}
	#connection p .marks img {
		margin: 0 5px 0;
	}

} /* 768px- */


@media (min-width: 769px) {

	#connection { padding: 3.5em 0 3em; }	
	#connection ul { margin: 0 0 24px; }
	#connection ul li { font-size: 1.6rem; }
	#connection ul li:last-child { margin: 8px 0 0; }
	
	#connection ul li .telnum {
		font-size: 2.4rem;
	}
	#connection ul li img + .telnum {
		font-size: 4.4rem;
	}
	
	#connection a.reservationBox { 
		font-size: 2.0rem; 
		padding: 20px 40px;
	}
	
	#connection p {
		font-size: 1.8rem;
		vertical-align: middle;
		margin: 24px 0 0;
	}

	#connection p span {
		margin: 0 0 0 12px;
	}


} /* 769px- */

/* ---------------------------------------- footer */

footer { 
	background: #222;
	color: #fff;
	text-align: center;
	padding: 3em 0 2em; 
}

footer .logo img { width: 80px; }

@media (max-width: 768px) {
	footer .gvn { display: none !important; }
	footer .related { margin: 0 0 2em; }
	footer .related li { margin: 0 0 .25em; }
	footer .related li a { 
		display: block; 
		border: 1px #fff solid;
		padding: 1em;
	}
	footer .logo { margin: 0 0 2em; }
}

@media (min-width: 769px) {
	footer .gvn,
	footer .related {
		display: -webkit-box;
		display: -webkit-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	footer .gvn li,
	footer .related li { margin: .5em .75em; }
	footer .gvn li a,
	footer .related li a { display: block; }
	footer .related { margin: 1em 0 0; }
	footer .logo { margin: 3em 0 2em; }
}