@charset "utf-8";
/*////////////// tabibitonavi_hotsprings/BasicCSS Document //////////////*/

/* ===============================================
 all（全体）　
=============================================== */
#mainArea {
    margin: 0;
}
#footerArea {
    margin: 0;
}
#headerArea .titleArea.main {
    margin: 0;
}
/* .colorBg（背景カラー）------------------*/
.colorBg {
    background-color: #08361A;
}
/* .lNav（ローカルナビ）------------------*/
#headerArea .lNav {
    position: absolute;
    bottom: 0.8em;
    width: 100%;
}
.lNav .tabMenu {
    clear: both;
    overflow: hidden;
    padding: 0 2%;
}
.lNav .tabMenu > li {
    float: left;
    width: 33%;
}
.lNav .tabMenu > li+li {
    margin-left: 0.5%;
}

/* ===============================================
 gNav（グローバルナビ部分）　
=============================================== */
#gNav {
	margin: 0;
	position: relative;
	top: 0;
	width: 100%;
	height: 45px;
	background-color: #FFF;
	z-index: 4;
	background-image: url("/cmn/img/kanto/tabi/tabibitonavi/header_menu_icon_001.png");
	background-position: 96% 50%;
	background-repeat: no-repeat;
	background-size: 37px;
}
#gNav .drawer-hamburger-logo {
	width: auto;
	height: 45px;
	text-align: center;
	position: absolute;
	top: 0;
	left: 25%;
	right: 25%;
}
#gNav .drawer-hamburger-logo img {
	width: auto !important;
	height: 100%;
}
#gNav .drawer-hamburger {
	width: 45px;
	height: 45px;
	padding: 0 10px;
	position: relative;
	top: 0;
}
#gNav .drawer-hamburger-icon {
	display: none;
}
#gNav .drawer-hamburger-icon,
#gNav .drawer-hamburger-icon:after,
#gNav .drawer-hamburger-icon:before {
	background-color: #FFF;
}
#gNav .drawer-hamburger-image img {
	width: 45px;
	height: 45px;
	position: absolute;
	top: 0;
	left: 0;
}
/* drawer-open（展開時）------------------*/
.drawer-open #gNav {
	position: inherit;
	z-index: 1;
	background: transparent;
}
.drawer-open #gNav .drawer-hamburger {
	position: fixed;
	top: 20px;
	z-index: 4;
}
.drawer-open #gNav .drawer-hamburger-icon {
	background-color: transparent;
	display: block;
}
.drawer-open #gNav .drawer-hamburger-image {
	display: none;
}
.drawer-nav .drawer-menu {
	padding-top: 40px;
    border-bottom: 1px dotted #000;
}
.drawer-nav .drawer-menu li {
    background-image: url("http://smp.his-j.com/cmn/img/kanto/icon/instruction/arrow_right_black001.png");
	background-position: 100% 50%;
	background-repeat: no-repeat;
	background-size: 20px 12px;
    border-top: 1px dotted #000;
}
.drawer-nav .drawer-menu .drawer-menu-item {
	font-size: 1.3rem;
}
.drawer-nav .item-title {
    padding: 2.5em 0 0.5em 0.5em;
    font-size: 1.6rem;
}
.drawer-nav .item-title+.drawer-menu {
    padding-top: 0;
}
/* gNavWrap（追従時）------------------*/
#gNavWrap.fixed #gNav {
	position: fixed;
	top: 0px;
	z-index: 2;
}
/* #breadcrumbArea（パンくず）------------------*/
#breadcrumbArea .breadcrumbList {
    border-bottom: solid 1px #000;
}

/* ===============================================
 headerArea（ヘッダーエリア）　
=============================================== */
/* .phTitleArea（MV画像）------------------*/
#headerArea .phTitleArea {
    position: relative;
}
/* .leadArea（リード分）------------------*/
#headerArea .leadArea {
    position: absolute;
    bottom: 0;
    top: 0;
    width: 100%;
    text-align: center;
    margin: 57% 0 0;
}
#headerArea .leadArea .leadText {
    color: #006634;
    font-weight: bold;
    letter-spacing: 1px;
}

