@charset "utf-8";
/* ===================================================
	Access CSS
====================================================== */

.lead_col .inner ul { font-size: 0;}
.lead_col .inner li { display: inline-block; margin: 0 30px 0 0; font-size: 15px;}
.lead_col .inner li a {
	display: inline-block; padding: 0 0 0 30px;
	background: url(../img/icon_arrow_y.svg) no-repeat left center;
	-webkit-background-size: 30px auto; background-size: 30px auto;
	color: #85621e;
}


/* ---------------------------------------------------
	共通
------------------------------------------------------ */
section h3.tit {
	display: -webkit-flex; display: -ms-flex; display: flex;
	-ms-align-items: center; align-items: center; justify-content: center;
	width: 100%; height: 500px; background: no-repeat center center;
	-webkit-background-size: cover; background-size: cover; color: #fff;
}
section h3.tit .eng { color: #fff;}

section .cnav {
	display: -webkit-flex; display: -ms-flex; display: flex;
	justify-content: center; margin: 50px 0 10px;
}
section .cnav li { margin: 0 30px;}
section .cnav li a { padding: 0 0 25px; display: block; position: relative; font-size: 18px;}
section .cnav li a::after {
	content: ''; width: 26px; height: 26px; margin: 0 0 0 -13px;
	position: absolute; left: 50%; bottom: 0;
	background: url(../img/icon_arrow_b.svg) no-repeat center center;
	-webkit-background-size: 100% auto; background-size: 100% auto;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
}
section .cnav li a:hover { text-decoration: none;}
section .cnav li a:hover::after {
	-webkit-transform: rotate(90deg) translateX(3px);
	-ms-transform: rotate(90deg) translateX(3px);
	transform: rotate(90deg) translateX(3px);
}

section > div { padding: 60px 0 80px;}

section .inner { max-width: 96%; margin: 0 auto;}

@media screen and (max-width: 600px) {
	section h3.tit { height: 275px;}
	section h3.tit span { text-indent: 5px;}
	section h3.tit .eng { text-indent: 3px;}

	section .cnav { margin-top: 25px;}
	section .cnav li { margin: 0 23px;}
	section .cnav li a { font-size: 14px;}

	section > div { padding: 40px 0 50px;}

	section .inner { width: 92% !important;}
}



/* ---------------------------------------------------
	sec1
------------------------------------------------------ */
#sec1 h3.tit { background-image: url(../../access/img/sec1_tit_pc.jpg);}

#sec1 #map_col { width: 1400px; max-width: 96%; padding: 0; margin: 70px auto 20px; border: 1px solid #cdc8bc;}
#sec1 #map_col iframe { display: block; max-width: 100%;}

#sec1 h4.tit { margin: 0 0 25px;}
#sec1 h4.tit + p { text-align: center;}
#sec1 h4.tit + p span { color: #cb503c;}

#sec1 .route_box,
#sec1 .route,
#sec1 .route ul,
#sec1 .route li { display: -webkit-flex; display: -ms-flex; display: flex;}
#sec1 .route_box { width: 800px; margin: 60px auto 0; justify-content: space-between;}
#sec1 .route {
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 330px;
	text-align: center;
	font-size: 17px;
	padding: 5px;
}
#sec1 .route .acc_tit { padding: 10px; background: rgba(255,255,255,0.7);}
#sec1 .route ul {
	-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
	justify-content: space-between; flex-grow: 1;
	position: relative; z-index: 0;
}
#sec1 .route ul:before {
	content: ""; display: block; position: absolute; z-index: -1; top: 0; bottom: 0;
	left: 50%; margin: 0 0 0 -2.5px; width: 5px; height: 100%; background: #c5bab2;
}
#sec1 .route li { padding: 10px;}
#sec1 .route li > span { display: block; width: 100%;}
#sec1 .route li > span span { display: inline-block;}
#sec1 .route .point { background: url(../img/bg.jpg) center center; border: 1px solid #c5bab2;}
#sec1 .route .goal { background: #33231a; color: #fff;}
#sec1 .route .time {
	-ms-align-items: center; align-items: center;
	-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
	flex-grow: 1; padding: 20px 10px; font-size: 15px;
}
#sec1 .route .time span { display: block; padding: 15px 0; background: url(../img/bg.jpg) center center;}

