@charset "utf-8";

body:not(.fontLoaded) {
	opacity: 0;
}
body.fontLoaded {
	transition: opacity .2s;
}

.l-form {
	min-height: calc(100vh - 172px);
	padding: 100px 80px;
	text-align: center;
}
@media screen and (max-width: 767px) {
	.l-form {
		min-height: calc(100vh - 99px);
		padding: 100px 50px 80px;
	}
}
@media screen and (max-width: 480px) {
	.l-form {
		padding: 100px 20px 50px;
	}
}

.l-form hr {
	max-width: 750px;
	margin-right: auto;
	margin-left: auto;
}
.l-form_container {
	border: 0;
	max-width: 750px;
	margin: 40px auto 0;
	text-align: left;
}
.l-form_container:first-child {
	margin-top: 80px;
}
.step_content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}
.l-form_container.is-step1 .-step1,
.l-form_container.is-step2 .-step2,
.l-form_container.is-step3 .-step3 {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

/* :::::: login :::::: */
.p-login {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	transition: opacity .4s;
}
.login_error {
	margin-top: 1em;
	color: red;
	font-size: 1.1rem;
}
.l-login_container {
	width: 300px;
	max-width: calc(100% - 60px);
	margin: 0 auto;
	text-align: center;
}
.l-login_container .o-title img {
	width: 130px;
	height: 60px;
}
.login_message {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect(0,0,0,0);
}
.p-form_login {
	margin-top: 48px;
	text-align: left;
}
.l-login_container .o-button {
	margin-top: 48px;
	letter-spacing: .15em;
	text-transform: uppercase;
}

/* :::::: button :::::: */
.p-form_detail .o-button {
	min-width: 0;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 4px 12px;
	border-radius: 5px;
	color: black;
	background: white;
}
.p-form_detail .o-button:disabled {
	pointer-events: none;
	color: #ccc;
	background: #f4f4f4;
}
@media (hover: hover) {
	.p-form_detail .o-button[href],
	.p-form_detail .o-button[type] {
		transition: color .4s, background .4s;
	}
	.p-form_detail .o-button[href]:hover,
	.p-form_detail .o-button[type]:hover {
		color: white;
		background: black;
	}
}


/* :::::: input :::::: */
.o-input {
	display: inline-block;
	width: 100%;
	height: 40px;
	padding: 0 10px;
	border-radius: 0;
	font-size: 1.6rem;
	vertical-align: middle;
	background: white;
}
.o-input[type="number"] {
	-moz-appearance: textfield;
}
.o-input[type="number"]::-webkit-outer-spin-button,
.o-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.o-input.-textarea {
	height: 250px;
	padding: 8px 10px;
}
.o-input:disabled {
	pointer-events: none;
	background: gainsboro;
}
.o-input::placeholder {
	color: #999;
}
.o-input:disabled::placeholder {
	color: transparent;
}


/**
 * フォーム共通
 -------------------------------------------------- */
.p-form_detail {
	margin-top: 30px;
}
.form_row {
	font-size: 1.4rem;
}
.form_row,
.form_wrap {
	display: flex;
}
.form_wrap {
	transition: height .4s, margin .4s, opacity .4s;
}
.form_wrap:not(:last-of-type) {
	margin-bottom: 8px;
}
.form_wrap.is-remove {
	overflow: hidden;
	margin-bottom: 0;
	opacity: 0;
}

.form_row:nth-child(n+2) {
	margin-top: 24px;
}
.form_column {
	position: relative;
}
.form_row .form_column:nth-child(n+2) {
	margin-left: 20px;
}
.form_wrap .form_column:nth-child(n+2) {
	margin-left: 10px;
}
.form_column.-col1 { flex-basis: 100%; }
.form_column.-col2 { flex-basis: calc(50% - 10px); }
.form_column.-col3 { flex-basis: calc(33.33333% - 40px / 3); }
.form_column.-col4 { flex-basis: calc(25% - 60px / 4); }
.form_column.-year { flex-basis: calc(60% - 5px); }
@media screen and (max-width: 767px) {
	.form_column.-col2 { flex-basis: 100%; }
	.form_column.-col3,
	.form_column.-col4 { flex-basis: calc(50% - 10px) }
	.form_wrap .form_column.-col2:nth-child(n+2),
	.form_wrap .form_column.-col3:nth-child(2n+1),
	.form_wrap .form_column.-col4:nth-child(2n+1) {
		margin-left: 0;
	}
}
.form_column.-month { flex-basis: calc(40% - 5px); }
.form_column.-credit { flex-basis: 18%; }
.form_column.-name { flex-basis: 42%; }
.form_column.-member { flex-basis: 18%; }
.form_column.-btn { flex-basis: 60px; }
.form_wrap:nth-child(10) .form_column.-member { z-index: 1; }
.form_wrap:nth-child(9)  .form_column.-member { z-index: 2; }
.form_wrap:nth-child(8)  .form_column.-member { z-index: 3; }
.form_wrap:nth-child(7)  .form_column.-member { z-index: 4; }
.form_wrap:nth-child(6)  .form_column.-member { z-index: 5; }
.form_wrap:nth-child(5)  .form_column.-member { z-index: 6; }
.form_wrap:nth-child(4)  .form_column.-member { z-index: 7; }
.form_wrap:nth-child(3)  .form_column.-member { z-index: 8; }
.form_wrap:nth-child(2)  .form_column.-member { z-index: 9; }
.form_wrap:nth-child(1)  .form_column.-member { z-index: 10; }

.form_column.-btn {
	line-height: 1;
}
.form_wrap.is-remove .o-button,
.form_column.-btn .o-button:disabled {
	pointer-events: none;
}
.form_column.-bottom {
	align-self: flex-end;
}
.form_label {
	display: block;
	font-size: 1.4rem;
}
.form_label small {
	margin-left: .5em;
	font-size: inherit;
}
.form_label .req {
	color: red;
	font-size: 1rem;
	vertical-align: top;
}
.form_label .req.-hide {
	display: none;
}
.form_caution {
	color: red;
	font-size: 1.1rem;
}
.form_pweye {
	cursor: pointer;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40px;
	height: 40px;
	opacity: .5;
	background: center / 18px no-repeat;
}
.o-input[type="password"] ~ .form_pweye {
	background-image: url(../img/unvisible.svg);
}
.o-input[type="text"] ~ .form_pweye {
	background-image: url(../img/visible.svg);
}
.form_error {
	position: absolute;
	font-size: 1.1rem;
	transition: opacity .4s, transform .4s cubic-bezier(0.33, 1, 0.68, 1);
}
.form_column .form_error {
	top: calc(100% + 4px);
	right: 0;
	color: red;
}
.form_column:not(.is-error) .form_error {
	pointer-events: none;
	opacity: 0;
	transform: translateY(-4px);
}
.form_column .form_column.-credit.is-error {
	background: black;
}
.form_column.-credit.is-error ~ .form_error,
.form_column.-name.is-error ~ .form_error {
	pointer-events: auto;
	opacity: 1;
	transform: none;
}



/**
 * チェックボックス
 -------------------------------------------------- */
.c-checkbox {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding: 4px 20px;
	padding-left: calc(1em + 12px);
	line-height: 1.2;
	white-space: nowrap;
}
.c-checkbox input {
	-webkit-appearance: none;
	position: absolute;
	top: calc(50% - .5em - 2px);
	left: 0;
	width: calc(1em + 4px);
	height: calc(1em + 4px);
	border: 1px solid #ccc;
	border-radius: 0;
	vertical-align: middle;
	background: white;
	transition: border-color .2s, background-color .2s;
}
.c-checkbox input:checked {
	border-color: #00a0e9;
	background: #00a0e9;
	transition-duration: .1s;
}
.c-checkbox .ico {
	pointer-events: none;
	position: absolute;
	top: calc(50% - .5em);
	left: 2px;
	width: 1em;
	height: 1em;
	margin: 0;
	fill: none;
	stroke: white;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 20px;
	transition: opacity 0s, transform 0s, stroke-dashoffset .2s;
}
.c-checkbox input:not(:checked) + .ico {
	opacity: 0;
	stroke-dashoffset: 20px;
	transform: scale(.5);
	transition-duration: .1s, .1s, 0s;
	transition-delay: 0s, 0s, .1s;
}
.has-checkbox .c-checkbox {
	position: absolute;
	top: calc(50% - .5em - 2px);
	left: 16px;
	padding: 0;
	line-height: 1;
}
.has-checkbox .c-checkbox input {
	position: static;
}



/**
 * 新規投稿 - カテゴリー（複数選択可）
 -------------------------------------------------- */
.checkbox_list {
	display: flex;
	flex-wrap: wrap;
}
.checkbox_list .checkbox_item {
	flex-basis: 28%;
	max-width: 28%;
	text-transform: uppercase;
}
.checkbox_list .checkbox_item:nth-child(4n) {
	flex-basis: 16%;
	max-width: 16%;
}



/**
 * ラジオボタン
 -------------------------------------------------- */
.c-radio {
	cursor: pointer;
	position: relative;
	padding: 4px 20px;
	padding-left: calc(1em + 12px);
	white-space: nowrap;
}
.c-radio input {
	-webkit-appearance: none;
	position: absolute;
	top: calc(50% - .5em - 2px);
	left: 0;
	width: calc(1em + 4px);
	height: calc(1em + 4px);
	border: 1px solid #ccc;
	border-radius: 1em;
	vertical-align: middle;
	background: white;
}
.c-radio input:focus {
	outline: transparent;
}
.c-radio .ico {
	pointer-events: none;
	position: absolute;
	top: calc(50% - .5em + 3px);
	left: 5px;
	width: calc(1em - 6px);
	height: calc(1em - 6px);
	border-radius: 1em;
	background: #00a0e9;
	transition: opacity .2s, transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.c-radio input:not(:checked) + .ico {
	opacity: 0;
	transform: scale(0);
	transition-timing-function: cubic-bezier(.3,0,.3,1);
}




/**
 * 横並びボタン
 -------------------------------------------------- */
.l-button_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.l-button_wrap .o-button {
	margin: 0;
}
.p-form_submit {
	position: relative;
	margin-top: 80px;
}
.p-form_submit .form_error {
	bottom: calc(100% + 8px);
	color: red;
}
@media screen and (max-width: 374px) {
	.l-button_wrap {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 10px;
	}
	.l-button_wrap .o-button {
		min-width: auto;
		padding: 8px 12px;
	}
}



/**
 * ファイルボタン
 -------------------------------------------------- */
.c-file {
	display: inline-block;
	cursor: pointer;
	position: relative;
	top: -.1em;
	padding: 4px 16px;
	border: 1px solid black;
	border-radius: 5px;
	color: currentcolor;
	font-size: 1.2rem;
	line-height: 1.2;
	background: white;
}
.c-file input {
	cursor: pointer;
	position: absolute;
	inset: 0;
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding: 0;
	opacity: 0;
}
@media (hover: hover) {
	.c-file {
		transition: color .4s, background .4s;
	}
	.c-file:hover {
		color: white;
		background: black;
	}
}






/**
 * メンバーの編集
 -------------------------------------------------- */
.p-form_photo {
	display: flex;
	align-items: center;
}
.photo_img {
	position: relative;
	overflow: hidden;
	width: 120px;
	height: 120px;
	border-radius: 120px;
	background: #bbb center / cover no-repeat;
}
.photo_img.-a { background-image: url(../img/member_a.png); }
.photo_img.-b { background-image: url(../img/member_b.png); }
.photo_img.-c { background-image: url(../img/member_c.png); }
.photo_img.-d { background-image: url(../img/member_d.png); }
.photo_img.-e { background-image: url(../img/member_e.png); }
.photo_img.-f { background-image: url(../img/member_f.png); }
.photo_img.-g { background-image: url(../img/member_g.png); }
.photo_img.-h { background-image: url(../img/member_h.png); }
.photo_img.-i { background-image: url(../img/member_i.png); }
.photo_img.-j { background-image: url(../img/member_j.png); }
.photo_img.-k { background-image: url(../img/member_k.png); }
.photo_img.-l { background-image: url(../img/member_l.png); }
.photo_img.-m { background-image: url(../img/member_m.png); }
.photo_img.-n { background-image: url(../img/member_n.png); }
.photo_img.-o { background-image: url(../img/member_o.png); }
.photo_img.-p { background-image: url(../img/member_p.png); }
.photo_img.-q { background-image: url(../img/member_q.png); }
.photo_img.-r { background-image: url(../img/member_r.png); }
.photo_img.-s { background-image: url(../img/member_s.png); }
.photo_img.-t { background-image: url(../img/member_t.png); }
.photo_img.-u { background-image: url(../img/member_u.png); }
.photo_img.-v { background-image: url(../img/member_v.png); }
.photo_img.-w { background-image: url(../img/member_w.png); }
.photo_img.-x { background-image: url(../img/member_x.png); }
.photo_img.-y { background-image: url(../img/member_y.png); }
.photo_img.-z { background-image: url(../img/member_z.png); }
.photo_img img,
.photo_img .img {
	width: 100%;
	height: 100%;
}
.photo_img img {
	object-fit: cover;
}
.photo_img .o-loader {
	position: absolute;
	top: calc(50% - 12px);
	left: calc(50% - 12px);
	width: 24px;
	height: 24px;
	transition: opacity .3s;
}
.photo_img .o-loader .ico {
	stroke: #00a0e9;
	animation: loading .8s infinite linear, loader 1.2s infinite cubic-bezier(.3,0,.3,1);
}
.photo_img:not(.is-loading) .o-loader {
	opacity: 0;
}
.photo_submit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-left: 20px;
}
.photo_submit .o-error {
	height: calc(1.2rem * 1.8);
	margin: 0 0 8px;
	padding: 0;
}
.photo_submit .o-error:not(.is-active) {
	height: 0;
	margin-bottom: 0;
}
.photo_submit .o-error.is-active {
	will-change: height, margin, opacity;
}
.photo_submit .o-button_wrap {
	margin-right: 1em;
	vertical-align: middle;
}
.photo_submit .selected_file {
	display: inline-block;
	font-size: 1.2rem;
}
.photo_submit .o-button_wrap,
.photo_submit .l-button_wrap {
	width: 210px
}
.photo_submit .l-button_wrap {
	flex-wrap: nowrap;
	margin-top: 10px;
}
.photo_submit .l-button_wrap .o-button {
	flex-basis: calc(50% - 5px);
}
.photo_submit .l-button_wrap .o-button:nth-child(n+2) {
	margin-left: 10px;
}
.photo_submit .o-button {
	min-width: auto;
	margin: 0;
	padding: 6px 1em;
	font-size: 1.4rem;
}
.photo_submit .o-button.-min {
	margin-top: 18px;
	padding: 3px 1em;
	border-radius: 5px;
	font-size: 1rem;
}
@media screen and (max-width: 767px) {
	.photo_submit .selected_file {
		display: block;
	}
	.photo_submit .o-button_wrap {
		margin-right: 0;
		vertical-align: top;
	}
}
@media screen and (max-width: 480px) {
	.p-form_photo {
		flex-direction: column;
	}
	.photo_img {
		margin-bottom: 20px;
	}
	.photo_submit {
		margin-left: 0;
		text-align: center;
	}
}

/* :::::: 投稿を削除 :::::: */
.p-form_submit .form_delete {
	flex-basis: 100%;
	margin-top: 40px;
	padding: 8px;
	text-align: center;
}
.p-form_submit .form_delete .ico {
	position: relative;
	top: -.15em;
	margin-right: 8px;
	vertical-align: middle;
}


/**
 * 投稿の編集
 -------------------------------------------------- */
.p-form_media {
	padding: 20px 20px 40px;
	background: white;
}


/* :::::: ファイルアップロードエラー :::::: */
.o-error {
	overflow: hidden;
	width: 100%;
	margin-top: 20px;
	padding: 0 20px;
	color: red;
	transition: height .4s, margin-top .2s, opacity .4s .2s;
}
.error_title {
	font-size: 2.4rem;
	text-transform: uppercase;
}
.error_message {
	font-size: 1.2rem;
}
.o-error:not(.is-active) {
	pointer-events: none;
	margin-top: 0;
	opacity: 0;
	transition-delay: 0s;
}
.o-error:not(:empty) {
	opacity: 1;
}




/* :::::: クレジット :::::: */
.c-credit_list {
	position: relative;
}
.c-credit_list .c-credit_item {
	counter-increment: num;
	width: 100%;
	margin: 0;
}
.c-credit_list .c-credit_item::before {
	content: counter(num);
	flex-basis: calc(1.2em + 16px);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 8px;
	background: white;
}
.c-credit_list .c-credit_item[data-order]::before {
	content: attr(data-order);
}
.c-credit_list .c-credit_item:hover {
	z-index: 100;
}

/* :::::: 全削除 :::::: */
.all-image-deleter {
	margin-top: 80px;
}
.c-uploaded.-deleter {
	max-width: 720px;
	margin: 80px auto 0;
}
.c-uploaded.-deleter .c-uploaded_item {
	flex-basis: calc(33.33333% - 96px / 3);
	max-width: calc(33.33333% - 96px / 3);
}
.c-uploaded.-deleter .c-uploaded_item:not(:nth-child(3n+1)) {
	margin-left: 48px;
}
.c-uploaded.-deleter .c-uploaded_item:nth-child(n+4) {
	margin-top: 48px;
}
.c-uploaded.-deleter .c-uploaded_item::after {
	display: none;
}
.c-uploaded.-deleter figcaption {
	font-size: 1.2rem;
	text-align: left;
}

/* :::::: close button :::::: */
.o-delete {
	z-index: 1;
	position: absolute;
	top: -12px;
	right: -12px;
	width: 30px;
	height: 30px;
	border-radius: 30px;
	color: white;
	background: black;
}
.o-delete::before,
.o-delete::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 8px;
	width: 14px;
	border-top: 1px solid currentcolor;
}
.o-delete::before {
	transform: rotate(45deg);
}
.o-delete::after {
	transform: rotate(-45deg);
}

