@charset "shift_jis";
/*
for 北海道応援クーポン 2018/10
*/
/* reset */
body, input, select, textarea, table, th, td, li, a {
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka,
sans-serif;
line-height:1.9 !important;
background-color: transparent;
}
body, form, img, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3 ,h4 , h5, h6, table, th ,td ,select {
margin: 0;
padding: 0;
-webkit-text-size-adjust:none;
}
img { border:0;
box-shadow: none !important;
text-decoration: none;
}
ul li{
list-style:none;
margin: 0;
padding: 0;
}

/*Common*/
.only_pc{display: block;}
.only_sp{display: none;}
.pageback {
    color: #EF6552;
    text-decoration: none;
}

a:link { color: #1b47ff;}
a:visited { color: #9720c9;}
a:hover { color: #ff7d00; text-decoration: underline;}

/*Header*/
.globalNav { margin-top: -2px;}
.globalNav li {display: inline;}
#subnavi #subnaviLinks {line-height: 0;}
#header_area #header990 .cf {display: none;}

/*head-set*/
.head-set{
	width: 950px;
	margin: 0 auto;
	overflow: hidden;
}
.head-set > .sns-set{
	display: block;
	overflow: hidden;
	width: 350px;
	float:right;
}
.head-set .info{
	width: 500px;
}
/*Footer*/
.footerCustum {
    margin: 0 auto;
    width: 950px;
}
#ft_ul{
    width: 950px;
	border-bottom:#CCC 2px solid;
	overflow: hidden;
	}
#ft_ul li{
	float:left;
	list-style-type:none;
    margin: 30px 0 5px;
	}
#ft_logo{
	margin:40px 0;
    text-align: left;
    width: 950px;
	}
.to_pagetop_a {
    text-align: left;
    padding-left: 12px;
    background: url(/jalan/doc/theme/common/images/totop_icon003.gif) no-repeat left top;
}
.pageTopLink{
	width: 950px;
	margin: 0 auto;
	border-bottom: none;
}
#ft_logo{
	width: 950px;
	margin: 0 auto;
	text-align: left;
	padding: 20px 0;
}
#ft_logo > p:nth-child(2){
	margin: -15px 0 0 0;
	padding: 0;
}

/*#Pankuzu*/
#pankuzu {display: block;}
#pankuzu li {
	float: left;
	font-size: 7px;
	margin-left: 3px;
	margin-top: 0;
	list-style-type: none;
	line-height: 1.5em;
	}
#pankuzu li span {
	position:relative;
	padding: 0 1px 0 2px;
	top:-1px;
}
#pankuzu li {
	font-size:10px;
}
#pankuzu li a {
	text-decoration:none;
}
#pankuzu li a:hover {
	color: #ff7d00;
}
h1 {
    color: #999999;
    font-size: 8px;
    font-weight: 100;
    margin: 0 auto;
    text-align: right;
}

/*cam 広告枠*/
#cam{
	display: none;
/*    width: 650px;
    margin: 0 auto 20px auto;
    text-align: left;
    float: left;*/
}
/*SNS*/
.socialIcon {
width: 250px;
    margin: 0 auto;
    overflow: hidden;
    float: right;
}
.socialIcon ul {
	display: block;
	width: 100%;
	text-align: right;
}
div.socialIcon li{
	display:inline-block;
}
/*div.socialIcon li img{
	width: 25px!important;
	height: 25px;
}*/
.socialIcon .pc_hide/*,
.socialIcon.socialBtm */{
	display: none;
}

/*contents*/
#hokkaido-coupon{
	width: 950px;
	margin: 0 auto;
	padding: 0;
	color: #3a1502;
}

#hokkaido-coupon p{
	font-size: 14px;
	line-height: 1.5;
	color: #3a1502;
}
#hokkaido-coupon .note{
	font-size: 12px;
	/*color: #ccc;*/
  margin-top:5px;
	font-weight: normal!important;
}
#hokkaido-coupon .caution{
	font-size: 12px;
	color: #cc0000;
	font-weight: normal!important;
}
#hokkaido-coupon .info{
	font-size: 12px;
	margin: 0;
	clear: both;
	display: inline;
}
#hokkaido-coupon .info > p{
	display: block;
	margin: 0;
	padding: 0;
	font-size: 11px!important;
}
#hokkaido-coupon .info .date{
	color:#cc0000;
	font-weight: bold;
}

