/* ============================================================
   FINANCIAL SUPPORT — shared stylesheet
   Palette: navy #16243f / deep navy #0f182c / gold #c2a45a / bronze #a06e3c
   The page bodies keep the approved inline styles for pixel fidelity;
   this file adds the base reset, a real header + mobile nav, hover/focus
   states (formerly dc-runtime style-hover/style-focus), and a responsive
   layer that collapses the inline grids and scales type on small screens.
   ============================================================ */

:root{
  --navy:#16243f;
  --navy-deep:#0f182c;
  --gold:#c2a45a;
  --bronze:#a06e3c;
  --ink:#2a2f3a;
  --line:#eef1f5;
  --max:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Noto Sans JP',sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
input,select,textarea{font-family:inherit}

@keyframes fsfade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--navy);color:#fff;font-size:13px;border-radius:0 0 4px 0;
}
.skip-link:focus{left:0}

/* ---------- Header / navigation ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  max-width:var(--max);margin:0 auto;
  padding:16px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{height:34px;display:block}
.brand__wordmark{
  font-family:'Zen Old Mincho',serif;font-weight:700;
  font-size:18px;color:var(--navy);letter-spacing:.06em;white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:30px;font-size:13px;color:#3a4151;font-weight:500}
.nav a{transition:color .2s}
.nav a:hover{color:var(--navy)}
.nav a.is-active{color:var(--navy);font-weight:700;border-bottom:2px solid var(--gold);padding-bottom:4px}
.nav__cta{
  padding:11px 24px;background:var(--navy);color:#fff !important;
  border-radius:3px;font-size:12px;letter-spacing:.06em;
}
.nav__cta:hover{background:#20355c}
.nav__cta--gold{background:var(--gold);color:#1a1505 !important;font-weight:700}
.nav__cta--gold:hover{background:#cdb06a}

/* hamburger — hidden on desktop */
.nav-toggle{
  display:none;border:none;background:none;cursor:pointer;
  width:42px;height:42px;padding:8px;
}
.nav-toggle span{display:block;height:2px;background:var(--navy);border-radius:2px;margin:5px 0;transition:.25s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Helpers migrated from dc-runtime ---------- */
/* entrance cards (was style-hover) */
.lift{transition:transform .3s,box-shadow .3s}
.lift:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(20,36,63,.18) !important}

/* form fields (was style-focus) */
.field{transition:border-color .2s}
.field:focus{border-color:var(--gold) !important}

/* representative photo placeholder (was <x-import image-slot>) */
.photo-ph{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(155deg,#1b2c4d,#16243f 60%,#22365f);
  color:#9fb0c9;text-align:center;padding:24px;
}
.photo-ph svg{opacity:.6}
.photo-ph span{font-size:12px;letter-spacing:.14em;color:#aeb8cc}

/* contact form individual / corporate switch (was {{ }} handlers) */
.type-toggle{display:flex;margin-bottom:26px;border:1px solid #d8dde6;border-radius:6px;overflow:hidden;width:fit-content}
.type-toggle button{padding:12px 28px;font-size:13px;font-weight:700;border:none;cursor:pointer;background:#fff;color:#3a4151;transition:background .2s,color .2s}
.type-toggle button.is-active{background:#16243f;color:#fff}

/* contact form success message (was <sc-if>) */
.form-success{
  padding:16px 20px;background:#eef6ef;border:1px solid #bcdcc0;
  border-radius:6px;font-size:13.5px;color:#2f6b3a;line-height:1.8;
}

/* ============================================================
   RESPONSIVE LAYER
   The page content uses inline styles (specificity 1,0,0,0), so these
   overrides use !important to win. Attribute selectors target the inline
   grids/headings generically so no per-element classes are needed.
   ============================================================ */

/* tablet */
@media (max-width:900px){
  .site-header__inner{padding:14px 22px}
  /* asymmetric 2-col editorial grids stack */
  [style*="grid-template-columns:.9fr"],
  [style*="grid-template-columns:.85fr"],
  [style*="grid-template-columns:.82fr"],
  [style*="grid-template-columns:.92fr"],
  [style*="grid-template-columns:.8fr"],
  [style*="grid-template-columns:.5fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns:1.08fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1fr 1.15fr"],
  [style*="grid-template-columns:1fr 1px 1fr"]{
    grid-template-columns:1fr !important;gap:36px !important;
  }
  /* 3- and 4-up card rows → 2-up */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  /* staggered cards lose their offset when stacked */
  [style*="margin-top:34px"]{margin-top:0 !important}
}

/* mobile nav breakpoint */
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(20,36,63,.1);padding:8px 0;
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px 24px;border-bottom:1px solid var(--line);font-size:14px}
  .nav a.is-active{border-bottom:1px solid var(--line);padding-bottom:15px}
  .nav__cta,.nav__cta--gold{
    margin:10px 24px 6px;text-align:center;border-radius:4px;padding:14px;font-size:13px;
  }
}

/* phone */
@media (max-width:600px){
  /* every multi-column inline grid collapses to one column */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* …except the 10-funds matrix, which reads fine as 2-up */
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr) !important}

  /* scale down the large display headings */
  h1[style]{font-size:30px !important;line-height:1.5 !important}
  h2[style]{font-size:24px !important;line-height:1.5 !important}
  h3[style]{font-size:20px !important}

  /* tame the biggest hero / section paddings */
  [style*="padding:120px 40px 124px"]{padding:64px 22px 68px !important}
  [style*="padding:94px 40px"]{padding:60px 22px !important}
  [style*="padding:90px 40px"]{padding:56px 22px !important}
  [style*="padding:88px 40px"]{padding:56px 22px !important}
  [style*="padding:84px 40px"]{padding:54px 22px !important}
  [style*="padding:80px 40px"]{padding:52px 22px !important}
  [style*="padding:0 40px"]{padding-left:22px !important;padding-right:22px !important}
  [style*="padding:64px 56px"]{padding:40px 26px !important}
  [style*="padding:60px 56px"]{padding:40px 26px !important}

  /* big inline CTAs go full width and centred */
  [style*="display:inline-block"][style*="padding:17px"],
  [style*="display:inline-block"][style*="padding:16px 44px"]{display:block !important;text-align:center}
}

@media (max-width:600px){
  .site-header__inner{padding:12px 18px}
  .brand__wordmark{font-size:16px}
}