@charset "UTF-8";


body.is-bgnone .c-container.sec_bg {
  background-image: none;
}


/* Common ----------------------------*/
/* -- Background -- */
.sec_bg {
  background-image: url(/chocobrownie/assets/common/img/2509/bg_texture01.jpg);
  background-repeat: repeat-y;
  background-size: 100% auto;
}

.sec_bg_mask {
  position: relative;
}

.sec_bg_mask::before,
.sec_bg_mask::after {
  position: absolute;
  left: calc(100vw * (-25 / 750));
  width: calc(100vw * (750 / 750));
  height: calc(100vw * (64 / 750));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
}
.sec_bg_mask::before {
  top: calc(100vw * (-25 / 750));
  background-image: url(/chocobrownie/assets/pages/img/top/2509/bg_mask02_top.png);
}
.sec_bg_mask::after {
  bottom: calc(100vw * (-25 / 750));
  background-image: url(/chocobrownie/assets/pages/img/top/2509/bg_mask02_bottom.png);
}

/* -- Chocochip -- */
.sec_chocochip {
  position: absolute;
  z-index: -2;
  pointer-events: none;
}

.sec_chocochip > div:not(.sec_spray) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -- Spray -- */
.sec_spray {
  position: absolute;
  z-index: -2;
  width: calc(100vw * (321 / 750));
  height: calc(100vw * (321 / 750));
}

.sec_spray > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -- Title -- */
.sec_ttl {
  position: relative;
  z-index: 1;
  text-align: center;
}

.sec_ttl .sec_spray {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sec_ttl > span {
  display: inline-block;
  color: #3c0f00;
  font-size: calc(100vw * (60 / 750));
  font-weight: 900;
  line-height: 1.2;
}

.sec_ttl > span > small {
  display: block;
  margin-top: calc(100vw * (10 / 750));
  font-size: calc(100vw * (28 / 750));
  font-weight: 700;
  line-height: 1.4;
}


/* -- Text -- */
.sec_txt {
  font-size: calc(100vw * (26 / 750));
  text-align: center;
}

/* -- Button -- */
.sec_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: calc(100vw * (72 / 750));
  border-radius: 1000px;
  background-image: url(/chocobrownie/assets/common/img/2509/bg_pattern02.png);
  background-repeat: repeat;
  background-size: calc(100vw * (50 / 750)) auto;
  color: #fff;
  font-size: calc(100vw * (26 / 750));
  font-weight: 500;
}

.sec_btn.is-icon {
  padding-left: calc(100vw * (95 / 750));
  padding-right: calc(100vw * (95 / 750));
}

.sec_btn.is-icon::before,
.sec_btn.is-icon::after {
  position: absolute;
  top: 50%;
  content: '';
}

.sec_btn.is-icon::before {
  right: calc(100vw * (33 / 750));
  transform: translateY(-50%);
  width: calc(100vw * (33 / 750));
  height: calc(100vw * (33 / 750));
  border-radius: 1000px;
  background-color: #e1ad37;
}

.sec_btn.is-icon::after {
  right: calc(100vw * (46 / 750));
  width: calc(100vw * (13 / 750));
  height: calc(100vw * (13 / 750));
  border-top: calc(100vw * (2 / 750)) solid #3c0f00;
  border-right: calc(100vw * (2 / 750)) solid #3c0f00;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width: 768px) {
  /* -- Background -- */
  .sec_bg_mask::before,
  .sec_bg_mask::after {
    left: calc((100vh * 0.5) * (-25 / 750));
    width: calc((100vh * 0.5) * (750 / 750));
    height: calc((100vh * 0.5) * (64 / 750));
  }
  .sec_bg_mask::before {
    top: calc((100vh * 0.5) * (-25 / 750));
  }
  .sec_bg_mask::after {
    bottom: calc((100vh * 0.5) * (-25 / 750));
  }

  /* -- Chocochip -- */
  .sec_chocochip.is-spray {
    width: calc((100vh * 0.5) * (321 / 750));
    height: calc((100vh * 0.5) * (321 / 750));
  }

  /* -- Spray -- */
  .sec_spray {
    width: calc((100vh * 0.5) * (321 / 750));
    height: calc((100vh * 0.5) * (321 / 750));
  }

  /* -- Title -- */
  .sec_ttl.is-spray::before {
    width: calc((100vh * 0.5) * (321 / 750));
    height: calc((100vh * 0.5) * (321 / 750));
  }

  .sec_ttl > span {
    font-size: calc((100vh * 0.5) * (60 / 750));
  }

  .sec_ttl > span > small {
    margin-top: calc((100vh * 0.5) * (10 / 750));
    font-size: calc((100vh * 0.5) * (28 / 750));
  }

  /* -- Text -- */
  .sec_txt {
    font-size: calc((100vh * 0.5) * (26 / 750));
  }

  /* -- Button -- */
  .sec_btn {
    min-height: calc((100vh * 0.5) * (72 / 750));
    background-size: calc((100vh * 0.5) * (50 / 750)) auto;
    font-size: calc((100vh * 0.5) * (26 / 750));
  }

  .sec_btn.is-icon {
    padding-left: calc((100vh * 0.5) * (95 / 750));
    padding-right: calc((100vh * 0.5) * (95 / 750));
  }

  .sec_btn.is-icon::before {
    right: calc((100vh * 0.5) * (33 / 750));
    width: calc((100vh * 0.5) * (33 / 750));
    height: calc((100vh * 0.5) * (33 / 750));
  }

  .sec_btn.is-icon::after {
    right: calc((100vh * 0.5) * (46 / 750));
    width: calc((100vh * 0.5) * (13 / 750));
    height: calc((100vh * 0.5) * (13 / 750));
    border-top-width: calc((100vh * 0.5) * (2 / 750));
    border-right-width: calc((100vh * 0.5) * (2 / 750));
  }
}


/* Loader ----------------------------*/
.loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: #250703;
  transition: height 0.2s ease-out 1.0s;
}

body.is-loaded .loader {
  height: 0;
}

.loader::before {
  margin-top: calc(100vw * (160 / 750));
}

.loader::after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: calc(100vw * (-160 / 750));
  margin-left: calc(100vw * (-160 / 750));
  width: calc(100vw * (320 / 750));
  height: calc(100vw * (320 / 750));
  background-image: url(/chocobrownie/assets/common/img/2509/logo_chocobrownie02.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  transition: all 0.2s linear 0.5s;
  content: '';
}

body.is-loaded .loader::after {
  opacity: 0;
  visibility: hidden;
}

@media screen and (min-width: 768px) {
  .loader::before {
    margin-top: calc((100vh * 0.5) * (160 / 750));
  }

  .loader::after {
    margin-top: calc((100vh * 0.5) * (-160 / 750));
    margin-left: calc((100vh * 0.5) * (-160 / 750));
    width: calc((100vh * 0.5) * (320 / 750));
    height: calc((100vh * 0.5) * (320 / 750));
  }
}


/* Key Visual Top ----------------------------*/
.kv_top {
  border-spacing: calc(100vw * (750 / 750));
}

