/*==Transparent Header for Index Page==*/
header.site-header {
  background: transparent !important;
  box-shadow: none !important;
  position: absolute;
  width: 100%;
  z-index: 3;
}

/* == Site Logo == */
.site-logo {
  margin-top: -100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 12px 0;
  margin-bottom: 0;
  /* original restored */
  position: relative;
  z-index: 2;
  /* ensure logo stays above hero */
}

.site-logo img {
  display: block;
  width: 490px;
  max-width: 90vw;
  height: auto;
  transition: width 0.3s ease;
}

@media (max-width: 900px) {
  .site-logo img {
    width: 420px;
  }
}

@media (max-width: 700px) {
  .site-logo img {
    width: 360px;
  }
}

@media (max-width: 500px) {
  .site-logo img {
    width: 300px;
  }
}

@media (max-width: 360px) {
  .site-logo img {
    width: 260px;
  }
}

/* == Hero Image == */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -150px;
  padding-block: 4px 2px;
  position: relative;
  transition: margin-top 0.3s ease;
}

.hero img {
  display: block;
  width: 100%;
  max-width: var(--max-width);
  height: auto;
}



/* === Top Page Dark Theme === */
body {
  background-color: #0c0c0c;
  /* 黒背景 */
  color: #fafaf8;
  /* 白文字 */
}

a {
  color: #fafaf8;
}

a:hover {
  opacity: 0.85;


}

.intro-section,
.archive-section {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  display: block;
  padding-inline: 16px;
  /* mobile-safe side padding */
  margin-bottom: 50px;
  /* add spacing between intro and archive sections */
}

.archive-image img {
  width: min(100%, 420px);
  height: auto;
  border-radius: 6px;
}

/* Mobile-first: stack elements */
.archive-section {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
  align-items: start;
}

/* Allow children of .archive-content to participate directly in the section grid */
.archive-content {
  display: contents;
}

/* Center the image on small screens */
.archive-image {
  justify-self: center;
}

/* >=900px: two-column layout, image aligns with the top of the heading */
@media (min-width: 900px) {
  .archive-section {
    grid-template-columns: 1fr 200px;
    column-gap: 20px;
  }

  .archive-image {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* start at the heading row, span text below */
    justify-self: end;
  }

  .archive-text {
    grid-column: 1;
  }

  .archive-image img {
    width: 200px;
    margin-top: -20px;
  }
}



/* == Heading SVG images == */
.heading-image {
  display: block;
  height: 45px;
  /* unified height for headings */
  width: auto;
}

.intro-section .heading-image {
  margin-bottom: 10px;
}

.archive-section .heading-image {
  margin-bottom: -20px;
}

@media (max-width: 600px) {
  .heading-image {
    /* keep left-aligned on mobile */
    margin-inline: 0;
    margin-left: 0;
  }
}

/* Override for smaller variant of archive heading image */
#archive-heading-image.small-variant {
  height: 36px;
}

/* == A11y: visually hide but keep for screen readers == */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  /* prevent the text from wrapping */
  border: 0 !important;
}

/* CSS-only swap for archive heading image */
.heading-image--S {
  display: none;
}

@media (max-width: 700px) {
  .heading-image--L {
    display: none;
  }

  .heading-image--S {
    display: block;
    height: 80px;
  }

}

@media (max-width: 900px) {
  .archive-image {
    display: none;
  }
  .archive-section .heading-image {
    margin-bottom: -15px;
  }
}

/* == Scroll hint (bottom-right image) == */
.scroll-hint {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  opacity: 0.9;
  pointer-events: none; /* ユーザ操作を妨げない */
}

.scroll-hint img {
  display: block;
  width: 100px;   /* 好みで調整 */
  height: auto;
  animation: float 2s ease-in-out infinite alternate;
}

@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-15px); }
}

@media (max-width: 600px) {
  .scroll-hint {
    right: 12px;
    bottom: 40px;
  }
  .scroll-hint img {
    width: 80px;
  }
}

/* CTA (Next Page) Section */
.cta {
  text-align: center;
  padding-top: 30px 0;
  padding-bottom: 60px;
}

@keyframes ctaFloat {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.cta-link {
  display: inline-block;
  position: relative;
  transition: transform 0.2s ease, filter 0.2s ease;
  animation: ctaFloat 3s ease-in-out infinite;
}

.cta-link:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
}

.cta-link::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cta-link:hover::after {
  opacity: 1;
}

.cta-image {
  display: none;
  width: auto;
  height: 70px; /* 基準高さ。好みで調整 */
}

.cta-image--L {
  display: block;
}

@media (max-width: 900px) {
  .cta-image--L { display: none; }
  .cta-image--M {
    display: block;
    height: 70px;
  }
}

@media (max-width: 500px) {
  .cta-image--M { display: none; }
  .cta-image--S {
    display: block;
    height: 70px;
  }
}
/* Hero vertical offset follows logo scaling */
@media (max-width: 900px) {
  .hero { margin-top: -130px; }
}
@media (max-width: 700px) {
  .hero { margin-top: -110px; }
}
@media (max-width: 500px) {
  .hero { margin-top: -70px; } /* was -90px: move image further down */
}
@media (max-width: 360px) {
  .hero { margin-top: -48px; } /* was -70px: show even more of the key visual */
}

/* Headings: scale down on small screens (~70%) */
@media (max-width: 500px) {
  /* Generic heading images */
  .heading-image { height: 32px; } /* 45px → ~32px */
  /* Archive small variant SVG */
  .heading-image--S { height: 56px; } /* 80px → ~56px */
}
@media (max-width: 360px) {
  .heading-image { height: 30px; }  /* slight extra shrink for very small phones */
  .heading-image--S { height: 52px; }
}