@charset "UTF-8"; /* ============================================================ オープニング演出 - 通常は非表示。intro.js が に .intro-on を付けたときだけ出る - JS が動かなければ一度も表示されない（サイトが塞がれない） ============================================================ */ .intro{display:none;} html.intro-on, html.intro-on body{overflow:hidden;} /* .intro-leaving は「スクロールは戻すが、引けていく演出は最後まで見せる」state */ html.intro-on .intro, html.intro-leaving .intro{ --gen-fs:clamp(56px,11vw,170px); display:grid; place-items:center; position:fixed; inset:0; z-index:9999; overflow:hidden; background:linear-gradient(150deg,var(--c-brand) 0%,var(--c-brand-alt) 100%); color:var(--c-text-inverse); transform:translateY(0) skewY(0); } /* 斜めに引けて本編へ */ .intro.is-leaving{ transform:translateY(-108%) skewY(-5deg); transition:transform .75s cubic-bezier(.7,0,.2,1); } .intro.is-leaving .intro__inner{ opacity:0; transform:scale(.96); transition:opacity .35s ease,transform .55s ease; } .intro__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--sp-6); padding-inline:var(--sp-5); } /* ---------- 筆ストローク ---------- */ .intro__brush{ position:absolute; top:44%; left:50%; width:132%; height:auto; transform:translate(-50%,-50%) rotate(-4deg); fill:currentColor; pointer-events:none; opacity:0; } /* ---------- Gen ---------- */ .intro__word{ position:relative; display:flex; align-items:baseline; /* 変化中は Gen の右に意味が伸びるので、基準は控えめにしてフィナーレで一気に拡大する */ font-size:var(--gen-fs,clamp(56px,11vw,170px)); font-weight:900; line-height:1; letter-spacing:.01em; white-space:nowrap; } .intro__gen{display:flex;} .intro__ch{display:inline-block;} /* 意味が入れ替わる部分。Gen の右に絶対配置して Gen 自体は動かさない */ .intro__suffix{ position:absolute; left:100%; bottom:.02em; font-size:.48em; font-weight:700; letter-spacing:.02em; white-space:nowrap; opacity:0; } /* ---------- - 創り出す。- ---------- */ .intro__tagline{ display:flex; align-items:center; gap:var(--sp-3); font-size:clamp(var(--fs-lg),2.6vw,var(--fs-3xl)); font-weight:700; letter-spacing:.3em; opacity:0; } /* ---------- スキップ ---------- */ .intro__skip{ position:absolute; right:var(--sp-7); bottom:var(--sp-7); min-height:44px; padding:0 var(--sp-6); font:inherit; font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; color:var(--c-text-inverse); background:transparent; border:1px solid rgba(255,255,255,.5); border-radius:var(--radius-pill); cursor:pointer; opacity:0; animation:introSkipIn .4s ease .8s forwards; transition:background-color var(--dur) var(--ease); } .intro__skip:hover{background:rgba(255,255,255,.16);} .intro__skip:focus-visible{outline:3px solid var(--c-text-inverse);outline-offset:3px;} @keyframes introSkipIn{to{opacity:.75;}} /* ============================================================ A: 筆で書き上げる ============================================================ */ .intro--brush .intro__brush{ opacity:.22; clip-path:inset(0 100% 0 0); animation:introBrushSweep 1.05s cubic-bezier(.24,.72,.3,1) .2s forwards; } @keyframes introBrushSweep{to{clip-path:inset(0 0 0 0);}} .intro--brush .intro__ch{ clip-path:inset(0 100% 0 0); transform:translateY(.06em) rotate(-1.5deg); animation:introWrite .62s cubic-bezier(.3,.7,.3,1) forwards; animation-delay:calc(.85s + var(--i) * .3s); } @keyframes introWrite{ to{clip-path:inset(0 0 0 0);transform:translateY(0) rotate(0deg);} } .intro--brush .intro__tagline{ animation:introTagline .9s cubic-bezier(.2,.7,.3,1) 2.15s forwards; } /* ============================================================ B: 意味が重なって Gen になる ============================================================ */ .intro--morph .intro__brush{display:none;} /* 登場は .intro__word、フィナーレの拡大は .intro__gen と、要素を分ける。 同じ要素に animation を二度当てると後勝ちで上書きされ、 先の forwards（opacity:1）が失われて Gen が消えるため。 */ .intro--morph .intro__word{ opacity:0; transform:scale(.88); animation:introGenIn .5s cubic-bezier(.2,.8,.3,1) .15s forwards; } @keyframes introGenIn{to{opacity:1;transform:scale(1);}} /* 意味がパッと差し替わる */ .intro--morph .intro__suffix.is-in{ animation:introSuffixIn .34s cubic-bezier(.2,.8,.3,1) forwards; } .intro--morph .intro__suffix.is-out{ animation:introSuffixOut .22s ease forwards; } @keyframes introSuffixIn{ from{opacity:0;transform:translateX(-.4em);filter:blur(6px);} to{opacity:1;transform:none;filter:blur(0);} } @keyframes introSuffixOut{ to{opacity:0;transform:translateX(.5em);filter:blur(8px);} } /* 余分が削れて Gen だけが残り、画面いっぱいに大きくなる（フィナーレ） */ /* タグラインを流れから外し、Gen が常に画面中央に来るようにする。 拡大は transform なのでレイアウトは動かず、位置だけ文字サイズ基準でずらす。 */ .intro--morph .intro__inner{gap:0;} .intro--morph .intro__gen{transform-origin:50% 50%;} .intro--morph .intro__tagline{ position:absolute; top:100%; left:50%; transform:translate(-50%, calc(var(--gen-fs) * .78 + 12px)); white-space:nowrap; } .intro--morph .intro__word.is-locked .intro__gen{ animation:introGenLock 1s cubic-bezier(.16,.86,.24,1) forwards; } @keyframes introGenLock{ 0% {transform:scale(1); text-shadow:0 0 0 rgba(255,255,255,0);} 58% {transform:scale(2.55);text-shadow:0 0 70px rgba(255,255,255,.5);} 80% {transform:scale(2.34);} 100%{transform:scale(2.4); text-shadow:0 0 34px rgba(255,255,255,.2);} } .intro--morph .intro__tagline{ animation:introTagline .9s cubic-bezier(.2,.7,.3,1) 3.2s forwards; } /* ---------- 共通 ---------- */ @keyframes introTagline{ from{opacity:0;letter-spacing:.9em;} to{opacity:.92;letter-spacing:.3em;} } @media (max-width:767px){ .intro__skip{right:var(--sp-5);bottom:var(--sp-5);} .intro__suffix{font-size:.38em;} } /* 動きを減らす設定の人には出さない（intro.js 側でも判定している） */ @media (prefers-reduced-motion:reduce){ html.intro-on, html.intro-on body{overflow:auto;} html.intro-on .intro, html.intro-leaving .intro{display:none;} }