.kv_top .sec_bg,
.kv_top .sec_bg::before,
.kv_top .sec_bg::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.kv_top .sec_bg::before {
  z-index: -3;
  background-image: url(/chocobrownie/assets/pages/img/top/2509/kv_top_bg.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.kv_top .sec_bg::after {
  background-image: url(/chocobrownie/assets/pages/img/top/2509/kv_top_mask.png);
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: 100% auto;
  content: '';
}

.kv_topChocochip,
.kv_topChoco {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.kv_topChocochip > div,
.kv_topChoco > div {
  position: absolute;
}

.kv_topChocochip01 {
  top: calc(100vw * (197 / 750));
  left: calc(100vw * (212 / 750));
  width: calc(100vw * (40 / 750));
}

.kv_topChocochip02 {
  top: calc(100vw * (311 / 750));
  right: calc(100vw * (43 / 750));
  width: calc(100vw * (43 / 750));
}

.kv_topChocochip03 {
  top: calc(100vw * (416 / 750));
  right: calc(100vw * (136 / 750));
  width: calc(100vw * (36 / 750));
}

.kv_topChocochip04 {
  top: calc(100vw * (475 / 750));
  left: calc(100vw * (116 / 750));
  width: calc(100vw * (32 / 750));
}

.kv_topChocochip05 {
  top: calc(100vw * (535 / 750));
  left: calc(100vw * (60 / 750));
  width: calc(100vw * (41 / 750));
}

.kv_topChoco01 {
  top: calc(100vw * (178 / 750));
  left: calc(100vw * (-34 / 750));
  width: calc(100vw * (231 / 750));
}

.kv_topChoco02 {
  top: calc(100vw * (108 / 750));
  right: calc(100vw * (58 / 750));
  width: calc(100vw * (208 / 750));
}

.kv_topChoco03 {
  top: calc(100vw * (476 / 750));
  right: calc(100vw * (-90 / 750));
  width: calc(100vw * (287 / 750));
}

.kv_topTtl {
  position: absolute;
  left: 50%;
  bottom: calc(100vw * (115 / 750));
  transform: translateX(-50%);
  width: calc(100vw * (680 / 750));
}

.kv_topTtl > span {
  display: inline-block;
}

.kv_topComments {
  position: absolute;
  bottom: calc(100vw * (15 / 750));
  right: calc(100vw * (10 / 750));
  font-size: calc(100vw * (16 / 750));;
}

@media screen and (min-width: 768px) {
  .kv_top {
    border-spacing: calc((100vh * 0.5) * (750 / 750));
  }

  .kv_topChocochip01 {
    top: calc((100vh * 0.5) * (197 / 750));
    left: calc((100vh * 0.5) * (212 / 750));
    width: calc((100vh * 0.5) * (40 / 750));
  }

  .kv_topChocochip02 {
    top: calc((100vh * 0.5) * (311 / 750));
    right: calc((100vh * 0.5) * (43 / 750));
    width: calc((100vh * 0.5) * (43 / 750));
  }

  .kv_topChocochip03 {
    top: calc((100vh * 0.5) * (416 / 750));
    right: calc((100vh * 0.5) * (136 / 750));
    width: calc((100vh * 0.5) * (36 / 750));
  }

  .kv_topChocochip04 {
    top: calc((100vh * 0.5) * (475 / 750));
    left: calc((100vh * 0.5) * (116 / 750));
    width: calc((100vh * 0.5) * (32 / 750));
  }

  .kv_topChocochip05 {
    top: calc((100vh * 0.5) * (535 / 750));
    left: calc((100vh * 0.5) * (60 / 750));
    width: calc((100vh * 0.5) * (41 / 750));
  }

  .kv_topChoco01 {
    top: calc((100vh * 0.5) * (178 / 750));
    left: calc((100vh * 0.5) * (-34 / 750));
    width: calc((100vh * 0.5) * (231 / 750));
  }

  .kv_topChoco02 {
    top: calc((100vh * 0.5) * (108 / 750));
    right: calc((100vh * 0.5) * (58 / 750));
    width: calc((100vh * 0.5) * (208 / 750));
  }

  .kv_topChoco03 {
    top: calc((100vh * 0.5) * (476 / 750));
    right: calc((100vh * 0.5) * (-90 / 750));
    width: calc((100vh * 0.5) * (287 / 750));
  }

  .kv_topTtl {
    bottom: calc((100vh * 0.5) * (115 / 750));
    width: calc((100vh * 0.5) * (680 / 750));
  }

  .kv_topComments {
    bottom: calc((100vh * 0.5) * (15 / 750));
    right: calc((100vh * 0.5) * (10 / 750));
    font-size: calc((100vh * 0.5) * (16 / 750));;
  }
}
@media screen and (max-width: 767px) and (min-height: 768px) {
  .kv_top .sec_bg::after {
    display: none;
  }
}


/* Overview ----------------------------*/
.overview {
  margin-top: 120vh;
}

.overview_kv .sec_bg,
.overview_kv .sec_bg::before,
.overview_kv .sec_bg::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.overview_kv .sec_bg {
  background-image: url(/chocobrownie/assets/common/img/2509/bg_texture02.jpg);
}

.overview_kv .sec_bg::before {
  background-image: url(/chocobrownie/assets/pages/img/top/2509/overview_kv_bg.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.overview_kv .sec_bg::after {
  background-image: url(/chocobrownie/assets/pages/img/top/2509/overview_kv_mask.png);
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: 100% auto;
  content: '';
}

.overview_kvTtl {
  position: absolute;
  left: 50%;
  bottom: calc(100vw * (115 / 750));
  transform: translateX(-50%);
  width: calc(100vw * (680 / 750));
}

.overview_inner {
  position: relative;
  z-index: 1;
  padding-top: calc(100vw * (75 / 750));
  padding-bottom: calc(100vw * (45 / 750));
  overflow: hidden;
}

.overview_choco {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.overview_choco > div {
  position: absolute;
}

.overview_choco01 {
  top: calc(100vw * (735 / 750));
  left: calc(100vw * (-45 / 750));
  width: calc(100vw * (185 / 750));
}

.overview_choco02 {
  top: calc(100vw * (925 / 750));
  right: calc(100vw * (-70 / 750));
  width: calc(100vw * (183 / 750));
}

.overview_choco03 {
  top: calc(100vw * (1290 / 750));
  left: calc(100vw * (-60 / 750));
  width: calc(100vw * (176 / 750));
}

.overview_choco04 {
  top: calc(100vw * (1255 / 750));
  right: calc(100vw * (-55 / 750));
  width: calc(100vw * (187 / 750));
}

.overview .sec_spray {
  width: calc(100vw * (350 / 750));
  height: calc(100vw * (350 / 750));
}

.overview .spray01 {
  top: calc(100vw * (430 / 750));
  left: calc(100vw * (-200 / 750));
}

.overview .spray02 {
  top: calc(100vw * (580 / 750));
  right: calc(100vw * (-70 / 750));
}

.overview .spray03 {
  bottom: calc(100vw * (100 / 750));
  right: calc(100vw * (-120 / 750));
}

.overview .spray04 {
  bottom: calc(100vw * (-130 / 750));
  left: calc(100vw * (-120 / 750));
}

.overview_ttl {
  text-align: center;
}

.overview_ttl .sec_spray {
  width: calc(100vw * (456 / 750));
  height: calc(100vw * (456 / 750));
}

.overview_ttlInner img {
  width: calc(100vw * (526 / 750));
}

.overview_txt {
  margin-top: calc(100vw * (70 / 750));
  font-size: calc(100vw * (26 / 750));
  font-weight: 500;
  line-height: 2.2;
  text-align: center;
}

.overview_bottom {
  margin-top: calc(100vw * (45 / 750));
  text-align: center;
}

.overview_bottom > dt {
  display: block;
  position: relative;
  z-index: 2;
}

.overview_bottom > dt img {
  width: calc(100vw * (293 / 750));
  margin-left: calc(100vw * (-5 / 750));
}

.overview_bottom > dd {
  position: relative;
  z-index: 1;
  margin-top: calc(100vw * (-50 / 750));
}

.overview_bottom > dd img {
  width: calc(100vw * (677 / 750));
}

@media screen and (min-width: 768px) {
  .overview_kv {
    max-width: calc((100vh * 0.4994));
  }

  .overview_kvTtl {
    bottom: calc((100vh * 0.5) * (115 / 750));
    width: calc((100vh * 0.5) * (680 / 750));
  }

  .overview_inner {
    padding-top: calc((100vh * 0.5) * (75 / 750));
    padding-bottom: calc((100vh * 0.5) * (45 / 750));
  }

  .overview_choco01 {
    top: calc((100vh * 0.5) * (735 / 750));
    left: calc((100vh * 0.5) * (-45 / 750));
    width: calc((100vh * 0.5) * (185 / 750));
  }

  .overview_choco02 {
    top: calc((100vh * 0.5) * (925 / 750));
    right: calc((100vh * 0.5) * (-70 / 750));
    width: calc((100vh * 0.5) * (183 / 750));
  }

  .overview_choco03 {
    top: calc((100vh * 0.5) * (1290 / 750));
    left: calc((100vh * 0.5) * (-60 / 750));
    width: calc((100vh * 0.5) * (176 / 750));
  }

  .overview_choco04 {
    top: calc((100vh * 0.5) * (1255 / 750));
    right: calc((100vh * 0.5) * (-55 / 750));
    width: calc((100vh * 0.5) * (187 / 750));
  }

  .overview .sec_spray {
    width: calc((100vh * 0.5) * (350 / 750));
    height: calc((100vh * 0.5) * (350 / 750));
  }

  .overview .spray01 {
    top: calc((100vh * 0.5) * (430 / 750));
    left: calc((100vh * 0.5) * (-200 / 750));
  }

  .overview .spray02 {
    top: calc((100vh * 0.5) * (580 / 750));
    right: calc((100vh * 0.5) * (-70 / 750));
  }

  .overview .spray03 {
    bottom: calc((100vh * 0.5) * (100 / 750));
    right: calc((100vh * 0.5) * (-120 / 750));
  }

  .overview .spray04 {
    bottom: calc((100vh * 0.5) * (-130 / 750));
    left: calc((100vh * 0.5) * (-120 / 750));
  }

  .overview_ttl .sec_spray {
    width: calc((100vh * 0.5) * (456 / 750));
    height: calc((100vh * 0.5) * (456 / 750));
  }

  .overview_ttlInner img {
    width: calc((100vh * 0.5) * (526 / 750));
  }

  .overview_txt {
    margin-top: calc((100vh * 0.5) * (70 / 750));
    font-size: calc((100vh * 0.5) * (26 / 750));
  }

  .overview_bottom {
    margin-top: calc((100vh * 0.5) * (45 / 750));
  }

  .overview_bottom > dt img {
    width: calc((100vh * 0.5) * (293 / 750));
    margin-left: calc((100vh * 0.5) * (-5 / 750));
  }

  .overview_bottom > dd {
    margin-top: calc((100vh * 0.5) * (-50 / 750));
  }

  .overview_bottom > dd img {
    width: calc((100vh * 0.5) * (677 / 750));
  }
}


/* Features ----------------------------*/
.features {
  background-color: #250703;
}

.features_list > li {
  position: relative;
  z-index: 1;
  height: calc(100vw * (800 / 750));
  overflow: hidden;
}

.features_list .c-accordion::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease-out;
  content: '';
}
.features_list .c-accordion.is-active::before {
  opacity: 1;
  visibility: visible;
}

.features_listInner {
  position: absolute;
  left: 50%;
  bottom: calc(100vw * (95 / 750));
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
}

.features_listInner > dt {
  display: block;
  margin-bottom: calc(100vw * (15 / 750));
}

.features_list01 .features_listInner > dt img {
  width: calc(100vw * (330 / 750));
}
.features_list02 .features_listInner > dt img {
  width: calc(100vw * (208 / 750));
}
.features_list03 .features_listInner > dt img {
  width: calc(100vw * (314 / 750));
}

.features_listTtl {
  margin-bottom: calc(100vw * (60 / 750));
  font-size: calc(100vw * (40 / 750));
  font-weight: 700;
  line-height: 1.2;
}

.features_listTxt {
  margin-bottom: calc(100vw * (60 / 750));
  font-size: calc(100vw * (26 / 750));
  font-weight: 500;
  line-height: 2.0;
}

.features_listBtn {
  display: inline-block;
  position: relative;
  width: calc(100vw * (90 / 750));
  height: calc(100vw * (90 / 750));
  border-radius: calc(100vw * (20 / 750));
  background-color: rgba(250, 220, 175, 0.7);
}

.features_listBtn::before,
.features_listBtn::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vw * (48 / 750));
  height: calc(100vw * (6 / 750));
  background-color: #3c0f00;
  content: '';
  transition: transform 0.2s ease-out;
}

.features_listBtn::before {
  transform: translate(-50%, -50%);
}
.features_listBtn::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.c-accordion.is-active .features_listBtn::before {
  transform: translate(-50%, -50%)rotate(135deg);
}
.c-accordion.is-active .features_listBtn::after {
  transform: translate(-50%, -50%) rotate(225deg);
}

.features_listBg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.features_listBg img,
.features_listBg video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .features_list > li {
    height: calc((100vh * 0.5) * (800 / 750));
  }

  .features_listInner {
    bottom: calc((100vh * 0.5) * (95 / 750));
  }

  .features_listInner > dt {
    margin-bottom: calc((100vh * 0.5) * (15 / 750));
  }

  .features_list01 .features_listInner > dt img {
    width: calc((100vh * 0.5) * (330 / 750));
  }
  .features_list02 .features_listInner > dt img {
    width: calc((100vh * 0.5) * (208 / 750));
  }
  .features_list03 .features_listInner > dt img {
    width: calc((100vh * 0.5) * (314 / 750));
  }

  .features_listTtl {
    margin-bottom: calc((100vh * 0.5) * (60 / 750));
    font-size: calc((100vh * 0.5) * (40 / 750));
  }

  .features_listTxt {
    margin-bottom: calc((100vh * 0.5) * (60 / 750));
    font-size: calc((100vh * 0.5) * (26 / 750));
  }

  .features_listBtn {
    width: calc((100vh * 0.5) * (90 / 750));
    height: calc((100vh * 0.5) * (90 / 750));
    border-radius: calc((100vh * 0.5) * (20 / 750));
  }

  .features_listBtn::before,
  .features_listBtn::after {
    width: calc((100vh * 0.5) * (48 / 750));
    height: calc((100vh * 0.5) * (6 / 750));
  }
}


/* Web CM ----------------------------*/
.webcm {
  position: relative;
  z-index: 1;
  padding-top: calc(100vw * (140 / 750));
}

.webcm_comments {
  position: absolute;
  top: calc(100vw * (15 / 750));
  right: calc(100vw * (10 / 750));
  font-size: calc(100vw * (16 / 750));;
}

.webcm .chocochip01 {
  top: calc(100vw * (65 / 750));
  left: calc(100vw * (-18 / 750));
  width: calc(100vw * (189 / 750));
  height: calc(100vw * (162 / 750));
}

.webcm .chocochip01 .sec_spray {
  top: calc(100vw * (40 / 750));
  left: calc(100vw * (-110 / 750));
}

.webcm .spray01 {
  top: calc(100vw * (665 / 750));
  right: calc(100vw * (-90 / 750))
}

.webcm .c-wrapper {
  padding-left: calc(100vw * (35 / 750));
  padding-right: calc(100vw * (35 / 750));
}

.webcm .sec_ttl {
  margin-bottom: calc(100vw * (55 / 750));
}

.webcm_list {
  position: relative;
  z-index: 2;
}

.webcm_list > li {
  margin-top: calc(100vw * (60 / 750));
}
.webcm_list > li:nth-of-type(1) {
  margin-top: 0;
}

.webcm_listInner {
  text-align: center;
  background-color: rgba(250, 220, 175, 0.4);
}

.webcm_listInner > dt {
  display: block;
}

.webcm_listInner > dd {
  padding: calc(100vw * (30 / 750)) calc(100vw * (25 / 750));
}

.webcm .c-sns_list {
  margin-top: calc(100vw * (35 / 750));
}

@media screen and (min-width: 768px) {
  .webcm {
    padding-top: calc((100vh * 0.5) * (140 / 750));
  }

  .webcm_comments {
    top: calc((100vh * 0.5) * (15 / 750));
    right: calc((100vh * 0.5) * (10 / 750));
    font-size: calc((100vh * 0.5) * (16 / 750));;
  }

  .webcm .chocochip01 {
    top: calc((100vh * 0.5) * (65 / 750));
    left: calc((100vh * 0.5) * (-18 / 750));
    width: calc((100vh * 0.5) * (189 / 750));
    height: calc((100vh * 0.5) * (162 / 750));
  }

  .webcm .chocochip01 .sec_spray {
    top: calc((100vh * 0.5) * (40 / 750));
    left: calc((100vh * 0.5) * (-110 / 750));
  }

  .webcm .spray01 {
    top: calc((100vh * 0.5) * (665 / 750));
    right: calc((100vh * 0.5) * (-90 / 750))
  }

  .webcm .c-wrapper {
    padding-left: calc((100vh * 0.5) * (35 / 750));
    padding-right: calc((100vh * 0.5) * (35 / 750));
  }

  .webcm .sec_ttl {
    margin-bottom: calc((100vh * 0.5) * (55 / 750));
  }

  .webcm_list > li {
    margin-top: calc((100vh * 0.5) * (60 / 750));
  }
  .webcm_list > li:nth-of-type(1) {
    margin-top: 0;
  }

  .webcm_listInner {
    background-color: rgba(250, 220, 175, 0.4);
  }

  .webcm_listInner > dt a:hover {
    opacity: 1;
  }

  .webcm_listInner > dd {
    padding: calc((100vh * 0.5) * (30 / 750)) calc((100vh * 0.5) * (25 / 750));
  }

  .webcm .c-sns_list {
    margin-top: calc((100vh * 0.5) * (35 / 750));
  }
}


/* Campaign ----------------------------*/
.campaign {
  position: relative;
  z-index: 1;
  padding-top: calc(100vw * (190 / 750));
  padding-bottom: calc(100vw * (205 / 750));
}

.campaign::before {
  position: absolute;
  left: 0;
  bottom: calc(100vw * (20 / 750));
  z-index: -3;
  width: 100%;
  height: calc(100vw * (2088 / 750));
  background-image: url(/chocobrownie/assets/pages/img/top/2509/campaign_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.campaign .chocochip01 {
  top: calc(100vw * (-18 / 750));
  right: calc(100vw * (-15 / 750));
  width: calc(100vw * (172 / 750));
  height: calc(100vw * (165 / 750));
}

.campaign .chocochip01 .sec_spray {
  top: calc(100vw * (-105 / 750));
  left: calc(100vw * (-115 / 750));
  width: calc(100vw * (420 / 750));
  height: calc(100vw * (420 / 750));
}

.campaign .chocochip02 {
  top: calc(100vw * (230 / 750));
  left: calc(100vw * (-20 / 750));
  width: calc(100vw * (112 / 750));
  height: calc(100vw * (114 / 750));
}

.campaign .spray01 {
  top: calc(100vw * (885 / 750));
  left: calc(100vw * (-180 / 750));
  width: calc(100vw * (294 / 750));
  height: calc(100vw * (294 / 750));
}

.campaign .spray02 {
  top: calc(100vw * (1100 / 750));
  right: calc(100vw * (215 / 750));
  width: calc(100vw * (420 / 750));
  height: calc(100vw * (420 / 750));
}

.campaign .spray03 {
  bottom: calc(100vw * (-65 / 750));
  right: calc(100vw * (-175 / 750));
  width: calc(100vw * (420 / 750));
  height: calc(100vw * (420 / 750));
}

.campaign .c-wrapper {
  padding-left: calc(100vw * (35 / 750));
  padding-right: calc(100vw * (35 / 750));
}

.campaign .sec_ttl {
  margin-bottom: calc(100vw * (50 / 750));
}

.campaign_list > li {
  margin-top: calc(100vw * (110 / 750));
}
.campaign_list > li:nth-of-type(1) {
  margin-top: 0;
}

.campaign_listTtl {
  position: relative;
  margin-bottom: calc(100vw * (55 / 750));
  text-align: center;
}

.campaign_listTtlMain {
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: calc(100vw * (35 / 750));
  font-weight: 700;
}


.campaign_listTtlLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: calc(100vw * (-20 / 750));
  z-index: 2;
  transform: translateY(-50%);
  width: calc(100vw * (130 / 750));
  height: calc(100vw * (130 / 750));
  color: #3c0f00;
  font-size: calc(100vw * (34 / 750));
  font-weight: 700;
  line-height: 1;
}

.campaign_listTtlLabel::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url(/chocobrownie/assets/pages/img/top/2509/campaign_list_label.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
  animation: rotate01 7s linear infinite;
}

@keyframes rotate01 {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

.campaign_listApply {
  position: relative;
  margin-top: calc(100vw * (35 / 750));
  text-align: center;
}
.campaign_listApply:nth-of-type(1) {
  margin-top: 0;
}

.campaign_listApply > dt {
  display: block;
  position: absolute;
  top: calc(100vw * (-20 / 750));
  left: 0;
  z-index: 2;
  width: 100%;
}

.campaign_listApply > dt > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(100vw * (250 / 750));
  height: calc(100vw * (30 / 750));
  border-radius: 1000px;
  background-color: #eee430;
  color: #3c0f00;
  font-size: calc(100vw * (20 / 750));
  font-weight: 700;
  line-height: 1.2;
}

.campaign_listApply > dd {
  position: relative;
  z-index: 1;
  padding: calc(100vw * (45 / 750)) calc(100vw * (30 / 750)) calc(100vw * (30 / 750)) calc(100vw * (30 / 750));
  border-radius: calc(100vw * (20 / 750));
  border: calc(100vw * (4 / 750)) solid #eee430;
  background-image: url(/chocobrownie/assets/common/img/2509/bg_pattern01.png);
  background-repeat: repeat;
  background-size: calc(100vw * (50 / 750)) auto;
  color: #fff;
  font-size: calc(100vw * (21 / 750));
  font-weight: 500;
}

.campaign_listApply > dd > p {
  display: inline-block;
}

.campaign_listPeriod {
  font-size: calc(100vw * (28 / 750));
  font-weight: 700;
  line-height: 1.3;
}

.campaign_listPeriod > small {
  font-size: calc(100vw * (20 / 750));
  font-weight: 500;
}

.campaign_listImg {
  position: relative;
  margin-top: calc(100vw * (65 / 750));
  /*padding-left: calc(100vw * (15 / 750));
  padding-right: calc(100vw * (15 / 750));*/
}

.campaign_listImgLink {
  display: block;
  position: relative;
  margin-top: calc(100vw * (15 / 750));
  padding-right: calc(100vw * (45 / 750));
  color: #fff;
  font-size: calc(100vw * (26 / 750));
  font-weight: 500;
  text-align: right;
}

.campaign_listImgLink::before,
.campaign_listImgLink::after {
  position: absolute;
  top: 50%;
  content: '';
}

.campaign_listImgLink::before {
  right: 0;
  transform: translateY(-50%);
  width: calc(100vw * (30 / 750));
  height: calc(100vw * (30 / 750));
  border-radius: 1000px;
  background-color: #e1ad37;
}

.campaign_listImgLink::after {
  right: calc(100vw * (12 / 750));
  width: calc(100vw * (10 / 750));
  height: calc(100vw * (10 / 750));
  border-top: calc(100vw * (2 / 750)) solid #3c0f00;
  border-right: calc(100vw * (2 / 750)) solid #3c0f00;
  transform: translateY(-50%) rotate(45deg);
}

.campaign_listComingsoon {
  position: relative;
  width: calc(100vw * (506 / 750));
  margin: 0 auto;
  padding-bottom: calc(100vw * (55 / 750));
  color: #fff;
  font-size: calc(100vw * (26 / 750));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.campaign_listComingsoon::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vw * (5 / 750));
  background-color: #fff;
  content: '';
}

.campaign_listComingsoon .campaign_listTtl {
  margin-bottom: calc(100vw * (35 / 750));
}

.campaign_listComingsoon .campaign_listTtlMain::before,
.campaign_listComingsoon .campaign_listTtlMain::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100vw * (80 / 750));
  height: calc(100vw * (5 / 750));
  background-color: #fff;
  content: '';
}
.campaign_listComingsoon .campaign_listTtlMain::before {
  left: calc(100vw * (-100 / 750));
}
.campaign_listComingsoon .campaign_listTtlMain::after {
  right: calc(100vw * (-100 / 750));
}

