/* 2026 visual system — forest green, warm paper, restrained editorial type.
   Loaded after the legacy component sheets; also included by build_pages.py. */
:root {
  --green:#035840; --green-dark:#015733; --green-text:#004433; --green-pale:#f3f8f0;
  --blue:#00a1e7; --blue-dark:#0088c4; --cream:#fefaef; --cream-deep:#efe5cb;
  --ink:#222; --white:#fff; --mint:#b9cfc6; --beige:#d6b99a;
  --font-head:"M PLUS 1p","Zen Kaku Gothic New",sans-serif; --font-kaku:"Zen Kaku Gothic Antique","Zen Kaku Gothic New",sans-serif;
  --header-h:88px; --container:1200px; --radius:2px;
  --fs-h2:clamp(26px,2.7vw,36px); --fs-h1:clamp(32px,3.6vw,50px);
}
body { background:#fafaf6; letter-spacing:.04em; }
::selection { background:#d5dfce; color:#18382c; }
:focus-visible { outline:2px solid #997434; outline-offset:5px; }
[id] { scroll-margin-top:110px; }
.container { width:min(var(--container),100% - 96px); }
.text { line-height:2.1; letter-spacing:.04em; color:#526056; }
.eyebrow { font-family:var(--font-kaku); font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--green); line-height:1.6; }
.btn, .btn.is-lg { min-height:56px; padding:17px 28px; border-radius:2px; font-size:14px; font-weight:500; letter-spacing:.05em; }
.btn { border:1px solid transparent; }
.btn:hover { transform:none; }
.btn.is-outline { border-width:1px; }
.btn.is-white { background:transparent; color:var(--green); border-color:#bcc6b9; }
.link-arrow { font-family:Arial,sans-serif; font-size:23px; font-weight:400; }
.text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:42px; min-height:48px; padding:10px 0; border-bottom:1px solid #b5bfb2; font-size:14px; font-weight:500; transition:color .2s,gap .2s; }
.text-link span { font:22px Arial,sans-serif; }
.text-link:hover { color:#64836a; gap:52px; }
.round-arrow { display:grid; place-items:center; width:44px; height:44px; flex:none; border:1px solid #bcc5b6; border-radius:50%; font:22px Arial,sans-serif; transition:background .2s,color .2s; }
.site-header, .site-header.is-solid, body.is-menu-open .site-header { background:rgba(250,250,246,.98); box-shadow:none; border-bottom:1px solid #e3e6dc; }
.header-inner { padding:0 36px; gap:28px; }
.brand { width:204px; }
.header-right { gap:22px; flex:none; }
.global-nav { justify-content:flex-end; }
.global-nav > ul { gap:4px; }
.global-nav > ul > li > a { padding:14px 10px; font-size:12px; font-weight:500; border-radius:0; }
.global-nav > ul > li.is-current > a { background:transparent; box-shadow:inset 0 -2px var(--green); }
.global-nav .sub { border-radius:2px; border:1px solid #e1e5db; box-shadow:0 12px 24px #193c2c12; }
.header-tel { display:none; }
.header-btn { border-radius:2px; background:var(--green); color:#fff; height:44px; padding:0 18px; font-size:12px; }
.header-btn svg { fill:currentColor; width:18px; }
.header-btn:hover { background:var(--green-dark); }
.menu-toggle { display:none; border:0; background:transparent; width:44px; height:44px; }
.menu-toggle svg { width:30px; height:30px; }
.mobile-menu { width:min(400px,90vw); padding:76px 0 30px; visibility:hidden; transition:transform .3s,visibility .3s; }
.mobile-menu.is-open { visibility:visible; }
.mobile-menu ul { padding:0 30px; }
.mobile-menu li a { font-size:16px; border-bottom:1px solid #edf0e7; }
.mobile-menu li.is-sub a { font-size:14px; padding-left:12px; }
.mobile-menu li.is-current a { color:var(--green); }
.menu-close { top:20px; right:22px; }
.hub-sec { padding:100px 0; }
.hub-h2 { font-family:var(--font-head); font-weight:800; line-height:1.65; letter-spacing:.05em; }
.hub-sec .eyebrow, .page-hero.is-hub .eyebrow { font-size:11px; letter-spacing:.17em; margin-bottom:18px; font-weight:500; }
.page-hero.is-hub { margin-top:var(--header-h); grid-template-columns:1fr 1fr; min-height:420px; background:var(--cream); }
.page-hero.is-hub .page-hero-title { padding:58px 52px 48px max(48px,calc((100vw - var(--container))/2)); }
.page-hero.is-hub h1.is-ja { font-family:var(--font-head); font-weight:800; font-size:var(--fs-h1); line-height:1.5; color:var(--green-text); }
.page-hero.is-hub .hero-lead { font-size:15px; line-height:2; color:#526056; }
.page-hero.is-hub .page-hero-photo { min-height:420px; }
.breadcrumb { font-size:11px; color:#667265; margin-top:28px; }
.two-col figure img, .photo-grid img { border-radius:2px; }
.hub-sec.is-green { background:var(--green-dark); }
.stat-strip { background:#f8f8f2; border-color:#dfe4d7; }
.stat-strip li { padding:30px 24px; border-color:#dfe4d7; }
.stat-strip strong { font-family:var(--font-head); font-weight:800; font-size:26px; }
.stat-strip .d { font-size:12px; line-height:1.8; }
.stat-strip .k { font-size:11px; font-weight:500; }
.work-cards a, .feature-cards li, .icon-cards li, .points li, .flow li, .contact-card, .form-card, .greeting-block .logo-card { border-radius:2px; border-color:#dce2d5; box-shadow:none; }
.work-cards a:hover { box-shadow:none; transform:translateY(-3px); }
.feature-cards .body { padding:25px; }
.icon-cards .ico { border-radius:2px; }
.flow li { border:0; border-top:1px solid #aab9a4; background:#f4f5ed; padding:28px 24px; }
.flow .num, .points li::before { font-family:Georgia,serif; font-weight:400; color:#7b8e73; }
.chips a, .chips span, .gallery-tabs button, .news-rows .tag { border-radius:2px; border-color:#c4cdbb; }
.chips a, .chips span { padding:10px 20px; }
.news-rows .tag { background:#eef1e8; border:0; font-size:10px; padding:4px 9px; }
.news-rows a { padding:25px 0; }
.news-rows .ttl { font-size:14px; }
.news-rows time { font:12px Arial,sans-serif; letter-spacing:.08em; }
.price-table th, .price-table td { border-color:#e1e5dc; }
.price-table td strong { font-weight:500; }
.area-list a { border-color:#c4cdbb; border-radius:2px; }
.index-rows .num { font-family:Georgia,serif; font-weight:400; }
.works-gallery { padding:64px 0 100px; background:#fafaf6; }
.gallery, .gallery-tabs { width:min(1200px,100% - 96px); }
.gallery { gap:32px 24px; }
.gallery-item { aspect-ratio:4/3; }
.gallery li .cap { margin-top:12px; line-height:1.8; }
.gallery-tabs { margin-bottom:36px; gap:12px; }
.gallery-tabs button { min-height:44px; padding:10px 17px; }
.contact-card { background:#f0f2e8; padding:32px; }
.form-card { padding:40px; }
.form-field input, .form-field textarea { background:#fcfcf9; border-color:#c8d1c0; border-radius:2px; min-height:50px; }
.form-card .btn-submit { min-height:56px; border-radius:2px; }
.cta-band { background:#e8eddf; color:var(--green-text); padding:86px 0; position:relative; }
.cta-band .eyebrow { color:var(--green); font-size:11px; margin-bottom:18px; }
.cta-band h2 { font-family:var(--font-head); font-size:clamp(27px,2.7vw,36px); line-height:1.6; font-weight:800; }
.cta-text p:last-child { color:#57654f; font-size:14px; max-width:35em; }
.cta-tel { background:transparent; border-bottom:1px solid #b9c7ad; border-radius:0; padding:0 0 20px; }
.cta-tel strong { font-family:Arial,sans-serif; font-weight:400; font-size:36px; letter-spacing:.03em; margin:10px 0 6px; }
.cta-tel .k { font-size:12px; font-weight:400; }
.cta-tel .d { font-size:12px; }
.cta-actions { gap:22px; }
.cta-mail { justify-content:space-between; }
.site-footer { background:#1c372b; }
.footer-inner { width:min(var(--container),100% - 96px); margin:auto; padding:72px 0 60px; gap:70px; }
.footer-name { font-size:26px; }
.footer-address { font-family:var(--font-body); font-size:13px; line-height:2; color:#e0e6d8; }
.footer-hours, .footer-permit { font-size:11px; color:#bfcbbc; }
.footer-permit { max-width:32em; }
.footer-cols { gap:40px; }
.footer-col-title { font-size:11px; color:#afc0a8; margin-bottom:16px; }
.footer-nav a { font-size:12px; padding:5px 0; color:#e3e9dc; }
.footer-nav li.is-current a { color:#d1dfb9; text-decoration:underline; text-underline-offset:5px; }
.footer-photo { height:auto; width:min(var(--container),100% - 96px); margin:auto; border-top:1px solid #ffffff26; }
.footer-photo img { display:none; }
.footer-photo .copyright { position:static; text-align:left; margin:0; padding:22px 0; color:#b1c0ab; text-shadow:none; font:10px Arial,sans-serif; letter-spacing:.1em; }
.fade { opacity:1; transform:none; }
@media (max-width:1150px) {
  .header-inner { padding:0 28px; gap:20px; }
  .brand { width:184px; }
  .global-nav > ul > li > a { font-size:11px; padding:12px 7px; }
  .header-btn { padding:0 12px; }
  .footer-inner { grid-template-columns:1fr; gap:40px; }
  .footer-cols { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:960px) {
  .global-nav { display:none; }
  .menu-toggle { display:inline-flex; }
  .header-right { margin-left:auto; gap:18px; }
  .container { width:calc(100% - 56px); }
  .page-hero.is-hub { grid-template-columns:1fr 1fr; }
  .page-hero.is-hub .page-hero-title { padding:40px 28px; }
  .page-hero.is-hub .page-hero-photo { min-height:360px; height:auto; }
  .cta-inner { grid-template-columns:1fr 1fr; gap:36px; }
  .hub-sec { padding:72px 0; }
}
@media (max-width:760px) {
  :root { --header-h:72px; }
  body { padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
  .container { width:calc(100% - 40px); }
  .header-inner { padding:0 20px; }
  .brand { width:175px; }
  .header-btn { display:none; }
  .page-hero.is-hub { grid-template-columns:1fr; min-height:0; }
  .page-hero.is-hub .page-hero-title { padding:42px 24px 32px; }
  .page-hero.is-hub h1.is-ja { font-size:30px; }
  .page-hero.is-hub .page-hero-photo { min-height:0; height:240px; }
  .page-hero.is-hub .hero-lead { font-size:14px; }
  .hub-sec { padding:60px 0; }
  .stat-strip li { padding:22px 14px; }
  .stat-strip strong { font-size:22px; }
  .cta-band { padding:60px 0; }
  .cta-inner { grid-template-columns:1fr; gap:32px; }
  .cta-tel strong { font-size:34px; }
  .footer-inner { width:calc(100% - 40px); padding:52px 0 38px; gap:36px; }
  .footer-cols { grid-template-columns:1fr 1fr; gap:30px 18px; }
  .footer-photo { width:calc(100% - 40px); }
  .sp-bar { height:auto; padding-bottom:env(safe-area-inset-bottom); background:var(--green); box-shadow:0 -1px #c5cfbd; }
  .sp-bar a { min-height:60px; font-size:12px; background:var(--green); }
  .sp-bar a.is-tel { background:#eef1e7; color:var(--green); }
  .sp-bar a.is-tel svg { fill:var(--green); }
  .gallery, .gallery-tabs { width:calc(100% - 40px); }
  .gallery { gap:24px 14px; }
  .gallery-tabs { gap:8px; }
  .gallery-tabs button { font-size:11px; padding:8px 12px; }
  .works-gallery { padding:36px 0 60px; }
  .form-card { padding:25px 20px; }
  .contact-card { padding:28px 22px; }
  .text { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none!important; animation:none!important; } }

/* Original brand character retained: bold Gothic, green and blue. */
body { background:#fff; }
.site-header, .site-header.is-solid, body.is-menu-open .site-header { background:rgba(255,255,255,.97); }
.btn, .btn.is-lg, .header-btn, .form-card .btn-submit { border-radius:999px; }
.header-btn { background:var(--green); }
.btn.is-white { background:#fff; }
.hub-h2 { font-weight:700; line-height:1.5; }
.page-hero.is-hub { background:#fff; }
.page-hero.is-hub h1.is-ja { font-size:clamp(28px,3vw,40px); }
.cta-band { background:var(--green); color:#fff; }
.cta-band .eyebrow, .cta-text p:last-child { color:#e1eee6; }
.cta-tel { background:#fff; border:0; border-radius:10px; padding:22px 26px; }
.site-footer { background:var(--green-dark); }
.stat-strip, .contact-card { background:#f3f8f0; }
.flow li { background:#fefaef; }
.chips a, .chips span, .gallery-tabs button, .news-rows .tag { border-radius:999px; }
.two-col figure img, .photo-grid img, .work-cards a, .feature-cards li { border-radius:8px; }

/* H1 / H2: sharper Gothic shapes, with lighter section-heading weight. */
:root { --font-heading:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif; }
h1, h2,
.home-hero h1,
.page-hero.is-hub h1.is-ja,
.editorial-title, .hub-h2,
.cta-band h2, .article h2, .contact-card h2 {
  font-family:var(--font-heading);
  font-feature-settings:"palt";
  font-synthesis:none;
}
h1, .home-hero h1, .page-hero.is-hub h1.is-ja {
  font-weight:700;
  letter-spacing:.025em;
  line-height:1.4;
}
h2, .editorial-title, .hub-h2, .cta-band h2, .article h2, .contact-card h2 {
  font-weight:600;
  letter-spacing:.035em;
  line-height:1.55;
}
.home-hero h1 { text-shadow:0 2px 12px rgba(0,25,15,.16); }
@media (max-width:760px) {
  .home-hero h1 { letter-spacing:.015em; line-height:1.5; }
  .editorial-title, .hub-h2 { letter-spacing:.025em; }
}

/* ---------- 余白と揃えの統一（2026-09-29） ----------
   横の基準: .container ＝ PC 1200px / ≤1150px 56px 余白 / ≤760px 20px 余白。
   ヘッダー・下層ヒーロー・ギャラリー・フッター・CTA も同じ左端に揃える。
   揃え方の原則: PC は「見出し左・補足右」の2列、≤760px はすべて左揃え（帯の中央寄せ部と丸ボタンだけ中央）。 */
.container { width: min(var(--container), 100% - 96px); }
.gallery, .gallery-tabs, .footer-inner, .footer-photo { width: min(var(--container), 100% - 96px); }
.home-section, .hub-sec { padding: 100px 0; }
.page-hero.is-hub .page-hero-title { padding-left: max(48px, calc((100vw - var(--container)) / 2)); }
.header-inner { padding: 0 max(48px, calc((100vw - var(--container)) / 2)); }
.site-footer { text-align: left; }
.footer-name, .footer-address, .footer-permit, .footer-col-title { text-align: left; }
.footer-nav { align-items: flex-start; }
@media (max-width: 1150px) {
  .container, .gallery, .gallery-tabs, .footer-inner, .footer-photo { width: calc(100% - 56px); }
  .page-hero.is-hub .page-hero-title { padding-left: 28px; padding-right: 28px; }
  .header-inner { padding: 0 28px; }
  .hero-copy { width: calc(100% - 56px); }
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
}
@media (max-width: 960px) {
  .home-section, .hub-sec { padding: 72px 0; }
  .cta-band { padding: 64px 0; }
}
@media (max-width: 760px) {
  .container, .gallery, .gallery-tabs, .footer-inner, .footer-photo, .hero-copy { width: calc(100% - 40px); }
  .page-hero.is-hub .page-hero-title { padding: 40px 20px 28px; }
  .header-inner { padding: 0 20px; }
  .message-copy { padding: 48px 20px 56px; }
  .home-section, .hub-sec { padding: 56px 0; }
  .cta-band { padding: 52px 0; }
  .footer-inner { padding: 48px 0 32px; gap: 32px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-nav { align-items: flex-start; }
  .footer-name, .footer-address, .footer-permit, .footer-col-title { text-align: left; }
  .hub-sec.is-center .hub-h2, .hub-sec.is-center .eyebrow, .hub-sec.is-center .text { text-align: left; }
  .hub-sec.is-center .text { margin-inline: 0; }
  .chips, .hub-sec .chips { justify-content: flex-start; }
  .chips-title, .hub-sec .note, .text.center, .hub-sec .text.center { text-align: left; }
  .home-facts small, .home-facts strong { text-align: left; }
  .btn-row.is-center { align-items: stretch; }
  .btn-row.is-center .btn { max-width: none; }
  .section-heading > .text-link, .home-news .text-link { align-self: flex-start; }
}

picture { display: contents; }

/* ---- ヘッダー: 左（ロゴ）・中央（ナビ）・右（ボタン）の3分割。コンテナ幅に閉じ込めず画面幅で配置 ---- */
.header-inner { padding: 0 40px; gap: 24px; }
.global-nav { flex: 1; justify-content: center; }
.header-right { flex: none; }
@media (max-width: 1150px) { .header-inner { padding: 0 28px; } }
@media (max-width: 760px) { .header-inner { padding: 0 20px; } }

/* ---- 3列カードの端数を中央に寄せる（5枚→3+2、4枚→3+1 で右側が空いて左寄りに見える対策） ---- */
.feature-cards { grid-template-columns: repeat(6, 1fr); }
.feature-cards > li { grid-column: span 2; }
.feature-cards > li:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
.feature-cards > li:nth-last-child(1):nth-child(3n+2) { grid-column: 4 / span 2; }
.feature-cards > li:nth-last-child(1):nth-child(3n+1) { grid-column: 3 / span 2; }
@media (max-width: 1100px) {
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .feature-cards > li, .feature-cards > li:nth-last-child(2):nth-child(3n+1), .feature-cards > li:nth-last-child(1):nth-child(3n+2), .feature-cards > li:nth-last-child(1):nth-child(3n+1) { grid-column: auto; }
}
@media (max-width: 760px) { .feature-cards { grid-template-columns: 1fr; } }
/* 同じ端数対策を工事カード（エリア各ページ・費用ページの5枚）にも */
.work-cards { grid-template-columns: repeat(6, 1fr); }
.work-cards > a { grid-column: span 2; }
.work-cards > a:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
.work-cards > a:nth-last-child(1):nth-child(3n+2) { grid-column: 4 / span 2; }
.work-cards > a:nth-last-child(1):nth-child(3n+1) { grid-column: 3 / span 2; }
@media (max-width: 1100px) {
  .work-cards { grid-template-columns: repeat(2, 1fr); }
  .work-cards > a, .work-cards > a:nth-last-child(2):nth-child(3n+1), .work-cards > a:nth-last-child(1):nth-child(3n+2), .work-cards > a:nth-last-child(1):nth-child(3n+1) { grid-column: auto; }
}
@media (max-width: 760px) { .work-cards { grid-template-columns: 1fr; } }

/* =====================================================================
   動き（motion）— 2026-09-29
   方針: 出現は「下から少し上がりながら現れる」1種類に統一し、遅れ（stagger）で流れを作る。
   ホバーは 2〜4px の移動と影だけ。動きを減らす設定（prefers-reduced-motion）では全て止める。
   ===================================================================== */
:root { --ease-out: cubic-bezier(.22, .61, .36, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes photoIn { from { transform: scale(1.06); } to { transform: none; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes spUp { from { transform: translateY(100%); } to { transform: none; } }

/* スクロールで現れる（main.js が data-reveal と --i を自動付与） */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.fade { opacity: 1; transform: none; transition: none; }

/* トップのヒーロー: 文字が順に上がって現れる／写真はゆっくり寄る */
.home-hero .hero-copy > * { animation: rise .9s var(--ease-out) both; }
.home-hero .hero-eyebrow { animation-delay: .08s; }
.home-hero h1 { animation-delay: .18s; }
.home-hero .hero-sub { animation-delay: .3s; }
.home-hero .hero-actions { animation-delay: .42s; }
.home-hero .hero-foot { animation-delay: .6s; }
.hero-photo-label, .hero-controls { animation: rise .9s var(--ease-out) .7s both; }
.hero-slide img { transform-origin: 56% 50%; }
.hero-slide.is-active img { animation: kenburns 9s linear both; }
.hero-foot a > span { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }

/* 下層のヒーロー */
.page-hero.is-hub .page-hero-title > * { animation: rise .8s var(--ease-out) both; }
.page-hero.is-hub .eyebrow { animation-delay: .05s; }
.page-hero.is-hub h1.is-ja { animation-delay: .15s; }
.page-hero.is-hub .hero-lead { animation-delay: .27s; }
.page-hero.is-hub nav { animation-delay: .38s; }
.page-hero.is-hub .page-hero-photo { overflow: hidden; }
.page-hero.is-hub .page-hero-photo img { animation: photoIn 1.4s var(--ease-out) both; }

/* ボタン・リンク */
.btn, .header-btn, .form-card .btn-submit { transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease-out), box-shadow .25s; }
.btn:hover, .header-btn:hover, .form-card .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(3, 88, 64, .16); }
.btn:active, .header-btn:active { transform: translateY(0); box-shadow: none; }
.btn .link-arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.btn:hover .link-arrow { transform: translate(3px, -3px); }
.global-nav > ul > li > a { position: relative; }
.global-nav > ul > li > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.global-nav > ul > li > a:hover::after, .global-nav > ul > li > a:focus-visible::after { transform: scaleX(1); }
.round-arrow { transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-out); }
a:hover .round-arrow, .round-arrow:hover { transform: translateX(4px); background: var(--green); color: #fff; border-color: var(--green); }
.text-link span { transition: transform .3s var(--ease-out); }
.text-link:hover span { transform: translateX(4px); }
.footer-nav a { display: inline-block; transition: color .2s, transform .25s var(--ease-out); }
.footer-nav a:hover { transform: translateX(3px); }
.acc-q { transition: color .2s; }
.acc-q:hover { color: var(--green); }
.form-card input, .form-card textarea, .form-card select { transition: border-color .2s, box-shadow .2s, background .2s; }

/* カード類: わずかに浮く */
.feature-cards li, .icon-cards li, .work-cards a, .points li, .flow li, .area-list a, .chips a, .guide-grid > a { transition: transform .35s var(--ease-out), box-shadow .35s, border-color .3s, background .3s, color .3s; }
.feature-cards li:hover, .icon-cards li:hover, .work-cards a:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(3, 88, 64, .10); border-color: #c9d6c6; }
.area-list a:hover { transform: translateX(4px); }
.chips a:hover { transform: translateY(-2px); }
.index-rows .arrow { transition: transform .3s var(--ease-out); }
.index-rows a { transition: background .25s; }
.index-rows a:hover { background: var(--green-pale); }
.index-rows a:hover .arrow { transform: translateX(4px); }
.service-image img, .project-image img, .photo-grid img, .gallery-item img { transition: transform .6s var(--ease-out); }
.service-card:hover img, .project-card:hover img { transform: scale(1.05); }
.photo-grid a:hover img { transform: scale(1.04); }

/* 施工実績: タブで切り替えた写真が順に現れる */
.gallery > li:not([hidden]) .gallery-item { animation: rise .55s var(--ease-out) both; }

/* スマホ固定バー: 下から上がる */
.sp-bar { animation: spUp .6s var(--ease-out) .5s both; }

/* 動きを減らす設定・印刷 */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .fade { opacity: 1 !important; transform: none !important; }
  .home-hero .hero-copy > *, .hero-photo-label, .hero-controls, .page-hero.is-hub .page-hero-title > *, .page-hero.is-hub .page-hero-photo img, .hero-slide.is-active img, .hero-foot a > span, .gallery > li .gallery-item, .sp-bar { animation: none !important; }
}
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* =====================================================================
   CTA（お問い合わせ帯）— 2026-09-29 角丸カード型に変更
   白地の帯の中に、ブランド緑の角丸カード。左に見出し＋注記つきボタン2つ、右に写真。
   ===================================================================== */
.cta-band { background: #fff; color: var(--green-text); padding: 40px 0 96px; }
.cta-band .container { width: min(var(--container), 100% - 96px); }
.cta-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); align-items: center; gap: 40px; padding: 56px 56px 56px 64px; background: var(--green); color: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(1, 87, 51, .18); }
.cta-card::before { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.cta-card::after { content: ""; position: absolute; left: -90px; bottom: -160px; width: 320px; height: 320px; border-radius: 50%; background: rgba(0, 0, 0, .08); pointer-events: none; }
.cta-text { position: relative; z-index: 1; }
.cta-band .eyebrow { color: #cfe3d8; font-size: 11px; letter-spacing: .2em; margin: 0 0 14px; }
.cta-band h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 2vw, 29px); line-height: 1.55; letter-spacing: .04em; color: #fff; }
.cta-sub { margin: 16px 0 0; font-size: 14px; line-height: 1.9; color: #e1eee6; max-width: 34em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 30px; }
.cta-action { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 320px; }
.cta-tip { position: relative; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #fff; white-space: nowrap; padding: 0 22px; }
.cta-tip::before, .cta-tip::after { content: ""; position: absolute; top: 55%; width: 12px; height: 1.5px; background: #fff; }
.cta-tip::before { left: 2px; transform: rotate(60deg); }
.cta-tip::after { right: 2px; transform: rotate(-60deg); }
.cta-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 22px 0 26px; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .25s, background .25s, color .25s; }
.cta-btn i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 14px/1 Arial, sans-serif; font-style: normal; flex: none; transition: transform .3s var(--ease-out); }
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, .18); }
.cta-btn:hover i { transform: translateX(3px); }
.cta-btn.is-mail { background: var(--blue); color: #fff; }
.cta-btn.is-mail i { background: #fff; color: var(--blue); }
.cta-btn.is-tel { background: #fff; color: var(--green-text); }
.cta-btn.is-tel i { background: var(--green); color: #fff; }
.cta-btn.is-tel span { font-family: var(--font-kaku); letter-spacing: .06em; }
.cta-visual { position: relative; z-index: 1; justify-self: end; width: 100%; max-width: 460px; }
.cta-frame { border-radius: 16px; overflow: hidden; background: #fff; padding: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .28); transform: rotate(-1.5deg); }
.cta-frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.cta-badge { position: absolute; left: -18px; bottom: -14px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 15px; line-height: 1.3; text-align: center; letter-spacing: .04em; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.cta-badge small { display: block; margin-top: 2px; font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: .06em; }
@media (max-width: 1150px) {
  .cta-band .container { width: calc(100% - 56px); }
  .cta-card { grid-template-columns: 1fr; padding: 44px 40px; gap: 32px; }
  .cta-visual { justify-self: start; max-width: 520px; }
  .cta-badge { left: auto; right: -10px; }
}
@media (max-width: 760px) {
  .cta-band { padding: 8px 0 64px; }
  .cta-band .container { width: calc(100% - 40px); }
  .cta-card { padding: 34px 22px 30px; border-radius: 18px; gap: 26px; }
  .cta-band h2 { font-size: 22px; }
  .cta-sub { font-size: 13px; }
  .cta-actions { flex-direction: column; gap: 16px; margin-top: 24px; }
  .cta-action { max-width: none; flex: none; }
  .cta-btn { min-height: 54px; font-size: 14px; }
  .cta-frame { transform: none; padding: 8px; }
  .cta-badge { width: 92px; height: 92px; font-size: 13px; right: -6px; bottom: -10px; }
}

/* 会社概要 代表挨拶: ロゴは背景なしで文章の高さの中央に置く（クリーム地の箱が浮いて見えるため） */
.greeting-block { align-items: center; }
.greeting-block .logo-card { background: transparent; border: 0; padding: 0; place-self: center; }
.greeting-block .logo-card img { width: min(320px, 80%); }
@media (max-width: 900px) { .greeting-block .logo-card { order: -1; padding: 8px 0 4px; } .greeting-block .logo-card img { width: min(240px, 60%); } }