*{
    box-sizing: border-box;
    font-size: 18px;
    line-height: 1.4;
}
html, body{
    width: 100%;
    height: 100%;
}
.clear:before, .clear:after{
    clear: both;
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}
#main, #canvas, #project, #content, #sns.online, .online, .offline{
    display: none;
}
#main {
    padding: 5px 0;
}
#canvas, #project, #content, #sns, #offline, #footer-space{
    margin-top: 45px;
}
#sns{
    width:100%;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
#sns a{
    margin-right: 60px;
}
#sns a:last-child{
    margin-right: 0;
}
#footer-space{
    width: 100%;
    height: 0;
}
.separator{
    width:85%;
    margin: 60px auto 0;
    border-top: #999 solid 1px;
}
section{
    display: none;
}
.caption{
    display: -webkit-flex;
    display: flex;
    padding: 0 20px;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: baseline;
    align-items: baseline;
}
.title{
    font-size: 175%;
    font-weight: bold;
    line-height: 1.1;
}
.arrow{
    font-size: 115%;
    margin-left: auto;
    text-align: right;
}
.arrow span{
    font-size: 100%;
}
.x-scroll{
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
}
.x-scroll::-webkit-scrollbar{
    display:none;
}
.x-scroll a{
    display: inline-block;
    margin-left: 20px;
    text-align: center;
}
.x-scroll div.spacer:after{
    content: "\0020";
    display: inline-block;
    width: 20px;
    height: 10px;
    visibility: hidden;
}
.x-scroll.thumb-list span{
    display: inline-block;
    position: relative;
    padding-top:10px;
    width: 150px;
    white-space: pre-line;
    word-break: break-word;
    /*overflow: hidden;*/
}
.x-scroll.thumb-list span small{
    display: block;
    font-size: 80%;
}
.x-scroll .thumb{
    width: 150px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.x-scroll .thumb img{
    border-radius: 8px;
    max-width:100%;
    max-height:100%;
}
#canvas_tab.x-scroll a{
    padding: 6px 0;
    margin-left: 30px;
}
#canvas_tab.x-scroll a:first-child{
    margin-left: 20px !important;
}
#canvas_tab.x-scroll a.on{
    border-bottom: 4px solid #3c9fff;
    font-weight: bold;
}
.bt{
    display: inline-block;
    min-width: 60%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: #999 solid 1px;
    border-radius: 30px;
    margin-top: 20px;
}
#offline{
    text-align: center;
    padding: 0 20px;
}
#offline .offline-image{
    width:100%;
    height:300px;
    background-image: url("../img/common/offline.png");
    background-repeat: no-repeat;
    background-position: center -46px;
    background-size: auto 128%;
    padding: 180px 0 0;
}
#projects i.cloud-on, #project i.cloud-off{
    position: absolute;
    top: 0;
    right: 3px;
}
/* Theme light */
.lights, .lights .bk{
    background: #f8f8f8;
}
.lights, .lights a{
    color: #4e4e4e;
}
.lights .sub{
    color: rgba(78,78,78,.5);
}
.lights .subbk{
    background: #ebebeb;
}
.lights .separator,
.lights .bt{
    border-color: rgba(78,78,78,.5);
}
/* Theme Dark */
.darks, .darks .bk{
    background: #2d2d2d;
}
.darks, .darks a{
    color: #e6e6e6;
}
.darks .sub{
    color: rgba(230,230,230,.5);
}
.darks .subbk{
    background: #484848;
}
.darks .separator,
.darks .bt{
    border-color: rgba(230,230,230,.5);
}

.icons_sp{
    display:inline-block;
    background-image:url("../img/sp/icon_sp_darks.png");
    background-repeat:no-repeat;
    background-size:auto 100%;
    width:36px;
    height:36px;
    vertical-align:middle;
}
.lights .icons_sp{
    background-image:url("../img/sp/icon_sp_lights.png");
}
.icons_sp.cloud-on{
    background-position:-756px 0;
}
.icons_sp.cloud-off{
    background-position:-792px 0;
}
.icons_sp.twitter{
    background-position:-828px 0;
}
.icons_sp.instagram{
    background-position:-864px 0;
}
.icons_sp.youtube{
    background-position:-900px 0;
}
.icons_sp.facebook{
    background-position:-936px 0;
}