/* =========================================================
   Arbonic — brand overrides for the LawnCare base template
   Load order: animate / owl / magnific / ionicons / flaticon / icomoon / style.css → THIS FILE LAST
   ========================================================= */

:root {
  --arb-green-deep: #1F4D2E;   /* primary */
  --arb-green-dark: #2D5F3F;
  --arb-green-mid:  #3A7150;
  --arb-beige:      #F5F1E8;   /* page light bg */
  --arb-beige-warm: #EDE6D2;
  --arb-charcoal:   #222222;
  --arb-charcoal-2: #3A3A3A;
  --arb-brown:      #6B4F3A;   /* wood accent */
  --arb-line:       #d9d2bf;   /* hairline on beige */
  --arb-muted:      #6f6a5a;
}

/* ---------- Typography ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

/* Page canvas. Keep the white fill here only — applying it to <p> as well
   painted every paragraph white, which showed as a strip on beige sections
   and in the footer. */
body { background-color: #ffffff; }

body,
.ftco-section p,
.text p {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  color: var(--arb-charcoal);
  letter-spacing: 0.02em;
  line-height: 1.85;
}

h1, h2, h3, h4, h5, h6,
.heading-section h2,
.heading-section h3,
.slider-text h1,
.hero-wrap .subheading,
.ftco-navbar-light .navbar-brand,
.navbar-brand {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  color: var(--arb-charcoal);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* English/Latin accent on top sections — pair with Cormorant for hero subheadings */
.arb-en,
.heading-section .subheading,
.slider-text .subheading {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: none;
  font-size: 16px;
  color: var(--arb-green-mid) !important;
}

/* ---------- Color overrides ---------- */
a { color: var(--arb-green-deep); }
a:hover { color: var(--arb-green-mid); text-decoration: none; }

/* The template uses .bg-primary / .btn-primary heavily — recolor */
.bg-primary,
.ftco-intro.bg-primary,
section.bg-primary {
  background-color: var(--arb-green-deep) !important;
}

.btn-primary,
.btn.btn-primary {
  background: var(--arb-green-deep) !important;
  border: 1px solid var(--arb-green-deep) !important;
  color: #fff !important;
  border-radius: 2px;
  padding: 12px 28px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: transparent !important;
  color: var(--arb-green-deep) !important;
  border: 1px solid var(--arb-green-deep) !important;
}

.btn-secondary,
.btn.btn-outline-primary,
.btn.btn-primary.btn-outline-primary {
  border: 1px solid var(--arb-green-deep) !important;
  background: transparent !important;
  color: var(--arb-green-deep) !important;
}

/* The light beige strip used by the template */
.bg-light {
  background-color: var(--arb-beige) !important;
}

/* ---------- Navbar ---------- */
.ftco_navbar.bg-dark,
.navbar-dark.ftco-navbar-light {
  background-color: var(--arb-green-deep) !important;
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 1.2rem 1rem;
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover {
  color: #fbecbf !important;
}

/* Force navbar to stay horizontal at ALL viewport sizes (no hamburger). */
.ftco_navbar.navbar-expand-lg .navbar-collapse,
.ftco_navbar .navbar-collapse {
  display: flex !important;
  flex-basis: 100% !important;
  flex-grow: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.ftco_navbar.navbar-expand-lg .navbar-nav,
.ftco_navbar .navbar-nav,
.ftco_navbar .navbar-nav.m-auto {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ftco_navbar .navbar-nav > .nav-item {
  flex: 0 0 auto;
  min-width: 0;
}
.ftco_navbar.navbar-expand-lg .navbar-toggler,
.ftco_navbar .navbar-toggler {
  display: none !important;
}

/* Active page: rendered as <span> (not a link). No hover, distinct color + underline. */
.ftco-navbar-light .navbar-nav > .nav-item.active > .nav-link,
.ftco-navbar-light .navbar-nav > .nav-item.active > .nav-link:hover {
  color: #fbecbf !important;
  cursor: default;
  position: relative;
  text-decoration: none;
}
.ftco-navbar-light .navbar-nav > .nav-item.active > .nav-link::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.55rem;
  height: 2px;
  background: #fbecbf;
  opacity: 0.85;
}

/* Special CTA-style nav item: 庭じまい（外部特設サイト） */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link.nav-special {
  border: 1px solid var(--arb-beige);
  border-radius: 999px;
  color: var(--arb-beige) !important;
  padding: 0.5rem 1.2rem !important;
  margin: 0.45rem 0 0.45rem 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link.nav-special:hover,
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link.nav-special:focus {
  background: var(--arb-beige);
  color: var(--arb-green-deep) !important;
  border-color: var(--arb-beige);
}

/* Tighten on small screens. On phones, force 庭じまい onto its own centered row. */
@media (max-width: 767px) {
  .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
    padding: 0.55rem 0.5rem !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
  }
  .ftco-navbar-light .navbar-nav > .nav-item > .nav-link.nav-special {
    padding: 0.4rem 1rem !important;
    margin: 0;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
  }
  .ftco-navbar-light .navbar-nav > .nav-item.active > .nav-link::after {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.3rem;
    height: 1.5px;
  }
}
@media (max-width: 575px) {
  /* Explicit 2-row layout: items 1-4 share row 1, 5番目(庭じまい)がrow 2で中央。
     ※ インラインの display:none を !important で上書きしないよう :not() で除外。
        HTML側の style="display:none;" を外せば、この2段レイアウトがそのまま復活する。 */
  .ftco_navbar .navbar-nav > .nav-item:nth-child(5):not([style*="display:none"]) {
    flex: 0 0 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
  }
  .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
    padding: 0.5rem 0.35rem !important;
    font-size: 11.5px !important;
  }
}

.navbar-brand,
.ftco-navbar-light .navbar-brand,
.ftco-footer .logo a {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif !important;
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  color: var(--arb-green-deep);
}

/* Site header strip — cream background matches the logo's surrounding tone (#f9f8ef)
   so the wide logo blends seamlessly. Apply to the container that wraps the logo. */
.arb-header-strip {
  background: #f9f8ef;
}

/* Image-based logo (replaces text brand in header) */
.arb-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.arb-logo img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
}
.arb-logo:hover { opacity: .85; }

/* Footer logo: sits on the light footer; no special background or opacity needed. */
.ftco-footer .arb-footer-logo img {
  height: 60px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  opacity: 1;
}

/* Footer phrase: 80% gray on the light footer, clearly readable. */
.ftco-footer .arb-footer-phrase {
  color: #333333;                       /* ~80% gray */
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  margin: 14px auto 0;
  max-width: 560px;
}

/* Copyright row: hairline divider, muted gray. */
.ftco-footer .arb-footer-copy {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 22px;
  margin-top: 10px;
  font-size: 11.5px;
  color: #888888;
}
.ftco-footer .arb-footer-copy a {
  color: #888888;
}

@media (max-width: 768px) {
  .arb-logo img { height: 52px; }
  .ftco-footer .arb-logo img { height: 48px; }
}

/* ---------- Hero (top page) ---------- */
/* The base template uses .js-fullheight which sets height = window.innerHeight via JS,
   which breaks long-page screenshots. We use .arb-hero-h instead, with a fixed range. */
.hero-wrap {
  background-position: center center;
  background-size: cover;
}
.hero-wrap.arb-hero-h {
  height: 720px;
  min-height: 560px;
}
.hero-wrap .slider-text.arb-hero-h {
  height: 720px;
  min-height: 560px;
}
/* Blur band: the text zone (0%-37%) stays frosted, then fades out across a
   38%-47% transition until the photo is fully sharp beyond 47%. */
.hero-wrap.arb-hero-h::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3.08px);
  backdrop-filter: blur(3.08px);
  -webkit-mask-image: linear-gradient(to right,
    black 0%,
    black 37%,
    transparent 47%
  );
  mask-image: linear-gradient(to right,
    black 0%,
    black 37%,
    transparent 47%
  );
}
/* Black tint band: a real element (not ::after) so it paints between the
   background/blur and the text — ::after would generate after the container
   in paint order and sit on top of (and darken/obscure) the text itself. Its
   transition zone (32%-50%) is tuned independently of where the blur fades. */
