/* ---------- 共通設定 ----------*/
body {
    margin: 0;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}


#body {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background:#fff;
    margin-top:80px;
    box-shadow: 2px 2px 4px gray;
    padding-bottom:10px;
    display:flex;
}

/* ---------- お知らせ ----------*/
#infomation {
    margin: 20px;
    width: 70%;
}
#info {
    border: 1px solid #ccc;
    border-radius: 5px 5px 2px 2px;
}
.info {
    padding: 0.6em 1.5em;
    text-align: left;
    font-size: 1em;
    line-height: 1.6;
    height:400px;
    color: #444;
    overflow: auto;
    background: #F4F4F4;
}
.info div{
    display: flex;
}
.info dl {
    padding: 0.5em 0;
    border-bottom: 1px solid #ccc;
}
.info dt {
    padding-bottom: 0;
}
.new::after {
    content: "NEW!!";
    display: inline-block;
    width: 80px;
    height: 20px;
    border-radius: 10%;
    background: #FD8B8F;
    margin-right: 5px;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
}
.info dd {
    margin-left:10px;
}
.info dd a{
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(139, 209, 134) 50%);
  background-position: 0 0;
  font-weight: bolder;
  background-size: 200% auto;
  transition: .2s;
}
.info dd a:hover{
  background-position: -100% 0;
  color: #fff;
}

/* ---------- サイドバー ----------*/
#sideber {
    width: 30%;
    margin-right: 20px;
}
#profile{
    margin-top: 20px;
    background: #F4F4F4;
    border-radius: 5px 5px 2px 2px;
    border: 1px solid #ccc;
    min-height:200px;
}

#copylight {
    margin-top: 10px;
    border-radius: 5px 5px 2px 2px;
    background: #F4F4F4;
    border: 1px solid #ccc;
}
.cp1,.cp2{
    word-wrap: break-word;
    margin-top:5px;
    font-size: 0.6em;
}
#commingsoon{
    margin-top: 10px;
    border-radius: 5px 5px 2px 2px;
    background: #F4F4F4;
    border: 1px solid #ccc;
    height: 100px;
}
.divEle {
    padding:5px;
}

/*---------- スマホ用 ----------*/
@media screen and (max-width: 768px) {
    #body {
        display: block;
        padding: 20px 0px;
    }
    #infomation {
        margin-top:0;
        width: initial;
        border: 1px solid #ccc;
    }
    .info {
        height:300px;
    }
    .info div{
        flex-direction: column;
        flex-wrap: wrap;
    }
    .info dd {
        margin-left: 0.5em;
    }
    #sideber {
        width: initial;
        margin: 0px 20px;
    }
    #profile{
        margin-bottom: 20px;
    }
    #commingsoon{
        display:none;
    }

}