/* =========================================================
   山形県立山形盲学校
   ユーザーテーマCSS 完全版 Ver.13.0.2 (崩れ修正版)
========================================================= */

/* =====================================================
   1．基本設定
===================================================== */

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        Meiryo,
        sans-serif;
}

.bg-dark {
    background-color: #12335c !important;
    padding: 0;
}

.navbar-dark .navbar-brand {
    padding-left: 0.5rem;
    font-size: 1rem;
}

.navbar-dark .navbar-nav .nav-link {
    font-size: 0.8rem;
}

/* =====================================================
   2．横型・縦型メニュー
===================================================== */

.plugin-menus .nav-tabs li.nav-item > a,
.plugin-menus .list-group > a.list-group-item {
    background: #12335c;
    color: #ffffff;
}

.plugin-menus .nav-tabs li.nav-item {
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
}

.plugin-menus .nav-tabs li.nav-item:last-child {
    border-right: 2px solid #ffffff;
}

.plugin-menus .nav-tabs .nav-link {
    border-radius: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.plugin-menus .list-group > a.list-group-item {
    border: 0;
    border-radius: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.plugin-menus .nav-tabs a:hover,
.plugin-menus .nav-tabs a:focus-visible,
.plugin-menus .nav-tabs a.active,
.plugin-menus .list-group a:hover,
.plugin-menus .list-group a:focus-visible,
.plugin-menus .list-group a.active {
    background-color: #2d527f;
    color: #fff36a;
    text-decoration: none;
}

/* =====================================================
   3．リンク・フレームタイトル
===================================================== */

#ccMainArea a {
    color: #12335c;
    text-decoration: underline;
}

#ccMainArea a:hover {
    color: #315f91;
}

#ccMainArea a:focus-visible,
.plugin-menus a:focus-visible {
    outline: 3px solid #ffd800;
    outline-offset: 2px;
}

.card-header.bg-default {
    background: #12335c;
    border-color: #ffffff;
    border-bottom: 2px solid #ffffff;
    color: #ffffff;
}

/* =====================================================
   4．追加フレームカラー
===================================================== */

.frame-pink,
.frame-coral,
.frame-orange,
.frame-yellow,
.frame-green,
.frame-mint,
.frame-blue,
.frame-purple,
.frame-gray {
    overflow: hidden !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(18, 51, 92, 0.12) !important;
}