.hero-wrap.arb-hero-h .arb-hero-tint {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-color: rgba(12, 38, 24, 0.231);
  -webkit-mask-image: linear-gradient(to right,
    black 0%,
    black 32%,
    transparent 50%
  );
  mask-image: linear-gradient(to right,
    black 0%,
    black 32%,
    transparent 50%
  );
}
/* PC layout only: pull the hero text block further left, closer to the frosted
   blur band, instead of sitting flush against the container's default edge.
   Gated to min-width:1350px (not the 769px "PC" breakpoint used elsewhere):
   the text block already sits nearly flush against the container's left edge,
   so at narrower desktop/laptop widths (container capped at 960-1140px) a 15%
   shift has nowhere to go and crops the text off the left of the viewport.
   1350px+ is where the container's side gutter is wide enough to absorb it. */
@media (min-width: 1350px) {
  .hero-wrap .slider-text.arb-hero-h .col-md-8 {
    transform: translateX(-10%) !important;
  }
}
@media (max-width: 768px) {
  .hero-wrap.arb-hero-h, .hero-wrap .slider-text.arb-hero-h {
    height: 560px;
  }
}
.hero-wrap.hero-wrap-2 {
  height: 380px !important;
  min-height: 380px;
  max-height: 380px;
  padding: 0;
}
.hero-wrap.hero-wrap-2 .slider-text {
  height: 380px !important;
  min-height: 380px;
}
.hero-wrap .overlay {
  background: linear-gradient(
      to right,
      rgba(15, 35, 22, 0.78) 0%,
      rgba(15, 35, 22, 0.55) 45%,
      rgba(15, 35, 22, 0.30) 100%
    ),
    rgba(20, 40, 25, 0.30);
}
.hero-wrap .slider-text h1 {
  color: #ffffff;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 52px;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5);
}
.hero-wrap .slider-text .arb-hero-lead {
  color: #ffffff;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin-top: 10px;
  margin-bottom: 50px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.72), 0 2px 8px rgba(0,0,0,0.65);
}
.hero-wrap .slider-text h2.subheading,
.hero-wrap .slider-text .subheading {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  color: #f5e7b3 !important;
  font-size: 16.5px !important;
  letter-spacing: 0.18em;
  margin-bottom: 7.5px;
  white-space: nowrap;
}
.hero-wrap .slider-text p {
  color: #ffffff;
  font-size: 16px;
  line-height: 2;
}

/* Sub-catch paragraph (the line below H1): apply a semi-transparent dark matte so
   the text doesn't get lost in the hero photo. Only the catch paragraph (the one
   with .mb-4) gets the matte; the button row below stays clean. */
.hero-wrap .slider-text p.mb-4 {
  display: inline-block;
  background: rgba(15, 35, 22, 0.32);
  padding: 12px 22px;
  border-radius: 4px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  max-width: 100%;
}

/* Hero CTA buttons: spacing + hover that stays visible on the dark hero background.
   (The default .btn-primary:hover goes transparent + dark-green text, which is invisible
    against the green hero overlay. Override here.) */
