@charset "UTF-8"; /* ============================================================================ 株式会社荒畑園 トップページ index-7.html 専用の上書き ─ 2026.09.22 ---------------------------------------------------------------------------- top-new.css → top-3.css → top-4.css → top-5.css → top-6.css のあとに 読み込みます。index-6.html は変更していないため、2つを並べて見比べられます。 ---------------------------------------------------------------------------- この版での変更 01 オープニングのロゴ（読み込み直後に約1秒、画面中央に表示） 02 写真の差し替えにともなう表示位置の調整 （写真そのものの入れ替えは HTML 側で行っています） ========================================================================== */ /* -------------------------------------------- 01 オープニングのロゴ */ /* JavaScript が動くときだけ に is-splash が付きます。 付いていないあいだは透明・非表示なので、JavaScript を切っている環境では 最初から出ません（ロゴが出たまま固まることもありません） */ .t-splash { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #fff; /* ロゴ画像の地色に合わせた白 */ opacity: 0; visibility: hidden; transition: opacity .55s var(--e-out), visibility 0s linear .55s; } :root.is-splash .t-splash { opacity: 1; visibility: visible; transition: opacity .25s var(--e-out), visibility 0s; } /* 表示中はページを動かさない */ :root.is-splash, :root.is-splash body { overflow: hidden; } .t-splash__logo { width: clamp(190px, 38vw, 380px); height: auto; } /* ロゴはわずかに沈んだ位置から浮かび上がらせます */ :root.is-splash .t-splash__logo { animation: t-splash-in .7s var(--e-out) both; } @keyframes t-splash-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { /* 動きを抑える設定の端末では、フェードも浮き上がりもなしで表示します */ .t-splash { transition: none; } :root.is-splash .t-splash__logo { animation: none; } } /* -------------------------------------------- 02 写真の表示位置 */ /* 「日本一を目指す土づくり」は縦位置の写真を 16:10 の枠に入れるため、 手のひらの土が中心にくる高さで切り出します */ .t-strength__list .t-str:nth-child(2) .t-str__fig img { object-position: center 45%; } /* Step 01「土づくり」のもみがら堆肥は、すくい上げている手元を見せます */ .t-process .t-step:nth-child(1) .t-step__fig img { object-position: center 55%; }