main {
    font-family: "Noto Sans JP", sans-serif;
    color: #333;
    line-height: 1.6;

    justify-content: center;

    /* header は position: fixed で場所を取らないため、先頭のセクションが
       潜り込まないよう main 側で確保する（従来は先頭 .paragraph の
       margin-top + padding-top が兼ねていた） */
    padding-top: 120px;
    padding-bottom: 40px;
}

/* フェードインは JS が動いているときだけ（js-visibility は js/visibility.js が付与） */
.js-visibility main {
    opacity: 0;
    transition: opacity 1s;
}

.js-visibility main.is-visible {
    opacity: 1;
}

.paragraph {
    /* 従来の200pxの余白の意図を残しつつ、画面幅に合わせて柔軟に縮むように変更 */
    max-width: 900px;
    margin: 0px auto;

    /* セクション間の余白はこの1か所だけで決まるようにする。
       縦 padding を持たせると margin と足し算になり、間延びの原因になる。 */
    margin-top: clamp(48px, 7vw, 80px);
    padding: 0 20px;

    /* 画面幅が狭いときに、画像と本文を縦並びにする */
    align-items: start; 
    gap: 40px; /* 余白をモダンに管理 */
    position: relative;
    /* overflow: hidden; は影(box-shadow)が切れる場合があるため外しています */
}

.paragraph-contents {
    display: flex;
    width: 100%;
}

/* 先頭は main の padding-top が余白を持つので、二重に空けない */
main > .paragraph:first-of-type {
    margin-top: 0;
}

/* .subsubheading を置く段落。前の節の続きだと分かるように、上の余白を詰める。 */
.paragraph--sub {
    margin-top: clamp(20px, 3vw, 32px);
}

@media (max-width: 768px) {
    main {
        padding-top: 100px;
    }

    .paragraph {
        flex-direction: column; /* スマホでは縦並びにする */
        gap: 24px;
    }

    .paragraph-contents {
        flex-direction: column;
    }

    .heading {
        padding-left: 0;
    }
}

.paragraph img {
    width: 30%;
    min-width: 200px;
    height: auto;
    display: block;
    margin-left: auto;
    align-self: flex-start;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* 今風の柔らかな影 */
}

/* YouTubeのiframeもモダンに装飾 */
/* HTML側の width="360" は固定値なので、狭い端末で横にはみ出す。CSSで打ち消す */
.paragraph iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.heading {
    font-size: 48px; /* 少しスッキリしたサイズ感に */
    font-weight: 700;
    margin-bottom: 24px;
    padding-left: 0;
    color: #222;
    letter-spacing: 0.05em;
}

/* 見出しの下にアクセントライン */
.heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    background-color: #0056b3; /* 神戸大学風の落ち着いたブルー */
    margin-top: 12px;
    border-radius: 3px;
}

.subheading { 
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #333;
    border-left: 5px solid #0056b3;
    padding-left: 16px;
    line-height: 1.3;
}

.program-label {
    margin: -8px 0 16px 21px;
    color: #0056b3;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.c3-award {
    margin-top: 28px;
    padding: 24px;
    border: 1px solid #d8e2ec;
    border-radius: 8px;
    background-color: #f5f8fb;
}

.c3-award__heading {
    margin: 0 0 12px;
    color: #0056b3;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.c3-award .description {
    margin-bottom: 16px;
}

.c3-award a:link,
.c3-award a:visited {
    color: #0347b4;
}

.c3-award .videoBlock {
    margin: 20px 0 0;
}

@media (max-width: 768px) {
    .c3-award {
        padding: 18px;
    }

    .c3-award__heading {
        font-size: 20px;
    }
}

.subsubheading {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #444;
}

.description { 
    font-size: 17px; /* 現代のWeb標準サイズに調整 */
    line-height: 1.8; /* 行間を広げて読みやすく */
    margin-bottom: 20px;
    min-width: 50%; 
    color: #4a4a4a; /* 真っ黒を避けて洗練された印象に */
    letter-spacing: 0.03em;
}