.hero-wrap .slider-text .btn {
  margin: 0 16px 12px 0;       /* breathing room between buttons + wrap on narrow */
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero-wrap .slider-text .btn:last-child { margin-right: 0; }

/* Primary (filled) button: on hover, slightly brighter green + faint glow */
.hero-wrap .btn.btn-primary,
.hero-wrap .btn-primary {
  background: var(--arb-green-deep) !important;
  border-color: var(--arb-green-deep) !important;
  color: #fff !important;
}
.hero-wrap .btn.btn-primary:hover,
.hero-wrap .btn-primary:hover,
.hero-wrap .btn.btn-primary:focus,
.hero-wrap .btn-primary:focus {
  background: var(--arb-green-mid) !important;
  border-color: var(--arb-green-mid) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}

/* Secondary button on hero: filled beige with dark text by default — clearly a button,
   clearly visible against the green hero. No transparency tricks. */
.hero-wrap .btn.btn-secondary,
.hero-wrap .btn-secondary {
  background: var(--arb-beige) !important;
  color: var(--arb-charcoal) !important;
  border: 1px solid var(--arb-beige) !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.hero-wrap .btn.btn-secondary:hover,
.hero-wrap .btn-secondary:hover,
.hero-wrap .btn.btn-secondary:focus,
.hero-wrap .btn-secondary:focus {
  background: #ffffff !important;
  color: var(--arb-green-deep) !important;
  border-color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

/* Japanese H1 phrase chunks: keep each 文節 as an inline-block so wrapping happens
   between phrases, not in the middle of a word.
   IMPORTANT: the base template's `.slider-text h1 span { color: #4e9525 }` would otherwise
   paint these phrase-spans bright green. Force inherit white from the parent H1. */
.hero-wrap .arb-h1-jp .arb-phrase {
  display: inline-block;
  color: inherit !important;
  font-size: 86%;
}
.hero-wrap .arb-h1-jp .arb-phrase-ki {
  font-size: 139.53%;
  vertical-align: baseline;
  color: #ffffff !important;
}

/* Sub hero (used on subpages) */
.hero-wrap-2 .overlay { background-color: rgba(15, 35, 22, 0.55); }
.hero-wrap-2 .bread {
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 4px 20px rgba(0,0,0,0.6);
}
/* English kicker label above the h1 on all sub-hero pages (about / gallery / contact / niwashimai) */
.arb-hero-kicker {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.18em;
  color: #f5e7b3 !important;
  margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.hero-wrap-2 .breadcrumbs,
.hero-wrap-2 .breadcrumbs a,
.hero-wrap-2 .breadcrumbs span { color: rgba(255,255,255,0.85); }

/* ---------- Sections ---------- */
.heading-section .subheading { color: var(--arb-green-mid); }
.heading-section h2 {
  color: var(--arb-charcoal);
  font-size: 36px;
  line-height: 1.5;
}
/* Our Work heading now sits below the h4 service list (see index.html) —
   scoped down in size so it reads as a secondary line, not competing with it. */
#our-work .heading-section h2 {
  font-size: 26px;
}

/* Service cards: soften corners, change icon block color */
.services {
  background: #fff;
  border: 1px solid var(--arb-line);
  border-radius: 4px;
  padding: 40px 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 4px 22px rgba(31, 77, 46, 0.06);
}
.services .icon {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--arb-beige-warm) !important;
  color: var(--arb-green-deep);
  margin-bottom: 18px;
  font-size: 30px;
}
.services .icon span { color: var(--arb-green-deep); }
.services h3 {
  font-size: 22px;
  color: var(--arb-charcoal);
  margin-bottom: 12px;
}
.services .text p {
  font-size: 14.5px;
  line-height: 1.95;
}
.services .btn-custom {
  background: var(--arb-green-deep);
  color: #fff !important;
  width: 40px; height: 40px; border-radius: 50%;
  margin-top: 8px;
}
.services .btn-custom:hover { background: var(--arb-brown); }

/* Service-card image (Arbonic-specific) */
.arb-service-card {
  background: #fff;
  border: 1px solid var(--arb-line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 6px 28px rgba(31, 77, 46, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.arb-service-card .arb-cover {
  width: 100%;
  padding-top: 66%;
  background-size: cover;
  background-position: center;
}
.arb-service-card .arb-body {
  padding: 24px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.arb-service-card h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  margin: 6px 0 12px;
  letter-spacing: 0.04em;
  display: inline-block;
  background: #ACC5A3;
  padding: 2px 8px;
  border-radius: 3px;
}
.arb-service-card .arb-en {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.arb-service-card p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--arb-charcoal-2);
  flex: 1;
}
.arb-service-card .arb-tags {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--arb-muted);
  letter-spacing: 0.1em;
}
.arb-service-card .arb-tag-pill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--arb-line);
  border-radius: 99px;
  background: var(--arb-beige);
  color: var(--arb-green-deep);
}
.arb-service-card .arb-more {
  align-self: flex-start;
  margin-top: 16px;
  font-size: 13px;
  color: var(--arb-green-deep);
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--arb-green-deep);
  padding-bottom: 2px;
}

/* Solid button used inside a service card (e.g. external-site jump for 庭じまい) */
.arb-service-card .arb-card-btn {
  align-self: flex-start;
  margin-top: 18px;
  display: inline-block;
  background: var(--arb-green-deep);
  color: #fff !important;
  padding: 11px 20px;
  font-size: 13px;
  letter-spacing: 0.08em;
  border: 1px solid var(--arb-green-deep);
  border-radius: 2px;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.arb-service-card .arb-card-btn:hover,
.arb-service-card .arb-card-btn:focus {
  background: #ffffff;
  color: var(--arb-green-deep) !important;
  border-color: var(--arb-green-deep);
  box-shadow: 0 4px 16px rgba(31, 77, 46, 0.18);
  text-decoration: none;
}

/* Section: tight definitions list */
.arb-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--arb-line);
}
.arb-menu-list > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--arb-line);
}
.arb-menu-list > li .arb-menu-name { font-size: 15px; }
.arb-menu-list > li .arb-menu-tag {
  font-size: 11px;
  color: var(--arb-muted);
  letter-spacing: 0.12em;
}
.arb-menu-list .arb-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--arb-beige-warm);
  border: 1px solid var(--arb-line);
  color: var(--arb-green-deep);
  margin-left: 6px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

