:root{
  --green:#2f6f45;
  --green-dark:#163f2a;
  --green-soft:#e9f4e8;
  --beige:#f6efe4;
  --wood:#b98955;
  --text:#263126;
  --muted:#667066;
  --white:#fff;
  --shadow:0 24px 70px rgba(36,58,38,.18);
  --radius:28px;
  --container:min(1120px, calc(100% - 32px));
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  color:var(--text);
  background:
    linear-gradient(rgba(255,250,242,.35), rgba(255,250,242,.42)),
    url("../img/komorebi/clinic/clinic-lobby.webp") center/cover fixed no-repeat;
  line-height:1.8;
}

img{
  max-width:100%;
  display:block;
}

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

.container{
  width:var(--container);
  margin-inline:auto;
}

/* =========================
  Site background glass
========================= */

main{
  position:relative;
  z-index:1;
}

main::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(255,250,242,.36);
  backdrop-filter:blur(4px);
  pointer-events:none;
}

.site-footer{
  position:relative;
  z-index:2;
}

/* =========================
  Header
========================= */

.site-header{
  position:fixed;
  top:16px;
  left:50%;
  z-index:50;
  width:min(1120px, calc(100% - 32px));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 14px 10px 18px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(18px) saturate(1.18);
  box-shadow:0 12px 40px rgba(30,58,38,.14);
}

.site-header__logo{
  width:190px;
  flex:0 0 auto;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:.88rem;
  font-weight:700;
  color:var(--green-dark);
}

.site-nav a{
  transition:.25s ease;
}

.site-nav a:hover{
  color:var(--green);
}

.site-nav__reserve{
  padding:8px 18px;
  border-radius:999px;
  background:var(--green);
  color:#fff !important;
}

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:var(--green);
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  margin:4px auto;
  border-radius:999px;
  background:#fff;
  transition:.25s ease;
}

body.is-nav-open .nav-toggle span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

body.is-nav-open .nav-toggle span:nth-child(2){
  opacity:0;
}

body.is-nav-open .nav-toggle span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* =========================
  Common
========================= */

section{
  padding:92px 0;
}

.section-kicker{
  margin:0 0 10px;
  color:var(--green);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.section-title{
  margin:0;
  font-size:clamp(1.9rem, 3.2vw, 3.3rem);
  line-height:1.35;
  letter-spacing:.04em;
  color:var(--green-dark);
}

.section-text{
  margin:22px 0 0;
  font-size:1.03rem;
  font-weight:600;
  color:#485448;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 24px;
  border-radius:999px;
  font-weight:800;
  transition:.25s ease;
}

.btn:hover{
  transform:translateY(-3px);
}

.btn--primary{
  background:linear-gradient(135deg, #2f7a48, #7dbb48);
  color:#fff;
  box-shadow:0 12px 28px rgba(54,117,72,.25);
}

.btn--ghost{
  border:1px solid rgba(47,111,69,.32);
  background:rgba(255,255,255,.76);
  color:var(--green-dark);
}

/* =========================
  Hero
========================= */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:140px 20px 90px;
}

.hero__photo{
  display:none;
}

.hero__bg,
.hero__light,
.hero__shade{
  position:absolute;
  inset:0;
  z-index:-3;
}

.hero__bg{
  background:
    linear-gradient(90deg, rgba(15,44,26,.18), rgba(15,44,26,.02) 55%, rgba(15,44,26,.08)),
    url("../img/komorebi/hero/hero-main.webp") 72% center/cover no-repeat;
}

.hero__light{
  z-index:-2;
  background:url("../img/komorebi/effects/komorebi-light.png") left top/145% auto no-repeat;
  mix-blend-mode:screen;
  opacity:.58;
  filter:blur(1.8px);
  transform-origin:12% 0%;
  animation:komorebiLightSway 18s cubic-bezier(.45,0,.35,1) infinite alternate;
}

.hero__shade{
  z-index:-1;
background:
  radial-gradient(circle at 24% 14%, rgba(255,255,255,.34), transparent 32%),
  radial-gradient(circle at 50% 48%, rgba(255,255,255,.22), transparent 36%),
  linear-gradient(to bottom, rgba(0,0,0,.04), rgba(8,33,18,.30));
}

.hero__content{
  width:min(690px, 100%);
  margin-right:auto;
  margin-left:clamp(0px, 4vw, 48px);
  padding:36px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:34px;
  background:rgba(255,255,255,.56);
  box-shadow:0 24px 70px rgba(36,58,38,.14);
  backdrop-filter:blur(18px) saturate(1.12);
}

.hero__logo{
  width:min(620px, 100%);
  margin-bottom:18px;
}

.hero__catch{
  margin:0 0 14px;
  font-size:clamp(1.6rem, 3.2vw, 3rem);
  line-height:1.32;
  font-weight:900;
  color:var(--green-dark);
  letter-spacing:.04em;
}

.hero__text{
  margin:0;
  font-weight:700;
  color:#354538;
}

.hero__actions,
.reserve__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:26px;
}

