/*!
 font-size switcher  2026-08-10 MOOBON
 大中小の文字サイズ切替。#changeArea(html) の font-size を切り替え、
 rem 基準の全テキストを比例スケールさせる。
 現行 html=62.5%(本文16px) を基準に、中=18px / 大=20px。
 ______________________________*/

/* 標準（中）＝基準の底上げ：本文18px */
#changeArea           { font-size: 70.3125%; } /* 中＝新しい標準（本文18px・+12.5%） */
#changeArea.fs-small  { font-size: 62.5%;    } /* 小＝現行（本文16px） */
#changeArea.fs-medium { font-size: 70.3125%; } /* 中（本文18px） */
#changeArea.fs-large  { font-size: 78.125%;  } /* 大（本文20px・+25%） */

/* 切替ボタン */
.fontsize_switch {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}
.fontsize_switch .fss_label {
  font-size: 1.3rem;
  color: var(--font-color, #333);
  white-space: nowrap;
}
.fontsize_switch button {
  min-width: 3.4rem;
  padding: .4rem .8rem;
  border: 1px solid #015EAC;
  background: #fff;
  color: #015EAC;
  border-radius: 4px;
  line-height: 1;
  cursor: pointer;
  font-size: 1.3rem;
  transition: background .15s, color .15s;
}
.fontsize_switch button:hover  { background: #e6f0f9; }
.fontsize_switch button:focus-visible { outline: 2px solid #015EAC; outline-offset: 2px; }
.fontsize_switch button[aria-pressed="true"] {
  background: #015EAC;
  color: #fff;
  font-weight: 700;
}

/* === 文字サイズ変更時のヘッダー固定（ロゴが下がる問題の対策） ===
   固定ヘッダー(高さ103px)内のテキストがremで拡大すると中身が膨張し、
   ロゴが押し下げられる。ヘッダー内テキストを基準13pxに固定してヘッダーの
   膨張を止めれば、ロゴは動かない。ヘッダーは本番どおりの見た目のまま、本文だけ拡大。 */
/* === 文字サイズ切替：PCは右下に追従する固定ウィジェット（ヘッダー・ナビと分離）===
   ヘッダーの行から外すことで、ナビが元の幅を取り戻し2行化を解消する。
   position:fixed でスクロール追従。ページトップボタン(右下 bottom:20/50px角)の上に配置。 */
@media screen and (min-width: 1181px) {
  #changeArea .header .fss_in_bar {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 90;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #015EAC;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  }
  /* ロゴ・ナビは縦中央寄せ（文字サイズが抜けた分、ナビは元の幅に戻る） */
  #changeArea .header_in { align-items: center; padding-top: 0; min-height: 102px; }
  #changeArea .header_r ul.menu { margin-top: 0; }
}

/* 全幅共通：ロゴ画像をblock化し、h1の行ボックス伸長でロゴが下がるのを防ぐ
   （サイズは変えず、インライン画像のベースライン依存だけを除去） */
#changeArea .header h1 { line-height: 0; }
#changeArea .header h1 a { display: inline-block; line-height: 0; }
#changeArea .header h1 a img { display: block; }

@media screen and (min-width: 1181px) {
  /* テキストを基準13pxに固定 */
  #changeArea .header_r ul.menu li a,
  #changeArea .header_r .toggle_label,
  #changeArea .header .fss_in_bar .fss_label,
  #changeArea .header .fss_in_bar button { font-size: 13px; }
  /* ロゴ幅を固定し、切替の拡大で押し縮められないようにする */
  #changeArea .header h1 { flex-shrink: 0; }
  #changeArea .header h1 a img { width: 235px; height: auto; max-width: none; }
  /* 切替ボタンの寸法をpx固定してヘッダー幅を一定に保つ */
  #changeArea .header .fss_in_bar { gap: 5px; }
  #changeArea .header .fss_in_bar button { min-width: 34px; padding: 4px 8px; }
}

/* --- レスポンシブ：PCはヘッダー内、モバイル(≤1180px)はハンバーガー内 --- */
/* モバイル用インスタンス（ul.menu内のli）はPCでは非表示 */
.fss_in_menu { display: none; }

@media screen and (max-width: 1180px) {
  /* ヘッダーバー内の切替はモバイルで隠し、ハンバーガー内に表示 */
  .fss_in_bar { display: none !important; }
  .fss_in_menu {
    display: block;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
    border-left: 0 !important;
    padding: 13px 10px !important;
  }
  .fss_in_menu .fontsize_switch {
    justify-content: center;
    margin: 0;
    gap: .6rem;
  }
}