@charset "UTF-8";

/* /* 共　通 */
body {
    background: #000;
    text-align: center;
    
}
#contents {
    background-color: #000;
    max-width: 768px; 
    min-height: 100vh;
    margin: 0 auto;
    text-align: center;    
}
#video {
    background-color: #000;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    text-align: center;
}
.button {
    background-color: #000;
    border: none;
    width: 80%;
    margin: 3% 0;
    text-align: center;
}
.button a:after {    
    font-weight: bolder;    
}
.button a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 
                0 0 5px rgb(0 0 0 / 10%);
}
#start,#end {
    display: inline-block;
    margin: 0;
    width: 100%;
    padding: 5% 0;
    color: #FFF;
    font-size: 7vw;
    font-weight: bold;
    filter: drop-shadow(0px 2px 4px #ccc);    
    border-radius: 50px;
    text-align:center;
}
footer {
    background-color: #000;
    max-width: 768px;
    color: #fff;
    text-align: center;
}
/* トップ画面 ・リザルト画面一部*/
.title, .title img, .top,
.top img, .char-icon {
    width: 100%;
    margin: 0;
    text-align: center;
}
#start {
    background: #085bf5;
}
/* リザルト(占い結果)画面 */
.name {
    display: inline-block;
    background-image: url(images/name_back.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 70px;
    margin: 5px auto;
    font-size: 4vw;
    font-weight: bold;
    line-height: 70px;
    text-align:center;
}
.char-icon img {
    display: inline-block;
    width: 90%;
    margin:0 auto;
}
.comment {
    /* background-color: fuchsia; */
    background-image: url(images/result_back.png);    
    background-repeat: no-repeat;
    width: 100%;
    margin: 0 auto;
    
}
.comment #font {
    display: inline-block;
    margin: 2% 4% 2% 6%;
    font-size: 120%;
    font-weight: bold;
    text-align: left;
}
#end {
    background: #f3bc05;
}

/* /* スマホ横向き・ＰＣ画面用 */
@media (min-width:769px) {
    body {
        background-image:url(images/background.jpg);
        background-attachment: fixed;
        margin: 0 auto;
        height: 100%;
        text-align: center;
    }
    #contents {
        width: 100%;
        min-height: 100vh;
        margin:0 auto;
    }
    #video {
        width: 100%;
        min-height: 100vh;
        margin: 0 auto;
    }
    #start,#end {
        font-size: 200%;
        font-weight: bold;
    }
    .name {
    font-size: 1.2rem;
    font-weight: bold;
    }
    .comment {
        margin: 10px 0;
        font-size: 120%;
        text-align: left;
    }
}
/* @media (min-width:820px and max-width:1024px) {
    #contents {
        
        width: 75vw;
        margin:0 auto;
    }
    #video {
        background-color: #000;
        /* width: 75vw; */
        /* min-height: 100vh;
        margin: 0 auto;
    }
    .name {
    font-size: 170%;
    font-weight: bold;
    }
    .comment {
        margin: 10px 0;
        font-size: 150%;
        text-align: left;
    }
} */