@charset "utf-8";

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  } 
}

.f-poppins {
  font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  font-style: normal;
  font-weight: 400;
}
.f-poppins-b {
  font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  font-style: normal;
  font-weight: 700;
}

.site-footer{
  margin-top: 0;
}

/* コンテナ */
.playcycle-wrapper {
  position: relative;
  /* min-width: 1040px; */
  font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  font-size: 10px;
  line-height: 1;
  background: #E0F0E8;
  padding-top: 5.3125rem;
}
.bg__wrap{
  background: top center url("../../playcycle/images/bg.png") repeat-y;
}
.articlebox__wrap {
  width: 714px;
  margin: 0 auto;
  padding-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .playcycle-wrapper{
    min-width: 0;
  }
  .articlebox__wrap {
    width: 90.66666666666667vw;
    padding-bottom: 40px;
  }
}


/* ロゴ＋リード */
.playcycle-wrapper .logo{
  max-width: 571px;
  margin: 2.5rem auto 1.25rem;
}
.playcycle-wrapper .lead{
  font-size: 1.25rem;
  line-height: 1.7;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .playcycle-wrapper .logo{
    padding: 0 1em;
    margin: 0 auto;
  }
  .playcycle-wrapper .lead {
    font-size: 0.875rem;
    margin: 1em 1em 2em;
  } 
  .playcycle-wrapper .lead br{
    display: none;
  }
}

/* 回収実績 */
.mv{
  text-align: center;
}
.now{
  display:block; 
  margin: 8em auto 0; 
  max-width:714px;
}
.now img{
  width: 100%;
}
@media screen and (max-width: 767px) {
  .now {
    margin: 2em 1em 0;
  } 
}

/* イントロ */
.intro {
  margin-top: 112px;
}
.intro-heading {
  text-align: center;
}
.intro__ttl {
  display: inline;
  padding-bottom: 3px;
  font-size: 1.75rem;
  line-height: 1.5;
  list-style-position: 0.042em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(92%, transparent), color-stop(92%, #000));
  background: linear-gradient(transparent 92%, #000 92%);
}
.intro__txt--sub{
  margin-top: 2em;
}

@media screen and (max-width: 767px) {
  .intro {
    margin-top: 8.533333333333333vw;
  }
  .intro__ttl {
    padding-bottom: 0.666666666666667vw;
    font-size: 5.333333333333334vw;
    line-height: 1.442857142857143;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(90%, transparent), color-stop(90%, #000), color-stop(95%, #000), color-stop(95%, transparent));
    background: linear-gradient(transparent 90%, #000 90%, #000 95%, transparent 95%);
  }
}

/* 記事 */
.article {
  margin-top: 80px;
  /* font-family: "a-otf-ud-reimin-pr6n", sans-serif; */
  font-style: normal;
  border: 4px solid #B7D31B;
  background: #FFF;
  padding: 4em;
}
.article p {
  font-size: 0.875rem;
  line-height: 2.142857142857143;
  letter-spacing: 0.042em;
}
.article p a {
  text-decoration: underline;
}
.article p a:hover {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}
.article .img{
  max-width: 438.2px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .article {
    margin-top: 8.533333333333333vw;
    border: 4px solid #B7D31B;
    padding: 2em;
  }
  .article p {
    font-size: 0.75rem;
    line-height: 1.7;
  }
}

/* 記事 リサイクル,リユース */
.article-reuse .img,
.article-recycling .img {
  max-width: none;
  padding: 2px;
  margin: 0 auto;
  background: #e4efe8;
}
@media screen and (max-width: 767px) {
  .article-reuse .img,
  .article-recycling .img {
    padding: 1px;
  }
}

/* 記事 画像 */
.img1 {
  margin-top: 2em;
}
@media screen and (max-width: 767px) {
  .img1 {
    margin-top: 1em;
  }
}

.article-intro .img {
  max-width: none;
}

/* 見出し */
.article .detail__ttl  {
  margin: 0 auto 1em;
  font-size: 1.5rem;
  letter-spacing: 0.042em;
  list-style-position: 0.042em;
  text-align: center;
  line-height: 1.4;
}
.article .detail__ttl-reduction  {
  letter-spacing: 0 !important;
}
.article .detail__ttl--sub2  {
  padding-bottom: 3px;
  font-size: 1.25rem;
  font-weight: bold;
  color: #B7D31B;
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.mt-0 {
  margin-top: 0 !important;
}
.size-small {
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .article .detail__ttl  {
    font-size: 1.125rem;
  }
  .article .detail__ttl--sub2  {
    font-size: 1rem;
    margin-top: 1em;
  }
  .size-small {
    font-size: 0.75rem;
  }
}

/* 廃棄の割合 */
.Annotation-text {
  text-align: right;
}
.Annotation-text a {
  color: #44BDF1;
}

/* 店舗リスト */

.store-list {
  margin: 20px auto 50px;
  max-width: 790px;
  padding: 0;
  width: 100%;
  font-size: 0.88rem;
  border-top: 2px solid #B7D31B;
}
.store-list dl {
  margin: 0;
}
.store-list dl dt {
  border-bottom: 2px solid #B7D31B;
  color: #B7D31B;
  font-weight: bold;
}
.store-list dl dt:hover{
  background: rgba(183, 211, 27, 0.1);
}
.store-list dl dt:after{
  top: 1.25rem;
  border-color: #B7D31B;
}
.store-list dl dt.-active:after{
  top: 1.575rem;
}
.store-list dl dd {
  border-bottom: 2px solid #B7D31B;
  line-height: 2;
}
.store-list dl dd a {
  text-decoration: none
}
.store-list dl dd .pref {
  margin: 0;
  font-weight: bold;
}
.store-list dl dd ul + .pref {
  margin-top: 1em;
}
.custom-table {
  width: 100%;
  border-collapse: collapse;
}
.custom-table td:first-child {
  width: 25%;
  border-collapse: collapse;
}
.shop-item {
  list-style-type: none;
  position: relative;
}
.shop-item + .shop-item {
  margin-top: 0.5rem;
}
.shop-item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100px;
  background-color: #000;
  background-size: contain;
  position: absolute;
  left: -12px;
  top: 1em;
}
.text-content-small {
  font-size: 0.78rem;
}
@media screen and (max-width: 767px) {
  .store-list {
    margin: 0 auto 50px;
    width: 100%;
  }
  .store-list dl {
    font-size: 0.75rem;
    flex-direction: column;
  }
  .custom-table td:first-child {
    width: 42%;
  }
  .mobile-row {
    display: table-row;
    font-size: 0.55rem;
  }
  .mobile-row-small {
    font-size: 0.45rem;
  }
  .text-content__mobile-row {
    display: table-row; /* スマホ用の1行を表示 */
  }
}