/* ================== GLOBAL ================== */
.wrap {
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #fff;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#top {
  background: linear-gradient(150deg, rgba(183, 224, 245, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(183, 224, 245, 1) 100%);
}

/* ================== VIDEO PICKUP (PC/共通) ================== */

img.cat-logo {
    width: 100%;
}

#video-pickup {
  background-color: #9ED6F2;
}

.content-full {
  width: calc(100% - min(7.5vw, 60px));
  display: inline-block;
  overflow: hidden;
}

.video-pickup-wrap {
  display: flex !important;
  padding: 50px 60px;
}

.video-pickup-left {
  width: 36%;
  text-align: left;
  padding-right: 20px;
  position: relative;
}

.video-pickup-right {
  width: 64%;
}

img.pickup-img {
  width: 100%;
  border-radius: 10px;
}

.video-pickup-right {
  position: relative;
}

.video-pickup-right iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 10px;
}

.text-wrap {
  text-align: left;
}

.video-title {
  font-weight: 600;
  text-align: left;
  color: #1d1d1d;
  line-height: 1.4;
  font-feature-settings: "palt";
}

#video-pickup .video-title {
  font-size: 35px;
  margin-top: 44px;
}

.info-wrap {
  text-align: left;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
}

.date {
  font-size: 14px;
  margin-right: 8px;
  color: #1d1d1d;
}

#video-pickup .date {
  color: #1d1d1d;
}

.category{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.cat-parent, .cat-child{
  font-size: 12px;
  background-color: #1D4294;
  padding: 1px 6px;
  color: #fff;
  border-radius: 2px;
}

#video-pickup p {
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  margin: 35px 0 0 0;
  color: #1d1d1d;
  display: -webkit-box;
  /* 必須 */
  -webkit-box-orient: vertical;
  /* 必須 */
  -webkit-line-clamp: 4;
  /* 行数制限 */
  overflow: hidden;
  text-overflow: ellipsis;
}

a.btn01 {
  display: inline-block;
  color: #fff;
  background-color: #1d1d1d;
  width: 200px;
  border-radius: 25px;
  height: 50px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

/* PCピックアップ—アクティブ以外は非表示 */
#sp-pickup {
  display: none;
}

#pc-pickup>li {
  display: none !important;
}

#pc-pickup>li.is-active {
  display: flex !important;
}

/* ドット */
.pickup-dots {
  display: flex;
  justify-content: left;
  gap: 10px;
  margin-top: 50px;
}

.pickup-dots button {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  border: 0;
  background: #333;
  cursor: pointer;
}

.pickup-dots button[aria-selected="true"] {
  background: #fff;
}

/* Vimeo 比率（必要なら） */
.video-pickup-right iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* ================== RESPONSIVE (≤1000px) ================== */
@media screen and (max-width: 1000px) {
  .video-pickup-wrap {
    flex-direction: column-reverse;
    padding: 40px 40px;
  }

  .video-pickup-right {
    width: 100%;
  }

  .video-pickup-left {
    width: 100%;
    padding-right: 0;
    margin-top: 30px;
  }
}

