@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Noto+Sans+JP:wght@400;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

:root {
  --color-black: #333333;
  --color-gold: #97865C;
  --color-gold-tint: rgba(151, 134, 92, 0.15);
  --color-gray-300: #BEBEBE;
  --color-gray-400: #9A9A9A;
  --color-white: #FFFFFF;
  --color-dkblue: #404852;
  --color-cream: #F5F3EF;

  --font-serif: 'Shippori Mincho', serif;
  --font-en: 'Cormorant Garamond', serif;
  --font-sans: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;

  --container-max: 1280px;
  --bp-tablet: 768px;
  --bp-desktop: 992px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Author `display` declarations (e.g. `.foo { display: flex }`) otherwise beat
   the UA stylesheet's `[hidden] { display: none }` by cascade origin, not
   specificity — so toggling the `hidden` attribute silently no-ops on any
   element whose class also sets `display`. This reset keeps `hidden` reliable
   everywhere it's used for CMS-driven show/hide (pagination, optional media,
   empty states, etc). */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--color-black);
  /* Cream, not white: every page layers the shared .page-watermark grain
     texture over this at 20% opacity, and that texture's own tone blends
     noticeably darker over white than over cream — making a white base
     read as a visibly different, lighter tone than any section that uses
     --color-cream directly (e.g. .section--cream bands). Cream as the
     sitewide default keeps the blended result consistent everywhere;
     opaque section fills (.section--cream, cards, etc.) still take
     priority over this wherever they're applied. */
  background: var(--color-cream);
  overflow-x: hidden;
  /* Sticky footer: on pages shorter than the viewport (404, a short news
     article, a detail page whose ?id= didn't resolve) <main> grows to fill
     the leftover height so the footer sits at the bottom of the screen
     instead of floating halfway up. dvh tracks mobile browser toolbars;
     vh is the fallback for browsers without it. Every other direct child of
     body (.page-watermark, .mobile-menu, .lightbox, .floating-tabs) is
     position:fixed, so only header/main/footer take part in the column. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

/* Site-wide keyboard focus ring. :focus-visible only, so mouse/touch clicks
   don't draw it. Gold is 3.2–3.6:1 against the cream/white backgrounds,
   above the 3:1 WCAG 2.2 asks of focus indicators. */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* <main id="main" tabindex="-1"> is only focusable so the skip link can move
   focus there — it isn't a control, so no ring. */
main:focus {
  outline: none;
}

/* Skip link: first thing in <body> on every page, hidden above the viewport
   until it receives keyboard focus. position:fixed keeps it out of body's
   sticky-footer flex column. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 14px;
  border-radius: 4px;
  transform: translateY(calc(-100% - 16px));
}

.skip-link:focus {
  transform: none;
}

/* height:auto matters here: microCMS's rich editor bakes width/height HTML
   attributes onto every <img> it outputs (e.g. width="1024" height="683").
   Without this, max-width:100% shrinks the rendered width to fit its
   container but the height attribute still forces the original pixel
   height, stretching the image out of its natural aspect ratio — hits any
   rich-text body (.column-detail-content, .news-detail-content,
   .work-detail-episode-content) wherever an image is wider than its column. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---- Breakpoint visibility utilities ----
   Generic show/hide-at-breakpoint helpers, independent of any component's
   own responsive display rules — `!important` so they reliably win over a
   component's own `display` declaration regardless of source order (same
   reasoning as the `[hidden]` reset above). Breakpoints match the site's
   3-tier convention: <768px SP, 768–991px tablet, >=992px PC — plus
   `.is-xl` for a 4th, narrower tier (>=1280px, matching --container-max)
   for content that should only appear once the full-width container stops
   growing. Only `display: none`/`block` are covered — an element that
   needs to stay e.g. flex/grid once visible should pair this with its own
   component class rather than relying on `display: block` here. */
.is-pc,
.is-pc-tab,
.is-tab,
.is-xl {
  display: none !important;
}

.is-tab-sp,
.is-sp {
  display: block !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  .is-tab {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .is-pc-tab {
    display: block !important;
  }

  .is-sp {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .is-pc {
    display: block !important;
  }

  .is-tab-sp {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .is-xl {
    display: block !important;
  }
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Tablet: 768–991px. Sections keep their mobile (stacked) layout here —
   only the desktop tier (992px+) switches to the multi-column PC layout —
   but get a roomier side gutter than phone width warrants. */
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    padding-inline: 40px;
  }
}

@media (min-width: 992px) {
  .container {
    padding-inline: 80px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =====================================================================
   Shared primitives + reusable components
   (moved out of top.css so subpages can reuse them without pulling in
   TOP-page-only sections like the hero/guide/product/news/contact)
   ===================================================================== */

/* ===== Shared primitives ===== */

.eyebrow {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-gold);
  line-height: 1;
}

.section-title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-black);
}

/* Every section eyebrow/heading pair is 18px/24px on the SP frame and
   24px/30px on PC — same value at the tablet tier as PC (see the
   breakpoint convention in CLAUDE.md). */
@media (min-width: 768px) {
  .eyebrow {
    font-size: 24px;
  }

  .section-title {
    font-size: 30px;
  }
}

.section {
  padding-block: 48px;
}

.section--cream {
  background: var(--color-cream);
}

@media (min-width: 992px){
  .section {
    padding-block: 88px;
  }
}

.crop-window {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-white);
}

.crop-window img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  min-width: 226px;
  max-width: 100%;
  padding: 13px 16px 12px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 100px;
  font-size: 15px;
  white-space: nowrap;
}

.pill-btn span {
  flex: 1;
  text-align: center;
}

.pill-btn img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--color-gold-tint);
  color: var(--color-gold);
  font-size: 12px;
  line-height: 1;
  width: fit-content;
  white-space: nowrap;
}

.tag-pill--solid-gold {
  background: var(--color-gold);
  color: var(--color-white);
}

.tag-pill--solid-dkblue {
  background: var(--color-dkblue);
  color: var(--color-white);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #666;
  font-size: 14px;
  width: fit-content;
}

.link-arrow img {
  width: 18px;
  height: 18px;
}

/* ===== Shared breadcrumb list =====
   Used by every page-hero's パンくずリスト nav (standalone pages, the
   guide/product hero families, works/column/news list+detail). Each
   consumer still supplies its own separator width/color as a page- or
   family-specific override (e.g. .works-hero__crumb-sep,
   .news-hero__crumb-sep) via .guide-hero__breadcrumb-sep (30px default)
   or .product-hero__crumb-sep (24px default) placed on the sep span
   alongside this class. */

.shared__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-gray-400);
}

.shared__crumb a {
  color: var(--color-black);
}

@media (min-width: 992px) {
  .shared__crumb {
    justify-content: flex-end;
  }
}
/* ===== Mobile off-canvas menu ===== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-white);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  transform: translateX(100%);
  /* visibility (not just the off-screen transform) keeps the closed menu's
     links out of the tab order and the accessibility tree. It flips to
     hidden only after the 0.25s slide-out finishes, and to visible at once
     on open, so the slide animation still plays both ways. */
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.25s ease;
}

@media (min-width: 768px) and (max-width: 991px) {
  .mobile-menu {
    padding: 40px;
  }
}

.mobile-menu__close {
  align-self: flex-end;
  font-size: 28px;
  line-height: 1;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 16px;
}

.mobile-menu__ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Gallery section intro ----
   Shared by individual/top.html and corporate/top.html's Gallery section,
   same centered treatment as .page-experience__intro/.page-voice__intro. */
.page-gallery__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ---- Photo strip (infinite marquee) ---- */

/* Infinite marquee: .photo-strip clips a track twice as long as the
   visible content; the track scrolls to exactly -50% (one full copy's
   width) and loops, so the seam between the end of copy 1 and the start
   of copy 2 is invisible. Margins are negative so the strip bleeds past
   the .container gutter it sits inside (20/40/80px per tier) instead of
   stopping at it.

   padding-block (rather than the full 32px as margin-top) leaves room
   for the hover glow (box-shadow) and 102% scale below, so they aren't
   clipped by this element's own overflow:hidden. */
