@charset "UTF-8";
/* ============================================================================================== */
/* 全体                                                                                           */
/* ===============================================================================================*/
.cd_sp_only {
  display: none !important;
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
  font-weight: inherit;
}
#main ol li {
  text-indent: 0;
  padding-left: 0;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .cd_pc_only {
    display: none !important;
  }
  .cd_sp_only {
    display: block !important;
  }
  br.cd_sp_only,
  span.cd_sp_only,
  img.cd_sp_only {
    display: inline !important;
  }
  article img {
    max-width: none !important;
  }
}
/* ============================================================================================== */
/* HEADLINE                                                                                       */
/* ===============================================================================================*/
#headline {
  padding-top: 50px;
  text-align: center;
  line-height: 0;
}
#headline .title {
  display: inline-block;
  position: relative;
}
#headline .title img {
  width: 320px !important;
  height: auto !important;
}
#headline .title h1 {
  position: relative;
  z-index: 5;
}
#headline .title > img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#headline .summary {
  margin-top: 33px;
  text-align: center;
}
#headline .summary p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #4ca74f;
  font-size: 24px;
  line-height: 30px;
}

@media screen and (max-width: 768px) {
  #headline {
    padding-top: 6.6666666667vw;
  }
  #headline .title img {
    width: 64vw !important;
  }
  #headline .summary {
    margin-top: 6.6666666667vw;
  }
  #headline .summary p {
    font-size: 4.8vw;
    line-height: 6vw;
  }
}
/* ============================================================================================== */
/* FEATURE                                                                                        */
/* ===============================================================================================*/
#feature {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 761px;
  margin: 28px auto 0;
  padding-bottom: 55px;
  line-height: 0;
}
#feature .item {
  box-sizing: border-box;
  width: 221px;
  height: 221px;
  border: 1px solid #4ca74f;
  border-radius: 221px;
  overflow: hidden;
  background: #ffffff;
  position: relative;
}
#feature .item .illust {
  pointer-events: none;
}
#feature .item .illust img {
  width: 100% !important;
}
#feature .item .explain {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: 99px;
}
#feature .item .explain p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #4ca74f;
  font-size: 18px;
  line-height: 24px;
}
#feature .item.num03 .annotation {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: 153px;
}
#feature .item.num03 .annotation p {
  color: #424242;
  font-size: 10px;
  line-height: 13px;
}

@media screen and (max-width: 768px) {
  #feature {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: auto;
    margin: 4.2666666667vw auto 0;
    padding-bottom: 8.5333333333vw;
  }
  #feature .item {
    width: 44.2666666667vw;
    height: 44.2666666667vw;
    border: 0.2vw solid #4ca74f;
    border-radius: 44.2666666667vw;
  }
  #feature .item .explain {
    top: 19.8666666667vw;
  }
  #feature .item .explain p {
    font-size: 3.6vw;
    line-height: 4.8vw;
  }
  #feature .item.num03 {
    margin-left: 3.3333333333vw;
  }
  #feature .item.num03 .annotation {
    top: 30.6666666667vw;
  }
  #feature .item.num03 .annotation p {
    font-size: 2vw;
    line-height: 2.6vw;
  }
  #feature .item.num01 {
    margin: 0 20vw;
    z-index: 0;
  }
  #feature .item.num02, #feature .item.num03 {
    margin-top: -3.0666666667vw;
    z-index: 5;
  }
}
/* ============================================================================================== */
/* Lineup                                                                                         */
/* ===============================================================================================*/
#lineup {
  padding: 55px 0 62px;
  background: #e2e6b5;
}
#lineup > h2 {
  display: block;
  text-align: center;
  color: #4ca74f;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}
#lineup .list {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 1000px;
  margin: 25px auto 0;
  gap: 32px 0;
}
#lineup .list > li {
  width: 100%;
}
#lineup .list > li > p {
  text-align: center;
  color: #333333;
  font-size: 20px;
  line-height: 1;
}
#lineup .list > li .images {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  margin-top: 11px;
  line-height: 0;
}
#lineup .list > li .images img {
  width: 50%;
}