/*キービジュアル*/
#hokkaido-coupon .keyvis{
	margin: 0 auto;
	clear:both;
}
#hokkaido-coupon .keyvis img.pc{
	width: 950px;
}#hokkaido-coupon .keyvis img.sp{
	display: none!important;
}

/*クーポン取得期間*/
#hokkaido-coupon .date-detail{
	border: 3px solid #fdbf2d;
	padding: 0;
	margin: 0;
	color: #3a1502;
}
#hokkaido-coupon .date-detail .cam-date{
	width: 600px;
	display: table-cell;
	padding-left: 60px;
	vertical-align: middle;
	font-size: 16px;
	text-align: center;
	letter-spacing: 2px;
}
#hokkaido-coupon .date-detail .cam-date span{
	font-size: 26px;
}
#hokkaido-coupon .date-detail .arrow{
	position: relative;
	display: table-cell;
	padding: 0 0 0 16px;
	background: #fdbf2d;
	text-decoration: none;
	font-size: 22px;
	width: 200px;
	height: 60px;
	vertical-align: middle;
}
#hokkaido-coupon .date-detail .arrow span{
	display: inline;
	vertical-align: middle;
}
#hokkaido-coupon .date-detail .arrow:before,
#hokkaido-coupon .date-detail .arrow:after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
#hokkaido-coupon .date-detail .arrow-right:after{
	left: 216px;
    box-sizing: border-box;
    width: 30px;
/*    height: 60px;*/
    border: 30px solid transparent;
    border-left: 20px solid #fdbf2d;
}

/* column */
#hokkaido-coupon .column{
	width: 950px;
	margin: 60px auto;
	padding: 0;
	clear: both;
	overflow: hidden;
}
#hokkaido-coupon .column h2{
	text-align: center;
  padding-top: 20px;
}

#hokkaido-coupon .bg_gray{
	background: #f6f5f1;
}


/* クーポン */
#hokkaido-coupon .column .ticket {
	overflow: hidden;
	padding: 20px 20px 30px 20px;
	box-sizing: border-box;
  width: 652px;
  margin: 0 auto;
}
#hokkaido-coupon .column .ticket > a{
	width: 296px;
	height: 296px;
	margin: 0 10px 0 0;
	padding: 0;
	overflow: hidden;
	float:left;
	border: 2px solid #3a1502;
	border-radius: 5px;
	box-sizing: border-box;
}
#hokkaido-coupon .column .ticket > a:hover{
	opacity: .8;
     filter:alpha(opacity=80);
   -ms-filter: alpha(opacity=80);
}
#hokkaido-coupon .column .ticket > a:nth-child(1){
	background: url(../image/coupon01.png)top left no-repeat;
}
#hokkaido-coupon .column .ticket > a:nth-child(2){
	background: url(../image/coupon02.png)top left no-repeat;
}
#hokkaido-coupon .column .ticket > a:nth-child(3){
	background: url(../image/coupon03.png)top left no-repeat;
}
#hokkaido-coupon .column .ticket a dt,
#hokkaido-coupon .column .ticket a dd{
	width: 296px;
	padding: 10px 20px;
	margin: 0;
	text-align: center;
	box-sizing: border-box;
	position: relative;
}
#hokkaido-coupon .column .ticket a dt{
	text-indent: -999px;
}
#hokkaido-coupon .column .ticket a dd p.number{
	position: absolute;
	width: 100%;
	top: 55px;
	left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size: 16px;
}
#hokkaido-coupon .column .ticket a dd p.number span{
	font-size: 20px;
	font-weight: bold;
}
#hokkaido-coupon .column .ticket p.price{
	position: absolute;
	width: 80%;
	top: 110px;
	left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size: 24px;
	border-bottom: 2px solid #cb2028;
}
#hokkaido-coupon .column .ticket p.price{
	color: #cb2028;
	text-decoration: none;
}
#hokkaido-coupon .column .ticket p.price span{
	font-size: 33px;
	font-weight: bold;
	padding: 0 5px;
}