/* ================== SP PICKUP (≤600px) 完全版 ================== */
@media screen and (max-width: 600px) {
.content-full {
    overflow: initial;
}
  /* ヒーロー高さ（ヘッダー分はJSで --spHeroH を計算して上書き） */
  #video-pickup {
    height: calc(100vh - 60px);
  }

  #pc-pickup {
    display: none;
  }

  #sp-pickup {
    display: block;
  }

  .sp-logo-wrap {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 青帯対策 */
  #video-pickup .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }

  /* 既定値（JSが --spHeroH を上書き） */
  :root {
    --spHeroH: calc(100svh - 110px);
  }

  /* スライダーと中身の高さを固定 */
  #sp-pickup.sp-pickup-slide,
  #sp-pickup .slick-list,
  #sp-pickup .slick-track,
  #sp-pickup .sp-video-pickup-wrap,
  #sp-pickup .sp-video-pickup {
    height: var(--spHeroH) !important;
    width: 100%;
  }

  /* ラッパー */
  #sp-pickup .sp-video-pickup {
    position: relative;
    overflow: hidden;
  }

  /* ★動画/画像は“高さ基準の cover”（横はみ出しOK） */
  #sp-pickup .sp-video-pickup iframe,
  #sp-pickup .sp-video-pickup .sp-pickup-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: calc(var(--spHeroH) * 16 / 9) !important;
    /* 16:9想定 */
    display: block;
    border: 0;
    max-width: none !important;
    max-height: none !important;
    pointer-events: none;
    /* 画面タップは親で拾う（勝手に再生しない） */
    z-index: 0;
  }

  /* テーマの iframe{width:100%} を無効化（過小化/2倍化の元凶） */
  #sp-pickup iframe {
    width: auto !important;
  }

  /* slick 初期化前は1枚だけ表示（チラ見え防止） */
  #sp-pickup:not(.slick-initialized)>li {
    display: none;
  }

  #sp-pickup:not(.slick-initialized)>li:first-child {
    display: block;
  }

  /* 暗幕＆テキスト：初期は非表示 */
  #sp-pickup .sp-video-pickup .dark-bg,
  #sp-pickup .sp-video-pickup .sp-text-wrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .dark-bg {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 1;
  }

  .sp-text-wrap {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 100px;
    color: #fff;
    z-index: 2;
  }

  /* 表示トグル（JSで .show-info を付与） */
  #sp-pickup .sp-video-pickup.show-info .dark-bg,
  #sp-pickup .sp-video-pickup.active .dark-bg {
    /* 互換: .active でも可 */
    opacity: .5;
    pointer-events: none;
  }

  #sp-pickup .sp-video-pickup.show-info .sp-text-wrap,
  #sp-pickup .sp-video-pickup.active .sp-text-wrap {
    /* 互換: .active でも可 */
    opacity: 1;
    pointer-events: auto;
  }

  /* テキスト色など */
  #sp-pickup .video-title {
    font-size: 18px;
    color: #fff;
  }

  #sp-pickup .date {
    color: #fff;
  }

  #sp-pickup p {
    font-size: 15px;
    color: #fff;
  }

  /* 再生ボタン（常に最前面） */
  img.pb-btn,
  #sp-pickup .pb-btn {
    position: absolute;
    right: 5%;
    bottom: 30px;
    width: 40px;
    height: 40px;
    border: 0;
    padding: 0;
    background: url('/wp-content/themes/onevilection/images/playback.svg') center/contain no-repeat;
    z-index: 13;
    pointer-events: auto;
  }

  /* 戻るボタン（暗転時に見せる想定なら .show-info 時に表示切替をJS側で） */
  .return-btn {
    position: absolute;
    top: 30px;
    left: 5%;
    color: #fff;
    z-index: 14;
  }

.info-wrap {
    margin-top: 0;
}
.date {
    margin-top: 4px;
  text-align: left;
}
.cat-parent, .cat-child {
    margin: 4px 6px 0 0;
}
.category{
  margin-top: 3px;
}
}

/* ================== VIDEO NEW ================== */
#video {
  padding: 50px 0 0 0;
}

.cat-heading {
  text-align: left;
  font-size: 26px;
  font-weight: 600;
  margin-left: 10px;
  color: #1d1d1d;
  display: block;
}

.cat-heading span {
  font-size: 24px;
  line-height: 1;
  margin-left: 6px;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-next {
  z-index: 14;
  top: calc(50% - 46px) !important;
  right: 2px !important;
  width: 28px !important;
  height: 28px !important;
  overflow: visible !important;
}

.slick-prev {
  z-index: 14;
  top: calc(50% - 46px) !important;
  left: 2px !important;
  width: 28px !important;
  height: 28px !important;
  overflow: visible !important;
}

#video .slick-next,
#video .slick-prev {
  top: calc(50% - 46px) !important;
}

.slick-prev:before {
  content: '';
  background-image: url(/wp-content/themes/onevilection/images/prev-g.svg) !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-block !important;
  opacity: 1 !important;
  background-size: contain;
  vertical-align: middle;
  font-size: 0 !important;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .3));
}

