@charset "utf-8";

/*-------------------------------------------------
スライダー　[共通の内容はowl.carousel.cssに記載]
-------------------------------------------------*/
#mainSlider {
	background-color: #f9f4ff;
	padding: 5px 0;
}
#mainSlider #sync2 .current .item {
	background: #603f8a;
}
#mainSlider #sync1 .item img{
	height: 100%;
}

/*-----------------------------------------
最新のお知らせ
-----------------------------------------*/
#newsWrap {
	width: 100%;
	padding: 40px 0 50px;
    & > .inner {
        width: 992px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
} 
#newsBox {
	width: 620px;
    & h2 {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        border-bottom: solid 1px #603f8a;
        &::before {
            content: "";
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-right: 10px;
            vertical-align: middle;
            background: url("../../../../kansai/common/img/icon/purple/icon-news.svg") no-repeat;
            background-size: contain;
        }
    }
    & .newslist {
        padding: 0 10px 0 0;
        & li {
            display: flex;
            border-top: dotted 1px #ccc;
            padding: 7px 0;
            &:first-child {
                border-top: none;
            }
            &:empty {
                display: none;
            }
            & .date {
                width: 80px;
                margin-right: 20px;
                & time {
                    font-size: 13px;
                }
                & p {
                    width: 100%;
                    font-size: 11px;
                    text-align: center;
                    color: #fff;
                }
            }
            & .text {
                font-size: 14px;
                line-height: 1.5em;
                width: 500px;
                & a {
                    color: #333;
                    text-decoration: none;
                    &:hover {
                        text-decoration: underline;
                    }
                }
                & .price {
                    color: red;
                    font-weight: bold;
                }
                & .red {
                    color: red;
                }
                & .bold{
                    font-weight: bold;
                }
            }
        }
    }
}

/*-----------------------------------------
検索ボックス
-----------------------------------------*/
#searchBox {
	width: 320px;
    & .tab {
        width: 100%;
        height: 38px;
        display: flex;
        justify-content: space-between;
        & li {
            font-size: 12px;
            line-height: 38px;
            text-align: center;
            width: 100%;
            margin-right: 3px;
            background-color: #d1e9fe;
            color: #0446a4;
            border-radius: 6px 6px 0 0;
            &:first-child {
                background-color: #0446a4;
                color: #fff;
            }
            & a {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 6px 6px 0 0;
                color: #1E51C6;
                text-decoration: none;
                &:hover {
                    text-decoration: none;
                    display: block;
                    background-color: #0446a4;
                    color: #fff;
                    transition: all 0.6s ease;
                }
            }
        }
    }
    & .search-content {
        width: 100%;
        border: solid 1px #0446a4;
        padding: 15px 20px;
    }
}

/*---------------------------------------------
   国から探す
---------------------------------------------*/
.country-link-box {
	width: 100%;
	background-color: #f3f3f3;
	padding: 15px 20px;
	margin: 50px 0 20px;
    & h3 {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        &::before {
            font-family: FontAwesome;
            content: "\f002";
            padding: 0 5px;
        }
    }
    & ul {
        display: flex;
        flex-wrap: wrap;
        & li {
            text-align: center;
            font-size: 14px;
            line-height: 2.6em;
            margin: 0 7px 7px 0;
            & a {
                display: block;
                background-color: #767e04;
                border-radius: 1.3em;
                color: #fff;
                text-decoration: none;
                padding: 0 15px;
                &::after {
                    font-family: "FontAwesome";
                    content: "\f105";
                    margin-left: 10px;
                }
                &:hover {
                    background-color: #959d1c;
                    transition: all 0.6s ease;
                }
            }
        }
    }
}


/*---------------------------------------------
  おすすめ特集
---------------------------------------------*/
#specialWrap {
	width: 100%;
	padding: 50px 0;
	background-color: #f7f5f0;
    & .inner {
        width: 992px;
        margin: 0 auto;
    }
    &  ul {
        display: flex;
        flex-wrap: wrap;
        & li {
            .col5 & {width: 19%; margin: 0 0.5% 10px;}
            .col4 & {width: 23%; margin: 0 1% 10px;}
            .col3 & {width: 31%; margin: 0 1% 10px;}
            & a {
                display: block;
                &::hover {
                    opacity: 0.8;
                    transition: all 0.6s ease;
                }
            }
            & img {
                width: 100%;
            }
        }
    }
}

/*-----------------------------------------
マップ
-----------------------------------------*/
#map {
	padding: 50px 0 0;
	background-image: url("../img/map/map-bg.jpg");
}
#map h2 {
    text-align: center;
	margin-bottom: 10px;
}
#map .intro {
	font-size: 14px;
	color: #663f14;
	line-height: 1.6em;
    text-align: center;
	margin-bottom: 30px;
}
#map .mapBox {
}
#map .mapBox .detailBox {
    width: 100%;
    height: 568px;
    background: url(../img/map/mapEurope.png) no-repeat center center;
}
#map .mapBox .detailBox .inner {
	width: 992px;
    height: 568px;
	margin: 0 auto;
	position: relative;
}
#map .mapBox .countryList {
	width: 560px;
	height: 100%;
}
#map .mapBox .countryList .btn {
    position: absolute;
}
#map .mapBox .countryList .btn span {
	display: inline-block;
	background: #868f0b;
	font-size: 12px;
	line-height: 1;
	padding: 7px;
	color: #fff;
	cursor: pointer;
    transition: all 0.6s ease;
}
#map .mapBox .countryList .btn.active span, #map .mapBox .countryList .btn span:hover {
	background: #333;
}
#map .mapBox .countryList .btn span::after {
    font-family: FontAwesome;
    content: "\f0da";
    padding-left: 4px;
}
#map .mapBox .countryList .nearCountryBox {
	width: 210px;
	text-align: center;
	background: #fff;
	border: 2px solid #c9b48a;
	padding: 10px;
	position: absolute;
	bottom: 25px;
	left: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#map .mapBox .countryList .nearCountryBox .boxttl {
	font-size: 16px;
	line-height: 1;
	font-weight: bold;
	margin-bottom: 7px;
	width: 100%;
}
#map .mapBox .countryList .nearCountryBox .btn {
	position: static;
}
*#map .mapBox .countryList .nearCountryBox .btn + .btn {
	margin-left: 10px;
}

