@charset "UTF-8";


/* ==================================================
   基本設定
================================================== */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;

	color: #333333;
	background-color: #FFFDF5;

	font-family:
		YuGothic,
		"Yu Gothic",
		"Hiragino Sans",
		Meiryo,
		sans-serif;

	font-size: 16px;
	line-height: 1.8;
}


/* ==================================================
   ヘッダー
================================================== */

#header {
	position: relative;
	overflow: hidden;

	padding: 55px 20px 45px;

	text-align: center;

	background: linear-gradient(
		135deg,
		#FFD84D 0%,
		#FFB347 35%,
		#FF7BAC 70%,
		#5BC0EB 100%
	);

	border-bottom: 8px solid #243B80;
}


/* 背景装飾 */

#header::before {
	content: "";

	position: absolute;

	width: 180px;
	height: 180px;

	top: -70px;
	left: -50px;

	background-color: rgba(255, 255, 255, 0.30);

	border-radius: 50%;
}

#header::after {
	content: "";

	position: absolute;

	width: 130px;
	height: 130px;

	right: -30px;
	bottom: -50px;

	background-color: rgba(255, 255, 255, 0.25);

	border-radius: 50%;
}


/* ==================================================
   ロゴ
================================================== */

#header .logo {
	position: relative;
	z-index: 2;

	width: 90px;

	margin: 0 auto 12px;
	padding: 10px;

	background-color: #ffffff;

	border-radius: 50%;

	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

#header .logo img {
	display: block;

	width: 100%;
	height: auto;
}

/* ==================================================
   メインイラスト＋タイトル 横並び
================================================== */

.header-main {
	position: relative;
	z-index: 2;

	display: flex;

	align-items: center;
	justify-content: center;

	gap: 55px;

	width: 100%;
	max-width: 650px;

	margin: 30px auto 0;
}


/* ==================================================
   メインイラスト
================================================== */

.irasuto {
	flex: 1;

	width: 100%;
	max-width: 500px;

	margin: 0;
	padding: 0;
}


.irasuto img {
	display: block;

	width: 100%;
	height: auto;

	margin: 0 auto;

	object-fit: contain;

	border-radius: 22px;

	box-shadow:
		0 10px 25px
		rgba(0, 0, 0, 0.15);
}


/* ==================================================
   右側タイトル
================================================== */

.header-title-area {
	flex: 0 0 350px;

	text-align: center;
}


.header-title-area h1 {
	margin: 0;

	color: #243B80;

	font-size: 52px;

	font-weight: 900;

	line-height: 1.25;

	letter-spacing: 0.08em;

	text-shadow:
		3px 3px 0 #ffffff;
}


.header-title-area .catchcopy {
	margin-top: 20px;
}


/* ==================================================
   ヘッダー文字
================================================== */

.festival-year {
	position: relative;
	z-index: 2;

	margin: 0;

	color: #243B80;

	font-size: 13px;
	font-weight: bold;

	letter-spacing: 0.2em;
}


#header h1 {
	position: relative;
	z-index: 2;

	margin: 4px 0;

	color: #243B80;

	font-size: 46px;
	font-weight: 900;

	letter-spacing: 0.08em;

	text-shadow: 3px 3px 0 #ffffff;
}


.catchcopy {
	position: relative;
	z-index: 2;

	display: inline-block;

	margin: 15px 0 0;
	padding: 5px 18px;

	background-color: #ffffff;

	color: #243B80;

	font-weight: bold;

	border-radius: 50px;

	box-shadow: 0 4px 0 rgba(36, 59, 128, 0.15);
}


/* ==================================================
   ナビゲーション
================================================== */

#nav {
	position: sticky;

	top: 0;

	z-index: 1000;

	background-color: rgba(255, 255, 255, 0.96);

	border-bottom: 3px solid #FFD84D;

	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}


#nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	max-width: 1100px;

	margin: 0 auto;
	padding: 0;
}


#nav li {
	margin: 0;
	padding: 0;

	list-style: none;
}


#nav a {
	display: block;

	padding: 17px 20px;

	color: #243B80;

	font-size: 14px;
	font-weight: bold;

	text-decoration: none;

	transition:
		background-color 0.25s ease,
		color 0.25s ease;
}


