@charset "utf-8";

/*
************************************************************************
* ロケーション一覧
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
* ランキング
************************************************************************
*/
.rank-title{
	font-size: 1.8rem;
	font-weight: bold;
}
.rank-title:before{
	content:"";
	display: inline-block;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
}
.wasou .rank-title:before{
	background-image:url(../../../_img/icon/feature-01.svg);
	width: 2.6em;
	height: 2.4em;
	margin-left: -10px;
}
.yousou .rank-title:before{
	background-image:url(../../../_img/icon/feature-10.svg);
	width: 2.6em;
	height: 2.4em;
	margin-left: -10px;
}
.wayou .rank-title:before{
	background-image: url(../../../_img/icon/feature-14.svg);
	width: 2.7em;
	height: 2.4em;
	margin-left: 3px;
	margin-right: 7px;
}
.rank-list{
	display:flex;
	/*justify-content: space-between;*/
	margin-bottom: 30px;
}
.rank-list .rank-item{
	list-style: none;
    margin-left: 0;
    /* width: calc(99%/3); */
    border-right: 1px solid #e3e3e3;
    font-size: 1.9rem;
    font-weight: bold;
    padding: 0.2em 1.3em;
    margin-bottom: 10px;
}
.rank-list .rank-item:before{
	display: inline-block;
	width: 34px;
	height: 34px;
	text-align: center;
	line-height: 1.8;
	margin-right: .7em;
	border-radius: 50%;
	color: #fff;
}
.car-exp {
}
.car-exp p{
	border: 1px #aaa solid;
	border-radius: 20px;
	padding: 1.3em 3em;
}
/*.rank-list .rank-item.rank1:before{
	content: "1";
	background: #D2BC4A;
}
.rank-list .rank-item.rank2:before{
	content: "2";
	background: #8c9ca1;
}
.rank-list .rank-item.rank3:before{
	content: "3";
	background: #C67A48;
}*/
.rank-list .rank-item.spring:before{
	content: "春";
	background: #F29DA8;
}
.rank-list .rank-item.summer:before{
	content: "夏";
	background: #b6d524;
}
.rank-list .rank-item.autumn:before{
	content: "秋";
	background: #f26229;
}
.rank-list .rank-item.winter:before{
	content: "冬";
	background: #24b8d5;
}

/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
	.rank-list > .rank-list-item
	{
		width:calc(33.3333% - 2em);
	}
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	.rank-title {
		font-size: 3rem;
		padding:5px 0;
	}
	.rank.wasou,.rank.yousou{
		width: 50%;
		margin-bottom:20px;
	}
	.rank.wasou {
		float: left;
	}
	.rank.yousou {
		float: right;
	}
	.rank.wayou{
		margin-bottom:30px;
	}
	.rank-list{
		display:inline;
	}
	.rank-list .rank-item{
		width: 100%;
		border: 0;
		font-size: 2.5rem;
		font-weight: normal;
		padding: 0;
	}
	.rank-list .rank-item:before{
		width: 19px;
		height: 19px;
		line-height: 1.65;
	}
	.car-exp p {
		border-radius: 15px;
		padding: 1.5em 2em;
	}
}

/*
************************************************************************
* おすすめシーズン
************************************************************************
*/
.usage-guide
{
	/*margin:0;*/
	padding:0;
	list-style:none;
	
	display:flex;
	/*flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center ;*/
	align-items:center ;
	align-content:stretch;
	
	margin: 30px 0 50px;
}
.usage-guide .label
{
	margin:0;
	/*padding:0;*/
	
	font-size:1.6rem;
	line-height:1;
	
	padding: 5px 15px 5px 0;
	
	border-right:1px solid #322e2d;
}
.usage-guide .guide
{
	margin:0;
	padding:0;
	
	font-size:1.6rem;
	line-height:1;
	
	margin-left:25px;
}
.usage-guide .guide > img
{
	display:inline-block;
	
	height:18px;
	width:auto;
	
	margin-top:-3px;
	margin-right:0.25em;
}
@media screen and (max-width: 750px) {
	.usage-guide
	{
		margin: -5px 0 40px
	}
	.usage-guide .label
	{
		margin:0;
		/*padding:0;*/
		
		font-size:2.2rem;
		line-height:1;
		
		padding:2vw 3.3vw 2vw 0;
		
		border-right:1px solid #322e2d;
	}
	.usage-guide .guide
	{
		margin:0;
		padding:0;
		
		font-size:2.2rem;
		line-height:1;
		
		margin-left:3.3vw;
	}
	.usage-guide .guide > img
	{
		display:inline-block;
		
		height:4vw;
		width:auto;
		
		margin-top:-0.4vw;
		margin-right:0.25em;
	}
}

