@charset "UTF-8";

/* --------------------------------------------------------------------------
   hero（KV）
   -------------------------------------------------------------------------- */
.top-hero {
  --kv: min(100%, 1600px);
  --kv-left: calc((100% - var(--kv)) / 2);
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 900;
  max-height: 1000px;
  background-color: var(--color-base);
  overflow: hidden;
  isolation: isolate;
}

.top-hero__photos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 72.444%;
}

.top-hero__clip {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.top-hero__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: url(#hero-arch);
}

.top-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.top-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.top-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 39.2% 49.1%);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 画像の幅は font-size に比例させる（96px のとき 604px） */
.top-hero__catch {
  position: absolute;
  top: 49.556%;
  left: calc(var(--kv-left) + var(--kv) * 0.10833);
  width: 6.2917em;
  font-size: clamp(var(--fs-68), 6.667vw, 6.667rem);
}

.top-hero__catch-img {
  display: block;
  width: 100%;
  height: auto;
}

.top-hero__sub {
  position: absolute;
  top: 77.3%;
  left: calc(var(--kv-left) + var(--kv) * 0.10833);
  color: var(--color-sumi);
  font-size: clamp(var(--fs-14), 1.389vw, 1.389rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.top-hero__services {
  position: absolute;
  top: 57.778%;
  left: calc(var(--kv-left) + var(--kv) * 0.72014);
  display: block;
  width: calc(var(--kv) * 0.17361);
  aspect-ratio: 1;
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-red);
  border-radius: 50%;
  transition: transform var(--duration-normal) var(--ease-out);
}

.top-hero__services:hover,
.top-hero__services:focus-visible {
  transform: scale(1.04);
}

.top-hero__services:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
}

.top-hero__services-en,
.top-hero__services-ja {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 1.6;
}

.top-hero__services-en {
  top: 31.4%;
  font-family: var(--font-en);
  font-size: clamp(var(--fs-20), 1.944vw, 1.944rem);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.top-hero__services-ja {
  top: 50.4%;
  font-size: clamp(var(--fs-10), 0.833vw, 0.833rem);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.top-hero__services::after {
  content: "";
  position: absolute;
  top: 64%;
  left: 50%;
  width: 10.9%;
  aspect-ratio: 1;
  background-color: currentColor;
  mask: url("../img/common/icon_arrow_bold.svg") no-repeat center / contain;
  -webkit-mask: url("../img/common/icon_arrow_bold.svg") no-repeat center / contain;
  transform: translateX(-50%);
  transition: transform var(--duration-normal) var(--ease-out);
}

.top-hero__services:hover::after,
.top-hero__services:focus-visible::after {
  transform: translateX(-30%);
}

.top-hero__scroll {
  position: absolute;
  top: 70.889%;
  left: calc(var(--kv-left) + var(--kv) * 0.95);
  width: calc(var(--kv) * 0.02153);
  aspect-ratio: 31 / 119;
  color: var(--color-red);
  --hero-scroll-cycle: 3.0178845s;
  --hero-scroll-shrink-ease: ease-in-out;
  --hero-scroll-contract: 94%;
  --hero-scroll-exit: 115%;
}

.top-hero__scroll::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: currentColor;
  border-radius: 1px;
  transform-origin: 50% 0;
  scale: 1 0.0504;
  translate: 0 -5.04%;
  animation:
    heroScrollBarScale var(--hero-scroll-cycle) var(--hero-scroll-shrink-ease) infinite,
    heroScrollBarMove var(--hero-scroll-cycle) linear infinite,
    heroScrollBarOrigin var(--hero-scroll-cycle) linear infinite;
}

.top-hero__scroll-label {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-en);
  font-size: clamp(var(--fs-8), 0.694vw, 0.694rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.23em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  animation:
    heroScrollLabelFade var(--hero-scroll-cycle) linear infinite,
    heroScrollLabelMove var(--hero-scroll-cycle) linear infinite;
}

@keyframes heroScrollBarOrigin {
  0% { transform-origin: 50% 0; animation-timing-function: step-end; }
  45%, 100% { transform-origin: 50% 100%; }
}

@keyframes heroScrollBarScale {
  0% { scale: 1 0.0504; animation-timing-function: ease-out; }
  45% { scale: 1 1; }
  100% { scale: 1 0.0504; }
}

@keyframes heroScrollBarMove {
  0% { translate: 0 -5.04%; animation-timing-function: ease-in; }
  45% { translate: 0 -1.42%; }
  55% { translate: 0 calc(var(--hero-scroll-contract) - 100%); }
  100% { translate: 0 calc(var(--hero-scroll-exit) - 100%); }
}

@keyframes heroScrollLabelFade {
  0% { opacity: 0; animation-timing-function: ease-out; }
  15% { opacity: 1; animation-timing-function: ease-in-out; }
  50%, 100% { opacity: 0; }
}

@keyframes heroScrollLabelMove {
  0% { transform: translateY(0); animation-timing-function: ease-in-out; }
  50%, 100% { transform: translateY(min(2.43vw, 2.43rem)); }
}

.top-hero__marquee {
  position: absolute;
  /* 位置は下端基準。上端基準にすると 950px 以下で文字が KV からはみ出す */
  bottom: 2.4%;
  left: 0;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  font-family: var(--font-en);
  font-size: clamp(var(--fs-52), 5vw, 5rem);
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-text);
  white-space: nowrap;
  pointer-events: none;
}

