.pdf-icon {
  width: 50px;
}

.post-link {
  color: black;
  text-decoration: underline;
  
  span {
    display: block;
    width: fit-content;
    margin: 0 auto;
  }
}

.single-pagination {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  width: 300px;
  margin: 0 auto;
  .pagination-prev {
    a {
      position: relative;
      color: black;
      display: block;
      width: 100px;

      &::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -28px;
        display: block;
        width: 24px;
        height: 24px;
        background-color: #f48f19;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
      }
    }
  }

  .pagination-next {
    a {
      position: relative;
      color: black;
      display: block;
      width: 100px;

      &::before {
        content: "";
        position: absolute;
        top: -2px;
        right: -28px;
        display: block;
        width: 24px;
        height: 24px;
        background-color: #f48f19;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
      }
    }
  }
}

.recent-post {
  width: 300px;
  margin: 0 auto;

  >p {
    text-align: center;
    background-color: #f48f19;
    font-family: "sawarabi-gothic";
    font-size: 16px;
    font-weight: 400;

    span {
      color: #fff;
      font-weight: 700;
    }
  }

  ul {
    overflow: hidden;
    width: 100%;
    padding: 0;
    

    p {
      width: 100%;
    }

    li {
      margin: 0;
      padding: 0;
      width: 100%;
      border-color: #f48f19;
      border-style: solid;
      border-right-width: 2px;
      border-bottom-width: 2px;
      border-left-width: 2px;

      a {
        font-family: "notosans-regular";
        color: black;
        text-decoration: underline;
      }
    }
  }
}

main {
  overflow: hidden;

  .hero-image {
    position: relative;
    width: 100%;
    overflow: clip;

    &:has(img) {
      background-image: none;
    }

    p {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "shirokuma";
      background-size: 100% 100%;

      &::before {
        content: "";
        display: block;
        background-image: url("../images/nikukyu/hukidashi-foot-2.webp");
        background-size: 100% 100%;
        transform: scaleX(-1);
      }

      &::after {
        content: "";
        display: block;
        background-image: url("../images/nikukyu/hukidashi-foot-2.webp");
        background-size: 100% 100%;
      }
    }

    img {
      position: absolute;
      top: 70%;
      left: 50%;

      display: block;
      width: 150%;
      height: 150%;
      object-fit: cover;
      transform: translate(-50%, -50%);
    }
  }

  .content-wrapper {
    width: 100%;
    height: auto;

    .content {
      h2 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-family: "sawarabi-gothic";

        &:before {
          content: "";
          background-size: cover;
        }

        &:after {
          content: "";
          background-size: cover;
        }
      }

      &.result-content {
        h2 {
          &:before {
            aspect-ratio: 32/49;
            background-image: url("../images/maneki/maneki-sil.png");
          }

          &:after {
            aspect-ratio: 32/49;
            background-image: url("../images/maneki/maneki-sil.png");
          }
        }
      }

      &.activity-content {
        h2 {
          &:before {
            aspect-ratio: 64/52;
            background-image: url("../images/silhouette/silhouette-activity.webp");
            transform: scaleX(-1);
          }

          &:after {
            aspect-ratio: 64/52;
            background-image: url("../images/silhouette/silhouette-activity.webp");
          }
        }
      }

      .archive-container {
        h3 {
          text-align: center;
          font-family: "notosans";
        }

        article {
          display: flex;
          flex-direction: column;
          align-items: center;
          border-bottom: 1px solid black;

          &.active {
            .fields-head {
              border-bottom: none;

              &:after {
                transform: scaleY(-1);
              }
            }
          }

          .fields-head {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            font-family: "sawarabi-gothic";
            font-weight: 400;
            cursor: pointer;

            &::after {
              content: "";
              aspect-ratio: 1/1;
              background-color: black;
              clip-path: polygon(93% 73%, 50% 30%, 7% 73%, 0 65%, 50% 15%, 100% 65%);
            }
          }

          .fields-body {
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 0;
            font-family: "sawarabi-gothic";
            transition-duration: 0.3s;

            p {
              display: flex;
              flex-direction: column;
              text-align: center;
            }
          }
        }

        .paging-area {
          text-align: center;
          font-family: "sawarabi-gothic";

          .current {
            color: #f48f19;
          }

          span {
            &.prev {
              margin-right: 3px;
            }
          }
        }
      }
    }
  }

  .p-link {
    text-align: center;
    font-family: "sawarabi-gothic";

    b {
      font-family: "notosans";
    }

    a {
      color: #f9c78c;
    }
  }

  .content-footer {
    display: flex;
    justify-content: center;

    &:before {
      content: "";
      align-self: flex-end;
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
    }

    img {
      aspect-ratio: 199/167;
    }

    &:after {
      content: "";
      align-self: flex-end;
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      transform: scaleX(-1);
    }
  }
}