/* :::::: データリスト :::::: */
.js-datalist .arr {
	pointer-events: none;
	position: absolute;
	top: calc(50% + .9em - 3px);
	right: 1em;
	fill: currentcolor;
	transform: rotate(90deg);
}
.form_wrap .js-datalist .arr,
.js-datalist .js-pulldown .arr,
.js-datalist.-order .arr {
	top: calc(50% - 3px);
}
.js-datalist .o-input:disabled + .arr {
	fill: #aaa;
}
.js-datalist_items {
	z-index: 10;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	color: black;
	background: #fafafa;
	transition: opacity .4s, transform .4s;
}
.js-datalist:not(.is-active) .js-datalist_items {
	pointer-events: none;
	opacity: 0;
	transform: translateY(-4px);
}
.js-datalist_option {
	display: flex;
	flex-direction: column;
	overflow: auto;
	max-height: 320px;
	padding: 10px 0;
}
.-year.js-datalist .js-datalist_option {
	flex-direction: column-reverse;
}
.js-datalist_option .is-selected {
	color: #00a0e9;
}
.js-datalist_option a {
	cursor: pointer;
	display: block;
	height: 25px;
	padding: 0 20px;
}
@media (hover: hover) {
	.js-datalist_option a:hover {
		color: #00a0e9;
	}
}

