@charset "utf-8";

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

style.css

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

body {
   background-color: #000;
}

body * {
   font-family: "リュウミン B-KL", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
   font-style: normal;
   font-weight: 300;
   color: #fff;
   font-size: 15px;
   line-height: 2rem;
   /*font-feature-settings: "palt";*/
   letter-spacing: 0.1px;
}

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

.pc {
   display: block;
}

.sp {
   display: none;
}

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

.flex-rr {
   flex-direction: row-reverse;
}

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

div.suntory_contents_box:last-of-type {
   margin: 0px auto 100px;
}

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

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

.h2_ttl {
   /*font-size: 30px;
   line-height: 3rem;*/
   margin-bottom: 50px;
}

.h3_ttl {
   font-size: 25px;
   text-align: center;
   letter-spacing: 3px;
   line-height: 2rem;
   margin-bottom: 20px;
}

.white {
   color: #fff;
}

.gold {
   color: #C9AD76;
}

.gray {
   color: #C9C9C9;
}


/*--------------------------------------------------------------------
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;
}

.play_btn {
   position: absolute;
   width: 102px;
   height: 102px;
   top: 65%;
   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;
}


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

#top-image {
   content: "";
   margin: 0;
   width: 100%;
   /*height: calc(100vw * 620/1920);*/
   height: 620px;
   background: url("../img/top-mainvisual.jpg") no-repeat;
   background-size: contain;
   background-position: center top;
}

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

#top-image .mainvisual .img_logo {
   position: absolute;
   top: 50%;
   left: 15%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   margin: auto;
   z-index: 3;
}

#top-image .mainvisual .img_logo .yamazaki_logo {
   width: 247px;
   margin: 0 auto 30px;
}

#top-image .mainvisual .img_logo .yamazaki_limited_logo {
   width: 368px;
   margin: 0 auto;
}

#top-image .mainvisual .img_bottle {}

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

#movie {
   height: 610px;
   background-color: #000;
}

#youtube-area {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.movie_inner {
   position: relative;
   z-index: 3;
   text-align: center;
   height: 100%;
   padding-top: 160px;
   box-sizing: border-box;
}

.movie_thumb {
   position: relative;
   margin: 28px auto 0;
}

.movie_thumb img {
   width: auto;
   margin: 0 auto;
}

#movie .movie_inner .img_logo {
   width: 294px;
   margin: 0 auto 50px;
}

.special_movie_title {
   width: 100%;
   filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.9));
}

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

/*背景動画設定*/

#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%;
}

/*--------------------------------------------------------------------
product,product_detail
--------------------------------------------------------------------*/
.wood_back {
   padding-top: 80px;
   background: url("../img/contents_back.jpg") repeat;
   background-size: cover;
}

#product {
   margin: 30px auto 0px;
}

#product p,
#product_detail p,
#product_detail .text_box .note_description tr th,
#product_detail .text_box .note_description tr td {
   color: #100000;
}

#product .h2_ttl {
   max-width: 412px;
   margin: 0 auto 30px;
}

#product .h2_ttl img {
   object-fit: contain;
   width: 100%;
}

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

#product_detail .img_box {
   width: auto;
   margin: 10px 0 0 0;
}

#product_detail .text_box {
   width: auto;
}

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

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

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

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

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

#product_detail .text_box .note_description td.td_title {
   padding: 8px 0 8px 0;
   font-size: 20px;
   letter-spacing: 3px;
}

#product_detail .text_box .note_image {}

#product_detail .text_box .note_image li {
   width: calc((100% - 20px)/4);
   margin: 0;
}

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

#design {
   margin: 0 auto;
   padding-bottom: 110px;
}

#design p {
   color: #100000;
}

#design .h2_ttl {
   max-width: 582px;
   margin: 0 auto 40px;
}

#design .h2_ttl img {
   object-fit: contain;
   width: 100%;
}

#design .img_box {
   max-width: 571px;
   margin: 42px auto 0;
}

#design .img_box .img_box_item {
   width: auto;
}

#design > div.img_box.flex > div:nth-child(2) {
   margin-left: 20px;
}

