@charset "UTF-8";

/* =========================================================
   Universe Corp – Final Clean CSS (2025-10)
   - White base
   - Section separator: 60% center line
   - Minimal hamburger (SP only, X morph, frosted drawer + backdrop)
   - Hero sunrise (thin overlay)
   - Cinematic mission quote
   ========================================================= */

/* ============= [RESET / BASE] ============= */
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; font-feature-settings: "palt" }
html, body { height: 100% }
html { font-family: 'Noto Sans JP', sans-serif; font-weight: 400 }
body { background:#fff; color:#222; font-size: 17px; line-height: 1.8 }
a { text-decoration: none; color: inherit }
img, video { max-width: 100%; height: auto; display: block }
ul { list-style: none }
button, input, textarea, select { font: inherit; color: inherit }
html, body { overflow-x: clip }

/* utility */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px }
.section { padding: 80px 0 }
.section.alt { background:#fff }
.lede { color:#444; margin: 10px 0 10px }
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ position:fixed; left:12px; top:12px; z-index:100; background:#111; color:#fff; padding:10px 12px; border-radius:8px }

/* ============= [HEADER / NAV] ============= */
:root { --header-h: 64px }
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  box-shadow: 0 1px 6px rgba(0,0,0,.08); height: var(--header-h);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; height:100%; min-width:0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.55rem; letter-spacing:.02em; min-width:0 }
.brand-logo{ height:52px; width:auto; object-fit:contain }
.brand-name{ white-space:nowrap; display:inline-block; max-width:52vw; overflow:hidden; text-overflow:ellipsis }

.nav{ display:flex; gap:20px; align-items:center; margin-left:auto; white-space:nowrap; min-width:0 }
.nav a{ position:relative; padding:6px 2px }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: currentColor; transform: scaleX(0); transform-origin:left; transition: transform .25s ease; opacity:.9;
}
.nav a:hover::after{ transform: scaleX(1) }
.nav .contact-btn{
  margin-left:.75rem; padding:8px 16px; border:1px solid #ddd;
  border-radius:999px; background:#fff; color:#222;
  font-weight:600; font-size:.95rem; letter-spacing:.02em; transition: all .3s ease;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.nav .contact-btn:hover{ background:#111; color:#fff; border-color:#111 }
.site-header .container{ max-width:100%; padding-left:24px; padding-right:24px }

/* Mobile drawer */
@media (max-width:900px){
  .nav{ display:none; order:3 }
  .nav.open{
    display:flex; flex-direction:column; position:absolute; top:calc(100% + 8px); right:8px;
    width:min(94vw,320px); background:#fff; border-radius:12px; padding:12px; gap:10px;
    box-shadow:0 12px 24px rgba(0,0,0,.12); z-index:61;
    opacity: 1; transform: translateY(0) scale(1);
    transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
    backdrop-filter: blur(8px);
  }
  .nav{
    opacity: 0; transform: translateY(-6px) scale(.98);
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav.open a{ opacity:1; transform:none; transition: opacity .28s ease, transform .28s ease }
  .nav a{ opacity:0; transform: translateY(-4px) }
  .nav.open a:nth-child(1){ transition-delay:.02s }
  .nav.open a:nth-child(2){ transition-delay:.05s }
  .nav.open a:nth-child(3){ transition-delay:.08s }
  .nav.open a:nth-child(4){ transition-delay:.11s }
  .nav.open a:nth-child(5){ transition-delay:.14s }
  .nav.open a:nth-child(6){ transition-delay:.17s }
}

/* Hamburger (SP only) */
.menu-toggle{
  display:none; width:40px; height:40px;
  border:0; background:none; color:inherit; border-radius:10px;
  transition: background .25s ease, box-shadow .25s ease, transform .1s ease;
  z-index: 62;
}
.menu-toggle:hover{ background: rgba(0,0,0,.04) }
.menu-toggle:active{ transform: translateY(1px) }
.menu-toggle .burger{ position: relative; width:22px; height:16px; display:block }
.menu-toggle .burger span{
  position:absolute; left:0; right:0; height:2px; background:#222; border-radius:2px;
  transform-origin:50% 50%; transition: transform .28s ease, opacity .2s ease, width .2s ease;
}
.menu-toggle .burger .l1{ top:0 }
.menu-toggle .burger .l2{ top:7px; width:100% }
.menu-toggle .burger .l3{ bottom:0 }
body.nav-open .menu-toggle .burger .l1{ transform: translateY(7px) rotate(45deg) }
body.nav-open .menu-toggle .burger .l2{ opacity:0; transform: scaleX(.4) }
body.nav-open .menu-toggle .burger .l3{ transform: translateY(-7px) rotate(-45deg) }
@media (max-width:900px){
  .menu-toggle{ display:grid !important; place-items:center; order:2; margin-left:auto }
}

/* Backdrop for drawer */
.nav-backdrop{
  position: fixed; inset: 0; z-index: 50;
  background: rgba(17,17,17,.18); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto }

/* ============= [HERO] ============= */
.hero.section{ padding:0 }
.hero{
  position:relative; min-height:100vh; padding-top: var(--header-h);
  color:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.hero-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.16); z-index:1 }
.hero-inner{
  position:relative; z-index:2; width:100%; margin:0 auto; padding:0 20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero-title{
  font-size: clamp(2.8rem, 6.5vw, 4.8rem); font-weight:700; line-height:1.2;
  margin-bottom:1.2em; text-shadow: 0 0 6px rgba(0,0,0,.7), 0 0 20px rgba(0,0,0,.55);
  white-space:nowrap;
}
@media (max-width:900px){ .hero-title{ white-space:normal } }
.hero-subtext{ font-size:1rem; line-height:1.9; color:rgba(255,255,255,.9); max-width:780px; margin:0 auto }
.hero-subtext p{ margin-bottom:1em }

/* Sunrise (thin overlay, option a) */
.hero.hero--video .hero-overlay::before{
  content:""; position:absolute; left:50%; bottom:-6%;
  width:160vmin; height:60vmin; transform: translateX(-50%);
  background: radial-gradient(60% 38% at 50% 100%,
      rgba(255,255,245,.95) 0%,
      rgba(255,247,220,.70) 18%,
      rgba(255,236,185,.42) 36%,
      rgba(255,230,150,.20) 52%,
      rgba(255,220,120,.08) 66%,
      rgba(255,210,100,0) 85%);
  filter: blur(22px); pointer-events:none;
  animation: sunBloomC 1.3s cubic-bezier(.2,.8,.2,1) both;
}
.hero.hero--video .hero-overlay::after{
  content:""; position:absolute; left:0; right:0; bottom:-25%;
  height:70%;
  background: linear-gradient(to top,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.55) 40%,
      rgba(255,255,255,.18) 70%,
      rgba(255,255,255,0) 100%);
  filter: blur(3px); pointer-events:none;
  animation: sunriseWashC 1.35s cubic-bezier(.2,.8,.2,1) .05s both;
}
@keyframes sunBloomC{ from{ transform: translateX(-50%) translateY(8%); opacity:.85 } to{ transform: translateX(-50%) translateY(-10%); opacity:0 } }
@keyframes sunriseWashC{ from{ transform: translateY(20%); opacity:1 } to{ transform: translateY(-95%); opacity:0 } }

/* Small viewport fixes */
@media (max-width:560px){
  .hero{ min-height: calc(100svh - var(--header-h)) }
  .hero-title{ white-space: normal !important; word-break: keep-all; line-height: 1.28; text-wrap: balance }
}
@supports (height: 100dvh){
  @media (max-width:560px){ .hero{ min-height: calc(100dvh - var(--header-h)) } }
}
@media (max-width:560px){
  @supports not (height: 100svh){ .hero{ min-height: calc(100vh - var(--header-h)) } }
}

/* ============= [MISSION / PHILOSOPHY] ============= */
.mission-quote{
  margin: 10px 0 24px; font-size: clamp(1.2rem,2.6vw,1.6rem); line-height:1.8; color:#333;
  border-left: 4px solid #ddd; padding:10px 14px; background:#f7f7f7; border-radius:6px;
  position:relative; overflow:hidden; isolation:isolate;
}
.mission--compact .lede--short{ font-size: clamp(1.02rem, 2.1vw, 1.18rem); line-height:1.7; color:#333 }
#mission.section{ padding-bottom:84px }
#philosophy.section{ padding-top:84px }

/* Cinematic reveal for mission quote */
.mission-quote .w{
  display:inline-block; opacity:0; transform: translateY(12px) skewY(2deg);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * .045s);
}
.mission-quote.inview .w{ opacity:1; transform:none }
.mission-quote::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  transform-origin:left; transform: scaleX(0);
  background: linear-gradient(90deg,#d0d0d0,#f0f0f0);
  transition: transform .6s cubic-bezier(.2,.8,.2,1) .05s; z-index:-1;
}
.mission-quote.inview::after{ transform: scaleX(1) }
.mission-quote::before{
  content:"“"; position:absolute; left:-.2em; top:-.1em; font-size:2.2em; line-height:1;
  color:rgba(0,0,0,.06); opacity:0; transform: translateY(6px);
  transition: opacity .6s ease .2s, transform .6s ease .2s; pointer-events:none;
}
.mission-quote.inview::before{ opacity:1; transform:none }

/* Pillars */
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:18px }
.pillar{
  background:#fff; border:1px solid #e3eae3; border-radius:12px; padding:18px 18px 20px;
  box-shadow:0 4px 14px rgba(0,0,0,.04); transition: transform .3s ease, box-shadow .3s ease;
}
.pillar:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.08) }
.pillar h3{ font-size:1.22rem; margin-bottom:10px; color:#2f3b32; letter-spacing:.01em; visibility:hidden }
.pillar h3[data-typing], .pillar h3.done{ visibility:visible }
.pillar h3[data-typing]{ white-space:nowrap; overflow:hidden; border-right:.08em solid currentColor; animation: caretBlink 1s steps(1) infinite }
.pillar h3.done{ border-right-color:transparent }
@keyframes caretBlink{ 50% { border-right-color: transparent } }
.pillar p{ opacity:0; transform: translateY(6px); transition: opacity .55s ease, transform .55s ease }
.pillar p.show{ opacity:1; transform:none }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr } }
@media (max-width:560px){ .pillar h3{ font-size:1.14rem } }