/* =========================
  Lead
========================= */

.lead-section__inner{
  max-width:850px;
  text-align:center;
}

/* =========================
  Worry
========================= */

.worry__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:36px;
}

.worry-card{
  aspect-ratio:1 / 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  border-radius:50%;
  background:#fff;
  text-align:center;
  box-shadow:0 16px 44px rgba(30,58,38,.10);
}

.worry-card > span{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin:0 auto 18px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(47,111,69,.95), rgba(125,187,72,.92));
  color:#fff;
  font-size:1rem;
  font-weight:900;
  box-shadow:0 12px 28px rgba(47,111,69,.22);
}

.worry-card h3{
  width:100%;
  margin:8px 0;
  color:var(--green-dark);
}

.worry-card p{
  width:100%;
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

/* =========================
  Choice
========================= */

.choice{
  background:
    linear-gradient(135deg, rgba(47,111,69,.92), rgba(125,187,72,.82)),
    url("../img/komorebi/clinic/clinic-lobby.webp") center/cover no-repeat;
  color:#fff;
}

.choice__inner{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:42px;
  align-items:center;
}

.choice .section-kicker,
.choice .section-title,
.choice .section-text{
  color:#fff;
}

.choice .section-text{
  margin:0;
}

.choice-cards{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:8px;
}

.choice-card{
  min-height:180px;
  padding:24px;
  border:1px solid rgba(255,255,255,.46);
  border-radius:22px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 36px rgba(12,45,25,.16);
}

.choice-card__icon{
  display:grid;
  place-items:center;
  width:auto;
  min-width:58px;
  height:42px;
  margin-bottom:10px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--green);
  font-weight:900;
}

.choice-card h3{
  margin:0 0 6px;
  font-size:1.02rem;
  color:#fff;
}

.choice-card p{
  margin:0;
  font-size:.9rem;
  line-height:1.7;
  color:rgba(255,255,255,.9);
}

.choice-card--staff{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
  overflow:hidden;
}

.choice-card--staff img{
  position:absolute;
  right:0;
  bottom:0;
  width:46%;
  height:100%;
  object-fit:cover;
  opacity:.82;
  mask-image:linear-gradient(to right, transparent, #000 26%);
}

.choice-card--staff .choice-card__body{
  position:relative;
  z-index:1;
}

.choice__cta{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:24px;
  color:#fff;
  font-weight:800;
}

.choice__cta p{
  margin:0;
}

.btn--choice{
  background:rgba(255,255,255,.92);
  color:var(--green-dark);
  box-shadow:0 14px 34px rgba(12,45,25,.18);
}

/* =========================
  Staff
========================= */

.staff__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:26px;
  margin-top:38px;
}

.staff-card{
  overflow:hidden;
  border-radius:34px;
  background:#fff;
  box-shadow:var(--shadow);
}

.staff-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

.staff-card__body{
  padding:28px;
}

.staff-card__role{
  margin:0 0 8px;
  color:var(--green);
  font-weight:900;
}

.staff-card h3{
  margin:0 0 12px;
  font-size:1.6rem;
  color:var(--green-dark);
}

.staff-card h3 span{
  font-size:.95rem;
  color:var(--muted);
}

.staff-card p{
  margin:0;
}

/* =========================
  Rooms
========================= */

.rooms__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-top:38px;
}

.room-card{
  overflow:hidden;
  border-radius:34px;
  background:#fff;
  box-shadow:var(--shadow);
}