.top-hero__marquee-track {
  display: flex;
  width: max-content;
  animation: heroMarquee 30.178845s linear infinite;
}

.top-hero__marquee-track > span {
  display: block;
  padding-right: 0.56em;
}

@keyframes heroMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .top-hero__scroll::before,
  .top-hero__scroll-label,
  .top-hero__marquee-track {
    animation: none;
  }
  .top-hero__scroll-label {
    opacity: 1;
  }
  .top-hero__scroll::before {
    scale: 1 0.185;
    translate: none;
  }
  .top-hero__services,
  .top-hero__services::after {
    transition: none;
  }
}

/* TAB */
@media (max-width: 1024px) {
  .top-hero__catch {
    font-size: clamp(var(--fs-52), 6.667vw, var(--fs-68));
  }
}

/* SP */
@media (max-width: 767px) {
  .top-hero {
    aspect-ratio: auto;
    /* 外すと overflow: hidden で KV の下が切れる */
    max-height: none;
    padding-bottom: 80px;
  }
  .top-hero__photos {
    position: relative;
    height: auto;
    aspect-ratio: 375 / 300;
  }
  .top-hero__catch {
    position: relative;
    top: auto;
    left: auto;
    margin-top: -1.2em;
    margin-inline: 5.333%;
    font-size: clamp(2.5rem, 11.7vw, var(--fs-68));
  }
  .top-hero__sub {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 24px;
    margin-inline: 5.333%;
    font-size: var(--fs-14);
    white-space: normal;
  }
  .top-hero__action {
    position: relative;
    margin-top: 32px;
  }
  .top-hero__services {
    position: relative;
    top: auto;
    left: auto;
    width: 160px;
    margin-inline: auto;
  }
  .top-hero__services-en {
    font-size: var(--fs-20);
  }
  .top-hero__services-ja {
    font-size: var(--fs-10);
  }
  .top-hero__scroll {
    top: 50%;
    left: calc(50% + 80px + 52px);
    width: 31px;
    translate: 0 -50%;
  }
  .top-hero__scroll-label {
    font-size: var(--fs-10);
  }
  .top-hero__marquee {
    bottom: 0.25em; /* g の下端は字面下 0.18em。縁取り 1px ぶんと合わせて KV に切られない値 */
    font-size: var(--fs-52);
  }
}

/* --------------------------------------------------------------------------
   about（私たちについて）
   -------------------------------------------------------------------------- */
.top-about {
  --about-photo-max-width: 1309px;
  --about-photo-max-height: 681px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns:
    minmax(0, var(--about-photo-max-width))
    min(13.542%, 195px)
    min(28.889%, 416px)
    var(--content-gutter);
  align-items: center;
  justify-content: end;
  padding-block: var(--space-section-lg);
  background-color: var(--color-base);
}

/* 1440 未満は比率で縮小、1440 以上は高さ 681 のまま横だけ伸びる */
.top-about__img {
  grid-column: 1;
  width: 100%;
  max-height: var(--about-photo-max-height);
  aspect-ratio: 749 / 681;
  object-fit: cover;
  object-position: center;
  border-radius: 0 var(--radius-6) var(--radius-6) 0;
}

.top-about__content {
  grid-column: 3;
  position: relative;
  z-index: 1;
}

