@charset "utf-8";

:root {

}

@media (prefers-color-scheme: dark) {
	:root {

	}
}

/* モバイル　ALL */
@media screen and (max-width: 425px) {
	:root {

		/* 要項 */
		--Guidelines_Li_align-items: flex-start;
		--DivGuidelines_Li_Strong_align-items: flex-start;
	}
}

/* タブレット */
@media screen and (min-width:426px) and (max-width: 768px) {
	:root {

		/* 要項 */
		--Guidelines_Li_align-items: flex-start;
		--DivGuidelines_Li_Strong_align-items: flex-start;
	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

		/* 要項 */
		--Guidelines_Li_align-items: center;
		--DivGuidelines_Li_Strong_align-items: center;

	}
}

/* ノートパソコン L */
@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

		/* 要項 */
		--Guidelines_Li_align-items: center;
		--DivGuidelines_Li_Strong_align-items: center;

	}
}

/* 2K以上 */
@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {

		/* 要項 */
		--Guidelines_Li_align-items: center;
		--DivGuidelines_Li_Strong_align-items: center;

	}
}

/* 4K以上 */
@media screen and (min-width:2561px) {
	:root {

		/* 要項 */
		--Guidelines_Li_align-items: center;
		--DivGuidelines_Li_Strong_align-items: center;

	}
}








/* ーーーーーーーーーーーーーーーーーーーー
   コンテンツ
ーーーーーーーーーーーーーーーーーーーー */

section#contents.work {
}






/* 募集要項 */

#guidelines {
	display: flex;
	flex-direction: column;
	gap: var(--Size_04);
}

#guidelines li {
	display: flex;
	flex-wrap: wrap;
	flex-direction: var(--Flex-direction_CCRRRR);
	align-items: var(--Guidelines_Li_align-items);
	gap: var(--Size_03) var(--Size_12);
	transition: var(--Transition_04s);
	-o-transition: var(--Transition_04s);
	-moz-transition: var(--Transition_04s);
	-webkit-transition: var(--Transition_04s);
}

#guidelines li em {
	padding: var(--Size_01) var(--Size_03);
	font-size: var(--Size_08);
	color: var(--Color_1D100);
	background: var(--Color_FF100);
	border-radius: var(--Border-radius_L);
}

#guidelines li strong {
	display: flex;
	flex-direction: var(--Flex-direction_CCRRRR);
	align-items: var(--DivGuidelines_Li_Strong_align-items);
	gap: var(--Size_03) var(--Size_12);
	font-size: var(--Size_10);
	color: var(--Color_FF100);
	line-height: 1.4;
}


section#contents.work p a {
	display: inline-flex;
	padding: var(--Size_03) var(--Size_12);
	background: var(--Color_1D100);
	border-radius: var(--Border-radius_S);
}


section#contents.work p a:hover {
	color: var(--Color_1D100);
	background: var(--Color_FF100);
}

section#contents.work ol li:hover {
	background: var(--Color_A100);
}








/* タブ */

div#qanda {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--Size_03);
	margin: var(--Width_M);
}

div#qanda .tab_item {
	padding: var(--Size_02) var(--Size_04);
	color: var(--Color_FF100);
	background: var(--Color_A040);
	border-radius: var(--Border-radius_S);
	cursor: pointer;
}

div#qanda label.tab_item:hover {
	background: var(--Color_A100);
}

div#qanda input {
	display: none;
}

div#qanda .tab_content {
	display: none;
	flex-wrap: wrap;
	flex-direction: column;
	gap: var(--Size_06);
	margin: var(--Size_09) 0 0;
	width: 100%;
	clear: both;
}

#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content,
#tab7:checked ~ #tab7_content,
#tab8:checked ~ #tab8_content {
	display: flex;
	transition: var(--Transition_04s);
	-o-transition: var(--Transition_04s);
	-moz-transition: var(--Transition_04s);
	-webkit-transition: var(--Transition_04s);
}

div#qanda input:checked + .tab_item {
	background: var(--Color_A100);
}

#cave div#qanda input:checked + .tab_item {
	background: var(--Color_CV100);
}

#cavex div#qanda input:checked + .tab_item {
	background: var(--Color_CX100);
}

