/* 部品：top-hero（STUDIOでは埋め込みだったもの） */
.sp-part--top-hero .spkh{
--spkh-top-offset: 0px;
--spkh-night: #14110d;
--spkh-paper: #fbf8f1;
--spkh-soft: #d6cfbf;
--spkh-mute: #a39a87;
--spkh-gold: #e2bd5a;
--spkh-serif: 'Noto Serif JP', 'Noto Serif CJK JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
--spkh-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
position: relative;
width: 100%;
min-height: 680px;
min-height: clamp(640px, 100svh, 1000px);
display: flex;
align-items: center;
background: var(--spkh-night);
color: var(--spkh-paper);
font-family: var(--spkh-sans);
overflow: hidden;
isolation: isolate;
-webkit-font-smoothing: antialiased;
}.sp-part--top-hero .spkh,.sp-part--top-hero .spkh *,.sp-part--top-hero .spkh *::before,.sp-part--top-hero .spkh *::after{ box-sizing: border-box; }.sp-part--top-hero .spkh :where(h1, p, dl, dt, dd, figure){ margin: 0; padding: 0; }.sp-part--top-hero .spkh-stage{
position: absolute;
inset: 0;
z-index: 0;
perspective: 1500px;
perspective-origin: 70% 40%;
}.sp-part--top-hero .spkh-wall{
--px: 0;
--py: 0;
position: absolute;
top: 50%;
left: 66%;
width: clamp(980px, 84vw, 1480px);
height: 165%;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: 100%;
column-gap: clamp(12px, 1.2vw, 20px);
transform-style: preserve-3d;
transform:
translate(-50%, -50%)
rotateX(calc(24deg + var(--py) * -5deg))
rotateY(calc(-14deg + var(--px) * 9deg))
rotateZ(10deg);
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}.sp-part--top-hero .spkh-col{ position: relative; height: 100%; min-height: 0; transform-style: preserve-3d; }.sp-part--top-hero .spkh-col:nth-child(odd){ transform: translateZ(46px); }.sp-part--top-hero .spkh-col:nth-child(even){ transform: translateZ(-36px); }.sp-part--top-hero .spkh-col:nth-child(2){ margin-top: -18%; }.sp-part--top-hero .spkh-col:nth-child(4){ margin-top: -34%; }.sp-part--top-hero .spkh-col:nth-child(5){ margin-top: -9%; }.sp-part--top-hero .spkh-track{ display: flex; flex-direction: column; will-change: transform; }.sp-part--top-hero .spkh-track figure{
position: relative;
margin-bottom: clamp(12px, 1.2vw, 20px);
aspect-ratio: 4 / 5;
border-radius: 3px;
overflow: hidden;
background: #2a241b;
box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}.sp-part--top-hero .spkh-track img{
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
filter: brightness(.9) contrast(1.04);
}.sp-part--top-hero .spkh-track img[data-raw]{ filter: saturate(.86) contrast(1.11) sepia(.06) brightness(.9); }.sp-part--top-hero .spkh.is-live .spkh-track{
animation: spkh-flow var(--spkh-dur, 60s) linear infinite;
animation-delay: var(--spkh-delay, 0s);
}.sp-part--top-hero .spkh.is-live .spkh-col:nth-child(even) .spkh-track{ animation-direction: reverse; }.sp-part--top-hero .spkh.is-paused .spkh-track,.sp-part--top-hero .spkh.is-offscreen .spkh-track{ animation-play-state: paused; }@keyframes spkh-flow{ to { transform: translate3d(0, var(--spkh-shift, -50%), 0); } }.sp-part--top-hero .spkh-shade{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(60% 55% at 82% 8%, rgba(255, 232, 178, .13), rgba(255, 232, 178, 0) 70%),
linear-gradient(90deg, rgba(20, 17, 13, .97) 0%, rgba(20, 17, 13, .9) 30%, rgba(20, 17, 13, .45) 56%, rgba(20, 17, 13, .1) 78%, rgba(20, 17, 13, .25) 100%),
linear-gradient(0deg, rgba(20, 17, 13, .85) 0%, rgba(20, 17, 13, 0) 30%);
}.sp-part--top-hero .spkh-grain{
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: .09;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}.sp-part--top-hero .spkh-content{
position: relative;
z-index: 3;
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: calc(var(--spkh-top-offset) + clamp(56px, 7vw, 96px)) clamp(20px, 4vw, 48px) clamp(56px, 6vw, 88px);
}.sp-part--top-hero .spkh-brand{
display: flex;
align-items: center;
gap: 14px;
font-family: var(--spkh-serif);
font-weight: 700;
font-size: clamp(14px, 1.2vw, 16px);
letter-spacing: .14em;
color: var(--spkh-gold);
}.sp-part--top-hero .spkh-brand::before{
content: "";
width: 44px;
height: 16px;
flex: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M0 8H18' stroke='%23e2bd5a' stroke-opacity='.45' stroke-width='1'/%3E%3Cpath d='M5 1.8Q8.2 3 11.5 5.2M5 14.2Q8.2 13 11.5 10.8' stroke='%23e2bd5a' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x left center / 18px 16px;
}.sp-part--top-hero .spkh-title{
margin-top: clamp(20px, 2.4vw, 32px);
font-family: var(--spkh-serif);
font-weight: 900;
font-size: clamp(44px, 6.2vw, 92px);
line-height: 1.16;
letter-spacing: .02em;
font-feature-settings: "palt" 1;
color: var(--spkh-paper);
}.sp-part--top-hero .spkh-line{ display: block; overflow: hidden; padding-bottom: .04em; }.sp-part--top-hero .spkh-line > span{ display: inline-block; }.sp-part--top-hero .spkh-sub{
margin-top: clamp(22px, 2.4vw, 32px);
max-width: 36em;
font-size: clamp(14px, 1.15vw, 16px);
line-height: 2;
letter-spacing: .04em;
color: var(--spkh-soft);
}.sp-part--top-hero .spkh-stats{
display: flex;
margin-top: clamp(32px, 4vw, 56px);
}.sp-part--top-hero .spkh-stats > div{
display: flex;
flex-direction: column-reverse;
gap: 6px;
padding: 0 clamp(18px, 2.6vw, 36px);
border-left: 1px solid rgba(226, 189, 90, .28);
}.sp-part--top-hero .spkh-stats > div:first-child{ padding-left: 0; border-left: 0; }.sp-part--top-hero .spkh-stats dd{
font-family: var(--spkh-serif);
font-weight: 700;
font-size: clamp(30px, 3vw, 44px);
line-height: 1;
letter-spacing: .02em;
font-feature-settings: "palt" 1;
color: var(--spkh-gold);
}.sp-part--top-hero .spkh-stats dd small{ font-size: .5em; margin-left: .08em; }.sp-part--top-hero .spkh-stats dt{
font-size: 12.5px;
letter-spacing: .08em;
color: var(--spkh-soft);
white-space: nowrap;
}.sp-part--top-hero .spkh-note{
margin-top: 14px;
font-size: 11px;
letter-spacing: .06em;
color: var(--spkh-mute);
}.sp-part--top-hero .spkh-toggle{
position: absolute;
z-index: 4;
right: clamp(16px, 3vw, 40px);
bottom: clamp(16px, 3vw, 36px);
display: none;
align-items: center;
gap: 10px;
padding: 10px 14px 10px 12px;
border: 1px solid rgba(251, 248, 241, .28);
border-radius: 999px;
background: rgba(20, 17, 13, .55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--spkh-paper);
font: 500 12px/1 var(--spkh-sans);
letter-spacing: .06em;
cursor: pointer;
}.sp-part--top-hero .spkh.is-live .spkh-toggle{ display: inline-flex; }.sp-part--top-hero .spkh-toggle:hover{ border-color: rgba(251, 248, 241, .6); }.sp-part--top-hero .spkh-toggle:focus-visible{ outline: 2px solid var(--spkh-gold); outline-offset: 3px; }.sp-part--top-hero .spkh-toggle svg{ width: 14px; height: 14px; }.sp-part--top-hero .spkh-toggle .spkh-ic-play{ display: none; }.sp-part--top-hero .spkh.is-paused .spkh-toggle .spkh-ic-play{ display: block; }.sp-part--top-hero .spkh.is-paused .spkh-toggle .spkh-ic-pause{ display: none; }.sp-part--top-hero .spkh.js-armed .spkh-stage{ opacity: 0; transform: scale(1.06); }.sp-part--top-hero .spkh.js-armed .spkh-line > span{ transform: translateY(112%); }.sp-part--top-hero .spkh.js-armed .spkh-fade{ opacity: 0; transform: translateY(14px); }.sp-part--top-hero .spkh.js-armed.is-ready .spkh-stage{
opacity: 1;
transform: none;
transition: opacity 1.6s ease, transform 2.6s cubic-bezier(.2, .7, .2, 1);
}.sp-part--top-hero .spkh.js-armed.is-ready .spkh-line > span{
transform: none;
transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) calc(.35s + var(--i) * .12s);
}.sp-part--top-hero .spkh.js-armed.is-ready .spkh-fade{
opacity: 1;
transform: none;
transition: opacity 1s ease var(--d, 1s), transform 1s cubic-bezier(.2, .8, .2, 1) var(--d, 1s);
}@media screen and (max-width: 900px){.sp-part--top-hero .spkh{ align-items: flex-end; min-height: max(640px, 100svh); }.sp-part--top-hero .spkh-wall{
left: 52%;
top: 34%;
width: 175vw;
height: 120%;
column-gap: 10px;
transform: translate(-50%, -50%) rotateX(26deg) rotateY(-8deg) rotateZ(10deg);
}.sp-part--top-hero .spkh-track figure{ margin-bottom: 10px; }.sp-part--top-hero .spkh-col:nth-child(odd){ transform: translateZ(24px); }.sp-part--top-hero .spkh-col:nth-child(even){ transform: translateZ(-18px); }.sp-part--top-hero .spkh-shade{
background:
linear-gradient(180deg, rgba(20, 17, 13, .35) 0%, rgba(20, 17, 13, .15) 22%, rgba(20, 17, 13, .55) 44%, rgba(20, 17, 13, .94) 62%, var(--spkh-night) 80%);
}.sp-part--top-hero .spkh-content{ padding-top: calc(var(--spkh-top-offset) + 46vh); padding-bottom: 36px; }.sp-part--top-hero .spkh-title{ font-size: clamp(40px, 11.4vw, 72px); }.sp-part--top-hero .spkh-toggle{ top: calc(var(--spkh-top-offset) + 16px); bottom: auto; }
}@media screen and (max-width: 900px) and (max-height: 700px){.sp-part--top-hero .spkh-content{ padding-top: calc(var(--spkh-top-offset) + 34vh); }
}@media screen and (max-width: 480px){.sp-part--top-hero .spkh-stats > div{ padding: 0 14px; }.sp-part--top-hero .spkh-stats > div:first-child{ padding-left: 0; }.sp-part--top-hero .spkh-stats dd{ font-size: 28px; }.sp-part--top-hero .spkh-stats dt{ font-size: 11px; letter-spacing: .04em; }
}@media (prefers-reduced-motion: reduce){.sp-part--top-hero .spkh.is-live .spkh-track{ animation: none; }.sp-part--top-hero .spkh.is-live .spkh-toggle{ display: none; }.sp-part--top-hero .spkh-wall{ transition: none; }
}