@charset "UTF-8";
/* ==========================================================================
   top.css ― トップページ専用（読込スコープ：/index.html のみ）
   --------------------------------------------------------------------------
   - 命名：新コア命名（p-* / c-*）。現行 l- には寄せない。
   - 色は必ず var(--color-*) 経由（#1a2a5e 直書き禁止）。
   - components.css / nav.css は触らない。トップ固有の追加はすべて本ファイル。
   - Phase 1：共通部品（c-heading-top）
   - c-btn は components.css へ移設済み（2026-07 core還元）。
   ========================================================================== */

/* ==========================================================================
   1. セクション共通見出し（英大文字＋日本語サブ）
   ========================================================================== */
.c-heading-top {
  text-align: center;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: .08em;
  font-weight: var(--fw-bold);
  color: var(--color-main);
  margin-top: 24px;
  margin-bottom: 32px;
}
.c-heading-top__sub {
  display: block;
  font-size: var(--fs-sm);
  letter-spacing: .2em;
  color: var(--color-gray-700);
  margin-top: 3px;
}
.c-heading-top--left { text-align: left; }
.c-heading-top--white,
.c-heading-top--white .c-heading-top__sub { color: #fff; }

/* ==========================================================================
   5. S2 メインビジュアル（Swiper）
   短大 .main-visual をクリーン化（!important 0 / BP 768-769 / トークン使用）
   ========================================================================== */
.main-visual {
  padding: 32px 0;
  background-color: #fff;
  overflow: hidden;
}

.main-visual__inner {
  width: 100%;
  margin: 0 auto;
  padding: 0 6%;
}

.main-visual__slider {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: visible;
  opacity: 0; /* 初期化前のフラッシュ防止 */
}

.main-visual__slider.swiper-initialized {
  opacity: 1;
  transition: opacity var(--transition-base);
}

.main-visual__slide {
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.main-visual__thumb {
  margin: 0 10px;
  overflow: hidden;
}

.main-visual__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 350; 
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.main-visual__slide:hover .main-visual__thumb img {
  transform: scale(1.03);
}

.main-visual__pagination {
  position: static;
  text-align: center;
  margin-top: 5px;
}

.main-visual .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(--color-gray-300);
  opacity: 1;
}

.main-visual .swiper-pagination-bullet-active {
  background-color: var(--color-main);
}

.main-visual .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(--color-gray-300);
  opacity: 1;
}

.main-visual .swiper-pagination-bullet-active {
  background-color: var(--color-main);
}

/* PC */
@media (min-width: 769px) {
  .main-visual {
    padding: 0;
  }
}

/* SP */
@media (max-width: 768px) {
  .main-visual {
    padding: 0 0 10px;
  }

  .main-visual__thumb {
    margin: 0 4px;
  }
}

/* ==========================================================================
   S3 重要なお知らせ（CMSひな形）
   見た目は法人版（旧お知らせバー実装）を踏襲。構造は .important-notice のまま
   ========================================================================== */
.important-notice {
  background-color: #fff;
  margin-top: 30px;
}

.important-notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  padding-block: 0;
  padding-inline: 0;
  border: 1px solid var(--color-main);
  border-radius: 0;
  overflow: hidden;
}

.important-notice__label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 220px;
  margin: 0;
  padding: 18px 28px;
  border-radius: 0;
  background-color: var(--color-main);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.important-notice__list {
  align-self: center; 
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.important-notice__item + .important-notice__item {
  margin-top: 8px;
}

.important-notice__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  color: var(--color-text);
  text-decoration: none;
}

.important-notice__link:hover {
  text-decoration: underline;
}

.important-notice__date {
  color: var(--color-text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  padding-left: 28px;
}

.important-notice__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  padding: 0 28px;
}

/* SP */
@media (max-width: 768px) {
  .important-notice__inner {
    gap: 8px 12px;
  }

  .important-notice__label {
    min-width: 0;
    padding: 12px 20px;
  }

  .important-notice__date {
    padding: 12px 20px 0;
  }

  .important-notice__text {
    padding: 4px 20px 12px;
  }
}

/* ==========================================================================
   6. TOPICS カルーセル（Swiper・中央強調）
   - SP 1.2枚見せ／PC 3枚・中央拡大・dots（送りは JS の breakpoints で可変）。
   - カード＝画像（16/10）＋タイトル。見出しは c-heading-top を使用。
   ========================================================================== */
