@charset "UTF-8";
:root {
 --modal-theme-color: #004D9B; /* 矢印と閉じるボタンの色 */
 --modal-btn-width: 40px; /* 矢印の横幅 */
 --modal-btn-height: 80px; /* 矢印の高さ */
 --modal-side-gap: 15px;
}
/* ==========================================================================
   1. Base Reset
   ========================================================================== */
input, button, textarea, select {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
button {
 background-color: transparent;
 border: none;
 cursor: pointer;
 outline: none;
 padding: 0;
}
a, a:focus, button:focus {
 outline: none;
}
/* ==========================================================================
   2. Modal Structure
   ========================================================================== */
.modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.8);
 z-index: 10001;
 display: flex;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.3s ease, visibility 0.3s;
 pointer-events: none;
}
.modal-overlay.is-active {
 visibility: visible;
 opacity: 1;
 pointer-events: auto;
}
.modal-wrapper {
 width: 100%;
 height: 100%;
 overflow-y: auto;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #fff;
}
/* モーダルの白い箱 */
.modal-content-area {
 position: relative; /* ボタン配置の基準点 */
 background: #fff;
 width: 100%;
 height: 100%;
 margin: auto;
 z-index: 1;
 transition: transform 0.3s ease;
}
#modal-body {
 display: flex;
 position: relative;
 width: 100%;
 height: 100%;
 overflow-y: auto
}
#modal-body iframe {
 width: 100%;
 height: 100%;
}
/* ==========================================================================
   3. Modal UI (SVG描画と配置)
   ========================================================================== */
/* ボタン共通設定：mask-imageを使用してCSSで色を変更可能にする */
#modal-prev, #modal-next, #modal-close {
 position: absolute;
 background-color: var(--modal-theme-color);
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-position: center;
 mask-position: center;
 -webkit-mask-size: contain;
 z-index: 10002;
 transition: opacity 0.3s, transform 0.3s;
}
#modal-prev:hover, #modal-next:hover, #modal-close:hover {
 opacity: 0.7;
}
/* 前へボタン (提供されたSVG) */
#modal-prev {
 top: 50%;
 left: var(--modal-side-gap);
 transform: translateY(-50%);
 width: var(--modal-btn-width);
 height: var(--modal-btn-height);
 -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167 333"><polygon points="14.7 166.6 166.4 14.9 166.4 .4 .2 166.6 166.4 332.7 166.4 318.2 14.7 166.6" fill="black"/></svg>');
 mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167 333"><polygon points="14.7 166.6 166.4 14.9 166.4 .4 .2 166.6 166.4 332.7 166.4 318.2 14.7 166.6" fill="black"/></svg>');
}
/* 次へボタン (SVGを180度回転) */
#modal-next {
 top: 50%;
 right: var(--modal-side-gap);
 transform: translateY(-50%) rotate(180deg);
 width: var(--modal-btn-width);
 height: var(--modal-btn-height);
 -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167 333"><polygon points="14.7 166.6 166.4 14.9 166.4 .4 .2 166.6 166.4 332.7 166.4 318.2 14.7 166.6" fill="black"/></svg>');
 mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167 333"><polygon points="14.7 166.6 166.4 14.9 166.4 .4 .2 166.6 166.4 332.7 166.4 318.2 14.7 166.6" fill="black"/></svg>');
}
/* 閉じるボタン (×印のSVG) */
#modal-close {
 top: 20px;
 right: 20px;
 width: 60px;
 height: 60px;
 -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><polygon points="150.42 14.92 145.64 10.14 80.28 75.49 14.92 10.14 10.14 14.92 75.49 80.28 10.14 145.64 14.92 150.42 80.28 85.06 145.64 150.42 150.42 145.64 85.06 80.28 150.42 14.92" fill="black" fill-rule="evenodd"/></svg>');
 mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><polygon points="150.42 14.92 145.64 10.14 80.28 75.49 14.92 10.14 10.14 14.92 75.49 80.28 10.14 145.64 14.92 150.42 80.28 85.06 145.64 150.42 150.42 145.64 85.06 80.28 150.42 14.92" fill="black" fill-rule="evenodd"/></svg>');
}
/* ==========================================================================
   4. Responsive (レスポンシブ設定)
   ========================================================================== */
