html, body {
    overflow-x: hidden;
    margin:0;
}
a {
    color:inherit;
    text-decoration:none;
}
/* ヘッダー */
.left_header {
    width:100%;
    height:3rem;
    position:fixed;
    z-index:99;

    background:deepskyblue;
    color:white;
    display:flex;
    align-items:center;

    overflow:hidden;
}
.header_link {
    color:white;
    margin-left:0.5rem;
}
.left_header h1 {
    font-size:2rem;
    font-weight:bold;
    line-height:normal;
    margin:0;
}

.l_sidebar_button {
    display:none;
}
.l_sidebar_label {
    position:relative;
    margin-left:0.5rem;
    margin-bottom:0;

    width:3rem;
    height:2rem;

    z-index:100;
    cursor:pointer;
    transition:0.2s;
}
.l_sidebar_label i {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:1.75rem;
}
.l_sidebar_label i.fa-times { display:none; }
.l_sidebar_label i.fa-bars { display:block; }
input[type="checkbox"]#l_sidebar:checked ~ .left_header .l_sidebar_label i.fa-bars { display:none; }
input[type="checkbox"]#l_sidebar:checked ~ .left_header .l_sidebar_label i.fa-times { display:block; }

.header_right_content {
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);

    display:flex;
    margin-right:0.5rem;
}

/* サイドバーの表示サイズなど */
.l_sidebar_menu {
    position:fixed;
    top:3rem;
    left:-400px;

    height:calc( 100vh - 3rem);
    width:400px;
    background:#000;
    color:white;

    transition:0.2s;
    overflow:auto;
    z-index:99;
}
input[type="checkbox"]#l_sidebar:checked ~ .l_sidebar_menu{
    left:0;
    transition:0.2s;
}
.l_sidebar_closer {
    position:fixed;
    top:3rem;
    right:0;

    height:calc(100vh - 3rem);
    width:100%;
    opacity:0.6;
    cursor:pointer;
    z-index:98;

    display:none;
}
input[type="checkbox"]#l_sidebar:checked ~ .l_sidebar_closer{
    display:block;
}
main {
   margin-top:3rem;
}

/* sp mode */
@media (max-width:768px){
    .left_header h1 {
        font-size:1.5rem;
        font-weight:bold;
        line-height:normal;
        margin:0;
    }

}
.light-theme {
  background: #fff;
  color: #333;
}
.dark-theme {
  background: #223;
  color: #fff
}
/*.parent {
    background:gray;

    position:relative;

    height:100vh;

}
.child {
    background:orange;

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

}

*/