@charset "shift_jis";

/* *** common *** */

body {
	font-size:13px;
	*font-size:small;
	width:970px;
}

#breadcrumbs{
	margin-left:5px;
}

h1{
	font-size: 16px;
	padding-left: 10px;
	padding-bottom: 0px;
	border-left: 5px solid #bd0001;
	clear:left;
	margin-bottom:5px;
	margin-left:10px;
	font-weight: bold;
}

#contents_area {
	width: 950px;
	margin-left:10px;
	margin-bottom: 70px;
	color: #000;
}

.pageTop {
	text-align:right;
	color: #88B7B2;
	font-size: 9px;
	margin: 6px auto;
	width: 970px;
	clear:both;
}
.pageTop a {
	font-size: 12px;
	padding-left: 5px;
	text-decoration: none;
}

#contents_area .btn a:hover img {
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}

#contents_area .sp {
	display: none;
}

/* *************** */

#contents_area #head_contents {
	width: 890px;
	margin: 40px auto 82px;
}

#contents_area .tab_contents {
	width: 100%;
	background: #FFFFEB;
	padding-top: 70px;
	padding-bottom: 55px;
}

#contents_area .contentsTitle {
	text-align: center;
	font-size: 28px;
	line-height: 1.2;
	margin-bottom: 0.8em;
}
#contents_area .contentsText {
	text-align: center;
	font-size: 19px;
}

/* 出発地によるリンクの切り替え */
#contents_area .dep_btn .btn {
	display: none;
}
#contents_area .dep_btn .btn.active {
	display: block;
}


/*---------------------------
main view
-----------------------------*/
#contents_area #main_view {
	position: relative;
}
#contents_area #main_view .slick-dots {
	position: absolute;
	top: 497px;
	right: 15px;
	text-align: right;
}
#contents_area #main_view .slick-dots li {
	width: 51px;
	margin-left: 6px;
	cursor: pointer;
}
#contents_area #main_view .slick-dots li.slick-active {
	border: 1px solid #FFFFFF;
	overflow: hidden;
}
#contents_area #main_view .slick-dots li.slick-active img {
	margin-top: -1px;
	margin-left: -1px;
}

/*---------------------------
出発地をお選びください。
-----------------------------*/
#contents_area #select_contents {
	margin: 64px 0 29px;
	border-bottom: 1px solid #000;
	padding-bottom: 20px;
	text-align: center;
}
#contents_area #select_contents dt,
#contents_area #select_contents dd {
	display: inline-block;
}
#contents_area #select_contents dt {
	font-size: 17px;
	margin-right: 1em;
}
#contents_area #select_contents dd select {
	font-size: 16px;
	width: 221px;
	text-align: center;
	padding: 5px;
}

/*---------------------------
○月の見どころ
-----------------------------*/
#contents_area #midokoro_part {
	/*border: 1px solid #000;
	padding: 17px;
	text-align: center;*/
}
#contents_area #midokoro_part dl {
	font-size: 17px;
}
#contents_area #midokoro_part a {
	color: #000;
}
#contents_area #midokoro_part a:hover {
	text-decoration: none;
}
#contents_area #midokoro_part dt {
	font-weight: bold;
}
#contents_area #midokoro_part ul {
	margin: 1em auto 1.5em;
}
#contents_area #midokoro_part li {
	display: inline-block;
	margin: 0 50px;
}
#contents_area #midokoro_part li a {
	border-bottom: 2px solid #000;
}
#contents_area #midokoro_part p {
	font-size: 14px;
	line-height: 1;
	width: 258px;
	margin: auto;
}
#contents_area #midokoro_part p a {
	font-weight: bold;
	text-align: center;
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 1em 0;
	border-radius:5px;
	border:1px solid #000;
	background: #E4E4E4;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #E4E4E4), color-stop(0, #F0F0F0));
	background: -webkit-linear-gradient(top, #F0F0F0 0%, #E4E4E4 100%);
	background: -moz-linear-gradient(top, #F0F0F0 0%, #E4E4E4 100%);
	background: -o-linear-gradient(top, #F0F0F0 0%, #E4E4E4 100%);
	background: -ms-linear-gradient(top, #F0F0F0 0%, #E4E4E4 100%);
	background: linear-gradient(to bottom, #F0F0F0 0%, #E4E4E4 100%);	
}
#contents_area #midokoro_part p a::after {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
	box-sizing: border-box;
	width: 5px;
	height: 4px;
	border: 5px solid transparent;
	border-top: 5px solid #000;
	right: 15px;
}

/*---------------------------
tab menu
-----------------------------*/
#contents_area #tab_menu {
	
}
#contents_area #tab_menu li {
	width: 470px;
	text-align: center;
}
#contents_area #tab_menu li#menu_purpose{
	float: left;
}
#contents_area #tab_menu li#menu_area{
	float: right;
}
#contents_area #tab_menu li a {
	background-color: #000;
	color: #FFF;
	display: block;
	position: relative;
	font-size: 28px;
	padding: 0 1em;
}
#contents_area #tab_menu li.active a {
	background-color: #FFFFEB;
	color: #000;
	cursor: text;
}
#contents_area #tab_menu li:not(.active) a:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 11px;
	margin: auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
