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

/* ===============================================
 all（基本事項）　
=============================================== */

html {
	font-size: 62.5%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.wrap {
     overflow: hidden;
 }
.cntsWrap {
	margin: 0;
	padding: 0;
	font-size: 1.1em;
	color: #333;
	line-height: 1.5em;
}
.cntsWrap img {
	width: 100%;
	zoom: 1;
	vertical-align: bottom;
}
.cntsWrap .contentsBox {
	padding: 0 3.1%;
}

#header img{
	width:initial;
}
#footer img{
	width:initial;
}

/* ===============================================
 pankuzu
=============================================== */

#pankuzu {
	width:100%;
	color: #333;
	text-align:left;
	padding:0 10px;
	margin:5px auto 5px;
	font-size: .9rem;
	}

#pankuzu ul {

	margin:0;
	padding:0;
	vertical-align: bottom;
}

#pankuzu li {
	display:inline;
	padding-right: 3px;
	}


#pankuzu a, #pankuzu a:visited	{
color: #333;
text-decoration: none;
}

#pankuzu a:hover	{
text-decoration: underline;
}

/* ===============================================
 breadcrumbArea　
=============================================== */

#breadcrumbArea {
	/* font-size: 1.2rem; */
}
#breadcrumbArea a {
	text-decoration: underline;
	display: inline-block;
	line-height: 2.5em;
}
#breadcrumbArea .breadcrumbList {
	padding: .3em 5px;
	background-color: #FFF;
	white-space: nowrap;
	overflow: auto;
}
#breadcrumbArea .breadcrumbList > li {
	display: inline-block;
}
#breadcrumbArea .breadcrumbList > li+li:before {
	content: "＞";
	margin: 0 .3em;
}



/* ===============================================
 headerArea（ヘッダー部分全体）　
=============================================== */

#headerArea {
}
#headerArea .titleArea.main {
	margin: 2px 0 0;
}

/* leadArea（ページ案内文）------------------*/
#headerArea .leadArea {
	margin: 2.2% 3.1% 3.9%;
	color: inherit;
	font-weight: normal;
}
#headerArea .leadArea span {
	margin: 0 0 .3em 0;
	font-size: 1.4rem;
	color: #C9000F;
	font-weight: bold;
	text-align: center;
	display: block;
}


/* ===============================================
 gNav（ナビ部分）　
=============================================== */

#gNav {
	margin: 0 3.1% 4.7%;
	text-align: center;
}
#gNav .tabMenu {
	letter-spacing: -.40em;
	padding-left:0;
}
#gNav .tabMenu li {
	width: 25%;
	letter-spacing: normal;
	text-align: center;
	display: inline-block;
}
#gNav .tabMenu li img {
	width: 95%;
}


/* ===============================================
 mainArea（メインコンテンツ部分）　
=============================================== */

#mainArea {
	margin: 0 0 10%;
}
#mainArea section {
	margin: 0 0 10%;
}
#mainArea .pickupArea {
	margin: 5% 3.1%;
}

/*----- メインビジュアル -----*/
#mainImg{
	width: 100%;
	height: 200px;
	position: relative;
	padding: 10px 0;
	background-image:url(/cruise/chugoku/sp/img/index_mv01.jpg);
	background-position:center;
}
#mainImg img{
	max-height: 200px;
	width: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%)
}



/* ===============================================
 titleArea（タイトル部分）
=============================================== */

.titleArea {
	margin: 3% 0;
}
.titleArea .titleText {
	font-size: 1.7rem;
	font-weight: bold;
	color: #FFF;
	display: block;
}

/* titleArea.headlines（大見出し/アイコン+テキスト）------------------*/
.titleArea.headlines {
	padding-left: 42px;
	background-color: #004098;
	background-image: url("/cmn/img/kanto/icon/earth.png");
	background-repeat: no-repeat;
	background-position: 5px 50%;
	background-size: 30px;
}
.titleArea.headlines .titleText {
	padding: 1em 0 .9em;
	line-height: 1.2em;
}