/* :::::: 社員選択 :::::: */
.form_column .member_select {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	min-width: 128px;
	height: 40px;
	padding: 0 24px 0 16px;
	color: white;
	white-space: nowrap;
	background: black;
}
.form_column .member_select .arr {
	top: calc(50% - 3px);
	transition: transform .4s;
}
.form_column:not(.is-active) .member_select .arr {
	transform: rotate(-90deg);
}
.form_column.is-active .member_select .arr {
	transform: rotate(90deg);
	transition-duration: .2s;
}
.member_select .js-datalist_items {
	background: #fafafa;
}
.member_select .js-datalist_items,
.member_select .c-pulldown .pulldown_label {
	width: 12em;
}
.member_select .c-pulldown {
	overflow-x: hidden;
	overflow-y: auto;
}
.member_select .c-pulldown .pulldown_item {
	width: 12em;
}
.member_select .c-pulldown .pulldown_label {
	display: inline-block;
	height: auto;
	padding: 4px 20px;
	background: #fafafa;
}
.member_select .c-pulldown .pulldown_item .pulldown_label .ico {
	margin: -.2em 0 0 .3em;
	fill: currentcolor;
	vertical-align: middle;
	transition: opacity .4s, transform .4s;
}
.member_select .c-pulldown .pulldown_item:hover .pulldown_label {
	background: #f4f4f4;
}
.member_select .c-pulldown .pulldown_item:not(:hover) .pulldown_label .ico {
	opacity: 0;
	transform: translateX(-4px);
}
.member_select .c-pulldown .pulldown_item:hover .pulldown_label .ico {
	transition-duration: .2s;
}
.member_select .c-pulldown .pulldown_content {
	position: absolute;
	overflow: auto;
	top: 0;
	left: 100%;
	height: 100%;
	max-height: 320px;
	padding: 10px 20px;
	background: #f4f4f4;
	transition: opacity .4s, transform .4s;
}
.member_select .c-pulldown .pulldown_item:not(:hover) .pulldown_content {
	opacity: 0;
	transform: translateX(-4px);
	pointer-events: none;
}
.member_select .c-pulldown .pulldown_item:hover .pulldown_content {
	transition-duration: .2s;
}

