:root{
  /* Color system: Intelligent + Medical (few colors) */
  --bg:#ffffff;
  --ink:#0b1220;          /* deep navy */
  --muted:#5b677a;        /* cool gray */
  --primary:#1aa6a6;      /* medical teal */
  --primary-2:#38c6b5;    /* teal accent (used only in gradients) */
  --surface:#f5f8fb;      /* soft gray-blue */
  --card:#ffffff;

  --shadow: 0 18px 45px rgba(11,18,32,.10);
  --radius: 18px;
  --container: 1040px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  position: fixed;
  left: 16px;
  top: 16px;
  width:auto;
  height:auto;
  padding:10px 12px;
  background:var(--ink);
  color:#fff;
  border-radius:12px;
  z-index:9999;
}

/* Header */
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 0;
}

.brand-name{
  font-weight: 800;
  letter-spacing: .02em;
  display: flex;
}
.brand-name img{
    width: 65%;
}

.nav{
  display:flex;
  gap:18px;
  align-items:center;
}

.nav a{
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}
.nav a:hover{ color: var(--ink); text-decoration:none; }

.nav-cta{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 24px rgba(26,166,166,.22);
}
.nav-cta:hover{ text-decoration:none; filter: brightness(0.98); }


/* Mobile nav: hidden on desktop by CSS; opened/closed by [hidden] attribute in JS */
.mobile-nav{
  display:none; /* PCでは必ず非表示 */
  padding: 10px 18px 16px;
  gap:10px;
}
.mobile-nav a{
  display:block;
  padding: 12px 12px;
  color: var(--muted);
  font-weight: 800;
  border-bottom: 1px solid #eee;
}
/* screen-reader only */
.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;
}

/* =========
   Hamburger（線だけ・背景なし）
========= */
.nav-toggle{
  display: none;           /* PCでは非表示 */
  background: none;
  border: none;
  padding: 10px;           /* タップしやすさ */
  cursor: pointer;
  line-height: 0;
}

.hamburger{
  position: relative;
  width: 26px;
  height: 18px;
  display: inline-block;
}

/* 3本線（中央） */
.hamburger::before,
.hamburger::after,
.hamburger span{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 999px;
  transition: transform 220ms ease, opacity 180ms ease;
}

/* 上・中・下 */
.hamburger::before{ top: 0; }
.hamburger span{ top: 8px; }
.hamburger::after{ bottom: 0; }

/* open → × */
.nav-toggle[aria-expanded="true"] .hamburger span{
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger::before{
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger::after{
  transform: translateY(-8px) rotate(-45deg);
}

/* mobile only */
@media (max-width: 720px){
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav:not([hidden]){
    box-shadow:
      0 12px 24px rgba(11,18,32,.12),
      0 2px 6px rgba(11,18,32,.06);
  }
}


/* HERO / FV: full-bleed animated geometric background (CSS only, lightweight) */
.hero{
  position: relative;
  min-height: clamp(360px, 54vh, 560px);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}

/* Soft blobs */
.hero::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(800px 500px at 20% 20%, rgba(26,166,166,.18), transparent 60%),
    radial-gradient(700px 500px at 80% 30%, rgba(56,198,181,.14), transparent 60%),
    radial-gradient(600px 480px at 40% 90%, rgba(11,18,32,.10), transparent 62%),
    linear-gradient(180deg, #ffffff, #f7fbff);
  z-index:-2;
  transform: translate3d(0,0,0);
}

/* Geometric lattice + drift */
.hero::after{
  content:"";
  position:absolute; inset:-40%;
  z-index:-1;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(11,18,32,.045) 0px,
      rgba(11,18,32,.045) 1px,
      transparent 1px,
      transparent 16px
    ),
    radial-gradient(rgba(26,166,166,.10) 1px, transparent 1px);
  background-size: auto, 22px 22px;
  filter: blur(0.2px);
  opacity: .55;
  animation: heroDrift 18s linear infinite;
}

@keyframes heroDrift{
  0%{ transform: translate3d(-2%, -2%, 0) rotate(0.001deg); }
  50%{ transform: translate3d(2%, 1%, 0) rotate(0.001deg); }
  100%{ transform: translate3d(-2%, -2%, 0) rotate(0.001deg); }
}

.hero-inner{
  padding: 36px 0;
}

.hero-title{
  margin:0;
  font-size: clamp(30px, 4.4vw, 54px);
  letter-spacing: .02em;
  line-height: 1.15;
  max-width: 12.5em;
  text-align:left;
}

.hero-sub{
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .06em;
}

/* ===== タイトル（最終は黒文字）+ きらり（1回） ===== */
.hero-title-anim{
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(1.5px);
  will-change: opacity, transform, filter;
}

/* 光の帯（テキストは描かない） */
.hero-title-anim::after{
  content: "";
  position: absolute;
  inset: -20% 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,0.0) 35%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.0) 65%,
    transparent 100%
  );

  transform: translateX(-120%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}


