/*----- base -----*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-family: "FOT-スーラ Pro DB", "M PLUS 1", sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.5;
  color: #5F3418;
  scroll-behavior: smooth;
}
body {
  font-size: 1.6rem;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
ul {
  list-style: none;
}
@media (max-width:1309px) {
  html {
    font-size: 0.76vw;
  }
}
@media (max-width:767px) {
  html {
    font-size: 1.8vw;
  }
}
/*----- base end -----*/



/*----- common -----*/
.bold {
  font-weight: bold;
}
.fc-darkred {
  color: #BC2322;
}
.fc-red {
  color: red;
}
.fc-white {
  color: #fff;
}
.fc-gray {
  color: #666666;
}
.l-box {
  padding: 3em 1em;
}
@media (max-width:767px) {
  .l-box {
    padding: 3em 3vw;
  }
}
.mb3 {
  margin-bottom: 3rem;
}
.mt-2 {
  margin-top: -2rem;
}
.mt1 {
  margin-top: 1rem;
}
.mt2 {
  margin-top: 2rem;
}
.mt3 {
  margin-top: 3rem;
}
.mt4 {
  margin-top: 4rem;
}
.mt5 {
  margin-top: 5rem;
}
.mt6 {
  margin-top: 6rem;
}
.ml3 {
  margin-left: 3rem;
}
.ml10 {
  margin-left: 10rem;
}
.pl2 {
  padding-left: 2rem;
}
.pl4 {
  padding-left: 4rem;
}
.pl5 {
  padding-left: 5rem;
}
.pl13 {
  padding-left: 13rem;
}
.pr2 {
  padding-right: 2rem;
}
.pr4 {
  padding-right: 4rem;
}
.pr5 {
  padding-right: 5rem;
}
.pr13 {
  padding-right: 13rem;
}
.pt3 {
  padding-top: 3rem;
}
.pt4 {
  padding-top: 4rem;
}
.pt5 {
  padding-top: 5rem;
}
.pb4 {
  padding-bottom: 4rem;
}
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.fs14 {
  font-size: 1.4rem;
}
.fs15 {
  font-size: 1.5rem;
}
.fs17 {
  font-size: 1.7rem;
}
.fs20 {
  font-size: 2rem;
}
.fs23 {
  font-size: 2.3rem;
}
.fs40 {
  font-size: 4rem;
}
.inline-block {
  display: inline-block;
}
.indent1 {
  text-indent: -1em;
  padding-left: 1em;
}
.relative {
  position: relative;
}
.flex-2col {
  display: flex;
}
.flex-2col__items {
  width: 50%;
  flex: none;
}
.b-radius-bottom {
  background-color: #FCEAE3;
  border-radius: 0 0 2.5rem 2.5rem;
}
.p-relative {
  position: relative;
}
@media screen and (max-width:767px) {
  .sp-pr2 {
    padding-right: 2rem;
  }
  .sp-pl2 {
    padding-left: 2rem;
  }
  .sp-pt2 {
    padding-top: 2rem;
  }
  .sp-pb2 {
    padding-bottom: 2rem;
  }
  .sp-mt2 {
    margin-top: 2rem;
  }
  .sp-ml8vw {
    margin-left: 8vw;
  }
  .sp-mr8vw {
    margin-right: 8vw;
  }
  .sp-fs12 {
    font-size: 3vw;
  }
  .sp-fs13 {
    font-size: 3.3vw;
  }
  .sp-fs17 {
    font-size: 1.7rem;
  }
  .sp-fs18 {
    font-size: 4.5vw;
  }
  .sp-center {
    text-align: center;
  }
  .sp-1col {
    display: block;
  }
  .sp-1col__items {
    width: 100%;
  }
}
/*----- common end -----*/


