/* ==============================
   HOME / Hero
   ============================== */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--c-bg-beige);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-10);
}
.hero-inner { position: relative; z-index: 2; }
.hero-sub {
  font-family: var(--ff-en);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-en-hero);
  color: var(--c-main);
  font-weight: 500;
  margin-bottom: var(--sp-6);
}
.hero-title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-jp);
  color: var(--c-deep);
  margin-bottom: var(--sp-6);
}
.hero-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relax);
  color: #2d4a3a;
  font-weight: 500;
  max-width: 560px;
}

.hero-waves {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
/* 各層でタイル幅・周期・振幅・縦位置をすべて変えて視差を作る。
   background-position-x のループ幅 = タイル幅、で完全シームレス。 */
.hero-waves .wave {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-position: 0 0;
  will-change: background-position;
}
.hero-waves .wave-1 {
  background-image: url("../assets/wave-1.svg");
  background-size: 1200px 100%;
  opacity: 0.10;
  animation: waveSlide1 14s linear infinite;
}
.hero-waves .wave-2 {
  background-image: url("../assets/wave-2.svg");
  background-size: 1600px 100%;
  opacity: 0.07;
  animation: waveSlide2 20s linear infinite;
}
.hero-waves .wave-3 {
  background-image: url("../assets/wave-3.svg");
  background-size: 2000px 100%;
  opacity: 0.05;
  animation: waveSlide3 18s linear infinite;
}

@keyframes waveSlide1 { from { background-position-x: 0; } to { background-position-x: -1200px; } }
@keyframes waveSlide2 { from { background-position-x: 0; } to { background-position-x: -1600px; } }
@keyframes waveSlide3 { from { background-position-x: 0; } to { background-position-x: -2000px; } }

/* ====== Hero load animation (一回のみ再生) ======
   波: ラッパー .wave-enter で起動演出（opacity + translateY）し、
       子の .wave は静的 opacity / 横スクロールアニメをそのまま保持。
   テキスト: .fade-up + 要素別CSS変数で時間差。
   Scroll cue: 静的 opacity が 0.85 のため専用キーフレーム。 */
@keyframes waveEnter {
  from { opacity: 0; transform: translateY(40%); }
  to   { opacity: 1; transform: translateY(0); }
}
.wave-enter {
  position: absolute;
  inset: 0;
  animation: waveEnter 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(var(--fade-distance, 8px)); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp var(--fade-duration, 0.6s) cubic-bezier(0.22, 1, 0.36, 1) var(--fade-delay, 0s) both;
}
.fade-up-sub   { --fade-delay: 0.6s; --fade-distance: 8px;  --fade-duration: 0.8s; }
.fade-up-title { --fade-delay: 1.1s; --fade-distance: 16px; --fade-duration: 1.0s; }
.fade-up-lead  { --fade-delay: 1.8s; --fade-distance: 8px;  --fade-duration: 0.8s; }

@keyframes scrollCueEnter {
  from { opacity: 0; }
  to   { opacity: 0.85; }
}
.scroll-cue.scroll-cue-enter {
  animation: scrollCueEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 2.5s both;
}

@media (prefers-reduced-motion: reduce) {
  .wave-enter,
  .fade-up,
  .scroll-cue.scroll-cue-enter {
    animation: none;
  }
}


@media (max-width: 767px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: var(--sp-9);
  }
  /* テキスト中心が画面の上から約35%に来るよう、上端を25vhへ */
  .hero-inner {
    padding-top: 25vh;
  }
  .hero-title {
    font-size: clamp(32px, 8vw, 36px); /* SP override: --fs-h1 の clamp では 42px になる帯域を抑制 */
    line-height: var(--lh-tight);
  }
  /* 波を Hero 下半分にだけ配置して文字との重なりを回避し、
     Hero 下端の "緑の帯" を抑える */
  .hero-waves .wave { background-position: 0 100%; }
  .hero-waves .wave-1 { background-size: 1200px 55%; }
  .hero-waves .wave-2 { background-size: 1600px 60%; }
  .hero-waves .wave-3 { background-size: 2000px 65%; }
  .scroll-cue { bottom: var(--sp-5); }
}

/* ==============================
   HOME / About
   ============================== */
.about-home { background: var(--c-bg-white); }
.about-home .lead {
  font-size: var(--fs-h3);
  line-height: var(--lh-relax);
  color: var(--c-deep);
  font-weight: 500;
  letter-spacing: var(--ls-jp);
  max-width: 880px;
  margin-bottom: var(--sp-7);
}
.about-home .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relax);
  max-width: 720px;
}
/* 日本語の文節維持・widow軽減・禁則処理 */
.about-home .lead,
.about-home .body {
  word-break: keep-all;       /* フォールバック（日本語単語を分断しない） */
  word-break: auto-phrase;    /* 対応ブラウザでは文節単位で折り返し */
  overflow-wrap: break-word;  /* はみ出し回避（長い英単語等） */
  text-wrap: pretty;          /* 行末widow軽減（対応ブラウザのみ） */
  line-break: strict;         /* 禁則処理を厳格化 */
}

