@font-face {
  font-family: "noto_sans_jp_bold";
  src: url(/home/brands/nescafe/themes/custom/nestle_japan/fonts/NotoSansJP-Bold.woff2) format("woff2"), url(/home/brands/nescafe/themes/custom/nestle_japan/fonts/NotoSansJP-Bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "noto_sans_jp_regular";
  src: url(/home/brands/nescafe/themes/custom/nestle_japan/fonts/NotoSansJP-Regular.woff2) format("woff2"), url(/home/brands/nescafe/themes/custom/nestle_japan/fonts/NotoSansJP-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@media (min-width: 48rem) {
  #main.container {
    max-width: 100%;
  }
}
@media (min-width: 62rem) {
  #main.container {
    max-width: 100%;
  }
}
@media (min-width: 75rem) {
  #main.container {
    max-width: 100%;
  }
}
@media (min-width: 87.5rem) {
  #main.container {
    max-width: 100%;
  }
}

/***

*/
body {
  padding: 0;
  margin: 0;
}

#sumalatte2025 {
  font-style: normal;
  font-weight: 400;
  line-height: 1.44;
  font-family: "noto_sans_jp_regular", sans-serif;
  color: #000;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  background: url(/home/brands/nescafe/sites/default/files/campaigns/sumalatte2025/images/bg_white.jpg) repeat 0 0;
  background-size: 50% auto;
  /*---------------------------------
  	Background Image
  ---------------------------------*/
  /*---------------------------------
  	Section title & lead
  ---------------------------------*/
  /*---------------------------------
  	KEY VISUAL
  ---------------------------------*/
  /*---------------------------------
  	OUTLINE
  ---------------------------------*/
  /*---------------------------------
  	FLOW
  ---------------------------------*/
  /*---------------------------------
  	UPLOAD
  ---------------------------------*/
  /*---------------------------------
  	TERMS
  ---------------------------------*/
}
@media only screen and (min-width: 1000px) {
  #sumalatte2025 {
    font-size: 1rem;
    background-size: 15% auto;
  }
}
#sumalatte2025 img {
  width: 100%;
  height: auto;
}
#sumalatte2025 .sp {
  display: block;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 .sp {
    display: none;
  }
}
#sumalatte2025 .pc {
  display: none;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 .pc {
    display: block;
  }
}
#sumalatte2025 .sec_inner {
  width: 85%;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 .sec_inner {
    width: 100%;
    max-width: 1096px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 .sec_inner {
    padding-left: 0;
    padding-right: 0;
  }
}
#sumalatte2025 .bold {
  font-weight: 700;
  font-family: "noto_sans_jp_bold", sans-serif;
}
#sumalatte2025 .normal {
  font-weight: 400;
  font-family: "noto_sans_jp_regular", sans-serif;
}
#sumalatte2025 .red {
  color: #ff0000;
}
#sumalatte2025 .under {
  text-decoration: underline;
}
#sumalatte2025 .under:hover {
  text-decoration: none;
}
#sumalatte2025 .bg_white {
  background: url(/home/brands/nescafe/sites/default/files/campaigns/sumalatte2025/images/bg_white.jpg) repeat 0 0;
  background-size: 50% auto;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 .bg_white {
    background-size: 15% auto;
  }
}
#sumalatte2025 .bg_blue {
  background: url(/home/brands/nescafe/sites/default/files/campaigns/sumalatte2025/images/bg_blue.jpg) repeat 0 0;
  background-size: 50% auto;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 .bg_blue {
    background-size: 15% auto;
  }
}
#sumalatte2025 h2 {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: "noto_sans_jp_bold", sans-serif;
  line-height: 1.6;
  margin-bottom: 1.56rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 h2 {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 1.56rem;
    text-align: center;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 h2 {
    font-size: 1.75rem;
  }
}
#sumalatte2025 p {
  font-size: 0.88rem;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 p {
    font-size: 0.88rem;
    line-height: 1.6;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 p {
    font-size: 1rem;
    line-height: 1.8;
  }
}
#sumalatte2025 a:hover {
  opacity: 0.7;
  transition: all 0.3s;
}
#sumalatte2025 h1 {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
#sumalatte2025 #kv {
  position: relative;
  aspect-ratio: 45/96;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #kv {
    aspect-ratio: 288/135;
  }
}
#sumalatte2025 #kv picture {
  position: absolute;
}
#sumalatte2025 #kv .potion {
  opacity: 0;
  transform: translateX(1000px) translateY(-300px) rotate(90deg) scale(0.3);
}
#sumalatte2025 #kv .glass {
  transform: translateY(-40px);
  opacity: 0;
}
#sumalatte2025 #outline {
  padding: 4rem 0;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #outline {
    padding: 5rem 0 4rem;
  }
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 .tbl {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }
}
#sumalatte2025 .tbl dt {
  border: 1px solid #72b0bd;
  background-color: #edf2f4;
  font-size: 1rem;
  color: #72b0bd;
  text-align: center;
  padding: 0.6rem;
  margin-bottom: 0.19rem;
}
#sumalatte2025 .tbl dd {
  border: 1px solid #72b0bd;
  background-color: #fff;
  font-size: 0.88rem;
  line-height: 2.32;
  padding: 0.63rem;
  margin-bottom: 0.56rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 .tbl dt, #sumalatte2025 .tbl dd {
    font-size: 1.13rem;
    line-height: 1.5;
    font-weight: 700;
    font-family: "noto_sans_jp_bold", sans-serif;
    padding: 1.25rem;
    margin-bottom: 0.63rem;
  }
  #sumalatte2025 .tbl dt {
    flex-basis: 30%;
    margin-right: 0.63rem;
  }
  #sumalatte2025 .tbl dd {
    flex-basis: 68.4%;
    padding-left: 3.13rem;
  }
  #sumalatte2025 .tbl dd.npad {
    padding: 0.5rem 3.13rem;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 .tbl dt, #sumalatte2025 .tbl dd {
    font-size: 1.5rem;
  }
  #sumalatte2025 .tbl dd {
    flex-basis: 28.8%;
    border: 1px solid #72b0bd;
  }
  #sumalatte2025 .tbl dd {
    flex-basis: 69%;
  }
}
#sumalatte2025 .tbl .lst_prize {
  text-align: center;
  font-weight: 700;
  font-family: "noto_sans_jp_bold", sans-serif;
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 .tbl .lst_prize {
    display: flex;
    justify-content: space-between;
  }
}
#sumalatte2025 .tbl .lst_prize span {
  display: block;
  font-size: 1.25rem;
  padding: 0.81rem 0.75rem;
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 .tbl .lst_prize span {
    font-size: 1.5rem;
  }
}
#sumalatte2025 .tbl .lst_prize img {
  width: 95%;
}
#sumalatte2025 .tbl .lst_prize li:first-child {
  margin-bottom: 1.25rem;
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 .tbl .lst_prize li:first-child {
    margin-bottom: 0;
  }
}
#sumalatte2025 #flow {
  padding: 4rem 0;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #flow {
    padding: 5rem 0 6.6rem;
  }
}
#sumalatte2025 #flow .tbl {
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #flow .tbl dt, #sumalatte2025 #flow .tbl dd {
    width: 100%;
    font-size: 1.13rem;
    line-height: 1.5;
    font-weight: 700;
    font-family: "noto_sans_jp_bold", sans-serif;
    padding: 1.3rem 3.13rem;
    /*					border: none;	*/
    margin-bottom: 0.63rem;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 #flow .tbl dt, #sumalatte2025 #flow .tbl dd {
    font-size: 1.5rem;
  }
}
#sumalatte2025 #flow .tbl dd {
  position: relative;
  border: 1px solid #72b0bd;
  /*				border: none;	*/
  line-height: 2.32;
  margin-bottom: 3rem;
  font-weight: 700;
  font-family: "noto_sans_jp_bold", sans-serif;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #flow .tbl dd {
    padding: 1.3rem 3.13rem 1.88rem;
    margin-bottom: 6rem;
  }
}
#sumalatte2025 #flow .tbl dd p {
  line-height: 2.32;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #flow .tbl dd p {
    font-size: 1.13rem;
    line-height: 1.5;
  }
  #sumalatte2025 #flow .tbl dd p.red.normal {
    font-size: 0.88rem;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 #flow .tbl dd p {
    font-size: 1.5rem;
  }
  #sumalatte2025 #flow .tbl dd p.red.normal {
    font-size: 1rem;
  }
}
#sumalatte2025 #flow .tbl dd picture {
  display: block;
  margin: 1rem 0;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #flow .tbl dd picture {
    margin: 2.75rem 0;
  }
}
#sumalatte2025 #flow .tbl dd .box {
  border: 1px solid #0e2984;
  font-size: 0.78rem;
  padding: 0.63rem;
  margin-top: 0.5rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #flow .tbl dd .box {
    font-size: 1.13rem;
    padding: 1.1rem 1.25rem;
    margin-top: 2.75rem;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 #flow .tbl dd .box {
    font-size: 1.5rem;
  }
}
#sumalatte2025 #flow .tbl dd::after {
  content: "";
  position: absolute;
  bottom: -2.5rem;
  right: 0;
  left: 0;
  margin: auto;
  display: block;
  padding-top: 0.1rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #edf2f4 transparent transparent transparent;
  border-width: 28px 78.5px 0px 78.5px;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #flow .tbl dd::after {
    bottom: -4.5rem;
    border-width: 47px 148px 0px 148px;
  }
}
#sumalatte2025 #flow .tbl dd.nbg {
  margin-bottom: 0;
}
#sumalatte2025 #flow .tbl dd.nbg::after {
  content: none;
}
#sumalatte2025 #flow .link_btn {
  display: block;
  padding: 0.2rem 0.5rem;
  border: 1px solid #000;
  border-radius: 0 0 8px 0;
  line-height: 1.7;
  margin-top: 1rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #flow .link_btn {
    padding: 0.56rem 0.5rem;
    font-size: 0.88rem;
    text-align: center;
    margin: 2rem auto 0;
    width: 36rem;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 #flow .link_btn {
    font-size: 1rem;
    width: 41.68rem;
  }
}
#sumalatte2025 #upload {
  padding: 4rem 0;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload {
    padding: 5rem 0;
  }
}
#sumalatte2025 #upload .content {
  background-color: #fff;
  border: 1px solid #72b0bd;
  padding: 0.63rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload .content {
    padding: 3.13rem 3.13rem;
  }
}
#sumalatte2025 #upload .content p.red {
  line-height: 2.32;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload .content p.red {
    font-size: 1.13rem;
    line-height: 1.5;
    font-weight: 700;
    font-family: "noto_sans_jp_bold", sans-serif;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 #upload .content p.red {
    font-size: 1.5rem;
  }
}
#sumalatte2025 #upload .content p.bold {
  line-height: 2.32;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload .content p.bold {
    font-size: 1.75rem;
  }
}
#sumalatte2025 #upload .content picture {
  display: block;
  margin: 0.94rem 0;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload .content picture {
    margin: 1.88rem 0;
  }
}
#sumalatte2025 #upload .content p.remarks {
  color: #ff0000;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload .content p.remarks {
    font-size: 0.88rem;
    font-weight: 700;
    font-family: "noto_sans_jp_bold", sans-serif;
    text-align: center;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 #upload .content p.remarks {
    font-size: 1.13rem;
  }
}
#sumalatte2025 #upload .content h3 {
  font-weight: 700;
  font-family: "noto_sans_jp_bold", sans-serif;
  font-size: 1rem;
  text-align: center;
  border: 1px solid #0e2984;
  padding: 0.5rem;
  margin: 2rem 0 1.63rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload .content h3 {
    font-size: 1.13rem;
    padding: 1.2rem;
    margin: 5.63rem 0 1.88srem;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 #upload .content h3 {
    font-size: 1.5rem;
  }
}
#sumalatte2025 #upload .content h3.good_ex {
  margin: 2.63rem 0 1.31rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload .content h3.good_ex {
    margin: 1.88rem 0 0;
  }
}
#sumalatte2025 #upload .content h3.bad_ex {
  margin: 2rem 0 1.31rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload .content h3.bad_ex {
    margin: 5.63rem 0 0;
  }
}
#sumalatte2025 #upload .content p.not_app {
  line-height: 2.32;
  font-weight: 700;
  font-family: "noto_sans_jp_bold", sans-serif;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #upload .content p.not_app {
    font-size: 1.13rem;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 #upload .content p.not_app {
    font-size: 1.5rem;
  }
}
#sumalatte2025 #terms {
  padding: 4rem 0 2rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #terms {
    padding: 5rem 0 6.75rem;
  }
}
#sumalatte2025 #terms p.lead {
  line-height: 2.32;
  margin-bottom: 1.56rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #terms p.lead {
    text-align: center;
  }
}
#sumalatte2025 #terms .scroll_box {
  background-color: #edf2f4;
  overflow-y: scroll;
  height: 31rem;
  padding: 1rem 0.63rem 2.31rem;
  line-height: 2.32;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #terms .scroll_box {
    padding: 2.5rem 3.13rem;
    height: 428px;
  }
}
#sumalatte2025 #terms .scroll_box p {
  line-height: 2.32;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #terms .scroll_box p {
    line-height: 1.5;
  }
}
#sumalatte2025 #terms .scroll_box p .instruction {
  font-weight: 700;
  font-family: "noto_sans_jp_bold", sans-serif;
  display: block;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #terms .scroll_box p .instruction {
    font-size: 1.5rem;
    text-align: center;
  }
}
#sumalatte2025 #terms .scroll_box dt {
  font-weight: normal;
  margin-top: 2rem;
}
#sumalatte2025 #terms .scroll_box dd {
  line-height: 1.6;
}
#sumalatte2025 #terms .scroll_box .indent {
  margin-left: 1em;
}
#sumalatte2025 #terms .scroll_box .indent2 {
  margin-left: 2em;
}
#sumalatte2025 #terms .btn_entry button {
  display: block;
  background-color: #ab2828;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  font-family: "noto_sans_jp_bold", sans-serif;
  text-align: center;
  padding: 0.8rem 0.3rem;
  width: 100%;
  border-radius: 0 0 6px 0;
  margin-top: 1.56rem;
}
#sumalatte2025 #terms .btn_entry button:disabled {
  background-color: #bdbdbd;
  color: #dfdfdf;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #terms .btn_entry button {
    width: 22rem;
    font-size: 1.25rem;
    padding: 1.25rem 0;
    margin: 5rem auto 0;
  }
}
@media only screen and (min-width: 1096px) {
  #sumalatte2025 #terms .btn_entry button {
    width: 26.9rem;
    font-size: 1.5rem;
  }
}
#sumalatte2025 #terms .caution_digitalgift {
  font-weight: 900;
  line-height: 2.32;
  margin-top: 8rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #terms .caution_digitalgift {
    line-height: 1.6;
    padding: 0 3.13rem;
    margin-top: 12.5rem;
  }
}
#sumalatte2025 #terms .notes {
  line-height: 2.32;
  margin-top: 1.8rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #terms .notes {
    line-height: 1.6;
    padding: 0 3.13rem;
    margin-top: 1.6rem;
  }
}
#sumalatte2025 #terms .notes dt {
  font-weight: normal;
}
#sumalatte2025 #terms .notes dd {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  #sumalatte2025 #terms .notes dd {
    margin-bottom: 1.8rem;
  }
}/*# sourceMappingURL=style.css.map */