/* ガーデンワークス安曇野 トップページ（2026-09-26 新デザイン）
   FVはスマホ用デザインカンプ（幅941px）の座標をそのまま使う。
   --u = カンプの1px。画面幅に比例して拡縮する。 */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: #222;
  font-family: "Noto Sans JP", sans-serif;
}

img { display: block; max-width: 100%; }

/* 固定ヘッダーの余白（共通CSSの body padding）は、スマホではFVを全面表示するため打ち消す（タブレット・PCは下で戻す） */
body { padding-top: 0 !important; }

/* 固定ヘッダーに隠れないよう、ページ内リンクの着地位置をずらす */
html { scroll-padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
@media (min-width: 769px) { html { scroll-padding-top: 88px; } }

/* 固定ヘッダー：スマホはFVの霧が終わるあたりまで隠し、スクロールで上からすっと出す（タブレット・PCは最初から表示） */
.gw-fixed-header,
.gw-fixed-header-pc {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s linear .45s;
}

body.is-header-on .gw-fixed-header,
body.is-header-on .gw-fixed-header-pc {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ---------- ファーストビュー ---------- */

.fv {
  --u: calc(100vw / 941);
  --fog-h: calc(var(--u) * 340);   /* 下端の霧 */
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: calc(var(--u) * 1500);
  overflow: hidden;
  color: #fff;
}

.fv__media {
  position: absolute;
  inset: 0;
  /* 下端をページ背景へ溶かす。左右均一のS字カーブで、写真の下端は完全に消す */
  --fade: linear-gradient(to bottom,
    #000 calc(100% - var(--fog-h)),
    rgba(0, 0, 0, .92) calc(100% - var(--fog-h) * .85),
    rgba(0, 0, 0, .73) calc(100% - var(--fog-h) * .70),
    rgba(0, 0, 0, .48) calc(100% - var(--fog-h) * .55),
    rgba(0, 0, 0, .24) calc(100% - var(--fog-h) * .40),
    rgba(0, 0, 0, .065) calc(100% - var(--fog-h) * .25),
    transparent calc(100% - var(--fog-h) * .12),
    transparent 100%);
  -webkit-mask-image: var(--fade);
          mask-image: var(--fade);
}

.fv__slides { position: absolute; inset: 0; }

.fv__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  opacity: 0;
  transition: opacity 1.6s ease;   /* 切り替えはフェードのみ。拡大・縮小の動きは付けない */
}

.fv__slide.is-active {
  opacity: 1;
}

/* 文字の可読性：上端と下部を暗く */
.fv__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .42) 72%, rgba(0, 0, 0, .3) 100%);
}

/* ロゴ（人と樹のマーク＋社名の一体画像。円の幅がカンプの151px） */
.fv__brand {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: calc(var(--u) * 360);
  height: calc(var(--u) * 300);
}

.fv__logo {
  position: absolute;
  top: calc(var(--u) * 66);
  left: calc(var(--u) * 65);
  width: calc(var(--u) * 151);
  height: auto;
  /* 明るい背景（空・雲）でも輪郭が溶けないよう、細い輪郭＋ふわっと広がる影で黒く包む。暗い背景ではほぼ見えない */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7)) drop-shadow(0 0 3px rgba(0, 0, 0, .45)) drop-shadow(0 1px 9px rgba(0, 0, 0, .5));
}

/* キャッチコピー（カンプと同じ游明朝で書き出した画像） */
.fv__copy {
  position: absolute;
  left: calc(var(--u) * 66);
  bottom: calc(var(--u) * 352);
  z-index: 2;
  width: calc(var(--u) * 794);
  margin: 0;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .3));
}

.fv__copy img { width: 100%; height: auto; }

/* スマホではキャッチコピーは画像。HTMLテキスト版はタブレット・PCだけで使う */
.fv__copy-text { display: none; }

/* 右端の縦書き英字（タブレット・PCだけ） */
.fv__side { display: none; }

/* 対応地域（スマホ）：右上に白の縦書き3行。1行目の上に短い縦線。
   スマホには游明朝が無い端末が多いので、キャッチコピーと同じく游明朝（600）で書き出した画像（縦書き・48u・字間.2em・3列）。テキスト版はタブレット横・PCだけ */
