@charset "UTF-8";

/* ---------------------------------------------------------------
 * Detail Page Settings
 * ------------------------------------------------------------ */

/* Key Visual ----------------------------*/
body.lineupDetailPage .kv {
  background-color: #250703;
}

body.lineupDetailPage .kv_bg,
body.lineupDetailPage .kv_bgInner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

body.lineupDetailPage .kv_bg {
  overflow: hidden;
}

body.lineupDetailPage .kv_bgInner {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

body.lineupDetailPage .kv_bg.is-animated {
  transition-duration: 1.0s;
  transition-property: transform, opacity;
  transition-timing-function: ease-in;
}

body.lineupDetailPage .kv_bgInner.is-animated {
  transition-duration: 1.6s;
  transition-property: transform;
  transition-timing-function: linear;
}

body.lineupDetailPage .kv_ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

body.lineupDetailPage .kv_ttl > span {
  display: block;
}

body.lineupDetailPage .kv_ttl > span img {
  display: inline-block;
  max-width: initial;
}

body.lineupDetailPage .kv_comments {
  position: absolute;
  right: calc(100vw * (35 / 750));
  bottom: calc(100vw * (30 / 750));
  color: #fff;
  font-size: calc(100vw * (18 / 750));
}

@media screen and (min-width: 768px) {
  body.lineupDetailPage .kv_comments {
    right: calc((100vh * 0.5) * (35 / 750));
    bottom: calc((100vh * 0.5) * (30 / 750));
    font-size: calc((100vh * 0.5) * (18 / 750));
  }
}


/* Overview ----------------------------*/
body.lineupDetailPage .overview {
  position: relative;
  z-index: 1;
  margin-top: 100vh;
  overflow: hidden;
}

body.lineupDetailPage .overview .c-wrapper {
  width: 100%;
  padding-bottom: calc(100vw * (80 / 750));
  background-repeat: repeat;
  background-size: calc(100vw * (41 / 750)) auto;
}

body.lineupDetailPage .overview_inner {
  text-align: center;
}

body.lineupDetailPage .overview_inner > * {
  width: 100%;
}

body.lineupDetailPage .overview_feature > dt,
body.lineupDetailPage .overview_feature > dd {
  display: inline-block;
}

body.lineupDetailPage .overview_feature > dt > span,
body.lineupDetailPage .overview_feature > dt img {
  display: inline-block;
}

body.lineupDetailPage .overview_feature > dt > span {
  margin-left: calc(100vw * (245 / 750));
}

body.lineupDetailPage .overview_feature > dt.is-animated > span {
  animation: infinity-scroll-left 40s infinite linear 0.5s both;
  will-change: transform, opacity, margin-left;
}

body.lineupDetailPage .overview_feature > dd {
  width: 100%;
  margin-bottom: calc(100vw * (50 / 750));
  text-align: center;
}

body.lineupDetailPage .overview_feature > dd > * {
  display: inline-block;
  position: relative;
}

@keyframes infinity-scroll-left {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  98% {
    opacity: 1;
    margin-left: 0;
    transform: translateX(-100%);
  }
  98.1% {
    margin-left: 0;
    opacity: 0;
    transform: translateX(-100%);
  }
  99% {
    margin-left: calc(100vw * (245 / 750));
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    margin-left: calc(100vw * (245 / 750));
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes infinity-scroll-left02 {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  93% {
    opacity: 1;
  }
  98% {
    opacity: 0;
    margin-left: 0;
    transform: translateX(-50%);
  }
  98.1% {
    margin-left: 0;
    opacity: 0;
    transform: translateX(-50%);
  }
  99% {
    margin-left: calc(100vw * (245 / 750));
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    margin-left: calc(100vw * (245 / 750));
    opacity: 1;
    transform: translateX(0);
  }
}

body.lineupDetailPage .overview_ttl {
  text-align: center;
}

body.lineupDetailPage .overview_ttl > span:nth-of-type(1) {
  display: inline-block;
  position: relative;
}

body.lineupDetailPage .overview_ttl > span:nth-of-type(2) {
  display: block;
}

body.lineupDetailPage .overview_ttl > span > span {
  display: block;
}

body.lineupDetailPage .overview_ttl > span:nth-of-type(2) > span > span {
  display: inline-block;
  transition-duration: 3.2s;
}

body.lineupDetailPage .overview_ttl > span img {
  display: inline-block;
}

body.lineupDetailPage .overview_product {
  text-align: center;
}

body.lineupDetailPage .overview_product > dt {
  display: block;
}

body.lineupDetailPage .overview_product > dt img {
  display: inline-block;
}

body.lineupDetailPage .overview_caution {
  text-align: center;
}

body.lineupDetailPage .overview_cautionInner {
  display: inline-block;
  min-width: calc(100vw * (548 / 750));
  margin-bottom: calc(100vw * (65 / 750));
  padding: calc(100vw * (10 / 750));
  border-radius: 1000px;
  background-color: #fff;
  color: #fa3689;
  font-size: calc(100vw * (26 / 750));
  line-height: 1.2;
  text-align: center;
}

body.lineupDetailPage .overview_comments {
  margin-top: calc(100vw * (20 / 750));
  padding-left: calc(100vw * (40 / 750));
  padding-right: calc(100vw * (40 / 750));
  color: #fff;
  font-size: calc(100vw * (18 / 750));
  text-align: right;
}

@media screen and (min-width: 768px) {
  body.lineupDetailPage .overview .c-wrapper {
    padding-bottom: calc((100vh * 0.5) * (80 / 750));
    background-size: calc((100vh * 0.5) * (41 / 750)) auto;
  }

  body.lineupDetailPage .overview_feature > dt > span {
    margin-left: calc((100vh * 0.5) * (245 / 750));
  }
  
  @keyframes infinity-scroll-left {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    98% {
      opacity: 1;
      margin-left: 0;
      transform: translateX(-100%);
    }
    98.1% {
      margin-left: 0;
      opacity: 0;
      transform: translateX(-100%);
    }
    99% {
      margin-left: calc((100vh * 0.5) * (245 / 750));
      opacity: 0;
      transform: translateX(0);
    }
    100% {
      margin-left: calc((100vh * 0.5) * (245 / 750));
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes infinity-scroll-left02 {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    93% {
      opacity: 1;
    }
    98% {
      opacity: 0;
      margin-left: 0;
      transform: translateX(-50%);
    }
    98.1% {
      margin-left: 0;
      opacity: 0;
      transform: translateX(-50%);
    }
    99% {
      margin-left: calc((100vh * 0.5) * (245 / 750));
      opacity: 0;
      transform: translateX(0);
    }
    100% {
      margin-left: calc((100vh * 0.5) * (245 / 750));
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  body.lineupDetailPage .overview_feature > dd {
    margin-bottom: calc((100vh * 0.5) * (50 / 750));
  }

  body.lineupDetailPage .overview_cautionInner {
    min-width: calc((100vh * 0.5) * (548 / 750));
    margin-bottom: calc((100vh * 0.5) * (65 / 750));
    padding: calc((100vh * 0.5) * (10 / 750));
    font-size: calc((100vh * 0.5) * (26 / 750));
  }
  
  body.lineupDetailPage .overview_comments {
    margin-top: calc((100vh * 0.5) * (20 / 750));
    padding-left: calc((100vh * 0.5) * (40 / 750));
    padding-right: calc((100vh * 0.5) * (40 / 750));
    font-size: calc((100vh * 0.5) * (18 / 750));
  }
}



/* ---------------------------------------------------------------
 * Choco Page Settings
 * ------------------------------------------------------------ */

/* Key Visual ----------------------------*/
body.lineupChocoPage .kv_bgInner {
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/choco_kv_bg.jpg);
}

body.lineupChocoPage .kv_ttl {
  margin-top: calc(100vw * (165 / 750));
}

body.lineupChocoPage .kv_ttl > span:nth-of-type(1) {
  margin-bottom: calc(100vw * (40 / 750));
}

body.lineupChocoPage .kv_ttl > span:nth-of-type(1) img {
  width: calc(100vw * (471 / 750));
  margin-left: calc(100vw * (15 / 750));
}

body.lineupChocoPage .kv_ttl > span:nth-of-type(2) img {
  width: calc(100vw * (593 / 750));
}

@media screen and (min-width: 768px) {
  body.lineupChocoPage .kv_ttl {
    margin-top: calc((100vh * 0.5) * (165 / 750));
  }
  
  body.lineupChocoPage .kv_ttl > span:nth-of-type(1) {
    margin-bottom: calc((100vh * 0.5) * (40 / 750));
  }

  body.lineupChocoPage .kv_ttl > span:nth-of-type(1) img {
    width: calc((100vh * 0.5) * (471 / 750));
    margin-left: calc((100vh * 0.5) * (15 / 750));
  }

  body.lineupChocoPage .kv_ttl > span:nth-of-type(2) img {
    width: calc((100vh * 0.5) * (593 / 750));
  }
}


/* Overview ----------------------------*/
body.lineupChocoPage .overview {
  background-color: #001656;
}

body.lineupChocoPage .overview .c-wrapper {
  padding-top: calc(100vw * (115 / 750));
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/choco_overview_bg.png);
}

body.lineupChocoPage .overview_feature > dt {
  display: inline-flex;
  align-items: center;
  width: calc(100vw * (560 / 750));
  height: calc(100vw * (560 / 750));
  overflow: hidden;
  border-radius: 1000px;
  background-color: #190000;
}

body.lineupChocoPage .overview_feature > dt img {
  width: calc(100vw * (1737 / 750));
  max-width: initial;
}

body.lineupChocoPage .overview_feature > dd img {
  width: calc(100vw * (602 / 750));
}

body.lineupChocoPage .overview_feature > dd > *::before {
  position: absolute;
  top: calc(100vw * (-45 / 750));
  left: calc(100vw * (109 / 750));
  width: calc(100vw * (73 / 750));
  height: calc(100vw * (76 / 750));
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/choco_overview_feature_txt_illust.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

body.lineupChocoPage .overview_ttl {
  margin-top: calc(100vw * (60 / 750));
}

body.lineupChocoPage .overview_ttl > span:nth-of-type(1) img {
  width: calc(100vw * (612 / 750));
}

body.lineupChocoPage .overview_ttl > span:nth-of-type(2) {
  text-align: right;
}

body.lineupChocoPage .overview_ttl > span:nth-of-type(2) img {
  width: calc(100vw * (746 / 750));
  margin-top: calc(100vw * (-15 / 750));
}

body.lineupChocoPage .overview_product {
  margin-top: calc(100vw * (5 / 750));
}

body.lineupChocoPage .overview_product > dt img {
  width: calc(100vw * (394 / 750));
  margin-left: calc(100vw * (35 / 750));
}

body.lineupChocoPage .overview_product > dd img {
  width: calc(100vw * (589 / 750));
  margin-left: calc(100vw * (20 / 750));
}

@media screen and (min-width: 768px) {
  body.lineupChocoPage .overview .c-wrapper {
    padding-top: calc((100vh * 0.5) * (115 / 750));
  }

  body.lineupChocoPage .overview_feature > dt {
    width: calc((100vh * 0.5) * (560 / 750));
    height: calc((100vh * 0.5) * (560 / 750));
  }
  
  body.lineupChocoPage .overview_feature > dt img {
    width: calc((100vh * 0.5) * (1737 / 750));
  }

  body.lineupChocoPage .overview_feature > dd img {
    width: calc((100vh * 0.5) * (602 / 750));
  }

  body.lineupChocoPage .overview_feature > dd > *::before {
    top: calc((100vh * 0.5) * (-45 / 750));
    left: calc((100vh * 0.5) * (109 / 750));
    width: calc((100vh * 0.5) * (73 / 750));
    height: calc((100vh * 0.5) * (76 / 750));
  }
  
  body.lineupChocoPage .overview_ttl {
    margin-top: calc((100vh * 0.5) * (60 / 750));
  }

  body.lineupChocoPage .overview_ttl > span:nth-of-type(1) img {
    width: calc((100vh * 0.5) * (612 / 750));
  }

  body.lineupChocoPage .overview_ttl > span:nth-of-type(2) img {
    width: calc((100vh * 0.5) * (746 / 750));
    margin-top: calc((100vh * 0.5) * (-15 / 750));
  }

  body.lineupChocoPage .overview_product {
    margin-top: calc((100vh * 0.5) * (5 / 750));
  }

  body.lineupChocoPage .overview_product > dt img {
    width: calc((100vh * 0.5) * (394 / 750));
    margin-left: calc((100vh * 0.5) * (35 / 750));
  }

  body.lineupChocoPage .overview_product > dd img {
    width: calc((100vh * 0.5) * (589 / 750));
    margin-left: calc((100vh * 0.5) * (20 / 750));
  }
}



/* ---------------------------------------------------------------
 * Matcha Page Settings
 * ------------------------------------------------------------ */

/* Key Visual ----------------------------*/
body.lineupMatchaPage .kv_bgInner {
  background-color: #005a1a;
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/matcha_kv_bg.png);
  background-position: 50% 0;
  background-size: 100% auto;
}

body.lineupMatchaPage .kv_ttl {
  top: 0;
  transform: translate(-50%, 0);
  margin-top: calc(100vw * (480 / 750));
}

body.lineupMatchaPage .kv_ttl > span:nth-of-type(1) {
  margin-bottom: calc(100vw * (70 / 750));
}

body.lineupMatchaPage .kv_ttl > span:nth-of-type(1) img {
  width: calc(100vw * (436 / 750));
}

body.lineupMatchaPage .kv_ttl > span:nth-of-type(2) img {
  width: calc(100vw * (631 / 750));
}

@media screen and (min-width: 768px) {
  body.lineupMatchaPage .kv_ttl {
    margin-top: calc((100vh * 0.5) * (480 / 750));
  }
  
  body.lineupMatchaPage .kv_ttl > span:nth-of-type(1) {
    margin-bottom: calc((100vh * 0.5) * (70 / 750));
  }

  body.lineupMatchaPage .kv_ttl > span:nth-of-type(1) img {
    width: calc((100vh * 0.5) * (436 / 750));
  }

  body.lineupMatchaPage .kv_ttl > span:nth-of-type(2) img {
    width: calc((100vh * 0.5) * (631 / 750));
  }
}


/* Overview ----------------------------*/
body.lineupMatchaPage .overview {
  background: linear-gradient(0deg, rgba(207,157,82,1) 50%, rgba(185,133,44,1) 100%);
}

body.lineupMatchaPage .overview .c-wrapper {
  padding-top: calc(100vw * (105 / 750));
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/matcha_overview_bg.png);
  background-size: 76px auto;
}

body.lineupMatchaPage .overview_feature {
  position: relative;
  z-index: 2;
}

body.lineupMatchaPage .overview_feature > dt {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 2;
  width: calc(100vw * (560 / 750));
  height: calc(100vw * (560 / 750));
  overflow: hidden;
  border-radius: 1000px;
  background-color: #190000;
}

body.lineupMatchaPage .overview_feature > dt.is-animated > span {
  animation: infinity-scroll-left02 20s infinite linear 0.5s both;
  will-change: transform, opacity, margin-left;
}

body.lineupMatchaPage .overview_feature > dt img {
  width: calc(100vw * (1300 / 750));
  max-width: initial;
}

body.lineupMatchaPage .overview_feature > dd {
  position: relative;
  z-index: 1;
}

body.lineupMatchaPage .overview_feature > dd::before {
  position: absolute;
  top: calc(100vw * (-65 / 750));
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: calc(100vw * (750 / 750));
  height: calc(100vw * (514 / 750));
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/matcha_overview_feature_txt_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

body.lineupMatchaPage .overview_feature > dd img {
  width: calc(100vw * (602 / 750));
}

body.lineupMatchaPage .overview_ttl {
  margin-top: calc(100vw * (40 / 750));
}

body.lineupMatchaPage .overview_ttl > span > span {
  display: block;
  position: relative;
  z-index: 1;
}

body.lineupMatchaPage .overview_ttl > span > span::before {
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

body.lineupMatchaPage .overview_ttl > span:nth-of-type(1) > span::before {
  top: calc(100vw * (-70 / 750));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw * (750 / 750));
  height: calc(100vw * (330 / 750));
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/matcha_overview_ttl_bg.png);
}

body.lineupMatchaPage .overview_ttl > span:nth-of-type(1) img {
  width: calc(100vw * (578 / 750));
}

body.lineupMatchaPage .overview_ttl > span:nth-of-type(2) {
  text-align: right;
}

body.lineupMatchaPage .overview_ttl > span:nth-of-type(2) > span::before {
  top: calc(100vw * (90 / 750));
  right: 0;
  width: calc(100vw * (750 / 750));
  height: calc(100vw * (410 / 750));
  background-image: url(/chocobrownie/assets/pages/img/lineup/2503/matcha_overview_ttl_img_bg.png);
}

body.lineupMatchaPage .overview_ttl > span:nth-of-type(2) img {
  width: calc(100vw * (746 / 750));
  margin-top: calc(100vw * (-15 / 750));
  transform: translateY(0);
}

body.lineupMatchaPage .overview_product {
  margin-top: calc(100vw * (5 / 750));
}

body.lineupMatchaPage .overview_product > dt img {
  width: calc(100vw * (356 / 750));
}

body.lineupMatchaPage .overview_product > dd img {
  width: calc(100vw * (631 / 750));
  margin-left: calc(100vw * (20 / 750));
}

@media screen and (min-width: 768px) {
  body.lineupMatchaPage .overview .c-wrapper {
    padding-top: calc((100vh * 0.5) * (105 / 750));
  }

  body.lineupMatchaPage .overview_feature > dt {
    width: calc((100vh * 0.5) * (560 / 750));
    height: calc((100vh * 0.5) * (560 / 750));
  }
  
  body.lineupMatchaPage .overview_feature > dt img {
    width: calc((100vh * 0.5) * (1300 / 750));
  }
  
  body.lineupMatchaPage .overview_feature > dd::before {
    top: calc((100vh * 0.5) * (-65 / 750));
    width: calc((100vh * 0.5) * (750 / 750));
    height: calc((100vh * 0.5) * (514 / 750));
  }

  body.lineupMatchaPage .overview_feature > dd img {
    width: calc((100vh * 0.5) * (602 / 750));
  }

  body.lineupMatchaPage .overview_ttl {
    margin-top: calc((100vh * 0.5) * (40 / 750));
  }

  body.lineupMatchaPage .overview_ttl > span:nth-of-type(1) > span::before {
    top: calc((100vh * 0.5) * (-70 / 750));
    width: calc((100vh * 0.5) * (750 / 750));
    height: calc((100vh * 0.5) * (330 / 750));
  }

  body.lineupMatchaPage .overview_ttl > span:nth-of-type(1) img {
    width: calc((100vh * 0.5) * (578 / 750));
  }
  
  body.lineupMatchaPage .overview_ttl > span:nth-of-type(2) > span::before {
    top: calc((100vh * 0.5) * (90 / 750));
    width: calc((100vh * 0.5) * (750 / 750));
    height: calc((100vh * 0.5) * (410 / 750));
  }

  body.lineupMatchaPage .overview_ttl > span:nth-of-type(2) img {
    width: calc((100vh * 0.5) * (746 / 750));
    margin-top: calc((100vh * 0.5) * (-15 / 750));
  }

  body.lineupMatchaPage .overview_product {
    margin-top: calc((100vh * 0.5) * (5 / 750));
  }

  body.lineupMatchaPage .overview_product > dt img {
    width: calc((100vh * 0.5) * (356 / 750));
  }

  body.lineupMatchaPage .overview_product > dd img {
    width: calc((100vh * 0.5) * (631 / 750));
    margin-left: calc((100vh * 0.5) * (20 / 750));
  }
}



/* ---------------------------------------------------------------
 * Mini Page Settings
 * ------------------------------------------------------------ */

/* Key Visual ----------------------------*/
body.lineupMiniPage .kv_bgInner {
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/mini_kv_bg.jpg);
}

body.lineupMiniPage .kv_ttl {
  margin-top: calc(100vw * (155 / 750));
}

body.lineupMiniPage .kv_ttl > span:nth-of-type(1) {
  margin-bottom: calc(100vw * (35 / 750));
}

body.lineupMiniPage .kv_ttl > span:nth-of-type(1) img {
  width: calc(100vw * (471 / 750));
  margin-left: calc(100vw * (30 / 750));
}

body.lineupMiniPage .kv_ttl > span:nth-of-type(2) img {
  width: calc(100vw * (420 / 750));
}

@media screen and (min-width: 768px) {
  body.lineupMiniPage .kv_ttl {
    margin-top: calc((100vh * 0.5) * (155 / 750));
  }
  
  body.lineupMiniPage .kv_ttl > span:nth-of-type(1) {
    margin-bottom: calc((100vh * 0.5) * (35 / 750));
  }

  body.lineupMiniPage .kv_ttl > span:nth-of-type(1) img {
    width: calc((100vh * 0.5) * (471 / 750));
    margin-left: calc((100vh * 0.5) * (30 / 750));
  }

  body.lineupMiniPage .kv_ttl > span:nth-of-type(2) img {
    width: calc((100vh * 0.5) * (420 / 750));
  }
}


/* Overview ----------------------------*/
body.lineupMiniPage .overview {
  background-color: #fff8b0;
}

body.lineupMiniPage .overview .c-wrapper {
  padding-top: calc(100vw * (115 / 750));
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/mini_overview_bg.png);
}

body.lineupMiniPage .overview_feature {
  padding-top: 0;
}

body.lineupMiniPage .overview_feature > dt {
  display: block;
  text-align: right;
}

body.lineupMiniPage .overview_feature > dt img {
  width: calc(100vw * (602 / 750));
  margin-left: calc(100vw * (20 / 750));
}

body.lineupMiniPage .overview_feature > dd > *::before {
  position: absolute;
  top: calc(100vw * (-52 / 750));
  left: calc(100vw * (55 / 750));
  width: calc(100vw * (56 / 750));
  height: calc(100vw * (72 / 750));
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/mini_overview_feature_txt_illust.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

body.lineupMiniPage .overview_feature > dd img {
  width: calc(100vw * (610 / 750));
}

body.lineupMiniPage .overview_ttl {
  margin-top: calc(100vw * (-20 / 750));
}

body.lineupMiniPage .overview_ttl > span:nth-of-type(1) {
  margin-bottom: calc(100vw * (35 / 750));
}

body.lineupMiniPage .overview_ttl > span:nth-of-type(1) img {
  width: calc(100vw * (614 / 750));
  margin-left: calc(100vw * (35 / 750));
}

body.lineupMiniPage .overview_ttl > span:nth-of-type(2) > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(100vw * (560 / 750));
  height: calc(100vw * (560 / 750));
  border-radius: 1000px;
  overflow: hidden;
  background-color: #190000;
}

body.lineupMiniPage .overview_ttl > span:nth-of-type(2) > span img {
  width: calc(100vw * (456 / 750));
}

body.lineupMiniPage .overview_product {
  margin-top: calc(100vw * (40 / 750));
}

body.lineupMiniPage .overview_product > dt,
body.lineupMiniPage .overview_product > dd {
  width: 100%;
  text-align: center;
}

body.lineupMiniPage .overview_product > dt {
  margin-bottom: calc(100vw * (20 / 750));
}

body.lineupMiniPage .overview_product > dt img {
  width: calc(100vw * (349 / 750));
  margin-left: calc(100vw * (25 / 750));
}

body.lineupMiniPage .overview_product > dd img {
  width: calc(100vw * (510 / 750));
  margin-left: calc(100vw * (20 / 750));
}

body.lineupMiniPage .overview_caution {
  text-align: center;
}

body.lineupMiniPage .overview_comments {
  transform: translateY(22px);
  color: #333;
}

@media screen and (min-width: 768px) {
  body.lineupMiniPage .overview .c-wrapper {
    padding-top: calc((100vh * 0.5) * (115 / 750));
  }

  body.lineupMiniPage .overview_feature > dt img {
    width: calc((100vh * 0.5) * (602 / 750));
    margin-left: calc((100vh * 0.5) * (20 / 750));
  }
  
  body.lineupMiniPage .overview_feature > dd > *::before {
    top: calc((100vh * 0.5) * (-52 / 750));
    left: calc((100vh * 0.5) * (55 / 750));
    width: calc((100vh * 0.5) * (56 / 750));
    height: calc((100vh * 0.5) * (72 / 750));
  }

  body.lineupMiniPage .overview_feature > dd img {
    width: calc((100vh * 0.5) * (610 / 750));
  }
  
  body.lineupMiniPage .overview_ttl {
    margin-top: calc((100vh * 0.5) * (-20 / 750));
  }
  
  body.lineupMiniPage .overview_ttl > span:nth-of-type(1) {
    margin-bottom: calc((100vh * 0.5) * (35 / 750));
  }

  body.lineupMiniPage .overview_ttl > span:nth-of-type(1) img {
    width: calc((100vh * 0.5) * (614 / 750));
    margin-left: calc((100vh * 0.5) * (35 / 750));
  }
  
  body.lineupMiniPage .overview_ttl > span:nth-of-type(2) > span {
    width: calc((100vh * 0.5) * (560 / 750));
    height: calc((100vh * 0.5) * (560 / 750));
  }

  body.lineupMiniPage .overview_ttl > span:nth-of-type(2) > span img {
    width: calc((100vh * 0.5) * (456 / 750));
  }

  body.lineupMiniPage .overview_product {
    margin-top: calc((100vh * 0.5) * (40 / 750));
  }
  
  body.lineupMiniPage .overview_product > dt {
    margin-bottom: calc((100vh * 0.5) * (20 / 750));
  }

  body.lineupMiniPage .overview_product > dt img {
    width: calc((100vh * 0.5) * (349 / 750));
    margin-left: calc((100vh * 0.5) * (25 / 750));
  }

  body.lineupMiniPage .overview_product > dd img {
    width: calc((100vh * 0.5) * (510 / 750));
    margin-left: calc((100vh * 0.5) * (20 / 750));
  }
}



/* ---------------------------------------------------------------
 * Mini Matcha Page Settings
 * ------------------------------------------------------------ */

/* Key Visual ----------------------------*/
body.lineupMinimatchaPage .kv_bgInner {
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/minimatcha_kv_bg.jpg);
}

body.lineupMinimatchaPage .kv_ttl {
  margin-top: calc(100vw * (150 / 750));
}

body.lineupMinimatchaPage .kv_ttl > span:nth-of-type(1) {
  margin-bottom: calc(100vw * (1 / 750));
}

body.lineupMinimatchaPage .kv_ttl > span:nth-of-type(1) img {
  width: calc(100vw * (451 / 750));
}

body.lineupMinimatchaPage .kv_ttl > span:nth-of-type(2) img {
  width: calc(100vw * (518 / 750));
  margin-left: calc(100vw * (20 / 750));
}

@media screen and (min-width: 768px) {
  body.lineupMinimatchaPage .kv_ttl {
    margin-top: calc((100vh * 0.5) * (150 / 750));
  }
  
  body.lineupMinimatchaPage .kv_ttl > span:nth-of-type(1) {
    margin-bottom: calc((100vh * 0.5) * (1 / 750));
  }

  body.lineupMinimatchaPage .kv_ttl > span:nth-of-type(1) img {
    width: calc((100vh * 0.5) * (451 / 750));
  }

  body.lineupMinimatchaPage .kv_ttl > span:nth-of-type(2) img {
    width: calc((100vh * 0.5) * (518 / 750));
    margin-left: calc((100vh * 0.5) * (20 / 750));
  }
}


/* Overview ----------------------------*/
body.lineupMinimatchaPage .overview {
  background: linear-gradient(0deg, rgba(128,175,40,1) 15%, rgba(0,79,26,1) 100%);
}

body.lineupMinimatchaPage .overview .c-wrapper {
  padding-top: calc(100vw * (115 / 750));
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/minimatcha_overview_bg.png);
  background-size: 76px auto;
}

