@charset "UTF-8";
/* ============================================
   top.css — TOPページ専用スタイル
   FV:       sticky動画の上を、白チップのメッセージが
             スクロールで下から流れ込む（参考サイト lcl-about 方式）
   SERVICE:  ピン留め + パネルスライドイン（ぼかし背景 + 画像カルーセル）
   GALLERY:  緑背景の中央フォーカス・ループカルーセル（Splide）
   ============================================ */

/* ============================================
   FV（メインビジュアル）
   ============================================ */
.fv {
  position: relative;
  background: var(--green-deep);
}
/* sticky動画: スクロールしても画面に留まり、テキストが上を流れる */
.fv__movie {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  margin-bottom: -100svh;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.fv__in {
  position: relative;
  z-index: 1;
}

/* ---- 1画面目: ロゴ + 英字 ---- */
.fv__head {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.fv__hand {
  font-size: clamp(42px, 6vw, 76px);
  color: #fff;
  transform: rotate(-6deg);
  text-shadow: 0 2px 18px rgba(20, 40, 28, .45);
}
.fv__logo {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  color: #fff;
}
/* ロゴは大きめに（PC/SP共通で画面幅に応じて拡大） */
.fv__logo .logo-mark { width: clamp(120px, 14vw, 190px); height: clamp(70px, 8.2vw, 112px); }
.fv__logo .logo-type { width: clamp(300px, 44vw, 600px); height: clamp(28px, 4.1vw, 56px); }
.fv__logo { filter: drop-shadow(0 2px 16px rgba(20, 40, 28, .45)); }


.fv__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .3em;
}
.fv__scroll::after {
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(#fff, transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.fv__head { position: relative; }

/* メインキャラクター：FVの大空を舞う鷹（主役級） */
.fv__hawk {
  top: clamp(6%, 9vh, 13%);
  right: clamp(2%, 6vw, 9%);
  width: clamp(150px, 22vw, 320px);
  z-index: 2;
}
@media (max-width: 768px) {
  .fv__hawk { top: 8%; right: 2%; width: clamp(120px, 34vw, 180px); }
}

/* ---- メッセージ（白チップが下からスクロールイン） ---- */
.fv-txtarea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 34svh;
}
.fv-txtarea__item {
  display: inline-block;
  padding: .1em 1em;
  background: #fff;
  color: var(--ink);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.7;
}

/* ---- サブメッセージ + ボタン ---- */
.fv-sub {
  margin-top: 58svh;
  padding-bottom: 30svh;
}
.fv-sub__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.fv-sub__item {
  display: inline-block;
  padding: .1em 1em;
  background: #fff;
  color: var(--ink);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.7;
}
.fv-sub__btn { margin-top: 40px; }

@media (max-width: 768px) {
  .fv-txtarea { padding-top: 26svh; }
  .fv-sub { margin-top: 44svh; padding-bottom: 24svh; }
}

/* ============================================
   リード（理念の一文 + イラスト装飾）
   ============================================ */
.lead {
  position: relative;
  z-index: 2;
  text-align: left;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(229, 239, 227, .9), transparent),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(252, 235, 218, .7), transparent),
    var(--cream);
  /* 横方向はクリップ（装飾のはみ出し防止）、縦は写真がFVまで昇るため表示 */
  overflow-x: clip;
  overflow-y: visible;
}
.lead__title {
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: .16em;
  line-height: 2.2;
  text-align: left;
}
.lead__text {
  max-width: 640px;
  margin: 2em 0 0;
  color: var(--muted);
  text-align: left;
}

/* SP: 右上の木イラストを隠し、左下の鷹を右上へ移してテキストとの重なりを解消。
   小さなSVG装飾（太陽・葉・小枝）は本文と重なるためSPでは非表示にする。 */
@media (max-width: 768px) {
  .lead .lead__wood { display: none; }
  .lead .deco { display: none; }
  .lead .lead__hawk {
    top: 4% !important;
    right: 3% !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(84px, 26vw, 132px) !important;
    z-index: 4;
  }
}

