@charset "utf-8";

#hokkaido{
	width: 100%;
    position: relative;
	margin: 0 auto;
	font-size:14px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:1.5;
	background: #fffaf5;
}

#hokkaido .clrTxt {
	text-indent:-10000px;
	text-decoration:none;
	overflow:hidden;
    position:absolute;
}
#hokkaido .header {
	position: relative;
	background: url("../images/header.jpg") no-repeat top center;
	-webkit-background-size: contain;
	background-size: contain;
	width: 100%;
	padding-top: 26.43%;
}
#hokkaido .header .logo{
	display: block;
	position: absolute;
	top: 25%;
	left: 20%;
	right: auto;
}

@media screen and (max-width:1500px) {
	#hokkaido .header .logo{
		display: block;
		position: absolute;
		top: 13%;
		left: 21%;
		right: auto;
		width: 30%;
	}
	#hokkaido .header .logo img{
		width: 100%;
	}
}
@media screen and (max-width:1280px) {
	#hokkaido .header .logo{
		display: block;
		position: absolute;
		top: 13%;
		left: 21%;
		right: auto;
		width: 30%;
	}
	#hokkaido .header .logo img{
		width: 100%;
	}
}
/*29日になったらpc_main.pngに画材差し替え*/
#hokkaido .main{
	background: url("../images/pc_main22.png?0318") no-repeat top center;
/*	background: url("../images/pc_main.png?0318") no-repeat top center;*/
	background-size: contain;
	width: 100%;
	padding-top: 80%;
	position: relative;
	margin-top: 3%;
}

/*------ 動画 ------*/
#hokkaido .movie{
    display: block;
    width: 40%;
    padding-top: 21%;
    position: absolute;
    margin: 0 auto;
    top: 52%;
    left: 0;
    right: 0;
}
#hokkaido .movie .movieCon{
    position: absolute;
    width: 93%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    -webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

/*------ ボタン ------*/
#hokkaido .button a.btn_red{
	display: block;
	width: 37%;
	margin: 0 auto;
	position: absolute;
	bottom: 14%;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 2;
}
#hokkaido .button a.btn_red span{
	display: block;
	border: 2px solid #e21c24;
	color: #e21c24;
	padding: 2%;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	bottom: 12%;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 2;
	transition-duration: .3s;
}
#hokkaido .button a.btn_red::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px solid #e21c24;
	/* padding: 4.5%; */
	top: 11.0%;
	left: 1%;
	z-index: -2;
	transition: .8s;
	background: #fff;
}
#hokkaido .button a.btn_red:hover{
	text-decoration: none;
}
#hokkaido .button a.btn_red span:hover{
	background: #e21c24;
	color: #fff;
	transition-duration: .3s;
}

#hokkaido .button a.btn_blue{
	display: block;
	max-width: 21%;
	margin: 0 auto;
	position: absolute;
	bottom: 6.0%;
	left: -2%;
	right: 0;
	background: #fff;
	z-index: 2;
}
#hokkaido .button a.btn_blue span{
	display: block;
	border: 2px solid #0064ff;
	color: #0064ff;
	padding: 3% 0;
	text-align: center;
	font-size: 17px;
	font-weight: bold;
	position: relative;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 2;
	transition-duration: .3s;
}
#hokkaido .button a.btn_blue::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px solid #0064ff;
	/* padding: 4.5%; */
	top: 11.5%;
	left: 1.5%;
	z-index: -2;
	transition: .8s;
	background: #fff;
}
#hokkaido .button a.btn_blue:hover{
	text-decoration: none;
}
#hokkaido .button a.btn_blue span:hover{
	background: #0064ff;
	color: #fff;
	transition-duration: .3s;
}
/*グレーアウト　終わり*/
#footer{
	margin:0px !important;
}