@charset "utf-8";

/* 全要素の余白をリセット */
* {
    margin: 0;
    padding: 0; /* パディングのリセットも追加 */
}

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

/* 全体の基本設定 */
body {
    font-size: 1em; /* 基本フォントサイズ */
    line-height: 1.7; /* 行間を広めに設定して読みやすさを向上 */
    font-family: ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Yu Gothic', YuGothic, Arial, 'メイリオ', Meiryo, 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; /* 行間の余白を設定 */
    margin: 0 auto; /* 水平中央揃え */
}

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

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

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

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

/* 画像のサイズ指定 */
section.box figure img {
    width: 250px;
    transition: transform 0.3s ease; /* 拡大縮小のアニメーション効果 */
}


/*見出し*/

.top h2{
	font-size-adjust: auto;
	color:#00a73c;
	margin-bottom: 0;
	margin-left:0px;
 }


section.box h3{
	font-size-adjust: auto;
	color:#00a73c;
        text-align: justify;
	margin-bottom: 1px;
	margin-left:0px;
 }


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