@charset "utf-8";

/*====================================================================

style.css

====================================================================*/
html {}

body {
   background: url(../img/back_flower.jpg) repeat;
   background-color: #fff;
   background-size: 100%;
   background-position: top left;
   -webkit-text-size-adjust: 100%;
}

body * {
   font-family: 'Noto Serif JP', "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
   color: #100000;
   font-size: 15px;
   line-height: 1.6rem;
   font-feature-settings: "palt";
   letter-spacing: 0.5px;
}

img {
   width: 100%;
   display: block;
}

.pc {
   display: block !important;
}

.sp {
   display: none !important;
}

.flex {
   display: flex;
   justify-content: space-between;
   flex: 1;
   flex-wrap: nowrap;
}

.suntory_contents_box {
   max-width: 1280px;
   margin: 70px auto 0px;
   text-align: center;
}

.w-100 {
   max-width: 100%;
}

.w-100 .img-box {
   width: 100%;
}

.h2_ttl {
   font-size: 25px;
   font-weight: bold;
   margin-bottom: 50px;
}

.h2_ttl-r {
   color: #AC0030;
}

.white {
   color: #fff;
}

.center {
   text-align: center;
}

/*--------------------------------------------------------------------
introduction
--------------------------------------------------------------------*/
#introduction {
   border-top: 30px solid #AC0030;
   background: #fff;
}

.slick-slider{
   margin: 0;
   padding: 0;
}

.slick-slider img {
   width: 100%;
   height: 100%;
}


/*--------------------------------------------------------------------
fadein
--------------------------------------------------------------------*/

.fadeIn {
   opacity: 0;
   transition: 1.5s;
}

.fadeIn_up {
   opacity: 0;
   transform: translate(0, 50%);
   transition: 1.5s;
}

.fadeIn_up.is-show {
   transform: translate(0, 0);
   opacity: 1;
}

.movie_read {
    text-shadow: 1px 1px 5px #000;
}


.play_btn {
   position: absolute;
   width: 102px;
   height: 102px;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   -webkit- transform: translateY(-50%) translateX(-50%);
   margin: auto;
   transition: .4s;
}

.play_btn a img{
  width: 100%;
}

.play_btn:hover {
   opacity: 0.5;
}

/*モーダル*/
.modaal-close:before,
.modaal-close:after {
   border-radius: 0px !important;
}

/*背景動画設定*/

#video-area{
   position: absolute;
   z-index: -1;/*最背面に設定*/
   top: 0;
   right:0;
   left:0;
   bottom:0;
   overflow: hidden;
}

#video {
   /*天地中央配置*/
   position: absolute;
   z-index: -1;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /*縦横幅指定*/
   width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
   height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
   min-height: 100%;
   min-width: 100%;
}


/*--------------------------------------------------------------------
mainvisual
--------------------------------------------------------------------*/

#top-image {
   margin: 0;
   height: 100%;
   overflow: hidden;
   /*background: url(../img/top-image-back-pc.png) no-repeat;
   background-position: center;
   background-size: cover;*/
}

#top-image .img_back_rhombus {
   position: absolute;
   width: 40%;
}

#top-image .img_back_rhombus-left {
   top: 50%;
   left: 8vw;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
}

#top-image .img_back_rhombus-center {
   width: 40%;
   right: -2vw;
   bottom: 0;
}

#top-image .img_back_rhombus-right {
   top: -110px;
   right: -15vw;
}

#top-image .img_back_rhombus img{
   width: 100%;
}

#top-image .mainvisual {
   max-width: 1280px;
   height: 620px;
   margin: 0 auto;
   position: relative;
   align-items: center;
}

#top-image .mainvisual .img_logo {
   position: absolute;
   right: 240px;
   top: 30%;
   width: auto;
}

#top-image .mainvisual .img_logo .hibiki_logo {
   width: 100%;
   height: 112px;
   margin: 0 auto 20px;
}

#top-image .mainvisual .img_logo .blossom_harmony_logo {
   width: 307px;
   height: 41px;
   margin: 13px auto 0;
}