#sec1 .bg_dark .route .point,
#sec1 .bg_dark .route .time span { position: relative; z-index: 0;}
#sec1 .bg_dark .route .point::before,
#sec1 .bg_dark .route .time span::before {
	content: ''; width: 100%; height: 100%;
	position: absolute; left: 0; top: 0; z-index: -1;
	background: rgba(60, 31, 15, 0.06);
}

#sec1c .btn { display: block; width: 300px; padding: 10px; margin: 30px auto 0;}

@media screen and (max-width: 600px) {
	#sec1 h3.tit { background-image: url(../../access/img/sec1_tit_sp.jpg);}

	#sec1 #map_col { width: 92%; height: 65vw; margin: 40px auto 0;}
	#sec1 #map_col iframe { height: 100%;}

	#sec1 h4.tit { margin-bottom: 15px;}
	#sec1 h4.tit + p { text-align: left;}

	#sec1 .route_box,
	#sec1 .route,
	#sec1 .route ul,
	#sec1 .route li { display: block;}
	#sec1 .route_box { width: 100%; margin-top: 20px;}
	#sec1 .route { width: 100%;}
	#sec1 .route+.route { margin: 20px 0 0;}

	#sec1 .route .acc_tit { position: relative;}
	#sec1 .route .acc_tit::after {
		content: '▼'; margin: -6px 0 0;
		position: absolute; right: 10px; top: 50%;
		font-size: 12px; line-height: 1;
	}

	#sec1c .btn { width: 100%; margin-top: 20px;}
}



/* ---------------------------------------------------
	sec2
------------------------------------------------------ */
#sec2 h3.tit { background-image: url(../../ski_resorts/img/ski_tit_pc.jpg);}

#sec2 [class*="icon_"] {
	background-repeat: no-repeat;
	-webkit-background-size: 28px auto; background-size: 28px auto;
}
#sec2 .icon_link { background-image: url(../img/icon_link.svg);}
#sec2 .icon_access { background-image: url(../img/icon_access.svg);}
#sec2 .icon_walk { background-image: url(../img/icon_walk.svg);}
#sec2 .icon_car { background-image: url(../img/icon_car.svg);}

#sec2 h3.tit + div { padding-bottom: 0; text-align: center;}
#sec2 h3.tit + div .caption { margin: 0 0 15px; font-size: 26px;}
#sec2 h3.tit + div .btn { display: block; width: 420px; padding: 10px; margin: 25px auto 0;}
#sec2 h3.tit + div .btn .icon_link {
	display: inline-block; padding: 0 35px 0 0;
	background-position: right center;
}

#sec2 [class*="box_"] { width: 1100px; max-width: 96%; margin: 0 auto;}
#sec2 [class*="box_"] dt { border-bottom: 1px solid #bbafa6; font-size: 22px;}
#sec2 .box_s dd p[class*="icon_"],
#sec2 .box_l dt [class*="icon_"] {
	padding: 0 0 0 30px; background-position: left center;
	color: #85621e;
}
#sec2 [class*="box_"] .btn_col {
	display: -webkit-flex; display: -ms-flex; display: flex;
	justify-content: space-between;
}
#sec2 [class*="box_"] .btn_col a { display: block; padding: 5px; background: rgba(255,255,255,0.4);}
#sec2 [class*="box_"] .btn_col [class*="icon_"] {
	display: inline-block; padding: 0 0 0 25px; background-position: left center;
	-webkit-background-size: 22px auto; background-size: 22px auto;
}
#sec2 [class*="box_"] .btn_access { width: 205px; max-width: 60.3%;}
#sec2 [class*="box_"] .btn_link { width: 125px; max-width: 36.8%;}

#sec2 .box_s {
	display: -webkit-flex; display: -ms-flex; display: flex;
	-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
	justify-content: space-between;
}
#sec2 .box_s > div {
	width: 340px; max-width: calc( (100% - 40px) / 3);
	padding: 0 0 65px; margin: 35px 0 80px; position: relative;
}
#sec2 .box_s dt { padding: 20px 0 5px; text-align: center;}
#sec2 .box_s dt span { display: block; font-size: 13px;}
#sec2 .box_s dd { padding: 10px 0 0; text-align: center;}
#sec2 .box_s dd p[class*="icon_"] { display: inline-block;}
#sec2 .box_s dd p { text-align: left;}
#sec2 .box_s dd .btn_col { width: 100%; position: absolute; left: 0; bottom: 0;}