#nav li:nth-child(1) a:hover {
	background-color: #FFD84D;
	color: #243B80;
}

#nav li:nth-child(2) a:hover {
	background-color: #FF9F43;
	color: #ffffff;
}

#nav li:nth-child(3) a:hover {
	background-color: #FF6B9A;
	color: #ffffff;
}

#nav li:nth-child(4) a:hover {
	background-color: #5BC0EB;
	color: #243B80;
}

#nav li:nth-child(5) a:hover {
	background-color: #72D5A3;
	color: #243B80;
}

#nav li:nth-child(6) a:hover {
	background-color: #C59BFF;
	color: #243B80;
}


/* ==================================================
   メイン
================================================== */

#main {
	width: 100%;
	max-width: 1200px;

	margin: 0 auto;

	padding: 0 30px 90px;
}


/* ==================================================
   メインビジュアル
================================================== */

.hero {
	position: relative;

	margin-top: 35px;

	overflow: hidden;

	border: 6px solid #ffffff;
	border-radius: 30px;

	background-color: #243B80;

	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}


/* ==================================================
   スライドショー
================================================== */

.hero-slideshow {
	position: relative;

	width: 100%;
	height: 520px;

	overflow: hidden;
}


/* すべてのスライド */

.hero-slideshow .slide {
	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;
	object-position: center;

	opacity: 0;

	animation-name: heroSlide;
	animation-duration: 12s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}


/* 1枚目 */

.hero-slideshow .slide1 {
	animation-delay: 0s;
}


/* 2枚目 */

.hero-slideshow .slide2 {
	animation-delay: 4s;
}


/* 3枚目 */

.hero-slideshow .slide3 {
	animation-delay: 8s;
}


/* ==================================================
   スライドアニメーション
================================================== */

@keyframes heroSlide {

	0% {
		opacity: 0;
		transform: scale(1.04);
	}

	5% {
		opacity: 1;
	}

	28% {
		opacity: 1;
	}

	33% {
		opacity: 0;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}

}


/* ==================================================
   メイン画像の暗いフィルター
================================================== */

.hero::after {
	content: "";

	position: absolute;

	inset: 0;

	z-index: 1;

	pointer-events: none;

	background: linear-gradient(
		90deg,
		rgba(36, 59, 128, 0.70),
		rgba(36, 59, 128, 0.05)
	);
}


/* ==================================================
   メイン画像上の文字
================================================== */

.hero-text {
	position: absolute;

	z-index: 2;

	left: 55px;
	bottom: 55px;

	color: #ffffff;

	text-align: left;

	pointer-events: none;
}


.hero-small {
	display: inline-block;

	margin: 0 0 5px;
	padding: 4px 12px;

	background-color: #FFD84D;

	color: #243B80;

	font-size: 12px;
	font-weight: bold;

	letter-spacing: 0.15em;

	border-radius: 30px;
}


.hero-text h2 {
	margin: 8px 0 0;
	padding: 0;

	color: #ffffff;

	font-size: 68px;
	font-weight: 900;

	line-height: 1.05;

	text-align: left;

	text-shadow: 3px 3px 0 #243B80;
}


/* ==================================================
   セクション共通
================================================== */

#main section {
	padding-top: 90px;
	padding-bottom: 40px;
}


.section-label {
	width: fit-content;

	margin: 0 auto 8px;
	padding: 5px 18px;

	color: #243B80;
	background-color: #FFD84D;

	font-size: 12px;
	font-weight: 900;

	letter-spacing: 0.2em;

	border-radius: 30px;
}


.section-title {
	margin: 5px 0 0;
	padding: 0;

	color: #243B80;

	text-align: center;

	font-size: 34px;
	font-weight: 900;
}


.section-title::after {
	content: "";

	display: block;

	width: 55px;
	height: 6px;

	margin: 13px auto 0;

	background: linear-gradient(
		90deg,
		#FF6B9A,
		#FFD84D,
		#5BC0EB
	);

	border-radius: 20px;
}


.lead {
	max-width: 700px;

	margin: 30px auto;

	text-align: center;
}


/* ==================================================
   開催情報
================================================== */

.information-box {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 18px;

	max-width: 850px;

	margin: 45px auto 0;
}


