@charset "UTF-8";

/*
========================================
common
========================================
*/
:root {
  --white: #ffffff;
  --red: #EC0606;

  --main-textColor:#333333;
  --note-textColor: #717171;
}
em {
  font-style: normal;
}
.d-contents {
  display: contents;
}
.hide {
  display: none !important;
}

/* ========================
rakuma css override
======================== */
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
  @media (min-width: 768px) {
    contain-intrinsic-size: auto 200px;
  }
}

/*
========================================
mainVisual
========================================
*/
/* SP */
.mainVisual {
  margin: 0 auto;
  .mainVisual__captions {
    background-color: #eaf9ee;
  }
  .mainVisual__captionInner {
    padding: 24px 0 46px;
    width: calc(345 / 390 * 100%);
    margin-inline: auto;
    display: grid;
    row-gap: 18px;
    text-align: center;
  }
  /* PC */
  @media (min-width: 768px) {
    .mainVisual__inner {
      display: flex;
      justify-content: center;
      overflow: hidden;
      background-color: #FF9E6E;
    }
    .mainVisual__imagePC {
      width: fit-content;
      max-width: fit-content;
    }
    .mainVisual__captionInner {
      padding: 38px 0 60px;
      max-width: 838px;
      font-size: 16px;
      row-gap: 20px;
    }
  }
}

