@charset "Shift_JIS";
@import url(/common/css/jtb_site_970.css);
@import url(ic.css);
/*-------------------------------------
  common
-------------------------------------*/
#cpnArea {
	font-family: "メイリオ", Meiryo, sans-serif;
	line-height: 1.6;
	margin: 0 auto;
	padding-bottom: 10px;
	width: 950px;
}
#cpnArea * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#contentWrap {
	background-color: #fff;
	text-align: center;
}
#contentWrap .inner {
	padding: 30px 20px;
	background-color: #fff;
	overflow: hidden;
}
#contentWrap .primary, #contentWrap .secondary {
	margin: 0 auto;
	padding-bottom: 25px;
	width: 920px;
}
#contentWrap .primary h2 {
	background: url(../images/h2-ornament.png) no-repeat 50% 0 / 397px 76px;
	color: #000;
	font-size: 38px;
	letter-spacing: 0.1em;
	margin-bottom: 24px;
	padding: 96px 0 8px;
	position: relative;
}
#contentWrap .primary h2::after {
	background-color: #fff;
	background-image: -webkit-linear-gradient(-45deg, #afdef1 25%, transparent 25%, transparent 50%, #afdef1 50%, #afdef1 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, #afdef1 25%, transparent 25%, transparent 50%, #afdef1 50%, #afdef1 75%, transparent 75%, transparent);
	background-size: 12px 12px;
	bottom: 0;
	content: "";
	display: block;
	height: 6px;
	left: 50%;
	margin-left: -360px;
	position: absolute;
	width: 720px;
}
#contentWrap .primary .copy {
	font-size: 16px;
	padding-bottom: 25px;
}
#contentWrap .primary li a {
	background-color: #fffff2;
	color: #000;
	border: 4px solid #faf900;
	display: block;
	font-size: 14px;
	line-height: 38px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	z-index: 2;
}
#contentWrap .primary li a::after {
	background-color: #faf900;
	content: '\e801';
	display: block;
	float: right;
	font-family: 'ic';
	line-height: 38px;
	width: 38px;
}
#contentWrap #plan-stay.primary li a { width: 306px }
#contentWrap .primary.multi-btn li { width: 50% }
#contentWrap .primary.multi-btn li:first-child { padding-right: 7px }
#contentWrap .primary.multi-btn li:last-child { padding-left: 7px }
#contentWrap .primary.multi-btn li a, #contentWrap #plan-season.primary li, #contentWrap #plan-season.primary li a { width: 100%; }
#contentWrap .primary li a,
#contentWrap .primary li a::after,
#contentWrap .primary li a::before { -webkit-transition: all .5s; transition: all .5s; }
#contentWrap .primary li a::before { content: ""; display: block; left: -100%; height: 100%; position: absolute; top: 0; width: 100%; z-index: -1;}
#contentWrap .primary li a:hover::before { left: 0; background-color: #faf900; }
#contentWrap .primary li a:hover::after { background-color: #fffff2 }

#contentWrap .plan-wrap:after {
	clear: both;
	content: "";
	display: table;
}
#contentWrap .plan-box {
	clear: both;
	height: 325px;
	padding: 25px 0;
	position: relative;
	width: 436px;
}
#contentWrap .plan-box:nth-child(odd) { float: right }
#contentWrap .plan-box:nth-child(even) { float: left }
#contentWrap .plan-box h3 {
	border-bottom: 1px dashed #000;
	border-top: 2px solid #000;
	font-size: 22px;
	line-height: 52px;
	margin-bottom: 25px;
}
#contentWrap .plan-box p {
	font-size: 15px;
	padding-bottom: 36px;
	text-align: left;
}
#contentWrap .plan-box .photo {
	position: absolute;
	top: 25px;
}
#contentWrap .plan-box:nth-child(odd) .photo { left: -485px }
#contentWrap .plan-box:nth-child(even) .photo { right: -470px }
#contentWrap .plan-box .photo img {
	position: relative;
	z-index: 1;
}
#contentWrap .plan-box .photo::after {
	background-color: #fff;
	background-image: -webkit-linear-gradient(-45deg, #afdef1 25%, transparent 25%, transparent 50%, #afdef1 50%, #afdef1 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, #afdef1 25%, transparent 25%, transparent 50%, #afdef1 50%, #afdef1 75%, transparent 75%, transparent);
	background-size: 12px 12px;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	right: -15px;
	top: 15px;
	width: 100%;
}
#contentWrap .secondary .title-bar {
	background-color: #fff;
	background-image: -webkit-linear-gradient(-45deg, #afdef1 25%, transparent 25%, transparent 50%, #afdef1 50%, #afdef1 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, #afdef1 25%, transparent 25%, transparent 50%, #afdef1 50%, #afdef1 75%, transparent 75%, transparent);
	background-size: 12px 12px;
	padding: 3px 0;
}
#contentWrap .secondary .title-bar h2 {
	background-color: #fff;
	font-size: 32px;
	line-height: 72px;
}
#contentWrap .secondary .title-bar h2 span { position: relative }
#contentWrap .secondary .title-bar h2 span::before {
	background: url(../images/ic-heart.png) no-repeat 0 50% / 31px 30px;
	content: "";
	display: block;
	height: 30px;
	position: absolute;
	left: -52px;
	top: 6px;
	width: 31px;
}
#contentWrap .secondary .title-bar h2 span::after {
	background: url(../images/ic-bird.png) no-repeat 0 50% / 54px 32px;
	content: "";
	display: block;
	height: 32px;
	position: absolute;
	right: -80px;
	top: 6px;
	width: 54px;
}

