/* ─────────────────────────────────────────
   AINAGI Visual Database — CSS Variables
───────────────────────────────────────── */
:root {
  --white:     #FAF7F2;
  --deep:      #1C1917;
  --gray:      #8A8680;
  --gray-light:#C4C1BC;
  --accent:    #A0695B;

  --font-jp:   'Noto Serif JP', 'Yu Mincho', '游明朝', serif;
  --font-en:   'Cormorant Garamond', Georgia, serif;

  /* Time Architecture — T = 1200ms (人間の遅い動作基準) */
  --T:          1200ms;
  --T-hover:    480ms;   /* T×0.4 */
  --T-appear:   1200ms;  /* T×1   */
  --T-fade:     1800ms;  /* T×1.5 */
  --T-silence:  2400ms;  /* T×2   */
  --T-delay:    3600ms;  /* T×3 — headline出現 */
  --T-breath:   4800ms;  /* T×4   */
  --T-logo:     9600ms;  /* T×8 — AINAGI出現 */
  --T-drift:   14400ms;  /* T×12 — grain drift */
  --glow-min:   0.58;
  --glow-max:   1.00;

  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-breath:     cubic-bezier(0.45, 0, 0.55, 1);
  --ease-unhurried:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─────────────────────────────────────────
   Reset & Base
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--white);
  color: var(--deep);
  font-family: var(--font-jp);
  overflow-x: hidden;
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.fade-out {
  opacity: 0;
}

/* ─────────────────────────────────────────
   Grain Overlay — 全画面に微細ノイズ
───────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grainDrift var(--T-drift) linear infinite; /* delay: 0 — 先在性 */
}

/* ─────────────────────────────────────────
   Navigation — 極めて控えめ
───────────────────────────────────────── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 2rem 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: normal;
}

/* 画像ロゴ — 夜の空間に既に存在している記号 */
.nav-brand {
  position: fixed;
  top: 2.6rem;
  left: 2.8rem;
  z-index: 12;
  display: flex;
  align-items: center;
  pointer-events: auto;
  opacity: 0;
  animation: logoPresenceReveal 2400ms cubic-bezier(0.16, 1, 0.3, 1) 4800ms forwards;
}

.ainagi-logo {
  width: 148px;
  height: auto;
  display: block;
  opacity: 0.46;
  filter:
    brightness(1.32)
    sepia(6%)
    contrast(0.92);
  transition:
    opacity 1800ms ease,
    filter  1800ms ease;
  will-change: opacity, filter;
}

.ainagi-logo:hover {
  opacity: 0.58;
  filter:
    brightness(1.42)
    sepia(8%)
    contrast(0.94);
}

.nav-links {
  position: fixed;
  top: 2.8rem;
  right: 3rem;
  display: flex;
  gap: 2.2rem;
  list-style: none;
  z-index: 12;
  opacity: 0;
  transform: translateY(-12px);
  animation: navPresenceReveal 1800ms cubic-bezier(0.16, 1, 0.3, 1) 6080ms forwards;
}

.nav-links a {
  font-family: var(--font-en);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  color: #F5F0EB;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.72;
  text-shadow: 0 1px 10px rgba(12,11,10,0.52);
  transition: opacity 800ms ease, color 800ms ease;
}

.nav-links a:hover {
  opacity: 1;
  color: #F5F0EB;
}

/* 27-G.7: ページ内リンク — fixed nav被り防止 */
#policy,
#work,
#contact {
  scroll-margin-top: 1.2rem;
}

/* 27-G.6: Nav文字色切替 — 白背景Section可読性 */
nav.nav-dark .nav-links a {
  color: #2C2520;
  text-shadow: none;
  opacity: 0.68;
}
nav.nav-dark .nav-links a:hover {
  color: #1A1410;
  opacity: 1;
}

/* ─────────────────────────────────────────
   HERO SECTION
───────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  background: #0f0e0d;
}

/* Hero底部：下に空間が続いている — 重力 */
.hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: linear-gradient(
    to bottom,
    rgba(250,247,242,0),
    rgba(250,247,242,0.12)
  );
  z-index: 3;
  pointer-events: none;
}

/* 右側暗部：書棚・情報量を沈める */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      rgba(15,14,13,0) 42%,
      rgba(15,14,13,0.28) 68%,
      rgba(15,14,13,0.58) 100%
    );
  z-index: 2;
}

