@font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/nsjp-400.woff2?v=fb788adc") format("woff2"); }
@font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 500; font-display: block; src: url("fonts/nsjp-500.woff2?v=fb788adc") format("woff2"); }
@font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 700; font-display: block; src: url("fonts/nsjp-700.woff2?v=fb788adc") format("woff2"); }
@font-face { font-family: "Zen Kaku Gothic Antique"; font-style: normal; font-weight: 500; font-display: block; src: url("fonts/zkga-500.woff2?v=fb788adc") format("woff2"); }




:root {
  

  --font-jp:    "aktiv-grotesk", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
  --font-hero-ja: "aktiv-grotesk", "Zen Kaku Gothic Antique", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;   
  --font-en:    "aktiv-grotesk", var(--font-jp);

  --font-sans-en: "aktiv-grotesk", "Helvetica Neue", Helvetica, Arial, var(--font-en);   



  

  --c-bg:       #faf7f0;
  --base-bg:    #f0f0f0;   

  --hover-bg:   #f1f1f1;   
  --c-paper:    #ffffff;

  --c-warm:     #f9f9f9;   
  --c-heading:  #222222;

  --spine-pub: #ff9b36;

  --spine-thot: #929495;   
  --spine-gbc:  #fdd000;

  --ground:   var(--c-warm);

  --ground-prev: var(--c-warm);
  --ground-next: var(--c-warm);
  --ink:      #222222;
  --ink-sub:  #555555;
  --rule:     #d9d9d9;

  --field:       #f0f0f0;   

  --field-hover: #ffffff;
  --c-text:     #222222;
  --c-text-sub: #555555;      
  --c-blue:     #146af5;   
  --c-rule:     #d9d9d9;

  --fs-h1:    32px;
  --fs-sec:   52px;   
  --fs-h2:    22px;
  --fs-link:  20px;
  --fs-body:  18px;
  --fs-title: 16px;
  --fs-nav:   14px;
  --fs-note:  14px;   
  --fs-meta:  12px;

  
  
  --measure: 38em;

  --edge: 32px;

  --wrap-max: 1440px;
  --logo-clear-x: 22px;
  --logo-clear-y: 18px;

  --logo-h: 40px;

  --logo-h-hero: 60px;

  --nav-band-top: 18px;
  --nav-band-h:   68px;

  
  --nav-item-h:   42px;
  --nav-pad: calc((var(--nav-band-h) - var(--nav-item-h)) / 2);   

  --page-top: calc(var(--nav-band-top) + var(--nav-band-h) + 44px);

  --article-col: 800px;

  --nav-h:   86px;
  --pad:     28px;

  --col-side: 420px;
  --col-gap:  64px;   

  --stick-pad: 100px;
  --sbw: 0px;

  --svc-no-w:   56px;
  --svc-no-gap: 20px;
  --svc-indent: calc(var(--svc-no-w) + var(--svc-no-gap));
  --svc-bar:  88px;    
  --svc-head: 176px;  

  --svc-pad:  100px;

  --svc-vh: min(100dvh, 900px);
  --svc-last:     3;

  
  --svc-main-pad: min(60px, max(30px, calc(var(--svc-vh) - 706px)));

  --svc-last-media: min(253px, calc(var(--svc-vh) - var(--svc-pad)
                    - (var(--svc-last) + 1) * var(--svc-bar) - var(--svc-main-pad)));
  --svc-last-slack: calc(var(--svc-vh) - var(--svc-pad)
                    - var(--svc-last) * var(--svc-bar)
                    - (1px + var(--svc-bar) + var(--svc-main-pad) + var(--svc-last-media)));

  --svc-gap: max(0px, calc(100px - var(--svc-last-slack)));
  
  --svc-after: 100px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);   

  overflow-x: clip;

  background: #f9f9f9;
}
html.is-near-foot { background: var(--c-heading); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {

  overflow-x: clip;
  margin: 0;

  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: 1.9;
  font-feature-settings: normal;   
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--edge); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-heading); color: var(--c-paper);
  padding: 10px 18px; font-size: var(--fs-meta); letter-spacing: .08em; letter-spacing: round(.08em, 1px);
}
.skip:focus { left: 0; }



.nav {
  position: fixed; top: var(--nav-band-top); left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center;
  pointer-events: none;
  transition: opacity .3s ease, translate .3s ease;
}
.nav-in {
  display: inline-flex; align-items: center; gap: 4px;
  position: relative;
  width: auto; height: auto;
  padding: var(--nav-pad);
  
  padding-right: round(calc(var(--nav-pad) * 1.5), 1px);
  border-radius: 9999px;

  
  background: rgba(255,255,255,.5);
  box-shadow: 0 0 10px rgba(0,0,0,.05);
  pointer-events: auto;
  isolation: isolate;
}

.nav-in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
}

.nav.is-hidden { opacity: 0; translate: 0 -16px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

.nav-logo {
  display: flex; align-items: center; flex: none;
  text-decoration: none;
  width: calc(168px * var(--logo-t, 1));
  overflow: hidden;
}
.nav-logo > span {
  display: flex; align-items: center;
  padding-left: 22px; padding-right: 23px;
  transform: scale(calc(.55 + .45 * var(--logo-t, 1)));
  transform-origin: left center;
}

.nav-logo img { height: var(--logo-h); width: auto; display: block; }

.nav-links { position: relative; display: flex; align-items: center; gap: 4px; font-size: var(--fs-nav); font-weight: 500; letter-spacing: .04em; letter-spacing: round(.04em, 1px); }
.nav-links a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; height: var(--nav-item-h); padding: 0 16px;
  border-radius: 9999px;
  color: var(--ink); text-decoration: none;
}

.nav-hl {
  position: absolute; left: 0; top: 50%; z-index: 0;
  width: var(--hl-w, 0px); height: var(--nav-item-h);
  margin-top: calc(var(--nav-item-h) / -2);
  border-radius: 9999px;
  background: var(--base-bg);
  translate: var(--hl-x, 0px) 0;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.nav-hl.is-on { opacity: 1; }

.nav-hl.is-moving {
  transition: opacity .2s ease,
              translate .38s cubic-bezier(.77,0,.175,1),
              width .38s cubic-bezier(.77,0,.175,1);
}
@media (prefers-reduced-motion: reduce) {
  .nav-hl, .nav-hl.is-moving { transition: opacity .2s ease; }
}

.nav-cta {
  display: inline-flex; align-items: center; height: var(--nav-item-h); padding: 0 26px;
  background: var(--c-heading); color: var(--c-paper);
  border: 0; border-radius: 9999px; overflow: hidden;

  font-size: var(--fs-nav); font-weight: 500;
  letter-spacing: .04em; letter-spacing: round(.04em, 1px);
  text-decoration: none; white-space: nowrap;
}

.nav-cta-text { display: inline-flex; height: var(--nav-item-h); line-height: var(--nav-item-h); overflow: hidden; }
.nav-cta .char {
  position: relative; display: inline-block;
  transition: translate .4s cubic-bezier(.77,0,.175,1);
}
.nav-cta .char::after {
  content: attr(data-c); position: absolute; left: 0; top: 100%;
}
.nav-cta:hover .char { translate: 0 -100%; }

.nav-cta .char:nth-child(1), .nav-cta .char:nth-child(7) { transition-delay: 75ms; }
.nav-cta .char:nth-child(2), .nav-cta .char:nth-child(6) { transition-delay: 55ms; }
.nav-cta .char:nth-child(3), .nav-cta .char:nth-child(5) { transition-delay: 35ms; }
.nav-cta .char:nth-child(4) { transition-delay: 15ms; }
@media (prefers-reduced-motion: reduce) { .nav-cta .char { transition: none; } }


@media (max-width: 1068px) {
  .nav { justify-content: center; }
  .nav-in { margin: 0; }
  .hero-logo-wrap { display: none; }
  .nav-logo { width: auto; }
  .nav-logo > span { padding-left: 16px; padding-right: 23px; transform: none; }   
}


.nav-menu { display: none; }
@media (max-width: 734px) {
  .nav-logo > span { padding-right: 32px; }
  .nav-in {
    display: inline-grid; grid-template-columns: auto auto; grid-template-areas: "logo menu";
    align-items: center; align-content: start; column-gap: 4px; row-gap: 0;
    padding-right: var(--nav-pad);   
    overflow: hidden;
    
    border-radius: 34px;   
    transition: border-radius .38s cubic-bezier(.4,0,.2,1);
  }
  .nav-logo { grid-area: logo; }
  .nav-logo, .nav-menu, .nav-cta { will-change: transform; }   
  .nav-menu {
    grid-area: menu; position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--nav-item-h); height: var(--nav-item-h); padding: 0; margin: 0;
    border: 0; background: none; border-radius: 9999px; cursor: pointer; color: var(--ink);
  }
  
  .nav-menu-label { position: relative; display: block; width: 18px; height: 11px; }
  .nav-menu-label i { position: absolute; left: 0; width: 18px; height: 1px; background: currentColor;
    transition: top .38s cubic-bezier(.4,0,.2,1), transform .38s cubic-bezier(.4,0,.2,1); }
  .nav-menu-label i:first-child { top: 0; }
  .nav-menu-label i:last-child { top: 10px; }
  .nav-links { display: none; grid-area: list; }
  
  .nav-cta { grid-area: menu; justify-content: center; width: var(--nav-item-h); padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .1s ease, visibility 0s linear .1s; }   

  
  .nav.is-menu-open { opacity: 1; translate: 0; pointer-events: auto; }   
  .nav.is-menu-open .nav-in {
    width: calc(100vw - 36px);
    grid-template-columns: 1fr auto; grid-template-areas: "logo menu" "list list" "cta cta";
    border-radius: 24px;
  }
  .nav.is-menu-open .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 24px; }   
  .nav.is-menu-open .nav-links a { height: var(--nav-item-h); padding: 0 16px; }
  .nav.is-menu-open .nav-hl { display: none; }   
  .nav.is-menu-open .nav-menu-label i:first-child { top: 5px; transform: rotate(45deg); }
  .nav.is-menu-open .nav-menu-label i:last-child { top: 5px; transform: rotate(-45deg); }
  .nav.is-menu-open .nav-cta { grid-area: cta; width: 100%; padding: 0 26px; margin-top: 24px; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .1s ease, visibility 0s; }

  .nav-overlay { position: fixed; inset: 0; z-index: 19; opacity: 0; pointer-events: none; }   
  .nav-overlay.is-on { opacity: 1; pointer-events: auto; }
  
  html.is-menu-locked { overflow-y: hidden; }
  html.is-menu-locked body { padding-right: var(--sbw, 0px); }
}
@media (max-width: 734px) and (prefers-reduced-motion: reduce) {
  .nav-in, .nav-menu-label i, .nav-cta { transition: none; }
}