.information-box > div {
	padding: 28px 18px;

	text-align: center;

	background-color: #ffffff;

	border-radius: 20px;

	border-bottom: 6px solid #FFD84D;

	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);

	transition: transform 0.3s ease;
}


.information-box > div:nth-child(2) {
	border-bottom-color: #FF6B9A;
}

.information-box > div:nth-child(3) {
	border-bottom-color: #5BC0EB;
}


.information-box > div:hover {
	transform: translateY(-7px);
}


.info-title {
	color: #243B80;

	font-size: 12px;
	font-weight: 900;

	letter-spacing: 0.2em;
}


.information-box p {
	margin: 8px 0 0;

	font-weight: bold;
}


/* ==================================================
   メニュー
================================================== */

.menu {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 35px;

	margin-top: 45px;
}


.item {
	overflow: hidden;

	background-color: #ffffff;

	border-radius: 24px;

	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.09);

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}


.item:nth-child(1) {
	border-bottom: 7px solid #FFD84D;
}

.item:nth-child(2) {
	border-bottom: 7px solid #FF6B9A;
}

.item:nth-child(3) {
	border-bottom: 7px solid #5BC0EB;
}

.item:nth-child(4) {
	border-bottom: 7px solid #FF9F43;
}


.item:hover {
	transform: translateY(-8px);

	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.13);
}


.item a {
	display: block;

	color: #222222;

	text-decoration: none;
}


.item img {
	display: block;

	width: 100%;
	height: 280px;

	object-fit: cover;

	transition: transform 0.4s ease;
}


.item:hover img {
	transform: scale(1.06);
}


.item-text {
	padding: 24px 26px 28px;

	text-align: left;
}


.item-text span {
	display: inline-flex;

	width: 35px;
	height: 35px;

	align-items: center;
	justify-content: center;

	background-color: #243B80;

	color: #ffffff;

	border-radius: 50%;

	font-size: 12px;
	font-weight: bold;
}


.item-text h3 {
	margin: 10px 0 0;

	color: #243B80;

	font-size: 24px;

	letter-spacing: 0.08em;
}


.item-text p {
	margin: 2px 0 0;

	font-weight: bold;
}


/* ==================================================
   PICK UP
================================================== */

.pickup {
	margin-top: 70px;

	padding: 70px 50px !important;

	background: linear-gradient(
		135deg,
		#FFF1A8,
		#FFD1E0,
		#CFEFFF
	);

	border-radius: 35px;
}


.pickup-box {
	display: grid;

	grid-template-columns:
		minmax(0, 1.3fr)
		minmax(0, 1fr);

	align-items: center;

	gap: 45px;

	margin-top: 40px;
}


.pickup-image img {
	display: block;

	width: 100%;
	height: auto;

	border-radius: 25px;

	box-shadow: 8px 8px 0 #ffffff;
}


.pickup-text {
	text-align: left;
}


.pickup-tag {
	display: inline-block;

	padding: 4px 13px;

	background-color: #FF6B9A;

	color: #ffffff;

	font-size: 12px;
	font-weight: bold;

	letter-spacing: 0.15em;

	border-radius: 30px;
}


.pickup-text h3 {
	margin-top: 15px;

	color: #243B80;

	font-size: 28px;

	line-height: 1.4;
}


.button {
	display: inline-block;

	margin-top: 20px;
	padding: 13px 28px;

	background-color: #243B80;

	color: #ffffff;

	text-decoration: none;

	font-weight: bold;

	border-radius: 50px;

	box-shadow: 0 5px 0 #FFD84D;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.button:hover {
	transform: translateY(-3px);

	box-shadow: 0 8px 0 #FFD84D;
}


/* ==================================================
   NEWS
================================================== */

.news-list {
	max-width: 800px;

	margin: 40px auto 0;
	padding: 10px 30px;

	background-color: #ffffff;

	border-radius: 20px;

	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.06);
}


.news-list article {
	display: flex;

	gap: 35px;

	padding: 22px 5px;

	border-bottom: 1px dashed #cccccc;

	text-align: left;
}


.news-list article:last-child {
	border-bottom: none;
}