#contents_area #tab_menu li:not(.active) a:hover {
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60);
}
#contents_area #tab_menu li span {
	padding: 1em 0;
	display: inline-block;
}
#contents_area #tab_menu li#menu_purpose span{
	background: url(../images/icon_purpose_w.png) no-repeat left center;
	padding-left: 46px;
}
#contents_area #tab_menu li#menu_purpose.active span{
	background: url(../images/icon_purpose_b.png) no-repeat left center;
}
#contents_area #tab_menu li#menu_area span{
	background: url(../images/icon_area_w.png) no-repeat left center;
	padding-left: 57px;
}
#contents_area #tab_menu li#menu_area.active span{
	background: url(../images/icon_area_b.png) no-repeat left center;
}

/*---------------------------
ページ内リンク
-----------------------------*/
#contents_area #anc_contents {
	width: 903px;
	margin: 40px auto 0;
}
#contents_area #anc_contents li {
	float: left;
	margin-right: 5px;
}
#contents_area #anc_contents li:last-child {
	margin-right: 0;
}

/*---------------------------
旬なプラン
-----------------------------*/
#contents_area #tour_contents {
	width: 902px;
	margin: auto;
}
#contents_area #tour_contents .section {
	padding-top: 64px;
}
#contents_area #tour_contents .photoWrap {
	position: relative;
	z-index: 1;
}
#contents_area #tour_contents .photoSlide li {
	position: relative;
	width: 50%;
}
#contents_area #tour_contents .photoSlide li.photo1{
	float: left;
}
#contents_area #tour_contents .photoSlide li.photo2{
	float: right;
}
#contents_area #tour_contents .photoSlide .textBox {
	position: absolute;
	bottom: 0;
	padding: 25px;
	width: 300px;
	color: #FFF;
}
#contents_area #tour_contents .photoSlide .photo1 .textBox {
	left: 0;
}
#contents_area #tour_contents .photoSlide .photo2 .textBox {
	right: 0;
}
#contents_area #tour_contents .photoSlide .textBox h4 {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
}
#contents_area #tour_contents .photoSlide .textBox p {
	font-size: 15px;
	line-height: 1.27;
	margin-top: 0.53em;
}
#contents_area #tour_contents .photoSlide .textBox p span{
	font-size: 13px
}
#contents_area #tour_contents .photoSlide .textBox p a{
	color: #fff;
	font-size: 12px
}

#contents_area #tour_contents .photoWrap .on {
	position: absolute;
	top: 96px;
	bottom: 0;
	left: 0;
	right: 0;
	width: 160px;
	margin: auto;
	z-index: 3;
}
#contents_area #tour_contents #event .on {
	top: 73px;
}

#contents_area #tour_contents .photoWrap .on h3 {
	margin-bottom: 21px;
}
#contents_area #tour_contents .photoWrap .on .btn {
	margin-top: 12px;
}

/*---------------------------
MAP
-----------------------------*/
#contents_area #map_contents {
	position: relative;
	width: 681px;
	margin: 49px auto 0;
}
#picMap {
	position: absolute;
	z-index: 1;
}
#contents_area #map_contents .pin_wrap {
	position: relative;
	z-index: 2;
	width: 125px;
}
#contents_area #map_contents #hoku {
	margin-left: 334px;
}
#contents_area #map_contents #ou {
	margin-top: 43px;
	/*width: 125px;*/
}
#contents_area #map_contents #tou {
	/*text-align: right;*/
	margin-left: 555px;
	margin-top: 63px;
}
#contents_area #map_contents #nan {
	margin-top: 7px;
	margin-left: 204px;
}

