@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

html,
body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    /*overflow-y: scroll;*/
    background-image: url("/prod/wallpapers/background.png");
    background-size: 250px;
}

.mt-20{
    margin-top: 20px;
}
.mt-100{
    margin-top: 100px;
}

/* SP対応 */
@media (orientation: portrait) {
    .wallpapersSP{
        display: block;
        width: 100vw;
    }
    .wallpapersPC{
        display: none;
    }
    .top_wrap {
        position: relative;
        width: 80vw;
        top: 15px;
        left: 11vw;
    }
    .top_text {
        position: relative;
        font-size: 5vw;
        font-weight: 900;
        text-align: center;
        top: 4vw;
        margin: 0 auto;
        margin-bottom: 4vw;
    }
    .top_head_wrap {
        display: flex;
        flex-flow: column;
        width: 100vw;
        text-align: center;
    }

    .head_img {
        position: relative;
        width: 67%;
        margin: auto;
        margin-top: 10px;
    }

    .head_subimg {
        position: relative;
        width: 70%;
        margin: auto;
        margin-top: 10px;
    }

    .head_subimg2 {
        position: relative;
        width: 70%;
        margin: auto;
        margin-top: 5px;
    }

    .wallpaper{
        display: flex;
        flex-flow: column;
        align-items: center;
        text-align: center;
        position: relative;
        width: 75vw;
        left: 12.5vw;
        height: auto;
        background-color: #FFFFFF;
        border-radius: 10px;
    }

    .wallpaper_main{
        margin: 15px 0 15px 0;
        width: 70% !important;
        box-shadow: 4px 4px 8px gray;
    }

    .wallpaper img{
        width: 60%;
    }

    .wallpaper a{
        width: 100%;
        height: auto;
    }

    .footer{
        width: 100vw;
        margin: 40px 0 40px 0;
        align-items: center;
        text-align: center;
    }

    .footer img{
        width: 80%;
    }
}

/* PC対応 */
@media (orientation: landscape) {
    .wallpapersSP{
        display: none;
    }
    .wallpapersPC{
        display: block;
    }
    .wallpapersPC_wrap{
        display: flex;
        position: relative;
        justify-content: space-between;
        width: 60vw;
        left: 20vw;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .top_wrap {
        position: relative;
        width: 35vw;
        top: 15px;
        left: 33vw;
    }

    .top_text {
        position: relative;
        font-size: 7vh;
        font-weight: 900;
        text-align: center;
        top: 1vh;
        margin: 0 auto;
    }

    .top_head_wrap {
        display: flex;
        flex-flow: column;
        width: 100vw;
        text-align: center;
    }

    .head_img {
        position: relative;
        width: 30%;
        margin: auto;
        margin-top: 10px;
    }

    .head_subimg {
        position: relative;
        width: 35%;
        margin: auto;
        margin-top: 7px;
    }

    .head_subimg2 {
        position: relative;
        width: 30%;
        margin: auto;
        margin-top: 5px;
    }
    .wallpaper{
        display: flex;
        flex-flow: column;
        align-items: center;
        text-align: center;
        position: relative;
        width: 45%;
        height: auto;
        background-color: #FFFFFF;
        border-radius: 10px;
    }

    .wallpaper_main{
        margin: 15px 0 15px 0;
        width: 70% !important;
        box-shadow: 4px 4px 8px gray;
    }

    .wallpaper img{
        width: 60%;
    }

    .wallpaper a{
        width: 100%;
        height: auto;
    }

    .footer{
        width: 100vw;
        margin: 40px 0 40px 0;
        align-items: center;
        text-align: center;
    }

    .footer img{
        width: 30%;
    }
}