:root {
  --paper: #fbfaf5;
  --paper-deep: #f4f0e6;
  --ink: #22211d;
  --sub: #292929;
  --line: #d9d3c4;
  --green: #19664d;
  --green-soft: #6f8664;
  --brown: #5a4638;
  --red: #9d5248;
  --yellow: #d6bc61;
  --max: 1120px;
  --wave-space: clamp(340px, 31vw, 520px);
  --right-nav-space: clamp(28px, 4vw, 72px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "Times New Roman", serif;
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.03em;
}

body:not(.is-loaded) {
  overflow-x: hidden;
}

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

.page-mark {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 3;
  width: clamp(220px, 29vw, 390px);
  overflow: hidden;
  pointer-events: none;
}

.page-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 1600' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 0H338C354 70 351 121 324 179C294 244 299 310 338 374C372 431 392 490 365 552C337 618 314 679 344 753C371 820 396 877 365 947C335 1015 316 1074 346 1148C376 1223 385 1281 352 1360C322 1433 304 1502 319 1600H0Z'/%3E%3C/svg%3E") left top / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 1600' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 0H338C354 70 351 121 324 179C294 244 299 310 338 374C372 431 392 490 365 552C337 618 314 679 344 753C371 820 396 877 365 947C335 1015 316 1074 346 1148C376 1223 385 1281 352 1360C322 1433 304 1502 319 1600H0Z'/%3E%3C/svg%3E") left top / 100% 100% no-repeat;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 980ms ease, transform 980ms ease;
}

body.is-loaded .page-mark::before {
  opacity: 1;
  transform: translateY(0);
}

.page-mark span {
  position: sticky;
  top: 18vh;
  z-index: 1;
  display: block;
  width: 44%;
  color: #fff;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.9;
  text-align: center;
  writing-mode: vertical-rl;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 760ms ease 920ms, transform 760ms ease 920ms;
}

body.is-loaded .page-mark span {
  opacity: 1;
  transform: translateY(0);
}

.site-header {
  position: fixed;
  top: calc(18vh + 235px);
  left: clamp(34px, 5.4vw, 78px);
  z-index: 4;
  display: block;
  width: clamp(128px, 11vw, 168px);
  min-height: 0;
  margin: 0;
  padding: 0;
}

.site-logo {
  display: none;
}

.global-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  gap: 12px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  writing-mode: horizontal-tb;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 760ms ease 1080ms, transform 760ms ease 1080ms;
}

body.is-loaded .global-nav {
  opacity: 1;
  transform: translateY(0);
}

.global-nav a {
  position: relative;
  padding-left: 14px;
}

.global-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 180ms ease;
}

.global-nav a:hover::after,
.global-nav a:focus-visible::after {
  transform: scaleX(2.2);
}

.nav-toggle {
  display: none;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
  width: min(var(--max), calc(100% - var(--wave-space) - var(--right-nav-space)));
  margin-left: var(--wave-space);
  margin-right: auto;
  padding-right: 0;
}

@media (min-width: 1500px) {
  :root {
    --max: 1240px;
    --wave-space: clamp(390px, 27vw, 560px);
    --right-nav-space: clamp(32px, 4vw, 76px);
  }
}

.section {
  padding: clamp(74px, 8vw, 120px) 0;
  text-align: center;
}

.reveal,
.reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 780ms ease, transform 780ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-kicker {
  margin: 0 0 18px;
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.statement > .section-kicker,
.about > .section-kicker {
  margin-bottom: clamp(30px, 3.4vw, 48px);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 28px;
  color: var(--green);
  font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

h2 {
  margin-bottom: 42px;
  color: var(--green);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

h3 {
  margin-bottom: 10px;
  color: var(--green);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.65;
}

.hero {
  min-height: calc(100vh - 88px);
  display: grid;
  align-content: center;
  justify-items: center;
  padding-top: 0;
  padding-bottom: 16vh;
}

.hero__logo {
  display: block;
  width: min(310px, 33vw);
  height: auto;
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity 820ms ease 1220ms, transform 820ms ease 1220ms;
}

.hero h1 {
  margin-bottom: 0;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 820ms ease 1380ms, transform 820ms ease 1380ms;
}

.hero__lead,
.section-lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: var(--sub);
}

.about > .section-kicker,
.about > h2 {
  position: relative;
  z-index: 2;
}

.hero__lead {
  max-width: 520px;
  margin-top: 48px;
  margin-bottom: 0;
  font-size: 16px;
  text-align: center;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 820ms ease 1540ms, transform 820ms ease 1540ms;
}

body.is-loaded .hero__logo,
body.is-loaded .hero h1,
body.is-loaded .hero__lead {
  opacity: 1;
  transform: translateY(0);
}

.main-visual {
  position: relative;
  width: min(760px, 72vw);
  height: var(--main-visual-scroll-height, 160vh);
  max-width: calc(100% - 32px);
  margin: clamp(18px, 3vw, 40px) auto clamp(72px, 9vw, 118px);
  border-radius: 50% 50% 0 0;
}

.main-visual__sticky {
  position: sticky;
  top: 0;
  height: var(--main-visual-frame-height, 100vh);
  overflow: hidden;
  border-radius: inherit;
}

.main-visual__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--main-visual-image-height, 160vh);
  background-image: url("assets/main.jpg");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--main-visual-y, 0px), 0);
  will-change: transform;
  border-radius: inherit;
}

