/* 公開画面用の追加CSS設定 start */

.system-success-message,
.system-error-message {
    display: block;
    text-align: center;
    font-weight: bold;
    padding: 20px !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

.system-success-message {
    /* 処理成功メッセージのCSSは現状は使わない想定です */
    color: #ffffff;
    background-color: #00bdff;
}

.system-error-message {
    background-color: #ff0000;
    color: #ffffff;
}

.input.text,
.input.select,
.input.checkbox,
.input.radio,
.input.tel,
.input.email,
.input.password {
    /* 既存CSSが「入力項目がinline-block」であることを想定して実装されていることが多いので上書き */
    display: inline-block;
}

/* セレクトボックスに下向き三角アイコンを追加 */
.input.select {
	position: relative;
}
.input.select::after {
	content: "";
	display: block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 6px 5px 0 5px;
	border-color: #333333 transparent transparent transparent;
	position: absolute;
	top: 30px;
	right: 16px;
	transform: translateY(-50%);
}

.input-d-block .input.text,
.input-d-block .input.select,
.input-d-block .input.checkbox,
.input-d-block .input.radio,
.input-d-block .input.tel,
.input-d-block .input.email,
.input-d-block .input.password {
    /* 入力項目に「width: 〇〇%;」を利用したい場合は本class値を利用 */
    display: block;
}

/* 公開画面用の追加CSS設定 start */

/*----------- add ----------------*/

.input-note{
	color: #888;
	display: inline-block;
	margin-left: 0.5em;
}
.section01-head{
	position: relative;
}
.section01-head__btn{
	position: absolute;
	right: 0;
	top: 0;
	transform: translateY(-25%);
}
@media screen and (max-width: 767px){
	.section01-head__btn{
		position: static;
		margin: 15px 0 15px 0;
		transform: none;
		text-align: right;
	}
	.input.email,
	.input.password{
		display: block;
	}

}
@media screen and (min-width: 768px){
	.section01-head__btn .btn01{
		padding: 13px 40px;
	}
	
}
@media screen and (max-width: 480px){
	.flowNavArw ul li{
		font-size: 10px;
	}
}