/* ==========================================================
   front.css  HOME（FV・ABOUT）PC表示
   ========================================================== */

/* ---------- FV ---------- */
.fv {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 32vw, 560px);
  overflow: hidden;
  background: #9cc3e6; /* 写真未配置時の仮色 */
}
.fv-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.fv-inner { position: relative; padding-block: 56px; }
.fv-content { padding-left: clamp(0px, 5vw, 64px); }
.fv-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .06em;
}
.fv-title-accent { color: var(--color-green); }
.fv-lead {
  margin: 22px 0 0;
  font-size: clamp(.9375rem, 1.4vw, 1.125rem);
  font-weight: 500;
  line-height: 1.9;
}
.fv-tags {
  display: flex;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.fv-tags li { padding: 0 16px; line-height: 1.2; }
.fv-tags li:first-child { padding-left: 0; }
.fv-tags li + li { border-left: 1px solid var(--color-text); }

/* 右側の縦線＋英字（装飾） */
.fv-side {
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: max(20px, calc((100vw - var(--container)) / 2));
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--color-green);
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: 1.4;
}

/* ---------- ABOUT ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52%;
  background: #fff;
}
.about-body {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  padding: 64px 32px 64px max(20px, calc((100vw - var(--container)) / 2));
}
/* ラベルとタイトルの間の短い縦線 */
.about-body .section-label { position: relative; align-self: start; padding-top: 8px; }
.about-body .section-label::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 24px;
  width: 1px;
  height: 56px;
  background: var(--color-line);
}
.about-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}
.about-lead {
  margin: 18px 0 28px;
  font-size: .875rem;
  line-height: 2;
}

.about-photo {
  position: relative;
  min-height: 280px;
  margin: 0;
}
.about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* 写真左端を白になじませる */
.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 22%);
  pointer-events: none;
}

/* ---------- BUSINESS ---------- */
.business {
  padding: 56px 0 64px;
  background: #f5f7f5;
}
.business-inner {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
}
/* ABOUTと同じ「ラベル＋短い縦線」（ABOUT側と共通化する場合は .about-body .section-label と統合可） */
.business .section-label { position: relative; align-self: start; padding-top: 8px; }
.business .section-label::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 24px;
  width: 1px;
  height: 56px;
  background: var(--color-line);
}

.business-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 18px;
}
.business-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}
.business-more,
.business-card-link {
  color: var(--color-text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}
.business-more::after,
.business-card-link::after { content: "\2192"; margin-left: 12px; }
.business-more:hover,
.business-card-link:hover { color: var(--color-green); }
.business-more:focus-visible,
.business-card-link:focus-visible { outline: 3px solid var(--color-green-dark); outline-offset: 3px; }

.business-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.business-card { background: #fff; }
.business-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 4;
  object-fit: cover;
  background: #d9e0da; /* 写真未配置時の仮色 */
}
.business-card-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 14px 22px 20px;
}
.business-card-num {
  grid-row: 1 / span 3;
  color: #c9d3cb;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.1;
}
.business-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
}
.business-card-text {
  margin: 6px 0 12px;
  color: #555;
  font-size: .8125rem;
  line-height: 1.9;
}
.business-card-link { justify-self: start; }


/* ---------- WORKS ---------- */
.works {
  padding: 56px 0 64px;
  background: #fff;
}
.works-inner {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
}
/* BUSINESSと同じ「ラベル＋短い縦線」 */
.works .section-label { position: relative; align-self: start; padding-top: 8px; }
.works .section-label::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 24px;
  width: 1px;
  height: 56px;
  background: var(--color-line);
}

.works-head {
  display: flex;
  flex-wrap: wrap; /* 追加 */
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}
.works-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 24px;
}
.works-sub {
  margin: 0;
  color: #555;
  font-size: .875rem;
  line-height: 1.7;
}
.works-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}
.works-more {
  color: var(--color-text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}
.works-more::after { content: "\2192"; margin-left: 12px; }
.works-more:hover { color: var(--color-green); }
.works-more:focus-visible { outline: 3px solid var(--color-green-dark); outline-offset: 3px; }

.works-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.works-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #d9e0da; /* 写真未配置時の仮色 */
}

/* ---------- QUALITY ---------- */
.quality {
  --quality-bg: #f5f8f5; /* 背景色。写真左端のグラデーションと共通 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52%;
  background: var(--quality-bg);
}
.quality-body {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  padding: 56px 32px 56px max(20px, calc((100vw - var(--container)) / 2));
}
/* ABOUT・BUSINESS・WORKSと同じ「ラベル＋短い縦線」 */
.quality .section-label { position: relative; align-self: start; padding-top: 8px; }
.quality .section-label::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 24px;
  width: 1px;
  height: 56px;
  background: var(--color-line);
}
.quality-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}
.quality-lead {
  margin: 18px 0 28px;
  font-size: .875rem;
  line-height: 2;
}

.quality-photo {
  position: relative;
  min-height: 280px;
  margin: 0;
  background: #cfe3c4; /* 写真未配置時の仮色 */
}
.quality-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 写真左端を白になじませる */
.quality-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--quality-bg) 0%, rgba(245, 248, 245, 0) 30%);
  pointer-events: none;
}

