@charset "utf-8";

:root {

  --c-black:  #000;
  --c-white:  #fff;
  --c-gray-60:#767676;
  --c-gray-40:#999;
  --c-gray-10:#eaeaea;
  --c-gray-05:#f4f4f4;
  --c-accent:      #0b5fff;
  --c-accent-ink:  #0b5fff;
  --c-accent-tint: #5a8dff;

  --color-surface-base:    var(--c-white);
  --color-surface-inverse: var(--c-black);
  --color-surface-muted:   var(--c-gray-05);
  --color-text-primary:    var(--c-black);
  --color-text-secondary:  var(--c-gray-60);
  --color-text-on-inverse: var(--c-white);
  --color-text-muted-on-inverse: var(--c-gray-40);
  --color-text-accent:     var(--c-accent-ink);
  --color-text-accent-on-inverse: var(--c-accent-tint);
  --color-border-muted:    var(--c-gray-10);
  --color-border-strong:   var(--c-black);
  --color-accent-fill:     var(--c-accent);
  --color-focus-ring:      var(--c-accent);

  --font-family-primary: "Noto Sans JP","Helvetica Neue","Yu Gothic",YuGothic,sans-serif;
  --font-family-display: "Oswald","Noto Sans JP",sans-serif;

  --font-size-xs:  1.2rem;

  --font-size-sm:  1.4rem;
  --font-size-md:  1.7rem;
  --font-size-lg:  1.9rem;
  --font-size-xl:  2.1rem;
  --font-size-2xl: 2.2rem;
  --font-size-3xl: 3.4rem;
  --font-size-4xl: 4.8rem;
  --line-height-base:  1.75;
  --line-height-tight: 1.2;
  --line-height-head:  1.07;
  --letter-spacing-head:  1.3px;
  --letter-spacing-label: 1.4px;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:60px;
  --space-9:80px; --space-10:100px; --space-11:140px;

  --gutter:     6vw;

  --section-y:  60px;

  --mv-band:    132px;

  --mv-h:       calc(80vh - var(--mv-band));
  --sub-img-w:  100%;
  --sub-img-h:  58vw;
  --sub-ttl:    11vw;

  --grid-cols:  13;
  --grid-major: 7;
  --grid-minor: 6;
  --grid-col-gap: var(--space-5);
  --grid-row-gap: var(--space-6);

  --grid-col: calc((100% - 2 * var(--gutter) - 12 * var(--grid-col-gap)) / 13);

  --card-bg-dim: .45;

  --rule:            1px solid var(--color-border-muted);
  --rule-on-inverse: 1px solid rgba(255,255,255,.22);

  --radius-none: 0;

  --duration-instant:150ms; --duration-fast:240ms;  --duration-base:320ms;
  --duration-slow:450ms;    --duration-page:600ms;  --duration-reveal:620ms;
  --duration-text:800ms;    --duration-scale:900ms; --duration-menu:700ms;
  --duration-mv-open:1400ms;
  --stagger-tight:40ms;     --stagger-loose:80ms;

  --ease-signature: cubic-bezier(.33,.9,.28,1);

  --ease-open:      cubic-bezier(.65,0,.35,1);
  --ease-nav:       cubic-bezier(.452,0,.07,1);
  --ease-morph:     cubic-bezier(.76,0,.24,1);

  --v-angle-major: 26.2deg;
  --v-angle-minor: 22.2deg;
  --v-tan-major: 0.4921;
  --v-tan-minor: 0.4081;

  --logo-min-w: 57px;  --logo-min-h: 26px;
  --logo-large-w: 26.6vw; --logo-large-h: 12.2vw; --logo-large-x: 3.6vw;
}

@media (min-width:767px) {
  :root {
    --gutter:     5.6vw;
    --section-y:  100px;

    --mv-band:    180px;
    --mv-h:       46vw;
    --sub-img-w:  56vw;
    --sub-img-h:  32vw;
    --sub-ttl:    6.4vw;

    --font-size-xs: 1.4rem;
    --font-size-sm: 1.5rem;

    --grid-col-gap: var(--space-6);
    --grid-row-gap: var(--space-9);

    --logo-min-w: 74px;  --logo-min-h: 34px;

    --logo-large-w: 8vw; --logo-large-h: 3.65vw; --logo-large-x: .4vw;
  }
}

*,*::before,*::after { box-sizing:border-box; }
html,body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,blockquote { margin:0; padding:0; }
ul,ol { list-style:none; }
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
i,em,address { font-style:normal; }

html {
  font-size:62.5%;
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}

@media (min-width:767px) and (max-width:1240px) { html { font-size:52%; } }

body {
  font-family:var(--font-family-primary);
  font-size:var(--font-size-sm);
  font-weight:400;
  line-height:var(--line-height-base);
  color:var(--color-text-primary);
  background:var(--color-surface-base);
  width:100%;
  overflow-x:hidden;
}

.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
:focus { outline:0; }
:focus-visible {
  outline:2px solid var(--color-focus-ring);
  outline-offset:4px;
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

.vp { position:fixed; top:0; left:0; width:100%; z-index:1; }
.is-native .vp {
  position:relative; height:auto;
}
body.is-hidden { overflow:hidden; height:100%; }

#turn-veil {
  position:fixed; inset:0; background:var(--c-black);
  z-index:50; pointer-events:none; opacity:0;
}

.rv.rv-fade { opacity:0; transition:opacity var(--duration-text); }
.rv.rv-fade.is-rv { opacity:1; }

.mv-copy span { display:block; overflow:hidden; }
.mv-copy span i {
  display:block;
  transform:translate3d(0,100%,0);
  transition:transform var(--duration-reveal) var(--ease-signature);
}
.mv-copy span:last-child i { transition-delay:.08s; }
.mv-copy.is-rv span i { transform:translate3d(0,0,0); }

.rv-zoom { transform:translate3d(0,0,0) scale(1.5); transition:transform var(--duration-scale) var(--ease-signature); }
.rv-zoom.is-rv { transform:translate3d(0,0,0) scale(1); }

#intro-zoom { transform:translate3d(0,0,0) scale(1.4); transition:transform var(--duration-scale) var(--ease-signature); }
#intro-zoom.is-rv { transform:translate3d(0,0,0) scale(1); }

.p-prt { position:relative; overflow:hidden; }

#op {
  position:fixed; inset:0; z-index:150;
  background:var(--color-accent-fill);
  pointer-events:none;
}
#op .op-dark {
  position:absolute; inset:0; z-index:1;
  background:var(--color-surface-inverse);
}
#op .op-logo {
  position:absolute; z-index:2; top:30px; left:calc(var(--gutter) - 1.6vw);
  width:calc(var(--logo-min-w) + var(--logo-large-w));
  height:calc(var(--logo-min-h) + var(--logo-large-h));
  color:var(--c-white); fill:currentColor;
}
@media (min-width:767px) { #op .op-logo { top:50px; left:calc(var(--gutter) - .6vw); } }
#op.is-done { display:none; }

.op-skip #op { display:none; }
@keyframes page-in { from { opacity:0; } to { opacity:1; } }
.op-skip .vp { animation:page-in var(--duration-base) var(--ease-signature) both; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration:var(--duration-fast); }
::view-transition-new(root) { animation-duration:var(--duration-base); }
@supports (view-transition-name: none) {

  .op-skip .vp { animation:none; }

  #head { view-transition-name:site-header; }
}

#head {
  position:fixed; top:0; left:0; width:100%; z-index:100;
  transition:opacity var(--duration-fast);
}
.nav-hide #head { opacity:0; visibility:hidden; }
.nav-hide #head * { pointer-events:none !important; }

#head .logo {
  position:absolute; top:30px; left:var(--gutter);
  width:calc(var(--e,0) * var(--logo-large-w) + var(--logo-min-w));
  height:calc(var(--e,0) * var(--logo-large-h) + var(--logo-min-h));
  transform:translate3d(calc(var(--e,0) * var(--logo-large-x) * -1),0,0);
  transform-origin:top left;
}
@media (min-width:767px) { #head .logo { top:50px; } }
#head .logo a { display:block; width:100%; height:100%; }
#head .logo svg {
  width:100%; height:100%;
  color:var(--color-text-primary); fill:currentColor;
  transition:color var(--duration-fast);
}
.nav-white #head .logo svg { color:var(--color-text-on-inverse); }
#head .logo.is-white svg { color:var(--color-text-on-inverse); transition:color var(--duration-text); }

#head .nav {
  display:none;
  position:absolute; top:30px; right:calc(var(--gutter) - 10px);
}
@media (min-width:767px) {
  #head .nav { display:flex; opacity:0; pointer-events:none; transition:opacity var(--duration-fast); }
  .heading #head .nav { opacity:1; pointer-events:auto; }
}
#head .nav a {
  position:relative; padding:15px 10px; min-width:44px; text-align:center;
  color:var(--color-text-primary); transition:color var(--duration-fast);
  opacity:0; transform:translate3d(0,40px,0);
}
.is-ready #head .nav a {
  opacity:1; transform:translate3d(0,0,0);
  transition:opacity .9s var(--ease-nav), transform .9s var(--ease-nav), color var(--duration-fast);
  transition-delay:calc(var(--i,0) * var(--stagger-tight));
}
.nav-white #head .nav a { color:var(--color-text-on-inverse); }
@media (min-width:767px) and (max-width:1240px) { #head .nav a { padding:15px 5px; } }

#head .nav a::before {
  content:""; display:block; position:absolute; bottom:12px; left:0; right:0; margin:auto;
  width:calc(100% - 20px); height:1px; background:var(--color-accent-fill);
  transform:scaleX(0); transition:transform var(--duration-slow) var(--ease-signature);
}
#head .nav a[aria-current="page"]::before { transform:scaleX(1); }
#head .nav a[aria-current="page"] { pointer-events:none; }