.hero-logo-wrap {
  position: absolute; left: 0; right: 0; z-index: 4;
  top: calc(var(--nav-band-top) + var(--nav-band-h) / 2 - var(--logo-h-hero) / 2);
}
.hero-logo { display: inline-flex; align-items: center; text-decoration: none; }
.hero-logo img { height: var(--logo-h-hero); width: auto; display: block; }



.hero {
  position: relative;

  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;

  --ground: #f9f9f9;
  background: var(--ground);
}

.hero-media {
  position: absolute; inset: 0; z-index: 1;
  perspective: 1500px; perspective-origin: 50% 46%;
}

.media {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
  opacity: 0;
}

.media img { width: 100%; height: 100%; object-fit: contain; }

.media.is-empty {
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(45deg, #fff, #fff 6px, #ededed 6px, #ededed 12px);
  display: flex; align-items: flex-end; justify-content: center;
  font-size: var(--fs-meta); color: var(--ink); letter-spacing: .06em; letter-spacing: round(.06em, 1px); padding: 10px 8px;
}

.hero-front {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; padding: 0 32px;
}

.hero h1 {
  margin: 0;

  font-family: var(--font-sans-en);

  font-weight: 600;   

  font-size: clamp(var(--fs-h1), 8vw, 115px);
  font-size: clamp(var(--fs-h1), round(8vw, 1px), 115px);

  letter-spacing: -.005em; letter-spacing: round(-.005em, 1px);
  line-height: 1.1;
}
.hero .swap { white-space: nowrap; }
.hero .cursor {
  
  display: inline; position: relative;
  animation: blink 1s steps(1) infinite;
  transition: opacity .2s ease;
}
.hero .cursor::before {
  content: ""; position: absolute; background: var(--ink);
  left: .05em; bottom: .265em; width: .01em; height: .72em;   
  left: round(.05em, 1px); bottom: calc(round(.285em, 1px) - round(.02em, 1px));
  width: max(1px, round(.01em, 1px)); height: round(.72em, 1px);
}
@keyframes blink { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .hero .cursor { animation: none; transition: none; }
  .hero.is-settled .cursor { opacity: 0; }
}


@media (max-width: 734px) {
  .hero-scroll { right: 16px; bottom: 20px; }
  .hero-scroll .line { height: 42px; }
}



.stage.is-wiping {
  background: var(--ground);

  color: var(--ink);
}
.stage.is-wiping > .hero,
.stage.is-wiping > #mission {
  --ground: inherit; --ink: inherit; --ink-sub: inherit; --rule: inherit;
}
.stage.is-wiping > .hero { background: transparent; }



.hero, .section, .page-head, .article-head { scroll-margin-top: 0; }   

.section { padding: 100px 0; }
.section.on-ground { background: var(--base-bg); }

.section.on-dark {

  background: var(--ground);

  --ground:  var(--c-heading);
  --ink:     var(--c-paper);
  --ink-sub: rgba(255, 255, 255, .6);
  --rule:    rgba(255, 255, 255, .25);
  color: var(--ink);
}

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 40px;
  font-family: var(--font-en);
  font-size: var(--fs-meta); letter-spacing: .28em; letter-spacing: round(.28em, 1px); color: var(--ink);
  text-transform: uppercase;
}
.eyebrow::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 2px; background: var(--c-blue);
}
.eyebrow.center { justify-content: center; }

.eyebrow:has(+ .section-title),
.eyebrow:has(+ .works-head),
.eyebrow:has(+ .page-title),
.mission-block > .eyebrow {
  margin-bottom: 21px;
  color: var(--ink);
  font-family: var(--font-jp);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.section-title.center { text-align: center; }
.section-title {
  margin: 0 0 40px;

  font-family: var(--font-sans-en); font-weight: 600;
  font-size: var(--fs-sec); line-height: 1.3;
  letter-spacing: -.03em; letter-spacing: round(-.03em, 1px);   
  color: var(--ink);
}

.btn-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-nav); letter-spacing: .06em; letter-spacing: round(.06em, 1px); text-decoration: none; color: var(--ink);
}
.btn-line::after {
  content: ""; width: 22px; height: 1px; background: var(--ink);
  transition: width .2s ease, background-color .2s ease;
}
.btn-line:hover::after { width: 34px; background: var(--c-blue); }
@media (max-width: 734px) { .section { padding: 72px 0; } }




html.js #mission .mission-body { opacity: 0; translate: 0 24px; transition: opacity .8s ease, translate .8s cubic-bezier(.2, .7, .2, 1); }
html.js #mission.is-read .mission-body { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { html.js #mission .mission-body { opacity: 1; translate: none; transition: none; } }



html.js #news .news-list.is-digest .news-item { opacity: 0; translate: 0 24px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }
#news .news-list.is-digest .news-item:nth-child(2) { transition-delay: .16s; }
#news .news-list.is-digest .news-item:nth-child(3) { transition-delay: .32s; }
html.js #news.is-read .news-list.is-digest .news-item { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { html.js #news .news-list.is-digest .news-item { opacity: 1; translate: none; transition: none; } }

.mission-block {
  --col-side: 560px;
  --col-gap: 77px;

  --fs-sec: 64px;
  display: grid;
  grid-template-columns: var(--col-side) 1fr;
  column-gap: var(--col-gap);
  align-items: start;
}

.mission-head {
  margin: 0;
  position: sticky; top: calc(var(--nav-h) + var(--stick-pad));
}

.mission-block .section-title { font-size: min(64px, calc((100vw - 64px) / 7.95)); font-size: min(64px, round(calc((100vw - 64px) / 7.95), 1px)); }

.mission-jp {
  margin: 0; font-family: var(--font-jp); font-weight: 500;
  font-size: var(--fs-link); letter-spacing: .3em; letter-spacing: round(.3em, 1px); color: var(--ink);

  text-indent: 0;
}

.mission-body {

  --mission-label: 44px;
  max-width: var(--measure); margin: var(--mission-label) 0 0;
  font-family: var(--font-jp);
  
  font-size: var(--fs-body); line-height: 2.0; letter-spacing: .11em; letter-spacing: round(.11em, 1px);
  text-align: left;
}
@media (max-width: 734px) { .mission-body br, .contact-lead br { display: none; } }

@media (max-width: 734px) {
  :root { --fs-body: 16px; }
  .mission-body { line-height: 1.9; }
}
.mission-body p { margin: 0 0 2.1em; }
.mission-body p:last-child { margin-bottom: 0; }
@media (max-width: 1068px) { .mission-block { grid-template-columns: minmax(0, 1fr); gap: 0; } .mission-head { position: static; } }      



#news { --ground: var(--c-warm); background: var(--ground); }

.news-block { display: grid; grid-template-columns: var(--col-side) 1fr; gap: var(--col-gap); align-items: start; }
.news-head { min-width: 0; }

.news-list { border-top: 1px solid var(--rule); }
.news-item {
  display: flex; gap: 24px; align-items: baseline;
  padding: 22px 4px; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background-color .18s ease;
}
.news-item:hover { background: var(--hover-bg); }
.news-date {
  flex: none; width: 7em;
  font-family: var(--font-en);
  font-size: var(--fs-meta); letter-spacing: .08em; letter-spacing: round(.08em, 1px); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.news-cat {
  flex: none; font-size: var(--fs-meta); letter-spacing: .08em; letter-spacing: round(.08em, 1px);

  color: var(--ink); border: 1px solid currentColor; padding: 2px 9px;

  line-height: 19px;
}
.news-title { font-size: var(--fs-title); letter-spacing: .03em; letter-spacing: round(.03em, 1px); line-height: 1.75; }

.news-all { margin: 28px 0 -30px; }
#news { padding-bottom: calc(100px - 28px); }
@media (max-width: 734px) {
  .news-item { flex-direction: column; gap: 8px; }
  .news-date { width: auto; }
  .news-cat { align-self: flex-start; }
}

.news-list.is-digest { border-top: 0; }
.news-list.is-digest .news-item {
  position: relative; overflow: hidden; border-radius: 16px;

  display: grid; grid-template-columns: 120px 1fr 17px;   
  column-gap: var(--col-gap); align-items: center;
  padding: 24px 20px; border-bottom: 0;   
}

.news-list.is-digest .news-item::before {
  content: ""; position: absolute; inset: 0; background: var(--hover-bg);

  translate: 0 calc(100% + 1px); transition: translate .5s;
}
.news-list.is-digest .news-item:hover::before { translate: 0 0; }

.news-list.is-digest .news-item > * { position: relative; }


.news-list.is-digest .news-arrow { margin-left: 0; }
.news-list.is-digest .news-item:hover { background: transparent; }

.news-thumb {
  width: 120px; aspect-ratio: 1200 / 630;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #fff, #fff 6px, #ededed 6px, #ededed 12px);
  font-size: var(--fs-meta); color: var(--ink); letter-spacing: .04em; letter-spacing: round(.04em, 1px);
}
.news-thumb::after { content: attr(data-label); }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.news-thumb, .topics-row-thumb { position: relative; }
.news-thumb.is-fit img:not(.thumb-bg), .topics-row-thumb.is-fit img:not(.thumb-bg) { position: relative; z-index: 1; object-fit: contain; }
.news-thumb .thumb-bg, .topics-row-thumb .thumb-bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(18px); transform: scale(1.2);
}


