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

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif;
}

#wrapper {
  position: relative;
  padding: 10px;
}
#wrapper:before {
  display: block;
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url(../images/bg01.png) right bottom no-repeat;
  border: 10px solid #2d1f87;
  box-sizing: border-box;
  pointer-events: none;
  content: "";
}
#wrapper:after {
  display: block;
  position: fixed;
  z-index: 40;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: 10px solid #2d1f87;
  box-sizing: border-box;
  pointer-events: none;
  content: "";
}

a {
  color: #2d1f87;
}

img {
  vertical-align: top;
}

header {
  position: relative;
  position: fixed;
  z-index: 5;
  top: 10px;
  left: 50%;
  margin-left: -570px;
  padding: 30px 0px;
  max-width: 1140px;
  width: 1140px;
  background-color: #fff;
  text-align: center;
}
header .header__logo {
  display: inline-block;
}
header .header__navi {
  display: block;
  position: absolute;
  top: 45px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: #2d1f87;
  border-radius: 10px;
}
header .header__navi-button {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -8px;
  width: 16px;
  height: 11px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
}
header .header__navi-button:before {
  position: absolute;
  top: 4px;
  left: 0px;
  width: 100%;
  height: 1px;
  background-color: #fff;
  content: "";
}
header .header__sns {
  position: absolute;
  top: 45px;
  left: 15px;
}
header .header__sns-link {
  display: inline-block;
  margin-right: 15px;
  width: 30px;
  height: 30px;
  background: url(../images/icon_sns01.png) left 50%/auto 30px no-repeat;
  vertical-align: top;
}
header .header__sns-link[data-type="line"] {
  background-position: -45px 50%;
}
header .header__sns-link[data-type="facebook"] {
  background-position: -90px 50%;
}

main {
  position: relative;
  z-index: 2;
  margin: 117px auto 0;
  padding: 0px 15px;
  width: 1140px;
  box-sizing: border-box;
}

.button-index {
  display: block;
  position: relative;
  margin: 0px auto 40px;
  width: 256px;
  background-color: #2d1f87;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
}
.button-index:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -5px;
  width: 9px;
  height: 9px;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: rotate(45deg);
  content: "";
}
.button-index:hover {
  opacity: 0.8;
}

.button-inactive {
  pointer-events: none;
}

footer {
  position: relative;
  z-index: 2;
  padding-bottom: 90px;
  text-align: center;
}
footer .footer__navi {
  font-size: 14px;
}
footer .footer__navi-link {
  display: inline-block;
  padding: 0px 1em;
  border-right: 1px solid #97a8d5;
  text-decoration: none;
}
footer .footer__navi-link:last-child {
  border-right: 0px;
}
footer .footer__copyright {
  margin-top: 30px;
  color: #97a8d5;
  font-size: 10px;
}
footer .footer__anchor {
  display: block;
  position: absolute;
  bottom: 70px;
  right: 50%;
  margin-right: -555px;
  width: 40px;
  height: 40px;
  background-color: #97a8d5;
  border-radius: 10px;
}
footer .footer__anchor:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -2px;
  margin-left: -5px;
  width: 9px;
  height: 9px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: rotate(45deg);
  content: "";
}

.modal {
  display: block;
  position: fixed;
  z-index: 50;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url(../images/bg02.png) right bottom/252px 200px no-repeat #2d1f87;
  border: 10px solid #fff;
  box-sizing: border-box;
  transition: opacity 300ms ease;
}
.modal.show {
  opacity: 1;
  pointer-events: auto;
}
.modal .modal-inner {
  position: absolute;
  overflow: hidden;
  top: 10px;
  left: 50%;
  margin-left: -480px;
  height: calc(100% - 20px);
  width: 960px;
}
.modal .modal-scroller {
  position: absolute;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  top: 50%;
  left: 0%;
  width: calc(100% + 30px);
  max-height: calc(100% - 20px);
  transform: translate3d(0%, -50%, 0);
}
.modal .close-button {
  position: absolute;
  top: 45px;
  right: 50%;
  margin-right: -555px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;
}
@media (max-width: 1150px) {
  .modal .close-button {
    right: 20px;
    margin-right: 0px;
  }
}
.modal .close-button:before, .modal .close-button:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 30%;
  width: 40%;
  height: 1px;
  background-color: #2d1f87;
  content: "";
  transform: rotate(45deg);
}
.modal .close-button:after {
  transform: rotate(-45deg);
}

#navi {
  text-align: center;
}
#navi .navi__link {
  display: block;
  margin-bottom: 50px;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}
#navi .navi__link:last-child {
  margin-bottom: 0px;
}

