@font-face {
    font-family: 'PixelMplus10-Bold';
    src: url('/static/main/fonts/PixelMplus10-Bold.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'PixelMplus10-Regular';
    src: url('/static/main/fonts/PixelMplus10-Regular.ttf') format('truetype');
    font-weight: 400;
}
:root{
    --font-size-large:calc((60 / 1440) * 100vw);
    --font-size-normal:calc((24 / 1440) * 100vw);
    --font-size-small:calc((16 / 1440) * 100vw);
    --font-size-large_sp:calc((60 / 375) * 100vw);
    --font-size-normal_sp:calc((24 / 375) * 100vw);
    --font-size-middle_sp:calc((20 / 375) * 100vw);
    --font-size-small_sp:calc((16 / 375) * 100vw);
    --font-weight-normal:700;
    --font-weight-lighter:600;
    --font-weight-light:500;


    --z-index-fronter:15;
    --z-index-front:10;
    --z-index-back:5
}
/* 自動補完時に色が変わらないようにする */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #916849 inset !important;
    box-shadow: 0 0 0px 1000px #916849 inset !important;
    -webkit-text-fill-color: #fff !important;
}
.sp{
    display: none;
}
main{
    background-image: url('/static/main/img/sky.png');
    background-size:100vw 100vh;
    width: 100vw;
    height: 100vh;
    position: fixed;
}
.top-view{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100vw;
    height: 100vh;
}
#directing-arrow{
    width: calc((98.798 / 1440) * 100vw);
}
#island{
    width: calc((481 / 1440) * 100vw);
    cursor: pointer;
}
.image > img{
    width: 100%;
}
.form-view{
    display: none;
    flex-direction: column;
    align-items: center;
    /* gapはデザインと異なる */
    gap: calc((25 / 1024) * 100vh);
    background-image: url('/static/main/svg/makimono.svg');
    background-size: calc((1346 / 1440) * 100vw) calc((915 / 1024) * 100vh);
    background-repeat: no-repeat;
    position: relative;
    /* topはデザインと異なる */
    top: calc((45 / 1024) * 100vh);
    left: 50%;
    transform: translate(-50%, 0);
    width: calc((1346 / 1440) * 100vw);
    height: calc((915 / 1024) * 100vh);
}
.outline-letter{
    color: #000;
    font-family: "Hiragino Sans";   
    line-height: 1;
}
.form-view-header{
    display: flex;
}
.form-view-title{
    color: #F90;
    text-shadow: 0px calc((2 / 1024) * 100vh) 0px #000;
    -webkit-text-stroke-width: calc((4 / 1440) * 100vw);
    -webkit-text-stroke-color: #000;
    font-family: "Hiragino Sans";
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-normal);
}
.form-view-body{
    display: flex;
    flex-direction: row;
    gap: calc((80 / 1440) * 100vw);
    width: calc((1085 / 1440) * 100vw);
}
.form-view-body-section{
    display: flex;
    flex-direction: column;
    gap: calc((24 / 1024) * 100vh);
    flex: 1;
}
.form-view-body-section-title{
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-normal);
}
.form-view-body-section-body{
    display: flex;
    flex-direction: column;
    gap: calc((24 / 1024) * 100vh);
}
.form-view-body-section-body-content{
    display: flex;
    flex-direction: column;
    gap: calc((8 / 1024) * 100vh);
}
.form-view-body-section-body-content-title, .form-view-body-section-body-sns-title{
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
}
.form-view-body-section-body-content-body{
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
    line-height: 180%;
}
.form-view-body-section-game-screen{
    background-image: url('/static/main/img/game-screen.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: calc((502.5 / 1440) * 100vw);
    height: calc((280 / 1024) * 100vh);
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: calc((10 / 1024) * 100vh);
    padding-right: calc((20 / 1440) * 100vw);
    padding-bottom: calc((20 / 1024) * 100vh);
    position: relative;
}
.form-view-body-section-game-screen-select{
    display: flex;
    flex-direction: column;
    align-items: end;
}
.form-view-body-section-game-screen-select-content{
    display: flex;
    flex-direction: column;
    align-items: end;
    background: rgba(0, 0, 0, 0.80);
    border-left: #ffffff solid calc((2 / 1440) * 100vw);
    border-right: #ffffff solid calc((2 / 1440) * 100vw);
    width: calc((93 / 1440) * 100vw);
    box-sizing: border-box;
    padding-right: calc((20 / 1440) * 100vw);
}
.game-screen-text{
    color: #fff;
    font-family: PixelMplus10-Bold;
    font-size: calc((14 / 1440) * 100vw);
    line-height: 200%;
    letter-spacing: calc((1.12 / 1440) * 100vw);
}
.game-screen-button{
    display: flex;
    border: none;
    background: rgba(0, 0, 0, 0.80);
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    text-decoration: none;
}
/* .form-view-body-section-body-sns-body{
    width: calc((323 / 1440) * 100vw);
    height: calc((315 / 1024) * 100vh);
    overflow: scroll;
} */
.form-view-body-section-game-screen-speech{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-view-body-section-game-screen-speech-content{
    background: rgba(0, 0, 0, 0.80);
    display: flex;
    width: calc((463 / 1440) * 100vw);
    justify-content: center;
    border-left: #ffffff solid calc((2 / 1440) * 100vw);
    border-right: #ffffff solid calc((2 / 1440) * 100vw);
}
.game-screen-border, .game-screen-speech-border{
    display: flex;
    flex-direction: row;
}
.game-screen-border-top{
    border-top: #ffffff solid calc((2 / 1440) * 100vw);
}
.game-screen-border-bottom{
    border-bottom: #ffffff solid calc((2 / 1440) * 100vw);
}
.game-screen-border-body{
    width: calc((57 / 1440) * 100vw);
    background: rgba(0, 0, 0, 0.80);
}
.game-screen-speech-border-body{
    width: calc((427 / 1440) * 100vw);
    background: rgba(0, 0, 0, 0.80);
}
.game-screen-border > img, .game-screen-speech-border > img{
    width: calc((18 / 1440) * 100vw);
    height: calc((18 / 1440) * 100vw);
}
.top-right{
    transform: rotate(90deg);
}
.bottom-left{
    transform: rotate(-90deg);
}
.bottom-right{
    transform: rotate(180deg);
}
.form{
    display: flex;
    flex-direction: column;
    gap: calc((8 / 1024) * 100vh);
}
.form-group{
    width: 100%;
}
.form-label{
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    line-height: 1;
}
.form-field{
    border-radius: calc((12 / 1024) * 100vh) calc((12 / 1440) * 100vw);
    background: #916849;
    width: 100%;
    padding: calc((16 / 1024) * 100vh) calc((16 / 1440) * 100vw);
    border: inherit;
    color: #fff;
}
.form-field-input{
    width: calc(100% - (32 / 1440) * 100vw);
}
.form-field-select{
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;    
    background: #916849 url('/static/main/svg/arrow.svg') no-repeat right 10px center / 16px auto;   
}
.form-field-select::-ms-expand {
    display: none;
}
.form-required::after{
    content: '*';
    color: #F00;
    font-family: "Hiragino Sans";
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    margin-left: calc((4 / 1440) * 100vw);
}
.form-group-agree{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.form-group-agree > span{
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
}
.form-agree{
    border: 1px solid #000;
}
.form-button-wrapper{
    margin-top: calc((8 / 1024) * 100vh);
    cursor: pointer;
}
.form-button{
    width: calc((202 / 1440) * 100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 20px 0px #00A3FF;
    background-color: #000;
    color: #fff;
    padding: calc((16 / 1024) * 100vh) calc((16 / 1440) * 100vw);
    font-family: "Hiragino Sans";
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    border-radius: calc((12 / 1440) * 100vw);
    margin: auto;
}
.spirit-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.spirit-icon > img {
    width: calc((783 / 1440) * 100vw);
}
.icon-invisible{
    display: none;
}

@media screen and (max-width: 480px) {
    .tv-view-title{
        font-size: calc((16 / 375) * 100vw);
    }
    .pc{
        display: none;
    }
    .sp{
        display: flex;
    }
    #directing-arrow{
        width: calc((98.798 / 375) * 100vw);
    }
    #island{
        width: calc((205 / 375) * 100vw);
    }
    .outline-letter_sp{
        color: #fff;
    }
    .form-view{
        background-image: url('/static/main/svg/makimono_sp.svg');
        background-size: calc((387 / 375) * 100vw) calc((613 / 667) * 100dvh);
        gap: calc((41 / 667) * 100dvh);
        width: 100vw;
        height: calc((613 / 667) * 100dvh);
        top: calc((21 / 667) * 100dvh);
        z-index: var(--z-index-front);
    }
    .form-view-header{
        flex-direction: row;
    }
    .form-view-title{
        font-size: var(--font-size-normal_sp);
        text-shadow: 0px calc((2 / 667) * 100dvh) 0px #000;
        -webkit-text-stroke-width: 4;
    }
    #compass{
        width: calc((40 / 375) * 100vw);
    }
    .form-view-body{
        width: calc((327 / 375) * 100vw);
        height: calc((403 / 667) * 100dvh); 
        overflow-y: scroll;
    }
    .box-border{
        box-shadow: 0px 0px 20px 0px #00A3FF;
        border-radius: calc((20 / 667) * 100dvh) calc((20 / 375) * 100vw);
        background-color: #000;
        /* height: calc((480 / 667) * 100dvh); */
        /* box-sizing: border-box; */
    }
    .form-view-body-section-body{
        padding: calc((24 / 667) * 100dvh) calc((24 / 375) * 100vw);
        /* width: calc((279 / 375) * 100vw); */
        gap: calc((8 / 667) * 100dvh);
        border-radius: calc((20 / 667) * 100dvh) calc((20 / 375) * 100vw);
    }
    .form-view-body-section-body-content-title{
        font-size: var(--font-size-small_sp);
        line-height: normal;
    }
    .form-view-body-section-body-content-body{
        font-size: var(--font-size-small_sp);
    }
    .outline-letter_sp-larger{
        font-size: var(--font-size-middle_sp);
    }
    /* .form-view-body-section-body-sns-title{
        font-size: var(--font-size-small_sp);
        line-height: normal;
    } */
    /* .form-view-body-section-body-sns-body{
        width: 100%; */
        /* TODO:適切なサイズ聞く必要あり */
        /* height: calc((100 / 667) * 100vh); */
    /* } */
    .form-view-body-section-game-screen{
        width: calc((279 / 375) * 100vw);
        height: calc((184 / 667) * 100vh);
    }
    .form-view-body-section-game-screen-select-content{
        width: calc((66 / 375) * 100vw);
        padding-right: calc((14 / 375) * 100vw);
    }
    .game-screen-speech-border-body{
        width: calc((241 / 375) * 100vw);
    }
    .form-view-body-section-game-screen-speech-content{
        width: calc((259 / 375) * 100vw);
    }
    .game-screen-text{
        font-size: calc((12 / 375) * 100vw);
        letter-spacing: calc((0.96 / 375) * 100vw);
    }
    .game-screen-border-top{
        border-top: #ffffff solid calc((1 / 375) * 100vw);
    }
    .game-screen-border-bottom{
        border-bottom: #ffffff solid calc((1 / 375) * 100vw);
    }
    .game-screen-border-body{
        width: calc((48 / 375) * 100vw);
    }
    .game-screen-border > img, .game-screen-speech-border > img{
        width: calc((9 / 375) * 100vw);
        height: calc((9 / 375) * 100vw);
    }
    .form{
        gap: calc((8 / 667) * 100dvh);
        height: calc((403 / 667) * 100dvh);
        overflow-y: scroll;
    }
    .form-label{
        font-size: var(--font-size-small_sp);   
    }
    .form-field{
        border-radius: calc((12 / 667) * 100dvh) calc((12 / 375) * 100vw);
        padding: calc((16 / 667) * 100dvh) calc((16 / 375) * 100vw);
        font-size: var(--font-size-small_sp);
    }
    .form-field-input{
        width: calc(100% - (32 / 375) * 100vw);
    }
    .form-required::after{
        font-size: var(--font-size-small_sp);
    }
    .form-group-agree > span{
        font-size: var(--font-size-small_sp);
    }
    .form-button-wrapper{
        position: fixed;
        bottom: calc((84 / 667) * 100dvh); 
        left: 50%;
        transform: translateX(-50%);
        z-index: var(--z-index-fronter);
    }
    .form-button{
        width: calc((202 / 375) * 100vw);
        font-size: var(--font-size-small_sp);
        border-radius: calc((12 / 375) * 100vw);
        padding: calc((16 / 667) * 100dvh) calc((16 / 375) * 100vw);
    }
    /* .background{
        background-image: url('/static/main/svg/makimono_sp.svg');
        background-size: calc((397 / 375) * 100vw) calc((606 / 667) * 100dvh);
        opacity: 0.75;
        position: absolute;
        top: calc((47 / 667) * 100dvh);
        width: calc((397 / 375) * 100vw);
        height: calc((606 / 667) * 100dvh);
        left: 50%;
        transform: translateX(-50%);
        z-index: var(--z-index-back);
    } */
    /* .background-invisible{
        background-image: none;
    } */
    .spirit-icon{
        z-index: 100;
    }
    .spirit-icon > img {
        width: calc((239 / 375) * 100vw);
    }
    .invisible{
        display: none;
    }
}