/*************************
common
*************************/
#area{
	color: #6B6B6B;
	font-size: 14px;
	line-height: 150%;
	width: 100%;
	margin: 0;
}
#area a{
	color: #0066A6;
}
#area a:hover{
	color: #5AE1F4;
}
#area .area-contents{
	width: 96%;
	margin: 0 auto;
}
#area section h3{
	display: inline-block;
	line-height: 100%;
	padding: 0 5px;
	color: #F3981C;
	font-size: 20px;
	font-weight: bold;
	background: linear-gradient(transparent 42%, #F8D167 75%);
	margin-bottom: 20px;
}
#area section .book-button{
	margin: 5px 0;
	font-weight: bold;
	line-height: 30px;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	background: #04BFA3;
}
#area section .book-button a{
	color: #fff;
	font-size: 16px;
	display: block;
	width: 100%;
}
#area section .book-button a:hover{
	background-color: #F3981C;
	opacity: 1.0;
}
#area .seeall-button{
	width: 96%;
	margin: 20px auto 50px;;
	font-weight: bold;
	line-height: 35px;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	background: #F8D167;
}
#area .seeall-button p{
	width: 100%;
	margin: 0 auto;
}
#area .seeall-button p a{
	width: 100%;
	display: block;
	color: #fff;
	font-size: 16px;
}
#area .seeall-button p a:hover{
	background-color: #F3981C;
}
/*#area section .visual{
	width: 100%;
	height: 450px;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	display: flex;
	align-items: flex-end;
}
#area section .visual p{
	width: 1000px;
	margin: 0 auto 10px;
	color: #fff;
	font-size: 45px;
	text-shadow: 0 3px 5px #999;
	text-align: right;
}*/
/*************************
ぱんくず
*************************/
.crumb{
	width:100%;
	margin: 0 auto;
	position: relative;
	padding: 3px 0;
	border: none;
}
.crumb .crumb-item{
	margin: 0;
	padding: 0;
	background: none;
	color: #CEC8C8;
	display: inline-block;
	float: none;
}
.crumb li a{
	padding: 0;
	background: none;
}

/*************************
keyvisual
*************************/
#area .keyvisual{
	width:100%;
	height: 400px;
	margin:0 0 30px;
	background-repeat: no-repeat;
	background-size: cover;
}
.area-okinawa .keyvisual{
	background-image: url(/ib/img/area/okinawa/titleimg00.jpg);
	background-position: 50% 70%;
}
.area-osaka .keyvisual{
	background-image: url(/ib/img/area/osaka/titleimg01.jpg);
	background-position: 50% 70%;
}
.area-kyoto .keyvisual{
	background-image: url(/ib/img/area/kyoto/titleimg00.jpg);
	background-position: 50% 70%;
}
.area-hokkaido .keyvisual{
	background-image: url(/ib/img/area/hokkaido/titleimg00.jpg);
	background-position: 50% 70%;
}
.area-tokyo .keyvisual{
	background-image: url(/ib/img/area/tokyo/titleimg00.jpg);
	background-position: 50% 70%;
}
.area-hiroshima .keyvisual{
	background-image: url(/ib/img/area/hiroshima/titleimg00.jpg);
	background-position: 50% 70%;
}
#area .keyvisual .area-contents{
	height: 400px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-end;
}
/*title*/
#area .keyvisual h2{
	color: #fff;
	text-align: center;
	font-size: 18px;
	line-height: 140%;
	text-shadow: 0px 3px 3px #707070;
	margin-bottom: 10px;
}
#area .keyvisual h2 span{
	font-size: 25px;
	display: block;
}
/*search*/
#area .keyvisual #search{
	width: 100%;
	margin: 0 auto;
}
#area .keyvisual #search form{
	color: #0066A6;
	background: rgba(237, 237, 237, 0.6);
	font-weight: bold;
	text-align: center;
}
#area .btn-browse{
	width: 100%;
	display: block;
    font-family: sans-serif;
    font-size: 16px;
	font-weight: bold;
    line-height: 1.6;
    padding: 5px 18px;
    text-align: center;
    background: #F8D167;
    margin: 10px 0;
}
#area .btn-browse a{
	display: block;
	text-decoration: none;
	color: #fff;
}
/*pagenavi*/
#area .keyvisual .page-navi{
	width: 100%;
}
#area .keyvisual .page-navi ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#area .keyvisual .page-navi ul li{
	position: relative;
	width: 32%;
	margin-bottom: 10px;
}
#area .keyvisual .page-navi ul li a{
	display: block;
	color: #fff;
	background: #0083D5;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	padding: 5px 0 15px;
}
#area .keyvisual .page-navi ul li a::after{
	content: "";
	width: 6px;
	height: 6px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	position: absolute;
	bottom: 20%;
	left: 50%;
	margin-left: -3px;
}
#area .keyvisual .page-navi ul li a:hover{
opacity: 0.6;
}
/*************************
map
*************************/
#area #map{
	margin-bottom: 20px;
}
#area #map .map-img{
	position: relative
}
#area #map .map-img li{
	position: absolute;
}