/* headlines.●（大見出し/アイコン設定）------------------*/
.titleArea.headlines.searchIcon {
	background-image: url("/cmn/img/kanto/icon/search.png");
}
.titleArea.headlines.featureIcon {
	background-image: url("/cmn/img/kanto/icon/feature.png");
}

/* heading（中見出し/テキストのみ）------------------*/
.titleArea.heading {
	background-color: #004098;
}
.titleArea.heading .titleText {
	padding: 1em 0 .9em 1em;
	line-height: 1.2em;
}

/* subheading（小見出し/テキストのみ）------------------*/
.titleArea.subheading {
	border-left: solid 10px #0080CB;
}
.titleArea.subheading .titleText {
	padding: .5em 0 .5em .5em;
	font-size: 1.5rem;
	color: inherit;
}

/* multiline（テキスト2行）------------------*/
.titleArea.multiline {
}
.titleArea.multiline .titleText {
	padding-top: .5em;
	padding-bottom: .3em;
}
.titleArea.multiline .titleText span {
	font-size: 1.1rem;
	display: block;
}



/* ===============================================
 linkArea（リンク部分）　
=============================================== */

.linkArea {
	width: 100%;
	margin: 3% 0 0;
	font-weight: bold;
}
.linkText a {
	font-size: 1.5rem;
	color: #FFF;
	display: block;
}

/* btn（ボタン型/テキスト1行）------------------*/
.linkArea.btn {
	width: auto;
	margin: 6% 10%;
	padding: 0.5% 0;
	text-align: center;
	background-color: #FF9F00;
	background-image: url("");
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 20px 12px;
	border-radius: 10px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.4);
}
.linkArea.btn a {
	padding: 12px 20px 12px 0;
}

/* list（リスト型）------------------*/
.linkListArea {
}
.linkArea.list {
	margin: -1px 0 0;
	padding: 0.5% 0;
	background-image: url("/cruise/chugoku/sp/img/arrow_right_gray001.png");
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 20px 12px;
	border-top: 0;
	border-bottom: 1px solid #CCC;
}
.linkArea.list a {
	padding: 12px 0 12px 10px;
	font-size: 1.3rem;
	color: inherit;
}

/* list.top（リスト型/TOPに戻る）------------------*/
.linkArea.list.top {
	margin: 20px 0 0;
	padding: 0.5% 0;
	background-color: #004098;
	background-image: url("");
}
.linkArea.list.top a {
	padding: 12px 0 12px 10px;
	color: #FFF;
}

/* multiline（テキスト2行）------------------*/
.linkArea.multiline {
	padding: 0;
}
.linkArea.multiline a {
	font-size: 1.3rem;
	line-height: 1em;
}
.linkArea.btn.multiline a {
	padding: 9px 0 8px;
}
.linkArea.list.multiline a {
	padding: 8px 0 7px 10px;
}

/* anchor（アンカー用）------------------*/
.linkArea.anchor {
	background-image: url("/cruise/chugoku/sp/img/arrow_down_white001.png");
	background-position: 95% 50%;
	background-size: 13px 9px;
}
/* newWindow（別窓表示）------------------*/
.linkArea.newWindow {
	background-image: url("/cruise/chugoku/sp/img/box_gray001.png");
	background-position: 97% 50%;
	background-size: 15px 13px;
}
.linkArea.btn.newWindow {
	background-image: url("/cruise/chugoku/sp/img/box_white001.png");
	background-position: 95% 50%;
}



/* ===============================================
 tour-preview（API表示部分）　
=============================================== */