#contents_area #map_contents .area {
	position: relative;
	z-index: 3;
	width: 125px;
}

/*ふきだし*/
#contents_area #map_contents .fukidashi {
	position: absolute;
	z-index: 2;
	display: none;
}
#contents_area #map_contents .active .fukidashi {
	display: block;
}

#contents_area #map_contents .fukidashi::after {
	content: '';
	clear: both;
	display: block;
}
#contents_area #map_contents #hoku .fukidashi {
	background: url(../images/pc/bg_fukidashi_hoku.png) no-repeat 0 0;
	width: 315px;
	height: 126px;
	padding-top: 2px;
	padding-left: 31px;
	top: 49px;
	left: 97px;
}
#contents_area #map_contents #ou .fukidashi {
	background: url(../images/pc/bg_fukidashi_ou.png) no-repeat 0 0;
	width: 317px;
	height: 157px;
	top: -123px;
	left: -34px;
}
#contents_area #map_contents #nan .fukidashi {
	background: url(../images/pc/bg_fukidashi_nan.png) no-repeat 0 0;
	width: 317px;
	height: 157px;
	top: -121px;
	left: -160px;
}
#contents_area #map_contents #tou .fukidashi {
	background: url(../images/pc/bg_fukidashi_tou.png) no-repeat 0 0;
	width: 317px;
	height: 128px;
	padding-top: 41px;
	top: 85px;
	left: -148px;
}

#contents_area #map_contents .fukidashi .text {
	float: left;
	padding: 1px;
	width: 203px;
	height: 118px;
	text-align: left;
}
#contents_area #map_contents .fukidashi .text dl {
	padding: 15px 21px;
	font-size: 14px;
}
#contents_area #map_contents .fukidashi .text dt {
	font-weight: bold;
	border-bottom: 1px solid #000;
	line-height: 1.1;
	padding-bottom: 0.7em;
	margin-bottom: 0.4em;
}
#contents_area #map_contents .fukidashi .text dd {
	line-height: 1.46;
}

#contents_area #map_contents .fukidashi .btn {
	float: left;
}


/*---------------------------
エリアごとに商品を探す
-----------------------------*/

#contents_area #area_contents {
	width: 868px;
	margin: 62px auto 0;
}

#contents_area #area_contents .section {
	margin-bottom: 102px;
}
#contents_area #area_contents #area_nan {
	margin-bottom: 0;
}

#contents_area #area_contents .section img {
	vertical-align: middle;
}

#contents_area #area_contents h3 {
	color: #000;
	margin-bottom: 41px;
}
#contents_area #area_contents h3 {
 /* display: table;*/
  text-align: center;
  /*white-space: nowrap;*/
	position: relative;
}
#contents_area #area_contents h3 img {
	position: relative;
	z-index: 2;
}
#contents_area #area_contents h3:before {
	content: '';
	position: absolute;
	height: 1px;
	width: 100%;
	background: #000;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto 0;
	z-index: 1;
}

/* カテゴリ詳細カセット */
#contents_area #area_contents .cassette {
	
}
#contents_area #area_contents .cassette:after {
	content: '';
	clear: both;
	display: block;
}
#contents_area #area_contents .cassette .photo {
	float: left;
}
#contents_area #area_contents .cassette .photo span{
	display: block;
	margin-top: 5px;
	text-align: center;
}
#contents_area #area_contents .cassette .photo span a{
	color: #000
}



#contents_area #area_contents .cassette .textbox {
	float: right;
	width: 466px;
}
#contents_area #area_contents .cassette h4 {
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
}
#contents_area #area_contents .cassette h4 img {
	margin-right: 9px;
}
#contents_area #area_contents .cassette h4 span {
	vertical-align: middle;
}

#contents_area #area_contents .cassette .info {
	font-size: 15px;
	line-height: 1.47;
	margin: 0.5em 0 1em;
}
#contents_area #area_contents .cassette .about {
	font-size: 16px;
	line-height: 1.7;
}
#contents_area #area_contents .text_soon {
	text-align: center;
}