/* PC */
@media screen and (min-width: 1025px) {
  .hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1440/376;
    padding-top: 5%;
    background-image: url("https://onc-cat.com/wp-content/uploads/hero-active.webp");
    background-size: 100% 100%;

    p {
      display: flex;
      justify-content: center;
      align-items: center;
      width: clamp(300px, 25%, 561px);
      aspect-ratio: 449/168;
      padding: 4% 3% 4% 0%;
      background-image: url("../images/hukidashi.png");

      &::before {
        width: 74px;
        aspect-ratio: 54/50;
      }

      &::after {
        width: 74px;
        aspect-ratio: 54/50;
      }

      span {
        font-size: 32px;
      }
    }
  }

  .content-wrapper {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr auto 1fr;

    .content {
      grid-row: 1;
      grid-column: 1 / span 3;
      justify-self: center;
      width: 35vw;
      margin-top: 5%;

      h2 {
        font-size: 23px;
      }

      ul {
        list-style-type: disc;
      }

      ol {
        list-style-type: decimal;
      }
      
      li {
        list-style-type: inherit;
        list-style-position: inside;
      }

      &.result-content {
        h2 {
          gap: 15px;

          &:before {
            width: 32px;
          }

          &:after {
            width: 32px;
          }
        }
      }

      &.activity-content {
        h2 {
          gap: 20px;

          &:before {
            width: 63px;
          }

          &:after {
            width: 63px;
          }
        }
      }

      .archive-container {
        h3 {
          font-size: 23px;
          margin-top: 10px;
          margin-bottom: 25px;

          span {
            &:first-child {
              margin-right: 20px;
            }
          }
        }

        article {
          &:not(:last-child) {
            margin-bottom: 20px;
          }

          img {
            &.pdf-icon {
              width: 50px;
            }

            &.thumb {
              width: 290px;
            }
          }

          &.active {
            .fields-body {
              padding-bottom: 20px;
            }
          }

          .fields-head {
            font-size: 16px;
            gap: 30px;
            padding-bottom: 20px;

            &::after {
              width: 15px;
            }
          }

          .fields-body {
            gap: 15px;

            p {
              gap: 10px;

              .amount {
                font-size: 36px;
              }
            }
          }
        }

        ul {
          li {
            &:not(:last-child) {
              margin-bottom: 20px;
            }
          }
        }

        .paging-area {
          margin-top: 30px;
          font-size: 32px;
        }
      }
    }
  }

  .p-link {
    grid-row: 2;
    grid-column: 1 / span 3;
    margin-top: 80px;
    margin-bottom: 80px;
    font-size: 32px;

    a {
      text-decoration: underline 1px #f9c78c;
    }
  }

  .content-footer {
    grid-row: 3;
    grid-column: 1 / span 3;
    margin: 0 auto 250px auto;
    width: 80vw;
    gap: 5%;

    img {
      width: 199px;
    }

    &:before {
      aspect-ratio: 393/26;
      background-image: url("../images/nikukyu/foot-activity.webp");
    }

    &::after {
      aspect-ratio: 393/26;
      background-image: url("../images/nikukyu/foot-activity.webp");
    }
  }
}

