/* アクセシビリティツール全体のスタイル */
.accessibility-tools {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    padding: 0 1rem;
}

/* フォントサイズコントロール */
.font-size-controls {
    display: flex;
    margin-right: 1.5rem;
}

.font-size-btn {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
    cursor: pointer;
}

.font-size-btn:hover {
    background-color: #e0e0e0;
}

/* ダークモードスイッチ */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-right: 0.5rem;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* ダークモード用のスタイル */
.dark-mode {
    background-color: #222;
    color: #eee;
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: #fff;
}

.dark-mode a {
    color: #80b3ff;
}

/* ダークモード CSS 改善版 */
/* 特定のクラスを持つヘッダー要素を明示的に指定 */
.dark-mode .siteHeader,
.dark-mode .siteHeader_container,
.dark-mode .navbar-header,
.dark-mode .navbar,
.dark-mode header {
    background-color: #333 !important;
    color: #eee !important;
    border-bottom-color: #444 !important;
}

/* フッターの特定クラスを明示的に指定 */
.dark-mode .siteFooter,
.dark-mode .copySection,
.dark-mode .footerMenu,
.dark-mode footer {
    background-color: #333 !important;
    color: #eee !important;
    background-image: none !important; /* 背景画像を無効化 */
}

/* メニューアイテムの色を変更 */
.dark-mode .gMenu>li>a,
.dark-mode .gMenu>li .gMenu_name,
.dark-mode .headerTop,
.dark-mode .header-top,
.dark-mode .footer-nav,
.dark-mode .copySection p {
    color: #eee !important;
}

/* ダークモード時の背景色を強制的に適用するセレクタを追加 */
.dark-mode.siteHeader,
.dark-mode.siteFooter {
    background-color: #333 !important;
}

/* IMPORTANT: これらのスタイルはインラインスタイルよりも優先されるようにするべきです */
.font-size-changed h1, .font-size-changed h2, .font-size-changed h3, 
.font-size-changed h4, .font-size-changed h5, .font-size-changed h6,
.font-size-changed p, .font-size-changed a, .font-size-changed li, 
.font-size-changed td, .font-size-changed th, .font-size-changed div,
.font-size-changed span, .font-size-changed .gMenu_name,
.font-size-changed .m-plus-rounded-1c-regular,
.font-size-changed .m-plus-rounded-1c-medium,
.font-size-changed .m-plus-rounded-1c-bold,
.font-size-changed .m-plus-rounded-1c-extrabold,
.font-size-changed .m-plus-rounded-1c-black,
.font-size-changed .sawarabi-gothic-regular {
    font-size: var(--scaled-font-size) !important;
}

/* フォントサイズ変更のための追加スタイル */
.font-size-changed .wp-block-column li,
.font-size-changed .wp-block-column a,
.font-size-changed .wp-block-column p,
.font-size-changed ul li,
.font-size-changed ol li,
.font-size-changed a,
.font-size-changed p,
.font-size-changed span,
.font-size-changed div,
.font-size-changed td,
.font-size-changed th,
.font-size-changed .gMenu_name {
    font-size: calc(1em * var(--font-scale)) !important;
    transition: font-size 0.2s ease;
}

/* ナビゲーションメニューに特別なサイズ設定 */
.font-size-changed .gMenu > li > a,
.font-size-changed .gMenu_name {
    font-size: calc(21px * var(--scaled-font-size-ratio, 1)) !important;
}

/* ボタンのスタイル調整 */
.dark-mode .font-size-btn {
    background-color: #444;
    color: #eee;
    border-color: #555;
}

/* フォントファミリー設定 - JSで操作可能なように変数化 */
:root {
    --font-scale: 1;
    --rounded-font: "M PLUS Rounded 1c", sans-serif;
    --gothic-font: "Sawarabi Gothic", sans-serif;
}

.m-plus-rounded-1c-regular {
  font-family: var(--rounded-font);
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-medium {
  font-family: var(--rounded-font);
  font-weight: 500;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: var(--rounded-font);
  font-weight: 700;
  font-style: normal;
}

.m-plus-rounded-1c-extrabold {
  font-family: var(--rounded-font);
  font-weight: 800;
  font-style: normal;
}

.m-plus-rounded-1c-black {
  font-family: var(--rounded-font);
  font-weight: 900;
  font-style: normal;
}

.sawarabi-gothic-regular {
  font-family: var(--gothic-font);
  font-weight: 400;
  font-style: normal;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--rounded-font);
  font-weight: 500;
  font-style: normal;
}

.page-header_pageTitle, h1.page-header_pageTitle:first-child {
  font-family: var(--rounded-font);
  font-weight: 800;
  font-style: normal;
}

p, a, li, th, td {
  font-family: var(--gothic-font);
  font-weight: 400;
  font-style: normal;
}

a {
  color: #337ab7;
}

/* フォントサイズ変更用のスタイル */
.font-size-changed h1, .font-size-changed h2, .font-size-changed h3, 
.font-size-changed h4, .font-size-changed h5, .font-size-changed h6,
.font-size-changed p, .font-size-changed a, .font-size-changed li, 
.font-size-changed td, .font-size-changed th {
    font-size: calc(1em * var(--font-scale)) !important;
}

.font-size-changed .gMenu>li .gMenu_name {
    font-size: calc(21px * var(--font-scale)) !important;
}