@charset "utf-8";
/* CSS Document */


/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;background:var(--navy);min-height:600px;display:flex;align-items:stretch}
/* 動画：ヒーロー全域に広げ、テキスト右側からすべて動画 */
.hero-right{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;background:#000;z-index:0}
/* iframeを上下左右150pxはみ出してYouTube UI（タイトル・コントロール等）をclipで隠す */
.hero-video-wrap{position:absolute;top:-150px;left:-150px;right:-150px;bottom:-150px}
.hero-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;pointer-events:none}
/* スマホ代替画像 */
.hero-sp-image{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

/* 動画終了後の静止画スライドショー */
.hero-end-slideshow {
  display: none;
  position: absolute;
  inset: 0;
  /* 初期状態は動画(iframe)より下のレイヤーにしておき、JSで z-index: 10 に引き上げる */
  z-index: 1; 
  opacity: 0;
  background: #0B1C2C; /* スライド切り替え時の隙間から動画が見えないよう背景をネイビーで固定 */
  /* コンテナ全体がふわっと立ち上がる */
  transition: opacity 1.4s ease;
}
.hero-end-slideshow.visible{display:block}
.hero-end-slideshow.fade-in{opacity:1}

.hero-end-slideshow .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  /* じわっと切り替わるように transition を設定。
     重なり順のブレを防ぐため visibility も併用するとより安定します */
  transition: opacity 1.6s ease, visibility 1.6s;
  visibility: hidden;
}
/* アクティブなスライドだけを表に出す */
.hero-end-slideshow .slide.active {
  opacity: 1;
  z-index: 3;
  visibility: visible;
}

/*  スライドショーに重ねるネイビーの半透明オーバーレイ  */
.hero-end-slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4; /* スライド(.activeのz-index:3)よりも常に上に配置 */
  background: rgba(11,28,44,0.5); /* var(--navy) #0B1C2C を50%透過 */
  pointer-events: none;
}

/*  600以下のときの静止画スライドショー (CSSだけで完結） */
.slideBox {
  height: 200px;
  overflow: hidden;
  position: relative;
  background: #0B1C2C;
  /* コンテナ全体がふわっと立ち上がる */
  transition: opacity 1.4s ease;
}

.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 48s 0s infinite;
  animation: anime 48s 0s infinite;
}

.item1:nth-of-type(2) {-webkit-animation-delay: 8s;  animation-delay: 8s;}
.item1:nth-of-type(3) {-webkit-animation-delay: 16s;  animation-delay: 16s;}
.item1:nth-of-type(4) {-webkit-animation-delay: 24s;  animation-delay: 24s;}
.item1:nth-of-type(5) {-webkit-animation-delay: 32s;  animation-delay: 32s;}
.item1:nth-of-type(6) {-webkit-animation-delay: 40s;  animation-delay: 40s;}

/* ふわっとアニメーション */
@keyframes anime {
  0% {opacity: 0;}
  8% {opacity: 1;}
  17% {opacity: 1;}
  25% {opacity: 0;z-index: 9;}
  100% {opacity: 0;}
}
@-webkit-keyframes anime {
  0% {opacity: 0;}
  8% {opacity: 1;}
  17% {opacity: 1;}
  25% {opacity: 0;z-index: 9;}
  100% {opacity: 0;}
}

/* テキストエリア */
/* テキストエリア：コンテンツが収まるギリギリ幅  620px */
/* テキストエリアの位置を左上（justify-content:flex-start;padding-top:1rem）に */
.hero-left{position:relative;z-index:2;flex:0 0 620px;max-width:620px;padding:5rem 3.5rem 4rem 2.5rem;display:flex;flex-direction:column;justify-content:flex-start;padding-top:1rem}
/* 「神大附属Discovery」タイピング1行に */
.hero-title-wrap{ display:flex; align-items:center;  gap:0.5rem}

.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn-primary{background:var(--gold);color:var(--navy);padding:12px 24px;text-decoration:none;font-size:12px;letter-spacing:0.18em;font-weight:500;transition:all 0.2s;display:inline-block}
.btn-primary:hover{background:var(--gold-light)}
.btn-ghost{border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.7);padding:12px 24px;text-decoration:none;font-size:12px;letter-spacing:0.18em;font-weight:300;transition:all 0.2s;display:inline-block}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
        
        
        
/* ===== RESPONSIVE ===== */

/* Tablet (≤900px): 2-column interview grid */
@media(max-width:900px){
  :root{--sp-lg:1.75rem}
  .header-nav .desktop-link{display:none}
  .hamburger{display:flex}
  .mobile-drawer{display:flex}
  .hero{min-height:480px}
  .hero-left{flex:0 0 620px;max-width:620px;padding:1rem 2.5rem}
  .interview-grid{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .footer-links{align-items:flex-start}
}

/* Mobile (≤600px): 縦積み・動画非表示・代替画像表示 */
@media(max-width:600px){
  :root{--sp-lg:1.25rem}
  .site-header{padding:0 1.25rem;height:58px}
  .logo-text small{display:none}

  .hero{flex-direction:column;min-height:auto}
  /* テキストを全幅・背景を紺ベタに戻す */
  .hero-left{flex:none;max-width:100%;width:100%;padding:0 2.5rem 3rem;background:var(--navy)}
  /* 動画エリアを独立した高さのブロックとして配置 */
  .hero-right{position:relative;width:100%;height:220px}
  /* 動画を隠して代替画像を表示 */
  .hero-video-wrap{display:none}
  .hero-sp-image{display:block}
  .hero-eyebrow span{font-size:10px;letter-spacing:0.2em}
  .hero-subtitle{font-size:12px;letter-spacing:0.08em}
  .hero-actions{flex-direction:column}
  .btn-primary,.btn-ghost{text-align:center;width:100%}

  .section{padding:3rem 1.25rem}
  .section-divider{display:none}
  .section-lead{font-size:12px}

  .interview-grid{grid-template-columns:1fr}
  .card-photo{aspect-ratio:16/9}
  .card-photo-name .name{font-size:14px}

  .video-grid{grid-template-columns:1fr}
  .video-tabs{margin-bottom:1.5rem}

  .footer-top{flex-direction:column;gap:1.5rem}
  .footer-links{align-items:flex-start}
  .backnumber-label{font-size:11px}

  .mobile-drawer{top:58px;padding:1.75rem 1.25rem}
}

/* Very small (≤380px) */
@media(max-width:380px){
  .hero-title{font-size:28px}
  .hero-title-wrap{ display:flex; align-items:center;  gap:0.5rem}  .card-photo-num{font-size:10px;padding:2px 6px}
}

/* end of file */