/* 静的HTML化に伴う補助スタイル（base.css は旧サイトの Tailwind 出力をそのまま使用） */
.img-fill{position:absolute;inset:0;width:100%;height:100%;color:transparent}
.items-baseline{align-items:baseline}
.leading-snug{line-height:1.375}
.max-w-md{max-width:28rem}
.my-12{margin-block:3rem}
.text-right{text-align:right}
.text-gray-300{color:#d1d5dc}
.border-t-2{border-top-style:solid;border-top-width:2px}
.space-y-3>:not(:last-child){margin-bottom:.75rem}
.space-y-5>:not(:last-child){margin-bottom:1.25rem}
@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:48rem){.md\:p-14{padding:3.5rem}}
@media (min-width:64rem){
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:text-5xl{font-size:3rem;line-height:1.15}
}

/* ヘッダー（スクロール後） */
#site-header.is-scrolled{background-color:#fffffff2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:#e5e5e5;height:68px;box-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a}

/* モバイルメニュー：閉じている間はタップを奪わない */
.mobile-menu{opacity:0;transform:translateY(-100%);visibility:hidden;pointer-events:none;transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s}
.mobile-menu.is-open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .4s ease,transform .4s ease}
.mobile-menu .mobile-item{opacity:0;transform:translateY(20px);transition:opacity .4s ease,transform .4s ease}
.mobile-menu.is-open .mobile-item{opacity:1;transform:none}
.mobile-menu.is-open .mobile-item:nth-child(1){transition-delay:.1s}
.mobile-menu.is-open .mobile-item:nth-child(2){transition-delay:.2s}
.mobile-menu.is-open .mobile-item:nth-child(3){transition-delay:.3s}
.mobile-menu.is-open .mobile-item:nth-child(4){transition-delay:.4s}
.mobile-menu.is-open .mobile-item:nth-child(5){transition-delay:.5s}
.mobile-menu.is-open>.mobile-item{transition-delay:.4s}
#menu-btn.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#menu-btn.is-open span:nth-child(2){opacity:0}
#menu-btn.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
body.menu-open{overflow:hidden}

/* スクロール表示アニメーション */
.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s ease-out,transform .8s ease-out}
.js [data-reveal].is-visible{opacity:1;transform:none}
.js [data-bar]{transform:scaleX(0);transition:transform .8s ease-out .3s}
.js [data-reveal].is-visible [data-bar],.js [data-bar].is-visible{transform:scaleX(1)}

/* ヒーロー */
.js .hero-bg{opacity:0;transform:scale(1.1);transition:opacity 1.5s ease-out,transform 2.5s ease-out}
.js .hero-left,.js .hero-right{opacity:0;transform:translateY(30px);transition:opacity 1s ease-out .3s,transform 1s ease-out .3s}
.js .hero-right{transition-delay:.6s}
.js .hero-bar{transform:scaleX(0);transform-origin:left;transition:transform .8s ease-out .8s}
.js .hero-char{opacity:0;transform:translateY(10px);transition:opacity .6s ease-out,transform .6s ease-out}
.hero.is-loaded .hero-bg{opacity:1;transform:none}
.hero.is-loaded .hero-left,.hero.is-loaded .hero-right{opacity:1;transform:none}
.hero.is-loaded .hero-bar{transform:none}
.hero.is-loaded .hero-char{opacity:1;transform:none}

/* エコシステムの循環図 */
.eco-cycle{position:relative;width:min(100%,480px);aspect-ratio:1;margin-inline:auto}
.eco-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eco-ring circle{fill:none;stroke:gold;stroke-width:.6;stroke-dasharray:1.6 1.4;animation:eco-spin 40s linear infinite}
.eco-arrows{fill:none;stroke:gold;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
@keyframes eco-spin{to{stroke-dashoffset:-60}}
.eco-node{position:absolute;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:9999px;background:#fff;box-shadow:0 10px 25px -8px #0000002e;border:2px solid #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:border-color .3s,transform .3s}
.eco-node:hover{border-color:gold;transform:translate(-50%,-50%) scale(1.05)}
.eco-num{font-family:var(--font-serif);font-style:italic;font-weight:700;color:gold;font-size:clamp(.8rem,2.6vw,1rem);line-height:1.2}
.eco-label{font-weight:700;color:#111;font-size:clamp(.72rem,2.9vw,.9rem);line-height:1.35}
.eco-center{position:absolute;left:50%;top:50%;width:40%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.eco-center-icon{width:34%;height:auto;opacity:.9;margin-bottom:.4rem}
.eco-center-en{font-family:var(--font-mono);font-size:clamp(.55rem,1.9vw,.65rem);letter-spacing:.2em;text-transform:uppercase;color:gold;font-weight:700}
.eco-center-ja{font-family:var(--font-serif);font-weight:700;color:#111;font-size:clamp(.85rem,3.4vw,1.15rem);line-height:1.4;margin-top:.2rem}

@media (prefers-reduced-motion:reduce){
  .eco-ring circle{animation:none}
  .js [data-reveal],.js [data-bar],.js .hero-bg,.js .hero-left,.js .hero-right,.js .hero-bar,.js .hero-char,.mobile-menu,.mobile-menu .mobile-item{transition:none!important}
}

/* ヒーロー内コンテナを画面幅に収める（flex 子要素の max-content 化によるはみ出し防止） */
.hero>.container-custom{width:100%}
/* 文末の1〜2文字だけが次行に落ちるのを防ぐ */
p,h1,h2,h3,h4,li,dd{text-wrap:pretty}
/* スマホ：ヒーローの高さを内容に合わせる（固定高さだとボタンが切れるため）。大ロゴはヘッダーと重複するので非表示 */
@media (max-width:767px){
  .hero{height:auto;min-height:0;padding:1.5rem 0 4rem}
  .hero-right{display:none}
}
/* PCのみ改行（スマホは自然改行） */
.pc-br{display:none}
@media (min-width:768px){.pc-br{display:inline}}