@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');



/*--------------------------------

            CSS Animation

 --------------------------------*/

@keyframes fadeInUp {

  0% {

    transform: translate(0, 3rem) scale(0.8);

    opacity: 0;

  }

  100% {

    opacity: 1;

    transform: translate(0, 0) scale(1);

  }

}

@keyframes rotate {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

@keyframes pyonpyon {

  0% {

      transform: translateY(0);

  }

  10% {

      transform: translateY(-5px);

  }

  20% {

      transform: translateY(0);

  }

  30% {

      transform: translateY(-5px);

  }

  40% {

      transform: translateY(0);

  }

}

@keyframes bounce {

  0% {

      transform: rotate(0deg);

  }

  10% {

      transform: rotate(-2deg);

  }

  20% {

      transform: rotate(0deg);

  }

  30% {

      transform: rotate(-2deg);

  }

  40% {

      transform: rotate(0deg);

  }

}

@keyframes shake {

  0% {

      rotate: -1deg

  }

  50% {

      rotate: 1deg

  }

  to {

      rotate: -1deg

  }

}

@keyframes kirakira {

  0%, 100% {

    transform: scale(1) rotate(10deg);

  }



  50% {

    transform: scale(1.15) rotate(-10deg);

  }

}



 /* txtBound

==================================*/

@keyframes txtBound {

  0%, 12%, 25%, 100% {

    translate: unset;

  }

  20% {

    translate: 0 calc(-6 * (60rem / 390));

  }

}

.is-show .txtBound .each_txt {

  animation: txtBound 5s ease-in-out;

}

.txtBound .each_txt:nth-of-type(2) {

  animation-delay: .15s;

}

.txtBound .each_txt:nth-of-type(3) {

  animation-delay: .3s;

}

.txtBound .each_txt:nth-of-type(4) {

  animation-delay: .45s;

}

.txtBound .each_txt:nth-of-type(5) {

  animation-delay: .6s;

}

.txtBound .each_txt:nth-of-type(6) {

  animation-delay: .75s;

}

.txtBound .each_txt:nth-of-type(7) {

  animation-delay: .9s;

}

.txtBound .each_txt:nth-of-type(8) {

  animation-delay: 1.05s;

}

.txtBound .each_txt:nth-of-type(9) {

  animation-delay: 1.2s;

}

.txtBound .each_txt:nth-of-type(10) {

  animation-delay: 1.35s;

}

.txtBound .each_txt:nth-of-type(11) {

  animation-delay: 1.5s;

}

.txtBound .each_txt:nth-of-type(12) {

  animation-delay: 1.65s;

}

.txtBound .each_txt:nth-of-type(13) {

  animation-delay: 1.8s;

}

.txtBound .each_txt:nth-of-type(14) {

  animation-delay: 1.95s;

}



/* scroll_bar

==================================*/

@keyframes scroll_bar {

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: -100rem 0;

  }

}

@keyframes scroll_bar-right {

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: 100rem 0;

  }

}

.scroll_bar{

  width: 100%;

  height: calc(40 * (var(--rate)));

  background-image: url(/page/lp/theorganicdays/img/202606/scroll_bar.jpg);

  background-repeat: repeat-x;

  background-size: calc(457 * (var(--rate)));

  background-color: var(--color_1);

  animation: scroll_bar 26s linear infinite;

}

.scroll_bar.right{

  animation: scroll_bar-right 26s linear infinite;

}





/* inview animation

==================================*/

#lp_contents .fadeIn{

  opacity: 0;

  transition: 2s;

}



#lp_contents .fadeInUp{

  opacity: 0;

  transition: 2s;

}



#lp_contents .fadeInLeft{

  opacity: 0;

  transform: translate(-3rem, 0);

  transition: 1s;

}

#lp_contents .fadeInRight{

  opacity: 0;

  transform: translate(3rem, 0);

  transition: 1s;

}



#lp_contents .bounceLeft{

  opacity: 0;

  transform: scale(0.7);

  transform-origin: bottom left;

  transition: 0.5s cubic-bezier(0.68, 0.03, 0.3, 0.99);

}



#lp_contents .zoom {

  opacity: 0;

  transform: scale(0.6);

  transition: all 0.5s;

}



#lp_contents .js-textAnime span{

  transition: all 0.5s;

  display: inline-block;

  opacity: 0;

  transform: translateY(calc(10 * (var(--rate))));

}



#lp_contents .fadeIn.is-show,

#lp_contents .fadeInUp.is-show,

#lp_contents .fadeInLeft.is-show,

#lp_contents .fadeInRight.is-show,

#lp_contents .bounceLeft.is-show,

#lp_contents .zoom.is-show,

#lp_contents .js-textAnime span.is-show{

  transform: translate(0, 0) scale(1);

  -ms-filter: blur(0);

  filter: blur(0);

  opacity: 1;

}

#lp_contents .fadeInUp.is-show{

  animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;

}





/*--------------------------------

                共 通

 --------------------------------*/



main,#Wrap,.wrapBottom,.wrapTop{

  width: 100%;

  max-width: 100%;

}



#header_txt_slider,

#header_img_slider {

  position: relative;

  z-index: 100;

}



