/*----------
	character-page
----------*/
.character-page {
	position: relative;
	padding-bottom: 100px;
}
@media (min-width: 744px) {
	.character-page > *:not(.is-not-bugfix-rotate) {
		transform: none;
	}
}

/*----------
	wrap
----------*/
.character-circle-wrap {
	margin: 0 -20px;
}
@media (min-width: 744px) {
	.character-circle-wrap {
		position: relative;
		height: 1557px;
		max-width: 900px;
		margin: 0 auto;
	}
}
@media (max-width: 900px) and (min-width: 744px) {
	.character-circle-wrap {
		height: auto;
		max-width: 100%;
	}
}

.character-title-wrap {
	position: relative;
	margin: 110px -20px 0;
}
@media (min-width: 744px) {
	.character-title-wrap {
		position: absolute;
		top: 1041px;
		left: 0;
		width: 100%;
		margin: 0;
	}
}
@media (max-width: 900px) and (min-width: 744px) {
	.character-title-wrap {
		position: relative;
		top: auto;
		left: auto;
		margin-top: 110px;
	}
}

/*----------
	character-circle
----------*/
.character-circle {
	position: relative;
	z-index: 1;
	max-width: 315px;
	margin: 0 auto;
}
.character-circle::before {
	content: "";
	position: absolute;
	left: calc(50% - 157.5px);
	bottom: 0;
	display: block;
	width: 315px;
	height: 315px;
	background-color: #FFFFFF;
	border: solid 10px var(--color-prim);
	border-radius: 100%;
}
.character-circle__inner {
	position: relative;
	z-index: 1;
}
.character-circle__img {
	margin: 0 auto;
}
.character-circle__img img {
	height: 200px;
}
.character-circle__sttl {
	position: relative;
	z-index: 1;
	margin-top: 5px;
	color: var(--color-prim);
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.63;
}
.character-circle__sttl span {
	font-size: 1.6rem;
	line-height: 2.25;
}
.character-circle__text {
	position: relative;
	z-index: 1;
	margin-top: 3px;
	padding: 0 38px;
}
.character-circle--chikara {
	margin-top: 25px;
	padding-bottom: 90px;
}
.character-circle--chikara::before {
	border-color: #FFA043;
}
.character-circle--mirai {
	margin-top: 20px;
	padding-bottom: 85px;
}
.character-circle--mirai::before {
	border-color: #E896FF;
}
.character-circle--plat {
	max-width: 295px;
	padding-bottom: 76px;
}
.character-circle--plat::before {
	left: calc(50% - 147.5px);
	width: 295px;
	height: 295px;
	border-color: var(--color-seco-ultramarine);
}
.character-circle--plat .character-circle__img {
	margin-bottom: -56px;
}
.character-circle--ene {
	max-width: 295px;
	margin-top: 22px;
	padding-bottom: 93px;
}
.character-circle--ene::before {
	left: calc(50% - 147.5px);
	width: 295px;
	height: 295px;
	border-color: var(--color-seco-yellow);
}
.character-circle--ene .character-circle__img {
	margin-bottom: -88px;
}
.character-circle--clen {
	max-width: 295px;
	margin-top: -8px;
	padding-bottom: 83px;
}
.character-circle--clen::before {
	left: calc(50% - 147.5px);
	width: 295px;
	height: 295px;
	border-color: var(--color-seco-green);
}
.character-circle--clen .character-circle__img {
	margin-bottom: -43px;
}
.character-circle--live {
	max-width: 295px;
	margin-top: 20px;
	padding-bottom: 83px;
}
.character-circle--live::before {
	left: calc(50% - 147.5px);
	width: 295px;
	height: 295px;
	border-color: var(--color-seco-blue);
}
.character-circle--live .character-circle__img {
	margin-bottom: -66px;
}
@media (min-width: 744px) {
	.character-circle {
		position: absolute;
		max-width: 435px;
	}
	.character-circle::before {
		left: calc(50% - 217.5px);
		width: 435px;
		height: 435px;
		border-width: 15px;
	}
	.character-circle__img img {
		height: 240px;
	}
	.character-circle__sttl {
		margin-top: 10px;
		font-size: 2.4rem;
		line-height: var(--line-height-s);
		transform: rotate(0.03deg);
	}
	.character-circle__sttl span {
		font-size: 1.8rem;
		line-height: var(--line-height-l);
	}
	.character-circle__text {
		margin-top: 8px;
		padding: 0 56px;
		transform: rotate(0.03deg);
	}
	.character-circle--chikara {
		left: 0;
		top: 27px;
		margin-top: 0;
		padding-bottom: 110px;
	}
	.character-circle--mirai {
		right: 0;
		top: 139px;
		margin-top: 0;
		padding-bottom: 103px;
	}
	.character-circle--plat {
		left: 104px;
		top: 559px;
		max-width: 380px;
		padding-bottom: 100px;
	}
	.character-circle--plat::before {
		left: calc(50% - 190px);
		width: 380px;
		height: 380px;
	}
	.character-circle--plat .character-circle__img {
		margin-bottom: -58px;
	}
	.character-circle--plat .character-circle__text {
		padding-right: 50px;
		padding-left: 50px;
	}
	.character-circle--ene {
		left: 0;
		top: 1133px;
		max-width: 280px;
		margin-top: 0;
		padding-bottom: 86px;
	}
	.character-circle--ene::before {
		left: calc(50% - 140px);
		width: 280px;
		height: 280px;
		border-width: 10px;
	}
	.character-circle--ene .character-circle__img {
		margin-bottom: -102px;
	}
	.character-circle--ene .character-circle__text {
		padding-right: 35px;
		padding-left: 35px;
	}
	.character-circle--clen {
		left: calc(50% - 140px);
		top: 1162px;
		max-width: 280px;
		margin-top: 0;
		padding-bottom: 86px;
	}
	.character-circle--clen::before {
		left: calc(50% - 140px);
		width: 280px;
		height: 280px;
		border-width: 10px;
	}
	.character-circle--clen .character-circle__img {
		margin-bottom: -47px;
	}
	.character-circle--clen .character-circle__text {
		padding-right: 35px;
		padding-left: 35px;
	}
	.character-circle--live {
		right: 0;
		top: 1108px;
		max-width: 280px;
		margin-top: 0;
		padding-bottom: 86px;
	}
	.character-circle--live::before {
		left: calc(50% - 140px);
		width: 280px;
		height: 280px;
		border-width: 10px;
	}
	.character-circle--live .character-circle__img {
		margin-bottom: -76px;
	}
	.character-circle--live .character-circle__text {
		padding-right: 35px;
		padding-left: 35px;
	}
}
@media (max-width: 900px) and (min-width: 744px) {
	.character-circle {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
	}
	.character-circle--chikara {
		margin-top: 30px;
	}
	.character-circle--mirai {
		margin-top: 30px;
	}
	.character-circle--plat {
		margin-top: 10px;
	}
	.character-circle--ene {
		max-width: 380px;
		margin-top: 50px;
		padding-bottom: 120px;
	}
	.character-circle--ene::before {
		left: calc(50% - 190px);
		width: 380px;
		height: 380px;
		border-width: 15px;
	}
	.character-circle--ene .character-circle__img {
		margin-bottom: -94px;
	}
	.character-circle--ene .character-circle__text {
		padding-right: 50px;
		padding-left: 50px;
	}
	.character-circle--clen {
		max-width: 380px;
		margin-top: 10px;
		padding-bottom: 120px;
	}
	.character-circle--clen::before {
		left: calc(50% - 190px);
		width: 380px;
		height: 380px;
		border-width: 15px;
	}
	.character-circle--clen .character-circle__img {
		margin-bottom: -44px;
	}
	.character-circle--clen .character-circle__text {
		padding-right: 50px;
		padding-left: 50px;
	}
	.character-circle--live {
		max-width: 380px;
		margin-top: 30px;
		padding-bottom: 120px;
	}
	.character-circle--live::before {
		left: calc(50% - 190px);
		width: 380px;
		height: 380px;
		border-width: 15px;
	}
	.character-circle--live .character-circle__img {
		margin-bottom: -72px;
	}
	.character-circle--live .character-circle__text {
		padding-right: 50px;
		padding-left: 50px;
	}
}