/* ==============================
   HOME / Service
   ============================== */
.service-home { background: var(--c-bg-beige-2); position: relative; }
.service-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-5);
}
.service-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-7);
  align-items: start;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--c-line);
}
.service-item:last-child { border-bottom: 1px solid var(--c-line); }
.service-num {
  font-family: var(--ff-en);
  font-size: var(--fs-num);
  font-weight: 500;
  color: var(--c-main);
  letter-spacing: var(--ls-jp);
  line-height: 1;
  padding-top: var(--sp-1);
}
.service-title {
  font-size: var(--fs-h3);
  color: var(--c-deep);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}
.service-tag {
  font-size: var(--fs-body);
  line-height: var(--lh-relax);
  color: var(--c-deep);
  margin-bottom: var(--sp-3);
  font-weight: 500;
}
.service-desc { font-size: var(--fs-body); line-height: var(--lh-relax); }

@media (max-width: 767px) {
  .service-list { gap: var(--sp-6); }
  .service-item { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-5); }
  .service-num { font-size: 36px; } /* --fs-num min(40px)より小さい意図的な値 */
}

/* ==============================
   HOME / Works (一時非表示)
   ============================== */
.works-home { display: none; } /* clients掲載許可後にこれを削除して有効化 */

/* ==============================
   HOME / Contact (反転)
   ============================== */
.contact-home {
  background: var(--c-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.contact-home .section-label { color: rgba(255,255,255,0.85); }
.contact-home .section-label::before { background: rgba(255,255,255,0.85); }
.contact-home p { color: rgba(255,255,255,0.78); }
.contact-home .inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.contact-home h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-4);
  letter-spacing: var(--ls-jp);
}
.contact-home .sub {
  font-size: var(--fs-body);
  line-height: var(--lh-relax);
  margin-bottom: var(--sp-7);
  max-width: 560px;
  margin-inline: auto;
}
.contact-wave {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.contact-wave .wave {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-position: 0 100%;
  will-change: background-position;
}
.contact-wave .wave-1 {
  background-image: url("../assets/wave-contact-1.svg");
  background-size: 1200px 100%;
  opacity: 0.10;
  animation: waveSlideContact1 22s linear infinite;
}
.contact-wave .wave-2 {
  background-image: url("../assets/wave-contact-2.svg");
  background-size: 1600px 100%;
  opacity: 0.06;
  animation: waveSlideContact2 28s linear infinite;
}
@keyframes waveSlideContact1 { from { background-position-x: 0; } to { background-position-x: -1200px; } }
@keyframes waveSlideContact2 { from { background-position-x: 0; } to { background-position-x: -1600px; } }

/* ==============================
   Page Hero (下層ページ共通)
   ============================== */
.page-hero {
  /* 上ベージュ → 下薄緑のグラデーション。SP/PC/3ページ共通で
     「薄緑がかったボックス装飾」を出す */
  background: linear-gradient(
    to bottom,
    var(--c-bg-beige) 0%,
    rgba(74, 125, 95, 0.10) 100%
  );
  padding: var(--sp-10) 0 var(--sp-9);
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  font-family: var(--ff-jp);
  font-size: var(--fs-h2);
  color: var(--c-deep);
  letter-spacing: var(--ls-jp);
  margin-bottom: var(--sp-4);
}
.page-hero .lead {
  font-size: var(--fs-body);
  line-height: var(--lh-relax);
  max-width: 680px;
  color: var(--c-deep);
}
.page-hero .lead .lead-sub { color: var(--c-text-sub); }
.page-hero .lead + .lead { margin-top: var(--sp-5); color: var(--c-text-sub); }

/* ==============================
   Service page
   ============================== */
.service-detail { padding-block: var(--section-py); background: var(--c-bg-white); }
.service-block {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-7);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--c-line);
}
.service-block:last-child { border-bottom: 1px solid var(--c-line); }
.service-block .num {
  font-family: var(--ff-en);
  font-size: var(--fs-num);
  font-weight: 500;
  color: var(--c-main);
  line-height: 1;
}
.service-block h2 {
  font-size: var(--fs-h3);
  color: var(--c-deep);
  margin-bottom: var(--sp-5);
}
.service-block .tag {
  font-size: var(--fs-body);
  line-height: var(--lh-relax);
  color: var(--c-deep);
  margin-bottom: var(--sp-5);
  font-weight: 500;
}
.service-block .body { font-size: var(--fs-body); line-height: var(--lh-relax); margin-bottom: var(--sp-6); }
.service-block h3 {
  font-size: var(--fs-caption);
  font-family: var(--ff-en);
  letter-spacing: var(--ls-en-nav);
  color: var(--c-main);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}
.service-block ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-5);
}
.service-block li {
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  padding-left: var(--sp-4);
  position: relative;
  line-height: var(--lh-normal);
}
.service-block li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--c-main);
}