.carousel {
  position: relative;
  width: 100%;
}
.carousel.noloop.first .carousel-arrow.prev, .carousel.noloop.last .carousel-arrow.next {
  opacity: 0.5;
  pointer-events: none;
}
.carousel .carousel-screen {
  position: relative;
  overflow: hidden;
  height: 600px;
}
.carousel .carousel-screen .carousel-panels {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 50%;
  margin-left: -400px;
  transition: transform 500ms ease;
}
.carousel .carousel-screen .carousel-panels > li {
  position: absolute;
  width: 800px;
  height: 600px;
}
.carousel .carousel-arrow {
  display: block;
  position: absolute;
  z-index: 5;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  background-color: #97a8d5;
  border-radius: 6px;
  cursor: pointer;
}
.carousel .carousel-arrow:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -5px;
  margin-right: -5px;
  width: 9px;
  height: 9px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  content: "";
}
.carousel .carousel-arrow.prev {
  left: -18px;
}
.carousel .carousel-arrow.prev:after {
  transform: rotate(-135deg);
}
.carousel .carousel-arrow.next {
  right: -18px;
}
.carousel .carousel-pager {
  display: flex;
  display: none;
  justify-content: center;
}
.carousel .carousel-pager > li {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.carousel .carousel-pager > li:after {
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  content: "";
}
.carousel .carousel-pager > li.current {
  cursor: default;
}
.carousel .carousel-pager > li.current:after {
  background-color: #000;
}

/**
 * キービジュアルの高さ
 */
.index {
  padding-top: 10px;
  /**
   * キービジュアル
   * プレローンチ
   */
  /**
   * キービジュアル
   * ローンチ後
   */
  /**
   * ライブ配信
   */
  /**
   * シズル画像
   */
  /**
   * 開発者物語
   */
  /**
   * 動画リスト
   * SPECIAL MOVIE
   */
  /**
   * 発売告知
   */
  /**
   * LINEUP
   */
  /**
   * クラフティー
   */
  /**
   * 公式アカウント
   */
 /**
* banner
*/
}
.index__visual {
  position: relative;
  z-index: 2;
  margin-bottom: 140px;
  padding-bottom: 60px;
  box-sizing: border-box;
  text-align: center;
}
@media (max-height: 730px) {
  .index__visual {
    padding-bottom: calc((100vh - 172px) * 60 / 558);
    height: calc(100vh - 172px);
  }
}
@media (max-height: 500px) {
  .index__visual {
    padding-bottom: 35px;
    height: 328px;
  }
}
.index__visual-title {
  position: absolute;
  z-index: 2;
  top: 45px;
  left: 50%;
  margin-left: -220px;
  width: 440px;
  color: #2d1f87;
  font-size: 36px;
  font-weight: 800;
}
.index__visual-title small {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
}
@media (max-height: 730px) {
  .index__visual-title {
    top: 14%;
    font-size: 4.1vh;
    transform: translate(0%, -50%);
  }
  .index__visual-title small {
    margin-bottom: 0.75em;
    font-size: 60%;
  }
}
@media (max-height: 500px) {
  .index__visual-title {
    font-size: 20px;
  }
}
.index__visual-movie {
  display: block;
  position: relative;
  overflow: hidden;
  height: 380px;
  max-height: 380px;
  min-height: 180px;
  background: url(../images/keyvisual_image01.jpg) center 80%/auto 100% no-repeat;
  border-radius: 38px;
}
@media screen and (min-resolution: 2dppx) {
  .index__visual-movie {
    background-image: url(../images/keyvisual_image01@2x.jpg);
  }
}
@media (max-height: 730px) {
  .index__visual-movie {
    height: 76%;
  }
}
.index__visual-movie:hover:before {
  opacity: 0.7;
}
.index__visual-movie:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
  content: "";
}
.index__visual-movie:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -3px;
  border-left: 10px solid #dbe0dc;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  content: "";
}
.index__visual-subtitle {
  position: relative;
  z-index: 2;
  margin-top: -48px;
}
@media (max-height: 730px) {
  .index__visual-subtitle {
    margin-top: calc(-48 * (100vh - 172px) / 558);
  }
  .index__visual-subtitle img {
    width: auto;
    height: calc(166 * (100vh - 172px) / 558);
  }
}
@media (max-height: 500px) {
  .index__visual-subtitle {
    margin-top: -28px;
  }
  .index__visual-subtitle img {
    height: 98px;
  }
}
.index__visual-banner {
  display: inline-block;
  position: absolute;
  z-index: 3;
  bottom: 38px;
  left: 0px;
}
@media (max-height: 730px) {
  .index__visual-banner {
    bottom: 6.8%;
    left: 50%;
    margin-left: calc(-555 * (100vh - 172px) / 558);
    height: 23.3%;
  }
  .index__visual-banner img {
    width: auto;
    height: 100%;
  }
}
@media (max-height: 500px) {
  .index__visual-banner {
    margin-left: -326px;
  }
}
.index__visual-product {
  display: block;
  position: absolute;
  bottom: 0px;
  right: 30px;
}
.index__visual-product.is-new:after {
  display: block;
  position: absolute;
  z-index: 1;
  top: 28px;
  left: -44px;
  width: 76px;
  height: 76px;
  background: url(../images/icon_new01.png) center 50%/100% no-repeat;
  content: "";
}
.index__visual-product.is-popular:after {
  display: block;
  position: absolute;
  z-index: 1;
  top: 28px;
  left: -44px;
  width: 76px;
  height: 76px;
  background: url(../images/icon_new02.png) center 50%/100% no-repeat;
  content: "";
}
.index__visual-product > img {
  position: relative;
  z-index: 2;
}
@media (max-height: 730px) {
  .index__visual-product {
    right: 50%;
    margin-right: calc(-510 * (100vh - 172px) / 558);
    height: 70%;
  }
  .index__visual-product.is-new:after {
    top: 7%;
    left: -28%;
    width: calc(76 * (100vh - 172px) / 558);
    height: calc(76 * (100vh - 172px) / 558);
  }
  .index__visual-product > img {
    width: auto;
    height: 100%;
  }
}
@media (max-height: 500px) {
  .index__visual-product {
    margin-right: -300px;
  }
  .index__visual-product.is-new:after {
    width: 44px;
    height: 44px;
  }
}
.index__visual-anchor {
  display: block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -27px;
  width: 55px;
  height: 25px;
  background: url(../images/icon_scroll01.png) center 50%/55px auto no-repeat;
  content: "";
}
.index__keyvisual {
  position: relative;
  margin-bottom: 50px;
  text-align: center;
}
.index__keyvisual-image {
  width: auto;
  max-height: 530px;
  height: calc(100vh - 220px);
  border-radius: 40px;
}
.index__keyvisual-banner {
  position: absolute;
  top: 440px;
  left: 50%;
  margin-left: -525px;
}
@media (max-height: 750px) {
  .index__keyvisual-banner {
    top: calc((100vh - 220px) * 440 / 530);
    margin-left: calc((100vh - 220px) * -525 / 530);
  }
  .index__keyvisual-banner img {
    height: calc((100vh - 220px) * 129 / 530);
  }
}
.index__keyvisual-banner--second {
  position: absolute;
  top: 449px;
  left: 50%;
  margin-left: -81px;
}
@media (max-height: 750px) {
  .index__keyvisual-banner--second {
    top: calc((100vh - 220px) * 440 / 530);
    margin-top: calc((100vh - 220px) * 9 / 530);
    margin-left: calc((100vh - 220px) * -81 / 530);
  }
  .index__keyvisual-banner--second img {
    height: calc((100vh - 220px) * 120 / 530);
  }
}
.index__keyvisual-product {
  position: absolute;
  top: 172px;
  right: 50%;
  margin-right: -525px;
}
@media (max-height: 750px) {
  .index__keyvisual-product {
    top: calc((100vh - 220px) * 172 / 530);
    margin-right: calc((100vh - 220px) * -525 / 530);
  }
  .index__keyvisual-product img {
    height: calc((100vh - 220px) * 388 / 530);
  }
}
.index__keyvisual-product.is-new:after {
  position: absolute;
  z-index: 1;
  top: 7%;
  left: 44%;
  width: 22%;
  height: 19.5%;
  background: url(../images/icon_new01.png) center 50%/100% no-repeat;
  content: "";
}
.index__keyvisual-product.is-popular:after {
  position: absolute;
  z-index: 1;
  top: 7%;
  left: 44%;
  width: 22%;
  height: 19.5%;
  background: url(../images/icon_new02.png) center 50%/100% no-repeat;
  content: "";
}
.index__keyvisual-product img {
  position: relative;
  z-index: 2;
}
.index__section {
  position: relative;
  margin-bottom: 150px;
}
.index__live {
  overflow: hidden;
  margin-top: -127px;
  padding-top: 127px;
}
.index__live--launch {
  margin-bottom: 90px;
}
.index__live-container {
  float: right;
  margin-top: 30px;
  padding: 60px 0px;
  width: 600px;
  background: url(../images/live_bg01.png) center top repeat;
  color: #fff;
  text-align: center;
}
.index__live-title {
  margin-bottom: 40px;
  font-size: 30px;
  font-weight: 700;
}
.index__live-title small {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
}
.index__live-text {
  margin-bottom: 20px;
  font-size: 16px;
}
.index__live-sns-live {
  display: inline-block;
  margin: 0px 15px;
  width: 150px;
  background-color: #fff;
  border-radius: 25px;
  line-height: 50px;
}
.index__live-sns-live:hover {
  opacity: 0.8;
}
.index__live-image {
  position: absolute;
  top: 127px;
  left: 0px;
}
.index__sizzle {
  display: flex;
  flex-wrap: wrap;
  margin-top: -127px;
  padding-top: 127px;
}
.index__sizzle-head {
  margin-bottom: 40px;
  width: 100%;
  color: #2d1f87;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
.index__sizzle-head small {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
}
.index__sizzle-title {
  position: absolute;
  z-index: 5;
  top: 50%;
  top: 398px;
  left: 50%;
  margin: -67px 0px 0px -76px;
}
.index__sizzle-box {
  position: relative;
  overflow: hidden;
  padding-top: 230px;
  width: 50%;
  height: 600px;
  background-position: center 50%;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  box-sizing: border-box;
  /*
  @media screen and (min-resolution: 2dppx) {
    &--milk {
      background-image: url(../images/sizzle_bg01@2x.jpg);
    }
    &--tea {
      background-image: url(../images/sizzle_bg02@2x.jpg);
    }
  }
  */
}
.index__sizzle-box:after {
  display: block;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  content: "";
}
.index__sizzle-box--milk {
  background-image: url(../images/sizzle_bg01.jpg);
}
.index__sizzle-box--tea {
  background-image: url(../images/sizzle_bg02.jpg);
}
.index__sizzle-caption {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8), 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.index__sizzle-text {
  position: relative;
  z-index: 3;
  padding: 15px 0px;
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8), 0px 0px 24px rgba(0, 0, 0, 0.8);
}
.index__sizzle-bg {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -530px;
  width: auto;
  height: 100%;
}
.index__sizzle-kodawari {
  width: 100%;
  text-align: center;
}
.index__story--tvcm {
  margin-bottom: 60px;
}
.index__story-title {
  margin-bottom: 30px;
  color: #2d1f87;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
.index__story-title small {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
}
.index__story-movie {
  position: relative;
  padding-top: 35px;
  height: 520px;
  background: url(../images/story_bg01.png) center 50%/692px 520px no-repeat;
  box-sizing: border-box;
}
.index__story-movie--tvcm {
  padding: 35px 0px;
  height: auto;
  background: url(../images/story_bg01.png) center top/692px 520px no-repeat, url(../images/story_bg01.png) center bottom/692px 520px no-repeat;
  text-align: center;
}
.index__story-movie--tvcm:after {
  display: block;
  position: absolute;
  top: 35px;
  left: 50%;
  margin-left: -480px;
  width: 960px;
  height: 540px;
  background-color: #fff;
  content: "";
}
.index__story-movie--tvcm .index__story-movie-link {
  z-index: 2;
  width: 960px;
  height: 540px;
  background-size: 100% auto;
}
.index__story-movie-link {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0px auto;
  width: 800px;
  height: 450px;
  background: url(../images/story_photo01.jpg) center 50%/800px 450px no-repeat;
  border-radius: 32px;
  /*
  &:after {
    display: block;
    position: absolute;
    z-index: 4;
    opacity: 0;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -3px;
    border-left: 10px solid #dbe0dc;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    content: "";
  }
  */
}
.index__story-movie-link:hover:before, .index__story-movie-link:hover:after {
  opacity: 1;
}
.index__story-movie-link:before {
  display: block;
  position: absolute;
  z-index: 3;
  opacity: 0;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  background: url(../images/icon_play01.png) center 50%/100% no-repeat;
  border-radius: 50%;
  content: "";
}
.index__story-movie-item {
  position: relative;
  z-index: 2;
  vertical-align: top;
  pointer-events: none;
}
.index__story-movie-control {
  display: flex;
  justify-content: space-between;
  margin: -15px auto 40px;
  width: 960px;
  height: 40px;
}
.index__story-movie-switch {
  display: flex;
  position: relative;
  justify-content: space-between;
  width: 160px;
  background-color: #97a8d5;
  border: 2px solid #97a8d5;
  border-radius: 20px;
  box-sizing: border-box;
  text-align: center;
}
.index__story-movie-switch-button {
  display: block;
  position: relative;
  z-index: 2;
  height: 36px;
  width: 76px;
  border-radius: 18px;
  color: #fff;
  line-height: 36px;
  cursor: pointer;
  transition: color 300ms ease;
}
.index__story-movie-switch-button--15sec:after {
  position: absolute;
  z-index: 1;
  top: 0px;
  right: 0px;
  width: 76px;
  height: 36px;
  background-color: #fff;
  border-radius: 18px;
  transition: transform 300ms ease;
  transform: translate(80px, 0px);
  content: "";
}
input:checked + .index__story-movie-switch-button {
  color: #2d1f87;
  cursor: default;
}
input:checked + .index__story-movie-switch-button:after {
  transform: translate(0px, 0px);
}
.index__story-movie-switch-button > span {
  display: inline-block;
  position: relative;
  z-index: 2;
}
.index__story-movie-switch input {
  position: absolute;
  visibility: hidden;
}
.index__story-movie-share {
  display: flex;
  justify-content: right;
  line-height: 50px;
}
.index__story-movie-share-text {
  color: #2d1f87;
  font-weight: 700;
}
.index__story-movie-share-button {
  display: block;
  margin-left: 10px;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background: url(../images/icon_sns02.png) 15px 50%/135px auto no-repeat #fff;
  border-radius: 50%;
  box-sizing: border-box;
}
.index__story-movie-share-button[data-type="twitter"] {
  border-color: #1da1f2;
}
.index__story-movie-share-button[data-type="line"] {
  background-position: -46px 50%;
  border-color: #00c300;
}
.index__story-movie-share-button[data-type="facebook"] {
  background-position: -107px 50%;
  border-color: #3c5a98;
}
.index__story-movie-share-button:hover {
  opacity: 0.8;
}
.index__story-making {
  margin: 0px auto 80px;
  padding: 30px;
  background: #97a8d5;
  border-radius: 14px;
  width: 540px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}
.index__story-making-text {
  margin-top: 35px;
  font-size: 20px;
}
.index__story-making a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
}
.index__story-making a:hover:before {
  opacity: 0.8;
}
.index__story-making a:before {
  display: block;
  position: absolute;
  z-index: 3;
  top: 240px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background: url(../images/icon_play01.png) center 50%/100% no-repeat;
  border-radius: 50%;
  content: "";
}
.index__specialMovie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 75px;
  padding: 40px 0;
  width: 960px;
  background: url(../images/live_bg01.png) right bottom repeat;
  border-radius: 20px;
  /*
  &-container {
    position: relative;
    padding-top: 60px;
    text-align: center;
  }
  &-category-title {
    position: absolute;
    top: 0px;
    right: 120px;
    width: 250px;
    height: 60px;
    background-color: #97a8d5;
    border-radius: 15px 15px 0 0;
    color: #fff;
    font-weight: 700;
    line-height: 60px;
    cursor: pointer;
    &--press {
      right: 384px;
    }
    &.isActive {
      background: url(../images/live_bg01.png) right bottom repeat;
      cursor: default;
    }
  }
  &-list {
    display: none;
    padding: 40px;
    background: url(../images/live_bg01.png) right top repeat;
    min-height: 100px;
    border-radius: 15px;
    .isActive + & {
      display: block;
    }
  }
  &-text {
    margin-bottom: 30px;
    color: #fff;
    font-size: 16px;
  }
  &-thumbnails {
    display: flex;
    justify-content: space-between;
  }
  &-link {
    display: block;
    position: relative;
    width: 268px;
    &:hover:before {
      opacity: 0.8;
    }
    &:before {
      display: block;
      position: absolute;
      z-index: 3;
      top: 120px;
      left: 50%;
      margin-left: -30px;
      width: 60px;
      height: 60px;
      background: url(../images/icon_play01.png) center 50% / 100% no-repeat;
      border-radius: 50%;
      content: "";
    }
  }
  &-movie-title {
    display: block;
    margin-top: 35px;
    color: #fff;
    font-size: 16px;
    em {
      font-size: 120%;
    }
  }
  */
}
.index__specialMovie-title {
  margin-bottom: 30px;
  width: 100%;
  text-align: center;
}
.index__specialMovie-item {
  display: block;
  position: relative;
  margin: 0px 15px;
  text-align: center;
}
.index__specialMovie-item:hover:before {
  opacity: 0.8;
}
.index__specialMovie-item:before {
  display: block;
  position: absolute;
  z-index: 3;
  top: 195px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background: url(../images/icon_play01.png) center 50%/100% no-repeat;
  border-radius: 50%;
  content: "";
}
.index__specialMovie-item--soon:before {
  display: none;
}
.index__specialMovie-movie-title {
  display: block;
  margin-top: 35px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.index__catch {
  margin-bottom: 80px;
  text-align: center;
}
.index__announce {
  position: relative;
  padding: 80px 0px 25px;
  background: url(../images/bg03.jpg) center 50%/cover;
  text-align: center;
}
.index__announce:before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 252px;
  height: 200px;
  background: url(../images/bg02.png) center top/100% auto no-repeat;
  transform: rotateX(-180deg) rotateY(-180deg);
  pointer-events: none;
  content: "";
}
.index__lineup {
  margin-top: -127px;
  margin-bottom: 80px;
  padding-top: 127px;
}
.index__lineup-wrapper {
  position: relative;
  padding: 100px 0px;
  background: url(../images/bg04.jpg) center 50%/cover;
  text-align: center;
}
.index__lineup-wrapper:before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 252px;
  height: 200px;
  background: url(../images/bg02.png) center top/100% auto no-repeat;
  transform: rotateX(-180deg) rotateY(-180deg);
  pointer-events: none;
  content: "";
}
.index__lineup-title {
  margin-bottom: 35px;
  color: #2d1f87;
  font-size: 30px;
}
.index__lineup-list {
  display: flex;
  margin: 0px auto;
  width: 950px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: bottom;
  align-items: baseline;
}
.index__lineup-list-item {
  position: relative;
  margin: 0px -30px 25px;
  width: 250px;
  color: #2d1f87;
}
.index__lineup-list-item--hot {
  color: #d60b1b;
}
.index__lineup-list-item img {
  position: relative;
  z-index: 2;
  vertical-align: bottom;
}
.index__lineup-list-item:before {
  display: block;
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 50%;
  margin-right: 32px;
  width: 76px;
  height: 76px;
  background: none center 50% / 100% no-repeat;
  content: "";
}
.index__lineup-list-item.is-new:before {
  background-image: url(../images/icon_new01.png);
}
.index__lineup-list-item.only-okinawa:before {
  width: 67px;
  height: 67px;
  background-image: url(../images/icon_okinawa01.png);
}
.index__lineup-list-text {
  display: block;
  position: absolute;
  bottom: 5px;
  left: 0px;
  width: 100%;
  font-size: 16px;
  line-height: 20px;
}
.index__lineup-list-text img {
  vertical-align: middle;
}
.index__lineup-text {
  margin-top: -10px;
  color: #d60b1b;
  font-size: 14px;
  text-align: center;
}
.index__craftea {
  margin-top: -127px;
  padding-top: 127px;
}
.index__craftea-wrapper {
  position: relative;
  padding: 50px 0px;
  background: url(../images/bg04.jpg) center 50%/cover;
  text-align: center;
}
.index__craftea-wrapper:before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 252px;
  height: 200px;
  background: url(../images/bg02.png) center top/100% auto no-repeat;
  transform: rotateX(-180deg) rotateY(-180deg);
  pointer-events: none;
  content: "";
}
.index__craftea-title {
  margin-bottom: 35px;
  color: #2d1f87;
  font-size: 30px;
  font-weight: 700;
}
.index__craftea-title small {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
}
.index__craftea-banner {
  display: inline-block;
  margin-bottom: 30px;
}
.index__craftea-banner:last-child {
  margin-bottom: 0px;
}
.index__craftea-banner:hover {
  opacity: 0.8;
}
.index__craftea-lineup {
  display: inline-block;
}
.index__craftea-lineup:hover {
  opacity: 0.8;
}
.index__social {
  margin: -127px auto 50px;
  padding-top: 127px;
  width: 800px;
  color: #fff;
  text-align: center;
}
.index__social-inner {
  padding: 50px 0px 40px;
  background-color: #97a8d5;
}
.index__social-title {
  margin-bottom: 30px;
  font-size: 24px;
}
.index__social-text {
  margin-bottom: 30px;
  font-size: 16px;
}
.index__social-buttons {
  display: flex;
  justify-content: space-between;
  margin: 0px auto;
  width: 540px;
}
.index__social-buttons-link {
  display: block;
  width: 255px;
  background-color: #fff;
  border-radius: 25px;
  line-height: 50px;
}
.index__social-buttons-link:hover {
  opacity: 0.8;
}
.index__banner {
  margin: 0 auto 127px;
  position: relative;
  z-index: 3;
}
.index__banner-wrapper {
  position: relative;
}
.index__banner-list {
  display: flex;
  margin: 0px auto;
  width: 950px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
.index__banner-list li:nth-child(2) {
  margin-left: 20px;
}
.index__banner-list li a {
  display: block;
}
.index__banner .index__visual-anchor {
  display: block;
  position: relative;
  bottom: 0px;
  left: 50%;
  margin-left: -27px;
  margin-top: 50px;
  width: 55px;
  height: 25px;
  background: url(../images/icon_scroll01.png) center 50%/55px auto no-repeat;
  content: "";
}

.movie__share {
  margin-top: 30px;
  text-align: center;
}
.movie__share-text {
  display: inline-block;
  margin-right: 10px;
  color: #fff;
  font-size: 16px;
  line-height: 50px;
  vertical-align: top;
}
.movie__share-link {
  display: inline-block;
  margin: 0px 5px;
  width: 50px;
  height: 50px;
  background: url(../images/icon_sns02.png) 15px 50%/135px auto no-repeat #fff;
  border-radius: 50%;
}
.movie__share-link[data-type="line"] {
  background-position: -45px 50%;
}
.movie__share-link[data-type="facebook"] {
  background-position: -105px 50%;
}

#movie .modal-scroller {
  overflow-y: hidden;
  width: 100%;
}
#movie .modal-scroller iframe {
  max-height: calc(100vh - 160px);
}

