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


*{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#0B1C2C;
  --gold:#B8965A;
  --gold-light:#D4B27A;
  /* --pale-pink:#f9f0f0; */
  --cream:#F8F5F0;
  --cream-dark:#EDE8E0;
  --text-primary:#0B1C2C;
  --text-secondary:#333;
  --text-muted:#4A5568;	
 /*  --text-secondary:#4A5568;
  --text-muted:#8A96A3;*/
  --white:#FFFFFF;
  --border:#DDD8CF;
  --sp: 1rem;
  --sp-lg: 2.5rem;
  --header-height: 64px; /* ヘッダーの高さ64px */	
}

/* アンカーリンクのとび先が固定ヘッダーのセクションのタイトルに被るのを防ぐ */
html {
  scroll-behavior: smooth;
  scroll-padding-top:1rem; /* section{padding:4remはほぼ--header-heightの中に入る高さなので、余裕を持たせ1remプラスする */
}

body{font-family:'Noto Sans JP',sans-serif;background:var(--cream);color:var(--text-primary);line-height:1.7}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* ===== HEADER ===== */
.site-header{
  background:var(--white);
  padding:0 var(--sp-lg);
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-height);position:sticky;top:0;z-index:200;
  /*height:64px;position:sticky;top:0;z-index:200;*/
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1); /* yh */
}

.header-logo{padding-top:3px;display:flex;align-items:center;gap:10px;text-decoration:none;max-width:62%}
.header-logo-text{position:relative;display:inline-grid;font-size:18px;letter-spacing:0.12em;font-family:'Cormorant Garamond',serif;color:var(--navy);font-weight:300;white-space:nowrap}
/*.header-logo-text{position:relative;display:inline-grid;font-family:'Cormorant Garamond',serif;color:var(--navy);font-weight:300}*/
.header-logo-text span{color:var(--gold);font-style:italic}
.logo-state{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity 0.45s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;align-self:center;}
.logo-state.is-active{opacity:1;visibility:visible}
.logo-state--intro{font-size:13px;letter-spacing:0.04em;font-style:normal;color:var(--text-secondary);line-height:1.2}
.logo-state--main{font-size:18px;letter-spacing:0.12em}

/*
.header-logo{padding-top:3px;display:flex;align-items:center;gap:10px;text-decoration:none}
.header-logo-text{font-family:'Cormorant Garamond',serif;color:var(--navy);font-size:18px;font-weight:300;letter-spacing:0.12em}
.header-logo-text span{color:var(--gold);font-style:italic}

.logo-mark{width:36px;height:36px;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark span{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:14px;font-weight:300}
.logo-text{color:var(--white);font-size:13px;font-weight:300;letter-spacing:0.1em;line-height:1.4}
.logo-text small{display:block;color:var(--gold-light);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;margin-top:1px}
*/

/* Desktop nav */
.header-nav{display:flex;gap:2rem;align-items:center}
.header-nav a{color:rgba(0,0,0,0.65);text-decoration:none;font-size:12px;letter-spacing:0.1em;transition:color 0.2s;font-weight:300;white-space:nowrap}
.header-nav a:hover{color:var(--gold-light)}
.header-cta{border:1px solid var(--gold);color:var(--gold)!important;padding:6px 14px;font-size:11px;letter-spacing:0.12em;font-weight:400!important;transition:all 0.2s}
.header-cta:hover{background:var(--gold)!important;color:var(--navy)!important}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{display:block;width:22px;height:1.5px;background:rgba(0,0,0,0.8);transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{display:block;width:22px;height:1.5px;background:rgba(0,0,0,0.8);transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile drawer */
.mobile-drawer{
  display:none;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;	
  /* display:none;position:fixed;top:64px;left:0;right:0;bottom:0;*/
  background:var(--navy);z-index:190;
  flex-direction:column;padding:2rem var(--sp-lg);gap:0;
  transform:translateX(100%);transition:transform 0.3s ease;
}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:15px;letter-spacing:0.1em;font-weight:300;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,0.08);transition:color 0.2s}
.mobile-drawer a:hover{color:var(--gold)}
.mobile-drawer .m-cta{color:var(--gold)!important;border-bottom:none;margin-top:1.5rem;border:1px solid var(--gold);text-align:center;padding:12px}


/* ===== SECTION ===== */
.section{padding:4rem var(--sp-lg)}
.section-alt{background:var(--white)}
/* .section-alt{background:var(--pale-pink)} */ 
.section-header{display:flex;align-items:baseline;gap:12px;margin-bottom:2.5rem;flex-wrap:wrap}
/* .section-num{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:13px;letter-spacing:0.3em;font-weight:300}*/ 
.section-title{font-family:'Noto Serif JP',serif;font-size:clamp(17px,3vw,22px);font-weight:400;letter-spacing:0.1em}
.section-divider{flex:1;min-width:20px;height:1px;background:var(--border);margin-left:8px}
.section-lead{color:var(--text-secondary);font-size:13px;font-weight:300;line-height:2;margin-bottom:2.5rem}


/* ===== INTERVIEW GRID ===== */
.interview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.interview-card{background:var(--white);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:background 0.2s;position:relative;overflow:hidden;box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.05);} /* box-shadow yh */
.interview-card::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gold);transition:width 0.3s}
.interview-card:hover::after{width:100%}
.interview-card:hover{background:var(--cream)}

