@charset "utf-8";

.main-title {
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	margin: 0 auto;
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
  }
  
  /* メインコンテナのスタイル */
  .main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  /* アイコンリストのスタイル */
  .icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    grid-template-rows: repeat(2, 1fr);    /* 2行 */
    gap: 20px;                             /* アイコン間のスペース */
    width: 100%;
    max-width: 1000px;                     /* アイコンリストの最大幅 */
  }

  .icon-list li {
    text-align: center;
  }

  /* アイコン画像のスタイル */
  .icon {
    width: 100%;
    max-width: 150px; /* デフォルトの最大幅 */
    height: auto;     /* アスペクト比を保つ */
    border-radius: 10px;
    transition: transform 0.2s ease;
    display: block;
  }

  /* PC向けのアイコン拡大 */
  @media screen and (min-width: 768px) {
    .icon {
      max-width: 200px; /* PC向けに大きく表示 */
    }
  }
 /* バナー広告のスタイル */
 .ad-container {
    margin-top: 30px; /* アイコンとバナーの間隔 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 1200px; /* 最大幅を設定 */
  }

  /* バナー画像のサイズ */
  .ad-banner {
    width: 100%;
    max-width: 300px; /* 最大300pxの幅 */
    height: auto;
  }
  
  /* レスポンシブ対応 - 広告を2列で表示 */
  @media screen and (min-width: 768px) {
    .ad-banner {
      max-width: 400px; /* PC向けに広告を少し大きく */
    }
  }