@charset "UTF-8";

/* 変数の定義 */
body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ----- ヘッダー ----- */
header {
	background-image: linear-gradient(to right, #009631, #002500);
	height: 18vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

header img {
	max-width: 40vw;
	max-height: 5vh;
	height: auto;
}

/* ----- 本文共通 ----- */
main {
	margin: 2vh 5vw 0 5vw;
}

h1 {
	margin: 3vh 5vw 4vh 5vw;
	text-align: left;
}

.title-text {
	font-family: "Zen Kaku Gothic New", sans-serif;
	color: #000000;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0.15vw;
	border-bottom: 1px solid #000000;
	padding-bottom: 0.2rem;
}

.title-text::before {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 2rem;
	background-color: #00843d;
	margin-right: 1rem;
	margin-bottom: -0.22rem;
}

.campus-container {
	margin: 0 5vw 5vh 8.5vw;
}

.campus-card img {
	max-width: 36vw;
	height: auto;
}

.campus-card {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.3s, opacity 0.3s;
	display: inline-block;
	margin-right: 3px;
}

.campus-card:hover {
	opacity: 0.8;
	transform: scale(1.01);
}

/* ----- フッター ----- */
footer {
	background-color: #000000;
	height: 13vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
}

.copyright-text {
	font-family: "Poppins", sans-serif;
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 1px;
}

/* ここまでの記述はPC表示を想定 */

/* -----レスポンシブ（デスクトップファースト）----- */

/* 論理解像度が大きめのスマホ 横画面 */
@media screen and (orientation: landscape) and (max-width: 1024px) {
	header { height: 20vh; }
	header img { max-width: 45vw; }
	.title-text { font-size: 1.5rem; }
	.title-text::before { width: 0.35rem; height: 1.5rem; }
	.copyright-text { font-size: 0.6rem; }
}

/* タブレット 縦画面 */
@media screen and (orientation: portrait) and (max-width: 1024px) {
	header { height: 14vh; }
	header img{ max-width: 60vw; }
	h1 { margin-top: 2vh; }
	.campus-card { display: block; }
	.campus-card img { max-width: 72vw; }
	.copyright-text { font-size: 0.7rem; }
}

/* 論理解像度が小さめのスマホ 横画面 */
@media screen and (orientation: landscape) and (max-width: 768px) {
	h1 { margin-top: 5vh; margin-bottom: 2vh; }
	.title-text { font-size: 1.2rem; }
	.title-text::before { width: 0.30rem; height: 1.2rem; }
	footer { height: 12vh; }
	.copyright-text { font-size: 0.5rem; }
}

/* スマホ 縦画面 */
@media screen and (orientation: portrait) and (max-width: 640px) {
	header { height: 13vh; }
	header img { max-width: 70vw; }
	h1 { margin-top: 5vh; margin-bottom: 3.2vh; }
	.title-text { font-size: 1.3rem; }
	.title-text::before { width: 0.32rem; height: 1.3rem; }
	.campus-card { display: block; }
	.campus-card img { max-width: 72vw; }
	footer { height: 17vh; }
	.copyright-text { font-size: 0.5rem; }
}