@charset "UTF-8";

/**************************************
 * file: index.css
 * brief: トップページ専用スタイル
 *
 * トップページの写真スライダー部分と，
 * その直後に続く本文セクションの余白を調整する。
 **************************************/

/* =========================================================
   調整用変数
   PC表示・タブレット表示・スマホ表示の調整は主にここで行う
========================================================= */

.top-page {
    /* 写真スライダー周辺 */
    --index-photo-slider-margin-bottom: 0;
    --index-top-section-after-slider-margin-top: 2.4rem;
}

/* =========================================================
   Top page sections
   トップページ内セクションの余白調整
========================================================= */

.photo-slider-section {
    margin-bottom: var(--index-photo-slider-margin-bottom);
}

.photo-slider-section + .top-section {
    margin-top: var(--index-top-section-after-slider-margin-top);
}

/* =========================================================
   Conference information
   トップページの開催概要では共通の外枠・背景色を表示しない
========================================================= */

.top-page .conference-info {
    padding-left: calc(
        var(--common-icon-heading-border-left-width)
        + var(--common-icon-heading-padding-left)
    );
    border: none;
    background: transparent;
}

/* =========================================================
   Update information
   更新日と更新内容を横並びで表示する
========================================================= */

.update-info {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    margin: 0;
}

.update-info__date {
    white-space: nowrap;
}

.update-info__description {
    min-width: 0;
    margin: 0;
}

/* ==============================
   スマホ表示設定
   600px以下で上書きされる変数
============================== */

@media screen and (max-width: 600px) {
    .top-page {
        /* 写真スライダー周辺 */
        --index-photo-slider-margin-bottom: 3.6rem;
        --index-top-section-after-slider-margin-top: 2.8rem;
    }
}