/* 浮遊するイラスト装飾（葉・太陽・木・雲） */
.deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.deco svg { width: 100%; height: 100%; display: block; }
.deco--sun { top: 12%; right: 6%; width: clamp(56px, 7vw, 96px); color: var(--orange); opacity: .8; }
.deco--leaf1 { top: 18%; left: 5%; width: clamp(36px, 4.5vw, 64px); color: var(--green-moss); transform: rotate(-18deg); }
.deco--leaf2 { bottom: 12%; right: 12%; width: clamp(28px, 3.5vw, 48px); color: var(--green); transform: rotate(24deg); opacity: .7; }
.deco--sprig { bottom: 14%; left: 10%; width: clamp(44px, 5.5vw, 80px); color: var(--green-moss); opacity: .8; }
.deco--tree { color: var(--green); }
.deco--cloud { color: #fff; opacity: .8; }

/* ゆらゆら浮遊（reduced-motionでは base.css の全体ルールで停止） */
.deco--float { animation: decoFloat 6s ease-in-out infinite alternate; }
@keyframes decoFloat {
  from { translate: 0 -8px; }
  to { translate: 0 8px; }
}

/* 飾りアイコン（太陽・葉・小枝など）に常時ゆらぎを付与。
   rotate/translate の個別プロパティで動かし、data-plx（transform）と競合させない。
   セクションごとに周期をずらして単調にならないようにする。 */
.deco { animation: decoSway 7s ease-in-out infinite alternate; }
.deco--sun   { animation-duration: 8s;   animation-delay: -1s; }
.deco--leaf1 { animation-duration: 6s; }
.deco--leaf2 { animation-duration: 7.5s; animation-delay: -2s; }
.deco--sprig { animation-duration: 9s;   animation-delay: -3s; }
@keyframes decoSway {
  from { rotate: -6deg; translate: 0 -5px; }
  to   { rotate: 6deg;  translate: 0 5px; }
}

/* ---- 手描きイラスト装飾（鳥・花・木など、PNG素材） ---- */
.illust {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.illust img { width: 100%; height: auto; display: block; }
.illust--float { animation: decoFloat 6s ease-in-out infinite alternate; }
.illust--sway { animation: illustSway 7s ease-in-out infinite alternate; transform-origin: bottom center; }
@keyframes illustSway {
  from { rotate: -4deg; }
  to { rotate: 4deg; }
}

/* 飛ぶ鳥（横断アニメ） */
.illust-bird {
  position: absolute;
  z-index: 1;
  width: clamp(44px, 5vw, 72px);
  pointer-events: none;
  animation: birdFly linear infinite;
}
.illust-bird img { width: 100%; height: auto; display: block; }
@keyframes birdFly {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  50%  { transform: translate(44vw, -30px) rotate(3deg); }
  100% { transform: translate(90vw, 10px) rotate(-4deg); }
}

/* セクション背景の水彩（四隅装飾） */
.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: .5;
  mix-blend-mode: multiply;
}

/* ---- リード: 重なり写真（ポラロイド風・大きめ） ----
   上（FV方向）から降りてきて、このセクションで止まる（parallax.jsが制御） */
.lead__photos {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 5vw, 90px);
  top: clamp(48px, 10vh, 130px);
  width: clamp(320px, 34vw, 520px);
  aspect-ratio: 5 / 6;
  pointer-events: none;
  will-change: transform;
}
.lead__photo {
  position: absolute;
  border: 8px solid #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(38, 49, 39, .28);
}
.lead__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lead__photo--1 {
  right: 0; top: 0;
  width: 74%;
  aspect-ratio: 4 / 5;
  rotate: 6deg;
}
.lead__photo--2 {
  right: 52%; top: 26%;
  width: 66%;
  aspect-ratio: 4 / 3;
  rotate: -8deg;
}
.lead__photo-hand {
  position: absolute;
  right: 2%;
  top: calc(74% * 1.25 + 8px);
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--orange-deep);
  rotate: -6deg;
}
@media (max-width: 1100px) { .lead__photos { display: none; } }

