@charset "UTF-8"; /* ------------------------------- オープニング -------------------------------- */ html{ overflow-y:scroll; } #opening { position: fixed; width: 100%; height: 100%; background-color: #1eb9ee; z-index:500; } /* オープニング終了 */ #opening.complete { opacity: 0; visibility: hidden; transition: opacity 1s ease-out, visibility 1s ease-out; } /* オープニング無効 */ #opening.load_already { opacity: 0; visibility: visible; } /* --- 参考デザイン --- */ #opening {/* padding: 10%; */ font-size: 20px; } #opening .haichi{ position: absolute; top: 50%; left: 0%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 100%; text-align: center; } #opening .image{ max-width: 697px; z-index: 1; margin: 0 auto; } #opening .image img{ width: 70%; height: auto; margin: 15px auto 0 auto; } #opening .split-text > span { opacity: 0; animation: key_opening_txt .2s ease alternate forwards; } @keyframes key_opening_txt { from { opacity: 0; } 100% { opacity: 1; } } /*# sourceMappingURL=opening.css.map */ .opening_text{ color: #fff; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.6em; font-size: 110%; } .opening_en{ color: #fff; font-family: "Roboto", sans-serif; font-weight: 600; line-height: 1.6em; font-size: 15px; text-align: center; margin-top: 10px; } @media print, screen and (min-width: 768px) { #opening {font-size: 30px;} .opening_text{ font-size: 90%;} } @media print, screen and (min-width: 1200px) { #opening {font-size: 40px;} } @keyframes opening_anime{ 0%{ opacity:1; } /* 50%{ opacity:1; } 70%{ opacity:0; } 100%{ opacity:0; } */ } .opening_anime{ animation-name: opening_anime; animation-duration: 2s;/*4秒かけてアニメーション*/ animation-fill-mode: forwards;/*終了時の状態を維持する*/ animation-delay: 0.2s;/*アニメーションの開始を1秒遅らせる*/ } /*一瞬オープニングが表示される件を修正*/ #home-body { opacity: 0; }/*※下層ページには