/* 基本設定 */
body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #fff;
  color: #333;
}

/* 全体を囲むコンテナ */
.container {
  width: 90%; /* 画面幅に対する割合 */
  max-width: 800px; /* PCでの最大幅を指定 */
  margin: 40px auto; /* 上下の余白と、左右中央揃え */
  text-align: center;
}

/* ロゴ */
.logo {
  max-width: 300px; /* ロゴの最大幅 */
  height: auto; /* 高さは自動調整 */
  margin-bottom: 40px; /* ロゴと会社情報の間隔 */
}

/* 会社情報のグリッド設定 */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 左のラベルと右の値の列幅の比率を1:2に設定 */
  gap: 12px; /* 各項目の間隔 */
}

/* 各項目の共通スタイル */
.info-grid > div {
  border: 1px solid #009FE8; /* コーポレートカラー */
  padding: 16px 10px; /* 内側の余白（上下 左右） */
  font-size: 16px;
  /* 文字を上下左右中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ラベル側のスタイル（左列） */
.item-label {
  font-weight: 500;
}

/* フッター */
footer {
  margin-top: 50px; /* 会社情報との間隔 */
  font-size: 14px;
  color: #777;
}

/* スマートフォン用の調整 */
@media (max-width: 600px) {
  .info-grid > div {
    font-size: 14px; /* スマートフォンでは文字を少し小さく */
    padding: 12px 8px;
  }

  .info-grid {
    gap: 10px; /* スマートフォンでは間隔を少し狭く */
  }

  .container {
    width: 95%; /* スマートフォンでは画面幅いっぱいまで使う */
    margin: 20px auto;
  }

  .logo {
    max-width: 240px;
    margin-bottom: 30px;
  }
}