#head .nv-wrap { position:relative; display:block; }
#head .nv-wrap > a { display:block; }
#head .nv-sub {
  position:absolute; top:100%; left:50%; transform:translate3d(-50%,-6px,0);
  min-width:220px; padding:var(--space-3) 0;
  background:var(--color-surface-inverse);
  border:1px solid rgba(255,255,255,.22);
  text-align:left;
  opacity:0; visibility:hidden;
  transition:opacity var(--duration-fast), transform var(--duration-fast),
             visibility 0s var(--duration-fast);
}
#head .nv-wrap:hover .nv-sub,
#head .nv-wrap:focus-within .nv-sub {
  opacity:1; visibility:visible; transform:translate3d(-50%,0,0); transition-delay:0s;
}

#head .nv-sub a {
  display:block; min-width:0; padding:var(--space-2) var(--space-4);
  opacity:1; transform:none; transition:color var(--duration-fast);
  color:var(--color-text-on-inverse); text-align:left;
}
.nav-white #head .nv-sub a { color:var(--color-text-on-inverse); }
#head .nv-sub a::before { display:none; }
#head .nv-sub .en {
  display:block; font-family:var(--font-family-display);
  font-size:var(--font-size-xs); letter-spacing:.04em; line-height:1.3;
}
#head .nv-sub .ja {
  display:block; font-size:1.1rem; color:var(--color-text-muted-on-inverse);
  transition:color var(--duration-fast);
}
@media (hover:hover) {
  #head .nv-sub a:hover,
  #head .nv-sub a:hover .ja { color:var(--color-text-accent); }
}

#head .nav a i {
  display:block; font-size:var(--font-size-xs); letter-spacing:.8px;
  transition:opacity var(--duration-fast), transform var(--duration-fast);
}
#head .nav a i:last-child {
  position:absolute; top:15px; left:0; width:100%; text-align:center;
  opacity:0; color:var(--color-text-accent); transform:translate3d(0,10px,0);
}
@media (hover:hover) {
  #head .nav a:hover i { opacity:0; transform:translate3d(0,-6px,0); }
  #head .nav a:hover i:last-child { opacity:1; transform:translate3d(0,0,0); }
}
#head .nav a:focus-visible i { opacity:0; transform:translate3d(0,-6px,0); }
#head .nav a:focus-visible i:last-child { opacity:1; transform:translate3d(0,0,0); }

#btn-menu, #btn-close {
  position:absolute; top:22px; right:calc(var(--gutter) - 8px);
  padding:8px; min-width:44px; min-height:44px;
  transition:opacity var(--duration-fast);
}
@media (min-width:767px) { #btn-menu, #btn-close { top:42px; } }
@media (min-width:767px) { .heading #btn-menu { opacity:0; pointer-events:none; } }
#btn-menu.is-hide { opacity:0; pointer-events:none; }
#btn-menu .in, #btn-close .in { display:flex; align-items:center; gap:10px; }
#btn-menu .txt, #btn-close .txt {
  position:relative; display:block; font-family:var(--font-family-display);
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
}
#btn-menu .txt i, #btn-close .txt i {
  display:block; transition:opacity var(--duration-fast), transform var(--duration-fast);
}
#btn-menu .txt i:last-child, #btn-close .txt i:last-child {
  position:absolute; top:0; left:0; width:100%;
  opacity:0; color:var(--color-text-accent); transform:translate3d(0,10px,0);
}
@media (hover:hover) {
  #btn-menu:hover .txt i, #btn-close:hover .txt i { opacity:0; transform:translate3d(0,-6px,0); }
  #btn-menu:hover .txt i:last-child, #btn-close:hover .txt i:last-child { opacity:1; transform:translate3d(0,0,0); }
}
#btn-menu .ico, #btn-close .ico { display:block; width:22px; }
#btn-menu .ico span, #btn-close .ico span {
  display:block; height:1px; background:currentColor;
  transition:transform var(--duration-fast);
}
#btn-menu .ico span + span { margin-top:6px; }
.nav-white #btn-menu { color:var(--color-text-on-inverse); }
#btn-close .ico span { position:absolute; width:22px; }
#btn-close .ico span:first-child { transform:rotate(45deg); }
#btn-close .ico span:last-child  { transform:rotate(-45deg); }

#menu {
  position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity var(--duration-slow), visibility 0s linear var(--duration-slow);
}
#menu.is-rv {
  opacity:1; pointer-events:auto; visibility:visible;
  transition:opacity var(--duration-slow), visibility 0s;
}

#menu .panes {
  position:absolute; inset:0; z-index:0;
  --dx:calc(100vh * .4919);
  clip-path:polygon(calc(-1 * var(--dx)) 0, calc(-1 * var(--dx)) 0, 0 100%, 0 100%);
  transition:clip-path var(--duration-menu) var(--ease-morph);
}
#menu.is-rv .panes {
  clip-path:polygon(calc(-1 * var(--dx)) 0, 200% 0, calc(200% + var(--dx)) 100%, 0 100%);
}

#menu .pane-w { position:absolute; inset:0; z-index:0; background:var(--c-white); }
#menu .accent { position:absolute; top:0; left:0; width:100%; height:var(--menu-accent-h,24vw);
  z-index:1; background:var(--color-accent-fill); }
@media (min-width:767px) {
  #menu .accent { width:58vw; height:100%; }
}

#menu .flex { position:relative; z-index:2; padding:calc(var(--menu-accent-h,24vw) + 9vw) var(--gutter) 200px; }
@media (min-width:767px) {
  #menu .flex {
    position:absolute; bottom:35px; left:0; width:96.6%;
    padding:0 0 0 64%;
    display:block;
  }
}

#menu .flex .cell { width:100%; padding-top:0; border-top:0; }

#menu .flex a {
  display:grid; grid-template-columns:2.6em 1fr; align-items:baseline;
  padding:var(--space-3) 0; border-top:1px solid var(--color-border-muted);
}
#menu .flex .cell:first-child > a:first-child { border-top:0; }
#menu .flex .cell:last-child > a:last-child { border-bottom:1px solid var(--color-border-muted); }
#menu .flex a span { position:relative; display:block; }

#menu .flex .n {
  font-family:var(--font-family-display); font-size:var(--font-size-xs);
  letter-spacing:var(--letter-spacing-label); color:var(--color-text-accent);
}
#menu .flex .n.dash::before {
  content:""; display:inline-block; width:14px;
  border-top:1px solid var(--color-text-secondary); vertical-align:.28em;
}

#menu .flex .sub a { padding-left:var(--space-4); }
#menu .flex .sub a span i {
  font-family:var(--font-family-display); font-weight:400;
  font-size:var(--font-size-md); letter-spacing:.02em; line-height:1.4;
  color:var(--color-text-secondary);
}
@media (min-width:767px) { #menu .flex .sub a span i { font-size:1.8rem; } }
#menu .flex .sub a span i:last-child { color:var(--color-text-accent); }

#menu .flex a span {
  opacity:0; transform:translate3d(-10px,0,0);
  transition:opacity var(--duration-reveal) var(--ease-signature),
             transform var(--duration-reveal) var(--ease-signature);
  transition-delay:calc(320ms + var(--i,0) * var(--stagger-tight));
}
#menu.is-rv .flex a span { opacity:1; transform:none; }
#menu .flex a span i {
  display:block; color:var(--color-text-primary);
  font-size:var(--font-size-2xl); line-height:1.5;
  transition:opacity var(--duration-fast);
}
@media (min-width:767px) { #menu .flex a span i { font-size:3.2rem; letter-spacing:.8px; } }
#menu .flex a span i:last-child {
  position:absolute; top:0; left:0; width:100%;
  color:var(--color-text-accent); opacity:0;
}
@media (hover:hover) {
  #menu .flex a:hover span i { opacity:0; }
  #menu .flex a:hover span i:last-child { opacity:1; }
}
#menu .flex a:focus-visible span i { opacity:0; }
#menu .flex a:focus-visible span i:last-child { opacity:1; }

#menu #btn-close {
  position:absolute; top:22px; right:calc(var(--gutter) - 8px); z-index:4;
  color:var(--color-text-on-inverse);
  opacity:0; transition:opacity var(--duration-base) .5s;
}
@media (min-width:767px) {
  #menu #btn-close { top:42px; color:var(--color-text-primary); }
}
#menu.is-rv .copy, #menu.is-rv #btn-close { opacity:1; }

