@charset "utf-8";

/*
************************************************************************
* フォーム要素
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.inputArea
{
	width:100%;
	margin-bottom:0.8em;
}
.inputArea.inline
{
	margin-bottom:0.0em;
}
.inputArea .inputArea-label
{
	margin-bottom:0.25em;
    line-height:1.0;
	font-size:0.8em;
}
.inputArea .inputArea-controll
{
    line-height:1.0;
}

ul.error li,
ul.notice li
{
	margin-top:0.4em;
}

label
{
	/*
	border:1px solid #999999;
	border-radius:0.5em;
	display:inline-block;
	
	width:100%;
    background-color:#FFFFFF;
	*/
    display:inline-block;
    line-height:1.0;
    width: 100%;
}
label.label
{
	/*
	border:1px solid transparent;
    line-height:1.2;
    */
    padding:0.5em 0.8em;
    
    font-weight:bold;
}
label.error
{
	font-size:0.8em;
}
label.auto-width
{
	width:auto;
}
label.checkbox
{
	width:auto;
	margin-right:1em;
}
label.select:after
{
	content:"";
	display:block;
	position:absolute;
	top:calc(50% - 0.125em);
	right:0.5em;
	
	width:0px;
	height:0px;
	
	border:0.25em solid transparent;
	border-top:0.25em solid #404040;
}
label.mceEditor
{
	border:0.0em solid transparent;
	border-radius:0.0em;
}

input[type='text'],
input[type='color'],
input[type='password'],
select,
textarea
{
    -webkit-appearance : none;
    -webkit-tap-highlight-color : rgba(0,0,0,0);
    
    border:none;
    background-color:transparent;
    
    line-height:1.5;
    
    padding:0.15em 0.4em 0.15em 0.4em;
    
	width:100%;
	
	border:1px solid #CCCCCC;
	border-radius:0.4em;
    background-color:#FFFFFF;
}
input:focus,
select:focus,
textarea:focus
{
	border:1px solid #666666;
}

.inputArea.large input
{
	font-size:1.5em;
}

input.invalid,
select.invalid,
textarea.invalid
{
	border:1px solid #FF0000;
}
input[type=color]
{
    padding:0.0em 0.8em;
}
select
{
	padding-right:2.0em;
}
select::-ms-expand {
    display: none;
}
label.auto-width select
{
	width:auto;
}

.imageUploader
{

}
.imageUploader .thumbnail
{
	width:5em;
	height:5em;
	
	background-color:#CECECE;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url(../../img/noimage.png);
}
.imageUploader .label
{
	position:absolute;
	top:50%;
	left:6em;
	transform:translateY(-50%);
	
}
.pagination-item
{
	text-align:center;
	margin:1em auto;
}

.select-text
{
	
}
.select-text .toggle
{
	float:left;
	padding:0.4em;
	cursor:pointer;
}
.select-text .toggle:after
{
	content:"";
	display:block;
	
	width:1.2em;
	height:1.2em;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
.select-text.mode-select .toggle:after
{
	background-image:url(../../icon/list.svg);
}
.select-text.mode-text .toggle:after
{
	background-image:url(../../icon/edit.svg);
}
.select-text .input
{
	margin-left:2.0em;
}
.select-text .input .text,
.select-text .input .select
{
	display:none;
	animation-duration:0.5s;
	animation-timing-function:ease;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
.select-text.mode-select .input .select
{
	animation-name:fncInput;
	display:block;
}
.select-text.mode-text .input .text
{
	animation-name:fncInput;
	display:block;
}
@keyframes fncInput
{
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

.removable
{
	
}
.removable .clear
{
	float:left;
	padding:0.4em;
	cursor:pointer;
}
.removable .clear:after
{
	content:"";
	display:block;
	
	width:1.2em;
	height:1.2em;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url(../../icon/close.svg);
}
.removable .input
{
	margin-left:2.0em;
}

.address
{
	
}
.address .mark
{
}
.address .zip
{
	margin-bottom:0.2em;
}
.address .zip label:after
{
	content:'〒';
	
	display:block;
	
	position:absolute;
	top:50%;
	left:0.5em;
	
	transform:translateY(-50%);
}
.address .zip label input
{
	padding-left:2.0em;
}
.address .pref
{
	margin-bottom:0.2em;
}
.address .addr01
{
	margin-bottom:0.2em;
}
.address .addr02
{
}


/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1100px) {

	
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	input[type='text'],
	input[type='password'],
	select,
	textarea,
	label.label
	{
		font-size:16px;
	}
	
	.inputArea.large input
	{
		font-size:16px;
	}

}