/**
 * 製品情報モーダル
 */
#productsModal .modal-scroller {
  padding-right: 30px;
  box-sizing: border-box;
}
#productsModal .product-carousel {
  margin: 0px auto;
  width: 800px;
}
#productsModal .product-carousel .carousel-screen {
  background: url(../images/bg04.jpg) center 50%/cover repeat;
}
#productsModal .product-carousel .carousel-screen:before {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 252px;
  height: 200px;
  background: url(../images/bg02.png) center top/100% auto no-repeat;
  transform: rotateX(-180deg) rotateY(-180deg);
  pointer-events: none;
  content: "";
}

.product-detail {
  text-align: center;
  padding: 0px 60px 0px 340px;
  box-sizing: border-box;
  text-align: center;
}
.product-detail__title {
  margin: 85px auto 40px;
}
.product-detail__copy {
  margin-bottom: 20px;
  color: #2d1f87;
  font-size: 16px;
  font-weight: 700;
}
.product-detail__bottle {
  position: absolute;
  top: 0%;
  left: 0px;
  width: 340px;
  height: 100%;
  text-align: center;
  line-height: 600px;
}
.product-detail__bottle img {
  vertical-align: middle;
}
.product-detail--gardenLemon .product-detail__bottle:after {
  display: block;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 67px;
  height: 67px;
  background: url(../images/icon_okinawa01.png) center 50% no-repeat;
  content: "";
}
.product-detail__character {
  margin-bottom: 40px;
  padding: 15px 0px;
  background: #fff;
  border-radius: 10px;
  color: #2d1f87;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.product-detail__character-item {
  margin: 0px auto;
  width: 230px;
}
.product-detail__character--gardenLemon .product-detail__character-item {
  width: 330px;
}