#FooterWrap{

  position: relative;

  z-index: 100;

  background-color: #fff;

}



#lp_contents *{

  box-sizing: border-box;

}



#lp_contents{

  /*root*/

  --rate: 50rem / 390;

  /*--font_base: "M PLUS Rounded 1c", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;*/

  --font_eng: "Ultra", serif;

  --bg-default: #F8F8EC;

  --color_font: #212121;

  --color_sub: #888;

  --color_border: #EBE9E7;

  --color_1: #234333;

  --color_2: #2B865B;

  --color_3: #C4D8CE;

  --color_4: #E4EFE9;

  --color_5: #F4F5B5;

  --color_6: #F8F8EC;

  --color_white: #fff;

  --color_button: #2B865B;

  --color_line: #03C154;

  --box-shadow: 0 calc(6 * (var(--rate))) 0 var(--color_1);

  

  /*style*/

  font-family: var(--font_base);

  font-family: var(--font-base);

  font-size: calc(16 * (var(--rate)));

  font-weight: 500;

  letter-spacing: 0.05em;

  line-height: 2;

  text-align: center;



  display: flex;

  justify-content: center;



  color: var(--color_font);

  background-color: var(--color_1);

  position: relative;

}

#lp_contents .sp_only{display: none;}

#lp_contents img{width: 100%;display: block;height: auto; image-rendering: -webkit-optimize-contrast; -webkit-backface-visibility: hidden;}

#lp_contents a{display: block;width: 100%;cursor: pointer;transition: all 0.5s;color: inherit;}

#lp_contents a:hover{opacity: .8}

#lp_contents ul li,#lp_contents ol li{list-style: none;}

#lp_contents section{

  position: relative;

  display: grid;

  padding: calc(60 * (var(--rate))) calc(15 * (var(--rate)));

}

#lp_contents .lp_inner{

  position: relative;

  z-index: 3;

  width: 30vw;

  width: 50rem;

  background-image: url(/page/lp/theorganicdays/img/202606/bg_01.jpg);

  background-size: calc(120 * (var(--rate))) calc(120 * (var(--rate)));

  order: 2;

  padding-bottom: calc(80 * (var(--rate)));

}



/*------------ Text ------------*/

#lp_contents h1,#lp_contents h2,#lp_contents h3,#lp_contents h4{padding: 0;float: none;font-weight: inherit;}

#lp_contents p {

  display: block;

  margin: 0;

  font-size: calc(16 * (var(--rate)));

  font-weight: 500;

  line-height: 2;

}

#lp_contents sup{

  display: inline-block;

  font-family: var(--font-base);

  font-size: 50%;

  margin-top: -0.6rem;

}

#lp_contents .note{

  display: inline-block;

  width: fit-content;

  margin: auto;

  text-align: left;

  font-size: calc(10 * (var(--rate)));

  font-weight: 500;

  line-height: 1.75;

  color: var(--color_sub);

}

#lp_contents p .note{

  margin-top: 0;

}

#lp_contents .bold{

  font-weight: 800;

}

#lp_contents .border{

  font-weight: 800;

  background: linear-gradient(transparent 75%, var(--color_5) 25%);

}

#lp_contents .eng{

  font-family: var(--font_eng);

  font-weight: 400;

}

#lp_contents .ttl_box{

  display: grid;

  gap: calc(8 * (var(--rate)));

}

#lp_contents .main_ttl{

  font-family: var(--font_eng);

  font-size: calc(35 * (var(--rate)));

  line-height: 1.2;

  color: var(--color_1);

}

#lp_contents .main_ttl .jpn{

  display: block;

  margin-top: calc(12 * (var(--rate)));

  font-family: var(--font_base);

  font-family: var(--font-base);

  font-size: calc(12 * (var(--rate)));

  font-weight: 900;

  letter-spacing: 0.2em;

}

#lp_contents .sub_ttl{

  font-size: calc(20 * (var(--rate)));

  font-weight: 800;

  letter-spacing: 0.1em;

  line-height: 1.5;

}



/*------------ Date ------------*/

#lp_contents .event_date{

  display: flex;

  align-items: center;

  justify-content: center;

  gap: calc(7 * (var(--rate)));

  width: fit-content;

  margin: auto;

  padding: calc(2 * (var(--rate))) calc(20 * (var(--rate)));

  background-color: var(--color_4);

  border-radius: calc(100 * (var(--rate)));

}



#lp_contents .event_date .dot{

  display: block;

  width: calc(25 * (var(--rate)));

  height: calc(6 * (var(--rate)));

  background-image: radial-gradient(circle, var(--color_2) calc(1.5 * (var(--rate))), transparent calc(1.5 * (var(--rate))));

  background-position: 0 0;

  background-size: calc(5 * (var(--rate))) calc(6 * (var(--rate)));

}



#lp_contents .event_date-day{

  position: relative;

  display: flex;

  flex-wrap: wrap;

  align-items: anchor-center;

  gap: calc(5 * (var(--rate)));

  font-family: var(--font_eng);

  font-size: calc(22 * (var(--rate)));

  line-height: 1;

  color: var(--color_2);

}



