br.sp{
	display:none;
}
@media screen and (max-width: 768px) {
	br.sp{
		display:block;
	}
}
.dammy {
  transform: scaleX(-1);

}
.inner {
    width: calc(100% - 2rem);
    max-width: 1224px;
}
.flex{
	display:flex;

}
.grid{
	display:grid;
}
figure{
	position:relative;
	vertical-align: top;
}
figure figcaption{
	position:absolute;
	bottom:0;
	right:0;
	padding:.5em;
	font-size:min(2.4svw,12px);
}
.cap{
	font-size:min(2.4svw,12px);
}
.en{
	height:35px;
}
@media screen and (max-width: 768px) {
	.en{
		height:26px;
	}
}
.h2_head{
	font-size:min(8svw,60px);
}

main{
	overflow-x:hidden;
	background:#000;
}
.content-title{
	width:100%;
	padding:100px 0;
	position:relative;
}

.content-title span{
	font-size:10px;
	letter-spacing:1px;
	position:absolute;
	bottom:4px;
	right:6px;
	color:#FFFFFF;
}
.content-title#access{
	background:url(../images/mv.jpg) no-repeat center center;
	background-size:cover;
}
.content-title h1.on,
.content-title p.on{
	opacity:1;
	filter: blur(0px);
}
@media screen and (max-width: 768px) {
	.content-title{
		padding:80px 0 100px 0;
	}
	.content-title h1{
		font-size:42px;
	}
	.content-title p{
		font-size:14px;
	}
}



#access{
	
}
.access-wrapper{
	width:100%;
}
.lead_contents{
	background:#000;

}
.lead_contents .lead{
	font-size:min(4.2svw,24px);
	color:#fff;
	text-align:center;
	padding:3em 0;
	
	
}




.pararax_area{
	position: relative;
	height:400px;
	overflow: hidden;
}
.pararax_area .pararax_bg{
	background:url(../images/pararax_bg.png) center / cover no-repeat;
	position: absolute;
	top: -40%;
	left: 0;
	will-change: transform;
	width: 100%;
	height: 150%;
}
.bg_black.cap{
	text-align:right;
	color:#fff;
	background:#000;
}

.sec{
	padding:8em 0;
}
@media screen and (max-width: 768px) {
	.sec{
		padding:5em 0;
	}
}
.sec.sec01{
	background:url(../images/sec01_bg01.png) left bottom no-repeat, #000;
    background-size: 50%, auto;
	color:#fff;
	position:relative;
}
@media screen and (max-width: 768px) {
	.sec.sec01{
		background:url(../images/sec01_bg01.png) left bottom no-repeat, #000;
		background-size: 80%, auto;
	}
}
.float_txt{
    position: absolute;
    z-index: 10;
    top: -12%;
    left: 5%;
	height: 170px;
}
.float_txt img{
	display: flex;
	align-items: start;
	height: 170px;
	width: 100%;
}
@media screen and (max-width: 768px) {
	.float_txt{
		height: 120px;
	}
	.float_txt img{
		height: 120px;
		width: auto;
	}
}
.sec.sec01 .flex{
	gap:3em;
	align-items:center;
	justify-content: space-between;
}
.sec.sec01 .flex .box{
	position:relative;
	width:50%;
}
@media screen and (max-width: 768px) {
	.sec.sec01 .flex .box{
		width: 100%;
	}
}

.sec.sec01 .flex .h3_head{
	font-size:min(5.2svw,36px);
	margin-bottom:.5em;
}
.sec.sec01 .flex .cap{
	position:absolute;
	right:0;
	bottom:0;
}

.sec.sec01 .flex>figure{
	width: 45%;
}
@media screen and (max-width: 768px) {
	.sec.sec01 .flex>figure{
		width: 100%;
	}
}
.sec.sec01 .flex .box .access_box{

	margin-bottom:1.5em;
}
.sec.sec01 .flex .box .access_box .small{
	font-size:min(3.2svw,16px);
}
.sec.sec01 .flex .box .access_box .small .big{
	font-size:min(3.8svw,20px);
}
.sec.sec01 .flex .box .access_box .txt{
	font-size:min(3.2svw,16px);
	line-height:1.2;
}	
.sec.sec01 .flex .box .access_box .lead{
	font-size:min(3.8svw,20px);
}
.sec.sec01 .flex .box .access_box .lead .big{
		font-size:min(5.2svw,36px);
}
.sec.sec01 .flex .box .access_box .txt .big{
	font-size:min(6.7svw,48px);
}
.sec.sec01 .flex .box .access_box .txt .medium{
	font-size:min(5svw,32px);
}
.sec.sec01 .flex .box .access_box .txt .area_name{
	font-size:min(5.2svw,36px);
}
.sec.sec01 .cap{
	position: absolute;
    left: 40%;
}

