@charset "utf-8";
/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
SP用スタイル：～　768px
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* キービジュアル
----------------------------------------------------------------------------- */
#kv .kv_box{
  position: relative;
}
#kv .kv_box .logo_img{
  position: absolute;
  top: -45%;
  bottom: 0;
  right: 45%;
  left: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  z-index: 10;
}
#kv .kv_box .logo_img01{
  position: absolute;
  top: 15%;
  bottom: 0;
  right: 45%;
  left: 0;
  margin: auto;
  width: 40%;
  height: 40%;
  z-index: 10;
}

/* ページナビ
----------------------------------------------------------------------------- */
#page_nav{
  background: #9c8ab4;
  border-bottom: 1vw solid #fff;
}
#page_nav ul{
  display: flex;
}
#page_nav ul li{
}
#page_nav ul li a{
  display: block;
  padding: 6vw 3vw 3vw 3vw;
  position: relative;
}
#page_nav ul li.nav01 a:before {
  content: '';
  display: inline-block;
  background: url(../img/rec_ico.png) no-repeat;
  background-size: contain;
  width: 7vw;
  height: 7vw;
  position: absolute;
  left: 50%;
  top: -3vw;
  margin-left: -3.5vw;
  transition: all 0.2s ease-out;
  z-index: 2;
}
#page_nav ul li.nav02 a:before {
  content: '';
  display: inline-block;
  background: url(../img/ichioshi_ico.png) no-repeat;
  background-size: contain;
  width: 6vw;
  height: 6vw;
  position: absolute;
  left: 50%;
  top: -2vw;
  margin-left: -3vw;
  transition: all 0.2s ease-out;
  z-index: 2;
}
#page_nav ul li.nav03 a:before {
  content: '';
  display: inline-block;
  background: url(../img/map_ico.png) no-repeat;
  background-size: contain;
  width: 6vw;
  height: 6vw;
  position: absolute;
  left: 50%;
  top: -2vw;
  margin-left: -3vw;
  transition: all 0.2s ease-out;
  z-index: 2;
}
#page_nav ul li.nav04 a:before {
  content: '';
  display: inline-block;
  background: url(../img/search_ico.png) no-repeat;
  background-size: contain;
  width: 6vw;
  height: 6vw;
  position: absolute;
  left: 50%;
  top: -2vw;
  margin-left: -3vw;
  transition: all 0.2s ease-out;
  z-index: 2;
}
/* 北海道ドラマティックロードとは
----------------------------------------------------------------------------- */
#about {
  background: url(../img/bg01.gif);
  padding: 8vw 0;
}
#about .about_wrap{
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#about .about_wrap .head_img{
  order: 1;
  width: 35%;
  margin-right: -5%;
}
#about .about_wrap .section{
  order: 3;
}
#about .about_wrap .section h2{
  margin: 6vw 0 4vw;
}
#about .about_wrap .section .txt{
  line-height: 1.8;
  font-size: 3.75vw;
  color: #444444;
}
#about .about_wrap .map_img{
  order: 2;
  width: 70%;
}
#about .special_btn{
  width: 92%;
  margin: 5vw auto 0;
}
#about .special_btn a{
  display: block;
}
/* 人気のスポット
----------------------------------------------------------------------------- */
#spot {
  padding: 5vw 0;
}
#spot .spot_in .ttl_warp{
  position: relative;
}
#spot .spot_in .ttl_warp .girl{
  position: absolute;
  width: 26vw;
  right: 4%;
  bottom: -13vw;
}
#spot .spot_in .box{
  width: 92%;
  margin: 4vw auto;
}
#spot .spot_in .box .contents .head{
  margin-bottom: 5vw;
}
#spot .spot_in .box .contents .txt{
  line-height: 1.8;
  font-size: 3.75vw;
  color: #444444;
  margin-bottom: 5vw;
}
#spot .spot_in .box .photo_wrap{
  position: relative;
}
#spot .spot_in .box .photo dl{
  position: relative;
}
#spot .spot_in .box .photo dd{
  font-size: 3.75vw;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 3vw;
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 1.4;
}
#spot .spot_in .box .decoration{
  padding-top: 4vw;
}
#spot .free_plan{
  background: url(../img/freeplan_btn_bg01_sp.png) no-repeat;
  background-size: 100% 100%;
  width: 94%;
  margin: 0 auto;
  padding: 3vw 0;
}
#spot .free_plan .title{
  width: 83%;
  margin: 0 auto 2vw;
}
#spot .free_plan ul {
  display: flex;
  justify-content: space-between;
  width: 91%;
  margin: 0 auto;
}
#spot .free_plan ul li {
  width: 98%;
  margin-right: 2%;
  text-align: center;
}
#spot .free_plan ul li:last-child{
  width: 100%;
  margin-right: 0;
}
#spot .free_plan ul li a {
  display: block;
  font-size: 3.75vw;
  font-weight: bold;
  color: #8b7b25;
  background: #fff url(../img/arrow_ico.png) no-repeat right 3% center;
  background-size: 2vw;
  padding: 3vw 0;
  border: 1vw solid #dcdbc0;
  box-shadow: 1vw 1vw 0px rgba(13,3,6,0.3);
}
#spot .free_plan01{
  background: url(../img/freeplan_btn_bg03_sp.png) no-repeat;
  background-size: 100% 100%;
  width: 94%;
  margin: 0 auto;
  padding: 3vw 0;
}
#spot .free_plan01 .title{
  width: 83%;
  margin: 0 auto 2vw;
}
#spot .free_plan01 ul {
  display: flex;
  justify-content: space-between;
  width: 91%;
  margin: 0 auto;
}
#spot .free_plan01 ul li {
  width: 98%;
  margin-right: 2%;
  text-align: center;
}
#spot .free_plan01 ul li:last-child{
  width: 100%;
  margin-right: 0;
}
#spot .free_plan01 ul li a {
  display: block;
  font-size: 3.75vw;
  font-weight: bold;
  color: #8b7b25;
  background: #fff url(../img/arrow_ico.png) no-repeat right 3% center;
  background-size: 2vw;
  padding: 3vw 0;
  border: 1vw solid #dcdbc0;
  box-shadow: 1vw 1vw 0px rgba(13,3,6,0.3);
}
#spot .free_plan02{
  background: url(../img/freeplan_btn_bg02_sp.png) no-repeat;
  background-size: 100% 100%;
  width: 94%;
  margin: 0 auto;
  padding: 3vw 0;
}
#spot .free_plan02 .title{
  width: 83%;
  margin: 0 auto 2vw;
}
#spot .free_plan02 ul {
  display: flex;
  justify-content: space-between;
  width: 91%;
  margin: 0 auto;
}
#spot .free_plan02 ul li {
  width: 98%;
  margin-right: 2%;
  text-align: center;
}
#spot .free_plan02 ul li:last-child{
  width: 100%;
  margin-right: 0;
}
#spot .free_plan02 ul li a {
  display: block;
  font-size: 3.75vw;
  font-weight: bold;
  color: #8b7b25;
  background: #fff url(../img/arrow_ico.png) no-repeat right 3% center;
  background-size: 2vw;
  padding: 3vw 0;
  border: 1vw solid #dcdbc0;
  box-shadow: 1vw 1vw 0px rgba(13,3,6,0.3);
}
/* slick js
----------------------------------------------------------------------------- */
/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
  content:""!important;
  font-size: 8.125vw!important;
  width: 8.125vw;
  height: 8.125vw;
  display: inline-block;
  opacity: 1!important;
}
.slick-prev:before{
  background: url(../img/s_arrow_r.png);
  background-size: contain;
}
.slick-next:before {
  background: url(../img/s_arrow_l.png);
  background-size: contain;
}
.slick-prev, .slick-next {
  width: 8.125vw!important;
  height: 8.125vw!important;
}
/*左右の矢印の位置を変える*/
.slick-next {
  right: -3vw!important;
  z-index: 99!important;
}
.slick-prev {
  left: -3vw!important;
  z-index: 100!important;
}
.slick-dots {
bottom: -9.375vw!important;
}
.slick-dots li {
  margin: 0!important;
}
.slick-dots li button::before {
  font-size: 11px!important;
}
.slick-dots li.slick-active button:before {
  color: #a7c4e1!important;
}
.slick-dots li button:hover::before, .slick-dots li button:focus::before {
  color: #a7c4e1!important;
}
/* 一押しツアー
----------------------------------------------------------------------------- */
#ichioshi{
  background: url(../img/bg01.gif);
  padding: 8vw 0;
}
#ichioshi .ichioshi_in{
  width: 92%;
  margin: 0 auto;
}
#ichioshi .ichioshi_in .ttl{
  margin-bottom: 5vw;
}
#ichioshi .box{
  margin-bottom: 10vw;
}
#ichioshi .box:last-child{
  margin-bottom: 0;
}
#ichioshi .box .head{
  display: flex;
  justify-content: space-between;
  background: url(../img/line.png) no-repeat center bottom;
  padding-bottom: 5vw;
  margin-bottom: 4vw;
}
#ichioshi .box .head .stmp{
  width: 20%;
}
#ichioshi .box .head h3{
  width: 100%;
  font-size: 4.375vw;
  line-height: 1.4;
  color: #e16a13;
}
#ichioshi .box .head .stmp + h3{
  width: 78%;
}
#ichioshi .box .contents .txt{
  line-height: 1.8;
  font-size: 3.75vw;
  color: #444444;
  margin-bottom: 5vw;
}
#ichioshi .box .photo{
  margin-bottom: 13vw;
}
#ichioshi .box .photo dl{
  position: relative;
}
#ichioshi .box .photo dd{
  font-size: 3.75vw;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 3vw;
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 1.4;
}
#ichioshi .free_plan{
  background: url(../img/freeplan_btn_bg02_sp.png) no-repeat;
  background-size: 100% 100%;
  padding: 3vw 0;
}
#ichioshi .free_plan .title{
  width: 65%;
  margin: 0 auto 2vw;
  color:#fff;
  text-align: center;
  font-size: 4.375vw;
  font-weight: bold;
}
#ichioshi .free_plan .title span{
  font-size:2.5vw;
  font-weight: normal;
}
#ichioshi .free_plan ul {
  display: flex;
  justify-content: space-between;
  width: 91%;
  margin: 0 auto;
}
#ichioshi .free_plan ul li {
  width: 98%;
  margin-right: 2%;
  text-align: center;
}
#ichioshi .free_plan ul li:last-child{
  width: 100%;
  margin-right: 0;
}
#ichioshi .free_plan ul li a {
  display: block;
  font-size: 3.75vw;
  font-weight: bold;
  color: #8b7b25;
  background: #fff url(../img/arrow_ico.png) no-repeat right 4% center;
  background-size: 2vw;
  padding: 3vw 0;
  border: 1vw solid #dcdbc0;
  box-shadow: 1vw 1vw 0px rgba(13,3,6,0.3);
}
/* アクセスMAP
----------------------------------------------------------------------------- */
#access{
  padding: 8vw 0;
}
#access .access_in{
  width: 92%;
  margin: 0 auto;
}
#access .access_in .ttl{
  margin-bottom: 5vw;
}
#access .access_in .map_wrap .map{
  border: 4px solid #e7e5d7;
}
#access .access_in .map_wrap .map_in{
  border: 5px solid #fff!important;
}
#access .access_in .map_wrap .map .map_in iframe{
  width: 100%;
  height: 80vw;
}
#access .access_in .map_wrap .text h3{
  font-size: 5vw;
  border-bottom: 1px solid #e5d778;
  padding: 4.6875vw 0 4.6875vw 17.1875vw;
  margin-bottom: 5vw;
}
#access .access_in .map_wrap .text .jp_sec h3{
  background: url(../img/jr_ico.png) no-repeat left 2.5vw center;
}
#access .access_in .map_wrap .text .car_sec h3{
  background: url(../img/car_ico.png) no-repeat left 2.5vw center;
}
#access .access_in .map_wrap .text .bus_sec h3{
  background: url(../img/bus_ico.png) no-repeat left 2.5vw center;
}
#access .access_in .map_wrap .text .bus_sec p{
  font-weight: bold;
  margin-bottom: 1.5625vw;
  padding-bottom: 1.5625vw;
  border-bottom: 1px dotted #b3b3b3;
  font-size: 4.375vw;
}
#access .access_in .map_wrap .text .comments{
  color: #d01414;
  font-size:  3.75vw;
  padding: 0 2.5vw 4.6875vw 2.5vw;
}
#access .access_in .map_wrap .text dl{
  padding: 0 2.5vw 4.6875vw 2.5vw;
  line-height: 1.4;
}
#access .access_in .map_wrap .text dt{
  color: #a6548e;
  font-weight: bold;
  font-size: 3.75vw;
  margin-bottom: 0.625vw;
}
#access .access_in .map_wrap .text dd{
  color: #4c4c4c;
  font-size: 3.75vw;
}
/* 検索
----------------------------------------------------------------------------- */
.form_wrap select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form_wrap select::-ms-expand {
display: none;
}
#maincontent #searchConditional{
  background: url(../img/bg01.gif);
  padding-top: 10vw;
}
#maincontent #searchConditional h2{
  text-align:center;
  width: 92%;
  margin: 0 auto;
}
#maincontent #searchConditional #tour-search{
overflow: hidden;
padding: 5vw;
color: #201f1e;
font-size: 3.75vw;
font-weight: bold;
margin-top: 5vw;
}
#maincontent #searchConditional #tour-search h3{
text-align:center;
padding:0 23vw;
margin-bottom:5vw;
}
#maincontent #searchConditional #tour-search h3 img{
max-width:230px;
}
#maincontent #searchConditional .form-set{
margin-bottom:2vw;
}
#maincontent #searchConditional .form-set{
display:inline-block;
}
#maincontent #searchConditional .form-set-inner{
display: table;
table-layout: fixed;
width: 100%;
}
#maincontent #searchConditional .form-set-inner .stit{
width: 28%;
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-weight: normal;
font-size: 3.5vw;
background: #b2a1c1;
padding: 0.7vw;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#maincontent #searchConditional .form-set-inner .stit
#maincontent #searchConditional .form-set-inner dl dd{
display:inline-block
}
#maincontent #searchConditional .form-set-inner select{
outline:none;
font-size: 3.75vw;
padding: 1.5vw;
margin: 0;
line-height: 100%;
border: 1px solid #484846;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
}
#maincontent #searchConditional .form-set-inner select{
}
#maincontent #searchConditional .form-set-inner select,
#maincontent #searchConditional select,
#maincontent #searchConditional input[type='text']{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color:#fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#maincontent #searchConditional .daybox {
background: #fff url(../img/icon_cal.png) no-repeat 98% 50%;
background-size: auto 75%;
}
#maincontent #searchConditional #frm-KeyWord input,
#maincontent #searchConditional #frm-Day input{
padding:0 2vw;
border-radius: initial;
border: 2px solid #d7d3bf;
}
#maincontent #searchConditional .form-set-inner select,
#maincontent #searchConditionalselect,
#maincontent #searchConditional input[type='text']{
position: relative;
left: 2vw;
cursor: pointer;
outline: none;
font-size: 16px;
display: table-cell;
vertical-align: middle;
border: 1px solid #c0c0c0;
width:100%;
height: 6.75vh;
}
#maincontent #searchConditional .form-set-inner select,
#maincontent #searchConditional select{
background: url(../img/select_bg_sp.png) no-repeat right center;
background-size: 100%;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: initial;
}
#maincontent #add-condition label{
cursor: pointer;
font-size: 3vw;
}
#maincontent #add-condition label{
display:inline-block;
margin: 1.5vw 5vw 1vw 0;
}
#maincontent #add-condition input{
position: relative;
outline:none;
margin-left: 0;
}
input[type="radio"]{
margin-left:0;
-webkit-appearance: none;
appearance: none;
position: relative;
width: 20px;
height: 20px;
vertical-align: middle;
background: url(../img/check_bg.png) left top;
margin-right: 1.5vw;
margin-top:-1px;
border: none;
-webkit-border-radius: 0;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
input[type="radio"]:checked::before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 20px;
background: url(../img/check_bg.png) left bottom;
}
input[type="checkbox"]{
-webkit-appearance: none;
appearance: none;
position: relative;
width: 20px;
height: 20px;
vertical-align: middle;
background: url(../img/check_bg.png) left top;
margin-right: 10px;
margin-top:-1px;
border: none;
-webkit-border-radius: 0;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
input[type="checkbox"]:checked::before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 20px;
background: url(../img/check_bg.png) left bottom;
}



