@charset "utf-8";

/* 全要素の余白をリセット */

* {
	margin: 0;
	padding: 0; /* パディングのリセットも追加 */
}

/* HTML5の要素をブロック要素として明示的に表示 */
article, section, figure, figcaption {
	display: block;
}

figcaption {
	font-size: 1em; /* 基本フォントサイズ */
	line-height: 1.7; /* 行間を広めに設定して読みやすさを向上 */
	font-family: 'Noto Sans JP', sans-serif; /* 日本語フォントを指定 */
}


/* コンテナの中央揃えと幅設定 */
.container {
	width: 960px; /* 全体の幅を固定 */
	margin: 0 auto; /* 水平中央揃え */
}

/* タイトル部分のスタイル */
.title {
	text-align: center; /* 中央揃え */
	padding: 0.5em 0; /* 上下に余白を設定 */
	font-family: 'Oswald', sans-serif; /* 見出し用フォント */
	font-size: 2em; /* フォントサイズを大きく設定 */
}

/* Flexboxによるレイアウト */
.flex {
	display: flex; /* 子要素を横並びに配置 */
	justify-content: space-between; /* 子要素間を均等に分ける */
	margin-bottom: 2em; /* 下に余白を設定 */
	flex-wrap: wrap; /* 子要素を折り返し可能に */
	row-gap: 2em; /* 行間の余白を設定 */
}

/* 各セクション（カード）のスタイル */
section.box {
	width: 45%; /* 子要素の幅を30%に設定 */
	text-align: center; /* テキストを中央揃え */
	background-color: #ffffff; /* 背景を白に設定 */
	border:1px solid #ff6600; /* ボーダーを設定 */
	padding: 1em; /* 内側の余白を追加 */
	box-sizing: border-box; /* パディングとボーダーを含めたサイズ計算 */
}

/* セクション内の見出し（写真名）のスタイル */
section.box h1 {
	margin-bottom: 1rem; /* 見出し下の余白 */
}

/* ホバー時のエフェクト設定 */
section.box figure a {
	display:block;
	transition: opacity 0.5s ease; /* スムーズなトランジション効果 */
}

section.box figure a:hover {
	opacity: 0.5; /* ホバー時の透明度を変更 */
}


section.box figure img:hover {
	transform: scale(1.1); /* ホバー時に画像を拡大 */
}

/* キャプション部分のスタイル */
section.box figcaption {
	text-align: justify; /* キャプションを両端揃え */
	margin-top: 1em; /* 上に余白を追加 */
}

figure .comment {
	text-align: center;
}

figure .name {
	text-align: center;
}

.container header {
	font-family: 'Oswald', sans-serif; /* 見出し用フォント */
	font-size: 2em; /* フォントサイズを大きく設定 */
	font-weight: bold;
}