@charset "utf-8";

/* 共通 */
img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* mv */
.mv {
  display: flex;
  justify-content: center;
  background-image: url(../images/mv-bg-pc.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .mv {
    background-image: url(../images/mv-bg-sp.jpg);
  }
}

/* MVコンテンツ幅 */
@media screen and (max-width: 768px) {
  .mv__area {
    margin: 0 4vw;
  }
}

/* MV h1 */
.mv h1 {
  position: relative;
  margin: 0 auto;
}

/* 「新」アイコン */
.mv__icon {
  position: absolute;
  top: 99px;
  left: 50px;
}

@media screen and (max-width: 1300px) {
  .mv__icon {
    top: 7.61538461538462vw;
    left: 3.84615384615385vw;
    width: 14.15384615384615%;
  }
}

@media screen and (max-width: 768px) {
  .mv__icon {
    top: 4vw;
    left: 5.06666667vw;
    width: 22.666666667vw;
  }
}


/* lead */
.lead {
  background: -moz-linear-gradient(left, #26bfb6 0%, #3fd4ca 50%, #26bfb6 100%);
  background: -webkit-linear-gradient(left, #26bfb6 0%, #3fd4ca 50%, #26bfb6 100%);
  background: linear-gradient(to right, #26bfb6 0%, #3fd4ca 50%, #26bfb6 100%);
}

.lead__area {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .lead__area {
    max-width: 92vw;
  }
}


/* Point */
.point {
  background-color: #c3e5e4;
  padding-top: 110px;
  padding-bottom: 110px;
}

@media screen and (max-width: 768px) {
  .point {
    padding-top: 13.33333333vw;
    padding-bottom: 13.33333333vw;
  }
}

/* Point コンテンツ幅 */
.point__area {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .point__area {
    max-width: 100%;
    padding-right: 4vw;
    padding-left: 4vw;
  }
}

/* Point タイトル */
.point__ttl {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .point__ttl {
    margin-bottom: 8vw;
  }
}

/* Point リスト部分 */
.point__items {
  background-color: #fff;
  padding: 30px;
}

@media screen and (max-width: 960px) {
  .point__items {
    margin-right: 30px;
    margin-left: 30px;
  }
}

@media screen and (max-width: 768px) {
  .point__items {
    padding: 4vw;
    margin: 0;
  }
}

/* Point 単発 */
.point__item {
  border: 4px solid #26bfb6;
}

@media screen and (max-width: 768px) {
  .point__item {
    border-width: .53333333333333vw;
  }
}

.point__item+.point__item {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .point__item+.point__item {
    margin-top: 4vw;
  }
}

/* Point 中身 */
.point__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .point__inner {
    padding-top: 4vw;
    padding-bottom: 5.33333333vw;
  }
}

/* Point ナンバー */
.point__num {
  display: flex;
  justify-content: center;
  background-color: #26bfb6;
  margin-top: -4px;
  margin-left: -4px;
  margin-right: -4px;
}

@media screen and (max-width: 768px) {
  .point__num {
    margin-top: -.53333333333333vw;
    margin-left: -.53333333333333vw;
    margin-right: -.53333333333333vw;
  }
}

/* Point テキストブルー */
.point__head--01,
.point__head--02,
.point__head--03 {
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {

  .point__head--01,
  .point__head--02,
  .point__head--03 {
    margin-bottom: 4vw;
  }
}

/* Point 1 */
.point__head--01 {
  width: 69.28251121076233%;
}

.point__text--01 {
  width: 66.70403587443946%;
}

@media screen and (max-width: 768px) {
  .point__head--01 {
    width: 72.66666666666667vw;
  }

  .point__text--01 {
    width: 68.13333333333333vw;
  }
}

/* Point 2 */
.point__head--02 {
  width: 62.89237668161435%;
}

.point__text--02 {
  width: 58.96860986547085%;
}

@media screen and (max-width: 768px) {
  .point__head--02 {
    width: 66vw;
  }

  .point__text--02 {
    width: 68.8vw;
  }
}

/* Point 2 */
.point__head--03 {
  width: 48.87892376681614%;
}

.point__text--03 {
  width: 79.14798206278027%;
}

@media screen and (max-width: 768px) {
  .point__head--03 {
    width: 51.33333333333333vw;
  }

  .point__text--03 {
    width: 48.26666666666667vw;
  }
}

/* Campaign */
.campaign {
  padding-top: 110px;
  padding-bottom: 110px;
  background-color: #88dcd6;
}

@media screen and (max-width: 768px) {
  .campaign {
    padding-top: 13.33333333333333vw;
    padding-bottom: 13.33333333333333vw;
  }
}

/* campaign コンテンツ幅 */
.campaign__area {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .campaign__area {
    max-width: 100%;
    padding-right: 4vw;
    padding-left: 4vw;
  }
}

/* campaign タイトル */
.campaign__ttl {
  display: flex;
  justify-content: center;
  margin-bottom: 45px;
}

@media screen and (max-width: 768px) {
  .campaign__ttl {
    margin-bottom: 8vw;
  }
}

/* campaign バナーを囲んでいるコンテンツ */
.campaign__items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* campaign バナーを囲んでいるコンテンツ 単発 */
@media screen and (max-width: 768px) {
  .campaign__item {
    max-width: 560px;
    width: 74.66666666666667vw;
  }
}


/* Syouhin */
.syouhin {
  background-image: url(../images/syouhin-bg-pc.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding-top: 110px;
  padding-bottom: 110px;
  margin-bottom: 70px;
}

@media screen and (max-width: 768px) {
  .syouhin {
    background-image: url(../images/syouhin-bg-sp.jpg);
    padding-top: 13.33333333vw;
    padding-bottom: 13.33333333vw;
    margin-bottom: 18.66666667vw;
  }
}

/* Syouhin コンテンツ幅 */
.syouhin__area {
  position: relative;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 75px;
}

@media screen and (max-width: 960px) {
  .syouhin__area {
    max-width: 100%;
    margin-right: 30px;
    margin-left: 30px;
    padding-bottom: 10.41666666666667vw;
  }
}

@media screen and (max-width: 768px) {
  .syouhin__area {
    margin: 0;
    padding-bottom: 0;
    padding-right: 4vw;
    padding-left: 4vw;
  }
}

/* Syouhin タイトル */
.syouhin__ttl {
  margin-bottom: 60px;
}

@media screen and (max-width: 960px) {
  .syouhin__ttl {
    max-width: 22.08333333vw;
  }
}

@media screen and (max-width: 768px) {
  .syouhin__ttl {
    max-width: 33.6vw;
    margin-bottom: 10vw;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Syouhin テキスト */
@media screen and (max-width: 768px) {
  .syouhin__text {
    margin-bottom: 6.66666667vw;
  }
}

/* Syouhin ビール */
.syouhin__img {
  position: absolute;
  bottom: 0;
  right: 0;
}

@media screen and (max-width: 768px) {
  .syouhin__img {
    position: static;
  }
}


/* cm */
.cm {
  padding-top: 110px;
  padding-bottom: 110px;
  background-color: #88dcd6;
}

@media screen and (max-width: 768px) {
  .cm {
    padding-top: 13.33333333333333vw;
    padding-bottom: 13.33333333333333vw;
  }
}

/* コンテンツ幅 */
.cm__area {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 768px) {
  .cm__area {
    max-width: 100%;
    padding-right: 4vw;
    padding-left: 4vw;
  }
}

/* タイトル */
.cm__ttl {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .cm__ttl {
    margin-bottom: 8vw;
  }
}

.cm__inner {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 80px;
}

@media screen and (max-width: 768px) {
  .cm__inner {
    padding-left: 0;
    padding-right: 0;
    margin-top: 14.66666666666667vw;
  }
}

.cm__items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .cm__items {
    display: block;
    margin-bottom: 14vw;
  }
}

.cm__items:last-child {
  margin-bottom: 0;
}

.cm__item {
  width: 48.93617021276596%;
}

@media screen and (max-width: 768px) {
  .cm__item {
    max-width: 630px;
    width: 84vw;
    margin-right: auto;
    margin-left: auto;
  }

  .cm__item+.cm__item {
    margin-top: 10.66666666666667vw;
  }
}

.cm__item a {
  position: relative;
}

.cm__item .imgcover01 {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.cm__text,
.cm__text--02 {
  display: flex;
  justify-content: center;
  position: relative;
  padding-top: 20px;
}

@media screen and (max-width: 768px) {

  .cm__text,
  .cm__text--02 {
    width: 60vw;
    margin-right: auto;
    margin-left: auto;
    padding-top: 4vw;
  }
}

@media screen and (max-width: 768px) {

  .cm__text--02 {
    width: 58vw;
  }
}

/* 大きい動画部分 */
.cm-movie__inner a {
  position: relative;
  display: block;
  margin-bottom: 15px;
}

@media screen and (max-width:768px) {
  .cm-movie__inner a {
    max-width: 670px;
    width: 89.33333333333333vw;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 4.66666666666667vw;
  }
}

/* 再生アイコン */
.cm-movie__inner a::after {
  content: "";
  position: absolute;
  bottom: 5.524%;
  right: 3.125%;
  max-width: 70px;
  max-height: 70px;
  width: 8.23%;
  height: 14.61%;
  background: url(../../cm/images/play_pc_02.png) no-repeat 50% 50%;
  background-size: contain;
  -webkit-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 25;
}
@media screen and (max-width:768px) {
  .cm-movie__inner a::after {
    background-image: url(../../cm/images/play_sp_02.png);
    bottom: 2.8vw;
    right: 2.93333333333333vw;
    width: 7.33333333333333vw;
    height: 7.33333333333333vw;
  }
}

.cm-movie__inner a .imgcover {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

/* 大きい動画下のテキスト */
.cm-movie__text,
.cm-movie__note {
  color: #fff;
  font-family: "游明朝", YuMincho, "メイリオ", Meiryo, serif, sans-serif;
  text-align: center;
}

/* 動画のタイトル */
.cm-movie__text {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 14px;
}

@media screen and (max-width:768px) {
  .cm-movie__text {
    font-size: 4.8vw;
    line-height: 1.555555555555556;
    margin-bottom: 3.33333333333333vw;
  }
}

/* 動画の説明 */
.cm-movie__note {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  margin-top: -4px;
  margin-bottom: -4px;
}

@media screen and (max-width:768px) {
  .cm-movie__note {
    font-size: 4.26666666666667vw;
    margin-top: -1.06666666666667vw;
    margin-bottom: -1.06666666666667vw;
  }
}

.cm-movie__note+.cm-movie__note {
  margin-top: 35px;
}

@media screen and (max-width:768px) {
  .cm-movie__note+.cm-movie__note {
    margin-top: 8vw;
    margin-left: -1.33333333333333vw;
  }
}

.cm__subttl--01,
.cm__subttl--02 {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
@media screen and (max-width:768px) {
  .cm__subttl--01,
  .cm__subttl--02 { 
    margin-bottom: 8vw;
  } 
}

.cm__subttl--01 picture {
  position: relative;
}
@media screen and (max-width:768px) {
  .cm__subttl--01 picture {
    width: 55.06666666666667vw;
  }
}

.cm__subttl--01 picture::before {
  display: inline-block;
  position: absolute;
  top: -15px;
  left: -87px;
  background-image: url(../images/cm-subttl-icon-pc.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  width: 58px;
  height: 58px;
  content: "";
}
@media screen and (max-width:768px) {
  .cm__subttl--01 picture::before {
    top: -1.33333333333333vw;
    left: -9.33333333333333vw;
    background-image: url(../images/cm-subttl-icon-sp.png);
    width: 6.66666666666667vw;
    height: 6.66666666666667vw;
  }
}

@media screen and (max-width:768px) {
  .cm__subttl--02 picture {
    width: 72vw;
  }
}

/* 出し分け */
.spOnly {
  display: none;
}

@media screen and (max-width:768px) {
  .spOnly {
    display: block;
  }
}