@charset "UTF-8";

/* ==========================================================================
   TOP.CSS
   --------------------------------------------------------------------------
   - all_v1.css からの段階的移行用
   - 命名規則を整理しつつ、旧クラスとの並行稼働（二重クラス）を前提とする
   ========================================================================== */

/* ============================================
   Scope: .s-hero 
   Theme: Bright Gold & Adaptive
   Type: SECTION
   Status: MIGRATED (dual-class)
   MovedTo: /assets/css/migrate.css
   Date: 2025-12-31
   Source: all_v1.css
   ============================================ */

.s-hero {
  --h-white: #ffffff;
  --h-ink: #141311;
  /* Use token if available, else fallback */
  --h-gold-token: var(
    --g-gold-main,
    linear-gradient(135deg, #b48a3c 0%, #f3e0a0 30%, #c5a059 50%, #967027 100%)
  );

  /* Default (Dark Bg) Variables */
  --h-txt: var(--h-white);
  --h-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
  /* Gold Glow: Brightness filter + Drop Shadow */
  --h-gold-filter: brightness(1.3) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  --h-overlay-grad: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.4)
  );

  position: relative;
  width: 100%;
  height: 95dvh;
  min-height: 600px;
  overflow: hidden;
  background-color: var(--h-ink);
  color: var(--h-white);
}

/* Light Mode Override */
.c-slide--light {
  --h-txt: var(--h-ink);
  --h-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  --h-gold-filter: brightness(1.1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
  --h-overlay-grad: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.4)
  );
}

/* Visual */
.c-hero-slider {
  width: 100%;
  height: 100%;
  position: relative;
}
.c-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 1.2s;
  z-index: 1;
}
.c-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.c-slide__visual {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.c-slide__zoom-box {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: transform 6s linear;
}
.c-slide.is-active .c-slide__zoom-box {
  animation: ken-burns 8s linear forwards;
}
@keyframes ken-burns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.c-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.c-slide__overlay {
  position: absolute;
  inset: 0;
  background: var(--h-overlay-grad);
}

/* Content */
.c-slide__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .c-slide__content {
    justify-content: flex-end;
    padding-right: 15%;
  }
}

