@charset "UTF-8";
/*
 * user.css
 *
 * Since:   2023-08-16
 * Update:  2026-10-31
 *
 * 動画で見る経済学部（#page-movie）専用スタイル
 *
 * ルール
 * - すべてのセレクタを #page-movie または .eco-movie でスコープする
 * - 共通のコンパイル済みCSS（インライン出力）は編集しない
 * - rem基準は既存サイトに合わせて 1rem = 10px（html{font-size:10px}）
 * - ブレークポイントも既存サイトに合わせる（576 / 768 / 992 / 1200px）
 */

/* =========================================================================
 * 1. 導入文とページ内ナビゲーション
 * ========================================================================= */

#page-movie .eco-movie__intro {
  margin-bottom: 8rem;
}

@media (min-width: 992px) {
  #page-movie .eco-movie__intro {
    margin-bottom: 10.8rem;
  }
}

#page-movie .eco-movie__lead {
  margin: 0 0 3.2rem;
  font-size: 1.4rem;
  line-height: 1.9;
}

@media (min-width: 992px) {
  #page-movie .eco-movie__lead {
    margin-bottom: 4.8rem;
    font-size: 1.6rem;
    line-height: 2;
    max-width: 88rem;
  }
}

/* カテゴリーナビ：スマホは2列、タブレット以上は横並び */
#page-movie .eco-movie__nav-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  #page-movie .eco-movie__nav-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
  }
}

#page-movie .eco-movie__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  height: 100%;
  padding: 1.4rem 1.2rem 1.4rem 1.6rem;
  border: 1px solid #D6DAE3;
  border-radius: 6px;
  background-color: #fff;
  color: #11325B;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

@media (min-width: 992px) {
  #page-movie .eco-movie__nav-link {
    padding: 1.8rem 1.6rem 1.8rem 2rem;
    font-size: 1.5rem;
  }
}

#page-movie .eco-movie__nav-link:hover,
#page-movie .eco-movie__nav-link:focus-visible {
  border-color: #004A98;
  background-color: #004A98;
  color: #fff;
}

#page-movie .eco-movie__nav-link .icon {
  flex: 0 0 auto;
  font-size: 2rem;
  color: #A7850F;
  transition: color 0.15s;
}

#page-movie .eco-movie__nav-link:hover .icon,
#page-movie .eco-movie__nav-link:focus-visible .icon {
  color: #fff;
}

/* アイコンフォント（Material Symbols）の読み込みが終わるまで、
   アイコン名の文字列（arrow_downward など）が表示されないよう隠しておく。
   幅をアイコン1文字分に固定し、読み込み後に表示されてもレイアウトがずれないようにする。
   読み込み完了時に user.js が #page-movie へ .is-icons-ready を付ける */
#page-movie:not(.is-icons-ready) .material-symbols-outlined {
  display: inline-block;
  width: 1em;
  overflow: hidden;
  visibility: hidden;
}

/* アンカー移動時に固定ヘッダーへ潜り込まないようにする */
#page-movie .eco-movie__block {
  scroll-margin-top: 80px;
}

@media (min-width: 992px) {
  #page-movie .eco-movie__block {
    scroll-margin-top: 120px;
  }
}

/* =========================================================================
 * 2. 学科絞り込み（タブ）
 * ========================================================================= */

#page-movie .eco-movie__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: -1.6rem 0 3.2rem;
}

@media (min-width: 992px) {
  #page-movie .eco-movie__filter {
    gap: 1.2rem;
    margin: -2.4rem 0 4.8rem;
  }
}

#page-movie .eco-movie__filter-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.6rem;
  padding: 0.9rem 1.8rem;
  border: 1px solid #D6DAE3;
  border-radius: 999px;
  background-color: #fff;
  color: #737B8E;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

@media (min-width: 992px) {
  #page-movie .eco-movie__filter-button {
    min-width: 12rem;
    padding: 1.1rem 2.4rem;
    font-size: 1.5rem;
  }
}

#page-movie .eco-movie__filter-button:hover {
  border-color: #004A98;
  color: #004A98;
}

#page-movie .eco-movie__filter-button.is-active,
#page-movie .eco-movie__filter-button[aria-pressed="true"] {
  border-color: #004A98;
  background-color: #004A98;
  color: #fff;
}

/* =========================================================================
 * 3. 動画データ用リスト（画面には表示しない）
 *
 * HTMLに記述した <ul class="eco-movie__source"> は、JSが動画データを
 * 読み取るためだけの要素です。hidden属性に加えて、既存CSSの影響で
 * 表示されてしまわないよう明示的に非表示にしておく。
 * ========================================================================= */

#page-movie .eco-movie__source,
#page-movie .eco-movie__source[hidden] {
  display: none !important;
}

/* =========================================================================
 * 4. 動画カード
 *
 * .wrap-grid / .item-movie / .thumb / .title / .desc は既存CSSの定義を
 * そのまま活かし、ここでは差分だけを補う。
 * ========================================================================= */

/* 既存は992px以上で2列。スマホの縦積みが間延びしないよう余白を詰め、
   768〜991pxでも2列にしてタブレットの余白を有効に使う。 */
