@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

/*共用部分
----------------------------------------------------------------*/

html{
    font-size: 100%;
}

body{
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.7;
}

/*画像が親要素より大きくなるのを防いでいる*/
img{
    max-width: 100%;
}
/*リンクの文字の傍線をなしに設定*/
a{
    text-decoration: none;
}

span{
    color: hotpink;
    font-weight: bold;
}

iframe{
    max-width: 100%;
}

/*中央に揃える*/
.wrapper{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

/*header*/

.main-nav{
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    font-size: 1.25rem;
    gap: 3px;
}

.main-nav .item{
    background: rgb(94, 229, 253);
    text-align: center;
    margin-bottom: 15px;
    border-radius: 5px;
}

.main-nav .itemtop{
    background: rgb(241, 89, 28);
    text-align: center;
    margin-bottom: 15px;
    border-radius: 5px;
}

.main-nav .item:hover{
    background: rgb(32, 147, 255);
    text-align: center;
}

.main-nav .itemtop:hover{
    background: rgb(250, 41, 33);
    text-align: center;
}

.main-nav a{
    color: #fff;
}

/*グリッド表示 ゲームとかブログの表示に関して*/
.grid{
    display: grid;
    gap:26px;
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*ログイン関連*/

.required{
    color: red;
    font-weight: normal;
}

.logp{
    text-align: justify;
    color: midnightblue;
    font-size: 0.85rem;
}

/*index*/
.indexnavi{
    margin-bottom: 1px;
}

.newsp{
    text-align: justify;
    color: midnightblue;
    font-size: 1rem;
    margin-top: 1px;
}

.gametitle{
    color: rgb(69, 28, 253);
    font-size: 1.15rem;
    font-weight: bold;
}

/*ランキング*/

.username{
    color: mediumblue;
}

.formbtn{
    margin-top: 15px;
}

/*ブログ関連*/

.blogtitle{
    color: rgb(76, 73, 255);
    margin-top: 10px;
    margin-bottom: 10px;
}

.blogp{
    text-align: justify;
}

.middletitleblog{
    color: #007bff;
}

.blogsubmit{
    margin-top: 15px;
    margin-bottom: 20px;
}

.source{
    color: navy;
    margin-top: 1px;
    margin-bottom: 1px;
}

.code{
    color: #fff;
    background-color:#343a40;
}

/* はみ出た部分はスクロールできる様にしている*/
pre{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*footer*/
.footerp{
    text-align: justify;
}

footer{
    background: rgb(77, 77, 77);
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}

footer p{
    color: #fff;
}

/*youtube*/
.video{
    position:relative;
    width:100%;
    padding-top:56.25%;
  }
  .video iframe{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
  }

/*SNS関連のボタン*/
.twitter{
    margin-top: 25px;
    margin-bottom: 20px;
}


/*その他*/
.kanri{
    margin-top: 1px;
    margin-bottom: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 1rem;
}

/*広告*/
.nend{
    margin-top: 30px;
    margin-bottom: 30px;
}

/* 検索*/
.search_container{
    box-sizing: border-box;
}

.search_container select{
    background: #fff;
    border-color: black;
    color: #343a40;
    height: 2.2em;
    width: 150px;
    margin-right: 10px;
}

.search_container input[type="text"]{
background: #ccddf5;
border: none;
height: 2.0em;
width: 150px;
}

.search_container input[type="password"]{
background: #ccddf5;
border: none;
height: 2.0em;
width: 150px;
}

.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="submit"]{
cursor: pointer;
border: none;
background: #3879D9;
color: #fff;
outline : none;
height: 2.2em;
}
.search_container ::-webkit-input-placeholder {
color: #3879D9;
}

.search{
    margin-bottom: 30px;
}

/*検索-------------------------------------------------------------------------------------------------------*/


/*モバイル
-------------------------------------------------------------------------------------------------------------*/
/*グリッド表示*/
@media (max-width: 600px){
    /*header*/
    .main-nav{
        display: grid;
        gap: 3px;
        grid-template-columns: repeat(3, minmax(65px, 1fr));
        font-size: 1rem;
    }
    /*ゲームの一覧、ブログの一覧*/
    .grid{
        display: grid;
        gap: 26px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        margin-top: 20px;
        margin-bottom: 20px;
    }
}