.campaign_listComingsoon small {
  font-size: calc(100vw * (20 / 750));
}

.campaign .c-sns_list {
  margin-top: calc(100vw * (40 / 750));
}

@media screen and (min-width: 768px) {
  .campaign {
    padding-top: calc((100vh * 0.5) * (190 / 750));
    padding-bottom: calc((100vh * 0.5) * (205 / 750));
  }

  .campaign::before {
    bottom: calc((100vh * 0.5) * (20 / 750));
    height: calc((100vh * 0.5) * (2088 / 750));
  }

  .campaign .chocochip01 {
    top: calc((100vh * 0.5) * (-18 / 750));
    right: calc((100vh * 0.5) * (-15 / 750));
    width: calc((100vh * 0.5) * (172 / 750));
    height: calc((100vh * 0.5) * (165 / 750));
  }

  .campaign .chocochip01 .sec_spray {
    top: calc((100vh * 0.5) * (-105 / 750));
    left: calc((100vh * 0.5) * (-115 / 750));
    width: calc((100vh * 0.5) * (420 / 750));
    height: calc((100vh * 0.5) * (420 / 750));
  }

  .campaign .chocochip02 {
    top: calc((100vh * 0.5) * (230 / 750));
    left: calc((100vh * 0.5) * (-20 / 750));
    width: calc((100vh * 0.5) * (112 / 750));
    height: calc((100vh * 0.5) * (114 / 750));
  }

  .campaign .spray01 {
    top: calc((100vh * 0.5) * (885 / 750));
    left: calc((100vh * 0.5) * (-180 / 750));
    width: calc((100vh * 0.5) * (294 / 750));
    height: calc((100vh * 0.5) * (294 / 750));
  }

  .campaign .spray02 {
    top: calc((100vh * 0.5) * (1100 / 750));
    right: calc((100vh * 0.5) * (215 / 750));
    width: calc((100vh * 0.5) * (420 / 750));
    height: calc((100vh * 0.5) * (420 / 750));
  }

  .campaign .spray03 {
    bottom: calc((100vh * 0.5) * (-65 / 750));
    right: calc((100vh * 0.5) * (-175 / 750));
    width: calc((100vh * 0.5) * (420 / 750));
    height: calc((100vh * 0.5) * (420 / 750));
  }

  .campaign .c-wrapper {
    padding-left: calc((100vh * 0.5) * (35 / 750));
    padding-right: calc((100vh * 0.5) * (35 / 750));
  }

  .campaign .sec_ttl {
    margin-bottom: calc((100vh * 0.5) * (50 / 750));
  }

  .campaign_list > li {
    margin-top: calc((100vh * 0.5) * (110 / 750));
  }

  .campaign_listTtl {
    margin-bottom: calc((100vh * 0.5) * (55 / 750));
  }

  .campaign_listTtlMain {
    font-size: calc((100vh * 0.5) * (35 / 750));
  }

  .campaign_listTtlLabel {
    right: calc((100vh * 0.5) * (-20 / 750));
    width: calc((100vh * 0.5) * (130 / 750));
    height: calc((100vh * 0.5) * (130 / 750));
    font-size: calc((100vh * 0.5) * (34 / 750));
  }

  .campaign_listApply {
    margin-top: calc((100vh * 0.5) * (35 / 750));
  }

  .campaign_listApply > dt {
    top: calc((100vh * 0.5) * (-20 / 750));
  }

  .campaign_listApply > dt > span {
    width: calc((100vh * 0.5) * (250 / 750));
    height: calc((100vh * 0.5) * (30 / 750));
    font-size: calc((100vh * 0.5) * (20 / 750));
  }

  .campaign_listApply > dd {
    padding: calc((100vh * 0.5) * (45 / 750)) calc((100vh * 0.5) * (30 / 750)) calc((100vh * 0.5) * (30 / 750)) calc((100vh * 0.5) * (30 / 750));
    border-radius: calc((100vh * 0.5) * (20 / 750));
    border-width: calc((100vh * 0.5) * (4 / 750));
    font-size: calc((100vh * 0.5) * (21 / 750));
  }

  .campaign_listPeriod {
    font-size: calc((100vh * 0.5) * (28 / 750));
  }

  .campaign_listPeriod > small {
    font-size: calc((100vh * 0.5) * (20 / 750));
  }

  .campaign_listImg {
    margin-top: calc((100vh * 0.5) * (65 / 750));
    /*padding-left: calc((100vh * 0.5) * (15 / 750));
    padding-right: calc((100vh * 0.5) * (15 / 750));*/
  }

  .campaign_listImg a:hover {
    opacity: 1;
  }

  .campaign_listImgLink {
    margin-top: calc((100vh * 0.5) * (15 / 750));
    padding-right: calc((100vh * 0.5) * (45 / 750));
    font-size: calc((100vh * 0.5) * (26 / 750));
  }

  .campaign_listImgLink::before {
    width: calc((100vh * 0.5) * (30 / 750));
    height: calc((100vh * 0.5) * (30 / 750));
  }

  .campaign_listImgLink::after {
    right: calc((100vh * 0.5) * (12 / 750));
    width: calc((100vh * 0.5) * (10 / 750));
    height: calc((100vh * 0.5) * (10 / 750));
    border-top-width: calc((100vh * 0.5) * (2 / 750));
    border-right-width: calc((100vh * 0.5) * (2 / 750));
  }

  .campaign_listComingsoon {
    width: calc((100vh * 0.5) * (506 / 750));
    padding-bottom: calc((100vh * 0.5) * (55 / 750));
    font-size: calc((100vh * 0.5) * (26 / 750));
  }

  .campaign_listComingsoon::after {
    height: calc((100vh * 0.5) * (5 / 750));
  }

  .campaign_listComingsoon .campaign_listTtl {
    margin-bottom: calc((100vh * 0.5) * (35 / 750));
  }

  .campaign_listComingsoon .campaign_listTtlMain::before,
  .campaign_listComingsoon .campaign_listTtlMain::after {
    width: calc((100vh * 0.5) * (80 / 750));
    height: calc((100vh * 0.5) * (5 / 750));
  }
  .campaign_listComingsoon .campaign_listTtlMain::before {
    left: calc((100vh * 0.5) * (-100 / 750));
  }
  .campaign_listComingsoon .campaign_listTtlMain::after {
    right: calc((100vh * 0.5) * (-100 / 750));
  }

  .campaign_listComingsoon small {
    font-size: calc((100vh * 0.5) * (20 / 750));
  }

  .campaign .c-sns_list {
    margin-top: calc((100vh * 0.5) * (40 / 750));
  }
}


