@charset "utf-8";

/*
************************************************************************
* メールフォーム
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
 ヘッダー
************************************************************************
*/
#header #header-contents .logo
{
	margin-bottom:30px;
	text-align:center;
}
#header #header-contents .logo img
{
	width:202px;
}

#header #header-contents .title
{
	line-height:1;
	
	text-align:center;
}
#header #header-contents .title .main
{
	display:block;
	font-size:2.4rem;
	font-weight:bold;
}
#header #header-contents .title .sub
{
	display:block;
	font-size:1.4rem;
	font-weight:bold;
	color:#666666;
	margin-top:1em;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	#header #header-contents .logo
	{
		margin-bottom:4vw;
	}
	#header #header-contents .logo img
	{
		width:50vw;
	}
	#header #header-contents .title .main
	{
		font-size:3.6rem;
	}
	#header #header-contents .title .sub
	{
		font-size:2.2rem;
	}
}
/*
************************************************************************
 フッター
************************************************************************
*/
#footer #footer-contents
{
	color:#666666;
}
#footer #footer-contents .sign
{
	float:left;
	font-size:1.4rem;
}
#footer #footer-contents .sign .logo
{
	display:inline-block;
	width:144px;
	margin-right:2em;
}
#footer #footer-contents .sign .tel
{
	display:inline-block;
}
#footer #footer-contents .copyright
{
	float:right;
	font-size:1.2rem;
}
#footer hr
{
	margin-left:-50px;
	margin-right:-50px;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	#footer #footer-contents .sign
	{
		font-size:2.0rem;
		margin-bottom:0.5em;
	}
	#footer #footer-contents .sign .logo
	{
		display:inline-block;
		width:29vw;
		margin-right:1.5em;
	}
	#footer #footer-contents .sign .tel
	{
		display:inline-block;
	}
	#footer #footer-contents .copyright
	{
		float:left;
		font-size:2.0rem;
	}
	#footer hr
	{
		margin-left:-4vw;
		margin-right:-4vw;
	}
}

/*
************************************************************************
 店舗選択
************************************************************************
*/
.shop-list
{
	margin:0;
	padding:0;
	list-style:none;
	
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	
	margin:-0.5em;
}
.shop-list .shop-list-item
{
	margin:0;
	padding:0;
	list-style:none;
	
	width:calc(20% - 1em);
	margin:0.5em;
	padding:2px;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.shop-list .shop-list-item a
{
	display:block;
	padding:1.5em;
	
	border-radius:0.5em;
	border:1px solid #aaaaaa;
	
	text-align:center;
	
	font-weight:bold;

	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.shop-list .shop-list-item:hover
{
	padding:0px;
}
.shop-list .shop-list-item:hover a
{
	border:3px solid #aaaaaa;
	text-decoration:none;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.shop-list
	{
		margin:0;
		padding:0;
		list-style:none;
		
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		
		margin:-0.5em;
	}
	.shop-list .shop-list-item
	{
		margin:0;
		padding:0;
		list-style:none;
		
		width:calc(50% - 1em);
		margin:0.5em;
		padding:2px;
		
		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
	.shop-list .shop-list-item a
	{
		display:block;
		padding:1.0em;
		
		border-radius:0.5em;
		border:1px solid #aaaaaa;
		
		text-align:center;
		
		font-weight:bold;

		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
	.shop-list .shop-list-item:hover
	{
		padding:0px;
	}
	.shop-list .shop-list-item:hover a
	{
		border:3px solid #aaaaaa;
	}
}

/*
************************************************************************
 店舗直通TEL 店舗選択
************************************************************************
*/
a.tell-modal {
	text-decoration: underline;
}
.modal{
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
}
.modal__bg{
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
}
.modal__content{
	background: #fff;
	left: 50%;
	padding: 40px;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 60%;
	min-width:620px;
	max-width: 900px;
}
.modal-description {
	margin-top: 20px;
	padding: 20px 0;
	border-top: 1px #000 solid;
	list-style: none;
}
.tel-modal-item {
	line-height: 2;
}
.js-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 1.3em;
	line-height: 1;
	text-align: center;
	padding: 2px 6px 5px 7px;
	border: 1px #000 solid;
}
.js-modal-close:hover{
	text-decoration: none
}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.modal__content{
		width: 75%;
		min-width: 320px;
	}
}

/*
************************************************************************
 流れ
************************************************************************
*/
.flow
{
	margin:0;
	padding:0;
	list-style:none;
	
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	
	margin:-1.5em;
	
	counter-reset: number 0;
}
.flow .flow-item
{
	line-height:1;
	font-weight:bold;
	margin:1.5em;
	
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.flow .flow-item.active
{
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
}
.flow .flow-item:after
{
	content:"";
	display:block;
	position:absolute;
	top:calc(50% - 0.15em);
	right:-1.5em;
	
	width:0.8em;
	height:0.8em;
	
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	
	transform:rotate(-45deg) translateY(-50%);
}
.flow .flow-item:last-child:after
{
	content:none;
}

.flow .flow-item .label:before
{
	counter-increment: number 1;
	content:counter(number);
	
	display:inline-block;
	
	padding:0.25em;
	margin-right:0.5em;
	
	width:1.5em;
	height:1.5em;
	
	border-radius:100%;
	border:1px solid #000000;
	
	text-align:center;
	
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.flow
	{
		justify-content:flex-start;
		margin:-0.5em;
	}
	.flow .flow-item
	{
		margin:0.5em;
		margin-left:1.5em;
		font-size:2.6rem;
	}
	.flow .flow-item.active
	{
	}
	.flow .flow-item:after
	{
	}
	.flow .flow-item .label:before
	{
		margin-right:0.2em;
	}
}
/*
************************************************************************
 送信完了画面
************************************************************************
*/
.thanks-title
{
	font-size:3.2rem;
	font-weight:bold;
}
.thanks-msg
{
	padding:0 50px;
	
	font-size:1.6rem;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.thanks-title
	{
		font-size:3.6rem;
	}
	.thanks-msg
	{
		padding:0 4vw;
		font-size:2.8rem;
	}

}