/*
 * seminar.css
 * セミナー報告ページ用スタイル
 */

/* --- 基本的な余白や画像の設定 --- */

/* 本文エリアのテキスト */
.detail__txt {
    line-height: 1.8; /* 行間を少し広げて読みやすくする */
    margin-bottom: 2em; /* 段落ごとの余白を確保 */
}

/* 本文エリアの画像 */
.imgArea {
    margin: 2em auto; /* 画像の上下に余白を設定 */
    max-width: 800px; /* 画像が大きくなりすぎないように最大幅を指定 */
}

.imgArea img {
    width: 100%; /* 親要素の幅に合わせて表示 */
    height: auto;
    display: block;
}


/* --- 写真を2枚横並びにするためのスタイル --- */

/* 横並びコンテナ (Flexboxを使用) */
.photo-grid {
    display: flex; /* 子要素を横並びにする */
    gap: 20px; /* 画像間の隙間を設定 */
    margin: 2em auto; /* 上下の余白を設定 */
    max-width: 800px; /* 全体の最大幅を指定 */
}

/* 横並びの各アイテム */
.photo-grid__item {
    flex: 1; /* コンテナ内で均等に幅を分ける */
    min-width: 0; /* flexアイテムの縮小に関する問題を回避 */
}

.photo-grid__item img {
    width: 100%; /* 親要素の幅に合わせて表示 */
    height: auto;
    display: block;
    border-radius: 8px; /* 画像の角を少し丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を付けて立体感を出す */
}


/* --- スマートフォン表示への対応 (レスポンシブデザイン) --- */
@media screen and (max-width: 767px) {
    /* 横幅が767px以下の場合に適用 */
    .photo-grid {
        flex-direction: column; /* 横並びを解除し、縦並びにする */
        gap: 15px; /* 縦に並んだ際の画像間の隙間 */
    }
}