.photo-strip {
  margin-top: 8px;
  padding-block: 24px;
  margin-inline: -20px;
  overflow: hidden;
}

.photo-strip__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: photo-strip-scroll 30s linear infinite;
}

@keyframes photo-strip-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-strip__track {
    animation-play-state: paused;
  }
}

/* Hover-pause (either the strip itself, or while its lightbox is open —
   site.js toggles .is-paused for the latter). Also paused while an item has
   keyboard focus, so the focused photo doesn't scroll out from under it. */
.photo-strip:hover .photo-strip__track,
.photo-strip:focus-within .photo-strip__track,
.photo-strip.is-paused .photo-strip__track {
  animation-play-state: paused;
}

/* Hover expand + glow; the ~102% scale, cursor-tilt, and cursor-follow
   shift are driven by site.js, which also applies a per-item
   perspective() transform function (NOT a shared `perspective` property
   on .photo-strip__track — a single perspective on the whole track would
   fix one vanishing point at its center, skewing items away from center
   asymmetrically). */
.photo-strip__item {
  flex: 0 0 auto;
  width: 260px;
  aspect-ratio: 306 / 204;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}

.photo-strip__item:hover {
  z-index: 2;
  box-shadow: 0 0 28px rgba(151, 134, 92, 0.5);
}

@media (min-width: 992px) {
  .photo-strip {
    margin-inline: -80px;
    padding: 24px 0;
    margin-block: 24px;
    background: var(--color-cream);
    border-radius: 16px;
  }

  .photo-strip__item {
    width: 306px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .photo-strip {
    margin-inline: -40px;
  }

  .photo-strip__item {
    width: 260px;
  }
}

/* ===== Gallery lightbox (opened by clicking a .photo-strip__item) ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(51, 51, 51, 0.9);
  opacity: 0;
  visibility: hidden;
  /* Closing: visibility flips to hidden only once the fade-out ends. */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

/* Opening: visibility switches immediately (only opacity fades), because
   site.js moves focus to the close button in the same tick — a still-hidden
   element can't take focus. */
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.lightbox__frame {
  position: relative;
  max-width: 1000px;
  width: 100%;
}

.lightbox__image {
  display: block;
  width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 32px;
  line-height: 1;
  color: var(--color-white);
}

.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  font-size: 32px;
  line-height: 1;
  color: var(--color-white);
}

.lightbox__arrow--prev {
  right: 100%;
}

.lightbox__arrow--next {
  left: 100%;
}

/* ---- Work card ---- */

.work-card {
  display: block;
  /* Grid/flex items default to min-width:auto, so the nowrap name below
     would otherwise widen the card's track instead of truncating. */
  min-width: 0;
}

.work-card__media {
  aspect-ratio: 393 / 221;
}

/* 記事あり/動画あり badges, top-left of the thumbnail (Figma 2056:16720 /
   2056:16725). z-index keeps them above the absolutely positioned
   .crop-window img. */
.work-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.work-card__badge {
  gap: 4px;
}

/* 16px icon box; the glyph SVG sits centred at its own size, matching its
   inset inside the Figma 16px frame. */
.work-card__badge::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: center no-repeat;
}

.work-card__badge--article::before {
  background-image: url('../assets/images/works/icon-interview-article.svg');
}

.work-card__badge--video::before {
  background-image: url('../assets/images/works/icon-interview-video.svg');
}

.work-card__info {
  margin-top: 16px;
  padding: 0 8px 16px;
  border-bottom: 1px solid var(--color-gold);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.work-card__name {
  font-size: 16px;
  font-weight: 500;
  /* Always one line; a title too long for the card is cut off with an
     ellipsis (full title in the title attribute — see workCardHtml). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-card__type {
  margin-top: 8px;
  font-size: 13px;
}

/* Name/type column. min-width:0 lets it shrink below the title's full
   width (flex items default to min-content), which the name's ellipsis
   needs; max-width keeps it inside the card in the stacked SP layout. */
.work-card__text {
  min-width: 0;
  max-width: 100%;
}

.work-card__tags {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

@media (min-width: 992px) {
  /* Name + tags side by side: tags keep their natural width, the name
     column takes the rest and truncates if needed. */
  .work-card__info {
    flex-direction: row;
  }

  .work-card__text {
    flex: 1;
  }

  .work-card__tags {
    flex-direction: column;
    flex-shrink: 0;
  }
}

/* ---- Testimonial card ---- */

.testimonial-card {
  padding: 24px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px 10px 10px 0;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-card__quote {
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--color-gray-400);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.testimonial-card__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.testimonial-card__label {
  padding-left: 8px;
  border-left: 2px solid var(--color-gold);
  color: var(--color-gold);
  font-size: 15px;
}

/* Linked variant (TOP voice cards → works/detail.html): the title +
   customer name sit inside __quote, and a "設置環境をチェック" CTA is pinned
   to the card's bottom-right. Matches Figma node 1714:14326. */
a.testimonial-card {
  color: inherit;
  text-decoration: none;
}

.testimonial-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: inherit;
  line-height: 1.6;
}

.testimonial-card__name {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.testimonial-card__cta {
  margin-top: auto;
  padding-top: 8px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1;
}

.testimonial-card__cta img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

a.testimonial-card:hover .testimonial-card__cta img {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .testimonial-card__title {
    font-size: 18px;
  }
}

@media (min-width: 992px) {
  .testimonial-card {
    flex: 1;
  }
}

/* ---- Column card ---- */

.column-card {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  padding-bottom: 16px;
}

.column-card__media {
  position: relative;
  aspect-ratio: 393 / 221;
  border-radius: 4px 4px 0 0;
}

.column-card__photo {
  max-width: none;
}

/* Extra .column-card__media qualifier beats .crop-window img's
   specificity (0,1,1) — otherwise the crop rule's width/height/inset
   wins and this badge stretches to fill the whole photo. `inset: auto`
   is also required: .crop-window img sets inset:0 as a SHORTHAND (=
   top/right/bottom/left all 0), and since this rule only overrides
   `right`/`bottom` as longhands, the shorthand's `left:0`/`top:0` would
   otherwise leak through untouched, over-constraining the box so the
   browser ignores `right`/`bottom` and pins it to the top-left instead. */
.column-card__media .column-card__save {
  position: absolute;
  inset: auto;
  bottom: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  z-index: 1;
}

.column-card__body {
  margin-top: 16px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Divider styling lives on the wrapper, truncation on the text itself —
   kept separate so the dashed border sits cleanly below the (deliberately
   height-clipped) text instead of sharing its box, which was squeezing
   the border/padding into the same 42px the 2 lines of text need. */
.column-card__title {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--color-gray-300);
}

.column-card__title-text {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.75px;
  line-height: 1.4;
  /* Figma clips the title to 2 lines with an ellipsis (h-41 + overflow).
     -webkit-line-clamp supplies the ellipsis, but its own box-sizing
     isn't reliable everywhere (seen computing an ~9px-taller box than
     2 real lines, letting a sliver of a 3rd line peek through before
     the clip) — max-height is the deterministic backstop that
     guarantees the clip lands exactly at 2 lines regardless: 15px
     font * 1.4 line-height * 2 lines = 42px. */
  max-height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.column-card__excerpt {
  font-size: 13px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (min-width: 992px) {
  .column-card {
    flex: 1;
  }
  /* Exact Figma crop: an oversized img positioned with left/top offsets
     expressed as % of the media window's own 352x198 box. The
     .column-card__media qualifier is needed for the same specificity
     reason as .column-card__save above (.crop-window img otherwise wins). */
  .column-card__media .column-card__photo {
    position: absolute;
    inset: auto;
    width: 107.386%;
    height: 143.434%;
    left: -5.114%;
    top: -17.66%;
    object-fit: cover;
  }
}

/* ---- LINE CTA badge ---- */

/* Shared visual chrome for the floating "LINEを登録して..." pill used on
   individual.html, individual-guide.html, and product/home.html hero
   sections. Mobile: each page still supplies its own static/stacked
   margin via a page-specific modifier class alongside this one. Desktop:
   PC spec is unified here (not per-page) based on individual-guide.html's
   .guide-hero__line-badge — a fixed, viewport-pinned pill at bottom-right
   that stays visible while scrolling, rather than each page's hero-height-
   specific absolute offset. */
.line-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--color-white);
  border-radius: 8px;
}

.line-badge__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.line-badge span {
  font-size: 13px;
  border-bottom: 1px solid #06c755;
  padding-bottom: 3px;
}

.line-badge__arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .line-badge {
    position: fixed;
    right: 0;
    bottom: 32px;
    z-index: 60;
    justify-content: flex-start;
    padding: 16px 16px 16px 24px;
    border-radius: 8px 0 0 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
    margin-top: 0;
  }

  .line-badge span {
    font-size: 14px;
  }
}

/* ---- FAQ accordion ---- */

/* Generic accordion component, shared by individual.html and
   individual-guide.html's FAQ preview sections (each page keeps its own
   .page-faq__*/.guide-faq__* wrapper/intro layout in its own CSS file). */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--color-gray-300);
}

