/* chara */

.chara + .chara {
	margin-top: 66px;
}

.chara.--sm {
	display: flex;
}

.chara.--sm .chara__item {
	border-right: 1px solid #000;
	width: 50%;
}

.chara__item {
	display: block;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.chara__item + .chara__item {
	border-top: 2px solid #000;
}

.chara__item:hover .chara__img img {
	scale: 1.1;
}

.chara__item:hover .c-plus-icon {
	background: #fff;
}

.chara__item:hover .c-plus-icon__inner {
	background: #486061;
}

.chara__item:hover .c-plus-icon__inner span {
	background: #fff;
}

.chara__content {
	display: flex;
	flex-direction: column;
	left: 53px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
}

.chara__content.--sm {
	height: 100%;
	left: 0;
	left: 0;
	top: 0;
	transform: translateY(0);
	z-index: 1;
}

.chara__content.--sm .chara__content-line {
	display: none;
}

.chara__content.--sm .chara__content-line.--right {
	display: block;
}

.chara__content-line {
	background: #000;
	display: block;
	position: absolute;
	z-index: 1;
}

.chara__content-line.--top {
	height: 1px;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 200vw;
}

.chara__content-line.--bottom {
	bottom: 0;
	height: 1px;
	left: 50%;
	transform: translateX(-50%);
	width: 200vw;
}

.chara__content-line.--left {
	height: 100vh;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
}

.chara__content-line.--right {
	height: 100vh;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
}

.chara__name {
	display: block;
	padding: 7px 18px;
}

.chara__name.--sm {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	padding: 7px 13px;
}

.chara__name img.--lg {
	height: 26px;
}

.chara__name img.--md {
	height: 26px;
}

.chara__name img.--sm {
	height: 19px;
}

.chara__kana {
	background: #F0F4F4;
	border-top: 2px solid #000;
	flex-shrink: 0;
	width: 100%;
}

.chara__kana-text {
	font-size: 7px;
	letter-spacing: 0.5em;
	text-align: center;
}

.chara__img {
	position: relative;
	z-index: 2;
}

.chara__img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	transform-origin: right center;
	transition: 0.3s;
}

.chara__img.--lg {
	height: 207px;
}

.chara__img.--md {
	height: 105px;
}

.chara__img.--sm {
	height: 105px;
	z-index: 0;
}

/* c-chara-parts */

.c-chara-parts {
	background: rgba(170, 163, 163, 0.7);
	display: flex;
	height: 100dvh;
	inset: 0;
	justify-content: center;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	transition: 0.3s;
	z-index: 99;
}

.c-chara-parts.is-open {
	opacity: 1;
	pointer-events: all;
}

.c-chara-parts__wrap {
	display: flex;
	justify-content: center;
	max-width: 1200px;
	position: relative;
	width: 100%;
}

.c-chara-parts__wrap::before,
.c-chara-parts__wrap::after {
	display: none;
}

.c-chara-parts__wrap::before {
	left: 0px;
}

.c-chara-parts__wrap::after {
	right: 0px;
}

.c-chara-parts__wrap-inner {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
}

.c-chara-parts__wrap-inner::before,
.c-chara-parts__wrap-inner::after {
	display: none;
}

.c-chara-parts__wrap-inner::before {
	top: 0;
}

.c-chara-parts__wrap-inner::after {
	bottom: 0;
}
.c-chara-parts__fetched {
	width: 100%;
}
.c-chara-parts__block {
	background: #F3F5F4;
	height: auto;
	max-width: 1200px;
	overflow-y: auto;
	width: 100%;
}

.c-chara-parts__close {
	align-items: center;
	aspect-ratio: 1/1;
	border-radius: 200px;
	display: flex;
	justify-content: center;
	position: fixed;
	right: 29px;
	top: 34px;
	width: 66px;
	z-index: 101;
	cursor: pointer;
}

.c-chara-parts__close-inner {
	align-items: center;
	aspect-ratio: 1/1;
	background: #fff;
	border-radius: 200px;
	display: flex;
	justify-content: center;
	position: relative;
	width: 50px;
}

.c-chara-parts__close-inner span {
	background: #486061;
	border-radius: 4px;
	height: 4px;
	position: absolute;
	width: 35px;
}

