@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-base:kozuka-gothic-pro, sans-serif;
  --fnt-pop: 'Poppins', 'Noto Sans JP', sans-serif;
  --fnt-corp: corporate-logo-ver2, 'Noto Sans JP', sans-serif;
  --clr-ppl: #5845a0;
  --clr-red:#f7423a;
  --clr-ylw:#f1d524;
  --clr-wblue:#328dc8;
  --wall-blk: #131313;
  --wall-gry: #f2f2f3;
  --wall-beg:#fbf8ee;
  --wall-wbl: #338ccb;/*#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;
  color: var(--clr-base);
  -moz-font-feature-settings: 'liga', 'kern';
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: min(1.8rem, 3.6vw);
  font-weight: 400;
  background-color: #f2f4ee;
  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-corp {
  font-family: var(--fnt-corp);
}
.fw-mid{
  font-weight: 500;
}
.fc-red{
  color: var(--clr-red);
}
/*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: #f8f6f6;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}
.inner {
  padding-left: min(4rem, 3vw);
  padding-right: min(4rem, 3vw);
}
/*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,.dot-list > p {
  line-height: calc(44/26);
  padding-left: 1em;
  font-weight: 600;
}
.dot-list > p{
  margin-top: 1em;}

.dot-list > li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
.dot-list > p::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);
}
/*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(35/24);
  font-weight: 500;
}
ul.att-list > li:nth-child(n+2){
  margin-top: 3px;
}
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-beg);
}
.comment-area {
  margin-top: min(2rem, 3vw);
  font-weight: 700;
}
/*商品　+++++++++++++++++++++++*/
.sec-item-blc {
  padding-top: min(4rem, 8vw);
  padding-bottom: min(3rem,6vw);
  gap: min(40px, 8vw);
}
.box-item-body{
  
}
.box-item-body dt{
  padding-left: min(3em,10vw);
}

.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: 10px;
  padding: .5em 1em;
  line-height: 1;
}
.flavor-item-list {
  margin-top: min(3rem, 6vw);
}

