@layer pages {

  /* オープニング動画オーバーレイ（TOPページ初回訪問時のみ） */
  .opening-video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: #fcfaf5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 2s ease;
  }

  .opening-video-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  html.opening-skip .opening-video-overlay {
    display: none !important;
  }

  /* 全面 cover + 拡大でレターボックス感・余白を抑える（数値は好みで調整可） */
  .opening-video-overlay .opening-video {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: 100vh;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    transform: translate(-50%, calc(-50% - 5vh)) scale(1);
    transform-origin: center center;
    background-color: #fcfaf5;
  }

  @media (max-width: 768px) {
    .opening-video-overlay .opening-video {
      transform: translate(-50%, calc(-50% - 8vh)) scale(0.9);
    }
  }

  /* オープニング中はメインコンテンツを非表示（トランジションなしで負荷軽減）／終了時にフェードイン */
  html.opening-loading .mobile-fixed-header,
  html.opening-loading .scrolling-header,
  html.opening-loading .page-wrapper,
  html.opening-loading .site-footer {
    opacity: 0;
    transition: none;
  }

  html.opening-done .mobile-fixed-header,
  html.opening-done .scrolling-header,
  html.opening-done .page-wrapper,
  html.opening-done .site-footer {
    opacity: 1;
    transition: opacity 1s ease 0.5s;
  }

  /* SVGパスの太さをスケール時に変更しない */
  svg path {
    vector-effect: non-scaling-stroke;
  }

  /* --- ベース設定 --- */
  body {
    background-color: #fdfaf3;
    color: #333;
    overflow-x: hidden; /* iPad等で横スクロールを防止 */
  }

  /* --- レイアウト --- */
  .page-wrapper {
    display: flex;
    min-height: calc(100vh - 62px);
    /* ヘッダー分を引いた高さ */
    overflow-x: hidden; /* タブレット等で横はみ出し防止 */
    padding-top: 5px;
    padding-bottom: 5px;
  }

  /* ヘッダーエリア（流れるロゴ用） */
.scrolling-header {
  background-color: #fdfaf3;
  overflow: hidden;
  height: 60px;
  /* 高さを固定 */
  border-bottom: 1px solid #11334f;
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  /* 垂直中央配置 */
}

/* モバイル用固定ヘッダー（デフォルト非表示） */
.mobile-fixed-header {
  display: none;
  background-color: #fdfaf3;
  height: 80px; /* 高さ変更 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 300;
  padding: 0 2px; /* 両端に2pxの余白 */
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2'%3E%3Ccircle cx='1' cy='1' r='1' fill='%2311334f'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 6px 2px;
  background-origin: content-box; /* padding領域には描画せず両端余白を確保 */
}

.mobile-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  width: 100%;
}

.mobile-logo-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.mobile-logo-mirai {
  height: 64px;
  width: auto;
}

.mobile-logo-univ-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mobile-logo-univ {
  height: 26px !important; /* ロゴサイズ調整 */
  width: auto;
  margin-bottom: 2px;
}

.mobile-subtitle {
  font-size: 16px;
  font-weight: bold;
  color: #003366;
  letter-spacing: 0.1em;
}

/* トラック部分（WAAPIで動かす要素） */
.scrolling-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* 画像の間の隙間等はJS側で複製時に考慮するか、ここにgapを設定 */
  /* gap: 0; */
  width: max-content; /* これがないと縮まる */
}

/* ロゴ画像 */
.scrolling-logo {
  width: 180px;
  height: auto;
  margin-right: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .scrolling-logo {
    width: 170px; /* 画像横幅は 170px */
    margin-right: 20px; /* 画像のマージンは20px */
  }
}

/* ハンバーガーメニューボタン */
.hamburger-btn {
  display: none;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px !important;
  height: 48px !important;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 200;
  padding: 0;
}

.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000;
  position: absolute;
  left: 0;
  transition: all 0.3s;
}

.hamburger-btn span:nth-child(1) { top: 0; }
.hamburger-btn span:nth-child(2) { top: 11px; }
.hamburger-btn span:nth-child(3) { bottom: 0; }