.dash { letter-spacing: -.08em; margin-right: .08em; }


.kuto-l { margin-left:  -.4em; }   
.kuto-r { margin-right: -.4em; }   

.kuto-c { margin-right: .15em; margin-right: round(.15em, 1px); }

@media (max-width: 734px) { .kuto-l { margin-left: 0; } .kuto-r { margin-right: 0; } }

@media (min-width: 735px) {
  .mission-body, .svc-desc, .contact-lead { text-spacing-trim: space-all; }
  .kuto-r.kuto-pair { margin-right: -.25em; }
  .kuto-l.kuto-pair { margin-left: -.25em; }
}


.eyebrow, .mission-jp, .svc-concept, .info-title, .face-title, .contact-cta-text, .footer-headline,
main h2, main h3, .page-title, .err-title { font-feature-settings: "palt" 1; }

.news-title, .topics-row-title, .article-title { font-feature-settings: normal; text-spacing-trim: trim-start; }
.news-list.is-digest .news-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.news-list.is-digest .news-date { width: auto; }

.news-list.is-digest .news-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis; font-weight: 500;
  max-height: 3.5em;
  max-height: 2lh;
}

.news-arrow { display: block; width: 17px; color: var(--ink); }
.news-arrow svg { width: 100%; height: auto; display: block; }
.news-item:hover .news-arrow svg { animation: pill-arrow 1s 1; }
.news-list.is-digest + .news-all { display: flex; justify-content: flex-end; margin-top: 28px; }

@media (max-width: 1068px) {
  .news-block { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 734px) {
  
  .news-list.is-digest .news-item { grid-template-columns: 88px 1fr; gap: 24px; padding: 20px 0; border-radius: 0; }   
  .news-list.is-digest .news-item::before { display: none; }
  .news-thumb { width: 88px; }   
  .news-list.is-digest .news-meta { flex-wrap: wrap; row-gap: 6px; }   
  .news-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .news-list.is-digest .news-item::before { translate: 0 0; opacity: 0; transition: opacity .2s; }
  .news-list.is-digest .news-item:hover::before { opacity: 1; }
  .news-item:hover .news-arrow svg { animation: none; }
}

.pill-more {
  display: inline-flex; align-items: center; text-decoration: none;
  color: var(--ink); font-family: var(--font-sans-en);

  font-size: var(--fs-nav); font-weight: 600; letter-spacing: 0;
}

button.pill-more { border: 0; background: none; padding: 0; cursor: pointer; }

.pill-more[hidden] { display: none; }

.pill-more.is-down  .pill svg { rotate:  90deg; }
.pill-more.is-close .pill svg { rotate: -90deg; }

@media (hover: hover) {
  .pill-more.is-down:hover  .pill svg { animation: pill-arrow-down 1s infinite; }
  .pill-more.is-close:hover .pill svg { animation: pill-arrow-up   1s infinite; }
  .pill-more.is-back:hover  .pill svg { animation: pill-arrow-back 1s infinite; }
}

.pill-more.is-back  .pill svg { rotate: 180deg; }
@keyframes pill-arrow-back {
  0%   { translate: 0 0;     opacity: 1 }
  15%  { translate: 0 0;     opacity: 1 }
  45%  { translate: -50% 0;  opacity: 0 }
  55%  { translate: 50% 0;   opacity: 0 }
  85%  { translate: 0 0;     opacity: 1 }
  100% { translate: 0 0;     opacity: 1 }
}
@keyframes pill-arrow-down {
  0%   { translate: 0 0;     opacity: 1 }
  15%  { translate: 0 0;     opacity: 1 }
  45%  { translate: 0 50%;   opacity: 0 }
  55%  { translate: 0 -50%;  opacity: 0 }
  85%  { translate: 0 0;     opacity: 1 }
  100% { translate: 0 0;     opacity: 1 }
}
@keyframes pill-arrow-up {
  0%   { translate: 0 0;     opacity: 1 }
  15%  { translate: 0 0;     opacity: 1 }
  45%  { translate: 0 -50%;  opacity: 0 }
  55%  { translate: 0 50%;   opacity: 0 }
  85%  { translate: 0 0;     opacity: 1 }
  100% { translate: 0 0;     opacity: 1 }
}
.pill-more .pill {
  display: flex; align-items: center; justify-content: center;
  width: 50px; aspect-ratio: 5 / 3; margin-left: 16px;
  border: 1px solid var(--c-heading); border-radius: 9999px;
  background: var(--c-heading); color: #fff; overflow: hidden;
  transition: color .3s, background-color .3s;
}

.pill-more .pill svg { width: 28%; height: auto; display: block; }

@media (hover: hover) {
  .pill-more:hover .pill { background: var(--c-paper); color: var(--c-heading); }
  .pill-more:hover .pill svg { animation: pill-arrow 1s infinite; }
}
@keyframes pill-arrow {
  0%   { translate: 0 0;    opacity: 1 }
  15%  { translate: 0 0;    opacity: 1 }
  45%  { translate: 50% 0;  opacity: 0 }
  55%  { translate: -50% 0; opacity: 0 }
  85%  { translate: 0 0;    opacity: 1 }
  100% { translate: 0 0;    opacity: 1 }
}

@media (prefers-reduced-motion: reduce) { .pill-more:hover .pill svg, .pill-more.is-down:hover .pill svg, .pill-more.is-close:hover .pill svg, .pill-more.is-back:hover .pill svg { animation: none; } }



#services {
  --stick-pad: var(--svc-pad);
  --ground: var(--c-warm);

  background: var(--ground);
}

.svc-headline-in { height: var(--svc-head); background: var(--ground); }

.svc-headline .section-title { margin: 0; }
.svc {
  position: sticky;
  top: calc(var(--stick-pad) + var(--i) * var(--svc-bar));

  
  min-height: calc(var(--svc-vh) - var(--stick-pad) - var(--i) * var(--svc-bar) + var(--svc-extra, 0px));
  background: var(--ground);

  margin-inline: calc(50% - 50vw + var(--sbw) / 2);
  padding-inline: calc(50vw - var(--sbw) / 2 - 50%);

  --svc-media-h: min(253px, calc(var(--svc-vh) - var(--stick-pad)
                 - (var(--i) + 1) * var(--svc-bar) - var(--svc-main-pad)));

  --svc-content: calc(1px + var(--svc-bar) + var(--svc-main-pad) + var(--svc-media-h));

  --svc-slack: calc(var(--svc-vh) - var(--stick-pad)
               - var(--i) * var(--svc-bar) - var(--svc-content));
}

.svc-stack::after { content: ""; display: block; height: var(--svc-after); }

.svc:last-child {
  background: linear-gradient(to bottom,
    var(--ground) 0 calc(var(--svc-content) + var(--svc-after)),
    var(--ground-next) calc(var(--svc-content) + var(--svc-after)));
}

#services { padding-bottom: 0; }
.svc-link {
  display: block; text-decoration: none; color: inherit;

  border-top: 1px solid var(--ink);
}

.svc-bar {
  display: grid; grid-template-columns: var(--svc-no-w) 1fr 22px; align-items: center;
  height: var(--svc-bar); gap: var(--svc-no-gap);
}

.svc-no {
  font-family: var(--font-sans-en); font-size: 18px; font-weight: 400;
  letter-spacing: 0; color: var(--ink);

  align-self: center;   
}

.svc-name {
  margin: 0; font-family: var(--font-jp); font-size: 40px; font-weight: 600;   
  letter-spacing: .02em; letter-spacing: round(.02em, 1px); line-height: 1;

  align-self: center;   
}

.svc-arrow { display: block; width: 17px; color: var(--ink); }
.svc-arrow svg { width: 100%; height: auto; display: block; }
.svc-link:hover .svc-arrow svg { animation: pill-arrow 1s 1; }

.svc-main {

  display: grid; grid-template-columns: auto 1fr; gap: var(--col-gap); align-items: start;

  padding: var(--svc-main-pad) 0 0 var(--svc-indent);
}

