@charset "utf-8";
/* ==========================================================================
キャラクターアニメーション
考え方
- 各パーツは元イラストと同じキャンバスのまま書き出してあるので、
シーンの中で inset:0 / width:100% に置くだけで元の位置に収まる。
ブレークポイントごとの座標指定が不要でズレない。
- 動かすのは transform と opacity だけ（GPU合成に乗るのでスマホでも軽い）。
- 画面外では anim.js が .is-paused を付けて停止する。JSが動かない環境では
そのまま再生され続けるだけなので、表示が壊れることはない。
========================================================================== */
/* ==========================================================================
共通の不具合対策
（2026-08-05 いただいたご指摘の対応。理由を残してあります）
========================================================================== */
/* 1. スマホで横スクロールが出る／右側に白い帯が出る件
腕や体を回転させると、回転後の外接矩形がページ幅に足し込まれてしまい、
375px の端末でページ全体が 418px になっていた。
ページが画面より広いと、iOS/Android は全体を縮小して表示するため、
幅100%で組んである見出しや背景が画面の右端まで届かず、
そこが白く見える（＝ハンバーガーメニュー付近の白背景）。
アニメーションの器から先へはみ出しを伝えないようにして止める。
overflow-x のみを clip にしているので、上へはみ出す指定
（.a-wave__scene の top:-65.66% など）はそのまま効く。 */
.a-anim {
overflow-x: clip;
overflow-clip-margin: 24px;
}
/* 2. 丘の下に細い線が出る件
丘は差し替えでSVGになっている。画面の拡大率が125%などのとき、
ブラウザは箱の下端を「ドットの途中」に置くことがあり、
そうなるとSVGのいちばん下の1行が半透明になって、
後ろの黄色が透けて薄い緑の線に見える。
・SVGを箱より2px背高に描いて、箱の下端まで塗りが必ず届くようにする
・下のセクションを1px重ねて、その境目を覆う
はみ出した2pxは下のセクションの背景に隠れる（後から描かれるため）。
※ SVG自体の背高指定は、下の .a-hill__bg の定義にまとめてあります。 */
.l-about__img02.a-hill,
.l-service__img02.a-hill {
margin-bottom: -1px;
}
/* 3. ジンベエザメがパンくずリストに重なる件（配置の調整だけでは足りない分）
.l-hero は height:calc(100vh - 120px) なので、縦の短い画面ほど
中央に置いたKVが上へせり上がり、パンくずリストに届いてしまう。
最低の高さを決めて、画面の高さが変わっても届かないようにする。
（767px以下は既存CSSが height/min-height を auto に戻すので対象外） */
@media (width > 767px) {
.l-hero {
min-height: 720px;
}
}
/* --------------------------------------------------------- 共通の器
※ .a-anim には position を持たせない。既存CSSの position:absolute を
後読みのこのファイルが上書きしてしまうため。位置を持っていない箱にだけ
個別に relative を付ける（下の l-about__img02）。 */
.a-scene {
position: absolute;
display: block;
}
/* キャンバス全面に敷くパーツ（画像そのもの） */
.a-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
display: block;
}
/* 体＋腕をまとめる箱。これ自体を揺らすと腕が体から外れない */
.a-group {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
/* 画面外・低モーション設定では止める */
.a-anim.is-paused * {
animation-play-state: paused;
}
/* --------------------------------------------------------- 一度だけ再生する演出
anim.js が に .js-anim を付けてから初めて「隠す」ので、
JSが動かない環境では最初から表示されたままになる（消えない）。
画面に入ったら .is-in が付いて再生される。 */
.js-anim .js-reveal .a-letter,
.js-anim .a-title > img,
.js-anim .a-title .a-mhero__title,
.js-anim .a-soft {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.a-anim *,
.a-anim *::before,
.a-anim *::after {
animation: none !important;
transform: none !important;
}
}
/* --------------------------------------------------------- 動きの定義 */
/* 手を振る（肩ジョイントを軸に往復）
--rest は振りの中心。0以外にすると片側に寄せて振れる。
（たこ焼きの左腕のように、隣のキャラに手が隠れてしまう向きを避けるため） */
@keyframes a-wave {
0%, 100% { transform: rotate(calc(var(--rest, 0deg) - var(--amp))); }
50% { transform: rotate(calc(var(--rest, 0deg) + var(--amp))); }
}
/* 体の揺れ（足元が軸）。
縦揺れ（上下動）ではなく、少し角度を付けた横揺れに統一している。 */
@keyframes a-sway {
0%, 100% { transform: rotate(calc(var(--sway) * -1)); }
50% { transform: rotate(var(--sway)); }
}
/* 呼吸のような上下（キャラ単体レイヤー用） */
@keyframes a-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(var(--lift)); }
}
/* 少し角度を付けた横揺れ（足元が軸）。キャラ単体レイヤー用 */
@keyframes a-tilt {
0%, 100% { transform: rotate(calc(var(--tilt) * -1)); }
50% { transform: rotate(var(--tilt)); }
}
/* ぴょんと跳ねる（着地でわずかに潰れる） */
@keyframes a-hop {
0%, 100% { transform: translateY(0) scaleY(1); }
12% { transform: translateY(0) scaleY(0.94); }
45% { transform: translateY(var(--lift)) scaleY(1.04); }
78% { transform: translateY(0) scaleY(0.96); }
}
/* 風になびく草花 */
@keyframes a-grass {
0%, 100% { transform: skewX(var(--skew, 0.9deg)); }
50% { transform: skewX(calc(var(--skew, 0.9deg) * -1)); }
}
/* 木のそよぎ */
@keyframes a-tree {
0%, 100% { transform: rotate(-0.55deg); }
50% { transform: rotate(0.55deg); }
}
/* 雲が流れる */
@keyframes a-cloud {
0%, 100% { transform: translateX(-1.1%); }
50% { transform: translateX(1.1%); }
}
/* ジンベエザメが泳ぐ
「動きに気づきにくい」とのご指摘を受けて、振れ幅を約1.4倍・周期を短くしている。
上方向の振れ（-10%）は、パンくずリストとの間合いを計算に入れた値。 */
@keyframes a-swim {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(6%, -10%) rotate(-4deg); }
50% { transform: translate(12%, 0) rotate(0deg); }
75% { transform: translate(6%, 10%) rotate(4deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
/* 旗がはためく */
@keyframes a-flag {
0%, 100% { transform: rotate(-2.2deg) skewY(1.6deg) scaleY(1); }
50% { transform: rotate(2.2deg) skewY(-1.6deg) scaleY(0.97); }
}
/* 走る（上下バウンド＋前後の傾き） */
@keyframes a-run {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(var(--lift)) rotate(2deg); }
}
/* 坂を転がる */
@keyframes a-roll {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 丘からひょっこり顔を出す */
@keyframes a-peek {
0%, 8% { transform: translateY(42%); }
22%, 62% { transform: translateY(0); }
80%, 100% { transform: translateY(42%); }
}
/* 「！」がポンと跳ねる
（元の絵では常に出ているので、消さずに周期的に強調するだけにしている） */
@keyframes a-pop {
0%, 60%, 100% { transform: scale(1); }
68% { transform: scale(1.4); }
78% { transform: scale(0.9); }
87% { transform: scale(1.1); }
}
/* 共通の当てこみ */
.a-wave-arm {
transform-origin: var(--pivot);
animation: a-wave var(--dur) ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
.a-sway-body {
transform-origin: var(--foot);
animation: a-sway var(--dur) ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
/* ==========================================================================
#contact みんなが手を振る
- パーツは 1100x1200 のキャンバス。差し替え前の1枚絵（contact_01.webp／削除済み）と
同じ見え方になる位置・倍率を実測して % に落としてある（IoU 0.91 で一致）
========================================================================== */
.l-contact__img.a-anim {
aspect-ratio: 976 / 597;
width: 488px;
}
@media (width <= 767px) {
.l-contact__img.a-anim {
width: 100%;
}
}
.a-wave__scene {
left: 0.82%;
top: -65.66%;
width: 100.08%;
aspect-ratio: 1100 / 1200;
}
/* 花と草（背面） */
.a-wave__scene .a-flowers {
transform-origin: 50% 100%;
animation: a-grass 5.4s ease-in-out infinite;
}
/* キャラクターごとの足元（＝体の揺れの軸）と周期。
親子・家族を主役にするため、家族は振り幅を大きめ、動物は控えめにしてある。
カバだけは「動きに気づきにくい」とのご指摘を受けて動物の中では大きめ。 */
.a-ch--mom { --foot: 50.59% 80.92%; --sway: 1.3deg; --dur: 2.60s; animation-delay: -1.5s; }
.a-ch--dad { --foot: 57.14% 80.00%; --sway: 1.3deg; --dur: 2.40s; animation-delay: -0.9s; }
.a-ch--hippo { --foot: 79.23% 80.42%; --sway: 1.1deg; --dur: 2.30s; animation-delay: -0.5s; }
.a-ch--elephant { --foot: 30.32% 79.83%; --sway: 0.45deg; --dur: 2.90s; }
.a-ch--rabbit { --foot: 18.68% 81.42%; --sway: 0.7deg; --dur: 2.60s; animation-delay: -0.4s; }
.a-ch--frog { --foot: 25.73% 82.75%; --sway: 0.7deg; --dur: 2.40s; animation-delay: -1.1s; }
.a-ch--takoyaki { --foot: 38.55% 82.50%; --sway: 0.7deg; --dur: 2.60s; animation-delay: -0.7s; }
.a-ch--raccoon { --foot: 69.05% 81.50%; --sway: 0.7deg; --dur: 2.80s; animation-delay: -1.8s; }
/* 腕の回転軸＝肩の「付け根」。
腕レイヤーと体レイヤーが重なっている領域のうち、手先から最も遠い側
（＝体の内側に入り込んでいる根元）の重心を実測した値。
接触帯の重心だと腕の中ほどが軸になり、根元が振れて不自然に見えるため。
腕は体の下に敷いてあるので（HTML側の重ね順）、根元は体に隠れて動かない。 */
.a-arm--mom { --pivot: 46.30% 62.74%; --amp: 8deg; --dur: 1.30s; --delay: -0.6s; }
.a-arm--dad { --pivot: 61.99% 59.49%; --amp: 9.5deg; --dur: 1.20s; --delay: -0.9s; }
.a-arm--baby { --pivot: 55.60% 65.82%; --amp: 12.5deg; --dur: 0.72s; }
.a-arm--hippo { --pivot: 84.06% 63.39%; --amp: 9.5deg; --dur: 1.30s; --delay: -1.1s; }
.a-arm--elephant { --pivot: 27.00% 53.21%; --amp: 6.5deg; --dur: 1.60s; }
.a-arm--rabbit { --pivot: 14.42% 68.88%; --amp: 7deg; --dur: 1.30s; --delay: -0.3s; }
.a-arm--raccoon { --pivot: 71.81% 67.36%; --amp: 7deg; --dur: 1.40s; --delay: -0.2s; }
.a-arm--frog-r { --pivot: 23.42% 75.27%; --amp: 7deg; --dur: 1.20s; }
.a-arm--frog-l { --pivot: 27.43% 74.54%; --amp: 6.5deg; --dur: 1.20s; --delay: -0.6s; }
.a-arm--takoyaki-r { --pivot: 33.85% 74.31%; --amp: 7deg; --dur: 1.30s; }
/* 左腕だけは --rest でお母さんと反対側に寄せて振る。
0度を中心に振ると、手先がお母さんの陰に入って欠けて見えるため
（元イラストでは手はお母さんの左横の空きに収まっている）。 */
.a-arm--takoyaki-l { --pivot: 42.17% 73.82%; --amp: 4deg; --rest: -4deg; --dur: 1.30s; --delay: -0.65s; }
/* ==========================================================================
#hero 木の下のピクニック
- KV01.psd の17レイヤーをそのまま重ねている
- 差し替え前の1枚絵（hero_01.webp／削除済み）と同じ見え方になる
位置・倍率を実測（IoU 0.98 で一致）
========================================================================== */
.l-hero__img.a-anim {
aspect-ratio: 1502 / 1360;
}
.a-picnic__scene {
left: 18.04%;
top: -2.57%;
width: 63.94%;
aspect-ratio: 1100 / 1200;
}
/* ジンベエザメ
元の焼き込み位置は left:-0.07% / top:4.41%（＝KVの左上のすみ）だったが、
縦の短い画面ではKV全体がせり上がるため、パンくずリストと重なってしまっていた。
・左上方向へは動かさず、右下（KV寄り）へ寄せる
・木のこずえには掛からない位置で止める
さらに .l-hero 側に min-height を入れて、画面の高さが変わっても
パンくずリストに届かないようにしている（下の「共通の不具合対策」を参照）。 */
.a-picnic__shark {
position: absolute;
left: 3.20%;
top: 11.60%;
width: 19.15%;
height: auto;
display: block;
animation: a-swim 7.5s ease-in-out infinite;
}
.a-picnic .a-tree {
transform-origin: 50.4% 78.5%;
animation: a-tree 7.5s ease-in-out infinite;
}
.a-picnic .a-cloud {
animation: a-cloud 24s ease-in-out infinite;
}
.a-picnic .a-flowers {
transform-origin: 50% 100%;
animation: a-grass 6.2s ease-in-out infinite;
}
/* テーブルを囲む面々。周期と位相をずらして「一斉に動く」感じを避ける。
縦揺れ（上下動）はやめて、足元を軸にした横揺れに統一している。 */
.a-picnic .a-bob {
transform-origin: var(--foot);
animation: a-tilt var(--dur) ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
.a-picnic .a-hop {
transform-origin: var(--foot);
animation: a-hop var(--dur) ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
/* 親子・家族が主役。動物は飾りとして控えめ。
カバだけは「動きに気づきにくい」とのご指摘を受けて動物の中では大きめ。
テーブルに座っているゾウ・タヌキは、椅子ごと揺れて見えるため停止
（HTML側で a-bob を外してある）。 */
.a-p--mom { --foot: 36.3% 76.9%; --tilt: 1.5deg; --dur: 2.60s; --delay: -0.7s; }
.a-p--dad { --foot: 50.2% 75.9%; --tilt: 1.4deg; --dur: 2.40s; --delay: -1.2s; }
.a-p--kid { --foot: 45.2% 76.3%; --tilt: 2.1deg; --dur: 2.00s; --delay: -1.6s; }
.a-p--cup { --foot: 45.2% 76.3%; --tilt: 2.1deg; --dur: 2.00s; --delay: -1.6s; }
.a-p--hippo { --foot: 81.0% 86.1%; --tilt: 1.3deg; --dur: 2.30s; --delay: -0.4s; }
.a-p--rabbit { --foot: 29.7% 76.7%; --tilt: 0.85deg; --dur: 2.80s; --delay: -0.2s; }
.a-p--takoyaki { --foot: 49.5% 93.8%; --lift: -1.05%; --dur: 1.70s; --delay: -0.85s; }
.a-p--frog { --foot: 37.5% 95.3%; --lift: -1.25%; --dur: 1.55s; }
/* ==========================================================================
#about / #service / #hero(坂道) 丘のシーン
- 丘と道はSVGで描き起こしてある（元画像のトレース。PC/SPで別のviewBox）
- キャラは1セットの画像を共有し、ブレークポイントで位置だけ差し替える
→ about_02@mobile / service_img@mobile のラスタ2枚が不要になった
========================================================================== */
/* 位置を持っていないのはこの箱だけ。他（hero__img02 / service__img02 /
about__img / contact__img）は既存CSSで absolute / relative 済み */
.l-about__img02.a-hill {
position: relative;
}
/* もとは中の![]()
が幅を決めていた箱。中身が全部 absolute になったので
幅を明示する（1100px以下では既存CSSが幅を持っているのでそのまま） */
@media (width > 1100px) {
.l-service__img02.a-hill {
width: 100%;
}
}
/* 1100px以下では既存CSSが position:static に戻すので、中のパーツの基準が
セクション全体になってしまう。基準をこの箱に戻す */
@media (width <= 1100px) {
.l-service__img02.a-hill {
position: relative;
}
}
.a-hill__bg {
position: absolute;
inset: 0;
bottom: auto;
width: 100%;
/* 箱より2px背高に描く。箱の下端まで塗りが必ず届くので、
拡大率125%などで下端が「ドットの途中」に来ても細い線が出ない
（上の「共通の不具合対策 2」を参照）。 */
height: calc(100% + 2px);
}
.a-hill__part {
position: absolute;
height: auto;
display: block;
}
/* グループの中に重ねる画像（象＋旗、かば＋！） */
.a-sub {
position: absolute;
inset: 0;
width: 100%;
height: auto;
display: block;
}
/* 象: 旗を持って体を揺らす
「カエルとウサギに比べて動きが控えめ」とのご指摘を受けて、
振り幅を約1.8倍・周期を短くしている。 */
@keyframes a-swayer {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
.a-swayer {
transform-origin: 27.7% 91.1%;
animation: a-swayer 2.9s ease-in-out infinite;
}
/* 旗: 竿の付け根を軸にはためく */
.a-flagger {
transform-origin: 59% 28.7%;
animation: a-flag 1.5s ease-in-out infinite;
}
/* 走る2匹（スマホ版ヒーローのたぬきも同じ動き） */
.p-rabbit.a-runner { transform-origin: 54% 92%; --lift: -5.5%; animation: a-run 0.62s ease-in-out infinite; }
.p-raccoon.a-runner,
.a-mhero__raccoon.a-runner { transform-origin: 50% 93%; --lift: -6.5%; animation: a-run 0.56s ease-in-out infinite; }
/* かえる2匹: ぴょんぴょん（動きが目立つとのご指摘を受けて跳ねる高さを抑えている） */
.a-hopper { transform-origin: 50% 92%; --lift: -5%; animation: a-hop 1.05s ease-in-out infinite; }
/* 花: 風に揺れる */
.p-flower_l.a-swaying { transform-origin: 48% 93%; --skew: 2.2deg; animation: a-grass 4.4s ease-in-out infinite; }
.p-flower_s.a-swaying { transform-origin: 42% 91%; --skew: 2.6deg; animation: a-grass 5.3s ease-in-out infinite; }
/* かば: 双眼鏡で身を乗り出す
※ かばの絵は丘の稜線でカットされている（丘の手前に描かれていて、
面積の37%が丘と重なる）。上下に動かすと切り口が見えてしまうので、
切り口（キャンバスの81.6%の高さ＝稜線）を軸にした伸縮だけで動かす。
※ 「動きに気づきにくい」とのご指摘を受けて、伸縮の幅を約2倍・周期を短くした。
軸が切り口そのものなので、幅を広げても丘との境目が見えてしまうことはない。 */
@keyframes a-lean {
0%, 100% { transform: scale(1, 1); }
50% { transform: scale(0.985, 1.075); }
}
.a-peeker { transform-origin: 50% 81.6%; animation: a-lean 1.9s ease-in-out infinite; }
/* 「！」: かばが見つけたタイミングでポンと出る */
.a-popper { transform-origin: 14% 45%; animation: a-pop 4.8s ease-in-out infinite; }
/* たこやき: 坂を転がり落ちる（動きが目立つとのご指摘を受けて振り幅を抑えている） */
@keyframes a-tumble {
0%, 100% { transform: rotate(-9deg) translateY(0); }
50% { transform: rotate(10deg) translateY(-2%); }
}
.a-tumbler { transform-origin: 56% 52%; animation: a-tumble 1.8s ease-in-out infinite; }
/* 親子カット
「家族のイラストは動かさなくてOK」とのご指示により、動きは付けていない。
（動かす場合は .a-floating を img に付け直せば戻せる） */
.a-cut { width: 100%; height: auto; display: block; }
.a-floating { transform-origin: 50% 100%; --lift: -2.2%; animation: a-bob 3.4s ease-in-out infinite; }
/* --------------------------------------------------------- 位置指定
焼き込み画像の中でのキャラの座標を実測して % に落としたもの
（IoU 0.91〜0.97 で元の配置と一致） */
/* --- about --- */
.a-hill--about { aspect-ratio: 2800 / 760; }
.a-hill--about .p-elephant { left: 12.643%; top: 7.237%; width: 15.692%; }
.a-hill--about .p-rabbit { left: 36.643%; top: 55.000%; width: 9.486%; }
.a-hill--about .p-frogs { left: 41.429%; top: 38.816%; width: 10.857%; }
.a-hill--about .p-stone_l { left: 68.786%; top: 74.211%; width: 5.062%; }
.a-hill--about .p-stone_s { left: 52.500%; top: 63.816%; width: 4.967%; }
.a-hill--about .p-flower_l { left: 73.750%; top: 60.000%; width: 9.314%; }
.a-hill--about .p-flower_s { left: 21.714%; top: 72.237%; width: 4.573%; }
.a-hill--about .p-elephant { aspect-ratio: 1084 / 966; }
@media (width <= 767px) {
.a-hill--about { aspect-ratio: 750 / 780; }
.a-hill--about .p-elephant { left: 0.000%; top: 0.256%; width: 48.900%; }
.a-hill--about .p-rabbit { left: 30.133%; top: 47.692%; width: 29.554%; }
.a-hill--about .p-frogs { left: 50.400%; top: 19.231%; width: 33.827%; }
.a-hill--about .p-stone_l { left: 55.200%; top: 84.615%; width: 15.773%; }
.a-hill--about .p-stone_s { left: 60.533%; top: 48.974%; width: 15.473%; }
.a-hill--about .p-flower_l { left: 68.133%; top: 73.077%; width: 29.216%; }
.a-hill--about .p-flower_s { left: 0.000%; top: 70.513%; width: 14.179%; }
}
/* --- service --- */
.a-hill--service { aspect-ratio: 1620 / 737; }
.a-hill--service .p-hippo { left: 30.802%; top: 0.000%; width: 20.444%; }
.a-hill--service .p-takoyaki { left: 60.247%; top: 15.604%; width: 24.757%; }
.a-hill--service .p-flower_l { left: 33.765%; top: 43.691%; width: 16.099%; }
.a-hill--service .p-hippo { aspect-ratio: 828 / 734; }
@media (width <= 767px) {
.a-hill--service { aspect-ratio: 750 / 520; }
.a-hill--service .p-hippo { left: 0.000%; top: 0.000%; width: 36.785%; }
.a-hill--service .p-takoyaki { left: 52.933%; top: 18.269%; width: 44.631%; }
.a-hill--service .p-flower_l { left: 5.333%; top: 51.538%; width: 29.020%; }
}
/* --- path --- */
.a-hill--path { aspect-ratio: 1197 / 458; }
.a-hill--path .p-raccoon { left: 58.814%; top: 0.000%; width: 17.616%; }
/* ==========================================================================
文字まわりの演出
- ヒーローのタイトル: 全体がぽよんと落ちてきて、その後ゆっくり漂う
- ヒーローのキャッチ: 1文字ずつポンと出る（画像を1文字ずつに切り出してある）
- contact のリード文: ぽわっと浮かび上がる
========================================================================== */
/* --------------------------------------------------------- タイトル */
@keyframes a-title-in {
0% { opacity: 0; transform: translateY(-34%) scale(0.86); }
50% { opacity: 1; transform: translateY(5%) scale(1.07, 0.93); }
68% { transform: translateY(-4%) scale(0.97, 1.04); }
84% { transform: translateY(1.5%) scale(1.02, 0.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* 出たあとの、ゆっくりした漂い */
@keyframes a-title-idle {
0%, 100% { transform: translateY(0) rotate(-0.5deg); }
50% { transform: translateY(-2.2%) rotate(0.5deg); }
}
/* スマホもタイトルを別レイヤーに分けたので、同じように跳ねる */
.js-anim .a-title.is-in > img,
.js-anim .a-title.is-in .a-mhero__title {
transform-origin: 50% 100%;
animation:
a-title-in 1.05s cubic-bezier(0.34, 1.3, 0.5, 1) both,
a-title-idle 4.2s ease-in-out 1.15s infinite;
}
/* --------------------------------------------------------- キャッチコピー */
.l-hero__text.a-lettering {
aspect-ratio: 580 / 108;
}
/* もとは中の![]()
が幅を決めていた箱。1文字ずつを absolute で置くので
幅を明示する（767px以下は既存CSSが width:290px を持っているのでそのまま） */
@media (width > 767px) {
.l-hero__text.a-lettering {
width: 100%;
}
}
.a-lettering .a-letter {
position: absolute;
left: var(--l);
top: var(--t);
width: var(--w);
height: auto;
display: block;
}
/* 拡大の幅は控えめに（0.86→1.04）。
1文字は表示上20〜30pxしかないので、大きく拡大縮小すると
そのたびに描き直しが入ってカクついて見えるため。 */
@keyframes a-letter-in {
0% { opacity: 0; transform: translateY(38%) scale(0.86); }
55% { opacity: 1; transform: translateY(-5%) scale(1.04); }
78% { transform: translateY(1%) scale(0.995); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* --lead: 上のタイトルが出きるのを待つ時間（タイトルの登場は1.05秒）。
きっちり待つと間延びするので、着地の直前から出しはじめて重ねている */
.a-lettering {
--lead: 0.9s;
}
.js-anim .a-lettering.is-in .a-letter {
transform-origin: 50% 100%;
/* 跳ね返りはキーフレーム側で作ってあるので、イージングは素直な ease-out にする。
ここに戻り系のカーブを使うと、キーフレームの跳ねと二重にかかってガタつく */
animation: a-letter-in 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) both;
/* タイトルが着地してから、左の文字より順に55msずつ遅らせて出す */
animation-delay: calc(var(--lead) + var(--i) * 0.055s);
/* 変形のたびに描き直されないよう、GPUのレイヤーに載せる */
will-change: transform, opacity;
}
/* --------------------------------------------------------- リード文 */
@keyframes a-soft-in {
0% { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(7px); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.js-anim .a-soft.is-in {
animation: a-soft-in 1.05s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
/* 動きを減らす設定では、演出なしで最初から表示する */
@media (prefers-reduced-motion: reduce) {
.js-anim .js-reveal .a-letter,
.js-anim .a-title > img,
.js-anim .a-soft {
opacity: 1;
animation: none !important;
filter: none !important;
transform: none !important;
}
}
/* ==========================================================================
#hero（スマホ）
もともと1枚絵（hero_title@mobile.webp／削除済み）にタイトルとイラストが焼き込まれていたので、
PC版と同じパーツで組み直した。これでスマホでもサメや木やキャラが動く。
位置と倍率は元画像から実測（タイトル IoU 0.97 / サメ 0.92 / たぬき 0.89 / 全体 0.83）
========================================================================== */
/* 表示切替は自前で持つ。u-show_mobile は display:revert !important なので
だと inline に戻されてしまい、幅も比率も効かなくなる */
.l-hero__title .a-mhero {
display: none;
}
@media (width <= 767px) {
.l-hero__title > .u-hide_mobile {
display: none !important;
}
.l-hero__title .a-mhero {
position: relative;
display: block;
width: 100%;
aspect-ratio: 750 / 1063;
}
.l-hero__title .a-mhero__path {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.l-hero__title .a-mhero__scene {
left: 0.0%;
top: 1.881%;
width: 99.733%;
aspect-ratio: 1100 / 1200;
}
.l-hero__title .a-mhero__shark {
position: absolute;
left: 1.6%;
top: 0.0%;
width: 29.297%;
height: auto;
animation: a-swim 9s ease-in-out infinite;
}
.l-hero__title .a-mhero__raccoon {
position: absolute;
left: 0.0%;
top: 74.13%;
width: 21.472%;
height: auto;
}
.l-hero__title .a-mhero__title {
position: absolute;
left: 12.533%;
top: 6.773%;
width: 74.667%;
height: auto;
}
}