.member_select .c-pulldown .member_list {
	display: flex;
	flex-wrap: wrap;
}
.member_select .c-pulldown .member_item {
	flex-basis: 7.5em;
}
.member_select .c-pulldown .member_item a {
	height: auto;
	padding: 4px 10px;
}

/*.member_select .c-pulldown {
	width: calc(12em + 7.5em * 3);
}*/
.member_select .c-pulldown .pulldown_content {
	width: calc(7.5em * 3 + 40px);
}
/* クレジットのところの社員選択はウィンドウ幅で列減少 */
@media screen and (max-width: 1199px) {
	/*.c-credit_list .member_select .c-pulldown {
		width: calc(12em + 7.5em * 2);
	}*/
	.c-credit_list .member_select .c-pulldown .pulldown_content {
		width: calc(7.5em * 2 + 40px);
	}
}
@media screen and (max-width: 850px) {
	/*.c-credit_list .member_select .c-pulldown {
		width: calc(12em + 7.5em);
	}*/
	.c-credit_list .member_select .c-pulldown .pulldown_content {
		width: calc(7.5em + 40px);
	}
}

/* :::::: effect :::::: */
@media (hover: hover) {
	.o-delete {
		transition: opacity .4s, transform .4s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.c-uploaded_item .spacer {
		transition: opacity .4s, transform .4s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.c-uploaded_item .o-delete:hover {
		transform: scale(1.1);
	}
	.c-uploaded_item .o-delete:hover + .spacer,
	.c-uploaded_item .o-delete:hover + figure .spacer {
		opacity: .8;
		transform: scale(.96);
	}
}




.member_item.is-position {
	color: #aaa;
	pointer-events: none;
}




/**
 * モーダル・アラート
 -------------------------------------------------- */
.l-alert,
.l-dialogue {
	z-index: 101;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	text-align: center;
}
.l-alert,
.alert_overlay,
.l-dialogue,
.dialogue_overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.alert_overlay,
.dialogue_overlay {
	z-index: -1;
	position: absolute;
	background: rgba(0,0,0,.1);
}
.alert_container,
.dialogue_container {
	position: relative;
	min-width: 320px;
	padding: 40px;
	background: white;
	color: white;
	background: black;
}
.l-alert .o-close,
.l-dialogue .o-close {
	position: absolute;
	top: 10px;
	right: 10px;
}
@media screen and (max-width: 374px) {
	.alert_container,
	.dialogue_container {
		min-width: calc(100% - 40px);
	}
}
@media screen and (min-width: 768px) {
	.alert_container,
	.dialogue_container {
		padding: 60px;
	}
	.l-alert .o-close,
	.l-dialogue .o-close {
		top: 20px;
		right: 20px;
	}
}

.alert_message,
.dialogue_message {
	font-size: 1.4rem;
}
.alert_message small,
.dialogue_message small {
	font-size: 1.2rem;
}
.alert_submit,
.dialogue_button {
	margin-top: 20px;
}
.dialogue_button {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.l-alert .o-button,
.dialogue_button .o-button {
	color: black;
	background: white;
}
@media (hover: hover) {
	.l-alert .o-button:hover,
	.dialogue_button .o-button:hover {
		color: white;
		background: #00a0e9;
	}
}

/* :::::: before/after :::::: */
.l-alert:not(.is-active),
.l-dialogue:not(.is-active) {
	pointer-events: none;
}
.l-alert:not(.is-active) .alert_overlay,
.l-dialogue:not(.is-active) .dialogue_overlay {
	opacity: 0;
}
.l-alert:not(.is-active) .alert_container,
.l-dialogue:not(.is-active) .dialogue_container {
	opacity: 0;
	transform: scale(.8);
}
.l-alert.is-active .o-close:hover {
	color: #00a0e9;
}

/* :::::: timing :::::: */
.l-alert.is-anim .o-close,
.l-alert.is-anim .alert_overlay {
	transition: color .4s;
}
.l-alert.is-anim .alert_container,
.l-dialogue.is-anim .dialogue_overlay,
.l-dialogue.is-anim .dialogue_container {
	transition: opacity .4s, transform .4s;
}
.l-alert.is-anim:not(.is-active) .alert_container,
.l-dialogue.is-anim:not(.is-active) .dialogue_container {
	transition-delay: .2s;
}


/**
 * ユーザー一覧テーブル
 -------------------------------------------------- */
.l-form_container.-userlist {
	max-width: 1000px;
	margin: 40px auto 0;
}

.user-table {
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.4;
	border-collapse: collapse;
}
.user-body .user-row {
	height: 56px;
	background: white;
}
.user-body .user-row.-even {
	background: #f6f6f6;
}
.user-body .no-data {
	display: block;
	text-align: center;
}
:where(.user-table) th:not(:empty),
:where(.user-table) td:not(:empty) {
	padding: 8px 16px;
}
:where(.user-table) .user_name:not(:empty) {
	padding-left: 24px;
}
:where(.user-table) .user_button:not(:empty) {
	width: 120px;
}
.user-table .o-button {
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border-radius: 5px;
	color: black;
	background: none;
}
.user-table .o-button + .o-button {
	margin-left: 8px;
}
@media (hover: hover) {
	.user-table .o-button:hover {
		color: white;
		background: #00a0e9;
	}
}

/* delete motion */
.user-body .user-row.is-anim {
	transition: opacity .4s, transform .4s cubic-bezier(.3,1,.7,1);
}
.user-body .user-row.is-remove {
	opacity: 0;
	transform: translateX(24px);
}



/* 開発用 */
.user-table .user-row:first-child td {
	pointer-events: none;
	user-select: none;
	color: #ccc;
}
.user-table .user-row:first-child .o-button {
	opacity: .3;
	pointer-events: none;
}


/**
 * 作品を検索（絞り込み）
 -------------------------------------------------- */
.p-form_refine {
	margin-top: 56px;
}
.p-form_refine .form_label {
	font-size: 2.4rem;
}
.p-form_refine .form_label small:not([class]) {
	margin-left: .5em;
	font-size: 1.4rem;
}
.refine_container {
	position: relative;
	margin-top: 8px;
	padding: 20px 24px 24px;
	font-size: 1.4rem;
	background: white;
	text-transform: uppercase;
}
.refine_container .o-button {
	width: 100%;
	margin-top: 16px;
	border-radius: 4px;
}

/* :::::: すべての条件をクリア :::::: */
.refine_clear {
	cursor: pointer;
	top: calc(100% + 6px);
	right: 0;
	position: absolute;
	font-size: 1.2rem;
	white-space: nowrap;
	transition: color .2s;
}
.refine_clear:focus {
	outline: transparent;
}
.refine_clear:hover {
	color: #00a0e9;
}
.refine_clear .ico {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	margin-top: -.2em;
	vertical-align: middle;
}
.refine_clear .ico::before,
.refine_clear .ico::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	width: 12px;
	border-top: 1px solid currentcolor;
}
.refine_clear .ico::before {
	transform: rotate(45deg);
}
.refine_clear .ico::after {
	transform: rotate(-45deg);
}

/* :::::: 社外メンバーのクレジット表示 :::::: */
.c-credit {
	display: flex;
	flex-wrap: wrap;
	margin-top: 8px;
}
.credit_item {
	flex-basis: 20%;
}

/* :::::: 条件を追加 :::::: */
.o-button.has-checkbox {
	display: flex;
	justify-content: center;
	position: relative;
	min-height: 40px;
	font-size: 1.4rem;
}
.o-button.has-checkbox::before {
	content: "";
	display: inline-block;
	margin: -.1em 6px 0 0;
	border-width: 3px 0 3px 6px;
	border-style: solid;
	border-color: transparent;
	border-left-color: currentcolor;
	vertical-align: middle;
}
.o-button.has-checkbox .o-checkbox {
	width: 14px;
	height: 14px;
}
.o-button.has-checkbox .o-checkbox:checked {
	border-color: #23b6fb;
	background: #00a0e9;
}

/* :::::: 選択した条件で検索 :::::: */
.p-form_refine .l-button_wrap {
	margin-top: 32px;
}


/**
 * 閲覧可能作品の選択
 -------------------------------------------------- */
.clip-works_container {
	z-index: 1;
	position: relative;
	margin-top: 56px;
	padding-top: 48px;
	border-top: 1px solid gainsboro;
}
.clip-works_container:not(.is-active) {
	pointer-events: none;
	margin-top: -90px;
	padding-top: 0;
	opacity: 0;
}
.clip-works_container.is-anim {
	transition: margin .3s, padding .3s, opacity .3s;
	transition-delay: .3s, .3s, 0s;
}
.clip-works_container.is-anim.is-active {
	transition-delay: 0s, 0s, .3s;
}

/* :::::: 新着順 :::::: */
.form_column.-order {
	display: inline-block;
	margin-top: 8px;
	font-size: 1.4rem;
}
.form_column.-order .o-input {
	width: 80px;
	height: 30px;
	padding-bottom: 4px;
	font-size: inherit;
}
.form_column.-order .js-datalist_option a {
	padding: 0 10px;
}

/* :::::: すべてクリップする/はずす :::::: */
.c-cliptoggle {
	display: inline-flex;
	justify-content: flex-end;
	float: right;
	margin-top: 8px;
	font-size: 1.2rem;
}
.c-cliptoggle button {
	transition: color .2s;
}
.c-cliptoggle button:focus {
	outline: transparent;
}
.c-cliptoggle button:hover {
	color: #00a0e9;
}
.c-cliptoggle li + li {
	margin-left: 20px;
}
.c-cliptoggle .ico {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	margin-top: -.1em;
	vertical-align: middle;
}
.clip-on .ico {
	margin-right: .2em;
	fill: none;
	stroke: currentcolor;
}
.clip-off .ico {
	margin-top: -.2em;
}
.clip-off .ico::before,
.clip-off .ico::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	width: 12px;
	border-top: 1px solid currentcolor;
}
.clip-off .ico::before {
	transform: rotate(45deg);
}
.clip-off .ico::after {
	transform: rotate(-45deg);
}

/* :::::: 作品一覧 :::::: */
.clip-works_container .js-response {
	clear: both;
	z-index: 1;
	overflow: auto;
	height: 0;
	max-height: 640px;
	margin-top: 16px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	transition: height .3s;
}
.clip-works_container .c-products {
	margin-top: 0;
	min-height: 0;
}
.clip-works_container .no-products {
	margin-top: 16px;
	padding: 40px 20px;
	text-align: center;
	background: white;
}
.clip-works_container .js-response .o-loader {
	position: absolute;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
}
.clip-works_container .js-response.is-loading .c-products,
.clip-works_container .js-response.is-loading .no-products,
.clip-works_container .js-response:not(.is-loading) .o-loader {
	opacity: 0;
}
.clip-works_container .js-response.is-anim .c-products,
.clip-works_container .js-response.is-anim .no-products,
.clip-works_container .js-response.is-anim .o-loader {
	transition: opacity .3s;
}
.clip-works_container .products_item {
	width: calc(33.33333% - 20px);
}
.clip-works_container .products_item a.js-transition {
	transition: filter .4s;
}
.clip-works_container .products_item:not(.is-selected) a.js-transition {
	pointer-events: none;
	filter: opacity(.3) saturate(0);
}
.clip-works_container .products_item a::before {
	z-index: 1;
	background: rgba(0,0,0,.5);
	mix-blend-mode: normal;
}
.clip-works_container .products_item .ico {
	pointer-events: none;
	fill: none;
	stroke: white;
	width: 40px;
	height: 40px;
}
.clip-works_container .products_item a > .ico {
	z-index: 1;
	position: absolute;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	transition: opacity .4s, transform .4s cubic-bezier(0.33, 1, 0.68, 1);
}
.clip-works_container .products_item a:not(:hover) > .ico {
	opacity: 0;
	transform: scale(.8);
}
.clip-works_container .products_item .o-clip {
	cursor: pointer;
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	line-height: 1;
}
.clip-works_container .products_item .o-clip .ico {
	width: 30px;
	height: 30px;
	background: #ccc;
	transition: background .2s;
}
.clip-works_container .products_item .o-clip input {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect(0,0,0,0);
}
.clip-works_container .products_item .o-clip input:hover + .ico {
	background: #aaa;
}
.clip-works_container .products_item .o-clip input:checked + .ico {
	background: #00a0e9;
	transition-duration: .2s;
}
.clip-works_container .products_end {
	display: none;
}

.clip-works_container .is-empty {
	padding: 24px 0 24px 20px;
	text-align: center;
}


/**
 * 検索条件を追加（モーダル）
 -------------------------------------------------- */
.modal_container .p-refine {
	position: relative;
	max-width: 750px;
	margin: 64px auto;
	text-align: left;
}
.p-refine .o-title {
	text-align: inherit;
}
.p-refine .o-title small {
	font-size: 1.4rem;
}

/* すべて選択をはずす */
.refine-reset {
	position: absolute;
	top: 1.25em;
	right: 0;
	font-size: 1.4rem;
}
.refine-reset:focus {
	outline: transparent;
}
.refine-reset:hover {
	color: #00a0e9;
}
.refine-reset .ico {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	margin-top: -.2em;
	vertical-align: middle;
}
.refine-reset .ico::before,
.refine-reset .ico::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	width: 12px;
	border-top: 1px solid currentcolor;
}
.refine-reset .ico::before {
	transform: rotate(45deg);
}
.refine-reset .ico::after {
	transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
	.refine-reset {
		top: .6em;
	}
}

