/* トップ専用。共通シェルは site.css */
.page-top {
  --plum: #321D3E; --paper: #F7F6F2; --teal: #35BABA; --rose: #E7C7D4; --copper: #A5634F;
  --muted: rgba(247, 246, 242, .7);
  background: #fff;
  color: var(--plum);
}

/* スマホのヘッダーは通常の文書の流れに沿って表示する。 */
@media (max-width: 860px) {
  .page-top .site-header { position: sticky; }
  html:not(.menu-ready) .page-top main, .page-top main { padding-top: 0; }
}

/* ---------- ヒーロー：文字なしのアート ---------- */
.hero {
  position: relative;
  height: clamp(405px, min(48vw, 62svh), 640px);
  overflow: hidden;
  background: var(--plum);
  isolation: isolate;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  touch-action: pan-y;
  transition: opacity .25s linear;
}
.hero.is-3d .hero-canvas { opacity: 1; }

/* 静止DOMのアート（JSなし・WebGL失敗・reduced-motion） */
.hero-static {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .35s linear;
}
.hero.is-3d .hero-static { opacity: 0; visibility: hidden; transition: opacity .35s linear, visibility 0s .35s; }

.hero-static__piece { position: absolute; height: auto; max-width: none; user-select: none; }
.hero-static__piece--mirror {
  left: 50%;
  top: 56%;
  height: 84%;
  width: auto;
  max-width: min(91vw, 680px);
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-2deg);
}
.hero-static__piece--teal { width: min(58vw, 860px); left: -4%; top: 6%; transform: rotate(-6deg); }
.hero-static__piece--copper { width: min(70vw, 1000px); right: -10%; top: 20%; opacity: .9; transform: rotate(4deg) scale(.86); }
.hero-static__piece--rose { width: min(52vw, 760px); right: -3%; bottom: -6%; transform: rotate(-3deg); }

/* 漫画の硬い裂け目線 */
.hero-static__cut {
  position: absolute;
  top: -10%;
  width: 6px;
  height: 120%;
  background: #120a17;
}
.hero-static__cut--a { left: 30%; transform: rotate(5deg); }
.hero-static__cut--b { left: 69%; transform: rotate(5deg); }

@media (max-width: 720px) {
  /* 縦長画面でも鏡面と持ち手が収まるようにする。 */
  .hero-static__piece--mirror { height: 84%; max-width: 91vw; }
  .hero-static__piece--teal { width: 92vw; left: -24%; top: 9%; }
  .hero-static__piece--copper { width: 110vw; right: -40%; top: 30%; }
  .hero-static__piece--rose { width: 86vw; right: -22%; bottom: 2%; }
  .hero-static__cut--a { left: 18%; }
  .hero-static__cut--b { left: 80%; }
}

.hero-controls {
  position: absolute;
  right: clamp(16px, 4vw, 48px);
  bottom: clamp(16px, 4vh, 40px);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.hero-controls[hidden] { display: none; }
.hero-control {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(247, 246, 242, .55);
  border-radius: 0;
  background: rgba(50, 29, 62, .82);
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  letter-spacing: .04em;
  cursor: pointer;
}
.hero-control:hover { background: var(--paper); color: var(--plum); }
.hero-control:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ホームは三つの入口とブログに絞る。 */
.page-top .site-header, .menu-ready .page-top .site-nav { background: #fff; border-color: #d5dfdf; }
.page-top .site-nav .nav-contact { background: #176963; color: #fff; clip-path: none; }
.page-top .site-nav .nav-contact:hover { background: #0d504b; }
.top-intro { padding-block: clamp(24px, 3.6vw, 47px) clamp(16px, 2.4vw, 27px); }
.top-intro h1 { font-size: clamp(27px, 4.1vw, 56px); font-weight: 750; line-height: 1.2; }
.top-intro p { margin-top: 8px; font-size: clamp(.86rem, 1.4vw, 1.05rem); line-height: 1.65; }

.top-destinations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 25px);
  padding-bottom: clamp(34px, 5.6vw, 74px);
}
.top-destination {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #d6e2e2;
  border-bottom: 3px solid #2f837c;
  color: inherit;
  text-decoration: none;
}
.top-destination img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 422;
  object-fit: cover;
  background: #edf4f3;
}
.top-destination__copy { padding: clamp(9px, 1.6vw, 22px); }
.top-destination__copy h2 {
  display: flex;
  gap: .3em;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(.82rem, 2.2vw, 1.8rem);
  line-height: 1.3;
  font-weight: 760;
}
.top-destination__copy h2::after { content: "→"; color: #176963; font-size: .75em; }
.top-destination__copy p { margin-top: 5px; color: #4a5154; font-size: clamp(.78rem, 1.2vw, .96rem); }
.top-destination:hover h2, .top-destination:focus-visible h2 { text-decoration: underline; text-underline-offset: .18em; }
.top-destination:focus-visible { outline: 2px solid #176963; outline-offset: 3px; }

.top-articles { padding-block: clamp(30px, 5vw, 65px); background: #f2f6f5; }
.top-articles h2 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); line-height: 1.2; }
.top-articles__list { margin-block: 17px; border-top: 1px solid #c9d9d6; }
.top-articles__list li { border-bottom: 1px solid #c9d9d6; }
.top-articles__list a {
  display: grid;
  grid-template-columns: 7.2em minmax(0, 1fr) 1em;
  gap: 8px;
  align-items: baseline;
  padding-block: 13px;
  color: inherit;
  text-decoration: none;
  line-height: 1.55;
}
.top-articles__list a::after { content: "→"; color: #176963; }
.top-articles__list a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.top-articles__list span { color: #216964; font-size: .85rem; font-weight: 700; }

@media (max-width: 860px) {
  .hero { height: clamp(285px, 88vw, 430px); }
  .top-intro h1 { font-size: clamp(25px, 6.4vw, 43px); }
}
@media (max-width: 580px) {
  .top-destination__copy { padding: 9px 5px; }
  .top-destination__copy h2 { justify-content: center; }
  .top-destination__copy h2::after, .top-destination__copy p { display: none; }
  .top-articles__list a { grid-template-columns: minmax(0, 1fr) 1em; gap: 4px 8px; }
  .top-articles__list span { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-canvas, .hero-static { transition: none; }
}