@media screen and (max-width: 768px) {
.sec.sec01 .cap{
		
		left:5%;
	}
}

.sec.sec02{
	background:url(../images/sec02_bg01.png) center / cover no-repeat,#000;
	color:#fff;
	position:relative;
}
.sec.sec02 .inner{

}

.sec.sec02 .en{
	display:block;
	text-align:left;
	margin-bottom:1em;
}
@media screen and (max-width: 768px) {
	.sec.sec02 .en{
		display:flex;
	}
}
.sec.sec02 .h2_head{
	display:block;
	text-align:left;
	margin-bottom:.3em;
}
.sec.sec02 .inner{
	position:relative;
}
.sec.sec02 .box{
	width: 42%;
	
}
@media screen and (max-width: 768px) {
	.sec.sec02 .box{
		width: 100%;
		margin-bottom:2em;
	}
}
.sec.sec02 .box>.txt{
	line-height:1.8;
	margin-bottom:2em;

}
.sec.sec02 .box>figure{


}
.sec.sec02 .box figure figcaption{
	position:relative;
	text-align:right;
}
.sec.sec02 .inner:first-of-type{
	margin-bottom:170px;
}
@media screen and (max-width: 768px) {
	.sec.sec02 .inner:first-of-type{
		margin-bottom:3em
	}
}
.sec.sec02 .inner>figure{
	position:absolute;
	top:0;
	right:-10%;
	width: 60%;
}
@media screen and (max-width: 768px) {
	.sec.sec02 .inner>figure{
		position:relative;
		right:0;
		width: 100%;
	}
}
.sec.sec02  ul.flex{
	list-style: none;
	gap:.5em;
	width: 100%;
}
.sec.sec02 ul.flex li{
	width: calc((100% - (0.5em * 5)) / 6);
}
@media screen and (max-width: 768px) {
	.sec.sec02 ul.flex li{
		width: calc((100% - 1em) / 2);
	}
}
.sec.sec02 ul.flex li figure .figure_head{
	position:absolute;
	left:0;
	right:0;
	top:1em;
}
.sec.sec02 ul.flex li figure .figure_head .figure_head_en{
	height:30px;
	display:block;
	text-align:center;
	margin-bottom:6px;
}
.sec.sec02 ul.flex li figure .figure_head .figure_head_ja{
	text-align: center;
	font-size:min(3.2svw,16px);
}
.sec.sec02 ul.flex li figure figcaption{
	position:relative;
	text-align:right;
}
.sec.sec02>.cap{
	display:block;
	text-align:right;
	padding:.5em;
}

.sec.sec03{
	color:#fff;
	position: relative;
	z-index:5;
	overflow:hidden;
}	
.sec.sec03:before{
	content:"";
	position:absolute;
	z-index:10;
	/* background:url(../images/sec03_bg_top.png) top / cover no-repeat; */
    display: block;
    top: 0;
    width: 100%;
    height: 30%;
	z-index:-1;
	background: linear-gradient(to bottom, rgb(0 0 0 / 60%), rgba(0, 0, 0, 0));
}
@media screen and (max-width: 768px) {
	.sec.sec03:before{
		height: 40%;
	}
}
.sec.sec03:after{
	content:"";
	position:absolute;
	z-index:10;
	background: linear-gradient(to top,rgba(0,0,0,0.6),rgba(0,0,0,0));
	display:block;
	bottom:0;
	width: 100%;
    height: 30%;
	z-index:-1;
}

@media screen and (max-width: 768px) {
	.sec.sec03:after{
		height: 40%;
	}
}

.sec.sec03 .en{
	display: flex;
	justify-content: flex-start;
	margin-bottom:1em;
}
.sec.sec03 .h2_head {
    display: block;
    text-align: left;
    margin-bottom: .3em;
}

.sec.sec03 .box{
	z-index:10;
}
.sec.sec03 .box .txt{
    line-height: 1.8;
    margin-bottom: 2em;
}

.sec.sec03 .cap{
	text-align:right;
	display:block;
	padding:.5em;
}

.sec.sec03 .sec03_bg{

	height:100%;
	width: 100%;
	display:block;
	position:absolute;
	transition:.3s;
	top:0;
	left:0;
	z-index:-10;


	filter:blur(10px);
	transform:scale(1.05);
	transition:
    opacity .6s ease,
    filter .6s ease,
    transform .6s ease;
}
.sec.sec03 .sec03_bg.active{
	 opacity:1;
	filter:blur(0);
	transform:scale(1);
	background:transparent;
}
.sec.sec03 .sec03_bg.active:before{
	
}


.sec.sec03 .sec03_bg.wakkanai.active{
	background:url(../images/sec03_bg_wakkanai.png) center / cover no-repeat;	
}

