@charset "utf-8";
/* CSS Document */

body{
	font-family:"microsoft YaHei","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.6;
	color:#333;
	background:#fff;
}

/*Main Visual*/

#containerMV{
  width: 100%;
  height: 0;
  padding-top: calc(380 / 1620 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background:url(../../images/bc_japan/bc_hakuba/mainVisual_bc_hakuba.jpg) center center / cover no-repeat;
  position:relative;
  border-top:3px solid #3399CC;
  border-bottom:3px solid #3399CC;
  
}

#title_MV{
	width:800px;
	background:rgba( 54,156,207,0.70);
	line-height:60px;
	color:#fff;
	font-size:36px;
	position:absolute;
	top: 40%;
	left: 0px;
	padding:0px 2px;
	text-align:center;
}
#MV_h1{
	margin:0 auto;
	}
#MV_subtitle{
	font-size:22px;
	
	line-height:50px;
}


#logo_MV{
	
	position:absolute;
	bottom:10%;
	right:7%;
}


/*コンテンツ共有*/

#main_title{
	width:1340px;
	margin:0 auto;
	font-size:40px
	
}

#container_main_side{
	width:100%;
	padding-top:100px;
	background:#eee;
}


#contents{
	width:1340px;
	margin:0 auto;
	background:#eee;
}

.subTitle{
    border-bottom:3px solid #3399cc;
	font-size:26px;
	line-height:30px;
	margin-bottom:30px;
	width:970px;
}
.title_h3{
	width:200px;
	font-size:20px;
	margin:5px 0 15px;
	background:#3399cc;
	color:#fff;
	line-height:30px;
	text-align:center;
}

    
.subtitle_h3:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 60px;
  height: inherit;
  border-bottom: 1px solid #3399cc;
}

.container_onePara{
	width:960px;
	margin:30px 0 50px 0;
	
}
.titleHighlight{
	width:150px;
	font-size:18px;
	background:#3399cc;
	color:#fff;
	line-height:25px;
	text-align:center;
	margin-bottom:10px;
}

/*メインコンテンツ*/


#contents_main{
	width:960px;
	float:left;
	margin:0 70px 120px 0px;
}





/*common*/
.explain_460{
	width:460px;
	margin-left:20px;
	float:left;
	line-height:2.3;
	
}
.explain_960{
	width:960px;
	line-height:2.3;
	margin:0 0 20px 0;
}

.photo_960{
	
	
}


.photo_460{
	width:460px;
	float:left;
}


/*スキー板の種類*/
#tooring{
	margin-top:30px;
}
.explain_500{
	width:500px;
	margin:0 70px 100px 0;
	float:left;
	line-height:2.0;
}



/*スキー板幅*/
#title_style{
	width:250px;
	font-size:18px;
	background:#3399cc;
	color:#fff;
	line-height:25px;
	text-align:center;
	margin:30px 0 30px 0;
}
.recommendedWidth{
	font-size:20px;
	color:#F8060A;
	margin:30px 0 20px;
	font-weight:bold;
}
.skierType{
	font-size:20px;
	font-weight:bold;
}
.length_shape{
	font-size:14px;
	font-weight:bold;
	padding-top:10px;
}

/*スキー板形状*/
#radius_image{
	float:left;
	margin-top:30px;
}

/*スキー板形状*/
#rockerType_image{
	margin:20px 0 70px;
	float:left;
}
.explain_450{
	width:450px;
	margin:0 60px 100px 0;
	float:left;
	line-height:2.0;
}
.explain_450 p{
	padding-bottom:30px;
}


#title_rocker{
	margin-top:30px;
}

/*side_link*/
.side_link{
	width:300px;
	float:left;
	margin:100px 0 320px 0px;
}

.box_topics{
	width:300px;
	background:#fff;
	position:relative;
	margin:10px 0px 50px;
	float:left;
}

.box_topics{
	color:#333;
}
.box_topics a{
	text-decoration:none;
	color:#333cc;
}

.box_title{
	width:250px;
	position:absolute;
	top: 90px;
	left: 0px;
	background:rgba(248,255,14,0.84);
	font-size:16px;
	line-height:30px;
	padding-left:10px;
}

.explain_box{
	font-size:12px;
	padding:5px 5px;
}

