/* TOPだけの表示責務。公開判定・共通記事カード・Hub landingはsite-core/IAのまま。 */
body.spoassi-portal { background: #fff; }
.spoassi-portal #content { margin-top: 0; padding-top: 0; }
.spoassi-portal #inner-content.spoassi-top { width: 100%; max-width: none; margin: 0; padding: 0; }
.spoassi-top { --top-ink: #122d42; --top-muted: #596d7c; --top-blue: #007fa6; --top-line: #dce8ee; color: var(--top-ink); }
.spoassi-top *, .spoassi-top *::before, .spoassi-top *::after { box-sizing: border-box; }
.spoassi-top #main { float: none; width: 100%; margin: 0; padding: 0; background: #fff; box-shadow: none; }
.spoassi-top a { text-decoration: none; }
.spoassi-top a:focus-visible, .spoassi-top button:focus-visible, .spoassi-top input:focus-visible { outline: 3px solid #006d91; outline-offset: 4px; }
.spoassi-top .spoassi-top__eyebrow { margin: 0 0 12px; color: var(--top-blue); font-size: 11px; font-weight: 800; letter-spacing: .17em; line-height: 1.5; }
.spoassi-top .spoassi-hero { position: relative; overflow: hidden; isolation: isolate; padding: 66px max(32px, calc((100% - 1160px) / 2)); text-align: left; background: #edf6fa; }
.spoassi-top .spoassi-hero__image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 63%; }
.spoassi-top .spoassi-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(248,252,255,.98), rgba(248,252,255,.91) 35%, rgba(248,252,255,.2) 70%, transparent); }
.spoassi-top .spoassi-hero__body { max-width: 610px; }
.spoassi-top .spoassi-hero__title { margin: 16px 0 22px; padding: 0; border: 0; background: none; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.5; font-weight: 800; letter-spacing: .025em; color: var(--top-ink); }
.spoassi-top .spoassi-hero__lead { margin: 0 0 26px; max-width: none; font-size: 14px; line-height: 2; color: #344f61; }
.spoassi-top .spoassi-top-search { display: flex; align-items: center; gap: 12px; padding: 7px; max-width: 540px; background: #fff; border: 1px solid #c5dbe5; border-radius: 9px; box-shadow: 0 6px 22px #173a5310; }
.spoassi-top-search svg { flex: 0 0 22px; margin-left: 9px; fill: none; stroke: var(--top-blue); stroke-width: 2; }
.spoassi-top .spoassi-top-search input { flex: 1; width: 0; min-width: 0; margin: 0; padding: 10px 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; color: var(--top-ink); font-size: 16px; }
.spoassi-top .spoassi-top-search input::placeholder { color: #657681; font-size: 13px; }
.spoassi-top .spoassi-top-search button { flex-shrink: 0; min-height: 44px; padding: 10px 24px; border: 0; border-radius: 5px; background: var(--top-blue); color: white; font-size: 14px; font-weight: 700; cursor: pointer; }
.spoassi-top .spoassi-hero__links { display: flex; gap: 24px; margin-top: 18px; font-size: 12px; font-weight: 700; }
.spoassi-top .spoassi-hero__links a { color: #27566e; }
.spoassi-top .spoassi-hero__links span { margin-left: 12px; }
.spoassi-top .spoassi-hero__caption { position: absolute; bottom: 24px; right: max(32px, calc((100% - 1160px) / 2)); margin: 0; color: white; text-shadow: 0 1px 5px #123b55; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.spoassi-top .spoassi-top__sections { width: min(100% - 64px, 1160px); margin: auto; padding: 54px 0 60px; }
.spoassi-top .spoassi-section-title { margin: 0; padding: 0; border: 0; background: none; color: var(--top-ink); font-size: 25px; line-height: 1.5; font-weight: 800; }
.spoassi-top .spoassi-top__section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin-bottom: 24px; }
.spoassi-top .spoassi-top__section-head p { margin: 0; font-size: 13px; color: var(--top-muted); }
.spoassi-top #spoassi-purpose, .spoassi-top #spoassi-recent { scroll-margin-top: 100px; }
.spoassi-top .spoassi-intent-hubs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
/* 現在の公開4Hubは2×2。公開条件の変化で6Hubになれば自動で3×2。 */
.spoassi-top .spoassi-intent-hubs__list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spoassi-top .spoassi-intent-hubs__item { min-width: 0; margin: 0; }
.spoassi-top .spoassi-intent-hubs__item a { position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr); column-gap: 18px; row-gap: 5px; align-content: start; height: 100%; min-height: 166px; padding: 26px; border: 1px solid var(--top-line); border-radius: 12px; background: linear-gradient(115deg,#f4fbfd,#fff 70%); color: var(--top-ink); box-shadow: 0 4px 18px #163d5305; }
.spoassi-top .spoassi-intent-hubs__item a::before { content: ''; grid-column: 1; grid-row: 1 / 4; width: 52px; height: 52px; background: var(--top-blue); mask: var(--hub-icon) center / 32px 32px no-repeat; }
.spoassi-top .spoassi-intent-hubs__item a::after { content: '↗'; position: absolute; right: 22px; bottom: 20px; color: var(--top-blue); font-size: 20px; }
.spoassi-top .spoassi-intent-hubs__name { grid-column: 2; font-size: 18px; font-weight: 800; }
.spoassi-top .spoassi-intent-hubs__desc { grid-column: 2; color: var(--top-muted); font-size: 12px; line-height: 1.9; }
.spoassi-top .spoassi-intent-hubs__count { grid-column: 2; margin-top: 8px; color: var(--top-blue); font-size: 11px; font-weight: 700; }
.spoassi-top .spoassi-sports-nav { margin: 34px 0 54px; padding: 28px 0; border-top: 1px solid var(--top-line); border-bottom: 1px solid var(--top-line); }
.spoassi-top .spoassi-sports-nav .spoassi-section-title { font-size: 20px; }
.spoassi-top .spoassi-sports-nav__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.spoassi-top .spoassi-sports-nav__item { flex: 0 1 auto; margin: 0; }
.spoassi-top .spoassi-sports-nav__item a { display: flex; gap: 20px; justify-content: space-between; align-items: center; min-height: 46px; padding: 10px 18px; border: 1px solid var(--top-line); border-radius: 6px; color: #345164; background: #fff; font-size: 13px; }
.spoassi-top .spoassi-sports-nav__item a > span:last-child { color: var(--top-blue); }
.spoassi-top .spoassi-recent__list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 22px; margin: 0; padding: 0; list-style: none; }
.spoassi-top .spoassi-recent__item { min-width: 0; padding: 0; margin: 0; border: 0; }
.spoassi-top .spoassi-top-card { display: block; height: 100%; color: var(--top-ink); }
.spoassi-top .spoassi-top-card__media { overflow: hidden; aspect-ratio: 16/9; border-radius: 9px; background: #edf5f8; }
.spoassi-top .spoassi-top-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spoassi-top .spoassi-top-card__body { padding: 15px 2px 0; }
.spoassi-top .spoassi-top-card__category { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 3px; background: #edf7fa; color: #006c8d; font-size: 11px; font-weight: 700; }
.spoassi-top .spoassi-top-card h3 { margin: 0 0 12px; padding: 0; border: 0; background: none; font-size: 15px; line-height: 1.85; color: inherit; }
.spoassi-top .spoassi-top-card time { display: block; font-size: 11px; color: var(--top-muted); }
.spoassi-top .spoassi-top-about { display: grid; grid-template-columns: 1.2fr 1fr; gap: 54px; margin-top: 60px; padding: 40px; border-radius: 12px; background: #f0f8fb; }
.spoassi-top .spoassi-top-about h2 { margin: 0 0 16px; padding: 0; border: 0; background: none; font-size: 24px; line-height: 1.65; }
.spoassi-top .spoassi-top-about h3 { margin: 0 0 12px; padding: 0; border: 0; font-size: 15px; }
.spoassi-top .spoassi-top-about p:not(.spoassi-top__eyebrow) { margin: 0; color: var(--top-muted); font-size: 12px; line-height: 2; }
.spoassi-top .spoassi-top-about__guide { align-self: center; padding-left: 30px; border-left: 1px solid #cfe3ec; }
.spoassi-top .spoassi-top-about nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; }
.spoassi-top .spoassi-top-about a { color: var(--top-blue); font-size: 12px; font-weight: 700; }
@media (hover: hover) {
 .spoassi-top .spoassi-intent-hubs__item a:hover { border-color: #60b2cc; box-shadow: 0 6px 20px #14799a12; }
 .spoassi-top .spoassi-sports-nav a:hover { background: #edf8fc; border-color: #60b2cc; }
 .spoassi-top .spoassi-top-card:hover h3 { color: var(--top-blue); text-decoration: underline; text-underline-offset: 4px; }
 .spoassi-top .spoassi-top-search button:hover { background: #006783; }
}
@media (max-width: 959px) {
 .spoassi-top .spoassi-intent-hubs__list { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .spoassi-top .spoassi-recent__list { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .spoassi-top .spoassi-hero { padding: 48px 32px; }
 .spoassi-top .spoassi-hero__caption { display: none; }
 .spoassi-top .spoassi-top-about { gap: 28px; padding: 30px; }
}
@media (max-width: 599px) {
 .spoassi-top .spoassi-hero { padding: 34px 20px 30px; }
 .spoassi-top .spoassi-hero__image { object-position: 72% center; }
 .spoassi-top .spoassi-hero::before { background: linear-gradient(90deg,#f8fcfff5,#f8fcffdf 70%,#f8fcff99); }
 .spoassi-top .spoassi-hero__title { font-size: clamp(25px,6.7vw,38px); margin: 12px 0 16px; }
 .spoassi-top .spoassi-hero__lead { font-size: 12px; margin-bottom: 20px; }
 .spoassi-top .spoassi-top__desktop-break { display: none; }
 .spoassi-top .spoassi-top-search { gap: 6px; padding: 5px; }
 .spoassi-top .spoassi-top-search button { padding: 10px 16px; }
 .spoassi-top .spoassi-top-search input::placeholder { font-size: 11px; }
 .spoassi-top .spoassi-hero__links { gap: 20px; font-size: 11px; }
 .spoassi-top .spoassi-top__sections { width: calc(100% - 40px); padding: 34px 0 40px; }
 .spoassi-top .spoassi-section-title { font-size: 23px; }
 .spoassi-top .spoassi-intent-hubs__list, .spoassi-top .spoassi-intent-hubs__list:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
 .spoassi-top .spoassi-intent-hubs__item a { min-height: 146px; padding: 20px 18px; gap: 4px 12px; grid-template-columns: 40px minmax(0,1fr); }
 .spoassi-top .spoassi-intent-hubs__item a::before { width: 40px; height: 40px; }
 .spoassi-top .spoassi-intent-hubs__name { font-size: 17px; }
 .spoassi-top .spoassi-sports-nav { margin: 28px 0 36px; padding: 24px 0; }
 .spoassi-top .spoassi-sports-nav__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
 .spoassi-top .spoassi-sports-nav__item a { padding: 10px; gap: 6px; font-size: 12px; }
 .spoassi-top .spoassi-top__section-head { gap: 6px; flex-direction: column; margin-bottom: 20px; }
 .spoassi-top .spoassi-top__section-head p { font-size: 12px; }
 .spoassi-top .spoassi-recent__list { grid-template-columns: 1fr; gap: 26px; }
 .spoassi-top .spoassi-top-about { grid-template-columns: 1fr; padding: 26px 22px; margin-top: 40px; }
 .spoassi-top .spoassi-top-about h2 { font-size: 21px; }
 .spoassi-top .spoassi-top-about__guide { border-left: 0; border-top: 1px solid #cfe3ec; padding: 24px 0 0; }
}

.spoassi-top .spoassi-hub--practice { --hub-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2018V11m6%207V7m6%2011V3M2%207l7-4%206-1m-3-1%203%201-1%203%22%2F%3E%3C%2Fsvg%3E"); }

.spoassi-top .spoassi-hub--rules { --hub-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205C7%202%203%203%202%204v15c3-2%206-2%2010%200%204-2%207-2%2010%200V4c-3-2-6-1-10%201Zm0%200v14%22%2F%3E%3C%2Fsvg%3E"); }

.spoassi-top .spoassi-hub--tournament { --hub-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h10v6a5%205%200%200%201-10%200V3Zm0%202H3v3a4%204%200%200%200%205%204m9-7h4v3a4%204%200%200%201-5%204m-4%202v6m-5%201h10%22%2F%3E%3C%2Fsvg%3E"); }

.spoassi-top .spoassi-hub--athletes { --hub-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%2021v-4a7%207%200%200%201%2014%200v4m1-17a3%203%200%200%201%200%206m1%203a5%205%200%200%201%204%205v3%22%2F%3E%3C%2Fsvg%3E"); }

.spoassi-top .spoassi-hub--watch { --hub-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2022h8m-4-5v5m-2-15%205%203-5%203Z%22%2F%3E%3C%2Fsvg%3E"); }

.spoassi-top .spoassi-hub--gear { --hub-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%207h12l2%2015H4L6%207Zm3%200V5a3%203%200%200%201%206%200v2m-6%205h6%22%2F%3E%3C%2Fsvg%3E"); }
/* 親テーマのpage-full幅指定より限定的に上書きする。 */
body.spoassi-portal #content #inner-content.spoassi-top { margin: 0; }
#inner-content.spoassi-top #main { max-width: none; margin: 0; }
.spoassi-portal #header { background: #fff; color: #122d42; border-bottom: 1px solid #e1ebf0; box-shadow: none; }
.spoassi-portal #header .site__logo__title a { color: #0086ac; }
.spoassi-portal #header .stk_g_nav a, .spoassi-portal #header .nav_btn { color: #24485e; }
.spoassi-portal #header .nav_btn__svgicon { fill: currentColor; }
.spoassi-portal #footer { background: #12364a; color: #fff; }
.spoassi-top .spoassi-top-card__media { position: relative; }
.spoassi-top .spoassi-top-card__image-label { position: absolute; bottom: 8px; right: 8px; padding: 2px 6px; border-radius: 3px; background: #ffffffed; color: #345164; font-size: 10px; }