@charset "UTF-8";
/*------------------------------------------------
reset
------------------------------------------------*/
#suntory_contents h1, #suntory_contents h2, #suntory_contents h3, #suntory_contents h4, #suntory_contents h5, #suntory_contents h6, #suntory_contents p, #suntory_contents blockquote, #suntory_contents pre, #suntory_contents a, #suntory_contents abbr, #suntory_contents acronym, #suntory_contents address, #suntory_contents big, #suntory_contents cite, #suntory_contents code, #suntory_contents del, #suntory_contents dfn, #suntory_contents em, #suntory_contents img, #suntory_contents ins, #suntory_contents kbd, #suntory_contents q, #suntory_contents s, #suntory_contents samp, #suntory_contents small, #suntory_contents strike, #suntory_contents strong, #suntory_contents sub, #suntory_contents tt, #suntory_contents var, #suntory_contents b, #suntory_contents u, #suntory_contents i, #suntory_contents center, #suntory_contents dl, #suntory_contents dt, #suntory_contents dd, #suntory_contents ol, #suntory_contents ul, #suntory_contents li, #suntory_contents fieldset, #suntory_contents form, #suntory_contents label, #suntory_contents legend, #suntory_contents table, #suntory_contents caption, #suntory_contents tbody, #suntory_contents tfoot, #suntory_contents thead, #suntory_contents tr, #suntory_contents th, #suntory_contents td, #suntory_contents article, #suntory_contents aside, #suntory_contents canvas, #suntory_contents details, #suntory_contents embed, #suntory_contents figure, #suntory_contents figcaption, #suntory_contents footer, #suntory_contents header, #suntory_contents hgroup, #suntory_contents menu, #suntory_contents nav, #suntory_contents output, #suntory_contents ruby, #suntory_contents section, #suntory_contents summary, #suntory_contents time, #suntory_contents mark, #suntory_contents audio, #suntory_contents video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

#suntory_contents br {
  letter-spacing: 0;
}

#suntory_contents table {
  border-collapse: collapse;
  border-spacing: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

/*------------------------------------------------
common
------------------------------------------------*/
#suntory_contents {
  font-size: 16px;
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

#suntory_contents .sp_disp {
  display: none !important;
}

@media screen and (max-width: 768px) {
  #suntory_contents .pc_disp {
    display: none !important;
  }
  #suntory_contents .sp_disp {
    display: block !important;
  }
  #suntory_contents img.sp_disp {
    display: inline-block !important;
  }
  #suntory_contents br.sp_disp {
    display: inline !important;
  }
  #suntory_contents h2, #suntory_contents h3, #suntory_contents h4,
  #suntory_contents div, #suntory_contents p, #suntory_contents li, #suntory_contents span, #suntory_contents a,
  #suntory_contents th, #suntory_contents td {
    max-height: 100%;
  }
}

_:lang(x)::-ms-backdrop, #suntory_contents {
  font-feature-settings: "pkna";
}

/* ------------------------------------------------
 contents
------------------------------------------------ */
#suntory_contents > header, #suntory_contents > .section {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  min-width: 960px;
}

#suntory_contents a {
  color: #e62e8b;
}

#suntory_contents a:hover {
  text-decoration: none;
}

#suntory_contents img {
  vertical-align: top;
}

#suntory_contents .btn {
  line-height: 1;
  border-radius: 10px;
  background-color: #fff;
  -webkit-box-shadow: 0 6px 0 0 #bebebe;
  box-shadow: 0 6px 0 0 #bebebe;
  padding: 20px 56px;
  display: inline-block;
  position: relative;
}

#suntory_contents .btn::before {
  content: "";
  border-radius: 8px;
  border: 2px solid #e62e8b;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  left: 3px;
  top: 3px;
}

#suntory_contents .btn:hover {
  -webkit-transform: translateY(2px);
  -ms-transform: translateY(2px);
  transform: translateY(2px);
  -webkit-box-shadow: 0 4px 0 0 #bebebe;
  box-shadow: 0 4px 0 0 #bebebe;
}