#top-image .mainvisual .img_bottle {
   position: absolute;
   left: 270px;
   bottom: -70px;
   width: 360px;
   height: 520px;
}

.img_pattern {
   position: absolute;
   z-index: -1;
}

.pattern-left {
   top: 0;
   left: 0;
}

.pattern-right {
   bottom: 0;
   right: 0;
   width: 50%;
}


/*--------------------------------------------------------------------
product
--------------------------------------------------------------------*/

#product_detail {
   max-width: 945px;
   margin: 80px auto 0px;
}

#product_detail .img_box {
   /*width: calc((100% - 400px)/2);*/
   width: 40%;
   margin-top: 10px;

}

#product_detail .text_box {
   width: 55%;

}

#product_detail .text_box .img_box {
   width: 75%;
   margin: 20px 0;
}

#product_detail .text_box .note_description {
   margin: 30px 0 20px 0;
   display: table;
   width: 100%;
}

#product_detail .text_box .note_description tr {
   border-bottom: solid 1px #ACACAC;
   text-align: left;
}

#product_detail .text_box .note_description th {
   padding: 5px 0;
   width: 50px;
}

#product_detail .text_box .note_description td {
   padding: 5px 0 5px 50px;
   line-height: 1.5rem;
}

#product_detail .text_box .note_description td.td_title {
   padding: 5px 0 5px 0;
}


#product_detail .text_box .note_image {
   justify-content: flex-start;
}

#product_detail .text_box .note_image li {
   width: 18%;
   margin: 0 5px;
}


/*--------------------------------------------------------------------
design
--------------------------------------------------------------------*/

#design {
   margin-top: 30px;
}

#design .img_box {
   justify-content: center;
   margin-top: 80px;

}

#design .img_box .img_box_item {
   width: 30%;
   margin: 0 20px;
}

/*--------------------------------------------------------------------
members_banner
--------------------------------------------------------------------*/

#members_banner {
   transition: .6s;
   margin: 140px auto 180px;
}

#members_banner img {
   transition: .4s;
}

#members_banner img:hover {
   opacity: 0.5;
}

/*--------------------------------------------------------------------
hibiki_image
--------------------------------------------------------------------*/

#hibiki_image {
   margin: 70px auto 0px;
}

/*--------------------------------------------------------------------
recipe
--------------------------------------------------------------------*/

#recipe {
   margin-top: 50px;
}

#recipe .img_box {
   display: flex !important;
   justify-content: center;
   flex-wrap: wrap;
}

#recipe .img_box .img_box_item {
   width: 32%;
   margin: 50px 40px 0 40px;
   position: relative;
}

#recipe .img_box .img_box_item:before {
   content: "";
   left: -50px;
   top: 35%;
   width: 0;
   height: 0;
   border-left: 20px solid #AC0030;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   position: absolute;
}

#recipe .img_box .img_box_item:nth-of-type(1):before {
   display: none;
}

#recipe .img_box p {
   text-align: left;
   margin-top: 10px;
}


/*--------------------------------------------------------------------
pairing
--------------------------------------------------------------------*/
#pairing {
   max-width: 704px;
}

#pairing .line {
   width: 80%;
   height: 1px;
   background: #B9B9B9;
   margin: 0 auto 70px;
}

#pairing p {
   margin-top: 30px;
}

/*--------------------------------------------------------------------
members
--------------------------------------------------------------------*/

#members {
   transition: .6s;
   margin: 140px auto 100px;
}

#members .img_box img {
   height: 100%;
   object-fit: cover;
   object-position: right;
}

#members .text_box,
#members .img_box {
   align-items: center;
   width: 50%;
}

#members .text_box {
   background: #100000;
   padding: 30px 25px;
   box-sizing: border-box;
}

#members .text_box p {
   color: #fff;
}

#members .text_box .img_box {
   width: 40%;
   margin: 20px auto;
}