#lp_contents .event_date-day .week{

  display: flex;

  align-items: center;

  justify-content: center;

  width: calc(20 * (var(--rate)));

  height: calc(20 * (var(--rate)));

  border-radius: 100%;

  font-family: var(--font_base);

  font-family: var(--font-base);

  font-size: calc(13 * (var(--rate)));

  font-weight: 800;

  line-height: 1;

  color: var(--color_white);

  background-color: var(--color_2);

}



#lp_contents .event_date-day .time{

  font-size: calc(16 * (var(--rate)));

}



/*------------ arrow ------------*/

#lp_contents .arrow{

  display: block;

  width: calc(8 * (var(--rate)));

  height: calc(8 * (var(--rate)));

  border-right: 3px solid;

  border-bottom: 3px solid;

  rotate: 45deg;

}

#lp_contents .plus{

  position: relative;

  width: calc(10 * (var(--rate)));

  height: calc(10 * (var(--rate)));

}

#lp_contents .plus:before,

#lp_contents .plus:after{

  content: '';

  width: 100%;

  height: 1px;

  background-color: #000;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}

#lp_contents .plus:after{

  rotate: 90deg;

}



/*------------ Button ------------*/

#lp_contents .link_btn-box{

  display: grid;

  gap: calc(10 * (var(--rate)));

}



#lp_contents .link_btn-txt{

  font-size: calc(14 * (var(--rate)));

  line-height: 1.5;

}



#lp_contents .link_btn{

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: calc(4 * (var(--rate)));

  width: calc(300 * (var(--rate)));

  min-height: calc(45 * (var(--rate)));

  margin: 0 auto calc(6 * (var(--rate)));

  padding: calc(6 * (var(--rate)));

  line-height: 1.4;

  border-radius: calc(100 * (var(--rate)));

  color: var(--color_white);

  background-color: var(--color_button);

  box-shadow: var(--box-shadow);

  transition: all 0.5s;

}



#lp_contents .link_btn:not(.ComingSoon):hover{

  transform: translateY(calc(6 * (var(--rate))));

  box-shadow: none;

  opacity: 1;

}



#lp_contents .link_btn.ComingSoon{

  margin: auto;

  pointer-events: none;

  color: var(--color_sub);

  background-color: var(--color_4);

  box-shadow: none;

  opacity: 1;

}



#lp_contents .link_btn .arrow{

  position: absolute;

  top: 0;

  bottom: 0;

  right: calc(15 * (var(--rate)));

  margin: auto;

  rotate: -45deg;

  border-color: var(--color_white);

}



#lp_contents .link_btn img{

  width: calc(25 * (var(--rate)));

}



#lp_contents .link_txt{

  display: flex;

  align-items: center;

  gap: calc(8 * (var(--rate)));

  font-size: calc(15 * (var(--rate)));

  line-height: 1;

  text-decoration: underline;

  color: var(--color_2);

}



/*------------ frame ------------*/

#lp_contents .frame{

  position: relative;

  display: grid;

  gap: calc(25 * (var(--rate)));

  width: calc(360 * (var(--rate)));

  margin: 0 auto calc(6 * (var(--rate)));

  padding-block: calc(10 * (var(--rate))) calc(40 * (var(--rate)));

  box-shadow: var(--box-shadow);

  border: 1px solid var(--color_1);

  border-radius: calc(20 * (var(--rate)));

  background-color: var(--color_white);

}



#lp_contents .frame:before{

  content: '';

  position: absolute;

  top: calc(-25.5 * (var(--rate)));

  left: 0;

  right: 0;

  z-index: 2;

  width: calc(310 * (var(--rate)));

  height: calc(26 * (var(--rate)));

  margin: auto;

  background-image: url(/page/lp/theorganicdays/img/202606/frame.png);

  background-repeat: no-repeat;

  background-size: 100%;

}



#lp_contents .content_box{

  display: grid;

  gap: calc(20 * (var(--rate)));

}





/*--------------------------------

              contents

--------------------------------*/



/* sec_mv

==================================*/

#lp_contents .sec_mv{

  padding: 0;

}



#lp_contents .sec_mv .mv_wrap{

  padding-block: calc(45 * (var(--rate))) calc(25 * (var(--rate)));

}



#lp_contents .sec_mv .mv_ttl{

  margin: 0 auto calc(20 * (var(--rate)));

}



#lp_contents .sec_mv .mv_ttl-txt{

  font-size: calc(24 * (var(--rate)));

  font-weight: 800;

  line-height: 1.5;

  letter-spacing: 0.15em;

}



#lp_contents .sec_mv .mv_ttl-txt svg{

  display: block;

  width: calc(290 * (var(--rate)));

  margin: 0 auto calc(5 * (var(--rate)));

}



#lp_contents .sec_mv .logo_ck{

  width: calc(160 * (var(--rate)));

  margin: 0 auto calc(25 * (var(--rate)));

}



#lp_contents .sec_mv .cmpn_anker{

  display: flex;

  justify-content: center;

  gap: calc(20 * (var(--rate)));

}



#lp_contents .sec_mv .cmpn_anker li{

  position: relative;

  width: calc(130 * (var(--rate)));

  height: calc(130 * (var(--rate)));

}