.slick-next:before {
  content: '';
  background-image: url(/wp-content/themes/onevilection/images/next-g.svg) !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-block !important;
  opacity: 1 !important;
  background-size: contain;
  vertical-align: middle;
  font-size: 0 !important;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .3));
}

.slick-list {
  overflow: visible !important;
}

.card-wrapper {
  position: relative;
  padding: 0 2px;
  margin: 0 12px;
}

.card-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.slick-slide {
  height: auto !important;
}

.video-title {
  font-size: 17px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-row {
  margin-top: 8px !important;
}

.column-row {
  margin-top: 8px !important;
  margin-bottom: min(5.714vw, 80px) !important;
}

#sp-cat-slide {
  display: none;
}

/* ================== VIDEO NEW SP (≤600px) ================== */
@media (max-width: 600px) {
  #pc-cat-slide {
    display: none;
  }

  #sp-cat-slide {
    display: block;
  }


  .video-title {
    font-size: 15px;
    -webkit-line-clamp: 3;
  }

  .cat-heading {
    font-size: 20px;
    margin-left: 20px;
  }
  .card-wrapper {
    margin: 0 6px;
  }
  .sp-card-wrapper {
    margin: 0 6px 0 6px;
  }

  img.sp-cat-img {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 6px;
    object-fit: cover;
    object-position: center;
  }

  /* 新着動画セクション（#sp-new-slide, #sp-new-slide-cat）は縦長（9:16） */
  #sp-new-slide .sp-video-wrap,
  #sp-new-slide-cat .sp-video-wrap {
    aspect-ratio: 9 / 16;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
  }

  /* カテゴリ一覧の新着動画セクションの見出しとの間隔調整 */
  #category #video.video-top {
    margin-top: 40px;
  }

  #category #video.video-top .cat-heading {
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
  }

  #sp-new-slide .sp-video-wrap video.sp-poster-video,
  #sp-new-slide-cat .sp-video-wrap video.sp-poster-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* 関連動画セクション（#sp-cat-slide）は横長（16:9）のまま */
  #sp-cat-slide .sp-video-wrap {
    aspect-ratio: 16 / 9;
  }

  /* 検索結果（SP）リスト表示 */
  #search .sp-video-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: none;
  }

  @media (max-width: 600px) {
    #search .sp-video-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    #search .sp-video-list > li {
      flex: 1 1 calc(50% - 8px);
      max-width: calc(50% - 8px);
      box-sizing: border-box;
    }

    #search .sp-video-list .sp-video-wrap {
      aspect-ratio: 16 / 9;
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
    }

    #search .sp-video-list .video-title {
      margin-top: 10px;
    }
  }

  @media (max-width: 480px) {
    #search .sp-video-list > li {
      flex-basis: 100%;
      max-width: 100%;
    }
  }

  /* 動画ファイルを静止状態で表示（PC側と同じ方式） */
  /* 左右のスライドは静止状態、中央のスライドのみ再生（JavaScript側で制御） */
  .sp-video-row .slick-slide video.sp-poster-video {
    display: block;
    z-index: 1;
  }

  /* フォールバック画像は動画読み込み失敗時のみ表示 */
  .sp-video-row .slick-slide .sp-poster-img {
    display: none;
    z-index: 0;
  }

  /* 関連動画スライダー（横長16:9）の設定 */
  #video .slick-current{
    padding-top: 45px!important;
  }

  #sp-new-slide-cat .slick-center {
    padding-top: 45px !important; /* 関連動画スライダーと同じ設定 */
  }

  /* スライダーの左右コンテンツのリスト要素部分にopacityを適用（関連動画等と合わせる） */
  .sp-video-row .slick-slide:not(.slick-center),
  #sp-new-slide-cat .slick-slide:not(.slick-center) {
    opacity: .6;
  }

  /* 新着動画スライダー：見出しとの被りを防ぐため、コンテナに十分なパディングトップを追加 */
  /* 関連動画スライダーと同じ高さに合わせるため、margin-top(-28px) + padding-top(45px) + 見出しの高さ + 余白分 */
  #category #video.video-top #sp-new-slide-cat {
    margin-top: 0;
    padding-top: 120px !important; /* 見出しの高さ + スライダーの margin-top(-28px) + padding-top(45px) + 余白 */
    position: relative;
  }

  /* 新着動画スライダーの左右スライドも中央と同じ高さに調整 */
  #sp-new-slide-cat .slick-slide .sp-video-wrap {
    height: 100%;
  }
}