.top-about__body {
  margin-top: 30px;
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.top-about .c-button {
  margin-top: 77px;
}

@media (max-width: 1280px) {
  .top-about__body {
    white-space: normal;
  }
  .top-about__body br {
    display: none;
  }
}

/* 979px 以下 */
@media (max-width: 979px) {
  .top-about {
    grid-template-columns: var(--content-gutter) minmax(0, 1fr) var(--content-gutter);
    row-gap: 40px;
  }
  .top-about__img {
    grid-column: 1 / 3;
    aspect-ratio: 4 / 3;
  }
  .top-about__content {
    grid-column: 2;
  }
  .top-about .c-button {
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .top-about__img {
    grid-column: 1 / -1;
    border-radius: 0;
  }
  .top-about__body {
    font-size: var(--fs-14);
  }
}

/* --------------------------------------------------------------------------
   strength（渡辺電気工業所の強み）
   -------------------------------------------------------------------------- */
.top-strength {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section-lg);
  background-color: var(--color-base);
}

.top-strength__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 26.406% minmax(0, 1fr);
  column-gap: 6.094%;
  align-items: start;
}

.top-strength__body {
  margin-top: 28px;
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.top-strength .c-button {
  margin-top: 77px;
}

.top-strength__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.top-strength__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 248px;
  padding: 23px 28px 21px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-6);
}

.top-strength__num {
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1;
}

.top-strength__title {
  margin-top: auto;
  color: var(--color-red);
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.top-strength__text {
  margin-top: 13px;
  color: var(--color-text-sub);
  font-size: var(--fs-16);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.top-strength__icon {
  position: absolute;
  top: 17px;
  right: 16px;
  width: clamp(96px, 10.833vw, 156px);
  height: auto;
}

.top-strength__bg-word {
  bottom: calc(42px - 0.111em);
}

@media (max-width: 979px) {
  .top-strength {
    padding-top: 0;
  }
  .top-strength__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .top-strength .c-button {
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .top-strength__bg-word {
    bottom: -0.111em;
  }
  .top-strength__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .top-strength__body {
    font-size: var(--fs-14);
  }
  .top-strength__item {
    min-height: 0;
    padding: 24px;
  }
  .top-strength__title {
    margin-top: 16px; /* min-height を外すと番号と密着するため */
  }
  .top-strength__icon {
    width: 96px;
  }
}

/* --------------------------------------------------------------------------
   issue（こんなお困りごとはありませんか？）
   -------------------------------------------------------------------------- */
.top-issue {
  --issue-card-height: clamp(170px, 16.667vw, 240px);
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section-lg);
  background-color: var(--color-base);
}

.top-issue::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-red);
  border-radius: var(--radius-128) var(--radius-128) 0 0;
}

.top-issue__inner {
  position: relative;
  z-index: 1;
}

.top-issue__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px 24px;
  margin-top: 158px;
  padding-bottom: 88px;
}

.top-issue__item:nth-child(even) {
  translate: 0 88px;
}

.top-issue__item {
  display: flex;
  align-items: flex-end;
  height: var(--issue-card-height);
  background-color: var(--color-surface);
  border-radius: calc(var(--issue-card-height) / 2);
}

.top-issue__illust {
  position: relative;
  flex-shrink: 0;
  width: 51.592%;
  min-height: var(--issue-card-height);
  aspect-ratio: 324 / 285;
  overflow: hidden;
  border-bottom-left-radius: calc(var(--issue-card-height) / 2);
}

/* 枡の下端に揃え、枡幅の 16.975% 沈めて下端を切る */
.top-issue__art {
  position: absolute;
  bottom: 0;
  left: 4.938%;
  width: 90.123%;
  height: auto;
  margin-bottom: -16.975%;
}

.top-issue__text {
  flex: 1 1 0;
  align-self: center;
  min-width: 0;
  padding: 32px 32px 32px 24px;
  color: var(--color-text);
  font-size: clamp(var(--fs-20), 1.736vw, var(--fs-25));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.top-issue__bg-word {
  bottom: calc(45px - 0.111em);
  color: var(--color-bg-word-on-red);
}

/* 979px 以下 */
@media (max-width: 979px) {
  .top-issue {
    --issue-card-height: clamp(180px, 33vw, 240px);
  }
  .top-issue__list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 628px;
    row-gap: 64px;
    margin-top: 85px;
    margin-inline: auto;
    padding-bottom: 0;
  }
  .top-issue__item:nth-child(even) {
    translate: none;
  }
}

@media (max-width: 767px) {
  .top-issue {
    --issue-card-height: min(41vw, 249px);
  }
  .top-issue__list {
    row-gap: 24px;
    margin-top: 40px;
  }
  .top-issue__illust {
    width: 45%;
  }
  .top-issue__text {
    padding: 16px 24px 16px 12px;
    font-size: var(--fs-18);
  }
}

