@charset "utf-8";
/*
 	Outline - 
		00.Basic Settings.
		01.Common Settings.
		02.Each Page.
*/

article.modal-wrap {
	position:relative;
	clear:both;
	width:100%;
	color:#222;
	font-size:16px;
	font-family: Verdana, Roboto, "Droid Sans", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	line-height: 1.6;
	z-index:1;
}
article.modal-wrap h1,
article.modal-wrap h2,
article.modal-wrap h3,
article.modal-wrap h4,
article.modal-wrap h5,
article.modal-wrap h6,
article.modal-wrap div,
article.modal-wrap span,
article.modal-wrap ol,
article.modal-wrap ul,
article.modal-wrap li,
article.modal-wrap dl,
article.modal-wrap dt,
article.modal-wrap dd,
article.modal-wrap a{
	box-sizing:border-box;
}
article.modal-wrap h1,
article.modal-wrap h2,
article.modal-wrap h3,
article.modal-wrap h4,
article.modal-wrap h5,
article.modal-wrap h6{
	float:none;
}

article.modal-wrap img {
	display:block;
	max-width:100%;
	width:auto!important;
	height:auto;
	margin:auto;
}
article.modal-wrap i {
	margin:0 5px;
}
article.modal-wrap select{
	margin:3px 0;
	padding:5px 20px 5px 10px;
	font-size:16px!important;
	color:#222;
	letter-spacing:normal;
	font-family: Verdana, Roboto, "Droid Sans", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	background:#fff url(/tour/campaign/tdr/img/2017/ico-arrow01.png) no-repeat right 3px center;
	border:1px solid #ccc;
	border-radius:5px;
	-webkit-appearance:none;
	appearance:none;
}
article.modal-wrap input,
article.modal-wrap button{
	outline:none;
}
article.modal-wrap a {
	color:#f8689b;
}
article.modal-wrap a:hover {
	opacity:0.7!important;
}

.modal-header{
	background:#fafafa;
	border-radius:5px 5px 0 0;
}
.modal-body{
	padding:20px 15px!important;
}

.close,
.close:hover,
.close:focus{
	color:#333;
}
.close{
	margin-left:10px;
	opacity:1.0;
}
.close > span{
	display:inline-block;
	padding:5px 8px;
	vertical-align:middle;
	color: #fff;
	font-size: 20px;
	background:#333;
	border-radius:5px;
}



.modal-footer{
	text-align:center;
}

@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		cursor: default;
		pointer-events: none;
		text-decoration:none!important;
	}
}
@media screen and (max-width: 960px) {
	body{
		min-width:inherit;
	}
	article.modal-wrap {
		font-size:14px;
	}
}

@media screen and (min-width: 768px) and (max-width: 959px) {
	.modal-lg {
		width: 680px;
	}
}
@media screen and (max-width: 767px) {
	body{
		min-width:320px;
	}
	article.modal-wrap {
		font-size:14px;
	}

	.modal-header{
		padding:10px 15px!important;
	}
	.modal-header .close{
		margin:0 -5px 0 0!important;
	}

}




 /* ======================================
01.
       Common Settings.
========================================= */
.accTrigger{
	position:relative;
	cursor:pointer;
}
.accTrigger:before{
	position:absolute;
	top:50%;
	right:10px;
	margin-top:-0.5em;
	content:"\f13a";
	font-weight: 900;font-family: "Font Awesome 5 Free";
	font-size:0.8em;
}
.accTrigger.on:before{
	content:"\f139";
}
.accTrigger:hover{
	opacity:0.7;
}


/* list style */
.list-kome > li {
	position:relative;
	padding-left:1em;
}
.list-kome > li:before {
	position:absolute;
	top:0;
	left:0;
	content:"※";
}
.modal-list01 > li{
	position:relative;
	margin-bottom:5px;
	padding-left:1em;
	line-height: 1.4;
}
.modal-list01 > li:before{
	position:absolute;
	top:0.5em;
	left:0;
	content:"";
	width:0.6em;
	height:0.6em;
	border-radius:50%;
	background:#e96492;
}

/* title */
.modal-title01{
	margin-top:8px;
	font-size:17px;
	font-weight:bold;
	line-height: 1.2;
}
.modal-title02{
	position:relative;
	margin-bottom:0px;
	padding:0 0 10px;
	font-size:18px;
	font-weight:normal;
	line-height: 1.2;
	color:#e96492;
}

/* btn style */
.modal-btn01{
	display:block;
	padding:10px 15px;
	line-height: 1.2;
	border:1px solid #ccc;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100 */
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}
.modal-btn01:hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,ffffff+100 */
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.modal-body p{
	margin-bottom:10px;
}

.modal-body p.copyright{
	margin-bottom:0px;
	text-align:center;
}

.modal-footer .btn{
	color:#fff;
	background:#333;
}

/* etc */
.modal-wrap .onlysm,
.modal-wrap .smtab{
	display:none!important;
}

.note01{
	font-size:14px!important;
}
.note02{
	font-size:12px;
	color:#e00000;
}

.modal-color01{
	color:#e00000;
}


@media screen and (max-width: 960px) {
	.modal-wrap .onlypc{
		display:none!important;
	}
	.modal-wrap .smtab{
		display:block!important;
	}
}
@media screen and (max-width: 767px) {
	.modal-title01{
		margin-top:5px;
		font-size:14px;
	}
	.modal-title02{
		margin-bottom:10px;
		padding:0 0 10px;
		font-size:16px;
	}
	.modal-title02:before{
		bottom:2px;
	}


	.modal-wrap .onlypc,
	.modal-wrap .pctab{
		display:none!important;
	}
	.modal-wrap .onlysm{
		display:block!important;
	}

}




 /* ======================================
02.
       Each Page.
========================================= */
.modal-lead01{
	padding:10px;
	text-align:center;
	line-height: 1.2;
	color:#e00000;
	background:#FFFF97;
}