.product-lineup__text {
  margin-bottom: 20px;
}
.product-detail--gardenLemon .product-lineup__text {
  margin-bottom: -10px;
}
.product-lineup__list {
  display: flex;
  justify-content: center;
  font-size: 10px;
  align-items: flex-end;
}
.product-lineup__list-item {
  width: 80px;
}
.product-lineup__name {
  display: block;
  margin-top: 10px;
  color: #2d1f87;
  line-height: 1.5;
}

.campaign {
  padding-top: 10px;
  /**
   * キャンペーン応募キービジ
   */
  /**
   * キャンペーン応募ステップ
   */
  /**
   * CokeON
   */
}
.campaign__outline {
  margin-bottom: 30px;
  text-align: center;
}
.campaign__outline-title {
  margin-bottom: 30px;
}
.campaign__outline-schedule {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 24px;
}
.campaign__outline-schedule dt {
  padding: 0px 1.4em;
  color: #fff;
}
.campaign__outline-schedule dt.campaign__outline-schedule-apply {
  background-color: #2d1f87;
}
.campaign__outline-schedule dt.campaign__outline-schedule-coupon {
  margin-left: 1em;
  background-color: #e60020;
}
.campaign__outline-schedule dd {
  padding: 0px 1.3em;
}
.campaign__outline-schedule dd.campaign__outline-schedule-apply {
  color: #2d1f87;
}
.campaign__outline-schedule dd.campaign__outline-schedule-coupon {
  color: #e60020;
}
.campaign__outline-term {
  font-size: 16px;
}
.campaign__step {
  position: relative;
  overflow: hidden;
  margin: 0px auto 80px;
  width: 800px;
  background-color: #2d1f87;
  border-radius: 40px;
  color: #fff;
  text-align: center;
}
.campaign__step--launch {
  background-color: #dca541;
}
.campaign__step--message {
  background-color: #1da1f2;
}
.campaign__step--launch .campaign__step-phase .campaign__step-title {
  padding-bottom: 5px;
  width: 160px;
  border-bottom: 0px;
  background: url(/kochakaden/campaign/index/images/line01.png) center bottom no-repeat;
}
.campaign__step--launch .campaign__step-phase--no1 {
  background-color: #2d1f87;
}
.campaign__step--launch .campaign__step-phase--no1:after {
  border-top-color: #2d1f87;
}
.campaign__step--launch .campaign__step-phase--no2 .campaign__step-title {
  color: #2d1f87;
  background-image: url(/kochakaden/campaign/index/images/line02.png);
}
.campaign__step--message .campaign__step-phase .campaign__step-title {
  overflow: hidden;
  border: 0px;
  color: #fff;
  background: url(/kochakaden/campaign/index/images/step_text01.png) center 50% no-repeat;
  line-height: 28px;
  text-indent: -999px;
}
.campaign__step--message .campaign__step-phase .campaign__step-text {
  font-weight: 700;
}
.campaign__step--message .campaign__step-phase--no1 {
  background-color: #2d1f87;
}
.campaign__step--message .campaign__step-phase--no1:after {
  border-top-color: #2d1f87;
}
.campaign__step--message .campaign__step-phase--no2 .campaign__step-title {
  background-image: url(/kochakaden/campaign/index/images/step_text02.png);
}
.campaign__step--teaser .campaign__step-phase--no2, .campaign__step--message .campaign__step-phase--no2 {
  padding-right: 225px;
}
.campaign__step--finish:after {
  display: block;
  position: absolute;
  z-index: 5;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  content: "";
}
.campaign__step-phase {
  position: relative;
  box-sizing: border-box;
}
.campaign__step-phase--no1 {
  padding-top: 40px;
  height: 170px;
  background-color: #1da1f2;
}
.campaign__step-phase--no1:after {
  display: block;
  position: absolute;
  z-index: 1;
  bottom: -40px;
  left: 0px;
  border-top: 40px solid #1da1f2;
  border-left: 400px solid transparent;
  border-right: 400px solid transparent;
  content: "";
}
.campaign__step-phase--no1 .campaign__step-text {
  color: #eeb143;
}
.campaign__step-phase--no2 {
  padding-top: 70px;
  height: 278px;
}
.campaign__step-title {
  margin: 0px auto 15px;
  width: 100px;
  border-bottom: 4px dotted #ffd280;
  color: #ffd280;
  font-size: 18px;
  line-height: 1.5;
}
.campaign__step-text {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.4;
}
.campaign__step-button {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: 0px 25px;
  min-width: 200px;
  background-color: #fff;
  border-radius: 25px;
  font-weight: 700;
  line-height: 50px;
  text-decoration: none;
}
.campaign__step-button:before {
  display: inline-block;
  width: 40px;
  height: 50px;
  background: url(../../campaign/teaser/images/icon_twitter01.png) center 50%/21px auto no-repeat;
  vertical-align: top;
  content: "";
}
.campaign__step-button:hover {
  opacity: 0.8;
}
.campaign__step-capture {
  position: absolute;
  bottom: 0px;
  right: 150px;
}
.campaign__step-finish {
  display: block;
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 0px;
  margin-top: -36px;
  width: 100%;
  color: #2d1f87;
  font-size: 18px;
  text-align: center;
}
.campaign__step-finish strong {
  display: block;
  margin-bottom: 0.8em;
  font-size: 150%;
  font-weight: 700;
}
.campaign__cokeon {
  margin-bottom: 80px;
}
.campaign__cokeon-title {
  margin-bottom: 40px;
  color: #2d1f87;
  font-size: 30px;
  text-align: center;
}
.campaign__cokeon-banner {
  position: relative;
  margin: 0px auto;
  width: 800px;
  text-align: center;
}
.campaign__cokeon-button {
  position: absolute;
  bottom: 30px;
  right: 44px;
  width: 220px;
  background-color: #fff;
  border: 2px solid #f40000;
  border-radius: 25px;
  color: #f40000;
  line-height: 46px;
  text-decoration: none;
  transition: background 300ms ease, color 400ms ease;
}
.campaign__cokeon-button:hover {
  background-color: #f40000;
  color: #fff;
}

