/* ======================================================
   KENNDO Management — Common CSS (Modern Material Design)
   ====================================================== */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --navy:        #16385d;
  --navy-dark:   #0e2740;
  --navy-mid:    #1e4a78;
  /* Teal is split by role: #00a7bd fails WCAG AA both as text on white (2.89)
     and as a backing for white text (2.89), so it is decoration-only. */
  --accent:        #00a7bd;  /* rules, dots, gradients, borders, icons — never text */
  --accent-dark:   #007f8e;  /* backing for white text (4.74) */
  --accent-darker: #006a76;  /* its hover (6.32) */
  --accent-text:   #00707d;  /* text on white (5.81) / on --accent-light (5.14) */
  --accent-on-dark:#4dd0e1;  /* text on the navy gradient (4.95–6.50) */
  --accent-light:#e0f5f8;
  --muted:       #5c6672;    /* 5.43 on --bg-alt (was #6a7480 = 4.42) */
  --line:        #dde3ea;
  --bg-alt:      #f4f7fa;
  --bg-white:    #ffffff;
  --text:        #1e2832;
  --radius:      10px;
  --radius-lg:   16px;
  --shadow-sm:   0 2px 8px rgba(22,56,93,.08);
  --shadow-md:   0 8px 24px rgba(22,56,93,.12);
  --shadow-lg:   0 16px 48px rgba(22,56,93,.16);
  --transition:  .28s cubic-bezier(.4,0,.2,1);
  --nav-h:       72px;
  --util-h:      38px;   /* utilバー実測37px + navの下線1px */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 15px; line-height: 1.8; color: var(--text); background: var(--bg-white);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }

/* ---------- Layout ---------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 820px; }
section { padding: 96px 0; }
section.alt { background: var(--bg-alt); }

/* ---------- Typography ---------- */
.en {
  font-family: 'Montserrat', Arial, sans-serif;
  letter-spacing: .04em;
}
.eyebrow {
  display: inline-block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-text);
  margin-bottom: 16px;
}
h2.sec {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800; color: var(--navy);
  line-height: 1.45; margin-bottom: 48px;
}
.lead {
  font-size: 16px; color: #48535f; line-height: 2;
  max-width: 760px; margin-bottom: 40px;
}
.center { text-align: center; }

/* ---------- Utility bar ---------- */
.util {
  background: var(--navy-dark);
  padding: 8px 0;
  position: relative; z-index: 200;
}
.util .wrap {
  display: flex; justify-content: flex-end; align-items: center; gap: 24px;
}
.util a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 11.5px; font-weight: 600; color: #a8bfcc;
  letter-spacing: .06em; transition: color var(--transition);
}
.util a:hover { color: var(--accent); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition);
}
.nav.scrolled { box-shadow: var(--shadow-md); }
.nav > .wrap {
  display: flex; align-items: center;
  height: var(--nav-h); gap: 24px;
}
.logo {
  display: flex; align-items: center;
  flex-shrink: 0;
}
.logo-img { height: 40px; width: auto; }

