@charset "utf-8";
.button {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.abswh100 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.wh100 {
  width: 100%;
  height: 100%;
}
.hv_center {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.h_center {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
}
.v_center {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.hover_scale {
  transition: all 200ms 0s ease;
}
.hover_scale:hover {
  transform: scale(1.03);
}
/*==============================================================
  ■ (PC)
==============================================================*/
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.maincontent {
  position: relative;
  background: url(../img/bg.png);
  width: 490px;
  margin: 0 auto;
  overflow: hidden;
}
.maincontent img {
  width: 100%;
  height: auto;
}
.kv {
  height: 320px;
}
.kv__logo {
  display: none;
}
.kv__circle {
  width: 570.4056px;
  height: 571.662px;
  background-image: url("../img/kv_circle.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: -37.692px;
  top: 12.564px;
  animation: 30s linear 1s infinite running rot;
  display: none;
}
.kv__circle a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.kv__title {
  width: 414.612px;
  height: 188.46px;
  background-image: url("../img/kv_title.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 35.1792px;
  top: 69.102px;
}
.kv__title a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.kv__illust {
  position: absolute;
  left: 0px;
  top: 276.408px;
  display: none;
}
@keyframes il1 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}
@keyframes il2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(30px);
    opacity: 0;
  }
}
.kv__illust__acc1 {
  width: 238.716px;
  height: 90.4608px;
  background-image: url("../img/kv_il_anime1.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: -12.564px;
  top: 75.384px;
  animation: 1.5s ease-out 1s infinite running il1;
}
.kv__illust__acc1 a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.kv__illust__acc2 {
  width: 33.9228px;
  height: 37.692px;
  background-image: url("../img/kv_il_anime2.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 258.8184px;
  top: 314.1px;
  opacity: 0;
  animation: 4s ease-out 1s infinite running il2;
}
.kv__illust__acc2 a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.kv__illust__acc3 {
  width: 33.9228px;
  height: 37.692px;
  background-image: url("../img/kv_il_anime2.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 376.92px;
  top: 226.152px;
  opacity: 0;
  animation: 4s ease-out 2s infinite running il2;
}
.kv__illust__acc3 a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.kv__illust__acc4 {
  width: 33.9228px;
  height: 37.692px;
  background-image: url("../img/kv_il_anime2.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 452.304px;
  top: 251.28px;
  opacity: 0;
  animation: 4s ease-out 3s infinite running il2;
}
.kv__illust__acc4 a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.concept {
  padding-top: 37.692px;
  padding-bottom: 55.2816px;
}
.concept__pimg {
  width: 226.7802px;
  height: 288.3438px;
  background-image: url("../img/concept_product.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
}
.concept__pimg a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.concept__read {
  text-align: center;
  font-feature-settings: 'pwid' on, 'palt' on;
  font-family: "Noto Sans JP";
  font-size: 22.6152px;
  font-weight: 700;
  line-height: 222.222%;
  letter-spacing: 0.02em;
  margin-top: 80.4096px;
}
.concept__read p {
  margin-bottom: 50.256px;
  text-align: center;
}
.concept__read p span {
  color: #006341;
}
.special {
  width: 100%;
  background: #B6FF56;
  border-radius: 50.256px;
  padding: 59.0508px 40.2048px 50.256px;
}
.special__title {
  width: 324.1512px;
  height: 94.23px;
  background-image: url("../img/special_title.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
}
.special__title a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.special__catch {
  text-align: center;
  font-size: 22.6152px;
  font-weight: bold;
  line-height: 155%;
  margin-top: 37.692px;
}
.special__prof {
  width: 363.7278px;
  height: 70.3584px;
  background-image: url("../img/special_prof.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  margin: 40.2048px auto 0;
}
.special__prof a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.special__img {
  margin-top: 20.1024px;
}
.special__read {
  font-weight: 700;
  font-size: 25.128px;
  line-height: 170%;
  letter-spacing: 0.02em;
  margin-top: 20.1024px;
}
.special__topic1 {
  width: 409.5864px;
  height: 221.1264px;
  background-image: url("../img/special_topic1.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  margin: 20.1024px auto 0;
}
.special__topic1 a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.special__topic2 {
  width: 409.5864px;
  height: 221.1264px;
  background-image: url("../img/special_topic2.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  margin: 40.2048px auto 0;
}
.special__topic2 a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.special .spbtn {
  position: relative;
  width: 359.3304px;
  height: 80.4096px;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto 0;
  border-radius: 40.2048px;
  background-color: white;
}
.special .spbtn .arrow {
  position: absolute;
  right: 0;
  top: 0;
  width: 80.4096px;
  height: 80.4096px;
  background-color: #008033;
  border-radius: 125.64px;
  transition: all 300ms 0s ease;
}
.special .spbtn .arrow::before {
  content: '';
  width: 40.2048px;
  height: 40.2048px;
  background-image: url("../img/column/btn_arrow.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(180deg);
}
.special .spbtn .arrow::before a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.special .spbtn p {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 27.6408px;
  font-weight: 700;
  color: #008033;
  padding-left: 70.3584px;
}
.special .spbtn1 {
  margin-top: 10.0512px;
}
.special .spbtn2 {
  margin-top: 10.0512px;
}
.collab {
  width: 100%;
  background: #B6FF56;
  border-radius: 50.256px;
  padding: 59.0508px 40.2048px 50.256px;
}
.collab__title {
  width: 301.536px;
  height: 94.23px;
  background-image: url("../img/collab_title.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto 41.4612px;
}
.collab__title a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.collab__catch {
  font-weight: 700;
  font-size: 22.6152px;
  line-height: 155%;
  text-align: center;
  letter-spacing: 0.02em;
}
.collab__img {
  margin-top: 37.692px;
}
.collab__subcontainer {
  display: -ms-flexbox;
  display: flex;
  margin-top: 30.1536px;
}
.collab__subcontainer__img {
  width: 163.332px;
}
.collab__subcontainer__img img {
  width: 100%;
  height: auto;
}
.collab__subcontainer__txt {
  width: 246.2544px;
  padding-left: 17.5896px;
  padding-top: 0px;
}
.collab__subcontainer__txt__areatag {
  display: inline-block;
  height: 37.692px;
  font-size: 17.5896px;
  font-weight: bold;
  line-height: 37.692px;
  padding: 0 12.564px;
  border: 1px solid black;
  border-radius: 125.64px;
}
.collab__subcontainer__txt__name {
  font-size: 22.6152px;
  font-weight: bold;
  line-height: 155%;
  margin-top: 17.5896px;
}
.collab__subcontainer__txt__date {
  font-size: 17.5896px;
  line-height: 185%;
  margin-top: 10.0512px;
}
.collab__detailbtn {
  position: relative;
  width: 309.0744px;
  height: 60.3072px;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  border-radius: 60.3072px;
  background-color: white;
  margin-top: 40.2048px;
  transition: all 300ms 0s ease;
}
.collab__detailbtn .arrow {
  position: relative;
  width: 60.3072px;
  height: 60.3072px;
  background-color: #008033;
  border-radius: 125.64px;
  transition: all 300ms 0s ease;
  position: absolute;
  right: 0;
  top: 0;
}
.collab__detailbtn .arrow::before {
  content: '';
  width: 40.2048px;
  height: 40.2048px;
  background-image: url("../img/column/btn_arrow.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(180deg);
}
.collab__detailbtn .arrow::before a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.collab__detailbtn p {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 22.6152px;
  font-weight: 700;
  color: #008033;
  letter-spacing: 0.1em;
  padding-left: 75.384px;
  transition: all 300ms 0s ease;
}
.collab__detailbtn:hover {
  background-color: #008033;
}
.collab__detailbtn:hover p {
  color: white;
}
.acc1 {
  position: relative;
  padding: 55.2816px 0 55.2816px;
}
.acc1__ticker {
  width: 100%;
  height: 37.692px;
  background: url(../img/ticker1.png) top left / contain repeat-x;
  animation: 10s linear 1s infinite running xloop;
}
@keyframes xloop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -376.92px 0;
  }
}
.column {
  width: 100%;
  background: #B6FF56;
  border-radius: 50.256px;
  padding-top: 59.0508px;
  padding-bottom: 50.256px;
}
.column__title {
  width: 326.664px;
  height: 94.23px;
  background-image: url("../img/column_title.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
}
.column__title a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.column__read {
  text-align: center;
  font-size: 22.6152px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 48.9996px;
}
.column__list__item {
  transition: all 300ms 0s ease;
}
.column__list__item:hover .column__list__item__img {
  transform: scale(1.03);
}
.column__list__item:hover .column__list__item__txt p {
  display: inline;
  background-color: #008033;
  color: white;
}
.column__list__item__img {
  width: 409.5864px;
  height: 272.6388px;
  margin: 51.5124px auto 0;
  transition: all 300ms 0s ease;
}
.column__list__item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.column__list__item__txt {
  width: 409.5864px;
  font-size: 27.6408px;
  font-weight: 700;
  line-height: 145%;
  margin: 20.1024px auto 0;
  transition: all 300ms 0s ease;
}
.column__list__item__txt p {
  display: inline;
  transition: all 300ms 0s ease;
}
.column__moreinfo {
  text-align: center;
  margin-top: 54.0252px;
}
.column__moreinfo__e {
  font-family: "Krona One", "Noto Sans JP", "游ゴシック体", 'Yu Gothic', "YuGothic", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", "Meiryo", "Osaka", 'ＭＳ Ｐゴシック', 'MS PGothic', "sans-serif";
  font-weight: 400;
  font-size: 22.6152px;
}
.column__moreinfo__j {
  font-size: 20.1024px;
  font-weight: 700;
  margin-top: 10.0512px;
}
@keyframes smk1 {
  0% {
    transform: scale(0.5) rotate(30deg) translateY(100px);
    opacity: 0;
    filter: blur(2px);
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: scale(1) rotate(0deg) translateY(0);
    filter: blur(10px);
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4) rotate(-30deg) translateY(-100px);
    opacity: 0;
    filter: blur(40px);
  }
}
@keyframes smk2 {
  0% {
    transform: scale(0.5) rotate(-80deg) translateY(100px);
    opacity: 0;
    filter: blur(2px);
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: scale(1) rotate(0deg) translateY(0);
    filter: blur(10px);
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: scale(3) rotate(80deg) translateY(-100px);
    opacity: 0;
    filter: blur(40px);
  }
}
@keyframes smk3 {
  0% {
    transform: scale(0.5) rotate(30deg) translateY(400px);
    opacity: 0;
    filter: blur(2px);
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: scale(1) rotate(0deg) translateY(0);
    filter: blur(10px);
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4) rotate(-30deg) translateY(-200px);
    opacity: 0;
    filter: blur(40px);
  }
}
@keyframes smk4 {
  0% {
    transform: scale(0.5) rotate(-30deg) translateY(400px);
    opacity: 0;
    filter: blur(2px);
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: scale(1) rotate(0deg) translateY(0);
    filter: blur(10px);
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4) rotate(30deg) translateY(-400px);
    opacity: 0;
    filter: blur(40px);
  }
}
.smoke1 {
  display: none;
}
.smoke2 {
  display: none;
}
.smoke3 {
  width: 363.0996px;
  height: 376.92px;
  background-image: url("../img/smoke3.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: -163.332px;
  top: 552.816px;
  opacity: 0;
  animation: 8s linear 5s infinite running smk3;
  pointer-events: none;
}
.smoke3 a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.smoke4 {
  width: 354.3048px;
  height: 354.3048px;
  background-image: url("../img/smoke4.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  right: -163.332px;
  top: 1507.68px;
  opacity: 0;
  animation: 8s linear 5s infinite running smk4;
  pointer-events: none;
}
.smoke4 a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}