.common-head h2 {
  font-family:var(--font-family-display);
  font-size:var(--font-size-3xl); font-weight:400;
  line-height:var(--line-height-head);
  letter-spacing:var(--letter-spacing-head);
  text-transform:uppercase; text-indent:-2px;
  margin-bottom:var(--space-2);
}
.common-head .sub {
  font-size:var(--font-size-md); line-height:1.4;
}
@media (min-width:767px) {
  .common-head h2 { font-size:var(--font-size-4xl); text-indent:-3px; margin-bottom:26px; }
  .common-head .sub { font-size:var(--font-size-lg); line-height:1; }
}

.more-link { display:inline-flex; align-items:center; min-height:44px; margin-top:18px; }
.more-link .t { position:relative; display:inline-block; margin-right:7px; font-size:var(--font-size-sm); line-height:2; }

@media (min-width:767px) { .more-link .t { font-size:var(--font-size-lg); margin-right:11px; } }
.more-link .t i { display:block; transition:opacity var(--duration-fast), transform var(--duration-fast); }
.more-link .t i:last-child {
  position:absolute; top:0; left:0; width:100%; opacity:0;

  color:var(--ink-accent, var(--color-text-accent)); transform:translate3d(0,10px,0);
}
.more-link .ico {
  position:relative; display:inline-block; width:20px; height:20px;
  background:var(--color-accent-fill); color:var(--c-white);
}
@media (min-width:767px) { .more-link .ico { width:30px; height:30px; } }
.more-link .ico::before {
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px;
}
.more-link .ico svg {
  position:absolute; top:50%; left:50%; width:60%; height:60%;
  transform:translate(-50%,-50%);
  transition:opacity var(--duration-fast), transform var(--duration-fast);
}
.more-link .ico svg:last-child { opacity:0; transform:translate(-50%,-50%) translate(-6px,6px); }
@media (hover:hover) {
  .more-link:hover .t i { opacity:0; transform:translate3d(0,-6px,0); }
  .more-link:hover .t i:last-child { opacity:1; transform:translate3d(0,0,0); }
  .more-link:hover .ico svg { opacity:0; transform:translate(-50%,-50%) translate(6px,-6px); }
  .more-link:hover .ico svg:last-child { opacity:1; transform:translate(-50%,-50%); }
}
.more-link:active .ico { transform:scale(.96); }

.g { display:grid; grid-template-columns:1fr; row-gap:var(--grid-row-gap); }
@media (min-width:767px) {
  .g {
    grid-template-columns:repeat(var(--grid-cols), minmax(0,1fr));
    column-gap:var(--grid-col-gap);
  }
  .g-major { grid-column:span var(--grid-major); }
  .g-minor { grid-column:span var(--grid-minor); }

  .g-major-r { grid-column:calc(var(--grid-minor) + 1) / -1; }
  .g-minor-r { grid-column:1 / span var(--grid-minor); }
}

.g-rule {
  display:flex; align-items:center;
  padding-bottom:var(--space-4); margin-bottom:var(--space-6);
  border-bottom:1px solid var(--rule-c);
  font-family:var(--font-family-display);
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
  color:var(--ink-muted);
}

.g-rule .ja { margin-left:auto; font-family:var(--font-family-primary); letter-spacing:0; }

#mv {
  position:relative; background:var(--color-surface-base);
  padding-top:var(--mv-band);
  --mv-slant: calc(var(--mv-h) * var(--v-tan-major));
}

.mv-copy {
  font-size:2.2rem; font-weight:400;
  line-height:var(--line-height-tight); letter-spacing:0;
}
@media (min-width:767px) { .mv-copy { font-size:4.2vw; white-space:nowrap; } }
@media (min-width:767px) and (max-width:1240px) { .mv-copy { font-size:4vw; } }
@media (min-width:1660px) { .mv-copy { font-size:7.2rem; } }
.mv-copy .r { width:auto; white-space:nowrap; }

#copy {
  position:absolute; z-index:4;
  top:calc(var(--mv-band) + var(--mv-h) / 2); left:0; width:100%;
  transform:translateY(-50%);
  display:flex; justify-content:flex-start;
  padding-left:var(--gutter);
}

.copy-clip {
  position:absolute; z-index:5; left:0; width:100vw;
  top:var(--mv-band); height:var(--mv-h);
  clip-path:polygon(var(--mv-slant) 0, 100% 0, calc(100% - var(--mv-slant)) 100%, 0 100%);
  pointer-events:none;
}

.copy-img {
  position:absolute; top:50%; left:var(--gutter);
  transform:translateY(-50%);
  color:var(--color-text-on-inverse);
}

#mv-veil { display:none; }
.js-veil #mv-veil {
  display:block;
  position:absolute; inset:0; z-index:30;

  min-height:100vh;
  background:var(--color-surface-inverse);
  pointer-events:none;
  clip-path:polygon(
    0 0,
    calc((1 - var(--p,0)) * (100% + var(--veil-slant,0px))) 0,
    calc((1 - var(--p,0)) * (100% + var(--veil-slant,0px)) - var(--veil-slant,0px)) 100%,
    0 100%);
}
/* SPはヒーローが中央から開く演出を持つので、ベールは使わない。
   両方出すとベールが上に乗って、開く演出が見えないままになる。 */
@media (max-width:766px) {
  .js-veil #mv-veil { display:none; }
}

.veil-copy {
  position:absolute; top:calc(var(--mv-band) + var(--mv-h) / 2); left:var(--gutter);
  transform:translateY(-50%);
  color:var(--color-text-on-inverse);
}

.js-veil #mv .scroll { z-index:31; }
.veiled-arrow #mv .scroll { color:var(--color-text-on-inverse); }

.mv-veiled #head .logo svg { color:var(--color-text-on-inverse); }
.mv-veiled #head .nav a { color:var(--color-text-on-inverse); }

#mv .img { position:relative; width:100vw; height:var(--mv-h); overflow:hidden; }

#mv .img {
  clip-path:polygon(var(--mv-slant) 0, 100% 0, calc(100% - var(--mv-slant)) 100%, 0 100%);
  /* 切り抜いた結果を1枚の層として保持する。内側のズームが変わるたびに
     切り抜きを計算し直すと、iOS Safari で画面外から戻ったときにちらつく。 */
  transform:translateZ(0);
  will-change:transform;
}

@property --mv-p { syntax:"<number>"; inherits:false; initial-value:0; }
@property --mvz { syntax:"<number>"; inherits:true; initial-value:0; }

@media (max-width:766px) {

  #mv { --mv-slant:30vw; --mv-open:0px; }
  #mv .img, .copy-clip {
    --mv-p:0;
    --mv-w:calc(var(--mv-open) + (100vw - var(--mv-open)) * var(--mv-p));
    --mv-s:calc(var(--mv-slant) * (1 - var(--mv-p)));
    clip-path:polygon(
      calc(50% - var(--mv-w) / 2 + var(--mv-s) / 2) 0,
      calc(50% + var(--mv-w) / 2 + var(--mv-s) / 2) 0,
      calc(50% + var(--mv-w) / 2 - var(--mv-s) / 2) 100%,
      calc(50% - var(--mv-w) / 2 - var(--mv-s) / 2) 100%);

    animation:mv-open var(--duration-mv-open) var(--ease-open) 200ms both;
  }
}
@keyframes mv-open { from { --mv-p:0 } to { --mv-p:1 } }
#mv .img #intro-zoom { position:absolute; inset:0; width:100%; height:100%; }
#mv .img img {
  position:absolute; bottom:0; left:0; width:100%; height:100%; object-fit:cover;
  transform:translate3d(0,0,0) scale(calc(1 + var(--mvz,0)));
  backface-visibility:hidden;
  /* 画面外へ出ても層を破棄させない。iOS Safari は解放した層を
     戻ってきたときに作り直すので、そこでちらつく。 */
  will-change:transform;
}

/* 動きを減らす設定では、スクロール連動のズームも止める。
   CSSのアニメーションだけ止めても、JSが毎フレーム transform を書き換えていた。
   慣性が切れて値が飛ぶように変わるため、iOS Safari では画像がちらつく。 */
@media (prefers-reduced-motion:reduce) {
  #mv .img img { transform:translate3d(0,0,0); }
}

/* 動きを減らす設定では、開く演出そのものを持たせない。
   animation-duration を 0 にするだけでは定義が残り、再描画のたびに
   先頭（幅0）へ巻き戻って画像が消え、白い背景が見えてしまう。
   着地の形（全幅の矩形）で静止させる。 */
@media (prefers-reduced-motion:reduce) {
  #mv .img, .copy-clip {
    animation:none;
    --mv-p:1;
  }
}

#mv .scroll {
  position:absolute; z-index:11;
  left:calc(100% - var(--gutter) - 14px);
  left:round(calc(100% - var(--gutter) - 14px), 1px);
  bottom:36px;
  display:block; width:14px; height:140px;
  color:var(--color-text-primary);
}

#mv .scroll::before {
  content:""; position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  width:44px; height:100%;
}
#mv .scroll .arrow { width:100%; height:100%; overflow:visible; }
#mv .scroll .arrow path {
  stroke-dasharray:100 100;
  stroke-dashoffset:100;
  animation:scroll-draw 3.6s var(--ease-open) infinite;
}

