/* ar */
.ar-bg::before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-image:url(../images/ar/ar_bg.jpg);
  background-size:cover;
}
.ar-read {
  background-color: #000;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 20px;
}
.ar-cont {
  padding: 100px 0 150px;
}
.ar-bg .inner {
  max-width: 850px;
}
.ar-img {
  width: 100%;
}
.ar-share {
  width: 100%;
  background: #e7e7e7;
  padding: 0 5% 5% 5%;
}
.share-ttl {
  width: 60%;
  margin-bottom: 40px;
}
.share-txt {
  font-size: 160%;
  font-weight: 700;
  text-align: center;
}
.share-big-txt {
  font-size: 180%;
  font-weight: 700;
  text-align: center;
  margin: 0;
}
.tag_box {
  border-top: 2px solid;
  border-bottom: 2px solid;
  padding: 20px;
  width: 70%;
  margin: 0 auto 20px;
}
.color-red {
  color: #c42323;
}
.sns-wrap {
  margin-top: 40px;
  margin-bottom: 40px;
}
.sns-wrap .sns-item p {
  color: #0e0e0e;
  font-weight: 700;
}

@media (min-width: 1280px) and (max-width: 1920px) {  
  .ar-read {
    font-size: calc(24px + 6 * (100vw - 1280px) / 640);
    letter-spacing: calc(3px + 1 * (100vw - 1280px) / 640);
  }  
}
@media (min-width: 769px) and (max-width: 1279px) {
    .ar-read {
      font-size: calc(24px + 6 * (100vw - 769px) / 510);
      line-height: calc(200% + 2.5 * (100vw - 1279px) / -510); 
      letter-spacing: calc(3px + 1 * (100vw - 769px) / 510);
    }
}
@media (min-width: 320px) and (max-width: 768px) {
    .ar-read {
      font-size: calc(16px + 2 * (100vw - 320px) / 448);
      letter-spacing: calc(3px + 1 * (100vw - 320px) / 448);
    }
}

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

    .ar-bg::before {
      background-image:url(../images/ar/ar_bg@sp.jpg);
      background-size:auto 100%;
    }
    .ar-bg {
      padding: 0;
    }
    .share-txt {
      font-size: 120%;
    }
    .share-big-txt {
      font-size: 130%;
    }
    .share-ttl {
      width: 80%;
      margin-bottom: 20px;
    }
    .tag_box {
      width: 100%;
    }
}
@media screen and (max-width: 479px) {
    .ar-bg {
      /* background: url(../images/lp_footer_bg01@sp.jpg) no-repeat bottom; */
      background-size: contain;
      padding: 0 0 120px;
    }
    .ar-ttl-bg {
      background: url(../images/ar/ar_page_black@sp.jpg) no-repeat bottom;
      background-size: cover;
    }
    .ar-cont {
      padding: 50px 0px;
    }
    .sns-item {
      padding: 0 0 20px!important;
    }
    .sns-item p {
      margin: 5px 0!important;
    }
}