/* Key Visual Middle ----------------------------*/
.kv_middle {
  position: relative;
  z-index: 1;
  height: calc(100vw * (800 / 750));
  overflow: hidden;
  background-color: #250703;
  background-image: url(/chocobrownie/assets/pages/img/top/2509/kv_middle_bg.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.kv_middleTtl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw * (330 / 750));
  margin-left: calc(100vw * (30 / 750));
}

.kv_middleParticles,
.kv_middleParticles > div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .kv_middle {
    height: calc((100vh * 0.5) * (800 / 750));
  }

  .kv_middleTtl {
    width: calc((100vh * 0.5) * (330 / 750));
    margin-left: calc((100vh * 0.5) * (30 / 750));
  }
}


/* Radio ----------------------------*/
.radio {
  position: relative;
  z-index: 1;
  padding-top: calc(100vw * (160 / 750));
  padding-bottom: calc(100vw * (190 / 750));
}

.radio_comments {
  position: absolute;
  top: calc(100vw * (15 / 750));
  right: calc(100vw * (10 / 750));
  font-size: calc(100vw * (16 / 750));;
}

.radio .chocochip01 {
  top: calc(100vw * (153 / 750));
  left: calc(100vw * (40 / 750));
  width: calc(100vw * (128 / 750));
  height: calc(100vw * (114 / 750));
}