@media (max-width: 767px) {
  .service-block { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-7) 0; }
  .service-block ul { grid-template-columns: 1fr; }
}

/* ====== Service: 対応範囲ボックス ====== */
.scope-box {
  background: var(--c-bg-beige-2);
  border-radius: 8px;
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-5) 0;
}

.scope-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-main);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(45, 95, 68, 0.15);
  letter-spacing: var(--ls-jp);
}

.scope-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-5);
}
.scope-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.scope-list li {
  position: relative;
  padding: 6px 0 6px var(--sp-5);
  color: var(--c-text-sub);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

.scope-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--c-sub);
  font-weight: 400;
  width: auto;
  height: auto;
  background: none;
}

@media (max-width: 767px) {
  .scope-box {
    padding: var(--sp-5) var(--sp-4);
    margin: var(--sp-5) 0;
  }
  .scope-list { grid-template-columns: 1fr; }
  .scope-list li {
    font-size: var(--fs-body);
    padding-left: var(--sp-5);
  }
  .scope-list li::before {
    top: 6px;
  }
}

/* ==============================
   About page
   ============================== */
.about-detail { padding-block: var(--section-py); background: var(--c-bg-white); }

/* MISSION color block */
.about-mission {
  background: var(--c-main);
  color: #fff;
  text-align: center;
  min-height: 50vh;
  padding-block: var(--sp-9);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.about-mission .container { width: 100%; }
.about-mission .section-label { color: rgba(255,255,255,0.65); }
.about-mission h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--ls-jp-wide);
  color: #fff;
  line-height: var(--lh-tight);
}

/* VALUES section */
.about-values { background: var(--c-bg-beige); }
.about-values .section-label { display: block; text-align: center; margin-bottom: var(--sp-7); }
.values-list {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.values-item {
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
}
.values-title {
  font-size: var(--fs-h3);
  color: var(--c-deep);
  font-weight: 500;
  letter-spacing: var(--ls-jp);
  margin-bottom: var(--sp-3);
}
.values-desc { font-size: var(--fs-body); line-height: var(--lh-relax); }

.mission-block {
  margin-bottom: var(--sp-9);
}
.mission-block h2 {
  font-family: var(--ff-en);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-en-label);
  color: var(--c-main);
  margin-bottom: var(--sp-5);
}
.mission-block p {
  font-size: var(--fs-h3);
  line-height: var(--lh-relax);
  color: var(--c-deep);
  font-weight: 500;
}
.company-block h2 {
  font-family: var(--ff-en);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-en-label);
  color: var(--c-main);
  margin-bottom: var(--sp-6);
}
.company-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.company-table th,
.company-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  line-height: var(--lh-relax);
}
.company-table th {
  width: 200px;
  color: var(--c-deep);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-jp);
}
.company-table td { color: var(--c-text-sub); }
.company-table td ul li { padding-left: var(--sp-4); position: relative; }
.company-table td ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 6px; height: 1px;
  background: var(--c-main);
}

@media (max-width: 767px) {
  .company-table, .company-table tbody, .company-table tr, .company-table th, .company-table td { display: block; width: 100%; }
  .company-table th { padding: var(--sp-5) 0 var(--sp-1); border: 0; }
  .company-table td { padding: 0 0 var(--sp-5); border-bottom: 1px solid var(--c-line); }
}

/* ==============================
   Contact page
   ============================== */
.contact-detail { padding-block: var(--section-py); background: var(--c-bg-white); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-9);
  max-width: 640px;
  margin-inline: auto;
}
.contact-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-caption);
  font-family: var(--ff-en);
  letter-spacing: var(--ls-en-nav);
  color: var(--c-deep);
  font-weight: 500;
}
.field label .req { color: var(--c-main); margin-left: 6px; font-size: var(--fs-caption); }
.field input,
.field textarea {
  width: 100%;
  background: var(--c-bg-beige-2);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: var(--sp-4);
  font-size: var(--fs-body);
  color: var(--c-text);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-main);
  background: #fff;
}
.field textarea { min-height: 160px; resize: vertical; }
.contact-form .submit { align-self: flex-start; margin-top: var(--sp-2); }

.contact-side h2 {
  font-family: var(--ff-en);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-en-label);
  color: var(--c-main);
  margin-bottom: var(--sp-4);
}
.contact-side p { font-size: var(--fs-body); line-height: var(--lh-relax); margin-bottom: var(--sp-5); }
.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-deep);
  font-family: var(--ff-en);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-jp);
  border-bottom: 1px solid var(--c-deep);
  padding-bottom: var(--sp-1);
}
.contact-mail:hover { color: var(--c-main); border-color: var(--c-main); }

.form-status {
  font-size: var(--fs-body);
  color: var(--c-main);
  margin-top: var(--sp-2);
  min-height: 1.5em;
}
.form-status.is-error { color: #c0392b; }

@media (max-width: 1023px) {
  .contact-grid { gap: var(--sp-7); }
}