@charset "UTF-8";

:root {
  --ink: #2e453c;
  --ink-soft: #61736b;
  --paper: #fcfbf7;
  --paper-light: #fffdfb;
  --paper-texture: url("../images/common/paper-texture.webp");
  --paper-texture-size: 360px 360px;
  --white: #fff;
  --sage: #e2f0db;
  --sage-soft: #eef5e9;
  --sage-mid: #c8ddc2;
  --sage-deep: #849a87;
  --line: rgba(46, 69, 60, .18);
  --content: 1240px;
  --header-height: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    YuMincho,
    "Noto Serif JP",
    serif;
  line-height: 1.8;
}

body.is-menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

figure,
h1,
h2,
h3,
p {
  margin: 0;
}

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

button {
  color: inherit;
  font: inherit;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  background: #fff;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================
   Header
========================================================== */
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-height);
  padding: 0 clamp(18px, 3vw, 50px);
  display: flex;
  align-items: center;
  gap: 64px;
  background: rgba(250, 249, 244, .46);
  transition:
    height .4s var(--ease),
    background .4s ease,
    box-shadow .4s ease;
}

.site-header.is-compact {
  height: 64px;
  background: rgba(250, 249, 244, .96);
  box-shadow: 0 8px 24px rgba(44, 62, 54, .06);
}

.site-brand {
  flex: 0 0 auto;
  min-width: 164px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.site-brand span,
.drawer-brand span,
.footer-brand__head span {
  display: grid;
  line-height: 1.15;
}

.site-brand strong {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
}

.site-brand small,
.drawer-brand small,
.footer-brand__head small {
  margin-top: 4px;
  font-family: Arial, sans-serif;
  font-size: 7px;
  letter-spacing: .22em;
}

.desktop-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: clamp(13px, 1.8vw, 28px);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: opacity .3s ease, transform .3s var(--ease), visibility .3s;
}

.desktop-nav a {
  position: relative;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header.is-compact .desktop-nav {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
}

.menu-toggle {
  width: 45px;
  height: 45px;
  margin-left: auto;
  padding: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px solid rgba(46, 69, 60, .18);
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(.84);
  transition: opacity .3s, visibility .3s, transform .3s var(--ease);
}

.menu-toggle span {
  width: 18px;
  height: 1px;
  background: var(--ink);
}

.site-header.is-compact .menu-toggle {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.drawer-backdrop {
  position: fixed;
  z-index: 150;
  inset: 0;
  background: rgba(29, 45, 38, .24);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s;
}

.drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer-menu {
  position: fixed;
  z-index: 160;
  top: 0;
  right: 0;
  width: min(510px, 90vw);
  height: 100dvh;
  padding: 30px clamp(26px, 4vw, 54px) 34px;
  display: flex;
  flex-direction: column;
  background: rgba(226, 240, 219, .99);
  box-shadow: -18px 0 55px rgba(40, 58, 50, .13);
  transform: translateX(102%);
  transition: transform .5s var(--ease);
  overflow-y: auto;
}

.drawer-menu.is-open {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.drawer-brand img {
  width: 46px;
  height: 46px;
}

.drawer-brand strong {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .15em;
}

.drawer-close {
  position: relative;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(46,69,60,.18);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.drawer-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--ink);
}

.drawer-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.drawer-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.drawer-nav {
  margin-top: clamp(42px, 7vh, 76px);
  display: grid;
}

.drawer-nav a {
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid rgba(46,69,60,.14);
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: .08em;
  transition: padding-left .3s var(--ease);
}

.drawer-nav a:hover {
  padding-left: 9px;
}

.drawer-nav small {
  min-width: 23px;
  font-family: Arial, sans-serif;
  font-size: 8px;
  color: var(--sage-deep);
}

.drawer-foot {
  margin-top: auto;
  padding-top: 34px;
  color: var(--ink-soft);
  font-size: 12px;
}

.drawer-foot > small {
  display: block;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .18em;
}

/* ==========================================================
   Shared
========================================================== */
.section {
  position: relative;
  padding:
    clamp(88px, 10vw, 145px)
    clamp(22px, 5vw, 78px);
}

.section-kicker {
  margin-bottom: 12px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--sage-deep);
}

.section-heading {
  text-align: center;
}

.section-heading h2,
.product-feature h2,
.people h2,
.journal h2 {
  font-size: clamp(28px, 3.6vw, 51px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .09em;
}

.section-heading--center {
  text-align: center;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(46,69,60,.42);
  font-size: 13px;
  letter-spacing: .08em;
}

.text-link span {
  transition: transform .3s var(--ease);
}

.text-link:hover span {
  transform: translateX(5px);
}

.outline-button {
  min-width: 260px;
  padding: 12px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 1px solid rgba(46,69,60,.32);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .09em;
  transition: color .3s, background .3s, transform .3s var(--ease);
}

.outline-button:hover {
  color: #fff;
  background: var(--ink);
  transform: translateY(-2px);
}

.section-action {
  margin-top: 42px;
  text-align: center;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal--delay {
  transition-delay: .1s;
}

.reveal--delay2 {
  transition-delay: .2s;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================
   Sliders
========================================================== */
.auto-slider {
  --slider-duration: 5200ms;
}

.slider-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition:
    opacity 1.15s ease,
    visibility 1.15s,
    transform 6.5s ease;
}

.slider-image.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.media-slider__main {
  position: relative;
  overflow: hidden;
}

.media-slider__controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.media-slider__thumbs {
  display: flex;
  gap: 12px;
}

.slider-thumb {
  position: relative;
  width: 66px;
  height: 66px;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 50%;
  background: #f1f1ed;
  opacity: .55;
  cursor: pointer;
  transition: opacity .3s, border-color .3s, transform .3s var(--ease);
}

.slider-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-thumb:hover,
.slider-thumb.is-active {
  opacity: 1;
  border-color: rgba(46,69,60,.42);
  transform: translateY(-2px);
}

.slider-progress {
  flex: 1;
  height: 1px;
  overflow: hidden;
  background: rgba(46,69,60,.16);
}

.slider-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.auto-slider.is-running .slider-progress span {
  animation: sliderProgress var(--slider-duration) linear forwards;
}

@keyframes sliderProgress {
  to {
    transform: scaleX(1);
  }
}

/* ==========================================================
   Hero
========================================================== */
.hero {
  position: relative;
  min-height: clamp(720px, 88vh, 860px);
  padding: calc(var(--header-height) + 42px) clamp(22px, 5vw, 80px) 70px;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

.hero-motion {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-motion__surface {
  fill: rgba(226,240,219,.48);
}

.hero-motion__light {
  fill: none;
  stroke-linecap: round;
}

.hero-motion__light--one {
  stroke: rgba(255,255,255,.42);
  stroke-width: 1.4;
}

.hero-motion__light--two {
  stroke: rgba(245,251,242,.28);
  stroke-width: 3;
}

.hero-inner {
  width: min(100%, 1400px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(170px, .28fr) minmax(620px, 1.72fr);
  align-items: center;
  gap: clamp(30px, 5vw, 82px);
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding-left: clamp(0px, 2vw, 24px);
  width: max-content;
  min-width: max-content;
}

.hero-copy__vertical {
  display: inline-flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: max-content;
  white-space: nowrap;
  gap: 10px;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.65;
  letter-spacing: .18em;
  font-weight: 500;
}

.hero-copy__vertical span {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.hero-copy__line {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}

.hero-copy__line-base {
  visibility: hidden;
  writing-mode: inherit;
  text-orientation: inherit;
  white-space: inherit;
}

.hero-copy__line-overlay {
  position: absolute;
  inset: 0;
  display: block;
  writing-mode: inherit;
  text-orientation: inherit;
  white-space: inherit;
}

.hero-copy__char {
  display: inline;
  opacity: 0;
  filter: blur(4px);
}

.hero-copy.reveal.is-visible .hero-copy__char {
  animation: heroVerticalCharFade .72s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: calc(var(--char-delay) * 0.16s + 0.12s);
}

.hero-copy__mobile {
  display: none;
}

.hero-copy > i {
  display: block;
  width: 42px;
  height: 1px;
  margin: 28px 0 22px;
  background: var(--sage-deep);
}

.hero-copy__sub {
  font-size: clamp(12px, 1.1vw, 15px);
  line-height: 2.1;
  letter-spacing: .1em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
}

.hero-copy.reveal.is-visible .hero-copy__sub {
  animation: heroSubFade .9s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: 3s;
}

@keyframes heroVerticalCharFade {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes heroSubFade {
  0% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


.hero-slider {
  position: relative;
  height: clamp(570px, 68vh, 700px);
}

.hero-slider__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50% 50% 48% 52% / 45% 46% 54% 55%;
  box-shadow: 0 22px 50px rgba(52, 68, 59, .08);
}

.hero-slider .slider-image {
  object-position: center;
}

.hero-scroll {
  position: absolute;
  left: clamp(18px, 2.7vw, 46px);
  bottom: 38px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: Arial, sans-serif;
  font-size: 7px;
  letter-spacing: .25em;
  color: var(--ink-soft);
  transform: rotate(-90deg);
  transform-origin: left center;
}

.hero-scroll i {
  width: 50px;
  height: 1px;
  overflow: hidden;
  background: rgba(46,69,60,.2);
}

.hero-scroll i::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: var(--ink);
  animation: scrollLine 2.5s ease-in-out infinite;
}

@keyframes scrollLine {
  from { transform: translateX(-120%); }
  70%, to { transform: translateX(300%); }
}

/* ==========================================================
   Products feature
========================================================== */
.product-feature {
  min-height: 760px;
  padding-top: clamp(185px, 12vw, 240px);
  padding-bottom: clamp(70px, 5.5vw, 90px);
  overflow: hidden;
  background-color: var(--paper-light);
}

.product-feature::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--paper-light);
}

.product-showcase {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(480px, 1.02fr) minmax(430px, .98fr);
  align-items: start;
  gap: clamp(72px, 8vw, 130px);
}

.product-showcase__visual {
  min-width: 0;
}

.product-showcase__main {
  position: relative;
  isolation: isolate;
  width: min(500px, 86%);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: visible;
  border-radius: 50%;
}

.product-frame {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: calc(100% + 86px);
  height: calc(100% + 86px);
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.product-frame circle {
  fill: none;
}

.product-frame__base {
  stroke: rgba(46, 69, 60, .24);
  stroke-width: 1.2;
}

.product-frame__progress {
  stroke: var(--sage-deep);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0 99999;
  stroke-dashoffset: 0;
  opacity: 0;
}

.product-showcase__main .slider-image {
  z-index: 1;
  border-radius: inherit;
  object-position: center;
  box-shadow: 0 22px 50px rgba(46, 69, 60, .09);
  transform: none;
  transition:
    opacity 1.35s cubic-bezier(.22, .61, .36, 1),
    visibility 1.35s;
  will-change: opacity;
}

.product-showcase__main .slider-image.is-active {
  transform: none;
}

.product-showcase__names {
  position: relative;
  width: min(500px, 86%);
  min-height: 34px;
  margin: 42px auto 0;
  text-align: center;
}

.product-showcase__name {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 14px;
  letter-spacing: .14em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .55s ease, visibility .55s, transform .55s var(--ease);
}

.product-showcase__name.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.product-showcase__name i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sage-deep);
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  transition: color .3s, background .3s, transform .3s var(--ease);
}

.product-showcase__name:hover i {
  color: #fff;
  background: var(--sage-deep);
  transform: translateX(4px);
}

/* 商品紹介・働く人の詳細リンクは、説明文の直下に配置 */
.product-showcase__content .product-showcase__names--content {
  width: 100%;
  margin: 26px 0 0;
  text-align: left;
}

.product-showcase__content .product-showcase__names--content .product-showcase__name {
  justify-content: flex-start;
}

.product-feature .product-showcase__controls,
.people-showcase .product-showcase__controls {
  margin-top: 0;
  padding-top: 34px;
}

.product-showcase__content {
  min-width: 0;
  min-height: 520px;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
}

.product-showcase__heading {
  margin-bottom: 22px;
}

.product-showcase__heading .section-kicker {
  margin-bottom: 0;
}

.product-showcase__copies {
  position: relative;
  min-height: auto;
}

.product-showcase__copy {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.product-showcase__copy.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.product-showcase__copy h2 {
  font-size: clamp(28px, 3.6vw, 51px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .09em;
}

.product-showcase__copy p {
  max-width: 560px;
  margin-top: 32px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .04em;
}

.product-showcase__copy--static {
  transition: none;
}

.product-showcase__controls {
  margin-top: auto;
  padding-top: 46px;
}

.product-showcase__controls .media-slider__thumbs {
  align-items: center;
  gap: clamp(15px, 1.6vw, 24px);
}

.product-showcase__controls .slider-thumb {
  width: clamp(102px, 8.4vw, 128px);
  height: clamp(102px, 8.4vw, 128px);
  border: 0;
  opacity: .7;
  box-shadow: none;
}

.product-showcase__controls .slider-thumb:hover,
.product-showcase__controls .slider-thumb.is-active {
  border-color: transparent;
  opacity: 1;
  transform: translateY(-3px) scale(1.045);
}

/* ==========================================================
   Lineup
========================================================== */
.lineup {
  background-color: var(--paper-light);
  padding-top: 50px;
  text-align: center;
}

.lineup-list {
  width: min(100%, 1320px);
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
}

.lineup-card figure {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 42% 42% 15% 15% / 32% 32% 15% 15%;
  background: transparent;
}

.lineup-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s var(--ease);
}

.lineup-card:hover img {
  transform: scale(1.035);
}

.lineup-card h3 {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
}

.lineup-card p {
  margin-top: 4px;
  font-family: Arial, sans-serif;
  font-size: 7px;
  letter-spacing: .13em;
  color: var(--ink-soft);
}

/* ==========================================================
   People
========================================================== */
.people {
  min-height: 760px;
  padding-top: clamp(70px, 5.5vw, 90px);
  padding-bottom: clamp(70px, 5.5vw, 90px);
  overflow: hidden;
  background: #fdfcf9;
}

.people-showcase {
  /* PRODUCTS と同じ product-showcase レイアウトをそのまま使用 */
}

/* ==========================================================
   Use scenes / fixed arch
========================================================== */
.use-scenes {
  overflow: hidden;
  background-color: var(--paper-light);
}

.fixed-arch {
  width: min(100%, 1020px);
  height: 220px;
  margin: -25px auto -42px;
  overflow: hidden;
  opacity: .28;
}

.fixed-arch svg {
  width: 100%;
  height: 100%;
}

.fixed-arch text {
  fill: #7d9086;
  font-family: Arial, sans-serif;
  font-size: 24px;
  letter-spacing: .15em;
}

.use-scenes .section-heading h2 {
  font-size: clamp(25px, 3vw, 42px);
}

.use-scenes .section-heading p {
  margin-top: 17px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2;
}

.scene-grid {
  width: min(100%, 1180px);
  margin: 52px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.scene-card {
  --scene-card-image-width: 94%;
  --scene-card-image-bottom: 7%;
  text-align: center;
  transition: transform .4s var(--ease);
}

.scene-card:nth-child(1) {
  --scene-card-image-width: 102%;
  --scene-card-image-bottom: 4.5%;
}

.scene-card:nth-child(2) {
  --scene-card-image-width: 94%;
  --scene-card-image-bottom: 7%;
}

.scene-card:nth-child(3) {
  --scene-card-image-width: 116%;
  --scene-card-image-bottom: 2%;
}

.scene-card:nth-child(4) {
  --scene-card-image-width: 112%;
  --scene-card-image-bottom: 4%;
}

.scene-card figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: .88;
  border-radius: 22% 22% 15% 15% / 13% 13% 13% 13%;
  background: #eeece7;
  box-shadow: 0 12px 28px rgba(48,68,59,.05);
}

.scene-card img {
  position: absolute;
  left: 50%;
  bottom: var(--scene-card-image-bottom);
  width: var(--scene-card-image-width);
  height: 86%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  transform-origin: center bottom;
  transition: transform .5s var(--ease);
}

.scene-card h3 {
  position: relative;
  display: inline-block;
  margin-top: 15px;
  padding-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
}

.scene-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}

.scene-card:hover {
  transform: translateY(-6px);
}

.scene-card:hover img {
  transform: translateX(-50%) scale(1.03);
}

.scene-card:hover h3::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================================
   News
========================================================== */
.journal {
  min-height: 0;
  overflow: hidden;
  padding-top: clamp(72px, 7vw, 98px);
  padding-bottom: clamp(76px, 7vw, 104px);
  background: #fbfaf7;
}

.journal-inner {
  width: min(100%, 980px);
  margin: 0 auto;
}

.journal-head {
  display: block;
  text-align: center;
}

.journal-head .section-kicker {
  margin-bottom: 8px;
  color: rgba(46, 69, 60, .58);
}

.journal-head h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.5vw, 34px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .025em;
}

.journal-head__ja {
  margin-top: 8px;
  color: rgba(46, 69, 60, .58);
  font-size: 11px;
  letter-spacing: .16em;
}

.news-list {
  margin-top: clamp(28px, 3.2vw, 42px);
  border-top: 1px solid rgba(46, 69, 60, .22);
}

.news-list__item {
  min-height: 62px;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 20px;
  padding: 13px 10px;
  border-bottom: 1px solid rgba(46, 69, 60, .16);
  transition: background-color .28s ease;
}

.news-list__item:hover {
  background: rgba(226, 240, 219, .12);
}

.news-list__item time {
  color: rgba(46, 69, 60, .58);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .1em;
}

.news-list__title {
  color: rgba(29, 45, 38, .9);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.7;
  letter-spacing: .035em;
}

.news-list__arrow {
  justify-self: end;
  color: rgba(75, 111, 91, .72);
  font-family: Arial, sans-serif;
  font-size: 14px;
  transition: transform .28s var(--ease), color .28s ease;
}

.news-list__item:hover .news-list__arrow {
  color: var(--sage-deep);
  transform: translateX(3px);
}

.journal-more {
  margin-top: 24px;
  text-align: right;
}

.journal-more .text-link {
  font-size: 12px;
}

/* ==========================================================
   Footer
========================================================== */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -12px;
  padding: clamp(132px, 10vw, 164px) clamp(22px, 5vw, 78px) 26px;
  background: transparent;
  background-image: none;
}

.footer-wave-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.footer-wave-bg__image {
  opacity: .54;
  filter: saturate(.82) brightness(1.01);
}

.footer-wave-bg__veil {
  fill: rgba(247, 250, 251, .64);
}

.footer-inner {
  position: relative;
  z-index: 5;
  width: min(100%, 1380px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  gap: clamp(28px, 4vw, 68px);
}

.footer-brand__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand__head img {
  width: 57px;
  height: 57px;
}

.footer-brand__head strong {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .16em;
}

.footer-brand > p {
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 2;
}

.footer-sns {
  margin-top: 28px;
  display: flex;
  gap: 17px;
}

.footer-sns a {
  width: 27px;
  height: 27px;
  opacity: .72;
  transition: opacity .3s, transform .3s var(--ease);
}

.footer-sns a:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.footer-sns svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #53685e;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-sns .fill {
  fill: #53685e;
  stroke: none;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 8px;
}

.footer-column h2 {
  margin-bottom: 9px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(46,69,60,.32);
  font-size: 14px;
  font-weight: 500;
}

.footer-column a {
  color: var(--ink-soft);
  font-size: 11px;
  transition: color .25s, transform .25s;
}

.footer-column a:hover {
  color: var(--ink);
  transform: translateX(3px);
}

.footer-bottom {
  position: relative;
  z-index: 5;
  width: min(100%, 1380px);
  margin: 72px auto 0;
  padding-top: 23px;
  border-top: 1px solid rgba(46,69,60,.26);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--ink-soft);
  font-family: Arial, sans-serif;
  font-size: 8px;
}

.footer-bottom div {
  display: flex;
  gap: 24px;
}

/* ==========================================================
   Paper texture
   白い余白を真っ白にせず、薄い繊維と粒子を全体に重ねる。
   写真や文字の上には載せず、各セクションの背景だけに適用。
========================================================== */
body,
.site-header,
.drawer-menu,
.hero,
.product-feature,
.product-feature::before,
.lineup,
.people,
.use-scenes,
.journal {
  background-image: var(--paper-texture);
  background-repeat: repeat;
  background-size: var(--paper-texture-size);
  background-position: 0 0;
}

/* ==========================================================
   Responsive
========================================================== */
@media (max-width: 1180px) {
  .desktop-nav {
    gap: 12px;
    font-size: 10px;
  }

  .footer-inner {
    grid-template-columns: 1.2fr repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  .site-footer {
    padding-top: 114px;
  }

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  .hero-inner {
    grid-template-columns: max-content 1fr;
  }

  .product-showcase {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .product-showcase__main {
    width: min(520px, 72vw);
  }

  .product-frame {
    width: calc(100% + 70px);
    height: calc(100% + 70px);
  }

  .product-showcase__names {
    width: min(520px, 72vw);
  }

  .product-showcase__content {
    width: min(100%, 680px);
    min-height: 0;
    margin: 0 auto;
  }

  .product-showcase__heading {
    margin-bottom: 22px;
  }

  .lineup-list {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 20px 12px;
    margin-inline: -20px;
  }

  .lineup-list::-webkit-scrollbar {
    display: none;
  }

  .lineup-card {
    flex: 0 0 min(240px, 72vw);
    scroll-snap-align: start;
  }

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

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

@media (max-width: 700px) {
  :root {
    --header-height: 66px;
  }

  .site-header {
    padding-inline: 16px;
  }

  .site-brand {
    min-width: 0;
  }

  .site-brand img {
    width: 34px;
    height: 34px;
  }

  .site-brand strong {
    font-size: 13px;
  }

  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + 40px) 18px 85px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-copy__vertical {
    display: none;
  }

  .hero-copy__mobile {
    display: block;
    font-size: clamp(31px, 10vw, 48px);
    line-height: 1.5;
    letter-spacing: .1em;
  }

  .hero-copy__sub br {
    display: none;
  }

  .hero-slider {
    height: min(72vh, 610px);
  }

  .hero-slider__viewport {
    border-radius: 49% 51% 47% 53% / 38% 40% 60% 62%;
  }

.hero-scroll {
    display: none;
  }

  .section {
    padding: clamp(76px, 18vw, 105px) 20px;
  }

  .product-showcase {
    gap: 58px;
  }

  .product-showcase__main {
    width: min(390px, 82vw);
  }

  .product-frame {
    width: calc(100% + 54px);
    height: calc(100% + 54px);
  }

  .product-showcase__names {
    width: min(390px, 82vw);
    margin-top: 34px;
  }

  .product-showcase__heading {
    margin-bottom: 18px;
  }

  .product-showcase__copies {
    min-height: auto;
  }

  .product-showcase__copy p {
    margin-top: 24px;
    font-size: 13px;
  }

  .product-showcase__controls {
    margin-top: 38px;
    padding-top: 0;
    gap: 12px;
    overflow: visible;
  }

  .product-showcase__controls .media-slider__thumbs {
    gap: 12px;
  }

  .product-showcase__controls .slider-thumb {
    width: clamp(78px, 24vw, 100px);
    height: clamp(78px, 24vw, 100px);
  }

  .fixed-arch {
    width: 130%;
    margin-left: -15%;
  }

  .fixed-arch text {
    font-size: 21px;
  }

  .scene-grid {
    gap: 14px;
  }

  .scene-card h3 {
    font-size: 11px;
  }

  .journal-head {
    text-align: center;
  }

  .news-list {
    margin-top: 26px;
  }

  .news-list__item {
    min-height: 66px;
    grid-template-columns: 1fr 22px;
    gap: 5px 10px;
    padding: 13px 2px;
  }

  .news-list__item time {
    grid-column: 1;
    font-size: 9px;
  }

  .news-list__title {
    grid-column: 1;
    font-size: 12px;
  }

  .news-list__arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  .journal-more {
    margin-top: 20px;
    text-align: left;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px 26px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .drawer-menu {
    width: 94vw;
  }

  .scene-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-column {
    display: none;
  }

  .footer-column:last-child {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-bg__fade {
    animation: none;
  }

  .footer-bg__fade--a {
    opacity: .22;
  }

  .footer-bg__fade--b {
    opacity: 0;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


@media (prefers-reduced-motion: reduce) {
  .hero-copy__char {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
  }

  .hero-copy__sub {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ==========================================================
   Hero / Products refined seamless transition
   元の波と余白は保ち、下方向ほど色味を弱めて白へなじませる。
========================================================== */
.hero-motion {
  z-index: -2;
  -webkit-mask-image: none;
  mask-image: none;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -4px;
  height: clamp(160px, 16vw, 230px);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(247, 250, 245, 0) 0%,
  rgba(248, 250, 246, .16) 20%,
  rgba(249, 251, 248, .38) 40%,
  rgba(250, 252, 249, .64) 60%,
  rgba(251, 252, 250, .88) 80%,
    #fbfcf9 100%
  );
}

.product-feature {
  margin-top: -5px;
  background-color: var(--paper-light);
  background-image:
    linear-gradient(
      to bottom,
      #fbfcf9 0,
      #fbfcf9 20px,
      rgba(252, 252, 250, .96) 68px,
      rgba(253, 253, 251, .78) 135px,
      rgba(254, 254, 253, .46) 220px,
      rgba(255, 253, 251, .16) 290px,
      rgba(255, 253, 251, 0) 340px
    ),
    var(--paper-texture);
  background-repeat: no-repeat, repeat;
  background-size: 100% 340px, var(--paper-texture-size);
  background-position: top left, 0 0;
}

.product-feature::before {
  display: none;
}

/* End Hero / Products refined seamless transition */

/* ==========================================================
   Product detail / Yutsugi Kettle
========================================================== */
.product-detail-page {
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-repeat: repeat;
  background-size: var(--paper-texture-size);
}

.product-detail-page .site-header {
  align-items: center;
  background: rgba(250, 249, 244, .94);
  box-shadow: 0 8px 24px rgba(44, 62, 54, .045);
}

.product-detail-page .site-header.is-compact {
  background: rgba(250, 249, 244, .98);
}

.product-detail-page main {
  overflow: hidden;
}

.product-breadcrumb {
  width: min(calc(100% - 44px), var(--content));
  margin: 0 auto;
  padding-top: calc(var(--header-height) + 34px);
}

.product-breadcrumb ol {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: rgba(46, 69, 60, .58);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .09em;
  list-style: none;
}

.product-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 7px;
  opacity: .55;
}

.product-breadcrumb a {
  transition: color .25s ease;
}

.product-breadcrumb a:hover {
  color: var(--ink);
}

.product-section {
  position: relative;
  padding: clamp(92px, 9vw, 148px) clamp(22px, 5vw, 78px);
}

.product-kicker {
  margin-bottom: 16px;
  color: rgba(46, 69, 60, .58);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .22em;
}

.product-narrow {
  width: min(100%, 770px);
  margin-inline: auto;
  text-align: center;
}

.product-narrow h2,
.product-section-heading h2,
.product-two-column__copy h2,
.product-lifestyle__copy h2,
.product-purchase__copy h2 {
  font-size: clamp(30px, 3.7vw, 52px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .055em;
}

.product-narrow > p:not(.product-kicker),
.product-section-heading > p:not(.product-kicker),
.product-lifestyle__copy > p:not(.product-kicker),
.product-two-column__copy > p:not(.product-kicker) {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2.2;
}

.product-section-heading {
  width: min(100%, 790px);
  margin: 0 auto clamp(52px, 6vw, 88px);
  text-align: center;
}

.product-section-heading > p:not(.product-kicker) {
  margin-top: 28px;
}

/* Product hero */
.product-hero {
  padding: 42px clamp(22px, 5vw, 78px) clamp(100px, 9vw, 146px);
  background:
    linear-gradient(to bottom, rgba(238, 245, 233, .58), rgba(252, 251, 247, .08) 78%),
    var(--paper-texture);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--paper-texture-size);
}

.product-hero__inner {
  width: min(100%, var(--content));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(370px, .82fr);
  align-items: start;
  gap: clamp(54px, 7vw, 108px);
}

.product-gallery__main {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 48% 48% 18% 18% / 38% 38% 16% 16%;
  background: #ddd8d0;
  box-shadow: 0 24px 60px rgba(46, 69, 60, .08);
}

.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .22s ease, transform .55s var(--ease);
}

.product-gallery__main img.is-changing {
  opacity: .25;
  transform: scale(.992);
}

.product-gallery__thumbs {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.product-gallery__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #e6e2da;
  cursor: pointer;
  opacity: .56;
  transition: opacity .25s ease, border-color .25s ease, transform .25s var(--ease);
}

.product-gallery__thumb::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  pointer-events: none;
  transition: border-color .25s ease;
}

.product-gallery__thumb:hover,
.product-gallery__thumb.is-active {
  opacity: 1;
  transform: translateY(-2px);
}

.product-gallery__thumb.is-active::after {
  border-color: rgba(46, 69, 60, .7);
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-summary {
  position: sticky;
  top: 104px;
  padding-top: clamp(10px, 2vw, 28px);
}

.product-summary__brand {
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: .15em;
}

.product-summary__brand span {
  margin-left: 8px;
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .18em;
}

.product-summary h1 {
  margin-top: 18px;
  font-size: clamp(36px, 4.5vw, 62px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .08em;
}

.product-summary__en {
  margin-top: 6px;
  color: rgba(46, 69, 60, .55);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .22em;
}

.product-summary__copy {
  margin-top: clamp(32px, 4vw, 54px);
  font-size: clamp(21px, 2.25vw, 31px);
  line-height: 1.75;
  letter-spacing: .06em;
}

.product-summary__description {
  margin-top: 26px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2.05;
}

.product-summary__price {
  margin-top: 35px;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(25px, 2.5vw, 34px);
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.product-summary__price span {
  margin-left: 5px;
  font-family: inherit;
  font-size: 11px;
}

.price-unit {
  margin-left: .08em;
  font-size: .78em;
  letter-spacing: 0;
}

.product-summary__price .price-unit,
.product-row__price .price-unit {
  font-size: 11px;
}

.product-summary__facts {
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
}

.product-summary__facts div {
  min-height: 48px;
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.product-summary__facts dt {
  color: var(--ink-soft);
  font-size: 10px;
}

.product-summary__facts dd {
  margin: 0;
  font-size: 11px;
}

.product-summary__repair {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: .06em;
}

.product-summary__repair::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage-deep);
}

.product-summary__actions {
  margin-top: 30px;
  display: grid;
  gap: 10px;
}

.product-button {
  min-height: 58px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  text-align: center;
  transition: color .3s ease, background .3s ease, transform .3s var(--ease), border-color .3s ease;
}

.product-button span {
  font-family: Arial, sans-serif;
  transition: transform .3s var(--ease);
}

.product-button:hover {
  transform: translateY(-2px);
}

.product-button:hover span {
  transform: translateX(4px);
}

.product-button--primary {
  color: #fff;
  background: var(--ink);
}

.product-button--primary:hover {
  background: #405c50;
}

.product-button--secondary {
  background: rgba(255,255,255,.34);
}

.product-button--secondary:hover {
  background: #fff;
}

/* Concept */
.product-concept {
  background: var(--paper-light) var(--paper-texture) repeat 0 0 / var(--paper-texture-size);
}

.product-concept__text {
  margin-top: 42px;
  display: grid;
  gap: 54px;
}

.product-concept__text p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2.25;
}

/* Feature rows */
.product-features {
  background:
    linear-gradient(to bottom, rgba(226, 240, 219, .42), rgba(252, 251, 247, .1) 30%),
    var(--paper-texture);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--paper-texture-size);
}

.product-feature-row {
  width: min(100%, 1160px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, .74fr);
  align-items: center;
  gap: clamp(54px, 8vw, 112px);
}

.product-feature-row + .product-feature-row {
  margin-top: clamp(92px, 10vw, 150px);
}

.product-feature-row--reverse {
  grid-template-columns: minmax(340px, .74fr) minmax(0, 1.06fr);
}

.product-feature-row--reverse .product-feature-row__image {
  grid-column: 2;
  grid-row: 1;
}

.product-feature-row--reverse .product-feature-row__body {
  grid-column: 1;
  grid-row: 1;
}

.product-feature-row__image {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 38% 38% 12% 12% / 24% 24% 12% 12%;
  background: #ded9d2;
  box-shadow: 0 24px 50px rgba(46,69,60,.065);
}

.product-feature-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s var(--ease);
}

.product-feature-row:hover .product-feature-row__image img {
  transform: scale(1.018);
}

.product-point {
  color: var(--sage-deep);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
}

.product-feature-row__body h3 {
  margin-top: 20px;
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .055em;
}

.product-feature-row__body > p:not(.product-point) {
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2.15;
}

.product-feature-row__body small {
  margin-top: 26px;
  padding-top: 14px;
  display: block;
  border-top: 1px solid var(--line);
  color: rgba(46, 69, 60, .62);
  font-size: 10px;
  letter-spacing: .08em;
}

/* Lifestyle */
.product-lifestyle {
  padding-inline: 0;
  background: var(--paper-light) var(--paper-texture) repeat 0 0 / var(--paper-texture-size);
}

.product-lifestyle__visual {
  width: min(calc(100% - 44px), 1680px);
  height: clamp(520px, 61vw, 820px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: clamp(28px, 4vw, 62px);
}

.product-lifestyle__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.product-lifestyle__copy {
  margin-top: clamp(66px, 7vw, 108px);
}

.product-lifestyle__copy > p:not(.product-kicker) {
  margin-top: 28px;
}

.product-lifestyle__phrase {
  color: var(--ink) !important;
  font-size: 17px !important;
  letter-spacing: .1em;
}

/* Materials */
.product-materials {
  background:
    linear-gradient(135deg, rgba(226,240,219,.52), rgba(255,253,251,.3) 62%),
    var(--paper-texture);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--paper-texture-size);
}

.product-material-grid {
  width: min(100%, 1190px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 38px);
}

.product-material-card figure {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 34% 34% 11% 11% / 22% 22% 10% 10%;
  background: #ddd8d0;
}

.product-material-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}

.product-material-card:hover figure img {
  transform: scale(1.022);
}

.product-material-card__number {
  margin-top: 22px;
  color: var(--sage-deep);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .16em;
}

.product-material-card h3 {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .045em;
}

.product-material-card > p:last-child {
  margin-top: 17px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 2.05;
}

/* Two column / structure / care */
.product-structure {
  background: #fbfaf7 var(--paper-texture) repeat 0 0 / var(--paper-texture-size);
}

.product-care {
  background: #f6f7f2 var(--paper-texture) repeat 0 0 / var(--paper-texture-size);
}

.product-two-column {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .8fr);
  align-items: center;
  gap: clamp(58px, 8vw, 120px);
}

.product-two-column--image-right {
  grid-template-columns: minmax(340px, .8fr) minmax(0, 1.05fr);
}

.product-two-column__copy h2 {
  margin-top: 8px;
}

.product-two-column__copy > p:not(.product-kicker) {
  margin-top: 28px;
}

.product-two-column__image {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 42% 42% 14% 14% / 30% 30% 13% 13%;
  background: #ddd8d0;
  box-shadow: 0 24px 55px rgba(46,69,60,.07);
}

.product-two-column__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-care .product-two-column__image {
  aspect-ratio: 1.18;
  border-radius: 30px;
}

.product-number-grid {
  margin: 42px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-number-grid div {
  min-height: 104px;
  padding: 22px 14px;
  display: grid;
  align-content: center;
  text-align: center;
}

.product-number-grid div + div {
  border-left: 1px solid var(--line);
}

.product-number-grid dt {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.product-number-grid dd {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.6;
}

.product-accordion {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}

.product-accordion__item {
  border-bottom: 1px solid var(--line);
}

.product-accordion__item h3 {
  margin: 0;
}

.product-accordion__item button {
  width: 100%;
  min-height: 62px;
  padding: 13px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}

.product-accordion__item button span {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.product-accordion__item button span::before,
.product-accordion__item button span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}

.product-accordion__item button span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.product-accordion__item button[aria-expanded="true"] span::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.product-accordion__panel {
  padding: 0 3px 26px;
}

.product-accordion__panel p,
.product-accordion__panel li {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 2;
}

.product-accordion__panel ul {
  margin: 0;
  padding-left: 1.3em;
}

.product-care__notice {
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(226, 240, 219, .65);
  font-size: 10px;
  text-align: center;
}

/* Repair */
.product-repair {
  color: #f7faf5;
  background:
    linear-gradient(rgba(43,65,55,.94), rgba(43,65,55,.94)),
    var(--paper-texture);
  background-repeat: repeat;
  background-size: auto, var(--paper-texture-size);
}

.product-section-heading--light .product-kicker,
.product-section-heading--light > p:not(.product-kicker) {
  color: rgba(247,250,245,.68);
}

.product-repair__body {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(400px, 1fr);
  align-items: center;
  gap: clamp(50px, 7vw, 100px);
}

.product-repair__images {
  display: grid;
  gap: 18px;
}

.product-repair__images figure {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  background: #ddd8d0;
}

.product-repair__images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-repair__menu dl {
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.24);
}

.product-repair__menu dl div {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.product-repair__menu dt {
  font-size: 12px;
}

.product-repair__menu dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}

.product-repair__menu > p {
  margin-top: 22px;
  color: rgba(247,250,245,.68);
  font-size: 10px;
  line-height: 1.9;
}

.product-button--light {
  width: 100%;
  margin-top: 32px;
  color: var(--ink);
  border-color: #f7faf5;
  background: #f7faf5;
}

.product-button--light:hover {
  background: var(--sage);
  border-color: var(--sage);
}

/* Specifications */
.product-spec {
  background: var(--paper-light) var(--paper-texture) repeat 0 0 / var(--paper-texture-size);
}

.product-spec__body {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(52px, 7vw, 96px);
}

.product-spec__image {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 42% 42% 14% 14% / 30% 30% 13% 13%;
  background: #ddd8d0;
}

.product-spec__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-spec__table {
  margin: 0;
  border-top: 1px solid var(--line);
}

.product-spec__table div {
  min-height: 51px;
  display: grid;
  grid-template-columns: minmax(126px, .34fr) 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.product-spec__table dt {
  color: var(--ink-soft);
  font-size: 10px;
}

.product-spec__table dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
}

.product-accordion--compact {
  margin-top: 34px;
}

/* Purchase */
.product-purchase {
  background:
    linear-gradient(145deg, rgba(226,240,219,.78), rgba(249,247,239,.85)),
    var(--paper-texture);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--paper-texture-size);
}

.product-purchase__inner {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr);
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
  border: 1px solid rgba(46,69,60,.13);
  border-radius: clamp(34px, 5vw, 68px);
  background: rgba(255,255,255,.42);
  box-shadow: 0 30px 70px rgba(46,69,60,.07);
}

.product-purchase__image {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 44% 44% 15% 15% / 32% 32% 14% 14%;
}

.product-purchase__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-purchase__copy h2 {
  margin-top: 15px;
  font-size: clamp(34px, 4vw, 52px);
}

.product-purchase__copy > p:not(.product-summary__brand, .product-summary__en, .product-summary__price) {
  margin-top: 25px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 2;
}

.product-purchase__copy ul {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 20px;
  color: var(--ink-soft);
  font-size: 10px;
  list-style: none;
}

.product-purchase__copy li::before {
  content: "・";
}

/* Craft */
.product-craft {
  background: #fbfaf7 var(--paper-texture) repeat 0 0 / var(--paper-texture-size);
}

.product-craft .product-narrow > p:not(.product-kicker) {
  margin-top: 26px;
}

.product-text-link {
  position: relative;
  margin-top: 40px;
  padding-bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 96px;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
}

.product-text-link span {
  font-family: Arial, sans-serif;
  transition: transform .3s var(--ease);
}

.product-text-link:hover span {
  transform: translateX(4px);
}

/* Related */
.product-related {
  background:
    linear-gradient(to bottom, rgba(226,240,219,.48), rgba(252,251,247,.06)),
    var(--paper-texture);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--paper-texture-size);
}