/* Coverage row (個人宅・法人・公共バッジ) */
.arb-scope-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin: 30px 0;
}
.arb-scope-cell {
  text-align: center;
  padding: 22px 12px;
  border: 1px solid var(--arb-line);
  border-radius: 4px;
  background: #fff;
  color: var(--arb-charcoal);
  font-size: 14px;
  line-height: 1.6;
}
.arb-scope-cell .arb-scope-en {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--arb-green-mid);
  margin-bottom: 6px;
  font-size: 14px;
}

/* Quote teaser CTA strip */
.arb-cta-strip {
  background: var(--arb-green-deep);
  color: #fff;
  padding: 56px 0;
}
.arb-cta-strip h2 {
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 28px;
  margin-bottom: 12px;
}
.arb-cta-strip p { color: rgba(255,255,255,0.85); margin-bottom: 24px; }
.arb-cta-strip .btn {
  background: #fff !important;
  color: var(--arb-green-deep) !important;
  border: 1px solid #fff !important;
}
.arb-cta-strip .btn:hover {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

/* Gallery (施工事例) */
.gallery {
  width: 100%;
  height: 360px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.gallery::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(15,35,22,0.78) 100%);
  z-index: 1;
}
.gallery .desc, .gallery .icon { z-index: 2; }
.gallery .desc .text span {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #f5e7b3;
  letter-spacing: 0.16em;
  font-size: 13px;
}
.gallery .desc .text h2 {
  color: #fff !important;
  font-size: 22px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
}
.gallery .desc .text h2 a { color: #fff !important; }
.gallery .icon {
  background: rgba(255,255,255,0.92);
  color: var(--arb-green-deep) !important;
}
.gallery .icon span { color: var(--arb-green-deep) !important; }

/* Gallery category headers */
.arb-cat-header {
  text-align: left;
  padding: 30px 0 12px;
}
.arb-cat-header .arb-en {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.arb-cat-header h2 {
  font-size: 30px;
  font-family: 'Noto Serif JP', serif;
  margin: 0 0 8px;
}
.arb-cat-header p {
  color: var(--arb-charcoal-2);
  max-width: 720px;
  font-size: 14.5px;
}

/* Contact / quote page */
.arb-quote-card {
  background: #fff;
  border: 1px solid var(--arb-line);
  border-radius: 4px;
  padding: 28px 30px;
  margin-bottom: 22px;
  box-shadow: 0 4px 22px rgba(31, 77, 46, 0.06);
}
.arb-quote-card h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--arb-green-deep);
}
.arb-quote-card ol,
.arb-quote-card ul {
  padding-left: 1.4em;
  font-size: 14.5px;
  line-height: 2;
}
.arb-form-placeholder {
  background: var(--arb-beige);
  border: 1px dashed var(--arb-line);
  border-radius: 4px;
  padding: 60px 20px;
  text-align: center;
  color: var(--arb-muted);
}
.arb-form-placeholder strong {
  display: block;
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  color: var(--arb-charcoal);
  margin-bottom: 6px;
}
.arb-form-placeholder small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--arb-muted);
}

/* About — concept stack */
.arb-concept-section {
  padding: 60px 0;
  border-bottom: 1px solid var(--arb-line);
}
.arb-concept-section:last-of-type { border-bottom: none; }
.arb-concept-section .arb-en { font-size: 14px; }
.arb-concept-section h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 30px;
  letter-spacing: 0.06em;
  margin: 4px 0 18px;
  color: var(--arb-charcoal);
}
.arb-concept-section .arb-quote {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  line-height: 1.85;
  color: var(--arb-green-deep);
  border-left: 3px solid var(--arb-green-deep);
  padding: 4px 0 4px 20px;
  margin-bottom: 22px;
}
.arb-concept-section p { font-size: 15px; line-height: 2; max-width: 760px; }

.arb-value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 576px) {
  .arb-value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .arb-value-grid { grid-template-columns: repeat(4, 1fr); }
}
.arb-value-card {
  background: #fff;
  border: 1px solid var(--arb-line);
  border-radius: 4px;
  padding: 22px 20px;
}
.arb-value-card .arb-value-en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--arb-green-mid);
  font-size: 16px;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.arb-value-card h4 {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  margin-bottom: 8px;
}
.arb-value-card p { font-size: 13.5px; line-height: 1.8; color: var(--arb-charcoal-2); margin: 0; }

.arb-company-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14.5px;
}
.arb-company-table th,
.arb-company-table td {
  border-top: 1px solid var(--arb-line);
  padding: 14px 8px;
  vertical-align: top;
  text-align: left;
}
.arb-company-table tr:last-child th,
.arb-company-table tr:last-child td { border-bottom: 1px solid var(--arb-line); }
.arb-company-table th {
  color: var(--arb-green-deep);
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  width: 200px;
  background: var(--arb-beige);
}
.arb-company-table td .arb-tbd {
  color: var(--arb-muted);
  font-size: 12.5px;
}