.svc-media {
  display: grid; place-items: center; aspect-ratio: 1200 / 630; overflow: hidden;

  justify-self: start; width: auto;
  height: var(--svc-media-h);
  max-width: 482px;

  border-radius: 16px;
  background: repeating-linear-gradient(45deg, #fff, #fff 6px, #ededed 6px, #ededed 12px);
  font-size: var(--fs-meta); color: var(--ink); letter-spacing: round(.04em, 1px);
}
.svc-media:not(:has(img))::after { content: attr(data-label); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svc-media > img, .svc-media > .svc-anim { grid-area: 1 / 1; }
.svc-anim { width: 100%; height: 100%; display: block; position: relative; z-index: 1; transition: opacity .3s ease; }
.svc-anim.is-done { opacity: 0; pointer-events: none; }
.ba-book, .ba-amp1 { transform: translateY(230px); }   
.ba-amp2 { transform: translateY(520px); }

.svc-anim.is-playing .ba-book { animation: ba-drop-book 1.1s linear .2s forwards; }
.svc-anim.is-playing .ba-amp1 { animation: ba-drop-amp1 1.1s linear .2s forwards; }
.svc-anim.is-playing .ba-amp2 { animation: ba-drop-amp2 1.1s linear .2s forwards; }
@keyframes ba-drop-book {
  0.0% { transform: translateY(230.0px); }
  2.5% { transform: translateY(229.9px); }
  5.0% { transform: translateY(229.0px); }
  7.5% { transform: translateY(226.5px); }
  10.0% { transform: translateY(221.7px); }
  12.5% { transform: translateY(213.8px); }
  15.0% { transform: translateY(201.9px); }
  17.5% { transform: translateY(185.4px); }
  20.0% { transform: translateY(163.4px); }
  22.5% { transform: translateY(135.2px); }
  25.0% { transform: translateY(100.0px); }
  27.5% { transform: translateY(70.9px); }
  30.0% { transform: translateY(43.5px); }
  32.5% { transform: translateY(17.7px); }
  35.0% { transform: translateY(-0.0px); }
  37.5% { transform: translateY(-0.0px); }
  40.0% { transform: translateY(-0.0px); }
  42.5% { transform: translateY(-0.0px); }
  45.0% { transform: translateY(-0.0px); }
  47.5% { transform: translateY(-0.0px); }
  50.0% { transform: translateY(-0.0px); }
  52.5% { transform: translateY(-0.0px); }
  55.0% { transform: translateY(-0.0px); }
  57.5% { transform: translateY(-0.0px); }
  60.0% { transform: translateY(-0.0px); }
  62.5% { transform: translateY(-0.0px); }
  65.0% { transform: translateY(-0.0px); }
  67.5% { transform: translateY(-0.0px); }
  70.0% { transform: translateY(-0.0px); }
  72.5% { transform: translateY(-0.0px); }
  75.0% { transform: translateY(-0.0px); }
  77.5% { transform: translateY(-0.0px); }
  80.0% { transform: translateY(-0.0px); }
  82.5% { transform: translateY(-0.0px); }
  85.0% { transform: translateY(-0.0px); }
  87.5% { transform: translateY(-0.0px); }
  90.0% { transform: translateY(-0.0px); }
  92.5% { transform: translateY(-0.0px); }
  95.0% { transform: translateY(-0.0px); }
  97.5% { transform: translateY(-0.0px); }
  100.0% { transform: translateY(-0.0px); }
}
@keyframes ba-drop-amp1 {
  0.0% { transform: translateY(230.0px); }
  2.5% { transform: translateY(229.8px); }
  5.0% { transform: translateY(228.7px); }
  7.5% { transform: translateY(225.5px); }
  10.0% { transform: translateY(219.3px); }
  12.5% { transform: translateY(209.1px); }
  15.0% { transform: translateY(193.9px); }
  17.5% { transform: translateY(172.7px); }
  20.0% { transform: translateY(144.5px); }
  22.5% { transform: translateY(108.3px); }
  25.0% { transform: translateY(74.6px); }
  27.5% { transform: translateY(44.7px); }
  30.0% { transform: translateY(16.6px); }
  32.5% { transform: translateY(-9.7px); }
  35.0% { transform: translateY(-34.3px); }
  37.5% { transform: translateY(-57.3px); }
  40.0% { transform: translateY(-78.6px); }
  42.5% { transform: translateY(-98.5px); }
  45.0% { transform: translateY(-116.9px); }
  47.5% { transform: translateY(-134.0px); }
  50.0% { transform: translateY(-149.7px); }
  52.5% { transform: translateY(-164.3px); }
  55.0% { transform: translateY(-177.7px); }
  57.5% { transform: translateY(-190.1px); }
  60.0% { transform: translateY(-201.4px); }
  62.5% { transform: translateY(-211.8px); }
  65.0% { transform: translateY(-221.4px); }
  67.5% { transform: translateY(-230.2px); }
  70.0% { transform: translateY(-238.3px); }
  72.5% { transform: translateY(-245.7px); }
  75.0% { transform: translateY(-252.6px); }
  77.5% { transform: translateY(-259.0px); }
  80.0% { transform: translateY(-264.9px); }
  82.5% { transform: translateY(-270.5px); }
  85.0% { transform: translateY(-275.9px); }
  87.5% { transform: translateY(-281.0px); }
  90.0% { transform: translateY(-286.0px); }
  92.5% { transform: translateY(-290.8px); }
  95.0% { transform: translateY(-294.5px); }
  97.5% { transform: translateY(-293.8px); }
  100.0% { transform: translateY(-290.0px); }
}
@keyframes ba-drop-amp2 {
  0.0% { transform: translateY(520.0px); }
  2.5% { transform: translateY(519.8px); }
  5.0% { transform: translateY(518.7px); }
  7.5% { transform: translateY(515.5px); }
  10.0% { transform: translateY(509.3px); }
  12.5% { transform: translateY(499.1px); }
  15.0% { transform: translateY(483.9px); }
  17.5% { transform: translateY(462.7px); }
  20.0% { transform: translateY(434.5px); }
  22.5% { transform: translateY(398.3px); }
  25.0% { transform: translateY(364.6px); }
  27.5% { transform: translateY(334.7px); }
  30.0% { transform: translateY(306.6px); }
  32.5% { transform: translateY(280.3px); }
  35.0% { transform: translateY(255.7px); }
  37.5% { transform: translateY(232.7px); }
  40.0% { transform: translateY(211.4px); }
  42.5% { transform: translateY(191.5px); }
  45.0% { transform: translateY(173.1px); }
  47.5% { transform: translateY(156.0px); }
  50.0% { transform: translateY(140.3px); }
  52.5% { transform: translateY(125.7px); }
  55.0% { transform: translateY(112.3px); }
  57.5% { transform: translateY(99.9px); }
  60.0% { transform: translateY(88.6px); }
  62.5% { transform: translateY(78.2px); }
  65.0% { transform: translateY(68.6px); }
  67.5% { transform: translateY(59.8px); }
  70.0% { transform: translateY(51.7px); }
  72.5% { transform: translateY(44.3px); }
  75.0% { transform: translateY(37.4px); }
  77.5% { transform: translateY(31.0px); }
  80.0% { transform: translateY(25.1px); }
  82.5% { transform: translateY(19.5px); }
  85.0% { transform: translateY(14.1px); }
  87.5% { transform: translateY(9.0px); }
  90.0% { transform: translateY(4.0px); }
  92.5% { transform: translateY(-0.8px); }
  95.0% { transform: translateY(-4.5px); }
  97.5% { transform: translateY(-3.7px); }
  100.0% { transform: translateY(0.0px); }
}
@media (prefers-reduced-motion: reduce) { .svc-anim { display: none; } }
.svc-text { display: block; max-width: 30em; }
.svc-concept {

  display: block; margin: 0 0 18px; font-size: var(--fs-body); font-weight: 600;   
  letter-spacing: .06em; letter-spacing: round(.06em, 1px); line-height: 1.8;
}
.svc-desc {
  
  display: block; margin: 0 0 28px; font-size: var(--fs-body); line-height: 1.9;
  color: var(--ink); letter-spacing: .11em; letter-spacing: round(.11em, 1px);
}

.svc-text .pill-more { margin-top: 4px; }

@media (max-height: 735px) {
  
  :root { --svc-main-pad: 30px; }
  .svc { position: static; min-height: 0; }
  .svc-stack::after { display: none; }
  .svc-media { height: auto; width: 100%; max-width: 482px; }

  .svc-main { padding-bottom: 100px; }

  .svc:last-child { background: var(--ground); }
}


@media (max-width: 1068px) {
  :root { --svc-bar: 72px; --svc-main-pad: 30px; }
  .svc { position: static; min-height: 0; }
  .svc-stack::after { display: none; }
  .svc:last-child { background: var(--ground); }
  
  
  .svc-main { grid-template-columns: 1fr; gap: 28px; padding-left: max(var(--svc-indent), calc((100% - 540px) / 2)); padding-right: max(var(--svc-indent), calc((100% - 540px) / 2)); padding-bottom: 100px; }
  .svc-media { width: 100%; max-width: 100%; height: auto; }
  .svc-name { font-size: 34px; }
}

@media (max-width: 734px) {
  .svc-media { width: 100%; max-width: 100%; height: auto; }
  
  :root { --svc-main-pad: 30px; }
  .svc { position: static; min-height: 0; }
  .svc-stack::after { display: none; }
  .svc-main { padding-bottom: 100px; }
  .svc:last-child { background: var(--ground); }
  
  .svc-arrow { display: none; }
  
  
  
  .svc-bar { grid-template-columns: auto 1fr; column-gap: clamp(8px, round(calc(100vw - 359px), 1px), 31px); height: auto; min-height: 0; align-items: start; padding: 19px 0; box-sizing: border-box; }
  .svc-no, .svc-name { align-self: start; }
  .svc-name { font-size: 34px; }
  
  .svc-main { padding-left: max(0px, calc((100% - 519px) / 2)); padding-right: max(0px, calc((100% - 519px) / 2)); }
  .svc-text { max-width: none; }   
  .svc-text .pill-more { display: flex; width: fit-content; margin-left: auto; }   
}

@media (max-width: 366px) {
  .svc-bar { grid-template-columns: 1fr; row-gap: 8px; }
  .svc-no { line-height: 1; }
}
@media (prefers-reduced-motion: reduce) { .svc-link:hover .svc-arrow svg { animation: none; } }


.svc { position: relative; top: auto; min-height: 0; --svc-media-h: 253px; }
:root { --svc-main-pad: 60px; }
@media (max-width: 1068px), (max-height: 735px) { :root { --svc-main-pad: 30px; } }
.svc-stack::after { display: none; }
.svc:last-child { background: var(--ground); }
.svc-main { padding-bottom: 100px; }
.svc.has-works .svc-main { padding-bottom: 0; }

html.shelf-gated .svc-works { display: none; }

@media (max-width: 734px) { .svc:last-child:not(.has-works) .svc-main { padding-bottom: 72px; } }


.svc-works { position: relative; margin-top: 20px; padding-bottom: 100px; --shelf-pad-l: 0px; }   


.svc-works-head { display: flex; justify-content: flex-end; margin-top: 64px; }   
.svc-works-head:has(.shelf-toggle[hidden]) { display: none; }
.svc-works-head .shelf-toggle[hidden] { display: none; }

@media (min-width: 1069px) { .svc-works .shelf-stack { padding-left: 0; } }   


@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc-media {
      animation: svc-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%;
    }
  }
}
@keyframes svc-grow {
  from { clip-path: inset(22% 26% round 16px); }
  to   { clip-path: inset(0 round 16px); }
}

html.svc-pinned .svc-media {
  animation: none;
  clip-path: inset(calc(22% * (1 - var(--g, 1))) calc(26% * (1 - var(--g, 1))) round 16px);
}

@media (prefers-reduced-motion: reduce) {
  html.svc-fade .svc-media { opacity: 0; transition: opacity .8s ease; }
  html.svc-fade .svc-media.is-shown { opacity: 1; }
}



