@charset "utf-8";

/* ========================================================
	message.css
======================================================== */

#container > section {
	position: relative;
	background-color: #fff;
	z-index: 1;
}

/* page_title
============================================================================================================ */
.page_title {
	background: none;
	color: #153380;
}
@media screen and (min-width: 768px), print {
	.page_title {
		height: 300px;
	}
}
@media screen and (max-width: 767px) {
	.page_title {
		height: 140px;
	}
}

/* message_page_bg
============================================================================================================ */
.message_page_bg {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 770px;
}
@media screen and (max-width: 767px) {
	.message_page_bg {
		height: 270px;
	}
}

/* message_contents
============================================================================================================ */
.message_contents {
	padding-bottom: 120px;
}
@media screen and (max-width: 767px) {
	.message_contents {
		padding-bottom: 60px;
	}
}

/* message_main
============================================================================================================ */
.message_main {
	position: relative;
	margin-bottom: 100px;
	background-color: #153380;
}
.message_main dl {
	padding: 30px 50px;
	background-color: #fff;
}
.message_main dl::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	width: 50px;
	height: 50px;
	background-color: #bf000f;
}
.message_main dd {
	margin-top: 5px;
	font-weight: bold;
	font-size: 2.8rem;
	line-height: 1.3;
}
.message_main dd .ff_en {
	display: block;
	margin-top: 10px;
	font-size: 2.6rem;
	color: #ededed;
	letter-spacing: 0.1em;
}
@media screen and (min-width: 768px), print {
	.message_main dl {
		position: absolute;
		right: 0;
		bottom: 0;
	}
}
@media screen and (max-width: 767px) {
	.message_main {
		margin-bottom: 40px;
	}
	.message_main p {
		padding-right: 15px;
	}
	.message_main dl {
		position: relative;
		padding: 15px 0 0 5vw;
	}
	.message_main dl::after {
		width: 30px;
		height: 30px;
	}
	.message_main dd {
		font-size: 2.2rem;
	}
	.message_main dd .ff_en {
		display: inline-block;
		margin: 0 0 0 10px;
		font-size: 1.8rem;
	}
}

/* lead
============================================================================================================ */
.message_contents .lead {
	position: relative;
	margin-bottom: 110px;
	padding: 40px 0;
	text-align: center;
	font-size: 3.2rem;
	line-height: 1.5;
	font-weight: bold;
}
.message_contents .lead::before,
.message_contents .lead::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 60px;
	border: 4px solid #ededed;
}
.message_contents .lead::before {
	left: 0;
	border-right-width: 0;
}
.message_contents .lead::after {
	right: 0;
	border-left-width: 0;
}
@media screen and (max-width: 767px) {
	.message_contents .lead {
		margin-bottom: 50px;
		padding: 25px 0;
		font-size: 1.8rem;
	}
	.message_contents .lead::before,
	.message_contents .lead::after {
		width: 30px;
		border-width: 3px;
	}
	.message_contents .lead::before {
		border-right-width: 0;
	}
	.message_contents .lead::after {
		border-left-width: 0;
	}
}

/* message
============================================================================================================ */
.message_contents .message {
	font-size: 1.8rem;
	line-height: 2;
}
.message_contents .message h2 {
	margin-bottom: 20px;
	font-size: 2.4rem;
	line-height: 1.5;
}
.message_contents .message h2::after {
	content: "";
	display: block;
	margin-top: 15px;
	border-top: 2px solid #325ecc;
	width: 40px;
}
.message_contents .column + .column {
	margin-top: 100px;
}
.message_contents .txt p + p {
	margin-top: 1.5em;
}
@media screen and (min-width: 768px), print {
	.message_contents .message .column {
		display: flex;
	}
	.message_contents .message .column .ph {
		flex-shrink: 0;
	}
	.message_contents .message .column.ph_r .ph {
		margin-left: 50px;
	}
	.message_contents .message .column.ph_l {
		flex-direction: row-reverse;
	}
	.message_contents .message .column.ph_l .ph {
		margin-right: 50px;
	}
}
@media screen and (max-width: 767px) {
	.message_contents .message {
		font-size: 1.4rem;
	}
	.message_contents .message h2 {
		font-size: 2rem;
	}
	.message_contents .message h2::after {
		margin-top: 12px;
		width: 30px;
	}
	.message_contents .column + .column {
		margin-top: 2em;
	}
	.message_contents .message .ph {
		margin-top: 2em;
		text-align: center;
	}
	.message_contents .message .ph.sp_s img {
		width: 70%;
	}
}