#container .tour-api a {
	color: inherit;
}
#container .tour-preview {
}
#container .tour-preview .tour-label {
	display: none;
}
#container .tour-img {
	width: 34%;
	margin: 0 0 0 -1%;
}
#container .tour-img .tour-img-container {
	width: 100%;
	height: 100%;
}
#container .tour-desc {
	width: 64%;
	margin: 0 0 0 2%;
}
#container .tour-desc .tour-desc-text01 {
	font-size: 10px;
	font-size: 1.0rem;
	color: inherit;
}
#container .tour-desc .tour-desc-text02 {
	font-size: 1.3rem;
	color: inherit;
}
#container .tour-desc .tour-desc-text03 {
	font-size: 1.8rem;
}
#container .tour-api .tour-desc-date {
	font-size: 10px;
	font-size: 1.0rem;
}
#container .tour-api .tour-fuel {
	font-size: 1.2rem;
}

/* tmbBig（API_サムネイル表示大）------------------*/
#container .tmbBig .tour-preview {
	padding: 0 3.1% 5px;
}
#container .tmbBig .tour-preview .on-label-text {
	display: none;
}
#container .tmbBig .tour-preview .tour-img {
	width: 100%;
	height: inherit;
	margin: 5px 0;
	float: none;
}
#container .tmbBig .tour-preview .tour-img .tour-img-container {
	width: inherit;
	height: 150px;
	margin: 0;
}
#container .tmbBig .tour-preview .tour-desc {
	width: inherit;
	margin: 0;
	float: none;
}
#container .tmbBig .tour-preview .tour-label li {
	margin: 0;
}



/* ===============================================
 columnArea（カラムデザイン部分）　
=============================================== */

.columnArea {
}
.columnArea .phArea {
	margin-bottom: 2%;
}
.columnArea .descArea {
}

/* col1（1カラム）------------------*/
.columnArea.col1 {
}

/* col２（２カラム）------------------*/
.columnArea.col2 {
	clear: both;
	overflow: hidden;
}
.columnArea.col2 .phArea {
	width: 40%;
	margin-right: 2%;
	float: left;
}
.columnArea.col2.imgRight .phArea {
	margin-right: 0;
	margin-left: 2%;
	float: right;
}
/* col２.nowrap（２カラム/テキストの回り込みなし）------------------*/
.columnArea.col2.nowrap {
}
.columnArea.col2.nowrap .descArea {
	width: 58%;
	float: right;
}
.columnArea.col2.nowrap.imgRight .descArea {
	float: left;
}
/* col２.nowrap（２カラム/カセット並び）------------------*/
.columnArea.col2.set {
}
.columnArea.col2.set > li {
	width: 49%;
	float: left;
}
.columnArea.col2.set > li {
	margin-top: 5%;
}
.columnArea.col2.set > li:nth-child(1),
.columnArea.col2.set > li:nth-child(2) {
	margin-top: 0;
}
.columnArea.col2.set > li:nth-child(even) {
	margin-left: 2%;
}
.columnArea.col2.set .phArea {
	width: 100%;
	margin-right: 0;
	float: none;
}
.columnArea.col2.set .descArea {
	width: 100%;
	float: none;
}



/* ===============================================
 listArea（リストデザイン部分）　
=============================================== */

.listArea {
}
.listArea > li {
	clear: both;
	overflow: hidden;
}
.listArea li:before {
	float: left;
}
.listArea > li > span {
	margin-left: 1em;
	display: block;
}

/* wrap（カラム枠）------------------*/
.listArea.wrap {
}
.listArea.wrap > li {
}
.listArea.wrap > li+li {
	margin-top: 5%;
}
/* border（区切り線あり）------------------*/
.listArea.border {
}
.listArea.border > li {
}
.listArea.border > li+li {
	margin-top: 5%;
	padding-top: 5%;
	border-top: 1px solid #CECECE;
}
/* atten（注意事項）------------------*/
.listArea.attn {
	margin: 3% 0;
	font-size: 1.1rem;
	color: #666;
}
.listArea.attn li {
}
.listArea.attn > li+li {
}
.listArea.attn li:before {
	content:"※";
}

/* circle（項目）------------------*/
.listArea.circle {
	margin: 3% 0;
}
.listArea.circle li {
}
.listArea.circle > li+li {
}
.listArea.circle li:before {
	content:"●";
}



/* ===============================================
 endArea　
=============================================== */