/* --------------------------------------------------------------------------
   photoBand
   -------------------------------------------------------------------------- */
.top-photo-band {
  aspect-ratio: 1440 / 615;
  background-color: var(--color-surface);
}

.top-photo-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   business（事業案内）
   -------------------------------------------------------------------------- */
.top-business {
  --business-overlap: var(--radius-128);
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--space-section-lg) - var(--business-overlap));
  padding-bottom: var(--space-section-lg);
}

.top-business::before {
  content: "";
  position: absolute;
  inset: calc(var(--business-overlap) * -1) 0;
  z-index: -1;
  background-color: var(--color-red);
  border-radius: var(--business-overlap) var(--business-overlap) 0 0;
}

.top-business__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.top-business__intro {
  width: 43.75%;
  margin-top: -5px;
  color: var(--color-white);
}

.top-business__intro-title {
  font-size: clamp(var(--fs-20), 1.806vw, var(--fs-26));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.top-business__intro-text {
  margin-top: 14px;
  font-size: var(--fs-17);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.top-business__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 54.0625% minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 76px;
}

.top-business__item--large {
  grid-row: 1 / 3;
  aspect-ratio: 692 / 680;
}

.top-business__card {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  color: var(--color-white);
  border-radius: var(--radius-12);
  isolation: isolate;
}

.top-business__card:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.top-business__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-slow) var(--ease-out);
}

.top-business__card:hover .top-business__photo,
.top-business__card:focus-visible .top-business__photo {
  scale: 1.05;
}

.top-business__card::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 170px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
}

.top-business__item--large .top-business__card::before {
  height: 300px;
}

.top-business__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--color-sumi);
  opacity: 0.18;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.top-business__card:hover::after,
.top-business__card:focus-visible::after {
  opacity: 0.38;
}

.top-business__body {
  position: absolute;
  display: block;
  right: 24px;
  bottom: 30px;
  left: 24px;
  z-index: 2;
  padding-right: 32px;
}

.top-business__item--large .top-business__body {
  right: 36px;
  left: 36px;
  padding-right: 192px;
}

.top-business__label,
.top-business__title,
.top-business__text {
  display: block;
}

.top-business__label {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-en);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
}

.top-business__title {
  margin-top: 14px;
  font-size: clamp(var(--fs-20), 2.222vw, var(--fs-32));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.top-business__item--large .top-business__title {
  margin-top: 20px;
  font-size: clamp(var(--fs-28), 3.333vw, var(--fs-48));
}

.top-business__text {
  margin-top: 11px;
  font-size: var(--fs-16);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.top-business__item--large .top-business__text {
  margin-top: 17px;
}

.top-business__body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 6px;
  width: 17.4px;
  height: 14.9px;
  background-color: currentColor;
  mask: url("../img/common/icon_arrow_wide.svg") no-repeat center / contain;
  -webkit-mask: url("../img/common/icon_arrow_wide.svg") no-repeat center / contain;
  transition: translate var(--duration-normal) var(--ease-out);
}

.top-business__item--large .top-business__body::after {
  width: 20.5px;
  height: 17.5px;
}

.top-business__card:hover .top-business__body::after,
.top-business__card:focus-visible .top-business__body::after {
  translate: 8px 0;
}

.top-business__bg-word {
  bottom: calc(46px - 0.111em);
  color: var(--color-bg-word-on-red);
}

@media (prefers-reduced-motion: reduce) {
  .top-business__photo,
  .top-business__card::after,
  .top-business__body::after {
    transition: none;
  }
}

/* 979px 以下 */
@media (max-width: 979px) {
  .top-business__head {
    flex-direction: column;
    gap: 32px;
  }
  .top-business__intro {
    width: 100%;
  }
  .top-business__list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    margin-top: 40px;
  }
  .top-business__item--large {
    grid-row: auto;
    aspect-ratio: 692 / 480;
  }
  .top-business__item {
    aspect-ratio: 580 / 336;
  }
}

@media (max-width: 767px) {
  .top-business__list {
    gap: 12px;
  }
  .top-business__item,
  .top-business__item--large {
    aspect-ratio: 4 / 3;
  }
  .top-business__item--large .top-business__body {
    right: 24px;
    left: 24px;
    padding-right: 32px;
  }
  .top-business__item--large .top-business__card::before {
    height: 200px;
  }
  .top-business__intro-text,
  .top-business__text {
    font-size: var(--fs-14);
  }
}

