@charset "UTF-8";
.l-wrapper * {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0!important
}
.l-wrapper a {
  color: #000;
  outline: 0
}
.l-wrapper a:link:active,
.l-wrapper a:link:hover,
.l-wrapper a:visited:active,
.l-wrapper a:visited:hover {
  color: inherit
}
.l-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: none
}
.l-wrapper ol li,
.l-wrapper ul li {
  list-style: none
}
.l-wrapper button,
.l-wrapper input,
.l-wrapper select,
.l-wrapper textarea {
  font-family: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0
}
.l-wrapper button {
  cursor: pointer
}
.l-wrapper address {
  font-style: normal
}
.l-wrapper sup {
  font-size: 10px
}
.l-wrapper {
  position: relative;
  min-width: 320px;
  background: #fff;
  color: #000
}
@media only screen and (min-width:769px) {
  .l-wrapper {
    padding-top: 70px
  }
  .l-wrapper__inner {
    max-width: 1000px;
    padding: 0 20px;
    margin: 0 auto
  }
}
@media only screen and (max-width:768px) {
  .l-wrapper {
    padding-top: 50px
  }
  .l-wrapper__inner {
    padding: 0 4vw
  }
  .l-wrapper__inner.sp-full {
    padding: 0
  }
}
.l-wrapper {
  position: relative;
  min-width: 320px;
  background: #fff;
  color: #000
}
@media only screen and (min-width:769px) {
  .l-wrapper {
    padding-top: 70px
  }
  .l-wrapper__inner {
    max-width: 1000px;
    padding: 0 20px;
    margin: 0 auto
  }
}
@media only screen and (max-width:768px) {
  .l-wrapper {
    padding-top: 50px
  }
  .l-wrapper__inner {
    padding: 0 4vw
  }
  .l-wrapper__inner.sp-full {
    padding: 0
  }
}
.l-main {
  overflow: hidden
}
.l-header {
  position: absolute;
  top: 0;
  width: 100%;
  background: #000;
  color: #fff
}
.l-header a {
  color: #fff
}
.l-header__logo a {
  position: relative;
  display: block;
  -webkit-transition: all .25s cubic-bezier(0,0,.25,1) 0s;
  transition: all .25s cubic-bezier(0,0,.25,1) 0s
}
.l-header__logo a:hover {
  opacity: .7
}
.l-header__logo a span {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
  width: 100%
}
@media only screen and (min-width:769px) {
  .l-header {
    height: 70px
  }
  .l-header__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    height: 70px;
    max-width: 1200px;
    padding: 0 20px;
    margin: 0 auto
  }
  .l-header__logo a {
    width: 180px;
    height: 70px
  }
  .l-header__btn {
    display: none
  }
}
@media only screen and (max-width:768px) {
  .l-header {
    height: 50px
  }
  .l-header__inner {
    position: relative;
    height: 50px;
    padding: 0 5.33333vw
  }
  .l-header__logo {
    position: relative;
    z-index: 998
  }
  .l-header__logo a {
    width: 69.33333vw;
    max-width: 130px;
    height: 50px
  }
  .l-header__btn {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    z-index: 999;
    right: 5.33333vw;
    width: 5.33333vw;
    height: 4vw;
    width: 20px;
    height: 15px;
    cursor: pointer
  }
  .l-header__btn p {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    width: 100%;
    height: 1px;
    background: #fbc323
  }
  .l-header__btn:after,
  .l-header__btn:before {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: #fbc323;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
  }
  .l-header__btn:after {
    bottom: 0
  }
}
.l-header.is-fix {
  position: fixed;
  z-index: 99
}
@media only screen and (max-width:768px) {
  .l-header.is-nav-open .l-header__btn p {
    opacity: 0
  }
  .l-header.is-nav-open .l-header__btn:after,
  .l-header.is-nav-open .l-header__btn:before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
  }
  .l-header.is-nav-open .l-header__btn:before {
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg)
  }
  .l-header.is-nav-open .l-header__btn:after {
    bottom: none;
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg)
  }
}
.l-nav ul li a {
  position: relative;
  display: block;
  text-decoration: none;
  font-family: "Roboto Slab",serif;
  font-weight: 600;
  letter-spacing: .06em
}
.l-nav ul li a span {
  display: block
}
@media only screen and (min-width:769px) {
  .l-nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
  }
  .l-nav ul li {
    margin: 0 20px
  }
  .l-nav ul li a {
    position: relative;
    height: 70px
  }
  .l-nav ul li a:hover:after {
    width: 100%
  }
  .l-nav ul li a span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: relative
  }
  .l-nav ul li a:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    bottom: 0;
    width: 0%;
    height: 3px;
    background: #fbc323;
    -webkit-transition: width .2s ease;
    transition: width .2s ease
  }
  .l-nav ul li.is-current a:after {
    width: 100%
  }
}
@media only screen and (max-width:768px) {
  .l-nav {
    position: fixed;
    z-index: 997;
    top: 100px;
    left: 0;
    width: 100%;
    height: calc(100vh - 100px);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s ease,opacity 0s ease;
    transition: visibility 0s ease,opacity 0s ease;
    background: url(/wine/yellowtail/common/img/parts/spnav_bg.png) center center no-repeat rgba(0,0,0,.9);
    background-size: 100% auto
  }
  .l-nav__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
  .l-nav__inner:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    bottom: 0;
    width: 100%;
    height: 0;
    padding-bottom: 33.33333%;
    background: url(/wine/yellowtail/common/img/parts/bottles_sp.png) center bottom no-repeat rgba(0,0,0,.9);
    background-size: cover
  }
  .l-nav ul {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-40%);
    transform: translate(-50%,-40%);
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease,-webkit-transform .2s ease;
    padding-bottom: 33.33333%
  }
  .l-nav ul li {
    margin: 10.13333vw 0;
    text-align: center;
    font-size: 21px
  }
}
.is-nav-open .l-nav {
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility .2s ease,opacity .2s ease;
  transition: visibility .2s ease,opacity .2s ease
}
@media only screen and (max-width:768px) {
  .is-nav-open .l-nav ul {
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
  }
}
.l-section.is-in .l-section__inner {
  opacity: 1;
  -webkit-transform: translate(0,0);
  transform: translate(0,0)
}
.l-section__inner {
  opacity: 0;
  -webkit-transform: translate(0,50px);
  transform: translate(0,50px);
  -webkit-transition: opacity .6s ease .15s,-webkit-transform .6s ease .15s;
  transition: opacity .6s ease .15s,-webkit-transform .6s ease .15s;
  transition: opacity .6s ease .15s,transform .6s ease .15s;
  transition: opacity .6s ease .15s,transform .6s ease .15s,-webkit-transform .6s ease .15s
}
.l-section [class*="__header"] {
  text-align: center;
  line-height: 1.6
}
.l-section [class*="__title"] {
  font-family: "Roboto Slab",serif;
  font-weight: 600;
  letter-spacing: .06em
}
.l-section [class*="__subTitle"] {
  margin: 0 0 2em;
  opacity: .3
}
@media only screen and (min-width:769px) {
  .l-section {
    padding: 12.5% 5%
  }
  .l-section__inner {
    max-width: 1200px;
    padding: 0;
    margin: 0 auto
  }
  .l-section [class*="__header"] {
    margin-bottom: 3.90625%
  }
  .l-section [class*="__title"] {
    font-size: 36px
  }
  .l-section [class*="__subTitle"] {
    font-size: 12px
  }
  .l-section [class*="__lead"] {
    font-size: 16px;
    line-height: 2
  }
}
@media only screen and (min-width:1200px) {
  .l-section {
    padding: 150px 60px
  }
}
@media only screen and (max-width:768px) {
  .l-section {
    padding: 12vw 0
  }
  .l-section__inner {
    padding-left: 4vw;
    padding-right: 4vw
  }
  .l-section [class*="__header"] {
    margin-bottom: 6.66667vw
  }
  .l-section [class*="__title"] {
    font-size: 28px
  }
  .l-section [class*="__subTitle"] {
    font-size: 11px
  }
  .l-section [class*="__lead"] {
    font-size: 14px;
    line-height: 1.8
  }
}
.l-loading {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fbc323
}
body.purebright .l-loading {
  background: #fff
}
.c-anchor {
  position: relative
}
.c-anchor p {
  position: absolute;
  left: 0
}
@media only screen and (min-width:769px) {
  .c-anchor p {
    top: -100px
  }
}
@media only screen and (max-width:768px) {
  .c-anchor p {
    top: -70px
  }
}
.c-card-movie {
  position: relative;
  text-align: center;
  cursor: pointer
}
.c-card-movie__img {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #000
}
.c-card-movie__img img {
  width: 100%;
  opacity: .8
}
.c-card-movie__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  font-family: "Roboto Slab",serif;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 50%
}
@media only screen and (min-width:769px) {
  .c-card-movie__btn {
    width: 72px;
    height: 72px;
    font-size: 12px
  }
}
@media only screen and (max-width:768px) {
  .c-card-movie__btn {
    width: 12.8vw;
    height: 12.8vw;
    font-size: 2.4vw
  }
}
@media only screen and (min-width:769px) {
  .c-card-movie__hdg {
    margin-top: 12px;
    font-size: 16px
  }
}
@media only screen and (max-width:768px) {
  .c-card-movie__hdg {
    margin-top: 2.13333vw;
    font-size: 3.2vw;
    line-height: 1.5;
    text-align: center
  }
}
.c-chart {
  position: relative;
  height: 0
}
.c-chart__ttl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1
}
.c-chart__list {
  position: absolute;
  z-index: 0
}
.c-chart__list a {
  position: relative;
  display: block;
  color: #450505
}
.c-chart__list a:hover {
  z-index: 1
}
.c-chart__list a:hover .c-chart__listImg img {
  -webkit-transform: scale(1.1,1.1);
  transform: scale(1.1,1.1)
}
.c-chart__listImg {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%,0);
  transform: translate(-50%,0);
  position: relative;
  width: 100%
}
.c-chart__listImg img {
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
  -webkit-transition: -webkit-transform .05s ease;
  transition: -webkit-transform .05s ease;
  transition: transform .05s ease;
  transition: transform .05s ease,-webkit-transform .05s ease
}
.c-chart__listImg p {
  height: 0;
  padding-bottom: 337.5%
}
.c-chart__listName {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
  -webkit-transform: translate(0,-45%);
  transform: translate(0,-45%);
  left: 100%;
  white-space: nowrap;
  padding-left: 1.25em;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 2px 2px 0 #fbc323,-2px 2px 0 #fbc323,2px -2px 0 #fbc323,-2px -2px 0 #fbc323
}
.c-chart__listName span {
  position: absolute;
  top: 0;
  left: .25em
}
@media only screen and (min-width:769px) {
  .c-chart {
    width: 100%;
    padding-bottom: 66.66667%;
    background: url(../img/chart/chart_bg.png) center center no-repeat #fbc323;
    background-size: contain
  }
  .c-chart__ttl {
    width: 19.53125%;
    -webkit-transform: translate(-15%,-30%);
    transform: translate(-15%,-30%)
  }
  .c-chart__list {
    width: 3.125%
  }
  .c-chart__listName {
    font-size: 1.01562vw
  }
  .chart-pb-pino .c-chart__listName {
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%)
  }
  .c-chart__list.chart-cs {
    top: 56.25%;
    left: 68.35938%
  }
  .c-chart__list.chart-s {
    top: 70.625%;
    left: 58.20312%
  }
  .c-chart__list.chart-ml {
    top: 55.625%;
    left: 50.15625%
  }
  .c-chart__list.chart-pn {
    top: 45%;
    left: 33.59375%
  }
  .c-chart__list.chart-sd {
    top: 30.625%;
    left: 68.35938%
  }
  .c-chart__list.chart-sb {
    top: 16.25%;
    left: 63.67188%
  }
  .c-chart__list.chart-rl {
    top: 26.875%;
    left: 55.46875%
  }
  .c-chart__list.chart-ms {
    top: 13.75%;
    left: 10.15625%
  }
  .c-chart__list.chart-pm {
    top: 16.25%;
    left: 22.26562%
  }
  .c-chart__list.chart-mb {
    top: 19.375%;
    left: 38.67188%
  }
  .c-chart__list.chart-bd {
    top: 7.5%;
    left: 53.51562%
  }
  .c-chart__list.chart-rmb {
    top: 29.375%;
    left: 27.73438%
  }
  .c-chart__list.chart-bbr {
    top: 62.5%;
    left: 28.125%
  }
  .c-chart__list.chart-pb-pino {
    top: 36.875%;
    left: 78.125%
  }
  .c-chart__list.chart-pb-chardonay {
    top: 5%;
    left: 78.125%
  }
}
@media only screen and (min-width:1200px) {
  .c-chart__listName {
    font-size: 13px
  }
}
@media only screen and (max-width:768px) {
  .c-chart {
    margin-left: -2.13333vw;
    margin-right: -2.13333vw;
    padding-bottom: 162.68657%;
    background: url(../img/chart/chart_bg_sp.png) center center no-repeat #fbc323;
    background-size: contain
  }
  .c-chart__ttl {
    width: 36vw;
    max-width: 220px;
    -webkit-transform: translate(-15%,-50%);
    transform: translate(-15%,-50%)
  }
  .c-chart__list {
    width: 4.8vw
  }
  .c-chart__listName {
    padding-left: 2.25em;
    font-size: 1.2vw
  }
  .chart-sd .c-chart__listName {
    -webkit-transform: translate(-.75em,-200%);
    transform: translate(-.75em,-200%)
  }
  .chart-pb-pino .c-chart__listName {
    -webkit-transform: translate(-125%,-55%);
    transform: translate(-125%,-55%)
  }
  .chart-pb-chardonay .c-chart__listName {
    -webkit-transform: translate(-.75em,-130%);
    transform: translate(-.75em,-130%)
  }
  .c-chart__list.chart-cs {
    top: 64.22018%;
    left: 67.16418%
  }
  .c-chart__list.chart-s {
    top: 74.77064%;
    left: 58.20896%
  }
  .c-chart__list.chart-ml {
    top: 53.66972%;
    left: 54.47761%
  }
  .c-chart__list.chart-pn {
    top: 53.66972%;
    left: 24.62687%
  }
  .c-chart__list.chart-sd {
    top: 33.48624%;
    left: 67.16418%
  }
  .c-chart__list.chart-sb {
    top: 16.97248%;
    left: 63.43284%
  }
  .c-chart__list.chart-rl {
    top: 25.68807%;
    left: 55.97015%
  }
  .c-chart__list.chart-ms {
    top: 7.33945%;
    left: 6.71642%
  }
  .c-chart__list.chart-pm {
    top: 16.97248%;
    left: 13.43284%
  }
  .c-chart__list.chart-mb {
    top: 26.14679%;
    left: 26.86567%
  }
  .c-chart__list.chart-bd {
    top: 6.97248%;
    left: 54.47761%
  }
  .c-chart__list.chart-rmb {
    top: 35.77982%;
    left: 20.14925%
  }
  .c-chart__list.chart-bbr {
    top: 63.76147%;
    left: 33.58209%
  }
  .c-chart__list.chart-pb-pino {
    top: 42.20183%;
    left: 75.37313%
  }
  .c-chart__list.chart-pb-chardonay {
    top: 4.58716%;
    left: 75.37313%
  }
}
.p-homeEc .c-ec {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}
.p-homeEc .c-ec__item a {
  -webkit-transition: opacity .05s ease;
  transition: opacity .05s ease
}
.p-homeEc .c-ec__item a::after {
  display: none
}
.p-homeEc .c-ec__item a:hover {
  opacity: .75
}
@media only screen and (min-width:769px) {
  .p-homeEc .c-ec {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 15px
  }
  .p-homeEc .c-ec__item {
    width: 110px;
    margin: 10px 15px
  }
}
@media only screen and (max-width:768px) {
  .p-homeEc .c-ec {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 2.66667vw
  }
  .p-homeEc .c-ec__item {
    width: 46%;
    margin: 2.13333vw auto
  }
}
.p-productsDetail__ec .c-ec {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.p-productsDetail__ec .c-ec__item a {
  -webkit-transition: opacity .05s ease;
  transition: opacity .05s ease
}
.p-productsDetail__ec .c-ec__item a::after {
  display: none
}
.p-productsDetail__ec .c-ec__item a:hover {
  opacity: .75
}
@media only screen and (min-width:769px) {
  .p-productsDetail__ec .c-ec__item {
    max-width: 23%;
    margin: 0 2% 0 0
  }
}
@media only screen and (max-width:768px) {
  .p-productsDetail__ec .c-ec {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 4vw
  }
  .p-productsDetail__ec .c-ec__item {
    width: 48%;
    margin: 0 0 2.66667vw
  }
}
.c-lineup__ttl {
  position: relative;
  z-index: 0;
  text-align: center;
  font-family: "Roboto Slab",serif;
  font-weight: 600;
  letter-spacing: .06em
}
.c-lineup__ttl p {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: #fff
}
.c-lineup__ttl:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
  width: 96%;
  height: 1px;
  background: #d9d9d9
}
.c-lineup__cards {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%
}
.c-lineup__card {
  position: relative;
  z-index: 0
}
.c-lineup__card:hover {
  z-index: 1
}
.c-lineup__card a {
  display: block;
  text-decoration: none
}
.c-lineup__cardCopy {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%,0);
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,-100%);
  transform: translate(-50%,-100%);
  top: 0;
  width: 100%;
  text-align: center
}
.c-lineup__cardCopy > div:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%,0);
  transform: translate(-50%,0);
  width: 0;
  height: 0;
  border-bottom: solid 12px transparent;
  border-right: solid 8px transparent;
  border-left: solid 8px transparent;
  border-top: solid 12px #000
}
.c-lineup__cardCopy > div p {
  padding: 1.5em 0;
  background: #000;
  color: #fff;
  font-size: 14px
}
.c-lineup__cardImg {
  position: relative;
  z-index: 0;
  height: 0;
  padding-bottom: 100%
}
.c-lineup__cardImgDefault {
  position: relative;
  z-index: 0
}
.c-lineup__cardImgHover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%
}
.c-lineup__cardImgHover img {
  max-width: none;
  width: auto;
  height: 100%
}
.c-lineup__cardName {
  position: relative;
  z-index: 1;
  text-align: center
}
.c-lineup__cardName dt {
  font-family: Roboto,sans-serif;
  font-weight: 600;
  letter-spacing: .06em
}
.c-lineup__card.is-hover .c-lineup__cardCopy {
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: center top;
  perspective-origin: center top;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .2s ease,visibility .2s ease;
  transition: opacity .2s ease,visibility .2s ease
}
.c-lineup__card.is-hover .c-lineup__cardCopy > div {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom
}
.c-lineup__card.is-hover .c-lineup__cardImgDefault {
  opacity: 1;
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
  -webkit-transition: opacity .2s ease .1s,-webkit-transform .2s ease .1s;
  transition: opacity .2s ease .1s,-webkit-transform .2s ease .1s;
  transition: opacity .2s ease .1s,transform .2s ease .1s;
  transition: opacity .2s ease .1s,transform .2s ease .1s,-webkit-transform .2s ease .1s
}
.c-lineup__card.is-hover .c-lineup__cardImgHover {
  opacity: 0;
  -webkit-transform: scale(.8,.8);
  transform: scale(.8,.8);
  -webkit-transition: opacity .1s ease,-webkit-transform .1s ease;
  transition: opacity .1s ease,-webkit-transform .1s ease;
  transition: opacity .1s ease,transform .1s ease;
  transition: opacity .1s ease,transform .1s ease,-webkit-transform .1s ease
}
.c-lineup__card.is-hover .c-lineup__cardImgHover img {
  opacity: 0;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease
}
.c-lineup__card.is-hover.is-current .c-lineup__cardImgDefault {
  opacity: 0
}
.c-lineup__card.is-hover.is-current .c-lineup__cardImgHover {
  opacity: 1;
  -webkit-transform: scale(1,1);
  transform: scale(1,1)
}
.c-lineup__card.is-hover.is-current .c-lineup__cardImgHover img {
  opacity: 1
}
.c-lineup__card.no-hover .c-lineup__cardImgDefault {
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease,-webkit-transform .2s ease
}
@media only screen and (min-width:769px) {
  .c-lineup {
    width: 100%
  }
  .c-lineup.size-half {
    width: 50%
  }
  .c-lineup.size-fourth {
    width: 25%
  }
  .c-lineup__ttl {
    margin: 3.90625% 0
  }
  .c-lineup__ttl p {
    padding: 0 1.5em;
    font-size: 28px
  }
  .c-lineup__card {
    width: 25%;
    padding: 0 7px;
    margin: 15px 0
  }
  .size-half .c-lineup__card {
    width: 50%
  }
  .size-fourth .c-lineup__card {
    width: 100%
  }
  .c-lineup__cardCopy {
    padding: 0 7px 10px
  }
  .c-lineup__cardName {
    margin-top: 8%
  }
  .c-lineup__cardName dt {
    font-size: 16px
  }
  .c-lineup__cardName dd {
    font-size: 13px
  }
  .c-lineup__card.is-hover a:hover .c-lineup__cardCopy {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%)
  }
  .c-lineup__card.is-hover a:hover .c-lineup__cardCopy > div {
    -webkit-transform: rotateX(0);
    transform: rotateX(0)
  }
  .c-lineup__card.is-hover a:hover .c-lineup__cardImgDefault {
    opacity: 0;
    -webkit-transform: scale(.8,.8);
    transform: scale(.8,.8);
    -webkit-transition: opacity .2s ease,-webkit-transform .2s ease;
    transition: opacity .2s ease,-webkit-transform .2s ease;
    transition: opacity .2s ease,transform .2s ease;
    transition: opacity .2s ease,transform .2s ease,-webkit-transform .2s ease
  }
  .c-lineup__card.is-hover a:hover .c-lineup__cardImgHover {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: opacity .1s ease .1s,-webkit-transform .1s ease .1s;
    transition: opacity .1s ease .1s,-webkit-transform .1s ease .1s;
    transition: opacity .1s ease .1s,transform .1s ease .1s;
    transition: opacity .1s ease .1s,transform .1s ease .1s,-webkit-transform .1s ease .1s
  }
  .c-lineup__card.is-hover a:hover .c-lineup__cardImgHover img {
    opacity: 1;
    -webkit-transition: opacity .4s ease .1s;
    transition: opacity .4s ease .1s
  }
  .c-lineup__card.no-hover a:hover .c-lineup__cardImgDefault {
    -webkit-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1)
  }
}
@media only screen and (max-width:768px) {
  .c-lineup__ttl {
    margin: 6.66667vw 0
  }
  .c-lineup__ttl p {
    padding: 0 .75em;
    font-size: 18px
  }
  .c-lineup__card {
    width: 50%;
    padding: 0 7px 6.66667vw
  }
  .c-lineup__card a {
    -webkit-tap-highlight-color: transparent
  }
  .c-lineup__cardCopy {
    padding: 0 7px 10px
  }
  .c-lineup__cardCopy > div p {
    padding: 1em 0;
    font-size: 12px
  }
  .c-lineup__cardName {
    margin-top: 4vw
  }
  .c-lineup__cardName dt {
    font-size: 13px
  }
  .c-lineup__cardName dd {
    font-size: 11px
  }
}
.c-lineup__card.lineup-cs .c-lineup__cardImgHover {
  background: #e7340f
}
.c-lineup__card.lineup-s .c-lineup__cardImgHover {
  background: #fbca00
}
.c-lineup__card.lineup-ml .c-lineup__cardImgHover {
  background: #eb6216
}
.c-lineup__card.lineup-pn .c-lineup__cardImgHover {
  background: #cf1c5a
}
.c-lineup__card.lineup-sd .c-lineup__cardImgHover {
  background: #fbc323
}
.c-lineup__card.lineup-sb .c-lineup__cardImgHover {
  background: #00a7d9
}
.c-lineup__card.lineup-rl .c-lineup__cardImgHover {
  background: #ede000
}
.c-lineup__card.lineup-ms .c-lineup__cardImgHover {
  background: #00aca6
}
.c-lineup__card.lineup-pm .c-lineup__cardImgHover {
  background: #c9617f
}
.c-lineup__card.lineup-mb .c-lineup__cardImgHover {
  background: #3699a1
}
.c-lineup__card.lineup-bd .c-lineup__cardImgHover {
  background: #ad9d14
}
.c-lineup__card.lineup-pb-pino .c-lineup__cardImgHover {
  background: #d14c71
}
.c-lineup__card.lineup-pb-chardonay .c-lineup__cardImgHover {
  background: #edd758
}
.c-modal {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0
}
.c-modal__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 1
}
.c-modal__overlay {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8)
}
.c-modal.is-appear {
  visibility: visible;
  opacity: 1
}
@media only screen and (min-width:769px) {
  .c-modal__inner {
    width: 96%
  }
}
@media only screen and (max-width:768px) {
  .c-modal__inner {
    width: 92%;
    height: 92%;
    margin-top: 6.66667vw
  }
}
@media only screen and (min-width:769px) {
  .c-modal.type-chart .c-modal__inner {
    max-width: 1200px
  }
}
@media only screen and (max-width:768px) {
  .c-modal.type-chart .c-modal__inner {
    max-width: 550px
  }
}
.c-news__card:first-child {
  margin-top: 0
}
.c-news__card dt {
  font-size: 12px;
  font-family: "Roboto Slab",serif;
  font-weight: 400;
  letter-spacing: .06em
}
.c-news__card dd {
  font-size: 13px
}
.c-news__card dd a {
  text-decoration: none
}
.c-news__card dd a:hover {
  text-decoration: underline
}
@media only screen and (min-width:769px) {
  .c-news__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 2em 0
  }
  .c-news__card dt {
    width: 100px;
    -ms-flex-negative: 0;
    flex-shrink: 0
  }
  .c-news__card dd {
    width: 75%
  }
}
@media only screen and (max-width:768px) {
  .c-news__card {
    margin: 1.5em 0
  }
  .c-news__card dt {
    margin-bottom: .5em;
    font-size: 11px
  }
  .c-news__card dd {
    font-size: 13px
  }
}
.c-note {
  font-size: 12px
}
.c-note li {
  position: relative;
  font-size: 12px;
  padding-left: 1.25em
}
.c-note li span {
  position: absolute;
  top: 0;
  left: 0
}
.c-pagetop {
  display: none
}
@media only screen and (min-width:769px) {
  .c-pagetop {
    display: block;
    position: fixed;
    z-index: 99;
    right: 40px;
    bottom: 40px;
    font-family: "Roboto Slab",serif;
    font-weight: 600;
    letter-spacing: .06em;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .5s ease 0s,visibility .5s ease 0s;
    transition: opacity .5s ease 0s,visibility .5s ease 0s
  }
  .c-pagetop a {
    display: block
  }
  .c-pagetop p {
    position: relative;
    z-index: 1;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    line-height: 1
  }
  .c-pagetop i {
    display: block;
    position: relative;
    z-index: 0;
    width: 1px;
    height: 120px;
    margin: 0 auto;
    margin-bottom: 1em
  }
  .c-pagetop i:after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    background: #000;
    -webkit-animation: scrollLineTop 3s ease 0s infinite normal;
    animation: scrollLineTop 3s ease 0s infinite normal
  }
  .c-pagetop.is-in {
    opacity: 1;
    visibility: visible
  }
}
@-webkit-keyframes scrollLineTop {
  0% {
    top: 0;
    height: 100%
  }
  33% {
    top: 0;
    height: 0%
  }
  34% {
    top: 100%;
    height: 0%
  }
  66% {
    top: 0;
    height: 100%
  }
  100% {
    top: 0;
    height: 100%
  }
}
@keyframes scrollLineTop {
  0% {
    top: 0;
    height: 100%
  }
  33% {
    top: 0;
    height: 0%
  }
  34% {
    top: 100%;
    height: 0%
  }
  66% {
    top: 0;
    height: 100%
  }
  100% {
    top: 0;
    height: 100%
  }
}
.c-playlist__tit {
  margin-bottom: 1em;
  font-weight: 600
}
.c-playlist .vjs-playlist {
  background: #f0ebde
}
.c-playlist .vjs-playlist::-webkit-scrollbar {
  width: 2px
}
.c-playlist .vjs-playlist::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.15);
  border-radius: 0
}
.c-playlist .vjs-dock-shelf,
.c-playlist .vjs-dock-text {
  display: none
}
.c-playlist .vjs-playlist-item {
  outline: 0
}
.c-playlist .vjs-playlist-name {
  color: #333;
  font-size: 12px;
  line-height: 1.5;
  overflow: visible;
  text-overflow: clip;
  white-space: normal
}
.c-playlist .vjs-playlist-description {
  display: none
}
.c-playlist__feature {
  margin-top: 1.5em
}
@media only screen and (min-width:769px) {
  .c-playlist {
    max-width: 960px;
    margin: 0 auto
  }
  .c-playlist__tit {
    font-size: 22px
  }
  .c-playlist__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
  }
  .c-playlist__video {
    width: 68.75%
  }
  .c-playlist .vjs-playlist {
    width: 29.16667%;
    min-width: 0
  }
  .c-playlist__feature {
    font-size: 14px
  }
}
@media only screen and (max-width:768px) {
  .c-playlist__tit {
    font-size: 18px
  }
  .c-playlist__inner {
    max-width: 665px;
    margin: 0 auto
  }
  .c-playlist .vjs-playlist {
    margin-top: 1em
  }
}
@-webkit-keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
  }
  50% {
    -webkit-transform: translate(0,19px);
    transform: translate(0,19px)
  }
  100% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
  }
}
@keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
  }
  50% {
    -webkit-transform: translate(0,19px);
    transform: translate(0,19px)
  }
  100% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
  }
}
@-webkit-keyframes fuwafuwa-large {
  0% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
  }
  50% {
    -webkit-transform: translate(0,23px);
    transform: translate(0,23px)
  }
  100% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
  }
}
@keyframes fuwafuwa-large {
  0% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
  }
  50% {
    -webkit-transform: translate(0,23px);
    transform: translate(0,23px)
  }
  100% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
  }
}
@-webkit-keyframes fuwafuwa-rotate {
  0% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg)
  }
  50% {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg)
  }
  100% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg)
  }
}
@keyframes fuwafuwa-rotate {
  0% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg)
  }
  50% {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg)
  }
  100% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg)
  }
}
.p-purebright-intro__illust .c-purebright-fuwafuwa {
  -webkit-animation: fuwafuwa 5s infinite ease-in-out alternate;
  animation: fuwafuwa 5s infinite ease-in-out alternate;
  -webkit-animation-delay: .7s;
  animation-delay: .7s
}
.p-purebright-intro__copy-txt--1 .c-purebright-fuwafuwa {
  -webkit-animation: fuwafuwa 6s infinite ease-in-out alternate;
  animation: fuwafuwa 6s infinite ease-in-out alternate;
  -webkit-animation-delay: .8s;
  animation-delay: .8s
}
.p-purebright-intro__copy-txt--2 .c-purebright-fuwafuwa {
  -webkit-animation: fuwafuwa 6s infinite ease-in-out alternate;
  animation: fuwafuwa 6s infinite ease-in-out alternate;
  -webkit-animation-delay: .8s;
  animation-delay: .8s
}
.p-purebright-kv__illust .c-purebright-fuwafuwa {
  -webkit-animation: fuwafuwa 5s infinite ease-in-out alternate;
  animation: fuwafuwa 5s infinite ease-in-out alternate;
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}
.p-purebright-about__illust .c-purebright-fuwafuwa {
  -webkit-animation: fuwafuwa 5s infinite ease-in-out alternate;
  animation: fuwafuwa 5s infinite ease-in-out alternate;
  -webkit-animation-delay: .9s;
  animation-delay: .9s
}
.p-purebright-features__illust .c-purebright-fuwafuwa {
  -webkit-animation: fuwafuwa 6s infinite ease-in-out alternate;
  animation: fuwafuwa 6s infinite ease-in-out alternate;
  -webkit-animation-delay: .7s;
  animation-delay: .7s
}
.c-purebright-fuwafuwa img {
  -webkit-animation: fuwafuwa-rotate 6s infinite ease-in-out alternate;
  animation: fuwafuwa-rotate 6s infinite ease-in-out alternate;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
  -webkit-transform-origin: center center;
  transform-origin: center center
}
.p-purebright-kv .type-noir .c-purebright-fuwafuwa-bottle {
  display: block;
  -webkit-animation: fuwafuwa 5s infinite ease-in-out alternate;
  animation: fuwafuwa 5s infinite ease-in-out alternate;
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}
.p-purebright-kv .type-charodonay .c-purebright-fuwafuwa-bottle {
  display: block;
  -webkit-animation: fuwafuwa 5s infinite ease-in-out alternate;
  animation: fuwafuwa 5s infinite ease-in-out alternate;
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}
.p-purebright-about .type-noir .c-purebright-fuwafuwa-bottle {
  display: block;
  -webkit-animation: fuwafuwa 6s infinite ease-in-out alternate;
  animation: fuwafuwa 6s infinite ease-in-out alternate;
  -webkit-animation-delay: .7s;
  animation-delay: .7s
}
.p-purebright-about .type-charodonay .c-purebright-fuwafuwa-bottle {
  display: block;
  -webkit-animation: fuwafuwa 4s infinite ease-in-out alternate;
  animation: fuwafuwa 4s infinite ease-in-out alternate;
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}
.c-purebright-fuwafuwa-bottle img {
  -webkit-animation: fuwafuwa-rotate 5s infinite ease-in-out alternate;
  animation: fuwafuwa-rotate 5s infinite ease-in-out alternate;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
  -webkit-transform-origin: center center;
  transform-origin: center center
}
.c-purebright-hdg {
  color: #376586;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: .16em
}
@media only screen and (min-width:769px) {
  .c-purebright-hdg {
    font-size: 48px
  }
}
@media only screen and (max-width:768px) {
  .c-purebright-hdg {
    font-size: 10.66667vw
  }
}
.c-purebright-play {
  position: relative
}
@media only screen and (min-width:769px) {
  .c-purebright-play {
    width: 80px;
    height: 80px
  }
}
@media only screen and (max-width:768px) {
  .c-purebright-play {
    width: 21.33333vw;
    height: 21.33333vw
  }
}
.c-purebright-play__txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(143,164,180,0.4)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 3px rgba(143, 164, 180, .4));
  filter: drop-shadow(0 0 3px rgba(143, 164, 180, .4))
}
@media only screen and (min-width:769px) {
  .c-purebright-play__txt {
    width: 124px;
    height: 124px
  }
}
@media only screen and (max-width:768px) {
  .c-purebright-play__txt {
    width: 32vw;
    height: 32vw
  }
}
.c-purebright-play__txt img {
  width: 80%;
  margin-left: auto;
  margin-right: 0
}
.c-purebright-play__icon {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,.5);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="10" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(143,164,180,0.4)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 10px rgba(143, 164, 180, .4));
  filter: drop-shadow(0 0 10px rgba(143, 164, 180, .4))
}
@media only screen and (min-width:769px) {
  .c-purebright-play__icon {
    width: 80px;
    height: 80px
  }
}
@media only screen and (max-width:768px) {
  .c-purebright-play__icon {
    width: 21.33333vw;
    height: 21.33333vw;
    margin-top: -2.66667vw;
    border: 1px solid #fff
  }
}
.c-purebright-play__icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-40%,-50%);
  transform: translate(-40%,-50%);
  width: 30%
}
@-webkit-keyframes loop-slide {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }
}
@keyframes loop-slide {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }
}
.c-purebright-wave {
  position: absolute;
  z-index: 0
}
.c-purebright-wave__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 5760px
}
@media only screen and (min-width:769px) {
  .c-purebright-wave__inner {
    width: 5760px
  }
}
.p-purebright__about .c-purebright-wave__inner {
  -webkit-animation: loop-slide 40s infinite linear 1s both;
  animation: loop-slide 40s infinite linear 1s both;
  animation-direction: reverse
}
.p-purebright__movie .c-purebright-wave__inner {
  -webkit-animation: loop-slide 30s infinite linear 1s both;
  animation: loop-slide 30s infinite linear 1s both
}
.p-purebright__features .c-purebright-wave__inner {
  -webkit-animation: loop-slide 40s infinite linear 1s both;
  animation: loop-slide 40s infinite linear 1s both
}
.p-purebright__lineup .c-purebright-wave__inner {
  -webkit-animation: loop-slide 30s infinite linear 1s both;
  animation: loop-slide 30s infinite linear 1s both;
  animation-direction: reverse
}
.p-purebright__footer .c-purebright-wave__inner {
  -webkit-animation: loop-slide 35s infinite linear 1s both;
  animation: loop-slide 35s infinite linear 1s both
}
.c-purebright-wave svg {
  fill: #fff;
  height: 640px
}
.c-slider--news__itemThumb {
  position: relative;
  width: 100%
}
.c-slider--news__itemThumb picture {
  display: block;
  position: relative;
  height: 0;
  padding-bottom: 66.5%
}
.c-slider--news__itemThumb img {
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%
}
.c-slider--news__itemTitle {
  width: 100%
}
.c-slider--news__itemLine {
  display: block;
  position: absolute
}
.c-slider--news__itemLine::before {
  content: "";
  display: block
}
@media only screen and (min-width:769px) {
  .c-slider--news__item {
    padding: 10px 30px 0
  }
  .c-slider--news__item a {
    display: block;
    height: 100%
  }
  .c-slider--news__item a:hover {
    text-decoration: none
  }
  .c-slider--news__item a:hover .c-slider--news__itemArrow {
    opacity: 1
  }
  .c-slider--news__item a:hover .c-slider--news__itemLine::before {
    -webkit-transform: scale(1,1);
    transform: scale(1,1)
  }
  .c-slider--news__itemThumb {
    background: #fbc323
  }
  .c-slider--news__itemThumb img {
    -webkit-transform: translate(-10px,-10px);
    transform: translate(-10px,-10px)
  }
  .c-slider--news__itemArrow {
    display: block;
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    width: 5vw;
    min-width: 45px;
    height: 5vw;
    min-height: 45px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    opacity: 0;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease
  }
  .c-slider--news__itemArrow::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 30%;
    height: 30%;
    background: url(/wine/yellowtail/common/img/parts/arrow_wh.png) center center no-repeat;
    background-size: contain
  }
  .c-slider--news__itemNo {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-weight: 600
  }
  .c-slider--news__itemLine {
    top: 100%;
    width: calc(100% - 60px);
    height: 1px;
    background: #e6e6e6
  }
  .c-slider--news__itemLine::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: gray;
    -webkit-transform: scale(.33,1);
    transform: scale(.33,1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease,-webkit-transform .2s ease
  }
  .c-slider--news__itemTitle {
    padding: 20px 0;
    font-size: 14px
  }
  .c-slider--news__arrow--next,
  .c-slider--news__arrow--prev {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    z-index: 1;
    cursor: pointer;
    background: #fff;
    background: #000;
    border-radius: 50%;
    width: 5vw;
    min-width: 45px;
    height: 5vw;
    min-height: 45px;
    top: 10vw
  }
  .c-slider--news__arrow--next:hover span,
  .c-slider--news__arrow--prev:hover span {
    opacity: .75
  }
  .c-slider--news__arrow--next span,
  .c-slider--news__arrow--prev span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 30%;
    height: 30%;
    background: url(/wine/yellowtail/common/img/parts/arrow_wh.png) center center no-repeat;
    background-size: contain;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease
  }
  .c-slider--news__arrow--prev {
    left: 0;
    -webkit-transform: translate(0,-50%) scale(-1,1);
    transform: translate(0,-50%) scale(-1,1)
  }
  .c-slider--news__arrow--next {
    right: 0
  }
}
@media only screen and (min-width:1200px) {
  .c-slider--news__itemArrow {
    bottom: 20px;
    right: 30px;
    width: 60px;
    height: 60px
  }
  .c-slider--news__arrow--next,
  .c-slider--news__arrow--prev {
    width: 60px;
    height: 60px;
    top: 115px
  }
}
@media only screen and (max-width:768px) {
  .c-slider--news__item {
    padding: 5.33333vw 0;
    margin-right: 5.33333vw;
    margin-left: 5.33333vw;
    border-bottom: 1px solid #d9d9d9
  }
  .c-slider--news__item a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
  [data-state="0"] .c-slider--news__item:nth-child(n+4) {
    display: none
  }
  [data-state="1"] .c-slider--news__item:nth-child(n+7) {
    display: none
  }
  [data-state="2"] .c-slider--news__item:nth-child(n+6) {
    display: block
  }
  .c-slider--news__itemThumb {
    padding-right: 2.66667vw
  }
  .c-slider--news__itemArrow {
    display: none
  }
  .c-slider--news__itemNo {
    display: none
  }
  .c-slider--news__itemTitle {
    padding-left: 2.66667vw;
    padding-bottom: 5.33333vw;
    font-size: 14px
  }
  .c-slider--news__itemLine {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 3.2vw;
    height: 3.2vw;
    background: url(/wine/yellowtail/common/img/parts/arrow_bk.png) center center no-repeat;
    background-size: contain;
    opacity: .8
  }
}
.c-slider--purebright .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
.c-slider--purebright .slick-dots li {
  margin: 0 5px;
  line-height: 1
}
.c-slider--purebright .slick-dots li.slick-active button {
  background: #000
}
.c-slider--purebright .slick-dots li button {
  background: 0 0;
  border: 0;
  outline: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  background: rgba(0,0,0,.1)
}
.c-video {
  position: relative;
  height: 0;
  padding-bottom: 56.25%
}
.c-video__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ddd
}
.p-home:after {
  content: "";
  display: block;
  height: 0;
  padding-bottom: 19.51389%;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url(/wine/yellowtail/common/img/parts/bottles.png);
  background-color: #fbc323;
  background-size: cover
}
.p-homeMv {
  position: relative;
  background: #fbc323
}
.p-homeMv__inner {
  position: relative
}
.p-homeMv__visual {
  position: relative;
  opacity: 0
}
.p-homeMv__visual.is-in {
  opacity: 1
}
.p-homeMv__visualImg {
  position: relative;
  z-index: 0
}
.p-homeMv__visualTxt1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3
}
.p-homeMv__visualTxt2 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1
}
.p-homeMv__visualCopy {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2
}
.p-homeMv__txt {
  font-family: "Roboto Slab",serif;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1
}
.p-homeMv__scroll {
  position: absolute;
  bottom: 0;
  width: 1em;
  font-family: "Roboto Slab",serif;
  font-weight: 600;
  letter-spacing: .06em
}
.p-homeMv__scroll p {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  z-index: 1;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1
}
.p-homeMv__scroll i {
  display: block;
  position: relative;
  z-index: 0;
  width: 1px;
  margin: 0 auto;
  margin-top: 1em
}
.p-homeMv__scroll i:after,
.p-homeMv__scroll i:before {
  content: "";
  display: block;
  width: 1px
}
.p-homeMv__scroll i:before {
  background: #000
}
.p-homeMv__scroll i:after {
  position: absolute;
  top: 0;
  background: #fbc323;
  -webkit-animation: scrollLine 3s ease 0s infinite normal;
  animation: scrollLine 3s ease 0s infinite normal
}
@media only screen and (min-width:769px) {
  .p-homeMv {
    padding: 3.125% 3.125%
  }
  .p-homeMv__inner {
    max-width: 1200px;
    padding: 0 3.90625%;
    margin: 0 auto
  }
  .p-homeMv__visual {
    max-width: 1200px;
    margin: 0 auto
  }
  .p-homeMv__visualImg {
    width: 86.5625%
  }
  .p-homeMv__visualTxt1 {
    width: 46.95312%;
    top: 2.73438%;
    left: 3.90625%
  }
  .p-homeMv__visualTxt2 {
    width: 42.89062%;
    bottom: 11.71875%;
    right: 2.34375%
  }
  .p-homeMv__visualCopy {
    width: 32.34375%;
    bottom: 0
  }
  .p-homeMv__txt {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    -webkit-transform: translate(-15px,-50%);
    transform: translate(-15px,-50%);
    left: 40px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    opacity: 0;
    font-size: 12px;
    -webkit-transition: opacity .6s ease,-webkit-transform .6s ease;
    transition: opacity .6s ease,-webkit-transform .6s ease;
    transition: opacity .6s ease,transform .6s ease;
    transition: opacity .6s ease,transform .6s ease,-webkit-transform .6s ease
  }
  .p-homeMv__scroll {
    right: 25px;
    opacity: 0;
    font-size: 12px;
    -webkit-transition: opacity .6s ease,right .6s ease;
    transition: opacity .6s ease,right .6s ease
  }
  .p-homeMv__scroll i:after,
  .p-homeMv__scroll i:before {
    height: 120px
  }
  .p-homeMv.is-in .p-homeMv__txt {
    opacity: 1;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%)
  }
  .p-homeMv.is-in .p-homeMv__scroll {
    right: 40px;
    opacity: 1
  }
}
@media only screen and (min-width:1200px) {
  .p-homeMv {
    padding: 40px 40px
  }
  .p-homeMv__inner {
    padding: 0 50px
  }
}
@media only screen and (max-width:768px) {
  .p-homeMv {
    overflow: hidden
  }
  .p-homeMv__inner {
    padding: 24vw 0 20vw
  }
  .p-homeMv__visual {
    height: 0;
    padding-bottom: 106.66667vw
  }
  .p-homeMv__visualImg {
    width: 113.33333vw
  }
  .p-homeMv__visualTxt1 {
    width: 66.66667vw
  }
  .p-homeMv__visualTxt2 {
    width: 74.66667vw
  }
  .p-homeMv__visualCopy {
    width: 66.66667vw;
    right: 8vw;
    bottom: -2.66667vw
  }
  .p-homeMv__txt {
    position: absolute;
    top: 3.2vw;
    left: 4vw;
    width: 100%;
    font-size: 10px;
    opacity: 0;
    -webkit-transition: opacity .6s ease,top .6s ease;
    transition: opacity .6s ease,top .6s ease
  }
  .p-homeMv__scroll {
    right: 0;
    opacity: 0;
    font-size: 10px;
    -webkit-transition: opacity .6s ease,right .6s ease;
    transition: opacity .6s ease,right .6s ease
  }
  .p-homeMv__scroll i:after,
  .p-homeMv__scroll i:before {
    height: 21.33333vw
  }
  .p-homeMv.is-in .p-homeMv__txt {
    opacity: 1;
    top: 5.33333vw
  }
  .p-homeMv.is-in .p-homeMv__scroll {
    opacity: 1;
    right: 1.86667vw
  }
}
@-webkit-keyframes scrollLine {
  0% {
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%)
  }
  66% {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%)
  }
  100% {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%)
  }
}
@keyframes scrollLine {
  0% {
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%)
  }
  66% {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%)
  }
  100% {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%)
  }
}
.p-homeNo1 {
  background: #fbc323;
  text-align: center
}
.p-homeNo1__title {
  max-width: 360px;
  margin: 0 auto
}
.p-homeNo1 .c-note {
  margin-top: 2em;
  display: inline-block
}
@media only screen and (min-width:769px) {
  .p-homeNo1 {
    padding-top: 0;
    padding-bottom: 0
  }
  .p-homeNo1__title {
    width: 28.125%
  }
}
@media only screen and (max-width:768px) {
  .p-homeNo1 {
    padding-top: 0
  }
}
.p-homeCopy {
  position: relative;
  background: #fbc323
}
.p-homeCopy .l-section__inner {
  position: relative;
  z-index: 1
}
.p-homeCopy .p-homeCopy__title {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.25;
  font-family: inherit
}
.p-homeCopy__txt {
  line-height: 1.25;
  text-align: center
}
.p-homeCopy__txt p {
  opacity: 0;
  -webkit-transform: translate(0,10px);
  transform: translate(0,10px);
  -webkit-transition: opacity .6s ease 0s,-webkit-transform .6s ease 0s;
  transition: opacity .6s ease 0s,-webkit-transform .6s ease 0s;
  transition: opacity .6s ease 0s,transform .6s ease 0s;
  transition: opacity .6s ease 0s,transform .6s ease 0s,-webkit-transform .6s ease 0s
}
.p-homeCopy__txt.is-in p {
  opacity: 1;
  -webkit-transform: translate(0,0);
  transform: translate(0,0)
}
.p-homeCopy__txt.is-in p:nth-child(1) {
  -webkit-transition: opacity 1.5s ease .15s,-webkit-transform 1.5s ease .15s;
  transition: opacity 1.5s ease .15s,-webkit-transform 1.5s ease .15s;
  transition: opacity 1.5s ease .15s,transform 1.5s ease .15s;
  transition: opacity 1.5s ease .15s,transform 1.5s ease .15s,-webkit-transform 1.5s ease .15s
}
.p-homeCopy__txt.is-in p:nth-child(2) {
  -webkit-transition: opacity 1.5s ease .3s,-webkit-transform 1.5s ease .3s;
  transition: opacity 1.5s ease .3s,-webkit-transform 1.5s ease .3s;
  transition: opacity 1.5s ease .3s,transform 1.5s ease .3s;
  transition: opacity 1.5s ease .3s,transform 1.5s ease .3s,-webkit-transform 1.5s ease .3s
}
.p-homeCopy__txt.is-in p:nth-child(3) {
  -webkit-transition: opacity 1.5s ease .45s,-webkit-transform 1.5s ease .45s;
  transition: opacity 1.5s ease .45s,-webkit-transform 1.5s ease .45s;
  transition: opacity 1.5s ease .45s,transform 1.5s ease .45s;
  transition: opacity 1.5s ease .45s,transform 1.5s ease .45s,-webkit-transform 1.5s ease .45s
}
.p-homeCopy__txt.is-in p:nth-child(4) {
  -webkit-transition: opacity 1.5s ease .6s,-webkit-transform 1.5s ease .6s;
  transition: opacity 1.5s ease .6s,-webkit-transform 1.5s ease .6s;
  transition: opacity 1.5s ease .6s,transform 1.5s ease .6s;
  transition: opacity 1.5s ease .6s,transform 1.5s ease .6s,-webkit-transform 1.5s ease .6s
}
.p-homeCopy__txt.is-in p:nth-child(5) {
  -webkit-transition: opacity 1.5s ease .75s,-webkit-transform 1.5s ease .75s;
  transition: opacity 1.5s ease .75s,-webkit-transform 1.5s ease .75s;
  transition: opacity 1.5s ease .75s,transform 1.5s ease .75s;
  transition: opacity 1.5s ease .75s,transform 1.5s ease .75s,-webkit-transform 1.5s ease .75s
}
.p-homeCopy__txt.is-in p:nth-child(6) {
  -webkit-transition: opacity 1.5s ease .9s,-webkit-transform 1.5s ease .9s;
  transition: opacity 1.5s ease .9s,-webkit-transform 1.5s ease .9s;
  transition: opacity 1.5s ease .9s,transform 1.5s ease .9s;
  transition: opacity 1.5s ease .9s,transform 1.5s ease .9s,-webkit-transform 1.5s ease .9s
}
.p-homeCopy__txt.is-in p:nth-child(7) {
  -webkit-transition: opacity 1.5s ease 1.05s,-webkit-transform 1.5s ease 1.05s;
  transition: opacity 1.5s ease 1.05s,-webkit-transform 1.5s ease 1.05s;
  transition: opacity 1.5s ease 1.05s,transform 1.5s ease 1.05s;
  transition: opacity 1.5s ease 1.05s,transform 1.5s ease 1.05s,-webkit-transform 1.5s ease 1.05s
}
.p-homeCopy__txt.is-in p:nth-child(8) {
  -webkit-transition: opacity 1.5s ease 1.2s,-webkit-transform 1.5s ease 1.2s;
  transition: opacity 1.5s ease 1.2s,-webkit-transform 1.5s ease 1.2s;
  transition: opacity 1.5s ease 1.2s,transform 1.5s ease 1.2s;
  transition: opacity 1.5s ease 1.2s,transform 1.5s ease 1.2s,-webkit-transform 1.5s ease 1.2s
}
.p-homeCopy__txt.is-in p:nth-child(9) {
  -webkit-transition: opacity 1.5s ease 1.35s,-webkit-transform 1.5s ease 1.35s;
  transition: opacity 1.5s ease 1.35s,-webkit-transform 1.5s ease 1.35s;
  transition: opacity 1.5s ease 1.35s,transform 1.5s ease 1.35s;
  transition: opacity 1.5s ease 1.35s,transform 1.5s ease 1.35s,-webkit-transform 1.5s ease 1.35s
}
.p-homeCopy__txt.is-in p:nth-child(10) {
  -webkit-transition: opacity 1.5s ease 1.5s,-webkit-transform 1.5s ease 1.5s;
  transition: opacity 1.5s ease 1.5s,-webkit-transform 1.5s ease 1.5s;
  transition: opacity 1.5s ease 1.5s,transform 1.5s ease 1.5s;
  transition: opacity 1.5s ease 1.5s,transform 1.5s ease 1.5s,-webkit-transform 1.5s ease 1.5s
}
.p-homeCopy__txt.is-in p:nth-child(11) {
  -webkit-transition: opacity 1.5s ease 1.65s,-webkit-transform 1.5s ease 1.65s;
  transition: opacity 1.5s ease 1.65s,-webkit-transform 1.5s ease 1.65s;
  transition: opacity 1.5s ease 1.65s,transform 1.5s ease 1.65s;
  transition: opacity 1.5s ease 1.65s,transform 1.5s ease 1.65s,-webkit-transform 1.5s ease 1.65s
}
.p-homeCopy__img p {
  -webkit-transform: translate(0,-100px);
  transform: translate(0,-100px);
  opacity: 0;
  -webkit-transition: opacity .6s ease 0s,-webkit-transform .6s ease 0s;
  transition: opacity .6s ease 0s,-webkit-transform .6s ease 0s;
  transition: opacity .6s ease 0s,transform .6s ease 0s;
  transition: opacity .6s ease 0s,transform .6s ease 0s,-webkit-transform .6s ease 0s
}
.p-homeCopy__img.is-in p {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  opacity: 1
}
.p-homeCopy__character {
  position: absolute;
  z-index: 0;
  left: 1%;
  bottom: 5%
}
@media only screen and (min-width:769px) {
  .p-homeCopy {
    padding-bottom: 0
  }
  .p-homeCopy .p-homeCopy__title {
    font-size: 42px
  }
  .p-homeCopy__txt {
    padding-bottom: 11.71875%
  }
  .p-homeCopy__txt p {
    margin: 1.25em 0;
    font-size: 16px
  }
  .p-homeCopy__img {
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(0,33%);
    transform: translate(0,33%);
    width: 17.96875%
  }
  .p-homeCopy__character {
    width: 30.625%;
    max-width: 400px
  }
}
@media only screen and (max-width:768px) {
  .p-homeCopy {
    padding-bottom: 0
  }
  .p-homeCopy .p-homeCopy__title {
    padding-left: .8em;
    font-size: 6.4vw
  }
  .p-homeCopy__txt p {
    margin: 1.25em 0;
    font-size: 13px
  }
  .p-homeCopy__img {
    position: relative;
    width: 42.66667vw;
    margin: 0 4vw 0 auto;
    -webkit-transform: translate(0,20%);
    transform: translate(0,20%)
  }
  .p-homeCopy__character {
    width: 53.33333vw
  }
}
.p-homeEc {
  background: #f2f2f2
}
.p-homeMovie__video-hdg {
  margin-bottom: 1em;
  font-weight: 600;
  text-align: center
}
.p-homeMovie__video-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
@media only screen and (min-width:769px) {
  .p-homeMovie__video-hdg {
    font-size: 22px
  }
  .p-homeMovie__video-list {
    margin-left: -1em;
    margin-right: -1em
  }
  .p-homeMovie__video-item {
    width: 33.33%;
    padding: 1em;
    margin-top: 15px
  }
}
@media only screen and (max-width:768px) {
  .p-homeMovie__video-hdg {
    font-size: 18px
  }
  .p-homeMovie__video-list {
    margin-left: -1.6vw;
    margin-right: -1.6vw
  }
  .p-homeMovie__video-item {
    width: 50%;
    padding: 1.6vw;
    margin-top: 2.66667vw
  }
  .p-homeMovie__video-item:first-child {
    width: 100%
  }
}
.p-homeHistory {
  background: url(/wine/yellowtail/common/img/home/history_bg.jpg) center center no-repeat #000;
  background-size: cover;
  color: #fff
}
@media only screen and (min-width:769px) {
  .p-homeHistory__body {
    max-width: 960px;
    margin: 0 auto
  }
}
.p-homeNews {
  background: #fbc323;
  overflow: hidden
}
.p-homeNews .l-section__inner {
  position: relative
}
.p-homeNews .l-section__inner > * {
  position: relative;
  z-index: 1
}
.p-homeNews .l-section__inner:before {
  content: "";
  display: block;
  height: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(/wine/yellowtail/common/img/parts/character_img.png);
  background-size: contain;
  opacity: .15
}
@media only screen and (min-width:769px) {
  .p-homeNews .l-section__inner:before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 60%;
    height: 120%
  }
  .p-homeNews__body {
    max-width: 960px;
    margin: 0 auto
  }
  .p-homeNews .c-news {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  .p-homeNews .c-news__bnr {
    width: 45.3125%
  }
  .p-homeNews .c-news__cards {
    width: 50%
  }
}
@media only screen and (max-width:768px) {
  .p-homeNews .l-section__inner:before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-75%);
    transform: translate(-50%,-75%);
    width: 100%;
    padding-bottom: 95%
  }
  .p-homeNews .c-news__bnr {
    margin: 2.66667vw 0
  }
}
.p-homeWineopner {
  position: relative;
  background: #f9f9f9
}
@media only screen and (min-width:769px) {
  .p-homeWineopner {
    padding: 8.33333% 5%
  }
}
@media only screen and (max-width:768px) {
  .p-homeWineopner .l-section__inner {
    padding-right: 0;
    padding-left: 0
  }
}
.p-homeWineopnerSlider .slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch
}
.p-homeWineopnerSlider .slick-slide {
  position: relative;
  height: inherit!important
}
@media only screen and (min-width:769px) {
  .p-homeWineopnerSlider {
    max-width: 1440px;
    margin: 0 auto
  }
  .p-homeWineopnerSlider .slick-list {
    overflow: visible
  }
  .p-homeWineopnerSlider__btn {
    display: none
  }
}
@media only screen and (max-width:768px) {
  .p-homeWineopnerSlider .c-slider--news__for {
    min-height: 0;
    -webkit-transition: min-height .8s ease;
    transition: min-height .8s ease
  }
  .p-homeWineopnerSlider__btn {
    position: relative;
    width: 4vw;
    height: 4vw;
    margin: 8vw auto 0
  }
  .p-homeWineopnerSlider__btn::after,
  .p-homeWineopnerSlider__btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: block;
    width: 100%;
    height: 1px;
    background: #333
  }
  .p-homeWineopnerSlider__btn::after {
    -webkit-transition: opacity .8s ease;
    transition: opacity .8s ease
  }
  .p-homeWineopnerSlider__btn::after {
    -webkit-transform: translate(-50%,-50%) rotate(90deg);
    transform: translate(-50%,-50%) rotate(90deg)
  }
  [data-state="2"] + .p-homeWineopnerSlider__btn::after {
    -webkit-transform: translate(-50%,-50%) rotate(0);
    transform: translate(-50%,-50%) rotate(0)
  }
}
.p-homePickup {
  background: #fbc323;
  padding-bottom: 0
}
@media only screen and (min-width:769px) {
  .p-homePickup {
    padding-top: 75px;
    padding-bottom: 200px
  }
}
@media only screen and (max-width:768px) {
  .p-homePickup {
    padding-bottom: 21.33333vw
  }
}
.p-homePickup__item {
  border: 5px solid #fff;
  border-radius: 8px;
  overflow: hidden
}
@media only screen and (min-width:769px) {
  .p-homePickup__item {
    max-width: 960px;
    margin: 0 auto
  }
}
@media only screen and (min-width:769px) {
  .p-homePickup__item:not(:first-child) {
    margin-top: 30px
  }
}
@media only screen and (max-width:768px) {
  .p-homePickup__item:not(:first-child) {
    margin-top: 4vw
  }
}
.p-homePickup__item a {
  display: block;
  -webkit-transition: all .25s cubic-bezier(0,0,.25,1) 0s;
  transition: all .25s cubic-bezier(0,0,.25,1) 0s
}
.p-homePickup__item a:hover {
  opacity: .7
}
.p-homeBnr {
  position: relative
}
.p-homeBnr__item {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%,0);
  transform: translate(-50%,0);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s ease,visibility .3s ease;
  transition: opacity .3s ease,visibility .3s ease
}
.p-homeBnr__item.is-fix {
  position: fixed;
  opacity: 1;
  visibility: visible
}
.p-homeBnr__item.is-disappear {
  opacity: 0!important;
  visibility: hidden!important
}
.p-homeBnr__item-link {
  display: block;
  -webkit-transition: all .25s cubic-bezier(0,0,.25,1) 0s;
  transition: all .25s cubic-bezier(0,0,.25,1) 0s
}
.p-homeBnr__item-link:hover {
  opacity: .7
}
@media only screen and (min-width:769px) {
  .p-homeBnr__item-link {
    width: 960px;
    aspect-ratio: 480/80
  }
}
@media only screen and (max-width:768px) {
  .p-homeBnr__item-link {
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 390/60
  }
}
.p-homeBnr__item-icon {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translate(33%,-33%);
  transform: translate(33%,-33%);
  border-radius: 50%;
  cursor: pointer
}
@media only screen and (min-width:769px) {
  .p-homeBnr__item-icon {
    width: 30px;
    height: 30px
  }
}
@media only screen and (max-width:768px) {
  .p-homeBnr__item-icon {
    width: 8vw;
    height: 8vw
  }
}
.p-homeBnr__item-icon::after,
.p-homeBnr__item-icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 1px;
  background: #000
}
.p-homeBnr__item-icon::before {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg)
}
.p-homeBnr__item-icon::after {
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
  transform: translate(-50%,-50%) rotate(-45deg)
}
.p-productsDetail {
  background: #fbc323
}
.p-productsDetail .l-section__inner {
  position: relative
}
.p-productsDetail .p-productsDetail__title {
  font-family: "Roboto Slab",serif;
  font-weight: 600;
  letter-spacing: .06em
}
@media only screen and (min-width:769px) {
  .p-productsDetail .l-section__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
  }
  .p-productsDetail .p-productsDetail__title {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    -webkit-transform: translate(-150%,-50%);
    transform: translate(-150%,-50%);
    left: 0;
    font-size: 24px
  }
}
@media only screen and (min-width:1200px) {
  .p-productsDetail .p-productsDetail__title {
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%)
  }
}
@media only screen and (max-width:768px) {
  .p-productsDetail .p-productsDetail__title {
    font-size: 21px
  }
}
.p-productsDetail__data .c-note {
  margin-top: 1.5em
}
.p-productsDetail__category {
  font-family: "Roboto Slab",serif;
  font-weight: 400;
  letter-spacing: .06em
}
.p-productsDetail__neme h1 {
  font-family: Roboto,sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.25
}
.p-productsDetail__neme h2 {
  margin-top: 1em
}
.p-productsDetail__copy {
  margin: 1em 0;
  line-height: 1.8
}
.p-productsDetail__txt {
  line-height: 1.8
}
.p-productsDetail__mini dl,
.p-productsDetail__spec dl,
.p-productsDetail__spec2 dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowarp;
  flex-wrap: nowarp;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}