#suntory_contents .btn.download {
  background-color: #e62e8b;
  -webkit-box-shadow: 0 6px 0 0 #a32b68;
  box-shadow: 0 6px 0 0 #a32b68;
}

#suntory_contents .btn.download::before {
  content: "";
  border-color: #ebebeb;
}

#suntory_contents .btn.download:hover {
  -webkit-box-shadow: 0 4px 0 0 #a32b68;
  box-shadow: 0 4px 0 0 #a32b68;
}

@media screen and (max-width: 768px) {
  #suntory_contents > header, #suntory_contents > .section {
    max-width: 100%;
    min-width: 100%;
  }
  #suntory_contents .btn {
    -webkit-box-shadow: 0 5px 0 0 #bebebe;
    box-shadow: 0 5px 0 0 #bebebe;
    padding: 15px 0;
  }
  #suntory_contents .btn.download {
    -webkit-box-shadow: 0 5px 0 0 #a32b68;
    box-shadow: 0 5px 0 0 #a32b68;
  }
}

/* ------------------------------------------------
 MV
------------------------------------------------ */
#suntory_contents #header {
  text-align: center;
}

#suntory_contents #header .mv {
  width: 100%;
  position: relative;
  overflow: hidden;
}

#suntory_contents #header .mv .img {
  margin-left: -600px;
  width: 1200px;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
}

#suntory_contents #header .mv img {
  vertical-align: top;
}

#suntory_contents #header .date {
  border: solid #f082b9;
  border-width: 2px 0;
  background: #e62e8b url(../img/mv_date.png) 50% 50% no-repeat;
  height: 78px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#suntory_contents #header .message.end {
  background-color: #ffe100;
  padding: 17px 0 15px;
}

#suntory_contents #header .message.end p {
  background: url(../img/message_end.png) no-repeat;
  margin: 0 auto;
  width: 571px;
  height: 54px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  #suntory_contents #header .mv {
    height: auto !important;
  }
  #suntory_contents #header .mv .img {
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 0;
    width: 100%;
    height: 0;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: static;
  }
  #suntory_contents #header .date {
    border-width: 0;
    background-color: transparent;
    background-image: url(../img/sp/mv_date.png);
    background-size: 100% auto;
    padding-top: 19.06667%;
    width: 100%;
    height: 0 !important;
    position: relative;
  }
  #suntory_contents #header .message.end {
    padding: 0;
  }
  #suntory_contents #header .message.end p {
    background-image: url(../img/sp/message_end.png);
    background-size: contain;
    padding-top: 18.66667%;
    width: 100%;
    height: 0;
  }
}

/* ------------------------------------------------
 MV
------------------------------------------------ */
#suntory_contents #header .mv {
  height: 350px;
}

#suntory_contents #header nav {
  text-align: center;
  letter-spacing: -.4em;
  padding-top: 25px;
  height: 115px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#suntory_contents #header nav a {
  color: #e62e8b;
  line-height: 1;
  text-decoration: none;
  border-radius: 50px;
  background-color: #fff;
  padding: 13px 30px 13px 40px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  -webkit-box-shadow: 2px 3px 0 0 rgba(177, 177, 177, 0.7);
  box-shadow: 2px 3px 0 0 rgba(177, 177, 177, 0.7);
}

#suntory_contents #header nav a + a {
  margin-left: 45px;
}

#suntory_contents #header nav a .txt {
  font-size: 23px;
  font-weight: bold;
  letter-spacing: .05em;
  display: inline-block;
  vertical-align: middle;
}

#suntory_contents #header nav a::before {
  content: "";
  background-size: contain;
  margin-top: -11px;
  padding-top: 66px;
  width: 43px;
  display: inline-block;
  position: absolute;
  left: -16px;
  top: 0;
  background-repeat: no-repeat;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#suntory_contents #header nav a::after {
  content: "";
  background: url(../img/icon_arrow_r.svg) no-repeat;
  background-size: contain;
  margin-left: 10px;
  width: 13px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

#suntory_contents #header nav a:hover::before {
  -webkit-animation: bounce .6s linear;
  animation: bounce .6s linear;
}

