#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}

#loader.fadeOut {
opacity: 0;
visibility: hidden;
}

.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
  -webkit-transform: scale(1.0);
  opacity: 0;
}
}

@keyframes sk-scaleout {
0% {
  -webkit-transform: scale(0);
  transform: scale(0);
} 100% {
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  opacity: 0;
}
}

.sm-Over{
	display: flex; 
	flex-wrap: nowrap; 
	overflow-x: scroll; 
	white-space: nowrap;
}

.click{
	margin:0;
	padding: 0;
	background: none;
	border: none;
}

.chk_btn{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}

.chk_btn li {
	
}

.chk_btn li label input{
	display: none;
}

.chk_btn li label span {
    color: #333; 
	background-color: #f3f3f3;
	text-align: center;
	display: block;
}
.chk_btn li label input:checked + span {
    color: #FFF; 
    background: #FBB; 
    border: 1px solid #FBB; 
}

.chk_btn li input[type="number"] {
	padding: 0.3em;
}

/*  CHECKBOX */
.label_list_item {
		display:inline-block;
		vertical-align:top;
		text-align: left;
		width: 19%;
	}
.label_list_item label {
	position: relative;
	display: block;
	word-break: break-all;
}
.label_list_item label input[type="checkbox"] + span,
.label_list_item label input[type="radio"] + span {
	position: relative;
	padding: 3px 10px 15px 24px;
}
/*  CHECKBOX */
.checkbox label span {
	display: inline-block;
}
.checkbox label input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.checkbox label input[type="checkbox"] + span::before, .checkbox label input[type="checkbox"] + span::after {
	position: absolute;
	top: 3px;
	left: 0;
	display: inline-block;
	content: '';
	box-sizing: border-box;
	color:#fb75a1;
}
.checkbox label input[type="checkbox"] + span::before {
	z-index: 0;
	background-color: transparent;
	width: 20px;
	height: 20px;
	border: 1px #3e5569 solid;
	border-radius: 5px;
}
.checkbox label input[type="checkbox"] + span::after {
	z-index: 1;
	margin: 5px 8px;
	width: 6px;
	height: 8px;
}
.checkbox label input[type="checkbox"]:checked + span::before {
	background-color: #fb75a1;
	border: 1px #fb75a1 solid;
}
.checkbox label input[type="checkbox"]:checked + span::after {
	border: 1px solid #fff;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.checkbox label input[type="checkbox"]:checked + span{
	color: #fb75a1;
}

/*bootstrap微調整*/
.form-control::file-selector-button{
	margin: -0.375rem 0.75rem -0.375rem -0.75rem;
}

/*reset*/
ul,li,ol,dl{
	margin:0;
	padding:0;
	list-style: none;
}

/* アイコン */
.avatar{
  width: 120px;              /* 任意サイズ */
  height: 120px;
  border-radius: 50%;       /* 丸にする */
  object-fit: cover;        /* 余白を作らず中央をトリミング */
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border: 2px solid #fff;   /* 好みで枠線 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.avatar-wrap {
  text-align: left; /* PC時は左寄せ */
  margin-bottom: 1em;
}

/* --- スマホで中央寄せ --- */
@media (max-width: 768px) {
  .avatar-wrap {
    text-align: center;
  }
  .avatar {
    margin: 0 auto; /* 念のため中央化 */
    display: block;
  }
}