*/*初期化*/
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    white-space: nowrap;
}

body , html
{
    background-color: rgb(38, 38, 38);
}

.main
{
    width: 100vw;
    min-height: 100vh;
    background-color: rgb(38, 38, 38);
    overflow: auto;
}

.home   
{
    width: 100vw;
    height: calc(100vh - 8vw);
    min-width: 1400px;

    margin-top: 10vh;/*メニュー分空ける*/

    /*お知らせ*/
    .notice
    {
        text-align: center;
        color: white;

        width: 100%;
        height: 50%;

        .title
        {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 10%;
        }

        /*画像エリア*/
        .cm
        {
            display: flex;
            align-items: center;
            justify-content: center;

            height: 80%;
            /*矢印*/
            p
            {
                /*表示設定*/
                display: flex;
                cursor: pointer;
                font-size: 15vw;
                color: rgb(6, 62, 88);

                /*矢印の周りに白枠をつける*/
                text-shadow: 
                -1px -1px 0 white,
                1px -1px 0 white,
                -1px 1px 0 white,
                1px 1px 0 white;
            }
            /*画像*/
            .newsCard
            {
                display: flex;

                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;

                height: 100%;
                aspect-ratio: 16 / 9;
                /*角を丸くする*/
                border-radius: 20px;

                img
                {
                    height: 100%;
                    width: 100%;
                    min-width: 100%;

                    flex-shrink: 0;


                    scroll-snap-align: start;
                    object-fit: cover;

                    flex: none;
                }
            }
        }
        /*ドット*/
        .dotArea
        {
            display: flex;
            justify-content: center;
            align-items: center;

            gap: 10px;

            height: 10%;
            width: 100%;

            dot
            {
                height: 25%;
                aspect-ratio: 1 / 1;

                background: gray;
                border-radius: 50%;

                
            }

            .active
            {
                background: white;
            }
        }
    }

    /*コメントとシェア*/
    .others
    {
        display: flex;
        justify-content: center;
        height: 50%;
        /*コメント*/
        .comment
        {
            width: 40%;
            display: flex;
            justify-content: left;
            align-items: center;
            align-items: center;

            #icon
            {
                width: 10vh;
                height: 10vh;
                border-radius: 100%;
            }

            /*コメント*/
            .mes
            {
                display: flex;
                justify-content: center;
                align-items: center;

                width: 20%;
                height: 20%;

                margin-bottom: 10%;
                background-image: url(Materials/SpeechBabble.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;

                p
                {
                    color: black;
                }
            }
        }

        /*シェア*/
        .share
        {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 50%;
            height: 100%;
            /*説明文*/
            explain
            {
                display: flex;

                bottom: calc(20px + 15%);
                
                color:white;
                font-size: clamp(15px,3vw,40px);
            }
            /*シェアエリア*/
            .shareBox
            {
                /*表示設定*/
                display: flex;
                background-color: rgb(127, 127, 127);
                /*位置調整*/
                position: fixed;
                bottom: 20px;
                right: 20px;
                
                align-items: center;

                width: 35%;
                height: 12%;
                min-width: 500px;

                border-radius: 5px;

                /*シェア文字*/
                p
                {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    height: 100%;
                    width: 30%;
                    font-size: clamp(15px,2vw,30px);
                }

                .shareLinks
                {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    gap: 5%;

                    height: 100%;
                    width: 70%;

                    a
                    {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        width: calc(100% / 3);
                        height: 100%;

                        img
                        {
                            height: 50%;
                            aspect-ratio: 33 / 17;
                        }
                    }
                }
            }
        }
    }
}

/*スマホ版*/
@media (max-width:768px)
{
    .home
    {
        margin-top: 7.5vh;
        min-width: 0;

        height: calc(100vh - 7.5vh);
        /*お知らせ*/
        .notice
        {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 40%;
            /*タイトル*/
            .title
            {
                font-size: 20px;
            }

            /*お知らせボックス*/
            .cm
            {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 50%;
                /*矢印*/
                p
                {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 12%;
                    height: 50%;
                    transform: scaleY(2);
                    font-size: 70px;
                }
                /*画像*/
                .newsCard
                {
                    display: flex;
                    align-items: center;
                    
                    height: 100%;
                    aspect-ratio: 16 / 9;
                    
                    img
                    {
                        width: 100%;
                        height: 100%;
                        min-width: 100%;

                        flex-shrink: 0;

                        scroll-snap-align: start;
                        object-fit: cover;
                    }
                }
            }
        }

        /*コメントとシェア*/
        .others
        {
            flex-direction: column;
            position: relative;
            
            height: 60%;
            /*コメント*/
            .comment
            {
                display: flex;
                height: 50%;
                width: 100%;
                /*アイコン*/
                #icon
                {
                    left: 10%;
                    top: 10%;
                    position: absolute;
                    width: 20vw;
                    border-radius: 100%;
                }
                /*コメント*/
                .mes
                {
                    position: absolute;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    /*位置調整*/
                    left: 32%;
                    top: 0%;
                    /*大きさ調整*/
                    width: 40vw;
                    height: 20vw;
                    color: black;
                    background-position: center;
                    background-size: 100%;

                    p
                    {
                        font-size: 4.5vw;
                    }
                }
            }

            /*シェア*/
            .share
            {
                display: flex;
                align-items: start;
                justify-content: start;

                width: 100%;
                height: 50%;
                bottom: 2vw;
                text-align: center;
                /*説明文*/
                explain
                {
                    display: flex;
                    justify-content: center;
                    align-items: top;
                    white-space: normal;

                    height: 50%;
                    width: 100%;

                    font-size: 5vw;
                }
                /*シェアエリア*/
                .shareBox
                {
                    /*表示設定*/
                    display: flex;
                    flex-direction: column;
                    /*位置調整*/
                    left: 10%;
                    width: 80%;
                    min-width: 0;

                    height: 23vw;

                    /*シェア文字*/
                    p
                    {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        height: 30%;
                        width: 100%;

                        font-size: clamp(15px,50vw,25px);
                    }
                    /*リンク*/
                    .shareLinks
                    {
                        height: 70%;
                        width: 100%;

                        a img
                        {
                            height: 60%;
                        }
                    }
                }
            }
        }
    }
}