#hokkaido-coupon .column .ticket > a:last-child{
	margin-right: 0;
}

.area{
  clear:both;
  overflow: hidden;
  padding: 0 20px 30px;
  font-size: 14px;
}

.area dl{
  width: 100%;
}

.area dl dt{
  width:15%;
  float: left;
  font-weight: bold;
  padding-bottom: 5px;
}

.area dl dd{
  width:85%;
  float: left;
  padding-bottom: 5px;
}


/* クーポン利用規約 */
#hokkaido-coupon .column .service{
  padding-top: 20px;
}

#hokkaido-coupon .column .service > table{
	width: 470px;
	border: 1px solid #3a1502;
	float:left;
	margin-right: 10px;

}

#hokkaido-coupon .column .service > table:last-child{
	margin-right: 0;
}

#hokkaido-coupon .column .service table tr,
#hokkaido-coupon .column .service table th,
#hokkaido-coupon .column .service table td{
	border-collapse: collapse;
	padding: 15px 0;
	margin: 0;
	border: 1px solid #3a1502;
	text-align: center;
}
#hokkaido-coupon .column .service table th{
	padding: 10px 20px;
}
#hokkaido-coupon .column .service table th img{
	width: 100%;
  vertical-align: middle;
}
#hokkaido-coupon .column .service table tr:nth-child(even){
	background: #f6f5f1;
}

/* クーポンの使い方 */
#hokkaido-coupon .column .howtouse{
	padding: 20px;
	box-sizing: border-box;
}
#hokkaido-coupon .column .howtouse ul{
	margin: 0;
	padding: 0;
}
#hokkaido-coupon .column .howtouse ul li{
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	display: inline-block;
}

#hokkaido-coupon .column .ohter-service{
	overflow: hidden;
	background: #f6f5f1;
	padding: 20px 20px 30px 20px;
}


#hokkaido-coupon .column .ohter-service ul{
	width: 650px;
	margin: 0 auto;
}

#hokkaido-coupon .column .ohter-service ul li{
	margin: 0 30px 0 0;
	padding: 0;
	box-sizing: border-box;
	display: inline-block;
	width: 300px;
	height: 160px;
  text-align: center;
}

/* 他サービスのバナー */
#hokkaido-coupon .column .ohter-service ul li:last-child{
	margin-right: 0;
}
#hokkaido-coupon .column .ohter-service ul li a:hover{
	opacity: .8;
     filter:alpha(opacity=80);
   -ms-filter: alpha(opacity=80);
}

.column .pr a:hover{
	opacity: .8;
     filter:alpha(opacity=80);
   -ms-filter: alpha(opacity=80);
}

.column .pr a{
  width: 630px;
  margin: 0 auto;
  display: block;
}


/*タブレット以外だったら*/
@media only screen and (max-width: 767px) {

		#hokkaido-coupon{
			width: 96%;
			margin: 0 auto;
		}
/*header*/
		#header990 {
			width: 100%!important;
		}
		#header_area #header990 .cf {
			display: block!important;
		    border-bottom: 1px solid #d2d2d2;
		    padding: 5px 5px 1px 10px;
		    position: relative;
		}
		#header_area #header990 .pc_only,
		#welcometop, .catch, #campaign {
		    display: none;
		}
		.only_pc{display: none!important;}
		.only_sp{display: block!important;}
		.cS {
		    background-image: url(/assets/img/common/sitetitle.png);
		    background-repeat: no-repeat;
		}
		.logoL {
		    background-position: 0 0;
		    display: block;
		    width: 90px;
		    height: 35px;
		    text-indent: -9999px;
		    background-size: 214px auto;
		}
		.fl {
		    float: left !important;
		}
		.cf:after {
		    content: "" !important;
		    display: block !important;
		    clear: both !important;
		    height: 0 !important;
		    visibility: hidden !important;
		}
		h1 {
			display: none;
/*		    width: 96%;
		    color: #999999;
		    font-size: 8px;
		    font-weight: 100;
		    margin: -15px auto 0 auto;
		    text-align: right;*/
		}
		.headerIcons{
		    display:block!important;
		}
		.head-set{
			width: 100%;
		}