.p-topics {
  margin-top: 48px;
  padding: 16px 0 30px;
  background-image: url("../img/top/topics_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.p-topics__heading { margin-bottom: 24px; }
.p-topics__slider {
  position: relative;
  padding: 0 48px;
}
.p-topics__card {
  display: block;
  color: var(--color-gray-900);
  text-decoration: none;
}
.p-topics__inner {
  display: block;
  background-color: color-mix(in srgb, #fff 60%, transparent);
  padding: 16px;
  transition: transform .35s ease;
}
.p-topics__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-gray-50);
}
.p-topics__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.p-topics__title { margin-top: 12px; font-size: var(--fs-base); line-height: 1.6; text-align: center; }
.p-topics__pagination.swiper-pagination { position: static; margin-top: 16px; }

.p-topics .swiper-slide-active .p-topics__inner { transform: scale(1.15); position: relative; z-index: 1; }
.p-topics .swiper-slide:not(.swiper-slide-active) .p-topics__inner { transform: scale(.9); }

.p-topics .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--color-gray-300); opacity: 1; }
.p-topics .swiper-pagination-bullet-active { background: var(--color-main); opacity: 1; }

.p-topics .swiper-button-prev,
.p-topics .swiper-button-next {
  color: var(--color-main); /* 矢印＝紺 */
  top: 31%;
}

@media (max-width: 768px) {
  .p-topics { margin-top: 32px; padding: 16px 0 30px; }
  .p-topics__slider { padding: 0 32px; }
}

/* ==========================================================================
   S7 ABOUT（歯学部について）
   ========================================================================== */
.p-about {
  padding: 70px 0;
  background-image: url("../img/top/about_bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* c-heading-top に統一。個別調整が必要になった場合のフック */
.p-about__head {
}

.p-about__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.p-about__card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.p-about__card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.p-about__card-img-inner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.p-about__card:hover .p-about__card-img-inner {
  transform: scale(1.08);
}

.p-about__card-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 18px;
  background-color: var(--color-main);   /* WF は濃いグレーだが紺にしている */
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.p-about__card-text {
  margin: 0;
  padding: 14px 4px 0;
  color: var(--color-gray-700);          /* WFの本文グレーと完全一致 */
  font-size: var(--fs-base);               /* WF 13px の最近似を採用 */
  line-height: var(--lh-relaxed);        /* WF 1.8 と完全一致 */
}

/* SP */
@media (max-width: 768px) {
  .p-about {
    padding: 40px 0;
  }

  .p-about__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================================================
   S8 在学生の方（歯学部WF固有・全幅2カラム／本文左・画像右）
   ========================================================================== */
.p-student {
  display: flex;
  align-items: stretch;
  margin-block: 80px;          /* 背景パネル廃止に伴い前後のセクションと間隔を確保 */
}

.p-student__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  /* 画像が50%を占めるため固定値だと狭いPCでテキストが潰れる。上限100pxで自動調整 */
  padding: 60px clamp(24px, 6.8vw, 100px);
}

.p-student__title {
  margin: 0 0 16px;
  font-size: var(--fs-2xl);                 /* WF 24px の最近似を採用 */
  font-weight: var(--fw-bold);
}

.p-student__text {
  margin: 0 0 24px;
  color: var(--color-gray-700);             /* WFの本文グレーと完全一致 */
  font-size: var(--fs-base);   /* 16px */
  line-height: var(--lh-relaxed);           /* WF 1.9 の最近似（S6と同じ） */
}

.p-student__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
}

.p-student__btn {
  width: 280px;
  padding-block: 16px;
  padding-inline: 0;
  font-size: var(--fs-base);
}

.p-student__img {
  flex: 1;
  min-height: 320px;
}

.p-student__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md) 0 0 var(--radius-md);  /* PCは内側（左）のみ角丸。外側は全幅ブリードのため直角 */
}

