@charset "UTF-8";
/* CSS Document --------------------------------------------------------------
	all--------------
		all
		body
		header
		nav #glonav
	toppage----------
		section #kv
		section #vision
		section #shops
		section #video
		section #bnr_space
	kabukicho--------
		section #kabu_shopinfo
		section #course
		section menu_detail
	all--------------
		#section bnr_space
		#animation
		@media 
-----------------------------------------------------------------------------*/
*{
	margin : 0;
   padding : 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}

.clearfix:after {content: ""; clear: both; display: block;}

body {
	font-family: "メイリオ","ヒラギノ角ゴ Pro W3", Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 90%;
	text-align: center;
	margin: 0 auto;
	background-color: #754b3e;
	color: #fff;
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.kabukicho {
	background-image: url(../images/kabukicho_bg.jpg);
	-webkit-background-size: 100%;
	background-size: 100%;
	background-attachment: fixed;
}
.kawaguchi {
	background-image: url(../images/kawa/kawa_bg.jpg);
/*	-webkit-background-size: 100%;
	background-size: 100%;
*/	background-attachment: fixed;
}
a { text-decoration: none; }
img { max-width: 100%; height: auto;　width /***/:auto;}
.gs { font-family: 'Vollkorn', serif; }
.wrapper {
	width: 1170px;
	margin: 0 auto;
	padding: 100px 0 0 0;
}
h1,h2,h3 { clear: both; }
/* header -------------------------------------*/
header {
	height: 90px;
	background-color: #000;
	margin: 0 auto;
	position: fixed;
	width: 100%;
	z-index: 999;
 }
.header_logo {
	float: left;
	margin: 20px;
	padding: 0;
}
/* nav #glonav -------------------------------------*/
nav { width: 1170px;  margin: 0 auto;}
ul#glonavi {
	width: 557px;
	display: table;
	float: right;
	margin: 30px;
}
ul#glonavi li{
	display:table-cell;
	position: relative;
	border-collapse:separate;
    border-spacing: 10px 0;
	width: auto;
	padding: 5px;
	text-align: center;
}
ul#glonavi li:last-child{
	border-right: none;
}
ul#glonavi li a {
	font-size: 140%;
	color: #fff;
	text-decoration: none;
}
ul#glonavi li a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #FFF;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
}
ul#glonavi li a:hover::after {
	transform: scale(1, 1);
}

/* section #kv ---------------------------------*/
section.kv { margin: 0 auto; }
.logo {
    position: relative;
	z-index:100;
	padding-top: 100px;
	margin:0;
}
.kv p {
	position: relative;
	padding-top: 96px;
}
.arrow_down {
	position: relative;
	padding: 100px 0 150px 0;
}

/* section #vision concept ---------------------------------*/
#vision { padding-bottom: 20px;} 
#vision h2 {
	font-size: 90px;
	font-weight: normal;
	padding: 80px 0 30px 0;
}
#vision p.catch {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 280%;
	padding: 20px 10px 10px 10px;
}
#vision p.text {
	font-size: 130%;
	padding: 10px;
	text-align: left;
}
.f_left { float: left; width: 50%; margin: 20px 0;}
.f_right { float: right; width: 50%; margin: 20px 0;}
.l_right { float: right; margin: 5px 0;}

/* section #video ---------------------------------*/
#video h2 { padding: 50px 0 30px 0; }
#video { padding: 30px 0 50px 0;
	background-color: rgba(0,0,0,0.70);
}
#video p { padding: 20px 0;}
#video p.text { font-size: 18px; padding: 20px 0;} 
#video_shop p.videotext { font-size: 18px; padding: 50px 10px;}

/* section #shops ---------------------------------*/
#shops h2 {
	font-size: 90px;
	font-weight: normal;
	padding: 0 0 30px 0;
}
#shops>h2 img { border: none; }
#shops img { margin: 0; border:1px solid #fff; padding: 0;}
#shops a img:hover { opacity: 0.7; }

