@charset "utf-8";
/* product category add css
--------------------------------------------- */

/* 25/11/21:start */

/* バナー 4枚・3枚のみ対応:start */
.ay-bnr-grid {
    display: grid;
    gap: 10px;
    margin: 0 auto;
    max-width: 1600px;
}

.ay-bnr-grid a {
    display: block;
    height: 100%;
}

.ay-bnr-grid:has(a:nth-child(4)) {
    grid-template-columns: repeat(4, 1fr);
}

.ay-bnr-grid:has(a:nth-child(-n+3):last-child) {
    grid-template-columns: repeat(3, 1fr);
}

.ay-bnr-grid a img {
    display: block;
    height: auto;
    width: 100%;
}


.ay-bnr-grid + h1 {
    margin-top: 3rem;
}

@media screen and (max-width: 639px) {
  .ay-bnr-grid {
    min-width: inherit;
    padding-right: 4vw;
    padding-left: 4vw;
  }

  .ay-bnr-grid.ay-bnr-grid:has(a:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }

  .ay-bnr-grid.ay-bnr-grid:has(a:last-child:nth-child(-n+3)) {
    grid-template-columns: repeat(1, 1fr);
  }

}
/* バナー 4枚・3枚のみ対応:end */


/* 25/11/21:end */

/* 25/12/18 バナー＋説明表示:start */

.ay-cat-wrpper {
  margin: 100px auto 0;
  max-width: 1000px;
}

.ay-cat-wrpper img {
  width: 100%;
}

.ay-cat-wrpper .ay-sec--t,
.ay-cat-wrpper .ay-mt {
  margin-top: 6rem;
}

.ay-cat-wrpper .link_over:hover {
  color: #333;
}

@media screen and (max-width: 639px) {
  .ay-cat-wrpper .ay-sec--t p {
    margin: 1rem auto;
    width: 94%;
  }

  .ay-cat-wrpper .ay-sec--t ul {
    margin: 0 auto;
    width: 94%;
  }

  .ay-cat-wrpper .ay-sec--t ul li p {
    width: 100%;
  }
}

/* 25/12/18 バナー＋説明表示:end */

/* 26/06/11 カテゴリー説明部分改修: start  */

.ay-category {
    margin: 60px auto 0;
    max-width: 1200px;
}

.ay-category-intro {}
.ay-category-intro__title {}
.ay-category-intro__content {}

.ay-category-intro__content p + p {
    margin-top: 1rem;
}

.ay-category-intro + .ay-category-section,
.ay-category-section + .ay-category-section {
    margin-top: 130px;
}

.ay-category-section {}
.ay-category-section__title {
    text-align: center;
}
.ay-category-section__title {
    border-bottom: 1px solid #333333;
    padding-bottom: 1rem;
    text-align: left;
}
.ay-category-section__content {}

.ay-category-section__content img {
    height: auto;
    width: 100%;
}

.ay-category-section__title +.ay-category-section__content {
    margin-top: 50px;
}

.ay-grid {
    display: grid;
    gap: 30px 20px;
    margin: 0 auto;
}

.ay-grid--1col {
    grid-template-columns: repeat(1, 1fr);
}

.ay-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.ay-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.ay-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

.ay-card {
    margin: 0 auto;
}

.ay-card__image {
    margin: 0;
}

.ay-card__title {
    margin: 0;
}

.ay-card__text {
    margin: 0;
}

.ay-card__image + .ay-card__title {
    margin-top: 10px;
}

.ay-card__title + .ay-card__text {
    margin-top: 10px;
}

.ay-link:hover,
.ay-link:visited {
    color: #333333;
}

/*
.ay-link:hover{
    opacity: 0.7;
    transition: 0.4s;
}
*/
.ay-media {
    display: grid;
    gap: 30px 20px;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
}

.ay-media + .ay-media{
    margin-top: 30px;
}

.ay-media__image {}
.ay-media__body {}
.ay-media__title {
    margin: 0;
}
.ay-media__text {
    margin: 0;
}

.ay-media__title + .ay-media__text {
    margin-top: 20px;
}

.ay-media__text + .ay-media__text {
    margin-top: 1rem;
}


@media screen and (max-width: 639px) {
  .ay-category {
      margin-top: calc(50/750*100%);
      max-width: calc(690/750*100%);
  }

  .ay-category-intro + .ay-category-section,
  .ay-category-section + .ay-category-section {
      margin-top: calc(130/750*100%);
  }

  .ay-category-section__title + .ay-category-section__content {
      margin-top: calc(70/750*100%);
  }

  .ay-grid {
      gap: 4vw;
  }

  .ay-card__image + .ay-card__title {
      margin-top: calc(8/750*100%);
  }

  .ay-card__title + .ay-card__text {
      margin-top: calc(10/750*100%);
  }

  .ay-grid--1col {
      gap: 6vw;
  }

  .ay-grid--2col,
  .ay-grid--3col,
  .ay-grid--4col {
      grid-template-columns: repeat(2, 1fr);
  }

  .ay-media {
      gap: 4vw;
      grid-template-columns: repeat(1, 1fr);
  }

  .ay-media + .ay-media{
      margin-top: calc(60/750*100%);
  }

  .ay-media__title + .ay-media__text {
      margin-top: calc(10/750*100%);
  }

  .ay-media__text + .ay-media__text {
      margin-top: calc(10/750*100%);
  }

}


/* 26/06/11 カテゴリー説明部分改修: end */