@-ms-viewport {
  width: device-width;
}
/* Desktop 
@media (min-device-width : 1050px) {


}

*/

/* Tablet */
@media (min-width : 768px) and (max-width : 1023px) {
	.sitetitle { width:320px; }
	.site { width:90%; }
	#global_header_inner { width:90%; margin: 0 auto; }
	#global_header ul li { margin-right: 1px; }	
	.nav01 { width:24.5%; }
	.nav02 { width:27%; }
	.nav03 { width:22%; }
	.nav04 { width:24.3%; }
	.nav05 { height:55px; }

	#bg-home { width:100%; }

	#bg-home #container {
		width:100%;
		background-size:contain;
		margin-left:0px;
	}
	
	#container-inner { width:100%; }
	#content { width:100%; }
	body#burako div#content { margin-top:85px; }
	body#burako h2 { width:70%; margin-left:120px; }
	
	body#burako div.bura_type_wrap {
		width: 86%;
		/*float:right;*/
		margin: 0 auto;
		margin-top: 5px;		
	}	
	body#burako div.bura_type_wrap ul {
		width: 33.8%;	
		height:auto;		
	}
	.main-char { width: 32.4% }
	body#burako div.bura_type_wrap ul li {
		width:100%;
		position:relative;
	}
	body#burako div.bura_type_wrap ul li#bura_type01 { height:33%; }
	body#burako div.bura_type_wrap ul li#bura_type02 { top: 55px; height:33%; }
	body#burako div.bura_type_wrap ul li#bura_type03 { top: 80px; height:33%; }
	body#burako div.bura_type_wrap ul li#bura_type04 { height:33%; }
	body#burako div.bura_type_wrap ul li#bura_type05 { top: 53px; height:33%; }
	body#burako div.bura_type_wrap ul li#bura_type06 { top: 92px; height:33%; }

	body#burako div.bura_type_wrap ul.floatLeft li span.bura_img  { top: 8px; right: 3px; }
	body#burako div.bura_type_wrap ul.floatRight li span.bura_img { top: 9px; left:  0px; }
			
		
	body#burako div.bura_type_wrap ul li span.bura_img {
		width: 86%;	height: 86%;
	}
	body#burako div.bura_type_wrap ul li#bura_type02 span.bura_img {
		width: 79% !important;	height: 79% !important;
	}
	body#burako div.bura_type_wrap ul li#bura_type06 span.bura_img {
		width: 79% !important;	height: 79% !important;
	}
		
	body#burako div.bura_type_wrap ul li#bura_type01 a:hover span.bura_img { background-size:contain; }
	body#burako div.bura_type_wrap ul li#bura_type02 a:hover span.bura_img { background-size:contain; }
	body#burako div.bura_type_wrap ul li#bura_type03 a:hover span.bura_img { background-size:contain; }
	body#burako div.bura_type_wrap ul li#bura_type04 a:hover span.bura_img { background-size:contain; background-position:right top; }
	body#burako div.bura_type_wrap ul li#bura_type05 a:hover span.bura_img { background-size:contain; background-position:right top; }
	body#burako div.bura_type_wrap ul li#bura_type06 a:hover span.bura_img { background-size:contain; background-position:right top; }
			
	body#burako div#banner {
		margin: 40px 0 15px 32px;
		padding-right:5px;
		width:88%;

	}
	body#burako div#banner .floatLeft {
		margin-left:40px;
	}


/* guidebook section */
	#bg-guidebook { width:100%; }
	#bg-guidebook #container { width:100%; background-size:contain;	}
	body#guide div#contentTitle {
		width: 90%; margin:auto;
		margin-top: 20px;
	}
	body#guide div#contentTitle h2.floatLeft { margin-left:15px; }
	body#guide div#contentTitle div.floatRight { margin-right:10px; }
	body#guide #braGaku { width:90%; margin:auto; left:0; }
	body#guide #braGaku .item { width:30%; }
	
	#QAmobile { display:none !important; }
	#braGaku .content h3, .content_body, .balloon { display:none !important; }
	.AnsTablet { display:block !important; }
	body#guide #braGaku .content { padding: 10px; padding-bottom:0px; }	
	
	body#guide #braGaku #braGaku1.open  { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku2.open  { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku3.open  { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku4.open  { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku5.open  { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku6.open  { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku7.open  { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku8.open  { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku9.open  { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku10.open { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku11.open { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku12.open { background: #FFF; width:95% !important; }
	body#guide #braGaku #braGaku13.open { background: #FFF; width:95% !important; }
	
	body#guide div#QandA {	width: 90%; margin:auto;	margin-top: 40px;	}
	body#guide div#QandA div.qa_bg { background-size:contain; }	
	body#guide div#QandA div.qa_box { float:none; margin:auto; } 
	
	
/* bratest section */
	#bg-bratest { width:100%; }
	#bg-bratest #container { width:100%; background-size:contain; margin-left: 0px; }
	#bg-bratest #main { width:90%; margin: 50px auto; }
	#checkBox { width:88%; }
	#checkBoxInner { padding: 0 35px 15px 35px; }