/* ============================================
   SERVICE: ピン留め + パネルスライドイン
   （ぼかし背景 + テキスト + 動く画像カルーセル）
   ============================================ */
.svc-panels {
  position: relative;
  z-index: 2;
  background: var(--green-pale);
}


/* ---- イントロ（ピン留め時、パネルが流れ込む前に見える写真背景） ---- */
.svc-intro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(72px, 12vw, 130px) var(--container-pad);
  overflow: hidden;
  color: #fff;
}
/* 背景写真（森の作業道）+ 深い緑のオーバーレイ */
.svc-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.svc-intro__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.svc-intro__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 40%, rgba(15, 40, 24, .5), transparent),
    linear-gradient(180deg, rgba(15, 40, 24, .72), rgba(15, 40, 24, .82));
}
.svc-intro__inner { position: relative; z-index: 1; max-width: 640px; }
.svc-intro__hand {
  display: block;
  font-size: clamp(30px, 3.6vw, 48px);
  color: var(--orange-pale);
  rotate: -5deg;
  text-shadow: 0 2px 14px rgba(11, 26, 16, .5);
}
.svc-intro__title {
  font-size: clamp(30px, 4.4vw, 52px);
  color: #fff;
  letter-spacing: .14em;
  margin-top: .15em;
  text-shadow: 0 2px 18px rgba(11, 26, 16, .5);
}
.svc-intro__text { margin-top: 1.2em; color: rgba(255, 255, 255, .92); max-width: 560px; margin-inline: auto; }
.svc-intro__scroll {
  margin-top: 2em;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3em;
  color: #fff;
}
.svc-intro__scroll::after { content: " ↓"; }
.svc-panels.is-pinned .svc-intro {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.svc-panel {
  --dim: 0;
  --prog: 0;
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-radius: 56px 0 0 0;
}
/* SP/縦タブレット: PC同様にピン留めスライドさせる。
   1画面（100svh）に収めるためカルーセルを省き、要素を圧縮する。 */
@media (max-width: 999px) {
  .svc-panel { border-radius: 40px 0 0 0; }
  .svc-panel__bg img { filter: blur(8px) brightness(.58); }
  /* カルーセルはSPでは非表示（本文を1画面に収める） */
  .svc-panel__carousel { display: none; }
  .svc-panel__illust { width: clamp(150px, 44vw, 230px); animation-duration: 6s; }
  .svc-panel__grid { gap: 14px; }
  .svc-panel__num { font-size: 12px; }
  .svc-panel__en { margin-top: .6em; font-size: clamp(20px, 5.6vw, 28px); }
  .svc-panel__title { margin-top: .1em; font-size: clamp(26px, 7.4vw, 38px); line-height: 1.4; }
  .svc-panel__text { margin-top: .8em; font-size: 14px; }
  .svc-panel__link { margin-top: 1.3em; }
  /* 上下パディング: 下を広めにとり、本文/ボタンを画面下の SERVICE バーから離す */
  .svc-panels.is-pinned .svc-panel__in { padding-top: clamp(48px, 9svh, 80px); padding-bottom: clamp(72px, 13svh, 110px); }
  /* 進捗バーはSPでは短めに */
  .svc-panel__progress::after { width: 90px; }
}
/* ぼかし背景 */
.svc-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.svc-panel__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(14px) brightness(.8);
  transform: scale(1.15); /* ぼかしの縁を隠す */
}
.svc-panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    var(--panel-tint, rgba(31, 61, 43, .82)) 0%,
    var(--panel-tint-mid, rgba(31, 61, 43, .5)) 55%,
    rgba(31, 61, 43, .25) 100%);
}
.svc-panel--02 { --panel-tint: rgba(46, 107, 62, .85); --panel-tint-mid: rgba(46, 107, 62, .5); }
.svc-panel--03 { --panel-tint: rgba(122, 63, 12, .85); --panel-tint-mid: rgba(122, 63, 12, .48); }

/* 前のパネルの暗転オーバーレイ */
.svc-panel__dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #0B1A10;
  opacity: var(--dim);
  pointer-events: none;
  will-change: opacity;
}