.product-related__list {
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}

.product-related-card figure {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 40% 40% 14% 14% / 28% 28% 13% 13%;
  background: rgba(255,255,255,.35);
}

.product-related-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s var(--ease);
}

.product-related-card:hover img {
  transform: scale(1.035);
}

.product-related-card h3 {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .045em;
}

.product-related-card p {
  margin-top: 5px;
  color: var(--ink-soft);
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .13em;
}

.product-related-card strong {
  margin-top: 10px;
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 400;
}

/* Journal */
.product-journal {
  padding-bottom: clamp(130px, 12vw, 190px);
  background: var(--paper-light) var(--paper-texture) repeat 0 0 / var(--paper-texture-size);
}

.product-journal__list {
  width: min(100%, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 38px);
}

.product-journal-card figure {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background: #e7e2da;
}

.product-journal-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}

.product-journal-card:hover img {
  transform: scale(1.03);
}

.product-journal-card > p {
  margin-top: 18px;
  color: var(--sage-deep);
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .15em;
}

.product-journal-card h3 {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
}

.product-detail-page .site-footer {
  margin-top: 0;
}

/* Product detail responsive */
@media (max-width: 1080px) {
  .product-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
    gap: 48px;
  }

  .product-summary {
    position: static;
  }

  .product-feature-row,
  .product-feature-row--reverse {
    gap: 54px;
  }

  .product-material-grid {
    gap: 22px;
  }
}

@media (max-width: 880px) {
  .product-breadcrumb {
    padding-top: calc(64px + 30px);
  }

  .product-hero__inner,
  .product-feature-row,
  .product-feature-row--reverse,
  .product-two-column,
  .product-two-column--image-right,
  .product-repair__body,
  .product-spec__body,
  .product-purchase__inner {
    grid-template-columns: 1fr;
  }

  .product-feature-row--reverse .product-feature-row__image,
  .product-feature-row--reverse .product-feature-row__body {
    grid-column: auto;
    grid-row: auto;
  }

  .product-feature-row--reverse .product-feature-row__image {
    order: 0;
  }

  .product-feature-row--reverse .product-feature-row__body {
    order: 1;
  }

  .product-gallery {
    width: min(100%, 670px);
    margin-inline: auto;
  }

  .product-summary {
    width: min(100%, 670px);
    margin-inline: auto;
  }

  .product-feature-row__image,
  .product-two-column__image {
    width: min(100%, 650px);
    margin-inline: auto;
  }

  .product-feature-row__body,
  .product-two-column__copy {
    width: min(100%, 650px);
    margin-inline: auto;
  }

  .product-material-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-material-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 540px);
    margin-inline: auto;
  }

  .product-repair__images {
    grid-template-columns: 1fr 1fr;
  }

  .product-spec__image {
    width: min(100%, 580px);
    margin-inline: auto;
  }

  .product-purchase__inner {
    width: min(100%, 720px);
  }

  .product-purchase__image {
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .product-related__list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 22px 14px;
    margin-inline: -22px;
  }

  .product-related__list::-webkit-scrollbar {
    display: none;
  }

  .product-related-card {
    flex: 0 0 min(270px, 72vw);
    scroll-snap-align: start;
  }
}

@media (max-width: 700px) {
  .product-section {
    padding: 84px 20px;
  }

  .product-breadcrumb {
    width: calc(100% - 40px);
  }

  .product-hero {
    padding: 28px 20px 94px;
  }

  .product-hero__inner {
    gap: 48px;
  }

  .product-gallery__main {
    border-radius: 42% 42% 14% 14% / 30% 30% 13% 13%;
  }

  .product-gallery__thumbs {
    grid-template-columns: repeat(5, 76px);
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  .product-gallery__thumb {
    scroll-snap-align: start;
  }

  .product-summary h1 {
    font-size: 40px;
  }

  .product-summary__copy {
    font-size: 23px;
  }

  .product-narrow h2,
  .product-section-heading h2,
  .product-two-column__copy h2,
  .product-lifestyle__copy h2,
  .product-purchase__copy h2 {
    font-size: 31px;
  }

  .product-feature-row + .product-feature-row {
    margin-top: 88px;
  }

  .product-feature-row__body h3 {
    font-size: 28px;
  }

  .product-lifestyle {
    padding-inline: 0;
  }

  .product-lifestyle__visual {
    width: calc(100% - 28px);
    height: min(78vh, 650px);
    border-radius: 28px;
  }

  .product-lifestyle__visual img {
    object-position: 52% center;
  }

  .product-lifestyle__copy {
    padding-inline: 20px;
  }

  .product-material-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .product-material-card:last-child {
    grid-column: auto;
    width: 100%;
  }

  .product-material-card {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .product-number-grid {
    grid-template-columns: 1fr;
  }

  .product-number-grid div {
    min-height: 80px;
  }

  .product-number-grid div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .product-repair__images {
    grid-template-columns: 1fr;
  }

  .product-repair__images figure {
    aspect-ratio: 16 / 10;
  }

  .product-spec__table div {
    grid-template-columns: 104px 1fr;
    gap: 15px;
  }

  .product-purchase__inner {
    padding: 28px 20px 36px;
    border-radius: 32px;
  }

  .product-purchase__copy ul {
    grid-template-columns: 1fr;
  }

  .product-journal__list {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .product-journal-card {
    width: min(100%, 520px);
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .product-summary__facts div {
    grid-template-columns: 78px 1fr;
    gap: 14px;
  }

  .product-button {
    min-height: 55px;
    padding-inline: 18px;
    font-size: 11px;
  }

  .product-spec__table div {
    padding-block: 10px;
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .product-spec__table dt {
    font-size: 9px;
  }

  .product-spec__table dd {
    font-size: 11px;
  }
}

/* ==========================================================
   ABOUT PAGE
========================================================== */
.about-page {
  --about-dark: #23372f;
  --about-brown: #80634f;
  --about-paper: #f7f4ec;
}

.about-page .desktop-nav a[aria-current="page"]::after,
.about-page .drawer-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.about-section {
  position: relative;
  padding: clamp(100px, 10vw, 170px) clamp(24px, 6vw, 88px);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-repeat: repeat;
  background-size: var(--paper-texture-size);
}

.about-label {
  margin-bottom: 20px;
  color: var(--sage-deep);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
}

.about-heading h2,
.about-materials__heading h2,
.about-history__head h2,
.about-network__intro h2,
.about-repair__panel h2,
.about-future__content h2,
.about-message__quote h2,
.about-profile__heading h2 {
  font-size: clamp(34px, 4vw, 62px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: .06em;
}

.about-copy {
  display: grid;
  gap: 1.4em;
  color: #43554d;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 2.15;
}

.about-button {
  width: fit-content;
  margin-top: 34px;
  padding: 15px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 34px;
  border-bottom: 1px solid currentColor;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  transition: gap .35s var(--ease), opacity .35s;
}

.about-button:hover {
  gap: 44px;
  opacity: .66;
}

.pc-only {
  display: inline;
}

/* Hero */
.about-hero {
  position: relative;
  min-height: min(880px, 94vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: var(--about-dark);
}

.about-hero__media,
.about-hero__veil {
  position: absolute;
  inset: 0;
}

.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  transform: scale(1.035);
  animation: aboutHeroZoom 14s ease-out both;
}

.about-hero__veil {
  background:
    linear-gradient(90deg, rgba(24, 39, 33, .66) 0%, rgba(24, 39, 33, .23) 58%, rgba(24, 39, 33, .14) 100%),
    linear-gradient(0deg, rgba(18, 31, 26, .44) 0%, transparent 54%);
}

.about-hero__content {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 12vw));
  margin: 0 auto clamp(78px, 9vh, 110px);
}

.about-hero__eyebrow {
  margin-bottom: 14px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .32em;
}

.about-hero h1 {
  margin: 0 0 clamp(42px, 7vh, 78px);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 400;
  letter-spacing: .18em;
}

.about-hero__copy {
  font-size: clamp(40px, 5.5vw, 82px);
  line-height: 1.36;
  letter-spacing: .07em;
  text-shadow: 0 8px 30px rgba(0,0,0,.18);
}

.about-hero__scroll {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 4vw, 64px);
  bottom: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: rotate(90deg);
  transform-origin: right bottom;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .3em;
}

.about-hero__scroll i {
  width: 60px;
  height: 1px;
  display: block;
  background: rgba(255,255,255,.72);
  transform-origin: left;
  animation: aboutScrollLine 2.4s ease-in-out infinite;
}

@keyframes aboutHeroZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1.035); }
}