/* タブレット縦 */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100dvh;
    background-image: url("https://onc-cat.com/wp-content/uploads/hero-active-tab.webp");
    background-size: cover;

    p {
      aspect-ratio: 449/168;
      margin-top: 5dvh;
      padding: 5% 10% 5% 8%;
      background-image: url("../images/hukidashi.png");

      &::before {
        width: 74px;
        aspect-ratio: 54/50;
      }

      &::after {
        width: 74px;
        aspect-ratio: 54/50;
      }

      span {
        font-size: 32px;
      }
    }
  }

  .content-wrapper {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr auto 1fr;

    .content {
      grid-row: 1;
      grid-column: 1 / span 3;
      justify-self: center;
      width: 80%;
      margin-top: 100px;

      h2 {
        font-size: 23px;
      }

      &.result-content {
        h2 {
          gap: 15px;

          &:before {
            width: 32px;
          }

          &:after {
            width: 32px;
          }
        }
      }

      &.activity-content {
        h2 {
          gap: 20px;

          &:before {
            width: 63px;
          }

          &:after {
            width: 63px;
          }
        }
      }

      .archive-container {
        h3 {
          font-size: 23px;
          margin-top: 30px;
          margin-bottom: 60px;

          span {
            &:first-child {
              margin-right: 20px;
            }
          }
        }

        article {
          &:not(:last-child) {
            margin-bottom: 20px;
          }

          img {
            &.pdf-icon {
              width: 50px;
            }

            &.thumb {
              width: 80%;
            }
          }

          &.active {
            .fields-body {
              padding-bottom: 20px;
            }
          }

          .fields-head {
            font-size: 16px;
            gap: 30px;
            padding-bottom: 20px;

            &::after {
              width: 15px;
            }
          }

          .fields-body {
            gap: 15px;

            p {
              gap: 10px;

              .amount {
                font-size: 36px;
              }
            }

            .to-pdf {
              font-size: 12px;
            }
          }
        }

        ul {
          li {
            &:not(:last-child) {
              margin-bottom: 20px;
            }
          }
        }

        .paging-area {
          margin-top: 50px;
        }
      }
    }
  }

  .p-link {
    grid-row: 2;
    grid-column: 1 / span 3;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 24px;

    a {
      text-decoration: underline 1px #f9c78c;
    }
  }

  .content-footer {
    grid-row: 3;
    grid-column: 1 / span 3;
    margin: 0 auto;
    width: 80vw;
    gap: 5%;

    img {
      width: 199px;
    }

    &:before {
      aspect-ratio: 175/27;
      background-image: url("../images/nikukyu/foot-activity-tab.webp");
    }

    &::after {
      aspect-ratio: 175/27;
      background-image: url("../images/nikukyu/foot-activity-tab.webp");
    }
  }
}

