@charset "UTF-8";

/*================================================

　modal message

=================================================*/
.modal-message {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	max-width: 1114px;
	height: 100%;
	max-height: 680px;
	background-color: transparent;
	z-index: 2;
}
.message-contents {
	overflow: auto;
	display: flex;
	width: 100%;
	height: 600px;
	margin: auto;
	padding: 35px 35px 20px;
	background-color: #F2F7FD;
	border-radius: 30px;
	scrollbar-color: #787878 transparent;
}
.message-person {
	display: flex;
	flex-direction: column;
	width: 436px;
	margin-right: 45px;
}
.message-person h1 {
	display: inline-block;
	position: relative;
	margin: 35px 0 15px;
	color: #FFF;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.35;
	border-radius: 100vh;
	order: 2;
}
.message-person h1 span {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 100vh;
}
.message-person p {
	font-size: 1.6rem;
	order: 3;
}
.message-person figure {
	order: 1;
}
.message-txt {
	width: 540px;
}
.message-txt h4 {
	margin-bottom: 0;
}
.message-txt p {
	margin-top: 2em;
	font-size: 1.6rem;
	line-height: 1.8;
}

.type01 .message-person h1 span { background-color: #003B68; }
.type02 .message-person h1 span,
.type07 .message-person h1 span,
.type08 .message-person h1 span { background-color: #0041C0; }
.type03 .message-person h1 span { background-color: #00B7F1; }
.type04 .message-person h1 span { background-color: #00AA80; }
.type05 .message-person h1 span { background-color: #FFA300; }
.type06 .message-person h1 span { background-color: #006255; }
.type09 .message-person h1 span { background-color: #475C85; }
.type10 .message-person h1 span { background-color: #FBC82D; }

.type01 .message-txt h4 { width: 81.1111111%; }
.type02 .message-txt h4 { width: 87.1296296%; }
.type03 .message-txt h4 { width: 81.1111111%; }
.type04 .message-txt h4 { width: 92.7777777%; }
.type05 .message-txt h4 { width: 82.6851851%; }
.type06 .message-txt h4 { width: 87.6851851%; }
.type07 .message-txt h4 { width: 81.2037037%; }
.type08 .message-txt h4 { width: 88.2407407%; }
.type09 .message-txt h4 { width: 94.722222%; }
.type10 .message-txt h4 { width: 75.9259259%; }


@media screen and (max-width: 1079px) {

	.modal-message {
		max-height: 63.021316vw;
	}
	.message-contents {
		height: 55.6070435vw;
		padding: 3.2437442vw 3.2437442vw 1.8535681vw;
		border-radius: 2.7803521vw;
	}
	.message-person {
		width: 40.465116vw;
		margin-right: 4.170309vw;
	}
	.message-person h1 {
		margin: 3.2437442vw 0 2.7803521vw;
		font-size: clamp(1.1rem, (100vw - 769px) * 5 / 310 + 11px, 1.6rem);
	}
	.message-person p {
		font-size: clamp(1.1rem, (100vw - 769px) * 5 / 310 + 11px, 1.6rem);
	}
	.message-txt {
		width: 50.0463392vw;
	}
	.message-txt p {
		font-size: clamp(1.1rem, (100vw - 769px) * 5 / 310 + 11px, 1.6rem);
	}

}

@media screen and (max-width: 768px) {

	.modal-message {
		max-height: 100%;
	}
	.message-contents {
		position: relative;
		display: block;
		width: 100%;
		height: calc(100% - 140px);
		padding: 12px 12px 20px;
		border-radius: 12px;
	}
	.message-person {
		width: 100%;
		padding-top: 22.75vw;
		margin-right: 0;
		margin-bottom: 30px;
	}
	.type01 .message-person,
	.type03 .message-person,
	.type05 .message-person,
	.type06 .message-person,
	.type07 .message-person {
		padding-top: 16.233333vw;
	}
	.message-person h1 {
		margin: 17px 0 15px;
		font-size: 1.3rem;
	}
	.message-person p {
		font-size: 1.6rem;
	}
	.message-txt {
		width: 100%;
	}
	.message-txt h4 {
		position: absolute;
		top: calc(12px + 1.333333vw);
		left: 12px;
	}
	.message-txt p {
		font-size: 1.4rem;
		line-height: 1.8;
	}
	.message-txt p:nth-of-type(1) {
		margin-top: 0;
	}
	.type09 .message-txt h4 { width: 91.743119%; }

}