/* ============= [BUSINESS CARDS] ============= */
.solutions-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap:28px; margin-top:48px }
.card.card--biz{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--bd,#d9e0da);
  border-radius:12px; padding:32px 26px; color:var(--fg,#465246);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.05); content-visibility:auto; contain-intrinsic-size: 320px 520px;
}
.card.card--biz:hover{ transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,.08); background: var(--hover,#f7f9f6) }
.card.card--biz::before{
  content:""; position:absolute; inset:0 0 auto 0; height:84px; z-index:0;
  background: linear-gradient(90deg, var(--accent1), var(--accent2)); opacity:.95;
}
.card.card--biz .tag{ position:relative; z-index:1; display:inline-block; color:#fff; background:transparent; font-size:.85rem; font-weight:700; letter-spacing:.03em; padding:6px 10px; margin-top:6px; border-radius:4px }
.card.card--biz h3{ position:relative; z-index:1; font-weight:700; line-height:1.3; color:var(--title,#2f3b32); margin:16px 0 12px; font-size:1.24rem }
.card.card--biz .biz-lead{ font-size:1.03rem; line-height:1.65; color:var(--leadc,#3c463d); margin-bottom:18px }
.card.card--biz .biz-points li{ position:relative; padding-left:18px; margin-bottom:6px; font-size:.94rem; color:var(--listc,#546354); line-height:1.55 }
.card.card--biz .biz-points li::before{ content:"–"; position:absolute; left:4px; color:var(--mark,#7aa97a) }

.card.card--biz .card-img{ position:relative; overflow:hidden; border-radius:12px; margin:-6px -6px 16px; height:200px; background:#eef1f3 }
.card.card--biz .card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease }
.card.card--biz:hover .card-img img{ transform: scale(1.05) }
.card.card--biz .card-img::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.22)) }
.tag-over{
  position:absolute; left:12px; bottom:12px; z-index:2; color:#fff; font-weight:700; letter-spacing:.03em;
  padding:6px 10px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.15);
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
}
.card.card--biz.has-img::before{ height:0 }
.card.card--biz:not(.has-img) .tag{ display:inline-block; color:#fff; background: linear-gradient(90deg, var(--accent1), var(--accent2)); padding:6px 10px; border-radius:6px; margin-bottom:10px }

/* themes */
.theme-system{ --accent1:#6f8fb8; --accent2:#9ab3d6; --hover:#f4f7fb; --bd:#d6dfe9; --fg:#3f4752; --title:#2e3a4a; --leadc:#394657; --listc:#4b5563; --mark:#6f8fb8; --link:#476d9e }
.theme-event { --accent1:#c9965b; --accent2:#e0b982; --hover:#f9f3ea; --bd:#eadfce; --fg:#5a4b3b; --title:#3f3428; --leadc:#4a3b2d; --listc:#5b4b3b; --mark:#c9965b; --link:#9a6b3d }
.theme-shabby{ --accent1:#7aa97a; --accent2:#9fbea0; --hover:#f3f7f3; --bd:#d9e0da; --fg:#465246; --title:#2e3a4a; --leadc:#3c463d; --listc:#546354; --mark:#7aa97a; --link:#5f8a5f }

/* “詳しく見る” リンク（テーマ色 + 矢印アニメ） */
.card.card--biz .card-actions .btn-link{
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px; color: var(--link, #5f8a5f); font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, color .3s ease;
  position: relative;
}
.card.card--biz .card-actions .btn-link::after{
  content:"→"; font-size:.9em; opacity:.85; transform: translateX(0);
  transition: transform .26s ease, opacity .26s ease;
}
.card.card--biz .card-actions .btn-link:hover{ border-color: currentColor }
.card.card--biz .card-actions .btn-link:hover::after{ transform: translateX(4px); opacity:1 }

@media (hover:hover) and (pointer:fine){
  .card.card--biz:hover .card-img img{ transform: scale(1.04) }
  .card.card--biz{ will-change: transform }
}
@media (hover:none){ .card.card--biz:hover .card-img img{ transform:none } }
@media (max-width:560px){
  .solutions-grid{ grid-template-columns:1fr; gap:16px; margin-top:28px }
  .card.card--biz{ padding:16px 14px }
  .card.card--biz .card-img{ height:150px; margin:-2px -2px 10px; border-radius:10px }
  .card.card--biz h3{ font-size:1.08rem; margin:10px 0 6px }
  .card.card--biz .biz-lead{ font-size:.98rem; line-height:1.6; margin-bottom:10px }
  .card.card--biz .biz-points li{ font-size:.95rem; margin-bottom:4px }
}

/* ============= [RECRUIT] ============= */
.recruit .lede{ margin:8px 0 16px; color:#4a4a4a }
.recruit-emphasis{ background: linear-gradient(180deg,#fff 0%, #fff 60%); border: none }
.recruit-emphasis .container{ text-align:left; max-width:1120px; margin-inline:auto }
.recruit-emphasis h2{ font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-bottom:8px }
.recruit-emphasis .lede.strong{ font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight:700; margin:8px 0 10px; color:#2f3b32 }
.recruit-emphasis .cta-row{ display:flex; gap:12px; margin:8px 0 8px; justify-content:flex-start }
.recruit-emphasis .btn{ display:inline-block; padding:10px 16px; border:1px solid #cfd8cf; border-radius:12px; background:#fff; font-weight:700 }
.recruit-emphasis .btn.xl{ padding:12px 20px; font-size:1.02rem }

/* premium CTA button */
.recruit-emphasis .btn.primary.xl{
  position:relative; overflow:hidden; border-radius:999px;
  padding:14px 48px 14px 22px; background:#111; color:#fff; border:1px solid #111;
  font-weight:700; line-height:1; letter-spacing:.02em;
  box-shadow: 0 6px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s cubic-bezier(.22,.61,.36,1), background .18s ease, border-color .18s ease, color .18s ease;
}
.recruit-emphasis .btn.primary.xl:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  background:#000; border-color:#000;
}
.recruit-emphasis .btn.primary.xl:active{ transform: translateY(0) }
.recruit-emphasis .btn.primary.xl:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #111, 0 10px 22px rgba(0,0,0,.18);
}
.recruit-emphasis .btn.primary.xl::before{
  content:""; position:absolute; inset:-1px;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.25) 48%, transparent 56%);
  transform: translateX(-120%); transition: transform .55s cubic-bezier(.2,.8,.2,1); pointer-events:none;
}
.recruit-emphasis .btn.primary.xl:hover::before{ transform: translateX(120%) }
.recruit-emphasis .btn.primary.xl::after{
  content:"↗"; position:absolute; right:18px; top:50%; transform: translateY(-50%) translateX(-2px);
  font-size:1.1em; transition: transform .25s cubic-bezier(.22,.61,.36,1), opacity .2s ease; opacity:.9;
}
.recruit-emphasis .btn.primary.xl:hover::after{ transform: translateY(-50%) translateX(2px); opacity:1 }

/* 2-column layout with right image */
.recruit-2col{ display:flex; align-items:center; gap:48px }
.recruit-text{ flex:1 }
.recruit-image{ flex:1; text-align:right }
.recruit-image img{ width:100%; max-width:360px; border-radius:10px; object-fit:cover }

/* catch phrase (type + line) */
.recruit-catch{ position:relative; display:inline-block; letter-spacing:.01em }
.recruit-catch::after{
  content:""; position:absolute; left:0; right:0; bottom:-.28em; height:2px;
  background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.55), rgba(0,0,0,.85));
  transform-origin:left; transform: scaleX(0); opacity:.9;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.recruit-catch.line-on::after{ transform: scaleX(1) }
.recruit-catch[data-typing]{ border-right:.08em solid currentColor; animation: rcCaret 1s steps(1) infinite }
@keyframes rcCaret{ 50%{ border-right-color: transparent } }

/* ============= [NEWS] ============= */
.news{ margin-top:8px }
.news .lede{ margin:8px 0 16px; color:#4a4a4a }
.news-list{ display:grid; gap:10px; padding:0; margin:0 }
.news-item{ padding:12px 0; border-bottom:1px solid #e6e6e6 }
.news-date{ display:inline-block; min-width:8.2em; color:#6b7280; font-variant-numeric: tabular-nums }
.news-title{ text-decoration: underline }
.news .cta-row{ margin-top:14px; display:flex; gap:12px }
.news .btn{ display:inline-block; padding:8px 14px; border:1px solid #e0e0e0; border-radius:10px; background:#fff; font-weight:600 }
.news .link{ align-self:center; text-decoration: underline }

/* ============= [ABOUT / COMPANY] ============= */
.about{ --about-border:#e9ece8; --about-bg:#fff; --about-muted:#616a61 }
.about-head{ margin-bottom:20px }
.about-detail.panel{
  background:var(--about-bg); border:1px solid var(--about-border); border-radius:14px;
  padding:22px 24px; box-shadow:0 6px 24px rgba(0,0,0,.04);
}
.kv{ display:grid; grid-template-columns:180px 1fr; column-gap:24px; row-gap:0; align-items:start }
.kv>dt, .kv>dd{ font-size:1rem; line-height:1.9; padding:12px 0 }
.kv>dt{ color:var(--about-muted); letter-spacing:.02em; white-space:nowrap }
.kv>dt, .kv>dd{ border-bottom:1px solid var(--about-border) }
.kv>dt:nth-last-child(2), .kv>dd:last-child{ border-bottom:none }
.kv dt:hover, .kv dt:hover + dd{ background:#f8f8f8; border-radius:6px }
.kv dt:has(+ dd:hover), .kv dd:hover{ background:#f8f8f8; border-radius:6px }

/* ============= [FOOTER] ============= */
.site-footer{ border-top:1px solid #e6e6e6; background:#fafafa; padding:24px 0; margin-top:40px; font-size:14px }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px }
.footer-nav .footer-links{ display:flex; flex-wrap:wrap; gap:12px 18px; padding:0; margin:0 }
.footer-nav .footer-links a{ color:#444 }
.footer-nav .footer-links a:hover{ text-decoration: underline }
.site-footer .container, .footer-nav, .site-footer p{
  width:100%; max-width:1120px; padding-left:16px; padding-right:16px; margin-inline:auto; box-sizing:border-box;
}
.site-footer p{ margin-top:10px; color:#666; font-size:.95rem }

/* ============= [COOKIE BANNER] ============= */
.cookie-banner{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:80;
  background:#fff; border:1px solid #eee; border-radius:12px; padding:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.08); display:grid; gap:10px;
  opacity:0; transform: translateY(8px); pointer-events:none; visibility:hidden;
  transition: opacity .3s, transform .3s, visibility .3s;
}
.cookie-banner.show{ opacity:1; transform: translateY(0); pointer-events:auto; visibility:visible }
.cookie-banner p{ font-size:14px; color:#555 }

/* ============= [ANIMATIONS / ENTER] ============= */
@media (prefers-reduced-motion:no-preference){
  .js .site-header, .js .hero-title, .js .hero-subtext{ opacity:0; transform: translateY(16px) }
  .js .site-header{ transform: translateY(-16px) }
  body.is-mounted .site-header{ animation: headerDrop .90s ease-out .20s both }
  body.is-mounted .hero-title{ animation: heroRise 1.00s cubic-bezier(.2,.8,.2,1) .45s both }
  body.is-mounted .hero-subtext{ animation: heroRise 1.00s cubic-bezier(.2,.8,.2,1) .75s both }
  body.is-mounted .nav a{ opacity:0; transform: translateY(-8px) }
  body.is-mounted .nav a:nth-child(1){ animation: navIn .45s ease .30s both }
  body.is-mounted .nav a:nth-child(2){ animation: navIn .45s ease .38s both }
  body.is-mounted .nav a:nth-child(3){ animation: navIn .45s ease .46s both }
  body.is-mounted .nav a:nth-child(4){ animation: navIn .45s ease .54s both }
  body.is-mounted .nav a:nth-child(5){ animation: navIn .45s ease .62s both }
  body.is-mounted .nav a:nth-child(6){ animation: navIn .45s ease .70s both }
  body.is-mounted .hero-overlay{ animation: overlaySoft .90s ease .15s both }
  @keyframes headerDrop{ from{ opacity:0; transform: translateY(-16px) } to{ opacity:1; transform:none } }
  @keyframes heroRise{ 0%{ opacity:0; transform: translateY(16px); filter: blur(2px) } 100%{ opacity:1; transform:none; filter: none } }
  @keyframes navIn{ from{ opacity:0; transform: translateY(-8px) } to{ opacity:1; transform:none } }
  @keyframes overlaySoft{ from{ opacity:0 } to{ opacity:1 } }
}
@media (prefers-reduced-motion:reduce){
  .site-header, .hero-title, .hero-subtext, .nav a, .hero-overlay,
  .reveal-section, .reveal-section .card{ opacity:1 !important; transform:none !important; animation:none !important }
}

/* ============= [SCROLL REVEAL] ============= */
.reveal-section{ opacity:0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease }
.reveal-section.inview{ opacity:1; transform:none }
.reveal-section h2, .reveal-section .lede{ opacity:0; transform: translateY(14px); transition: opacity .95s ease, transform .95s ease }
.reveal-section.inview h2{ opacity:1; transform:none; transition-delay:.06s }
.reveal-section.inview .lede{ opacity:1; transform:none; transition-delay:.18s }
.reveal-section .card{
  opacity:0; transform: translateY(28px);
  transition: opacity 1.05s ease, transform 1.05s ease;
  transition-delay: calc(var(--i,0) * 140ms);
}
.reveal-section.inview .card{ opacity:1; transform:none }

/* ============= [SECTION SEPARATOR – 60% center] ============= */
main > .section + .section{ position:relative }
main > .section + .section::before{
  content:""; position:absolute; top:0; left:50%; width:60%; height:1px;
  background:#e7e7e7; transform: translateX(-50%);
}
.section + .site-footer::before{ content:none }

/* ============= [RESPONSIVE] ============= */
@media (max-width:900px){
  :root { --header-h: 58px }
  .site-header .container{ padding-left:8px; padding-right:12px }
  .brand{ font-size:1.28rem }
  .brand-logo{ height:42px }
}
@media (max-width:780px){
  .recruit-2col{ flex-direction:column; text-align:center }
  .recruit-image{ text-align:center }
  .recruit-image img{ max-width:420px }
}
@media (max-width:560px){
  .section{ padding:56px 0 }
  .hero.section{ padding:0 }

  body{ font-size:15px; line-height:1.75 }
  h1, h2, h3{ line-height:1.35 }
  h2{ font-size:1.28rem; margin-bottom:.75em }
  h3{ font-size:1.05rem }

  .news-list{ gap:6px }
  .news-item{ padding:10px 0 }
  .news-item article{ display:grid; grid-template-columns:1fr; row-gap:4px }
  .news .btn, .news .link{ width:100%; text-align:center }
  .kv>dt{ padding:8px 0 4px }
  .kv>dd{ padding:0 0 12px }
}
/* === Hero mobile fit & title sizing === */
@media (max-width: 560px){
  .hero{
    min-height: calc(100dvh - var(--header-h));
    overflow: hidden;
  }
  .hero-inner{ padding-left: 16px; padding-right: 16px }

  /* 見出し：最小サイズを下げて改行優先に */
  .hero-title{
    font-size: clamp(1.6rem, 7.4vw, 2.2rem); /* ← 2.8rem→1.6rem に下げる */
    line-height: 1.24;
    white-space: normal !important;
    word-break: keep-all;
    text-wrap: balance;
    margin-bottom: .85em;
  }

  /* 動画は画面にフィットさせる */
  .hero-video{
    width: 100%; height: 100%;
    object-fit: cover; object-position: center bottom;
  }

  /* 擬似光源を少し控えめに（横スクロール防止） */
  .hero.hero--video .hero-overlay::before{
    width: 120vw;   /* 160vmin → 120vw */
    height: 45vh;   /* 60vmin → 45vh */
    bottom: -10%;
    filter: blur(18px);
  }
  .hero.hero--video .hero-overlay::after{
    height: 55%;
    bottom: -18%;
  }
}

/* 超小幅デバイスの保険 */
@media (max-width: 360px){
  .hero-title{ font-size: clamp(1.4rem, 7.8vw, 1.9rem) }
}

/* === Company KV: single column on mobile === */
@media (max-width: 640px){
  .kv{
    grid-template-columns: 1fr;   /* 2列 → 1列 */
  }
  .kv > dt{
    padding: 10px 0 4px;
    border-bottom: none;          /* 見出し側は線なし */
  }
  .kv > dd{
    padding: 0 0 12px;
    border-bottom: 1px solid var(--about-border);
  }
  .kv > dd:last-child{
    border-bottom: none;          /* 最終行の線は消す */
  }
}
/* === Site-wide Button (base) === */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px; padding: 10px 14px;
  line-height:1; font-weight:600; font-size:.95rem;
  border:1px solid var(--c-border, #e0e0e0); border-radius:999px;
  background:#fff; color: var(--c-ink, #222); text-decoration:none;
}
.btn__icon{ width:1.1em; height:1.1em; display:inline-block; flex:0 0 auto; position:relative; top:-0.02em; }
.btn--soft{ color: var(--sys-link, #476d9e); border-color: var(--panel-bd, #e3eaf5); background:#fff; }
.btn--primary{ background: var(--sys-link, #476d9e); color:#fff; border-color: var(--sys-link, #476d9e); }
/* === [Typer – Common] 表示方式を統一 === */
/* 素の状態（カーソルなし） */
.typer{
  display:inline-block;
  white-space:nowrap;          /* 1行表示。複数行にしたい時は .typer--wrap を付ける */
  overflow:hidden;
}

/* タイピング中だけカーソル点滅を出す */
.typer.is-typing{
  border-right:.08em solid currentColor;
  animation: typerCaretBlink 1s steps(1) infinite;
}

/* 完了で必ず消す（JSが .is-complete を付与） */
.typer.is-complete{
  border-right-color: transparent;
  animation: none;
}

/* 改行を許可したい要素にだけ付与（任意） */
.typer.typer--wrap{ white-space: normal }

/* キーフレーム（未定義なら追加） */
@keyframes typerCaretBlink { 50% { border-right-color: transparent } }
/* === [Typer – Common] 表示方式の統一（仕様A） === */
/* 素の .typer はカーソルを出さない（既存の出しっぱなし演出を無効化） */
.typer{
  display:inline-block;
  white-space:nowrap; /* 複数行にしたい要素だけ .typer--wrap を付ける */
  overflow:hidden;
  border-right: 0;
  animation: none;
}
/* もし擬似要素でカーソルを出している旧実装があっても無効化 */
.typer::before, .typer::after{ content:none; animation:none }

/* タイピング中だけカーソル点滅 */
.typer.is-typing{
  border-right:.08em solid currentColor;
  animation: typerCaretBlink 1s steps(1) infinite;
}

/* 完了で必ず消す（JSが .is-complete を付ける） */
.typer.is-complete{
  border-right-color: transparent;
  animation: none;
}

/* 任意：複数行にしたい要素だけ追加する */
.typer.typer--wrap{ white-space: normal }

/* キーフレーム（未定義なら） */
@keyframes typerCaretBlink { 50% { border-right-color: transparent } }