/* 背景：ainagi-night-memory-hero.png */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/ainagi-night-memory-hero.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Overlay：月光と木机の質感を残す最小の暗さ */
.hero-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15,14,13,0.34);
}

/* Ambient Glow：下重力設計 — 光は下から、密度は左下に */
.hero-presence {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 100% 60% at 5% 92%,
      rgba(195,162,112,0.28) 0%,
      rgba(175,142,95,0.10) 50%,
      transparent 78%),
    radial-gradient(ellipse 50% 35% at 0% 55%,
      rgba(185,155,105,0.08) 0%,
      transparent 65%);
  animation: glowBreathe var(--T-logo) ease-in-out forwards; /* delay: 0 — 初回のみ実行し、覚醒状態で静かに停止 */
}

/* ビルのシルエット：非表示 */
.hero-silhouette {
  display: none;
}

/* ─────────────────────────────────────────
   Hero Content
───────────────────────────────────────── */
.hero-content {
  position: relative;
  z-index: 10;
  padding: 42vh 0 0 8vw;
  max-width: 900px;
}

/* メインコピー — 訪問者が来て400ms後から知覚され始める */
.hero-main {
  font-family: var(--font-jp);
  font-size: clamp(72px, 8.75vw, 113px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: 0.11em;
  color: rgba(247,245,242,0.96);
  margin-top: -7vh;
  margin-bottom: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  opacity: 1;
}

/* 逐次知覚モデル — 一文字ずつAIが生成するように順に現れる */
.char {
  display: inline-block;
  will-change: opacity, filter;
}

/* A  */ .c1 { animation: char-resolve-dim   840ms cubic-bezier(0.2, 0, 0.5, 1)  280ms both; }
/* I  */ .c2 { animation: char-resolve-dim   840ms cubic-bezier(0.2, 0, 0.5, 1)  560ms both; }
/* を */ .c3 { animation: char-resolve       900ms cubic-bezier(0.2, 0, 0.5, 1)  840ms both; }
/* 、 */ .c4 { animation: char-resolve       760ms cubic-bezier(0.2, 0, 0.5, 1) 1060ms both; }
/* 急 */ .c5 { animation: char-resolve       960ms cubic-bezier(0.2, 0, 0.5, 1) 1400ms both; }
/* が */ .c6 { animation: char-resolve       900ms cubic-bezier(0.2, 0, 0.5, 1) 1680ms both; }
/* な */ .c7 { animation: char-resolve       900ms cubic-bezier(0.2, 0, 0.5, 1) 1960ms both; }
/* い */ .c8 { animation: char-resolve       900ms cubic-bezier(0.2, 0, 0.5, 1) 2240ms both; }
/* 。 */ .c9 { animation: char-resolve-quiet 840ms cubic-bezier(0.2, 0, 0.5, 1) 2560ms both; }

/* 2行目の微細横ズレ — 分断ではなく呼吸 */
.hero-line-2 {
  display: inline-block;
  padding-left: 0.08em;
}

/* 旧サブコピー — 非表示維持 */
.hero-sub {
  display: none;
}

/* Subline — headlineの残響。補足文ではない */
.hero-subline {
  margin-top: 1.8rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.55rem, 2.1vw, 2.1rem);
  font-weight: 300;
  letter-spacing: 0.07em;
  line-height: 1.5;
  color: #D8D3CB;
  opacity: 0;
  filter: blur(3px);
  animation:
    heroSubPresence 2400ms
    cubic-bezier(0.16, 1, 0.3, 1)
    5760ms
    forwards;
  will-change: opacity, filter;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 逐次知覚 — 3段階 */

/* 標準：を・、・急・が・な・い */
@keyframes char-resolve {
  0%   { opacity: 0;    filter: blur(5px);   }
  42%  { opacity: 0.52; filter: blur(1.4px); }
  100% { opacity: 0.96; filter: blur(0.2px); }
}

/* 視線起点：A・I — 白密度を抑え、空間に溶ける */
@keyframes char-resolve-dim {
  0%   { opacity: 0;    filter: blur(5px);   }
  42%  { opacity: 0.44; filter: blur(1.6px); }
  100% { opacity: 0.82; filter: blur(0.5px); }
}

/* 自然な句点：。— 演出記号にならない */
@keyframes char-resolve-quiet {
  0%   { opacity: 0;    filter: blur(5px);   }
  42%  { opacity: 0.36; filter: blur(1.8px); }
  100% { opacity: 0.65; filter: blur(0.8px); }
}

@keyframes logoPresenceReveal {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes navPresenceReveal {
  0% {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(6px);
  }
  100% {
    opacity: 0.82;
    transform: translateY(0px);
    filter: blur(0px);
  }
}

@keyframes glowBreathe {
  0%   { opacity: 0.58; }  /* 深い谷 — 光は眠っている */
  100% { opacity: 1.00; }  /* 頂点 — 光は覚醒している */
}

@keyframes grainDrift {
  0%   { transform: translate(0px, 0px); }
  100% { transform: translate(2px, -2px); }
}

/* ─────────────────────────────────────────
   Scroll Presence — 流星が部屋に落ちてくる
───────────────────────────────────────── */
.scroll-presence {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  width: 1px;
  height: 100px;
  overflow: hidden;
  z-index: 6;
  pointer-events: none;
  animation: scrollPresenceDrop 1000ms cubic-bezier(0, 0, 0.2, 1) 8400ms both;
}

.scroll-presence .scroll-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(245,240,235,0)    0%,
    rgba(245,240,235,0.12) 30%,
    rgba(245,240,235,0.65) 72%,
    rgba(245,240,235,0.82) 100%
  );
  animation: scrollLineFall 3200ms linear 8400ms both infinite;
}