.faq-item--last {
  border-bottom: 1px solid var(--color-gray-300);
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 8px;
  text-align: left;
}

.faq-item__q {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--color-gold);
}

.faq-item__a {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
  color: var(--color-dkblue);
  flex-shrink: 0;
}

.faq-item__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 400;
}

.faq-item__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Height animation via the CSS grid-rows trick: the outer element
   transitions its single row track between 0fr (collapsed) and 1fr
   (content height), while the inner wrapper clips to that track size —
   avoids needing a fixed/max-height that wouldn't fit future (longer)
   answer copy. */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.faq-item__answer.is-open {
  grid-template-rows: 1fr;
}

.faq-item__answer-inner {
  min-height: 0;
  overflow: hidden;
}

/* Padding lives here, one level inside the overflow:hidden wrapper —
   padding on the wrapper itself wouldn't collapse (padding isn't
   "content" overflow can clip), it would just squash to a fixed
   leftover size instead of true 0. */
.faq-item__answer-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 8px 16px;
}

.faq-item__answer-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.8;
}

@media (min-width: 992px) {
  .faq-item__trigger {
    gap: 24px;
    padding: 16px 8px;
  }

  .faq-item__answer-content {
    gap: 24px;
  }

  .faq-item__q {
    font-size: 28px;
    line-height: 50px;
  }

  .faq-item__a {
    font-size: 28px;
  }

  .faq-item__text {
    font-size: 15px;
  }

  .faq-item__icon {
    width: 19px;
    height: 19px;
  }
}

/* ---- Page hero (full-bleed photo stage + content box) ----
   Promoted from individual.css now that corporate.html is a second
   consumer with the identical Figma stage/media/content coordinates
   (left:517px media, left:80px/top:195px content box, 800px stage
   height at 992px+). corporate.html adds one extra absolutely-positioned
   sibling of .page-hero__content inside the stage — its own
   .corp-hero__pickup "Pick Up" card, see corporate.css — the same way
   individual.html adds .page-hero__line-badge. */

.page-hero {
  position: relative;
  padding: 24px 20px 32px;
}

.page-hero__media {
  aspect-ratio: 4 / 3;
}

.page-hero__content {
  margin-top: 24px;
}

.page-hero__heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.page-hero__text {
  margin-top: 24px;
  font-size: 15px;
  line-height: 2;
}

.page-hero__text p + p {
  margin-top: 8px;
}

.page-hero__ctas {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-hero__line-badge {
  margin-top: 24px;
}

@media (min-width: 992px) {
  .page-hero {
    height: 800px;
    padding: 0;
    margin-top: -120px;
  }

  .page-hero__stage {
    position: relative;
    max-width: 1800px;
    height: 100%;
    margin-inline: auto;
  }

  .page-hero__media {
    position: absolute;
    left: 517px;
    right: 32px;
    top: calc(50% + 20px);
    transform: translateY(-50%);
    height: 600px;
    aspect-ratio: auto;
    border-radius: 8px;
  }

  .page-hero__content {
    position: absolute;
    left: 80px;
    top: 195px;
    width: 472px;
    margin-top: 0;
  }

  .page-hero__heading {
    font-size: 47px;
    letter-spacing: -0.04em;
  }

  .page-hero__text {
    margin-top: 32px;
    line-height: 2.3;
  }

  .page-hero__ctas {
    margin-top: 32px;
    flex-direction: row;
  }
}

/* ---- Alternating feature rows ----
   Promoted from individual.css ("Why SAUNAGE") now that product-home.html
   is a second consumer for the identical numbered-row/media pattern. Each
   page supplies its own .page-why__content width override at 992px
   (individual.html: 374px; product-home.html: 420px). */

.page-why__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-why__lede {
  font-size: 15px;
  line-height: 1.9;
}

.page-why__rows {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.page-why__row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-why__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-why__index {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  color: var(--color-gold);
  line-height: 1;
  white-space: nowrap;
}

.page-why__index span {
  font-family: var(--font-en);
  font-size: 20px;
}

.page-why__index {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
}

.page-why__heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
}

.page-why__desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 2;
}

.page-why__media {
  aspect-ratio: 4 / 3;
  position: relative;
}

.page-why__more {
  margin-top: 48px;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 992px) {
  .page-why__intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .page-why__rows {
    margin: auto;
    margin-top: 80px;
    gap: 88px;
    max-width: 992px;
  }

  .page-why__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .page-why__row--reverse {
    flex-direction: row-reverse;
  }

  .page-why__content {
    gap: 24px;
  }

  .page-why__heading {
    font-size: 24px;
    white-space: nowrap;
  }

  .page-why__desc {
    margin-top: 24px;
    font-size: 15px;
    font-weight: 400;
  }

  .page-why__media {
    width: 505px;
    height: 337px;
    aspect-ratio: auto;
    flex-shrink: 0;
  }
}

/* ---- Mobile off-canvas menu: the "施設への導入 / 法人のお客様" (or, on
   corporate.html, the flipped "自宅への導入 / 個人のお客様") cross-link
   block, mirroring the same content in the PC .site-subheader__inner nav.
   Promoted from individual.css now that corporate.html is a second
   consumer — see CLAUDE.md's CSS layering convention. */
.mobile-menu__corporate {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu__corporate-label {
  font-size: 12px;
  color: var(--color-gray-400);
}

.mobile-menu__corporate-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.mobile-menu__corporate-link img {
  width: 18px;
  height: 18px;
}

/* ---- Works (simple results grid, no filter chips) ----
   Promoted from individual.css now that corporate.html is a second
   consumer for the identical intro/grid/work-card layout. */

.page-works__desc {
  margin-top: 32px;
  font-size: 14px;
  line-height: 1.9;
}

.page-works__results {
  margin-top: 32px;
}

.page-works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.page-works__more {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 992px) {
  .page-works__container {
    display: flex;
    justify-content: space-between;
    gap: 60px;
  }

  .page-works__intro {
    flex: 0 0 302px;
  }

  .page-works__desc {
    font-size: 15px;
  }

  .page-works__results {
    margin-top: 0;
    flex: 1;
  }

  .page-works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }

  .page-works .work-card__media {
    aspect-ratio: 342 / 192;
  }
}

/* ---- Voice (testimonial-card row) ----
   Promoted from individual.css now that corporate.html is a second
   consumer for the identical intro/card layout. */

.page-voice__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.page-voice__lede {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.9;
}

.page-voice__cards {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-voice__cards .testimonial-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-gold);
  box-shadow: none;
}

/* Linked cards (Figma 1748:6112) — tighter 16px side padding */
.page-voice__cards a.testimonial-card {
  padding: 24px 16px;
}

.page-voice__cards .testimonial-card__quote {
  font-size: 17px;
}

.page-voice__cards .testimonial-card__block {
  font-size: 14px;
}

/* ---- SP/tablet disclosure: only the first testimonial shows by default,
   the "もっと見る" button reveals the rest. PC always shows all (see the
   row layout below), so the button is hidden there — same pattern as
   .voice__cards/.voice__more on TOP (top.css). ---- */
