/* CSS Document */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src:
    url("../font/NotoSansJP-Regular.woff2") format("woff2"),
    url("../font/NotoSansJP-Regular.woff")  format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src:
    url("../font/NotoSansJP-Bold.woff2") format("woff2"),
    url("../font/NotoSansJP-Bold.woff")  format("woff");
  font-display: swap;
}

/* 日本語ページの既定フォントを Noto Sans JP に */
html[lang="ja"] {
  font-family: "Noto Sans JP",
               "Hiragino Kaku Gothic ProN",
               "Hiragino Sans",
               "Yu Gothic",
               "Meiryo",
               Arial,
               sans-serif;
  font-size: 16px;
  font-feature-settings: "palt" 1;     /* かなのプロポーショナル調整 */
  -webkit-font-smoothing: antialiased; /* WebKit系のにじみ軽減（任意） */
  word-break: break-word;         /* 古いブラウザ向けの保険 */
  overflow-wrap: anywhere;        /* 推奨。単語途中でも折り返せる */
  hyphens: auto;                  /* 英単語を自動的にハイフンで区切る（対応ブラウザのみ） */
}

@media (max-width: 768px){
  html[lang="ja"] { font-size: 15px; }  /* 既定16px → 15px */
}
@media (max-width: 480px){
  html[lang="ja"] { font-size: 14px; }  /* さらに小端末で */
}

/* ===== Base / Modern Reset ===== */

/* ボックスモデルの統一 */
*, *::before, *::after { box-sizing: border-box; }

/* 余白リセット（要素列挙は不要） */
* { margin: 0; }

/* 画像・メディアのスケール制御 */
img, svg, video, canvas, audio, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 文字系の継承・調整 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  /* 日本語の詰め（Noto Sans JPなら相性良し） */
  font-feature-settings: "palt" 1;
}

/* タイポ・背景などの初期値 */
body {
  background-color: #F0F5FB;
  line-height: 1.7;
  color: #111;
  /* フォントは html[lang="ja"] 側や別定義の @font-face を継承想定 */
  font-family: inherit;
}
/* 好きに差し替えOKなテーマ変数 */
:root{
  --sb-track: #EAF3FD;      /* トラックの色（薄水色） */
  --sb-thumb: #0168B7;      /* つまみ通常（県ブルー） */
  --sb-thumb-hover: #035fa6;/* つまみホバー */
  --sb-corner: #D5E9FC;     /* 角の色（横×縦の交差部） */
  --brand: #0168B7;        /* サイト基調色 */
  --accent: #F57B1E;       /* 差し色（必要なら） */
  --ink: #0b1b2b; 
  --bord:#dbe6f3;
  --bg:#fff;
}

/* Firefox 用（fallback） */
html{
  scrollbar-color: var(--sb-thumb) var(--sb-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable; /* ← both-edges を外す */
}

/* Chromium / Safari（WebKit系） */
*::-webkit-scrollbar{
  width: 12px;
  height: 12px; /* 横スクロール用 */
}

*::-webkit-scrollbar-track{
  background: var(--sb-track);
  border-radius: 999px;
  /* ほんのり内側シャドウで“ふっくら” */
  box-shadow: inset 0 0 0 1px rgba(1,104,183,.08);
}

*::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 999px; 
  /* 外側にトラック色ボーダーを回して“ピル感”を強調 */
  border: 3px solid var(--sb-track);
}

*::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
}

*::-webkit-scrollbar-corner{
  background: var(--sb-corner);
}


[id] {
  scroll-margin-top: 100px;
}

/* ダークモード（任意） */
@media (prefers-color-scheme: dark){
  :root{
    --sb-track: #0F172A;    /* スレート系ダーク */
    --sb-thumb: #60A5FA;    /* 明るめブルー */
    --sb-thumb-hover: #93C5FD;
    --sb-corner: #111827;
  }
  html{ scrollbar-color: var(--sb-thumb) var(--sb-track); }
}

/* 動きが苦手な人配慮：アニメしない（念のため） */
@media (prefers-reduced-motion: reduce){
  *::-webkit-scrollbar-thumb{ transition: none; }
}


/* a：色は継承、下線は残して視認性確保。hoverは薄く。 */
a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  transition: opacity .2s ease;
}
a:hover { opacity: 0.85; }
/* ボタン風リンク等にはクラスで .no-underline を付けて解除してね */
a.no-underline { text-decoration: none; }

/* フォームの素性をそろえる */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}
button { cursor: pointer; }
textarea { resize: vertical; }

/* リストのマーカーはデフォで消す（必要な場で付ける） */
ul, ol { list-style: none; padding-left: 0; }

/* テーブルの枠線を自然に */
table { border-collapse: collapse; border-spacing: 0; }

/* フォーカスリング（アクセシブルに） */
:focus-visible {
  outline: 2px solid #2b7cff;
  outline-offset: 2px;
}

/* モーションを抑える設定に追従 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Layout Tokens & Utilities ===== */

:root{
  --container-max: 80rem;              /* だいたい1280px相当：必要に応じて調整 */
  --gutter: clamp(16px, 4vw, 40px);    /* 画面幅で可変する左右余白 */
}

/* 共通コンテナ：端からの余白＋最大幅で気持ちよく中央寄せ */
.container{
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

p + p { margin-top: 0.75em; }
h1, h2 { margin-block: .6em .4em; }

h2{
  font-size: 2.75rem;
}


p{
  font-size: 1.2rem;
}



/* フルブリードセクションのためのユーティリティ（任意） */
.section-bleed { padding-inline: var(--gutter); }
.section-bleed > .inner {
  width: min(100%, var(--container-max));
  margin-inline: auto;
}



/* 補助：スクリーンリーダー専用テキスト */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0;
}


/*///////////////////// HEADER /////////////////////////*/

/* ヘッダー（右上固定ボタン等のため） */
.site-header { 
  position: sticky;
  top: 0;
 /*  background-color: #F0F5FB; */
  background-color: #Fff;
  z-index: 1000;
  
 }

 .header-main{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 100px 16px 16px;
    border-bottom: solid 2px #0168B7;
    
 }

.site-header .head_logo{
  display: flex;
  align-items: center;
  color: #0168B7;
}

.site-header .head_logo .title{
  font-size:2rem;
  font-weight: bold;
}

.site-header .head_logo .title a{
  text-decoration: none;
}

.site-header .head_logo .prefecture-logo {
  margin-left: 8px;
}

.site-header .head_logo .prefecture-logo a{
   text-decoration: none;
   font-size: 0.8rem;
   text-align: center;
}

.site-header .head_logo .prefecture-logo img{
  width: 48px;
}

.header-main .head_menu{
  display: flex;
  align-items: center;
  
 }

.header-main .head_menu div a{
  padding: 8px 24px;
  border-radius: 36px;
  color: #0168B7;
  background-color: #F0F5FB;
  margin: 0 8px;
  font-weight: 800;
  text-decoration: none;
}

.header-main .head_menu .h_menu_join a{
  color: #fff;
  background-color: #F57B1E;
}


.site-header .mainmenu #pc-menu ul{
  display: flex;
  background-color: #D5E9FC;
  padding: 16px 100px;
  justify-content: flex-end;
  
}

.site-header .mainmenu #pc-menu ul li{
  margin: 0 16px;
}

.site-header .mainmenu #pc-menu ul li a{
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
}


.site-header .mainmenu #pc-menu ul li a:hover{
  text-decoration: underline;
}

/* サブを持つLIの基準点 */
.site-header .mainmenu #pc-menu li { position: relative; }

/* 1階層目のサブ（デフォ非表示） */
.site-header .mainmenu #pc-menu .maimmenu-sub {
  position: absolute;
  left: 0; top: 100%;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  border-radius: 8px;
  padding: 8px 0;
  margin: 0;
  list-style: none;

  /* 非表示状態 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 999; /* ヘッダー上に出す */
}

/* 2階層目以降（右に出す） */
.site-header .mainmenu #pc-menu .maimmenu-sub .maimmenu-sub {
  top: 0; left: 100%;
}

/* サブ内の各リンク見た目 */
.site-header .mainmenu #pc-menu .maimmenu-sub a {
  display: block;
  padding: 10px 16px;
  white-space: nowrap;
  text-decoration: none;
  color: #333;
  font-weight: 600; /* 少しだけ太め。不要なら外してOK */
}
.site-header .mainmenu #pc-menu .maimmenu-sub a:hover,
.site-header .mainmenu #pc-menu .maimmenu-sub a:focus {
  background: #F3F7FC;
  outline: none;
}

/* ホバー or キーボードフォーカスで開く（PC向け） */
.site-header .mainmenu #pc-menu li:hover > .maimmenu-sub,
.site-header .mainmenu #pc-menu li:focus-within > .maimmenu-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* サブを持つ親メニューにだけ矢印（:hasはChrome/Safari/Firefoxの現行でOK） */
.site-header .mainmenu #pc-menu li:has(> .maimmenu-sub) > a::after {
  content: "▾"; /* 下向き小三角。フォント依存を避けるなら▼でもOK */
  font-size: .9em;
  vertical-align: baseline;
}

/* 右に出る孫メニューがあるアイテムには▶を表示（任意） */
.site-header .mainmenu #pc-menu .maimmenu-sub li:has(> .maimmenu-sub) > a::after {
  content: "▶";
  float: right;
  opacity: .7;
}

/* サブメニューのULがトップのflex指定を引き継がないように明示（安全網） */
.site-header .mainmenu #pc-menu .maimmenu-sub { display: block; }
.site-header .mainmenu #pc-menu .maimmenu-sub li { margin: 0; }

/* スクロール前（現状のまま）…変更不要 */
@media (min-width: 769px){

/* スクロール後のコンパクト状態 */
.site-header.is-scrolled {
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
/* スクロール後のコンパクト状態（約1/2） */
.site-header.is-scrolled .header-main{
  padding: 6px 56px 6px 10px;  
}
.site-header.is-scrolled .head_logo .title{
  font-size: 1.25rem;        
}
.site-header.is-scrolled .head_logo .prefecture-logo img{
  width: 32px;                /* 県ロゴも連動して縮小 */
}

/* PCメニュー帯も少し薄く */
.site-header.is-scrolled .mainmenu #pc-menu ul{
   padding: 6px 56px; 
}
.site-header.is-scrolled .mainmenu #pc-menu ul li a{
  font-size: .95rem;            /* 1.1rem → 0.95rem */
}

/* ハンバーガーも小型化（約1/2） */
.site-header.is-scrolled .drawer_btn{
  top: 6px; right: 10px;
  width: 2.5rem; height: 2.5rem; /* 4rem → 2.5rem */
}
.site-header.is-scrolled .drawer_btn > span{
  width: 1.2rem; height: 2px;
}
.site-header.is-scrolled .drawer_btn > span:nth-of-type(1){ transform: translate(-50%, calc(-50% - .32rem)); }
.site-header.is-scrolled .drawer_btn > span:nth-of-type(3){ transform: translate(-50%, calc(-50% + .32rem)); }
}

#header-sentinel{
  height: 1px;      
  pointer-events: none;
}


@media (max-width: 768px){
  .site-header .head_logo .title{
    font-size: 1rem;   /* ← ここを調整 */
  }
}

@media (max-width: 480px){
  .site-header .head_logo .title{
    font-size: 0.9rem; /* さらに小端末でさらに調整 */
    line-height: 1.7rem;
  }
}
@media (max-width: 768px){
  .site-header .header-main{
    padding: 20px 16px; /* ← 上下を広げる（好みで調整OK） */
  }
}





