/* Scss Document */
html {
  font-size: 62.5%; }

body {
  background: url("../images/san8re_bg.jpg") center top/100% auto;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-size: 1.6rem; }

header {
  min-height: 100vh; }
  header .wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; }
  header img {
    width: 100%;
    height: auto; }
  header h1 {
    text-align: center;
    width: 100%; }
  header p.introduction {
    position: relative;
    max-width: 1000px;
    background: url("../images/intro_lt.png") left top/285px auto no-repeat, url("../images/intro_rb.png") right bottom/285px auto no-repeat;
    box-sizing: border-box; }
    @media screen and (min-width: 768px) {
      header p.introduction {
        padding: 60px 100px;
        margin: -60px auto 0; } }
    @media screen and (max-width: 767px) {
      header p.introduction {
        width: 90%;
        padding: 8vw 8vw;
        margin: 0 auto 0;
        background: url("../images/intro_lt.png") left top/140px auto no-repeat, url("../images/intro_rb.png") right bottom/140px auto no-repeat; } }
  header nav {
    display: block;
    margin: 40px 0 0; }
    @media screen and (max-width: 767px) {
      header nav {
        margin: 0; } }
    header nav .flex {
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between; }
      @media screen and (max-width: 767px) {
        header nav .flex {
          flex-wrap: wrap; } }
      @media screen and (min-width: 768px) {
        header nav .flex.-start {
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center; }
          header nav .flex.-start li {
            margin: 0 10px; } }
    header nav ul {
      margin: 0;
      padding: 0;
      list-style: none; }
      @media screen and (max-width: 767px) {
        header nav ul {
          margin: 20px 5% 0;
          flex-wrap: wrap; } }
      header nav ul li {
        text-align: center; }
        @media screen and (min-width: 768px) {
          header nav ul li {
            width: 30%; } }
        @media screen and (max-width: 767px) {
          header nav ul li {
            width: 100%;
            margin: 10px 0 0; } }
        header nav ul li a {
          position: relative;
          display: block; }
          header nav ul li a:hover {
            top: 5px;
            opacity: 0.8; }

main {
  text-align: center; }

.en {
  font-family: "athelas", serif;
  font-weight: 400;
  font-style: normal; }
  .en.bold {
    font-weight: 700; }

h2 img {
  width: 100%;
  height: auto; }

.flex {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between; }
  @media screen and (max-width: 767px) {
    .flex {
      flex-wrap: wrap; } }

hr {
  width: 100%;
  max-width: 950px;
  height: 40px;
  margin: 60px auto;
  background: url("../images/separate.png") center center/100% auto no-repeat;
  outline: none;
  border: none; }
  @media screen and (max-width: 767px) {
    hr {
      margin: 40px auto;
      background: url("../images/separate.png") center center/auto 39px no-repeat; } }

.btn_area.-next_mv {
  max-width: 900px;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .btn_area.-next_mv {
      position: absolute;
      left: 0;
      top: 52vw;
      width: 100%;
      margin-left: 10vw; } }
  @media screen and (min-width: 1215px) {
    .btn_area.-next_mv {
      top: 640px;
      margin-left: 135px; } }
  @media screen and (max-width: 767px) {
    .btn_area.-next_mv {
      width: 90%;
      margin: 20px auto 50px; } }
  .btn_area.-next_mv img {
    width: 100%;
    height: auto; }
    @media screen and (min-width: 768px) {
      .btn_area.-next_mv img {
        max-width: 340px;
        width: 30vw; } }