.c-vertical-copy {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Noto Serif JP", serif;
  color: var(--h-txt);
  white-space: nowrap;
  text-shadow: var(--h-shadow);
  transition:
    color 0.3s,
    text-shadow 0.3s;
}
.c-vertical-copy__line {
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.15em;
  margin: 0 0.5em;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-slide.is-active .c-vertical-copy__line {
  opacity: 1;
  transform: translateY(0);
}
.c-slide.is-active .c-vertical-copy__line:nth-child(1) {
  transition-delay: 0.4s;
}
.c-slide.is-active .c-vertical-copy__line:nth-child(2) {
  transition-delay: 0.6s;
}

/* Sub Copy (Left side) - for renewal announcement */
.c-vertical-copy--sub {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 1024px) {
  .c-vertical-copy--sub {
    left: 15%;
  }
}
.c-slide.is-active .c-vertical-copy--sub .c-vertical-copy__line:nth-child(1) {
  transition-delay: 1s;
}
.c-slide.is-active .c-vertical-copy--sub .c-vertical-copy__line:nth-child(2) {
  transition-delay: 1.2s;
}

/* Enhanced Gold Text */
.is-gold {
  color: #d4af37; /* Fallback */
  background: var(--h-gold-token);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  /* Filter to boost brightness and contrast */
  filter: var(--h-gold-filter);
}

/* Console & Mist */
.s-hero__mist {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, rgba(251, 250, 247, 0), #fbfaf7);
  z-index: 4;
  pointer-events: none;
}
.s-hero__console-wrap {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.c-glass-console {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.c-console-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: 0.3s;
}
.c-console-btn:hover {
  opacity: 1;
}
.c-console-btn .c-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.c-indicators {
  display: flex;
  gap: 12px;
}
.c-indicator {
  background: transparent;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  position: relative;
}
.c-indicator__track {
  display: block;
  width: 40px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}
.c-indicator__fill {
  display: block;
  width: 0%;
  height: 100%;
  background: #fff;
  transition: width 0.1s linear;
}
.s-hero__scroll-text {
  font-family: var(--ff-serif, serif);
  font-size: 0.75rem;
  color: #1f1e1c;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0;
  animation: scroll-bounce 2s infinite;
}
@keyframes scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* ============================================
   Intro Section (Bridge Edition)
   Updated: 2026-02-19
   Structure: Shortcuts → 2-col Grid → Key Facts
   ============================================ */

.s-intro {
  position: relative;
  padding: 10rem 0 6rem;
  background-color: transparent;
  overflow: hidden;
}

.s-intro .l-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* -----------------------------------------
   SVG Background: Flowing S-curve
   ----------------------------------------- */
.s-intro .c-flow-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.s-intro .c-flow-bg svg {
  position: absolute;
  top: -10%;
  left: -5%;
  width: 110%;
  height: 120%;
}

/* -----------------------------------------
   Service Shortcuts (Glass Capsule)
   ----------------------------------------- */
.s-intro .s-intro__shortcuts {
  position: relative;
  z-index: 5;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 100px;
  padding: 1.2rem 3rem;
  box-shadow:
    0 8px 32px rgba(26, 43, 76, 0.05),
    inset 0 0 20px rgba(255, 255, 255, 0.4);
  max-width: 960px;
  margin: 0 auto 5.5rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.s-intro .c-dock-label {
  text-align: center;
  font-size: 0.8rem;
  color: var(--c-gold, #c5a059);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  display: block;
  font-weight: bold;
}
.s-intro .c-dock-label::before,
.s-intro .c-dock-label::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(197, 160, 89, 0.4);
  vertical-align: middle;
  margin: 0 10px;
}

.s-intro .c-dock-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
  align-items: start;
}

.s-intro .c-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: #555;
  transition: all 0.3s;
  text-align: center;
}
.s-intro .c-dock-item:hover {
  transform: translateY(-3px);
  color: var(--c-text-main, #1a2b4c);
}

.s-intro .c-dock-icon {
  font-size: 1.1rem;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  color: var(--c-text-main, #1a2b4c);
  border: 1px solid rgba(0, 0, 0, 0.03);
}
.s-intro .c-dock-item:hover .c-dock-icon {
  background: var(--c-text-main, #1a2b4c);
  color: #fff;
  box-shadow: 0 4px 12px rgba(26, 43, 76, 0.18);
  border-color: transparent;
}

.s-intro .c-dock-item.is-special .c-dock-icon {
  background: var(--c-gold, #c5a059);
  color: #fff;
  border-color: transparent;
}
.s-intro .c-dock-item.is-special:hover .c-dock-icon {
  background: #d4ac6e;
}

.s-intro .c-dock-text {
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.2;
}

/* -----------------------------------------
   Main Grid: 60% / 40%
   ----------------------------------------- */
.s-intro .s-intro__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: start;
  margin-bottom: 5rem;
  position: relative;
  z-index: 2;
}

/* -----------------------------------------
   Left Column: Story, Text & Tags
   ----------------------------------------- */
.s-intro .s-intro__left {
  padding-top: 0.5rem;
}

.s-intro .c-intro-head {
  margin-bottom: 2.5rem;
}
.s-intro .c-intro-sub {
  display: block;
  font-family: "Didot", serif;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--c-gold, #c5a059);
  margin-bottom: 0.8rem;
  font-weight: bold;
}
.s-intro .c-intro-title {
  font-family: var(--ff-serif, "Noto Serif JP", serif);
  font-size: 2.4rem;
  color: var(--c-text-main, #1a2b4c);
  line-height: 1.3;
  font-feature-settings: "palt";
}

/* Main Text */
.s-intro .c-intro-body {
  padding-left: 0;
  display: block;
}

.s-intro .c-intro-text {
  font-size: 1.05rem;
  color: #444;
  text-align: justify;
  margin-bottom: 2.5rem;
  line-height: 2.4;
}
.s-intro .c-intro-text .is-keyword {
  color: var(--c-text-main, #1a2b4c);
  font-weight: 700;
  background-image: linear-gradient(
    to right,
    rgba(197, 160, 89, 0.25),
    rgba(197, 160, 89, 0.25)
  );
  background-position: 0 calc(100% - 2px);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  padding-bottom: 1px;
}

/* Keyword Tags */
.s-intro .c-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.s-intro .c-service-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-text-main, #1a2b4c);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(26, 43, 76, 0.08);
  transition: all 0.3s;
  text-decoration: none;
  line-height: 1.3;
}
.s-intro .c-service-tag:hover {
  background: var(--c-text-main, #1a2b4c);
  color: #fff;
  border-color: var(--c-text-main, #1a2b4c);
  box-shadow: 0 4px 12px rgba(26, 43, 76, 0.15);
}
.s-intro .c-service-tag i {
  font-size: 0.7rem;
  opacity: 0.6;
}
.s-intro .c-service-tag:hover i {
  opacity: 1;
}

/* -----------------------------------------
   Right Column: Video & Profile
   ----------------------------------------- */
.s-intro .s-intro__right {
  position: relative;
  z-index: 2;
}

/* Video Wrapper */
.s-intro .c-video-frame {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg, 12px);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(26, 43, 76, 0.1);
  margin-bottom: 0.6rem;
  cursor: pointer;
  background: #000;
  aspect-ratio: 16/9;
}
.s-intro .c-video-frame:hover .c-video-thumb {
  opacity: 0.85;
  transform: scale(1.04);
}

.s-intro .c-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s ease;
  opacity: 0.92;
}

/* Play Button: White circle + red triangle */
.s-intro .c-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.3s;
  z-index: 2;
  pointer-events: none;
}
.s-intro .c-play-btn::after {
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--c-accent, #b33a2b);
  margin-left: 4px;
}
.s-intro .c-video-frame:hover .c-play-btn {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 148万再生 Badge */
.s-intro .c-video-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: var(--c-text-main, #1a2b4c);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.s-intro .c-video-badge__yt-icon {
  color: #cd201f;
  font-size: 1rem;
}
.s-intro .c-video-badge__number {
  font-family: "Didot", "Georgia", serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-gold, #c5a059);
  letter-spacing: -0.01em;
}
.s-intro .c-video-badge__text {
  font-size: 0.7rem;
  opacity: 0.85;
}

/* Video caption */
.s-intro .c-video-caption {
  font-size: 0.82rem;
  color: var(--c-muted, #888);
  text-align: center;
  margin-bottom: 2rem;
}

/* -----------------------------------------
   Profile Card (Washi bg, Cover icon)
   ----------------------------------------- */
.s-intro .c-profile-card {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 8px 30px rgba(26, 43, 76, 0.04);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  min-height: 130px;
}
.s-intro .c-profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/assets/images/common/bg_washi_texture_01.webp") center /
    cover no-repeat;
  opacity: 0.06;
  z-index: 0;
}
.s-intro .c-profile-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  z-index: 0;
}

.s-intro .c-profile-img-area {
  width: 110px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(197, 160, 89, 0.08),
    rgba(26, 43, 76, 0.04)
  );
}
.s-intro .c-profile-thumb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.s-intro .c-profile-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding: 1.4rem 1.6rem 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.s-intro .c-profile-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.s-intro .c-profile-role {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--c-gold, #c5a059);
  font-weight: bold;
}
.s-intro .c-profile-name {
  font-family: var(--ff-serif, "Noto Serif JP", serif);
  font-size: 1.05rem;
  color: var(--c-text-main, #1a2b4c);
  font-weight: bold;
  font-feature-settings: "palt";
  margin: 0;
}
.s-intro .c-profile-msg {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #666;
  margin-bottom: 0.5rem;
}
.s-intro .c-profile-link {
  font-size: 0.82rem;
  color: var(--c-text-main, #1a2b4c);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
  font-weight: 700;
}
.s-intro .c-profile-link:hover {
  color: var(--c-gold, #c5a059);
}

/* -----------------------------------------
   Key Facts
   ----------------------------------------- */
.s-intro .s-intro__keyfacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 8px 30px rgba(26, 43, 76, 0.04);
}

.s-intro .c-keyfact {
  text-align: center;
  position: relative;
}
.s-intro .c-keyfact:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(197, 160, 89, 0.3),
    transparent
  );
}

.s-intro .c-keyfact__icon {
  font-size: 1.1rem;
  color: var(--c-gold, #c5a059);
  margin-bottom: 0.6rem;
  display: block;
}
.s-intro .c-keyfact__number {
  font-family: "Didot", "Georgia", serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--c-text-main, #1a2b4c);
  line-height: 1;
  margin-bottom: 0.4rem;
  display: block;
  letter-spacing: -0.02em;
}
.s-intro .c-keyfact__number small {
  font-size: 0.5em;
  font-family: var(--ff-serif, "Noto Serif JP", serif);
  letter-spacing: 0;
}
.s-intro .c-keyfact__label {
  font-size: 0.85rem;
  color: #777;
  font-weight: 500;
  display: block;
  margin-bottom: 0.3rem;
}
.s-intro .c-keyfact__sub {
  font-size: 0.75rem;
  color: #aaa;
  display: block;
}

/* -----------------------------------------
   Responsive
   ----------------------------------------- */
@media (max-width: 960px) {
  .s-intro {
    padding: 6rem 0 4rem;
  }
  .s-intro .s-intro__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .s-intro .s-intro__shortcuts {
    border-radius: 20px;
    padding: 1.2rem;
    margin-bottom: 4rem;
  }
  .s-intro .c-dock-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 0.5rem;
  }
  .s-intro .s-intro__keyfacts {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }
  .s-intro .c-keyfact:not(:last-child)::after {
    display: none;
  }
  .s-intro .c-keyfact {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
  .s-intro .c-keyfact__icon {
    margin-bottom: 0;
  }
  .s-intro .c-keyfact__number {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .s-intro .c-intro-title {
    font-size: 1.8rem;
  }
  .s-intro .s-intro__shortcuts {
    border-radius: 16px;
    padding: 1rem;
  }
  .s-intro .c-dock-icon {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }
  .s-intro .c-dock-text {
    font-size: 0.7rem;
  }
  .s-intro .c-profile-card {
    flex-direction: column;
  }
  .s-intro .c-profile-img-area {
    width: 100%;
    height: auto;
    padding: 1.5rem 0 0;
  }
  .s-intro .c-profile-body {
    padding: 1rem 1.5rem 1.5rem;
    text-align: center;
  }
  .s-intro .c-profile-meta {
    justify-content: center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .s-intro .c-video-thumb,
  .s-intro .c-play-btn,
  .s-intro .c-dock-item,
  .s-intro .c-dock-icon {
    transition: none;
  }
}

/* -----------------------------------------
   Modal
   ----------------------------------------- */
.c-intro-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 22, 24, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  padding: var(--s-gutter);
}
.c-intro-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.c-intro-modal__content {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16/9;
  position: relative;
}
.c-intro-modal__btn {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

/* モーダル内のコンテンツ幅：画面に合わせて拡大 */
#js-intro-modal .intro-modal__content {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* プレイヤーの箱：16:9を保証 */
#js-intro-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* ←これが効くと勝ち */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

/* iframeは箱にベタ貼り */
#js-intro-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================
   Scope: .s-pillar__bleed
   Change: Remove negative-margin ownership from .s-pillar__board
   Date: 2025-12-31
   Reason:
   - Prevent horizontal scroll incidents caused by negative margins + vw layers
   - Keep visuals identical, reduce blast radius to one wrapper
   Notes:
   - If layout looks clipped, check overflow-x on .s-pillar__bleed first
   ========================================= */

/* =========================================
   Component: Pillar Section
   ========================================= */
.s-pillar {
  position: relative;
  padding: 140px 0;
  width: 100%;
  /* Avoid focus-ring/shadow clipping; still prevent horizontal scroll */
  overflow-x: hidden; /* fallback */
  overflow-y: visible;
}
@supports (overflow: clip) {
  .s-pillar {
    overflow-x: clip;
  }
}

/* Container */
.s-pillar .l-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  width: min(92%, 1440px);
  margin-inline: auto;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* -----------------------------------------
   Layer A: Background (Atmosphere) - Final Fix
   ----------------------------------------- */
.s-pillar__bg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 115%;
  width: 60vw;
  z-index: 0;
  pointer-events: none;

  opacity: 0.55;
  filter: sepia(25%) grayscale(50%) brightness(0.85) contrast(1.05)
    saturate(110%);
  transition: transform 0.5s ease-out;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 20%,
      #000 80%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      #000 15%,
      #000 85%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 20%,
      #000 80%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      #000 15%,
      #000 85%,
      transparent 100%
    );

  /* Intersection of two gradients only */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.s-pillar__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Directional positioning (apply only on desktop to avoid !important later) */
@media (min-width: 1121px) {
  .s-pillar--img-left .s-pillar__bg {
    right: -5%;
    left: auto;
  }
  .s-pillar--img-right .s-pillar__bg {
    left: -5%;
    right: auto;
  }
}

/* -----------------------------------------
   Layer B: Board (Hero Image)
   ----------------------------------------- */
.s-pillar__board {
  grid-row: 1;
  z-index: 1;
  position: relative;
  background: var(--c-bg);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow:
    0 12px 34px -10px rgba(0, 0, 0, 0.2),
    0 44px 120px -30px rgba(0, 0, 0, 0.22);
  container-type: size;
}

.c-hero-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-smooth);
}
.s-pillar:hover .c-hero-visual {
  transform: scale(1.03);
}

/* -----------------------------------------
   Layer C: Glass Panel (Content)
   ----------------------------------------- */
.c-glass-panel {
  grid-row: 1;
  z-index: 10;
  position: relative;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(40px) saturate(115%);
  -webkit-backdrop-filter: blur(40px) saturate(115%);
  border-radius: var(--r-xl);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 40px 120px -30px rgba(0, 0, 0, 0.22),
    inset 0 0 36px rgba(255, 255, 255, 0.7);
  padding: clamp(2.6rem, 2.8vw, 4.2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  container-type: inline-size;
}

.c-glass-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--g-gold-pale);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* -----------------------------------------
   Layout Strategy: Overlap & Direction
   ----------------------------------------- */
/* Case: Image Left / Text Right */
.s-pillar--img-left .s-pillar__board {
  grid-column: 1 / 10;
}
.s-pillar--img-left .c-glass-panel {
  grid-column: 8 / 12;
}

/* Case: Image Right / Text Left */
.s-pillar--img-right .s-pillar__board {
  grid-column: 4 / 13;
}
.s-pillar--img-right .c-glass-panel {
  grid-column: 2 / 6;
}

/* -----------------------------------------
   Internal Components
   ----------------------------------------- */
.c-section-title {
  font-family: var(--ff-serif);
  color: var(--c-text-main);
  margin-bottom: 1.5rem;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  white-space: nowrap;
}
.c-section-title__en {
  font-family: var(--ff-sans);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--g-gold-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Service Menu (Grid) */
.c-service-menu {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PC/SP共通で2カラム */
  gap: 1.5rem 2rem;
  margin-bottom: 3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 2rem;
}
.c-menu-item {
  padding-left: 1rem;
  border-left: 2px solid #c5a059;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.c-menu-head {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--ff-serif);
}
.c-menu-desc {
  font-size: 0.85rem;
  color: var(--c-muted);
}

/* -----------------------------------------
   Signage Overlay (pillar-3仕様)
   ----------------------------------------- */
.c-signage-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
}

/* Direction alignment + text order (deduped here) */
.s-pillar--img-left .c-signage-overlay {
  justify-content: flex-start;
}
.s-pillar--img-right .c-signage-overlay {
  justify-content: flex-end;
}

.s-pillar--img-left .c-sign-en {
  order: 0;
}
.s-pillar--img-left .c-sign-jp {
  order: 1;
}
.s-pillar--img-right .c-sign-en {
  order: 1;
}
.s-pillar--img-right .c-sign-jp {
  order: 0;
}

/* 1st layer: deep shadow */
.c-signage-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.3s;
}

.s-pillar--img-left .c-signage-overlay::before {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.7) 22%,
    rgba(0, 0, 0, 0.22) 55%,
    rgba(0, 0, 0, 0) 72%
  );
}
.s-pillar--img-right .c-signage-overlay::before {
  background: linear-gradient(
    -90deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.7) 22%,
    rgba(0, 0, 0, 0.22) 55%,
    rgba(0, 0, 0, 0) 72%
  );
}

