@import url(./common/_variable.css);

/* top */
/* ============================================ */

.top {
  background-color: var(--main_c);
}

main {
  overflow: hidden;
}

.area__get {
  position: relative;
  margin-top: -7%;
  padding: 0px 20px 0;

  @media (max-width: 896px) {
    padding: 0px 20px 0;
  }

  @media (max-width: 480px) {
    margin-top: 0;
  }
}

.block__get {
  background-color: #FFF;
  border-radius: 20px;
  padding: 40px;
  text-align: center;

  @media (max-width: 896px) {
    padding: 20px;
  }
}

.block__get--column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2vw;
  padding: 36px 0 0;

  @media (max-width: 896px) {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    padding: 16px 0 0;
  }
}

.btn_shop {

  a,
  span {
    display: block;
    background-color: var(--point_c);
    color: var(--main_c);
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1em;
    padding: 20px 0;

    &:hover {
      background-color: var(--hover_c);
      opacity: 1;
    }

    @media (max-width: 1281px) {
      font-size: clamp(2.0rem, 3.125vw, 3.2rem);
    }

    &.comingsoon {
      background-color: #CCC;
      color: #888;
      cursor: default;
      position: relative;

      &::after {
        content: "Coming soon";
        color: #FFF;
        font-size: 1.8rem;
        line-height: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

.btn_leaf {
  a {
    display: block;
    background-color: var(--main_c);
    color: #fff;
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1em;
    padding: 20px 0;

    &:hover {
      background-color: var(--hover_c);
      opacity: 1;
    }

    @media (max-width: 1281px) {
      font-size: clamp(2.0rem, 3.125vw, 3.2rem);
    }
  }
}

.block__get--img {
  padding: 20px 0 0;
}

#challenge {
  position: relative;
}

.bg-img01 {
  width: 400px;
  position: absolute;
  left: -5%;
  top: -7%;
  z-index: -1;
  overflow: hidden;

  @media (max-width: 896px) {
    top: 0;
    width: 150px;
  }
}

.bg-img02 {
  width: 360px;
  position: absolute;
  right: -5%;
  top: -60%;
  z-index: -1;

  @media (max-width: 896px) {
    width: 150px;
    top: -20%;
  }
}



.area__challenge {
  padding: 80px 0 0;

  @media (max-width: 896px) {
    padding: 30px 0 0;
  }

  .area__challenge--ttl {
    text-align: center;
    position: relative;

    @media (max-width: 896px) {
      padding: 0 20px;
    }
  }

}

.area__challenge-link {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1200px;
  width: 90%;
  margin: 60px auto;

  @media (max-width: 480px) {
    flex-direction: column;
    margin: 30px auto;
  }
}

.area__challenge-link li {
  margin-right: 30px;

  @media (max-width: 480px) {
    margin-right: 0;
    margin-bottom: 40px;
    width: 80%;
  }
}

.area__challenge-link li:last-child {
  margin-right: 0;
  margin-top: 20px;

  @media (max-width: 480px) {
    /* margin-bottom: 0; */
    margin-top: 0;
  }
}

/* .area__challenge-link li a img {
  height: 460px;

  @media (max-width: 1280px) {
    height: auto;
  }
} */

.area__challenge-book {
  background: var(--point_c);
  padding: 40px 0;
  position: relative;
}

.area__challenge-book a {
  position: absolute;
  right: 20%;
  top: 50%;
  transform: translateY(-50%);

  @media (max-width: 1280px) {
    right: 5%;
  }

  @media (max-width: 622px) {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 5%;
    transform: translate(-50%, 0);
  }
}

.area__challenge-book a img {
  width: 170px;

  @media (max-width: 956px) {
    width: 130px;
  }

  @media (max-width: 622px) {
    width: 170px;
  }
}

.area__challenge-book-block {
  color: var(--main_c);
  text-align: center;

  @media (max-width: 622px) {
    margin-bottom: 250px;
  }
}

.area__challenge-book-block h3 {
  font-weight: 900;
  font-size: clamp(3rem, 3.59vw, 4.6rem);
  line-height: 1.4;
  margin-bottom: 20px;
}

.area__challenge-book-block p {
  font-weight: 900;
  font-size: clamp(1.6rem, 1.5vw, 2rem);
}


#company {
  position: relative;
}

.area__company {
  padding: 0 20px 80px;

  @media (max-width: 896px) {
    padding: 0 20px 30px;
  }

  .btn_company {
    a {
      background-color: var(--point_c);
      color: var(--main_c);

      &:hover {
        background-color: var(--hover_c);
        opacity: 1;
      }
    }
  }
}

.block__company {
  background-color: #FFF;
  padding: 40px;
  text-align: center;
  margin-top: 80px;

  /* @media (max-width: 896px) {
    padding: 20px;
    margin-top: 30px;
  } */

  .list_logo {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px 0;

    .item_logo {
      padding: 25px;

      @media (max-width: 896px) {
        padding: 15px 10px;
      }
    }
  }
}

.block__company::before {
  content: '';
  background-image: url(../images/top/cloud_left.png);
  background-size: contain;
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  position: absolute;
  top: -4%;
  left: 0%;
  z-index: -1;

  @media (max-width: 896px) {
    width: 200px;
  }
}

.block__company.bottom {
  position: relative;
}

.block__company.bottom::before {
  content: '';
  background-image: url(../images/top/cloud_right.png);
  background-size: contain;
  width: 400px;
  height: 280px;
  background-repeat: no-repeat;
  position: absolute;
  top: -20%;
  right: -26%;
  left: auto;
  z-index: -1;

  @media (max-width: 896px) {
    width: 270px;
    left: auto;
    top: -15%;
  }
}

.area__companylink {
  padding: 80px 20px;

  @media (max-width: 896px) {
    padding: 30px 20px;
  }
}

.btn_company {
  padding: 80px 0 0;

  @media (max-width: 896px) {
    padding: 30px 0 0;
  }

  @media (max-width: 480px) {
    padding: 80px 0 0;
  }

  a {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px;

    @media (max-width: 480px) {
      text-align: left;
    }

    .box_txt {
      font-size: 3.6rem;
      line-height: 1.4em;
      font-weight: 700;
      display: inline-block;

      @media (max-width: 1281px) {
        font-size: clamp(1.8rem, 1.875vw, 2.4rem);
      }
    }

    .box_mark {
      width: 100px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;

      @media (max-width: 1280px) {
        width: 80px;
        right: 5px;
      }

    }

    .box_mark02 {
      width: 250px;
      position: absolute;
      top: -50%;
      left: -30px;

      @media (max-width: 1280px) {
        width: 180px;
        left: -15px;
      }

      @media (max-width: 480px) {
        width: 120px;
        left: -15px;
        top: -80%;
      }
    }
  }

  a:hover {
    background-color: var(--point_c);
    opacity: 0.7;
  }
}


.area__present {
  padding: 80px 20px;
  background: var(--point_c);

  @media (max-width: 896px) {
    padding: 30px 20px;
  }

  .btn_company {
    a {
      background-color: var(--main_c);
      color: var(--point_c);

      &:hover {
        background-color: var(--hover_c);
        opacity: 1;
      }
    }
  }
}

.block__present--ttl {
  display: grid;
  grid-template-columns: 38% 62%;

  @media (max-width: 896px) {
    grid-template-columns: 1fr;
  }
}

.ttl_present {
  color: var(--main_c);
  font-weight: 900;
  font-size: clamp(3.2rem, 4.68vw, 6rem);
  line-height: 1.1em;
}

.txt_present {
  color: var(--main_c);
  font-size: clamp(1.6rem, 1.5vw, 2rem);
  line-height: 1.9em;
  padding: 30px 0 10px;

  @media (max-width: 896px) {
    padding: 16px 0 10px;
    text-align: justify;
    line-height: 1.6em;
  }
}


.block__present--list {
  background-color: #FFF;
  padding: 40px;

  @media (max-width: 1281px) {
    padding: 3.125vw;
  }

  /* .list_persent .item_present:last-child {
    grid-column: span 2;

    @media (max-width: 480px) {
      grid-column: unset;
    }
  } */

  /* .list_persent .item_present:last-child .inner {
    margin-top: 40px;

    @media (max-width: 480px) {
      margin-top: 0;

    }
  } */

  /* .list_persent .item_present:last-child .inner img {
    height: 200px;

    @media (max-width: 480px) {
      height: 100px;
    }
  } */

  .list_persent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 480px) {
      grid-template-columns: repeat(2, 1fr);
    }

    .item_present {
      padding: 0 20px;

      @media (max-width: 1281px) {
        padding: 0 1.562vw;
      }

      .inner {
        padding: 20px 0;

        @media (max-width: 1281px) {
          padding: 1.562vw 0;
        }

        img {
          width: 100%;
          height: 240px;
          object-fit: contain;

          @media (max-width: 896px) {
            height: 100px;
          }
        }
      }
    }
  }
}

