.hero-brand { position: relative; display: grid; height: clamp(38rem,50vw,50rem); overflow: hidden; background: var(--color-bark); color: var(--color-white); isolation: isolate; }
.hero-brand::after { content: ""; z-index: 1; grid-area: 1 / 1; background: linear-gradient(90deg,rgba(48,32,23,.96) 0%,rgba(48,32,23,.82) 25%,rgba(48,32,23,.48) 43%,rgba(48,32,23,.08) 66%,transparent 78%); pointer-events: none; }
.hero-brand__copy { z-index: 2; display: grid; grid-area: 1 / 1; width: min(48%,46rem); align-content: center; padding: clamp(4rem,7vw,7rem) var(--space-page); }
.hero-brand__copy h1 { max-width: 10ch; margin-bottom: 1.5rem; font-size: clamp(3.6rem,5vw,5.3rem); line-height: 1.3; }
.hero-brand__copy h1 span { display: block; white-space: nowrap; }
.hero-brand__copy p:not(.eyebrow) { max-width: 27rem; color: rgba(255,255,255,.76); font-size: clamp(1rem,1.5vw,1.2rem); }
.hero-brand__media { position: relative; z-index: 0; grid-area: 1 / 1; overflow: hidden; }
.hero-brand__media picture { display: block; width: 100%; height: 100%; }
.hero-brand__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.hero-brand__caption { position: absolute; right: 1rem; bottom: 1rem; margin: 0; padding: .35rem .6rem; background: rgba(0,0,0,.42); font-family: var(--font-sans); font-size: .66rem; }

.brand-intro { background: var(--color-logo-canvas, #fbfbfb); }
.brand-intro__inner { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(3rem,7vw,7rem); align-items: center; }
.brand-intro__logo { width: min(100%,38rem); margin-inline: auto; }
.brand-intro__copy .lead { max-width: 34rem; }
.brand-intro__copy h2 { font-size: clamp(2rem,4.8vw,4rem); }
.brand-intro__copy h2 span { display: block; white-space: nowrap; }

.product-feature { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(20rem,.72fr); gap: clamp(3rem,7vw,7rem); align-items: center; }
.product-feature__image { aspect-ratio: 16 / 9; overflow: hidden; }
.product-feature__image img { width: 100%; height: 100%; object-fit: cover; }
.product-support { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: clamp(2rem,5vw,4rem); }
.product-support figure { margin: 0; background: var(--color-white); }
.product-support img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.product-support figcaption { padding: 1rem; color: var(--color-ink-soft); font-family: var(--font-sans); font-size: .75rem; }

.craft-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(3rem,8vw,7rem); align-items: center; }
.craft-image img { width: 100%; box-shadow: 2rem 2rem 0 rgba(255,255,255,.055); }
.craft-image figcaption { margin-top: 1rem; color: rgba(255,255,255,.58); font-family: var(--font-sans); font-size: .7rem; }
.needed-shots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 4rem; }
.craft-step { min-width: 0; margin: 0; background: var(--color-paper); color: var(--color-ink); }
.craft-step img { width: 100%; height: auto; }
.craft-step figcaption { padding: 1.25rem; }
.craft-step strong, .craft-step span { display: block; }
.craft-step span { margin-top: .5rem; color: var(--color-ink-soft); font-family: var(--font-sans); font-size: .78rem; }
.needed-shots .placeholder-media { min-height: 14rem; color: var(--color-ink); background-color: var(--color-paper); }

.about-strip { display: grid; grid-template-columns: minmax(10rem,.35fr) minmax(0,.65fr); gap: clamp(3rem,9vw,8rem); align-items: center; }
.about-strip img { width: min(100%,14rem); margin-inline: auto; }
.about-section { background: var(--color-logo-canvas, #fbfbfb); }

.page-hero { padding: clamp(5rem,11vw,9rem) 0; background: var(--color-paper-deep); }
.page-hero h1 { max-width: 13ch; margin-bottom: 1.5rem; font-size: clamp(2.6rem,6vw,5.5rem); }
.page-hero--image { position: relative; min-height: 38rem; display: grid; color: var(--color-white); overflow: hidden; }
.page-hero--image > img, .page-hero--image::after, .page-hero--image__content { grid-area: 1 / 1; }
.page-hero--image > img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--image::after { content: ""; background: linear-gradient(90deg,rgba(20,17,14,.78),rgba(20,17,14,.12)); }
.page-hero--image__content { z-index: 1; align-self: end; padding-block: clamp(4rem,8vw,7rem); }
.page-hero--brand { height: clamp(28.5rem,51vw,42rem); min-height: 0; }
.page-hero--brand > img { object-position: center 72%; }
.page-hero--brand .page-hero--image__content { position: absolute; bottom: 0; left: 50%; width: min(calc(100% - (var(--space-page) * 2)),var(--container)); padding-block: 0 2.5rem; transform: translateX(-50%); }
.page-hero--brand h1 { margin-bottom: 0; font-size: clamp(2.5rem,5vw,4.2rem); }

.editorial-grid { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: clamp(3rem,9vw,8rem); }
.editorial-grid__title { position: sticky; top: 8rem; align-self: start; }
.story-chapter { padding: 0 0 4rem; border-bottom: 1px solid var(--color-line); }
.story-chapter + .story-chapter { padding-top: 4rem; }

.card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.5rem,4vw,3rem); }
.product-card { background: var(--color-white); }
.product-card__image { aspect-ratio: 4 / 3; overflow: hidden; }
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: clamp(1.5rem,4vw,2.6rem); }
.product-card__status { color: var(--color-ink-soft); font-family: var(--font-sans); font-size: .74rem; }

