@charset "utf-8"; /*== グラデーション線から塗に変化する */ .gradient4{ /*ボタンの形状*/ display: inline-block; padding: 18px 60px; border-radius:30px; text-decoration: none; border:1px solid white; color:white ; outline: none; /*アニメーションの指定*/ transition: all 0.4s ease-out; } /*hoverした際、グラデーションと影を付ける*/ .gradient4:hover{ /*ボタンの形状*/ border-color:transparent; color: #fff; /*背景の色と形状*/ background: linear-gradient(270deg, limegreen 0%, #98d98e 50%,#afeeee 100%); background-size: 200% auto; background-position: right center; /*ボックスの影*/ box-shadow: 0 5px 10px rgb(250,108,159,0.4); } /*========= レイアウトのためのCSS ===============*/ #header{ padding: 40px; background:white; color: #fff; text-align: center; } .box{ color: #fff; padding: 50px; display:flex; justify-content: center; align-items: center; text-align: center; } #box1{ background: #006400; } #box2{ background: green; } #box3{ background: forestgreen; } #box4{ background: seagreen; } #footer{ background:#333; color:#fff; padding:40px; text-align:center; } #footer a{ color: #fff; } /*========= ページネーションCSS ===============*/ .pagination { position:fixed; right:20px; top: 50%; transform: translateY(-50%); font-size:1em; z-index: 10; list-style: none; } .pagination a { display:block; height:20px; margin-bottom:5px; color:#fff; position:relative; padding:4px; } .pagination a.active:after { box-shadow:inset 0 0 0 5px; } /*現在地表示のテキストの設定*/ .pagination a .hover-text { position:absolute; right:15px; top:0; opacity:0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; padding-right: 15px; } .pagination a:hover .hover-text { opacity: 1; } .pagination a:after { -webkit-transition:box-shadow 0.5s ease; transition:box-shadow 0.5s ease; width:10px; height:10px; display: block; border:1px solid; border-radius:50%; content:""; position: absolute; margin:auto; top:0; right:3px; bottom:0; } /*768px以下は現在地表示のテキストを非表示*/ @media screen and (max-width:768px) { .pagination a .hover-text{ display: none; } } .area{ text-align: center; }