.c01,
.c02,
.c04,
.c05,
.c07,
.c08,
.c10,
.c11,
.c13,
.c14 {
  border-right: var(--main_c) solid 1px;
}

.c01,
.c02,
.c03,
.c04,
.c05,
.c06,
.c07,
.c08,
.c09,
.c10,
.c11,
.c12 {
  .inner {
    border-bottom: var(--main_c) solid 1px;
  }
}

@media (max-width: 480px) {

  .c01,
  .c03,
  .c05,
  .c07,
  .c09,
  .c11,
  .c13,
  .c15 {
    border-right: var(--main_c) solid 1px;
  }

  .c02,
  .c04,
  .c06,
  .c08,
  .c10,
  .c12,
  .c14 {
    border-right: none;
  }

  .c01,
  .c02,
  .c03,
  .c04,
  .c05,
  .c06,
  .c07,
  .c08,
  .c09,
  .c10,
  .c11,
  .c12,
  .c13,
  .c14 {
    .inner {
      border-bottom: var(--main_c) solid 1px;
    }
  }
}


.block__obo {
  text-align: center;
  padding: 10px;
  background-color: #D82B18;
  max-width: 1200px;
  margin: 60px auto;

  a {
    display: block;
    line-height: 1.4;
    color: var(--point_c);
    font-weight: 900;
    font-size: clamp(3.2rem, 4.68vw, 6rem);

    &:hover {
      /* background-color: var(--hover_c); */
      opacity: 0.7;
    }
  }

  .txt_obo {
    font-size: clamp(1.8rem, 1.875vw, 3rem);
    font-weight: 700;
    color: #FFF;

    @container style(--landscape) {
      line-height: 1.4em;
    }
  }
}