.flavor-item-list dd {
  padding-left: min(15px,3vw);
  padding-right: min(15px,3vw);
}
.body-item-list{
  margin-top: min(60px,8vw);
}
.body-item-list dd{
  margin-top: min(20px,4vw);
}
/*コース価格　+++++++++++++++++++++++*/
.sec-course-blc {
  padding-bottom: min(30px, 8vw);
}
.box-course-price {
  gap: min(30px, 6vw);
  margin-top: min(8rem,8vw);
  padding-bottom: min(8rem,8vw);
  background-image: url("../imgs/boy_sleep.png");
  background-repeat: no-repeat;
  background-position: bottom min(20px,3vw) right min(20px,3vw);
  background-size: min(200px,22%);
}
.price-item {
  gap: 10px;
  display: grid;
  grid-template-columns: auto;
  place-content:center;
}
.price-item .price {
  font-size: min(6rem, calc(100vw/12));
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
.price-item .price span {
  font-weight: 700;
  font-size: 2.1667em;
  padding-right: 5px;
}
.price-item .text {
  display: flex;
  justify-content: flex-start;
  font-size: min(30px, calc(100vw/20));
  white-space: nowrap;
  -ms-align-items: baseline;
  align-items: baseline;
  gap:.5em;
  font-weight: 500;
}
.price-item > .hash > span:last-child::before{
 content: "";
  width: 2em;
  aspect-ratio:1/1.8293;
  background:url("../imgs/hash.svg") no-repeat center/cover;
  position: absolute;
  left: 100%;
  top: 50%;
  translate:10% -50%;
}
.price-item .text span.fs-mid{
  font-size: 1.18em;
}
.price-item .tag{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-end;
  padding-right: 2em;
}
.price-item .tag span{  
  color: var(--clr-wblue);
  font-weight: 700;
  font-size: min(4rem,calc(100vw/18));
  z-index: 1;
}
.price-item .tag span::before{
  content: "";
  z-index: -1;
  background-color: var(--clr-ylw);
  width: 100%;
  height: .45em;
  border-radius: 100vmax;
  position: absolute;
  bottom: 0;
  left: 50%;
  padding:0 .25em;
  translate:-50% 25%;
}
.price-item .case{
  width: 75%;
  margin-top: min(10px,1.5vw);
}
.box-course-campaign{
  background: var(--wall-beg);
  padding-top: min(8rem,8vw);
  padding-bottom: min(8rem,8vw);
}
.box-course-campaign .comment{
  margin-top: min(30px,5vw);
  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(220px,4vw);
}
.box-course-campaign .comment .sticker{
  width: calc(100%/3);
}
.box-course-campaign .comment p{
  text-align: center;
  font-size: min(1.8rem,3.5vw);
  line-height: calc(30/18);
}
/*応募方法　+++++++++++++++++++++++*/
.sec-flow-blc {
  background-color: var(--clr-wblue);
  background-image: url("../imgs/wall_arrow.png");
  background-repeat: no-repeat;
  background-position: top -1px center;
  background-size: 100%;
  padding-top: calc(100%*0.136);
  padding-bottom: calc(100%*0.136);
}
.sec-flow-blc::after {
  content: "";
  width: 100%;
  aspect-ratio: 1/0.136;
  position: absolute;
  bottom: -1px;
  left: 0;
  background: url("../imgs/wall_arrow.png") no-repeat center/cover;
  scale: 1 -1;
}
.sec-flow-blc .title{
  padding: min(40px,6vw) 0 min(25px,4vw);
}
.box-flow-step {
  padding-top: min(4rem, 8vw);
  padding-bottom: min(7rem, 12vw);
  background-image: url("../imgs/wall.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.box-flow-step .arw{
  display: grid;
  grid-template-columns: min(98px, 15vw);
  place-content:center;
  padding-top: min(4rem,6vw);
  padding-bottom: min(2rem,3vw);
}

.bf-detail {
  text-align: center;
  gap: min(12px, 2.5vw);
  margin-top: min(3rem,5vw);
}
.box-flow-step dd > p {
  font-size: min(30px, 6vw);
}
.bf-detail .text {
  font-size: min(48px, calc(100vw/14));
  white-space: nowrap;
  line-height: calc(60/48);
}
.bf-detail .att{
  color: var(--clr-ylw);
  font-weight: 500;
  font-size: min(2.4rem,calc(100vw/24));
}
.date-item {
  width: 100%;
  font-size: min(3.6rem, calc(100vw/20));
  font-weight: 600;
  color: #fff;
}
.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;
  -ms-align-items: baseline;
  align-items: baseline;
  margin-top: 5px;
}
.date-item .limit .year{
  padding-right: .5em;
}
.date-item .limit > .date: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: .85em;
  color: var(--clr-wblue);
  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;
}
.date-item .limit + p{
  text-align: center;
  margin-top: min(3rem,5vw);
  font-size: 1.2em;
}
.sec-attention-blc {
  padding-top: min(6rem, 10vw);
  padding-bottom: min(5rem, 8vw);
  gap: min(5rem, 8vw);
}
.sec-attention-blc .dot-list {
  width: min(61rem, 100%);
}
/*CTA　+++++++++++++++++++++++*/
.sec-cta-blc {
  padding-bottom: min(6rem, 12vw);
  background-color: var(--wall-gry);  
}

.box-cta-item {
  gap: min(4rem, 6vw);
  margin-top: min(8rem, 8vw);
}
.box-cta-item .price-item .tag{
  padding-right: 0;
}
.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;
  margin-top: min(8rem, 8vw);
}
.buy-button-wrap .in-title {
  font-size: min(3.6rem, 5.8vw);
  font-weight: 600;
}
.buy-button-wrap a{
}
.buy-button-wrap a span {
  padding: 5px 1.5em;
  height: min(9.5rem, 15vw);
  display: grid;
  place-content: center;
  color: #fff;
  font-size: min(4.8rem, calc(100vw/13));
  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 a::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;
  box-shadow: 0 5px 5px rgba(101,100,100,.5);
}
/*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);
}