@charset "UTF8";
/*=================================
gallery.css : ギャラリースタイルシート
　※ヘッダーとフッターはcommonで設定
=================================*/

.row{
    /* グリッドレイアウト:変幻自在に行列で指定 */
    display: grid;/* gridだけだと何も変わらない */
    /* グリッドの列の幅を指定 */
    background-color: var(--cmn_font_color);
}

body{
    user-select: none;
    -webkit-touch-callout:none; /* リンク長押しのポップアップを無効化 */
    -webkit-user-select:none; /* テキスト長押しの選択ボックスを無効化 */
}

header{
    grid-area: h;
}

main {
    grid-area: m;
}

.wrapper{ 
    display: grid;  
    grid-template-columns: repeat(4,1fr) ;  /* 4列 */
    padding: 30px;                          /* 内側余白 */ 
    gap: 30px;                              /* 要素間余白 一律 */  
}

.item{
    text-align: center; /* 行センター */
}

.item img{              /* 制御がダルいのでサムネ用の画像は正方形を別途用意 */
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 画像が伸びないよう補正 */
    box-shadow: 5px 5px 5px #999999 ;
}

.item.hide {
  display: none;    /* jsでクラス名に「hide」が着いたら非表示 */
}

.buttons{
        margin: 0 auto;
        text-align: center;     /* 要素を水平方向に中央揃え */
}

@media screen and (min-width:375px){
    .wrapper{
        grid-template-columns: repeat(2,1fr) ;
    }
    .row{
        grid-template-areas:
        "a "
        "m ";
        }
    .buttons{
        width: 250px;
    }
}
@media screen and (min-width:768px){
    .wrapper{
        grid-template-columns: repeat(3,1fr) ;
    }
    .row{
        grid-template-areas:
        "a "
        "m ";
    }
    .buttons{
        width: 500px;
    }
 }

@media screen and (min-width:960px){
    .wrapper{
        grid-template-columns: repeat(4,1fr) ;
    }
    .row{
    grid-template-areas:
        "a m m m m m m m m m m m"
        "a m m m m m m m m m m m";
    }
    .buttons{
        width: 150px;
    }
}

/*=================================
aside
=================================*/
aside {
    grid-area: a;
    padding: 30px;
    text-align: center;     /* 要素を水平方向に中央揃え */
}
aside img{
    margin-top: 30px;
    width: 80px;
}

/* ボタン個々の装飾 */ 
/* スマホ対応　要検討 */ 
.button{
    font-family: "Helvetica Neue" , Helvetica;  /* フォント指定 */
    background:var(--btn_color_inactive);   /* ボタン色_活性 */
    color:var(--base_font_color);           /* 共通文字色 */
    text-align: center; 
    width: 110px;
    padding: 8px 16px;
    margin-bottom: 10px;                    /* 外側余白 */ 
    border: none;                           /* ダセェ枠線：なし */
    border-radius: 8px;                     /* フィレット */
    cursor: pointer;                        /* マウスオーバー時のマウスポインター形状:人差し指 */ 
}

/* ボタンが押された時 */ 
.button.active{
    background:var(--btn_color_active); /* ボタン色_非活性 */
    color:var(--cmn_font_color);        /* 共通文字色 */
}