#members .text_box .btn_box a {
   width: 60%;
   display: block;
   margin: 50px auto 0;
   color: #fff;
   font-weight: bold;
   border: solid 1px #fff;
   padding: 5px 0;
   text-decoration: none;
   transition: .4s;
}

#members .text_box .btn_box a:hover {
  opacity: 0.5;
}



@media screen and (max-width: 1280px) {
   body {
      background-size: 120%;
   }

   #top-image .mainvisual {
      max-width: 100%;
      background-position: right 200px bottom -135px;
      background-size: 40vw;
      height: calc(100vw * 617/1280);
   }

   #top-image .mainvisual .img_bottle {
      right: 25vw;
      bottom: -10px;
      width: 30%;
      height: auto;
   }

   #top-image .mainvisual .img_logo {
      top: calc(100vw * 117/1280);
   }

   .movie_title {
      left: 50px;
   }

}



@media screen and (max-width: 1024px) {
   body {
      background-size: 150%;
   }

   .pc {
      display: block !important;
   }

   .sp {
      display: none !important;
   }
   /*--------------------------------------------------------------------
      top,mainvisual
   --------------------------------------------------------------------*/

   #top-image {
      margin: 0;
   }

   #top-image .img_back_rhombus-left {
      top: 50%;
      left: 2vw;
   }

   #top-image .mainvisual {
      max-width: 100%;
      height: calc(100vw * 750/1024);
      display: block;
      padding: 30px 0;
      background-size: cover;
      background-position: right;
   }

   #top-image .mainvisual .img_logo {
      width: 100%;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
   }

   #top-image .mainvisual .img_logo .hibiki_logo {
      width: 25%;
      height: auto;
      margin: 0 auto 30px;
   }

   #top-image .mainvisual .img_logo .blossom_harmony_logo {
      width: 40%;
      height: auto;
   }

   #top-image .mainvisual .img_bottle {
      width: 32%;
      height: auto;
      /*position: unset;*/
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
   }

   /*--------------------------------------------------------------------
   movie
   --------------------------------------------------------------------*/

   #movie {
      background-size: 50%;
   }

   .movie_inner .h2_ttl {
      margin-bottom: 10px;
   }

   .movie_thumb img {
      height: 309px;
      width: auto;
   }

   .play_btn img {
      height: auto;
   }

   .movie_title {
      left: 50px;
   }

   /*--------------------------------------------------------------------
   product_detail
   --------------------------------------------------------------------*/

   #product_detail {
       max-width: 88%;
       margin: 80px auto ;
   }

   /*--------------------------------------------------------------------
   recipe
   --------------------------------------------------------------------*/

   #recipe .img_box {
      margin-top: 80px;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
   }

   #recipe .img_box p {
      height: 3rem;
   }

   #recipe .img_box .img_box_item {
      width: 32%;
      margin: 50px 40px 0 40px;
      position: relative;
   }

   #recipe .img_box .img_box_item {
      width: 40%;
      margin: 50px 30px 0 30px;
      display: inline-grid;
   }
}

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

   .pc {
      display: none !important;
   }

   .sp {
      display: block !important;
   }

   #product,
   #product_detail,
   #design,
   #recipe p,
   #pairing p{
      padding: 0 50px;
   }

   #product_detail {
      margin: 0 auto;
   }


   /*--------------------------------------------------------------------
   menu
   --------------------------------------------------------------------*/

   .hamburger {
      display: block;
      position: fixed;
      z-index: 3;
      right: 13px;
      top: 60px;
      width: 42px;
      height: 42px;
      cursor: pointer;
      text-align: center;
      -webkit-transition: 0.4s ease-in-out;
      -moz-transition: 0.4s ease-in-out;
      transition: 0.4s ease-in-out;
   }

   .hamburger span {
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      left: 6px;
      background: #555;
      -webkit-transition: 0.4s ease-in-out;
      -moz-transition: 0.4s ease-in-out;
      transition: 0.4s ease-in-out;
   }

   .hamburger span:nth-child(1) {
      top: 10px;
   }

   .hamburger span:nth-child(2) {
      top: 20px;
   }

   .hamburger span:nth-child(3) {
      top: 30px;
   }

   .fixed {
      position: fixed;
      top: 14px;
   }

   /* ナビ開いてる時のボタン */
   .hamburger.active span:nth-child(1) {
      top: 16px;
      left: 6px;
      background: #100B00;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
   }

   .hamburger.active span:nth-child(2),
   .hamburger.active span:nth-child(3) {
      top: 16px;
      background: #100B00;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg);
   }

   nav.globalMenuSp {
      position: fixed;
      height: 100vh;
      z-index: 2;
      top: 0;
      left: 0;
      color: #100B00;
      background: url(../img/back_flower.png) repeat;
      background-color: #fff;
      background-size: 300%;
      padding-top: 60px;
      text-align: center;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity .7s ease, visibility .7s ease;
   }

   nav.globalMenuSp.active {
      opacity: 100;
      visibility: visible;
   }

   nav.globalMenuSp ul {
      margin: 0 auto;
      padding: 0;
      width: 100%;
   }

   nav.globalMenuSp ul li {
      list-style-type: none;
      padding: 0;
      width: 100%;
      transition: .5s all;
   }

   nav.globalMenuSp ul li:first-child {
      margin-top: 60px;
   }

   li.logo_li.fixed_inner {
      margin-top: 0px !important;
   }

   nav.globalMenuSp ul li:last-child {
      padding-bottom: 0;
      margin-bottom: 30px;
   }

   nav.globalMenuSp ul li:hover {
      background: #ddd;
   }

   nav.globalMenuSp ul li a {
      display: block;
      padding: 1em 0;
      font-size: 18px;
      text-decoration: none;
   }

   /* このクラスを、jQueryで付与・削除する */
   nav.globalMenuSp.active {
      opacity: 100;

   }

   li.logo_li {
      width: 80% !important;
      margin: 0 auto;
      padding: 20px 40px 0 40px !important;
      border-top: solid 1px #B2B2B2;
      box-sizing: border-box;
   }

   li.logo_li:first-child {
      padding: 20px 20px 0 20px !important;
   }

   li.logo_li img {
      width: 100%;
      display: block;
   }

   /*--------------------------------------------------------------------
   top,mainvisual
   --------------------------------------------------------------------*/

   #top-image {
      margin: 0;
      /*background: url(../img/top-image-back-sp.png) no-repeat;
      background-position: top right;
      background-size: contain;*/
   }

   #top-image .img_back_rhombus {
      width: 80%;
   }

   #top-image .img_back_rhombus-center {
      width: 100%;
      right: -10vw;
      bottom: 0;
   }

   #top-image .img_back_rhombus-right {
      top: -120px;
      right: -35vw;
   }

   #top-image .mainvisual {
      background-size: 100%;
      padding: 0;
      height: calc(100vw * 780/768);
      /*background: url(../img/top-image-back-sp.png) no-repeat;
      background-position: top right;
      background-size: contain;*/
   }

   #top-image .mainvisual .img_logo {
      top: 13%;
   }

   #top-image .mainvisual .img_logo .hibiki_logo {
      width: 30%;
   }

   #top-image .mainvisual .img_logo .blossom_harmony_logo {
      width: 40%;
   }

   #top-image .mainvisual .img_bottle {
      width: 38%;
      height: auto;
   }

   .pattern-right {
      width: 70%;
   }

   /*--------------------------------------------------------------------
   movie
   --------------------------------------------------------------------*/

   .play_btn {
      width: 72px;
      height: 72px;
   }

   #movie {
      height: 550px;
      background-size: 50%;
   }

   .movie_inner .h2_ttl {
      margin-bottom: 10px;
   }

   .movie_title {
      left: 50px;
   }


   /*--------------------------------------------------------------------
   product
   --------------------------------------------------------------------*/

   #product_detail {
      display: block;
   }

   #product_detail .img_box,
   #product_detail .text_box {
       width: 100%;
   }

   #product_detail .text_box .note_image {
      justify-content: space-between;
   }

   #product_detail .text_box .note_image li {
      width: 24%;
      margin: 0;
   }

   /*--------------------------------------------------------------------
   design
   --------------------------------------------------------------------*/
   #design {
      margin-top: 50px;
   }

   #design .img_box .img_box_item {
      width: 40%;
      margin: 0 20px;
   }

   /*--------------------------------------------------------------------
   recipe
   --------------------------------------------------------------------*/
   #recipe .h2_ttl,
   #recipe p {
      padding: 0 20px;
   }

   #recipe .h2_ttl {
      font-size: 24px;
   }

   #recipe .img_box {
      margin-top: 30px;
   }

   #recipe .img_box.pc {
      display: none !important;
   }

   #recipe .img_box .img_box_item {
      position: unset;
      margin: 0 25px 0 25px;
   }

   #recipe .img_box .img_box_item p {
      padding: 0;
      height: auto;
   }

   #recipe .img_box .img_box_item img {}


   /*スライダー*/

   .slick-slide {
     transition: .3s ease;
   }
   .slick-slide:not(.slick-current) {
     opacity: .4;
   }

   #recipe .img_box .img_box_item:before {
      display: none;
   }

   /*--------------------------------------------------------------------
   pairing
   --------------------------------------------------------------------*/
   #pairing p {
      margin-top: 40px;
   }
}

