/* ============================================================
   layout.css
   Design System v2.0 Section 05 / 06 / 10 参照
============================================================ */

/* ---- コンテナ -------------------------------------------- */
.container {
  max-width:     var(--container-max);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 768px) {
  .container {
    padding-left:  var(--space-6);
    padding-right: var(--space-6);
  }
}

/* ---- セクション ------------------------------------------ */
.section {
  padding-top:    var(--space-16);
  padding-bottom: var(--space-16);
}
@media (min-width: 768px) {
  .section {
    padding-top:    var(--space-24);
    padding-bottom: var(--space-24);
  }
}
@media (min-width: 1024px) {
  .section {
    padding-top:    var(--space-32);
    padding-bottom: var(--space-32);
  }
}

/* ---- スキップリンク -------------------------------------- */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       var(--space-4);
  padding:    var(--space-2) var(--space-4);
  background: var(--color-text);
  color:      #FFFFFF;
  font-size:  var(--text-sm);
  z-index:    9999;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-4);
}

/* ---- グローバルヘッダー ---------------------------------- */
.global-header {
  position:         sticky;
  top:              0;
  z-index:          100;
  background-color: var(--color-surface);
  border-bottom:    1px solid var(--color-border);
  padding:          0 var(--container-padding);
}
.global-header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  max-width:       var(--container-max);
  margin:          0 auto;
  height:          64px;
}

/* ---- サイトロゴ ------------------------------------------ */
.site-logo {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

/* ---- ロゴアセット ---------------------------------------- */
.site-logo__asset {
  display:     block;
  line-height: 0;
  transition:  opacity var(--duration-fast) var(--ease-out);
}
.site-logo__asset img {
  display:   block;
  width:     160px;
  height:    auto;
  max-width: none;
}
@media (min-width: 1024px) {
  .global-header .site-logo__asset img {
    width: 200px;
  }
  .global-footer .site-logo__asset img {
    width: 140px;
  }
}
.site-logo:hover .site-logo__asset {
  opacity: 0.75;
}

/* ---- グローバルナビ -------------------------------------- */
.global-nav {
  display: none;
}
@media (min-width: 1024px) {
  .global-nav {
    display: block;
  }
}

/* ---- ナビリスト ------------------------------------------ */
.nav-list {
  display: flex;
  gap:     var(--space-8);
}

/* ---- ナビリンク ------------------------------------------ */
.nav-link {
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  color:           var(--color-text-sub);
  text-decoration: none;
  letter-spacing:  0.05em;
  transition:      color var(--duration-fast) var(--ease-out);
}
.nav-link:hover,
.nav-link.is-active {
  color: var(--color-text);
}

/* ---- ナビ CTA ------------------------------------------- */
/* 詳細度 (0,2,0) — .btn-primary (0,1,0) より優先し確実に表示 */
/* モバイル: 小サイズで常時表示 / PC: 通常サイズ */
.global-header-inner .nav-cta {
  display:        inline-flex;
  font-size:      0.7rem;
  padding:        var(--space-2) var(--space-3);
  letter-spacing: 0.06em;
  white-space:    nowrap;
}
@media (min-width: 1024px) {
  .global-header-inner .nav-cta {
    font-size:      var(--text-sm);
    padding:        var(--space-3) var(--space-8);
    letter-spacing: 0.08em;
  }
}

/* ---- ハンバーガーボタン ---------------------------------- */
.nav-toggle {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           44px;
  height:          44px;
  padding:         var(--space-2);
}
@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* ---- ハンバーガーの線（nav-toggle とは別定義） ----------- */
.nav-toggle-bar {
  display:          block;
  width:            100%;
  height:           2px;
  background-color: var(--color-text);
  transition:       opacity   var(--duration-fast) var(--ease-out),
                    transform var(--duration-fast) var(--ease-out);
}

/* ---- モバイルメニュー ------------------------------------ */
.mobile-menu {
  background-color: var(--color-surface);
  border-top:       1px solid var(--color-border);
  padding:          var(--space-6) var(--space-4);
}
.mobile-menu .nav-list {
  flex-direction: column;
  gap:            var(--space-4);
}
.mobile-menu .nav-link {
  font-size: var(--text-base);
}

/* ---- ヒーロー -------------------------------------------- */
.hero {
  position:       relative;
  isolation:      isolate;
  overflow:       hidden;
  min-height:     calc(100vh - 64px);  /* sticky ヘッダー(64px)分を除いた全面表示 */
  display:        flex;
  align-items:    center;
  padding-top:    var(--space-12);
  padding-bottom: var(--space-12);
  background:
    radial-gradient(ellipse 70% 50% at 15% 65%, rgba(198, 31, 31, 0.10) 0%, transparent 65%),
    var(--color-bg);
}
.hero-inner {
  max-width: 720px;
}
/* ---- ヒーローバッジ --------------------------------------- */
.hero-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        var(--space-1) var(--space-3);
  border:         1px solid var(--color-accent);
  color:          var(--color-accent);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.1em;
  white-space:    nowrap;
  margin-bottom:  var(--space-4);
}
.hero-title {
  font-size:      var(--text-h1);
  font-weight:    var(--weight-bold);
  line-height:    1.2;
  letter-spacing: -0.02em;
  color:          var(--color-text);
  margin-bottom:  var(--space-8);
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 3.5rem;
  }
}
/* 全幅: 「つくる前に、」「事業を診る。」で意味の区切りを維持 */
.hero-title-br {
  display: inline;
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 4rem;  /* 約64px */
  }
}
.hero-lead {
  font-size:     var(--text-lg);
  line-height:   var(--leading-body);
  color:         var(--color-text-sub);
  margin-bottom: var(--space-3);
}
.hero-body {
  font-size:     var(--text-base);
  line-height:   var(--leading-body);
  color:         var(--color-text-sub);
  margin-bottom: var(--space-3);
}
.hero-closing {
  font-size:     var(--text-base);
  font-weight:   var(--weight-semibold);
  line-height:   var(--leading-body);
  color:         var(--color-text);
  margin-bottom: var(--space-12);
}
.hero-cta {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  gap:            var(--space-4);
}
@media (min-width: 768px) {
  .hero-cta {
    flex-direction: row;
    align-items:    center;
  }
}
/* ---- ヒーローマイクロコピー -------------------------------- */
.hero-micro-copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin-top:     var(--space-6);
  padding:        0;
}
.hero-micro-copy li {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  line-height: var(--leading-tight);
}

