body{
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #F0EAE1;
    text-align: start;
    background: linear-gradient(135deg, #26201b 0%, #332920 60%, #26201b 100%);
    font-family:
      "Roboto",
      "Noto Sans JP",
      system-ui,
      -apple-system,
      "Segoe UI",
      Arial,
      sans-serif;
}

/*------ カラーパレット ------*/

/*
右ペイン背景： linear-gradient(135deg, #26201b 0%, #332920 60%, #26201b 100%) (決定)
左ペイン背景： #1a0f08 (決定)

テキスト（メイン／ヘッダー／バーガー三本線）： #F0EAE1
補足テキスト(補助メニュー／トップ[演者名・属性]／プログラム[タイムゾーン・座長・演者属性]／ポスター[作者])： #AFAAA3

ヘッダー文字影：text-shadow: 0 0 12px rgba(26, 15, 8, 0.85), 0 0 25px rgba(26, 15, 8, 0.6);

背景強調（カード／セクション区切り／プリフェイス）： rgba(245, 235, 215, 0.05)
リンク文字／ボタン： #EAD09E
リンク文字／ボタン　ホバー： #FFF8ED

罫線： rgba(245, 235, 215, 0.15)

スマホメニュー背景： rgba(26, 15, 8, 0.98) 
スマホメニューレイヤーの影：box-shadow: 3px 0 15px rgba(245, 235, 215, 0.1);

ランチ　カフェ　塗（背景）： rgba(162, 203, 162, 0.12)
ランチ　カフェ　縁（ボーダー）： #9BC79B
ランチ　カフェ　時間（タイムスタンプ）： #E5F4E5
ランチ　カフェ　文字（ラベル内テキスト）： #F0FAF0

イントロダクション／アブストラクトのブックイメージの罫線：#333333;
イントロダクション／アブストラクトのブックイメージの影：rgba(255, 255, 255, 0.5);

ページトップへジャンプボタン：リンク（#EAD09E）とホバー（#FFF8ED）をスワップ
ページトップへジャンプボタンの影：box-shadow: 3px 0 15px rgba(245, 235, 215, 0.1);
*/

/*------ Webサイトの構成 ------*/
/*
｜header-sp(スマホ・タブレットのみ)｜
------------------------------
｜        container         ｜ 
------------------------------
｜ aside　 ｜  header(PCのみ) ｜
｜ aside　 ｜  main　        ｜
｜ aside　 ｜    ｜_section  ｜
｜ aside　 ｜    ｜_section  ｜
｜(↑PCのみ)｜　 footer　     ｜
*/

/* ----レイヤ構成----*/
/*
z-index:1200 → back-to-top
z-index:1100 → navbar
z-index:1000 → menu
z-index: 999 → header-sp
z-index:   0 → 本文
*/

/*------ PC ------*/
@media (min-width: 1025px) {

    .container {
        display: grid;
        width: 100%;
        grid-template-areas:
            "aside header"
            "aside main"
            "aside footer";
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr 3fr;
        
        min-height: 100vh;/* 縦方向画面いっぱい */
    }

    /* areaとタグの紐づけ */
    header {
        grid-area: header;
    }

    aside {
        grid-area: aside;
    }

    main {
        grid-area: main;
    }

    footer {
        grid-area: footer;
    }

    /* PCではスマホ専用ヘッダーは非表示 */
    .header-sp {
        width: 100%;
        padding: 0;
        display: none;
    }

    aside {
        background-color: #1a0f08;
        padding: 0.3125rem 3.75rem;
    }
    /* PC用ヘッダー */
    header {
        background-image: url('../img/header-back.png'); /* 透過PNG画像 */
        
        /* ここがポイントです */
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;

        padding: 3.75rem 3.75rem 3.75rem 1.875rem;
        border-bottom: 1px solid rgba(245, 235, 215, 0.15);
    }
    main {
        padding: 1.5rem;
    }
    section {
        margin-bottom: 2rem;
    }
    footer {
        padding: 1.5rem;
    }
}

/*------ スマホ・タブレット------*/
@media (max-width: 1024px) {

    .container {
        display: block;
        width: 100%;
        padding: 0rem;
        min-height: 100vh;/* 縦方向画面いっぱい */
    }

    /* スマホ専用ヘッダーを表示 */
    .header-sp {
        top: 0;
        z-index: 999;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(245, 235, 215, 0.15);
        background-image: url('../img/header-back.png');
        background-repeat: no-repeat;
        background-position: center top; 
        background-size:cover;
    }
    /*  左メニュー 非表示*/
    aside {
        display: none !important;
    }
    /*  PC用ヘッダー 非表示*/
    header {
        display: none !important;
    }
    main {
        padding: 0.5rem;
        display: block;
    }
    footer {
        padding: 0.5rem;
    }
    section {
        margin-bottom: 1rem;
    }
}

/*------ PC スマホ　共通------*/

/* スマホ用のヘッダーの画像／PC用のサイドバーの最上部の画像 */
.header-img {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
}
.header-img img{
    border-radius: 4px;
    max-width: 100%;
    height: auto;
}

/* すべての要素にボックスサイズを適用 */
* {
    box-sizing: border-box;
}