/* CLIENT */
.c-refine_list {
	position: relative;
	max-width: none;
	margin: 24px 0 0;
	font-size: 1.4rem;
	line-height: 1.6;
	text-align: left;
}
.c-refine_list.c-client-category .c-checkbox {
	white-space: normal;
}
.c-refine_list_wrap {
	display: flex;
}
.c-refine_list_wrap .c-refine_list {
	flex-basis: 33.33333%;
}

.c-member,
.c-gridlist {
	display: grid;
	grid-template: auto / repeat(auto-fit, 9em);
}
.p-refine .c-gridlist {
	grid-template: auto / repeat(auto-fit, 25%);
}

/* 広告賞 */
.c-award {
	display: flex;
	margin-top: 24px;
	font-size: 1.4rem;
}
.c-award .award_item + .award_item {
	margin-left: 40px;
}

/* 選択した条件を追加 */
.p-addhint {
	margin-top: 80px;
}


/**
 * 登録内容の確認
 -------------------------------------------------- */
.confirm_text {
	margin-top: 40px;
	color: red;
}
.confirm_data {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 1.4rem;
	text-align: left;
}
.confirm_data dt,
.confirm_data dd {
	margin-top: 8px;
	padding: 8px 1em;
}
.confirm_data dt {
	flex-basis: 12em;
	background: #ccc;
}
.confirm_data dd {
	background: white;
}
.confirm_data .password,
.confirm_data .outsider {
	margin-left: auto;
}
.confirm_data .name + dd,
.confirm_data .title + dd,
.confirm_data .memo + dd {
	flex-basis: calc(100% - 12em);
}
.confirm_data .id + dd,
.confirm_data .password + dd,
.confirm_data .valid + dd,
.confirm_data .outsider + dd {
	flex-basis: calc(50% - 12em - 4px);
}
.l-confirm_contents {
	overflow: auto;
	max-width: 750px;
	max-height: 640px;
	margin: 0 auto;
}
.confirm_label {
	display: inline-block;
	z-index: 1;
	position: relative;
	margin: 32px 0 -1.8em;
	padding: .4em;
	color: white;
	font-size: 1.2rem;
	line-height: 1;
	vertical-align: middle;
	text-transform: uppercase;
	background: black;
}
.l-confirm_contents.c-scrollbar::-webkit-scrollbar-track {
	background: white;
}
.l-confirm_contents .header {
	text-align: center;
}
.l-confirm_contents .profile_visual {
	height: auto;
	min-height: 0;
	margin: 0;
}
.l-confirm_contents .profile_visual img {
	position: relative;
	aspect-ratio: 16 / 9;
}
.l-confirm_contents .response_label {
	margin-bottom: 32px;
}
.l-confirm_contents .c-products {
	margin: 0 0 0 -10px;
}
.l-confirm_contents .header + .c-products {
	margin-top: 32px;
}
.l-confirm_contents .c-products .products_item {
	width: calc(33.33333% - 10px);
	margin: 0 0 10px 10px;
}

