/* Layout and accessibility refinement. Existing copy and assets are preserved. */
:root {
  --page-gutter: clamp(1.5rem, 4.6vw, 4.5rem);
  --content-width: 72.5rem;
  --section-space: clamp(4.5rem, 7vw, 7rem);
  --body-ink: #49443d;
  --muted-ink: #686157;
}

html { scroll-padding-top: 2rem; }
body { font-size: 1rem; line-height: 1.8; }
button, a { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
a:focus-visible, button:focus-visible {
  outline: 3px solid #c44000;
  outline-offset: 5px;
}
header a:focus-visible, #top a:focus-visible, #line a:focus-visible,
[data-bar] button:focus-visible { outline-color: #fff; }
[data-r~="pad"] {
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}
.page-section { padding-block: var(--section-space) !important; }
.page-section > div[style*="max-width:1240px"] {
  max-width: var(--content-width) !important;
}
.page-section p {
  font-size: 1rem !important;
  line-height: 2.1 !important;
}
.page-section h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  line-height: 1.75 !important;
  letter-spacing: .025em !important;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.page-section h2 span { white-space: normal !important; }
.page-section div[style*="10.5px"],
.page-section span[style*="10.5px"],
.page-section small[style*="10.5px"] { font-size: .75rem !important; }
.page-section > div > div[style*="margin-bottom:48px"],
.terroir-section > div > div:first-child { margin-bottom: 2.5rem !important; }
[data-r~="g2"] > *, [data-r~="g4"] > * { min-width: 0; }

/* A flexible first screen grows with text rather than clipping it. */
.site-header { padding-block: 1.75rem !important; gap: 1.5rem; }
.site-header nav { gap: clamp(1rem, 2vw, 1.875rem) !important; }
.site-header nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.site-header > a { flex-shrink: 0; }
.site-header > a > span:last-of-type { font-size: .75rem !important; opacity: .85 !important; }
#top {
  height: auto !important;
  min-height: min(54rem, 90svh) !important;
  display: flex;
  align-items: flex-end;
}
#top > div:nth-child(2) {
  background: linear-gradient(180deg, rgba(9, 20, 28, .48), transparent 30%),
    linear-gradient(90deg, rgba(9, 20, 28, .70), rgba(9, 20, 28, .18) 85%),
    linear-gradient(0deg, rgba(9, 20, 28, .55), transparent 70%) !important;
}
[data-r~="herobox"] {
  position: relative !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  width: 100%;
  padding: 11rem var(--page-gutter) 4rem !important;
  gap: 1.75rem !important;
}
[data-r~="herobox"] > div:first-child { font-size: .75rem !important; opacity: .88 !important; }
#top h1 {
  font-size: clamp(1.75rem, 3.75vw, 3.5rem) !important;
  line-height: 1.65 !important;
  letter-spacing: .035em !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .15);
}
[data-r~="herobox"] > div:last-child { gap: 1rem 1.5rem !important; }
[data-r~="herobox"] > div:last-child > span {
  font-size: .875rem !important;
  color: rgba(255, 255, 255, .94) !important;
  line-height: 1.9 !important;
}
[data-r~="herocta"] { min-height: 3.5rem; }
a[href="https://lin.ee/rj117j8"] {
  background-color: #087f3b !important;
  border-color: #087f3b !important;
  transition: box-shadow .2s ease, filter .2s ease;
}
@media (hover:hover) {
  a[href="https://lin.ee/rj117j8"]:hover {
    filter: brightness(.94);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  }
}