#endArea {
	padding: 2% 3.1% 0;
}
#endArea .titleArea {
	margin: 0;
	padding-bottom: .4em;
	font-size: 1.5rem;
	color: #EB5176;
	font-weight: bold;
	text-align: center;
}
#endArea .endText {
	font-size: 1.2rem;
}



/* ===============================================
 footerArea（フッター部分全体）　
=============================================== */

#footerArea {
	margin: 8.7% 0 0;
}



/* ===============================================
 searchArea（検索部分）
=============================================== */

#searchArea {
}

/* tour_search_module（検索BOX部分）------------------*/
#searchArea #tour_search_module a {
	color: inherit;
	display: block;
}
#searchArea #tour_search_module #ticket-search {
	position: inherit;
	overflow: inherit;
}
#searchArea #tour_search_module #tbm01-com {
	position: inherit;
	overflow: inherit;
}
#searchArea #tour_search_module .tour-text {
	margin: 0;
}
#searchArea #tour_search_module ul.start-p {
	margin: 0 3.1%;
	clear: both;
	overflow: hidden;
}
#searchArea #tour_search_module ul.start-p > li {
	width: 48%;
	margin-bottom: .6em;
	float: left;
}
#searchArea #tour_search_module ul.start-p > li:nth-child(even) {
	margin-left: 4%;
}
#searchArea #tour_search_module .selectBox {
	padding: .8em 0;
	font: inherit;
	font-size: 1.3rem;
	color: inherit;
	font-weight: bold;
	text-indent: .5em;
	border: 1px solid #979797;
	display: block;
}
#searchArea #tour_search_module .end-place select.dstselect {
	width: 100%;
	background-color: #FFF;
	border-radius: inherit;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
#searchArea #tour_search_module .squeeze-area .btn-area {
	margin: 4% 3.1% 6%;
}
#searchArea #tour_search_module .squeeze-area .btn-area .orange-btn04 {
	width: 100%;
	padding: .5em 0;
	border: 0;
	font-size: 1.6rem;
	font-weight: bold;
	white-space: nowrap;
	color: #FFF;
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(253, 112, 0)), color-stop(100%, rgba(245, 164, 74, 0.85)));
	border-radius: 8px;
}

/* otherLinkArea（その他リンク部分）------------------*/
#searchArea .otherLinkArea {
	margin: 15px 3.1% 35px;
	padding: 15px 0 0;
	border-top: 1px dotted #FF9F00;
}



/* ===============================================
 featureArea（おすすめの特集）
=============================================== */

#featureArea {
}
#featureArea a {
	color: inherit;
}

/* featureList（リスト部分）------------------*/
#featureArea .featureList li {
	padding: 0 25px 0 0;
	background-image: url("/cruise/chugoku/sp/img/arrow_right_gray001.png");
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 20px 12px;
	border-bottom: 1px solid #CECECE;
}
#featureArea .featureList .featureBox {
	width: 100%;
	margin: 6px 0;
	display: table;
}
#featureArea .featureList .featureBox .phArea {
	width: 80px;
	padding: 0 5px;
	display: table-cell;
	vertical-align: top;
}
#featureArea .featureList .featureBox .detailArea {
	display: table-cell;
	vertical-align: top;
}
#featureArea .featureList .featureBox .detailArea .titleText {
	color: #C9000F;
	font-weight: bold;
}



/* ===============================================
 media screen（メディアクエリ全体）　
=============================================== */

@media screen and (max-width: 320px) {
  html {
	  font-size: 56%;
  }
}
@media screen and (min-width: 400px) {
  html {
	  font-size: 80%;
  }
}
@media screen and (min-width: 500px) and (max-width: 600px) {
  html {
	  font-size: 90%;
  }
}
@media screen and (min-width: 600px) {
  html {
	  font-size: 100%;
  }
}



/* topBtn */
.go-to-top {
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:105;
	transform:translateZ(0);
}

.go-to-top a img {
	width: 65px;
	height: auto;
	zoom: 0;
}