/* Inquiry-focused homepage. Shared secondary-page styles stay independent. */
/* Kinfolk-inspired editorial palette: warm white / 薄生成り + 墨色 ink, thin rules. */
.inquiry-page { --paper:#fbfaf7; --ink:#201e1b; --ink-soft:#4a4640; --ink-mute:#7a756c; --line:#e5e2d9; --accent:#201e1b; background:var(--paper); color:var(--ink); }
.inquiry-page section { scroll-margin-top:100px; }
.inquiry-page :focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.inquiry-page .fade-up { opacity:1; transform:none; }
.inquiry-nav { height:92px; padding:0 5%; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(251,250,247,.9); z-index:200; }
.inquiry-nav>a img { width:146px; display:block; }
.inquiry-nav nav { display:flex; align-items:center; gap:30px; font-size:12px; font-weight:500; }
.inquiry-nav nav>a:not(.inquiry-button):hover { text-decoration:underline; text-underline-offset:6px; }
.inquiry-menu { display:none; }
.inquiry-button { display:inline-flex; align-items:center; justify-content:space-between; gap:40px; background:var(--accent); color:#fff; padding:18px 26px; font-size:14px; font-weight:500; letter-spacing:.08em; transition:background .2s; }
.inquiry-button:hover { background:#3a3630; }
.inquiry-button span { font-size:21px; line-height:1; }
.inquiry-button.small { padding:12px 20px; font-size:12px; gap:28px; }
/* Hero: centered serif statement, generous air, then one wide luxurious photo. */
.inquiry-hero { padding:96px 6% 0; max-width:1500px; margin:auto; text-align:center; }
.inquiry-hero-head { max-width:760px; margin:0 auto; }
.inquiry-eyebrow { font-size:11px; letter-spacing:.24em; font-weight:400; color:var(--ink-mute); margin-bottom:30px; }
.inquiry-hero h1 { font-family:var(--serif-jp); font-size:clamp(42px,6vw,88px); font-weight:400; line-height:1.5; letter-spacing:.05em; margin:0 0 34px; }
.inquiry-hero h1 span { position:relative; }
.inquiry-hero h1 span::after { content:''; position:absolute; height:2px; background:var(--accent); bottom:2px; left:0; width:100%; }
.inquiry-hero-lede { font-size:18px; line-height:2; font-weight:400; margin:0 auto 16px; max-width:640px; }
.inquiry-hero-desc { font-size:13px; color:var(--ink-soft); line-height:2; margin:0 auto; max-width:600px; }
.inquiry-hero-cta { margin-top:40px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.inquiry-micro { font-size:11px; color:var(--ink-mute); }
.inquiry-textlink { font-size:12px; display:inline-block; margin-top:26px; text-decoration:underline; text-underline-offset:6px; color:var(--ink-soft); }
.inquiry-hero-photo { position:relative; margin:80px auto 0; width:100%; max-width:1320px; aspect-ratio:16/9; overflow:hidden; }
.inquiry-hero-photo>img { width:100%; height:100%; object-fit:cover; object-position:47% center; position:absolute; inset:0; }
.inquiry-hero-photo::after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(20,18,15,.62)); }
.inquiry-hero-photo figcaption { position:absolute; z-index:1; bottom:40px; left:40px; text-align:left; color:#fff; }
.inquiry-hero-photo figcaption span { font-family:var(--serif-en); font-size:11px; letter-spacing:.14em; display:block; margin-bottom:14px; opacity:.92; }
.inquiry-hero-photo strong { font-family:var(--serif-jp); font-size:clamp(24px,3vw,36px); font-weight:400; line-height:1.5; }
.inquiry-concerns,.inquiry-faq { max-width:1320px; margin:auto; padding:100px 5%; display:grid; grid-template-columns:.85fr 1.15fr; gap:8%; }
.inquiry-page h2 { font-family:var(--serif-jp); font-size:clamp(28px,3vw,42px); line-height:1.65; font-weight:400; letter-spacing:.04em; }
.inquiry-concerns>div>p:last-child { margin-top:24px; font-size:13px; line-height:2; }
.inquiry-concern-list>a { display:flex; align-items:center; gap:18px; padding:24px 0; border-top:1px solid var(--line); }
.inquiry-concern-list>a:last-child { border-bottom:1px solid var(--line); }
.inquiry-concern-list>a>span { font-size:12px; color:var(--accent); }
.inquiry-concern-list>a>span:last-child { margin-left:auto; font-size:20px; }
.inquiry-concern-list h3 { font-size:17px; font-weight:400; }
.inquiry-concern-list p { font-size:11px; margin-top:5px; }
.inquiry-page .services { padding:104px 0; background:var(--paper); border-top:1px solid var(--line); }
.inquiry-page .section-number { color:var(--ink-mute); font-size:12px; letter-spacing:.16em; }
.inquiry-page .svc-row { padding:36px 5%; max-width:1320px; gap:7%; grid-template-columns:1fr 1.2fr; }
.inquiry-page .svc-photo { display:none; }
.inquiry-page .svc-num { color:var(--accent); margin-bottom:8px; }
.inquiry-page .svc-title { font-size:26px; }
.inquiry-page .svc-title-en { margin-top:5px; font-size:11px; }
.inquiry-page .svc-price { margin-top:20px; font-size:32px; }
.inquiry-page .svc-note { color:var(--ink-mute); }
.inquiry-page .svc-desc { font-size:14px; line-height:2; margin-bottom:18px; }
.inquiry-page .svc-items { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.inquiry-page .svc-items li { padding:5px 12px; background:transparent; border:1px solid var(--line); font-size:11px; }
.inquiry-page .svc-items .idx { display:none; }
.inquiry-page .cta { cursor:pointer; font-weight:500; font-size:12px; padding:10px 0; color:var(--accent); border-color:var(--accent); }
.inquiry-page .diff { padding:64px 0; background:var(--paper); border-top:1px solid var(--line); }
.inquiry-page .diff-text { font-size:19px; }
.inquiry-page .voice { padding:104px 0; }
.inquiry-page .voice-header { margin-bottom:36px; }
.inquiry-page .voice-rule { margin:16px 0; }
.inquiry-page .voice-list { max-width:1320px; }
.inquiry-page .voice-card { grid-template-columns:145px 1fr; padding:28px 0; gap:35px; }
.inquiry-page .voice-card-photo { width:145px; height:145px; }
.inquiry-page .voice-card-quote { font-size:15px; line-height:2; margin-bottom:16px; }
.inquiry-page .voice-card-cat { margin-bottom:8px; }
.inquiry-page .voice-card-role { font-size:11px; }
.inquiry-bridge { background:var(--paper); color:var(--ink); padding:100px 8%; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:26px; align-items:center; text-align:center; }
.inquiry-bridge p:not(.inquiry-eyebrow) { font-size:13px; margin-top:18px; color:var(--ink-soft); }
.inquiry-bridge .inquiry-micro { color:var(--ink-mute); text-align:center; }
.inquiry-page .about { padding:104px 0; border-top:1px solid var(--line); }
.inquiry-page .about-grid { grid-template-columns: .7fr 1.3fr; gap:7%; }
.inquiry-page .about-portrait { aspect-ratio:4/5; }
.inquiry-page .about-content { padding-top:0; }
.inquiry-page .about-title { font-size:28px; }
.inquiry-page .about-body { font-size:13px; }
.inquiry-page .about-scenes,.inquiry-page .career { display:none; }
.inquiry-page .flow { padding:104px 0; background:var(--paper); border-top:1px solid var(--line); }
.inquiry-page .flow-inner>div:first-child { margin-bottom:36px!important; max-width:none!important; }
.inquiry-page .flow-inner>div:first-child p { margin-top:20px!important; font-size:14px!important; }
.inquiry-page .flow-row { padding:24px 0; }
.inquiry-page .flow-title { font-size:19px; }
.inquiry-page .flow-desc { font-size:13px; }
.inquiry-faq { padding-top:75px; padding-bottom:75px; }
.inquiry-faq details { border-top:1px solid var(--line); padding:20px 0; }
.inquiry-faq details:last-child { border-bottom:1px solid var(--line); }
.inquiry-faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; font-size:14px; font-weight:400; }
.inquiry-faq summary::-webkit-details-marker { display:none; }
.inquiry-faq details p { margin-top:15px; font-size:13px; color:var(--ink-soft); }
.inquiry-page .contact { padding:104px 0; background:var(--paper); border-top:1px solid var(--line); }
.inquiry-page .contact-head { margin-bottom:40px; }
.inquiry-page .contact-title { font-size:40px; }
.inquiry-page .contact-lede { margin-top:20px; font-size:15px; }
.inquiry-page .contact-assure { margin-top:20px; }
.inquiry-page .contact-photo { display:none; }
.inquiry-page .contact-grid { gap:6%; }
.inquiry-page .form-input,.inquiry-page .form-select,.inquiry-page .form-textarea { background:#fff; padding:13px; border:1px solid var(--line); font-size:14px; }
.inquiry-page .form-field { margin-bottom:20px; }
.inquiry-page .form-label { display:flex; font-size:12px; }
.inquiry-page .form-submit { background:var(--accent); color:white; border:0; padding:20px 30px; font-size:15px; }
.inquiry-page .works,.inquiry-page #training,.inquiry-page .blog { padding-top:65px; padding-bottom:65px; }
.inquiry-page .works-head { margin-bottom:25px; }
.inquiry-page .blog-head-row { margin-bottom:30px; }
.inquiry-page .blog-row { padding:20px 0; }
.inquiry-sticky { display:none; }

/* Editorial: centered serif section intros with generous air (Kinfolk-inspired). */
.inquiry-page .services .sec-header,
.inquiry-page #training .sec-header,
.inquiry-page .voice-header,
.inquiry-page .contact-head,
.inquiry-page .flow-inner>div:first-child { text-align:center; margin-left:auto; margin-right:auto; }
.inquiry-page .voice-header .voice-rule { margin-left:auto; margin-right:auto; }

/* ---- Motion & editorial refinement --------------------------------------
   Additive only: no layout shift, no persistent motion, no scroll hijack.
   Reveal/settle run once and are fully disabled under prefers-reduced-motion
   (the reduced-motion block at the end forces animation/transition:none). */

/* Sticky nav: quiet glassy state once scrolled (height unchanged → no shift). */
.inquiry-nav { transition:background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.inquiry-nav.scrolled { background:rgba(251,250,247,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom-color:transparent; box-shadow:0 8px 30px rgba(32,30,27,.07); }

/* Buttons: the arrow nudges on hover/focus. */
.inquiry-button span { transition:transform .25s ease; }
.inquiry-button:hover span, .inquiry-button:focus-visible span { transform:translateX(4px); }

/* Hero: a small vermilion accent tick before the eyebrow. */
.inquiry-hero .inquiry-eyebrow { display:inline-flex; align-items:center; gap:12px; color:var(--ink-soft); }
.inquiry-hero .inquiry-eyebrow::before { content:''; width:28px; height:1px; background:var(--accent); }

/* Concern rows: subtle hover shift toward the vermilion accent. */
.inquiry-concern-list>a { transition:background .25s ease, padding-left .25s ease; }
.inquiry-concern-list>a>span:last-child { transition:transform .25s ease, color .25s ease; }
.inquiry-concern-list>a:hover { background:rgba(32,30,27,.035); padding-left:10px; }
.inquiry-concern-list>a:hover h3 { color:var(--accent); }
.inquiry-concern-list>a:hover>span:last-child { transform:translateX(4px); color:var(--accent); }

/* Services: stronger magazine composition + micro hover. */
.inquiry-page .svc-row { border-top:1px solid var(--line); transition:background .3s ease; }
.inquiry-page .svc-num { display:inline-block; font-size:15px; letter-spacing:.1em; padding-bottom:10px; position:relative; }
.inquiry-page .svc-num::after { content:''; position:absolute; left:0; bottom:0; width:32px; height:2px; background:var(--accent); }
.inquiry-page .svc-price .small { font-size:13px; color:var(--ink-mute); margin-left:6px; }
.inquiry-page .svc-row:hover { background:rgba(32,30,27,.02); }
.inquiry-page .svc-items li { transition:border-color .2s ease, color .2s ease, background .2s ease; }

/* FAQ: the ＋ marker rotates when the item opens. */
.inquiry-faq summary>span { transition:transform .3s ease; color:var(--accent); display:inline-block; }
.inquiry-faq details[open] summary>span { transform:rotate(45deg); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero photo has NO light/sheen/brightness effect. A small scroll parallax is
     applied by JS (transform only); the baseline scale gives overscan so the
     parallax never reveals the container edges. */
  .inquiry-hero-photo>img { will-change:transform; }

  /* Staged section reveal (`.reveal` added by JS only when motion is allowed). */
  .inquiry-page .reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .inquiry-page .reveal.reveal-in { opacity:1; transform:none; }
  /* Focus (keyboard) must never sit hidden behind a pending reveal. */
  .inquiry-page .reveal:focus, .inquiry-page .reveal:focus-within { opacity:1 !important; transform:none !important; }
  .inquiry-concern-list>a.reveal:nth-child(2) { transition-delay:.09s; }
  .inquiry-concern-list>a.reveal:nth-child(3) { transition-delay:.18s; }
  .inquiry-faq details.reveal:nth-of-type(2) { transition-delay:.08s; }
  .inquiry-faq details.reveal:nth-of-type(3) { transition-delay:.16s; }
  .inquiry-faq details.reveal:nth-of-type(4) { transition-delay:.24s; }
}

@media(max-width:980px) {
  .inquiry-nav { height:76px; }
  .inquiry-menu { display:block; font-size:12px; }
  .inquiry-nav nav { display:none; position:absolute; top:76px; left:0; width:100%; background:var(--paper); padding:24px 5%; border-bottom:1px solid var(--line); }
  .inquiry-nav nav.open { display:flex; flex-direction:column; align-items:stretch; gap:18px; }
  .inquiry-hero { padding-top:76px; }
  .inquiry-hero h1 { font-size:56px; }
  .inquiry-hero-lede { font-size:16px; }
  .inquiry-hero-photo { aspect-ratio:3/2; margin-top:64px; }
  .inquiry-concerns,.inquiry-faq { gap:5%; }
}
@media(max-width:640px) {
  .inquiry-nav { height:65px; padding:0 6%; }
  .inquiry-nav>a img { width:123px; }
  .inquiry-nav nav { top:65px; }
  .inquiry-page section { scroll-margin-top:80px; }
  .inquiry-hero { padding:52px 6% 0; }
  .inquiry-eyebrow { font-size:10px; margin-bottom:18px; }
  .inquiry-hero h1 { font-size:40px; line-height:1.5; margin-bottom:24px; letter-spacing:.03em; }
  .inquiry-hero-lede { font-size:15px; }
  .inquiry-hero-desc { font-size:12px; }
  .inquiry-hero-cta { margin-top:32px; width:100%; }
  .inquiry-hero .inquiry-button { width:100%; }
  .inquiry-hero-photo { aspect-ratio:4/5; margin-top:48px; }
  .inquiry-hero-photo figcaption { bottom:24px; left:24px; }
  .inquiry-hero-photo strong { font-size:24px; }
  .inquiry-concerns,.inquiry-faq { display:block; padding:55px 6%; }
  .inquiry-concern-list { margin-top:30px; }
  .inquiry-concern-list h3 { font-size:15px; }
  .inquiry-concern-list p { font-size:11px; }
  /* Works marquee: the desktop full-bleed (calc(100% + 128px) / -64px) assumes
     64px panel padding; on mobile that overflows the viewport. Keep it inside
     the padded panel instead. */
  .inquiry-page .works-panel { padding:0 6%; }
  .inquiry-page .clients-marquee { width:100%; margin-left:0; margin-right:0; }
  .inquiry-page .services { padding:50px 0 20px; }
  .inquiry-page .services>.sec-header { padding:0 6%!important; }
  .inquiry-page .svc-row { display:block; padding:30px 6%; }
  .inquiry-page .svc-left { margin-bottom:24px; }
  .inquiry-page .svc-title { font-size:24px; }
  .inquiry-page .svc-desc { font-size:13px; }
  .inquiry-page .diff { padding:25px 0; }
  .inquiry-page .diff-text { font-size:15px; }
  .inquiry-page .voice { padding:50px 0; }
  .inquiry-page .voice-card { display:block; min-width:0; }
  .inquiry-page .voice-card-photo { width:92px; height:92px; margin-bottom:20px; }
  .inquiry-page .voice-card-body { min-width:0; max-width:100%; }
  .inquiry-page .voice-card-quote { font-size:14px; }
  /* Long quotes / company names must wrap instead of pushing the card past the
     viewport (390px → was 395px). */
  .inquiry-page .voice-card-quote,
  .inquiry-page .voice-card-meta,
  .inquiry-page .voice-card-name,
  .inquiry-page .voice-card-role { overflow-wrap:anywhere; }
  /* The base .fade-up even/odd cards slide in via translateX(40px), which pushed
     the card past the 390px viewport (395px). Force vertical-only / no transform
     on mobile with high specificity; keep content visible (no body overflow hack). */
  .inquiry-page .voice-card.fade-up,
  .inquiry-page .voice-card.fade-up:nth-child(even),
  .inquiry-page .voice-card.fade-up:nth-child(odd),
  .inquiry-page .voice-card.fade-up.in { transform:none !important; opacity:1 !important; }
  .inquiry-bridge { display:block; padding:45px 6%; }
  .inquiry-bridge .inquiry-button { margin-top:25px; width:100%; }
  .inquiry-page .about { padding:50px 0; }
  .inquiry-page .about-grid { display:flex; flex-direction:column; gap:30px; }
  .inquiry-page .about-portrait { width:70%; max-width:280px; }
  .inquiry-page .about-title { font-size:25px; }
  .inquiry-page .flow { padding:50px 0; }
  .inquiry-page .flow-row { grid-template-columns:34px 1fr; }
  .inquiry-page .flow-meta { grid-column:2; text-align:left; }
  .inquiry-faq>div:last-child { margin-top:28px; }
  .inquiry-page .contact { padding:50px 0; }
  .inquiry-page .contact-title { font-size:30px; }
  .inquiry-page .contact-grid { display:flex; flex-direction:column-reverse; gap:30px; }
  .inquiry-page .form-input,.inquiry-page .form-select,.inquiry-page .form-textarea { font-size:16px; }
  .inquiry-page .footer { padding-bottom:105px; }
  .inquiry-sticky { position:fixed; bottom:0; left:0; right:0; z-index:190; display:flex; align-items:center; justify-content:space-between; padding:13px 6% calc(13px + env(safe-area-inset-bottom)); background:var(--accent); color:white; font-size:11px; box-shadow:0 -3px 14px #263e3514; }
  .inquiry-sticky span { font-size:14px; font-weight:500; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .inquiry-page * { animation:none!important; transition:none!important; } }