#suntory_contents #header nav a.doraemon::before {
  background-image: url(../img/nav_doraemon.png);
}

#suntory_contents #header nav a.dorami::before {
  background-image: url(../img/nav_dorami.png);
}

@media screen and (max-width: 768px) {
  #suntory_contents #header .mv .img {
    background-image: url(../img/sp/mv.png);
    padding-top: 90%;
  }
  #suntory_contents #header nav {
    text-align: center;
    letter-spacing: -.4em;
    padding-top: 2.66667%;
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #suntory_contents #header nav a {
    padding: 9px 20px 9px 30px;
    -webkit-box-shadow: 2px 3px 0 0 rgba(177, 177, 177, 0.7);
    box-shadow: 2px 3px 0 0 rgba(177, 177, 177, 0.7);
  }
  #suntory_contents #header nav a + a {
    margin-left: 7.2%;
  }
  #suntory_contents #header nav a .txt {
    font-size: 15px;
  }
  #suntory_contents #header nav a::before {
    margin-top: -7px;
    padding-top: 49px;
    width: 29px;
    left: -7px;
  }
  #suntory_contents #header nav a::after {
    margin-left: 9px;
    width: 9px;
    height: 12px;
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  33.33333% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  66.66667% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  33.33333% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  66.66667% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

_:lang(x)::-ms-backdrop, #suntory_contents #header nav .btn {
  padding-top: 15px;
  padding-bottom: 11px;
}

_:lang(x)::-ms-backdrop, #suntory_contents #header nav .btn::after {
  vertical-align: top;
}

/* ------------------------------------------------
 c1 商品紹介
------------------------------------------------ */
#suntory_contents #c1 {
  background: url(../img/c1_bg.jpg) 50% 0 no-repeat;
  margin-top: -115px;
  padding-top: 115px;
  padding-bottom: 250px;
}

#suntory_contents #c1 > header .title {
  background-image: url(../img/c1_title.png);
  padding-top: 172px;
  margin: 0 auto;
  width: 908px;
  background-repeat: no-repeat;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#suntory_contents #c1 > .body {
  margin-top: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#suntory_contents #c1 > .body p {
  display: inline-block;
  vertical-align: top;
  background-repeat: no-repeat;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#suntory_contents #c1 > .body p + p {
  margin-left: 10px;
}

#suntory_contents #c1 > .body p.present1 {
  background-image: url(../img/c1_present1.png);
  padding-top: 640px;
  width: 451px;
}

#suntory_contents #c1 > .body p.present2 {
  background-image: url(../img/c1_present2.png);
  padding-top: 643px;
  width: 457px;
}

@media screen and (max-width: 768px) {
  #suntory_contents #c1 {
    background-image: url(../img/sp/c1_bg.jpg);
    background-size: 100% auto;
    margin-top: -16%;
    padding-top: 21.73333%;
    padding-bottom: 37.06667%;
  }
  #suntory_contents #c1 > header .title {
    background-image: url(../img/sp/c1_title.png);
    background-size: contain;
    padding-top: 22.26667%;
    width: 100%;
  }
  #suntory_contents #c1 > .body {
    margin-top: 0;
    display: block;
  }
  #suntory_contents #c1 > .body p {
    background-size: contain;
    width: 100% !important;
  }
  #suntory_contents #c1 > .body p + p {
    margin-left: 0;
    margin-top: 3.33333%;
  }
  #suntory_contents #c1 > .body p.present1 {
    background-image: url(../img/sp/c1_present1.png);
    padding-top: 64.93333%;
  }
  #suntory_contents #c1 > .body p.present2 {
    background-image: url(../img/sp/c1_present2.png);
    padding-top: 58.13333%;
  }
}

/* ------------------------------------------------
 c2 応募方法
------------------------------------------------ */
#suntory_contents #c2 {
  margin-top: -170px;
}

#suntory_contents #c2 > header {
  background: transparent url(../img/c2_bg.png) 50% 0 no-repeat;
  padding-top: 146px;
  min-height: 280px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#suntory_contents #c2 > header .title {
  background-image: url(../img/c2_title.png);
  padding-top: 122px;
  margin: 0 auto;
  width: 575px;
  background-repeat: no-repeat;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  right: 20px;
}