/* ================== COLUMN ================== */
#column {
  padding-top: 50px;
}

.column-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  margin-top: 10px;
  row-gap: 20px !important;
}

.column-item {
  width: 15%;
}

img.column-img {
  width: 100%;
  aspect-ratio: 11 / 6;
  object-fit: cover;
  object-position: center;
  border-radius: 8px 8px 0 0;
}

.column-text-wrap {
  padding: 4px 15px 15px 15px;
  box-sizing: border-box;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background-color: #fff;
}

#column .column-title {
  font-size: 17px;
  line-height: 1.4;
  font-feature-settings: "palt";
  font-weight: 600;
  margin-top: 8px;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

#column p {
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  color: #1d1d1d;
  margin-top: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

#column .slick-next,
#column .slick-prev {
  top: calc(50% - 90px) !important;
}
.sp-column-row {
    display: none!important;
  }
/* COLUMN SP */
@media (max-width: 600px) {
.single-column{
    padding-bottom: 80px;
  }
  #column .slick-next,
  #column .slick-prev {
    display: none !important;
  }

  .content-full {
    width: 100%;
  }
.sp-column-row {
    display: block !important;
  }
.column-row {
    display: none!important;
  }
.sp-video-wrap{
  position: relative;
}

.sp-video-wrap img.pb-btn {
        bottom: 10px;
        width: 30px;
        height: 30px;
 }
#column img.column-img {
  aspect-ratio: 9 / 16;
}
  #column .column-title {
    font-size: 15px;
    -webkit-line-clamp: 3;
  }


img.column-img {
    border-radius: 6px;
  }


  #column p {
    display: none;
  }

.column-text-wrap {
    padding: 0;
    background-color: initial;
  }
#column .slick-current{
    padding-top: 45px!important;
  }
#column .slick-initialized .slick-slide{
    margin-top: -28px!important;
  }
}


/* ================== FOOTER ================== */
footer {
  background-color: #21244A;
}

.footer-wrap {
  padding: 20px;
  margin: 0 20px;
  display: flex;
}

.copyright {
  width: 300px;
  font-size: 12px;
  color: #fff;
}

.footer-nav {
  text-align: right;
  width: calc(100% - 300px);
}

.f-menu {
  font-size: 13px;
  margin-left: 30px;
  color: #fff;
}