.term__header {
  position: fixed;
  z-index: 5;
  top: 0px;
  left: 0px;
  margin: 0px auto;
  padding: 25px 0px;
  width: 100%;
  background: #fff;
  max-width: none;
}
.term__content {
  margin-top: 0px;
  padding: 107px 0px 50px;
  min-width: none;
  width: 100%;
  background: url(/kochakaden/index/images/bg04.jpg) center top repeat;
}
.term__outline {
  margin: 10px auto 25px;
  padding: 60px 40px;
  width: 90%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #333;
}
.term__outline-caption {
  margin-bottom: 15px;
  padding: 10px 20px;
  background: #2d1f87;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}
.term__outline-detail {
  margin-bottom: 30px;
  line-height: 1.8;
}
.term__outline-detail:last-child {
  margin-bottom: 0px;
}
.term__outline-detail p + p {
  margin-top: 1em;
}
.term__outline-detail a {
  color: #2d1f87;
  text-decoration: underline;
}
.term__title {
  margin-bottom: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.8;
}
.term__list {
  padding-left: 1em;
}
.term__list-item {
  text-indent: -1em;
}
.term__list-item > * {
  text-indent: 0px;
}
.term__button {
  display: block;
  margin: 0px auto;
  width: 260px;
  background: #dca541;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 56px;
  text-decoration: none;
  text-align: center;
}
.term__footer {
  padding: 15px 0px;
  background: #97a8d5;
}
.term__footer .footer__copyright {
  margin: 0px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

.recipe__title {
  margin: 0px auto 60px;
  padding: 36px 0px;
  background: url(/kochakaden/recipe/images/title_bg01.png) center 50% no-repeat;
  color: #2d1f87;
  font-size: 36px;
  font-weight: 700;
  line-height: 72px;
  text-align: center;
}

.recipe__lead {
  margin-bottom: 60px;
  font-size: 16px;
  text-align: center;
}

.recipe__contents {
  margin-bottom: 150px;
}

.recipe__detail, .recipe__detail--orange, .recipe__detail--peach {
  position: relative;
  overflow: hidden;
  margin: 0px auto 60px;
  width: 1110px;
  background-position: right top;
  background-repeat: repeat;
}

.recipe__detail {
  background-image: url(/kochakaden/recipe/images/detail_bg01.png);
}
.recipe__detail--orange {
  background-image: url(/kochakaden/recipe/images/detail_bg02.png);
}
.recipe__detail--peach {
  background-image: url(/kochakaden/recipe/images/detail_bg03.png);
}

.recipe__detail-title {
  position: absolute;
  z-index: 2;
  top: 0px;
  right: 135px;
}

.recipe__photo {
  display: block;
  position: relative;
  float: left;
}
.recipe__photo::after {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 10%;
  height: 100%;
  background: url(/kochakaden/recipe/images/detail_bg01_2.png) right top/auto 100% no-repeat;
  content: "";
}
.recipe__detail--orange .recipe__photo::after {
  background-image: url(/kochakaden/recipe/images/detail_bg02_2.png);
}
.recipe__detail--peach .recipe__photo::after {
  background-image: url(/kochakaden/recipe/images/detail_bg03_2.png);
}

.recipe__detail-contents {
  position: absolute;
  top: 240px;
  right: 212px;
  width: 220px;
}
.recipe__detail--orange .recipe__detail-contents, .recipe__detail--peach .recipe__detail-contents {
  right: 180px;
  width: 240px;
}

.recipe__detail-caption {
  margin-bottom: 10px;
  text-align: center;
}

.recipe__detail-steps {
  font-size: 16px;
}
.recipe__detail .recipe__detail-steps {
  color: #fff;
}
.recipe__detail-steps > li {
  margin-bottom: 5px;
  padding-left: 22px;
  line-height: 26px;
  text-indent: -22px;
}
.recipe__detail-steps > li > span {
  display: inline-block;
  margin-right: 0px;
  font-size: 22px;
  text-indent: 0px;
  vertical-align: top;
}

.recipe__product {
  position: absolute;
  z-index: 2;
  bottom: 90px;
  right: 35px;
}

.recipe__share {
  display: flex;
  position: absolute;
  bottom: 0px;
  right: 0px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 10px 20px;
  width: 228px;
  height: 60px;
  background: #fff;
  box-sizing: border-box;
  color: #2d1f87;
  font-size: 14px;
  font-weight: 700;
  line-height: 40px;
}

.recipe__share-text {
  padding-right: 10px;
}

.recipe__share-button {
  display: block;
  width: 40px;
  height: 40px;
  background-size: auto 24px;
  background-repeat: no-repeat;
  background-position: center 50%;
  background-image: url(/kochakaden/index/images/icon_sns02.png);
}
.recipe__share-button[data-type="twitter"] {
  background-position: 8px 50%;
}
.recipe__share-button[data-type="facebook"] {
  background-position: -128px 50%;
}