#suntory_contents #c2 > .body {
  background-color: #fedd78;
  padding-top: 7px;
  padding-bottom: 100px;
}

#suntory_contents #c2 > .body .table {
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto;
  padding: 15px;
  width: 920px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#suntory_contents #c2 > .body .table header .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#suntory_contents #c2 > .body .table header .title > * {
  border-radius: 7px;
}

#suntory_contents #c2 > .body .table header .title .num {
  background-color: #bae3f9;
  margin-right: 4px;
}

#suntory_contents #c2 > .body .table header .title .num img {
  vertical-align: top;
}

#suntory_contents #c2 > .body .table header .title .txt {
  color: #fff;
  font-size: 34px;
  background-color: #33b3ed;
  padding-top: .2em;
  padding-left: 30px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

#suntory_contents #c2 > .body .table header .title .txt::after {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

#suntory_contents #c2 > .body .table .body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#suntory_contents #c2 > .body #howto1 .body {
  padding: 20px 20px 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#suntory_contents #c2 > .body #howto1 .body .txt {
  font-size: 20px;
  width: 400px;
}

#suntory_contents #c2 > .body #howto1 .body .txt .note {
  font-size: 16px;
}

#suntory_contents #c2 > .body #howto1 .body .txt p + p {
  margin-top: .5em;
}

#suntory_contents #c2 > .body #howto1 .body .img {
  text-align: center;
}

#suntory_contents #c2 > .body #howto2 {
  margin-top: 30px;
}

#suntory_contents #c2 > .body #howto2 .body {
  background: url(../img/c2_border.png) 50% 277px no-repeat;
}

#suntory_contents #c2 > .body #howto2 .body > div {
  padding: 25px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#suntory_contents #c2 > .body #howto2 .body .presents {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#suntory_contents #c2 > .body #howto2 .body .presents .present2 {
  margin-top: 7px;
}

#suntory_contents #c2 > .body #howto2 .body .hagaki {
  padding-top: 40px;
  width: 50%;
}

#suntory_contents #c2 > .body #howto2 .body .hagaki .heading {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.1;
}

#suntory_contents #c2 > .body #howto2 .body .hagaki .heading b {
  font-size: 127%;
}

#suntory_contents #c2 > .body #howto2 .body .hagaki.download {
  text-align: center;
}

#suntory_contents #c2 > .body #howto2 .body .hagaki.download .link {
  margin-top: 30px;
}

#suntory_contents #c2 > .body #howto2 .body .hagaki.address {
  padding-left: 80px;
}

#suntory_contents #c2 > .body #howto2 .body .hagaki.address .address {
  line-height: 1.5;
  margin-top: 25px;
}

#suntory_contents #c2 > .body aside {
  text-align: center;
}

#suntory_contents #c2 > .body aside .note {
  font-weight: bold;
  margin-top: 1em;
}

#suntory_contents #c2 > .body aside .link {
  margin-top: 45px;
}

#suntory_contents #c2 > .body aside .link .btn {
  padding: 25px 50px;
}

