/* Top-page motion and layout, 2026-09-18. Static content is always the baseline. */
.kontek-main { background: var(--kp-bg); color: var(--kp-text); overflow: clip; }
.kontek-main .kontek-main-inner { max-width: none; padding: 0; }
.kontek-main .section { padding: 130px 32px; background: var(--kp-bg); }
.kontek-main .section:nth-of-type(even) { background: var(--kp-bg-soft); }
.kontek-main .section-inner { max-width: 1120px; }
.kontek-main .section-header { max-width: 900px; margin-bottom: 64px; text-align: center; }
.kontek-main .section-title { font-size: clamp(30px, 4.4vw, 60px); line-height: 1.28; letter-spacing: -.035em; text-wrap: balance; word-break: keep-all; overflow-wrap: break-word; margin: 0 0 28px; color: var(--kp-text); }
.kontek-main .section-text { font-size: 17px; line-height: 1.95; max-width: 660px; color: var(--kp-text-sub); text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; }
.kontek-main .hero { display: block; min-height: 0; padding: 90px 0 44px; isolation: isolate; background: var(--kp-bg); }
.kontek-main .hero-inner { position: relative; z-index: 1; max-width: 1000px; padding: 0 24px; }
.kontek-main .l-background-movie { z-index: -1; max-height: none; opacity: .6; }
.kontek-main .l-background-movie::after { content: ; position: absolute; inset: 0; background: linear-gradient(0deg, var(--kp-bg) 0%, transparent 70%); }
.kontek-main .l-background-movie video { filter: blur(2px) brightness(.4); }
.kontek-main .hero-app-icon { width: 210px; max-width: 65%; height: auto; margin: 0 auto 26px; opacity: 1; transform: none; transform-origin: center; }
.kontek-main .hero-kicker { font-size: 11px; letter-spacing: .2em; margin: 0 0 24px; color: var(--kp-accent-green); }
.kontek-main .hero-title { font-size: clamp(32px, 5.2vw, 72px); line-height: 1.25; margin: 0 0 28px; letter-spacing: -.04em; color: var(--kp-text); word-break: keep-all; overflow-wrap: break-word; }
.kontek-main .hero-title-line { overflow: visible; }
.kontek-main .hero-title-chunk { animation: none; transform: none; opacity: 1; }
.kontek-main .hero-subtitle { font-size: 17px; line-height: 1.9; max-width: 720px; margin: 0 auto 22px; color: var(--kp-text-sub); text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; }
.kontek-main .hero-meta { color: var(--kp-text-mute); font-size: 12px; margin: 0 0 28px; }
.kontek-main .hero-buttons { gap: 12px; }
.kontek-main .hero-button { min-height: 48px; padding: 12px 22px; font-size: 14px; border-radius: 9999px; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.kontek-main .hero-button.primary { background: var(--kp-accent-green-strong); border-color: var(--kp-accent-green-strong); color: #ffffff; }
.kontek-main .hero-button.primary:hover { background: var(--kp-accent-green); border-color: var(--kp-accent-green); color: #ffffff; }
.kontek-main .hero-button.ghost { background: var(--kp-bg-panel-soft); border: 1px solid var(--kp-border); color: var(--kp-text); }
.kontek-main .hero-button.ghost:hover { color: var(--kp-accent-green); border-color: var(--kp-accent-green); }
.kontek-main .hero-button.secondary { background: var(--kp-bg-panel); border: 1px solid var(--kp-accent-green); color: var(--kp-text); }
.kontek-main .hero-button.secondary:hover { background: var(--kp-accent-green); border-color: var(--kp-accent-green); color: #ffffff; }
/* Visibility must not depend on JavaScript, a CDN, or scroll events. */
.kontek-main .hero-kicker, .kontek-main .hero-title, .kontek-main .hero-subtitle,
.kontek-main .hero-buttons .hero-button, .kontek-main .js-fade-in, .kontek-main .js-fade-up { opacity: 1; transform: none; }
.kontek-main .world-showcase { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; width: min(1280px, calc(100% - 64px)); margin: 96px auto 56px; padding: 24px 0; }
.kontek-main .world-scene { display: block; position: relative; height: clamp(220px,26vw,360px); border-radius: 26px; overflow: hidden; color: #fff; isolation: isolate; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); background: var(--kp-bg-panel); }
.kontek-main .world-scene:nth-child(2) { margin-top: -24px; }
.kontek-main .world-scene::after { content: ; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0, 0, 0, 0.73)); pointer-events: none; }
.kontek-main .world-scene img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.kontek-main .world-scene:hover img { transform: scale(1.04); }
.kontek-main .world-scene > span { position: absolute; z-index: 1; bottom: 28px; left: 28px; font-size: clamp(18px,2vw,26px); font-weight: 700; color: #fff; }
.kontek-main .world-scene small { display: block; font-size: 10px; letter-spacing: .2em; margin-bottom: 8px; color: #d3e9e4; }
.kontek-main .hero-scroll-cue { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: calc(100% - 40px); min-height: 56px; margin: 0 auto; padding: 16px 32px; box-sizing: border-box; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--kp-accent-green-strong), var(--kp-accent-green)); color: #fff; font-size: 18px; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; transition: filter .18s ease, transform .18s ease; }
.kontek-main .hero-scroll-cue:hover { color: #fff; filter: brightness(1.06); text-decoration: none; }
.kontek-main .hero-scroll-cue:active { transform: scale(.98); }
.kontek-main .motion-toggle { display: block; margin: 24px auto 0; padding: 8px 16px; min-height: 40px; border: 1px solid var(--kp-border); border-radius: 9999px; background: var(--kp-bg-panel); color: var(--kp-text-sub); font: inherit; font-size: 12px; cursor: pointer; }
.kontek-main .motion-toggle[hidden] { display: none; }
.kontek-main a:focus-visible, .kontek-main button:focus-visible { outline: 3px solid var(--kp-accent-cyan); outline-offset: 5px; }
.kontek-main .p-front-introduction { background: var(--kp-bg-soft); }
.kontek-main .p-front-introduction__track { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.kontek-main .p-front-introduction__block-inner { height: 100%; padding: 36px 28px; border-radius: 24px; background: var(--kp-bg-panel); border: 1px solid var(--kp-border-soft); }
.kontek-main .p-front-introduction__block-inner p { font-size: 16px; line-height: 1.9; margin: 0; color: var(--kp-text); text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; }
.kontek-main .p-front-introduction__canvas { display: none; }
.kontek-main .p-front-case-mark__list, .kontek-main .p-front-join__steps { gap: 24px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.kontek-main .p-front-case-mark__item, .kontek-main .join-step { border-radius: 24px; padding: 24px; min-width: 0; background: var(--kp-bg-panel); border: 1px solid var(--kp-border-soft); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease; }
.kontek-main .p-front-case-mark__item:hover { transform: translateY(-4px); border-color: var(--kp-accent-green); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12); }
.kontek-main .post-card { border-radius: 0; padding: 0; min-width: 0; background: none; border: none; box-shadow: none; }
/* NEWS: Apple Books「ライブラリ」参考の横マーキー。grid指定は使わない(2026-09-18) */
.kontek-main .p-front-posts__marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.kontek-main .p-front-posts__marquee + .p-front-posts__marquee { margin-top: 20px; }
.kontek-main .p-front-posts__list { display: flex; gap: 20px; width: max-content; animation: kontek-marquee-scroll 34s linear infinite; }
.kontek-main .p-front-posts__marquee--reverse .p-front-posts__list { animation-name: kontek-marquee-scroll-reverse; }
.kontek-main .p-front-posts__marquee:hover .p-front-posts__list, .kontek-main .p-front-posts__marquee:focus-within .p-front-posts__list { animation-play-state: paused; }
@keyframes kontek-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kontek-marquee-scroll-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .kontek-main .p-front-posts__list { animation: none; } }
.kontek-main .post-card-thumb { margin: 0; border-radius: 14px; overflow: hidden; }
.kontek-main .hover-container { position: relative; overflow: hidden; border-radius: 14px; }
.kontek-main .hover-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 300ms ease; }
.kontek-main .post-card-link:hover .hover-content, .kontek-main .post-card-link:focus-visible .hover-content { opacity: 1; }
.kontek-main .marquee-cta { display: inline-block; border-radius: 980px; background: #ffffff; color: #1d1d1f; font-size: 14px; font-weight: 600; padding: 11px 21px; transform: translateY(15px); transition: transform 400ms ease; }
.kontek-main .post-card-link:hover .marquee-cta, .kontek-main .post-card-link:focus-visible .marquee-cta { transform: translateY(0); }
.kontek-main .c-case-mark-list__item-title { font-size: 22px; margin: 24px 0 12px; color: var(--kp-text); }
.kontek-main .c-case-mark-list__item-description, .kontek-main .join-step p { font-size: 15px; line-height: 1.9; color: var(--kp-text-sub); text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; }
.kontek-main .post-title { font-size: 17px; margin: 16px 4px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--kp-text); }
.kontek-main .post-date { color: var(--kp-text-mute); margin: 0 4px 12px; }
.kontek-main .join-step { padding: 32px; }
.kontek-main .join-step h3 { font-size: 20px; margin: 16px 0; color: var(--kp-text); }
.kontek-main .step-num { font-size: 12px; color: var(--kp-accent-green); }
@media (max-width: 1023px) {
 .kontek-main .section { padding: 88px 24px; }
 .kontek-main .hero { padding: 68px 0 36px; }
 .kontek-main .world-showcase { gap: 16px; width: calc(100% - 40px); margin-top: 64px; }
 .kontek-main .world-scene > span { left: 18px; bottom: 20px; }
 .kontek-main .p-front-introduction__track { grid-template-columns: minmax(0, 1fr); }
 .kontek-main .p-front-case-mark__list, .kontek-main .p-front-join__steps { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
 .kontek-main .post-card { width: 260px; }
}
@media (max-width: 600px) {
 .kontek-main .section { padding: 72px 20px; }
 .kontek-main .hero { padding: 56px 0 32px; }
 .kontek-main .hero-inner { padding-inline: 20px; }
 .kontek-main .hero-app-icon { width: 180px; }
 .kontek-main .hero-title { font-size: clamp(27px,7vw,42px); line-height: 1.38; }
 .kontek-main .hero-kicker { font-size: 9px; letter-spacing: .13em; }
 .kontek-main .hero-subtitle, .kontek-main .section-text { font-size: 15px; }
 .kontek-main .hero-subtitle br, .kontek-main .section-text br { display: none; }
 .kontek-main .hero-buttons { gap: 10px; }
 .kontek-main .hero-button { font-size: 12px; padding: 10px 16px; }
 .kontek-main .world-showcase { gap: 12px; width: calc(100% - 32px); margin: 48px auto 28px; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .kontek-main .world-scene { height: 176px; border-radius: 18px; }
 .kontek-main .world-scene:nth-child(2) { grid-column: 1 / -1; grid-row: 1; height: 228px; margin-top: 0; }
 .kontek-main .world-scene > span { left: 14px; bottom: 16px; font-size: 15px; }
 .kontek-main .world-scene small { font-size: 9px; }
 .kontek-main .section-header { margin-bottom: 40px; }
 .kontek-main .section-title { font-size: clamp(27px,7vw,38px); }
}
@media (prefers-reduced-motion: reduce) {
 .kontek-main *, .kontek-main *::before, .kontek-main *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 .kontek-main .l-background-movie { display: none; }
}