@charset "UTF-8";



/*all----------------------------*/

html {

  font-size: 62.5%;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



html::-webkit-scrollbar {

  display:none;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#HeaderWrap {

  position: relative;

  z-index: 5;

}



#FooterWrap {

  position: relative;

  background: #fff;

  z-index: 1;

}



@font-face {

  font-family: "GenJyuuGothic";

  src: url("../font/GenJyuuGothic-Regular.ttf") format("truetype");

  font-weight: 400;

}



@font-face {

  font-family: "GenJyuuGothic";

  src: url("../font/GenJyuuGothic-Medium.ttf") format("truetype");

  font-weight: 500;

}



@font-face {

  font-family: "GenJyuuGothic";

  src: url("../font/GenJyuuGothic-Bold.ttf") format("truetype");

  font-weight: 700;

}



:root {

  --font_regular: "GenJyuuGothic", sans-serif;

  --color_regular: #000;

  --color_product01: #04c8b0;

  --color_product02: #e84131;

  --color_product03: #26a9e1;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: 0;

}



.LP_page {

  width: 100%;

  background: #fff;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

  opacity: 0;

  transition: opacity .5s;

}



.LP_page.active {

  opacity: 1;

}



.LP_page_inner {

  background: #fff;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page .activePoint,

.LP_page .activeDelay {

  opacity: 0;

  transition: opacity 1s;

}



.LP_page .activeDelay.delay1 {

  transition-delay: .2s;

}



.LP_page .activeDelay.delay2 {

  transition-delay: .4s;

}



.LP_page .activeDelay.delay3 {

  transition-delay: .6s;

}



.LP_page .activeDelay.delay4 {

  transition-delay: .8s;

}



.LP_page .activeDelay.delay5 {

  transition-delay: 1s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

  opacity: 1;

  transform: unset;

}

/*----------------------------all*/



/*heading------------------------*/

.heading_area {

  position: relative;

  padding-bottom: calc(245 * (37.5rem / 750));

  background: #8dc584;

}



.heading_area::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(157 * (37.5rem / 750));

  background: url(../img/illust_001.png) center center / cover no-repeat;

  content: "";

}



.heading_area .campaignApply_wrap {

  position: relative;

  z-index: 1;

  width: calc(700 * (37.5rem / 750));

  margin: 0 auto;

  padding-bottom: calc(95 * (37.5rem / 750));

}



.heading_area .campaignApply_wrap::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(165 * (37.5rem / 750)));

  background: #4ab225;

  content: "";

}



.heading_area .campaignApply_txt {

  margin-top: calc(-6 * (37.5rem / 750));

  padding: 0 calc(30 * (37.5rem / 750));

  font-size: calc(33 * (37.5rem / 750));

  font-weight: 500;

  line-height: 1.7;

  letter-spacing: .02em;

  text-align: center;

  color: #fff;

}



.campaignApply_btn {

  position: relative;

  z-index: 1;

  width: calc(725 * (37.5rem / 750));

  margin: 0 auto;

}



.heading_area .campaignApply_btn {

  margin-top: calc(40 * (37.5rem / 750));

}



.campaignApply_btn::before,

.campaignApply_btn::after {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  margin-top: calc(10 * (37.5rem / 750));

  border-radius: calc(100 * (37.5rem / 750));

  content: "";

}



.campaignApply_btn::before {

  background: #8dc584;

}



.campaignApply_btn::after {

  background: #ccc;

  opacity: .75;

  mix-blend-mode: multiply;

}



.novelty_eco {

  width: calc(700 * (37.5rem / 750));

  margin: calc(110 * (37.5rem / 750)) auto 0;

}



.novelty_eco h3 {

  margin-bottom: calc(40 * (37.5rem / 750));

  padding: calc(40 * (37.5rem / 750)) 0;

  border-radius: calc(30 * (37.5rem / 750));

  border: solid var(--color_regular) calc(4 * (37.5rem / 750));

  box-shadow: calc(5 * (37.5rem / 750)) calc(10 * (37.5rem / 750)) 0 rgba(0, 0, 0, .1);

  background: #fff;

  font-size: calc(33 * (37.5rem / 750));

  text-align: center;

}

/*------------------------heading*/



/*campaign-----------------------*/

.campaign_area {

  position: relative;

  z-index: 1;

  padding: calc(570 * (37.5rem / 750)) 0 calc(80 * (37.5rem / 750));

  background: #f6d5cf;

}



.campaign_area::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/illust_003.svg) center center / 100% auto repeat-y;

  content: "";

}