#sec2 .box_l > div,
#sec2 .box_l dt {
	display: -webkit-flex; display: -ms-flex; display: flex;
	-ms-align-items: center; align-items: center;
	justify-content: space-between;
}
#sec2 .box_l > div:not(:last-child) { margin: 0 0 70px;}
#sec2 .box_l .image { width: 560px; max-width: 53%;}
#sec2 .box_l dl { width: 480px; max-width: 45%;}
#sec2 .box_l dt { padding: 0 0 5px;}
#sec2 .box_l dt [class*="icon_"] { font-size: 15px;}
#sec2 .box_l dd { padding: 15px 0 0;}
#sec2 .box_l dd .btn_col { width: 340px; margin: 25px 0 0 auto;}

#sec2a,
#sec2b { padding-bottom: 0;}
#sec2c h4.tit { margin: 0 0 35px;}


/* sec2d */
#sec2d h4 { margin: 0 0 35px;}
#sec2d .btn_col {
	display: -webkit-flex; display: -ms-flex; display: flex;
	justify-content: center;
}
#sec2d .btn_col li { width: 420px; margin: 0 8px;}
#sec2d .btn_col a { display: block; padding: 10px;}
#sec2d .btn_col a span {
	display: inline-block; width: 320px; padding: 0 35px;
	background-position: right center;
	-webkit-box-sizing: border-box; box-sizing: border-box;
}


@media screen and (max-width: 600px) {
	#sec2 h3.tit { background-image: url(../../ski_resorts/img/ski_tit_sp.jpg);}

	#sec2 [class*="icon_"] { -webkit-background-size: 24px auto; background-size: 24px auto;}

	#sec2 h3.tit + div { width: 92%; padding-bottom: 20px; margin: 0 auto; text-align: left;}
	#sec2 h3.tit + div .caption { font-size: 19px;}
	#sec2 h3.tit + div .btn { width: 100%; padding: 5px 10px; margin-top: 10px;}
	#sec2 h3.tit + div .btn .icon_link { display: block; padding: 0 30px; line-height: 1.6;}

	#sec2 h4.tit { width: 92%; margin: 0 auto 20px;}

	#sec2 [class*="box_"] { width: 92%;}
	#sec2 [class*="box_"] img { width: 100%;}
	#sec2 [class*="box_"] dt { font-size: 19px;}
	#sec2 [class*="box_"] .btn_col { display: block;}
	#sec2 [class*="box_"] .btn_col [class*="icon_"] { padding: 0 25px;}
	#sec2 [class*="box_"] .btn_col li:not(:last-child) { margin: 0 0 8px;}
	#sec2 [class*="box_"] .btn_access,
	#sec2 [class*="box_"] .btn_link { width: 100%; max-width: none;}

	#sec2 .box_s { display: block; padding: 0 0 40px;}
	#sec2 .box_s > div { width: 100%; max-width: none; padding-bottom: 0; margin: 0 0 40px;}
	#sec2 .box_s > div:last-child { margin-bottom: 0;}
	#sec2 .box_s dt { padding: 15px 0 10px; text-align: left;}
	#sec2 .box_s dd { text-align: left;}
	#sec2 .box_s dd p[class*="icon_"] { display: block;}
	#sec2 .box_s dd .btn_col { position: static; margin: 15px 0 0;}

	#sec2 .box_l > div,
	#sec2 .box_l dt { display: block;}
	#sec2 .box_l > div:not(:last-child) { margin-bottom: 40px;}
	#sec2 .box_l .image,
	#sec2 .box_l dl { width: 100%; max-width: none;}
	#sec2 .box_l dt { padding: 15px 0 10px;}
	#sec2 .box_l dt [class*="icon_"] { display: block; font-size: 16px;}
	#sec2 .box_l dd { padding-top: 10px;}
	#sec2 .box_l dd .btn_col { width: 100%; margin-top: 15px;}

	/* sec2d */
	#sec2d h4 { margin-bottom: 20px;}
	#sec2d .btn_col { display: block; width: 92%; margin: 0 auto;}
	#sec2d .btn_col li { width: 100%; margin: 0;}
	#sec2d .btn_col li:not(:last-child) { margin-bottom: 10px;}
	#sec2d .btn_col a span { display: block; width: auto; padding: 0 30px;}
}

.banner {
	width: 100%;
	max-width: 700px;
	margin: auto;
	padding: 0 20px;
}