/* 登場（黒文字を出す） */
.hero-title-anim.is-in{
  animation: titleInkIn 760ms cubic-bezier(.2,.9,.2,1) both;
}

/* 登場 */
.hero-title-anim.is-in{
  animation: titleInkIn 760ms cubic-bezier(.2,.9,.2,1) both;
}

/* キラッ（反射が横切るだけ） */
.hero-title-anim.is-in::after{
  animation: titleShine 2200ms ease 300ms both;
}

@keyframes titleInkIn{
  0%{
    opacity: 0;
    transform: translateY(14px);
    filter: blur(2px);
  }
  60%{
    opacity: 1;
    transform: translateY(0px);
    filter: blur(0px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
    filter: blur(0px);
  }
}

@keyframes titleShine{
  0%   { transform: translateX(-60%); opacity: 0.0; }  /* 「心」あたりから */
  18%  { opacity: 0.9; }
  75%  { opacity: 0.85; }
  100% { transform: translateX(75%);  opacity: 0.0; }  /* 「。」付近で消える */
}



/* prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce){
  .hero-title-anim{
    opacity: 1;
    transform: none;
    filter: none;
  }
  .hero-title-anim::before{
    display: none;
    animation: none !important;
  }
  .hero-title-anim.is-in{
    animation: none !important;
  }
}


/* prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce){
  .hero-title-anim{
    opacity:1;
    transform:none;
    filter:none;
  }
  .hero-title-anim::before{
    clip-path: inset(0 0 0 0);
    opacity: 0; /* うるさくならないようにグラデ層は隠す */
  }
  .hero-title-anim.is-in,
  .hero-title-anim.is-in::before{
    animation:none !important;
  }
}

/* Sections: no borders */
.section{
  padding: 62px 0;
}

.section-alt{
  background: var(--surface);
}

/* Stylish titles with icon */
.section-title{
  margin:0 0 18px;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: .02em;
}
.section-title.with-icon{
  display:flex;
  align-items:center;
  gap: 12px;
}
.section-title.with-icon .icon{
  width: 12px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 20px rgba(26,166,166,.14);
  position: relative;
}


.lead{
  margin:0;
  color: var(--ink);
  max-width: 920px;
}

/* Cards */
.cards{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.card{
  background: var(--card);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  transform: translateZ(0);
}

.card img{
  width:100%;
  height: 150px;
  object-fit: cover;
  display:block;
}

.card-body{
  padding: 16px 16px 18px;
}

.card-title{
  margin:0 0 6px;
  font-size: 16px;
  letter-spacing: .01em;
}

.card-text{
  margin:0;
  color: var(--muted);
  font-size: 14px;
}

/* Company KV */
.kv{
  margin: 18px 0 0;
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow);
}

.kv-row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(11,18,32,.06); /* 内部の区切りは可読性のため残す */
}

.kv-row:first-child{ border-top:none; }

.kv dt{
  color: var(--muted);
  font-weight: 800;
}

.kv dd{
  margin:0;
}

/* Buttons */
.button{
  display:inline-block;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 14px;
  color:#fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 26px rgba(26,166,166,.22);
}

.button:hover{
  text-decoration:none;
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.note{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* Footer */
.site-footer{
  padding: 26px 0;
  background: #fff;
}

.footer-inner{
  padding-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .nav{ display:none; }

  .mobile-nav{
    display:grid; /* モバイルでのみ表示対象 */
  }
  /* hidden属性が付いている時は閉じる */
  .mobile-nav[hidden]{ display:none !important; }

  .section{ padding: 48px 0; }
  .cards{ grid-template-columns: 1fr; }
  .kv-row{ grid-template-columns: 1fr; }
  .header-inner{
    padding-left: 8px;
    padding-right: 8px;
  }
  .hero-inner{
    padding: 36px 10px;
  }
}