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



/*PCでは改行しない*/
.br_sp{display: none;}

/*スマホでは改行する*/
@media screen and (max-width: 767px) {
    .br_sp{display: block;}
	.plan_box{margin: 0 10px;}
}

/*------------------nav------------------*/
.rank_nav {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-bottom: 1px solid #bdbdbd;
    font-weight: bold;
    font-size: 1.6rem;
    margin: 10px 0;
}
.rank_nav>li {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
    width: 100%;
}
.rank_nav>li>a {
	position: relative;
	display: block;
	width: 100%;
	padding: 5px 0 10px;
	text-decoration: none;
	line-height: 1.3;
	text-align: center;
	transition: .3s;
}
.rank_nav>li>a {color: #4E3127;padding: 57px 0 5px;}
.rank_nav>li>a::before {
    position: absolute;
    background-repeat: no-repeat;
    content: "";
    width: 100%;
    background-position: center;
    background-size: contain;
    height: 50px;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
}
.rank_nav>.hotel>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_hotel.png);
}
.rank_nav>.search>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_search.png);
}
.rank_nav>.theme>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_theme.png);
}
.rank_nav>.recommend>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_recommend.png);
}
.rank_nav>.area>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_area.png);
}
.rank_nav>.article>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_article.png);
}

.rank_nav>li>a:active::before {transition: .3s;}
.rank_nav>.hotel>a:active::before,.rank_nav>.hotel.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_hotel_on.png);
}
.rank_nav>.search>a:active::before,.rank_nav>.search.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_search_on.png);
}
.rank_nav>.theme>a:active::before,.rank_nav>.theme.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_theme_on.png);
}
.rank_nav>.recommend>a:active::before,.rank_nav>.recommend.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_recommend_on.png);
}
.rank_nav>.area>a:active::before,.rank_nav>.area.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_area_on.png);
}
.rank_nav>.article>a:active::before,.rank_nav>.article.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_article_on.png);
}

.rank_nav>li>a:active {
	transition: .3s;
	opacity: 1!important;
}
.rank_nav>li>a::after {
    position: absolute;
    content: "";
    bottom: 0;
    width: 100%;
    height: 0;
	left: 0;
}

