/* 開始時の演出。トップページだけ、1セッションに1回だけ。 ■ 2026-08-31 変更 白地にロゴを出す前半は施主の判断で廃止。地球だけの演出にした。 （ロゴ画像 img/logo-mark.png / logo-type.png は残してある） ■ 何をしているか ヒーローは最初から見えている。そこへ 1 日本の点が、ばらばらに、弾けるように現れる（半径を大きめから戻す） 2 日本を起点に、光の波が中心から外へ広がる リングごとに「いったん白く光ってから定常の明るさに落ち着く」 3 ヘッダーとタイトルが現れる ブランドの言葉「大地の生命力を、日本の力へ」を、そのまま動きにしている。 ■ 決めごと ・既定は演出なし。 の小さなスクリプトが html に isIntro を付けたときだけ動く。 **JS が動かない環境では内容を隠さない。** ・prefers-reduced-motion の人には最初から付けない。 ・sessionStorage で1回だけ。回遊のたびに待たせない。 ・intro.js に締切がある。何かあっても必ず解除される。 ■ クラス（html に付く） isIntro 地球と見出しを伏せる isIntro--jp 日本の点が現れる isIntro--world 光の波が外へ広がる isIntro--show ヘッダーとタイトルが現れる */ html.isIntro { /* 演出中に下へスクロールされると段取りが崩れる */ overflow: hidden; } /* ---------- 演出中に伏せておくもの ---------- */ html.isIntro .tpHdr, html.isIntro .tpKv__title, html.isIntro .tpKv__lead, html.isIntro .tpKv__btns { opacity: 0; transform: translateY(14px); } html.isIntro .tpHdr { /* ヘッダーは動かさず明るさだけで出す。固定要素を動かすと 管理バーとの位置合わせが崩れるため */ transform: none; } html.isIntro--show .tpHdr, html.isIntro--show .tpKv__title, html.isIntro--show .tpKv__lead, html.isIntro--show .tpKv__btns { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } html.isIntro--show .tpKv__lead { transition-delay: 0.12s; } html.isIntro--show .tpKv__btns { transition-delay: 0.24s; } /* ヒーローより下（About 以降・CTA・フッター）も伏せておく。 画面が縦に長いと About が先に見えてしまい、 「地球ができてから中身が現れる」という段取りが崩れるため。 出すのはヒーローの見出しと同時。少しだけ遅らせて、視線が上から下へ流れるようにする。 */ html.isIntro .tpMain > *:not(.tpKv), html.isIntro .tpCta, html.isIntro .tpFoot { opacity: 0; } html.isIntro--show .tpMain > *:not(.tpKv), html.isIntro--show .tpCta, html.isIntro--show .tpFoot { opacity: 1; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.18s; } /* ---------- 地球 ---------- */ /* 演出中は通常の波紋を止めて、全部消しておく */ html.isIntro .tpG { animation: none; opacity: 0; } /* 日本の点。半径を大きめから戻して「弾ける」感じを出す。 16個しかないので r を動かしても軽い。 リング側（1500個）で同じことをすると重くなるのでやらない。 */ html.isIntro .tpG--jp circle { opacity: 0; r: 3.4; } html.isIntro--jp .tpG--jp { opacity: 0.96; } html.isIntro--jp .tpG--jp circle { opacity: 1; r: 1.75; transition: opacity 0.26s ease-out, r 0.44s cubic-bezier(0.2, 1.5, 0.4, 1); /* 1点ずつの遅延は intro.js がばらばらに配る */ } /* 光の波。リングごとに「白く光ってから定常の 0.4 に落ち着く」。 ただ薄く出すだけだと弱いので、いったん振り切らせている。 動かすのはグループの opacity だけなので、1500個あっても軽い。 */ @keyframes soilIntroWave { 0% { opacity: 0; } 38% { opacity: 1; } 100% { opacity: 0.4; } } html.isIntro--world .tpG:not(.tpG--jp) { animation: soilIntroWave 1.05s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; /* リングごとの遅延は intro.js が内側から順に配る */ } /* 波が通るあいだだけ日本も一段明るくする。起点だと分かるように */ html.isIntro--world .tpG--jp { opacity: 1; transition: opacity 0.5s ease-out; }