/* =========================================================
   Decelink Bio Co., Ltd.  —  Website stylesheet
   Brand colors are derived from the corporate logo
     green : #166546  /  navy : #1E3A4C
   ========================================================= */

:root{
  --green:        #166546;
  --green-mid:    #227054;
  --green-bright: #35A177;
  --link-accent:  #C62828;   /* 外部リンクの目印。白背景でコントラスト比 5.6:1 */
  --link-accent-h:#E03131;   /* 同上・ホバー時。コントラスト比 4.5:1 */
  --green-glow:   rgba(53,161,119,.35);
  --navy:         #1E3A4C;
  --ink:          #0C1C26;
  --ink-2:        #122936;
  --paper:        #F2F6F4;
  --paper-2:      #E4EDE8;
  --white:        #ffffff;
  --muted:        #6D8794;
  --line:         rgba(30,58,76,.14);
  --line-d:       rgba(255,255,255,.14);
  --maxw:         1180px;
  --ease:         cubic-bezier(.22,.68,.36,1);
  --jp: "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",
        "Yu Gothic Medium","Yu Gothic",Meiryo,system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--jp); color:var(--ink);
  background:var(--white); line-height:1.75;
  font-feature-settings:"palt" 1; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(12,28,38,0); backdrop-filter:blur(0px);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hd.solid,
.hd.light{
  background:rgba(12,28,38,.86); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-d);
}
.hd__in{
  display:flex; align-items:center; justify-content:space-between;
  height:74px; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:38px; height:38px; background:var(--white); border-radius:7px;
  display:grid; place-items:center; flex:none;
}
.brand__mark img{ width:22px; }
.brand__txt{ line-height:1.15; }
.brand__en{
  display:block; color:#fff; font-weight:800; font-size:16px; letter-spacing:.04em;
}
.brand__jp{
  display:block; color:rgba(255,255,255,.55); font-size:10.5px; letter-spacing:.16em;
}

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative; padding:10px 14px; font-size:13.5px; font-weight:600;
  color:rgba(255,255,255,.78); border-radius:6px; transition:color .25s;
  white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--green-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:#fff; }
.nav .btn-sm{
  margin-left:10px; background:var(--green); color:#fff; padding:11px 20px;
  border-radius:100px; font-size:13px;
}
.nav .btn-sm::after{ display:none; }
.nav .btn-sm:hover{ background:var(--green-bright); }

.burger{
  display:none; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; padding:0; position:relative;
}
.burger span{
  position:absolute; left:11px; width:22px; height:2px; background:#fff;
  transition:transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------
   Hero (top page)
   --------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(53,161,119,.22), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(22,101,70,.30), transparent 60%),
    linear-gradient(165deg,#0C1C26 0%, #12303F 52%, #0C2029 100%);
  overflow:hidden; color:#fff;
}
.hero__bg{ position:absolute; inset:0; opacity:.5; pointer-events:none; }
.hero__in{ position:relative; z-index:2; padding-block:130px 108px; width:100%; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:11.5px;
  letter-spacing:.24em; font-weight:700; color:var(--green-bright);
  text-transform:uppercase; margin-bottom:26px;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--green-bright); opacity:.8;
}