.main-visual::after {
  content: "";
  inset: 0;
  position: sticky;
  top: 0;
  display: block;
  height: var(--main-visual-frame-height, 100vh);
  margin-top: calc(-1 * var(--main-visual-frame-height, 100vh));
  background:
    linear-gradient(90deg, rgba(251, 250, 245, 0.12), transparent 34%),
    linear-gradient(0deg, rgba(25, 102, 77, 0.12), transparent 46%);
  pointer-events: none;
  border-radius: inherit;
}

.scroll-cue {
  display: inline-grid;
  justify-items: center;
  gap: 18px;
  margin-top: clamp(72px, 12vh, 130px);
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 720ms ease 1720ms, transform 720ms ease 1720ms;
}

body.is-loaded .scroll-cue {
  opacity: 1;
  transform: translateY(0);
}

.scroll-cue__text {
  line-height: 1;
}

.scroll-cue__track {
  position: relative;
  display: block;
  width: 54px;
  height: 132px;
  overflow: hidden;
}

.scroll-cue__roller {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 48px;
  transform-origin: 50% 40%;
  transform: translateX(-50%);
}

.scroll-cue__roller img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 40%;
  will-change: transform, opacity;
  animation: rollerDrop 2.25s ease-in-out infinite;
}

.scroll-cue__line {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 92px;
  overflow: hidden;
  border-radius: 999px;
  transform: translateX(-50%);
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  border-radius: inherit;
  background: var(--green);
  animation: paintTrail 2.25s ease-in-out infinite;
}

@keyframes rollerDrop {
  0% {
    transform: translate3d(0, 0, 0) rotate(-8deg);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  68% {
    transform: translate3d(0, 56px, 0) rotate(-8deg);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 56px, 0) rotate(-8deg);
    opacity: 1;
  }
}