.departure-list01{
	margin:20px auto;
	font-size:18px;
}
.departure-list01 dt{
	padding:10px 20px;
	font-weight:normal;
	color:#fff;
	background:#dbbe96;
	border-top:1px solid rgba(255,255,255,0.5);
}
.departure-list01 dt:first-child{
	border-top:none;
}

.departure-list01 li:first-child a{
	border-top:1px solid #ccc;
}

.departure-list01 a{
	position:relative;
	display:block;
	padding:10px 20px;
	color:#222!important;
	text-decoration:none!important;
	border:1px solid #ccc;
	border-top:none;
	background:#fff;
}
.departure-list01 a:before,
.airport-list01 a:before{
	margin-right:5px;
	content:"\f041";
	font-weight: 900;font-family: "Font Awesome 5 Free";
}


.departure-list02{
	margin:20px auto;
	font-size:18px;
}
.departure-list02 dt{
	padding:10px 20px;
	font-weight:normal;
	color:#fff;
	background:#ffa200;
	border-top:1px solid rgba(255,255,255,0.5);
}
.departure-list02 dt:first-child{
	border-top:none;
}
.departure-list02 a{
	position:relative;
	display:block;
	padding:10px 20px;
	color:#222!important;
	text-decoration:none!important;
	border:1px solid #ccc;
	border-top:none;
	background:#fff;
}

.departure-list03{
	margin:0px auto 0px auto;
	font-size:16px;
}

.departure-list03 li:first-child a{
	border-top:1px solid #ccc;
}

.departure-list03 a{
	position:relative;
	display:block;
	padding:10px 20px;
	color:#222!important;
	text-decoration:none!important;
	border:1px solid #ccc;
	border-top:none;
	background:#fff;
}

.airport-list01 a:before{
	margin-right:5px;
	content:"\f041";
	font-weight: 900;font-family: "Font Awesome 5 Free";
}

.departure-list01 a:after,
.departure-list02 a:after,
.departure-list03 a:after,
.airport-list01 a:after{
	position:absolute;
	top:50%;
	right:10px;
	margin-top:-0.5em;
	content:"\f054";
	font-weight: 900;font-family: "Font Awesome 5 Free";
	font-size:0.8em;
	color:#666;
}

.airport-list01 a{
	position:relative;
	display:block;
	font-size:18px;
	padding:10px 20px;
	color:#222!important;
	text-decoration:none!important;
	border:1px solid #ccc;
	border-top:none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9fcf7+0,eeeeee+100 */
	background: rgb(249,252,247); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(249,252,247,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(249,252,247,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(249,252,247,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

.airport-list01 li:first-child a{
	border-top:1px solid #ccc;
}

.departure-list01 a:hover,
.departure-list02 a:hover,
.departure-list03 a:hover,
.airport-list01 a:hover{
	background:#f4f4f4;
}

/* color */




@media screen and (max-width: 960px) {
}
@media screen and (max-width: 767px) {
	.departure-list01,
	.departure-list02{
		font-size:14px;
	}
	.departure-list01 dt,
	.departure-list02 dt{
		padding:10px 10px;
	}
	.departure-list01 a,
	.departure-list02 a{
		padding:10px 20px 10px 10px;
	}
}




/* Dantai Page
------------------------------------------*/
.dantai-wrap{
	padding:30px 0;
}
.dantai-wrap .modal-title02{
	font-size:20px;
}
.dantai-wrap .tel-box{
	display:block;
	width:80%;
	margin:30px auto;
	padding:10px 40px;
	text-align:center;
	text-decoration:none!important;
	border:2px solid #ec6580;
	border-radius:5px;
}
.dantai-wrap dt{
	vertical-align:middle;
	line-height: 1.2;
	font-size:34px;
	color:#ec6580!important;
	text-decoration:none!important;
	cursor:default;
}
.dantai-wrap dd{
	font-size:14px;
	color:#333;
}

#tel-modal{
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        z-index: 100;
        background:#fff;
        border:3px solid #ccc;
        border-radius: 10px;
        -webkit-border-radius: 10px;  
        -moz-border-radius: 10px;
        width:600px;
}

#modal-bg {
        width:100%;
        height:100%;
        background-color: rgba(0,0,0,0.5);
        position:fixed;
        top:0;
        left:0;
        z-index:20;
}


@media screen and (max-width: 960px) {
}
@media screen and (max-width: 767px) {
	.dantai-wrap{
		padding:20px 0;
	}
	.dantai-wrap .modal-title02{
		font-size:16px;
	}
	.dantai-wrap .tel-box{
		width:100%;
		margin:20px auto;
		padding:10px 20px;
	}
	.dantai-wrap dt{
		font-size:20px;
	}
	.dantai-wrap dd{
		font-size:14px;
	}
}

@media screen and (max-width: 767px) {
        #tel-modal{
                width:310px;
        }
        #tel-modal .close > span {
                display: inline-block;
                padding: 4px 7px;
    }
        #tel-modal .modal-body {
                padding: 5px 8px!important;
        }
        #tel-modal p{
                font-size:12px;
        }
        #tel-modal .close{
                opacity: 1.0;
        }
        #tel-modal .modal-title02{
                margin-top:0;
                font-size:14px;
        }
        #tel-modal dl{
                margin-bottom:0;
        }
        #tel-modal .dantai-wrap{
                padding:5px 0;
        }
}