@charset "UTF-8";

#wrap{position:relative;min-height:100vh;height:100%;}
/** Layout **/
#header{position:sticky;left:0;top:0;width:100%;padding:12px;z-index:100;background:#fff;}
#header::after{position:absolute;left:0;bottom:0;right:0;height:1px;background:#eee;content:'';}
#header .header_inner_m{display:flex;justify-content:start;align-items:center;flex-direction:row-reverse;gap:1rem;}
#header .header_inner_w{display:none;}
#header h1{display:block;color:#222;font-size:1.125rem;font-weight:700;line-height:1.75rem;}
#header button{position:relative;width:24px;height:24px;font-size:0;}
#header button::after{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -3px;border-bottom:1px solid #222;border-left:1px solid #222;-webkit-transform: rotate(45deg);transform: rotate(45deg);content:'';}
#header .header_pwchange{justify-content:center;}

/* container */
#container{z-index:1;}
#conts, .conts{position:relative;display:flex;flex-direction:column;gap:1.5rem;padding:24px 16px;z-index:10;}

.article{display:flex;flex-direction:column;gap:0.625rem;}

div.bar {height: 8px;background-color: #F5F7FA;}

/* footer */
#footer{position:sticky;left:0;top:100%;display:flex;flex-direction:column;gap:0.25rem;padding:16px 0;}
.footer_links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.5rem;}
.footer_links li{position:relative;color:#999;font-size:0.75rem;line-height:1.125rem;}
.footer_links li a{color:#999;font-size:0.75rem;}
.footer_links li:first-child a{color:#666;font-weight:500;text-decoration:underline;text-underline-offset:2px;}
.footer_links li + li::before{position:absolute;left:-0.75rem;top:50%;transform:translateY(-50%);width:1px;height:0.6875rem;background:#e3e3e3;content:'';}
.copy{color:#bababa;font-size:0.75rem;font-weight:400;text-align:center;line-height:1rem;}
.footer_links .capson_logo{width: auto;height: 0.88rem;vertical-align: top;}

@media screen and (min-width:1024px){
    #wrap{width:420px;margin:0 auto;}
    #header{position:relative;padding:40px 0 18px;background:transparent;}
    #header::after{left:50%;transform:translateX(-50%);width:30px;height:1px;}
    #header .header_inner_m{display:none;}
    #header .header_inner_w{display:flex;justify-content:center;}
    #header h1{line-height:1;}
    #header h1 img{width:auto;height:21px;vertical-align:top;}

    #conts, .conts{padding:24px 0;}
}