@charset "UTF-8";

/* --- 1. 全体のレイアウト設定 --- */
#grasssroots-main {
    width: 100%;
    padding: 0 10px;        /* 左右に10pxの余白を追加 */
    box-sizing: border-box; /* 重要：余白を幅に含めて横スクロールを防止 */
}

section {
    /* 各セクションの下に3行程度のスペース */
    margin-bottom: 3em; 
}

section.inner {
    margin: 0.5em 0 2em 0em;
}

/* --- 2. YouTube関連（レスポンシブ対応） --- */
div.youtube-wrapper {
    max-width: 100%;
    padding-top: 10px;
    margin-bottom: 20px;
}

div.youtube {
    position: relative;
    width: 100%;            /* 親要素に合わせて伸縮 */
    max-width: 640px;       /* 最大幅を維持 */
    aspect-ratio: 16 / 9;   /* 16:9の比率を維持 */
    overflow: hidden;
    margin-bottom: 20px;
}

div.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- 3. リストの見栄え調整 --- */
.details-list dt {
    font-weight: bold !important;
    margin-top: 1em !important; 
    padding-left: 1em;
}
.details-list dd {
  width: 70%;
  box-sizing: border-box; /* パディングやボーダーを含めた幅にする */
}

/* --- 4. 写真の表示（2列並び・正方形・頭切れ防止） --- */
.topic_photos {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 均等に2列並べる */
    gap: 10px;                             /* 画像同士の隙間 */
    width: 100%;
    margin-top: 15px;                      /* 上部との間隔を微調整 */
    margin-bottom: 15px;
}

.topic_photos img {
    width: 100%;
    aspect-ratio: 4 / 5;         /* ★4:5に統一 */
    object-fit: cover;           /* ★枠いっぱいに広げて切り抜く */
    object-position: center 10%;  /* ★重要：上から10%の位置を基準にして頭切れを防止 */
    display: block;
    height: auto;
    border-radius: 4px;          /* 角丸 */
}

/* --- 5. スマホ表示（横幅600px以下） --- */
@media (max-width: 600px) {
    .topic_photos {
        grid-template-columns: 1fr; /* スマホでは1列にする */
        gap: 15px;                  /* スマホでは間隔を少し広げて見やすく */
    }
}