/* 複数メンバーのプレビュー */
.l-confirm_contents .confirm_wrapper {
	position: relative;
	overflow: hidden;
}
.l-confirm_contents .onetime_arrows {
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: calc(740px * .5625 / 2);
	width: 48px;
	height: 48px;
}
.l-confirm_contents .onetime_arrows.-prev {
	left: 8px;
}
.l-confirm_contents .onetime_arrows.-next {
	right: 8px;
}
.l-confirm_contents .onetime_arrows .arr {
	width: 80%;
	height: auto;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2.5;
}
.l-confirm_contents .onetime_arrows.-next .arr {
	transform: scaleX(-1);
}
@media (hover: hover) {
	.l-confirm_contents .onetime_arrows {
		transition: transform .2s;
	}
	.l-confirm_contents .onetime_arrows.-prev:hover {
		transform: translateX(-4px);
	}
	.l-confirm_contents .onetime_arrows.-next:hover {
		transform: translateX(4px);
	}
}
.l-confirm_contents .confirm_item:not(.is-active) {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity .2s;
}


/**
 * カテゴリー編集
 -------------------------------------------------- */
.p-form_edit {
	
}
.p-form_edit .form_row {
	justify-content: center;
}
.p-form_edit .form_row:nth-child(n+2) {
	margin-top: 8px;
}
.p-form_edit .o-button {
	min-width: 0;
	height: 40px;
	margin: 0;
	border-radius: 5px;
}