.box_topics{
	-webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out
}
.box_topics:hover{
	opacity: 0.4;  
	filter: alpha(opacity=60); 
}






/*サイドコンテンツ*/

#contents_side{
	width:310px;
	float:left;
}

.subtitle_side{
	border-bottom: 2px solid #666;
	font-size: 20px;
	padding-left: 5px;
	margin-bottom:15px;
}
.box_side{
	width:300px;
	float:left;
	margin-bottom:50px;
	background:#fff;
	
}
.box_side h3{
	width:296px;
	background:#3399cc;
	padding-left:5px;
	color:#fff;
}
.box_side img{
	float:left;
}
.box_side .explain_box_side{
	width:188px;
	float:left;
	line-height:1.5;
	font-size:14px;
	padding:5px 4px 5px 4px

}
.box_side a{
	text-decoration:none;
	color:#333;
}
.box_side:hover{
	opacity:0.4;  
	filter:alpha(opacity=60); 
}

.box_side{
	-webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out

}



@media screen and (max-width:480px){
	
#main_title{
	width:98%;
	margin:1% 1% 1%;
	font-size:120%;
	word-wrap:break-word;
	
}	

#mainVisual_B{
	width:100%;
}
#mainVisual_B img{
	width:100%;
	height:auto;
}
#title_MV{
	position:absolute;
	top: 40%;
	left: 0px;
	font-size:85%;
	width:100%;
	line-height:120%;
}
#MV_h1{
	font-size:120%;
	width:100%;
	line-height:150%;
}

#MV_subtitle{
	font-size:50%;
	line-height:120%;
	width:100%;
}


#container_main_side{
	width:100%;
	padding-top:10%;
	overflow:hidden;
	
}

#contents{
	width:100%;
}

#contents_main{
	width:100%;
	margin-bottom:10%;
	
}

.container_onePara{
	width:100%;

}
.subTitle{
	width:100%;
	font-size:120%;
	overflow:hidden;
	padding-left:2%;
	margin-bottom:0%;
}
#tooring{
	width:100%;
	margin-top:0%;
}
#freeRide{
	width:100%;
	margin-top:7%;
}
.explain_500{
	width:100%;
	margin:2% 0% 3%;
}
.explain_500 p{
	width:96%;
	font-size:90%;
	padding:0% 2% 0% 2%;
}

.explain_450{
	width:100%;
	margin:2% 0% 3%;
}
.explain_450 p{
	width:96%;
	font-size:90%;
	padding:0% 2% 0% 2%;
}


.box_example{
	width:100%;
	margin:3% 0% 10%;
}
.title_h3{
	width:50%;
	font-size:100%;
	line-height:130%;
	margin:4% 0 3% 2%;
	
}

.titleHighlight{
	width:50%;
	fontsize:50%;
	line-height:130%;
	margin-left:2%;
}
.box_example img{
	width:90%;
	height:auto;
	margin:3% 3% 5% 4%;
}
.spec{
    padding-left:3%;
}
.explain_970{
	width:100%;
	margin:2% 0% 8%
}
.explain_970 p{
	width:96%;
	font-size:90%;
	padding:0 2%
}
#title_style{
    width:70%;
	fontsize:50%;
	line-height:130%;
}

#80_90{
	width:100%;
}
#90_110{
	width:100%;
}
#110_130{
	width:100%;
}
.skierType{
	width:98%;
	font-size:100%;
	padding-left:2%;
}
.length_shape{
	width:95%;
	font-size:70%;
	padding-left:2%;
}
#about_radius{
	width:100%;
}
#radius_image img{
	width:100%;
	height:auto;
}
#about_shape{
	width:100%;
}
#rockerType_image img{
	width:100%;
	height:auto;
}
#title_rocker{
	width:80%;
	font-size:90%;
	line-height:110%;
	margin:4% 0 3% 2%;
	
}









#contents_side{
	width:100%;
}
.subtitle_side{
	width:98%;
	padding-left:2%;
	font-size:110%;
}


.box_side{
	width:96%;
	margin:2% 2% 5% 2%;
}
.box_side h3{
	width:98%;
}
.box_side img{
	width:30%;
	height:auto;
}
.box_side .explain_box_side{
	width:67%;
	font-size:90%;
}




}