@charset "utf-8";

/*----------------------------
	character
------------------------------*/
.contentsWrap {
	margin-bottom: 0;
	background-image: url(/character/top/img/bg.png);
	background-repeat: repeat;
	font-size: 1.6rem;
}
.contentsBlock {
	margin-top: 0;
}

.mainVisual {
	text-align: center;
}

/* about */
.about {
	padding-top: 40px;
}
.about .bg {
	position: relative;
}
.about .bg::before,
.about .bg::after {
	display: block;
	content: '';
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
}
.about .bg::before {
	background-image: url(/character/top/img/bg01.png);
	top: 40px;
	left: 0;
	width: 171px;
	height: 151px;
}
.about .bg::after {
	background-image: url(/character/top/img/bg02.png);
	top: 175px;
	right: 0;
	width: 192px;
	height: 204px;
}
.about h2 {
	margin: 0 auto;
	width: 49%;
}
.about .profile {
	margin: 60px auto 0;
	width: 64%;
	border-radius: 15px;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
.about .profile::before,
.about .profile::after {
	display: block;
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	width: 38px;
	height: 42px;
	position: absolute;
	top: -15px;
}
.about .profile::before {
	background-image: url(/character/top/img/pin01.png);
	left: 12px;
}
.about .profile::after {
	background-image: url(/character/top/img/pin02.png);
	right: 12px;
}
.about .profile .detail {
	width: 73.8%;
}
.about .profile .name {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 44px;
	font-weight: bold;
	letter-spacing: -0.12em;
}
.about .profile .txt {
	line-height: 2.8rem;
}
.about .profile dl {
	margin-top: 20px;
	display: flex;
	align-items: center;
}
.about .profile dl + dl {
	margin-top: 13px;
	padding-top: 13px;
	border-top: dotted 4px #c6c6c6;
}
.about .profile dt {
	width: 30.6%;
	padding: 4px 10px 6px;
	border-radius: 20px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.about .profile dd {
	padding-left: 15px;
	width: calc(100% - 30.6%);
}
/* noc */
.about .profile.noc {
	padding: 25px 6% 50px 0;
	border: solid 3px #24a6df;
}
.about .profile.noc .pic {
	width: 41.5%;
	margin-left: -23.7%;
}
.about .profile.noc .name {
	color: #0890d1;
}
.about .profile.noc dt {
	background: #24a6df;
}
/* ty */
.about .profile.ty {
	padding: 30px 0 50px 6%;
	border: solid 3px #d84e6b;
	flex-direction: row-reverse;
}
.about .profile.ty .pic {
	width: 49.5%;
	margin-right: -23%;
}
.about .profile.ty .name {
	color: #d84e6b;
}
.about .profile.ty dt {
	background: #d84e6b;
}

/* variation */
.variation .inner {
	padding-top: 120px;
}
.variation .bg {
	position: relative;
}
.variation .bg::before,
.variation .bg::after {
	display: block;
	content: '';
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
}
.variation .bg::before {
	background-image: url(/character/top/img/bg02.png);
	top: -40px;
	left: 0;
	width: 192px;
	height: 204px;
	transform: rotate(180deg);
}
.variation .bg::after {
	background-image: url(/character/top/img/bg01.png);
	top: 55px;
	right: 0;
	width: 171px;
	height: 151px;
	transform: rotate(90deg);
}
.variation h2 {
	margin: 0 auto;
	width: 57.3%;
}
.variation .lead {
	margin: 30px 0 0;
	text-align: center;
	line-height: 3rem;
}
.variation .list {
	margin-top: 80px;
	background-image: url(/character/top/img/bg_variation.png);
	background-repeat: repeat;
}
.variation .list p {
	display: inline-block;
	margin-top: -27px;
	padding-bottom: 35px;
}

/* action */
.action .inner {
	padding: 120px 0 140px;
}
.action .bg {
	position: relative;
}
.action .bg::before,
.action .bg::after {
	display: block;
	content: '';
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
}
.action .bg::before {
	background-image: url(/character/top/img/bg01.png);
	top: 70px;
	left: 0;
	width: 171px;
	height: 151px;
}
.action .bg::after {
	background-image: url(/character/top/img/bg02.png);
	top: 200px;
	right: 0;
	width: 192px;
	height: 204px;
}
.action h2 {
	margin: 0 auto;
	width: 50%;
}
.action .lead {
	margin: 30px 0 0;
	text-align: center;
	line-height: 3rem;
}
.action .list {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.action .list .box {
	margin: 50px 0.8% 0;
	width: 31.6%;
}
.action .list .box .pic {
	border: solid 8px #fff;
	background: #fff;
}
.action .list .box .pic img {
	display: block;
	height: 248px;
	width: 100%;
	object-fit: cover;
}
.action .list .box .txt {
	margin-top: 10px;
	font-weight: bold;
	text-align: center;
}
.action .list .box .txt span {
	padding-right: 26px;
	color: #004ea1;
	text-decoration: underline;
	cursor: pointer;
	position: relative;
}
.action .list .box .txt span::after {
	display: block;
	content: "";
	background: url(/character/top/img/icon_blank.png) no-repeat;
	background-size: contain;
	width: 19px;
	height: 18px;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -9px;
}

/* footer */
.footer {
	padding-top: 0;
}

/* modal */
body.modalOp {
	overflow: hidden;
}
.modalBg {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background: rgba(218, 243, 255, 0.9);
	overflow: auto;
	z-index: 99;
	opacity: 0;
	transform: matrix(.1, 0, 0, .1, 0, 0);
	transition: transform .8s ease-in-out;
}
.modalBg.modalOp {
	opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
}
.modal {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 7777;
	margin: 120px auto;
	padding: 0 60px 60px;
	max-width: 960px;
	background-color: #fff;
	border: solid 3px #024199;
	border-radius: 15px;
	position: relative;
}
.modal.modalOp {
	animation: modalContentIn;
	animation-duration: .4s;
	animation-delay: .8s;
	animation-fill-mode: backwards;
}
@keyframes modalContentIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.modalClose {
	margin-left: auto;
	width: 53px;
	height: 52px;
	cursor: pointer;
	position: relative;
	top: -70px;
	right: -60px;
}
.modal .modalTtl {
	margin: 0 auto;
	width: 72%;
}
.modal .modalInner {
	display: none;
	margin-top: 40px;
}
.modal .slide .slick-track {
	display: flex;
	align-items: center;
}
.modal .slick-slide img {
	object-fit: contain;
	height: 410px;
}
.modal .slick-dots {
	bottom: -30px;
}
.modal .slick-dots li {
	margin: 0 5px;
	width: 10px;
	height: 10px;
}
.modal .slick-dots li button {
	width: 10px;
	height: 10px;
}
.modal .slick-dots li button:before {
	content:'';
	width: 10px;
	height: 10px;
	background: #c4c4c4;
	opacity: 1;
	border-radius: 5px;
}
.modal .slick-dots li.slick-active button:before {
	background: #004098;
	opacity: 1;
}
.modal .modalTxt {
	padding-top: 30px;
}
.modal .modalTxt dt {
	font-size: 2rem;
	font-weight: bold;
}
.modal .modalTxt dd {
	margin-top: 10px;
	line-height: 3rem;
}
.modal .modalTxt p + p {
	margin-top: 10px;
}

/*----------
	max-width 1200px
------------*/
@media only screen and (max-width: 1200px) {
	/* about */
	.about .bg::before {
		top: 3.333vw;
		left: 0;
		width: 14.25vw;
		height: 12.583vw;
	}
	.about .bg::after {
		top: 14.583vw;
		right: 0;
		width: 16vw;
		height: 17vw;
	}

	/* variation */
	.variation .bg::before {
		top: -3.333vw;	;
		left: 0;
		width: 16vw;
		height: 17vw;
	}
	.variation .bg::after {
		top: 4.583vw;
		right: 0;
		width: 14.25vw;
		height: 12.583vw;
	}

	/* action */
	.action .bg::before {
		top: 5.833vw;
		left: 0;
		width: 14.25vw;
		height: 12.583vw;
	}
	.action .bg::after {
		top: 16.667vw;
		right: 0;
		width: 16vw;
		height: 17vw;
	}
	.action .list .box .pic img {
		height: 20.667vw;
	}
}

/*----------
	SP
------------*/
@media only screen and (max-width: 768px) {
	.contentsWrap {
		font-size: 3.125vw;
		background-size: 10px auto;
	}

	/* about */
	.about {
		padding-top: 1.302vw;
	}
	.about h2 {
		width: 95%;
	}
	.about .bg {
		overflow: hidden;
	}
	.about .bg::before {
		top: 22.266vw;
		left: -3.906vw;
	}
	.about .bg::after {
		top: 36.458vw;
		right: -7.812vw;
	}
	.about .profile {
		margin: 7.813vw auto 0;
		width: 84%;
		flex-direction: column;
	}
	.about .profile::before,
	.about .profile::after {
		width: 5.729vw;
		height: 6.51vw;
	}
	.about .profile::before {
		left: 2.083vw;
	}
	.about .profile::after {
		right: 2.083vw;
	}
	.about .profile .detail {
		width: 100%;
	}
	.about .profile .name {
		font-size: 7.292vw;
	}
	.about .profile .txt {
		margin-top: 1.953vw;
		line-height: 5.208vw;
	}
	.about .profile dl {
		margin-top: 6.51vw;
	}
	.about .profile dl + dl {
		margin-top: 2.604vw;
		padding-top: 2.604vw;
	}
	.about .profile dt {
		width: 28.646vw;
		padding: 1.042vw 1.302vw 1.302vw;
		border-radius: 3.255vw;
	}
	.about .profile dd {
		padding-left: 3.255vw;
		width: calc(100% - 28.646vw);
	}
	/* noc */
	.about .profile.noc {
		padding: 6.51vw 3.906vw;
	}
	.about .profile.noc .pic {
		width: 39.6%;
		margin-top: 1.302vw;
		margin-left: 0;
		position: absolute;
		left: -3%;
	}
	.about .profile.noc .name,
	.about .profile.noc .txt {
		margin-left: auto;
		width: 56.4%;
	}
	/* ty */
	.about .profile.ty {
		padding: 6.51vw 3.906vw;
		flex-direction: column;
	}
	.about .profile.ty .pic {
		width: 47.2%;
		margin-top: 1.302vw;
		margin-right: 0;
		position: absolute;
		right: -3%;
	}
	.about .profile.ty .name,
	.about .profile.ty .txt {
		width: 51.5%;
	}

	/* variation */
	.variation .inner {
		padding-top: 11.719vw;
	}
	.variation .bg {
		overflow: hidden;
	}
	.variation .bg::before {
		top: 5.208vw;
		left: -3.906vw;
	}
	.variation .bg::after {
		top: 24.74vw;
		right: -5.859vw;
	}
	.variation h2 {
		width: 75%;
	}
	.variation .lead {
		margin: 6.51vw 0 0;
		font-size: 3.385vw;
		line-height: 5.729vw;
	}
	.variation .list {
		margin-top: 10.417vw;
		padding: 0 5.208vw;
		background-size: 10px auto;
	}
	.variation .list p {
		margin-top: -3.516vw;
		padding-bottom: 6.51vw;
	}

	/* action */
	.action .inner {
		padding: 11.719vw 0 11.719vw;
	}
	.action .bg {
		overflow: hidden;
	}
	.action .bg::before {
		top: 1.953vw;
		left: -4.557vw;
	}
	.action .bg::after {
		top: 27.344vw;
		right: -7.161vw;
	}
	.action h2 {
		width: 95%;
	}
	.action .lead {
		margin: 6.51vw 0 0;
		font-size: 3.385vw;
		line-height: 5.729vw;
	}
	.action .list {
		flex-direction: column;
		padding: 0 5.208vw;
	}
	.action .list .box {
		margin: 6.12vw 0.8% 0;
		width: 100%;
	}
	.action .list .box .pic {
		border: solid 6px #fff;
	}
	.action .list .box .pic img {
		height: 59.635vw;
		width: 100%;
	}
	.action .list .box .txt {
		margin-top: 2.214vw;
		font-size: 3.385vw;
	}
	.action .list .box .txt span {
		padding-right: 4.818vw;
	}
	.action .list .box .txt span::after {
		width: 3.776vw;
		height: 3.516vw;
		margin-top: -1.693vw;
	}

	/* modal */
	.modal {
		max-width: 92%;
		margin: 15.625vw auto;
		padding: 0 3.906vw 7.813vw;
	}
	.modal .modalClose {
		width: 7.422vw;
		height: 7.292vw;
		top: -10.417vw;
		right: -5.208vw;
	}
	.modal .modalTtl {
		width: 100%;
	}
	.modal .modalInner {
		margin-top: 7.813vw;
	}
	.modal .slick-dotted.slick-slider {
		margin-bottom: 6.51vw;
	}
	.modal .slick-slide img {
		height: 53.385vw;
	}
	.modal .slick-dots {
		bottom: -5.208vw;
	}
	.modal .slick-dots li {
		margin: 0 1.042vw;
		width: 2.083vw;
		height: 2.083vw;
	}
	.modal .slick-dots li button {
		width: 2.083vw;
		height: 2.083vw;
	}
	.modal .slick-dots li button:before {
		width: 2.083vw;
		height: 2.083vw;
		border-radius: 1.042vw;
	}
	.modal .modalTxt {
		padding-top: 6.51vw;
	}
	.modal .modalTxt dt {
		font-size: 3.906vw;
	}
	.modal .modalTxt dd {
		margin-top: 1.953vw;
		font-size: 3.125vw;
		line-height: 5.469vw;
	}
	.modal .modalTxt p + p {
		margin-top: 1.953vw;
	}
}