@media (max-width: 600px) {
  .footer-wrap {
    flex-direction: column-reverse;
    margin: 0;
  }

  .footer-nav {
    text-align: center;
    width: 100%;
  }

  .f-menu {
    font-size: 12px;
    margin: 0 8px;
  }

  .copyright {
    text-align: center;
    width: 100%;
    margin-top: 20px;
  }
}
/* ===== SPメイン動画をフルブリード＋カバー表示に ===== */
@media (max-width: 600px){
  /* コンテナの左右パディングを突破して画面端まで広げる */
  #sp-pickup,
  .sp-pickup-slide{
    width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* 各スライド（1枚） */
  #sp-pickup .sp-video-pickup,
  .sp-pickup-slide .sp-video-pickup{
    position: relative;
    overflow: hidden;      /* 中央トリミング */
    width: 100vw;          /* 幅を明示（計算安定） */
  }

  /* 埋め込みプレーヤーを中央に固定（JSでサイズは上書き） */
  #sp-pickup .sp-video-pickup iframe,
  .sp-pickup-slide .sp-video-pickup iframe{
    min-width: 100%;      /* JSが走る前の保険 */
    min-height: 100%;
  }
}




/* ================== 1oop-videoホバー ================== */
 /* --- 最小限の見た目調整（レイアウトは維持） --- */
    .video-card .thumb-wrap{position:relative;overflow:hidden}
    .video-card .video-img,
    .video-card .thumb-fallback{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#eee}
    .video-card .hover-preview{
      position:absolute;inset:0;width:100%;height:100%;
      object-fit:cover;border:0;opacity:0;pointer-events:none;transition:opacity .18s ease;
    }
    .video-card .thumb-wrap.is-playing .hover-preview{opacity:1}

/* ホバー動画にも角丸を適用 */
.video-card .hover-preview {
  border-radius: 6px;
  overflow: hidden; /* Safariなどで角丸の内側はみ出し防止 */
}

/* ================== シングルページ音声 ================== */
/* （任意）音ON案内の最小スタイル */
.sound-tip{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: rgba(0,0,0,.66); color:#fff; padding:8px 12px; border-radius:8px;
  font-size: 13px; opacity:0; pointer-events:none; transition: opacity .25s;
}
.sound-tip.is-show{ opacity:1; }

.sound-tip { display: none !important; }




/* === SPカテゴリ：Vimeoをスライド幅いっぱいに === */
@media (max-width:600px){

  /* スライドの枠（16:9・あふれた分はトリム） */
  #sp-cat-slide.sp-video-row li.sp-card-wrapper .sp-video-wrap{
    position: relative;
	  width: 100%;
  height: 91.787vw;
  border-radius: 6px;
    max-width: none !important;
    overflow: hidden;
    aspect-ratio: 16 / 9;          /* 対応ブラウザはこれで高さが決まる */
  }

  /* aspect-ratio未対応ブラウザ向けフォールバック */
  @supports not (aspect-ratio: 1 / 1){
    #sp-cat-slide.sp-video-row li.sp-card-wrapper .sp-video-wrap::before{
      content:"";
      display:block;
      padding-top:56.25%;          /* 16:9 */
    }
  }
  /* aspect-ratio対応時はフォールバック無効化 */
  @supports (aspect-ratio: 1 / 1){
    #sp-cat-slide.sp-video-row li.sp-card-wrapper .sp-video-wrap::before{ content:none !important; }
  }

  /* Vimeo iframe を枠いっぱいに（内部の動画は background=1 でcover表示） */
  #sp-cat-slide.sp-video-row li.sp-card-wrapper .sp-video-wrap iframe.vimeo-bg{
    position: absolute !important;
    inset: 0 !important;
    width: 200% !important;
    height: 91.787vw !important;
    border: 0 !important;
    display: block !important;

  }

  /* slickの覗かせ表示は現状維持（必要なら調整） */
  #sp-cat-slide.sp-video-row .slick-list{ overflow: visible; }

  /* 中央だけ少し大きく見せる演出（任意） */
  #sp-cat-slide.sp-video-row .slick-slide{
    opacity: .6;
    transform: scale(.86);
    transition: transform .35s ease, opacity .35s ease;
    will-change: transform;
    overflow: hidden;
  }
  #sp-cat-slide.sp-video-row .slick-center{
    opacity: 1;
    transform: scale(1.06);
  }

  /* 旧サムネ画像の指定が残っていても影響しないように念のため */
  #sp-cat-slide.sp-video-row .sp-cat-img{ width:100% !important; height:auto !important; display:block; }
}



/* === SP：コラムのslick 中央だけ拡大（他は縮小） === */
@media (max-width:600px){
  .sp-column-row .slick-list{ overflow: visible; }

  /* 基本状態：少し小さく＆薄く */
  .sp-column-row .slick-slide{
    opacity: .6 !important;
    transform: scale(.86) !important;
    transition: transform .35s ease, opacity .35s ease !important;
    will-change: transform;
  }

  /* 中央のスライドだけ拡大＆不透明 */
  .sp-column-row .slick-slide.slick-center,
  .sp-column-row .slick-slide.slick-current.slick-center{
    opacity: 1 !important;
    transform: scale(1.06) !important;
    z-index: 2;
  }

  /* 画像サイズの保険（はみ出し・縮小の打ち消し） */
  .sp-column-row img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}
