/* ========== CHARACTER ========== */
*:focus {
	outline: none;
}
.wrapper {
	position: relative;
	display: flex;
}
.chara_box {
	display: flex;
	flex-direction: column-reverse;
	position: relative;
	font-family: 'Noto Serif JP', serif;
	z-index: 2;
	padding: 1em ;
	top: 0;
	width: 100%;
	height: 100%;
}
.chara_box {
	opacity: 0;
	transition: all 0.5s ease;
	pointer-events: none;
}
.chara_box:not(:first-of-type) {
	margin-left: -100%;
}

input[name="set"]:checked + .chara_box {
	opacity: 1;
	pointer-events: all;
}
input[name="set"] {
	display: none;
}

#set_flag {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap:1em;
	margin: 0 1em 1em;
}
#set_flag label {
	height: 2em;
	transition: all 0.25s ease;
}
#set_flag label:active {
	opacity: 0.5;
}
#set_flag label:hover {
	filter: drop-shadow(0px 0px 10px #fff);
}
#set_flag label[for="set1"] {
	content: url("../img/flag_usa.svg");
}
#set_flag label[for="set2"] {
	content: url("../img/flag_greece.svg");
}
#set_flag label[for="set3"] {
	content: url("../img/flag_germany.svg");
}
#set_flag label[for="set4"] {
	content: url("../img/flag_australia.svg");
}
#set_flag label[for="set5"] {
	content: url("../img/flag_swiss.svg");
}
#set_flag label[for="set6"] {
	content: url("../img/flag_france.svg");
}

.chara_box::before,
.chara_box::after {
	position: absolute;
	left:0;
	content: "";
	display: block;
	background-color: rgba(255,255,255,0.8);
	z-index: -1;
	width: 100vw;
}
.chara_box::before{
	top : 0;
	left: 0;
	height: calc(100%);
}
.chara_box::after {
	display: none;
	top : calc(100%);
	left: 10vw;
	height: 1.4em;
}
.chara_box .slick-slide {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	padding: 0em 1em;
}
.chara_box .slick-slide img {
	max-width: 100%;
}

.chara_box h5 {
	font-size:calc((100vw - 6em ) / 13);
	font-weight: bold;
	margin-top: 0.5em;
	margin-bottom: 0.25em;
	order: 1;
}
.chara_box .data{
	order: 3;
}
.chara_box .data1{
	font-weight: bold;
	margin-bottom: 1em;
}
.chara_box .cv{
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 1em;
}
.chara_box .cv::before {
	content:"C.V. ";
	display: inline;
}
.chara_box .data2{
	font-weight: bold;
	line-height: 1.8em;
}
.slick-track {
	display: flex;
}

.chara_box .pic {
	order: 2;
	position: relative;
	padding-bottom: 0.2em;
}
.chara_box .pic img {
	display: block;
	transition: all 0.5s ease;
	width: auto;
	height: auto;
	max-height: 100%;
	margin: auto;
}
.chara_box .pic_ ,
.chara_box .pic_a {
	position: relative;
	opacity: 1;
	transform: scale(1);
}
.chara_box .pic_b {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transform: scale(0.5);
}


/* 画像切替 */
#change {
	display: none;
}
.change_btn::after {
	content: "";
	position: absolute;
	display: block;
	top: 0em;
	right: 1em;
	width: 2em;
	height: 2em;
	background: url("../img/change.svg") no-repeat;
	z-index: 200;
	transition: all 0.5s ease;
}
#change:checked + section .change_btn::after {
	transform: rotate(-180deg);
}
#change:checked + section .pic_a {
	opacity: 0;
	transform: scale(0.5);
}
#change:checked + section .pic_b {
	opacity: 1;
	transform: scale(1);
}

/* ========== キャラクター一覧 ========== */
.chara_box .slick-dots {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 2.5%;
}
.chara_box .slick-dots li {
	position: relative;
	color: transparent;
	width: 18%;
	margin: 0;
	padding-top:16%;
	transform: scale(1);
	transition: ease-in-out 0.2s all;
}
.chara_box .slick-dots li::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top:0;
	left:0;
}
.chara_box .slick-dots li:hover {
	opacity: 0.8;
	cursor: pointer;
	transform: scale(1.2);
}