.svc-panel__in {
  position: relative;
  z-index: 1;
  width: 100%;
  color: #fff;
  padding-top: clamp(72px, 10svh, 110px);
}
.svc-panel__num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: .3em;
  color: var(--orange-pale);
}
.svc-panel__num::after {
  content: "";
  display: inline-block;
  width: 56px; height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  background: var(--orange);
}
.svc-panel__en {
  display: block;
  margin-top: 1.4em;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--orange-pale);
  transform: rotate(-3deg);
}
.svc-panel__title {
  margin-top: .15em;
  color: #fff;
  font-size: clamp(28px, 4.2vw, 50px);
  letter-spacing: .12em;
  line-height: 1.6;
}
.svc-panel__text {
  margin-top: 1em;
  max-width: 560px;
  font-size: 15px;
  color: rgba(255, 255, 255, .94);
}
.svc-panel__link { margin-top: 1.8em; }

/* ---- 動く画像カルーセル（CSSマーキー・無限ループ） ---- */
.svc-panel__carousel {
  position: relative;
  z-index: 1;
  margin-top: clamp(24px, 4svh, 44px);
  padding-bottom: clamp(64px, 9svh, 90px);
  overflow: hidden;
}
.svc-panel__track {
  display: flex;
  gap: clamp(12px, 1.6vw, 22px);
  width: max-content;
  animation: panelMarquee var(--marquee-dur, 34s) linear infinite;
}
.svc-panel--02 .svc-panel__track { animation-direction: reverse; }
.svc-panel__track li {
  width: clamp(180px, 22vw, 300px);
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 10px 26px rgba(11, 26, 16, .35);
}
.svc-panel__track img {
  width: 100%; height: 100%;
  object-fit: cover;
}
@keyframes panelMarquee {
  to { transform: translateX(-50%); }
}

/* ---- タブ（参考サイトの縦帯: 各パネルの左端が色帯として重なって覗く） ---- */
.svc-panel__tab {
  display: none; /* ピン留め時のみ表示 */
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 5;
  width: var(--tab-w, 92px);
  background: var(--tab-color, var(--green));
  border-radius: 56px 0 0 0; /* パネルと同じ左上の角丸 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.svc-panel--01 { --tab-color: var(--green); }
.svc-panel--02 { --tab-color: var(--green-moss); }
.svc-panel--03 { --tab-color: var(--orange); }
.svc-panel__tab-label {
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.svc-panels.is-pinned .svc-panel__tab { display: flex; }
/* タブぶんコンテンツを右へ逃がす */
.svc-panels.is-pinned .svc-panel__in,
.svc-panels.is-pinned .svc-panel__carousel { padding-left: var(--tab-w, 92px); }
@media (max-width: 1024px) {
  .svc-panels.is-pinned .svc-panel { --tab-w: 68px; }
  .svc-panel__tab-label { font-size: 14px; }
}

/* ---- 本文（左カラム） + イラスト（右）の横並び ----
   align-items: flex-end で、イラスト下端を左カラム最下部（詳しく見るボタン下端）に揃える */
.svc-panel__grid {
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 4vw, 56px);
}
.svc-panel__body { flex: 1; min-width: 0; }
.svc-panel__illust {
  flex: none;
  width: clamp(240px, 32vw, 480px);
  filter: drop-shadow(0 14px 30px rgba(11, 26, 16, .38));
  animation: decoFloat 5s ease-in-out infinite alternate;
}
.svc-panel__illust img { width: 100%; height: auto; display: block; }
@media (max-width: 999px) {
  /* 参考サイト(lcl-cnt)同様、縦並び・中央寄せの1カラムに */
  .svc-panel__grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(14px, 3.5vw, 24px);
    /* テキストボックスの左右に余白（タブ側・画面端から離す） */
    padding-inline: clamp(14px, 6vw, 34px);
  }
  .svc-panel__body { flex: none; width: 100%; max-width: 460px; }
  .svc-panel__illust {
    order: -1;
    align-self: center;
    width: clamp(150px, 44vw, 240px);
  }
  .svc-panel__text { margin-inline: auto; max-width: 40ch; }
  .svc-panel__link { display: flex; justify-content: center; }
}

