/* ============================================================ TAKT 公式サイト R30 第四段階 — 01〜07 の通しのプロトタイプ 正本：Founder の R30 第二段階の指示（Q1〜Q3＝B）。モーションの規則は MOTION_RULES.md、値の根拠は BUILD_NOTE.md。 比較：?glow=0（コピーをただのフェードで）／?glowk=0.5（光の強さ）／?appglow=0（画面の縁の光なし）／?more=1（説明を 3 文に） ?at=02（形成を飛ばして 02 の手前から）／?once=1（同じタブの 2 回目は形成を飛ばす＝本番の想定）／?fy=4（ファーストビューの組の上げ量 vh） ============================================================ */ :root{ --g1:#151A21;--g2:#1B212A;--ink:#E8EAEC;--ink2:#9AA0A6;--line:#2E343A;--blue:#485CFF;--blue-l:#6D7EFF; --font:-apple-system,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif; --e-out:cubic-bezier(.16,.84,.24,1); /* アプリの easeOut（出てくるもの） */ --e-soft:cubic-bezier(.22,.61,.36,1); /* 光が引いていく曲線（ゆっくり落ち着く） */ --pad:80px;--cw:1280px; /* ---- 文字 ---- */ --tag:23px; /* ロゴの下のコピー */ --brand:30px; /* ブランドコピー（02） */ --desc:18px; /* 説明文 */ /* ---- 余白：役割で変える（ブランド ↔ 画面は広め、画面 ↔ 説明は近く、説明どうしは中くらい） ---- */ --top02:32px; /* ファーストビューの下端 → ブランドコピー（ファーストビューの下半分がすでに余白なので、ここは足さない＝意味のないスクロールを作らない） */ --gapBI:120px; /* ブランドコピー → アプリ画面 */ --gapID:44px; /* アプリ画面 → 説明文（画面を見ながら読める距離） */ --gapDD:136px; /* 説明文 → 説明文 */ --appw:min(1000px,70vw); /* ---- 光（A：ブランドコピーだけ） ---- */ --ga0:1; /* 光の強さの基準（?glowk=）。ロゴの下のコピーは 1、02 のブランドコピーは 0.6（文字が大きいぶん光も大きく見えるので弱める） */ --tag-final:#D3D7DC; /* コピーの落ち着いた色（ロゴ #E8EAEC より一段静か） */ --brand-final:#E8EAEC; } @media (max-width:1279px){:root{--pad:48px;--cw:928px;--tag:21px;--brand:28px;--desc:17px;--gapBI:112px;--gapID:40px;--gapDD:128px;--appw:min(928px,72vw)}} @media (max-width:1023px){:root{--pad:40px;--cw:688px;--tag:19px;--brand:25px;--desc:17px;--top02:32px;--gapBI:96px;--gapID:36px;--gapDD:120px;--appw:min(688px,82vw)}} @media (max-width:767px){:root{--pad:20px;--cw:350px;--tag:17px;--brand:22px;--desc:16px;--top02:24px;--gapBI:72px;--gapID:28px;--gapDD:104px;--appw:100vw}} @media (max-width:389px){:root{--pad:16px;--cw:calc(100vw - 32px);--tag:15px;--brand:20px;--desc:15px;--top02:24px;--gapBI:64px;--gapID:24px;--gapDD:96px}} *{box-sizing:border-box} html{overflow-anchor:none;-webkit-text-size-adjust:100%} body{margin:0;background:var(--g1);color:var(--ink);font-family:var(--font);font-size:var(--desc);line-height:1.9;letter-spacing:0;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-break:strict;word-break:normal;overflow-wrap:anywhere} p,h1,h2,figure{margin:0;padding:0} img{display:block} a{color:inherit;text-decoration:none} .u{display:inline-block} /* 読点・文節の単位。入らなければ丸ごと次の行へ */ .nw{white-space:nowrap} .wrap{max-width:calc(var(--cw) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)} /* ---------- ヘッダー：ファーストビューでは見せず、スクロールが始まったら 0.35 秒で現れて固定 ---------- */ .hd{position:fixed;left:0;right:0;top:0;z-index:20;height:56px;background:var(--g1);border-bottom:1px solid var(--line);transition:opacity .35s var(--e-out)} .hd-in{display:flex;align-items:center;height:100%;gap:28px} .hd .wm{font-family:"Helvetica Neue",Helvetica,var(--font);font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink);line-height:1} .hd a{font-size:14px;font-weight:300;line-height:1;color:var(--ink2)} .hd a:hover,.hd .wm:hover{color:var(--ink)} .hd-r{margin-left:auto;display:flex;align-items:center;gap:28px} html.js body:not(.hdon) .hd{opacity:0;pointer-events:none} @media (max-width:767px){.hd{height:52px}.hd-r{gap:20px}} /* ---------- 01 ロゴ形成 ＋ コピー：100vh。「ロゴ＋コピー」の組を視覚的な中央に ---------- */ .takt-brand{--tko-brand-h:100vh;--tko-brand-h:100svh;padding-bottom:var(--fy,9vh)} /* 組の中心 = (100vh − fy)/2。9vh で組の見える範囲の中心が約 47%（数値の中央より少し上が、目で見た中央。上の余白 ≒ 下の余白 × 0.85） */ .takt-brand #heroDef{display:none} /* 部品が文字単位の演出に使う要素。R30 第二段階では使わない（文全体で出す .tagline に置き換え） */ .tagline{margin-top:clamp(26px,4.2vh,44px);font-size:var(--tag);font-weight:400;line-height:1.6;letter-spacing:.04em;font-feature-settings:"palt";color:var(--tag-final);white-space:nowrap} /* 「下へ」：コピーが落ち着いてから、細い線が 1 回だけ下へ伸びて、そこに留まる。スクロールが始まったら消える */ body.defon .takt-brand .down{opacity:0;animation:none;transition:opacity .25s var(--e-out)} /* 部品の「繰り返し伸び縮み」を止める */ body.defon.cue .takt-brand .down{opacity:.3;animation:tk-cue .9s var(--e-out) both} body.scrolled .takt-brand .down{opacity:0!important} @keyframes tk-cue{from{transform:scaleY(0);transform-origin:50% 0}to{transform:scaleY(1);transform-origin:50% 0}} html:not(.js) #open,html:not(.js) #skip{display:none} html:not(.js) .takt-brand .bigwm{visibility:visible} html:not(.js) .takt-brand .wmsvg{display:none} /* ============================================================ R30 第四段階：背景は C #151A21（Founder 決定）。節は「細い線（始まり）→ 見出し → 一文 → 見せ場」。番号は付けない ============================================================ */ :root{--secEnd:88px;--line:#2C333C;--hair:rgba(255,255,255,.075);--paper:#FAFBFC;--descc:#B4B9BF; --brand:44px;--title:40px;--h3:27px;--secPad:120px;--headGap:18px;--leadVis:56px;--capVis:72px;--subGap:112px;--pw:540px} @media (max-width:1279px){:root{--brand:40px;--title:37px;--h3:25px;--secPad:112px;--pw:500px}} @media (max-width:1023px){:root{--secEnd:80px;--brand:34px;--title:32px;--h3:23px;--secPad:104px;--leadVis:48px;--capVis:64px;--subGap:96px;--pw:440px}} @media (max-width:767px){:root{--secEnd:64px;--brand:27px;--title:26px;--h3:20px;--secPad:88px;--headGap:14px;--leadVis:36px;--capVis:52px;--subGap:80px;--pw:min(320px,84vw)}} @media (max-width:389px){:root{--brand:24px;--title:23px;--h3:19px;--secPad:80px}} .hd{background:var(--g1)} /* ---------- 共通：節の始まり（細い線）・見出し・一文 ---------- */ .sec{position:relative;margin-top:var(--secEnd);padding-top:var(--secPad);text-align:center} /* 前の節の終わりの余白 → 細い線 → この節の始まりの余白 */ .sec::before{content:"";position:absolute;top:0;left:50%;width:min(var(--cw),calc(100% - var(--pad)*2));height:1px;transform:translateX(-50%);background:var(--hair)} /* 節の始まりの細い線＝前の節の終わり */ .sec-h{font-size:var(--title);font-weight:600;line-height:1.35;letter-spacing:.02em;font-feature-settings:"palt";color:#EEF0F2} .sec-h::before{content:"";display:block;width:28px;height:2px;margin:0 auto 26px;background:var(--blue);border-radius:1px} /* TAKT の青：節の始まりの印。光らせない */ .sub-h{font-size:var(--h3);font-weight:600;line-height:1.45;letter-spacing:.02em;font-feature-settings:"palt";color:#E6E9EC} .lead{font-size:var(--desc);font-weight:400;line-height:1.9;color:var(--descc);max-width:36em;margin:var(--headGap) auto 0} .cap{font-size:var(--desc);line-height:1.9;color:var(--descc);max-width:36em;margin:28px auto 0} .note{font-size:13px;line-height:1.7;color:var(--ink2);margin:16px auto 0} .s{display:block} /* 句点の位置で文を区切る（文の中は文節の単位で折り返す） */ .fn{font-size:13px;line-height:1.75;color:var(--ink2);max-width:34em;margin:22px auto 0} /* 注釈：本文より小さく、色を一段落とす */ /* ダウンロード：DOWNLOAD_URL が空のあいだは「公開準備中」。URL を入れると有効になる */ .dl{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .dl .dl-s{font-size:11px;font-weight:500;line-height:1;padding:3px 6px;border-radius:3px;background:rgba(201,161,90,.14);color:#D9B675} .dl.ready .dl-s{display:none} .dl:not(.ready){cursor:default} .hd .dl-hd{height:32px;padding:0 12px;border-radius:7px;background:var(--blue);color:#fff;font-size:13px;font-weight:600} .hd .dl-hd:not(.ready){background:#2A3140;color:#C9CED4} .hd .dl-hd:hover{color:#fff} @media (max-width:767px){.hd .hd-sup{display:none}.hd-r{gap:16px}} @media (max-width:389px){.hd .hd-l{display:none}.hd .dl-hd{font-size:12px;padding:0 10px}} .sec img{width:100%;height:auto} /* 未完成（素材待ち）の印：プロトタイプだけの表示。完成品の一部に見えないように点線と琥珀色 */ .proto{display:inline-block;margin:14px auto 0;padding:6px 12px;border:1px dashed #C9A15A;border-radius:4px;font-size:12px;line-height:1.6;color:#D9B675;background:rgba(201,161,90,.06);text-align:left;max-width:40em} .proto b{font-weight:600} /* ---------- 02 製品の登場 ---------- */ #about{padding:var(--top02) 0 0;text-align:center;overflow-x:clip} /* 光（halo）が左右の画面の外に広がっても横スクロールを作らない（上下は切らない＝光の上端に境目を作らない） */ #about .brand2,#license .closing{font-size:var(--brand);font-weight:600;line-height:1.35;letter-spacing:.02em;font-feature-settings:"palt";color:var(--brand-final)} #license .closing{margin:72px auto 0;text-align:center} #license .closing .l{display:block} /* Founder の改行：「映像の確認も、修正指示も。」／「TAKTひとつで。」 */ #about .stage{position:relative;width:var(--appw);margin:var(--gapBI) auto 0} #about .app{position:relative;z-index:1;border-radius:7px;overflow:hidden;border:1px solid var(--line);background:#0B0C0E;box-shadow:0 30px 80px rgba(0,0,0,.42)} #about .frame{aspect-ratio:2880/1800;overflow:hidden} #about .frame img{width:100%;height:auto;margin-top:-2.2222%} #about .halo,#about .edge,#about .veil,#about .tint{position:absolute;pointer-events:none;opacity:0} #about .halo{z-index:0;left:50%;top:50%;width:155%;height:205%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(72,92,255,.78),rgba(72,92,255,.46) 38%,rgba(72,92,255,.16) 66%,rgba(72,92,255,0))} #about .edge{z-index:2;inset:0;border-radius:7px;box-shadow:0 0 0 1px rgba(140,155,255,.95),0 0 36px rgba(90,108,255,.62),0 0 130px rgba(72,92,255,.34)} #about .tint{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(120,135,255,.20),rgba(72,92,255,.06) 70%);mix-blend-mode:screen} /* 光が画面の表面に一瞬当たる（1.5 秒で消える。文字の読みやすさは最後に元どおり） */ #about .veil{z-index:2;inset:0;background:#080B10} /* 02 のメインコピー（第八段階）：ブランドコピーと同じ組み（太さ・行間・青い光の登場）。文が長いので大きさは --brand より一段だけ控える。 デスクトップは Founder の改行どおり 2 行（「映像を再生しながら、」／「気になるフレームにコメントを書き込めます。」）、幅が足りなければ文節で 3 行 */ #about .copy02{font-size:40px;line-height:1.45} #about .copy02 .l{display:block} @media (max-width:1279px){#about .copy02{font-size:36px}} @media (max-width:1023px){#about .copy02{font-size:31px}} @media (max-width:767px){#about .copy02{font-size:25px;line-height:1.5}#about .copy02 .u{display:block}} /* スマートフォンは文節ごとに 3 行 */ @media (max-width:389px){#about .copy02{font-size:22px}} @media (max-width:767px){ #about .stage{width:auto;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1)} #about .app{border-radius:0;border-left:0;border-right:0} #about .edge{border-radius:0} body.m02crop #about .frame{aspect-ratio:2448/1800} /* 比較用（旧既定）：左 15% を切り出す */ body.m02crop #about .frame img{width:117.647%;margin-left:-17.647%;margin-top:-2.6144%} } /* ---------- 03 フレームにコメントを書き込む（第十一段階：Web 用に描き直した図） ---------- 下地は Product の正本 F0103_clean_1920x1080.png（配布用マスター 4.1Mbps の 103 コマ目・コメントなし）。幅 860px なら 2 倍の画面で 1720 画素（1920 の中・引き伸ばさない）。 印と番号の札は SVG。線の太さ・札の大きさは製品と同じく画面の pt で一定（映像の大きさに関係しない）：暗い縁 3.6pt（#0E1012 の 55%）＋色の線 2pt・継ぎ目は丸、札 21pt・縁 3pt（50%）・数字 12pt の太字・黒 */ #comment .proc{margin-top:var(--leadVis)} #comment .shot{position:relative;width:min(860px,var(--appw));margin:0 auto;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#0B0C0E;--bs:0 20px 60px rgba(0,0,0,.35);box-shadow:var(--bs)} #comment .fr{display:block;width:100%;height:auto} #comment .mk path,#comment .mk ellipse{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} #comment .mk .dk{stroke:rgba(14,16,18,.55);stroke-width:3.6px} #comment .mk .cl{stroke:var(--c);stroke-width:2px} #comment .bd rect,#tools .card .bdg rect{paint-order:stroke fill} /* 最終調整：製品と同じく、縁の線を引いてから塗る＝暗い縁は外側の 1.5pt だけ（正本 03_DRAW_WEB_SPEC §4） */ #comment .bd rect{fill:var(--c);stroke:rgba(14,16,18,.5);stroke-width:3px;vector-effect:non-scaling-stroke} #comment .bd text{fill:#000;font-family:-apple-system,"SF Pro Text","Helvetica Neue",sans-serif;font-weight:700;font-variant-numeric:tabular-nums;text-anchor:middle;dominant-baseline:central} /* コメントの行：図と同じ幅・同じ左端。番号の札は一覧と同じ基準の色 */ #comment .rows{list-style:none;margin:18px auto 0;padding:0;width:min(860px,var(--appw));display:grid;grid-template-columns:1fr 1fr;gap:14px} #comment .row{margin:0;padding:15px 18px 16px;background:#1A1F27;border:1px solid #343C47;border-radius:8px;text-align:left} #comment .rh{display:flex;align-items:center;gap:10px;margin:0;line-height:1} #comment .rh i{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;flex:none;background:var(--c);color:#000;font:700 12px/1 -apple-system,"SF Pro Text","Helvetica Neue",sans-serif;font-style:normal;font-variant-numeric:tabular-nums} #comment .rh .tc{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;color:var(--ink2);letter-spacing:.02em} #comment .row .tx{margin:10px 0 0;font-size:15px;line-height:1.7;color:#E3E6EA;text-wrap:pretty} #comment .row .tx .s,#comment .row .tx .u{display:inline-block} /* 文節（日本語）・文（ほかの言語）の途中で折らない。最後の 1 字だけ次の行へ送られない */ #comment .f03{margin:14px auto 0;font-size:12px;color:var(--ink2)} @media (max-width:767px){ #comment .shot{width:100%} #comment .rows{width:100%;grid-template-columns:1fr;gap:10px;margin-top:12px} #comment .row{padding:14px 16px 15px} #comment .row .tx{font-size:16px;line-height:1.65} } /* 03-B ツール：縦スクロールに合わせて、カードの列が横へゆっくり送られる（スクロールを止めない・止めたら止まる） */ #tools{margin-top:var(--subGap)} #tools .rail{position:relative;margin:var(--leadVis) calc(50% - 50vw) 0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:max(var(--pad),calc(50vw - var(--cw)/2));padding:4px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;outline:none;cursor:grab} #tools .rail::-webkit-scrollbar{display:none} #tools .rail.drag{cursor:grabbing;scroll-snap-type:none} #tools .rail:focus-visible{box-shadow:inset 0 0 0 1px var(--blue-l)} #tools .track{display:flex;gap:20px;width:max-content;padding:0 max(var(--pad),calc(50vw - var(--cw)/2))} #tools .card{width:300px;flex:none;text-align:left;scroll-snap-align:start;user-select:none;-webkit-user-select:none} #tools .card .im{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#0B0C0E} #tools .card .im img{display:block;width:100%;height:100%;object-fit:cover} #tools .card .im.wait{display:flex;align-items:center;justify-content:center;border:1px dashed #C9A15A;background:rgba(201,161,90,.05);color:#D9B675;font-size:12px;line-height:1.6;padding:16px;text-align:center} #tools .meta{display:flex;align-items:center;gap:10px;margin-top:14px} #tools .meta img{width:26px;height:26px;flex:none;border-radius:5px} #tools .meta b{font-size:17px;font-weight:600;color:#E6E9EC} #tools .meta span{font-size:14px;color:var(--ink2);line-height:1.5} @media (max-width:767px){#tools .card{width:210px}#tools .track{gap:14px}#tools .meta img{width:18px;height:18px}#tools .meta b{font-size:16px}#tools .meta span{font-size:13px}} /* 210px × 3 倍 ＝ 630px ≒ 素材 600px／釦 18px × 3 ＝ 54px ≒ 素材 52px */ /* ---------- 04 PDFに書き出す：本物の PDF を、最初から適切な大きさで（拡大の演出はしない） ---------- */ #pdf .papers{position:relative;width:var(--pw);margin:var(--leadVis) auto 0;left:-2.25%} #pdf .paper{position:relative;z-index:1;background:var(--paper);border-radius:2px;--bs:0 2px 4px rgba(0,0,0,.22),0 18px 48px rgba(0,0,0,.42);box-shadow:var(--bs)} #pdf .paper.p2{position:absolute;z-index:0;left:0;top:0;width:100%;transform:translate(4.5%,1.6%)} #pdf .meta,#cut .meta{margin:calc(var(--visCap,28px) + 14px) auto 0;font-size:13px;line-height:1.6;color:var(--ink2)} .sec .pdfl{margin:10px auto 0;font-size:13px;line-height:1.6;color:var(--ink2);display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap} /* 控えめなリンク（04） */ .sec .pl{color:#A9B4FF;text-decoration:none;border-bottom:1px solid rgba(169,180,255,.35)} .sec .pl:hover{color:#C6CDFF;border-bottom-color:rgba(198,205,255,.7)} .sec .pl[aria-disabled]{color:var(--ink2);border-bottom-color:transparent;cursor:default} .sec .pdfl .sep{color:#4A525C} .sec .pdfl .soon{font-size:11px;font-weight:500;line-height:1;padding:3px 6px;border-radius:3px;background:rgba(201,161,90,.14);color:#D9B675} .sec .pdfl.ready .soon{display:none} /* 色ごとの PDF（素材待ち） */ #split{margin-top:var(--subGap)} #split .slots{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:var(--leadVis)} #split .slot{width:132px;aspect-ratio:595/842;border:1px dashed #C9A15A;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#D9B675;font-size:12px;line-height:1.5;background:rgba(201,161,90,.04)} #split .slot i{display:block;width:12px;height:12px;border-radius:50%} @media (max-width:767px){#split .slot{width:96px}} /* ---------- 05 カット表を生成する ---------- */ #cut .app5{width:var(--appw);margin:var(--leadVis) auto 0;border-radius:8px;overflow:hidden;border:1px solid var(--line);--bs:0 24px 70px rgba(0,0,0,.4);box-shadow:var(--bs)} #cut .gen{position:relative;width:min(720px,100%);margin:var(--capVis) auto 0}#cut .sheetw{position:relative} #cut .sheet{position:relative;width:100%;margin:0;background:var(--paper);border-radius:3px;overflow:hidden;aspect-ratio:567/339.36;box-shadow:0 2px 4px rgba(0,0,0,.22),0 18px 48px rgba(0,0,0,.42)} #cut .sheet>img{position:absolute;max-width:none;height:auto;width:calc(595/567*100%);left:calc(-14/567*100%);top:calc(-15.72/339.36*100%)} /* カット表の中身（x36〜559・y36〜333.5）の四方に 22pt */ #cut .sheet .cv{position:absolute;background:var(--paper)} /* 8 つのカットを順に見せるための、紙と同じ色の覆い（最後は全部外れて、元の PDF のまま） */ #cut .zc{display:none;width:100%;margin:16px auto 0;border-radius:4px;overflow:hidden;border:1px solid var(--line)} /* スマートフォンだけ：アプリの画面の C-1・C-2（2 倍の画素 1150px。3 倍の画面で 383px まで引き伸ばさない） */ /* 05 の B（既定）：カット表の紙が、アプリの画面の下の方に重なって前に出る（比較 A は ?m05=a：画面の下に紙を並べる） */ body:not(.m05a) #cut .gen{z-index:2;width:var(--pw);margin-top:calc(var(--appw)*-.15);--sy:-50%;--ss:.5;--rx:10deg;--c0:-25%} /* B（第八段階）：書き出したカット表のページ全体をそのまま（A4 縦・595×842pt。切り抜かない＝比率・余白・下の「Made with TAKT」と日付まで実物どおり） */ body.cuta:not(.m05a) #cut .sheet{aspect-ratio:var(--cutar,595/842)} body.cuta:not(.m05a) #cut .sheet>img{position:static;display:block;width:100%;left:auto;top:auto} /* 第九段階の比較 B（?cut=b）：PDF は変えず、Web の表示だけ上部（見出しと 8 カット）を中心に。切り抜く範囲は中身の外形から四方 22pt（第五段階と同じ）。 下の余白と「Made with TAKT」・日付は表示の範囲の外（PDF には残っている。「PDF 全体を見る」で開く） */ body:not(.m05a):not(.cuta) #cut .gen{width:min(720px,100%);--sy:-46%;--ss:.5;--c0:-21%} body:not(.m05a) #cut .app5{position:relative;z-index:1} @media (max-width:767px){body:not(.m05a) #cut .gen{width:100%;margin-top:20px;--sy:-50%;--ss:.6;--rx:8deg;--c0:-20%}body:not(.m05a):not(.cuta) #cut .gen{--sy:-82%;--c0:-52%}} /* スマートフォン：光と紙の出どころは、上の C-1・C-2 の画面の中ほど */ @media (max-width:767px){#cut .app5{width:auto;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);border-radius:0;border-left:0;border-right:0}#cut .zc{display:block}} /* ---------- 06 動画のアップロードは不要 ---------- */ #local .ways{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:var(--leadVis) auto 0;text-align:left} #local .way{border:1px solid var(--line);border-radius:10px;padding:30px 30px 28px;background:rgba(255,255,255,.02)} #local .way h3{font-size:19px;font-weight:600;color:#E6E9EC;line-height:1.5} #local .files{display:flex;align-items:center;gap:12px;margin:22px 0 20px;flex-wrap:wrap} #local .file{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:6px;background:#202733;border:1px solid #333C48;font-size:13px;color:#D8DCE1;font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:0} #local .file i{display:none} #local .plus,#local .to{color:var(--ink2);font-size:14px} #local .way p{font-size:16px;line-height:1.85;color:var(--descc)} #local .way p+p{margin-top:10px} #local .cond{margin:14px 0 0;padding:0;list-style:none} #local .cond li{position:relative;padding-left:14px;font-size:14px;line-height:1.75;color:var(--ink2)} #local .cond li+li{margin-top:6px} #local .cond li::before{content:"";position:absolute;left:0;top:.78em;width:5px;height:1px;background:currentColor} @media (max-width:767px){#local .ways{grid-template-columns:1fr;gap:16px}#local .way{padding:24px 20px 22px}} /* ---------- 07 試してから、購入する ---------- */ #license .compare{display:flex;gap:40px;justify-content:center;margin-top:var(--leadVis)} #license figure{width:min(330px,40vw)} #license .pg{background:var(--paper);border-radius:2px;--bs:0 2px 4px rgba(0,0,0,.22),0 18px 48px rgba(0,0,0,.42);box-shadow:var(--bs)} #license figcaption{margin-top:16px;font-size:14px;color:var(--descc)} #license .facts{padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;margin:56px auto 0;max-width:760px;font-size:15px;color:var(--descc)} #license .facts li{list-style:none} #license .facts li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue-l);margin-right:10px;vertical-align:3px} #license .cta{display:flex;gap:14px;justify-content:center;margin-top:52px;flex-wrap:wrap} #license .btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 26px;border-radius:8px;font-size:15px;font-weight:600} #license .btn.pri{background:var(--blue);color:#fff} #license .btn.pri:not(.ready){background:#2A3140;color:#C9CED4} #license .btn{cursor:pointer}#license .btn.dl:not(.ready){cursor:default} #license .btn.sec2{border:1px solid #3A4350;color:#E6E9EC} @media (max-width:767px){#license .compare{gap:14px}#license figure{width:46vw}#license .facts{flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;padding:0}} .ft{margin-top:var(--secPad);padding:40px 0 56px;border-top:1px solid var(--hair);font-size:13px;color:var(--ink2)} .ft .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center} .ft .wm{font-family:"Helvetica Neue",Helvetica,var(--font);font-weight:700;letter-spacing:.06em;color:var(--ink);margin-right:auto} .ft a{position:relative}.ft a::before{content:"";position:absolute;left:-6px;right:-6px;top:-8px;bottom:-8px}.ft a:hover{color:var(--ink)} /* R30 FINAL：フッターは本番と同じリンク。見た目はそのまま、押せる範囲だけ広げ、乗せたときに明るく */ /* ============================================================ モーション（MOTION_RULES.md） ============================================================ */ @keyframes tk-brand-in{ 0% {opacity:0;color:color-mix(in oklab,var(--fin) calc(100% - 52%*var(--ga)),#7F8DFF);text-shadow:0 0 0 rgba(72,92,255,0),0 0 0 rgba(150,162,255,0)} 30% {opacity:1;color:color-mix(in oklab,var(--fin) calc(100% - 40%*var(--ga)),#8E9AFF);text-shadow:0 0 calc(22px*var(--ga)) rgba(72,92,255,calc(.62*var(--ga))),0 0 calc(6px*var(--ga)) rgba(109,126,255,calc(.38*var(--ga)))} 100%{opacity:1;color:var(--fin);text-shadow:0 0 calc(30px*var(--ga)) rgba(72,92,255,0),0 0 calc(8px*var(--ga)) rgba(109,126,255,0)} } .tagline{--fin:var(--tag-final);--ga:var(--ga0)}#about .brand2,#license .closing{--fin:var(--brand-final);--ga:calc(var(--ga0)*.6)} html.js .mA{opacity:0} html.js .mA.on{animation:tk-brand-in var(--dA,1.6s) var(--e-soft) both} html.js .mA.on.instant{animation:none;opacity:1} /* B 説明文 */ html.js .mB{opacity:0;transform:translateY(8px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)} html.js .mB.on{opacity:1;transform:none} /* H 見出し（03 以降）：上の青い線が中央から伸び、見出しがわずかに青みを帯びて現れ、白へ落ち着く。02 の光（A・E）を基準に、強さはずっと控えめ */ @keyframes tk-head-in{ 0% {opacity:0;transform:translateY(10px);color:color-mix(in oklab,var(--hfin) calc(100% - 38%*var(--hg)),#8E9AFF);text-shadow:0 0 0 rgba(72,92,255,0)} 32% {opacity:1;transform:none;color:color-mix(in oklab,var(--hfin) calc(100% - 26%*var(--hg)),#8E9AFF);text-shadow:0 0 calc(18px*var(--hg)) rgba(72,92,255,calc(.42*var(--hg)))} 100%{opacity:1;transform:none;color:var(--hfin);text-shadow:0 0 calc(24px*var(--hg)) rgba(72,92,255,0)} } .sec-h{--hfin:#EEF0F2;--hg:1.3}.sub-h{--hfin:#E6E9EC;--hg:.8} /* 小見出しは一段弱く */ html.js .mH{opacity:0} html.js .mH.on{animation:tk-head-in 1.3s var(--e-soft) both} html.js .mH::before{transform:scaleX(0);transition:transform .8s var(--e-out) .1s} html.js .mH.on::before{transform:none} /* G 見せ場の柔らかい青（03 のフレーム・04 の PDF・05 の画面・07 の比較）：出るときに縁と周りに淡い青が一度だけ。02 の光の 1/4 ほどの強さ */ @keyframes tk-glw{ 0% {box-shadow:var(--bs),0 0 0 1px rgba(109,126,255,0),0 0 0 rgba(72,92,255,0)} 40% {box-shadow:var(--bs),0 0 0 1px rgba(109,126,255,.30),0 0 64px rgba(72,92,255,.20)} 100%{box-shadow:var(--bs),0 0 0 1px rgba(109,126,255,0),0 0 90px rgba(72,92,255,0)} } html.js .glw.on:not(.papers):not(.compare),html.js .papers.glw.on .p1,html.js .compare.glw.on .pg{animation:tk-glw 1.9s var(--e-soft) .2s both} /* C 画面（03・05）：フェード ＋ 16px。光なし */ html.js .mC{opacity:0;transform:translateY(16px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)} html.js .mC.on{opacity:1;transform:none} /* F 部品：フェード ＋ 8px */ html.js .mF{opacity:0;transform:translateY(8px);transition:opacity .55s var(--e-out),transform .55s var(--e-out)} html.js .mF.on{opacity:1;transform:none} /* 03 の番号の札とコメントの行：手を離して約 0.1 秒後に出る（site.js が .on を付ける） */ html.js #comment .bd{opacity:0;transform:scale(.82);transform-box:fill-box;transform-origin:center;transition:opacity .16s ease-out,transform .24s var(--e-out)} html.js #comment .bd.on{opacity:1;transform:none} html.js #comment .row{opacity:0;transform:translateY(6px);transition:opacity .45s var(--e-out),transform .45s var(--e-out)} html.js #comment .row.on{opacity:1;transform:none} /* D 成果物（PDF・カット表）：フェード ＋ 12px、影が遅れて深くなる */ html.js .mD{opacity:0;transform:translateY(12px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)} html.js .mD.on{opacity:1;transform:none} html.js #pdf .mD .paper.p2{opacity:0;transform:translate(2%,.7%);transition:opacity .6s var(--e-out) .18s,transform .6s var(--e-out) .18s} html.js #pdf .mD.on .paper.p2{opacity:1;transform:translate(4.5%,1.6%)} /* Z 抜き出す（04 の A）：1 行目の切り出しが、ページの 1 行目の位置と大きさから、手前の位置へ（JS が始点を計算。終点で元の大きさ＝くっきり） */ /* K カット表：紙が置かれたあと、8 つのカットが読む順に 70ms ずつ現れる */ html.js #cut .sheet .cv{transition:opacity .45s var(--e-out)} html.js #cut .sheetw:not(.on) .cv{opacity:1} html.js #cut .sheetw.on .cv{opacity:0} html:not(.js) #cut .sheet .cv{display:none} /* N カット表が生まれる（05 の B・既定）：画面の上に青い光が生まれ、その光から紙が「ポッ」と生まれ（青白い光の紙 → 紙）、 淡い青の軌跡を残しながら、少し手前に起き上がって下の定位置へ進み、画面の下の方に重なって定着する。後ろの画面は一段暗く。 ・紙の動きは 0%→100% の 1 本の曲線（途中のキーフレームを置かない＝速さが途中で 0 に落ちない） ・動かすのは transform と opacity だけ（box-shadow・filter は動かさない＝毎フレームの描き直しをしない） ・時間：光 0ms〜（330ms で最も明るい）／紙 280ms から 1300ms／軌跡は紙と同じ曲線で伸び、2.0 秒で消える／8 つのカットは着いてから */ body:not(.m05a) #cut .sheet{box-shadow:0 2px 4px rgba(0,0,0,.22),0 26px 64px rgba(0,0,0,.5)} #cut .g-born,#cut .g-trail,#cut .g-ring{position:absolute;pointer-events:none;opacity:0;display:none} body:not(.m05a) #cut .g-born,body:not(.m05a) #cut .g-trail,body:not(.m05a) #cut .g-ring{display:block} #cut .g-born{left:50%;top:var(--c0);width:64%;aspect-ratio:1.7;transform:translate(-50%,-50%) scale(.3);background:radial-gradient(closest-side,rgba(168,180,255,.78),rgba(92,110,255,.32) 46%,rgba(72,92,255,0))} #cut .g-trail{left:27%;width:46%;top:var(--c0);height:calc(50% - var(--c0));transform-origin:50% 0;transform:scaleY(0);background:radial-gradient(closest-side,rgba(110,128,255,.38),rgba(72,92,255,0))} #cut .g-ring{inset:0;border-radius:3px;box-shadow:0 0 0 1px rgba(136,150,255,.75),0 0 44px 4px rgba(72,92,255,.42),0 0 120px 24px rgba(72,92,255,.16)} #cut .sheet::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(196,206,255,.42),rgba(150,166,255,.34))} /* 生まれる瞬間の淡い青（第八段階：中身が最初から透けて見える濃さ＝紙は最初から完成品） */ #cut .sheetw{transform-origin:50% 0} @keyframes tk-g-mv{from{transform:perspective(1600px) translateY(var(--sy)) scale(var(--ss)) rotateX(var(--rx))}to{transform:perspective(1600px) translateY(0) scale(1) rotateX(0deg)}} @keyframes tk-g-in{from{opacity:0}to{opacity:1}} @keyframes tk-g-out{from{opacity:1}to{opacity:0}} @keyframes tk-g-tri{0%{opacity:0}30%{opacity:1}100%{opacity:0}} @keyframes tk-g-grow{from{transform:translate(-50%,-50%) scale(.3)}to{transform:translate(-50%,-50%) scale(1.3)}} @keyframes tk-g-trs{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes tk-g-dim{from{opacity:0}to{opacity:.26}} html.js body:not(.m05a) #cut .sheetw.mD{transition:none;opacity:0;transform:perspective(1600px) translateY(var(--sy)) scale(var(--ss)) rotateX(var(--rx))} html.js body:not(.m05a) #cut .sheetw.mD.on{animation:tk-g-mv 1.3s cubic-bezier(.42,0,.16,1) .28s both,tk-g-in .34s cubic-bezier(.3,.6,.3,1) .28s both} html.js body:not(.m05a) #cut .sheetw.on .sheet::after{animation:tk-g-out .95s cubic-bezier(.4,.2,.3,1) .34s both} html.js body:not(.m05a) #cut .sheetw.on .g-ring{animation:tk-g-tri 1.75s linear .28s both} html.js body:not(.m05a) #cut .gen.on .g-born{animation:tk-g-grow 1.1s cubic-bezier(.2,.7,.3,1) both,tk-g-tri 1.1s linear both} html.js body:not(.m05a) #cut .gen.on .g-trail{animation:tk-g-trs 1.3s cubic-bezier(.42,0,.16,1) .28s both,tk-g-tri 2s linear .28s both} html.js body:not(.m05a) #cut .sheetw.mD.on.instant{transform:none;opacity:1} body:not(.m05a) #cut .app5::after{content:"";position:absolute;inset:0;background:#0B0E12;opacity:0;pointer-events:none} html.js body:not(.m05a) #cut.born .app5::after{animation:tk-g-dim .9s cubic-bezier(.3,.6,.3,1) .1s both} body:not(.m05a) #cut:has(.sheetw.on) .app5::after{opacity:.26} html:not(.js) body:not(.m05a) #cut .app5::after{opacity:.26} body:not(.m05a) #cut .app5.glw.on{animation:none} /* B では画面の縁の光（box-shadow の動き）を出さない：紙の光と役割が重なり、紙の動きと同時に描き直しが起きていた */ /* E 製品の登場（02・既定）：暗い中に青い光が生まれ、その光とともに画面が浮かび上がる → 光がピーク → 画面が定着 → 光が引く */ html.js .mE .app{opacity:0;transform:translateY(64px) scale(.955)} html.js .mE .veil{opacity:.8} html.js .mE.on .app{animation:tk-rise 1.55s cubic-bezier(.12,.82,.2,1) both} html.js .mE.on .veil{animation:tk-veil 1.2s cubic-bezier(.3,.6,.3,1) .1s both} html.js .mE.on .tint{animation:tk-tint 1.5s cubic-bezier(.3,.6,.3,1) .15s both} html.js .mE.on .halo{animation:tk-halo 3s cubic-bezier(.25,.6,.3,1) both} html.js .mE.on .edge{animation:tk-edge 2.6s cubic-bezier(.3,.6,.3,1) .25s both} @keyframes tk-rise{0%{opacity:0;transform:translateY(64px) scale(.955)}35%{opacity:1}100%{opacity:1;transform:none}} @keyframes tk-veil{from{opacity:.8}to{opacity:0}} @keyframes tk-tint{0%{opacity:0}28%{opacity:1}100%{opacity:0}} @keyframes tk-halo{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}24%{opacity:1;transform:translate(-50%,-50%) scale(.82)}46%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}} @keyframes tk-edge{0%{opacity:0}35%{opacity:1}100%{opacity:0}} /* 比較 A（?app=a）：第三段階までの控えめな登場（フェード ＋ 16px、縁に薄い青が一度） */ @keyframes tk-app-edge{0%{box-shadow:0 30px 80px rgba(0,0,0,0),0 0 0 rgba(72,92,255,0)}45%{box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 56px rgba(72,92,255,.13)}100%{box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 72px rgba(72,92,255,0)}} html.js .mEa{opacity:0;transform:translateY(16px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)} html.js .mEa.on{opacity:1;transform:none} html.js .mEa.on .app{animation:tk-app-edge 1.6s var(--e-soft) both} html.js .on.instant,html.js .on.instant *{transition:none!important;animation:none!important} html.js .mE.on.instant .app,html.js .mE.on.instant .veil{opacity:1;transform:none}html.js .mE.on.instant .veil,html.js .mE.on.instant .halo,html.js .mE.on.instant .edge{opacity:0} @media (prefers-reduced-motion:reduce){ html.js .mA,html.js .mA.on{animation:none;opacity:1} html.js .mB,html.js .mC,html.js .mH,html.js .mF,html.js .mD,html.js .mEa{opacity:1;transform:none;transition:none} html.js .mH,html.js .mH.on{opacity:1;animation:none} html.js .mH::before{transform:none;transition:none} html.js .glw.on,html.js .glw.on .p1,html.js .glw.on .pg{animation:none!important} html.js #comment .bd,html.js #comment .row{opacity:1;transform:none;transition:none} html.js .mE .app{opacity:1;transform:none;animation:none!important} html.js .mE .veil,html.js .mE .halo,html.js .mE .edge,html.js .mE .tint{opacity:0;animation:none!important} html.js #pdf .mD .paper.p2{opacity:1;transform:translate(4.5%,1.6%);transition:none} html.js #cut .sheet .cv{display:none} html.js body:not(.m05a) #cut .sheetw.mD,html.js body:not(.m05a) #cut .sheetw.mD.on{animation:none!important;transform:none;opacity:1} html.js body:not(.m05a) #cut .g-born,html.js body:not(.m05a) #cut .g-trail,html.js body:not(.m05a) #cut .g-ring,html.js body:not(.m05a) #cut .sheet::after{animation:none!important;opacity:0} html.js body:not(.m05a) #cut.born .app5::after{animation:none} .hd{transition:none} body.defon .takt-brand .down{opacity:.3;transform:none} } /* ============================================================ 第十段階（正式素材・10 言語）で足したもの ============================================================ */ /* 言語の切り替え（ヘッダーの右。目立たせない） */ .lng{position:relative} .lng-b{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer} .lng-b:hover,.lng-b[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.05)} .lng-b:focus-visible{outline:1px solid var(--blue-l);outline-offset:2px} .lng-b .glb{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.1} .lng-l{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:168px;margin:0;padding:6px;list-style:none;background:#1B2129;border:1px solid #2E3640;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.45)} .lng-l[hidden]{display:none} .lng-l a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:7px;color:#C9CED4;font-size:14px;line-height:1.3;text-decoration:none} .lng-l a:hover,.lng-l a:focus-visible{background:rgba(109,126,255,.12);color:#fff;outline:none} .lng-l a[aria-current="true"]{color:#fff} .lng-l a[aria-current="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-l);box-shadow:0 0 8px rgba(109,126,255,.8)} @media (max-width:767px){.lng-b .lng-n{display:none}.lng-b{padding:0 7px}.lng-l{right:-8px}} /* 02：日本語以外のページで、画面が日本語版であることの注記 */ .uinote{margin:18px auto 0;font-size:13px;color:var(--ink2)} .uinote:empty{display:none} /* 03-B：道具の説明図（SVG）のカード（第十一段階：押しても何も開かない。押せるように見える演出は付けない） パソコン：7 枚を一度に見渡せる並び（4 枚＋3 枚・中央そろえ）。スマートフォン：横に送る列（カードは画面の 76%） */ #tools .track{margin:0;list-style:none} #tools .card .cb{display:block;width:100%} #tools .card .im{display:block;aspect-ratio:16/9;background:#14181E;border:1px solid #2A313A;border-radius:8px;overflow:hidden} #tools .card .im svg{display:block;width:100%;height:100%} #tools .card .bdg text{font:700 12px/1 -apple-system,"SF Pro Text","Helvetica Neue",sans-serif;font-variant-numeric:tabular-nums;fill:#000} #tools .card .tsm{font:600 30px/1 -apple-system,"Hiragino Sans","PingFang SC","Apple SD Gothic Neo","Helvetica Neue",sans-serif} #tools .fig{margin:10px auto 0;font-size:12px;color:var(--ink2);max-width:36em} @media (min-width:768px){ #tools .rail{margin:var(--leadVis) 0 0;overflow:visible;padding:0;scroll-snap-type:none;cursor:auto} #tools .track{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 20px;width:auto;padding:0} #tools .card{width:calc((100% - 60px)/4)} } @media (min-width:768px) and (max-width:1279px){#tools .card{width:calc((100% - 40px)/3)}} @media (min-width:768px) and (max-width:1023px){#tools .card{width:calc((100% - 20px)/2)}} @media (max-width:767px){#tools .card{width:min(300px,76vw)}#tools .track{gap:14px}} /* 04：色ごとの PDF（実物の 1 ページ目・押すと開く） */ #split .sp{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;max-width:1000px;margin:var(--leadVis) auto 0;padding:0;list-style:none} #split .spa{display:block;text-decoration:none;color:inherit} #split .spi{display:block;background:var(--paper);border-radius:2px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.2),0 12px 30px rgba(0,0,0,.35);transition:transform .35s var(--e-out),box-shadow .35s var(--e-out)} #split .spi img{display:block;width:100%;height:auto} #split .spa:hover .spi,#split .spa:focus-visible .spi{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.2),0 18px 40px rgba(0,0,0,.4),0 0 0 1px rgba(109,126,255,.35),0 0 40px rgba(72,92,255,.18)} #split .spa:focus-visible{outline:none} #split .spn{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:#DDE1E6} #split .spn i{width:10px;height:10px;border-radius:2px;background:var(--c);flex:none} #split .spk{display:block;margin-top:2px;font-size:12px;color:var(--ink2)} #split .fn{margin-top:22px} @media (max-width:1023px){#split .sp{grid-template-columns:repeat(3,1fr);max-width:560px}} @media (max-width:767px){#split .sp{grid-template-columns:repeat(2,1fr);gap:22px 16px;max-width:340px}} /* 05（第十一段階）：既定はページ全体（?cut=top で第十段階の「上部」）。向きは素材の PDF から（data-ori）。 スマートフォンでは、アプリの画面全体の代わりに「カット表を作る」の C-1・C-2（実際の画面・2 倍）を紙の上に置き、紙はそこから生まれる */ #cut .zcut{display:none;margin:var(--leadVis) auto 0;width:100%;position:relative} #cut .zcut .zin{position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--line)} #cut .zcut .zin img{display:block;width:100%;height:auto} #cut .zcut figcaption{margin-top:8px;font-size:13px;color:var(--ink2);text-align:center} /* 最終調整：完成した PDF は制作画面より一回り小さく（画面の幅の 76%・最大 760px）＝画面から生まれてくる大きさ */ body:not(.m05a) #cut[data-ori="landscape"] .gen{width:min(760px,calc(var(--appw)*.76),100%)} /* 最終調整：スマートフォンも、まず制作画面の全体 → C-1・C-2 の拡大（画面の上に、拡大した範囲の細い枠）→ 完成した PDF の順 */ #cut .app5{position:relative} #cut .zmark{display:none;position:absolute;left:calc(66/2476*100%);top:calc(355/1752*100%);width:calc(1178/2476*100%);height:calc(533/1752*100%);border:1.5px solid rgba(109,126,255,.9);border-radius:3px;pointer-events:none} @media (max-width:767px){ #cut .zmark{display:block} #cut .zcut{display:block;margin-top:14px} #cut .zcut .zin{border-color:rgba(109,126,255,.55)} body:not(.m05a) #cut .gen,body:not(.m05a) #cut[data-ori="landscape"] .gen{width:100%;margin-top:26px} /* スマートフォンの紙は幅いっぱい（これ以上小さいとサムネイルが読めない） */ } /* 二段目の説明（05・07）：開くと詳しく。基本の説明はこれを開かなくても伝わる */ .more{max-width:640px;margin:22px auto 0;text-align:left;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .more summary{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 0;cursor:pointer;list-style:none;font-size:14px;color:#C9CED4} .more summary::-webkit-details-marker{display:none} .more summary::after{content:"";width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--e-out)} .more[open] summary::after{transform:translateY(2px) rotate(225deg)} .more summary:hover,.more summary:focus-visible{color:#fff;outline:none} .more-in{padding:4px 4px 20px;font-size:14px;line-height:1.8;color:var(--descc)} .more .kv{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:0} .more .kv dt{color:#E6E9EC;font-weight:500} .more .kv dd{margin:0} .more-in p{margin:14px 0 0} .more .cmp{width:100%;border-collapse:collapse;font-size:14px} .more .cmp th,.more .cmp td{padding:10px 8px;border-bottom:1px solid #262D36;text-align:left;font-weight:400} .more .cmp thead th{color:var(--ink2);font-size:12px} .more .cmp tbody th{color:#E6E9EC} @media (max-width:767px){.more .kv{grid-template-columns:1fr;gap:2px 0}.more .kv dd{margin-bottom:10px}} #license figcaption .pl{margin-left:6px;font-size:13px} /* ---- 言語ごとの文字組み（書体はどれも端末に入っているものだけ。配布しない） ---- */ :root:lang(ja){--font:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue",sans-serif} :root:lang(zh-Hans){--font:-apple-system,"PingFang SC","Hiragino Sans GB","Helvetica Neue",sans-serif} :root:lang(ko){--font:-apple-system,"Apple SD Gothic Neo","Helvetica Neue",sans-serif} :root:not(:lang(ja)):not(:lang(zh-Hans)):not(:lang(ko)){--font:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif} :lang(ko) body,:lang(ko) .sec-h,:lang(ko) .sub-h,:lang(ko) .brand2{word-break:keep-all} /* 韓国語は語の途中で折らない */ :root:not(:lang(ja)) body{overflow-wrap:break-word} :root:not(:lang(ja)) .sec-h,:root:not(:lang(ja)) .sub-h,:root:not(:lang(ja)) .brand2,:root:not(:lang(ja)) .tagline{text-wrap:balance} /* 日本語以外の見出しは行の長さをそろえる（日本語は文節の単位で組む） */ :root:not(:lang(ja)) .lead,:root:not(:lang(ja)) .cap,:root:not(:lang(ja)) .fn{text-wrap:pretty} :root:lang(de),:root:lang(ru),:root:lang(fr),:root:lang(es),:root:lang(it),:root:lang(pt-BR){hyphens:manual} :root:not(:lang(ja)) .brand2,:root:not(:lang(ja)) .sec-h{letter-spacing:0;font-feature-settings:normal} :root:not(:lang(ja)):not(:lang(zh-Hans)):not(:lang(ko)) #about .copy02{line-height:1.25;letter-spacing:-.005em} :root:not(:lang(ja)):not(:lang(zh-Hans)):not(:lang(ko)) #license .closing{line-height:1.25} /* 03-B：名前の下に短い説明（長い言語でも押し込まない） */ #tools .meta{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:2px} #tools .meta span{grid-column:1/-1;display:block;line-height:1.5} #license figcaption .pl{display:block;margin:4px 0 0} /* ヘッダー（スマートフォン）：言語が長くてもはみ出さない。料金・サポートは 07 とフッターにある */ @media (max-width:767px){.hd .hd-l{display:none}.hd-r{gap:6px}.hd .dl-hd{font-size:12px;padding:0 10px;gap:6px;max-width:calc(100vw - 150px)}.hd .dl-hd .dl-t{overflow:hidden;text-overflow:ellipsis}.hd .dl .dl-s{font-size:10px;padding:3px 5px}} @media (max-width:389px){.hd .dl-hd:not(.ready) .dl-s{display:none}.hd .dl-hd:not(.ready){opacity:.85}} .hd .dl-hd{white-space:nowrap;min-width:0} /* 01 の一文：日本語以外は長くなるので、折り返してよい（行の長さはそろえる） */ :root:not(:lang(ja)) .tagline{white-space:normal;max-width:min(88vw,620px);margin-left:auto;margin-right:auto;letter-spacing:.01em} /* 07：ボタン（次の行動）に、出るときに一度だけ淡い青の輪（opacity と transform だけ） */ #license .btn.pri{position:relative} #license .btn.pri::after{content:"";position:absolute;inset:-1px;border-radius:9px;box-shadow:0 0 0 1px rgba(136,150,255,.7),0 0 28px rgba(72,92,255,.45);opacity:0;pointer-events:none} html.js #license .cta.on .btn.pri::after{animation:tk-cta 1.8s var(--e-soft) .35s both} @keyframes tk-cta{0%{opacity:0;transform:scale(.97)}35%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.02)}} @media (prefers-reduced-motion:reduce){html.js #license .cta.on .btn.pri::after{animation:none}} /* 素材待ちの札（確認用・Founder 向け）：その言語の正式な画面・PDF が届くまで、日本語の素材を仮に表示していることを図の上に示す。公開用の書き出し（--release）では、札が 1 つでも残ると止まる */ .awt{position:absolute;left:10px;top:10px;z-index:6;padding:4px 8px;border-radius:5px;background:rgba(24,19,10,.86);border:1px solid #C9A15A;color:#EBCB8C;font:500 11px/1.4 -apple-system,"Hiragino Sans",sans-serif;letter-spacing:.02em;pointer-events:none;white-space:nowrap} #split>.awt,#license .wrap>.awt{position:relative;left:auto;top:auto;display:table;margin:14px auto 0} #about .app{position:relative} /* 第十一段階：390px 未満の段の幅は「画面の幅 − 左右 16px」（以前は 288px に固定で、375px で左右 43px ずつ空いていた）。320px は 288px のまま */ :root:not(:lang(ja)) .way p,:root:not(:lang(ja)) .cond li,:root:not(:lang(ja)) .facts li,:root:not(:lang(ja)) .meta,:root:not(:lang(ja)) figcaption{text-wrap:pretty} /* 第十一段階：日本語以外も、最後の 1 語だけの行を作らない */ /* 最終調整（Founder の最終修正指示 4）：03 の見出しの下の説明文は、行末の「、」「。」の字形が左に寄るため、見た目の中心が 5〜6px 左に見える（文字のインクで実測）。 日本語・中国語だけ、文字の大きさに比例して .3em 右へ（18px で 5.4px・17px で 5.1px。幅で増えない）。箱の中央揃えはそのまま */ :root:lang(ja) #comment>.wrap>.lead,:root:lang(zh-Hans) #comment>.wrap>.lead{position:relative;left:.3em} /* 最終調整（Founder の最終修正指示 10）：05 の紙が生まれる動きのカクつき対策。 1 紙はページ全体の画像（2 倍）にした（大きさが変わるあいだ、SVG の文字と線を描き直し続けない） 2 光・輪・青い覆い・画面を暗くする覆いは、不透明度と変形だけが動く層。動き出す前から別の層にしておき、最初のコマで層を作る・描く仕事を出さない （紙そのもの .sheetw は、動きの最初に縮んだ大きさで描かれてしまわないよう、層の指定はしない） */ body:not(.m05a) #cut .g-born,body:not(.m05a) #cut .g-trail,body:not(.m05a) #cut .g-ring,body:not(.m05a) #cut .sheet::after,body:not(.m05a) #cut .app5::after{will-change:opacity,transform} /* 最終調整（Founder の最終修正指示 13）：07 の比較。画像と文字・ボタンの間を広げ、「PDF を開く」は小さな枠のボタンにして、左右で同じ高さ・同じ位置（カードの下端）にそろえる */ #license .compare{align-items:stretch} #license .compare figure{display:flex;flex-direction:column;margin:0} #license figcaption{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:22px;text-align:center;line-height:1.6} #license figcaption .pl{display:inline-flex;align-items:center;justify-content:center;margin:auto 0 0;height:36px;padding:0 18px;border:1px solid #3A4350;border-radius:8px;color:#DDE2FF;font-size:13px;font-weight:500;background:rgba(255,255,255,.02)} #license figcaption .pl:hover{border-color:rgba(169,180,255,.65);color:#fff} @media (max-width:767px){#license figcaption{margin-top:16px;gap:10px;font-size:13px}#license figcaption .pl{height:34px;padding:0 14px}} /* 最終調整（Founder の最終修正指示 12）：06 の札。2 つ目の札は「＋」と一緒に折り返す（行末に「＋」だけが残らない） */ #local .pw{display:inline-flex;align-items:center;gap:12px} /* 最終調整（Founder の最終修正指示 17）：日本語以外の説明文は、文ごとに行の長さをそろえる（最後の行に 1〜2 語だけ残らない）。日本語・中国語は文節の単位（.u）で折る */ :root:not(:lang(ja)):not(:lang(zh-Hans)) .lead .s,:root:not(:lang(ja)):not(:lang(zh-Hans)) .lead:not(:has(.s)),:root:not(:lang(ja)):not(:lang(zh-Hans)) .cap{text-wrap:balance} /* 最終調整：07 の箇条書きは、点にぶら下げて左揃え（狭い幅で 2 行に折れたとき、2 行目が中央に寄ってずれない） */ #license .facts li{position:relative;padding-left:15px;text-align:left} #license .facts li::before{position:absolute;left:0;top:.72em;margin:0} :root:not(:lang(ja)):not(:lang(zh-Hans)) .fn{text-wrap:balance} /* ============================================================ 第十一段階・最終の微調整（Founder Approval：Final Micro Polish ＋ Final CTA & Brand Ending） ============================================================ */ /* 03-B：7 つのツール（A）と 6 色のコメントの色（B）は別のまとまり。カードの行の間（34px）より十分に広い間を置き、 B は注釈ではなく本文の一段下の大きさ（カードの説明 14px より大きく、03 の説明 18px より小さい）で、独立した段落として始める */ #tools .fn{margin-top:88px;font-size:16px;line-height:1.85;color:var(--descc);max-width:31em} @media (max-width:1023px){#tools .fn{margin-top:76px}} @media (max-width:767px){#tools .fn{margin-top:52px;font-size:15px;line-height:1.8}} /* 03 の図・04 の PDF・07 の比較の淡い青い縁：影そのもの（box-shadow）を動かすと、動くあいだ図の中身ごと毎コマ描き直しになる。 見た目は同じまま、縁の光を別の薄い層（::after）に置き、その層の不透明度だけを動かす（描き直しなし）。03 の角の丸めは中の SVG で切る */ html.js .glw.on:not(.papers):not(.compare),html.js .papers.glw.on .p1,html.js .compare.glw.on .pg{animation:none} #license .pg{position:relative} #comment .shot{overflow:visible} #comment .shot .fr{border-radius:5px} .shot.glw::after,.papers.glw .p1::after,.compare.glw .pg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 0 1px rgba(109,126,255,.30),0 0 64px rgba(72,92,255,.20)} #comment .shot.glw::after{inset:-1px;border-radius:6px} html.js .shot.glw.on::after,html.js .papers.glw.on .p1::after,html.js .compare.glw.on .pg::after{animation:tk-glw-o 1.9s var(--e-soft) .2s both} @keyframes tk-glw-o{0%{opacity:0}40%{opacity:1}100%{opacity:0}} /* 02・05 の光の層は、動きが終わったら手放す（不透明度 0 のまま層とメモリを持ち続けない。見た目は同じ） */ #about .stage.fxdone .halo,#about .stage.fxdone .edge,#about .stage.fxdone .tint,#about .stage.fxdone .veil{display:none} #cut.gdone .g-born,#cut.gdone .g-trail,#cut.gdone .g-ring,#cut.gdone .sheet::after{display:none} body:not(.m05a) #cut.gdone .app5::after{will-change:auto} /* 07 のあと：まずは無料で使ってみる（CTA）。比較・仕様の説明から一段あけて、見出し → ひとこと → ボタン */ #license .start{margin-top:var(--subGap);text-align:center} #license .start .lead{margin-top:var(--headGap)} #license .cta{margin-top:36px} /* 最後を締めるブランドコピー：コピーだけを主役に、画面の中央。前半のあと少し間を置いて「TAKTひとつで。」（一回り大きく）。 背景は同じ暗さ、青い光はごく淡く（コピーの後ろに静かに残る）。冒頭の TAKT と同じ白と青 */ .end{position:relative;display:flex;align-items:center;justify-content:center;min-height:max(600px,100svh);padding:96px var(--pad);text-align:center;overflow:hidden} .end-c{position:relative;z-index:1;margin:0;font-weight:600;letter-spacing:.02em;font-feature-settings:"palt";color:var(--brand-final);line-height:1.35} .end-a{display:block;font-size:var(--brand)} .end-b{display:block;margin-top:.55em;font-size:calc(var(--brand)*1.22);letter-spacing:.03em} .end-g{position:absolute;left:50%;top:50%;width:min(1100px,150vw);height:min(620px,110vw);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(72,92,255,.11),rgba(72,92,255,.04) 55%,rgba(72,92,255,0));pointer-events:none} @media (max-width:767px){.end{min-height:max(520px,86svh);padding:72px var(--pad)}} :root:not(:lang(ja)) .end-a,:root:not(:lang(ja)) .end-b{text-wrap:balance} :root:not(:lang(ja)):not(:lang(zh-Hans)):not(:lang(ko)) .end-c{line-height:1.25} /* 動き：前半がふわっと（1.4 秒・12px）→ 0.75 秒あとに「TAKTひとつで。」→ 淡い光が静かに満ちて、そのまま静止。動くのは不透明度と位置だけ */ html.js .end-a,html.js .end-b{opacity:0;transform:translateY(12px)} html.js .end-c.on .end-a{animation:tk-end-in 1.4s var(--e-soft) both} html.js .end-c.on .end-b{animation:tk-end-in 1.4s var(--e-soft) .75s both} html.js .end-g{opacity:0;transition:opacity 2.4s var(--e-soft) .9s} html.js .end-c.on+.end-g{opacity:1} @keyframes tk-end-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ html.js .end-a,html.js .end-b,html.js .end-c.on .end-a,html.js .end-c.on .end-b{opacity:1;transform:none;animation:none!important} html.js .end-g{opacity:1;transition:none} html.js .shot.glw.on::after,html.js .papers.glw.on .p1::after,html.js .compare.glw.on .pg::after{animation:none!important} } /* ボタンとリンク（最終の微調整）：ヘッダーの文字のリンクと文中の PDF のリンクは、見た目はそのまま、押せる範囲だけを上下左右に広げる（高さ 14〜22px → 34〜42px）。 隣どうしの押せる範囲は重ならない（間は 23px 以上ある）。スマートフォンのヘッダーは、地球儀とダウンロードの間を 6px → 10px に */ .hd .wm,.hd a.hd-l,.sec .pl{position:relative} .hd .wm::before,.hd a.hd-l::before,.sec .pl::before{content:"";position:absolute;left:-6px;right:-6px;top:-10px;bottom:-10px} @media (max-width:767px){.hd .dl-hd{margin-left:4px}}