@charset "shift-jis";

/* ヘッダー全体の背景色・要素の並列化・幅・マージン*/
.header {
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1280px;
  margin: auto;
}


/* ボタン全体の設定*/
.headermein {
  display: grid;
  grid-gap: 0px;
}


/*クリック時の設定*/
.headerindex{
  background: linear-gradient(#fff 90%, #E6E8EF 10%);
}
.headerindex:hover{
  background: linear-gradient(#fff 87%, #60B1FF 13%);
}
.headerindex:active{
  background: linear-gradient(#fff 92%, #7BCBFF 8%);
}

.headerillust{
  background: linear-gradient(#fff 90%, #E6E8EF 10%);
}
.headerillust:hover{
  background: linear-gradient(#fff 87%, #60B1FF 13%);
}
.headerillust:active{
  background: linear-gradient(#fff 92%, #7BCBFF 8%);
}

.header4koma{
  background: linear-gradient(#fff 90%, #E6E8EF 10%);
}
.header4koma:hover{
  background: linear-gradient(#fff 87%, #60B1FF 13%);
}
.header4koma:active{
  background: linear-gradient(#fff 92%, #7BCBFF 8%);
}

.headercomic{
  background: linear-gradient(#fff 90%, #E6E8EF 10%);
}
.headercomic:hover{
  background: linear-gradient(#fff 87%, #60B1FF 13%);
}
.headercomic:active{
  background: linear-gradient(#fff 92%, #7BCBFF 8%);
}

.headermovie{
  background: linear-gradient(#fff 90%, #E6E8EF 10%);
}
.headermovie:hover{
  background: linear-gradient(#fff 87%, #60B1FF 13%);
}
.headermovie:active{
  background: linear-gradient(#fff 92%, #7BCBFF 8%);
}

.headergame{
  background: linear-gradient(#fff 90%, #E6E8EF 10%);
}
.headergame:hover{
  background: linear-gradient(#fff 87%, #60B1FF 13%);
}
.headergame:active{
  background: linear-gradient(#fff 92%, #7BCBFF 8%);
}

/* 横と縦のグリッドを指定*/
.headermein {
  grid-template-columns: 160px 160px 160px 160px 160px 160px;
  grid-template-rows: none;
}

.headeritem img {
	width: 160px;
	height: 46px;
}

/* 幅1300以下では3カラム可*/
@media (max-width: 1300px){
.header {
  width: 930px;
}
  .headermein {
    grid-template-columns: 140px 140px 140px 140px 140px 140px;
    grid-template-rows: auto;
  }
.headeritem img {
	width: 140px;
	height: 46px;
}
}




/* 幅960以下では2カラム可*/
@media (max-width: 960px){
.header {
  width: 600px;
}
  .headermein {
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: auto;
  }
.headeritem img {
	width: 180px;
	height: 51px;
}
}


/* 幅600以下では1カラム可*/
@media (max-width: 600px){
.header {
  width: 100%;
}
  .headermein {
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: auto;
  }
.headeritem img {
	width: 160px;
	height: 46px;
}
}