/* design11 — Skillova localisation layer for the design2 shell.
*
* The vendored stylesheet (design11-assets/assets/landing/style.css) sets type
* with the `font:` shorthand in dozens of rules, all naming only "LayGrotesk",
* which has no Japanese glyphs. Rather than re-declare every one of those
* rules, we register additional @font-face entries under the SAME family name
* restricted to Japanese unicode ranges. Latin keeps LayGrotesk; kana and kanji
* resolve to a system Japanese face. No layout rule changes.
*/
@font-face {
font-family: "LayGrotesk";
src: local("Hiragino Sans W4"), local("HiraginoSans-W4"), local("Hiragino Kaku Gothic ProN W3"),
local("Noto Sans JP"), local("NotoSansJP-Regular"), local("Yu Gothic Medium"), local("YuGothic-Medium"),
local("Meiryo");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+2000-206F, U+2190-21FF, U+25A0-25FF, U+3000-30FF, U+31F0-31FF, U+3200-32FF, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
font-family: "LayGrotesk";
src: local("Hiragino Sans W6"), local("HiraginoSans-W6"), local("Hiragino Kaku Gothic ProN W6"),
local("Noto Sans JP Medium"), local("NotoSansJP-Medium"), local("Yu Gothic Bold"), local("YuGothic-Bold"),
local("Meiryo Bold");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+2000-206F, U+2190-21FF, U+25A0-25FF, U+3000-30FF, U+31F0-31FF, U+3200-32FF, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
font-family: "LayGrotesk";
src: local("Hiragino Sans W8"), local("HiraginoSans-W8"), local("Hiragino Kaku Gothic StdN W8"),
local("Noto Sans JP Bold"), local("NotoSansJP-Bold"), local("Yu Gothic Bold"), local("YuGothic-Bold"),
local("Meiryo Bold");
font-weight: 800;
font-style: normal;
font-display: swap;
unicode-range: U+2000-206F, U+2190-21FF, U+25A0-25FF, U+3000-30FF, U+31F0-31FF, U+3200-32FF, U+4E00-9FFF, U+FF00-FFEF;
}
/* Same trick for the mono face used by .label / .label-s. */
@font-face {
font-family: "PPNeueMontrealMono";
src: local("Hiragino Sans W4"), local("HiraginoSans-W4"), local("Hiragino Kaku Gothic ProN W3"),
local("Noto Sans JP"), local("NotoSansJP-Regular"), local("Yu Gothic Medium"), local("YuGothic-Medium"),
local("Meiryo");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+2000-206F, U+2190-21FF, U+25A0-25FF, U+3000-30FF, U+31F0-31FF, U+3200-32FF, U+4E00-9FFF, U+FF00-FFEF;
}
/* LP の文字の段と揃えの決まり (2026-10-05) ==================================
* 文字の大きさ・行間・字間は、ここで宣言した変数だけで決める。この下の規則は
* 変数を参照するだけで、px や clamp() を直接は書かない (test/landing-type-scale
* .test.ts が、この :root の外に生の font-size が増えていないことを確かめる)。
* 正本は SPEC.md「LP の文字の段と揃え」。
*
* 段 (普通の文字。同じ役割なら、どのセクションでも同じ値):
* heading セクションの見出し (h2)。8 つのセクションすべて
* card-title 札の見出し (できることの h3、よくある質問の問い)
* body 本文 (使いかた 4 段・できること・場面・よくある質問の答え)
* note 補足・注記・表と箇条書き (料金の箇条書きと注記、比較表、ロゴの帯の注記)
* label 等幅の小さなラベル (プラン名、表の頭、「横にスライド」)
* lead ヒーローのリード文
* callout 吹き出し
* 演出 (意図して大きい所。見出しの段とは混ぜない。1 つずつ名前で持つ):
* display-hero ヒーローの見出し (1 文字ずつ組み上がる)
* display-pin 「書くのは、いつもの場所で。」(スクロールで止まって色が変わる)
* display-marquee 「さあ、自分を入れよう。」(横に流れる)
* display-closing 締めの「あなたは、もうスキルだ。」(1 文字ずつ入れ替わる)
* display-price 料金の「¥0」
* display-numeral 使いかた 4 段の「#1」〜「#4」
*
* 揃えの決まり:
* セクションの見出し・吹き出し・リード・セクションの注記 … 中央
* 絵が主役の札 (使いかた 4 段、場面 7 枚) の文 … 中央
* 読む札 (できること、料金、比較表、よくある質問) の中 … 左
* 吹き出しは、吹き出しの箱の中心を見出しの中心に合わせる (キャラクターは外側) */
:root {
--lp-type-heading: clamp(28px, 3.4vw, 46px);
--lp-lh-heading: 1.34;
--lp-ls-heading: -.02em;
--lp-type-card-title: clamp(18px, 1.4vw, 21px);
--lp-lh-card-title: 1.5;
--lp-type-body: clamp(15px, 1.25vw, 17px);
--lp-lh-body: 1.8;
--lp-type-note: 14px;
--lp-lh-note: 1.75;
--lp-type-label: 13px;
--lp-type-lead: 18px;
--lp-lh-lead: 38px;
--lp-type-callout: 15px;
--lp-display-hero: clamp(40px, 3.9vw, 64px);
--lp-display-pin: min(5vw, 60px);
--lp-display-pin-mob: clamp(26px, 7.8vw, 44px);
--lp-display-marquee: 125px;
--lp-display-closing: clamp(30px, 6.8vw, 84px);
--lp-display-price: clamp(44px, 4.6vw, 62px);
--lp-display-numeral: 120px;
}
@media (max-width: 1024px) {
:root { --lp-display-marquee: 100px; }
}
@media (max-width: 900px) {
:root { --lp-type-callout: 14px; }
}
@media (max-width: 768px) {
:root { --lp-display-marquee: clamp(46px, 13.5vw, 72px); }
}
@media (max-width: 540px) {
:root {
--lp-type-callout: 12px;
--lp-type-lead: 14px;
--lp-lh-lead: 28px;
--lp-display-hero: clamp(28px, 8.4vw, 33px);
}
}
/* 日本語の書体 (2026-10-06): 日本語の Web フォントは読み込まない。読み込むのは欧文の
* LayGrotesk と PPNeueMontrealMono だけで、日本語は端末に入っている書体で出る
* (font-family の "Hiragino Sans" / "Noto Sans JP" / sans-serif は、端末にあるものを
* 順に選ぶ指定)。@font-face の定義が無かった「Noto Sans JP」のローカル版の名前は、指定から外した。 */
/* Japanese sets wider than Latin at the same point size, so the closing
* headline's tracking is relaxed. */
.title-xl {
letter-spacing: 0;
}
.h-hero .wording {
letter-spacing: -0.01em;
}
.h-texts .paragraph {
letter-spacing: -0.01em;
}
/* Honeypot for the waitlist form: never shown, never focusable. */
.hp-field {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* The vendored sheet forces `dlig`/`hlig`/`cswh` on every text element, which is
* harmless for the Latin display face but destructive in Japanese: those
* features map ます -> 〼 (masu mark), より -> ゟ, コト -> ヿ, so ordinary
* sentence endings render as a single unreadable glyph. Keep the standard
* ligatures and kerning, drop the discretionary ones. */
a, button, h1, h2, h3, h4, h5, h6, li, p, span, ul, div, dt, dd, input, sup, i {
font-feature-settings: "liga" 1, "ss02" 1 !important;
}
/* The footer's per-character reveal masks were cut for Latin capitals, whose
* glyphs sit well inside the line box. Japanese kana and kanji reach higher, so
* the 2%/5% top edge shaves their tops off. Open the top of the mask; the
* bottom edge is the one that actually hides the duplicate character. */
.anim-title1 { clip-path: polygon(0 -12%, 0 90%, 100% 90%, 100% -12%); }
.anim-title2 { clip-path: polygon(0 -12%, 0 106%, 100% 106%, 100% -12%); }
.anim-title3 { clip-path: polygon(0 -12%, 0 110%, 100% 110%, 100% -12%); }
/* The comparison graphic is a half-column on phones, where its type became
* unreadable. Give it the full width there. */
@media (max-width: 900px) {
.h-about .nous { width: 100%; margin-top: 48px; aspect-ratio: 1.5; }
}
/* Japanese type scale -----------------------------------------------------
* The display sizes were set for a condensed Latin grotesque. Full-width kana
* and kanji carry far more ink at the same point size, so every headline slot
* comes down a step and gains a little line-height. */
/* design2 の 6 段 (.title-xl 〜 .title-xxs) は、セクションごとに別の大きさを
* 上書きされて 5 種類の「見出し」になっていた。段は宣言した 3 つに畳む:
* .title-xl = 締めの演出、.title-l / -m / -s / -xs = セクションの見出し、
* .title-xxs = 本文。 */
.title-xl { font-size: var(--lp-display-closing); }
.title-l,
.title-m,
.title-s,
.title-xs {
font-size: var(--lp-type-heading);
line-height: var(--lp-lh-heading);
letter-spacing: var(--lp-ls-heading);
}
.title-xxs {
font-size: var(--lp-type-body);
line-height: var(--lp-lh-body);
letter-spacing: 0;
}
.h-hero .title-s { font-size: var(--lp-display-hero); }
/* Body copy is the half of the jump ratio that never scaled: 18px at 375,
* at 768 and at 1385 alike, against a heading that clamps from 23 to 37. On a
* phone that reads as one undifferentiated block. These are the sizes that
* move, so they carry the contrast. */
.body-s { font-size: var(--lp-type-body); line-height: var(--lp-lh-body); }
.h-cards .m1 p, .h-cards .m2 p, .h-cards .m3 p, .h-cards .m4 p {
font-size: var(--lp-type-body);
line-height: var(--lp-lh-body);
}
.h-cards .media > span { font-size: var(--lp-display-numeral); }
/* Inverted experiment ------------------------------------------------------
* Toggle with ?invert=1 (see design11.js). app2.js contains no colour literals
* at all — every surface reads these custom properties — so remapping the
* tokens flips the whole page, headers and scroll-driven section changes
* included. The .mp4 pieces are baked on black and are NOT affected; they need
* a re-render to match. */
body.invert {
--black: #f1f1f1;
--white: #121212;
--dark-grey: #e8e8e6;
--dark-grey2: #dcdcda;
--text-grey: #8a8a8a;
--mwg2-white: #0a0a0b;
--mwg2-light-grey: #16161a;
--mwg2-grey: #6f6f6f;
--mwg2-dark-grey: #dcdcda;
--mwg2-anthracite: #ececeb;
--mwg2-black: #fafaf8;
}
body.invert .logo { filter: invert(1); }
body:not(.menu-white).invert header .link-logo { filter: none; }
/* The comparison card is real copy set inside a PNG, so at design2's 3 columns
* (~290px on a 1280 viewport) its type falls under 10px. 5 columns puts it at
* ~500px, still under the 652px the file actually carries. */
.h-about .nous { width: calc((5 * var(--grid-column-width)) + (5 - 1) * var(--grid-gutter)); }
/* The AI roster ----------------------------------------------------------
* Real product marks (design11-assets/assets/ai/, sourced in SOURCES.md), not
* names set in generated SVGs. Several of these icons are unrecognisable on
* their own, so each carries its name — the row is a list of what connects,
* and it has to be readable as one. app2.js drives the marquee. */
/* `.label` is 13px mono, sized for one-word tags; this one is a two-line
* note. It is the same sentence as the note in `.app-sec`, so it takes the
* same step (it used to run from 15px to 22px, larger than the body copy). */
.h-trust .label {
font-size: var(--lp-type-note);
line-height: var(--lp-lh-note);
letter-spacing: 0;
color: var(--mwg2-grey);
}
.h-trust .logos > div { gap: 74px; padding: 0 37px; align-items: center; }
.h-trust .ai-logo {
display: inline-flex;
align-items: center;
gap: 14px;
white-space: nowrap;
}
.h-trust .ai-logo img {
width: 57px;
height: 57px;
object-fit: contain;
border-radius: 9px;
flex: none;
}
.h-trust .ai-logo b {
font-weight: 500;
font-size: 19px;
letter-spacing: .01em;
color: var(--mwg2-white);
}
@media (max-width: 768px) {
.h-trust .logos > div { gap: 40px; padding: 0 20px; }
.h-trust .ai-logo img { width: 45px; height: 45px; }
.h-trust .ai-logo b { font-size: 16px; }
}
/* The FAQ accordion ran straight into the panel below it. */
.app-sec { margin-top: 100px; }
/* The connected-workspace panel ------------------------------------------
* design2 used this slot for a Mac-app promo and hid the whole section below
* 1024px. It now carries real content — design10's moving AI-logo carousel —
* so it has to survive on a phone. The two-column split is design10's own. */
.app-sec { display: flex; }
/* the CTA was hard up against the headline above and the note below */
.app-sec .cta-main { margin-top: 42px; }
.app-sec .label-s { margin-top: 42px; font-size: var(--lp-type-note); line-height: var(--lp-lh-note); }
@media (max-width: 1024px) {
.app-sec { display: flex; flex-direction: column; gap: 32px; padding: 30px; }
.app-sec .right.design10-app-visual { width: 100%; max-width: 100%; }
}
/* design2 split this section into a kicker column and an 8-of-12 content
* column offset to the right, which was fine for a paragraph and is wrong for a
* table: it sat off-centre and ran narrow. Stack it and centre it instead. */
/* gap: 0 because the vendored sheet gives this section a 25px flex gap below
* 900px, which stacked on the callout's own margin and made this the one
* section whose kicker sat 52px from its heading instead of 28. */
.h-about { flex-direction: column; align-items: center; text-align: center; gap: 0; }
.h-about .left { height: auto; margin-bottom: 24px; }
.h-about .right { width: 100%; max-width: 880px; padding: 0; }
.h-about .title-xs { margin: 0 auto; }
/* app2.js writes to `.num_effect` and `.date_effect` without a null guard
* (`U.textContent = …`), so the two chips stay in the DOM and are hidden
* instead of removed — deleting them throws during init and takes everything
* after it down. design11.js's date translation is guarded and simply idles. */
.h-latest .num_effect,
.h-latest .date_effect { display: none; }
/* The footer sat on flat #fff while every other light band on the page is
* #f3f3f3 (.h-latest, the pricing section). Match them, and keep the crew's
* arrival from widening the page. */
footer.sec-white::before { background: #f3f3f3; }
footer { overflow-x: clip; }
/* design2 stacked a 120px bottom padding on `.top` and a 110px top padding on
* the headline, which put 118px between the crew and the line they are
* introducing while every other section sits at 28. One margin decides it. */
footer .content .top { padding: 90px 0 0; }
footer .content .title-xl { padding-top: 0; }
/* The link columns and the waitlist form are gone, so the closing statement now
* sits directly on the legal rule. That rule needs room of its own — design2's
* 280px was reserved for a block that no longer exists. */
/* 64, not 96: the link row belongs closer to the closing CTA than to the very
* bottom of the page. */
footer .content .top { padding-bottom: 64px; }
/* design2 kept 30px (20 on a phone) under `.content`, inside the panel and
* below everything in it. With the credit already spaced by `.footer-end`, that
* was a second, invisible floor — the whole distance below the credit belongs
* to one rule now. */
footer .content { padding-bottom: 0; }
/* The credit sits under the links, centred, at every width — `column-reverse`
* because in source order it comes first, which was right when this was a row
* with the credit at the far left and wrong the moment it stacked. */
footer .content .footer-end {
flex-direction: column-reverse;
align-items: center;
/* the credit is a separate register from the links — a 26px gap read as a
fifth item in the same list */
gap: 54px;
/* 30, not 64: `footer .content` already carries 30px of its own below this,
so 64 put 94px of nothing under a one-line credit. */
padding-bottom: 30px;
text-align: center;
}
footer .content .footer-end .col1 { width: 100%; justify-content: center; }
footer .links-sec { flex-wrap: wrap; justify-content: center; gap: 14px 30px; }
@media (max-width: 768px) {
/* On a phone the closing block already ends 160px above the rule (the CTA
stack is centred in a tall column), so another 96px read as the footer
having lost something. And `.footer-end` wraps into two flex lines there:
©, then the four links breaking mid-row at whatever width they happened to
reach. Stack it deliberately instead. */
footer .content .top { padding-bottom: 30px; }
/* Seven items of very different lengths wrap into a ragged block on a narrow
screen, so they stack one per line here. */
footer .content .footer-end { gap: 46px; padding-bottom: 22px; }
footer .links-sec { flex-direction: column; align-items: center; gap: 16px; }
}
/* Authored line breaks -----------------------------------------------------
* design2 sets `.h-features .title-s` to a fixed 580px, which is what made
* this heading fall to three ragged lines. The width goes; where the line
* turns is stated in the markup with `
` instead, so it
* breaks after a particle rather than wherever 580px happens to land. Below
* the breakpoint the break is removed and the text wraps to the gutter. */
.h-features .title-s { width: auto; max-width: 100%; }
.br-pc { display: none; }
@media (min-width: 769px) {
.br-pc { display: inline; }
}
/* The console mock fills its frame ----------------------------------------
* design2's slot was a wide white card with a phone screenshot tucked into the
* bottom-right corner: `aspect-ratio: 1.6`, `align-items: flex-end`, and a
* screen 8 of the frame's 10 columns. Against a 1600x1040 recording that left
* a band of white above it and a column of white beside it. The clip is the
* card now. */
.h-learn .visual {
aspect-ratio: auto;
align-items: stretch;
padding: 0;
overflow: hidden;
}
.h-learn .screen {
width: 100%;
height: auto;
margin: 0;
display: block;
border-radius: var(--mwg2-radius-l);
}
/* Responsive corrections --------------------------------------------------
* Measured at 375px. The page's gutter is 15px (`--grid-margin`); these are
* the places that did not honour it, or that design2 sized for content this
* page no longer has. */
@media (max-width: 900px) {
.h-learn .visual { width: 100%; max-width: none; }
}
@media (max-width: 768px) {
/* design2 cropped this slot to a square and pinned it bottom-right, which
* was right for a phone screenshot and wrong for a 1600x1040 screen
* recording — it showed one corner of the clip at a third of its size. */
.h-learn .screen {
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
border-radius: var(--mwg2-radius-m);
}
/* ran edge to edge while every neighbour sat on the 15px gutter */
.h-trust .label { padding-left: var(--grid-margin); padding-right: var(--grid-margin); }
/* 10 of 12 columns leaves this sitting 78px in while its neighbours sit on
* the 15px gutter */
.h-learn .visual { width: 100%; max-width: none; }
/* design2 gave this section 10 of 12 columns, which on a phone reads as a
* panel indented 45px inside a page indented 15px */
.app-sec {
width: calc(100% - 2 * var(--grid-margin));
max-width: none;
margin-left: auto;
margin-right: auto;
}
}
/* Comparison table --------------------------------------------------------
* Replaces a paragraph of prose and a PNG of the same comparison. On the black
* ground the three columns were all shades of grey and read as a wall, so the
* table sits on a white card with the Skillova column tinted.
*
* That tint is a full grid column, not a background nudged around with negative
* margins: the card carries no padding of its own and every cell pads itself,
* so the band runs edge to edge and `overflow: hidden` clips it to the card's
* corners. Anything else leaves the band with gutters that match nothing. */
.h-about .cmp {
margin: 30px 0 0;
padding: 0;
overflow: hidden;
text-align: left;
background: var(--mwg2-white);
border-radius: var(--mwg2-radius-l);
color: var(--mwg2-black);
}
/* `align-items: baseline` sizes each cell to its own content, so the empty
* corner cell of the head row came out short and its rule sat above the other
* two. Stretch instead: equal-height cells, rules that line up. */
.h-about .cmp-row {
display: grid;
grid-template-columns: 1.05fr 1fr 1.2fr;
gap: 0;
align-items: stretch;
}
.h-about .cmp-row p {
margin: 0;
padding: 20px 24px;
font-size: var(--lp-type-note);
line-height: var(--lp-lh-note);
border-bottom: 1px solid #ebe9e4;
}
.h-about .cmp-row:last-child p { border-bottom: 0; }
.h-about .cmp-k { color: #46443f; padding-left: 32px; }
.h-about .cmp-a { color: #97948d; }
.h-about .cmp-b {
color: var(--mwg2-black);
background: #f4f3ef;
padding-right: 32px;
border-bottom-color: #e3e0d8;
}
.h-about .cmp-head p {
padding-top: 24px;
padding-bottom: 14px;
font-family: "PPNeueMontrealMono";
/* 11px column headers on a 1000px table — small at every width, not just on
* the phone. */
font-size: var(--lp-type-label);
letter-spacing: .1em;
text-transform: uppercase;
color: #97948d;
border-bottom-color: #e2dfd8;
}
.h-about .cmp-head .cmp-b { color: var(--mwg2-black); }
.h-about .cmp-note { margin-top: 18px; color: var(--mwg2-grey); font-size: var(--lp-type-note); line-height: var(--lp-lh-note); }
/* Keep the comparison table legible on phones. A three-column comparison is
* easier to scan when its columns remain aligned, so the card itself becomes
* the horizontal scroll surface instead of forcing Japanese copy into narrow,
* mismatched blocks. */
@media (max-width: 600px) {
.h-about .cmp {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
touch-action: pan-x;
}
.h-about .cmp-row {
/* 640, not 620: the last cell (「使った投稿の題名・URLを示す」) was one
* character too long for its column and dropped 「す」 to a line of its own */
min-width: 640px;
grid-template-columns: 1.05fr 1fr 1.2fr;
}
.h-about .cmp-row p {
padding: 15px 18px;
}
.h-about .cmp-k {
grid-column: auto;
padding-left: 22px;
background: transparent;
border-top: 0;
color: #46443f;
}
.h-about .cmp-b { padding-right: 24px; }
.h-about .cmp-head .cmp-k { display: block; }
.h-about .cmp-row:last-child .cmp-k { border-bottom: 0; }
}
/* FAQ ---------------------------------------------------------------------
* Replaces the "BOXの中身" scatter, and finally gives the three #faq links in
* the nav and footer somewhere to land. The accordion itself is design2's
* `.f-quest`, which app2.js already drives — only the section frame is ours. */
.h-faq {
padding: 150px 0 40px;
background: var(--mwg2-black);
position: relative;
z-index: 2;
}
/* the heading sat on the wrapper's left edge while the accordion below it is
* centred — two different axes in one section */
.h-faq .inner-faq { margin-bottom: 60px; text-align: center; }
.h-faq .inner-faq .title-m { margin-top: 18px; }
/* `.diode` pins its dot to the element's left edge, so centring only the text
* strands the dot at the far side of a full-width block. Shrink the block to
* its content instead and the dot travels with it. */
.h-faq .inner-faq .diode { width: max-content; margin: 0 auto; }
.h-faq .f-quest > div { border-color: #2c2c2e; background: #131315; }
/* design2's `.f` utility wraps, and the inline SVG has a viewBox but no
* intrinsic size — so the icon dropped to its own line and blew up to a 638px
* square, which app2.js then measured as the collapsed height. */
.h-faq .f-quest summary { align-items: center; flex-wrap: nowrap; gap: 24px;
font-size: var(--lp-type-card-title); line-height: var(--lp-lh-card-title); }
.h-faq .f-quest summary img { flex: 0 0 14px; width: 14px; height: 14px; }
.h-faq .f-quest summary span { line-height: var(--lp-lh-card-title); }
.h-faq .f-quest p { font-size: var(--lp-type-body); line-height: var(--lp-lh-body); color: var(--mwg2-grey); }
@media (max-width: 768px) {
.h-faq { padding-top: 110px; }
}
/* Body copy on the black ground was set for a lighter face; lift the greys so
* the small Japanese text holds up. */
:root {
--mwg2-grey: #adadad;
--text-grey: #9a9a9a;
/* Every outlined thing on the space ground draws this exact line: the
* librarian cards, the flow clips, the FAQ rows, the connect card and the
* two outlined CTAs. They arrived from three design2 sections with three
* different hairlines (1px at 38%, 2px charcoal, 1px at 92%) and read as
* unrelated. One width, one colour, defined once. */
--sk-card-line: 2px solid rgba(255, 255, 255, .72);
}
.h-features .bottom { color: #adadad; }
.testi .label-s { color: #9d9d9d; }
/* Cards on the space ground ------------------------------------------------
* These began as dark-on-dark, became white paper cards, and are now outlines:
* no fill at all, a white hairline, and the universe running straight through
* them. The clips inside were re-rendered with an alpha channel to match — a
* black-grounded video inside a see-through card would read worse than the
* paper card did. Everything below re-sets type and hairlines that were tuned
* for the white ground. */
.h-features .feature {
background: transparent;
border: var(--sk-card-line);
border-radius: var(--mwg2-radius-l);
overflow: hidden;
}
/* Flush to the card's top edge, the dark clip simply becomes the card: the
* white only survives behind `.bottom`, so the frame reads as cut off. Inset it
* and the card is a white card again, with a screen sitting inside it. */
.h-features .feature video {
width: calc(100% - 42px);
margin: 21px 21px 0;
border-radius: 12px;
}
/* One inset all the way round. The clip sits 21px in from three sides, so the
* copy has to end 21px from the bottom or the card reads as bottom-heavy. */
.h-features .feature .bottom {
padding: 33px 21px 21px;
color: rgba(255, 255, 255, .74);
gap: 12px;
}
/* Equal-height cards, without the slack landing under the copy: make the card a
* column and let the clip grow. The shorter cards then absorb the difference in
* the video, and every card still ends 21px under its last line. */
.h-features .features { align-items: stretch; }
.h-features .feature { display: flex; flex-direction: column; }
.h-features .feature video { flex: none; }
.h-features .feature .bottom { flex: 1; }
/* Copy runs 2 or 3 lines depending on the card, and that one-line difference
* was the last thing making the bottoms uneven. Reserve three lines so every
* text block is the same height whatever it happens to say. */
.h-features .feature .bottom p { min-height: calc(3 * 1.8em); }
.h-features .feature .bottom h3 {
color: #ffffff;
font-size: var(--lp-type-card-title);
line-height: var(--lp-lh-card-title);
}
.h-features .feature .bottom p {
color: rgba(255, 255, 255, .74);
font-size: var(--lp-type-body);
line-height: var(--lp-lh-body);
}
.h-features .feature .diode::before,
.h-features .feature .diode::after { background: #ffffff; }
/* `.to-wf` (the 発動区分 link) was removed from the sixth card. */
.h-testis .testi .mask,
.h-testis .testi .content {
background: var(--mwg2-white);
border-radius: var(--mwg2-radius-l);
}
.h-testis .testi .content {
padding: 30px 30px 26px;
gap: 22px;
}
.h-testis .testi .title-xxs {
color: var(--mwg2-black);
font-size: var(--lp-type-body);
line-height: var(--lp-lh-body);
letter-spacing: 0;
/* The copy runs 4 or 5 lines depending on the card, which left the row at
* two different heights. Reserve the longest so the block is the same box
* whatever it says — the cards then match without touching the copy. */
min-height: calc(5 * 1.8em);
}
/* `.label-s` is 11px mono meant for one-word tags; here it carries three lines
* of Japanese, which at that size is unreadable on a white card. */
.h-testis .testi .label-s {
color: #5c5c5c;
font-size: var(--lp-type-note);
line-height: var(--lp-lh-note);
letter-spacing: 0;
}
.h-testis .testi .top { gap: 18px; align-items: center; }
/* The ring and fill came from design2's avatar treatment. These are bare
* emoji, so there is nothing for a frame to hold — drop it and let the glyph
* be the object. */
.h-testis .testi .top img {
border: 0;
background: transparent;
border-radius: 0;
width: 84px;
height: 84px;
flex: none;
}
/* The four step cards ------------------------------------------------------
* design2's set was mint / lime / sky / off-white. Re-keyed to lime, pink,
* beige, grey; the pink and beige are sampled from the reference the palette
* was asked to match. */
.h-cards .m1 { background-color: #c9fe6e; }
.h-cards .m2 { background-color: #f2a2ae; }
.h-cards .m3 { background-color: #cfc3a6; }
.h-cards .m4 { background-color: #d6d6d2; }
/* the big step number now reads as a tag, so the hash needs to sit tight to
* the digit rather than float in the middle of a centred line */
.h-cards span { letter-spacing: -.02em; }
/* Use-case cards were sized for the dark treatment and now run tall and empty
* on white; let them take their content's height. */
.h-testis .testi,
.h-testis .testi .mask { height: auto; }
.h-testis .testi .content { min-height: 0; }
/* Pricing ------------------------------------------------------------------
* design2's card put the free tier in a rotated sticker, the included list at
* 12deg, and the paid price in a dark panel nested inside a white card — three
* grounds and two type angles for four facts. Rebuilt as one white slab that
* still straddles the white/black seam (that overlap is the section's whole
* gesture), with the billing switch on top and the two plans as peers below,
* split by the dashed rule the sheet already uses on `.card-top::after`.
* app2.js's toggle drove `.toggle-price` / `.center1` / `.center2`; none of
* those class names survive here, so its click branch never fires and the
* switch is design11.js's own. */
.sk-pricing-section .sk-pricing {
position: relative;
z-index: 1;
width: min(920px, calc(100vw - 2 * var(--grid-margin)));
margin: -350px auto 0;
}
.sk-pricing-section .sk-slab {
background: var(--mwg2-white);
color: var(--mwg2-black);
border-radius: var(--mwg2-radius-l);
padding: 34px 0 0;
overflow: hidden;
}
/* billing switch */
.sk-pricing-section .sk-billing {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 0 0 30px;
}
.sk-pricing-section .sk-bill-opt {
min-height: 44px;
padding: 0 4px;
background: none;
font-size: 15px;
letter-spacing: .02em;
color: #9a9a9a;
cursor: pointer;
transition: color .25s;
}
.sk-pricing-section .sk-bill-opt.is-on { color: var(--mwg2-black); }
/* the discount is the reason to look at the year column at all, so it is a
* badge rather than a superscript footnote */
.sk-pricing-section .sk-bill-opt sup {
font-family: "PPNeueMontrealMono";
font-size: var(--lp-type-label);
letter-spacing: .04em;
margin-left: 9px;
padding: 5px 11px;
border-radius: 999px;
background: var(--yellow);
color: var(--mwg2-black);
vertical-align: 2px;
top: 0;
}
.sk-pricing-section .sk-bill-track {
width: 46px;
min-height: 44px;
flex: none;
border-radius: 999px;
background: #e6e4de;
cursor: pointer;
padding: 13px 4px;
display: flex;
}
.sk-pricing-section .sk-bill-knob {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--mwg2-black);
transition: transform .28s cubic-bezier(.4, 1.4, .5, 1);
}
.sk-pricing-section .sk-bill-track[aria-pressed="true"] .sk-bill-knob { transform: translateX(20px); }
/* the two plans, as peers */
.sk-pricing-section .sk-plans {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px dashed #d8d5cd;
}
.sk-pricing-section .sk-plan {
padding: 38px 40px 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.sk-pricing-section .sk-plan + .sk-plan { border-left: 1px dashed #d8d5cd; }
.sk-pricing-section .sk-plan-name {
display: flex;
align-items: center;
gap: 10px;
font-family: "PPNeueMontrealMono";
font-size: var(--lp-type-label);
letter-spacing: .14em;
text-transform: uppercase;
color: #6b6b6b;
}
.sk-pricing-section .sk-badge {
font-family: "LayGrotesk";
font-size: 11px;
letter-spacing: .04em;
text-transform: none;
color: var(--mwg2-black);
background: var(--yellow);
border-radius: 999px;
padding: 4px 10px;
}
/* Both amounts share one grid cell so switching cycles cannot shift the list
* below; only one carries `.sk-off` at a time. */
.sk-pricing-section .sk-price {
display: grid;
margin: 16px 0 0;
font-size: var(--lp-display-price);
line-height: 1;
letter-spacing: -.02em;
}
.sk-pricing-section .sk-price .sk-amount { grid-area: 1 / 1; }
.sk-pricing-section .sk-unit {
display: grid;
margin: 12px 0 0;
min-height: 2.9em;
font-size: var(--lp-type-note);
line-height: var(--lp-lh-note);
color: #6b6b6b;
}
.sk-pricing-section .sk-unit > span { grid-area: 1 / 1; }
.sk-pricing-section .sk-off { opacity: 0; pointer-events: none; }
.sk-pricing-section .sk-list {
display: grid;
gap: 11px;
margin: 26px 0 32px;
font-size: var(--lp-type-note);
line-height: var(--lp-lh-note);
color: #3d3d3d;
}
.sk-pricing-section .sk-list li { position: relative; padding-left: 22px; }
.sk-pricing-section .sk-list li::before {
content: "";
position: absolute;
left: 2px;
top: .65em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mwg2-black);
}
.sk-pricing-section .sk-list b { font-weight: 500; color: var(--mwg2-black); }
/* the CTA sits on the card's baseline whichever list runs longer */
.sk-pricing-section .sk-plan .sk-cta { margin-top: auto; width: 100%; justify-content: center; }
/* cta-main1's light-grey ground is nearly the slab's own white, so the free
* plan's button needs an edge to read as a button at all. */
.sk-pricing-section .sk-plan .cta-main1 { box-shadow: inset 0 0 0 1px #dedbd3; }
.sk-pricing-section .sk-plan .sk-cta img { width: 9px; }
.sk-pricing-section .sk-note {
margin: 22px auto 0;
max-width: 620px;
font-size: var(--lp-type-note);
text-align: center;
line-height: var(--lp-lh-note);
color: var(--mwg2-grey);
}
@media (max-width: 768px) {
.sk-pricing-section .sk-pricing { margin-top: -300px; }
.sk-pricing-section .sk-plans { grid-template-columns: 1fr; }
.sk-pricing-section .sk-plan { padding: 30px 26px 32px; }
.sk-pricing-section .sk-plan + .sk-plan { border-left: 0; border-top: 1px dashed #d8d5cd; }
.sk-pricing-section .sk-unit { min-height: 0; }
.sk-pricing-section .sk-list { margin-bottom: 26px; }
}
/* The clips run on the dark ground: white type on near-black reads far better
* at the size these play (≈400px wide) than dark-on-paper did, and the slab
* separates itself from the white card without needing a rule. The background
* matters — it is what shows while a clip is still loading. */
/* No ground behind the clip either: it carries its own alpha, and a fill here
* would show through every transparent pixel of it. */
.h-features .feature video { background: transparent; }
/* Scrolling type, halved --------------------------------------------------
* Both of these were set to fill the viewport with two or three glyphs, which
* is a Latin-display idea: at 120px a kanji is a solid block of ink. Scoped to
* their own sections so the pricing figures keep their size.
* .mwg_landing4's scroll length is derived from the text's own clientWidth in
* app2.js, so halving the face shortens the pin to match — no dead scroll. */
.h-texts .title-l { font-size: var(--lp-display-pin); line-height: 1.16; letter-spacing: -.02em; }
/* The phone variant of the same statement is a separate block (`.title-mob`,
* four short lines instead of two long ones) and design2 sizes it at 15.6vw —
* 58.5px on a 375px screen, which is nearly twice the hero's own headline.
* Half of that vw factor puts it back under the hero. */
.h-texts .title-mob .paragraph { font-size: var(--lp-display-pin-mob); }
.mwg_landing4 .container .text { font-size: var(--lp-display-marquee); }
@media (max-width: 1024px) { .mwg_landing4 .container .text { font-size: var(--lp-display-marquee); } }
/* Animated headline base, from public/design7/design7.css -----------------
* design10 only overrides size and placement; the box model, the slice masks
* and the per-fragment setup all live here. Two deviations follow: the family,
* because Hiragino Kaku Gothic StdN ships a single heavy weight, and the
* stroke, which design7 paints on top of the fill — together they made the
* type look bold whatever font-weight said. */
.design7-hero-filter-defs {
height: 0;
left: -9999px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -9999px;
width: 0;
}
.design7-hero-title {
color: #050505;
display: flex;
flex-direction: column;
font-family: "Hiragino Kaku Gothic StdN", "Hiragino Sans", "Noto Sans JP", sans-serif;
font-size: var(--lp-display-hero);
font-weight: 900;
height: 100%;
inset: 0;
justify-content: center;
left: 0;
letter-spacing: 0;
line-height: 1.45;
margin: 0;
opacity: 1;
pointer-events: none;
position: absolute;
text-align: center;
top: 0;
transform: translate3d(0, 8px, 0);
transition: none;
white-space: nowrap;
width: 100%;
z-index: 4;
}
.design7-hero-line {
align-items: center;
display: flex;
height: 1.45em;
justify-content: center;
white-space: nowrap;
}
.design7-hero-glyph {
display: inline-block;
filter: url("#design7-hero-roughen");
flex: 0 0 0.98em;
height: 1.16em;
margin-inline: 0.004em;
position: relative;
transform: translateY(var(--glyph-y)) rotate(var(--glyph-rotate)) scaleX(var(--glyph-scale-x)) scaleY(var(--glyph-scale-y));
transform-origin: 50% 58%;
width: 0.98em;
}
.design7-hero-glyph--latin {
flex-basis: 0.72em;
width: 0.72em;
}
.design7-hero-glyph--punctuation {
flex-basis: 0.58em;
left: 0.1em;
top: -0.075em;
width: 0.58em;
}
.design7-hero-glyph--punctuation .design7-hero-fragment {
font-size: 1.08em;
}
.design7-hero-glyph--period {
left: calc(0.1em + 3px);
top: calc(-0.075em + 3px);
}
.design7-hero-glyph--period .design7-hero-fragment--top,
.design7-hero-glyph--period .design7-hero-fragment--middle {
display: none;
}
.design7-hero-glyph--period .design7-hero-fragment--bottom {
clip-path: none;
}
.design7-hero-fragment {
align-items: center;
display: flex;
height: 100%;
inset: 0;
justify-content: center;
line-height: 1;
opacity: 0;
paint-order: stroke fill;
position: absolute;
transform-origin: var(--fragment-origin);
-webkit-text-stroke: 0.018em #050505;
width: 100%;
will-change: opacity, transform;
}
.design7-hero-fragment--top {
clip-path: polygon(-12% -12%, 112% -12%, 112% 37%, -12% 29%);
}
.design7-hero-fragment--middle {
clip-path: polygon(-12% 28%, 112% 36%, 112% 72%, -12% 65%);
}
.design7-hero-fragment--bottom {
clip-path: polygon(-12% 64%, 112% 71%, 112% 112%, -12% 112%);
}
.design7-hero-title {
opacity: 1;
transform: translate3d(0, 8px, 0);
}
.design7-hero-fragment {
animation: none !important;
opacity: 1;
transform: none !important;
}
.design7-hero-title {
line-height: 1.43;
}
@media (prefers-reduced-motion: reduce) {
.design7-hero-title {
opacity: 1;
transform: translate3d(0, 8px, 0);
}
.design7-hero-fragment {
animation: none !important;
opacity: 1;
transform: none !important;
}
}
@media (max-width: 540px) {
.design7-hero-title {
line-height: 1.43;
}
}
.h-hero .design7-hero-title {
font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
font-weight: 400;
}
.h-hero .design7-hero-fragment { font-weight: 400; -webkit-text-stroke: 0; }
/* design10 keyframes ------------------------------------------------------
* The hero port copied the rules that carry `animation:` but not the
* @keyframes they name — those blocks have no selector, so a selector-based
* extraction misses them. The crew and the READY GO button were therefore
* pointing at animations that did not exist, and sat perfectly still. */
@keyframes design10-lovanaut-pico {
0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
18% { transform: translate3d(0, -3px, 0) rotate(1.5deg); }
34% { transform: translate3d(0, 0, 0) rotate(-1deg); }
52% { transform: translate3d(0, -1px, 0) rotate(0.5deg); }
68% { transform: translate3d(0, 0, 0) rotate(-1deg); }
}
/* READY GO's arrow --------------------------------------------------------
* The prompt is a flex row by default; stack it so the arrow sits under the
* button rather than beside it. */
.design10-hero-prompt.design10-ready-go { flex-direction: column; gap: 16px; }
.design10-ready-go-arrow {
width: 76px;
height: 67px;
color: #0b0b0c;
overflow: visible;
/* Two animations, in this order on purpose: the entrance spin holds its end
* state via `both`, and the idle bob — later in the list — takes over the
* transform the moment its delay elapses. */
/* Timed off the header: app2.js drops it in with
* `gsap.fromTo("header", …, { delay: 2.1, duration: .8, ease: "power4.inOut" })`,
* so the spin uses the same 2.1s wait, the same 0.8s, and power4.inOut's
* bezier. The bob then starts where the spin lands (2.1 + 0.8). */
animation:
design10-ready-go-spin .8s cubic-bezier(.77, 0, .175, 1) 2.1s both,
design10-ready-go-arrow 2.4s ease-in-out 2.9s infinite;
}
/* The landing entrance is an introduction, not a tax on every return visit.
* visit-state.js runs synchronously in , before app2.js can write its
* delayed GSAP transforms, so returning visitors see the settled header and
* skip only the arrow's one-off spin. The quiet idle bob remains. */
html.sk-returning-visit .intro {
display: none !important;
}
html.sk-returning-visit header.navigation,
html.sk-returning-visit header.navigation.brand-header-pending {
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
visibility: visible !important;
}
html.sk-returning-visit .design10-ready-go-arrow {
animation: design10-ready-go-arrow 2.4s ease-in-out infinite;
}
/* The x offset is carried by every keyframe rather than set as a margin: the
* arrow's tip sits about a quarter in from its left edge, so a centred arrow
* would aim at the button's left shoulder instead of its middle. */
@keyframes design10-ready-go-spin {
0% { transform: translate(19px, -14px) rotate(-380deg) scale(.55); opacity: 0; }
1% { opacity: 0; }
45% { opacity: 1; }
100% { transform: translate(19px, 0) rotate(0deg) scale(1); opacity: 1; }
}
/* Ink stays ink — the bob moves it, it does not fade it. */
@keyframes design10-ready-go-arrow {
0%, 100% { transform: translate(19px, 0) rotate(-2deg); }
50% { transform: translate(19px, 7px) rotate(2deg); }
}
@keyframes design10-ready-go-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.045); }
}
@keyframes design10-callout-pico {
0%, 100% { transform: translateY(0) rotate(-1deg); }
45% { transform: translateY(-3px) rotate(1.5deg); }
70% { transform: translateY(0) rotate(-1deg); }
}
/* …and stagger the crew so the five of them do not bob in lockstep */
.design10-lovanaut-character--2 .design10-lovanaut-sprite { animation-delay: -0.35s; }
.design10-lovanaut-character--3 .design10-lovanaut-sprite { animation-delay: -0.7s; }
.design10-lovanaut-character--4 .design10-lovanaut-sprite { animation-delay: -1.05s; }
.design10-lovanaut-character--5 .design10-lovanaut-sprite { animation-delay: -1.4s; }
/* design10 hero, ported ---------------------------------------------------
* Pairs with hero10.js. Rules lifted from public/design10/design10.css with
* the .design10-page scope removed, since only the hero comes across. */
.design10-character-callout-character .design10-lovanaut-sprite { animation: design10-callout-pico 2.1s ease-in-out infinite;
width: 42px; }
#fv.design10-hero { isolation: isolate;
min-height: 100svh;
overflow: hidden;
position: relative !important; }
#fv.design10-hero > .h-hero-top, #fv.design10-hero > .datas, #fv.design10-hero > .drag, #fv.design10-hero > .num-current, #fv.design10-hero > .container { visibility: hidden !important;
pointer-events: none !important; }
/* Hero on white --------------------------------------------------------
* The crew is white-based pixel art (`P: '#ffffff'` in hero10.js), so a white
* ground swallows their silhouettes. Rather than recolour the characters, give
* them the contour pixel art normally has: four 1px drop-shadows make a hairline
* outline in every direction, and the fills stay exactly as designed. */
.design10-hero-backdrop { background: #ffffff;
inset: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
z-index: 0; }
.design10-hero-backdrop::after { background: rgba(245, 246, 246, 0.16);
content: "";
inset: 0;
position: absolute; }
.design10-hero-backdrop dotlottie-player { height: 100%;
opacity: 0.01;
width: 100%; }
#fv .design7-hero-title { bottom: auto;
font-size: var(--lp-display-hero);
height: 52%;
top: 12.2%;
z-index: 4; }
.design10-hero-lead { color: #050505;
font-family: "Noto Sans JP", sans-serif;
font-size: var(--lp-type-lead);
font-weight: 700;
left: 50%;
letter-spacing: 0.08em;
line-height: var(--lp-lh-lead);
margin: 0;
position: absolute;
text-align: center;
top: 58%;
transform: translateX(-50%);
white-space: nowrap;
z-index: 5; }
.design10-lovanaut-crew { align-items: flex-end;
bottom: auto;
display: flex;
gap: clamp(8px, 1.15vw, 17px);
left: 50%;
position: absolute;
top: 52%;
transform: translate(-50%, -50%);
z-index: 5; }
.design10-lovanaut-character { animation: none;
display: block;
transform-origin: center bottom;
transform: translate3d(var(--design10-scatter-x), var(--design10-scatter-y), 0) rotate(var(--design10-scatter-rotate)) scale(var(--design10-scatter-scale));
transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1); }
.design10-lovanaut-sprite { animation: design10-lovanaut-pico 1.78s ease-in-out infinite;
/* Cast shadow rather than a contour: two layers, a tight one that separates
* the white pixels from the white ground and a soft one that gives the crew
* some ground to stand on. */
filter:
drop-shadow(0 2px 1px rgba(24, 22, 18, .20))
drop-shadow(0 9px 14px rgba(24, 22, 18, .16));
display: block;
height: auto;
image-rendering: pixelated;
width: 50px; }
.design10-lovanaut-character:nth-child(2) .design10-lovanaut-sprite { animation-duration: 1.94s; }
.design10-lovanaut-character:nth-child(3) .design10-lovanaut-sprite { animation-duration: 1.63s; }
.design10-lovanaut-character:nth-child(4) .design10-lovanaut-sprite { animation-duration: 2.06s; }
.design10-lovanaut-character--5 .design10-lovanaut-sprite { width: 43px; }
.design10-lovanaut-character--3 .design10-lovanaut-sprite { width: 56px; }
.design10-hero-prompt { align-items: center;
bottom: 28px;
color: #050505;
display: flex;
font-family: "PPNeueMontrealMono", monospace;
font-size: 11px;
gap: 10px;
left: 50%;
letter-spacing: 0.12em;
position: absolute;
transform: translateX(-50%);
z-index: 6; }
.design10-hero-prompt i { border-bottom: 1px solid currentColor;
border-right: 1px solid currentColor;
display: block;
height: 8px;
transform: rotate(45deg) translateY(-2px);
width: 8px; }
#fv-a.design10-ready-go { top: calc(58% + 155px);
bottom: auto;
left: 50%;
position: absolute;
transform: translateX(-50%);
z-index: 8; }
.design10-ready-go-button { align-items: center;
animation: design10-ready-go-pulse 1.8s ease-in-out infinite;
background: #c9fe6e;
border: 0;
border-radius: 999px;
box-shadow: 0 10px 26px rgba(136, 173, 64, 0.22);
color: #101011;
cursor: pointer;
display: inline-flex;
font-family: "PPNeueMontrealMono", monospace;
font-size: 12px;
font-weight: 700;
gap: 12px;
justify-content: center;
letter-spacing: 0.12em;
min-width: 124px;
padding: 15px 22px; }
.design10-ready-go-button:hover, .design10-ready-go-button:focus-visible { animation-play-state: paused;
background: #b8f257;
outline: 2px solid #101011;
outline-offset: 4px; }
@media (max-width: 900px) {
.design10-character-callout-character .design10-lovanaut-sprite { width: 38px; }
}
@media (max-width: 540px) {
.design10-character-callout-character .design10-lovanaut-sprite { width: 32px; }
/* The mobile hero is one screenful holding five fixed-pixel objects: two
* lines of display type, the crew, the lead paragraph, the arrow and READY
* GO. Placing them by percentage centred the group at exactly one viewport
* height — anywhere else the block drifted down and READY GO went under the
* fold. Each piece is now an offset in pixels from the middle, so the group
* is centred at every height and the numbers below read as the stack:
*
* -222 title, top of the first line
* -130 bottom of the second line
* -77 crew, centre (about 30px of air on either side)
* -24 lead paragraph, top
* +100 arrow + READY GO, top
* +221 bottom of the button -> the group spans -222..+221, symmetric. */
#fv.design10-hero { height: 100svh; }
#fv .design7-hero-title {
/* --lp-display-hero is capped low at this width on purpose: the crew below it is placed from the middle of the
* hero, not from the title's baseline, so every extra point of type eats
* the gap between them. 33px keeps 375 and 430 within 4px of each other. */
/* hug the lines instead of a 52%-tall box, so two or three of them centre
* the same way and the offsets below stay true */
height: auto;
top: calc(50% - 222px); }
.design10-lovanaut-crew { gap: 5px;
top: calc(50% - 77px);
transform: translate(-50%, -50%);
transform-origin: center bottom; }
.design10-lovanaut-sprite { width: 39px; }
.design10-lovanaut-character--3 .design10-lovanaut-sprite { width: 44px; }
.design10-lovanaut-character--5 .design10-lovanaut-sprite { width: 34px; }
.design10-hero-lead {
top: calc(50% - 24px);
white-space: normal;
width: min(320px, calc(100% - 32px)); }
#fv-a.design10-ready-go { top: calc(50% + 100px); }
.design10-ready-go-button { min-width: 104px;
min-height: 44px;
padding: 12px 17px; }
}
/* Tablet hero (541-900) ---------------------------------------------------
* The phone block below 540px centres the hero's five pieces as pixel offsets
* from the middle; between 541 and 900 design2's percentages were still in
* charge, and there the same group sat 295px from the top with 96px under the
* button. Same treatment, same reasoning, this range's own measurements:
*
* -242 title, top of the first line (111 tall at this size)
* -131 bottom of the last line
* -69 crew, centre (32px of air either side)
* -8 lead paragraph, top (76 tall)
* +116 arrow + READY GO, top (127 tall)
* +243 bottom of the button -> symmetric about the middle. */
@media (min-width: 541px) and (max-width: 900px) {
#fv.design10-hero { height: 100svh; }
#fv .design7-hero-title { height: auto; top: calc(50% - 242px); }
.design10-lovanaut-crew { top: calc(50% - 69px); transform: translate(-50%, -50%); }
.design10-hero-lead { top: calc(50% - 8px); }
#fv-a.design10-ready-go { top: calc(50% + 116px); }
}
@media (prefers-reduced-motion: reduce) {
.design10-ready-go-button { animation: none; }
}
/* The phone hero sits a little low in the viewport so the character, lead,
* arrow, and READY GO button have more breathing room below the headline. */
@media (max-width: 540px) {
#fv .design7-hero-title {
transform: translate3d(0, 58px, 0);
}
.design10-lovanaut-crew {
transform: translate(-50%, calc(-50% + 60px));
}
.design10-hero-lead,
#fv-a.design10-ready-go {
transform: translate(-50%, 60px);
}
}
/* The waitlist field's styling lived here. The form is no longer in the footer
* (see index.html); the rules are removed rather than left orphaned. */
/* One content width -------------------------------------------------------
* These four blocks arrived from three different design2 sections and each
* kept its own measure: the console mock and the connect card ran to 1110px,
* the comparison table to 880, the FAQ column to 700. Read top to bottom they
* looked like four unrelated pages. 1000px for all of them.
*
* `max-width`, not `width` — a hard pixel measure would force the Japanese to
* wrap at a width the viewport may not have. Below 1000px each one still takes
* what the grid gives it. */
/* Desktop only. Below 900px each of these already has a responsive measure of
* design2's own, and forcing a 1000px cap on top of it did real damage: the
* copy above the console mock kept an intrinsic 776px at a 375px viewport and
* the page gained 416px of horizontal overflow. Narrow screens keep what they
* had; this is about the four blocks reading as one column on a wide one. */
@media (min-width: 901px) {
.h-learn .visual,
.h-about .right,
.h-faq .f-quest,
.app-sec {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
/* the copy above the console mock belongs to the same column now */
.h-learn .title-s {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
}
/* .h-latest joins the universe -------------------------------------------
* The five flow clips had the starfield painted into them, which never looked
* like the starfield: a drawn imitation on a paper panel, sitting between two
* sections that show the real thing. The clips carry alpha now and this panel
* comes off, so what is behind them is the page's own space rather than a
* picture of it. Everything below re-sets what design2 tuned for the paper. */
.homepage .h-latest { background: transparent; }
.homepage .h-latest::before { background: transparent; }
.homepage .h-latest .title-l { color: #ffffff; }
.homepage .h-latest .text-g { color: #ffffff; }
.homepage .h-latest .h-effect video { background: transparent; }
/* the same transparent-with-a-white-rule treatment the other CTAs on the space
* ground already carry, instead of design2's solid ink pill */
.homepage .h-latest .cta-sec1 {
background: transparent;
border: var(--sk-card-line);
color: #ffffff;
}
.homepage .h-latest .landing-store-cta {
background: var(--yellow);
border-color: var(--yellow);
color: var(--mwg2-black);
}
/* The second primary entry sits in the AI connection section. Keep it and the
* bookshelf section's CTA (`.landing-store-cta`, a historical class name) on
* the same primary lime treatment. */
.homepage .app-sec .app-store-cta {
background-color: var(--yellow);
color: var(--mwg2-black);
}
/* The flow clips were the one card-like thing on this page with no frame at
* all — transparent video floating on the starfield with nothing to say where
* it began. Same line as everything else, and the clip insets so the frame
* reads as a card rather than a crop. */
.homepage .h-latest .h-effect {
border: var(--sk-card-line);
border-radius: var(--mwg2-radius-l);
padding: 14px;
overflow: hidden;
}
.homepage .h-latest .h-effect video {
width: 100%;
height: 100%;
border-radius: 10px;
}
/* Scrolling type inside .h-latest: set in ink for the paper panel that section
* no longer has. app2.js splits it into per-letter spans that carry their own
* colour, so colouring `.text` alone changed nothing on screen. */
.homepage .l-sentence .text,
.homepage .l-sentence .letter { color: #ffffff; }
/* The line beside the FAQ CTA under pricing — outside the white plan card, so
* on the space ground, and still set in design2's ink. */
.homepage .sk-pricing-section .question,
.homepage .sk-pricing-section .question > .label { color: rgba(255, 255, 255, .78); }
/* the CTA beside it keeps full white — it is the button, not the aside */
.homepage .sk-pricing-section .question .cta-main4,
.homepage .sk-pricing-section .question .cta-main4 span { color: #ffffff; }
/* The row spans the whole section with no inset of its own (design2's
* `.s-pricing .question` width never reached this markup), so the line sat on
* the left edge of the screen and the button on the right, at 1440 and at 390
* alike. Same side gutter as every `.wrapper` on the page (style.css:
* `padding: 0 var(--grid-margin)`, 25px, 15px under 768px).
* The gutter alone still left the two at the far edges of a 1440 screen, 1300px
* apart (2026-09-29). The row now takes the plan card's own width (`.sk-pricing`,
* 920px, centred), so the line starts under the card's left edge and the button
* ends under its right edge. */
.homepage .sk-pricing-section .question {
box-sizing: border-box;
width: min(920px, calc(100% - 2 * var(--grid-margin)));
margin-left: auto;
margin-right: auto;
padding: 0;
}
/* The closing line on a phone --------------------------------------------
* app2.js builds this whole module inside `mm.add("(min-width: 769px)")` and
* design2's CSS hides it to match, so 「さあ、マイBOXを作ろう。」 simply did not
* exist on a phone. design11.js runs the same horizontal scroll below 769px
* (see section 9); this is the CSS half — show the module, and set the type at
* a size where the line is wider than the screen without being absurd. At
* design2's 100px a 14-character line runs 1400px on a 375px screen. */
@media (max-width: 768px) {
.h-latest .l-sentence .mwg_landing4 { display: block; }
.h-latest .l-sentence .mwg_landing4 .container .text {
font-size: var(--lp-display-marquee);
color: #ffffff;
}
}
/* The heading of #what is a full sentence; it takes the same step as every
* other section heading (see the declaration at the top of this file). */
/* With the supporting paragraph gone the heading sat 25px off the console mock
* on a phone against 70px on desktop — the gap the paragraph used to occupy
* never belonged to the paragraph. */
@media (max-width: 768px) {
#what > .title-s { margin-bottom: 46px; }
}
/* "this one slides" ------------------------------------------------------
* Inserted by design11.js from the same list that wires up the drag, so the
* marker and the gesture cannot drift apart. Sits under the section heading and
* above the track, right where the eye arrives before it meets the clipped edge
* of the row. */
.sk-slide-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
max-width: 1000px;
margin: 0 auto 22px;
padding: 0 var(--grid-margin);
font-family: "Noto Sans JP", sans-serif;
font-size: var(--lp-type-label);
letter-spacing: .08em;
color: rgba(255, 255, 255, .62);
pointer-events: none;
}
.sk-slide-arrow {
font-family: "PPNeueMontrealMono", monospace;
font-size: 15px;
line-height: 1;
animation: sk-slide-nudge 2.4s ease-in-out infinite;
}
/* the two arrows lean away from each other, a beat apart */
.sk-slide-arrow:first-child { animation-name: sk-slide-nudge-left; }
@keyframes sk-slide-nudge-left {
0%, 62%, 100% { transform: translateX(0); opacity: .62; }
28% { transform: translateX(-5px); opacity: 1; }
}
@keyframes sk-slide-nudge {
0%, 62%, 100% { transform: translateX(0); opacity: .62; }
28% { transform: translateX(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.sk-slide-arrow { animation: none; }
}
/* The hint belongs to the row below it, not to the heading above it, and the
* three sections divide that space very differently: measured, the gap above /
* below was 50/22 in .h-features, 0/72 in .h-latest and 0/22 in .h-testis. In
* .h-latest it sat against the heading with 72px of nothing under it, reading
* as a subtitle rather than as a label for the cards.
*
* .h-latest is nudged with `top`, not margin: the slot there is already the
* right size and only badly divided, so moving the label costs no layout.
* .h-testis genuinely has no room above, so that one takes real margin. */
.h-latest .sk-slide-hint { position: relative; top: 52px; }
.h-testis .sk-slide-hint { margin-top: 28px; }
@media (max-width: 768px) {
/* the slot in .h-latest is shorter here — 52px of nudge closed the gap under
the label to nothing */
.h-latest .sk-slide-hint { top: 34px; }
}
/* Alllova-inspired space ground ------------------------------------------
* The universe belongs to the black parts of design11 only. The fixed layer
* sits behind main; the white hero, cards, video slabs and footer surfaces
* remain opaque and therefore keep their existing paper treatment. */
.homepage main {
position: relative;
z-index: 1;
background: transparent;
}
.homepage .h-learn,
.homepage .h-faq {
background: transparent;
}
/* Let the universe show through the FAQ accordion instead of putting the
* questions on opaque charcoal cards. Keep the border so each question still
* reads as an interactive row against the starfield. */
.homepage .h-faq .f-quest > div,
.homepage .h-faq .f-quest > div:hover {
background: transparent;
border: var(--sk-card-line);
}
/* The connected-AI callout also belongs to the space ground. Keep its inner
* logo viewer readable, while the outer card becomes a transparent panel with
* the requested white outline. */
.homepage .app-sec {
background: transparent;
border: var(--sk-card-line);
}
/* Match the transparent connected-AI card treatment on the FAQ CTA below
* pricing, so the two navigation surfaces belong to the same space ground. */
.homepage .sk-pricing-section .question .cta-main4 {
background: transparent;
border: var(--sk-card-line);
}
/* The section-progress meter is implementation state, not user-facing UI.
* Keep its DOM hook for app2.js, but remove the pill from the page entirely. */
.homepage .on-screen {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.skillova-space {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background: #02030a;
}
.skillova-space > span {
position: absolute;
pointer-events: none;
}
.skillova-space__deep {
inset: 0;
background:
radial-gradient(108% 82% at 18% 0, rgba(34, 42, 102, .22), transparent 66%),
radial-gradient(92% 74% at 88% 100%, rgba(54, 28, 88, .17), transparent 70%),
linear-gradient(145deg, #02030a, #07091a 52%, #02030b);
}
.skillova-space__nebula {
inset: 0;
min-width: calc(100% + 52px);
min-height: calc(100% + 30px);
background:
radial-gradient(34% 46% at 14% 17%, rgba(72, 87, 204, .18) 0, rgba(46, 56, 140, .075) 46%, transparent 76%),
radial-gradient(30% 40% at 45% 78%, rgba(93, 55, 166, .15) 0, rgba(63, 38, 112, .055) 48%, transparent 78%),
radial-gradient(38% 45% at 79% 27%, rgba(20, 126, 137, .11) 0, rgba(17, 78, 94, .045) 50%, transparent 78%),
radial-gradient(27% 34% at 62% 57%, rgba(143, 52, 119, .09) 0, rgba(92, 34, 87, .04) 52%, transparent 80%),
radial-gradient(18% 25% at 27% 60%, rgba(232, 255, 99, .025) 0, transparent 74%);
opacity: .8;
animation: skillova-space-nebula-drift 280s ease-in-out infinite alternate;
will-change: transform;
}
.skillova-space__milky-way {
inset: 0;
background:
linear-gradient(163deg, rgba(243, 239, 223, 0) 52%, rgba(243, 239, 223, .025) 57%, rgba(243, 239, 223, .055) 62%, rgba(243, 239, 223, .025) 68%, rgba(243, 239, 223, 0) 73%),
linear-gradient(163deg, rgba(232, 255, 99, 0) 44%, rgba(232, 255, 99, .022) 62%, rgba(232, 255, 99, 0) 80%);
}
.skillova-space__grain {
inset: 0;
background:
radial-gradient(48% 34% at 18% 72%, rgba(137, 151, 195, .035) 0, transparent 72%),
radial-gradient(42% 30% at 72% 16%, rgba(112, 92, 158, .03) 0, transparent 74%),
radial-gradient(34% 28% at 82% 82%, rgba(87, 141, 148, .022) 0, transparent 76%);
opacity: .55;
}
.skillova-space__stars {
top: 0;
left: 0;
width: 2px;
height: 2px;
border-radius: 50%;
background: transparent;
box-shadow:
4vw 12vh 0 rgba(214, 224, 255, .68),
8vw 64vh 0 rgba(255, 255, 255, .62),
13vw 28vh 0 rgba(173, 196, 255, .58),
17vw 82vh 0 rgba(255, 255, 255, .56),
21vw 47vh 0 rgba(224, 232, 255, .68),
26vw 18vh 0 rgba(255, 255, 255, .46),
29vw 72vh 0 rgba(193, 210, 255, .56),
34vw 38vh 0 rgba(255, 255, 255, .62),
39vw 88vh 0 rgba(212, 222, 255, .48),
43vw 22vh 0 rgba(255, 255, 255, .54),
47vw 57vh 0 rgba(195, 214, 255, .54),
52vw 10vh 0 rgba(255, 255, 255, .62),
56vw 76vh 0 rgba(184, 208, 255, .52),
61vw 32vh 0 rgba(255, 255, 255, .58),
65vw 91vh 0 rgba(220, 230, 255, .5),
70vw 15vh 0 rgba(255, 255, 255, .64),
74vw 53vh 0 rgba(196, 215, 255, .56),
79vw 80vh 0 rgba(255, 255, 255, .52),
84vw 41vh 0 rgba(215, 226, 255, .64),
89vw 69vh 0 rgba(255, 255, 255, .48),
94vw 24vh 0 rgba(186, 209, 255, .56),
97vw 88vh 0 rgba(255, 255, 255, .44);
opacity: .9;
animation: skillova-space-star-drift 120s ease-in-out infinite alternate,
skillova-space-star-twinkle 8s ease-in-out infinite;
will-change: transform, opacity;
}
.skillova-space__stars--bright {
width: 3px;
height: 3px;
box-shadow:
6vw 35vh 0 rgba(239, 245, 255, .86),
24vw 61vh 0 rgba(235, 243, 255, .82),
45vw 43vh 0 rgba(239, 245, 255, .86),
68vw 67vh 0 rgba(235, 243, 255, .8),
86vw 19vh 0 rgba(239, 245, 255, .84),
91vw 56vh 0 rgba(235, 243, 255, .78);
opacity: .68;
animation-duration: 135s, 6.8s;
}
.skillova-space__primary-star {
width: 3px;
height: 3px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 8px 2px rgba(255, 255, 255, .6),
0 0 26px 9px rgba(186, 209, 255, .3),
0 0 64px 24px rgba(150, 184, 255, .12);
animation: skillova-space-star-drift 150s ease-in-out infinite alternate,
skillova-space-star-sparkle 7.1s ease-in-out infinite;
}
.skillova-space__primary-star::before,
.skillova-space__primary-star::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 1.5px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(235, 243, 255, 0), rgba(235, 243, 255, .9) 50%, rgba(235, 243, 255, 0));
transform: translate(-50%, -50%);
}
.skillova-space__primary-star::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.skillova-space__primary-star--left { top: 58%; left: 12%; --drift-x: -18px; --drift-y: -10px; }
.skillova-space__primary-star--right { top: 34%; left: 78%; --drift-x: 14px; --drift-y: -8px; }
.skillova-space__body {
border-radius: 50%;
animation: skillova-space-body-drift 220s ease-in-out infinite alternate;
will-change: transform;
}
.skillova-space__body--earth {
width: 150px;
height: 150px;
left: -52px;
bottom: -66px;
background: radial-gradient(circle at 33% 30%, #4585c4 0, #2c5fa4 30%, #17386e 60%, #0a1c42 82%, #050e24 100%);
box-shadow: 0 0 28px 6px rgba(122, 178, 255, .3), 0 0 90px 24px rgba(86, 142, 255, .12);
}
.skillova-space__body--earth::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(18% 26% at 16% 38%, rgba(96, 142, 78, .85) 0, rgba(96, 142, 78, 0) 70%),
radial-gradient(22% 30% at 30% 62%, rgba(124, 152, 88, .7) 0, rgba(124, 152, 88, 0) 70%),
radial-gradient(20% 26% at 58% 52%, rgba(88, 134, 76, .75) 0, rgba(88, 134, 76, 0) 70%);
}
.skillova-space__body--saturn {
width: 62px;
height: 62px;
top: 6vh;
right: 18vw;
background: radial-gradient(circle at 36% 30%, #f2dfb6 0, #ddc193 40%, #b08d62 72%, #6d5238 100%);
box-shadow: 0 0 14px 3px rgba(240, 214, 160, .14), inset -6px -5px 12px rgba(10, 8, 4, .5);
}
.skillova-space__body--saturn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 235%;
height: 36%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(242, 222, 178, 0) 56%, rgba(242, 222, 178, .55) 64%, rgba(228, 160, 130, .42) 74%, rgba(242, 222, 178, .18) 80%, rgba(242, 222, 178, 0) 84%);
transform: translate(-50%, -50%) rotate(-18deg);
}
.skillova-space__body--rust {
width: 22px;
height: 22px;
top: 42vh;
left: 10vw;
background: radial-gradient(circle at 35% 32%, #c97a58 0, #a35a40 45%, #6e3a2a 75%, #401f16 100%);
box-shadow: 0 0 10px 2px rgba(220, 140, 100, .16), inset -3px -3px 7px rgba(8, 4, 2, .6);
}
.skillova-space__shooting-star {
top: 0;
left: 0;
width: 150px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(214, 230, 255, .12) 38%, rgba(224, 236, 255, .34) 72%, rgba(244, 248, 255, .7) 92%, #fff);
opacity: 0;
}
.skillova-space__shooting-star::after {
content: "";
position: absolute;
top: 50%;
right: -2px;
width: 7px;
height: 7px;
border-radius: 50%;
transform: translateY(-50%);
background: radial-gradient(circle, #fff 0, rgba(235, 243, 255, .65) 45%, rgba(235, 243, 255, 0) 72%);
}
.skillova-space__shooting-star--a {
animation: skillova-space-shoot-a 37s linear infinite;
animation-delay: 4.5s;
}
.skillova-space__shooting-star--b {
animation: skillova-space-shoot-b 53s linear infinite;
animation-delay: 19s;
}
@keyframes skillova-space-nebula-drift {
from { transform: translateZ(0); }
to { transform: translate3d(-52px, -30px, 0); }
}
@keyframes skillova-space-star-drift {
from { transform: translateZ(0); }
to { transform: translate3d(var(--drift-x, -28px), var(--drift-y, -16px), 0); }
}
@keyframes skillova-space-star-twinkle {
0%, 100% { opacity: .6; }
50% { opacity: 1; }
}
@keyframes skillova-space-star-sparkle {
0%, 100% { opacity: .12; }
12% { opacity: 1; }
26% { opacity: .3; }
38% { opacity: .85; }
55% { opacity: .18; }
}
@keyframes skillova-space-body-drift {
from { transform: translateZ(0); }
to { transform: translate3d(8px, -10px, 0); }
}
@keyframes skillova-space-shoot-a {
0%, 94.2% { opacity: 0; transform: translate3d(4vw, 10vh, 0) rotate(26deg); }
94.8% { opacity: .95; }
97.2%, 100% { opacity: 0; transform: translate3d(34vw, calc(10vh + 14.6vw), 0) rotate(26deg); }
}
@keyframes skillova-space-shoot-b {
0%, 95.4% { opacity: 0; transform: translate3d(84vw, 6vh, 0) rotate(152deg); }
96% { opacity: .9; }
97.7%, 100% { opacity: 0; transform: translate3d(52vw, calc(6vh + 17vw), 0) rotate(152deg); }
}
@media (max-width: 768px) {
.skillova-space__body--earth {
width: 110px;
height: 110px;
left: -54px;
bottom: -48px;
}
.skillova-space__body--saturn {
width: 44px;
height: 44px;
top: 9vh;
right: 13vw;
}
.skillova-space__body--rust {
top: 38vh;
left: 8vw;
}
}
@media (prefers-reduced-motion: reduce) {
.skillova-space__nebula,
.skillova-space__stars,
.skillova-space__primary-star,
.skillova-space__body,
.skillova-space__shooting-star {
animation: none;
}
}
/* Account modal: keep authentication inside the adopted landing page so the
* shared navigation and space background remain visible behind it. */
.sk-auth-modal[hidden] {
display: none;
}
html.sk-auth-modal-open,
body.sk-auth-modal-open {
overflow: hidden !important;
}
.sk-auth-modal {
position: fixed;
z-index: 40;
inset: 0;
display: grid;
place-items: center;
padding: 32px 20px;
color: #f1f1f1;
}
.sk-auth-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(1, 2, 9, .72);
backdrop-filter: blur(10px);
}
.sk-auth-modal__dialog {
position: relative;
width: min(100%, 540px);
max-height: min(760px, calc(100svh - 64px));
overflow: auto;
border: 1px solid rgba(255, 255, 255, .82);
border-radius: 24px;
background: rgba(9, 12, 27, .9);
box-shadow: 0 30px 100px rgba(0, 0, 0, .48);
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.sk-auth-modal__content {
padding: 48px 52px 42px;
}
.sk-auth-modal__close {
position: absolute;
z-index: 1;
top: 18px;
right: 18px;
display: grid;
width: 38px;
height: 38px;
padding: 0;
place-items: center;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 50%;
background: rgba(255, 255, 255, .08);
color: #fff;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease;
}
.sk-auth-modal__close:hover,
.sk-auth-modal__close:focus-visible {
border-color: #c9fe6e;
background: rgba(201, 254, 110, .16);
outline: none;
}
.sk-auth-modal__close svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-width: 1.5;
}
.sk-auth-modal__kicker {
margin: 0 0 18px;
color: rgba(241, 241, 241, .62);
font: 500 .7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .18em;
text-transform: uppercase;
}
.sk-auth-modal__content h1,
.sk-auth-modal__content h2 {
margin: 0 0 18px;
color: #fff;
font-size: clamp(1.75rem, 3vw, 2rem);
font-weight: 500;
letter-spacing: -.05em;
line-height: 1.18;
}
.sk-auth-modal__lead {
margin: 0 0 28px;
color: rgba(241, 241, 241, .72);
font-size: .9rem;
line-height: 1.85;
}
.sk-auth-modal__google {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
min-height: 56px;
margin-top: 24px;
border: 1px solid rgba(255, 255, 255, .45);
border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: #fff;
font-size: .8rem;
font-weight: 600;
text-decoration: none;
transition: border-color .2s ease, background-color .2s ease;
}
.sk-auth-modal__google[hidden],
.sk-auth-modal__divider[hidden] {
display: none;
}
.sk-auth-modal__google span {
display: grid;
width: 24px;
height: 24px;
place-items: center;
border-radius: 50%;
background: #fff;
color: #161616;
font: 700 .8rem/1 Arial, sans-serif;
}
.sk-auth-modal__google:hover,
.sk-auth-modal__google:focus-visible {
border-color: #c9fe6e;
background: rgba(201, 254, 110, .1);
outline: none;
}
.sk-auth-modal__divider {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0 0;
color: rgba(241, 241, 241, .46);
font: 500 .66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sk-auth-modal__divider::before,
.sk-auth-modal__divider::after {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, .16);
content: "";
}
.sk-auth-modal__content .auth-kicker {
margin: 0 0 18px;
color: rgba(241, 241, 241, .62);
font: 500 .7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .18em;
text-transform: uppercase;
}
.sk-auth-modal__content .auth-lead {
margin: 0 0 28px;
color: rgba(241, 241, 241, .72);
font-size: .9rem;
line-height: 1.85;
}
.sk-auth-modal__form,
.sk-auth-modal__content .auth-form {
display: grid;
gap: 12px;
margin: 24px 0 0;
}
.sk-auth-modal__form label {
display: grid;
gap: 8px;
}
.sk-auth-modal__form label > span,
.sk-auth-modal__content .auth-field > span {
color: rgba(241, 241, 241, .82);
font: 500 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .08em;
}
.sk-auth-modal__form input {
width: 100%;
min-width: 0;
height: 54px;
padding: 0 18px;
border: 1px solid rgba(255, 255, 255, .45);
border-radius: 999px;
background: rgba(255, 255, 255, .1);
color: #fff;
font-family: inherit;
font-size: .95rem;
font-weight: 500;
line-height: 1;
outline: none;
}
.sk-auth-modal__form input::placeholder {
color: rgba(255, 255, 255, .42);
}
.sk-auth-modal__form input:focus {
border-color: #c9fe6e;
box-shadow: 0 0 0 3px rgba(201, 254, 110, .18);
}
.sk-auth-modal__form button {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 56px;
margin-top: 8px;
padding: 0 22px;
border: 0;
border-radius: 999px;
background: #c9fe6e;
color: #0a0a0b;
font-family: inherit;
font-size: .8rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background-color .2s ease, opacity .2s ease;
}
.sk-auth-modal__form button:hover,
.sk-auth-modal__form button:focus-visible {
background: #b8f257;
outline: none;
}
.sk-auth-modal__form button:disabled {
cursor: wait;
opacity: .58;
}
.sk-auth-modal__legal,
.sk-auth-modal__note {
color: rgba(241, 241, 241, .52);
font-size: .7rem;
line-height: 1.75;
}
.sk-auth-modal__legal {
margin: 24px 0 0;
}
.sk-auth-modal__legal a,
.sk-auth-modal__note a {
color: #c9fe6e;
text-underline-offset: 3px;
}
.sk-auth-modal__note {
margin: 26px 0 0;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .16);
}
.sk-auth-modal__note strong {
color: #fff;
font-weight: 600;
}
.sk-auth-modal__content .auth-flash,
.sk-auth-modal__content .flash {
margin: 0 0 18px;
padding: 12px 14px;
border: 1px solid rgba(255, 135, 119, .72);
border-radius: 12px;
background: rgba(255, 135, 119, .08);
color: #ffd4cc;
font-size: .82rem;
line-height: 1.65;
}
.sk-auth-modal__content .auth-note {
margin: 26px 0 0;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .16);
color: rgba(241, 241, 241, .58);
font-size: .75rem;
line-height: 1.75;
}
.sk-auth-modal__content .auth-link {
display: inline-flex;
margin-top: 24px;
color: #c9fe6e;
font-size: .8rem;
text-decoration: none;
}
.sk-auth-modal__content .auth-link:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
@media (max-width: 768px) {
.sk-auth-modal {
align-items: end;
padding: 0;
}
.sk-auth-modal__dialog {
width: 100%;
max-height: 94svh;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 24px 24px 0 0;
}
.sk-auth-modal__content {
padding: 40px 22px calc(28px + env(safe-area-inset-bottom));
}
.sk-auth-modal__content h1,
.sk-auth-modal__content h2 {
font-size: 1.75rem;
}
.sk-auth-modal__lead {
font-size: .82rem;
line-height: 1.8;
}
}
@media (prefers-reduced-motion: no-preference) {
.sk-auth-modal__dialog {
animation: sk-auth-modal-in .28s cubic-bezier(.16, 1, .3, 1) both;
}
}
@keyframes sk-auth-modal-in {
from { opacity: 0; transform: translateY(14px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 「つなぐAIが変わっても、本棚はひとつ。」の枠 (2026-09-28)。
* 文章の下にアイコンの窓が来る縦並びが全幅で起きているのに、窓は 2 列用の
* width: min(52%, 620px) (qmock.css) のまま左に寄り、強調のアイコン (窓の中心に
* 一番近いもの) が枠の中心からずれて見えていた。窓を本文の幅いっぱいにして、
* 枠の左右の余白も揃える (1101px 以上は 75px / 15px、901〜1100px は 0 だった)。 */
.homepage .app-sec .right.design10-app-visual {
width: 100%;
max-width: 100%;
aspect-ratio: auto;
height: 220px;
transform-origin: center center;
}
@media (min-width: 1101px) {
.homepage .app-sec { padding-left: 75px; padding-right: 75px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
.homepage .app-sec { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) {
.homepage .app-sec .right.design10-app-visual { height: 190px; }
}
/* 最下部の見出し「あなたの発信を / 読者のAIへ」(2026-09-29)。
* design2 の .title-xl は line-height .85 (ラテンの大文字用) のままで、行の箱が
* 字の高さより低い。1 文字ずつの差し替え用の複製 (top: 106% / 110%) と
* clip-path (106% / 110%) もその箱の高さで決まるため、390 幅では上の行の字が
* 下の行に触れ、複製の切れ端が行の間に見えていた。行の箱を字の高さより
* 高くして、複製と切り口を字の下へ下げる。 */
footer .title-xl { line-height: 1.12; }
/* design2 は 768px 以下でこの見出しの箱を 350px に絞る。1 行目は 7 字なので、
* 字が 50px を超える 736〜768px 幅 (タブレットの縦) では「う」だけが次の行に
* 落ちていた。箱の幅の上限を外す (字の大きさは --lp-display-closing のまま)。 */
@media (max-width: 768px) {
footer .title-xl { max-width: 100%; }
}
/* 操作領域の下限 44px (.claude/rules/app-site.md) (2026-09-29)。
* 本棚の節の「無料で始める」(.cta-sec、design2 の高さ 35px) と、フッターの
* リンク (文字の高さ 15px) が下回っていた。見た目の大きさは変えず、押せる
* 範囲だけを広げる。 */
.homepage .h-latest .cta-sec,
.homepage .h-latest .cta-sec.roll { min-height: 44px; height: auto; }
footer .links-sec a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
@media (max-width: 768px) {
/* 44px の行が縦に並ぶので、行の間隔 16px はそのぶん詰める */
footer .links-sec { gap: 0; }
}
/* セクションの見出し (2026-10-05) -----------------------------------------
* 8 つのセクションの見出しは同じ段・同じ揃え。大きさは上の .title-* の規則で
* 決まっているので、ここは design2 のセクションごとの指定 (幅 340px、左寄せ、
* 行間) に負けないための名指しと、折り返しの決まりだけを書く。
* 折り返し: 行の長さをそろえ (balance)、文節の途中で切らない (auto-phrase は
* Chrome だけが対応。ほかのブラウザでは通常の折り返し)。 */
#what > .title-s,
.h-features .inner-title .title-s,
.h-latest .title1 .title-l,
.h-top-pricing .title-l,
.h-testis .wrapper > .title-m,
.h-about .right > .title-xs,
.h-faq .inner-faq > .title-m,
.app-sec .left > .title-xs {
font-size: var(--lp-type-heading);
line-height: var(--lp-lh-heading);
letter-spacing: var(--lp-ls-heading);
font-weight: 500;
text-align: center;
text-wrap: balance;
word-break: auto-phrase;
}
/* 文節の塊 (2026-10-05)。word-break: auto-phrase は Chrome だけが対応で、Safari と
* Firefox では「フ / ォローした」「あなた / のAI」のように語の途中で折れていた。
* 長い見出しは原稿で文節ごとに で包み、塊の間でだけ折る
* (どのブラウザでも同じ)。文言は変えない。
* 使いかた 4 段 (.h-cards) の札だけは注意が要る: design2 の `.h-cards span` が、札の中の
* span をすべて「#1」の大きな数字 (幅 100%・120px・絶対配置・不透明度 .2) として描く。
* 文の中の塊には、その指定を 1 つずつ打ち消す (下の `.h-cards .media p .ph`)。 */
.ph { display: inline-block; }
.h-cards .media p .ph {
position: static;
width: auto;
bottom: auto;
left: auto;
font-size: var(--lp-type-body);
line-height: var(--lp-lh-body);
letter-spacing: 0;
opacity: 1;
}
/* 札の見出しも、文節の途中では切らない */
.h-features .feature .bottom h3,
.h-faq .f-quest summary span { word-break: auto-phrase; }
/* 中央揃えの文 (絵が主役の札の文、セクションの注記) は、行の長さをそろえて
* 文節で折る。左揃えの長い本文は、行末をそろえたいので通常の折り返しのまま。 */
.h-cards .media p,
.h-testis .testi .title-xxs,
.h-trust .label,
.sk-pricing-section .sk-note,
.h-about .cmp-note,
.app-sec .label-s {
text-wrap: balance;
word-break: auto-phrase;
}
/* 「どこからでも」だけが左揃えだった。ほかのセクションと同じ中央へ。 */
.homepage .app-sec .left { width: 100%; max-width: none; text-align: center; }
.homepage .app-sec .left > .title-xs { max-width: none; margin-left: auto; margin-right: auto; }
.homepage .app-sec .left > .cta-main { margin-left: auto; margin-right: auto; }