div.qanda {
	display: flex;
	flex-direction: column;
	gap: var(--Size_04);
	padding: var(--Size_04) 0 0;
	border-top: var(--Size_01) var(--Color_FF020) solid;
}

div.qanda em {
	position: relative;
	padding: 0 0 0 var(--Size_16);
	color: var(--Color_FF100);
	font-weight: 600;
}

div.qanda strong {
	position: relative;
	padding: 0 0 0 var(--Size_16);
	color: var(--Color_FF100);
}


div.qanda em:before,
div.qanda strong:before {
	position: absolute;
	top: var(--Size_03);
	left: 0;
	padding: var(--Size_02) 0 0;
	width: var(--Size_10);
	text-align: center;
	font-size: var(--Size_06);
	color: var(--Color_1D100);
	font-weight: 800;
	line-height: 1;
	background: var(--Color_FF100);
	border-radius: var(--Border-radius_L);
	aspect-ratio: 1 / 1;
}


div.qanda em:before {
	content: 'Q';
}

div.qanda strong:before {
	content: 'A';
}




.entry {
	display: flex;
	flex-direction: var(--Flex-direction_CCRRRR);
	gap: var(--Size_04);
	margin: var(--Width_M);
	& a {
		padding: 1px;
		background: var(--Color_A100);
		border-radius: var(--Border-radius_S);
		& .wrap {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: stretch;
			gap: var(--Size_04);
			padding: var(--Size_10) var(--Size_24) var(--Size_06);
			width: 100%;
			background: var(--Color_K000);
			border-radius: var(--Border-radius_S);
			transition: var(--Transition_04s);
			-o-transition: var(--Transition_04s);
			-moz-transition: var(--Transition_04s);
			-webkit-transition: var(--Transition_04s);
			& div.icon {
				position: absolute;
				top: -1px;
				left: -1px;
				padding: var(--Size_02) 0 0 var(--Size_04);
				width: var(--Size_30);
				height: var(--Size_30);
				background: var(--Color_K100);
				clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
				border-radius: var(--Border-radius_S) 0 0 0;
				& i {
					color: var(--Color_FF100);
					animation: icon 1s linear infinite alternate;
				}
			}
			& strong {
				display: flex;
				align-items: center;
				font-size: var(--Size_08);
				color: var(--Color_FF100);
				transition: var(--Transition_04s);
				-o-transition: var(--Transition_04s);
				-moz-transition: var(--Transition_04s);
				-webkit-transition: var(--Transition_04s);
			}
			& em {
				font-size: var(--Size_10);
				color: var(--Color_FF100);
				transition: var(--Transition_04s);
				-o-transition: var(--Transition_04s);
				-moz-transition: var(--Transition_04s);
				-webkit-transition: var(--Transition_04s);
			}
		}
	}
	& a.osaka {
		background: var(--Color_O100);
		& .wrap {
			background: var(--Color_K000);
			& div.icon {
				background: var(--Color_FF100);
				& i {
					color: var(--Color_O100);
				}
			}
			& strong {
			}
			& em {
			}
		}
	}
	& a.naha {
		background: var(--Color_N100);
		& .wrap {
			background: var(--Color_K000);
			& div.icon {
				background: var(--Color_FF100);
				& i {
					color: var(--Color_N100);
				}
			}
			& strong {
			}
			& em {
			}
		}
	}
	& a:hover {
		& .wrap {
			background: var(--Color_1D100);
		}
	}
	& a.osaka:hover  {
		background: var(--Color_O100);
		& .wrap {
			background: var(--Color_1D100);
			& div.icon {
				background: var(--Color_FF100);
				& i {
					color: var(--Color_O100);
				}
			}
			& strong {
				color: var(--Color_O100);
			}
			& em {
				color: var(--Color_O100);
			}
		}
	}
	& a.naha:hover  {
		background: var(--Color_N100);
		& .wrap {
			background: var(--Color_1D100);
			& div.icon {
				background: var(--Color_FF100);
				& i {
					color: var(--Color_N100);
				}
			}
			& strong {
				color: var(--Color_N100);
			}
			& em {
				color: var(--Color_N100);
			}
		}
	}
}