/*================ TOP NEWS ================*/
/* top-news：上下ツートン */
.half-back{
  --top:    #eef3fa;  /* 上 */
  --bottom: #0168b7;  /* 下 */
  --split:  50%;      /* 分割位置（例：50% = ちょうど中央） */
  --feather: 0%;      /* 0%でカチッ、5%前後でふわっと */

  background:
    linear-gradient(
      to bottom,
      var(--top)    0 calc(var(--split) - var(--feather)),
      /* 境界をふわっとさせたい時だけ中間色を挟む */
      color-mix(in srgb, var(--top) 50%, var(--bottom) 50%) calc(var(--split) - var(--feather)) calc(var(--split) + var(--feather)),
      var(--bottom) calc(var(--split) + var(--feather)) 100%
    );
  --gutter: clamp(16px, 4vw, 48px);
  --content-max: 1200px;
  padding-block: clamp(24px, 4vw, 56px);
  padding-left: 80px;
  position: relative;
}

/* color-mix 非対応ブラウザのフォールバック（境界カチッ） */
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .half-back{
    background:
      linear-gradient(
        to bottom,
        var(--top) 0 var(--split),
        var(--bottom) var(--split) 100%
      );
  }
}

.half-back article{
  padding:40px;
  background:#fff;
  border-radius:48px 0 0 48px;
  display:flex;
  justify-content:center;
}

.half-back article .news-space{
  width: min(100%, 1200px);
  margin-inline: auto;
  position: relative;
  left: -80px;  /* ←親のpadding-leftを相殺して中央へ */
  display: flex;
}

#top-news article .news-space .t-news-left {
  width: 25%;
}

#top-news article .news-space .t-news-right {
  width: 75%;
}

#top-news article .news-space .t-news-left h2 span{
  color: #F57B1E;
  display: block;
  font-weight: normal;
  font-size: 2rem;
}


#top-news article .news-space .t-news-left .news-more a{
  display: flex;
  text-decoration: none;
  color: #0168B7;
  font-weight: bold;
  font-size: 1.2rem;
}

#top-news article .news-space .t-news-left .news-more a img{
  margin-left: 8px;
}

#top-news article .news-space .t-news-left .news-more a:hover{
  text-decoration: underline;
}


#top-news article .news-space .t-news-right li{
  width: 100%;
}

#top-news article .news-space .t-news-right li a{
  width: 100%;
  display: block;
  padding: 16px 32px;
  border: solid 2px #0168B7;
  border-radius: 16px;
  text-decoration: none;
  margin:8px 0;
  
}

#top-news article .news-space .t-news-right li a:hover{
  background-color: #0168B7;
  color: #fff;
}

#top-news article .news-space .t-news-right li a dl{
  display: flex;
}


#top-news article .news-space .t-news-right li a dl dt{
  width: 20%;
}
.news-list dl {
  display: flex;
  align-items: flex-start;
}

.news-list dt {
  flex-shrink: 0;          /* 日付部分の幅を固定して潰れないように */
  width: 7em;              /* 例：日付固定幅 */
  font-weight: bold;
}

.news-list dd {
  flex: 1;                 /* 残りを使う */
  overflow-wrap: anywhere; /* URLや英字を折り返す */
  word-break: break-word;
}


#top-news .news-img{
  position: absolute;
  bottom: 20px;
  left: 10%;
  
}

#top-support{
  display: flex;
  justify-content: center;
  padding: 80px 0;
  position: relative;
}


#top-support article{
  background-color: #0168B7;
  padding: 48px 0 0px;
  border-radius: 48px;
  color: #fff;
  display: grid;
  grid-template-columns: 100%;
  align-items: stretch;
  width: min(100%, 1200px);
}

#top-support article .t-support-left{
  display: flex;
  align-items: flex-end;
}


#top-support article .t-support-left img{
  border-radius: 0 0 0 48px;
}

#top-support article .t-support-right{
  padding: 0 32px;
}


#top-support article .t-support-right h2 span{
  display: block;
  font-weight: normal;
  font-size: 2rem;
}


#top-support article .t-support-right .support-more{
  margin:40px 0;
}

.more-button-b a{
  display: flex;
  text-decoration: none;
  color: #0168B7;
  font-weight: bold;
  font-size: 1.2rem;
  width: 320px;
  max-width: 100%;
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  border-radius:48px;
  padding: 6px 8px 6px 32px;
  border: solid 1px #ccc;
}

.t-news-right .more-button-b {
  display:flex;
  justify-content: flex-end;
}


@media (max-width: 768px){
.t-news-right .more-button-b {
  justify-content: center;
  margin: 24px 0;
}

}






#top-support .support-img1{
  margin-bottom: 80px;
  
}

#top-support .support-img2{
  position: absolute;
  bottom: 20px;
  right: 30%;
  
}

#top-support .support-banner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap-reverse;
}

#top-support .support-banner .link_button img{
  height: 72px;
}

@media (max-width: 768px){
  #top-support .support-banner{
  margin-top: 40px;
  justify-content: center;
  }
}





#top-interview article{
  width: min(100%, 1200px);
  margin: 0 auto;
}

#top-interview article h2{
  color: #0168B7;
}

#top-interview article h2 span{
  color: #F57B1E;
  display: block;
  font-weight: normal;
  font-size: 2rem;
}

#top-interview .top-interview-box{
  display: grid;
  grid-template-columns: 60% 40%;
  margin-bottom: 40px;
}

#top-interview .top-interview-box .top-interview_right{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.half-back article .corp-space{
  width: min(100%, 1200px);
  margin-inline: auto;
  position: relative;
  left: -80px;  /* ←親のpadding-leftを相殺して中央へ */
}

#top-corp{
  position: relative;
}


#top-corp article h2{
  color: #0168B7;
  text-align: center;
}

#top-corp article h2 span{
  color: #F57B1E;
  display: block;
  font-weight: normal;
  font-size: 2rem;
}


#top-corp article .corp-more{
  display: flex;
  justify-content: center;
}


#top-corp .corp-img1{
  position: absolute;
  top: 30px;
  left: 20%;
}

#top-corp .corp-img2{
  position: absolute;
  bottom: 60px;
  right: 20%;
}


#top-join{
  padding: 80px 0;
}


#top-join article{
  width: min(100%, 1200px);
  margin: 0 auto;
  background-color: #fff;
  padding: 24px;
  border-radius: 60px;
}


#top-join article h2{
  color: #0168B7;
}

#top-join article h2 span{
  color: #F57B1E;
  display: block;
  font-weight: normal;
  font-size: 2rem;
}


#top-join article .top-join-left, #top-join article .top-join-right{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

#top-join article .top-join-left{
  justify-content: flex-start;
}

#top-join article .top-join-left img, #top-join article .top-join-right img{
  width: 100%;
}


#top-join article .top-join-middle{
  padding: 0 48px;
}

#top-join article .top-join-middle .t-corp-more{
  margin: 80px 0;
}


#top-join article .top-join-middle .join-img{
  display: flex;
  justify-content: flex-end;
}

footer{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
  background-color: #0168B7;
  color: #fff;
  padding-top: 24px;
}

footer #footer1{
  display: grid;
  grid-template-columns: 45% 55%;
  width: min(100%, 1200px);
}

footer #footer1 .footer-logo div{
  display: flex;
  align-items: center;
}

footer #footer1 .footer-logo div p{
  font-size:2rem;
  font-weight: bold;
  margin-right: 8px;
}

footer #footer1 .footer-logo div a{
  text-decoration: none;
}

footer #footer1 .footer-logo div .foot-pref a{
   text-decoration: none;
   font-size: 0.8rem;
   text-align: center;
}

footer #footer1 .footer-logo div img{
  width: 48px;
}

footer #footer1  .footer-logo .address{
  font-size: 0.9rem;
}

.footer-button div{
  margin: 40px 0;
}


.footer-button div a{
  padding: 8px 24px;
  border-radius: 36px;
  color: #0168B7;
  background-color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.footer-button .f_join a{
  color: #fff;
  background-color: #F57B1E;
}

.footer-right ul{
  display: flex;
  flex-wrap: wrap;

}

.footer-right ul li{
  width: 33%;
  margin-bottom: 24px;
}


footer #footer2{
  
  text-align: center;
  width: 100%;
  padding: 8px 0;
  color: #fff;
}

/* SP時：フッターの左右ガターをゼロ、幅は100%に */
@media (max-width: 768px){
  footer{
    padding-inline: 0;            /* ← ここを上書き */
  }
  footer #footer1{
    width: 100%;                  /* ← ここも上書き */
  }
}






/* =========================
   Responsive Overrides
   （style.css の末尾に追加）
   ========================= */

/* 共通トークン（なければ使われる） */
:root{
  --content-max: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 48px;
}

/* タイポを流体に（固定値を自然スケールへ） */
h2{ font-size: clamp(1.5rem, 2vw + 0.8rem, 2.25rem); line-height: 1.3; }
p { font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem); }

/* ================= HEADER ================= */
/* メインヘッダーのパディングを段階的に圧縮 */
@media (max-width: 1200px){
  .header-main{ padding: 16px 56px 16px 16px; }
  .site-header .mainmenu #pc-menu ul{ padding: 16px 56px; }
}
@media (max-width: 1024px){
  .header-main{ padding: 12px 32px 12px 16px; flex-wrap: wrap; row-gap: 12px; }
  .site-header .mainmenu #pc-menu ul{ padding: 12px 24px; }
  .header-main .head_menu{ flex-wrap: wrap; gap: 8px; }
  .header-main .head_menu div a{ margin: 0; padding: 8px 16px; }
}
@media (max-width: 640px){
  .site-header .head_logo .title{ font-size: 1.5rem; }
  .site-header .head_logo .prefecture-logo img{ width: 40px; }
}

/* ================= TOP NEWS ================= */
/* PCでは既存レイアウトを維持。ブレークポイントで段階的に調整 */
@media (max-width: 1200px){
  .half-back article{ padding: clamp(32px, 6vw, 80px); }
  #top-news article .news-space{ width: min(100%, 1000px); }
}

/* 左80pxレーンを少し細く */
@media (max-width: 1024px){
  .half-back{ padding-left: 48px; }
  .half-back article .news-space{ left: -48px; }
  #top-news article .news-space .t-news-left{ width: 40%; }
  #top-news article .news-space .t-news-right{ width: 60%; }
}

/* タブレット以下：1カラム化して中央に寄せ、直下画像も追従 */
@media (max-width: 768px){
  .half-back{
    padding: 0;
    display: block;
  }
  .half-back article{
    border-radius: 0; 
    padding: clamp(20px, 5vw, 32px);
  }
  .half-back article .news-space{
    position: static;                /* left相殺をやめる */
    width: 100%;
    display: block;
  }
  #top-news article .news-space .t-news-left,
  #top-news article .news-space .t-news-right{
    width: 100%;
  }
  /* ニュースの各行は詰め気味に */
  #top-news article .news-space .t-news-right li a{ padding: 12px 16px; }

  /* 直下の画像を article の“下に”素直に置く */
  #top-news .news-img{
    position: static;
    width: 100%;
    margin-top: 12px;
  }
  #top-news .news-img img{
    width: 100%;
    border-radius: 0 0 24px 24px;
    display: block;
  }
}