@media screen and (max-width: 768px) {
  #lineup {
    padding: 8.8vw 0 10.1333333333vw;
  }
  #lineup > h2 {
    font-size: 4.8vw;
    line-height: 6.5333333333vw;
  }
  #lineup .list {
    width: 93.3333333333vw;
    margin: 2.1333333333vw auto 0;
    gap: 6.6666666667vw 0;
  }
  #lineup .list > li > p {
    font-size: 4vw;
    line-height: 5.3333333333vw;
  }
  #lineup .list > li .images {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-top: 2.4vw;
    gap: 2vw 0;
  }
  #lineup .list > li .images img {
    width: 100%;
  }
}
/* ============================================================================================== */
/* SPEC                                                                                           */
/* ===============================================================================================*/
#spec {
  padding: 45px 0 50px;
}
#spec .inner {
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  width: 804px;
  margin: 0 auto;
  padding: 35px 0 14px;
  border: 1px solid #c6c6c6;
  position: relative;
}
#spec .inner .product_image {
  width: 412px;
}
#spec .inner .product_image img {
  width: 386px !important;
  height: auto !important;
  position: absolute;
  top: 8px;
  left: 20px;
}
#spec .inner .spec_table {
  width: 360px;
}
#spec .inner .spec_table table {
  width: 100%;
  color: #424242;
}
#spec .inner .spec_table table caption {
  padding-bottom: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
#spec .inner .spec_table table tbody tr td,
#spec .inner .spec_table table tbody tr th {
  font-size: 14px;
  line-height: 28px;
}
#spec .inner .spec_table table tbody tr th {
  box-sizing: border-box;
  width: 120px;
  padding-left: 4px;
}
#spec .inner .spec_table table tbody tr:nth-child(2n-1) td,
#spec .inner .spec_table table tbody tr:nth-child(2n-1) th {
  background: #ffffff;
}

@media screen and (max-width: 768px) {
  #spec {
    padding: 9.3333333333vw 0 9.6vw;
  }
  #spec .inner {
    width: 87.0666666667vw;
    padding: 58.9333333333vw 0 4.8vw;
    border: 0.2vw solid #c6c6c6;
  }
  #spec .inner .product_image {
    width: auto;
  }
  #spec .inner .product_image img {
    width: 77.2vw !important;
    top: 1.8666666667vw;
    left: 4.5333333333vw;
  }
  #spec .inner .spec_table {
    width: 72vw;
    margin: 0 auto;
  }
  #spec .inner .spec_table table caption {
    padding-bottom: 1.7333333333vw;
    font-size: 3.2vw;
  }
  #spec .inner .spec_table table tbody tr td,
  #spec .inner .spec_table table tbody tr th {
    font-size: 2.8vw;
    line-height: 5.6vw;
  }
  #spec .inner .spec_table table tbody tr th {
    width: 24vw;
    padding-left: 0.9333333333vw;
  }
}
/* ============================================================================================== */
/* Campaign                                                                                       */
/* ===============================================================================================*/
#campaign {
  padding: 33px 0 43px;
  background: #ffffff;
}
#campaign > dl {
  width: 700px;
  margin: 0 auto;
}
#campaign > dl > dt {
  color: #4ca74f;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}
#campaign > dl > dd {
  margin-top: 6px;
}
#campaign > dl > dd .explain p {
  color: #424242;
  font-size: 16px;
  line-height: 24px;
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
}
#campaign > dl > dd .link {
  margin-top: 20px;
  line-height: 0;
}
#campaign > dl > dd .link img {
  width: 700px;
  aspect-ratio: 700/225;
}

@media screen and (max-width: 768px) {
  #campaign {
    padding: 6vw 0 8vw;
    background: #ffffff;
  }
  #campaign > dl {
    width: 93.3333333333vw;
    margin: 0 auto;
  }
  #campaign > dl > dt {
    font-size: 3.6vw;
  }
  #campaign > dl > dd {
    margin-top: 1.2vw;
  }
  #campaign > dl > dd .explain p {
    font-size: 3.2vw;
    line-height: 4.8vw;
  }
  #campaign > dl > dd .link {
    margin-top: 3.2vw;
    line-height: 0;
  }
  #campaign > dl > dd .link img {
    width: 93.3333333333vw;
  }
}

/*# sourceMappingURL=index.css.map */