#works {

  --ground: var(--c-warm);
  background: linear-gradient(to bottom, var(--ground-prev) 0 var(--svc-gap), var(--ground) var(--svc-gap));
  padding-top: max(0px, calc(200px - var(--svc-last-slack)));   
}

@media (max-height: 735px) {
  #works { background: var(--ground); padding-top: 100px; }
}

#works { padding-bottom: calc(100px - 1px); }

@media (max-width: 1068px) {
  #works { background: var(--ground); padding-top: 100px; }
}

.shelf-hint { margin: 0 0 26px; font-size: var(--fs-note); color: var(--ink); letter-spacing: .04em; letter-spacing: round(.04em, 1px); }
.works-source { display: none; }

.shelf-stack { padding-left: var(--svc-indent); }
@media (max-width: 1068px) { .shelf-stack { padding-left: 0; } }   

.shelf-row {
  position: relative;
  padding-top: 44px;
  
  padding-bottom: 4px; margin-bottom: -4px;
  overflow: hidden;
}
.shelf-row + .shelf-row { margin-top: 34px; }

.shelf-row:not(.is-scroll) { padding-left: 4px; margin-left: -4px; }
.shelf-inner {
  display: flex; align-items: flex-end; gap: 3px;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .shelf-inner { transition: none; } }

.spine {
  flex: none; position: relative; overflow: hidden;
  border: 0; background: none; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
  transition: width .76s cubic-bezier(.65,0,.35,1) .09s, margin-left .76s cubic-bezier(.65,0,.35,1) .09s, margin-right .76s cubic-bezier(.65,0,.35,1) .09s, transform .18s cubic-bezier(.4,0,.2,1);
}

.spine.no-link, .spine.no-link .spine-btn { cursor: default; }


@media (hover: hover) {
  .spine:not(.is-open):hover { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .spine { transition: none; } }

.spine-btn {
  grid-column: 1 / 3; grid-row: 1;
  display: grid; grid-template-columns: var(--w-info) var(--w-cover);

  grid-template-rows: 100%;
  border: 0; background: none; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.spine-btn:focus-visible { outline-offset: -2px; }

@supports selector(:has(a)) {
  .spine-btn:focus-visible { outline: none; }
  .spine:has(.spine-btn:focus-visible) { outline: 2px solid var(--c-blue); outline-offset: 2px; }
}

.spine-inner {
  display: grid;
  
  grid-template-columns: var(--w-info) var(--w-cover);

  grid-template-rows: 100%;
  height: 100%;
}

.spine-face {
  grid-column: 1; grid-row: 1; z-index: 3;
  width: var(--w-spine); justify-self: start;
  position: relative;
  display: flex; align-items: center; justify-content: flex-start;
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 19px 0;
  border: 0;
  background: none;
  font-size: var(--fs-meta); letter-spacing: .08em; letter-spacing: round(.08em, 1px); line-height: 1.4; white-space: nowrap;
  transition: opacity .26s .33s, visibility 0s linear .33s;
}
.spine-shape {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1;
  display: block; overflow: visible; pointer-events: none;
}

.spine-shape path { fill: var(--c-paper); stroke: var(--rule); stroke-width: 1; }

.spine[data-svc="pub"]  .spine-shape path { fill: var(--spine-pub);  stroke: rgba(0, 0, 0, .12); }

.spine[data-svc="thot"] .spine-face { color: var(--c-paper); }
.spine[data-svc="thot"] .spine-shape path { fill: var(--spine-thot); stroke: rgba(0, 0, 0, .12); }

.spine[data-svc="thot"] .spine-face.is-house { color: #000; }
.spine[data-svc="thot"] .spine-face.is-house .face-mark img { filter: brightness(0); }   


.spine[data-svc="thot"] .spine-face.is-house::before,
.spine-face.is-silver::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(to right,
    rgba(0, 0, 0, .35) 0, rgba(255, 255, 255, 0) 7%,
    rgba(255, 255, 255, .8) 18%, rgba(255, 255, 255, .28) 28%,
    rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .25) 76%,
    rgba(255, 255, 255, .48) 90%, rgba(0, 0, 0, .3) 100%);
}

.spine[data-svc="gbc"]  .spine-shape path { fill: var(--spine-gbc);  stroke: rgba(0, 0, 0, .12); }

.spine-face.has-img .spine-shape path { fill: none; }

.spine-face.has-img .spine-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: -2; max-width: none; }

.spine-face::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right,
    rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, 0) 22%,
    rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .14) 88%, rgba(0, 0, 0, .12) 100%);
}

.spine[data-svc="pub"] .spine-face::after {
  background: linear-gradient(to right,
    rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, .12) 100%);
}
.spine[data-svc="pub"] .spine-face::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, .6) 88%, rgba(255, 255, 255, 0) 97%);
}
.spine-face > :not(.spine-shape):not(.spine-img) { position: relative; z-index: 2; }
.spine-face.is-house .face-mark { z-index: 2; }

.spine-face .tcy { text-combine-upright: all; }

.spine-face.is-house { align-items: center; justify-content: flex-start; }
.spine-face.is-house .face-title  { font-size: var(--fs-nav); font-weight: 700; letter-spacing: .04em; letter-spacing: round(.04em, 1px); line-height: 1; }
.spine[data-svc="pub"] .spine-face.is-house .face-title { font-weight: 500; }   

.spine[data-svc="pub"] .spine-face.is-house .face-mark { bottom: 11px; }
.spine[data-svc="pub"] .spine-face.is-house .face-mark img { width: 68%; }   
@media (max-width: 734px) { .spine[data-svc="pub"] .spine-face.is-house .face-mark { bottom: 9px; } }
.spine-face.is-house .face-series { font-size: var(--fs-meta); font-weight: 500; letter-spacing: .08em; letter-spacing: round(.08em, 1px); margin-top: 10px; }
.spine-face.is-house .face-mark {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; justify-content: center;
  writing-mode: horizontal-tb;
}
.spine-face.is-house .face-mark img { display: block; width: 80%; height: auto; }
.spine-face.is-house .face-mark.is-rot { position: absolute; left: 0; right: 0; bottom: 16px; display: block; }
.spine-face.is-house .face-mark.is-rot img {
  position: absolute; left: 50%; top: 50%;
  width: auto; height: auto;           
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}
.spine.is-open .spine-face { opacity: 0; visibility: hidden; }

.spine.is-open { margin-left: 6px; margin-right: 6px; }


.spine-cover {
  grid-column: 2; grid-row: 1; z-index: 2;
  
  transform: rotateY(-92deg); transform-origin: 0 50%;
  border-radius: 0 10px 10px 0; overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(45deg, #fff, #fff 5px, #ededed 5px, #ededed 10px);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-meta); color: var(--ink); letter-spacing: .04em; letter-spacing: round(.04em, 1px); text-align: center; padding: 8px;
  transition: transform .65s cubic-bezier(.22,1,.36,1);
}
.spine.is-open .spine-cover { transform: rotateY(0deg); }
.spine-cover { min-height: 0; }
.spine-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }


.spine-cover.has-img { padding: 0; border: 1px solid var(--rule); border-left: 0; background: none; }

.spine-info {
  grid-column: 1; grid-row: 1; z-index: 5;
  background: var(--c-paper);
  
  border-radius: 10px 0 0 10px;
  border: 1px solid var(--rule); border-right: 0;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  
  opacity: 0; visibility: hidden;
  transform: translateX(-25px);
  transition: opacity .22s, visibility 0s linear .22s, transform .42s cubic-bezier(.65,0,.35,1);
}
.spine.is-open .spine-info {
  opacity: 1; visibility: visible;
  transform: translateX(0);
  transition: opacity .22s, visibility 0s, transform .42s cubic-bezier(.65,0,.35,1);
}

.spine-info { min-height: 0; overflow: hidden; }
.info-desc  { flex: 0 1 auto; min-height: 0; overflow: hidden; }

.info-title { margin: 0 0 12px; font-size: var(--fs-h2); font-weight: 700; letter-spacing: .02em; letter-spacing: round(.02em, 1px); line-height: 1.35; }
.info-desc  { margin: 0 0 24px; font-size: var(--fs-note); line-height: 1.6;    color: var(--ink); letter-spacing: .02em; letter-spacing: round(.02em, 1px); }
.info-meta  { margin: 0; }
.info-row {
  display: grid; grid-template-columns: 6em 1fr; gap: 14px;
  border-top: 1px solid var(--rule); padding: 9px 0;
  font-size: var(--fs-meta); line-height: 1.7;
}
.info-row dt { color: var(--ink); margin: 0; }
.info-row dd { margin: 0; }

.info-go { margin-top: auto; padding-top: 16px; text-decoration: none; }
.spine-info .pill-more { color: var(--ink); }

.spine-info .info-go { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .spine, .spine-inner, .spine-face, .spine-cover, .spine-info { transition: none; }
}

.works-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.works-head .section-title { margin-bottom: 40px; }

.shelf-toggle {
  display: inline-flex; align-items: center; gap: 12px; height: 24px; margin: 0 0 55px;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink);
  
  font: inherit; font-family: var(--font-sans-en); font-size: var(--fs-nav); font-weight: 600; letter-spacing: 0; line-height: 1; white-space: nowrap;
}
.shelf-toggle-track {
  position: relative; display: block; width: 44px; height: 24px; border-radius: 9999px;
  background: #c4c4c4; transition: background-color .38s cubic-bezier(.77,0,.175,1);
}
.shelf-toggle-knob {
  position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-paper); translate: 0 0;
  transition: translate .38s cubic-bezier(.77,0,.175,1);
}
.shelf-toggle[aria-checked="true"] .shelf-toggle-track { background: var(--c-heading); }
.shelf-toggle[aria-checked="true"] .shelf-toggle-knob { translate: 20px 0; }
.shelf-toggle:focus-visible { outline-offset: 4px; border-radius: 9999px; }
@media (prefers-reduced-motion: reduce) { .shelf-toggle-track, .shelf-toggle-knob { transition: none; } }

