@charset "UTF-8";
/*
	Title	   : アニメ「イド・インヴェイデッド」公式サイト
	URI            : id
	Designer       : GRAPHNETWORK
	Designer's URI : http://graphnetwork.com/
*/
/* --------------------------------------------------------------

							Layout

-----------------------------------------------------------------*/
#news h1.page_ttl {
   background-position: top 3px left -40px;
   width: 104px;
}
#news .news_wrap {
   margin: 20px;
   background-color: #0f0f0f;
   border: 1px solid #333333;
   padding: 10px 20px 0;
   position: relative;
   background-image: url("../img/common/sp-contents-line-bottom.png"), url("../img/common/sp-contents-line-top.png");
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: top, bottom;
   font-weight: 400;
   /*font-family: "Yu Gothic", YuGothic, sans-serif;*/
   
}
#news .news-tag {
   font-size: 13px;
   font-weight: normal;
   color: #fff100;
}
#news .news-tag::before {
   content: url("../img/music/ttl-arrow-left.png");
   position: relative;
   margin-right: 10px;
}
#news .news-tag::after {
   content: url("../img/music/ttl-arrow-right.png");
   position: relative;
   margin-left: 10px;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
}
#news .back_idx {
   text-align: center;
   font-size: 13px;
   color: #666;
}
#news .back_idx::before {
   content: url("../img/common/icon-return-arrow.png");
   position: relative;
   margin-right: 10px;
}
#news .back_idx:hover::before {
   content: url("../img/music/ttl-arrow-right.png");
   position: relative;
   margin-right: 10px;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
}
#news .back_idx a {
   color: #aaa;
}
#news .back_idx a:hover {
   color: #fff100;
}
#news .news_txt {
   /*font-size: 13px;
   line-height: 2;*/
   font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#news h1.news-article_ttl {
   width: 100%;
   font-size: 20px;
   font-weight: normal;
   letter-spacing: 0.08em;
}
#news .news_ttl {
   width: 100%;
   font-size: 18px;
   font-weight: normal;
   letter-spacing: 0.08em;
   padding-bottom: 20px;
   line-height: 1.5;
   color: #efefef;
}
.news_ttl_box {
   border-bottom: 1px solid #333;
   padding-right: 30px;
}
.button {
   position: relative;
   display: block;
   color: #fff;
   text-decoration: none;
}
.button::after {
   position: absolute;
   top: 50%;
   right: .2em;
   content: '';
   /*margin-top: -5px;*/
   border: 7px solid transparent;
   border-top-width: 5px;
   border-bottom-width: 5px;
   border-left-color: #efefef;
   transition: all .2s;
}
.button:hover::after {
   right: -.05em;
   border-left-color: #fff100;
}
#news .block-news-ttl {
   /* text-align: center; */
   letter-spacing: 0.09em;
   margin-bottom: 30px;
   border-bottom: 1px solid #333;
   padding-bottom: 20px;
   margin-bottom: 20px;
}
.news-cts .date {
   font-size: 11px;
   margin-bottom: 10px;
   color: #666;
}
.date {
   font-size: 11px;
   margin-bottom: 0px;
   color: #666;
}
.news-cts {
   margin-top: 20px;
}
#news .news_txt_detail .news_txt_detail_img {
   text-align: center;
}
#news .news_txt_detail .news_txt_detail_img300 ,
#news .news_txt_detail .news_txt_detail_img600 {
   text-align: center;
   display: block;
   margin: 40px auto;
}
#news .news_txt_detail img {
   width: 100%;
}
#news .article-txt-area {
   margin: 20px 0 60px;
   font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: justify;
}
#news .article-txt-area-sngl {
   margin: 20px 0 0;
   font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: justify;
}
#news .article-txt-area h2 {
   margin-top: 0;
   margin-bottom: 0;
   font-size: 20px;
   font-weight: normal;
   text-align: left;
   letter-spacing: 0.09em;
   line-height: 1.8;
}
#news .article-txt-area h2.jp {
   margin-top: 0;
   margin-bottom: 10px;
   font-size: 20px;
   font-weight: normal;
   text-align: left;
   letter-spacing: 0.09em;
   line-height: 1.8;
}
#news .icn_new {
   font-size: 10px;
   padding: 4px 8px;
   color: #fff100;
}
#news .icn_new::before {
   content: url("../img/music/ttl-arrow-left.png");
   position: relative;
   margin-right: 4px;
   top: -1px;
}
#news .icn_new::after {
   content: url("../img/music/ttl-arrow-right.png");
   position: relative;
   margin-left: 4px;
   top: -1px;
}
#pager {
   text-align: center;
   font-size: 13px;
}
#news .news_wrap .article-txt-area .btnarea {
   text-align: center;
}
#news a.btn {
   height: 52px;
   width: 100%;
   margin-top: 20px;
   margin-right: 0;
   margin-left: 0;
   margin-bottom: 20px;
   line-height: 52px;
   font-size: 15px;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
   border: 1px solid #eee;
   text-decoration: none !important;
   
}
#news a.btn:hover {
   background-color: #fafafa;
   color: #000 !important;
}
.mgb-30 {
   margin-bottom: 30px;
}
#news .news_wrap .article-txt-area a {
   text-decoration: underline;
}
#news .news_wrap .article-txt-area a:hover {
   color: #fff100;
}
.news-article_ttl .inner {
   line-height: 30px;
}
#news h3 {
   font-size: 18px;
   font-weight: 400;
   letter-spacing: 0.09em;
   font-family: 'Josefin Sans', "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#news .comment {
   font-size: 10px;
   color: #999;
}