/* タブレット横 */
@media screen and (max-width: 1024px) and (min-height: 768px) and (orientation: landscape) {
  .hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1440/500;
    background-image: url("https://onc-cat.com/wp-content/uploads/hero-active.webp");
    background-size: cover;
    background-position: center;

    p {
      aspect-ratio: 449/168;
      margin-top: 5dvh;
      padding: 5% 10% 5% 8%;
      background-image: url("../images/hukidashi.png");

      &::before {
        width: 74px;
        aspect-ratio: 54/50;
      }

      &::after {
        width: 74px;
        aspect-ratio: 54/50;
      }

      span {
        font-size: 32px;
      }
    }
  }

  .content-wrapper {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr auto 1fr;

    .content {
      grid-row: 1;
      grid-column: 1 / span 3;
      justify-self: center;
      width: 80%;
      margin-top: 100px;

      h2 {
        font-size: 23px;
      }

      &.result-content {
        h2 {
          gap: 15px;

          &:before {
            width: 32px;
          }

          &:after {
            width: 32px;
          }
        }
      }

      &.activity-content {
        h2 {
          gap: 20px;

          &:before {
            width: 63px;
          }

          &:after {
            width: 63px;
          }
        }
      }

      .archive-container {
        h3 {
          font-size: 23px;
          margin-top: 30px;
          margin-bottom: 60px;

          span {
            &:first-child {
              margin-right: 20px;
            }
          }
        }

        article {
          &:not(:last-child) {
            margin-bottom: 20px;
          }

          img {
            &.pdf-icon {
              width: 50px;
            }

            &.thumb {
              width: 80%;
            }
          }

          &.active {
            .fields-body {
              padding-bottom: 20px;
            }
          }

          .fields-head {
            font-size: 16px;
            gap: 30px;
            padding-bottom: 20px;

            &::after {
              width: 15px;
            }
          }

          .fields-body {
            gap: 15px;

            p {
              gap: 10px;

              .amount {
                font-size: 36px;
              }
            }

            .to-pdf {
              font-size: 12px;
            }
          }
        }

        ul {
          li {
            &:not(:last-child) {
              margin-bottom: 20px;
            }
          }
        }

        .paging-area {
          margin-top: 50px;
        }
      }
    }
  }

  .p-link {
    grid-row: 2;
    grid-column: 1 / span 3;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 24px;

    a {
      text-decoration: underline 1px #f9c78c;
    }
  }

  .content-footer {
    grid-row: 3;
    grid-column: 1 / span 3;
    margin: 0 auto;
    width: 80vw;
    gap: 5%;

    img {
      width: 199px;
    }

    &:before {
      aspect-ratio: 175/27;
      background-image: url("../images/nikukyu/foot-activity-tab.webp");
    }

    &::after {
      aspect-ratio: 175/27;
      background-image: url("../images/nikukyu/foot-activity-tab.webp");
    }
  }
}

/* モバイル縦 */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .hero-image {
    padding-top: 6dvh;
    height: 100dvh;
    background-image: url("https://onc-cat.com/wp-content/uploads/hero-active-sp.webp");
    background-size: cover;
    background-position: center;

    p {
      gap: 5%;
      margin: 20% auto 0 auto;
      width: 90%;
      aspect-ratio: 305/200;
      background-image: url("../images/hukidashi-sp.png");
      font-size: 23px;

      &::before {
        width: 55px;
        aspect-ratio: 35/32;
      }

      &::after {
        width: 55px;
        aspect-ratio: 35/32;
      }
    }
  }

  .content-wrapper {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr auto 1fr;

    .content {
      grid-row: 1;
      grid-column: 1 / span 3;
      justify-self: center;
      width: 80%;
      margin-top: 100px;

      h2 {
        font-size: 23px;
      }

      &.result-content {
        h2 {
          gap: 15px;

          &:before {
            width: 32px;
          }

          &:after {
            width: 32px;
          }
        }
      }

      &.activity-content {
        h2 {
          gap: 20px;

          &:before {
            width: 63px;
          }

          &:after {
            width: 63px;
          }
        }
      }

      .archive-container {
        h3 {
          font-size: 23px;
          margin-top: 30px;
          margin-bottom: 60px;

          span {
            &:first-child {
              margin-right: 20px;
            }
          }
        }

        article {
          &:not(:last-child) {
            margin-bottom: 20px;
          }

          img {
            &.pdf-icon {
              width: 50px;
            }

            &.thumb {
              width: 80%;
            }
          }

          &.active {
            .fields-body {
              padding-bottom: 20px;
            }
          }

          .fields-head {
            font-size: 16px;
            gap: 30px;
            padding-bottom: 20px;

            &::after {
              width: 15px;
            }
          }

          .fields-body {
            gap: 15px;

            p {
              gap: 10px;

              .amount {
                font-size: 36px;
              }
            }

            .to-pdf {
              font-size: 12px;
            }
          }
        }

        ul {
          li {
            &:not(:last-child) {
              margin-bottom: 20px;
            }
          }
        }

        .paging-area {
          margin-top: 50px;
        }
      }
    }
  }

  .p-link {
    grid-row: 3;
    grid-column: 1 / span 3;
    margin-top: 80px;
    margin-bottom: 80px;
    font-size: 24px;

    span {
      display: block;
    }

    a {
      text-decoration: underline 1px #f9c78c;
    }
  }

  .content-footer {
    grid-row: 4;
    grid-column: 1 / span 3;
    margin: 0 auto 250px auto;
    width: 80vw;
    gap: 5%;

    img {
      width: 55px;
    }

    &:before {
      aspect-ratio: 393/26;
      background-image: url("../images/nikukyu/foot-activity.webp");
    }

    &::after {
      aspect-ratio: 393/26;
      background-image: url("../images/nikukyu/foot-activity.webp");
    }
  }
}