.p-productsDetail__mini dl dt,
.p-productsDetail__spec dl dt,
.p-productsDetail__spec2 dl dt {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0
}
.p-productsDetail__mini dl dt:after,
.p-productsDetail__spec dl dt:after,
.p-productsDetail__spec2 dl dt:after {
  content: ":";
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
  right: 0;
  padding: 0 1em
}
.p-productsDetail__spec {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000
}
.p-productsDetail__spec2 {
  border-bottom: 1px solid #000
}
.p-productsDetail__mini {
  border-bottom: 1px solid #000
}
.p-productsDetail__cap dt span,
.p-productsDetail__recommended dt span,
.p-productsDetail__taste dt span {
  display: inline-block;
  border: 1px solid #000;
  line-height: 1;
  font-weight: 600
}
.p-productsDetail__cap dd,
.p-productsDetail__recommended dd,
.p-productsDetail__taste dd {
  line-height: 1.6
}
.p-productsDetail__cap dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.p-productsDetail__cap dd img {
  width: 45px;
  height: 45px;
  margin-right: 10px
}
.p-productsDetail__ec {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000
}
@media only screen and (min-width:769px) {
  .p-productsDetail__data {
    width: 50%
  }
  .p-productsDetail__data > * {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: 0
  }
  .p-productsDetail__category {
    margin-bottom: 10px;
    font-size: 13px
  }
  .p-productsDetail__neme h1 {
    font-size: 36px
  }
  .p-productsDetail__neme h2 {
    font-size: 14px
  }
  .p-productsDetail__copy {
    font-size: 21px
  }
  .p-productsDetail__mini,
  .p-productsDetail__spec,
  .p-productsDetail__spec2 {
    padding: 20px 0
  }
  .p-productsDetail__mini dl,
  .p-productsDetail__spec dl,
  .p-productsDetail__spec2 dl {
    margin: 10px 0
  }
  .p-productsDetail__mini dl dt,
  .p-productsDetail__spec dl dt,
  .p-productsDetail__spec2 dl dt {
    width: 28.125%;
    font-size: 13px
  }
  .p-productsDetail__mini dl dd,
  .p-productsDetail__spec dl dd,
  .p-productsDetail__spec2 dl dd {
    font-size: 13px
  }
  .p-productsDetail__spec {
    margin-top: 20px
  }
  .p-productsDetail__cap dt,
  .p-productsDetail__recommended dt,
  .p-productsDetail__taste dt {
    margin-bottom: 10px
  }
  .p-productsDetail__cap dt span,
  .p-productsDetail__recommended dt span,
  .p-productsDetail__taste dt span {
    padding: 10px 20px;
    font-size: 13px
  }
  .p-productsDetail__cap dd,
  .p-productsDetail__recommended dd,
  .p-productsDetail__taste dd {
    font-size: 14px
  }
  .p-productsDetail__taste {
    margin-top: 30px
  }
  .p-productsDetail__recommended {
    margin-top: 20px
  }
  .p-productsDetail__cap {
    margin-top: 20px
  }
  .p-productsDetail__ec {
    padding: 20px 0;
    margin-top: 25px
  }
}
@media only screen and (max-width:768px) {
  .p-productsDetail__category {
    margin-bottom: 2.66667vw;
    font-size: 10px
  }
  .p-productsDetail__neme h1 {
    font-size: 26px
  }
  .p-productsDetail__neme h2 {
    font-size: 12px
  }
  .p-productsDetail__copy {
    font-size: 17px
  }
  .p-productsDetail__mini,
  .p-productsDetail__spec,
  .p-productsDetail__spec2 {
    padding: 2.66667vw 0
  }
  .p-productsDetail__mini dl,
  .p-productsDetail__spec dl,
  .p-productsDetail__spec2 dl {
    margin: 1.33333vw 0
  }
  .p-productsDetail__mini dl dt,
  .p-productsDetail__spec dl dt,
  .p-productsDetail__spec2 dl dt {
    width: 29.33333vw;
    font-size: 12px
  }
  .p-productsDetail__mini dl dd,
  .p-productsDetail__spec dl dd,
  .p-productsDetail__spec2 dl dd {
    font-size: 12px
  }
  .p-productsDetail__spec {
    margin-top: 2.66667vw
  }
  .p-productsDetail__cap dt,
  .p-productsDetail__recommended dt,
  .p-productsDetail__taste dt {
    margin-bottom: 1.33333vw
  }
  .p-productsDetail__cap dt span,
  .p-productsDetail__recommended dt span,
  .p-productsDetail__taste dt span {
    padding: 1.33333vw 2.66667vw;
    font-size: 10px
  }
  .p-productsDetail__cap dd,
  .p-productsDetail__recommended dd,
  .p-productsDetail__taste dd {
    font-size: 12px
  }
  .p-productsDetail__taste {
    margin-top: 4vw
  }
  .p-productsDetail__recommended {
    margin-top: 2.66667vw
  }
  .p-productsDetail__cap {
    margin-top: 2.66667vw
  }
  .p-productsDetail__cap dt {
    margin-bottom: 2.66667vw
  }
  .p-productsDetail__ec {
    padding: 1.33333vw 0 2.66667vw;
    margin-top: 4vw
  }
}
.p-productsDetail__photo {
  position: relative;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility .4s ease .15s,opacity .4s ease .15s,-webkit-transform .4s ease .15s;
  transition: visibility .4s ease .15s,opacity .4s ease .15s,-webkit-transform .4s ease .15s;
  transition: visibility .4s ease .15s,opacity .4s ease .15s,transform .4s ease .15s;
  transition: visibility .4s ease .15s,opacity .4s ease .15s,transform .4s ease .15s,-webkit-transform .4s ease .15s
}
.p-productsDetail__photo.is-in {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(0,0);
  transform: translate(0,0)
}
.p-productsDetail__photoImg {
  position: relative;
  top: 0
}
@media only screen and (min-width:769px) {
  .p-productsDetail__photo {
    width: 50%;
    -webkit-transform: translate(0,100px);
    transform: translate(0,100px)
  }
}
@media only screen and (max-width:768px) {
  .p-productsDetail__photo {
    -webkit-transform: translate(0,50px);
    transform: translate(0,50px);
    padding: 10.66667vw 0 6.66667vw
  }
}
.p-products#products-rmb .p-productsDetail__photoImg img {
  width: 30.85202%;
  margin: 0 auto
}
.p-products#products-bbr .p-productsDetail__photoImg img {
  width: 46%;
  margin: 0 auto
}
.p-lineup .l-section__inner {
  position: relative
}
.p-lineup__chart {
  position: absolute;
  top: 0;
  left: 0
}
.p-lineup__chartInner {
  position: relative;
  background: url(/wine/yellowtail/common/img/chart/chart_btn_bg.png) center center no-repeat;
  background-size: contain;
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  -webkit-transition: -webkit-transform .4s ease;
  transition: -webkit-transform .4s ease;
  transition: transform .4s ease;
  transition: transform .4s ease,-webkit-transform .4s ease
}
.p-lineup__chart:hover .p-lineup__chartInner {
  -webkit-transform: rotateY(359deg);
  transform: rotateY(359deg)
}
.p-lineup__chart a {
  display: block;
  position: relative;
  height: 0;
  padding-bottom: 52.63158%
}
.p-lineup__chart dl {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-40%);
  transform: translate(-50%,-40%);
  width: 100%
}
.p-lineup__chart dl dt {
  font-family: "Roboto Slab",serif;
  font-weight: 600;
  letter-spacing: .06em
}
.p-lineup__chart dl dd {
  margin-top: .5em
}
.p-lineup__chart dl dd p {
  position: relative;
  display: inline-block;
  padding: 0 1.5em
}
.p-lineup__chart dl dd p:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
  right: 0;
  width: 1em;
  height: 1em;
  background: url(/wine/yellowtail/common/img/parts/ico_arrow_bk.svg) center center no-repeat;
  background-size: contain
}
@media only screen and (min-width:769px) {
  .p-lineup .l-section__inner {
    max-width: 1320px
  }
  .p-lineup__chartInner {
    width: 247px;
    height: 183px
  }
  .p-lineup__chart dl dt {
    font-size: 24px
  }
  .p-lineup__chart dl dd {
    font-size: 13px
  }
  .p-lineup__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    overflow: hidden
  }
}
@media only screen and (max-width:768px) {
  .p-lineup {
    padding-top: 32vw
  }
  .p-lineup__chart {
    -webkit-transform: translate(0,-75%);
    transform: translate(0,-75%)
  }
  .p-lineup__chartInner {
    width: 44vw;
    height: 29.33333vw
  }
  .p-lineup__chart dl {
    -webkit-transform: translate(-55%,-50%);
    transform: translate(-55%,-50%)
  }
  .p-lineup__chart dl dt {
    font-size: 3.73333vw
  }
  .p-lineup__chart dl dd {
    font-size: 1.33333vw
  }
}
.p-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow: auto;
  visibility: hidden;
  background: rgba(0,0,0,.9);
  opacity: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