#headerArea .leadArea .leadText .bigText {
    color: #006634;
    font-size: 1.5rem;
}

/* ===============================================
 tocArea（目次エリア）　
=============================================== */
.tocArea {
    padding: 5.5em 3.1% 0;
}
.tocArea .phTilte {
    padding-bottom: 2em;
}
/* .descText（テキスト）------------------*/
.tocArea .descText {
    margin: 0 3.1%;
}
.tocArea .descText span {
    display: block;
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 0.7rem;
    letter-spacing: 1px;
}
/* .tocBox（目次ボックス）------------------*/
.tocArea .tocBox {
    margin: 0 3.1%;
    padding: 1rem 3.1%;
    background-color: #FFF;
    color: #000;
    border: solid 2px #000;
}
.tocArea .tocBox .tocTitle {
    font-weight: bold;
    font-size: 120%;
    margin-bottom: 0.3rem;
    display: block;
    color: #005521;
}
.tocArea .tocBox ol li a {
    color: #000;
}
.tocArea .tocBox ol li+li {
    margin-top: 0.5rem;
}

/* ===============================================
 mainCntsArea（メインコンテンツエリア）　
=============================================== */
#mainArea #mainCntsArea {
    background-image: url("https://www.his-j.com/smp/kanto/special/tabi/images/tabibitonavi/hotsprings/bg_001.jpg");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 80px;
    margin: 0;
}
/* cntsList（コンテンツリスト部分）------------------*/
.cntsList > .cntsDesc {
    padding: 7em 0 3em;
}
.cntsList > .cntsDesc.bg01 {
    background-color: #FFF;
    position:  relative;
}
.cntsList > .cntsDesc.bg01:before {
    content: "";
    position:  absolute;
    height: 8em;
    width: 100%;
    background-image: url("https://www.his-j.com/smp/kanto/special/tabi/images/tabibitonavi/hotsprings/bg_001.jpg");
    background-position:  0 0;
    background-repeat: repeat;
    background-size: 80px;
    top: 0;
    left:  0;
}
.cntsList > .bg01+.cntsDesc {
    position:  relative;
}
.cntsList > .bg01+.cntsDesc:before {
    content: "";
    position:  absolute;
    width:  100%;
    height: 10em;
    top: 0;
    background-color: #FFF;
    z-index: 0;
}
.cntsList > .cntsDesc .phArea {
    margin-top: -2em;
    position:  relative;
}
.cntsList > .cntsDesc .textArea {
    padding: 2.5em 6.2% 0;
}
.cntsList > .cntsDesc .textArea .phNum {
    padding: 0 20% 1.8em;
}
.cntsList > .cntsDesc .textArea .titleDesc {
    margin: 0 -3.1%;
    padding-bottom: 2.2em;
}

/* ===============================================
 tourArea（オススメツアーエリア）　
=============================================== */
#mainArea #tourArea {
    margin: 0;
    padding: 5.5em 3.1% 1em;
    position: relative;
}
#mainArea #tourArea:before {
    content: "";
    position:  absolute;
    width:  100%;
    height: 4em;
    background-color: #FFF;
    top: -3px;
    left: 0;
}
.tourListArea {
    padding:  3.1%;
    background-color:  #FFF;
    margin-top: 2em;
}
/* tour-preview（APIデザイン部分）------------------*/
#container .tour-preview {
  padding: 0 0 10px;
  border-bottom: none;
}
#container .tour-preview .on-airport {
  display: none;
}
#container .tour-preview .tour-img {
  width: 100%;
  height: 150px;
  margin: 0;
  float: none;
}
#container .tour-preview .tour-img .tour-img-container {
  width: 100%;
  height: 100%;
}
#container .tour-preview .tour-desc {
  width: 100%;
  margin: 0;
  float: none;
}
#container .tour-preview .tour-desc .tour-desc-text02 {
  margin: 5px 0 0;
}
/* tourBox（ツアーボックス）------------------*/
.api_detail_spr_tour+.tourBox {
    border-top: dotted 1px #000;
    padding: 3% 0 4%;
}
.tourBox > .descText {
    clear: both;
    overflow: hidden;
}
.tourBox > .descText:before {
    content: "■";
    float: left;
}
.tourBox > .descText > p {
    display: block;
    margin-left: 1em;
    font-size: 90%;
}
.titleBox {
    display: block;
    font-weight: bold;
    line-height: 2rem;
    font-size: 1.3rem;
}
.descText+.descText {
    padding-top: 3%;
}
.tourBox .smallText {
    font-size: 90%;
    line-height: 0;
    color: #666;
}
/* htlLink（ホテルリンク）------------------*/
.descText .htlLink {
    display: block;
    text-align: right;
    position: relative;
    margin-top: 0.5rem;
}
.descText .htlLink a {
    color: #000;
    border-bottom: solid 1px #000;
    margin-right: 1rem;
}
.descText .htlLink:after {
    content: ">";
    top: 0;
    right: 0;
    position: absolute;
    font-size: 1.5rem;
}
/* linkArea（ボタン）------------------*/
#tourArea .linkArea.btn {
    margin: 6% 13.1%;
    background-color: #C29F43;
    box-shadow: 0 3px rgb(163,119,21);
}

