@charset "UTF-8";

/* ====================================
	共通スタイル
==================================== */
.main-visual-title {
	margin-top: 3rem;
}

.message-title {
	font-size: 2.4rem;
	line-height: 1.5;
}

.message-text {
	font-size: 1.5rem;
}

.message-signature-title {
	font-size: 1.4rem;
}

.message-signature-name {
	font-size: 1.8rem;
}

.message-signature-name-en {
	font-size: 1rem;
	letter-spacing: 0.2em;
}

/* ====================================
	ホバー、マウスポインタが有効なデバイス
==================================== */
@media (hover:hover) and (pointer: fine) {}

/* ====================================
	480px以上専用スタイル
==================================== */
@media screen and (width >=480px) {}

/* ====================================
	768px未満専用スタイル
==================================== */
@media screen and (width <768px) {}

/* ====================================
	768px以上専用スタイル
==================================== */
@media screen and (width >=768px) {}

/* ====================================
	768px以上1080px未満専用スタイル
==================================== */
@media screen and (768px <=width < 1080px) {}

/* ====================================
	1080px未満専用スタイル
==================================== */
@media screen and (width <1080px) {

	.message-title {
		margin-top: 1rem;
	}

	.message-img {
		inline-size: 80%;
		margin-top: 3rem;
	}

	.message-text {
		margin-top: 5rem;
	}
}

/* ====================================
	1080px以上専用スタイル
==================================== */
@media print,
screen and (1080px <=width) {
	.message {
		display: grid;
		grid-template-areas:
			"messageImg messageTitle"
			"messageImg messageText";
		gap: 6rem 10rem;
		margin-top: 7rem;
	}

	.message-title {
		grid-area: messageTitle;
		font-size: 3.2rem;
		line-height: 1.7;
	}

	.message-img {
		grid-area: messageImg;
	}

	.message-text {
		grid-area: messageText;
	}

	.message-signature-name {
		font-size: 2.8rem;
	}

	.message-signature-name-en {
		font-size: 1.3rem;
	}
}

/* ====================================
	1280px以上専用スタイル
==================================== */
@media screen and (width >=1280px) {}