html.is-modal .p-modal {
  visibility: visible;
  opacity: 1;
  -webkit-transition: none;
  transition: none
}
.p-modal[data-type=yt] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
.p-modal[data-type=yt] .p-lineup__container {
  padding: 0
}
.p-modal > * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
.p-modal__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity .5s,-webkit-transform .5s;
  transition: opacity .5s,-webkit-transform .5s;
  transition: opacity .5s,transform .5s;
  transition: opacity .5s,transform .5s,-webkit-transform .5s;
  -webkit-transition-delay: .35s;
  transition-delay: .35s;
  -webkit-transform: translate(0,5%);
  transform: translate(0,5%)
}
html.is-modal .p-modal__inner {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-modal__container {
  background: #000
}
.p-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%
}
.p-modal__close {
  position: absolute;
  top: 0;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  background: 0 0;
  border: 0;
  outline: 0
}
.p-modal__close i {
  position: relative
}
.p-modal__close i::after,
.p-modal__close i::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  background: #fff
}
.p-modal__close i::before {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg)
}
.p-modal__close i::after {
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
  transform: translate(-50%,-50%) rotate(-45deg)
}
html.is-modal .p-modal__close {
  opacity: 1
}
@media only screen and (min-width:769px) {
  .p-modal {
    padding: 50px
  }
  .p-modal__inner {
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto
  }
  .p-modal__close {
    right: 0;
    -webkit-transition: background-color .25s;
    transition: background-color .25s;
    -webkit-transform: translate(0,-200%);
    transform: translate(0,-200%)
  }
  .p-modal__close i {
    width: 30px;
    height: 30px
  }
}
@media only screen and (max-width:768px) {
  .p-modal {
    padding: 6.66667vw 0
  }
  .p-modal__inner {
    padding: 0 4vw
  }
  [data-type=yt] .p-modal__inner {
    padding-right: 0;
    padding-left: 0
  }
  .p-modal__close {
    right: 2.66667vw;
    -webkit-transform: translate(0,-150%);
    transform: translate(0,-150%)
  }
  .p-modal__close i {
    width: 5.33333vw;
    height: 5.33333vw
  }
}
.p-card-purebright-move {
  position: relative;
  cursor: pointer
}
.p-card-purebright-move.inview {
  opacity: 0;
  -webkit-transform: translate(0,40px);
  transform: translate(0,40px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-card-purebright-move.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-card-purebright-move__img {
  overflow: hidden;
  z-index: 0;
  overflow: hidden;
  cursor: pointer
}
@media only screen and (min-width:769px) {
  .p-card-purebright-move__img:hover img {
    -webkit-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05)
  }
}
@media only screen and (min-width:769px) {
  .p-card-purebright-move__img img {
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: -webkit-transform .6s;
    transition: -webkit-transform .6s;
    transition: transform .6s;
    transition: transform .6s,-webkit-transform .6s;
    -webkit-transition-timing-function: cubic-bezier(0,0,.25,1);
    transition-timing-function: cubic-bezier(0,0,.25,1)
  }
}
@media only screen and (min-width:769px) {
  .p-card-purebright-move__img {
    border-radius: 8px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-move__img {
    border-radius: 2.13333vw
  }
}
.size-l .p-card-purebright-move__img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="24" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(143,164,180,0.4)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 24px rgba(143, 164, 180, .4));
  filter: drop-shadow(0 0 24px rgba(143, 164, 180, .4))
}
.size-m .p-card-purebright-move__img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="16" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(143,164,180,0.4)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 0 16px rgba(143, 164, 180, .4));
  filter: drop-shadow(0 0 16px rgba(143, 164, 180, .4))
}
.p-card-purebright-move__img picture {
  display: block
}
.p-card-purebright-move__desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1;
  pointer-events: none
}
@media only screen and (min-width:769px) {
  .p-card-purebright-move__desc {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    color: #fff
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-move__desc {
    margin-top: 1.33333vw
  }
}
@media only screen and (min-width:769px) {
  .size-l .p-card-purebright-move__desc {
    margin-left: 5.85938%
  }
}
@media only screen and (min-width:769px) {
  .size-m .p-card-purebright-move__desc {
    margin-left: 6.66667%
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-move__play {
    margin-right: 10.66667vw
  }
}
@media only screen and (min-width:769px) {
  .size-l .p-card-purebright-move__hdg {
    padding-left: 19.53125%
  }
}
@media only screen and (min-width:769px) {
  .size-m .p-card-purebright-move__hdg {
    padding-left: 15%
  }
}
.p-card-purebright-move__hdg dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  white-space: nowrap
}
@media only screen and (min-width:769px) {
  .p-card-purebright-move__hdg dt {
    font-size: 13px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-move__hdg dt {
    font-size: 2.66667vw;
    color: #546571
  }
}
.p-card-purebright-move__hdg dt::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-left: 25px
}
@media only screen and (min-width:769px) {
  .p-card-purebright-move__hdg dt::after {
    background: #fff
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-move__hdg dt::after {
    background: #546571
  }
}
.p-card-purebright-move__hdg dd {
  line-height: 1.5
}
@media only screen and (min-width:769px) {
  .p-card-purebright-move__hdg dd {
    margin-top: 10px;
    font-size: 18px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-move__hdg dd {
    margin-top: 1.6vw;
    font-size: 3.73333vw;
    color: #546571
  }
}
.p-card-purebright-feature {
  position: relative
}
.p-card-purebright-feature.inview {
  opacity: 0;
  -webkit-transform: translate(0,40px);
  transform: translate(0,40px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-card-purebright-feature.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-card-purebright-feature__hdg {
  line-height: 1.6
}
@media only screen and (min-width:769px) {
  .p-card-purebright-feature__hdg {
    font-size: 20px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-feature__hdg {
    font-size: 5.33333vw
  }
}
.p-card-purebright-feature__str {
  position: absolute
}
@media only screen and (min-width:769px) {
  .p-card-purebright-feature__str {
    width: 85px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-feature__str {
    right: 0;
    width: 24.53333vw
  }
}
@media only screen and (min-width:769px) {
  .index-1 .p-card-purebright-feature__str {
    top: -50px;
    right: 0
  }
}
@media only screen and (max-width:768px) {
  .index-1 .p-card-purebright-feature__str {
    top: -9.33333vw
  }
}
@media only screen and (min-width:769px) {
  .index-2 .p-card-purebright-feature__str {
    top: -40px;
    left: -50px
  }
}
@media only screen and (max-width:768px) {
  .index-2 .p-card-purebright-feature__str {
    top: 0
  }
}
@media only screen and (min-width:769px) {
  .index-3 .p-card-purebright-feature__str {
    top: -50px;
    right: 10px
  }
}
@media only screen and (max-width:768px) {
  .index-3 .p-card-purebright-feature__str {
    top: -8vw
  }
}
.p-card-purebright-feature__txt {
  line-height: 1.71429
}
@media only screen and (min-width:769px) {
  .p-card-purebright-feature__txt {
    margin-top: 14px;
    font-size: 14px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-feature__txt {
    margin-top: 3.73333vw;
    font-size: 3.73333vw
  }
}
@media only screen and (min-width:769px) {
  .p-card-purebright-feature__note {
    margin-top: 20px;
    font-size: 12px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-feature__note {
    margin-top: 6.66667vw;
    font-size: 3.2vw
  }
}
.p-card-purebright-feature__note.inview {
  opacity: 0;
  -webkit-transform: translate(0,40px);
  transform: translate(0,40px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-card-purebright-feature__note.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-card-purebright-product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}
.p-card-purebright-product__desc.inview {
  opacity: 0;
  -webkit-transform: translate(0,40px);
  transform: translate(0,40px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-card-purebright-product__desc.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-card-purebright-product__name-en {
  color: #376586;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: .12em
}
@media only screen and (min-width:769px) {
  .p-card-purebright-product__name-en {
    font-size: 32px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-product__name-en {
    font-size: 6.4vw
  }
}
.p-card-purebright-product__name-jp {
  line-height: 1.5
}
@media only screen and (min-width:769px) {
  .p-card-purebright-product__name-jp {
    margin-top: 15px;
    font-size: 14px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-product__name-jp {
    margin-top: 4vw;
    font-size: 3.73333vw
  }
}
.p-card-purebright-product__data {
  border-top: 1px solid #000
}
@media only screen and (min-width:769px) {
  .p-card-purebright-product__data {
    margin-top: 15px;
    padding-top: 20px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-product__data {
    margin-top: 4vw;
    padding-top: 5.33333vw
  }
}
.p-card-purebright-product__data-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  line-height: 1.5
}
@media only screen and (min-width:769px) {
  .p-card-purebright-product__data-row ~ .p-card-purebright-product__data-row {
    margin-top: 15px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-product__data-row ~ .p-card-purebright-product__data-row {
    margin-top: 4vw
  }
}
@media only screen and (min-width:769px) {
  .p-card-purebright-product__data-row dt {
    width: 130px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: 13px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-product__data-row dt {
    width: 32vw;
    font-size: 3.46667vw;
    -ms-flex-negative: 0;
    flex-shrink: 0
  }
}
@media only screen and (min-width:769px) {
  .p-card-purebright-product__data-row dd {
    font-size: 13px
  }
}
@media only screen and (max-width:768px) {
  .p-card-purebright-product__data-row dd {
    font-size: 3.46667vw
  }
}
.p-purebright {
  position: relative;
  background: #f5f8f9;
  height: 100vh
}
@media only screen and (min-width:769px) {
  .p-purebright {
    min-height: 600px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright {
    min-height: 400px
  }
}
.is-intro-end .p-purebright {
  height: unset;
  min-height: unset
}
.p-purebright__intro {
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  background: #f5f8f9;
  pointer-events: none;
  -webkit-transition: opacity 1.2s cubic-bezier(0,0,.25,1) .8s;
  transition: opacity 1.2s cubic-bezier(0,0,.25,1) .8s
}
.is-intro-end .p-purebright__intro {
  opacity: 0
}
.p-purebright__intro .c-purebright-wave {
  top: 0
}
.p-purebright__container {
  visibility: hidden
}
.is-intro-end .p-purebright__container {
  visibility: visible;
  height: auto
}
.p-purebright__about {
  position: relative
}
@media only screen and (min-width:769px) {
  .p-purebright__about {
    padding-top: 100px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__about {
    padding-top: 40vw
  }
}
.p-purebright__about::before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #fff
}
@media only screen and (min-width:769px) {
  .p-purebright__about::before {
    height: 200px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__about::before {
    height: 226.66667vw
  }
}
.p-purebright__about .p-purebright-about {
  position: relative;
  z-index: 1
}
@media only screen and (min-width:769px) {
  .p-purebright__about .c-purebright-wave {
    bottom: 200px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__about .c-purebright-wave {
    bottom: 226.66667vw
  }
}
.p-purebright__movie {
  position: relative
}
@media only screen and (min-width:769px) {
  .p-purebright__movie {
    padding-top: 100px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__movie {
    padding-top: 18.66667vw
  }
}
.p-purebright__movie::before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  background: #fff
}
@media only screen and (min-width:769px) {
  .p-purebright__movie::before {
    height: 101px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__movie::before {
    height: 173.33333vw;
    -webkit-transform: translate(0,-99%);
    transform: translate(0,-99%);
    background: #f5f8f9
  }
}
.p-purebright__movie .p-purebright-movie {
  position: relative;
  z-index: 1
}
@media only screen and (min-width:769px) {
  .p-purebright__movie .c-purebright-wave {
    top: 100px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__movie .c-purebright-wave {
    top: -173.33333vw
  }
}
.p-purebright__features {
  position: relative
}
@media only screen and (min-width:769px) {
  .p-purebright__features {
    margin-top: 120px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__features {
    padding-top: 21.33333vw
  }
}
.p-purebright__features::before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #fff
}
@media only screen and (min-width:769px) {
  .p-purebright__features::before {
    height: 100px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__features::before {
    height: 93.33333vw
  }
}
.p-purebright__features .p-purebright-features {
  position: relative;
  z-index: 1
}
@media only screen and (min-width:769px) {
  .p-purebright__features .c-purebright-wave {
    bottom: 100px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__features .c-purebright-wave {
    bottom: 93.33333vw
  }
}
.p-purebright__lineup {
  position: relative
}
@media only screen and (min-width:769px) {
  .p-purebright__lineup {
    padding-top: 35px
  }
}
.p-purebright__lineup::before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  background: #fff
}
@media only screen and (min-width:769px) {
  .p-purebright__lineup::before {
    height: 51px
  }
}
.p-purebright__lineup .p-purebright-lineup {
  position: relative;
  z-index: 1
}
@media only screen and (min-width:769px) {
  .p-purebright__lineup .c-purebright-wave {
    top: 50px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__lineup .c-purebright-wave {
    top: -26.66667vw
  }
}
.p-purebright__footer {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
@media only screen and (min-width:769px) {
  .p-purebright__footer {
    margin-top: 300px;
    margin-bottom: 150px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__footer {
    padding-top: 21.33333vw;
    padding-bottom: 24vw
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__footer::before {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: #fff;
    height: 40vw
  }
}
.p-purebright__footer .c-purebright-wave {
  left: 0;
  bottom: 0
}
@media only screen and (min-width:769px) {
  .p-purebright__footer .c-purebright-wave {
    bottom: 0
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__footer .c-purebright-wave {
    bottom: 40vw
  }
}
.p-purebright__footer-logo {
  position: relative;
  z-index: 1
}
@media only screen and (min-width:769px) {
  .p-purebright__footer-logo {
    width: 170px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright__footer-logo {
    width: 32vw
  }
}
.p-purebright-intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: auto
}
@media only screen and (min-width:769px) {
  .p-purebright-intro {
    padding-left: 40px;
    padding-right: 40px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-intro {
    padding-left: 6.4vw;
    padding-right: 6.4vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-intro__container {
    width: 100%;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-intro {
    height: calc(100vh - 184px);
    min-height: 600px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-intro {
    height: calc(100vh - 105px);
    padding: 0;
    min-height: 400px
  }
}
.p-purebright-intro__container {
  position: relative;
  -webkit-transition: all 1s cubic-bezier(0,0,.25,1);
  transition: all 1s cubic-bezier(0,0,.25,1)
}
@media only screen and (min-width:769px) {
  .p-purebright-intro__container {
    height: 100%;
    max-height: 600px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-intro__container {
    width: 100%;
    height: 400px
  }
}
.is-intro-end .p-purebright-intro__container {
  opacity: 0
}
.p-purebright-intro__copy-txt--1,
.p-purebright-intro__copy-txt--2 {
  position: absolute
}
.p-purebright-intro__copy-txt--1.inview {
  opacity: 0;
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: opacity 2s,-webkit-transform 2s;
  transition: opacity 2s,-webkit-transform 2s;
  transition: opacity 2s,transform 2s;
  transition: opacity 2s,transform 2s,-webkit-transform 2s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1);
  -webkit-transition-delay: 1s;
  transition-delay: 1s
}
.p-purebright-intro__copy-txt--1.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
@media only screen and (min-width:769px) {
  .p-purebright-intro__copy-txt--1 {
    left: 6.25%;
    width: 36.09375%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-intro__copy-txt--1 {
    left: 80px;
    width: 462px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-intro__copy-txt--1 {
    top: 2.66667vw;
    left: 2.66667vw;
    width: 61.33333%;
    max-width: 230px
  }
}
.p-purebright-intro__copy-txt--2.inview {
  opacity: 0;
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: opacity 2s,-webkit-transform 2s;
  transition: opacity 2s,-webkit-transform 2s;
  transition: opacity 2s,transform 2s;
  transition: opacity 2s,transform 2s,-webkit-transform 2s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1);
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s
}
.p-purebright-intro__copy-txt--2.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
@media only screen and (min-width:769px) {
  .p-purebright-intro__copy-txt--2 {
    right: 1.95312%;
    bottom: 25px;
    width: 29.6875%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-intro__copy-txt--2 {
    right: 25px;
    width: 380px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-intro__copy-txt--2 {
    bottom: 2.66667vw;
    right: 2.66667vw;
    width: 50.66667%;
    max-width: 190px
  }
}
.p-purebright-intro__illust {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%)
}
@media only screen and (min-width:769px) {
  .p-purebright-intro__illust {
    width: 30.3125%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-intro__illust {
    width: 388px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-intro__illust {
    width: 75.73333%;
    max-width: 284px
  }
}
.p-purebright-intro__illust-img.inview {
  opacity: 0;
  -webkit-transform: translate(0,-50px);
  transform: translate(0,-50px);
  -webkit-transition: opacity 2s,-webkit-transform 2s;
  transition: opacity 2s,-webkit-transform 2s;
  transition: opacity 2s,transform 2s;
  transition: opacity 2s,transform 2s,-webkit-transform 2s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-purebright-intro__illust-img.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-purebright-intro__illust-img img {
  width: 100%
}
@media only screen and (min-width:769px) {
  .p-purebright-kv {
    padding-left: 40px;
    padding-right: 40px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv {
    padding-left: 6.4vw;
    padding-right: 6.4vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__inner {
    width: 100%;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto
  }
}
.p-purebright-kv__inner {
  position: relative
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100vh - 185px)
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__logo {
    position: absolute;
    z-index: 4;
    top: 7.08333%;
    left: 2.34375%;
    width: 32.57812%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-kv__logo {
    top: 51px;
    left: 30px;
    width: 417px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__logo {
    width: 40vw;
    margin-top: 8vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-kv__container {
    height: 720px;
    padding-top: 0
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__products {
    position: relative;
    margin-top: 37.33333vw
  }
}
.p-purebright-kv__product {
  opacity: 0;
  -webkit-transition: opacity 1.5s cubic-bezier(0,0,.25,1);
  transition: opacity 1.5s cubic-bezier(0,0,.25,1)
}
.is-intro-end .p-purebright-kv__product {
  opacity: 1
}
.p-purebright-kv__product.type-noir {
  position: absolute
}
.p-purebright-kv__product.type-noir {
  z-index: 2
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__product.type-noir {
    top: -31.25%;
    right: -26.17188%;
    width: 70.46875%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-kv__product.type-noir {
    top: -225px;
    right: -335px;
    width: 902px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__product.type-noir {
    top: -22.66667vw;
    left: 17.33333vw;
    width: 137.6vw
  }
}
.is-intro-end .p-purebright-kv__product.type-noir {
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s
}
.p-purebright-kv__product.type-charodonay {
  z-index: 1
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__product.type-charodonay {
    position: absolute;
    top: -10.41667%;
    right: 11.71875%;
    width: 42.5%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-kv__product.type-charodonay {
    top: -75px;
    right: 150px;
    width: 544px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__product.type-charodonay {
    position: relative;
    top: 0;
    left: -2.66667vw;
    width: 82.66667vw
  }
}
.is-intro-end .p-purebright-kv__product.type-charodonay {
  -webkit-transition-delay: 1s;
  transition-delay: 1s
}
.p-purebright-kv__off {
  position: absolute;
  z-index: 4;
  opacity: 0;
  -webkit-transition: opacity 1.5s cubic-bezier(0,0,.25,1) 1.4s;
  transition: opacity 1.5s cubic-bezier(0,0,.25,1) 1.4s
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__off {
    top: 9.44444%;
    right: 19.53125%;
    width: 19.92188%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-kv__off {
    top: 68;
    right: 250px;
    width: 255px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__off {
    bottom: 8vw;
    left: 34.66667vw;
    width: 48vw
  }
}
.is-intro-end .p-purebright-kv__off {
  opacity: 1
}
.p-purebright-kv__off img {
  position: relative;
  z-index: 0
}
.p-purebright-kv__copy {
  position: absolute;
  z-index: 3
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__copy {
    top: 25%;
    left: -.39062%;
    width: 43.35938%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-kv__copy {
    top: 180px;
    left: -5px;
    width: 555px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__copy {
    top: 13.33333vw;
    left: -2.13333vw
  }
}
.p-purebright-kv__copy-txt--1,
.p-purebright-kv__copy-txt--2 {
  opacity: 0;
  -webkit-transition: opacity 1.5s cubic-bezier(0,0,.25,1);
  transition: opacity 1.5s cubic-bezier(0,0,.25,1)
}
.is-intro-end .p-purebright-kv__copy-txt--1,
.is-intro-end .p-purebright-kv__copy-txt--2 {
  opacity: 1
}
.p-purebright-kv__copy-txt--1 img,
.p-purebright-kv__copy-txt--2 img {
  width: 100%
}
.p-purebright-kv__copy-txt--1 {
  -webkit-transition-delay: 1.6s;
  transition-delay: 1.6s
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__copy-txt--1 {
    width: 76.75676%;
    margin-left: 20.72072%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__copy-txt--1 {
    width: 73.06667vw;
    margin: 6.66667vw 0 0 4vw
  }
}
.p-purebright-kv__copy-txt--2 {
  -webkit-transition-delay: 1.7s;
  transition-delay: 1.7s
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__copy-txt--2 {
    width: 75.31532%;
    margin-top: -7.20165%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__copy-txt--2 {
    width: 74.93333vw;
    margin-top: 2.66667vw
  }
}
.p-purebright-kv__illust {
  position: absolute;
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity 1.5s cubic-bezier(0,0,.25,1) 2s;
  transition: opacity 1.5s cubic-bezier(0,0,.25,1) 2s
}
.is-intro-end .p-purebright-kv__illust {
  opacity: 1
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__illust {
    top: 1.38889%;
    left: -3.90625%;
    width: 75%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-kv__illust {
    top: 10px;
    left: -50px;
    width: 960px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__illust {
    top: 0;
    left: -13.33333vw;
    width: 128vw;
    margin-top: 4vw
  }
}
.p-purebright-kv__illust img {
  width: 100%
}
@media only screen and (min-width:769px) {
  .p-purebright-kv__note {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 31.25%
  }
}
@media only screen and (min-width:1440px) {
  .p-purebright-kv__note {
    width: 400px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-kv__note {
    margin-top: 4vw
  }
}
.p-purebright-kv__note .c-note {
  color: #546571
}
.p-purebright-kv__note .c-note li {
  padding-left: unset
}
@media only screen and (min-width:769px) {
  .p-purebright-about {
    padding-left: 40px;
    padding-right: 40px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about {
    padding-left: 6.4vw;
    padding-right: 6.4vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-about__container {
    width: 100%;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-about__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
  }
}
.p-purebright-about__img {
  position: relative;
  height: 0
}
@media only screen and (min-width:769px) {
  .p-purebright-about__img {
    width: 50%;
    padding-top: 70.3125%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__img {
    margin-top: 9.33333vw;
    padding-top: 101.33333vw
  }
}
.p-purebright-about__illust.inview {
  opacity: 0;
  -webkit-transform: translate(0,40px);
  transform: translate(0,40px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-purebright-about__illust.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
@media only screen and (min-width:769px) {
  .p-purebright-about__illust {
    position: absolute;
    z-index: 5;
    top: 57.77778%;
    right: 13.75%;
    width: 60.46875%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__illust {
    width: 61.86667vw;
    margin: 10.66667vw auto 0
  }
}
.p-purebright-about__illust img {
  width: 100%
}
.p-purebright-about__product {
  position: absolute
}
.p-purebright-about__product.inview {
  opacity: 0;
  -webkit-transform: translate(0,40px);
  transform: translate(0,40px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-purebright-about__product.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-purebright-about__product.type-noir {
  top: 0;
  right: 0;
  z-index: 3
}
@media only screen and (min-width:769px) {
  .p-purebright-about__product.type-noir {
    right: 18.4375%;
    width: 48.90625%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__product.type-noir {
    right: -2.66667vw;
    width: 43.73333vw
  }
}
.p-purebright-about__product.type-charodonay {
  bottom: 0;
  z-index: 1
}
@media only screen and (min-width:769px) {
  .p-purebright-about__product.type-charodonay {
    left: -18.75%;
    width: 50.9375%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__product.type-charodonay {
    left: -2.66667vw;
    width: 45.6vw
  }
}
.p-purebright-about__bubble {
  position: absolute
}
.p-purebright-about__bubble.inview {
  opacity: 0;
  -webkit-transform: translate(0,20px);
  transform: translate(0,20px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-purebright-about__bubble.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-purebright-about__bubble::before {
  content: "";
  display: block;
  height: 0
}
.p-purebright-about__bubble img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}
.p-purebright-about__bubble.index-1 {
  z-index: 2
}
@media only screen and (min-width:769px) {
  .p-purebright-about__bubble.index-1 {
    bottom: -6.66667%;
    left: -23.4375%;
    width: 79.6875%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__bubble.index-1 {
    bottom: -9.33333vw;
    left: -8vw;
    width: 70.93333vw
  }
}
.p-purebright-about__bubble.index-1::before {
  padding-bottom: 127.05882%
}
.p-purebright-about__bubble.index-2 {
  z-index: 0
}
@media only screen and (min-width:769px) {
  .p-purebright-about__bubble.index-2 {
    top: 0;
    right: 3.125%;
    width: 74.53125%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__bubble.index-2 {
    top: 0;
    right: -14.66667vw;
    width: 70.66667vw
  }
}
.p-purebright-about__bubble.index-2::before {
  padding-bottom: 100%
}
.p-purebright-about__str--1,
.p-purebright-about__str--2 {
  z-index: 4
}
.p-purebright-about__str--1.inview,
.p-purebright-about__str--2.inview {
  opacity: 0;
  -webkit-transform: translate(0,40px);
  transform: translate(0,40px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-purebright-about__str--1.inview.is-in,
.p-purebright-about__str--2.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-purebright-about__str--1 {
  position: absolute
}
@media only screen and (min-width:769px) {
  .p-purebright-about__str--1 {
    top: 15.55556%;
    left: 3.125%;
    width: 40.625%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__str--1 {
    width: 42.66667vw;
    top: 62.66667vw;
    right: -5.33333vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-about__str--2 {
    position: absolute;
    top: 83.33333%;
    left: 46.875%;
    width: 31.71875%
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__str--2 {
    width: 45.33333vw;
    margin-top: 8vw;
    margin-left: 26.66667vw
  }
}
.p-purebright-about__desc {
  text-align: center
}
@media only screen and (min-width:769px) {
  .p-purebright-about__desc {
    width: 50%
  }
}
.p-purebright-about__desc.inview {
  opacity: 0;
  -webkit-transform: translate(0,50px);
  transform: translate(0,50px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-purebright-about__desc.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
.p-purebright-about__logo {
  margin: 0 auto
}
@media only screen and (min-width:769px) {
  .p-purebright-about__logo {
    width: 150px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__logo {
    width: 40vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-about__logo::after {
    content: "";
    display: block;
    width: 1px;
    height: 120px;
    margin: 40px auto;
    background: #b1c1cc
  }
}
.p-purebright-about__logo img {
  width: 100%
}
.p-purebright-about__copy {
  color: #376586;
  font-weight: 300;
  line-height: 1.4
}
@media only screen and (min-width:769px) {
  .p-purebright-about__copy {
    font-size: 40px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__copy {
    margin-top: 10.66667vw;
    font-size: 8.53333vw
  }
}
.p-purebright-about__txt {
  color: #7a8e9b;
  line-height: 2
}
@media only screen and (min-width:769px) {
  .p-purebright-about__txt {
    margin-top: 35px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__txt {
    margin-top: 10.66667vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-about__txt p {
    font-size: 16px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__txt p {
    font-size: 3.73333vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-about__txt p ~ p {
    margin-top: 30px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__txt p ~ p {
    margin-top: 7.46667vw
  }
}
.p-purebright-about__note {
  color: #7a8e9b;
  line-height: 1.5
}
@media only screen and (min-width:769px) {
  .p-purebright-about__note {
    margin-top: 35px;
    font-size: 12px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-about__note {
    margin-top: 10.66667vw;
    font-size: 3.2vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-movie {
    padding-left: 40px;
    padding-right: 40px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-movie {
    padding-left: 6.4vw;
    padding-right: 6.4vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-movie__container {
    width: 100%;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto
  }
}
.p-purebright-movie__hdg {
  text-align: right
}
.p-purebright-movie__hdg dt {
  white-space: nowrap
}
@media only screen and (min-width:769px) {
  .p-purebright-movie__str {
    width: 202px;
    margin: 8px 120px 0 auto
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-movie__str {
    width: 53.86667vw;
    margin: 4vw 10.66667vw 0 auto
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-movie__list {
    margin-top: 40px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-movie__list {
    margin: 13.33333vw -2.66667vw 0
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-movie__item ~ .p-purebright-movie__item {
    margin-top: 6.4vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-movie__item.index-2 {
    margin-top: -60px;
    margin-left: auto;
    margin-right: 0
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-movie__item.index-3 {
    margin-top: -40px;
    margin-left: 40px
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-movie__item.index-4 {
    margin-top: -110px;
    margin-left: 600px
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-movie__item.size-l {
    width: 80%
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-movie__item.size-m {
    width: 46.875%
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-features {
    padding-left: 40px;
    padding-right: 40px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-features {
    padding-left: 6.4vw;
    padding-right: 6.4vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-features__container {
    width: 100%;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-features__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-top: 85px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-features__list {
    margin-top: 17.06667vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-features__item {
    width: 30%;
    max-width: 320px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-features__item {
    margin-top: 10.66667vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-features__item.index-2 {
    margin-top: 35px;
    margin-left: 6%
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-features__item.index-3 {
    margin-top: 15px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-features__item.index-3 {
    margin-top: 16vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-features__illust {
    width: 46.875%;
    margin-left: -3.90625%
  }
}
.p-purebright-features__illust.inview {
  opacity: 0;
  -webkit-transform: translate(0,40px);
  transform: translate(0,40px);
  -webkit-transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,-webkit-transform 1s;
  transition: opacity 1s,transform 1s;
  transition: opacity 1s,transform 1s,-webkit-transform 1s;
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1)
}
.p-purebright-features__illust.inview.is-in {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
@media only screen and (min-width:769px) {
  .p-purebright-lineup {
    padding-left: 40px;
    padding-right: 40px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-lineup {
    padding-left: 6.4vw;
    padding-right: 6.4vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-lineup__container {
    width: 100%;
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-lineup__hdg {
    text-align: right
  }
}
.p-purebright-lineup__products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-top: 70px
}
@media only screen and (min-width:769px) {
  .p-purebright-lineup__product {
    width: 29.66102%;
    max-width: 350px
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-lineup__product.type-noir {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-lineup__product.type-noir {
    margin-top: 10.66667vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-lineup__product.type-charodonay {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-lineup__product.type-charodonay {
    margin-top: 14.66667vw
  }
}
@media only screen and (min-width:769px) {
  .p-purebright-lineup__product-img {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    width: 37.45763%;
    max-width: 442px;
    margin-top: -110px
  }
}
@media only screen and (max-width:768px) {
  .p-purebright-lineup__product-img {
    width: 86.4vw;
    margin: 0 auto
  }
}
@media only screen and (min-width:769px) {
  .u-dsp-sp {
    display: none!important
  }
}
@media only screen and (max-width:768px) {
  .u-dsp-pc {
    display: none!important
  }
}
.u-font-lato {
  font-family: Lato,sans-serif
}