@keyframes scroll-draw {
  0%   { stroke-dashoffset:100; }
  50%  { stroke-dashoffset:0; }
  100% { stroke-dashoffset:-100; }
}
@media (prefers-reduced-motion:reduce) {
  #mv .scroll .arrow path { animation:none; stroke-dashoffset:0; }
}
@media (hover:hover) {
  #mv .scroll:hover .arrow path { animation-duration:2.2s; }
}
@media (max-width:766px) {
  #mv .scroll { height:96px; bottom:24px; }
}

.sec { position:relative; padding:var(--section-y) 0; }
.sec-in { padding:0 var(--gutter); }

.sec--light {
  background:var(--color-surface-base); color:var(--color-text-primary);
  --ink:var(--color-text-primary);
  --ink-muted:var(--color-text-secondary);
  --rule-c:var(--color-border-muted);
  --ink-accent:var(--color-text-accent);
}
.sec--dark {
  background:var(--color-surface-inverse); color:var(--color-text-on-inverse);
  --ink:var(--color-text-on-inverse);
  --ink-muted:var(--color-text-muted-on-inverse);
  --rule-c:rgba(255,255,255,.22);
  --ink-accent:var(--color-text-accent-on-inverse);
}

.sec--accent {
  background:var(--color-accent-fill); color:var(--c-white);
  --ink:var(--c-white);
  --ink-muted:var(--c-white);
  --rule-c:rgba(255,255,255,.38);
  --ink-accent:var(--c-white);
}

.sec-ttl {
  font-family:var(--font-family-display); font-weight:400;
  font-size:clamp(4.4rem, 10vw, 11rem);
  line-height:.88; letter-spacing:.01em; text-transform:uppercase;
  text-indent:-.045em;
  margin-bottom:var(--space-8);
}
@media (min-width:767px) { .sec-ttl { margin-bottom:var(--space-9); } }

.sec-lead { font-size:var(--font-size-md); text-align:justify; }
@media (min-width:767px) { .sec-lead { font-size:var(--font-size-xl); } }
.sec-body { margin-top:1em; font-size:var(--font-size-sm); color:var(--ink-muted); text-align:justify; }
@media (min-width:767px) { .sec-body { font-size:var(--font-size-md); } }

@media (min-width:767px) {
  .about-body { align-items:center; }
  .about-img  { grid-row:1; grid-column:1 / span var(--grid-minor); }
  .about-txt  { grid-row:1; grid-column:calc(var(--grid-minor) + 1) / -1; }
}
.about-img { overflow:hidden; background:var(--color-surface-muted); }
.about-img .rv-zoom { width:100%; height:100%; }
.about-img img { width:100%; height:100%; object-fit:cover; }
@media (max-width:766px) { .about-img { height:62vw; } .about-txt { margin-top:var(--space-6); } }
@media (min-width:767px) { .about-img { height:28vw; align-self:start; } }

.img-slot {
  display:grid; place-items:center;
  background:var(--color-surface-muted);
  outline:1px dashed var(--color-border-muted); outline-offset:-1px;
}
.img-slot span {
  font-family:var(--font-family-display);
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
  color:var(--color-text-secondary);
}

.works-head { align-items:end; margin-bottom:var(--space-8); }
@media (min-width:767px) { .works-head-link { justify-self:end; } }
.works-head-link .more-link { margin-top:0; }

.news-head { align-items:baseline; }