.campaign_area::after {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: calc(560 * (37.5rem / 750));

  background: url(../img/illust_002.png) center center / cover no-repeat;

  content: "";

}



.LP_page .area_ttl {

  display: grid;

  place-items: center;

  width: calc(637 * (37.5rem / 750));

  height: calc(140 * (37.5rem / 750));

  margin: 0 auto;

  background: #e9545d;

}



.campaign_area .area_ttl {

  background: #e9545d;

}



.product_area .area_ttl {

  background: var(--color_product03);

}



.howtoApply_area .area_ttl {

  background: var(--color_product01);

}



.LP_page .area_ttl span {

  font-size: calc(50 * (37.5rem / 750));

  font-weight: 700;

  letter-spacing: .02em;

  color: #fff;

  filter: drop-shadow(calc(3 * (37.5rem / 750)) calc(3 * (37.5rem / 750)) 0 #C64750);

}



.campaign_area .area_ttl span {

  filter: drop-shadow(calc(3 * (37.5rem / 750)) calc(3 * (37.5rem / 750)) 0 #C64750);

}



.product_area .area_ttl span {

  filter: drop-shadow(calc(3 * (37.5rem / 750)) calc(3 * (37.5rem / 750)) 0 #2090BF);

}



.howtoApply_area .area_ttl span {

  filter: drop-shadow(calc(3 * (37.5rem / 750)) calc(3 * (37.5rem / 750)) 0 #03AA96);

}



.novelty_wrap {

  width: calc(638 * (37.5rem / 750));

  margin: calc(40 * (37.5rem / 750)) auto calc(55 * (37.5rem / 750));

  padding-bottom: calc(35 * (37.5rem / 750));

  border-radius: calc(15 * (37.5rem / 750));

  overflow: clip;

  background: #fff;

}



.novelty_wrap .notes_list {

  margin-top: calc(25 * (37.5rem / 750));

  padding: 0 calc(30 * (37.5rem / 750)) 0 calc(35 * (37.5rem / 750));

}



.novelty_wrap .notes_list li {

  font-size: calc(24 * (37.5rem / 750));

  line-height: 1.2;

  letter-spacing: .02em;

  text-indent: -1.2em;

  padding-left: 1.2em;

}



.novelty_wrap .notes_list li:nth-of-type(n+2) {

  margin-top: calc(10 * (37.5rem / 750));

}



.each_campaign:nth-of-type(n+2) {

  margin-top: calc(20 * (37.5rem / 750));

}



.each_campaign h3 {

  margin-bottom: calc(70 * (37.5rem / 750));

}



.present_list {

  padding: 0 calc(85 * (37.5rem / 750));

}



.present_list li:nth-of-type(n+2) {

  margin-top: calc(85 * (37.5rem / 750));

}



.present_list li > div {

  position: relative;

  z-index: 1;

  padding-bottom: calc(45 * (37.5rem / 750));

  text-align: center;

}



.present_list li > div::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(30 * (37.5rem / 750)));

  border-radius: calc(20 * (37.5rem / 750));

  border: solid calc(4 * (37.5rem / 750));

  background: #fff;

  content: "";

}



.present_list li:nth-of-type(1) > div::before {

  border-color: #e9545d;

}



.present_list li:nth-of-type(2) > div::before {

  border-color: #f6ac19;

}



.present_list li:nth-of-type(3) > div::before {

  border-color: #3db270;

}



.present_list li h4 {

  position: relative;

  display: grid;

  place-items: center;

  width: calc(370 * (37.5rem / 750));

  height: calc(60 * (37.5rem / 750));

  margin: 0 0 calc(20 * (37.5rem / 750)) calc(70 * (37.5rem / 750));

  border-radius: calc(100 * (37.5rem / 750));

  font-size: calc(33 * (37.5rem / 750));

  font-weight: 700;

  letter-spacing: -.04em;

  color: #fff;

}



.present_list li:nth-of-type(1) h4 {

  background: #e9545d;

}



.present_list li:nth-of-type(2) h4 {

  background: #f6ac19;

}



.present_list li:nth-of-type(3) h4 {

  background: #3db270;

}



.present_list li h4 span {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: calc(130 * (37.5rem / 750));

  margin: calc(-5 * (37.5rem / 750)) calc(-80 * (37.5rem / 750)) 0 0;

}



.present_list li .present_img {

  width: calc(450 * (37.5rem / 750));

  margin: 0 auto calc(30 * (37.5rem / 750));

}



.present_list li .present_name {

  margin-bottom: calc(30 * (37.5rem / 750));

  font-size: calc(32 * (37.5rem / 750));

  font-weight: 700;

}



.present_list li:nth-of-type(1) .present_name {

  color: #e9545d;

}



.present_list li:nth-of-type(2) .present_name {

  color: #f6ac19;

}



.present_list li:nth-of-type(3) .present_name {

  color: #3db270;

}



.present_list li .present_caption {

  margin-bottom: calc(30 * (37.5rem / 750));

  font-size: calc(28 * (37.5rem / 750));

  font-weight: 500;

  line-height: 1.4;

}



.present_list li .present_caption .txt_S {

  display: block;

  margin-top: calc(10 * (37.5rem / 750));

  font-size: calc(25 * (37.5rem / 750));

}



.present_list li .present_size {

  font-size: calc(24 * (37.5rem / 750));

  font-weight: 500;

  letter-spacing: .02em;

}



.present_list li .present_size span {

  margin-right: calc(20 * (37.5rem / 750));

  padding: calc(1 * (37.5rem / 750)) calc(10 * (37.5rem / 750));

  border: solid calc(2 * (37.5rem / 750)) var(--color_regular);

  letter-spacing: -.04em;

}



.present_list li .notes {

  margin-top: calc(40 * (37.5rem / 750));

  font-size: calc(24 * (37.5rem / 750));

  line-height: 1.5;

  letter-spacing: .02em;

  text-align: right;

}

/*-----------------------campaign*/



/*product------------------------*/

.product_area {

  position: relative;

  z-index: 1;

  padding: calc(100 * (37.5rem / 750)) 0 calc(635 * (37.5rem / 750));

  background: #bbe3f2;

}



.product_area::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(610 * (37.5rem / 750)));

  background: url(../img/illust_004.svg) top center / 100% auto repeat-y;

  content: "";

}



