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

/*テンプレテスト用CSS*/
.flexslider.fl01-box { margin: 0 auto;border:none!important;}
.fl01-box {
	width:100%;
	height: auto;
	margin:10px auto 50px;
}
.slick-slider{
	width: 100%;
	height: auto;
	margin:20px auto;
}
/*左右の矢印を消してます*/
.flex-direction-nav {
    display: none;
}

/*slider*/
li.flex-nav-prev,li.flex-nav-next {
    line-height: initial;
}
/*---------------------*/
.main-box {
padding: 120px 20px;
background: #ecf0f1;
}
/*ナビスタイル*/
.nav-menu {
/*height: 100px;*/
width:100%;
margin: auto;
background: #b0ddf3;
}
.nav-menu ul{
display:flex;
width:960px;
margin: auto;
max-width:100%;
}
.nav-menu ul li{
width: 200px;
margin: auto;
cursor: pointer;
text-align: center;
}
.nav-menu ul li a{
padding:20px 0;
display:inline-block;
color:#333;
}
/* 固定表示時のスタイル */
.is-fixed {
position: fixed;
top: 0;/*場合によって変更してください*/
left: 0;
z-index: 2;
width: 100%;
}
@media screen and (max-width:764px){
section{width:100%;}
.nav-menu {	width:100%;}
.is-fixed {
    top: 79px;
}
.nav-menu ul li {
    border-right: 1px solid #f3f3f3;
    box-sizing: border-box;
}
.nav-menu ul li:last-child {
    border-right: 0;
}
}	