/* ================= TOP SUPPORT ================= */
@media (max-width: 1200px){
  #top-support article{ width: min(100% - 2*var(--gutter), var(--content-max)); }
}
@media (max-width: 1024px){
  #top-support article{ grid-template-columns: 4fr 6fr; }
}
@media (max-width: 768px){
  #top-support{ padding: 48px 0; }
  #top-support article{
    grid-template-columns: 1fr;
    row-gap: 16px;
    border-radius: 32px;
    padding: 32px 0 0;
    width: 100%;
  }
  #top-support article .t-support-left img{
    width: 100%;
    height: auto;
    border-radius: 16px;
  }
  #top-support article .t-support-right{ padding: 0 16px 16px; }
}

/* ================= TOP INTERVIEW ================= */
@media (max-width: 1200px){
  #top-interview article{ width: min(100% - 2*var(--gutter), var(--content-max)); }
}
@media (max-width: 1024px){
  #top-interview .top-interview-box{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  #top-interview .top-interview-box{ grid-template-columns: 1fr; row-gap: 16px; }
  #top-interview .top-interview-box .top-interview_right{ justify-content: center; }
}

/* ================= TOP CORP ================= */
@media (max-width: 1024px){
  .half-back article .corp-space{ width: min(100% - 2*var(--gutter), var(--content-max)); left: 0; }
}
@media (max-width: 768px){
  #top-corp{ padding-inline: var(--gutter); }
  #top-corp .corp-img1,
  #top-corp .corp-img2{
    position: static;       /* 絶対配置を解除して回り込みを防ぐ */
    display: block;
    margin: 12px auto;
    max-width: 80%;
  }
  #top-corp .corp-img1 img, #top-corp .corp-img2 img{
    width: 80px;
  }

}

/* ================= TOP JOIN ================= */
@media (max-width: 1200px){
  #top-join articl{ width: min(100% - 2*var(--gutter), var(--content-max)); }
}

/* ================= FOOTER ================= */
@media (max-width: 1200px){
  footer #footer1{ width: min(100% - 2*var(--gutter), var(--content-max)); }
}
@media (max-width: 1024px){
  footer #footer1{ grid-template-columns: 1fr 1fr; }
  .footer-right ul li{ width: 50%; }
}
@media (max-width: 768px){
  footer{ padding-inline: var(--gutter); }
  footer #footer1{ grid-template-columns: 1fr; row-gap: 16px; }
  .footer-right ul li{ width: 100%; }
}
@media (max-width: 560px){
  footer #footer1 .footer-logo div p{ font-size: 1.5rem; }
}

@media (min-width: 769px){
  .pc{
    display: block;
  }

  .sp{
    display: none;
  }
}


@media (max-width: 768px){
  .pc{
    display: none !important;
  }
  .sp{
    display: block;
  }


  .half-back article .news-space{
    position: static;
    left: 0;
    display: block;
  }

  #top-news article .news-space .t-news-right li a dl{
    display: block;
  }


  #top-news article .news-space .t-news-right li a dl dt{
    width: 100%;
  }

  #top-news article .news-space .t-news-left h2 span{
  font-size: 1rem;
}

}

/* ================= LOWER ================= */

.breadcrumbs{
  --bc-text: #475569;         /* 文字 */
  --bc-accent: #0168B7;       /* リンク色（サイト基調色に合わせてる） */
  --bc-sep: #90A4B8;          /* 区切りアイコン色 */
  font-size: clamp(.9rem, .3vw + .85rem, 1rem);
  line-height: 1.6;
  overflow-x: auto;            /* モバイルで溢れたら横スクロール */
  -webkit-overflow-scrolling: touch;
}
.breadcrumbs ul{
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; margin: 0; list-style: none;
  gap: .25rem .5rem;
}
.breadcrumbs li{
  display: inline-flex; align-items: center; color: var(--bc-text);
}

/* 区切りアイコン（FAの chevron-right）を擬似要素で */
.breadcrumbs li + li::before{
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  content: "\f105";                /* chevron-right */
  font: var(--fa-font-solid);      /* Font Awesome 6 Solid を使う */
  color: var(--bc-sep);
  margin: 0 .4rem;
  opacity: .9;
}

.breadcrumbs a{
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--bc-accent); text-decoration: none; font-weight: 600;
}
.breadcrumbs a:hover{ text-decoration: underline; }

/* 先頭のHOMEアイコンちょい小さめ */
.breadcrumbs i.fa-house{ font-size: .95em; margin-right: 8px;}

/* 現在ページはリンクにしない＆長文は省略（スマホ対策） */
.breadcrumbs .is-current{ color: var(--bc-text); font-weight: 600; }
.breadcrumbs .is-current span{
  max-width: clamp(120px, 28vw, 420px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* フォーカスリング（アクセシブルに） */
.breadcrumbs a:focus{ outline: none; }
.breadcrumbs a:focus-visible{
  outline: 2px solid var(--bc-accent);
  outline-offset: 2px; border-radius: 6px;
}




#lower section{
  background-color: #fff;
  width: min(100%, 1200px);
  margin: 0 auto;
  border-radius: 24px;
  padding: 24px;

}

.h1--badge .h1__badge{
  display:inline-grid; place-items:center;
  width:2.2em; height:2.2em; 
  color:var(--brand);
  --bar-from: color-mix(in srgb, var(--brand) 65%, #ffffff);
  --bar-to:   #D5E9FC;
}

.h1--badge.bar-mint { --bar-from:#0EA5E9; --bar-to:#67E8F9; }

.h1--badge .fa{ 
  color:var(--accent);
  font-size: 2.2rem;
}
.h1--badge{ 
  position:relative; 
  margin-bottom: 40px;
  font-size: 2rem;
}
.h1--badge::after{
  content:""; position:absolute; left:0; right:0; bottom:-.35em;
  height:.16em; border-radius:999px;
  background: linear-gradient(90deg, var(--bar-from), var(--bar-to));
  opacity:.9;
}




/* 2) 汎用リンクの見た目（任意：強調） */
.table a{ color:#0168B7; font-weight:800; text-decoration:none; }
.table a:hover{ text-decoration:underline; }


/* 8) サマリー（3列） */
.table--summary th, .table--summary td{ text-align:center; }
.table--summary td:first-child{ text-align:left; font-weight:800; }


/* 細かい余白（改行の詰まり防止） */
.table td br{ content:""; display:block; margin-bottom:2px; }

.about-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.about-table th,
.about-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #ddd;
}

.about-table th {
  background: #f6f7fb;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

/* ===== スマホで「カード型」に変形 ===== */
@media (max-width: 640px) {
  .about-table thead {
    display: none;
  }

  .about-table, .about-table tbody {
    border: none !important;
  }

  .about-table tr {
    display: block;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  }

  .about-table td {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border: none;
  }

  .about-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #444;
    margin-right: 12px;
    white-space: nowrap;
  }
}


/* お好みで：モバイルはちょい小さめ */
@media (max-width: 640px){
  .h1{ font-size: clamp(1.25rem, 3.5vw + .9rem, 1.6rem); }
}

.table{
  width: 100%; 
  border: 1px solid #e8eef6;
  border-collapse: collapse; 
  font-size: clamp(.95rem, .3vw + .85rem, 1rem);
}
.table th, .table td{
  padding: .75rem 1rem; 
  border-bottom: 1px solid #e8eef6;
}
.table th{
  position: sticky; top: 0; z-index: 1;
  background: #F3F8FF; color:#0b1b2b; font-weight: 700;
  width: 25%;
  text-align: left;
}


.table-pump {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-top: 1rem;
}

.table-pump caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  margin-bottom: .5rem;
}

.table-pump th,
.table-pump td {
  padding: 10px 12px;
  border-bottom: 1px solid #e1e1e1;
}

.table-pump thead th {
  background: #f6f7fb;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.table-pump tbody tr:nth-child(even) {
  background: #fafbff;
}

.table-pump a {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .table-pump {
    border: 0;
    font-size: 0.9rem;
  }

  .table-pump thead {
    display: none; /* 見出し行は消して、td::before に移す */
  }

  .table-pump tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.04);
  }

  .table-pump tbody tr:last-child {
    margin-bottom: 0;
  }

  .table-pump td {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border: none;
  }

  .table-pump td::before {
    content: attr(data-label); /* ★ ここにヘッダ名を出す */
    flex: 0 0 5.5em;
    font-weight: 700;
    color: #555;
    white-space: nowrap;
  }

  /* 最初・最後の行だけ余白整える */
  .table-pump td:first-child {
    padding-top: 0;
  }
  .table-pump td:last-child {
    padding-bottom: 0;
  }

  /* 複数リンク時も読みやすくする */
  .table-pump td a {
    display: inline-block;
    margin-top: 2px;
  }
  .table-pump td a:first-child {
    margin-top: 0;
  }
}


.table-event {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.95rem;
}

.table-event th,
.table-event td {
  padding: 10px 12px;
  border-bottom: 1px solid #e1e1e1;
}

.table-event th {
  background: #f6f7fb;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .table-event {
    border: 0;
    font-size: 0.92rem;
  }
  /* 1行目（時期） */
  .table-event td:nth-child(1) {
    width: 30%;
  }

  /* 2行目（行事内容） */
  .table-event td:nth-child(2)::before {
    
  }

}



/* ============================================================ */



.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }



/* ===== shobodan detail prev/next nav ===== */

.shobodan-detail-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 12px;
}

.shobodan-detail-nav .nav-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:700;
  text-decoration:none;
  border:1px solid var(--bord);
  background:#fff;
  color: var(--brand);
  transition: background .12s ease, box-shadow .15s ease, transform .06s ease;
}
.shobodan-detail-nav .nav-btn i{ font-size:.9rem; }

.shobodan-detail-nav .nav-btn--prev i{ margin-right:2px; }
.shobodan-detail-nav .nav-btn--next i{ margin-left:2px; }

.shobodan-detail-nav .nav-btn--list{
  border-style:dashed;
  opacity:.9;
}

