/*CSS ジェネレーター
  https://cssgridgenerator.io/
*/
/* デフォルトスタイル (スマホ向け: 1列) */
body {
  font-family: Arial, sans-serif;
  margin: 0 15px 0 15px;
  padding: 0;
}

.container {
  width: 90%;
  margin: 0 auto; /* 中央揃え */
}

.grid_2列 { /*グリッドで左右に分割*/
  display: grid;
  grid-template-columns: 1fr; /* 左右2列 */
  gap: 40px; /* グリッドアイテム間の間隔 */
}

.grid_2列_330 { /*グリッドで1セル330px。左右に分割*/
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center; /* グリッドアイテムを水平方向の中央に配置 */
  gap: 10px 10px; /* グリッドアイテム間の間隔 */
}

.grid_3列190 { /*グリッドで3列均等1行。*/
  width:65%;
  margin: 0 auto  0 60px;
  display: grid;
  grid-template-columns: 190px;
  /*justify-content: left;*/ /* グリッドアイテムを水平方向の中央に配置 */
  gap: 0px; /* グリッドアイテム間の間隔 */
}

.grid_3列2行 {
  width:60%;
  margin: 0 auto ;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 160px 30px; /* 2行, 各行の高さを170pxに指定 */
  justify-content: center; /* グリッドアイテムを水平方向の中央に配置 */
  align-items: end; /* 画像などの中身を下ぞろえにする */
}

.grid_2列2行上結合 {
  display: grid;
  grid-template-columns: 150px 1fr; /* 左右2列 */
  grid-template-rows: 30px 1fr; /* 上下2行 */
  gap: 10px; /* グリッドアイテム間の間隔 */
  grid-template-areas:
    "head head"
    "left right";
}

.grid-head { /*grid_2列2行上結合 のときのhead*/
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  grid-area: head;
  background-color: bisque;
  border-radius: 10px;
  padding: 4px;
}
.grid-left {grid-area: left;} /*grid_2列2行上結合 のときのleft*/
.grid-right {grid-area: right;} /*grid_2列2行上結合 のときのright*/

.giga使える img { width: 90%; }

/* グリッドレイアウトの設定 */
.grid_回転6_画 {
  display: grid;
  gap: 20px; /* 要素間のスペース */
  grid-template-columns: 1fr; /* スマホ: 1列 */
  grid-template-rows: auto auto auto; /* スマホ: 3行 */
  text-align: center; /* 中央揃え */
  /*margin: 10px 0 ;*/
}

.パッケージ版発売 {
  width: 140px;
  height: auto;
  justify-self: center; /* 中央揃え */
  align-self: start; /* 上揃え */
  /*margin-top: 20px;*/ /* 上下の間隔を追加 */
  animation: ゆらゆら 2s infinite ease-in-out; /* アニメーションを適用 */
  order: 2; /* スマホでは2番目に表示 */
}

.六面回転 {
  justify-self: center; /* 中央揃え */
  order: 3; /* スマホでは3番目に表示 */
}

/* パッケージ版発売のアニメーション */
@keyframes ゆらゆら {
  0% {
    transform: rotate(0deg); /* 初期状態 */
    transform-origin: left bottom; /* 左下を中心に回転 */
  }
  35% {
    transform: rotate(4deg); /* 右に5度回転 */
  }
  70% {
    transform: rotate(-4deg); /* 左に5度回転 */
  }
  100% {
    transform: rotate(-0.5deg); /* 左に5度回転 */
  }
}

/* タブレット向けスタイル (768px以上: 2列) */
@media (min-width: 768px) {
  /*.grid_2列 { grid-template-columns: repeat(2, 1fr); }*/ /* 2列均等 */
  .grid_2列_330 { grid-template-columns: repeat(2, 260px); } /* 2列均等 */
  .grid_3列190 { grid-template-columns: repeat(3, 190px); } /*グリッドで3列均等1行。*/
  .giga使える img { width: 60%; }
}

/* PC向けスタイル (1024px以上: 3列) */
@media (min-width: 1024px) {
  .grid_2列 { grid-template-columns: repeat(2, 1fr); } /* 2列均等 */
  .grid_2列_330 { grid-template-columns: repeat(2, 260px); } /* 2列均等 */
  .grid_3列190 { grid-template-columns: repeat(3, 190px); } /*グリッドで3列均等1行。*/
  .giga使える img { width: 60%; }
  .grid_回転6_画 {
    grid-template-columns: auto 440px auto; /* PC: 3列1行 */
    grid-template-rows: auto; /* PC: 1行 */
    align-items: center; /* 縦方向の中央揃え */
    gap: 20px; /* 要素間のスペース */
  }
  .ダミー {
    order: 1; /* PCでは1番目（左） */
  }
  .六面回転 {
    justify-self: center; /* 中央揃え */
    order: 2; /* PCでは2番目（中央） */
  }

  .パッケージ版発売 {
    justify-self: start; /* 左寄せ */
    margin-top: 0; /* 上下の間隔をリセット */
    order: 3; /* PCでは3番目（右） */
  }
}

.titleS {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background-color: #ddd;
  border-radius: 0.3em;
  padding: 0.1em 0 0 0;
}

.青小見出し {
  background: #2653FF;
  text-align: center;
  color: white;
  font-size: 22px;/*1.3em;*/
  font-weight: bold;
  padding: 0.2em;
  border-radius: 0.5em;
}
.商品 {
  width: 90%;
  margin: 0 auto;
}

.青 { color: #007bff; }
.緑 { color: #00aa00; }
.赤 { color: red; }
.大28 { font-size: 28px;}
.大20 { font-size: 20px;}
.大16 { font-size: 16px;}
.行高26 { line-height: 26px;}
.太 { font-weight: bold; }
.普通太 { font-weight: normal; }

.footerN {
  text-align: center;
  padding: 20px;
  border-top: 1px solid #dee2e6;
  margin-top: 30px;
  background-color: white;
  font-size: 14px;
  color: #666;
}
/*
.中揃 {
  text-align: center;
}*/