@charset "UTF-8";
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
}

/*--------------- font size ---------------*/
/*画面幅640px未満*/
.font_size_24px {
    font-size: 12px;
}
.font_size_20px {
    font-size: 12px;
}
.font_size_12px {
    font-size: 12px;
}

/*画面幅640px〜1299pxまで*/
@media (min-width: 640px) {
    .font_size_24px {
        font-size: calc(12px+((1vw - 6.4px)*(8/6.6)));
    }
    .font_size_20px {
        font-size: calc(12px+((1vw - 6.4px)*(8/6.6)));
    }
    .font_size_12px {
        font-size: calc(0px+((1vw - 6.4px)*(8/6.6)));
    }
}
/*画面幅1300px以上*/
@media (min-width: 1300px) {
    .font_size_24px {
        font-size: 24px
    }
    .font_size_20px {
        font-size: 20px
    }
    .font_size_12px {
        font-size: 12px
    }    
}

/*--------------- wrapper ---------------*/
#wrapper {
    margin: 0 auto;
}
.contents_wrapper {
    margin-right: 5%;
    margin-left: 5%;
    text-align: center;
}

/*--------------- htag---------------*/
h1,h2,h3 {
    display: none;
    margin: 0px;
    padding: 0px;
}
.h3_title {
    display: block;
    text-align: left;
}

/*--------------- line ---------------*/
.category_title_line {
    margin: 0 auto;
    height: 3px;
    width: 100%;
    object-fit: cover;
}
.line {
    margin-bottom: 4px;
    height: 2px;
    width: 100%;
    object-fit: cover;
    filter: brightness(260%);
}
@media (max-width: 1300px) {
    .category_title_line {
        width: 90vw;
    }
    .line {
        width: 90vw;
    }
}

/*--------------- header ---------------*/
header {
    margin: 0 auto;
    width: 100%;
}
#clony_logo_div {
    text-align: center;
}
#clony_logo {
    margin: 51px 0px 50px 0px;
    width: 250px;
    border :none ;
}
#mainimg_wrapper {
    margin: 0 auto;
}
img#main_img {
    max-width: 100%;
    width: 100vw;
}
@media (max-width: 1300px) {
    #clony_logo {
        margin-bottom: 3.84615384615vw;/* 50/1300*100 */
        width: 19.2307692308vw;/* 250/1300*100 */
    }
}

/*--------------- scroll ---------------*/
img#scrollmark {
    position: fixed;
    inset: 0;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    width: 140px;
    animation: markblink 1.5s ease-in-out infinite alternate;
}
@keyframes markblink {
    0% {
        filter: brightness(0);
        opacity:1;
    }
    100% {
        opacity:1;
    }
}
@media (max-width: 1300px) {
    img#scrollmark {
        width: 10.7692307692vw;/* 140/1300*100 */
    }
}

/*--------------- category(WORKS,ABOUT) ---------------*/
.category_logo_div {
    margin-top: 50px;
    padding-top: 50px;
    text-align: center;
}
img.category_logo {
    width: 360px;
}
@media (max-width :1300px) {
    img.category_logo {
        width: 27.6923076923vw;/* 360/1300*100 */
    }    
}

/*--------------- game ---------------*/
.app_list {
    display: flex;
    margin-left: 20px;
    height: 128px;
    width: 960px;
}
th {
    padding-left: 20px;
    width: 100%;
    text-align: left;
    font-style: 小塚ゴシック Pr6N;
    font-weight: lighter;
}
td {
    text-align: left;
    vertical-align: bottom;
    width: 160px;
    height: 60px;
}
.app_icon {
    height: 128px;
    border-radius: 10px;
}
.subhead_logo {
    margin: 100px 0px 20px 0px;
    height: 60px;
}
.App_logo {
    margin: 0px 20px 0px 20px;
    width: 128px;
    vertical-align: bottom;
}
.Play_logo {
    width :156px;
    vertical-align: bottom;
}
@media (max-width: 1300px) {
    .app_list {
        height: 9.84615384615vw;/* 128/1300*100 */
        width: 73.8461538462vw;/* 960/1300*100 */
    }    
    td {
        height: 4.61538461538vw;/* 60/1300*100 */
        width: 12.3076923077vw;/* 160/1300*100 */
    }    
    .app_icon {
        height: 9.84615384615vw;/* 128/1300*100 */
    }
    .subhead_logo {
        margin-top: 7.69230769231vw;/* 100/1300*100 */
        height: 4.61538461538vw;/* 60/1300*100 */
    }
    .App_logo {
        width: 9.84615384615vw;/* 128/1300*100 */
    }
    .Play_logo {
        width :12vw;/* 156/1300*100 */
    }
}
#movie_business {
    margin-left: 20px;
    text-align: left;
}

/*--------------- about ---------------*/
#about_table {
    margin: 40px 0px 0px 0px;
}
li {
    margin-left: 20px;
    padding: 4px;
    text-align: left;
    list-style-type: none;
}
.li_bold {
    font-weight: bolder;
}

/*--------------- engage ---------------*/
#engage {
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
    max-width: 100%;
    width: 100vw;
}


/*--------------- footer ---------------*/
#footer {
    width: 100vw;
    text-align: center;
    background-color:#e6e6e6;
}
#mail {
    margin-top: 80px;
    margin-bottom: 80px;
    text-align: center;
    font: Acumin Variable Concept;
    font-weight: ExtraLight;
}
#copyright {
    padding-bottom: 100px;
    text-align: center;
    font: Acumin Variable Concept;
    font-weight: ExtraLight;
}
@media (max-width: 1300px) {
    #mail {
        margin-top: 6.15384615385vw;/* 80/1300*100 */
        margin-bottom: 6.15384615385vw;/* 80/1300*100 */    
    }
}