@charset "utf-8";
/* ///////////////////////////////////////////////////////////////////// 
//  基本style.cssに対する書き換え箇所
///////////////////////////////////////////////////////////////////// */
body {}
body:before {
  background-image: url();
}
main {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #262626;
  font-size: 1.0rem;
  line-height: 1.5em;
  letter-spacing: 0.05em;
}
.katakana {
  letter-spacing: -0.05em;
}
.small {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #000;
  font-size: 13px;
  line-height: 1.4em;
}
.fs-4-spsmall {
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  .fs-4-spsmall {
    font-size: 1.2rem;
  }
}
.table-text {
  letter-spacing: 0.04em;
  font-size: 1.0rem;
}
@media screen and (max-width: 768px) {
  .table-text {
    letter-spacing: 0.05em;
    line-height: 1.4em;
    font-size: 0.6rem;
  }
}
h2 {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 500;
  font-size: 40px; /* お好みで調整してください */
  text-align: center; /* 中央揃え（テキスト自体の中央寄せ） */
  line-height: 1.4; /* 行間を少し広めに */
  letter-spacing: 0.1em;
}
@media screen and (max-width: 480px) {
  h2 {
    padding-top: 20px;
    font-size: 32px; /* スマホ表示用の小さいフォントサイズ */
    max-width: 80%; /* 要素の横幅を制限 */
    margin: 0 auto; /* 左右中央配置 */
  }
}
h3 {
  margin: 0;
  position: relative;
  line-height: 2;
  padding: 0.1em 2em;
  display: inline-block;
  top: 0;
  border-bottom: none;
  color: #333;
}
h3:before, h3:after {
  position: absolute;
  content: '';
  top: 0;
  width: 8px;
  height: 100%;
  display: inline-block;
}
h3:before {
  border-left: solid 3px #0f48ba;
  border-top: solid 3px #0f48ba;
  border-bottom: solid 3px #0f48ba;
  left: 0;
}
h3:after {
  border-top: solid 3px #0f48ba;
  border-right: solid 3px #0f48ba;
  border-bottom: solid 3px #0f48ba;
  right: 0;
}
h4 {
  font-size: 1.8rem;
}
h5 {
  font-size: 1.3rem;
  color: #333;
  position: relative;
  padding: 1rem .5rem;
}
h5:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(right, #31a5ae 0%, #add13d 100%);
  background-image: linear-gradient(to left, #31a5ae 0%, #add13d 100%);
}
h6 {
  color: #000000;
  font-size: 1.1rem;
  position: relative;
  padding: 0.5rem 1rem;
  border: 3px solid #d8d8d8;
  border-radius: 10px;
  background: #f9f9f9;
  line-height: 1.9rem; /*行間230327*/
}
h6:before {}
h6:after {}
#PANQUZLIST {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #000;
  font-size: 14px;
  line-height: 1.4em;
}
a { /* リンクテキスト・hoverでゆっくり変色 */
  transition: all 0.2s ease-out;
  color: #083898;
  text-decoration: none; /* リンクの下線を出さない */
}
a:focus, a:hover {
  text-decoration: none;
  color: #fe5b02;
}
.side-line_bg_op_blue {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}
.side-line_bg_op_blue span {
  font-size: 1.2rem;
  color: #fff;
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: rgba(24, 115, 204, 1);
  text-align: left;
}
.side-line_bg_op_blue:before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.side-line_bg_op_yellow {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}
.side-line_bg_op_yellow span {
  font-size: 1.2rem;
  color: #000;
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: rgba(254, 227, 1, 1);
  text-align: left;
}
.side-line_bg_op_yellow:before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000;
}
/* ///////////////////////////////////////////////////////////////////// 
//  Bootstrap5に対する書き換え箇所
///////////////////////////////////////////////////////////////////// */
/* 帯の角丸 */
.rounded-4 {
  border-radius: .5rem;
}
.rounded-5 {
  border-radius: 1rem;
}
/* ///////////////////////////////////////////////////////////////////// 
//  このサイトのオリジナルCSS
///////////////////////////////////////////////////////////////////// */
/* スマホの時の上部空き（ヘッダーナビ下部分） */
@media screen and (min-width: 576px) and (max-width: 992px) {
  .head-space {
    margin-top: 60px;
  }
}
/* PCの時の上部空き（ヘッダーナビ下部分） */
@media screen and (min-width: 992px) {
  .head-space {
    margin-top: 147px;
  }
}
/* 左側ナビを sticky 固定 */
.recop_page_left {
  width: 236px; /* クラスleftnav-bgでも236px指定 */
  flex-shrink: 0;
  /* 既存の overflow: hidden; は削除（sticky 動作の邪魔になるため） */
}
@media (max-width: 992px) {
  .recop_page_left {
    display: none;
  }
}
/* 右側のコンテンツ */
.recop_page_right {
  flex-grow: 1;
  padding-right: 0px;
}
@media (max-width: 992px) {
  .recop_page_right {
    padding-right: 0px;
  }
}
/* HOMEの背景画像 */
.bg_recruit_operator_cp_home {
  background-image: url('../img/recruit_operator_cr_home.jpg'); /* 画像のパスを指定 */
  background-size: cover; /* 画像をコンテナにフィットさせる */
  background-position: center; /* 画像を中央配置 */
  background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
  background-attachment: fixed; /* 背景画像を固定 */
}
/* pageの背景画像 */
.bg_recruit_operator_cp_page {
  background-image: url("../img/recruit_operator_cr_page.jpg");
  background-position: right top; /* 常に上部・右詰め */
  background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
  background-size: auto; /* 画像サイズは固定（デフォルト） */
}
.recop_pagetitle-box {
  margin-top: 98px;
}
@media (max-width: 992px) {
  .recop_pagetitle-box {
    margin-top: 60px;
  }
}
.color_rec_op_cr_blue {
  background: url("../img/site-bg-noise.png") no-repeat left top;
  background-color: #073ca5;
}
.recop_pagetitle {
  text-align: right;
  margin-top: 10px;
  padding-bottom: 4px;
}
.recop_pagetitle_img {
  width: 300px; /* 最大幅を300pxに */
  max-width: 100%; /* 画面サイズが小さいときは自動縮小 */
  aspect-ratio: 185 / 23; /* 縦横比を固定（例: 16:9） */
  height: auto; /* 明示的に指定しない */
}
@media screen and (max-width: 480px) {
  .recop_pagetitle_img {
    display: block; /* ブロック要素にしてマージンが有効に */
    margin: 0 auto; /* 左右中央配置 */
  }
}
a.button-txt01 {
  color: #000;
  font-size: 16px;
  line-height: 1.9em;
  letter-spacing: 0.02em;
  font-weight: 500;
}
a.button-txt01:focus, a:hover {
  text-decoration: none;
  color: #fe5b02;
}
.bg_op_blue {
  background-color: #1873CC;
}
.bg_op_brightblue {
  background-color: #35ADF9;
}
.bg_op_brightyellow {
  background-color: #FEF28B;
}
.bg_op_yellow {
  background-color: #FEE301;
}
.bg_op_white {
  background-color: rgba(255, 255, 255, 0.5);
}
.bg_op_cr_gray {
  background-color: #ececec;
}
.bg_op_cr_blue {
  background: url("../img/site-bg-noise.png") no-repeat left top;
  background-color: #073ca5; /* 初期値を575px以下に合わせる */
}
/* 576px以上のとき */
@media (min-width: 576px) {
  .bg_op_cr_blue {
    background: url("") no-repeat left top;
    background-color: none; /* 透明 */
  }
}
/* ------------------------------------------------- *
 *        HOMEメインビジュアル
 * ------------------------------------------------- */