/*=======================================
見出し中央
=======================================*/
/*1線 フォンサイズは好きに変更してください*/
.title-bor01 {
    text-align: center;
    margin: 30px 0;
}
.title-bor01 h4{
position: relative;
display: inline-block;
padding: 0 55px;
}
.title-bor01 h4:before, .title-bor01 h4:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}
.title-bor01 h4:before {left:0;}
.title-bor01 h4:after {right: 0;}
/*=======================================
　tmp-03-A-01｜左右入れ替えレイアウト
=======================================*/
.tmp-03-A-01 {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	margin: 0 0 20px 0;
}
.flex-reverse {
	flex-direction: row-reverse;
}
.tmp-03-A-01 .img-box {
	width: 48%;
}
.tmp-03-A-01 .img-box img {
	width: 100%;
	height: auto;
}
.tmp-03-A-01 .txt-box {
	width: 48%;
}
@media screen and (max-width:480px) { 
    /*　画面サイズが480px以下はここを読み込む　*/
.tmp-03-A-01 {
	width: 90%;
	display: flex;
	flex-direction: column;
	margin: 0 auto 20px auto;
}
.flex-reverse {
	flex-direction: column;
}
.tmp-03-A-01 .img-box {
	width: 100%;
}
.tmp-03-A-01 .img-box img {
	width: 100%;
	height: auto;
}
.tmp-03-A-01 .txt-box {
	width: 100%;
	margin: 10px 0 0 0;
}
}
/*=======================================
　tmp-03-A-02｜3カラム
=======================================*/
.tmp-03-A-02 {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between; /*均等配置*/
}
.tmp-03-A-02 .box { /*.boxの幅指定*/
	width: 30%;
}
.tmp-03-A-02 .img-box {
	width: 95%;
}
.tmp-03-A-02 .img-box img {
	width: 100%;
	height: auto;
}
.tmp-03-A-02 .txt-box {
	width: 90%;
	margin: 10px 0 0 0;
}
@media screen and (max-width:480px) { 
    /*　画面サイズが480px以下はここを読み込む　*/
.tmp-03-A-02 {
	width: 90%;
	display: flex;
	flex-direction: column;
	margin: 0 auto 20px auto;
}
.tmp-03-A-02 .box { /*.boxの幅指定*/
	width: 100%;
	margin: 0 0 20px 0;
}
.tmp-03-A-02 .img-box {
	width: 95%;
}
.tmp-03-A-02 .img-box img {
	width: 95%;
	height: auto;
}
.tmp-03-A-02 .txt-box {
	width: 100%;
	margin: 10px 0 0 0;
}
}
/*=======================================
　tmp-07-B-01｜その他エリア・スポットなど観光情報（1カラム）
=======================================*/
/*発地 + プライス表示 + ボタン*/
/*ボタン・値段表示*/
.tmp-07-B-01 .prices {
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1px;
	color: #d3381c;
}
.tmp-07-B-01 .prices .depa {
	font-size: 13px;
	font-weight: bold;
	color: #333;
	display: inline-block;
}
.tmp-07-B-01 .getlowprice_child_btn {
	font-size: 18px;
	font-weight: bold;
	color: #d3381c;
}
.tmp-07-B-01 .detail {
	text-align: center;
}
.tmp-07-B-01 .detail a {
	display: inline-block;
	width: 208px;
	height: 32px;
	font-size: 14px;
	color: #fff;
	line-height: 32px;
	background: linear-gradient(to top, #d3381c,#d3381c 50%, #ce5242 50%,#ce5242);
}
.tmp-07-B-01 .detail a i {
	padding: 0 0 0 10px;
}
/*/////////////// BOXの中身 ///////////////*/
.tmp-07-B-01 {
	margin: 0 0 50px 0;
}
/*タイトル*/
.tmp-07-B-01 h3 {
	font-size: 28px;
	font-weight: bold;
	margin: 30px 0 10px 0;
	border-bottom: 2px solid #333;
	background:#FFF;
	border-radius: 0;
	color: #333;
	padding:0;
}
.tmp-07-B-01 h3 i {
	margin: 0 7px 0 0;
}
.tmp-07-B-01 h3:before {
	content: "recommend hotel";
    font-size: 18px;
	color: #928178;
	display: block;
	font-weight: normal;
	line-height: 120%;
}
/*アイコン*/
.tmp-07-B-01 .icon li {
	display: inline-block;
	color: #FFF;
	padding: 1px 10px 0 10px; 
	font-size: 12px;
	background: #d3381c;
	line-height: normal;
}
/*レイアウト１・画像＋おすすめリスト*/
.tmp-07-B-01 .box-wrap {
	width:100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	margin: 20px 0 0 0;
}
.tmp-07-B-01 .box-wrap .img-box {
	width: 49%;
}
.tmp-07-B-01 .box-wrap .txt-box {
	width: 49%;
}
.tmp-07-B-01 .box-wrap .txt-box .ichioshi {
	font-size: 22px;
	font-weight: bold;
	margin: 0 0 10px 0;
	line-height: 120%;
}
.tmp-07-B-01 .box-wrap .txt-box h5 {
	font-size: 16px;
	font-weight: bold;
	margin: 15px 0 10px 0;
	border-bottom: 1px dotted #d3381c;
	color:#d3381c;
}
.tmp-07-B-01 .box-wrap .txt-box h5 i {
	margin: 0 7px 0 0;
}
.tmp-07-B-01 .box-wrap .txt-box ul {
	margin: 0 0 0 20px;
}
.tmp-07-B-01 .box-wrap .txt-box li {
	position: relative;
	padding: 0 0 0 5px;
	line-height: normal;
}
/*listのスタイル（チェックリスト風）*/
.tmp-07-B-01 .box-wrap .txt-box li::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: -1em;
  width: 8px;
  height: 3px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-left: 2px solid #d3381c;
  border-bottom: 2px solid #d3381c;
}
/*レイアウト２・基本情報+Google Map*/
.tmp-07-B-01 .info-box {
	width:auto;/*入れ込んだ時に要素がはみ出す場合は width:auto; にする*/
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding:10px;
	margin: 30px 0 0 0;
	background: #fbfaf5;
	border-radius: 5px 5px 0 0;
}
.tmp-07-B-01 .info-box .txt-box:before {
	content: "information";
    position: relative;
    top: -26px;
	left: -25px;
    font-size: 26px;
	color: #928178;
}
.tmp-07-B-01 .info-box .txt-box {
	width: 40%;
	padding:0 0 0 30px;
}
.tmp-07-B-01 .info-box .txt-box h5 {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 15px 0;
}
.tmp-07-B-01 .info-box .txt-box h5 i {
	margin: 0 5px 0 0;
}
.tmp-07-B-01 .info-box .txt-box p {
	margin: 0 0 3px 0;
}
.tmp-07-B-01 .info-box .txt-box p span {
	display: inline-block;
	color: #FFF;
	font-size: 12px;
	text-align: center;
	padding: 1px 0 0 0;
	background:#333;
	margin: 0 10px 0 0;
	width: 105px;
}
.tmp-07-B-01 .info-box .map {
	width: 60%;
}
.tmp-07-B-01 .info-box iframe {
	width: 100%;
    border: 1px solid #ede4cd;
    box-sizing: border-box;
	padding: 3px;
}
/*レイアウト３・ツアーボタン*/
.tmp-07-B-01 .btn-box {
	 width:auto;/*入れ込んだ時に要素がはみ出す場合は width:auto; にする*/
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10px 120px 20px 120px;
	margin: 0 auto 30px auto;
	background: #ede4cd;
	border-radius: 0 0 5px 5px;
}
.tmp-07-B-01 .btn-box div+div {
	margin: 0 0 0 5px;
}
@media screen and (max-width:480px) {
/*　画面サイズが480px以下はここを読み込む　*/
.tmp-07-B-01 {
	margin: 0 0 50px 0;
}
/*タイトル*/
.tmp-07-B-01 .bangkok-hotel-recommend h3 {
	font-size: 20px;
    background-color: #FFF;
}
.bangkok-hotel-recommend h3:before {
    font-size: 14px;
}
/*レイアウト１・画像+おすすリスト*/
.tmp-07-B-01 .box-wrap {
	width:100%;
	flex-direction: column;
	justify-content: center;
}
.tmp-07-B-01 .box-wrap .img-box {
	width: 100%;
}
.tmp-07-B-01 .box-wrap .txt-box {
	width: 100%;
}
.tmp-07-B-01 .box-wrap .txt-box .ichioshi {
	font-size: 18px;
	margin: 10px 0;
}
/*listのスタイル（チェックリスト風）*/
.tmp-07-B-01 .box-wrap .txt-box li::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: -1em;
  width: 8px;
  height: 3px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/*レイアウト２・基本情報+Google Map*/
.tmp-07-B-01 .info-box {
	width:100%;
	flex-direction: column;
	justify-content: center;
	padding:10px;
	}
.tmp-07-B-01 .info-box .txt-box:before {
	top: -21px;
    left: 0;
    font-size: 18px;
}
.tmp-07-B-01 .info-box .txt-box {
	width:100%;
	padding:0 0 10px 0;
}
.tmp-07-B-01 .info-box .txt-box h5 {
	font-size: 16px;
}
.tmp-07-B-01 .info-box .map {
	width: 100%;
	}
/*レイアウト３・ツアーボタン*/
.tmp-07-B-01 .btn-box {
	 width:auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding:0 0 10px 0;
	margin: 0;
}
.tmp-07-B-01 .btn-tour{
	margin: 0 auto;
}
.tmp-07-B-01 .btn-box div+div {
	margin: 0 auto;
}
}