/*
************************************************************************
* ロケーション一覧
************************************************************************
*/
.location-title .main
{
	font-size:2.2rem;
	font-weight:bold;
	line-height:1.2;
}
.location-list
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	
	margin:-1em;
}
.location-list > .location-list-item
{
	width:calc(25% - 2em);
	margin:1em;
}
.location-list > .location-list-item:hover
{
	text-decoration:none;
}
.location-list > .location-list-item .location-usage
{
	display:block;
	position:absolute;
	bottom:100%;
	right:0;
}
.location-list > .location-list-item .location-usage img
{
	display:none;
	height:14px;
	width:auto;
}
.location-list > .location-list-item .location-usage.sakura img.sakura,
.location-list > .location-list-item .location-usage.green img.green,
.location-list > .location-list-item .location-usage.momiji img.momiji{
	display:inline-block;
}
.location-list > .location-list-item .image
{
	border-radius:0.5em;
	overflow:hidden;
}
.location-list > .location-list-item .image.carfree:after
{
	content:"";
	position:absolute;
	right:5px;
	top:5px;
	
	width:30px;
	height:30px;
	border-radius: 100%;
	
	background-color: #fff;
	background-image:url("../../../_img/icon/car.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px;
}
.location-list > .location-list-item .image .price
{
	position:absolute;
	bottom:0;
	right:0;
	
	border-top-left-radius:0.5em;
	line-height:1;
	
	background-color:#000000;
	color:#FFFFFF;
	
	padding:0.3em 0.4em;
}
.location-list > .location-list-item .image .price > span
{
	font-size:1.6rem;
	font-weight:normal;
	line-height:1;
}
.location-list > .location-list-item .image .price .yen
{
	font-size:1.2rem;
	font-weight:normal;
	line-height:1;
}
.location-list > .location-list-item .title
{
	margin-top:1.0em;
	line-height:1;
}
.location-list > .location-list-item .tag {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin-top: 7px;
	margin-bottom: 10px;
}
.location-list > .location-list-item .tag li{
	margin-left: 0;
	display: block;
	border: 1px #aaa solid;
	color: #777;
	font-size: 0.8em;
	line-height: 1.4;
	padding: 0 3px;
	margin-right: 0.5em;
	margin-bottom: 0.3em;
}
.location-list > .location-list-item .price
{
	line-height:1;
	margin-top:0.5em;
}
.location-list > .location-list-item .title > span
{
	font-size:1.8rem;
	font-weight:bold;
}
.notice {
	font-size: .8em;
	color: #888;
}
.notice.red {
	color: #c00;
}
/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
	.location-list > .location-list-item
	{
		width:calc(33.3333% - 2em);
	}
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	.location-title .main
	{
		font-size:3.2rem;
	}
	.location-list > .location-list-item
	{
		width:calc(50% - 2em);
	}
	.location-list > .location-list-item .image.carfree:after {
		width:20px;
		height:20px;
	
		background-size: 13px;
	}
	.location-list > .location-list-item .image .price
	{
		padding:0.3em 0.4em;
	}
	.location-list > .location-list-item .image .price > span
	{
		font-size:2.2rem;
	}
	.location-list > .location-list-item .image .price .yen
	{
		font-size:1.8rem;
	}
	.location-list > .location-list-item .title > span
	{
		font-size:3.0rem;
	}
}

/*
************************************************************************
* モーダル
************************************************************************
*/
div.modal_w
{
	position:absolute;
	
	top:calc(50% + 0em);
	left:50%;
	
	transform:translate(-50%, -50%);
	
	width:960px;
	height:calc(90vh);
	
	border-radius:0.5em;
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
}
iframe.modal
{
	width:960px;
	height:calc(90vh);
	
	border-radius:0.5em;
	border:1px solid #FFFFFF;
	background-color:#FFFFFF;
}
button.btnModalClose
{
	position:absolute;
	
    /*
    top:calc(50% - 40vh - 2.0em);
    left:calc(50% + 480px - 4em);
    */
    top:2em;
    right:2em;
	
	border-radius:4em;
	
	width:4em;
	height:4em;
	
    border:0px solid rgba(0,0,0,1.0);
    background-color:rgba(0,0,0,1.0);
}
button.btnModalClose:before,
button.btnModalClose:after
{
	content:"";
	display:block;
	position:absolute;
	
	top:50%;
	left:23%;
	
	width:2.2em;
	height:2px;
	
	background-color:#FFFFFF;
}
button.btnModalClose:before
{
	transform:rotate(45deg);
}
button.btnModalClose:after
{
	transform:rotate(-45deg);
}

/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	div.modal_w
	{
		position:absolute;
		
		top:0;
		left:0;
		
		transform:translate(0%, 0%);
		
		width:100vw;
		height:calc(100vh - 0vw) !important;
		
		border-radius:0em;
		border:0px solid #FFFFFF;
		background-color:#FFFFFF;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	iframe.modal
	{
		width:100vw;
		height:calc(100vh - 0vw) !important;
		
		border-radius:0.5em;
		border:1px solid #FFFFFF;
		background-color:#FFFFFF;
	}
	button.btnModalClose
	{
		position:absolute;
		
		top:4.0vw;
		left:auto;
		right:4.0vw;
		
		border-radius:10vw;
		
		width:12vw;
		height:12vw;
		
	    border:1px solid rgba(0,0,0,1.0);
	    background-color:rgba(0,0,0,1.0);
	}
	button.btnModalClose:before,
	button.btnModalClose:after
	{
		content:"";
		display:block;
		position:absolute;
		
		top:50%;
		left:25%;
		
		width:6vw;
		height:1px;
		
		background-color:#FFFFFF;
	}
	button.btnModalClose:before
	{
		transform:rotate(45deg);
	}
	button.btnModalClose:after
	{
		transform:rotate(-45deg);
	}
}