.hero h1{
  font-size:clamp(2.5rem,7.2vw,5.4rem); font-weight:800; line-height:1.16;
  letter-spacing:-.01em; margin-bottom:30px;
}
.hero h1 .em{
  background:linear-gradient(100deg,var(--green-bright),#7FD9B4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .l{ display:block; }

/* トップ見出し「超小口径」：文字は見出しと同じ書体・大きさ、背後に緑の筆の払い */
.brush{ position:relative; display:inline-block; white-space:nowrap; }
.brush__ink{
  position:relative; z-index:1; display:inline-block;
  animation:brush-stamp .7s .45s cubic-bezier(.2,1.4,.4,1) both;
}
.brush__swash{
  position:absolute; z-index:0; left:-4%; bottom:-.12em; width:112%; height:.55em;
  overflow:visible; pointer-events:none;
  animation:brush-sweep .75s .1s cubic-bezier(.6,0,.2,1) both;
}
.brush__dots{
  position:absolute; z-index:0; left:-.22em; top:-.12em; width:.45em; height:.45em; overflow:visible;
  animation:brush-drop .4s 1s ease-out both;
}
@keyframes brush-sweep{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes brush-stamp{ from{ opacity:0; transform:scale(1.25); } to{ opacity:1; transform:none; } }
@keyframes brush-drop{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }
.hero p.lead{
  font-size:clamp(1.3rem,2.6vw,1.65rem); color:rgba(255,255,255,.8);
  max-width:34em; line-height:1.8;
}
.hero p.lead span{ display:inline-block; }

.cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:42px; }

/* トップ：紹介動画 */
.hero__video{
  margin:clamp(48px,6vw,72px) 0 0; max-width:880px; border-radius:16px; overflow:hidden;
  background:#000; border:1px solid var(--line-d);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 10px rgba(53,161,119,.06);
}
.hero__video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; }
.btn{
  display:inline-flex; align-items:center; gap:12px; padding:17px 34px;
  border-radius:100px; font-weight:700; font-size:14.5px; letter-spacing:.04em;
  transition:transform .28s var(--ease), background .28s, box-shadow .28s, color .28s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--p{ background:var(--green); color:#fff; box-shadow:0 10px 30px -10px var(--green-glow); }
.btn--p:hover{ background:var(--green-bright); box-shadow:0 16px 38px -12px var(--green-glow); }
.btn--g{ border:1px solid rgba(255,255,255,.32); color:#fff; }
.btn--g:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.55); }
.btn--d{ background:var(--ink); color:#fff; }
.btn--d:hover{ background:var(--green); }
.btn .ar{ transition:transform .28s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }

/* scroll cue */
.cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:9.5px; letter-spacing:.24em; color:rgba(255,255,255,.45);
}
.cue i{
  display:block; width:1px; height:44px; background:linear-gradient(rgba(255,255,255,.05),var(--green-bright));
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(.2);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(.2);transform-origin:bottom} }

/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */
.sec{ padding:clamp(72px,9vw,118px) 0; }
.sec--paper{ background:var(--paper); }
.sec--dark{ background:var(--ink); color:#fff; }
.sec--tight{ padding:clamp(56px,6vw,80px) 0; }

.sec-head{ margin-bottom:clamp(38px,5vw,60px); }
.sec-head h2{
  font-size:clamp(1.85rem,4.2vw,3.05rem); font-weight:800; line-height:1.3;
  letter-spacing:-.005em;
}
.sec-head h2 .em{ color:var(--green); }
.sec--dark .sec-head h2 .em{ color:var(--green-bright); }
.sec-head p{ margin-top:18px; color:var(--muted); font-size:.95rem; max-width:40em; }
.sec--dark .sec-head p{ color:rgba(255,255,255,.62); }
.sec-head .eyebrow{ color:var(--green); }
.sec-head .eyebrow::before{ background:var(--green); }
.sec--dark .sec-head .eyebrow{ color:var(--green-bright); }
.sec--dark .sec-head .eyebrow::before{ background:var(--green-bright); }

/* --- 3 steps : what is decellularization --- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); }
.step{ background:var(--paper); padding:clamp(28px,3.4vw,44px); position:relative; }
.sec--dark .step{ background:var(--ink); }
.step__n{
  font-size:11px; letter-spacing:.2em; font-weight:800; color:var(--green);
  display:block; margin-bottom:20px;
}
.step figure{ margin:0 0 22px; height:96px; display:flex; align-items:center; }
.step h3{ font-size:clamp(1.1rem,2vw,1.4rem); font-weight:800; margin-bottom:12px; }
.step p{ font-size:.885rem; color:var(--muted); line-height:1.95; }

/* --- big number facts --- */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line-d); }
.fact{ background:var(--ink); padding:clamp(26px,3vw,40px) clamp(18px,2vw,30px); }
.fact b{
  display:block; font-size:clamp(1.9rem,4vw,3.1rem); font-weight:800; line-height:1.1;
  color:#fff; letter-spacing:-.02em;
}
.fact b small{ font-size:.45em; font-weight:700; margin-left:4px; color:var(--green-bright); }
.fact span{
  display:block; margin-top:12px; font-size:.78rem; letter-spacing:.06em;
  color:rgba(255,255,255,.55);
}

