/* Hallmark · macrostructure: bespoke · page: index（LP構成案の並び） */

/* ---------- ヒーロー（縦の手仕事動画。PCは屏風のように3面、スマホは1面） ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100dvh; display: grid;
  background: var(--color-ink); color: var(--color-on-dark);
}
.hero__media { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 3px; background: var(--color-ink); }
.hero__v { width: 100%; height: 100%; object-fit: cover; }
.hero__v--side { display: none; }
.hero__panel { overflow: hidden; background: var(--color-ink); }
/* 上下いっぱいに敷く。左は屋根の両端が入る位置、右は写真の右端に寄せて切る */
.hero__photo { width: 100%; height: 100%; object-fit: cover; }
.hero__photo--left { object-position: 40% center; }
.hero__photo--right { object-position: 100% center; }
/* 3面は横長の画面だけ。左右は高さの0.75倍以上の幅にして、屋根の両端が切れないようにする */
@media (min-width: 768px) and (min-aspect-ratio: 7 / 4) {
  .hero__media { grid-template-columns: max(38%, 75dvh) minmax(0, 1fr) max(38%, 75dvh); }
  .hero__v--side { display: block; }
  /* 写真は明るめに、文字が乗る中央の動画とページ下部だけを暗くする */
  .hero::after {
    background:
      linear-gradient(0deg, var(--color-veil-strong) 0%, transparent 40%),
      linear-gradient(90deg, var(--color-veil-soft) max(38%, 75dvh), var(--color-veil) max(38%, 75dvh), var(--color-veil) calc(100% - max(38%, 75dvh)), var(--color-veil-soft) calc(100% - max(38%, 75dvh)));
  }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, var(--color-veil-strong) 0%, transparent 50%),
    var(--color-veil);
}
.hero__inner {
  display: grid; grid-template-rows: 1fr auto; gap: var(--space-2xl);
  padding-top: 112px; padding-bottom: var(--space-3xl);
}
.hero__title {
  justify-self: center; align-self: center;
  font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem); font-weight: 500;
  letter-spacing: 0.24em; line-height: 1.6;
}
/* 縦書きでは block が右から左へ列として並ぶ。2列目は少し下げて始める */
.hero__title span {
  display: block;
  opacity: 0; transform: translateY(-16px);
  transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out);
}
.hero__title span:nth-child(2) { transition-delay: 0.45s; padding-top: 2.2em; }
/* オープニング（木屑が集まって文字になる）を経た場合は、そのまま表示しておく */
.hero.is-opened .hero__title span { opacity: 1; transform: none; transition: none; }
.hero__foot { display: grid; gap: var(--space-xl); opacity: 0; transition: opacity 1.4s var(--ease-out) 0.6s; }
.is-ready .hero__title span, .is-ready .hero__foot { opacity: 1; transform: none; }
.hero__sub { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.14em; line-height: 2; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
@media (min-width: 900px) {
  .hero__inner { padding-bottom: var(--space-3xl); }
}
/* 電話番号が2つ並ぶため、横並びは十分な幅があるときだけ */
@media (min-width: 1200px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
@media (max-width: 767px) {
  .hero__inner { padding-top: 96px; padding-bottom: calc(60px + var(--space-xl)); gap: var(--space-xl); }
  .hero__sub { font-size: var(--text-base); }
  .hero__actions { display: none; }
}

/* ---------- 古民家 施工前後 ---------- */
.renew { padding-block: var(--section-y); }
.renew__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.renew__text .text-link { margin-top: var(--space-xl); }
.renew__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); }
.renew__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-paper-2); }
.renew__img img { width: 100%; height: 100%; object-fit: cover; }
.renew__fig figcaption { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.2em; color: var(--color-muted); }
.renew__arrow { display: grid; place-items: center; width: 40px; height: 40px; border: var(--rule-hair) solid var(--color-navy); border-radius: 50%; color: var(--color-navy); margin-bottom: 2em; }
.renew__arrow .icon { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .renew__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-4xl); }
  .renew__pair { gap: var(--space-lg); }
}
@media (max-width: 519px) {
  .renew__arrow { width: 28px; height: 28px; }
}

/* ---------- 見極める技術 ---------- */
.discern { display: grid; background: var(--color-paper-2); }
.discern__media { overflow: hidden; aspect-ratio: 3 / 2; }
.discern__media img { width: 100%; height: 100%; object-fit: cover; }
.discern__text { padding: var(--space-3xl) var(--gutter) var(--section-y); }
@media (min-width: 900px) {
  .discern { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
  .discern__media { aspect-ratio: auto; height: 100%; min-height: 620px; }
  .discern__text { padding: var(--section-y) var(--gutter) var(--section-y) clamp(2rem, 6vw, 6rem); }
}

/* ---------- 19年 ---------- */
.years { padding-block: var(--section-y); }
.years__inner { display: grid; gap: var(--space-2xl); }
.years__video { overflow: hidden; background: var(--color-ink); aspect-ratio: 9 / 16; max-height: 78vh; width: min(100%, 420px); }
.years__video video { width: 100%; height: 100%; object-fit: cover; }
.years__body { display: grid; gap: var(--space-2xl); align-content: center; }
.years__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-line); }
.years__stats > div { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-line); }
.years__stats > div:nth-child(odd) { border-right: var(--rule-hair) solid var(--color-line); }
.years__stats > div:nth-child(even) { padding-left: var(--space-lg); }
.years__stats dt { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-navy); letter-spacing: 0.12em; line-height: 1.4; }
.years__stats dt .num { font-size: 1.5em; letter-spacing: 0; margin-right: 0.08em; }
.years__stats dd { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.7; }
.years__quals { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-text); }
@media (min-width: 1100px) {
  .years__quals { display: flex; gap: var(--space-lg); }
  .years__quals li { display: inline-flex; align-items: center; }
  .years__quals li + li::before { content: ""; width: 1px; height: 1em; background: var(--color-line); margin-right: var(--space-lg); }
}
@media (min-width: 900px) {
  .years__inner { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4xl); align-items: center; }
  .years__video { width: clamp(280px, 28vw, 400px); }
  .years__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .years__stats > div, .years__stats > div:nth-child(even) { padding: var(--space-lg) var(--space-md); border-right: var(--rule-hair) solid var(--color-line); }
  .years__stats > div:first-child { padding-left: 0; }
  .years__stats > div:last-child { border-right: 0; }
}
@media (max-width: 899px) {
  .years__video { justify-self: center; max-height: 64vh; }
}