/* ---------- RECRUIT ---------- */
.recruit {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 26vw, 380px); /* 変更：PCで380px前後 */
  overflow: hidden;
  background: #cfd8cf; /* 写真未配置時の仮色 */
}
.recruit-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--recruit-pos, 25% center); /* 変更：人物（左側）を残す初期値 */
}
/* 右側（テキスト側）と左端（ラベル側）のみ、ごく薄い白で可読性を確保 */
.recruit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .45) 0%,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, .78) 100%
  );
  pointer-events: none;
}
.recruit-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  padding-block: 40px;
}
.recruit .section-label { position: relative; align-self: start; padding-top: 8px; }
.recruit .section-label::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 24px;
  width: 1px;
  height: 56px;
  background: rgba(34, 34, 34, .35);
}
.recruit-text {
  width: min(100%, 440px);
  margin-left: auto;
}
.recruit-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}
.recruit-title-line { display: inline-block; }
.recruit-lead {
  margin: 14px 0 24px;
  font-size: .875rem;
  line-height: 2;
}

/* ---------- NEWS ---------- */
.news {
  padding: 56px 0 64px;
  background: #fff;
}
.news-inner {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
}
/* BUSINESS・WORKSと同じ「ラベル＋短い縦線」 */
.news .section-label { position: relative; align-self: start; padding-top: 8px; }
.news .section-label::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 24px;
  width: 1px;
  height: 56px;
  background: var(--color-line);
}

.news-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 20px;
}
.news-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}
.news-more {
  color: var(--color-text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}
.news-more::after { content: "\2192"; margin-left: 12px; }
.news-more:hover { color: var(--color-green); }
.news-more:focus-visible { outline: 3px solid var(--color-green-dark); outline-offset: 3px; }

/* 一覧：横罫線で区切る */
.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}
.news-item { border-bottom: 1px solid var(--color-line); }
.news-link {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  grid-template-areas: "date title cat";
  align-items: center;
  column-gap: 24px;
  padding: 18px 8px;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .2s;
}
.news-link:hover { background: #f5f8f5; }
.news-link:focus-visible { outline: 3px solid var(--color-green-dark); outline-offset: -3px; }

.news-date {
  grid-area: date;
  color: #555;
  font-family: var(--font-serif);
  font-size: .9375rem;
  letter-spacing: .06em;
  line-height: 1.6;
}
.news-item-title {
  grid-area: title;
  font-size: .9375rem;
  line-height: 1.7;
}
.news-link:hover .news-item-title { color: var(--color-green); }
.news-cat {
  grid-area: cat;
  justify-self: end;
  min-width: 88px;
  padding: 2px 12px;
  color: var(--color-green-dark);
  border: 1px solid var(--color-green);
  font-size: .75rem;
  line-height: 1.7;
  letter-spacing: .06em;
  text-align: center;
}

/* ---------- CONTACT CTA ---------- */
.contact-cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(180px, 15vw, 220px);
  overflow: hidden;
  color: #fff;
  background: #2b5a6e; /* 写真未配置時の仮色 */
}
.contact-cta-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 青〜グリーン系の薄いオーバーレイ（濃さはここで調整） */
.contact-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
  90deg,
  rgba(11, 36, 64, .70) 0%,
  rgba(14, 58, 86, .52) 50%,
  rgba(22, 84, 104, .28) 100%
);
  pointer-events: none;
}
.contact-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding-block: 40px;
  padding-left: 120px; /* 追加：他セクションの見出し開始位置（ラベル列120px）に揃える */
}
.contact-cta-message {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .06em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}

.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 28px;
  color: #fff;
  background: var(--color-green);
  border: 1px solid rgba(255, 255, 255, .7);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background-color .2s;
}
.contact-cta-btn::after { content: "\2192"; margin-left: 12px; }
.contact-cta-btn:hover { background: var(--color-green-dark); }
.contact-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.contact-cta-icon { flex-shrink: 0; }
/* ---------- ANIMATION（フェードアップ） ----------
   - .js-anim（<head>内のJSで付与）がある時だけ初期非表示 → JS無効時は通常表示
   - 表示は front.js が .is-inview を付与して開始（一度表示したら戻さない）
   - transition ではなく animation を使用し、.btn-outline 等の既存 hover の transition を上書きしない
   - 時間差は --fade-delay で指定 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js-anim .fade-up { opacity: 0; }
.js-anim .fade-up.is-inview {
  animation: fadeUp 1s cubic-bezier(.22, .61, .36, 1) var(--fade-delay, 0s) both;
}

/* FV：ページ表示時に時間差 */
.fv-title.fade-up { --fade-delay: .15s; }
.fv-lead.fade-up  { --fade-delay: .35s; }
.fv-tags.fade-up  { --fade-delay: .55s; }

/* ABOUT：見出し → 文章 → ボタン */
.about-lead.fade-up               { --fade-delay: .12s; }
.about-text .btn-outline.fade-up  { --fade-delay: .24s; }

/* BUSINESS：PC（横3列）は順番に表示。スマホは responsive.css で時間差を解除 */
.business-card.fade-up:nth-child(2) { --fade-delay: .15s; }
.business-card.fade-up:nth-child(3) { --fade-delay: .3s; }

/* 動きを減らす設定：アニメーションなしで表示 */
@media (prefers-reduced-motion: reduce) {
  .js-anim .fade-up,
  .js-anim .fade-up.is-inview {
    opacity: 1;
    animation: none;
  }
}