@media screen and (max-width: 1024px) {
 #modal-prev {
  left: 5px;
  width: 30px;
 }
 #modal-next {
  right: 5px;
  width: 30px;
 }
}
@media screen and (max-width: 767px) {
 #modal-prev {
  left: 0;
 }
 #modal-next {
  right: 0;
 }
 #modal-prev, #modal-next {
  top: auto;
  bottom: 10px;
  transform: none;
  height: 50px;
  width: 40px;
  /* 均一な太さのSVG（stroke-width="20"の部分で太さを一括調整できます） */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><polyline points="80,20 20,100 80,180" fill="none" stroke="black" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><polyline points="80,20 20,100 80,180" fill="none" stroke="black" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  -webkit-mask-position: left 3px center;
  mask-position: right 3px center;
  /* SVG自体の表示サイズ */
  -webkit-mask-size: 18px auto;
  mask-size: 18px auto;
 }
 #modal-next {
  transform: rotate(180deg); /* 反転して右向きに */
 }
 #modal-close {
  width: 40px;
  height: 40px;
  top: 10px;
  right: 10px;
 }
}
/* ==========================================================================
   5. Content Styles (コンテンツ内デザイン)
   ========================================================================== */
.modal__content .name {
 font-size: clamp(3.8rem, 4vw, 5rem);
 letter-spacing: 1px;
 margin: 20px 0;
 font-weight: 800;
 line-height: 1.2em;
 font-feature-settings: "palt"1;
}
.modal__content .name span {
 display: block;
 line-height: 1.6em;
 font-size: .8em;
}
.modal__content .txt-chara {
 font-size: clamp(1.6rem, 2vw, 1.8rem);
 font-weight: 800;
 line-height: 1.7em;
 margin-bottom: 30px;
}
.modal__content .ttl {
 font-size: 2em;
 margin-bottom: .5rem;
}
.cast-ph img {
 aspect-ratio: 1;
 object-fit: cover;
 object-position: top;
 border-radius: 50%;
 width: 140px;
}
/* PC・タブレット(L) 1025px以上 */
@media screen and (min-width: 1025px) {
 .modal__content {
  margin: auto;
 }
 .wrapp {
  display: flex;
  justify-content: space-between;
  max-width: 80%;
  margin: auto;
 }
 .wrapp .photo {
  width: 48%;
  display: flex;
  align-items: center;
 }
 .wrapp .profile {
  width: 48%;
  display: flex;
  align-items: center;
 }
 .scroll_area {
  width: 98%;
  padding: 0 30px;
  margin: 5vh 0;
 }
 /* カスタムスクロールバー */
 #modal-body::-webkit-scrollbar {
  width: 3px;
  height: 4px;
 }
 #modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
 }
 #modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
 }
}
/* タブレット(M) 1024px以下 */
@media screen and (max-width: 1024px) {
 .modal__content {
  padding: 0;
 }
 .modal__content .profile {
  padding: 0 8% 50px;
 }
 .wrapp {
  width: 100%;
  height: auto;
 }
 .modal__content .name {
  font-size: 32px;
  text-align: left;
 }
}
/* ==========================================================================
   6. Content Switch Animation (切り替えアニメーション)
   ========================================================================== */
#modal-body .modal__content {
 opacity: 0;
}
#modal-body.fade-in .modal__content {
 opacity: 0;
 animation: fadeInContent 0.5s ease forwards;
}
@keyframes fadeInContent {
 from {
  opacity: 0;
  transform: translateY(10px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}