/* Keep the story's pace, with a readable measure and tighter section rhythm. */
#concept { gap: 2rem !important; }
#concept > div { max-width: 44rem; }
#concept > div[style*="14px"] {
  font-size: 1rem !important;
  line-height: 2.2 !important;
  letter-spacing: .02em !important;
}
#concept > div:nth-child(2) {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  line-height: 1.9 !important;
}
.landscape-band {
  width: calc(100% - 2 * var(--page-gutter));
  max-width: var(--content-width);
  margin-inline: auto;
  height: clamp(15rem, 35vw, 28rem) !important;
}
.terroir-section [data-r~="g4"] > div { padding: 1.75rem 1.5rem !important; }
.terroir-section [data-r~="g4"] p { color: var(--body-ink) !important; }
.terroir-section [data-r~="g4"] > div > span { color: var(--muted-ink) !important; }
#about [data-r~="g2"] {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  gap: clamp(2rem, 5vw, 4.5rem) !important;
  align-items: center !important;
}
#about [data-r~="g2"] > div:last-child { gap: 1.5rem !important; padding-top: 0 !important; }
#about [data-slot="portrait"] { aspect-ratio: 4 / 5 !important; }
.profile-stats { width: 100%; margin-top: 0 !important; }
.profile-stats > div { padding: 1.25rem .75rem !important; }
.profile-stats small { letter-spacing: .03em !important; overflow-wrap: anywhere; }
.heritage-section [data-r~="g2"] {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
  gap: clamp(2.5rem, 6vw, 5rem) !important;
}
.heritage-section p { color: rgba(244, 241, 234, .90) !important; }
#mikan [data-r~="g2"] {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
  gap: clamp(2rem, 5vw, 4.5rem) !important;
}
#mikan [data-slideshow] { aspect-ratio: 4 / 5 !important; }
.product-details { width: 100%; max-width: none !important; margin-top: .5rem !important; }
.product-details > div {
  display: grid !important;
  grid-template-columns: 4em minmax(0, 1fr);
  padding-block: 1.125rem !important;
  font-size: 1rem !important;
  line-height: 1.8;
}
.product-details b { text-align: right; font-weight: 500; }
[data-caps] { left: 1.25rem !important; bottom: 1.5rem !important; }
[data-caps] > span { font-size: .875rem !important; letter-spacing: .12em !important; }
[data-bar] { right: 1rem !important; bottom: .5rem !important; gap: .25rem !important; }
[data-bar] > button {
  position: relative;
  width: 2.75rem !important; height: 2.75rem !important;
  overflow: visible !important;
  background: linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) center / 100% 3px no-repeat !important;
}
[data-bar] > button > i { position: absolute; top: calc(50% - 1.5px); height: 3px !important; }

/* Group the LINE action and reassurance into one clearly bounded area. */
#line > div:first-child { opacity: .16 !important; }
#line [data-r~="ctarow"] > div:first-child > span { background-color: #087f3b !important; }
.page-section div[style*="color:#f54e00"] { color: #b23b0d !important; }
.page-section span[style*="color:#a09a91"] { color: var(--muted-ink) !important; }
#line [data-r~="ctarow"] {
  grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr) !important;
  gap: clamp(2rem, 5vw, 4.5rem) !important;
}
#line [data-r~="ctarow"] > div:first-child > div:first-of-type {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  line-height: 1.75 !important;
}
#line [data-r~="ctarow"] > div:last-child {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.2);
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  gap: 1rem !important;
}
#line small { font-size: .875rem !important; color: rgba(255,255,255,.85) !important; }
[data-r~="steps"] { gap: .5rem !important; }
[data-r~="steps"] > div:not([data-r~="arrow"]) { padding-inline: .25rem !important; min-width: 0; }
[data-r~="steps"] > div > span:last-child { font-size: 1rem !important; }

/* Secondary stories stay compact; their captions and links remain legible. */
[data-r~="reeltile"] { flex-basis: clamp(8.75rem, 28vw, 11rem); }
[data-r~="reeltile"] > small { font-size: .875rem; line-height: 1.8; color: var(--body-ink); }
[data-r~="recordhd"] > a, #note > div > a {
  font-size: .875rem !important; min-height: 2.75rem;
  display: inline-flex !important; align-items: center;
}
.social-links { margin-top: 2rem !important; padding-top: 2rem !important; }
[data-r~="snspill"] { font-size: .875rem; min-height: 2.75rem; padding: .75rem 1.25rem; }
[data-r~="notelist"] { max-width: 54rem; }
[data-r~="noterow"] { gap: 1.5rem; padding: 1.5rem 0; }
[data-r~="noterow"] > span:first-child { flex-basis: clamp(7rem, 20vw, 10rem); }
[data-r~="noterow"] small { font-size: .8125rem; line-height: 1.7; letter-spacing: .025em; color: #aa3600; }
[data-r~="noterow"] b { font-size: 1rem; line-height: 1.85; }
.site-footer { padding-block: 2.5rem !important; }
.site-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .8125rem; }
[data-r~="ftr"] { font-size: .875rem !important; color: var(--muted-ink) !important; }
[data-r~="bar"] { padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom)) !important; }
[data-r~="bar"] > a { max-width: 32rem; margin-inline: auto; padding-block: .875rem !important; font-size: 1rem !important; }