/*=======================================
　tmp-03-D-01｜左に質問・右に回答（幅480px以下でcolumn表示）
=======================================*/
.tmp-03-D-01 .faq-style-01 {
	width:100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	margin: 0 0 10px 0;
}
.tmp-03-D-01 .faq-style-01 dt {
	width: 38%;
	padding:10px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	line-height: normal;
	
}
.tmp-03-D-01 .faq-style-01 dt span {
	font-size:30px;
	font-weight: bold;
	color:#DDD;
	margin: 0 10px 0 0; 
	line-height: normal;
}
.tmp-03-D-01 .faq-style-01 dd {
 	position: relative;
	display: inline-block;
	padding: 10px 20px;
	width: 60%;
	background: #EEE;
	border-radius: 5px;
}
.tmp-03-D-01 .faq-style-01 dd:before{ /*吹き出しの三角部分の設定*/
	content: "";
	position: absolute;
	top: 50%;
	left: -25px;
 	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #EEE;
}
.tmp-03-D-01 .faq-style-01 dd p {
	margin: 0;
	padding: 0;
	line-height: normal;
}
.tmp-03-D-01 .faq-style-01 dd p strong {
	font-weight: bold;
	color: #FF6600;
}
@media screen and (max-width:480px) { 
    /*　画面サイズが480px以下はここを読み込む　*/
.tmp-03-D-01 .faq-style-01 {
	width:100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 0 20px 0;
}
.tmp-03-D-01 .faq-style-01 dt {
	width:100%;
}
.tmp-03-D-01 .faq-style-01 dd {
	margin:10px 0 0 0;
	width: initial;
}
.tmp-03-D-01 .faq-style-01 dd:before{/*480px以下では上向きの吹き出しになります*/
	content: "";
	position: absolute;
	top: -15px;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-bottom: 15px solid #EEE;
}
}
/*=======================================
　tmp-07-B-02｜その他エリア・スポットなど観光情報（2カラム）
=======================================*/
/*レイアウト*/
.tmp-07-B-03 {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}
.tmp-07-B-03 .detail-box {
	width: 32%;
	border: 3px solid #EEE;
	padding: 5px 10px 10px 10px;
	box-sizing: border-box;
}
.tmp-07-B-03 .detail-box .img-box {
	width:100%;
	margin: 0 auto 20px auto;
}
.tmp-07-B-03 .detail-box .img-box img {
	width:100%;
	padding:3px;
	border:1px solid #EEE;
	box-sizing: border-box;
}
/*BOXの中身*/
.tmp-07-B-03 .area-name {
	display: inline-block;
	background: #333;
	color: #FFF;
	font-size: 12px;
	margin: 0 0 5px -10px;
	padding: 0 15px;
	line-height: normal;
}
.tmp-07-B-03 h3.title {
	background: #FFF;
	text-align: center;
	font-size: 18px;
	padding:0;
	margin: 0 0 5px 0;
	font-weight: bold;
    color: #333;
}
.tmp-07-B-03 p.star {
	text-align: center;
	font-size: 12px;
	margin: 0 0 10px 0;
}
.tmp-07-B-03 p.txt-box {
	font-size: 14px;
	padding:0 10px;
	line-height: normal;
}
/*ツアーボタンエリア*/
.tmp-07-B-03 .btn-box {
	background: #fbfaf5;
	padding: 0 0 10px 0;
	margin: 10px 0 0 0;
}
/*発地 + プライス表示 + ボタン*/
/*ボタン・値段表示*/
.tmp-07-B-03 .prices {
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1px;
	color: #d3381c;
}
.tmp-07-B-03 .prices .depa {
	font-size: 13px;
	font-weight: bold;
	color: #333;
	display: inline-block;
}
.tmp-07-B-03 .getlowprice_child_btn {
	font-size: 18px;
	font-weight: bold;
	color: #d3381c;
}
.tmp-07-B-03 .detail {
	text-align: center;
}
.tmp-07-B-03 .detail a {
	display: inline-block;
	width: 208px;
	height: 32px;
	font-size: 14px;
	color: #fff;
	line-height: 32px;
	background: linear-gradient(to top, #d3381c,#d3381c 50%, #ce5242 50%,#ce5242);
}
.tmp-07-B-03 .detail a i {
	padding: 0 0 0 10px;
}
@media screen and (max-width:480px) {
/*　画面サイズが480px以下はここを読み込む　*/
/*レイアウト*/
.tmp-07-B-03 {
	flex-direction: column;
	justify-content: center;
}
.tmp-07-B-03 .detail-box {
	width: 100%;
	margin: 0 0 20px 0;
}
}
.flex-direction-nav a {
overflow: initial !important;
}
.btn_rich01 a{
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    width: 100%;
    text-align: center;
}
.btn_rich01 a:active {/*押したとき*/
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
}
.box-flex {
    display: flex;
    flex-wrap: wrap;
}
.btn_rich01 {
    margin: auto;
    width:25%;
}
.fa, .fas{padding-left:5px;}

/*左ライン*/
.brl {
border-left: 5px solid #39c;
padding-left: 10px;
}


/*片面矢印*/
.brl-ha {
    position: relative;
    display: block;
    padding: 7.5px 10px;
    width: 160px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #b0ddf3;
}
.brl-ha:before{
	content: "";
    position: absolute;
    top: 19px;
    left: 100%;
    margin-top: -18px;
    border: 19px solid transparent;
    border-left: 22px solid #b0ddf3;
}
.brl-ha h4{
	margin: 0;
	padding: 0;
}




/*=======================================
tmp-07-C-01｜フライト情報（テーブル）デザイン１（枠線）
=======================================*/
	.tmp-07-C-01 .table-wrap {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
		margin: 0 0 20px 0;
	}
	.tmp-07-C-01 .table-box {
		width: 49.5%;
	}
	.tmp-07-C-01 .table-box table {
		width: 100%;
		border-collapse: collapse;
		border: 1px solid #CCC;
	}
	.tmp-07-C-01 .table-box th,
	.tmp-07-C-01 .table-box td {
		padding: 3px;
		text-align: center;
		border: 1px solid #CCC;
	}
	.tmp-07-C-01 .table-box th {
		background: #EEE;
	}
	.tmp-07-C-01 .table-w10per {width:10%;}
	.tmp-07-C-01 .table-w15per {width:15%;}
	.tmp-07-C-01 .table-w20per {width:20%;}
	.tmp-07-C-01 .table-w25per {width:25%;}
	.tmp-07-C-01 .table-w30per {width:30%;}
	.tmp-07-C-01 .table-w35per {width:35%;}
	.tmp-07-C-01 h4 {
		text-align: center;
		background: #666;
		color:#FFF;
		padding:3px 0;
		margin: 0 0 10px 0;
		line-height: normal;
	}
	.tmp-07-C-01 h5 {
		text-align: center;
		background: #999;
		color:#FFF;
		padding:3px 0;
	}
	.tmp-07-C-01 h4 span,
	.tmp-07-C-01 h5 span {
		margin: 0 5px;
	}
	@media screen and (max-width:480px) { 
		/*　画面サイズが480px以下はここを読み込む　*/
		.tmp-07-C-01 .table-wrap {
			flex-direction: column;
			justify-content: center;
			margin: 0 0 20px 0;
		}
		.tmp-07-C-01 .table-box {
			width: 100%;
		}
	}


/*=======================================
　tmp-03-A-03｜4カラム
=======================================*/
.tmp-03-A-03 {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between; /*均等配置*/
}
.tmp-03-A-03 .box { /*.boxの幅指定*/
	width: 23%;
}
.tmp-03-A-03 .img-box {
	width: 100%;
}
.tmp-03-A-03 .img-box img {
	width: 100%;
	height: auto;
}
.tmp-03-A-03 .txt-box {
	width: 100%;
	margin: 10px 0 0 0;
}
@media screen and (max-width:480px) { 
/*　画面サイズが480px以下はここを読み込む　*/
	.tmp-03-A-03 {
		width: 90%;
		display: flex;
		flex-direction: column;
		margin: 0 auto 20px auto;
	}
	.tmp-03-A-03 .box { /*.boxの幅指定*/
		width: 100%;
		margin: 0 0 20px 0;
	}
	.tmp-03-A-03 .img-box {
		width: 100%;
	}
	.tmp-03-A-03 .img-box img {
		width: 100%;
		height: auto;
	}
	.tmp-03-A-03 .txt-box {
		width: 100%;
		margin: 10px 0 0 0;
	}
}

/*=======================================
 まるボタン
 =======================================*/
 .btn_circle01 a{
 	display: inline-block;
 	text-decoration: none;
 	background: #87befd;
 	color: #FFF;
 	width: 120px;
 	height: 120px;
 	line-height: 120px;
 	border-radius: 50%;
 	text-align: center;
 	vertical-align: middle;
 	overflow: hidden;
 	transition: .4s;
 }
 .btn_circle01 a:hover{
 	background: #668ad8;
 }