/* ============================================
   北方領土展 in TOKYO LP
   色・フォントはここで一括管理(:root の値を変えれば全体に反映)
   ============================================ */
:root {
  --orange: #f39801;      /* オレンジ帯 */
  --gray:   #dddddd;      /* フッター背景(エリカちゃん画像の背景と同色) */
  --text:   #231815;      /* 本文色 */
  --sans:   "Noto Sans JP", sans-serif;
  --serif:  "Noto Serif JP", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); background: #fff;
  font-family: var(--sans); font-weight: 400; line-height: 1.9; font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
p, h1, h2, ul { margin: 0; padding: 0; }
ul { list-style: none; }

/* 画面には出さず、検索エンジン・読み上げ用にだけ入れるテキスト */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* PCのみ:画面の両サイドに重なるグラデーション(画像の上にも重なる / スクロールしても両端に固定) */
@media (min-width: 768px) {
  body::before, body::after {
    content: ""; position: fixed; top: 0; bottom: 0; width: 120px;
    z-index: 100; pointer-events: none;      /* クリックは下の要素に通す */
  }
  body::before { left: 0;  background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,0)); }
  body::after  { right: 0; background: linear-gradient(to left,  rgba(0,0,0,.15), rgba(0,0,0,0)); }
}

/* 見出し共通(明朝・太字) */
.h2-serif { font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1.5; text-align: center; }
.h3-serif { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1.5; }

/* ---------- FV ---------- */
.fv img { width: 100%; }
.fv__sp { display: none; }   /* SPのみ表示(下のスマホ設定で切り替え) */

/* ---------- 主催・後援 ---------- */
.sponsor { max-width: 960px; margin: 0 auto; padding: 8px 20px 56px; font-size: 11px; line-height: 1.7; text-align: center; }

/* ---------- 特産品(オレンジ帯) ---------- */
.sales { background: var(--orange); color: #fff; text-align: center; padding: 48px 20px 44px; }
.sales__badge { margin: 0 auto 16px; width: 270px; }
.sales__lead { font-size: 14px; margin-top: 12px; line-height: 1.8; }
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips li {
  background: #fff; color: var(--text); font-weight: 700; font-size: 13px; line-height: 1;
  padding: 7px 16px; border: 1.5px solid var(--text); border-radius: 999px;
}

/* 特産品写真 */
.shoku { display: block; }
.shoku img { width: 100%; }

/* ---------- 展示紹介(ジグザグ) ---------- */
.exhibit { max-width: 1100px; margin: 0 auto; padding: 88px 24px 72px; }
.row { display: flex; align-items: center; gap: 48px; margin-bottom: 72px; }
.row:last-child { margin-bottom: 0; }
.row__img { flex: 0 0 56%; }
.row__txt { flex: 1; }
.row__txt p { margin-top: 16px; font-size: 15px; line-height: 1.9; }
.row--rev { flex-direction: row-reverse; }   /* 画像を右に */
.row--rev .row__img { flex-basis: 52%; }

/* ---------- ジオラマ(水色背景) ---------- */
.diorama {
  background: #4bb4e6 url("../img/chizushita.jpg") center / cover no-repeat;
  padding: 64px 24px 72px; text-align: center;
}
.diorama__img { width: 100%; max-width: 820px; margin: 28px auto 24px; border: 6px solid #fff; }
.diorama__txt { max-width: 820px; margin: 0 auto; text-align: left; font-size: 15px; }

.note { text-align: center; font-size: 11px; margin: 20px 20px 0; }

/* ---------- 外部リンクボタン ---------- */
.more { text-align: center; padding: 28px 20px 64px; }
.more a { display: inline-block; max-width: 600px; transition: opacity .2s; }
.more a:hover { opacity: .7; }

/* ---------- フッター ---------- */
.footer { background: var(--gray); text-align: center; padding: 28px 20px 24px; font-size: 13px; line-height: 1.8; }
.footer__chara { margin: 0 auto 12px; }
.footer__label { font-weight: 500; }
.footer__name { font-size: 15px; font-weight: 700; margin-top: 4px; }
.footer small { display: block; margin-top: 24px; font-size: 10px; color: #666; }

/* ============================================
   スマホ(767px以下)
   ============================================ */
.pc-br { display: inline; }
.sp-br { display: none; }
@media (max-width: 767px) {
  .fv__pc { display: none; }                 /* PC用FVを隠す */
  .fv__sp { display: block; }                /* SP用FVを出す */
  .pc-br { display: none; }                  /* PC用の改行はスマホでは無効 */
  .sp-br { display: inline; }                /* スマホ用の改行 */
  .sales__badge { width: 200px; }
  .h2-serif { font-size: 30px; }
  .h3-serif { font-size: 28px; text-align: center; }

  .sponsor { padding: 4px 16px 40px; text-align: left; font-size: 10px; }
  .sales { padding: 36px 16px 32px; }
  .sales__lead { font-size: 13px; text-align: left; }
  .chips { gap: 6px; }
  .chips li { font-size: 11px; padding: 6px 10px; }

  .exhibit { padding: 48px 16px 48px; }
  .row, .row--rev { flex-direction: column; gap: 20px; margin-bottom: 48px; }
  .row__img, .row--rev .row__img { flex: none; width: 100%; }
  .row__txt p { font-size: 14px; }

  .diorama { padding: 44px 16px 48px; }
  .diorama__img { border-width: 4px; margin: 20px auto; }
  .diorama__txt { font-size: 14px; }
  .more { padding: 20px 16px 44px; }
}