.cards { display:grid; gap:1px; }
@media (min-width:767px) {
  .cards { grid-template-columns:repeat(auto-fit, minmax(24vw, 1fr)); }

  .cards[data-count="2"], .cards[data-count="4"] { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

.card a {
  position:relative; isolation:isolate; overflow:hidden;
  display:block; height:100%;
  padding:var(--space-6) var(--space-5) var(--space-7);
  background:var(--color-surface-base); color:var(--color-text-primary);
  transition:color var(--duration-fast);
}
@media (min-width:767px) { .card a { padding:var(--space-7) var(--space-6); } }

@property --card-wipe-p {
  syntax:'<percentage>'; inherits:false; initial-value:0%;
}
.card-wipe {
  position:absolute; z-index:-1; inset:0;

  background-color:var(--color-accent-fill);
  background-blend-mode:color, normal, normal;
  background-size:auto, auto, cover;
  background-position:center;
  background-repeat:no-repeat;

  -webkit-mask-image:linear-gradient(calc(270deg - var(--v-angle-major)),
    #000 var(--card-wipe-p), #0000 var(--card-wipe-p));
  mask-image:linear-gradient(calc(270deg - var(--v-angle-major)),
    #000 var(--card-wipe-p), #0000 var(--card-wipe-p));
  transition:--card-wipe-p var(--duration-fast) var(--ease-open);
}
@media (hover:hover) {
  .card a:hover .card-wipe { --card-wipe-p:100%; }
}
.card a:focus-visible .card-wipe { --card-wipe-p:100%; }

.card-head {
  display:flex; align-items:center; gap:var(--space-4);
  padding-bottom:var(--space-4); margin-bottom:var(--space-6);
  border-bottom:1px solid var(--color-border-muted);
  transition:border-color var(--duration-fast);
}
.card .num {
  flex:0 0 auto;
  font-family:var(--font-family-display); font-size:var(--font-size-2xl); line-height:1;
  letter-spacing:var(--letter-spacing-label);
  color:var(--color-text-accent);
  transition:color var(--duration-fast);
}
.card .sub {
  display:block; margin-top:var(--space-2);
  font-size:var(--font-size-xs); color:var(--color-text-secondary);
  transition:color var(--duration-fast);
}

.card a { display:flex; flex-direction:column; }
.sdg-marks { display:flex; gap:var(--space-2); margin-top:auto; align-self:flex-end; padding-top:var(--space-7); }

.card-foot {
  display:flex; align-items:flex-end; justify-content:flex-end;
  gap:var(--space-4); margin-top:auto; padding-top:var(--space-7);
}
.card-foot .sdg-marks { margin-top:0; align-self:auto; padding-top:0; }

@media (max-width:766px) { .card-foot { justify-content:space-between; } }

.card .en-ico { display:none; }
@media (min-width:767px) {
  .card-foot .card-ico { display:none; }

  .card a .en { display:flex; align-items:center; }
  .card .en-ico {
    display:block; flex:0 0 auto;
    width:22px; height:22px; margin-left:var(--space-3);
    opacity:0; transform:translate3d(-6px,6px,0);
    transition:opacity var(--duration-fast), transform var(--duration-fast);
  }
  .card .en-ico svg { display:block; width:100%; height:100%; }
  .card a:hover .en-ico,
  .card a:focus-visible .en-ico { opacity:1; transform:none; }
}

.card-ico {
  flex:0 0 auto; display:grid; place-items:center;
  width:20px; height:52px; color:var(--color-text-secondary);
  transition:color var(--duration-fast);
}
.card-ico svg { width:100%; height:auto; }
@media (min-width:767px) { .card-ico { width:22px; height:58px; } }
.sdg-mark { width:52px; height:52px; }
.sdg-mark img { width:100%; height:100%; display:block; }
@media (min-width:767px) { .sdg-mark { width:58px; height:58px; } }

.card .en {
  display:block; font-family:var(--font-family-display);
  font-size:2.4rem; letter-spacing:.6px; line-height:1.15;
}
@media (min-width:767px) { .card .en { font-size:2.8rem; } }
.card .ja { font-size:var(--font-size-xs); color:var(--color-text-secondary); transition:color var(--duration-fast); }
.card .txt { display:block; margin-top:var(--space-4); font-size:var(--font-size-sm); color:var(--color-text-secondary); text-align:justify; transition:color var(--duration-fast); }

@media (hover:hover) {
  .card a:hover,
  .card a:hover .num,
  .card a:hover .ja, .card a:hover .sub,
  .card a:hover .txt,
  .card a:hover .card-ico {
    color:var(--c-white);
    transition-delay:var(--duration-fast);
  }
  .card a:hover .card-head { border-color:rgba(255,255,255,.5); }
}
.card a:focus-visible,
.card a:focus-visible .num,
.card a:focus-visible .ja, .card a:focus-visible .sub,
.card a:focus-visible .txt,
.card a:focus-visible .card-ico { color:var(--c-white); transition-delay:var(--duration-fast); }
.card a:focus-visible .card-head { border-color:rgba(255,255,255,.5); }

@media (min-width:767px) {
  .cells { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cells .cell { grid-column:auto; }
}

.cells .cell { border-top:0; }
.cell {
  position:relative; display:block; color:inherit;
  padding-top:var(--space-5); border-top:1px solid var(--rule-c);
}
.cell-n {
  display:block; margin-bottom:var(--space-3);
  font-family:var(--font-family-display);
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
}
.cell-en {
  display:block; margin-bottom:var(--space-4);
  font-family:var(--font-family-display);
  font-size:clamp(2.8rem, 4.4vw, 4.4rem); line-height:1;
  letter-spacing:.01em;

}
.cell-txt { font-size:var(--font-size-sm); text-align:justify; }
@media (min-width:767px) { .cell-txt { font-size:var(--font-size-md); } }

.cell-ico {
  position:absolute; top:var(--space-5); right:0; width:16px; height:16px;
  opacity:0; transform:translate3d(-10px,10px,0);
  transition:opacity var(--duration-fast), transform var(--duration-fast);
}
.cell-ico svg { width:100%; height:100%; }

@media (hover:hover) {
  .cell:hover .cell-ico { opacity:1; transform:translate3d(0,0,0); }
}
.cell:focus-visible .cell-ico { opacity:1; transform:translate3d(0,0,0); }

.feed li { border-top:1px solid var(--rule-c); }
.feed li:last-child { border-bottom:1px solid var(--rule-c); }
.feed a {
  align-items:baseline; row-gap:var(--space-2);
  padding:var(--space-5) 0; min-height:44px;
}
@media (min-width:767px) {
  .feed-date { grid-column:span 2; }
  .feed-t    { grid-column:span 9; }
  .feed-ico  { grid-column:span 2; justify-self:end; align-self:center; }
}
.feed-date {
  font-family:var(--font-family-display);
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
  color:var(--ink-muted);
}
.feed-t { position:relative; display:block; font-size:var(--font-size-sm); }
@media (min-width:767px) { .feed-t { font-size:var(--font-size-lg); } }
.feed-t i { display:block; transition:opacity var(--duration-fast), transform var(--duration-fast); }
.feed-t i:last-child {
  position:absolute; top:0; left:0; width:100%; opacity:0;
  color:var(--ink-accent); transform:translate3d(0,10px,0);
}
.feed-ico { width:16px; height:16px; opacity:0; transform:translate3d(-10px,10px,0); transition:opacity var(--duration-fast), transform var(--duration-fast); }
.feed-ico svg { width:100%; height:100%; }
@media (max-width:766px) { .feed-ico { display:none; } }
@media (hover:hover) {
  .feed a:hover .feed-t i { opacity:0; transform:translate3d(0,-6px,0); }
  .feed a:hover .feed-t i:last-child { opacity:1; transform:translate3d(0,0,0); }
  .feed a:hover .feed-ico { opacity:1; transform:translate3d(0,0,0); }
}
.feed a:focus-visible .feed-ico { opacity:1; transform:translate3d(0,0,0); }
.feed-more { margin-top:var(--space-6); }

.recruit-img { overflow:hidden; background:var(--color-surface-muted); }
.recruit-img .rv-zoom { width:100%; height:100%; }
.recruit-img img { width:100%; height:100%; object-fit:cover; }
@media (max-width:766px) { .recruit-img { height:62vw; } }
@media (min-width:767px) { .recruit-img { height:28vw; align-self:start; } }
@media (min-width:767px) { .recruit-txt { align-self:center; } }

.f-cta {
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6);
  padding:var(--space-9) var(--gutter) var(--space-8);
  background:var(--color-surface-inverse);
  color:var(--color-text-on-inverse);
}

@media (min-width:767px) { .f-cta { padding:var(--space-11) var(--gutter) calc(var(--space-11) + 5px); } }

.f-cta-wipe {
  position:absolute; z-index:-1;
  top:-220%; left:-50%; width:200%; height:540%;
  background:var(--color-accent-fill);
  transform:translate3d(110%,0,0) rotate(calc(-1 * var(--v-angle-major)));
  transition:transform var(--duration-base) var(--ease-open);
}
@media (hover:hover) {
  .f-cta:hover .f-cta-wipe { transform:translate3d(0,0,0) rotate(calc(-1 * var(--v-angle-major))); }
}
.f-cta:focus-visible .f-cta-wipe { transform:translate3d(0,0,0) rotate(calc(-1 * var(--v-angle-major))); }

.f-cta .en {
  display:block; font-family:var(--font-family-display);
  font-size:clamp(var(--font-size-4xl), 9vw, 12rem); line-height:.95;
  letter-spacing:.02em; text-transform:uppercase;
}
.f-cta .ja {
  display:block; margin-top:var(--space-3);
  font-size:var(--font-size-md);
}
@media (min-width:767px) { .f-cta .ja { font-size:var(--font-size-xl); } }
.f-cta .lead {
  display:block; margin-top:var(--space-2);
  font-size:var(--font-size-sm); color:var(--color-text-muted-on-inverse);
  transition:color var(--duration-fast);
}
@media (hover:hover) { .f-cta:hover .lead { color:var(--color-text-on-inverse); } }

.f-cta-ico {
  flex:0 0 auto; display:grid; place-items:center;

  width:56px; height:56px;
  border:1px solid currentColor;
  transition:transform var(--duration-base) var(--ease-signature);
}
@media (min-width:767px) { .f-cta-ico { width:80px; height:80px; } }
.f-cta-ico svg { width:40%; height:40%; }
@media (hover:hover) {
  .f-cta:hover .f-cta-ico { transform:translate3d(10px,-10px,0); }
}

#foot { background:var(--color-surface-inverse); color:var(--color-text-on-inverse); }
#foot .in { padding:var(--space-8) var(--gutter) var(--space-7); }
#foot .logo { width:120px; margin-bottom:var(--space-8); }
@media (min-width:767px) { #foot .logo { width:160px; } }
#foot .logo svg { width:100%; height:auto; aspect-ratio:205.79/94.18; fill:currentColor; }
#foot .flex1 { display:grid; gap:var(--space-7); }

@media (min-width:767px) {
  #foot .flex1 {
    grid-template-columns:repeat(var(--grid-cols), minmax(0,1fr));
    column-gap:var(--grid-col-gap); row-gap:var(--space-6);
  }
  #foot .flex1 > .cell     { grid-column:span 3; }

  #foot .flex1 > .cell.adr { grid-column:span 5; }
  #foot .flex1 > .cell.sns { grid-column:12 / 13; place-self:center end; }
}

#foot .cell a { display:block; padding:var(--space-2) 0; min-height:44px; font-size:var(--font-size-xs); transition:color var(--duration-fast); }
@media (min-width:767px) { #foot .cell a { font-size:var(--font-size-sm); } }

#foot .nav-ttl {
  padding:var(--space-3) 0;
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);

  color:var(--color-text-muted-on-inverse);
}
@media (min-width:767px) { #foot .nav-ttl { display:none; } }

#foot .cell.sns { padding-top:0; border-top:0; }

@media (max-width:766px) {
  #foot .flex1 { grid-template-columns:repeat(2,minmax(0,1fr)); }

  #foot .flex1 > .cell { padding-top:0; }
  #foot .flex1 > .cell.adr { grid-column:1 / -1; }
  #foot .flex1 > .cell.sns { grid-column:1 / -1; justify-self:center; }
}

#foot .sns a {
  position:relative; display:block;
  width:24px; height:24px; min-height:0; padding:0;
}
#foot .sns svg { display:block; width:100%; height:100%; fill:currentColor; }
#foot .sns a::before {
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px;
}
@media (hover:hover) { #foot .cell a:hover { color:var(--color-text-accent-on-inverse); } }
#foot .adr { font-size:var(--font-size-xs); color:var(--color-text-muted-on-inverse); }
#foot .adr .ttl { color:var(--color-text-on-inverse); margin-top:var(--space-4); }
#foot .adr .ttl:first-child { margin-top:0; }
#foot .adr a { display:inline; padding:0; min-height:0; }
#foot .copy {
  margin-top:var(--space-9); padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--font-family-display);
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
  color:var(--color-text-muted-on-inverse);
}

@media (max-width:766px) { #foot .copy { text-align:center; margin-top:var(--space-7); } }

.common-layout .s { background:var(--color-surface-base); }

.page-head {
  background:var(--color-surface-inverse); color:var(--color-text-on-inverse);
  --ink:var(--color-text-on-inverse);
  --ink-muted:var(--color-text-muted-on-inverse);
  --rule-c:rgba(255,255,255,.22);
  --ink-accent:var(--color-text-accent-on-inverse);
}
.page-head-in { padding:0 0 var(--space-8); }
@media (min-width:767px) { .page-head-in { padding-bottom:var(--space-9); } }
.page-head .crumbs { color:var(--ink-muted); }
.page-head .crumbs li::after { color:rgba(255,255,255,.3); }
.page-head .crumbs [aria-current="page"] { color:var(--color-text-on-inverse); }
.page-head .crumbs { padding-bottom:var(--space-6); }
@media (min-width:767px) { .page-head .crumbs { padding-bottom:var(--space-7); } }

@media (min-width:767px) {
  .page-head-row { align-items:center; }

  .page-head-row .ph-img     { grid-row:1; grid-column:1 / span var(--grid-major); }
  .page-head-row .ph-ttl     { grid-row:1; grid-column:calc(var(--grid-major) + 1) / -1; }

  .page-head-row:not(:has(.ph-img)) .ph-ttl { grid-column:6 / -1; }
}

.page-head-row { margin-top:var(--space-8); padding:0 var(--gutter); }
@media (min-width:767px) { .page-head-row { margin-top:var(--space-9); } }

.ph-img {
  --ph-h:62vw; overflow:hidden; background:#1a1a1a; height:var(--ph-h);
  clip-path:polygon(calc(var(--ph-h) * var(--v-tan-major)) 0, 100% 0,
                    calc(100% - var(--ph-h) * var(--v-tan-major)) 100%, 0 100%);
}
@media (min-width:767px) { .ph-img { --ph-h:26vw; } }

.ph-ttl { text-align:right; }
.ph-lead {
  margin-top:var(--space-4);
  font-size:var(--font-size-xs); line-height:1.9;
  color:var(--ink-muted); text-wrap:balance;
}
@media (min-width:767px) { .ph-lead { margin-top:var(--space-5); font-size:var(--font-size-sm); } }

.ph-img .rv-zoom { width:100%; height:100%; }
.ph-img img { width:100%; height:100%; object-fit:cover; }
@media (max-width:766px) { .page-head-row .ph-ttl { margin-top:var(--space-6); } }

.common-ttl { text-align:right; }
.common-ttl .en, .common-ttl .ja { display:block; overflow:hidden; font-weight:400; }
.common-ttl .en {
  font-family:var(--font-family-display);
  font-size:var(--sub-ttl); letter-spacing:.14vw; line-height:1.1;
  margin-bottom:1.4vw;
}
.common-ttl .ja { font-size:4.7vw; letter-spacing:.02vw; line-height:1.4; }
@media (min-width:767px) {
  .common-ttl .en { font-size:var(--sub-ttl); letter-spacing:.1vw; margin-bottom:1vw; }
  .common-ttl .ja { font-size:1.62vw; }
}
.common-ttl i { display:block; transform:translate3d(0,100%,0); }
.common-ttl .en i { transition:transform var(--duration-menu) var(--ease-signature); }
.common-ttl .ja i { transition:transform var(--duration-text) var(--ease-signature); }
.common-ttl .is-rv i { transform:translate3d(0,0,0); }

.head-layout { padding:40px var(--gutter) 0; }
@media (min-width:767px) {
  .head-layout {
    padding:56px var(--gutter) 72px 0;
    display:flex; flex-direction:row-reverse; justify-content:space-between;
  }
}
.head-layout .common-ttl { margin:0 0 30px; }
@media (min-width:767px) { .head-layout .common-ttl { margin:-.2vw 0 0; } }
.head-layout .img { position:relative; overflow:hidden; background:var(--color-surface-muted); }
@media (max-width:766px) { .head-layout .img { height:var(--sub-img-h); margin-top:var(--space-7); } }
@media (min-width:767px) { .head-layout .img { width:var(--sub-img-w); height:var(--sub-img-h); } }
.head-layout .img .rv-zoom { position:absolute; inset:0; }
.head-layout .img img { width:100%; height:100%; object-fit:cover; }

.crumbs {
  padding:100px var(--gutter) 0;
  font-size:var(--font-size-xs); color:var(--color-text-secondary);
}
@media (min-width:767px) { .crumbs { padding-top:130px; } }
.crumbs ol { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.crumbs li::after { content:"/"; margin-left:var(--space-2); color:var(--color-border-muted); }
.crumbs li:last-child::after { content:none; }
.crumbs a { text-decoration:underline; text-underline-offset:3px; }
.crumbs [aria-current="page"] { color:var(--color-text-primary); }

.page-body { counter-reset:prose-sec; }
.prose { padding:var(--section-y) var(--gutter); }

.prose--head { padding-bottom:var(--space-7); font-size:2.2rem; font-weight:500; line-height:1.35; }
@media (min-width:767px) {
  .prose--head { font-size:var(--font-size-3xl); }
}

@media (min-width:767px) {
  .prose, .spec, .list-common, .article, .form, .pagenation, .works-secs {
    display:grid; grid-template-columns:repeat(var(--grid-cols), minmax(0,1fr));
    column-gap:var(--grid-col-gap);
  }
  .prose > *, .spec > *, .list-common > *, .article > *, .form > *, .pagenation > *, .works-secs > * {
    grid-column:6 / span var(--grid-major);
  }

  .prose > .prose-sec {
    grid-column:1 / -1;
    display:grid; grid-template-columns:subgrid;
    align-items:start;
  }

  .prose-sec > .sec-n      { grid-column:1 / span 5; grid-row:1; margin-bottom:0; }
  .prose-sec > h2          { grid-column:1 / span 5; grid-row:2; }
  .prose-sec > .prose-body { grid-column:6 / span var(--grid-major); grid-row:2; }

  .prose > .note { grid-column:1 / span 4; align-self:start; }

  #page-contact .prose > *,
  #page-contact .form > * { grid-column:4 / span var(--grid-major); }
}

.prose-sec {
  margin-top:var(--space-9);
  padding-top:var(--space-5); border-top:1px solid var(--color-border-muted);
}
.prose-sec:first-child { margin-top:0; padding-top:0; border-top:0; }

.prose-sec--solo { padding-bottom:0; }

.jobs { padding:0 var(--gutter) var(--section-y); counter-reset:job; }
.job { border-top:1px solid var(--color-border-muted); }
.job:last-child { border-bottom:1px solid var(--color-border-muted); }

.job-ttl { margin:0; font-size:inherit; font-weight:inherit; line-height:inherit; }
.job .acc-btn {
  position:relative; display:grid; width:100%; text-align:left;
  grid-template-columns:auto 1fr; gap:var(--space-1) var(--space-5);
  padding:var(--space-5) calc(var(--space-6) + 8px) var(--space-5) 0;
}
@media (min-width:767px) {

  .job .acc-btn {
    grid-template-columns:auto 1fr auto; align-items:baseline;
    gap:var(--space-6); padding-top:var(--space-6); padding-bottom:var(--space-6);
  }
}
.job .n {
  font-family:var(--font-family-display); font-size:var(--font-size-xs);
  letter-spacing:var(--letter-spacing-label); color:var(--color-text-accent);
}
.job .n::before { counter-increment:job; content:counter(job, decimal-leading-zero); }

.job .nm { font-size:var(--font-size-md); font-weight:500; line-height:1.5;
  word-break:keep-all; overflow-wrap:break-word; }
@media (min-width:767px) { .job .nm { font-size:2rem; } }
.job .mt {
  grid-column:2; font-size:var(--font-size-xs);
  letter-spacing:var(--letter-spacing-label); color:var(--color-text-secondary);
}
@media (min-width:767px) { .job .mt { grid-column:auto; } }

.job .acc-btn::after {
  content:""; position:absolute; right:0; top:50%;
  width:8px; height:8px; margin-top:-6px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); transition:transform var(--duration-fast);
}
.job.is-opened .acc-btn::after { transform:rotate(-135deg) translateY(-4px); }
@media (hover:hover) { .job .acc-btn:hover .nm { color:var(--color-text-accent); } }

.job .acc-panel {
  overflow:hidden; height:0; visibility:hidden;
  transition:visibility 0s var(--duration-base);
}
.job.is-opened .acc-panel { visibility:visible; transition-delay:0s; }

.job .spec { display:block; padding:0 0 var(--space-7); }
.job .spec > div:first-child { border-top:0; }

@media (min-width:767px) {
  .job .spec dt { flex:0 0 calc((100% - 6 * var(--grid-col-gap)) / 7 + var(--grid-col-gap)); }

  .job .spec dd { font-size:var(--font-size-md); }
}

.job .spec > div:first-child { padding-top:var(--space-5); }
.prose h2 {
  font-size:2.2rem; font-weight:500; line-height:1.35;
  margin:0 0 var(--space-6);
}

.sec-n {
  display:block; margin-bottom:var(--space-3);
  font-family:var(--font-family-display); font-weight:400;
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
  color:var(--color-text-accent);
}
.sec-n::before {
  counter-increment:prose-sec;
  content:counter(prose-sec, decimal-leading-zero);
}

/* 採用ページは通し番号を出さない。目次・本文の両方。他ページの番号はそのまま。 */
#page-recruit #fit-box .filter .n,
#page-recruit .sec-n { display:none; }

@media (min-width:767px) { .prose h2 { font-size:var(--font-size-3xl); margin-bottom:0; } }

.article .prose { display:block; padding:0; counter-reset:none; }
.article .prose > h2::before { content:none; }

.prose h3 { font-size:var(--font-size-lg); font-weight:500; margin:var(--space-7) 0 var(--space-3); }
@media (min-width:767px) { .prose h3 { font-size:2.4rem; } }
.prose p { margin-bottom:var(--space-5); text-align:justify; }
@media (min-width:767px) { .prose p { font-size:var(--font-size-lg); } }
.prose ul { margin-bottom:var(--space-5); }
.prose ul li { position:relative; padding-left:var(--space-4); margin-bottom:var(--space-2); }
.prose ul li::before {
  content:""; position:absolute; top:.7em; left:0;
  width:6px; height:6px; background:var(--color-accent-fill);
}

.points { margin:var(--space-6) 0 0; counter-reset:point; display:grid; gap:var(--space-4); }
.prose .points li {
  margin:0; padding:var(--space-6);
  border:1px solid var(--color-border-muted);
}
.prose .points li::before { display:none; }
.points .n {
  display:block; margin-bottom:var(--space-2);
  font-family:var(--font-family-display); font-size:var(--font-size-xs);
  letter-spacing:var(--letter-spacing-label); color:var(--color-text-accent);
}
.points .n::before { counter-increment:point; content:counter(point, decimal-leading-zero); }
.prose .points h3 { margin:0 0 var(--space-3); font-size:var(--font-size-lg); }
@media (min-width:767px) { .prose .points h3 { font-size:2rem; } }
.prose .points p { margin:0; }
.prose a { color:var(--color-text-accent); text-decoration:underline; text-underline-offset:3px; }
.prose .note { font-size:var(--font-size-sm); color:var(--color-text-secondary); }

.spec { padding:0 var(--gutter) var(--section-y); }
.spec > div {
  padding:var(--space-5) 0; border-top:1px solid var(--color-border-muted);
}
@media (min-width:767px) { .spec > div { display:flex; gap:var(--space-6); padding:var(--space-6) 0; } }
.spec dt {
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
  color:var(--color-text-secondary); margin-bottom:var(--space-2);
}

@media (min-width:767px) {
  .spec dt {
    flex:0 0 calc((100% - 6 * var(--grid-col-gap)) / 7 * 2 + var(--grid-col-gap));
    margin-bottom:0;
  }
}
.spec dd { font-size:var(--font-size-sm); }
@media (min-width:767px) { .spec dd { font-size:var(--font-size-lg); } }
.spec dd a { color:var(--color-text-accent); text-decoration:underline; text-underline-offset:3px; }

.list-layout { position:relative; padding:var(--section-y) 0; }
#fit-area { position:relative; padding:0 var(--gutter); }
@media (min-width:767px) { #fit-area { padding:0; } }

#fit-box { display:none; }
@media (min-width:767px) {
  #fit-box {
    display:block; position:fixed; top:0; left:var(--gutter);

    width:calc(4 * var(--grid-col) + 3 * var(--grid-col-gap));
    z-index:2; will-change:transform;
  }
}
#fit-box .filter {
  position:relative; display:flex; align-items:baseline; padding:var(--space-3) 0;
  font-size:var(--font-size-sm); color:var(--color-text-secondary);
  border-bottom:1px solid var(--color-border-muted);
  transition:color var(--duration-fast);
}
#fit-box .filter[aria-current="page"] { color:var(--color-text-accent); pointer-events:none; }
@media (hover:hover) { #fit-box .filter:hover { color:var(--color-text-accent); } }

#sp-toggle { position:relative; margin-bottom:var(--space-6); }
@media (min-width:767px) { #sp-toggle { display:none; } }
#sp-toggle .current {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; min-height:44px; padding:var(--space-3) 0;
  border-top:1px solid var(--color-border-muted);
  border-bottom:1px solid var(--color-border-muted);
  font-size:var(--font-size-sm);
}
#sp-toggle .current::after {
  content:""; width:8px; height:8px; margin-right:4px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--duration-fast);
}
#sp-toggle.is-opened .current::after { transform:rotate(-135deg) translateY(-2px); }
#sp-toggle .drawer { overflow:hidden; height:0; }
#sp-toggle .drawer .item {
  display:block; min-height:44px; padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-border-muted); font-size:var(--font-size-sm);
}

