@charset "utf-8"; /* ============================================================ 飛行機の神様 全ページの動き jstork19_custom/assets/kami-top.css 2026-09-18 ------------------------------------------------------------ kami-ain.css と db.css のあとに、全ページで読む（kami/motion.php）。 1〜4 はトップ（朝の版・変えない）。5〜9 は下層（同じ日の午後に足した。body.home では動かさない）。 ★並びを1pxも動かさない：transform・opacity・絶対配置の重ね物だけで作る。 ★html.kx は の1行が付ける印。JSが読めないときは3秒で外れて、隠したものが全部出る。 「隠す」指定は必ず html.kx の下にだけ書く。 ★動きの部品は自分で幅と色を決めて、ページ側のCSSを継がない（下層はページごとにCSSが違う）。 ============================================================ */ /* ---------- 1. 空・雲・飛行機雲（TOP STORY の背景） ---------- */ .k-ain .ai-hero{position:relative;overflow:hidden; background:linear-gradient(180deg,#E3F3FC 0%,#ECF5FA 48%,#F2F6F8 100%);} .k-ain .ai-hero > .ai-wrap{position:relative;z-index:1;} .k-ain .kx-sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;} /* 雲。丸を3つ重ねた形。画面の外（左）から右へ、2〜3分かけてゆっくり流れる */ .k-ain .kx-cloud{position:absolute;left:-320px;display:block;width:190px;height:54px;border-radius:54px;background:#fff;opacity:.92; will-change:transform;animation:kx-drift linear infinite;} .k-ain .kx-cloud::before,.k-ain .kx-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit;} .k-ain .kx-cloud::before{left:36px;top:-30px;width:74px;height:74px;} .k-ain .kx-cloud::after{left:92px;top:-18px;width:56px;height:56px;} .k-ain .kx-cloud--1{top:8%;--kx-s:1;animation-duration:150s;animation-delay:-40s;} .k-ain .kx-cloud--2{top:46%;--kx-s:.7;opacity:.8;animation-duration:190s;animation-delay:-120s;} .k-ain .kx-cloud--3{top:74%;--kx-s:1.15;animation-duration:170s;animation-delay:-20s;} .k-ain .kx-cloud--4{top:26%;--kx-s:.55;opacity:.7;animation-duration:130s;animation-delay:-80s;} @keyframes kx-drift{ from{transform:translateX(0) scale(var(--kx-s,1));} to{transform:translateX(calc(100vw + 700px)) scale(var(--kx-s,1));} } /* 飛行機。ヒーローの上の余白を左から右へ、少し上向きに横切る。飛行機雲は点線で後ろに引く。 32秒の周期のうち最初の7秒だけ飛び、残りは隠れて待つ */ .k-ain .kx-plane{position:absolute;left:-90px;top:3px;z-index:2;width:22px;height:22px;pointer-events:none;opacity:0; will-change:transform;animation:kx-fly 32s linear infinite;animation-delay:.6s;} .k-ain .kx-plane svg{display:block;width:22px;height:22px;fill:var(--ai-ink2);transform:rotate(90deg);} .k-ain .kx-plane::before{content:"";position:absolute;right:calc(100% - 3px);top:10px;width:150px;height:2px; background:repeating-linear-gradient(90deg,transparent 0 5px,var(--ai-accent) 5px 11px); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 100%);} @keyframes kx-fly{ 0%{transform:translate(0,10px) rotate(-4deg);opacity:0;} 1.5%{opacity:1;} 20.5%{opacity:1;} 22%{transform:translate(calc(100vw + 260px),-4px) rotate(-4deg);opacity:0;} 100%{transform:translate(calc(100vw + 260px),-4px) rotate(-4deg);opacity:0;} } /* ---------- 2. 出発案内板のパタパタ（NEWS の帯） ---------- */ /* 元の「ふわっと入れ替わる」transition を止めて、1文字ずつ上から倒れて入る動きにする */ .k-ain .ai-strip__slide{perspective:520px;} .k-ain .ai-strip__slide .ai-strip__txt{transition:color .18s;transform:none;perspective:520px;} .k-ain .ai-strip__slide .ai-strip__txt.is-on{opacity:1;visibility:visible;transform:none;} .k-ain .ai-strip__slide .ai-strip__txt.is-out{opacity:1;visibility:visible;transform-origin:50% 0;animation:kx-flap-out .28s ease-in both;} @keyframes kx-flap-out{0%{transform:rotateX(0);opacity:1;}100%{transform:rotateX(-88deg);opacity:.2;}} .k-ain .ai-strip__txt .kx-ch{display:inline-block;transform-origin:50% 0;backface-visibility:hidden;} .k-ain .ai-strip__txt.is-on .kx-ch{animation:kx-flap-in .46s cubic-bezier(.3,.9,.4,1.12) both;animation-delay:calc(var(--i,0) * 24ms);} @keyframes kx-flap-in{0%{transform:rotateX(92deg);opacity:0;}55%{opacity:1;}100%{transform:rotateX(0);opacity:1;}} /* JSが無くて文字が分かれていないときは、行ごと1回パタッと入る */ html:not(.kx) .k-ain .ai-strip__slide .ai-strip__txt.is-on{transform-origin:50% 0;animation:kx-flap-in .46s cubic-bezier(.3,.9,.4,1.12) both;} /* ---------- 3. カテゴリと早見表 ---------- */ /* カテゴリ11個：画面に入ると順に浮き上がる。触るとアイコンが飛び立って、点線の飛行機雲が残る */ html.kx .k-ain .k-cats a{opacity:0;transform:translateY(16px);} /* 出たあとは普通の状態に戻す（backwards）。both にすると最後のコマが残って、触ったときの持ち上がりが効かなくなる */ html.kx .k-ain .k-cats.kx-in a{opacity:1;transform:none;animation:kx-card-in .55s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i,0) * 45ms);} html.kx .k-ain .k-cats.kx-in a:hover{transform:translateY(-3px);} @keyframes kx-card-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} .k-ain .k-cats a{position:relative;overflow:hidden;} .k-ain .k-cats a svg{transition:transform .3s cubic-bezier(.3,.8,.4,1.25);} .k-ain .k-cats a:hover svg{transform:translate(4px,-6px) rotate(-14deg) scale(1.12);} .k-ain .k-cats a::after{content:"";position:absolute;left:calc(50% - 32px);top:31px;width:34px;height:2px; background:repeating-linear-gradient(90deg,var(--ai-accent) 0 4px,transparent 4px 8px); transform:scaleX(0);transform-origin:right center;opacity:0;transition:transform .3s ease,opacity .3s ease;} .k-ain .k-cats a:hover::after{transform:scaleX(1);opacity:1;} /* 早見表：行は順にふわっと出て、○×のマークは少し遅れてスタンプされる */ html.kx .k-ain .k-qt:not(.kx-in) .k-qt__r{opacity:0;} html.kx .k-ain .k-qt.kx-in .k-qt__r{opacity:1;animation:kx-row-in .5s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:var(--d,0ms);} @keyframes kx-row-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} html.kx .k-ain .k-qt:not(.kx-in) .k-mk{opacity:0;transform:scale(0);} html.kx .k-ain .k-qt.kx-in .k-mk{animation:kx-stamp .55s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--d,0ms) + 180ms);} @keyframes kx-stamp{0%{transform:scale(0) rotate(-25deg);opacity:0;}65%{transform:scale(1.18) rotate(4deg);opacity:1;}100%{transform:scale(1) rotate(0);opacity:1;}} /* ---------- 4. 見出しの航路と写真の寄り ---------- */ /* 見出しの黒い線の上を、点線の航路が左から引かれて小さな飛行機が走る。走り終えると点線は消えて元の線だけ残る */ .k-ain .ai-sec__head,.k-ain .ai-side__head{position:relative;} /* 器は線の上下に16pxずつ広げて overflow:hidden（飛行機が右端を越えた分が横スクロールにならないように。線と飛行機の位置は朝の版と同じ） */ .k-ain .kx-route{position:absolute;left:0;right:0;bottom:-18px;height:34px;overflow:hidden;pointer-events:none;} .k-ain .kx-route__l{position:absolute;left:0;top:16px;width:100%;height:2px; background:repeating-linear-gradient(90deg,var(--ai-accent) 0 6px,transparent 6px 12px); transform:scaleX(0);transform-origin:left center;opacity:0;} .k-ain .kx-route__p{position:absolute;left:0;top:7px;width:18px;height:18px;opacity:0;transform:translateX(-22px);} .k-ain .kx-route__p svg{display:block;width:18px;height:18px;fill:var(--ai-accent-ink);transform:rotate(90deg);} .k-ain .kx-in > .kx-route .kx-route__l{animation:kx-draw 2.2s cubic-bezier(.4,0,.2,1) .1s both;} .k-ain .kx-in > .kx-route .kx-route__p{animation:kx-run 2.2s cubic-bezier(.4,0,.2,1) .1s both;} @keyframes kx-draw{0%{transform:scaleX(0);opacity:1;}60%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(1);opacity:0;}} @keyframes kx-run{0%{transform:translateX(-22px);opacity:0;}5%{opacity:1;}55%{transform:translateX(calc(var(--kx-w,600px) - 4px));opacity:1;}62%{transform:translateX(calc(var(--kx-w,600px) + 24px));opacity:0;}100%{transform:translateX(calc(var(--kx-w,600px) + 24px));opacity:0;}} /* TOP STORY の写真は 24 秒かけてゆっくり寄って、戻る */ .k-ain .ai-lead__media img{animation:kx-kb 24s ease-in-out infinite alternate;will-change:transform;} @keyframes kx-kb{from{transform:scale(1);}to{transform:scale(1.07);}} /* ============================================================ ここから下層（2026-09-18 午後）。GROUPS / SOLOS / NUMS の並びは kami-top.js と同じにしておく ============================================================ */ /* ---------- 5. 全ページ共通：ヘッダーのアイコン ---------- */ /* 触ると少し飛び上がる（gnav.php のインラインCSSより後に効くように html を頭に付けて詳細度を上げる） */ html .k-ain .ai-hd .ai-gnav__nv .ai-gnav__ic{transition:transform .3s cubic-bezier(.3,.8,.4,1.35);} html .k-ain .ai-hd .ai-gnav__nv:hover .ai-gnav__ic{transform:translateY(-4px) rotate(-8deg) scale(1.12);} /* ---------- 6. 記事：アイキャッチの寄り・h2 の航路 ---------- */ .k-ain .ai-single__eye{overflow:hidden;} .k-ain .ai-single__eye img{animation:kx-kb 24s ease-in-out infinite alternate;will-change:transform;} /* h2 は青い箱。箱の下辺の少し上を、白い点線の航路と白い飛行機が走る（器は箱の左右の余白に合わせて内側へ） */ .k-ain .ai-body > h2{position:relative;} .k-ain .ai-body > h2 > .kx-route{left:18px;right:18px;bottom:-8px;} .k-ain .ai-body > h2 > .kx-route .kx-route__l{background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 6px,transparent 6px 12px);} .k-ain .ai-body > h2 > .kx-route .kx-route__p svg{fill:#fff;} /* ---------- 7. 一覧：ページの頭の空と雲 ---------- */ .k-ain:not(.home) .ai-phead{position:relative;overflow:hidden;background:linear-gradient(180deg,#E3F3FC 0%,#ECF5FA 60%,#F1F6F9 100%);} .k-ain:not(.home) .ai-phead__in{position:relative;z-index:1;} .k-ain .kx-sky--ph .kx-cloud--1{top:14%;--kx-s:.62;opacity:.92;animation-duration:160s;animation-delay:-60s;} .k-ain .kx-sky--ph .kx-cloud--2{top:56%;--kx-s:.46;opacity:.78;animation-duration:200s;animation-delay:-150s;} /* 一覧の行は出発案内板のように上から順にパタッと入る */ .k-ain:not(.home) .ai-rows{perspective:1200px;} /* ---------- 8. 順に出る・ひとつで出る・数字（下層） ---------- */ /* 親を見張って、直下の子が 55ms ずつ遅れて出る（12個目からは同時）。.kx-done が付いたら（出し終えたら）この指定は外れる */ html.kx .k-ain:not(.home) :is(.ai-rows,.ai-subcats,.ai-grid,.ai-tagwrap,.rtoc-mokuji,.ai-dnav__grid,.ai-drawer__nav,.hkdb-hub,.hkdb-chips,.hkdb-cards,.hkdb-jump,.hkdb-sortbar,.hkdb-links,.hkdb-kpis,.hkdb-fig,.hkdb-bars,.hkdb-sec,.hkdb-tbl tbody,.wpcf7-form):not(.kx-done) > *, html.kx .k-ain:not(.home) .ai-box:not(.kx-done) > :not(.ai-tagwrap){opacity:0;transform:translateY(14px);} html.kx .k-ain:not(.home) :is(.ai-rows,.ai-subcats,.ai-grid,.ai-tagwrap,.rtoc-mokuji,.ai-dnav__grid,.ai-drawer__nav,.hkdb-hub,.hkdb-chips,.hkdb-cards,.hkdb-jump,.hkdb-sortbar,.hkdb-links,.hkdb-kpis,.hkdb-fig,.hkdb-bars,.hkdb-sec,.hkdb-tbl tbody,.wpcf7-form).kx-in:not(.kx-done) > *, html.kx .k-ain:not(.home) .ai-box.kx-in:not(.kx-done) > :not(.ai-tagwrap){opacity:1;transform:none;animation:kx-up .55s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i,12) * 55ms);} @keyframes kx-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} /* 一覧の行だけは上から倒れて入る（出発案内板の型） */ html.kx .k-ain:not(.home) .ai-rows:not(.kx-done) > *{transform:rotateX(-34deg);transform-origin:50% 0;} html.kx .k-ain:not(.home) .ai-rows.kx-in:not(.kx-done) > *{transform-origin:50% 0;animation-name:kx-row-flap;animation-duration:.6s;} @keyframes kx-row-flap{from{opacity:0;transform:rotateX(-34deg);}to{opacity:1;transform:none;}} /* ひとつで出すもの（記事の表・図・検証の箱・前後の記事・サイドバーの早見表の箱） */ html.kx .k-ain:not(.home) :is(.ai-body > table,.ai-body figure,.k-verify,.ai-nav,.ai-mochi):not(.kx-in){opacity:0;transform:translateY(16px);} html.kx .k-ain:not(.home) :is(.ai-body > table,.ai-body figure,.k-verify,.ai-nav,.ai-mochi).kx-in{animation:kx-up .6s cubic-bezier(.2,.8,.25,1) backwards;} /* ○×のバッジ：カードが出たあと（--i はカードから継ぐ）に、--j の順でスタンプ */ html.kx .k-ain:not(.home) .hkdb-badges:not(.kx-done) > .hkdb-badge{opacity:0;transform:scale(0);} html.kx .k-ain:not(.home) .hkdb-badges.kx-in:not(.kx-done) > .hkdb-badge{opacity:1;transform:none;animation:kx-stamp .55s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i,0) * 55ms + 260ms + var(--j,0) * 120ms);} /* 順位の丸：行（カード）が出たあとにスタンプ */ html.kx .k-ain:not(.home) :is(.hkdb-tbl tbody,.hkdb-cards):not(.kx-done) .hkdb-rank{opacity:0;transform:scale(0);} html.kx .k-ain:not(.home) :is(.hkdb-tbl tbody,.hkdb-cards).kx-in:not(.kx-done) .hkdb-rank{opacity:1;transform:none;animation:kx-stamp .55s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i,0) * 55ms + 240ms);} /* 棒：行（マス）が出たあとに 0 から伸びる（幅は変えず transform だけ） */ html.kx .k-ain:not(.home) :is(.hkdb-tbl tbody,.hkdb-cards,.hkdb-fig,.hkdb-sec):not(.kx-done) .hkdb-cbar > i{transform:scaleX(0);transform-origin:left center;} html.kx .k-ain:not(.home) :is(.hkdb-tbl tbody,.hkdb-cards,.hkdb-fig,.hkdb-sec).kx-in:not(.kx-done) .hkdb-cbar > i{transform:none;transform-origin:left center;animation:kx-grow 1s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i,0) * 55ms + 300ms);} html.kx .k-ain:not(.home) .hkdb-bars:not(.kx-done) .hkdb-brow__f{transform:scaleX(0);transform-origin:left center;} html.kx .k-ain:not(.home) .hkdb-bars.kx-in:not(.kx-done) .hkdb-brow__f{transform:none;transform-origin:left center;animation:kx-grow 1s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i,0) * 55ms + 250ms);} @keyframes kx-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}} /* 数字のカウントアップ：最終の数字を透明で置いて幅を持たせ、数える数字を右そろえで重ねる。 ★ページ側の「.hkdb-kpi span」「.hkdb-hub__k span」（13px・灰色・block）が当たらないよう、font と color は親から継いで display は inline に固定する （html を頭に付けて詳細度 0,2,2 にする。db.css は 110 で後から読まれるので、同じ詳細度だと負ける） */ html .k-ain span.kx-num,html .k-ain span.kx-num__w,html .k-ain span.kx-num__v{display:inline;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0;background:none;} html .k-ain span.kx-num{position:relative;white-space:nowrap;} html .k-ain span.kx-num__w{color:transparent;} html .k-ain span.kx-num__v{position:absolute;left:0;top:0;width:100%;text-align:right;white-space:nowrap;} /* ---------- 9. 早見表と比較表・サイドバー・ボタン ---------- */ /* ヒーローの白い飛行機がゆっくり浮く（回転は db.css の 38deg のまま） */ .k-ain .hkdb .hkdb-hero::before{animation:kx-float 6s ease-in-out infinite alternate;will-change:transform;} @keyframes kx-float{from{transform:translate(0,0) rotate(38deg);}to{transform:translate(-6px,-9px) rotate(38deg);}} /* ハブ（/db/）のカード：右上に小さな飛行機。触ると飛び立って点線の飛行機雲が残る ★db.css の「.hkdb a::before,.hkdb a::after{content:none;display:none}」に消されるので display:block を明示する */ .k-ain .hkdb .hkdb-hub__a{position:relative;overflow:hidden;} .k-ain .hkdb .hkdb-hub__a::before{content:"";display:block;position:absolute;right:18px;top:18px;width:26px;height:26px;pointer-events:none;opacity:.32; background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231558CE' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") no-repeat center/contain; transform:rotate(38deg);transition:transform .4s cubic-bezier(.3,.8,.4,1.25),opacity .3s;} .k-ain .hkdb .hkdb-hub__a:hover::before{opacity:.9;transform:translate(6px,-10px) rotate(22deg) scale(1.15);} .k-ain .hkdb .hkdb-hub__a::after{content:"";display:block;position:absolute;right:38px;top:40px;width:40px;height:2px;pointer-events:none; background:repeating-linear-gradient(90deg,#1558CE 0 4px,transparent 4px 8px);transform:scaleX(0) rotate(-32deg);transform-origin:right center;opacity:0;transition:transform .35s ease,opacity .3s ease;} .k-ain .hkdb .hkdb-hub__a:hover::after{transform:scaleX(1) rotate(-32deg);opacity:.7;} /* サイドバーの黒い帯に光の帯が1回だけ走る */ .k-ain .ai-box__head{position:relative;overflow:hidden;} html.kx .k-ain:not(.home) .ai-box.kx-in .ai-box__head::after{content:"";display:block;position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-100%);animation:kx-sweep 1.3s ease .25s both;} @keyframes kx-sweep{to{transform:translateX(100%);}} /* 早見表のボタン（サイドバー）と診断のボタン（/shindan/ の hkdb-more は ::after を「 →」に使っているので ::before）に 7 秒ごとに光が走る。 ★inline-block のボタンに overflow:hidden を付けるとベースラインが変わって下の並びが動く（shindan で 0.0007 出た）。 なので重ね物を動かさず、背景の位置だけを動かす（border-radius:inherit で角も丸いまま） */ .k-ain .ai-mochi__b,.k-ain.kx-shindan .hkdb .hkdb-more{position:relative;} .k-ain .ai-mochi__b::after,.k-ain.kx-shindan .hkdb .hkdb-more::before{content:"";display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%) no-repeat;background-size:300% 100%;background-position:110% 0;animation:kx-shine 7s ease-in-out infinite;} .k-ain.kx-shindan .hkdb .hkdb-more::before{animation-delay:2.5s;} @keyframes kx-shine{0%{background-position:110% 0;}18%{background-position:-10% 0;}100%{background-position:-10% 0;}} /* ---------- スマホ ---------- */ @media (max-width:680px){ .k-ain .kx-plane{width:18px;height:18px;top:2px;} .k-ain .kx-plane svg{width:18px;height:18px;} .k-ain .kx-plane::before{width:90px;top:8px;} .k-ain .kx-cloud{width:130px;height:38px;} .k-ain .kx-cloud::before{left:24px;top:-20px;width:52px;height:52px;} .k-ain .kx-cloud::after{left:64px;top:-12px;width:40px;height:40px;} .k-ain .k-cats a::after{top:27px;left:calc(50% - 28px);width:28px;} .k-ain .ai-body > h2 > .kx-route{left:14px;right:14px;} .k-ain .hkdb .hkdb-hub__a::before{right:14px;top:14px;width:22px;height:22px;} .k-ain .hkdb .hkdb-hub__a::after{right:32px;top:34px;width:32px;} } /* ---------- 動きを減らす設定の人には何も動かさない ---------- */ @media (prefers-reduced-motion:reduce){ .k-ain .kx-sky,.k-ain .kx-plane,.k-ain .kx-route{display:none;} .k-ain .ai-lead__media img{animation:none;} .k-ain .ai-strip__slide .ai-strip__txt.is-on,.k-ain .ai-strip__txt.is-on .kx-ch,.k-ain .ai-strip__slide .ai-strip__txt.is-out{animation:none;} .k-ain .k-cats a,.k-ain .k-qt .k-qt__r,.k-ain .k-qt .k-mk{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important;} .k-ain .k-cats a:hover svg{transform:none;} /* 下層（html.kx が付かないので隠れるものは無い。常時動くものだけ止める） */ .k-ain .ai-single__eye img,.k-ain .hkdb .hkdb-hero::before,.k-ain .ai-mochi__b::after,.k-ain.kx-shindan .hkdb .hkdb-more::before,.k-ain .ai-box__head::after{animation:none !important;} .k-ain .hkdb .hkdb-hub__a::before,.k-ain .hkdb .hkdb-hub__a::after{transition:none;} .k-ain .hkdb .hkdb-hub__a:hover::before{transform:rotate(38deg);} html .k-ain .ai-hd .ai-gnav__nv .ai-gnav__ic{transition:none;} }