@charset "utf-8";

*{
	box-sizing: border-box;
}
html{
	height: 100%;
	width: 100%;
}
body{
	font-family: "Material Design Icons", "Noto Sans JP", -apple-system, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDGothic", "メイリオ", Meiryo, "Meiryo UI", sans-serif;
	font-size: 14px;
	height: 100%;
	line-height: 1.6;
	margin: 0;
}
input, button, textarea, select{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	color: inherit;
	font-family: inherit;
	font-weight: normal;
	outline: none;
}
input[type="submit"], input[type="button"], input[type="reset"], button{
	border: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner{
	border: 0px;
	padding: 0;
}
ol, ul, p, dl, dt, dd{
	margin: 0;
	padding: 0;
}
ol li, ul li{
	list-style: none;
}
h1,h2,h3,h4,h5,h6{
	margin: 0;
	font-size: inherit;
}
a{
	color: #1E88E5;
	cursor: pointer;
	outline: none;
}
a:hover{
	text-decoration: none;
}
a img{
	border: none;
}
img{
	border: none;
}
img.lazyload{
	visibility: hidden;
}
video{
	height: auto !important;
	max-width: 100%;
}

/***** padding *****/
.paddingA10{
	padding: 10px;
}
.paddingA20{
	padding: 20px;
}

/***** margin *****/
.marginB05{
	margin-bottom: 5px;
}
.marginB10{
	margin-bottom: 10px;
}
.marginB20{
	margin-bottom: 20px;
}
.marginB30{
	margin-bottom: 30px;
}
.marginT05{
	margin-top: 5px;
}
.marginT10{
	margin-top: 10px;
}
.marginT20{
	margin-top: 20px;
}
.marginTB10{
	margin-top: 10px;
}
.marginTB20{
	margin-top: 20px;
}
.marginT30{
	margin-top: 30px;
}
.marginL05{
	margin-left: 5px;
}
.marginL10{
	margin-left: 10px;
}
.marginL20{
	margin-left: 20px;
}
.marginR05{
	margin-right: 5px;
}
.marginR10{
	margin-right: 10px;
}
.marginR20{
	margin-right: 20px;
}
.marginL05em{
	margin-left: 0.5em;
}
.marginL1em{
	margin-left: 1em;
}
.marginR05em{
	margin-right: 0.5em;
}
.marginR1em{
	margin-right: 1em;
}
.marginLR05em{
	margin-left: 0.5em;
	margin-right: 0.5em;
}
.marginLR1em{
	margin-left: 1em;
	margin-right: 1em;
}

/***** img *****/
.icon_error{
	margin-right: 5px;
}

/***** align *****/
.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}

/***** float *****/
.floatL{
	float: left;
}
.floatR{
	float: right;
}
.clearfix:after{
	content: "";
	clear: both;
	display: block;
}

