@charset "utf-8"; /*========= レイアウトのためのCSS ===============*/ h1{ font-size:1.2rem; } h2{ font-size:1.2rem; text-align: center; margin: 0 0 30px 0; } p{ margin-top:20px; } small{ background:#333; color:#fff; display: block; text-align: center; padding:20px; } #header{ background:rgb(208, 187, 29); color:rgb(243, 242, 239); text-align: center; padding: 20px; } section{ padding:30px; } section:nth-child(2n){ background:#f5deb3; } #main-vidual img{ width: 100%; } #page-link{ display: flex; justify-content: center; padding: 20px; } #page-link li{ list-style: none; } #page-link li a{ color: rgb(2, 2, 20); padding:0 20px; text-decoration: none; } #page-link li a::before{ content:'▼'; font-size:0.8rem; padding:0 10px 0 0; color: #4169e1; } #footer{ position: relative; z-index: 2; } /*========= LoadingのためのCSS ===============*/ /* Loading背景画面設定 */ #splash { /*fixedで全面に固定*/ position: fixed; width: 100%; height: 100%; z-index: 999; background:rgb(254, 254, 254); text-align:center; color:rgb(255, 249, 249); } /* Loading画像中央配置 */ #splash_logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Loading アイコンの大きさ設定 */ #splash_logo img { width: 800px; } /* fadeUpをするアイコンの動き */ .fadeUp{ animation-name: fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0; } @keyframes fadeUpAnime{ from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /*========= レイアウトのためのCSS ===============*/ #container{ width:100%; height: 100vh; background: #ccc; display: flex; justify-content: center; align-items: center; text-align: center; } a{ color: #333; } a:hover{ text-decoration: none; }