.radio .chocochip01 .sec_spray {
  top: calc(100vw * (-20 / 750));
  left: calc(100vw * (-110 / 750));
  width: calc(100vw * (296 / 750));
  height: calc(100vw * (296 / 750));
}

.radio .chocochip02 {
  top: calc(100vw * (120 / 750));
  right: calc(100vw * (-20 / 750));
  width: calc(100vw * (176 / 750));
  height: calc(100vw * (155 / 750));
}

.radio .chocochip02 .sec_spray {
  top: calc(100vw * (-90 / 750));
  right: calc(100vw * (-45 / 750));
  width: calc(100vw * (296 / 750));
  height: calc(100vw * (296 / 750));
}

.radio .c-wrapper {
  padding-left: calc(100vw * (25 / 750));
  padding-right: calc(100vw * (25 / 750));
}

.radio .sec_ttl {
  margin-bottom: calc(100vw * (80 / 750));
}

.radio_list {
  position: relative;
  z-index: 2;
}

.radio_list > li {
  margin-top: calc(100vw * (55 / 750));
}
.radio_list > li:nth-of-type(1) {
  margin-top: 0;
}

.radio_listInner {
  padding: calc(100vw * (25 / 750));
  background-color: rgba(250, 220, 175, 0.4);
  text-align: center;
}

.radio_listInner > dt {
  display: block;
}

.radio_listInner > dd {
  padding: calc(100vw * (45 / 750)) calc(100vw * (10 / 750)) calc(100vw * (25 / 750)) calc(100vw * (10 / 750));
}

@media screen and (min-width: 768px) {
  .radio {
    padding-top: calc((100vh * 0.5) * (160 / 750));
    padding-bottom: calc((100vh * 0.5) * (190 / 750));
  }

  .radio_comments {
    top: calc((100vh * 0.5) * (15 / 750));
    right: calc((100vh * 0.5) * (10 / 750));
    font-size: calc((100vh * 0.5) * (16 / 750));;
  }

  .radio .chocochip01 {
    top: calc((100vh * 0.5) * (153 / 750));
    left: calc((100vh * 0.5) * (40 / 750));
    width: calc((100vh * 0.5) * (128 / 750));
    height: calc((100vh * 0.5) * (114 / 750));
  }

  .radio .chocochip01 .sec_spray {
    top: calc((100vh * 0.5) * (-20 / 750));
    left: calc((100vh * 0.5) * (-110 / 750));
    width: calc((100vh * 0.5) * (296 / 750));
    height: calc((100vh * 0.5) * (296 / 750));
  }

  .radio .chocochip02 {
    top: calc((100vh * 0.5) * (120 / 750));
    right: calc((100vh * 0.5) * (-20 / 750));
    width: calc((100vh * 0.5) * (176 / 750));
    height: calc((100vh * 0.5) * (155 / 750));
  }

  .radio .chocochip02 .sec_spray {
    top: calc((100vh * 0.5) * (-90 / 750));
    right: calc((100vh * 0.5) * (-45 / 750));
    width: calc((100vh * 0.5) * (296 / 750));
    height: calc((100vh * 0.5) * (296 / 750));
  }

  .radio .c-wrapper {
    padding-left: calc((100vh * 0.5) * (25 / 750));
    padding-right: calc((100vh * 0.5) * (25 / 750));
  }

  .radio .sec_ttl {
    margin-bottom: calc((100vh * 0.5) * (80 / 750));
  }

  .radio_list > li {
    margin-top: calc((100vh * 0.5) * (55 / 750));
  }

  .radio_listInner {
    padding: calc((100vh * 0.5) * (25 / 750));
  }

  .radio_listInner > dt a:hover {
    opacity: 1;
  }

  .radio_listInner > dd {
    padding: calc((100vh * 0.5) * (45 / 750)) calc((100vh * 0.5) * (10 / 750)) calc((100vh * 0.5) * (25 / 750)) calc((100vh * 0.5) * (10 / 750));
  }
}