/* --------------------------------------------------------------------------
   flow（施工の流れ）
   -------------------------------------------------------------------------- */
.top-flow {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section-lg);
}

.top-flow::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--radius-128) * -1);
  z-index: -1;
  background-color: var(--color-surface);
  border-radius: var(--radius-128) var(--radius-128) 0 0;
}

.top-flow__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 26.406% minmax(0, 1fr);
  column-gap: 2.8125%;
  align-items: start;
}

.top-flow__head {
  margin-top: 32px;
}

.top-flow__list {
  counter-reset: flow;
}

.top-flow__item {
  position: relative;
  padding-left: 102px;
  counter-increment: flow;
}

.top-flow__item::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  top: 39px;
  left: 30px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1;
  background-color: var(--color-red);
  border-radius: 50%;
}

.top-flow__item::after {
  content: "";
  position: absolute;
  top: 59px;
  left: 49px;
  width: 2px;
  height: 100%;
  background-color: var(--color-red);
}

.top-flow__item:last-child::after {
  display: none;
}

.top-flow__body {
  padding: 26.5px 0 22.5px;
  border-bottom: 1px solid var(--color-border);
}

.top-flow__title {
  font-size: clamp(var(--fs-20), 1.806vw, var(--fs-26));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.top-flow__text {
  margin-top: 14px;
  font-size: var(--fs-16);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.top-flow__bg-word {
  bottom: calc(46px - 0.111em);
}

/* 979px 以下 */
@media (max-width: 979px) {
  .top-flow__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .top-flow__head {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .top-flow__item {
    padding-left: 64px;
  }
  .top-flow__item::before {
    left: 0;
  }
  .top-flow__item::after {
    left: 19px;
  }
  .top-flow__text {
    font-size: var(--fs-14);
  }
}

/* --------------------------------------------------------------------------
   case（施工実績）
   -------------------------------------------------------------------------- */
.top-case {
  --case-offset: 48px;
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section-lg);
}

.top-case::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--radius-128) * -1);
  z-index: -1;
  background-color: var(--color-white);
  border-radius: var(--radius-128) var(--radius-128) 0 0;
}

.top-case__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.top-case__controls {
  display: flex;
  align-items: center;
  gap: 64px;
}

.top-case .c-button {
  height: 48px;
}

.top-case__slider {
  position: relative;
  z-index: 1;
  margin-top: 93px;
  margin-left: var(--content-gutter);
  padding-bottom: var(--case-offset);
}

.top-case__slider .swiper-wrapper {
  align-items: stretch;
}

.top-case__item {
  width: 312px;
  height: auto;
}

/* 高さを揃えたまま見た目だけ下げるので translate。margin だと揃えが崩れる */
.top-case__item--offset {
  translate: 0 var(--case-offset);
}

.top-case__bg-word {
  bottom: calc(45px - 0.111em);
}