.news-list time {
	flex-shrink: 0;

	color: #FF6B9A;

	font-size: 14px;
	font-weight: bold;
}


.news-list p {
	margin: 0;
}


/* ==================================================
   フッター
================================================== */

#footer {
	padding: 60px 20px;

	text-align: center;

	background-color: #243B80;

	color: #ffffff;

	border-top: 10px solid #FFD84D;
}


.footer-title {
	margin: 0 0 5px;

	font-size: 26px;
	font-weight: 900;
}


#footer > p {
	margin-bottom: 5px;
}


.copyright {
	margin-top: 30px !important;

	font-size: 12px;

	opacity: 0.7;
}


/* ==================================================
   タブレット・スマートフォン
================================================== */

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

	#header {
		padding: 40px 15px 35px;
	}


	#header h1 {
		font-size: 34px;
	}


	.festival-year {
		font-size: 10px;

		letter-spacing: 0.12em;
	}


	.catchcopy {
		font-size: 13px;
	}


	/* 横スクロール式ナビ */

	#nav {
		overflow-x: auto;

		-webkit-overflow-scrolling: touch;
	}


	#nav ul {
		width: max-content;
		max-width: none;

		flex-wrap: nowrap;
		justify-content: flex-start;
	}


	#nav a {
		padding: 13px 15px;

		font-size: 12px;

		white-space: nowrap;
	}


	#main {
		padding: 0 18px 60px;
	}


	.hero {
		margin-top: 20px;

		border-width: 4px;
		border-radius: 20px;
	}


	/*
	   修正ポイント
	   .hero img ではなく
	   スライドショー全体の高さを変更する
	*/

	.hero-slideshow {
		height: 430px;
	}


	.hero-text {
		left: 25px;
		right: 20px;
		bottom: 30px;
	}


	.hero-text h2 {
		font-size: 45px;
	}


	#main section {
		padding-top: 65px;
	}


	.section-title {
		font-size: 27px;
	}


	.information-box {
		grid-template-columns: 1fr;
	}


	.menu {
		grid-template-columns: 1fr;

		gap: 25px;
	}


	.item img {
		height: 230px;
	}


	.pickup {
		margin-top: 40px;

		padding: 55px 25px !important;

		border-radius: 25px;
	}


	.pickup-box {
		grid-template-columns: 1fr;

		gap: 30px;
	}


	.pickup-text h3 {
		font-size: 24px;
	}


	.news-list {
		padding: 10px 20px;
	}


	.news-list article {
		display: block;
	}


	.news-list time {
		display: block;

		margin-bottom: 5px;
	}

}


/* ==================================================
   小さいスマートフォン
================================================== */

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

	#header h1 {
		font-size: 30px;
	}


	/*
	   ここも .hero img ではなく
	   .hero-slideshow を変更
	*/

	.hero-slideshow {
		height: 360px;
	}


	.hero-text h2 {
		font-size: 38px;
	}


	.hero-small {
		font-size: 10px;
	}


	.section-title {
		font-size: 24px;
	}


	.item img {
		height: 200px;
	}

}


/* ==================================================
   アニメーションを減らす設定の利用者への対応
================================================== */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}


	.hero-slideshow .slide {
		animation: none;
		opacity: 0;
		transform: none;
	}


	.hero-slideshow .slide1 {
		opacity: 1;
	}


	.item,
	.item img,
	.button {
		transition: none;
	}

}

/* ==================================================
   生徒会長の言葉
================================================== */

.president-message {
	padding-top: 90px;
	padding-bottom: 50px;
}


/* メッセージカード */

.president-card {
	position: relative;

	max-width: 900px;

	margin: 45px auto 0;

	padding:
		55px 65px;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#FFF1A8 0%,
			#FFD1E0 48%,
			#CFEFFF 100%
		);

	border-radius: 35px;

	box-shadow:
		0 12px 30px
		rgba(0, 0, 0, 0.10);

	border:
		6px solid #ffffff;
}


/* 内側の白いメッセージ部分 */

.president-text {
	position: relative;

	z-index: 2;

	padding:
		45px 50px;

	background-color:
		rgba(255, 255, 255, 0.92);

	border-radius: 25px;

	text-align: left;

	box-shadow:
		0 6px 18px
		rgba(0, 0, 0, 0.07);
}


