@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-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

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

body {
  word-break: break-all; }

button {
  background-color: transparent;
  border: 0 none;
  padding: 0;
  line-height: 1;
  cursor: pointer; }

img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  z-index: 100;
  vertical-align: bottom; }

select {
  line-height: 1; }

select::-moz-focus-inner {
  border: 0;
  outline: 0; }

picture {
  font-size: 0;
  line-height: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width: 750px) {
  .container {
    margin: 0 3%;
    padding: 0; 
  }
}
.slick-container {
  margin: 0 45px;
  padding: 0; 
}
.row {
  display: flex;
  justify-content: center;
}
.col {
  box-sizing: border-box;
  text-align: center;
}
.col-22 {
  width: 22%;
  box-sizing: border-box;
  text-align: center;
}
.col-26 {
  width: 26%;
  box-sizing: border-box;
  text-align: center;
}
.col-37 {
  width: 37%;
  box-sizing: border-box;
  text-align: right;
}
.col-50 {
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  margin: 0 10px;
}
.col-50_left{
  width: 50%;
  box-sizing: border-box;
  text-align: right;
}
.col-50_right {
  width: 50%;
  box-sizing: border-box;
  text-align: left;
}
.col-78 {
  width: 78%;
  box-sizing: border-box;
  text-align: center;
}

@media screen and (max-width: 750px) {
  .switch-pc {
    display: none;
  }
}
.switch-sp {
  display: none;
}
@media screen and (max-width: 750px) {
  .switch-sp {
    display: initial;
  }
}

.header {
  padding: 17px 30px;
  display: flex;
}
.header-logo {
  width: 120px;
  padding-top: 14px;
}
@media screen and (max-width: 750px) {
  .header-logo {
    width: auto;
    padding: 0;
  }
}

.hero {
  background-image: url("../images/hero-back.png");
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 750px) {
  .hero {
    display: none; 
  }
}
.hero-circle {
  margin-top: 142%;
  width: 184px;
}
@media screen and (max-width: 750px) {
  .hero-circle {
    width: 69%;
    margin-top: 0; 
    padding: 123% 0; 
  }
}
.hero-logo {
  padding: 39px 0 46px;
}
.hero-text {
  padding: 65px 0px 28px; 
}
.hero-text__present {
  padding: 33px 0 69px;
}
.hero-myway {
  padding-top: 19px;
}
.hero-bottle {
  margin: 0 5px;
}
.hero-sp {
  display: none;
}
@media screen and (max-width: 750px) {
  .hero-sp {
    display: block;
    background-image: url("../images/hero-sp-back.png");
    background-repeat: no-repeat; 
    background-size: cover;
    }
}

.line {
  background-color: #000000;
  text-align: center;
  padding: 3.5% 0;
}
.line-term {
  width: 409px;
  padding-left: 16px;
}
@media screen and (max-width: 750px) {
  .line-term {
    padding-left: 4%; 
    width: 97.6%;
    padding-top: 2.8%;
  }
}
.line-text {
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}
@media screen and (max-width: 750px) {
  .line-text {
    display: none;
  }
}
.line-up {
  display: none;
}
@media screen and (max-width: 750px) {
  .line-up {
    display: initial;
    width: 22.3%;
  }
}
.line-house {
  display: none;
}
@media screen and (max-width: 750px) {
  .line-house {
    display: initial;
    width: 62.3%;
  }
}

.helf {
  background-image: url("../images/helf-back.png");
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .helf {
    background-image: url("../images/helf-back-sp.png");
  }
}
.helf-logo {
  padding: 61px 0 49px;
}
@media screen and (max-width: 750px) {
  .helf-logo {
    width: 14.3%;
    padding: 6% 0; 
  }
}
@media screen and (max-width: 750px) {
  .helf-shot {
    width: 36.5%;
  }
}
.helf-text {
  padding: 57px 0 90px 35px;
}
@media screen and (max-width: 750px) {
  .helf-text {
    display: none;
  }
}
.helf-title_sp {
  display: none;
}
@media screen and (max-width: 750px) {
  .helf-title_sp {
    display: initial;
    padding: 16% 0; 
    width: 97.5%;
  }
}
.helf-text_sp {
  display: none;
}
@media screen and (max-width: 750px) {
  .helf-text_sp {
    display: initial;
    padding: 0 0 9% 0; 
    width: 93%;
  }
}
.helf-btn {
  margin-bottom: 90px;
}
@media screen and (max-width: 750px) {
  .helf-btn {
    margin: 0;
    padding-bottom: 12.5%;
    width: 74.3%;
  }
}