@media screen and (max-width: 599px) {
   body {
      background-color: #fff;
      background-size: 300%;
   }

   body * {
      font-size: 13px;
      line-height: 1.6rem;
   }

   .pc {
      display: none !important;
   }

   .sp {
      display: block !important;
   }

   /*--------------------------------------------------------------------
   top,mainvisual
   --------------------------------------------------------------------*/

   #top-image {
      margin: 0;
   }

   #top-image .img_back_rhombus {
      width: 100%;
   }

   #top-image .img_back_rhombus-center {
      width: 120%;
      right: -20vw;
   }

   #top-image .mainvisual {
      /*background-position: right -119px bottom -175px;
      background-size: 116%;*/
      height: calc(100vw * 800/599);
   }

   #top-image .mainvisual .img_logo {
   }

   #top-image .mainvisual .img_logo .hibiki_logo {
      width: 207px;
      margin: 0 auto 10px;
   }

   #top-image .mainvisual .img_logo .blossom_harmony_logo {
      width: 260px;
   }

   #top-image .mainvisual .img_bottle {
      width: 50%;
      bottom: 10px;
   }

   #product,
   #product_detail,
   #design,
   #recipe p,
   #pairing p{
      padding: 0 20px;
   }

   .suntory_contents_box {
      max-width: 100%;
      margin: 28px auto 0px;
      box-sizing: border-box;
      text-align: left;
   }

   .suntory_contents_box:before {
      content: "";
      display: inline-block;
      height: 50px;
      margin-top: -50px;
      vertical-align: top;
   }

   .pattern-right {
      width: 93%;
   }


   .w-100 {
      padding: 0;
   }

   .h2_ttl {
      font-size: 18px;
      margin-bottom: 20px;
      text-align: center;
   }

   /*--------------------------------------------------------------------
   movie
   --------------------------------------------------------------------*/

   #movie {
      height: 350px;
      border-top: 18px solid #AC0030;
   }

   .play_btn {
      width: 63px;
      height: 63px;
      top: 40%;
   }

   #movie .h2_ttl {
      margin: 10px 0;
      text-align: left;
   }

   .movie_title {
       left: 20px;
       bottom: 20px;
   }

   .movie_inner p{
       line-height: 1.2rem;
   }

   .movie_inner .h2_ttl {
      letter-spacing: 2px;
      font-size: 20px;
   }

   /*--------------------------------------------------------------------
   product,product_detail
   --------------------------------------------------------------------*/

   #product {
      margin-top: 10px;
   }

   #product_detail {
      display: block;
      max-width: 100%;
   }

   #product_detail .img_box {
      width: 85%;
      margin: 0 auto;
   }

   #product_detail .text_box .img_box {
      width: 80%;
      margin: 0 auto;
   }

   #product_detail .text_box {
      width: 100%;
   }

   #product_detail .text_box .note_description {
      margin: 10px 0 20px 0;
   }

   #product_detail .text_box .note_description td.td_title {
      padding: 5px 0 5px 0;
      text-align: center;
      font-size: 16px;
   }

   #product_detail .text_box .note_description th {
      padding: 5px 0;
      width: 90px;
   }

   #product_detail .text_box .note_description td {
      padding: 5px 0 5px 0;
   }

   #product_detail .text_box .note_image {
      justify-content: space-between;
   }

   #product_detail .text_box .note_image li {
      width: 24%;
      margin: 0;
   }

   /*--------------------------------------------------------------------
   design
   --------------------------------------------------------------------*/

   #design .img_box {
      justify-content: space-between;
      margin-top: 50px;
   }

   #design .img_box .img_box_item {
      width: 49%;
      margin: 0;
   }

   /*--------------------------------------------------------------------
   design
   --------------------------------------------------------------------*/
   #members_banner {
      margin: 28px auto 40px;
      padding: 0 20px;
   }

   /*--------------------------------------------------------------------
   hibiki_image
   --------------------------------------------------------------------*/

   #hibiki_image {
      margin: 20px auto 0px;
   }


   /*--------------------------------------------------------------------
   recipe
   --------------------------------------------------------------------*/

   #recipe {
      padding: 0;
      margin-top: 20px;
   }

   #recipe .h2_ttl,
   #recipe p {
      padding: 0 20px;
   }

   #recipe .h2_ttl {
      font-size: 24px;
   }

   #recipe .img_box {
      margin-top: 30px;
   }

   #recipe .img_box .img_box_item {
      position: unset;
      margin: 0 15px 0 15px;
   }

   #recipe .img_box .img_box_item p {
      padding: 0;
      font-size: 13px;
   }

   #recipe .img_box .img_box_item img {}


   /*スライダー*/

   .slick-slide {
     transition: .3s ease;
   }
   .slick-slide p{
     font-size: 13px;
   }
   .slick-slide:not(.slick-current) {
     opacity: .4;
   }


   /*--------------------------------------------------------------------
   pairing
   --------------------------------------------------------------------*/

   #pairing {
      margin-top: 0;
   }

   #pairing p {
      margin-top: 20px;
      padding: 10px 20px;
   }

   /*--------------------------------------------------------------------
   members
   --------------------------------------------------------------------*/

   #members {
      display: block;
      margin: 28px 0 0px 0;
   }

   #members p,
   #members a {
      text-align: center;
   }

   #members .text_box,
   #members .img_box {
      width: 100%;
   }

   #members .img_box {
      margin-bottom: -1px;
   }

   #members .text_box .img_box {
      width: 50%;
      margin: 0 auto 20px;
   }

   #members .text_box {
      padding: 30px 20px;
      box-sizing: border-box;
   }

   #members .text_box .btn_box a {
      margin: 30px auto 0;
   }
}

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

   #top-image .mainvisual {
      height: calc(100vw * 650/480);
   }

   #top-image .mainvisual .img_bottle {
      width: 55%;
      bottom: 0px;
   }

   #top-image .mainvisual .img_logo .hibiki_logo {
      width: 167px;
      margin: 0 auto 10px;
   }

   #top-image .mainvisual .img_logo .blossom_harmony_logo {
      width: 230px;
   }
}

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

   #top-image .mainvisual {
      height: calc(100vw * 530/390);
   }

   #top-image .mainvisual .img_bottle {
      width: 180px;
      bottom: 30px;
   }
}


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

   #top-image .mainvisual {
      height: calc(100vw * 530/375);
   }
}


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

   .movie_thumb img {
      width: 90%;
   }
}