@charset "UTF-8"; /* ------------------------------- オープニング -------------------------------- */ html{ overflow-y:scroll; } #opening { position: fixed; width: 100%; height: 100%; background-color: #fff; z-index:1000; } /* オープニング終了 */ #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 .split-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } #opening .image{ position: absolute; top: 50%; left: 0%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 1; width: 100%; } #opening .image .logomark{ position: relative; max-width:200px; margin: 0 auto; } #opening .image .logomark .moji{ position: absolute; left: 0; top: 0; } #opening .image img {width: 100%; height: auto;} #opening .text{ text-align: center; font-size: 15px; font-family: "Noto Sans JP", sans-serif; font-weight: 500; margin-top: 10px; color: #212121; } @media print, screen and (min-width: 992px) { #opening .image .logomark{ max-width: 288px;} } #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_tate{ writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode:vertical-rl; font-size: 90%; margin-bottom: 0; display: inline-block!important; position: absolute; z-index: 1; left: 60px; top: 0; color: #fff; font-family: 'Zen Old Mincho', serif; font-weight: 500; line-height: 1.6em; } @media print, screen and (min-width: 768px) { #opening {font-size: 30px;} } @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; }/*※下層ページには