@charset "UTF-8";

/* PCでは非表示 */
.pc_no{display: none;}




/* -------------------------- */
/* --------header-------- */
/* -------------------------- */

header{
border-top: solid 30px #064280;/* 上部のライン */
text-align: center;
padding-bottom: 10px;
}

/* ロゴ */
header div{margin: 25px 0 10px 0;}

/* ページタイトル */
header h1{
font-family: 'ヒラギノUD明朝 W4 JIS2004';
letter-spacing: 2px;
font-size: 3.6em;
font-weight: 200;
margin-bottom: 20px;
}
/* 北海道地図 */
header h1 img{margin: -70px -240px 0 0;}




/* -------------------------- */
/* --------main フェード-------- */
/* -------------------------- */

/* PCのサイズ　メインフェード */
.crossfade {
width: 100%;
height: 600px;
position:relative;
}

/* PCのサイズ　メインコピー */
.main_copy{
top: 450px;
font-size: 3.0em;
text-shadow: 0px 0px 15px #000000;
}






/* -------------------------- */
/* -----content 1000px囲み----- */
/* -------------------------- */
.content{
width: 1000px;
margin: 80px auto;
overflow: hidden;
}




/* -------------------------- */
/* --------タイトル-------- */
/* -------------------------- */

/* PCの文字サイズ */
.title_01 h1{
padding-bottom: 35px;
font-size: 2.4em;
}
/* PCの文字サイズ */
.title_02{font-size: 2.4em;}


/* PCの文字サイズ小 */
.title_02_s{
font-size: 0.8em;
}





/* -------------------------- */
/* --------ボタン-------- */
/* -------------------------- */

div.PCRankButton {display: block; padding: 3px 0;}
div.SPRankButton {display: none; padding-left: -2000px;}
/*
.bt_02 {padding: 30px 0;}
.bt_02 a{font-size: 1.5em; padding: 30px 150px;}
.bt_03 a{display: block; font-size: 1.5em; padding: 30px 0;}
*/



/* -------------------------- */
/* --------ランキング-------- */
/* -------------------------- */


.rank ul{
display: -ms-flexbox; /* IE10 */
display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
display: -webkit-flex; /* Safari6.1以降 */
display: flex;
/*配列順序（左から右へ） */
-ms-flex-direction: row; /*IE10*/
-webkit-box-direction: row; /* Android4.3以下、Safari3.1〜6.0 */
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
/*行指定（複数行に跨り、上から下へ） */
-ms-flex-wrap: wrap; /*IE10*/
-webkit-flex-wrap: wrap; /* Safari6.1以降 */
flex-wrap: wrap;
}

.rank ul li{
list-style: none;
width: 310px;
margin:50px 0 0 35px;
position:relative;
}


/* 詳細ボタンを下部へ */
.rank ul li span{
position:absolute;
bottom:0;
width: 100%;
}

/* 詳細ボタン分の空きを作る */
.rank ul li p{margin-bottom: 100px;}


/* １、4番目のmargin-left解除 */
.rank li:nth-child(1),.rank li:nth-child(4)
{margin:50px 0 0 0;}

/* 順位文字の大きさ */
.rank li h2{font-size: 2.0em;}

/* 番号の文字 */
.rank li h4{font-weight: 100;}




/* -------------------------- */
/* --------街の紹介-------- */
/* -------------------------- */

.city-info-01,.city-info-02{
margin: 100px 0;
overflow: hidden;
}
/* 写真 */
.city-info-01 img{float: left; margin-right: 55px;}
.city-info-02 img{float:right; margin-left: 55px;}






/* -------------------------- */
/* --------外部リンク一覧-------- */
/* -------------------------- */

ul.link{width: 100%; margin: 0 auto;}

ul.link li {
  list-style: none;
  width: 480px;
  float: left;
  padding: 0;
  margin: 20px 20px 20px 0;
}

/* 奇数のmargin解除 */
.link li:nth-child(2n+1){
    clear: left;
}

/* -------------------------- */
/* ------返礼品スライダー------ */
/* -------------------------- */

.henrei{text-align: center; margin: 100px 0 100px 0;}


/* 返礼品スライダー */
#loopslider {
margin: 0 auto;
width: 100%;
height: 190px;
text-align: left;
position: relative;
overflow:hidden;
}

/* スライダー　pcの幅を大きく */
#loopslider ul li {
width: 285px;
height: 195px;
float: left;
display: inline;
overflow: hidden;
}



/* -------------------------- */
/* --------下部バナー-------- */
/* -------20180925追記------- */



.banner ul{
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.banner li{
  box-sizing: border-box;
  padding: 15px 0;
  flex-grow: 1;
}





/* -------------------------- */
/* ------フッター------ */
/* -------------------------- */

/* 内容囲み */
footer section{
width: 1000px;
margin: 50px auto;
color:#FFF;
overflow: hidden;
}

/* 会社名とロゴ */
footer section h1{
float: left;
font-family: 'ヒラギノUD明朝 W4 JIS2004';
font-size: 2.0em;
font-weight: 100;
letter-spacing: 2px;
margin-right: 60px;
}
footer section h1 img{display: block; margin: 0 0 20px 0;}

/* 会社のアドレス */
footer section div {float: left;}
footer section div a{color: #FFF;}