/* Maiking ----------------------------*/
.making {
  position: relative;
  z-index: 1;
  padding-top: calc(100vw * (70 / 750));
  padding-bottom: calc(100vw * (140 / 750));
  background-color: #3c0f00;
}

.making::before,
.making::after {
  position: absolute;
  left: 0;
  z-index: -3;
  width: 100%;
  height: calc(100vw * (57 / 750));
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% 100%;
  content: '';
}

.making::before {
  top: calc(100vw * (-56 / 750));
  background-image: url(/chocobrownie/assets/pages/img/top/2509/bg_mask01_top.png);
}

.making::after {
  bottom: calc(100vw * (-56 / 750));
  background-image: url(/chocobrownie/assets/pages/img/top/2509/bg_mask01_bottom.png);
}

.making .chocochip01 {
  top: calc(100vw * (-105 / 750));
  left: calc(100vw * (-15 / 750));
  width: calc(100vw * (179 / 750));
  height: calc(100vw * (234 / 750));
}

.making .chocochip01 .sec_spray {
  top: calc(100vw * (-50 / 750));
  left: calc(100vw * (-90 / 750));
  width: calc(100vw * (305 / 750));
  height: calc(100vw * (305 / 750));
}

.making .c-wrapper {
  padding-left: calc(100vw * (50 / 750));
  padding-right: calc(100vw * (50 / 750));
}

.making .sec_ttl {
  margin-bottom: calc(100vw * (50 / 750));
}

.making .sec_ttl > span {
  color: #c89678;
}

.making_list {
  position: relative;
  z-index: 2;
}

.making_list > li {
  margin-top: calc(100vw * (55 / 750));
}
.making_list > li:nth-of-type(1) {
  margin-top: 0;
}

.making_listInner {
  text-align: center;
}

.making_listInner > dt {
  display: block;
}

.making_listInner > dd {
  padding: calc(100vw * (45 / 750)) calc(100vw * (10 / 750)) 0 calc(100vw * (10 / 750));
}

.making_listInner > dd .sec_btn {
  border: calc(100vw * (2 / 750)) solid #c89678;
}

@media screen and (min-width: 768px) {
  .making {
    padding-top: calc((100vh * 0.5) * (70 / 750));
    padding-bottom: calc((100vh * 0.5) * (140 / 750));
  }

  .making::before,
  .making::after {
    height: calc((100vh * 0.5) * (57 / 750));
  }

  .making::before {
    top: calc((100vh * 0.5) * (-56 / 750));
  }

  .making::after {
    bottom: calc((100vh * 0.5) * (-56 / 750));
  }

  .making .chocochip01 {
    top: calc((100vh * 0.5) * (-105 / 750));
    left: calc((100vh * 0.5) * (-15 / 750));
    width: calc((100vh * 0.5) * (179 / 750));
    height: calc((100vh * 0.5) * (234 / 750));
  }

  .making .chocochip01 .sec_spray {
    top: calc((100vh * 0.5) * (-50 / 750));
    left: calc((100vh * 0.5) * (-90 / 750));
    width: calc((100vh * 0.5) * (305 / 750));
    height: calc((100vh * 0.5) * (305 / 750));
  }

  .making .c-wrapper {
    padding-left: calc((100vh * 0.5) * (50 / 750));
    padding-right: calc((100vh * 0.5) * (50 / 750));
  }

  .making .sec_ttl {
    margin-bottom: calc((100vh * 0.5) * (50 / 750));
  }

  .making_list > li {
    margin-top: calc((100vh * 0.5) * (55 / 750));
  }

  .making_listInner > dt a:hover {
    opacity: 1;
  }

  .making_listInner > dd {
    padding: calc((100vh * 0.5) * (45 / 750)) calc((100vh * 0.5) * (10 / 750)) 0 calc((100vh * 0.5) * (10 / 750));
  }

  .making_listInner > dd .sec_btn {
    border-width: calc((100vh * 0.5) * (2 / 750));
  }
}

/* Profile ----------------------------*/
.profile {
  position: relative;
  z-index: 1;
  padding-top: calc(100vw * (170 / 750));
}

.profile .chocochip01 {
  z-index: 2;
  top: calc(100vw * (65 / 750));
  right: calc(100vw * (-5 / 750));
  width: calc(100vw * (172 / 750));
  height: calc(100vw * (165 / 750));
}

.profile .chocochip01 .sec_spray {
  top: calc(100vw * (-125 / 750));
  right: calc(100vw * (-70 / 750));
  width: calc(100vw * (305 / 750));
  height: calc(100vw * (305 / 750));
}

.profile .c-wrapper {
  padding-left: calc(100vw * (25 / 750));
  padding-right: calc(100vw * (25 / 750));
}

.profile_inner {
  padding: calc(100vw * (90 / 750)) calc(100vw * (60 / 750)) calc(100vw * (140 / 750)) calc(100vw * (60 / 750));
  background-image: url(/chocobrownie/assets/common/img/2509/bg_pattern03.png);
  background-repeat: repeat;
  background-size: calc(100vw * (50 / 750)) auto;
}

.profile .sec_ttl {
  margin-bottom: calc(100vw * (45 / 750));
}

.profile_list > li {
  margin-top: calc(100vw * (55 / 750));
}
.profile_list > li:nth-of-type(1) {
  margin-top: 0;
}

.profile_listInner > dt {
  display: block;
  padding: calc(100vw * (10 / 750));
  border: calc(100vw * (2 / 750)) solid rgba(255, 255, 255, 0.5);
}

.profile_listInner > dd {
  margin-top: calc(100vw * (40 / 750));
  padding-left: calc(100vw * (10 / 750));
  padding-right: calc(100vw * (10 / 750));
}

.profile_listInner > dd > h3 {
  margin-bottom: calc(100vw * (40 / 750));
}

.profile_listInner > dd > h3 > span {
  display: block;
  font-weight: 600;
  line-height: 1.4;
}
.profile_listInner > dd > h3 > span:nth-of-type(1) {
  font-size: calc(100vw * (45 / 750));
}
.profile_listInner > dd > h3 > span:nth-of-type(2) {
  margin-top: calc(100vw * (20 / 750));
  font-size: calc(100vw * (28 / 750));
}

.profile_listInner > dd > p {
  font-size: calc(100vw * (26 / 750));
  font-weight: 500;
}

.profile_listSns {
  display: flex;
  align-items: center;
  margin-top: calc(100vw * (55 / 750));
  margin-left: calc(100vw * (-60 / 750));
}

.profile_listSns > li {
  flex: 0 0 auto;
  width: auto;
  margin-left: calc(100vw * (60 / 750));
}

.profile_listSns > li > a {
  color: #3c0f00;
}

.profile_listSnsInner {
  display: flex;
  align-items: center;
}

.profile_listSnsInner > * {
  flex: 0 0 auto;
  width: auto;
}

.profile_listSnsInner > dt img {
  width: calc(100vw * (60 / 750));
}