/* 2nd layer: sheen / reflection */
.c-signage-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.s-pillar--img-left .c-signage-overlay::after {
  background:
    radial-gradient(
      80% 60% at 18% 30%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 28%,
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 45%
    );
}
.s-pillar--img-right .c-signage-overlay::after {
  background:
    radial-gradient(
      80% 60% at 82% 30%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 28%,
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(
      -90deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 45%
    );
}

.c-sign-container {
  position: relative;
  z-index: 11;
  height: 100%;
  padding: 6cqh;
  display: flex;
  align-items: flex-start;
  gap: 3cqh;
}

.c-sign-en,
.c-sign-jp {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.c-sign-en {
  font-family: var(--ff-serif);
  background: var(--g-gold-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(14px, 3.2cqh, 24px);
  font-weight: 700;
  text-transform: uppercase;
  border-left: 1px solid rgba(197, 160, 89, 0.5);
  padding-left: 1cqh;
}
.c-sign-jp {
  font-family: var(--ff-serif);
  font-size: clamp(24px, 7.5cqh, 60px);
  font-weight: 500;
  color: #fff;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}
.c-sign-jp .is-giant {
  font-size: 1.3em;
}

/* =========================================
   Responsive Strategy
   ========================================= */
@media (max-width: 1120px) {
  .s-pillar {
    padding: 60px 0;
  }

  .s-pillar .l-grid-12 {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    max-width: 640px;
  }

  .s-pillar__board {
    width: 100%;
    aspect-ratio: 16/11;
    border-radius: 0;
    margin: 0;
  }

  .c-glass-panel {
    width: 92%;
    margin-top: -60px;
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.9);
  }

  /* bg: neutralize direction without !important */
  .s-pillar__bg {
    width: 100%;
    left: 0;
    right: 0;
    opacity: 0.3;
  }

  /* SP: keep 2-column menu, only tighten gap */
  .c-service-menu {
    gap: 1rem;
  }
}

/* ============================================
   Scope: .s-shuttyou
   Former: .s-yatai-a
   Theme: The Label Sign (PC Vertical / SP Horizontal)
   ============================================ */

.s-shuttyou {
  --y-panel-warm: rgba(251, 250, 247, 0.9);
  --y-gold: #c5a059;

  position: relative;
  padding: var(--s-8) 0;

  /* 横スクロール事故対策（fallback → supports） */
  overflow-x: hidden;
  overflow-y: visible;
}
@supports (overflow: clip) {
  .s-shuttyou {
    overflow-x: clip;
  }
}

/* ----------------------------------
   Layout Wrapper
   ---------------------------------- */
.s-shuttyou__inner {
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .s-shuttyou__inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    min-height: 620px;
  }
}

/* ----------------------------------
   1. Visual (Rounded & Masked)
   ---------------------------------- */
.s-shuttyou__visual {
  position: relative;
  width: 100%;
  height: 320px;
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 768px) {
  .s-shuttyou__visual {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    height: 90%;
  }
}

.s-shuttyou__img-box {
  width: 100%;
  height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}

/* mask-image は対応差があるのでフォールバック → supports */
.s-shuttyou__img-box {
  float: none;
  /* fallback: 何もしない（＝ただの角丸トリミング） */
}

@supports (
  (mask-image: linear-gradient(#000, transparent)) or
    (-webkit-mask-image: linear-gradient(#000, transparent))
) {
  .s-shuttyou__img-box {
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }

  @media (min-width: 768px) {
    .s-shuttyou__img-box {
      mask-image: linear-gradient(to right, #000 75%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, #000 75%, transparent 100%);
    }
  }
}

/* 画像のトーン調整（ラベルを読ませる） */
.s-shuttyou__img-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 50%,
    rgba(251, 250, 247, 0.2)
  );
  pointer-events: none;
}

.s-shuttyou__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.95;
}

/* ----------------------------------
   2. Content (Warm Glass Panel)
   ---------------------------------- */
.s-shuttyou__content {
  position: relative;
  z-index: 2;
  margin-top: -80px;
  width: 100%;
}

@media (min-width: 768px) {
  .s-shuttyou__content {
    margin-top: 0;
    width: 55%;
  }
}

.s-shuttyou__panel {
  position: relative;
  background: var(--y-panel-warm);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: var(--s-6) var(--s-5);
}

/* backdrop-filter フォールバック：背景を少し濃くして可読性維持 */
.s-shuttyou__panel {
  background: rgba(251, 250, 247, 0.96);
}

@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .s-shuttyou__panel {
    background: var(--y-panel-warm);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

@media (min-width: 768px) {
  .s-shuttyou__panel {
    padding: var(--s-7) var(--s-8) var(--s-7) var(--s-7);
  }
}

/* ----------------------------------
   Catchphrase: Vertical Label (PC) / Horizontal (SP)
   ---------------------------------- */
.s-shuttyou__catch-aside {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

@media (min-width: 768px) {
  .s-shuttyou__catch-aside {
    position: absolute;
    top: var(--s-7);
    left: calc(var(--s-5) * -1.5);
    margin-bottom: 0;

    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-2);

    padding: var(--s-3) var(--s-2);
    z-index: 3;

    flex-direction: row-reverse;
  }

  /* blurはsupportsで */
  .s-shuttyou__catch-aside {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  @supports (
    (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
  ) {
    .s-shuttyou__catch-aside {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
  }
}

.s-shuttyou__gold-marker {
  display: block;
  background: var(--g-gold-main);
  border-radius: 9999px;
  width: 20px;
  height: 1px;
}

@media (min-width: 768px) {
  .s-shuttyou__gold-marker {
    width: 1px;
    height: 80px;
    position: relative;
  }
  .s-shuttyou__gold-marker::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -1px;
    width: 3px;
    height: 3px;
    background: var(--c-gold);
    border-radius: 50%;
  }
}

.s-shuttyou__catch {
  font-family: var(--ff-serif);
  color: var(--c-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  font-weight: 500;
}

@media (min-width: 768px) {
  .s-shuttyou__catch {
    writing-mode: vertical-rl;
    font-size: 0.9375rem;
    letter-spacing: 0.25em;
    color: var(--c-ink);
    padding: 0 var(--s-1);
  }
}

/* ----------------------------------
   Header & Titles
   ---------------------------------- */
.s-shuttyou__header {
  margin-bottom: var(--s-5);
}

.s-shuttyou__title-main {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-family: var(--ff-serif);
  color: var(--c-ink);
  line-height: 1.1;
}

.s-shuttyou__title-sub {
  font-size: 0.875rem;
  color: var(--c-muted);
  margin: var(--s-1) 0 var(--s-3);
  letter-spacing: 0.1em;
}

.s-shuttyou__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0;
  margin: 0;
}

.s-shuttyou__tags li {
  font-size: 0.75rem;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  padding: 3px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.4);
}

/* ----------------------------------
   Body Text & Actions
   ---------------------------------- */
.s-shuttyou__body {
  margin-bottom: var(--s-7);
}

.s-shuttyou__lead {
  font-size: 0.9375rem;
  line-height: 1.85;
  margin-bottom: var(--s-4);
  color: var(--c-text-main);
}

.s-shuttyou__trust {
  font-size: 0.875rem;
  line-height: 1.7;
  padding-left: var(--s-4);
  border-left: 1px solid var(--c-gold);
  color: var(--c-muted);
  margin-bottom: var(--s-5);
}

.s-shuttyou__tone {
  font-family: var(--ff-serif);
  font-size: 0.9375rem;
  color: var(--c-ink);
  text-align: center;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.s-shuttyou__action {
  text-align: center;
}

.s-shuttyou__note {
  margin-top: var(--s-3);
  font-size: 0.75rem;
  color: var(--c-muted);
}

/* ============================================
   Scope: .s-daily
   Mode: is-showcase (V1) / is-compact (V2)
   Theme: Daily Calligraphy (Goods + Guide Board)
   Switch: daily_section.json → display_mode
   ============================================ */

/* =========================================================
   ① Common Base (shared by both modes)
   ========================================================= */
.s-daily {
  position: relative;
  padding: 7rem 0 5rem;
  overflow-x: hidden;
  overflow-y: visible;
}
@supports (overflow: clip) {
  .s-daily {
    overflow-x: clip;
  }
}

/* Background visual */
.s-daily__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.s-daily__bg-img {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  filter: blur(5px);
}
.s-daily__bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: radial-gradient(circle at center, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 80%);
}
.s-daily__bg-wave {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.s-daily__bg-wave svg {
  width: 100%;
  height: 100%;
}

/* Common header elements */
.s-daily__title {
  font-family: var(--ff-serif);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  color: var(--c-ink);
  margin: 0;
  font-feature-settings: "palt";
}
.s-daily__title small {
  font-size: 0.55em;
  font-weight: 300;
  color: var(--c-muted);
  margin-left: 0.5em;
}
.s-daily__lead {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--c-text-main);
}

/* Coming Soon Badge (shared) */
.c-daily-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.2rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--y-gold);
  background: rgba(197, 160, 89, 0.08);
  border: 1px solid rgba(197, 160, 89, 0.2);
  letter-spacing: 0.04em;
}
.c-daily-badge i {
  font-size: 0.65rem;
}
.c-daily-badge--pill {
  margin-top: 0.6rem;
}

/* =========================================================
   Guide Card (shared component — both modes)
   ========================================================= */
.c-daily-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r-md);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.35s var(--ease-smooth),
    box-shadow 0.35s,
    border-color 0.35s;
  overflow: hidden;
}
.c-daily-guide:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
  border-color: rgba(197, 160, 89, 0.3);
}
.c-daily-guide::after {
  content: "→";
  position: absolute;
  right: 1.2rem;
  top: 1.2rem;
  font-size: 0.9rem;
  color: rgba(197, 160, 89, 0.35);
  transition: all 0.3s;
}
.c-daily-guide:hover::after {
  color: var(--y-gold);
  transform: translateX(3px);
}
.c-daily-guide:focus-visible {
  outline: 2px solid rgba(197, 160, 89, 0.75);
  outline-offset: 4px;
}

.c-daily-guide__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  background: rgba(197, 160, 89, 0.08);
  color: var(--y-gold);
  transition: all 0.3s;
}
.c-daily-guide:hover .c-daily-guide__icon {
  background: var(--c-ink);
  color: #fff;
}