.detail {
  text-align: center;
  padding-bottom: 50px;
}
@media screen and (max-width: 750px) {
  .detail {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  .detail-sp {
    padding-bottom: 6.6%;
    text-align: center;
  }
}
.detail-row {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
.detail-gold {
  width: 105px;
  padding: 73px 7.2% 50px 6.2%;
}
@media screen and (max-width: 750px) {
  .detail-gold {
    width: 48.8%;
    padding: 14.1% 0;
  }
}
.detail-gold_text {
  width: 200px;
  padding-bottom: 71px;
}
@media screen and (max-width: 750px) {
  .detail-gold_text {
    width: 85.4%;
    padding-bottom: 20%;
  }
}
.detail-black {
  width: 105px;
  padding: 73px 6.2% 54px 7.2%;
} 
@media screen and (max-width: 750px) {
  .detail-black {
    width: 48.8%;
    padding: 14.1% 0;
  }
}
.detail-black_text {
  width: 200px;
  padding-bottom: 76px;
}
@media screen and (max-width: 750px) {
  .detail-black_text {
    width: 85.4%;
    padding-bottom: 20%;
  }
}
.detail-text {
  width: 63%;
}
.detail-btn {
  margin: 2% 0 3.5%;
}
@media screen and (max-width: 750px) {
  .detail-btn {
    margin: 4% 0 6.5%;
    width: 70%;
  }
}




.style {
  background-image: url("../images/style-back.png");
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center;
}
.style-title {
  padding: 60px 0;
}
@media screen and (max-width: 750px) {
  .style-title_sp {
    padding: 7% 0 5.7%;
    width: 68.3%;
  }
}
.style-text {
  padding: 58px 0 50px;
}
@media screen and (max-width: 750px) {
  .style-text_sp {
    padding: 7% 0 5.7%;
    width: 74%;
  }
}
@media screen and (max-width: 750px) {
  .style-text2_sp {
    padding: 5.7% 0 7.2%;
    width: 94.5%;
  }
}
.style-gold {
  background-image: url("../images/style-gold-sp.png");
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center;
  text-align: center;
}
.style-black {
  background-image: url("../images/style-black-sp.png");
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center;
  text-align: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 750px) {
  .style-house {
    width: 88.5%;
  }
}

.movie {
  text-align: center;
  padding: 50px 14%;
}
@media screen and (max-width: 750px) {
  .movie {
    padding: 6.7% 4%;
  }
}
.movie-text {
  padding-top: 30px;
  width: 352px;
}
@media screen and (max-width: 750px) {
  .movie-text {
    padding-top: 4.4%;
    width: 51%;;
  }
}

.present {
  background-image: url("../images/present-back.png");
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: center;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .present {
    background-image: url("../images/present-back-sp.png");
  }
}
.present-bottle {
  width: 162px;
  padding: 37px 84px 44px;
}
@media screen and (max-width: 750px) {
  .present-bottle {
    padding: 22% 0 20.5% 0; 
    width: 71.6%;
  }
}
.present-title {
  padding: 42px 0 34px;
}
@media screen and (max-width: 750px) {
  .present-title {
    padding: 9% 0 6% 0; 
    width: 81%;
  }
}
.present-text {
  padding-right: 15px;
  margin-left: -10px;
}
@media screen and (max-width: 750px) {
  .present-text {
    padding-right: 2.2%;
    margin-left: -1.5%;
    width: 87.3%;
  }
}
.present-btn {
  padding-bottom: 53px;
}
@media screen and (max-width: 750px) {
  .present-btn {
    padding-bottom: 9%; 
    width: 74.3%;
  }
}

.footer {
  text-align: center;
  padding: 20px 10px;
}
.footer-text {
  font-size: 12px;
}


.hover {
  -webkit-transition: opacity .2s;
  transition: opacity .2s; 
}
  .hover:hover {
    opacity: .7; 
  }

.list-mv02{
  opacity: 0;
  transition: 2.0s;
}
.mv02{
  opacity: 1.0;
}
.list-mv03{
  opacity: 0;
  transition: 4.0s;
}
.mv03{
  opacity: 1.0;
}
.list-mv04{
  opacity: 0;
  transition: 6.0s;
}
.mv04{
  opacity: 1.0;
}
.hover{
  transition:opacity .2s
}
.hover:hover{
  opacity:.7
}