@media only screen and (max-width:730px){
#device { display:block;}
#device p.pc_btn { display:none;}
#device p.sp_btn {display:block; }
}

@media only screen and (max-width:700px){

body { min-width:100%; font-size:100%;}
#header, #content{ width:100%;}
#footer { width:auto; text-align:center; }


#wrapper { border-top:none; overflow:hidden;}
.base { width:auto; margin:0 !important;}

.pc { display:none;}
.sm { display:block;}

#device p.pc_btn { display:block !important;}
#device p.sp_btn { display:none !important;}


img { max-width:100%;height: auto;}
#.size-full,.size-large { max-width:100%;height: auto;}



/*====================================================================================================
  HEADER
====================================================================================================*/
#header { background-color:#000; }
#header .head { margin: 0; width: 100%; height:85px; }
	
#header h1 { width:75%;}
#header h1 a {  padding:45px 0 15px 85px; height:80px; box-sizing: border-box; }

.menu-trigger { position: fixed; top:30px; right:30px; margin: 0; width: 0; height: 50px; padding-left: 30px; z-index: 9999; }
.menu-trigger span { position: absolute; left: 0; right: 0; width: 30px; height: 4px; background-color: #f8c300; z-index: 9999; }
.customize-support .menu-trigger { position: absolute; top:80px; right:30px; margin: 0; width: 0; height: 50px; padding-left: 30px; z-index: 9999; }
.menu-trigger,
.menu-trigger span { display: inline-block; transition: all ease .4s !important; box-sizing: border-box; cursor: pointer; padding-top: 3px; }
.menu-trigger span:nth-of-type(1) { top: 10px;}
.menu-trigger span:nth-of-type(2) { top: 0; bottom: 0;}
.menu-trigger span:nth-of-type(3) { bottom: 26px; }

.menu-trigger.active { top:25px; }
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(9px) rotate(-45deg); transform: translateY(3px) rotate(-45deg); }
.menu-trigger.active span:nth-of-type(2) { opacity: 0; }
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-9px) rotate(45deg); transform: translateY(-9px) rotate(46deg); bottom:24px; }

