@charset "utf-8";
/*////////////// guam/HowtoCSS Document //////////////*/

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

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



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

#mainArea {
	margin: 0 2% 10%;
}
#mainArea a {
	display: block;
}



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

.titleArea {
}
.titleArea .titleText {
}

/* titleArea.textClear（文字非表示用）------------------*/
.titleArea.textClear {
	margin: 0;
	height: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

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

/* titleArea.heading（中見出し/テキストのみ）------------------*/
.titleArea.heading {
	width: auto;
	padding: 4% 0 4% 2%;
	background-color: #BDAB9A;
}
.titleArea.heading .titleText {
	padding: 10px 0 7px;
	line-height: 1.2em;
}

/* titleArea.subheading（小見出し/テキストのみ）------------------*/
.titleArea.subheading {
	margin: 5px 0;
	padding: 5px 0 1px 5px;
	display: inline-block;
	border-left: none;
	border-bottom: 1px solid #FFD23B;
}
.titleArea.subheading .titleText {
	padding: 0;
	font-size: 1.4rem;
	color: #893316;
}
.titleArea.subheading .titleText span {
	margin: 0 3px -1px -5px;
	padding: 0 2px;
	font-size: 1.1rem;
	display: inline-block;
	border-bottom: 2px solid #FFD23B;
}

/* titleArea.listTitle（リストタイトル）------------------*/
.titleArea.listTitle {
	width: auto;
	margin: 0;
	padding: 10px 0 2px 5px;
	font-size: 1.3rem;
	color: #EE4A4E;
	font-weight: bold;
	border-bottom: 1px solid #BDAB9A;
}




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

.linkArea {
}
.linkText a {
}

/* btn（ボタン型/テキスト1行）------------------*/
.linkArea.btn {
	background-color: #EE4A4E;
}
.linkArea.btn a {
}

/* list（リスト型）------------------*/
.linkListArea {
}
.linkArea.list {
	border-bottom: 1px solid #BDAB9A;
}
.linkArea.list a {
}

/* pointBox.list（リスト型/写真入り）------------------*/
.pointBox .linkArea.list a {
	min-height: 50px;
	padding: 5px 25px 5px 0;
	clear: both;
	overflow: hidden;
	display: table;
}
.pointBox .linkArea.list a:before {
	content: "";
	width: 50px;
	height: 50px;
	margin: 0 5px 0 1%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto 100%;
	display: table-cell;
}
.pointBox .linkArea.list a span {
	padding: 0 0 0 .5em;
	display: table-cell;
	vertical-align: middle;
}

/* pointBox.list.●（リスト型/写真入りの画像選択）------------------*/
.pointBox .linkArea.list .hygg a:before {
	background-image: url("http://e.his-j.com/images/area2/gum/w472/hotel/gum_hygg_ex01w472_c.jpg");
}
.pointBox .linkArea.list .wrgg a:before {
	background-image: url("http://e.his-j.com/images/area2/gum/w472/hotel/gum_wrgg_ex01w472_c.jpg");
}
.pointBox .linkArea.list .orgg a:before {
	background-image: url("http://e.his-j.com/images/area2/gum/w472/hotel/gum_orgg_ex02w472_c.jpg");
}
.pointBox .linkArea.list .reef a:before {
	background-image: url("http://e.his-j.com/images/area2/gum/w472/hotel/gum_reef_ex01w472_c.jpg");
}
.pointBox .linkArea.list .gpzg a:before {
	background-image: url("http://e.his-j.com/images/area2/gum/w472/hotel/gum_gpzg_ex01w472_c.jpg");
}
.pointBox .linkArea.list .optourIcon a:before {
	background-image: url("/cmn/img/kanto/guam/howto/icon_optour.png");
	background-size: 30px;
}
.pointBox .linkArea.list .carrentalIcon a:before {
	background-image: url("/cmn/img/kanto/guam/howto/icon_carrental.png");
	background-size: 30px;
}
.pointBox .linkArea.list .mailIcon a:before {
	background-image: url("/cmn/img/kanto/guam/howto/icon_mail.png");
	background-size: 30px;
}
.pointBox .linkArea.list .lineIcon a:before {
	background-image: url("/cmn/img/kanto/guam/howto/icon_line.png");
	background-size: 30px;
}

/* multiline（テキスト2行）------------------*/
.linkArea.multiline {
	padding: 0;
	line-height: 1.1em;
}
.linkArea.multiline a {
	font-size: 14px;
}
.linkArea.btn.multiline a {
	padding: 10px 0 9px;
}




/* ===============================================
 tabArea（タブ切り替え部分）　
=============================================== */

#tabArea {
	text-align: center;
	/*border-bottom: 1px solid #004098;*/
	z-index: 1;
}
#tabArea a {
	font-size: 13px;
	color: #333;
	line-height: 0.5em;
}
#tabArea .activeTab a {
	color: #258EC7;
	font-weight: bold;
}
#tabArea a span {
	padding: 10px 0;
}

/* a.multiline（タブテキスト2行）------------------*/
#tabArea a .multiline {
	padding: 0;
	line-height: 1em;
}

