:root {
  --ink: #2f2b29;
  --ink-soft: #5f5853;
  --paper: #f5f3ef;
  --white: #fff;
  --warm: #ffffff;
  --soft: #ece9e5;
  --line: rgba(47, 43, 41, .18);
  --accent: #8d6a76;
  --header-height: 68px;
  --serif-en: "Cormorant Garamond", serif;
  --serif-ja: "Noto Serif JP", "Yu Mincho", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif-ja);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  padding: .7rem 1rem;
  background: var(--white);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(20px, 4vw, 72px);
  background: rgba(245, 243, 239, .82);
  border-bottom: 1px solid rgba(47, 43, 41, .08);
  backdrop-filter: blur(12px);
}
.header-logo {
  justify-self: start;
  text-decoration: none;
  font-family: var(--serif-en);
  font-size: 1.25rem;
  letter-spacing: .04em;
}
.desktop-nav { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.desktop-nav a { text-decoration: none; font-family: var(--serif-en); font-size: .98rem; color: var(--ink-soft); }
.desktop-nav a:hover { color: var(--ink); }
.menu-button { display: none; justify-self: end; width: 42px; height: 42px; border: 0; background: transparent; }
.menu-button > span:not(.sr-only) { display: block; width: 24px; height: 1px; margin: 6px auto; background: var(--ink); transition: transform .25s ease; }
.menu-button[aria-expanded="true"] > span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu, .menu-backdrop { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--white);
}
.hero-media, .hero-media img, .hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; }
.hero-overlay { background: linear-gradient(180deg, rgba(9,8,7,.26), rgba(9,8,7,.55)); }
.hero-content { position: relative; top: clamp(32px, 5vh, 56px); z-index: 1; width: min(900px, 88vw); text-align: center; }
.hero-eyebrow, .section-kicker, .work-index, .service-number, .price-type {
  margin: 0 0 1rem;
  font-family: Arial, sans-serif;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.hero h1 { margin: 0; font-family: var(--serif-en); font-size: clamp(3.5rem, 8vw, 7.6rem); font-weight: 400; line-height: .95; }
.hero-copy { margin: 1.25rem 0 2rem; font-size: clamp(1rem, 1.7vw, 1.35rem); letter-spacing: .12em; }
.hero-scroll { position: absolute; right: clamp(20px, 4vw, 72px); bottom: 26px; margin: 0; font-family: Arial, sans-serif; font-size: .58rem; letter-spacing: .3em; writing-mode: vertical-rl; }

.text-link { display: inline-flex; gap: .65rem; align-items: center; text-decoration: none; padding-bottom: .25rem; border-bottom: 1px solid currentColor; font-family: var(--serif-en); letter-spacing: .05em; }
.text-link--light { color: var(--white); }

.section { padding: clamp(88px, 11vw, 160px) clamp(0px, 0vw, 110px); }
.section--dark { background: #0d0d0d; color: var(--white); }
.section--warm { background: var(--warm); }
.section--soft { background: var(--soft); }
.section-heading { width: min(1200px, 100%); margin: 0 auto clamp(52px, 7vw, 92px); text-align: center; }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 4.6rem); font-weight: 400; line-height: 1.4; }
.section-heading--light { color: var(--white); }
.section-description { max-width: 62ch; margin: 1.4rem auto 0; color: var(--ink-soft); }
.section-heading--light .section-description { color: rgba(255,255,255,.68); }

#message-title {
  max-width: 1200px;
  margin-inline: auto;
  font-size: clamp(2rem, 4vw, 4.6rem);
  
  line-height: 1.35;
}
.message-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 120px); align-items: start; }
.message-lead { margin: 0; font-size: clamp(1.45rem, 2.3vw, 2.25rem); line-height: 1.65; }
.message-body p { max-width: 52ch; margin: 0 0 1.5rem; color: var(--ink-soft); }