@media screen and (max-width:767px) {
  .sp-flow-btn {
    height: 17.5vw;
  }
  .sp-flow-btn img {
    height: 100%;
    width: auto;
  }
}
.arrow {
  margin-top: 1rem;
}
.h2-img {
  text-align: center;
}
.box {
  background: #fff;
}
.box--radius {
  border-radius: 2.5rem;
}
.box--radius-top {
  border-radius: 2.5rem 2.5rem 0 0;
}
.box--brown {
  background: #5F3418;
  padding: 3rem;
}
.product-list {
  text-align: center;
}
.product-list li {
  font-size: 2.3rem;
  text-align: left;
}
.step {
  padding: .9rem 0;
  text-align: center;
  background-color: #FCEAE3;
  position: relative;
}
.step--1 {
  border-radius: 2.5rem 2.5rem 0 0;
}
.step--3 {
  text-align: left;
}
.step--3__ttl {
  margin-left: 18rem;
}
.step__icon {
  position: absolute;
  top: 0;
  left: 5rem;
  aspect-ratio: 1;
  max-height: 100%;
}
.step-bg1 {
  position: absolute;
  top: 5rem;
  left: 2rem;
}
.step-bg2 {
  position: absolute;
  top: 5rem;
  right: 2rem;
}
@media screen and (max-width:1240px) {
  .step-bg1,
  .step-bg2 {
    width: 13.5vw;
  }
}
@media screen and (max-width:767px) {
  .step-bg1,
  .step-bg2 {
    width: 17.5vw;
    top: 32vw;
  }
  .step-bg1 {
    left: -1vw;
  }
  .step-bg2 {
    right: 0;
  }
}
.step2-txt {
  display: inline-block;
  text-align: left;
  font-size: 1.7rem;
  margin-top: 4rem;
}
@media screen and (max-width:767px) {
  .step2-txt {
    margin-top: 2vw;
    padding: 0 2vw;
    text-align: center;
  }
}