/* 進捗バー（ピン時のみ表示） */
.svc-panel__progress {
  display: none;
  position: absolute;
  z-index: 2;
  left: var(--container-pad);
  bottom: 30px;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, .85);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
}
.svc-panel__progress::after {
  content: "";
  width: 140px; height: 2px;
  background:
    linear-gradient(var(--orange), var(--orange)) no-repeat 0 0 / calc(var(--prog) * 100%) 100%,
    rgba(255, 255, 255, .3);
}

/* ---- ピン留め時（フル演出・JSが .is-pinned を付与） ---- */
.svc-panels.is-pinned {
  /* パネル3枚 ×（スライド1.4画面 + 静止0.5画面）+ 表示1画面ぶんの高さ
     ※ parallax.js の SLIDE / HOLD 定数と対応 */
  height: 670vh;
}
.svc-panels.is-pinned .svc-panels__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.svc-panels.is-pinned .svc-panel {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  will-change: transform;
}
.svc-panels.is-pinned .svc-panel--01 { z-index: 1; }
.svc-panels.is-pinned .svc-panel--02 { z-index: 2; }
.svc-panels.is-pinned .svc-panel--03 { z-index: 3; }
.svc-panels.is-pinned .svc-panel__progress {
  display: flex;
  left: calc(var(--tab-w, 96px) + var(--container-pad));
}

/* ============================================
   GALLERY（参考サイト再現: 緑背景の中央フォーカスカルーセル）
   ============================================ */
.gallery {
  position: relative;
  z-index: 2;
  padding-block: clamp(72px, 10vw, 120px) clamp(100px, 14vw, 160px);
  background: var(--green);
  overflow: hidden;
}
.gallery__ttl { position: relative; text-align: center; color: #fff; }
.gallery__sub {
  display: block;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 38px);
  color: var(--orange-pale);
  transform: rotate(-5deg);
}
.gallery__en {
  display: block;
  margin-top: -.2em;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 104px);
  letter-spacing: .06em;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase;
}
.gallery__lead { margin-top: .8em; color: rgba(255, 255, 255, .9); font-size: 14px; }

/* Splide（中央のスライドが少し大きくなる） */
.gallery-slider { margin-top: clamp(36px, 5vw, 56px); }
.gallery-slider .splide__track { padding-block: 20px; overflow: visible; }
.gallery-slider__in {
  border-radius: 24px;
  overflow: hidden;
  transition: scale .8s var(--ease-out), box-shadow .8s;
  box-shadow: 0 12px 30px rgba(11, 26, 16, .25);
}
.gallery-slider__in img {
  width: 100%;
  aspect-ratio: 27 / 34;
  object-fit: cover;
  scale: 1.35;
  transition: scale .8s var(--ease-out);
}
.gallery-slider .is-active .gallery-slider__in { scale: 1.1; box-shadow: 0 18px 44px rgba(11, 26, 16, .4); }
.gallery-slider .is-active .gallery-slider__in img { scale: 1; }

.gallery-slider .splide__arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-deep);
  opacity: .95;
  box-shadow: 0 6px 18px rgba(11, 26, 16, .3);
}
.gallery-slider .splide__arrow svg { fill: currentColor; width: 18px; height: 18px; }
.gallery-slider .splide__arrow--prev { left: clamp(8px, 3vw, 40px); }
.gallery-slider .splide__arrow--next { right: clamp(8px, 3vw, 40px); }

/* ハッシュタグ */
.gallery-hash {
  margin-top: clamp(28px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}
.gallery-hash__item { color: rgba(255, 255, 255, .85); font-size: 12.5px; letter-spacing: .06em; }
.gallery__more { margin-top: clamp(32px, 5vw, 48px); text-align: center; }

/* ギャラリー下端の波 */
.gallery__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(28px, 5vw, 64px);
}
.gallery__wave svg { width: 100%; height: 100%; display: block; }

