/* ========================================= GRM Loading / トップページ ローディング演出 ・トップページ表示時のみ（front-page.php想定）。 ・演出：波が下からゆっくり（1本のなだらかな非対称カーブ） 　せり上がってグラデーションが画面を覆う → 中央に 　「Think of YOU」（think.svg、1.5倍サイズ）がぼやけた 　状態からフェードイン → 画面下部のロゴ（logo-white.svg、 　4倍サイズ）がフェードイン → 少し静止 → 全体が 　フェードアウトして、裏側で既に描画済みのTOPページが 　そのまま見える。 ・実際の制御（表示時間の確保、window.loadとの同期、 　prefers-reduced-motion対応）は grm-loading.js 側。 　タイミングを変更した場合は、必ずgrm-loading.js の 　MIN_DISPLAY_MS も合わせて調整すること。 ・designstudio-l.jpを参考に、同じセッション内で一度表示したら 　以降はスキップする（sessionStorageで判定、front-page.php側の 　インラインスクリプトが最優先で html.grm-loading-skip を付与）。 　スキップ時は下のルールで.grm-loadingごとdisplay:noneにして 　白い画面が一瞬見えるのを防いでいる。 ・最後の画面切り替え（.is-hidden時）は、単純なopacityフェード 　だけでなく、ごく軽いblurとscaleも一緒に効かせて「ふわっと」 　溶けるように消えるようにしている。durationも.7s→1.1sに伸ばし、 　cubic-bezier(.22,1,.36,1)という、後半にいくほど動きがゆっくり 　収まる柔らかいイージングを使用。 ========================================= */ html.grm-loading-lock, html.grm-loading-lock body { overflow: hidden; height: 100%; } html.grm-loading-skip .grm-loading { display: none !important; } .grm-loading { position: fixed; inset: 0; z-index: 9999; background: var(--color-white); filter: blur(0); transform: scale(1); transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), filter 1.1s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1), visibility 1.1s cubic-bezier(.22, 1, .36, 1); } .grm-loading.is-hidden { opacity: 0; filter: blur(14px); transform: scale(1.03); visibility: hidden; pointer-events: none; } /* ========================= 波（SVG） ・「せり上がって画面を覆う」動きを、transformでの平行移動では 　なくパス自体の形（d）のアニメーションで実現している。 　理由：スケッチ通りの非対称な波（高さが63〜378と場所によって 　大きく異なる）をそのまま平行移動で止めると、波の低い部分 　（右側）の上に隙間ができ、静止後も上部に白い背景が残って 　しまう。dアニメーションなら、動きの「途中」だけ波の 　シルエットを見せつつ、最終形は画面全体を隙間なく覆う 　フラットな形に着地させられる。 ・3段階（0%→42%→100%）： 　0%＝画面外（下）に完全に隠れた状態（y=950、平ら）。 　42%＝指定いただいたスケッチ通りの非対称カーブ（Catmull-Rom 　　補間による滑らかな制御点、左端から立ち上がり中央やや 　　左寄りで高い位置を保ち、右にかけて下がる）を、山の高さ 　　（振れ幅）が元の約1/4になるよう平均値まわりに縮小した 　　もの。波の見た目はこの通過点でのみ見える。 　100%＝上端も突き抜けて画面全体を隙間なく塗りつぶした、 　　波のないフラットな状態（y=-20、画面より上）。静止後に 　　白い余白は一切残らない。 ・各区間で制御点のx座標は固定し、y座標だけを動かしているため、 　斜めに横切るような動きにはならず、「下からまっすぐ 　せり上がる」動きに見える。 ・「途中で止まる」ように見えていた原因：cubic-bezier(.37,0,.63,1) 　のような緩急のある1つのイージングを、複数のキーフレーム 　（0%→42%→100%）にまたがるアニメーション全体にそのまま 　指定すると、CSSの仕様上イージングは各区間ごとに独立して 　適用される。つまり42%地点の直前と直後の両方で速度がほぼ0 　になり、42%でいったん止まって再加速するように見えていた。 　これを解消するため、各キーフレームに個別のanimation-timing- 　functionを指定し、0%→42%は「ゆっくり始まり、42%到達時点 　では十分な速度が出ている」、42%→100%は「その速度のまま 　滑らかに続き、100%に向けてゆっくり収まる」という具合に、 　42%をまたいで速度が連続する（止まらない）ようにしている。 ・duration全体を3.4s→4sにさらに伸ばしつつ、42%地点（波の 　見え方のピーク）に到達するまでの実時間はほぼ変えず、 　42%→100%の「フラットに着地するまでの最後の区間」を 　1.73s→2.3s程度にさらに長くしている。合わせてコピー・ 　ロゴのanimation-delayも0.6s後ろにずらして辻褄を合わせて 　いるので、演出のタイミングを変える場合はgrm-loading.jsの 　MIN_DISPLAY_MSも含めて全部連動させること。 ・dのアニメーションは比較的新しいブラウザ機能。対応していない 　環境では単にstatic dの値（＝画面全体を隙間なく覆うフラットな 　最終形。header.php側のd属性に指定）がそのまま表示され、 　波のアニメーションなしで即座に画面が覆われるだけなので、 　崩れた見た目にはならない。 ========================= */ .grm-loading-wave-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .grm-loading-wave-path { d: path("M0,950 C79.2,950 331,950 475,950 C619,950 736.8,950 864,950 C991.2,950 1142,950 1238,950 C1334,950 1406.3,950 1440,950 L1440,5000 L0,5000 Z"); animation: grm-loading-wave-rise 4s linear forwards; animation-delay: .4s; } @keyframes grm-loading-wave-rise { 0% { d: path("M0,950 C79.2,950 331,950 475,950 C619,950 736.8,950 864,950 C991.2,950 1142,950 1238,950 C1334,950 1406.3,950 1440,950 L1440,5000 L0,5000 Z"); /* 0%→42%：ゆっくり始まり、42%に着く頃には十分な速度に */ animation-timing-function: cubic-bezier(.37, 0, 1, 1); } 42% { d: path("M0,250.2 C79.2,240.8 331,201.8 475,194 C619,186.1 736.8,190.6 864,203 C991.2,215.3 1142,256.6 1238,268.2 C1334,279.8 1406.3,272 1440,272.7 L1440,5000 L0,5000 Z"); /* 42%→100%：42%時点の速度を保ったまま続き、100%でゆっくり収まる */ animation-timing-function: cubic-bezier(0, 0, .63, 1); } 100% { d: path("M0,-20 C79.2,-20 331,-20 475,-20 C619,-20 736.8,-20 864,-20 C991.2,-20 1142,-20 1238,-20 C1334,-20 1406.3,-20 1440,-20 L1440,5000 L0,5000 Z"); } } /* うっすらとしたグレイン（紙質感を軽くイメージ、控えめに） */ .grm-loading::after { content: ""; position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); } /* ========================= コピー＋ロゴ ・以前はコピー（think.svg）を画面中央に、ロゴ（logo-white.svg）を 　それとは独立させて画面下部に固定配置していたが、「think of YOU 　とロゴが天地に中心になるように」という指定に合わせて構成を 　変更。.grm-loading-copyをflex-direction:columnにして、コピーと 　ロゴを縦に並べた1つの塊として扱い、その塊ごと画面の天地中央に 　揃えている（ロゴはもう画面下部に固定されない）。両者の間隔は 　gapで指定（これまでの「ロゴ上の余白」調整と近い見た目になる 　値を採用）。 ・ロゴの水平方向の中央揃えも、以前はleft:50%+translateX(-50%)の 　ハックで行っていたが、flexのalign-items:centerに任せられる 　ようになったため、ロゴ側のtransformはtranslateYのみで良い。 ========================= */ .grm-loading-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px, 5.5vh, 64px); text-align: center; padding: 0 24px; } .grm-loading-headline { margin: 0; width: clamp(360px, 69vw, 780px); height: auto; opacity: 0; animation: grm-loading-copy-in 1.1s ease-out forwards; animation-delay: 4.6s; } .grm-loading-logo { height: clamp(72px, 11vw, 136px); width: auto; opacity: 0; transform: translateY(10px); animation: grm-loading-logo-in .9s ease-out forwards; animation-delay: 5.7s; } @keyframes grm-loading-copy-in { 0% { opacity: 0; filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .18)) blur(14px); } 100% { opacity: 1; filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .18)) blur(0); } } @keyframes grm-loading-logo-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* ========================= アクセシビリティ：motionを抑えたい環境 ・波の上昇／ぼかしフェードなどの演出を止め、即表示にする。 　実際の表示終了タイミングはJS側（MIN_DISPLAY_MSを短縮）で制御。 ========================= */ @media (prefers-reduced-motion: reduce) { .grm-loading-wave-path { animation: none; d: path("M0,-20 C79.2,-20 331,-20 475,-20 C619,-20 736.8,-20 864,-20 C991.2,-20 1142,-20 1238,-20 C1334,-20 1406.3,-20 1440,-20 L1440,5000 L0,5000 Z"); } .grm-loading-headline { animation: none; opacity: 1; filter: none; } .grm-loading-logo { animation: none; opacity: 1; transform: translateY(0); } }