@charset "utf-8";

.page-area .area-center h3{
	/*font-family:'07logotypegothic7regular';*/
	font-size:2.4rem;
	font-weight:700;
	text-align: center;
}

.page-area .area-center h4{
	margin:15px 0;
	font-size:1.6rem;
	font-weight:500;
	letter-spacing:0;
}

.page-area .area-center .intro-map{
	position:relative;
	margin-top:50px;
	text-align:center;
}

.page-area .area-intro-box .intro-photo{
    display:block;
    position:relative;
	height:150px;
    color:#fff;
    text-align:center;
    overflow:hidden;
}

.page-area .area-intro-box .intro-photo h2{
	position:relative;
	z-index:4;
	width:100%;
	font-size:2.2rem;
	letter-spacing:.2rem;
	font-weight:700;
	margin-bottom:0;
}

.page-area .area-intro-box .intro-bg{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

.area-intro-box.intro-tajima .intro-bg{background-image:url(../img/area/area-tajima.jpg);}
.area-intro-box.intro-harima .intro-bg{background-image:url(../img/area/area-harima.jpg);}
.area-intro-box.intro-awaji .intro-bg{background-image:url(../img/area/area-awaji.jpg);}
.area-intro-box.intro-tamba .intro-bg{background-image:url(../img/area/area-tamba.jpg);}
.area-intro-box.intro-hanshin .intro-bg{background-image:url(../img/area/area-hanshin.jpg);}
.area-intro-box.intro-kobe .intro-bg{background-image:url(../img/area/area-kobe.jpg);}

.area-intro-box.intro-tajima .intro-info{border-top:3px solid #3c5c88;}
.area-intro-box.intro-harima .intro-info{border-top:3px solid #43A1BF;}
.area-intro-box.intro-awaji .intro-info{border-top:3px solid #D54939;}
.area-intro-box.intro-tamba .intro-info{border-top:3px solid #95A524;}
.area-intro-box.intro-hanshin .intro-info{border-top:3px solid #FDC95B;}
.area-intro-box.intro-kobe .intro-info{border-top:3px solid #F28D3C;}

.area-intro-box .intro-info{
	padding:15px;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
	border-left:1px solid #ddd;
	text-align:center;
}

.area-intro-box .intro-info dt,
.area-intro-box .intro-info dd{
	font-size:1.3rem;	
	text-align:left;
}

.area-intro-box .intro-info dt{
	color:#999;
	font-size:1.3rem;	
}

.area-intro-box .intro-info p{
	margin-top:10px;
	font-size:1.2rem;
	text-align:left;
}

.area-intro-box .intro-info .btn{
	margin-top:10px;
	padding:4px 40px 4px 30px;
	font-size:1.2rem;
}

.area-intro-box .intro-inner{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	z-index:10;
	background-color:rgba(0,0,0,.3);
}

@media screen and (min-width:1025px) {

.page-area .wrp-area{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
}

.page-area .area-left,
.page-area .area-right{
	flex:1;
}

.page-area .area-center{
	width:540px;
	margin:0 40px;
}

.page-area .area-center{
	order:2;
}

.page-area .area-left{
	order:1;
}

.page-area .area-right{
	order:3;
}

.page-area .area-left .area-intro-box:nth-child(n+2),
.page-area .area-right .area-intro-box:nth-child(n+2){
	margin-top:40px;
}

}

@media screen and (min-width:768px) and (max-width:1024px) {

.page-area .area-center{
	order:1;
}

.page-area .area-left{
	order:2;
	margin-top:25px;
}

.page-area .area-right{
	order:3;
	margin-top:25px;
}

.page-area .area-intro-box{
	float:left;
	width:32%;
	margin-right:2%;
}

.page-area .area-intro-box:last-child{
	margin-right:0;
}

}

@media screen and (max-width:767px) {

.page-area .area-intro-box{
	margin-top:25px;
}

.page-area .area-intro-box .intro-photo{
	height:120px;
}

.page-area .area-intro-box .intro-photo h2{
	font-size:1.8rem;
}

}


/**/


@media screen and (min-width:768px) {

.area-dtl{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
}

.area-dtl .area-dtl-left{
	flex:1;
}

.area-dtl .area-dtl-right{
	width:270px;
	margin-left:60px;
}

}

@media screen and (max-width:767px) {

.area-dtl .area-dtl-right{
	margin-top:50px;
}

}

.area-dtl .area-ttl{
	border-bottom:1px dotted #ccc;
	padding-bottom:10px;
}

.area-dtl .area-ttl h2{
	padding-left:15px;
	font-size:2.2rem;
	font-weight:700;
}

@media screen and (max-width:767px) {

.area-dtl .area-ttl h2{
	padding-left:10px;
	font-size:1.5rem;
}

}

.area-dtl .area-ttl-kobe{border-left:5px solid #1b3f5f;}
.area-dtl .area-ttl-hanshin{border-left:5px solid #EEAE79;}
.area-dtl .area-ttl-harima{border-left:5px solid #43A1BF;}
.area-dtl .area-ttl-tajima{border-left:5px solid #1B3F5F;}
.area-dtl .area-ttl-tamba{border-left:5px solid #95A524;}
.area-dtl .area-ttl-awaji{border-left:5px solid #D54939;}

.area-city{
	margin-top:15px;
	font-size:1.6rem;
}

.area-city dt{
	float:left;
	clear:left;
}

.area-city dd{
	padding-left:70px;
}

@media screen and (max-width:767px) {

.area-city{
	font-size:1.3rem;
}

.area-city dd{
	padding-left:57px;
}

}


.area-dtl-right .area-info-inner{
    background-image:url(../img/area/map-all.png);
    background-repeat:no-repeat;
    background-size:contain;
}


.area-dtl-right .area-info-ttl,
.area-dtl-right .area-rank-ttl{
	margin-top:10px;
	margin-bottom:20px;
	padding:10px 0 10px 25px;
	border-bottom:1px solid #eee;
	line-height:1;
	background-size:20px 18px;
}

.area-dtl-right .area-info-ttl{
	background:url(../img/common/icn-hyogo.png) no-repeat 0 50%;
}

.area-dtl-right .area-rank-ttl{
	background:url(../img/common/icn-spot-rank.png) no-repeat 0 50%;
}

.area-rank{
	margin-bottom:50px;
}

@media screen and (max-width:767px) {


.area-rank{
	margin-bottom:30px;
}

}

.area-rank li:nth-child(n+2){
	margin-top:15px;
	padding-top:15px;
	border-top:1px solid #eee;
}

.area-rank li dt::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	background-repeat:no-repeat;
	background-size:contain;
	width:30px;
	height:30px;
}

.area-rank li:nth-child(1) dt::before{background-image:url(../img/common/icn-rank1.svg);}
.area-rank li:nth-child(2) dt::before{background-image:url(../img/common/icn-rank2.svg);}
.area-rank li:nth-child(3) dt::before{background-image:url(../img/common/icn-rank3.svg);}
.area-rank li:nth-child(4) dt::before{background-image:url(../img/common/icn-rank4.svg);}
.area-rank li:nth-child(5) dt::before{background-image:url(../img/common/icn-rank5.svg);}

.area-rank li a:hover dt img{
	opacity:1;
}

.area-rank dl{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
}

.area-rank dl dt{
	position:relative;
	width:90px;
}

.area-rank dl dd{
	flex:1;
	margin-left:10px;
	font-size:1.3rem;
	line-height:1.4;
	letter-spacing:0;
}

.area-rank dl dt img{
	width:90px;
	height:90px;
	object-fit:cover;
	object-position:50% 50%;
	font-family:'object-fit: cover; object-position: 50% 50%;';
	-webkit-transition:all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition:all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition:all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
	-webkit-transition-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1)
}

.area-rank dl dd em{
	display:block;
	width:70px;
	border-radius:2px;
	color:#fff;
	font-family:'Lato', sans-serif;
	font-size:1rem;
	font-style:normal;
	font-weight:700;
	letter-spacing:.1em;
	text-align:center;
}


.area-rank dl dd .area1{background-color:#1b3f5f;}
.area-rank dl dd .area2{background-color:#EEAE79;}
.area-rank dl dd .area3{background-color:#43A1BF;}
.area-rank dl dd .area4{background-color:#1B3F5F;}
.area-rank dl dd .area5{background-color:#95A524;}
.area-rank dl dd .area6{background-color:#D54939;}


.area-rank dl dd p{
	margin-top:5px;
	white-space:nowrap;
	overflow:hidden;
	-o-text-overflow:ellipsis;
	text-overflow:ellipsis;
}

.area-rank dl dd span{
	display:block;
	margin-top:5px;
	font-size:1.1rem;
}

.wrp-area-slider{
	margin-top:20px;
}

.area-slider li.slick-slide img{
	width:100%;
	height:620px;
	object-position:50% 50%;
	object-fit:cover;
	font-family:'object-fit: cover; object-position: 50% 50%;';
}

.area-cat-box .area-slider li.slick-slide img{
	width:100%;
	height:400px;
	object-position:50% 50%;
	object-fit:cover;
	font-family:'object-fit: cover; object-position: 50% 50%;';
}


@media screen and (max-width:960px) {

.area-slider li.slick-slide img{
	height:300px;
}

}

@media screen and (max-width:767px) {

.area-slider li.slick-slide img{
	height:400px;
}

.area-cat-box .area-slider li.slick-slide img{
	height:250px;
}

}

@media screen and (max-width:480px) {

.area-slider li.slick-slide img{
	height:250px;
}

}

.area-slider li{
	position:relative;
}

.area-slider li p{
	display:block;
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	padding:10px 5px;
	background:rgba(0,0,0,.8);
	z-index:1;
	font-size:1.2rem;
	color:#fff;
	text-align:center;
}


@media screen and (max-width:767px) {

.area-slider li p{
	padding:5px;
	font-size:1.1rem;
	text-align:left;
}

}

.area-slider .slick-dots{
	position:relative;
	bottom:-10px;
	text-align:center;
}

.area-slider .slick-dots li{
	position:relative;
    display:inline-block;
    width:5px;
    height:5px;
    margin:0 5px;
    padding:0;
    cursor:pointer;
	background:transparent;
}

.area-slider .slick-dots li button{
    font-size:0;
    line-height:0;
    display:block;
    width:5px !important;
    height:5px !important;
	padding:0;
    cursor:pointer;
	background-color:#ccc;
    outline:none;
	border-radius:50%;
}

.area-slider .slick-dots li button:hover,
.area-slider .slick-dots li button:focus{
    outline:none;
}

.area-slider .slick-dots li button:hover:before,
.area-slider .slick-dots li button:focus:before{
    opacity:1;
}

.area-slider .slick-dots li button:before{
    position:absolute;
    top:0;
    left:0;
    width:5px;
    height:5px;
	border-radius:50%;
    content:"";
    text-align:center;
	background:transparent;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.area-slider .slick-dots li.slick-active button:before{
    opacity:1;
    background:#114564;
	width:100%;
	height:100%;
}


.page-area .area-txt .lead{
	font-size:2rem;
	font-weight:700;
}

.page-area .area-txt .lead + p{
	margin-top:15px;
}

.area-dtl-ttl{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	margin-top:50px;
	padding:15px 0 15px 35px;
	background-repeat:no-repeat;
	border-bottom:1px dotted #ccc;
	font-size:1.8rem;
	font-weight:700;
	letter-spacing:.2em;
}

@media screen and (max-width:767px) {


.page-area .area-txt .lead,
.area-dtl-ttl{
	font-size:1.6rem;
	letter-spacing:0;
}

}

.area-dtl-ttl.area-spot-ttl{
	background:url(../img/common/icn-spot-related.png) no-repeat 0 50%;
}

.area-dtl-ttl.area-course-ttl{
	background:url(../img/common/icn-course.png) no-repeat 0 50%;
}


.area-dtl-ttl.area-guide-ttl{
	background:url(../img/common/icn-guide.png) no-repeat 0 50%;
}

.area-dtl-ttl.area-pr-ttl{
	padding-left:0;
	font-size:1.4rem;
}

.page-area .area-spot-list,
.page-area .area-course-list{
	margin-top:25px;
}




.page-area .area-spot-list div{
	padding-top:8px;
	background-color:#fff;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
	border-left:1px solid #ddd;
}

.page-area .area-spot-list div p{
	padding-right:10px;
	padding-left:10px;
	font-weight:700;
}

.page-area .area-spot-list dl{
	margin:10px;
	padding-left:5em;
	font-size:1.2rem;
}

.page-area .area-spot-list dt,
.page-area .area-spot-list dd{
	float:left;
	margin:0;
	line-height:1;
	text-align:left;
}

.page-area .area-spot-list dt{
	clear:left;
	float:left;
}

.page-area .area-spot-list dd{
	position:relative;
	width:100%;
	white-space:nowrap;
	overflow:hidden;
	-o-text-overflow:ellipsis;
	text-overflow:ellipsis;
}

.page-area .area-spot-list dd::after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	margin-top:auto;
	margin-bottom:auto;
	border-right:1px dotted #868686;
	width:1px;
	height:10px;
}

.page-area .area-spot-list dd span{
	padding-left:10px;
}

.page-area .area-spot-list .area1 p{border-left:5px solid #1b3f5f;}
.page-area .area-spot-list .area2 p{border-left:5px solid #EEAE79;}
.page-area .area-spot-list .area3 p{border-left:5px solid #43A1BF;}
.page-area .area-spot-list .area4 p{border-left:5px solid #1B3F5F;}
.page-area .area-spot-list .area5 p{border-left:5px solid #95A524;}
.page-area .area-spot-list .area6 p{border-left:5px solid #D54939;}


@media screen and (min-width:768px) {

.page-area .area-spot-list div p{
	font-size:1.4rem;
}

.page-area .area-spot-list dt,
.page-area .area-spot-list dd{
	padding:7px 0;
}

.page-area .area-spot-list dt{
	margin-left:-5em;
}

}

@media screen and (max-width:767px) {

.page-area .area-spot-list dt,
.page-area .area-spot-list dd{
	padding:4px 0 0;
	font-size:1.1rem;
}

.page-area .area-spot-list dl{
	margin:6px 5px 10px;
    padding-left:5em;
}

.page-area .area-spot-list dt{
	margin-left:-5em;
}

.page-area .area-spot-list dt::before{
	margin-right:0;
}

.page-area .area-spot-list dd{
	font-size:1.2rem;
}

.page-area .area-spot-list dd::after{
	top:3px;
	height:8px;
}

}













.page-area .area-course-list div{
	padding-top:8px;
	background-color:#fff;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
	border-left:1px solid #ddd;
}

.page-area .area-course-list div p{
	padding-right:10px;
	padding-left:10px;
	font-weight:700;
}

.page-area .area-course-list dl{
	margin:10px;
	padding-left:5em;
	font-size:1.2rem;
}

.page-area .area-course-list dt,
.page-area .area-course-list dd{
	float:left;
	margin:0;
	line-height:1;
	text-align:left;
}

.page-area .area-course-list dt{
	clear:left;
	float:left;
}

.page-area .area-course-list dd{
	position:relative;
	width:100%;
	white-space:nowrap;
	overflow:hidden;
	-o-text-overflow:ellipsis;
	text-overflow:ellipsis;
}

.page-area .area-course-list dd::after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	margin-top:auto;
	margin-bottom:auto;
	border-right:1px dotted #868686;
	width:1px;
	height:10px;
}

.page-area .area-course-list dd span{
	padding-left:10px;
}

@media screen and (min-width:768px) {

.page-area .area-course-list div p{
	font-size:1.4rem;
}

.page-area .area-course-list dt,
.page-area .area-course-list dd{
	padding:7px 0;
}

.page-area .area-course-list dt{
	margin-left:-5em;
}

}

@media screen and (max-width:767px) {

.page-area .area-course-list dt,
.page-area .area-course-list dd{
	padding:4px 0 0;
	font-size:1.1rem;
}

.page-area .area-course-list dl{
	margin:6px 5px 10px;
    padding-left:5em;
}

.page-area .area-course-list dt{
	margin-left:-5em;
}

.page-area .area-course-list dt::before{
	margin-right:0;
}

.page-area .area-course-list dd{
	font-size:1.2rem;
}

.page-area .area-course-list dd::after{
	top:3px;
	height:8px;
}

}


.page-area .area-guide-box{
	margin-top:25px;
}

.page-area .area-guide-box h4{
	margin-top:25px;
	padding:10px;
	background-color:#f2f2f2;
	border:1px solid #ddd;
	font-weight:700;
}

.page-area .area-guide-box span{
	padding-left:20px;
	font-size:1.2rem;
	font-weight:normal;
	display:none;
}

.page-area .area-guide-box ul{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	align-items:center;
	border-left:1px solid #ddd;
}


.page-area .area-guide-box li{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	width:33.33333333%;
	padding:10px;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
	font-size:1.3rem;
}

@media screen and (max-width:767px) {

.page-area .area-guide-box li{
	width:100%;
	font-size:1.3rem;
}

}


.page-area .area-pr-box ul{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	margin-top:15px;
}

.page-area .area-pr-box li{
	margin-top:10px;
	padding:4px;
}

@media screen and (max-width:767px) {

.page-area .area-pr-box li{
	width:50%;
	margin-top:10px;
	padding:4px;
}

}