/*
========================================
content
========================================
*/
.content {

  .js-slideInAnimetion {
    opacity: 0;
    &.--fadeIn {
      transform: translateY(50px);
      animation: fadeInBottomMove 1.2s forwards;
    }
    &.--fadeIn.--nofade {
      opacity: 1;
      transform: translateY(0%);
      animation: none;
    }
  }

  .voice {
    background-color: #eaf9ee;

    .voice__inner {
      width: calc(360 / 390 * 100%);
      margin-inline: auto;
      padding: 24px 0;
    }
    .voice__title {
      font-size: 20px;
      font-weight: 600;
      color: #006638;
      text-align: center;
      letter-spacing: 0.01em;
      margin-bottom: 5px;
    }
    .voice__list {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 24px;
    }
    .voice__listItem {
      overflow: hidden;
      background-color: var(--white);
      position: relative;
      border-radius: 10px;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0px;
        width: 6px;
        background-color: #58A058;
      }
      &:has(.voice__listWrapper[hidden]) {
        display: none;
      }
    }
    .voice__listWrapper {
      position: relative;
      z-index: 0;
      padding: 24px;
      cursor: pointer;
    }
    .voice__listItemTitle {
      font-weight: 600;
      padding-bottom: 18px;
    }
    .voice__listItemLink {
      display: block;
      &:active,
      &:hover {
        opacity: 1;
        transition: none;
      }
      &::after {
        content: "";
        position: absolute;
        background-color: var(--white);
        opacity: 0;
        inset: 0;
        z-index: 1;
        will-change: opacity, transition;
      }
      &:active::after {
        opacity: 0.3;
        transition: 0.3s ease-in-out;
      }
    }
    .voice__listItemText {
      font-size: 12px;
      margin-bottom: 30px;
      padding-right: 24px;
      position: relative;
      z-index: -1;
      pointer-events: none;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 2px;
        margin: auto;
        width: 8px;
        height: 8px;
        box-sizing: border-box;
        border-bottom: 1px solid #58A058;
        border-right: 1px solid #58A058;
        transform: rotate(-45deg);
      }
    }
    .voice__listItemLabels {
      display: flex;
      justify-content: start;
      align-items: center;
      column-gap: 8px;
    }
    .voice__listItemLabel,
    .voice__listItemDate {
      display: block;
      font-size: 10px;
      line-height: 1;
      padding: 6px 12px;
      color: var(--white);
      letter-spacing: 0.01em;
      &.--orange {
        background-color: #FF6D00;
      }
      &.--blue {
        background-color: #6C92FB;
      }
      &.--yellow {
        background-color: #D6BB49;
      }
      &.--pink {
        background-color: #C96F8B;
      }
      &.--green {
        background-color: #52AF9D;
      }
    }
    .voice__listItemLabel {
      min-width: 64px;
      text-align: center;
    }
    .voice__listItemDate {
      color: var(--main-textColor);
      padding: 0;
    }
    .voice__pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 24px;
      column-gap: 12px;
    }
    .voice__pageItem {
      width: 28px;
      height: 28px;
    }
    .voice__pageItemLink {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      font-size: 10px;
      line-height: 1;
      opacity: 1;
      will-change: opacity;

      &.--prev,
      &.--next {
        background-color: #58A058;
        position: relative;
        overflow: hidden;
        text-indent: -9999px;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          margin: auto;
          width: 8px;
          height: 8px;
          box-sizing: border-box;
          border-bottom: 1px solid var(--white);
          border-right: 1px solid var(--white);
        }
        &[disabled] {
          background-color: #CAF1D5;
          pointer-events: none;
        }
      }
      &.--prev {
        &::after {
          transform: rotate(135deg) translateY(-2px) translateX(-2px);
        }
      }
      &.--next {
        &::after {
          transform: rotate(-45deg) translateY(-2px) translateX(-2px);
        }
      }
      &[aria-current="page"] {
        font-weight: 600;
        pointer-events: none;
      }

      &:active {
        opacity: 0.7;
        transition: 0.3s ease-in-out;

        &[data-page] {
          background-color: #58A058;
          color: var(--white);
          font-weight: 600;
          opacity: 1;
        }
      }
      /* PC */
      @media (min-width: 768px) {
        &:hover {
          opacity: 0.7;
          transition: 0.3s ease-in-out;
          &[data-page] {
            background-color: #58A058;
            color: var(--white);
            font-weight: 600;
            opacity: 1;
          }
        }
      }
    }

    /* PC */
    @media (min-width: 768px) {
      .voice__inner {
        max-width: 838px;
        padding: 30px 0 36px;
      }
      .voice__title {
        font-size: 28px;
        line-height: 1;
        margin-bottom: 5px;
      }
      .voice__list {
        row-gap: 30px;
      }
      .voice__listWrapper {
        padding: 36px;
      }
      .voice__listItemTitle {
        font-size: 16px;
      }
      .voice__listItemLink {
        &:hover::after {
          opacity: 0.3;
          transition: 0.3s ease-in-out;
        }
      }
      .voice__listItemText {
        font-size: 16px;
        padding-right: 30px;
        &::after {
          width: 10px;
          height: 10px;
        }
      }
      .voice__listItemLabel,
      .voice__listItemDate {
        font-size: 12px;
      }
      .voice__pagination {
        padding-top: 30px;
      }
    }
  } /* .voice */

  .impro {
    content-visibility: auto;
    contain-intrinsic-size: auto 1000px;
    .impro__inner {
      width: calc(360 / 390 * 100%);
      max-width: 600px;
      margin-inline: auto;
      padding: 24px 0;
    }
    .impro__figure {
      margin-bottom: 20px;
      position: relative;
      width: fit-content;
      margin-inline: auto;
    }
    .impro__figureCaption {
      position: absolute;
      inset: 0;
      color: #58A058;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      padding-top: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .impro__mvImg {
      width: calc(288 / 360 * 100%);
      max-width: 398px;
      margin-inline: auto;
    }
    .impro__title {
      font-size: 20px;
      font-weight: 600;
      color: #006638;
      text-align: center;
      letter-spacing: 0.01em;
      margin-top: 24px;
    }
    .impro__list {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 12px;
    }
    .impro__listItem {
      display: grid;
      grid-template-columns: 40px auto;
      column-gap: 18px;
      padding: 24px;
      background-color: #eaf9ee;
      border-radius: 10px;
    }
    .impro__listItemTitle {
      font-size: 13px;
      font-weight: 600;
      padding-bottom: 8px;
      letter-spacing: 0.01em;
      .impro__listItemTitle--step {
        padding-right: 4px;
      }
    }
    .impro__listItemCaption {
      font-size: 13px;
    }

    /* PC */
    @media (min-width: 768px) {
      contain-intrinsic-size: auto 1200px;

      .impro__inner {
        padding: 36px 0;
      }
      .impro__figure {
        margin-bottom: 48px;
      }
      .impro__figureCaption {
        font-size: 16px;
      }
      .impro__mvImg {
        width: 398px;
      }
      .impro__title {
        font-size: 28px;
        line-height: 1;
        margin-top: 52px;
      }
      .impro__listItem {
        grid-template-columns: 40px 112px auto;
        column-gap: 18px;
        padding: 24px 48px;
        align-items: center;
        > dl {
          display: contents;
        }
      }
      .impro__listItemTitle {
        font-size: 16px;
        padding-bottom: 0px;
        .impro__listItemTitle--step {
          padding-right: 0px;
          display: block;
        }
      }
      .impro__listItemCaption {
        font-size: 16px;
        padding-left: 4px;
      }
    }
  } /* .impro */

  .request {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
    background-color: #eaf9ee;
    .request__inner {
      width: calc(360 / 390 * 100%);
      margin-inline: auto;
      padding: 24px 0;
    }
    .request__title {
      font-size: 20px;
      font-weight: 600;
      color: #006638;
      text-align: center;
      letter-spacing: 0.01em;
      margin-top: 24px;
    }
    .request__captions {
      display: grid;
      row-gap: 18px;
      text-align: center;
    }

    /* PC */
    @media (min-width: 768px) {
      contain-intrinsic-size: auto 500px;
      .request__inner {
        padding: 36px 0;
      }
      .request__title {
        font-size: 28px;
        line-height: 1;
        margin-top: 36px;
      }
      .request__captions {
        font-size: 16px;
        row-gap: 24px;
      }
    }
  } /* .request */

  .campaign {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;

    .campaign__inner {
      padding: 14px 0 20px calc(16 / 390 * 100%);
    }
    .campaign__wrapper {
      border-top: 1px solid #EBEBEB;
      border-left: 1px solid #EBEBEB;
      border-bottom: 1px solid #EBEBEB;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      padding: 8px 0px 10px 0px;

      .js-scroll {
        /* overlayscrollbars.js */
        .os-scrollbar-horizontal {
          padding-left: 48px;
          padding-right: 0px;
          height: 10px;
        }
        .os-scrollbar-track {
          background-color: #EBEBEB;
          border-radius: 4px;
        }
        .os-scrollbar-handle {
          background-color: #B6B6B6;
          border-radius: 4px;
        }
        /* overlayscrollbars.js */
        .js-isScrolling {
          a {
            pointer-events: none;
          }
        }
      }
    }
    .campaign__list {
      display: flex;
      column-gap: 10px;
      padding-bottom: 20px;
      padding-left: 8px;
      &::after {
        content: "";
        padding-right: 2px;
      }
    }
    .campaign__listItem {
      width: calc((100cqw - 30px) / 3.6);
      flex-shrink: 0;
    }

    /* PC */
    @media (min-width: 768px) {
      contain-intrinsic-size: auto 300px;

      .campaign__inner {
        max-width: 928px;
        margin-inline: auto;
        padding: 36px 16px;
      }
      .campaign__wrapper {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        padding: 16px 0px;

        .js-scroll {
          /* overlayscrollbars.js */
          .os-scrollbar-horizontal {
            padding-left: 16px;
            padding-right: 16px;
          }
          /* overlayscrollbars.js */
        }
      }
      .campaign__list {
        column-gap: 24px;
        padding-bottom: 20px;
        padding-left: 16px;
        &::after {
          padding-right: 1px;
        }
        /* overlayscrollbars.js */
        [data-overlayscrollbars-viewport~="overflowXHidden"] & {
          padding-bottom: 0px;
          padding-left: 0px;
          justify-content: center;
          &::after {
            display: none;
          }
        }
        /* overlayscrollbars.js */
      }
      .campaign__listItem {
        width: 150px;
      }
    }
  } /* .campaign */

  .snsIcons {
    content-visibility: auto;
    contain-intrinsic-size: auto 100px;

    .snsIcons__inner {
      padding: 24px 0;
    }
    .snsIcons__list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      column-gap: 24px;
      width: fit-content;
      margin-inline: auto;
    }
    .snsIcons__listLink {
      width: 30px;
      display: block;
    }

    /* PC */
    @media (min-width: 768px) {
      contain-intrinsic-size: auto 200px;
      .snsIcons__inner {
        padding: 36px 0;
      }
      .snsIcons__list {
        column-gap: 36px;
      }
      .snsIcons__listLink {
        width: 60px;
      }
    }
  } /* .snsIcons */

} /* .content */

@keyframes fadeInBottomMove {
  0% {
    opacity: 0;
    transform: translateY(80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}