.featured-work { max-width: 1320px; margin: 0 auto clamp(74px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: clamp(30px, 5vw, 76px); align-items: center; }
.featured-work-media, .work-card-media { display: block; overflow: hidden; background: #171717; }
.featured-work-media { aspect-ratio: 16 / 9; }
.featured-work-media img, .work-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.featured-work-media:hover img, .work-card-media:hover img { transform: scale(1.025); }
.featured-work-copy h3 { margin: 0 0 1.2rem; font-family: var(--serif-en); font-size: clamp(2.4rem, 4.2vw, 5rem); font-weight: 400; line-height: .95; }
.featured-work-copy > p:not(.work-index) { color: rgba(255,255,255,.66); }
.work-tags { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.8rem 0; list-style: none; }
.work-tags li { padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.22); font-family: Arial, sans-serif; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.works-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 5vw, 70px); }
.work-card-media { aspect-ratio: 3 / 2; }
.work-card-copy { padding-top: 1.4rem; }
.work-card-copy h3 { margin: 0 0 .65rem; font-family: var(--serif-en); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 400; }
.work-card-copy p:last-child { color: rgba(255,255,255,.62); }

.service-list { max-width: 1120px; margin: 0 auto; border-top: 1px solid var(--line); }
.service-item { display: grid; grid-template-columns: 90px 1fr 1.2fr; gap: 2rem; align-items: baseline; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.service-item h3 { margin: 0; font-family: var(--serif-en); font-size: clamp(1.7rem, 2.8vw, 2.8rem); font-weight: 400; }
.service-item > p:last-child { margin: 0; color: var(--ink-soft); }

.price-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(47,43,41,.2); border: 1px solid rgba(47,43,41,.2); }
.price-card { min-height: 380px; display: flex; flex-direction: column; padding: clamp(28px, 4vw, 52px); background: rgba(255, 255, 255, 0.72); }
.price-card--featured { background: var(--ink); color: var(--white); }
.price-card h3 { margin: 0; font-size: 1.25rem; font-weight: 500; }
.price-amount { margin: auto 0 1.5rem; font-family: var(--serif-en); font-size: clamp(2.5rem, 4vw, 4.6rem); line-height: 1; }
.price-amount span { font-size: .34em; vertical-align: .35em; }
.price-card > p:last-child { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.price-card--featured > p:last-child { color: rgba(255,255,255,.68); }
.price-footnote { max-width: 850px; margin: 2rem auto 0; text-align: center; color: var(--ink-soft); font-size: .9rem; }

.process-list { max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: 110px 1fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.process-list li > span { font-family: var(--serif-en); font-size: 2rem; color: rgba(47,43,41,.35); }
.process-list h3 { margin: 0 0 .35rem; font-family: var(--serif-en); font-size: 2rem; font-weight: 400; }
.process-list p { margin: 0; color: var(--ink-soft); }

.price-details {
  max-width: 1200px;
  margin: 3rem auto 0;
  border-top: 1px solid rgba(47, 42, 39, 0.24);
  border-bottom: 1px solid rgba(47, 42, 39, 0.24);
}

.price-detail-block {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) 1fr;
  gap: 2rem;
  padding: 1.6rem 0;
}

.price-detail-block + .price-detail-block {
  border-top: 1px solid rgba(47, 42, 39, 0.16);
}

.price-detail-label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.price-detail-block p {
  margin-top: 1rem;
  line-height: 1.7;
}

.price-detail-note {
  margin-top: 0.7rem !important;
  color: rgba(47, 42, 39, 0.65);
  font-size: 0.88rem;
}

@media (max-width: 768px) {
  .price-detail-block {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}


.faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; }
.faq-item button { width: 100%; display: flex; justify-content: space-between; gap: 2rem; padding: 1.7rem 0; border: 0; background: transparent; color: var(--ink); text-align: left; font-weight: 400; }
.faq-item button span { transition: transform .25s ease; }
.faq-item button[aria-expanded="true"] span { transform: rotate(45deg); }
.faq-answer { padding: 0 0 1.8rem; color: var(--ink-soft); }
.faq-answer p { margin: 0; }

.contact { background: #f8f7f4; }
.contact-layout { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.35fr .85fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.contact-layout .section-heading { margin: 0; text-align: left; }
.contact-layout .section-heading h2 { font-size: clamp(1.5rem, 3.4vw, 3.8rem); white-space: nowrap; }
.contact-form { display: grid; gap: .7rem; }
.contact-form label { margin-top: .8rem; font-size: .88rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: .9rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); }
.contact-form textarea { resize: vertical; }
.contact-form small { color: var(--ink-soft); }
.contact-form button { justify-self: start; margin-top: 1.5rem; padding: .85rem 1.5rem; border: 1px solid var(--ink); background: var(--ink); color: var(--white); }
.contact-copy { max-width: 720px; }
.contact-title { max-width: 12ch; }
.hp-field { position: absolute; left: -9999px; }

.footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 1.8rem clamp(20px, 4vw, 72px); background: var(--ink); color: rgba(255,255,255,.7); font-family: Arial, sans-serif; font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; }
.footer-logo { justify-self: start; color: var(--white); font-family: var(--serif-en); font-size: 1.1rem; text-decoration: none; text-transform: none; }
.footer p { margin: 0; }
.footer p:last-child { justify-self: end; }

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .menu-button { display: block; }
  .mobile-menu {
    position: fixed; top: 0; right: 0; z-index: 1001; width: min(84vw, 360px); height: 100svh;
    display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: 70px 42px;
    background: var(--paper); transform: translateX(100%); transition: transform .35s ease;
  }
  .mobile-menu:not([hidden]) { transform: translateX(0); }
  .mobile-menu a { text-decoration: none; font-family: var(--serif-en); font-size: 1.8rem; }
  .menu-backdrop { position: fixed; inset: 0; z-index: 999; display: block; background: rgba(0,0,0,.32); }
  .featured-work { grid-template-columns: 1fr; }
  .featured-work-copy { max-width: 640px; }
  .price-grid { grid-template-columns: 1fr; }
  .price-card { min-height: 300px; }
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  :root { --header-height: 58px; }
  .section { padding: 78px 20px; }
  .hero-content { text-align: left; }
  .hero h1 { font-size: clamp(3.8rem, 18vw, 6.2rem); }
  .hero-copy { letter-spacing: .07em; }
  .hero-scroll { display: none; }
  .section-heading { text-align: left; margin-bottom: 48px; }
  .message-grid, .works-grid { grid-template-columns: 1fr; gap: 36px; }
  .service-item { grid-template-columns: 42px 1fr; gap: 1rem; }
  .service-item > p:last-child { grid-column: 2; }
  .process-list li { grid-template-columns: 58px 1fr; gap: 1rem; }
  .footer { grid-template-columns: 1fr; text-align: center; }
  .footer-logo, .footer p:last-child { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media (max-width: 768px) {
  .hero-content {
    width: 100%;
    padding: 0 20px;
    text-align: left;
    transform: translateY(20px);
  }

  .hero-title {
    max-width: 100%;
    font-size: clamp(3.6rem, 18vw, 5.4rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
  }

  .hero-subtitle {
    margin-top: 1.8rem;
    font-size: 1rem;
    line-height: 1.7;
  }

  .hero-cta {
    margin-top: 2rem;
  }
}
/* =========================
   Works — hero image parallax / glass layer
========================== */
#works {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background-color: #5f5b58;
  background-image: image-set(
    url('/images/IMG_0005-1920.avif') type('image/avif'),
    url('/images/IMG_0005-1920.webp') type('image/webp'),
    url('/images/top.webp') type('image/webp')
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 明るいガラス膜。背景写真を残しつつ、作品が読める濃度にする */
#works::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: rgba(232, 228, 224, .48);
  -webkit-backdrop-filter: blur(5px) saturate(.72);
  backdrop-filter: blur(5px) saturate(.72);
}

/* 下地を少し締め、白文字と作品画像のコントラストを安定させる */
#works::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(30, 27, 25, .38), rgba(30, 27, 25, .52)),
    rgba(71, 67, 64, .16);
  pointer-events: none;
}

#works > * {
  position: relative;
  z-index: 1;
}

/* 写真の上に置いた作品面だけ、薄いガラス板のように浮かせる */
#works .featured-work,
#works .work-card {
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(13, 13, 13, .22);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

#works .featured-work {
  padding: clamp(18px, 2.6vw, 34px);
}

