/* 再生ボタン */ /* 円 */ .play { font-size: 70px; position: relative; width: 1.4em; height: 1.4em; border: 0.1em solid #39a9d6; border-radius: 100%; } /* マーク */ .play::before { content: ""; position: absolute; top: 0.20em; left: 0.38em; width: 0; height: 0; border-top: 0.4em solid transparent; border-left: 0.6em solid #39a9d6; border-bottom: 0.4em solid transparent; } /* 停止ボタン */ /* 円 */ .stop { font-size: 70px; position: relative; width: 1.4em; height: 1.4em; border: 0.1em solid #39a9d6; border-radius: 100%; } /* マーク */ .stop::before { content: ""; position: absolute; top: 0.25em; left: 0.25em; width: 0.7em; height: 0.7em; background-color: #39a9d6; } /* サビボタン */ /* 円 */ .sabi{ font-size: 70px; position: relative; width: 1.4em; height: 1.4em; border: 0.1em solid #39a9d6; border-radius: 100%; } .sabi::before{ content: "♪"; color: #39a9d6; position: absolute; top: -0.2em; left: 0.1em; width: 0.7em; height: 0.7em; } /* テーブル */ table{ width: 100%; border-collapse:separate; border-spacing: 0; } table th:first-child{ border-radius: 5px 0 0 0; } table th:last-child{ border-radius: 0 5px 0 0; border-right: 1px solid #3c6690; } table th{ text-align: center; color:white; background: linear-gradient(#829ebc,#225588); border-left: 1px solid #3c6690; border-top: 1px solid #3c6690; border-bottom: 1px solid #3c6690; box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset; width: 25%; padding: 10px 0; } table td{ text-align: center; border-left: 1px solid #a8b7c5; border-bottom: 1px solid #a8b7c5; border-top: 1px solid #a8b7c5; box-shadow: 0px -3px 5px 1px #eee inset; width: 25%; padding: 10px 0; } table td:last-child{ border-right: 1px solid #a8b7c5; } table tr:last-child td:first-child { border-radius: 0 0 0 5px; } table tr:last-child td:last-child { border-radius: 0 0 5px 0; }