/* SP */
@media (max-width: 768px) {
  .p-student {
    flex-direction: column-reverse;   /* SP は画像が上・本文が下（WF 準拠） */
  }

  .p-student__body {
    padding: 36px 16px;
  }

  .p-student__title {
    font-size: var(--fs-lg);          /* WF 20px */
  }

  .p-student__btns {
    max-width: none;
  }

  .p-student__btn {
    width: 100%;
  }

  .p-student__img {
    min-height: 0;                    /* S6 と同じ対処（枠だけ残って余白が出るのを防ぐ） */
    padding-inline: 16px;             /* 本文のSP余白と揃える（左端が一致する） */
  }

  .p-student__img img {
    height: 220px;                    /* WF min-height:220px 相当を画像側で持つ */
    border-radius: var(--radius-md);  /* SPは4角とも角丸 */
  }
}

/* ==========================================================================
   S9 MOVIE（公式YouTube）
   c-movie（components.css）は無変更。「もっと見る」ボタンのみ補完
   ========================================================================== */
.p-movie__more {
  margin-top: 44px;
  text-align: center;
}

.p-movie__more-btn {
  width: 280px;
  padding-block: 16px;
  padding-inline: 0;
  font-size: var(--fs-sm);
}

/* SP */
@media (max-width: 768px) {
  .p-movie__more {
    margin-top: 28px;
  }

  .p-movie__more-btn {
    width: 100%;
  }
}

/* ==========================================================================
   S9-2 Instagram（短大流用・手動カード5枚）
   装飾はシンプル化：短大のピンクストライプ背景／アイコン・ボタンのインスタ
   グラデは廃止し、色は --color-main に統一（テーマ切替に追従）。
   フォローボタンは c-btn c-btn--fill（ピル）を継承し幅のみ上書き。
   ========================================================================== */
.p-insta__inner {
  padding-block: 40px 56px;
}

.p-insta__header {
  margin-bottom: 24px;
  text-align: center;
}

.p-insta__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.p-insta__icon {
  font-size: 1.4em;
  line-height: 1;
  color: var(--color-main);
}

.p-insta__sub-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-sm);
}