.page-voice__more {
  align-self: center;
  background: none;
  border: none;
  border-bottom: 1px solid #666;
  padding: 0 0 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

@media (max-width: 991px) {
  .page-voice__cards:not(.is-expanded) .page-voice__card--extra {
    display: none;
  }
}

@media (min-width: 992px) {
  .page-voice__cards {
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
  }

  .page-voice__cards .testimonial-card {
    flex: 1;
  }

  .page-voice__cards .testimonial-card__quote {
    font-size: 18px;
  }

  .page-voice__more {
    display: none;
  }
}

/* ---- Experience (2-up showroom/hotel cards) ----
   Promoted from individual.css now that corporate.html is a second
   consumer for the identical intro/card layout. */

.page-experience__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.page-experience__lede {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.9;
}

.page-experience__cards {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.experience-card__media {
  aspect-ratio: 4 / 3;
}

.experience-card__title {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
}

.experience-card__desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.experience-card .link-arrow {
  margin-top: 24px;
}

@media (min-width: 992px) {
  .page-experience__cards {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }

  .experience-card {
    width: 440px;
  }

  .experience-card__media {
    width: 440px;
    height: 293px;
    aspect-ratio: auto;
  }
}

/* ---- FAQ preview (intro + faq-list) ----
   Promoted from individual.css now that corporate.html is a second
   consumer for the identical intro/list layout (and, on corporate.html,
   even the same 3 questions verbatim). */

.page-faq__lede {
  margin-top: 32px;
  font-size: 15px;
  line-height: 1.9;
}

.page-faq__list-wrap {
  margin-top: 32px;
}

.page-faq__more {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 992px) {
  .page-faq {
    padding-block: 40px 80px;
  }

  .page-faq__container {
    display: flex;
    gap: 104px;
  }

  .page-faq__intro {
    flex: 0 0 180px;
  }

  .page-faq__list-wrap {
    margin-top: 48px;
    flex: 1;
  }
}

/* ---- Column preview (3-up column-card grid) ----
   Promoted from individual.css now that corporate.html is a second
   consumer for the identical intro/grid layout. */
.page-column__head{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-column__lede {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.9;
}

.page-column__grid {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-column__more {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
}

/* .column__empty: promoted from top.css now that individual/top.html and
   corporate/top.html are also microCMS-backed column previews, same empty-
   state look as .works__empty above. Used inside both .column__grid (TOP)
   and .page-column__grid (individual/corporate). */
.column__empty {
  padding: 16px 0 16px 4px;
  font-size: 14px;
  color: var(--color-gray-400);
}

@media (min-width: 992px) {
  .page-column__head{
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .page-column__lede {
    font-size: 15px;
  }

  .page-column__grid {
    margin-top: 32px;
    flex-direction: row;
    gap: 32px;
  }

  .page-column__grid .column-card {
    flex: 1;
  }
}

/* ---- Info card (icon + title + desc, 4-up divider row) ----
   Promoted from individual.css ("Guide" cost/condition cards) now that
   product-home.html is a second consumer with the identical icon set
   (費用/電気代/設置条件/導入までの流れ). Each page's own grid wrapper
   (.page-guide__cards, .product-guide__cards, ...) sets the column count;
   product-home.html overrides the 40px desktop padding to 65px to match
   its own Figma spacing. */

.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.info-card__icon {
  width: 40px;
  height: 40px;
}

.info-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
}

.info-card__desc {
  margin-top: -8px;
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 992px) {
  .info-card {
    padding-inline: 40px;
    border-right: 1px solid var(--color-gray-300);
  }

  .info-card:first-child {
    border-left: 1px solid var(--color-gray-300);
  }

  .info-card__icon {
    width: 52px;
    height: 52px;
  }

  .info-card__title {
    font-size: 20px;
  }

  .info-card__desc {
    font-size: 14px;
  }
}

/* ---- Footer ---- */

/* ===== Footer ===== */

.site-footer {
  background: var(--color-white);
  padding-top: 32px;
}

/* footer__top/footer__bottom bleed full width (so their backgrounds reach
   the screen edges); the -inner wrapper caps content at 1280px and holds
   the horizontal gutter, matching the .container pattern but with the
   footer's own (narrower) desktop gutter. */
.footer__top {
  padding-block: 0 32px;
}

/* Grid so logo/columns/ctas can reorder between breakpoints without
   duplicating markup: mobile stacks all three; desktop puts logo+ctas
   in one row and lets the link columns span full width underneath. */
.footer__top-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
  display: grid;
  grid-template-areas:
    "logo"
    "columns"
    "ctas";
  gap: 40px;
}

.footer__logo {
  grid-area: logo;
}

.footer__logo img {
  height: 43px;
}

.footer__columns {
  grid-area: columns;
  display: flex;
  gap: 48px;
}

.footer__nav,
.footer__utility {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
}

.footer__utility {
  gap: 12px;
}

.footer__nav a,
.footer__utility a {
  white-space: nowrap;
}

.footer__utility a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__utility img {
  width: 18px;
  height: 18px;
}

.footer__ctas {
  grid-area: ctas;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__bottom {
  background: var(--color-dkblue);
  color: var(--color-white);
  padding-block: 16px;
}

.footer__bottom-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  text-align: center;
}

.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer__legal a {
  text-decoration: underline;
}

.footer__copyright {
  font-family: var(--font-en);
}

@media (min-width: 992px) {
  .site-footer {
    padding-top: 48px;
  }

  .footer__top {
    padding-block: 0 40px;
  }

  .footer__top-inner {
    padding-inline: 32px;
    grid-template-areas:
      "logo ctas"
      "columns columns";
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .footer__ctas {
    justify-self: end;
    flex-direction: row;
    gap: 16px;
  }

  .footer__columns {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer__nav,
  .footer__utility {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .footer__nav {
    font-size: 15px;
  }

  .footer__utility {
    font-size: 16px;
  }

  .footer__bottom {
    padding-block: 24px;
  }

  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 32px;
  }

  .footer__legal {
    flex-direction: row;
    gap: 24px;
  }
}

/* ---- Tablet: mobile (stacked) layout, PC-scale type + 40px gutter ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .footer__top-inner {
    padding-inline: 40px;
  }

  .footer__bottom-inner {
    padding-inline: 40px;
  }

  .footer__nav {
    font-size: 15px;
  }

  .footer__utility {
    font-size: 16px;
  }
}

/* =====================================================================
   Site subheader — shared by every page, including index.html. Matches
   Figma's "Frame 628572" component. On subpages this is the page's only
   header, visible from the start. On index.html (see the
   site-subheader--index-sticky modifier below) the hero provides its own
   embedded nav instead (.hero__topbar/.hero__brand in top.css), so this
   instance stays hidden until the fixed-on-scroll state kicks in, at
   which point it's identical to every other page's header.

   Mobile/tablet: a simple logo+hamburger bar that opens the same
   .mobile-menu off-canvas panel as TOP (same id contract: #menuClose /
   #mobileMenu, and a .hero__burger/.subheader-burger class contract for
   the open trigger — driven by the same site.js).
   Desktop (992px+): the full single-row nav from Figma.
   ===================================================================== */

.site-subheader {
  position: relative;
  z-index: 3;
}

/* index.html only: this instance exists purely for the fixed-on-scroll
   state, so it's hidden until is-header-scrolled is applied (see below) —
   the embedded hero nav is what's visible before that point. */
.site-subheader--index-sticky {
  display: none;
}

/* Fixed-on-scroll state: site.js toggles this once the page has scrolled
   past 120px. Pins the header to the viewport with a translucent, blurred
   backdrop instead of scrolling away with the page, and plays a
   slide-down-into-place entrance each time the class is added (re-triggers
   on every scroll past the threshold, e.g. after scrolling back up and
   down again). The two-class selector also outweighs
   .site-subheader--index-sticky's display:none above. */
.site-subheader.is-header-scrolled {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 150;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: header-slide-in 0.3s ease-out;
}

/* Pinned (fixed) header no longer takes up space, so <main> takes it over —
   same height, measured by site.js into --site-header-h — and nothing below
   the header moves or changes the page height when it pins. Not for
   index.html's sticky header, which was never in the flow. */
.site-subheader.is-header-scrolled:not(.site-subheader--index-sticky) + main {
  margin-top: var(--site-header-h, 0px);
}

@keyframes header-slide-in {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.site-subheader__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}

.site-subheader__topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-subheader__logo-mobile img {
  height: 25px;
  width: auto;
}

.site-subheader__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--color-gold);
  color: var(--color-white);
  font-size: 12px;
  white-space: nowrap;
  width: fit-content;
}

@media (min-width: 768px) {
  .site-subheader__badge {
    padding: 6px 16px;
    font-size: 14px;
  }
}

.subheader-burger {
  width: 24px;
  height: 16px;
}

.subheader-burger img {
  width: 100%;
  height: 100%;
}

.site-subheader__inner {
  display: none;
}

@media (min-width: 768px) and (max-width: 991px) {
  .site-subheader__topbar {
    padding-inline: 40px;
  }
}

/* Nav breakpoint: switches from the mobile hamburger topbar to the
   full desktop nav row at 1200px — later than the 992px content
   breakpoint, since the nav needs more horizontal room than the rest
   of the subheader does before it can lay out in one row. */
@media (min-width: 1200px) {
  .site-subheader__topbar {
    display: none;
  }

  .site-subheader__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1800px;
    margin-inline: auto;
    padding: 24px 32px 16px;
  }
}

@media (min-width: 992px) {
  .site-subheader__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
  }

  .site-subheader__logo img {
    height: 30px;
    width: auto;
  }

  .site-subheader__actions {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .site-subheader__nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    white-space: nowrap;
  }

  .site-subheader__divider {
    width: 1px;
    height: 14px;
    background: var(--color-gray-300);
  }

  .site-subheader__corporate {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .site-subheader__corporate-label {
    font-size: 12px;
  }

  .site-subheader__corporate-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    white-space: nowrap;
  }

  .site-subheader__corporate-link img {
    width: 18px;
    height: 18px;
  }

  .site-subheader__reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border: 1px solid var(--color-black);
    border-radius: 100px;
    background: var(--color-white);
    font-size: 15px;
    white-space: nowrap;
  }
}