/* //// ↓ボタン位置↓ //// */
#map .mapBox .countryList .btn.GBR {top: 128px;	left: 119px;}
#map .mapBox .countryList .btn.FRA {top: 246px;	left: 130px;}
#map .mapBox .countryList .btn.ESP {top: 325px;	left: 86px;}
#map .mapBox .countryList .btn.ITA {top: 320px;	left: 255px;}
#map .mapBox .countryList .btn.NLD {top: 164px;	left: 149px;}
#map .mapBox .countryList .btn.BEL {top: 196px;	left: 136px;}
#map .mapBox .countryList .btn.DEU {top: 174px;	left: 236px;}
#map .mapBox .countryList .btn.FIN {top: 18px; left: 399px;}
#map .mapBox .countryList .btn.CHE {top: 252px;	left: 215px;}
#map .mapBox .countryList .btn.HRV {top: 287px;	left: 297px;}
#map .mapBox .countryList .btn.AUT {top: 226px;	left: 280px;}
#map .mapBox .countryList .btn.GRC {top: 359px;	left: 360px;}
#map .mapBox .countryList .btn.TUR {top: 346px;	left: 497px;}
#map .mapBox .countryList .btn.RUS {top: 135px;	left: 513px;}
#map .mapBox .countryList .btn.MAR {top: 424px;	left: 36px;}
#map .mapBox .countryList .btn.NOR {top: 30px;	left: 202px;}
#map .mapBox .countryList .btn.SWE {top: 70px;	left: 292px;}
#map .mapBox .countryList .btn.DNK {top: 120px;	left: 216px;}
#map .mapBox .countryList .btn.POL {top: 162px;	left: 331px;}
#map .mapBox .countryList .btn.CZE {top: 195px;	left: 300px;}
#map .mapBox .countryList .btn.HUN {top: 256px;	left: 346px;}
#map .mapBox .countryList .btn.PRT {top: 360px;	left: 21px;}

/* //// ↓詳細ボックス↓ //// */
#map .mapBox .switchConts {
    position: absolute;
	width: 398px;
	height: 522px;
	top: 0;
	bottom: 0;
	right: -9px;
	margin: auto;
}
#map .mapBox .switchConts .conts {
	width: 380px;
	height: 500px;
	border: 2px solid #333;
	background: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,.4);
}
#map .mapBox .switchConts .conts .img img{
	height: 100%;
}
#map .mapBox .switchConts .conts .text {
	padding: 10px 13px 0;
}
#map .mapBox .switchConts .conts .subttl {
	font-size: 20px;
	line-height: 1.6em;
	margin-bottom: 3px;
	font-weight: bold;
}
#map .mapBox .switchConts .conts .txt {
	font-size: 14px;
	line-height: 1.5em;
}

/* //// ↓リンクボタン↓ //// */
#map .mapBox .linkBtn {
	text-align: right;
	margin-top: 10px;
}
#map .mapBox .linkBtn a {
    display: inline-block;
    color: #333;
    text-decoration: none;
	font-size: 13px;
	padding: 5px 7px;
	margin: 0 0 5px 5px;
}
#map .mapBox .linkBtn a:after {
    font-family: FontAwesome;
    content: "\f0da";
    font-size: 15px;
    margin-left: 5px;
}
#map .mapBox .linkBtn a.typeA {
	background: #efe4ca;
}
#map .mapBox .linkBtn a.typeB {
	background: #f6d8d7;
}
#map .mapBox .linkBtn a.typeC {
	background: #cbeef5;
}
#map .mapBox .linkBtn a.typeA:hover {
    color: #fff;
	background: #bc9a4d;
}
#map .mapBox .linkBtn a.typeB:hover {
    color: #fff;
	background: #d56964;
}
#map .mapBox .linkBtn a.typeC:hover {
    color: #fff;
	background: #1889a0;
}

/*---------------------------------------------
         発着地から選ぶ
---------------------------------------------*/
#dptWrap {
	color: #333;
	width: 100%;
	background-color: #f7f5f0;
	border-top: solid 1px #e0daca;
	padding-bottom: 30px;
    & h2 {
        border-top: solid 1px #fff;
        font-size: 22px;
        color: #333;
        font-weight: bold;
        text-align: center;
        padding: 20px;
    }
    & ul {
        width: 960px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        & li {
            background-color: #fff;
            border-radius: 4px;
            margin: 0 4px 7px;
            & a {
                font-size: 15px;
                display: block;
                color: inherit;
                text-decoration: none;
                border-radius: 5px;
                padding: 7px 10px 7px 15px;
                &:hover {
                    transition: all 0.6s ease;
                    background-color: #666;
                    color: #fff;
                }
                &::after {
                    content: "\f105";
                    font-family: FontAwesome;
                    padding-left: 10px;
                }
            }
        }
    }
}

/*ipad時のツアー枠*/
@media screen and (max-width: 1280px){
.tour-box .tour-price {padding: 25px 10px 0;}
}