.c-chara-parts__close-inner span:nth-child(1) {
	transform: rotate(45deg);
}

.c-chara-parts__close-inner span:nth-child(2) {
	transform: rotate(-45deg);
}

.c-chara-parts__inner {
	display: flex;
	flex-direction: column;
	gap: 67px;
	padding: 65px 0px 65px;
}

.c-chara-parts__head {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 79px;
	width: 100%;
}

.c-chara-parts__name {
	display: flex;
	justify-content: center;
	padding: 29px;
	width: 100%;
}

.c-chara-parts__name-text {
	height: 89px;
}

.c-chara-parts__img {
	align-items: center;
	display: flex;
	height: 762px;
	justify-content: center;
	position: relative;
	width: 100%;
}

.c-chara-parts__img img {
	height: inherit;
}

.c-chara-parts__words {
	align-items: start;
	bottom: 66px;
	display: flex;
	flex-direction: row-reverse;
	gap: 13px;
	position: absolute;
	right: 96px;
	transform: rotate(9.76deg);
}

.c-chara-parts__words span {
	background: #f0f4f4;
	display: inline-block;
	font-family: "Shippori Antique", sans-serif;
	font-size: 43px;
	line-height: 1;
	padding: 10px;
	writing-mode: vertical-rl;
}

.c-chara-parts__words span:nth-child(2) {
	margin-top: 47px;
}

.c-chara-parts__content {
	padding-inline: 47px;
}

.c-chara-parts__text {
	font-size: 24px;
	line-height: 1.7916666667;
}

.c-chara-parts__row {
	align-items: center;
	display: flex;
	gap: 23px;
	margin-top: 48px;
}

.c-chara-parts__row span {
	background: #7D8E8D;
	display: inline-block;
	height: 1px;
	width: 100%;
}

.c-chara-parts__banner {
	display: block;
	flex-shrink: 0;
	width: 372px;
}

.c-chara-parts__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 60px;
}

.c-chara-parts__item + .c-chara-parts__item {
	margin-top: 24px;
}

.c-chara-parts__sub-heading {
	padding: 8px 18px;
	width: 100%;
}

.c-chara-parts__sub-heading-text {
	height: 21px;
}

.c-chara-parts__table tr {
	border-top: 1px solid #7D8E8D;
}

.c-chara-parts__table tr:first-child {
	border: none;
}

.c-chara-parts__table th {
	border-right: 1px solid #7D8E8D;
	flex-shrink: 0;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	width: 151px;
}

.c-chara-parts__table td {
	font-size: 24px;
	line-height: 1.7916666667;
	padding: 4px 20px;
}

.c-chara-parts__status {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.c-chara-parts__status-wrap {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 7px;
	padding-inline: 7px;
}

.c-chara-parts__status-head {
	align-items: center;
	display: flex;
	gap: 16px;
}

.c-chara-parts__icon {
	display: block;
	width: 21px;
}

.c-chara-parts__text02 {
	flex-shrink: 0;
	font-size: 20px;
	font-weight: bold;
}

.c-chara-parts__status-bar {
	display: flex;
	gap: 8px;
}

.c-chara-parts__status-bar span {
	background: #486061;
	display: inline-block;
	height: 19px;
	opacity: 0.2;
	width: 40px;
}

.c-chara-parts__status-bar.--1 span:nth-child(-n+1) {
	opacity: 1;
}

.c-chara-parts__status-bar.--2 span:nth-child(-n+2) {
	opacity: 1;
}

.c-chara-parts__status-bar.--3 span:nth-child(-n+3) {
	opacity: 1;
}

.c-chara-parts__status-bar.--4 span:nth-child(-n+4) {
	opacity: 1;
}

.c-chara-parts__status-bar.--5 span:nth-child(-n+5) {
	opacity: 1;
}

.c-chara-parts__status-bar.--6 span:nth-child(-n+6) {
	opacity: 1;
}

.c-chara-parts__status-bar.--7 span:nth-child(-n+7) {
	opacity: 1;
}

.c-chara-parts__status-bar.--8 span:nth-child(-n+8) {
	opacity: 1;
}

.c-chara-parts__status-bar.--9 span:nth-child(-n+9) {
	opacity: 1;
}

.c-chara-parts__status-bar.--10 span:nth-child(-n+10) {
	opacity: 1;
}

.c-chara-parts__scores {
	display: flex;
	flex-direction: column;
	line-height: 1;
	margin-left: auto;
	margin-right: 9px;
	position: relative;
}

.c-chara-parts__scores span {
	background: #486061;
	display: block;
	height: 1px;
	left: 41px;
	position: absolute;
	top: 57%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 28px;
}

.c-chara-parts__scores-total {
	font-size: 26px;
	font-weight: 900;
}

.c-chara-parts__scores-all {
	font-size: 18px;
	margin-left: 48px;
}

.c-chara-parts__gallerys {
	display: flex;
	flex-direction: column;
	gap: 60px;
	margin-top: 130px;
}

.c-chara-parts__gallery-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 15px 16px;
}

