/*
 * Kato Oil shared site footer
 * 2026-10-09: one visual / markup source for the general site.
 */
.kt-footer{
  --kt-footer-accent:#4C9AFF;
  --kt-footer-bg:#0C1219;
  --kt-footer-text:rgba(255,255,255,.85);
  --kt-footer-muted:rgba(255,255,255,.62);
  --kt-footer-ease:cubic-bezier(.2,.8,.2,1);
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  width:100%;
  padding:76px 88px 44px;
  background:var(--kt-footer-bg);
  color:#fff;
  font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.kt-footer *,
.kt-footer *::before,
.kt-footer *::after{box-sizing:border-box}
.kt-footer a{text-decoration:none}
.kt-footer__media{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
  background-image:var(--kt-footer-bg-pc);
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}
.kt-footer:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(12,18,25,.78) 0%,rgba(12,18,25,.82) 45%,rgba(12,18,25,.94) 100%);
  pointer-events:none;
}
.kt-footer__inner{position:relative;z-index:2;width:100%;max-width:1720px;margin:0 auto}
.kt-footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:80px}
.kt-footer__brand{flex:0 0 auto}
.kt-footer__brand .kt-footer__logo{display:block;width:250px;max-width:100%;height:auto;filter:brightness(0) invert(1)}
.kt-footer__address{margin:24px 0 0;font-size:15px;line-height:2.1;letter-spacing:.06em;color:var(--kt-footer-text)}
.kt-footer__tel,.kt-footer__sep,.kt-footer__fax{display:inline}
.kt-footer__sns{display:flex;align-items:center;gap:14px;margin-top:26px}
.kt-footer__sns-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:50%;background:#131C26;transition:opacity .2s var(--kt-footer-ease),transform .2s var(--kt-footer-ease)}
.kt-footer__sns-link img{display:block;filter:none!important;width:19px;height:19px;object-fit:contain}
.kt-footer__sns-link--line img{width:20px;height:20px}
.kt-footer__sns-link[aria-label="X"] img{width:16px;height:16px}
.kt-footer__sns-link:hover{opacity:.78;transform:translateY(-1px)}
.kt-footer__sns-link:focus-visible{outline:2px solid var(--kt-footer-accent);outline-offset:2px}
.kt-footer__nav{display:flex;flex:0 0 auto;justify-content:flex-end;gap:60px;margin-left:auto;padding-top:6px}
.kt-footer__group{flex:0 0 150px;min-width:150px}
.kt-footer__group .kt-footer__group-title{display:block;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.14em;color:#fff}
.kt-footer__group a.kt-footer__group-title{transition:color .2s var(--kt-footer-ease)}
.kt-footer__group a.kt-footer__group-title:hover{color:var(--kt-footer-accent)}
.kt-footer__nav-link{display:flex!important;align-items:baseline;gap:10px;font-size:15px!important;line-height:2.1!important;letter-spacing:.06em;color:var(--kt-footer-text)!important;transition:color .2s var(--kt-footer-ease)}
.kt-footer__nav-link span{flex:none;font-family:Jost,Arial,sans-serif;font-size:11px;color:var(--kt-footer-accent)}
.kt-footer__nav-link:hover{color:#fff!important}
.kt-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.kt-footer__copyright{display:block;font-family:Jost,Arial,sans-serif;font-size:10px;line-height:1.6;letter-spacing:.2em;color:var(--kt-footer-muted);white-space:nowrap}
.kt-footer__utility{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:28px}
.kt-footer__utility a{font-size:12px;line-height:1.6;letter-spacing:.06em;color:rgba(255,255,255,.82);transition:color .2s var(--kt-footer-ease)}
.kt-footer__utility a:hover,.kt-footer__utility a:focus-visible{color:#fff}
.kt-footer__utility a.kt-footer__utility-external{display:inline-flex;align-items:baseline;gap:4px}
.kt-footer__utility-external span{font-family:Jost,Arial,sans-serif;font-size:.9em;font-weight:600;line-height:1;color:var(--kt-footer-accent)}

@media (min-width:1024px) and (max-width:1499px){
  .kt-footer{padding:64px 48px 40px}
  .kt-footer:after{background:linear-gradient(180deg,rgba(12,18,25,.78) 0%,rgba(12,18,25,.82) 52%,rgba(12,18,25,.89) 100%)}
  .kt-footer__top{display:block}
  .kt-footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 52px;margin-top:46px;margin-left:0;padding-top:0}
  .kt-footer__group{min-width:0;flex:auto}
  .kt-footer__bottom{align-items:flex-start}
  .kt-footer__utility{max-width:520px}
}

@media (max-width:1023px){
  .kt-footer{padding:48px 22px 32px}
  .kt-footer__media{background-image:var(--kt-footer-bg-sp);background-position:top center}
  .kt-footer:after{background:linear-gradient(180deg,rgba(12,18,25,.78) 0%,rgba(12,18,25,.84) 42%,rgba(12,18,25,.95) 100%)}
  .kt-footer__top{display:block}
  .kt-footer__brand .kt-footer__logo{width:200px}
  .kt-footer__address{margin-top:20px;font-size:15px;line-height:2.05;letter-spacing:.05em}
  .kt-footer__tel,.kt-footer__fax{display:block}
  .kt-footer__sep{display:none}
  .kt-footer__sns{gap:12px;margin-top:24px}
  .kt-footer__sns-link{width:44px;height:44px}
  .kt-footer__nav{display:block;margin-top:34px;padding-top:0}
  .kt-footer__group{min-width:0}
  .kt-footer__group + .kt-footer__group{margin-top:30px}
  .kt-footer__group .kt-footer__group-title{padding-bottom:12px;margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.16);font-size:12px;letter-spacing:.14em}
  .kt-footer__nav-link{align-items:center;justify-content:space-between;gap:18px;padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.10);font-size:16px!important;line-height:1.55!important;letter-spacing:.05em}
  .kt-footer__nav-link span{order:2;margin-left:auto;font-size:16px}
  .kt-footer__bottom{display:flex;flex-direction:column-reverse;align-items:stretch;gap:0;margin-top:34px;padding-top:0;border-top:0}
  .kt-footer__utility{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
  .kt-footer__utility a{display:block;margin:0;font-size:12px;letter-spacing:.05em}
  .kt-footer__copyright{margin-top:22px;font-size:9px;letter-spacing:.18em;white-space:normal}
}


/* 2026-10-14: Footer-end scroll clearance for the fixed back-to-top button.
 * The control stays visible; after scrolling to the page end, utility links and
 * copyright can rise fully above the button and mobile fixed CTA.
 * Add space INSIDE the footer so its background continues naturally.
 */
.kt-footer{padding-bottom:112px}
@media (min-width:1024px) and (max-width:1499px){
  .kt-footer{padding-bottom:112px}
}
@media (max-width:1023px){
  .kt-footer{padding-bottom:calc(132px + env(safe-area-inset-bottom, 0px))}
}


/* 2026-10-15 | Desktop footer navigation layout
 * Keep the four navigation groups on one horizontal row whenever there is
 * room. At narrower desktop widths, move ONLY the brand above the nav; do not
 * turn the 4 groups into an unnecessary 2x2 grid at 1499px.
 * Mobile <=1023px retains the existing stacked/link-row layout.
 */
@media (min-width:1024px) and (max-width:1599px){
  .kt-footer{padding-left:48px;padding-right:48px}
  .kt-footer__top{display:flex;align-items:flex-start;gap:clamp(24px,2vw,36px)}
  .kt-footer__brand{flex:0 0 clamp(190px,16vw,230px);min-width:0}
  .kt-footer__nav{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    flex:1 1 0;
    gap:clamp(16px,1.8vw,30px);
    width:auto;
    min-width:0;
    margin:0;
    padding-top:6px;
  }
  .kt-footer__group{flex:none;min-width:0}
  .kt-footer__nav-link{gap:7px;white-space:nowrap}
}
@media (min-width:1024px) and (max-width:1239px){
  .kt-footer__top{display:block}
  .kt-footer__brand{width:auto}
  .kt-footer__nav{
    width:100%;
    margin-top:38px;
    padding-top:0;
  }
}

/* Narrow desktop: utility links should stay together rather than wrap one
 * label alone beside the copyright. Keep mobile's existing vertical stack. */
@media (min-width:1024px) and (max-width:1199px){
  .kt-footer__bottom{
    display:flex;
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:18px;
  }
  .kt-footer__utility{
    width:100%;
    max-width:none;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:clamp(14px,2vw,26px);
  }
}

/* 2026-10-26: keep postcode on its own line and wrap address at natural units. */
.kt-footer__postal,
.kt-footer__address-place,
.kt-footer__address-street{white-space:nowrap;}
.kt-footer__address{overflow-wrap:break-word;}
.kt-footer__tel,.kt-footer__fax{display:block;}