/* =================================
   Root Hub（TOPページ専用。style.css を前提に読み込む）
================================= */
.hub_hero {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100svh; text-align: center; padding: var(--header-h) var(--section-pad-x) 100px; container-type: inline-size;}
.hub_hero h1 {width: 100%;}
.hub_hero_ruby {display: block; color: var(--pink); font-size: var(--lg); font-weight: 700; letter-spacing: 0.12em; animation: heroFadeIn 0.4s ease 1.15s both; opacity: 0;}
.hub_hero_logo {display: block; width: min(1100px, 90%); height: auto; margin: 20px auto 0;}
.hub_logo_char {animation: heroFadeIn 0.4s ease both; opacity: 0;}
.hub_char_0  {animation-delay: 1.20s;}
.hub_char_1  {animation-delay: 1.25s;}
.hub_char_2  {animation-delay: 1.30s;}
.hub_char_3  {animation-delay: 1.35s;}
.hub_char_4  {animation-delay: 1.40s;}
.hub_char_5  {animation-delay: 1.45s;}
.hub_char_6  {animation-delay: 1.50s;}
.hub_char_7  {animation-delay: 1.55s;}
.hub_char_8  {animation-delay: 1.60s;}
.hub_char_9  {animation-delay: 1.65s;}
.hub_char_10 {animation-delay: 1.70s;}
.hub_char_11 {animation-delay: 1.75s;}
.hub_char_12 {animation-delay: 1.80s;}
.hub_hero_role {display: inline-block; margin: 64px auto 0; padding: 20px 56px; background: var(--pink); color: var(--white); font-size: var(--xl); font-weight: bold; line-height: 1.4; transform-origin: left center; animation: lineDraw 0.5s cubic-bezier(0.4, 0, 0.2, 1) 1.9s both;}
.hub_hero_role span {display: inline-block; animation: heroFadeIn 0.4s ease 2.3s both; opacity: 0;}
.hub_hero_lead {margin-top: 48px; font-size: var(--lg); line-height: 1.9; animation: heroFadeIn 0.5s ease 2.55s both; opacity: 0;}
header {animation-delay: 2.9s;}
.hub_scroll {position: absolute; bottom: 24px; left: 0; right: 0; margin: 0 auto; width: fit-content; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--pink); font-size: 11px; font-weight: 700; letter-spacing: 0.25em; animation: heroFadeIn 0.5s ease 3.2s both; opacity: 0;}
.hub_scroll_line {position: relative; width: 2px; height: 40px; background: rgba(232, 0, 127, 0.25); overflow: hidden;}
.hub_scroll_line::after {content: ""; position: absolute; inset: 0; background: var(--pink); animation: hubScrollDraw 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;}
@keyframes hubScrollDraw {
  0%   {transform: scaleY(0); transform-origin: top;}
  45%  {transform: scaleY(1); transform-origin: top;}
  55%  {transform: scaleY(1); transform-origin: bottom;}
  100% {transform: scaleY(0); transform-origin: bottom;}
}
.nav_ext_icon {width: 0.8em; height: 0.8em; margin-left: 0.3em; vertical-align: -0.08em; fill: currentColor;}
.hub_section_title {margin-bottom: 32px; font-family: var(--font-heading); color: var(--black); font-size: var(--xl); font-weight: 900; line-height: 1.2;}
.section {scroll-margin-top: var(--header-h);}
.hub_cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
.hub_card {display: flex; flex-direction: column; background: var(--pink); color: var(--white);}
.hub_card_logo {display: flex; align-items: center; justify-content: center; height: 150px; padding: 24px; background: var(--white);}
.hub_card_logo img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;}
.hub_card_logo img[src="logo_shumag.svg"] {max-height: 80px;}
.hub_card_body {display: flex; flex: 1; flex-direction: column; padding: 24px;}
.hub_card_tagline {font-size: var(--xs); font-weight: bold; letter-spacing: 0.1em;}
.hub_card_divider {height: 1px; margin: .8em 0; background: rgba(255,255,255,0.35);}
.hub_card_text {flex: 1; font-size: var(--sm); line-height: 1.8; text-align: justify;}
.hub_card_btn {display: flex; align-items: center; justify-content: center; margin-top: 20px; padding: 8px 16px; color: var(--white); font-size: var(--sm); font-weight: bold; border: 2px solid var(--white); border-radius: 12px; transition: color .2s, background .2s;}
.hub_card_btn:hover {color: var(--pink); background: var(--white);}
.hub_profile_note {margin-top: 20px; font-size: var(--sm); line-height: 1.9; text-align: justify;}
.hub_contact {text-align: center;}

/* =================================
   Smartphone   max-width: 767.9px
================================= */
@media (max-width: 767.9px) {
  .hub_hero {padding-top: calc(var(--header-h) + 40px);}
  .hub_hero_role {margin-top: 28px; padding: 10px 20px; font-size: 5.1cqw; white-space: nowrap;}
  .hub_cards {grid-template-columns: 1fr;}
  .hub_card_body {padding: var(--header-pad-x);}
  .hub_card_logo {height: 130px; padding: 20px var(--header-pad-x);}
  .hub_card_btn {font-size: var(--lg);}
}