#works .work-card {
  padding: clamp(14px, 2vw, 24px);
}

@media (max-width: 768px) {
  #works {
    background-attachment: scroll;
    background-position: center top;
  }

  #works::before {
    -webkit-backdrop-filter: blur(3px) saturate(.8);
    backdrop-filter: blur(3px) saturate(.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  #works {
    background-attachment: scroll;
  }
}

/* =========================
   FAQ — fixed image / glass layer
========================== */
#faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background-color: #5f5b58;
  background-image: image-set(
    url('/images/IMG_0005-1920.avif') type('image/avif'),
    url('/images/IMG_0005-1920.webp') type('image/webp'),
    url('/images/top.webp') type('image/webp')
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#faq::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: rgba(226, 222, 218, .42);
  -webkit-backdrop-filter: blur(6px) saturate(.7);
  backdrop-filter: blur(6px) saturate(.7);
}

#faq::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(32, 29, 27, .38), rgba(32, 29, 27, .52));
  pointer-events: none;
}

#faq > * {
  position: relative;
  z-index: 1;
}

#faq .faq-list {
  padding: 0 clamp(20px, 4vw, 52px);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(248, 247, 244, .68);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

#faq .faq-item {
  border-color: rgba(47, 43, 41, .18);
}

#faq .faq-item button {
  color: var(--ink);
}