.c-chara-parts__gallery-head {
	font-size: 30px;
	font-weight: bold;
}

.c-chara-parts__gallery-text {
	font-size: 24px;
}

.c-chara-parts__gallery-img {
	aspect-ratio: 673/256;
	display: block;
	overflow: hidden;
	width: 100%;
}

.c-chara-parts__gallery-img.--square {
	aspect-ratio: 1/1;
	width: calc((100% - 40px) / 3);
}

.c-chara-parts__gallery-img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}

.c-chara-parts__gallery-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 19px 20px;
}

.c-chara-parts__buttons {
	display: flex;
	position: relative;
}

.c-chara-parts__button-wrap {
	position: relative;
	width: calc(50% + 20px);
	cursor: pointer;
}

.c-chara-parts__button-wrap.--prev {
	margin-right: -20px;
	z-index: 1;
}

.c-chara-parts__button-wrap.--next {
	margin-left: -20px;
	z-index: 0;
}

.c-chara-parts__button-wrap:hover .c-chara-parts__button::before {
	opacity: 0;
}

.c-chara-parts__button-wrap:hover img {
	transform: scale(1.1);
}

.c-chara-parts__button-wrap:hover .c-chara-parts__button-icon {
	background: #fff;
}

.c-chara-parts__button-wrap:hover .c-chara-parts__button-inner {
	background: #486061;
}

.c-chara-parts__button-wrap:hover path {
	fill: #fff;
}

.c-chara-parts__button {
	height: 190px;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 0;
}

.c-chara-parts__button::before {
	background: #353030;
	content: "";
	inset: 0;
	opacity: 0.2;
	position: absolute;
	transition: 0.3s;
	z-index: 1;
}

.c-chara-parts__button.--prev {
	clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 0% 100%);
	right: 2px;
	z-index: 1;
}

.c-chara-parts__button.--next {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.c-chara-parts__button-border-bg {
	position: relative;
}

.c-chara-parts__button-border-bg.--prev {
	background: #000;
	clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 0% 100%);
}

.c-chara-parts__button-border-bg.--next {
	background: #000;
}

.c-chara-parts__button-icon {
	align-items: center;
	aspect-ratio: 1/1;
	background: #486061;
	border: 4px solid #000;
	border-radius: 200px;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: 0.3s;
	z-index: 2;
}

.c-chara-parts__button-icon.--prev {
	left: 40px;
}

.c-chara-parts__button-icon.--next {
	right: 40px;
}

.c-chara-parts__button-inner {
	align-items: center;
	aspect-ratio: 1/1;
	background: #fff;
	border-radius: 200px;
	display: flex;
	justify-content: center;
	transition: 0.3s;
	width: 49px;
}

.c-chara-parts__button-arrow {
	align-items: center;
	display: flex;
	justify-content: center;
	width: 35.44px;
}

.c-chara-parts__button-arrow svg {
	display: block;
	width: 100%;
}

.c-chara-parts__button-arrow svg path {
	display: block;
	transition: 0.3s;
	width: 100%;
}

.c-chara-parts__button-img {
	display: block;
	width: 100%;
}

.c-chara-parts__button-img img {
	transition: 0.3s;
}