/* ============================================
   シネマティック動画バンド（douga.mp4を背景に）
   ============================================ */
.movie-band {
  position: relative;
  z-index: 2;
  min-height: clamp(300px, 52vh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--green-deep);
}
.movie-band__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.movie-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 40, 24, .52), rgba(15, 40, 24, .68));
}
.movie-band__inner { position: relative; z-index: 2; text-align: center; color: #fff; }
.movie-band__hand {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px);
  color: var(--orange-pale);
  rotate: -4deg;
  text-shadow: 0 2px 14px rgba(11, 26, 16, .5);
}
.movie-band__catch {
  margin-top: .2em;
  font-size: clamp(19px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.9;
  text-shadow: 0 2px 18px rgba(11, 26, 16, .55);
}

/* ============================================
   施工例（ビフォーアフター・1事例）
   ============================================ */
.sekou {
  position: relative;
  z-index: 2;
  text-align: center;
  background: url(../img/section_bg_2.webp) center / cover no-repeat, var(--cream);
  overflow: hidden;
}
.sekou__lead { margin-top: 1em; color: var(--muted); font-size: 14px; }
.ba-case {
  max-width: 960px;
  margin-inline: auto;
  background: #fff;
  border-radius: 22px;
  padding: clamp(22px, 3.4vw, 44px);
  box-shadow: 0 14px 40px rgba(38, 49, 39, .1);
}
.ba-case__title {
  font-weight: 700;
  color: var(--green-deep);
  letter-spacing: .06em;
  font-size: clamp(16px, 2vw, 20px);
}
.ba-case__cat {
  display: inline-block;
  margin-right: .8em;
  padding: .25em 1em;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  letter-spacing: .1em;
  vertical-align: middle;
}
/* before → after の2枚組（汎用: worksページでも使用） */
.ba-set {
  margin-top: clamp(18px, 2.6vw, 28px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
}
.ba-set__item {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 8px 22px rgba(11, 26, 16, .18);
}
.ba-set__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  padding: .3em 1.1em;
  border-radius: 999px;
  background: rgba(31, 61, 43, .92);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
}
.ba-tag--after { background: var(--orange); }
.ba-set__arrow { color: var(--orange); display: flex; justify-content: center; }
.ba-set__arrow svg { width: clamp(28px, 4vw, 44px); height: auto; }
.ba-case__desc {
  margin-top: 1.5em;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink);
  max-width: 42em;
  margin-inline: auto;
}
.sekou__more { margin-top: clamp(32px, 5vw, 48px); }