/* ヒーロー：微細な光（右上から差し込む副光源） */
.hero::before {
  content:        '';
  position:       absolute;
  top:            -30%;
  right:          -20%;
  width:          60%;
  height:         80%;
  background:     radial-gradient(ellipse, rgba(198, 31, 31, 0.05) 0%, transparent 60%);
  z-index:        -1;
  pointer-events: none;
}
/* ヒーロー：ノイズテクスチャ（高級感のある粒状感） */
.hero::after {
  content:           '';
  position:          absolute;
  inset:             0;
  background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size:   300px 300px;
  opacity:           0.035;
  z-index:           -1;
  pointer-events:    none;
}

/* ---- スクロールインジケーター ----------------------------- */
.hero-scroll {
  position:       absolute;
  bottom:         var(--space-8);
  left:           50%;
  transform:      translateX(-50%);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  z-index:        1;
}

.hero-scroll__line {
  width:      1px;
  height:     56px;
  background: linear-gradient(to bottom, var(--color-border-strong), transparent);
  animation:  hero-scroll-draw 2.2s ease-in-out infinite;
}

@keyframes hero-scroll-draw {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  15%  { transform: scaleY(0); transform-origin: top; opacity: 1; }
  65%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll__line { animation: none; opacity: 0.3; }
}

/* ---- セクション本文テキスト ------------------------------ */
.section-body {
  max-width:     720px;
  margin-left:   auto;
  margin-right:  auto;
  margin-bottom: var(--space-4);
  font-size:     var(--text-base);
  line-height:   var(--leading-body);
  color:         var(--color-text-sub);
}

/* ---- セクション余白調整 ---------------------------------- */
#hero + .section {
  padding-top: var(--space-20);
}

@media (min-width: 1024px) {
  #hero + .section {
    padding-top: var(--space-32);
  }
}

/* ---- グローバルフッター ---------------------------------- */
.global-footer {
  background-color: var(--color-surface);
  border-top:       1px solid var(--color-border);
  padding:          var(--space-12) 0;
}
.global-footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-4);
}
.footer-copy {
  font-size: var(--text-sm);
  /* #888 on #121212 = contrast 5.66:1 — WCAG AA 4.5:1 合格（--color-text-muted は変更しない） */
  color:     #888;
}