/* FESCO Group hub, v3. Tokens from Design_newv2.md. */
:root{
  --brand:#00489C; --anchor:#0B3550; --link:#0074B7; --ink:#1A2430; --muted:#5B6472;
  --line:#E1E6EC; --stripe:#F4F7FA; --surface:#FFFFFF; --accent:#F2B705;
  --raised:0 4px 12px rgba(11,53,80,.14);
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --fs-mission:44px; --fs-year:32px; --fs-h:27px; --fs-card:21px; --fs-body:17px; --fs-cap:13.5px;
  --section:64px; --pad:24px;
  --t-color:150ms ease-out; --t-lift:200ms ease-out;
}
@media (max-width:639px){
  :root{--fs-mission:30px; --fs-year:27px; --fs-h:22px; --fs-card:19px; --fs-body:16px; --section:48px; --pad:16px}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font:400 var(--fs-body)/1.8 var(--sans);
  line-break:strict; word-break:normal; overflow-wrap:anywhere;
}
html[data-lang="en"] body{line-height:1.7; line-break:auto}
img{max-width:100%}
a{color:var(--link); font-weight:700; text-decoration-thickness:1.5px; text-underline-offset:3px; transition:color var(--t-color)}
.ext{display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-inline-start:5px}
a:visited{color:var(--anchor)}
a:active{color:var(--anchor)}
h1,h2,h3,.label,.mission-line,.year{font-feature-settings:"palt"}
html[data-lang="en"] h1,html[data-lang="en"] h2,html[data-lang="en"] h3{font-feature-settings:normal}
:focus-visible{outline:2px solid var(--anchor); outline-offset:2px; box-shadow:0 0 0 4px var(--surface)}

/* language toggle: one language visible at a time */
html[data-lang="ja"] .t-en{display:none !important}
html[data-lang="en"] .t-ja{display:none !important}

.wrap{max-width:1120px; margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--section)}
.prose{max-width:40em}
html[data-lang="en"] .prose{max-width:68ch}

.skip{position:absolute; left:16px; top:-100px; z-index:100; padding:12px 16px; background:var(--brand); color:var(--surface); border-radius:8px}
.skip:focus{top:16px}

/* ---------- labels ---------- */
.label{margin:0; font:700 var(--fs-cap)/1.4 var(--sans); color:var(--muted)}
.label .t-en{letter-spacing:.14em; text-transform:uppercase}

/* ---------- header ---------- */
.site-header{background:var(--surface); border-bottom:1px solid var(--line); position:relative; z-index:20}
.header-row{
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"logo nav switch"; align-items:center; gap:16px 24px; padding-block:16px;
}
.logo{grid-area:logo; display:inline-block; border-radius:4px}
.logo img{display:block; width:220px; height:auto}
.site-nav{grid-area:nav; min-width:0}
.nav{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 4px; justify-content:flex-end}
.nav > li{position:relative}
.nav a,.nav button{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border-radius:8px;
  font:700 16px/1.4 var(--sans); color:var(--anchor); text-decoration:none; background:none; border:0; cursor:pointer;
  transition:background-color var(--t-color), color var(--t-color);
}
.nav a:visited{color:var(--anchor)}
.nav a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:3px; text-underline-offset:8px}
@media (hover:hover){.nav a:hover,.nav button:hover{background:var(--stripe)}}
.nav button .chev{width:12px; height:12px; transition:transform var(--t-lift)}
.nav button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav button[aria-expanded="true"]{background:var(--stripe)}

.menu{
  list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:340px;
  background:var(--surface); border:1px solid var(--muted); border-radius:12px; box-shadow:var(--raised);
}
.menu[hidden]{display:none}
.menu a{
  display:flex; flex-direction:column; align-items:flex-start; min-height:44px; padding:8px 12px; border-radius:8px;
  color:var(--ink); text-decoration:none; font-weight:700; line-height:1.4; width:100%;
}
.menu a:visited{color:var(--anchor)}
.menu a small{font:400 var(--fs-cap)/1.5 var(--sans); color:var(--muted); letter-spacing:0}
@media (hover:hover){.menu a:hover{background:var(--stripe)}}
.menu .sub{margin:0 0 0 24px; padding-left:12px; border-left:2px solid var(--line)}
.menu .sub a{min-height:40px; padding-block:6px}

