/* wrapper */
.wrapper {
box-sizing: border-box;
width: 100%;
height: 100vh !important; /*IE6対策*/
bottom: 0px;
position: fixed;
text-align: center;
font-size: 13px;
background: #eeeeee;
margin: auto;
overflow: hidden;
}
.wrapper::before {
position: fixed;
content: '';
display: block;
z-index: -1000;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('../../images/moon.jpg') center 30%/cover;
}
/* frame */
body::before,
body::after,
html::before,
html::after {
display: block;
content: '';
position: fixed;
z-index: 1000;
background-color: #fff;
}
body::before,
body::after {
top: 9%;
width: 1px;
height: 82%;
}
body::before {
left: 5%;
}
body::after {
right: 5%;
}
html::before,
html::after {
left: 5%;
width: 90%;
height: 1px;
}
html::before {
top: 9%;
}
html::after {
bottom: 9%;
}
@media screen and (max-width: 980px) {
body::before,
body::after {
height: 86%;
}
html::after {
bottom: 5%;
}
}
/* header */
header {
margin: 35vh auto 0;
position: relative;
width: 80%;
max-width: 600px
}
.title {
white-space: nowrap; /* タイトル改行なし */
}
@media screen and (max-width: 980px) {
header {
margin: 48vh auto 0; /* 私のスマホだとコンテンツが上に上がってしまうので⋯⋯ */
}
.title {
font-size: 30px;
}
}
#hiddenbox {
margin: 3rem auto;
}
.lnr {
display: inline-block;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.05em;
margin: 2rem auto 0;
font-size: 20px;
}
nav ul li {
display: block;
}
nav ul li a {
border-bottom: none;
font-size: 16px;
color: #fff;
}
/* 補足情報 */
aside {
margin: 3rem auto 0;
}
/* footer */
footer {
height: auto;
margin: 0rem auto 4rem;
}
footer a {
color: #fff;
}