@charset "UTF-8";

/* =============================================
   1. 全体の基本設定（フォント・太さ・読みやすさ）
   ============================================= */
body {
  /* 機種を問わず優しく表示されるフォント設定 */
  font-family: 
    "Hiragino Maru Gothic ProN",   /* Mac/iPhone: 丸ゴシック */
    "Hiragino Kaku Gothic ProN",   /* Mac/iPhone: きれいなゴシック */
    "Meiryo",                      /* Windows: 親しみやすいメイリオ */
    sans-serif;                    /* 共通: 標準のゴシック */

  /* 【重要】文字の太さを「標準」に設定（太すぎを解消） */
  font-weight: normal; 

  /* 文字色：元のネイビーグレーを維持 */
  color: #2c3e50; 

  /* 読みやすさの黄金バランス */
  text-align: center;
  line-height: 1.8;                /* 行間を広げてゆったりと */
  letter-spacing: 0.05em;          /* 文字同士を少し離して読みやすく */
  margin: 0;
  padding: 0;
  font-size: 16px;                 /* PCでの基本サイズ */
}

/* 商店街の温かさを出すための背景色バリエーション */
body.aaa { background-color: #ccffff; } /* 水色 */
body.bbb { background-color: #ffffcc; } /* 薄黄 */
body.ccc { background-color: #ffccff; } /* 薄桃 */
body.ddd { background-color: #33ffff; } /* 鮮やかな水色 */

div {
  text-align: center;
}

/* =============================================
   2. レイアウト（wrapper）の設定
   ============================================= */
.wrapper {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* タブレット：横幅80% */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .wrapper {
    width: 80%;
  }
}

/* PC：横幅50% */
@media screen and (min-width: 1025px) {
  .wrapper {
    width: 50%;
    max-width: 1200px;
  }
}

/* =============================================
   3. 見出し（H1・H2）の設定
   ============================================= */
h1, h2 {
  display: block;
  width: 100%;
  margin: 0 auto;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
  word-break: break-all;
  /* 見出しだけは少し太くしてメリハリをつけます */
  font-weight: bold; 
}

/* =============================================
   4. スマホ・タブレット等のサイズ調整
   ============================================= */

/* ▼ スマホ用（横幅600px以下）の設定 */
@media screen and (max-width: 600px) {
  
  /* スマホで見るときは文字を大きく、太さは「標準」をキープ */
  body.aaa, body.bbb, body.ccc, body.ddd, body.eee,
  td, p, div, li {
    font-size: 18pt !important;
    font-weight: normal !important; /* スマホでも太字にならないよう強制 */
  }

  /* 見出しのサイズ */
  h1 { font-size: 8.1vw !important; }
  h2 { font-size: 6.5vw !important; }
  
  h1, h2 { padding: 0 5px; }
  h1#top { max-width: none; margin: 0; }
}

/* ▼ タブレット用 */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  h1 { font-size: 4.5vw; }
  h2 { font-size: 3.6vw; }
}

/* ▼ PC用 */
@media screen and (min-width: 1025px) {
  h1 { font-size: 1.2vw; }
  h2 { font-size: 1.2vw; }
}

/* =============================================
   5. テーブル等の基本設定
   ============================================= */
table.ccc, table.ddd, table.ggg, table.hhh {
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
}

table.ccc { width: 100%; max-width: 100vw; }
table.ddd { width: 50%; }
table.ggg { width: 25%; }
table.hhh { width: 75%; }

table img { width: 100%; height: auto; display: block; }
table.ccc img { object-fit: contain; }

table.ccc td, table.ddd td, table.ggg td { width: 100%; }
table.hhh td { width: 25%; vertical-align: top; }