@charset "utf-8";

.p-about__topics03 {
  --mt: 120;
  --pt: 120;
  --pb: 100;
  margin-top: calc(var(--mt) * 1em/16);
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  background-color: var(--gray-bg);
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: calc(530em/16);
    background: linear-gradient(to top, var(--gray-bg) 20%, transparent);
    pointer-events: none;
    transition: opacity .5s var(--ease-out-cubic);
  }
  &.is-show {
    &::after {
      opacity: 0;
    }
  }
  @media screen and (max-width: 880px) {
    --mt: 0;
    --pt: 90;
    --pb: 80;
    &::after {
      height: calc(252em/16);
    }
  }
}
.p-about__topics03Title {
  --topicstitle-main-em-fs: 54;
  --topicstitle-main-em-ls: .12;
  @media screen and (max-width: 880px) {
    --topicstitle-main-em-fs: 37;
  }
  & .c-topicstitle__mainLine.is-small {
    margin-left: .7em;
    @media screen and (max-width: 880px) {
      margin-top: 0.25em;
      margin-left: 0;
    }
  }
}
.p-about__topics03Conversation {
  margin: calc(80em/16) auto 0;
  width: calc(1100/var(--section-width)*100%);
  @media screen and (max-width: 880px) {
    margin-top: calc(50em/16);
    width: 100%;
  }
}
.p-about__topics03List {
  margin-top: calc(182em/16);
  position: relative;
  overflow: hidden;
  @media screen and (max-width: 880px) {
    margin: calc(60em/16) calc(-10/360*100%) 0;
    width: calc(380/360*100%);
  }
}
.p-about__topics03List-inner {
  display: flex;
  flex-wrap: wrap;
  gap: calc(21/var(--section-width)*100%);
  @media screen and (max-width: 1150px) {
    gap: calc(40/var(--section-width)*100%);
  }
  @media screen and (max-width: 880px) {
    flex-direction: column;
    gap: calc(20em/16);
  }
}
.p-about__topics03ListItem {
  position: relative;
  padding: 0 calc(43/var(--section-width)*100%) calc(43/var(--section-width)*100%);
  width: calc(386/var(--section-width)*100%);
  height: auto;
  /* aspect-ratio: 1/1; */
  /* aspect-ratio: 4/5; */
  background-color: #fff;
  border-radius: calc(10em/16);
  overflow: hidden;
  &:where(:nth-child(n+4)) {
    margin-top: calc(21/var(--section-width)*100%);
  }
  @media screen and (max-width: 1150px) {
    width: calc(580/var(--section-width)*100%);
    &:where(:nth-child(n+3)) {
      margin-top: calc(40/var(--section-width)*100%);
    }
  }
  @media screen and (max-width: 880px) {
    margin-top: 0;
    padding: calc(35em/16) calc(35/380*100%);
    width: 100%;
    aspect-ratio: unset;
  }
  & .title {
    padding-top: calc(70/300*100%);
    margin-bottom: calc(36/300*100%);
    @media screen and (max-width: 880px) {
      padding-top: 0;
      margin-bottom: calc(29em/16);
    }
  }
  & .title__num {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: calc(8em/32);
    width: calc(90em/32);
    height: calc(90em/32);
    font-size: calc(32em/16);
    letter-spacing: 0.06em;
    border-radius: 0 0 calc(50em/32) 0;
    background: linear-gradient(to bottom, #ffa601, var(--grad-color02-02));
    color: #fff;
    @media screen and (max-width: 880px) {
      padding-bottom: 0;
      padding-left: calc(4em/21);
      width: calc(65em/21);
      height: calc(60em/21);
      font-size: calc(21em/16);
      border-radius: 0 0 calc(25em/21) 0;
    }
  }
  & .title__txt {
    display: block;
    text-align: center;
    font-size: calc(30em/16);
    letter-spacing: 0.06em;
    @media screen and (max-width: 880px) {
      font-size: calc(22em/16);
    }
  }
  & .title__txtSmall {
    font-size: calc(26em/30);
  }
  & .txt {
    line-height: 1.8;
    letter-spacing: 0.06em;
  }
}
.p-about__topics03ListReadmore {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin-bottom: calc(32/var(--section-width)*100%);
  transition: opacity .5s var(--ease-out-cubic), visibility .5s var(--ease-out-cubic);
  .p-about__topics03.is-show & {
    opacity: 0;
    visibility: hidden;
  }
  @media screen and (max-width: 880px) {
    margin-bottom: 0;
  }
  & .btn {
    --btn-icon-w: 25;
    margin: 0 auto;
    @media screen and (max-width: 880px) {
      --btn-icon-w: 18;
    }
    & .c-btn__bodyIcon {
      position: absolute;
      right: 0;
      margin-right: calc(43em/16);
      @media screen and (max-width: 880px) {
        margin-right: calc(43/320*100%);
      }
    }
  }
}
@media (any-hover: hover) {
  .p-about__topics03ListReadmore {
    & .btn {
      &:is(:hover, :focus-visible) {
        & .c-btn__bodyIcon {
          animation-name: rotateplus;
          animation-duration: 2s;
          animation-iteration-count: infinite;
        }
      }
    }
  }
}

@keyframes rotateplus {
  0% {
    rotate: 0deg;
  }
  9.9% {
    rotate: 0deg;
  }
  10% {
    rotate: 9deg;
  }
  19.9% {
    rotate: 9deg;
  }
  20% {
    rotate: 18deg;
  }
  29.9% {
    rotate: 18deg;
  }
  30% {
    rotate: 27deg;
  }
  39.9% {
    rotate: 27deg;
  }
  40% {
    rotate: 36deg;
  }
  49.9% {
    rotate: 36deg;
  }
  50% {
    rotate: 45deg;
  }
  59.9% {
    rotate: 45deg;
  }
  60% {
    rotate: 54deg;
  }
  69.9% {
    rotate: 54deg;
  }
  70% {
    rotate: 63deg;
  }
  79.9% {
    rotate: 63deg;
  }
  80% {
    rotate: 72deg;
  }
  89.9% {
    rotate: 72deg;
  }
  90% {
    rotate: 81deg;
  }
  99.9% {
    rotate: 81deg;
  }
  100% {
    rotate: 90deg;
  }
}