@charset "utf-8";
/* ===================================================================
CSS
 file name  :  message.css
=================================================================== */
@media screen and (min-width: 769px) {
	h1.page_title{
		background-image: url("../images/message/bg_title_message.png");
	}
}

@media screen and (min-width: 769px) {
	.message{
		margin-top: 100px;
		background-image: url("../images/message/bg_message.png"), url("../images/message/bg_message.png");
		background-repeat: no-repeat, no-repeat;
		background-size: 35% auto, 35% auto;
		background-position: right 10px top, left 10px bottom;
	}
	.message_wrap,
	.message_wrap2{
		display: flex;
	}
	.message_wrap2{
		margin: 50px auto auto;
	}
	.message_wrap3{
		margin: 0px auto auto;
	}
	.message_wrap .photo_wrap,	
	.message_wrap2 .photo_wrap,
	.message_wrap .text_wrap,
	.message_wrap2 .text_wrap{
		width: 50%;
	}
	.message_wrap2 .photo_wrap{
		margin-top: 1em;
	}
	.message_wrap2 .text_wrap{
		padding-right: 60px;
	}
}
.message_wrap .text_wrap p.lead{
	margin-top: 50px;
	background: #F0F6FF;
	color: #202466;
	font-weight: 500;
	font-size: 2.4rem;
	padding: 1.5em 0 1.5em 80px;
}
.message_wrap .text_wrap p.lead span{
	font-size: 3.2rem;
}
.message_wrap .text_wrap .text_inner{
	margin-top: 50px;
	padding: 0 40px 0 80px;
	max-width: 620px;
}
.message_wrap2{
	flex-direction: row-reverse;
}
.message_wrap2 p{
	margin-bottom: 2em
}
.sign{
	text-align: right;
	font-weight: 700;
	margin-top: 1em
}
@media screen and (max-width: 768px) {
	.message{
		margin-top: 50px;
	}
	.message_wrap3{
		margin: 0px auto auto;
	}
	.message_wrap .text_wrap p.lead{
		margin: 30px auto auto;
		background: none;
		font-size: 1.6rem;
		padding: 0 20px;
	}
	.message_wrap .text_wrap p.lead strong{
		font-size: 1.8rem;
	}
	.message_wrap .text_wrap .text_inner{
		margin: 30px auto auto;
		padding: 0 20px;
		max-width: 100%;
	}
	.message_wrap2 .photo_wrap{
		max-width: 480px;
		margin: auto auto 50px auto;
	}
}