#page-movie #container-movie .eco-movie__grid {
  grid-gap: 4rem;
  gap: 4rem;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  #page-movie #container-movie .eco-movie__grid {
    -ms-grid-columns: 1fr 3.2rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3.2rem 3.2rem;
    gap: 3.2rem;
  }
}

@media (min-width: 992px) {
  #page-movie #container-movie .eco-movie__grid {
    grid-gap: 4.8rem 4rem;
    gap: 4.8rem 4rem;
  }
}

@media (min-width: 1200px) {
  #page-movie #container-movie .eco-movie__grid {
    grid-gap: 6.4rem 4.8rem;
    gap: 6.4rem 4.8rem;
  }
}

#page-movie #container-movie .eco-movie__item .title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  line-height: 1.5;
}

/* 学科ラベル */
#page-movie .eco-movie__tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background-color: #EEF1F6;
  color: #11325B;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

@media (min-width: 992px) {
  #page-movie .eco-movie__tag {
    font-size: 1.2rem;
  }
}

#page-movie .eco-movie__tag[data-dept="management"] {
  background-color: #F6F1E4;
  color: #6E5709;
}

#page-movie #container-movie .eco-movie__item .desc {
  font-size: 1.3rem;
  line-height: 1.8;
  color: #333;
}

@media (min-width: 992px) {
  #page-movie #container-movie .eco-movie__item .desc {
    font-size: 1.4rem;
  }
}

/* =========================================================================
 * 5. 「もっと見る」／該当なし表示
 * ========================================================================= */

#page-movie .eco-movie__more-wrap {
  margin-top: 4rem;
  text-align: center;
}

@media (min-width: 992px) {
  #page-movie .eco-movie__more-wrap {
    margin-top: 5.6rem;
  }
}

/* 非表示のときは余白も出さない */
#page-movie .eco-movie__more-wrap:has(> [hidden]) {
  margin-top: 0;
}

#page-movie .eco-movie__more[hidden] {
  display: none;
}

/* .c-button のゴールド外枠を活かしつつ、二次操作らしい大きさに整える */
#page-movie .eco-movie__more {
  appearance: none;
  -webkit-appearance: none;
  min-width: 24rem;
  width: auto;
  padding: 1.3rem 3.2rem;
  font-family: inherit;
  cursor: pointer;
}

#page-movie .eco-movie__more .text {
  font-size: 1.4rem;
}

@media (min-width: 992px) {
  #page-movie .eco-movie__more .text {
    font-size: 1.6rem;
  }
}

/* 「もっと見る」で追加したカードの表示アニメーション
   グリッドを元の高さから下へ広げ、追加したカードを少し下からフェードインさせる。
   時間を変える場合は user.js の REVEAL_DURATION も合わせること。 */
#page-movie #container-movie .eco-movie__grid.is-expanding {
  overflow: hidden;
  transition: height 0.5s ease;
}

#page-movie #container-movie .eco-movie__item.is-entering {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#page-movie #container-movie .eco-movie__item.is-entering.is-entered {
  opacity: 1;
  transform: none;
}

#page-movie .eco-movie__empty {
  margin: 0;
  padding: 4rem 0;
  color: #737B8E;
  font-size: 1.4rem;
  text-align: center;
}

#page-movie .eco-movie__empty[hidden] {
  display: none;
}

/* CTAリンクは既存の .wrap-button / .c-button-text をそのまま利用し、
   グリッドとの間隔だけ調整する */
#page-movie #container-movie .eco-movie__block .wrap-button {
  margin-top: 4rem;
}

@media (min-width: 992px) {
  #page-movie #container-movie .eco-movie__block .wrap-button {
    margin-top: 5.6rem;
  }
}

/* セクション間の余白（既存の12remはやや広いため画面幅で調整） */
#page-movie #container-movie .eco-movie__block {
  margin-bottom: 8rem;
}

@media (min-width: 992px) {
  #page-movie #container-movie .eco-movie__block {
    margin-bottom: 12rem;
  }
}

/* =========================================================================
 * 7. フォーカス表示
 *
 * アウトラインは打ち消さず、既存の配色にあわせて視認性を上げる。
 * ========================================================================= */

#page-movie .eco-movie__nav-link:focus-visible,
#page-movie .eco-movie__filter-button:focus-visible,
#page-movie .eco-movie__more:focus-visible,
#page-movie #container-movie iframe:focus-visible {
  outline: 3px solid #A7850F;
  outline-offset: 2px;
}

/* :focus-visible 非対応ブラウザ向けのフォールバック */
#page-movie .eco-movie__nav-link:focus,
#page-movie .eco-movie__filter-button:focus,
#page-movie .eco-movie__more:focus {
  outline: 3px solid #A7850F;
  outline-offset: 2px;
}

#page-movie .eco-movie__nav-link:focus:not(:focus-visible),
#page-movie .eco-movie__filter-button:focus:not(:focus-visible),
#page-movie .eco-movie__more:focus:not(:focus-visible) {
  outline: none;
}

/* =========================================================================
 * 8. モーションを抑える設定への配慮
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  #page-movie .eco-movie__nav-link,
  #page-movie .eco-movie__filter-button,
  #page-movie #container-movie .eco-movie__grid.is-expanding,
  #page-movie #container-movie .eco-movie__item.is-entering {
    transition: none;
  }
}