/* ==========================================================================
   Base styles
   ========================================================================== */
html,body { background:url(../img/fitness/bg.jpg) center center; }

/* ==========================================================================
   :::::: wrap
   ========================================================================== */
.wrap { width:100%; max-width:1030px; margin:0 auto; }


/* ==========================================================================
   :::::: header
   ========================================================================== */
#header { margin:40px 0; }
#header .logo { margin-right:70px; float:left; width:195px; }
#header #g_navi { float:left; width:651px; height:54px; margin-top:5px; position:relative;  }
#header #g_navi .navi_concept,
#header #g_navi .navi_cafebar,
#header #g_navi .navi_fitness,
#header #g_navi .navi_access,
#header #g_navi .navi_contact { position:absolute; top:5px; }

#header #g_navi .navi_concept { left:0; }
#header #g_navi .navi_cafebar { left:129px; }
#header #g_navi .navi_fitness { left:258px; }
#header #g_navi .navi_access { left:387px; }
#header #g_navi .navi_contact { left:516px; }

/* ==========================================================================
   :::::: footer
   ========================================================================== */
#footer { margin-bottom:20px; }


/* ==========================================================================
   :::::: side - main
   ========================================================================== */
#sidebar { float:left; width:101px; height:140px; margin-top:3.4%; }
#sidebar .bx-pager-list ul li { margin-bottom:20px; }
#sidebar img { margin-bottom:15px; }

#main { float:right; width:880px; margin:10px 0 0 0; }


/* ==========================================================================
   :::::: slider
   ========================================================================== */
.slide { width:100%; height:520px; }

.col { position:relative; text-align:center; }
.row2 .col,
.row3 .col { background-color:#ffffff; }
.row2 .col { width:45%; max-width:380px; padding:10px; }
.row3 .col { width:32%; float:left; margin-right:2%; }
.row3 .end { margin-right:0; }

.text { margin-top:15px; text-align:center; width:100%; }
.text p { width:100%; padding:10px 0 20px 0; }
.text hr { width:93%; margin:0 auto; }

.photo img,
.text img { width:100%; }

#main01 img { width:100%; height:auto; }

#main02 hr { width:100%; }
#main02 .to_detail { padding:10px; }
#main02 .to_detail a { color:#758f95; }

#main03 .fRight { width:100%; max-width:350px; min-height:404px; background-color:#fff; padding:20px 30px; }
#main03 .fRight a { text-decoration:underline; color:#bfa59e; }
#main03 .fRight a:hover { color:#d2b7b0; }
#main03 .fRight table th,
#main03 .fRight table td { vertical-align:top; }
#main03 table th { padding-bottom:10px; }
#main03 table td { padding-bottom:10px; padding-left:10px; }

#main04 .h_img { position:absolute; top:-10px; left:-30px; }
#main04 { padding:10px 0 0 30px; width:850px; }
#main04 .text hr { width:98%; margin:0 auto; }
#main04 a { text-decoration:underline; }
#main04 .comingsoon { width:85%; text-align:center; font-size:20px; margin-top:40px; }

.bx-wrapper { margin-bottom:20px; }
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next { background: none; margin:0; }
.bx-wrapper .bx-pager {	padding-top: 0; }
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; }
.bx-wrapper .bx-prev { left: 0; }
.bx-wrapper .bx-next { right: 0; }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {	position: inherit; bottom: 0; width: 100px; }
.slide_navi{ width:140px; margin:0 auto; }
#slider-prev,
#slider-next { float:left; width:10px; margin:0; padding:0;}
#slider-pager { float:left; margin:0; padding:3px 0 0 0; }
.bx-pager , .bx-default-pager { padding:0; top:0; }
.bx-wrapper .bx-pager.bx-default-pager a {
	background: none;
	text-indent: -9999px;
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border:1px solid #333333;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #333333;
}
.lesson_detail{
	width:100%;
	margin:10px 0;
	text-align:center;
	padding:5px;
	background-color:#fff;
}
.lesson_detail a{
	color:#666;
}

/* ==========================================================================
   :::::: Media Queries
   ========================================================================== */
.minDisp ,
.line { display:none; }