.president-text p {
	margin:
		0 0 20px;

	line-height:
		2;

}


/* 松西祭テーマ */

.president-text strong {
	color:
		#FF5F8F;

	font-size:
		18px;

	line-height:
		1.8;
}


/* 大きな引用符 */

.message-mark {
	position: absolute;

	top: -40px;
	left: 20px;

	margin: 0 !important;

	color:
		#FFD84D;

	font-family:
		Georgia,
		serif;

	font-size:
		110px;

	font-weight:
		bold;

	line-height:
		1;

	opacity:
		0.85;
}


/* ==================================================
   生徒会長署名
================================================== */

.president-signature {
	margin-top:
		35px;

	padding-top:
		25px;

	text-align:
		right;

	border-top:
		2px dashed
		#dddddd;
}


.president-signature p {
	margin:
		0;
}


.signature-role {
	color:
		#FF6B9A;

	font-size:
		10px;

	font-weight:
		900;

	letter-spacing:
		0.18em;
}


.signature-name {
	margin-top:
		5px !important;

	color:
		#243B80;

	font-size:
		20px;

	font-weight:
		900;
}


/* ==================================================
   周囲の飾り
================================================== */

.president-decoration {
	position: absolute;

	z-index: 1;

	font-weight:
		bold;
}


.decoration-one {
	top: 25px;
	right: 45px;

	color:
		#FF6B9A;

	font-size:
		38px;

	transform:
		rotate(15deg);
}


.decoration-two {
	left: 25px;
	bottom: 30px;

	color:
		#5BC0EB;

	font-size:
		32px;
}


.decoration-three {
	right: 30px;
	bottom: 25px;

	color:
		#FF9F43;

	font-size:
		35px;

	transform:
		rotate(-15deg);
}


/* ==================================================
   タブレット・スマートフォン
================================================== */

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

	.president-message {
		padding-top:
			65px;
	}


	.president-card {
		margin-top:
			35px;

		padding:
			35px 25px;

		border-radius:
			25px;
	}


	.president-text {
		padding:
			40px 28px;

		border-radius:
			20px;
	}


	.president-text p {
		line-height:
			1.9;
	}


	.president-text strong {
		font-size:
			16px;
	}


	.message-mark {
		top:
			-32px;

		font-size:
			90px;
	}


	.signature-name {
		font-size:
			18px;
	}

}


/* ==================================================
   小さいスマートフォン
================================================== */

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

	.president-card {
		padding:
			25px 15px;

		border-width:
			4px;
	}


	.president-text {
		padding:
			35px 20px;
	}


	.president-text p {
		font-size:
			14px;

		line-height:
			1.9;
	}


	.president-text strong {
		font-size:
			15px;
	}


	.signature-name {
		font-size:
			16px;
	}


	.decoration-one {
		font-size:
			28px;
	}


	.decoration-two,
	.decoration-three {
		font-size:
			25px;
	}

}

/* ==================================================
   校長先生からのメッセージ
================================================== */

.principal-message {
	padding-top: 90px;
	padding-bottom: 30px;
}


/* ==================================================
   校長先生メッセージカード
================================================== */

.principal-card {
	position: relative;

	max-width: 900px;

	margin: 45px auto 0;

	padding: 55px 65px;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#FFF1A8 0%,
			#FFD1E0 48%,
			#CFEFFF 100%
		);

	border: 6px solid #ffffff;

	border-radius: 35px;

	box-shadow:
		0 12px 30px
		rgba(0, 0, 0, 0.10);
}


/* ==================================================
   白い本文エリア
================================================== */

.principal-text {
	position: relative;

	z-index: 2;

	padding: 50px;

	background-color:
		rgba(255, 255, 255, 0.94);

	border-radius: 25px;

	text-align: left;

	box-shadow:
		0 6px 18px
		rgba(0, 0, 0, 0.07);
}


.principal-text > p {
	margin: 0 0 23px;

	line-height: 2;

	letter-spacing: 0.02em;
}


/* ==================================================
   校長先生メッセージのタイトル
================================================== */

.principal-message-title {
	margin:
		0 0 35px;

	padding:
		0 0 22px;

	border-bottom:
		2px dashed #dddddd;
}


