@charset "utf-8";
/* CSS Document */

.vtabi_box > .contents > div > .article_photo li span {
	display: block;
	width: 100%;
	overflow: hidden;
}
span.h_125 { height: 125px; }
span.h_144 { height: 144px; }
span.h_150 { height: 150px; }
span.h_160 { height: 160px; }


.bg_white{
	background-color: #fff;
}

/*-----------横並びボタン-----------*/
.btn3 {
  list-style: none;
  display: flex;
}
 
.btn3 li {
  width: 140px;
  text-align: center;
  font-size: 1.1em;
  background-color: #029E9A;
  padding: 15px 60px 15px 32px;
  color: #fff;
  position: relative;
  line-height: 50px;
  margin-right: 2px;
  border-radius: 10px;
}
 
.btn3 li a {
  text-decoration: none;
  color: #fff;
  padding: 20px;
}

/*-----------おトクに行こう-----------*/
.boxleft_photo>figure>img {width: 90%;}

.sp_br {display: none;}
.boxright>h4 {
    text-align: center;
	margin: 0 0 20px 0;
	font-size: 2.0rem;
}
.boxright>h4>span {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #ffcc29));
	background: -o-linear-gradient(transparent 70%, #ffcc29 70%);
	background: linear-gradient(transparent 70%, #ffcc29 70%);
}
.contents_flex {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.contents_flex>dl {
	text-align: center;
	width: 285px;
	padding: 8px 15px 9px 15px;
	border-right: 1px dashed #ee7500;
}
.contents_flex>dl:last-of-type {
    border-right: none;
}
.contents_flex>dl>dt {
	margin-bottom: 10px;
    font-size: 1.6rem;
    color: #fff;
    background-color: #f0831a;
}
.contents_flex>dl>dd {font-size: 1.5rem;}
.contents_flex>dl>dd>span {font-weight: bold;}
/*ボタン*/
.contents_btn {
	display: -webkit-box;
    display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.contents_btn>.btn01_rt {
	width: inherit!important;
	margin: 20px!important;
}
.hakodate_plan {
    text-align: center;
	margin-top: 20px;
}

.hakodate_plan>.limited {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
    justify-content: center;
	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    margin-bottom: 7px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #ee7500;
}
.hakodate_plan>.limited::before,.hakodate_plan>.limited::after {
    border-radius: 5px;
    position: absolute;
    content: "";
    width: 3px;
    height: 27px;
    background-color: #ee7500;
}
.hakodate_plan>.limited::before {
    margin-right: 250px;
	-webkit-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    transform: rotate(-35deg);
}
.hakodate_plan>.limited::after {
    margin-left: 245px;
	-webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
}
.hakodate_plan>.underline {
    font-size: 1.8rem;
    display: inline;
    font-weight: bold;
    padding-bottom: 3px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #ffcc29));
    background: -o-linear-gradient(transparent 60%, #ffcc29 60%);
    background: linear-gradient(transparent 60%, #ffcc29 60%);
}

/*-----------グランクラスで行く函館の旅-----------*/
.gc_center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
/*.ttl {
	display: inline;
	line-height: 2.0;
    padding-bottom: 5px;
	background-image: -o-repeating-linear-gradient(left, #cdb570 0, #cdb570 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
    background-image: repeating-linear-gradient(90deg, #cdb570 0, #cdb570 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
    background-size: 4px 4px;
    background-repeat: repeat-x;
    background-position: center bottom;
    font-size: 1.6rem;
}*/
.txt_gc>ul {
    margin-top: 15px;
    line-height: 1.8;
    font-weight: bold;
    font-size: 1.5rem;
}
/*-----------宿泊施設はこちら-----------*/
.hukidashi {
	position: relative;
	text-align: center;
}
.hukidashi>span {
	position: relative;
	display: inline-block;
	text-align: left;
	margin: 0 4em;
	padding: 0 1em;
	background-color: #fff;
	z-index: 2;
}
.hukidashi::before {
    position: absolute;
	content: '';
	display: block;
	width: 100%;
    height: 3px;
    top: 48%;
    z-index: 1;
    background: #cdb570;
	background: -o-linear-gradient(135deg, transparent, #cdb570 10%, #cdb570 90%, transparent);
    background: linear-gradient(-45deg, transparent, #cdb570 10%, #cdb570 90%, transparent);
}
/*---------------おすすめ日帰りプラン---------------*/
.osusume_title>a>h2 {
    background: #FFE194;
    padding: 7px 25px;
    border-radius: 50px;
    font-size: 2.0rem!important;
}
.plan_point {
	padding: 3px 5px;
	background: #E8F6EF;
	border: 2px solid #B8DFD8;
}
.higaeri_allbtn {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
    justify-content: center;
    margin-top: 15px;
}
.higaeri_allbtn>p {text-align: center;margin-right: 20px;}
.higaeri_allbtn>p:last-child {margin-right: 0;}
.higaeri_allbtn>p>a {
	display: block;
    background: #00BCD4;
    color: #fff;
    font-size: 1.8rem;
    padding: 15px 20px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 7px;
    border-bottom: 5px solid #008494;
}
.higaeri_allbtn>p>a:hover {
	margin-bottom: 5px;
    border-bottom: none;
	-webkit-transform: translateY(5px);
    transform: translateY(5px);
}
.bnr_hover>.listitem2>li>a>p>img:hover {opacity: .7;}

/*-----------宿のみプラン-----------*/
.stay_plan>h3 {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 2.3rem;
    text-align: center;
}
.stay_plan>h3::before,.stay_plan>h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-radius: 3px;
}
.stay_plan>h3::before {
    border-bottom: 3px solid #029e9a;
    width: 20%;
    left: 50%;
    transform: translateX(-50%);
}
.stay_plan>h3::after {
    border-bottom: 3px solid #C8C6C6;
    width: 100%;
	left: 0;
    z-index: -1;
}
.stay_plan>.area_titlebox>.area_name {background-color: #029e9a!important;}
.details>dt {
    position: relative;
    background-color: #cceceb;
    padding-left: 5px;
    border-left: 5px solid #029e9a;
}
.details>dd {padding: 5px 2% 10px;}
.details>dd>a {text-decoration: underline;}
.details>dd>a:hover {text-decoration: none;}
.period {
    text-align: center;
    margin-top: 5px;
    border-top: 2px dotted #029e9a;
    border-bottom: 2px dotted #029e9a;
    padding: 5px 0;
}
.period>dd {font-size: 1.6rem;}
.stay_btn>a {
    display: block;
    background: #029e9a;
	border: 1px solid #029e9a;
    color: #fff;
    text-decoration: none;
    padding: 15px 0;
    text-align: center;
    position: relative;
    border-radius: 10px;
	font-weight: bold;
	transition: .3s;
}
.stay_btn>a::after {
    position: absolute;
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg) translateY(-50%);
    top: 48%;
    right: 30px;
}
.stay_btn>a:hover {
    background: #fff;
    transition: .3s;
    color: #029e9a;
}

/*-----------紅葉の見ごろ-----------*/
span.pick_tx {
    padding: 2px 3px 1px;
    margin: 2px -2px 8px;
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 1px dashed;
    display: inline-block;
}

/*======================スマホ調整======================*/
@media screen and (max-width: 568px) {
	/*-----------おトクに行こう-----------*/
	.boxleft_photo {margin: 0 2%;}
	.boxleft_photo>figure>img {width: 100%;}
	/*boxright*/
	.sp_br {display: block;}
	.boxright>h4 {line-height: 1.5;font-size: 1.8rem;}
	.boxright {margin-left: 0;padding: 0 2%;}
	
	.contents_flex {border: 1px dashed #ee7500;border-radius: 10px;}
	.contents_flex>dl {width: 100%;border-right: none;}
	.contents_flex>dl>dt {font-size: 1.5rem;}
	
	.hakodate_plan>.limited {margin-bottom: 2px;}
	.hakodate_plan>.limited,.hakodate_plan>.underline {font-size: 1.6rem;}
	.hakodate_plan>.limited::before, .hakodate_plan>.limited::after {height: 23px;}
	.hakodate_plan>.limited::before {margin-right: 230px;}
	.hakodate_plan>.limited::after {margin-left: 220px;}
	
	/*ボタン*/
	.contents_btn {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.contents_btn>.btn01_rt {
		margin: 10px 30px!important;
	}
	/*-----------グランクラスで行く函館の旅-----------*/
	.txt_gc {margin: 0 2%;}
	.txt_gc>ul {margin-top: 10px;}
	
	.gc_center {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.hukidashi {margin: 15px 0 0;}
	.hukidashi>span {
		margin: 0 3%;
    	padding: 0 3%;
	}
	
	.osusume_title>a>h2 {font-size: 1.8rem!important;}
	.higaeri_allbtn {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		margin: 0 4%;
	}
	.higaeri_allbtn>p {margin: 0 0 15px 0;}
	.higaeri_allbtn>p:last-child {margin-bottom: 0;}
	.higaeri_allbtn>p>a {padding: 20px 5px;font-size: 1.6rem;}
	
	.stay_plan>h3 {margin: 0 2% 10px;}
	.stay_plan>h3::before {width: 50%;}
	.tx_discount {margin: 0 2%;}
	.stay_btn>a {margin: 0 2%;padding: 20px 0;}
}


/*---------------------------------------------------------
	IE
---------------------------------------------------------*/
@media all and (-ms-high-contrast:none) {
	.hakodate_plan > .limited::before {left: 42%;}
	.hakodate_plan > .limited::after {right: 42%;}
}
/*---------------------------------------------------------*/