/* 画面上から高速落下 — 入った瞬間に光り、定位置に止まる */
@keyframes scrollPresenceDrop {
  0%   { transform: translateX(-50%) translateY(calc(-100vh - 60px)); opacity: 0;    }
  7%   { opacity: 0.72; }
  100% { transform: translateX(-50%) translateY(0);                  opacity: 0.58; }
}

/* コンテナ内をグラデーションが上→下へ通過 — 両端invisible でloop継ぎ目なし */
@keyframes scrollLineFall {
  from { transform: translateY(-100%); }
  to   { transform: translateY(200%);  }
}

@keyframes heroSubPresence {
  0%   { opacity: 0;    filter: blur(3px); }
  100% { opacity: 0.84; filter: blur(0px); }
}

/* ─────────────────────────────────────────
   SECTION 1 — 世界観の宣言
───────────────────────────────────────── */
.section-1 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12vh 8vw;
  background: var(--white);
  position: relative;
}

.section-1-inner {
  max-width: 560px;
  text-align: left;
}

.label {
  font-family: var(--font-en);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--gray-light);
  text-transform: uppercase;
  margin-bottom: 3rem;
  display: block;
}

.headline-large {
  font-family: var(--font-jp);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: var(--deep);
  margin-bottom: 2.8rem;
}

.body-text {
  font-family: var(--font-jp);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--gray);
  max-width: 480px;
}

/* ─────────────────────────────────────────
   SECTION 2 — Approach（写真的空間）
───────────────────────────────────────── */
.section-2 {
  min-height: 80vh;
  display: flex;
  align-items: stretch;
  gap: 7vw;
  background: #F0EDE8;
  position: relative;
  overflow: hidden;
}

.section-2-photo {
  width: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: none;
}

.section-2-photo-img {
  width: 100%;
  height: auto;
  display: block;
}

.section-2-text {
  width: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 4vw 8vh 0;
}

.section-2-text-inner {
  max-width: 320px;
}

.section-2-text .headline-large {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  margin-bottom: 2rem;
}

/* 27-G.2: Section2② 囁きサイズ（Section1同等・grayで主張を抑制） */
.section-2-text .body-text {
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 1.75;
}

/* ─────────────────────────────────────────
   SECTION 3 — 知性との対話
───────────────────────────────────────── */
.section-3 {
  background: var(--white);
  padding: 14vh 8vw;
}

.section-3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
}

.card {
  border-top: 1px solid rgba(138,134,128,0.2);
  padding-top: 2.5rem;
}

.card-number {
  font-family: var(--font-en);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gray-light);
  margin-bottom: 1.8rem;
  display: block;
}

.card-title {
  font-family: var(--font-jp);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--deep);
  margin-bottom: 1.2rem;
}

.card-body {
  font-family: var(--font-jp);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: var(--gray);
}

/* ─────────────────────────────────────────
   SECTION 4 — 余韻と静けさ
───────────────────────────────────────── */
.section-4 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14vh 8vw;
  background: #F0EDE8;
  text-align: center;
}