.fv__area {
  position: absolute;
  top: calc(var(--u) * 148);
  right: calc(var(--u) * 68);
  z-index: 2;
  margin: 0;
  line-height: 0;
}

.fv__area-img {
  display: block;
  width: calc(var(--u) * 253.5);
  height: auto;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .75)) drop-shadow(0 1px 8px rgba(0, 0, 0, .6));   /* 松の葉の上でも読めるよう濃いめ */
}

.fv__area-l1,
.fv__area-l2 { display: none; }

.fv__area::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * -77);
  right: calc(var(--u) * 42);
  width: 1px;
  height: calc(var(--u) * 52);
  background: currentColor;
  opacity: .9;
}

/* ---------- ファーストビュー（タブレット横置き・PC） ----------
   デザインカンプ（1672×941）の座標を使う。--r = カンプの1px（画面に収まる倍率）。
   中央の写真はスマホと同じ5枚・同じローテーション（top.js）。背景は画面比で PC用／タブレット用 を切り替える。 */
@media (min-width: 769px) and (orientation: landscape) {
  .fv {
    --r: min(100vw / 1672, (100svh - 88px) / 941);
    --photo-w: calc(var(--r) * 641);   /* 中央の写真の幅（対応地域の置き場所の計算にも使う） */
    height: calc(100vh - 88px);
    height: calc(100svh - 88px);   /* 固定ヘッダー（88px）の下に全体が収まる高さ */
    min-height: 0;
    background: #fff var(--bg-pc) center / cover no-repeat;
    color: #183a2b;
  }

  /* 中央の縦長写真（上から下まで） */
  .fv__media {
    inset: 0 auto 0 50%;
    width: var(--photo-w);
    transform: translateX(-50%);
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* コピーの帯だけ写真を白で隠す */
  .fv__media::after {
    content: "";
    position: absolute;
    left: -4px;     /* 写真の縁が半端なピクセルで薄い線に見えないよう、左右にはみ出して隠す */
    right: -4px;
    top: calc(var(--copy-top, 58.2%) - var(--r) * 17);       /* 文字の上下に余白 */
    height: calc(var(--r) * 245);
    background: #fff;
  }

  .fv__shade,
  .fv__header { display: none; }

  .fv__copy {
    left: 50%;
    right: auto;
    top: calc(var(--copy-top, 58.2%) - var(--r) * 4);
    bottom: auto;
    width: max-content;
    transform: translate(-50%, var(--copy-shift, 0px));
    filter: none;
    text-align: center;
  }

  .fv__copy img { display: none; }

  .fv__copy-text {
    display: block;
    font-family: "YuMincho", "Yu Mincho", "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
    font-weight: 600;
    line-height: 1;
    font-feature-settings: "palt";
    white-space: nowrap;
  }

  .fv__copy-l1 {
    display: inline-block;
    padding: 0 calc(var(--r) * 11.5) calc(var(--r) * 5);
    border-bottom: max(1px, calc(var(--r) * 1.3)) solid currentColor;
    font-size: calc(var(--r) * 102);
    letter-spacing: .023em;
  }

  .fv__copy-l2 {
    display: block;
    margin-top: calc(var(--r) * 7);
    font-size: calc(var(--r) * 112);
  }

  .fv__copy-l2 small { font-size: .8em; }

  /* 固定ヘッダーは最初から表示し、その高さ分だけ本文を下げる */
  body { padding-top: 88px !important; }

  .gw-fixed-header-pc {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  /* 右端の縦書き英字。上下に細い線（カンプ：中心 右から69.5px・高さ40%） */
  .fv__side {
    position: absolute;
    z-index: 2;
    top: 40%;
    right: calc(var(--r) * 69.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    transform: translate(50%, -50%);
    color: #5f6f68;
    font-family: "YuMincho", "Yu Mincho", "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
    font-weight: 500;
    font-size: calc(var(--r) * 13);
    line-height: 1;
    letter-spacing: .29em;
    white-space: nowrap;
  }

  .fv__side span {
    writing-mode: vertical-rl;
    margin: calc(var(--r) * 15) 0 calc(var(--r) * 19 - .29em);  /* 末尾の字間分を差し引く */
  }

  .fv__side::before,
  .fv__side::after {
    content: "";
    width: 1px;
    background: currentColor;
    opacity: .8;
  }

  .fv__side::before { height: calc(var(--r) * 56); }
  .fv__side::after { height: calc(var(--r) * 61); }

  /* 対応地域：右上に横書き2行。上下に細い罫線（カンプ：右から120px・幅475px・罫線 上79px／下201px）
     置き場所は「写真の右の余白」。余白が475pxに足りないときは、枠の幅を余白に合わせて縮める。
     2行目は縮めずに「松本・塩尻・大町・白馬・／辰野・茅野まで対応」と折り返す（さらに狭ければ3行）。1行目は折り返せないので、入らないときだけ縮める（下限15px）。写真には決してかけない。 */
  .fv {
    --area-right: calc(var(--r) * 120);
    --area-free: calc(50vw - var(--photo-w) / 2 - max(14px, var(--r) * 24) - var(--area-right));   /* 写真の右の縁と画面の右の余白の間 */
  }

  .fv__area {
    top: calc(var(--r) * 78);
    right: var(--area-right);
    width: min(calc(var(--r) * 475), var(--area-free));
    box-sizing: border-box;
    padding: calc(var(--r) * 23) 0 calc(var(--r) * 21);
    border-top: max(1px, calc(var(--r) * 1.3)) solid rgba(24, 58, 43, .85);
    border-bottom: max(1px, calc(var(--r) * 1.3)) solid rgba(24, 58, 43, .85);
    color: #183a2b;
    font-family: "YuMincho", "Yu Mincho", "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
    font-weight: 600;
    font-size: max(15px, min(calc(var(--r) * 35), calc(var(--area-free) / 10.4)));
    line-height: 1;
    letter-spacing: .12em;
    font-feature-settings: "palt";
    text-align: center;
    text-shadow: none;
  }

  .fv__area-l1 { white-space: nowrap; }

  .fv__area::before { display: none; }

  .fv__area-img { display: none; }

  .fv__area-l1 { display: block; }

  .fv__area small { font-size: .8em; }

  .fv__area-l2 {
    display: flex;              /* 折り返しは span の区切りだけ。1行のときの高さは従来どおり */
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .5em;
    margin-top: calc(var(--r) * 18);
    font-size: max(13px, calc(var(--r) * 22));   /* 余白が狭くても縮めず、区切り（塩尻・／白馬・の後ろ）で折り返す */
    font-weight: 500;
    letter-spacing: .04em;
  }

  .fv__area-l2 > span { white-space: nowrap; }
  .fv__area-sep.is-line-end { display: none; }   /* 行末に来た区切りの「・」は出さない（改行が区切りになるため。top.js が判定） */

  /* FVの霧がないので、口コミはFVに重ねない（後ろにある共通指定より優先） */
  body .top-reviews { margin-top: 0; }
}

/* タブレット横置き（4:3前後）は専用の背景 */
@media (min-width: 769px) and (orientation: landscape) and (max-aspect-ratio: 3 / 2) {
  .fv { --copy-top: 52%; background-image: var(--bg-tablet); }
  /* 縦に余裕があるので写真を少し広げ、コピーは右下の葉にかからない高さへ上げる */
  .fv { --photo-w: calc(var(--r) * 800); }
}

/* ---------- 剪定・伐採への入口CTA ----------
   .top-cta / .cta-card 本体は shared/css/gw-common.css へ移設済み（ブログ記事からも同じ見た目で呼べるようにするため）。
   ここには残さない。案内バナーの呼び出しは shared/parts/service-cta.php（gw_part('service-cta')）。 */

/* お客様の声：FVの霧に少し重ねて上へ寄せる。口コミ欄の白背景で霧を切らないよう背景は透明 */
.top-reviews {
  position: relative;
  z-index: 1;
  margin-top: calc(100vw / 941 * -72);
}

.top-reviews .gw-rv { background: transparent; }

/* 施工事例の終わりに置くサービス別ボタン。--k は本文の幅に合わせ、PCでは1.62px（横並びCTAと同じ大きさ）で頭打ち */
.case-cta {
  --k: min(calc((min(100vw, 720px) - 40px) / 303), 1.62px);
  width: calc(var(--k) * 303);
  max-width: 100%;
  margin: 28px auto 48px;
}

/* home-sections.css の「.home-main a」の色・下線より優先して、カードの文字を白にする */
.home-main .case-cta .cta-card { color: #fff; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .fv__slide { transition: opacity .01s; }
}