#contentWrap .catch span { color: #333; display: block; font-size: 14px; padding-top: 10px; }
#contentWrap .kokunai_tour { background-color: #3cab17 }
#contentWrap .kokunai_htl { background-color: #227805 }
#contentWrap .kaigai_tour { background-color: #178ee3 }
#contentWrap .kaigai_air { background-color: #1752bf }
#contentWrap .kaigai_htl { background-color: #220a98 }
#contentWrap .kaigai_opt { background-color: #00cbdd }
#contentWrap .kaigai_pkg { background-color: #6083ec }
#contentWrap .kaigai_crs { background-color: #00b6f7 }
#contentWrap .royalroad { background-color: #e1c800 }
#contentWrap .wedding { background-color: #ff94b2 }
#contentWrap .restaurant { background-color: #ff5000 }
#contentWrap .other { background-color: #ae6211 }
#pageTop { bottom: 112px; display: none; left: 50%; margin-left: 500px; position: fixed; z-index: 99; }
#pageTop a { background-color: rgba(175,222,241,0.8); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; display: block; }
#pageTop img { width: 60px }
#anchor ul, .primary ul, .colWrap { letter-spacing: -0.4em }
#anchor li, .primary li, .colWrap .col { display: inline-block; letter-spacing: normal; }
a:hover img {
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}


/*-------------------------------------
  seasonNav
-------------------------------------*/
#headNav { overflow: hidden }
#headNav li {
	float: left;
	padding: 0 2px;
	text-align: center;
	width: 16%;
}
#headNav li a {
	background-color: #ebebeb;
	border: 1px solid #ccc;
	-moz-border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	color: #333;
	display: block;
	padding: 8px 0;
	text-decoration: none;
	border-bottom: none;
}
#headNav li a br { display: none }
#headNav li a:hover { background-color: #f2f2f2 }
#headNav li a.active {
	background-color: #da0a1b;
	border: 1px solid #da0a1b;
	color: #fff;
	border-bottom: none;
}
#headNav li a.active:hover { background-color: #da0a1b }
#footNav { display: none }

/*-------------------------------------
  mainVis
-------------------------------------*/
#mainVis {
	background-color: #fff;
	background-image: -webkit-linear-gradient(-45deg, #afdef1 25%, transparent 25%, transparent 50%, #afdef1 50%, #afdef1 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, #afdef1 25%, transparent 25%, transparent 50%, #afdef1 50%, #afdef1 75%, transparent 75%, transparent);
	background-size: 12px 12px;
	padding-top: 20px;
}
#mainVis img { display: block }
#anchor { padding-bottom: 50px }
#anchor ul {  }
#anchor li { padding-right: 18px; }
#anchor li:last-child { padding-right: 0 }
#anchor li a {
	color: #1a1a1a;
	border-bottom: 3px solid #afdef1;
	display: block;
	font-size: 20px;
	padding: 20px 0 26px;
	position: relative;
	text-decoration: none;
	-webkit-transition: all .3s;
	transition: all .3s;
	width: 224px;
}
#anchor li a::after {
	background-color: #faf900;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	bottom: -14px;
	color: #040404;
	content: '\e800';
	display: inline-block;
	font-family: 'ic';
	font-size: 14px;
	height: 28px;
	left: 50%;
	line-height: 30px;
	margin-left: -14px;
	position: absolute;
	text-decoration: none;
	width: 28px;
}
#anchor li a:hover { background-color: #ecfaff; -webkit-transform: translate(0,8px); -moz-transform: translate(0,8px); }

#plan-season .colWrap { overflow: hidden; padding-bottom: 35px; }
#plan-season .col { float: left; margin-right: 25px; position: relative; width: 290px; }
#plan-season .col:last-child { margin-right: 0 }
#plan-season .col .category { color: #fff; font-size: 20px; height: 38px; left: 0; line-height: 38px; position: absolute; text-align: center; top: 10px; width: 180px; }
#plan-season .col .category::after { border-style: solid; border-width: 19px 10px; content: " "; height: 0; left: 100%; position: absolute; top: 0px; width: 0; z-index: 2; }
#plan-season .col#spring .category { background-color: #ff7d99 }
#plan-season .col#spring .category::after { border-color: #ff7d99; border-right-color: transparent; }
#plan-season .col#gw .category { font-size: 18px }
#plan-season .col#gw .category { background-color: #aac900 }
#plan-season .col#gw .category::after { border-color: #aac900; border-right-color: transparent; }
#plan-season .col#summer .category { background-color: #0597f4 }
#plan-season .col#summer .category::after { border-color: #0597f4; border-right-color: transparent; }
#plan-season .col#sep .category { background-color: #ffae00 }
#plan-season .col#sep .category::after { border-color: #ffae00; border-right-color: transparent; }
#plan-season .col#autumn .category { background-color: #e65006 }
#plan-season .col#autumn .category::after { border-color: #e65006; border-right-color: transparent; }
#plan-season .col#winter .category { background-color: #00a7d1 }
#plan-season .col#winter .category::after { border-color: #00a7d1; border-right-color: transparent; }
#plan-season .col img { margin-bottom: 20px; width: 100%; }

