@charset "UTF-8";

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  color: #966464;
  font-family: "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.5;
  background-color: #fafafa;
  background-image: url("../media/works/image-001.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom center;
  background-size: cover;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; }
[hidden] { display: none !important; }

.site-header { position: sticky; top: 0; z-index: 50; color: #5c4444; background: rgba(255, 255, 255, .94); border-bottom: 1px solid rgba(150, 100, 100, .18); backdrop-filter: blur(12px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; width: min(100%, 1200px); height: 80px; padding: 0 20px; margin: auto; }
.site-brand { display: flex; gap: .75rem; align-items: center; color: inherit; text-decoration: none; }
.site-brand__icon { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; }
.site-logo { display: flex; flex-direction: column; line-height: 1.1; }
.site-logo__main { font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: 900; letter-spacing: .04em; }
.site-logo__sub { margin-top: 4px; color: #8c7774; font-size: .68rem; font-weight: 800; letter-spacing: .15em; }
.desktop-nav { display: flex; align-self: stretch; }
.desktop-nav a { display: flex; align-items: center; justify-content: center; min-width: 112px; font-size: .88rem; font-weight: 700; text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.desktop-nav a:hover { color: #e67700; background: rgba(230, 119, 0, .07); }
.menu-button { display: none; width: 46px; height: 46px; padding: 11px; background: #e67700; border: 0; border-radius: 50%; }
.menu-button span { display: block; height: 2px; margin: 4px 0; background: #fff; }
.mobile-nav { padding: 10px 20px 20px; background: #fff; }
.mobile-nav a { display: block; padding: 12px; font-weight: 800; text-align: center; text-decoration: none; border-bottom: 1px solid rgba(150, 100, 100, .18); }

:root {
  --section-padding: clamp(1rem, .781rem + .899vw, 1.5rem);
  --hybrid-max-text: 1000px;
  --hybrid-radius: 18px;
  --hybrid-shadow: 0 18px 45px rgba(27, 18, 16, .12);
  --hybrid-surface: #fff;
  --hybrid-muted: #8c7774;
  --hybrid-accent: #966464;
  --hybrid-line: rgba(150, 100, 100, .18);
}

.reproduction-first-illustration,
.reproduction-contact-illustration { width: 100%; }
.reproduction-first-illustration img,
.reproduction-contact-illustration img { display: block; width: min(calc(100% - var(--section-padding) - var(--section-padding)), 1232px); height: auto; margin: 0 auto; object-fit: contain; }

.l-section__container { max-width: 1280px; padding: var(--section-padding); margin: auto; }
.l-section { scroll-margin-top: 5rem; }
h2.c-section-title { padding: .25rem 0; color: #966464; font-size: clamp(1.5rem, 1.281rem + .899vw, 2rem); text-align: center; }
.l-home-galleries { display: grid; grid-template-columns: 1fr; gap: 3rem 1rem; margin-top: 3rem; }
.p-galleries { display: grid; gap: 1rem; }
.p-galleries__title * { color: #966464; font-size: clamp(1rem, .89rem + .449vw, 1.25rem); line-height: 1.5; text-align: center; }
.p-galleries__title a { transition: color .3s; }
.p-galleries__title a:hover { color: #e00; }
.p-galleries__ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem; justify-items: center; padding: 0; }
.p-galleries__li { width: 100%; list-style: none; }
.p-galleries__li a { display: block; width: 100%; }
.p-galleries__li img { display: block; width: 100%; height: auto !important; max-height: none !important; margin: 0 auto; object-fit: contain !important; }
.p-galleries.is-poc-hidden { display: none; }
.is-gallery-modal-open { overflow: hidden; }
.gallery-modal { width: 100vw; max-width: none; height: 100vh; max-height: none; padding: 0; margin: auto; overflow: hidden; color: #fff; background: transparent; border: 0; }
.gallery-modal::backdrop { background: rgba(20, 16, 16, .9); }
.gallery-modal__panel { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; gap: 1rem; align-items: center; width: 100%; height: 100%; padding: 2rem; }
.gallery-modal__figure { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; justify-items: center; min-width: 0; height: 100%; }
.gallery-modal__image { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 8rem); object-fit: contain; }
.gallery-modal__caption { max-width: 70rem; font-size: .875rem; text-align: center; }
.gallery-modal__count { font-size: .75rem; font-weight: 800; }
.gallery-modal__close, .gallery-modal__move { display: grid; place-items: center; color: #fff; background: rgba(45, 37, 37, .8); border: 1px solid rgba(255, 255, 255, .38); border-radius: 50%; cursor: pointer; }
.gallery-modal__close { position: absolute; top: 1rem; right: 1rem; z-index: 1; width: 3rem; height: 3rem; font-size: 2rem; }
.gallery-modal__move { width: 4rem; height: 4rem; font-size: 1.75rem; }
.gallery-modal__close:hover, .gallery-modal__move:hover { background: #e67700; }
.c-show-more-button { display: flex; align-items: center; justify-content: center; max-width: 300px; padding: 1rem 0; margin: 3rem auto; color: #fafafa; font-size: clamp(1rem, .89rem + .449vw, 1.25rem); font-weight: 800; background: #e67700; border-radius: 15px; box-shadow: 2px 2px 4px rgba(125, 125, 125, .3); }
.c-show-more-button:hover { cursor: pointer; background: #ff901a; }

.hybrid-section { scroll-margin-top: 5rem; padding: clamp(4rem, 9vw, 7rem) 0; color: #5c4444; line-height: 1.75; }
.hybrid-section__inner { max-width: var(--hybrid-max-text); padding: 0 1.5rem; margin: auto; }
.hybrid-section__title { margin: 0 0 2.375rem; color: var(--hybrid-accent); font-size: clamp(1.6rem, 4vw, 2.25rem); text-align: center; letter-spacing: .08em; }
.hybrid-profile { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.75rem; align-items: center; }
.hybrid-profile__media { width: 250px; }
.hybrid-profile__media video { display: block; width: 100%; height: auto; object-fit: contain; }
.hybrid-profile__copy h3 { margin: 0 0 1.25rem; font-size: clamp(1.25rem, 3vw, 1.75rem); }
.hybrid-profile__copy h3 small { display: inline-block; color: var(--hybrid-muted); font-size: .72em; }
.hybrid-profile__copy p { margin: 0 0 .75rem; }
.hybrid-contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem; }
.hybrid-contact__block { padding: clamp(1.375rem, 4vw, 2.125rem); background: var(--hybrid-surface); border: 1px solid var(--hybrid-line); border-radius: var(--hybrid-radius); box-shadow: 0 10px 28px rgba(70, 47, 44, .07); }
.hybrid-contact__block h3 { margin: 0 0 .75rem; color: var(--hybrid-accent); font-size: 1.25rem; }
.hybrid-contact__block h3:not(:first-child) { margin-top: 2rem; }
.hybrid-contact__block p { margin: 0 0 1.25rem; }
.hybrid-contact__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.hybrid-contact__links a { padding: .4375rem .6875rem; color: var(--hybrid-accent); font-size: .78rem; font-weight: 800; text-decoration: none; background: rgba(150, 100, 100, .08); border: 1px solid var(--hybrid-line); border-radius: 999px; }
.hybrid-schedule { display: grid; gap: .5rem; padding: 0; margin: 1.125rem 0; list-style: none; }
.hybrid-schedule li { display: grid; grid-template-columns: 1fr 3rem; align-items: center; padding: .5625rem .75rem; background: rgba(150, 100, 100, .06); border-radius: 10px; }
.hybrid-schedule strong { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: #fff; background: #ad7b68; border-radius: 50%; }
.hybrid-schedule li[data-status="◎"] strong { background: #5b956d; }
.hybrid-schedule li[data-status="○"] strong { background: #6f8fa5; }
.hybrid-schedule li[data-status="△"] strong { background: #c18443; }
.hybrid-schedule li[data-status="✕"] strong { background: #a35b61; }
.hybrid-schedule__legend { margin: 1.125rem 0 0; font-size: .77rem; }
.hybrid-schedule__legend div { display: grid; grid-template-columns: 2rem 1fr; }
.hybrid-schedule__legend dt { font-weight: 900; }
.hybrid-schedule__legend dd { margin: 0; }

.p-footer { padding: 1rem 0; }
.p-footer__container { display: flex; flex-direction: column; align-items: center; text-align: center; }
.p-footer__row { display: flex; justify-content: center; }
.p-footer__text { padding: .25rem 0; color: #333; font-size: .75rem; opacity: .8; }
.c-sns-icons { padding: 0; }
.c-sns-icons__item { list-style: none; }
.c-scroll-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; color: #333; text-decoration: none; background: orange; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); }
.asset-placeholder { display: grid; place-items: center; min-width: 260px; min-height: 180px; padding: 1rem; color: #765b5b; font-weight: 800; text-align: center; background: #eadbd4; border: 1px dashed #b79182; }
.asset-fallback { display: inline; }

@media (max-width: 767px) {
  body { background-image: none; }
  .desktop-nav { display: none; }
  .menu-button { display: block; }
  .site-header__inner { height: 70px; }
  .p-galleries__ul { grid-template-columns: 1fr; }
  .hybrid-profile, .hybrid-contact__grid { grid-template-columns: 1fr; }
  .hybrid-profile { text-align: center; }
  .hybrid-profile__media { width: min(70vw, 230px); margin: auto; }
  .gallery-modal__panel { grid-template-columns: 3rem minmax(0, 1fr) 3rem; gap: .25rem; padding: 4rem .5rem 1rem; }
  .gallery-modal__move { width: 3rem; height: 3rem; }
  .gallery-modal__image { max-height: calc(100vh - 9rem); }
  }

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

.link-label { color: inherit; }
.gallery-image-link { display: block; width: 100%; }