.pickup-dots-slot{
		display: none!important;
}
.video-pickup-right video{
	border-radius: 10px;
}
.thumb-wrap video{
	border-radius: 6px;
}
@media (max-width:600px){
#video-pickup .slick-dots {
    z-index: -1!important;
}
	}

/* ================== SKELETON LOADING ANIMATION ================== */
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.sp-video-skeleton,
.sp-pickup-skeleton,
.pc-video-skeleton {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  pointer-events: none;
}

.sp-video-skeleton.hidden,
.sp-pickup-skeleton.hidden,
.pc-video-skeleton.hidden {
  display: none;
}

.pc-video-skeleton.pc-video-skeleton--error {
  animation: none;
  background: linear-gradient(90deg, #3a1a1a 0%, #4a1a1a 100%);
}

.pc-video-skeleton.pc-video-skeleton--error::after {
  content: '動画を読み込めませんでした';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 12px;
}

/* ================== 404 ERROR PAGE ================== */
.error-page {
  padding: 80px 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
}

.error-title {
  font-size: 120px;
  font-weight: bold;
  line-height: 1;
  margin: 0 0 20px;
  color: #333;
}

.error-message {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px;
  color: #333;
}

.error-description {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 40px;
  color: #666;
}

.error-actions {
  margin-top: 40px;
}

.error-btn {
  display: inline-block;
  padding: 14px 40px;
  background-color: #21244A;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.error-btn:hover {
  background-color: #2d3158;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .error-page {
    padding: 60px 0;
    min-height: 50vh;
  }

  .error-title {
    font-size: 80px;
    margin-bottom: 16px;
  }

  .error-message {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .error-description {
    font-size: 14px;
    margin-bottom: 32px;
  }

  .error-btn {
    padding: 12px 32px;
    font-size: 14px;
  }
}

/* ================== PC版 ページローディングアニメーション ================== */
/* PC版のみ表示（画面幅600px以上） */
@media (min-width: 601px) {
  .pc-page-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none; /* 初期状態は非表示（JavaScriptで制御） */
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .pc-page-loader[style*="display: flex"] {
    display: flex !important;
  }

  .pc-page-loader__overlay {
    position: absolute;
    inset: 0;
    background-color: #ffffff; /* 完全に白（透過なし） */
  }

  .pc-page-loader__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    opacity: 0;
    animation: pc-page-loader-fadein 0.5s ease-out forwards;
  }

  .pc-page-loader__logo {
    width: 230px;
    height: auto;
  }

  .pc-page-loader__logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  .pc-page-loader__text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 24px;
    font-weight: 500;
    color: #21244A;
    line-height: 1.6;
    min-height: 40px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
  }

  .pc-page-loader__char {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }

  .pc-page-loader__char.pc-page-loader__char--visible {
    opacity: 1;
    transform: translateY(0);
  }

  .pc-page-loader__char.pc-page-loader__char--space {
    width: 0.3em;
  }

  @keyframes pc-page-loader-fadein {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 非表示時のフェードアウトアニメーション */
  .pc-page-loader.hiding {
    animation: pc-page-loader-fadeout 0.4s ease-out forwards;
  }

  .pc-page-loader.hiding .pc-page-loader__overlay {
    animation: pc-page-loader-overlay-fadeout 0.4s ease-out forwards;
  }

  .pc-page-loader.hiding .pc-page-loader__content {
    animation: pc-page-loader-content-fadeout 0.4s ease-out forwards;
  }

  @keyframes pc-page-loader-fadeout {
    to {
      opacity: 0;
    }
  }

  @keyframes pc-page-loader-overlay-fadeout {
    to {
      opacity: 0;
    }
  }

  @keyframes pc-page-loader-content-fadeout {
    to {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

/* SP版では非表示 */
@media (max-width: 600px) {
  .pc-page-loader {
    display: none !important;
  }
}