/*-------------------------------------
  campaign
-------------------------------------*/
#campaign dl {
	border-top: 1px solid #ccc;
	overflow: hidden;
	padding: 5px 0;
}
#campaign dt {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: #fff;
	display: block;
	float: left;
	padding: 6px 0;
	width: 10em;
}
#campaign dd {
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
	min-height: 40px;
	padding: 6px 0 6px 11em;
	text-align: left;
}
#campaign dd a { display: block }
#campaign .catch {
	font-size: 22px;
	margin-bottom: 1em;
}
#campaign .more {
	padding-top: 20px;
	text-align: right;
}
#campaign .more a {
	color: #36b4df;
	font-size: 14px;
}
#campaign .more a:hover { color: #ff984d; }
#campaign .soon {
	color: #ff0000;
	font-family: 'Lato', sans-serif;
	font-size: 28px;
	font-weight: bold;
}

/*-------------------------------------
  check
-------------------------------------*/
#check .inner { background-color: #fff }
#check .sliderBox { overflow-x: hidden; width: 880px; }
#check .sliderAll { width: 660px; margin: 0 auto; height: 324px; position: relative; }
#check .sliderWrap { width: 1980px; position: absolute; left: 50%; margin-left: -990px; }
#check .bnrSlider-main { width: 100% }
#check .bnrSlider-main li { width: 660px }
#check .bnrSlider-main li img { margin: 0 10px; width: 640px; vertical-align: bottom; }
#bnrSlider .bx-wrapper { margin-bottom: 15px }
#bnrSlider .controlWrap {
	display: block;
	margin: 0 auto;
	position: relative;
	width: 640px;
}
#bnrSlider .controlWrap p#icPrev a, #bnrSlider .controlWrap p#icNext a { background-color: #fffb00; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; height: 30px; margin-top: -15px; position: absolute; top: 50%; width: 30px; }
#bnrSlider .controlWrap p#icPrev a { left: -15px }
#bnrSlider .controlWrap p#icPrev a::before { border-left: 2px solid #ff6b00; border-bottom: 2px solid #ff6b00; content: ""; height: 7px; margin-top: -4px; left: 11px; position: absolute; transform: rotate(45deg); -webkit-transform: rotate(45deg); top: 50%; width: 7px; }
#bnrSlider .controlWrap p#icNext a { right: -15px }
#bnrSlider .controlWrap p#icNext a::before { border-right: 2px solid #ff6b00; border-top: 2px solid #ff6b00; content: ""; height: 7px; margin-top: -4px; right: 11px; position: absolute; transform: rotate(45deg); -webkit-transform: rotate(45deg); top: 50%; width: 7px; }
#bnrSlider .sp-slides-container { margin-bottom: 10px; }

/*-------------------------------------
  sns
-------------------------------------*/
#sns ul { letter-spacing: -0.4em; margin-bottom: 10px; text-align: right; }
#sns li { display: inline-block; letter-spacing: normal; padding-left: 4px; vertical-align: bottom; }

/*-------------------------------------
  フッター
-------------------------------------*/
.l-destination { background-color: #fff; font-family: "メイリオ", Meiryo, sans-serif; }
.l-destination__block { margin-top: 3em; text-align: left; }
.l-destination__block .c-heading { font-weight: 700; }
.l-destination .c-list { display: flex; flex-wrap: wrap; }
.l-destination .c-list li { font-size: .9375em; }
.l-destination .c-title { font-weight: 700; }

.l-destination { margin-top: 5em; padding: 5em 0; }
.l-destination__block .c-bottom + .c-heading { border-top: 1px solid #d9d9d9; margin-top: 1.5em; padding-top: 1.5em }
.l-destination__block .c-heading { font-size: 1.3125em; }
.l-destination .c-list { margin-top: .5em; }
.l-destination .c-list li { line-height: 1; margin: 0 .75em .75em 0; padding: 1px 0; }
.l-destination .c-list li::after { color: #ccc; content: "/"; padding-left: .75em; }
.l-destination .c-list li:last-child::after { content: none; }
.l-destination .c-title { font-size: 2em; }
.l-destination li a { color: #333; }
li.c-item a { text-decoration: none; }
li.c-item a:hover { color: #000099; }
