:root {
  --r-max: 1100px;
  --r-gap: 20px;
  --r-radius: 8px;
  --r-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  --r-border: 1px solid #e0e0e0;
  
  --c-text: #333333;
  --c-blue: #2f83b8;
  --c-green: #2d8a6e;
  --c-navy: #243b6b;
  --c-orange: #e09a2a;
  --c-red: #c43a3a;
  --c-gray-bg: #f5f7fa;
  
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* =========================================================
   Base & Reset
   ========================================================= */
body { margin: 0; padding: 0; font-family: var(--font-base); color: var(--c-text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .75; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; }

.r-wrap { max-width: var(--r-max); margin: 0 auto; padding: 0 16px; position: relative; }
.r-section { padding: 50px 0; }
.r-title { text-align: center; font-size: 26px; font-weight: 700; margin: 0 0 30px; letter-spacing: .05em; }

/* -------------------------------------------------- */
/* 回り込み解除設定 */
/* -------------------------------------------------- */

.fix { zoom: 1; }
.fix:after{
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	line-height: 0; 
	visibility: hidden;
}

/* =========================================================
   1. Header (Overlay & Specific Layout)
   ========================================================= */
body.top header {
  position: absolute; /* メイン画像の上に重ねる指定 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  
  /* ▼ 修正: 背景を白の70%不透明（30%透過）に設定 */
  background: rgba(255, 255, 255, 0.7);
  
  /* オプション: すりガラス効果を入れると文字が読みやすくなります */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  font-family: "Noto Sans JP", sans-serif;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* --- Logo --- */
.brand { flex-shrink: 0; }
.brand-link img { height: 70px; width: auto; }

/* --- Center Area (2 Rows) --- */
.header-center {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  margin-left: auto; /* 右寄せ */
}

/* Row Top: Utils & Controls */
.header-row-top {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  font-weight: 500;
}

.util-links {
  display: flex;
  gap: 12px;
}
.util-links a {
  display: flex; align-items: center; gap: 4px;
  color: #333; text-decoration: underline;
}
.util-links a:hover { text-decoration: none; opacity: 0.7; }
.u-icon { font-size: 1.1em; }

.access-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Size Buttons (Green Border) */
.size-ctrl { display: flex; gap: 4px; }
.size-ctrl button {
  border: 1px solid #008866;
  background: #fff;
  color: #333;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  height: 24px;
  line-height: 1;
}
.size-ctrl button.is-active,
.size-ctrl button:hover {
  background: #e6f7f2;
}

/* Color Buttons */
.color-ctrl { display: flex; gap: 4px; }
.color-ctrl button {
  width: 24px; height: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.c-white  { background: #ffffff; }
.c-blue   { background: #000080; border-color: #000060; }
.c-black  { background: #000000; border-color: #000; }
.c-yellow { background: #ffff00; border-color: #e6e600; }

/* Row Bottom: Search & Action Buttons */
.header-row-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Search Form */
.search-form {
  display: flex;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  height: 36px;
}
.search-input {
  border: none;
  padding: 0 10px;
  width: 200px;
  font-size: 14px;
  outline: none;
}
.search-btn {
  background: #333;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Buttons */
.btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px;
  background: #333; color: #fff;
  border-radius: 4px;
  font-size: 13px; font-weight: 700;
}
.btn-red {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px;
  background: #cc0000; color: #fff;
  border-radius: 4px;
  font-size: 13px; font-weight: 700;
}
.btn-dark:hover, .btn-red:hover, .search-btn:hover { opacity: 0.8; }

/* --- Right Area: Menu Button --- */
.header-right {
  margin-left: 0;
}
.menu-btn {
  width: 70px;
  height: 70px; /* 高さを持たせて存在感を出す */
  background: #333;
  color: #fff;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.menu-lines {
  display: flex; flex-direction: column; gap: 5px;
}
.menu-lines .line {
  width: 30px; height: 3px; background: #fff; display: block;
}
.menu-text {
  font-size: 11px; font-weight: 700;
}
.menu-btn:hover { opacity: 0.9; }

/* --- Responsive Adjustments --- */
@media (max-width: 1000px) {
  /* 幅が狭いPCやタブレットの場合、検索窓などを縮める */
  .search-input { width: 120px; }
  .util-links span { display: none; } /* アイコンのみ非表示など */
}

@media (max-width: 900px) {
  /* スマホ表示：複雑なヘッダーを簡略化 */
  .header-center { display: none; } /* ツール類・検索・ボタン群を非表示 */
  .header-right { margin-left: auto; } /* メニューボタンを右端へ */
  .menu-btn { width: 50px; height: 50px; }
  .menu-lines .line { width: 22px; height: 2px; gap: 4px; }
  .menu-text { font-size: 9px; }
  .header-inner { padding: 0 10px; }
}

/* =========================================================
   2. Hero Slider
   ========================================================= */
.r-hero {
  position: relative;
  width: 100%;
  /* ヘッダーが上にかぶさるので、画像の表示領域を確保 */
  height: clamp(400px, 50vw, 750px);
  background: #000;
  overflow: hidden;
}

/* ▼▼▼ 修正箇所：display: flex と flex: 0 0 100% を追加しました ▼▼▼ */
.hero-slider {
  height: 100%;
  width: 100%;
  position: relative;
}

.hero-track {
  display: flex; /* 画像を横並びにするために必須 */
  height: 100%;
  width: 100%;
  position: relative;
  transition: transform 500ms ease; /* スライドのアニメーション */
  will-change: transform;
}

.hero-slide {
  flex: 0 0 100%; /* 画像1枚が幅100%を占有する設定 */
  height: 100%;
  width: 100%;
  position: relative;
}
/* ▲▲▲ 修正ここまで ▲▲▲ */

.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

/* キャプション（配置の調整） */
.hero-caption {
  position: absolute; 
  inset: 0;
  display: flex; 
  /* align-items: center; から以下に変更 */
  align-items: flex-end;   /* 下揃えにする */
  justify-content: center; /* 左右は中央 */
  text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%); /* 下部を少し暗くして文字を読みやすくする */
  color: #fff;
  /* padding-top: 80px; を削除し、下部の余白を設定 */
  padding-bottom: 60px;    /* 画像下端からの距離 */
}

/* スマホ表示時は中央に戻す、または位置を微調整する場合（必要に応じて） */
@media (max-width: 900px) {
  .hero-caption {
    align-items: center;   /* スマホでは中央の方が見栄えが良い場合が多い */
    padding-bottom: 0;
    background: rgba(0,0,0,0.2);
  }
}

.hero-title {
  /* ▼ 修正: フォントをモダンなゴシック体に変更 */
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 700;
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Slider Controls */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,0.3); color: #fff; border: 1px solid rgba(255,255,255,0.5);
  font-size: 24px; display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.hero-prev { left: 20px; }
.hero-next { right: 20px; }
.hero-dots {
  position: absolute; bottom: 20px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 10px; z-index: 10;
}
.hero-dot {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4);
  border: 1px solid #fff;
}
.hero-dot.is-active { background: #fff; }

/* =========================================================
   3. Global Navigation (Under Hero)
   ========================================================= */
nav.global {
  background: #f0f6fa; /* 薄い青背景 */
  border-bottom: 1px solid #daeaf5;
  box-shadow: 0 4px 6px rgba(0,0,0,0.03);
  position: relative;
  z-index: 50;
}

nav.global ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav.global li {
  flex: 1;
  text-align: center;
}

/* PC表示時、項目の間に区切り線を入れる */
@media (min-width: 901px) {
  nav.global li:not(:last-child) {
    border-right: 1px solid #cbdce8;
  }
}

nav.global a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 4px;
  font-size: 15px;
  font-weight: 700;
  
  /* ▼ 修正: 指定の色コードと下線設定 */
  color: #011B4A;
  text-decoration: none; /* 通常時：下線なし */
  
  transition: background 0.2s ease;
}

nav.global a:hover {
  background: rgba(255, 255, 255, 0.6);
  
  /* ▼ 修正: マウスオン時：下線あり */
  text-decoration: underline;
}

/* ▼ 修正: アイコンの表示を修正 */
.g-icon {
  font-size: 1.3em;
  display: inline-block;
  line-height: 1;
  margin-bottom: 2px;

  /* ▼ 見えなくなる不具合を解消（通常表示に戻す） */
  color: inherit; 
  text-shadow: none;

  /* ▼ 派手な色を抑えてなじませるため、モノクロ（グレー）フィルタを適用 */
  filter: grayscale(100%) opacity(0.8);
}

/* =========================================================
   4. Main Contents
   ========================================================= */

/* =========================================================
   Top Banners (SNSアイコン調整版)
   ========================================================= */
.r-top-banners {
  padding-top: 30px;
}

.r-top-banners .banner-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* --- バナーリスト全体の調整 --- */
.r-top-banners .banner-list ul {
  display: flex;
  flex-wrap: nowrap;     /* 1行に強制 */
  justify-content: center; 
  align-items: stretch;  /* 高さを画像に同期 */
  gap: 10px;
  width: 100%;
}

/* 通常の画像バナー（脱炭素・こがまっぷ等） */
.r-top-banners .banner-list li {
  flex: 1;               
  max-width: 220px;
  min-width: 0;
}

/* SNSボタンの親要素：PCでは幅を短く固定 */
.r-top-banners .banner-list li:has(.top-sns-btn),
.r-top-banners .banner-list li.li-sns {
  flex: 0 0 60px; 
}

/* SNSボタン本体のデザイン */
.top-sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: 1px solid #eee;
}

.top-sns-btn .sns-icon {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
}

.top-sns-btn span {
  display: none !important;
}

/* --- スマホ表示時の調整 --- */
@media (max-width: 900px) {
  .r-top-banners .banner-list ul {
    overflow-x: auto;      /* 横スクロール有効 */
    justify-content: flex-start;
    padding: 0 10px 15px;
    align-items: flex-start; /* スマホでは高さを自動に任せる */
  }

  /* 画像バナー：スマホで見やすい幅 */
  .r-top-banners .banner-list li {
    flex: 0 0 160px;
    max-width: none;
  }

  /* SNSアイコン：スマホでも横幅を広げず60pxを維持 */
  .r-top-banners .banner-list li:has(.top-sns-btn),
  .r-top-banners .banner-list li.li-sns {
    flex: 0 0 60px;
  }

  /* ボタンの高さ：画像と同じくらい（約54px）に固定 */
  .top-sns-btn {
    height: 54px; 
  }
}

/* =========================================================
   Lifestyle Search (with Background Illustration)
   ========================================================= */
.r-lifestyle {
  /* ▼ PC用設定: 右上配置（ここは以前のまま） */
  background-color: transparent;
  background-image: url("/img/2026/common/bg_line_01.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto;
  
  /* PCでの位置調整 */
  margin-top: -60px;
  padding-top: 160px; 
  padding-bottom: 100px;
  
  position: relative;
  z-index: 1;
}

/* --- グリッドコンテナ（PC: 6列） --- */
.life-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background-color: #ecf6fd; /* 水色背景 */
  padding: 10px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  gap: 0;
  border: none;
}

/* --- 各アイテム（PC） --- */
.life-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 15px 5px;
  text-decoration: none;
  position: relative;
  transition: opacity 0.2s;
  
  /* 枠線設定 */
  border-right: 1px solid #d1e5f5;
  border-bottom: 1px solid #d1e5f5;
}

.life-grid a:hover {
  opacity: 0.7;
}

.life-icon {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* PC: 6の倍数と最終行の線消し */
@media (min-width: 901px) {
  .life-grid a:nth-child(6n) { border-right: none; }
  .life-grid a:nth-child(n+7) { border-bottom: none; }
}

/* --- レスポンシブ（スマホ表示） --- */
@media (max-width: 900px) {
  .r-lifestyle {
    /* ▼ 修正: 画像の高さを固定値(px)で指定します */
    /* これにより、横幅は自動的に拡大され、イラストが適切な大きさになります */
    background-size: auto 60px; 
    
    /* ▼ 修正: イラストの「右側（メインの建物など）」が見えるように基準位置を設定 */
    /* 必要に応じて 'center top' や '80% top' などに微調整してください */
    background-position: right top; 
    
    /* ▼ 修正: 拡大した画像が表示できるよう、上部の余白を確保 */
    padding-top: 100px; 
    
    /* 位置調整（バナーとの距離） */
    margin-top: -40px; 
  }

  /* （以下のグリッド設定などは変更なし） */
  .life-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 10px;
  }
  .life-grid a {
    border-right: 1px solid #d1e5f5;
    border-bottom: 1px solid #d1e5f5;
  }
  .life-grid a:nth-child(3n) { border-right: none; }
  .life-grid a:nth-child(n+10) { border-bottom: none; }
  
  .menu-panel .life-grid {
    background-color: #ecf6fd;
    padding: 10px;
    gap: 0;
  }
  .menu-panel .life-grid a {
    background: transparent;
    border-right: 1px solid #d1e5f5;
    border-bottom: 1px solid #d1e5f5;
  }
  .menu-panel .life-grid a:nth-child(3n) { border-right: none; }
  .menu-panel .life-grid a:nth-child(n+10) { border-bottom: none; }
}






/* 最初の項目以外は初期状態で非表示にするJS制御用の準備 */
/* ▼ 新規: ① 中間の薄い青ブロック */
.info-bg-box {
  background-color: #ecf6fd; /* 薄い青 */
  padding: 30px; /* 白いカードとの間の余白 */
  border-radius: var(--r-radius);
  box-shadow: var(--r-shadow); /* 影はこちらにつける */
}

/* カード本体（白） */
.r-infobox .r-card {
  background: #fff;
  padding: 40px; /* 内側の余白 */
  border-radius: var(--r-radius);
  border: none;
  box-shadow: none; /* 影は外箱にあるので削除 */
}

/* --- 緊急情報エリア --- */
.info-emergency { margin-bottom: 30px; }
.head-row-emergency {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* ② 緊急情報の文字サイズ */
.label-red {
  display: inline-block;
  background: #cc0000;
  color: #fff;
  font-size: 18px; 
  font-weight: 700;
  padding: 6px 12px;
  line-height: 1.4;
  border-radius: 2px;
}

.list-red { margin: 0; padding: 0; }
.list-red li { margin-bottom: 6px; }
.list-red a {
  color: #cc0000;
  text-decoration: underline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-weight: 700;
  align-items: baseline;
}
.list-red a:hover { opacity: 0.7; text-decoration: none; }


/* --- グループ共通設定 --- */
.info-group {
  margin-top: 40px;
}

/* 見出し行のレイアウト */
.info-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.head-main {
  display: flex;
  align-items: baseline;
  gap: 15px;
}

/* ③〜⑤ 見出しのラベル化（薄い青背景） */
.info-h3 {
  display: inline-block;
  background-color: #e0f2fa;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  padding: 6px 15px;
  margin: 0;
  line-height: 1.4;
  border-radius: 2px;
}

.info-date-sm {
  font-size: 15px;
  font-weight: 400;
  color: #333;
}

/* ⑥ 丸囲みの矢印リンク */
.head-link {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 矢印アイコン */
.head-link::after {
  content: "›";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #333;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  padding-bottom: 2px;
}
.head-link:hover {
  text-decoration: underline;
  opacity: 0.7;
}

/* --- 人権標語エリア --- */
.slogan-area {
  display: flex;
  /* ▼ 修正: 左右に離さず、左詰めで並べる */
  justify-content: flex-start; 
  align-items: baseline;
  padding: 0 10px;
  flex-wrap: wrap;
  
  /* ▼ 修正: テキストと氏名の間に1文字分の余白(1em)を入れる */
  gap: 1em; 
}

.slogan-text {
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}

.slogan-author {
  font-size: 14px;
  margin: 0;
  /* 必要であれば色などを調整 */
}

/* =========================================================
   人権標語エリア（情報ボックス外出し・独立レイアウト）
   ========================================================= */
.slogan-block {
  max-width: 800px;
  margin: 0 auto 4em; /* 上の情報ボックスとの十分な余白 */
  text-align: center;
}

/* 両サイドに線を引いた見出し（スマートなディバイダー装飾） */
.slogan-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: 700;
  color: #333;
  margin: 0 0 25px;
}

.slogan-title::before,
.slogan-title::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #d1e5f5; /* 情報ボックスの枠線に合わせた青みグレー */
  margin: 0 20px;
  max-width: 30%; /* 線が長くなりすぎないように制限 */
}

/* 標語の中身レイアウト */
.slogan-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 標語テキストのスタイル上書き */
.slogan-block .slogan-text {
  font-size: 1.8em;
  font-weight: 700;
  color: #011B4A; /* サイト全体の統一感を持たせる濃紺 */
  margin: 0;
  letter-spacing: 0.05em; /* 少し文字間を広げて読みやすく */
}

.slogan-block .slogan-author {
  font-size: 15px;
  font-weight: 500;
  color: #555;
  margin: 0;
}

/* スマホ表示時の調整 */
@media (max-width: 900px) {
  .slogan-block {
    margin: 0 auto 3em;
  }
  .slogan-title {
    font-size: 16px;
    margin: 0 0 20px;
  }
  .slogan-title::before,
  .slogan-title::after {
    margin: 0 10px;
    max-width: 20%;
  }
  .slogan-block .slogan-text {
    font-size: 18px;
  }
  .slogan-block .slogan-author {
    font-size: 13px;
  }
}


/* --- リストスタイル --- */
.info-list {
  list-style: none;
  border-top: 1px solid #eee;
}
.info-list li {
  border-bottom: 1px solid #eee;
}
.info-list a {
  display: block;
  padding: 12px 0 12px 20px;
  position: relative;
  font-size: 15px;
  color: #333;
  text-decoration: underline;
  line-height: 1.6;
}
.info-list a:hover {
  background: #f9f9f9;
  text-decoration: none;
  color: #0066cc;
}
.info-list a::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 1.2em; 
  font-size: 10px;
  transform: scale(0.8);
  color: #333;
}

/* ▼ 追加: r-infobox のPC背景（r-lifestyle パターンに準拠） */
.r-infobox {
  background-image: url("/img/2026/common/bg_line_02.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto;
  margin-top: -30px;
  padding-top: 120px;  /* ← ここを画像高さに合わせて調整 */
  position: relative;
  z-index: 1;
}


/* =========================================================
   Responsive (Smartphone)
   ========================================================= */
@media (max-width: 900px) {
  .r-infobox {
    /* 背景画像の設定（色は透明のまま） */
    background: transparent url("/img/2026/common/bg_line_02.png") no-repeat left top;
    background-size: auto 60px;
    margin-top: -40px;
    padding-top: 100px;
  }
  
  .info-header-area {
    flex-direction: column;
    gap: 5px;
    align-items: center;
    text-align: center;
  }
  .info-sub { font-size: 12px; }
  
  /* スマホでの余白調整 */
  .info-bg-box {
    padding: 15px; /* 青枠を狭く */
  }
  .r-infobox .r-card {
    padding: 20px 15px; /* 白カード内の余白 */
  }
  
  .list-red a { flex-direction: column; gap: 2px; }
  
  .info-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .head-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .info-h3 {
    font-size: 16px;
  }
  
  .head-link {
    align-self: flex-end; 
    font-size: 12px;
  }
  
  .slogan-area {
    flex-direction: column;
    gap: 5px;
  }
  
  .info-list a {
    font-size: 14px;
    padding: 10px 0 10px 18px;
  }
}

/* =========================================================
   Triplet Cards (Mayor, Council, PR)
   ========================================================= */
/* ▼ 追加: セクション全体の背景設定（bg_line_01.png） */
.r-triplet {
  /* ライフスタイルと同じ画像を右上配置 */
  background-image: url("/img/2026/common/bg_line_03.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto;
  
  /* 前のセクション（情報ボックス）の下に潜り込ませる */
  margin-top: -60px;
  padding-top: 160px;
  padding-bottom: 50px;
  
  position: relative;
  z-index: 1; /* 情報ボックス(z-index:2)より背面に配置 */
}

/* スマホ表示時の背景調整 */
@media (max-width: 900px) {
  .r-triplet {
    background-size: auto 60px;
    margin-top: -40px;
    padding-top: 100px;
  }
}

.triplet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* アイテムごとのラッパー */
.triplet-item {
  display: flex;
  flex-direction: column;
  /* ここで alignment を指定せずとも、内部の margin: 0 auto で中央寄せします */
}

/* --- 1. 画像ブロック（80%幅・中央配置） --- */
.triplet-image {
  /* ▼ 修正: 横幅を80%にし、左右marginをautoにして中央寄せ */
  width: 80%;
  margin: 0 auto 20px; /* 上0、左右auto(中央)、下20px */
  
  aspect-ratio: 3 / 4; /* 縦長比率を維持 */
  
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  background: #f0f0f0;
}

.triplet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* --- 2. コンテンツブロック --- */
.triplet-content {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #fff;
  
  /* コンテンツボックスは幅100%のまま */
  width: 100%;
}

/* 見出し帯 */
.triplet-head {
  padding: 15px 20px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}

/* アイコン装飾（画像アイコン対応） */
.triplet-head .t-icon {
  display: inline-flex; /* 画像を垂直中央に配置しやすくする */
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ▼ 追加: アイコン画像のサイズ調整 */
.triplet-head .t-icon img {
  height: 1.8em; /* 文字の高さの1.8倍に制限 */
  width: auto;   /* 横幅は比率を維持 */
  object-fit: contain;
  vertical-align: middle;
}

/* 背景色設定 */
.triplet-head.is-yellow { background: #B2B200; } /* 黄 */
.triplet-head.is-green { background: #4da692; } /* 緑 */
.triplet-head.is-navy { background: #0c084d; }  /* 濃紺 */
.triplet-head.is-orange { background: #f0a52d; } /* オレンジ */

/* ▼ 追加: オンラインメニュー・行政情報用の色 */
.triplet-head.is-gray { background: #9B9485; }  /* グレー */
.triplet-head.is-yellow { background: #D5C200; }
.triplet-head.is-skyblue { background: #4A90E2; }

.triplet-head.is-green2 { background: #3BA29B; } /* 緑 */
.triplet-head.is-green3 { background: #6EA24C; } /* 緑 */
.triplet-head.is-red  { background: #C20014; }  /* 赤 */
/* 黄色が必要な場合はオレンジを流用するか、以下を追加 */

/* リストエリア */
.triplet-body {
  background-color: #eff8ff;
  padding: 20px;
  flex-grow: 1;
}

.triplet-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.triplet-body li {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.triplet-body li:last-child { margin-bottom: 0; }

.triplet-body li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
}

/* 矢印の色 */
.triplet-item:nth-child(1) .triplet-body li::before { color: #4da692; }
.triplet-item:nth-child(2) .triplet-body li::before { color: #0c084d; }
.triplet-item:nth-child(3) .triplet-body li::before { color: #f0a52d; }

.triplet-body a {
  text-decoration: none;
  color: #333;
  transition: opacity 0.2s;
}
.triplet-body a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* --- スマホ表示時の調整 --- */
@media (max-width: 900px) {
  .triplet-grid {
    grid-template-columns: 1fr; /* 1列表示 */
    gap: 40px;
  }
  
  /* ▼ 修正: 横幅を80%に戻し、縦比率もPCと同じ（3/4）に戻して縦に長くする */
  .triplet-image {
    width: 80%;          /* 横幅を80%に縮小 */
    margin: 0 auto 20px; /* 左右中央寄せ ＋ 下に余白 */
  }

  /* 市長室・議会（pictureタグがある場合）は 4:3 横長 */
  .triplet-image:has(picture) {
    aspect-ratio: 4 / 3;
  }

  /* 広報誌（img単体の場合）は 3:4 縦長を維持 */
  .triplet-image:not(:has(picture)) {
    aspect-ratio: 3 / 4;
    background: none; /* 背景色不要 */
  }

  .triplet-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 広報誌も枠にフィットさせる */
  }
  
  /* テキストエリアの調整（任意） */
  .triplet-head {
    padding: 12px 15px;
    font-size: 16px;
  }
  .triplet-body {
    padding: 15px;
  }
}


/* =========================================================
   Online Menu
   ========================================================= */
.r-online-menu {
  /* ▼ 修正: bg_line_02.png（左上）に変更 */
  background-image: url("/img/2026/common/bg_line_04.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto;
  
  /* 前のセクションに重ねる処理（維持） */
  margin-top: -60px;
  padding-top: 160px;
  padding-bottom: 50px;
  
  position: relative;
  z-index: 1;
}

/* スマホ対応 */
@media (max-width: 900px) {
  .r-online-menu {
    background-size: auto 60px;
    
    /* ▼ 修正: スマホ時も左上に */
    background-position: left top;
    
    margin-top: -40px;
    padding-top: 100px;
  }
}

.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.menu-box { border: var(--r-border); border-radius: 8px; overflow: hidden; background: #fff; }
.menu-head { padding: 10px 15px; color: #fff; font-weight: 700; }
.menu-head.is-gray { background: #757575; }
.menu-head.is-yellow { background: var(--c-orange); } /* 黄色系 */
.menu-head.is-green { background: var(--c-green); }
.menu-head.is-blue { background: var(--c-blue); }
.menu-head.is-red { background: var(--c-red); }
.menu-body { padding: 15px; }
.menu-body ul li { margin-bottom: 6px; padding-left: 14px; position: relative; }
.menu-body ul li::before { content: "●"; position: absolute; left: 0; font-size: 8px; top: 7px; color: #ccc; }


/* =========================================================
   Admin info
   ========================================================= */
/* ▼ 追加: 背景画像と位置調整 */
.r-admin-menu {
  background-image: url("/img/2026/common/bg_line_05.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto;
  
  /* 前のセクションに重ねる */
  margin-top: -60px;
  padding-top: 160px;
  padding-bottom: 50px;
  
  position: relative;
  z-index: 1;
}

/* スマホ対応 */
@media (max-width: 900px) {
  .r-admin-menu {
    background-size: auto 60px;
    margin-top: -40px;
    padding-top: 100px;
  }
}

/* =========================================================
   Footer (背景は元の位置を維持 / ブロック内のバランスのみ調整)
   ========================================================= */
.r-footer {
  /* 背景画像：元の「右側・上部」配置に戻します */
  background: #f5f5f5 url("/img/2026/common/bg_footer_pc.png") no-repeat center top;
  background-size: auto; /* 巨大化防止が必要な場合は auto 450px 等にしてください */
  color: #333;
  padding: 60px 0 40px;
  margin-top: 80px;
  font-size: 14px;
}

.r-footer .r-wrap {
  max-width: var(--r-max);
  margin: 0 auto;
}

/* --- 上部：SNS & マップエリア --- */
.footer-top-area {
  margin-bottom: 60px;
}

.footer-content-row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-start;
}

/* --- 左カラム：SNS・テキスト・人口ブロック --- */
.footer-left-content {
  flex: 0 0 580px; /* 赤枠の位置に合わせるための幅固定 */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* SNSボタン・紹介文 */
.sns-grid { display: flex; flex-wrap: wrap; gap: 15px; }
.sns-btn {
  display: flex; align-items: center; gap: 10px; background: #fff;
  padding: 8px 20px; border-radius: 6px; font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-decoration: none; min-width: 140px;
}
.footer-desc { font-size: 14px; line-height: 1.8; color: #444; margin: 0; }

/* ★ 人口統計ブロック：余白と文字バランスを最適化 */
.footer-stats-box {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #ddd;
  border-radius: 10px;
  
  /* 内側の余白をゆったりさせ、下の境界線との距離(margin-bottom)を確保 */
  padding: 35px 40px; 
  margin-bottom: 50px; 
  
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.stats-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  border-bottom: 2px solid #333;
  padding-bottom: 12px;
}
.stats-main { display: flex; flex-direction: column; gap: 10px; }
.stats-total { font-size: 32px; font-weight: 700; color: #011B4A; margin: 0; }
.stats-details { display: flex; gap: 30px; list-style: none; padding: 0; margin: 0; }
.stats-details li {
  position: relative; padding-left: 14px; font-size: 15px; color: #444; font-weight: 500;
}
.stats-details li::before { content: "・"; position: absolute; left: 0; }
.stats-household { font-size: 15px; font-weight: 500; color: #444; margin: 0; }

/* --- 右カラム：背景地図を表示するためのスペーサー --- */
.footer-map-area {
  flex: 1; 
  min-height: 450px;
}

/* --- 下部：共通リンク・住所エリア --- */
.footer-bottom-area {
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 40px;
  clear: both;
}

.footer-nav-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 40px; list-style: none; padding: 0;
}
.footer-nav-list a {
  display: block; background: #444; color: #fff; padding: 10px 25px; border-radius: 30px; font-size: 14px; font-weight: 700; text-decoration: none;
}
.footer-address-row { display: flex; justify-content: center; align-items: center; gap: 30px; }
.f-logo img { height: 50px; width: auto; }

.f-address {
  font-style: normal; /* ← この一行を追加 */
  /* 他の既存プロパティはそのまま */
}

/* =========================================================
   Smartphone Responsive
   ========================================================= */
@media (max-width: 900px) {
  .r-footer { background: #f5f5f5; padding: 40px 0; }
  .footer-content-row { flex-direction: column; gap: 20px; }
  .footer-left-content { width: 100%; flex: none; }
  .footer-stats-box { padding: 25px 20px; margin-bottom: 30px; }
  .footer-map-area {
    width: 100%; min-height: 300px;
    background: url("/img/2026/common/bg_footer_sp.png") no-repeat center center;
    background-size: 100% auto;
	margin: 20px 0;
  }
  
  /* リストアイテムを縦並びにする */
  .stats-details {
    flex-direction: column; /* 横並びを解除して縦に */
    gap: 5px;               /* 男・女の間の余白 */
  }

  .stats-details li {
    display: block;         /* 確実に改行させる */
  }  
  
}









/* =========================================================
   Responsive (Smartphone)
   ========================================================= */
@media (max-width: 900px) {
  /* Header Adjustments */
  .head-utility { display: none; } /* SPでは上部ツールバー非表示 */
  .btn-org-search, .search-wrap { display: none; } /* 検索窓などはメニュー内へ */
  .headbar-inner { padding: 0 10px; }
  .brand-link img { height: 36px; }
  
  /* Hero */
  .r-hero { height: 300px; }
  .hero-caption { padding-top: 0; }
  
  /* Global Nav (Scrollable) */
  nav.global ul {
    overflow-x: auto; padding-bottom: 10px; gap: 5px;
  }
  nav.global a {
    flex-direction: column; font-size: 11px; padding: 10px 8px; white-space: nowrap; min-width: 70px;
  }
  .g-icon { font-size: 20px; margin-bottom: 4px; }
  
  /* Grids */
  .r-top-banners .banner-list { grid-template-columns: 1fr 1fr; }
  .life-grid { grid-template-columns: repeat(3, 1fr); }
  .triplet-grid, .menu-grid, .footgrid { grid-template-columns: 1fr; }
  
  /* Tabs */
  .tabs button { padding: 6px 12px; font-size: 13px; }
}

/* Hamburger Overlay (Generic) */
.menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; opacity: 0; pointer-events: none; transition: .3s; }
.menu-panel {
  position: fixed; inset: 0; background: #fff; z-index: 2010;
  display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: .3s;
}
body.menu-open .menu-overlay { opacity: 1; pointer-events: auto; }
body.menu-open .menu-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu-topbar { padding: 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.menu-close { font-size: 24px; padding: 10px; }



/* =========================================================
   Mobile Menu Overrides (Cloned Elements)
   ========================================================= */

/* --- Layout Container --- */
.sp-clone-section {
  margin-bottom: 30px;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 20px;
}
.sp-clone-section:last-child { border: none; margin: 0; }

.sp-clone-title {
  font-size: 16px;
  font-weight: 900;
  color: #243b6b;
  margin: 0 0 15px;
  padding-left: 10px;
  border-left: 4px solid #2d8a6e;
  line-height: 1.2;
}

/* --- 1. Header Utility Area Override --- */
/* メニュー内では縦積みにする */
.menu-panel .header-center {
  display: block; /* Flex解除 */
  margin: 0;
  width: 100%;
}
.menu-panel .header-row-top,
.menu-panel .header-row-bottom {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

/* リンク群 */
.menu-panel .util-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 10px;
}
.menu-panel .util-links a {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: bold;
}

/* アクセシビリティ（文字サイズ・色） */
.menu-panel .access-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
}
/* ボタンを押しやすく拡大 */
.menu-panel .size-ctrl button { height: 36px; padding: 0 16px; font-size: 14px; }
.menu-panel .color-ctrl button { width: 36px; height: 36px; }

/* 検索窓・ボタン類 */
.menu-panel .search-form { width: 100%; height: 44px; margin-bottom: 10px; }
.menu-panel .search-input { width: 100%; font-size: 16px; }
.menu-panel .btn-dark,
.menu-panel .btn-red {
  display: flex;
  width: 100%;
  height: 44px;
  font-size: 14px;
  margin-bottom: 10px;
}

/* --- 2. Global Nav Override --- */
.menu-panel nav.global {
  border: none;
  box-shadow: none;
  padding: 0;
}
.menu-panel nav.global ul {
  display: grid;
  grid-template-columns: 1fr; /* 縦1列 */
  gap: 8px;
  overflow: visible; /* スクロールさせない */
}
.menu-panel nav.global a {
  flex-direction: row; /* 横並びに戻す */
  background: #fff;
  border: 1px solid #eee;
  padding: 12px;
  border-radius: 6px;
  font-size: 15px;
}
.menu-panel .g-icon { font-size: 1.4em; margin: 0; }

/* --- 3. Lifestyle Override (Menu) --- */
.menu-panel .life-grid {
  /* メイン画面と同じ水色背景とグリッド設定 */
  background-color: #ecf6fd;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* 隙間をなくして線をつなげる */
  padding: 10px;
  border: none;
  border-radius: 12px;
}

.menu-panel .life-grid a {
  /* グレーの背景をやめて透明に */
  background: transparent;
  padding: 15px 5px;
  
  /* 枠線（格子）を追加 */
  border-right: 1px solid #d1e5f5;
  border-bottom: 1px solid #d1e5f5;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 端の線を消す処理 */
.menu-panel .life-grid a:nth-child(3n) { border-right: none; }
.menu-panel .life-grid a:nth-child(n+10) { border-bottom: none; }

.menu-panel .life-grid .life-icon {
  /* アイコンサイズを大きく（親要素に合わせて調整） */
  width: 100%;
  height: auto;
  max-width: none; /* 36px制限を解除 */
  font-size: 0;    /* 絵文字対策のリセット */
}

/* =========================================================
   Menu Scroll & Layout Fixes
   ========================================================= */

/* 1. スクロール対策 */
/* メニューパネル全体をフレックスコンテナ化（既に設定済みの場合もありますが念の為） */
.menu-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* パネル自体はスクロールさせない（中身をさせる） */
}

/* 中身のエリアにスクロール属性を付与 */
.menu-body2 {
  flex: 1; /* 余った高さを全て使う */
  overflow-y: auto; /* 縦スクロールを有効に */
  -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロール */
  padding: 20px;
  width: 100%;
}

/* 2. PC表示時の「歯抜け（間延び）」対策 */
/* PC（画面幅900px以上）でメニューを開いた時、コンテンツ幅を制限して中央寄せにする */
@media (min-width: 901px) {
  .menu-body2 {
    max-width: 800px; /* 読みやすい幅に制限 */
    margin: 0 auto;   /* 中央寄せ */
  }

  /* メニュー内のレイアウトをPC向けに少し整える */
  
  /* リンク群を4列にならべる */
  .menu-panel .util-links {
    grid-template-columns: repeat(4, 1fr); 
  }
  
  /* ライフスタイルアイコンを6列にならべる（元のPC表示に近づける） */
  .menu-panel .life-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  
  /* ボタン類を横並びにする */
  .menu-panel .btn-dark,
  .menu-panel .btn-red {
    margin-bottom: 0;
  }
  .menu-panel .header-row-bottom {
    flex-direction: row; /* 横並びに戻す */
    align-items: center;
  }
  .menu-panel .search-form {
    width: auto;
    flex: 1;
    margin-bottom: 0;
  }
}


/* =========================================================
   Smartphone: Full Screen Hero & Transparent Header Fix
   (Modified for Sub-page Layout)
   ========================================================= */
@media (max-width: 900px) {

  /* -------------------------------------------------------
     1. 【全ページ共通】スマホ表示の基本設定
     (トップページ・下位ページどちらにも適用)
  ------------------------------------------------------- */
  
  /* ヘッダー内のPC用要素（検索・設定・ボタン群）を非表示にする */
  header .header-center {
    display: none !important;
  }

  /* ハンバーガーメニュー内では、複製した要素を表示させる */
  .menu-panel .header-center {
    display: block !important;
  }

  /* ロゴ画像の基本サイズ（下位ページ用） */
  /* トップページ以外ではこのサイズで左上に表示されます */
  .brand-link img {
    width: 140px; /* 必要に応じてサイズ調整してください */
    height: auto;
  }

  /* -------------------------------------------------------
     2. 【トップページ専用】特別デザイン (body.top)
     (巨大ロゴ・中央配置・全画面透過ヘッダー)
  ------------------------------------------------------- */
  
  /* ヘッダーを全画面透過・コンテンツ中央寄せにする */
  body.top header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 画面の高さ一杯に */
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向の中央 */
    align-items: center;     /* 水平方向の中央 */
    
    /* 背景透明 & 操作透過 */
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    pointer-events: none; /* 余白クリックを下のスライダーに通す */
    padding-top: 0;
  }

  /* インナーコンテナも追従させる */
  body.top .header-inner {
    display: flex;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    height: auto;
    position: static;
  }

  /* ロゴエリアの調整 */
  body.top .brand {
    margin: 0;
    padding: 0;
    flex-grow: 0;
    text-align: center;
    pointer-events: auto; /* ロゴはクリック可能に戻す */
    
    /* タイトルの上に配置するための余白 */
    margin-bottom: 120px; 
  }

  /* ロゴ画像の巨大化 */
  body.top .brand-link img {
    width: 320px; /* ここでトップページだけ大きくする */
    height: auto;
    /* ▼ 修正: 白70%の光彩効果（ドロップシャドウ）を追加 */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));	
  }
  
  /* メインビジュアルのタイトル位置調整 */
  body.top .hero-caption { padding-top: 0; }
  body.top .hero-title {
    margin-top: 100px; /* ロゴの下に来るように位置調整 */
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
  }
  
  /* メニューボタンを画面右上に固定配置（トップページのみ） */
  body.top .header-right {
    position: fixed;
    top: 15px;
    right: 15px;
    margin: 0;
    z-index: 9999;
    pointer-events: auto;
  }

  /* メニューボタンのデザイン（トップページのみ：半透明黒背景） */
  body.top .menu-btn {
    width: 50px;
    height: 50px;
    background: rgba(51, 51, 51, 0.8);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  body.top .menu-lines .line { background: #fff; }
  body.top .menu-text { color: #fff; }

  /* メイン画像を全画面化（トップページのみ） */
  body.top .r-hero { height: 100vh !important; min-height: 100vh; }
  body.top .hero-slider, body.top .hero-track, body.top .hero-slide { height: 100% !important; }
  body.top .hero-slide img { width: 100%; height: 100% !important; object-fit: cover; object-position: center; }
}


/* =========================================================
   Page Top Button
   ========================================================= */
.page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #011B4A; /* サイト共通の濃紺 */
  color: #fff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 9999; /* 他の要素より手前に表示 */
  
  /* アニメーション設定 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 表示時のクラス */
.page-top.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ホバー時 */
.page-top:hover {
  background: #2f83b8; /* 青色に変化 */
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

/* 矢印アイコン（CSSで描画） */
.page-top::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
  margin: 6px auto 0;
}

/* スマホでの位置調整 */
@media (max-width: 900px) {
  .page-top {
    bottom: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
  }
}


/* =========================================================
   PR Banners
   ========================================================= */
.r-pr {
  padding-top: 40px;
  padding-bottom: 20px;
  background-color: #fff;
}

/* バナーリスト */
.pr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  
  /* ▼ 修正: 左寄せ(flex-start)から中央寄せ(center)に変更 */
  justify-content: center;
  
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.pr-list li {
  margin: 0;
  flex: 0 0 auto; /* 拡大縮小なし */
}

.pr-list a {
  display: block;
  transition: opacity 0.2s;
}
.pr-list a:hover {
  opacity: 0.8;
}

.pr-list img {
  /* 原寸表示の設定 */
  width: auto;
  height: auto;
  
  /* 画面幅より大きい場合のみ縮小 */
  max-width: 100%;
  
  display: block;
  border: 1px solid #ddd;
}

/* 募集テキスト */
.pr-recruit {
  text-align: right;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
}
.pr-recruit a {
  color: #011B4A;
  text-decoration: underline;
}
.pr-recruit a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* --- スマホ表示時の調整 --- */
@media (max-width: 900px) {
  .pr-list {
    gap: 10px;
    /* スマホも中央寄せ（継承されるため指定不要ですが明示してもOK） */
    justify-content: center;
  }
  
  .pr-recruit {
    text-align: center;
    font-size: 12px;
  }
}

/* =========================================================
   追加：お役立ちコーナー アコーディオン用スタイル
   ========================================================= */
.triplet-body .sub-list {
  display: none; /* 初期非表示 */
  padding-left: 20px; /* インデント幅（お好みで調整してください） */
  margin-top: 12px; /* 親項目（手続き一覧）との間隔 */
}

.triplet-body .has-child > a {
  display: inline-block;
  cursor: pointer;
}

/* 「手続き一覧」のテキスト色を矢印と同じグレーにする */
.triplet-body li.has-child > a.js-toggle-btn {
  /*color: #999;*/ /* 矢印で指定した色コードと同じものを指定してください */
}

/* 「手続き一覧」の矢印アイコンをグレーにする */
.triplet-body li.has-child::before {
  /*color: #999;*/ /* さらに薄くする場合は #bbb や #ccc などに変更してください */
  transform: rotate(90deg); /* 90度回転させて下向きにする */
}

/* ===== 緊急情報テスト用：ヒーロー画像なし時のスマホヘッダー上書き ===== */
@media (max-width: 900px) {
  body.top header.no-hero {
    height: auto !important;           /* 100vh を解除 */
    background: rgba(255,255,255,0.7) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    pointer-events: auto !important;
    flex-direction: row !important;    /* 横並びに戻す */
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 10px 0 !important;
  }
  body.top header.no-hero .header-inner {
    justify-content: flex-start !important;  /* 中央揃い解除 */
  }
  body.top header.no-hero .brand {
    text-align: left !important;      /* ロゴを左寄せ */
    margin-bottom: 0 !important;      /* 120px のマージン解除 */
  }
  body.top header.no-hero .brand-link img {
    width: 140px !important;          /* 320px → 140px に戻す */
    filter: none !important;
  }
}

/* ===== info-sub クロスフェード ===== */
.info-sub-container {
  text-align: center;
  position: relative;
  min-height: 1.8em;
  margin-top: -1em;;
  margin-bottom: 1em;
}
.info-sub-container .info-sub {
  margin: 0;
}


/* -------------------------------------------------- */
/* 今日の暑さ指数（2020年6月15日追加） */
/* -------------------------------------------------- */

#heat {
	display: flex;
	justify-content: space-between;
	width: 433px;
	margin: 0 auto 20px auto; padding: 0;
	/*border: 1px solid #000;*/
}
#heat_L {
	position: relative;
	width: 241px; height: 69px;
	margin: 0; padding: 0;
	/*background: url(../img/top/heat_L_A.png) no-repeat left top;*/
}
#heat_L p {
	position: absolute;
	bottom: 10px;
	left: 96px;
	margin: 0; padding: 0;
	color: #FFF;
}
#heat_L p span {
	display: none;
}
#heat_R {
	width: 180px; height: 69px;
	margin: 0; padding: 0;
	/*background: url(../img/top/heat_R_A.png) no-repeat left top;*/
}

.heat_L1 { background: url(../../img/top/heat_L_E.png) no-repeat left top; }
.heat_L2 { background: url(../../img/top/heat_L_D.png) no-repeat left top; }
.heat_L3 { background: url(../../img/top/heat_L_C.png) no-repeat left top; }
.heat_L4 { background: url(../../img/top/heat_L_B.png) no-repeat left top; }
.heat_L5 { background: url(../../img/top/heat_L_A.png) no-repeat left top; }

.heat_R1 { background: url(../../img/top/heat_R_E.png) no-repeat left top; }
.heat_R2 { background: url(../../img/top/heat_R_D.png) no-repeat left top; }
.heat_R3 { background: url(../../img/top/heat_R_C.png) no-repeat left top; }
.heat_R4 { background: url(../../img/top/heat_R_B.png) no-repeat left top; }
.heat_R5 { background: url(../../img/top/heat_R_A.png) no-repeat left top; }

@media (max-width: 900px) {
#heat {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0 16px;
	box-sizing: border-box;
}
#heat_L {
	flex: 0 1 241px;
	background-size: contain;
}
#heat_L p {
	bottom: 16px;
	left: 21vw;
}
#heat_R {
	flex: 0 1 180px;
	background-size: contain;
}
}