.parallax-window-mainvisual {
  min-height: 360px; /* メインビジュアルの縦幅 */
  max-height: 360px; /* メインビジュアルの縦幅 */
  background: transparent;
}
#main_visual {
  position: relative;
}
#main_visual .main_title {
  position: absolute;
  top: 50px;
  left: 50px;
}
#main_visual .main_top {
  position: absolute;
  top: 0%;
  left: 0%;
}
#main_visual .main_bottom {
  position: absolute;
  bottom: 0%;
  right: 0%;
}
/* ------------------------------------------------- *
 *        PAGEヘッドタイトル
 * ------------------------------------------------- */
.parallax-window-pagehead {
  min-height: 130px; /* ヘッドビジュアルの縦幅 */
  max-height: 130px; /* ヘッドビジュアルの縦幅 */
  background: transparent;
}
#page_head_title {
  position: relative;
}
#page_head_title .page_title {
  position: absolute;
  top: 50px;
  left: 50px;
}
/* ------------------------------------------------- *
 *        グーグルマップ
 * ------------------------------------------------- */
.gmap-gray-scale iframe {
  filter: grayscale(100%);
}
.gmap-gray-scale-hover iframe:hover {
  filter: grayscale(0%);
}
/* ------------------------------------------------- *
 *        背景グラデーション
 * ------------------------------------------------- */
/* ///////////////////////////////////*/
/* 背景グラデーションアニメ02 */
.gradebox02 {
  width: 100%;
  color: #fff;
  background: linear-gradient(241deg, #000b3b, #0c2e36, #0b0a0a);
  background-size: 600% 600%;
  -webkit-animation: AnimationName 6s ease infinite;
  -moz-animation: AnimationName 6s ease infinite;
  animation: AnimationName 6s ease infinite;
}
@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 74%
  }
  50% {
    background-position: 100% 27%
  }
  100% {
    background-position: 0% 74%
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 74%
  }
  50% {
    background-position: 100% 27%
  }
  100% {
    background-position: 0% 74%
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 74%
  }
  50% {
    background-position: 100% 27%
  }
  100% {
    background-position: 0% 74%
  }
}
/* ------------------------------------------------- *
 *        オンマウススケールアップボタン
 * ------------------------------------------------- */