.profile_listSnsInner > dd {
  margin-left: calc(100vw * (15 / 750));
  font-size: calc(100vw * (26 / 750));
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .profile {
    padding-top: calc((100vh * 0.5) * (165 / 750));
  }

  .profile .chocochip01 {
    top: calc((100vh * 0.5) * (65 / 750));
    right: calc((100vh * 0.5) * (-5 / 750));
    width: calc((100vh * 0.5) * (172 / 750));
    height: calc((100vh * 0.5) * (165 / 750));
  }

  .profile .chocochip01 .sec_spray {
    top: calc((100vh * 0.5) * (-125 / 750));
    right: calc((100vh * 0.5) * (-70 / 750));
    width: calc((100vh * 0.5) * (305 / 750));
    height: calc((100vh * 0.5) * (305 / 750));
  }

  .profile .c-wrapper {
    padding-left: calc((100vh * 0.5) * (25 / 750));
    padding-right: calc((100vh * 0.5) * (25 / 750));
  }

  .profile_inner {
    padding: calc((100vh * 0.5) * (90 / 750)) calc((100vh * 0.5) * (60 / 750)) calc((100vh * 0.5) * (140 / 750)) calc((100vh * 0.5) * (60 / 750));
    background-size: calc((100vh * 0.5) * (50 / 750)) auto;
  }

  .profile .sec_ttl {
    margin-bottom: calc((100vh * 0.5) * (45 / 750));
  }

  .profile_list > li {
    margin-top: calc((100vh * 0.5) * (55 / 750));
  }

  .profile_listInner > dt {
    padding: calc((100vh * 0.5) * (10 / 750));
    border-width: calc((100vh * 0.5) * (2 / 750));
  }

  .profile_listInner > dd {
    margin-top: calc((100vh * 0.5) * (40 / 750));
    padding-left: calc((100vh * 0.5) * (10 / 750));
    padding-right: calc((100vh * 0.5) * (10 / 750));
  }

  .profile_listInner > dd > h3 {
    margin-bottom: calc((100vh * 0.5) * (40 / 750));
  }

  .profile_listInner > dd > h3 > span:nth-of-type(1) {
    font-size: calc((100vh * 0.5) * (45 / 750));
  }
  .profile_listInner > dd > h3 > span:nth-of-type(2) {
    margin-top: calc((100vh * 0.5) * (20 / 750));
    font-size: calc((100vh * 0.5) * (28 / 750));
  }

  .profile_listInner > dd > p {
    font-size: calc((100vh * 0.5) * (26 / 750));
  }

  .profile_listSns {
    margin-top: calc((100vh * 0.5) * (55 / 750));
    margin-left: calc((100vh * 0.5) * (-60 / 750));
  }

  .profile_listSns > li {
    margin-left: calc((100vh * 0.5) * (60 / 750));
  }

  .profile_listSnsInner > dt img {
    width: calc((100vh * 0.5) * (60 / 750));
  }

  .profile_listSnsInner > dd {
    margin-left: calc((100vh * 0.5) * (15 / 750));
    font-size: calc((100vh * 0.5) * (26 / 750));
  }
}


/* Wallpaper ----------------------------*/
.wallpaper {
  position: relative;
  z-index: 1;
  padding-top: calc(100vw * (65 / 750));
  padding-bottom: calc(100vw * (150 / 750));
}

.wallpaper .chocochip01 {
  z-index: 2;
  top: calc(100vw * (-115 / 750));
  left: calc(100vw * (55 / 750));
  width: calc(100vw * (139 / 750));
  height: calc(100vw * (178 / 750));
}

.wallpaper .chocochip01 .sec_spray {
  top: calc(100vw * (-95 / 750));
  left: calc(100vw * (-180 / 750));
  width: calc(100vw * (440 / 750));
  height: calc(100vw * (440 / 750));
}

.wallpaper .chocochip02 {
  z-index: 2;
  bottom: calc(100vw * (80 / 750));
  right: calc(100vw * (70 / 750));
  width: calc(100vw * (128 / 750));
  height: calc(100vw * (114 / 750));
}

.wallpaper .c-wrapper {
  padding-left: calc(100vw * (25 / 750));
  padding-right: calc(100vw * (25 / 750));
}

.wallpaper_inner {
  padding: calc(100vw * (90 / 750)) calc(100vw * (35 / 750)) calc(100vw * (80 / 750)) calc(100vw * (35 / 750));
  background-color: rgba(250, 220, 175, 0.4);
}

.wallpaper .sec_ttl {
  margin-bottom: calc(100vw * (50 / 750));
}

.wallpaper_list > li {
  margin-top: calc(100vw * (55 / 750));
}
.wallpaper_list > li:nth-of-type(1) {
  margin-top: 0;
}

.wallpaper_listInner {
  text-align: center;
}

.wallpaper_listInner > dt {
  display: block;
}

.wallpaper_listInner > dt img {
  width: calc(100vw * (500 / 750))
}

.wallpaper_listInner > dd {
  margin-top: calc(100vw * (60 / 750));
}

.wallpaper .c-sns_list {
  margin-top: calc(100vw * (30 / 750));
}

@media screen and (min-width: 768px) {
  .wallpaper {
    padding-top: calc((100vh * 0.5) * (65 / 750));
    padding-bottom: calc((100vh * 0.5) * (150 / 750));
  }

  .wallpaper .chocochip01 {
    top: calc((100vh * 0.5) * (-115 / 750));
    left: calc((100vh * 0.5) * (55 / 750));
    width: calc((100vh * 0.5) * (139 / 750));
    height: calc((100vh * 0.5) * (178 / 750));
  }

  .wallpaper .chocochip01 .sec_spray {
    top: calc((100vh * 0.5) * (-95 / 750));
    left: calc((100vh * 0.5) * (-180 / 750));
    width: calc((100vh * 0.5) * (440 / 750));
    height: calc((100vh * 0.5) * (440 / 750));
  }

  .wallpaper .chocochip02 {
    z-index: 2;
    bottom: calc((100vh * 0.5) * (80 / 750));
    right: calc((100vh * 0.5) * (70 / 750));
    width: calc((100vh * 0.5) * (128 / 750));
    height: calc((100vh * 0.5) * (114 / 750));
  }

  .wallpaper .c-wrapper {
    padding-left: calc((100vh * 0.5) * (25 / 750));
    padding-right: calc((100vh * 0.5) * (25 / 750));
  }

  .wallpaper_inner {
    padding: calc((100vh * 0.5) * (90 / 750)) calc((100vh * 0.5) * (35 / 750)) calc((100vh * 0.5) * (80 / 750)) calc((100vh * 0.5) * (35 / 750));
  }

  .wallpaper .sec_ttl {
    margin-bottom: calc((100vh * 0.5) * (50 / 750));
  }

  .wallpaper_list > li {
    margin-top: calc((100vh * 0.5) * (55 / 750));
  }

  .wallpaper_listInner > dt a:hover {
    opacity: 1;
  }

  .wallpaper_listInner > dt img {
    width: 100%;
  }

  .wallpaper_listInner > dd {
    margin-top: calc((100vh * 0.5) * (60 / 750));
  }

  .wallpaper .c-sns_list {
    margin-top: calc((100vh * 0.5) * (30 / 750));
  }
}


/* Key Visual Bottom ----------------------------*/
.kv_bottom {
  position: relative;
  background-color: #250703;
}

.kv_bottom .c-kv {
  background-color: #250703;
}

.kv_bottom::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: #250703;
  background-image: url(/chocobrownie/assets/common/img/2509/loader_wt.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: calc(100vw * (60 / 750)) auto;
  content: '';
  transition: 1s all;
}
.kv_bottom.is-loaded::before {
  opacity: 0;
  visibility: hidden;
}

.kv_bottom .c-wrapper {
  display: flex;
  align-items: flex-start;
  height: 100%;
  z-index: 2;
}

.kv_bottomSlider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.kv_bottomSlider .slick-list,
.kv_bottomSlider .slick-track,
.kv_bottomSliderInner {
  width: 100%;
  height: 100%;
}

.kv_bottomSliderInner {
  position: absolute;
  top: 0;
  left: 0;
}

.kv_bottomSliderTtl,
.kv_bottomSliderProduct {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.kv_bottomSliderTtl > span,
.kv_bottomSliderProduct > span {
  display: block;
}

.kv_bottomSliderBg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
}
.kv_bottomSliderBg.is-animated {
  transition-duration: 1.5s;
  transition-property: transform;
  transition-timing-function: linear;
}

.kv_bottomSliderComments {
  position: absolute;
  right: calc(100vw * (20 / 750));
  bottom: calc(100vw * (20 / 750));
  z-index: 1;
  color: #fff;
  font-size: calc(100vw * (18 / 750));
  text-align: right;
}

.kv_bottomSliderChoco .kv_bottomSliderTtl {
  width: calc(100vw * (471 / 750));
  margin-top: calc(100vw * (755 / 750) * 0.8);
  margin-left: calc(100vw * (20 / 750));
}
.kv_bottomSliderChoco .kv_bottomSliderBg {
  background-color: #250703;
  background-image: url(/chocobrownie/assets/pages/img/top/2509/kv_bottom_slider_choco_bg.png);
}

.kv_bottomSliderMatcha .kv_bottomSliderTtl {
  width: calc(100vw * (404 / 750));
  margin-top: calc(100vw * (420 / 750) * 0.78);
}
.kv_bottomSliderMatcha .kv_bottomSliderProduct {
  width: calc(100vw * (631 / 750));
  margin-top: calc(100vw * (735 / 750) * 0.89);
}
.kv_bottomSliderMatcha .kv_bottomSliderBg {
  background-color: #00370f;
  background-image: url(/chocobrownie/assets/pages/img/top/2509/kv_bottom_slider_matcha_bg.png);
  background-position: 50% calc(100vw * (-90 / 750));
}