/* ---- Dual-audience subheader ----
   Promoted from product-home.css's `.product-header` now that about.html is
   a second consumer of the identical shape: pages that sit above the
   individual/corporate split show BOTH audience entry points (個人のお客様 /
   法人のお客様) side by side instead of the single cross-link
   .site-subheader__corporate uses on audience-specific pages. Renamed to
   `.audience-header` since it's no longer product-only. Used alongside
   `.site-subheader` (class="site-subheader audience-header"). */

.audience-header__logo {
  display: none;
}

@media (min-width: 1200px) {
  .audience-header__inner {
    align-items: center;
  }

  .audience-header__logo {
    display: block;
  }

  .audience-header__logo img {
    height: 30px;
    width: auto;
  }

  .audience-header__actions {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .audience-header__audience {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .audience-header__audience-label {
    font-size: 12px;
  }

  .audience-header__audience-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    white-space: nowrap;
  }

  .audience-header__audience-link img {
    width: 18px;
    height: 18px;
  }

  .audience-header__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border: 1px solid var(--color-black);
    border-radius: 100px;
    background: var(--color-white);
    font-size: 15px;
    white-space: nowrap;
  }
}

/* Decorative full-page watermark texture, reused across pages (same
   pattern as TOP's .hero__watermark, generically named here). */
.page-watermark {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
}

.page-watermark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Guide hero (breadcrumb + intro/media, no CTA) ----
   Promoted from individual-guide.css now that corporate/guide.html is a
   second consumer — see CLAUDE.md's CSS layering convention. Each page
   keeps its own floating CTA badge/button as a page-specific override
   (individual/guide.html's .guide-hero__line-badge stays in
   individual-guide.css; corporate/guide.html has no hero CTA at all). */

.guide-hero {
  position: relative;
  padding-block: 24px 32px;
}

.guide-hero__breadcrumb-sep {
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--color-gray-300);
}

.guide-hero__row {
  margin-top: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
}

.guide-hero__heading {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.3;
}

.guide-hero__text {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
  line-height: 1.7;
}

.guide-hero__lede {
  font-size: 15px;
  line-height: 1.5;
}

.guide-hero__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 992px) {
  .guide-hero {
    padding: 24px 32px 48px;
    max-width: 1280px;
    margin-inline: auto;
  }

  .guide-hero__row {
    margin-top: 40px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0 0 48px;
  }

  .guide-hero__intro {
    width: 472px;
  }

  .guide-hero__heading {
    font-size: 40px;
  }

  .guide-hero__media {
    width: 622px;
    height: 311px;
    aspect-ratio: auto;
  }

  .guide-hero__lede{
    white-space: nowrap;
  }
}

/* ---- Guide FAQ (intro sidebar + faq-list) ----
   Promoted from individual-guide.css now that corporate/guide.html is a
   second consumer. The FAQ accordion itself is the sitewide .faq-list/
   .faq-item* component above; this is just the two-column wrapper. */

.guide-faq {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 56px 20px 88px;
}

.guide-faq__lede {
  margin-top: 32px;
  font-size: 15px;
  line-height: 1.9;
}

.guide-faq__list-wrap {
  margin-top: 40px;
}

.guide-faq__more {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 768px) and (max-width: 991px) {
  .guide-faq {
    padding-inline: 40px;
  }
}

@media (min-width: 992px) {
  .guide-faq {
    padding: 56px 80px 88px;
    display: flex;
    gap: 104px;
  }

  .guide-faq__intro {
    width: 180px;
    flex-shrink: 0;
  }

  .guide-faq__body {
    flex: 1;
    padding-top: 48px;
  }
}

/* ---- Contact (2-col divided card selector) ----
   Promoted from corporate.css now that corporate/guide.html is a second
   consumer — identical copy/structure in both Figma frames. */

.corp-contact__intro {
  text-align: center;
}

.corp-contact__grid {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.corp-contact__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--color-gray-300);
}

.corp-contact__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(151, 134, 92, 0.2);
  font-size: 12px;
}

.corp-contact__title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
}

.corp-contact__desc {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  margin-inline: -8px;
}

@media (min-width: 992px) {
  .corp-contact {
    padding-block: 88px 96px;
  }

  .corp-contact__grid {
    flex-direction: row;
    gap: 0;
  }

  .corp-contact__item {
    flex: 1;
    padding: 0 32px;
    border-top: none;
    border-left: 1px solid var(--color-gray-300);
  }

  .corp-contact__item:last-child {
    border-right: 1px solid var(--color-gray-300);
  }
}

/* ---- Contact (audience-split CTA: individual/corporate rows) ----
   Promoted from top.css now that works/top.html is a second consumer —
   same Figma component ("FV_3") in both frames, just with each page's own
   heading/lede copy and CTA links/icons. */

.contact__intro {
  text-align: center;
}

.contact__lede {
  margin-top: 32px;
  font-size: 15px;
  line-height: 1.9;
}

.contact__grid {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-block {
  padding-bottom: 40px;
  border-bottom: 1px dashed var(--color-gray-300);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-block:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.contact-block__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
}

.contact-block__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
}

.contact-block__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-block__buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* LINE text link under the individual contact buttons (Figma 1714:14434) */
.contact-line {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-line__lede {
  font-size: 13px;
  line-height: 1.6;
}

.contact-line__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.contact-line__link span {
  padding-bottom: 4px;
  border-bottom: 1px solid #06c755;
  font-size: 14px;
  line-height: 1.05;
  white-space: nowrap;
}

.contact-line__logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.contact-line__link img:last-child {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .contact {
    padding-block: 88px 96px;
  }

  .contact .container {
    padding-inline: 160px;
  }

  .contact__grid {
    gap: 40px;
  }

  .contact-block {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }

  .contact-block__head {
    flex-direction: row;
    align-items: center;
    flex: 1;
  }

  .contact-block__copy {
    padding-left: 24px;
    border-left: 1px solid var(--color-gray-300);
  }
}

/* ---- Product spec tables ----
   Promoted from product-home.css once product/pro.html needed the identical
   centered-intro + labeled-block + table + feature-card-trio shape.
   --kv is PRO's addition: tints every row's first cell (no header row),
   for label/value blocks like "本体仕様" instead of a table with a head row.
   --3col is PRO's addition alongside the existing --4col column-count modifier. */

.product-specs__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.product-specs__lede {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.9;
}

.product-specs__block {
  margin-top: 48px;
}

.product-specs__block-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
}