.frame-pink .card,
.frame-coral .card,
.frame-orange .card,
.frame-yellow .card,
.frame-green .card,
.frame-mint .card,
.frame-blue .card,
.frame-purple .card,
.frame-gray .card {
    overflow: hidden !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.frame-pink .card-header,
.frame-coral .card-header,
.frame-orange .card-header,
.frame-yellow .card-header,
.frame-green .card-header,
.frame-mint .card-header,
.frame-blue .card-header,
.frame-purple .card-header,
.frame-gray .card-header {
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-radius: 10px 10px 0 0 !important;
    background-image: none !important;
    color: #24333d !important;
    font-weight: 700 !important;
}

.frame-pink .card { border-color: #bd7e89 !important; }
.frame-pink .card-header { background: #e5b7be !important; border-bottom-color: #bd7e89 !important; }
.frame-coral .card { border-color: #dc927b !important; }
.frame-coral .card-header { background: #fabea7 !important; border-bottom-color: #dc927b !important; }
.frame-orange .card { border-color: #d99b71 !important; }
.frame-orange .card-header { background: #fcc9ac !important; border-bottom-color: #d99b71 !important; }
.frame-yellow .card { border-color: #d1c968 !important; }
.frame-yellow .card-header { background: #fffac2 !important; border-bottom-color: #d1c968 !important; }
.frame-green .card { border-color: #88b17f !important; }
.frame-green .card-header { background: #c3dcbe !important; border-bottom-color: #88b17f !important; }
.frame-mint .card { border-color: #7faeaa !important; }
.frame-mint .card-header { background: #bad4d1 !important; border-bottom-color: #7faeaa !important; }
.frame-blue .card { border-color: #8094aa !important; }
.frame-blue .card-header { background: #b4c1d1 !important; border-bottom-color: #8094aa !important; }
.frame-purple .card { border-color: #9275ad !important; }
.frame-purple .card-header { background: #c5b2d6 !important; border-bottom-color: #9275ad !important; }
.frame-gray .card { border-color: #9ca8b3 !important; }
.frame-gray .card-header { background: #d7dde3 !important; border-bottom-color: #9ca8b3 !important; }

/* =====================================================
   5．アクセシビリティバー（崩れ防止・堅牢化改訂版）
===================================================== */

#ym-accessibility-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 1000 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #0b49a0 0%, #062c70 58%, #041f55 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 14px rgba(7, 39, 91, 0.24) !important;
}

#ym-accessibility-bar * {
    box-sizing: border-box !important;
}

#ym-accessibility-bar .ym-accessibility-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
}

#ym-accessibility-bar .ym-accessibility-symbol {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 36px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
}

#ym-accessibility-bar .ym-accessibility-symbol i {
    font-size: 36px !important;
    color: #ffffff !important;
}

#ym-accessibility-bar .ym-accessibility-title-wrap {
    display: flex !important;
    flex-direction: column !important;
}

#ym-accessibility-bar .ym-accessibility-title {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

#ym-accessibility-bar .ym-accessibility-subtitle {
    color: #ffffff !important;
    font-size: 11px !important;
    opacity: 0.9 !important;
    white-space: nowrap !important;
}

#ym-accessibility-bar .ym-accessibility-panel {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

#ym-accessibility-bar .ym-accessibility-inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

#ym-accessibility-bar .ym-accessibility-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#ym-accessibility-bar .ym-accessibility-label {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

#ym-accessibility-bar .ym-segmented-control {
    display: inline-flex !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

#ym-accessibility-bar .ym-segmented-control button {
    min-width: 44px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#ym-accessibility-bar .ym-segmented-control button:last-child {
    border-right: none !important;
}

#ym-accessibility-bar .ym-segmented-control button.is-active {
    background: #ffffff !important;
    color: #12335c !important;
    font-weight: 900 !important;
}

#ym-accessibility-bar .ym-color-control {
    display: inline-flex !important;
    gap: 6px !important;
}

#ym-accessibility-bar .ym-color-btn {
    min-width: 38px !important;
    height: 36px !important;
    padding: 0 6px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#ym-accessibility-bar .ym-color-white { background: #ffffff !important; color: #111111 !important; }
#ym-accessibility-bar .ym-color-black { background: #000000 !important; color: #ffffff !important; }
#ym-accessibility-bar .ym-color-blue { background: #1968d2 !important; color: #ffffff !important; }
#ym-accessibility-bar .ym-color-beige { background: #f1dfc3 !important; color: #24170d !important; }

#ym-accessibility-bar .ym-color-btn.is-active {
    border-color: #ffffff !important;
    outline: 2px solid #ffd800 !important;
}

#ym-accessibility-bar .ym-round-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid #ffffff !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 16px !important;
}

#ym-accessibility-bar .ym-read-guide-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

#ym-accessibility-bar .ym-speaker-icon {
    font-size: 20px !important;
    color: #ffffff !important;
}

#ym-accessibility-bar .ym-read-guide-main {
    font-size: 13px !important;
    font-weight: 700 !important;
}

#ym-accessibility-bar .ym-read-guide-sub {
    font-size: 10px !important;
}

/* =====================================================
   6．読み上げ案内ダイアログ
===================================================== */

html.ym-dialog-open,
html.ym-dialog-open body {
    overflow: hidden;
}

.ym-dialog-backdrop {
    position: fixed;
    z-index: 20000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.62);
}

.ym-dialog-backdrop[hidden] {
    display: none !important;
}

.ym-dialog {
    width: min(620px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 24px;
    border: 3px solid #12335c;
    border-radius: 14px;
    background: #ffffff;
    color: #212529;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.ym-dialog h2 {
    margin: 0 0 16px;
    color: #12335c;
    font-size: 1.5rem;
}

.ym-dialog p {
    margin: 0 0 1em;
    line-height: 1.8;
}

.ym-dialog-close {
    min-height: 44px;
    padding: 8px 22px;
    border: 0;
    border-radius: 8px;
    background: #12335c;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.ym-dialog-close:focus-visible {
    outline: 3px solid #ffd800;
    outline-offset: 3px;
}

/* =====================================================
   7．ページ上部へ戻る
===================================================== */

#page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    margin: 0;
}

#page-top a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #12335c;
    color: #ffffff;
    font-size: 2rem;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(18, 51, 92, 0.28);
}

#page-top a:hover {
    background: #2d527f;
    color: #ffffff;
}

#page-top a:focus-visible {
    outline: 3px solid #ffd800;
    outline-offset: 3px;
}