.c-daily-guide__title {
  font-family: var(--ff-serif);
  font-size: 1rem;
  color: var(--c-ink);
  font-weight: 600;
  margin: 0 0 0.3rem;
  font-feature-settings: "palt";
}
.c-daily-guide__title small {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--c-muted);
  margin-top: 2px;
}
.c-daily-guide__sub {
  font-size: 0.72rem;
  color: var(--c-muted);
  margin: 0 0 0.8rem;
}
.c-daily-guide__text {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* =========================================================
   ② SHOWCASE MODE (.is-showcase) — Full-width, immersive V1
   ========================================================= */
.s-daily.is-showcase .s-daily__header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 4rem;
}
.s-daily.is-showcase .s-daily__kicker {
  display: inline-block;
  font-family: "Didot", serif;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  color: var(--y-gold);
  font-weight: bold;
  margin-bottom: 0.8rem;
}
.s-daily.is-showcase .s-daily__title {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}
.s-daily.is-showcase .s-daily__lead {
  max-width: 540px;
  margin: 0 auto;
}

/* Showcase area */
.s-daily__showcase {
  position: relative;
  z-index: 2;
  margin-bottom: 5rem;
}

/* Showcase Grid */
.c-daily-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

/* Showcase Card */
.c-daily-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.4s var(--ease-smooth);
}
.c-daily-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(26, 43, 76, 0.1);
}