.lang-switch{grid-area:switch; display:inline-flex; gap:4px; padding:4px; background:var(--stripe); border-radius:8px; justify-self:end}
.lang-switch button{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border:1px solid transparent; border-radius:4px;
  background:var(--stripe); color:var(--anchor); font:700 var(--fs-cap)/1.4 var(--sans); cursor:pointer;
  transition:color var(--t-color), background-color var(--t-color), border-color var(--t-color);
}
.lang-switch button[aria-pressed="true"]{background:var(--brand); color:var(--surface)}
@media (hover:hover){.lang-switch button:not([aria-pressed="true"]):hover{border-color:var(--brand)}}
.lang-switch button:active{background:var(--anchor); color:var(--surface)}
.flag{width:20px; height:14px; flex:none; border-radius:2px; box-shadow:0 0 0 1px rgba(11,53,80,.18)}

@media (max-width:899px){
  .header-row{grid-template-columns:1fr auto; grid-template-areas:"logo switch" "nav nav"}
  .nav{justify-content:flex-start; margin-left:-12px}
  .nav > li.has-menu{position:static}
  .menu{left:0; right:0; min-width:0; top:100%}
}
@media (max-width:639px){
  .logo img{width:168px}
  .lang-switch button{padding:0 10px}
}

/* ---------- mission band (home) ---------- */
.mission{background:var(--anchor); color:var(--surface); padding-block:var(--section); overflow:hidden}
.mission-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,320px); gap:48px; align-items:center}
.mission .label{color:rgba(255,255,255,.8); margin-bottom:20px}
.mission-line{margin:0 0 20px; font:500 var(--fs-mission)/1.35 var(--mincho); color:var(--surface); text-wrap:balance}
.mission-line .nb{display:inline-block}
.mission .intro{margin:0; color:rgba(255,255,255,.92)}
.island{margin:0; width:100%; justify-self:end}
.island > svg{display:block; width:100%; height:auto; overflow:visible}
.island .coast{fill:none; stroke:var(--surface); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; opacity:.62}
.island .pin{fill:var(--accent)}
.island .ping{fill:none; stroke:var(--accent); stroke-width:1.5; opacity:0}
@media (max-width:899px){
  .mission-grid{grid-template-columns:1fr; gap:32px}
  .island{max-width:200px; justify-self:end}
}

/* ---------- sections and heads ---------- */
.section-head{margin-bottom:32px}
.section-head h1,.section-head h2{margin:0; font:700 var(--fs-h)/1.4 var(--sans); color:var(--brand)}
.section-head .lead{margin:8px 0 0; color:var(--muted)}
.page-head{padding-block:var(--section) 0}

/* ---------- business cards ---------- */
.cards{list-style:none; margin:0; padding:0; display:grid; gap:24px; grid-template-columns:repeat(6,minmax(0,1fr))}
.card{
  grid-column:span 2; position:relative; display:flex; flex-direction:column; gap:16px; padding:16px;
  background:var(--surface); border:1px solid var(--muted); border-radius:12px; text-align:start;
  transition:border-color var(--t-color), box-shadow var(--t-lift), transform var(--t-lift);
}
.card:nth-child(4){grid-column:2 / span 2}
.card:nth-child(5){grid-column:4 / span 2}
.card .art{display:block; inline-size:100%; height:auto; aspect-ratio:621 / 251; object-fit:cover; object-position:center}
.card-title{margin:0; font:700 var(--fs-card)/1.5 var(--sans); min-block-size:3em}
.card-title a{color:var(--ink); text-decoration:none}
.card-title a::after{content:""; position:absolute; inset:0; border-radius:12px}
.card-title a:visited{color:var(--anchor)}
.card-text{margin:0; color:var(--muted); flex:1 1 auto}
.card-url{position:relative; z-index:1; display:inline-block; padding:10px 0; align-self:flex-start; text-decoration:underline}
.card-sub{border-top:1px solid var(--line); padding-top:16px; display:grid; grid-template-columns:40% 1fr; gap:16px; align-items:center; position:relative; z-index:1}
.card-sub img{display:block; inline-size:100%; height:auto; aspect-ratio:621 / 251; object-fit:cover}
.card-sub a{display:inline-block; padding:10px 0; justify-self:start; text-decoration:underline; line-height:1.4}
@media (hover:hover){
  .card:hover{border-color:var(--brand); box-shadow:var(--raised); transform:translateY(-2px)}
}
.card:focus-within{border-color:var(--brand); box-shadow:var(--raised); transform:translateY(-2px)}
.card:active{border-color:var(--brand); box-shadow:none; transform:none}
@media (max-width:1023px){
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card:nth-child(4){grid-column:span 2}
  .card:nth-child(5){grid-column:2 / span 2}
}
@media (max-width:639px){
  .cards{grid-template-columns:1fr}
  .card,.card:nth-child(4),.card:nth-child(5){grid-column:auto}
  .card-title{min-block-size:auto}
  .card-sub{grid-template-columns:1fr}
}

