/* =========================
  Base / Reset / Utilities
  - edit design tokens in :root
  - typography utilities: .font-36px-bold etc.
========================= */

/* --- Reset (modern) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button, input, textarea, select { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
:focus-visible { outline: 2px solid rgba(0, 64, 144, .35); outline-offset: 3px; }
dl,dd,dt{
  margin: 0;
}


/* --- Design Tokens --- */
:root{
  /* Colors */
  --color-primary: #014099;
  --color-primary-2: #2050A0;
  --color-bg: #ffffff;
  --color-bg-soft: #F6F8FB;
  --color-text: #292929;
  --color-text-2: #4B5565;
  --color-border: #E2E8F0;

  /* Layout */
  --container: 1280px;
  --gutter: 20px;
  --header-h: 72px;

  /* Radius / Shadow */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --shadow-1: 0 10px 30px rgba(11,16,32,.08);

  /* Typography */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --lh-tight: 1.2;
  --lh-normal: 1.7;
}

/* --- Base --- */
body{
  font-family: var(--font-sans);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

.container{
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.u-hidden{ display:none !important; }
.u-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.u-gap-8{ display:grid; gap:8px; }
.u-gap-12{ display:grid; gap:12px; }
.u-gap-16{ display:grid; gap:16px; }
.u-gap-20{ display:grid; gap:20px; }
.u-gap-24{ display:grid; gap:24px; }
.u-gap-32{ display:grid; gap:32px; }
.u-gap-40{ display:grid; gap:40px; }
.u-gap-50{ display:grid; gap:50px; }

.tc-center{ text-align:center; }
.tc-right{ text-align:right; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--color-primary);
  color:#fff;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
  user-select:none;
}
.btn:hover{ filter: brightness(1.06); }
.btn:active{ transform: translateY(1px); }
.btn--ghost{
  background: transparent;
  border-color: rgba(0,64,144,.25);
  color: var(--color-primary);
}
.btn--block{ width:100%; }

.card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-1);
}

/* --- Typography Utility (requested) --- */
/* Use: <span class="font-36px-bold">...</span> */
.font-12px-regular{ font-size:12px; font-weight:400; line-height:1.7; }
.font-12px-medium{  font-size:12px; font-weight:500; line-height:1.7; }
.font-12px-bold{    font-size:12px; font-weight:700; line-height:1.7; }

.font-14px-regular{ font-size:14px; font-weight:400; line-height:1.8; }
.font-14px-medium{  font-size:14px; font-weight:500; line-height:1.8; }
.font-14px-bold{    font-size:14px; font-weight:700; line-height:1.8; }

.font-16px-regular{ font-size:16px; font-weight:400; line-height:1.9; }
.font-16px-medium{  font-size:16px; font-weight:500; line-height:1.9; }
.font-16px-bold{    font-size:16px; font-weight:700; line-height:1.9; }

.font-18px-medium{  font-size:18px; font-weight:500; line-height:1.8; }
.font-18px-bold{    font-size:18px; font-weight:700; line-height:1.8; }

.font-20px-medium{  font-size:20px; font-weight:500; line-height:1.7; }
.font-20px-bold{    font-size:20px; font-weight:700; line-height:1.7; }
.font-20px-regular{ font-size:20px; font-weight:400; line-height:1.7; }

.font-24px-bold{    font-size:24px; font-weight:700; line-height:1.35; }
.font-24px-medium{    font-size:24px; font-weight:500; line-height:1.35; }
.font-28px-bold{    font-size:28px; font-weight:800; line-height:1.3; }
.font-32px-bold{    font-size:32px; font-weight:800; line-height:1.25; }
.font-32px-medium{    font-size:32px; font-weight:500; line-height:1.25; }
.font-36px-medium{    font-size:36px; font-weight:500; line-height:1.2; }
.font-36px-bold{    font-size:36px; font-weight:800; line-height:1.2; }
.font-40px-bold{    font-size:40px; font-weight:900; line-height:1.15; }


.font-64px-bold{    font-size:64px; font-weight:900; line-height:1.15; }
@media (max-width: 1000px){
  .font-16px-bold {font-size: 14px;}
  .font-20px-medium {font-size: 16px;}
  .font-20px-bold {font-size: 16px;}
  .font-36px-medium { font-size: 24px;}
  .font-36px-bold{ font-size:24px; }
  .font-64px-bold {font-size: 32px;}
  .sec03__attention{font-size: 10px;}
  .font-24px-bold{font-size: 20px;}
  .sec03__text02,
  .hero__cta-text{
    font-size: 16px;
  }
  
  .sec06__list-head{
    font-size: 20px;
  }
}