@charset "UTF-8";
#staff .l_container {
 max-width: 1000px;
 margin: 0 auto;
 width: calc(100% - 100px);
}
@media (max-width: 820px) {
 #staff .l_container {
  width: 90%;
 }
}
#staff h2 {
 color: #0d4394;
 margin-bottom: 1em;
}
@media (max-width:820px) {
 #staff h2 {
  color: #0d4394;
  margin-bottom: .5em;
 }
}
#mSp {
 white-space: pre-line;
} /* 改行コード(\n)をそのまま表示 */
#staff .info-row {
 align-items: start;
} /* 左右行の縦位置を上揃え */
/* pre-line はやめて段落(p)で管理 */
#staff .bio {
 white-space: normal;
 margin-top: 22px;
}
#staff .bio p {
 margin: 0;
 /*line-height: 1.6;*/
 text-align: justify;
}
#staff .staff-grid {
 display: grid;
 gap: 27px;
 justify-content: center;
 grid-template-columns: repeat(auto-fill, 315px);
 margin: 7em auto 0;
}
@media (max-width:820px) {
 #staff .staff-grid {
  margin: 3em auto 0;
 }
}
#staff .staff-card {
 background: #0d4394;
 color: #fff;
 border-radius: 9.5px;
 padding: 30px 20px;
 text-align: center;
 position: relative;
 cursor: pointer;
 transition: transform .15s ease;
}
#staff .staff-card:hover {
 transform: translateY(-2px);
}
#staff .staff-face {
 width: 153px;
 height: 153px;
 margin: 0 auto;
 display: grid;
 place-items: center;
}
#staff .staff-face img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 border: 2px solid #0d4394;
 margin-bottom: 10px;
}
@media (max-width:820px) {
 #staff .staff-face img {
  margin-bottom: 5px;
 }
}
#staff .staff-name-ja {
 font-size: 24px;
 font-weight: 700;
 letter-spacing: .04em;
 line-height: 1;
 margin: 9px 0 7px;
}
#staff .staff-name-en {
 font-size: 18px;
 font-weight: bold;
 color: #d5ecfc;
 line-height: 1;
 letter-spacing: .04em;
}
#staff .staff-button {
 position: relative;
 margin-top: 20px;
 display: inline-block;
 background: #fff;
 color: #0d4394;
 padding: 8px 40px;
 border-radius: 999px;
 font-weight: 700;
 font-size: 14px;
}
#staff .fa-arrow-right {
 position: absolute;
 transform: translateY(-50%);
 top: 50%;
 font-size: 1em;
 right: 7px; /*15px;*/
}
/* Modal */
#staff .modal-backdrop {
 position: fixed; /* ← absolute ではなく fixed */
 inset: 0; /* top/right/bottom/left:0 */
 background: rgba(13, 67, 148, .7);
 z-index: 9999;
 /* ここがポイント：オーバーレイ自身がスクロールを持つ */
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 /* “中央寄せ”は使わず、上から積む（ズレ防止） */
 display: block;
 padding: 48px 24px; /* 画面上下の余白はここで確保 */
 /* フェード制御 */
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity .18s ease, visibility .18s ease;
}
#staff .modal-backdrop[aria-hidden="false"] {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
}
/* 3) モーダル本体は「中スクロールなし」 */
#staff .modal {
 position: relative;
 display: block;
 width: min(725px, 100%);
 /* 内部スクロールを出さない */
 max-height: none;
 overflow: visible;
 margin: 0 auto;
 padding: 50px;
 border-radius: 16px;
 background: #fff;
 box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
 /* アニメは既存どおり */
 transform: translateY(4px) scale(.985);
 opacity: 0;
 transition: transform .18s ease, opacity .18s ease;
}
@media (max-width:820px) {
 #staff .modal {
  padding: 40px 20px;
  margin: 32px auto;
 }
}
/* 開閉アニメはそのままでOK */
#staff .modal-backdrop[aria-hidden="false"] .modal {
 transform: translateY(0) scale(1);
 opacity: 1;
}
#staff .modal-backdrop.is-leaving .modal {
 transform: translateY(4px) scale(.985);
 opacity: 0;
}
#staff .modal-backdrop.is-leaving {
 opacity: 0;
 visibility: visible;
 pointer-events: none;
}
#staff .modal-header {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 gap: 40px;
}
@media (max-width:820px) {
 #staff .modal-header {
  display: block;
  text-align: center;
 }
}
#staff .modal-header .avatar {
 width: 154px;
 height: 154px;
 border-radius: 50%;
 overflow: hidden;
 border: 2px solid #0d4394;
}
@media (max-width:820px) {
 #staff .modal-header .avatar {
  width: 130px;
  height: 130px;
  margin: 0 auto 1em;
 }
}
#staff .modal-header .avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
#staff .modal-name-ja {
 font-size: clamp(30px, 2.2vw + 20px, 34px);
 font-weight: 800;
 color: #0d4394;
 line-height: 1;
}
#staff .modal-name-en {
 font-size: clamp(22px, 1.2vw + 18px, 25px);
 color: #d5ecfc;
 font-weight: 700;
 margin-top: 4px;
 letter-spacing: .04em;
}
@media (max-width:820px) {
 #staff .modal-name-en {
  margin-top: 0;
 }
}
/* 閉じるボタン：直径と線幅を変えたければ変数だけ触る */
#staff .modal-close {
 position: absolute;
 top: 17px;
 right: 17px;
 width: 25px;
 height: 25px;
 border: none;
 border-radius: 50%;
 background: transparent;
 cursor: pointer;
}
/* フォントの×は使わない（以前の :before{content:"×"} は削除） */
#staff .modal-close::before, #staff .modal-close::after {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 width: calc(40px * .52); /* ×の長さ＝◯に対して同率 */
 height: 3px;
 background: #0d4394;
 border-radius: 1px;
 transform-origin: center;
}
#staff .modal-close::before {
 transform: translate(-50%, -50%) rotate(45deg);
}
#staff .modal-close::after {
 transform: translate(-50%, -50%) rotate(-45deg);
}
/*popの中の下部の閉じるボタン*/
#staff .modal-footer {
 margin-top: 2em;
 display: flex;
 justify-content: center;
}
#staff .btn-close {
 appearance: none;
 border: 2px solid #0d4394;
 background: #fff; /* 透過にしたいなら transparent に */
 color: #0d4394;
 border-radius: 999px;
 padding: 13px 60px;
 line-height: 1;
 font-weight: 700;
 font-size: 14px;
 cursor: pointer;
 transition: background .15s ease, transform .05s ease;
}
#staff .btn-close:hover {
 background: #0d4394;
 color: #fff;
}
#staff .btn-close:active {
 transform: translateY(1px);
}
#staff .modal-body {
 color: #244;
}
#staff .info-box {
 background: #d5ecfc;
 border-radius: 12px;
 padding: 16px 18px;
 margin: 18px 0;
}
@media (max-width:820px) {
 #staff .info-box {
  padding: 10px 18px;
 }
}
#staff .info-row {
 display: grid;
 grid-template-columns: 140px 1fr;
 gap: 10px;
 padding: 10px 0;
}
@media (max-width:820px) {
 #staff .info-row {
  display: block;
  grid-template-columns: 1fr;
  padding: 15px 0;
 }
}
#staff .info-row + .info-row {
 border-top: 1px solid #fff;
}
#staff .info-key {
 color: #0d4394;
 font-weight: 700;
 letter-spacing: .04em;
}
@media (max-width:820px) {
 #staff .info-key {
  font-size: 16px;
  /*margin-bottom: 4px;*/
 }
}
/*20251003　追加*/
/* スマホは2列にする＋ギャップ少し狭める */
@media (max-width: 820px) {
 #staff .staff-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; /* 27px → 16px に */
 }
 /* カードの内側を少しコンパクトに */
 #staff .staff-card {
  padding: 20px 12px; /* 30px 20px → 20px 12px */
 }
 /* アバターが列幅を超えないよう縮める */
 #staff .staff-face {
  width: 110px; /* 153px → 110px */
  height: 110px;
 }
 /* 見出しサイズも少しだけ調整（任意） */
 #staff .staff-name-ja {
  font-size: 20px;
 }
 #staff .staff-name-en {
  font-size: 14px;
 }
 /* ボタンも詰める（任意） */
 #staff .staff-button {
  padding: 8px 24px;
 }
}