#content-wrap{
	max-width: 1200px;
	margin:0 auto 2em;
	font: 16px/1.7 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
	color:#222;
}

#main-content{
	margin:3em auto 0;
    max-width: 960px;
}

small{
    font-size: 80%;
}

.h2-box{
    font-size: 120%;
    font-weight: 700;
    color:#464646;
    margin:0 0 2em;
    font-family: 'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','ＭＳ Ｐゴシック','MS PGothic',sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
}

.h2-box .h2-border{
    border-top:5px solid #a5a6af;
    border-bottom:5px solid #a5a6af;
    padding:30px 0;
    }

h2.head2{
    color:#222;
    font-weight: 700;
    line-height: 1.7;
    margin: 0 60px;
    font-size: 28px;
}

h2.head2 .red{
    color:#ec7900;
}

p.intro{
    font-size: 14px;
}

.about-box{
    margin:2.5em 0 4em;
    background:#ecd385;
    padding:20px 55px 25px;
}

h3.about-head{
    border-bottom:1px #222 solid;
    padding-bottom:0.2em;
    margin-bottom:1.2em;
    font-weight: 700;
    font-size: 140%;
    color:#222;
    font-family: 'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','ＭＳ Ｐゴシック','MS PGothic',sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
}

h3.head3{
    border-bottom:solid #222 4px;
    padding-bottom:4px;
    margin:0;
    font-weight: 700;
    font-size:140%;
    color:#74757d;
    font-family: 'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','ＭＳ Ｐゴシック','MS PGothic',sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
}

ul.article-list{
    list-style: none;
    padding-left: 0;
    margin:0 0 4em;
}

ul.article-list li{
    padding:1.2em 0;
    transition: .5s all ease;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    border-bottom: 1px solid #ccc;
    position: relative;
    z-index: 100;
}

ul.article-list li a{
    display: block;
    text-decoration: none;
    color:#222;
    font-weight: 700;
    margin-left: 1.4em;
    max-width: 90%;
}

ul.article-list li a.new:before{
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    border-bottom: 3.4em solid transparent;
    border-right: solid 3.4em #5191b9;
}

ul.article-list li a.new:after {
    content: "NEW";
    position: absolute;
    z-index: 2;
    margin: 0 5px;
    color: #fff;
    right: -3px;
    top: 10px;
    font-size: 75%;
    transform: rotate(45deg);
    font-weight: 700;
    }

ul.article-list li.release:before{
    content:"▶︎";
    font-size: 14px;
    position: absolute;
    top:21px;
}

ul.article-list li.release:hover{
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    box-shadow:0 15px 30px rgba(0,0,0,.3),0 10px 8px rgba(0,0,0,.22);
    background:#e4e5ea;
    }

ul.article-list li.release:after{
    content: "";
    transition: .5s all ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    position: absolute;
    bottom: -1px;
    height: 4px;
    width: 0;
    background: #222;
    left: 0px;
}

ul.article-list li.release:hover:after{
    width: 100%;
  }

ul.article-list li.uc{
    background:#f7f7f7;
    position: relative;
    z-index: 1;
}

h4.related-head {
    border-left: 6px solid #333;
    padding: 4px 0 3px 10px;
    margin-bottom: 5px;
    background-color: #ccd3e3;
    font-size: 15pt;
    color: #333;
}

@media screen and (max-width: 768px) {
#content-wrap{
    font-size: 14px;
}
#main-content {
    margin: 2em auto 0;
}
h2.head2{
     margin: 0 20px;
     font-size: 100%;
    }
.about-box{
    padding:20px 20px 25px;
}
h3.about-head{
    font-size: 120%;
}
h3.head3{
    font-size: 120%;
}
p.intro{
    padding:0 10px;
}
ul.article-list li.release:before{
    font-size: 12px;
    }
ul.article-list li a{
    max-width: 85%;
}
}

.mt0-5{
    margin-top:0.5em !important;
}

.mt0-9{
    margin:0.9em 0 !important;
}

.mt1{
    margin-top:1em !important;
}

.mt2{
    margin-top:2em !important;
}

.mt3{
    margin-top:3em !important;
}

.mb1{
    margin-bottom:1em !important;
}

.mb1-5{
    margin-bottom:1.5em !important;
}

.mb2{
    margin-bottom:2em !important;
}

.mb3{
    margin-bottom:3em !important;
}

.mb4{
    margin-bottom:4em !important;
}

.mb5{
    margin-bottom:5em !important;
}