@keyframes aboutScrollLine {
  0%, 100% { transform: scaleX(.2); opacity: .4; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* Introduction */
.about-intro {
  padding-top: clamp(130px, 13vw, 210px);
  padding-bottom: clamp(130px, 13vw, 210px);
}

.about-intro__inner {
  width: min(920px, 100%);
  margin: 0 auto;
  text-align: center;
}

.about-intro__lead {
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.72;
  letter-spacing: .08em;
}

.about-intro__body {
  width: min(660px, 100%);
  margin: 54px auto 0;
  display: grid;
  gap: 18px;
  color: var(--ink-soft);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 15px;
  line-height: 2.2;
}

/* Origin */
.about-origin {
  background-color: #f0f2eb;
}

.about-origin__inner {
  width: min(var(--content), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .8fr);
  gap: clamp(60px, 8vw, 130px);
  align-items: center;
}

.about-origin__visual {
  position: relative;
  margin: 0;
}

.about-origin__visual::before {
  content: "";
  position: absolute;
  inset: 7% -6% -7% 9%;
  border: 1px solid rgba(67, 85, 77, .22);
  pointer-events: none;
}

.about-origin__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1.16 / 1;
  object-fit: cover;
}

.about-origin__visual figcaption {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  color: var(--ink-soft);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.about-origin__content .about-copy {
  margin-top: 44px;
}

/* Philosophy */
.about-philosophy {
  padding-left: 0;
  padding-right: 0;
}

.about-philosophy__inner {
  display: grid;
  gap: clamp(80px, 9vw, 140px);
}

.about-philosophy__content {
  width: min(810px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.about-philosophy__content h2 {
  margin-bottom: 38px;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: .1em;
}

.about-philosophy__lead {
  margin-bottom: 42px;
  color: var(--ink);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.9;
  letter-spacing: .06em;
}

.about-copy--center {
  width: min(690px, 100%);
  margin: 0 auto;
}

.about-philosophy__visual {
  margin: 0;
}

.about-philosophy__visual img {
  width: 100%;
  height: clamp(420px, 52vw, 720px);
  object-fit: cover;
  object-position: center 50%;
}

/* Metal and wood */
.about-materials {
  overflow: hidden;
  background-color: #e8eee5;
}

.about-materials__heading,
.about-materials__text {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.about-materials__heading {
  margin-bottom: clamp(70px, 8vw, 120px);
}

.about-materials__gallery {
  position: relative;
  width: min(1320px, 100%);
  min-height: clamp(680px, 72vw, 940px);
  margin: 0 auto clamp(72px, 8vw, 120px);
}

.about-materials__image {
  position: absolute;
  margin: 0;
}

.about-materials__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-materials__image figcaption {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  color: var(--ink-soft);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .25em;
}

.about-materials__image figcaption span {
  color: var(--sage-deep);
}

.about-materials__image--metal {
  top: 0;
  left: 0;
  width: 56%;
  height: 60%;
}

.about-materials__image--wood {
  top: 14%;
  right: 0;
  width: 38%;
  height: 47%;
}

.about-materials__image--joint {
  left: 27%;
  bottom: 0;
  width: 44%;
  height: 38%;
  z-index: 2;
  padding: 10px;
  background: rgba(247,244,236,.92);
  box-shadow: 0 24px 70px rgba(35, 55, 47, .12);
}

.about-materials__text {
  display: grid;
  grid-template-columns: 1fr minmax(480px, .95fr);
}

.about-materials__text .about-copy {
  grid-column: 2;
}

/* History */
.about-history {
  color: #edf2ed;
  background: var(--about-dark);
  background-image: none;
}

.about-history__head,
.about-history__timeline {
  width: min(1120px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.about-history__head {
  margin-bottom: clamp(80px, 9vw, 140px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 80px;
}

.about-history__head .about-label {
  grid-column: 1 / -1;
  color: #aabcae;
}

.about-history__head > p:last-child {
  align-self: end;
  color: rgba(237,242,237,.68);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 14px;
  line-height: 2.1;
}

.about-history__timeline {
  position: relative;
}

.about-history__timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 140px;
  width: 1px;
  background: rgba(237,242,237,.2);
}

.history-entry {
  position: relative;
  min-height: 160px;
  padding: 0 0 clamp(65px, 7vw, 100px) 230px;
  display: grid;
  grid-template-columns: 1fr;
}

.history-entry::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 135px;
  width: 11px;
  height: 11px;
  border: 2px solid #b8c9bc;
  border-radius: 50%;
  background: var(--about-dark);
}

.history-entry__year {
  position: absolute;
  top: -7px;
  left: 0;
  color: #d4dfd6;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(40px, 5vw, 72px);
  font-style: italic;
  line-height: 1;
}

.history-entry__content {
  max-width: 760px;
}

.history-entry__content figure {
  width: min(660px, 100%);
  margin: 0 0 32px;
}

.history-entry__content img {
  width: 100%;
  aspect-ratio: 3 / 1.65;
  object-fit: cover;
  filter: saturate(.78) contrast(.94);
}

.history-entry__content h3 {
  margin: 0 0 14px;
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: .08em;
}

.history-entry__content p {
  max-width: 650px;
  color: rgba(237,242,237,.67);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 14px;
  line-height: 2;
}

/* Network */
.about-network {
  background-color: #f7f4ec;
}

.about-network__intro,
.about-network__grid,
.about-network__statement {
  width: min(1240px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.about-network__intro {
  margin-bottom: clamp(70px, 8vw, 115px);
  display: grid;
  grid-template-columns: 1.1fr .8fr;
  gap: 40px 100px;
}

.about-network__intro .about-label {
  grid-column: 1 / -1;
}

.about-network__intro > p:last-child {
  align-self: end;
  color: var(--ink-soft);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 14px;
  line-height: 2.1;
}

.about-network__grid {
  display: grid;
  grid-template-columns: 1.2fr .85fr;
  gap: 28px;
}

.network-card {
  min-height: 360px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  box-shadow: 0 20px 60px rgba(37,54,46,.06);
}

.network-card--large {
  grid-row: span 2;
  min-height: 748px;
}

.network-card figure {
  height: 250px;
  margin: 0;
  overflow: hidden;
}

.network-card--large figure {
  height: 500px;
}

.network-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.network-card:hover img {
  transform: scale(1.035);
}

.network-card__body {
  padding: 30px clamp(26px, 3vw, 42px) 36px;
}

.network-card__body span {
  color: var(--sage-deep);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .25em;
}

.network-card__body h3 {
  margin: 11px 0 13px;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: .06em;
}

.network-card__body p {
  color: var(--ink-soft);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.95;
}

.about-network__statement {
  margin-top: 64px;
  padding-top: 42px;
  border-top: 1px solid var(--line);
}

.about-network__statement p {
  max-width: 760px;
  margin-left: auto;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.9;
  letter-spacing: .05em;
}

/* Repair */
.about-repair {
  min-height: clamp(740px, 74vw, 960px);
  padding-top: clamp(100px, 11vw, 160px);
  padding-bottom: clamp(100px, 11vw, 160px);
  display: flex;
  align-items: center;
  background: #263b32;
  background-image: none;
}

.about-repair__media,
.about-repair__overlay {
  position: absolute;
  inset: 0;
}

.about-repair__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-repair__overlay {
  background: linear-gradient(90deg, rgba(26,43,36,.12) 0%, rgba(26,43,36,.12) 44%, rgba(26,43,36,.46) 100%);
}

.about-repair__panel {
  position: relative;
  z-index: 2;
  width: min(620px, 54vw);
  margin-left: auto;
  padding: clamp(44px, 5vw, 76px);
  background: rgba(250,248,241,.94);
  box-shadow: 0 30px 90px rgba(18,31,26,.18);
}

.about-repair__panel h2 {
  margin-bottom: 35px;
}

.about-repair__services {
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  list-style: none;
}

.about-repair__services li {
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 12px;
}

.about-repair__services li:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.about-repair__services li:nth-child(even) {
  padding-left: 18px;
}

/* Future */
.about-future {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .75fr);
  gap: clamp(70px, 9vw, 140px);
  align-items: center;
}

.about-future__visual {
  position: relative;
  padding-bottom: 20%;
}

.about-future__visual figure {
  margin: 0;
}

.about-future__main img {
  width: 100%;
  aspect-ratio: 1.15 / 1;
  object-fit: cover;
}

.about-future__sub {
  position: absolute;
  right: -7%;
  bottom: 0;
  width: 42%;
  padding: 9px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(35,55,47,.14);
}

.about-future__sub img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about-future__content .about-copy {
  margin-top: 42px;
}

/* Message */
.about-message {
  color: #edf2ed;
  background: #2b4037;
  background-image: none;
}

.about-message__inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(70px, 9vw, 150px);
}

.about-message__quote {
  position: relative;
}

.about-message__quote .about-label {
  color: #b2c3b6;
}

.about-message__quote h2 {
  position: relative;
  z-index: 1;
}

.about-message__mark {
  position: absolute;
  top: 42%;
  left: -10px;
  color: rgba(255,255,255,.07);
  font-family: Georgia, serif;
  font-size: 260px;
  line-height: .6;
}

.about-message__body .about-copy {
  color: rgba(237,242,237,.72);
}

.about-message__signature {
  margin-top: 55px;
  padding-top: 28px;
  display: grid;
  gap: 7px;
  border-top: 1px solid rgba(237,242,237,.18);
}

.about-message__signature span {
  color: rgba(237,242,237,.58);
  font-size: 12px;
  letter-spacing: .08em;
}

.about-message__signature strong {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .1em;
}

/* Company profile */
.about-profile {
  background-color: #f4f1e8;
}

.about-profile__inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: clamp(60px, 8vw, 140px);
}

.about-profile__list {
  margin: 0;
}

.about-profile__list > div {
  padding: 24px 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  border-top: 1px solid var(--line);
}

.about-profile__list > div:last-child {
  border-bottom: 1px solid var(--line);
}

.about-profile__list dt,
.about-profile__list dd {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.9;
}

.about-profile__list dt {
  color: var(--ink-soft);
}

/* Next page */
.about-next {
  position: relative;
  min-height: clamp(520px, 48vw, 700px);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.about-next__media,
.about-next__overlay {
  position: absolute;
  inset: 0;
}

.about-next__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

.about-next__overlay {
  background: rgba(24, 40, 33, .48);
  transition: background .5s;
}

.about-next__content {
  position: relative;
  z-index: 1;
  padding: 40px 24px;
}

.about-next__content > p {
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .3em;
}

.about-next__content h2 {
  margin: 0 0 42px;
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 400;
  letter-spacing: .08em;
}

.about-next__content span {
  padding-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 42px;
  border-bottom: 1px solid rgba(255,255,255,.75);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 13px;
}

.about-next:hover .about-next__media img {
  transform: scale(1.035);
}

.about-next:hover .about-next__overlay {
  background: rgba(24,40,33,.36);
}

.about-next:hover .about-next__content span {
  gap: 55px;
}

/* Responsive */
@media (max-width: 1000px) {
  .about-origin__inner,
  .about-future,
  .about-message__inner,
  .about-profile__inner {
    grid-template-columns: 1fr;
  }

  .about-origin__visual {
    width: min(720px, 88%);
  }

  .about-origin__content {
    width: min(720px, 100%);
    margin-left: auto;
  }

  .about-materials__text {
    grid-template-columns: 1fr;
  }

  .about-materials__text .about-copy {
    grid-column: 1;
    width: min(700px, 100%);
    margin-left: auto;
  }

  .about-history__head,
  .about-network__intro {
    grid-template-columns: 1fr;
  }

  .about-history__head .about-label,
  .about-network__intro .about-label {
    grid-column: 1;
  }

  .about-history__head > p:last-child,
  .about-network__intro > p:last-child {
    width: min(660px, 100%);
    margin-left: auto;
  }

  .about-repair__panel {
    width: min(650px, 74vw);
  }

  .about-future__visual {
    width: min(760px, 90%);
  }

  .about-future__content,
  .about-message__body {
    width: min(720px, 100%);
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  .about-section {
    padding: 88px 22px;
  }

  .pc-only {
    display: none;
  }

  .about-heading h2,
  .about-materials__heading h2,
  .about-history__head h2,
  .about-network__intro h2,
  .about-repair__panel h2,
  .about-future__content h2,
  .about-message__quote h2,
  .about-profile__heading h2 {
    font-size: 32px;
    line-height: 1.5;
  }

  .about-copy {
    font-size: 14px;
    line-height: 2.05;
  }

  .about-hero {
    min-height: 760px;
    align-items: flex-end;
  }

  .about-hero__media img {
    object-position: 58% center;
  }

  .about-hero__veil {
    background:
      linear-gradient(0deg, rgba(20,35,29,.73) 0%, rgba(20,35,29,.16) 70%),
      linear-gradient(90deg, rgba(20,35,29,.34), transparent);
  }

  .about-hero__content {
    width: calc(100% - 44px);
    margin-bottom: 76px;
  }

  .about-hero h1 {
    margin-bottom: 34px;
    font-size: 16px;
  }

  .about-hero__copy {
    font-size: 38px;
  }

  .about-hero__scroll {
    display: none;
  }

  .about-intro {
    padding-top: 105px;
    padding-bottom: 105px;
  }

  .about-intro__lead {
    font-size: 29px;
    line-height: 1.7;
  }

  .about-intro__body {
    margin-top: 38px;
    font-size: 14px;
  }

  .about-origin__inner {
    gap: 70px;
  }

  .about-origin__visual {
    width: 92%;
  }

  .about-origin__visual img {
    aspect-ratio: 4 / 5;
  }

  .about-origin__content .about-copy,
  .about-future__content .about-copy {
    margin-top: 32px;
  }

  .about-philosophy {
    padding-left: 0;
    padding-right: 0;
  }

  .about-philosophy__content {
    width: calc(100% - 44px);
  }

  .about-philosophy__content h2 {
    font-size: 38px;
  }

  .about-philosophy__lead {
    font-size: 19px;
    line-height: 1.8;
  }

  .about-philosophy__visual img {
    height: 470px;
  }

  .about-materials__gallery {
    min-height: 840px;
    margin-bottom: 70px;
  }

  .about-materials__image--metal {
    width: 82%;
    height: 38%;
  }

  .about-materials__image--wood {
    top: 32%;
    width: 62%;
    height: 32%;
  }

  .about-materials__image--joint {
    left: 8%;
    width: 66%;
    height: 29%;
  }

  .about-history__head {
    margin-bottom: 70px;
  }

  .about-history__timeline::before {
    left: 8px;
  }

  .history-entry {
    min-height: auto;
    padding: 0 0 74px 42px;
  }

  .history-entry::before {
    top: 10px;
    left: 3px;
    width: 11px;
    height: 11px;
  }

  .history-entry__year {
    position: static;
    margin-bottom: 22px;
    font-size: 48px;
  }

  .history-entry__content figure {
    margin-bottom: 24px;
  }

  .history-entry__content img {
    aspect-ratio: 4 / 3;
  }

  .about-network__intro {
    margin-bottom: 65px;
  }

  .about-network__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .network-card,
  .network-card--large {
    min-height: 0;
    grid-row: auto;
  }

  .network-card figure,
  .network-card--large figure {
    height: 280px;
  }

  .about-network__statement {
    margin-top: 48px;
  }

  .about-network__statement p {
    font-size: 20px;
  }

  .about-repair {
    min-height: 900px;
    align-items: flex-end;
    padding: 0 0 32px;
  }

  .about-repair__media img {
    object-position: 47% center;
  }

  .about-repair__overlay {
    background: linear-gradient(0deg, rgba(26,43,36,.46), rgba(26,43,36,.06) 70%);
  }

  .about-repair__panel {
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 40px 26px;
  }

  .about-repair__services {
    grid-template-columns: 1fr;
  }

  .about-repair__services li,
  .about-repair__services li:nth-child(odd),
  .about-repair__services li:nth-child(even) {
    padding: 13px 3px;
    border-right: 0;
  }

  .about-future {
    gap: 70px;
  }

  .about-future__visual {
    width: 92%;
    padding-bottom: 26%;
  }

  .about-future__main img {
    aspect-ratio: 4 / 5;
  }

  .about-future__sub {
    right: -9%;
    width: 48%;
  }

  .about-message__inner {
    gap: 60px;
  }

  .about-message__mark {
    font-size: 170px;
  }

  .about-profile__inner {
    gap: 50px;
  }

  .about-profile__list > div {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .about-profile__list dt {
    font-size: 11px;
  }

  .about-next {
    min-height: 580px;
  }

  .about-next__media img {
    object-position: center;
  }

  .about-next__content h2 {
    font-size: 34px;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__media img,
  .about-hero__scroll i {
    animation: none;
  }
}

/* =========================================================
   ABOUT PAGE — 2026-07-23 layout refinements
   ========================================================= */
.about-heading-line {
  display: block;
}

.about-intro__inner {
  width: min(1180px, 100%);
}

.about-intro__lead {
  font-size: clamp(30px, 3.5vw, 52px);
}

.about-origin__inner {
  width: min(1320px, 100%);
  grid-template-columns: minmax(0, 1.05fr) minmax(480px, .95fr);
  gap: clamp(60px, 6vw, 100px);
}

.about-origin__visual::before {
  inset: 6% -5% -6% 8%;
  border: 0;
  background: rgba(184, 205, 187, .34);
  box-shadow: 0 24px 70px rgba(35, 55, 47, .05);
}

.about-origin__content .about-heading h2 {
  font-size: clamp(36px, 3.35vw, 52px);
}

/* Metal and wood: left image composition / right copy */
.about-materials__inner {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr);
  gap: clamp(70px, 7vw, 120px);
  align-items: start;
}

.about-materials__gallery {
  width: 100%;
  min-height: clamp(720px, 57vw, 850px);
  margin: 0;
}

.about-materials__content {
  padding-top: clamp(24px, 4vw, 64px);
}

.about-materials__heading,
.about-materials__text {
  width: auto;
  margin: 0;
}

.about-materials__heading {
  margin-bottom: clamp(38px, 4vw, 58px);
}

.about-materials__heading h2 {
  font-size: clamp(35px, 3.25vw, 52px);
}

.about-materials__text {
  display: block;
}

.about-materials__text .about-copy {
  width: 100%;
}

.about-materials__image--metal {
  top: 0;
  left: 0;
  width: 78%;
  height: 33%;
}

.about-materials__image--wood {
  top: 27%;
  right: 0;
  width: 58%;
  height: 29%;
}

.about-materials__image--joint {
  left: 7%;
  bottom: 0;
  width: 79%;
  height: 38%;
}

/* History: explicit year / axis / content columns */
.about-history__timeline {
  --history-year-col: clamp(180px, 16vw, 230px);
  --history-axis-col: 44px;
}

.about-history__timeline::before {
  left: calc(var(--history-year-col) + (var(--history-axis-col) / 2));
  transform: translateX(-.5px);
}

.history-entry {
  min-height: 160px;
  padding: 0 0 clamp(65px, 7vw, 100px);
  display: grid;
  grid-template-columns: var(--history-year-col) var(--history-axis-col) minmax(0, 1fr);
  align-items: start;
}

.history-entry::before {
  top: 14px;
  left: calc(var(--history-year-col) + ((var(--history-axis-col) - 15px) / 2));
}

.history-entry__year {
  position: static;
  grid-column: 1;
  padding-right: clamp(26px, 3vw, 46px);
  text-align: right;
}

.history-entry__content {
  grid-column: 3;
  width: 100%;
  max-width: 800px;
}

.history-entry__content p {
  max-width: 760px;
  text-wrap: pretty;
}

.about-no-break {
  white-space: nowrap;
}

.about-network__intro {
  grid-template-columns: 1.15fr .85fr;
}

.about-network__intro h2 {
  font-size: clamp(35px, 3.45vw, 54px);
}

@media (min-width: 1001px) {
  .about-intro__lead .about-heading-line,
  .about-origin__content .about-heading-line,
  .about-materials__heading .about-heading-line,
  .about-network__intro .about-heading-line {
    white-space: nowrap;
  }
}

@media (max-width: 1000px) {
  .about-origin__inner {
    grid-template-columns: 1fr;
  }

  .about-materials__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "gallery";
    gap: 72px;
  }

  .about-materials__content {
    grid-area: copy;
    width: min(760px, 100%);
    margin-left: auto;
    padding-top: 0;
  }

  .about-materials__gallery {
    grid-area: gallery;
    min-height: 790px;
  }

  .about-materials__text .about-copy {
    width: min(700px, 100%);
    margin-left: auto;
  }

  .about-history__timeline {
    --history-year-col: clamp(145px, 18vw, 185px);
    --history-axis-col: 40px;
  }
}

@media (max-width: 760px) {
  .about-intro__inner {
    width: 100%;
  }

  .about-origin__visual::before {
    inset: 5% -5% -5% 7%;
  }

  .about-materials__inner {
    gap: 58px;
  }

  .about-materials__gallery {
    min-height: 770px;
  }

  .about-materials__image--metal {
    width: 88%;
    height: 31%;
  }

  .about-materials__image--wood {
    top: 29%;
    width: 67%;
    height: 29%;
  }

  .about-materials__image--joint {
    left: 5%;
    width: 82%;
    height: 34%;
  }

  .about-history__timeline {
    --history-year-col: 0px;
    --history-axis-col: 0px;
  }

  .about-history__timeline::before {
    left: 8px;
    transform: none;
  }

  .history-entry {
    min-height: auto;
    padding: 0 0 74px 42px;
    display: block;
  }

  .history-entry::before {
    top: 10px;
    left: 3px;
  }

  .history-entry__year {
    position: static;
    margin-bottom: 22px;
    padding-right: 0;
    text-align: left;
  }

  .history-entry__content {
    width: 100%;
    max-width: none;
  }

  .about-no-break {
    white-space: normal;
  }
}

/* ABOUT responsive follow-up */
.about-intro__lead-sp {
  display: none;
}

@media (max-width: 1000px) {
  .about-network__intro {
    grid-template-columns: 1fr;
  }

  .about-network__intro .about-label {
    grid-column: 1;
  }

  .about-network__intro > p:last-child {
    width: min(660px, 100%);
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  .about-intro__lead-pc {
    display: none;
  }

  .about-intro__lead-sp {
    display: block;
  }

  .about-intro__lead {
    font-size: 26px;
    line-height: 1.72;
  }

  .about-origin__content .about-heading h2,
  .about-materials__heading h2 {
    font-size: 29px;
    line-height: 1.55;
    letter-spacing: .04em;
  }

  .about-network__intro h2 {
    font-size: 28px;
    line-height: 1.58;
    letter-spacing: .035em;
  }
}

@media (max-width: 1000px) {
  .about-no-break {
    white-space: normal;
  }
}


/* =========================================================
ABOUT page follow-up fixes (2026-07-23)
========================================================= */

/* Natural line breaks for large headings */
.about-philosophy__content h2 .about-heading-line,
.about-history__head h2 .about-heading-line {
  display: block;
}

@media (min-width: 761px) {
  .about-philosophy__content h2 .about-heading-line,
  .about-history__head h2 .about-heading-line {
    white-space: nowrap;
  }
}

/* Metal and wood: keep all three images separate, without overlap */
.about-materials__gallery {
  position: static;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 2.6vw, 42px);
  align-content: start;
}

.about-materials__image,
.about-materials__image--metal,
.about-materials__image--wood,
.about-materials__image--joint {
  position: static;
  inset: auto;
  height: auto;
  margin: 0;
}

.about-materials__image img {
  display: block;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.about-materials__image--metal {
  width: 82%;
  justify-self: start;
}

.about-materials__image--wood {
  width: 66%;
  justify-self: end;
}

.about-materials__image--joint {
  width: 88%;
  justify-self: start;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Align the closing production-network statement with the card grid */
.about-network__statement p {
  width: min(760px, 100%);
  max-width: 760px;
  margin-left: 0;
  margin-right: auto;
}

/* Decorative quotation mark removed from the message section */
.about-message__mark {
  display: none;
}

@media (max-width: 1000px) {
  .about-materials__gallery {
    min-height: 0;
  }

  .about-materials__image--metal {
    width: 88%;
  }

  .about-materials__image--wood {
    width: 72%;
  }

  .about-materials__image--joint {
    width: 92%;
  }
}

@media (max-width: 760px) {
  .about-philosophy__content h2 .about-heading-line,
  .about-history__head h2 .about-heading-line {
    white-space: normal;
  }

  .about-materials__gallery {
    gap: 30px;
  }

  .about-materials__image--metal,
  .about-materials__image--wood,
  .about-materials__image--joint {
    width: 100%;
    justify-self: stretch;
  }
}

/* =========================================================
   CRAFTSMANSHIP PAGE
   ========================================================= */
.craft-page {
  --craft-dark: #1f3b31;
  --craft-dark-soft: #29483d;
  --craft-wood: #eee5d8;
  --craft-line: rgba(46, 69, 60, .18);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-repeat: repeat;
  background-size: var(--paper-texture-size);
}

.craft-section {
  padding: clamp(110px, 10vw, 180px) clamp(24px, 6vw, 90px);
}

.craft-kicker {
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.craft-heading-line {
  display: block;
}

.craft-hero {
  position: relative;
  min-height: min(900px, 92vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.craft-hero__media,
.craft-hero__veil {
  position: absolute;
  inset: 0;
}

.craft-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
  animation: craftHeroZoom 18s ease-in-out infinite alternate;
}

.craft-hero__veil {
  background:
    linear-gradient(90deg, rgba(20, 34, 29, .73) 0%, rgba(20, 34, 29, .47) 38%, rgba(20, 34, 29, .12) 73%, rgba(20, 34, 29, .18) 100%),
    linear-gradient(0deg, rgba(19, 34, 29, .28), transparent 44%);
}

.craft-hero__content {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: var(--header-height);
}

.craft-hero__content .craft-kicker {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, .78);
}

.craft-hero__content h1 {
  margin-bottom: 42px;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 400;
  letter-spacing: .2em;
}

.craft-hero__copy {
  font-size: clamp(44px, 5.4vw, 82px);
  line-height: 1.48;
  letter-spacing: .08em;
}

.craft-hero__copy span {
  display: block;
}

.craft-hero__scroll {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 4vw, 60px);
  bottom: 35px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .28em;
}

.craft-hero__scroll i {
  width: 1px;
  height: 72px;
  background: rgba(255,255,255,.75);
  transform-origin: top;
  animation: craftScrollLine 2s ease-in-out infinite;
}

@keyframes craftHeroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

@keyframes craftScrollLine {
  0%, 100% { transform: scaleY(.2); opacity: .35; }
  50% { transform: scaleY(1); opacity: 1; }
}

.craft-intro__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
  text-align: center;
}

.craft-intro .craft-kicker {
  margin-bottom: 30px;
  color: var(--sage-deep);
}

.craft-intro h2 {
  margin-bottom: 55px;
  font-size: clamp(39px, 4.5vw, 68px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .07em;
}

.craft-intro__lead {
  width: min(790px, 100%);
  margin: 0 auto 44px;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 2.15;
}

.craft-intro__lead p + p,
.craft-intro__body p + p {
  margin-top: 18px;
}

.craft-intro__grid {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
}

.craft-intro__card {
  padding: 34px 30px 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.68);
}

.craft-intro__label {
  margin-bottom: 16px;
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--sage-deep);
}

.craft-intro__card h3 {
  margin-bottom: 14px;
  font-size: clamp(24px, 1.8vw, 30px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .06em;
  color: var(--ink);
}

.craft-intro__card p:last-child {
  color: var(--ink-soft);
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 2;
}

.craft-intro__body {
  width: min(720px, 100%);
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2.2;
}

.craft-route {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto clamp(100px, 9vw, 150px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.craft-route__item {
  position: relative;
  min-height: 230px;
  padding: 34px clamp(25px, 3vw, 48px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 9px 20px;
  transition: background .35s ease, color .35s ease;
}

.craft-route__item + .craft-route__item {
  border-left: 1px solid var(--line);
}

.craft-route__item:hover {
  color: #fff;
  background: var(--craft-dark);
}

.craft-route__item > span {
  grid-row: 1 / 3;
  align-self: start;
  font-size: clamp(40px, 4vw, 62px);
  font-style: italic;
  line-height: 1;
  color: var(--sage-deep);
}

.craft-route__item small {
  align-self: end;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .25em;
}

.craft-route__item strong {
  grid-column: 2 / 3;
  align-self: start;
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: .06em;
}

.craft-route__item i {
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: center;
  font-style: normal;
  font-size: 24px;
}

.craft-process {
  padding: clamp(120px, 10vw, 180px) clamp(24px, 6vw, 90px);
}

.craft-process__head {
  width: min(1320px, 100%);
  margin: 0 auto clamp(72px, 7vw, 110px);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, .72fr);
  justify-content: space-between;
  gap: clamp(60px, 8vw, 140px);
  align-items: end;
}

.craft-process__head .craft-kicker {
  margin-bottom: 30px;
}

.craft-process__head h2 {
  font-size: clamp(43px, 4.6vw, 70px);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: .07em;
}

.craft-process__intro {
  font-size: 14px;
  line-height: 2.15;
}

.craft-process__intro p + p {
  margin-top: 20px;
}

.craft-process--metal {
  color: #f4f2ec;
  background: var(--craft-dark);
}

.craft-process--metal .craft-kicker,
.craft-process--assembly .craft-kicker {
  color: #adc1b5;
}

.craft-process--metal .craft-process__intro,
.craft-process--assembly .craft-process__intro {
  color: rgba(244, 242, 236, .73);
}

.craft-process__hero {
  width: min(1320px, 100%);
  margin: 0 auto clamp(100px, 9vw, 145px);
}

.craft-process__hero img {
  width: 100%;
  height: clamp(430px, 50vw, 720px);
  object-fit: cover;
}

.craft-process__hero figcaption {
  margin-top: 15px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.62);
}

.craft-steps {
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  gap: clamp(90px, 9vw, 150px);
}

.craft-step {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr);
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}

.craft-step--reverse figure {
  grid-column: 2;
}

.craft-step--reverse .craft-step__body {
  grid-column: 1;
  grid-row: 1;
}

.craft-step figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.craft-step__body {
  position: relative;
  padding-left: 70px;
}

.craft-step__body > span {
  position: absolute;
  top: -24px;
  left: 0;
  font-size: clamp(56px, 6vw, 92px);
  font-style: italic;
  line-height: 1;
  color: rgba(211, 226, 216, .17);
}

.craft-step__en {
  margin-bottom: 13px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .28em;
  color: #adc1b5;
}

.craft-step__body h3 {
  margin-bottom: 25px;
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 400;
  letter-spacing: .06em;
}

.craft-step__body > p:last-child {
  color: rgba(244, 242, 236, .73);
  font-size: 14px;
  line-height: 2.1;
}

.craft-process--wood {
  background: linear-gradient(180deg, rgba(240,232,219,.88), rgba(250,247,240,.95));
}

.craft-process--wood .craft-kicker {
  color: #9a7e5d;
}

.craft-process--wood .craft-process__intro {
  color: #6e665d;
}

.craft-wood-feature {
  position: relative;
  width: min(1320px, 100%);
  min-height: clamp(630px, 62vw, 850px);
  margin: 0 auto clamp(100px, 9vw, 145px);
}

.craft-wood-feature__main {
  position: absolute;
  top: 0;
  left: 0;
  width: 72%;
}

.craft-wood-feature__main img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.craft-wood-feature__sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 37%;
  padding: 12px;
  background: rgba(252, 249, 242, .9);
  box-shadow: 0 20px 55px rgba(69, 51, 35, .1);
}

.craft-wood-feature__sub img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.craft-wood-feature__caption {
  position: absolute;
  left: 6%;
  bottom: 5%;
  padding: 20px 24px;
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.8;
  background: rgba(252, 249, 242, .88);
}

.craft-card-grid {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 62px);
}

.craft-card {
  background: rgba(255,255,255,.54);
  border-bottom: 1px solid rgba(114, 88, 62, .25);
}

.craft-card figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.craft-card > div {
  padding: clamp(28px, 3vw, 44px) clamp(22px, 3vw, 40px) clamp(35px, 3.5vw, 52px);
}

.craft-card span {
  display: block;
  margin-bottom: 16px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .25em;
  color: #9a7e5d;
}

.craft-card h3 {
  margin-bottom: 18px;
  font-size: clamp(25px, 2vw, 34px);
  font-weight: 400;
  letter-spacing: .05em;
}

.craft-card p {
  color: #6e665d;
  font-size: 13px;
  line-height: 2;
}

.craft-process--assembly {
  color: #f4f2ec;
  background: #27473b;
}

.craft-assembly-visual {
  position: relative;
  width: min(1320px, 100%);
  margin: 0 auto clamp(95px, 8vw, 135px);
}

.craft-assembly-visual img {
  width: 100%;
  height: clamp(470px, 51vw, 720px);
  object-fit: cover;
}

.craft-assembly-visual > div {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(520px, 52%);
  padding: clamp(25px, 3vw, 48px);
  background: rgba(23, 53, 42, .9);
}

.craft-assembly-visual span {
  display: block;
  margin-bottom: 13px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .24em;
  color: #b8cbbf;
}

.craft-assembly-visual p {
  font-size: clamp(21px, 2.1vw, 32px);
  line-height: 1.7;
}

.craft-assembly-list {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.16);
}

.craft-assembly-list li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(30px, 5vw, 80px);
  padding: clamp(34px, 4vw, 58px) 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.craft-assembly-list li > span {
  font-size: clamp(50px, 5vw, 78px);
  font-style: italic;
  line-height: 1;
  color: rgba(210, 225, 216, .38);
}

.craft-assembly-list small {
  display: block;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .27em;
  color: #b8cbbf;
}

.craft-assembly-list h3 {
  margin-bottom: 15px;
  font-size: clamp(25px, 2.2vw, 36px);
  font-weight: 400;
  letter-spacing: .06em;
}

.craft-assembly-list p {
  max-width: 760px;
  color: rgba(244, 242, 236, .72);
  font-size: 13px;
  line-height: 2;
}

.craft-thinking {
  display: grid;
  gap: clamp(130px, 13vw, 220px);
}

.craft-thinking__item {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(400px, .72fr);
  gap: clamp(60px, 8vw, 130px);
  align-items: center;
}

.craft-thinking__item--reverse figure {
  grid-column: 2;
}

.craft-thinking__item--reverse > div {
  grid-column: 1;
  grid-row: 1;
}

.craft-thinking__item figure img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.craft-thinking__item .craft-kicker {
  margin-bottom: 24px;
  color: var(--sage-deep);
}

.craft-thinking__item h2 {
  margin-bottom: 38px;
  font-size: clamp(37px, 3.7vw, 56px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .06em;
}

.craft-thinking__item > div > p:not(.craft-kicker) {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2.15;
}

.craft-thinking__item > div > p + p {
  margin-top: 18px;
}

.craft-repair {
  position: relative;
  min-height: 780px;
  padding: clamp(80px, 8vw, 130px) clamp(24px, 7vw, 110px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.craft-repair__media,
.craft-repair__veil {
  position: absolute;
  inset: 0;
}

.craft-repair__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.craft-repair__veil {
  background: linear-gradient(90deg, rgba(18, 38, 31, .77), rgba(18, 38, 31, .52) 48%, rgba(18, 38, 31, .15));
}

.craft-repair__content {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
}

.craft-repair .craft-kicker {
  margin-bottom: 25px;
  color: #c4d4ca;
}

.craft-repair h2 {
  margin-bottom: 38px;
  font-size: clamp(39px, 4.1vw, 62px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .06em;
}

.craft-repair__content > div {
  margin-bottom: 36px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 2.1;
}

.craft-repair__content > div p + p {
  margin-top: 17px;
}

.craft-button {
  min-width: 270px;
  padding: 17px 22px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255,255,255,.45);
  font-size: 13px;
  letter-spacing: .06em;
  transition: color .3s ease, background .3s ease;
}

.craft-button:hover {
  color: var(--craft-dark);
  background: #fff;
}

.craft-next {
  position: relative;
  min-height: 600px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
}

.craft-next__media,
.craft-next__veil {
  position: absolute;
  inset: 0;
}

.craft-next__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.craft-next:hover .craft-next__media img {
  transform: scale(1.035);
}

.craft-next__veil {
  background: rgba(25, 48, 39, .55);
}

.craft-next__content {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100% - 48px));
  text-align: center;
}

.craft-next__content > p {
  margin-bottom: 24px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .32em;
}

.craft-next__content h2 {
  margin-bottom: 38px;
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .06em;
}

.craft-next__content > span {
  display: inline-flex;
  gap: 30px;
  align-items: center;
  font-size: 13px;
  letter-spacing: .08em;
}

.craft-next__content i {
  font-style: normal;
  transition: transform .3s var(--ease);
}

.craft-next:hover .craft-next__content i {
  transform: translateX(8px);
}

@media (min-width: 1001px) {
  .craft-intro h2 .craft-heading-line,
  .craft-process__head h2 .craft-heading-line,
  .craft-thinking__item h2 .craft-heading-line,
  .craft-repair h2 .craft-heading-line,
  .craft-next h2 .craft-heading-line {
    white-space: nowrap;
  }
}

@media (max-width: 1000px) {
  .craft-hero {
    min-height: 780px;
  }

  .craft-route {
    grid-template-columns: 1fr;
  }

  .craft-route__item + .craft-route__item {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .craft-route__item {
    min-height: 170px;
  }

  .craft-process__head,
  .craft-thinking__item {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .craft-process__head {
    align-items: start;
  }

  .craft-process__intro {
    width: min(700px, 100%);
    margin-left: auto;
  }

  .craft-step {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .craft-step--reverse figure,
  .craft-step--reverse .craft-step__body {
    grid-column: auto;
    grid-row: auto;
  }

  .craft-step--reverse figure {
    order: 0;
  }

  .craft-step--reverse .craft-step__body {
    order: 1;
  }

  .craft-step__body {
    width: min(680px, 100%);
  }

  .craft-wood-feature {
    min-height: 720px;
  }

  .craft-card-grid {
    gap: 30px;
  }

  .craft-thinking__item--reverse figure,
  .craft-thinking__item--reverse > div {
    grid-column: auto;
    grid-row: auto;
  }

  .craft-thinking__item--reverse figure {
    order: 0;
  }

  .craft-thinking__item--reverse > div {
    order: 1;
  }

  .craft-thinking__item > div {
    width: min(720px, 100%);
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  .craft-section,
  .craft-process {
    padding: 95px 20px;
  }

  .craft-hero {
    min-height: 720px;
  }

  .craft-hero__media img {
    object-position: 52% 32%;
  }

  .craft-hero__veil {
    background: linear-gradient(90deg, rgba(20, 34, 29, .72), rgba(20, 34, 29, .27));
  }

  .craft-hero__content {
    width: calc(100% - 40px);
  }

  .craft-hero__copy {
    font-size: 37px;
    line-height: 1.58;
  }

  .craft-hero__scroll {
    display: none;
  }

  .craft-intro h2,
  .craft-process__head h2,
  .craft-thinking__item h2,
  .craft-repair h2,
  .craft-next h2 {
    font-size: 30px;
    line-height: 1.58;
    letter-spacing: .035em;
  }

  .craft-intro__lead {
    font-size: 17px;
    line-height: 2;
  }

  .craft-intro__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .craft-intro__card {
    padding: 25px 22px;
  }

  .craft-route {
    width: calc(100% - 40px);
    margin-bottom: 90px;
  }

  .craft-route__item {
    min-height: 145px;
    padding: 25px 18px;
  }

  .craft-route__item > span {
    font-size: 46px;
  }

  .craft-process__head {
    margin-bottom: 60px;
    gap: 34px;
  }

  .craft-process__hero {
    margin-bottom: 85px;
  }

  .craft-process__hero img,
  .craft-assembly-visual img {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .craft-steps {
    gap: 85px;
  }

  .craft-step__body {
    padding-left: 54px;
  }

  .craft-step__body > span {
    font-size: 58px;
  }

  .craft-wood-feature {
    min-height: 0;
    display: grid;
    gap: 26px;
  }

  .craft-wood-feature__main,
  .craft-wood-feature__sub,
  .craft-wood-feature__caption {
    position: static;
    width: 100%;
  }

  .craft-wood-feature__main img,
  .craft-wood-feature__sub img {
    aspect-ratio: 4 / 5;
  }

  .craft-wood-feature__sub {
    padding: 0;
    box-shadow: none;
  }

  .craft-wood-feature__caption {
    padding: 0;
    background: transparent;
    font-size: 19px;
  }

  .craft-card-grid {
    grid-template-columns: 1fr;
  }

  .craft-assembly-visual > div {
    position: static;
    width: 100%;
    padding: 28px 0 0;
    background: transparent;
  }

  .craft-assembly-list li {
    grid-template-columns: 78px 1fr;
    gap: 20px;
  }

  .craft-assembly-list li > span {
    font-size: 48px;
  }

  .craft-thinking {
    gap: 110px;
  }

  .craft-thinking__item {
    gap: 38px;
  }

  .craft-thinking__item figure img {
    aspect-ratio: 4 / 5;
  }

  .craft-thinking__item > div {
    width: 100%;
  }

  .craft-repair {
    min-height: 760px;
    padding: 80px 20px;
    align-items: flex-end;
  }

  .craft-repair__veil {
    background: linear-gradient(0deg, rgba(18, 38, 31, .83), rgba(18, 38, 31, .28) 72%);
  }

  .craft-button {
    width: 100%;
    min-width: 0;
  }

  .craft-next {
    min-height: 570px;
  }

  .craft-next__content {
    width: calc(100% - 40px);
  }

  .craft-heading-line {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .craft-hero__media img,
  .craft-hero__scroll i {
    animation: none;
  }
}


/* ========================================
   MATERIALS PAGE
======================================== */
.materials-page { background: #f7f5ef; color: #203b32; }
.materials-page main { overflow: hidden; }
.materials-kicker { margin: 0 0 24px; font-size: 11px; font-weight: 700; letter-spacing: .28em; color: #789485; }
.materials-section { padding: clamp(100px, 10vw, 170px) max(24px, calc((100vw - 1200px) / 2)); }
.materials-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; padding: 130px max(24px, calc((100vw - 1200px) / 2)) 95px; color: white; }
.materials-hero__media,.materials-hero__veil { position:absolute; inset:0; }
.materials-hero__media img { width:100%; height:100%; object-fit:cover; transform:none; animation:none; }
.materials-hero__veil { background: linear-gradient(90deg, rgba(14,35,28,.76), rgba(14,35,28,.15) 70%), linear-gradient(0deg, rgba(14,35,28,.32), transparent 55%); }
.materials-hero__content { position:relative; z-index:2; max-width:760px; }
.materials-hero__content .materials-kicker { color:#dbe8df; }
.materials-hero h1 { margin:0 0 30px; font-family:"Noto Serif JP",serif; font-size:clamp(24px,2vw,34px); font-weight:400; letter-spacing:.15em; }
.materials-hero__copy { margin:0; font-family:"Noto Serif JP",serif; font-size:clamp(42px,5.3vw,82px); line-height:1.42; letter-spacing:.06em; }
.materials-hero__copy span,.materials-intro h2 span,.materials-feature h2 span,.materials-variation h2 span,.materials-join h2 span,.materials-source h2 span,.materials-next h2 span { display:block; }
.materials-hero__scroll { position:absolute; right:44px; bottom:42px; display:flex; align-items:center; gap:14px; z-index:2; font-size:9px; letter-spacing:.25em; writing-mode:vertical-rl; }
.materials-hero__scroll i { display:block; width:1px; height:64px; background:rgba(255,255,255,.7); animation: materialsScroll 2s ease-in-out infinite; }
.materials-intro__inner { max-width:980px; margin:auto; text-align:center; }
.materials-intro h2,.materials-feature h2,.materials-variation h2,.materials-join h2,.materials-source h2,.materials-next h2 { margin:0; font-family:"Noto Serif JP",serif; font-weight:400; font-size:clamp(42px,4.5vw,70px); line-height:1.55; letter-spacing:.06em; }
.materials-intro__lead { max-width:780px; margin:58px auto 0; font-family:"Noto Serif JP",serif; font-size:clamp(20px,1.8vw,27px); line-height:2; }
.materials-intro__body { max-width:720px; margin:45px auto 0; font-size:14px; line-height:2.25; color:#52675f; }
.materials-feature { padding:clamp(110px,10vw,170px) max(24px,calc((100vw - 1200px)/2)); }
.materials-feature--steel { background:#e8ece8; }
.materials-feature--wood { background:#f0ebe1; }
.materials-feature__head { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,480px); gap:90px; align-items:end; margin-bottom:80px; }
.materials-feature__text { font-size:14px; line-height:2.15; color:#50635c; }
.materials-steel-grid { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:auto auto; gap:28px; align-items:start; }
.materials-steel-grid figure { margin:0; overflow:hidden; }
.materials-steel-grid img { width:100%; height:100%; object-fit:cover; display:block; }
.materials-steel-grid__main { grid-row:1 / 3; aspect-ratio:4/5; }
.materials-steel-grid__sub { aspect-ratio:4/3; }
.materials-steel-grid__note { padding:42px; border-top:1px solid rgba(32,59,50,.25); font-family:"Noto Serif JP",serif; font-size:20px; line-height:1.9; }
.materials-traits { display:grid; grid-template-columns:repeat(3,1fr); margin-top:85px; border-top:1px solid rgba(32,59,50,.2); }
.materials-traits article { padding:38px 32px 15px 0; border-right:1px solid rgba(32,59,50,.2); }
.materials-traits article+article { padding-left:32px; }
.materials-traits article:last-child { border-right:0; }
.materials-traits span,.materials-woods span,.materials-source__grid span,.materials-source__label { font-size:10px; letter-spacing:.22em; color:#789485; }
.materials-traits h3,.materials-woods h3,.materials-source__grid h3,.materials-source__bottom h3 { font-family:"Noto Serif JP",serif; font-weight:400; font-size:26px; }
.materials-traits p,.materials-woods p,.materials-source__grid p,.materials-source__bottom p { font-size:13px; line-height:2; color:#596b64; }
.materials-wood-visual { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:auto auto; gap:28px; }
.materials-wood-visual figure { margin:0; overflow:hidden; }
.materials-wood-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.materials-wood-visual__large { grid-row:1/3; aspect-ratio:4/5; }
.materials-wood-visual__small { aspect-ratio:4/3; }
.materials-wood-visual__copy { padding:40px 0 0; font-family:"Noto Serif JP",serif; font-size:19px; line-height:2; }
.materials-woods { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:80px; }
.materials-woods article { padding:35px; background:rgba(255,255,255,.5); }
.materials-woods h3 small { display:block; margin-top:8px; font-family:inherit; font-size:10px; letter-spacing:.18em; color:#829289; }
.materials-variation { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:center; }
.materials-variation__content p { font-size:14px; line-height:2.15; color:#53675f; }
.materials-variation__content small { display:block; margin-top:35px; padding-top:25px; border-top:1px solid rgba(32,59,50,.2); color:#7b8983; line-height:1.8; }
.materials-variation__image { margin:0; }
.materials-variation__image img { width:100%; display:block; }
.materials-join { position:relative; min-height:760px; display:flex; align-items:center; padding:110px max(24px,calc((100vw - 1200px)/2)); color:white; }
.materials-join__media,.materials-join__veil { position:absolute; inset:0; }
.materials-join__media img { width:100%; height:100%; object-fit:cover; }
.materials-join__veil { background:linear-gradient(90deg,rgba(17,39,31,.86),rgba(17,39,31,.22) 78%); }
.materials-join__content { position:relative; z-index:2; max-width:680px; }
.materials-join__content .materials-kicker { color:#d0dfd6; }
.materials-join__content>div { max-width:600px; margin-top:45px; font-size:14px; line-height:2.1; color:#e2ebe5; }
.materials-source__head { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,520px); gap:80px; align-items:end; }
.materials-source__head>p:last-child { font-size:14px; line-height:2.15; color:#576a62; }
.materials-source__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:80px; }
.materials-source__grid article { background:white; padding-bottom:28px; }
.materials-source__grid figure { margin:0 0 26px; aspect-ratio:4/3; overflow:hidden; }
.materials-source__grid img { width:100%; height:100%; object-fit:cover; display:block; }
.materials-source__grid article>span,.materials-source__grid article>h3,.materials-source__grid article>p { margin-left:26px; margin-right:26px; }
.materials-source__bottom { max-width:760px; margin:100px 0 0 auto; padding:55px 0 0; border-top:1px solid rgba(32,59,50,.22); }
.materials-next { position:relative; min-height:680px; display:flex; align-items:center; text-decoration:none; color:white; padding:100px max(24px,calc((100vw - 1200px)/2)); }
.materials-next__media,.materials-next__veil { position:absolute; inset:0; }
.materials-next__media img { width:100%; height:100%; object-fit:cover; }
.materials-next__veil { background:linear-gradient(90deg,rgba(17,39,31,.84),rgba(17,39,31,.2)); }
.materials-next__content { position:relative; z-index:2; max-width:720px; }
.materials-next__content>p:first-child { font-size:11px; letter-spacing:.25em; }
.materials-next__content>p:not(:first-child) { max-width:610px; margin:35px 0 0; line-height:2; color:#e5ece8; }
.materials-next__link { display:inline-flex; gap:25px; align-items:center; margin-top:42px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.6); }
@keyframes materialsZoom { from {transform:scale(1.08)} to {transform:scale(1.02)} }
@keyframes materialsScroll { 0%,100%{transform:scaleY(.3);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} }
@media(max-width:900px){
  .materials-feature__head,.materials-source__head,.materials-variation { grid-template-columns:1fr; gap:45px; }
  .materials-steel-grid,.materials-wood-visual { grid-template-columns:1fr; }
  .materials-steel-grid__main,.materials-wood-visual__large { grid-row:auto; aspect-ratio:16/10; }
  .materials-traits,.materials-woods,.materials-source__grid { grid-template-columns:1fr; }
  .materials-traits article { border-right:0; border-bottom:1px solid rgba(32,59,50,.2); padding:30px 0; }
  .materials-traits article+article { padding-left:0; }
  .materials-join { min-height:680px; }
}
@media(max-width:640px){
  .materials-section,.materials-feature { padding-left:20px; padding-right:20px; }
  .materials-hero { min-height:780px; padding:110px 20px 70px; }
  .materials-hero__copy { font-size:44px; }
  .materials-hero__copy span { white-space:normal; }
  .materials-hero__scroll { display:none; }
  .materials-intro h2,.materials-feature h2,.materials-variation h2,.materials-join h2,.materials-source h2,.materials-next h2 { font-size:38px; line-height:1.55; }
  .materials-intro__lead { font-size:19px; }
  .materials-steel-grid__main,.materials-wood-visual__large { aspect-ratio:4/5; }
  .materials-steel-grid__note { padding:28px 0 0; font-size:17px; }
  .materials-woods article { padding:28px 24px; }
  .materials-join,.materials-next { min-height:720px; padding-left:20px; padding-right:20px; align-items:flex-end; padding-bottom:80px; }
  .materials-join__veil,.materials-next__veil { background:linear-gradient(0deg,rgba(17,39,31,.88),rgba(17,39,31,.25) 78%); }
  .materials-source__bottom { margin-top:70px; }
}
@media(prefers-reduced-motion:reduce){.materials-hero__media img,.materials-hero__scroll i{animation:none}}


/* =========================================================
   CRAFTSMANSHIP typography & process rhythm revision
   2026-07-23
========================================================= */
.craft-intro h2,
.craft-process__head h2,
.craft-thinking__item h2,
.craft-repair__content h2,
.craft-next__content h2 {
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.5;
  letter-spacing: .055em;
}

.craft-intro__lead {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 2;
}

.craft-intro__body,
.craft-process__intro,
.craft-step__body > p:last-child,
.craft-thinking__item > div > p,
.craft-repair__content > div,
.craft-card p {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 2.05;
}

.craft-process__head {
  align-items: center;
}

.craft-step {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(48px, 6vw, 94px);
}

.craft-step figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.craft-step__body {
  padding-left: clamp(58px, 5vw, 78px);
}

.craft-step__body > span {
  top: -12px;
  font-size: clamp(52px, 5vw, 78px);
}

.craft-step__body h3 {
  margin-bottom: 20px;
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.45;
}

.craft-steps--light .craft-step__body > span {
  color: rgba(105, 83, 58, .15);
}
.craft-steps--light .craft-step__en {
  color: #9a7e5d;
}
.craft-steps--light .craft-step__body > p:last-child {
  color: #5f5a52;
}

.craft-steps--assembly {
  margin-top: 0;
}

.craft-wood-feature {
  margin-bottom: clamp(90px, 8vw, 130px);
}

@media (max-width: 900px) {
  .craft-intro h2,
  .craft-process__head h2,
  .craft-thinking__item h2,
  .craft-repair__content h2,
  .craft-next__content h2 {
    font-size: clamp(31px, 6.5vw, 44px);
  }

  .craft-step,
  .craft-step--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .craft-step--reverse figure,
  .craft-step--reverse .craft-step__body {
    grid-column: 1;
    grid-row: auto;
  }

  .craft-step__body {
    padding-left: 58px;
  }
}

@media (max-width: 600px) {
  .craft-intro h2,
  .craft-process__head h2,
  .craft-thinking__item h2,
  .craft-repair__content h2,
  .craft-next__content h2 {
    font-size: clamp(28px, 8.6vw, 38px);
    line-height: 1.55;
  }

  .craft-intro__lead,
  .craft-intro__body,
  .craft-intro__grid p:last-child,
  .craft-process__intro,
  .craft-step__body > p:last-child,
  .craft-thinking__item > div > p,
  .craft-repair__content > div {
    font-size: 15px;
    line-height: 1.95;
  }

  .craft-step__body h3 {
    font-size: 25px;
  }
}


/* =========================================================
   CRAFTSMANSHIP FV scale & rounded image revision
   2026-07-23
========================================================= */
.craft-hero__copy {
  font-size: clamp(38px, 4.25vw, 66px);
  line-height: 1.42;
}

/* Process images 01–12 */
.craft-step figure {
  overflow: hidden;
  border-radius: 14px;
}
.craft-step figure img {
  display: block;
  border-radius: inherit;
}

/* Supporting editorial images */
.craft-process__hero,
.craft-thinking__item figure,
.craft-card figure,
.craft-assembly-visual {
  overflow: hidden;
  border-radius: 14px;
}
.craft-process__hero img,
.craft-thinking__item figure img,
.craft-card figure img,
.craft-assembly-visual img {
  display: block;
  border-radius: inherit;
}

/* Full-bleed background imagery stays square */
.craft-hero__media,
.craft-hero__media img,
.craft-repair,
.craft-repair__media,
.craft-repair__media img,
.craft-next,
.craft-next__media,
.craft-next__media img {
  border-radius: 0;
}

@media (max-width: 760px) {
  .craft-hero__copy {
    font-size: clamp(32px, 9.2vw, 42px);
    line-height: 1.48;
  }
  .craft-step figure,
  .craft-process__hero,
  .craft-thinking__item figure,
  .craft-card figure,
  .craft-assembly-visual {
    border-radius: 10px;
  }
}

/* =========================================================
   MATERIALS layout / typography final revision
   2026-07-23
   Absolute rule: no heading exceeds the top-page product title.
========================================================= */
.materials-page {
  --materials-heading-max: 52px;
}

/* 全見出しの最大サイズを統一 */
.materials-hero__copy,
.materials-intro h2,
.materials-feature h2,
.materials-variation h2,
.materials-join h2,
.materials-source h2,
.materials-next h2 {
  font-size: clamp(34px, 3.2vw, var(--materials-heading-max));
  line-height: 1.5;
  letter-spacing: .055em;
}

.materials-hero__copy {
  max-width: 660px;
}

/* 導入セクション */
.materials-intro {
  padding-top: clamp(90px, 8vw, 130px);
  padding-bottom: clamp(90px, 8vw, 130px);
}

.materials-intro__inner {
  max-width: 920px;
}

.materials-intro__text {
  width: min(680px, 100%);
  margin: 48px auto 0;
  text-align: left;
  color: #40584f;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 2.05;
}

.materials-intro__text p + p {
  margin-top: 20px;
}

/* 本文サイズ共通 */
.materials-feature__text,
.materials-variation__content > p,
.materials-join__content > div,
.materials-source__intro,
.materials-source__grid p,
.materials-source__bottom p,
.materials-next__content > p:not(:first-child) {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 2.05;
}

.materials-feature__text p + p,
.materials-source__intro p + p,
.materials-join__content > div p + p,
.materials-variation__content > p + p {
  margin-top: 18px;
}

/* ステンレス・木材セクションをコンパクト化 */
.materials-feature {
  padding-top: clamp(90px, 8vw, 130px);
  padding-bottom: clamp(90px, 8vw, 130px);
}

.materials-feature__head {
  grid-template-columns: minmax(0, .95fr) minmax(380px, .75fr);
  gap: clamp(52px, 7vw, 110px);
  margin-bottom: 52px;
}

.materials-steel-grid,
.materials-wood-visual {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-rows: auto auto;
  gap: 22px;
  align-items: start;
}

.materials-steel-grid figure,
.materials-wood-visual figure,
.materials-variation__image,
.materials-source__grid figure {
  border-radius: 14px;
  overflow: hidden;
}

.materials-steel-grid__main,
.materials-wood-visual__large {
  grid-row: auto;
  aspect-ratio: 3 / 2;
}

.materials-steel-grid__sub,
.materials-wood-visual__small {
  aspect-ratio: 3 / 2;
}

.materials-steel-grid__note,
.materials-wood-visual__copy {
  grid-column: 1 / -1;
  width: 100%;
  margin-left: 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(32,59,50,.2);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.95;
}

.materials-traits,
.materials-woods {
  margin-top: 40px;
}

.materials-traits article {
  padding-top: 30px;
  padding-bottom: 10px;
}

.materials-traits h3,
.materials-woods h3,
.materials-source__grid h3,
.materials-source__bottom h3 {
  font-size: clamp(22px, 1.7vw, 27px);
  line-height: 1.55;
}

.materials-traits p,
.materials-woods p {
  font-size: clamp(14px, .98vw, 16px);
  line-height: 1.95;
}

.materials-woods article {
  padding: 30px;
  border-radius: 14px;
}

/* 木目・個体差 */
.materials-variation {
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(50px, 6vw, 88px);
  align-items: center;
  padding-top: clamp(90px, 8vw, 125px);
  padding-bottom: clamp(90px, 8vw, 125px);
}

.materials-variation__content h2 {
  margin-bottom: 34px;
}

.materials-variation__content small {
  font-size: 13px;
  line-height: 1.9;
}

.materials-variation__image {
  max-width: 620px;
  justify-self: end;
}

/* 背景全面写真の見出しも上限内 */
.materials-join__content {
  max-width: 700px;
}

.materials-join__content > div {
  max-width: 600px;
  margin-top: 34px;
}

.materials-join h2 span,
.materials-source h2 span {
  white-space: nowrap;
}

/* 産地セクション */
.materials-source {
  padding-top: clamp(90px, 8vw, 130px);
  padding-bottom: clamp(90px, 8vw, 130px);
}

.materials-source__head {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(380px, .75fr);
  gap: clamp(52px, 7vw, 110px);
  align-items: end;
  margin-bottom: 54px;
}

.materials-source__lead .materials-kicker {
  margin-bottom: 28px;
}

.materials-source__grid {
  margin-top: 0;
  gap: 20px;
}

.materials-source__grid article {
  border-radius: 14px;
  overflow: hidden;
}

.materials-source__grid figure {
  border-radius: 0;
}

.materials-source__bottom {
  width: min(760px, 100%);
  margin: 68px auto 0;
  padding-top: 38px;
}

/* 修理導線 */
.materials-next__content {
  max-width: 680px;
}

@media (max-width: 900px) {
  .materials-feature__head,
  .materials-source__head,
  .materials-variation {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .materials-steel-grid,
  .materials-wood-visual {
    grid-template-columns: 1fr;
  }

  .materials-steel-grid__main,
  .materials-steel-grid__sub,
  .materials-wood-visual__large,
  .materials-wood-visual__small {
    aspect-ratio: 16 / 10;
  }

  .materials-steel-grid__note,
  .materials-wood-visual__copy {
    grid-column: auto;
    width: 100%;
  }

  .materials-variation__image {
    justify-self: stretch;
    max-width: none;
  }

  .materials-join h2 span,
  .materials-source h2 span {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .materials-hero__copy,
  .materials-intro h2,
  .materials-feature h2,
  .materials-variation h2,
  .materials-join h2,
  .materials-source h2,
  .materials-next h2 {
    font-size: clamp(28px, 8.6vw, 38px);
    line-height: 1.55;
  }

  .materials-intro__text,
  .materials-feature__text,
  .materials-variation__content > p,
  .materials-join__content > div,
  .materials-source__intro,
  .materials-source__grid p,
  .materials-source__bottom p,
  .materials-next__content > p:not(:first-child) {
    font-size: 15px;
    line-height: 1.95;
  }

  .materials-steel-grid figure,
  .materials-wood-visual figure,
  .materials-variation__image,
  .materials-source__grid article,
  .materials-woods article {
    border-radius: 10px;
  }

  .materials-traits,
  .materials-woods {
    margin-top: 38px;
  }
}

/* ========================================
   MATERIALS FEATURE HEADING ALIGNMENT
   右側本文の開始位置を日本語大見出しの上端に揃える
======================================== */
@media (min-width: 901px) {
  .materials-feature__head {
    align-items: start;
  }

  .materials-feature__text {
    margin-top: 42px;
  }
}

@media (max-width: 900px) {
  .materials-feature__text {
    margin-top: 0;
  }
}


/* ========================================
   Materials revision 13
   見出し・本文位置／画像サイズ／改行修正
======================================== */
@media (min-width: 901px) {
  .materials-feature__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "kicker kicker"
      "title text";
    column-gap: clamp(52px, 7vw, 110px);
    row-gap: 26px;
    align-items: start;
  }

  .materials-feature__head > .materials-kicker {
    grid-area: kicker;
    margin: 0;
  }

  .materials-feature__title {
    grid-area: title;
  }

  .materials-feature__text {
    grid-area: text;
    align-self: start;
    padding-top: 2px;
  }

  .materials-steel-grid,
  .materials-wood-visual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .materials-steel-grid__main,
  .materials-steel-grid__sub,
  .materials-wood-visual__large,
  .materials-wood-visual__small {
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .materials-variation {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(54px, 6vw, 86px);
  }

  .materials-variation__content h2 {
    font-size: clamp(34px, 3.05vw, 48px);
    line-height: 1.55;
  }

  .materials-variation__content h2 span {
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .materials-feature__head > .materials-kicker {
    margin-bottom: 0;
  }

  .materials-feature__title {
    margin-top: 0;
  }

  .materials-variation__content h2 span {
    white-space: normal;
  }
}

/* ========================================
   Materials revision 15
   FVテキスト左上配置 / ステンレス注釈の中央配置
======================================== */
@media (min-width: 901px) {
  .materials-hero {
    align-items: flex-start;
  }

  .materials-hero__content {
    margin-top: 8px;
  }

  .materials-steel-grid__note {
    min-height: 132px;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .materials-steel-grid__note p {
    margin: 0;
  }

  .materials-traits {
    margin-top: 0;
  }
}

/* ========================================
   Materials revision 16
   FVテキスト位置を指定スクリーンショットに合わせる
======================================== */
@media (min-width: 901px) {
  .materials-hero {
    align-items: flex-start;
    padding-left: clamp(72px, 8vw, 132px);
    padding-right: clamp(72px, 8vw, 132px);
  }

  .materials-hero__content {
    margin-top: 48px;
    max-width: 760px;
  }
}

/* ==========================================================
   PRODUCTS INDEX
========================================================== */
.products-page {
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
}

.products-section {
  padding: clamp(92px, 10vw, 150px) clamp(24px, 6vw, 90px);
}

.products-kicker {
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.products-hero {
  position: relative;
  min-height: min(820px, 100svh);
  padding: calc(var(--header-height) + 54px) clamp(32px, 8vw, 132px) 80px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  color: #fff;
}

.products-hero__media,
.products-hero__veil {
  position: absolute;
  inset: 0;
}

.products-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.products-hero__veil {
  background: linear-gradient(90deg, rgba(24, 38, 32, .72) 0%, rgba(24, 38, 32, .40) 48%, rgba(24, 38, 32, .08) 100%);
}

.products-hero__content {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  margin-top: 42px;
}

.products-hero h1 {
  margin-top: 8px;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 400;
  letter-spacing: .16em;
}

.products-hero__copy {
  margin-top: clamp(34px, 5vw, 72px);
  font-size: clamp(38px, 4.55vw, 68px);
  line-height: 1.55;
  letter-spacing: .08em;
}

.products-hero__copy span,
.products-intro h2 span,
.products-standard h2 span,
.products-repair h2 span,
.products-contact h2 span {
  display: block;
}

.products-hero__lead {
  max-width: 580px;
  margin-top: 30px;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 2.05;
  letter-spacing: .04em;
}

.products-hero__scroll {
  position: absolute;
  z-index: 1;
  right: clamp(25px, 4vw, 58px);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .25em;
  writing-mode: vertical-rl;
}

.products-hero__scroll i {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,.72);
}

.products-intro {
  background: rgba(255, 253, 249, .73);
}

.products-intro__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(210px, .64fr) minmax(0, 1.36fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}

.products-intro__body {
  max-width: 860px;
  margin-left: clamp(-72px, -4.5vw, -48px);
}

.products-intro h2,
.products-standard h2,
.products-repair h2,
.products-contact h2 {
  font-size: clamp(34px, 3.5vw, 52px);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: .07em;
}

.products-intro__text {
  max-width: 780px;
  margin-top: 38px;
  display: grid;
  gap: 18px;
  font-size: 16px;
  line-height: 2.1;
}

.products-lineup {
  padding: clamp(95px, 11vw, 165px) clamp(24px, 6vw, 90px);
}

.products-lineup__head {
  max-width: var(--content);
  margin: 0 auto clamp(72px, 8vw, 120px);
}

.products-lineup__head h2 {
  margin-top: 13px;
  font-size: clamp(35px, 3.55vw, 52px);
  font-weight: 400;
  letter-spacing: .08em;
}

.products-lineup__head > p:last-child {
  max-width: 650px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 2;
}

.products-list {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  gap: clamp(92px, 10vw, 150px);
}

.product-row {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  gap: clamp(50px, 7vw, 104px);
  align-items: center;
}

.product-row--reverse {
  grid-template-columns: minmax(330px, .88fr) minmax(0, 1.12fr);
}

.product-row--reverse .product-row__image {
  order: 2;
}

.product-row--reverse .product-row__content {
  order: 1;
}

.product-row__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
  background: var(--sage-soft);
}

.product-row__image::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(46,69,60,.07);
  border-radius: inherit;
  pointer-events: none;
}

.product-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.product-row__image--normalized img {
  object-fit: contain;
  object-position: center;
  transform: scale(var(--product-scale, 1));
}

/* 片手鍋の見え方を基準に、5商品の占有率を統一 */
.product-row__image--kettle { --product-scale: .75; }
.product-row__image--saucepan { --product-scale: 1; }
.product-row__image--casserole { --product-scale: .79; }
.product-row__image--knife { --product-scale: 1.31; }
.product-row__image--spoon { --product-scale: 1.12; }

.product-row:hover .product-row__image--normalized img {
  filter: brightness(1.02);
}

.product-row--featured .product-row__image {
  aspect-ratio: 4 / 3;
}

.product-row__content {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.product-row__number {
  position: absolute;
  right: 0;
  top: 20px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-soft);
}

.product-row__en {
  padding-right: 48px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .19em;
  color: var(--ink-soft);
}

.product-row h3 {
  margin-top: 14px;
  font-size: clamp(27px, 2.35vw, 36px);
  font-weight: 400;
  letter-spacing: .08em;
}

.product-row__copy {
  margin-top: 27px;
  font-size: 15px;
  line-height: 2.05;
}

.product-row__price {
  margin-top: 25px;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.product-row__price small {
  font-size: 11px;
}

.products-button {
  width: fit-content;
  min-width: 190px;
  margin-top: 30px;
  padding: 14px 17px 13px 20px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  border: 1px solid rgba(46,69,60,.46);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .08em;
  transition: color .3s, background .3s, border-color .3s;
}

.products-button i {
  font-family: Arial, sans-serif;
  font-style: normal;
  font-size: 17px;
  transition: transform .3s var(--ease);
}

.products-button:hover {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}

.products-button:hover i {
  transform: translateX(4px);
}

.products-button--pending {
  opacity: .48;
  cursor: default;
}

.products-button--pending:hover {
  color: inherit;
  border-color: rgba(46,69,60,.46);
  background: transparent;
}

.products-button--pending:hover i {
  transform: none;
}

.products-standard {
  background: rgba(226, 240, 219, .48);
}

.products-standard__head,
.products-standard__grid {
  max-width: var(--content);
  margin-inline: auto;
}

.products-standard__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
  grid-template-areas: "kicker kicker" "title lead";
  column-gap: clamp(50px, 7vw, 105px);
  row-gap: 25px;
  align-items: start;
}

.products-standard__head .products-kicker { grid-area: kicker; }
.products-standard__head h2 { grid-area: title; }
.products-standard__head > p:last-child {
  grid-area: lead;
  padding-top: 10px;
  font-size: 15px;
  line-height: 2.05;
}

.products-standard__grid {
  margin-top: clamp(58px, 7vw, 94px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.standard-card {
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.73);
  box-shadow: 0 18px 42px rgba(46,69,60,.05);
}

.standard-card figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.standard-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.standard-card:hover figure img { transform: scale(1.03); }

.standard-card__body {
  padding: clamp(28px, 3vw, 40px);
}

.standard-card__num {
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-soft);
}

.standard-card h3 {
  margin-top: 16px;
  font-size: clamp(23px, 2vw, 29px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .06em;
}

.standard-card__body > p:not(.standard-card__num) {
  margin-top: 22px;
  font-size: 14px;
  line-height: 2;
}

.standard-card a {
  margin-top: 28px;
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(46,69,60,.38);
  font-size: 12px;
  letter-spacing: .07em;
}

.standard-card a i {
  font-family: Arial, sans-serif;
  font-style: normal;
  transition: transform .3s var(--ease);
}

.standard-card a:hover i { transform: translateX(4px); }

.products-repair {
  position: relative;
  min-height: 740px;
  padding: clamp(100px, 11vw, 160px) clamp(24px, 8vw, 132px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.products-repair__media,
.products-repair__veil {
  position: absolute;
  inset: 0;
}

.products-repair__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.products-repair__veil {
  background: linear-gradient(90deg, rgba(24,38,32,.86) 0%, rgba(24,38,32,.70) 50%, rgba(24,38,32,.27) 100%);
}

.products-repair__content {
  position: relative;
  z-index: 1;
  max-width: 690px;
}

.products-repair h2 {
  margin-top: 18px;
}

.products-repair__text {
  margin-top: 34px;
  display: grid;
  gap: 15px;
  font-size: 15px;
  line-height: 2.05;
}

.products-button--light {
  color: #fff;
  border-color: rgba(255,255,255,.65);
}

.products-button--light:hover {
  color: var(--ink);
  border-color: #fff;
  background: #fff;
}

.products-contact {
  text-align: center;
  background: rgba(255,253,249,.8);
}

.products-contact__inner {
  max-width: 820px;
  margin: 0 auto;
}

.products-contact h2 {
  margin-top: 16px;
}

.products-contact__inner > p:not(.products-kicker) {
  max-width: 670px;
  margin: 30px auto 0;
  font-size: 15px;
  line-height: 2;
}

.products-contact__inner > p + p {
  margin-top: 5px;
}

.products-contact .products-button {
  margin-top: 38px;
}

@media (max-width: 960px) {
  .products-hero {
    min-height: 760px;
    padding-top: calc(var(--header-height) + 54px);
  }

  .products-intro__inner,
  .products-standard__head {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: 34px;
  }

  .products-intro__body {
    margin-left: 0;
    max-width: 100%;
  }

  .products-standard__head .products-kicker,
  .products-standard__head h2,
  .products-standard__head > p:last-child {
    grid-area: auto;
  }

  .product-row {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .product-row--reverse .product-row__image,
  .product-row--reverse .product-row__content {
    order: initial;
  }

  .products-standard__grid {
    grid-template-columns: 1fr;
  }

  .standard-card {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  }

  .standard-card figure {
    height: 100%;
    min-height: 390px;
  }
}

@media (max-width: 640px) {
  .products-section,
  .products-lineup {
    padding-left: 20px;
    padding-right: 20px;
  }

  .products-hero {
    min-height: 720px;
    padding: calc(var(--header-height) + 42px) 24px 70px;
  }

  .products-hero__media img {
    object-position: 58% center;
  }

  .products-hero__veil {
    background: linear-gradient(90deg, rgba(24,38,32,.78) 0%, rgba(24,38,32,.55) 66%, rgba(24,38,32,.22) 100%);
  }

  .products-hero__content {
    margin-top: 22px;
  }

  .products-hero__copy,
  .products-intro h2,
  .products-standard h2,
  .products-repair h2,
  .products-contact h2 {
    font-size: clamp(28px, 8.5vw, 38px);
    line-height: 1.58;
  }

  .products-hero__lead,
  .products-intro__text,
  .products-lineup__head > p:last-child,
  .product-row__copy,
  .products-standard__head > p:last-child,
  .products-repair__text,
  .products-contact__inner > p:not(.products-kicker) {
    font-size: 14px;
    line-height: 2;
  }

  .products-hero__scroll {
    display: none;
  }

  .product-row__image,
  .product-row--featured .product-row__image {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  .product-row h3 {
    font-size: 27px;
  }

  .product-row__content {
    padding-top: 22px;
  }

  .products-button {
    min-width: 178px;
  }

  .standard-card {
    display: block;
    border-radius: 12px;
  }

  .standard-card figure {
    min-height: 0;
    height: auto;
  }

  .products-repair {
    min-height: auto;
    padding: 105px 22px;
  }

  .products-repair__veil {
    background: rgba(24,38,32,.72);
  }
}

/* ========================================================
   REPAIR & CARE / MAINTENANCE
======================================================== */
.repair-page { background:#fbfaf6; color:var(--ink); }
.repair-section { padding:clamp(96px,10vw,156px) clamp(24px,6vw,90px); }
.repair-kicker { font-family:Arial,sans-serif; font-size:10px; line-height:1.7; letter-spacing:.22em; color:var(--ink-soft); }
.repair-hero { position:relative; min-height:min(900px,100svh); display:flex; align-items:center; overflow:hidden; color:#fff; padding:calc(var(--header-height) + 55px) clamp(28px,8vw,132px) 90px; }
.repair-hero__media,.repair-hero__veil { position:absolute; inset:0; }
.repair-hero__media img { width:100%; height:100%; object-fit:cover; object-position:62% center; transform:scale(1.02); }
.repair-hero__veil { background:linear-gradient(90deg,rgba(20,34,29,.84) 0%,rgba(20,34,29,.67) 40%,rgba(20,34,29,.24) 76%,rgba(20,34,29,.08) 100%); }
.repair-hero__content { position:relative; z-index:1; width:min(690px,58vw); }
.repair-hero .repair-kicker { color:rgba(255,255,255,.78); }
.repair-hero h1,.repair-approach h2,.repair-menu__head h2,.repair-flow__head h2,.repair-price__head h2,.repair-care h2,.repair-contact h2 { margin-top:16px; font-size:clamp(30px,2.8vw,44px); font-weight:400; line-height:1.55; letter-spacing:.06em; }
.repair-hero h1 span,.repair-approach h2 span,.repair-menu__head h2 span,.repair-care h2 span,.repair-contact h2 span { display:block; }

@media (min-width: 961px) {
  .repair-approach h2 span,
  .repair-care h2 span {
    white-space: nowrap;
  }
}

.repair-hero__lead { margin-top:32px; font-size:clamp(18px,1.7vw,24px); line-height:1.9; letter-spacing:.08em; }
.repair-hero__text { max-width:570px; margin-top:20px; font-size:15px; line-height:2.05; letter-spacing:.04em; }
.repair-hero__service { margin-top:34px; display:flex; flex-direction:column; gap:7px; }
.repair-hero__service strong { font-size:15px; font-weight:400; letter-spacing:.12em; }
.repair-hero__service span { font-family:Arial,sans-serif; font-size:9px; letter-spacing:.2em; color:rgba(255,255,255,.68); }
.repair-hero__scroll { position:absolute; z-index:1; right:clamp(25px,4vw,58px); bottom:34px; display:flex; align-items:center; gap:12px; font:9px Arial,sans-serif; letter-spacing:.25em; writing-mode:vertical-rl; }
.repair-hero__scroll i { width:1px; height:52px; background:rgba(255,255,255,.72); }
.repair-approach { background:rgba(255,253,249,.76); }
.repair-approach__inner,.repair-care__inner { max-width:var(--content); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,1fr); gap:clamp(48px,6vw,96px); align-items:center; }
.repair-prose { margin-top:38px; display:grid; gap:18px; font-size:15px; line-height:2.1; }
.repair-approach__media,.repair-care__media { margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:14px; background:var(--sage-soft); }
.repair-approach__media img,.repair-care__media img { width:100%; height:100%; object-fit:cover; display:block; }
.repair-menu { background:#f3f4ee; }
.repair-menu__head,.repair-flow__head,.repair-price__inner,.repair-menu__grid,.repair-flow__list { max-width:var(--content); margin-left:auto; margin-right:auto; }
.repair-menu__head,.repair-flow__head { margin-bottom:clamp(58px,7vw,96px); }
.repair-menu__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,38px); }
.repair-menu-card { overflow:hidden; border-radius:14px; background:rgba(255,255,255,.82); box-shadow:inset 0 0 0 1px rgba(46,69,60,.07); }
.repair-menu-card figure { margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--sage-soft); }
.repair-menu-card figure img { width:100%; height:100%; object-fit:cover; display:block; }
.repair-menu-card__body { padding:30px 28px 34px; }
.repair-menu-card__num { font:9px Arial,sans-serif; letter-spacing:.18em; color:var(--ink-soft); }
.repair-menu-card h3 { margin-top:14px; font-size:clamp(22px,2vw,28px); font-weight:400; line-height:1.55; letter-spacing:.07em; }
.repair-menu-card__body>p:last-child { margin-top:18px; font-size:14px; line-height:2; }
.repair-flow { background:rgba(255,253,249,.76); }
.repair-flow__list { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding:0; list-style:none; }
.repair-flow__list::before { content:""; position:absolute; left:7%; right:7%; top:18px; height:1px; background:rgba(46,69,60,.18); }
.repair-flow__list li { position:relative; padding:54px clamp(16px,2vw,28px) 0; border-left:1px solid rgba(46,69,60,.12); }
.repair-flow__list li:last-child { border-right:1px solid rgba(46,69,60,.12); }
.repair-flow__list li::before { content:""; position:absolute; z-index:1; top:11px; left:50%; width:15px; height:15px; border-radius:50%; transform:translateX(-50%); background:#839b8e; box-shadow:0 0 0 7px #fbfaf6; }
.repair-flow__list span { font:9px Arial,sans-serif; letter-spacing:.18em; color:var(--ink-soft); }
.repair-flow__list h3 { margin-top:13px; font-size:19px; font-weight:400; line-height:1.6; letter-spacing:.06em; }
.repair-flow__list p { margin-top:14px; font-size:13px; line-height:1.9; }
.repair-price { background:#eef2eb; }
.repair-price__inner {
  max-width: 1040px;
  display: block;
  text-align: center;
}
.repair-price__head {
  max-width: 760px;
  margin: 0 auto clamp(42px,5vw,64px);
}
.repair-price__head h2 {
  white-space: nowrap;
}
.repair-table-wrap {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
.repair-table { width:100%; max-width:960px; margin:0 auto; border-collapse:collapse; font-size:14px; }
.repair-table th,.repair-table td { padding:20px 18px; border-bottom:1px solid rgba(46,69,60,.16); text-align:left; font-weight:400; }
.repair-table th { background:rgba(131,155,142,.14); font-size:12px; letter-spacing:.08em; }
.repair-table th:nth-child(n+2),.repair-table td:nth-child(n+2) { text-align:right; white-space:nowrap; }
.repair-price__note { max-width:960px; margin:20px auto 0; font-size:12px; line-height:1.9; color:var(--ink-soft); text-align:left; }
.repair-care { background:rgba(255,253,249,.82); }
.repair-care__inner { grid-template-columns:minmax(420px,1fr) minmax(0,1fr); }
.repair-care__items { margin-top:34px; border-top:1px solid rgba(46,69,60,.18); }
.repair-care__items article { display:grid; grid-template-columns:96px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid rgba(46,69,60,.18); }
.repair-care__items h3 { font-size:15px; font-weight:400; letter-spacing:.08em; }
.repair-care__items p { font-size:13px; line-height:1.95; }
.repair-contact { text-align:center; background:#dfe9e1; }
.repair-contact__inner { max-width:820px; margin:0 auto; }
.repair-contact__inner>p:not(.repair-kicker) { max-width:650px; margin:28px auto 0; font-size:15px; line-height:2; }
.repair-button { min-width:238px; min-height:58px; margin-top:36px; padding:0 24px; display:inline-flex; align-items:center; justify-content:space-between; gap:26px; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; font-size:13px; letter-spacing:.06em; box-shadow:0 0 0 rgba(46,69,60,0); transition:background .35s ease,color .35s ease,transform .35s ease,box-shadow .35s ease; }
.repair-button:hover,.repair-button:focus-visible { background:#fff; color:var(--ink); transform:translateY(-3px); box-shadow:0 10px 24px rgba(46,69,60,.16); }
.repair-button i { font-style:normal; transition:transform .3s ease; }
.repair-button:hover i,.repair-button:focus-visible i { transform:translateX(6px); }
.maintenance-page { min-height:100svh; background:linear-gradient(145deg,#f6f5ef 0%,#e2ece4 100%); }
.maintenance-main { min-height:100svh; display:grid; place-items:center; padding:calc(var(--header-height) + 70px) 24px 70px; }
.maintenance-panel { width:min(820px,100%); padding:clamp(56px,8vw,100px) clamp(30px,7vw,88px); text-align:center; border-radius:22px; background:rgba(255,255,255,.7); box-shadow:0 20px 70px rgba(46,69,60,.08),inset 0 0 0 1px rgba(46,69,60,.08); }
.maintenance-panel h1 { margin-top:18px; font-size:clamp(32px,3.8vw,50px); font-weight:400; line-height:1.55; letter-spacing:.07em; }
.maintenance-panel>p:not(.repair-kicker) { margin-top:26px; font-size:15px; line-height:2; }
.maintenance-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.repair-button--ghost { background:rgba(255,255,255,.72); color:var(--ink); }
@media (max-width:1080px){
  .repair-flow__list {
    --repair-flow-axis: 18px;
    grid-template-columns:1fr;
    padding-left:0;
  }
  .repair-flow__list::before {
    top:0;
    bottom:0;
    left:var(--repair-flow-axis);
    right:auto;
    width:1px;
    height:auto;
  }
  .repair-flow__list li,.repair-flow__list li:last-child {
    padding:0 0 34px 56px;
    border:0;
  }
  .repair-flow__list li::before {
    top:3px;
    left:var(--repair-flow-axis);
    transform:translateX(-50%);
  }
}
@media (max-width:900px){
  .repair-hero__content { width:min(650px,82vw); }
  .repair-approach__inner,.repair-care__inner,.repair-price__inner { grid-template-columns:1fr; gap:44px; }
  .repair-menu__grid { grid-template-columns:1fr; }
  .repair-menu-card { display:block; }
  .repair-menu-card figure { height:auto; min-height:0; aspect-ratio:4/3; }
  .repair-menu-card__body { padding:30px 28px 34px; }
}
@media (max-width:640px){
  .repair-section { padding:92px 20px; }
  .repair-hero { min-height:720px; padding:calc(var(--header-height) + 44px) 24px 72px; }
  .repair-hero__media img { object-position:66% center; }
  .repair-hero__veil { background:linear-gradient(90deg,rgba(20,34,29,.86) 0%,rgba(20,34,29,.65) 72%,rgba(20,34,29,.28) 100%); }
  .repair-hero__content { width:100%; }
  .repair-hero h1,.repair-approach h2,.repair-menu__head h2,.repair-flow__head h2,.repair-price__head h2,.repair-care h2,.repair-contact h2 { font-size:clamp(26px,7.5vw,34px); line-height:1.5; }
  .repair-price__head h2 { white-space: normal; }
  .repair-hero__lead { font-size:18px; }
  .repair-hero__text,.repair-prose,.repair-contact__inner>p:not(.repair-kicker) { font-size:14px; line-height:2; }
  .repair-hero__scroll { display:none; }
  .repair-approach__media,.repair-care__media,.repair-menu-card { border-radius:10px; }
  .repair-menu-card { display:block; }
  .repair-menu-card figure { min-height:0; height:auto; }
  .repair-table,.repair-table tbody,.repair-table tr,.repair-table td { display:block; width:100%; }
  .repair-table thead { display:none; }
  .repair-table tr { padding:18px 0; border-bottom:1px solid rgba(46,69,60,.18); }
  .repair-table td { padding:4px 0; border:0; text-align:left!important; white-space:normal!important; }
  .repair-table td:first-child { margin-bottom:7px; font-size:15px; }
  .repair-table td:nth-child(2)::before { content:"費用："; color:var(--ink-soft); }
  .repair-table td:nth-child(3)::before { content:"期間："; color:var(--ink-soft); }
  .repair-care__items article { grid-template-columns:1fr; gap:8px; }
  .maintenance-panel { padding:58px 24px; border-radius:14px; }
  .maintenance-actions { display:grid; }
  .maintenance-actions .repair-button { width:100%; margin-top:12px; }
}

/* ==========================================================
   PEOPLE PAGE
   2026-07-26
========================================================== */
.people-page {
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  background-repeat: repeat;
}

.people-page main {
  overflow: hidden;
}

.people-section {
  position: relative;
  padding: clamp(92px, 10vw, 148px) clamp(22px, 5vw, 72px);
}

.people-label,
.people-eyebrow {
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .24em;
}

.people-label {
  color: var(--sage-deep);
}

.people-body-copy {
  display: grid;
  gap: 17px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2.05;
}

/* Hero */
.people-hero {
  position: relative;
  min-height: clamp(780px, 58vw, 1040px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: #b6b7af;
}

.people-hero__media,
.people-hero__veil {
  position: absolute;
  inset: 0;
}

.people-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.people-hero__veil {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(24, 41, 34, .62) 0%, rgba(24, 41, 34, .24) 48%, rgba(24, 41, 34, .04) 76%),
    linear-gradient(0deg, rgba(24, 41, 34, .38) 0%, rgba(24, 41, 34, 0) 56%);
}

.people-hero__content {
  position: relative;
  z-index: 2;
  width: min(100%, var(--content));
  margin: 0 auto;
  padding: calc(var(--header-height) + 70px) 0 clamp(74px, 9vw, 118px);
  color: #fff;
  text-shadow: 0 2px 18px rgba(21, 35, 29, .18);
}

.people-eyebrow {
  margin-bottom: 18px;
  color: rgba(255,255,255,.78);
}

.people-hero h1 {
  font-size: clamp(34px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .12em;
}

.people-hero__lead {
  margin-top: 30px;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 2;
  letter-spacing: .08em;
}

.people-hero__scroll {
  position: absolute;
  z-index: 2;
  right: clamp(26px, 4vw, 64px);
  bottom: 40px;
  display: grid;
  justify-items: center;
  gap: 12px;
  color: rgba(255,255,255,.74);
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .2em;
}

.people-hero__scroll i {
  width: 1px;
  height: 52px;
  display: block;
  background: linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,0));
  transform-origin: top;
  animation: people-scroll-line 2.2s ease-in-out infinite;
}

@keyframes people-scroll-line {
  0%, 100% { transform: scaleY(.35); opacity: .45; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Introduction */
.people-intro {
  background: rgba(255,253,249,.64);
}

.people-intro__inner {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(420px, 1.16fr);
  align-items: center;
  gap: clamp(66px, 8vw, 112px);
}

.people-intro__copy h2,
.people-connection__head h2,
.people-recruit__content h2 {
  margin-top: 18px;
  font-size: clamp(29px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .07em;
}

.people-intro__copy .people-body-copy {
  margin-top: 34px;
}

.people-intro__visual {
  position: relative;
  margin: 0;
}


.people-intro__visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(46, 69, 60, .08);
}


/* Profile common */
.people-profile {
  background: rgba(255,255,255,.34);
}

.people-profile--planning {
  background: rgba(232, 241, 226, .56);
}

.people-profile--quality {
  background: rgba(250,248,242,.72);
}

.people-profile__inner {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(70px, 8vw, 124px);
}

.people-profile--reverse .people-profile__portrait {
  order: 2;
  margin-left: auto;
}

.people-profile--reverse .people-profile__content {
  order: 1;
}

.people-profile__portrait {
  position: relative;
  width: min(100%, 560px);
  margin: 0;
}


.people-profile__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 22px 48px rgba(46, 69, 60, .08);
}


.people-profile__head {
  padding-bottom: 27px;
  border-bottom: 1px solid var(--line);
}

.people-profile__department {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: .06em;
}

.people-profile__head h2 {
  margin-top: 10px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .1em;
}

.people-profile__roman {
  margin-top: 8px;
  color: var(--sage-deep);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .2em;
}

.people-profile__meta {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 11px;
}

.people-profile__content > h3 {
  margin-top: 32px;
  font-size: clamp(22px, 2.3vw, 31px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .06em;
}

.people-profile__content > .people-body-copy {
  margin-top: 28px;
}

.people-quote {
  position: relative;
  margin: 35px 0 0;
  padding: 25px 28px 25px 41px;
  border: 0;
  background: rgba(233, 241, 228, .62);
  color: var(--ink);
}

.people-profile--planning .people-quote {
  background: rgba(255,255,255,.65);
}

.people-quote::before {
  content: "“";
  position: absolute;
  top: -7px;
  left: 13px;
  color: var(--sage-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 46px;
  line-height: 1;
  opacity: .7;
}

.people-quote p {
  font-size: 13px;
  line-height: 2;
}

.people-task-list {
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
}

.people-task-list div {
  padding: 16px 0;
  display: grid;
  grid-template-columns: 122px 1fr;
  gap: 22px;
  border-bottom: 1px solid var(--line);
}

.people-task-list dt {
  color: var(--sage-deep);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .08em;
}

.people-task-list dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.8;
}

/* Quality gallery */
.people-profile__gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.people-profile__gallery .people-profile__portrait--main {
  grid-column: 1 / -1;
}

.people-profile__detail {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #e9e7e1;
}

.people-profile__detail img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .65s var(--ease);
}

.people-profile__detail:hover img {
  transform: scale(1.025);
}

/* Work connection */
.people-connection {
  background: #eaf2e5;
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
}

.people-connection__head {
  width: min(100%, 680px);
  margin: 0 auto;
  text-align: center;
}

.people-connection__head > p:last-child {
  margin-top: 23px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 2;
}

.people-connection__steps {
  width: min(100%, 1260px);
  margin: 68px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr) 62px minmax(0, 1fr);
  align-items: center;
  list-style: none;
}

.people-step {
  position: relative;
  min-height: 330px;
  padding: 38px 31px 34px;
  border: 1px solid rgba(46,69,60,.12);
  border-radius: 48% 48% 22px 22px / 20% 20% 22px 22px;
  background: rgba(255,255,255,.68);
  text-align: center;
  box-shadow: 0 18px 38px rgba(46,69,60,.04);
}

.people-step-arrow {
  height: 100%;
  min-height: 330px;
  display: grid;
  place-items: center;
  color: rgba(89,112,98,.78);
  list-style: none;
}

.people-step-arrow span {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.people-step__number {
  display: block;
  min-width: 2.6ch;
  margin: 0 auto;
  color: rgba(132,154,135,.36);
  font-family: Arial, sans-serif;
  font-size: 42px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
}

.people-step__en {
  margin-top: 15px;
  color: var(--sage-deep);
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .2em;
}

.people-step h3 {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .08em;
}

.people-step strong {
  margin-top: 20px;
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
}

.people-step > p:last-child {
  margin-top: 17px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.9;
}

/* Recruit CTA */
.people-recruit {
  background: rgba(255,253,249,.7);
}

.people-recruit__inner {
  width: min(100%, 1160px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(480px, 1.14fr) minmax(0, .86fr);
  align-items: center;
  gap: clamp(58px, 7vw, 100px);
}

.people-recruit__visual {
  position: relative;
  margin: 0;
}


.people-recruit__visual img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(46, 69, 60, .08);
}

.people-recruit__content .people-body-copy {
  margin-top: 28px;
}

.people-button {
  width: min(100%, 310px);
  margin-top: 36px;
  padding: 16px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  letter-spacing: .05em;
  transition: background .35s ease, color .35s ease, transform .35s var(--ease);
}

.people-button:hover {
  background: transparent;
  color: var(--ink);
  transform: translateY(-2px);
}

/* Tablet */
@media (max-width: 980px) {
  .people-hero {
    min-height: clamp(720px, 78vw, 840px);
  }

  .people-hero__content {
    padding-inline: 22px;
  }

  .people-intro__inner,
  .people-profile__inner,
  .people-recruit__inner {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .people-intro__visual {
    width: min(100%, 720px);
    margin-left: auto;
  }

  .people-profile__portrait {
    width: min(100%, 620px);
  }

  .people-profile--reverse .people-profile__portrait,
  .people-profile--reverse .people-profile__content {
    order: initial;
  }

  .people-profile--reverse .people-profile__portrait {
    margin-left: auto;
  }

  .people-profile__content {
    width: min(100%, 720px);
  }

  .people-profile--reverse .people-profile__content {
    margin-left: auto;
  }

  .people-connection__steps {
    width: min(100%, 940px);
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
  }

  .people-step {
    padding-inline: 22px;
  }

  .people-step-arrow span {
    font-size: 26px;
  }

  .people-recruit__visual {
    width: min(100%, 760px);
  }

  .people-recruit__content {
    width: min(100%, 680px);
    margin-left: auto;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .people-section {
    padding: 84px 20px;
  }

  .people-hero {
    min-height: 670px;
  }

  .people-hero__media img {
    object-position: 52% 12%;
  }

  .people-hero__veil {
    background:
      linear-gradient(0deg, rgba(24, 41, 34, .68) 0%, rgba(24, 41, 34, .18) 69%),
      linear-gradient(90deg, rgba(24, 41, 34, .18), rgba(24, 41, 34, .02));
  }

  .people-hero__content {
    padding: calc(var(--header-height) + 54px) 20px 72px;
  }

  .people-hero h1 {
    font-size: 34px;
  }

  .people-hero__lead {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.9;
  }

  .people-hero__scroll {
    display: none;
  }

  .people-intro__inner,
  .people-profile__inner,
  .people-recruit__inner {
    gap: 42px;
  }

  .people-intro__copy h2,
  .people-connection__head h2,
  .people-recruit__content h2 {
    font-size: 30px;
    line-height: 1.65;
  }

  .people-intro__copy .people-body-copy,
  .people-recruit__content .people-body-copy {
    margin-top: 25px;
  }

  .people-intro__visual img {
    border-radius: 10px;
  }

  .people-profile__portrait img {
    border-radius: 10px;
  }

  
  .people-profile__head {
    padding-bottom: 22px;
  }

  .people-profile__head h2 {
    font-size: 30px;
  }

  .people-profile__content > h3 {
    margin-top: 27px;
    font-size: 23px;
    line-height: 1.75;
  }

  .people-profile__content > .people-body-copy {
    margin-top: 23px;
  }

  .people-quote {
    margin-top: 28px;
    padding: 23px 21px 23px 34px;
  }

  .people-task-list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .people-profile__gallery {
    gap: 10px;
  }

  .people-connection__steps {
    margin-top: 46px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .people-step {
    min-height: 0;
    padding: 30px 25px;
    border-radius: 90px 90px 18px 18px / 45px 45px 18px 18px;
  }

  .people-step-arrow {
    min-height: 46px;
    height: 46px;
  }

  .people-step-arrow span {
    font-size: 0;
  }

  .people-step-arrow span::before {
    content: "↓";
    font-size: 22px;
  }

  .people-step__number {
    font-size: 35px;
  }

  .people-step h3 {
    font-size: 22px;
  }

  .people-recruit__visual img {
    border-radius: 10px;
  }

  .people-button {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 420px) {
  .people-hero {
    min-height: 620px;
  }

  .people-hero__lead br,
  .people-profile__content > h3 br,
  .people-quote br {
    display: none;
  }

  .people-body-copy {
    font-size: 12px;
  }

  .people-profile__gallery {
    grid-template-columns: 1fr;
  }

  .people-profile__gallery .people-profile__portrait--main {
    grid-column: auto;
  }

  .people-profile__detail img {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .people-hero__scroll i {
    animation: none;
  }
}

/* ==========================================================
   PEOPLE PAGE - vertical spacing refinement
   2026-07-26
========================================================== */
.people-intro {
  padding-top: clamp(76px, 7vw, 104px);
  padding-bottom: clamp(76px, 7vw, 104px);
}

.people-profile {
  padding-top: clamp(82px, 7.5vw, 112px);
  padding-bottom: clamp(82px, 7.5vw, 112px);
}

.people-connection {
  padding-top: clamp(78px, 7vw, 104px);
  padding-bottom: clamp(82px, 7.5vw, 110px);
}

.people-connection__steps {
  width: min(100%, 1120px);
  margin-top: 52px;
  gap: 24px;
}

.people-step {
  min-height: 308px;
  padding: 34px 34px 32px;
}

.people-recruit {
  padding-top: clamp(78px, 7vw, 104px);
  padding-bottom: clamp(82px, 7.5vw, 112px);
}

.people-recruit__inner {
  width: min(100%, 1180px);
  gap: clamp(48px, 6vw, 82px);
}

.people-recruit__visual {
  width: 103%;
}

@media (max-width: 900px) {
  .people-intro,
  .people-profile,
  .people-connection,
  .people-recruit {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .people-connection__steps {
    margin-top: 44px;
  }

  .people-recruit__visual {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .people-intro,
  .people-profile,
  .people-connection,
  .people-recruit {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .people-connection__steps {
    margin-top: 36px;
  }
}

/* =========================================================
   RECRUIT PAGE
========================================================= */
.recruit-page { color: #24342d; }
.recruit-section { padding: clamp(88px, 10vw, 150px) 6vw; }
.recruit-label,
.recruit-kicker { margin: 0 0 18px; color: #718779; font-size: 12px; letter-spacing: .22em; font-weight: 700; }
.recruit-page h2 { margin: 0; font-size: clamp(32px, 4vw, 58px); line-height: 1.5; letter-spacing: .06em; font-weight: 500; }
.recruit-page p { line-height: 2.15; }
.recruit-hero { position: relative; min-height: 92svh; overflow: hidden; display: flex; align-items: flex-end; border-radius: 0 0 44px 44px; }
.recruit-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.recruit-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,42,33,.7) 0%, rgba(20,42,33,.28) 55%, rgba(20,42,33,.08) 100%), linear-gradient(0deg, rgba(12,27,21,.35), transparent 50%); }
.recruit-hero__content { position: relative; z-index: 1; padding: 0 8vw 12vh; color: #fff; }
.recruit-hero__content .recruit-kicker { color: rgba(255,255,255,.78); }
.recruit-hero__content h1 { margin: 0 0 24px; font-size: clamp(48px, 7vw, 94px); line-height: 1.08; letter-spacing: .1em; font-weight: 500; }
.recruit-hero__content > p:last-child { margin: 0; font-size: clamp(20px, 2.3vw, 34px); line-height: 1.7; letter-spacing: .1em; }
.recruit-hero__scroll { position: absolute; z-index: 2; right: 4vw; bottom: 7vh; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.75); writing-mode: vertical-rl; font-size: 10px; letter-spacing: .18em; }
.recruit-hero__scroll i { width: 1px; height: 66px; background: rgba(255,255,255,.7); }
.recruit-message { background: #f5f4ed; }
.recruit-message__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(56px, 8vw, 120px); align-items: start; }
.recruit-message__copy { max-width: 610px; padding-top: 42px; }
.recruit-message__copy p { margin: 0 0 1.55em; }
.recruit-work { background: #fff; }
.recruit-work__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(54px, 8vw, 110px); align-items: center; }
.recruit-work__visual { margin: 0; overflow: hidden; border-radius: 42% 42% 16% 16% / 22% 22% 12% 12%; aspect-ratio: 1.18 / 1; }
.recruit-work__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.recruit-work__content > p:not(.recruit-label) { margin: 34px 0; }
.recruit-text-link { display: inline-flex; gap: 24px; align-items: center; color: inherit; text-decoration: none; border-bottom: 1px solid #82968a; padding: 0 2px 10px; letter-spacing: .08em; }
.recruit-text-link span { transition: transform .3s ease; }
.recruit-text-link:hover span { transform: translateX(6px); }
.recruit-values { background: #e9efe8; }
.recruit-values__head { max-width: 1180px; margin: 0 auto 64px; }
.recruit-values__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.recruit-value { min-height: 310px; padding: 44px 36px; border-radius: 28px; background: rgba(255,255,255,.78); }
.recruit-value span { display: block; color: #7c9484; font-size: 12px; letter-spacing: .2em; margin-bottom: 46px; }
.recruit-value h3 { margin: 0 0 22px; font-size: 25px; font-weight: 500; letter-spacing: .08em; }
.recruit-value p { margin: 0; font-size: 15px; }
.recruit-environment { background: #fff; }
.recruit-environment__head { max-width: 880px; margin: 0 auto 66px; text-align: center; }
.recruit-environment__head > p:last-child { margin: 28px auto 0; max-width: 640px; }
.recruit-environment__list { max-width: 980px; margin: 0 auto; border-top: 1px solid #ccd5ce; }
.recruit-environment__list > div { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 34px 12px; border-bottom: 1px solid #ccd5ce; }
.recruit-environment__list dt { font-size: 20px; letter-spacing: .08em; }
.recruit-environment__list dd { margin: 0; line-height: 2; color: #53635b; }
.recruit-jobs { background: #f3efe5; text-align: center; }
.recruit-jobs__inner { max-width: 760px; margin: 0 auto; }
.recruit-jobs__inner > p:not(.recruit-label) { margin: 30px 0 42px; }
.recruit-primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 64px; min-width: 300px; padding: 20px 26px 20px 30px; border-radius: 999px; background: #27483a; color: #fff; text-decoration: none; letter-spacing: .08em; transition: transform .3s ease, background .3s ease; }
.recruit-primary-button:hover { transform: translateY(-2px); background: #1c382d; }

@media (max-width: 900px) {
  .recruit-message__inner,
  .recruit-work__inner { grid-template-columns: 1fr; }
  .recruit-message__copy { padding-top: 0; }
  .recruit-work__visual { max-width: 720px; }
  .recruit-values__grid { grid-template-columns: 1fr; }
  .recruit-value { min-height: auto; }
}
@media (max-width: 640px) {
  .recruit-section { padding: 80px 24px; }
  .recruit-hero { min-height: 82svh; border-radius: 0 0 26px 26px; }
  .recruit-hero__image { object-position: 62% center; }
  .recruit-hero__content { padding: 0 26px 80px; }
  .recruit-hero__content h1 { font-size: 46px; }
  .recruit-hero__content > p:last-child { font-size: 20px; }
  .recruit-hero__scroll { display: none; }
  .recruit-page h2 { font-size: 31px; line-height: 1.55; }
  .recruit-work__visual { border-radius: 34px; aspect-ratio: 4 / 3; }
  .recruit-values__head { margin-bottom: 40px; }
  .recruit-value { padding: 34px 28px; }
  .recruit-value span { margin-bottom: 26px; }
  .recruit-environment__list > div { grid-template-columns: 1fr; gap: 12px; padding: 28px 4px; }
  .recruit-primary-button { min-width: min(100%, 300px); gap: 34px; }
}

/* Recruit top refinement 2026-07-26 */
.recruit-page main h2 { margin: 0; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.5; letter-spacing: .06em; font-weight: 500; }
.recruit-page main p { line-height: 2.15; }
.recruit-page main h2 > span { display: block; }
.recruit-message__heading h2 > span,
.recruit-work__content h2 > span,
.recruit-jobs__content h2 > span { white-space: nowrap; }
.recruit-page main p,
.recruit-page main h2,
.recruit-page main h3 { word-break: normal; overflow-wrap: normal; line-break: strict; }

/* Hero: four balanced panels with safe portrait crops */
.recruit-hero { min-height: min(820px, calc(100svh - 92px)); }
.recruit-hero__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; background: #e8ece8; }
.recruit-hero__grid figure { min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
.recruit-hero__grid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.recruit-hero__grid figure:nth-child(1) img { object-position: center 54%; }
.recruit-hero__grid figure:nth-child(2) img { object-position: center 52%; }
.recruit-hero__grid figure:nth-child(3) img { object-position: center 46%; }
.recruit-hero__grid figure:nth-child(4) img { object-position: center 42%; }
.recruit-hero__overlay { background: linear-gradient(90deg, rgba(20,42,33,.66) 0%, rgba(20,42,33,.30) 50%, rgba(20,42,33,.10) 100%), linear-gradient(0deg, rgba(12,27,21,.34), transparent 55%); }

/* Four equal work images */
.recruit-work__inner { grid-template-columns: 1fr 1fr; }
.recruit-work__visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 12px; aspect-ratio: 1 / 1; overflow: visible; border-radius: 0; }
.recruit-work__visual figure { margin: 0; min-width: 0; min-height: 0; overflow: hidden; border-radius: 24px; }
.recruit-work__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recruit-work__visual figure:nth-child(1) img { object-position: center 38%; }
.recruit-work__visual figure:nth-child(2) img { object-position: center 42%; }
.recruit-work__visual figure:nth-child(3) img { object-position: center 43%; }
.recruit-work__visual figure:nth-child(4) img { object-position: 75% 75%; }

/* Values: atmospheric showroom background */
.recruit-values { position: relative; isolation: isolate; background: url('../images/about/about-showroom.png') center 58% / cover no-repeat; overflow: hidden; }
.recruit-values::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(245,246,240,.83); backdrop-filter: blur(1.5px); }
.recruit-values__head { text-shadow: 0 1px 18px rgba(255,255,255,.8); }
.recruit-value { min-height: 300px; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.66); box-shadow: 0 22px 60px rgba(34,53,44,.08); backdrop-filter: blur(8px); }

/* Environment: alternating image and copy */
.recruit-environment__head { margin-bottom: 84px; }
.recruit-environment__list { max-width: 1120px; margin: 0 auto; border: 0; display: grid; gap: clamp(72px, 8vw, 116px); }
.recruit-environment__item { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: clamp(46px, 7vw, 100px); align-items: center; }
.recruit-environment__item--reverse figure { order: 2; }
.recruit-environment__item--reverse > div { order: 1; }
.recruit-environment__item figure { margin: 0; overflow: hidden; border-radius: 28px; aspect-ratio: 16 / 10; }
.recruit-environment__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recruit-environment__item:nth-child(1) img { object-position: center 46%; }
.recruit-environment__item:nth-child(2) img { object-position: center 48%; }
.recruit-environment__item:nth-child(3) img { object-position: center 38%; }
.recruit-environment__item > div { padding: 20px 0; }
.recruit-environment__item span { color: #7a9182; font-size: 11px; letter-spacing: .24em; }
.recruit-environment__item h3 { margin: 18px 0 24px; font-size: clamp(27px, 2.4vw, 38px); font-weight: 500; letter-spacing: .08em; }
.recruit-environment__item p { margin: 0; color: #53635b; }

/* Open positions: image-led final CTA */
.recruit-jobs { text-align: left; background: #f3efe5; }
.recruit-jobs__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(52px, 8vw, 112px); align-items: center; }
.recruit-jobs__visual { margin: 0; overflow: hidden; border-radius: 32px; aspect-ratio: 4 / 3; }
.recruit-jobs__visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.recruit-jobs__content > p:not(.recruit-label) { margin: 30px 0 38px; }

/* Footer: prevent recruit typography leaking into shared component */
.recruit-page .site-footer h2 { font-size: clamp(26px, 3vw, 46px); line-height: 1.55; white-space: normal; word-break: keep-all; overflow-wrap: normal; }
.recruit-page .site-footer p { line-height: 1.9; }
.recruit-page .site-footer .footer-column { min-width: 0; }
.recruit-page .site-footer .footer-column a { word-break: keep-all; }

@media (max-width: 1000px) {
  .recruit-work__inner,
  .recruit-jobs__inner { grid-template-columns: 1fr; }
  .recruit-work__visual { width: min(720px, 100%); }
  .recruit-environment__item { grid-template-columns: 1fr; gap: 30px; }
  .recruit-environment__item--reverse figure,
  .recruit-environment__item--reverse > div { order: initial; }
  .recruit-environment__item figure { width: min(760px, 100%); }
  .recruit-environment__item--reverse figure { margin-left: auto; }
  .recruit-environment__item--reverse > div { width: min(680px, 100%); margin-left: auto; }
  .recruit-jobs__visual { width: min(760px, 100%); }
  .recruit-jobs__content { width: min(680px, 100%); margin-left: auto; }
}

@media (max-width: 760px) {
  .recruit-page main h2 { font-size: 31px; line-height: 1.55; }
  .recruit-message__heading h2 > span,
  .recruit-work__content h2 > span,
  .recruit-jobs__content h2 > span { white-space: normal; }
  .recruit-hero { min-height: 720px; }
  .recruit-hero__grid { grid-template-columns: 1fr; grid-template-rows: 1.05fr .95fr; gap: 3px; }
  .recruit-hero__grid figure:nth-child(2),
  .recruit-hero__grid figure:nth-child(3) { display: none; }
  .recruit-hero__grid figure:nth-child(1) img { object-position: center; }
  .recruit-hero__grid figure:nth-child(4) img { object-position: center 38%; }
  .recruit-work__visual { gap: 8px; aspect-ratio: 1 / 1; }
  .recruit-work__visual figure { border-radius: 16px; }
  .recruit-values { background-position: 62% center; }
  .recruit-values::before { background: rgba(245,246,240,.88); }
  .recruit-environment__head { margin-bottom: 56px; }
  .recruit-environment__list { gap: 70px; }
  .recruit-environment__item figure { border-radius: 20px; aspect-ratio: 4 / 3; }
  .recruit-environment__item > div { padding: 0; }
  .recruit-environment__item h3 { margin: 12px 0 18px; font-size: 27px; }
  .recruit-jobs__visual { border-radius: 22px; }
  .recruit-jobs__content { margin-left: 0; }
}


/* Recruit top final corrections 2026-07-26 */
/* Hero replacement image: keep the collaborative scene safely framed. */
.recruit-hero__grid figure:nth-child(4) img {
  object-position: center 48%;
}

/* OUR WORK: all four tiles remain identical, with the second scene replaced. */
.recruit-work__visual figure:nth-child(2) img {
  object-position: center 50%;
}

/* Values cards: larger numbering and vertically centered content. */
.recruit-value {
  min-height: 300px;
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recruit-value span {
  font-size: 15px;
  margin-bottom: 24px;
}
.recruit-value h3 {
  margin-bottom: 18px;
}

/* Environment: every photograph uses the same width, height, ratio and radius. */
.recruit-environment__item {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.recruit-environment__item figure {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 28px;
}

/* Open positions button: keep label visually centered while arrow stays at right. */
.recruit-primary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 18px 58px;
  gap: 0;
  text-align: center;
}
.recruit-primary-button > span {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}

/* Restore the shared footer exactly to its normal typography and column sizing. */
.recruit-page .site-footer h2 {
  margin-bottom: 9px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(46,69,60,.32);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.recruit-page .site-footer p {
  line-height: 2;
}
.recruit-page .site-footer .footer-inner {
  grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
}
.recruit-page .site-footer .footer-column {
  min-width: 0;
}
.recruit-page .site-footer .footer-column a {
  word-break: keep-all;
  white-space: normal;
}

@media (max-width: 1180px) {
  .recruit-page .site-footer .footer-inner {
    grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .recruit-environment__item {
    grid-template-columns: 1fr;
  }
  .recruit-environment__item figure,
  .recruit-environment__item--reverse figure,
  .recruit-environment__item--reverse > div {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .recruit-value {
    min-height: auto;
    padding: 34px 28px;
  }
  .recruit-value span {
    margin-bottom: 20px;
  }
  .recruit-environment__item figure {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }
  .recruit-primary-button {
    width: min(100%, 300px);
    min-width: 0;
    padding-inline: 52px;
  }
}


/* Recruit top follow-up fixes 2026-07-26 */
/* Hero: show all four people safely in the lower-right panel. */
.recruit-hero__grid figure:nth-child(4) img {
  object-position: center 30%;
}

/* OUR WORK: avoid reusing the team photo outside the environment section. */
.recruit-work__visual figure:nth-child(1) img {
  object-position: center 44%;
}

/* Values cards: reduce empty white space and strengthen the text balance. */
.recruit-value {
  min-height: 272px;
  padding: 34px 34px 32px;
}
.recruit-value span {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
}
.recruit-value h3 {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.45;
}
.recruit-value p {
  font-size: 16px;
  line-height: 1.95;
}

/* Working environment: make the numbering clearly visible. */
.recruit-environment__item span {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
}
.recruit-environment__item h3 {
  margin: 16px 0 24px;
}

@media (max-width: 760px) {
  .recruit-hero__grid figure:nth-child(4) img {
    object-position: center 26%;
  }
  .recruit-value {
    padding: 32px 26px 30px;
  }
  .recruit-value span {
    font-size: 16px;
    margin-bottom: 14px;
  }
  .recruit-value h3 {
    font-size: 27px;
    margin-bottom: 14px;
  }
  .recruit-value p {
    font-size: 15px;
  }
  .recruit-environment__item span {
    font-size: 18px;
  }
}

/* Recruit hero title placement revision 2026-07-26 */
/* Place the copy over the open central area of the workshop panel, slightly left of center. */
.recruit-hero {
  align-items: initial;
}
.recruit-hero__content {
  position: absolute;
  z-index: 3;
  left: clamp(42px, 7vw, 118px);
  top: 19%;
  width: min(38vw, 580px);
  padding: 0;
  text-align: left;
}
.recruit-hero__content h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 3.6vw, 51px);
  line-height: 1.25;
  letter-spacing: .1em;
}
.recruit-hero__content > p:last-child {
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.75;
}
/* Strengthen contrast only around the title area without hiding the workshop. */
.recruit-hero__overlay {
  background:
    radial-gradient(ellipse at 23% 24%, rgba(13,31,24,.52) 0%, rgba(13,31,24,.28) 29%, transparent 53%),
    linear-gradient(0deg, rgba(12,27,21,.18), transparent 58%);
}

@media (max-width: 1000px) {
  .recruit-hero__content {
    left: clamp(32px, 6vw, 72px);
    top: 18%;
    width: min(44vw, 500px);
  }
}

@media (max-width: 760px) {
  .recruit-hero__content {
    left: 26px;
    right: 26px;
    top: 14%;
    width: auto;
    padding: 0;
  }
  .recruit-hero__content h1 {
    font-size: clamp(36px, 11vw, 46px);
  }
  .recruit-hero__content > p:last-child {
    font-size: 19px;
  }
  .recruit-hero__overlay {
    background:
      radial-gradient(ellipse at 34% 20%, rgba(13,31,24,.58) 0%, rgba(13,31,24,.34) 36%, transparent 66%),
      linear-gradient(0deg, rgba(12,27,21,.22), transparent 60%);
  }
}

/* =========================================================
   Recruit jobs page
   ========================================================= */
.jobs-page main { background: #f8f7f1; }
.jobs-page main h2 { margin: 0; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.5; letter-spacing: .06em; font-weight: 500; }
.jobs-section { padding: clamp(96px, 11vw, 160px) clamp(24px, 5vw, 72px); }
.jobs-label { margin: 0 0 22px; color: #718579; font-size: 11px; line-height: 1.4; letter-spacing: .24em; font-weight: 600; }
.jobs-hero { position: relative; min-height: min(680px, calc(100svh - 92px)); margin: 0 18px; overflow: hidden; border-radius: 0 0 42px 42px; color: #fff; }
.jobs-hero__image { position: absolute; inset: 0; margin: 0; }
.jobs-hero__image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 52%; }
.jobs-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,43,34,.68) 0%, rgba(21,43,34,.34) 54%, rgba(21,43,34,.14) 100%), linear-gradient(0deg, rgba(12,27,21,.28), transparent 52%); }
.jobs-hero__content { position: relative; z-index: 1; width: min(1180px, calc(100% - 96px)); min-height: inherit; margin: 0 auto; padding: 0 0 clamp(72px, 9vw, 112px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.jobs-hero .jobs-label { color: rgba(255,255,255,.75); }
.jobs-hero h1 { margin: 0; font-size: clamp(44px, 5.8vw, 76px); line-height: 1.25; letter-spacing: .1em; font-weight: 500; }
.jobs-hero__content > p:last-child { margin: 26px 0 0; font-size: clamp(18px, 1.65vw, 24px); line-height: 1.85; letter-spacing: .08em; }
.jobs-intro { text-align: center; }
.jobs-intro__inner { max-width: 850px; margin: 0 auto; }
.jobs-intro h2 { margin-bottom: 38px; }
.jobs-intro__inner > p:last-child { max-width: 740px; margin: 0 auto; color: #53635b; line-height: 2.2; }
.jobs-openings { padding-top: 26px; }
.jobs-openings__head { max-width: 1180px; margin: 0 auto clamp(66px, 7vw, 100px); }
.job-card { max-width: 1180px; margin: 0 auto clamp(96px, 10vw, 148px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: stretch; overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 25px 70px rgba(37,57,48,.08); }
.job-card--reverse { grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr); background: #e9efe8; }
.job-card--reverse .job-card__visual { order: 2; }
.job-card--reverse .job-card__content { order: 1; }
.job-card__visual { margin: 0; min-height: 580px; overflow: hidden; }
.job-card__visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.job-card:first-of-type .job-card__visual img { object-position: center 30%; }
.job-card--reverse .job-card__visual img { object-position: center 28%; }
.job-card__content { padding: clamp(52px, 5vw, 76px) clamp(34px, 4vw, 58px); display: flex; flex-direction: column; justify-content: center; }
.job-card__category { margin: 0 0 18px; color: #718579; font-size: 10px; letter-spacing: .2em; font-weight: 600; }
.job-card h3 { margin: 0; color: #25362e; font-size: clamp(30px, 3vw, 43px); line-height: 1.5; letter-spacing: .06em; font-weight: 500; }
.job-card__sub { margin: 8px 0 0; color: #708078; font-size: 14px; letter-spacing: .08em; }
.job-card__catch { margin: 34px 0 24px; color: #31473c; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.75; letter-spacing: .045em; font-weight: 500; }
.job-card__catch span { display: block; white-space: nowrap; }
.job-card__description { margin: 0; color: #53635b; line-height: 2.05; }
.job-card__facts { margin: 34px 0 32px; border-top: 1px solid rgba(59,83,70,.18); }
.job-card__facts > div { display: grid; grid-template-columns: 92px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(59,83,70,.18); }
.job-card__facts dt { color: #738279; font-size: 12px; letter-spacing: .08em; }
.job-card__facts dd { margin: 0; color: #31473c; font-size: 14px; }
.job-card__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 26px; padding: 8px 0 10px; border-bottom: 1px solid #72877b; color: #31473c; font-size: 14px; letter-spacing: .08em; }
.job-card__link span { transition: transform .3s ease; }
.job-card__link:hover span { transform: translateX(6px); }
.jobs-connection { background: #f0eee4; }
.jobs-connection__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 82px); align-items: center; }
.jobs-connection__title { font-size: clamp(32px, 3.2vw, 48px) !important; }
.jobs-connection__title span { display: block; white-space: nowrap; }
.jobs-connection__content > p:not(.jobs-label) { margin: 32px 0 0; color: #53635b; line-height: 2.1; }
.jobs-connection__visual { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 30px; }
.jobs-connection__visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 54%; }
.jobs-flow { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 13px; }
.jobs-flow span { padding: 10px 15px; border: 1px solid rgba(70,94,81,.22); border-radius: 999px; background: rgba(255,255,255,.58); color: #405449; font-size: 12px; white-space: nowrap; }
.jobs-flow i { color: #8a9b91; font-style: normal; }
.jobs-guide { text-align: center; background: #fff; }
.jobs-guide__inner { max-width: 850px; margin: 0 auto; }
.jobs-guide h2 { margin-bottom: 34px; }
.jobs-guide__inner > p:not(.jobs-label) { max-width: 760px; margin: 0 auto; color: #53635b; line-height: 2.15; }
.jobs-guide__actions { margin-top: 50px; display: flex; flex-direction: column; align-items: center; }
.jobs-guide__actions .recruit-primary-button { margin: 0; }
.jobs-guide__secondary-links { width: min(580px, 100%); margin-top: 46px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(54px, 8vw, 110px); }
.jobs-guide__secondary-links .recruit-text-link { width: 100%; min-width: 0; justify-content: space-between; padding: 8px 2px 13px; }

@media (max-width: 980px) {
  .job-card,
  .job-card--reverse { grid-template-columns: 1fr; }
  .job-card--reverse .job-card__visual,
  .job-card--reverse .job-card__content { order: initial; }
  .job-card__visual { min-height: 0; aspect-ratio: 4 / 3; }
  .job-card:first-of-type .job-card__visual img,
  .job-card--reverse .job-card__visual img { object-position: center 32%; }
  .jobs-connection__inner { grid-template-columns: 1fr; }
  .jobs-connection__visual { width: min(760px, 100%); }
}

@media (max-width: 640px) {
  .jobs-section { padding: 82px 24px; }
  .jobs-page main h2 { font-size: 30px; line-height: 1.6; }
  .jobs-hero { min-height: 650px; margin: 0; border-radius: 0 0 26px 26px; }
  .jobs-hero__image img { object-position: 48% center; }
  .jobs-hero__content { width: 100%; padding: 0 26px 72px; }
  .jobs-hero h1 { font-size: 45px; }
  .jobs-hero__content > p:last-child { font-size: 18px; }
  .jobs-intro h2 br { display: none; }
  .job-card__catch span,
  .jobs-connection__title span { white-space: normal; }
  .jobs-openings { padding-top: 10px; }
  .jobs-openings__head { margin-bottom: 46px; }
  .job-card { margin-bottom: 72px; border-radius: 22px; }
  .job-card__visual { aspect-ratio: 4 / 3; }
  .job-card__content { padding: 38px 26px 42px; }
  .job-card h3 { font-size: 29px; }
  .job-card__catch { margin-top: 28px; font-size: 22px; }
  .job-card__facts > div { grid-template-columns: 78px 1fr; gap: 14px; }
  .jobs-connection__visual { border-radius: 20px; }
  .jobs-flow { gap: 8px; }
  .jobs-flow i { display: none; }
  .jobs-guide__actions .recruit-primary-button { width: 100%; min-width: 0; }
  .jobs-guide__secondary-links { margin-top: 34px; grid-template-columns: 1fr; gap: 18px; }
  .jobs-guide__secondary-links .recruit-text-link { width: min(280px, 100%); margin: 0 auto; }
}


/* =========================================================
   Recruit job detail pages
   ========================================================= */
.job-detail-page main { background: #f8f7f1; color: #31473c; }
.job-detail-section { padding: clamp(96px, 10vw, 150px) clamp(24px, 5vw, 72px); }
.job-detail-container { width: min(1180px, 100%); margin: 0 auto; }
.job-detail-heading { margin-bottom: clamp(48px, 6vw, 82px); }
.job-detail-heading h2, .job-detail-cta h2 { margin: 0; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.55; letter-spacing: .06em; font-weight: 500; }
.job-detail-hero { width: min(1400px, calc(100% - 36px)); min-height: 650px; margin: 0 auto; padding: clamp(70px, 8vw, 110px) clamp(38px, 7vw, 100px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: clamp(48px, 7vw, 100px); align-items: center; border-radius: 0 0 42px 42px; background: #e9efe8; }
.job-detail-hero__content { max-width: 560px; }
.job-detail-hero__eyebrow { margin: 0 0 18px; color: #6f8077; font-size: 14px; letter-spacing: .12em; }
.job-detail-hero h1 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1.35; letter-spacing: .06em; font-weight: 500; }
.job-detail-hero__sub { margin: 12px 0 0; color: #718179; font-size: 15px; letter-spacing: .08em; }
.job-detail-hero__catch { margin: 34px 0 0; font-size: clamp(20px, 2vw, 27px); line-height: 1.8; letter-spacing: .055em; }
.job-detail-hero__meta { margin: 38px 0 0; padding-top: 22px; border-top: 1px solid rgba(54,76,64,.2); color: #5f7168; font-size: 14px; letter-spacing: .08em; }
.job-detail-hero__meta span { margin: 0 10px; color: #98a69f; }
.job-detail-hero__visual { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 30px; }
.job-detail-hero__visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 30%; }
.job-detail-about { background: #fff; }
.job-detail-about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(54px, 8vw, 120px); align-items: start; }
.job-detail-lead { margin: 0; color: #53635b; font-size: 17px; line-height: 2.25; }
.job-detail-list { padding: 36px 42px; background: #f3f0e7; border-radius: 24px; }
.job-detail-list h3 { margin: 0 0 24px; font-size: 19px; font-weight: 500; letter-spacing: .06em; }
.job-detail-list ul, .job-detail-person__list { margin: 0; padding: 0; list-style: none; }
.job-detail-list li, .job-detail-person__list li { position: relative; padding: 13px 0 13px 24px; border-bottom: 1px solid rgba(62,83,72,.15); color: #53635b; line-height: 1.8; }
.job-detail-list li:last-child, .job-detail-person__list li:last-child { border-bottom: 0; }
.job-detail-list li::before, .job-detail-person__list li::before { content: ''; position: absolute; left: 2px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: #789084; }
.job-detail-values { background: #f0eee4; }
.job-detail-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.job-detail-points li { min-height: 220px; padding: 34px; background: rgba(255,255,255,.62); border-radius: 22px; }
.job-detail-points span { display: block; color: #819288; font-size: 11px; letter-spacing: .18em; }
.job-detail-points p { margin: 38px 0 0; font-size: 19px; line-height: 1.9; letter-spacing: .04em; }
.job-detail-person { background: #fff; }
.job-detail-person__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(60px, 9vw, 140px); align-items: start; }
.job-detail-person__list { padding-top: 8px; }
.job-detail-person__list li { padding-top: 19px; padding-bottom: 19px; font-size: 17px; }
.job-detail-person__list li::before { top: 31px; }
.job-detail-requirements { background: #f8f7f1; }
.job-detail-table { margin: 0; border-top: 1px solid rgba(55,78,66,.24); }
.job-detail-table > div { display: grid; grid-template-columns: 210px 1fr; border-bottom: 1px solid rgba(55,78,66,.18); }
.job-detail-table dt { padding: 24px 28px; background: rgba(232,237,230,.7); color: #53675c; font-size: 13px; letter-spacing: .08em; }
.job-detail-table dd { margin: 0; padding: 24px 34px; color: #4d5f56; line-height: 1.9; }
.job-detail-process { background: #e9efe8; }
.job-detail-process__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.job-detail-process__list li { position: relative; padding: 30px 26px 34px; background: rgba(255,255,255,.72); border-radius: 20px; }
.job-detail-process__list li:not(:last-child)::after { content: '→'; position: absolute; right: -17px; top: 50%; z-index: 2; color: #84958c; transform: translateY(-50%); }
.job-detail-process__list span { color: #82938a; font-size: 11px; letter-spacing: .16em; }
.job-detail-process__list strong { display: block; margin-top: 24px; font-size: 18px; font-weight: 500; }
.job-detail-process__list p { margin: 14px 0 0; color: #617168; font-size: 13px; line-height: 1.9; }
.job-detail-cta { padding: clamp(100px, 11vw, 160px) 24px; text-align: center; background: #fff; }
.job-detail-cta__inner { max-width: 850px; margin: 0 auto; }
.job-detail-cta h2 { margin-bottom: 32px; }
.job-detail-cta__inner > p:not(.jobs-label) { max-width: 720px; margin: 0 auto; color: #53635b; line-height: 2.15; }
@media (max-width: 980px) {
  .job-detail-hero { grid-template-columns: 1fr; }
  .job-detail-hero__content { max-width: 700px; }
  .job-detail-hero__visual { width: min(760px, 100%); }
  .job-detail-about__grid, .job-detail-person__grid { grid-template-columns: 1fr; }
  .job-detail-points { grid-template-columns: 1fr; }
  .job-detail-points li { min-height: 0; }
  .job-detail-process__list { grid-template-columns: repeat(2, 1fr); }
  .job-detail-process__list li:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
  .job-detail-section { padding: 82px 24px; }
  .job-detail-heading { margin-bottom: 42px; }
  .job-detail-heading h2, .job-detail-cta h2 { font-size: 30px; }
  .job-detail-hero { width: 100%; min-height: 0; padding: 72px 24px 80px; border-radius: 0 0 26px 26px; gap: 44px; }
  .job-detail-hero h1 { font-size: 39px; }
  .job-detail-hero__catch { font-size: 20px; }
  .job-detail-hero__visual { border-radius: 20px; }
  .job-detail-list { padding: 28px 24px; border-radius: 18px; }
  .job-detail-points { gap: 14px; }
  .job-detail-points li { padding: 28px 24px; }
  .job-detail-points p { margin-top: 24px; font-size: 18px; }
  .job-detail-table > div { grid-template-columns: 1fr; }
  .job-detail-table dt { padding: 15px 18px; }
  .job-detail-table dd { padding: 18px; }
  .job-detail-process__list { grid-template-columns: 1fr; }
  .job-detail-process__list li::after { display: none; }
  .job-detail-cta { padding: 90px 24px 105px; }
}


/* 募集要項詳細ページ：落ち着いて丁寧な見え方への調整 2026-07-27 */
.job-detail-page {
  --job-heading-max: 42px;
  --job-title-max: 51px;
}

.job-detail-page .job-detail-section {
  padding-top: clamp(78px, 8vw, 116px);
  padding-bottom: clamp(78px, 8vw, 116px);
}

.job-detail-page .job-detail-heading {
  margin-bottom: clamp(38px, 4.8vw, 62px);
}

.job-detail-page .job-detail-heading h2,
.job-detail-page .job-detail-cta h2 {
  font-size: clamp(30px, 3vw, var(--job-heading-max));
  line-height: 1.58;
  letter-spacing: .055em;
}

.job-detail-page .job-detail-hero {
  min-height: 590px;
  padding-top: clamp(68px, 7vw, 92px);
  padding-bottom: clamp(68px, 7vw, 92px);
  border-bottom: 1px solid rgba(61, 83, 71, .09);
}

.job-detail-page .job-detail-hero h1 {
  font-size: clamp(38px, 4.1vw, var(--job-title-max));
  line-height: 1.45;
}

.job-detail-page .job-detail-hero__catch {
  max-width: 520px;
  font-size: clamp(19px, 1.7vw, 24px);
}

.job-detail-page .job-detail-about {
  position: relative;
  background: #fff;
}

.job-detail-page .job-detail-about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1180px, calc(100% - 48px));
  height: 1px;
  background: rgba(55, 78, 66, .11);
  transform: translateX(-50%);
}

.job-detail-page .job-detail-about__grid {
  gap: clamp(42px, 6vw, 88px);
}

.job-detail-page .job-detail-lead {
  font-size: 16px;
  line-height: 2.15;
}

.job-detail-page .job-detail-list {
  padding: 32px 38px;
  border: 1px solid rgba(63, 84, 73, .08);
  box-shadow: 0 16px 42px rgba(44, 63, 53, .035);
}

.job-detail-page .job-detail-about__media {
  margin: clamp(52px, 6vw, 82px) 0 0;
  aspect-ratio: 16 / 6.2;
  overflow: hidden;
  border-radius: 26px;
}

.job-detail-page .job-detail-about__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
}

.job-detail-page .job-detail-values {
  background: #f1efe6;
}

.job-detail-page .job-detail-points {
  gap: 18px;
}

.job-detail-page .job-detail-points li {
  min-height: 190px;
  padding: 30px 32px;
  border: 1px solid rgba(63, 84, 73, .08);
  box-shadow: 0 14px 34px rgba(44, 63, 53, .025);
}

.job-detail-page .job-detail-points p {
  margin-top: 30px;
  font-size: 18px;
}

.job-detail-page .job-detail-person__grid {
  gap: clamp(46px, 7vw, 100px);
}

.job-detail-page .job-detail-person__list {
  padding: 14px 34px;
  border-top: 1px solid rgba(55, 78, 66, .16);
  border-bottom: 1px solid rgba(55, 78, 66, .16);
}

.job-detail-page .job-detail-requirements {
  background: #f7f6f0;
}

.job-detail-page .job-detail-table {
  background: rgba(255,255,255,.58);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(55, 78, 66, .11);
}

.job-detail-page .job-detail-table > div:last-child {
  border-bottom: 0;
}

.job-detail-page .job-detail-process {
  background: #e8eee7;
}

.job-detail-page .job-detail-process__list li {
  border: 1px solid rgba(63, 84, 73, .08);
}

.job-detail-page .job-detail-cta {
  padding-top: clamp(86px, 9vw, 124px);
  padding-bottom: clamp(96px, 10vw, 138px);
  border-top: 1px solid rgba(55, 78, 66, .1);
}

.job-detail-page .job-detail-cta__inner > p:not(.jobs-label) {
  font-size: 16px;
  line-height: 2.05;
}

@media (max-width: 760px) {
  .job-detail-page .job-detail-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .job-detail-page .job-detail-heading h2,
  .job-detail-page .job-detail-cta h2 {
    font-size: 30px;
  }

  .job-detail-page .job-detail-hero h1 {
    font-size: 36px;
  }

  .job-detail-page .job-detail-about__media {
    margin-top: 42px;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }

  .job-detail-page .job-detail-list {
    padding: 27px 23px;
  }

  .job-detail-page .job-detail-person__list {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .job-detail-page .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* 募集要項詳細：主な業務内容カードの段階フェードアップ 2026-07-27 */
.job-detail-page .job-detail-list--stagger h3,
.job-detail-page .job-detail-list--stagger li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .68s var(--ease), transform .68s var(--ease);
}

.job-detail-page .job-detail-list--stagger.is-visible h3,
.job-detail-page .job-detail-list--stagger.is-visible li {
  opacity: 1;
  transform: none;
}

.job-detail-page .job-detail-list--stagger.is-visible h3 { transition-delay: .18s; }
.job-detail-page .job-detail-list--stagger.is-visible li:nth-child(1) { transition-delay: .28s; }
.job-detail-page .job-detail-list--stagger.is-visible li:nth-child(2) { transition-delay: .36s; }
.job-detail-page .job-detail-list--stagger.is-visible li:nth-child(3) { transition-delay: .44s; }
.job-detail-page .job-detail-list--stagger.is-visible li:nth-child(4) { transition-delay: .52s; }
.job-detail-page .job-detail-list--stagger.is-visible li:nth-child(5) { transition-delay: .60s; }
.job-detail-page .job-detail-list--stagger.is-visible li:nth-child(6) { transition-delay: .68s; }

@media (prefers-reduced-motion: reduce) {
  .job-detail-page .job-detail-list--stagger h3,
  .job-detail-page .job-detail-list--stagger li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* 募集要項詳細ページ：不自然な改行の調整 2026-07-27 */
.job-detail-page .job-title-chunk,
.job-detail-page .job-catch-chunk {
  display: inline-block;
}

.job-detail-page .job-detail-hero__content {
  max-width: 620px;
}

.job-detail-page .job-detail-hero__catch {
  max-width: 100%;
}

.job-detail-page .job-detail-hero__catch .job-catch-chunk {
  display: block;
}

@media (max-width: 760px) {
  .job-detail-page .job-detail-hero__content {
    max-width: 100%;
  }

  .job-detail-page .job-detail-hero__catch .job-catch-chunk {
    display: inline;
  }
}

/* お問い合わせページ 2026-07-28 */
.contact-page{--contact-heading-max:42px;background:#faf9f4;color:#33443b}.contact-shell{width:min(1180px,calc(100% - 48px));margin:auto}.contact-section{padding:clamp(88px,9vw,130px) 0}.contact-hero{padding:clamp(150px,16vw,220px) 0 clamp(100px,11vw,150px);background:#e9efe8;border-bottom:1px solid rgba(55,78,66,.1)}.contact-hero h1,.contact-heading h2,.contact-message h2,.contact-state h2{margin:12px 0 0;font-size:clamp(32px,3.2vw,var(--contact-heading-max));line-height:1.55;letter-spacing:.06em;font-weight:500}.contact-hero p:last-child,.contact-heading>p:last-child{max-width:720px;margin:28px 0 0;color:#596a61;line-height:2.05}.contact-guide{background:#fff}.contact-heading{margin-bottom:clamp(46px,6vw,76px)}.contact-guide__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.contact-guide article{padding:34px 30px 38px;border-top:1px solid #899c92;background:#f7f6f0}.contact-guide article span{font-size:12px;color:#789084;letter-spacing:.12em}.contact-guide h3{margin:26px 0 15px;font-size:20px;font-weight:500}.contact-guide article p{margin:0;color:#627169;line-height:1.9}.contact-form-section{background:#f7f6f0}.contact-notes{margin:-28px 0 50px;padding:24px 28px;background:#ecefe9;border-left:3px solid #81968b}.contact-notes p{margin:5px 0;color:#5c6d64;font-size:14px}.contact-form{background:#fff;border-top:1px solid rgba(55,78,66,.2)}.contact-field{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;padding:32px 36px;border-bottom:1px solid rgba(55,78,66,.13);align-items:start}.contact-field>label,.contact-label{padding-top:13px;font-weight:500}.contact-field em{margin-left:10px;padding:4px 7px;background:#806e59;color:#fff;font-size:10px;font-style:normal}.contact-field label span,.contact-field>label>span{margin-left:10px;color:#7c8982;font-size:12px}.contact-field input,.contact-field select,.contact-field textarea{width:100%;padding:14px 16px;border:1px solid #bac5bf;border-radius:7px;background:#fff;font:inherit;color:inherit}.contact-field textarea{resize:vertical;line-height:1.8}.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{outline:2px solid rgba(86,118,101,.22);border-color:#688273}.contact-field small{display:block;margin-top:8px;color:#77847e}.contact-conditional{display:none;background:#f1f5f0;animation:contactOpen .45s ease both}.contact-conditional.is-active{display:block}@keyframes contactOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.contact-radios{display:flex;flex-wrap:wrap;gap:14px 28px;padding-top:10px}.contact-radios label{display:flex;gap:8px;align-items:center}.contact-radios input{width:auto}.character-count{text-align:right;color:#7a8781;font-size:12px}.field-error{min-height:1em;margin:7px 0 0;color:#9a4e43;font-size:13px}.field-error--center{text-align:center}.file-picker{display:block;padding:25px;border:1px dashed #92a39a;border-radius:8px;cursor:pointer}.file-picker strong,.file-picker small,.file-picker span{display:block}.file-picker span{margin-top:12px;color:#53675d}.privacy-box{margin:42px 36px 22px;border:1px solid rgba(55,78,66,.16);background:#f5f2e9}.privacy-box summary{padding:20px 24px;cursor:pointer;list-style:none}.privacy-box summary span{float:right}.privacy-box p{margin:0;padding:0 24px 24px;color:#5e6d65;line-height:2}.privacy-consent{display:flex;justify-content:center;gap:10px;align-items:center;margin:30px 24px}.contact-submit,.contact-secondary{display:flex;width:fit-content;min-width:260px;min-height:60px;margin:44px auto 0;padding:15px 28px;align-items:center;justify-content:center;gap:30px;border:1px solid #3f6250;border-radius:0;background:#3f6250;color:#fff;cursor:pointer;text-decoration:none;font:inherit}.contact-secondary{background:transparent;color:#3f6250}.contact-state{padding:60px;background:#fff;text-align:center}.contact-state>p{line-height:2}.confirm-list{margin:48px auto 0;max-width:900px;text-align:left;border-top:1px solid rgba(55,78,66,.18)}.confirm-list div{display:grid;grid-template-columns:230px 1fr;border-bottom:1px solid rgba(55,78,66,.13)}.confirm-list dt,.confirm-list dd{margin:0;padding:20px}.confirm-list dt{background:#f3f1e9}.contact-state__buttons{display:flex;justify-content:center;gap:20px}.contact-state__buttons>*{margin:44px 0 0}.contact-complete small{display:block;margin-top:24px;color:#7b8781}.contact-message{background:#fff}.contact-message__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(50px,8vw,110px);align-items:center}.contact-message figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:26px}.contact-message img{width:100%;height:100%;object-fit:cover}.contact-message h2{margin:15px 0 28px}.contact-message p:last-child{color:#5a6b62;line-height:2}.contact-links{padding-top:0;background:#fff}.contact-links .contact-shell{display:grid;grid-template-columns:1fr 1fr;gap:25px}.contact-links a{padding:30px 4px;border-top:1px solid #789084;border-bottom:1px solid #789084;color:#33443b;text-decoration:none}.contact-links a span{float:right}.contact-form.is-hidden{display:none}
@media(max-width:800px){.contact-shell{width:min(100% - 36px,1180px)}.contact-hero{padding:120px 0 90px}.contact-guide__grid,.contact-message__grid,.contact-links .contact-shell{grid-template-columns:1fr}.contact-field{grid-template-columns:1fr;gap:12px;padding:25px 20px}.contact-field>label,.contact-label{padding-top:0}.privacy-box{margin-left:20px;margin-right:20px}.contact-state{padding:45px 20px}.confirm-list div{grid-template-columns:1fr}.confirm-list dt{padding-bottom:8px}.confirm-list dd{padding-top:8px}.contact-state__buttons{flex-direction:column;align-items:center;gap:0}.contact-message__grid{gap:45px}}
@media(prefers-reduced-motion:reduce){.contact-conditional{animation:none}}


/* お問い合わせページ：FV写真追加 2026-07-28 */
.contact-page .contact-hero {
  padding: clamp(74px, 7vw, 104px) 0;
}

.contact-page .contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(460px, 1.12fr);
  gap: clamp(48px, 7vw, 92px);
  align-items: center;
}

.contact-page .contact-hero__content {
  max-width: 560px;
}

.contact-page .contact-hero__visual {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 28px;
}

.contact-page .contact-hero__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 46%;
}

.contact-page .contact-guide {
  padding-top: clamp(78px, 8vw, 112px);
}

@media (max-width: 980px) {
  .contact-page .contact-hero__grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .contact-page .contact-hero__content {
    max-width: 700px;
  }

  .contact-page .contact-hero__visual {
    width: min(820px, 100%);
  }
}

@media (max-width: 800px) {
  .contact-page .contact-hero {
    padding: 78px 0 72px;
  }

  .contact-page .contact-hero__grid {
    gap: 34px;
  }

  .contact-page .contact-hero__visual {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }

  .contact-page .contact-hero__visual img {
    object-position: center 48%;
  }
}


/* お問い合わせページ：全面写真FV 2026-07-28 */
.contact-page .contact-hero.contact-hero--full {
  position: relative;
  width: calc(100% - 24px);
  min-height: clamp(560px, 71vh, 690px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: #26372f;
  border: 0;
}

.contact-page .contact-hero--full .contact-hero__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
}

.contact-page .contact-hero--full .contact-hero__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 43%;
}

.contact-page .contact-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 31, 26, .72) 0%, rgba(20, 31, 26, .48) 34%, rgba(20, 31, 26, .14) 66%, rgba(20, 31, 26, .08) 100%),
    linear-gradient(0deg, rgba(18, 28, 23, .20), rgba(18, 28, 23, .04) 55%);
}

.contact-page .contact-hero__inner {
  position: relative;
  z-index: 1;
  width: min(1420px, calc(100% - 128px));
  min-height: inherit;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(82px, 9vw, 120px);
}

.contact-page .contact-hero--full .contact-hero__content {
  max-width: 620px;
  color: #fff;
}

.contact-page .contact-hero--full .jobs-label {
  color: rgba(255,255,255,.86);
}

.contact-page .contact-hero--full h1 {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.18);
}

.contact-page .contact-hero--full .contact-hero__content > p:last-child {
  max-width: 590px;
  margin-top: 30px;
  color: rgba(255,255,255,.92);
  line-height: 2.05;
  text-shadow: 0 2px 16px rgba(0,0,0,.18);
}

.contact-page .contact-hero__scroll {
  position: absolute;
  right: 22px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.88);
}

.contact-page .contact-hero__scroll span {
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: .24em;
}

.contact-page .contact-hero__scroll i {
  width: 1px;
  height: 54px;
  background: rgba(255,255,255,.75);
}

.contact-page .contact-guide {
  padding-top: clamp(88px, 9vw, 124px);
}

@media (max-width: 980px) {
  .contact-page .contact-hero__inner {
    width: min(100% - 64px, 1180px);
  }

  .contact-page .contact-hero--full .contact-hero__visual img {
    object-position: 58% center;
  }
}

@media (max-width: 800px) {
  .contact-page .contact-hero.contact-hero--full {
    width: calc(100% - 16px);
    min-height: 620px;
  }

  .contact-page .contact-hero__inner {
    width: calc(100% - 44px);
    padding-bottom: 62px;
  }

  .contact-page .contact-hero--full .contact-hero__visual img {
    object-position: 61% center;
  }

  .contact-page .contact-hero__overlay {
    background:
      linear-gradient(0deg, rgba(18, 29, 24, .78) 0%, rgba(18, 29, 24, .44) 45%, rgba(18, 29, 24, .10) 78%),
      linear-gradient(90deg, rgba(18, 29, 24, .25), rgba(18, 29, 24, .04));
  }

  .contact-page .contact-hero--full .contact-hero__content > p:last-child {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.95;
  }

  .contact-page .contact-hero__scroll {
    display: none;
  }
}

/* お問い合わせページ：FVを画面いっぱいに見せる調整 2026-07-28 */
.contact-page .contact-hero.contact-hero--full {
  width: 100%;
  min-height: clamp(650px, calc(100vh - 78px), 860px);
  margin: 0;
}

.contact-page .contact-hero__inner {
  width: 100%;
  max-width: none;
  padding: clamp(185px, 22vh, 270px) clamp(72px, 5.4vw, 108px) clamp(72px, 8vh, 100px);
  align-items: flex-start;
}

.contact-page .contact-hero--full .contact-hero__content {
  max-width: 620px;
}

.contact-page .contact-hero__overlay {
  background:
    linear-gradient(90deg, rgba(14, 25, 20, .78) 0%, rgba(14, 25, 20, .60) 29%, rgba(14, 25, 20, .25) 55%, rgba(14, 25, 20, .06) 78%, rgba(14, 25, 20, .02) 100%),
    linear-gradient(0deg, rgba(12, 22, 18, .24), rgba(12, 22, 18, .03) 56%);
}

.contact-page .contact-hero--full .contact-hero__visual img {
  object-position: center 44%;
}

.contact-page .contact-hero__scroll {
  right: clamp(54px, 6.8vw, 108px);
  bottom: clamp(58px, 7vh, 86px);
  gap: 14px;
}

.contact-page .contact-hero__scroll i {
  height: 66px;
}

@media (max-width: 980px) {
  .contact-page .contact-hero__inner {
    width: 100%;
    padding-left: 56px;
    padding-right: 56px;
  }
}

@media (max-width: 800px) {
  .contact-page .contact-hero.contact-hero--full {
    width: 100%;
    min-height: min(760px, calc(100svh - 64px));
  }

  .contact-page .contact-hero__inner {
    width: 100%;
    padding: 0 22px 58px;
    align-items: flex-end;
  }

  .contact-page .contact-hero--full .contact-hero__visual img {
    object-position: 62% center;
  }
}


/* お問い合わせページ：FVを手元中心に見せる調整 2026-07-28 */
.contact-page .contact-hero--full .contact-hero__visual {
  overflow: hidden;
}

.contact-page .contact-hero--full .contact-hero__visual img {
  object-position: 76% 54%;
  transform: scale(1.2);
  transform-origin: 76% 54%;
}

@media (max-width: 1200px) {
  .contact-page .contact-hero--full .contact-hero__visual img {
    object-position: 74% 54%;
    transform: scale(1.18);
    transform-origin: 74% 54%;
  }
}

@media (max-width: 980px) {
  .contact-page .contact-hero--full .contact-hero__visual img {
    object-position: 72% 52%;
    transform: scale(1.16);
    transform-origin: 72% 52%;
  }
}

@media (max-width: 800px) {
  .contact-page .contact-hero--full .contact-hero__visual img {
    object-position: 71% 50%;
    transform: scale(1.28);
    transform-origin: 71% 50%;
  }
}


/* ==========================================================
   Page top button
========================================================== */
.page-top-button {
  position: fixed;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 1200;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(46, 69, 60, .35);
  border-radius: 50%;
  background: rgba(251, 250, 246, .92);
  color: var(--sage-deep, #2e453c);
  box-shadow: 0 8px 24px rgba(24, 42, 34, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background-color .25s ease;
}

.page-top-button span {
  display: block;
  margin-top: -3px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
}

.page-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-top-button:hover {
  background: rgba(238, 243, 237, .98);
}

.page-top-button:focus-visible {
  outline: 2px solid #2e453c;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .page-top-button {
    width: 44px;
    height: 44px;
    right: 14px;
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-top-button {
    transition: none;
  }
}

/* =========================================================
   2026-07-28 Button and lower-navigation alignment refinement
   ========================================================= */

/* Keep button labels and arrows together at the visual center. */
.outline-button,
.repair-button,
.about-button,
.craft-button,
.products-button,
.product-button,
.people-button,
.recruit-primary-button,
.contact-submit,
.contact-secondary {
  justify-content: center !important;
  gap: 18px !important;
  text-align: center;
}

/* Line-style related links: center the label and arrow as one unit. */
.contact-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.contact-links a span {
  float: none;
  flex: 0 0 auto;
}

/* Materials route button: use the same framed treatment as the repair route button. */
.craft-next__content > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 270px;
  min-height: 58px;
  margin-top: 28px;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.78);
  color: #fff;
  line-height: 1;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.craft-next:hover .craft-next__content > span,
.craft-next:focus-visible .craft-next__content > span {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

/* Do not zoom the whole photo on hover; only the framed button responds. */
.craft-next__media img,
.craft-next:hover .craft-next__media img,
.craft-next:focus-visible .craft-next__media img {
  transform: none !important;
}

@media (max-width: 800px) {
  .craft-next__content > span {
    min-width: min(270px, 82vw);
    min-height: 54px;
    margin-top: 24px;
  }
}

/* Product coming-soon page — 2026-07-28 */
.product-coming-soon-page .maintenance-panel {
  width: min(900px, 100%);
}
.product-coming-soon-page .maintenance-panel h1 {
  line-height: 1.45;
}
.product-coming-soon-page .maintenance-panel > p:not(.repair-kicker) {
  margin-top: 24px;
}
.product-coming-soon-page .product-coming-soon-note {
  margin-top: 14px !important;
  font-size: 13px !important;
  color: rgba(46, 69, 60, .72);
}
.product-coming-soon-page .maintenance-actions .repair-button {
  justify-content: center;
}
.product-coming-soon-page .maintenance-actions .repair-button span,
.product-coming-soon-page .maintenance-actions .repair-button i {
  display: inline-block;
}
.product-coming-soon-page .maintenance-actions .repair-button i {
  margin-left: 18px;
}
@media (min-width: 769px) {
  .product-coming-soon-page .sp-only { display: none; }
}


/* ==========================================================
   Use scenes: three lifestyle cards (2026-07-28)
========================================================== */
.scene-grid {
  width: min(100%, 1080px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.scene-card,
.scene-card:nth-child(1),
.scene-card:nth-child(2),
.scene-card:nth-child(3) {
  --scene-card-image-width: 100%;
  --scene-card-image-bottom: 0;
}

.scene-card figure {
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  background: #eeece7;
}

.scene-card img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  transition: transform .55s var(--ease);
}

.scene-card:hover img {
  transform: scale(1.025);
}

.product-coming-soon-page .maintenance-panel h1 {
  font-size: clamp(26px, 3.25vw, 46px);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .scene-grid {
    grid-template-columns: 1fr;
    width: min(100%, 440px);
    gap: 30px;
  }

  .scene-card h3 {
    font-size: 13px;
  }

  .product-coming-soon-page .maintenance-panel h1 {
    font-size: clamp(23px, 6vw, 34px);
    white-space: normal;
  }
}


/* ==========================================================
   Yutsugi kettle lifestyle page (2026-07-28)
========================================================== */
.kettle-scene-page { background: #f7f5ef; color: #263b34; }
.kettle-scene-breadcrumb { padding: 104px clamp(24px, 5vw, 76px) 24px; background: #f7f5ef; }
.kettle-scene-breadcrumb ol { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0; padding:0; list-style:none; font-size:12px; letter-spacing:.08em; color:#67766f; }
.kettle-scene-breadcrumb li+li::before { content:"/"; margin-right:14px; opacity:.45; }
.kettle-scene-breadcrumb a { color:inherit; }
.kettle-scene-section { padding: clamp(82px, 10vw, 144px) clamp(24px, 6vw, 88px); }
.kettle-scene-kicker { margin:0 0 18px; font-size:11px; letter-spacing:.22em; color:#718079; }
.kettle-scene-hero { position:relative; margin:0 clamp(18px, 3vw, 44px); min-height:min(76vh, 760px); overflow:hidden; border-radius:38px; background:#253d34; }
.kettle-scene-hero__visual, .kettle-scene-hero__visual img { width:100%; height:100%; }
.kettle-scene-hero__visual { position:absolute; inset:0; margin:0; }
.kettle-scene-hero__visual img { object-fit:cover; object-position:center; }
.kettle-scene-hero__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,37,31,.7) 0%,rgba(20,37,31,.34) 48%,rgba(20,37,31,.08) 100%); }
.kettle-scene-hero__copy { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:min(76vh,760px); width:min(680px,74%); padding:clamp(54px,8vw,112px); color:#fff; }
.kettle-scene-hero__copy .kettle-scene-kicker { color:rgba(255,255,255,.72); }
.kettle-scene-hero h1 { margin:0 0 28px; font-family:var(--font-serif); font-size:clamp(30px,4.2vw,58px); line-height:1.55; font-weight:500; letter-spacing:.04em; }
.kettle-scene-hero__copy>p:last-child { margin:0; font-size:clamp(14px,1.25vw,17px); line-height:2.1; }
.kettle-scene-narrow { width:min(760px,100%); margin:auto; text-align:center; }
.kettle-scene-narrow h2,.kettle-scene-heading h2,.kettle-detail-guide h2 { margin:0 0 30px; font-family:var(--font-serif); font-size:clamp(27px,3.4vw,46px); line-height:1.55; font-weight:500; }
.kettle-scene-narrow>p:last-child { margin:0; font-size:15px; line-height:2.25; }
.kettle-moments { display:grid; gap:clamp(82px,10vw,150px); padding-top:30px; }
.kettle-moment { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr); align-items:center; gap:clamp(42px,7vw,108px); width:min(1180px,100%); margin:auto; }
.kettle-moment--reverse { grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); }
.kettle-moment--reverse figure { order:2; }
.kettle-moment figure { margin:0; overflow:hidden; border-radius:30px; aspect-ratio:4/3; background:#e5e1d8; }
.kettle-moment figure img { width:100%; height:100%; object-fit:cover; }
.kettle-moment:nth-child(2) figure { aspect-ratio:4/5; max-width:620px; justify-self:end; }
.kettle-moment__number { margin:0 0 20px; font-size:11px; letter-spacing:.2em; color:#849088; }
.kettle-moment h2 { margin:0 0 24px; font-family:var(--font-serif); font-size:clamp(26px,3vw,42px); line-height:1.6; font-weight:500; }
.kettle-moment__copy>p:last-child { margin:0; font-size:15px; line-height:2.2; }
.kettle-comforts { background:#eaf0e9; }
.kettle-scene-heading { text-align:center; margin:0 auto clamp(48px,6vw,76px); }
.kettle-comforts__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,42px); width:min(1180px,100%); margin:auto; }
.kettle-comfort-card { min-width:0; }
.kettle-comfort-card figure { margin:0 0 30px; overflow:hidden; border-radius:24px; aspect-ratio:1/1; background:#ddd; }
.kettle-comfort-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.kettle-comfort-card:hover img { transform:scale(1.025); }
.kettle-comfort-card__number { margin:0 0 13px; font-size:11px; letter-spacing:.2em; color:#7c8b82; }
.kettle-comfort-card h3 { margin:0 0 18px; font-family:var(--font-serif); font-size:clamp(20px,2vw,27px); line-height:1.65; font-weight:500; }
.kettle-comfort-card>p:not(.kettle-comfort-card__number) { margin:0; font-size:14px; line-height:2.05; }
.kettle-comfort-card>a { position:relative; display:inline-flex; align-items:center; gap:15px; margin-top:22px; padding-bottom:7px; font-size:13px; color:inherit; }
.kettle-comfort-card>a::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--ease); }
.kettle-comfort-card>a span { transition:transform .35s var(--ease); }
.kettle-comfort-card>a:hover::after, .kettle-comfort-card>a:focus-visible::after { transform:scaleX(1); }
.kettle-comfort-card>a:hover span, .kettle-comfort-card>a:focus-visible span { transform:translateX(5px); }
.kettle-detail-guide { background:#f7f5ef; }
.kettle-detail-guide__inner { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(320px,1fr); align-items:center; gap:clamp(44px,8vw,120px); width:min(1050px,100%); margin:auto; }
.kettle-detail-guide figure { margin:0; overflow:hidden; border-radius:32px; aspect-ratio:1/1; background:#e9eee8; }
.kettle-detail-guide figure img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.kettle-detail-guide__inner>div>p:not(.kettle-scene-kicker) { margin:0 0 32px; line-height:2.1; }
.kettle-scene-button { display:inline-flex; justify-content:center; align-items:center; gap:20px; min-width:min(100%,320px); min-height:68px; padding:15px 28px; border:1px solid #335044; border-radius:999px; color:#294239; transition:background .3s,color .3s; }
.kettle-scene-button:hover { background:#335044; color:#fff; }
.kettle-scene-button i { font-style:normal; }
.kettle-scene-back {
  display:flex;
  justify-content:center;
  padding:46px 20px 70px;
  background:#f8f6f1;
}
.kettle-scene-back a {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-width:220px;
  padding:14px 12px 12px;
  color:#294239;
  letter-spacing:.08em;
}
.kettle-scene-back a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:4px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s ease;
}
.kettle-scene-back a:hover::after,
.kettle-scene-back a:focus-visible::after {
  transform:scaleX(1);
}
.kettle-scene-back i {
  font-style:normal;
  transition:transform .3s ease;
}
.kettle-scene-back a:hover i,
.kettle-scene-back a:focus-visible i {
  transform:translateX(5px);
}
@media(max-width:760px){
 .kettle-scene-breadcrumb{padding-top:88px}
 .kettle-scene-hero{min-height:650px;border-radius:24px}
 .kettle-scene-hero__visual::after{background:linear-gradient(0deg,rgba(20,37,31,.72) 0%,rgba(20,37,31,.15) 72%)}
 .kettle-scene-hero__copy{justify-content:flex-end;width:100%;min-height:650px;padding:42px 28px}
 .kettle-scene-hero h1{font-size:clamp(27px,8vw,38px)}
 .kettle-scene-hero__copy>p:last-child br{display:none}
 .kettle-moment,.kettle-moment--reverse{grid-template-columns:1fr;gap:28px}
 .kettle-moment--reverse figure{order:0}
 .kettle-moment:nth-child(2) figure{aspect-ratio:4/5;max-width:none;justify-self:stretch}
 .kettle-comforts__grid{grid-template-columns:1fr;gap:54px}
 .kettle-detail-guide__inner{grid-template-columns:1fr;gap:38px}
 .kettle-scene-back{padding:34px 20px 52px}
 .kettle-scene-back a{min-width:190px}
}

/* 湯継ケトル使用シーンFV：見出しをPCで指定の2行に固定 */
.kettle-scene-hero h1 span { display:block; }
@media (min-width: 769px) {
  .kettle-scene-hero__copy { width:min(760px, 62%); box-sizing:border-box; }
  .kettle-scene-hero h1 span { white-space:nowrap; }
}

/* Yutsugi lifestyle: natural fixed line breaks for moment headings */
.kettle-moment__copy h2 span {
  display: block;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .kettle-moment__copy h2 span {
    white-space: normal;
  }
}


/* Top NEWS: animate the underline from left to right on hover */
#journal .journal-more .text-link{position:relative;border-bottom:0;}
#journal .journal-more .text-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgba(46,69,60,.62);transform:scaleX(0);transform-origin:left center;transition:transform .32s var(--ease);}
#journal .journal-more .text-link:hover::after,#journal .journal-more .text-link:focus-visible::after{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){#journal .journal-more .text-link::after{transition:none;}}

/* =========================================================
   2026-07-29 Final hover-motion unification
   ========================================================= */

/* Footer links use the same left-to-right underline motion as the header. */
.footer-column a,
.footer-bottom a {
  position: relative;
  width: max-content;
  transform: none;
  transition: color .25s ease;
}

.footer-column a::after,
.footer-bottom a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.footer-column a:hover,
.footer-column a:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--ink);
  transform: none;
}

.footer-column a:hover::after,
.footer-column a:focus-visible::after,
.footer-bottom a:hover::after,
.footer-bottom a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Top product links: remove the circular arrow and use the shared line-link motion. */
.product-showcase__content .product-showcase__names--content .product-showcase__name {
  right: auto;
  width: max-content;
  padding-bottom: 6px;
}

.product-showcase__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.product-showcase__name:hover::after,
.product-showcase__name:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.product-showcase__name i {
  width: auto;
  height: auto;
  display: inline-block;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  transition: transform .3s var(--ease);
}

.product-showcase__name:hover i,
.product-showcase__name:focus-visible i {
  color: inherit;
  background: transparent;
  transform: translateX(5px);
}

/* Materials route uses the same framed-button hover response as repair feedback. */
.craft-next__content > span {
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}

.craft-next:hover .craft-next__content > span,
.craft-next:focus-visible .craft-next__content > span {
  color: var(--craft-dark);
  background: #fff;
  border-color: #fff;
}

/* =========================================================
   2026-07-29 Final adjustment 2
   Product-button and line-link hover consistency
   ========================================================= */

/* All product buttons use the same active appearance and hover motion. */
.products-button--pending {
  opacity: 1;
  cursor: pointer;
}
.products-button--pending:hover {
  color: #fff;
  border-color: var(--ink);
  background: var(--ink);
}
.products-button--pending:hover i {
  transform: translateX(4px);
}

/* Shared line-link animation: the underline grows from left to right. */
.standard-card a,
.product-text-link,
.about-button,
.materials-next__link,
.recruit-text-link,
.job-card__link {
  position: relative;
  border-bottom: 0 !important;
  text-decoration: none;
}
.standard-card a::after,
.product-text-link::after,
.about-button::after,
.materials-next__link::after,
.recruit-text-link::after,
.job-card__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s var(--ease);
  opacity: .72;
}
.standard-card a:hover::after,
.standard-card a:focus-visible::after,
.product-text-link:hover::after,
.product-text-link:focus-visible::after,
.about-button:hover::after,
.about-button:focus-visible::after,
.materials-next__link:hover::after,
.materials-next__link:focus-visible::after,
.recruit-text-link:hover::after,
.recruit-text-link:focus-visible::after,
.job-card__link:hover::after,
.job-card__link:focus-visible::after {
  transform: scaleX(1);
}

/* Keep arrow movement consistent on the shared line links. */
.product-text-link:hover span,
.standard-card a:hover i,
.materials-next__link:hover i,
.recruit-text-link:hover span,
.job-card__link:hover span,
.job-card__link:hover i {
  transform: translateX(4px);
}


/* =========================================================
   2026-07-29 Final adjustment 3
   CTA/button system unification + materials FV size tuning
   A: primary button / B: secondary button / C: text link
   ========================================================= */

/* Materials FV: reduce overall hero height to match craftsmanship / repair more closely. */
.materials-hero {
  min-height: min(820px, 84svh);
  padding-top: calc(var(--header-height) + 34px);
  padding-bottom: 72px;
}
@media (max-width: 900px) {
  .materials-hero {
    min-height: 720px;
    padding-top: calc(var(--header-height) + 36px);
    padding-bottom: 64px;
  }
}
@media (max-width: 640px) {
  .materials-hero {
    min-height: 640px;
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 56px;
  }
}

/* A. Primary button — dark green fill / white text / arrow always / hover reverses. */
.product-button--primary,
.products-button:not(.products-button--light),
.repair-button:not(.repair-button--ghost),
.people-button,
.recruit-primary-button {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 0 0 0 rgba(46,69,60,0);
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.product-button--primary:hover,
.product-button--primary:focus-visible,
.products-button:not(.products-button--light):hover,
.products-button:not(.products-button--light):focus-visible,
.repair-button:not(.repair-button--ghost):hover,
.repair-button:not(.repair-button--ghost):focus-visible,
.people-button:hover,
.people-button:focus-visible,
.recruit-primary-button:hover,
.recruit-primary-button:focus-visible {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46,69,60,.14);
}
.products-button--pending {
  opacity: 1;
  cursor: pointer;
}

/* B. Secondary button — white background / green border / green text / arrow always / hover fills green. */
.outline-button,
.product-button--secondary,
.product-button--light,
.products-button--light,
.repair-button--ghost,
.craft-button {
  border-color: var(--ink) !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 rgba(46,69,60,0);
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.outline-button:hover,
.outline-button:focus-visible,
.product-button--secondary:hover,
.product-button--secondary:focus-visible,
.product-button--light:hover,
.product-button--light:focus-visible,
.products-button--light:hover,
.products-button--light:focus-visible,
.repair-button--ghost:hover,
.repair-button--ghost:focus-visible,
.craft-button:hover,
.craft-button:focus-visible {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46,69,60,.14);
}

/* Shared button arrow motion */
.product-button > span:last-child,
.outline-button > span,
.craft-button > span,
.people-button > span,
.recruit-primary-button > span,
.products-button i,
.repair-button i {
  font-family: Arial, sans-serif;
  font-style: normal;
  line-height: 1;
  transition: transform .3s var(--ease);
}
.product-button:hover > span:last-child,
.product-button:focus-visible > span:last-child,
.outline-button:hover > span,
.outline-button:focus-visible > span,
.craft-button:hover > span,
.craft-button:focus-visible > span,
.people-button:hover > span,
.people-button:focus-visible > span,
.recruit-primary-button:hover > span,
.recruit-primary-button:focus-visible > span,
.products-button:hover i,
.products-button:focus-visible i,
.repair-button:hover i,
.repair-button:focus-visible i {
  transform: translateX(5px);
}
/* Neutralize older hover-only pending behavior; primary rule above now handles it. */
.products-button--pending:hover i,
.products-button--pending:focus-visible i {
  transform: translateX(5px);
}

/* Keep filled/outline buttons centered. */
.product-button,
.outline-button,
.products-button,
.repair-button,
.people-button,
.craft-button {
  justify-content: center;
}
.product-button,
.outline-button,
.products-button,
.repair-button,
.people-button,
.craft-button,
.recruit-primary-button {
  text-decoration: none;
}

/* C. Text link — no line by default / underline grows from left to right on hover / arrow nudges right. */
.text-link,
.about-button,
.product-text-link,
.recruit-text-link,
.standard-card a,
.materials-next__link,
.job-card__link {
  position: relative;
  border-bottom: 0 !important;
  text-decoration: none;
}
.text-link::after,
.about-button::after,
.product-text-link::after,
.recruit-text-link::after,
.standard-card a::after,
.materials-next__link::after,
.job-card__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease);
  opacity: .72;
}
.text-link:hover::after,
.text-link:focus-visible::after,
.about-button:hover::after,
.about-button:focus-visible::after,
.product-text-link:hover::after,
.product-text-link:focus-visible::after,
.recruit-text-link:hover::after,
.recruit-text-link:focus-visible::after,
.standard-card a:hover::after,
.standard-card a:focus-visible::after,
.materials-next__link:hover::after,
.materials-next__link:focus-visible::after,
.job-card__link:hover::after,
.job-card__link:focus-visible::after {
  transform: scaleX(1);
}
.text-link span,
.about-button > span,
.product-text-link span,
.recruit-text-link span,
.standard-card a i,
.materials-next__link i,
.job-card__link span,
.job-card__link i {
  font-family: Arial, sans-serif;
  font-style: normal;
  transition: transform .3s var(--ease);
}
.text-link:hover span,
.text-link:focus-visible span,
.about-button:hover > span,
.about-button:focus-visible > span,
.product-text-link:hover span,
.product-text-link:focus-visible span,
.recruit-text-link:hover span,
.recruit-text-link:focus-visible span,
.standard-card a:hover i,
.standard-card a:focus-visible i,
.materials-next__link:hover i,
.materials-next__link:focus-visible i,
.job-card__link:hover span,
.job-card__link:focus-visible span,
.job-card__link:hover i,
.job-card__link:focus-visible i {
  transform: translateX(5px);
}

/* Remove older link-specific spacing/fade behaviors so all text links feel consistent. */
.about-button {
  gap: 16px;
  transition: color .3s ease;
}
.about-button:hover,
.about-button:focus-visible {
  gap: 16px;
  opacity: 1;
}
.recruit-text-link {
  gap: 16px;
}
.standard-card a,
.text-link,
.product-text-link,
.recruit-text-link,
.about-button,
.materials-next__link,
.job-card__link {
  padding-bottom: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .text-link::after,
  .about-button::after,
  .product-text-link::after,
  .recruit-text-link::after,
  .standard-card a::after,
  .materials-next__link::after,
  .job-card__link::after,
  .product-button > span:last-child,
  .outline-button > span,
  .craft-button > span,
  .people-button > span,
  .recruit-primary-button > span,
  .products-button i,
  .repair-button i,
  .text-link span,
  .about-button > span,
  .product-text-link span,
  .recruit-text-link span,
  .standard-card a i,
  .materials-next__link i,
  .job-card__link span,
  .job-card__link i {
    transition: none;
  }
}

/* Keep recruit primary arrow vertically centered while using the shared motion. */
.recruit-primary-button > span {
  transform: translateY(-50%);
}
.recruit-primary-button:hover > span,
.recruit-primary-button:focus-visible > span {
  transform: translateY(-50%) translateX(5px);
}


/* =========================================================
   2026-07-29 Final adjustment 4
   Adjacent CTA clarity: all sibling pill buttons start outlined,
   and only the hovered/focused button fills dark green.
   ========================================================= */

/* Product detail paired CTAs */
.product-summary__actions .product-button {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none;
}
.product-summary__actions .product-button:hover,
.product-summary__actions .product-button:focus-visible {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46,69,60,.14);
}

/* Maintenance / coming-soon paired CTAs */
.maintenance-actions .repair-button {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none;
}
.maintenance-actions .repair-button:hover,
.maintenance-actions .repair-button:focus-visible {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46,69,60,.14);
}


/* =========================================================
   2026-07-29 Final adjustment 5
   Dark-background CTA clarity + materials hero fade
   ========================================================= */

/* On dark green/photo backgrounds, use a quiet text-link treatment instead of a fill reversal. */
.dark-background-link,
.product-button.dark-background-link,
.products-button.dark-background-link,
.craft-button.dark-background-link,
.craft-next__content > .dark-background-link {
  position: relative;
  width: fit-content;
  min-width: 0;
  min-height: 0;
  margin-top: 32px;
  padding: 0 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none;
  transform: none !important;
  transition: color .3s ease, opacity .3s ease;
}
.dark-background-link::after,
.craft-next__content > .dark-background-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease);
  opacity: .85;
}
.dark-background-link:hover,
.dark-background-link:focus-visible,
.product-button.dark-background-link:hover,
.product-button.dark-background-link:focus-visible,
.products-button.dark-background-link:hover,
.products-button.dark-background-link:focus-visible,
.craft-button.dark-background-link:hover,
.craft-button.dark-background-link:focus-visible,
.craft-next:hover .craft-next__content > .dark-background-link,
.craft-next:focus-visible .craft-next__content > .dark-background-link {
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  opacity: .92;
  transform: none !important;
}
.dark-background-link:hover::after,
.dark-background-link:focus-visible::after,
.craft-next:hover .craft-next__content > .dark-background-link::after,
.craft-next:focus-visible .craft-next__content > .dark-background-link::after {
  transform: scaleX(1);
}
.dark-background-link > span:last-child,
.dark-background-link i,
.craft-next__content > .dark-background-link i {
  font-family: Arial, sans-serif;
  font-style: normal;
  line-height: 1;
  transition: transform .3s var(--ease);
}
.dark-background-link:hover > span:last-child,
.dark-background-link:focus-visible > span:last-child,
.dark-background-link:hover i,
.dark-background-link:focus-visible i,
.craft-next:hover .craft-next__content > .dark-background-link i,
.craft-next:focus-visible .craft-next__content > .dark-background-link i {
  transform: translateX(5px);
}

/* Product repair CTA previously inherited width:100%; keep it compact on the dark section. */
.product-repair__menu .dark-background-link {
  width: fit-content;
}

/* Materials FV: use the photograph as-is, matching the quiet Products FV finish. */
.materials-hero::after {
  content: none;
}

@media (max-width: 640px) {
  .dark-background-link,
  .product-button.dark-background-link,
  .products-button.dark-background-link,
  .craft-button.dark-background-link,
  .craft-next__content > .dark-background-link {
    margin-top: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dark-background-link::after,
  .dark-background-link > span:last-child,
  .dark-background-link i,
  .craft-next__content > .dark-background-link::after,
  .craft-next__content > .dark-background-link i {
    transition: none;
  }
}


/* 2026-07-29 Footer SNS image icons */
.footer-sns img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/* =========================================================
   2026-07-29 Final adjustment 10
   About FV static image / desktop header brand position
   ========================================================= */

/* About FV: disable zoom and keep the workshop image fixed like the other static heroes. */
.about-hero__media img {
  transform: none !important;
  animation: none !important;
}

/* Desktop header: move the logo and company name slightly inward from the left edge. */
@media (min-width: 701px) {
  .site-brand {
    margin-left: clamp(12px, 1.4vw, 24px);
  }
}

/* Keep the mobile header position unchanged. */
@media (max-width: 700px) {
  .site-brand {
    margin-left: 0;
  }
}


/* =========================================================
   FINAL ADJUSTMENT 12
   Craftsmanship step sizing / shaping crop
   ========================================================= */
.craft-page .craft-step {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: clamp(360px, 32vw, 470px);
}

.craft-page .craft-step figure {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 32vw, 470px);
  overflow: hidden;
}

.craft-page .craft-step figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.craft-page .craft-step__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(360px, 32vw, 470px);
}

.craft-page .craft-step--shaping figure img {
  transform: scale(1.34);
  transform-origin: 66% 58%;
  object-position: 67% 57%;
}

@media (max-width: 767px) {
  .craft-page .craft-step,
  .craft-page .craft-step--reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .craft-page .craft-step figure,
  .craft-page .craft-step__body {
    min-height: 0;
  }

  .craft-page .craft-step figure {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .craft-page .craft-step--reverse figure,
  .craft-page .craft-step--reverse .craft-step__body {
    grid-column: 1;
    grid-row: auto;
  }

  .craft-page .craft-step--shaping figure img {
    transform: scale(1.28);
    transform-origin: 66% 58%;
  }
}


/* =========================================================
   FINAL ADJUSTMENT 13
   Top page mobile first-view refinement
   ========================================================= */
@media (max-width: 700px) {
  .hero {
    padding:
      calc(var(--header-height) + 30px)
      18px
      64px;
  }

  .hero-inner {
    gap: 24px;
  }

  .hero-copy {
    width: 100%;
    min-width: 0;
    padding-left: 0;
  }

  .hero-copy__mobile {
    font-size: clamp(30px, 9.4vw, 42px);
    line-height: 1.42;
    letter-spacing: .08em;
  }

  .hero-copy > i {
    margin: 22px 0 18px;
  }

  .hero-copy__sub {
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: .08em;
  }

  .hero-slider {
    width: min(88vw, 430px);
    height: auto;
    aspect-ratio: 1 / 1.08;
    margin: 2px auto 0;
  }

  .hero-slider__viewport {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .hero-slider .slider-image {
    object-position: center 70%;
  }

  .hero-slider .slider-image:nth-child(2) {
    object-position: center 62%;
  }

  .hero-slider .slider-image:nth-child(3) {
    object-position: center 58%;
  }
}


/* =========================================================
   FINAL ADJUSTMENT 14
   Top page mobile first-view perfect circle refinement
   ========================================================= */
@media (max-width: 700px) {
  .hero {
    padding:
      calc(var(--header-height) + 28px)
      18px
      58px;
  }

  .hero-inner {
    gap: 22px;
  }

  .hero-copy > i {
    margin: 20px 0 16px;
  }

  .hero-slider {
    width: min(84vw, 400px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 4px auto 0;
  }

  .hero-slider__viewport {
    border-radius: 50%;
  }

  .hero-slider .slider-image {
    object-position: center 72%;
  }

  .hero-slider .slider-image:nth-child(2) {
    object-position: center 64%;
  }

  .hero-slider .slider-image:nth-child(3) {
    object-position: center 60%;
  }
}


/* =========================================================
   FINAL ADJUSTMENT 17
   Top page mobile FV full-width image and slow zoom
   ========================================================= */
@media (max-width: 700px) {
  .hero {
    padding:
      calc(var(--header-height) + 28px)
      0
      58px;
  }

  .hero-inner {
    width: 100%;
    gap: 24px;
  }

  .hero-copy {
    width: 100%;
    min-width: 0;
    padding: 0 24px;
  }

  .hero-slider {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
  }

  .hero-slider__viewport {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-slider .slider-image {
    object-position: center;
    transform: scale(1);
    transition:
      opacity 1.15s ease,
      visibility 1.15s;
  }

  .hero-slider .slider-image:nth-child(1) {
    object-position: center 68%;
  }

  .hero-slider .slider-image:nth-child(2) {
    object-position: center 52%;
  }

  .hero-slider .slider-image:nth-child(3) {
    object-position: center 58%;
  }

  .hero-slider .slider-image.is-active {
    animation: mobileHeroSlowZoom 11s ease-out forwards;
  }
}

@keyframes mobileHeroSlowZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .hero-slider .slider-image.is-active {
    animation: none;
    transform: scale(1);
  }
}


/* =========================================================
   FINAL ADJUSTMENT 18
   Top page mobile FV continuous zoom during slide changes
   ========================================================= */
@media (max-width: 700px) {
  .hero-slider__viewport {
    transform-origin: center center;
    will-change: transform;
    animation: mobileHeroViewportZoom 24s ease-in-out infinite alternate;
  }

  .hero-slider .slider-image {
    transform: none !important;
    transition:
      opacity 1.15s ease,
      visibility 1.15s;
  }

  .hero-slider .slider-image.is-active {
    animation: none !important;
    transform: none !important;
  }
}

@keyframes mobileHeroViewportZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .hero-slider__viewport {
    animation: none;
    transform: none;
  }
}


/* =========================================================
   FINAL ADJUSTMENT 19
   Mobile FV first-slide zoom start and circle visual sizing
   ========================================================= */
@media (max-width: 700px) {
  /* Start the continuous zoom only after the FV reveal begins.
     This prevents the first slide's zoom from progressing while hidden. */
  .hero-slider__viewport {
    animation: none;
    transform: scale(1);
  }

  .hero-slider.reveal.is-visible .hero-slider__viewport {
    transform-origin: center center;
    will-change: transform;
    animation: mobileHeroViewportZoomStable 12s ease-in-out infinite alternate;
  }

  /* Reduce both circular showcase visuals while preserving the
     image-to-progress-ring proportions and spacing. */
  .product-showcase__main {
    width: min(342px, 72vw);
  }

  .product-frame {
    width: calc(100% + 47px);
    height: calc(100% + 47px);
  }
}

@keyframes mobileHeroViewportZoomStable {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .hero-slider.reveal.is-visible .hero-slider__viewport {
    animation: none;
    transform: scale(1);
  }
}


/* =========================================================
   FINAL ADJUSTMENT 20
   Mobile FV image-only zoom, subtle rounding, spacing, and smaller circle showcases
   ========================================================= */
@media (max-width: 700px) {
  .hero {
    padding:
      calc(var(--header-height) + 28px)
      0
      58px;
  }

  .hero-inner {
    width: 100%;
    gap: 28px;
  }

  .hero-copy {
    width: 100%;
    min-width: 0;
    padding: 0 24px;
  }

  .hero-copy__sub {
    margin-bottom: 18px;
  }

  .hero-slider {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
  }

  .hero-slider__viewport,
  .hero-slider.reveal.is-visible .hero-slider__viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: none;
    transform: none !important;
    animation: none !important;
    will-change: auto;
  }

  .hero-slider .slider-image {
    object-position: center;
    transform: scale(1);
    transition:
      opacity 1.15s ease,
      visibility 1.15s;
    will-change: opacity, transform;
  }

  .hero-slider .slider-image:nth-child(1) {
    object-position: center 68%;
  }

  .hero-slider .slider-image:nth-child(2) {
    object-position: center 52%;
  }

  .hero-slider .slider-image:nth-child(3) {
    object-position: center 58%;
  }

  .hero-slider.reveal.is-visible .slider-image.is-active {
    animation: mobileHeroImageZoomStable 6.5s linear forwards;
  }

  .hero-slider .slider-image.is-leaving {
    opacity: 0;
    visibility: visible;
    transform: scale(1.08);
    animation: none !important;
    pointer-events: none;
  }

  .product-showcase__main {
    width: min(320px, 68vw);
  }

  .product-frame {
    width: calc(100% + 47px);
    height: calc(100% + 47px);
  }
}

@keyframes mobileHeroImageZoomStable {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .hero-slider.reveal.is-visible .slider-image.is-active,
  .hero-slider .slider-image.is-leaving {
    animation: none !important;
    transform: scale(1);
  }
}


/* =========================================================
   FINAL ADJUSTMENT 21
   Hero copy timing and mobile headline animation refinement
   ========================================================= */
.hero-copy.reveal.is-visible .hero-copy__sub {
  animation-delay: 3.45s;
}

.hero-copy__mobile-line {
  position: relative;
  display: block;
  width: max-content;
}

.hero-copy__mobile-base {
  visibility: hidden;
  white-space: nowrap;
}

.hero-copy__mobile-overlay {
  position: absolute;
  inset: 0;
  display: block;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .hero-copy__mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .14em;
    font-size: clamp(27px, 8.5vw, 38px);
    line-height: 1.34;
    letter-spacing: .06em;
    font-weight: 500;
  }
}