@media screen and (max-width: 768px) {
  #suntory_contents #c2 {
    margin-top: -40%;
  }
  #suntory_contents #c2 > header {
    background-image: url(../img/sp/c2_bg.png);
    background-size: contain;
    padding-top: 37.06667%;
    min-height: 100%;
    position: relative;
  }
  #suntory_contents #c2 > header .title {
    background-image: url(../img/sp/c2_title.png);
    background-size: contain;
    margin-top: 18.66667%;
    padding-top: 17.33333%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
  }
  #suntory_contents #c2 > .body {
    padding-top: 0;
    padding-bottom: 12%;
  }
  #suntory_contents #c2 > .body .table {
    padding: 2.66667%;
    width: 94.66667%;
  }
  #suntory_contents #c2 > .body .table header .title > * {
    border-radius: 5px;
  }
  #suntory_contents #c2 > .body .table header .title .num {
    margin-right: 0.74627%;
    width: 17.46269%;
  }
  #suntory_contents #c2 > .body .table header .title .num img {
    width: 100%;
    height: auto;
  }
  #suntory_contents #c2 > .body .table header .title .txt {
    font-size: 19px;
    line-height: 1.2;
    padding: .2em .75em 0;
  }
  #suntory_contents #c2 > .body .table header .title .txt .line {
    display: inline-block;
    vertical-align: middle;
  }
  #suntory_contents #c2 > .body #howto1 .body {
    padding: 4.47761% 2.23881% 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  #suntory_contents #c2 > .body #howto1 .body .txt {
    font-size: 14px;
    width: auto;
  }
  #suntory_contents #c2 > .body #howto1 .body .txt .note {
    font-size: 10px;
  }
  #suntory_contents #c2 > .body #howto1 .body .img {
    margin-top: 1em;
    text-align: center;
  }
  #suntory_contents #c2 > .body #howto1 .body .img img {
    width: 70.9375%;
  }
  #suntory_contents #c2 > .body #howto2 {
    margin-top: 6.86567%;
  }
  #suntory_contents #c2 > .body #howto2 .body {
    background-image: none;
    display: block;
  }
  #suntory_contents #c2 > .body #howto2 .body > div {
    padding: 2.98507%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #suntory_contents #c2 > .body #howto2 .body .presents {
    padding-bottom: 0;
    display: block;
  }
  #suntory_contents #c2 > .body #howto2 .body .presents p {
    width: 100%;
  }
  #suntory_contents #c2 > .body #howto2 .body .presents p img {
    width: 100%;
    height: auto;
  }
  #suntory_contents #c2 > .body #howto2 .body .presents .present1::after {
    content: "";
    background: url(../img/sp/c2_border.svg) repeat-x;
    background-size: auto 100%;
    margin: 4.7619% 0;
    padding-top: 0.95238%;
    width: 100%;
    height: 0;
    display: block;
  }
  #suntory_contents #c2 > .body #howto2 .body .presents .present2 {
    margin-top: 0;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki {
    padding-top: 0;
    width: 100%;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki .heading {
    font-size: 16px;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki.download {
    padding-bottom: 0;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki.download .link {
    margin-top: 4.7619%;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki.download .link .btn {
    width: 96.8254%;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki.download .link .btn img {
    width: 59.83607%;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki.download::after {
    content: "";
    background: url(../img/sp/c2_border.svg) repeat-x;
    background-size: auto 100%;
    margin: 9.52381% 0 7.93651%;
    padding-top: 0.95238%;
    width: 100%;
    height: 0;
    display: block;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki.address {
    padding-left: 0;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki.address .heading {
    text-align: center;
  }
  #suntory_contents #c2 > .body #howto2 .body .hagaki.address .address {
    font-size: 14px;
    margin: 3.96825% auto 0;
    display: table;
  }
  #suntory_contents #c2 > .body #howto2 .body .separator {
    background-color: #fedd78;
    margin: 0 -2.98507%;
    padding: 0;
  }
  #suntory_contents #c2 > .body #howto2 .body .separator hr {
    display: none;
  }
  #suntory_contents #c2 > .body #howto2 .body .separator::before, #suntory_contents #c2 > .body #howto2 .body .separator::after {
    content: "";
    background-color: #fff;
    padding-top: 8.4507%;
    width: 100%;
    height: 0;
    display: block;
  }
  #suntory_contents #c2 > .body #howto2 .body .separator::before {
    border-radius: 0 0 10px 10px;
  }
  #suntory_contents #c2 > .body #howto2 .body .separator::after {
    border-radius: 10px 10px 0 0;
    margin-top: 10px;
  }
  #suntory_contents #c2 > .body aside .note {
    font-size: 12px;
  }
  #suntory_contents #c2 > .body aside .link {
    margin-top: 5.33333%;
  }
  #suntory_contents #c2 > .body aside .link .btn {
    padding: 18px 0;
    width: 77.33333%;
  }
  #suntory_contents #c2 > .body aside .link .btn img {
    width: 60.34483%;
  }
}