@charset "UTF-8";
/* indexページ用cssです。 */


/*トップここから*/

.top_wrapper {
    width: 100%;
    height: 100vh;
    min-height: 600px;
    /*画面縦幅いっぱいにする*/
}

.top_container {
    height: 60%;
    margin: 0 auto;
    width: 100%;
    min-height: 600px;
}

.pc_top {
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    margin: 0 auto;
    letter-spacing: 0.1em;
    position: relative;
    background-image: url("../images/index/top.png");
    background-size:cover;
    background-repeat: no-repeat;
}
.pc_img {
    width: 56rem;
    padding: 5% 0;
    padding: 4% 0 0 5%;
    position: absolute;
    top: 0;
    left: 35%;
}

.pc_catchphrase {
    display: block;
    width: fit-content;
    position: absolute;
    /* top: 45%; */
    bottom: 5%;
    padding-left:10rem;
}

.pc_catchphrase h1 {
    font-size: 4.3rem;
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.15em;
}

.pc_catchphrase p {
    font-size: 1.3rem;
    margin: 0;
    padding: 2rem 0 2rem 0;
}

.pc_catchphrase a {
    display: block;
    transition:0.3s;
}

.link_aboutus {
    text-align: center;
    width: 50%;
    height: fit-content;
    font-weight: bold;

}
.link_aboutus :hover {
    background-color:#195ca5;
    color:#fff;
    transition:0.3s;
}

.link_aboutus a {
    display: block;
    height: max-content;
    font-size: 1.3rem;
    color: #195ca5;
    letter-spacing: 0.3rem;
    padding: 0.8rem 0 0.8rem 0;
    background-color:#f9fafb;
    /*border-radius:30px;*/
    border:3px solid #195ca5;
    transition:0.3s;
}

.text_color_blue {
    color: #195ca5;
}

.top_slice {
    width: 100%;
    height: 40%;
    background-color: #195ca5;
    clip-path: polygon(0 60%, 100% 100%, 100% 100%, 0% 100%);
    margin: 0 auto;
}

/*トップここまで*/

/*コンテンツここから*/

.contents_wrapper {
    height: auto;
    width:100%;
    background-color: #195ca5;
}

/*NEW RELEASEここから*/
.release_wrapper {
    width: 100%;
    height:auto;
    margin: 0 auto;
    padding-bottom:8rem;
    background-color:#195ca5;
    padding-top:0;
    overflow: hidden;
}
.release_container{
    width:80%;
    margin:0 auto;
}

.release_container h2 {
    text-align: center;
    font-size: 3rem;
    margin: 0;
    padding-top: 6rem;
    padding-bottom:4rem;
    color: #fff;
    letter-spacing: 0.25rem;
}

.release_container h2 p{
    font-size:1.5rem;
    line-height:1.5rem;
    font-weight:normal;
    letter-spacing: normal;
}
.release_introduction p {
    text-align: center;
    padding-left: 2rem;
    color: #195ca5;
    font-size: 1.2rem;
    margin-bottom:2rem;
}
/*最新作*/

.game_container{
    display:flex;
    width:80%;
    margin:0 auto;
    color:#333;
    justify-content: center;
    align-items: center;
}

.game_container a{
    display: block;
    width:100%;
}

.game_movie{
    width:50%;
    position:relative;
    padding-top:28.12%;
}
.game_movie iframe{
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
}

.game_explanation_wrapper{
    display:block;
    width: 40%;
    transition:0.2s;
    overflow:hidden;
    float:left;
    margin-left:2rem;

}
.game_explanation:hover{
    transform:scale(1.05,1.05);
    transition:0.2s;
}
.game_explanation{
    width:100%;
    box-sizing:border-box;
    padding:1.5rem;
    transition:0.2s;
    color:#333;
    margin:0 auto;
    background-color:#f9fafb;
}
.game_explanation .fas{
    color:#999;
}
.game_text{
    position:relative;
}
.game_text i{
    position:absolute;
    right:-1rem;
    bottom:-1rem;
    font-size:3rem;
    margin-right:1rem;
}
.game_title{
    align-items: center;
    margin-top:0;
    font-size:1.5rem;
    margin-bottom:0;
}
.game_icon{
    width:3rem;
    height: 3rem;
    margin-right:1rem;
    vertical-align: bottom;
}

.game_introduction{
    padding-top:1rem;
    padding-bottom:1rem;
    font-weight: bold;
    font-size:1.1rem;
}
.game_text{
    padding-bottom:1.5rem;
}

@media screen and (max-width:1365px) {
    .game_explanation{
        padding:1.5rem;
    }
}
/*カード*/

.service{
    height:auto;
    position:relative;
}
.release_cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 5rem;
    clear:both;
}