.room-card--wide{
  grid-column:1 / -1;
}

.room-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}

.room-card div{
  padding:24px 26px 28px;
}

.room-card h3{
  margin:0 0 8px;
  font-size:1.35rem;
  color:var(--green-dark);
}

.room-card p{
  margin:0;
  color:var(--muted);
}

/* =========================
  Flow
========================= */

.flow__list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  padding:0;
  margin:38px 0 0;
  list-style:none;
}

.flow__list li{
  aspect-ratio:1 / 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  border-radius:50%;
  background:var(--beige);
  text-align:center;
}

.flow__list span{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin:0 auto 16px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(47,111,69,.95), rgba(125,187,72,.92));
  color:#fff;
  font-size:1rem;
  font-weight:900;
  box-shadow:0 12px 28px rgba(47,111,69,.22);
}

.flow__list h3{
  width:100%;
  margin:8px 0;
  color:var(--green-dark);
}

.flow__list p{
  width:100%;
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

/* =========================
  Reserve
========================= */

.reserve__inner{
  max-width:820px;
  padding:48px;
  border-radius:36px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow);
  text-align:center;
}

.reserve__buttons{
  justify-content:center;
}

/* =========================
  Access
========================= */

.access__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:stretch;
}

.access__info{
  margin:26px 0 0;
}

.access__info div{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid rgba(47,111,69,.16);
}

.access__info dt{
  font-weight:900;
  color:var(--green);
}

.access__info dd{
  margin:0;
}

.access__map{
  display:grid;
  place-items:center;
  min-height:320px;
  border-radius:34px;
  background:linear-gradient(135deg, rgba(47,111,69,.12), rgba(255,255,255,.8));
  color:var(--green);
  font-weight:900;
}

/* =========================
  Footer
========================= */

.site-footer{
  padding:42px 20px;
  text-align:center;
  background:var(--green-dark);
  color:#fff;
}

.site-footer img{
  width:min(320px, 76vw);
  margin:0 auto 14px;
}

.site-footer p{
  margin:0;
  opacity:.76;
}

/* =========================
  Reveal
========================= */

.js-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.js-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================
  Animation
========================= */

@keyframes komorebiFloat{
  0%{
    transform:translate3d(-3%, -2%, 0) scale(1.04);
    opacity:.38;
  }
  50%{
    opacity:.62;
  }
  100%{
    transform:translate3d(3%, 2%, 0) scale(1.12);
    opacity:.48;
  }
}

@keyframes komorebiLightSway{
  0%{
    transform:
      translate3d(-3%, -2%, 0)
      rotate(-1.6deg)
      scale(1.02);

    opacity:.34;
    filter:blur(2px);
  }

  20%{
    transform:
      translate3d(-1%, -.5%, 0)
      rotate(-.4deg)
      scale(1.08);

    opacity:.62;
    filter:blur(1.4px);
  }

  45%{
    transform:
      translate3d(1.5%, 1%, 0)
      rotate(.9deg)
      scale(1.12);

    opacity:.76;
    filter:blur(1px);
  }

  72%{
    transform:
      translate3d(3%, 1.5%, 0)
      rotate(1.8deg)
      scale(1.18);

    opacity:.48;
    filter:blur(2.2px);
  }

  100%{
    transform:
      translate3d(4%, 2%, 0)
      rotate(2.4deg)
      scale(1.22);

    opacity:.28;
    filter:blur(2.8px);
  }
}


/* =========================
  Responsive
========================= */

@media (min-width:901px) and (max-width:1180px){
  .hero{
    place-items:end start;
    padding-top:190px;
  }

  .hero__content{
    margin-top:72px;
  }

  .worry__grid,
  .flow__list{
    grid-template-columns:repeat(2, minmax(220px, 300px));
    justify-content:center;
  }
}