/* tabrow（タブデザイン）------------------*/
.tabrow {
	width: 100%;
	margin: 20px 0 -1px;
	text-align: center;
	list-style: none;
	position: relative;
	display: table;
}
.tabrow:before {
	z-index: 1;
}
.tabrow li {
	padding: 8px 0;
	border: 1px solid #AAA;
	border-bottom: 1px solid #8BA1AD;
	background: #ECECEC;
	display: table-cell;
	vertical-align: middle;
	position: relative;
	z-index: 0;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.tabrow li.activeTab {
	background: #CBE6F5;
	z-index: 2;
	border-bottom-color: #CBE6F5;
}
.tabrow li.activeTab:before {
	box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.activeTab:after {
	box-shadow: -2px 2px 0 #FFF;
}
.tabrow li {
	width: 25%;
	background:      -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	background:     -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	background:    -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
	background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
}




/* ===============================================
 contentArea（コンテンツ切り替え部分）　
=============================================== */

.contentArea {
	display: none;
}
.contentArea.active {
	display: block;
	padding: 20px 5px 10px;
	border: 1px solid #8BA1AD;
}




/* ===============================================
 pointArea（ツアー選びのポイント部分）　
=============================================== */

#pointArea {
}
#pointArea .pointList {
}
#pointArea .pointList > li+li {
	margin: 10% 0 0;
}
#pointArea .pointBox section {
	margin: 0;
}
#pointArea .pointBox .pointText {
	margin: 5px 3.1% 10px;
}
#pointArea .point3 .linkList,
#pointArea .point4 .linkList {
	margin: 25px 0 0;
	border-top: 1px solid #BDAB9A;
}

/*#container .tour-preview（API部分）------------------*/
#container .tour-preview {
	width: 98%;
	margin: 0 1%;
	padding: 10px 0 5px;
	border-bottom: 1px solid #BDAB9A;
}
#container .tour-img {
	display: table-cell;
	float: none;
}
#container .tour-desc {
	width: auto;
	padding: 0 0 0 5px;
	display: table-cell;
	vertical-align: top;
	float: none;
}
#container .tour-label,
#container .tour-api .on-label,
#container .on-airport,
#container .on-label-text {
	display: none;
}




/* ===============================================
 faqArea（グアムのQ&A部分）　
=============================================== */

#faqArea {
}
#faqArea .faqList {
	border-top: 1px solid #BDAB9A;
}
#faqArea .faqList .faqBox {
}
#faqArea .faqList .faqBox .questionText {
	padding: 12px 0 12px 5px;
	font-size: 13px;
	border-bottom: 1px solid #BDAB9A;
	background-image: url("http://smp.his-j.com/cmn/img/kanto/icon/instruction/arrow_down_gray001.png");
	background-repeat: no-repeat;
	background-position: 98% 50%;
	background-size: 13px 9px;
	clear: both;
	overflow: hidden;
}
#faqArea .faqList .faqBox .questionText.open {
	background-image: url("http://smp.his-j.com/cmn/img/kanto/icon/instruction/arrow_up_gray001.png");
}
#faqArea .faqList .faqBox .questionText span {
    margin: 0 20px 0 28px;
    display: block;
}

/*questionText:before（Qアイコン部分）------------------*/
#faqArea .faqList > li .questionText:before {
	content:"Q1.";
	display: block;
	float: left;
}
#faqArea .faqList > li:nth-child(2) .questionText:before {
	content:"Q2.";
}
#faqArea .faqList > li:nth-child(3) .questionText:before {
	content:"Q3.";
}
#faqArea .faqList > li:nth-child(4) .questionText:before {
	content:"Q4.";
}
#faqArea .faqList > li:nth-child(5) .questionText:before {
	content:"Q5.";
}
#faqArea .faqList > li:nth-child(6) .questionText:before {
	content:"Q6.";
}
#faqArea .faqList > li:nth-child(7) .questionText:before {
	content:"Q7.";
}
#faqArea .faqList > li:nth-child(8) .questionText:before {
	content:"Q8.";
}
#faqArea .faqList > li:nth-child(9) .questionText:before {
	content:"Q9.";
}
#faqArea .faqList > li:nth-child(10) .questionText:before {
	content:"Q10.";
}

/*answerArea（アコーディオン展開部分）------------------*/
#faqArea .faqList .faqBox .answerArea {
	padding: 5px 3.1% 10px;
	border-bottom: 1px solid #BDAB9A;
	display: none;
}
#faqArea .faqList .faqBox .questionText.open + .answerArea {
	display: block;
}
#faqArea .faqList .faqBox .answerArea span {
	margin: 2px 0 7px;
	font-size: 13px;
	color: #EE4A4E;
	font-weight: bold;
	display: block;
}
#faqArea .faqList .faqBox .answerArea .loungeList {
    margin: 10px 5px 0;
}

#faqArea .faqList .faqBox .answerArea .loungeList dd {
    padding: 0 0 0 14px;
}

#faqArea .faqList .faqBox .answerArea .loungeList dt {
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: bold;
}

#faqArea .faqList .faqBox .answerArea .loungeList dt:before {
    content: "■";
    padding: 0 3px 0 0;
    font-size: 15px;
}

#faqArea .faqList .faqBox .answerArea .hotelList li {
    margin: 0 0 2px 10px;
}

#faqArea .faqList .faqBox .answerArea .hotelList li:before {
    content: "・";
}




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

#footerArea {
	margin: 10% 0 0;
}
#footerArea > section+section {
	margin: 10% 0 0;
}
#footerArea a {
	display: block;
}




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

#searchArea {
}

/* tour_search_module（検索BOX部分）------------------*/

#searchArea #tour_search_module .squeeze-area .btn-area .orange-btn04 {
	background: #EE4A4E;
}

/* otherLinkArea（その他リンク部分）------------------*/
#searchArea .otherLinkArea {
	border-top: 1px dotted #BDAB9A;
}




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

#featureArea {
	padding: 0 0 10px;
}
#featureArea a {
	color: inherit;
}

/* featureList（リスト部分）------------------*/
#featureArea .featureList li {
	border-bottom: 1px solid #BDAB9A;
}
#featureArea .featureList .featureBox .detailArea .titleText {
	color: #EE4A4E;
}