/* 979px 以下 */
@media (max-width: 979px) {
  .top-case__head {
    flex-wrap: wrap;
  }
  .top-case__slider {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .top-case__controls {
    gap: 24px;
  }
  .top-case__item {
    width: 280px;
  }
  .top-case__item--offset {
    translate: none;
  }
  .top-case__slider {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   news（お知らせ）
   -------------------------------------------------------------------------- */
.top-news {
  position: relative;
  isolation: isolate;
  padding-top: var(--space-section-lg);
  padding-bottom: 105px;
  background-color: var(--color-base);
  border-radius: var(--radius-128) var(--radius-128) 0 0;
}

.top-news__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 27.422% minmax(0, 1fr);
  align-items: start;
}

.top-news .c-button {
  height: 48px;
  margin-top: 87px;
}

.top-news__bg-word {
  bottom: calc(69px - 0.111em);
}

/* 979px 以下 */
@media (max-width: 979px) {
  .top-news__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .top-news__intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
  .top-news .c-button {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   sustainability（サステナビリティ）
   -------------------------------------------------------------------------- */
.top-sustainability {
  background-color: var(--color-base);
}

.top-sustainability__banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 425px;
  padding: 0 9.375% 10px;
  overflow: hidden;
  color: var(--color-white);
  border-radius: var(--radius-6);
  isolation: isolate;
}

.top-sustainability__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-sustainability__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(0, 67, 30, 0) 27.93%, #00431e 60.432%);
}

.top-sustainability__body {
  position: relative;
  z-index: 1;
  width: 454px;
  max-width: 100%;
}

.top-sustainability__en {
  font-family: var(--font-en);
  font-size: clamp(var(--fs-52), 4.583vw, var(--fs-66));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.top-sustainability__ja {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: var(--fs-15);
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 0.04em;
}

.top-sustainability__ja::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background-color: currentColor;
  border-radius: 50%;
}

.top-sustainability__text {
  margin-top: 25px;
  font-size: var(--fs-18);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.top-sustainability .c-button {
  margin-top: 30px;
}

@media (max-width: 979px) {
  .top-sustainability__banner {
    justify-content: flex-start;
    min-height: 0;
    padding: 64px 8%;
  }
  .top-sustainability__banner::before {
    background: linear-gradient(90deg, rgba(0, 67, 30, 0.6) 0%, #00431e 70%);
  }
}

@media (max-width: 767px) {
  .top-sustainability__banner {
    padding: 48px 24px;
  }
  .top-sustainability__en {
    font-size: min(var(--fs-52), 11.2vw);
  }
  .top-sustainability__text {
    font-size: var(--fs-14);
  }
}

/* --------------------------------------------------------------------------
   faq（よくある質問）
   -------------------------------------------------------------------------- */
.top-faq {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-section-lg);
  padding-bottom: calc(var(--space-section-lg) + var(--footer-overlap));
  background-color: var(--color-base);
}

.top-faq__inner {
  position: relative;
  z-index: 1;
}

.top-faq__list {
  margin-top: 75px;
  border-top: 1px solid var(--color-border);
}

.top-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.top-faq__q {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 27.9px;
  list-style: none;
  cursor: pointer;
}

.top-faq__q::-webkit-details-marker {
  display: none;
}

.top-faq__q:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.top-faq__mark {
  flex-shrink: 0;
  width: 28px;
  color: var(--color-text-sub);
  font-family: var(--font-en);
  font-size: var(--fs-28);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.top-faq__mark--a {
  color: var(--color-red);
}

.top-faq__question {
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(var(--fs-18), 1.528vw, var(--fs-22));
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* ＋／−：縦バーは開くと回転して消える */
.top-faq__q::after {
  content: "";
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  color: var(--color-text);
  transition: background-size var(--duration-normal) var(--ease-out);
}

.top-faq__item[open] .top-faq__q::after {
  background-size: 14px 2px, 2px 0;
}

/* 負のマージンで食い込ませると ::details-content の外へ出て、閉じたときに見えてしまう */
.top-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.top-faq__mark--a,
.top-faq__answer {
  padding: 3px 0 29px;
}

.top-faq__answer {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-18);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

@supports (text-box: trim-start cap alphabetic) {
  .top-faq__answer {
    text-box: trim-start cap alphabetic;
  }
  .top-faq__mark--a {
    text-box: trim-both cap alphabetic;
  }
}

/* 非対応ブラウザ（Firefox など）：行送りぶんを translate で持ち上げ、下余白を詰めて高さも揃える */
@supports not (text-box: trim-start cap alphabetic) {
  .top-faq__mark--a,
  .top-faq__answer {
    padding-bottom: 17px;
  }
  .top-faq__answer {
    translate: 0 -10.6px;
  }
  .top-faq__mark--a {
    translate: 0 -4px;
  }
}

/* 開閉アニメーション：::details-content を 1 行グリッドにし 0fr → 1fr を transition（interpolate-size は Chrome/Edge 限定のため不使用） */
.top-faq__item::details-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: clip;
  transition:
    grid-template-rows var(--duration-normal) var(--ease-out),
    content-visibility var(--duration-normal) allow-discrete;
}

.top-faq__item[open]::details-content {
  grid-template-rows: 1fr;
}

.top-faq__a {
  min-height: 0;
}

.top-faq__bg-word {
  bottom: calc(48px + var(--footer-overlap) - 0.111em);
}

@media (prefers-reduced-motion: reduce) {
  .top-faq__q::after,
  .top-faq__item::details-content {
    transition: none;
  }
}

@media (max-width: 979px) {
  .top-faq__list {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .top-faq__q {
    gap: 12px;
    padding-block: 20px;
  }
  .top-faq__mark {
    width: 22px;
    font-size: var(--fs-20);
  }
  .top-faq__a {
    gap: 12px;
  }
  .top-faq__mark--a,
  .top-faq__answer {
    padding-bottom: 24px;
  }
  .top-faq__answer {
    font-size: var(--fs-14);
  }
}