@keyframes paintTrail {
  0% {
    height: 0;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  68% {
    height: 100%;
    opacity: 1;
  }

  100% {
    height: 100%;
    opacity: 0;
  }
}

.quiet-image {
  position: relative;
  overflow: hidden;
  width: min(680px, 100%);
  min-height: 320px;
  background: var(--paper-deep);
}

.quiet-image span {
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: rgba(34, 33, 29, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.quiet-image--house {
  border-radius: 50% 46% 50% 44%;
  background:
    radial-gradient(circle at 72% 28%, var(--yellow) 0 16px, transparent 17px),
    linear-gradient(0deg, rgba(25, 102, 77, 0.13) 0 30%, transparent 30%),
    linear-gradient(135deg, #f0eadc, #fbfaf5);
}

.quiet-image--house::before {
  content: "";
  position: absolute;
  left: 25%;
  bottom: 27%;
  width: 50%;
  height: 34%;
  border: 4px solid var(--brown);
  background: rgba(255, 253, 247, 0.78);
  clip-path: polygon(0 42%, 50% 0, 100% 42%, 100% 100%, 0 100%);
}

.quiet-image--house::after {
  content: "";
  position: absolute;
  left: 39%;
  bottom: 27%;
  width: 13%;
  height: 20%;
  background: var(--green);
  box-shadow: 92px -8px 0 0 rgba(157, 82, 72, 0.72);
}

.statement__text {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto 64px;
  color: var(--ink);
  font-size: 16px;
  line-height: 2.25;
  text-align: left;
}

.statement__text p {
  margin-bottom: 0;
}

.promise-list,
.service-list,
.works-grid {
  display: grid;
  gap: 28px;
}

.promise-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(42px, 6vw, 76px) clamp(52px, 7vw, 96px);
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.promise-list article,
.service-list article,
.recruit-card,
.price-table,
.company-table {
  background: rgba(255, 253, 247, 0.54);
}

.promise-list article {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.promise-list article::before {
  content: none;
}

.promise-list article::after {
  content: none;
}

.promise-list p,
.service-list p,
.flow-list p,
.recruit-card p,
.recruit-card dd,
.company-table dd,
.price-table span,
address {
  color: var(--sub);
}

.promise-list h3 {
  position: relative;
  display: inline;
  margin-bottom: 16px;
  color: var(--ink);
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.75;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(#e7e300, #e7e300);
  background-repeat: no-repeat;
  background-size: 0 14px;
  background-position: 0 88%;
  transition: background-size 680ms ease 180ms;
}

.promise-list article.is-visible h3 {
  background-size: 100% 14px;
}

.promise-list p {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

.promise-list .promise-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 20px;
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.promise-list .promise-label::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background: url("assets/roller_icon.png") center / contain no-repeat;
  transform: rotate(18deg);
}

.promise-list .promise-label::after {
  content: none;
}

.promise-list h3 + p {
  margin-top: 18px;
}

.services .section-lead {
  margin-bottom: 58px;
}

.scene-cloud {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.9fr 1fr;
  grid-template-rows: repeat(7, 78px);
  gap: clamp(14px, 2.2vw, 28px);
  max-width: 900px;
  margin: 58px auto 0;
}

.scene-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: 180px;
  border-radius: 28px;
  background: var(--paper-deep);
  z-index: 1;
}

.scene-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(0.96);
}

.scene-photo--large {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
  min-height: 0;
}

.scene-photo--tall {
  grid-column: 3;
  grid-row: 1 / 5;
  min-height: 0;
}

.scene-photo--small {
  grid-row: span 2;
  min-height: 0;
}

.scene-photo--wide {
  grid-column: 1 / 2;
  grid-row: 4 / 6;
  min-height: 0;
}

.scene-photo--medium {
  grid-column: 2 / 3;
  grid-row: 4 / 8;
  min-height: 0;
}

.scene-photo--mini {
  min-height: 0;
}

.scene-photo--extra-a {
  grid-column: 3 / 4;
  grid-row: 5 / 8;
}

.scene-photo--tool {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.scene-photo--water {
  grid-column: 1 / 2;
  grid-row: 6 / 8;
}

.scene-photo--work {
  background:
    linear-gradient(135deg, rgba(25, 102, 77, 0.18), transparent 54%),
    linear-gradient(0deg, rgba(25, 102, 77, 0.14) 0 32%, transparent 32%),
    #eee7d9;
}

.scene-photo--sheet {
  background:
    linear-gradient(90deg, rgba(34, 33, 29, 0.24), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.38) 0 16px, transparent 16px 34px),
    #6e756f;
}

.scene-photo--tool {
  background:
    radial-gradient(circle at 62% 38%, var(--yellow) 0 18px, transparent 19px),
    linear-gradient(130deg, transparent 0 45%, var(--brown) 45% 50%, transparent 50%),
    #eee7d9;
}

.scene-photo--roof {
  background:
    repeating-linear-gradient(135deg, rgba(90, 70, 56, 0.28) 0 13px, transparent 13px 28px),
    #e6ddce;
}

.scene-photo--finish {
  background:
    linear-gradient(90deg, rgba(25, 102, 77, 0.18) 0 50%, rgba(157, 82, 72, 0.14) 50%),
    #f0eadc;
}

.scene-photo--water {
  background:
    radial-gradient(circle at 50% 38%, #1d3149 0 26px, transparent 27px),
    #e8eced;
}

.service-list {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}

.service-list article {
  min-height: 0;
  padding: 18px 18px 26px;
  border: 1px solid rgba(217, 211, 196, 0.82);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 46px rgba(90, 70, 56, 0.055);
}

.service-icon {
  display: block;
  width: 100%;
  height: 180px;
  margin-bottom: 24px;
  border-radius: 16px;
  object-fit: cover;
  background: #fff;
}

.service-list h3,
.service-list p {
  padding-left: 2px;
  padding-right: 2px;
}

.flow-list {
  position: relative;
  display: grid;
  gap: 42px;
  max-width: 920px;
  margin: 0 auto;
  padding: 6px 0 6px 74px;
  counter-reset: flow;
  list-style: none;
  text-align: left;
}

.flow-list::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 28px;
  width: 3px;
  border-radius: 999px;
  background: rgba(25, 102, 77, 0.28);
}

.flow-list li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 0;
  align-items: start;
  min-height: 150px;
  padding: 18px 22px 18px 0;
  counter-increment: flow;
}

.flow-list li::before {
  content: "";
  position: absolute;
  top: 48px;
  left: -53px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 8px var(--paper);
}

.flow-list__body {
  position: relative;
  padding-left: 86px;
  padding-top: 4px;
}

.flow-list__body::before {
  content: counter(flow);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--brown);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
}

.flow-list strong {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 18px;
  font-weight: 600;
}

.flow-list p {
  margin-bottom: 0;
}

.flow-list__icon {
  display: grid;
  place-items: start center;
  width: 176px;
  height: 150px;
}

.flow-list__icon img {
  display: block;
  width: 168px;
  height: 140px;
  object-fit: contain;
}

.price-table {
  max-width: 1040px;
  margin: 42px auto 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  text-align: left;
}

.price-table::-webkit-scrollbar {
  display: none;
}

.price-table div {
  display: grid;
  grid-template-columns: minmax(170px, 0.86fr) repeat(3, minmax(180px, 1fr));
  gap: 14px;
  min-width: 820px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(217, 211, 196, 0.76);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
}

.price-table strong {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: var(--green);
  font-weight: 600;
}

.price-table span {
  display: block;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.82);
  line-height: 1.7;
}

.price-table em,
.price-table b {
  display: block;
}

.price-table em {
  margin-bottom: 5px;
  color: var(--brown);
  font-style: normal;
  font-size: 13px;
}

.price-table b {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

.company-overview {
  position: relative;
  display: block;
  max-width: 1040px;
  margin: 0 auto;
  margin-top: clamp(86px, 10vw, 130px);
  text-align: left;
}

.company-table,
.recruit-card dl {
  margin: 0;
}

.recruit-card dl {
  border-top: 1px solid rgba(34, 33, 29, 0.14);
}

.company-table {
  position: relative;
  z-index: 2;
  width: 100%;
  border-top: 1px solid rgba(255, 253, 247, 0.62);
  border-left: 1px solid rgba(255, 253, 247, 0.5);
  background:
    linear-gradient(90deg, rgba(251, 250, 245, 0.9), rgba(251, 250, 245, 0.66)),
    url("assets/20251129-company-image-04.jpg") 68% center / cover no-repeat;
  backdrop-filter: blur(2px);
}

.company-table div,
.recruit-card dl div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0;
  border-bottom: 1px solid rgba(255, 253, 247, 0.42);
}

.company-table dt,
.company-table dd {
  padding: 14px 16px;
  border-right: 1px solid rgba(255, 253, 247, 0.36);
}

.company-table dt {
  display: grid;
  align-items: center;
  background: rgba(90, 70, 56, 0.62);
  color: #fff;
  text-align: center;
}

.company-table dd {
  background: rgba(255, 253, 247, 0.6);
  color: var(--ink);
}

.company-table ul {
  margin: 0;
  padding-left: 1.2em;
}

dt {
  color: var(--green);
  font-weight: 600;
}

dd {
  margin: 0;
}

.company-photo {
  display: none;
}

.recruit-card {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 26px;
  text-align: left;
}

.recruit-card > p {
  max-width: 620px;
}

.recruit-card dl div {
  align-items: start;
  border-bottom: 1px solid rgba(34, 33, 29, 0.14);
}

.recruit-card dt,
.recruit-card dd {
  padding: 18px 0;
}

.recruit-card dt {
  color: var(--ink);
  font-weight: 700;
}

.recruit-card dd {
  color: var(--ink);
}

.contact {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  padding: clamp(86px, 10vw, 124px) clamp(24px, 5vw, 72px);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(17, 26, 24, 0.72), rgba(17, 26, 24, 0.46)),
    url("assets/main02.jpg") center / cover no-repeat;
  color: #fff;
}

