@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap");
/* Default Options */
/* Media Query */
/**
 * Media Query Mixin
 * @param {string} $mq  - min | max | min-max
 * @param {string} $bp1 - breakpoint key (e.g. "lg")
 * @param {string} $bp2 - breakpoint key (e.g. "xl") for min-max upper bound
 */
/* Transform Font Size */
/* custom property ------------------------ */
:root {
  --contents-inner-padding: max(6vw, 20px);
  --accent-color: rgba(222, 17, 94, 1);
  --space-lg: clamp(120px, 15vw, 240px);
  --space-md: clamp(80px, 10vw, 160px);
  --space-sm: clamp(40px, 5vw, 80px);
  --space-xs: clamp(20px, 3vw, 40px);
  --space-xxs: clamp(10px, 1vw, 20px);
}

/* ---------------------------------------- */
.main-contents {
  position: relative;
  overflow: hidden;
  background-color: #eddacc;
}
.main-contents .page-header-child {
  position: relative;
  z-index: 1;
  background-color: #ead0bd;
}
@media screen and (min-width: 768px) {
  .main-contents:after {
    content: "";
    width: 100%;
    height: 500px;
    display: block;
    background-color: #ead0bd;
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 0;
  }
}

/* ---------------------------------------- */
.anpi-head {
  padding-inline: var(--contents-inner-padding);
  background-color: #ead0bd;
  position: relative;
  z-index: 2;
}
.anpi-head .inner {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
  color: rgb(0, 0, 0);
}
.anpi-head .inner .catch {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5px;
}
.anpi-head .inner .catch span {
  padding: 10px;
  background-color: rgb(255, 255, 255);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
}
.anpi-head .inner p {
  max-width: 560px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
}
.anpi-list {
  margin-block-start: clamp(80px, 10vw, 120px);
  display: flex;
  flex-direction: column;
  row-gap: var(--space-sm);
}
.anpi-list .item {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.anpi-list .item .image {
  border-radius: var(--space-xxs);
  overflow: hidden;
}
.anpi-list .item .inner {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xxs);
}
.anpi-list .item .number {
  font-size: 1.4rem;
  font-family: "Bree Serif", serif;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
}
.anpi-list .item .title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: rgb(0, 0, 0);
}
.anpi-list .item p {
  font-size: 1.4rem;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .anpi-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    column-gap: 40px;
  }
  .anpi-list .item:nth-child(1) {
    grid-area: 1/1/2/2;
  }
  .anpi-list .item:nth-child(2) {
    grid-area: 1/2/2/3;
  }
  .anpi-list .item:nth-child(3) {
    grid-area: 2/1/4/2;
  }
  .anpi-list .item:nth-child(4) {
    grid-area: 2/2/3/3;
  }
  .anpi-list .item:nth-child(5) {
    grid-area: 3/2/4/3;
  }
}
@media screen and (min-width: 992px) {
  .anpi-head {
    padding-inline-start: 0;
  }
  .anpi-head .wrap {
    max-width: 1400px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 50%;
    align-items: center;
    column-gap: var(--space-sm);
  }
  .anpi-head .inner {
    grid-area: 1/2/2/3;
  }
  .anpi-head .inner .catch {
    align-items: start;
  }
  .anpi-head .inner .catch span {
    font-size: 3.6rem;
  }
  .anpi-head .inner p {
    font-size: 1.6rem;
  }
  .anpi-head .image {
    grid-area: 1/1/2/2;
  }
  .anpi-list {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    place-content: center;
    place-items: flex-start;
  }
  .anpi-list .item:nth-child(1) {
    grid-area: 1/1/2/3;
  }
  .anpi-list .item:nth-child(2) {
    grid-area: 1/3/2/5;
  }
  .anpi-list .item:nth-child(3) {
    grid-area: 1/5/2/7;
  }
  .anpi-list .item:nth-child(4) {
    grid-area: 2/1/3/4;
    align-items: end;
  }
  .anpi-list .item:nth-child(4) .inner {
    width: 70%;
  }
  .anpi-list .item:nth-child(5) {
    grid-area: 2/4/3/7;
  }
  .anpi-list .item:nth-child(5) .inner {
    width: 70%;
  }
  .anpi-list .item .inner .title {
    font-size: 2.4rem;
  }
  .anpi-list .item .inner p {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 1280px) {
  .anpi-head .inner .catch span {
    font-size: 5.2rem;
  }
}