@charset "UTF-8";
/* --------------------------------------------------
  display
-------------------------------------------------- */
@media screen and (max-width: 767px) {
  .u-pc {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .u-sp {
    display: none !important;
  }
}

/* --------------------------------------------------
  flexbox
-------------------------------------------------- */
.u-flex {
  display: flex;

  &.u-flex--end {
    align-items: end;
  }
}

/* --------------------------------------------------
  text-align
-------------------------------------------------- */
.u-left {
  text-align: left !important;
}

.u-right {
  text-align: right !important;
}

.u-center {
  text-align: center !important;
}

/* --------------------------------------------------
  bg
-------------------------------------------------- */
.c-bg--process {
  background: linear-gradient(180deg, #E4F2EA 64.34%, #ECF8DF 98.32%);
}

.c-bg--kankyo {
  background-color: #ECF8DF;
}

/* --------------------------------------------------
  heading
-------------------------------------------------- */
.c-heading {
  text-align: center;

  &.c-heading--gf {
    font-family: "Mochiy Pop One", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  &.c-heading--lv3 {
    color: #00873B;
    font-size: 1.5rem;
    line-height: 1.5;
  }
}
@media screen and (max-width: 767px) {
  .c-heading {
    &.c-heading--lv3 {
      font-size: calc(23/375*100vw);
    }
  }
}

/* --------------------------------------------------
  sup
-------------------------------------------------- */
sup {
  font-size: .75em;
  vertical-align: super;
  line-height: 0;
  position: relative;
  top: .1em
}

/* --------------------------------------------------
  text
-------------------------------------------------- */
.c-text {
  color: #000000;
  font-feature-settings: 'palt' on;
  font-size: 1rem;
  line-height: 1.8;
  text-align: justify;

  &.c-text--small {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

/* --------------------------------------------------
  btn
-------------------------------------------------- */
.c-btn {
  .c-btn__link {
    display: block;
    transition: all 0.4s;

    &:hover {
      opacity: .7;
    }
  }

  &.c-btn--image {
    max-width: 361px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------
  section
-------------------------------------------------- */
.c-section {
  .c-section__inner {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-bottom: 80px;
    overflow: hidden;
  }
}
@media screen and (max-width: 767px) {
  .c-section {
    max-width: 100%;

    .c-section__inner {
      gap: calc(40/375*100vw);
      padding-bottom: calc(40/375*100vw);
    }
  }
}

/* --------------------------------------------------
  fv
-------------------------------------------------- */
.c-fv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;

  .c-fv__intro {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 768px) {
  .c-fv {
    .c-fv__image {
      width: 100%;
    }
  }
}
@media screen and (max-width: 767px) {
  .c-fv {
    gap: calc(24/375*100vw);

    .c-fv__intro {
      gap: calc(24/375*100vw);
      max-width: 100%;
      padding-left: calc(24/375*100vw);
      padding-right: calc(24/375*100vw);
    }
  }
}

/* --------------------------------------------------
  contents
-------------------------------------------------- */
.c-contents {
  .c-contents__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}
@media screen and (max-width: 767px) {
  .c-contents {
    .c-contents__inner {
      padding-left: calc(24/375*100vw);
      padding-right: calc(24/375*100vw);
      gap: calc(40/375*100vw);
    }
  }
}

/* --------------------------------------------------
  block
-------------------------------------------------- */
.c-block {
  background-color: #FFFFFF;
  border: 3px solid #000000;
  border-radius: 40px;

  + .c-block {
    margin-top: 80px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      background-image: url("/tsunagaru/sugoroku/keycharm/assets/images/icon_arrow.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 62px auto;
      width: 62px;
      height: 30px;
      top: -80px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .c-block__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 40px;
  }

  .c-block__thumb {
    max-width: 210px;
  }

  .c-block__desc {
    max-width: 320px;
  }

  .c-block__hr {
    background-color: #818181;
    margin: 6px 0;
  }

  .c-block__text {
    color: #000000;
    font-feature-settings: 'palt' on;
    font-size: 1.125rem;
    line-height: 1.5;
    padding: 0 6px;
    text-align: justify;
  }
}
@media screen and (max-width: 767px) {
  .c-block {
    .c-block__inner {
      flex-direction: column;
    }
  }
}
@media screen and (max-width: 767px) {
  .c-block {
    border-radius: calc(40/375*100vw);

    + .c-block {
      margin-top: calc(24/375*100vw);

       &::before {
          background-size: calc(62/375*100vw) auto;
          width: calc(62/375*100vw);
          height: calc(30/375*100vw);
          top: calc(-46/375*100vw);
       }
    }

    .c-block__inner {
      gap: calc(10/375*100vw);
      padding: calc(37/375*100vw) calc(19/375*100vw);
    }

    .c-block__thumb,
    .c-block__desc {
      max-width: 100%;
    }

    .c-block__hr {
      margin: calc(10/375*100vw) 0;
    }

    .c-block__text {
      font-size: calc(16/375*100vw);
    }
  }
}

/* --------------------------------------------------
  movie
-------------------------------------------------- */
@media screen and (min-width: 768px) {
  .c-movie {
    position: relative;

    &::before,
    &::after {
      content: "";
      position: absolute;
      background-image: url("/tsunagaru/sugoroku/keycharm/assets/images/illust_07.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 65px auto;
      width: 65px;
      height: 556px;
      top: 67px;
    }

    &::before {
      left: -217px;
    }

    &::after {
      right: -217px;
    }
  }
}
@media screen and (max-width: 767px) {
  .c-movie {
    iframe {
      width: 100%;
    }
  }
}

/* --------------------------------------------------
  yomimono
-------------------------------------------------- */
.c-anchor {
  .c-anchor__list {
    background-color: #FFFFFF;
  }

  .c-anchor__link {
    min-height: 62px;
    position: relative;

    &:hover {
      .c-anchor__link-text {
        color: #00873B;
      }
    }

    &::after {
      background-image: url("/tsunagaru/sugoroku/keycharm/assets/images/icon_arrow_green.svg");
      right: 16px;
    }
  }
}
@media screen and (max-width: 850px) and (min-width: 501px) {
  .c-anchor {
    max-width: 640px;

    .c-anchor__link {
      position: relative;

      &::after {
        position: absolute;
        right: 16px;
      }
    }

    .c-anchor__link-text {
      font-size: 1rem;
      max-width: none;
      padding-left: 16px;
    }
  }
}
@media screen and (max-width: 767px) {
  .c-anchor {
    .c-anchor__link {
      &::after {
        position: absolute;
        right: calc(12/375*100vw);
      }
    }
  }
}

.c-media-block {
  width: 100%;
}
@media screen and (max-width: 850px) and (min-width: 501px) {
  .c-media-block {
    max-width: 640px;

    .c-media-block__heading {
      font-size: 1.5rem;
    }
  }
}

@media screen and (max-width: 850px) and (min-width: 501px) {
  .c-heading--M {
    font-size: 2rem;
  }

  .c-paragraph {
    font-size: 1rem;
  }
}

/* --------------------------------------------------
  deco
-------------------------------------------------- */
.c-deco {
  position: relative;

  &.c-deco--01 {
    &::after {
      background-image: url("/tsunagaru/sugoroku/keycharm/assets/images/illust_01.png");
    }
  }

  &.c-deco--02 {
    &::after {
      background-image: url("/tsunagaru/sugoroku/keycharm/assets/images/illust_02.png");
    }
  }

  &.c-deco--03 {
    &::after {
      background-image: url("/tsunagaru/sugoroku/keycharm/assets/images/illust_03.png");
    }
  }

  &.c-deco--04 {
    &::after {
      background-image: url("/tsunagaru/sugoroku/keycharm/assets/images/illust_04.png");
    }
  }

  &.c-deco--05 {
    &::after {
      background-image: url("/tsunagaru/sugoroku/keycharm/assets/images/illust_05.png");
    }
  }

  &.c-deco--06 {
    &::after {
      background-image: url("/tsunagaru/sugoroku/keycharm/assets/images/illust_06.png");
    }
  }
}
@media screen and (min-width: 768px) {
  .c-deco {
    &::after {
      content: "";
      position: absolute;
      background-repeat: no-repeat;
      background-position: center;
    }

    &.c-deco--01 {
      &::after {
        background-size: 106px auto;
        width: 106px;
        height: 103px;
        bottom: -82px;
        left: -230px;
      }
    }

    &.c-deco--02 {
      &::after {
        background-size: 108px auto;
        width: 108px;
        height: 93px;
        bottom: -88px;
        right: -114px;
      }
    }

    &.c-deco--03 {
      &::after {
        background-size: 211px auto;
        width: 211px;
        height: 118px;
        bottom: -77px;
        left: -229px;
      }
    }

    &.c-deco--04 {
      &::after {
        background-size: 181px auto;
        width: 181px;
        height: 103px;
        bottom: -113px;
        right: -206px;
      }
    }

    &.c-deco--05 {
      &::after {
        background-size: 118px auto;
        width: 118px;
        height: 109px;
        bottom: -113px;
        left: -193px;
      }
    }

    &.c-deco--06 {
      &::after {
        background-size: 124px auto;
        width: 124px;
        height: 219px;
        bottom: -23px;
        right: -54px;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .c-deco {
    &::after {
      content: "";
      position: absolute;
      background-repeat: no-repeat;
      background-position: center;
    }

    &.c-deco--01 {
      &::after {
        background-size: calc(73/375*100vw) auto;
        width: calc(73/375*100vw);
        height: calc(71/375*100vw);
        bottom: -2px;
        left: calc(-10/375*100vw);
      }
    }

    &.c-deco--02 {
      &::after {
        background-size: calc(71/375*100vw) auto;
        width: calc(71/375*100vw);
        height: calc(61/375*100vw);
        bottom: calc(-50/375*100vw);
        right: calc(-10/375*100vw);
      }
    }

    &.c-deco--03 {
      &::after {
        background-size: calc(144/375*100vw) auto;
        width: calc(144/375*100vw);
        height: calc(80/375*100vw);
        bottom: calc(-40/375*100vw);
        left: calc(-26/375*100vw);
      }
    }

    &.c-deco--04 {
      &::after {
        background-size: calc(124/375*100vw) auto;
        width: calc(124/375*100vw);
        height: calc(71/375*100vw);
        bottom: calc(-50/375*100vw);
        right: calc(-10/375*100vw);
      }
    }

    &.c-deco--05 {
      &::after {
        background-size: calc(80/375*100vw) auto;
        width: calc(80/375*100vw);
        height: calc(74/375*100vw);
        bottom: calc(-55/375*100vw);
        left: calc(-21/375*100vw);
      }
    }

    &.c-deco--06 {
      margin-bottom: calc(38/375*100vw);
      &::after {
        background-size: calc(124/375*100vw) auto;
        width: calc(124/375*100vw);
        height: calc(219/375*100vw);
        bottom: calc(-64/375*100vw);
        right: calc(-17/375*100vw);
      }
    }
  }
}