.principal-message-sub {
	margin:
		0 0 5px !important;

	color:
		#5BC0EB;

	font-size:
		11px;

	font-weight:
		900;

	letter-spacing:
		0.2em;
}


.principal-message-title h3 {
	margin: 0;

	color:
		#243B80;

	font-size:
		28px;

	font-weight:
		900;

	line-height:
		1.5;
}


/* ==================================================
   文化祭テーマ
================================================== */

.principal-text strong {
	color:
		#FF5F8F;

	font-size:
		18px;

	line-height:
		1.8;

	background:
		linear-gradient(
			transparent 65%,
			#FFF1A8 65%
		);
}


/* ==================================================
   引用符
================================================== */

.principal-message-mark {
	position: absolute;

	top: -42px;
	left: 20px;

	margin: 0 !important;

	color:
		#FFD84D;

	font-family:
		Georgia,
		serif;

	font-size:
		110px;

	font-weight:
		bold;

	line-height:
		1;

	opacity:
		0.75;
}


/* ==================================================
   校長先生署名
================================================== */

.principal-signature {
	margin-top: 40px;

	padding-top: 25px;

	text-align: right;

	border-top:
		2px dashed #dddddd;
}


.principal-signature p {
	margin: 0;
}


.principal-signature-role {
	color:
		#5BC0EB;

	font-size:
		10px;

	font-weight:
		900;

	letter-spacing:
		0.2em;
}


.principal-signature-name {
	margin-top:
		6px !important;

	color:
		#243B80;

	font-size:
		21px;

	font-weight:
		900;

	letter-spacing:
		0.05em;
}


/* ==================================================
   周囲の装飾
================================================== */

.principal-decoration {
	position: absolute;

	z-index: 1;

	font-weight: bold;
}


.principal-decoration-one {
	top: 25px;
	right: 45px;

	color:
		#5BC0EB;

	font-size:
		38px;

	transform:
		rotate(15deg);
}


.principal-decoration-two {
	left: 25px;
	bottom: 30px;

	color:
		#FF6B9A;

	font-size:
		32px;
}


.principal-decoration-three {
	right: 30px;
	bottom: 25px;

	color:
		#FF9F43;

	font-size:
		35px;

	transform:
		rotate(-15deg);
}


/* ==================================================
   タブレット・スマートフォン
================================================== */

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

	.principal-message {
		padding-top:
			65px;
	}


	.principal-card {
		margin-top:
			35px;

		padding:
			35px 25px;

		border-radius:
			25px;
	}


	.principal-text {
		padding:
			42px 28px;

		border-radius:
			20px;
	}


	.principal-message-title h3 {
		font-size:
			23px;
	}


	.principal-text > p {
		line-height:
			1.9;
	}


	.principal-text strong {
		font-size:
			16px;
	}


	.principal-message-mark {
		top:
			-32px;

		font-size:
			90px;
	}


	.principal-signature-name {
		font-size:
			18px;
	}
	
	.header-main {
	flex-direction: column;

	gap: 25px;

	margin-top: 25px;
}


.irasuto {
	width: 90%;
	max-width: 560px;
}


.header-title-area {
	flex: none;

	width: 100%;
}


.header-title-area h1 {
	font-size: 36px;
}


.header-title-area .catchcopy {
	margin-top: 12px;
}

}


/* ==================================================
   小さいスマートフォン
================================================== */

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

	.principal-card {
		padding:
			25px 15px;

		border-width:
			4px;
	}


	.principal-text {
		padding:
			38px 20px 30px;
	}


	.principal-message-title {
		margin-bottom:
			28px;
	}


	.principal-message-title h3 {
		font-size:
			20px;
	}


	.principal-text > p {
		font-size:
			14px;

		line-height:
			1.9;
	}


	.principal-text strong {
		font-size:
			15px;
	}


	.principal-signature-name {
		font-size:
			16px;
	}


	.principal-decoration-one {
		font-size:
			28px;
	}


	.principal-decoration-two,
	.principal-decoration-three {
		font-size:
			25px;
	}
	
	.header-title-area h1 {
	font-size: 30px;
}


.irasuto {
	width: 100%;
}

}