/*----- base -----*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-family: "FOT-スーラ Pro DB", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, Roboto, Noto, "Segoe UI", 游ゴシック, "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.5;
  color: #420001;
  scroll-behavior: smooth;
}
@media (max-width:1309px) {
  html {
    font-size: 0.76vw;
  }
}
@media (max-width:767px) {
  html {
    font-size: 1.6vw;
  }
}
body {
  font-size: 1.6rem;
  color: #421D01;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
ul, ol {
  list-style: none;
}
/*----- base end -----*/

/*----- common -----*/
.fc-red {
  color: red;
}
.mb3 {
  margin-bottom: 3rem;
}
/*----- common end -----*/



.bg {
  background-image: url(/home/brands/dolce-gusto/sites/default/files/brand/ndg/campaign1/images/top_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.bg2 {
  background-image: linear-gradient(#F7A600, #FFE4AD);
}
.bg3 {
  background: #FFF6E5;
}
.bg4 {
  background-image: url(/home/brands/dolce-gusto/sites/default/files/brand/ndg/campaign1/images/ice_menu_bunner_3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.bg5 {
  background: #E8F7FF;
}
.bg6 {
  background: #D4E9E1;
}
.bg7 {
  background-image: linear-gradient(#0A2C86, #008CCD);
}
.bg8 {
  background: #E8F7FF;
}
.box {
  background: #fff;
  padding: 2rem;
}
.brand-footer__h2 {
  background: #1E3932;
  color: #fff;
  padding: 1.5rem;
  font-size: 3.2rem;
  line-height: 1;
  text-align: center;
}
.brand-footer__nav {
  display: flex;
  justify-content: center;
  align-items: end;
}
.brand-footer__nav li {
  width: calc(100% / 3);
  text-align: center;
  padding: 2rem;
}
.campaign {
  margin-top: 3rem;
  padding: 2rem;
  background-color: #fff;
}
@media screen and (max-width:979px) {
  .campaign {
    margin: 2rem;
  }
}
@media screen and (max-width:767px) {
  .campaign {
    padding: 2vw;
  }
}
.campaign__dl {
  display: flex;
  flex-wrap: wrap;
}
.campaign__dl dt {
  width: 22rem;
  margin-right: .5rem;
  background: #F7A600;
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
  padding: .5em;
  margin-bottom: .5rem;
  flex: none;
}
.campaign--machine__dl dt {
  background: #0A2C86;
}
.campaign__dl dd {
  width: calc(100% - 22.5rem);
  font-size: 1.8rem;
  background: #FFF6E5;
  padding: .5em;
  margin-bottom: .5rem;
}
.campaign--machine__dl dd {
  background: #E8F7FF;
}
.course-detail {
  display: none;
}
.course-detail.is-active {
  display: block;
}
@media screen and (max-width:767px) {
  .img-txt4_machine {
    width: 59.2vw;
  }
  .img-txt6 {
    width: 58.5vw;
  }
  .img-txt7 {
    width: 78.8vw;
    margin: 0 auto;
  }
  .img-txt8 {
    width: 76vw;
    margin: 0 auto;
  }
}
.flow {
  background: #fff;
  margin-top: 5rem;
}
@media screen and (max-width:979px) {
  .flow {
    padding: 0 4rem;
  }
}
.flow__caution {
  padding: 1em;
  border: 1px solid #FF0100;
  max-width: 74.2rem;
  color: #FF0100;
  margin-top: 1rem;
}
.flow__caution__ul li {
  text-indent: -1em;
  padding-left: 1em;
}
.flow__dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 3rem;
}
.flow__dl dt {
  width: 50px;
  margin: 0 1rem;
}
.flow__dl dd {
  width: calc(100% - 50px - 2rem);
}
.flow__jump {
  padding: .5em;
  display: block;
  max-width: 74.2rem;
  margin-top: 1rem;
  border: 1px solid #420001;
  text-decoration: none;
}
.flow__right {
  margin-left: calc(50px + 2rem);
}

@media screen and (max-width:767px) {
  .flow__right--sp-clear {
    margin-left: 0;
  }
}
.flow__right__note {
  padding: 1em;
  background: #E5DFDD;
  max-width: 74.2rem;
  margin-top: 1rem;
}
.cp-header {
  height: 21vw;
  text-align: center;
  background: #fff;
  position: relative;
}
.cp-header img {
  height: 100%;
  width: auto;
}
.main {
  max-width: 1310px;
  margin: 0 auto;
}
.main2 {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.main3 {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.recipe-detail {
  background: #FFEDDD;
  display: none;
}
.recipe-detail--2 {
  background: #FFEFBC;
}
.recipe-detail--3 {
  background: #EDF0AF;
}
.recipe-detail.is-active {
  display: block;
}
.recipe-detail__2col {
  display: flex;
  justify-content: center;
}
.recipe-detail__2col li {
  width: 50%;
  text-align: center;
  flex: none;
}
@media screen and (max-width:979px) {
  .recipe-detail__2col li {
    padding: 0 3rem;
  }
}
.recipe-detail__2col li h3 {
  font-size: 3rem;
}
.recipe-detail__contain {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 6rem;
}
.recipe-detail__line {
  margin-top: 3rem;
  border-bottom: 1px solid #421D01;
}
.recipe-link {
  width: 76vw;
  margin: 2vw auto;
}
.recipes {
  display: flex;
  justify-content: space-between;
}
.recipes li {
  padding-bottom: 3rem;
}
@media screen and (max-width:979px) {
  .recipes li {
    width: 30%;
  }
}
.recipes li.is-active {
  background: #FFEDDD;
}
.recipes li:nth-child(2).is-active {
  background: #FFEFBC;
}
.recipes li:nth-child(3).is-active {
  background: #EDF0AF;
}
.sp-course-txt {
  width: 60vw;
  margin: 4vw auto 0;
}
.tab {
  display: flex;
  max-width: 920px;
  justify-content: space-between;
  margin: 2rem auto 0;
  align-items: center;
}
@media screen and (max-width:767px) {
  .tab__item {
    padding: 0 2vw;
  }
}
.terms h2 {
  font-size: 2.6rem;
  text-align: center;
  color: #B47800;
}
@media screen and (max-width:767px) {
  .terms h2 {
    font-size: 5.6vw;
  }
}
.terms--machine h2 {
  color: #0A2C86;
}
.terms__before {
  color: #666666;
  text-align: center;
  margin-bottom: 1em;
}
@media screen and (max-width:767px) {
  .terms__before {
    font-size: 3.6vw;
  }
}
.terms__btn__a {
  display: flex;
  background: #707070;
  width: 70rem;
  height: 11.6rem;
  justify-content: center;
  align-items: center;
  border-radius: 6rem;
  pointer-events: none;
}
.terms__btn__a.active {
  pointer-events: auto;
  background: #FF0100;
}
.terms__scroll__head {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
}
@media screen and (max-width:767px) {
  .terms__scroll__head {
    font-size: 4.1vw;
  }
}
.terms__ul {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 1.4rem;
  color: #666;
}
@media screen and (max-width:767px) {
  .terms__ul {
    font-size: 3.6vw;
  }
}
.upload {
  margin-top: 5rem;
  text-align: center;
}
.upload__good {
  background: #fff;
  padding: 1rem;
}
.upload__sample {
  font-size: 2.6rem;
  border: 3px solid #F7A600;
  background: #fff;
  padding: .5em;
  line-height: 1;
  margin-top: 3rem;
  position: relative;
  color: #B47800;
}
@media screen and (max-width:767px) {
  .upload__sample {
    font-size: 5.6vw;
  }
}
.upload__sample--machine {
  border: 3px solid #0A2C86;
  color: #0A2C86;
}
.upload__sample--bad:after {
  content: '';
  display: block;
  width: 2.65rem;
  height: 2.65rem;
  border-right: 3px solid #F7A600;
  border-top: 3px solid #F7A600;
  rotate: 135deg;
  position: absolute;
  right: 4rem;
  top: .3rem;
}
.upload__sample--machine.upload__sample--bad:after {
  border-right: 3px solid #0A2C86;
  border-top: 3px solid #0A2C86;
}
.upload__sample-img {
  background: #fff;
  padding: 3rem 0;
  border: 3px solid #F7A600;
  border-top: none;
}
.upload__sample-img--machine.upload__sample-img {
  border-color: #0A2C86;
}

@media screen and (min-width:768px) {
  .sp-only {
    display: none !important;
  }
}
@media screen and (max-width:767px) {
  .kv {
    margin: 4vw;
  }
}

/*
 * slider - capsule
 */
.capsuledetailsbox {
  padding: 0;
}
.sliderwrapper {
  padding: 0;
}
.detailbox img {
  margin: 0 auto;
}
.detailbox__img {
  padding: 0 4rem;
}
@media screen and (max-width:767px) {
  .detailbox__img {
    padding: 0;
  }
}
.dots-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.dots-wrap li {
  width: 10px;
  height: 10px;
  margin: 0 10px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #4C6A77;
}
.dots-wrap li:hover,
.dots-wrap li.slick-active {
  background: #4C6A77;
}
.dots-wrap li button {
  display: none;
}
.sec_capsule {
  padding-top: 8rem;
  background: none;
}
#letstry_slider li {
  text-align: center;
}
#letstry_slider .slick-list li:not(.slick-current) {
  opacity: .5;
}
#letstry_slider li img {
  display: inline;
  transition-duration: 0.5s;
}
@media screen and (max-width:767px) {
  #letstry_slider li img {
    padding: 0 4vw;
  }
}
#letstry_slider li:not(.slick-current) img {
  transform: scale(50%);
}
@media screen and (max-width:767px) {
  #letstry_slider li:not(.slick-current) img {
    transform: scale(100%);
  }
}

/*
 * slider - recipe
 */
.recipe-ttl {
  height: 20vw;
  width: 90vw;
  position: absolute;
  left: -11vw;
  visibility: hidden;
}
.is-active .recipe-ttl {
  visibility: visible;
}
.recipe-img {
  margin-top: 3rem;
}
@media (max-width:767px) {
  .recipe-img {
    margin-top: 21vw;
  }
}

/* override */
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .sliderwrapper {
    width: 93.9vw;
  }
}
.recipe_sec .product {
  background: none;
  margin: 0;
  padding: 0 0 2rem 0;
  height: auto;
}
.recipe_sec .product img {
  width: auto;
  display: inline;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .summer_sec {
    padding-bottom: 0;
  }
}
@media (max-width:767px) {
  .summer_sec {
    padding-bottom: 0;
  }
}
.summer_sec .slider-nav .slick-slide {
  width: 310px;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .summer_sec .slider-nav .slick-slide {
    width: 28.86vw;
  }
}
@media (max-width:767px) {
  .summer_sec .slider-nav .slick-slide {
    margin-bottom: 0;
  }
}
.summer_sec .slider-nav .slick-slide.is-active:after,
.summer_sec .slider-nav .slick-slide.slick-center:after,
.summer_sec .slider-nav .slick-slide:nth-child(2).is-active:after,
.summer_sec .slider-nav .slick-slide:nth-child(4).is-active:after,
.summer_sec .slider-nav .slick-slide:nth-child(2).slick-center:after,
.summer_sec .slider-nav .slick-slide:nth-child(4).slick-center:after {
}
.summer_sec .summer_content {
  width: 1010px;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .summer_sec .summer_content {
    width: 93.9vw;
  }
}
@media (max-width:767px) {
  .summer_sec .summer_content {
    width: 100%;
  }
}
@media (max-width:979px) {
  .capsuledetailsbox .detailbox {
    width: 93.5vw;
  }
}
@media (max-width:767px) {
  .summer_sec .slider-nav .slick-slide.is-active:after,
  .summer_sec .slider-nav .slick-slide.slick-center:after {
    background: #EEF0B0;
    content: none;
  }
  .summer_sec .slider-nav .slick-slide span {
    display: none;
  }
  .summer_sec .slider-nav .slick-slide img {
    margin-bottom: 0;
  }
  .summer_sec .slider-single {
    width: 100%;
  }
  .summer_sec .slider-single .slick-slide {
    padding-top: 0;
    background: linear-gradient(transparent, #FFEDDD 30%);
  }
  .summer_sec .slider-single .slick-slide:nth-child(2) {
    background: linear-gradient(transparent, #FFEEBA 30%);
  }
  .summer_sec .slider-single .slick-slide:nth-child(3) {
    background: linear-gradient(transparent, #EEF0B0 30%);
  }
  .recipe_items {
    padding-top: 5vw;
  }
}
#letstry_slider .slick-center::before {
  content: none;
}

/*
 * video
 */
.video {
  width: 460px;
  height: 574px;
  margin: 0 auto;
  position: relative;
}
.video video {
  width: 100%;
  height: auto;
  pointer-events: none;
}
.video__remark {
  text-align: right;
}
.video__sound {
  position: absolute;
  right: 35px;
  bottom: 35px;
  cursor: pointer;
  z-index: 3;
  width: 50px;
}
.video__sound img:first-child, .video__sound.on img:last-child {
  display: block;
}
.video__sound img:last-child, .video__sound.on img:first-child {
  display: none;
}



.page-top {
  position: fixed;
  left: calc(50% + 575px);
  bottom: 10px;
  z-index: 99;
}
.flow__img {
  display: block;
  margin: 2rem 0;
}
.flow__ttl {
  display: block;
  text-align: center;
  margin-bottom: 3rem;
}
.footer {
  background: #efefef;
  padding: 3em 1em;
  color: #000;
}
.footer__inquiry {
  text-align: center;
}
.footer__inquiry p {
  margin:.5em 0;
}
.footer__inquiry__tel {
  font-size: 1.3em;
}
.footer__requirement {
  margin-top: 2em;
}
.footer__requirement__ttl {
  border-bottom: 2px dotted #9e9e9f;
  padding-left: .5em;
}
.footer__requirement__body {
  padding: 1em;
}
.terms {
  background: #fff;
}
.terms h3 {
  font-size: 2rem;
  text-align: center;
  font-weight: 500;
}
.terms__btn {
  display: flex;
  justify-content: center;
  margin: 4rem 0;
}
.terms__scroll {
  color: #000;
  border: 1px solid #707070;
  overflow-y: scroll;
  padding: 3rem;
  height: 50rem;
}
.upload h2 {
  font-weight: bold;
  font-size: 3rem;
  margin-bottom: 1rem;
}
.upload__sample-img p {
  margin-bottom: 1em;
  font-size: 2rem;
  color: #707070;
}
.upload__sample-img--bad {
  display: none;
}
.upload__sample--bad {
  cursor: pointer;
}
.upload__sample--bad.is-open:after {
  rotate: -45deg;
  right: 4rem;
  top: 2rem;
}
.upload__ul {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0 3rem;
  flex-wrap: wrap;
}
.upload__ul li {
  width: 23.5%;
  flex: none;
}
@media (max-width:767px) {
  .upload__ul li {
    width: 74vw;
    margin: 1em 0;
  }
}
.upload__ul li p {
  font-size: 1.4rem;
  margin-top: .5em;
}
.wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width:1309px) {
  .page-top {
    width: 10vw;
    right: 10px;
    left: auto;
  }
  .terms__btn__a picture {
    width: 37vw;
  }
}
@media (max-width:767px) {
  .campaign__dl dt,
  .campaign__dl dd {
    width: 100%;
    font-size: 2.6rem;
  }
  .campaign__dl dd {
    text-align: center;
  }
  .flow__note {
    width: 100%;
    font-size: 2rem;
  }
  .flow__dl dd {
    font-size: 2rem;
    width: calc(100% - 14vw);
  }
  .flow__dl dd h2 {
    font-size: 3.7rem;
  }
  .flow__dl dd h2 span {
    font-size: 2.3rem;
    line-height: 1;
    display: block;
    margin-bottom: .5em;
  }
  .flow__dl dt {
    width: 13vw;
    margin: 0 1vw 0 0;
  }
  .flow__jump {
    text-indent: -1em;
    padding-left: 1.5em;
  }
  .footer {
    font-size: 2.1rem;
  }
  .terms h3 {
    font-size: 2.9rem;
  }
  .terms__btn__a {
    width: 50rem;
    height: 16.5rem;
    border-radius: 10rem;
  }
  .terms__btn__a picture {
    width: 59vw;
  }
  .upload {
    margin-top: 0;
  }
  .upload h2 {
    font-size: 3.7rem;
  }
  .upload__good,
  .upload__sample-img {
    padding: 1em;
  }
  .upload__sample-img p {
    font-size: 2.6rem;
  }
  .upload__ul {
    justify-content: center;
  }
  .wrapper {
    background-image: none;
  }
}