.top_bk {
	float: right;
	margin: 60px 10px 60px 0;
}
/* kabukicho -------------------------------------------
   section #kabu_menu  ----------------------------------------------------------------------------*/
#kabu_menu { padding-top: 80px; }
/*#kabu_menu img { border: 1px solid #fff;}*/
#kabu_menu>nav {  margin: 0 auto; }
ul#kabu_submenu {
	width: 800px;
	margin: 0 auto 80px auto;
}
ul#kabu_submenu li{
	list-style:none;
	box-sizing: border-box;
	margin: 0;
	background-repeat: no-repeat;
	display: block;
}
ul#kabu_submenu li a {
	float: left;
	height: 60px;
	background-image: url(../images/kabu/kabu_submenu.png);
	padding-top: 60px;
	overflow: hidden;
	width: 170px;
	margin-right: 30px;
}
/* a */
ul#kabu_submenu li.menu01 a { background-position: 0 0; }
ul#kabu_submenu li.menu02 a { background-position: -200px 0; }
ul#kabu_submenu li.menu03 a { background-position: -400px 0; }
ul#kabu_submenu li.menu04 a { background-position: -600px 0; }
/* hover */
ul#kabu_submenu li.menu01 a:hover { background-position:  0 -60px;}
ul#kabu_submenu li.menu02 a:hover { background-position: -200px -60px;}
ul#kabu_submenu li.menu03 a:hover { background-position: -400px -60px;}
ul#kabu_submenu li.menu04 a:hover { background-position: -600px -60px;}
/* stay */
ul#kabu_submenu li.menu01 a.stay { background-position: 0 -60px; }
ul#kabu_submenu li.menu02 a.stay { background-position: -200px -60px; }
ul#kabu_submenu li.menu03 a.stay { background-position: -400px -60px; }
ul#kabu_submenu li.menu04 a.stay { background-position: -600px -60px; }

   
/* section #kabu_menu ---------------------------------*/
#kabu_shopinfo h2 { padding: 50px 0; }
.shopinfo_box {
	background-color: #fff;
	margin: 0 auto 50px auto;
	width: 100%;
	height: 470px;
}
.shopinfo_box img{ float: left; }
.shopinfo_box p {
	float: left;
	text-align: left;
	color: #000;
	padding: 40px;
	line-height: 1.8;
	width: 30%;
}
.ggmap {
	position: relative;
	padding-bottom: 37.6%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* section #course ---------------------------------*/
#course h2 { padding: 50px 0; }
.course_box {
	background-color: #fff;
	width: 48%;
	margin: 0 20px 50px auto;
	height: auto;
	float: left;
}
.course_box img { float: left; }
.course_box p {
	float: left;
	color: #000;
	width: 42%;
	margin-left: 5px;
	text-align: center;
}
.course_box p.course_title {
	background-color: #fae3b5;
	padding: 5px 10px;
	margin: 10px 5px;
	font-size: 120%;
}
.course_box p.course_text { margin: 10px 5px; line-height: 2; }
.course_box p.course_sinakazu { padding: 45px 0 10px 0; }
.course_box p.course_price { font-size: 150%; color: #cc0000; }

/* section #menu_detail ---------------------------------*/
#menu_detail h2 { padding: 50px 0; }
.menu_detailbox {
	background-color: #fff;
	width: 100%;
	margin: 0 auto 50px auto;
	color: #000;
	padding: 35px;
	text-align: left;
	float: left;
}
.menu_detailbox img {
	float: left;
	padding: 0 20px 35px 25px;
}
.pricebox_all {
	padding: 0 35px;
}
.menu_detailbox p.detail_title {
	background-color: #fae3b5;
	padding: 5px 10px;
	margin: 0 10px 35px 10px;
	font-size: 120%;
	clear:both;
	text-align: center;
}
.menu_detailbox p.de_menu_p { padding: 2px 0; }
.menu_detailbox span.de_menu {
	text-align: left;
	width: 45%;
}
.menu_detailbox span.de_price {
	text-align: right;
	color: #cc0000;
	float: right;
	padding-right: 20px;
}

/* all --------------------------------------------------------------------------------------------*/
/* section #bnr_space ---------------------------------*/
#bnr_space {
	background-color: #fff;
	height: 195px;
	border-bottom: 50px solid #000;
	padding-top: 20px;
}
#bnr_space img {
	margin-right: 67px;
}
#bnr_space img:hover { opacity: 0.4;}
footer {
	background-color: #f9f7e9;
	height: 165px;
	padding-top: 27px;
	color: #000;
}
footer img { margin-right: 47px; }
footer img:hover { opacity: 0.4; }
footer p { oadding: 10px 0; }