/* アメリカ */
.chara_box:nth-of-type(1) .slick-dots li:nth-child(1)::after {
	background: url("../img/btn_ryoma.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(1) .slick-dots li:nth-child(2)::after {
	background: url("../img/btn_ralph.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(1) .slick-dots li:nth-child(3)::after {
	background: url("../img/btn_ryoga.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(1) .slick-dots li:nth-child(4)::after {
	background: url("../img/btn_dodo.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(1) .slick-dots li:nth-child(5)::after {
	background: url("../img/btn_kiko.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(1) .slick-dots li:nth-child(6)::after {
	background: url("../img/btn_hopkins.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(1) .slick-dots li:nth-child(7)::after {
	background: url("../img/btn_rocky.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(1) .slick-dots li:nth-child(8)::after {
	background: url("../img/btn_maxwell.png") no-repeat center;
	background-size: contain;
}
/* ギリシャ */
.chara_box:nth-of-type(2) .slick-dots li:nth-child(1)::after {
	background: url("../img/btn_greece.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(2) .slick-dots li:nth-child(2)::after {
	background: url("../img/btn_zeus.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(2) .slick-dots li:nth-child(3)::after {
	background: url("../img/btn_herculos.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(2) .slick-dots li:nth-child(4)::after {
	background: url("../img/btn_hermes.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(2) .slick-dots li:nth-child(5)::after {
	background: url("../img/btn_vulcan.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(2) .slick-dots li:nth-child(6)::after {
	background: url("../img/btn_papadopoulos.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(2) .slick-dots li:nth-child(7)::after {
	background: url("../img/btn_aporon.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(2) .slick-dots li:nth-child(8)::after {
	background: url("../img/btn_orion.png") no-repeat center;
	background-size: contain;
}

/* ドイツ */
.chara_box:nth-of-type(3) .slick-dots li:nth-child(1)::after {
	background: url("../img/btn_germany.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(3) .slick-dots li:nth-child(2)::after {
	background: url("../img/btn_volk.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(3) .slick-dots li:nth-child(3)::after {
	background: url("../img/btn_qp.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(3) .slick-dots li:nth-child(4)::after {
	background: url("../img/btn_bismarck.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(3) .slick-dots li:nth-child(5)::after {
	background: url("../img/btn_siegfried.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(3) .slick-dots li:nth-child(6)::after {
	background: url("../img/btn_frankensteiner.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(3) .slick-dots li:nth-child(7)::after {
	background: url("../img/btn_kunimitsu.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(3) .slick-dots li:nth-child(8)::after {
	background: url("../img/btn_schneider.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(3) .slick-dots li:nth-child(9)::after {
	background: url("../img/btn_bvolk.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(3) .slick-dots li:nth-child(10)::after {
	background: url("../img/btn_rendall.png") no-repeat center;
	background-size: contain;
}

/* オーストラリア */
.chara_box:nth-of-type(4) .slick-dots li:nth-child(1)::after {
	background: url("../img/btn_australia.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(4) .slick-dots li:nth-child(2)::after {
	background: url("../img/btn_jean.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(4) .slick-dots li:nth-child(3)::after {
	background: url("../img/btn_chris.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(4) .slick-dots li:nth-child(4)::after {
	background: url("../img/btn_mac.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(4) .slick-dots li:nth-child(5)::after {
	background: url("../img/btn_jj.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(4) .slick-dots li:nth-child(6)::after {
	background: url("../img/btn_milky.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(4) .slick-dots li:nth-child(7)::after {
	background: url("../img/btn_noah.png") no-repeat center;
	background-size: contain;
}

/* スイス */
.chara_box:nth-of-type(5) .slick-dots li:nth-child(1)::after {
	background: url("../img/btn_amadeus.png") no-repeat center;
	background-size: contain;
}

/* フランス */
.chara_box:nth-of-type(6) .slick-dots li:nth-child(1)::after {
	background: url("../img/btn_france.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(6) .slick-dots li:nth-child(2)::after {
	background: url("../img/btn_camus.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(6) .slick-dots li:nth-child(3)::after {
	background: url("../img/btn_tristan.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(6) .slick-dots li:nth-child(4)::after {
	background: url("../img/btn_timothee.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(6) .slick-dots li:nth-child(5)::after {
	background: url("../img/btn_delon.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(6) .slick-dots li:nth-child(6)::after {
	background: url("../img/btn_chardard.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(6) .slick-dots li:nth-child(7)::after {
	background: url("../img/btn_delacroix.png") no-repeat center;
	background-size: contain;
}
.chara_box:nth-of-type(6) .slick-dots li:nth-child(8)::after {
	background: url("../img/btn_jonathan.png") no-repeat center;
	background-size: contain;
}

/* 日本 */
.chara_box:nth-of-type(7) .slick-dots li:nth-child(1)::after {
	background: url("../img/btn_houou.png") no-repeat center;
	background-size: contain;
}


.chara_box .co_movie {
	position: relative;
	justify-content: center;
	padding: 10em 1em;
}
.chara_box .co_movie img {
}
.chara_box .co_movie a {
	position: relative;
}
.chara_box .co_movie a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4) url(../img/play.svg) no-repeat center;
}
.chara_box .co_movie a:hover::before {
	opacity: 0.5;
}
/* ========== 矢印 ========== */
.chara_box .slick-arrow {
	position: absolute;
	color: transparent;	
	top: 10em;
	width: 2em;
	height: calc(100% - 10em);
	z-index: 1;
	transition: ease 0.5s all;
}
.chara_box .slick-arrow:hover {
	opacity: 0.8;
}
.chara_box .slick-prev {
	left: 0;
}
.chara_box .slick-next {
	right: 0;
}
.chara_box .slick-prev::before ,
.chara_box .slick-next::before {
	content:"";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.5em;
	height: 1.5em;
	background: url("../img/ball.svg") no-repeat;
	background-position: center;
	background-size: contain;

	transform: translate(-50%,-50%);
	transition: ease 0.5s 0s all;
}
.chara_box .slick-prev:hover::before {
	transform: translate(-50%,-60%) rotate(-90deg) scale(1.2);
}
.chara_box .slick-next:hover::before {
	transform: translate(-50%,-60%) rotate(90deg) scale(1.2);
}
.chara_box .slick-prev::after ,
.chara_box .slick-next::after {
	position: absolute;
	top: calc(50% + 1.8em);
	left: 50%;
	color: #999999;
	font-family: 'Oswald', sans-serif;
	font-size: 0.5em;
	font-weight: normal;
	transform: translateX(-50%);
}
.chara_box .slick-prev::after {
	content: "Back";
}
.chara_box .slick-next::after {
	content: "Next";
}


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

.chara_box {
}

.chara_box .slick-slide  {
	opacity: 0;
	transition: ease-out 0.5s all;
	position: relative;
	height: 520px !important;
	padding: 0;
	grid-template-columns: 40% 60%;
	grid-template-rows: auto 1fr;
}
.chara_box::before{
	top : 0;
	left: 50%;
	height: calc(100% - 7.5%);
	width: 100vw;
	transform: translateX(-50%);
}
.chara_box::after {
	top : calc(100% - 5%);
	left: 0;
	width: 100vw;
	height: 5%;
}

.chara_box h5 {
	font-size: 1.6em;
	grid-column: 1 / 3;
}
.chara_box .data {
	font-size: 0.8em;
	order: 2;
}
.chara_box .pic {
	order: 3;
	max-height: 460px;
}

.chara_box .slick-slide img {
}
.chara_box li.is-active-next {
	opacity: 1;
}
.chara_box li.slick-active {
	opacity: 1;
}
.chara_box li {
}
.chara_box li.slick-active label{
}
.chara_box li.slick-slide:not(.slick-active) {
	pointer-events: none;
}
.chara_box .slick-arrow {
	top: 6em;
}
.chara_box .slick-prev {
	left: -10%;
}
.chara_box .slick-next {
	right: -10%;
}
.chara_box .slick-dots {
	gap:1.1%;
}
.chara_box .slick-dots li {
	width: 9%;
	padding-top: 7%;
}
.change_btn::after {
	right:0%;
}

.chara_box .co_movie {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	margin: 0em;
	justify-items: center;
	align-items: center;
}
.chara_box .co_movie img {
}

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


#set_flag label {
	height: 3em;
}
.chara_box .slick-dots {
	gap:1%;
}
.chara_box .slick-dots li {
	width: 9%;
	padding-top: 7%;
}
.chara_box .slick-arrow {
	top: 2em;
	height: 100%;
}
.chara_box .slick-prev {
	left: -10%;
}
.chara_box .slick-next {
	right: -10%;
}
.chara_box .slick-list {
	overflow: visible !important;
}
.chara_box .slick-slide  {
	position: relative;
	height: 600px !important;
	padding: 0;
}
.chara_box .data {
	font-size: 1.8rem;
}
.chara_box .pic {
    max-height: 520px;
}
.chara_box .co_movie {
}
.chara_box .co_movie img {
    max-height: 460px;
}


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

}


/* ========== safari用 ========== */
@supports (-webkit-touch-callout: none) {
}

::-webkit-full-page-media, _:future, :root
 .chara_box .slick-slide * {
	flex-shrink: 0;
}
_::-webkit-full-page-media, _:future, :root
 .chara_box .co_movie {
	justify-content:unset;
}
_::-webkit-full-page-media, _:future, :root
 .chara_box .slick-slide img {
}

@media (min-width: 800px) {
_::-webkit-full-page-media, _:future, :root
 .chara_box .slick-slide img {

}
_::-webkit-full-page-media, _:future, :root
 .chara_box .co_movie img {
	height: 420px;
	width: auto;
}
}


@media not all and (min-resolution:.001dpcm) {

.chara_box .slick-slide * {
	flex-shrink: 0;
}
#set_flag label {
	margin-right: 10px;
	margin-bottom: 10px;
}
.chara_box .slick-dots li {
	margin-right: 10px;
}

}
/* ========== firefox用 ========== */
@-moz-document url-prefix(){
.chara_box .co_movie {
	justify-content:space-between;
}
}

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