.release_tile {
    height: auto;
    width: 25%;
    margin: 1.5rem;
    background-color: #f9fafb;
    position:relative;
    overflow: hidden;
    
}


.img_container{
    overflow: hidden;
}
.img_container img{
    height: 100%;
    width: 100%;
}
.release_tile img {
    display: block;
    width: 100%;
    margin: 0 auto;
    transition:0.3s;
    aspect-ratio: 16/9;
}
.release_tile:hover img{
    transform: scale(1.1,1.1);
    transition:0.3s;
}
.release_tile i{
    position:absolute;
    right:0;
    bottom:0;
    font-size:1.5rem;
    color:#999;
    padding:0 0.5rem 0.5rem 0;
}

.release_title {
    display: block;
    text-align: left;
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding: 1rem;
}
.sp_release_title{
    display:none;
}

.release_text {
    display: block;
    padding: 0rem 1rem 1rem 1rem;
    color: #666;
    margin: 0 auto;
    letter-spacing: 0;
    font-size: 0.8rem;
}

.link_products {
    text-align: center;
    width: 30%;
    height: fit-content;
    font-weight: bold;
    margin:0 auto;
}
.link_products :hover {
    background-color:#fff;
    color:#195ca5;
    transition:0.3s;
}

.link_products a {
    display: block;
    height: max-content;
    font-size: 1.3rem;
    color: #fff;
    letter-spacing: 0.3rem;
    padding: 0.8rem 0 0.8rem 0;
    background-color:#195ca5;
    /*border-radius:30px;*/
    border:3px solid #fff;
    transition:0.3s;
}




/*SERVICE*/
.contents_wrapper {
    height: auto;
    width:100%;
    background-color: #f9fafb;
}
.service_wrapper {
    width: 80%;
    height:auto;
    margin: 0 auto;
    padding-bottom:8rem;

}

.service_introduction h2 {
    text-align: center;
    font-size: 3rem;
    margin: 0;
    padding-top: 6rem;
    color: #195ca5;
    letter-spacing:0.25rem;
    margin-bottom:6rem;
}
.service_introduction h2 p{
    line-height:1.5rem;
    font-size:1.5rem;
    letter-spacing: normal;
    font-weight:normal;
    padding-left:0;
}

.service_introduction p {
    text-align: center;
    padding-left: 2rem;
    color: #195ca5;
    font-size: 1.2rem;
    margin-bottom:3rem;
}
/*リンク*/

.link_services {
    text-align: center;
    width: 30%;
    height: fit-content;
    font-weight: bold;
    margin:0 auto;
}
.link_services :hover {
    background-color:#195ca5;
    color:#fff;
    transition:0.3s;
}

.link_services a {
    display: block;
    height: max-content;
    font-size: 1.3rem;
    color: #195ca5;
    letter-spacing: 0.3rem;
    padding: 0.8rem 0 0.8rem 0;
    background-color:#f9fafb;
    /*border-radius:30px;*/
    border:3px solid #195ca5;
    transition:0.3s;
}

.slice_service_conteiner{
    width:100%;
    height:10rem;
    background-color:#195ca5;
}
.slice_service {
    width: 100%;
    height: 10rem;
    background-color: #f9fafb;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 33%);
    margin: 0 auto;
}







/*NEWS*/
.news_wrapper{
    width:100%;
    height:auto;
    background-color:#f9fafb;
    padding-top:5rem;
}
.news{
    width:50%;
    height:auto;
    margin:0 auto;
    margin-bottom:6rem;
    padding:2rem;
    padding-bottom:4rem;
    background-color:#fff;
    /*border-radius:1rem;*/
}

/*ニュースタイトルの部分*/
.news_label{
    display:flex;
    height:3rem;
    /*font-size:1.2rem;*/
    border-bottom:1px solid #999;
    background-color:#fff;
    position:relative;
    align-items:center;
    padding:0 1rem 0 1rem;
    transition:0.3s;
}
.news_label:hover{
    color:#50b3e1;
    transition:0.3s;
}
/*ニュースタイトルのクリック反応用のチェックボックス非表示*/
.news_check{
    display:none;

}
/*ニュース内容の部分*/
.news_content{
    display:flex;
    height:0;
    opacity: 0;
    visibility: hidden;
    font-size:1rem;
    border-bottom:1px solid #999;
    align-items:center;
    transition: 0.3s;
    padding:0rem 1rem 0 1rem;
    background-color:#f9fafb;
}
.news_content a{
    color:#195ca5;

}

/*ニュースタイトルがクリックされたときニュース内容が見えるようにする*/
.news_check:checked + .news_label + .news_content{
    height:10rem;
    visibility: visible;
    opacity: 1;
    transition: 0.3s;
}