/* =====================================================
   8．文字拡大時の補助
===================================================== */

html.ym-font-large .plugin-menus .nav-tabs,
html.ym-font-xlarge .plugin-menus .nav-tabs {
    flex-wrap: wrap;
}

html.ym-font-large .plugin-menus .nav-tabs li.nav-item,
html.ym-font-xlarge .plugin-menus .nav-tabs li.nav-item {
    min-width: 0;
    flex: 1 1 auto;
}

html.ym-font-large [data-ym-font-recorded="true"],
html.ym-font-xlarge [data-ym-font-recorded="true"] {
    overflow-wrap: anywhere;
    word-break: normal;
}

html.ym-font-large #ccMainArea [data-ym-font-recorded="true"],
html.ym-font-xlarge #ccMainArea [data-ym-font-recorded="true"] {
    line-height: 1.65 !important;
}

html.ym-font-large #ccMainArea img,
html.ym-font-xlarge #ccMainArea img {
    max-width: 100% !important;
    height: auto !important;
}

.plugin-calendars,
.plugin-calendar,
[class*="plugin-calendar"],
[id*="plugin-calendar"],
.plugin-searchs,
.plugin-search {
    max-width: 100%;
    line-height: normal;
}

#ccMainArea .btn,
#ccMainArea .badge,
#ccMainArea button,
#ccMainArea input,
#ccMainArea select,
#ccMainArea textarea {
    line-height: normal;
}

/* =====================================================
   9．ふりがな
===================================================== */

#ccMainArea ruby {
    ruby-position: over;
    ruby-align: center;
    text-emphasis: none;
}

#ccMainArea ruby rt {
    font-size: 0.52em;
    line-height: 1.1;
    letter-spacing: 0.02em;
    font-weight: 500;
    text-align: center;
}

#ccMainArea ruby rp {
    display: none;
}

html.ym-furigana-off #ccMainArea ruby rt,
html.ym-furigana-off #ccMainArea ruby rp {
    display: none !important;
}

@media (max-width: 767px) {
    #ccMainArea ruby rt {
        font-size: 0.56em;
        line-height: 1.05;
        letter-spacing: 0;
    }
}

/* =====================================================
   10．背景色切替
===================================================== */

html.ym-theme-white {
    --ym-page-bg: #ffffff;
    --ym-surface-bg: #ffffff;
    --ym-surface-alt: #f4f6f9;
    --ym-header-bg: #12335c;
    --ym-menu-bg: #12335c;
    --ym-menu-hover: #2d527f;
    --ym-text: #212529;
    --ym-link: #12335c;
    --ym-link-hover: #315f91;
    --ym-border: #c8ced8;
    --ym-input-bg: #ffffff;
    --ym-input-text: #212529;
    --ym-focus: #ffd800;
}

html.ym-theme-black {
    --ym-page-bg: #000000;
    --ym-surface-bg: #000000;
    --ym-surface-alt: #1f1f1f;
    --ym-header-bg: #1f1f1f;
    --ym-menu-bg: #000000;
    --ym-menu-hover: #333333;
    --ym-text: #ffffff;
    --ym-link: #fff36a;
    --ym-link-hover: #7fe7ff;
    --ym-border: #ffffff;
    --ym-input-bg: #111111;
    --ym-input-text: #ffffff;
    --ym-focus: #ffd800;
}