.product_area::after {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(610 * (37.5rem / 750));

  background: url(../img/illust_006.png) center center / cover no-repeat;

  content: "";

}



.product_wrap {

  width: calc(638 * (37.5rem / 750));

  margin: calc(40 * (37.5rem / 750)) auto calc(45 * (37.5rem / 750));

  padding-bottom: calc(50 * (37.5rem / 750));

  background: #fff;

}



.product_wrap .product_img {

  margin-bottom: calc(20 * (37.5rem / 750));

}



.product_wrap .notes_list {

  margin-top: calc(-10 * (37.5rem / 750));

  padding: 0 calc(50 * (37.5rem / 750));

}



.product_wrap .notes_list li {

  font-size: calc(22.5 * (37.5rem / 750));

  line-height: 1.3;

  letter-spacing: .02em;

}



.product_wrap h3 {

  margin-top: calc(40 * (37.5rem / 750));

  font-size: calc(32 * (37.5rem / 750));

  font-weight: 700;

  line-height: 1.45;

  letter-spacing: .02em;

  text-align: center;

  color: var(--color_product03);

}



.product_wrap h3 .notes {

  display: block;

  margin-top: calc(10 * (37.5rem / 750));

  font-size: calc(22.5 * (37.5rem / 750));

  font-weight: 400;

  letter-spacing: .02em;

}



.ingredient_wrap p {

  width: fit-content;

  margin: 0 auto calc(35 * (37.5rem / 750));

  padding: calc(18 * (37.5rem / 750)) calc(60 * (37.5rem / 750));

  border-radius: calc(10 * (37.5rem / 750));

  background: var(--color_product03);

  font-size: calc(37 * (37.5rem / 750));

  font-weight: 700;

  color: #fff;

}



.free_list {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: calc(30 * (37.5rem / 750)) calc(45 * (37.5rem / 750));

}



.free_list li {

  position: relative;

  display: grid;

  place-items: center;

  width: calc(165 * (37.5rem / 750));

  height: calc(165 * (37.5rem / 750));

  border: solid var(--color_product03) calc(3.5 * (37.5rem / 750));

  border-radius: 50%;

  background: #fff;

  overflow: clip;

}



.free_list li::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: calc(3.5 * (37.5rem / 750));

  height: 100%;

  background: var(--color_product03);

  rotate: 40deg;

  content: "";

}



.free_list li span {

  position: relative;

  padding: calc(3 * (37.5rem / 750)) 0;

  background: #fff;

  font-size: calc(27.5 * (37.5rem / 750));

  font-weight: 500;

}



.product_area .product_list {

  width: calc(637 * (37.5rem / 750));

  margin: calc(60 * (37.5rem / 750)) auto 0;

}



