@charset "utf-8";
/* CSS Document */
/*class***********************************/
.RBT-1 {
   font-weight: 800 !important;
   font-size: 1.4em !important;
}
.RBTs-1 {
   font-size: 0.9em !important;
}
.small2 {
   font-size: 0.7em !important;
}
.Pindent {
   text-indent: 1em;
   line-height: 1.8;
   margin-top: 0;
   margin-bottom: 1em;
   font-size: 16px;
   letter-spacing: 0em;
}
.Noindent {
   text-indent: 0em;
}
.FontG {
   font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック体", "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif !important;
   font-weight: 700;
}
/*Other***********************************/
body {
   font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.v-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex; /* 縦積み用 */
   flex-direction: column;
   gap: 0px; /* 項目間の余白 */
}
.v-list li {
   border-bottom: 1px solid #D8CC9A;
   font-size: 1.3em;
}
.v-list li:last-child {
   border-bottom: none; /* 最後の項目は線を消す */
}
.v-list li a {
   display: block;
   padding: 16px 0px;
   text-decoration: none;
   color: #222;
   transition: background-color .2s, box-shadow .2s, transform .02s;
}
.v-list li a:hover {
   background: #f7f7f7;
   border-color: #EFE4B6;
}
.v-list li a:focus-visible {
   outline: 2px solid #4b9cff; /* キーボード操作の視認性 */
   outline-offset: 2px;
}
.v-list li a:active {
   transform: translateY(1px);
}
.mainOverlay {
   position: absolute;
   bottom: 30px; /* 下から10px */
   right: 45px; /* 右から10px */
   z-index: 9999; /* 最前面に表示 */
   background: #EFE4B6; /* 白背景 */
   padding: 8px 12px; /* 内側余白 */
   border: 1px solid #ccc; /* 薄いグレーの枠 */
   border-radius: 0px; /* 角丸（お好みで） */
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 影をつけて浮き上がり感 */
   height: auto; /* 高さは常に親要素の40%に固定 */
   width: 250px; /* 幅は最大40%まで */
   overflow-x: hidden; /* 横スクロールを有効化 */
   overflow-y: auto; /* 縦はスクロール禁止、切れてもOK */
   text-align: center; /* 内部の要素を中央寄せ */
}
/* 表示領域 */
.marquee {
   width: 100%; /* 横幅いっぱい */
   overflow: hidden; /* はみ出しを隠す */
   white-space: nowrap; /* 折り返し防止 */
   box-sizing: border-box;
   position: relative;
}
/* 流れるテキスト */
.shinkan {
   display: inline-block;
   animation: marqueeLeftToRight 15s linear infinite;
   color: #9FE384;
}
/* アニメーション */
@keyframes marqueeLeftToRight {
   0% {
      transform: translateX(-300%); /* 左の外から登場 */
   }
   80% {
      transform: translateX(300%); /* 右の外に流れきる */
   }
   100% {
      transform: translateX(300%); /* 少し待機（空白時間を演出） */
   }
}
footer {
   font-size: 0.8em;
   border-top: 1px solid;
   margin-top: 30px;
   padding: 10px 0px;
   text-align: center;
}
/* 見た目調整用のカスタムプロパティ */
.hamburger {
   --size: 40px; /* クリック領域のサイズ */
   --bar-h: 3px; /* 線の太さ */
   --bar-color: #222; /* 線の色 */
}
/* チェックボックスは画面外へ（キーボード操作は可能） */
.menu-toggle {
   position: absolute;
   left: -9999px;
}
/* ハンバーガー本体（クリック領域） */
.hamburger {
   display: inline-block;
   width: var(--size);
   height: var(--size);
   position: relative;
   cursor: pointer;
   touch-action: manipulation;
   z-index: 9999;
}
/* 3本線：中央線が .bars、上下は ::before / ::after で生成 */
.hamburger .bars, .hamburger::before, .hamburger::after {
   content: "";
   position: absolute;
   left: 8px;
   right: 8px;
   height: var(--bar-h);
   background: var(--bar-color);
   border-radius: 2px;
   transition:
      transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger {
   --gap: 8px;
   --bar-h: 3px;
}
.hamburger .bars, .hamburger::before, .hamburger::after {
   top: 50%;
   transform: translateY(-50%);
}
.hamburger::before {
   margin-top: calc(-1 * var(--gap));
}
.hamburger::after {
   margin-top: var(--gap);
}
/* パラメータ */
.hamburger {
   --gap: 8px; /* 中央からのオフセット量 */
   --bar-h: 3px; /* 線の太さ（偶数だとより綺麗） */
   --bar-color: #222;
}
/* 共通（三本） */
.hamburger .bars, .hamburger::before, .hamburger::after {
   content: "";
   position: absolute;
   left: 8px;
   right: 8px;
   height: var(--bar-h);
   background: var(--bar-color);
   border-radius: 2px;
   top: 50%;
   transform: translateY(-50%);
   transform-origin: 50% 50%; /* ← 回転の支点を中央に */
   transition:
      transform .25s ease, margin-top .25s ease, /* ← これを追加 */ opacity .2s ease;
}
/* 非チェック時：上下を margin でオフセット */
.hamburger::before {
   margin-top: calc(-1 * var(--gap));
}
.hamburger::after {
   margin-top: var(--gap);
}
/* チェック時：上下を中央に“集合”させてから回転 */
.menu-toggle:checked + .hamburger::before {
   margin-top: 0; /* ← リセット */
   transform: translateY(-50%) rotate(45deg);
}
.menu-toggle:checked + .hamburger::after {
   margin-top: 0; /* ← リセット */
   transform: translateY(-50%) rotate(-45deg);
}
.menu-toggle:checked + .hamburger .bars {
   opacity: 0;
   transform: translateY(-50%) scaleX(0);
}
@media (max-width: 768px) {
   .drawer {
      position: fixed;
      top: 0;
      left: 0;
      width: 60%; /* メニューの幅 */
      height: 100%;
      background: #fff;
      transform: translateX(-1000px); /* 初期は左に隠す */
      transition: transform .5s ease;
      z-index: 9998;
      padding: 16px;
      box-shadow: 2px 0 10px rgba(0, 0, 0, .15);
   }
}
/*★ body が「#menu-toggle:checked」を含んでいたら drawer を表示*/
body:has(#menu-toggle:checked) .drawer {
   transform: translateX(0);
}
/*ContentArea***********************************/
.ContentArea {
   font-size: 1.3em;
}
.ContentArea h2 {
   font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
   font-size: 1.3em !important;
   font-weight: 500;
   background: linear-gradient(90deg, #a8dadc 0%, #ffffff 100%);
   padding: 0.6em;
   margin-bottom: 1.3em;
   letter-spacing: 0.05em;
}
.ContentArea h3 {
   font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
   font-size: 0.9em !important;
   font-weight: 1000;
   border-left: 6px solid #B39C00;
   padding: 0.4em;
   margin-top: 1.3em;
}
.ContentArea h4 {
   font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
   font-size: 0.9em !important;
   font-weight: 1000;
   padding: 0em;
   color: #1358D0;
   margin-bottom: 0.3em;
   margin-top: 1em;
}
.ContentArea h4::before {
   content: "【";
   margin-right: 0.1em;
   margin-left: -0.6em;
   color: inherit;
}
.ContentArea h4::after {
   content: "】";
   margin-left: 0.1em;
   color: inherit;
}
.ContentArea p {
   font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
   font-size: 0.9em;
   line-height: 1.6;
   margin-bottom: 0rem !important;
   text-align: justify;
}
.ContentArea p.no-justify {
   text-align: left !important;
   white-space: nowrap;
}
.table-responsive .table.text-nowrap tr th {
   background-color: #F1F1F1;
}
.icon-em {
   width: 0.8em !important;
   height: 0.8em !important;
   display: inline-block;
   line-height: 1;
   vertical-align: 0.1em;
}
.bookLis {
   border: 1px solid #ddd;
   border-radius: 4px;
   list-style: none;
   padding-left: 0;
   font-size: 0.8em;
   width: 65%;
   margin: 0 auto;
}
.bookLis li {
   padding: 0.3em;
   border-bottom: 1px solid #ddd;
}
.bookLis li:last-child {
   border-bottom: none;
}
.BookImg {
   max-width: 85px;
   height: 151px;
}
.Details {
   width: 35% !important;
   display: block;
   margin: 30px auto 0 auto;
   border: solid 3px #ddd;
   border-radius: 12px;
}
/*パンくずリスト***********************************/
.BooKbreadcrumb {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   font-size: 14px;
   padding: 0.4em;
   margin-bottom: 1.5em;
}
.BooKbreadcrumb li {
   display: flex;
   align-items: center;
}
.BooKbreadcrumb li + li:before {
   content: "＞"; /* 区切り記号（> や / に変えてもOK） */
   padding: 0 8px;
   color: #ddd;
}
.BooKbreadcrumb a {
   text-decoration: none;
   color: #0073aa;
}
.BooKbreadcrumb a:hover {
   text-decoration: underline;
}
.ContentArea .text-cr p, .ContentArea .text-cr li, .ContentArea .text-cl p, .ContentArea .text-cl li {
   text-align: center;
}
.RIfO {
   margin-top: 0.5em;
   padding: 0.5em;
   background-color: #E5ECFF;
   border-radius: 10px;
}
@media (min-width: 768px) {
   .ContentArea .text-cr p, .ContentArea .text-cr li {
      text-align: right;
   }
   .ContentArea .text-cl p, .ContentArea .text-cl li {
      text-align: left;
   }
   .bookLis {
      width: 60%;
      margin: 0;
   }
   .BookImg {
      max-width: 100% !important;
      height: auto !important;
   }
   .Details {
      width: 25% !important;
      display: block;
      margin: 20px 0 0 0;
   }
}