@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_sp.jpg") no-repeat top center;
	-webkit-background-size: contain;
	background-size: contain;
	width: 100%;
	padding-top: 45.312%;
}
#hokkaido .header .logo{
	display: block;
	position: absolute;
	top: 17%;
	left: 7%;
	right: auto;
	width: 44%;
}
#hokkaido .header .logo img{
	 width: 100%; 
}
/*29日になったらpc_main.pngに画材差し替え*/
#hokkaido .main{
	background: url("../images/sp_main22.png?0318") no-repeat top center;
/*	background: url("../images/sp_main.png?0318") no-repeat top center;*/
	background-size: contain;
	width: 100%;
	padding-top: 245%;
	position: relative;
}

/*------ 動画 ------*/
#hokkaido .movie{
    display: block;
    width: 95%;
    padding-top: 49.9%;
    position: absolute;
    margin: 0 auto;
    top: 60%;
    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: 90%;
	margin: 0 auto;
	position: absolute;
	bottom: 13%;
	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: 5.5vw;
	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.5%;
	left: 1.5%;
	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: 44%;
	margin: 0 auto;
	position: absolute;
	bottom: 5.5%;
	left: -6%;
	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: 4.5vw;
	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: 12.5%;
	left: 2.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;
}