.product_area .product_list li {

  position: relative;

  z-index: 1;

  padding-bottom: calc(45 * (37.5rem / 750));

  background: #fff;

}



.product_area .product_list li:nth-of-type(n+2) {

  margin-top: calc(45 * (37.5rem / 750));

}



.product_area .product_list li::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  content: "";

  opacity: .1;

}



.product_area .product_list .whitening::before {

  background: var(--color_product01);

}



.product_area .product_list .manukapropolis::before {

  background: var(--color_product02);

}



.product_area .product_list .completecare::before {

  background: var(--color_product03);

}



.product_area .product_list li .product_feature {

  display: grid;

  place-items: center;

  width: calc(575 * (37.5rem / 750));

  height: calc(92 * (37.5rem / 750));

  margin: 0 auto calc(35 * (37.5rem / 750));

  border: solid calc(2 * (37.5rem / 750));

  background: #fff;

}



.product_area .product_list .whitening .product_feature {

  border-color: var(--color_product01);

  color: var(--color_product01);

}



.product_area .product_list .manukapropolis .product_feature {

  border-color: var(--color_product02);

  color: var(--color_product02);

}



.product_area .product_list .completecare .product_feature {

  border-color: var(--color_product03);

  color: var(--color_product03);

}



.product_area .product_list li .product_feature p {

  font-size: calc(31 * (37.5rem / 750));

  font-weight: 700;

  letter-spacing: .02em;

}



.product_area .product_list li .product_feature p sup {

  font-size: calc(20 * (37.5rem / 750));

}



.product_area .product_list li .product_feature p .notes {

  display: block;

  margin-top: calc(10 * (37.5rem / 750));

  font-size: calc(20 * (37.5rem / 750));

  letter-spacing: .02em;

}



.product_area .product_list li .txt_wrap {

  margin-bottom: calc(55 * (37.5rem / 750));

  padding: 0 calc(20 * (37.5rem / 750));

}



.product_area .product_list li .product_name {

  margin-bottom: calc(25 * (37.5rem / 750));

  font-size: calc(31 * (37.5rem / 750));

  font-weight: 700;

  letter-spacing: .02em;

}



.product_area .product_list li .product_name span {

  margin-left: calc(30 * (37.5rem / 750));

  padding: calc(2 * (37.5rem / 750)) calc(18 * (37.5rem / 750));

  border: solid var(--color_regular) calc(1.5 * (37.5rem / 750));

  font-size: calc(26 * (37.5rem / 750));

}



.product_area .product_list li .product_caption {

  font-size: calc(28 * (37.5rem / 750));

  line-height: 1.4;

  letter-spacing: -.02em;

  text-align: justify;

}



.product_area .product_list li .product_caption .notes {

  font-size: calc(23 * (37.5rem / 750));

  line-height: 1.4;

  letter-spacing: -.02em;

}



.product_area .product_list li .product_link {

  display: grid;

  place-items: center;

  width: calc(575 * (37.5rem / 750));

  height: calc(82 * (37.5rem / 750));

  margin: 0 auto;

  border-radius: calc(100 * (37.5rem / 750));

  font-size: calc(29 * (37.5rem / 750));

  font-weight: 700;

  color: #fff;

}



.product_area .product_list .whitening .product_link {

  background: var(--color_product01);

}



.product_area .product_list .manukapropolis .product_link {

  background: var(--color_product02);

}



.product_area .product_list .completecare .product_link {

  background: var(--color_product03);

}



.product_novelty {

  margin-top: calc(60 * (37.5rem / 750));

}



.product_novelty .notes_list {

  width: calc(400 * (37.5rem / 750));

  margin: calc(-320 * (37.5rem / 750)) 0 0  calc(295 * (37.5rem / 750));

}



.product_novelty .notes_list li {

  font-size: calc(22.5 * (37.5rem / 750));

  line-height: 1.2;

  letter-spacing: .02em;

}



.product_novelty .notes_list li:nth-of-type(n+2) {

  margin-top: calc(8 * (37.5rem / 750));

}



.product_novelty figure:nth-of-type(2) {

  margin-top: calc(60 * (37.5rem / 750));

}

/*------------------------product*/



/*howto Apply--------------------*/

.howtoApply_area {

  position: relative;

  z-index: 1;

  padding: calc(110 * (37.5rem / 750)) calc(45 * (37.5rem / 750)) calc(440 * (37.5rem / 750));

  background: rgba(4, 200, 176, .1);

}



.howtoApply_area::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(440 * (37.5rem / 750)));

  background: url(../img/illust_007.png) top center / 100% auto repeat-y;

  opacity: .5;

  content: "";

}