/*下線*/
.rank_nav>li.active>a::after {height: 3px;}
.rank_nav>li>a:active::after {height: 3px;transition: .3s;}
.rank_nav>.hotel>a::after {background: #5674AA;}
.rank_nav>.search>a::after {background: #5674AA;}
.rank_nav>.theme>a::after {background: #5674AA;}
.rank_nav>.recommend>a::after {background: #5674AA;}
.rank_nav>.area>a::after {background: #5674AA;}
.rank_nav>.article>a::after {background: #5674AA;}


@media screen and (max-width: 767px) {
.rank_nav>li>a {
	font-size: 0.8em;
}
}



/*------------------------ ボタン ------------------------*/
.btn_01{margin-top: 1em;}
.btn_01 a {
	display: block;
	color: #fff;
	background: #627EAE;
	padding: 12px 25px 12px 12px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 6px;
	position: relative;
	width: 90%;
	margin: auto;
}
.btn_01 a::before {
	position: absolute;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	top: 50%;
	right: 15px;
	margin-top: -4px;
}
.btn_01 a:hover {
	background: #ddb601;
}
/*------------------------ 商品 ------------------------*/
.yado_box_all{padding: 0 5px;}

.base_prod .hotel li>a .img_box>.ribbon {
    background-color: #fff!important;
    color: #627EAE;
    font-size: 1.5rem!important;
    font-weight: bold;
    padding: 0px!important;
}
.txt_ul{
	border-top: dashed 1px #ccc;
	padding-top: 10px;
	margin-top: 10px;
}

.base_prod.clm3 li {
    width: 80%!important;
}

/*----画像トリミング------*/
.shortimg>li>a>.img_box>img{
	aspect-ratio: 8 / 5;
    object-fit: cover;
}

/*------------------------ h2ttl ------------------------*/
.ttl_h2 h2{
	position: relative;
	font-size: 2.6rem!important;
	font-weight: normal!important;
	color: #383838!important;
}
.ttl_h2 h2:before {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 30px);
    width: 60px;
    height: 5px;
    content: '';
    border-radius: 3px;
    background: #E7C62C;
}
.ttl_h3 h3{
	background-color: transparent!important;
	color: #5674aa!important;
	padding: 0 20px;
	font-size: 1.5em!important;
	font-weight: bold;
	
}

/*------------------------ h3ttl ------------------------*/
.article .section h3 {
    font-size: 2.0rem!important;
    border-bottom: none;
    padding: 0px 20px 0px 0;
    font-weight: normal!important;
}
.article .section h3::before {
    border-left: solid 8px #627EAE;
}

/*------------------------ バナー ------------------------*/
.areabnr_box{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 0 0 10px;
}
.areabnr{
	width: 48%;
	height: 80px;
	border: 1px solid #5b7ba4;
	text-align: center;
	margin: 2px;
}
.areabnr a{
	display: block;
	background-color: rgb(97 97 97 / 40%);
	color: #fff;
}


.spotname{
	line-height:calc( 80px );
	font-size: 2.0rem;
	font-weight: bold;
}
.area_back01{
	background:url("/content/dam/jretravel/material/tourism/hokkaido/oonumakouen_04.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -20px;
}
.area_back02{
	background:url("/content/dam/jretravel/material/tourism/aomori/oirasekeiryu.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -20px;
}
.area_back03{
	background:url("/content/dam/jretravel/material/tourism/gunma/ozekokuritukouen_01.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -10px;
}
.area_back04{
	background:url("/content/dam/jretravel/material/tourism/tokyo/odaiba_01_p.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -20px;
}
.area_back05{
	background:url("/content/dam/jretravel/material/tourism/nagano/kamikochi_03.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -15px;
}

.area_back06{
	background:url("/content/dam/jretravel/material/tourism/ishikawa/kenrokuen_02_p.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -15px;
}
.area_back07{
	background:url("/content/dam/jretravel/material/tourism/gifu/furukawa_01.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -15px;
}
.area_back08{
	background:url("/content/dam/jretravel/material/tourism/kyoto/togetsukyou_02.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -15px;
}


/*------------------------ 空間をつくる ------------------------*/
.area_box{margin: 0 8px!important;}






/* PCのみはこちら　*/
@media screen and (min-width:768px) {
	/*------------------------ ナビ ------------------------*/
	
	
.rank_nav>li>a:hover::before {transition: .3s;}
.rank_nav>.hotel>a:hover::before,.rank_nav>.hotel.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_hotel_on.png);
}
.rank_nav>.search>a:hover::before,.rank_nav>.search.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_search_on.png);
}
.rank_nav>.theme>a:hover::before,.rank_nav>.theme.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_theme_on.png);
}
.rank_nav>.recommend>a:hover::before,.rank_nav>.recommend.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_recommend_on.png);
}
.rank_nav>.area>a:hover::before,.rank_nav>.area.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_area_on.png);
}
.rank_nav>.article>a:hover::before,.rank_nav>.article.active>a::before {
	background-image: url(/content/dam/jretravel/site/page/feature/ranking/images/ic_article_on.png);
}

.rank_nav>li>a:hover {
	transition: .3s;
	opacity: 1!important;
}
.rank_nav>li>a:hover::after {height: 3px;transition: .3s;}
	
	.naviArea>ul {background-color: #fff3be;}
	
	/*------------------------ ボタン ------------------------*/
	.btn_01 {
		text-align: center;
		margin: 1em 0 0 0;
	}
	.btn_01 a {
		display: inline-block;
		width: auto;
		min-width: 360px;
	}
	/*------------------------ 商品 ------------------------*/
	.yado_box_all{padding: 0 0px;}
	
	.base_prod .hotel li>a .img_box>.ribbon {
		background-color: #627EAE!important;
		color: #fff;
		font-size: 1.4rem!important;
		padding: 2px 15px!important;
	}
	
	/*----画像トリミング------*/
.shortimg>li>a>.img_box>img{
	height: 137px;
    object-fit: cover;
}
	/*------------------------ バナー ------------------------*/
	.areabnr_box{
		display: flex;
		margin: 0px;
		flex-wrap: nowrap;
}
	.areabnr{
		width: 25%;
    	height: 100px;
	}
	.areabnr a:hover{
	display: block;
	background-color: rgb(174 174 174 / 70%);
	color: #fff;
}
	.spotname{
		line-height:calc( 100px );
		font-size: 2.6rem;
	}
	.area_back01{
	background:url("/content/dam/jretravel/material/tourism/hokkaido/oonumakouen_04.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -30px;
}
.area_back02{
	background:url("/content/dam/jretravel/material/tourism/aomori/oirasekeiryu.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -30px;
}
.area_back03{
	background:url("/content/dam/jretravel/material/tourism/gunma/ozekokuritukouen_01.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -10px;
}
.area_back04{
	background:url("/content/dam/jretravel/material/tourism/tokyo/odaiba_01_p.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -20px;
}
.area_back05{
	background:url("/content/dam/jretravel/material/tourism/nagano/kamikochi_03.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -45px;
}

.area_back06{
	background:url("/content/dam/jretravel/material/tourism/ishikawa/kenrokuen_02_p.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -45px;
}
.area_back07{
	background:url("/content/dam/jretravel/material/tourism/gifu/furukawa_01.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -40px;
}
.area_back08{
	background:url("/content/dam/jretravel/material/tourism/kyoto/togetsukyou_02.jpg");
	background-size: cover;
    background-repeat:  no-repeat;
    background-position: 0 -15px;
}
	
.base_prod.clm3 li {
    width: calc((100% - 10px * 2) / 3)!important;
}
/*------------------------ 空間をつくる ------------------------*/
.area_box{
	margin: 0 0px!important;
	}
	
}