@charset "UTF-8";

/* トップの解剖図まわり。動きはページを開いた一度だけ。 */

.hero {
  background-color: var(--bench);
  background-image:
    linear-gradient(90deg, rgba(18, 15, 11, 0.36) 0%, rgba(18, 15, 11, 0.12) 58%, rgba(18, 15, 11, 0.22) 100%),
    url("../images/hero-background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--bone);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}

/* TOPだけはヘッダーをヒーロー上へ重ね、背景を一続きに見せる。 */
.home .masthead {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  border-bottom-color: rgba(231, 228, 216, 0.2);
}
.home .masthead .mark,
.home .masthead .nav a { color: var(--bone); }
.home .masthead .mark span { color: var(--bone-soft); }
.home .masthead .nav a:hover {
  color: var(--bone);
  border-bottom-color: var(--bone-soft);
}
.home .hero {
  padding-top: clamp(7.5rem, 10vw, 9.5rem);
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 33rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__h1 {
  font-size: var(--t-3xl);
  line-height: 1.24;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0 0 1.6rem;
}
.hero__lede {
  color: #c3c6b8;
  font-size: var(--t-m);
  line-height: 2.05;
  max-width: 27em;
  margin-bottom: 2.1rem;
}
.hero__act { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }

.hero__fig { justify-self: center; }
.anatomy { margin: 0; }
.anatomy__stage {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.anatomy__svg {
  display: block;
  height: clamp(340px, 56vh, 540px);
  width: auto;
  color: var(--bone);
}

/* --- 開いたときの一度きりの描画 --- */
.ink path, .ink use, .ink ellipse, .ink circle, .ink rect {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ink-draw 1500ms cubic-bezier(.5,.05,.3,1) forwards;
}
.ink--1 * { animation-delay: 120ms; }
.ink--2 * { animation-delay: 300ms; }
.ink--3 * { animation-delay: 0ms; }
.ink--4 * { animation-delay: 780ms; }
.ink--5 * { animation-delay: 980ms; }
@keyframes ink-draw { to { stroke-dashoffset: 0; } }

.ink--4[data-part="fhole"] use,
.ink--4[data-part="fhole"] circle,
.ink--4[data-part="fhole"] rect {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: ink-fade 700ms ease 900ms both;
}
@keyframes ink-fade { from { opacity: 0; } to { opacity: 1; } }

.ink[data-part] { transition: color 180ms ease, stroke-opacity 180ms ease, fill-opacity 180ms ease; }
.anatomy[data-active] .ink[data-part] { stroke-opacity: 0.3; fill-opacity: 0.3; }
.anatomy[data-active] .ink[data-part].is-lit {
  stroke-opacity: 1; fill-opacity: 1; color: var(--amber-lit);
}

/* --- 印 --- */
.spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0.35rem;
  cursor: pointer;
  font-family: var(--gothic);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  color: #b9bdaf;
  white-space: nowrap;
  animation: ink-fade 600ms ease 1400ms both;
}
.spot i {
  display: block;
  width: 9px; height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex: none;
  transition: background 160ms ease, transform 160ms ease;
}
.spot span { position: relative; }
.spot span::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.5rem;
  border-top: 1px solid currentColor;
  opacity: 0.55;
}
.spot--r { flex-direction: row; }
.spot--r span { padding-left: 1.9rem; }
.spot--r span::before { left: 0; }
.spot--l { flex-direction: row-reverse; }
.spot--l span { padding-right: 1.9rem; }
.spot--l span::before { right: 0; }
.spot--l { transform: translate(-100%, -50%) translateX(0.6rem); }
.spot--r { transform: translate(0, -50%) translateX(-0.6rem); }

.spot:hover, .spot:focus-visible, .spot.is-on { color: var(--amber-lit); }
.spot:hover i, .spot:focus-visible i, .spot.is-on i {
  background: var(--amber-lit);
  transform: scale(1.15);
}

/* --- 読み取り欄 --- */
.readout {
  margin: 2.2rem auto 0;
  max-width: 30rem;
  min-height: 9.5rem;
  border-top: 1px solid var(--rule-dark);
  padding-top: 1.1rem;
}
.readout__idle {
  font-family: var(--gothic);
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  color: var(--bone-soft);
  margin: 0;
}
.readout h3 {
  font-size: var(--t-l);
  margin: 0 0 0.7rem;
  color: var(--amber-lit);
}
.readout dl {
  margin: 0;
  font-family: var(--gothic);
  font-size: var(--t-xs);
  line-height: 1.9;
  letter-spacing: 0.05em;
}
.readout dt { color: var(--bone-soft); }
.readout dd { margin: 0 0 0.7rem; color: var(--bone); }
.readout dd:last-child { margin-bottom: 0; }
.readout a { color: var(--amber-lit); }

@media (max-width: 62rem) {
  /* ナビが折り返しても、ヘッダーの実際の高さに続けて見出しを配置する。 */
  .home .masthead { position: relative; inset: auto; }
  .home .hero {
    background: transparent;
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
  }
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__fig { justify-self: stretch; }
  .anatomy__svg { height: clamp(320px, 48vh, 460px); }
}
@media (max-width: 34rem) {
  .spot span { display: none; }
  .spot--l, .spot--r { transform: translate(-50%, -50%); }
  .spot i { width: 12px; height: 12px; }
  /* 案内文の下に残っていた過剰な予約高を縮める。詳細表示時は内容に合わせて伸びる。 */
  .readout { min-height: 5.5rem; }
}

@media (max-width: 47rem) {
  .hero { background-position: 72% center; }
}