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

#breadcrumbs {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	padding: 5px 0;
	font-family: "Benton Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-weight: 200;	
}

#top {
	width: 100%;
	height: 540px;
	background: url(images/top-min.jpg) bottom center;
	background-size: cover;
	text-align: center;
	color: #FFF;
	padding: 150px 0 0 0;
}

#top.historical {
	background: url(images/historical-min.jpg) top center;
	padding: 120px 0 0 0;
}

#top.kusatsu {
	background: url(images/kusatsu-min.jpg) top center;
	padding: 120px 0 0 0;
}

#top.atami {
	background: url(images/atami.jpg) top center;
	padding: 120px 0 0 0;
}

#top.yamashiro {
	background: url(images/yamashiro.jpg) top center;
	padding: 120px 0 0 0;
}

#top.hakone {
	background: url(images/hakone.jpg) top center;
	padding: 120px 0 0 0;
}

#top.kinosaki {
	background: url(images/kinosaki.jpg) top center;
	padding: 120px 0 0 0;
}

#top.kurokawa {
	background: url(images/kurokawa.jpg) top center;
	padding: 120px 0 0 0;
}

#top.arima {
	background: url(images/arima.jpg) top center;
	padding: 120px 0 0 0;
}

#top.yufuin {
	background: url(images/yufuin.jpg) top center;
	padding: 120px 0 0 0;
}

#top.beppu {
	background: url(images/beppu.jpg) top center;
	padding: 120px 0 0 0;
}

#top.ocean_view {
	background: url(images/ocean_view.jpg) top center;
	padding: 120px 0 0 0;
}

#top.fuji {
	background: url(images/fuji.jpg) top center;
	padding: 120px 0 0 0;
}

#top.garden {
	background: url(images/garden.jpg) top center;
	padding: 120px 0 0 0;
}

#top h2 {
	font-family: 'Big Caslon','Baskerville','Times New Roman', serif;
	font-style: italic;
	font-size: 2em;
	text-shadow: 1px 1px 1px rgba(150, 150, 150, 1);
}

#top h1 {
	margin: 0 auto;
	max-width: 1200px;
	font-family: "Benton Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 5em;
	text-shadow: 1px 1px 1px rgba(150, 150, 150, 1);
}

.ranking_top {
	max-width: 960px;
	font-family: "Benton Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	width: 100%;
	margin: 0 auto;
}

.ranking_top.sub {
	max-width: 1260px;
	font-family: "Benton Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	width: 100%;
	margin: 0 auto;
}

.ranking_top h2 {
	color: #3b444f;
	font-size: 2.8em;
	font-weight: 100;
	line-height: 1.3;
	margin: 30px 0 10px 0;
	text-align: center;
}

#intro {
	padding: 10px 10px 30px 10px;
}

#intro p {
	padding: 0 0 10px 0;
}

.rank {
	width: 80%;
	margin: 0 auto 30px auto;
	padding: 0 0 30px 0;
	border-bottom: 1px solid #cecece;
}

.rank h3 {
	color: #3b444f;	
	font-weight: 200;
	padding: 0 0 20px 0;
}

#other_ranking h3 {
	color: #3b444f;	
	font-weight: 200;
	padding: 20px 0;
	font-size: 2em;
	text-align: center;
}

#other_ranking {
	background: #f3f3f3;
	padding: 0 0 20px 0;
}


.top_des {
	font-weight: 200;
	font-size: 1.6em;
	padding: 50px 0 50px 25px;
	max-width: 1260px;
	text-align: center;
}

.rank p {
	font-weight: 200;
	font-size: 1.2em;
	padding: 0 0 30px 25px;
}

.rank img {
	float: right;
	width: 200px;
	margin: 0 0 0 20px;
}

.ranking {
	width: 100%;
	margin: 0 auto 30px auto;
}

.right .ranking_des {
	float: right;
	width: 48%;
	padding: 2% 0 0 2%;
}

.left .ranking_des {
	float: left;
	width: 47%;
	padding: 2% 2% 0 1%;	
}

.ranking_des h3 {
	color: #3b444f;	
	font-weight: 200;
	padding: 0 0 20px 0;
}

.ranking_des p {
	font-weight: 200;
	font-size: 1.2em;
	padding: 0 0 30px 0;
}

.price {
	text-align: right;
	font-style: italic;
}

.price span {
	font-size: 1.4em;
}

.address {
	padding: 0 0 10px 0;
	font-style: italic;
	text-align: right;
	font-weight: 200;
	color: #a2a2a2;
}

.right img {
	float: left;
	width: 50%;
}

.left img {
	float: right;
	width: 50%;	
}

.btn_rank {
	margin: 20px 0;
	font-size: 1.2em;
	text-align: center;
}

.btn_rank a {
	padding: 15px 30px;
	background: #004b74;
	color: #FFF;
	font-family: "Benton Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-weight: 200;
	text-decoration: none;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px; /* future proofing */
	-khtml-border-radius: 30px; /* for old Konqueror browsers */	
}

.btn_rank a:hover {
	cursor: pointer;
	background: #32c5f3;
	text-decoration: none;
}

.slider_thumb img {
	border: 1px solid #d5d5d5;
	padding: 1px;
	width: 300px !important;
}

.slider_thumb h4 {
	text-align: center;
	padding: 5px 0;
	font-weight: 100;
}

.clear {
	clear: both;
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

/*===============================================
●For Mobile Max Width 640px
===============================================*/
@media screen and (max-width:640px){
#top {
	padding: 70px 0 0 0;
	height: 340px;
}

#top.historical,
#top.kusatsu {
	padding: 65px 10px 0 10px;
	background-size: cover;
	
}
	
#top h1 {
	font-size: 2.8em;	
}

.top_des {
	font-weight: 200;
	font-size: 1.2em;
	padding: 20px 20px 30px 20px;
	text-align: left;
}

.ranking_top h2 {
	font-size: 2.2em;
}

#top.sub h1 {
	padding: 15px 0 0 0;
	font-size: 2.4em;
}

#top.sub h2 {
	font-size: 1.4em;
}

.rank {
	width: 90%;
	padding: 0;
}

.rank h3 {
	text-align: center;
	font-weight: 100;
}

.rank p {
	padding: 0 0 20px 10px;
}

.rank img {
	float: none;
	width: 95%;
	margin: 0 auto 20px auto;
	display: block;
}

.right .ranking_des,
.left .ranking_des {
	float: none;
	width: 100%;
	padding: 20px;
}

.right img,
.left img {
	float: none;
	width: 100%;
}


}