#lp_contents .sec_mv .cmpn_anker .txt_10off{

  padding-top: calc(30 * (var(--rate)));

  transition-delay: 1s;

}

#lp_contents .sec_mv .cmpn_anker .txt_25point{

  padding-top: calc(16 * (var(--rate)));

  transition-delay: 1.5s;

}



#lp_contents .sec_mv .cmpn_anker li:before{

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: calc(130 * (var(--rate)));

  height: calc(125 * (var(--rate)));

  margin: auto;

  background-image: url(/page/lp/theorganicdays/img/202606/shape_01.svg);

  background-repeat: no-repeat;

  background-size: 100%;

  filter: drop-shadow(0 0 calc(20 * (var(--rate))) #0000001A);

  /*animation: rotate 10s linear infinite;*/

  z-index: 1;

}



#lp_contents .sec_mv .cmpn_anker a{

  position: relative;

  width: 100%;

  height: 100%;

  z-index: 2;

  pointer-events: painted;

}



#lp_contents .sec_mv .cmpn_anker img{

  position: relative;

  z-index: 2;

  margin: auto;

}

#lp_contents .sec_mv .cmpn_anker .txt_10off img{

  width: calc(93 * (var(--rate)));

}

#lp_contents .sec_mv .cmpn_anker .txt_25point img{

  width: calc(86 * (var(--rate)));

  padding-left: calc(9 * (var(--rate)));

  box-sizing: content-box;

}



#lp_contents .sec_mv .cmpn_anker .arrow{

  position: absolute;

  top: auto;

  left: 0;

  right: 0;

  bottom: calc(18 * (var(--rate)));

  margin: auto;

  border-color: var(--color_2);

  z-index: 2;

  transition: all 0.5s;

}



#lp_contents .sec_mv .cmpn_anker li:hover .arrow{

  bottom: calc(14 * (var(--rate)));

}



#lp_contents .sec_mv .event_date{

  width: 100%;

  padding: calc(10 * (var(--rate)));

  background-color: var(--color_1);

  border-radius: 0;

}



#lp_contents .sec_mv .event_date .dot{

  width: calc(30 * (var(--rate)));

  background-image: radial-gradient(circle, var(--color_6) calc(1.5 * (var(--rate))), transparent calc(1.5 * (var(--rate))));

}



#lp_contents .sec_mv .event_date-day{

  font-size: calc(23 * (var(--rate)));

  color: var(--color_6);

}



#lp_contents .sec_mv .event_date-day .week{

  color: var(--color_1);

  background-color: var(--color_6);

}



#lp_contents .event_date-day .time{

  font-size: calc(16 * (var(--rate)));

}





/* sec_muse

==================================*/

#lp_contents .sec_muse{

  padding: calc(40 * (var(--rate))) calc(25 * (var(--rate))) calc(65 * (var(--rate)));

}





/* sec_mission

==================================*/

#lp_contents .sec_mission{

  padding-top: 0;

  gap: calc(60 * (var(--rate)));

}



#lp_contents .sec_mission .mission_ttl{

  font-size: calc(20 * (var(--rate)));

  font-weight: 800;

  letter-spacing: 0.1em;

  line-height: 1.5;

  color: var(--color_1);

}



#lp_contents .sec_mission .mission_ttl img{

  display: inline-block;

  width: calc(260 * (var(--rate)));

  margin-right: calc(7 * (var(--rate)));

}



#lp_contents .sec_mission .mission_list{

  display: grid;

  gap: calc(25 * (var(--rate)));

  width: calc(315 * (var(--rate)));

  margin: auto;

}



#lp_contents .sec_mission .mission_list li{

  padding-top: calc(25 * (var(--rate)));

  background-image : linear-gradient(to right, #EBE9E7 3px, transparent 3px);

  background-size: 8px 3px;

  background-repeat: repeat-x;

  background-position: left top;

}



#lp_contents .sec_mission .mission_num{

  margin-bottom: calc(10 * (var(--rate)));

  font-size: calc(18 * (var(--rate)));

  font-weight: 900;

  line-height: 1;

  color: var(--color_1);

}



#lp_contents .sec_mission .mission_num .num{

  font-family: var(--font_eng);

  font-size: calc(22 * (var(--rate)));

  font-weight: 400;

}



#lp_contents .sec_mission .mission_bonus{

  margin-bottom: calc(10 * (var(--rate)));

  font-size: calc(20 * (var(--rate)));

  font-weight: 900;

  line-height: 1;

  color: var(--color_1);

}



#lp_contents .sec_mission .mission_txt{

  line-height: 1.75;

}



#lp_contents .sec_mission .mission_bonus-txt{

  font-size: calc(18 * (var(--rate)));

  font-weight: 800;

  line-height: 1.5;

}



#lp_contents .sec_mission .mission_bonus-head{

  font-size: calc(21 * (var(--rate)));

  font-weight: 900;

  line-height: 1.5;

  color: var(--color_1);

}



#lp_contents .sec_mission .mission_bonus-head .eng{

  margin-left: calc(4 * (var(--rate)));

  font-size: calc(27 * (var(--rate)));

}