@media (max-width:900px){
  .site-header{
    top:10px;
    width:calc(100% - 20px);
  }

  .site-header__logo{
    width:160px;
  }

  .nav-toggle{
    display:block;
  }

  .site-nav{
    position:fixed;
    top:72px;
    right:0;
    width:min(330px, calc(100vw - 20px));
    display:grid;
    gap:0;
    padding:18px;
    border-radius:28px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--shadow);
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:.25s ease;
  }

  body.is-nav-open .site-nav{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  .site-nav a{
    padding:12px 10px;
    border-bottom:1px solid rgba(47,111,69,.12);
  }

  .site-nav__reserve{
    margin-top:10px;
    text-align:center;
  }

  .hero{
    min-height:auto;
    display:block;
    padding:112px 16px 42px;
    background:#fffaf2;
  }

  .hero__photo{
    display:block;
    width:min(100%, 840px);
    margin:0 auto 22px;
    overflow:hidden;
  }

  .hero__photo img{
    width:100%;
    height:auto;
  }

  .hero__bg,
  .hero__light,
  .hero__shade{
    display:none;
  }

  .hero__content{
    width:min(680px, 100%);
    margin:0 auto;
    padding:26px;
    border-radius:28px;
  }

  .hero__catch{
    font-size:clamp(1.55rem, 7vw, 2.3rem);
  }

  .choice__inner,
  .access__inner{
    grid-template-columns:1fr;
  }

  .staff__grid,
  .rooms__grid{
    grid-template-columns:1fr;
  }

  .worry__grid,
  .flow__list{
    grid-template-columns:repeat(2, minmax(220px, 300px));
    justify-content:center;
  }
}

@media (max-width:760px){
  .choice-cards{
    grid-template-columns:1fr;
    margin-top:22px;
  }

  .choice-card{
    min-height:auto;
  }

  .choice-card--staff{
    min-height:190px;
  }

  .choice-card--staff img{
    width:42%;
  }

  .choice__cta{
    display:grid;
    text-align:center;
  }
}

@media (max-width:680px){
  .worry__grid,
  .flow__list{
    grid-template-columns:minmax(240px, 320px);
  }
}

@media (max-width:560px){
  .site-header__logo{
    width:140px;
  }

  .hero__logo{
    width:100%;
  }

  .hero__content{
    padding:22px;
  }

  .hero__actions,
  .reserve__buttons{
    display:grid;
  }

  section{
    padding:68px 0;
  }

  .worry-card,
  .flow__list li{
    aspect-ratio:1 / .92;
    border-radius:46%;
  }

  .reserve__inner{
    padding:32px 22px;
  }
}

@media (min-width:681px) and (max-width:1180px){
  .worry .container,
  .flow .container{
    text-align:center;
  }

  .worry .section-kicker,
  .flow .section-kicker{
    margin-inline:auto;
  }
}


.staff-card,
.room-card,
.worry-card{
  border:1px solid rgba(255,255,255,.58);
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(12px) saturate(1.08);
}

.staff-card__body,
.room-card div{
  background:transparent;
  backdrop-filter:none;
}

/* =========================
  Reserve strengthen
========================= */

.reserve__inner{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.66);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.9), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(246,239,228,.66));
  backdrop-filter:blur(14px) saturate(1.08);
}

.reserve__inner::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:url("../img/komorebi/effects/komorebi-light.png") left top/120% auto no-repeat;
  opacity:.22;
  mix-blend-mode:screen;
  pointer-events:none;
  animation:komorebiLightSway 22s ease-in-out infinite alternate;
}

.reserve__inner > *{
  position:relative;
  z-index:1;
}

.reserve__notice{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:26px;
}

.reserve__notice span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 16px;
  border:1px solid rgba(47,111,69,.22);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--green-dark);
  font-size:.9rem;
  font-weight:900;
  box-shadow:0 10px 24px rgba(36,58,38,.08);
}

.reserve__subnotice{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}

.reserve__subnotice span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.34);
  color:#536257;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
}


.reserve__buttons--strong{
  margin-top:28px;
}

.btn--line{
  min-width:220px;
  background:linear-gradient(135deg, #18b85f, #7bdc5a);
  color:#fff;
  box-shadow:0 16px 34px rgba(24,184,95,.28);
}

.btn--tel{
  min-width:190px;
  border:1px solid rgba(47,111,69,.28);
  background:rgba(255,255,255,.82);
  color:var(--green-dark);
}

.reserve__note{
  width:min(560px, 100%);
  margin:18px auto 0;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(47,111,69,.05);
  color:#536257;
  font-size:.8rem;
  font-weight:700;
  line-height:1.7;
}


/* =========================
  Reserve final polish
========================= */

.reserve__inner::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-80%;
  z-index:0;
  width:58%;
  height:160%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,.08) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.08) 65%,
    transparent 100%
  );
  transform:rotate(8deg);
  pointer-events:none;
  animation:reserveGlassSweep 8s ease-in-out infinite;
}