.section-4-quote {
  font-family: var(--font-jp);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-weight: 300;
  line-height: 2.4;
  letter-spacing: 0.1em;
  color: var(--gray);
  max-width: 500px;
}

.section-4-quote strong {
  font-weight: 400;
  color: var(--deep);
}

/* ─────────────────────────────────────────
   SECTION CTA — 自然な着地
───────────────────────────────────────── */
.section-cta {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 8vw;
  background: var(--white);
}

.cta-label {
  font-family: var(--font-en);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--gray-light);
  text-transform: uppercase;
  margin-bottom: 2.4rem;
}

.cta-headline {
  font-family: var(--font-jp);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: var(--deep);
  margin-bottom: 3rem;
  max-width: 420px;
}

/* CTAボタン：主張しない。「気づいたら押したくなる」 */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--deep);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: gap 0.5s var(--ease-out);
}

.cta-button:hover {
  gap: 2rem;
}

.cta-button:hover .cta-arrow {
  transform: translateX(4px);
  opacity: 0.7;
}

.cta-arrow {
  width: 36px;
  height: 1px;
  background: var(--deep);
  position: relative;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}

.cta-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(35deg);
  width: 8px;
  height: 1px;
  background: var(--deep);
  transform-origin: right center;
}

/* ─────────────────────────────────────────
   Footer
───────────────────────────────────────── */
footer {
  position: relative;
  padding: 4rem 8vw;
  border-top: 1px solid rgba(138,134,128,0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
}



footer .footer-logo {
  font-family: var(--font-en);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 300;
}

footer .footer-copy {
  font-family: var(--font-en);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(138, 134, 128, 0.72);
}

/* ─────────────────────────────────────────
   SECTION FAQ — よくある質問
───────────────────────────────────────── */
.section-faq {
  background: var(--white);
  padding: 14vh 8vw;
}

.section-faq-inner {
  max-width: 560px;
}

.faq-list {
  margin-top: 3.6rem;
  padding-left: 120px;
}

.faq-item {
  border-top: 1px solid rgba(138,134,128,0.18);
  padding: 2.6rem 0;
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(138,134,128,0.18);
}

.faq-q {
  font-family: var(--font-jp);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: var(--deep);
  margin-bottom: 1.6rem;
}

.faq-a {
  font-family: var(--font-jp);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--gray);
}

/* FAQ内リンク — AINAGI温度統一 */
.faq-a a {
  color: var(--deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 25, 23, 0.18);
  transition:
    color 600ms ease,
    border-color 600ms ease,
    opacity 600ms ease;
  opacity: 0.82;
}

.faq-a a:hover {
  color: var(--deep);
  border-bottom-color: rgba(28, 25, 23, 0.42);
  opacity: 1;
}

/* CTA 補足文 */
.cta-note {
  font-family: var(--font-jp);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin-bottom: 3rem;
  max-width: 360px;
}

/* ─────────────────────────────────────────
   Scroll Animation — Intersection Observer
───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(7px);
  filter: blur(2px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-delay-1 { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }
.reveal-delay-3 { transition-delay: 360ms; }


/* ─────────────────────────────────────────
   Responsive
───────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-brand { animation-delay: 3600ms; }
  .hero-subline { animation-delay: 4320ms; }
  .scroll-presence,
  .scroll-presence .scroll-line { animation-delay: 6300ms; }

  .hero-content { padding: 40vh 6vw 0; }
  .hero-main { font-size: clamp(48px, 11vw, 80px); letter-spacing: 0.11em; line-height: 1.22; margin-top: -5vh; }
  .hero-subline { margin-top: 2.2rem; font-size: 1.22rem; letter-spacing: 0.06em; line-height: 1.5; }

  .section-2 { flex-direction: column; }
  .section-2-photo { width: 100%; height: auto; }
  .section-2-photo-img { width: 92%; margin: 0 auto; }
  .section-2-text { width: 100%; padding: 6vh 6vw; }

  .section-3-grid {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }

  .section-4 { padding: 10vh 6vw; }
  .section-cta { padding: 10vh 6vw; }
  footer { flex-direction: column; gap: 1rem; text-align: center; }
  .faq-list { padding-left: 0; }
}


/* footer-logo リンク化 — SP含む全環境での帰還保証 */
footer .footer-logo {
  text-decoration: none;
  color: var(--gray);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

footer .footer-logo:hover {
  opacity: 0.44;
}

/* ─────────────────────────────────────────
   FAQ内 ナギ空間補足要素
───────────────────────────────────────── */
.faq-nagi-space {
  display: block;
  margin-top: 2rem;
  width: 100%;
}

.faq-nagi-space-image {
  display: block;
  width: 120%;
  margin-left: 0;
  overflow: hidden;
}

.faq-nagi-space-img {
  width: 100%;
  height: auto;
  display: block;
}

.faq-nagi-space-caption {
  display: block;
  font-family: var(--font-jp);
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--gray);
  opacity: 0.82;
  margin-top: 1.5rem;
  text-align: left;
  width: 120%;
  margin-left: 0;
}