#lp_contents .sec_mission .mission_note{

  text-align: justify;

  font-size: calc(13 * (var(--rate)));

  font-weight: 400;

  letter-spacing: 0;

  line-height: 1.75;

}



#lp_contents .sec_mission .mission_note .dot{

  color: var(--color_2);

}



#lp_contents .sec_mission .step_list{

  display: grid;

  gap: calc(8 * (var(--rate)));

  padding: calc(15 * (var(--rate)));

  background-color: #F8F8F8;

  border-radius: calc(10 * (var(--rate)));

}



#lp_contents .sec_mission .step_ttl{

  font-size: calc(16 * (var(--rate)));

  font-weight: 800;

  line-height: 1.2;

}



#lp_contents .sec_mission .step{

  display: grid;

  grid-template-columns: calc(20 * (var(--rate))) 1fr;

  gap: calc(10 * (var(--rate)));

}



#lp_contents .sec_mission .step dt{

  display: flex;

  align-items: center;

  justify-content: center;

  width: calc(20 * (var(--rate)));

  height: calc(20 * (var(--rate)));

  margin-top: calc(2 * (var(--rate)));

  font-size: calc(12 * (var(--rate)));

  color: var(--color_white);

  background-color: var(--color_2);

  color: var(--color_white);

  border-radius: 100%;

}



#lp_contents .sec_mission .step dd{

  text-align: left;

  line-height: 1.75;

}





/* sec_cmpn

==================================*/

#lp_contents .sec_cmpn{

  gap: calc(50 * (var(--rate)));

  background-color: var(--color_6);

}



#lp_contents .sec_cmpn .cmpn_list{

  display: grid;

  gap: calc(55 * (var(--rate)));

}



#lp_contents .sec_cmpn .frame{

  gap: calc(30 * (var(--rate)));

  padding: calc(10 * (var(--rate))) calc(20 * (var(--rate))) calc(30 * (var(--rate)));

}



/*cmpn_wrap*/

#lp_contents .sec_cmpn .cmpn_wrap{

  display: grid;

  gap: calc(15 * (var(--rate)));

}



#lp_contents .sec_cmpn .cmpn_num{

  font-family: var(--font_eng);

  font-size: calc(16 * (var(--rate)));

  line-height: 1;

  color: var(--color_1);

}



#lp_contents .sec_cmpn .cmpn_num .num{

  font-size: calc(22 * (var(--rate)));

}



#lp_contents .sec_cmpn .cmpn_ttl{

  position: relative;

  display: grid;

  gap: calc(8 * (var(--rate)));

  color: var(--color_1);

}



#lp_contents .sec_cmpn .cmpn_lead{

  font-size: calc(18 * (var(--rate)));

  font-weight: 800;

  line-height: 1;

}



#lp_contents .sec_cmpn .cmpn_txt{

  font-size: calc(16 * (var(--rate)));

  font-weight: 600;

  line-height: 1.75;

}



#lp_contents .sec_cmpn .cmpn_main_txt{

  font-size: calc(28 * (var(--rate)));

  font-weight: inherit;

  line-height: 1;

}

#lp_contents .sec_cmpn .cmpn_2 .cmpn_main_txt{

  font-size: calc(22 * (var(--rate)));

  font-weight: 900;

}



#lp_contents .sec_cmpn .cmpn_main_txt sup{

  font-size: 30%;

  transform: translateY(calc(-5 * (var(--rate))));

}



#lp_contents .sec_cmpn .cmpn_main_txt .border{

  padding: 0 calc(5 * (var(--rate)));

}



#lp_contents .sec_cmpn .cmpn_main_txt .eng .big{

  font-size: calc(36 * (var(--rate)));

}

#lp_contents .sec_cmpn .cmpn_2 .cmpn_main_txt .eng .big{

  font-size: calc(30 * (var(--rate)));

  font-weight: inherit;

}



#lp_contents .sec_cmpn .cmpn_icon{

  display: grid;

  align-items: center;

  grid-template-columns: calc(115 * (var(--rate))) 1fr;

  gap: calc(15 * (var(--rate)));

  width: 100%;

  padding: calc(15 * (var(--rate)));

  background-color: var(--color_6);

}



#lp_contents .sec_cmpn .cmpn_icon p{

  text-align: left;

  font-size: calc(14 * (var(--rate)));

  font-weight: 400;

  line-height: 1.5;

}



#lp_contents .sec_cmpn .icon{

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: calc(24 * (var(--rate)));

  font-family: "Noto Sans JP", sans-serif;

  font-size: calc(12 * (var(--rate)));

  line-height: 1;

}

#lp_contents .sec_cmpn .icon.limited{

  background-color: #F3DED7;

}

#lp_contents .sec_cmpn .icon.point{

  background-color: #F1F2D3;

}



/*tips_wrap*/

#lp_contents .sec_cmpn .tips_wrap{

  display: grid;

  gap: calc(15 * (var(--rate)));

}



#lp_contents .sec_cmpn .tips_txt{

  font-size: calc(15 * (var(--rate)));

  font-weight: 600;

  line-height: 1.75;

}



#lp_contents .sec_cmpn .table_block{

  border-radius: calc(10 * (var(--rate)));

  overflow: hidden;

  border: 1px solid #EDEDED;

}



