@charset "UTF-8";
/* CSS Document */ :root {
  --clr-base: #101314;
  --fnt-base: noto-sans-cjk-jp, 'Noto Sans JP', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Osaka, Sans-Serif;
  --fnt-pop: 'Poppins', 'Noto Sans JP', sans-serif;
  --fnt-corp: corporate-logo-ver2, 'Noto Sans JP', sans-serif;
  ;
  --clr-ppl: #5845a0;
  --wall-blk: #131313;
  --wall-gry: #f2f2f3;
  --wall-wbl: #3db3d1;
  --wall-pale-wbl: rgba(200, 244, 255, .52);
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .6s var(--easing);
}
/*Common 
===============================================================*/
html {
  font-size: 62.5%;
}
body {
  width: 100%;
  font-family: var(--fnt-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: var(--clr-base);
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: 'liga', 'kern';
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: min(1.8rem, 3.7vw);
  font-weight: 400;
  background: #F0F8FF;
  opacity: 0;
  transition: opacity var(--transit);
}
.wf-active body, body.is-load {
  opacity: 1;
}
.fl {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fl_c {
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.ai_c {
  -ms-align-items: center;
  align-items: center;
}
.fnt-pop {
  font-family: var(--fnt-pop);
}
.fnt-kz {
  font-family: kozuka-gothic-pro, sans-serif;
}
.fnt-corp {
  font-family: var(--fnt-corp);
}
/*Container 
===============================================================*/
#container {
  width: min(75rem, 100%);
  min-height: 100svh;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}
.inner {
  padding-left: min(4rem, 4vw);
  padding-right: min(4rem, 4vw);
}
/*header
===============================================================*/
header {
  width: 100%;
  padding: min(2rem, 5vw) min(2rem, 5vw);
  background: #1c0606;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  color: #fff;
  text-align: center;
  font-weight: 700;
}
/*main
===============================================================*/
main {
  flex: 1;
}
.dot-list > li {
  line-height: calc(44/26);
  padding-left: 1em;
  font-weight: 600;
}
.dot-list > li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
.num-list {
  counter-reset: count 0;
  margin-top: min(3rem, 2.5vw);
}
.num-list > li {
  padding-left: 1em;
}
.num-list > li:not(:first-child) {
  margin-top: min(2.5rem, 2vw);
}
.num-list > li::before {
  counter-increment: count 1;
  content: counter(count)".";
  font-family: var(--fnt-pop);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}
.text-sdw {
  text-shadow: #fff 1px 0px 1px, #fff -1px 0px 1px, #fff 0px -1px 1px, #fff -1px 0px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px;
}
/*title setting*/
.box-title {
  font-family: corporate-logo-ver2, var(--fnt-base);
  text-align: center;
  font-size: min(30px, calc(100vw/20));
  font-weight: 700;
  line-height: calc(40/30);
}
/*hero
=====================================*/
#hero {
  background: url("../imgs/hero_wall.png") no-repeat center/cover;
  padding-top: min(20px, 4vw);
}
/*Content
=====================================*/
.in-text {
  line-height: calc(30/18);
}
.in-text.cnt {
  text-align: center;
}
.fw-b {
  font-weight: 700;
}
.fs_24 {
  font-size: min(24px, calc(100vw/27));
}
ul.att-list > li {
  padding-left: 1.125em;
  line-height: calc(30/24);
}
ul.att-list > li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}
.gra-text {
  background: linear-gradient(#fba8c9 20%, #f31f03);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  -webkit-text-stroke: 1px rgba(107, 107, 107, .15);
}
/*購入特典　+++++++++++++++++++++++*/
.sec-benefits-blc {
  padding-top: min(4rem, 5vw);
  padding-bottom: min(4rem, 5vw);
  background-color: var(--wall-gry);
}
.comment-area {
  margin-top: min(4rem, 5vw);
  font-weight: 700;
}
/*商品　+++++++++++++++++++++++*/
.sec-item-blc {
  padding-top: min(4rem, 8vw);
  padding-bottom: min(10rem, 15vw);
  gap: min(40px, 8vw);
}
.item-tag {
  display: flex;
  justify-content: flex-start;
}
.item-tag > * {
  background-color: var(--wall-wbl);
  color: #fff;
  font-family: corporate-logo-ver2, var(--fnt-base);
  font-size: min(20px, 4vw);
  border-radius: 100vmax;
  padding: .35em 1em;
}
.body-item-list {
  margin-top: min(3rem, 6vw);
  width: min(62rem, 100%);
  margin-left: auto;
  margin-right: auto;
}
.body-item-list dt {
  padding-left: 2em;
}
.body-item-list dd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(1.5rem, 5vw);
  margin-top: min(3rem, 6vw);
}
.body-item-list dd > div {
  gap: min(20px, 3vw);
}
.body-item-list dd figure {
  width: 75%;
}
.body-item-list dd .item-color {
  display: block;
  text-align: center;
  line-height: calc(24/18);
}
.body-item-list dd .item-color span {
  display: inline-block;
}
/*flavor +++++++++++*/
.flavor-item-list dt {
  padding-left: 2em;
  width: min(62rem, 100%);
  margin-left: auto;
  margin-right: auto;
}
.flavor-item-list dd {
  margin-top: min(3rem, 6vw);
}
.flavor-item-list dd::before {
  content: "";
  width: 100%;
  height: 80%;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  background-color: var(--wall-pale-wbl);
}
.flavor-cat {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding-left: min(4rem, 4vw);
  padding-right: min(4rem, 4vw);
  padding-top: min(5rem, 6.67vw);
  padding-bottom: min(5rem, 6.67vw);
}
.flavor-cat::before {
  content: "";
  width: 100%;
  height: calc(100% + min(5rem, 6.67vw));
  position: absolute;
  top: 0;
  left: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  translate: -50% 0;
}
.flavor-cat:nth-child(even) .item-data {
  translate: 0 min(5rem, 6vw);
}
.flavor-cat .item-data {
  /*  width: min(37rem,70%);*/
  min-width: min(37rem, 55%);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  background: rgba(242, 244, 244, .8);
  padding: min(20px, 6vw) min(20px, 3vw);
  border-radius: 10px;
  font-family: corporate-logo-ver2, var(--fnt-base);
}
.flavor-cat:nth-child(even) .item-data {
  margin-left: auto;
}
.flavor-cat .item-data h3 {
  font-weight: 900;
  font-size: min(4.2rem, calc(100vw/18));
  color: var(--clr-title);
  /*  font-feature-settings: "palt";*/
  white-space: nowrap;
}
.flavor-cat .item-data .tag {
  height: min(3.3rem, 6vw);
  margin-top: min(2rem, 4vw);
}
.flavor-cat .item-data .tag.caff {
  aspect-ratio: 1/0.267;
}
.flavor-cat .item-data .tag.gaba {
  aspect-ratio: 1/0.3208;
}
.flavor-cat .item-data .text {
  margin-top: min(1rem, 2vw);
  font-size: min(2rem, 3.6vw);
  line-height: calc(32/22);
  font-feature-settings: "palt";
  text-align: center;
}
.flavor-cat.mint {
  --clr-title: #296b6b;
}
.flavor-cat.mint::before {
  background-image: url("../imgs/wall_mint.png");
}
.flavor-cat.berry {
  --clr-title: #26426d;
}
.flavor-cat.berry::before {
  background-image: url("../imgs/wall_blueberry.png");
}
.flavor-cat.energy {
  --clr-title: #c82563;
}
.flavor-cat.energy::before {
  background-image: url("../imgs/wall_energy.png");
}
.flavor-cat.coconut {
  --clr-title: #b6b7bb;
}
.flavor-cat.coconut::before {
  background-image: url("../imgs/wall_coconut.png");
}
.flavor-cat.chamomile {
  --clr-title: #c6a678;
}
.flavor-cat.chamomile::before {
  background-image: url("../imgs/wall_chamomile.png");
}
/*コース価格　+++++++++++++++++++++++*/
.sec-course-blc {
  padding-bottom: min(30px, 8vw);
}
.box-course-price {
  gap: min(30px, 6vw);
}
.price-item {
  gap: 10px;
}
.price-item .price {
  font-size: min(6rem, calc(100vw/12));
  font-weight: 700;
  padding-top: 1.5em;
}
.price-item .price::before {
  content: "";
  background: url("../imgs/hash.svg") no-repeat center/cover;
  width: 2.7em;
  aspect-ratio: 1/0.5474;
  position: absolute;
  left: 0;
  top: 0;
  translate: -25% 0;
}
.price-item .price span {
  font-weight: 700;
  font-size: 2.1667em;
}
.price-item .text {
  display: flex;
  justify-content: center;
  font-size: min(30px, calc(100vw/24));
  gap: min(40px, 6vw);
  white-space: nowrap;
  font-weight: 700;
}
.price-item .text span:nth-child(2)::before {
  content: "";
  width: .85em;
  aspect-ratio: 1;
  position: absolute;
  left: max(-20px, -3vw);
  top: 50%;
  translate: -50% -50%;
  background: url("../imgs/plus.png") no-repeat center/cover;
}
/*応募方法　+++++++++++++++++++++++*/
.sec-flow-blc {
  background-color: var(--wall-blk);
  background-image: url("../imgs/wall_arrow.png");
  background-repeat: no-repeat;
  background-position: top -1px center;
  background-size: 100%;
  padding-top: min(150px, 20vw);
  padding-bottom: min(150px, 20vw);
}
.sec-flow-blc::after {
  content: "";
  width: 100%;
  aspect-ratio: 1/0.0981;
  position: absolute;
  bottom: -1px;
  left: 0;
  background: url("../imgs/wall_arrow.png") no-repeat center/cover;
  scale: 1 -1;
}
.box-flow-step {
  margin-top: min(4rem, 8vw);
}
.box-flow-step dt {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-start;
}
.box-flow-step dt h3 {
  background: linear-gradient(#bebebe, #eeeeee, #bebebe);
  font-weight: 700;
  font-size: min(24px, calc(100vw / 20));
  padding-left: 1em;
  padding-right: min(2.8em, 10vw);
  clip-path: polygon(0 0, calc(100% - .8em) 0%, 100% 100%, 0% 100%);
}
.box-flow-step dt h3 span {
  font-family: var(--fnt-pop);
  font-size: min(3em, 12vw);
}
.box-flow-step dd {
  margin-top: min(20px, 4vw);
  color: #fff;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap: min(25px, 5vw);
}
.box-flow-step dd + dt {
  margin-top: min(60px, 10vw);
}
.box-flow-step dd .next {
  width: min(135px, 18vw);
}
.bf-detail {
  text-align: center;
  gap: min(15px, 3vw);
}
.box-flow-step dd > p {
  font-size: min(30px, 6vw);
}
.bf-detail .text {
  font-size: min(48px, calc(100vw/15));
  white-space: nowrap;
  line-height: calc(60/48);
}
.date-item {
  width: 100%;
  font-size: min(3.6rem, calc(100vw/20));
  font-weight: 600;
}
.date-item.row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: baseline;
  align-items: baseline;
  gap: min(.5rem, .5vw);
}
.date-item .limit {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
}
.date-item .limit > *:not(:first-child)::before {
  content: "~";
  font-size: 1.6em;
  font-weight: 600;
  translate: 0 .5rem;
}
.date-item .num, .date-item .time {
  font-family: var(--fnt-pop);
}
.date-item .limit p {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: baseline;
  align-items: baseline;
  line-height: 1;
  gap: min(.5rem, .5vw);
}
.date-item .limit .num {
  font-weight: 900;
  font-size: 1.9em;
}
.date-item .limit .week {
  font-size: .55em;
  color: var(--clr-base);
  z-index: 1;
  translate: 0 -.25em;
  padding: 0 .5em;
  text-shadow: none;
}
.date-item .limit .week::before {
  content: "";
  width: 1.6em;
  aspect-ratio: 1/1;
  border-radius: 100vmax;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -48%;
  z-index: -1;
}
.sec-attention-blc {
  padding-top: min(6rem, 10vw);
  padding-bottom: min(5rem, 8vw);
  gap: min(5rem, 8vw);
}
.sec-attention-blc .dot-list {
  width: min(58rem, 100%);
}
/*CTA　+++++++++++++++++++++++*/
.sec-cta-blc {
  padding-top: min(6rem, 10vw);
  padding-bottom: min(10rem, 15vw);
  background-color: var(--wall-gry);
  gap: min(7rem, 12vw);
}
.box-cta-item {
  gap: min(4rem, 6vw);
}
.cta-title {
  width: min(46rem, 75%);
}
.cta-thumb {
  width: min(580px, 90%);
}
.tag-off {
  background: #2e96ca;
  color: #fff;
  font-weight: 500;
  font-family: var(--fnt-pop);
  border-radius: 100vmax;
  padding: .3rem .85em;
  text-align: center;
}
.tag-off span {
  font-weight: 900;
  font-size: 2em;
}
.sec-cta-blc .in-title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  gap: 10px;
}
.sec-cta-blc .in-title .txt {
  font-size: min(4rem, calc(100vw/16));
  font-weight: 600;
  letter-spacing: .05em;
}
.price-cat {
  gap: 10px;
}
.price-cat .price {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: baseline;
  align-items: baseline;
  font-size: min(3.4rem, 5vw);
  font-weight: 500;
}
.price-cat .price .num {
  font-size: min(9rem, calc(100vw/5));
  font-weight: 900;
  font-family: var(--fnt-pop);
}
.price-cat .price p::after {
  content: "円";
  font-size: min(4rem, 6vw);
}
.price-cat .text {
  font-size: min(2rem, calc(100vw/25));
  white-space: nowrap;
}
.buy-button-wrap {
  width: 100%;
  gap: 15px;
}
.buy-button-wrap .in-title {
  font-size: min(3.2rem, 5vw);
  font-weight: 500;
}
.buy-button-wrap .cts-mdl-open span {
  padding: 5px 1.5em;
  height: min(9.5rem, 15vw);
  display: grid;
  place-content: center;
  color: #fff;
  font-size: min(4.2rem, calc(100vw/14));
  font-weight: 900;
  text-shadow: 0 0 2px rgba(0, 0, 0, .2);
  background: linear-gradient(90deg, #89f7fe, #66a6ff);
  line-height: 1;
  border-radius: 100vmax;
  z-index: 1;
  position: relative;
}
.buy-button-wrap .cts-mdl-open::before {
  content: "";
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(84deg, #66a6ff, #89f7fe);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 100vmax;
}
/*modal +++++++++++++++++++++++++++++*/
.cts-mdl-open {
  cursor: pointer;
}
.mdl-contents {
    display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(26, 26, 26, .2);
  backdrop-filter: blur(6px);
  z-index: 101;
  overflow: hidden;
}
.mdl-contents-wrap {
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  display: flex;
  padding: min(130px, 15vw) min(50px, 3vw);
}
.box-mdl-form {
  background: #fff;
  width: min(855px, 100%);
  max-height: 82svh;
  overflow-y: scroll;
  padding: min(50px, 10vw) min(30px, 5vw);
  border: 2px solid var(--clr-base);
  border-radius: min(20px, 3vw);
}
.item-form-wrap {
  font-family: var(--fnt-corp);
}
.item-form-wrap dt {
  display: flex;
  gap: .5em .85em;
  justify-content: flex-start;
  -ms-align-items: center;
  align-items: center;
  padding-bottom: min(15px, 3.5vw);
  font-weight: 700;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
.item-form-wrap dt h4 {
  background-color: var(--wall-blk);
  line-height: 1;
  padding: 8px .85em;
  color: #fff;
}
.item-form-wrap dt p {
  line-height: calc(24/16);
}
.item-form-wrap dt p span {
  display: inline-block;
}
.item-form-wrap:nth-of-type(n+2) {
  margin-top: min(40px, 8vw);
}
.item-form-wrap dd {
  border-top: 1px solid;
  padding-top: min(15px, 4vw);
}
.item-form-wrap dd > fieldset + fieldset {
  margin-top: min(20px, 5vw);
}
.item-form-wrap dd > fieldset legend {
  padding-bottom: min(15px, 3.5vw);
  font-weight: 700;
}
.item-form-wrap dd .form-group + .form-group {
  margin-top: min(10px, 2vw);
}
.form-group label input + .type {
  padding-left: 2em;
  display: block;
  line-height: calc(20/16);
}
.form-group label input + .type::before, .form-group label input + .type::after {
  content: "";
  aspect-ratio: 1;
  border-radius: 2px;
  border: 2px solid var(--clr-base);
  position: absolute;
}
.form-group label input + .type::before {
  width: 1em;
  top: 0;
  left: 0;
}
.form-group label input + .type::after {
  width: calc(1em - 6px);
  background-color: var(--clr-base);
  top: 3px;
  left: 3px;
  opacity: 0;
}
.form-group label input:checked + .type::after {
  opacity: 1;
}
.form-group .type.item-clr > p {
  padding-left: 1.5em;
}
.form-group .type.item-clr > p::before {
  content: "";
  width: 1.125em;
  aspect-ratio: 1;
  border-radius: 100vmax;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  background-color: var(--b-clr);
}
.form-group .type.item-clr.grn {
  --b-clr: #3D7783;
}
.form-group .type.item-clr.red {
  --b-clr: #A23A55;
}
.form-group .type.item-clr.nvy {
  --b-clr: #4C5C6B;
}
.form-button-wrap {
  -ms-align-items: center;
  align-items: center;
  margin-top: min(4rem, 8vw);
}
.form-button-wrap button.btn-primary {
  width: min(18rem, 100%);
  height: min(5rem, 14vw);
  border: 2px solid currentColor;
  font-family: var(--fnt-corp);
  border-radius: 100vmax;
  cursor: pointer;
  color: var(--clr-base);
}
.error-message {
  color: #dc3246;
  font-size: min(1.4rem,3.2vw);
  margin-top: 1em;
  line-height: calc(18/12);
  display: none;
  font-weight: 700;
}
.error-message span{
  display: block;
}
/*modal*/
.js-mdl-close {
  position: absolute;
  top: min(50px, 3vw);
  right: min(50px, 3vw);
  width: min(4.8rem, 12vw);
  aspect-ratio: 1;
  border-radius: 100vmax;
  border: 2px solid var(--clr-base);
  translate: 0 0;
  cursor: pointer;
  z-index: 10;
  background-color: #fff;
}
.js-mdl-close::before, .js-mdl-close::after {
  content: "";
  width: 50%;
  height: 2px;
  background-color: var(--clr-base);
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.js-mdl-close::before {
  rotate: 45deg;
}
.js-mdl-close::after {
  rotate: -45deg;
}
/*footer
===============================================================*/
footer {
  background: var(--clr-base);
}
.footer-inner {
  color: #fff;
  padding: min(3rem, 6vw) min(5rem, 5vw);
  text-align: center;
  font-weight: 500;
  font-size: min(2rem, 3.6vw);
}
footer .copy {
  font-family: var(--fnt-pop);
  font-size: min(1.8rem, 3.4vw);
}
.foot-link {
  margin-top: min(1.5rem, 3vw);
}
.foot-link li {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  gap: 1em;
}
.foot-link li:not(:first-child) {
  margin-top: min(1.5rem, 3vw);
}