.list-common { margin:0 auto; }
@media (min-width:767px) { .list-common { padding-left:var(--gutter); padding-right:var(--gutter); } }

.list-common .link {
  display:block; padding:30px 0;
  border-top:1px solid var(--color-border-muted);
  color:var(--color-text-primary);
}
@media (min-width:767px) { .list-common .link { padding:40px 0; } }
.list-common .link .meta {
  position:relative; display:block; margin-bottom:6px;
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
  color:var(--color-text-secondary);
}
.list-common .link .meta i { position:relative; display:inline-block; margin-right:16px; }
.list-common .link .meta i:nth-child(2)::before {
  content:""; position:absolute; top:4px; left:-11px;
  width:1px; height:10px; background:var(--color-border-muted);
}
.list-common .link .meta svg {
  position:absolute; top:0; right:0; width:16px; height:16px;
  color:var(--color-accent-fill); opacity:0;
  transform:translate3d(-10px,10px,0);
  transition:opacity var(--duration-fast), transform var(--duration-fast);
}
.list-common .link p { font-size:var(--font-size-sm); transition:color var(--duration-fast); }
@media (min-width:767px) { .list-common .link p { font-size:var(--font-size-xl); } }
@media (hover:hover) {
  .list-common .link:hover .meta i, .list-common .link:hover p { color:var(--color-text-accent); }
  .list-common .link:hover .meta svg { opacity:1; transform:translate3d(0,0,0); }
}
.list-common .link:focus-visible .meta svg { opacity:1; transform:translate3d(0,0,0); }
.list-common .empty { padding:var(--space-8) 0; color:var(--color-text-secondary); }

