@charset "UTF-8";

/* =========================
   OUTLINE HEADER
========================= */

header {
	position: relative;
	width: 100%;
	height: 46vw;
	min-height: 560px;
	background: url("../img/top/main03.jpg") no-repeat center center / cover;
	overflow: visible;
}

/*header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.22);
	z-index: 0;
}*/

header h1 {
	position: fixed !important; /* absolute から fixed に変更 */
	top: 22px;
	left: 24px;
	z-index: 99999;
	margin: 0;
	width: 30vw;
	/*height: 34px;*/
	background: url("../img/common/logow.svg") no-repeat left top / contain;
	overflow: hidden;
}

header h1 a {
	display: block;
	width: 100%;
	height: 100%;
}

header h1 span {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}

@media only screen and (max-width: 769px) {
	header h1 {
		top: 0;
		left: 0;
		/*border: 1px solid #F00;*/
		/*margin-top: 2vw !important;*/
		width: 40vw !important; /*40vw*/
		height: 8vw !important; /*8vw*/
		/*margin-top: -8%;*/
		/*margin-left: 2vw;*/
		margin-top: 0 !important;
		margin-left: 0 !important;
	}
}


header h2 {
	position: absolute;
	/*top: 118px;
	left: 162px;*/
	top: 10.5vw;
    left: 10.5vw;	
	z-index: 3;
	margin: 0;
	width: 360px;
	height: 110px;
	background: url("../img/common/h2_outline_page.svg") no-repeat left top / contain;
}

header h2 span {
	display: block;
	height: 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}

/* 建学の綱領カード */
header p {
	position: absolute;
	left: 50%;
	bottom: -150px;
	transform: translateX(-50%);
	z-index: 5;
	margin: 0;
	width: 560px;
}

header p img {
	/*border: 1px solid #F00;*/
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
	box-shadow: 6px 6px 0 rgba(120, 145, 185, 0.45);
}

/* =========================
   OUTLINE MAIN
========================= */

main {
	background: #dfe7f5;
}

main .wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 200px 40px 90px;
	box-sizing: border-box;
}

.outline-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 110px;
	align-items: start;
}

/* 各カラム */
.outline-col {
	min-width: 0;
}

.outline-h3 {
	margin: 0 0 38px 0;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}

.outline-h3 span {
	display: block;
	height: 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}

/* h3 SVG */
.outline-h3--rinen {
	width: 380px;   /* 285 → 380 */
	height: 142px;
	background-image: url("../img/outline/h2_outline_in01_page.svg");
}

.outline-h3--mokuhyo {
	width: 460px;   /* 330 → 460 */
	height: 190px;
	background-image: url("../img/outline/h2_outline_in02_page.svg");
}

/* 本文 */
.outline-col .jpn,
.outline-col .eng {
	margin: 0;
}

.outline-col .jpn {
	max-width: 440px;
	line-height: 1.8;
}

.outline-col .eng {
	max-width: 440px;
	margin-top: 26px;
	line-height: 1.8;
}

/* 左列画像 */
.outline-photo {
	margin: 38px 0 0 0;
	width: 390px;
}

.outline-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* 右列リンク */
.outline-links {
	margin-top: 38px;
	display: grid;
	grid-template-columns: 1fr 1fr; /* 横2列 */
	gap: 12px;
	width: 100%;
}

.outline-links .link {
	margin: 0;
	width: 100% !important; /* 既存の固定幅220pxを解除 */
}

/* 3番目の「第三者評価」を下の段で全幅にする */
.outline-links .link:nth-child(3) {
	grid-column: 1 / span 2;
}

/* =========================
   TABLET
========================= */
@media only screen and (max-width: 1200px) {
	header {
		height: 56vw;
		min-height: 500px;
	}

	header h2 {
		left: 52px;
		width: 320px;
		height: 98px;
	}

	header p {
		width: 500px;
		bottom: -130px;
	}

	main .wrap {
		max-width: 980px;
		padding: 200px 32px 80px;
	}

	.outline-content {
		column-gap: 70px;
	}

	.outline-col .jpn,
	.outline-col .eng {
		max-width: 100%;
	}
	.outline-h3--rinen,
	.outline-h3--mokuhyo {
		width: 100%;
		max-width: 440px;
	}

	.outline-photo {
		width: 260px;
	}

	.outline-links .link {
		width: 210px;
	}}

/* =========================
   SMARTPHONE
========================= */
@media only screen and (max-width: 769px) {
	header {
		height: 60vw;       /* auto から変更：背景画像が見える高さを確保 */
		min-height: 300px;  /* 0 から変更：文字が収まる最低限の高さ */
		padding-bottom: 0;
		background-position: center top;
	}

	header h1 {
		top: 14px;
		left: 14px;
		width: 96px;
		height: 18px;
	}

	header h2 {
		top: 68px;
		left: 26px;
		width: 180px;
		height: 56px;
	}

	header p {
		position: absolute;
		left: 50%;
		bottom: -45vw !important;
		transform: translateX(-50%);
		width: 80vw;
	}

	header p img {
		box-shadow: 4px 4px 0 rgba(120, 145, 185, 0.35);
	}

	main .wrap {
		padding: 55vw 24px 60px; /* 130px から 160px 程度に増やして、カードとの重なりを解消 */
	}

	.outline-content {
		display: block;
	}

	.outline-col + .outline-col {
		margin-top: 56px;
	}

	.outline-h3--rinen,
	.outline-h3--mokuhyo {
		width: 100%;
		max-width: none;
		background-size: contain;
	}

	.outline-h3--rinen {
		margin-right: auto;
		margin-left: auto;
		width: 70%;
		/*height: 24vw;*/   /* 20vw → 24vw */
		background-image: url("../img/outline/h2_outline_in01_page_sp.svg");
		/*margin-bottom: -1em;*/
		margin-bottom: 0em;
	}

	.outline-h3--mokuhyo {
		margin-right: auto;
		margin-left: auto;
		width: 80%;
		/*height: 30vw;*/   /* 25vw → 30vw */
		background-image: url("../img/outline/h2_outline_in02_page_sp.svg");
		/*margin-bottom: -1.7em;*/
		margin-bottom: 0em;
	}

	.outline-photo {
		margin-right: auto;
		margin-left: auto;
		width: 90vw;    /* 58vw → 72vw */
	}

	.outline-links {
        display: block; /* 縦並びを維持 */
        margin-top: 38px;
    }
    .outline-links .link {
        margin-right: auto;
        margin-left: auto;
        width: 64vw;
        max-width: 280px;
        margin-bottom: 18px; /* 縦並び時の隙間 */
    }
}

.eng strong {
	font-size: 110%;
	font-weight: normal;
}
.eng :not(strong) {
	font-size: 80%;
}


/* 英語テキストの先頭に区切り線を追加 */
.eng::before {
    content: "―――";
    display: block;      /* 線を独立した行にする */
    margin-bottom: 0.5em; /* 下の英文との間に少し隙間を作る */
    /*color: #999;*/         /* 線の色を少し薄くして馴染ませる（任意） */
    letter-spacing: 0.2em; /* 線の間隔を少し広げて綺麗に見せる（任意） */
}