@media (max-width: 480px) { .works-head { gap: 16px; } }


@media (max-width: 734px) {
  .footer-nav a, .footer-legal a, .footer-action-btn, .pill-more { position: relative; }
  .footer-nav a::after, .footer-legal a::after, .footer-action-btn::after, .pill-more::after { content: ""; position: absolute; left: 0; right: 0; }
  .footer-nav a::after { top: -7px; bottom: -7px; }
  .footer-legal a::after { top: -6px; bottom: -6px; }
  .footer-action-btn::after { top: -10px; bottom: -10px; }
  .pill-more::after { top: -7px; bottom: -7px; }
}

.shelf-more { padding: 25px 0 0; text-align: center;;

}


@media (max-width: 1068px) {
  
  .spine.is-peek, .spine.is-pressed { transform: translateY(-10px); }

  
  .book-sheet { position: fixed; inset: 0; z-index: 19; display: none; }   
  .book-sheet.is-on { display: block; }
  .book-sheet-bg { position: absolute; inset: 0; }   
  .book-sheet-card {
    position: absolute; left: 18px; right: 18px;
    
    top: calc(var(--nav-band-top) + var(--nav-band-h) + 18px);
    max-height: calc(100% - var(--nav-band-top) - var(--nav-band-h) - 36px);
    display: flex; flex-direction: column;
    border-radius: 24px; overflow: hidden;
    
    background: rgba(255,255,255,.65);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform-origin: 50% 0; will-change: transform, opacity;
  }
  .book-sheet-close {
    position: absolute; right: var(--nav-pad); top: var(--nav-pad); z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--nav-item-h); height: var(--nav-item-h); padding: 0; margin: 0;
    border: 0; background: none; border-radius: 9999px; cursor: pointer; color: var(--ink);
  }
  .book-sheet-close .nav-menu-label i:first-child { top: 5px; transform: rotate(45deg); }   
  .book-sheet-close .nav-menu-label i:last-child  { top: 5px; transform: rotate(-45deg); }
  .book-sheet-body { padding: 24px; overflow: hidden; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
  .book-sheet-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
  .book-sheet-cover { flex: none; width: 120px; aspect-ratio: 325 / 480; border: 1px solid var(--rule); overflow: hidden; }   
  .book-sheet-cover.is-square { width: min(177px, calc(100% - 24px - 90px)); aspect-ratio: 1; }   
  .book-sheet-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
  
  .book-sheet-cover.is-web { width: min(177px, calc(100% - 24px - 90px)); aspect-ratio: 4 / 3; border: 0; border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.06); }
  
  .book-sheet-head .info-title { margin: calc(var(--nav-item-h) + var(--nav-pad)) 0 0; font-size: 18px; line-height: 1.5; }   
  .book-sheet-body .info-desc {
    margin: 0 0 24px; flex: 0 1 auto; min-height: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--desc-lines, 30); overflow: hidden;   
  }
  .book-sheet-body .info-row { border-top-color: var(--ink); }   
  .book-sheet-body .info-go { display: inline-flex; margin-top: 8px; align-self: flex-end; }   
  html.is-sheet-locked { overflow-y: hidden; }
  html.is-sheet-locked body { padding-right: var(--sbw, 0px); }
  
  .shelf-stack { padding-left: 0; }

  
  
  .shelf-stack { margin-inline: calc(-1 * var(--edge)); }
  .shelf-row.is-scroll { overscroll-behavior-x: contain; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: var(--edge); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .shelf-row.is-scroll::-webkit-scrollbar { display: none; }
  .shelf-row.is-scroll .shelf-inner { width: max-content; padding-inline: var(--edge); transition: none; will-change: auto; }   
  .shelf-row.is-scroll .spine { scroll-snap-align: start; }
  
  .shelf-nav { display: flex; justify-content: space-between; margin-top: 24px; }   
  .shelf-nav[hidden] { display: none; }
  .shelf-nav-btn {
    display: flex; align-items: center; justify-content: center;
    width: 50px; aspect-ratio: 5 / 3; padding: 0; margin: 0;
    border: 1px solid var(--c-heading); border-radius: 9999px;
    background: var(--c-heading); color: #fff; cursor: pointer;
    transition: opacity .2s ease;
  }
  .shelf-nav-btn svg { width: 28%; height: auto; display: block; }
  .shelf-nav-btn.is-prev svg { rotate: 180deg; }
  .shelf-nav-btn[aria-disabled="true"] { opacity: .3; pointer-events: none; }
  .shelf-nav-btn::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }   
  .shelf-nav-btn { position: relative; }
}
@media (max-width: 734px) {
  .shelf-row { padding-top: 34px; }
}



.contact { --ground: var(--c-warm); background: var(--ground); padding: 32px; }

.contact { padding-top: 100px; }
@media (max-width: 734px) { .contact { padding-top: 72px; } }

.contact-panel {

  max-width: calc(var(--wrap-max) - var(--edge) * 2); margin-inline: auto;
  position: relative; overflow: hidden;
  aspect-ratio: 2160 / 827;

  border: 1px solid var(--ink);
  border-radius: 24px;

  display: grid; align-content: center;
}
.contact-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0;

  background: url(../img/contact/contact_photo.webp?v=c5f63bf2) center / cover no-repeat;
  opacity: 0; transition: opacity .6s cubic-bezier(.77,0,.175,1);
}

.contact-panel:hover::before,
.contact-panel:focus-within::before,
.contact-panel.is-hover::before { opacity: 1; }

.contact-panel .eyebrow,
.contact-panel .section-title,
.contact-panel .contact-lead {
  transition: color .6s cubic-bezier(.77,0,.175,1);
}
.contact-panel:hover .eyebrow,
.contact-panel:hover .section-title,
.contact-panel:hover .contact-lead,
.contact-panel:focus-within .eyebrow,
.contact-panel:focus-within .section-title,
.contact-panel:focus-within .contact-lead,
.contact-panel.is-hover .eyebrow,
.contact-panel.is-hover .section-title,
.contact-panel.is-hover .contact-lead {
  color: var(--c-paper);
}

.contact-panel > .wrap {
  position: relative; z-index: 1;
  padding-inline: calc(var(--svc-indent) - 1px);
}


@media (max-width: 1068px) {
  .contact-panel > .wrap { padding-inline: 32px; }
  .contact-panel { aspect-ratio: auto; padding: 32px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-panel::before,
  .contact-panel .eyebrow, .contact-panel .section-title, .contact-panel .contact-lead { transition: none; }
}

.contact-inner { text-align: left; }
.contact-lead {
  margin: 0 0 40px;
  font-size: var(--fs-link); line-height: 1.8;   
  letter-spacing: .11em; letter-spacing: round(.11em, 1px);
  color: var(--ink);
}

.contact-cta {
  position: relative; display: inline-flex; align-items: center; justify-content: flex-end;
  width: 60px; height: 60px; padding: 0 21px;
  border-radius: 9999px; overflow: hidden;
  background: var(--c-paper); color: var(--c-heading);

  
  box-shadow: inset 0 0 0 1px var(--rule);
  text-decoration: none;

  transition: width .6s cubic-bezier(.77,0,.175,1),
              background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.contact-panel:hover .contact-cta,
.contact-panel:focus-within .contact-cta,
.contact-panel.is-hover .contact-cta { width: 212px; }

.contact-cta:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--c-paper);
  color: var(--c-paper);
}
@media (prefers-reduced-motion: reduce) {
  .contact-cta { transition: none; }
}

.contact-cta-text {
  position: absolute; left: 28px; white-space: nowrap;
  font-size: var(--fs-title); font-weight: 500;
  letter-spacing: .04em; letter-spacing: round(.04em, 1px);
  opacity: 0; translate: 0 16px;
  transition: opacity .2s ease, translate .2s ease;
}
.contact-panel:hover .contact-cta-text,
.contact-panel:focus-within .contact-cta-text,
.contact-panel.is-hover .contact-cta-text {
  opacity: 1; translate: 0 0;

  transition: opacity .2s ease .4s, translate .35s cubic-bezier(.22,1,.36,1) .4s;
}
.contact-cta-arrow { display: block; width: 17px; flex: none; }
.contact-cta-arrow svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) {
  .contact-cta, .contact-cta-text { transition: none; }
}
@media (max-width: 734px) {
  .contact-panel { aspect-ratio: auto; padding: 32px 0; }   
  
  .contact-panel.is-hover .contact-cta { width: 100%; }
  .contact-lead { font-size: var(--fs-title); margin-bottom: 32px; }
  .contact-lead br { display: none; }
}



.footer {
  --ground:  var(--c-heading);
  --ink:     var(--c-paper);
  --ink-sub: rgba(255, 255, 255, .6);
  --rule:    rgba(255, 255, 255, .25);
  background: var(--ground); color: var(--ink); padding: 0;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1.2fr 0.9fr; gap: 64px;
  padding: 80px 0 56px;
}

.footer-panel {
  display: flex; flex-direction: column; color: var(--ink);
  min-height: 280px;
}

.footer-panel:nth-child(2) { translate: 60px 0; }

.footer-headline {
  margin: 0; font-family: var(--font-jp); font-weight: 600;   
  
  font-size: clamp(22px, 2.2vw, 32px);
  font-size: clamp(22px, round(2.2vw, 1px), 32px);
  line-height: 1.5; letter-spacing: .06em; letter-spacing: round(.06em, 1px);
}

.footer-brand {
  margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding-top: 32px;
}
.footer-brand-logo { width: 154px; height: auto; filter: brightness(0) invert(1); opacity: .95; }

.footer-brand-copy {
  font-family: var(--font-en); font-size: var(--fs-meta); color: var(--ink-sub);
  margin-right: 111px;
}
.footer-nav { display: flex; flex-direction: column; gap: 14px; }
.footer-nav a {
  font-size: var(--fs-title); font-weight: 500; color: var(--ink); line-height: 1.5;   
  text-decoration: none; width: fit-content; transition: opacity .2s ease;
}
.footer-nav a:hover { opacity: .6; }
.footer-legal { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 64px; }
.footer-legal a {
  font-size: var(--fs-meta); font-weight: 400; color: var(--ink-sub);
  text-decoration: none; width: fit-content; transition: color .2s ease;
}
.footer-legal a:hover { color: var(--ink); }
.footer-actions { display: flex; flex-direction: column; gap: 12px; height: 100%; }