.c-daily-card__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-bg-alt, #faf8f5);
}
.c-daily-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.c-daily-card:hover .c-daily-card__visual img {
  transform: scale(1.05);
}

.c-daily-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1rem 0.8rem;
  background: linear-gradient(to top, rgba(26, 43, 76, 0.7), transparent);
  color: #fff;
}
.c-daily-card__name {
  font-family: var(--ff-serif);
  font-size: 0.95rem;
  font-weight: bold;
  margin: 0 0 0.2rem;
}
.c-daily-card__desc {
  font-size: 0.72rem;
  opacity: 0.85;
  margin: 0;
}

.c-daily-card__body {
  padding: 1rem;
  text-align: center;
}
.c-daily-card__label {
  font-family: var(--ff-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 0.3rem;
}
.c-daily-card__sub {
  font-size: 0.72rem;
  color: var(--c-muted);
  margin: 0;
}

/* Hero card spans 2 cols */
.c-daily-card--hero {
  grid-column: span 2;
  grid-row: span 2;
}
.c-daily-card--hero .c-daily-card__visual {
  aspect-ratio: auto;
  height: 100%;
}
.c-daily-card--hero .c-daily-card__overlay {
  padding: 3rem 1.5rem 1.2rem;
}
.c-daily-card--hero .c-daily-card__name {
  font-size: 1.15rem;
}

/* Teaser Message Box */
.c-daily-teaser {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-md);
  border: 1px solid rgba(197, 160, 89, 0.15);
  max-width: 700px;
  margin: 0 auto;
}
.c-daily-teaser__text {
  font-size: 0.9rem;
  color: #555;
  margin: 0 0 1rem;
  line-height: 1.8;
}
.c-daily-teaser__text strong {
  color: var(--c-ink);
}
.c-daily-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 2rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--c-ink);
  text-decoration: none;
  transition: all 0.3s;
  border: none;
}
.c-daily-teaser__cta:hover {
  background: #2a3d64;
  box-shadow: 0 4px 15px rgba(26, 43, 76, 0.25);
  transform: translateY(-1px);
}
.c-daily-teaser__cta i {
  font-size: 0.75rem;
}