#faq .faq-answer {
  color: var(--ink-soft);
}

@media (max-width: 768px) {
  #faq {
    background-attachment: scroll;
    background-position: center top;
  }

  #faq::before {
    -webkit-backdrop-filter: blur(4px) saturate(.78);
    backdrop-filter: blur(4px) saturate(.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  #faq {
    background-attachment: scroll;
  }
}

/* =========================
   Featured work — show the full website screenshot
   The AFTER MIDNIGHT capture is wider than 16:9, so `cover` cropped both sides.
========================== */
#works .featured-work-media {
  aspect-ratio: auto;
  background: #090909;
}

#works .featured-work-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

#works .featured-work-copy {
  min-width: 0;
}

#works .featured-work-copy h3 {
  overflow-wrap: anywhere;
  font-size: clamp(2.35rem, 4vw, 4.6rem);
}

@media (max-width: 1180px) {
  #works .featured-work {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: clamp(26px, 4vw, 48px);
  }

  #works .featured-work-copy h3 {
    font-size: clamp(2.35rem, 5vw, 4rem);
  }
}

@media (max-width: 980px) {
  #works .featured-work {
    grid-template-columns: 1fr;
  }

  #works .featured-work-copy {
    max-width: 720px;
  }
}
@media (max-width: 768px) {
  .hero-content {
    width: 100%;
    padding: 0 20px;
    text-align: left;
    padding-left: clamp(24px, 13vw, 64px);
    padding-right: 20px;
    transform: translateY(12px);
    }
  }

  .hero-title {
    max-width: 100%;
    font-size: clamp(3.6rem, 18vw, 5.4rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
  }

  .hero-subtitle {
    margin-top: 1.8rem;
    font-size: 1rem;
    line-height: 1.7;
  }

  .hero-cta {
    margin-top: 2rem;
  }