.pagenation { padding:0 var(--gutter) var(--space-9); }
.pagenation .pg-in {
  display:flex; align-items:center; justify-content:center; gap:var(--space-3);
}
@media (min-width:767px) {
  .pagenation { padding:0 var(--gutter) var(--space-10); }
  .pagenation .pg-in { justify-content:flex-start; }
}
.pagenation a, .pagenation span {
  display:grid; place-items:center; min-width:44px; min-height:44px;
  font-family:var(--font-family-display); font-size:var(--font-size-sm);
  border:1px solid var(--color-border-muted);
}
.pagenation [aria-current="page"] {
  background:var(--color-accent-fill); border-color:var(--color-accent-fill);
  color:var(--c-white);
}

.article { padding:var(--section-y) var(--gutter); }

.article .meta {
  display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4);
  font-size:var(--font-size-xs); letter-spacing:var(--letter-spacing-label);
  color:var(--color-text-secondary);
}

.article .cat {
  padding:2px 10px; background:var(--color-surface-muted);
  color:var(--color-text-accent);
}
.article h1 {
  font-size:var(--font-size-2xl); font-weight:500; line-height:1.5;
  margin-bottom:var(--space-6); padding-bottom:var(--space-5);
  border-bottom:1px solid var(--color-border-muted);
}
@media (min-width:767px) { .article h1 { font-size:3.8rem; } }
.article .thumb { margin-bottom:var(--space-6); background:var(--color-surface-muted); }
.article .back { display:flex; justify-content:center; margin-top:var(--space-9); }

.work-secs { padding:var(--section-y) var(--gutter); }

.work-sec + .work-sec { margin-top:var(--space-9); padding-top:var(--space-9); border-top:1px solid var(--color-border-muted); }
@media (min-width:767px) {
  .work-sec { align-items:center; }
  .work-sec-img  { grid-row:1; grid-column:1 / span var(--grid-minor); }
  .work-sec-body { grid-row:1; grid-column:calc(var(--grid-minor) + 1) / -1; }
  .work-sec--flip .work-sec-img  { grid-column:calc(var(--grid-major) + 1) / -1; }
  .work-sec--flip .work-sec-body { grid-column:1 / span var(--grid-major); }
  .work-sec + .work-sec { margin-top:var(--space-10); padding-top:var(--space-10); }
}

.work-sec-img {
  --ws-h:56vw; height:var(--ws-h); overflow:hidden; background:var(--color-surface-muted);
}
@media (min-width:767px) { .work-sec-img { --ws-h:24vw; } }
.work-sec-img img { width:100%; height:100%; object-fit:cover; }
@media (max-width:766px) { .work-sec-body { margin-top:var(--space-6); } }
.work-sec h2 {
  font-size:2.2rem; font-weight:500; line-height:1.35; margin-bottom:var(--space-5);
}

/* 折り返すときは行の長さを揃える。末尾に1〜2文字だけ落ちるのを防ぐ。
   非対応ブラウザは従来どおり折り返す。 */
.prose h2, .prose--head, .work-sec h2 { text-wrap:balance; }
@media (min-width:767px) { .work-sec h2 { font-size:var(--font-size-3xl); } }
.work-sec p { text-align:justify; }
.work-sec p + p { margin-top:var(--space-5); }
@media (min-width:767px) { .work-sec p { font-size:var(--font-size-lg); } }

.work-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-5) var(--space-8); }
@media (min-width:767px) { .work-links { grid-column:1 / -1; } }

.more-link--ext {
  padding:var(--space-4) var(--space-7);
  background:var(--color-surface-inverse); color:var(--color-text-on-inverse);
  transform:skewX(calc(-1 * var(--v-angle-major)));
  transition:background var(--duration-fast), color var(--duration-fast);
}
.more-link--ext > * { transform:skewX(var(--v-angle-major)); }

.prose .more-link--ext,
.prose .more-link--ext .t i { color:var(--color-text-on-inverse); text-decoration:none; }

.more-link--ext .t i:last-child { color:var(--color-text-accent-on-inverse); }
@media (hover:hover) {
  .more-link--ext:hover { background:var(--color-accent-fill); }
  .more-link--ext:hover .t i:last-child { color:var(--c-white); }
}

