@charset "UTF-8";
/* ====================================================
   フッター（inc/site-footer.php）
   - 深い海の紺（#123d52。すぐ上の海の写真から続く色）に白い文字。右上の「掲載依頼」の箱と同じ色。左にロゴ・SNS・掲載依頼とお問い合わせ、右にサイトマップ（5 列）
   - 英字の見出しは Fredoka（サイト共通の var(--f_en)）。色はサイト共通の青とローズだけ
==================================================== */
footer { background: #123d52; }
.site-footer { color: #e8f1f5; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer__inner {
  display: grid;
  gap: 48px;
  margin: 0 auto;
  max-width: 1240px;
  padding: 72px 20px 56px;
}

/* ---------- 左: ロゴ・SNS・ボタン ---------- */
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.site-footer__logo {
  align-self: flex-start;
  background: #fff;
  border-radius: 14px;
  display: inline-block;
  padding: 16px 22px;
}
.site-footer__logo img { display: block; height: auto; width: 200px; }
.site-footer__text { font-size: 13px; line-height: 1.9; margin: 0; }
.site-footer__sns { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer__sns a {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  display: flex;
  height: 42px;
  justify-content: center;
  transition: transform 0.2s;
  width: 42px;
}
.site-footer__sns a:hover { transform: translateY(-2px); }
.site-footer__sns img { height: 20px; width: 20px; }
.site-footer__cta { display: grid; gap: 10px; margin-top: 8px; }
.site-footer__btn {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3em;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  min-height: 50px;
  transition: 0.2s;
}
.site-footer__btn:hover { background: rgba(255, 255, 255, 0.08); }
.site-footer__btn--request { background: #fff; border-color: #fff; color: #123d52 !important; }
.site-footer__btn--request:hover { background: #f7e3ec; border-color: #f7e3ec; }

/* ---------- 右: サイトマップ ---------- */
.site-footer__map { display: grid; gap: 36px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__en { color: #6fcdf4; font-family: var(--f_en); font-size: 13px; letter-spacing: 0.12em; line-height: 1; margin: 0 0 6px; }
.site-footer__head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 12px;
}
.site-footer__col ul { display: grid; gap: 0; margin: 0; padding: 0; }
.site-footer__col ul > li + li { margin-top: 0; }
.site-footer__col li { list-style: none; }
.site-footer__col li a {
  color: #c4d8e2;
  display: inline-block;
  font-size: 13px;
  line-height: 1.6;
  padding: 2px 0; /* 2026-10-27 行の間を詰めた（5px → 2px。1 行 約 25px で、指で押せる大きさは保つ） */
  transition: color 0.2s;
}
.site-footer__col li a:hover { color: #fff; text-decoration: underline; }
.site-footer .gnav-ext { opacity: 0.7; }

/* ---------- 一番下 ---------- */
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer__bottom-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1240px;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; }
.site-footer__legal > li + li { margin-top: 0; }
.site-footer__legal li { list-style: none; }
.site-footer__legal a { color: #c4d8e2; font-size: 12px; }
.site-footer__legal a:hover { color: #fff; text-decoration: underline; }
.site-footer__copy { color: #8fb0c0; font-family: var(--f_en); font-size: 12px; letter-spacing: 0.06em; margin: 0; }

/* ---------- 広い画面 ---------- */
@media print, screen and (min-width: 1080px) {
  /* 上: ロゴ・紹介文・SNS・ボタンを横に並べた帯。下: サイトマップ 6 列をフッターの幅いっぱいに */
  .site-footer__inner { gap: 48px; max-width: 1320px; padding: 80px 32px 72px; }
  .site-footer__brand { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.14); display: grid; gap: 16px 32px; grid-template-columns: auto minmax(0, 1fr) auto; padding-bottom: 40px; }
  .site-footer__logo { align-self: center; grid-row: 1 / 3; }
  .site-footer__text { align-self: end; }
  .site-footer__sns { align-self: start; }
  .site-footer__cta { grid-column: 3; grid-row: 1 / 3; grid-template-columns: repeat(2, 200px); margin-top: 0; }
  .site-footer__bottom-inner { max-width: 1320px; }
  /* 6 列。読者向け（コラム・イベント・暮らし・番組）→ 企業向け（掲載・広告）→ 沖縄ナビについて の順 */
  .site-footer__map { gap: 0 24px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .site-footer__bottom-inner { padding-left: 32px; padding-right: 32px; }
}
/* ---------- スマホ・タブレット：ロゴ・紹介文・SNS・ボタンと一番下の帯は中央に（すぐ上のアプリの案内が中央寄せなので、流れをそろえる。2026-10-27） ---------- */
@media screen and (max-width: 1079.8px) {
  .site-footer__brand { align-items: center; text-align: center; }
  .site-footer__logo { align-self: center; }
  .site-footer__sns { justify-content: center; }
  .site-footer__cta { align-self: stretch; }
  .site-footer__bottom-inner { flex-direction: column; justify-content: center; }
  .site-footer__legal { justify-content: center; }
}
@media screen and (min-width: 600px) and (max-width: 1079.8px) {
  .site-footer__cta { align-self: center; grid-template-columns: repeat(2, 240px); }
  .site-footer__map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}