/*SNS*/
		.socialIcon {
			width: 96%;
		    margin: 20px auto;
		    float:none;
		    text-align: center;
		}
		.socialIcon ul {
			display: block;
			display: inline;
		}
		div.socialIcon li{
			display:inline-block;
		}
		div.socialIcon li img{
			width: 40px!important;
			height: 40px;
		}
		/*.socialIcon .pc_hide,.mobile_hide {
			display: none;
		}*/
  
    .socialIcon .pc_hide {
        display: inline-block!important;

    }
  
/*期間*/
		#hokkaido-coupon .info {
		    margin: 0 auto;
		}
		#hokkaido-coupon .info > p{
			display: block;
		}
		#hokkaido-coupon .info p:last-child{
			text-align: right;
			display: inline-block;
			width: 100%;
		    margin: 0 auto;
		}

		#hokkaido-coupon .info p,
		#hokkaido-coupon .note,
		#hokkaido-coupon .caution{
			font-size: 11px!important;
		}
		#hokkaido-coupon .info .date span{
			display: block;
		}
		#hokkaido-coupon .caution{
			clear:both;
		}
		/* キービジュアル */
		#hokkaido-coupon .keyvis{
			margin: 0 auto;
		}
		#hokkaido-coupon .keyvis img.pc{
			display: none!important;
		}#hokkaido-coupon .keyvis img.sp{
			width: 100%;
			display: block!important;
		}

		/* クーポン取得期間 */
		#hokkaido-coupon .date-detail{
			border: 3px solid #fdbf2d;
			padding: 0;
			margin: 0;
			color: #3a1502;
		}
		#hokkaido-coupon .date-detail .cam-date{
			width: 100%;
			display: block;
			padding-left: 0;
			vertical-align: middle;
			font-size: 12px;
			text-align: center;
			letter-spacing: 0px;
		}
		#hokkaido-coupon .date-detail .cam-date span{
			font-size: 18px;
		}
		#hokkaido-coupon .date-detail .arrow{
			position: relative;
			display: block;
			padding: 0;
			margin: 0;
			font-size: 14px;
			width: 100%;
			height: 30px;
			vertical-align: middle;
			text-align: center;
		}
		#hokkaido-coupon .date-detail .arrow span{
			display: inline;
			vertical-align: middle;
		}
		#hokkaido-coupon .date-detail .arrow:before,
		#hokkaido-coupon .date-detail .arrow:after,
		#hokkaido-coupon .date-detail .arrow-right:after{
			display: none;
		}

		/* コラム */
		#hokkaido-coupon .column{
			width: 100%;
			margin: 30px auto;
		}
  
    #hokkaido-coupon .column h2 img{
        width: 100%;
    }

  
		/* クーポン */
		#hokkaido-coupon .column .ticket {
			width: 100%;
			padding: 0px 20px;
		}
		#hokkaido-coupon .column .ticket > a{
			width: 296px;
			height: 296px;
			margin: 15px auto;
			padding: 0;
			overflow: hidden;
			float:none;
			border: 2px solid #3a1502;
			border-radius: 5px;
			box-sizing: border-box;
			display: block;
		}
		#hokkaido-coupon .column .ticket > a:last-child {
		    margin: 10px auto!important;
		}
		#hokkaido-coupon .column .ticket a dt,
		#hokkaido-coupon .column .ticket a dd{
			width: 296px;
			padding: 10px 20px;
			margin: 0;
			text-align: center;
			box-sizing: border-box;
			position: relative;
		}
		#hokkaido-coupon .column .ticket a dt{
			text-indent: -999px;
		}
		#hokkaido-coupon .column .ticket > a:last-child{
			margin-right: 0;
		}

		/* クーポン利用条件 */
      #hokkaido-coupon .column .service{
        padding: 0;
      }
  
		#hokkaido-coupon .column .service > table{
			width: 90%;
			float:none;
			border: 1px solid #3a1502;
			margin: 10px auto!important;
		}
  
    .area{
      clear:both;
      overflow: hidden;
      padding: 0 20px 20px;
    }

    .area dl{
      width: 100%;
    }

    .area dl dt{
      width:100%;
      float: none;
      font-weight: bold;
      padding-bottom: 0;
    }

    .area dl dd{
      width:100%;
      float: none;
      padding-bottom: 14px;
    }
  
  

		/* クーポンの使い方 */
    #hokkaido-coupon .column .howtouse{
      padding: 0;
    }
  
		#hokkaido-coupon .column .howtouse ul li{
			margin: 0;
			padding: 10px;
			display: block;
			float: left;
			width: 50%;
			box-sizing: border-box;
		}
		#hokkaido-coupon .column .howtouse ul li img{
			width: 100%;
		}

		/* 他サービスのバナー */
    #hokkaido-coupon .column .ohter-service{
      padding: 10px;
      text-align: center;
      font-size: 13px;
    }
  
    #hokkaido-coupon .column .ohter-service ul{
			width: 100%;
			margin: 0 auto;
			padding: 0;
		}
    #hokkaido-coupon .column .ohter-service ul li{
      width: 80%;
      margin: 0;
			padding: 0 0 20px 0;
			box-sizing: border-box;
			height: 100%;
		}
    #hokkaido-coupon .column .ohter-service ul li img{
      width: 100%;
    }
  
    .column .pr{
      width: 100%;
    }  
  
    .column .pr a{
      width: 100%;
    }
  
		/*footer*/
		.pageTopLink{
			width: 100%;
			margin: 0 auto;
			border-bottom: none;
		}
		#footerLinks {
			border-top:1px solid #ccc;
			border-left:1px solid #ccc;
			margin:10px;
			font-size:12px;
			font-weight:bold;
		}
		#footerLinks li {
			list-style:none;
		}
		#footerLinks li.line{
			display:block;
			padding:8px 10px;
			border-bottom:1px solid #ccc;
			border-right:1px solid #ccc;
			}
		#footerLinks a{
			color:#444;
			text-decoration:none;
			}
		#footerLinks a.line{
			display:block;
			padding:8px 10px;
			border-bottom:1px solid #ccc;
			border-right:1px solid #ccc;
		}

		/*pankuzu*/
		#pankuzu {
			width: 100%;
			padding: 0 10px !important;
			margin: 0 0 10px;
			-webkit-box-sizing:border-box;
			box-sizing:border-box;
		}
		#pankuzu li {
			float: left;
			margin-left: 3px;
			margin-top: 0;
			list-style-type: none;
			line-height: 1.5em;
		}
		#pankuzu li span {
			position:relative;
			padding: 0 1px 0 2px;
			top:-1px;
		}
		#pankuzu li {
			font-size:10px;
		}
		#pankuzu li a {
			text-decoration:none;
		}
		#pankuzu li a:hover {
			color: #ff7d00;
		}

}

/*320px以下*/
@media screen and (max-width: 320px) {
		#hokkaido-coupon .date-detail .cam-date span{
			font-size: 15px;
		}
		#hokkaido-coupon .column .ticket {
		    padding: 20px 4px;
		}
		#hokkaido-coupon .column .service > table {
		    width: 90%;
		    float: none;
		    border: 1px solid #3a1502;
		    margin: 10px auto!important;
		}
		#hokkaido-coupon .column .service > table  tr th{
		    font-size: 14px;
		}
		#hokkaido-coupon .column .service > table  tr td{
		    font-size: 13px;
		}
		#hokkaido-coupon .column .howtouse {
		    padding: 20px 4px;
		}
}