@media screen and (max-width:1100px) {
  .course-name {
    height: 3.8vw;
  }
  .course-name img {
    height: 100%;
    width: auto;
  }
  .step__icon {
    max-height: initial;
    height: 9.2vw;
  }
  .step__ttl {
    height: 8vw;
  }
  .step__ttl img {
    height: 100%;
    width: auto;
  }
}
@media screen and (max-width:767px) {
  .course-name {
    height: 16vw;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .arrow {
    width: 4.5vw;
    line-height: 1;
    margin: 1rem auto;
  }
  .step__icon {
    top: 2.5vw;
    left: 3vw;
  }
  .step__ttl {
    height: 11vw;
  }
  .step--3 {
    margin-top: 0;
  }
  .step--3__ttl {
    margin-left: 13vw;
  }
}
.border {
  border-right: 2px dashed #C53123;
}
.bg {
  background-color: #FCEAE3;
}
.link-upload {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 54rem;
  max-width: 50vw;
  padding: 1rem;
  border: 2px solid #5F3418;
  border-radius: 1rem;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .link-upload {
    width: 54vw;
    max-width: initial;
    font-size: 3.6vw;
    padding: 1vw 0;
    border-width: 1px;
  }
}



.contain-bg {
  width: 100%;
  /*background-image: url(/sites/default/files/brand/nescafe/fuwalatte-campaign/images/pc/bg.jpg);*/
  background: linear-gradient(#F3D8B7, #F9E1E1);
  background-size: cover;
  background-position: center;
  position: relative;
}
.contain-bg__cloud {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(/sites/default/files/brand/nescafe/fuwalatte-campaign/images/pc/bg_cloud1.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}
@media screen and (max-width:767px) {
  .contain-bg__cloud {
    background-image: url(/sites/default/files/brand/nescafe/fuwalatte-campaign/images/sp/bg_cloud1.png);
  }
}
.contain-bg2 {
  background-image: url(/sites/default/files/brand/nescafe/fuwalatte-campaign/images/pc/bg2.jpg);
  background-repeat: repeat;
}
.contain-bg3 {
  background-color: #F9E1E1;
  background-image: url(/sites/default/files/brand/nescafe/fuwalatte-campaign/images/pc/bg_cloud2.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}
@media screen and (max-width:767px) {
  .contain-bg3 {
    background-image: url(/sites/default/files/brand/nescafe/fuwalatte-campaign/images/sp/bg_cloud2.png);
  }
}
.contain {
  width: 96rem;
  margin: 0 auto;
  position: relative;
}
.contain2 {
  width: 112rem;
  max-width: 100%;
  margin: 0 auto;
  background
}
.keihin {
  display: flex;
}
.main {
  max-width: 1920px;
  margin: 0 auto;
  background: #F9E1E1;
}
.page-top {
  position: fixed;
  left: calc(50% + 575px);
  bottom: 10px;
  z-index: 99;
}
.list-items li {
  text-indent: -1em;
  padding-left: 1em;
}
.list-items span {
  color: #C53123;
}
.footer {
  background: #efefef;
  padding: 3em 1em;
  color: #000;
}
.footer__inquiry {
  text-align: center;
}
.footer__requirement {
  width: 92rem;
  max-width: 100%;
  margin: 2rem auto 0;
}
.footer__requirement__body {
  padding: 1em;
}
.terms {
  width: 92rem;
  margin: 0 auto;
  max-width: 90%;
}
.terms h2 {
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
}
.terms h3 {
  font-size: 2rem;
  text-align: center;
  font-weight: 500;
}
.terms__before {
  color: #666666;
  text-align: center;
  margin-bottom: 1em;
}
.terms__scroll {
  color: #000;
  border: 1px solid #707070;
  overflow-y: scroll;
  padding: 3rem;
  height: 50rem;
}
.terms__scroll__head {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
}
.terms__scroll__body {
  font-weight: 400;
}
.js-btn-scroll {
  opacity: .3;
  pointer-events: none;
}
.js-btn-scroll.is-active {
  opacity: 1;
  pointer-events: initial;
}
.upload__sample-img {
  background: #fff;
  padding: 3rem 0;
}
.upload__sample-img--bad {
  display: none;
}
.upload__sample {
  padding: .5em;
  line-height: 1;
  position: relative;
}
.upload__sample--bad {
  cursor: pointer;
}
.upload__sample--bad:after {
  content: '';
  display: block;
  width: .8rem;
  height: .8rem;
  border-right: 1px solid #5F3418;
  border-top: 1px solid #5F3418;
  rotate: 135deg;
  position: absolute;
  right: calc(50% - .4rem);
  top: 2.8rem;
}
.upload__sample--bad.is-open {
  display: none;
}
.upload__sample--bad.is-open:after {
  rotate: -45deg;
  right: 4rem;
  top: 2rem;
}
.wrapper {
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width:768px) {
  .sp-only {
    display: none;
  }
}
@media (max-width:1309px) {
  .page-top {
    width: 10vw;
    right: 10px;
    left: auto;
  }
}
@media (max-width:767px) {
  .pc-only {
    display: none;
  }
  .contain {
    width: 100%;
  }
  .footer {
    font-size: 2.1rem;
  }
  .keihin {
    margin: 0 auto;
    position: relative;
    max-width: 92vw;
  }
  .terms h2 {
    font-size: 3.1rem;
  }
  .terms h3 {
    font-size: 2.9rem;
  }
  .terms__before {
    font-size: 2.8vw;
  }
  .terms__scroll {
    padding: 3vw;
  }
  .terms__scroll__body {
    font-size: 2.6vw;
  }
  .terms__scroll__head {
    font-size: 3.7vw;
  }
  .upload__sample-img {
    padding: 1em;
  }
  .upload__sample-img p {
    font-size: 1.7rem;
  }
  .wrapper {
    background-image: none;
  }

  .sp-sub-img {
    height: 7.7vw;
    margin: 0 auto;
    padding-top: 1rem;
  }
  .sp-sub-img2 {
    height: 13.5vw;
    margin: 0 auto;
    padding-top: 1rem;
  }
  .sp-sub-img img,
  .sp-sub-img2 img {
    height: 100%;
    width: auto;
  }
  
  .sp-keihin__btn {
    height: 17.4vw;
    text-align: center;
  }
  .sp-keihin__btn img {
    height: 100%;
    width: auto;
  }
  .box {
    margin-left: 8vw;
    margin-right: 8vw;
  }
  .box--brown {
    margin-left: 0;
    margin-right: 0;
  }
  .sp-product-list p {
    font-size: 3vw;
  }
  .sp-product-list p span {
    font-size: .75em;
  }
  .sp-terms-ttl {
    height: 14.5vw;
  }
  .sp-terms-ttl img {
    height: 100%;
    width: auto;
  }
}