@charset "utf-8";

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

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.inputArea
{
	width:100%;
	margin-bottom:0.0em;
}
.inputArea.inline
{
	margin-bottom:0.0em;
}
.inputArea .inputArea-label
{
	margin-bottom:0.25em;
    line-height:1.0;
	font-size:0.9em;
    font-weight:bold;
}
.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.0em;
}
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.4em 0.5em 0.4em 0.5em;
    
	width:100%;
	
	border:1px solid #AAAAAA;
	border-radius:0.4em;
    background-color:#FFFFFF;
}
input:focus,
select:focus,
textarea:focus
{
	border:1px solid #666666;
	box-shadow:1px 1px 1px 1px rgba(0,0,0,0.15);
}

.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;
}

.addressInput
{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:stretch;
	margin:-0.5em;
}
.addressInput input,
.addressInput select,
.addressInput button
{
    -webkit-appearance : none;
    -webkit-tap-highlight-color : rgba(0,0,0,0);
    background-color:transparent;
    border:0px solid transparent;
}
.addressInput input:focus,
.addressInput select:focus,
.addressInput button:focus
{
	box-shadow:1px 1px 1px 1px rgba(0,0,0,0.0);
}
.addressInput > div
{
	border:1px solid #999999;
	border-radius:0.4em;
	margin:0.5em;
    background-color:#FFFFFF;
}
.addressInput > .zip
{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	
	overflow:hidden;
}
.addressInput > .zip > .mark
{
    padding: 0.2em 0.0em 0.2em 0.5em;
	align-self:center;
}
.addressInput > .zip > input
{
	width:6em;
	border:0px solid transparent;
}
.addressInput > .zip > button
{
	width:2em;
	
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em;
    
    background-image: url(../../icon/search.svg);
}
.addressInput > .pref > select
{
	width:10em;
}
.addressInput > .addr01,
.addressInput > .addr02
{
	width:1%;
	flex-grow:1;
}
.addressInput > .addr01 > input,
.addressInput > .addr02 > input
{
	width:100%;
}
.addressInput > .invalid
{
    border-color:#FF0000;
}


/* ################################################################################################ */
/* ## 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;
	}
	
	.addressInput
	{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-items:flex-start;
		align-content:stretch;
		margin:-0.0em;
	}
	.addressInput input,
	.addressInput select,
	.addressInput button
	{
	    -webkit-appearance : none;
	    -webkit-tap-highlight-color : rgba(0,0,0,0);
	    background-color:transparent;
	    border:0px solid transparent;
	}
	.addressInput > div
	{
		border:0px solid transparent;
		border-radius:0.0em;
		
		border-left:1px solid #AAAAAA;
		border-right:1px solid #AAAAAA;
		width:100%;
		
		margin-bottom:0px !important;
		margin:0.0em !important;
	}
	.addressInput > .zip
	{
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:flex-start;
		align-items:stretch;
		align-content:stretch;
		
		border-top-left-radius:0.5em;
		border-top-right-radius:0.5em;
		border-top:1px solid #AAAAAA;
	}
	.addressInput > .zip > .mark
	{
	    padding: 0.2em 0.0em 0.2em 0.5em;
		align-self:center;
	}
	.addressInput > .zip > input
	{
		width:1%;
		flex-grow:1;
		border:0px solid transparent;
	}
	.addressInput > .zip > button
	{
		width:2em;
		
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 1.2em 1.2em;
		
		background-image: url(../../icon/search.svg);
	}
	.addressInput > .pref > select
	{
		width:100%;
	}
	.addressInput > .addr01,
	.addressInput > .addr02
	{
		width:100%;
		flex-grow:0;
	}
	.addressInput > .addr02
	{
		border-bottom-left-radius:0.5em;
		border-bottom-right-radius:0.5em;
		border-bottom:1px solid #AAAAAA;
	}
	.addressInput > .addr01 > input,
	.addressInput > .addr02 > input
	{
		width:100%;
	}
	
	.addressInput > .invalid
	{
	    border-color:#AAAAAA;
	    background-color:#FEEEEE;
	}
}