/*----------
	character-title
----------*/
.character-title {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 20px;
	text-align: center;
}
.character-title img {
	max-width: 335px;
}
@media (min-width: 744px) {
	.character-title {
		padding: 0;
	}
	.character-title img {
		max-width: 416px;
	}
}

/*----------
	character-modal-thumb
----------*/
.character-modal-thumb {
	position: relative;
	z-index: 1;
	margin: 40px 20px 0;
	text-align: center;
}
.character-modal-thumb img {
	max-width: 335px;
	border-radius: 30px;
}
@media (min-width: 744px) {
	.character-modal-thumb {
		margin-top: 57px;
		margin-bottom: 43px;
	}
	.character-modal-thumb img {
		max-width: 640px;
		transition: transform 0.2s ease-in-out;
	}
	.character-modal-thumb img:hover {
		transform: scale(1.04);
	}
}

/*----------
	obj
----------*/
.character-obj-earth {
	position: absolute;
	left: calc(50% - 371px);
	top: -2px;
	z-index: 1;
}
.character-obj-earth img {
	width: 743px;
	height: auto;
	animation: rotate-left 180s linear infinite;
}
@media (min-width: 744px) {
	.character-obj-earth {
		left: calc(50% - 318px);
		top: -218px;
	}
	.character-obj-earth img {
		width: 636px;
		height: auto;
	}
}
@media (max-width: 900px) and (min-width: 744px) {
	.character-obj-earth {
		left: calc(50% - 450px);
		top: -44px;
	}
	.character-obj-earth img {
		width: 900px;
		height: auto;
	}
}

.character-obj__sun {
	position: fixed;
	left: calc(50% + 34px);
	top: 11px;
}
.character-obj__sun img {
	width: 80px;
	height: auto;
	animation: rotate-left 60s linear infinite;
}
.character-obj__rocket {
	position: fixed;
	left: calc(50% - 180px);
	top: 305px;
}
.character-obj__rocket img {
	width: 88px;
	height: auto;
	animation: up-down 2.4s ease-in-out 0s infinite alternate;
}
.character-obj__satellite {
	position: fixed;
	left: calc(50% + 21px);
	bottom: 70px;
}
.character-obj__satellite img {
	width: 138px;
	height: auto;
	animation: down-up 2.8s ease-in-out 0s infinite alternate;
}
@media (min-width: 744px) {
	.character-obj__sun {
		left: calc(50% + 289px);
		top: 18px;
	}
	.character-obj__sun img {
		width: 106px;
	}
	.character-obj__rocket {
		left: calc(50% - 508px);
		top: 523px;
	}
	.character-obj__rocket img {
		width: 116px;
	}
	.character-obj__satellite {
		left: calc(50% + 290px);
		top: 352px;
	}
	.character-obj__satellite img {
		width: 183px;
	}
}
@media (max-width: 900px) and (min-width: 744px) {
	.character-obj__rocket {
		left: 4px;
	}
	.character-obj__satellite {
		left: auto;
		right: 40px;
	}
}