/* Divider */
.s-daily__divider {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 2;
}
.s-daily__divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(197, 160, 89, 0.3),
    transparent
  );
}
.s-daily__divider-icon {
  font-size: 0.85rem;
  color: var(--y-gold);
  opacity: 0.6;
}

/* Guide Board (showcase) */
.s-daily__guide {
  position: relative;
  z-index: 2;
}
.s-daily__guide-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.s-daily__guide-kicker {
  display: block;
  font-family: "Didot", serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--y-gold);
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.s-daily__guide-title {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  color: var(--c-ink);
  margin: 0 0 0.5rem;
  font-feature-settings: "palt";
}
.s-daily__guide-lead {
  font-size: 0.85rem;
  color: var(--c-muted);
  max-width: 450px;
  margin: 0 auto;
}

/* Guide cards grid (showcase: 3-col) */
.c-daily-guides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

/* =========================================================
   ③ COMPACT MODE (.is-compact) — 2-column, refined V2
   ========================================================= */
.s-daily.is-compact .s-daily__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .s-daily.is-compact .s-daily__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

/* Compact header */
.s-daily.is-compact .s-daily__header {
  margin-bottom: 2rem;
}
.s-daily__title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.s-daily__gold-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--y-gold);
  flex-shrink: 0;
}
.s-daily.is-compact .s-daily__lead {
  margin-bottom: 0.5rem;
}

/* Product Grid: 2×2 */
.c-daily-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Product Card (Compact) */
.c-daily-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.35s var(--ease-smooth),
    box-shadow 0.35s,
    border-color 0.35s;
}
.c-daily-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26, 43, 76, 0.09);
  border-color: rgba(197, 160, 89, 0.3);
}
.c-daily-item:focus-visible {
  outline: 2px solid rgba(197, 160, 89, 0.8);
  outline-offset: 3px;
}

.c-daily-item__img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--c-bg-alt, #faf8f5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.c-daily-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.c-daily-item:hover .c-daily-item__img img {
  transform: scale(1.08);
}

.c-daily-item__body {
  flex: 1;
  min-width: 0;
}
.c-daily-item__name {
  font-family: var(--ff-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 0.25rem;
}
.c-daily-item__desc {
  font-size: 0.75rem;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}

/* CTA Link Button */
.c-daily-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.6rem;
  border: 1.5px solid rgba(26, 43, 76, 0.15);
  border-radius: 100px;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.5);
}
.c-daily-cta:hover {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
  box-shadow: 0 4px 12px rgba(26, 43, 76, 0.15);
}
.c-daily-cta__arrow {
  font-size: 0.75rem;
  transition: transform 0.3s;
}
.c-daily-cta:hover .c-daily-cta__arrow {
  transform: translateX(3px);
}

/* --- Side panel (compact mode) --- */
.s-daily.is-compact .s-daily__side-header {
  margin-bottom: 2rem;
}
.s-daily__side-kicker {
  display: block;
  font-family: "Didot", serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(197, 160, 89, 0.9);
  margin-bottom: 0.4rem;
  font-weight: bold;
}
.s-daily.is-compact .s-daily__side-title {
  position: relative;
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  color: var(--c-ink);
  margin: 0 0 0.6rem;
  padding-left: 14px;
  font-feature-settings: "palt";
}
.s-daily.is-compact .s-daily__side-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 3px;
  height: 1.1em;
  border-radius: 2px;
  background: var(--y-gold);
}
.s-daily__side-lead {
  font-size: 0.82rem;
  color: var(--c-muted);
  line-height: 1.6;
}