#news .wrap{
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-flow: row wrap;
   flex-wrap: wrap;
   -ms-flex-pack: center;
   flex-wrap:wrap;
    justify-content: flex-start;
}
#news .article-txt-area .box {
    width: 60%;
    margin-bottom: 0;
    line-height: 1.6;
    margin-bottom: 10px;
}
#news .d-img {
   display: block;
}
#news .item {
   width: 100%;
   font-size: 15px;
   line-height: 2.2;
   letter-spacing: 0.02em;
   margin-bottom: 20px;
}
#news .item-txt {
   font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.02em;
   margin-top: 10px;
}

#news .unlin {
   border-bottom: 1px solid #333;
   padding: 30px 0 0;
}
#news .article-txt-area .box-ttl{
   width: 30%;
   font-weight: normal;
   margin-bottom: 10px;
   line-height: 1.6;
}
#news .mgl10 {
   margin-left: 0;
}
#news .fontc-grey {
   color: #999;
}
#news .article-txt-area .flex{
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-flow: row wrap;
   flex-wrap: wrap;
   -ms-flex-pack: flex-start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   flex-wrap:wrap;
}
#news .article-txt-area .flex .box {
    width: 66%;
    margin-bottom: 4%;
    line-height: 1.6;
    padding-left: 30px;
   text-align: left;
}
#news .article-txt-area .flex .list-box {
    width: 20%;
    margin-bottom: 4%;
    line-height: 1.6;
    border-right: 1px solid #333;
}
#news .comment ul li {
    margin-left: 20px !important;
    margin-bottom: 12px;
    line-height: 1.6;
    list-style: circle;
}
#news .article-txt-area ul li {
    margin-left: 20px !important;
    margin-bottom: 12px;
    line-height: 1.6;
    list-style: circle;
}
.article-txt-area ul li .comment {
   line-height: 1.8em;
}
.ttl-sml {
   font-size: 13px;
}
.f-img {
	margin: 0 2%;
	width: 40%;
}
.article-txt-area .flex {
	justify-content: center !important;
}
@media screen and (min-width:960px) {
   #news #main {
      margin: 0 auto 100px;
      float: left;
      padding: 0;
      padding-left: 250px;
      min-height: 1100px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-size: 100%;
      background-attachment: fixed;
      background-position: top 0 left 100px;
   }
   #news h1.page_ttl {
      background-position: top 45px left -37px;
      width: 115px;
      margin: auto;
   }
   #news .news_wrap {
      width: 660px;
      margin: 20px auto;
      background-color: #0f0f0f;
      border: 1px solid #333333;
      padding: 20px 60px 0;
      position: relative;
      background-image: url("../img/common/contents-line-bottom.png"), url("../img/common/contents-line-top.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: top, bottom;
   }
   .news-cts {
      margin-top: 30px;
   }
   #news h1.news-article_ttl, #news .news_ttl {
      width: 100%;
      font-size: 22px;
      font-weight: normal;
      letter-spacing: 0.08em;
      line-height: 1.5;
      color: #efefef;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
   }
   #news h1.news-article_ttl, #news .news_ttl:hover {
      color: #fff100;
      transition: all 300ms;
   }
   .news_ttl_box .news_ttl {
      font-size: 22px !important;
   }
   #news .news_txt {
       line-height: 2.2;
   }
   #news .news_txt_detail .news_txt_detail_img300 img {
      width: 300px;
      display: block;
      margin: auto;
   }
   #news .news_txt_detail .news_txt_detail_img600 img {
      width: 600px;
      display: block;
      margin: auto;
   }
   #news .article-txt-area {
      margin-top: 0;
      margin-bottom: 60px;
      font-size: 15px;
      line-height: 2.2;
      letter-spacing: 0.02em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
   }
   #news .block-news-ttl {
      /* text-align: center; */
      letter-spacing: 0.09em;
      margin-bottom: 24px;
      border-bottom: 1px solid #333;
      padding-bottom: 20px;
   }
   #news .icn_new {
      font-size: 10px;
      padding: 4px 8px;
      color: #fff100;
   }
   #news .icn_new::before {
      content: url("../img/music/ttl-arrow-left.png");
      position: relative;
      margin-right: 4px;
      top: 0;
   }
   #news .icn_new::after {
      content: url("../img/music/ttl-arrow-right.png");
      position: relative;
      margin-left: 3px;
      top: 0;
   }
   .news-cts .date {
      margin-bottom: 10px;
   }
   #news .article-txt-area h2 {
      margin-top: 0;
      margin-bottom: 0;
      font-size: 24px;
      font-weight: normal;
      text-align: left;
      letter-spacing: 0.09em;
   }
   #news .article-txt-area h2.jp {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 24px;
      font-weight: normal;
      text-align: left;
      letter-spacing: 0.09em;
   }
   #news a.btn {
      height: 52px;
      width: 280px;
      line-height: 52px;
      font-size: 15px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -o-transition: all 2s ease;
      transition: all 2s ease;
      border: 1px solid #eee;
      text-decoration: none;
   }
   .news-article_ttl .inner {
      line-height: normal;
   }
   .article-txt-area .wrap{
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-flow: row wrap;
      flex-wrap: wrap;
      -ms-flex-pack: center;
      flex-wrap:wrap;
       justify-content: flex-start;
   }
   .article-txt-area .box {
       width: 80%;
       margin-bottom: 0;
       line-height: 1.6;
       margin-bottom: 14px;
   }
   .article-txt-area .box-ttl{
      width: 20%;
      font-weight: normal;
   }
   .mgl10 {
      margin-left: 10px;
   }
   .fontc-grey {
      color: #999;
   }
   #news .comment {
      font-size: 12px;
      color: #999;
   }
   .article-txt-area .flex{
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-flow: row wrap;
   flex-wrap: wrap;
   -ms-flex-pack: flex-start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   flex-wrap:wrap;
   }
   .article-txt-area .flex .box{
      width: 80%;
      margin-bottom: 2%;
      line-height: 2.6;
      padding-left:40px; 
   }
   .article-txt-area .flex .list-box {
       width: 10%;
       margin-bottom: 2%;
       line-height: 2.6;
       border-right: 1px solid #333;
   }
   #news .item {
      width: 46%;
      font-size: 15px;
      line-height: 2.2;
      letter-spacing: 0.02em;
      margin-bottom: 0;
   }
   #news .item:first-child {
      margin-right: 6%;
   }
   #news .unlin {
      border-bottom: 1px solid #333;
      padding: 30px 0;
   }
   #news .article-txt-area-sngl {
      margin: 20px 0 0;
      font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: justify;
   }
}