@media (min-width: 901px) and (max-width: 1100px) {
  .site-header { --page-gutter: 2rem; }
  .site-header nav { gap: 1rem !important; font-size: .8125rem !important; }
}
@media (max-width: 900px) {
  #about [data-r~="g2"], .heritage-section [data-r~="g2"],
  #mikan [data-r~="g2"], #line [data-r~="ctarow"] { grid-template-columns: minmax(0, 1fr) !important; }
  #about [data-slot="portrait"] { width: 100%; max-width: 30rem; margin-inline: auto; }
  .heritage-section [data-slot="grandfather"] { max-width: 26rem; width: 100%; margin-inline: auto; }
  #mikan [data-slideshow] { width: 100%; max-width: 30rem; margin-inline: auto; }
  #line [data-r~="ctarow"] > div:last-child { max-width: 32rem; width: 100%; justify-self: center; }
  [data-r~="steps"] > div:not([data-r~="arrow"]) {
    display: grid !important;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    align-items: baseline;
    padding: 1rem 0 !important;
    gap: 1rem !important;
  }
  [data-r~="steps"] > div[data-r~="arrow"] { align-self: center; padding: 0 !important; min-height: 1.5rem; }
  [data-r~="steps"] br { display: none; }
  .site-footer[data-r~="tail"] { padding-bottom: calc(7rem + env(safe-area-inset-bottom)) !important; }
  .social-links { gap: .75rem !important; }
}
@media (max-width: 560px) {
  :root { --page-gutter: 1.5rem; --section-space: 4rem; }
  .site-header { padding-block: 1.5rem !important; gap: .75rem; }
  .site-header > a > span:first-of-type { font-size: 1rem !important; }
  .site-header > a > span:last-of-type { font-size: .75rem !important; letter-spacing: .16em !important; }
  /* ヘッダーのロゴ（森さん制作・2026-09-15追加）。スマホでは文字ブロックの高さに合わせて縮める。
     375px時の余白は brand右182.5 → nav左255.8 の 73px しかないので、46pxのままだと公式LINEボタンを押し出す */
  .site-header > a { column-gap: 10px !important; }
  .site-header [data-r~="hdlogo"] { width: 36px !important; }
  /* LINEセクション背景の透かしロゴ。スマホは縦積みになり右端に寄ると切れるので中央へ寄せて小さく */
  [data-r~="linemark"] { width: 62vw !important; right: -30vw !important; opacity: .045 !important; }
  .site-header nav > a:last-child { padding: .75rem 1rem !important; white-space: nowrap; }
  #top { min-height: min(46rem, calc(100svh - 4.5rem)) !important; }
  [data-r~="herobox"] {
    left: auto !important; right: auto !important;
    padding: 9.5rem var(--page-gutter) 2.5rem !important;
    gap: 1.5rem !important;
  }
  #top > div:nth-child(2) {
    background: linear-gradient(180deg, rgba(9,20,28,.48), rgba(9,20,28,.3) 25%, rgba(9,20,28,.73)) !important;
  }
  #top h1 { font-size: clamp(1.5rem, 6.85vw, 1.875rem) !important; line-height: 1.75 !important; }
  [data-r~="herobox"] > div:last-child { flex-direction: column; align-items: stretch !important; gap: 1rem !important; }
  [data-r~="herocta"] { align-self: flex-start; padding: .875rem 1.75rem !important; font-size: 1.0625rem !important; }
  #concept { gap: 1.75rem !important; }
  #concept > div[style*="14px"] { letter-spacing: 0 !important; line-height: 2.1 !important; }
  .terroir-section [data-r~="g4"] { grid-template-columns: minmax(0, 1fr) !important; }
  .terroir-section [data-r~="g4"] > div { padding: 1.5rem .25rem !important; gap: .625rem !important; }
  .terroir-section [data-r~="g4"] b { font-size: 1.25rem !important; }
  .terroir-section [data-r~="g4"] b > span { font-size: 1.875rem !important; }
  #about [data-slot="portrait"] { aspect-ratio: 5 / 4 !important; }
  #about [data-slot="portrait"] img { object-position: center 36% !important; }
  .profile-stats > div { padding: 1.125rem .5rem !important; }
  .profile-stats small { font-size: .75rem !important; letter-spacing: 0 !important; }
  #mikan h2 { font-size: clamp(1.25rem, 5.6vw, 1.5rem) !important; text-wrap: balance; }
  .product-details > div { grid-template-columns: 3em minmax(0, 1fr); gap: .75rem !important; }
  #mikan [data-slideshow] { aspect-ratio: 1 / 1 !important; }
  #line [data-r~="ctarow"] > div:last-child { padding: 1.5rem 1rem; }
  #line [data-r~="ctarow"] > div:last-child > a { padding-block: 1rem !important; font-size: 1.0625rem !important; }
  [data-r~="noterow"] { gap: 1rem; align-items: flex-start; }
  [data-r~="noterow"] > span:first-child { flex-basis: 6rem; margin-top: .25rem; }
  [data-r~="noterow"] small { font-size: .8125rem; }
  [data-r~="noterow"] b { font-size: 1rem; }
}
@media (max-width: 359px) {
  :root { --page-gutter: 1.125rem; }
  .site-header { flex-wrap: wrap; }
  .site-header nav > a:last-child { padding-inline: .75rem !important; }
  [data-r~="noterow"] { flex-direction: column; }
  [data-r~="noterow"] > span:first-child { flex-basis: auto; width: 8rem; }
  .profile-stats small { overflow-wrap: anywhere; }
  [data-caps] { bottom: 3.5rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}