#maincontent #searchConditional .main_menu{
position: relative;
margin-bottom:3.5vw;
margin-top:2vw;
text-align: right;
}
#maincontent #searchConditional .main_menu .submenu_ttl{
display: inline-block;
padding: 2vw;
color: #707070;
font-size: 3.25vw;
font-weight: normal;
text-align: right;
padding-right: 8vw;
cursor: pointer;
}
#maincontent #searchConditional .main_menu .submenu_ttl:after{
content: "＋";
position: absolute;
right: 0;
top: 50%;
width: 6vw;
height: 6vw;
line-height: 5.5vw;
text-align: center;
font-size: 5vw;
font-weight: bold;
margin: -3vw 0 0;
color: #fff;
background: #bab59c;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
border: 1px solid #c0c0c0;
}
#maincontent #searchConditional .main_menu .submenu_ttl.open:after{
content:"－" !important;
}
#maincontent #searchConditional #add-condition{
display:none;
padding-top:2vw;
border-top: 0.5vw solid #201f1e;
}
#maincontent #searchConditional #add-condition li{
padding:5vw;
margin-top:2vw;
margin-bottom:5vw;
}
#maincontent #searchConditional #add-condition li label:first-child {

}
#maincontent #searchConditional #add-condition li .ItemClassesBox label:first-child {
margin-left:0;
}
#maincontent #searchConditional #search_btn{
text-align:center;
max-width:418px;
margin:4.5vw auto 0;
}
#maincontent #searchConditional #search_btn p{
display: block;
outline:none;
cursor: pointer;
text-align: center;
font-size: 4vw;
color: #ffffff;
padding: 3vw 0 2.5vw;
font-weight: normal;
letter-spacing: 0.05em;
}