/* ---------- 事業内容 ---------- */
.services { padding-block: var(--section-y); background: var(--color-white); }
.services__grid { display: grid; gap: var(--space-xl); margin-top: var(--space-3xl); }
.svc { display: grid; gap: var(--space-md); }
.svc__img { overflow: hidden; background: var(--color-paper-2); aspect-ratio: 4 / 3; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.svc:hover .svc__img img { transform: scale(1.04); }
.svc h3 { font-size: var(--text-xl); color: var(--color-navy); }
.svc p { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.9; }
.services__more { margin-top: var(--space-2xl); }
@media (min-width: 900px) {
  .services__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: var(--space-xl) var(--space-3xl); }
  .svc--lead { grid-row: 1 / span 3; align-content: start; }
  .svc--lead .svc__img { aspect-ratio: 4 / 5; }
  .svc--lead h3 { font-size: var(--text-2xl); }
  .svc:not(.svc--lead) { grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: var(--space-xl); }
  .svc:not(.svc--lead) .svc__img { aspect-ratio: 1; }
}

/* ---------- 施工事例ストリップ ---------- */
.works { padding-block: var(--section-y); background: var(--color-navy); color: var(--color-on-dark); }
.works .sec-title { color: var(--color-on-dark); }
.works .text-link { color: var(--color-on-dark); margin-top: var(--space-xl); }
.works__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); }
.works__nav { display: flex; gap: var(--space-xs); }
.works__btn { display: grid; place-items: center; width: 48px; height: 48px; border: var(--rule-hair) solid var(--color-line-dark); transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.works__btn:hover { background: var(--color-on-dark); color: var(--color-navy); }
.works__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 340px); gap: var(--space-lg);
  margin-top: var(--space-2xl); padding-inline: max(var(--gutter), (100vw - var(--max-w)) / 2);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), (100vw - var(--max-w)) / 2);
  scrollbar-width: thin; scrollbar-color: var(--color-line-dark) transparent; padding-bottom: var(--space-md);
}
.works__strip li { scroll-snap-align: start; }
.works__strip a { display: grid; gap: var(--space-sm); }
.works__strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity var(--dur-base) var(--ease-out); }
.works__strip a:hover img { opacity: 0.8; }
.works__cat { font-size: var(--text-xs); letter-spacing: 0.2em; color: var(--color-hanada); }
.works__strip h3 { font-size: var(--text-base); letter-spacing: 0.1em; line-height: 1.7; }

/* ---------- お悩み / 流れ ---------- */
.consult { padding-block: var(--section-y); }
.consult__inner { display: grid; gap: var(--space-4xl); }
.consult .sec-title { font-size: var(--text-2xl); }
.worry-list { margin-top: var(--space-xl); display: grid; gap: var(--space-sm); }
.worry-list li { display: flex; gap: var(--space-sm); align-items: flex-start; line-height: 1.7; }
.worry-list .icon { margin-top: 0.2em; color: var(--color-accent); stroke-width: 2; }
.flow { margin-top: var(--space-xl); display: grid; gap: 0; counter-reset: flow; }
.flow li {
  counter-increment: flow; position: relative;
  display: grid; grid-template-columns: 3rem 2.5rem minmax(0, 1fr); column-gap: var(--space-md); align-items: center;
  padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-line);
}
.flow li:last-child { border-bottom: var(--rule-hair) solid var(--color-line); }
.flow li::before { content: counter(flow, decimal-leading-zero); font-family: var(--font-latin); font-size: var(--text-xl); color: var(--color-accent); font-variant-numeric: lining-nums; grid-row: 1 / span 2; }
.flow .icon { width: 28px; height: 28px; color: var(--color-navy); grid-row: 1 / span 2; }
.flow h3 { font-size: var(--text-base); color: var(--color-navy); letter-spacing: 0.1em; }
.flow p { grid-column: 3; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.7; }
@media (min-width: 1024px) {
  .consult__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-4xl); }
  .consult__worry { padding: var(--space-2xl); background: var(--color-paper-2); align-self: start; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .worry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
}

/* ---------- 代表のことば ---------- */
.words { padding-block: var(--section-y); background: var(--color-paper-2); }
.words__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.words__quote p {
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
  letter-spacing: 0.2em; line-height: 1.9; color: var(--color-navy);
  max-height: 16em; margin-inline: auto;
}
.words__body { display: grid; gap: var(--space-lg); max-width: 30em; }
.words__name { font-size: var(--text-sm); color: var(--color-muted); }
.words__name b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--color-text); letter-spacing: 0.3em; }
.words__img { overflow: hidden; aspect-ratio: 4 / 5; max-width: 320px; }
.words__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .words__inner { grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.7fr); gap: var(--space-4xl); }
  .words__img { justify-self: end; width: 100%; }
}
@media (max-width: 899px) {
  .words__quote { display: flex; justify-content: center; }
  .words__img { justify-self: end; width: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title span, .hero__foot { opacity: 1; transform: none; }
}