@media only screen and (max-width:1150px) { 
	#header { text-align:center; margin:20px 0 30px 0; }
	#header .logo { margin-right:0; margin-bottom:20px; float:none; }
	#header #g_navi { float:none; margin:0 auto; }

	.wrap { width:90%; margin:0 auto; }
	
	#main { width:80%; }
	
	.slide { margin-bottom:60px; height:500px; }
	
	#main03 { height:1000px; }
	#main03 .fRight { max-width:270px; height:auto; max-height:none; }
	#main03 .fRight img { max-width:240px; }
	
	#main04 { height:1200px; }
	#main04 .col { float:none; width:90%; max-width:550px; margin:0 0 50px 0; }
}
@media only screen and (max-width:1120px) { 
	#main03 .fLeft img { width:100%; }
	#main03 .fLeft,
	#main03 .fRight { width:50%; }
}

@media only screen and (max-width: 1000px) { 
	#main02 { height:1200px; }
	#main02 .col { float:none; width:90%; max-width:550px; margin:0 0 20px 0; }
	#main03 { height:1650px; }
	#main03 .col { float:none; width:90%; max-width:550px; margin:0 0 40px 0; }
	#main03 .text img { width:80%; }
	#main03 .text .img_name { width:auto; }

}

@media only screen and (max-width:960px) { 
  	#main03 { height:1100px; }
	#main03 .fLeft { width:90%; max-width:480px; margin:0; float:none; padding:0 20px 20px 20px;}
	#main03 .fRight { width:90%; max-width:480px; margin:0; float:none; }
}

@media only screen and (max-width: 740px) { 
	#header #g_navi { width:500px; }
	#header #g_navi .navi_bg { width:100%; }
	
	#header #g_navi .navi_concept,
	#header #g_navi .navi_cafebar,
	#header #g_navi .navi_fitness,
	#header #g_navi .navi_access,
	#header #g_navi .navi_contact { width:98px; }

	#header #g_navi .navi_concept { left:0; }
	#header #g_navi .navi_cafebar { left:100px; }
	#header #g_navi .navi_fitness { left:200px; }
	#header #g_navi .navi_access { left:300px; }
	#header #g_navi .navi_contact { left:400px; }
	
}

@media only screen and (max-width: 620px) { 
	
	#sidebar { float:none; width:340px; height:40px; margin:0 auto 20px auto;}
	#sidebar .bx-pager-list ul li { margin-bottom:0; float:left; }
	#sidebar img { margin-bottom:0; width:80px; }
	#sidebar .main_navi_studio { padding-left:8px; }
	#sidebar .main_navi_trial { padding-left:5px; }
	
	#main { float:none; width:90%; margin:0 auto; }
	
	#main02 { height:1000px; }
	#main02 .col { margin:0 auto 20px auto; }
	
	/*#main03 .col { margin:0 auto 40px auto; }*/
	
	#main04 { height:950px; }
}

@media only screen and (max-width: 570px) { 
	.minDisp { display:inline; }
	
	.wrap { width:98%; margin:0 auto; }
	
	#header #g_navi { width:100%; text-align:center; }
	#header #g_navi .navi_bg { display:none; }
	#header #g_navi .navi_concept,
	#header #g_navi .navi_cafebar,
	#header #g_navi .navi_fitness,
	#header #g_navi .navi_access,
	#header #g_navi .navi_contact { width:90px; position:inherit; }
	
	#sidebar { float:none; }
	#main { float:none; }
	
	#sidebar { margin:0 auto; height:55px; padding-left:20px; }
	#sidebar ul li { float:left;  }
}

@media only screen and (max-width: 530px) { 
	
	#header #g_navi { width:300px; }
	.line { display:inherit; text-align:center; margin-bottom:10px;  }
	.line img { width:95%; }

}

@media only screen and (max-width: 385px) { 
	
	#sidebar  { width:200px; height:100px; padding-left:20px; }
	#sidebar img { width:95px; }
	#sidebar .main_navi_lesson { padding-left:10px; }
	#sidebar .main_navi_studio { padding-top:10px; padding-left:0; }
	#sidebar .main_navi_trial { padding-top:10px; padding-left:10px;}
	#sidebar .main_navi_sche { padding-top:10px; }
	#sidebar { margin-bottom:1em; }

	#main03 img { width:100%; }
	#main03 .fRight { padding:10px; }
}

@media only screen and (max-width: 620px) { 
	
	#sidebar  { position:relative; }
	#sidebar .main_navi_blog { position:absolute; top:28px; left:23%; }
}
@media only screen and (max-width: 570px) { 
	
	#sidebar  { position:relative; }
	#sidebar .main_navi_blog { position:absolute; top:28px; left:27%; }
}
@media only screen and (max-width: 385px) { 
	
	#sidebar  { position:relative; }
	#sidebar .main_navi_blog { position:absolute; top:80px; left:56%; }
}