@media screen and (min-width: 1266px) {

.c-chara-parts__wrap {
	margin-block: 68px;
	width: 75%;
}

.c-chara-parts__wrap::before,
.c-chara-parts__wrap::after {
	background: #000;
	content: "";
	display: block;
	height: 200%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	z-index: 2;
}

.c-chara-parts__wrap-inner::before,
.c-chara-parts__wrap-inner::after {
	background: #000;
	content: "";
	display: block;
	height: 2px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 200vw;
	z-index: 2;
}

.c-chara-parts__block {
	padding-bottom: 80px;
}

.c-chara-parts__close {
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(50%, -50%);
}

.c-chara-parts__inner {
	align-items: end;
	gap: 56px;
	padding: 0;
	width: 100%;
}

.c-chara-parts__name {
	justify-content: end;
	padding: 30px 126px 32px;
}

.c-chara-parts__name-text {
	height: 77px;
}

.c-chara-parts__img {
	height: auto;
	left: -43px;
	position: absolute;
	top: 35px;
	width: 45%;
}

.c-chara-parts__words {
	bottom: auto;
	gap: 9px;
	right: 108px;
	top: 60%;
	transform: rotate(8deg) translateY(-50%);
}

.c-chara-parts__words span {
	font-size: 36px;
	padding: 5px;
}

.c-chara-parts__content {
	max-width: 603px;
	padding-inline: 40px;
}

.c-chara-parts__text {
	font-size: 20px;
	line-height: 2.1;
}

.c-chara-parts__row {
	gap: 30px;
	margin-top: 40px;
	padding-left: 15px;
}

.c-chara-parts__banner {
	width: 235px;
}

.c-chara-parts__item {
	gap: 8px;
	margin-top: 42px;
}

.c-chara-parts__sub-heading-text {
	height: 16px;
}

.c-chara-parts__table th {
	font-size: 13px;
	width: 132px;
}

.c-chara-parts__table td {
	font-size: 16px;
	padding: 3px 12px;
}

.c-chara-parts__status-wrap {
	gap: 5px;
	padding-inline: 16px;
}

.c-chara-parts__status-head {
	gap: 5px;
}

.c-chara-parts__icon {
	flex-shrink: 0;
	width: 16px;
}

.c-chara-parts__text02 {
	font-size: 13px;
}

.c-chara-parts__status-bar {
	gap: 8px;
}

.c-chara-parts__status-bar span {
	height: 16px;
	width: 32px;
}

.c-chara-parts__gallerys {
	gap: 31px;
	margin-top: 71px;
}

.c-chara-parts__gallery-body {
	padding: 9px 23px;
}

.c-chara-parts__gallery-head {
	font-size: 25px;
}

.c-chara-parts__gallery-text {
	font-size: 20px;
	line-height: 2.1;
}

.c-chara-parts__gallery-wrap {
	margin-top: 51px;
}

.c-chara-parts__buttons {
	display: contents;
}

.c-chara-parts__button-wrap {
	display: block;
	height: 100%;
	position: fixed;
	top: 0;
	width: 185px;
}

.c-chara-parts__button-wrap.--prev {
	left: 0;
	margin: 0;
	z-index: -1;
}

.c-chara-parts__button-wrap.--next {
	margin: 0;
	right: 0;
	z-index: -1;
}

.c-chara-parts__button {
	height: 100%;
	position: absolute;
	width: 100%;
}

.c-chara-parts__button::before {
	opacity: 0.5;
}

.c-chara-parts__button.--prev {
	clip-path: polygon(0% 0%, 59% 0%, 100% 100%, 0% 100%);
}

.c-chara-parts__button.--next {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 59% 100%);
	left: 2px;
	right: auto;
}

.c-chara-parts__button-border-bg {
	height: 100%;
	top: 0;
}

.c-chara-parts__button-border-bg.--prev {
	clip-path: polygon(0% 0%, 59% 0%, 100% 100%, 0% 100%);
}

.c-chara-parts__button-border-bg.--next {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 59% 100%);
}

.c-chara-parts__button-icon {
	width: 73px;
}

.c-chara-parts__button-icon.--prev {
	left: auto;
	right: 17px;
}

.c-chara-parts__button-icon.--next {
	left: 17px;
	right: auto;
}

.c-chara-parts__button-img {
	height: 100%;
}

.c-chara-parts__button-img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}

}

@media screen and (min-width: 1480px) {

.c-chara-parts__wrap {
	width: 100%;
}

.c-chara-parts__img {
	width: 54%;
}

.c-chara-parts__button-wrap {
	width: 256px;
}

}