.btn--line,
.btn--tel{
  gap:16px;
  min-height:64px;
  padding:12px 24px;
}

.btn--line{
  position:relative;
  overflow:hidden;
  animation:lineBreath 2.8s ease-in-out infinite;
}

.btn--line img{
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.btn--line span,
.btn--tel span{
  display:grid;
  gap:2px;
  line-height:1.3;
  text-align:left;
}

.btn--line small,
.btn--tel small{
  font-size:.74rem;
  font-weight:900;
  opacity:.86;
}

.btn--tel__icon{
  display:grid !important;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border:1px solid rgba(47,111,69,.28);
  border-radius:50%;
  font-size:1.25rem;
  line-height:1;
}


@keyframes lineBreath{
  0%, 100%{
    box-shadow:
      0 16px 34px rgba(24,184,95,.28),
      0 0 0 rgba(24,184,95,0);
  }

  50%{
    box-shadow:
      0 18px 42px rgba(24,184,95,.36),
      0 0 34px rgba(54,220,92,.38);
  }
}

@keyframes reserveGlassSweep{
  0%, 42%{
    left:-80%;
    opacity:0;
  }

  52%{
    opacity:.85;
  }

  72%, 100%{
    left:125%;
    opacity:0;
  }
}

@media (max-width:760px){
  .reserve__support{
    grid-template-columns:1fr;
  }

  .btn--line,
  .btn--tel{
    justify-content:flex-start;
  }
}

@media (max-width:560px){
  .btn--line,
  .btn--tel{
    min-width:0;
    width:100%;
  }
}


/* =========================
  Staff hover polish
========================= */

.staff-card{
  position:relative;
  isolation:isolate;
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease,
    border-color .45s ease;
}

.staff-card::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:0;
  background:
    url("../img/komorebi/effects/komorebi-light.png")
    center/cover no-repeat;
  opacity:0;
  mix-blend-mode:screen;
  pointer-events:none;
  transition:
    opacity .55s ease,
    transform 1.2s ease;
  transform:scale(1.08) rotate(-2deg);
}

.staff-card::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-40%;
  z-index:2;
  width:42%;
  height:240%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,.04) 35%,
    rgba(255,255,255,.48) 50%,
    rgba(255,255,255,.04) 65%,
    transparent 100%
  );
  transform:rotate(12deg);
  opacity:0;
  pointer-events:none;
}

.staff-card img{
  position:relative;
  z-index:1;
  transition:
    transform 1.1s cubic-bezier(.22,1,.36,1),
    filter .45s ease;
  transform-origin:center center;
}

.staff-card__body{
  position:relative;
  z-index:3;
}

.staff-card:hover{
  transform:translateY(-10px);
  box-shadow:
    0 34px 70px rgba(36,58,38,.18),
    0 0 34px rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.88);
}

.staff-card:hover::before{
  opacity:.38;
  transform:scale(1.18) rotate(1deg);
}

.staff-card:hover::after{
  opacity:1;
  animation:staffGlassSweep 1.6s ease;
}

.staff-card:hover img{
  transform:scale(1.045);
  filter:saturate(1.04) brightness(1.03);
}

@keyframes staffGlassSweep{
  0%{
    top:-120%;
    left:-40%;
  }

  100%{
    top:120%;
    left:120%;
  }
}

/* =========================
  SP hover suppress
========================= */

@media (hover:none){
  .staff-card:hover{
    transform:none;
  }

  .staff-card:hover::before,
  .staff-card:hover::after{
    opacity:0;
    animation:none;
  }

  .staff-card:hover img{
    transform:none;
    filter:none;
  }
}


/* =========================
  Staff photo thumbs
========================= */

.staff-card__photo{
  position:relative;
  overflow:hidden;
}

.staff-card__main-img{
  transition:
    opacity .28s ease,
    transform 1.1s cubic-bezier(.22,1,.36,1),
    filter .45s ease;
}