.sec.sec03 .sec03_bg.otaru.active{
	background:url(../images/sec03_bg_otaru.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.sapporo.active{
	background:url(../images/sec03_bg_sapporo.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.hakodate.active{
	background:url(../images/sec03_bg_hakodate.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.niseko.active{
	background:url(../images/sec03_bg_niseko.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.toyako.active{
	background:url(../images/sec03_bg_toyako.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.tomakomai.active{
	background:url(../images/sec03_bg_tomakomai.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.asahikawa.active{
	background:url(../images/sec03_bg_asahikawa.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.furano.active{
	background:url(../images/sec03_bg_furano.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.tomamu.active{
	background:url(../images/sec03_bg_tomamu.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.kushiro.active{
	background:url(../images/sec03_bg_kushiro.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.abashiri.active{
	background:url(../images/sec03_bg_abashiri.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.monbetsu.active{
	background:url(../images/sec03_bg_monbetsu.png) center / cover no-repeat;
}
.sec.sec03 .sec03_bg.shiretoko.active{
	background:url(../images/sec03_bg_shiretoko.png) center / cover no-repeat;
}
.sec.sec03 .flex{
	gap:1em;

    justify-content: flex-end;
}
@media screen and (max-width: 768px) {
	.sec.sec03 .flex{
		gap:5em;
		flex-direction: column;
	}
}
.sec.sec03 .map_box{
	/* width: calc((100% - 1em) / 2); */
	width:55%;
	position:relative;
	z-index:10;
}

@media screen and (max-width: 768px) {
	.sec.sec03 .map_box{
		width: 100%;
		display:block;
		margin:0 auto;
	}
	.sec.sec03 .map_box img{
		
	}
}
.sec.sec03 .box{
	margin-left: auto;
    display: block;
	/* width: calc((100% - 1em) / 2); */
	width: 40%;
}

@media screen and (max-width: 768px) {
	.sec.sec03 .box{
		width: 100%;
		display:block;
		margin:0 auto;
	}
}


/* クリック時表示のパネルの表示箇所 */
.panel{/* 最初は全て非表示 */
	opacity:0;
	position:absolute;

	cursor:auto;
	transition:.3s;
	max-width: 35%;
	
	z-index:9;
}
.panel.active{
	opacity:1;
}

.panel.hakodate{
	bottom: -11%;
    left: 21%;
}
@media screen and (max-width: 768px) {
.panel.hakodate{
	bottom: -9%;
    left: 21%;
}	
}


.panel.niseko{
	top: 17%;
    left: -2%;
}
.panel.toyako{
	bottom: 0%;
    left: 29%;
}
.panel.otaru{
	top: 13%;
    left: 0%;
}
.panel.sapporo{
	top: 16%;
    left: -1%;
}
.panel.tomakomai{
    bottom: -13%;
    left: 33%;
}
.panel.asahikawa{
	top: 20%;
    left: 4%;
}
.panel.furano{
    bottom: 0%;
    right: 17%;
}
.panel.tomamu{
	bottom: -5%;
    right: 15%;
}
.panel.kushiro{
	bottom: -4%;
    right: 11%;
}
.panel.abashiri{
	top: -7%;
    right: 10%;
}
.panel.monbetsu{
	top: -12%;
    right: 12%;
}
.panel.shiretoko{
	top: -12%;
    right: 0%;
}
.panel.wakkanai{
	top: 8%;
    left: 2%;
}




/* クリック時の当たり判定 */
.map_link{
	
	position: absolute;
    padding: 1.3em;
	z-index:100;
	cursor: pointer;
}
@media screen and (max-width: 768px) {
	.map_link{
		padding: 1em;
	}
}
.map_link.hakodate{
	    top: 82%;
    left: 13%;
}
.map_link.niseko{
	top: 61%;
    left: 11%;
}
.map_link.toyako{
	top: 67%;
    left: 18%;
}
.map_link.otaru{
	top: 53%;
    left: 18%;
}
.map_link.tomakomai{
	top: 65%;
    left: 32%;
}
.map_link.asahikawa{
	top: 44%;
    left: 40%;
}
.map_link.sapporo{
	top: 56%;
    left: 27%;
}
.map_link.furano{
	top: 53%;
    left: 42%;
}
.map_link.tomamu{
	top: 57%;
    right: 44%;
}
.map_link.kushiro{
	top: 56%;
    right: 24%;
}
.map_link.abashiri{
	top: 34%;
    right: 26%;
}
.map_link.monbetsu{
	top: 28%;
    right: 36%;
}
.map_link.shiretoko{
	top: 27%;
    right: 6%;
}
.map_link.wakkanai{
	top: 0%;
    left: 31%;
}