/*
 * 基本は TailWind CSS を利用する。
 * ただし、細かい画像やフォントの指定などは、この CSS で行います。
 * Tailwind CSS: https://tailwindcss.com/
 */

.main-content {
    font-family: "M PLUS 1", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    /* トップのタイトルから社員写真一覧まで */
    .content-top-header {
        background-image: url(../../images/20th/20th-back-sp.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        hr {
            border-color: #943800;
        }
    }

    /* PCのみ (最大幅が 767px以上)  */ 
    @media screen and (min-width: 768px) {
        .content-top-header {
            background-image: url(../../images/20th/20th-back.svg);
        }
    }

    .content-cream {
        background: #FFE6D3;

        @media screen and (min-width: 768px) {
            .signature {
                br {
                    /* PC 版の時は、社長の署名部分で改行しない */
                    display: none;
                }
            }
        }
    }

    .content-agenda {

        .panel-discussion,
        .collaborate-network {
            filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));

            .spearker1 {
                background-image: url(https://static.spearly.com/teams%2F01GTV8EGJSACKWSX4PT7A03653%2Fcontents%2F1722578145069-discussion_1.jpg);
                background-size: cover;
            }

            .spearker2 {
                background-image: url(https://static.spearly.com/teams%2F01GTV8EGJSACKWSX4PT7A03653%2Fcontents%2F1722578205548-discussion_2.jpg);
                background-size: cover;
            }

            .spearker3 {
                background-image: url(https://static.spearly.com/teams%2F01GTV8EGJSACKWSX4PT7A03653%2Fcontents%2F1722578272305-discussion_3.jpg);
                background-size: cover;
            }

            .spearker4 {
                background-image: url(https://static.spearly.com/teams%2F01GTV8EGJSACKWSX4PT7A03653%2Fcontents%2F1722578315339-discussion_4.jpg);
                background-size: cover;
            }
        }

        @media screen and (min-width: 768px) {
            .panel-discussion {
                br {
                    /* PC 版の時は、パネルディスカッションの説明部分で改行しない */
                    display: none;
                }
            }
        }
    }

    .content-detail {

        /* PCのみ (最大幅が 767px以上)  */ 
        @media screen and (min-width: 768px) {
            background-image: url(../../images/20th/20th-bottom-back.svg);
        }
    }
}