.p-insta__account {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.p-insta__follow {
  width: auto;
  padding-block: 8px;
  padding-inline: 24px;
  font-size: var(--fs-sm);
}

.p-insta__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-insta__link {
  display: block;
}

.p-insta__thumb {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
}

.p-insta__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タブレット・PC：5列 */
@media (min-width: 769px) {
  .p-insta__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
}

/* SP */
@media (max-width: 768px) {
  .p-insta__sub-row {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* ==========================================================================
   S10 関連施設（学校法人神奈川歯科大学）
   短大 .facility をクリーン化
   ========================================================================== */
.facility {
  background-color: #fff;
}

.facility__inner {
  padding-block: 56px;
}

.facility__header {
  margin-bottom: 32px;
  text-align: center;
}

.facility__title {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.facility__list {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facility__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.facility__thumb {
  margin: 0;
  overflow: hidden;
}

.facility__thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);   /* 短大6pxの最近似を採用（実値5px） */
}

.facility__name {
  margin: 8px 4px 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);     /* 短大1.5の最近似を採用（実値1.6） */
  text-align: center;
}

/* SP：2列 */
@media (max-width: 768px) {
  .facility__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* タブレット：3列 */
@media (min-width: 769px) and (max-width: 1023px) {
  .facility__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* PC：5列 */
@media (min-width: 1024px) {
  .facility__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ==========================================================================
   S10-2 バナーエリア（WFに無い運用追加セクション／2026-07-22）
   見出しなし・バナー3枚。PC 3列／SP 2列。
   ========================================================================== */

.p-banner__inner {
  padding-block: 24px;
}

.p-banner__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-banner__link {
  display: block;
}

.p-banner__link:hover {
  opacity: 0.8;
}

.p-banner__link img {
  display: block;
  width: 100%;
  height: auto;
}

/* PC・タブレット：4列 */
@media (min-width: 769px) {
.p-banner__inner {
    padding-block: 60px;
  }
  
  .p-banner__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   S11 認定マーク（歯学部WF固有）
   ========================================================================== */
.p-accredit {
  padding: 50px 0;
}

.p-accredit__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.p-accredit__logo {
  flex-shrink: 0;
  width: 90px;
}

.p-accredit__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.p-accredit__text {
  margin: 0;
  color: var(--color-gray-700);      /* WFの本文グレーと完全一致 */
  font-size: var(--fs-sm);           /* WF 13px の最近似を採用（タイのため可読性優先） */
  line-height: var(--lh-relaxed);    /* WF 1.9 の最近似を採用 */
}

/* SP */
@media (max-width: 768px) {
  .p-accredit {
    padding: 32px 0;
  }

  .p-accredit__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ==========================================================================
   S5 お知らせ／イベント
   短大 .news 原本の数値に合わせてクリーン化（体験プログラムバナーはWF対象外のため撤去）
   ========================================================================== */
.news {
  background-color: #fff;
  margin-block: 50px;
}

.news__inner {
  padding-top: 0;
  padding-bottom: 0;
}

.news__columns {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: stretch;
}

.news__column {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);          /* 短大の角丸値から近似採用のまま */
  background-color: var(--color-gray-25);   /* 短大の背景値から近似採用のまま */
}

.news__column-title {
  margin: 0 0 20px;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  text-align: center;
}

.news__list {
  margin: 0 0 32px;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.news__item {
  border-bottom: 1px solid var(--color-border);
}

.news__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 12px;
  padding-inline: 0;
  color: var(--color-text);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.news__link:hover .news__title {
  text-decoration: underline;
}

.news__date {
  margin: 0;
  color: var(--color-gray-600);
  font-size: var(--fs-base);
  font-feature-settings: "palt";
}

.news__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 40%;
  padding: 3px 10px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--color-main);
  background-color: color-mix(in srgb, var(--color-main) 1%, transparent);
}

.news__category--exam,
.news__category--important {
  color: var(--color-exam);
  background-color: color-mix(in srgb, var(--color-exam) 6%, transparent);
}

/* 2026-09-24 お知らせ分類：中区分 メディア・イベント・OC の色 */
.news__category--media {
  color: var(--color-news-media);
  background-color: color-mix(in srgb, var(--color-news-media) 6%, transparent);
}

.news__category--event {
  color: var(--color-news-event);
  background-color: color-mix(in srgb, var(--color-news-event) 6%, transparent);
}

.news__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: normal;
  line-height: 1.7;
}

.news__more {
  margin-top: auto;
  text-align: center;
}

/* SP：お知らせをコンパクトに */
@media (max-width: 768px) {
  .news__column {
    padding: 20px 16px;
  }

  .news__column-title {
    margin-bottom: 12px;
    font-size: var(--fs-xl);
  }

  .news__list {
    margin-bottom: 20px;
  }

  .news__link {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 8px;
    padding-block: 10px;
  }

  .news__date {
    grid-column: 1;
  }

  .news__category {
    grid-column: 2;
    justify-self: start;
    width: auto;
    min-width: 40%;
    padding: 2px 8px;
  }

  .news__title {
    grid-column: 1 / -1;
  }
}

/* 769px以上：日付・カテゴリ・タイトルを横並び */
@media (min-width: 769px) {
  .news__link {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .news__date {
    width: 6em;
    flex-shrink: 0;
  }

  .news__category {
    flex-shrink: 0;
    min-width: 100px;
    justify-content: center;
    text-align: center;
  }

  .news__title {
    flex: 1;
    min-width: 0;
  }
}

/* 1024px以上：2カラム化＋記事内をグリッドに */
@media (min-width: 1024px) {
  .news__inner {
    margin-inline: auto;
  }

  .news__columns {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .news__column {
    flex: 1 1 0;
    padding: 40px;
  }

  .news__link {
    display: grid;
    grid-template-columns: 6em 1fr;
    align-items: start;
    gap: 4px 16px;
  }

  .news__date {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto;
    padding-top: 2px;
    white-space: nowrap;
  }

  .news__category {
    grid-column: 2;
    grid-row: 1;
    min-width: 100px;
  }

  .news__title {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   S6 受験生の方（歯学部WF固有・全幅2カラム）
   ========================================================================== */
   /* ===== S6 オープンキャンパス誘導バナー ===== */
.p-ocBanner {
  margin-block: var(--spacing-2xl);
}

.p-ocBanner__link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity .3s;
}

.p-ocBanner__link:hover {
  opacity: .8;
}

.p-ocBanner__link img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   トップ 横スクロール（MOVIE / Instagram / S10-2バナー）
   2026-08-24 追加。Swiper（bundle 11.1.14）＋ scrollbar。loop なし・矢印なし
   ========================================================================== */

/* --- スライダー枠（3セクション共通） --- */
.c-movie__slider,
.p-insta__slider,
.p-banner__slider {
  position: relative;
  padding-bottom: 40px;
}

/* --- ul を wrapper にしたことによる打ち消し ---
   旧 .p-insta__list / .p-banner__list のグリッド指定が残っており、
   打ち消さないと2段組みになる。Swiper は flex 前提 */
.p-insta__list.swiper-wrapper,
.p-banner__list.swiper-wrapper {
  display: flex;
  grid-template-columns: none;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- MOVIE：タイトルの行数が違ってもサムネイル位置を揃える --- */
.c-movie__slider .swiper-slide {
  height: auto;
}

.c-movie__slider .c-movie__card {
  display: block;
  height: 100%;
}

/* --- MOVIE：縦型（ショート）動画に合わせてサムネを 9:16 に ---
   core（components.css .c-movie__thumb-wrap）は 16/9。歯学部のみ上書き */
.c-movie__slider .c-movie__thumb-wrap {
  aspect-ratio: 9 / 16;
}

/* --- MOVIE：制作中の枠（Coming soon） --- */
.c-movie__slider .c-movie__soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  background-color: #fff;
  color: var(--color-main);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  text-align: center;
}
.c-movie__slider .c-movie__soon i {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-size: 2rem;
}

/* --- MOVIE：縦型では再生アイコンを出さない（core は無変更） --- */
.c-movie__slider .c-movie__play {
  display: none;
}

/* --- スクロールバー（3セクション共通） ---
   溝は当たり判定のため 10px を確保し、背景のグラデーションで
   中央2pxだけを線に見せる。高さを削るとドラッグできなくなる */
.c-movie__scrollbar.swiper-scrollbar,
.p-insta__scrollbar.swiper-scrollbar,
.p-banner__scrollbar.swiper-scrollbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  border-radius: 0;
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 4px,
    rgba(0, 0, 0, .15) 4px,
    rgba(0, 0, 0, .15) 6px,
    transparent 6px,
    transparent 100%
  );
}

.c-movie__scrollbar .swiper-scrollbar-drag,
.p-insta__scrollbar .swiper-scrollbar-drag,
.p-banner__scrollbar .swiper-scrollbar-drag {
  height: 10px;
  margin-top: 0;
  background: var(--color-main);
  border-radius: 5px;
}

/* MOVIE：ボタンのアイコンを大きく、キャプションとボタンの間を詰める */
.p-movie__more-btn i {
  font-size: 1.5rem;
}
/* PC は動画が5本並んで進み具合の線が出ないため、線のための下余白を外す（6本以上にしたら戻す） */
.c-movie__slider {
  padding-bottom: 0;
}
.p-movie__more {
  margin-top: 32px;
}
@media (max-width: 768px) {
  .c-movie__slider {
    padding-bottom: 24px;
  }
  .p-movie__more {
    margin-top: 20px;
  }
}

/* 2026-09-24 お知らせ一覧のアイコン：<a> の ::after は grid の子要素になり段が崩れるため消し、タイトルの末尾に付ける（短大と同じ方式） */
/* ① 一覧の <a> の自動アイコン（core の PDF・Word・Excel・外部リンク）を消す。外部リンクは core の指定と同じ条件をお知らせに絞って詳細度を上げる */
.news__list a.news__link::after,
.c-box-content .news__list a.news__link[href^="http"][target="_blank"]:not([href*=".pdf"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xls"]):not([href$=".xlsx"])::after {
  content: none;
}

/* ② PDF の行：タイトルの末尾に PDF のアイコン（値は components.css の a[href*=".pdf"]::after と同じ） */
.news__list a.news__link[href*=".pdf"] .news__title::after {
  content: "\f1c1";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  color: var(--color-pdf-badge);
  margin-left: 6px;
  font-size: 1.1em;
  vertical-align: middle;
}

/* ③ 外部リンクの行：タイトルの末尾に別ウィンドウのアイコン（値は components.css の外部リンクと同じ。PHP が target を出すようになってから効く） */
.news__list a.news__link[target="_blank"]:not([href*=".pdf"]) .news__title::after {
  content: "\f35d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--color-gray-400);
  margin-left: 6px;
  font-size: 0.8em;
  vertical-align: middle;
}