@charset "UTF-8";

html {
	overflow-y: scroll;
}

body {
	font-size: 100%;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body i.fas {
	padding-right: 3px;
}

/*―――――――――――――――――――――――――――――
	カラー
―――――――――――――――――――――――――――――*/
/* 背景色パターン */

/* グラデーション（パープル） */
.grad_purple {
	background-image: linear-gradient(to bottom right, #863ee2, #571f9e);
}
/* グラデーション（ピンク） */
.grad_pink {
	background-image: linear-gradient(to bottom right, #ff9cc3, #fd3484);
}
/* グラデーション（イエロー） */
.grad_yellow {
	background-image: linear-gradient(to bottom right, #ffd85d, #ffc200);
}
/* グラデーション（ブルー） */
.grad_blue {
	background-image: linear-gradient(to bottom right, #00d2d7, #07b2dd);
}

/* 単色（パープル） */
.color_purple {
	background-color: #7E37D8;
	color: #FFF;
}
/* 単色（ピンク） */
.color_pink {
	background-color: #FE80B2;
	color: #FFF;
}
/* 単色（グリーン） */
.color_green {
	background-color: #80CF00;
	color: #FFF;
}
/* 単色（ブルー） */
.color_blue {
	background-color: #06B5DD;
	color: #FFF;
}
/* 単色（イエロー） */
.color_yellow {
	background-color: #FFC717;
	color: #FFF;
}
/* 単色（レッド） */
.color_red {
	background-color: #FD517D;
	color: #FFF;
}
/* 単色（グレー） */
.color_grey {
	background-color: #F8F5FD;
	color: #343a40;
}
/* 単色（ブラック） */
.color_black {
	background-color: #2C323F;
	color: #FFF;
}

/*――――――――――――――――――――――――
	メイン
――――――――――――――――――――――――*/
main a {
	color: #7E37D8;
	text-decoration: underline;
}
main a:hover {
	color: #FD517D;
}
main a:visited {
	color: #06B5DD;
}


/*―――――――――――――――――――――――――――――
	タイトル
―――――――――――――――――――――――――――――*/
h1 {
	padding: 5px 10px;
	font-size: 16px;
	font-weight: bold;
}

/*―――――――――――――――――――――――――――――
	フォーム要素スタイル
―――――――――――――――――――――――――――――*/
input::placeholder {
	font-style: italic;
	color: #999;
}
input.error,
textarea.error {
	border-color: #D00000 !important;
	box-shadow: 0px 0px 5px rgba(208,0,0,0.2) inset;
}
input[type='text'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='time'],
select,
textarea {
	margin: 0px 5px 5px 0px;
	border: 1px solid #CCC;
	border-radius: 4px;
	padding: 3px 4px 4px;
	transition: .1s ease-in-out;
	background-color: #FFF;
	max-width: 100%;
}
input[type='text']:focus,
input[type='password']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='time']:focus,
select:focus,
textarea:focus {
	background-color: #FFC;
	border-color: #1489D4;
}
input[type='text'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='time'],
select {
	line-height: 1em;
}
input[type='date'] {
	max-width: 150px !important;
}
input[type='datetime'] {

}
input[type='time'] {
	
}
textarea {
	font-size: 14px;
	line-height: 1.4;
}
input:required,
textarea:required {
	border-color: #FFC717;
}

div.select_wrap {
  display: inline-block;
  position: relative;
}
div.select_wrap select {
	position: relative;
	border-radius: 4px;
	width: 100%;
	z-index: 0;
	line-height: 19px;
	padding-right: 30px;
}
div.select_wrap select::-ms-expand {
	display: none;
}
div.select_wrap::before {
	content: '';
	border-style: solid;
	border-width: 8px 6px 0 6px;
	border-color: #666 transparent transparent transparent;
	top: 10px;
	right: 12px;
	padding: 0;
	position: absolute;
	pointer-events: none;
	height: 0;
	width: 0;
	z-index: 1;
}

/* 汎用ボタン */
.btn {
	padding: 5px 10px;
	border: 1px solid #7E37D8;
	border-radius: 4px;
	background-color: #7E37D8;
	color: #FFF;
	transition: 0.2s linear;
	cursor: pointer;
	text-decoration: none;
}
.btn:visited {
	color: #FFF;
}
.btn:hover {
	background-color: #FFF;
	color: #7E37D8;
}
/* 削除カラー */
.btn[data-type='delete'] {
	border: 1px solid #EB2067;
	background-color: #EB2067;
}
.btn[data-type='delete']:hover {
	background-color: #FFF;
	color: #EB2067;
}


/* submitボタン（button版） */
button[type='submit'] {
	background-color: #FDA810;
	color: #FFF;
	text-align: center;
	padding: 5px 10px;
	border-radius: 4px;
	border: 1px solid #FDA810;
	transition: 0.2s linear;
	line-height: 1em;
}
button[type='submit']:hover {
	background-color: #FFF;
	color: #FDA810;
}
button[type='submit'].edited {
	background-color: #FDA810;
	animation: editedBtn 1s infinite;
	-webkit-animation: editedBtn 1s infinite;
}

/* 選択ボタン */
ul.select_btn {
	display: flex;
}
ul.select_btn li {
	margin-right: 5px;
}
ul.select_btn span {
	padding: 5px 10px;
	border: 1px solid #7E37D8;
	border-radius: 4px;
	background-color: #FFF;
	color: #7E37D8;
	transition: 0.2s linear;
	cursor: pointer;
	text-decoration: none;
}
ul.select_btn span.selected {
	background-color: #7E37D8;
	color: #FFF;
}


/* シングル */
ul.btn_list[data-type='single'] span {
	background-color: #999;
}
ul.btn_list[data-type='single'] span.selected {
	background-color: #0074E8;
}
/* マルチ */
ul.btn_list[data-type='multi'] span {
	background-color: #999;
}
ul.btn_list[data-type='multi'] span.selected {
	background-color: #FF8000;
}
/* トグル */
ul.btn_list[data-type='toggle'] span {
	background-color: #999;
}
ul.btn_list[data-type='toggle'] span.selected {
	background-color: #0074E8;
}

/* UI制御 */
/* sortable Placeholder */
.sort-placeholder {
	border: 3px dotted #07C9F6;
}