.Nav-sm { display: none; position:fixed; top:84px; background:#222; height:calc(100% - 60px); width:100%; margin-bottom:3%; z-index:9999; }
.Nav-sm ul.list { margin:5% 5% 2%; }
.Nav-sm ul.list li { border:0.5px solid #555; }
.Nav-sm ul.list li+li { margin-top:2px; }
.Nav-sm ul.list li a { display:block; text-decoration:none; color:#FFF; padding:4% 4% 4% 20%; font-weight:bold; font-size:125%; position:relative; }

.Nav-sm ul.list li.list-item a::after { /*common used for image icon*/
	content:"";
	position:absolute;
	height:34px;
	margin-left:5%;
	left:0;
	right:0;
	top:20%;
}
.Nav-sm ul.list li.lt1 a::after {
	background:url(../image/icon_bowling.png) no-repeat center;
	background-size:28px 34px;
	width:28px;	
}
.Nav-sm ul.list li.lt2 a::after {
	background:url(../image/icon_cafe.png) no-repeat center;
	background-size:28px 34px;
	width:28px;
}
.Nav-sm ul.list li.lt3 a::after {
	background:url(../image/icon_billiard.png) no-repeat center;
	background-size:34px 34px;
	width:34px;
}
.Nav-sm ul.list li.lt4 a::after {
	background:url(../image/icon_darts.png) no-repeat center;
	background-size:34px 34px;
	width:34px;
}
.Nav-sm ul.list li.lt5 a::after {
	background:url(../image/icon_pingpong.png) no-repeat center;
	background-size:34px 34px;
	width:34px;
	left:-5px;
}
.Nav-sm ul.list li.lt6 a::after {
	background:url(../image/icon_game.png) no-repeat center;
	background-size:38px 34px;
	width:38px;
}

.Nav-sm ul.list li.list-item a:hover, 
.Nav-sm ul.list li.list-item a.active { color:#000; }
.Nav-sm ul.list a.active::before,
.Nav-sm ul.list a:hover::before { /*common used in background color in hover*/
	content:""; 
	background:#f8c300; 
	width:99.9%; 
	height:100%; 
	position:absolute; 
	top:0; 
	bottom:0; 
	right:0; 
	left:0; 
	z-index:-1; 
	transition:background 0.5s ease-in-out; 
	-moz-transition:background 0.5s ease-in-out; 
}

.Nav-sm ul.list li.list-item a.active::after,
.Nav-sm ul.list li.list-item a:hover::after { /*change icon when hover and active*/
	content:""; 
	transition:background 0.5s ease-in-out; 
	-moz-transition:background 0.5s ease-in-out;
	z-index:1;
}

.Nav-sm ul.list li.lt1 a.active::after,
.Nav-sm ul.list li.lt1 a:hover::after {	
	background:url(../image/icon_bowling_active.png) no-repeat center;	
}
.Nav-sm ul.list li.lt2 a.active::after,
.Nav-sm ul.list li.lt2 a:hover::after {
	background:url(../image/icon_cafe_active.png) no-repeat center;
}
.Nav-sm ul.list li.lt3 a.active::after,
.Nav-sm ul.list li.lt3 a:hover::after {	
	background:url(../image/icon_billiard_active.png) no-repeat center;
}
.Nav-sm ul.list li.lt4 a.active::after,
.Nav-sm ul.list li.lt4 a:hover::after {	
	background:url(../image/icon_darts_active.png) no-repeat center;
}
.Nav-sm ul.list li.lt5 a.active::after,
.Nav-sm ul.list li.lt5 a:hover::after {	
	background:url(../image/icon_pingpong_active.png) no-repeat center;
}
.Nav-sm ul.list li.lt6 a.active::after,
.Nav-sm ul.list li.lt6 a:hover::after {	
	background:url(../image/icon_game_active.png) no-repeat center;
}

.Nav-sm ul.nav-r { margin:0 5%; }
.Nav-sm ul.nav-r li a { 
	text-decoration:none; 
	color:#fff; 
	font-weight:bold; 
	font-size:14px; 
	background:url(../image/arrow_right.png) no-repeat left 53%;
	background-size:auto 30%;
	display:block;
	padding:2% 2% 2% 3%;
	margin-left:3%;
}
.Nav-sm ul.nav-r li a.active,
.Nav-sm ul.nav-r li a:hover { color:#f8c300; transition:0.5s ease-in-out;  }

/*====================================================================================================
  CONTENT
====================================================================================================*/
#content {}


/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { text-align:left; }
#footer .fbox { padding:8% 5%; max-width:100%; }
#footer .fbox .box { width:100%; }

#footer .fbox .box,
#footer .fbox ul.b_sns { 
	float:none; 
}
#footer .fbox .fb1 .dir { margin-bottom:20px; }
#footer .fbox .fb1 .address { padding:10px 0; margin-bottom:10px; border-bottom:1px dotted #666; }
#footer .fbox .fb2 p { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #666; }

#footer .fbox ul.b_sns { margin-top:40px; }
#footer .fbox ul.b_sns li { margin-left:15px; }
#footer .fbox ul.b_sns li:first-child { margin-left:0; }

/*====================================================================================================
  TOPPAGE 
====================================================================================================*/
#toppage {}

/*INFORMATION*/
#toppage .information { max-width:90%; margin:5% 5% 0; height:660px; position:relative; }
#toppage .information .btn { width:35%; padding:7px!important; }
#toppage .information .btn a { padding:0; }
#toppage .information ul#tab li { width:50%; }
#toppage .information ul#tab li:nth-child(3) { border-top:0.5px solid #454545; border-left:0.5px solid #454545; }
#toppage .information ul#tab li:nth-child(4) { border-top:0.5px solid #454545; }
#toppage .information .content_wrap { padding:5% 5% 4%; }
#toppage .information .content_wrap ul { position:relative; padding:3% 2% 3% 0; margin:0; }
#toppage .information .content_wrap ul li+li { margin-left:0; }
#toppage .information .content_wrap ul li:nth-child(1) { display:block; padding:0; width:90px; }
#toppage .information .content_wrap ul li:nth-child(2) { position:absolute; }
#toppage .information .content_wrap ul li:last-child { text-indent:95px; }
#toppage .slick-box h2 {
    font-size: 70%;
}
.slick-dots {
    position: absolute;
    bottom: 5px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-prev:before {
    margin-left: 2px;
}


.movie{
    max-width:100%;
    position: absolute;
    margin: 280px auto 0;
    right: 0;
    left: 0;
}



/* PICKUP */
#toppage .pickup { margin-top:65%; padding-bottom:3%; }
#toppage .pickup h2.mid { padding:40px 0; }
#toppage .pickup .pickbox { margin:5% auto 0; max-width:100%; }
#toppage .pickup .pick_kiji { float:none; width:90%; height:auto; margin:2% 5%!important; clear:both; }
#toppage .pickup .pick_kiji::after { clear:both; display:block; content:""; }

/*FLOOR*/
#toppage .floor {}
#toppage .floor .flor { margin-bottom:0; }
#toppage .floor .flor p { width:33.3%; padding-top:57.2%; }
#toppage .floor .flor p::before, #toppage .floor .flor p::after { display:none; }
#toppage .floor .flor p a { font-size:140%; padding:30% 2%; }
#toppage .floor .flor p a::after { margin-top:0%; }
#toppage .floor .flor p a small { font-size:65%; }

/*====================================================================================================
  SUB PAGE
====================================================================================================*/
.pan { display: none;}

#subpage { 
    margin:0 auto !important;
	padding: 5%;
    width:100%;
    box-sizing:border-box;
	
}
h2.sb_tit {
	padding:30px 0;
}
	
/* MIDASHI */
h3.mid { margin:0; padding: 5%; }

/* BG */
.w_box { margin: 0; padding:5%; width: 100%; }


/*　FLOORBOX */
.floorbox { margin:0 0 5%; }
.floorbox::after { display: none;}
.floorbox .comment { max-width:none; padding:5%;}
.floorbox .comment::after { display: none}
.floorbox h4 { padding: 50px 0 20px; }
.floorbox .come { font-size:100%; }
.floorbox .photo img {  width: 100%; }
.floorbox.floor_l .comment,
.floorbox.floor_r .comment,
.floorbox.floor_l .photo,
.floorbox.floor_r .photo { float:none;}
.floorbox.floor_l .kai,
.floorbox.floor_r .kai { left: inherit; right:0; }

/*GALLERY*/
ul.galler { width:100%; clear:both; margin:0 0 5%; }
ul.galler::after { clear:both; content:""; display:block; }

/* HYOU */
table.hyou,
table.hyou.hyou2 { margin:0 0 5%; width: 100%;}

/* COMMENT */
.comment1 { padding:0 0 5%;}
.comment1+.comment1{padding-top: 5%;}

/*CONTACT BANNER*/
.contact { padding-top:0; margin:2% 0 0; }
.contact ul.contact_bana li { display:block; }
.contact ul.contact_bana li:first-child { padding:4% 5% 3%; font-size:140%; } 
.contact ul.contact_bana li:nth-child(2) { font-size:140%; font-weight:500; }
.contact ul.contact_bana li:nth-child(3) { padding:2% 5% 3%; }

	p.state{margin-bottom:0 !important;}
}
