/* ==========================================================================
   Archives
============================================================================= */

.archives-top { }
.archives-top h2 { background-image: url(../img/archives/main.jpg); width: 940px; overflow: hidden; margin-left: 10px; height: 400px; }
.archives-top .main-text { width: 920px; margin: 20px auto 20px; font-size: 18px; text-align: left; line-height: 140%; }

.archives-top .main-text-link { margin-top: 20px; }
.archives-top .main-text-link a { font-size: 80%; color: #fff; background: #999; padding: 5px 10px; border-radius: 20px; text-decoration: none; transition: background, 0.2s; }

.archives-top .content-inner { padding-top:0; }

.archives-top .news-wrap { }
.archives-top .news-text { height: 40px; line-height: 40px; background: #fff; margin: 0 10px; padding: 0 20px; border-bottom: 1px solid #900; border-top: 1px solid #900; }
.archives-top .news-text span { display: inline-block; float: left; margin-right: 10px; }
.archives-top .news-text span.info { color: #900; font-weight: bold; }
.archives-top .news-text span.date { }
.archives-top .news-text span.data { }
.archives-top .news-text span.more { float: right; cursor: pointer; }
.archives-top .banner-wrap { margin: 20px auto 20px; }

.archives-wrap-ttl { top: 0px; position: relative; text-align: left; padding: 10px 0;  margin: 30px auto; font-size: 3vw; font-weight: bold; border-bottom: #000 solid 4px; /*color: #fff; background: #900; cursor: pointer; border-radius: 50px; transition: background, 0.2s; box-shadow: 0 4px 0 #999;*/ line-height: 1; }
.archives-wrap-ttl::after {
  content: '';
  position: absolute;
  background: #d00;
  width: 14vw;
  height: 4px;
  bottom: -4px;
  left: 0;

}

/*.archives-wrap-ttl::after { z-index: -1; position: relative; content:''; display: block; background: #900; height: 40px; transform: skewX(-24deg); margin-top: -46px; text-align: left; }*/
.archives-start { font-size: 1.2vw; }

/*.archives-wrap-ttl:hover { background: #900; color: #fff; box-shadow: 0 2px 0 #600; top: 2px; }*/

.ttl-selecter { color: #fff; background: #900; /*box-shadow: 0 2px 0 #600; top: 2px;*/ }

.archives-link-steam { text-align: right;}
.archives-link-steam a { font-size: 80%; padding: 5px; margin-right: 10px; border-radius: 20px; transition: background, 0.2s; }

.archives-wrap {
  padding-bottom: 60px;
  margin: 60px auto;
  background: #fff;
  padding: 10px 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
.archives-inner { display: table; margin: 30px auto; }
.archives-img { text-align: center; background: #eee; padding: 10px; display: table-cell; vertical-align: middle; transition: box-shadow 0.2s; }
.archives-img a { display: block; }
.archives-img-text { font-size: 10px; }
.archives-img img { max-width: 300px; max-height: 100%; margin: 0; }
.archives-cont { display: table-cell; }
.archives-ttl { z-index: 1;  position: relative; font-weight: bold; font-style: italic; font-size: 2.2vw; text-align: left; padding: 0 0 10px 20px; }
.archives-ttl::after { z-index: -1; position: relative; content:''; display: block; background: #900; height: 4px; transform: skewX(-24deg); margin-top: -4px;}
.archives-price { font-size: 16px; float: right; }
.archives-cont-inner { float: left; }
.archives-thum { background: #eee; float: left; padding: 10px; transition: box-shadow 0.2s; width: 30%; }
.archives-thum a { display: block; }
.archives-thum img { width: 100%; vertical-align: bottom; }
.archives-text { text-align: left; width: 70%; float: left; padding: 0 20px; }
.archives-text p { font-size: 18px; }

.archives-zokuhou { font-size: 20px; text-align: right; margin: 50px 0 0 0; }


.archives-top hr { box-sizing: border-box; background-position: 50%; max-width: 100%; border: 0; margin: 20px 0; height: 1px; background-image: linear-gradient(90deg, rgba(230, 0, 0, 0), rgba(230, 0, 0, 0.5) 50%, rgba(230, 0, 0, 0) 100%); }

.archives-btn { float: right; width: 30vw; margin-top: 20px; }
.archives-btn a { font-size: 24px; font-weight: bold; display: block; color: #fff; background: #d00; border-radius: 30px; height: 60px; line-height: 60px; text-decoration: none; transition: 0.3s; }


@media screen and (min-width:769px) {

  .archives-top .main-text-link a:hover { background: #900; cursor: pointer; }

  .archives-top .banner-wrap:hover { opacity: 0.8; }

  .archives-link-steam a:hover { color: #c33; cursor: pointer; }

  .archives-thum:hover { box-shadow: inset 0 0 0 5px #900; background: #fcc; cursor: pointer; }

  .archives-img:hover { box-shadow: inset 0 0 0 5px #900; background: #fcc; cursor: pointer; }

  .archives-btn a:hover { background: #900; }

}

@media screen and (max-width: 768px) {

  .archives-wrap-ttl {
    font-size: 5vw;
  }

  .archives-start {
    font-size: 3vw;
  }

  .archives-ttl {
    font-size: 5vw;
    padding: 20px 20px 10px 20px;
    letter-spacing: 0;
    line-height: 1.5;
  }

  .archives-ttl::after {
    margin-top: 10px;
  }

  .archives-price {
    font-size: 2vw;
    display: block;
    float: initial;
    line-height: 1;
  }



  .archives-top h2 { width: 100%; margin: 0; height: 40%; background-size: 220%; }
  .archives-top .main-text { width: 90%; font-size: 14px; text-align: left; }
  .archives-top .news-text { height: auto; position: relative; margin: 0; padding-bottom: 5px; }
  .archives-top .news-text span { float: none; text-align: left; display: block; line-height: 140%; }
  .archives-top .news-text span.more { float: none; text-align: right; position: absolute; top: 0; right: 2%; }
  .banner-wrap img { width: 100%; }
  .archives-wrap { width: 100%; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
  .archives-inner { display: block; margin: 0; }
  .archives-cont { float: none; width: auto; padding-bottom: 10px; }
  .archives-cont-inner { float: none; width: auto; }
  .archives-text { width: 100%; float: none; }
  .archives-img { max-width: 100%; width: auto; height: auto; margin: auto; display: block; }
  .archives-img img { width: auto; max-width: 100%; max-height: 360px; }
  .archives-thum { display: none; }
  .archives-zokuhou { text-align: center; }
  .archives-btn { margin: 20px auto; float: initial; width: 50vw; }
  .archives-text p { font-size: 14px; }

  .archives-btn a {
    font-size: 20px;
  }

}