.news h2{
    text-align: center;
    font-size: 3rem;
    margin: 0;
    padding-top: 2rem;
    color: #195ca5;
    margin-bottom:6rem;
}
.news h2 p{
    line-height:1.5rem;
    font-size:1.5rem;
    font-weight: normal;
}

.news time{
    padding-right:2rem;
}


.news_link i{
    padding-left:1rem;
}





/*メディアクエリ(予定)
PC min-1025px
ﾀﾌﾞﾚｯﾄ　max-1024px
SP max-599px
*/
/*headerレスポンシブ*/
@media screen and (min-width:1025px) {
    
}

@media screen and (min-width:600px) and (max-width:1024px) {
    .release_container {
        width: 90%;
    }
    .release_tile {
        margin: 0.5rem;
        margin-top: 1.5rem;
        width: 30%;
    }
    .game_container {
        width: 100%;
    }
    .service_wrapper{
        width: auto;
    }
    .news {
        width: 70%;
    }
}
@media screen and (max-width:599px) {
    /* トップ画像 */
    .top_wrapper{
        height: 80vh;
    }
    .pc_top {
        background-size: 250%;
        background-position: top;
    }
    .pc_catchphrase {
        position: absolute;
        top: 35%;
        padding-left:2rem;
    }

    .pc_catchphrase h1 {
        font-size: 3.3rem;
        margin: 0;
        line-height: 1.3;
        letter-spacing: 0.15em;
    }

    .pc_catchphrase p {
        font-size: 1.3rem;
        margin: 0;
        padding: 2rem 0 2rem 0;
    }

    .pc_catchphrase a {
        display: block;
        transition:0.3s;
    }

    /* 新作ゲーム */
    .game_container{
        display: block;
        width: auto;
        margin: 0 auto;
    }
    .game_movie {
        display: block;
        width: 100%;
        position: inherit;
        aspect-ratio: 16/9;
        padding-top: 0;
    }
    .game_movie iframe{
        display: block;
        width: 100%;
        position: inherit;
        aspect-ratio: 16/9;
    }
    .game_explanation_wrapper {

        width: auto;
        margin: 2rem auto;
    }
    .game_text i{
        font-size: 1.5rem;
    }
    .release_tile{
        width: auto;
        margin: 1.5rem 0;
    }
    .link_products{
        width: auto;
    }
    /* サービス */
    .link_services{
        width: auto;
    }
    /* ニュース */
    .news_wrapper{
        padding-top: 0;
    }
    .news {
        width: auto;
        padding: 1rem 1rem;
    }
    .news_label {
        display: block;
        /* min-height: 3rem; */
        height: auto;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
    }
    .news_label time{
        display: block;
        margin-top: 0.5rem;
        line-height: 1.2em;
        font-size: 0.8rem;
        color:#888;
        /* padding-left: -0.5rem; */
    }
    .news_check:checked + .news_label + .news_content {
        height: auto;
        padding: 1rem 1rem 1rem 1rem;
    }
    .news_content {
        font-size: 0.9rem;
    }
    
    /* スマホ版での非表示要素 */
    .smartphone_mute{
        display: none;
    }

    /* トップ */
    .pc_catchphrase {
        top: 42.5%;
    }
    .pc_catchphrase h1{
        font-size: 2rem;
    }
    .pc_catchphrase p{
        font-size: 1rem;
    }
    .link_aboutus{
        width: auto;
    }

    /* 最新ゲーム */
    .release_wrapper{
        padding-bottom: 2rem;
        font-size: 0.9rem;
        background-color: #fff;
    }
    .release_container h2{
        padding-top: 3rem;
        padding-bottom: 2rem;
        font-size: 2rem;
        color:#195ca5;
    }
    .release_container h2 p{
        font-size: 1rem;
    }
    .release_cards{
        padding-bottom: 1rem;
    }
    .game_explanation_wrapper{
        margin: 1rem auto;
    }
    .link_products :hover {
        background-color:#195ca5;
        color:#fff;
    }
    
    .link_products a {
        color: #195ca5;
        background-color:#fff;
        border: 3px solid #195ca5;
    }

    /* 事業案内 */
    .service_introduction h2{
        padding-top: 3rem;
        padding-bottom: 2rem;
        font-size: 2rem;
        margin-bottom: 0;
    }
    .service_introduction h2 p{
        font-size: 1rem;
        margin-bottom: 0;
    }
    .service_cards{
        padding-bottom: 1rem;
    }
    .service_wrapper{
        padding-bottom: 2rem;
    }

    /*お知らせ*/
    .news{
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }
    .news h2{
        padding-top: 1rem;
        padding-bottom: 2rem;
        font-size: 2rem;
        margin-bottom: 0;
    }
    .news h2 p{
        font-size: 1rem;
        margin-bottom: 0;
    }
    .game_text{
        font-size: 0.8rem;
        color: #666;
    }
}