/* Footer: switched to a light, clean band (cream like the header strip). */
.ftco-footer.ftco-bg-dark,
.ftco-footer {
  background-color: #f9f8ef !important;
  color: #333333;
  padding-top: 38px;
  padding-bottom: 32px;
}
.ftco-footer a { color: #5b6a5f; }
.ftco-footer a:hover { color: var(--arb-green-deep); }

/* Loader color */
#ftco-loader .path { stroke: var(--arb-green-deep) !important; }

/* Magnific popup arrows tint */
.mfp-arrow-left:before, .mfp-arrow-right:before { border-color: var(--arb-green-deep); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero-wrap .slider-text h1 { font-size: 32px; line-height: 1.5; }
  .hero-wrap .slider-text .arb-hero-lead { font-size: 19px; margin-bottom: 14px; }
  .heading-section h2 { font-size: 26px; }
  .arb-concept-section .arb-quote { font-size: 18px; }
  .arb-concept-section h2 { font-size: 24px; }
  .gallery { height: 240px; }
}

/* Phones (<576px): the previous override only widened tablet+, leaving phones at
   Bootstrap's default 15px container padding, which feels cramped against the edges.
   Bump up a touch for breathing room. */
@media (max-width: 575px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .arb-quote-card {
    padding: 22px 20px;
  }
  .arb-concept-section .arb-quote {
    padding-left: 14px;
  }
}

/* Tablet & small-laptop fix: Bootstrap pins .container to 720/960/1140px which
   creates excessive "ear" padding on the sides at intermediate widths (768-1199),
   causing tight wrapping. Widen the container and trim gutters there. */
@media (min-width: 576px) and (max-width: 1199px) {
  .container {
    max-width: calc(100% - 32px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* .no-gutters rows (edge-to-edge galleries) must keep their zero margins —
     re-adding the -10px here pushed them 20px past the viewport. */
  .row:not(.no-gutters) {
    margin-left: -10px;
    margin-right: -10px;
  }
  .row:not(.no-gutters) > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
  /* Heading section gets a slight bit more side breathing room */
  .heading-section,
  .arb-cat-header,
  .arb-concept-section .container {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Placeholder card for missing photos (剪定の家庭の庭など) */
.arb-photo-coming {
  background: repeating-linear-gradient(135deg, var(--arb-beige) 0 12px, var(--arb-beige-warm) 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: var(--arb-muted);
  border: 1px dashed var(--arb-line);
  border-radius: 4px;
  min-height: 240px;
  font-family: 'Noto Serif JP', serif;
}
.arb-photo-coming strong {
  display: block;
  margin-bottom: 6px;
  color: var(--arb-charcoal);
}
.arb-photo-coming small {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: var(--arb-muted);
}

/* ---------- Our Work: per-genre gallery blocks (below the 3 service cards) ---------- */
.arb-gallery-block {
  margin-top: 56px;
}
.arb-gallery-block:first-of-type {
  margin-top: 64px;
}
.arb-gallery-label {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 18px;
  color: var(--arb-charcoal);
  letter-spacing: 0.04em;
  border-left: 3px solid var(--arb-green-deep);
  padding: 4px 0 4px 14px;
  line-height: 1.4;
}
.arb-gallery-label .arb-en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--arb-green-mid);
  letter-spacing: 0.1em;
  font-size: 16px;
}
.arb-gallery-label .arb-gl-sep {
  color: var(--arb-line);
  margin: 0 4px;
}
.arb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 991px) {
  .arb-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (max-width: 767px) {
  .arb-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.arb-gallery-item {
  margin: 0;
  padding: 0;
}
.arb-gallery-item img,
.arb-gallery-item .arb-gallery-ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background: var(--arb-beige-warm);
  box-shadow: 0 4px 14px rgba(31, 77, 46, 0.07);
}
/* Placeholder for menu items whose施工写真は未撮影 */
.arb-gallery-item .arb-gallery-ph {
  background: repeating-linear-gradient(135deg, #f5f1e8 0 14px, #ede6d2 14px 28px);
  border: 1px dashed var(--arb-line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--arb-muted);
  box-shadow: none;
}
.arb-gallery-item .arb-gallery-ph span {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 99px;
}
.arb-gallery-item figcaption {
  font-size: 12px;
  color: var(--arb-charcoal-2);
  margin-top: 8px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.arb-gallery-item figcaption .arb-en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--arb-green-mid);
  font-size: 12px;
  letter-spacing: 0.08em;
}
@media (max-width: 575px) {
  .arb-gallery-label {
    font-size: 17px;
    padding-left: 12px;
  }
  .arb-gallery-label .arb-en { font-size: 14px; }
  .arb-gallery-item figcaption { font-size: 11px; margin-top: 6px; }
}

/* ====================================================================
   Niwashimai (庭じまい) page — dedicated styles for niwashimai.html
   ==================================================================== */
.hero-wrap.hero-wrap-2.arb-niwa-hero {
  height: auto !important;
  min-height: 260px !important;
  max-height: none !important;
  padding: 36px 0 32px !important;
}
.hero-wrap.hero-wrap-2.arb-niwa-hero .slider-text {
  height: auto !important;
  min-height: 0 !important;
}
.arb-niwa-hero .overlay {
  background: linear-gradient(
    to bottom,
    rgba(15, 35, 22, 0.62) 0%,
    rgba(15, 35, 22, 0.48) 50%,
    rgba(15, 35, 22, 0.65) 100%
  );
  opacity: 1 !important;
}
.arb-niwa-kicker {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.18em;
  color: #f5e7b3 !important;
  margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.arb-niwa-hero h1.arb-niwa-h1 {
  color: #ffffff;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 4px 20px rgba(0,0,0,0.6);
  margin-bottom: 14px;
}
/* hero直下のリード文 — 明背景なので暗マットは不要、緑deepで存在感を出す */
.arb-niwa-hero-lead {
  color: var(--arb-charcoal);
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  line-height: 2.1;
  margin: 0 auto;
  max-width: 680px;
  text-align: center;
}
@media (max-width: 767px) {
  .hero-wrap.hero-wrap-2.arb-niwa-hero { padding: 32px 0 28px !important; min-height: 220px !important; }
  .arb-niwa-hero h1.arb-niwa-h1 { font-size: 20px; line-height: 1.6; }
  .arb-niwa-hero-lead { font-size: 14.5px; }
}

/* Intro 一文 */
p.arb-niwa-intro {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 2;
  color: var(--arb-green-deep);
  background: rgba(31, 77, 46, 0.09);
  border: 1px solid rgba(31, 77, 46, 0.32);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(31, 77, 46, 0.10);
  padding: 28px 36px;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}
@media (max-width: 575px) {
  .arb-niwa-intro { font-size: 16px; padding: 20px 22px; }
}

/* Common Situations: チェックリスト */
.arb-niwa-checklist {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
}
.arb-niwa-checklist li {
  position: relative;
  padding: 12px 8px 12px 36px;
  border-bottom: 1px solid var(--arb-line);
  font-size: 15px;
  line-height: 1.6;
}
.arb-niwa-checklist li:last-child { border-bottom: none; }
.arb-niwa-checklist li::before {
  content: '✓';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--arb-green-deep);
  font-weight: 700;
  font-size: 16px;
}

/* Your Situation: 3カード */
.arb-niwa-case {
  background: #fff;
  border: 1px solid var(--arb-line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(31, 77, 46, 0.08);
  display: flex;
  flex-direction: column;
  width: 100%;
}
.arb-niwa-case-cover {
  width: 100%;
  padding-top: 62%;
  background-size: cover;
  background-position: center;
}
.arb-niwa-case-body {
  padding: 22px 22px 24px;
  flex: 1;
}
.arb-niwa-case-body h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  margin-bottom: 10px;
  color: var(--arb-charcoal);
}
.arb-niwa-case-body p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--arb-charcoal-2);
  margin: 0;
}

/* Service section: 画像+メニュー */
.arb-niwa-service-img {
  width: 100%;
  padding-top: 70%;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(31, 77, 46, 0.10);
}
.arb-niwa-h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 30px;
  letter-spacing: 0.04em;
  margin: 6px 0 16px;
  color: var(--arb-charcoal);
  line-height: 1.45;
}
.arb-niwa-service-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}
.arb-niwa-service-list li {
  position: relative;
  padding: 10px 8px 10px 22px;
  font-size: 14px;
  border-bottom: 1px solid var(--arb-line);
}
.arb-niwa-service-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arb-green-mid);
}
@media (max-width: 575px) {
  .arb-niwa-h2 { font-size: 24px; }
  .arb-niwa-service-list { grid-template-columns: 1fr; }
}

