@charset "Shift_JIS";

/*==========================================
  Inkanless index page style（Shift_JISシフトジス）
=============================================*/
/* list01 */
.list01 {
  --list01-sp-spacing-01: 20px;
  display: grid;
  grid-template-rows: auto;
  row-gap: var(--spacing-40);
}
.list01__item {
  display: flex;
}
.list01__detail {
  background-color: var(--color-white);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.list01__title {
  font-size: 2rem;
  font-weight: 700;
}
.list01__description {
  font-size: 1.6rem;
  margin-top: 16px;
}
/* .copy01 */
.copy01 {
  font-size: 1.4rem;
  margin-top: 56px;
  text-align: right;
}
@media not print {
  @media not all and (min-width: 768px) {
    .list01__item {
      display: flex;
      flex-direction: column;
    }
    .list01__detail {
      order: 2;
    }
    .list01__item:nth-child(odd) .list01__detail {
      margin: -25px 0 0 var(--list01-sp-spacing-01);
    }
    .list01__item:nth-child(even) .list01__detail {
      margin: -29px var(--list01-sp-spacing-01) 0 0;
    }
    .list01__image {
      order: 1;
    }
    .list01__item:nth-child(odd) .list01__image {
      margin-right: var(--list01-sp-spacing-01);
    }
    .list01__item:nth-child(even) .list01__image {
      margin-left: var(--list01-sp-spacing-01);
    }
  }
}
@media all and (min-width: 768px), print {
  .list01 {
    margin-inline: auto;
    max-width: var(--content-main-width);
    row-gap: var(--spacing-56);
    width: 100%;
  }
  .list01__item {
    align-items: flex-end;
  }
  .list01__item:nth-child(odd) {
    padding-right: 102px;
  }
  .list01__item:nth-child(even) {
    padding-left: 102px;
  }
  .list01__detail {
    padding: 40px;
    width: 100%;
  }
  .list01__image {
    flex-shrink: 0;
  }
  .list01__item:nth-child(odd) .list01__detail {
    margin: 0 0 41px -118px;
    order: 2;
  }
  .list01__item:nth-child(even) .list01__detail {
    margin: 0 -118px 25px 0;
  }
  .list01__item:nth-child(odd) .list01__image {
    order: 1;
  }
  .list01__title {
    font-size: 2.4rem;
  }
  .list01__description {
    font-size: 1.8rem;
    margin-top: 20px;
  }
  /* .copy01 */
  .copy01 {
    margin: 80px auto 0;
    max-width: var(--content-main-width);
    width: 100%;
  }
}