@charset "utf-8";

.SP{display:none !important;}
@media only screen and (max-width:768px){
	.PC{display:none !important;}
	.SP{display:block !important;}
}

/******************************************************/
/* ローディング */
/******************************************************/

.loading {
  /*ローディング画面の縦横幅を画面いっぱいになるように指定*/
  width: 100vw;
  height: 100vh;
  /*ローディング画面の表示位置を固定*/
  position: fixed;
  top: 0;
  left: 0;
  background: #f9f7f3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*ローディング画面を0.5秒かけて非表示にする*/
  transition: all 0.5s linear;
  z-index: 500;
}

/*ローディング画面を非表示にする*/
.loading.loaded {
  /*0.5秒かけてopacityを0にする*/
  opacity: 0;
  visibility: hidden;
}

.loading-text {
  color: #216e92;
  font-size: 70%;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  margin-top: 5px;
}

.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #b7ddee;
  border-left-color: #1381b4; 
  /* アニメーションを1秒かけて実行 */
  animation: spinner-rotation 1s linear infinite;
}

/* アニメーションの設定 */
@keyframes spinner-rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*slider*/
.slider {
  pointer-events: none;
}

/******************************************************************
base
******************************************************************/
@media screen and (max-width: 768px) {
	body { font-size: 0.9rem; line-height: 2; }
	body main { font-size: 0.85rem; line-height: 1.5; }
	/*Android*/
	html.android body main{ font-size: 0.7rem; line-height: 1.2; }
 }