.footer-action-btn {
  display: flex; align-items: center; justify-content: flex-end; gap: 32px;
  background: none; border-radius: 0; padding: 0;
  font-size: var(--fs-title); font-weight: 500; color: var(--ink);
  text-decoration: none; transition: opacity .2s ease;
}
.footer-action-btn:hover { opacity: .6; }

.footer-action-btn .btn-slide-clip { min-width: 88px; }  
.footer-action-btn .btn-arrow-clip,
.footer-action-btn .btn-arrow-up-clip { width: 25px; }
.footer-action-btn--top { margin-top: auto; }

.btn-slide-clip { overflow: hidden; clip-path: inset(0); display: block; height: 1.5em; }
.btn-slide-wrap { display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.4,.4,0,1); }
.btn-slide-text { display: block; height: 1.5em; line-height: 1.5; white-space: nowrap; }  
.footer-action-btn:hover .btn-slide-wrap { transform: translateY(-50%); }

.btn-arrow-text svg, .btn-arrow-up-text svg { width: 17px; height: auto; display: block; }
.btn-arrow-up-text svg { rotate: -90deg; }
.btn-arrow-clip { overflow: hidden; display: block; width: 24px; height: 25px; }
.btn-arrow-wrap { display: flex; flex-direction: row; transform: translateX(-24px); transition: transform .45s cubic-bezier(.4,.4,0,1); }
.btn-arrow-text { display: flex; align-items: center; justify-content: center; width: 24px; height: 25px; flex-shrink: 0; }
.footer-action-btn:hover .btn-arrow-wrap { transform: translateX(0); }

.btn-arrow-up-clip { overflow: hidden; display: block; width: 25px; height: 24px; }
.btn-arrow-up-wrap { display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.4,.4,0,1); }
.btn-arrow-up-text { display: flex; align-items: center; justify-content: center; width: 25px; height: 24px; flex-shrink: 0; }
.footer-action-btn:hover .btn-arrow-up-wrap { transform: translateY(-24px); }
@media (prefers-reduced-motion: reduce) {
  .btn-slide-wrap, .btn-arrow-wrap, .btn-arrow-up-wrap { transition: none; }
}


@media (max-width: 1068px) {
  .footer-grid { grid-template-columns: 1fr auto; gap: 72px 64px; padding: 72px 0 48px; }
  .footer-panel { min-height: 0; }
  .footer-panel:nth-child(2) { translate: 0; }
  .footer-panel:first-child { grid-column: 1 / -1; order: 3; }
  .footer-panel:first-child .footer-brand { padding-top: 64px; }
  .footer-brand-copy { margin-right: 0; }
}

@media (max-width: 734px) {
  .footer-grid { gap: 64px 40px; padding: 64px 0 40px; }
}


@media (max-width: 1068px) {
  .footer-panel:nth-child(2) { display: contents; }
  .footer-nav { grid-column: 1; grid-row: 1; }
  .footer-panel--actions { grid-column: 2; grid-row: 1; }
  .footer-legal { grid-column: 1 / -1; grid-row: 2; margin-top: 0; padding-top: 0; }
  .footer-panel:first-child { grid-row: 3; }
}


.footer-legal-copy { display: none; font-family: var(--font-en); font-size: var(--fs-meta); color: var(--ink-sub); }
@media (min-width: 580px) and (max-width: 1068px) {
  .footer-legal { grid-column: 2; grid-row: 2; }   
  .footer-panel:first-child { grid-column: 1; grid-row: 2; }   
  .footer-legal-copy { display: block; margin-top: 12px; }   
  .footer-brand-copy { display: none; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr auto; gap: 48px 40px; padding: 56px 0 40px; }  
  
  .footer-legal a { font-size: 10px; line-height: normal; }
  .footer-panel:first-child .footer-brand { padding-top: 48px; }
}

.page-head { padding: var(--page-top) 0 0; }
.contact-cols .page-head { padding-top: 0; }

:root { --list-col: calc(200px + var(--col-gap) + var(--article-col)); }
main.is-core .page-head,
main.is-core .topics-rows { max-width: var(--list-col); margin-inline: auto; }

main > .wrap:first-child + .section { padding-top: 56px; }


.page-title.is-jp { font-size: 36px; font-weight: 700; white-space: nowrap; }   
@media (max-width: 1068px) { .page-title.is-jp { font-size: 34px; } }
@media (max-width: 734px) { .page-title.is-jp { font-size: min(34px, round(down, calc((100vw - 64px) / 10.7), 1px)); } }


.thanks-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; padding: var(--page-top) 0 100px; }
.thanks-cols .page-head { grid-column: 1 / -1; padding-top: 0; }
.thanks-col-text { grid-column: 1; grid-row: 2; }
.thanks-cols .contact-page-lead { margin-top: 40px; max-width: none; }
.thanks-note { margin: 24px 0 0; font-size: var(--fs-note); line-height: 1.9; color: var(--ink);    letter-spacing: .04em; letter-spacing: round(.04em, 1px); }
.thanks-cols .thanks-photo { grid-column: 2; grid-row: 2; margin-top: 40px; }
.thanks-foot { grid-column: 1 / -1; grid-row: 3; margin-top: 40px; }
@media (max-width: 734px) {
  .thanks-cols { grid-template-columns: 1fr; }
  .thanks-col-text { grid-column: 1; grid-row: 2; }
  .thanks-cols .thanks-photo { grid-column: 1; grid-row: 3; margin-top: 40px; }
  .thanks-foot { grid-column: 1; grid-row: 4; }
}



.contact-cols { display: grid; grid-template-columns: 54.3% 40.7%; justify-content: space-between; align-items: start; padding: var(--page-top) 0 100px; }
.contact-col-head { position: sticky; top: var(--page-top); }
.contact-col-form { max-width: none; }
.contact-col-form .mktoForm { max-width: 414px; margin: 0 auto; }

.contact-photo { margin: 40px 0 0; }
.contact-photo img { display: block; width: 100%; height: auto; aspect-ratio: 709 / 455; object-fit: cover; border-radius: 10px; }

@media (max-width: 734px) { .contact-photo img { aspect-ratio: 2 / 1; } }

@media (min-width: 735px) and (max-width: 1068px) {
  .contact-col-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
  .contact-col-head .page-head { grid-column: 1 / -1; }
  .contact-page-lead { grid-column: 1; grid-row: 2; margin-top: 40px; max-width: none; }
  .contact-photo { grid-column: 2; grid-row: 2; margin-top: 40px; }
}

.contact-page-lead {
  max-width: var(--measure); margin: 40px 0 0;
  font-size: var(--fs-body); line-height: 1.9;
  letter-spacing: .04em; letter-spacing: round(.04em, 1px);
}
@media (max-width: 1068px) {
  .contact-cols { grid-template-columns: 1fr; gap: 40px; }
  .contact-col-head { position: static; }
  .contact-col-form .mktoForm { max-width: none; margin: 0; }
}

.mktoForm, .mktoForm * { font-family: inherit; }
.mktoForm { width: 100%; max-width: none; color: var(--ink); font-size: var(--fs-title); }
.mktoForm .mktoFormRow { margin: 0 0 24px; }
.mktoForm .mktoFormCol, .mktoForm .mktoFieldWrap { float: none; width: 100%; min-height: 0; }

.mktoForm .mktoFormRow:has(.mktoFormCol + .mktoFormCol) { display: flex; align-items: flex-start; gap: 12px; }
.mktoForm .mktoFormRow:has(.mktoFormCol + .mktoFormCol) .mktoFormCol { flex: 1 1 0; min-width: 0; }

.mktoForm .mktoFormRow:has(.mktoFormCol + .mktoFormCol) .mktoLabel.is-blank { display: flex; visibility: hidden; }
.mktoForm .mktoOffset, .mktoForm .mktoGutter, .mktoForm .mktoClear { display: none; }

.mktoForm .mktoLabel {
  display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 4px;
  float: none; width: auto; padding: 0; margin: 0 0 10px;
  min-height: 19px;
  font-size: var(--fs-meta); font-weight: 500; line-height: 19px; color: var(--ink);
  letter-spacing: .08em; letter-spacing: round(.08em, 1px);
}