/* 施工例カルーセル（3事例を1枚ずつカードで・フル幅） */
.sekou-slider { width: 100%; margin: clamp(20px, 3vw, 36px) 0 0; }
.sekou-slider .splide__track { padding-block: 8px; }
.ba-card {
  height: 100%;
  background: #fff;
  border-radius: 22px;
  padding: clamp(20px, 3vw, 38px);
  box-shadow: 0 14px 40px rgba(38, 49, 39, .1);
}
.ba-card__title {
  text-align: center;
  font-weight: 700;
  color: var(--green-deep);
  letter-spacing: .06em;
  font-size: clamp(15px, 1.9vw, 19px);
}
.ba-card__cat {
  display: inline-block;
  margin-right: .7em;
  padding: .25em 1em;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  letter-spacing: .1em;
  vertical-align: middle;
}
.ba-card__desc {
  margin-top: 1.3em;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink);
  max-width: 40em;
  margin-inline: auto;
}
/* カルーセル操作 UI（明色背景に合わせて緑系） */
.sekou-slider .splide__arrow {
  width: 44px; height: 44px;
  background: var(--green);
  opacity: 1;
  box-shadow: 0 6px 18px rgba(11, 26, 16, .25);
}
.sekou-slider .splide__arrow svg { fill: #fff; width: 16px; height: 16px; }
.sekou-slider .splide__arrow--prev { left: clamp(-6px, -1vw, 0px); }
.sekou-slider .splide__arrow--next { right: clamp(-6px, -1vw, 0px); }
.sekou-slider .splide__pagination { bottom: -2.2em; }
.sekou-slider .splide__pagination__page { background: var(--green-moss); opacity: .4; }
.sekou-slider .splide__pagination__page.is-active { background: var(--orange); opacity: 1; transform: scale(1.3); }

@media (max-width: 640px) {
  .ba-set { grid-template-columns: 1fr; }
  .ba-set__arrow { transform: rotate(90deg); }
}

/* ============================================
   BLOGカルーセル内カード（画像＋白いフッターに日付・タイトル、縦長カード）
   ============================================ */
.gallery-blog {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(11, 26, 16, .25);
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
/* 画像部（中央フォーカスのズーム演出は殺し、素直な縦長画像に） */
.gallery-blog .gallery-slider__in {
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  flex: none;
}
.gallery-blog .gallery-slider__in img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  scale: 1;
  transition: transform .7s var(--ease-out);
}
.gallery-blog:hover .gallery-slider__in img { transform: scale(1.05); }
/* 中央スライドだけカードごと少し大きく（画像内スケールは無効化） */
.gallery-slider .is-active .gallery-blog .gallery-slider__in { scale: 1; box-shadow: none; }
.gallery-slider .is-active .gallery-blog .gallery-slider__in img { scale: 1; }
.gallery-slider .splide__slide.is-active .gallery-blog {
  transform: scale(1.04);
  box-shadow: 0 20px 46px rgba(11, 26, 16, .42);
}
/* 白いフッター（日付・タイトル） */
.gallery-blog__cap {
  background: #fff;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  flex: 1;
}
.gallery-blog__date {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange-deep);
}
.gallery-blog__title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 600px) { .dn-sp { display: none; } }

/* ============================================
   BLOG（現行サイトの最新記事カード・外部リンク）
   ============================================ */
.top-blog {
  position: relative;
  z-index: 2;
  background:
    radial-gradient(ellipse 55% 45% at 12% 4%, rgba(229, 239, 227, .8), transparent),
    var(--cream);
  overflow: hidden;
}
.top-blog__lead { margin-top: 1em; color: var(--muted); font-size: 14px; }
.top-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}
@media (max-width: 860px) { .top-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .top-blog__grid { grid-template-columns: 1fr; } }

.blog-card { height: 100%; }
.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(38, 49, 39, .08);
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.blog-card__link:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(38, 49, 39, .16); }
.blog-card__thumb {
  display: block;
  aspect-ratio: 10 / 7;
  overflow: hidden;
  background: var(--green-pale);
}
.blog-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.blog-card__link:hover .blog-card__thumb img { transform: scale(1.06); }
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: .5em;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px) clamp(20px, 2.4vw, 26px);
}
.blog-card__meta { display: flex; align-items: center; gap: 12px; }
.blog-card__date {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--muted);
}
.blog-card__cat {
  padding: 2px 10px;
  border-radius: 4px;
  background: var(--green-pale);
  color: var(--green);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
}
.blog-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: .04em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__link:hover .blog-card__title { color: var(--green); }
.top-blog__more { margin-top: clamp(32px, 5vw, 48px); text-align: center; }

/* ============================================
   お問い合わせ導線（白フレーム + 装飾）
   ============================================ */
.contact-lead {
  position: relative;
  z-index: 2;
  background:
    radial-gradient(ellipse 55% 45% at 85% 8%, rgba(252, 235, 218, .8), transparent),
    var(--cream);
  text-align: center;
  overflow: hidden;
}
.contact-lead__frame {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  background: #fff;
  border-radius: 28px;
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
  box-shadow: 0 16px 44px rgba(38, 49, 39, .1);
}
/* フレームの縁飾り（点線） */
.contact-lead__frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed var(--green-pale);
  border-radius: 20px;
  pointer-events: none;
}
.contact-lead__text { max-width: 560px; margin-inline: auto; color: var(--muted); }
.contact-lead__actions {
  margin-top: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
}
.contact-lead__tel {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: .06em;
  color: var(--green-deep);
  line-height: 1.3;
}
.contact-lead__tel small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted);
}