.product-specs-feature{
  padding-top: 0;
}

.product-table,
.product-grid-table {
  margin-top: 16px;
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
  overflow: hidden;
}

.product-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-gray-300);
}

.product-table__row:first-child {
  border-top: none;
}

.product-table--3col .product-table__row {
  grid-template-columns: repeat(3, 1fr);
}

/* Vertically center each cell's text, so a short value (アバチ材) sits in
   the middle of a row whose other cell wraps to two lines. */
.product-table--3col .product-table__cell {
  display: flex;
  align-items: center;
}

/* PRO's 標準仕様 table: two equal columns at every breakpoint (overrides
   the PC 400px/1fr label-value split), with each cell's text centered
   both horizontally and vertically. Specificity (0,2,0) beats the PC
   `.product-table__row` rule, so no media query needed. */
.product-table--2col-centered .product-table__row {
  grid-template-columns: 1fr 1fr;
}

.product-table--2col-centered .product-table__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* SP only: .product-table--3col (product/home.html's 主な使用素材 table)
   transposes from 3 columns x 2 rows into 2 columns x 3 rows — head cells
   become a label column, data cells a value column. Same display:contents
   technique as .product-table--4col below; tablet/PC keep the 3-col row
   layout. Assumes one head row + one data row of 3 cells. */
@media (max-width: 767px) {
  .product-table--3col {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .product-table--3col .product-table__row {
    display: contents;
  }

  .product-table--3col .product-table__row--head .product-table__cell {
    grid-column: 1;
    border-left: none;
  }

  .product-table--3col .product-table__row:not(.product-table__row--head) .product-table__cell {
    grid-column: 2;
    border-left: 1px solid var(--color-gray-300);
  }

  .product-table--3col .product-table__cell:nth-child(1) {
    grid-row: 1;
  }

  .product-table--3col .product-table__cell:nth-child(2) {
    grid-row: 2;
    border-top: 1px solid var(--color-gray-300);
  }

  .product-table--3col .product-table__cell:nth-child(3) {
    grid-row: 3;
    border-top: 1px solid var(--color-gray-300);
  }
}

/* SP/tablet: .product-table--4col transposes its one head row + one data
   row into a 2-col x 4-row grid (label column + value column), instead of
   cramming 4 columns into a narrow viewport. display:contents on both
   .product-table__row elements lets their cells join one shared grid on
   .product-table--4col itself, rather than each row staying its own
   independent 4-col grid — that row-based shape is restored for PC only,
   see the repeat(4, 1fr) rule in the 992px block below. Assumes exactly
   one head row + one data row of 4 cells each, matching this component's
   only current consumer (product/home.html's materials table). */
@media (max-width: 991px) {
  .product-table--4col {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .product-table--4col .product-table__row {
    display: contents;
  }

  .product-table--4col .product-table__row--head .product-table__cell {
    grid-column: 1;
    border-left: none;
  }

  .product-table--4col .product-table__row:not(.product-table__row--head) .product-table__cell {
    grid-column: 2;
    border-left: 1px solid var(--color-gray-300);
  }

  .product-table--4col .product-table__cell:nth-child(1) {
    grid-row: 1;
  }

  .product-table--4col .product-table__cell:nth-child(2) {
    grid-row: 2;
    border-top: 1px solid var(--color-gray-300);
  }

  .product-table--4col .product-table__cell:nth-child(3) {
    grid-row: 3;
    border-top: 1px solid var(--color-gray-300);
  }

  .product-table--4col .product-table__cell:nth-child(4) {
    grid-row: 4;
    border-top: 1px solid var(--color-gray-300);
  }
}

.product-table__row--head .product-table__cell {
  background: #ECE8E0;
  font-size: 14px;
}

.product-table--kv .product-table__cell:first-child {
  background: var(--color-gold-tint);
}

.product-table__cell {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  border-left: 1px solid var(--color-gray-300);
}

.product-table__cell:first-child {
  border-left: none;
}

.product-grid-table {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-gray-300);
  gap: 1px;
}

.product-grid-table__cell {
  background: var(--color-cream);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-grid-table__label {
  font-weight: 700;
  font-size: 14px;
}

.product-grid-table__value {
  font-size: 13px;
  line-height: 1.5;
}

.product-specs__feature-grid {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.product-feature-card__media {
  aspect-ratio: 393 / 221;
}

.product-feature-card__title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}

.product-feature-card__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* Figma 2124:16147 — centered note under the Bed Types cards. */
.product-specs__feature-note {
  margin-top: 32px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

@media (min-width: 768px) {
  .product-feature-card__title {
    font-size: 20px;
  }

  .product-feature-card__desc,
  .product-specs__feature-note {
    font-size: 14px;
  }
}

.product-specs__note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.8;
  color: var(--color-gray-400);
}

@media (min-width: 992px) {
  .product-table--kv .product-table__row {
    grid-template-columns: 304px 1fr;
  }

  .product-table__row {
    grid-template-columns: 400px 1fr;
  }

  .product-table--4col .product-table__row {
    grid-template-columns: repeat(4, 1fr);
  }

  .product-table__cell {
    padding: 16px;
    font-size: 15px;
  }

  .product-table__row:not(.product-table__row--head) .product-table__cell {
    font-size: 13px;
  }

  .product-table--kv .product-table__row .product-table__cell {
    font-size: 15px;
  }

  .product-grid-table {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid-table__cell {
    padding: 16px 48px;
  }

  .product-grid-table__label {
    font-size: 15px;
  }

  /* Figma 2124:16075 — two cards, 64px apart, no divider. */
  .product-specs__feature-grid {
    flex-direction: row;
    gap: 64px;
  }

  .product-feature-card {
    flex: 1;
    min-width: 0;
  }

  .product-specs__feature-note {
    margin-top: 48px;
  }

  .product-specs__note {
    font-size: 12px;
  }
}

/* ---- Product works preview ----
   Promoted from product-home.css once product/pro.html needed the identical
   sidebar-intro + 2-col card grid shape. */

.product-works__desc {
  margin-top: 32px;
  font-size: 14px;
  line-height: 1.9;
}

.product-works__results {
  margin-top: 32px;
}

.product-works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.product-works__more {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 992px) {
  .product-works__container {
    display: flex;
    justify-content: space-between;
    gap: 48px;
  }

  .product-works__intro {
    flex: 0 0 180px;
  }

  .product-works__intro .section-title{
    font-size: 24px;
    white-space: nowrap;
  }

  .product-works__desc {
    font-size: 15px;
    width: 180px;
  }

  .product-works__results {
    margin-top: 0;
    flex: 1;
    max-width: 748px;
  }

  .product-works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 64px;
  }

  .product-works .work-card__media {
    aspect-ratio: 342 / 192;
  }
}

/* ---- Product hero, in-page tab nav, HOME/PRO notice banner ----
   Promoted from product-home.css once product/pro.html needed the
   identical components (breadcrumb hero, 7-tab in-page nav, gold
   cross-sell banner). .product-hero__line-badge is only used by pages
   that have a LINE channel (e.g. product/home.html) — harmless unused
   CSS on pages that don't render the element. */

.product-hero {
  position: relative;
  padding-block: 24px 48px;
}

.product-hero__crumb-sep {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-gray-300);
}

.product-hero__row {
  margin-top: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
}

.product-hero__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-hero__heading {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.3;
}

.product-hero__text {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-hero__lede {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
}

.product-hero__desc {
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
}

.product-hero__media {
  aspect-ratio: 4 / 3;
}

.product-hero__line-badge {
  margin: 16px auto 0;
  width: fit-content;
}

@media (min-width: 992px) {
  .product-hero {
    padding-block: 24px 0;
  }

  .product-hero__row {
    margin-top: 0;
    padding-block: 40px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .product-hero__content {
    width: 472px;
  }

  .product-hero__heading {
    font-size: 40px;
  }

  .product-hero__lede {
    font-size: 20px;
  }

  .product-hero__desc {
    font-size: 15px;
  }

  .product-hero__media {
    width: 622px;
    height: 311px;
    aspect-ratio: auto;
    flex-shrink: 0;
  }
}

/* ---- Guide quick-nav tabs ----
   Same grid construction as .product-tabs (border-right dividers between
   grid cells, translucent background panel, 2-col grid on mobile) — the
   only deliberate difference is the PC column count isn't hardcoded like
   .product-tabs__inner's `repeat(7, 1fr)`, since this component's child
   count varies per consumer (3 on individual/guide.html + faq.html, 4 on
   corporate/guide.html): default is repeat(3, 1fr), with a `--4col`
   modifier for the 4-tab case, same pattern as `.product-table--3col`/
   `--4col`. */

.product-tabs,
.guide-tabs {
  background: rgba(255, 255, 255, 0.4);
  padding-block: 24px;
  margin-inline: 20px;
}

.product-tabs__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 0;
}

.guide-tabs__inner{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px 0;
}

.product-tabs__link,
.guide-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  text-align: center;
  position: relative;
  padding-bottom: 16px;
}

.product-tabs__link:nth-child(odd):not(:last-child)::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 16px;
  width: 1px;
  background: var(--color-gray-300);
}

.product-tabs__link:not(:last-child)::after,
.guide-tab:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: var(--color-gray-300);
}