a { color: #3865e0; text-decoration: none; }
h1, h2 { line-height: 2.2; }
h3 { line-height: 2.3; }
h4 { line-height: 2.4; }
img { max-width: 100%; height: auto; vertical-align: middle; -webkit-backface-visibility: hidden; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #B5C1CC; }
button, input, optgroup, select, textarea { color: #000000; line-height: inherit; }

html{
	animation: fadein 3s forwards; 
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

body{
	background: url(/ski/shiga/winter/mt-3pass/img/main_bg.jpg) no-repeat left top  #eceff4;
	background-size: 100%;
	overflow-x: hidden;
}


body {
	min-height: 100dvh;
  }
   
  html {
	height: -webkit-fill-available;
  }

@media only screen and (max-width:768px){
	body{
		background: url(/ski/shiga/winter/mt-3pass/img/body_bg_sp.webp) no-repeat left top  #eceef4;
		background-size: 100%;
		overflow-x: hidden;
	}
	
}


@media only screen and (max-width:768px){
	a.btn{
		width: 80%;
		padding: 15px 15px 13px 15px;
		font-size: 100%;
	}
}

.slider{
	pointer-events: none;
}



/******************************************************************
wrapper
******************************************************************/
.wrapper{
	overflow-x: hidden!important;
}

/******************************************************************
header
******************************************************************/
header{
	display: flex;
	position: fixed;
	top:0;
	z-index: 15;
	width: 100%;
	padding: 33px 30px 0 30px;
	box-sizing: border-box;
	justify-content:space-between;
}

.head_right{
	display: flex;
	justify-content:flex-start;
	align-items: center;
	font-size: 110%;
	font-family: helvetica;
	letter-spacing: 0.03em;
	position: absolute;
	right: 15px;
}

.head_right p.right01{margin:-10px 15px 0 0;}



.head_right a{
	color: #919191;
	font-style: italic;
}

.head_right a:hover{
	color: #053e66;
}

a.active{
	font-weight: bold;
	color: #053e66;
}



@media only screen and (max-width:768px){

	header{
		padding: 0 0 0 0;
	}

	.head_right{
		top:15px;
		right: 0;
	}

}


/******************************************************************
main
******************************************************************/
main{
	padding: 0 5vw 0 5vw;
	position: relative;
}


/* カウント */
.count_set{
	max-width: 1660px;
	display: flex;
	justify-content: space-between;
	margin:70px auto 0 auto;
}

.delay-time02{
	margin: 0 -3vw 0 -3vw;
}



/* tit_set */

.tit_set{
	text-align: center;
	margin: 3.5vw 0 0 0;
	font-style: italic;
}


.sub_title{
	font-weight: 800;
	font-size: 1.4vw;
}

.tit_set h2{
	font-weight: 900;
	font-size: 3vw;
	line-height: 150%;
	align-items: center; /* 横線を上下中央 */
	display: flex; /* 文字と横線を横並び */
	justify-content: center; /* 文字を中央寄せ */
	margin-bottom: 1vw;
}

.sub_txt{
	font-weight: 600;
	font-size: 110%;
	line-height: 220%;
	margin-top: 1vw;
}


/* 左右に横線 */

.tit_set h2::before,
.tit_set h2::after {
  background-color: #000; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 150px; /* 横線の長さ */
}
.tit_set h2::before {
  margin-right: 20px; /* 文字との余白 */
}
.tit_set h2::after {
  margin-left: 30px; /* 文字との余白 */
}



main h1{
	text-align: center;
	max-width: 465px;
	margin: 1vw auto 4vw auto;
}


.mt_map{
	margin: 5vw 0 5vw 0;
}


@media only screen and (max-width:768px){
	main{
		background: url(/ski/shiga/winter/mt-3pass/img/main_bg_sp.jpg) no-repeat left top #e6edf4;
		background-size: 100%;
		padding: 40px 0 0 0;
	}

	@supports(-webkit-touch-callout: none){
		main{
			height: -webkit-fill-available;
		}
	}


	main h1{
		max-width: 60%;
		margin: 25px auto 25px auto;
	}


	/* カウント */
	.count_set{
		max-width: 100%;
		display: block;
		margin:0 auto 0 auto;
	}

	.delay-time02{
		margin: 20px 0 20px 0;
	}



	/* tit_set */

	.tit_set{
		margin: 20px 0 0 0;
	}


	.sub_title{
		font-weight: 800;
		font-size: 120%;
	}

	.tit_set h2{
		font-size: 200%;
		margin-bottom: 20px;
	}

	.sub_txt{
		font-size: 100%;
		line-height: 170%;
		margin:0 auto 0 auto;
		width: 80%;
	}


	/* 左右に横線 */

	.tit_set h2::before,
	.tit_set h2::after {
		width: 20px; /* 横線の長さ */
	}
	.tit_set h2::before {
		margin-right: 10px; /* 文字との余白 */
	}
	.tit_set h2::after {
		margin-left: 10px; /* 文字との余白 */
	}

	.mt_map{
		margin: 0;
		background: #e6edf4;
		padding: 25px 0 25px 0;
	}

}


/******************************************************************
content
******************************************************************/

.content{
	padding: 7vw;
	box-sizing: border-box;
}


.content h2.tit_h2_cont{
	font-size: 280%;
	font-weight: 700;
	text-align: center;
	font-style: italic;
	line-height: 110%;
	margin-bottom: 6.5vw;
}


.content h2.tit_h2_cont span{
	display: block;
	font-size: 50%;
	font-weight: 500;
}

h3.cont_sub{
	text-align: center;
	font-weight: 700;
	font-size: 240%;
	color: #00659f;
	font-style: italic;
	margin: -4vw 0 3vw 0;
	line-height: 120%;
}

h3.cont_sub span{
	color: #000;
	display: block;
	font-size: 50%;
}



@media only screen and (max-width:768px){

	h3.cont_sub{
		font-size: 140%;
		margin: 0 0 3vw 0;
	}

	h3.cont_sub span{
		font-size: 60%;
	}

}




/******************************************************************
cont01
******************************************************************/

.content.cont01{
	background: url(/ski/shiga/winter/mt-3pass/img/mt3_contbg01.webp) no-repeat center top #f9f9fa;
	background-size: 100%;
}

.spec_set{
	max-width: 1400px;
	margin: 0 auto 27vw auto;
	display: flex;
	justify-content: space-between;
	border-left: 1px solid #9b9b9b;
}

.spec_set dl{
	width: 25%;
	text-align: center;
	border-right: 1px solid #9b9b9b;
}

.spec_set dl dt img{
	width: 23%;
}

.spec_set dl dd.spec01{
	font-size: 1.7vw;
	font-weight: 700;
	margin: 1vw 0 2.5vw 0;
	line-height: 110%;
}

.spec_set dl dd.spec01 span{
	display: block;
	font-size: 55%;
	text-transform:uppercase;
}


.spec_set dl dd.spec02{
	font-size: 1.6vw;
	font-weight: 700;
	margin: 1vw 0 1vw 0;
	line-height: 110%;
}

.spec_set dl dd.spec02 span{
	font-size: 3vw;
}


.spec_set dl dd.spec03{
	font-size: 1.6vw;
	font-weight: 700;
	margin: 1vw 0 1vw 0;
	line-height: 110%;
}

.spec_set dl dd.spec03 span{
	font-size: 4vw;
}

a.site_btn{
	display: block;
	max-width: 260px;
	text-align: center;
	padding: 12px;
	box-sizing: border-box;
	color: #fff;
	background: #00659f;
	margin-bottom: 50px;
	transition: .2s;
}




a:hover.site_btn{background-color: #3593b3;transition: .2s;}


/*table*/
.t_line{
	border:0;
	border-collapse: collapse;
	width: 1200px;
	margin: auto;
}

.t_line td,.t_line th{
	border :none;
	padding:15px;
	box-sizing: border-box;
	border: solid 1px #e0e0e0;
}
.t_line th{
	width: 20%;
	text-align: left;
	background-color : #fff;
}

.t_line td{
	width: 40%;
	text-align: center;
	background-color: #fff;
}

.toku{
	font-size: 120%;
	font-weight: 700;
	color: #7a670c;
}

.notice{
	max-width: 1200px;
	margin: 15px auto 0 auto;
}

.notice li{
	line-height: 160%;
	font-size: 80%;
	text-indent: -1em;
	margin-left: 1em;
}


@media only screen and (max-width:768px){

	.content{
		padding: 30px;
	}

	.content.cont01{
		background: url(/ski/shiga/winter/mt-3pass/img/mt3_contbg01.webp) no-repeat 40% top #f9f9fa;
		background-size: cover;
	}

	.content h2.tit_h2_cont{
		font-size: 180%;
		margin-bottom: 20px;
		line-height: 120%;
	}

	.content h2.tit_h2_cont span{
		font-size: 60%;
	}


	.spec_set{
		max-width: 100%;
		display: block;
		border-left:0;
		border-bottom: 1px solid #9b9b9b;
		padding-bottom: 30px;
	}

	.spec_set dl{
		width: 100%;
		border-right: 0;
		border-top: 1px solid #9b9b9b;
		padding: 20px 0 25px 0;
	}

	.spec_set dl:last-child{
		padding-bottom: 0;
	}


	.spec_set dl dt img{
		width: 20%;
	}


	.spec_set dl dd.spec01{
		font-size: 150%;
		margin: 15px 0 15px 0;
	}


	.spec_set dl dd.spec02{
		font-size: 150%;
		margin: 15px 0 0 0;
	}

	.spec_set dl dd.spec03{
		font-size: 120%;
		margin: 20px 0 0 0;
	}


		.spec_set dl dd.spec02 span{
			font-size: 180%;
		}

		.spec_set dl dd.spec03 span{
			font-size: 250%;
		}



		a.site_btn{
			max-width: 100%;
			padding: 10px;
			margin-bottom: 30px;
		}






	/*table*/
	.table_box{
		overflow-x: auto;
		display: block;
	}

	.t_line{
		width: 100%;
	}

	.t_line th{
		width: 33%!important
	}

	.t_line td{
		width: 33%!important;
	}


	
	.notice{
		max-width: 1200px;
		margin: 15px auto 0 auto;
	}

	.notice li{
		line-height: 160%;
		font-size: 80%;
		text-indent: -1em;
		margin-left: 1em;
	}

}


/******************************************************************
cont02
******************************************************************/

.content.cont02{
	background: url(/ski/shiga/winter/mt-3pass/img/mt3_contbg02.webp) no-repeat center bottom #eff2f8;
	background-size: 100%;
	padding: 7vw 0 22vw 0;
}

.cont02_set{
	display: flex;
	justify-content: space-between;
	margin-bottom: 120px;
}

.cont02_title{
	width: 43%;
}

.cont02_title h2{
	font-weight: 700;
	font-size: 2.5vw;
	border-bottom: 1px solid #000;
	line-height: 150%;
}


.cont02_title .cont02_subtit{
	font-weight: 700;
	font-size: 1vw;
	text-transform: uppercase;
	margin-top: 10px;
}

.cont02_txt{
	margin: 50px 5vw 20px 0;
	line-height: 200%;
}

.cont02_map{
	margin-right: 5vw;
}

.cont02_img{
	width: 57%!important;
	margin:0 5vw 0 0;
}

.cont02_img video{
	width: 100%;
}


.cont02_set .od2{order: 2;}
.cont02_set .od1{order: 1;}




/* img_left */

.img_left .cont02_txt{
	margin: 50px 0 20px 5vw;
}

.img_left .cont02_map{
	margin:0 0 0 5vw;
}

.img_left .cont02_img{
	margin:0 0 0 5vw;
}

.img_left h2{
	text-indent: 5vw;
}

.img_left .cont02_subtit{
	text-indent: 5vw;
}

.img_left a.site_btn{
	margin-left: 5vw;
}

@media only screen and (max-width:768px){

	.content.cont02{
		background: url(/ski/shiga/winter/mt-3pass/img/mt3_contbg02.webp) no-repeat 60% bottom #eff2f8;
		background-size: 250%;
		padding: 30px 30px 100px 30px;
	}

	.cont02_set{
		display: block;
		margin-bottom: 20px;
	}

	.cont02_title{
		width: 100%;
	}

	.cont02_img,
	.img_left .cont02_img{
		width: 100%!important;
		margin:0 0 0 0;
	}
	
	.cont02_map,
	.img_left .cont02_map{
		margin: 0 0 20px 0;
	}



	.cont02_title h2,
	.img_left h2{
		text-indent: 0!important;
		font-size: 150%;
		line-height: 160%;
	}

	.cont02_title .cont02_subtit,
	.img_left .cont02_subtit{
		text-indent: 0;
		font-size: 80%;
		margin-top: 3px;
	}

	.cont02_txt,
	.img_left .cont02_txt{
		margin: 12px 0 20px 0;
	}

	.img_left a.site_btn{
		margin-left: 0;
	}



}


/******************************************************************
ticket
******************************************************************/

.ticket{
	display: flex;
	justify-content: space-between;
}


.ticket a{
	display: block;
	width: 50%;
	text-align: center;
	color: #fff;
	padding: 40px 40px 35px 40px;
	font-size: 180%;
	font-weight: 600;
	line-height: 110%;
	transition: .2s;
}

a.tc01{background-color: #1b4c90;}
a.tc02{background-color: #1b7390;}


a:hover.tc01{background-color: #487ac0;transition: .2s;}
a:hover.tc02{background-color: #3593b3;transition: .2s;}



.ticket a span{
	display: block;
	font-size: 50%;
	text-transform: uppercase;
}

.ticket a p{
	margin-top: 10px;
	font-size: 70%!important;
}




@media only screen and (max-width:768px){

	.ticket a{
		padding: 20px 20px 15px 20px;
		font-size: 120%;
	}

	.ticket a span{
		font-size: 60%;
	}

	.ticket a p{
		margin-top: 5px;
	}

}


/******************************************************************
footer
******************************************************************/
footer{
	padding: 100px 0 120px 0;
	text-align: center;
}

.flogo{
	width: 270px;
	padding:0 80px 25px 80px;
	margin: 0 auto;
}

.copy{
	font-size: 80%;
	margin-top: 35px;
	line-height: 160%;
}


@media screen and (max-width: 768px) {
	footer{
		padding: 50px 0 40px 0;
	}
	
	.flogo{
		display: inline-block;
		width: 150px;
		padding:0 70px 15px 70px;
	}
	
	.copy{
		font-size: 80%;
		padding: 0 30px 0 30px;
		margin-top: 35px;
	}
}




/******************************************************************
モーダル
******************************************************************/


.samplemodal-open1,
.samplemodal-open2,
.samplemodal-open3{
	cursor: pointer;
}

.samplemodal1,
.samplemodal2,
.samplemodal3{
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000!important;
}
.samplemodal-wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  white-space: nowrap;
  box-sizing: border-box;
}
.samplemodal-wrap::-webkit-scrollbar {
  display: none;
}
.samplemodal-wrap:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 100%;
}
.samplemodal-bg {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
}
.samplemodal-box {
  width: 100%;
  max-width: 1400px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.samplemodal-box .inner {
  text-align: center;
}
.samplemodal-box .inner > :first-child {
  margin-top: 0;
}
.samplemodal-box .samplemodal-close {
 text-align: center;
 cursor: pointer;
 font-weight: 700;
 margin-top: 20px;
}


@media screen and (max-width: 768px) {
	.samplemodal-box {
	width: 100%;
	max-width: 100%;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	}
}



/******************************************************/
/* clear */
/******************************************************/

.clear:after,
.vs_img:after{
	display:block;content:"";clear:both;overflow:hidden;
}


/******************************************************************
pagetop
******************************************************************/
#pagetop{
	width: 50px;
	position: fixed;
	bottom: 25px;
	right: 15px;
	z-index:500;
}