@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/gujyo/washigatake/mainVisual_washigatake.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:90px;
	color:#fff;
	font-size:48px;
	position:absolute;
	top: 50%;
	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%;
}


/*コンテンツ共有*/

#container_main_side{
	width:100%;
	padding-top:100px;
	background:#eee;
}
#main_title{
	width:1340px;
	margin:0 auto;
	font-size:40px
	
}


#contents{
	width:1340px;
	margin:0 auto;
	background:#eee;
	
}

.subtitle{
	border-bottom: 2px solid #3399cc;
	font-size: 32px;
	margin-bottom:10px;
	
}


.subtitle_h3{
	font-size: 24px;
	padding-left: 0px;
	margin:40px 0 10px 0px;
	line-height:28px;
	
}
.subtitle_h3_afterh2{
	font-size: 24px;
	padding-left: 0px;
	margin:30px 0 10px 0px;
	line-height:28px;
	
}
.subtitle_h3_line{
	font-size: 24px;
	padding-left: 0px;
	margin:20px 0 20px 0px;
	line-height:32px;
	border-bottom:2px solid #666;
}
.subtitle_h4{
	font-size: 20px;
	padding-left: 0px;
	margin:20px 0 5px 0px;
	line-height:24px;
	
}
.subtitle_recom{
    line-height: 40px;
    border-radius: 20px;
    padding-left: 15px;
    font-size: 20px;
	background-color:#3399cc;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 15px;
}


.long_c_lebght{
	width:300px;
	font-size:24px;
	background-color:#3399cc;
	color:#fff;
	text-align:center;
	line-height:40px;
	font-weight:500;
}

.table_ramarks{
	font-size: 12px;
}

.container_onePara{
	width:960px;
	margin:50px 0 50px 0;
	
}
.container_onePara_lmg{
	width:960px;
	margin:30px 0 10px 0;
	
}
.container_photo_exp{
   width:960px;
	margin:10px 0 30px 0;
	
}

.ski_resort_data{
	width:960px;
	padding:25px 5px 25px;
	background-color:#f5f5f5;
	margin:50px 0 50px 0;
}