.product-tabs__link:nth-last-child(2):nth-child(odd)::after {
  content: none;
}

.product-tabs__link:last-child,
.product-tabs__link:nth-last-child(2):nth-child(odd),
.guide-tab:last-child {
  padding-bottom: 0;
}

.product-tabs__link:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.guide-tab__title {
  font-size: 16px;
}

.product-tabs__link img,
.guide-tab__icon {
  width: 18px;
  height: 18px;
}

@media (min-width: 992px) {
  .product-tabs,
  .guide-tabs {
    margin-inline: auto;
    margin-block: 48px;
    padding-block: 16px;
    max-width: 1120px;
  }

  .product-tabs__inner {
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
  }

  .guide-tabs__inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .guide-tabs__inner--4col {
    grid-template-columns: repeat(4, 1fr);
  }

  .product-tabs__link,
  .guide-tab {
    padding-inline: 24px;
    padding-bottom: 0;
    border-right: 1px solid var(--color-gray-300);
  }

  .product-tabs__link:last-child,
  .guide-tab:last-child {
    border-right: none;
  }

  .product-tabs__link:nth-child(odd):not(:last-child)::before,
  .product-tabs__link:not(:last-child)::after,
  .guide-tab:nth-child(odd):not(:last-child)::before,
  .guide-tab:not(:last-child)::after {
    content: none;
  }

  .product-tabs__link:last-child:nth-child(odd),
  .guide-tab:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .guide-tab__title {
    font-size: 18px;
  }
}

.product-notice {
  padding-block: 48px 16px;
}

.product-notice__inner {
  background: var(--color-gold);
  border-radius: 10px;
  padding: 24px;
  color: var(--color-white);
}

.product-notice__inner > div {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-notice__heading {
  font-size: 18px;
  line-height: 1.5;
}

.product-notice__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.product-notice__inner .pill-btn {
  align-self: flex-start;
}

.product-notice__inner .pill-btn span {
  color: var(--color-black);
}

@media (min-width: 992px) {
  .product-features {
      padding-block: 0 88px;
  }

  .product-notice__inner {
    padding: 40px;
  }

  .product-notice__inner > div {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-left: 1px solid var(--color-white);
    border-right: 1px solid var(--color-white);
    padding-inline: 32px;
  }

  .product-notice__text {
    flex: 1;
  }

  .product-notice__heading {
    font-size: 25px;
  }

  .product-notice__desc {
    font-size: 15px;
    line-height: 1.9;
  }

  .product-notice__inner .pill-btn {
    align-self: center;
  }
}

/* ---- Product layout grid, option grid, works-choose FAQ ----
   Promoted from product-home.css once product/pro.html needed the
   identical components. --3col is PRO's addition to .product-layout__types
   for its 6-type/3-column arrangement (vs. product/home.html's 4-across). */

.product-layout__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-layout__desc {
  font-size: 14px;
  line-height: 1.9;
}

.product-layout__types {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}

.product-layout-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.product-layout-type__icon {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  background: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-layout-type__icon img {
  width: 44px;
  height: 44px;
}

.product-layout-type__name {
  font-size: 16px;
}

.product-layout-type__dims {
  margin-top: -8px;
  font-size: 12px;
  color: var(--color-gray-400);
}

.product-layout__note {
  margin-top: 24px;
  font-size: 11px;
  line-height: 1.8;
  color: var(--color-gray-400);
}

.product-layout__photos {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-layout__photo {
  aspect-ratio: 4 / 3;
}

@media (min-width: 992px) {
  .product-layout__intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .product-layout__desc {
    font-size: 15px;
  }

  .product-layout__types {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .product-layout__types--3col {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 48px;
  }

  .product-layout__types--3col .product-layout-type:nth-child(-n+3) {
    border-top: none;
    padding-top: 0;
  }

  .product-layout-type {
    padding-inline: 20px;
    border-right: 1px solid var(--color-gray-300);
    border-top: none;
  }

  .product-layout-type__icon {
    width: 112px;
    height: 112px;
  }

  .product-layout-type__icon img {
    width: 60px;
    height: 65px;
  }

  .product-layout-type__name {
    font-size: 20px;
  }

  .product-layout-type__dims {
    font-size: 13px;
  }

  .product-layout__note {
    font-size: 12px;
    text-align: right;
  }

  .product-layout__photos {
    flex-direction: row;
  }

  .product-layout__photo {
    flex: 1;
    aspect-ratio: auto;
    height: 277px;
  }
}

.product-option__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-option__desc {
  font-size: 14px;
  line-height: 1.9;
}

.product-option__grid {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.product-option-card__index {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 22px;
  color: var(--color-gold);
}

.product-option-card__media {
  margin-top: 12px;
  aspect-ratio: 393 / 221;
}

.product-option-card__title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  text-align: center;
}

.product-option-card__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 992px) {
  .product-option__intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .product-option__desc {
    font-size: 15px;
  }

  /* Wrapping flex (not grid) so an incomplete last row is centered —
     product/pro.html has 5 cards (3 + 2). Cards are sized to exactly a
     third of the row minus the two 48px column gaps, matching the old
     repeat(3, 1fr) grid, so product/home.html's 6 cards are unchanged. */
  .product-option__grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 56px 48px;
  }

  .product-option__grid > .product-option-card {
    width: calc((100% - 2 * 48px) / 3);
  }

  .product-option-card__index {
    font-size: 28px;
  }

  .product-option-card__title,
  .product-option-card__desc {
    text-align: left;
  }
}

.product-choose__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.product-choose__steps {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.product-choose__step {
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--color-gray-300);
}

.product-choose__inner {
  border-left: 1px solid var(--color-gold);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-choose__step-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
}

.product-choose__step-desc {
  font-size: 13px;
  line-height: 1.7;
}

.product-choose__step-link {
  align-self: flex-start;
}

.product-choose__faq {
  margin-top: 48px;
}

.product-choose__faq-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
}

.product-choose__faq-grid {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.product-choose__qa {
  padding-block: 16px;
  border-top: 1px solid var(--color-gray-300);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-choose__qa:last-child {
  border-bottom: 1px solid var(--color-gray-300);
}

.product-choose__q,
.product-choose__a {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.product-choose__q span,
.product-choose__a span {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 20px;
  color: var(--color-gold);
  flex-shrink: 0;
  line-height: 1.3;
}

.product-choose__a span {
  color: var(--color-dkblue);
}

.product-choose__disclaimer {
  margin-top: 32px;
  font-size: 11px;
  line-height: 1.8;
  text-align: left;
  color: var(--color-gray-400);
}

.product-choose__cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.product-choose__cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.product-choose__cta-link {
  font-size: 13px;
  text-decoration: underline;
}

@media (min-width: 992px) {
  .product-choose__steps {
    gap: 40px;
  }

  .product-choose__step {
    padding-bottom: 40px;
  }

  .product-choose__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    padding-left: 24px;
  }

  .product-choose__step-title {
    font-size: 22px;
  }

  .product-choose__step-desc {
    font-size: 15px;
  }

  .product-choose__inner > div:first-child {
    flex: 1;
  }

  .product-choose__faq-title {
    font-size: 22px;
  }

  .product-choose__faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 48px;
  }

  /* 2-column grid puts this item in the same bottom row as :last-child,
     so it needs the matching border-bottom to close out the row. */
  .product-choose__qa:nth-last-child(2) {
    border-bottom: 1px solid var(--color-gray-300);
  }

  .product-choose__q,
  .product-choose__a {
    font-size: 15px;
  }

  .product-choose__disclaimer {
    font-size: 12px;
    text-align: center;
  }

  .product-choose__cta-buttons {
    flex-direction: row;
  }
}

/* ---- Works filter + grid layout ----
   Promoted from top.css once works/top.html needed the identical
   filter-sidebar + card-grid shape. .works__more is TOP's own
   right-aligned "see more" link to works/top.html; works/top.html
   itself uses its own centered .works-list__more instead (see
   works.css), since Figma centers that page's "もっと見る" under the
   grid rather than right-aligning it. */

.works__layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.works__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
}

.works__filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-gray-400);
}