/* カテゴリ内情報 */
#contents_area #area_contents .category {
	background: #FFF;
	padding: 25px 39px 12px;
	margin: 34px auto 47px;
}
#contents_area #area_contents .category li {
	vertical-align: middle;
	width: 49%;
	margin-bottom: 13px;
	font-size: 14px;
	line-height: 1.3;
}
#contents_area #area_contents .category li:after{
	content: '';
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
}

#contents_area #area_contents .category li:nth-child(odd){
	clear: both;
	float: left;
}
#contents_area #area_contents .category li:nth-child(even){
	float: right;
}
#contents_area #area_contents .category li img {
	margin: -1px 8px 0 0;
	float: left
}

/* アイコン付ボタン */
#contents_area #area_contents .iconBtn {
	width: 669px;
	margin: 20px auto 0;
}
#contents_area #area_contents .iconBtn a {
	background: #000;
	position: relative;
	display: block;
	padding: 0 28px 0 7px;
	color: #FFF;
	vertical-align: middle;
	text-decoration: none;
	border-radius: 5px;
	font-size: 20px;
	font-weight: bold;
	box-shadow:0px 0px 4px 0px rgba(0,0,0,0.4);
}
#contents_area #area_contents .iconBtn a::after {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
	right: 28px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #FFF;
	border-left: 2px solid #FFF;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
#contents_area #area_contents .iconBtn a:hover {
	background: #2A2A2A;
}

#contents_area #area_contents .iconBtn a .pic {
	display: inline-block;
	vertical-align: middle;
	width: 137px;
	position: relative;
}
#contents_area #area_contents .iconBtn a .pic img {
	display: block;
}
#contents_area #area_contents .iconBtn a .pic img:nth-child(2){
	margin-top: 3px;
}
#contents_area #area_contents .iconBtn a .pic img:nth-child(3){
	position: absolute;
	top: 0;
	right: 0;
}
#contents_area #area_contents .iconBtn a .pic img:nth-child(4){
	position: absolute;
	bottom: 0;
	right: 0;
}

#contents_area #area_contents .iconBtn a .plan {
	display: inline-block;
	vertical-align: middle;
	padding: 1em 0;
	text-align: center;
	width: calc(100% - 140px);
}


/* 中部発アイコン付ボタン */
#contents_area #area_contents .iconBtnNGO {
	width: 669px;
	margin: 20px auto 0;
}
#contents_area #area_contents .iconBtnNGO a {
	background: #000;
	position: relative;
	display: block;
	padding: 0 140px 0 7px;
	color: #FFF;
	vertical-align: middle;
	text-decoration: none;
	border-radius: 5px;
	font-size: 20px;
	font-weight: bold;
	box-shadow:0px 0px 4px 0px rgba(0,0,0,0.4);
}
#contents_area #area_contents .iconBtnNGO a::after {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
	right: 28px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #FFF;
	border-left: 2px solid #FFF;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
#contents_area #area_contents .iconBtnNGO a:hover {
	background: #2A2A2A;
}

#contents_area #area_contents .iconBtnNGO a .pic {
	display: inline-block;
	vertical-align: middle;
	width: 137px;
	position: relative;
}
#contents_area #area_contents .iconBtnNGO a .pic img {
	display: block;
}
#contents_area #area_contents .iconBtnNGO a .pic img:nth-child(2){
	margin-top: 3px;
}
#contents_area #area_contents .iconBtnNGO a .pic img:nth-child(3){
	position: absolute;
	top: 0;
	right: 0;
}
#contents_area #area_contents .iconBtnNGO a .pic img:nth-child(4){
	position: absolute;
	bottom: 0;
	right: 0;
}

#contents_area #area_contents .iconBtnNGO a .plan {
	display: inline-block;
	vertical-align: middle;
	padding: 1em 0;
	text-align: center;
	width: calc(100% - 140px);
}


/* ダイナミックJTB */
#contents_area .dynamicJTB {
	border: 1px solid #000;
	border-radius: 5px;
	padding: 24px 33px;
	width: 734px;
	margin: 54px auto 0;
}
#contents_area .dynamicJTB dl {
	margin-top: 22px;
}
#contents_area .dynamicJTB dt {
	float: left;
}
#contents_area .dynamicJTB dd {
	width: 566px;
	float: right;
	font-size: 17px;
}
#contents_area .dynamicJTB dd a {
	text-decoration: underline;
	color: #444;
}
#contents_area .dynamicJTB dd li {
	padding-right: 13px;
	margin-right: 10px;
	border-right: 1px solid #444;
	display: inline-block;
	margin-bottom: 8px;
}
#contents_area .dynamicJTB dd li:last-child {
	border-right: none;
}