.shobodan-detail-nav .nav-btn:hover{
  background: color-mix(in srgb, var(--brand) 7%, #fff);
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.shobodan-detail-nav .nav-btn:active{ transform:translateY(1px); }

/* スマホでは縦積み＆中央寄せ */
@media (max-width: 640px){
  .shobodan-detail-nav{
  gap:4px;
}
.shobodan-detail-nav .nav-btn{
  gap:4px;
  padding:6px 6px;
  border-radius:999px;
  font-size:.8rem;
}
  .shobodan-detail-nav{
    justify-content:center;
  }
}

/* =========================
   消防団詳細：画像サムネイル
   ========================= */

.shobodan-detail-img{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
  justify-content: center; 
}

/* サムネイル本体：9:16 の縦長比率 */
.shododan-thumb{
  flex: 0 1 220px;       /* 横幅（必要なら調整：180〜220が最適） */
  aspect-ratio: 4 / 6;  /* ← 縦長比率を強制 */
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;      /* トリミング */
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* サムネイル画像：高さを基準にトリミングする */
.shododan-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* cover → 必要部分だけ切り抜く */
  display: block;
  
}

.shobodan-detail-button{
  list-style:none; margin:24px 0; padding:16px;
  display:grid; grid-template-columns:1fr; gap:12px;
}
@media (min-width:640px){
  .shobodan-detail-button{
    grid-template-columns:repeat(2, minmax(220px,1fr));
    align-items:stretch;
  }
}
.shobodan-detail-button li{ display:contents; }

.shobodan-detail-button a{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; min-height:52px; padding:12px 20px;
  border-radius:999px; font-weight:800; text-decoration:none;
  border:2px solid transparent; transition:
    transform .06s ease, box-shadow .15s ease,
    background-color .15s ease, color .15s ease, border-color .15s ease;
}
.shobodan-detail-button a i{ font-size:1.1em; line-height:1; }

/* 主CTA：入団／問い合わせ（オレンジ塗り） */
.shobodan-detail-button .btn-join{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.shobodan-detail-button .btn-join i{ color:#fff; }
.shobodan-detail-button .btn-join:hover{
  filter:saturate(1.02);
}
.shobodan-detail-button .btn-join:active{ transform:translateY(1px); }

/* 副CTA：活動の様子（ブルーのアウトライン） */
.shobodan-detail-button .btn-activity{
  background:#fff; color:var(--brand); border-color:var(--brand);
}
.shobodan-detail-button .btn-activity i{ color:var(--brand); }
.shobodan-detail-button .btn-activity:hover{
  background:color-mix(in srgb, var(--brand) 8%, #fff);
}
.shobodan-detail-button .btn-activity:active{ transform:translateY(1px); }

/* フォーカスリング（アクセシブル） */
.shobodan-detail-button a:focus{ outline:none; }
.shobodan-detail-button a:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand) 45%, #ffffff);
  outline-offset:2px;
}





.introduction-search{
  background: var(--bg);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 16px;
}

.intro-grid{
  display: grid;
  grid-template-columns: 1fr; 
  gap: 12px 16px;
}

/* ラベル:項目の2カラムは維持 */
.form-row{
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  gap: 8px 16px;
}
.form-row dt{ color:#334155; font-weight:700; margin:0; }
.form-row dd{ margin:0; }

/* dd 内のセレクト群を横並び＆折り返し可能に */
.form-row dd{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px; /* 行間と列間 */
}

/* ハイフンは小さく */
.form-row dd .sep{ opacity:.6; }

select{ appearance: none; 
  width: 100%; 
  min-height: 44px; 
  padding: 10px 14px; 
  border: 2px solid var(--bord); 
  border-radius: 12px; 
  background: linear-gradient(#fff,#fff) padding-box, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%231068b7' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center / 18px 18px; 
  color: var(--ink); font: inherit; 
  transition: border-color .15s ease, box-shadow .15s ease; 
}

/* コア: 「最小〜理想〜最大」を clamp で指定して、状況に応じて気持ちよく縮む */
.select-min{
  flex: 1 1 auto;                   /* 伸縮OK */
  inline-size: clamp(120px, 22%, 200px);
  /* 22% は4個横並びの時にちょうど良い余白感。必要なら微調整 */
}

/* --- レスポンシブ --- */

/* タブレット以下：2列×2段に（ハイフンは中央の1セルぶんに） */
@media (max-width: 768px){
  .form-row{
    grid-template-columns: 160px 1fr;
  }
  .form-row dd{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    gap: 8px 12px;
  }
  .select-min{
    inline-size: auto; /* グリッドに任せる */
  }
  .form-row dd .sep{
    grid-column: 1 / -1; /* 改行して中央に */
    justify-self: center;
  }

  .shobodan-detail table th, .shobodan-detail table td, .shobodan-detail table tr{
    display: block;
    width: 100%;
}



}

/* スマホ：縦一列に積む（読みやすさ優先） */
@media (max-width: 480px){
  .form-row{
    grid-template-columns: 1fr; /* ラベルを上、フィールドを下 */
  }
  .form-row dt{ margin-bottom: 4px; }
  .form-row dd{
    grid-template-columns: 1fr; /* 1列 */
  }
  .form-row dd .sep{
    display: none; /* ハイフンは省略 or 必要なら小さな区切り線に */
  }
}

select:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 60%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, #fff);
}

.form-actions{
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 4px;
}

.btn{
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  border: 2px solid transparent;
  background: var(--brand);
  color: #fff;
  transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ box-shadow: 0 6px 18px rgba(1,104,183,.18); }
.btn:active{ transform: translateY(1px); }

.btn.ghost{
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);
}
.btn.ghost:hover{ background: color-mix(in srgb, var(--brand) 8%, #fff); }

.btn.line{
  background: #fff;
  color: #0b1b2b;
  border-color: var(--bord);
}
.btn.line:hover{ background:#f8fbff; }

.sr-only{
  position:absolute !important;
  width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;
  clip: rect(0,0,1px,1px); border:0;
}

/* 横幅があるときは横並びに */
@media (min-width: 720px){
  .intro-grid{ grid-template-columns: 1fr; }
  .form-actions{ justify-content: flex-end; }
}

/* スマホは1列 */
@media (max-width: 640px){
  .form-row{ grid-template-columns: 1fr; }
  .form-actions{ justify-content: stretch; }
  .form-actions .btn{ flex: 1 1 auto; text-align: center; }
}

/* ===== レイアウト：PC=3列 / タブ=2列 / SP=1列 ===== */
.introduction-box{
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(3, 1fr); /* 3列固定 */
  justify-items: center;                  /* 各セル内で中央寄せ（カード幅を効かせる） */
  margin-top: 40px;
}

/* ブレークポイント */
@media (max-width: 1024px){
  .introduction-box{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .introduction-box{ grid-template-columns: 1fr; }
}

/* ===== 1件だけのとき：中央の列（3列時は列2）に配置 ===== */
.introduction-box:has(> .introduction-detail:only-child) > .introduction-detail{
  grid-column: 2; /* 3列時の中央 */
}
/* 2列以下の時は自然に中央寄せされるのでそのまま */

/* ===== カード本体 ===== */
.introduction-detail{
  width: 100%;
  max-width: 420px;            /* カードの最大幅を統一 */
  display:flex; flex-direction:column;
  background: var(--card);
  border: 1px solid var(--bord);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  margin-bottom: 24px;
}
.introduction-detail:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
  border: solid 2px color-mix(in srgb, var(--brand) 100%, var(--bord));
}
/* メディア枠：16:9で統一（中身はcover） */
.introduction-detail-img{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f2f6fb;
  overflow: hidden;
}
.introduction-detail-img img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* YouTube / Instagram の埋め込みを完全フィット */
.introduction-detail-img iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* テキストブロックをクリック領域に */
.introduction-detail > a{
  display:block;
  padding: 12px 14px 16px;
  color: var(--ink);
  text-decoration: none;
}

/* 日付・タイトル・本文 */
.introduction-detail > a p:first-of-type{
  color:#64748b; font-weight:700;
  font-size: .9rem; margin: 2px 0 4px;
}
.introduction-detail > a h2{
  font-size: clamp(1.05rem, .6vw + 1rem, 1.25rem);
  line-height: 1.35; margin: 0 0 6px;
  color: var(--brand);
}
.introduction-detail > a p:last-of-type{
  font-size: 1rem; color:#334155; margin: 0;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* 2行で省略 */
}

/* フォーカス（キーボード操作ケア） */
.introduction-detail > a:focus{ outline: none; }
.introduction-detail > a:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--brand) 35%, #fff);
  outline-offset: 4px; border-radius: 12px;
}

/* モバイルでの“押しやすさ”ちょい強化 */
@media (max-width: 640px){
  .introduction-detail > a{ padding: 12px; }
}

.introduction-details h1{
  line-height: 1.15; 
  padding: 0;
}


/* 施設名 */
.h1.h1--badge .shobodan-name {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--brand);
  font-weight: 600;
}

/* 日付 */
.h1.h1--badge .event-date {
  font-size: 1.5rem;
  color: var(--text-sub);
  opacity: 0.85;
}


:root{
  --gap: 16px;           /* スライド間の余白 */
  --perView: 1;          /* 1画面に見せる枚数（PC） */
}


/* ラッパ */
.slider{
  background: var(--card);
  border:1px solid var(--bord);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  padding:0px;
  margin: 0;
}
.slider-controls{ display:flex; gap:8px; }
.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--brand);

  background: rgba(255,255,255,0.9); /* ★ 白9割：視認性と上品さのバランス */
  backdrop-filter: blur(4px);        /* ★ 画像上でも浮く */
  color: var(--brand);

  font-weight: 800;
  cursor: pointer;
  font-weight: bold;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    opacity .2s ease;
}

.slider-btn:hover {
  background: var(--brand);
  color: #fff;
}

.slider-btn:disabled{ opacity:.35; cursor:not-allowed; }

/* ビューポート（横スクロール＋スナップ） */
.slider-viewport{
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider-viewport::-webkit-scrollbar{ display:none; }

/* トラック */
.slider-track{
  display:flex; 
  padding: 0px; margin: 0; list-style: none;
}

/* スライド：幅は“1画面の枚数”で割る */
.slide{
  flex: 0 0 calc( (100% - (var(--gap) * (var(--perView) - 1))) / var(--perView) );
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* メディア枠：16:9統一、中身はフィット */
.media{
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background:#f2f6fb; border-radius:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.media img, .media iframe{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; border:0; display:block;
}
.slider-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
}

#introSlider{
  margin: 0;
  padding: 0;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  background: #fff;
  color: var(--brand);
  font-weight: 800;
}

.slider-btn.prev {
  left: 8px;
}

.slider-btn.next {
  right: 8px;
}

.slider-counter {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 4px 10px;
  font-size: 0.85rem;
  border-radius: 8px;
  z-index: 20;
  pointer-events: none;
}



/* レスポンシブ：タブレット=2枚、モバイル=1枚 */
@media (max-width: 1024px){ :root{ --perView: 2; } }
@media (max-width: 640px){  :root{ --perView: 1; } }

.introduction-detail-text{
  margin-top: 24px;
}

/* ========= About メニュー（カードグリッド） ========= */
.about-menu ul{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.about-menu li a{
  display: block;
  background: #fff;
  border: 1px solid #e6eef6;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #0b1b2b;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  transition: transform .10s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  height: 100%;
}

/* 画像：正方形でも 16:9 にトリミングして“下の方”を見せる */
.about-menu li a > img{
  display: block;
  width: 100%;
  height: auto;                 /* aspect-ratio と併用で高さが決まる */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 80%;     /* ← 少し下を優先表示（好みで 70〜90%） */
  background: #f2f6fb;          /* ローディング中の下地 */
}

/* タイトル */
.about-menu li a > span{
  display: block;
  padding: 12px 14px 16px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(1rem, 0.2vw + .95rem, 1.1rem);
  line-height: 1.35;
  color: #0168B7;
}

/* ホバー／フォーカスでふわっと */
.about-menu li a:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
  border-color: rgba(1,104,183,.28);
}
.about-menu li a:focus{ outline: none; }
.about-menu li a:focus-visible{
  box-shadow: 0 0 0 3px rgba(1,104,183,.25), 0 12px 28px rgba(0,0,0,.10);
}

/* スマホでの押しやすさちょい強化 */
@media (max-width: 640px){
  .about-menu ul{ gap: 12px; }
  .about-menu li a > span{ padding: 10px 12px 14px; }
}

/* ========= 本文ボックス（影なし） ========= */

/* 見出し */
.main-lower-textbox h2{
  position:relative;
  margin: 1.2em 0 .6em;
  padding-left:.8em;
  font-size:clamp(1.15rem, 1.1vw + 1rem, 1.6rem);
  line-height:1.35;
  color:#0168B7;
  font-weight:800;
}
.main-lower-textbox h2:first-child{ margin-top:0; }
.main-lower-textbox h2::before{
  content:"";
  position:absolute; left:0; top:.15em; bottom:.15em;
  width:6px; border-radius:6px;
  background:linear-gradient(180deg, #4fb1ff, #0168B7);
}

.main-lower-textbox h3{
  margin:1.1em 0 .5em;
  padding-left:.55em;
  border-left:4px solid #cfe1f5;
  font-weight:800;
  color:#0b1b2b;
  font-size:clamp(1.05rem, .5vw + 1rem, 1.25rem);
}

/* テキスト・リンク */
.main-lower-textbox p{ margin:0 0 .9em; line-height:1.9; font-size:1rem; }
.main-lower-textbox a{
  color:#0168B7; font-weight:800; text-decoration:none;
  text-underline-offset:.18em; text-decoration-thickness:.08em;
}
.main-lower-textbox a:hover{ text-decoration:underline; }
.main-lower-textbox .fa-file-pdf{ color:#dc2626; margin:0 .35em 0 .1em; }
.main-lower-textbox .text-bold{ font-weight:800; }

.main-lower-textbox .search-site a img{
  border: solid 1px;
  border-color: var(--brand);
  padding: 0;
  margin: 0;
}



/* 画像ボックス */
.main-lower-textbox .content-img{ margin:.6em 0 1.1em; }
.main-lower-textbox .content-img img{
  display:block; max-width:100%; height:auto;
}

/* ========= 表（共通） ========= */
.main-lower-textbox table{
  width:100%;
  border:1px solid #0168B7; 
  border-collapse::collapse;
  margin:.4em 0 1.1em;            /* 角丸の視覚補助 */
}

.main-lower-textbox table tr{
  border:1px solid #0168B7;
}

/* 行スタイル */
.main-lower-textbox table th,
.main-lower-textbox table td{
  padding:12px 14px;
  border:1px solid #497dc5;
  vertical-align:top;
  word-break: break-word;
  font-size:.98rem;
}
.main-lower-textbox table th{
  background: #d3e5fc;
  font-weight:600;
}
/* セル内の箇条書き */
.main-lower-textbox table .list-style-circle{
  list-style:none; padding-left:0; margin:.25em 0 0;
}
.main-lower-textbox table .list-style-circle li{
  position:relative; padding-left:1.1em; margin:.25em 0; line-height:1.7;
}
.main-lower-textbox table .list-style-circle li::before{
  content:""; position:absolute; left:.2em; top:.62em;
  width:.42em; height:.42em; border-radius:999px; background:#0168B7;
}


/* 細かい余白のレスポンシブ調整 */
@media (max-width: 640px){
  .main-lower-textbox{ border-radius:12px; }
  .main-lower-textbox h2::before{ width:5px; }
}


.thanks-shopnum{
  width: 50%;
}




/* ========== Q&A========== */

/* ============================
   Q&A アンカー ナビゲーション
   ============================ */

.main-lower-textbox.about-qa [id] {
  scroll-margin-top: 200px;
}



.main-lower-textbox .qa-menu {
  margin: 32px 0 40px;
}

.main-lower-textbox .qa-menu ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各リンクカード */
.main-lower-textbox .qa-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e6eef6;
  border-radius: 14px;
  text-decoration: none;
  color: #0b1b2b;
  font-weight: 700;
  transition: box-shadow .18s ease, border-color .18s ease, transform .08s ease;
}

/* ホバー（他UIと統一） */
.main-lower-textbox .qa-menu li a:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color: rgba(1,104,183,.28);
  transform: translateY(-1px);
}

/* Q番号の丸バッジ */
.main-lower-textbox .qa-menu li a span {
  display: grid;
  place-items: center;
  min-width: 2.6em;
  height: 2.6em;
  background: #0168B7;
  color: #fff;
  font-weight: 900;
  border-radius: 999px;
  font-size: .95rem;
}

/* テキスト */
.main-lower-textbox .qa-menu li a {
  font-size: 1rem;
  line-height: 1.45;
}

/* スマホ調整 */
@media (max-width: 640px) {
  .main-lower-textbox .qa-menu ul {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .main-lower-textbox .qa-menu li a {
    padding: 12px 16px;
  }
  .main-lower-textbox .qa-menu li a span {
    min-width: 2.3em;
    height: 2.3em;
  }
}






/* 各Q&Aブロック */
.main-lower-textbox.about-qa dl{
  background:#fff;
  border:1px solid #e6eef6;
  border-radius:14px;
  overflow:hidden;
}
.main-lower-textbox.about-qa dl + dl{ margin-top:16px; }

/* 質問行 */
.main-lower-textbox.about-qa dt{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background: linear-gradient(0deg, #f6faff 0, #ffffff 100%);
  border-bottom:1px solid #eaf0f7;
  color:#0b1b2b;
  font-weight:800;
  line-height:1.4;
}
.main-lower-textbox.about-qa dt > span{
  display:grid; place-items:center;
  width:2.4em; height:2.4em;
  border-radius:999px;
  background:#0168B7; color:#fff;
  font-weight:900; font-size:.95rem;
  letter-spacing:.3px;
}

/* 回答行 */
.main-lower-textbox.about-qa dd{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px 16px;
  padding:16px;
}
.main-lower-textbox.about-qa dd > span{
  grid-row:1; grid-column:1;
  display:grid; place-items:center;
  width:2.4em; height:2.4em;
  border-radius:999px;
  background:#F57B1E; color:#fff;
  font-weight:900; font-size:.95rem;
}
.main-lower-textbox.about-qa dd > *:not(span){ grid-column:2; }

/* テキスト & リンク */
.main-lower-textbox.about-qa dd p{
  margin:4px 0 10px;
  font-size:1rem;
  line-height:1.85;
  color:#0b1b2b;
}
.main-lower-textbox.about-qa a{
  color:#0168B7; font-weight:800; text-decoration:none;
  text-underline-offset:.18em; text-decoration-thickness:.08em;
}
.main-lower-textbox.about-qa a:hover{ text-decoration:underline; }

/* サブ見出し（参考など） */
.main-lower-textbox.about-qa dd h3{
  grid-column:2;
  margin:12px 0 8px;
  font-size:1.15rem; color:#0b1b2b;
}
.main-lower-textbox.about-qa dd h4{
  grid-column:2;
  margin:10px 0 6px;
  font-size:1.05rem; color:#334155;
}

/* 画像＋キャプション */
.main-lower-textbox.about-qa .qa-img{ grid-column:2; margin:8px 0 12px; }
.main-lower-textbox.about-qa .qa-img img{
  display:block; max-width:640px; height:auto;width: 100%;
}

.main-lower-textbox.about-qa .qa-img2 img{
  display:block; max-width:320px; height:auto;width: 100%;
}
.qa-caption{
  display:block; margin-top:6px; font-size:.85rem; color:#64748b;
}

/* PDFリンク行（現在のマークアップに合わせたフレックス） */
.main-lower-textbox.about-qa .file-link{
  grid-column:2;
  display:flex; align-items:center; gap:8px;
  width:fit-content;
  background:#f8fbff;
  border:1px dashed #cfe1f5;
  border-radius:12px;
  padding:10px 12px; margin:8px 0;
}

.file-link li {
  display: block !important;
  margin-bottom: 0.8rem;
}


.main-lower-textbox.about-qa .file-link .fa-file-pdf{ color:#dc2626; font-size:1.1rem; }
.main-lower-textbox.about-qa .file-link a{ color:#0168B7; font-weight:800; }

/* テーブル（影なし） */
.main-lower-textbox.about-qa table{
  grid-column:2;
  width:100%;
  border:1px solid #e6eef6;
  border-radius:12px;
  border-collapse:separate; border-spacing:0;
  background:#fff;
  margin:6px 0 12px;
  overflow:hidden;
}
.main-lower-textbox.about-qa table th,
.main-lower-textbox.about-qa table td{
  padding:12px 14px;
  border-bottom:1px solid #eef3f9;
  vertical-align:top;
  font-size:.98rem;
}
.main-lower-textbox.about-qa table th{
  background:#f8fbff;
  color:#0b1b2b; font-weight:800; width:32%;
}
.main-lower-textbox.about-qa table tr:last-child th,
.main-lower-textbox.about-qa table tr:last-child td{ border-bottom:none; }
.main-lower-textbox.about-qa table tbody tr:nth-child(odd) td{ background:#fcfdff; }

/* 小画面：テーブル横スクロール可 */
@media (max-width: 640px){
  .main-lower-textbox.about-qa table{ display:block; overflow-x:auto; }
  .main-lower-textbox.about-qa table thead,
  .main-lower-textbox.about-qa table tbody,
  .main-lower-textbox.about-qa table tr{ display:table; width:100%; }
}

/* レスポンシブ微調整 */
@media (max-width: 1024px){
  .main-lower-textbox.about-qa dt{ padding:12px 14px; }
  .main-lower-textbox.about-qa dd{ padding:14px; gap:10px 14px; }
}
@media (max-width: 640px){
  .main-lower-textbox.about-qa dt{ gap:10px; }
  .main-lower-textbox.about-qa dt > span,
  .main-lower-textbox.about-qa dd > span{ width:2.2em; height:2.2em; font-size:.9rem; }
  .main-lower-textbox.about-qa dd p{ font-size:.98rem; }
}

/* ===== 追記：PDF/Wordリンク行（file-link） ===== */
/* ===== 既存（単体バッジ版：<ul class="file-link"><i>…</i><a>…</a></ul> など） ===== */
.main-lower-textbox .file-link li{
  display:inline-flex; align-items:center; gap:8px;
  background:#f8fbff; border:1px dashed #cfe1f5;
  border-radius:12px; padding:10px 12px; margin:.5em 0;
}
.main-lower-textbox .file-link a{ color:#0168B7; font-weight:800; text-decoration:none; }
.main-lower-textbox .file-link a:hover{ text-decoration:underline; }
.main-lower-textbox .fa-file-pdf{ color:#dc2626; margin:0 .35em 0 .1em; }
.main-lower-textbox .fa-file-word{ color:#2b579a; margin:0 .35em 0 .1em; }
.main-lower-textbox .fa-file-excel{ color:#217346; margin:0 .35em 0 .1em; }

/* ===== UL＋LI 版（今回のHTML）===== 
.main-lower-textbox ul.file-link{
  list-style:none; padding:0; margin:.5em 0;
  display:grid; gap:8px;

  background:transparent; border:0; border-radius:0; padding:0;
}
.main-lower-textbox ul.file-link > li{
  display:inline-flex; align-items:center; gap:8px;
  width:fit-content;
  background:#f8fbff; border:1px dashed #cfe1f5;
  border-radius:12px; padding:10px 12px;
}
.main-lower-textbox ul.file-link > li a{
  color:#0168B7; font-weight:800; text-decoration:none;
}
.main-lower-textbox ul.file-link > li a:hover{ text-decoration:underline; }

 アイコン色（追加でExcelも） 
.main-lower-textbox .file-link .fa-file-excel{ color:#16a34a; margin:0 .35em 0 .1em; }

*/
/* ===== 追記：番号付きリスト（多段対応） ===== */
.main-lower-textbox .number-list{
  list-style:none; counter-reset:num;
  padding-left:0; margin:.6em 0 1em;
}
.main-lower-textbox .number-list > li{
  counter-increment:num; position:relative;
  padding-left:2.2em; margin:.4em 0;
}
.main-lower-textbox .number-list > li::before{
  content:counter(num) ".";
  position:absolute; left:.2em; top:.2em;
  min-width:1.6em; text-align:right; font-weight:900; color:#0168B7;
}
.number-list2 {
  counter-reset: sub;
  list-style: none;
  padding-left: 1.6em;
  margin-top: 8px;
}
.number-list2 > li {
  counter-increment: sub;
  margin-bottom: 10px;
}

/* （１）（２）（３）… を付ける部分 */
.number-list2 > li::before {
  content: "（" counter(sub) "） ";
  font-weight: 700;
  color: #000;
}





/* ===== 追記：画像2カラム（キャプション付き） ===== */
/* 先頭数字クラスはエスケープ、同時に two-line-img-cap でも効くように */
.main-lower-textbox .\32 line-img-cap,
.main-lower-textbox .two-line-img-cap{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin:.6em 0 1.1em;
}
.main-lower-textbox .\32 line-img-cap > div,
.main-lower-textbox .two-line-img-cap > div{
   padding:10px;
}
.main-lower-textbox .\32 line-img-cap p,
.main-lower-textbox .two-line-img-cap p{
  margin:0 0 .4em; font-weight:700; color:#0b1b2b; font-size:.98rem;
}
.main-lower-textbox .\32 line-img-cap img,
.main-lower-textbox .two-line-img-cap img{
  display:block; width:100%; height:auto;
  object-fit:cover;
}

/* ===== 追記：連絡先強調ボックス ===== */
.main-lower-textbox .main-lower-textbox-contact{
  background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12;
  border-radius:12px; padding:12px 14px; line-height:1.9;
  display: inline-block;
}

/* ===== 追記：モバイル調整 ===== */
@media (max-width:640px){
  .main-lower-textbox .\32 line-img-cap,
  .main-lower-textbox .two-line-img-cap{ grid-template-columns:1fr; }
}

.alphabet-list{
  list-style:lower-alpha;
  padding-left: 0;
  margin: .6em 0 1.2em 1.5em;
}




/* ===== 丸ポチ付きリスト（2階層） ===== */
.circle-list{
  list-style: none;
  padding-left: 0;
  margin: .6em 0 1.2em;
}

/* 親項目（外側の丸は中空） */
.circle-list > li{
  position: relative;
  padding-left: 1.8em;
  margin: .55em 0;
  font-weight: 500;
  color: #0b1b2b;
  line-height: 1.8;
}
.circle-list > li::before{
  content: "";
  position: absolute;
  left: .2em;
  top: 1em;
  transform: translateY(-50%);
  width: .72em;
  height: .72em;
  border-radius: 50%;
  border: 2px solid #0168B7;   /* 県ブルーの中空丸 */
  background: #fff;
}

/* 子UL（内側は実線の小丸） */
.circle-list > li > ul{
  list-style: none;
  padding-left: 1.3em;
  margin: .45em 0 .6em;
}
.circle-list > li > ul > li{
  position: relative;
  padding-left: 1.1em;
  margin: .35em 0;
  font-weight: 600;
  color: #111827;
  line-height: 1.8;
}
.circle-list > li > ul > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  transform: translateY(-50%);
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: #0168B7;         /* 内側は塗りつぶし */
}

/* 3階層目以降がもし来ても軽くフォールバック */
.circle-list ul ul{
  padding-left: 1.2em;
}
.circle-list ul ul > li::before{
  background: #9dbfe3;         /* さらに薄いブルー */
}

/* リンクとアイコン整え */
.circle-list a{
  color: #0168B7;
  font-weight: 800;
  text-decoration: none;
}
.circle-list a:hover{ text-decoration: underline; }
.circle-list .fa-file-pdf{ color:#dc2626; margin-right:.35em; }

/* モバイルで少し詰める */
@media (max-width: 640px){
  .circle-list > li{ padding-left: 1.6em; }
  .circle-list > li > ul{ padding-left: 1.1em; }
}




/* ===== Interview List ===== */
.interview-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 16px 0 28px;
}

/* カード本体（aをブロックにして全体クリック） */
.interview-list > div > a{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #e6eef6;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #0b1b2b;
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease;
}

/* 画像：横長でも縦長でもカバー表示 */
.interview-list img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;     /* 必要なら 3/2 や 16/9 に変更OK */
  object-fit: cover;
  object-position: 50% 40%;/* 少し上寄りを見せる例（好みで調整可） */
  background: #f2f6fb;
}

/* キャプション */
.interview-list .interview-caption{
  display: grid;
  row-gap: 6px;
  padding: 12px 14px 14px;
}

/* タイポ階層 */
.interview-list .shobo-name{
  font-weight: 800;
  font-size: 1.1rem;
  color: #0168B7;
  line-height: 1.35;
}
.interview-list .shobo-reki,
.interview-list .shobo-kaikyu,
.interview-list .shobo-syokusyu{
  font-size: .95rem;
  color: #334155;
  line-height: 1.55;
}
.interview-list .shobo-date{
  margin-top: 2px;
  font-size: .9rem;
  color: #64748b;
}

/* ホバー／フォーカス */
@media (hover: hover){
  .interview-list > div > a:hover{
    transform: translateY(-2px);
    border-color: rgba(1,104,183,.28);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
  }
}
.interview-list > div > a:focus{ outline: none; }
.interview-list > div > a:focus-visible{
  box-shadow: 0 0 0 3px rgba(1,104,183,.25), 0 10px 24px rgba(0,0,0,.06);
  border-color: rgba(1,104,183,.28);
}

/* モバイル微調整 */
@media (max-width: 640px) {
  .interview-list {
    grid-template-columns: repeat(2, 1fr); /* ← 2列固定 */
    gap: 12px; /* 余白も少し詰める */
  }
  .interview-list .interview-caption {
    padding: 10px 12px 12px;
    row-gap: 2px;
  }
  .interview-list .shobo-name {
    font-size: 1.05rem;
  }
  .interview-list .interview-caption p{
    padding: 0;
    margin: 0;
  }

  .interview-list .shobo-reki,
.interview-list .shobo-kaikyu,
.interview-list .shobo-syokusyu{
  font-size: .85rem;
}
}

/* ========== Interview Detail 全体 ========== */
article.interview-detail{
  display: grid;
  gap: 24px;
  margin: 16px 0 28px;
  color: #0b1b2b;
}

/* ========== 上段：プロフィール + 画像 ========== */
.interview-detail-1{
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 3fr; /* 左：プロフィール / 右：画像 */
  gap: 24px;
  align-items: start;
}

/* プロフィールボックス */
.interview-detail-profile{
  background: #fff;
  border: 1px solid #e6eef6;
  border-radius: 16px;
  padding: 16px 16px 12px;
}
.interview-detail-profile h2{
  position: relative;
  margin: 12px 0 6px;
  padding-left: .6em;
  font-weight: 800;
  font-size: 1.05rem;
  color: #0168B7;
  line-height: 1.35;
}
.interview-detail-profile h2:first-child{ margin-top: 0; }
.interview-detail-profile h2::before{
  content:"";
  position:absolute; left:0; top:.15em; bottom:.15em;
  width: 5px; border-radius: 5px;
  background: linear-gradient(180deg, #4fb1ff, #0168B7);
}
.interview-detail-profile p{
  margin: 0 0 8px;
  line-height: 1.8;
  background: #f8fbff;
  border: 1px solid #e6eef6;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: .98rem;
}

/* 画像グリッド（3枚） */
.interview-detail-img{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.interview-detail-img img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 16;     /* 横長で統一 */
  object-fit: cover;
  object-position: 50% 60%; /* やや下寄り見せ。お好みで 50% 70% などに */
  border: 1px solid #e6eef6;
  border-radius: 12px;
  background: #f2f6fb;
  transition: transform .15s ease;
}
@media (hover: hover){
  .interview-detail-img img:hover{ transform: translateY(-2px); }
}

/* ========== 下段：Q&A ========== */
.interview-detail-qa{
  display: grid;
  gap: 16px;
}

/* 各Q&Aカード */
.interview-detail-qa dl{
  background:#fff;
  border:1px solid #e6eef6;
  border-radius:14px;
  overflow:hidden;
}

.interview-detail-qa h3{
  padding:14px 16px;
  background: linear-gradient(0deg, #f6faff 0, #ffffff 100%);
  border-bottom:1px solid #eaf0f7;
  color:#0b1b2b;
  font-weight:800;
  line-height:1.4;
}


/* 質問行 */
.interview-detail-qa dt{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background: linear-gradient(0deg, #f6faff 0, #ffffff 100%);
  border-bottom:1px solid #eaf0f7;
  color:#0b1b2b;
  font-weight:800;
  line-height:1.4;
}
.interview-detail-qa dt > span{
  display:grid; place-items:center;
  width:2.4em; height:2.4em;
  border-radius:999px;
  background:#0168B7; color:#fff;
  font-weight:900; font-size:.95rem;
  letter-spacing:.3px;
}

/* 回答行 */
.interview-detail-qa dd{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px 16px;
  padding:16px;
}
.interview-detail-qa dd > span{
  grid-row:1; grid-column:1;
  display:grid; place-items:center;
  width:2.4em; height:2.4em;
  border-radius:999px;
  background:#F57B1E; color:#fff;
  font-weight:900; font-size:.95rem;
}
.interview-detail-qa dd > *:not(span){ grid-column:2; }

/* 本文 */
.interview-detail-qa dd p{
  margin:4px 0 6px;
  font-size:1rem;
  line-height:1.85;
  color:#0b1b2b;
}
.interview-detail-qa dd a{
  color:#0168B7; font-weight:800; text-decoration:none;
  text-underline-offset:.18em; text-decoration-thickness:.08em;
}
.interview-detail-qa dd a:hover{ text-decoration:underline; }

/* ========== レスポンシブ ========== */
@media (max-width: 1024px){
  .interview-detail-1{
    grid-template-columns: 1fr;   /* 縦積み */
  }
  .interview-detail-img{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px){
  .interview-detail-img{ grid-template-columns: 1fr; }
  .interview-detail-profile{ border-radius:12px; }
  .interview-detail-qa dt{ gap:10px; padding:12px 14px; }
  .interview-detail-qa dd{ gap:10px 14px; padding:14px; }
  .interview-detail-qa dt > span,
  .interview-detail-qa dd > span{ width:2.2em; height:2.2em; font-size:.9rem; }
  .interview-detail-qa dd p{ font-size:.98rem; }
}

/* ===== Measure / 施策メニュー ===== */
.measure-list {
  color: var(--ink);
}

.measure-list > h2 {
  margin: 24px 0 12px;
  padding-left: 10px;
  border-left: 4px solid var(--brand);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
}

.measure-list > ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.measure-list li > a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  background: var(--bg);
  line-height: 1.6;
  transition: background-color .15s ease, border-color .15s ease;
}

.measure-list li > a:hover,
.measure-list li > a:focus-visible {
  border-color: color-mix(in oklab, var(--brand), var(--bord) 60%);
  outline: none;
}

.measure-list ul + h2 { margin-top: 28px; }

@media (min-width: 768px) {
  .measure-list > ul { grid-template-columns: 1fr 1fr; }
}


/* ================= NEWS LIST ================= */

#lower .news-list {
  background: #fff;
  width: min(100%, 1000px);
  margin: 0 auto 80px;
  border-radius: 24px;
  padding: 32px 24px 48px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}

/* 一覧ブロック */
#lower .news-list .main-lower-textbox {
  margin-top: 24px;
}

/* リスト本体 */
#lower .news-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

#lower .news-index li a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid #e6eef6;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--ink, #0b1b2b);
  font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}

#lower .news-index li a:hover {
  background: #f8fbff;
  border-color: color-mix(in srgb, var(--brand, #0168B7) 25%, #e6eef6);
}

/* 日付 */
#lower .news-index .news-date {
  flex-shrink: 0;
  width: 9rem;
  color: #64748b;
  font-size: .95rem;
  font-weight: 800;
  white-space: nowrap;
}

/* タイトル */
#lower .news-index .news-title {
  flex: 1;
  line-height: 1.5;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 戻るボタン（共通スタイルと統一） */
#lower .news-list .backbutton {
  margin-top: 40px;
}

/* モバイル対応 */
@media (max-width: 640px) {
 #lower .news-list {
    padding: 24px 16px 40px;
    border-radius: 16px;
  }

 #lower .news-index li a {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
  }

 #lower .news-index .news-date {
    width: auto;
    font-size: .9rem;
  }
}

/* ================= NEWS DETAIL ================= */

#lower .news-detail {
  background-color: #fff;
  width: min(100%, 1000px);
  margin: 0 auto 80px;
  border-radius: 24px;
  padding: 32px 24px 48px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}

#lower .news-detail .news-date {
  display: block;
  font-size: 1rem;
  color: #64748b;
  margin-right: 12px;
  font-weight: 700;
}

#lower .news-detail .main-lower-textbox {
  margin-top: 32px;
}

#lower .news-detail .main-lower-textbox img {
  display: block;
  margin: 24px auto 0;
  border-radius: 12px;
  border: 1px solid #e6eef6;
  max-width: 100%;
  height: auto;
}

