/* =========================================================
  Daisho Kensetsu - BISO-like static mock
  - Spacious, minimal, large headings, image-forward sections
========================================================= */

:root{
  --bg:#0b0f16;
  --bg2:#111827;
  --text:#0b0f16;
  --muted:#333;
  --line:rgba(17,24,39,.14);
  --white:#ffffff;
  --accent:#d0702f; /* BISO-like blue accent */
  --accent2:#d0702f;
  --soft:#f4f6f8;
  --soft2:#eef1f4;
  --container: 1180px;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0,0,0,.22);
}

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

a{ color:inherit; text-decoration:none;color: #333; }
img{ max-width:100%; height:auto; display:block; }
.container{ width:min(var(--container), calc(100% - 44px)); margin-inline:auto; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}
.kicker::before{
  content:"";
  width: 26px;
  height: 1px;
  background: rgba(17,24,39,.35);
}

.h2{
  margin: 10px 0 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height:1.2;
  letter-spacing:.02em;
}
.h2.mini{
  font-size: 24px;
}
.center{
  text-align: center;
}
.p{
  margin: 14px 0 0;
  color:#333;

}
.p.line{
  line-height: 2.4;
}

#business .p{

  margin-top: 30px;
}
.section{
  padding: clamp(64px, 7vw, 108px) 0;
  background-color: rgba(244,246,248,.6);
}
.section--bg{
  background: #f6f7f9;
  border-top: 1px solid rgba(17,24,39,.08);
  border-bottom: 1px solid rgba(17,24,39,.08);
  overflow-x: hidden;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.18);
  background: transparent;
  font-weight: 800;
  font-size: 13px;
  letter-spacing:.06em;
}
.btn:hover{ background: rgba(17,24,39,.04); }
.btn--primary{
  background: var(--bg);
  color:#fff;
  border-color: var(--bg);
}
.btn--primary:hover{ background:#141c2a; }


.wapper{
  width: 100%;
  overflow-x: hidden;
}

.header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(255,255,255,1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(17,24,39,.10);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brand__mark{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #0b0f16;
}
.brand__name{
  display:flex; flex-direction:column;
  line-height:1.12;
}
.brand__name strong{
  font-size: 14px;
  letter-spacing:.06em;
}

.brand__name strong img{
  height: 50px;
}
.brand__name span{
  font-size: 11px;
  color: var(--muted);
  letter-spacing:.04em;
}
.nav{
  display:flex;
  align-items:center;
  gap: 14px;
}
.nav__links{
  display:flex;
  gap: 14px;
  align-items:center;
}
.nav__links a{
  font-weight:800;
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  padding: 10px 8px;
  border-radius: 12px;
}
.nav__links a:hover{ background: rgba(17,24,39,.05); }

.hamburger{
  display:none;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.18);
  background: var(--soft);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hamburger span{
  width: 18px; height: 2px; background:#0b0f16;
  position:relative; border-radius:999px;
}
.hamburger span::before,
.hamburger span::after{
  content:""; position:absolute; left:0;
  width:18px; height:2px; background:#0b0f16; border-radius:999px;
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

@media (max-width: 980px){
  .nav__links{ display:none; }
  .hamburger{ display:flex; }
}

/* Drawer */
.drawer{ position:fixed; inset:0; z-index:80; display:none; }
.drawer.is-open{ display:block; }
.drawer__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.drawer__panel{
  position:absolute; top:0; right:0;
  width:min(380px, 86vw); height:100%;
  background: var(--soft);
  padding: 18px;
  display:flex; flex-direction:column; gap: 10px;
}
.drawer__panel a{
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  font-weight:900;
  letter-spacing:.06em;
}
.drawer__panel a:hover{ background: rgba(17,24,39,.04); }
.drawer__panel .btn{ width:100%; }

/* Hero (BISO-like: large image with overlay text + small slider controls) */
.hero{
  position:relative;
  min-height: clamp(560px, 78vh, 760px);
  color:#fff;
  overflow:hidden;
  background: #0b0f16;
}
.hero__slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: saturate(.9) contrast(1.02);
  opacity:0;
  transition: opacity .8s ease;
}
.hero__slide.is-active{ opacity:1; }
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.15) 60%, rgba(0,0,0,.0));
}
.hero__inner{
  position:relative;
  min-height: inherit;
  display:grid;
  align-items:end;
  padding:50px 0
}
.hero__copy{ max-width: 760px; }
.hero__eyebrow{
  font-weight:900;
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 12px;
  opacity:.9;
}
.hero__title{
  margin: 12px 0 0;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height:1.08;
  letter-spacing:.02em;
}
.hero__lead{
  margin: 16px 0 0;
  max-width: 62ch;
  color: rgba(255,255,255,.78);
}
.hero__actions{ margin-top: 22px; display:flex; gap: 12px; flex-wrap:wrap; }
.hero__actions .btn{ border-color: rgba(255,255,255,.25); }
.hero__actions .btn:hover{ background: rgba(255,255,255,.08); }
.hero__actions .btn--primary{ background: var(--soft); color:#0b0f16; border-color:#fff; }
.hero__actions .btn--primary:hover{ background:#e5e7eb; }

.hero__controls{ position:absolute; right:0; bottom:0; padding: 18px 0; }
.heroDots{ display:flex; gap: 8px; align-items:center; }
.heroDot{
  width: 44px;
  height: 2px;
  background: rgba(255,255,255,.28);
  border-radius:999px;
  cursor:pointer;
  border:0;
}
.heroDot.is-active{ background: rgba(255,255,255,.92); }

@media (max-width: 720px){
  .hero__overlay{
    background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.20), rgba(0,0,0,.05));
  }
  .hero__controls{ padding: 14px 0; }
}

