@charset "utf-8";
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
.subCont {
	padding-bottom: 0;
}
.subContIn {
	width: 100%;
	position: relative;
	padding-bottom: min(calc(175 / var(--vw-min) * 100vw),175px);
}
@media screen and (max-width:768px){
	.subContIn {
		padding: 0 0 calc(120 / var(--vw-min) * 100vw);
	}
}
.subContBox {
	position: relative;
	z-index: 2;
	padding-top: min(calc(226 / var(--vw-min) * 100vw),226px);
}
@media screen and (max-width:768px){
	.subContBox {
		padding-top: calc(110 / var(--vw-min) * 100vw);
	}
}
.charaSwiperWrap {
	position: relative;
}
.charaSwiper {
	width: min(calc(1120 / var(--vw-min) * 100vw),1120px);
	position: relative;
	z-index: 1;
	margin: 0 auto;
	overflow: visible;
}
@media screen and (max-width:768px){
	.charaSwiper {
		width: 100%;
	}
}
.chara__item {
	position: relative;
	display: flex;
	justify-content: flex-end;
}
/* name */
.chara__name {
	font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
	color: #fff;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.1em;
	text-align: center;
	display: inline-block;
	position: absolute;
	bottom: max(calc(-20 / var(--vw-min) * 100vw),-20px);
	left: min(calc(7 / var(--vw-min) * 100vw),7px);
	z-index: 1;
	border-radius: min(calc(6 / var(--vw-min) * 100vw),6px);
	background-color: var(--color-black353);
	transform: skewX(-10deg);
	padding: min(calc(12 / var(--vw-min) * 100vw),12px) min(calc(62 / var(--vw-min) * 100vw),62px) min(calc(32 / var(--vw-min) * 100vw),32px);
}
@media screen and (max-width:768px){
	.chara__name {
		font-size: calc(16 / var(--vw-min) * 100vw);
		line-height: 1.5;
		bottom: calc(-11 / var(--vw-min) * 100vw);
		left: calc(7 / var(--vw-min) * 100vw);
		border-radius: calc(6 / var(--vw-min) * 100vw);
		padding: calc(6 / var(--vw-min) * 100vw) calc(35 / var(--vw-min) * 100vw) calc(15 / var(--vw-min) * 100vw);
	}
}
.chara__name::before,
.chara__name::after {
	content: "";
	width: min(calc(6 / var(--vw-min) * 100vw),6px);
	height: min(calc(6 / var(--vw-min) * 100vw),6px);
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 50%;
	background-color: var(--color-yellowFFD);
}
@media screen and (max-width:768px){
	.chara__name::before,
	.chara__name::after {
		width: calc(4 / var(--vw-min) * 100vw);
		height: calc(4 / var(--vw-min) * 100vw);
	}
}
.chara__name::before {
	left: min(calc(15 / var(--vw-min) * 100vw),15px);
}
@media screen and (max-width:768px){
	.chara__name::before {
		left: calc(8 / var(--vw-min) * 100vw);
	}
}
.chara__name::after {
	right: min(calc(15 / var(--vw-min) * 100vw),15px);
}
@media screen and (max-width:768px){
	.chara__name::after {
		right: calc(8 / var(--vw-min) * 100vw);
	}
}
.chara__name span {
	position: relative;
}
.chara__name span::before {
	content: "";
	width: min(calc(151 / var(--vw-min) * 100vw),151px);
	height: min(calc(13 / var(--vw-min) * 100vw),13px);
	position: absolute;
	bottom: max(calc(-15 / var(--vw-min) * 100vw),-15px);
	left: max(calc(-23 / var(--vw-min) * 100vw),-23px);
	-webkit-mask: url(../img/common/deco/deco_line-wabe.svg)no-repeat center/contain;
	mask: url(../img/common/deco/deco_line-wabe.svg)no-repeat center/contain;
	background-color: var(--color-yellowFFD);
}
@media screen and (max-width:768px){
	.chara__name span::before {
		width: calc(105 / var(--vw-min) * 100vw);
		height: calc(8 / var(--vw-min) * 100vw);
		bottom: calc(-10 / var(--vw-min) * 100vw);
		left: calc(-17 / var(--vw-min) * 100vw);
		-webkit-mask-image: url(../img/common/deco/deco_line-wabe.svg);
		mask-image: url(../img/common/deco/deco_line-wabe.svg);
	}
}
/* detail */
.chara__detailWrap {
	width: min(calc(558 / var(--vw-min) * 100vw),558px);
	padding-right: min(calc(60 / var(--vw-min) * 100vw),60px);
}
@media screen and (max-width:768px){
	.chara__detailWrap {
		width: 100%;
		padding: 0 calc(20 / var(--vw-min) * 100vw);
	}
}
.chara__detailIn {
	position: relative;
	padding: min(calc(20 / var(--vw-min) * 100vw), 20px);
	margin-bottom: min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width:768px){
	.chara__detailIn {
		padding: calc(10 / var(--vw-min) * 100vw);
		margin-bottom: calc(30 / var(--vw-min) * 100vw);
	}
}
.chara__detailBox {
	width: 100%;
	height: 100%;
	background-color: var(--color-black353);
	box-shadow: 4px 4px 30px 0 #000 inset;
	padding: min(calc(13 / var(--vw-min) * 100vw), 13px) min(calc(30 / var(--vw-min) * 100vw),30px) min(calc(33 / var(--vw-min) * 100vw), 33px);
}
@media screen and (max-width:768px){
	.chara__detailBox {
		padding: calc(13 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw);
	}
}
.chara__detailBoxBg {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: auto;
	background: url(../img/common/bg/bg_tree.jpg) no-repeat center / cover;
}
.chara__detail-name {
	font-size: min(calc(40 / var(--vw-min) * 100vw),40px);
	font-weight: 400;
	color: var(--color-yellowFFD);
	line-height: 1;
	letter-spacing: 0.1em;
	margin-bottom: min(calc(14 / var(--vw-min) * 100vw),14px);
}
@media screen and (max-width:768px){
	.chara__detail-name {
		font-size: calc(30 / var(--vw-min) * 100vw);
		margin-bottom: calc(10 / var(--vw-min) * 100vw);
	}
}
.chara__detail-cvWrap {
	display: flex;
	align-items: center;
	margin-bottom: min(calc(22 / var(--vw-min) * 100vw),22px);
}
@media screen and (max-width:768px){
	.chara__detail-cvWrap {
		margin-bottom: calc(16 / var(--vw-min) * 100vw);
	}
}
.chara__detail-cv {
	font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
	color: var(--color-yellowFFD);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.1em;
	margin-right: min(calc(12 / var(--vw-min) * 100vw),12px);
}
@media screen and (max-width:768px){
	.chara__detail-cv {
		font-size: calc(20 / var(--vw-min) * 100vw);
		margin-right: calc(6 / var(--vw-min) * 100vw);
	}
}
.chara__detail-cvName {
	font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
	color: var(--color-yellpwFFF5);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0em;
}
@media screen and (max-width:768px){
	.chara__detail-cvName {
		font-size: calc(15 / var(--vw-min) * 100vw);
	}
}
.chara__detail-txt {
	font-size: min(calc(20 / var(--vw-min) * 100vw),20px);
	color: #fff;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0em;
	position: relative;
	padding-top: min(calc(22 / var(--vw-min) * 100vw),22px);
}
.chara__detail-txt::before {
	content: "";
	width: 100%;
	height: min(calc(6 / var(--vw-min) * 100vw), 6px);
	display: block;
	position: absolute;
	top: 0;
	-webkit-mask: url(../img/common/deco/deco_dot.svg) repeat-x left / min(calc(150 / var(--vw-min) * 100vw), 150px) min(calc(6 / var(--vw-min) * 100vw), 6px);
	mask: url(../img/common/deco/deco_dot.svg) repeat-x left / min(calc(150 / var(--vw-min) * 100vw), 150px) min(calc(6 / var(--vw-min) * 100vw), 6px);
	background-color: #fff;
}
@media screen and (max-width:768px){
	.chara__detail-txt {
		font-size: calc(15 / var(--vw-min) * 100vw);
		line-height: 1.73;
		padding-top:calc(16 / var(--vw-min) * 100vw) ;
	}
	.chara__detail-txt::before  {
		height: calc(6 / var(--vw-min) * 100vw);
		-webkit-mask-size: calc(150 / var(--vw-min) * 100vw) calc(6 / var(--vw-min) * 100vw);
		mask-size: calc(150 / var(--vw-min) * 100vw) calc(6 / var(--vw-min) * 100vw);
	}
}
/* img */
.chara__imgWrap {
	width: min(calc(480 / var(--vw-min) * 100vw),480px);
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: min(calc(80 / var(--vw-min) * 100vw),80px);
	display: flex;
	align-items: center;
}
@media screen and (max-width:768px){
	.chara__imgWrap {
		width: calc(264 / var(--vw-min) * 100vw);
		height: unset;
		position: relative;
		inset: unset;
		margin: 0 auto;
	}
}
.chara__imgIn {
	width: min(calc(480 / var(--vw-min) * 100vw),480px);
	position: relative;
	padding-top: 120.8333%;/*580*/
}
@media screen and (max-width:768px){
	.chara__imgIn {
		width: 100%;
		padding-top: 101.2083%;
	}
}
.chara__img {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}
.chara__img img {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	margin: auto;
	object-fit: cover;
	pointer-events: none;
}
.chara__faceLists {
	width: min(calc(420 / var(--vw-min) * 100vw),420px);
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
@media screen and (max-width:768px){
	.chara__faceLists {
		width: calc(296 / var(--vw-min) * 100vw);
		margin-top: calc(30 / var(--vw-min) * 100vw);
	}
}
@keyframes charaBlockIn {
	from {
		opacity: 0;
		transform: translate3d(0, 10%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.chara__item:not(.swiper-slide-active) .chara__detailIn,
.chara__item:not(.swiper-slide-active) .chara__imgIn,
.chara__item:not(.swiper-slide-active) .chara__faceLists {
	opacity: 0;
	transform: translate3d(0, 10%, 0);
}
.chara__item.swiper-slide-active .chara__detailIn,
.chara__item.swiper-slide-active .chara__imgIn {
	animation: charaBlockIn 0.6s var(--cubic-bezier01) both;
}
.chara__item.swiper-slide-active .chara__faceLists {
	animation: charaBlockIn 0.6s var(--cubic-bezier01) 0.12s both;
}
.chara__item:not(.swiper-slide-active) .chara__detailIn,
.chara__item:not(.swiper-slide-active) .chara__imgIn,
.chara__item:not(.swiper-slide-active) .chara__faceLists {
	opacity: 1;
	transform: none;
}
.chara__faceItem {
	width: min(calc(200 / var(--vw-min) * 100vw),200px);
	height: min(calc(200 / var(--vw-min) * 100vw),200px);
	position: relative;
}
@media screen and (max-width:768px){
	.chara__faceItem {
		width: calc(140 / var(--vw-min) * 100vw);
		height: calc(140 / var(--vw-min) * 100vw);
	}
}
.chara__faceItem img {
	width: 100%;
	pointer-events: none;
}
.chara__thumbWrap {
	margin-top: min(calc(82 / var(--vw-min) * 100vw),82px);
}
@media screen and (max-width:768px){
	.chara__thumbWrap {
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}
.swiper-pagination-bullets.swiper-pagination-horizontal.chara__thumbLists {
	position: relative;
	z-index: 2;
	inset: unset;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:768px){
	.swiper-pagination-bullets.swiper-pagination-horizontal.chara__thumbLists {
		gap: calc(13 / var(--vw-min) * 100vw);
	}
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem {
	width: min(calc(100 / var(--vw-min) * 100vw),100px);
	height: min(calc(100 / var(--vw-min) * 100vw),100px);
	position: relative;
	border-radius: unset;
	background: unset;
	opacity: 1;
	margin: 0;
}
@media screen and (max-width:768px){
	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem {
		width: calc(74 / var(--vw-min) * 100vw);
		height: calc(74 / var(--vw-min) * 100vw);
	}
}
.chara__thumbItem::after {
	content: "";
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	display: block;
	position: absolute;
	inset: 0;
	left: -1px;
	margin: auto;
	opacity: 0;
	-webkit-mask: url(../img/common/deco/icon_circle.svg)no-repeat center/contain;
	mask: url(../img/common/deco/icon_circle.svg)no-repeat center/contain;
	background-color: var(--color-orangeE94);
	transition: .3s var(--cubic-bezier01);
	pointer-events: none;
}
.chara__thumbItem img {
	width: 100%;
	pointer-events: none;
}
.chara__thumbItem.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
	opacity: 1;
}
@media (hover: hover) and (pointer: fine){
	.chara__thumbItem:hover::after {
		opacity: 1;
	}
}
.swiper__arrowWrap {
	width: min(calc(1180 / var(--vw-min) * 100vw),1180px);
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: auto;
	justify-content: space-between;
	pointer-events: none;
}
@media screen and (max-width:768px){
	.swiper__arrowWrap {
		width: calc(335 / var(--vw-min) * 100vw);
	}
}
.swiper__arrow {
	pointer-events: auto;
}
/**
* deco
*/
.decoWrap,
.deco__wall {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.decoWrap::before {
	content: "";
	width: 100%;
	height: min(calc(175 / var(--vw-min) * 100vw),175px);
	display: block;
	position: absolute;
	bottom: 0;
	z-index: 1;
	background-color: var(--color-yellowE69);
}
@media screen and (max-width:768px){
	.decoWrap::before {
		height: calc(120 / var(--vw-min) * 100vw);
	}
}
.deco__bg {
	width: 100%;
	height: 40%;
	position: absolute;
	bottom: 0;
	pointer-events: none;
}
.deco__bg::before {
	content: "";
	width: 100%;
	height: min(calc(250 / var(--vw-min) * 100vw),250px);
	position: absolute;
	top: 1px;
	background-image: var(--orange-gradient);
}
@media screen and (max-width:768px){
	.deco__bg::before {
		height: calc(375 / var(--vw-min) * 100vw);
	}
}
.deco__bg::after {
	content: "";
	width: 100%;
	height: calc(100% - min(calc(250 / var(--vw-min) * 100vw),250px));
	position: absolute;
	bottom: 0;
	background-color: var(--color-yellowE69);
}
@media screen and (max-width:768px){
	.deco__bg::after {
		height: calc(100% - calc(375 / var(--vw-min) * 100vw));
	}
}
.deco__wall::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	position: absolute;
	inset: 0;
	margin: auto;
	background: url(../img/common/deco/deco_wall.jpg)repeat-x left/min(calc(80 / var(--vw-min) * 100vw),80px) 100%;
}
@media screen and (max-width:768px){
	.deco__wall::before {
		background-size: calc(40 / var(--vw-min) * 100vw) 100%;
	}
}
.deco__roof {
	width: 100%;
	height: min(calc(140 / var(--vw-min) * 100vw),140px);
	position: absolute;
	top: 0;
	z-index: 1;
}
.deco__roof::before {
	content: "";
	width: 100%; 
	height: 100%;
	display: block;
	position: absolute;
	inset: 0;
	margin: auto;
	background: url(../img/common/deco/deco_roof.png)repeat-x center/min(calc(200 / var(--vw-min) * 100vw),200px) min(calc(140 / var(--vw-min) * 100vw),140px);
}
@media screen and (max-width:768px){
	.deco__roof {
		height: calc(70 / var(--vw-min) * 100vw);
	}
	.deco__roof::before {
		background-size: calc(100 / var(--vw-min) * 100vw) calc(70 / var(--vw-min) * 100vw);
	}
}
.deco__tong {
	width: min(100vw, 1366px);
	padding-top: 32.9429%;/*450*/
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	pointer-events: none;
	transform: scale(-1,1);
}
@media screen and (max-width:768px){
	.deco__tong {
		width: 100%;
	}
}
.deco__tong span {
	width: min(calc(568 / var(--vw-min) * 100vw),568px);
	height: min(calc(499 / var(--vw-min) * 100vw),499px);
	display: block;
	position: absolute;
	top: max(calc(-50 / var(--vw-min) * 100vw),-50px);
	right: max(calc(-250 / var(--vw-min) * 100vw),-250px);
	z-index: 2;
	background: url(../img/common/deco/deco_tong.png)no-repeat center/contain;
	animation: hesitate 4s ease-in-out infinite;
}
@media screen and (max-width:768px){
	.deco__tong span {
		width: calc(275 / var(--vw-min) * 100vw);
		height: calc(242 / var(--vw-min) * 100vw);
		top: calc(238 / var(--vw-min) * 100vw);
		right: calc(-145 / var(--vw-min) * 100vw);
	}
}