body {
-webkit-text-size-adjust: 100%;
}

.drawer_button {
display: block;
background-color: #555;
color: #ffe;
border: none;
padding: 16px;
width: 160px;
letter-spacing: 0.1em;
cursor: pointer;
position: fixed;
top: 10px;
right: 1px;
z-index: 1001;
text-align: center;
outline: none;
}

.drawer_nav {
padding: 0;
margin: 0 auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
list-style-type: none;
}
{
.drawer_nav li ul.second-level {
visibility: hidden;
list-style-type: none;
position: absolute;
z-index: -1;
top: 0;
margin: 0;
padding-left: 0;
}
.touch-btn {
color: #ffe;
margin-left: 5px;
}
}
.drawer_button .drawer_bar {
background-color: #ffe;
}
@media screen and (min-width: 100px) {
.drawer_bg {
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
background-color: rgba(51, 51, 51, 0.5);
display: none;
top: 0;
left: 0;
}
.drawer_button.active .drawer_bar {
width: 123px;
}
.drawer_button.active .drawer_bar1 {
transform: rotate(18deg);
}
.drawer_button.active .drawer_bar2 {
opacity: 0;
}
.drawer_button.active .drawer_bar3 {
transform: rotate(-18deg);
}
.drawer_button.active .drawer_menu_text {
display: none;
}
.drawer_button.active .drawer_close {
display: block;
}
.drawer_bar {
display: block;
height: 7px;
margin: 12px 9px;
transition: all 0.2s;
transform-origin: 0 0;
}
.drawer_text {
text-align: center;
font-size: 30px;
}
.drawer_close {
letter-spacing: 0.01em;
display: none;
}
.drawer_nav_wrapper {
width: 500px;
height: 100%;
transition: all 0.5s;
transform: translate(500px);
position: fixed;
top: 0;
right: 0;
z-index: 1000;
background-color: #ffe;
overflow-x: hidden;
overflow-y: auto;
}
.drawer_nav {
display: block;
position: relative;
margin-top: -20px;
}
.drawer_nav li {
background-color: #ffe;
height: auto;
line-height: 100px;
position: relative;
border-bottom: 1px solid #aaa;
}
.drawer_nav li a {
background-color: #ffe;
color: #555;
display: block;
text-align: left;
padding-left: 20px;
}
.drawer_nav li:hover ul.second-level {
display: block;
}
.drawer_nav li ul.second-level {
display: none;
position: relative;
padding: 0;
z-index: 1001;
}
.drawer_nav_wrapper.open {
transform: translate(0);
}
.drawer_menu.left .drawer_nav_wrapper {
transform: translate(-250px);
right: auto;
left: 0;
}
.drawer_menu.left .drawer_nav_wrapper.open {
transform: translate(0);
}
.pc-hidden {
text-align: center;
}
.touch-btn {
color: #555;
position: absolute;
top: .25rem;
right: 2%;
display: block;
z-index: 10;
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
}
}
.drawer-title {
text-align: center;
width: 100%;
height: 55px;
line-height: 50px;
background-color: #555;
color: #ffe;
}
a:link,a:visited{text-decoration:none; color:#0000cc;}
a:hover{background:#cccccc;}
.a1{font-size:28px; color:#ffffff; margin-left:1px; line-height: 1.5} 
.a2{font-size:29px; color:#ffff00; line-height: 1.5} 
.a3{font-size:34px; color:#000000; line-height: 1.5} 
.a5{font-size:33px; color:#c60030; line-height: 1.5} 
.a6{font-size:33px; color:#c1b36c; line-height: 1.5} 
.a9{font-size:28px; color:#999999; line-height: 1.5} 
.hb{font-size:34px; color:#000000; line-height: 1.5} 
.h2{font-size:32px; color:#ff0000; line-height: 1.5} 
.h4{font-size:29px; color:#ffffff; line-height: 1.5} 
.h0{font-size:28px; color:#000000; line-height: 1.5} 
.s1{font-size:30px; color:#333333; line-height: 1.5} 
.s9{font-size:33px; color:#222222; line-height: 1.5}  
.dd{font-size:34px; color:#000000; line-height: 1.8}  
.m1{font-size:38px; color:#0099cc; line-height: 2.4}  
.m2{font-size:36px; color:#333333; line-height: 2.4}  
.m3{font-size:36px; color:#c60030; line-height: 2.4} 
.m0{font-size:36px; color:#ffffff; line-height: 1.6}  
<style type="text/css">
.tabbox { margin: 0px; padding: 1em; background-color: #f8f8ff; }
.tabbox input { display: none; }
.tab {display: inline-block; border-width: 1px 1px 0px 1px; border-style: solid; border-color: black; border-radius: 0.75em 0.75em 0px 0px; padding: 0.75em 1em; color: black; background-color: #ffffff; font-weight: bold;}
.tab:hover {background-color: #ccffcc; color: green; cursor: pointer;}
input:checked + .tab {color: #c60030; background-color: #ffff99; position: relative; z-index: 10;}
.tabcontent {display: none; border: 1px solid black; margin-top: -1px; padding: 1em; position: relative; z-index: 0; background-color: #ffff99;}
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; }
#tabcheck4:checked ~ #tabcontent4 { display: block; }
</style>