@charset "UTF-8";

/* ============================================================
   ABOUT US ページ固有
   ============================================================ */
.about-layout { position: relative; }
.about-content { position: relative; }
.about-nav ul { display: block; }
.about-nav a { position: relative; display: inline-block; font-family: "Zen Old Mincho", serif; color: #8a90a0; white-space: nowrap; transition: color 0.3s ease; }
.about-nav a::before { content: ""; position: absolute; top: 50%; left: 0px; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-brand); transform: translateY(-50%); opacity: 0.4; transition: opacity 0.3s ease; }
.about-nav a.about-nav__dot--discs::before    { background: linear-gradient(135deg, #3ca0f5 0%, #38c8d8 100%); }
.about-nav a.about-nav__dot--rings::before    { background: linear-gradient(135deg, #c13bbf 0%, #8b5cf0 100%); }
.about-nav a.about-nav__dot--infinity::before { background: linear-gradient(135deg, #38bec8 0%, #30e06a 100%); }
.about-nav a.about-nav__dot--orbit::before    { background: linear-gradient(135deg, #e3489b 0%, #f7a14e 100%); }
.about-nav a:hover::before, .about-nav a.is-current::before { opacity: 1; }
.about-nav a:hover { color: #11192f; }
.about-nav a.is-current { color: #11192f; font-weight: 700; }

.about-block__head { display: flex; flex-direction: column; align-items: flex-start; }
.about-block__en { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.08em; color: #8a90a0; line-height: 1; }
.about-block__bar { display: none; }
.about-block__ja { font-family: "Zen Old Mincho", serif; font-weight: 600; color: #11192f; line-height: 1.2; }
.about-block__lead { font-family: "Zen Old Mincho", serif; font-weight: 600; color: #11192f; }
.about-block p { color: #444b5e; }

/* 本文の段落は1つずつ時間差で（ばらばらに）フェードイン */
.about-block__inner > p.fade-in:nth-of-type(2) { transition-delay: 0.07s; }
.about-block__inner > p.fade-in:nth-of-type(3) { transition-delay: 0.14s; }
.about-block__inner > p.fade-in:nth-of-type(4) { transition-delay: 0.21s; }
.about-block__inner > p.fade-in:nth-of-type(5) { transition-delay: 0.28s; }
.about-block__inner > p.fade-in:nth-of-type(6) { transition-delay: 0.35s; }
.about-block__inner > p.fade-in:nth-of-type(7) { transition-delay: 0.42s; }

/* ============================================================
   ページ全体で途切れない共通の背景アニメーション層
   （page-hero〜お問い合わせまで1枚の動く背景でつなぐ）
   ============================================================ */
body { background: #f5f0f7; }
body::before {
  content: "";
  position: fixed;
  inset: 0px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 44% at 20% 16%, rgba(213, 180, 226, 0.55), rgba(213,180,226,0) 66%),
    radial-gradient(44% 48% at 82% 24%, rgba(176, 199, 240, 0.55), rgba(176,199,240,0) 66%),
    radial-gradient(46% 50% at 26% 70%, rgba(186, 224, 232, 0.5), rgba(186,224,232,0) 70%),
    radial-gradient(50% 54% at 78% 80%, rgba(232, 186, 208, 0.5), rgba(232,186,208,0) 70%),
    #f5f0f7;
  animation: aboutBgDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes aboutBgDrift {
  from { transform: scale(1) translate(0px, 0px); }
  to   { transform: scale(1.1) translate(-24px, -18px); }
}

/* 各セクションの個別背景は透過させ、共通層を途切れさせない */
.page-hero { background: transparent; }
.page-hero::before { display: none; }
.breadcrumb { background: transparent; }
.section-contact { background: transparent; }

/* ============================================================
   PC（min-width: 768px）
   ============================================================ */
@media (min-width: 768px) {
  .about-layout { padding: 16px 0px 0px 0px; }
  /* 左サイドナビ（中央寄せコンテナの左に固定オーバーレイ・背景帯より前面に） */
  .about-nav-rail { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 1200px; max-width: 100%; height: 100%; pointer-events: none; z-index: 20; }
  .about-nav { position: sticky; top: 140px; width: 280px; margin: 72px 0px 0px 0px; padding: 0px 0px 0px 40px; pointer-events: auto; }
  .about-nav ul { display: block; }
  .about-nav li { margin: 0px 0px 20px 0px; }
  .about-nav a { font-size: 14px; padding: 0px 0px 0px 20px; }

  .about-block { padding: 72px 0px 72px 0px; scroll-margin-top: 96px; }
  .about-block__inner { max-width: 1200px; margin: 0px auto 0px auto; padding: 0px 40px 0px 340px; }
  .about-block__head { margin: 0px 0px 40px 0px; }
  .about-block__en { font-size: 32px; }
  .about-block__ja { font-size: 34px; }
  .about-block__lead { font-size: 26px; margin: 0px 0px 40px 0px; line-height: 1.7; }
  .about-block p { font-size: 16px; margin: 0px 0px 24px 0px; line-height: 2.1; }
}

/* ============================================================
   SP（max-width: 767px）
   ============================================================ */
@media (max-width: 767px) {
  .about-layout { padding: 32px 0px 0px 0px; }
  .about-nav-rail { display: none; }

  .about-block { padding: 40px 0px 40px 0px; scroll-margin-top: 72px; }
  .about-block__inner { padding: 0px 24px 0px 24px; }
  .about-block__head { margin: 0px 0px 24px 0px; }
  .about-block__en { font-size: 18px; }
  .about-block__ja { font-size: 22px; }
  .about-block__lead { font-size: 18px; margin: 0px 0px 24px 0px; line-height: 1.7; }
  .about-block p { font-size: 14px; margin: 0px 0px 16px 0px; line-height: 1.95; }
}

/* tintセクションを product-section--tint と同じ無地バンドに */
.about-block--tint { background: #f3f1fa; }