html.ym-theme-blue {
    --ym-page-bg: #063a85;
    --ym-surface-bg: #063a85;
    --ym-surface-alt: #03265c;
    --ym-header-bg: #03265c;
    --ym-menu-bg: #03265c;
    --ym-menu-hover: #001b44;
    --ym-text: #ffffff;
    --ym-link: #fff36a;
    --ym-link-hover: #9beeff;
    --ym-border: #ffffff;
    --ym-input-bg: #03265c;
    --ym-input-text: #ffffff;
    --ym-focus: #ffd800;
}

html.ym-theme-beige {
    --ym-page-bg: #f7efd8;
    --ym-surface-bg: #f7efd8;
    --ym-surface-alt: #e7d5ae;
    --ym-header-bg: #e7d5ae;
    --ym-menu-bg: #5a452b;
    --ym-menu-hover: #3f2d19;
    --ym-text: #1f1a14;
    --ym-link: #12335c;
    --ym-link-hover: #7a2100;
    --ym-border: #6b5b45;
    --ym-input-bg: #fffaf0;
    --ym-input-text: #1f1a14;
    --ym-focus: #d45500;
}

html[class*="ym-theme-"] body,
html[class*="ym-theme-"] #ccMainArea,
html[class*="ym-theme-"] #ccLeftArea,
html[class*="ym-theme-"] #ccRightArea,
html[class*="ym-theme-"] #ccCenterArea,
html[class*="ym-theme-"] #ccHeaderArea,
html[class*="ym-theme-"] #headerArea,
html[class*="ym-theme-"] #ccFooterArea {
    background-color: var(--ym-page-bg) !important;
    color: var(--ym-text) !important;
}

html.ym-theme-black #ccMainArea .card,
html.ym-theme-blue #ccMainArea .card,
html.ym-theme-beige #ccMainArea .card,
html.ym-theme-black #ccMainArea .card-body,
html.ym-theme-blue #ccMainArea .card-body,
html.ym-theme-beige #ccMainArea .card-body,
html.ym-theme-black #ccLeftArea .card,
html.ym-theme-blue #ccLeftArea .card,
html.ym-theme-beige #ccLeftArea .card,
html.ym-theme-black #ccRightArea .card,
html.ym-theme-blue #ccRightArea .card,
html.ym-theme-beige #ccRightArea .card {
    border-color: var(--ym-border) !important;
    background-color: var(--ym-surface-bg) !important;
    color: var(--ym-text) !important;
}

html.ym-theme-black #ccMainArea :is(p, li, dt, dd, div, span, small, strong, em, b, td, th, h1, h2, h3, h4, h5, h6, figcaption),
html.ym-theme-blue #ccMainArea :is(p, li, dt, dd, div, span, small, strong, em, b, td, th, h1, h2, h3, h4, h5, h6, figcaption),
html.ym-theme-beige #ccMainArea :is(p, li, dt, dd, div, span, small, strong, em, b, td, th, h1, h2, h3, h4, h5, h6, figcaption) {
    color: var(--ym-text) !important;
}

html.ym-theme-black #ccMainArea a,
html.ym-theme-blue #ccMainArea a,
html.ym-theme-beige #ccMainArea a {
    color: var(--ym-link) !important;
    text-decoration-color: var(--ym-link) !important;
}

html.ym-theme-black #ccMainArea a:hover,
html.ym-theme-blue #ccMainArea a:hover,
html.ym-theme-beige #ccMainArea a:hover {
    color: var(--ym-link-hover) !important;
    text-decoration-color: var(--ym-link-hover) !important;
}

html.ym-theme-black .plugin-menus a,
html.ym-theme-blue .plugin-menus a,
html.ym-theme-beige .plugin-menus a {
    border-color: var(--ym-border) !important;
    background-color: var(--ym-menu-bg) !important;
    color: #ffffff !important;
    text-decoration-color: #ffffff !important;
}