body.lineupMinimatchaPage .overview_feature > dt {
  display: block;
  text-align: right;
}

body.lineupMinimatchaPage .overview_feature > dt img {
  width: calc(100vw * (592 / 750));
  margin-left: calc(100vw * (30 / 750));
}

body.lineupMinimatchaPage .overview_feature > dd img {
  width: calc(100vw * (650 / 750));
}

body.lineupMinimatchaPage .overview_ttl {
  margin-top: calc(100vw * (40 / 750));
}

body.lineupMinimatchaPage .overview_ttl > span:nth-of-type(1) {
  margin-bottom: calc(100vw * (60 / 750));
}

body.lineupMinimatchaPage .overview_ttl > span:nth-of-type(1) img {
  width: calc(100vw * (577 / 750));
}

body.lineupMinimatchaPage .overview_ttl > span:nth-of-type(2) > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(100vw * (560 / 750));
  height: calc(100vw * (560 / 750));
  border-radius: 1000px;
  overflow: hidden;
  background-color: #190000;
  background-image: url(/chocobrownie/assets/pages/img/lineup/2509/minimatcha_overview_ttl_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

body.lineupMinimatchaPage .overview_ttl > span:nth-of-type(2) > span img {
  width: calc(100vw * (416 / 750));
}

body.lineupMinimatchaPage .overview_product {
  margin-top: calc(100vw * (45 / 750));
}

body.lineupMinimatchaPage .overview_product > dt {
  margin-bottom: calc(100vw * (1 / 750));
}

body.lineupMinimatchaPage .overview_product > dt img {
  width: calc(100vw * (337 / 750));
}

body.lineupMinimatchaPage .overview_product > dd img {
  width: calc(100vw * (536 / 750));
  margin-left: calc(100vw * (20 / 750));
}

body.lineupMinimatchaPage .overview_comments {
  transform: translateY(22px);
}

@media screen and (min-width: 768px) {
  body.lineupMinimatchaPage .overview .c-wrapper {
    padding-top: calc((100vh * 0.5) * (115 / 750));
  }

  body.lineupMinimatchaPage .overview_feature > dt img {
    width: calc((100vh * 0.5) * (592 / 750));
    margin-left: calc((100vh * 0.5) * (30 / 750));
  }

  body.lineupMinimatchaPage .overview_feature > dd img {
    width: calc((100vh * 0.5) * (650 / 750));
  }
  
  body.lineupMinimatchaPage .overview_ttl {
    margin-top: calc((100vh * 0.5) * (40 / 750));
  }
  
  body.lineupMinimatchaPage .overview_ttl > span:nth-of-type(1) {
    margin-bottom: calc((100vh * 0.5) * (60 / 750));
  }

  body.lineupMinimatchaPage .overview_ttl > span:nth-of-type(1) img {
    width: calc((100vh * 0.5) * (577 / 750));
  }
  
  body.lineupMinimatchaPage .overview_ttl > span:nth-of-type(2) > span {
    width: calc((100vh * 0.5) * (560 / 750));
    height: calc((100vh * 0.5) * (560 / 750));
  }

  body.lineupMinimatchaPage .overview_ttl > span:nth-of-type(2) > span img {
    width: calc((100vh * 0.5) * (416 / 750));
  }

  body.lineupMinimatchaPage .overview_product {
    margin-top: calc((100vh * 0.5) * (45 / 750));
  }
  
  body.lineupMinimatchaPage .overview_product > dt {
    margin-bottom: calc((100vh * 0.5) * (1 / 750));
  }

  body.lineupMinimatchaPage .overview_product > dt img {
    width: calc((100vh * 0.5) * (337 / 750));
  }

  body.lineupMinimatchaPage .overview_product > dd img {
    width: calc((100vh * 0.5) * (536 / 750));
    margin-left: calc((100vh * 0.5) * (20 / 750));
  }
}