@charset "UTF-8";

@font-face {
    font-family:Apex_Mk3-Medium ;
    src: url(font/Apex_Mk3-Medium.otf) format("opentype")
}
.loader{
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #181818;
    z-index: 555;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    img{
        width: 50%;
    }
}

body{
    text-align: center;
    justify-content: center;
    margin: 0 auto;
}

html{
    font-family: "Roboto","Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    width: 100%;
    background-image: url('img/background_img.webp');
    background-repeat: repeat;
    background-size: no-repeat 0 0 cover;
    background-position: center;
    color: #FFFFFF;
}

a{
    text-decoration: none;
    color:#FFFFFF
}

a:hover{
    color: aqua;
    text-decoration: underline;
}

h1{
    text-decoration: none;
    font-family:"Apex_Mk3-Medium","Noto Sans JP",sans-serif;
    font-weight: 800;
    font-size: 4rem;
}

h2{
    text-decoration: none;
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 800;
    font-size: 3rem;
}
    

h3{
    font-size: 2.5rem;
}

p{
    font-size: 1.75rem;
}

span{
    display: inline-block;
}

.parent{
    margin: 0 auto;
    width: 100%;
}

.top2024{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.schedule-text{
    padding-top: 5%;
    text-align: right;
    text-decoration: underline;
}

.news{
    img{
        width: 75%;
    }
}

.list {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 5%;
}

.mainvisual{
    width: 75% ;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
}

.mainvisual-info{
    text-align: left;
    justify-content: center;
    align-items: center;
    padding-top: 5%;
}

.Miku2024pic{
    width: 80%;
    margin: 0 auto;
    border: solid rgba(95, 95, 95, 0.8);
    border-radius: 1%;
}

.Nemuro{
    width: 30%;
    border: solid rgba(95, 95, 95, 0.8);
    border-radius: 1%;
}

.What-is-our-project{
    margin: 0 auto;
    width: 80%;
    white-space: pre-line;
    padding-top: 5%;
}

.message{
    font-size: 2.25rem;
    font-weight: bold;
}

.Youtube{
    border: solid rgba(196, 48, 43,0.8);
    padding-bottom: 5%;
    background-color: rgba(235, 65, 65, 0.4);
    margin:0 auto;
}

.Twitter{
    border: solid rgba(59, 159, 206, 0.6);
    padding-bottom: 5%;
    background-color: rgba(46, 157, 231, 0.4);
    margin:0 auto;
}

.Facebook{
    border: solid rgba(66, 103, 78, 0.6);
    padding-bottom: 5%;
    background-color: rgba(89, 130, 212, 0.4);
    margin:0 auto;
    text-align: center;
}

.Facebook-wrapper {
    max-width: 500px; /* Facebook Page Plugin の最大幅 */
    text-align: center !important;
    margin: 0 auto !important;
    right: 0;
    left: 0;
}
 
.Facebook-wrapper > .fb-page {
    width: 75%;
}
 
.Facebook-wrapper > .fb-page > span,
.Facebook-wrapper iframe {
    width: 100% !important;
}

.twitter-timeline {
    width: 75% ;
    margin-left: auto;
    margin-right: auto;
}


.fb-share-button{
    background-color: #FFFFFF;
    border-radius: 3.9px;
    padding-bottom: 3.9px;
    padding-left: 3.9px;
    padding-right: 3.9px;
    position:relative;
    top: -10px;
}
.Line-share-button{
    background-color: #00B900;
    padding: 3.9px;
    border-radius: 3.9px;
}

.SNS-Buttons{
    padding: 39px;
    font-size: 1.5rem;
}

.credit{
    background-color: #ffffff7a;
    margin: 0 auto;
    padding-bottom: 0.1%;
    width: 100%;
    p{
        font-size: 1.5rem;
    }
}

    @media (orientation: landscape) {
        html{
            font-family: "Roboto","Noto Sans JP", sans-serif;
            font-weight: 400;
            font-style: normal;
            width: 100%;
            background-image: url('img/background_img.webp');
            background-repeat: repeat;
            background-size: no-repeat 0 0 cover;
            background-position: center;
            color: #FFFFFF;
        }

        a{
            text-decoration: none;
            color:#FFFFFF
        }
    
        h1{
            font-size: 10rem;
        }
        
        h2{
            font-size: 4rem;
        }

        h3{
            font-size: 3.5rem;
        }
        
        p{
            font-size: 2rem;
        }
        
        .parent{
            margin: 0 auto;
            width: 95%;
        }

        .top2024{
            width: 45%;
        }

        .news{
            img{
                width: 45%;
            }
        }
    
        .schedule-text{
            padding-top: 0%;
            text-align: right;
            text-decoration: underline;
        }
    
        .list{
            width: 50%;
        }
    
        .mainvisual-info{
            display: flex;
        }

        .sentence{
            padding-left: 10%;
        }

        .Miku2024pic{
            width: 50%;
        }

        .message{
            font-size: 5rem;
            font-weight: bold;
        }
            
        .sns{
            display: flex;
        }
    
        .Youtube{
            border-radius: 1%;
            width: 30%;
        }

        .Twitter{
            border-radius: 1%;
            width: 30%;
        }

        .Facebook{
            border-radius: 1%;
            width: 30%;
        }
        
        .fb-share-button{
            background-color: #FFFFFF;
            border-radius: 3.9px;
            padding-bottom: 3.9px;
            padding-left: 3.9px;
            padding-right: 3.9px;
            position: relative;
            top: -10px;
        }
    
        .credit{
            p{
                font-size: 1.75rem;
            }
        }
    }