html.ym-theme-black .plugin-menus a:hover,
html.ym-theme-black .plugin-menus a:focus-visible,
html.ym-theme-black .plugin-menus a.active,
html.ym-theme-blue .plugin-menus a:hover,
html.ym-theme-blue .plugin-menus a:focus-visible,
html.ym-theme-blue .plugin-menus a.active,
html.ym-theme-beige .plugin-menus a:hover,
html.ym-theme-beige .plugin-menus a:focus-visible,
html.ym-theme-beige .plugin-menus a.active {
    background-color: var(--ym-menu-hover) !important;
    color: #fff36a !important;
}

html.ym-theme-black input,
html.ym-theme-black select,
html.ym-theme-black textarea,
html.ym-theme-blue input,
html.ym-theme-blue select,
html.ym-theme-blue textarea,
html.ym-theme-beige input,
html.ym-theme-beige select,
html.ym-theme-beige textarea {
    border-color: var(--ym-border) !important;
    background-color: var(--ym-input-bg) !important;
    color: var(--ym-input-text) !important;
}

html.ym-theme-black #ccMainArea img,
html.ym-theme-blue #ccMainArea img,
html.ym-theme-beige #ccMainArea img {
    filter: none !important;
    opacity: 1 !important;
}

/* =====================================================
   11．レスポンシブ崩れ防止用調整
===================================================== */

@media (max-width: 991px) {
    #ym-accessibility-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}

/* =====================================================
   12．Q&Aトグル スタイル
===================================================== */

.qa-container {
  font-size: 20px;
  line-height: 1.7;
  margin: 20px 0;
}

.qa-header-info {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-info-img {
  vertical-align: middle;
  width: 67px;
  max-height: 63px;
  border: 0;
}

.qa-details {
  border: 2px solid currentColor;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
}

.qa-summary {
  padding: 15px 20px;
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
  background-color: rgba(128, 128, 128, 0.15);
  outline-offset: -2px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 15px;
}

.qa-summary::-webkit-details-marker {
  display: none;
}

.qa-summary:hover,
.qa-summary:focus-visible {
  background-color: rgba(128, 128, 128, 0.35);
  outline: 3px solid currentColor;
}

.qa-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.qa-q-prefix {
  font-weight: 900;
  font-size: 1.1em;
}

.qa-text-wrapper {
  flex-grow: 1;
}

.btn--circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  color: currentColor; 
  background-color: rgba(128, 128, 128, 0.2); 
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .4);
  flex-shrink: 0;
  box-sizing: border-box;
}

.btn--circle i {
  font-size: 160%;
  line-height: 54px;
  font-style: normal;
  font-weight: 900;
  transition: all .3s;
  letter-spacing: 0;
}

.btn--circle i::before {
  content: "→";
}

.qa-details[open] .btn--circle i::before {
  content: "↓";
}

.qa-content {
  padding: 20px;
  border-top: 1px solid currentColor;
}

.qa-a-prefix {
  font-weight: 900;
  margin-right: 4px;
  font-size: 1.1em;
}

.qa-a {
  margin: 0;
}

.qa-close-wrapper {
  display: none;
  justify-content: flex-end;
  margin-top: 15px;
}

.qa-close-btn {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 20px;
  background-color: rgba(128, 128, 128, 0.2);
  color: currentColor;
  border: 2px solid currentColor;
  border-radius: 6px;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .qa-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    font-size: 22px;
  }
  
  .qa-summary-header {
    width: 100%;
  }

  .qa-q-prefix {
    font-size: 26px;
  }

  .qa-text-wrapper {
    width: 100%;
    line-height: 1.5;
  }

  .btn--circle {
    width: 44px;
    height: 44px;
    border-width: 2px;
  }

  .btn--circle i {
    font-size: 120%;
    line-height: 40px;
  }

  .qa-header-info {
    font-size: 22px;
    flex-wrap: wrap;
  }

  .qa-close-wrapper {
    display: flex;
  }
}