/* Process: 5ステップ流れ */
.arb-niwa-flow {
  list-style: none;
  padding: 0;
  counter-reset: niwa-step;
  max-width: 1000px;
  margin: 0 auto;
}
.arb-niwa-flow li {
  position: relative;
  padding: 24px 12px;
}
.arb-niwa-flow .arb-niwa-flow-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--arb-green-mid);
  margin-bottom: 8px;
  letter-spacing: 0.08em;
}
.arb-niwa-flow .arb-niwa-flow-name {
  display: block;
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  color: var(--arb-charcoal);
  line-height: 1.5;
}
@media (min-width: 768px) {
  /* 矢印（小三角）でステップを繋ぐ */
  .arb-niwa-flow > li:not(:last-child)::after {
    content: '›';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--arb-line);
    font-size: 28px;
    font-weight: 300;
  }
}

/* Message: 深緑帯の情緒メッセージ */
.arb-niwa-message {
  background: var(--arb-green-deep);
  color: #ffffff;
  padding: 80px 0;
}
.arb-niwa-msg-kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  letter-spacing: 0.2em;
  color: rgba(245, 231, 179, 0.85) !important;
  font-size: 14px;
}
.arb-niwa-msg-h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 34px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: #ffffff;
  margin: 8px 0 30px;
}
.arb-niwa-msg-body p {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  line-height: 2;
  color: rgba(255,255,255,0.88);
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}
.arb-niwa-msg-close {
  margin-top: 32px !important;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.78) !important;
  font-size: 15px !important;
}
@media (max-width: 575px) {
  .arb-niwa-message { padding: 56px 0; }
  .arb-niwa-msg-h2 { font-size: 26px; }
  .arb-niwa-msg-body p { font-size: 14.5px; }
}

/* ---------- Sticky CTA footer (appears after scrolling past hero) ---------- */
.arb-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: rgba(15, 35, 22, 0.88);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  padding: 14px 0;
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.28);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
.arb-sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.arb-sticky-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.arb-sticky-msg {
  color: #ffffff;
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  margin: 0;
  letter-spacing: 0.04em;
}
.arb-sticky-btn {
  display: inline-block;
  background: var(--arb-beige);
  color: var(--arb-charcoal);
  padding: 10px 22px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--arb-beige);
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  flex-shrink: 0;
}
.arb-sticky-btn:hover,
.arb-sticky-btn:focus {
  background: #ffffff;
  color: var(--arb-green-deep);
  border-color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
  text-decoration: none;
}
@media (max-width: 575px) {
  .arb-sticky-cta { padding: 10px 0; }
  .arb-sticky-row { gap: 10px; }
  .arb-sticky-msg { font-size: 12.5px; line-height: 1.5; }
  .arb-sticky-btn { padding: 8px 16px; font-size: 13px; }
}

/* Override the search form / social media icons — hide them on Arbonic for now */
.searchform { display: none; }
.social-media .fa-dribbble { display: none; }

/* Disable the template's scroll-reveal animation entirely.
   The base template hides .ftco-animate (opacity:0) then adds fadeInUp (translateY+opacity)
   via waypoints.js on scroll. Forcing opacity:1 left the translateY transform playing, which
   made elements visibly jump up = jank. We kill the animation/transform so content just
   appears in its final position. */
.ftco-animate,
.ftco-animate.fadeInUp,
.ftco-animate.fadeInLeft,
.ftco-animate.fadeInRight,
.ftco-animate.fadeIn,
.ftco-animate.item-animate,
.ftco-animate.ftco-animated {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-animation: none !important;
  animation: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* ---------- Quote route selector (contact page) ---------- */
.arb-route-lead { font-size: 15px; }

.arb-route-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--arb-line);
  border-top: 4px solid var(--arb-route-color, var(--arb-green-deep));
  border-radius: 4px;
  padding: 24px 26px 26px;
  cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
  box-shadow: 0 4px 22px rgba(31, 77, 46, 0.06);
}
.arb-route-a { --arb-route-color: var(--arb-green-deep); }
.arb-route-b { --arb-route-color: var(--arb-brown); }

.arb-route-card:hover,
.arb-route-card:focus-visible {
  border-color: var(--arb-route-color);
  box-shadow: 0 8px 30px rgba(31, 77, 46, 0.14);
  transform: translateY(-2px);
  outline: none;
}
.arb-route-card.is-active {
  border-color: var(--arb-route-color);
  box-shadow: 0 8px 30px rgba(31, 77, 46, 0.18);
}