/* result section */
	#bg-result { width:100%; }
	#bg-result #container { width:100%; background-size:contain;  margin-left: 0px; }
	#bg-result #result { width:90%; margin: 50px auto; }
	#bg-result #resultBoxInner { width:100%; }
	#state { margin-left:15px; }
	#state .right { width:67%; }
	#state .left { width:33%; }
	#percent { right:auto; }
	.m-t { margin-top:60px; }

	.showMobile { display:none !important; }
	.hideMobile { display:block; }

}



/* Mobile Larger */
@media (max-width : 767px) { /*(min-width : 541px) and*/
	body {  font-family: Helvetica,"Apple LiGothic",Arial,Verdana,sans-serif; }
	#global_header_inner { display:none !important; }
	#mobile_header {
		display:block !important;
		background-color: #ffeef3;
		width: 100%;
		height:70px;
		top:0px;
		position:fixed;
		text-align: center;
		z-index:1000;
	}
	.nav-collapse ul { display:block; }	
	.nav01 { background-color:#c0df67; }
	.nav02 { background-color:#ffbc83; }
	.nav03 { background-color:#ffb0c0; }
	.nav04 { background-color:#a0deca; }
	.nav05 { background-color:#ffe2e4; }
	.hidden { display:block !important; }
	
	#bg-home { width:100%; }
	#bg-home #container { width:100%; background:none; background-color:#fffddf; margin-left:-10px; }	
	#container-inner { width:100%; }
	#content { width:100%; margin-bottom:0px; }

	body#burako h2 { width:100%; margin-left:0px; }	
	body#burako div.bura_type_wrap { display:none !important; }
	
	.bx-wrapper { display:block !important; margin-top:30px !important; }
	.bracheck li img { width:95%; max-width:480px; margin:auto; }
	
	body#burako div#banner { margin: 40px 0 0px; width:100%; padding-right:0px; margin-left:-5px; }	
	body#burako div#banner .floatLeft {
		width:90%; max-width:384px;
		margin:15px auto;
		float:none;
	}
	
	
/* guidebook section */
	#bg-guidebook { width:100%; }
	#bg-guidebook #container { width:100%; background:none; background-color:#fff; margin-left:0px; }
	body#guide div#contentTitle { width:100%; margin-top:85px; }
	body#guide div#contentTitle h2.floatLeft { margin-left:15px; }
	body#guide div#contentTitle div.floatRight { margin-right:10px; }
	body#guide #braGaku { width:50%; display:none !important; }
	#QAmobile { display:block !important; margin: 40px auto; width:100%; }	
	body#guide #braGaku .item {	width:30%; }
	

	body#guide div#QandA h3.QApic { display:none !important; }
	body#guide div#QandA div.QAtable { display:block !important; background-color:#efa4a5; }
	body#guide div#QandA {	width: 90%; margin:auto;	margin-top: 40px;	}
	body#guide div#QandA div.qa_bg { background:none; background-color:#efa4a5; padding-left:0px; }	
	body#guide div#QandA div.qa_box { float:none; margin:auto; } 
	body#guide div#QandA div.qa_box dl { width:260px !important; font-family: Helvetica; }
	
/* bratest section */
	#bg-bratest { width:100%; }
	#bg-bratest #container { width:100%; background:none; background-color:#fff; margin-left:0px; }
	#bg-bratest #main { width:97%; margin: 30px auto; margin-top:90px; }
	#bg-bratest #main h2 { width:100%; }
	#checkBox { width:92%; margin-bottom:20px; }
	#checkBoxInner { padding: 0 10px 15px 10px; }
		
/* result section */
	#bg-result { width:100%; }
	#bg-result #container { width:100%; background:none; background-color:#fff; margin-left:0px; }
	#bg-result #result { width:95%; margin: 50px auto; }
	#bg-result #resultBoxInner { width:100%; margin-top:90px; }
	#state .right { width:100% !important; }
	#state .left { width:100% !important; }
	#percent { position:relative; right:5px; top:-45px; }
	.m-t { margin-top:45px; }	
	#underBtn .showMobile { display:inline !important; }
	#typeTxt .showMobile { display:inline !important; }
		
	.showMobile { display:block !important; }
	.hideMobile { display:none !important; }	
		
}


/* Mobile */
@media (max-width : 540px) {
	.mlogoIMG { width:232px !important; height:50px !important; margin-top:10px; }
	.c45 { width:95% !important; }
	#bg-home #container { margin-left:0px !important; }
	body#burako div#content { margin-top:85px !important; padding-left:0px !important; }
	.bx-wrapper { margin-top:20px !important; }
	body#guide div#contentTitle h2.floatLeft { float:none !important; margin:0 auto !important; }	
	body#guide div#QandA {	width: 100% !important; }
	body#guide div#QandA div.qa_box { width:95% !important; }
	
	body#guide #braGaku { width:50%; display:none !important; }
	#QAmobile { display:block !important; margin: 40px auto; width:100%; }	
	/*.onImg { width:65% !important; height:65% !important; }*/
	.onSub { width:272px !important; height:60px !important; margin-bottom:20px; }
	.showMobile { display:block !important; }
	.hideMobile { display:none !important; }	

	#state .right { width:100% !important; }
	#state .left { width:100% !important; }
	#percent { position:relative; right:5px; top:-20px; }
	#percent img { height:75px !important; width:auto; }
	#underBtn .showMobile { display:inline !important; }
	#typeTxt .showMobile { display:inline !important; }

}