/* ---------- sponsorship ---------- */
.sponsor{padding-block:0 var(--section)}
.sponsor-panel{
  display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:center; padding:24px;
  background:var(--stripe); border:1px solid var(--muted); border-radius:12px;
}
.sponsor-panel .art{display:block; inline-size:100%; height:auto; aspect-ratio:621 / 251; object-fit:cover}
.sponsor-panel p{margin:4px 0 0}
.sponsor-panel .text-link{display:inline-block; padding:10px 0; text-decoration:underline}
@media (max-width:639px){.sponsor-panel{grid-template-columns:1fr; gap:16px}}

/* ---------- footer ---------- */
.site-footer{background:var(--anchor); color:var(--surface); padding-block:24px}
.footer-row{display:flex; flex-wrap:wrap; gap:8px 32px; justify-content:space-between; align-items:center; font-size:var(--fs-cap); line-height:1.7}
.site-footer p{margin:0}
.site-footer a,.site-footer a:visited{color:var(--surface); text-decoration:underline; min-height:44px; display:inline-flex; align-items:center}
.footer-links{display:flex; flex-wrap:wrap; gap:0 16px}

/* ---------- timeline (history) ---------- */
.timeline{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.timeline li{display:grid; grid-template-columns:128px 1fr; gap:24px; padding-block:24px; border-bottom:1px solid var(--line)}
.year{margin:0; font:500 var(--fs-year)/1.2 var(--mincho); color:var(--brand)}
.year small{display:block; margin-top:4px; font:700 var(--fs-cap)/1.4 var(--sans); color:var(--muted)}
.event{margin:0; max-width:40em; align-self:center}
html[data-lang="en"] .event{max-width:68ch}
@media (max-width:639px){.timeline li{grid-template-columns:1fr; gap:8px; padding-block:16px}}

/* ---------- tables (company, contact) ---------- */
.table{width:100%; border-collapse:collapse; border-top:1px solid var(--line)}
.table th,.table td{padding:16px; text-align:start; vertical-align:top; border-bottom:1px solid var(--line)}
.table th{width:30%; font-weight:700; color:var(--anchor)}
.table tbody tr:nth-child(even){background:var(--stripe)}
.table ul{margin:0; padding-left:1.2em}
.table a{display:inline-block; padding:10px 0; text-decoration:underline; overflow-wrap:anywhere}
.table .stack{display:flex; flex-direction:column}
@media (max-width:639px){
  .table,.table tbody,.table tr,.table th,.table td{display:block; width:auto}
  .table th{padding-bottom:0; border-bottom:0}
  .table td{padding-top:4px}
}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,360px); gap:48px; align-items:start}
.map{margin:0; padding:24px; background:var(--stripe); border:1px solid var(--muted); border-radius:12px}
.map > svg{display:block; width:100%; height:auto; overflow:visible}
.map .coast{fill:none; stroke:var(--brand); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round}
.map .pin{fill:var(--brand)}
.map .ping{fill:none; stroke:var(--brand); stroke-width:1.5; opacity:0}
.map figcaption{margin-top:16px; font-size:var(--fs-cap); line-height:1.7; color:var(--muted)}
.map figcaption strong{display:block; color:var(--ink); font-size:var(--fs-body)}
.map figcaption a{display:inline-block; padding:10px 0; text-decoration:underline}
.subhead{margin:var(--section) 0 16px; font:700 var(--fs-card)/1.5 var(--sans); color:var(--brand)}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr; gap:32px}}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{from{opacity:0} to{opacity:1}}
@keyframes ping{0%{opacity:.9; transform:scale(.3)} 100%{opacity:0; transform:scale(2.6)}}
@keyframes menu-in{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
@keyframes card-in{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:no-preference){
  .js .rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 90ms + 120ms)}
  .js .island .coast{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.7s cubic-bezier(.4,0,.2,1) forwards; animation-delay:.2s}
  .js .island .coast.minor{animation-duration:.9s; animation-delay:1.1s}
  .js .island .pin,.js .map .pin{animation:appear .4s ease-out 1.6s both}
  .js .island .ping,.js .map .ping{transform-origin:center; transform-box:fill-box; animation:ping 1.8s ease-out 1.8s 2}
  .js .map .coast{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.4s cubic-bezier(.4,0,.2,1) forwards; animation-delay:.1s}
  .js .map .coast.minor{animation-duration:.7s; animation-delay:.9s}
  .menu{animation:menu-in 150ms ease-out}
  .js .cards:not(.in) .card{opacity:0}
  .js .cards.in .card{animation:card-in .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i,0) * 70ms)}
  main{transition:opacity 300ms ease-out}
  main.swapping{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- small additions ---------- */
.section.after-head{padding-top:0}
.divisions th{width:40%; padding-top:26px}
@media (max-width:639px){.divisions th{width:auto}}