/* ============================================================
   山形大学医学部 麻酔科学講座 — 共通デザインシステム
   ============================================================ */
:root{
  --night:#0c151d;--night-2:#111e28;--ivory:#f4f2ec;--ivory-dim:#eae7de;
  --mist:#93a7ab;--jade:#3d7068;--champagne:#b99e6b;
  --champagne-soft:rgba(185,158,107,.35);--pulse:#9bd8c8;
  --hairline:rgba(12,21,29,.12);--hairline-inv:rgba(244,242,236,.14);
  --line:#06c755; /* LINE brand */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Zen Kaku Gothic New',sans-serif;background:var(--ivory);color:var(--night);
  line-height:2.05;font-weight:400;letter-spacing:.04em;
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.serif{font-family:'Shippori Mincho',serif}
.latin{font-family:'Cormorant Garamond',serif}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ───── header ───── */
header{position:fixed;inset:0 0 auto;z-index:60;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(244,242,236,.92);backdrop-filter:blur(14px);border-color:var(--hairline)}
header.on-dark:not(.scrolled){color:var(--ivory)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:16px}
.brand{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.brand .jp{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1rem;letter-spacing:.14em;white-space:nowrap}
.brand .en{font-family:'Cormorant Garamond',serif;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--champagne)}
.nav-links{display:flex;gap:38px;font-size:.78rem;font-weight:500;letter-spacing:.16em}
.nav-links a{position:relative;padding:6px 0;opacity:.85;transition:opacity .25s}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--champagne);transition:width .3s,left .3s}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{width:100%;left:0}
.nav-links a.current{opacity:1}
.nav-links a.current::after{width:100%;left:0}
.nav-cta{font-size:.74rem;font-weight:500;letter-spacing:.2em;border:1px solid var(--champagne);color:inherit;padding:11px 26px;transition:background .3s,color .3s;white-space:nowrap}
.nav-cta:hover{background:var(--champagne);color:var(--night)}

/* mobile hamburger */
.menu-btn{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative;z-index:70}
.menu-btn span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .35s,opacity .35s;color:inherit}
.menu-btn span:nth-child(1){top:16px}.menu-btn span:nth-child(2){top:22px}.menu-btn span:nth-child(3){top:28px}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.m-menu{
  position:fixed;inset:0;z-index:65;background:var(--night);color:var(--ivory);
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(28px,8vw,60px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
body.menu-open .m-menu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
body.menu-open header{z-index:70;color:var(--ivory);background:transparent!important;backdrop-filter:none!important;border-color:transparent!important}
.m-menu a{
  font-family:'Shippori Mincho',serif;font-size:1.3rem;letter-spacing:.18em;
  padding:18px 0;border-bottom:1px solid var(--hairline-inv);
  display:flex;justify-content:space-between;align-items:center;
}
.m-menu a small{font-family:'Cormorant Garamond',serif;font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne)}
.m-menu .m-sns{display:flex;gap:26px;margin-top:36px;border:0;padding:0}
.m-menu .m-sns a{border:0;font-family:'Cormorant Garamond',serif;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mist);padding:0}
@media(max-width:940px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:block}
  .brand .jp{font-size:.88rem}
  .brand .en{display:none}
}

/* ───── sub hero（下層ページ共通）───── */
.subhero{
  background:
    radial-gradient(900px 460px at 15% -20%,rgba(185,158,107,.16),transparent 60%),
    radial-gradient(800px 400px at 95% 110%,rgba(61,112,104,.3),transparent 55%),
    linear-gradient(160deg,var(--night),var(--night-2));
  color:var(--ivory);
  padding:clamp(150px,20vh,220px) 0 clamp(60px,9vw,100px);
  position:relative;overflow:hidden;
}
.subhero .en{font-family:'Cormorant Garamond',serif;font-size:.8rem;letter-spacing:.5em;text-transform:uppercase;color:var(--champagne);display:block;margin-bottom:20px}
.subhero h1{font-family:'Shippori Mincho',serif;font-weight:500;font-size:clamp(1.8rem,4vw,2.9rem);letter-spacing:.14em;line-height:1.9}
.subhero h1 em{font-style:normal;color:var(--pulse)}
.subhero .lead{margin-top:26px;max-width:36em;font-size:.9rem;font-weight:300;color:#b8c6c4;letter-spacing:.07em}
.crumb{margin-top:30px;font-family:'Cormorant Garamond',serif;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mist)}
.crumb a:hover{color:var(--pulse)}
.subhero .bgchar{
  position:absolute;right:-3%;bottom:-30%;
  font-family:'Shippori Mincho',serif;font-size:clamp(10rem,24vw,20rem);font-weight:700;
  color:rgba(155,216,200,.04);line-height:1;pointer-events:none;user-select:none;
}