#lp_contents .sec_cmpn .table_block dt{

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: calc(28 * (var(--rate)));

  font-size: calc(15 * (var(--rate)));

  font-weight: 600;

  line-height: 1;

  background-color: var(--color_3);

}



#lp_contents .sec_cmpn .table_block dd{

  display: grid;

  gap: calc(15 * (var(--rate)));

  padding-block: calc(15 * (var(--rate))) calc(20 * (var(--rate)));

}



#lp_contents .sec_cmpn .brand_list{

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: calc(3 * (var(--rate)));

}



#lp_contents .sec_cmpn .tips_note{

  font-size: calc(13 * (var(--rate)));

  line-height: 1;

}





/* sec_event

==================================*/

#lp_contents .sec_event{

  gap: calc(25 * (var(--rate)));

  background-image: url(/page/lp/theorganicdays/img/202606/bg_02.jpg);

  background-size: calc(79 * (var(--rate))) calc(120 * (var(--rate)));

}



#lp_contents .sec_event .calendar_wrap{

  display: grid;

  gap: calc(20 * (var(--rate)));

}



#lp_contents .sec_event .calendar_wrap dl{

  display: flex;

  align-items: start;

  justify-content: right;

  gap: calc(25 * (var(--rate)));

}



#lp_contents .sec_event .calendar_wrap .event_date-day{

  justify-content: right;

  font-size: calc(18 * (var(--rate)));

  color: var(--color_1);

}



#lp_contents .sec_event .calendar_wrap .event_date-day .week{

  width: calc(18 * (var(--rate)));

  height: calc(18 * (var(--rate)));

  font-size: calc(11 * (var(--rate)));

  background-color: var(--color_1);

  color: var(--color_white);

}



#lp_contents .sec_event .calendar_wrap .event_date-day .time{

  font-size: calc(14 * (var(--rate)));

}



#lp_contents .sec_event .calendar_wrap .event_date-day:after{

  content: '';

  position: absolute;

  top: 0;

  bottom: 0;

  right: calc(-20 * (var(--rate)));

  margin: auto;

  width: calc(8 * (var(--rate)));

  height: calc(8 * (var(--rate)));

  border-radius: 100%;

  background-color: var(--color_2);

  z-index: 2;

}



#lp_contents .sec_event .calendar_wrap dd{

  position: relative;

  display: grid;

  gap: calc(15 * (var(--rate)));

}



#lp_contents .sec_event .calendar_wrap .speech_block{

  position: relative;

}



#lp_contents .sec_event .calendar_wrap .speech_block:before{

  content: '';

  position: absolute;

  top: calc(-20 * (var(--rate)));

  left: calc(-9.5 * (var(--rate)));

  width: 1px;

  height: calc(100% + calc(25 * (var(--rate))));

  background-color: var(--color_1);

}



#lp_contents .sec_event .calendar_wrap .ComingSoon:before{

  height: calc(100% + calc(65 * (var(--rate))));

  background-color: initial;

  background-image: linear-gradient(to bottom, var(--color_1) 3px, transparent 3px);

  background-size: 3px 8px;

  background-repeat: repeat-y;

  background-position: left bottom;

}



#lp_contents .sec_event .calendar_wrap .start:before{

  top: calc(20 * (var(--rate)));

  height: calc(100% - calc(20 * (var(--rate))));

}



#lp_contents .sec_event .calendar_wrap dl:first-child .speech_block:before{

  top: calc(-25 * (var(--rate)));

}



#lp_contents .sec_event .calendar_wrap dl:last-child .speech_block:before{

  content: none;

}



#lp_contents .sec_event .calendar_wrap .speech{

  position: relative;

  display: grid;

  gap: calc(5 * (var(--rate)));

  width: calc(235 * (var(--rate)));

  margin-left: calc(20 * (var(--rate)));

  border-radius: calc(20 * (var(--rate)));

  padding: calc(12 * (var(--rate))) calc(20 * (var(--rate)));

  background-color: var(--color_6);

}



#lp_contents .sec_event .calendar_wrap .speech:before{

  content: '';

  position: absolute;

  top: calc(15 * (var(--rate)));

  left: calc(-12 * (var(--rate)));

  width: calc(14 * (var(--rate)));

  height: calc(13 * (var(--rate)));

  background-image: url(/page/lp/theorganicdays/img/202606/speech_arrow.svg);

  background-repeat: no-repeat;

  background-size: 100%;

}



#lp_contents .sec_event .calendar_wrap .event_ttl{

  font-size: calc(16 * (var(--rate)));

  font-weight: bold;

  line-height: 1.5;

  color: var(--color_1);

}



#lp_contents .sec_event .calendar_wrap .event_lead{

  font-weight: 800;

  line-height: 1.2;

}



#lp_contents .sec_event .calendar_wrap .event_txt{

  text-align: left;

  font-size: calc(15 * (var(--rate)));

  line-height: 1.75;

}



#lp_contents .sec_event .calendar_wrap .link_txt .arrow{

  rotate: -135deg;

}



#lp_contents .sec_event .calendar_wrap .muse .event_ttl{

  color: #D36592;

}