/* Strength list like BISO */
.strengths{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 980px){
  .strengths{ grid-template-columns: 1fr; }
}
.strength{
  background: var(--soft);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: var(--radius);
  padding: 18px;
}
.strength__no{
  font-weight:900;
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: #111827;
  opacity:.75;
}
.strength__ttl{ margin: 10px 0 0; font-size: 16px; letter-spacing:.02em; }
.strength__txt{ margin: 8px 0 0; color: var(--muted); font-size: 13px; }

/* Case list (horizontal scroll like BISO top) */
.caseRow{
  margin-top: 28px;
  display:flex;
  gap: 14px;
  overflow:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.caseRow::-webkit-scrollbar{ height: 8px; }
.caseRow::-webkit-scrollbar-thumb{ background: rgba(17,24,39,.18); border-radius:999px; }
.caseCard{
  flex: 0 0 min(320px, 84vw);
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border: 1px solid rgba(17,24,39,.10);
  background: var(--soft);
}
.caseCard__thumb{ aspect-ratio: 16/11; background:#0b0f16; }
.caseCard__thumb img{ width:100%; height:100%; object-fit:cover; }
.caseCard__body{ padding: 14px 14px 16px; }
.caseCard__meta{
  font-weight:900;
  letter-spacing:.14em;
  text-transform: uppercase;
  font-size: 11px;
  color: #111827;
  opacity:.7;
}
.caseCard__ttl{ margin: 8px 0 0; font-size: 15px; line-height:1.35; }
.caseCard__sub{ margin: 8px 0 0; color: var(--muted); font-size: 12px; }

/* Split section (Recruit/Company) */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 26px;
}
@media (max-width: 980px){ .split{ grid-template-columns: 1fr; } }
.panel{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: var(--radius);
  background: var(--soft);
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.panel__img{ aspect-ratio: 16/9; background:#0b0f16; }
.panel__img img{ width:100%; height:100%; object-fit:cover; }
.panel__body{ padding: 18px; }
.panel__ttl{ margin: 10px 0 0; font-size: 18px; line-height:1.35; }
.panel__txt{ margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.panel__links{ margin-top: 14px; display:flex; gap: 10px; flex-wrap:wrap; }

/* News list */
.news{ margin-top: 22px; border-top: 1px solid rgba(17,24,39,.10); }
.news a{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(17,24,39,.10);
  color: #333;
}
.news time{
  font-weight:900;
  letter-spacing:.12em;
  text-transform: uppercase;
  font-size: 11px;
  color:#111827;
  opacity:.65;
  min-width: 120px;
}
.news span{ font-weight:800; }
.news span a{
  color: #333;
}
@media (max-width: 720px){
  .news a{ flex-direction:column; gap:6px; }
  .news time{ min-width:auto; }
}

/* Contact band like BISO */
.contactBand{
  background: rgba(0,0,0,.8);
  color:#fff;
}
.contactBand .kicker{ color: rgba(255,255,255,.62); }
.contactBand .kicker::before{ background: rgba(255,255,255,.35); }
.contactBand .h2{ color:#fff; }
.contactBand .p{ color: #fff; }
.contactBand__row{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
}
.tel{ font-weight: 900; letter-spacing:.06em; font-size: 18px;color: #fff;}
.small{ color: rgba(255,255,255,.60); font-size: 12px; letter-spacing:.06em; }

/* Footer */
.footer{
  background:rgba(0,0,0,.8);
  color: rgba(255,255,255,.78);
  padding: 44px 0;
}
.footer a{ color: rgba(255,255,255,.86); }
.footer__grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
@media (max-width: 980px){ .footer__grid{ grid-template-columns: 1fr; } }
.footer__links{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
}
.footer__links a{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight:800;
  letter-spacing:.08em;
  font-size: 12px;
  text-transform: uppercase;
}
.footer__links a:hover{ background: rgba(255,255,255,.08); }
.copyright{ margin-top: 18px; color: rgba(255,255,255,.52); font-size: 12px; }

/* =========================
   Page hero / breadcrumb
========================= */
.pageHero{
  padding: clamp(34px, 4vw, 60px) 0;
  background: #0b0f16;
  color:#fff;
}
.pageHero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:end;
}
@media (max-width: 980px){ .pageHero__grid{ grid-template-columns: 1fr; } }
.pageHero__kicker{
  font-weight:900;
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(0,0,0,.72);
}
.pageHero__title{
  margin: 10px 0 0;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height:1.15;
}
.pageHero__lead{
  margin: 10px 0 0;
  color: rgba(0,0,0,.74);
  max-width: 70ch;
  font-size: 13px;
}
.breadcrumb{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.breadcrumb a{ color: rgba(0,0,0,.88); }
.breadcrumb span{ color: rgba(0,0,0,.50); }

/* =========================
   Content blocks
========================= */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 22px;
}
@media (max-width: 980px){ .grid2{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: var(--radius);
  background: var(--soft);
  padding: 18px;
}
.table{
  width:100%;
  border-collapse:collapse;
  margin-top: 10px;
  font-size: 14px;
}
.table th, .table td{
  border-bottom: 1px solid rgba(17,24,39,.10);
  padding: 12px 0;
  text-align:left;
  vertical-align:top;
}
.table th{
  width: 180px;
  color: #111827;
  opacity:.8;
  font-weight:900;
  letter-spacing:.04em;
}
@media (max-width: 720px){
  .table th{ width: 130px; font-size: 13px; }
  .table td{ font-size: 13px; }
}

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

/* =========================
   Form (Contact)
========================= */
.form{
  margin-top: 22px;
  display:grid;
  gap: 14px;
}
.field label{
  display:block;
  font-weight:900;
  letter-spacing:.04em;
  font-size: 13px;
}
.field .req{
  display:inline-block;
  margin-left: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.20);
  color: rgba(17,24,39,.70);
}
.input, .textarea, .select{
  width:100%;
  margin-top: 8px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.16);
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
}
.textarea{ min-height: 160px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus{
  border-color: rgba(17,24,39,.45);
  box-shadow: 0 0 0 4px rgba(17,24,39,.08);
}
.checkRow{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-top: 10px;
}
.checkRow input{ margin-top: 4px; }
.formActions{
  margin-top: 8px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.alert{
  display:none;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
  color: #991b1b;
  font-size: 13px;
}
.alert.is-show{ display:block; }

/* =========================
   Simple subnav pills
========================= */
.subnav{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.subnav a{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(17,24,39,.03);
  font-weight:900;
  letter-spacing:.08em;
  font-size: 12px;
  text-transform: uppercase;
}
.subnav a:hover{ background: rgba(17,24,39,.06); }


/* =========================
   PageHero media (BISO-like)
========================= */
.pageHero{
  background-image: url('../img/hearo.jpg');
  background-size: cover;
  background-position: center;
}
.pageHero--recruit{ background-image:url('../img/hearo.jpg'); }
.pageHero--contact{ background-image:url('../img/hearo.jpg'); }
.pageHero--thanks{ background-image:url('../img/hearo.jpg'); }

.pageHero__media{
  display:flex;
  justify-content:flex-end;
}
.pageHero__media img{
  width: min(420px, 100%);
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

@media (max-width: 980px){
  .pageHero__media{ justify-content:flex-start; margin-top: 14px; }
  .pageHero__media img{ width: min(520px, 100%); }
}

/* =========================
   Message block (image + text)
========================= */
.messageBlock{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items:start;
  margin:50px 0;
}
@media (max-width: 980px){ .messageBlock{ grid-template-columns: 1fr; } }
.messageBlock__img{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  background:#0b0f16;
}
.messageBlock__img img{ width:100%; height:auto; }
.signature{
  margin-top: 14px;
  display:flex;
  gap: 14px;
  align-items:center;
}
.signature__avatar{
  width: 74px; height: 74px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(17,24,39,.10);
  background:#0b0f16;
}
.signature__avatar img{ width:100%; height:100%; object-fit:cover; }
.signature__role{
  font-weight:900;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(17,24,39,.70);
}
.signature__name{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing:.04em;
}


/* =========================
   Page hero: background image only (no media in text area)
========================= */
.pageHero__media{ display:none !important; }

/* =========================
   Recruit personality tiles (BISO-like)
========================= */
.personalityTiles{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px){ .personalityTiles{ grid-template-columns: 1fr; } }

.pTile{
  border-radius: var(--radius);
  border: 1px solid rgba(17,24,39,.10);
  background: var(--soft);
  padding: 18px;
  display:flex;
  gap: 14px;
  align-items:center;
}
.pTile__icon{
  width: 74px; height: 74px;
  border-radius: 22px;
  overflow:hidden;
  flex: 0 0 74px;
  background:#0b0f16;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.pTile__icon img{ width:100%; height:100%; object-fit:cover; }
.pTile__en{
  font-weight:900;
  letter-spacing:.16em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(17,24,39,.72);
}
.pTile__jp{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing:.02em;
  line-height:1.25;
}

.longText{
  margin-top: 22px;
  max-width: 88ch;
  color: rgba(17,24,39,.82);
}
.longText p{ margin: 0 0 14px; }
.longText p:last-child{ margin-bottom: 0; }

/* Certification block */
.badgeBlock{
  margin-top: 34px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items:start;
}
@media (max-width: 980px){ .badgeBlock{ grid-template-columns: 1fr; } }
.badgeCard{
  border-radius: var(--radius);
  border: 1px solid rgba(17,24,39,.10);
  background: var(--soft);
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.badgeCard__img{
  background:#0b0f16;
  aspect-ratio: 16/9;
}
.badgeCard__img img{ width:100%; height:100%; object-fit:cover; }
.badgeCard__body{ padding: 18px; }


/* =========================
   Recruit (personality) - closer to BISO layout
========================= */
.recruitSectionTitle{
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:flex-start;
}
.recruitSlug{
  font-weight:900;
  letter-spacing:.18em;
  text-transform: lowercase;
  font-size: 12px;
  color: rgba(17,24,39,.55);
}
.personalityList{
  margin-top: 18px;
  display:flex;
  gap: 26px;
  flex-wrap:wrap;
  align-items:center;
  justify-content: center;
}
.personalityItem{
  display:flex;
  gap: 10px;
  align-items:center;
}
.personalityItem__icon{
  width: 56px; height:56px;
  border-radius: 18px;
  overflow:hidden;
  background:#fff;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  flex: 0 0 56px;
}
.personalityItem__icon img{ width:100%; height:100%; object-fit:cover; }
.personalityItem__en{
  font-weight:900;
  letter-spacing:.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(17,24,39,.70);
}
.personalityItem__jp{
  margin-top: 2px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing:.02em;
  line-height:1.2;
}
@media (max-width: 720px){
  .personalityList{ gap: 14px; }
  .personalityItem__icon{ width:52px; height:52px; border-radius: 16px; }
}

.recruitCatch{
  margin-top: 20px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height:1.35;
  letter-spacing:.02em;
  font-weight: 900;
  text-align: center;
}

.recruitBody{
  margin-top: 14px;
  color: rgba(17,24,39,.84);
  font-size: 15px;
}
.recruitBody p{
  font-size: 16px;
  margin: 0 0 14px;
  line-height: 2.4;
  font-weight: bold;
}
.recruitBody p:last-child{ margin-bottom:0; }

.fullImage{
  margin-top: 26px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  background:#0b0f16;
}
.fullImage img{ width:100%; height:auto; display:block; }

.healthBlock{
  margin-top: 100px;
}
.healthEn{
  margin-top: 10px;
  font-weight: 900;
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(17,24,39,.55);
  line-height:1.2;
}
.healthGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items:start;
}
@media (max-width: 980px){ .healthGrid{ grid-template-columns: 1fr; } }
.healthCard{
  border-radius: var(--radius);
  border: 1px solid rgba(17,24,39,.10);
  background: var(--soft);
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.healthCard__img{ aspect-ratio: 16/11; background:#0b0f16; }
.healthCard__img img{ width:100%; height:100%; object-fit:cover; }
.healthCard__body{ padding: 18px; }
.healthCard__title{
  margin: 10px 0 0;
  font-size: clamp(18px, 2.1vw, 26px);
  line-height:1.35;
  font-weight: 900;
}


/* =========================
   Global Color Palette (BISO-like)
========================= */
:root{
  --ink-900:#0b1020;   /* deep navy */
  --ink-700:#1f2a44;
  --ink-500:#3a4a78;
  --accent:#d0702f;    /* blue accent */
  --accent-soft:#e8edff;
  --bg:#ffffff;
  --muted:#6b7280;
}

body{
  color: var(--ink-900);
  background: var(--bg);
}

a{ color: var(--accent); }
a:hover{ opacity:.85; }

.btn--primary{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}
@media (max-width: 720px){
  .btn--primary{
    display: none;
  }
}


.btn--primary:hover{ filter: brightness(1.05); }



.kicker{
  color: var(--ink-500);
}

.h2, .pageHero__title, .recruitCatch{
  color: var(--ink-900);
}


/* =========================
   Cases Slider (Top)
========================= */
.casesWrap{
  margin-top: 34px;
  overflow: hidden;
}
.casesSlider{
  display:flex;
  gap: 22px;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.caseCard{
  min-width: 420px;
  background: var(--soft);
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(11,16,32,.1);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
}
@media (max-width: 980px){
  .caseCard{ min-width: 78vw; }
}
.caseCard__img{
  aspect-ratio: 16/9;
  background:#0b1020;
}
.caseCard__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.caseCard__body{
  padding: 14px 16px 18px;
}
.caseCard__title{
  font-size:18px;
  font-weight:900;
}
.caseCard__tag{
  margin-top:6px;
  display:inline-block;
  font-size:12px;
  letter-spacing:.08em;
  color: var(--ink-500);
}

.casesNav{
  margin-top: 14px;
  display:flex;
  gap: 10px;
}
.casesNav button{
  width:42px; height:42px;
  border-radius: 999px;
  border:1px solid var(--ink-700);
  background: var(--soft);
  color: var(--ink-700);
  cursor:pointer;
}
.casesNav button:hover{
  background: var(--accent-soft);
}

/* =========================
   Color tune (closer to BISO)
========================= */
a:hover{ opacity: .92; }
.btn{
  border-color: rgba(17,24,39,.18);
}
.btn--primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover{ filter: brightness(.98); }

.kicker{ color: rgba(17,24,39,.62); }

.header{
  background: rgba(244,246,248,.72);
  border-bottom: 1px solid rgba(17,24,39,.10);
  backdrop-filter: blur(10px);
}

.header__contact{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}
.header__contact:hover{ filter: brightness(.98); }

/* =========================
   Cases slider (top page)
========================= */
.casesSlider{
  position: relative;
  margin-top: 18px;
}
.casesSlider__track{
  display:flex;
  gap: 22px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 14px;
  -webkit-overflow-scrolling: touch;
}
.casesSlider__track::-webkit-scrollbar{ height: 10px; }
.casesSlider__track::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,.20);
  border-radius: 999px;
}
.casesSlider__track > *{
  scroll-snap-align: start;
}
.casesSlider .caseCard{
  min-width: min(360px, 86vw);
}
@media (min-width: 980px){
  .casesSlider .caseCard{ min-width: 520px; }
}

.casesSlider__btn{
  position:absolute;
  top: calc(50% - 18px);
  width: 44px; height:44px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.14);
  background: rgba(244,246,248,.92);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.casesSlider__btn:hover{ background: #fff; }
.casesSlider__btn:disabled{ opacity:.35; cursor: default; }
.casesSlider__btn--prev{ left: -10px; }
.casesSlider__btn--next{ right: -10px; }
@media (max-width: 720px){
  .casesSlider__btn{ display:none; }
}

.casesArrow{
  width: 14px; height:14px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  margin-left: 2px;
}
.casesSlider__btn--prev .casesArrow{
  transform: rotate(135deg);
  margin-left: -2px;
}

/* Case card tune */
.caseCard{
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.caseCard__meta{
  color: var(--accent);
}

/* =========================
   MV (split slider) + background video
========================= */
.siteBg{
  position: fixed;
  inset: 0;
  left: 0;
  z-index: -2;
  overflow: hidden;
  width: 100%;
  margin: 0;
}
.siteBg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(.95) brightness(.92);
}
.siteBg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url(../img/bk.jpg);
  opacity: 0.6;
  width: 100%;
  left: 0;
 }

.mv{
  position: relative;
  margin-top: 76px;
  padding: 18px 0 54px;
}
.mv-side{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.mv-item{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 24px 60px rgba(0,0,0,.20);
  background: #0b0f16;
  min-height: clamp(340px, 44vw, 520px);
  position: relative;
}
.mv-slider{
  position:absolute;
  inset:0;
}
.mv-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: scale(1.02);
  transition: opacity 1.1s ease, transform 1.4s ease;
}
.mv-slide.is-active{
  opacity:1;
  transform: scale(1);
}
.mv-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.mv-lead{
  position:absolute;
  left: max(22px, 5vw);
  bottom: 48px;
  z-index: 2;
  color:#111827;
}
.mv-head{
  background: rgba(244,246,248,.78);
  border: 1px solid rgba(17,24,39,.10);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 22px 55px rgba(0,0,0,.16);
  max-width: min(560px, 86vw);
}
.mv-en{
  display:block;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(17,24,39,.62);
}
.mv-jp{
  margin-top: 8px;
  font-size: clamp(20px, 2.3vw, 34px);
  line-height: 1.25;
  font-weight: 900;
}
.sp-only{ display:none; }

@media (max-width: 980px){
  .mv{ margin-top: 68px; padding-bottom: 36px; }
  .mv-side{ grid-template-columns: 1fr; }
  .mv-lead{ left: 16px; right: 16px; bottom: 20px; }
  .sp-only{ display:inline; }
}


/* =========================
  Works Slider
========================= */
.works{
background-color: #fff;
padding: 50px 0;
}
.worksSlider{
  position: relative;
  overflow: hidden;
  
}

.worksSlider__track{
  display: flex;
  gap: 30px;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.worksSlider__item{
  min-width: 320px;
  flex-shrink: 0;
}

.worksSlider__item img{
  width: 100%;
  height: auto;
  display: block;
}

.worksSlider__item p{
  margin-top: 10px;
  font-weight: 600;
}

/* ナビボタン */
.worksSlider__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #000;
  opacity: .6;
  cursor: pointer;
  border: none;
}

.worksSlider__btn--prev{ left: 10px; }
.worksSlider__btn--next{ right: 10px; }

.worksSlider__btn::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.worksSlider__btn--prev::before{
  transform: rotate(-135deg);
}
@media (max-width: 767px){
#worksSlider { overflow: hidden; }
.worksSlider__track { display:flex; will-change: transform; }
.worksSlider__item { flex: 0 0 100%; }


  .worksSlider__item{
    flex: 0 0 86%;
    margin: 0 auto;
  }
}
.secTitle{
  text-align: center;
}

@media (max-width: 767px){
  .sp_hide{
    display: none !important;
  }
}


/* =========================
   PC 右側追従
========================= */

.flow{
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

.flow ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow li{
  margin-bottom: 10px;
}

/* ボタン */

.flow a{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 200px;

  writing-mode: vertical-rl;
  text-orientation: upright;

  color: #fff;
  font-weight: bold;
  text-decoration: none;

  border-radius: 8px 0 0 8px;
  transition: .3s;
}


/* Instagram */

.flow_insta a{
  background: linear-gradient(
    45deg,
    #405DE6,
    #5851DB,
    #833AB4,
    #C13584,
    #E1306C,
    #FD1D1D,
    #F77737,
    #FCAF45
  );
}

/* LINE */

.flow_line a{
  background: #06C755;
}

/* hover */

.flow a:hover{
  opacity:.85;
}


/* =========================
   タブレット以下
========================= */

@media (max-width:1024px){

.flow{
  bottom:0;
  top:auto;
  left:0;
  width:100%;
  transform:none;
}

.flow ul{
  display:flex;
}

.flow li{
  flex:1;
  margin:0;
}

.flow a{
  writing-mode: horizontal-tb;
  width:100%;
  height:auto;
  padding:15px 10px;
  border-radius:0;
}
.flow .flow_insta a{
  height: auto;
}
.flow a{
  font-size: 14px;
}
.footer{
  padding-bottom: 80px;
}

}