.gallery{
    max-width: 2000px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 15px;/*ギャラリー左右に余白をつける*/
    grid-row-gap: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
  width:100%;
  height:auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
  .gallery{
  grid-template-columns: repeat(3,1fr);
  } 
}

@media only screen and (max-width: 768px) {
  .gallery{
  grid-template-columns: repeat(2,1fr);
  } 
}

/*========= レイアウトのためのCSS ===============*/

body{
 width: 100%;
 background: #eef0f5;
 color: #444;
 font-size: min(20px,3vw);
 font-family: '游ゴシック','メイリオ', Meiryo;
 margin: 0;
}

.head{
    font-size: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.head img{
    max-width: 300px;
}

h1{
  text-align: center;
  font-size:20pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin:30px 0;
}

ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a{
  color: #333;
}

a:hover,
a:active{
  text-decoration: none;
}

.bana:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,1);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}


P{
 font-size: min(21px,3.5vw);
 text-align: center;
 margin-bottom: 15px;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
}

.copy{
 font-size: min(16px,2.8vw);
 text-align: center;
 
}

/* ベーシックリセット */
:root{
--badge-gap: 12px; /* アイコン間の間隔 */
--badge-min-height: 40px; /* 最小表示高さ（px）。各ガイドラインに合わせ調整してください） */
--badge-max-height: 56px; /* 最大高さ（見栄え用） */
}


/* コンテナ */
.streaming-badges{
display:flex;
flex-flow:row wrap; /* 画面幅が狭ければ折り返す */
gap:var(--badge-gap);
align-items:center;
justify-content:center; /* 左寄せ。中央寄せにするなら center に */
margin-bottom: 40px;
list-style:none;
}


/* 各バッジ（リンクの見た目） */
.streaming-badges a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px; /* クリックしやすさの確保 */
text-decoration:none;
border-radius:8px; /* バッジまわりの角丸（装飾） — ブランドアセット自体は改変しない */
transition:transform .12s ease, box-shadow .12s ease;
background:transparent; /* 背景が必要ならここで調整。ただしバッジの背景は変えないこと */
}
.streaming-badges a:focus{outline:3px solid Highlight; outline-offset:3px}


/* 画像の制御：高さを揃え、アスペクト比は維持 */
.streaming-badges img{
display:block;
height:var(--badge-min-height);
max-height:var(--badge-max-height);
width:auto;
object-fit:contain;
/* 画像の最小幅を確保したい場合は下記を解除して利用 */
/* min-width:48px; */
}


/* ホバー時のシンプルなエフェクト（画像自体は加工しない） */
.streaming-badges a:hover{transform:translateY(-3px)}


/* レスポンシブ調整 */
@media (min-width:640px){
:root{--badge-min-height:40px}
}
@media (min-width:1024px){
:root{--badge-min-height:44px}
}

.setumei{
 margin-top: 0px;
 margin-bottom: 20px;
 font-size: 19px;
 justify-content:center;
}