#lp_contents .sec_event .calendar_wrap .ComingSoon .speech{

  background-color: var(--color_white);

}

#lp_contents .sec_event .calendar_wrap .ComingSoon .speech:before{

  background-image: url(/page/lp/theorganicdays/img/202606/speech_arrow-white.svg);

}

#lp_contents .sec_event .calendar_wrap .ComingSoon .event_ttl{

  color: var(--color_sub);

  font-weight: 500;

}



#lp_contents .sec_event .calendar_wrap .start .speech{

  background-color: #EFFFE6;

}

#lp_contents .sec_event .calendar_wrap .start .speech:before{

  background-image: url(/page/lp/theorganicdays/img/202606/speech_arrow-green.svg);

}





/* sec_line

==================================*/

#lp_contents .sec_line{

  background-color: var(--color_6);

  padding-top: calc(75 * (var(--rate)));

}



#lp_contents .sec_line .line_wrap{

  position: relative;

  display: grid;

  gap: calc(20 * (var(--rate)));

  width: calc(360 * (var(--rate)));

  margin: 0 auto calc(6 * (var(--rate)));

  padding: calc(40 * (var(--rate))) 0 calc(30 * (var(--rate)));

  border: 2px solid var(--color_line);

  border-radius: calc(20 * (var(--rate)));

  background-color: var(--color_white);

}



#lp_contents .sec_line .coupon_ttl{

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  width: fit-content;

  margin: auto;

  padding: calc(5 * (var(--rate))) calc(20 * (var(--rate)));

  background-color: var(--color_line);

  border-radius: calc(100 * (var(--rate)));

  transform: translateY(-50%);

  z-index: 2;

  font-family: var(--font_eng);

  font-size: calc(16 * (var(--rate)));

  line-height: 1.2;

  color: var(--color_white);

}



#lp_contents .sec_line .line_txt{

  line-height: 1.75;

}



#lp_contents .sec_line .line_txt .bold{

  padding-bottom: calc(4 * (var(--rate)));

  color: var(--color_line);

  background-image: linear-gradient(to right, var(--color_line) 3px, transparent 3px);

  background-size: 6px 3px;

  background-repeat: repeat-x;

  background-position: left bottom;

}



#lp_contents .sec_line .line_lead{

  font-size: calc(18 * (var(--rate)));

  font-weight: 700;

  line-height: 1.75;

}



#lp_contents .sec_line .link_btn{

  gap: calc(10 * (var(--rate)));

  width: calc(250 * (var(--rate)));

  background-color: var(--color_line);

}



#lp_contents .sec_line .link_btn img{

  width: calc(30 * (var(--rate)));

}





/* sec_logo

==================================*/

#lp_contents .sec_logo{

  gap: calc(20 * (var(--rate)));

  padding: calc(80 * (var(--rate))) 0;

  overflow: hidden;

}



#lp_contents .sec_logo .logo_ttl{

  display: grid;

  gap: calc(4 * (var(--rate)));

  font-size: calc(16 * (var(--rate)));

  font-weight: 800;

  letter-spacing: 0.15em;

  line-height: 1.75;

}



#lp_contents .sec_logo .logo_ttl svg{

  display: block;

  width: calc(250 * (var(--rate)));

  margin: auto;

}



#lp_contents .sec_logo .logo_lead{

  font-size: calc(22 * (var(--rate)));

  font-weight: 800;

  letter-spacing: 0.15em;

  line-height: 1.75;

}



#lp_contents .sec_logo .logo_lead .border{

  padding-inline: calc(20 * (var(--rate))) calc(10 * (var(--rate)));

  background: linear-gradient(transparent 50%, var(--color_white) 50%);

}



#lp_contents .sec_logo .logo_ck{

  display: inline-block;

  width: calc(150 * (var(--rate)));

  margin-left: calc(6 * (var(--rate)));

}





/* sec_about

==================================*/

#lp_contents .sec_about{

  gap: calc(30 * (var(--rate)));

  width: calc(360 * (var(--rate)));

  margin: auto;

  padding: 0 0 calc(30 * (var(--rate)));

  border-radius: calc(20 * (var(--rate)));

  background-color: var(--color_white);

  overflow: hidden;

}



#lp_contents .sec_about .main_ttl{

  font-size: calc(22 * (var(--rate)));

}



#lp_contents .sec_about .about_wrap{

  display: grid;

  gap: calc(25 * (var(--rate)));

  padding: 0 calc(20 * (var(--rate)));

}



#lp_contents .sec_about .about_lead{

  display: grid;

  gap: calc(15 * (var(--rate)));

}



#lp_contents .sec_about .about_lead P{

  font-size: calc(14 * (var(--rate)));

  letter-spacing: 0;

}



#lp_contents .sec_about .about_link{

  display: grid;

  justify-content: right;

  gap: calc(10 * (var(--rate)));

}



#lp_contents .sec_about .link_txt{

  gap: calc(4 * (var(--rate)));

  justify-content: right;

  font-size: calc(14 * (var(--rate)));

}



#lp_contents .sec_about .link_txt .arrow{

  rotate: -45deg;

}



#lp_contents .sec_about .logo_ck{

  width: calc(180 * (var(--rate)));

  margin: auto;

}