/**
 * 閲覧作品を制限する
 -------------------------------------------------- */
.o-step_list {
	list-style: none;
	display: flex;
	align-items: center;
	max-width: 750px;
	margin: 0 auto 48px;
	font-size: 1.2rem;
	line-height: 1.2;
}
.o-step_list .step_item {
	flex-grow: 1;
	position: relative;
	padding: .8em;
	color: white;
	background: #bcbcbc;
}
.o-step_list .step_item:first-child {
	padding-left: calc(8px + .8em);
}
.o-step_list .step_item:not(:first-child) {
	margin-left: 16px;
}
.o-step_list .step_item:last-child {
	padding-right: calc(8px + .8em);
}
.o-step_list .step_item:not(:last-child) {
	margin-right: 16px;
}
.o-step_list .step_item .arr {
	position: absolute;
	top: 0;
	width: 24px;
	height: 100%;
	fill: #bcbcbc;
}
.o-step_list .step_item .arr.b {
	right: calc(100% - 4px);
}
.o-step_list .step_item .arr.t {
	left: calc(100% - 4px);
}
.o-step_list.is-step1 .-step1,
.o-step_list.is-step2 .-step2,
.o-step_list.is-step3 .-step3 {
	background: black;
}
.o-step_list.is-step1 .-step1 .arr,
.o-step_list.is-step2 .-step2 .arr,
.o-step_list.is-step3 .-step3 .arr {
	fill: black;
}

.o-step_contents .step_content .o-caution {
	margin-top: 24px;
}
.o-step_contents .step_content .p-form_input {
	margin-top: 40px;
}


.p-form_refine {
	position: relative;
	margin-top: 40px;
	padding: 24px;
	background: white;
}
.p-form_refine.-fromworks {
	margin-top: 4px;
}
.p-form_refine .form_label {
	letter-spacing: .1em;
}
.p-form_refine .form_label .c-radio {
	display: flex;
	padding-top: 0;
	padding-bottom: 0;
}

/* LIKES を含める */
.p-form_refine .has-likes {
	position: absolute;
	top: 32px;
	left: calc(2.4rem * 12);
	font-size: 1.4rem;
}
.js-radioContent:not(.is-open) .has-likes {
	pointer-events: none;
	color: #bcbcbc;
}
.js-radioContent:not(.is-open) .has-likes input:checked {
	border-color: #bcbcbc;
	background: #bcbcbc;
}
.js-radioContent:not(.is-open) .refine-reset {
	pointer-events: none;
	color: #bcbcbc;
}

/* すべて選択をはずす */
.p-form_refine .refine-reset {
	top: 32px;
	right: 24px;
	font-size: 1.2rem;
	padding: .2em .6em;
	background: #f0f0f0;
}