/* ===============================================
 footerArea（フッターエリア）　
=============================================== */
/* lNav（ローカルナビ）------------------*/
#footerArea .lNav {
    padding-bottom: 1.5rem;
    background-image: url("https://www.his-j.com/smp/kanto/special/tabi/images/tabibitonavi/hotsprings/bg_001.jpg");
    background-position:  0 0;
    background-repeat:  repeat;
    background-size: 80px;
}
#footerArea .lNav .phText {
    padding: 2em 3.1% 1.5em;
}
#footerArea .lNav .titleDesc {
    background-image: none;
    padding: 3% 0;
}
#footerArea .lNav .titleDesc > span {
    font-size: 120%;
    color: #69390E;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 2rem;
}
#footerArea .lNav .titleDesc > span .smallText {
    font-size: 80%;
    border-bottom: none;
    margin: 0;
}
/* .titleArea.headlines（タイトルデザイン）------------------*/
.cntsWrap .titleArea.headlines {
    background-image: none;
    background-color: transparent;
    text-align: center;
    padding: 0;
    margin: 3% 3% 7%;
    border-bottom: solid 5px #000;
    position: relative;
}
.cntsWrap .titleArea.headlines .titleText {
    color: #000;
    padding: 1em 0 0.5em;
    font-size: 2rem;
}
.cntsWrap .titleArea.headlines::before, .cntsWrap .titleArea.headlines::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 46.5%;
    height: 0;
    width: 0;
    border: 15px solid transparent;
}
.cntsWrap .titleArea.headlines::before {
    border-top: 20px solid #000;
}
.cntsWrap .titleArea.headlines::after {
    margin-top: -7px;
    border-top: 20px solid #fff;
}
/* .otherLinkTitle（サブタイトルデザイン）------------------*/
#searchArea .otherLinkArea {
    border-top: none;
    padding: 0;
    text-align: center;
}
.otherLinkTitle {
    font-weight: bold;
    padding: 0 2.5% 1.5%;
    border-bottom: solid 3px #000;
    display: inline;
    font-size: 130%;
}
/* .linkArea.btn（フッターエリア/ボタンデザイン）------------------*/
#searchArea #tour_search_module .squeeze-area .btn-area .orange-btn04 {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(253, 171, 41)), color-stop(100%, rgba(253, 171, 41, 1)));
    box-shadow: 0 3px rgb(202,133,30);
}
.otherLinkArea .linkArea.btn {
    box-shadow: 0 3px rgb(202,133,30);
}

/* ===============================================
 featureArea（おすすめ特集エリア部分）　
=============================================== */
/* .featureList li（各特集枠）------------------*/
#featureArea .featureList li {
    border-bottom: none;
}
#featureArea .featureList li+li {
    border-top: dotted 1px #000;
}
#featureArea .featureList {
    padding: 0 3.1%;
}
#featureArea .featureList .featureBox .phArea {
    padding: 0 2% 0 0;
}
#featureArea .featureList .featureBox .detailArea .titleText {
    color: #000;
}
#featureArea .featureList li {
    background-image: url("/cmn/img/kanto/icon/instruction/arrow_right_black001.png");
}