/* メニューオープン時のハンバーガーアニメーション */
.hamburger-btn.is-active span:nth-child(1) {
  transform: rotate(45deg);
  top: 11px;
}
.hamburger-btn.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-active span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 11px;
}

  /* 左サイドバー：330px固定 (初期値) -> 可変幅に変更 */
  .sidebar {
    width: 330px;
    min-width: 200px;
    flex: 0 0 330px;
    background: #fdfaf3;
    padding: 0;
    /* paddingは内部要素へ移動 */
    position: sticky;
    top: 0;
    /* heightはJSで制御: initSidebarHeightAdjust() */
    /* height: calc(100vh - 60px); */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 全体スクロール禁止 */
    transition: flex-basis 0.3s ease;
    border-right: 1px solid #11334f; /* PC版：メインコンテンツとの区切り */
  }

  /* スクロールするコンテンツエリア */
  .sidebar-content {
    flex-grow: 1;
    min-height: 0; /* 縦幅が狭いときもflexで縮む */
    min-width: 0; /* 横オーバーフロー防止 */
    overflow-x: hidden; /* 横スクロール防止 */
    overflow-y: auto;
    padding: 36px;
    padding-bottom: 70px;
    /* 下部はCTAと接するため0に */
    /* スクロールバー非表示（Chrome, Safari, Opera） */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .sidebar-content::-webkit-scrollbar {
    display: none;
  }

  /* 画面幅が狭まった時のサイドバー幅調整 */
  /* PC表示で少し狭い領域用 */
  @media (max-width: 1200px) {
    .sidebar {
      width: 280px;
      flex-basis: 280px;
    }

    .sidebar-content {
      padding: 30px;
      padding-bottom: 0;
    }

    .sidebar-divider {
      margin-left: -30px;
      width: calc(100% + 60px);
    }

    .sidebar-cta {
      width: 280px;
      padding: 20px 30px 20px 30px !important;
    }
  }

  @media (max-width: 1000px) {
    .sidebar {
      width: 240px;
      flex-basis: 240px;
    }

    .sidebar-content {
      padding: 20px;
      padding-bottom: 0;
    }

    .sidebar-divider {
      margin-left: -20px;
      width: calc(100% + 40px);
    }

    .sidebar-cta {
      width: 240px;
      padding: 15px 20px 20px 20px !important;
    }

    .tag-item {
      padding: 6px 10px;
      font-size: 0.8rem;
    }

    .btn-request {
      font-size: 0.95rem;
      padding: 12px;
    }

    .sidebar-subtitle {
      font-size: 2rem;
    }
  }

  /* iPad・タブレット：Safariタブバー表示時に資料請求ボタンが隠れないよう余白を確保 */
  /* 安全に表示されているためコメントアウト、20pxで統一 */
  /*
  @media (min-width: 769px) and (max-width: 1100px) {
    .sidebar-cta {
      padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }
  */

  @media (max-width: 768px) {
    /* スマホ：読込時は非表示、ハンバーガーメニュー開時のみfixedで表示 */
    .sidebar-cta {
      display: none;
    }
    body.is-sidebar-open .sidebar-cta,
    body.story_detail.is-sidebar-open .sidebar-cta {
      display: block !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 100% !important;
      z-index: 450; /* サイドバー(400)より上に表示 */
    }

    /* モバイル固定ヘッダー表示 */
    .mobile-fixed-header {
      display: block;
    }

    /* 通常のヘッダーは固定ヘッダーの下に配置 */
    .scrolling-header {
      margin-top: 80px; /* 固定ヘッダーの高さ分下げる */
      height: 42px; /* スマホ版の高さ */
    }

    /* スマホ版スタイル */
    .sidebar {
      width: 100%; /* 全幅 */
      height: 0; /* 最初は高さ0 */
      min-width: unset;
      position: fixed;
      top: 0; /* 画面最上部から */
      left: 0;
      z-index: 400; /* 固定ヘッダー(300)より上 */
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: height 0.4s ease, opacity 0.4s ease;
      background-color: rgba(253, 250, 243, 0.98);
      padding: 0; /* 高さが変わるのでpaddingはcontent側 */
      border-bottom: 1px solid #ddd;
      border-right: none; /* PC版の右ボーダーを解除 */
    }

    .sidebar.is-open {
      height: 100vh; /* 全画面 */
      opacity: 1;
      pointer-events: auto;
      overflow-y: auto; /* 縦スクロール */
    }

    .sidebar-content {
      padding: 60px 20px 80px; /* 閉じるボタンのスペース確保、下80px */
    }

    /* スマホ版ではサイドバー内のロゴエリアと区切り線を非表示 */
    .sidebar-logo-area,
    .sidebar-divider {
      display: none !important;
    }

    /* ハンバーガーメニューは固定ヘッダー内に移動したのでここでは非表示にするが、
       JSの制御等はそのまま使えるようにクラスは維持 */
    .scrolling-header .hamburger-btn {
      display: none !important; 
    }
    
    .mobile-fixed-header .hamburger-btn {
      display: block;
      position: static; /* absolute解除 */
      transform: none;
      margin-left: auto;
      width: 48px; /* 48px */
      height: 48px; /* 48px */
      background: transparent;
      border: none;
      border-radius: 4px; /* 角丸 */
      cursor: pointer;
      z-index: 200;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hamburger-btn img {
      width: 48px !important; /* アイコンサイズは少し小さく */
      height: auto;
    }

    /* 閉じるボタン */
    .sidebar-close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 48px; /* 48px */
      height: 48px; /* 48px */
      background-color: #fff;
      border: 1px solid #000;
      border-radius: 4px; /* ハンバーガーと同じ角丸 */
      cursor: pointer;
      z-index: 210;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sidebar-close-btn::before,
    .sidebar-close-btn::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 2px;
      background-color: #000;
    }

    .sidebar-close-btn::before {
      transform: rotate(45deg);
    }

    .sidebar-close-btn::after {
      transform: rotate(-45deg);
    }
  }

  /* --- サイドバー内要素 --- */
  .sidebar-logo-area {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .university-logo-link {
    display: block;
    width: 80%;
    max-width: 200px;
    margin-bottom: 20px;
    transition: opacity 0.3s;
  }

  .university-logo-link:hover {
    opacity: 0.7;
  }

  .university-logo {
    width: 100%;
    height: auto;
  }

  .sidebar-logo {
    width: 220px;
    height: auto;
    margin-bottom: 10px;
  }

  .sidebar-subtitle {
    font-size: 2rem;
    font-weight: bold;
    color: #003366;
    letter-spacing: 0.1em;
  }

  .sidebar-divider {
    height: 2px;
    margin-bottom: 30px;
    width: 100%;
    margin-left: -36px;
    /* 親のpadding分をネガティブマージンで相殺 */
    width: calc(100% + 72px);
    padding: 0 2px; /* 両端に2pxの余白 */
    box-sizing: content-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2'%3E%3Ccircle cx='1' cy='1' r='1' fill='%2311334f'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: 0 center;
    background-size: 6px 2px;
    background-origin: content-box; /* padding領域には描画せず両端余白を確保 */
  }

/* 画面幅が1200px以下の時（padding: 30px） */
@media (max-width: 1200px) {
    .sidebar-divider {
      margin-left: -30px;
      width: calc(100% + 60px);
    }
  }

  /* 画面幅が1000px以下の時（padding: 20px） */
  @media (max-width: 1000px) {
    .sidebar-divider {
      margin-left: -20px;
      width: calc(100% + 40px);
    }
  }

  .sidebar-section {
    margin-bottom: 40px;
  }

  .sidebar-heading {
    font-size: 2.0rem;
    color: #003366;
    font-weight: bold;
    margin-bottom: 15px;
  }

  /* タグリスト */
  .tag-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .tag-item {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #666;
    border-radius: 20px;
    text-decoration: none;
    color: #444;
    font-size: 1.3rem;
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s;
    line-height: 1;
  }

  .tag-item:hover {
    background-color: rgba(255, 255, 255, 0.8); /* 白80% */
    color: #003366;
    border-color: #003366;
  }

  .sidebar .tag-item:hover {
    background-color: #fff;
    color: #003366;
    border-color: #003366;
  }

  .tag-item.active {
    background-color: #fff;
    color: #003366;
    border-color: #003366;
  }

  /* 資料請求ボタンエリア（フッター内に配置・フッター非表示時はfixed、表示時はabsoluteでフッター上端に） */
  .sidebar-cta {
    padding: 20px 40px 20px 40px;
    background-color: #fdfaf3;
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(330px - 1px); /* sidebar右ボーダー(1px)が隠れないよう1px狭く */
    z-index: 50;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
  }

  .sidebar-cta.is-footer-visible {
    position: absolute;
    bottom: calc(100% + 1px); /* フッター罫線と被らないよう1px上に */
    left: 0;
  }

  /* サイドバー幅に合わせてCTA幅を上書き（ベース定義より後に配置） */
  @media (max-width: 1200px) {
    .sidebar-cta {
      width: calc(280px - 1px) !important;
    }
  }
  @media (max-width: 1000px) {
    .sidebar-cta {
      width: calc(240px - 1px) !important;
    }
  }
  @media (max-width: 768px) {
    .sidebar-cta {
      width: 100% !important;
    }
  }

  .btn-request {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    background-color: #72a9cf;
    color: #022f66;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.7rem;
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
    border: 1px solid #022f66;
  }

  .btn-request:hover {
    transform: translateY(-2px);
    background-color: #b6d5e8;
    color: #022f66;
  }

  .icon-doc {
    margin-right: 8px;
    width: 18px;
    height: auto;
    transition: transform 0.2s;
  }

  .btn-request:hover .icon-doc {
    transform: scale(1.15);
  }

  /* 右メインエリア：可変 */
  .main-content {
    flex-grow: 1;
    min-width: 0; /* flex子要素のoverflow防止 */
    background-color: #fdfaf3; /* paginationより下のベタ塗り用 */
    padding-left: 5px;

  }

  /* 格子柄エリア（page-header-tag + card-grid + paginationまで） */
  .main-content-inner {
    padding: 50px;
    padding-bottom:0;
    background-image:
      linear-gradient(#fbd2c1 1px, transparent 1px),
      linear-gradient(90deg, #fbd2c1 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: -15px -20px; /* sidebar右線・scrolling-header下線と重なって2pxに見えないようオフセット */
  }

  /* --- タグ一覧ページヘッダ（card-gridと同じ幅） --- */
  .page-header-tag {
    width: 100%;
    max-width: 1250px;
    margin: 0 0 25px 0;

  
   /* padding-bottom: 15px;*/
    margin-left: auto;
    margin-right: auto;
  }

  .page-header-tag-heading {
    font-size: 1.8rem;
    color: #251715;
    font-weight: bold;
    margin-bottom: 15px;
    background-color: #fff;
    width:fit-content;
    padding: 15px;
    border-radius: 7px;


  }

  .page-header-tag-heading span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #251715;
    margin-right: 8px;
  }

  @media (max-width: 768px) {

    .page-header-tag-heading {
      font-size: 1.4rem;
    }

    .page-header-tag-heading span {
      font-size: 1.2rem;
      display: block;
      padding-bottom: 6px;
    }

  }

  /* --- グリッド設定 --- */
  .card-grid {
    display: grid;
    /* PC版は必ず3枚並ぶ設定、最小230px・最大330px/枚 */
    grid-template-columns: repeat(3, minmax(230px, 330px));
    gap: 25px;
    max-width: 1040px; /* 330*3 + 25*2 = 1040 */
    margin: 0 auto;
    padding-bottom: 20px;
  }

  /* --- カード共通 --- */
  .card-grid .card {
    max-width: 330px;
    max-height: 330px;
  }

  .card {
    display: block;
    height: 350px;
    perspective: 1000px;
    /* 3D効果の奥行き */
    cursor: pointer;
    position: relative;
    /* リンクの親として */
  }

  /* カード全体を覆うリンク */
  .card-link-overlay {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }

  .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
  }

  /* 表面・裏面 共通 */
  .card-front,
  .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* 裏側を見せない */
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* --- 表面のデザイン --- */
  .card-front {
    padding: 20px;
    /* z-index: 2; */
    transform: rotateY(0deg);
    pointer-events: none;
    /* 基本的にクリック透過 */
  }

  /* カード内タグエリア（右上に1つ配置） */
  .card-tags {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    pointer-events: auto;
  }

  .card-grid .card-tags {
    top: 10px;
    right: 10px;
  }

  /* SP・iPad・iPad Pro：上20px 右20px */
  @media (max-width: 1100px) {
    .card-grid .card-tags {
      top: 20px;
      right: 20px;
    }
  }

  .related-article-container .card-tags {
    top: 10px;
    right: 10px;
  }

  .related-article-container .card-tag-item {
    font-size: 1.4rem;
  }

  .card-tag-item {
    font-size: 1.4rem;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
    display: inline-block;
  }

  /* テーマカラーあり（奇数カード）のタグ：背景白 */
  .card:nth-child(odd) .card-tag-item,
  .swiper-related .card[data-card-index="1"] .card-tag-item,
  .swiper-related .card[data-card-index="3"] .card-tag-item,
  .swiper-related .card[data-card-index="5"] .card-tag-item,
  .swiper-related .card[data-card-index="7"] .card-tag-item,
  .swiper-related .card[data-card-index="9"] .card-tag-item {
    background-color: #fff;
    color: #111111;
  }

  /* デフォルトカード（偶数）のタグ：背景#022f66 */
  .card:nth-child(even) .card-tag-item,
  .swiper-related .card[data-card-index="2"] .card-tag-item,
  .swiper-related .card[data-card-index="4"] .card-tag-item,
  .swiper-related .card[data-card-index="6"] .card-tag-item,
  .swiper-related .card[data-card-index="8"] .card-tag-item,
  .swiper-related .card[data-card-index="10"] .card-tag-item {
    background-color: #022f66;
    color: #fff;
  }

  /* --- 裏面のデザイン --- */
  .card-back {

    /* 裏面は白ベース */
    transform: rotateY(180deg);
    /* 最初から裏返しておく */
    align-items: center;
    justify-content: center;
    /*  border: 1px solid #eee;*/
    background-image: url(../../image/senpai/mirai_logo.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50% auto;
  }

  /* 裏面のロゴ画像（ダミー） */
  .back-logo {
    width: 70%;
    height: auto;
    opacity: 0.8;
  }

  /* --- 写真のアーチ窓 --- */
  .arch-window {
    width: 178px; /* PC版 */
    aspect-ratio: 1 / 1.3; /* 縦長のプロポーション */
    background: #fff;
    border-radius: 89px 89px 14px 14px; /* 上部は半円アーチ(幅の50%)、右下・左下は14px */
    overflow: hidden;
    border: 1px solid #11334f;
    margin-bottom: 8px;
    /* 15px -> 8px に変更 */
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    /* タグの下に配置 */
  }

  .arch-window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- テキスト情報 --- */
  .student-info {
    margin-top: auto;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #111111;
    font-weight: 500;
  }

/* 学部名 */
.student-info .faculty-name {
  display: block;
  margin-bottom: 5px;
  font-size: 1.5rem;
  text-align: left; /* 追加: 左寄せ */
}

  /* 学科名と氏名をまとめるラッパー */
  .student-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
  }

  .student-info .department-name {
    /* 学科名 */
    font-size: 1.8rem;
    font-weight: bold;
  }

  .student-info .name {
    font-size: 1.8rem;
    font-weight: bold;
    white-space: nowrap;
    /* 名前が途中で改行されないように */
  }

  /* =========================================
     ここからアニメーション設定
     ========================================= */

  /* --- パターンA：色付きカード (3n-1以外) --- */

  /* 色のバリエーション（例：3の倍数はピンク） */
  .card:nth-child(1) .card-front,
  .card:nth-child(1) .card-back {
    background-color: #72b2d6;
  }
/*
  .card:nth-child(1) .card-back {
    background-color: #f4828e;
  }
*/
  .card:nth-child(3) .card-front,
  .card:nth-child(3) .card-back {
    background-color: #f4828e;
  }

  .card:nth-child(5) .card-front,
  .card:nth-child(5) .card-back {
    background-color: #f7a584;
  }

  .card:nth-child(7) .card-front,
  .card:nth-child(7) .card-back {
    background-color: #f7bc3c;
    /* カード裏面が表示されない問題を修正するため、確実に色を指定しつつ、transform-styleを確認 */
  }

  .card:nth-child(9) .card-front,
  .card:nth-child(9) .card-back {
    background-color: #58af7b;
  }



  /* ホバー時の回転アニメーション（1101px以上のみ） */
  @media (min-width: 1101px) {
    .card:nth-child(1):hover .card-inner,
    .card:nth-child(3):hover .card-inner,
    .card:nth-child(5):hover .card-inner,
    .card:nth-child(7):hover .card-inner,
    .card:nth-child(9):hover .card-inner {
      animation: rotate-cycle 1s ease-in-out forwards;
    }
  }

  /* 回転キーフレーム：0 -> 180(裏) -> 360(表) */
  @keyframes rotate-cycle {
    0% {
      transform: rotateY(0deg);
    }

    50% {
      transform: rotateY(180deg);
    }

    /* ここで裏面が見える */
    100% {
      transform: rotateY(360deg);
    }

    /* 元に戻る */
  }

  /* --- パターンB：透明カード (3n-1) --- */

  .card:nth-child(2) .card-front,
  .card:nth-child(4) .card-front,
  .card:nth-child(6) .card-front,
  .card:nth-child(8) .card-front {
    background-color: transparent;
    /* 背景なし */
    /* border: 1px solid #ddd;*/
    color: #111111 !important;
  }

  .card:nth-child(2) .student-info,
  .card:nth-child(4) .student-info,
  .card:nth-child(6) .student-info,
  .card:nth-child(8) .student-info {
    color: #111111;
  }

  /* 透明カードは裏面不要なので非表示 */
  .card:nth-child(2) .card-back,
  .card:nth-child(4) .card-back,
  .card:nth-child(6) .card-back,
  .card:nth-child(8) .card-back { /* 7番目は色付きカードなので除外 */
    display: none;
  }

  /* ホバー時の軽い回転アニメーション（beams.co.jp風・arch-windowのみ・1101px以上のみ） */
  @media (min-width: 1101px) {
    .card:nth-child(2):hover .arch-window,
    .card:nth-child(4):hover .arch-window,
    .card:nth-child(6):hover .arch-window,
    .card:nth-child(8):hover .arch-window {
      animation: card-rotate-light 0.5s ease forwards;
    }
  }

  /* 軽い回転キーフレーム（右回転・1回目大きく2回目小さく） */
  @keyframes card-rotate-light {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(12deg);
    }
    50% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(4deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  /* --- ページネーション --- */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 50px;
    margin-bottom: 50px;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
  }

  /* 1ページのみの場合は最初から非表示（FOUC防止） */
  .pagination[data-total="1"] {
    display: none !important;
  }

  .page-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    color: #333;
    font-size: 1.6rem;
    transition: background-color 0.3s, color 0.3s;
    font-weight: bold;
  }

  .page-num.current {
    background-color: #003366;
    color: #fff;
    cursor: default;
  }

  .page-num:not(.current):hover {
    background-color: #eaddcf;
  }

  .page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #003366;
    text-decoration: none;
    transition: background-color 0.3s;
  }

  .page-nav:hover:not(.disabled) {
    background-color: #eaddcf;
  }

  .page-nav.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  .page-dots {
    color: #666;
    letter-spacing: 2px;
  }

  /* スマホでのページネーション調整 */
  @media (max-width: 600px) {
    .pagination {
      gap: 4px;
    }

    .page-num,
    .page-nav {
      width: 35px;
      height: 35px;
      font-size: 1.2rem;
    }
  }
  /* iPad Pro・iPad Air・タブレット用：SP版と同じ1カラムレイアウト、文字・写真サイズはPCと同じ */
  /* ※一覧ページ(.card-grid)のみに適用、詳細ページのスライダー(.swiper-related)には適用しない */
  @media (max-width: 1100px) {
    .main-content-inner {
      padding: 30px;
    }

    .card-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .card-grid .card {
      height: auto;
    }

    .card-grid .card-inner {
      height: auto;
      min-height: 200px;
    }

    .card-grid .card-front {
      position: relative;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 178px 1fr; /* 写真はPCと同じ178px */
      grid-template-rows: 1fr;
      column-gap: 20px;
      row-gap: 0; /* 上部余白なし */
      padding: 20px;
      align-items: center;
    }

    .card-grid .card-back {
      display: none !important;
    }

    .card-grid .arch-window {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      width: 178px; /* PCと同じ */
      aspect-ratio: 1 / 1.3;
      margin: 0;
    }

    .card-grid .student-info {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      margin-top: 0;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    /* 文字サイズはPCと同じ */
    .card-grid .student-info .faculty-name {
      font-size: 1.5rem;
      margin-bottom: 5px;
    }

    .card-grid .student-info-row {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .card-grid .student-info .department-name {
      font-size: 1.8rem;
      margin-right: 0;
      line-height: 1.3;
      font-weight: bold;
    }

    .card-grid .student-info .name {
      font-size: 1.8rem;
      font-weight: bold;
    }

    .card-grid .card:nth-child(even) .card-front {
      display: grid;
    }

    .pagination {
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
  }

  /* iPad：カード幅80%・中央寄せ */
  @media (min-width: 769px) and (max-width: 1100px) {
    .page-header-tag {
      width: 80%;
      max-width: 80%;
      margin-left: auto;
      margin-right: auto;
    }

    .card-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    .card-grid .card {
      width: 80%;
      max-width: 80%;
    }
  }

  @media (max-width: 768px) {
    /* .sidebar {
      display: none;
    } */

    /* スマホ版カードレイアウト調整 */
    .main-content-inner {
      padding: 20px;
    }

    .card-grid {
      grid-template-columns: 1fr; /* 1カラム強制 */
      gap: 0; /* 上下間隔を0に */
    }

    .card {
      height: auto; /* 高さはコンテンツに合わせる */
    }

    .card-inner {
      height: auto;
      min-height: 200px; /* カード全体の最低高さ確保 */
    }

    .card-front,
    .card-grid .card-front {
      position: relative; /* absolute解除 */
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 40% 1fr; /* 左:写真(40%) 右:情報 */
      grid-template-rows: 1fr;
      column-gap: 20px;
      row-gap: 0; /* arch-window上の余白をなしに */
      padding: 20px;
      align-items: center; /* 垂直中央揃え */
    }

    .card-back {
      display: none !important; /* スマホでは裏面なし */
    }

    /* アーチ窓（左側） */
    .arch-window,
    .card-grid .arch-window {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      width: 100%;
      height: auto;
      margin: 0;
      /* アスペクト比維持・1100pxの165pxを上書きして40%グリッド列に合わせる */
    }

    /* 学生情報（右側） */
    .card-grid .student-info {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      margin-top: 0;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%; /* 高さ揃え */
    }

    /* SP版：iPadより小さいフォント（詳細度を .card-grid 付きで上書き） */
    .card-grid .student-info .faculty-name {
      font-size: 1.2rem;
      margin-bottom: 5px;
    }

    .card-grid .student-info-row {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .card-grid .student-info .department-name {
      font-size: 1.4rem;
      margin-right: 0;
      line-height: 1.3;
      font-weight: bold;
    }

    .card-grid .student-info .name {
      font-size: 1.4rem;
      font-weight: bold;
    }

    /* 透明カードの調整 */
    .card:nth-child(even) .card-front {
      display: grid;
      /* 透明カードも同じレイアウトに */
    }

    /* カラーはPCと同じにするため、上書き設定を削除 */
  }

/* フッター */
.site-footer {
  position: relative; /* sidebar-ctaのabsolute配置用 */
  background-color: #fdfaf3;
  padding: 0 20px 0;
  text-align: center;
  border-top: 1px solid #11334f;
  width: 100%;
}

/* フッター内scrolling-header：上部余白なし・親のpaddingを打ち消して全幅表示 */
.site-footer .scrolling-header {
  margin-top: 0;
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}

/* scrolling-header直下の余白をfooter-contentに移動 */
.footer-content {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  gap: 15px;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

.footer-logo img {
  height: auto;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.university-name-text {
  font-size: 2.2rem;
  font-weight: bold;
  color: #003366;
  letter-spacing: 0.1em;
  display: block; /* ロゴの横ではなく下に配置される可能性を考慮 */
}

.footer-address {
  font-size: 1.5rem;
  color: #666;
  margin-top: 0px;
  margin-bottom: 0; /* pタグのデフォルトmargin-bottomを上書き */
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.btn-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 40px;
  padding: 0;
  border: 1px solid #003366;
  border-radius: 30px;
  text-decoration: none;
  color: #003366;
  font-weight: bold;
  font-size: 1.6rem;
  background-color: #fff;
  transition: all 0.3s;
  position: relative;
}

.btn-footer:hover {
  background-color: rgba(255, 255, 255, 0.6); /* 白60% */
  color: #003366; /* 文字色はそのまま維持 */
}

/* 8px四角形の2辺（top, right）のボーダーを#022f66で45度回転させて矢印を表現 */
.btn-footer::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid #022f66;
  border-right: 1px solid #022f66;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}

.btn-footer:hover::after {
  animation: arrow-bounce 0.8s infinite;
}

@keyframes arrow-bounce {
  0%, 100% {
    transform: translateY(-50%) translateX(0) rotate(45deg);
  }
  50% {
    transform: translateY(-50%) translateX(5px) rotate(45deg);
  }
}

.footer-sns {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 40px;
}

.sns-icon {
  width: 40px;
  height: 40px;
  transition: opacity 0.3s, transform 0.3s ease;
  display: block;
}

.sns-icon:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

.sns-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.copyright {
  font-size: 1rem;
  color: #003366;
  font-weight: 500;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 0 20px 0;
  }

  .site-footer .footer-content {
    padding-top: 40px;
  }

  .university-name-text {
    font-size: 1.8rem;
  }

  .footer-links {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  .btn-footer {
    font-size: 1.4rem;
  }

  .sns-icon {
    width: 40px;
    height: 40px;
  }
}

/* =========================================
   詳細ページ (body.story_detail) 用スタイル
   ========================================= */

/* Detail Page Layout Overrides */
.story_detail .page-wrapper.detail-page {
  display: block;
  padding: 0;;
  /* Remove flex layout from base page-wrapper if needed, or just manage children */
}

/* Hide the mobile sidebar on PC (only used for hamburger menu on mobile) */
.story_detail .detail-page .sidebar {
  display: none;
}

/* 詳細ページ：sidebar-ctaは非表示（スマホでハンバーガー開時のみ表示） */
.story_detail .sidebar-cta {
  display: none !important;
}

.detail-main-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 650;
  overflow: hidden;
}

.detail-main-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 /* display: block;*/
}

/* PC用画像：PCのみ表示 */
.detail-main-visual-pc {
  display: block;
}
.detail-main-visual-sp {
  display: none;
}

/* SP用画像：SPのみ表示 */
@media (max-width: 768px) {
  .detail-main-visual-pc {
    display: none;
  }
  .detail-main-visual-sp {
    display: block;
  }
}

/* 共用画像：PC・SP両方で表示 */
.detail-main-visual-all {
  display: block;
}

/* Floating Logo Area (PC) */
.floating-logo-area {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: #fdfaf3;
  padding: 20px 30px;
  /* Padding adjustment */
  width: auto;
  border-bottom-right-radius: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
  /* Optional: add subtle shadow */
  border-right: 1px solid #11334f;
  border-bottom: 1px solid #11334f;
}

.floating-logo-area a {
  display: block;
  line-height: 1;
}

.floating-logo-area .logo-mirai {
  width: auto;
  height: 84px;
}

.floating-logo-area .logo-univ {
  width: auto;
  height: 24px;
}

.floating-logo-area .logo-univ-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.floating-logo-area .logo-subtitle {
  font-size: 15px;
  color: #000;
  line-height: 1;
  font-weight: bold;
  letter-spacing: 0.1em;
}

/* Search Button */
.search-btn-fixed {
  position: fixed;
  top: 0;
  /* Align with top of content area below header */
  right: 0;
  z-index: 200;
  cursor: pointer;
  width: 180px;
  /* Adjust based on image */
  height: 60px;
  background: none;
  border: none;
  padding: 0;
  border-left: 1px solid #11334f;
  border-bottom: 1px solid #11334f;
  background-color: #fdfaf3;
}

.search-btn-fixed img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Profile Overlay */
.profile-overlay {
  position: absolute;
  bottom: 60px;
  left: 60px;
  background-color: transparent;
  padding: 0;
  max-width: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.profile-overlay .faculty {
  font-size: 2.4rem;
  margin-bottom: 0;
  display: inline-block;
  font-weight: bold;
  background-color: var(--theme-color);
  color: #fff;
  padding: 10px 15px;
  line-height: 1.4;
  border: 1px solid #000;
  border-bottom: 1px solid #000;
}

.profile-overlay .department-grade {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 0;
  display: inline-block;
  width: fit-content;
  max-width: 520px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  background-color: var(--theme-color);
  color: #fff;
  padding: 14px 15px;
  line-height: 1.4;
  margin-top: -1px;
  border: 1px solid #000;
  border-bottom: 1px solid #000;
}
.profile-overlay .department-grade-sub{
  font-size: 1.6rem;
  font-weight: normal;
  display: block;

}

/* タブレット版：profile-overlay の位置・department-grade の最大幅を50%に */
@media (min-width: 769px) and (max-width: 1100px) {
  .profile-overlay {
    left: 40px;
    bottom: 40px;
  }
  .profile-overlay .faculty {
    font-size: 2rem;
  }

  .profile-overlay .department-grade {
    max-width: 280px;
    font-size: 2.4rem;
  }

  .profile-overlay .department-grade-sub {
    font-size: 1.2rem;
  }
}


.profile-overlay .name-company {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0;
  align-items: flex-start;
  background-color: #fff;
  padding: 15px 15px;
  margin-top: -1px;
  border: 1px solid #000;
  max-width: 430px;
}

.profile-overlay .name {
  font-size: 2rem;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
  padding-bottom: 6px;
}

.profile-overlay .company {
  font-size: 1.4rem;
  color: #333;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  flex: 1;
  margin: 0;
  padding: 0;
 
}

/* タブレット版：profile-overlay の位置・department-grade の最大幅を50%に */
@media (min-width: 769px) and (max-width: 1100px) {

  .profile-overlay .name-company {
    max-width: 280px;
  }
}

/* デフォルト以外のカラーテーマ：profile-overlay内テキストを#111111に */
.story_detail[class*="theme-"]:not(.theme-default) .profile-overlay .faculty,
.story_detail[class*="theme-"]:not(.theme-default) .profile-overlay .department-grade,
.story_detail[class*="theme-"]:not(.theme-default) .profile-overlay .name,
.story_detail[class*="theme-"]:not(.theme-default) .profile-overlay .company {
  color: #111111;
}

/* Content Area */
.detail-container {
  width: 1180px;
  max-width: 100%;
  margin: 0 auto;
  padding: 60px 0 0;
  position: relative;
}

.story_detail .main-content {
  padding: 50px 20px;
}

.qa-section {
  background-color: #fff;
  border-radius: 60px;
  padding: 90px 110px 90px;
  margin-top: -50px;
  /* Overlap effect? Image shows content area below visual */
  position: relative;
  z-index: 20;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
  /*
.qa-item {
margin-bottom: 40px;
}*/

.qa-question {
  font-size: 2.4rem;
  font-weight: bold;
  color: #003366;
  margin-bottom: 40px; /* ドットから次テキストまでの間隔 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.qa-question::after {
  content: "";
  display: block;
  flex-basis: 100%;
  flex-shrink: 0;
  width: 54px;
  min-width: 54px;
  height: 6px;
  min-height: 6px;
  margin: 15px auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53.13 5.57'%3E%3Ccircle cx='2.79' cy='2.79' r='2.79' fill='%235da2cd'/%3E%3Ccircle cx='14.68' cy='2.79' r='2.79' fill='%23f7bc3c'/%3E%3Ccircle cx='26.57' cy='2.79' r='2.79' fill='%23f4828e'/%3E%3Ccircle cx='38.46' cy='2.79' r='2.79' fill='%2358af7b'/%3E%3Ccircle cx='50.35' cy='2.79' r='2.79' fill='%23f7a584'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 54px 6px; /* contain→固定サイズでiPhoneでの潰れを防止 */
}

.qa-question::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 26px;
  background-color: #003366;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.55 27.89'%3E%3Cpath d='M17.28,0C7.74,0,0,5.54,0,12.37c0,4.57,3.47,8.56,8.62,10.7.19.08.29.29.22.48l-1.33,3.82c-.12.34.24.64.55.47l6.13-3.25c.07-.04.15-.05.22-.04.93.11,1.88.18,2.86.18,9.54,0,17.28-5.54,17.28-12.37S26.83,0,17.28,0Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.55 27.89'%3E%3Cpath d='M17.28,0C7.74,0,0,5.54,0,12.37c0,4.57,3.47,8.56,8.62,10.7.19.08.29.29.22.48l-1.33,3.82c-.12.34.24.64.55.47l6.13-3.25c.07-.04.15-.05.22-.04.93.11,1.88.18,2.86.18,9.54,0,17.28-5.54,17.28-12.37S26.83,0,17.28,0Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.qa-answer {
  margin-bottom: 80px;
}

.qa-answer p {
  margin-top: 0;
  margin-bottom: 1.2em;
  line-height: 2.2;
  text-align: justify;
  text-justify: inter-character;
}

.qa-photo {

  text-align: center;
  margin-bottom: 80px;
}

.qa-photo img {
  width: 80%;
  height: auto;
  border: 1px solid #000;
  display: inline-block;
  border-radius: 18px;
}

.qa-photo-caption {
  margin-top: 10px;
  font-size: 1.4rem;
  color: #333;
  text-align: left;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* qa-answer・qa-photo-caption内リンク：常に下線 */
.qa-answer a,
.qa-photo-caption a {
  text-decoration: underline;
}
.qa-answer a:link,
.qa-photo-caption a:link {
  color: #196b99;
}
.qa-answer a:visited,
.qa-photo-caption a:visited {
  color: #4c8cb1;
}

/* 縦長画像用のクラス（JSで付与） */
.qa-photo.is-portrait img {
  width: 40%;
}

.qa-photo.is-portrait .qa-photo-caption {
  width: 40%;
}

/* Tag Drawer (Right Side) */
.tag-drawer {
  position: fixed;
  top: 0;
  right: -860px;
  width: 860px;
  max-width: 100%;
  height: auto;
  min-height: 400px;
  background-color: #fdfaf3;
  z-index: 300;
  transition: right 0.4s ease;
  padding: 60px 40px 60px 60px;
  /* overflow-y: auto; */ /* Removed to fit content */
  box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 60px;
  display: flex;
  flex-direction: column;
}

.tag-drawer-cta {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  justify-content: center;
}

.tag-drawer-cta .btn-request {
  width: 190px;
  height: 40px;
  padding: 0 20px;
  font-size: 1.6rem;
  line-height: 1;
}

/* tag-drawer内の2つ目以降のsidebar-sectionに上余白 */
.tag-drawer .sidebar-section + .sidebar-section {
  margin-top: 40px;
}

.tag-drawer.is-open {
  right: 0;
}

.tag-drawer-close {
  position: absolute;
  top: 30px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #003366;
  border-radius: 4px;
  color: #003366;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.tag-drawer-close:hover {
  background-color: #f0f0f0;
}

.tag-drawer-close .close-icon {
    display: block;
    width: 12px;
    height: 12px;
    position: relative;
}

.tag-drawer-close .close-icon::before,
.tag-drawer-close .close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: #003366;
}

.tag-drawer-close .close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.tag-drawer-close .close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Overlay for drawer */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .story_detail .detail-page .sidebar {
    display: flex;
    /* Restore for mobile */
  }

  .detail-container {
    width: 100%;
    padding: 0px 0 0;
  }
  
  .story_detail .main-content {
    padding-left: 0;
    padding-right: 0;
  }

  .floating-logo-area,
  .search-btn-fixed {
    display: none;
    /* Hide PC elements on mobile if needed, or adjust */
  }

  /* Mobile specific adjustments */
  .profile-overlay {
    bottom: -22px; /* -93pxから20px上へ */
    left: 24px;
    right: 24px;
    align-items: flex-start;
    z-index: 30;
  }

  .profile-overlay .faculty {
    font-size: 20px;
    padding: 6px 10px;
  }

  .profile-overlay .department-grade {
    font-size: 22px;
    padding: 8px 10px;
    margin-top: -1px;
    max-width: none;
  }

  .profile-overlay .department-grade-sub {
    font-size: 1.2rem;
  }

  .profile-overlay .name-company {
    padding: 10px 10px;
    margin-top: -1px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .profile-overlay .name {
    font-size: 15px;
    padding-bottom: 3px;
  }

  .profile-overlay .company {
    font-size: 1.2rem;
  }

  .qa-section {
    padding: 60px 0 70px; /* 上パディング2倍(30px→60px)、下部70px */
   margin-top: 1px; /* 白背景の開始位置をさらに20px上へ (110px→90px) */
    border-radius: 40px;
  }

  .qa-question {
    font-size: 2.2rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0 24px; /* 左右パディング追加 */
    margin-bottom: 30px; /* ドットから次テキストまでの間隔（SP） */
  }

  .qa-question-text {
    text-align: center;
  }

  .qa-answer {
    padding: 0 24px; /* 左右パディング追加 */
  }

  .qa-photo {
    margin-top: 30px;
    text-align: center;
    width: 100%; /* 横幅いっぱい */
  }

  .qa-photo img {
    width: 100% !important; /* 横幅いっぱい */
    border: none; /* 罫線なし */
    border-radius: 0; /* 角丸なし */
  }

  .qa-photo-caption {
    padding: 0 24px; /* キャプションにはパディングが必要 */
    width: 100%;
  }

  .qa-question::before {
    width: 32px;
    height: 26px;
    align-self: center;
    margin-bottom: 5px;
  }

  .qa-question::after {
    flex-basis: auto;
    flex-shrink: 0;
    align-self: center;
    margin-top: 5px;
    min-height: 6px;
    min-width: 54px; /* iPhoneでの潰れ防止 */
  }

  .btn-back-home {
    width: 190px;
    height: 60px;
    padding: 0;
    min-width: 190px;
  }

  .qa-photo.is-portrait img {
    width: 100%; /* SP版は縦長でも100% */
  }

  .qa-photo.is-portrait .qa-photo-caption {
    width: 100%; /* SP版は縦長でも100% */
  }

  .detail-main-visual {
    width: 100%;
    aspect-ratio: 390 / 500;
    min-height: auto;
    overflow: visible;
  }

  .detail-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: auto;
  }
}

/* Back to Home Button */
.back-to-home {
  display: flex;
  justify-content: center;
  align-items: center; /* 念のため */
  margin-top: 60px;
  margin-bottom: 10px;
  width: 100%; /* 幅を確保 */
  text-align: center; /* 念のため */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.btn-back-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 40px;
  background-color: #fff;
  border: 1px solid #003366;
  border-radius: 30px;
  color: #003366;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.4rem;
  transition: all 0.3s;
  min-width: 200px;

}

.btn-back-home:hover {
  background-color: #003366;
  color: #fff;
}

.icon-home {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #003366;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.79 15.51'%3E%3Cpath d='M1.72,13.79h2.59v-5.17h5.17v5.17h2.59v-7.76l-5.17-3.88L1.72,6.03v7.76ZM0,15.51V5.17L6.89,0l6.89,5.17v10.34h-6.03v-5.17h-1.72v5.17H0Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.79 15.51'%3E%3Cpath d='M1.72,13.79h2.59v-5.17h5.17v5.17h2.59v-7.76l-5.17-3.88L1.72,6.03v7.76ZM0,15.51V5.17L6.89,0l6.89,5.17v10.34h-6.03v-5.17h-1.72v5.17H0Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color 0.3s;
}

.btn-back-home:hover .icon-home {
  background-color: #fff;
}

/* Footer Info */
.detail-footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右寄せ */
  margin-top: 30px;
  gap: 20px;
}

.update-message {
  font-size: 1.2rem;
  color: #333;
  text-align: right;
  width: 100%;
}

.detail-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  justify-content: flex-start; /* タグ一覧は左寄せ（コンテナ内での配置） */
  width: 100%; /* 幅を確保して左寄せを有効にする */
}

.detail-tag-item {
  display: inline-block;
  padding: 6px 15px;
  border: 1px solid #003366;
  border-radius: 20px;
  text-decoration: none;
  color: #003366;
  font-size: 1.3rem;
  background-color: #fff;
  transition: all 0.3s;
}

.detail-tag-item:hover {
  background-color: #fdfaf3;
  color: #003366;
}

.detail-banner-area {
  margin-top: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.detail-banner-link {
  display: block;
  width: 430px;
  max-width: 100%;
}

.detail-banner-link img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .detail-footer-info {
    align-items: flex-start;
    padding: 0 24px;
  }

  .update-message {
    margin-bottom: 15px;
  }

  .detail-banner-area {
    justify-content: center;
    margin-top: 30px;
  }

  .detail-banner-link {
    width: 100%;
    padding: 0; /* マージン(パディング)ゼロ */
  }
}

/* =========================================
   カラーテーマ設定 (詳細ページ用)
   ========================================= */

/* デフォルト変数定義 */
.story_detail {
  --theme-color: #284e7d;
  /* デフォルトのアクセントカラー（濃紺） */
  --theme-bg-color: #fdfaf3;
  /* デフォルトの背景色（クリーム） */
}

.story_detail.theme-blue {
  --theme-color: #5da2cd;
  --theme-bg-color: #5da2cd;
}

.story_detail.theme-default {
  --theme-color: #284e7d;
  --theme-bg-color: #fdfaf3;
}

.story_detail.theme-pink {
  --theme-color: #f4828e;
  --theme-bg-color: #f4828e;
}

.story_detail.theme-orange {
  --theme-color: #f7a584;
  --theme-bg-color: #f7a584;
}

.story_detail.theme-yellow {
  --theme-color: #f7bc3c;
  --theme-bg-color: #f7bc3c;
}

.story_detail.theme-green {
  --theme-color: #58af7b;
  --theme-bg-color: #58af7b;
}

/* 1. 詳細ページのテーマ背景色はmain-contentに設定 */
.story_detail .main-content {
  background-color: var(--theme-bg-color);
  transition: background-color 0.3s;
}

/* フローティングロゴエリアと検索ボタンの背景もページ背景に合わせる */
/* floating-logo-area はカラーテーマ適用外 */
.story_detail .search-btn-fixed {
 /* background-color: var(--theme-bg-color);*/
  transition: background-color 0.3s;
}

/* カラーテーマ適用時は格子柄をなしにする（デフォルト以外） */
.story_detail[class*="theme-"]:not(.theme-default) .main-content {
  background-image: none;
}

/* タグドロワーの背景も合わせる（スマホはテーマ色継承） */
.story_detail .tag-drawer {
  background-color: var(--theme-bg-color);
}

/* 詳細ページPC版：tag-drawerはテーマカラーを継承せず標準背景色 */
@media (min-width: 769px) {
  .story_detail .tag-drawer {
    background-color: #fdfaf3 !important;
  }
}

/* 2. プロフィール背景色 */
/* 背景色は個別の要素に適用するため、親要素の背景色は削除 */
/* .story_detail .profile-overlay {
  background-color: var(--theme-color);
  opacity: 0.95;
  transition: background-color 0.3s;
} */

/* 3. 見出しのアイコンカラー */
.story_detail .qa-question::before {
  background-color: var(--theme-color);
  transition: background-color 0.3s;
}

/* =========================================
   Related Articles Area (Detail Footer)
   ========================================= */
.detail_footer {
  background-color: #f9f4e8;
  padding-top: 40px;
  padding-bottom: 60px;
  overflow: hidden; /* スクロールバーが出ないように */
  position: relative;
  z-index: 20; /* 念のため */
}

/* Footer Scroller */
.detail_footer .scrolling-header {
  position: relative; /* 固定ではなく通常配置 */
  background-color: transparent; /* 背景色変更 */
  border-bottom: none; /* ボーダーなし */
  margin-bottom: 40px;
  margin-top: 0; /* ネガティブマージンを削除して元に戻す */
  height: 60px; /* 高さ調整 */
}

.detail_footer .scrolling-track {
  gap: 0; /* 画像の隙間 */
}

/* Related Article Container */
.related-article-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.related-header {
  margin-bottom: 40px;
}

.related-title {
  font-size: 2.4rem;
  font-weight: bold;
  color: #003366;
  margin-bottom: 15px;
  letter-spacing: 0.1em;
}

.related-title::after {
  content: "";
  display: block;
  width: 54px;
  min-width: 54px;
  height: 6px;
  min-height: 6px;
  margin: 15px auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53.13 5.57'%3E%3Ccircle cx='2.79' cy='2.79' r='2.79' fill='%235da2cd'/%3E%3Ccircle cx='14.68' cy='2.79' r='2.79' fill='%23f7bc3c'/%3E%3Ccircle cx='26.57' cy='2.79' r='2.79' fill='%23f4828e'/%3E%3Ccircle cx='38.46' cy='2.79' r='2.79' fill='%2358af7b'/%3E%3Ccircle cx='50.35' cy='2.79' r='2.79' fill='%23f7a584'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 54px 6px; /* contain→固定サイズでiPhoneでの潰れを防止 */
}

/* Swiper Adjustments */
.swiper-related {
  padding: 20px 40px 90px; /* 左右に矢印用スペース、下にページネーション用 */
}

.swiper-related .swiper-slide {
  height: auto; /* カードの高さに合わせる */
}

.swiper-related .card {
  height: 230px; /* 高さ固定 260px->230px (swiper-wrapperを30px縮小) */
  width: 100%;
}

.swiper-related .arch-window {
  width: 110px;
}

/* PC版：関連記事カードを少し小さく */
@media (min-width: 769px) {
  .related-article-container .swiper-related .card {
    height: 200px;
  }

  /* card-inner直下の .card-front の下パディングを控えめに */
  .related-article-container .swiper-related .card-front {
    padding-top: 10px;
    padding-bottom: 13px;
  }

  .related-article-container .swiper-related .arch-window {
    width: 95px;
    aspect-ratio: 1 / 1.5;
    margin-top: 2px;
    margin-bottom: 6px;
  }

  .related-article-container .swiper-related .student-info .faculty-name {
    font-size: 1rem;
    margin-bottom: 2px;
  }

  .related-article-container .swiper-related .student-info-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    text-align: left;
  }

  .related-article-container .swiper-related .student-info .name {
    white-space: normal;
  }

  .related-article-container .swiper-related .student-info {
    text-align: left;
  }

  .related-article-container .swiper-related .student-info .department-name,
  .related-article-container .swiper-related .student-info .name {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  .related-article-container .card-tag-item {
    font-size: 1.2rem;
    padding: 4px 10px;
  }
}

/* タブレット版：related-article の department-name を 1rem */
@media (min-width: 769px) and (max-width: 1100px) {
  .related-article-container .swiper-related .student-info .department-name {
    font-size: 1rem;
  }
}

/* カードの配色上書き (Swiper用) */
/* Swiperのnth-childで指定 */

/* 1. まずSwiper内の全カードのアニメーションとスタイルをリセット */
.swiper-related .card:hover .card-inner {
    animation: none;
}

/* 2. 奇数番目 (色付き・回転) - data-card-indexで指定（1101px以上のみ） */
@media (min-width: 1101px) {
  .swiper-related .card[data-card-index="1"]:hover .card-inner,
  .swiper-related .card[data-card-index="3"]:hover .card-inner,
  .swiper-related .card[data-card-index="5"]:hover .card-inner,
  .swiper-related .card[data-card-index="7"]:hover .card-inner,
  .swiper-related .card[data-card-index="9"]:hover .card-inner {
    animation: rotate-cycle 1s ease-in-out forwards;
  }
}

/* 個別の色設定 */
.swiper-related .card[data-card-index="1"] .card-front,
.swiper-related .card[data-card-index="1"] .card-back { background-color: #72b2d6 !important; } /* Blue */

.swiper-related .card[data-card-index="3"] .card-front,
.swiper-related .card[data-card-index="3"] .card-back { background-color: #f4828e !important; } /* Pink */

.swiper-related .card[data-card-index="5"] .card-front,
.swiper-related .card[data-card-index="5"] .card-back { background-color: #f7a584 !important; } /* Orange */

.swiper-related .card[data-card-index="7"] .card-front,
.swiper-related .card[data-card-index="7"] .card-back { background-color: #f7bc3c !important; } /* Yellow */

.swiper-related .card[data-card-index="9"] .card-front,
.swiper-related .card[data-card-index="9"] .card-back { background-color: #58af7b !important; } /* Green */


/* 3. 偶数番目 + 10番目 (白背景+格子柄・バウンド) - 10番目は無色で11枚目からカラー配列再開 */
.swiper-related .card[data-card-index="2"] .card-front,
.swiper-related .card[data-card-index="4"] .card-front,
.swiper-related .card[data-card-index="6"] .card-front,
.swiper-related .card[data-card-index="8"] .card-front,
.swiper-related .card[data-card-index="10"] .card-front {
  background-color: #fff !important;
  color: #111111 !important;
  background-image:
      linear-gradient(#fbd2c1 1px, transparent 1px),
      linear-gradient(90deg, #fbd2c1 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: -25px -5px; /* 格子柄の開始位置 */
}

/* デフォルトカードのタグは上で定義済み（背景#022f66、文字白） */

.swiper-related .card[data-card-index="2"] .student-info,
.swiper-related .card[data-card-index="4"] .student-info,
.swiper-related .card[data-card-index="6"] .student-info,
.swiper-related .card[data-card-index="8"] .student-info,
.swiper-related .card[data-card-index="10"] .student-info {
  color: #111111 !important;
}

.swiper-related .card[data-card-index="2"] .card-back,
.swiper-related .card[data-card-index="4"] .card-back,
.swiper-related .card[data-card-index="6"] .card-back,
.swiper-related .card[data-card-index="8"] .card-back,
.swiper-related .card[data-card-index="10"] .card-back {
  display: none !important;
}

/* 1101px以上のみarch-window回転 */
@media (min-width: 1101px) {
  .swiper-related .card[data-card-index="2"]:hover .arch-window,
  .swiper-related .card[data-card-index="4"]:hover .arch-window,
  .swiper-related .card[data-card-index="6"]:hover .arch-window,
  .swiper-related .card[data-card-index="8"]:hover .arch-window,
  .swiper-related .card[data-card-index="10"]:hover .arch-window {
    animation: card-rotate-light 0.5s ease forwards;
  }
}

/* Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
  color: #003366;
  width: 40px;
  height: 40px;
  background-color: var(--theme-color); /* テーマカラー継承 */
  border-radius: 50%; /* 丸くする */
  color: #fff; /* 矢印は白に */
  transition: background-color 0.3s;
  /* margin: 0 5px; 削除: 位置指定で制御するため */
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px; /* 矢印サイズ調整 */
  font-weight: bold;
}

/* unit.cssの右下配置と競合しないよう、swiper-related内で位置を明示的に指定 */
.swiper-related .swiper-button-prev {
  right: 55px !important; /* nextボタン(約10px) + 幅40px + 5px間隔 */
  left: auto !important;
}

.swiper-related .swiper-button-next {
  right: 10px !important;
  left: auto !important;
}

/* Pagination */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    opacity: 1;
    margin: 0 4px !important; /* 左右に4pxずつ = 合計8pxの間隔 */
}

.swiper-pagination-bullet-active {
    background: #003366;
}

/* iPad・iPad Pro用：スライダーのはみ出し防止 */
@media (max-width: 1100px) {
  .related-article-container {
    overflow-x: hidden;
  }

  .swiper-related {
    padding: 20px 20px 60px;
    overflow: hidden;
  }
}

/* SP Adjustments */
@media (max-width: 768px) {
  .detail_footer .scrolling-header {
     margin-bottom: 30px;
     margin-top: 0; /* ネガティブマージンを削除 */
  }
  
  .related-title {
    font-size: 2rem;
  }
  
  .swiper-related {
    padding: 0 0 70px; /* arch-window拡大に伴い下余白を増加 */
  }

  /* ページネーションを下にずらし、arch-windowとの重なりを解消 */
  .swiper-related .swiper-pagination {
    bottom: 40px !important;
  }
  
  .swiper-related .card {
    height: auto;
    min-height: 100px; /* 確保 (170px->140px swiper-wrapperを30px縮小) */
  }

  /* card-innerのmin-height:200pxを上書き（card-grid用） */
  .swiper-related .card-inner {
    min-height: 160px;
  }

  .swiper-related .arch-window {
    width: 100%; /* グリッド列(40%)内で100% */
  }

  /* SP Card Layout overrides from index if needed */
  .swiper-related .card-front {
      /* SP用のグリッドレイアウトを継承確認 */
      row-gap:0;
      align-items: center; /* arch-windowに対してstudent-infoを縦中央 */
  }

  /* SP：student-info を arch-window に対して縦中央・左揃え */
  .swiper-related .student-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin-top: 0;
    text-align: left;
    width:100%
  }

  /* SP：department-name と name の間隔を狭く・フォントサイズ1.4rem */
  .swiper-related .student-info-row {
    gap: 2px;
  }

  .swiper-related .student-info .department-name,
  .swiper-related .student-info .name {
    font-size: 1.4rem;
    width:100%;
  }

}

}