/* モバイル横 */
@media screen and (max-width: 1024px) and (max-height: 767px) and (orientation: landscape) {
  .hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1440/500;
    background-image: url("https://onc-cat.com/wp-content/uploads/hero-active.webp");
    background-size: cover;
    background-position: center;

    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: clamp(300px, 30%, 561px);
      aspect-ratio: 561/210;
      padding: 0% 3% 0% 0%;
      background-image: url("../images/hukidashi.png");
      font-size: 20px;

      &::before {
        width: 55px;
        aspect-ratio: 54/50;
      }

      &::after {
        width: 55px;
        aspect-ratio: 54/50;
      }

      span {
        margin: 0 5px;
      }

      .pc {
        width: 80%;
      }

      .sp {
        display: none;
      }

      .tab {
        display: none;
      }
    }
  }

  .content-wrapper {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr auto 1fr;

    .content {
      grid-row: 1;
      grid-column: 1 / span 3;
      justify-self: center;
      width: 60%;
      margin-top: 100px;

      h2 {
        font-size: 23px;
      }

      &.result-content {
        h2 {
          gap: 15px;

          &:before {
            width: 32px;
          }

          &:after {
            width: 32px;
          }
        }
      }

      &.activity-content {
        h2 {
          gap: 20px;

          &:before {
            width: 63px;
          }

          &:after {
            width: 63px;
          }
        }
      }

      .archive-container {
        h3 {
          font-size: 23px;
          margin-top: 30px;
          margin-bottom: 60px;

          span {
            &:first-child {
              margin-right: 20px;
            }
          }
        }

        article {
          &:not(:last-child) {
            margin-bottom: 20px;
          }

          img {
            &.pdf-icon {
              width: 50px;
            }

            &.thumb {
              width: 80%;
            }
          }

          &.active {
            .fields-body {
              padding-bottom: 20px;
            }
          }

          .fields-head {
            font-size: 16px;
            gap: 30px;
            padding-bottom: 20px;

            &::after {
              width: 15px;
            }
          }

          .fields-body {
            gap: 15px;

            p {
              gap: 10px;

              .amount {
                font-size: 36px;
              }
            }

            .to-pdf {
              font-size: 12px;
            }
          }
        }

        ul {
          li {
            &:not(:last-child) {
              margin-bottom: 20px;
            }
          }
        }

        .paging-area {
          margin-top: 50px;
        }
      }
    }
  }

  .p-link {
    grid-row: 2;
    grid-column: 1 / span 3;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 24px;

    a {
      text-decoration: underline 1px #f9c78c;
    }
  }

  .content-footer {
    grid-row: 3;
    grid-column: 1 / span 3;
    margin: 0 auto;
    width: 80vw;
    gap: 5%;

    img {
      width: 199px;
    }

    &:before {
      aspect-ratio: 175/27;
      background-image: url("../images/nikukyu/foot-activity-tab.webp");
    }

    &::after {
      aspect-ratio: 175/27;
      background-image: url("../images/nikukyu/foot-activity-tab.webp");
    }
  }
}