*, *:before, *:after { box-sizing: border-box; } body{ background-color: #f5deb3; min-height: 98vh; margin: 3ex; } .nakami{ margin-left: 200px; } .itiran ul li{ list-style-image: url("umiushi/umiushi-white.jpg"); } .itiran ul li:hover{ list-style-image: url("umiushi/umiushi-blue.jpg"); } .itiran ul li:active{ list-style-image: url("umiushi/umiushi-pink.jpg"); } .hyou table tr td { border: 1px solid; empty-cells: show } .cp_cont { height: 65vh; } .cp_offcm04 { position: absolute; top: 20px; left: 20px; display: inline-block; } /* menu */ .cp_offcm04 .cp_menu { position: fixed; top: 0; left: -100vw; width: 200px; height: 100%; cursor: pointer; -webkit-transition: 0.53s transform; transition: 0.53s transform; -webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99); transition-timing-function: cubic-bezier(.38,.52,.23,.99); background-color: #ffa500; } .cp_offcm04 .cp_menu ul { margin: 0; padding: 0; } .cp_offcm04 .cp_menu li { list-style: none; } .cp_offcm04 .cp_menu li a { display: block; padding: 20px; text-decoration: none; color: #f5deb3; border-bottom: 1px solid #f5deb3; } .cp_offcm04 #cp_toggle04 { position: absolute; display: none; opacity: 0; } .cp_offcm04 #cp_toggle04:checked ~ .cp_menu { -webkit-transform: translateX(100vw); transform: translateX(100vw); } /* menu toggle */ .cp_offcm04 #cp_toggle04 ~ label { display: block; padding: 0.5em; cursor: pointer; -webkit-transition: 0.5s transform; transition: 0.5s transform; -webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27); transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27); text-align: center; color: #8b4513; } .cp_offcm04 #cp_toggle04:checked ~ label { -webkit-transform: translateX(250px); transform: translateX(250px); } .cp_offcm04 #cp_toggle04 ~ label::before { font-family: 'FontAwesome'; content: 'でてくる'; font-size: 1em } .cp_offcm04 #cp_toggle04:checked ~ label::before { content: 'とじる'; } /* contents */ .cp_contents { color: #8b4513; text-align: center; }