.kv_bottomLineup {
  width: calc(100vw * (730 / 750));
  padding-top: calc(100vw * (1030 / 750) * 0.9);
  margin: 0 auto;
}

.kv_bottomLineupSliderInner {
  width: calc(100vw * (360 / 750));
  margin: 0 calc(100vw * (5 / 750));
}

.kv_bottomLineupSlider .slick-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  bottom: calc(100vw * (-35 / 750));
  text-align: center;
}

.kv_bottomLineupSlider .slick-dots > li {
  flex: 0 0 auto;
  width: auto;
  line-height: 1;
}

.kv_bottomLineupSlider .slick-dots > li > button {
  position: relative;
  width: calc(100vw * (111 / 750));
  height: calc(100vw * (24 / 750));
  border-radius: 100rem;
  font-size: 0;
  text-indent: -999rem;
}

.kv_bottomLineupSlider .slick-dots > li > button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw * (95 / 750));
  height: calc(100vw * (8 / 750));
  border-radius: 100rem;
  background-color: #6f450d;
  content: '';
  transition: all 0.2s;
}

.kv_bottomLineupSlider .slick-dots > li.slick-active > button::before {
  background-color: #d5a559;
}

@media screen and (min-width: 768px) {
  .kv_bottom::before {
    background-size: calc((100vh * 0.5) * (60 / 750)) auto;
  }

  .kv_bottom .c-kv {
    max-width: calc((100vh * 0.4995));
  }

  .kv_bottomSliderComments {
    right: calc((100vh * 0.5) * (20 / 750));
    bottom: calc((100vh * 0.5) * (20 / 750));
    font-size: calc((100vh * 0.5) * (18 / 750));
  }

  .kv_bottomSliderChoco .kv_bottomSliderTtl {
    width: calc((100vh * 0.5) * (471 / 750));
    margin-top: calc((100vh * 0.5) * (755 / 750) * 0.8);
    margin-left: calc((100vh * 0.5) * (20 / 750));
  }

  .kv_bottomSliderMatcha .kv_bottomSliderTtl {
    width: calc((100vh * 0.5) * (404 / 750));
    margin-top: calc((100vh * 0.5) * (420 / 750) * 0.78);
  }
  .kv_bottomSliderMatcha .kv_bottomSliderProduct {
    width: calc((100vh * 0.5) * (631 / 750));
    margin-top: calc((100vh * 0.5) * (735 / 750) * 0.89);
  }
  .kv_bottomSliderMatcha .kv_bottomSliderBg {
    background-position: 50% calc((100vh * 0.5) * (-90 / 750));
  }

  .kv_bottomLineup {
    width: calc((100vh * 0.5) * (730 / 750));
    padding-top: calc((100vh * 0.5) * (1030 / 750) * 0.9);
  }

  .kv_bottomLineupSliderInner {
    width: calc((100vh * 0.5) * (360 / 750));
    margin: 0 calc((100vh * 0.5) * (5 / 750));
  }

  .kv_bottomLineupSlider .slick-dots {
    bottom: calc((100vh * 0.5) * (-35 / 750));
  }

  .kv_bottomLineupSlider .slick-dots > li > button {
    width: calc((100vh * 0.5) * (111 / 750));
    height: calc((100vh * 0.5) * (24 / 750));
  }

  .kv_bottomLineupSlider .slick-dots > li > button::before {
    width: calc((100vh * 0.5) * (95 / 750));
    height: calc((100vh * 0.5) * (8 / 750));
  }

  .kv_bottomLineupSlider .slick-dots > li > button:hover::before,
  .kv_bottomLineupSlider .slick-dots > li.slick-active > button:hover::before {
    background-color: #d5a559;
  }
}


/* Lead ----------------------------*/
.lead {
  margin-top: 100vh;
  padding-top: calc(100vw * (115 / 750));
  padding-bottom: calc(100vw * (75 / 750));
  background-color: #250703;
  background-image: url(/chocobrownie/assets/pages/img/top/2509/lead_bg.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  text-align: center;
}

.lead_ttl {
  margin-bottom: calc(100vw * (55 / 750));
  text-align: center;
}

.lead_ttl > span {
  display: block;
}

.lead_ttl > span:nth-of-type(1) img {
  width: calc(100vw * (520 / 750));
}

.lead_ttl > span:nth-of-type(2) img {
  width: calc(100vw * (604 / 750));
}

.lead_inner {
  text-align: center;
}

.lead_inner > dt {
  display: block;
}

.lead_inner > dt img {
  display: inline-block;
  width: calc(100vw * (276 / 750));
  margin-left: calc(100vw * (60 / 750));
}

.lead_inner > dd {
  margin-bottom: calc(100vw * (65 / 750));
}

.lead_inner > dd img {
  width: calc(100vw * (586 / 750));
}

@media screen and (min-width: 768px) {
  .lead {
    padding-top: calc((100vh * 0.5) * (115 / 750));
    padding-bottom: calc((100vh * 0.5) * (75 / 750));
  }

  .lead_ttl {
    margin-bottom: calc((100vh * 0.5) * (55 / 750));
  }

  .lead_ttl > span:nth-of-type(1) img {
    width: calc((100vh * 0.5) * (520 / 750));
  }

  .lead_ttl > span:nth-of-type(2) img {
    width: calc((100vh * 0.5) * (604 / 750));
  }

  .lead_inner > dt img {
    width: calc((100vh * 0.5) * (276 / 750));
    margin-left: calc((100vh * 0.5) * (60 / 750));
  }

  .lead_inner > dd {
    margin-bottom: calc((100vh * 0.5) * (65 / 750));
  }

  .lead_inner > dd img {
    width: calc((100vh * 0.5) * (586 / 750));
  }
}


/* Split ----------------------------*/
@media screen and (min-width: 768px) {
  .c-split_left::before,
  .c-split_left::after,
  .c-split_right::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background-repeat: no-repeat;
    content: '';
    transition: all 0.2s ease-out;
  }

  .c-split.is-top .c-split_left::before,
  .c-split.is-top .c-split_left::after,
  .c-split.is-top .c-split_right::before {
    opacity: 1;
    visibility: visible;
  }

  .c-split.is-top .c-split_left::before,
  .c-split.is-top .c-split_right::before {
    background-color: #250703;
  }

  .c-split.is-top .c-split_left::before {
    background-image: url(/chocobrownie/assets/pages/img/top/2509/split_left_bg01.png);
    background-position: 50% 0;
    background-size: calc(100vw * (1040 / 2300)) auto;
  }
  .c-split.is-top .c-split_left::after {
    background-image: url(/chocobrownie/assets/pages/img/top/2509/split_left_bg02.png);
    background-position: 50% 0;
    background-size: calc(100vw * (775 / 2300)) auto;
  }

  .c-split.is-top .c-split_right::before {
    background-image: url(/chocobrownie/assets/pages/img/top/2509/split_right_bg01.png);
    background-position: 50% 50%;
    background-size: calc(100vw * (1590 / 2300)) auto;
  }

  .c-split_ttl {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-out;
  }

  .c-split.is-top .c-split_ttl {
    opacity: 0;
    visibility: hidden;
  }

  .c-split.is-top .c-split_menuList > li > * {
    color: #c89678;
  }

  .c-split_particles::before {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-out;
  }

  .c-split.is-top .c-split_particles::before {
    visibility: hidden;
    opacity: 0;
  }

  .c-split_lineup {
    width: 100%;
    max-width: calc(100vw * (545 / 2300));
    padding-top: calc(100vw * (75 / 2300));
    margin: auto auto 0 auto;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s all ease-out;
  }

  .c-split.is-top .c-split_lineup {
    opacity: 1;
    visibility: visible;
  }

  .c-split_lineup .c-index_lineupInner > dd {
    height: calc(100vw * (35 / 2300));
    font-size: calc(100vw * (14 / 2300));
  }

  .c-split.is-top .c-split_comments {
    color: #fff;
  }
}
@media screen and (min-width: 2300px) {
  .c-split.is-top .c-split_left::before {
    background-size: calc(2300px * (1040 / 2300)) auto;
  }
  .c-split.is-top .c-split_left::after {
    background-size: calc(2300px * (775 / 2300)) auto;
  }

  .c-split.is-top .c-split_right::before {
    background-size: calc(2300px * (1590 / 2300)) auto;
  }

  .c-split_lineup {
    max-width: calc(2300px * (545 / 2300));
    padding-top: calc(2300px * (75 / 2300));
  }

  .c-split_lineup .c-index_lineupInner > dd {
    height: calc(2300px * (35 / 2300));
    font-size: calc(2300px * (14 / 2300));
  }
}