:root { --paper:#fbf8f4; --ink:#222; --muted:#77736d; --line:#ccc8c1; }
html { scroll-behavior:smooth; overscroll-behavior:none; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Zen Old Mincho",serif; font-size:.9rem; line-height:2.2; letter-spacing:.05em; -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
a { color:inherit; }
img { display:block; max-width:100%; }
.skip-link { position:fixed; top:12px; left:12px; z-index:2000; padding:6px 12px; color:#fff; background:var(--ink); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }

.logo { position:fixed; top:50%; left:45px; z-index:999; display:block; transform:translateY(-50%); }
.logo img { width:16px; height:auto; }
.header-text { position:fixed; right:24px; bottom:45px; z-index:999; margin:0; font-size:.9rem; line-height:1.5; text-align:right; }
.menu-btn { position:fixed; top:24px; right:24px; z-index:1000; display:flex; flex-direction:column; justify-content:center; gap:8px; width:90px; height:90px; padding:0; background:transparent; border:0; cursor:pointer; }
.menu-btn span { display:block; width:100%; height:1px; background:var(--ink); transition:.6s; }
.menu-btn[aria-expanded="true"] { gap:0; }
.menu-btn[aria-expanded="true"] span:first-child { transform:rotate(20deg) translateY(.5px); }
.menu-btn[aria-expanded="true"] span:last-child { transform:rotate(-20deg) translateY(-.5px); }
.menu { position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center; background:var(--paper); opacity:0; visibility:hidden; transition:.6s; }
.menu.is-open { opacity:1; visibility:visible; }
.menu ul { margin:0; padding:0; list-style:none; text-align:center; }
.menu li+li { margin-top:24px; }
.menu a { color:var(--ink); font-size:2rem; text-decoration:none; }

.container { width:min(1280px,100%); margin-inline:auto; padding:90px; }
.container-lower { width:min(1000px,100%); margin-inline:auto; padding:90px; }
.page-intro { padding-top:150px; padding-bottom:140px; }
.page-title { margin:0 0 60px; font-size:1.3rem; font-weight:600; line-height:1.6; }
.intro-text { width:min(640px,100%); margin-inline:auto; line-height:3; }
.intro-text p { margin:0 0 42px; }
.intro-text p:last-child { margin-bottom:0; }
.page-intro__copy { margin-top:90px; }
.vertical { width:fit-content; margin:90px auto; font-size:1.3rem; font-weight:400; letter-spacing:.7em; line-height:1.5; writing-mode:vertical-rl; white-space:nowrap; }
.vertical--light { margin:0; color:#fff; }
.vertical--page { margin:0 auto; font-size:1.45rem; letter-spacing:.45em; }

.field-story { position:relative; min-height:700px; color:#fff; background:url("../img/top-img_field-bg.jpg") center/cover; }
.field-story::before { position:absolute; inset:0; background:rgba(0,0,0,.38); content:""; }
.field-story__content { position:relative; z-index:1; width:min(1080px,100%); margin-inline:auto; padding:120px 90px; }
.field-story__text { width:100%; }
.field-story__text p { margin:0 0 90px; line-height:3; }
.field-story__text p:last-child { margin-bottom:0; }

.work { padding-top:120px; padding-bottom:150px; }
.work-field-image { width:min(640px,100%); aspect-ratio:16/9; margin:0 auto 60px; overflow:hidden; }
.work-field-image img { width:100%; height:100%; object-fit:cover; }
.work-foundation { margin-bottom:150px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.work-item { align-items:center; width:1080px; max-width:100%; margin:0 auto 180px; }
.work-item:last-child { margin-bottom:30px; }
.work-item--reverse .work-item__visual { order:2; }
.work-item--reverse .work-item__text { order:1; }
.work-item__visual>img,.work-item__visual .photo-placeholder { width:85%; }
.image-align-left>img { margin-right:auto; padding:18px; }
.image-align-right .photo-placeholder { margin-left:auto; }
.work-item__text { padding-inline:45px; }
.work-item__number,.profile-role { margin-bottom:12px; color:var(--muted); font-size:.78rem; }
.work-item__text h3 { margin:0 0 42px; padding-bottom:12px; border-bottom:1px solid var(--ink); font-size:1rem; font-weight:400; }
.profile-copy h3 { margin:0 0 42px; font-size:1rem; font-weight:400; }
.work-item__text>p:not(.work-item__number) { margin:0 0 24px; }
.photo-placeholder { position:relative; aspect-ratio:4/3; margin:0; overflow:hidden; background:#e5e3de; }
.photo-placeholder>img { width:100%; height:100%; object-fit:cover; }
.photo-placeholder>img+figcaption { display:none; }
.photo-placeholder figcaption { position:absolute; inset:0; display:grid; place-items:center; color:#8f8c85; font-size:.72rem; letter-spacing:.12em; }
.timeline { margin:42px 0; border-top:1px solid var(--line); }
.timeline div { display:grid; grid-template-columns:70px 1fr; padding:11px 0; border-bottom:1px solid var(--line); }
.timeline dt { color:var(--muted); font-size:.75rem; }
.timeline dd { margin:0; }
.product-images { position:relative; min-height:560px; }
.product-images img { position:absolute; width:67%; padding:18px; background:var(--paper); }
.product-images__first { top:0; left:0; }
.product-images__second { right:0; bottom:0; }

.line-link,.arrow-link { display:inline-flex; gap:12px; align-items:center; margin-top:36px; color:var(--ink); text-decoration:none; }
.line,.arrow { position:relative; display:inline-block; width:200px; height:1px; background:var(--ink); border-radius:9999px; transform:translateY(2px); transform-origin:right center; transition:transform .6s; }
.arrow::before { position:absolute; top:calc(50% - .5px); right:0; width:12px; height:1px; background:var(--ink); transform:rotate(24deg); transform-origin:calc(100% - .5px) 50%; content:""; }
.line-link:hover .line,.line-link:focus-visible .line,.arrow-link:hover .arrow,.arrow-link:focus-visible .arrow { transform:translateY(2px) scaleX(0); }

.profile { padding-top:150px; padding-bottom:150px; border-top:1px solid var(--line); }
.profile-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:72px; align-items:start; }
.photo-placeholder--profile { width:85%; aspect-ratio:4/5; }
.profile-copy h3 span { margin-left:18px; color:var(--muted); font-size:.72rem; font-weight:400; }
.site-footer { padding:90px 0 45px; }
.viewer { width:100vw; overflow:hidden; }
.track { display:flex; width:max-content; animation:panorama 75s linear infinite; }
.track img { display:block; width:5000px; max-width:none; height:600px; }
@keyframes panorama { to { transform:translateX(-50%); } }
.footer-navi { display:flex; align-items:center; justify-content:space-between; margin:30px 45px; font-size:.8rem; }
.footer-navi__left { display:flex; gap:30px; }
.footer-navi a { color:var(--ink); text-decoration:none; transition:opacity .6s; }
.footer-navi a:hover { opacity:.5; }
.footer-navi p { margin:0; }
:focus-visible { outline:1px solid currentColor; outline-offset:6px; }

@media (max-width:768px) {
  .logo,.header-text { display:none; }
  .menu-btn { top:9px; right:12px; width:60px; height:60px; }
  .menu a { font-size:1.15rem; }
  .menu li+li { margin-top:12px; }
  .container { width:100%; padding:90px 30px; }
  .container-lower { width:100%; padding:70px 30px; }
  .page-intro { padding-top:105px; padding-bottom:90px; }
  .page-title { margin-bottom:45px; font-size:1.1rem; }
  .intro-text { width:100%; padding-inline:12px; line-height:2.4; }
  .page-intro__copy { margin-top:60px; padding-top:0; }
  .vertical--page { font-size:1.2rem; }
  .vertical { margin:75px auto; font-size:1.1rem; }
  .field-story { min-height:auto; }
  .field-story__content { width:100%; padding:90px 36px; }
  .field-story__text p { margin-bottom:42px; line-height:2.5; }
  .work { padding-top:45px; }
  .work-field-image { width:calc(100% - 24px); margin-bottom:45px; }
  .work-foundation { margin-bottom:100px; }
  .grid-2,.profile-grid { grid-template-columns:1fr; gap:36px; }
  .work-item { margin-bottom:120px; }
  .work-item--reverse .work-item__visual,.work-item--reverse .work-item__text { order:initial; }
  .work-item__visual>img,.work-item__visual .photo-placeholder { width:80%; }
  .image-align-left>img { padding:18px 0 0; }
  .work-item__text { padding:0; }
  .product-images { min-height:430px; }
  .product-images img { padding:10px; }
  .line,.arrow { width:120px; }
  .profile { padding-top:90px; padding-bottom:90px; }
  .photo-placeholder--profile { width:80%; }
  .profile-copy h3 span { display:block; margin:5px 0 0; }
  .timeline div { grid-template-columns:56px 1fr; }
  .site-footer { padding-top:70px; }
  .track img { width:3500px; height:auto; }
  .footer-navi { align-items:flex-start; margin:30px 18px; font-size:.72rem; }
  .footer-navi__left { flex-direction:column; gap:8px; }
  .footer-navi p { max-width:170px; text-align:right; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; }
  .track { animation:none; }
}