@charset "utf-8";

/*
************************************************************************
* 入力フォーム
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
 入力テーブル
************************************************************************
*/
.input-table
{
}
.input-table table
{
	width:100%;
	border-spacing:0px;
	border-collapse:separate;
}
.input-table table tr th,
.input-table table tr td
{
	vertical-align:top;
	border-bottom:1px solid #e3e3e3;
}
.input-table table tr:last-child th,
.input-table table tr:last-child td
{
	/*border-bottom:0px solid transparent;*/
}
.input-table table tr th
{
	padding:2.5em 1.5em;
	width:320px;
	line-height:1;
}
.input-table table tr td
{
	padding:calc(1.5em - 0.3em) 1.5em;
	width:calc(100% - 320px);
}
.input-table table tr th.label
{
	padding:1.5em;
}
.input-table table tr th > div
{
	font-weight:normal;
	text-align:right;
}
.input-table table tr td > div
{
	
}
.input-table table tr.req th > div:after
{
	content:"必須";
	display:inline-block;
	position:absolute;
	
	top:0;
	left:0;
	
	padding:0.3em 0.3em;
	
	font-size:1.2rem;
	line-height:1;
	color:#FFFFFF;
	
	background-color:#ee0000;
	
	border-radius:0.3em;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.input-table,
	.input-table thead,
	.input-table tbody,
	.input-table table,
	.input-table table tr,
	.input-table table tr th,
	.input-table table tr td
	{
		display:block;
		width:100%;
		border:0px solid transparent;
	}
	.input-table table tr
	{
		border-bottom:1px solid #e3e3e3;
	}
	.input-table table tr th,
	.input-table table tr th.label
	{
		padding:1.5em 0 0 0;
	}
	.input-table table tr th > div
	{
		text-align:left;
	}
	.input-table table tr td
	{
		padding:0.2em 1.0em 1.0em 1.0em;
	}
	.input-table table tr.req th > div:after
	{
		display:inline;
		
		position:relative;
		top:auto;
		left:auto;
		
		margin-left:1em;
		padding:0.2em 0.6em;
		
		vertical-align: middle;
		
		font-size:1.8rem;
	}
}

/*
************************************************************************
 送信ボタン
************************************************************************
*/
.button
{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
	
	border-radius:0.3em;
	border:1px solid #000000;
	background-color:#000000;
	color:#FFFFFF;
	
	line-height:1;
	
	padding:1.5em;
	
	width:100%;
	max-width:380px;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.button > span
{
	display:inline-block;
	width:100%;
}
.button:after
{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	right:1em;
	
	width:0.5em;
	height:0.5em;
	
	border-right:2px solid #FFFFFF;
	border-bottom:2px solid #FFFFFF;
	
	transform:rotate(-45deg) translateY(-50%) skew(10deg, 10deg);
}
.button:hover
{
	background-color:#FFFFFF;
	color:#000000;
}
.button:hover:after
{
	border-right:2px solid #000000;
	border-bottom:2px solid #000000;
}

.button.back
{
	border:1px solid #999999;
	background-color:#999999;
	max-width:250px;
	margin-right:25px;
}
.button.back:after
{
	left:1em;
	border:none;
	border-left:2px solid #FFFFFF;
	border-top:2px solid #FFFFFF;
	transform:rotate(-45deg) translateY(-50%) skew(10deg, 10deg);
}
.button.back:hover
{
	background-color:#FFFFFF;
	color:#000000;
}
.button.back:hover:after
{
	border-left:2px solid #000000;
	border-top:2px solid #000000;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.button
	{
		border-radius:0.3em;
		max-width:64vw;
		
		margin-bottom:1em;
	}
	.button > span
	{
	}
	.button:after
	{
	}
	.button:hover
	{
	}
	.button:hover:after
	{
	}
	.button.back
	{
		max-width:42.6666vw;
		margin-right:0px;
	}
	.button.back:after
	{
	}
	.button.back:hover
	{
	}
	.button.back:hover:after
	{
	}
}
/*
************************************************************************
 入力フォーム
************************************************************************
*/
label
{
	display:block;
	overflow:hidden;
	border-radius:0.5em;
	border:1px solid #aaaaaa;
	
	margin:0.8em auto;
}
label input,
label textarea,
label select
{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
	
	width:100%;
	
    border-radius:0px;
    border:0px solid transparent;
    background-color:transparent;
    
    line-height:1;
    
    padding:1em;
}
label textarea
{
	line-height:1.5;
}
label.date:after
{
	content:"";
	display:block;
	position:absolute;
	top:calc(50% - 0.15em);
	right:0.5em;
	
	width:0.8em;
	height:0.8em;
	
	border-left:1px solid #000000;
	border-bottom:1px solid #000000;
	
	transform:rotate(-45deg) translateY(-50%);
}
label.check
{
    border-radius:0px;
    border:0px solid transparent;
    background-color:transparent;
    
    margin:0.5em auto;
    
    cursor:pointer;
}
label.check input
{
	display:none;
}
label.check input + span
{
	padding-left:1.8em;
}
label.check input + span:before
{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:0;
	
	transform:translateY(-50%);
	
	width:27px;
	height:27px;
	
	border-radius:50%;
	border:1px solid #a0a0a0;
	
}
label.check input:checked + span:after
{
	content:"";
	display:block;
	position:absolute;
	top:calc(50%);
	left:6px;
	
	transform:translateY(-50%);
	
	width:15px;
	height:15px;
	
	border-radius:50%;
	border:1px solid #000000;
	background-color:#000000;
}
label.check input + span small {
	font-size: 0.8em;
}
label.hasError
{
	border:1px solid #ee0000;
}
label + .msg-err
{
	display:block;
	font-size:1.3rem;
	color:#ee0000;
	line-height:1.5;
}
.notice
{
	display:block;
	font-size:1.3rem;
	color:#666666;
	text-indent:-1em;
	padding-left:1em;
	line-height:1.5;
}
::placeholder
{
	color:#CCCCCC;
}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	label input,
	label textarea,
	label select
	{
		font-size:3.2rem;
	}
	label.check input + span
	{
		padding-left:7.5vw;
	}
	label.check input + span:before
	{
		content:"";
		display:block;
		position:absolute;
		top:50%;
		left:0;
		
		transform:translateY(-50%);
		
		width:6vw;
		height:6vw;
		
		border-radius:100%;
		border:1px solid #a0a0a0;
		
	}
	label.check input:checked + span:after
	{
		content:"";
		display:block;
		position:absolute;
		top:calc(50%);
		left:1.5vw;
		
		transform:translateY(-50%);
		
		width:3vw;
		height:3vw;
		
		border-radius:100%;
		border:1px solid #000000;
		background-color:#000000;
	}
	label + .msg-err
	{
		font-size:2.0rem;
	}
	.notice
	{
		font-size:2.0rem;
	}
}