/* ========================================================= enter.css — 入口と、ページ間の移り ・サイトに来た最初の一回だけ「入場」: 明るい面にロゴが浮かび、 面がほどけて、絵と文字が落ち着いて現れる（約 2.6 秒） ・二回目以降のページ移動は淡く現れる／消えるだけ（0.55 秒／0.5 秒） 状態は のクラス: .enter（入場）/ .fade（淡く）/ .leaving（出て行く） ========================================================= */ /* ---- 入口の面 ---- */ .enter-veil{ display: none; position: fixed; inset: 0; z-index: 2000; background: #f5f4f2; pointer-events: none; } .enter-veil img{ position: absolute; left: 50%; top: 50%; height: 22px; width: auto; transform: translate(-50%, -50%) translateY(6px); opacity: 0; } html.enter .enter-veil{ display: block; animation: enter-veil 1.1s cubic-bezier(.4,0,.2,1) 1.55s forwards; } html.enter .enter-veil img{ animation: enter-logo 2.1s cubic-bezier(.25,.1,.25,1) .15s forwards; } @keyframes enter-veil{ to{ opacity: 0; visibility: hidden; } } @keyframes enter-logo{ 0% { opacity: 0; transform: translate(-50%,-50%) translateY(6px); } 38% { opacity: 1; transform: translate(-50%,-50%) translateY(0); } 70% { opacity: 1; transform: translate(-50%,-50%) translateY(0); } 100%{ opacity: 0; transform: translate(-50%,-50%) translateY(-4px); } } /* ---- 入場時、面の下で絵と文字が落ち着いて現れる ---- */ html.enter .header{ opacity: 0; animation: enter-in 1.2s ease 2.0s forwards; } html.enter .message-about{ opacity: 0; animation: enter-in 1.4s ease 2.1s forwards; } html.enter .slider{ transform: scale(1.04); animation: enter-settle 3.0s cubic-bezier(.2,.6,.2,1) 1.4s forwards; } @keyframes enter-in{ from{ opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes enter-settle{ to{ transform: scale(1); } } /* ---- 二回目以降：淡く現れる ---- */ html.fade body{ animation: fade-in .55s ease both; } @keyframes fade-in{ from{ opacity: 0; } to { opacity: 1; } } /* ---- 出て行く（リンクを押したとき）---- */ html.fade body, html.leaving body{ transition: opacity .5s ease; } html.leaving body{ opacity: 0; animation: none; /* 現れる動きを止めてから、消える */ } @media (prefers-reduced-motion: reduce){ html.enter .enter-veil{ animation-duration: .01s; animation-delay: 0s; } html.enter .enter-veil img, html.enter .header, html.enter .message-about, html.enter .slider, html.fade body{ animation: none; opacity: 1; transform: none; } }