.btn_obo {
  display: inline-block;
}

.block__yoko {
  background-color: #FFF;
  padding: 40px;
  margin-top: 100px;

  @media (max-width: 896px) {
    padding: 20px;
    margin-top: 30px;
  }
}

.block__yoko--ttl {
  text-align: center;

  .inner {
    position: relative;

    &::before,
    &::after {
      content: "";
      display: block;
      height: 2px;
      width: 10vw;
      background-color: var(--main_c);
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    &::before {
      left: 12%;
    }

    &::after {
      right: 12%;
    }

    .ttl_yoko {
      font-weight: 900;
      font-size: clamp(3rem, 3.59vw, 4.6rem);
      line-height: 1em;
      letter-spacing: 0.2em;
    }
  }
}

.item_yoko {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 8px;
  padding: 30px 0 0;

  @media (max-width: 896px) {
    padding: 16px 0 0;
  }

  .box_dt {
    background-color: var(--main_c);
    color: #FFF;
    font-size: clamp(1.6rem, 1.5vw, 2rem);
    font-weight: 700;
    line-height: 1em;
    display: grid;
    place-content: center;
  }

  .box_dd {
    padding: 5px 0;
  }
}

.kome {
  text-indent: -1em;
  padding-left: 1em;
}

.block__yoko--txt {
  padding: 30px 0 0;

  @media (max-width: 896px) {
    padding: 16px 0 0;
  }

  p {
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: justify;
  }

  a {
    color: #D82B18;
    border-bottom: #D82B18 solid 1px;

    &:hover {
      color: var(--hover_c);
      border-bottom: var(--hover_c) solid 1px;
      opacity: 1;
    }
  }
}