#design .director {
   background: #241702;
   max-width: 886px;
   padding: 15px;
   margin: 0 auto;
   box-sizing: border-box;
}

#design .director .white_line {
   border: solid 1px #a29991;
   padding: 25px;
}

#design .director .director-ttl {
   width: 70%;
   margin: 0 auto;
}

#design .director .flex {
   justify-content: space-between;
}

#design .director p.director-name {
   font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
   width: 100%;
   color: #fff;
   margin-top: 10px;
   line-height: 1.2rem;
   font-size: 0.875rem;
}

#design .director .img_box {
   max-width: 100%;
   margin-top: 25px;
}

#design .director .img_box_item_img {
   width: calc(100% / 3 - 15px);
   flex-shrink: 0;
   box-sizing: border-box;
}

#design .director .img_box_item_text {
   width: 100%;
   margin-left: 20px;
}

#design .director .img_box_item_text p {
   text-align: left;
   color: #fff;
}

.factory_text {
   margin: 30px 0;
}

/*--------------------------------------------------------------------
history
--------------------------------------------------------------------*/

#history {
   margin: -50px auto 0;
}

#history .h2_ttl {
   max-width: 416px;
   margin: 0 auto 50px;
}

#history .h2_ttl img {
   object-fit: contain;
   width: 100%;
}

#history .sub_ttl {
   margin: 0 0 50px 0;
   display: flex;
   justify-content: center;
   align-items: center;
}

#history .sub_ttl::before,
#history .sub_ttl::after {
   content: '';
   width: 20px;
   height: 2px;
   margin: 0 10px;
   background: #fff;
}

#history .img_box {
   max-width: 777px;
   margin: 80px auto 0;
}

#history .img_box .img_box_item {
   width: 431px;
   margin: 0 auto;
}

#history .flex .img_box_item {
   width: auto;
   margin: 0;
}

#history p {
   margin-top: 62px;
}

/*--------------------------------------------------------------------
history2
--------------------------------------------------------------------*/

.history2_main_img {
   margin-top: 83px;
   height: 589px;
}

.history2_main_img .img_box {
   width: 100%;
   height: 540px;
}

.history2_main_img .img_box img {
   height: 540px;
   object-fit: contain;
}


#history2 {
   margin: -110px auto 0;
}

#history2 .h2_ttl {
   width: 35%;
   margin: 0 auto;
}

#history2 .h2_ttl img {
   object-fit: contain;
   width: 100%;
}

#history2 .img_box {
   max-width: 777px;
   margin: 80px auto 0;
}

#history2 .img_box .img_box_item {
   max-width: 431px;
   margin: 0 auto;
}

#history2 .flex .img_box_item {
   width: auto;
   margin: 0;
}


#history2 .img_box p,
#history2 p {
   margin-top: 50px;
}

/*--------------------------------------------------------------------
members,tour
--------------------------------------------------------------------*/
#members {
   position: relative;
   height: 394px;
   background-image: url(../img/members_banner_pc.jpg);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: right top;
   margin-top: 100px;
}

#tour {
   position: relative;
   height: 394px;
   background-image: url(../img/tour_banner_pc.jpg);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: left top;
}

#members .img_box img,
#tour .img_box img {
   object-fit: contain;
   height: 100%;
}

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

#members .text_box,
#tour .text_box {
   position: absolute;
}

#members .text_box {
   left: 160px;
   top: 50%;
   transform: translateY(-50%);
   -webkit- transform: translateY(-50%);
}

#tour .text_box {
   right: 25px;
   top: 0;
   top: 50%;
   transform: translateY(-50%);
   -webkit- transform: translateY(-50%);
}

#members .text_box p,
#tour .text_box p {
   letter-spacing: 2px;
}

.sub_text {
   font-size: 18px;
   letter-spacing: 5px;
}

#members .text_box .h3_ttl {
   font-size: 32px;
   letter-spacing: 5px;
   margin: 20px 0;
}

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

.btn_box {
   margin-top: 30px;
}

#members .text_box .btn_box a,
#tour .text_box .btn_box a {
   position: relative;
   border: 1px solid #C9AD76;
   display: block;
   width: 316px;
   padding: 8px 0;
   letter-spacing: 2px;
   margin: 0 auto;
   text-align: center;
   color: #C9AD76;
   font-size: 17px;
   text-decoration: none;
   transition: .4s;
}