.staff-card__main-img.is-switching{
  opacity:.18;
}

.staff-thumbs{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:4;
  width:calc(100% - 36px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  transform:translateX(-50%);
  pointer-events:auto;
}

.staff-thumb{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  padding:0;
  border:2px solid rgba(255,255,255,.78);
  border-radius:18px;
  background:rgba(255,255,255,.66);
  box-shadow:0 12px 24px rgba(18,45,27,.18);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

.staff-thumb img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  transform:none;
  filter:none;
}

.staff-thumb:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.96);
  box-shadow:
    0 16px 30px rgba(18,45,27,.2),
    0 0 22px rgba(255,255,255,.36);
}

.staff-thumb.is-active{
  border-color:rgba(47,111,69,.88);
  box-shadow:
    0 12px 26px rgba(47,111,69,.22),
    0 0 0 4px rgba(255,255,255,.42);
}

.staff-thumb.is-active::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.72);
  pointer-events:none;
}

@media (max-width:760px){
  .staff-thumbs{
    bottom:14px;
    gap:10px;
  }

  .staff-thumb{
    border-radius:15px;
  }
}

@media (max-width:560px){
  .staff-thumbs{
    width:calc(100% - 28px);
    bottom:12px;
    gap:8px;
  }
}

/* =========================
  Staff thumb story polish
========================= */

.staff-thumb{
  isolation:isolate;
}

.staff-thumb::before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:1;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.18) 38%,
      transparent 72%
    );
  opacity:0;
  transition:
    opacity .35s ease,
    transform .45s ease;
  transform:scale(.72);
  pointer-events:none;
}

.staff-thumb:hover::before{
  opacity:.9;
  transform:scale(1);
}

.staff-thumb.is-active{
  overflow:visible;
}

.staff-thumb > img{
  border-radius:16px;
}

@media (max-width:760px){
  .staff-thumb > img{
    border-radius:13px;
  }
}


.staff-thumb.is-active::before{
  opacity:1;
  transform:scale(1.08);
  background:
    radial-gradient(
      circle,
      rgba(201,255,205,.78) 0%,
      rgba(148,255,169,.22) 36%,
      transparent 74%
    );
}

.staff-thumb__label{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-height:23px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(22,40,28,.76);
  color:#fff;
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.staff-thumb__story{
  position:absolute;
  left:50%;
  bottom:calc(100% + 12px);
  z-index:8;
  width:max-content;
  max-width:190px;
  padding:8px 12px;
  border-radius:14px;
  background:#fff;
  color:#2d4133;
  font-size:.72rem;
  font-weight:700;
  line-height:1.55;
  text-align:center;
  box-shadow:
    0 12px 28px rgba(19,40,28,.16),
    0 0 18px rgba(255,255,255,.34);
  opacity:0;
  transform:
    translateX(-50%)
    translateY(8px);
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}

.staff-thumb__story::before{
  content:"";
  position:absolute;
  bottom:-6px;
  left:50%;
  width:12px;
  height:12px;
  background:#fff;
  transform:
    translateX(-50%)
    rotate(45deg);
}

.staff-thumb:hover .staff-thumb__story,
.staff-thumb.is-active .staff-thumb__story{
  opacity:1;
  transform:
    translateX(-50%)
    translateY(0);
}

.staff-card__main-img{
  transform:scale(1);
}

.staff-card__main-img.is-switching{
  opacity:.16;
  transform:scale(1.04);
}

@media (max-width:760px){
  .staff-thumb__story{
    max-width:160px;
    font-size:.66rem;
    bottom:calc(100% + 10px);
  }

  .staff-thumb__label{
    left:6px;
    bottom:6px;
    padding:3px 8px;
    font-size:.62rem;
  }
}

@media (hover:none){
  .staff-thumb__story{
    display:none;
  }
}


/* =========================
  Staff story SP adjustment
========================= */

@media (max-width:760px){
  .staff-thumb__story{
    width:max-content;
    max-width:170px;
    padding:7px 10px;
    font-size:.62rem;
    line-height:1.45;
  }
}

@media (max-width:430px){
  .staff-thumb__story{
    max-width:150px;
    font-size:.6rem;
  }
}