/* =========================================
   星が丘公民館の一コマ
   ========================================= */


/* -----------------------------------------
   一覧全体
   ----------------------------------------- */

.hosh-moment-list {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* -----------------------------------------
   年度ごとのまとまり
   ----------------------------------------- */

.hosh-moment-year {
    margin: 0 0 64px;
}


/* 年度見出し */

.hosh-moment-year-heading {
    margin: 0 0 28px !important;
    padding: 0 0 13px 16px !important;

    border-left: 6px solid #1760ad !important;
    border-bottom: 1px solid #d8e2ee !important;

    background: transparent !important;

    color: #073b78 !important;

    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;

    box-sizing: border-box;
}


/* -----------------------------------------
   動画一覧
   ----------------------------------------- */

.hosh-moment-items {
    display: flex;
    flex-direction: column;
    gap: 34px;
}


/* -----------------------------------------
   一コマカード
   ----------------------------------------- */

.hosh-moment-item {
    width: 100%;
    margin: 0;
    padding: 34px;

    background: #ffffff;

    border: 1px solid #dce5ef;
    border-radius: 14px;

    box-shadow:
        0 6px 20px
        rgba(24, 58, 91, 0.08);

    box-sizing: border-box;
}


/* -----------------------------------------
   動画表示
   ----------------------------------------- */

.hosh-moment-video {
    width: 100%;
    margin: 0 auto 26px;
}


/* 通常の横動画 */

.hosh-moment-video.is-landscape {
    max-width: 820px;
}


/* 縦動画 */

.hosh-moment-video.is-portrait {
    max-width: 360px;
}


/* YouTube埋め込み */

.hosh-moment-video iframe {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0 auto;

    border: 0;
    border-radius: 10px;

    overflow: hidden;
}


/* 横動画 */

.hosh-moment-video.is-landscape iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}


/* 縦動画 */

.hosh-moment-video.is-portrait iframe {
    aspect-ratio: 9 / 16;
    height: auto;
}


/* -----------------------------------------
   動画下の文章
   ----------------------------------------- */

.hosh-moment-content {
    width: 100%;
    max-width: 820px;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
}


/* タイトル */

.hosh-moment-title {
    margin: 0 0 10px !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #073b78 !important;

    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;

    text-align: left !important;
}


/* 日付 */

.hosh-moment-date {
    margin: 0 0 18px !important;

    color: #6b7280 !important;

    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.6;
}


/* 説明 */

.hosh-moment-description {
    margin: 0;
    padding-top: 17px;

    border-top: 1px solid #e4e9ef;

    color: #333;

    font-size: 16px;
    line-height: 1.9;
}


/* -----------------------------------------
   データがない場合
   ----------------------------------------- */

.hosh-moment-empty {
    margin: 30px 0;
    padding: 22px 24px;

    background: #f7f9fc;

    border: 1px solid #dce5ef;
    border-radius: 10px;

    color: #555;

    font-size: 16px;
    line-height: 1.8;

    text-align: center;
}


/* =========================================
   確認用プレビュー
   ========================================= */

.hosh-moment-preview-main {
    width: 100%;
    box-sizing: border-box;
}

.hosh-moment-preview-content {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
}


/* =========================================
   タブレット・スマートフォン
   ========================================= */

@media (max-width: 768px) {

    .hosh-moment-list {
        max-width: 100%;
    }


    .hosh-moment-year {
        margin-bottom: 48px;
    }


    .hosh-moment-year-heading {
        margin-bottom: 20px !important;
        padding: 0 0 10px 12px !important;

        border-left-width: 5px !important;

        font-size: 22px !important;
    }


    .hosh-moment-items {
        gap: 24px;
    }


    .hosh-moment-item {
        padding: 22px 18px;

        border-radius: 11px;
    }


    .hosh-moment-video {
        margin-bottom: 22px;
    }


    .hosh-moment-video.is-landscape {
        max-width: 100%;
    }


    .hosh-moment-video.is-portrait {
        max-width: 300px;
    }


    .hosh-moment-video iframe {
        border-radius: 8px;
    }


    .hosh-moment-content {
        max-width: 100%;
    }


    .hosh-moment-title {
        margin-bottom: 8px !important;

        font-size: 18px !important;
        line-height: 1.6 !important;
    }


    .hosh-moment-date {
        margin-bottom: 14px !important;

        font-size: 13px !important;
    }


    .hosh-moment-description {
        padding-top: 14px;

        font-size: 15px;
        line-height: 1.8;
    }


    .hosh-moment-preview-content {
        max-width: 100%;
    }
}


/* =========================================
   小さいスマートフォン
   ========================================= */

@media (max-width: 600px) {

    .hosh-moment-video.is-portrait {
        max-width: 300px;
    }
}