.howtoApply_area .campaignApply_btn {

  width: calc(575 * (37.5rem / 750));

  margin-top: calc(2 * (37.5rem / 750));

}



.howtoApply_area .campaignApply_btn::before {

  background: #E4F9F6;

}



.howtoApply_list {

  margin-top: calc(60 * (37.5rem / 750));

}



.howtoApply_list li {

  position: relative;

  padding-bottom: calc(25 * (37.5rem / 750));

  background: #fff;

  border: solid var(--color_product01) calc(4 * (37.5rem / 750));

}



.howtoApply_list li:nth-of-type(n+2) {

  margin-top: calc(100 * (37.5rem / 750));

}



.howtoApply_list li:nth-of-type(n+2)::before {

  position: absolute;

  bottom: 100%;

  left: 50%;

  translate: -50% 0;

  margin-bottom: calc(30 * (37.5rem / 750));

  border-top: solid var(--color_product01) calc(46 * (37.5rem / 750));

  border-left: solid transparent calc(46 * (37.5rem / 750));

  border-right: solid transparent calc(46 * (37.5rem / 750));

  content: "";

}



.howtoApply_list li .step_num {

  display: grid;

  place-items: center;

  height: calc(64 * (37.5rem / 750));

  margin-bottom: calc(30 * (37.5rem / 750));

  background: var(--color_product01);

  font-size: calc(37 * (37.5rem / 750));

  font-weight: 700;

  color: #fff;

}



.howtoApply_list li .howtoApply_summary {

  margin-bottom: calc(10 * (37.5rem / 750));

  font-size: calc(31 * (37.5rem / 750));

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: -.02em;

  text-align: center;

  color: var(--color_product01);

}



.howtoApply_list li .howtoApply_txt {

  margin-top: calc(10 * (37.5rem / 750));

  padding: 0 calc(40 * (37.5rem / 750));

  font-size: calc(29 * (37.5rem / 750));

  line-height: 1.5;

  letter-spacing: -.04em;

  text-align: justify;

}



.howtoApply_detail {

  margin-top: calc(75 * (37.5rem / 750));

  padding: calc(55 * (37.5rem / 750)) 0 calc(35 * (37.5rem / 750));

  border-radius: calc(30 * (37.5rem / 750));

  background: #fff;

}



.howtoApply_detail .each_detail:nth-of-type(n+2) {

  margin-top: calc(60 * (37.5rem / 750));

}



.howtoApply_detail .each_detail h3 {

  width: calc(577 * (37.5rem / 750));

  margin: 0 auto calc(25 * (37.5rem / 750));

  padding: calc(15 * (37.5rem / 750)) 0;

  border-radius: calc(10 * (37.5rem / 750));

  background: var(--color_product01);

  font-size: calc(37 * (37.5rem / 750));

  font-weight: 700;

  text-align: center;

  color: #fff;

}



.howtoApply_detail .each_detail .detail_txt {

  padding: 0 calc(40 * (37.5rem / 750));

  font-size: calc(29 * (37.5rem / 750));

  line-height: 1.3;

}



.howtoApply_detail .each_detail .detail_txt .notes {

  display: block;

  margin-top: calc(15 * (37.5rem / 750));

  font-size: calc(24 * (37.5rem / 750));

  line-height: 1.3;

}



.sample_img {

  display: flex;

  margin: calc(10 * (37.5rem / 750)) 0 calc(12 * (37.5rem / 750));

}



.sample_img figure {

  width: calc(400 * (37.5rem / 750));

}



.sample_img ol {

  margin-top: calc(75 * (37.5rem / 750));

}



.sample_img ol li {

  font-size: calc(25 * (37.5rem / 750));

  font-weight: 500;

}



.sample_img ol li:nth-of-type(n+2) {

  margin-top: calc(18 * (37.5rem / 750));

}



.condition_list {

  margin-bottom: calc(60 * (37.5rem / 750));

  padding: 0 calc(15 * (37.5rem / 750));

}



.condition_list li {

  font-size: calc(24 * (37.5rem / 750));

  letter-spacing: -.04em;

  line-height: 1.375;

  text-indent: -1em;

  padding-left: 1em;

}



.condition_list li:nth-of-type(n+2) {

  margin-top: calc(6 * (37.5rem / 750));

}



.outtake_list_wrap > p {

  margin-bottom: calc(25 * (37.5rem / 750));

  font-size: calc(24 * (37.5rem / 750));

  line-height: 1.3;

  text-align: center;

}