.card-photo{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--cream-dark)}
.card-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform 0.4s ease}
.interview-card:hover .card-photo img{transform:scale(1.04)}
.card-photo-overlay{position:absolute;bottom:0;left:0;right:0;height:28%;background:linear-gradient(to top,rgba(11,28,44,0.88),transparent)} /* height:65%→28% yh */
.card-photo-num{position:absolute;top:10px;left:12px;font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:11px;letter-spacing:0.28em;font-weight:600;background:rgba(11,28,44,0.65);padding:3px 8px}
.card-photo-name{position:absolute;bottom:12px;left:14px;right:14px}
.card-photo-name .name{font-family:'Noto Serif JP',serif;color:var(--white);font-size:15px;font-weight:400;letter-spacing:0.04em;line-height:1.3}
.card-photo-name .name span{font-size:12px}
.card-photo-name .period{color:var(--gold-light);font-size:10px;letter-spacing:0.14em;font-weight:300;margin-top:2px}

.card-body{padding:1.1rem 1.25rem 1.4rem;flex:1;display:flex;flex-direction:column;gap:0.5rem}
.card-company{color:var(--text-muted);font-size:11px;font-weight:400;letter-spacing:0.05em;line-height:1.6}
.card-quote{color:var(--text-secondary);font-size:12px;font-weight:300;line-height:1.9;padding-top:0.7rem;border-top:1px solid var(--border);flex:1}
.card-arrow{color:var(--gold);font-size:11px;letter-spacing:0.15em;margin-top:0.7rem;font-weight:400}

/*
.backnumber-row{margin-top:1px;background:var(--cream-dark);padding:1.1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:inherit;transition:background 0.2s}
.backnumber-row:hover{background:var(--cream)}
.backnumber-label{font-size:12px;letter-spacing:0.18em;color:var(--text-secondary);font-weight:300}
.backnumber-arrow{color:var(--gold);font-size:18px}
*/

/* ===== VIDEO ===== */
.video-tabs{display:flex;margin-bottom:2rem;border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.video-tabs::-webkit-scrollbar{display:none}
.tab-btn{background:none;border:none;padding:0.75rem 1.25rem;font-size:12px;letter-spacing:0.12em;color:var(--text-muted);cursor:pointer;font-family:'Noto Sans JP',sans-serif;font-weight:300;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s;white-space:nowrap;flex-shrink:0}
.tab-btn.active{color:var(--navy);border-bottom-color:var(--gold);font-weight:400}
.tab-btn:hover{color:var(--navy)}

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.video-card{background:var(--white);padding:1.25rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:0.6rem;transition:background 0.2s}
.video-card:hover{background:var(--cream)}
.video-thumb{background:var(--navy);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.video-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.play-icon{width:38px;height:38px;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center}
.play-icon::after{content:'';border-style:solid;border-width:6px 0 6px 11px;border-color:transparent transparent transparent var(--gold);margin-left:2px}
.video-badge{position:absolute;top:8px;right:8px;background:var(--gold);color:var(--navy);font-size:9px;letter-spacing:0.08em;padding:2px 6px;font-weight:500}
.video-duration{position:absolute;bottom:6px;right:8px;color:rgba(255,255,255,0.6);font-size:10px}
.video-title{font-family:'Noto Serif JP',serif;color:var(--text-primary);font-size:12px;font-weight:400;line-height:1.7;letter-spacing:0.02em}
.video-desc{color:var(--text-muted);font-size:11px;font-weight:300;line-height:1.8}

.more-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);text-decoration:none;font-size:12px;letter-spacing:0.18em;margin-top:1.75rem;font-weight:300;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color 0.2s}
.more-link:hover{border-bottom-color:var(--gold)}
.more-link::after{content:'→';font-size:14px}

.tab-panel{display:none}
.tab-panel.active{display:block}

/* ===== FOOTER ===== */
footer{background:var(--navy);padding:3rem var(--sp-lg) 2rem;display:flex;flex-direction:column;gap:2rem}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
.footer-logo{display:flex;align-items:center;gap:12px}
.footer-logo-text{font-family:'Cormorant Garamond',serif;color:var(--gold-light);font-size:16px;font-weight:300;letter-spacing:0.1em;line-height:1.4;font-style:italic;}
.footer-logo-text a {color:var(--gold-light);text-decoration: none;}
.footer-logo-text a:hover{color:rgba(255,255,255,0.4);transition:color 0.2s}

.footer-links{display:flex;flex-direction:column;gap:0.5rem;align-items:flex-end}
.footer-links a{color:rgba(255,255,255,0.8);text-decoration:none;font-size:11px;letter-spacing:0.08em;font-weight:300;transition:color 0.2s}
.footer-links a:hover{color:var(--gold)}
/*.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:1.5rem}*/
.copyright{color:rgba(255,255,255,0.6);font-size:10px;letter-spacing:0.08em;font-weight:300}

/* ===== RESPONSIVE ===== */

/* 左上のKanagawa Univ. Junior and Senior High Schoolを400以下のときに2行に　*/
@media(min-width:436px){
  .logo-state.logo-state--intro.is-active br{display:none;}
}
@media(max-width:435px){
  .logo-state.logo-state--intro.is-active br{display:inline;}
}

/* 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}
  .interview-grid{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .footer-links{align-items:flex-start}
}

/* Mobile (≤600px): single column, compact hero */
@media(max-width:600px){
  :root{--sp-lg:1.25rem}
  .site-header{padding:0 1.25rem;height:58px}
  .logo-text small{display:none}

  .hero{padding:3.5rem 1.25rem 3rem}
  .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}
  .card-photo-name .name span{font-size:12px}
	
  .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){
  .card-photo-num{font-size:10px;padding:2px 6px}
}

/* end of file */