/* 日本 */
#character h4 {
	display: grid;
	grid-template-columns: 0.4fr 1fr ;
	place-items: center;
	font-size: 2em;

	margin: 1em auto;
}

.jpn ul::-webkit-scrollbar {
	height: 2em;
	width: 0.8em;
}
.jpn ul::-webkit-scrollbar-thumb {
	background: #ffffff;
	border-radius: 0.2em;
}
.jpn ul::-webkit-scrollbar-track {
	background: #ffffff66;
	border-radius: 0.2em;
}

#change_jpn {
	display: none;
}
#set_flag_jpn {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap:1em;
	color: #fff;
	margin-bottom: 1em;
}
#set_flag_jpn label {
	transition: all 0.25s ease;
	font-weight: bold;
	font-size: min(4vw, 1em);
	border: solid 1px #fff;
	border-radius: 6px;
	padding: 0.2em 1em;
	box-sizing: border-box;
}
#set_flag_jpn label:checked {
	background-color: #fff;
}
#set_flag_jpn label:active {
	opacity: 0.5;
}

input[name="set_jpn"] {
	display: none;
}
input[name="set_jpn"]:checked ul {
	opacity: 1;
	pointer-events: all;
}

#jpn1_set ,
#jpn2_set ,
#jpn3_set {
	position: absolute;
	height: 0%;
	overflow: hidden;
	padding-right: 1em;
	transition: all 0.2s ease 0s ;
}
input#jpn1:checked ~ #jpn1_set ,
input#jpn2:checked ~ #jpn2_set ,
input#jpn3:checked ~ #jpn3_set {
	transition-duration: 0.25s;
	position: relative;
	height: 100%;
	max-height: 60lvh;
	overflow-y: scroll;
}
#jpn1_set li ,
#jpn2_set li ,
#jpn3_set li {
	transition: all 0s ease 0s ;
	transform-origin: top center;
	height: 0%;
	overflow: hidden;
}
input#jpn1:checked ~ #jpn1_set li ,
input#jpn2:checked ~ #jpn2_set li ,
input#jpn3:checked ~ #jpn3_set li {
	transition-duration: 0.5s;
	height: 100%;
}

input#jpn1:checked ~ #set_flag_jpn [for="jpn1"] ,
input#jpn2:checked ~ #set_flag_jpn [for="jpn2"] ,
input#jpn3:checked ~ #set_flag_jpn [for="jpn3"] {
	background-color: #000000;
}



.jpn ul {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 2em;
	margin-bottom: 1em;
}
.jpn li {
	display: grid;
	color: #ffffff;
	grid-template-columns: 0.4fr 1fr;
	gap: 1em;
	place-items: start;
	justify-content: center;
}
.jpn .data1 {
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.5em;
	margin-bottom: 0.25em;
}
.jpn .data1 span {
	font-size: 0.75em;
	padding: 0.25em 0.5em;
	background-color: #0058a6;
	word-break:keep-all;
	border-radius: 4px;
}
.jpn .data1 span.shitenhoji {
	background-color: #d8c03c;
}
.jpn .data1 span.hyotei {
	background-color: #226a96;
}
.jpn .data1 span.rikkai {
	background-color: #c0a100;
}
.jpn .data1 span.yamabuki {
	background-color: #48774e;
}
.jpn .data1 span.higa {
	background-color: #523774;
}
.jpn .data1 span.u17 {
	background-color: rgb(214,19,57);
}
.jpn .cv {
	margin: 0em 1em 1em 0em;
}
.jpn .cv::before {
	content: "C.V.";
	margin-right: 1em;
}


#new_chara input[type="radio"] {
	display: none;
}