/* --- ホーム：製品・臨床応用ページへの大きなボタン --- */
.jump{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,26px); }
.jump__btn{
  position:relative; isolation:isolate; overflow:hidden; border-radius:18px;
  min-height:clamp(260px,30vw,380px); padding:clamp(28px,3.4vw,48px);
  padding-right:calc(clamp(28px,3.4vw,48px) + 72px);
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; border:1px solid var(--line-d);
  background:linear-gradient(150deg,#14313F,#0C1C26);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.jump__btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(12,28,38,.94) 12%, rgba(12,28,38,.35) 70%, rgba(12,28,38,.15));
}
.jump__btn--tech{
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(53,161,119,.32), transparent 60%),
    linear-gradient(150deg,#0F3B2C,#0C1C26);
}
.jump__btn--tech::after{ background:linear-gradient(0deg, rgba(12,28,38,.7) 8%, transparent 60%); }
.jump__ph{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  opacity:.6; transition:transform .8s var(--ease), opacity .5s;
}
.jump__deco{
  position:absolute; z-index:-2; width:clamp(260px,32vw,420px); height:auto;
  top:-18%; right:-12%; transition:transform 1.2s var(--ease);
}
.jump__k{ font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--green-bright); }
.jump__t{ display:block; margin-top:10px; font-size:clamp(1.6rem,3.2vw,2.5rem); font-weight:800; line-height:1.3; }
.jump__t span, .jump__sub span{ display:inline-block; }
.jump__sub{ display:block; margin-top:10px; font-size:.88rem; color:rgba(255,255,255,.72); }
.jump__ar{
  position:absolute; right:clamp(24px,3vw,40px); bottom:clamp(28px,3.4vw,48px);
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  font-size:1.4rem; border:1px solid rgba(255,255,255,.4);
  transition:background .35s, border-color .35s, transform .35s var(--ease);
}
.jump__btn:hover{ transform:translateY(-6px); border-color:rgba(53,161,119,.6); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.jump__btn:hover .jump__ph{ transform:scale(1.05); opacity:.75; }
.jump__btn:hover .jump__deco{ transform:rotate(25deg) scale(1.08); }
.jump__btn:hover .jump__ar{ background:var(--green); border-color:var(--green); transform:translateX(4px); }
.jump__btn:focus-visible{ outline:3px solid var(--green-bright); outline-offset:4px; }
@media (max-width:820px){
  .jump{ grid-template-columns:1fr; }
}

/* --- navigation tiles (hierarchy) --- */
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.tile{
  position:relative; overflow:hidden; border-radius:14px; min-height:210px;
  background:var(--ink); color:#fff; display:flex; flex-direction:column;
  justify-content:flex-end; padding:clamp(26px,3vw,38px);
  padding-top:clamp(62px,6.5vw,80px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  isolation:isolate;
}
.tile::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(150deg,#14313F,#0C1C26);
}
.tile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90% 100% at 100% 0%, var(--green-glow), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.tile:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -26px rgba(12,28,38,.6); }
.tile:hover::after{ opacity:1; }
.tile__img{
  position:absolute; inset:0; z-index:-3; object-fit:cover; width:100%; height:100%;
  opacity:.26; filter:grayscale(.35); transition:transform .8s var(--ease), opacity .5s;
}
.tile:hover .tile__img{ transform:scale(1.06); opacity:.34; }
.tile__n{
  position:absolute; top:clamp(22px,2.6vw,32px); left:clamp(26px,3vw,38px);
  font-size:11px; letter-spacing:.22em; font-weight:800; color:var(--green-bright);
}
.tile h3{ font-size:clamp(1.25rem,2.4vw,1.7rem); font-weight:800; margin-bottom:10px; }
.tile p{ font-size:.85rem; color:rgba(255,255,255,.66); line-height:1.85; max-width:26em; }
.tile .go{
  margin-top:20px; display:inline-flex; align-items:center; gap:9px; font-size:12.5px;
  font-weight:700; letter-spacing:.06em; color:var(--green-bright);
}
.tile:hover .go .ar{ transform:translateX(5px); }
.tile .go .ar{ transition:transform .3s var(--ease); }

/* ---------------------------------------------------------
   Page hero (lower pages)
   --------------------------------------------------------- */
.phero{
  padding:158px 0 clamp(52px,6vw,76px); color:#fff; position:relative; overflow:hidden;
  background:
    radial-gradient(100% 120% at 88% 0%, rgba(53,161,119,.24), transparent 60%),
    linear-gradient(160deg,#0C1C26,#153444 70%,#0C1C26);
}
/* 会社情報：メッセージを大きく見せるヒーロー */
.phero--impact{
  min-height:min(92svh,820px); display:flex; align-items:center;
  padding:140px 0 clamp(70px,8vw,110px);
  background:
    radial-gradient(70% 90% at 85% 40%, rgba(53,161,119,.28), transparent 62%),
    radial-gradient(60% 70% at 0% 100%, rgba(22,101,70,.30), transparent 60%),
    linear-gradient(160deg,#0C1C26,#12303F 60%,#0C1C26);
}
.phero__rings{
  position:absolute; width:clamp(460px,62vw,860px); height:auto; right:-14%; top:50%;
  transform:translateY(-50%); pointer-events:none;
  animation:rings-spin 90s linear infinite;
}
@keyframes rings-spin{ to{ transform:translateY(-50%) rotate(360deg); } }
.phero__in{ position:relative; z-index:1; }
.phero--impact .eyebrow{ margin-bottom:22px; }
.phero .phero__title{
  font-size:clamp(2.5rem,6.8vw,5.4rem); font-weight:800; line-height:1.18; letter-spacing:-.02em;
}
.phero__title span, .phero__copy span, .phero__lead span{ display:inline-block; }
.phero__title em, .phero__copy em{
  font-style:normal;
  background:linear-gradient(100deg,var(--green-bright),#8FE3BF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.phero__copy{
  margin-top:clamp(22px,3vw,34px); font-size:clamp(1.25rem,2.9vw,2.2rem); font-weight:800;
  line-height:1.5; letter-spacing:.01em; color:#fff;
}
.phero__lead{
  margin-top:clamp(30px,4vw,48px); padding-left:clamp(16px,2vw,24px);
  border-left:2px solid var(--green-bright);
  font-size:clamp(.98rem,1.5vw,1.15rem); line-height:2; color:rgba(255,255,255,.74); max-width:40em;
}
/* 読み込み時に上から順にふわっと表示 */
.phero--impact .crumb, .phero--impact .eyebrow, .phero__title > span, .phero__copy, .phero__lead{
  animation:rise .9s var(--ease) both;
}
.phero--impact .eyebrow{ animation-delay:.05s; }
.phero__title > span:nth-of-type(1){ animation-delay:.15s; }
.phero__title > span:nth-of-type(2){ animation-delay:.3s; }
.phero__copy{ animation-delay:.55s; }
.phero__lead{ animation-delay:.8s; }
@keyframes rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

.crumb{ font-size:11.5px; letter-spacing:.12em; color:rgba(255,255,255,.5); margin-bottom:22px; }
.crumb a:hover{ color:#fff; }
.crumb i{ font-style:normal; margin:0 9px; opacity:.5; }
.phero h1{
  font-size:clamp(2rem,5vw,3.6rem); font-weight:800; line-height:1.25; letter-spacing:-.01em;
}
.phero .sub{ margin-top:20px; color:rgba(255,255,255,.72); font-size:.98rem; max-width:38em; }

/* sub navigation (hierarchy inside a section) */
.subnav{ background:var(--ink-2); border-bottom:1px solid var(--line-d); }
.subnav ul{ display:flex; gap:2px; overflow-x:auto; }
.subnav a{
  display:block; padding:16px 22px; font-size:13px; font-weight:700; white-space:nowrap;
  color:rgba(255,255,255,.6); border-bottom:2px solid transparent; transition:.25s;
}
.subnav a:hover{ color:#fff; }
.subnav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--green-bright); }

/* ---------------------------------------------------------
   Cards / grids
   --------------------------------------------------------- */
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,46px); align-items:center; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:clamp(26px,3vw,38px); transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.card:hover{ border-color:rgba(22,101,70,.4); transform:translateY(-3px);
  box-shadow:0 20px 40px -28px rgba(12,28,38,.45); }
.card h3{ font-size:1.12rem; font-weight:800; margin-bottom:12px; }
.card p{ font-size:.875rem; color:var(--muted); line-height:1.95; }
.card__k{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.16em;
  color:var(--green); margin-bottom:16px;
}

.pcard{ overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s; }
.pcard:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(12,28,38,.5); }
.pcard__ph{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.pcard__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pcard:hover .pcard__ph img{ transform:scale(1.05); }
.pcard__b{ padding:clamp(24px,2.6vw,34px); flex:1; display:flex; flex-direction:column; }
.pcard__b h3{ font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:800; margin-bottom:12px; }
.pcard__b p{ font-size:.88rem; color:var(--muted); line-height:1.95; flex:1; }
.pcard .go{ margin-top:22px; display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:800; color:var(--green); letter-spacing:.05em; }
.pcard:hover .go .ar{ transform:translateX(5px); }
.pcard .go .ar{ transition:transform .3s var(--ease); }

.badge{
  display:inline-block; padding:6px 14px; border-radius:100px; font-size:11px;
  font-weight:800; letter-spacing:.08em; background:rgba(22,101,70,.1); color:var(--green);
}
.badge--w{ background:rgba(255,255,255,.12); color:#fff; }
.badge--amber{ background:rgba(190,120,20,.12); color:#8A5B10; }

/* ---------------------------------------------------------
   Tabs (keeps lower pages shallow instead of long scroll)
   --------------------------------------------------------- */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:34px; }
.tabs button{
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.04em;
  padding:12px 24px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--muted); transition:.28s var(--ease);
}
.tabs button:hover{ border-color:var(--green); color:var(--green); }
.tabs button[aria-selected="true"]{ background:var(--green); border-color:var(--green); color:#fff; }
.panel[hidden]{ display:none; }
.panel{ animation:fade .45s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* tables */
.tbl{ width:100%; border-collapse:collapse; font-size:.875rem; }
.tbl th,.tbl td{ padding:16px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.tbl th{ width:32%; font-weight:700; color:var(--ink); background:var(--paper); white-space:nowrap; }
.tbl td{ color:var(--muted); }
.tbl--dark th{ background:rgba(255,255,255,.05); color:#fff; }
.tbl--dark th,.tbl--dark td{ border-bottom-color:var(--line-d); }
.tbl--dark td{ color:rgba(255,255,255,.7); }
.tbl-scroll{ overflow-x:auto; }

/* flow */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.flow li{ position:relative; padding:26px 22px; background:var(--paper); border-radius:12px; }
.flow li b{ display:block; font-size:10.5px; letter-spacing:.18em; color:var(--green); margin-bottom:12px; }
.flow li span{ font-size:.9rem; font-weight:700; line-height:1.7; }

/* roadmap */
.road{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line-d); }
.road li{ background:var(--ink); padding:30px 24px; position:relative; }
.road li b{ display:block; font-size:10.5px; letter-spacing:.18em; color:rgba(255,255,255,.4); margin-bottom:14px; }
.road li span{ font-size:.98rem; font-weight:800; color:rgba(255,255,255,.45); }
.road li.on{ background:linear-gradient(150deg,#17553E,#0F3B2C); }
.road li.on b{ color:var(--green-bright); }
.road li.on span{ color:#fff; }
.road li.on::after{
  content:"NOW"; position:absolute; top:26px; right:22px; font-size:9px; letter-spacing:.14em;
  font-weight:800; color:#0C1C26; background:var(--green-bright); padding:3px 8px; border-radius:3px;
}

/* list with check */
.ticks li{ position:relative; padding-left:30px; margin-bottom:14px; font-size:.9rem; line-height:1.9; }
.ticks li::before{
  content:""; position:absolute; left:4px; top:.72em; width:8px; height:8px;
  border-radius:50%; background:var(--green);
}
.sec--dark .ticks li::before{ background:var(--green-bright); }
.sec--dark .ticks li{ color:rgba(255,255,255,.78); }

/* note / disclaimer */
.note{
  border-left:3px solid rgba(190,120,20,.5); background:rgba(190,120,20,.06);
  padding:18px 22px; font-size:.79rem; line-height:1.9; color:#6b5426; border-radius:0 8px 8px 0;
}
.sec--dark .note{ background:rgba(255,255,255,.05); color:rgba(255,255,255,.6);
  border-left-color:rgba(255,255,255,.3); }

/* news */
.news li{ border-bottom:1px solid var(--line); }
.news a{ display:flex; gap:clamp(14px,3vw,34px); align-items:baseline; padding:22px 4px;
  transition:background .25s, padding .3s var(--ease); flex-wrap:wrap; }
.news a:hover{ background:var(--paper); padding-inline:14px; }
.news time{ font-size:12px; color:var(--muted); letter-spacing:.06em; flex:none; }
.news .badge{ flex:none; }
.news h3{ font-size:.94rem; font-weight:700; line-height:1.7; }

/* contact */
.cbox{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.cbox a{ display:block; }
.form{ display:grid; gap:20px; }
.field label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:9px; letter-spacing:.04em; }
.field label .req{ color:#B4462F; margin-left:6px; font-size:11px; }
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:.92rem; padding:14px 16px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:9px; transition:border-color .25s, box-shadow .25s;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(22,101,70,.12);
}
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ---------------------------------------------------------
   CTA band + footer
   --------------------------------------------------------- */
.band{
  background:linear-gradient(120deg,#0F3B2C 0%,#166546 55%,#1E3A4C 100%);
  color:#fff; padding:clamp(56px,6vw,84px) 0; position:relative; overflow:hidden;
}
.band__in{ display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.band h2{ font-size:clamp(1.5rem,3.2vw,2.4rem); font-weight:800; line-height:1.4; }
.band p{ margin-top:14px; color:rgba(255,255,255,.75); font-size:.9rem; }
.band .btn--w{ background:#fff; color:var(--green); }
.band .btn--w:hover{ background:var(--ink); color:#fff; }

.ft{ background:var(--ink); color:rgba(255,255,255,.6); padding:64px 0 30px; font-size:.83rem; }
.ft__top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-bottom:40px; border-bottom:1px solid var(--line-d); }
.ft__nav{ display:flex; gap:clamp(28px,5vw,72px); flex-wrap:wrap; }
.ft__nav h4{ color:#fff; font-size:11px; letter-spacing:.16em; margin-bottom:16px; font-weight:800; }
.ft__nav li{ margin-bottom:10px; }
.ft__nav a:hover{ color:var(--green-bright); }
.ft__addr{ max-width:24em; line-height:1.95; }
.ft__bot{ padding-top:26px; display:flex; justify-content:space-between; gap:16px;
  flex-wrap:wrap; font-size:11.5px; color:rgba(255,255,255,.4); }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:1000px){
  .nav{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch;
    background:rgba(12,28,38,.98); backdrop-filter:blur(16px); padding:14px 20px 26px;
    gap:0; border-bottom:1px solid var(--line-d);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.3s var(--ease);
  }
  .nav.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:15px 6px; font-size:15px; border-bottom:1px solid rgba(255,255,255,.07); }
  .nav a::after{ display:none; }
  .nav .btn-sm{ margin:16px 0 0; justify-content:center; display:flex; border-bottom:0; }
  .burger{ display:block; }
  .hd{ background:rgba(12,28,38,.86); backdrop-filter:blur(14px); }
}
@media (max-width:820px){
  .steps,.grid3,.flow,.facts,.road{ grid-template-columns:repeat(2,1fr); }
  .tiles,.grid2,.cbox,.row2{ grid-template-columns:1fr; }
  .hero__in{ padding-block:120px 96px; }
}
@media (max-width:560px){
  .wrap{ padding-inline:20px; }
  .steps,.grid3,.flow,.facts,.road{ grid-template-columns:1fr; }
  .facts,.road{ gap:1px; }
  .cue{ display:none; }
  .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .rv{ opacity:1; transform:none; }
}

/* =========================================================
   簡易版（先行公開）用の追加スタイル
   ========================================================= */

/* 準備中ページ */
.soon{ text-align:center; padding:clamp(60px,9vw,110px) 0; }
.soon__mark{
  width:78px; height:78px; margin:0 auto 30px; border-radius:50%;
  display:grid; place-items:center; background:var(--paper);
  border:1px solid var(--line);
}
.soon__mark svg{ display:block; }
.soon h2{ font-size:clamp(1.5rem,3.4vw,2.3rem); font-weight:800; line-height:1.45; margin-bottom:20px; }
.soon p{ color:var(--muted); font-size:.93rem; line-height:2.05; max-width:34em; margin:0 auto; }
.soon .btn{ margin-top:38px; }

/* 経営陣 */
.members{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,34px); }
.member{
  /* 写真を大きく見せるため、写真を上・紹介文を下に配置 */
  display:grid; grid-template-columns:1fr; gap:24px; align-items:start;
  border:1px solid var(--line); border-radius:14px; padding:clamp(22px,2.6vw,30px);
  background:#fff;
}
.member__ph{
  width:264px; max-width:100%; aspect-ratio:8/9; border-radius:10px; overflow:hidden; background:var(--paper-2);
}
.member__ph img{ width:100%; height:100%; object-fit:cover; }
.member__ph--none{ display:grid; place-items:center; }
.member__ph--none span{ font-size:2rem; font-weight:800; color:var(--muted); opacity:.4; letter-spacing:.04em; }
.member__role{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.16em;
  color:var(--green); margin-bottom:12px;
}
.member h3{ font-size:1.32rem; font-weight:800; letter-spacing:.04em; margin-bottom:4px; }
.member h3 small{ display:block; font-size:11px; font-weight:600; color:var(--muted);
  letter-spacing:.1em; margin-top:6px; }
.member p{ font-size:.85rem; color:var(--muted); line-height:1.95; margin-top:14px; }

/* 代表メッセージの顔写真 */
.portrait{ border-radius:14px; overflow:hidden; max-width:360px; }
.portrait img{ width:100%; height:auto; }
.portrait figcaption{
  /* 肩書きは経営陣の役職表示（.member__role）と同じ色 */
  padding:18px 4px 0; font-size:.95rem; color:var(--green); line-height:1.8;
}
.portrait figcaption b{ display:block; color:var(--ink); font-size:1.4rem; letter-spacing:.06em; margin-top:6px; }

@media (max-width:820px){
  .members{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .member__ph{ width:240px; }
}

/* ニュース（リンク先を持たない項目） */
.news .item{
  display:flex; gap:clamp(14px,3vw,34px); align-items:baseline; padding:22px 4px; flex-wrap:wrap;
}
.news .item h3{ font-size:.94rem; font-weight:700; line-height:1.7; flex:1; min-width:min(100%,18em); }
.news .item p{ width:100%; margin-top:8px; font-size:.82rem; color:var(--muted); line-height:1.85; }
.badge--soon{ background:rgba(107,63,160,.1); color:#6B3FA0; }   /* 「予定」：紫 */

/* ニュース：日付・タグ幅を揃えて見出しの開始位置を揃える */
.news time{ min-width:7.6em; }
.news .badge{ min-width:5.4em; text-align:center; }
.news .item p{ padding-left:calc(7.6em + 5.4em + clamp(14px,3vw,34px) * 2); }
@media (max-width:640px){
  .news .item p{ padding-left:0; }
  .news time,.news .badge{ min-width:0; }
}

/* ニュース：外部記事へリンクする項目 */
.news a h3{ flex:1; min-width:min(100%,18em); }
.news .ext{
  display:inline-block; margin-left:.7em; white-space:nowrap;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  color:var(--link-accent);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.news a:hover .ext{ color:var(--link-accent-h); }

/* 医療関係者確認ポップアップ（臨床応用に向けた取り組み） */
.gate{ display:none; }
.gate-on body{ overflow:hidden; }
.gate-on .gate{
  display:grid; place-items:center; position:fixed; inset:0; z-index:1000;
  padding:20px; background:rgba(12,28,38,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.gate__box{
  width:100%; max-width:520px; max-height:calc(100svh - 40px); overflow:auto;
  background:#fff; border-radius:16px; text-align:center;
  padding:clamp(30px,5vw,48px) clamp(22px,4.4vw,44px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
}
.gate__k{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.2em;
  color:var(--green); margin-bottom:12px; text-transform:uppercase;
}
.gate__t{ font-size:clamp(1.25rem,2.8vw,1.55rem); font-weight:800; line-height:1.5; }
.gate__desc{
  margin-top:18px; font-size:.86rem; color:var(--muted); line-height:1.95; text-align:left;
}
.gate__q{
  margin-top:26px; padding-top:24px; border-top:1px solid var(--line);
  font-size:clamp(1.02rem,2.2vw,1.15rem); font-weight:800; color:var(--ink);
}
.gate__btns{ display:flex; gap:12px; justify-content:center; margin-top:20px; }
.gate__btns .btn{
  min-width:9em; justify-content:center; padding:15px 28px;
  border:1px solid transparent; cursor:pointer; font-family:inherit;
}
.gate__btns .btn--o{ border-color:var(--line); color:var(--ink); background:#fff; }
.gate__btns .btn--o:hover{ border-color:var(--navy); background:var(--paper); }
.gate__note{ margin-top:16px; font-size:.74rem; color:var(--muted); line-height:1.8; }
@media (max-width:560px){
  .gate__btns{ flex-direction:column; }
}

/* =========================================================
   製品ページ：手術トレーニング用 脱細胞化血管（products.html）
   写真を大きく、文字は最小限に
   ========================================================= */
.pd-hero{
  position:relative; min-height:min(100svh,820px); display:flex; align-items:center;
  background:var(--ink); color:#fff; overflow:hidden;
}
.pd-hero__ph{
  position:absolute; top:0; right:0; width:70%; height:100%; object-fit:cover; object-position:40% 50%;
}
/* 写真の左側を墨色に溶かして文字を読ませる（写真の左端30%は完全に墨色で隠す） */
.pd-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--ink) 30%, rgba(12,28,38,.85) 42%, rgba(12,28,38,.2) 66%, rgba(12,28,38,0) 100%),
    linear-gradient(0deg, rgba(12,28,38,.55), transparent 30%);
}
.pd-hero__in{ position:relative; z-index:2; padding:140px 24px 110px; }
.pd-hero h1{
  font-size:clamp(2.6rem,7vw,5.6rem); font-weight:800; line-height:1.15; letter-spacing:-.01em; margin-bottom:28px;
}
.pd-hero h1 .em, .pd-h .em, .pd-voice .em{
  background:linear-gradient(100deg,var(--green-bright),#7FD9B4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pd-hero__lead{ font-size:clamp(1rem,1.7vw,1.2rem); color:rgba(255,255,255,.78); line-height:1.95; }
.pd-hero__go{
  display:inline-flex; gap:10px; margin-top:44px; padding:15px 30px; border-radius:100px;
  border:1px solid rgba(255,255,255,.32); font-weight:700; font-size:14px; letter-spacing:.04em;
  transition:background .28s, border-color .28s;
}
.pd-hero__go:hover{ background:var(--green); border-color:var(--green); }

/* 見出し（大） */
.pd-h{ font-size:clamp(2rem,5.2vw,3.8rem); font-weight:800; line-height:1.25; letter-spacing:-.005em; }
.pd-h .em{ background:none; color:var(--green); }
.pd-h--w .em{ background:linear-gradient(100deg,var(--green-bright),#7FD9B4); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* 全長写真 + 数字 */
.pd-length{ padding:clamp(80px,10vw,130px) 0 clamp(70px,8vw,110px); background:#fff; }
.pd-length__ph{ margin:clamp(34px,5vw,56px) 0 0; }
.pd-length__ph img{ width:100%; height:auto; }
.pd-length__ph figcaption{ font-size:11px; letter-spacing:.14em; color:var(--muted); margin-top:10px; text-align:right; }
.pd-stats{
  display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(50px,6vw,80px);
  border-top:1px solid var(--line);
}
.pd-stats li{ padding:clamp(24px,3vw,36px) 0 0; }
.pd-stats li + li{ padding-left:clamp(18px,3vw,40px); border-left:1px solid var(--line); }
.pd-stats b{
  display:block; font-size:clamp(2.6rem,6.4vw,4.8rem); font-weight:800; line-height:1; color:var(--green);
  letter-spacing:-.02em;
}
.pd-stats small{ font-size:.34em; margin-left:6px; letter-spacing:0; color:var(--navy); }
.pd-stats span{ display:block; margin-top:12px; font-size:.85rem; font-weight:700; color:var(--muted); letter-spacing:.08em; }

/* 触感：断面写真 */
.pd-feel{ background:var(--ink); color:#fff; padding:clamp(80px,10vw,130px) 0; overflow:hidden; }
.pd-feel__in{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,6vw,90px); align-items:center; }
.pd-feel__ph{ margin:0 auto; border-radius:50%; overflow:hidden; aspect-ratio:1; max-width:260px; width:100%;
  box-shadow:0 0 0 1px var(--line-d), 0 0 0 22px rgba(53,161,119,.08), 0 40px 90px -30px rgba(0,0,0,.7); }
.pd-feel__ph img{ width:100%; height:100%; object-fit:cover; }
.pd-points{ list-style:none; margin:clamp(30px,4vw,44px) 0 0; padding:0; }
.pd-points li{
  display:flex; align-items:baseline; gap:18px; padding:18px 0; border-bottom:1px solid var(--line-d);
  font-size:clamp(1.1rem,2.2vw,1.45rem); font-weight:700;
}
.pd-points i{ font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--green-bright); font-weight:800; }
.pd-note{ margin-top:22px; font-size:.82rem; color:rgba(255,255,255,.55); }

/* 評価コメント：写真を背景に */
.pd-voice{ position:relative; color:#fff; padding:clamp(110px,15vw,200px) 0; overflow:hidden; background:var(--ink); }
.pd-voice__ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.pd-voice::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(12,28,38,.94) 0%, rgba(15,59,44,.86) 55%, rgba(22,101,70,.55) 100%);
}
.pd-voice__in{ position:relative; z-index:2; }
.pd-voice blockquote{ margin:0; max-width:900px; }
.pd-voice blockquote p{
  font-size:clamp(1.4rem,3.4vw,2.5rem); font-weight:800; line-height:1.65; letter-spacing:.01em;
}
.pd-voice blockquote p::before{ content:"“"; display:block; font-size:4em; line-height:.6; color:var(--green-bright); margin-bottom:14px; }
.pd-voice cite{ display:block; margin-top:30px; font-style:normal; font-size:.82rem; color:rgba(255,255,255,.6); letter-spacing:.06em; }
.pd-voice cite::before{ content:"— "; }

/* ラインナップ（仮） */
.pd-items{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.pd-item__ph{
  position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--ink);
}
.pd-item__ph img{ width:100%; height:100%; object-fit:cover; opacity:.55; filter:grayscale(1);
  transition:opacity .4s var(--ease), transform .6s var(--ease), filter .4s; }
.pd-item__ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(22,101,70,.55), rgba(12,28,38,.5)); }
.pd-item__ph span{
  position:absolute; z-index:2; left:20px; bottom:12px; font-size:clamp(2.6rem,5vw,3.6rem); font-weight:800;
  color:#fff; line-height:1; letter-spacing:-.02em;
}
.pd-item:hover .pd-item__ph img{ opacity:.85; filter:grayscale(0); transform:scale(1.04); }
.pd-item h3{ margin-top:16px; font-size:1.15rem; font-weight:800; }
.pd-item p{ margin-top:4px; font-size:.8rem; color:var(--muted); }
.pd-caution{ margin-top:clamp(34px,4vw,48px); font-size:.8rem; color:var(--muted); }

/* 学術的裏付け（折りたたみ） */
.pd-evi summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-weight:800; font-size:clamp(.98rem,1.8vw,1.1rem); padding:22px 26px; background:#fff;
  border:1px solid var(--line); border-radius:12px;
}
.pd-evi summary::-webkit-details-marker{ display:none; }
.pd-evi summary::after{ content:"+"; font-size:1.5rem; color:var(--green); font-weight:400; transition:transform .3s var(--ease); }
.pd-evi[open] summary::after{ transform:rotate(45deg); }
.pd-evi summary:hover{ border-color:var(--green); }
.pd-evi__body{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px,4vw,60px); padding:32px 26px 8px; }
.pd-evi h3{ font-size:.8rem; letter-spacing:.14em; color:var(--green); margin-bottom:14px; }
.pd-evi li{ font-size:.8rem; line-height:1.7; padding:7px 0; border-bottom:1px solid var(--line); color:var(--ink); }
.pd-evi li span{ color:var(--muted); }

@media (max-width:820px){
  .pd-hero__ph{ width:100%; opacity:.5; }
  .pd-hero::after{ background:linear-gradient(0deg, var(--ink) 8%, rgba(12,28,38,.6) 60%, rgba(12,28,38,.35)); }
  .pd-feel__in{ grid-template-columns:1fr; }
  .pd-feel__ph{ max-width:180px; margin-inline:auto; }
  .pd-items{ grid-template-columns:repeat(2,1fr); }
  .pd-evi__body{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .pd-hero__in{ padding:120px 20px 90px; }
  .pd-stats{ grid-template-columns:1fr; }
  .pd-stats li + li{ padding-left:0; border-left:0; border-top:1px solid var(--line); margin-top:24px; }
  .pd-items{ grid-template-columns:1fr; }
  .pd-hero__go{ width:auto; }
}