.contact > * {
  position: relative;
  z-index: 1;
}

.contact .section-kicker,
.contact h2,
.contact > p:not(.section-kicker),
.contact address {
  color: #fff;
}

.contact > p:not(.section-kicker) {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.28);
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 36px 0 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  min-height: 46px;
  padding: 10px 24px;
  border: 1px solid var(--green);
  border-radius: 999px;
  color: #fff;
  background: var(--green);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  transition: transform 180ms ease, background 180ms ease;
}

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

.button--light {
  color: var(--green);
  background: transparent;
}

.contact .button {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(25, 102, 77, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.contact .button--light {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

address {
  font-style: normal;
}

.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 28px;
  color: var(--sub);
  font-size: 12px;
  text-align: center;
}

.mobile-fixed-cta {
  display: none;
}

@media (min-width: 761px) {
  main,
  .site-footer {
    padding-top: 100px;
  }
}

@media (max-width: 920px) {
  .promise-list,
  .service-list,
  .company-overview {
    grid-template-columns: 1fr;
  }

  .price-table div {
    grid-template-columns: 1fr 1fr;
  }

  .scene-cloud {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 110px;
    grid-template-rows: none;
    min-height: auto;
  }

  .scene-photo--large {
    grid-column: 1 / 3;
    grid-row: span 3;
  }

  .scene-photo--tall {
    grid-column: 1;
    grid-row: span 3;
  }

  .scene-photo--wide {
    grid-column: 2;
    grid-row: span 2;
  }

  .scene-photo--medium {
    grid-column: 1 / 3;
    grid-row: span 2;
  }

  .scene-photo--tool,
  .scene-photo--water,
  .scene-photo--extra-a {
    grid-column: auto;
    grid-row: span 2;
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 74px;
  }

  .page-mark {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
  }

  .page-mark::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 280' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 0H400V244C365 254 326 225 278 218C222 209 205 247 152 244C102 241 94 204 50 218C28 225 14 238 0 246Z'/%3E%3C/svg%3E") left top / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 280' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0 0H400V244C365 254 326 225 278 218C222 209 205 247 152 244C102 241 94 204 50 218C28 225 14 238 0 246Z'/%3E%3C/svg%3E") left top / 100% 100% no-repeat;
  }

  .page-mark span {
    position: absolute;
    top: 34px;
    left: 50%;
    width: auto;
    color: #fff;
    font-size: 24px;
    line-height: 1.6;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  body.is-loaded .page-mark span {
    transform: translateX(-50%);
  }

  .site-header,
  main,
  .site-footer {
    width: auto;
    margin-left: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-header {
    position: fixed;
    top: 14px;
    right: 14px;
    left: auto;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-height: 72px;
    margin-right: 0;
    padding: 0;
  }

  .site-logo {
    display: none;
  }

  .nav-toggle {
    position: relative;
    z-index: 31;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    border: 0;
    background: var(--green);
  }

  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .global-nav {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    width: auto;
    min-height: 100vh;
    padding: 112px 74px 60px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: rgba(34, 33, 29, 0.38);
    border: 0;
    color: #fff;
    backdrop-filter: blur(3px);
    writing-mode: horizontal-tb;
  }

  .global-nav a {
    width: min(260px, 100%);
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.72);
    text-align: center;
    font-size: 18px;
    line-height: 1.35;
  }

  .global-nav a::after {
    display: none;
  }

  .global-nav a:hover::after,
  .global-nav a:focus-visible::after {
    transform: none;
  }

  .global-nav.is-open {
    display: flex;
    opacity: 1;
    transform: none;
  }

  .section {
    padding: 62px 0;
  }

  .contact {
    min-height: 380px;
    padding: 70px 18px;
    border-radius: 22px;
    background-position: center;
  }

  .service-list article {
    padding: 14px 14px 24px;
    border-radius: 18px;
  }

  .promise-list article {
    min-height: 0;
    padding: 0;
    border-radius: 0;
  }

  .promise-list {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .promise-list p {
    padding: 0;
    font-size: 15px;
    font-weight: 500;
  }

  .promise-list h3 {
    font-size: 18px;
    background-size: 0 12px;
  }

  .promise-list article.is-visible h3 {
    background-size: 100% 12px;
  }

  .promise-list .promise-label {
    margin-bottom: 14px;
    gap: 7px;
  }

  .service-icon {
    height: min(54vw, 220px);
    border-radius: 14px;
  }

  .section-kicker {
    font-size: clamp(34px, 13vw, 56px);
    letter-spacing: 0.06em;
  }

  h2 {
    margin-bottom: 30px;
    font-size: 17px;
  }

  .hero {
    min-height: auto;
    padding-top: 58px;
    padding-bottom: 62px;
  }

  .hero__logo {
    width: min(230px, 66vw);
    margin-bottom: 46px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero__lead {
    display: block;
    margin-top: 42px;
    font-size: 15px;
  }

  .main-visual {
    width: min(296px, 76vw);
    max-width: none;
    margin: 0 auto 56px;
    border-radius: 50% 50% 0 0;
  }

  .scroll-cue {
    margin-top: 44px;
  }

  .scroll-cue__track {
    width: 48px;
    height: 122px;
  }

  .scroll-cue__roller {
    width: 42px;
  }

  .quiet-image {
    min-height: 230px;
  }

  .scene-cloud {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 64px;
    gap: 14px;
    min-height: 0;
    margin-top: 40px;
  }

  .scene-photo,
  .scene-photo--large,
  .scene-photo--tall,
  .scene-photo--wide,
  .scene-photo--medium,
  .scene-photo--mini,
  .scene-photo--small {
    min-height: 0;
    border-radius: 22px;
  }

  .scene-photo--large {
    grid-column: 1 / 3;
    grid-row: span 4;
  }

  .scene-photo--tall {
    grid-column: 2;
    grid-row: span 4;
  }

  .scene-photo--tool {
    grid-column: 1;
    grid-row: span 2;
  }

  .scene-photo--wide {
    grid-column: 1;
    grid-row: span 2;
  }

  .scene-photo--medium {
    grid-column: 1;
    grid-row: span 3;
  }

  .scene-photo--water {
    grid-column: 2;
    grid-row: span 2;
  }

  .scene-photo--extra-a {
    grid-column: 1 / 3;
    grid-row: span 3;
  }

  .flow-list li {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
    padding: 16px 0 28px;
  }

  .flow-list p {
    grid-column: auto;
  }

  .flow-list {
    gap: 8px;
    padding-left: 42px;
  }

  .flow-list::before {
    left: 16px;
  }

  .flow-list li::before {
    left: -34px;
    top: 28px;
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 6px var(--paper);
  }

  .flow-list__body {
    padding-left: 48px;
    padding-top: 0;
  }

  .flow-list__body::before {
    font-size: 38px;
  }

  .flow-list strong {
    font-size: 15px;
  }

  .flow-list__icon {
    width: min(220px, 72vw);
    height: auto;
    justify-self: center;
    margin-top: 2px;
    padding-left: 0;
  }

  .flow-list__icon img {
    width: min(192px, 72vw);
    height: auto;
  }

  .price-table div,
  .company-table div,
  .recruit-card dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .price-table {
    overflow-x: visible;
  }

  .recruit-card dl {
    border-top: 1px solid rgba(34, 33, 29, 0.18);
  }

  .recruit-card dl div {
    gap: 8px;
    padding: 14px 0 16px;
    border-bottom: 1px solid rgba(34, 33, 29, 0.16);
  }

  .recruit-card dt,
  .recruit-card dd {
    padding: 0;
  }

  .recruit-card dt {
    font-size: 15px;
    line-height: 1.6;
  }

  .recruit-card dd {
    font-size: 15px;
    line-height: 1.9;
  }

  .price-table div {
    min-width: 0;
    gap: 10px;
    padding: 12px;
  }

  .price-table strong {
    padding: 4px 2px 8px;
  }

  .company-overview {
    display: block;
    min-height: 0;
    margin-top: 44px;
    padding: 0;
  }

  .company-table {
    width: 100%;
    background:
      linear-gradient(90deg, rgba(251, 250, 245, 0.9), rgba(251, 250, 245, 0.66)),
      url("assets/20251129-company-image-04.jpg") 78% center / cover no-repeat;
  }

  .company-table dt {
    text-align: left;
  }

  .site-footer {
    flex-direction: row;
  }

  .mobile-fixed-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    background: rgba(251, 250, 245, 0.92);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
  }

  .mobile-fixed-cta a {
    display: grid;
    place-items: center;
    min-height: 46px;
    border-radius: 999px;
    color: #fff;
    background: var(--green);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .mobile-fixed-cta a:last-child {
    color: var(--green);
    background: transparent;
    border: 1px solid var(--green);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__line::after {
    animation: none;
  }

  .scroll-cue__roller {
    animation: none;
  }
}