.arrow_icon {
   position: absolute;
   top: 50%;
   color: inherit;
   margin-left: 5px;
   width: 13px;
   transform: translateY(-50%);
}

#members .text_box .btn_box a:hover,
#tour .text_box .btn_box a:hover {
   color: #fff;
   background: #C9AD76;
}

#tour .text_box .h3_ttl {
   font-size: 28px;
   letter-spacing: 5px;
   line-height: 2.5rem;
}

#tour .text_box .sub_text {
   font-size: 25px;
   letter-spacing: 4px;
}

@media screen and (max-width: 1280px) {
   #top-image {
      background-size: cover;
      height: 620px;
   }

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

   #top-image .mainvisual .img_logo .yamazaki_logo {
      width: 207px;
   }

   #top-image .mainvisual .img_logo .yamazaki_limited_logo {
      width: 320px;
   }

   /*--------------------------------------------------------------------
   product,product_detail
   --------------------------------------------------------------------*/
   #product .h2_ttl {
      width: 33%;
    }

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

   #design .h2_ttl {
      width: 45%;
    }

}


@media screen and (max-width: 1024px) {
   body {}

   .pc {
      display: block;
   }

   .sp {
      display: none;
   }

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

   #design .h2_ttl {
      width: 50%;
    }

   /*--------------------------------------------------------------------
   history
   --------------------------------------------------------------------*/
   #history .h2_ttl {
      width: 43%;
   }

   .history2_main_img .img_box {
      height: auto;
   }

   #history .img_box,
   #history2 .img_box {
      padding: 0 50px;
   }

   .history2_main_img .img_box img {
      width: 100%;
   }

   #history .flex .img_box_item,
   #history2 .flex .img_box_item {
      width: 48%;
      width: 0 auto;
   }

   /*--------------------------------------------------------------------
   members,tour
   --------------------------------------------------------------------*/
   #members .text_box {
      left: 100px;
   }

}

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

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

   #design {
      padding: 0 50px 110px;
   }

   #design .director p.director-name {
      font-size: 0.7rem;
   }
}

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

   body * {
      line-height: 1.6rem;
   }

   .pc {
      display: none;
   }

   .sp {
      display: block;
   }

   /*--------------------------------------------------------------------
   menu
   --------------------------------------------------------------------*/
   .hamburger {
      display: block;
      position: fixed;
      z-index: 3;
      right: 13px;
      top: 60px;
      width: 42px;
      height: 42px;
      cursor: pointer;
      text-align: center;
   }

   .hamburger span {
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      left: 6px;
      background: #fff;
      -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: 13px;
   }

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

   nav.globalMenuSp {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      color: #fff;
      background-color: #100B00;
      background-size: 100%;
      padding-top: 60px;
      text-align: center;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity .7s ease, visibility .7s ease;
   }

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

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

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

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

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

   a.gray.last_li_a {
      padding-bottom: 1.5em !important;
   }

   nav.globalMenuSp ul li:last-child {
      padding-bottom: 0;
      margin-bottom: 30px;
      border-bottom: solid 1px #434343;
   }

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

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

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

   li.title_li,
   li.border_li {
      width: 80% !important;
      margin: 0 auto;
      border-top: solid 1px #434343;
   }

   li.border_li a {
      padding: 1.5em 0 !important;
   }

   li.title_li {
      font-feature-settings: "palt";
      font-size: 1.3rem;
      padding-top: 1em;
   }

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

   li.logo_li:first-child {
      padding: 1.5em 0 0.5em !important;
   }

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

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

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

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

   #movie .movie_inner .img_logo {
      width: 224px;
   }

   .movie_thumb {
      margin: 10px auto 0;
   }

   .movie_thumb img {
      height: 310px;
   }

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

   .play_btn img {
      height: auto;
   }


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

   #product {
      padding: 0 45px;
   }

   #product .h2_ttl {
      width: 43%;
   }

   #product_detail {
      max-width: 100%;
      padding: 0 45px;
      box-sizing: border-box;
   }

   #product_detail .text_box {
      width: auto;
      margin: 0 0 0 50px;
   }

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

   #design {
      padding: 0 50px 110px;
   }

   #design .h2_ttl {
      width: 60%;
   }

   #design .director .white_line {
      padding: 25px 12px;
   }

   #design .img_box .img_box_item-product-up {
      width: 48%;
   }

   #design .director .white_line .director-ttl {
      width: 80%;
   }

   #design .director .white_line .img_box {
      max-width: 100%;
      flex-wrap: wrap;
   }

   #design .director .white_line .img_box .img_box_item_img,
   #design .director .white_line .img_box .img_box_item_text {
      width: 100%;
   }

   #design .director .white_line .img_box .img_box_item_img {
      text-align: center;
      margin-bottom: 20px;
      padding: 0 20px;
   }

   #design .director .white_line .img_box .img_box_item_text p {}

   /*--------------------------------------------------------------------
     history
   --------------------------------------------------------------------*/


   #history .img_box p,
   #history p,
   #history2 .img_box p,
   #history2 p {
      padding: 0 50px;
   }

   .history2_main_img .img_box img {
      height: auto;
   }

   #history2 .h2_ttl {
      width: 40%;
   }


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

   #members {
      height: 700px;
      background-image: url(../img/members_banner_sp.jpg);
      background-size: contain;
   }

   #tour {
      height: 850px;
      background-image: url(../img/tour_banner_sp.jpg);
      background-size: cover;
      background-position: center top;
   }

   #members,
   #tour {
      display: block;
   }

   #members {
      margin-top: 80px;
   }

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

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

   #members .text_box .h3_ttl {
      color: #C9AD76;
      font-size: 28px;
   }

   #tour .text_box .h3_ttl {
      font-size: 22px;
      line-height: 2rem;
   }

   #members .text_box,
   #tour .text_box {
      padding: 30px 50px;
      box-sizing: border-box;
      top: 80%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      -webkit- transform: translateY(-50%) translateX(-50%);
      margin: auto;
   }

   #members .text_box {
      top: 80%;
   }

   #tour .text_box {
      top: 90%;
   }

   #members .text_box p,
   #tour .text_box p {
      letter-spacing: 3px;
   }

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

   #members .text_box .btn_box a,
   #tour .text_box .btn_box a {
      width: auto;
   }

   #tour .text_box .sub_text {
      font-size: 1.2rem;
      letter-spacing: 4px;
   }


}