/* Side card stack */
.s-daily.is-compact .s-daily__side-cards {
  display: grid;
  gap: 1rem;
}
@media (min-width: 600px) and (max-width: 1023px) {
  .s-daily.is-compact .s-daily__side-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Guide card row variant for compact mode */
.c-daily-guide--row {
  flex-direction: row;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: #fff;
  border-left: 3px solid rgba(197, 160, 89, 0.18);
}
.c-daily-guide--row:hover {
  border-color: rgba(197, 160, 89, 0.35);
  border-left-color: rgba(197, 160, 89, 0.5);
}
.c-daily-guide--row::after {
  content: "↗";
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.15);
}
.c-daily-guide--row:hover::after {
  transform: translate(1px, -1px);
}
.c-daily-guide--row .c-daily-guide__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  margin-bottom: 0;
  flex-shrink: 0;
}
.c-daily-guide--row .c-daily-guide__content {
  flex: 1;
  min-width: 0;
}
.c-daily-guide--row .c-daily-guide__title {
  font-size: 0.92rem;
  line-height: 1.3;
}
.c-daily-guide--row .c-daily-guide__text {
  font-size: 0.78rem;
  color: #777;
  line-height: 1.55;
  margin: 0.4rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Guide board bleed panel (compact, PC only) */
@media (min-width: 1024px) {
  .s-daily.is-compact .s-daily__side {
    position: relative;
    padding: 2.5rem 2.5rem 2.5rem 2rem;
  }
  .s-daily.is-compact .s-daily__side::before {
    content: "";
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: calc(50% - 50vw);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    border-radius: var(--r-xl) 0 0 var(--r-xl);
    pointer-events: none;
    z-index: -1;
  }
  .s-daily.is-compact .s-daily__side > * {
    position: relative;
    z-index: 1;
  }
  .s-daily.is-compact .s-daily__side-header {
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid rgba(197, 160, 89, 0.22);
  }
}

/* =========================================================
   ④ Responsive (Both modes)
   ========================================================= */
@media (max-width: 1023px) {
  .s-daily {
    padding: 5rem 0 4rem;
  }

  /* compact: stack */
  .s-daily.is-compact .s-daily__inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

@media (max-width: 960px) {
  /* showcase: 2-col grid */
  .c-daily-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .c-daily-card--hero {
    grid-column: span 2;
    grid-row: span 1;
  }
  .c-daily-card--hero .c-daily-card__visual {
    aspect-ratio: 16 / 9;
  }

  /* showcase guide: stack */
  .c-daily-guides {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
}

@media (max-width: 600px) {
  /* compact: single col */
  .c-daily-items {
    grid-template-columns: 1fr;
  }
  .c-daily-item__img {
    width: 72px;
    height: 72px;
  }

  /* showcase: keep 2-col but adjust */
  .c-daily-grid {
    gap: 0.8rem;
  }
  .s-daily__title {
    font-size: 1.3rem;
  }
  .c-daily-card__name {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-daily-card,
  .c-daily-item,
  .c-daily-guide,
  .c-daily-card__visual img,
  .c-daily-item__img img {
    transition: none;
  }
}

/* ============================================
   INTRO: Trust Badges & Shortcuts (Added 2026-02-18)
   ============================================ */

/* Trust Grid */
.s-intro__trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .s-intro__trust-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Trust Badge Card */
.c-trust-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--c-surface, #fff);
  padding: 20px 24px;
  border-radius: var(--r-md, 8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.c-trust-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  border-color: rgba(212, 175, 55, 0.3); /* Gold hint */
}

.c-trust-badge__icon {
  flex-shrink: 0;
  font-size: 2rem;
  color: var(--c-gold);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--c-bg-sub, #f9f9f9);
  border-radius: 50%;
}

.c-trust-badge__content {
  display: flex;
  flex-direction: column;
}

.c-trust-badge__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-navy-dark);
  margin-bottom: 4px;
  font-family: var(--ff-serif);
  line-height: 1.2;
}

.c-trust-badge__text {
  font-size: 0.8rem;
  color: var(--c-muted);
  line-height: 1.4;
}

/* Intro Text Revamp */
.c-intro-text {
  font-size: 1rem;
  line-height: 2;
  color: var(--c-text-main);
  margin-bottom: 40px;
  text-align: justify;
}

/* Service Shortcuts */
.c-service-shortcuts {
  margin-top: 40px;
  padding: 24px;
  background: var(--c-surface-2, #fbfaf7);
  border-radius: var(--r-lg, 12px);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.c-service-shortcuts__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-muted);
  margin-bottom: 16px;
  text-align: center;
  font-family: var(--ff-sans);
  letter-spacing: 0.05em;
}
.c-service-shortcuts__label::before,
.c-service-shortcuts__label::after {
  content: " - ";
  opacity: 0.3;
}

.c-service-shortcuts__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.c-shortcut-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 50px;
  color: var(--c-text-main);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.c-shortcut-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); /* Float effect */
  border-color: var(--c-gold);
  color: var(--c-navy-dark);
  background: #fff;
}

/* Icon centering fix */
.c-shortcut-btn i {
  color: var(--c-gold);
  font-size: 1.1em;
  transition: transform 0.2s;
}
.c-shortcut-btn:hover i {
  transform: scale(1.1);
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  .c-service-shortcuts {
    padding: 20px 16px;
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
  }
  .c-shortcut-btn {
    width: 100%; /* Stack on mobile */
    justify-content: center;
  }
}

/* ============================================
   Clickable Service Menu (Added 2026-02-18)
   ============================================ */
a.c-menu-item {
  text-decoration: none;
  color: inherit;
  display: block;
  transition:
    background-color 0.3s,
    transform 0.3s;
  cursor: pointer;
}
a.c-menu-item:hover {
  background-color: rgba(197, 160, 89, 0.1);
  transform: translateX(4px);
}
a.c-menu-item:hover .c-menu-head {
  color: var(--c-gold);
}

/* ============================================
   Home FAQ Section (Added 2026-02-18)
   ============================================ */