.works__filter::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.works__filter.is-active {
  color: var(--color-black);
}

.works__results {
  min-width: 0;
}

.works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.works__more {
  margin-top: 40px;
  display: flex;
  justify-content: flex-end;
}

.works__empty {
  padding: 16px 0 16px 4px;
  font-size: 14px;
  color: var(--color-gray-400);
}

@media (min-width: 992px) {
  .works__layout {
    flex-direction: row;
    gap: 144px;
    align-items: flex-start;
    padding-right: 48px;
  }

  .works__filters-col {
    flex: 0 0 auto;
  }

  .works__filters {
    flex-direction: column;
    flex: 0 0 auto;
    gap: 20px;
  }

  .works__results {
    flex: 1;
  }

  .works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 64px;
  }
}

/* ---- Generic field form (label/required/input/select/textarea/
   divider/consent/submit) ----
   Promoted from contact.css now that showroom/reservation.html is a
   second consumer of the identical field-row pattern — see CLAUDE.md's
   CSS layering convention. Page-specific additions (contact.html's
   audience radio group, paired name/furigana subfields; reservation's
   date/time trigger rows) stay in each page's own CSS file. */

.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 992px) {
  .form {
    max-width: 784px;
    margin-inline: auto;
    gap: 40px;
  }
}

.form__divider {
  height: 1px;
  background: var(--color-gray-300);
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 992px) {
  .form__row {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
}

.form__label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
}

@media (min-width: 992px) {
  .form__label {
    flex: none;
    width: 172px;
  }
}

.form__required {
  color: var(--color-gold);
  font-size: 20px;
  line-height: 1;
}

.form__field {
  flex: 1;
  min-width: 0;
}

/* Text inputs / select / textarea share one visual treatment */
.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 16px 16px 16px 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-gray-400);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-black);
}

.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-gray-400);
}

.form__textarea {
  height: 200px;
  resize: vertical;
}

/* ---- Paired subfields (姓/名 side by side at every breakpoint) ----
   Promoted from contact.css once showroom/top.html's reservation form
   needed the same name row. */

.contact-form__field-pair {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
}

.contact-form__subfield {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.contact-form__subfield-label {
  font-size: 15px;
  line-height: 1.5;
}

.form__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.form__select-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.form__select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* ---- Consent checkbox ---- */

.form__consent {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  align-self: center;
  cursor: pointer;
}

.form__consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form__checkbox {
  position: relative;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 1px;
  border: 1px solid var(--color-black);
  background: var(--color-white);
}

.form__consent input:checked + .form__checkbox::after {
  content: '';
  position: absolute;
  left: 3px;
  top: -1px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--color-black);
  border-bottom: 2px solid var(--color-black);
  transform: rotate(40deg);
}

.form__consent input:focus-visible + .form__checkbox {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.form__consent-text {
  display: flex;
  gap: 4px;
  font-size: 15px;
  line-height: 1.5;
}

.form__consent-text a {
  text-decoration: underline;
}

.form__submit {
  align-self: center;
}

/* ---- Flow steps (numbered badge + icon + title + desc) ----
   Promoted from individual-guide.css now that showroom/reservation.html
   is a second consumer of the identical step pattern — see CLAUDE.md's
   CSS layering convention. Each page keeps its own section head
   (eyebrow/heading/lede) in its own CSS file. */

.flow-steps {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.flow-step__badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-gold);
  font-variant-numeric: lining-nums;
}

.flow-step__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.flow-step__text{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flow-step__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
}

.flow-step__desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
}

.flow-step__connector {
  display: none;
}

@media (min-width: 992px) {
  .flow-steps {
    margin-top: 64px;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }

  .flow-step {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    position: relative;
  }

  .flow-step__connector {
    display: block;
    position: absolute;
    top: 64px;
    left: calc(-50% + 26px);
    width: calc(100% - 52px);
    height: 5px;
    background: url('../assets/images/individual/icon-flow-connector.svg') no-repeat center / auto 100%;
  }

  .flow-step__icon {
    width: 52px;
    height: 52px;
  }

  .flow-step__text{
    justify-content: center;
  }
}

/* ---- Google Maps store-map engine (#map / .store-map / .map-legend* /
   .info-window* / .gm-style-iw*) ----
   Promoted from sauna-map.css now that showroom/top.html is a second
   consumer of the identical map/legend/InfoWindow shape (both driven by
   js/store-map.js) — see CLAUDE.md's CSS layering convention. Each page
   keeps its own `.store-map-panel`-equivalent container sizing, since that
   differs per page (sauna-map.html's is a full-bleed hero band; showroom's
   is a contained box matching its existing `.showroom-access__map`) — only
   what's inside the panel is identical, so only that part moved here. */

.store-map {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-legend {
  background: #ffffff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif;
  min-width: 150px;
  max-width: 260px;
}

/* PC (≥768px): overlaid inside the map itself, injected by js/store-map.js */
.map-legend--in-map {
  position: absolute;
  bottom: 22px;
  right: 60px;
  z-index: 1;
}

/* Mobile/tablet (<768px): plain block below the map panel, hidden on PC */
.map-legend--below-map {
  display: none;
  margin-top: 16px;
}

@media screen and (max-width: 768px) {
  .map-legend--in-map {
    display: none;
  }

  .map-legend--below-map {
    display: block;
  }
}

.map-legend__title {
  font-size: 13px;
  font-weight: bold;
  color: #2c3035;
  margin-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
}

.map-legend__item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.map-legend__item:last-child {
  margin-bottom: 0;
}

.map-legend__marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.map-legend__label {
  font-size: 12px;
  color: #333;
}

/* Google Maps InfoWindow styling (applies once a real key renders markers) */
.gm-style-iw-ch,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-d {
  padding: 0 !important;
}

.gm-style-iw.gm-style-iw-c {
  padding: 0 !important;
  max-width: 320px !important;
}

.gm-style-iw-t::after,
.gm-ui-hover-effect {
  display: none !important;
}

.info-window {
  padding: 15px;
  max-width: 320px;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
}

.info-window__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 8px;
  background-color: #6b7280;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  border-radius: 3px;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

.info-window__title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.4;
}

.info-window__address {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
}

.info-window__link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2c3035;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}