@charset "UTF-8";
  #aff-contents .p-page-header {
    max-width: 960px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 0 auto 10px; 
  }
  #aff-contents .p-page-header__item {
    width: 115px;
    margin-right: 12px;
  }
  #aff-contents .p-page-header__item:last-child {
    width: 170px;
  }
  @media screen and (max-width: 768px) {
    #aff-contents .p-page-header {
      max-width: 100%;
      margin: 0 auto 10px; 
    }
    #aff-contents .p-page-header__item {
      width: 12%;
      margin-right: 3%;
    }
    #aff-contents .p-page-header__item:last-child {
      width: 17.7%;
    }
  }

  #aff-contents .p-page-ttl {
    margin: 0 auto;
    width: 960px;
    text-align: center; }
  #aff-contents .p-page-ttl__series {
    margin: 0 auto 50px;
    width: 10.8%;
    text-align: center; }
  #aff-contents .p-page-ttl__visual {
    margin: 0 auto;
    width: 100%;
    }
  @media screen and (max-width: 768px) {
    #aff-contents .p-page-ttl {
      width: 100%;
    } 
    #aff-contents .p-page-ttl__series {
      margin: 0 auto 20px;
    }
  }

  /* 一覧 - 背景 */
  #aff-contents .box-list {
    width: 100%;
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(244, 238, 207, 1) 5px, rgba(244, 238, 207, 1) 7px );
    position: relative;
    margin: 0 0 100px 0;
    padding: 0 0 50px 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    z-index: 1;
  }
  #aff-contents .box-list02 {
    width: 100%;
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(253, 224, 221, 1) 5px, rgba(253, 224, 221, 1) 7px ) !important;
    position: relative;
    margin: 0 0 100px 0;
    padding: 0 0 50px 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    z-index: 1;
  }
  #aff-contents .box-list::after{
    position: absolute;
    bottom: -27px;
    background: url(/j/pr/aff/2308/img/table_border.png) 0 0 no-repeat;
    background-size: contain;
    content: '';
    width: 100%;
    height: 54px;
  }
  #aff-contents .box-list02::after{
    position: absolute;
    bottom: -27px;
    background: url(/j/pr/aff/2308/img/table_border.png) 0 0 no-repeat;
    background-size: contain;
    content: '';
    width: 100%;
    height: 54px;
  }
  @media screen and (max-width: 768px) {
    #aff-contents .box-list::after{
      background-size: cover;
    }
    #aff-contents .box-list02::after{
      background-size: cover;
    }
  }

  /* 一覧 */
  #aff-contents .card-list {
    margin: 30px auto 30px;
    width: 94%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
  }
  #aff-contents .card-list .card {
    margin-right: 3.5%;
    margin-bottom: 3.5%;
    width: 31%;
    background-color: #fff;
    box-shadow: 6px 6px 8px 0px rgba(0, 0, 0, 0.25);
    position: relative;
  } 
  #aff-contents .card-list .card:nth-child(3n) {
    margin-right: 0;
  }
  #aff-contents .card-list .card a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  #aff-contents .card-list .card .ph-box {
    width: 100%;
  }
  #aff-contents .card-list .card .text-box {
    padding: 10px;
    width: 100%;
    background-color: #fff;
  }
  #aff-contents .card-list .card .text-box p {
    font-size: 1rem;
    line-height: 1.6;
  }
  #aff-contents .card-list .card .num {
    width: 48px;
    aspect-ratio: 1/1;
    font-size: 0.875rem;
    color: #fff;
    background-color: #3e89c1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 10;
  }
  #aff-contents .card-list .card .num02 {
    width: 48px;
    aspect-ratio: 1/1;
    font-size: 0.875rem;
    color: #fff;
    background-color: #EA5532;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 10;
  }
  #aff-contents .card-list .card .pref {
    padding-left: 12px;
    width: 90px;
    height: 20px;
    font-size: 0.875rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 30% 70% 0% 100% / 100% 0% 100% 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 11;
  }
  #aff-contents .card-list .card:nth-child(6) .pref {
    width: 150px;
    border-radius: 20% 70% 0% 100% / 100% 0% 100% 0%;
  }

  @media screen and (max-width: 768px) {
    #aff-contents .box-list {
      margin: 0 0 50px 0;
      padding: 0 0 30px 0;
      align-items: center;
    }
    #aff-contents .card-list {
      margin-top: 40px;
      width: 90%;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
    }
    #aff-contents .card-list .card {
      margin-right: 0;
      margin-bottom: 40px;
      width: 100%;
    } 
    #aff-contents .card-list .card:nth-child(3n) {
      margin-right: 0;
    }
  }