/* オリジナル特典一覧 /benefits/
----------------------------------------------------------------------------- */
#benefits #main{
  background: url(../img/bg02.gif);
  padding-bottom: 50px;
}
#benefits #main .main_in{

}
#benefits #main .main_in h1{
  text-align: center;
  padding: 5vw 1vw;
}
#benefits #main .main_in .contents{
  width: 94%;
  margin: 0 auto;
}
#benefits #main .main_in .contents_in{
  background: #fff;
  border: 2.5vw solid #e0d9ab;
  padding: 6vw 7vw;
}
#benefits #main .main_in .contents_in .read{
  font-size: 4.375vw;
  color: #525252;
  line-height: 1.4;
  padding-bottom: 6vw;
}
#benefits #main .cont_box .list_box{
  margin-bottom: 10vw;
}
#benefits #main .cont_box .list_box:last-child{
  margin-bottom: 0;
}
#benefits #main .cont_box .list_box h2 {
  margin-bottom: 5vw;
}
#benefits #main .cont_box .list_box .list{
  margin-bottom: 5vw;
  padding: 0 2vw;
}
#benefits #main .cont_box .list_box .list .head{
  font-weight: bold;
  font-size: 5.625vw;
  border-bottom: 1px dotted #e0d9ab;
  padding: 0 0 3vw 11vw;
  margin-bottom: 3vw;
  background: url(../img/arrow_l.png) no-repeat left top 1.5vw;
  background-size: 8vw;
  line-height: 1.2;
}
#benefits #main .cont_box .list_hakodate .list .head{
  color: #5592b6;
}
#benefits #main .cont_box .list_noboribetsu .list .head{
  color: #cb7267;
}
#benefits #main .cont_box .list_sapporo .list .head{
  color: #6da742;
}
#benefits #main .cont_box .list_box .list p{
  color: #444444;
  font-size: 4.375vw;
  line-height: 1.6;
}
#benefits #main .cont_box .list_box .list p.line{
  margin-top: 3vw;
  padding-top: 3vw;
  border-top: 1px dashed #000;
}
#benefits #main .contents .comments_box{
  font-size: 4.375vw;
  line-height: 1.6;
  color: #353434;
  padding: 5vw 0 0;
}
#benefits #main .contents .exchange{
  margin-top: 6vw;
}
#benefits #main .contents .exchange h2{
  font-size: 5.625vw;
  color: #452d0f;
  margin-bottom: 5vw;
}
#benefits #main .contents .exchange .exchange_box{
  background: #fff;
  border: 2.5vw solid #e0d9ab;
  padding: 4vw 5vw;
}
#benefits #main .contents .exchange .exchange_box dl{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 3vw;
  margin-bottom: 3vw;
  border-bottom: 1px dotted #e0d9ab;
}
#benefits #main .contents .exchange .exchange_box dl:last-child{
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
#benefits #main .contents .exchange .exchange_box dl dt{
  font-size: 4.6875vw;;
  font-weight: bold;
  width: 25%
}
#benefits #main .contents .exchange .exchange_box dl.hakodate dt{
  color: #5592b6;
}
#benefits #main .contents .exchange .exchange_box dl.noboribetsu dt{
  color: #cb7267;
}
#benefits #main .contents .exchange .exchange_box dl.sapporo dt{
  color: #6ba144;
}
#benefits #main .contents .exchange .exchange_box dl dd{
  color: #452d0f;
  line-height: 1.4;
  width: 72%
}
#benefits #main .contents .exchange .exchange_box dl dd .name{
  font-size: 4.375vw;
  font-weight: bold;
}
#benefits #main .contents .exchange .exchange_box dl dd .add{
  font-size: 3.75vw;
}

#benefits #main{
  position: relative;
}
#benefits #main .return.for-pc{
  display: inline-block!important;
  position: absolute;
  top:0;
  left: 3vw;
}
#benefits #main .return a{
  background: #fff;
  display: block;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 5px 10px;
}