@import url("slick.css");

/* ボタンの装飾 */
.default_button button{
    width: 200px;
    height: 80px;
    font-size: 20px;
    background-color: #154261;
    color: #F0F0F0;
    border: none;
}
.default_button button:hover{
    background-color: #57A897;
}

/* メニュー */
/* 通常メニュー */
.GameList_button button{
    background-color: #57A897;
}
/* ここまで */

/*　ここから絞り込み選択 */
.hide_item {
    display: none;
}
.search_area {
    display: inline;
    text-align: center;
}
.search_area div {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.search_area span{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
/* チェックボックスの装飾 */
.filter-checkbox {
    display: none;
}
.checkbox_parts {
    padding-left: 25px;
    position: relative;
    margin-right: 25px;
    color: black;
    cursor: pointer;
}

.checkbox_parts::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #999;
}

.filter-checkbox:checked+.checkbox_parts::after {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: 5px;
    width: 7px;
    height: 14px;
    transform: rotate(40deg);
    border-bottom: 3px solid #0050c1;
    border-right: 3px solid #0050c1;
}

/* ここまで絞り込み検索 */

/* メインコンテンツ内の設定 */
h1{
    font-size: 200%;
    color: black;
    text-decoration: underline;
    text-decoration-color: #57A897;
    margin: 0;
}
h2{
    font-size: 180%;
    color: black;
    float: left;
    margin: 0;
}
p{
    font-size: 160%;
    color: black;
}
red{
    color: red;
}

.Games {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3%;
}
.Games img{
    width: 100%;
    height: auto;
}

.GameCard{
    width: 460px;
    height: 400px;
}
.GameCard img{
    display: block;
    transition: 0.4s;
    max-height: 250px;
    width: auto;
    cursor:pointer;
    margin: 0 auto;
    border: 2px solid #154261;
}
.GameCard img:hover{
    transform: scale(1.1, 1.1);
}
.GameCard_title{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.hide_mode{
    visibility: hidden;
}
.pop_mode{
    z-index: 3;
    position: fixed;
    /* 画面の中心に表示 */
    top: calc(50% + 30px);
    left: 50%;
    transform: translate(-50%, -50%);
    /* ここまで */
    display: none;
}

/* main3.jsで大きさなどを上書きしてる*/
.pop_box{
    align-items: center;
    background-color: #154261;
    box-shadow: 4px 4px 4px black;
    overflow: hidden;
}
.pop_txt{
    display: block;
}
.pop_img{
    display: block;
    margin:0 auto;
}
.pop_dlbutton{
    text-align: center;
    top: 100%;
}
/* ここまで */

.pop_title{
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
.pop_title h1{
    margin: 0;
}
.pop_p{
    display: block;
    height: 70%;
    overflow: auto;
    margin: 0;
    margin-bottom: 15px;
}
.pop_p::-webkit-scrollbar{
    width: 0.5vw;
    background-color: #154261;
}
.pop_p::-webkit-scrollbar-thumb{
    border-radius: 2vw;
    background-color:#57A897;
}
.pop_txt p, .pop_title h1{
    color: #FFF;
}
.pop_dlbutton{
    text-align: center;
    top: 100%;
}
.pop_dlbutton button{
    width: 70%;
    height: auto;
    font-size: 20px;
    background-color: #154261;
    color: #F0F0F0;
    border: none;
}
.pop_dlbutton button:hover{
    background-color: #57A897;
}

/* 以下はmain3.jsで上書きしてるためここを変更しても意味無し */
.slider{
    display: block;
    margin: 0 auto;
    margin-top: 2%;
    transition: 0.4s;
}
/* ここまで */

.slider:hover{
    transform: scale(1.03, 1.03);
}

.slick-prev, .slick-next{
    position: absolute;
    top: 43%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid white;/*矢印の色*/
    border-right: 2px solid white;/*矢印の色*/
    height: 2vw;
    width: 2vw;
}

.slick-prev{
    left: 0%;
    transform: rotate(-135deg);
}

.slick-next{
    left: 100%;
    transform: rotate(45deg);
}

.slick-dots {
    position: relative;
    z-index: 3;
    text-align: center;
    left: -3%;
}

.slick-dots li {
    display:inline-block;
    margin: 1%;
    margin-top: 2%;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 1vw;/*ドットボタンのサイズ*/
    height: 1vw;/*ドットボタンのサイズ*/
    display:block;
    border-radius:100%;
    background:white;/*ドットボタンの色*/
    border: none;
}

.slick-dots .slick-active button{
    background:#57A897;/*ドットボタンの現在地表示の色*/
}


.Gtag{
    margin-top: 0;
    font-size: 100%;
    color: #F0F0F0;
    -webkit-text-stroke: 1% black;
    font-weight: bold;
    display: inline;
}
.Gtag G3D::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: black;
    border: 1px solid #00CCCC;
    content: "3D";
}

.Gtag G2D::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: black;
    border: 1px solid red;
    content: "2D";
}

.Gtag Act::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: red;
    content: "Action";
}

.Gtag RPG::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: rgb(190, 117, 48);
    content: "RPG";
}

.Gtag Sht::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: blue;
    content: "Shooting";
}

.Gtag Sim::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: green;
    content: "Simulation";
}

.Gtag Puz::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: #00CC00;
    content: "Puzzle";
}

.Gtag Adv::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: purple;
    content: "Adventure";
}

.Gtag Rac::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: orangered;
    content: "Racing";
}

.Gtag Oth::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: gray;
    content: "Ohter";
}

.Gtag Hor::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: #1d0052;
    content: "Horror";
}

.Gtag Rog::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: rgb(255, 153, 0);
    border: 0.15vw solid red;
    content: "Roguelike";
}

.Gtag Nov::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: palevioletred;
    content: "Novel";
}

.Gtag Rhy::after{
    padding-left: 1%;
    padding-right: 1%;
    background-color: mediumturquoise;
    content: "Rhythm";
}