/* ───── section 共通 ───── */
section{padding:clamp(80px,10vw,140px) 0}
.sec-head{margin-bottom:clamp(44px,6vw,80px)}
.sec-head .en,.en-label{font-family:'Cormorant Garamond',serif;font-size:.78rem;letter-spacing:.5em;text-transform:uppercase;color:var(--champagne);display:block;margin-bottom:16px}
.sec-head h2{font-family:'Shippori Mincho',serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:500;letter-spacing:.12em}
.sec-head .note{margin-top:14px;font-size:.84rem;font-weight:300;color:#6a7580;letter-spacing:.05em}
.dark{background:var(--night);color:var(--ivory)}
.dark .sec-head .note{color:#9fb0b3}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 34px;font-size:.78rem;font-weight:500;letter-spacing:.22em;transition:all .3s;cursor:pointer}
.btn-gold{border:1px solid var(--champagne);color:inherit}
.btn-gold:hover{background:var(--champagne);color:var(--night)}
.btn-quiet{color:var(--mist)}
.btn-quiet::after{content:"→";transition:transform .3s}
.btn-quiet:hover{color:var(--pulse)}
.btn-quiet:hover::after{transform:translateX(6px)}
.btn-line{background:var(--line);border:1px solid var(--line);color:#fff;font-weight:700;letter-spacing:.12em}
.btn-line:hover{background:#05b34c;border-color:#05b34c}
.btn-form{background:var(--champagne);border:1px solid var(--champagne);color:var(--night);font-weight:700;letter-spacing:.12em}
.btn-form:hover{background:transparent;color:var(--champagne)}

/* ───── 見学30秒 CTA（共通コンポーネント）───── */
.visit-cta{
  background:
    radial-gradient(800px 400px at 20% 0%,rgba(185,158,107,.14),transparent 55%),
    var(--night-2);
  color:var(--ivory);
}
.visit-cta h2{font-family:'Shippori Mincho',serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:500;line-height:2;letter-spacing:.1em;margin-bottom:20px}
.visit-cta h2 em{font-style:normal;color:var(--pulse)}
.visit-cta .sub{font-size:.88rem;font-weight:300;color:#a9bab8;letter-spacing:.06em;max-width:38em;margin-bottom:40px}
.visit-btns{display:flex;gap:16px;flex-wrap:wrap}
.visit-btns .btn{min-width:240px}
.visit-note{margin-top:22px;font-size:.74rem;font-weight:300;color:var(--mist);letter-spacing:.08em}

/* ───── SNS カード ───── */
.sns-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline-inv);border:1px solid var(--hairline-inv)}
.sns-card{background:var(--night);padding:clamp(28px,3.5vw,44px) clamp(20px,2.5vw,32px);display:flex;flex-direction:column;gap:12px;transition:background .35s}
.sns-card:hover{background:var(--night-2)}
.sns-card .icon{font-family:'Cormorant Garamond',serif;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne)}
.sns-card h3{font-family:'Shippori Mincho',serif;font-size:1.05rem;font-weight:500;letter-spacing:.1em}
.sns-card p{font-size:.78rem;font-weight:300;color:#9fb0b3;letter-spacing:.04em;flex:1}
.sns-card .go{font-family:'Cormorant Garamond',serif;color:var(--champagne);font-size:1.2rem;transition:transform .35s}
.sns-card:hover .go{transform:translateX(8px)}
@media(max-width:900px){.sns-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sns-grid{grid-template-columns:1fr}}

/* ───── 若手の声 カード ───── */
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.5vw,44px)}
.voice-card{border:1px solid var(--hairline);padding:clamp(28px,3.5vw,40px);display:flex;flex-direction:column;transition:background .3s}
.voice-card:hover{background:rgba(185,158,107,.05)}
.voice-card .ph{
  aspect-ratio:4/3;background:linear-gradient(160deg,var(--ivory-dim),#dcd8cc);
  border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;margin-bottom:24px;
  font-family:'Cormorant Garamond',serif;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:#9a927f;
  overflow:hidden;
}
.voice-card .ph img{width:100%;height:100%;object-fit:cover}
.voice-card .grade{font-family:'Cormorant Garamond',serif;font-size:.7rem;letter-spacing:.36em;text-transform:uppercase;color:var(--champagne)}
.voice-card h3{font-family:'Shippori Mincho',serif;font-size:1.05rem;font-weight:500;letter-spacing:.08em;line-height:1.9;margin:12px 0 14px}
.voice-card p{font-size:.82rem;font-weight:300;color:#4a5560;letter-spacing:.04em;flex:1}
.voice-card .name{margin-top:20px;font-size:.78rem;letter-spacing:.14em;color:var(--jade)}
@media(max-width:820px){.voice-grid{grid-template-columns:1fr}}

/* ───── 1日タイムライン ───── */
.timeline{position:relative;margin-top:10px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--hairline-inv)}
.t-item{position:relative;padding:0 0 42px 52px}
.t-item:last-child{padding-bottom:0}
.t-item::before{content:"";position:absolute;left:0;top:10px;width:15px;height:15px;border:1px solid var(--champagne);background:var(--night);transform:rotate(45deg)}
.t-item .yr{font-family:'Cormorant Garamond',serif;font-size:.8rem;letter-spacing:.3em;color:var(--champagne)}
.t-item h3{font-family:'Shippori Mincho',serif;font-size:1.1rem;font-weight:500;letter-spacing:.1em;margin:6px 0 8px}
.t-item p{font-size:.84rem;font-weight:300;color:#9fb0b3;max-width:44em;letter-spacing:.05em}
.t-item .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{font-size:.66rem;letter-spacing:.16em;padding:5px 14px;border:1px solid var(--champagne-soft);color:var(--champagne)}
/* リンクになっているバッジ（外部の学会サイト等へ） */
a.badge{transition:background .3s,color .3s,border-color .3s}
a.badge::after{content:"↗";margin-left:8px;font-size:.9em;opacity:.65}
a.badge:hover{background:var(--champagne);color:var(--night);border-color:var(--champagne)}
a.badge:hover::after{opacity:1}

/* ───── 外部リンク（サイト外へ出ることを明示）───── */
.ext{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.84rem;letter-spacing:.08em;
  border-bottom:1px solid var(--champagne-soft);padding-bottom:2px;
  transition:color .3s,border-color .3s;
}
.ext::after{content:"↗";font-size:.9em;opacity:.7;transition:transform .3s}
.ext:hover{color:var(--jade);border-color:var(--jade)}
.dark .ext:hover,.visit-cta .ext:hover{color:var(--pulse);border-color:var(--pulse)}
.ext:hover::after{transform:translate(2px,-2px)}

/* 外部サイトへ案内する注記ボックス */
.ext-note{
  margin-top:clamp(32px,4vw,48px);padding:clamp(24px,3vw,32px);
  border:1px solid var(--hairline-inv);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.ext-note p{font-size:.84rem;font-weight:300;color:#9fb0b3;letter-spacing:.05em;max-width:44em;margin:0}
.ext-note .lbl{
  font-family:'Cormorant Garamond',serif;font-size:.68rem;letter-spacing:.4em;
  text-transform:uppercase;color:var(--champagne);display:block;margin-bottom:10px;
}
/* 明背景版 */
.timeline.on-light::before{background:var(--hairline)}
.timeline.on-light .t-item::before{background:var(--ivory)}
.timeline.on-light .t-item p{color:#4a5560}

/* ───── できるようになること（skills）───── */
.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.skill{background:var(--ivory);padding:clamp(28px,3.5vw,44px)}
.skill .yr{font-family:'Cormorant Garamond',serif;font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne)}
.skill h3{font-family:'Shippori Mincho',serif;font-size:1.08rem;font-weight:500;letter-spacing:.1em;margin:10px 0 10px;line-height:1.9}
.skill p{font-size:.82rem;font-weight:300;color:#4a5560;letter-spacing:.04em}
@media(max-width:700px){.skills{grid-template-columns:1fr}}

/* ───── next nav / footer ───── */
.next-nav{border-top:1px solid var(--hairline)}
.next-nav .wrap{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.next-nav a{padding:clamp(40px,6vw,64px) clamp(20px,4vw,48px);display:flex;flex-direction:column;gap:8px;transition:background .3s}
.next-nav a:hover{background:rgba(185,158,107,.06)}
.next-nav .lbl{font-family:'Cormorant Garamond',serif;font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne)}
.next-nav .ttl{font-family:'Shippori Mincho',serif;font-size:1.2rem;letter-spacing:.12em}
.next-nav a:last-child{text-align:right;align-items:flex-end;border-left:1px solid var(--hairline)}
@media(max-width:640px){.next-nav .wrap{grid-template-columns:1fr}.next-nav a:last-child{border-left:0;border-top:1px solid var(--hairline)}}

footer{padding:clamp(70px,9vw,110px) 0 40px;border-top:1px solid var(--hairline)}
.foot-grid{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;margin-bottom:60px}
.foot-brand .jp{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.1rem;letter-spacing:.14em}
.foot-brand .en{font-family:'Cormorant Garamond',serif;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--champagne);margin-top:6px}
.foot-brand .addr{font-size:.76rem;font-weight:300;color:#6a7580;margin-top:22px;line-height:2.2;letter-spacing:.06em}
.foot-nav{display:flex;gap:clamp(32px,5vw,72px);font-size:.78rem;letter-spacing:.08em;flex-wrap:wrap}
.foot-nav ul{list-style:none}
.foot-nav li{margin-bottom:14px;font-weight:300}
.foot-nav a{opacity:.75;transition:opacity .25s}
.foot-nav a:hover{opacity:1}
.foot-nav .h{font-family:'Cormorant Garamond',serif;font-size:.68rem;letter-spacing:.44em;text-transform:uppercase;color:var(--champagne);margin-bottom:20px;font-weight:400}
.copyright{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'Cormorant Garamond',serif;font-size:.7rem;letter-spacing:.24em;color:#8a939c;border-top:1px solid var(--hairline);padding-top:28px}

/* ───── スマホ固定 見学CTAバー ───── */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:rgba(12,21,29,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--hairline-inv);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.mobile-cta a{
  flex:1;text-align:center;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  padding:13px 8px;color:#fff;
}
.mobile-cta .l{background:var(--line)}
.mobile-cta .f{background:var(--champagne);color:var(--night)}
@media(max-width:760px){
  .mobile-cta{display:flex}
  body{padding-bottom:64px}
}