@media screen and (max-width: 599px) {
   body {}

   body * {
      font-size: 16px;
      line-height: 2rem;
   }

   .pc {
      display: none;
   }

   .sp {
      display: block;
   }

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

   div.suntory_contents_box:last-of-type {
      margin: 0 0 100px 0;
   }

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

   .w-100 {
      padding: 0;
   }

   .h2_ttl {
      font-size: 25px;
      line-height: 2rem;
      margin-bottom: 15px;
      text-align: center;
   }

   .h3_ttl {
      font-size: 25px;
      letter-spacing: 2px;
      line-height: 2rem;
      margin-bottom: 20px;
   }



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

   #top-image {
      height: 544px;
      background: url(../img/top-mainvisual_sp.jpg) no-repeat;
      margin-top: 20px;
      background-size: contain;
      background-position: right;
   }

   #top-image .mainvisual {
      max-width: 100%;
      display: block;
   }

   #top-image .mainvisual .img_logo {
      width: 219px;
      top: 0px;
      left: 50%;
      transform: translateX(-50%);
      -webkit- transform: translateX(-50%);
      margin: auto;
   }

   #top-image .mainvisual .img_logo .yamazaki_logo {
      width: 60%;
      margin: 0 auto 20px;
   }

   #top-image .mainvisual .img_logo .yamazaki_limited_logo {
      width: 100%;
   }

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

   #movie {
      height: 370px;
   }

   .movie_inner {
      width: 100%;
      padding-top: 100px;
   }

   #movie .movie_inner .img_logo {
      width: 193px;
      margin: 0 auto 15px;
   }

   .movie_thumb {
      margin: 20px auto 0;
   }

   .movie_thumb img {
      height: auto;
   }

   .play_btn {
      width: 78px;
      height: 78px;
      top: 65%;
   }

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

   .wood_back {
      background-size: cover;
      padding-top: 10px;
   }

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

   #product .h2_ttl {
      width: 80%;
      margin: 0 auto 20px;
   }

   #product_detail {
      display: block;
      margin: 0 0 50px 0;
      padding: 0 20px;
   }

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

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

   #product_detail .text_box {
      width: 100%;
      margin: 0;
   }

   #product_detail .text_box .note_description {
      margin: 20px 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: 80px;
   }

   #product_detail .text_box .note_description td {
      padding: 5px 0 5px 0;
      font-size: 14px;
   }

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

   #product_detail .text_box .note_image li {}

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

   #design {
      margin: 30px 0 0 0;
      padding: 0 20px 50px;
   }

   #design .h2_ttl {
      width: 100%;
      margin: 0 auto 20px;
   }

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

   #design .img_box .img_box_item {
      margin: 0;
   }

   #design > div.img_box.flex > div:nth-child(2) {
      margin-left: 10px;
   }

   #design .img_box .factory_img {
      width: 100%;
      margin-top: 50px;
   }

   #design .director p.director-name {
      font-size: 0.8rem;
   }

   /*--------------------------------------------------------------------
   history
   --------------------------------------------------------------------*/

   #history {
      margin: -50px auto 0;
   }

   #history .h2_ttl {
      width: 90%;
      margin: 0 auto 10px;
   }

   #history .sub_ttl {
      font-size: 14px;
      margin: 0;
   }

   #history .sub_ttl::before,
   #history .sub_ttl::after {
      content: '';
      width: 20px;
      height: 2px;
      margin: 0 10px;
      background: #fff;
   }

   #history .img_box,
   #history2 .img_box {
      padding: 0;
   }

   #history .img_box {
      justify-content: center;
      margin-top: 30px;
   }

   #history .img_box .img_box_item {
      width: 70%;
   }

   #history .flex .img_box_item {
      width: 100%;
      margin: 0 8px;
   }

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

   #history .img_box p,
   #history p,
   #history2 .img_box p,
   #history2 p {
      padding: 0;
   }


   /*--------------------------------------------------------------------
   history2
   --------------------------------------------------------------------*/

   #history2 {
      margin: -100px auto 0;
   }

   .history2_main_img {
      height: auto;
   }

   #history2 .h2_ttl {
      width: 80%;
      margin: 0 auto 20px;
   }

   #history2 .img_box {
      justify-content: center;
      margin-top: 66px;
   }

   #history2 .img_box .img_box_item {
      width: 70%;
   }

   #history2 .flex .img_box_item {
      width: 100%;
      margin: 0 8px;
   }

   #history2 .img_box p,
   #history2 p {
      margin-top: 30px;
   }

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

   #members {
      position: relative;
      height: 550px;
      background-image: url(../img/members_banner_sp.jpg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right top;
      margin-top: 100px;
   }

   #tour {
      position: relative;
      height: 600px;
      background-image: url(../img/tour_banner_sp.jpg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: left top;
   }

   #members,
   #tour {
      display: block;
   }

   #members {
      margin-top: 80px;
   }

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

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

   #members .text_box .h3_ttl {
      color: #C9AD76;
      font-size: 28px;
   }

   #tour .text_box .h3_ttl {
      font-size: 22px;
      line-height: 2rem;
   }

   #members .text_box,
   #tour .text_box {
      padding: 30px 20px;
      box-sizing: border-box;
      top: 80%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      -webkit- transform: translateY(-50%) translateX(-50%);
      margin: auto;
   }

   #members .text_box {
      top: 70%;
   }

   #members .text_box p,
   #tour .text_box p {
      letter-spacing: 3px;
   }

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

   #members .text_box .btn_box a,
   #tour .text_box .btn_box a {
      width: auto;
   }

   #tour .text_box .sub_text {
      font-size: 1.2rem;
      letter-spacing: 4px;
   }

}

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

   /* 320pxまでの幅の場合に適応される */
   body {}
}