.outtake_list {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: calc(7 * (37.5rem / 750));

  padding: 0 calc(20 * (37.5rem / 750));

}



.outtake_list li {

  padding-top: calc(15 * (37.5rem / 750));

  background: #f2f2f2;

}



.outtake_list li p {

  position: relative;

  margin-bottom: calc(15 * (37.5rem / 750));

  padding-left: calc(50 * (37.5rem / 750));

  font-size: calc(22 * (37.5rem / 750));

  font-weight: 500;

}



.outtake_list li:nth-of-type(5) p {

  letter-spacing: -.08em;

}



.outtake_list li p::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  display: grid;

  place-items: center;

  width: calc(28 * (37.5rem / 750));

  height: calc(28 * (37.5rem / 750));

  margin-left: calc(15 * (37.5rem / 750));

  border-radius: 50%;

  background: #e9545d;

  font-size: calc(24 * (37.5rem / 750));

  font-weight: 700;

  color: #fff;

  content: "✕";

}



.terms_wrap {

  width: calc(650 * (37.5rem / 750));

  margin: 0 auto;

  padding: calc(45 * (37.5rem / 750)) calc(15 * (37.5rem / 750)) 0;

}



.terms_wrap p {

  height: calc(500 * (37.5rem / 750));

  font-size: calc(20 * (37.5rem / 750));

  line-height: 1.3;

  letter-spacing: -.02em;

  text-align: center;

  overflow: scroll;

}



.terms_wrap p .txt_L {

  display: block;

  margin-bottom: calc(40 * (37.5rem / 750));

  padding-bottom: calc(30 * (37.5rem / 750));

  border-bottom: solid calc(2 * (37.5rem / 750)) #e6e6e6;

  font-size: calc(22 * (37.5rem / 750));

  line-height: 1.5;

  letter-spacing: -.06em;

}



.terms_wrap p a {

  display: inline !important;

  text-decoration: underline;

}

/*--------------------howto Apply*/



/*brand About--------------------*/

.brandAbout_area {

  position: relative;

  padding: calc(30 * (37.5rem / 750)) 0 calc(125 * (37.5rem / 750));

  background: #8dc584;

}



.brandAbout_area::before {

  position: absolute;

  bottom: 100%;

  left: 0;

  width: 100%;

  height: calc(270 * (37.5rem / 750));

  margin-bottom: calc(-2 * (37.5rem / 750));

  background: url(../img/illust_008.png) center center / cover no-repeat;

  content: "";

}



.brandAbout_wrap {

  width: calc(700 * (37.5rem / 750));

  margin: calc(15 * (37.5rem / 750)) auto 0;

  padding: calc(70 * (37.5rem / 750)) 0 calc(80 * (37.5rem / 750));

  border: solid #fff calc(4 * (37.5rem / 750));

  border-radius: calc(40 * (37.5rem / 750));

  background: rgba(113, 178, 102, .7);

  text-align: center;

  color: #fff;

}



.brandAbout_wrap h3 {

  margin-bottom: calc(55 * (37.5rem / 750));

  font-size: calc(49 * (37.5rem / 750));

  font-weight: 700;

  letter-spacing: .02em;

  filter: drop-shadow(calc(3 * (37.5rem / 750)) calc(3 * (37.5rem / 750)) 0 rgba(103, 156, 94, .75));

}



.brandAbout_wrap p {

  font-size: calc(29 * (37.5rem / 750));

  font-weight: 700;

  line-height: 1.78;

  letter-spacing: .06em;

}



.brandAbout_list {

  width: calc(540 * (37.5rem / 750));

  margin: calc(55 * (37.5rem / 750)) auto 0;

}



.brandAbout_list li {

  border: solid calc(6 * (37.5rem / 750)) #71b266;

  border-radius: calc(10 * (37.5rem / 750));

  background: #fff;

  overflow: clip;

}



.brandAbout_list li:nth-of-type(n+2) {

  margin-top: calc(35 * (37.5rem / 750));

}



.brandAbout_btn {

  display: grid !important;

  place-items: center;

  width: calc(580 * (37.5rem / 750));

  height: calc(86 * (37.5rem / 750));

  margin: calc(60 * (37.5rem / 750)) auto 0;

  border-radius: calc(100 * (37.5rem / 750));

  border: solid #fff calc(4 * (37.5rem / 750));

  background: #71b266;

  font-size: calc(29 * (37.5rem / 750));

  font-weight: 500;

  color: #fff;

}

/*--------------------brand About*/



/*contact------------------------*/