.mktoForm .mktoLabel strong, .mktoForm .mktoLabel b { font-weight: inherit; }
.mktoForm .mktoAsterix { display: block; float: none; width: auto; color: #c0392b; font-size: inherit; line-height: 1; }
.mktoForm .mktoLabel.is-blank { display: none; }   

.mktoForm input[type="text"], .mktoForm input[type="email"], .mktoForm input[type="tel"],
.mktoForm input[type="url"], .mktoForm input[type="number"], .mktoForm select, .mktoForm textarea {
  display: block; width: 100%; box-sizing: border-box; float: none;
  appearance: none; -webkit-appearance: none;   
  font: inherit; font-size: var(--fs-title); line-height: 1.6; color: var(--ink);
  background: var(--field); border: 1px solid var(--field); border-radius: 8px;
  height: 48px; padding: 0 14px;
  transition: background-color .2s ease, border-color .2s ease;
}
.mktoForm textarea { height: auto; min-height: 168px; padding: 12px 14px; resize: vertical; }
.mktoForm input::placeholder, .mktoForm textarea::placeholder { color: #6b6b6b; }   
.mktoForm input:hover, .mktoForm select:hover, .mktoForm textarea:hover { background: var(--field-hover); border-color: var(--field-hover); }

.mktoForm input:focus, .mktoForm select:focus, .mktoForm textarea:focus {
  outline: none; background: var(--c-paper); border-color: var(--c-blue); box-shadow: 0 0 0 1px var(--c-blue);
}

.mktoForm select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23222222' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position: right 16px center; background-size: 12px 8px; background-repeat: no-repeat;
}

.mktoForm, .mktoForm .mktoFormRow, .mktoForm .mktoFieldWrap { box-shadow: none; }

.mktoForm .mktoInstruction { display: none; }
.mktoForm .mktoHtmlText {
  width: auto; margin: 0; font-size: var(--fs-meta); line-height: 1.7; color: var(--ink-sub);
  letter-spacing: .04em; letter-spacing: round(.04em, 1px);
}

.mktoForm .mktoFormRow:has(.mktoHtmlText) { margin-top: -16px; }
.mktoForm .mktoError { position: static; margin-top: 8px; }
.mktoForm .mktoError .mktoErrorArrowWrap { display: none; }
.mktoForm .mktoError .mktoErrorMsg {
  display: block; background: none; border: 0; box-shadow: none; text-shadow: none;
  padding: 0; color: #c0392b; font-size: var(--fs-meta); line-height: 19px;
  letter-spacing: .04em; letter-spacing: round(.04em, 1px);
}

.mktoForm .mktoButtonRow { display: block; margin-top: 32px; }
.mktoForm .mktoButtonWrap, .mktoForm .mktoButtonWrap.mktoInset { display: block; width: 100%; margin-left: 0; border: 0; background: none; }
.mktoForm button.mktoButton {
  appearance: none; position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0; height: 64px; padding: 0 56px;
  border: 1px solid var(--c-heading); border-radius: 9999px;
  background: var(--c-heading); color: var(--c-paper); cursor: pointer;
  font: inherit; font-size: var(--fs-title); font-weight: 600; letter-spacing: .04em; letter-spacing: round(.04em, 1px);
  transition: background-color .3s, color .3s;
}

@media (hover: hover) { .mktoForm button.mktoButton:hover { background: var(--c-paper); color: var(--c-heading); } }

.mkto-btn-arrow {
  position: absolute; right: 28px; top: 50%; translate: 0 -50%;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 24px; overflow: hidden;
}

.mkto-btn-arrow svg { width: 14px; height: auto; display: block; }
@media (hover: hover) { .mktoForm button.mktoButton:hover .mkto-btn-arrow svg { animation: pill-arrow 1s infinite; } }
@media (prefers-reduced-motion: reduce) {
  .mktoForm button.mktoButton:hover .mkto-btn-arrow svg { animation: none; }
}

.form-privacy { margin: 8px 0 40px; font-size: var(--fs-note); line-height: 1.9; color: var(--ink-sub); }
.form-privacy p { margin: 0 0 12px; }
.form-privacy p:last-child { margin-bottom: 0; }
.form-privacy-head { margin-top: 24px; color: var(--ink); font-weight: 500; }
.form-privacy-head:first-child { margin-top: 0; }
.form-privacy-sub { margin-top: 16px; color: var(--ink); }
.form-privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 734px) { .contact-page-lead br { display: none; } }


.page-title {
  margin: 0;
  font-family: var(--font-sans-en); font-weight: 600;
  font-size: var(--fs-sec); line-height: 1.3;
  letter-spacing: -.03em; letter-spacing: round(-.03em, 1px);   
}

.topics-rows { border-top: 1px solid var(--rule); }
.topics-row {
  display: grid; grid-template-columns: 1fr 200px; gap: 24px;
  align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}

.topics-row[hidden] { display: none; }

.topics-rows--thumb-left .topics-row {
  grid-template-columns: 200px 1fr;
  column-gap: var(--col-gap);
}
.topics-rows--thumb-left .topics-row-thumb { grid-column: 1; grid-row: 1; }
.topics-rows--thumb-left .topics-row-main  { grid-column: 2; grid-row: 1; }

.topics-row-meta { display: flex; align-items: center; gap: 10px; }
.topics-row-meta .news-date { width: auto; }
.topics-row-title {
  display: block; margin-top: 12px;
  font-size: var(--fs-link); font-weight: 500; line-height: 1.5;
  letter-spacing: .03em; letter-spacing: round(.03em, 1px);
}

.topics-row-thumb { display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 1200 / 630; }
.topics-row-thumb img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: scale .5s cubic-bezier(.22,1,.36,1);
}
.topics-row:hover .topics-row-thumb img { scale: 1.04; }
@media (prefers-reduced-motion: reduce) { .topics-row-thumb img { transition: none; } }
.topics-row-ph {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1200 / 630; border: 1px dashed var(--rule); border-radius: 10px;
  color: var(--ink-sub); font-size: var(--fs-meta);
}
@media (max-width: 734px) {

  .topics-row, .topics-rows--thumb-left .topics-row { grid-template-columns: 1fr; gap: 16px; }
  .topics-row-thumb, .topics-rows--thumb-left .topics-row-thumb { grid-row: 1; grid-column: 1; }
  .topics-row-main,  .topics-rows--thumb-left .topics-row-main  { grid-row: 2; grid-column: 1; }
  
  .topics-row-title { font-size: var(--fs-title); line-height: 1.5; }
}

.article { padding: 0 0 100px; }
.article-head, .article-media, .article-body, .article-foot {
  max-width: var(--article-col); margin-inline: auto;
}
.article-head { padding: var(--page-top) 0 0; }

.article-meta { display: flex; align-items: baseline; gap: 16px; margin: 25px 0 0; }
.article-meta .news-date { width: auto; }
.article-svc { font-family: var(--font-en); font-size: var(--fs-meta); letter-spacing: .14em; letter-spacing: round(.14em, 1px); color: var(--ink); }
.article-title {
  margin: 0; font-family: var(--font-jp); font-weight: 700;
  font-size: clamp(var(--fs-h2), 2.6vw, var(--fs-h1)); letter-spacing: .03em; letter-spacing: round(.03em, 1px); line-height: 1.5;
  font-size: clamp(var(--fs-h2), round(2.6vw, 1px), var(--fs-h1));
}

.article-media { margin-top: 33px; }
.article-media img {

  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
  object-fit: cover; border-radius: 10px;
}
.article-media-ph {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1200 / 630; border: 1px dashed var(--rule); border-radius: 10px;
  color: var(--ink-sub); font-size: var(--fs-meta);
}
.article-body {
  padding: 42px 0 0;
  font-size: var(--fs-body); line-height: 2; letter-spacing: .04em; letter-spacing: round(.04em, 1px);
  text-align: justify; text-justify: inter-ideograph;
}
.article-body > * { margin: 0 0 2em; }
.article-body h2 {
  font-family: var(--font-jp); font-size: var(--fs-h2); font-weight: 700;
  letter-spacing: .06em; letter-spacing: round(.06em, 1px); line-height: 1.5;
  margin: 3em 0 1.2em; padding-bottom: .5em; border-bottom: 1px solid var(--rule);
}
.article-body h2:first-child { margin-top: 0; }
.article-body ul, .article-body ol { padding-left: 1.6em; }
.article-body li { margin-bottom: .6em; }
.article-body a { color: var(--c-blue); text-underline-offset: .25em; }
.article-body figure { margin: 0 0 2em; }

.article-body img { display: block; max-width: 100%; height: auto; }
.article-body figcaption { margin-top: .8em; font-size: var(--fs-meta); color: var(--ink); letter-spacing: .04em; letter-spacing: round(.04em, 1px); text-align: left; }
.article-body .dl { display: grid; grid-template-columns: 8em 1fr; gap: 8px 20px; font-size: var(--fs-title); text-align: left; }
.article-body .dl dt { color: var(--ink); font-size: var(--fs-meta); letter-spacing: .06em; letter-spacing: round(.06em, 1px); }
.article-body .dl dd { margin: 0; }
.article-foot { margin: 60px auto 0; padding-top: 30px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 20px 34px; }
@media (max-width: 734px) {
  .article-body .dl { grid-template-columns: 1fr; gap: 2px; }
  .article-body .dl dt { margin-top: 12px; }
}


.err { min-height: calc(100dvh - var(--nav-h) - 200px); display: flex; align-items: center; padding: 100px 0; }
.err-code { margin: 0 0 20px; font-family: var(--font-en); font-size: var(--fs-h2); font-weight: 700; letter-spacing: .1em; letter-spacing: round(.1em, 1px); color: var(--ink); }
.err-title { margin: 0 0 20px; font-family: var(--font-jp); font-weight: 600; font-size: var(--fs-sec); line-height: 1.5; }   
.err-text { margin: 0 0 36px; font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; letter-spacing: round(.05em, 1px); color: var(--ink); max-width: 30em; }

.news-list.is-digest .news-item:nth-child(n+4) { display: none; }

.placeholder {
  border: 1px dashed var(--rule) !important;
  color: var(--ink) !important;
}
.placeholder:hover { background: transparent !important; color: var(--ink-sub) !important; }
.svc-concept.placeholder { display: inline-block; padding: 4px 11px; }



.article-title, .topics-row-title, .info-title, .news-title { text-wrap: pretty; }

a, button, .spine-btn { touch-action: manipulation; }
.spine-btn { -webkit-tap-highlight-color: transparent; }   

.hero.is-still h1 .cursor { animation: none; opacity: 1; }   

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.works-fallback { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.works-fallback li { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-body, 16px); line-height: 1.6; }
.works-fallback a { color: inherit; }
.works-fallback-meta { font-size: var(--fs-meta); color: var(--ink-sub); }
html.js .works-fallback { display: none; }


@media (min-width: 1069px) { .shelf-nav { display: none; } }


html.js .contact-col-form { min-height: 1324px; }

html.js .contact-col-form .mktoForm:not(.is-ready) { visibility: hidden; }   
@media (min-width: 471px)  { html.js .contact-col-form { min-height: 1263px; } }   
@media (min-width: 541px)  { html.js .contact-col-form { min-height: 1242px; } }   
@media (min-width: 621px)  { html.js .contact-col-form { min-height: 1181px; } }   
@media (min-width: 1069px) { html.js .contact-col-form { min-height: 1263px; } }   


html.wf-loading main { visibility: hidden; }

html.wf-loading .nav *, html.wf-loading .footer * { color: transparent !important; }