@charset "UTF-8";

#header {
	height: 390px;
	border-top: 2px solid #80442B;
	width: 100%;
	background-image: url(../graduate/img/top02.webp);
	background-position: center top;
}

.main_title {
	line-height: 35px;
	letter-spacing: 2px;
	text-align: right;
	float: right;
	font-size: 3.5em;
	margin: 190px 0 -180px 0;
	color: #FFFFFF;
	text-shadow: 0px 0px 7px #000;
}

.main_title span {
	font-size: 0.5em;
}

#gNav_sub {
	margin-bottom: 20px;
}

/* 1. 見出しのベース設定（下線を追加） */
.title,
.title02,
.title03,
.title04,
.title05,
.title06,
.title07,
.title08 {
	position: relative;
	/* アイコン配置の基準 */
	width: 100%;
	/* 幅調整 */
	min-height: 54px;
	/* アイコンの高さ分を確保 */
	margin-bottom: 20px;
	/* 次の要素との余白 */
	padding-left: 70px;
	/* 左にアイコンスペース(54px) + 余白(16px) */
	padding-bottom: 10px;
	/* ★追加：文字と下線の間の隙間 */
	border-bottom: 1px dotted #CCCCCC;
	/* ★追加：ドットの下線 */

	font-weight: bold;
	font-size: 20px;
	box-sizing: border-box;

	/* テキストを上下中央に配置 */
	display: flex;
	align-items: center;
	background-image: none;
	/* 元の画像を削除 */
}

/* 2. 茶色の四角形 ＋ "CASE" の文字 */
.title::before,
.title02::before,
.title03::before,
.title04::before,
.title05::before,
.title06::before,
.title07::before,
.title08::before {
	content: "CASE";
	position: absolute;
	top: 0;
	left: 0;
	width: 54px;
	/* 四角形の幅 */
	height: 54px;
	/* 四角形の高さ */
	background-color: #80442B;
	/* ヘッダーと同じ茶色 */
	border-radius: 4px;
	/* 角を少し丸く */
	color: #fff;
	font-size: 10px;
	text-align: center;
	padding-top: 7px;
	box-sizing: border-box;
	line-height: 1;
	font-family: Arial, sans-serif;
}

/* 3. 数字の表示 */
.title::after,
.title02::after,
.title03::after,
.title04::after,
.title05::after,
.title06::after,
.title07::after,
.title08::after {
	position: absolute;
	top: 21px;
	/* CASEの下に配置 */
	left: 0;
	width: 54px;
	text-align: center;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
	font-family: Arial, sans-serif;
}

/* 4. 各クラスごとの数字を指定 */
.title::after {
	content: "01";
}

.title02::after {
	content: "02";
}

.title03::after {
	content: "03";
}

.title04::after {
	content: "04";
}

.title05::after {
	content: "05";
}

.title06::after {
	content: "06";
}

.title07::after {
	content: "07";
}

.title08::after {
	content: "08";
}

.box01 {
	width: 100%;
	float: left;
	margin-bottom: 20px;
}

.leftText {
	float: left;
	width: 480px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #CCCCCC;
	margin-bottom: 30px;
	font-size: 14px;
	line-height: 28px;
	letter-spacing: 2px;
}

.rightPhoto {
	width: 270px;
	float: right;
}

h4 {
	font-weight: bold;
}

@media (max-width: 767px) {
	#header {
		height: 70vw;
	}

	.title,
	.title02,
	.title03,
	.title04,
	.title05,
	.title06,
	.title07,
	.title08 {
		font-size: 4.25vw;
	}

	.box01 {
		float: none;
		margin-bottom: 40px;
	}

	.leftText {
		float: none;
		width: 100%;
		height: auto;
		margin-bottom: 20px;
		box-sizing: border-box;
	}

	.rightPhoto {
		float: none;
		width: 100%;
		text-align: center;
		margin: 0 auto;
	}

	.rightPhoto img {
		max-width: 100%;
		height: auto;
	}
}