@media (max-width: 768px) {
  .faq-nagi-space-image {
    width: 100%;
    margin-left: 0;
  }
  .faq-nagi-space-caption {
    width: 100%;
    margin-left: 0;
    margin-top: 1.2rem;
  }
}

/* ==========================================================================
   Return to AINAGI — Footer到達時のみ現れる帰還導線
========================================================================== */
.return-to-ainagi {
  position: fixed;
  right: clamp(1.2rem, 3vw, 2.8rem);
  bottom: clamp(1.4rem, 4vh, 3rem);
  z-index: 80;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;

  text-decoration: none;
  color: var(--deep);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;

  transition:
    opacity 1800ms var(--ease-out),
    transform 1800ms var(--ease-out),
    visibility 0s linear 1800ms;

  will-change: opacity, transform;
}

.return-to-ainagi.is-visible {
  opacity: 0.64;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;

  transition:
    opacity 1800ms var(--ease-out),
    transform 1800ms var(--ease-out),
    visibility 0s;
}

.return-to-ainagi:hover {
  opacity: 0.82;
}

.return-to-ainagi__mark {
  width: 18px;
  height: auto;
  display: block;
  opacity: 0.92;
  filter:
    brightness(1.05)
    sepia(5%)
    contrast(0.9);
}

.return-to-ainagi__name {
  font-family: var(--font-en);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--deep);
}

.return-to-ainagi__text {
  font-family: var(--font-jp);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1;
  color: rgba(28, 25, 23, 0.58);
}

@media (max-width: 768px) {
  .return-to-ainagi {
    right: 1.1rem;
    bottom: 1.4rem;
    gap: 0.24rem;
  }

  .return-to-ainagi__mark {
    width: 16px;
  }

  .return-to-ainagi__name {
    font-size: 0.58rem;
  }

  .return-to-ainagi__text {
    font-size: 0.54rem;
  }
}

/* ─────────────────────────────────────────
   SECTION OUTPUT — 整理の成果物
───────────────────────────────────────── */
.section-output {
  background: var(--white);
  padding: 14vh 8vw;
  text-align: center;
}

.section-output-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-output-intro {
  font-family: var(--font-jp);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--gray);
  max-width: 520px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.section-output-image {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.section-output-img {
  width: auto;
  height: auto;
  max-height: 360px;
  display: block;
}

.section-output-copy {
  font-family: var(--font-jp);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--gray);
  text-align: center;
  margin-bottom: 2.8rem;
}

.section-output-link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-jp);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--deep);
  text-decoration: none;
  transition: gap 0.5s var(--ease-out);
}

.section-output-link:hover {
  gap: 2rem;
}

.section-output-link:hover .cta-arrow {
  transform: translateX(4px);
  opacity: 0.7;
}

@media (max-width: 768px) {
  .section-output-image {
    margin-top: 56px;
  }

  .section-output-img {
    max-height: 320px;
  }
}

.section-output-title {
  font-family: var(--font-en);
  font-size: clamp(1.0rem, 1.8vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--deep);
  margin-top: 1.6rem;
  margin-bottom: 0;
}

/* PHASE03-XI: AT WORK body-text 意味単位折り返し修正 */
.section-2-text .body-text {
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  max-width: 550px;
}
.section-2-text-inner {
  max-width: 560px;
}

/* Phase05-2: SP ロゴ位置・サイズ最適化 */
@media (max-width: 768px) {
  .nav-brand {
    left: 1.6rem;
    top: 1.8rem;
  }

  .ainagi-logo {
    width: 100px;
  }
}

/* Phase05-3: SP Hero離脱後ロゴ自然フェード */
@media (max-width: 768px) {
  nav.nav-dark .ainagi-logo {
    opacity: 0;
  }
}