.contact_area {

  padding: calc(85 * (37.5rem / 750)) 0 calc(45 * (37.5rem / 750));

  background: #71b266;

  text-align: center;

  color: #fff;

}



.contact_area h2 {

  width: calc(575 * (37.5rem / 750));

  margin: 0 auto calc(45 * (37.5rem / 750));

  padding-bottom: calc(55 * (37.5rem / 750));

  border-bottom: solid #fff calc(3 * (37.5rem / 750));

  font-size: calc(49 * (37.5rem / 750));

  font-weight: 700;

  letter-spacing: .02em;

}



.contact_area h3 {

  margin-bottom: calc(60 * (37.5rem / 750));

  font-size: calc(35 * (37.5rem / 750));

  font-weight: 700;

  line-height: 1.35;

  letter-spacing: .02em;

}



.contact_area dl dt,

.contact_area dl dd {

  font-size: calc(33 * (37.5rem / 750));

  line-height: 1.55;

  letter-spacing: .02em;

}



.contact_area .notes {

  margin-top: calc(20 * (37.5rem / 750));

  font-size: calc(24 * (37.5rem / 750));

  line-height: 1.25;

  font-weight: 500;

}

/*------------------------contact*/



/*fixed--------------------------*/

.btn_navOpen {

  position: fixed;

  z-index: 4;

  top: 0;

  right: 0;

  width: calc(98 * (37.5rem / 750));

  margin-top: calc(150 * (37.5rem / 750));

  border-radius: calc(20 * (37.5rem / 750)) 0 0 calc(20 * (37.5rem / 750));

  filter: drop-shadow(0 calc(6 * (37.5rem / 750)) 0 rgba(0, 0, 0, .1));

  overflow: clip;

  cursor: pointer;

  translate: 100% 0;

  transition: translate .3s;

}



.btn_navOpen.active {

  translate: unset;

}



.main_nav {

  position: fixed;

  z-index: 4;

  top: 0;

  right: 0;

  width: calc(440 * (37.5rem / 750));

  margin-top: calc(288 * (37.5rem / 750));

  padding: calc(70 * (37.5rem / 750)) 0 calc(290 * (37.5rem / 750));

  border-radius: calc(20 * (37.5rem / 750)) 0 0 calc(20 * (37.5rem / 750));

  border: solid calc(2.5 * (37.5rem / 750)) #fff;

  border-right: none;

  background: #d9f5ff;

  filter: drop-shadow(0 calc(6 * (37.5rem / 750)) 0 rgba(0, 0, 0, .1));

  translate: 100% 0;

  transition: translate .3s;

}



.main_nav.active {

  translate: unset;

}



.main_nav::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(115 * (37.5rem / 750));

  border-radius: 0 0 0 calc(20 * (37.5rem / 750));

  background: #fff;

  content: "";

}



.main_nav::after {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(280 * (37.5rem / 750));

  background: url(../img/illust_013.png) center center / cover no-repeat;

  content: "";

}



.btn_navClose {

  position: absolute;

  top: 0;

  right: 0;

  width: calc(39 * (37.5rem / 750));

  height: calc(39 * (37.5rem / 750));

  margin: calc(24 * (37.5rem / 750)) calc(24 * (37.5rem / 750)) 0 0;

  rotate: 45deg;

  cursor: pointer;

}



.btn_navClose::before,

.btn_navClose::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(6 * (37.5rem / 750));

  height: 100%;

  border-radius: calc(2 * (37.5rem / 750));

  background: var(--color_regular);

  content: "";

}



.btn_navClose::after {

  rotate: 90deg;

}



.main_nav .nav_list {

  margin-top: calc(25 * (37.5rem / 750));

  padding: 0 calc(35 * (37.5rem / 750));

}



.main_nav .nav_list li {

  position: relative;

}



.main_nav .nav_list li:nth-of-type(n+2)::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: .1rem;

  background: linear-gradient(to right, #fff calc(8 * (37.5rem / 750)), transparent calc(8 * (37.5rem / 750))) center center / calc(16 * (37.5rem / 750)) auto repeat-x;

  content: "";

}



.main_nav .nav_list li a {

  padding: calc(30 * (37.5rem / 750)) 0;

  font-size: calc(30 * (37.5rem / 750));

  font-weight: 500;

  letter-spacing: .02em;

  text-align: center;

}