.works-secs { padding:var(--section-y) 0; }
@media (min-width:767px) { .works-secs { padding-left:var(--gutter); padding-right:var(--gutter); } }
.works-sec + .works-sec {
  margin-top:var(--section-y); padding-top:var(--section-y);
  border-top:1px solid var(--color-border-muted);
}
.works-sec .num {
  font-family:var(--font-family-display); font-size:var(--font-size-xs);
  letter-spacing:var(--letter-spacing-label); color:var(--color-text-accent);
  margin-bottom:var(--space-3);
}
.works-sec h2 { margin:0 0 var(--space-6); }
.works-sec .en {
  display:block; font-family:var(--font-family-display); font-weight:400;
  font-size:var(--font-size-3xl); line-height:1.15;
}
@media (min-width:767px) { .works-sec .en { font-size:var(--font-size-4xl); } }
.works-sec .ja { display:block; font-size:var(--font-size-xs); color:var(--color-text-secondary); }

.works-sec-img { margin:0 0 var(--space-6); --ws-h:52vw; height:var(--ws-h); overflow:hidden; }
@media (min-width:767px) { .works-sec-img { --ws-h:26vw; } }
.works-sec-img img { width:100%; height:100%; object-fit:cover; }
.works-sec .txt { font-size:var(--font-size-sm); text-align:justify; margin-bottom:var(--space-6); }
@media (min-width:767px) { .works-sec .txt { font-size:var(--font-size-lg); } }

.works-sec .sdg-marks { justify-content:flex-end; margin-bottom:var(--space-6); padding-top:0; }

.works-sec .more-link { display:flex; width:fit-content; margin-left:auto; }

.work-sec-body .more-link {
  display:flex; width:fit-content;
  margin:var(--space-7) auto 0;
}

#fit-box .filter .n {
  flex:0 0 auto; min-width:2.4em;
  font-family:var(--font-family-display); color:var(--color-text-accent);
}
#fit-box .filter .en {
  font-family:var(--font-family-display); letter-spacing:.02em;
  color:var(--color-text-primary); transition:color var(--duration-fast);
}
#fit-box .filter .ja { font-size:var(--font-size-xs); }
#fit-box .filter .ja::before {
  content:""; display:inline-block; width:14px; margin:0 8px;
  border-top:1px solid var(--color-border-strong);
  vertical-align:.25em;
}
@media (hover:hover) { #fit-box .filter:hover .en { color:var(--color-text-accent); } }

@media (min-width:767px) {
  #fit-area .prose > .prose-sec {
    display:block; grid-column:6 / span var(--grid-major);
  }
  #fit-area .prose-sec > .sec-n { margin-bottom:var(--space-3); }
  #fit-area .prose-sec > h2     { margin-bottom:var(--space-6); }

  #fit-area .prose > .note { grid-column:6 / span var(--grid-major); }

  #fit-area > .jobs {
    display:grid; grid-template-columns:repeat(var(--grid-cols), minmax(0,1fr));
    column-gap:var(--grid-col-gap);
  }
  #fit-area > .jobs > .job { grid-column:6 / span var(--grid-major); }
}

@media (max-width:766px) {
  #fit-area > .prose,
  #fit-area > .spec,
  #fit-area > .jobs,
  #fit-area > .prose--head { padding-left:0; padding-right:0; }
}

@media (max-width:766px) {
  #fit-box.fit-box--flow {

    display:grid; grid-template-columns:1fr 1fr; gap:0;
    margin-bottom:var(--space-8); transform:none !important;
  }
  #fit-box.fit-box--flow .filter {
    display:block; padding:var(--space-4) var(--space-4) var(--space-5) 0;
    border:0;
  }

  #fit-box.fit-box--flow .filter:nth-child(odd)  { border-right:1px solid var(--color-border-muted); }
  #fit-box.fit-box--flow .filter:nth-child(even) { padding-left:var(--space-4); padding-right:0; }
  #fit-box.fit-box--flow .filter:not(:nth-last-child(-n+2)) { border-bottom:1px solid var(--color-border-muted); }

  #fit-box.fit-box--flow .filter:last-child:nth-child(odd) { border-right:0; }
  #fit-box.fit-box--flow .filter .n {
    display:block; min-width:0; margin-bottom:var(--space-1);
  }
  #fit-box.fit-box--flow .filter .en {
    display:block; font-size:var(--font-size-sm); line-height:1.25;
  }
  #fit-box.fit-box--flow .filter .ja {
    display:block; margin-top:var(--space-1);
    font-size:var(--font-size-xs); color:var(--color-text-secondary);
  }
  #fit-box.fit-box--flow .filter .ja::before { content:none; }

  /* 項目が3つ以下なら1行に並べる。2列のままだと最後の1つが下の行に取り残される。
     件数は事業データで変わるので、件数そのものではなく「4つ目があるか」で切り替える。
     :has() 非対応の環境は2列のまま＝表示は崩れない。 */
  #fit-box.fit-box--flow:not(:has(> .filter:nth-child(4))) {
    grid-template-columns:repeat(3, 1fr);
  }
  /* 2つしかないときは2列。3列のままだと右が1列分空く */
  #fit-box.fit-box--flow:not(:has(> .filter:nth-child(3))) {
    grid-template-columns:repeat(2, 1fr);
  }
  #fit-box.fit-box--flow:not(:has(> .filter:nth-child(4))) .filter {
    padding-left:var(--space-2); padding-right:var(--space-2);
    text-align:center;
    border-right:1px solid var(--color-border-muted);
    border-bottom:0;
  }
  #fit-box.fit-box--flow:not(:has(> .filter:nth-child(4))) .filter:last-child {
    border-right:0;
  }
}

.works-list { padding:var(--section-y) 0; }
.works-list .row { border-top:1px solid var(--color-border-muted); }
.works-list .row a { display:block; padding:var(--space-6) var(--gutter); }
@media (min-width:767px) {
  .works-list .row a {
    display:flex; align-items:center; gap:var(--space-7);
    padding:var(--space-7) var(--gutter);
    transition:background var(--duration-fast);
  }
}
@media (min-width:767px) and (hover:hover) {
  .works-list .row a:hover { background:var(--color-surface-muted); }
}
.works-list .row .num {
  font-family:var(--font-family-display); font-size:var(--font-size-xs);
  letter-spacing:var(--letter-spacing-label); color:var(--color-text-accent);
}
@media (min-width:767px) { .works-list .row .num { flex:0 0 4vw; } }
.works-list .row .ttl { flex:0 0 24vw; }
.works-list .row .en {
  display:block; font-family:var(--font-family-display);
  font-size:var(--font-size-xl); line-height:1.2;
}
@media (min-width:767px) { .works-list .row .en { font-size:var(--font-size-2xl); } }
.works-list .row .ja { display:block; font-size:var(--font-size-xs); color:var(--color-text-secondary); }
.works-list .row .txt { flex:1; font-size:var(--font-size-sm); text-align:justify; margin-top:var(--space-3); }
@media (min-width:767px) { .works-list .row .txt { margin-top:0; } }

.form { padding:var(--section-y) var(--gutter); }

#page-contact .form { padding-top:var(--space-8); }

.form .field { margin-bottom:var(--space-6); }
.form label { display:block; font-size:var(--font-size-sm); margin-bottom:var(--space-2); }
.form .req { margin-left:var(--space-2); padding:1px 8px; font-size:1.1rem; background:var(--color-accent-fill); color:var(--c-white); }
.form input, .form textarea, .form select {
  width:100%; padding:var(--space-3) var(--space-4);
  font:inherit;

  font-size:16px;
  color:var(--color-text-primary); background:var(--color-surface-base);
  border:1px solid var(--color-border-strong); border-radius:var(--radius-none);
  transition:border-color var(--duration-fast);
}
.form textarea { min-height:200px; resize:vertical; }
.form input:focus, .form textarea:focus, .form select:focus { border-color:var(--color-accent-fill); }
.form .hint { margin-top:var(--space-2); font-size:var(--font-size-xs); color:var(--color-text-secondary); }
.form .error { margin-top:var(--space-2); font-size:var(--font-size-xs); color:#c8380f; }
.form .submit {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  min-height:56px; padding:0 var(--space-8);
  background:var(--color-surface-inverse); color:var(--color-text-on-inverse);
  font-size:var(--font-size-lg); transition:background var(--duration-fast);
}
@media (hover:hover) { .form .submit:hover { background:var(--color-accent-fill); } }
.form .submit:disabled { opacity:.4; cursor:not-allowed; }

.article .adjacent {
  display:flex; justify-content:space-between; gap:var(--space-4);
  margin-top:var(--space-8); padding-top:var(--space-5);
  border-top:1px solid var(--color-border-muted);
}
.article .adjacent a {
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--font-size-sm); color:var(--color-text-secondary);
  transition:color var(--duration-fast);
}
.article .adjacent a[rel="prev"]::before { content:"←"; margin-right:var(--space-2); }
.article .adjacent a[rel="next"]::after  { content:"→"; margin-left:var(--space-2); }
.article .adjacent a[rel="next"]:only-child { margin-left:auto; }
@media (hover:hover) { .article .adjacent a:hover { color:var(--color-text-accent); } }

a.cat { transition:background var(--duration-fast), color var(--duration-fast); }
@media (hover:hover) {
  a.cat:hover { background:var(--color-accent-fill); color:var(--c-white); }
}