/* モバイル調整 */
@media (max-width: 640px) {
  #lower .news-detail {
    padding: 24px 16px 40px;
    border-radius: 16px;
  }
}


/* ================= JOIN LIST (入団申込一覧) ================= */

.join-list{
  background:#fff;
  width:min(100%, 1000px);
  margin:0 auto 80px;
  border-radius:24px;
  padding:32px 24px 48px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

/* ブロック見出し */
.join-list .muni-index > h2{
  margin: 8px 0 16px;
  padding-left:.7em;
  border-left:4px solid var(--brand);
  font-weight:800;
  color:#0168B7;
  font-size:clamp(1.1rem, .8vw + 1rem, 1.4rem);
}

/* ===== テーブル ===== */
.join-list .muni-index table{
  width:100%;
  border:1px solid var(--bord);
  border-radius:16px;
  border-collapse:separate;      /* 角丸を効かせるため separate + hidden */
  border-spacing:0;
  overflow:hidden;
  background:#fff;
  margin-top: 24px;
}

/* 行・セル */
.join-list .muni-index table th,
.join-list .muni-index table td{
  padding:12px 14px;
  border-bottom:1px solid #e8eef6;
  vertical-align:middle;
  font-size:.98rem;
  color:var(--ink);
}
.join-list .muni-index table th{
  background:#F3F8FF;
  color:#0b1b2b;
  font-weight:800;
  text-align:left;
  white-space:nowrap;
}

/* 交互背景・最終行の罫線除去 */
.join-list .muni-index table tbody tr:nth-child(odd) td{ background:#fcfdff; }
.join-list .muni-index table tr:last-child th,
.join-list .muni-index table tr:last-child td{ border-bottom:none; }

/* 行ホバー */
.join-list .muni-index table tbody tr:hover td{
  background:#f8fbff;
}

/* 申込ボタンを右寄せ */
.join-list .muni-index table td:last-child {
  text-align: right;
}

.join-list .muni-index table td a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 100px; /* 見た目を整える optional */
}

/* 申込リンクを“ボタン風”に */
.join-list .muni-index table td a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:6px 16px;
  border-radius:999px;
  border:1.5px solid var(--brand);
  background:#fff;
  color:var(--brand);
  font-weight:800; text-decoration:none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.join-list .muni-index table td a:hover{
  background:var(--brand); color:#fff;
  box-shadow:0 6px 18px rgba(1,104,183,.18);
}
.join-list .muni-index table td a:active{ transform: translateY(1px); }

/* “戻る”は既存の .backbutton をそのまま利用（統一感） */

/* ===== レスポンシブ ===== */
/* 小画面：横スクロール（既存方針と整合） */
@media (max-width: 640px){
  .join-list{
    padding:24px 16px 40px; border-radius:16px;
  }
  .join-list .muni-index table{
    display:block; overflow-x:auto;    /* 横スクロール */
    -webkit-overflow-scrolling: touch; /* スムーズ */
    min-width: 640px;                  /* つぶれ防止の基準幅 */
  }
  .join-list .backbutton a{ width:100%; padding:12px 0; }
}


/* ====== 入団申込テーブル：スクロールなしで収める（小画面最適化） ====== */

/* テーブルラッパはスクロールさせない */
.join-list .muni-index .table-wrap{
  overflow-x: visible;       /* ← auto から visible に */
  padding-bottom: 0;
}

/* テーブルは可変・折り返しを優先 */
.join-list .muni-index .table-wrap > table{
  width: 100%;
  table-layout: fixed;       /* 均等配分で折り返しが効く */
  min-width: 0;              /* ← 以前の min-width を打ち消す */
  border-spacing: 0;
}

/* セル内の折り返しを強化（長い自治体名・団名・URLに強い） */
.join-list .muni-index table th,
.join-list .muni-index table td{
  min-width: 0;
  white-space: normal;       /* nowrap を使わない */
  word-break: break-word;    /* Safari 等の保険 */
  overflow-wrap: anywhere;   /* 連続英数字でも必ず折り返す */
}

/* 列幅の目安：1列目=市町村、2列目=消防団名、3列目=ボタン */
.join-list .muni-index table tr > *:nth-child(1){ width: clamp(120px, 34%, 42%); }
.join-list .muni-index table tr > *:nth-child(2){ width: auto; }
.join-list .muni-index table tr > *:nth-child(3){
  width: clamp(88px, 22vw, 140px); /* 画面に応じて“程よく”狭くする */
  text-align: right;               /* 右寄せは維持 */
}

/* 申込ボタンをコンパクトに（最小サイズで収める） */
.join-list .muni-index table td a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: #fff;
  color: var(--brand);
  /* ここがキモ：余白と文字サイズを流体にして“縮む余地”を確保 */
  padding: clamp(6px, 1.2vw, 10px) clamp(10px, 2.4vw, 16px);
  font-size: clamp(.85rem, .4vw + .82rem, .95rem);
  line-height: 1;
  min-width: 0;              /* 固定幅を持たせない */
  max-width: 100%;           /* はみ出さない保険 */
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.join-list .muni-index table td a:hover{
  background: var(--brand); color:#fff;
  box-shadow: 0 6px 18px rgba(1,104,183,.18);
}
.join-list .muni-index table td a:active{ transform: translateY(1px); }

/* さらに小さな端末ではボタンのパディングをもう一段階詰める */
@media (max-width: 480px){
  .join-list .muni-index table tr > *:nth-child(3){
    width: clamp(84px, 28vw, 120px);
  }
  .join-list .muni-index table td a{
    padding: 6px 10px;       /* 手当てで一段階コンパクトに */
    font-size: .85rem;
  }
}
/* ================= JOIN REGIST（入団申込フォーム） ================= */

.join-regist{
  background:#fff;
  width:min(100%, 1000px);
  margin:0 auto 80px;
  border-radius:24px;
  padding:32px 24px 48px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

/* ブロック見出しを軽く */
.join-regist .h1--badge{ margin-bottom: 24px; }

/* ===== テーブル（フォームレイアウト） ===== */
.join-regist .muni-index > table{
  width:100%;
  border:1px solid var(--bord);     /* 外枠だけ */
  border-radius:16px;
  border-collapse:separate;          /* 角丸維持 */
  border-spacing:0;
  table-layout: fixed;               /* 入力欄の折り返しを効かせる */
  overflow:hidden;
  background:#fff;
}

.join-regist .muni-index > table tr{
  border:0;                          /* 行ボーダーは使わない（重複防止） */
}

.join-regist .muni-index > table th,
.join-regist .muni-index > table td{
  padding:12px 14px;
  border-bottom:1px solid #e8eef6;   /* 下線のみでスッキリ */
  vertical-align:middle;
  font-size:.98rem;
  color:var(--ink);
  min-width:0;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.join-regist .muni-index > table th{
  background:#F3F8FF;
  color:#0b1b2b;
  font-weight:800;
  text-align:left;
  width:26%;                         /* ラベル側の目安 */
}
.join-regist .muni-index > table tr:last-child th,
.join-regist .muni-index > table tr:last-child td{
  border-bottom:none;
}

/* ===== インプット（横並び→小画面で縦積み） ===== */
.join-regist input[type="text"],
.join-regist textarea{
  inline-size: clamp(220px, 100%, 680px);
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid var(--bord);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
  margin: 4px 6px 4px 0;
}
.join-regist textarea{
  min-height: 140px;
  resize: vertical;
}

.join-regist input[type="text"]:focus,
.join-regist textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--brand) 60%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, #fff);
}

/* “姓/名” “郵便/電話/メール確認” の行間詰め */
.join-regist td > input + input{ margin-left: 6px; }

/* “－” 記号用の間隔（郵便・電話） */
.join-regist td .sep{ display:inline-block; margin: 0 4px; opacity:.6; }

/* エラー表示 */
.join-regist .error{
  margin-top:6px;
  color:#dc2626;
  font-weight:700;
  font-size:.92rem;
}

/* ===== アクションボタン ===== */
.join-regist .form__actions{
  display:flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
}

.join-regist .done-button,
.join-regist .back-button{
  appearance: none;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 800;
  border: 2px solid transparent;
  transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* 確認＝主ボタン（brandカラー） */
.join-regist .done-button{
  background: var(--brand);
  color:#fff;
  border-color: var(--brand);
}
.join-regist .done-button:hover{ box-shadow: 0 6px 18px rgba(1,104,183,.18); }
.join-regist .done-button:active{ transform: translateY(1px); }

/* 戻る＝ゴースト（既存の戻るボタン群とトーン合わせ） */
.join-regist .back-button{
  background:#fff;
  color: var(--brand);
  border-color: var(--brand);
}
.join-regist .back-button:hover{ background: color-mix(in srgb, var(--brand) 8%, #fff); }
.join-regist .back-button:active{ transform: translateY(1px); }

/* ===== レスポンシブ ===== */
@media (max-width: 768px){
  .join-regist{
    padding:24px 16px 40px; border-radius:16px;
  }
  .join-regist .muni-index > table th{
    width: 34%;                /* ラベルをやや広くして読みやすく */
  }
  /* 入力幅は行内で自然に折り返す */
  .join-regist input[type="text"],
  .join-regist textarea{
    inline-size: 100%;
  }
  .join-regist .form__actions{
    justify-content: stretch;
  }
  .join-regist .done-button,
  .join-regist .back-button{
    flex: 1 1 auto;
    text-align: center;
  }
}

/* さらに小さい端末調整 */
@media (max-width: 480px){
  .join-regist .muni-index > table th{ width: 100%; }
  .join-regist .muni-index > table th,
  .join-regist .muni-index > table td{
    display:block; width:100%;
  }
  .join-regist .muni-index > table td{
    padding-top: 8px;
  }
}


/* ================= FORM INPUT SIZE FIX ================= */

/* 優先度を強化するために .join-regist を前置 */
.join-regist .input-mini {
  width: 5.5em !important;
  text-align: center;
}

.join-regist .input-short {
  width: clamp(120px, 30%, 200px) !important;
}

.join-regist .input-medium {
  width: clamp(220px, 50%, 360px) !important;
}

.join-regist .input-long,
.join-regist textarea.input-long {
  width: 100% !important;
}

/* 入力の見た目を統一（既存リセットより強く） */
.join-regist input[type="text"],
.join-regist textarea {
  padding: 8px 10px;
  border: 1.8px solid var(--bord, #ccd8e0);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--ink, #0b1b2b);
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}

.join-regist input[type="text"]:focus,
.join-regist textarea:focus {
  border-color: var(--brand, #0168B7);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0168B7) 25%, #fff);
  outline: none;
}

/* スマホでは全幅 */
@media (max-width: 600px) {
  .join-regist .input-mini,
  .join-regist .input-short,
  .join-regist .input-medium,
  .join-regist .input-long {
    width: 100% !important;
  }
}


/* ================= JOIN CONFIRM（入団申込：確認） ================= */

.join-confirm{
  background:#fff;
  width:min(100%, 1000px);
  margin:0 auto 80px;
  border-radius:24px;
  padding:32px 24px 48px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

/* 見出しは既存の .h1--badge を使用（そのままでOK） */

/* ===== テーブル（表示専用） ===== */
.join-confirm .muni-index > table{
  width:100%;
  border:1px solid var(--bord);
  border-radius:16px;
  border-collapse:separate;   /* 角丸維持 */
  border-spacing:0;
  table-layout: fixed;        /* 折り返し優先 */
  overflow:hidden;
  background:#fff;
}

/* 行・セル */
.join-confirm .muni-index > table tr{ border:0; }

.join-confirm .muni-index > table th,
.join-confirm .muni-index > table td{
  padding:12px 14px;
  border-bottom:1px solid #e8eef6;
  vertical-align:top;
  font-size:.98rem;
  color:var(--ink);
  min-width:0;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;     /* 長い単語/URLも折り返す */
}

/* 見出しセル */
.join-confirm .muni-index > table th{
  background:#F3F8FF;
  color:#0b1b2b;
  font-weight:800;
  text-align:left;
  width:26%;
}

/* 最終行の下線を消す */
.join-confirm .muni-index > table tr:last-child th,
.join-confirm .muni-index > table tr:last-child td{
  border-bottom:none;
}

/* 値セル（右側）：読みやすい行間・段落余白 */
.join-confirm .muni-index > table td{
  line-height:1.85;
}
.join-confirm .muni-index > table td p{ margin:.2em 0; }

/* ===== アクションボタン（登録画面と統一トーン） ===== */
.join-regist .form__actions,
.join-confirm .form__actions{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
  margin-top:24px;
}

/* 主/副ボタンを両画面で共通定義 */
.join-regist .done-button, .join-confirm .done-button,
.join-regist .back-button, .join-confirm .back-button{
  appearance:none;
  min-height:44px;
  padding:10px 22px;
  border-radius:999px;
  font-weight:800;
  border:2px solid transparent;
  transition: transform .06s ease, box-shadow .15s ease,
              background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* 主ボタン（brandカラー） */
.join-regist .done-button, .join-confirm .done-button{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.join-regist .done-button:hover, .join-confirm .done-button:hover{
  box-shadow:0 6px 18px rgba(1,104,183,.18);
}
.join-regist .done-button:active, .join-confirm .done-button:active{
  transform:translateY(1px);
}

/* 副ボタン（ゴースト） */
.join-regist .back-button, .join-confirm .back-button{
  background:#fff;
  color:var(--brand);
  border-color:var(--brand);
}
.join-regist .back-button:hover, .join-confirm .back-button:hover{
  background:color-mix(in srgb, var(--brand) 8%, #fff);
}
.join-regist .back-button:active, .join-confirm .back-button:active{
  transform:translateY(1px);
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px){
  .join-confirm{
    padding:24px 16px 40px; border-radius:16px;
  }
  .join-confirm .muni-index > table th{ width:34%; }
  .join-regist .form__actions, .join-confirm .form__actions{
    justify-content:stretch;
  }
  .join-regist .done-button, .join-confirm .done-button,
  .join-regist .back-button, .join-confirm .back-button{
    flex:1 1 auto; text-align:center;
  }
}

/* さらに狭い端末では縦積みラベルに（可読性優先） */
@media (max-width: 480px){
  .join-confirm .muni-index > table th,
  .join-confirm .muni-index > table td{
    display:block; width:100%;
  }
  .join-confirm .muni-index > table td{ padding-top:8px; }
}


/* ================= JOIN DONE（入団申込：完了） ================= */

.join-done{
  background:#fff;
  width:min(100%, 1000px);
  margin:0 auto 80px;
  border-radius:24px;
  padding:32px 24px 48px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

/* メッセージボックス（通知カード） */
.join-done .muni-index > div{
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--bord));
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(1,104,183,.06);
}

.join-done .muni-index p{
  margin: 6px 0;
  line-height: 1.9;
  color: var(--ink);
  font-size: 1rem;
}

/* アクション行（ほか画面と統一） */
.join-done .form__actions{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
  margin-top:24px;
}

/* 戻るボタン：既存トーンに合わせる（ゴースト） */
.join-done .back-button{
  appearance:none;
  min-height:44px;
  padding:10px 22px;
  border-radius:999px;
  font-weight:800;
  border:2px solid var(--brand);
  background:#fff;
  color: var(--brand);
  transition: transform .06s ease, box-shadow .15s ease,
              background-color .15s ease, color .15s ease, border-color .15s ease;
}
.join-done .back-button:hover{
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  box-shadow: 0 6px 18px rgba(1,104,183,.18);
}
.join-done .back-button:active{ transform: translateY(1px); }

/* レスポンシブ微調整 */
@media (max-width: 768px){
  .join-done{
    padding:24px 16px 40px; border-radius:16px;
  }
  .join-done .form__actions{ justify-content: stretch; }
  .join-done .back-button{ flex:1 1 auto; text-align:center; }
}

/* 動画リスト */
.movie-list {
  padding: 0;
  margin: 0 0 24px;
  list-style: none;
  display: grid;
  gap: 2.5rem;
}

.movie-list li h2 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
}

/* iframe を16:9レスポンシブ化 */
.movie-list iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
}


/* =========================
   3-3 消防団の活動（パワポ配置準拠）
   ========================= */

/* ====== 上部カテゴリメニュー ====== */

.activity_menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 30px 0 40px;
}

/* セクションボックス（非常時・平常時） */
.activity_menu > div {
  background: #f8fbff;
  border: 1px solid #dce7f4;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

/* 見出し */
.activity_menu > div > p {
  font-weight: 800;
  margin-bottom: 12px;
  font-size: 1.05rem;
}

/* カテゴリ一覧をパワポの2×2カード構成に寄せる */
.activity_menu ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* カード */
.activity_menu li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e2edf8;
  border-radius: 12px;
  padding: 10px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  transition: all .15s ease;
}

.activity_menu li a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* カード内テキスト */
.activity_menu li a p {
  margin: 0;
  font-weight: 700;
  font-size: .95rem;
}

/* カード内画像（パワポ比率に合わせ 4:3 を意識） */
.activity_menu li a div {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
}

.activity_menu li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ====== 詳細セクション ====== */

.emergencybox,
.normalbox {
  padding: 20px 18px;
  margin-top: 40px;
  border: 1px solid #e1e9f5;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}

.emergencybox > h2,
.normalbox > h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.4rem;
  font-weight: 800;
}

/* 各項目ブロック */
.emergencybox-detail {
  padding: 22px 0;
  border-top: 1px solid #e7eef8;
}

.emergencybox-detail:first-of-type {
  border-top: none;
  padding-top: 6px;
}

/* H3 のデザイン（パワポのセクションヘッダ感） */
.emergencybox-detail h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 700;
  border-left: 6px solid var(--brand, #0168b7);
  padding-left: 10px;
}

/* ====== 画像と文字を縦並びにする（パワポ準拠） ====== */

/* ベース：カードグリッド共通設定 */
.emergencybox-detail .items {
  display: grid;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
}

/* 4枚 → 2×2 */
.emergencybox-detail .items-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 6枚 → 3×2 */
.emergencybox-detail .items-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* カード本体：縦並び（画像 → テキスト） */
.emergencybox-detail .items li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #e2edf8;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.05);
}

/* 画像サイズ（items-4 と同じ仕様） */
.emergencybox-detail .items li img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
}

.emergencybox-detail .items li span {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
}
/* タブレットくらい：6枚のときは 2 列まで落とす */
@media (max-width: 1024px) {
  .emergencybox-detail .items-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* スマホ：4枚も6枚も 1 列表示 */
@media (max-width: 768px) {
  .emergencybox-detail .items-4,
  .emergencybox-detail .items-6 {
    grid-template-columns: 1fr;
  }
}



/* ====== レスポンシブ ====== */

@media (max-width: 600px) {
  .activity_menu ul {
    grid-template-columns: 1fr;
  }

  .emergencybox-detail ul {
    grid-template-columns: 1fr;
  }

  .emergencybox-detail ul li {
    flex-direction: column;
    align-items: flex-start;
  }

  .emergencybox-detail ul li img {
    width: 100%;
    height: 160px;
  }
}


/* ============================
   ページネーション
   ============================ */

/* ============================
   ページネーション（シンプル版）
   ============================ */

.pagenation {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 20px 0;
  list-style: none;
  margin: 24px 0;
}

.pagenation li {
  display: flex;
}

.pagenation li span,
.pagenation li a span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;

  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;

  border: 1px solid #d0dbe7;   /* 既存サイトの淡い枠色に合わせた */
  background: #fff;
  color: #0b1b2b;

  text-decoration: none;
}

/* active（現在ページ） */
.pagenation li.active span {
  background: #0168B7;         /* ブランディングの青 */
  border-color: #0168B7;
  color: #fff;
  cursor: default;
}

/* hover（影なしの控えめ） */
.pagenation li a span:hover {
  background: #eef6ff;
  border-color: #9dbfdd;
}

.pagenation li a{
  text-decoration: none;
}


/* スマホ時 */
@media (max-width: 640px) {
  .pagenation li span,
  .pagenation li a span {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }
}






.backbutton{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0 16px 0;
}

/* 本体 */
.backbutton a{
  --bg: #fff;
  --fg: var(--brand);

  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;

  min-height: 44px;            /* タップしやすく */
  padding:8px;
  width: 200px;

  border-radius: 999px;
  border: 1.5px solid var(--fg);
  background: var(--bg);
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;

  box-shadow: 0 4px 16px rgba(1,104,183,.12);
  transition: background-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .06s ease;
}

/* 左の“戻る”シェブロン（純CSS） */
.backbutton a::before{
  content: "";
  width: .65em; height: .65em;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-right: 2px;
}

/* Hover / Active */
.backbutton a:hover{
  --bg: var(--brand);
  --fg: #fff;
  box-shadow: 0 6px 22px rgba(1,104,183,.22);
}
.backbutton a:active{
  transform: translateY(1px);
}

/* フォーカス（アクセシブル） */
.backbutton a:focus{ outline: none; }
.backbutton a:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 999px;
}


.muni-index h2{ margin:0 0 8px; color:#0168B7; font-weight:800; font-size:1.25rem; }
.muni-list{ 
  display:grid; gap:8px 16px; 
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  list-style: none; padding:0; margin:0;
}
.muni-item{ background:#fff; border:1px solid #e6eef6; border-radius:10px; padding:10px 12px; }
.muni-item > a{ text-decoration:none; color:#0168B7; font-weight:800; }
.muni-item > a:hover{ text-decoration:underline; }
.muni-name{ color:#0168B7; font-weight:800; }
.muni-sub{ list-style:none; padding:8px 0 0; margin:8px 0 0; border-top:1px dashed #dbe7f5; }
.muni-sub li + li{ margin-top:6px; }
.muni-sub a{ color:#0b1b2b; text-decoration:none; }
.muni-sub a:hover{ text-decoration:underline; }

.active{
  color: #0168B7;
}