/* Selectable affordance — an always-visible radio marker, filled when active */
.arb-route-card::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--arb-line);
  border-radius: 50%;
  transition: border-color .2s ease, background .2s ease;
}
.arb-route-card:hover::before { border-color: var(--arb-route-color); }
.arb-route-card.is-active::before {
  border-color: var(--arb-route-color);
  background: var(--arb-route-color) padding-box;
  box-shadow: inset 0 0 0 3px #fff;
}

/* 判断軸 — the line that answers "which one am I?" */
.arb-route-for {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--arb-route-color);
  margin-bottom: 12px;
  padding-right: 34px;
}
.arb-route-for > span:last-child { flex: 1; padding-top: 2px; }
/* Reserve two lines so both cards' headings start on the same baseline */
@media (min-width: 768px) {
  .arb-route-for { min-height: 58px; }
}
.arb-route-for strong { font-weight: 700; }

.arb-route-badge {
  flex: none;
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--arb-route-color);
  color: #fff;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
}
.arb-route-card h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 21px;
  margin: 0 0 4px;
  line-height: 1.5;
}
.arb-route-sub {
  font-size: 13px;
  color: var(--arb-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

.arb-route-detail {
  margin-top: 16px;
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--arb-line);
}
.arb-route-detail p { font-size: 14px; margin-bottom: 8px; }
.arb-route-detail ul,
.arb-route-detail ol { font-size: 14px; line-height: 1.9; margin-bottom: 0; }
.arb-route-note {
  font-size: 13.5px;
  padding: 8px 12px;
  background: var(--arb-beige);
  border-left: 3px solid var(--arb-route-color);
  color: var(--arb-route-color);
}

.arb-route-cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 12px 26px;
  background: var(--arb-route-color);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.06em;
  border-radius: 2px;
}
.arb-route-card.is-active .arb-route-cta::after { content: '（表示中）'; font-size: 12px; opacity: .85; }

/* Mobile: strip the cards to the decision itself so A and B can be compared.
   The photo guidance lives in the form-A panel, the GIGA how-to in the form-B panel. */
@media (max-width: 767px) {
  .arb-route-card { padding: 18px 18px 20px; }
  .arb-route-detail { display: none; }
  .arb-route-for { font-size: 14px; margin-bottom: 10px; }
  .arb-route-card h3 { font-size: 19px; }
  .arb-route-cta {
    display: block;
    align-self: stretch;
    margin-top: 16px;
    text-align: center;
  }
}

/* Ensure [hidden] form panels really stay hidden over template display rules */
.arb-form-panel[hidden] { display: none !important; }

/* ---------- Launch-in-new-tab block (Route A) ----------
   Route A's Google Form requires sign-in, and Google refuses to render the
   sign-in flow inside an iframe (X-Frame-Options: DENY on the gate page).
   So this route opens top-level instead of embedding. */
.arb-form-launch {
  background: #fff;
  border: 1px solid var(--arb-line);
  border-top: 4px solid var(--arb-green-deep);
  border-radius: 4px;
  padding: 28px 26px;
  text-align: center;
}
.arb-form-launch-note {
  font-size: 14.5px;
  line-height: 1.9;
  margin: 0 auto 22px;
  max-width: 640px;
}
.arb-form-launch-sub {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--arb-muted);
}
.arb-form-launch-btn {
  display: inline-block;
  background: var(--arb-green-deep);
  color: #fff !important;
  font-size: 17px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 18px 44px;
  border-radius: 3px;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.arb-form-launch-label::after {
  content: ' ↗';
  font-size: 15px;
  opacity: .85;
}
.arb-form-launch-btn:hover,
.arb-form-launch-btn:focus {
  background: var(--arb-green-mid);
  box-shadow: 0 8px 26px rgba(31, 77, 46, 0.24);
  transform: translateY(-2px);
  text-decoration: none;
}
.arb-form-launch-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: .85;
}
.arb-form-launch-alt {
  font-size: 13.5px;
  color: var(--arb-charcoal-2);
  margin: 22px auto 0;
  max-width: 640px;
}
.arb-form-launch-alt a {
  color: var(--arb-brown);
  border-bottom: 1px solid var(--arb-brown);
  padding-bottom: 1px;
}

@media (max-width: 767px) {
  .arb-form-launch { padding: 22px 18px; }
  .arb-form-launch-btn {
    display: block;
    padding: 17px 20px;
    font-size: 16px;
  }
}

/* ---------- Quote flow (contact page) — 4 steps, promoted to main content ---------- */
.arb-flow-section {
  border-top: 1px solid var(--arb-line);
  border-bottom: 1px solid var(--arb-line);
}

.arb-flow-col {
  position: relative;
  display: flex;
  margin-bottom: 24px;
}

/* Connector chevron between steps (desktop: pointing right) */
.arb-flow-col::after {
  content: '';
  position: absolute;
  top: 78px;
  right: -8px;
  width: 15px;
  height: 15px;
  border-top: 2px solid var(--arb-green-mid);
  border-right: 2px solid var(--arb-green-mid);
  transform: rotate(45deg);
  opacity: 0.5;
  z-index: 2;
}
.arb-flow-col:last-child::after { display: none; }

.arb-flow-step {
  flex: 1;
  background: #fff;
  border: 1px solid var(--arb-line);
  border-top: 3px solid var(--arb-green-deep);
  border-radius: 4px;
  padding: 22px 20px 20px;
  box-shadow: 0 4px 22px rgba(31, 77, 46, 0.06);
}
.arb-flow-step-optional {
  border-top-color: var(--arb-brown);
  border-top-style: dashed;
}

.arb-flow-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--arb-green-deep);
  opacity: 0.3;
  margin-bottom: 4px;
}
.arb-flow-step-optional .arb-flow-num { color: var(--arb-brown); }

.arb-flow-step .arb-en {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}
.arb-flow-step-optional .arb-en { color: var(--arb-brown) !important; }