.s-home-faq {
  padding: 80px 0;
  background: var(--c-bg-sub, #f9f9f9);
}
.s-home-faq__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.s-home-faq__header {
  text-align: center;
  margin-bottom: 40px;
}
.s-home-faq__title {
  font-size: 1.8rem;
  font-family: var(--ff-serif);
  color: var(--c-navy-dark);
  margin-bottom: 10px;
}
.s-home-faq__sub {
  font-size: 0.9rem;
  color: var(--c-muted);
}

.c-home-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-home-faq-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.c-home-faq-item__q {
  padding: 20px;
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.c-home-faq-item__q::before {
  content: "Q.";
  color: var(--c-gold);
}
.c-home-faq-item__a {
  padding: 0 20px 20px 20px; /* Hidden via simple CSS or handled by JS/Details? */
  /* Using <details> in HTML constitutes simpler implementation */
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-text-main);
  border-top: 1px solid #f0f0f0;
  margin-top: 0;
  padding-top: 16px;
  padding-left: 45px; /* Alignment */
}

/* Using details/summary styling */
details.c-home-faq-item[open] .c-home-faq-item__q {
  border-bottom: 1px solid #f0f0f0;
}
details.c-home-faq-item .c-home-faq-item__a {
  border-top: none; /* Reset if details used */
}

.s-home-faq__btn {
  margin-top: 40px;
  text-align: center;
}
/* ============================================
   SP Optimizations (2026-02-20)
   ============================================ */
@media (max-width: 768px) {
  /* Intro Section: Reduce padding */
  .s-intro {
    padding: 6rem 0 4rem;
  }

  .s-intro .c-intro-title {
    font-size: 1.8rem; /* Scale down title */
  }

  .s-intro .c-dock-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 cols on SP */
    gap: 1.5rem 0.6rem;
  }

  .s-intro .s-intro__grid {
    grid-template-columns: 1fr; /* Stack layout */
    gap: 3rem;
  }

  .s-intro .s-intro__keyfacts {
    grid-template-columns: 1fr; /* Stack keyfacts */
    gap: 2rem;
    padding: 2rem;
  }

  .s-intro .c-keyfact:not(:last-child)::after {
    display: none; /* Remove vertical divider */
  }

  /* Hero Slider Text (SP Only): Sequential Fade for Slide 0 */
  /* Group 1: 伝統を未来へ... */
  .c-slide[data-index="0"].is-active
    .c-vertical-copy:not(.c-vertical-copy--sub)
    .c-vertical-copy__line {
    animation: heroTextGroup1 8s linear forwards;
    opacity: 0;
    transform: translateY(20px);
    transition: none; /* Override default transition */
  }

  /* Group 2: 筆耕ドットコム... */
  .c-slide[data-index="0"].is-active
    .c-vertical-copy--sub
    .c-vertical-copy__line {
    animation: heroTextGroup2 8s linear forwards;
    opacity: 0;
    transform: translateY(20px);
    transition: none;
  }

  /* Adjust position for sub copy on SP to center it */
  .c-vertical-copy--sub {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@keyframes heroTextGroup1 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  45% {
    opacity: 1;
    transform: translateY(0);
  }
  55% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes heroTextGroup2 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  95% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Switchable Hero Header (2026-02-21)
   3 patterns: traditional / smart / anchored
   Controlled via data-hero-nav attribute on <body>
   ============================================ */

/* -----------------------------------------
   Pattern B: Smart Header
   Hero内では完全に隠し、通過後にスライドインで出現
   ----------------------------------------- */
[data-hero-nav="smart"] .l-header .c-glass-capsule {
  transform: translateY(-120%);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease;
}
[data-hero-nav="smart"] .l-header.is-hero-passed .c-glass-capsule {
  transform: translateY(0);
  opacity: 1;
}

/* -----------------------------------------
   Pattern C: Anchored Header
   ヒーロー最下部に配置 → スクロールで上部Sticky化
   ----------------------------------------- */

/* コンソール（スライダー操作）を上に逃がしてヘッダーとの被りを解消 */
[data-hero-nav="anchored"] .s-hero__console-wrap {
  bottom: 100px; /* 40px → 100px: ヘッダー分だけ上に退避 */
}
[data-hero-nav="anchored"] .s-hero__scroll-text {
  display: none; /* ヘッダーが下部にあるためスクロール案内は不要 */
}

/* 初期状態: ヒーロー内の下端に密着配置（absolute化） */
[data-hero-nav="anchored"] .l-header {
  position: absolute;
  top: auto;
  bottom: 0;
  height: auto;
  z-index: 9000;
}
[data-hero-nav="anchored"] .l-header .c-glass-capsule {
  margin-top: 0;
  margin-bottom: 0; /* 下端にぴったり密着 */
  border-radius: 9999px 9999px 0 0; /* 上だけ丸く、下は画面端にフラット */
  /* 初期状態はやや透明にしてヒーローに馴染ませる */
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
  border-bottom: none; /* 下端が画面端なのでボーダー不要 */
}

/* ヒーロー通過後: 上部固定に変化 */
[data-hero-nav="anchored"] .l-header.is-hero-passed {
  position: fixed;
  top: 0;
  bottom: auto;
  animation: headerSlideDown 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
}
[data-hero-nav="anchored"] .l-header.is-hero-passed .c-glass-capsule {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(255, 255, 255, 0.8);
  border-radius: 9999px; /* sticky時は完全な丸型に復帰 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.8); /* ボーダーも復帰 */
}

/* ヒーローに戻ったとき（上スクロール時）のリバース */
[data-hero-nav="anchored"] .l-header:not(.is-hero-passed) {
  animation: none;
}

/* SP対応: anchored パターンのモバイル調整 */
@media (max-width: 768px) {
  [data-hero-nav="anchored"] .s-hero__console-wrap {
    bottom: 80px; /* SPではやや控えめに */
  }
  [data-hero-nav="anchored"] .l-header .c-glass-capsule {
    margin-bottom: 0;
    height: 56px;
    padding: 0 16px;
  }
  [data-hero-nav="anchored"] .l-header.is-hero-passed .c-glass-capsule {
    margin-top: 8px;
    height: 56px;
    border-radius: 9999px; /* sticky時は元の丸型に戻す */
  }
}

/* Header slide-down animation */
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}