/* ユーザー提供の参考画像（references/IMG_5435〜5439.png）に合わせたトップページ。 */
:root {
  --ink: #172d59;
  --header-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; color: var(--ink); background: #e5edf4; font-family: var(--font); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
a:focus-visible { outline: 3px solid #174f78; outline-offset: 6px; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 20; padding: 10px 16px; background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
/* 写真の上を透過PNGの波が通る。背景を拡大・白塗りせず、素材の輪郭を保つ。 */
.page-background { position: fixed; inset: 0; z-index: -1; background: #dce8f1 url("assets/top-bg.jpg") center center / cover no-repeat; }
.site-header { position: fixed; inset: 0 auto auto 0; z-index: 10; min-height: var(--header-h); padding: 16px 3vw; transition: background .25s; }
.site-header.is-solid { background: rgba(242, 247, 251, .88); backdrop-filter: blur(8px); border-radius: 0 0 12px 0; }
.site-nav { display: flex; align-items: center; gap: 2vw; }
.site-nav a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; transition: opacity .2s; }
.site-nav a:hover { opacity: .65; }
.site-nav img { width: auto; height: clamp(14px, 1.05vw, 24px); }
.hero { position: relative; min-height: max(100svh, 56.43vw); }
.hero__inner { position: absolute; top: 30%; left: 6.8%; width: 38%; }
.hero__title { margin: 0; }
.hero__copy { width: 100%; }
.mission, .menu, .site-footer { position: relative; }
.mission__bg, .menu__bg, .site-footer__bg { position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.mission { margin-top: -15.5vw; aspect-ratio: 3482 / 2488; }
.mission__bg { background-image: url("assets/bg1-mission.png"); }
.mission__inner { position: relative; padding-top: 16.5vw; }
.mission__copy { width: 36%; margin-left: 33%; }
.mission__copy img { width: 100%; }
.menu { aspect-ratio: 3482 / 1780; margin-top: -2vw; }
.menu__bg { background-image: url("assets/bg2-menu.png"); }
.menu__inner { position: relative; padding-top: 15vw; margin-left: 22.5%; width: 65%; }
.menu__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12vw; row-gap: 4.5vw; }
.card { display: flex; align-items: flex-start; width: fit-content; max-width: 100%; min-height: 44px; transition: opacity .2s; }
.card:hover { opacity: .65; }
.menu__image--portfolio { width: 21.5vw; }
.menu__image--history { width: 16.69vw; }
.menu__image--team { width: 10.43vw; }
.menu__image--news { width: 18.56vw; }
.site-footer { min-height: 33.34vw; margin-top: -1vw; padding: 11vw 9% 24px; }
.site-footer__bg { background-image: url("assets/bg3-footer.png"); }
.site-footer__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 19%; grid-template-areas: "company brand" "links links" "copy copy"; column-gap: 4%; align-items: center; }
.site-footer__brand { grid-area: brand; }
.site-footer__logo { width: 100%; }
.company { grid-area: company; display: grid; gap: .25em; margin: 0; color: #101820; font-size: clamp(12px, 1.35vw, 22px); font-weight: 500; letter-spacing: .04em; }
.company > div { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 1em; }
.company dt, .company dd { margin: 0; }
.company a { display: inline-block; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__links { grid-area: links; display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; font-size: 12px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__copy { grid-area: copy; margin: 8px 0 0; font-size: 11px; }
.reveal { transition: opacity .65s var(--ease), transform .65s var(--ease); transition-delay: var(--delay, 0ms); }
.reveal.is-pending { opacity: 0; transform: translateY(12px); }
.reveal.is-in, .reveal:focus-within { opacity: 1; transform: none; }
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .site-header { padding: 10px 5%; max-width: 100%; }
  .site-nav { gap: clamp(16px, 5vw, 30px); }
  .site-nav img { height: 14px; }
  .page-background { background-image: url("assets/top-bg-sp.jpg"); background-position: center bottom; }
  .hero { min-height: max(760px, 100svh); background: linear-gradient(#e4eff8 0%, rgba(228,239,248,.98) 38%, rgba(228,239,248,0) 65%); }
  .hero__inner { top: 125px; left: 7%; width: 86%; }
  .mission { margin-top: -16vw; aspect-ratio: auto; padding: 100px 7% 90px; }
  .mission__inner { padding: 0; }
  .mission__copy { width: 100%; max-width: 410px; margin: 0 auto; }
  .menu { aspect-ratio: auto; margin-top: -24px; padding: 100px 8% 110px; }
  .menu__inner { padding: 0; margin: 0; width: 100%; }
  .menu__grid { column-gap: 8%; row-gap: 48px; }
  .menu__image--portfolio { width: 100%; }
  .menu__image--history { width: 77.61%; }
  .menu__image--team { width: 48.52%; }
  .menu__image--news { width: 86.34%; }
  .card { width: 100%; min-height: 58px; }
  .site-footer { margin-top: -24px; padding: 150px 7% 24px; }
  .site-footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, #edf4fa 145px); }
  .site-footer__inner { grid-template-columns: 1fr; grid-template-areas: "company" "brand" "links" "copy"; }
  .company { font-size: 13px; gap: 12px; }
  .company > div { grid-template-columns: 4em minmax(0, 1fr); gap: 12px; }
  .site-footer__brand { width: 180px; justify-self: end; margin-top: 24px; }
  .site-footer__links { margin-top: 12px; gap: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .site-header, .site-nav a, .card { transition: none; }
  .reveal.is-pending { opacity: 1; transform: none; }
}