@charset "utf-8";


/* ーーーーーーーーーーーーーーーーーーーーーフレキシブルボックス */
.flexbox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 3px;
  align-items: center;
  margin: 10px;
  padding: 10px;
}

.box {
  background: linear-gradient(90deg, rgb(228, 19, 19), rgb(255, 223, 223));
  padding: 5px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* ← これが影 */
}

.flexbox>a {
  color: inherit;
  text-decoration: none;
}

/* ーーーーーーーーーーーーーーーーーーーーーフレキシブルボックス */

/* 
display: grid;を使用してコンテナをグリッドコンテナに設定し、
grid-template-columns: repeat(4, 1fr);で4つの列を定義しています。
grid-gap: 5px;によってボックス間の間隔を5pxに設定し、
justify-items: center;とalign-items: center;でボックスを中央に配置。
.flexbox内のjustify-items: center;は外したが、これがあると一番大きいボックスにサイズを合わせて水平に中央揃えする効果がある
ただし、小さいBOXが並ぶと間隔が広くなる
ボックスのスタイルは.boxクラスで定義されており、
背景色やパディング、テキストの中央揃えなどが設定されています。
*/


.flexbox2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  align-items: center;
  margin: 5px;
  padding: 0 8px 0 8px;
}

.box2 {
  color: #000000;
  background: linear-gradient(90deg, rgb(252, 178, 135), rgb(255, 227, 201));
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* ← これが影 */
}


.flexbox2>a {
  color: inherit;
  text-decoration: none;
}



.flexbox3 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  align-items: center;
  margin: 5px;
  padding: 0 8px 0 8px;
}

.box3 {
  color: #000000;
  background: linear-gradient(90deg, rgb(180, 135, 252), rgb(240, 223, 255));
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* ← これが影 */
}

.flexbox3>a {
  color: inherit;
  text-decoration: none;
}

.flexbox4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  align-items: center;
  margin: 5px;
  padding: 0 8px 0 8px;
}

.box4 {
  color: #000000;
  background: linear-gradient(90deg, rgb(249, 252, 121), rgb(241, 255, 225));
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* ← これが影 */
}

.flexbox4>a {
  color: inherit;
  text-decoration: none;
}

.flexbox5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  align-items: center;
  margin: 5px;
  padding: 0 8px 0 8px;
}

.box5 {
  color: #000000;
  background: linear-gradient(90deg, rgb(245, 165, 62), rgb(255, 186, 96));
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* ← これが影 */
}

.flexbox5>a {
  color: inherit;
  text-decoration: none;
}




.flextiiki {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 3px;
  align-items: center;
  margin: 5px;
  padding: 0 8px 0 8px;
}

.tiikibox {
  background: linear-gradient(90deg, rgb(176, 247, 166), rgb(228, 250, 222));
  padding: 15px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* ← これが影 */
}

.flextiiki>a {
  color: inherit;
  text-decoration: none;
}

.flexnendai {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 3px;
  align-items: center;
  margin: 5px;
  padding: 0 8px 0 8px;
}

.nendaibox {
  background: linear-gradient(90deg, rgb(59, 62, 255), rgb(68, 104, 248));
  padding: 12px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* ← これが影 */
}

.flexnendai>a {
  color: inherit;
  text-decoration: none;
}

.flexseinen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3px;
  align-items: center;
  margin: 5px;
  padding: 0 8px 0 8px;
}

.seinenbox {
  background: linear-gradient(90deg, rgb(74, 252, 51), rgb(138, 255, 138));
  padding: 15px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* ← これが影 */
}

.flexseinen>a {
  color: inherit;
  text-decoration: none;
}

.flexotona {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 3px;
  align-items: center;
  margin: 5px;
  padding: 0 8px 0 8px;
}

.otonabox {
  background: linear-gradient(90deg, rgb(255, 91, 255), rgb(239, 167, 253));
  padding: 15px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* ← これが影 */
}

.flexotona>a {
  color: inherit;
  text-decoration: none;
}




@media screen and (max-width:835px) {
  /*------------------------------------------------------------------画面サイズが768pxからはここを読み込む*/

  .box {
    padding: 5px 0;
    font-size: 15px;

  }

  .box2 {
    padding: 20px 0;
    font-size: 15px;
  }

  .box3 {
    padding: 20px 0;
    font-size: 15px;
  }

  .box4 {
    padding: 20px 0;
    font-size: 15px;
  }

  .box5 {
    padding: 20px 0;
    font-size: 12px;
  }

  .tiikibox {
    padding: 20px 0;
    font-size: 12px;

  }

  .seinenbox {
    padding: 20px 0;
    font-size: 12px;

  }

  .otonabox {
    padding: 20px 0;
    font-size: 12px;

  }




}



@media screen and (max-width:480px) {
  /*----------------------------------------------------画面サイズが480pxからはここを読み込む*/



  /* ーーーーーーーーーーーーーーーーーーーーーフレキシブルボックス */

  .box {
    padding: 5px 0;
    font-size: 8px;
  }

  .box2 {
    padding: 15px 0;
    font-size: 10px;
  }


  .box3 {
    padding: 8px 0;
    font-size: 10px;
  }

  .box4 {
    padding: 8px 0;
    font-size: 10px;
  }

  .box5 {
    padding: 10px 0;
    font-size: 8px;
  }




  .tiikibox {
    padding: 15px 0;
    font-size: 10px;
  }

  .seinenbox {
    padding: 15px 0;
    font-size: 10px;
  }

  .otonabox {
    padding: 15px 0;
    font-size: 10px;
  }

  /* ーーーーーーーーーーーーーーーーーーーーーフレキシブルボックス */




}