/*---------------------------
北海道　年間イベント一覧
-----------------------------*/
#contents_area #event_list {
	margin-top: 102px;
}
#contents_area #event_list .caution {
	text-align: right;
	margin-top: 15px;
}
#contents_area #event_list table {
	border-collapse: collapse;
	margin-top: 10px;
}

#contents_area #event_list th {
	border: 1px solid #FFBB2D;
	background: #FFFFEB;
	font-size: 17px;
}
#contents_area #event_list thead th {
	text-align: center;
}
#contents_area #event_list tbody th {
	padding-left: 21px;
}

/*イベント名/月*/
#contents_area #event_list th.linear {
	text-align: left;
	width: 241px;
	height: 45px;
	vertical-align: bottom;
	background-image: linear-gradient(to top right, transparent 49%, #FFBB2D 49%, #FFBB2D 50%, transparent 50%, transparent); /* 右下がりの斜線 */
}
#contents_area #event_list th.linear span {
	display: inline-block;
	width: 102px;
	padding: 9px;
}
#contents_area #event_list th.linear span.all {
	vertical-align: bottom;
}
#contents_area #event_list th.linear span.alr {
	text-align: right;
	vertical-align: top;
	height: 27px;
}

/*イベント名 link*/
#contents_area #event_list th a,
#contents_area #event_list th span.soon{
	position: relative;
	display: inline-block;
	padding: 0 26px 0 0;
	color: #000;
	vertical-align: middle;
}
#contents_area #event_list th a {
	text-decoration: underline;
}

#contents_area #event_list th a::before,
#contents_area #event_list th a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
#contents_area #event_list th a::before {
	right: 2px;
	width: 12px;
	height: 1px;
	background: #000000;
}
#contents_area #event_list th a::after {
	right: 4px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #000000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#contents_area #event_list td {
	height: 46px;
	vertical-align: middle;
	width: 100px;
	border: 1px solid #FFBB2D;
	font-size: 14px;
}
#contents_area #event_list td img {
	vertical-align: middle;
}
/*#contents_area #event_list td span {
	text-align: center;
	display: inline-block;
}*/

#contents_area #event_list td.alc {
	text-align: center;
}

#contents_area #event_list td.on {
	background: #FFBB2D;
}

#contents_area #event_list td.L10_65 {
	background: url(../images/pc/cel_o.gif) no-repeat 65px 0;
	-webkit-background-size: 10px 100%;
	background-size: 10px 100%;
}
#contents_area #event_list td.C30 {
	background: url(../images/pc/cel_o.gif) no-repeat center top;
}
#contents_area #event_list td.R30 {
	background: url(../images/pc/cel_o.gif) no-repeat right top;
}
#contents_area #event_list td.L30 {
	background: url(../images/pc/cel_o.gif) no-repeat left top;
}
#contents_area #event_list td.L30_10 {
	background: url(../images/pc/cel_o.gif) no-repeat 10px 0;
}
#contents_area #event_list td.L50_10 {
	background: url(../images/pc/cel_o.gif) no-repeat 10px 0;
	-webkit-background-size: 50px 100%;
	background-size: 50px 100%;
}
#contents_area #event_list td.L60 {
	background: url(../images/pc/cel_o.gif) no-repeat left top;
	-webkit-background-size: 60px 100%;
	background-size: 60px 100%;
}
#contents_area #event_list td.C60 {
	background: url(../images/pc/cel_o.gif) no-repeat center top;
	-webkit-background-size: 60px 100%;
	background-size: 60px 100%;
}
#contents_area #event_list td.R60 {
	background: url(../images/pc/cel_o.gif) no-repeat right top;
	-webkit-background-size: 60px 100%;
	background-size: 60px 100%;
}
#contents_area #event_list td.C130 {
	background: url(../images/pc/cel_o.gif) no-repeat center top;
	-webkit-background-size: 130px 100%;
	background-size: 130px 100%;
}