@charset "utf-8";
@keyframes scroll-charactertext {
	from {
		background-position:0 center;
	}
	to {
		background-position:529px center;
	}
}
@keyframes scroll-charactertext-s {
	from {
		background-position:0 center;
	}
	to {
		background-position:84.64vw center;
	}
}
.content__title {
	height:160px;
	background:#d84f7c url(../img/character/title.svg) repeat-x 0 center / 529px auto;
	animation:color-gradient 7.5s linear infinite,scroll-charactertext 7s linear infinite;
}
@media screen and (max-width:768px){
	.content__title {
		height:25.6vw;
		background:#d84f7c url(../img/character/title.svg) repeat-x 0 center / 84.64vw auto;
		animation:color-gradient 7.5s linear infinite,scroll-charactertext-s 6s linear infinite;
	}
}
.character__wrap {
	padding-bottom:160px;
	background:#FFF;
	border-bottom:1px solid #000;
}
.swiper {
	min-width:1200px;
	height:710px;
	background:#FFF url(../img/character/character_line.svg) repeat-x left 79px / auto 193px;
	position:relative;
}
.swiper:before {
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom:130px;
	height:1px;
	background:rgba(0,0,0,.16);
}
.swiper-wrapper {
	height:630px;
	margin-bottom:70px;
}
.swiper-slide {
	width:25% !important;
	height:630px;
	text-align:center;
}
@media screen and (max-width:768px){
	.character__wrap {
		padding-bottom:12.8vw;
		background:#FFF;
	}
	.swiper {
		min-width:initial;
	}
	.swiper-slide {
		width:50% !important;
	}
}
.swiper-slide>a {
	display:flex;
	height:100%;
	text-decoration:none;
	justify-content:center;
	align-items:flex-end;
}
.swiper-slide>a i {
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:50px;
	animation:nav-out 0.4s ease forwards;
	display:block;
}
.swiper-slide>a:hover i {
	animation:nav-in 0.4s ease forwards;
}
.swiper-slide>a i:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:#d84f7c;
	animation:color-gradient 7.5s linear infinite;
}
.name_en {
	color:#d84f7c;
	animation:color-gradient 7.5s linear infinite;
	text-shadow:1px 1px #fff,
	-1px 1px #fff,
	-1px -1px #fff,
	1px -1px #fff,
	1px 0px #fff,
	0px 1px #fff,
	-1px 0px #fff,
	0px -1px #fff;
	font-size:88px;
	writing-mode:vertical-rl;
	position:absolute;
	left:-46px;
	top:0;
	font-weight:700;
	z-index:5;
	opacity:0;
	transition:opacity 0.01s ease;
	transition-delay:0;
}
.name_ja {
	color:#fff;
	position:absolute;
	left:0;
	right:0;
	width:100%;
	text-align:center;
	top:40px;
	font-weight:700;
	font-size:20px;
	z-index:5;
	opacity:0;
	transition:opacity 0.01s ease;
	transition-delay:0.1s;
}
.characterVoice {
	color:#fff;
	position:absolute;
	left:0;
	right:0;
	width:100%;
	text-align:center;
	top:75px;
	font-weight:700;
	font-size:16px;
	z-index:5;
	opacity:0;
	transition:opacity 0.01s ease;
	transition-delay:0.1s;
}
.swiper-slide>a:hover .name_en {
	opacity:1;
	transition-delay:0.05s;
}
.swiper-slide>a:hover .name_ja {
	opacity:1;
}
.swiper-slide>a:hover .characterVoice {
	opacity:1;
}
.swiper-slide>a img {
	display:block;
	position:relative;
	z-index:6;
	width:340px;
	pointer-events:none;
}
@media screen and (max-width:768px){
	.cursor_sp{
		top:450px !important;
		left:23vw !important;
		position:absolute !important;
		z-index:6;
		opacity:0;
	}
	.one-click .cursor_sp {
		opacity:1.0 !important;
	}
	.one-click .cursor_sp div{
		opacity:1.0 !important;
	}
	.cursol.cursols {
		opacity:0 !important;
	}
}
.character__wrap .swiper-scrollbar {
	position:absolute;
	width:auto;
	bottom:23px;
	left:150px;
	right:150px;
}
.character__wrap .swiper-scrollbar-drag {
	border-radius:0px;
	background:rgba(0,0,0,1);
	cursor:pointer;
}
.swiper-pagination-progressbar-fill{
	display:none;
}
.swiper-button-prev {
	position:absolute;
	left:30px !important;
	top:auto !important;
	bottom:5px;
	z-index:5000;
	width:120px;
	height:40px;
	background:url(../img/character/arrow_l.png) no-repeat center center;
	transition:all 0.3s ease;
}
.swiper-button-next {
	position:absolute;
	right:30px !important;
	top:auto !important;
	bottom:5px;
	z-index:5000;
	width:120px;
	height:40px;
	background:url(../img/character/arrow_r.png) no-repeat center center;
	transition:all 0.3s ease;
}
.swiper-button-prev:hover {
	transform:translateX(-5px);
}
.swiper-button-next:hover {
	transform:translateX(5px);
}
.swiper-button-prev:after,
.swiper-button-next:after {
	display:none !important;
}
@media screen and (max-width:768px){
	.character__wrap .swiper-scrollbar {
		left:45px;
		right:45px;
	}
	.swiper-horizontal>.swiper-scrollbar {
		height:3px;
	}
	.swiper-button-prev {
		width:40px;
		left:0px!important;
	}
	.swiper-button-next {
		width:40px;
		right:0px!important;
	}
}
.characterModalBox {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	overflow:auto;
	z-index:20000;
	background:rgba(255,255,255,.8);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	display:flex;
	justify-content:center;
	align-content:center;
}
.characterModalBox .oneModal {
	display:block;
}
#characterModal .oneModalIn__cont {
	padding:0;
	width:100%;
	position:relative;
}
.character__oneWrap {
	width:1200px;
	margin:0 auto;
	display:flex;
}
.character__left {
	padding:160px 0px;
	display:flex;
	justify-content:center;
	width:50%;
	align-items:center;
}
@media screen and (max-width:768px){
	.character__left {
		padding:0px;
	}
	.character__oneWrap {
		width:100%;
		flex-direction:column;
		justify-content:center;
	}
	.character__left {
		width:100%;
	}
	.character__left img {
		width:100vw;
		margin-left:-12.8vw;
		margin-right:-12.8vw;
	}
}
.character__right {
	width:50%;
	position:relative;
}
.character__right--cont {
	min-height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:sticky;
	left:0;
	top:0;
}
.character__right--cont h3 {
	font-size:24px;
	font-weight:700;
	color:#000;
	margin-bottom:15px;
}
/*.characterModalBox .closeBtn {
	display:flex;
	justify-content:flex-end;
}*/
.characterModalBox .closeBtn a {
	position:sticky;
	top:40px;
	right:40px;
	margin-left:auto;
}
.character__right--cv {
	height:24px;
	display:table;
	background:#d84f7c;
	animation:color-gradient 7.5s linear infinite;
	font-size:20px;
	line-height:24px;
	padding:0 5px;
	color:#FFF;
	margin-right:auto;
	margin-bottom:20px;
}
.character__right--text {
	width:420px;
	font-size:16px;
	line-height:2;
	color:#000;
}
@media screen and (max-width:768px){
	.character__oneWrap {
		min-height:100vh;
		padding:12.8vw 12.8vw;
	}
	.character__right {
		width:100%;
		margin-top:20px;
	}
	.character__right--text {
		width:100%;
		font-size:1.2rem;
	}
	.character__right--cont {
		min-height:initial;
		display:block;
	}
	.character__left h3 {
		font-size:1.7rem;
		font-weight:700;
		color:#000;
		margin-bottom:15px;
		position:absolute;
		left:6.4vw;
		top:26.6666vw;
	}
	.character__right--cv {
		position:absolute;
		left:6.4vw;
		top:38vw;
		font-size:1.4rem;
	}
	.characterModalBox .closeBtn a {
		position:sticky;
		top:0px;
		right:0px;
		margin-left:auto;
	}
}
.character__nav {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	pointer-events:none;
}
.character__nav ul {
	width:100%;
	height:100vh;
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:sticky;
	left:0;
	top:0;
	z-index:60;
}
.character__nav li {
	width:120px;
	height:120px;
}
.character__nav li:first-child {
	margin-left:40px;
}
.character__nav li:last-child {
	margin-right:40px;
}
.character__nav li a {
	display:block;
	height:120px;
	pointer-events:auto;
	transition:all 0.3s ease;
}
.character__nav li:first-child a {
	background:url(../img/character/arrow_l.svg) no-repeat center center / 40px auto;
}
.character__nav li:last-child a {
	background:url(../img/character/arrow_r.svg) no-repeat center center / 40px auto;
}
.character__nav li:first-child a:hover {
	transform:translateX(-10px);
}
.character__nav li:last-child a:hover {
	transform:translateX(10px);
}
@media screen and (max-width:768px){
	.character__nav li {
		width:60px;
		height:60px;
	}
	.character__nav li:first-child {
		margin-left:0px;
	}
	.character__nav li:last-child {
		margin-right:0px;
	}
	.character__nav li:first-child a {
		background:url(../img/character/arrow_l.svg) no-repeat center center / 24px auto;
	}
	.character__nav li:last-child a {
		background:url(../img/character/arrow_r.svg) no-repeat center center / 24px auto;
	}
}
.characterModalBox {
	display:none;
}
.characterModalBox .oneModalIn {
	transform:translateY(20px);
	opacity:0;
	transition:all .3s ease;
}
.characterModalBox .oneModalIn.active {
	transform:translateY(0);
	opacity:1;
}
.subCharacter__wrap {
	width:1205px;
	margin:0 auto;
	padding-top:80px;
}
.subCharacter__title {
	font-size:32px;
	font-weight:700;
	text-align:center;
	margin-bottom:50px;
}
.subCharacter__lists {
	display:flex;
	flex-wrap:wrap;
	border-left:1px solid rgba(0,0,0,0.16);
	border-top:1px solid rgba(0,0,0,0.16);
}
.subCharacter__list {
	width:25%;
	border-right:1px solid rgba(0,0,0,0.16);
	border-bottom:1px solid rgba(0,0,0,0.16);
}
.subCharacter__list img {
	width:100%;
	pointer-events:none;
}
@media screen and (max-width:768px){
	.subCharacter__wrap {
		width:100%;
		padding-top:12.8vw;
	}
	.subCharacter__title {
		font-size:1.9rem;
		margin-bottom:6.4vw;
	}
	.subCharacter__list {
		width:50%;
	}
}