/* tab*/
.tab_area ul,.tab_area_kawa {
	list-style: none;
	margin: 0 auto;
	width: 100%;
}
 .tab_area ul li{
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 18px;
    display:block;
    float:left;
    width: 28%;
	margin: 80px 30px 30px 30px;
    border-right:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-top:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    -webkit-box-sizing : border-box ;
    -moz-box-sizing : border-box ;
    box-sizing : border-box ;
    text-align:center;
    padding: 15px;
    color:#fff;
}
.tab_area_kawa ul li{
	width: 23%;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 18px;
    display:block;
    float:left;
	margin: 80px 10px 30px 10px;
    border:1px solid #ffffff;
    -webkit-box-sizing : border-box ;
    -moz-box-sizing : border-box ;
    box-sizing : border-box ;
    text-align:center;
    padding: 10px;
    color:#fff;
}
.tab_area ul li:hover,.tab_area_kawa ul li:hover {
    background:#8F3100;
    color:#ffffff;
    cursor:pointer;
}
 .content_area {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.content_area .content_block {
    width: 100%;
    -webkit-box-sizing : border-box ;
    -moz-box-sizing : border-box ;
    box-sizing : border-box ;
}


/* animation ----------------------------------*/
.animation {
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* @media */
@media screen and (min-width: 414px) and (max-width: 500px){
	body {
		background-image: url(../images/bg.jpg);
		background-repeat: no-repeat;
		background-position: top center; 
		width: auto;
		height: 100%;
	}
	body.kabukicho::before {
	  background:url(../images/kabukicho_bg.jpg) no-repeat left top;
	  background-size: auto 100%;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  content: "";
	  z-index: -1;
	}
	body.kawaguchi::before {
	  background:url(../images/kawa_bg.jpg) no-repeat left top;
	  background-size: auto 100%;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  content: "";
	  z-index: -1;
	}
	.wrapper { width: 100%; }
	.header { position: fixed; z-index: 999;}
	.nav ul { position: fixed; z-index: 999;}
	.header_logo img { max-width: 80%; position: fixed; z-index: 999;}
	.logo { display: none;}
    .label-sm:before{ content:attr(data-label); font-size: 16px; word-break:break-all; }
    .label-sm img { display:none; }    
	.read { margin: 0 20px;}
	nav ul#glonavi { background-image: none; text-align: right; padding-top: 30px;}
	ul#glonavi li a { background-image: none; height: auto; padding-top: 20px; text-align: right; width: 100%; float: right;}
	.f_left { width: 90%; margin: 0 auto; text-align: center; float: none;}
	.f_right { width: 90%; margin: 0 auto; text-align: center; float: none;}
	.l_right { float: none; margin: 10px 0; text-align: center;}
	img.spn{ display: none;}
	p.catch { font-size: 280%; marign: 10px; width: 100%; }
	p.text { font-size: 130%; margin: 10px; width: 100%;}
	#vision h2 img { max-width: 90%; padding-top: 0;}
	video,#video_shop { max-width: 90%; height: auto; margin: 0 auto;}
	#video h2 img { max-width: 90%; margin: 0 auto; }
	#video p { width: 90%; margin: 0 auto;}
	#kabu_menu { padding-top: 40px; }
	#kabu_menu img { max-width: 90%;}
	nav ul#kabu_submenu { display: none;}
	.ggmap { float: left; position: static; width: 100%; overflow: auto; height: auto; padding-bottom: 0;}
	.ggmap iframe,.ggmap object,.ggmap embed { width: 100%; position: static; height: 350px;  padding-bottom: 0;}
	.tab_area ul,.tab_area_kawa ul { margin: 0 auto; width: 90%;}
	.tab_area ul li,.tab_area_kawa ul li{ margin: 30px 5px; width: 30%; font-size: 14px;}
	.tab_area_kawa ul li{ margin: 30px 5px; width: 22%;}
	.shopinfo_box { height: auto; float: left; width: 100%;}
	.shopinfo_box p { width: 100%; }
	.course_box { width: 100%;}
	.course_box img { width: 55%;}
	.course_box p.course_text { line-height: 1.2; margin: 0; } 
	.course_box p.course_sinakazu { padding-top: 20px;}
	.course_box p.course_price { font-size: 100%;}
	#vision h2,#shops h2 { font-size: 450%; }
	.shopimg img { max-width: 90%; }
	#bnr_space { height: auto;}
	#bnr_space img { max-width: 90%; margin: 0 auto;  padding-bottom: 10px;}
	footer { padding: 10px; height: auto;}
	footer img { margin: 0 auto;}
}
@media screen and (min-width: 375px) and (max-width: 413px) {
	body {
		background-image: url(../images/bg.jpg);
		background-repeat: no-repeat;
		background-position: top center; 
		width: auto;
		height: 100%;
	}
	body.kabukicho::before {
	  background:url(../images/kabukicho_bg.jpg) no-repeat left top;
	  background-size: auto 100%;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  content: "";
	  z-index: -1;
	}
	body.kawaguchi::before {
	  background:url(../images/kawa_bg.jpg) no-repeat left top;
	  background-size: auto 100%;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  content: "";
	  z-index: -1;
	}
	.wrapper { width: 100%; }
	.header { position: fixed; z-index: 999;}
	.nav ul { position: fixed; z-index: 999;}
	.header_logo img { max-width: 80%; position: fixed; z-index: 999;}
	.logo { display: none; }
    .label-sm:before{ content:attr(data-label); font-size: 16px; word-break:break-all; }
    .label-sm img { display:none; }    
	.read { margin: 0 20px;}
	nav ul#glonavi { background-image: none; text-align: right; padding-top: 30px;}
	ul#glonavi li a { background-image: none; height: auto; padding-top: 20px; text-align: right; width: 100%; float: right;}
	.f_left { width: 90%; margin: 0 auto; text-align: center; float: none;}
	.f_right { width: 90%; margin: 0 auto; text-align: center; float: none;}
	.l_right { float: none; margin: 5px 0; text-align: center;}
	img.spn{ display: none;}
	p.catch { font-size: 280%; marign: 10px; width: 100%;}
	p.text { font-size: 130%; margin: 10px; width: 100%;}
	#vision h2 img { max-width: 90%; padding-top: 0; }
	#video h2 img { max-width: 90%; margin: 0 auto; }
	#video p { width: 90%; margin: 0 auto;}
	video,#video_shop { max-width: 90%; height: auto; margin: 0 auto;}
	#kabu_menu { padding-top: 40px; }
	#kabu_menu img { max-width: 90%;}
	nav ul#kabu_submenu { display: none;}
	.ggmap { float: left; position: static; width: 100%; overflow: auto; height: auto; padding-bottom: 0;}
	.ggmap iframe,.ggmap object,.ggmap embed { width: 100%; position: static; height: 350px;  padding-bottom: 0;}
	.tab_area ul,.tab_area_kawa ul { margin: 0 auto; width: 90%;}
	.tab_area ul li,.tab_area_kawa ul li{ margin: 30px 5px; width: 30%; font-size: 16px;}
	.tab_area_kawa ul li{ margin: 30px 5px; width: 22%; font-size: 12px;}
	.shopinfo_box { height: auto; float: left; width: 100%;}
	.shopinfo_box p { width: 100%; }
	.course_box { width: 100%;}
	.course_box img { width: 55%;}
	.course_box p.course_title { font-size: 80%; }
	.course_box p.course_text { line-height: 1.2; margin: 0; } 
	.course_box p.course_sinakazu { padding-top: 20px;}
	.course_box p.course_price { font-size: 100%;}
	#vision h2,#shops h2 { font-size: 450%;}
	.shopimg img { max-width: 90%; }
	#bnr_space { height: auto;}
	#bnr_space img { max-width: 90%; margin: 0 auto;  padding-bottom: 10px;}
	footer { padding: 10px; height: auto;}
	footer img { margin: 0 auto;}
}
@media screen and (min-width: 320px) and (max-width: 374px) {
	body {
		background-image: url(../images/bg.jpg);
		background-repeat: no-repeat;
		background-position: top center; 
		width: auto;
		height: 100%;
	}
	body.kabukicho::before {
	  background:url(../images/kabukicho_bg.jpg) no-repeat left top;
	  background-size: auto 100%;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  content: "";
	  z-index: -1;
	}
	body.kawaguchi::before {
	  background:url(../images/kawa_bg.jpg) no-repeat left top;
	  background-size: auto 100%;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  content: "";
	  z-index: -1;
	}
	.wrapper { width: 100%; }
	.header { position: fixed; z-index: 999;}
	.header_logo img { max-width: 80%; position: fixed; z-index: 999;}
	.logo { display: none; }
    .label-sm:before{ content:attr(data-label); font-size: 14px; word-break:break-all; }
    .label-sm img { display:none; }    
	.read { margin: 0 20px;}
	nav ul#glonavi { background-image: none; text-align: right; position: fixed; z-index: 999; padding-top: 30px;}
	ul#glonavi li a { background-image: none; height: auto; padding-top: 20px; text-align: right; width: 100%; float: right;}
	.f_left { width: 90%; margin: 0 auto; text-align: center; float: none;}
	.f_right { width: 90%; margin: 0 auto; text-align: center; float: none;}
	.l_right { float: none; margin: 5px 0; text-align: center;}
	img.spn{ display: none;}
	p.catch { font-size: 280%; marign: 10px; width: 100%;}
	p.text { font-size: 130%; margin: 10px; width: 100%;}
	#vision h2 img { max-width: 90%; padding-top: 0; }
	#video h2 img { max-width: 90%; margin: 0 auto; }
	#video p { width: 90%; margin: 0 auto;}
	video,#video_shop { max-width: 90%; height: auto; margin: 0 auto;}
	#kabu_menu { padding-top: 40px; }
	#kabu_menu img { max-width: 90%;}
	nav ul#kabu_submenu { display: none;}
	.ggmap { float: left; position: static; width: 100%; overflow: auto; height: auto; padding-bottom: 0;}
	.ggmap iframe,.ggmap object,.ggmap embed { width: 100%; position: static; height: 350px;  padding-bottom: 0;}
	.tab_area ul,.tab_area_kawa ul { margin: 0 auto; width: 90%;}
	.tab_area ul li { margin: 30px 5px; width: 28%; font-size: 12px;}
	.tab_area_kawa ul li { margin: 30px 5px; width: 21%; font-size: 9px;}
	.shopinfo_box { height: auto; float: left; width: 100%;}
	.shopinfo_box p { width: 100%; }
	.course_box { width: 100%;}
	.course_box img { width: 54%;}
	.course_box p.course_title { font-size: 75%; }
	.course_box p.course_text { line-height: 1.2; margin: 0; font-size: 80%; } 
	.course_box p.course_sinakazu { padding: 0; font-size: 80%; margin: 0;}
	.course_box p.course_price { font-size: 100%; font-size: 80%;}
	#vision h2,#shops h2 { font-size: 450%;}
	.shopimg img { max-width: 90%; }
	#bnr_space { height: auto;}
	#bnr_space img { max-width: 90%; margin: 0 auto;  padding-bottom: 10px;}
	footer { padding: 10px; height: auto;}
	footer img { margin: 0 auto;}
}