.access-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(3rem,8vw,8rem); }
.contact-note { padding: clamp(2rem,5vw,4rem); background: var(--color-white); }

.lp-hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(22rem,.85fr); min-height: 44rem; background: var(--color-white); }
.lp-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.lp-hero__copy { display: grid; align-content: center; padding: clamp(3rem,7vw,7rem); }
.lp-hero__copy h1 { font-size: clamp(2.5rem,5vw,5rem); }
.lp-section { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(3rem,8vw,7rem); align-items: center; }
.lp-section--reverse > :first-child { order: 2; }
.lp-section img { width: 100%; }
.cta-panel { max-width: 54rem; margin-inline: auto; text-align: center; }
.cta-panel h2 { max-width: 15ch; margin-inline: auto; }
.faq-list { border-top: 1px solid var(--color-line); }
.faq-list details { padding: 1.4rem 0; border-bottom: 1px solid var(--color-line); }
.faq-list summary { cursor: pointer; font-weight: 600; }
.faq-list p { margin: 1rem 0 0; color: var(--color-ink-soft); }

.not-found { display: grid; min-height: 70vh; place-items: center; padding: var(--space-page); text-align: center; }
.not-found__mark { margin-bottom: 1rem; color: var(--color-wood); font-family: var(--font-sans); font-size: clamp(4rem,12vw,9rem); line-height: 1; }

@media (max-width: 880px) {
  .hero-brand, .brand-intro__inner, .product-feature, .craft-layout, .about-strip, .editorial-grid, .access-grid, .lp-hero, .lp-section { grid-template-columns: 1fr; }
  .hero-brand { display: flex; height: auto; min-height: auto; flex-direction: column; }
  .hero-brand::after { display: none; }
  .hero-brand__copy { order: 2; width: auto; }
  .hero-brand__copy h1 { max-width: 8ch; font-size: clamp(2.7rem,16vw,4.6rem); }
  .hero-brand__copy h1 span { display: inline; white-space: normal; }
  .hero-brand__media { min-height: min(110vw,42rem); }
  .needed-shots { grid-template-columns: 1fr; }
  .brand-intro__inner { gap: 3rem; text-align: center; }
  .brand-intro__copy .lead { margin-inline: auto; }
  .editorial-grid__title { position: static; }
  .lp-hero__media { min-height: 28rem; }
  .lp-section--reverse > :first-child { order: initial; }
}

@media (max-width: 580px) {
  .product-support, .card-grid { grid-template-columns: 1fr; }
  .page-hero--image { min-height: 31rem; }
  .page-hero--brand { height: 30rem; min-height: 0; }
}

/* 商品説明LP専用：他ページの既存レイアウトには適用しない */
.chopsticks-lp .lp-hero { min-height: auto; }
.chopsticks-lp .lp-hero__media { display: flex; align-items: center; min-height: 0; }
.chopsticks-lp .lp-hero__media img { height: auto; object-fit: contain; }
.chopsticks-lp .lp-overview { padding-block: 3rem; }
.chopsticks-lp .lp-features, .chopsticks-lp .lp-lineup { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.chopsticks-lp .lp-features h2 { font-size: 1.35rem; }
.chopsticks-lp .lp-material .lp-section > img { max-height: 38rem; object-fit: contain; }
.chopsticks-lp .lp-material .craft-step { margin-block: 2rem; }
.chopsticks-lp .lp-master { border-left: 2px solid var(--color-wood); padding-left: 2rem; }
.chopsticks-lp .lp-master .button { margin-top: 2rem; }
.chopsticks-lp .lp-inspection { margin-top: 2rem; max-width: 28rem; }
.chopsticks-lp .lp-lineup { margin-top: 2rem; }
.chopsticks-lp .lp-product-card { min-width: 0; border: 1px solid var(--color-line); background: var(--color-paper); display: flex; flex-direction: column; }
.chopsticks-lp .lp-photo-pending { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 1rem; border-bottom: 1px solid var(--color-line); color: var(--color-ink-soft); font-family: var(--font-sans); }
.chopsticks-lp .lp-product-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.chopsticks-lp .lp-product-card h3 { font-size: 1.4rem; }
.chopsticks-lp .lp-product-card dl { font-family: var(--font-sans); margin-block: 1rem; }
.chopsticks-lp .lp-product-card dd { margin: 0 0 .75rem; }
.chopsticks-lp .lp-product-card .button { margin-top: auto; min-height: 48px; }
.chopsticks-lp button:disabled { background: var(--color-paper-deep); color: var(--color-ink-soft); cursor: default; border-color: var(--color-line); }
.chopsticks-lp #lineup { scroll-margin-top: 7rem; }
@media (max-width: 880px) {
  .chopsticks-lp .lp-features, .chopsticks-lp .lp-lineup { grid-template-columns: 1fr; }
  .chopsticks-lp .lp-hero__copy { padding: 2rem var(--space-page); }
  .chopsticks-lp .lp-hero__copy h1 { font-size: 2.5rem; }
  .chopsticks-lp .lp-material .lp-section > img { max-height: 26rem; }
  .chopsticks-lp .lp-features p, .chopsticks-lp .lp-product-card p, .chopsticks-lp .lp-product-card dl { font-size: 1rem; }
}
@media (min-width: 881px) {
  .chopsticks-lp .lp-hero__copy { padding: 3rem; }
  .chopsticks-lp .lp-hero__copy h1 { font-size: clamp(2.5rem,3.5vw,3.5rem); }
}