/***** font *****/
.strong{
	font-weight: bold;
}
.font60p{
	font-size: 60% !important;
}
.font65p{
	font-size: 65% !important;
}
.font70p{
	font-size: 70% !important;
}
.font75p{
	font-size: 75% !important;
}
.font80p{
	font-size: 80% !important;
}
.font85p{
	font-size: 85% !important;
}
.font90p{
	font-size: 90% !important;
}
.font95p{
	font-size: 95% !important;
}
.font105p{
	font-size: 105% !important;
}
.font110p{
	font-size: 100% !important;
}
.font115p{
	font-size: 115% !important;
}
.font120p{
	font-size: 120% !important;
}
.font125p{
	font-size: 125% !important;
}
.font130p{
	font-size: 130% !important;
}
.font135p{
	font-size: 135% !important;
}
.font140p{
	font-size: 140% !important;
}
.font145p{
	font-size: 145% !important;
}
.font150p{
	font-size: 150% !important;
}
.font155p{
	font-size: 155% !important;
}
.font160p{
	font-size: 160% !important;
}
.font165p{
	font-size: 165% !important;
}
.font170p{
	font-size: 170% !important;
}
.font175p{
	font-size: 175% !important;
}
.font180p{
	font-size: 180% !important;
}
.serif{
	font-family: "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.ellipsis{
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/***** color *****/
.red{
	color: #F44336;
}
.blue{
	color: #1976D2;
}
.green{
	color: #43A047;
}
.yellow{
	color: #FFEB3B;
}
.amber{
	color: #FFC107;
}

hr.gradient {
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, #EEEEEE, #9E9E9E, #EEEEEE);
	background-image: -moz-linear-gradient(left, #EEEEEE, #9E9E9E, #EEEEEE);
	background-image: -ms-linear-gradient(left, #EEEEEE, #9E9E9E, #EEEEEE);
	background-image: -o-linear-gradient(left, #EEEEEE, #9E9E9E, #EEEEEE);
}

/* -- warning -- */
div.warning{
	color: #F9A825;
	background-color: #FFFDE7;
	border: 1px solid #F9A825;
	font-size: 120%;
	text-align: left;
	margin-bottom: 20px;
	padding: 15px 10px 15px 80px;
	position: relative;
}
div.warning:before{
	content:"\F026";
	font-family: "Material Design Icons";
	font-size: 260%;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 20px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* -- success -- */
div.success{
	color: #43A047;
	background-color: #F1F8E9;
	border: 1px solid #43A047;
	font-size: 120%;
	text-align: left;
	margin-bottom: 20px;
	padding: 15px 10px 15px 80px;
	position: relative;
}
div.success:before{
	content:"\F134";
	font-family: "Material Design Icons";
	font-size: 260%;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 20px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* -- error -- */
div.error{
	color: #F44336;
	background-color: #FFEBEE;
	border: 1px solid #F44336;
	font-size: 120%;
	text-align: left;
	margin-bottom: 20px;
	padding: 15px 10px 15px 80px;
	position: relative;
}
div.error:before{
	content:"\F159";
	font-family: "Material Design Icons";
	font-size: 260%;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 24px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* -- failed -- */
div.failed{
	color: #F44336;
	background-color: #FFEBEE;
	border: 1px solid #F44336;
	font-size: 120%;
	text-align: left;
	margin-bottom: 20px;
	padding: 15px 10px 15px 80px;
	position: relative;
}
div.failed:before{
	content:"\F376";
	font-family: "Material Design Icons";
	font-size: 260%;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 20px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* -- info -- */
div.info{
	color: #03A9F4;
	background-color: #E1F5FE;
	border: 1px solid #03A9F4;
	font-size: 120%;
	text-align: left;
	margin-bottom: 20px;
	padding: 15px 10px 15px 80px;
	position: relative;
}
div.info:before{
	content:"\F2FC";
	font-family: "Material Design Icons";
	font-size: 260%;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 20px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* -- form error -- */
.error_notice{
	color: #F44336;
	font-weight: bold;
}
.error_notice :before{
	content: "\F028";
	font-size: 120%;
	font-weight: normal;
	margin-right: 0.3em;
	vertical-align: middle;
}
.error_notice + input[type="text"],
.error_notice + * + input[type="text"],
.error_notice + .ui-spinner input[type="text"],
.error_notice + input[type="password"],
.error_notice + input[type="email"],
.error_notice + input[type="url"],
.error_notice + input[type="number"],
.error_notice + label select,
.error_notice + textarea,
.error_notice + input + .sp-replacer{
	background-color: #FFEBEE;
	border-color: #F44336 !important;
}
.error_notice + .input_check label,
.error_notice + .input_radio label,
.error_notice_tr + tr .input_check label,
.error_notice_tr + tr .input_radio label{
	background-color: #FFEBEE;
}
.error_notice + label.select_box:after{
	background-color: #FFCDD2;
	border-color: #F44336 !important;
}
.error_notice + .ui-spinner .ui-spinner-button{
	background-color: #FFEBEE;
	color: #F44336;
}
.error_notice + .ui-spinner .ui-spinner-button:hover{
	background-color: #F44336;
	color: #FFEBEE;
}

/* -- width -- */
.w100img{
	width: 100%;
	vertical-align: middle;
}
.mw100img{
	max-width: 100%;
	vertical-align: middle;
}

/* -- marquee -- */
.marquee{
	width: 100%;
	padding: 0.5em 0;
	overflow: hidden;
	margin-bottom: 10px;
	position: relative;
}
.marquee > *:after{
	content: "";
	white-space: nowrap;
	padding-right: 50px;
}
.marquee > *{
	margin: 0;
	padding-left: 100%;
	display: inline-block;
	white-space: nowrap;
		-webkit-animation-name: marquee;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 20s;
		-webkit-animation-iteration-count: infinite;
		-ms-animation-name: marquee;
		-ms-animation-timing-function: linear;
		-ms-animation-duration: 20s;
		-ms-animation-iteration-count: infinite;
		animation-name: marquee;
		animation-timing-function: linear;
		animation-duration: 20s;
		animation-iteration-count: infinite;
}
@-webkit-keyframes marquee{
	from   { -webkit-transform: translate(0%);}
	99%,to { -webkit-transform: translate(-100%);}
}
@-ms-keyframes marquee{
	from   { -ms-transform: translate(0%);}
	99%,to { -ms-transform: translate(-100%);}
}
@keyframes marquee{
	from   { transform: translate(0%);}
	99%,to { transform: translate(-100%);}
}