.arb-flow-step h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0 0 10px;
}
.arb-flow-tag {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--arb-brown);
  background: var(--arb-beige-warm);
  border-radius: 99px;
  padding: 2px 9px;
  vertical-align: 2px;
  white-space: nowrap;
}
.arb-flow-step p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--arb-charcoal-2);
  margin: 0;
}

.arb-flow-note {
  font-size: 14px;
  color: var(--arb-charcoal-2);
  margin: 10px 0 22px;
}
.arb-flow-cta {
  display: inline-block;
  background: var(--arb-green-deep);
  color: #fff !important;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 14px 38px;
  border-radius: 2px;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.arb-flow-cta::after { content: ' →'; }
.arb-flow-cta:hover,
.arb-flow-cta:focus {
  background: var(--arb-green-mid);
  box-shadow: 0 8px 26px rgba(31, 77, 46, 0.24);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Tablet: col-md-3 stays 4-across but gets narrow — tighten type so it still breathes */
@media (min-width: 768px) and (max-width: 991px) {
  .arb-flow-step { padding: 18px 14px 16px; }
  .arb-flow-num { font-size: 32px; }
  .arb-flow-step h3 { font-size: 17px; }
  .arb-flow-step p { font-size: 13px; line-height: 1.8; }
  .arb-flow-col::after { top: 66px; }
}

/* Mobile: stack vertically, chevron points down */
@media (max-width: 767px) {
  .arb-flow-col { margin-bottom: 26px; }
  .arb-flow-col::after {
    top: auto;
    bottom: -20px;
    right: auto;
    left: 50%;
    margin-left: -8px;
    transform: rotate(135deg);
  }
  .arb-flow-num { font-size: 34px; }
  .arb-flow-step { padding: 18px 18px 16px; }
  .arb-flow-step h3 { font-size: 18px; }
  .arb-flow-cta {
    display: block;
    padding: 15px 20px;
  }
}

/* How-to video small window (responsive 16:9) */
.arb-video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--arb-line);
}
.arb-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ====================================================================
   Breakpoint corrections — the layout was designed at desktop width,
   so these fix what only breaks at tablet (768-991) and phone (<768).
   ==================================================================== */

/* [1] Hero kicker is a one-line flavour string (white-space:nowrap), which at
   390px measured 486px wide and forced 116px of horizontal scroll. It is not
   meant to be read closely, so shrink it to fit rather than letting it wrap. */
@media (max-width: 767px) {
  .hero-wrap .slider-text h2.subheading,
  .hero-wrap .slider-text .subheading {
    font-size: 11.5px !important;
    letter-spacing: 0.08em;
  }
}
@media (max-width: 360px) {
  .hero-wrap .slider-text h2.subheading,
  .hero-wrap .slider-text .subheading {
    font-size: 10.5px !important;
    letter-spacing: 0.06em;
  }
}

/* [3] Tablet: col-md-4 kicks in at 768px, leaving ~236px per card — too narrow
   for Japanese body copy. Card-style and gallery columns go two-up instead. */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-4.d-flex,
  .row.no-gutters > .col-md-4,
  .arb-concept-section .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* [4] Gallery captions sat directly on the photo; bright skies swallowed the
   white text. Put a green matte behind the Japanese line. */
.gallery .desc .text h2 {
  display: inline-block;
  background: rgba(31, 77, 46, 0.85);
  padding: 5px 12px;
  border-radius: 2px;
  margin-bottom: 0;
}
/* h2 became inline-block for the matte to hug its text, which pulled the English
   label onto the same line — keep the label on its own row above it. */
.gallery .desc .text span {
  display: block;
  margin-bottom: 4px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
@media (max-width: 991px) {
  .gallery .desc .text h2 { font-size: 18px; padding: 4px 10px; }
}

/* [5] CTA strip: the button column is squeezed to a 2-line box below desktop.
   Stack it under the message and centre both. */
@media (max-width: 991px) {
  .arb-cta-strip .col-md-8,
  .arb-cta-strip .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .arb-cta-strip .row { text-align: center; }
  .arb-cta-strip .text-md-right { text-align: center !important; }
  .arb-cta-strip .btn { white-space: nowrap; margin-top: 6px; }
}

/* [6] "Arbonicらしさ": photo + copy side by side gets too tight below desktop. */
@media (max-width: 991px) {
  #our-approach .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #our-approach .pl-md-5 { padding-left: 15px !important; }
}

/* ---------- Privacy Policy page (privacy.html) ---------- */
/* 追記日: 2026-09-05 / SEO・法務対応で privacy.html を新設した際に追加 */
.arb-privacy h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  color: var(--arb-green-deep);
  margin: 42px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--arb-line);
}
.arb-privacy h2:first-of-type { margin-top: 8px; }
.arb-privacy p  { line-height: 1.95; margin-bottom: 14px; }
.arb-privacy ul { margin: 0 0 18px; padding-left: 1.4em; }
.arb-privacy li { line-height: 1.9; margin-bottom: 6px; }
.arb-privacy .arb-company-table { margin-top: 8px; }
.arb-privacy-date {
  margin-top: 46px;
  padding-top: 16px;
  border-top: 1px solid var(--arb-line);
  font-size: 14px;
  color: #6b6b6b;
}
@media (max-width: 767px) {
  .arb-privacy h2 { font-size: 19px; margin-top: 34px; }
}
.arb-footer-links a { color: rgba(255,255,255,.75); font-size: 13px; text-decoration: underline; }
.arb-footer-links a:hover { color: #fff; }

/* ---------- Gallery: 背景画像 → <img> 化（2026-09-05） ----------
 * CSSのbackground-imageは loading="lazy" が効かず、画面外の写真まで
 * 初回に全部読み込んでしまう。<img> にすることで遅延読み込みを効かせる。
 * 見た目は従来どおり（cover / 中央基準）を維持する。
 * 重なり順: img(0) < .gallery::after のグラデーション(1) < .desc/.icon(2) */
.gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
  background: var(--arb-beige-warm);   /* 読み込み中の下地 */
}