/* メンバーを選択する */
.p-form_refine .c-member-position {
	
}
.js-accToggle {
	cursor: pointer;
	display: flex;
	align-items: center;
	height: 32px;
}
@media (hover: hover) {
	.js-accToggle {
		transition: opacity .4s;
	}
	.js-accToggle:hover {
		opacity: .5;
		transition-duration: .2s;
	}
}
.js-accContent > * {
	padding: 8px 8px 8px 28px;
}
.js-accContent .c-checkbox {
	min-height: 18px;
}
.js-accToggle .ico {
	position: relative;
	top: -.1em;
	width: 19px;
	height: 19px;
	margin-right: 8px;
	pointer-events: none;
}
.js-accToggle .ico::before,
.js-accToggle .ico::after {
	content: "";
	position: absolute;
	left: 10%;
	top: 50%;
	width: 80%;
	border-top: 1px solid currentcolor;
}
.js-accToggle .ico::after {
	transition: transform .2s cubic-bezier(.7,0,.3,1);
}
.js-accToggle:not(.is-open) .ico::after {
	transform: rotate(90deg);
}











/**
 * メンバー管理
 -------------------------------------------------- */
.member-table {
	font-size: 1.4rem;
	line-height: 1.4;
	border-collapse: collapse;
}
.member-table .member-body {
	position: relative;
}
.member-table .room-group {
	width: 100%;
}
.member-table .room-group.-draggable {
	cursor: grab;
}
.member-table .room-group.is-pointer-down {
	cursor: grabbing;
}
.member-table .room-group.is-dragging,
.member-table .room-group.is-positioning-post-drag {
	z-index: 1;
}
.member-table .member-row,
.member-table .room-row {
	display: grid;
	align-items: center;
	grid-template-columns: calc(12em + 40px) 1fr calc(5em + 32px) 80px;
}
.member-table .room-row {
	height: 56px;
	background: white;
}
.member-body.is-even + .room-group .room-row,
.member-table .room-group:nth-child(even) .room-row {
	background: #fafafa;
}

:where(.member-table .member-row) > :not(:empty),
:where(.member-table .room-row) > :not(:empty) {
	padding: 8px 16px;
}
:where(.member-table) .member_name:not(:empty) {
	padding-left: 24px;
}
:where(.member-table) .edit:not(:empty) {
	padding-right: 24px;
}

.member-table .room_name {
	width: calc(12em + 40px);
	padding-left: 24px;
}
.member-table .member_name {
	width: auto;
}
.member-table .value {
	width: calc(5em + 32px);
	text-align: center;
}
.member-table .value_num {
	position: relative;
	padding: 8px;
	transition: color .2s;
}
:where(.member-table .value_num) {
	display: flex;
}
.member-table .value_num .ico {
	position: absolute;
	top: calc(50% - 3px);
	left: 100%;
	width: 7px;
	height: 6px;
	fill: currentcolor;
}
.member-table .edit {
	width: 80px;
}

.member-table .o-button {
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border-radius: 5px;
	color: black;
	background: none;
}

.member-table .room_members {
	grid-column: 2 / 5;
	padding: 0;
}
.room_members_list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.room_members_list > * {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 16px;
}
.member-table .room-group:nth-child(odd) .room_members_list > *:nth-of-type(even) {
	background: #eaeaea;
}
.member-table .room-group:nth-child(even) .room_members_list > *:nth-of-type(odd) {
	background: #eaeaea;
}
.room_members_list .member_name {
	width: calc(100% - 80px);
}
.room_members_list .edit {
	width: 80px;
}
@media (hover: hover) {
	.member-table .js-accToggle .ico {
		opacity: 0;
		transform-origin: center;
		transform: translateY(-4px);
		transition: opacity .4s, transform .4s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.member-table .js-accToggle.is-open {
		color: #00a0e9;
	}
	.member-table .js-accToggle:hover .ico,
	.member-table .js-accToggle.is-open .ico {
		opacity: 1;
		transform: none;
	}
	.member-table .js-accToggle.is-open .ico {
		transform: rotateX(180deg);
	}
	.member-table .o-button:hover {
		color: white;
		background: #00a0e9;
	}
}
.member-table .value_num.hover {
	color: #00a0e9;
}
.member-table .o-button.hover {
	color: white;
	background: #00a0e9;
}








/**
 * ルームを編集する
 -------------------------------------------------- */
.members_list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	min-width: 100%;
}
.members_list[style] {
	transition: height .2s;
}
.members_list.js-tilelist {
	width: auto;
	max-width: none;
}
.members_item {
	flex-basis: calc(33.33333% - 32px / 3);
	width: calc(33.33333% - 32px / 3);
}
.members_item.js-tile {
	position: absolute;
}
.members_item,
.members_item .photo {
	position: relative;
}
.members_item .o-delete {
	z-index: 2;
}
.members_item .photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,.8);
}
.members_item .photo img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.members_item .info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1;
	position: absolute;
	inset: 0;
	line-height: 1.6;
}
.members_item .name {
	font-size: 1.8rem;
}
.members_item .job {
	font-size: 1rem;
}
.members_item .job:empty::after {
	content: "役職未設定";
}
.members_item:first-child .job::before {
	content: "室長";
	margin-right: .5em;
	padding: 0 .1em .05em .2em;
	border: 1px solid rgba(0,0,0,.3);
}

.members_item.is-delete .photo,
.members_item.is-delete .info,
.members_item.is-delete .o-delete {
	animation: deleteEffect .3s;
}
@keyframes deleteEffect {
	to { opacity: 0; transform: scale(.8); }
}

/* :::::: effect :::::: */
@media (hover: hover) {
	.members_item .info,
	.members_item .photo::before {
		transition: opacity .4s;
	}
	.members_item:hover .info,
	.members_item:hover .photo::before {
		opacity: 0;
		transition-duration: .2s;
	}
	
	/* delete */
	.members_item .photo,
	.members_item .info {
		transition: opacity .4s, transform .4s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.members_item .o-delete:hover {
		transform: scale(1.1);
	}
	.members_item .o-delete:hover ~ .photo,
	.members_item .o-delete:hover ~ .info {
		transform: scale(.96);
	}
	.members_item .o-delete:hover ~ .photo {
		opacity: .8;
	}
}