/* ガーデンワークス安曇野 共通CSS（ヘッダー／モバイルメニュー／フッター／お問い合わせCTA）
   全ページ共通の見た目はここだけを編集する。ページ固有の上書きは各ページ側に書く。
   読み込み：gw-parts.php の gw_head() が全ページの <head> に出力する。 */

/* ---------- ヘッダー・モバイルメニュー・フッター ---------- */
.gw-fixed-header,
.gw-fixed-nav{display:none}
.gw-fixed-header-pc{display:none}
@media (min-width:769px){
.gw-fixed-header-pc{display:flex; align-items:center; justify-content:space-between;
		position:fixed; top:0; left:0; right:0; width:100%; height:88px;
		padding:0 40px; box-sizing:border-box; background:#ffffff; z-index:9999;
		box-shadow:0 2px 10px rgba(0,0,0,.08);}
.gw-fixed-header-pc__logo-link{display:flex; align-items:center; flex-shrink:0}
.gw-fixed-header-pc__logo{height:48px; width:auto; display:block}
.gw-fixed-header-pc__nav{display:flex; align-items:center; flex-shrink:0; font-size:clamp(9px,1.312vw - 1.09px,14px); gap:clamp(10px,5.77vw - 34.4px,32px); margin:0 auto}
.gw-fixed-header-pc__nav a{color:#222222; text-decoration:none; font-weight:700; font-size:inherit; letter-spacing:.02em; white-space:nowrap}
.gw-fixed-header-pc__nav a:hover{color:#1a3d1b}
.gw-fixed-header-pc__phone{display:flex; align-items:center; gap:8px; color:#1a3d1b; font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap; flex-shrink:0}
.gw-fixed-header-pc__phone img{width:20px; height:20px}
body{padding-top:88px !important}
}
@media (max-width:768px){
.gw-fixed-header{display:flex; position:fixed; top:0; left:0; right:0; width:100%;
		height:calc(64px + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px);
		box-sizing:border-box; z-index:9999; align-items:stretch; box-shadow:0 2px 6px rgba(0,0,0,.15);}
.gw-fixed-header__phone{display:flex; align-items:center; justify-content:center; flex:0 0 72px; background:#ffffff}
.gw-fixed-header__phone img{width:28px; height:28px}
.gw-fixed-header__brand{display:flex; align-items:center; justify-content:flex-end; flex:1 1 auto; background:#ffffff; border-left:1px solid #eeeeee; padding:0 16px}
.gw-fixed-header__logo-link{display:flex; align-items:center; height:60%; width:max-content; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); gap:0}
.gw-fixed-header__logo{height:100%; width:auto; display:block}
.gw-fixed-header__menu-btn{display:flex; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:transparent; border:none; padding:0; cursor:pointer}
.gw-fixed-header__menu-btn span{display:block; width:100%; height:3px; background:#1a3d1b; border-radius:2px; transition:transform .2s ease,opacity .2s ease}
.gw-fixed-header__menu-btn.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.gw-fixed-header__menu-btn.is-open span:nth-child(2){opacity:0}
.gw-fixed-header__menu-btn.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.gw-fixed-nav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9997; opacity:0; visibility:hidden; transition:opacity .35s ease,visibility .35s ease}
.gw-fixed-nav-overlay.is-open{opacity:1; visibility:visible}
.gw-fixed-nav{display:flex; flex-direction:column; position:fixed; top:calc(64px + env(safe-area-inset-top, 0px)); right:0;
		max-height:calc(100vh - 64px - env(safe-area-inset-top, 0px)); height:auto; background:#ffffff; z-index:9998;
		box-shadow:-4px 0 16px rgba(0,0,0,.2); overflow-y:auto; transform:translateX(100%);
		transition:transform .4s cubic-bezier(.22,1,.36,1); width:84vw; max-width:340px;}
.gw-fixed-nav.is-open{transform:translateX(0)}
.gw-fixed-nav__header{background:#1a3d1b; color:#ffffff; font-weight:700; font-size:14px; letter-spacing:.08em; padding:14px 20px}
.gw-fixed-nav > a{position:relative; display:block; padding:16px 20px 16px 32px; color:#222222; text-decoration:none; font-weight:700; font-size:15px; border-bottom:1px solid #eeeeee}
.gw-fixed-nav > a::before{content:"\203a"; position:absolute; left:16px; color:#1a3d1b; font-weight:700; font-size:18px}
body{padding-top:calc(64px + env(safe-area-inset-top, 0px)) !important}
}
.gw-brand-wordmark{display:block; width:auto}
.gw-brand-wordmark--pc{height:30px; margin-left:12px}
.gw-brand-wordmark--sp{height:24px; margin-left:10px}
.gw-fixed-header__logo{height:62%; width:auto}
@keyframes fvZoom{ 0%{transform:scale(1)} 100%{transform:scale(1.065)} }
.gw-footer{background:#1a3d1b;color:#ffffff;padding:40px 20px 0;box-sizing:border-box}
.gw-footer *{box-sizing:border-box}
.gw-footer-inner{max-width:960px;margin:0 auto}
.gw-footer-brand{text-align:center;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.3);margin-bottom:24px}
.gw-footer-logo-link{display:inline-block}
.gw-footer-logo{height:44px;width:auto;display:block;margin:0 auto 10px}
.gw-footer-brand-name{margin:0;font-size:15px;font-weight:800;letter-spacing:.04em;color:#ffffff}
.gw-footer-info{display:flex;flex-direction:column;gap:2px}
.gw-footer-address{margin:0;font-size:14px;color:#ffffff}
.gw-footer-address a{color:#ffffff;text-decoration:none}
.gw-footer-nav{display:flex;flex-direction:column}
.gw-footer-col{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.3);text-align:center}
.gw-footer-col:last-child{border-bottom:none}
.gw-footer-col h3{font-size:16px;font-weight:700;color:#ffffff;margin:0 0 12px;border-bottom:none !important}
.gw-footer-col h3::after,.gw-footer-col h3::before{display:none !important;content:none !important;border:none !important}
@media (max-width:767px){
.gw-footer-col h3{display:none}
.gw-footer-col{border-bottom:none;padding:0;margin-bottom:0}
.gw-footer-col li{margin:0 0 10px !important}
.gw-footer-nav > .gw-footer-col:last-child li:last-child{margin-bottom:0 !important}
}
.gw-footer-col ul{list-style:none;margin:0;padding:0}
.gw-footer-col li{margin:0 0 10px}
.gw-footer-col li:last-child{margin-bottom:0}
.gw-footer-col a{color:#ffffff;text-decoration:none;font-size:14px}
.gw-footer-col a:hover{text-decoration:underline}
.gw-footer-copyright{text-align:center;padding:24px 0;margin-top:24px;border-top:1px solid rgba(255,255,255,.3)}
.gw-footer-copyright p{margin:0;font-size:12px;color:rgba(255,255,255,.85)}
@media (min-width:768px){
.gw-footer-brand{display:flex;align-items:center;justify-content:center;gap:32px;text-align:left}
.gw-footer-brand-logo{text-align:left}
.gw-footer-logo{margin:0 0 8px}
.gw-footer-nav{flex-direction:row;justify-content:center;gap:60px}
.gw-footer-col{border-bottom:none;padding:0;text-align:left}
}

/* ---------- お問い合わせCTA（フォーム／電話／LINE） ---------- */
@keyframes gwFvZoom{ 0% { transform: scale(1); } 100% { transform: scale(1.065); } }
.gw-cta3-wrap{display: block;
    width: 100%;
    background: #ffffff;
    padding: 32px 20px;
    box-sizing: border-box;}
.gw-cta3-inner{max-width: 960px;
    margin: 0 auto;}
.gw-cta3-columns{display: flex;
    flex-direction: column;
    gap: 16px;}
.gw-cta3-card{width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: #f7f4ef;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 4px -4px rgba(0, 0, 0, 0.1);
    padding: 28px 22px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;}
.gw-cta3-heading{margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    line-height: 1.5;
    font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
    border-bottom: 2px solid #1a3d1b !important;
    padding-bottom: 8px;}
.gw-cta3-heading::after,
  .gw-cta3-heading::before{display: none !important;
    content: none !important;
    border: none !important;}
.gw-cta3-heading span{text-decoration: none !important;}
.gw-cta3-text{margin: 0 0 20px;
    font-size: 14px;
    color: #333333;
    line-height: 1.8;}
.gw-cta3-btn{display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 80px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    margin-top: auto;}
.gw-cta3-btn--fill{background: #1a3d1b;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(26, 61, 27, 0.35);}
.gw-cta3-btn--outline{background: transparent;
    color: #1a3d1b;
    border: 1px solid #1a3d1b;
    font-weight: 600;}
.gw-cta3-btn--line{background: #06C755;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(6, 199, 85, 0.35);}
.gw-cta3-btn{transition: background-color .2s ease, color .2s ease, border-color .2s ease; border: 2px solid transparent; box-sizing: border-box;}
.gw-cta3-btn--fill:hover{background: #ffffff !important; color: #1a3d1b !important; border-color: #1a3d1b !important; box-shadow: none !important;}
.gw-cta3-btn--line:hover{background: #ffffff !important; color: #06C755 !important; border-color: #06C755 !important; box-shadow: none !important;}
@media (min-width: 768px){
.gw-cta3-wrap{padding: 56px 24px;}
.gw-cta3-columns{flex-direction: row;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;}
.gw-cta3-card{flex: 1 1 260px;
      max-width: 300px;
      padding: 40px 28px;}
.gw-cta3-heading{font-size: 20px;
      margin: 0 0 12px;}
.gw-cta3-text{font-size: 15px;
      margin: 0 0 24px;}
}
.gw-cta3-wrap{display: block;
    width: 100%;
    background: #ffffff;
    padding: 32px 20px;
    box-sizing: border-box;}
.gw-cta3-inner{max-width: 960px;
    margin: 0 auto;}
.gw-cta3-columns{display: flex;
    flex-direction: column;
    gap: 16px;}
.gw-cta3-card{width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: #f7f4ef;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 4px -4px rgba(0, 0, 0, 0.1);
    padding: 28px 22px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;}
.gw-cta3-heading{margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    line-height: 1.5;
    font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
    border-bottom: 2px solid #1a3d1b !important;
    padding-bottom: 8px;}
.gw-cta3-heading::after,
  .gw-cta3-heading::before{display: none !important;
    content: none !important;
    border: none !important;}
.gw-cta3-heading span{text-decoration: none !important;}
.gw-cta3-text{margin: 0 0 20px;
    font-size: 14px;
    color: #333333;
    line-height: 1.8;}
.gw-cta3-btn{display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 80px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    margin-top: auto;}
.gw-cta3-btn--fill{background: #1a3d1b;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(26, 61, 27, 0.35);}
.gw-cta3-btn--outline{background: transparent;
    color: #1a3d1b;
    border: 1px solid #1a3d1b;
    font-weight: 600;}
.gw-cta3-btn--line{background: #06C755;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(6, 199, 85, 0.35);}
.gw-cta3-btn{transition: background-color .2s ease, color .2s ease, border-color .2s ease; border: 2px solid transparent; box-sizing: border-box;}
.gw-cta3-btn--fill:hover{background: #ffffff !important; color: #1a3d1b !important; border-color: #1a3d1b !important; box-shadow: none !important;}
.gw-cta3-btn--line:hover{background: #ffffff !important; color: #06C755 !important; border-color: #06C755 !important; box-shadow: none !important;}
@media (min-width: 768px){
.gw-cta3-wrap{padding: 56px 24px;}
.gw-cta3-columns{flex-direction: row;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;}
.gw-cta3-card{flex: 1 1 260px;
      max-width: 300px;
      padding: 40px 28px;}
.gw-cta3-heading{font-size: 20px;
      margin: 0 0 12px;}
.gw-cta3-text{font-size: 15px;
      margin: 0 0 24px;}
}
.gw-cta3-btn--fill{background: #1a3d1b !important;
    box-shadow: 0 3px 8px rgba(26, 61, 27, 0.35) !important;}
.gw-cta3-btn--outline{color: #1a3d1b !important;
    border-color: #1a3d1b !important;}

/* 3枚のカードでボタンの位置（高さ）をそろえる：ボタンをカード下端に寄せる */
.gw-cta3-card .gw-cta3-btn{margin-top:auto}
/* 3枚のカードで、ボタンの高さも文字の種類（日本語／数字）に関係なくそろえる */
.gw-cta3-card .gw-cta3-btn{line-height:1.4; min-height:50px}

/* ---------- タブレット・PC 固定ヘッダーのホバー演出 ---------- */
@media (min-width:769px) and (hover:hover){
.gw-fixed-header-pc__nav a{position:relative; padding:8px 0; transition:color .25s ease}
.gw-fixed-header-pc__nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#1a3d1b; transform:scaleX(0); transform-origin:right center; transition:transform .4s cubic-bezier(.22,1,.36,1)}
.gw-fixed-header-pc__nav a:hover::after,
.gw-fixed-header-pc__nav a:focus-visible::after{transform:scaleX(1); transform-origin:left center}
.gw-fixed-header-pc__phone{transition:transform .3s ease, opacity .3s ease}
.gw-fixed-header-pc__phone img{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.gw-fixed-header-pc__phone:hover{transform:translateY(-2px); opacity:.8}
.gw-fixed-header-pc__phone:hover img{transform:rotate(-14deg) scale(1.12)}
.gw-fixed-header-pc__logo-link{transition:opacity .3s ease, transform .3s ease}
.gw-fixed-header-pc__logo-link:hover{opacity:.72; transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){
.gw-fixed-header-pc__nav a::after,
.gw-fixed-header-pc__phone,
.gw-fixed-header-pc__phone img,
.gw-fixed-header-pc__logo-link{transition:none !important}
}

/* ---------- 剪定・伐採への入口CTA（旧 top-site/assets/css/top.css から移設） ----------
   参考デザイン（幅324px）の座標をそのまま使う。--k = 参考デザインの1px。画面幅に比例し、PCでは560px幅で頭打ち。
   呼び出しは shared/parts/service-cta.php（gw_part('service-cta')）。トップページ・ブログ記事から使用。
   トップページの home-sections.php にある単体カード（.case-cta 配下）も、ここの .cta-card を土台にしている。 */
.top-cta {
  --k: calc(min(100vw, 560px) / 324);
  position: relative;
  z-index: 1;
  display: grid;
  gap: calc(var(--k) * 3);
  width: calc(var(--k) * 324);
  margin: 0 auto;
  padding: calc(var(--k) * 8) calc(var(--k) * 10) calc(var(--k) * 32);
}

.cta-card {
  position: relative;
  display: block;
  aspect-ratio: 303 / 147;
  overflow: hidden;
  border-radius: calc(var(--k) * 2);
  color: #fff;
  text-decoration: none;
  background: #1b211c;
  -webkit-tap-highlight-color: transparent;
}

.cta-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(.75);
  transition: transform 1s cubic-bezier(.2, .6, .2, 1);
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8, 12, 8, .55) 0%, rgba(8, 12, 8, .25) 38%, rgba(8, 12, 8, .2) 70%, rgba(8, 12, 8, .2) 100%),
    linear-gradient(0deg, rgba(8, 12, 8, .1) 0%, rgba(8, 12, 8, 0) 45%);
}

.cta-card__title,
.cta-card__sub,
.cta-card__cta { position: absolute; z-index: 2; }

.cta-card__title {
  left: calc(var(--k) * 17);
  top: calc(var(--k) * 38);
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: calc(var(--k) * 40);
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}

.cta-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: calc(var(--k) * 13);
  top: calc(var(--k) * 85.5);
  width: calc(var(--k) * 88);
  height: calc(var(--k) * 11);
  background: #fff;
  /* 白い筆の線（入りを強く、後半に掠れが出る）。形は /assets/img/cta-brush-line.png のアルファで切り抜く（2026-10-22。旧：黄土色の細い直線） */
  -webkit-mask: url("/assets/img/cta-brush-line.png") center / 100% 100% no-repeat;
  mask: url("/assets/img/cta-brush-line.png") center / 100% 100% no-repeat;
}

.cta-card__sub {
  left: calc(var(--k) * 14);
  top: calc(var(--k) * 101);
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: calc(var(--k) * 11);
  line-height: 1.4;
  letter-spacing: .25em;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.cta-card__cta {
  left: calc(var(--k) * 14);
  top: calc(var(--k) * 121.5);
  display: flex;
  align-items: center;
  gap: calc(var(--k) * 10);
  color: #fff;
}

.cta-card__cta-text {
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-weight: 700;
  font-size: calc(var(--k) * 12);
  line-height: 1.4;
  letter-spacing: .2em;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

.cta-card__arrow {
  position: relative;
  flex: none;
  width: calc(var(--k) * 34);
  height: max(1px, calc(var(--k) * 1.2));
  background: rgba(255, 255, 255, .95);
  transition: transform .5s ease;
}

.cta-card__arrow::before,
.cta-card__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: calc(var(--k) * 7.5);
  height: max(1px, calc(var(--k) * 1.2));
  background: inherit;
  transform-origin: 100% 50%;
}

.cta-card__arrow::before { transform: rotate(40deg); }
.cta-card__arrow::after { transform: rotate(-40deg); }

@media (min-width: 768px) {
  .top-cta {
    --k: calc((min(100vw - 40px, 1000px) - 16px) / 2 / 303);
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: min(100vw - 40px, 1000px);
    padding: 8px 0 48px;
  }
}

@media (hover: hover) {
  .cta-card:hover .cta-card__img { transform: scale(1.035); }
  .cta-card:hover .cta-card__arrow { transform: translateX(calc(var(--k) * 4)); }
}

.cta-card:focus-visible { outline: 2px solid #b99a63; outline-offset: 3px; }

/* フッターのリンクのタップ領域（上下9px広げる。padding と負の margin で相殺するので、見た目・並びは変わらない） */
.gw-footer-col li a{display:inline-block;padding:9px 0;margin:-9px 0}

/* 本文欄（.txt／.gw-message-body）のリンク：ブログ記事の本文リンク（.blog-article__body a）と同じ、緑の下線。
   対応エリア欄の地域別ページへのリンクが、ふつうの文字と見分けがつくように。全ページ共通 */
.txt a,.gw-message-body a{color:#1a3d1b;text-decoration:underline}

/* バナーが1枚だけのとき（伐採の記事＝伐採だけ、など）。PCでも2枚並びの1枚と同じ大きさで中央に置く */
@media (min-width: 768px) {
  .top-cta--single { grid-template-columns: 1fr; width: calc((min(100vw - 40px, 1000px) - 16px) / 2); }
}