/* nav links */
.nav nav { margin-left: auto; }
.nav nav > ul {
  display: flex; align-items: center; gap: 4px;
}
.nav nav > ul > li { position: relative; }
.nav nav > ul > li > a {
  display: block; padding: 10px 14px;
  font-size: 13.5px; font-weight: 500; color: var(--navy);
  border-radius: 6px; transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav nav > ul > li > a:hover,
.nav nav > ul > li.active > a { background: var(--accent-light); color: var(--accent-text); }
/* Any opacity here drops the caret below AA against the active item's tinted chip. */
.caret { font-size: 10px; margin-left: 2px; }

/* dropdown */
/* The panel opens 8px below the <li>. That gap is outside the <li>, so without this
   bridge the pointer loses :hover on the way down and the menu closes before it can be clicked. */
.nav nav > ul > li.has-sub::after {
  content: ''; position: absolute;
  top: 100%; left: 0; right: 0; height: 8px;
}
.nav nav > ul > li.has-sub:hover .nav-sub,
.nav nav > ul > li.has-sub:focus-within .nav-sub { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-sub {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  min-width: 220px; padding: 8px 0;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition);
}
.nav-sub li a {
  display: block; padding: 10px 18px;
  font-size: 13px; color: var(--navy);
  transition: background var(--transition), color var(--transition);
}
.nav-sub li a:hover { background: var(--accent-light); color: var(--accent-text); }

/* CTA nav button */
.navcta > a {
  background: var(--accent-dark) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 9px 18px !important;
  font-weight: 700 !important;
  transition: background var(--transition) !important;
}
.navcta > a:hover { background: var(--accent-darker) !important; }

/* Hamburger */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  width: 40px; height: 40px; margin-left: auto;
  border-radius: 6px; gap: 5px;
  transition: background var(--transition);
}
.nav-toggle:hover { background: var(--bg-alt); }
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 28px; border-radius: 7px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  transition: all var(--transition);
  cursor: pointer; text-align: center; line-height: 1.3;
}
.btn-accent {
  background: var(--accent-dark); color: #fff;
  box-shadow: 0 4px 16px rgba(0,167,189,.32);
}
.btn-accent:hover { background: var(--accent-darker); box-shadow: 0 6px 20px rgba(0,167,189,.44); transform: translateY(-1px); }
.btn-navy {
  background: var(--navy); color: #fff;
  box-shadow: 0 4px 16px rgba(22,56,93,.24);
}
.btn-navy:hover { background: var(--navy-dark); box-shadow: 0 6px 20px rgba(22,56,93,.36); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.65);
}
.btn-ghost:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.btn-outline {
  background: transparent; color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: #fff; }

/* ---------- Page head (inner pages) ---------- */
.pagehead {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 80px 0 64px;
  position: relative; overflow: hidden;
}
.pagehead::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300a7bd' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.pagehead .wrap { position: relative; }
.pagehead .en {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--accent-on-dark); text-transform: uppercase; margin-bottom: 12px;
}
.pagehead h1 {
  font-size: clamp(26px, 3vw, 38px); font-weight: 800;
  color: #fff; line-height: 1.3; margin-bottom: 16px;
}
.pagehead .crumb { font-size: 13px; color: rgba(255,255,255,.6); }
.pagehead .crumb a { color: rgba(255,255,255,.75); transition: color var(--transition); }
.pagehead .crumb a:hover { color: var(--accent-on-dark); }

/* ---------- Final CTA section ---------- */
.final {
  background: linear-gradient(135deg, var(--navy) 0%, #1a4a78 100%);
  padding: 96px 0;
  text-align: center;
}
.final h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800; color: #fff; margin-bottom: 24px; line-height: 1.4;
}
.final > .wrap > p {
  font-size: 16px; color: rgba(255,255,255,.8);
  max-width: 700px; margin: 0 auto 40px; line-height: 2;
}
.final .cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
footer {
  background: var(--navy-dark);
  padding: 56px 0 36px;
  color: rgba(255,255,255,.75);
}
footer .wrap {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 40px 56px; align-items: start;
}
footer .logo-img { height: 32px; opacity: .9; }
footer .logo-text {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px; font-weight: 800; color: #fff;
  letter-spacing: .04em;
}
footer .logo-sub { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; }
footer > .wrap > div:last-child {
  font-size: 12px; color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px; margin-top: 8px;
  grid-column: 1 / -1;
}
footer a { color: rgba(255,255,255,.65); transition: color var(--transition); }
footer a:hover { color: var(--accent); }
footer > .wrap > div:nth-child(2) {
  font-size: 13px; line-height: 2; color: rgba(255,255,255,.6);
}

/* ---------- Scroll animation ---------- */
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; position: relative; z-index: 120; }
  /* The header's backdrop-filter would otherwise become the containing block for the
     fixed menu below, trapping it inside the header strip. Drop the filter on mobile
     (visually indistinguishable at this size) so the menu can cover the full viewport. */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .nav nav {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #fff; z-index: 110;
    padding: calc(var(--nav-h) + 20px) 24px 40px;
    overflow-y: auto;
  }
  .nav nav.open { display: block; }
  .nav nav > ul { flex-direction: column; gap: 0; align-items: stretch; }
  .nav nav > ul > li > a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
  /* No gap to bridge once the panel is static — the strip would cover the next item. */
  .nav nav > ul > li.has-sub::after { display: none; }
  .nav-sub {
    position: static; opacity: 1; pointer-events: auto;
    transform: none; box-shadow: none; border: none;
    padding: 0 0 0 16px; min-width: unset;
  }
  .nav-sub li a { padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
  .navcta { margin-top: 20px; }
  .navcta > a { display: block; text-align: center; }
  .wrap { padding: 0 20px; }
  section { padding: 64px 0; }
  footer .wrap { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 600px) {
  :root { --nav-h: 60px; }
  .logo-img { height: 32px; }
  h2.sec { margin-bottom: 32px; }
  .btn { padding: 12px 20px; font-size: 13px; }
}