Newer
Older
rensyuu / HP.css
body{background-color: #bfb;}
h1{   background: #b0dcfa; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
	text-align: center;
}

.mainbox { display: table; width: 70%; margin: 0 auto;table-layout: fixed;}

.box { display: table-cell;vertical-align: middle; text-align: center; border:5px solid black; padding:10px;width:12em;}
.box:nth-child(1):hover {background: #99CCFF;transition: background 1s;transition-delay:0.2s;}
.box:nth-child(2):hover {background: #99CCFF;transition: background 1s;transition-delay:0.2s;}
.box:nth-child(3):hover {background: #99CCFF;transition: background 1s;transition-delay:0.2s;}


.accordion_box {
width: 300px;
}

.accordion_box label {
border-bottom: solid 1px white;
background-color: #ccc;
cursor: pointer;
padding: 10px;
font-weight: bold;
display: block;
}

.accordion_box input {
display: none;
}

.accordion_box .accordion_contents {
display: none;
}

.accordion:checked + .accordion_contents {
display:block;
border: solid 1px #ccc;
margin: 0px;
padding: 10px;
}