.img_box {
  overflow: hidden;
  position: relative;
}
.img_box:before {
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.scale_up {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.scale_up img {
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
}
.scale_up img:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
/* ///////////////////////////////////////
//  レイヤー構造 左下に影：
//////////////////////////////////////////*/
.parent {
  position: relative;
}
.parent-img {
  position: relative;
}
/* 斜線影（左下） */
.child_leftbottom_line {
  height: 60%;
  width: 40%;
  position: absolute;
  background-color: #ccc;
  background-image: repeating-linear-gradient(-45deg, #fff, #fff 4px, transparent 0, transparent 8px);
  bottom: -10px;
  left: -10px;
  mix-blend-mode: multiply;
}
/* ドット影（左下） */
.child_leftbottom_dot {
  height: 60%;
  width: 40%;
  position: absolute;
  background-image:
    radial-gradient(#000 20%, transparent 20%), radial-gradient(#000 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px; /* background-sizeの半分の値 */
  bottom: -12px;
  left: -12px;
}
/* ------------------------------------------------- *
 *        timeline
 * ------------------------------------------------- */
.timeline {
  list-style: none;
}
.timeline > li {
  overflow: hidden;
  margin: 0;
  position: relative;
}
.timeline-date {
  font-weight: bold;
  width: 71px; /*ここのサイズを変えるたらマルの位置も変更要*/
  float: left;
  margin-top: 15px;
}
.timeline-content {
  width: 75%;
  float: left;
  border-left: 3px #e5e5d1 solid;
  padding-left: 30px;
}
.timeline-content:before { /*マルの設定*/
  content: '';
  width: 12px;
  height: 12px;
  background-color: #666666;
  position: absolute;
  left: 67px;
  top: 24px;
  border-radius: 100%;
}
p.timeline { /*黒帯の設定*/
  padding: 3px 5px 5px 10px;
  display: block;
  border-radius: 5px;
  color: #FFFFFF;
  background-color: #000000;
  margin-top: 13px;
}
/* ///////////////////////////////////////
//  動く矢印リンクボタン：
//////////////////////////////////////////*/
/*矢印が右に移動する*/
.btnarrow4 {
  /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
  /*形状*/
  display: inline-block;
  padding: 0 20px;
  color: #000;
  text-decoration: none;
  outline: none;
}
/*矢印と下線の形状*/
.btnarrow4::before {
  content: '';
  /*絶対配置で下線の位置を決める*/
  position: absolute;
  bottom: -8px;
  left: 15%;
  /*下線の形状*/
  width: 85%;
  height: 1px;
  background: #333;
  /*アニメーションの指定*/
  transition: all .3s;
}
.btnarrow4::after {
  content: '';
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  bottom: -3px;
  right: 0;
  /*矢印の形状*/
  width: 15px;
  height: 1px;
  background: #333;
  transform: rotate(35deg);
  /*アニメーションの指定*/
  transition: all .3s;
}
/*hoverした際の移動*/
.btnarrow4:hover::before {
  left: 20%;
}
.btnarrow4:hover::after {
  right: -5%;
}
/* ///////////////////////////////////////
//  レイヤー構造　中央下部に少し乗せた見出し：
//////////////////////////////////////////*/
.parent_centerbottom-over {
  position: relative;
  height: 100%;
}
.child_centerbottom-over {
  background-color: #FFF;
  position: absolute;
  padding: 2px;
  text-align: center;
  width: 80%;
  bottom: 0%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, 50%);
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
}
/* ///////////////////////////////////////
//  斜線影があるボタン
//////////////////////////////////////////*/
.parent_leftbottom_line {
  position: relative;
  margin-bottom: 1.4rem;
}
.box_leftbottom_line {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  position: relative;
  width: 100%; /* ボタンの幅 */
  margin: auto;
  padding: 0.5rem 0.5rem;
  font-size: 1.3rem;
  font-weight: bold;
  background: #fff;
  border-radius: 10px;
  color: #000;
  border: 3px solid #000;
  transition: 0.3s ease-in-out;
}
a.box_leftbottom_line:hover {
  background: #000;
  color: #FFF;
}
.child_leftbottom_line {
  height: 60%;
  width: 40%;
  position: absolute;
  background-color: #000; /* 斜線の色 */
  background-image: repeating-linear-gradient(-45deg, #FFF, #FFF 4px, transparent 0, transparent 8px);
  bottom: -10px;
  left: -10px;
  mix-blend-mode: multiply;
}
/* ///////////////////////////////////////
//  左ナビゲーション
//////////////////////////////////////////*/
.imairu {
  font-weight: bold;
  color: #ff9700;
  font-size: 1.0rem;
}
.leftnav-sticky {
  top: 100px !important;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
  transform: translateY(0);
}
/* 非表示状態用のクラス */
.leftnav-sticky.fade-out {
  opacity: 0;
  transform: translateY(10px); /* 下に少し移動して消える演出（任意） */
  pointer-events: none; /* クリック等の操作を無効にする場合 */
}
/* メガメニュー(999)より低くする */
.leftnav-sticky.fixed-top {
  z-index: 500;
}
/*----------------------------------------
      2. leftnav_bg-blue.png（左の青背景）
         - サイト上部から55px
         - 幅236px, 高さ500px
    ----------------------------------------*/
.leftnav-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 236px;
  height: 500px;
  z-index: 1;
  background: url("../img/site-bg-noise.png") no-repeat left top;
  background-color: #073ca5;
  background-size: cover;
}
@media (min-width: 1400px) {
  .leftnav-bg {
    height: 580px;
  }
}
/*----------------------------------------
      3. テキストリンク（メニュー部分）
         - 通常：白色
         - オンマウス：#ffe200 (イージング)
    ----------------------------------------*/
.leftnav-menu {
  position: absolute;
  top: 50px; /* 固定サイトタイトルヘッド帯分の逃げ調整 */
  left: 10px;
  z-index: 2;
  list-style: none;
  line-height: 1.2em;
  margin: 0;
  padding: 0;
}
.leftnav-menu li {
  margin-bottom: 20px; /* 行間調整 */
}
/* 左ナビ用アイコン付きリスト共通設定 */
.leftnav-menu li {
  position: relative;
  padding-left: 22px; /* アイコン分のスペースを確保 */
  margin-bottom: 20px; /* 既存と同じ行間 */
}
/* デフォルトアイコン（A） */
.leftnav-menu li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("../img/op_cr_list_icon_a.png") no-repeat center center;
  background-size: contain;
}
/* アイコンBに切り替えたい場合 */
.leftnav-menu li.icon-b::before {
  background-image: url("../img/op_cr_list_icon_b.png");
}
.leftnav-menu a {
  color: #fff; /* 通常時の文字色(白) */
  text-decoration: none;
  font-size: 1rem; /* 必要に応じて調整 */
  transition: color 0.3s ease; /* イージングによるホバー変色 */
}
.leftnav-menu a:hover {
  color: #ff9700; /* ホバー時の文字色を#ffe200に変更 */
}
/*----------------------------------------
      4. ドット模様, ライン, ENTRYボタン
         - leftnav_dot.png, leftnav_straightline(代替CSS), leftnav_entry.png
    ----------------------------------------*/
/* ドット模様
       - サイト上部から18px
       - サイト左端から196px
       - leftnav_bg-blue.png (top:55px) より上に少しはみ出す */
.leftnav-dot {
  position: absolute;
  top: 18px;
  left: 196px;
  z-index: 3;
  width: 50px; /* 画像の実寸に合わせる */
  height: auto;
}
/* ENTRYボタン
       - 「保護者の皆さまへ」リンクの下45px
         → ざっくり計算で top: 485px などに調整
       - leftnav_bg-blue.png に少し重なる想定
    */
.leftnav-entry {
  position: absolute;
  top: 500px; /* 実際のメニュー位置に合わせて要微調整 */
  left: 40px; /* テキストと同じX座標 */
  z-index: 3;
  width: 140px; /* 画像サイズに合わせる */
  height: auto;
  cursor: pointer;
}
/* leftnav_straightline：左端から23px、アニメーションは2秒待って開始 */
.leftnav-line {
  position: absolute;
  top: 0; /* 開始位置(ページ上部) */
  left: 23px; /* 左端から23px */
  width: 2px; /* 線の太さ */
  height: 0; /* 初期状態は高さ0 */
  background: #fff;
  z-index: 3;
  animation: lineGrow 1s ease 2s forwards; /* ページ読み込み時にアニメ開始・2秒のディレイを追加 */
}
@keyframes lineGrow {
  0% {
    height: 0;
  }
  100% {
    height: 600px; /* 必要に応じて調整 */
  }
}
.leftnav-sticky_img {
  margin-top: 10px;
  width: 180px; /* 最大幅を350pxに */
  max-width: 100%; /* 画面サイズが小さいときは自動縮小 */
}
/* ///////////////////////////////////////
//  ブロックタイトル
//////////////////////////////////////////*/
/* 親要素 */
.block_title {
  position: relative;
  width: 500px;
  height: 80px;
  overflow: visible;
}
/* ③ドット模様 */
.block_title_dot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 103px;
  height: 60px;
  z-index: 1;
}
/* ②青い帯 */
.title_blue_bar {
  position: absolute;
  bottom: 25px;
  left: 18px;
  height: 40px;
  width: 0;
  background-color: #0079ba;
  z-index: 2;
  transition: width 1s ease;
}
/* ①テキストをマスクするためのラッパ */
.block_title_text_mask {
  position: absolute;
  bottom: 25px;
  left: 18px;
  width: 0;
  overflow: hidden;
  z-index: 3;
  transition: width 1s ease 0.2s;
}
/* テキスト自体のスタイル */
.block_title_text {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 500;
  margin: 0.0.0.0;
  text-align: left;
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}
/* スマホ用（画面幅768px以下）の調整例 */
@media screen and (max-width: 768px) {
  .block_title {
    max-width: 350px; /* スマホ用の最大幅350px */
    width: 100%;
    height: 70px;
    position: relative;
  }
  .title_blue_bar {
    bottom: 14px;
    left: 10px;
    /* 初期状態は幅0; JavaScriptでアニメーション時に変更 */
    width: 0;
    transition: width 1s ease;
  }
  .block_title_text_mask {
    bottom: 20px;
    left: 10px;
    width: 0; /* JavaScriptで幅を指定 */
    overflow: hidden;
    transition: width 1s ease 0.2s;
  }
  .block_title_text {
    font-size: 22px;
    /* ※もしBootstrapの余白クラス(ps-3)が影響する場合は上書きする */
    padding-left: 10px !important; /* 以前の指示通りの例 */
  }
}
/* ///////////////////////////////////////
//  ローカルナビゲーション
//////////////////////////////////////////*/
.arrow_r_b {
  position: relative;
  display: inline-block;
  padding-left: 22px;
  font-size: 14px;
  color: #333; /* リンクテキストの通常時カラー */
}
.arrow_r_b:hover {
  color: #666; /* リンクテキストのホバー時カラー */
}
.arrow_r_b:before {
  content: '';
  width: 16px;
  height: 16px;
  background: #0079ba;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.arrow_r_b:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 4px;
  bottom: 0;
  margin: auto;
}
/* ///////////////////////////////////////
//  ローカルナビゲーションの帯
//////////////////////////////////////////*/
.page-local-nav {
  /* 初期状態は非表示 */
  display: none;
  /* 背景色を白、かつ25%の不透明度（rgbaで実現） */
  background-color: rgba(255, 255, 255, 0.25);
  /* 角を丸める（rounded-3 相当、約0.3rem） */
  border-radius: 0.3rem;
  /* 左右に1remのマージン（mx-3 相当） */
  margin-left: 1rem;
  margin-right: 1rem;
  /* 下に1.5remのマージン（mb-4 相当） */
  margin-bottom: 1.5rem;
}
/* 992px以上（lgブレークポイント）で表示する */
@media (min-width: 1100px) {
  .page-local-nav {
    display: block;
  }
}
/* ///////////////////////////////////////
//  コンポーネント：半透明のブロック
//////////////////////////////////////////*/
.component {
  /* 背景：白色を25%の不透明度で設定 */
  background-color: rgba(255, 255, 255, 0.25);
  /* 角を丸める（例として0.3remの半径） */
  border-radius: 0.3rem;
  /* 左右のマージン */
  margin-left: 1rem;
  margin-right: 1rem;
  /* 小さい画面での左右パディング */
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  /* 下側のパディング */
  padding-bottom: 1rem;
}
/* 画面幅が768px以上の場合（mdブレイクポイント） */
@media (min-width: 768px) {
  .component {
    /* 左右パディングをpx-md-5に合わせて3remに上書き */
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
/* ///////////////////////////////////////
//  エレメント：コンポーネント中のブロックスタイル
//////////////////////////////////////////*/
.element-01 {
  border-radius: 0.3rem; /* rounded-3 */
  background-color: rgba(255, 255, 255, 0.25); /* bg-white + bg-opacity-25 */
  padding: 1rem; /* p-3 */
}
/* ///////////////////////////////////////
//  マーカーライン
//////////////////////////////////////////*/
.under {
  background: linear-gradient(transparent 10%, #fde77f 80%);
}
.under_orange {
  background: linear-gradient(transparent 10%, #fdbd7f 80%);
}
/* ///////////////////////////////////////
//  ヒーローレイヤー（画像幅1100px）
//////////////////////////////////////////*/
/* レイヤーコンテナの設定 */
.herolayer-container {
  position: relative;
  width: 100%;
  max-width: 1100px; /* 画像の幅に合わせる */
  margin: 0 auto;
}
.herolayer-container::after {
  content: "";
  display: block;
  padding-bottom: 41.25%; /* 次に来るコンテンツとの間隔をみながら%を調整 */
}
/* 各レイヤーの基本設定 */
.herolayer {
  position: absolute;
  top: 0;
  left: 0;
}
/* レイヤーごとのスタイル設定 */
.herolayer.layer1 {
  z-index: 3;
}
.herolayer.layer2 {
  z-index: 2;
}
.herolayer.layer3 {
  z-index: 1;
}
/*-----------------------------------------
左向き　ボーダーなし
-------------------------------------------*/
.balloon2-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 15px 15px;
  min-width: 120px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}
.balloon2-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid rgba(255, 255, 255, 0.5);
}
.balloon2-left p {
  margin: 0;
  padding: 0;
}
/*-----------------------------------------
右向き　ボーダーあり
-------------------------------------------*/
.balloon2-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 15px 15px;
  min-width: 120px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}
.balloon2-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid rgba(255, 255, 255, 0.5);
}
.balloon2-right p {
  margin: 0;
  padding: 0;
}
/*-----------------------------------------
小見出し：吹き出し（イエロー）
-------------------------------------------*/
.ttl_balloon_yellow {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 500;
  min-width: 150px;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  padding: 0.3em 0.5em 0.2em 0.5em;
  border-radius: 10px;
  background-color: #ffe200;
  position: relative;
  display: inline-block;
}
.ttl_balloon_yellow:before {
  content: '';
  height: 0;
  width: 0;
  border: solid transparent;
  position: absolute;
  left: 30px;
  top: 100%;
  border-color: transparent;
  border-top-color: #ffe200;
  border-right-color: #ffe200;
  border-width: 6.5px;
}
/*-----------------------------------------
強調文字（ブルー）
-------------------------------------------*/
.text-blue {
  font-weight: bold;
  color: #0157b0;
}
/*-----------------------------------------
小見出し：カッコ［］（ブルー）
-------------------------------------------*/
.ttl_kakko {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 500;
  letter-spacing: 0.3em;
  position: relative;
  padding: .5em 1em;
  min-width: 9em;
  display: block;
}
.ttl_kakko::before, .ttl_kakko::after {
  position: absolute;
  width: 10px;
  height: 100%;
  border: 3px solid #0781bd;
  box-sizing: border-box;
  content: '';
}
.ttl_kakko::before {
  top: 0;
  left: 0;
  border-right: none;
}
.ttl_kakko::after {
  bottom: 0;
  right: 0;
  border-left: none;
}
/*-----------------------------------------
ブロック指定：背景に正円
-------------------------------------------*/
.bg_circle {
  position: relative;
  padding-bottom: 10px;
  /*-- border-bottom: 3px solid #0079ba; --*/
  text-align: center; /* 親div内のコンテンツを左右センター揃えに */
}
.bg_circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  aspect-ratio: 1;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1; /* 背景として配置 */
}
/*-----------------------------------------
見出し（lead bootstrap打消し）
-------------------------------------------*/
.lead {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.3em;
  letter-spacing: 0.05em;
}
/*-----------------------------------------
文章ブロックの左上に画像表示(座談会)
-------------------------------------------*/
/* 全体のレイアウト用 */
.comment-section-left {
  display: flex;
  align-items: flex-start; /* テキストと画像の縦位置を揃える */
  max-width: 1200px; /* 任意の最大幅 */
  margin: 0 auto; /* 中央寄せ */
  position: relative; /* 重なりを扱うために relative */
  padding: 20px; /* 適宜余白調整 */
  box-sizing: border-box;
}
/* 左側の吹き出し画像コンテナ */
.comment-image-left {
  position: relative;
  z-index: 2; /* テキストボックスより前面に表示 */
  margin-right: -50px; /* 画像を右のボックスにかぶせる */
}
/* 吹き出し画像自体のスタイル */
.comment-image-left img {
  display: block; /* 余計な隙間をなくす */
  width: auto; /* オリジナルサイズ維持 */
  max-width: 100%; /* レスポンシブ対応 */
  height: auto;
}
/* 右側のテキストボックス */
.comment-text-left {
  position: relative;
  z-index: 1; /* 画像より背面に表示 */
  background-color: #f8f8f8; /* お好みの背景色 */
  padding: 20px; /* 上下左右に 20px */
  padding-left: 80px; /* 左は吹き出し画像を考慮して 80px */
  border-radius: 8px; /* 角丸（お好みで） */
  flex: 1; /* 可変幅 */
  box-sizing: border-box;
  margin-top: 1em;
}
/* スマホなど画面幅が狭い場合（例：768px 以下） */
/* 吹き出し画像を 70% に縮小し、テキストボックスのパディングも同じ割合に調整 */
@media screen and (max-width: 768px) {
  .comment-image-left img {
    width: 70%;
  }
  .comment-text-left {
    /* 元の padding 20px を 70% に、padding-left 80px も 70% に縮小 */
    padding: 14px; /* 上下左右 20px * 0.7 = 14px */
    padding-left: 30px; /* 80px * 0.7 = 56px バランス取るために変更*/
  }
}
/*-----------------------------------------
文章ブロックの右上に画像表示(座談会)
-------------------------------------------*/
/* 全体のレイアウト用 */
.comment-section-right {
  display: flex;
  align-items: flex-start; /* テキストと画像の縦位置を揃える */
  max-width: 1200px; /* 任意の最大幅 */
  margin: 0 auto; /* 中央寄せ */
  position: relative; /* 重なりを扱うために relative */
  padding: 20px; /* 適宜余白調整 */
  box-sizing: border-box;
}
/* 左側のテキストボックス */
.comment-text-right {
  position: relative;
  z-index: 1; /* 画像より背面に表示 */
  background-color: #f8f8f8; /* お好みの背景色 */
  padding: 20px; /* 上下左右に20px */
  padding-right: 80px; /* 右側に吹き出し画像分の余白を追加 */
  border-radius: 8px; /* 角丸（お好みで） */
  flex: 1; /* 可変幅 */
  box-sizing: border-box;
  margin-top: 1em;
}
/* 右側の吹き出し画像コンテナ */
.comment-image-right {
  position: relative;
  z-index: 2; /* テキストボックスより前面に表示 */
  margin-left: -50px; /* 画像を左側のテキストボックスにかぶせる */
}
/* 吹き出し画像自体のスタイル */
.comment-image-right img {
  display: block; /* 余計な隙間をなくす */
  width: auto; /* オリジナルサイズ維持 */
  max-width: 100%; /* レスポンシブ対応 */
  height: auto;
}
/* スマホなど画面幅が狭い場合（例：768px 以下） */
/* 画像のサイズを70％に縮小し、テキストボックスのパディングも同じ割合に調整 */
@media screen and (max-width: 768px) {
  .comment-image-right img {
    width: 70%;
  }
  .comment-text-right {
    padding: 14px; /* 20pxの70％ → 14px */
    padding-right: 56px; /* 80pxの70％ → 56px */
  }
}
/*-----------------------------------------
ブロック指定：角R
-------------------------------------------*/
/* 背景色：ブルー */
.box-kador-blue {
  display: inline-block;
  position: relative;
  padding: .5em 1em;
  border-radius: 50px;
  background-color: #073ca5;
  color: #fff;
}
/* 背景色：明るいブルー */
.box-kador-lightblue {
  font-weight: bold;
  color: #FFF;
  background: #21a3d6; /*背景色*/
  padding: 0.25em 0.5em 0.1em 1em; /*文字まわり（上下左右）の余白*/
  border-radius: 0.5em; /*丸角*/
}
/* 背景色：オレンジ */
.box-kador-orange {
  font-weight: bold;
  color: #FFF;
  background: #ff9700; /*背景色*/
  padding: 0.25em 0.5em 0.1em 1em; /*文字まわり（上下左右）の余白*/
  border-radius: 0.5em; /*丸角*/
}
.box-kador-yellow {
  font-weight: bold;
  background: #f9e887; /*背景色*/
  padding: 0.25em 0.5em 0.1em 1em; /*文字まわり（上下左右）の余白*/
  border-radius: 0.5em; /*丸角*/
}
.box-kador-yellow-sp-samll {
  font-weight: bold;
  background: #f9e887; /*背景色*/
  padding: 0.25em 0.5em 0.1em 1em; /*文字まわり（上下左右）の余白*/
  border-radius: 0.5em; /*丸角*/
}
@media screen and (max-width: 480px) {
  .box-kador-yellow-sp-samll {
    padding: 0.6em 0.9em 0.6em 0.6em; /*文字まわり（上下左右）の余白*/
    font-size: 0.85rem;
    font-weight: bold;
  }
}
/* 背景色：半透明の白 青枠 */
.box-kador-blueborder {
  font-weight: bold;
  background: rgba(255, 255, 255, 0.25);
  padding: 0.25em 0.5em 0.1em 1em; /*文字まわり（上下左右）の余白*/
  border-radius: 0.5em; /*丸角*/
  border: solid 2px #0781bd; /*線色*/
}