/*************************
spot
*************************/
#area #spot{
	margin-bottom: 30px;
}
#area #spot .spot-list{
	width: 100%;
}
#area #spot .anchor{
	padding-top: 70px;
	margin-top: -70px;
}
#area #spot .spot-list ul{
	margin-bottom: 20px;
	border-bottom: 1px dotted #ccc;
}
#area #spot .spot-list ul li{
	margin-bottom: 5px;
}
#area #spot .spot-list ul img{
	width: 50%;
	float: left;
	margin: 0 10px 5px 0;
}
#area #spot .spot-list ul h4{
	color: #0066A6;
	font-size: 16px;
	font-weight: bold;
}
#area #spot .spot-list ul h5{
	color: #04BFA3;
	font-weight: bold;
	margin-top: 10px;
}
#area #spot .spot-list ul p{
	min-height: 100px;
}
#area #spot .spot-list ul h5 + p{
	min-height: 0;
}
#area.area-kyoto #spot .spot-list ul p{
	min-height: inherit;
}
#area #spot .spot-list ul .book-button{
	width: 100%;
	margin: 10px auto;
	clear: both;
}
/*************************
seasonal recommend
*************************/
#area #seasonal{
	padding-bottom: 20px;
}
/*.area-okinawa #seasonal{
	background-color: #E5F8F6;
	background-image: url(/ib/img/area/okinawa/bg-blue01.svg);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: 50% 70%;
}*/
#area #seasonal h3 {
    height: 150px;
    background-size: cover;
    background-position: 50% 60%;
    color: #fff;
    text-align: right;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    text-shadow: 2px 2px 4px #333;
}
 .area-okinawa #seasonal h3{
    background-image: url(/ib/img/area/okinawa/titleimg01.jpg);
}
 .area-osaka #seasonal h3{
    background-image: url(/ib/img/area/osaka/titleimg00.jpg);
}
 .area-kyoto #seasonal h3{
    background-image: url(/ib/img/area/kyoto/titleimg01.jpg);
}
 .area-hokkaido #seasonal h3{
    background-image: url(/ib/img/area/hokkaido/titleimg01.jpg);
}
 .area-tokyo #seasonal h3{
    background-image: url(/ib/img/area/tokyo/titleimg01.jpg);
}
 .area-hiroshima #seasonal h3{
    background-image: url(/ib/img/area/hiroshima/titleimg01.jpg);
}
#area #seasonal h4{
	color: #04BFA3;
	font-size: 20px;
	font-weight: bold;
	padding-left: 2%;
}
#area #seasonal .jan-mar,
#area #seasonal .apr-jun{
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
}
.area-okinawa #seasonal .jan-mar{
	background-image: url(/ib/img/area/okinawa/bg-blue01-sp.svg);
}
.area-okinawa #seasonal .apr-jun{
	background-image: url(/ib/img/area/okinawa/bg-blue02-sp.svg);
}
.area-osaka #seasonal .jan-mar,
.area-kyoto #seasonal .jan-mar,
.area-tokyo #seasonal .jan-mar,
.area-hiroshima #seasonal .jan-mar{
	background-image: url(/ib/img/area/osaka/bg-orange01-sp.svg);
}
.area-osaka #seasonal .apr-jun,
.area-kyoto #seasonal .apr-jun,
.area-tokyo #seasonal .apr-jun,
.area-hiroshima #seasonal .apr-jun{
	background-image: url(/ib/img/area/osaka/bg-orange02-sp.svg);
}
.area-hokkaido #seasonal .jan-mar{
	background-image: url(/ib/img/area/hokkaido/bg-green01-sp.svg);
}
.area-hokkaido #seasonal .apr-jun{
	background-image: url(/ib/img/area/hokkaido/bg-green02-sp.svg);
}
#area #seasonal .point{
	margin-bottom: 10px;
}
#area #seasonal .point ul{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px;
	border-bottom: 1px #ccc dotted;
	margin-bottom: 10px;
}
#area #seasonal .point ul .image{
	width: 9%;
}
#area #seasonal .point ul .text{
	width: 90%;
	padding: 0;
}
#area #seasonal .point ul span{
	display: block;
	font-weight: bold;
	color: #0066A6;
}
#area #seasonal .card{
	padding: 5px;
	background: #fff;
	box-shadow: 3px 3px 5px #999;
	width: 94%;
	margin: 0 auto 30px;
	min-height: 90px;
}
#area #seasonal .card img{
	width: 180px;
	height: auto;
	float: left;
	margin: 0 10px 5px 0;
}
#area #seasonal .card ul{
	/*width: 60%;*/
}
#area #seasonal .card ul .label{
	background: #5AE1F4;
	color: #fff;
	font-weight: bold;
	padding: 5px;
}
#area #seasonal .card ul span{
	display: block;
	font-weight: bold;
	font-size: 18px;
	color: #0066A6;
}
#area #seasonal .card ul .commingsoon{
	text-align: right;
}
#area #seasonal .card ul .commingsoon span{
	color: #fff;
	background: #CEC8C8;
	font-size: 20px;
	font-weight: bold;
	padding: 5px 10px;
	display: inline-block;
	margin-top: 5px;
}
#area #seasonal .card ul .tourprice{
	text-align: right;
}
#area #seasonal .card ul .tourprice a{
	color: #fff;
	background: #F3981C;
	font-size: 16px;
	font-weight: normal;
	padding: 5px 20px;
	display: inline-block;
	cursor: pointer;
	margin-top: 5px;
}
#area #seasonal .card ul .tourprice a:hover{
	background:#F8D167 ;
	opacity: 1.0;
}
#area #seasonal .card ul .tourprice span{
	color: #fff;
	font-size: 25px;
	font-weight: bold;
	display: inline;
}
/*search*/
#area #search{
	width: 96%;
	margin: 0 auto 10px;
}
#area #search form{
	color: #fff;
	background: #0066A6;
	font-weight: bold;
	padding: 5px;
}
#area #search form dl{
	padding: 0;
}
#area #search form dt,
#area #search form dd{
	border: none;
}
#area #search form dd{
	display: flex;
	padding: 5px 0;
}
#area #search form dd label{
	margin:0 3px;
}
#area #search input[type="text"]{
	width: 200px;
}
#area #search .btn-orange{
	font-size: 16px;
	width: 100%;
	display: inline-block;
	background: #04BFA3;
	font-weight: bold;
	margin: 10px 0 0;
}
#area #search .btn:hover{
	background: #F3981C;
}
#area .area-search .btn-browse{
	display: inline-block;
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.6;
    padding: 5px 18px;
    text-align: center;
    background: #F8D167;
    margin: 5px 10px;
}
#area .area-search .btn-browse a{
	display: block;
	text-decoration: none;
	color: #fff;
}
#area .area-search .btn-browse:hover{
	background: #F3981C;
}
/*************************
about
*************************/
#area #about{
	margin:30px auto;
}
/*.area-okinawa #about{
	background-image: url(/ib/img/area/okinawa/bg-blue02.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 450px;
}*/
#area #about h3 {
    height: 150px;
    background-size: cover;
    background-position: 50% 60%;
    color: #fff;
    text-align: right;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    text-shadow: 2px 2px 4px #333;
}
 .area-okinawa #about h3{
    background-image: url(/ib/img/area/okinawa/titleimg02.jpg);
}
 .area-osaka #about h3{
    background-image: url(/ib/img/area/osaka/titleimg02.jpg);
}
 .area-kyoto #about h3{
    background-image: url(/ib/img/area/kyoto/titleimg02.jpg);
}
 .area-hokkaido #about h3{
    background-image: url(/ib/img/area/hokkaido/titleimg02.jpg);
}
 .area-tokyo #about h3{
    background-image: url(/ib/img/area/tokyo/titleimg02.jpg);
}
 .area-hiroshima #about h3{
    background-image: url(/ib/img/area/hiroshima/titleimg02.jpg);
}
#area #about h4{
	color: #04BFA3;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 5px;
}
#area #about .abouttxt{
	margin: 10px 0 30px;
}
#area #about .aboutmust{
	margin-bottom: 20px;
}
#area #about .aboutmust ul{
	background: #fff;
	border: #E4E2E2 1px solid;
	border-radius: 5px;
	padding: 10px 5px;
	margin-bottom: 10px;
}
#area #about .aboutmust ul.link{
	background: #FFF7E2;
	border: none;
	box-shadow: 2px 2px 0 #FFDB7A;
}
#area #about .aboutmust ul img{
	border-radius: 50%;
	margin-right: 5px;
	float: left;
	width: 80px;
}
#area #about .aboutmust ul span{
	font-size: 18px;
	font-weight: bold;
	color: #0066A6;
	display: block;
}
#area #about .aboutmust ul li{
	position: relative;
}
#area #about .aboutmust ul a{
	display: block;
	border-left: #F3981C 8px solid;
	background: #F8D167;
	padding: 5px 10px;
	color: #F3981C;
	font-weight: bold;
	width: 90px;
	clear: both;
	margin: 5px 0 0 auto;
}
#area #about .aboutmust ul a:hover{
	background: #F3981C;
	color: #fff;
}
/*************************
category
*************************/
#area #category{
	margin-bottom: 30px;
}
#area #category ul li{
	display: inline-block;
	border:1px solid #DBD8D8;
	border-radius: 30px;
	padding: 5px 20px;
	margin: 5px;
}
#area #category ul li a{
	display: inline-block;
	font-size: 16px;
}
/*************************
related
*************************/
#area #related{
	margin-bottom: 30px;
}
#area #related div{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#area #related ul{
	margin: 0 0 10px;
	position: relative;
	width: 49%;
}
#area #related ul li p{
	position: absolute;
	top:20%;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	width: 100%;
	text-align: center;
	text-shadow: 2px 2px 6px #666;
}
#area #related ul li span {
    position: absolute;
    top: 0;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    width: 100%;
    text-align: center;
    text-shadow: 2px 2px 6px #666;
    background: rgba(0, 102, 166, 0.53);
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#area #related ul a:hover{
	background: #0083D5;
	opacity: 0.6;
}