.information {
  max-width: 490px;
  min-height: 144px; }
  @media screen and (min-width: 768px) {
    .information {
      position: absolute;
      left: 0;
      top: 52vw;
      width: 100%;
      margin-left: 5vw;
      background: url("../images/vol2_info_bg.png") left top/100% auto no-repeat; } }
  @media screen and (min-width: 1215px) {
    .information {
      top: 640px;
      margin-left: 80px; } }
  @media screen and (max-width: 767px) {
    .information {
      width: 100%;
      margin: 20px auto 50px;
      background: url("../images/vol2_info_bg_sp.png") left top/100% auto no-repeat; } }
  .information dt {
    padding: 0 20px; }
    .information dt img {
      width: 100%;
      max-width: 290px; }
  .information dd {
    padding: 15px 20px 15px 50px; }
    @media screen and (max-width: 767px) {
      .information dd {
        font-size: 14px;
        padding: 15px 5vw 15px 12vw; } }

.about {
  max-width: 1000px;
  margin: 100px auto 0; }
  @media screen and (max-width: 767px) {
    .about {
      margin: 60px auto 0; } }
  .about .text_area {
    text-align: left;
    width: 49%;
    max-width: 490px; }
    @media screen and (max-width: 767px) {
      .about .text_area {
        width: 100%; } }
  .about h3 {
    font-size: 4rem;
    color: #9C1D05; }
    @media screen and (max-width: 767px) {
      .about h3 {
        font-size: 2.8rem; } }
    .about h3 span {
      font-size: 1.6rem;
      font-weight: bold; }
  .about p {
    margin-top: 20px;
    line-height: 190%; }
    @media screen and (max-width: 767px) {
      .about p {
        font-size: 1.4rem;
        line-height: 160%; } }
    .about p.head_text {
      margin-top: 0;
      color: #9C1D05;
      line-height: 100%; }
  .about .-w100 {
    width: 100%; }
  .about .-left {
    text-align: left; }
  @media screen and (min-width: 768px) {
    .about .image_area {
      width: 46.5%;
      max-width: 465px; } }
  .about .image_area img {
    width: 100%;
    height: auto; }
  @media screen and (min-width: 768px) {
    .about .image_area.-san8re {
      margin-top: 20px; } }
  .about .image_area .credit {
    margin-top: 5px;
    font-size: 14px;
    text-align: right; }
    @media screen and (max-width: 767px) {
      .about .image_area .credit {
        font-size: 13px; } }
  .about .about_san8re {
    margin-top: 40px; }
    @media screen and (min-width: 768px) {
      .about .about_san8re {
        padding: 0 50px; } }
    @media screen and (max-width: 767px) {
      .about .about_san8re {
        width: 90%;
        margin: 40px auto 0; } }
  @media screen and (min-width: 768px) {
    .about .about_saburomaru {
      padding: 0 50px; }
      .about .about_saburomaru .text_area {
        order: 2; }
      .about .about_saburomaru .image_area {
        order: 1; } }
  @media screen and (max-width: 767px) {
    .about .about_saburomaru {
      width: 90%;
      margin: 0 auto 0; } }

.products {
  max-width: 1000px;
  margin: 100px auto 0; }
  @media screen and (min-width: 768px) {
    .products.-start {
      margin: 160px auto 0; } }
  .products article {
    padding: 50px;
    flex-wrap: wrap; }
    @media screen and (max-width: 767px) {
      .products article {
        padding: 0 0 60px; } }
  .products .image_area {
    position: relative;
    width: 23%; }
    @media screen and (min-width: 768px) {
      .products .image_area {
        max-width: 230px; } }
    @media screen and (max-width: 767px) {
      .products .image_area {
        width: 100%;
        text-align: center; } }
    .products .image_area img {
      width: 100%;
      height: auto; }
      .products .image_area img.bottle {
        position: relative;
        width: 75%;
        z-index: 50; }
        @media screen and (max-width: 767px) {
          .products .image_area img.bottle {
            width: 30%; } }
  .products .text_area {
    width: 74%;
    text-align: left; }
    @media screen and (max-width: 767px) {
      .products .text_area {
        width: 100%; } }
    .products .text_area .collaboration_num {
      font-size: 2rem; }
      @media screen and (max-width: 767px) {
        .products .text_area .collaboration_num {
          font-size: 1.6rem; } }
    .products .text_area h3 {
      font-size: 2.8rem;
      font-weight: 400;
      margin-bottom: 20px; }
      @media screen and (max-width: 767px) {
        .products .text_area h3 {
          font-size: 2.4rem; } }
    .products .text_area .product_name {
      color: #aaa;
      font-size: 1.2rem; }
    .products .text_area .product_text {
      position: relative;
      text-align: left; }
      @media screen and (min-width: 768px) {
        .products .text_area .product_text {
          margin-top: -50px; } }
      @media screen and (max-width: 767px) {
        .products .text_area .product_text {
          font-size: 1.4rem;
          margin: 0 5%; } }
  .products .text_image img {
    width: 100%;
    height: auto; }
  .products .buy_area {
    width: 100%;
    margin-top: 40px; }
    .products .buy_area.-before {
      display: none; }
  .products .finish_area {
    width: 100%;
    margin-top: 40px; }
    .products .finish_area.-before {
      display: none; }
    .products .finish_area .btn {
      width: 100%;
      padding: 20px 10px;
      display: block;
      color: #666;
      font-size: 2rem;
      text-align: center;
      border: 1px solid #666;
      box-sizing: border-box;
      transition: all 0.5s ease; }
      @media screen and (max-width: 767px) {
        .products .finish_area .btn {
          width: 90%;
          margin: 0 auto; } }
  .products .price {
    width: 100%;
    padding-top: 5px;
    text-align: left;
    color: #9C1D05;
    font-weight: bold; }
    @media screen and (max-width: 767px) {
      .products .price {
        margin: 0 5%; } }
    .products .price .bottle_num {
      display: inline-block;
      margin: 0 0 10px;
      width: 340px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      color: #fff;
      background: url("../images/bottle_bg.png") center center/100% auto no-repeat; }
    .products .price .price_txt {
      display: inline-block;
      margin-top: -5px;
      font-size: 4rem;
      font-family: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "serif";
      font-weight: 400; }
      @media screen and (max-width: 767px) {
        .products .price .price_txt {
          font-size: 3rem; } }
  .products .btn {
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .products .btn {
        width: 100%; } }
    .products .btn a {
      width: 100%;
      display: block;
      color: #EBDC93;
      font-size: 2.4rem;
      font-weight: bold;
      text-align: center;
      box-sizing: border-box;
      transition: all 0.5s ease; }
      .products .btn a:hover {
        text-decoration: none;
        opacity: 0.7; }
      .products .btn a img {
        width: 100%;
        height: auto; }
      @media screen and (max-width: 767px) {
        .products .btn a {
          width: 90%;
          margin: 0 auto; } }
    .products .btn .limit {
      text-align: center;
      color: #333;
      font-size: 1.4rem;
      padding: 10px 5px;
      line-height: 120%; }
      .products .btn .limit .-hide {
        display: none; }
  .products .product_information {
    margin: 20px 0 0; }
    @media screen and (min-width: 768px) {
      .products .product_information {
        margin: 30px 0 0; } }
    .products .product_information .product_info {
      font-size: 1.4rem;
      color: #ccc; }
      @media screen and (min-width: 768px) {
        .products .product_information .product_info {
          width: 50%;
          margin: -5px 0 0; } }
  .products .attention {
    margin: 10px 0 0;
    font-size: 1.4rem;
    color: #333;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .products .attention {
        margin: 5px 0 0; } }
  .products .other_bottles {
    margin: 0;
    padding: 0;
    list-style: none; }
    @media screen and (min-width: 768px) {
      .products .other_bottles {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between; } }
    @media screen and (max-width: 767px) {
      .products .other_bottles {
        margin: 0 auto;
        width: 90%; } }
    @media screen and (min-width: 768px) {
      .products .other_bottles li {
        width: 30%; } }
    @media screen and (max-width: 767px) {
      .products .other_bottles li {
        margin: 20px 0 0; } }
    .products .other_bottles li img {
      width: 100%;
      height: auto; }
    .products .other_bottles.-vol2 {
      margin-bottom: 60px; }
      @media screen and (min-width: 768px) {
        .products .other_bottles.-vol2 li {
          width: 23%;
          text-align: center; }
          .products .other_bottles.-vol2 li img {
            max-width: 227px;
            height: auto; } }
  .products .closed {
    position: relative;
    width: 100%;
    padding: 20px;
    background: #191919;
    border: 1px solid #707070;
    box-sizing: border-box;
    border-radius: 5px; }
  .products hr {
    margin-top: 0; }
  .products .schedule {
    margin: -20px 0 30px;
    font-size: 36px;
    color: #9C1D05; }
    @media screen and (max-width: 767px) {
      .products .schedule {
        font-size: 22px; } }
  .products .countdown {
    margin: 20px 0 0;
    text-align: center;
    line-height: 200%; }
    @media screen and (max-width: 767px) {
      .products .countdown {
        margin: 20px 5% 0; } }
    .products .countdown.-before {
      display: none; }
    .products .countdown .btn {
      background: url("../images/countdown_bg.png") center center/100% 100% no-repeat;
      color: #9C1D05; }
      @media screen and (min-width: 768px) {
        .products .countdown .btn {
          position: relative;
          max-width: 670px;
          margin: 0 auto 0;
          padding: 25px;
          font-size: 2.0rem; } }
      @media screen and (max-width: 767px) {
        .products .countdown .btn {
          padding: 10px; } }
    .products .countdown.-single .en {
      display: inline-block; }
  .products .yycountdown-box {
    text-align: center;
    margin: 10px 0;
    color: #9C1D05;
    font-style: italic; }
  .products .yycountdown-box .yyc-day,
  .products .yycountdown-box .yyc-hou,
  .products .yycountdown-box .yyc-min,
  .products .yycountdown-box .yyc-sec {
    font-size: 3.6rem; }
    @media screen and (min-width: 768px) {
      .products .yycountdown-box .yyc-day,
      .products .yycountdown-box .yyc-hou,
      .products .yycountdown-box .yyc-min,
      .products .yycountdown-box .yyc-sec {
        font-size: 6rem; } }
  .products .yycountdown-box .yyc-day-text {
    font-size: 1.6rem; }
    @media screen and (min-width: 768px) {
      .products .yycountdown-box .yyc-day-text {
        font-size: 1.6rem; } }
  .products .yycountdown-box .yyc-hou-text,
  .products .yycountdown-box .yyc-min-text,
  .products .yycountdown-box .yyc-sec-text {
    font-size: 3.6rem; }
    @media screen and (min-width: 768px) {
      .products .yycountdown-box .yyc-hou-text,
      .products .yycountdown-box .yyc-min-text,
      .products .yycountdown-box .yyc-sec-text {
        font-size: 6rem; } }
  .products .buy_area .yycountdown-box {
    display: inline-block;
    width: 10em;
    text-align: center;
    margin: 10px 0;
    color: #000;
    font-style: italic;
    font-weight: bold; }
  .products .buy_area .yycountdown-box .yyc-day {
    padding-right: 3px; }
  .products .buy_area .yycountdown-box .yyc-day,
  .products .buy_area .yycountdown-box .yyc-hou,
  .products .buy_area .yycountdown-box .yyc-min,
  .products .buy_area .yycountdown-box .yyc-sec,
  .products .buy_area .yycountdown-box .yyc-hou-text,
  .products .buy_area .yycountdown-box .yyc-min-text,
  .products .buy_area .yycountdown-box .yyc-sec-text {
    font-size: 2.0rem; }
  .products .buy_area .yycountdown-box .yyc-day-text {
    font-size: 1.4rem; }
  .products .voice {
    		/*
    
            ul {
            margin: 0;
            padding: 0;
            list-style: none;
            flex-wrap: wrap;
            }
    
            */ }
    .products .voice .wrapper {
      margin: 40px auto 0;
      max-width: 900px; }
      @media screen and (max-width: 767px) {
        .products .voice .wrapper {
          margin: 0 auto 0;
          width: 100%;
          overflow-x: hidden; } }
    .products .voice .swiper, .products .voice .swiper-wrapper {
      overflow-y: visible; }
    .products .voice .swiper-wrapper {
      transition-timing-function: linear; }
      @media screen and (max-width: 767px) {
        .products .voice .swiper-wrapper {
          padding-left: 0; } }
    .products .voice .swiper-slide {
      position: relative;
      font-size: 1.4rem; }
      @media screen and (min-width: 768px) {
        .products .voice .swiper-slide {
          transition: all 0.2s linear; } }
      @media screen and (max-width: 767px) {
        .products .voice .swiper-slide {
          font-size: 1.4rem; } }
      .products .voice .swiper-slide figure {
        position: absolute;
        left: -10%;
        width: 120%;
        height: 100%; }
        .products .voice .swiper-slide figure img {
          width: 100%;
          height: 100%; }
      .products .voice .swiper-slide .text_area {
        position: relative;
        padding: 70px 12% 80px 15%;
        box-sizing: border-box;
        transform: scale(1);
        transition: all 0.05s linear; }
        @media screen and (min-width: 768px) {
          .products .voice .swiper-slide .text_area {
            padding: 70px 40px 80px 40px; } }
      .products .voice .swiper-slide p {
        text-align: left; }
      .products .voice .swiper-slide .user {
        position: absolute;
        right: 60px;
        bottom: 10px;
        text-align: center;
        color: #000; }
      .products .voice .swiper-slide:nth-of-type(odd) .user {
        width: 195px;
        height: 55px;
        line-height: 55px;
        background: url("../images/baloon_odd_name.png") center center/100% auto no-repeat; }
      .products .voice .swiper-slide:nth-of-type(even) .user {
        width: 195px;
        height: 55px;
        line-height: 55px;
        background: url("../images/baloon_even_name.png") center center/100% auto no-repeat; }
      @media screen and (min-width: 768px) {
        .products .voice .swiper-slide.swiper-slide-active {
          transform: scale(1.5);
          z-index: 100; }
          .products .voice .swiper-slide.swiper-slide-active figure.type1 {
            animation: baloon_anime1 1.5s linear infinite; }
          .products .voice .swiper-slide.swiper-slide-active figure.type2 {
            animation: baloon_anime2 1.5s linear infinite; }
          .products .voice .swiper-slide.swiper-slide-active .text_area {
            transform: scale(0.85); } }
      @media screen and (max-width: 767px) {
        .products .voice .swiper-slide.swiper-slide-active {
          transform: scale(1.05);
          z-index: 100; }
          .products .voice .swiper-slide.swiper-slide-active figure.type1 {
            animation: baloon_anime1 1.5s linear infinite; }
          .products .voice .swiper-slide.swiper-slide-active figure.type2 {
            animation: baloon_anime2 1.5s linear infinite; }
          .products .voice .swiper-slide.swiper-slide-active .text_area {
            transform: scale(0.9); } }
@keyframes baloon_anime1 {
  0% {
    transform: scale(1) skew(0); }
  15% {
    transform: scale(1.07) skew(-5deg, 5deg); }
  30% {
    transform: scale(1) skew(7deg, -3deg); }
  45% {
    transform: scale(0.95) skew(-4deg, 6deg); }
  60% {
    transform: scale(1) skew(3deg, -8deg); }
  75% {
    transform: scale(1.04) skew(-3deg, 4deg); }
  90% {
    transform: scale(0.98) skew(2deg, -4deg); }
  100% {
    transform: scale(1) skew(0); } }
@keyframes baloon_anime1_sub {
  0% {
    transform: scale(1) skew(0); }
  1.5% {
    transform: scale(1.07) skew(-5deg, 5deg); }
  3% {
    transform: scale(1) skew(7deg, -3deg); }
  4.5% {
    transform: scale(0.95) skew(-4deg, 6deg); }
  6% {
    transform: scale(1) skew(3deg, -8deg); }
  7.5% {
    transform: scale(1.04) skew(-3deg, 4deg); }
  9% {
    transform: scale(0.98) skew(2deg, -4deg); }
  10% {
    transform: scale(1) skew(0); }
  100% {
    transform: scale(1) skew(0); } }
@keyframes baloon_anime2 {
  0% {
    transform: scale(1) skew(0); }
  15% {
    transform: scale(1.02) skew(2deg, -3deg); }
  30% {
    transform: scale(1) skew(-6deg, 3deg); }
  45% {
    transform: scale(0.98) skew(2deg, -4deg); }
  60% {
    transform: scale(1.03) skew(-5deg, 3deg); }
  75% {
    transform: scale(1) skew(4deg, -3deg); }
  90% {
    transform: scale(0.98) skew(-3deg, 4deg); }
  100% {
    transform: scale(1) skew(0); } }
@keyframes baloon_anime2_sub {
  0% {
    transform: scale(1) skew(0); }
  1.5% {
    transform: scale(1.02) skew(2deg, -3deg); }
  3% {
    transform: scale(1) skew(-6deg, 3deg); }
  4.5% {
    transform: scale(0.98) skew(2deg, -4deg); }
  6% {
    transform: scale(1.03) skew(-5deg, 3deg); }
  7.5% {
    transform: scale(1) skew(4deg, -3deg); }
  9% {
    transform: scale(0.98) skew(-3deg, 4deg); }
  10% {
    transform: scale(1) skew(0); }
  100% {
    transform: scale(1) skew(0); } }
    .products .voice .swiper-pagination-bullet {
      background: #ccc; }
    .products .voice .swiper-pagination-bullet-active {
      background: #D2091A; }
    .products .voice .swiper-button-next, .products .voice .swiper-button-prev {
      top: auto;
      bottom: 0;
      color: #fff; }
    .products .voice .swiper-button-prev {
      left: calc(50% - 300px); }
    .products .voice .swiper-button-next {
      right: calc(50% - 300px); }
  .products .btn_area.-next {
    max-width: 678px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .products .btn_area.-next {
        width: 90%; } }
    .products .btn_area.-next img {
      width: 100%;
      height: auto; }

footer {
  margin: 100px 0 0;
  border-top: 2px solid #707070;
  font-size: 1.4rem; }
  @media screen and (max-width: 767px) {
    footer {
      margin: 60px 0 0; } }
  footer .flex {
    display: -webkit-box;
    display: flex; }
    @media screen and (min-width: 768px) {
      footer .flex.bt {
        -webkit-box-pack: justify;
        justify-content: space-between; } }
  footer .link {
    margin: 0;
    padding: 0;
    list-style: none; }
    footer .link li {
      margin-right: 20px; }
      @media screen and (max-width: 767px) {
        footer .link li {
          width: auto;
          margin: 5px 20px 5px 0; } }
      @media screen and (max-width: 767px) {
        footer .link li:nth-of-type(1) {
          width: 100%; } }
      footer .link li a {
        color: #333;
        text-decoration: underline; }
      footer .link li::before {
        content: ">";
        margin: 0 5px 0 0; }
  footer .copyright {
    margin: 20px 0 0; }
  footer .wrapper {
    width: 94%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0; }

@media screen and (min-width: 768px) {
  .for-sp {
    display: none; } }
@media screen and (max-width: 767px) {
  .for-pc {
    display: none; } }