/*corse data*/
.base_info{
	width:300px;	
	paddng:0 0px 0 0px;
	float:left;
}
/*base nfo*/
.base_table{
	width:100%;
    border-collapse: separate;
    border-spacing: 0px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.base_table th{
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background-color:rgba(51,153,204,0.80);
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}



.base_table td{
	padding: 0 0 2px 2px;
    background-color: #fafafa;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
	text-align:center;
}

/*ratio*/

.course_ratio{
	width:300px;
	float:left;
	padding:0 0px 0 20px;
}



.course_ratio table{
	width:280px;
	text-align:center;
	color:#008982;
}



.course_ratio table td p{
	background:#F9F8C8;
}

.course_ratio dl {
	font-size:18px;
	overflow:hidden;
	height:auto;
	margin-bottom:35px;
}

.course_ratio dt {
	float:left;
	width:200px;
	color:#777;
	padding:8px 0 6px 0;
	border-bottom:1px solid #999;
}
.course_ratio dd {
	float:right;
	width:80px;
	padding:8px 0 6px 0;
	text-align:right;
	color:#333;
	border-bottom:1px solid #999;
}

.course_ratio .course h2{
	margin-top:15px;
}

.course_ratio .course table{
	color:#555;
	line-height:1.3em;
	margin:15px 0 0 0;
}
.course_ratio .course td{
	padding-top:5px;
}
.course_ratio table .color01{border-top:30px solid #7fc072;}
.course_ratio table .color02{border-top:30px solid #d35265;}
.course_ratio table .color03{border-top:30px solid #444444;}
.course_ratio table .color04{border-top:30px solid #1152b1;}
.course_ratio table .color05{border-top:30px solid #1da6ad;}
.course_ratio table .color06{border-top:30px solid #87c6ed;}
.course_ratio table .color07{border-top:30px solid #206d81;}

.course_ratio table .color01 strong{color:#7fc072;}
.course_ratio table .color02 strong{color:#d35265;}
.course_ratio table .color03 strong{color:#444444;}
.course_ratio table .color04 strong{color:#1152b1;}
.course_ratio table .color05 strong{color:#1da6ad;}
.course_ratio table .color06 strong{color:#87c6ed;}
.course_ratio table .color07 strong{color:#206d81;}

.course_ratio table .w10{width:10%;}
.course_ratio table .w15{width:15%;}
.course_ratio table .w20{width:20%;}
.course_ratio table .w25{width:25%;}
.course_ratio table .w30{width:30%;}
.course_ratio table .w35{width:35%;}
.course_ratio table .w40{width:40%;}
.course_ratio table .w45{width:45%;}
.course_ratio table .w50{width:50%;}
.course_ratio table .w55{width:55%;}
.course_ratio table .w60{width:60%;}
.course_ratio table .w65{width:65%;}
.course_ratio table .w70{width:70%;}
.course_ratio table .w75{width:75%;}
.course_ratio table .w80{width:80%;}
.course_ratio table .w85{width:85%;}
.course_ratio table .w90{width:90%;}
.course_ratio table .w95{width:95%;}
.course_ratio table .w100{width:100%;}



/*lift nfo*/
.lift_info{
	width:300px;	
	margin:0 0 0 30px;
	paddng:0 0px 0 0px;
	float:left;
}


.lift_table{
	width:100%;
    border-collapse: separate;
    border-spacing: 0px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.lift_table th{
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background-color:rgba(51,153,204,0.80);
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}



.lift_table td{
	padding: 0 0 2px 2px;
    background-color: #fafafa;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
	text-align:center;
}
#lift_other{
	font-size:12px;
}
.resort_info{
	width:480px;
	
}

.ticket_table{
	width:100%;
    border-collapse: separate;
    border-spacing: 0px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.ticket_table th{
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background-color:rgba(51,153,204,0.80);
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}



.ticket_table td{
	padding: 0 0 2px 2px;
    background-color: #fafafa;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
	text-align:center;
}

.table_ramarks{
	width:100%;
	font-size:12px;
	line-height:18px;
}

.tour_table{
	width:100%;
    border-collapse: separate;
    border-spacing: 0px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.tour_table th{
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background-color:rgba(51,153,204,0.80);
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}



.tour_table td{
	padding: 0 0 2px 2px;
    background-color: #fafafa;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
	text-align:center;
}





/*メインコンテンツ*/


#contents_main{
	width:960px;
	float:left;
	margin:0 70px 120px 0px;
}


.explain_460{
	width:460px;
	margin-left:20px;
	float:left;
	line-height:2.3;
	
}
.explain_400{
	width:395px;
	margin-left:15px;
	float:left;
	line-height:2.3;
	
}
.explain_960{
	width:960px;
	line-height:2.3;
	margin:0 0 50px 0;
}

.explain_960_nmg{
	width:960px;
	line-height:2.3;
	margin:0 0 0px 0;
}


.photo_960{
	margin:0 0 15px 0;
}
.photo_460{
	width:460px;
	float:left;
}
.explain_photo{
	width:900px;
	text-align:left;
	margin:0px 25px 10px;
	font-size:14px;
}
.explain_photo_s{
	width:900px;
	text-align:center;
	margin:0px 25px 10px;
	font-size:14px;
}

.explain_tips{
	width:954px;
	font-size:14px;
	line-height:1.6;
	border:dotted #3399cc 2px;
	padding:3px 3px;
}


/*boxlink*/
.box_link{
	width:210px;
	position:relative;
	float:left;
	margin:20px 15px 50px;
}

.box_link_title{
	width:180px;
	position:absolute;
	top: 60px;
	left: 0px;
	background:rgba(54,156,207,0.70);
	font-size:16px;
	line-height:30px;
	padding-left:10px;
	color:#fff;
}
.box_link_title_s{
	width:180px;
	position:absolute;
	top: 100px;
	left: 0px;
	background:rgba(54,156,207,0.70);
	font-size:14px;
	line-height:30px;
	padding-left:10px;
	color:#fff;
}

.box_link a{
	text-decoration:none;
	color:#333;
}

.box_link{
	-webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out
}
.box_link:hover{
	opacity:0.4;  
	filter:alpha(opacity=60); 
}

/*box_link_400*/

.box_link_400{
	width:450px;
	float:left;
	margin:30px 380px 30px 20px;
	background:#fff;
	
}
.box_link_400 h3{
	width:450px;
	background:#3399cc;
	text-align:center;
	font-size:24px;
	color:#fff;
}
.box_link_400 img{
	float:left;
}
.box_link_400 .explain_box_link_400{
	width:246px;
	float:left;	
	font-size:18px;
	line-height:1.5;
	padding-left:4px;

}
.box_link_400 a{
	text-decoration:none;
	color:#333;
}
.box_link_400:hover{
	opacity:0.4;  
	filter:alpha(opacity=60); 
}

.box_link_400{
	-webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out

}



.container_table{
	margin-right:20px;
	padding:5px;
	background-color:#f5f5f5;
}
.title_pros{
	color:rgba(22,187,102,1.00);
	font-size:18px;
}

.title_cons{
	color:rgba(215,35,38,1.00);
	font-size:18px;
}
.source{
	font-size:12px;
}

.resort_info{
	width:960px;
	margin:30px 0 15px;
}
.tour_info{
	width:960px;
	margin:10px 0 15px;
}


/*link*/
.link_letter{
	margin:20px 0px 20px;
}

.link_detail{
	width:900px;
	margin:10px 0px 10px 5px;
	font-size:18px;
}

/*procon*/
.pros_cons{
	width:960px;	
	font-size:14px;
    line-height:1.8;
	margin:20px 0 70px 0px;
}
#good_point{
	width:467px;
	float:left;
	}
#pros{
	width:463px;
	border:2px solid rgba(22,187,102,1.00);
	background-color:#f5f5f5;
}
#effort_point{
	width:467px;
	margin:0 0 0 20px;
	float:left;
	}
#cons{
	width:463px;
	border:2px solid rgba(215,35,38,1.00);
	background-color:#f5f5f5;
	
}
.li_procon{
	padding:0 1em 0 2em;
	list-style-type:square;	
}
.container_table{
	margin-right:20px;
	padding:5px;
	background-color:#f5f5f5;
}
.title_pros{
	color:rgba(22,187,102,1.00);
	font-size:18px;
}

.title_cons{
	color:rgba(215,35,38,1.00);
	font-size:18px;
}
.source{
	font-size:12px;
}


/*advantage*/
.box_advantage{
	width:940px;	
	font-size:20px;
	padding:10px 10px;
	margin:30px 0px 30px 0px;
	background:#3399cc;
	line-height:2.0;
	font-weight:700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
	border-radius: 10px;
}
.points{
	background-color:#fff;
    border-radius: 10px;
}
.subtitle_adv{
	text-align:center;
	color:#FFFFFF;
	line-height:100%;
	font-size:24px;
	padding-bottom:10px;
	
}
.points ul{
	padding:5px;
}


/*サイドコンテンツ*/

#contents_side{
	width:310px;
	float:left;
}

.subtitle_side{
	border-bottom: 2px solid #666;
	font-size: 24px;
	padding-left: 15px;
	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:196px;
	float:left;
	font-size:16px;
	line-height:1.5;
	padding-left: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){
	
#contents{
	width:100%;
   overflow:hidden;
}

#container_main_side{
	width:100%;
	padding-top:10%;
	
	
}

#main_title{
	width:98%;
	margin:1% 1% 1%;
	font-size:120%;
	word-wrap:break-word;
	
}	

#title_MV{
	position:absolute;
	top: 50%;
	left: 0px;
	font-size:100%;
	width:75%;
	line-height:120%;
}
#MV_h1{
	font-size:100%;
	width:100%;
	line-height:150%;
}

#MV_subtitle{
	font-size:50%;
	line-height:140%;
	width:100%;
}



#contents_main{
	width:100%;
	margin-bottom:3%;
	
}

.container_onePara{
	width:100%;
	margin:2% 0% 15% 0%;

}
.container_onePara_lmg{
	width:100%;
	margin:2% 0% 10% 0%;
	
}
.container_photo_exp{
	width:100%;
	margin:0% 0% 7% 0%;
	}

.subtitle{
		width:99%;
	padding-left:1%;
	font-size:100%;
}

.subtitle_h3{
	width:99%;
	padding-left:1%;
	font-size:95%;
	margin:5% 0% 0% 1%; 
}
.subtitle_h3_line{
	width:99%;
	padding-left:1%;
	margin:3% 0% 2%; 
	font-size:100%;
	
}
.subtitle_h3_afterh2{
	width:99%;
	padding-left:1%;
	font-size:100%;
	margin:5% 0% 0%; 
}
.subtitle_h4{
	width:99%;
	padding-left:1%;
	font-size:95%;
	margin:5% 0% 0% 0%; 
}

.subtitle_recom{
	width:94%;
	font-size:90%;
    line-height: 110%;
    padding:1% 2% 1% 2%;
    margin:1% 1% 2% 1%;
}


.long_c_lebght{
	width:50%;
	font-size:100%;
	background-color:#3399cc;
	color:#fff;
	text-align:center;
	line-height:170%;
}

.container_topics{
	width:100%;
}

.photo_960{
	width:100%;
	margin:0% 0% 0%;
}
.photo_960 img{
	width:100%;
	height:auto;
}
.photo_460{
	width:100%;
}
.photo_460 img{
	width:100%;
    height:auto;
}


.explain_460{
	width:96%;
	font-size:90%;
	line-height:170%;
	margin:3% 2% 0% 2%;
}
.explain_400{
	width:96%;
	font-size:90%;
	line-height:170%;
	margin:3% 2% 5% 2%;
}

.explain_960{
	width:96%;
	font-size:90%;
	line-height:170%;
	margin:1% 2% 7% 2%;
}
.explain_960_nmg{
	width:96%;
	font-size:90%;
	line-height:170%;
	margin:1% 2% 3% 2%;
	
}
.explain_photo{
	width:95%;
	font-size:70%;
	line-height:170%;
	margin:1% 2% 5% 2%;
	text-align:left;
}
.explain_photo_s{
	width:95%;
	font-size:70%;
	line-height:170%;
	margin:1% 2% 5% 2%;
	text-align:left;
}
.source{
	width:96%;
	font-size:80%;
	line-height:170%;
	margin:3% 2% 5% 2%;
	
}

#contents_side{
	width:100%;
}
.subtitle_side{
	width:98%;
	padding-left:2%;
	font-size:140%;
}

.source{
	font-size:60%;
}
.resort_info{
	width:100%;
	line-height:150%;
	margin:5% 0% 2%;
	
}
.resort_info p{
	font-size:90%;
	width:98%;
	padding-left:2%;
	margin:0% 0% 0%;
	
}
.tips{
	width:98%;
}
.explain_tips{
	width:100%;
	font-size:80%;
	padding:1% 1%;
}
/*box_link*/
.box_link{
	width:46%;
	margin:2% 2%;
	position:relative;
}
.box_link img{
	width:100%;
	height:auto;
}
.box_link_title{
	width:90%;
	font-size:90%;
	position:absolute;
	top: 20%;
	left: 0%;
}
.box_link_title_s{
	width:90%;
	font-size:85%;
	position:absolute;
	top: 20%;
	left: 0%;
}

/*boxlink_400*/

.box_link_400{
	width:97%;
	margin:3% 1% 4% 1%;
}
.box_link_400 h3{
	width:100%;
	font-size:100%;
}
.box_link_400 img{
	width:40%;
	height:auto;
	}
.box_link_400 .explain_box_link_400{
	width:57%;
	font-size:90%;
}
/*advantage*/
.box_advantage{
	width:96%;	
	font-size:80%;
	padding:1% 1%;
	margin:2% 1% 0% 1%;
	line-height:180%;

}
.points{
    width:100%;
}
.subtitle_adv{
     width:100%;
	line-height:100%;
	font-size:120%;	
	padding:1%;
}
.points ul{
	padding:2%;
}


/*table*/
.ski_resort_data{
	width:100%;
	margin:1% 0% 1%;
}
.base_info{
	width:95%;
	padding:1% 3% 5% 1%;
}
.course_ratio{
	width:96%;
	padding:1% 3% 5% 1%;
}
.lift_info{
	width:95%;
	padding:1% 4% 5% 1%;
	margin:0% 0%;
}
.ticket_table{
	font-size:90%;
}
.time{
	font-size:70%;
}
.tour_info{
	width:100%;
	font-size:90%;
}
.tour_table{
	
}
.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%;
}
.table_ramarks{
	font-size:70%;
}


/*Pro_Con*/


.pros_cons{
	width:98%;
	}
#good_point{
	width:96%;
	margin:3% 2% 3% 2%; 
}
#pros{
	width:100%;
}
.title_pros{
	width:98%;
	font-size:120%;
}
#effort_point{
	width:96%;
	margin:3% 2% 3% 2%; 
}
#cons{
	width:100%;
}
.title_cons{
	width:98%;
	font-size:120%;
}
.source{
	font-size:60%;
}

/*link*/
.link_detail{
	width:100%;
	font-size:100%;
	margin:10% 0% 0% 0%;
	text-align:center;
}

}