#new_chara {
	position: relative;
	display: grid;
	grid-template-columns: 2em 1fr 2em;
	grid-template-rows: auto 1fr;
	place-items: center;
	width: calc(100% + 4em);
	left: -2em;
}
.show_box {
	position: relative;
	display: grid;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.show_box li {
	grid-row: 1;
    grid-column: 1;
	position: static;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 50lvh;
	place-items: start;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.show_box li img{
	display: block;
	object-fit: contain;
	width: 100%;
    height: 100%;
	z-index: 0;
	filter: drop-shadow(2.5em 0.3em 0 #00000088);
	transform: translateZ(0) translateX(1em);
	transition: all 0.5s ease-out;
}
.show_box li .data{
	position: relative;
	z-index: 1;
}
.show_box li .data1{
	font-size: 2em;
	font-weight: bold;
	margin-bottom: 0.25em;
}
.show_box li .data1 span{
	font-size: 0.5em;
	font-weight: normal;
}
.show_box li .data1 span::before {
	content: "";
	display: inline-block;
	margin-left: 0.25em;
	margin-right: -0.25em;
	width: 1.5em;
	aspect-ratio: 1 / 1;
	background: url("../img/line.svg") no-repeat;
	background-size: contain;
}
.show_box li .cv{
	font-size: 1.2em;
	margin-bottom: 0.5em;
}
.show_box li .cv::before{
	content: "CV：";
}
.show_box li .aff{
	font-size: 1em;
	margin-bottom: 0.5em;
}
.show_box li:first-child {
	position: relative;
	opacity: 0;
}

#content1:checked ~ .show_box .item-1,
#content2:checked ~ .show_box .item-2,
#content3:checked ~ .show_box .item-3,
#content4:checked ~ .show_box .item-4,
#content5:checked ~ .show_box .item-5,
#content6:checked ~ .show_box .item-6,
#content7:checked ~ .show_box .item-7 {
	opacity: 1;
	pointer-events: all;
}
#content1:checked ~ .show_box .item-1 img,
#content2:checked ~ .show_box .item-2 img,
#content3:checked ~ .show_box .item-3 img,
#content4:checked ~ .show_box .item-4 img,
#content5:checked ~ .show_box .item-5 img,
#content6:checked ~ .show_box .item-6 img,
#content7:checked ~ .show_box .item-7 img {
	filter: drop-shadow(2.5em 0.3em 0 #00000088);
	transform: translateZ(0) translateX(0em);
}

.arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: none;
	color: #fff;
	width: 2em;
	height: 2em;
	cursor: pointer;
}
.btn_box {
	display: block;
	grid-column: 1 / -1;

	padding: 1em;
	box-sizing: border-box;
	background: #000000;
}
.btn {
	display: inline-block;
	text-align: center;
	width: 4.8em;
	height: 4.8em;
	cursor: pointer;
	transition: all 0.25s ease-out;
}
.btn:hover {
	filter:brightness(1.4);
}
.btn:nth-child(even) {
	margin-left: 0em;
}


/* ================================================== */
/* ==================== 900px以上 ==================== */
/* ================================================== */
@media (min-width: 900px) {
.jpn h4 {
	grid-template-columns: 0.2fr 1fr ;
}

.jpn li {
	justify-content: top;
    grid-template-columns: 0.2fr 1fr;
}
#new_chara {
	width: 100%;
	left: unset;
}

#new_chara {
	grid-template-columns: 4em 1fr 4em;
	width: 100%;
	left: 0;
}
.show_box li {
	grid-template-columns: 0.5fr 1fr;
	grid-template-rows: min(80lvh, 780px);
	place-items: center;
}
.show_box li img{
	filter: drop-shadow(0em 0.3em 0 #00000000);
}
.arrow-btn {
	width: 4em;
	height: 4em;
}
.btn_box {
	text-align: center;
	width: max(100%, 100vw);
	margin-left: max(0, calc((100vw - 1640px) * -1 / 2));
    padding: 2em max(2em, calc((100vw - 1640px) / 2));
}

}
/* ================================================== */
/* ==================== 1920px以上 ==================== */
/* ================================================== */
@media (min-width: 1920px) {
}

@media not all and (min-resolution:.001dpcm) {
}
/* ========== firefox用 ========== */
@-moz-document url-prefix(){
}

/* ========== IE用 ========== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
}