/* star

==================================*/

#lp_contents .star{

  position: absolute;

  z-index: 3;

  animation: kirakira 3s steps(2, end) infinite;

}



#lp_contents .star._01{

  bottom: calc(3 * (var(--rate)));

  right: calc(23 * (var(--rate)));

  width: calc(18 * (var(--rate)));

}



#lp_contents .star._02{

  bottom: calc(15 * (var(--rate)));

  right: calc(10 * (var(--rate)));

  width: calc(17 * (var(--rate)));

}



#lp_contents .star._03{

  top: calc(-5 * (var(--rate)));

  left: calc(20 * (var(--rate)));

  width: calc(18 * (var(--rate)));

}



#lp_contents .star._04{

  top: calc(12 * (var(--rate)));

  left: calc(8 * (var(--rate)));

  width: calc(12 * (var(--rate)));

}





/* character

==================================*/

#lp_contents .character{

  position: absolute;

  z-index: 3;

}



#lp_contents .character._01{

  top: calc(3 * (var(--rate)));

  right: calc(27 * (var(--rate)));

  width: calc(61 * (var(--rate)));

  animation: pyonpyon 2s linear 0.3s infinite;

}



#lp_contents .character._02{

  top: calc(-15 * (var(--rate)));

  left: calc(10 * (var(--rate)));

  width: calc(80 * (var(--rate)));

  animation: bounce 2s linear infinite;

}



#lp_contents .character._03{

  bottom: calc(-15 * (var(--rate)));

  right: calc(6 * (var(--rate)));

  width: calc(60 * (var(--rate)));

  animation: bounce 2s linear infinite;

}

#lp_contents .character._03 .fadeInRight{

  transition-delay: 0.5s;

}



#lp_contents .character._04{

  bottom: calc(-25 * (var(--rate)));

  left: 0;

  width: calc(114 * (var(--rate)));

  animation: shake .4s step-end .1s infinite;

  translate: 0 0;

}

#lp_contents .character._04.is-show{

  translate: calc(270 * (var(--rate))) 0;

  transition: opacity .3s ease 0s, translate 10s ease 0s;

  transition-delay: 0.75s;

}



#lp_contents .character._05{

  top: calc(111 * (var(--rate)));

  left: calc(25 * (var(--rate)));

}

#lp_contents .character._05 img{

  width: calc(67 * (var(--rate)));

  animation: bounce 2s linear infinite;

}



#lp_contents .character._06{

  bottom: calc(126 * (var(--rate)));

  right: calc(15 * (var(--rate)));

}

#lp_contents .character._06 img{

  width: calc(56 * (var(--rate)));

  animation: bounce 2s linear infinite;

}





/*--------------------------------

            Layout  PC

 --------------------------------*/

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

  #lp_contents .full_area{

    position: sticky;

    top: 0;

    bottom: 0;

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

    max-width: 60rem;

    height: 100vh;

    margin: auto;

    padding: 3rem;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

  }



  #lp_contents .left_area{

    left: 0;

    order: 1;

  }



  #lp_contents .left_area svg{

    display: block;

    width: min(360px, calc(360 * (100vw / 1400)));

    margin: auto;

  }



  #lp_contents .right_area{

    right: 0;

    order: 3;

  }



  #lp_contents .right_area .nav_list ul{

    display: grid;

    gap: 2.5rem;

  }



  #lp_contents .right_area .nav_list li{

    font-family: var(--font_eng);

    font-size: 3.6rem;

    line-height: 1.2;

    color: var(--color_6);

  }



  #lp_contents .right_area .nav_list a{

    position: relative;

    width: fit-content;

    margin: auto;

  }



  #lp_contents .right_area .nav_list a:before{

    content: '';

    position: absolute;

    left: -2.3rem;

    top: 0;

    bottom: 0;

    width: 0.8rem;

    height: 0.8rem;

    margin: auto;

    border-radius: 100%;

    background-color: var(--color_5);

    opacity: 0;

    transition: all 0.5s;

  }



  #lp_contents #follow[data-color=Mission] ul li:nth-child(1) a:before,

  #lp_contents #follow[data-color=Campaign] ul li:nth-child(2) a:before,

  #lp_contents #follow[data-color=Calender] ul li:nth-child(3) a:before{

    opacity: 1;

  }

}





/*--------------------------------

            Responsive

 --------------------------------*/

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

  html {

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

  }

}



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

  html {

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

  }



  #lp_contents .left_area,

  #lp_contents .right_area{

    display: none;

  }

}



/*--------------------------------

            Layout  SP

 --------------------------------*/

@media (max-width: 767px) {

  html {

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

  }



  #share{

    z-index: 100 !important;

  }



  .share-txt {

    margin-top: 0 !important;

    margin-bottom: 0 !important;

  }



  .share-txt span {

    margin-top: calc(40 * (100vw / 750));

    margin-bottom: calc(40* (100vw / 750));

  }



  #FooterWrap {

    margin-top: -3rem;

  }



  #lp_contents .sp_only{display: block;}

  #lp_contents .pc_only{display: none;}



  #lp_contents a:hover{opacity: 1}

}