/* 計算式に使用している枠 */
.box-kador-white {
  position: relative;
  top: -0.2em;
  font-weight: bold;
  background: #fff;
  padding: 0.1em 0.5em 0.1em 1em;
  border-radius: 0.5em;
  display: inline-block; /* インライン要素として整列 */
}
/* スマホサイズ時のみ keisan-08 の上に余白を追加 */
@media (max-width: 576px) {
  #keisan-08 {
    display: inline-block; /* 改行されてもブロックっぽく扱える */
    margin-top: 0.5em; /* 任意の隙間（調整可能） */
  }
}


/*-----------------------------------------
垂直矢印
-------------------------------------------*/
.bg_vertical-arrow {
  background: url(../img/vertical-arrow.png) no-repeat;
  background-position: top;
}
/*-----------------------------------------
タイムラインのデザイン
-------------------------------------------*/
/* タイムライン全体のスタイル */
.recop-timeline {
  position: relative;
  margin: 50px 0;
  padding-left: 50px;
}
/* 背景の縦ライン */
.recop-timeline::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #21a3d6;
}
/* スクロールに合わせて伸びるライン（transition プロパティでアニメーション時間を3秒に設定） */
.recop-timeline-line {
  position: absolute;
  left: 20px;
  top: 0;
  width: 4px;
  background: #0781bd;
  height: 0;
  transition: height 3s ease-out;
}
/* タイムラインの各項目 */
.recop-timeline-item {
  position: relative;
  margin-bottom: 30px;
}
/* 各項目の丸アイコン */
.recop-timeline-item::before {
  content: "";
  position: absolute;
  left: -43px; /* 調整済みの値 */
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffe200;
  border: 4px solid #0781bd;
}
/* altクラス追加で別色に変更（例として赤色に設定） */
.recop-timeline-item.alt::before {
  background: #0781bd;
}
/*-----------------------------------------
<td>内の高さを調整するため（研修プログラムで使用）
-------------------------------------------*/
#td-001, #td-002, #td-003, #td-004, #td-006, #td-007, #td-008 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
/*-----------------------------------------
　円グラフ
-------------------------------------------*/
/* グラフコンテナの設定（背景用） */
.chart-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ct-chart {
  width: 100%;
  height: 100%;
}
/* 各カラムのレイアウト調整 */
.chart-col {
  position: relative;
  display: flex;
  align-items: center; /* 垂直中央揃え */
  justify-content: center; /* 水平中央揃え */
  height: 300px; /* 高さを統一 */
  border-radius: 10px; /* 角を丸く */
  overflow: hidden;
}
/* テーブルのデザイン */
.overlay-table {
  position: relative;
  z-index: 1;
  padding: 10px;
}
.overlay-table table {
  width: 100%;
  border-collapse: collapse;
}
.overlay-table th, .overlay-table td {
  padding: 8px 12px;
}
/* レスポンシブ調整 */
@media screen and (max-width: 600px) {
  .chart-col {
    height: 250px;
  }
}
/* グラフ1のピース */
.chart-1 .ct-series-a .ct-slice-donut {
  stroke: #f9e887;
} /* 黄色 */
.chart-1 .ct-series-b .ct-slice-donut {
  stroke: #b1e8fc;
} /* 水色 */
.chart-1 .ct-series-c .ct-slice-donut {
  stroke: #f9dcc7;
} /* オレンジ */
.chart-1 .ct-series-d .ct-slice-donut {
  stroke: #e8e6e8;
} /* グレー */
/* グラフ2のピース */
.chart-2 .ct-series-a .ct-slice-donut {
  stroke: #f9e887;
} /* 黄色 */
.chart-2 .ct-series-b .ct-slice-donut {
  stroke: #b1e8fc;
} /* 水色 */
.chart-2 .ct-series-c .ct-slice-donut {
  stroke: #f9dcc7;
} /* オレンジ */
.chart-2 .ct-series-d .ct-slice-donut {
  stroke: #c1e8d5;
} /* 緑色 */
.chart-2 .ct-series-e .ct-slice-donut {
  stroke: #e8e6e8;
} /* グレー */
/* グラフ3のピース */
.chart-3 .ct-series-a .ct-slice-donut {
  stroke: #f9e887;
} /* 黄色 */
.chart-3 .ct-series-b .ct-slice-donut {
  stroke: #b1e8fc;
} /* 水色 */
.chart-3 .ct-series-c .ct-slice-donut {
  stroke: #f9dcc7;
} /* オレンジ */
.chart-3 .ct-series-d .ct-slice-donut {
  stroke: #e8e6e8;
} /* グレー */
/* グラフ4のピース */
.chart-4 .ct-series-a .ct-slice-donut {
  stroke: #f9e887;
} /* 黄色 */
.chart-4 .ct-series-b .ct-slice-donut {
  stroke: #b1e8fc;
} /* 水色 */
.chart-4 .ct-series-c .ct-slice-donut {
  stroke: #e8e6e8;
} /* グレー */
/* グラフ5のピース */
.chart-5 .ct-series-a .ct-slice-donut {
  stroke: #f9e887;
} /* 黄色 */
.chart-5 .ct-series-b .ct-slice-donut {
  stroke: #b1e8fc;
} /* 水色 */
.chart-5 .ct-series-c .ct-slice-donut {
  stroke: #f9dcc7;
} /* オレンジ */
.chart-5 .ct-series-d .ct-slice-donut {
  stroke: #e8e6e8;
} /* グレー */
/* グラフ6のピース */
.chart-6 .ct-series-a .ct-slice-donut {
  stroke: #f9e887;
} /* 黄色 */
.chart-6 .ct-series-b .ct-slice-donut {
  stroke: #b1e8fc;
} /* 水色 */
.chart-6 .ct-series-c .ct-slice-donut {
  stroke: #e8e6e8;
} /* グレー */
/*-----------------------------------------
　半透明バックカラーの影響回避
-------------------------------------------*/
/* .componentの半透明バックカラーの影響を無くすため */
#pie-chart.component {
  background-color: transparent !important; /* 影響を受けないようにする */
  filter: none !important; /* 明るさや透明度の影響を排除 */
  /* 背景色：ブルー */ mix-blend-mode: normal !important; /* 他の要素との色ブレンドを防ぐ */
}
/*-----------------------------------------
　HOME
-------------------------------------------*/
/* ラッパー：マージン・パディング0、横幅100%、高さは子要素に依存 */
#home-hero-wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
}
/* 最上部階層：home-hero（手前に見える層） */
#home-hero {
  width: 100%;
  height: 650px;
  position: relative;
  z-index: 3;
  display: flex;
}
/* 上部タイトル画像 */
.home-hero-pagetitle {
  max-width: 486px;
  margin-top: 12px;
  width: 100%;
}
/* 下部画像群コンテナ */
.bottom-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}
.bottom-images {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  min-width: 0;
  max-width: 100%;
}
.home-hero-read {
  max-width: 750px;
  min-width: 68%;
  width: 100%;
  height: auto;
  flex-shrink: 1;
}
.home-hero-entry {
  max-width: 140px;
  min-width: 70%;
  width: 100%;
  height: auto;
  flex-shrink: 1;
  margin-left: 10px;
  margin-bottom: 8px;
}
/* 次の階層：home-hero-cover */
.home-hero-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.home-hero-cover-img {
  width: 100%;
  height: 100%;
  /* 画像を縦横比無視で引き伸ばす */
  object-fit: fill;
}
#home-hero-slider {}
#home-hero-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 121, 185, 0.3);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9999;
}
.home-hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* 最下部階層：home-hero-slider */
#home-hero-slider .swiper {
  height: 673px;
  overflow: hidden;
}
#home-hero-slider .swiper-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* 右側コンテンツ */
.home_recop_page_right {
  flex-grow: 1;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  min-width: 0;
}
@media (max-width: 992px) {
  .home_recop_page_right {
    padding: 0;
    align-items: center;
  }
}
/*-----------------------------------------
　スマホ版　HOME HERO
-------------------------------------------*/
.home-hero-wrapper-sp {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 100vh;
  margin: 0 auto;
  padding: 0;
}
/* 重ねる画像：section内のレイヤーとして配置 */
#home-hero-sp .overlap-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
/* Swiperコンテナ：親の幅100%、高さも親に合わせる */
#home-hero-sp .swiper_sp {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#home-hero-sp .swiper-wrapper {
  width: 100%;
  height: 100%;
}
/* 各スライド：上揃えに変更 */
#home-hero-sp .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}
/* スライド内の画像：親要素の幅100% */
#home-hero-sp .swiper-slide img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
#home-hero-sp .home-hero-entry-sp {
  position: absolute;
  left: 5px;
  top: 480px !important;
  width: 150px;
  z-index: 999; /* 他のレイヤーより前面に表示 */
}
/*-----------------------------------------
　 スマホ版　フッターメニュー
-------------------------------------------*/
/* 画面下部に固定される MENU ボタン */
#menuButton-sp {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-weight: bold;
  background-color: #76cc05; /* 背景色を変更 */
  color: #333; /* 必要に応じてテキスト色も調整 */
  padding: 15px;
  text-align: center;
  cursor: pointer;
  z-index: 1000;
  will-change: transform; /* 非同期パン対策 */
}
/* メニュー領域（初期状態は非表示：下に隠す） */
#menu-sp {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  transition: bottom 0.5s ease; /* 0.5秒でイージング効果付きに移動 */
  z-index: 999;
  border-top: 1px solid #ccc;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
}
/* .open クラスが付与されると、メニューが下から表示される */
#menu-sp.open {
  bottom: 0;
}
/* メニューのリストスタイル */
#menu-sp ul {
  list-style: none;
  padding: 20px;
  margin: 0;
  padding-bottom: 50px; /* フッターにかからないように余白追加 */
}
#menu-sp ul li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
#page-content {
  margin-left: 30px;
  padding: 30px;
  background-color: #fff;
}
@media (max-width: 992px) {
  #page-content {
    margin-left: 0px;
    padding: 10px;
  }
}
#foot_btn img {
  width: 100%;
  max-width: 330px;
  height: auto;
}
a.anchor { /*アンカーlinkの逃げを調整*/
  display: block;
  padding-top: 170px;
  margin-top: -170px;
}
/*-----------------------------------------
　 テキスト装飾
-------------------------------------------*/
.lead-blue {
  font-size: 1.2rem;
  color: #02359c;
}
.text-blue {
  color: #02359c;
}
/* Bootstrap5のimg-fluidと併用する場合の最大横幅制限 */
img.img-max {
  max-width: 650px;
  width: 100%; /* img-fluid の挙動を維持 */
  height: auto; /* 縦横比を保持 */
}
/* ///////////////////////////////////////////////////////////////////// 
//  Bootstrap5のアコーディオン展開中の文字色を変更調整
///////////////////////////////////////////////////////////////////// */
.accordion-header .accordion-button:not(.collapsed) {
  color: #02359c; /* 好きな色に変更 */
}
/* ///////////////////////////////////////////////////////////////////// 
//  メガメニューをタイトル帯より前面に出すためのレイヤー調整
///////////////////////////////////////////////////////////////////// */
/* ヘッダー（親）のスタッキングコンテキストを引き上げる */
header.fixed-top.sticky {
  z-index: 2000; /* 1030（Bootstrap既定）より上 */
}
/* 念のため、タイトル帯はヘッダーより低く保つ */
.recop_pagetitle-box.fixed-top {
  z-index: 1000; /* ヘッダー(2000)より下にする */
}
/* ナビの箱自体も前面へ（子の z-index は親を超えられないため） */
.head_navi_box {
  position: relative;
  z-index: 2001;
}
/* メガメニューはさらに上（確実に最前面に） */
.head_navi_box .megamenu {
  position: absolute; /* 既に absolute だが明示 */
  z-index: 2100;
}
/* ///////////////////////////////////////////////////////////////////// 
//  Bootstrap5のボーダー色を変更調整
///////////////////////////////////////////////////////////////////// */
.border-bottom.border-dark {
  border-color: #999 !important; /* 薄い色に */
}
/* ///////////////////////////////////////////////////////////////////// 
//  テーブルを使ったレスポンジブ組画像
///////////////////////////////////////////////////////////////////// */
.table-max {
  max-width: 1696px;
  max-height: 664px;
  border-collapse: collapse;
  border-spacing: 0;
}
.table-max td {
  padding: 0px;
}