.campaignApply_btn_fixed {

  position: fixed;

  z-index: 3;

  bottom: 0;

  right: 0;

  width: calc(97 * (37.5rem / 750));

  margin-bottom: calc(70 * (37.5rem / 750));

  background: #4ab225;

  border: solid calc(2.5 * (37.5rem / 750)) #fff;

  border-right: none;

  border-radius: calc(20 * (37.5rem / 750)) 0 0 calc(20 * (37.5rem / 750));

  filter: drop-shadow(0 calc(5 * (37.5rem / 750)) 0 rgba(0, 0, 0, .1));

  translate: 100% 0;

  transition: translate .3s;

}



.campaignApply_btn_fixed.active {

  translate: unset;

}



.campaignApply_btn_fixed::before {

  position: absolute;

  bottom: 0;

  right: 0;

  width: calc(130 * (37.5rem / 750));

  height: calc(130 * (37.5rem / 750));

  margin: 0 calc(-3 * (37.5rem / 750)) calc(15 * (37.5rem / 750)) 0;

  background: url(../img/illust_011.png) center center / cover no-repeat;

  content: "";

  pointer-events: none;

  translate: 50% 0;

  transition: translate .3s;

}



.campaignApply_btn_fixed.active::before {

  translate: unset;

}



/*--------------------------fixed*/



/*teaser-------------------------*/

.teaser_page img {

  width: 100%;

  vertical-align: bottom;

}



.teaser_page {

  display: grid;

  place-items: center;

  min-height: 60vh;

  background: #fff;

  text-align: center;

}



.teaser_page .logo_eco {

  width: 20rem;

  margin: 0 auto 4rem;

}



.teaser_txt {

  font-size: 2.5rem;

  letter-spacing: .05em;

}



@media screen and  (max-width:768px) {

.teaser_page .logo_eco {

  width: 15rem;

  margin: 0 auto 3rem;

}



.teaser_txt {

  font-size: 1.6rem;

  letter-spacing: .05em;

}

}

/*-------------------------teaser*/



/*shareボタン、shareテキスト---------------------------*/

@media screen and  (max-width:768px) {

.LP_page .only_pc {

  display: none;

}



#page-top {

  display: none !important;

}



}

/*---------------------------shareボタン、shareテキスト*/





/*PC------------------------------------------------------*/

@media screen and  (min-width:769px) {

  .LP_page .only_sp {

    display: none;

  }



  .LP_page_inner {

    position: relative;

    z-index: 1;

    width: 37.5rem;

    min-height: 100vh;

    margin: -100vh auto 0;

  }



  .LP_page_inner::before {

    position: absolute;

    z-index: -1;

    top: 0;

    left: 50%;

    translate: -50% 0;

    width: 40rem;

    height: 100%;

    background: #fff;

    opacity: .3;

    content: "";

    filter: drop-shadow(.3rem .5rem 1rem rgba(183, 183, 183, .75));

  }



  .fixed_area {

    position: sticky;

    top: 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    width: 100%;

    height: 100vh;

    margin: 0 auto;

    background: linear-gradient(#d9f5ff 50%, #8dc584 50%);

  }



  .fixed_area::before {

    position: absolute;

    z-index: -1;

    left: 0;

    width: 100%;

    height: 100%;

    background: url(../img/bg_pc.jpg) center center / 100% auto no-repeat;

    content: "";

  }

  

  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

    width: calc((100% - 40rem) / 2);

    height: 100%;

  }



  .fixed_right > div {

    margin-left: 1.5rem;

  }



  .nav_img {

    position: relative;

    z-index: 1;

    width: 28rem;

    margin-bottom: -7.3rem;

  }



  .PCnav_list {

    width: 24rem;

    margin: 0 auto;

    padding: 8rem 2.5rem .3rem;

    border: solid var(--color_regular) .1rem;

    border-radius: .9rem;

    background: #fff;

    filter: drop-shadow(.1rem .2rem 0 rgba(0, 0, 0, .1));

  }



  .PCnav_list li {

    position: relative;

  }



  .PCnav_list li:nth-of-type(n+2)::before {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: .1rem;

    background: linear-gradient(to right, #b3b3b3 .4rem, transparent .4rem) center center / .8rem auto repeat-x;

    content: "";

  }



  .PCnav_list li a {

    padding: 1.6rem 0;

    font-size: 1.8rem;

    font-weight: 700;

    letter-spacing: .02em;

    text-align: center;

  }



}

/*------------------------------------------------------PC*/





/*レスポンシブ対応-------------------------------*/

@media screen and (max-width: 1440px) and (min-width: 769px) {

  html {

    font-size: calc(10 * (100vw / 1440));

  }

}



@media screen and (max-width: 768px) {

  html {

    font-size: calc(10 * (100vw / 375));

  }

}

/*-------------------------------レスポンシブ＆タブレット対応*/