@charset "UTF-8";

*[data-bg="beige"] {
  background-color: var(--color-beige);
}


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


  /*---------
  headline
  ---------*/

  .headline {
    position: relative;
  }

  .headline .headline_ttl {
    margin: 0;
  }

  .headline .headline_ttl span[data-type="jp"] {
    line-height: 1.6;
    width: 8em;
  }

  .headline .headline_desc {
    display: flex;
    /* justify-content: center; */
    /* justify-content: flex-end; */
    gap: var(--px-90);
    margin: var(--px-100-) 0 var(--px-70) 0;
    padding: 0 0 0 var(--px-27);
  }

  .headline .headline_txt {
    font-size: var(--px-18);
    line-height: 3.27;
    margin: var(--px-160) 0 var(--px-200) 0;
    /* width: calc(100% - var(--px-670)); */
  }

  #kv-slider {
    display: flex;
    height: var(--px-500);
    width: 53%;
    position: absolute;
    top: var(--px-200);
    right: 0;
  }

  #kv-slider .swiper-slide {
    display: flex;
    width: var(--px-720);
    transition: transform 0.6s cubic-bezier(.4, 0, .2, 1);
  }

  #kv-slider .kv_slide {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }

  #kv-slider .kv_slide img {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 6.0s cubic-bezier(.4, 0, .2, 1);
  }

  .swiper-slide.swiper-slide-active .kv_slide img {
    transform: translateX(-20%);
    /* 左へ20%スライド */
  }


  .side_logo {
    aspect-ratio: 27 / 211;
    position: absolute;
    left: var(--px-5);
    top: var(--px-360);
    width: var(--px-27);
  }

  .side_logo svg {
    aspect-ratio: 27 / 211;
    width: 100%;
    height: auto;
  }


  /*---------
  btn_list
  ---------*/

  .btn_list.js_fix_anchor ul li .btn {
    width: var(--px-280);
  }


  /*============================
  #about
  ============================*/
  #about {
    padding: var(--px-120) 0 var(--px-100) 0;
  }

  #about h2.about_ttl {
    display: flex;
    flex-direction: column;
    gap: var(--px-28);
    margin: 0 0 var(--px-68) 0;
  }

  #about h2.about_ttl span[data-type="en"] {
    font-family: "Vollkorn", serif;
    font-size: var(--px-64);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  #about h2.about_ttl span[data-type="jp"] {
    font-size: var(--px-16);
    font-weight: 500;
    letter-spacing: 0.18em;
  }

  #about .definition {
    display: flex;
    gap: var(--px-140);
    margin: 0 0 var(--px-80) 0;
  }

  #about .definition .definition_desc {
    width: calc(100% - var(--px-410) - var(--px-140));
  }

  #about .definition .definition_desc h3.definition_subttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 var(--px-48) 0;
  }

  #about .definition .definition_desc p.definition_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: 0 0 var(--px-24) 0;
  }

  #about .definition .definition_desc p.definition_lead {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 var(--px-24) 0;
  }

  #about .definition .definition_img {
    aspect-ratio: 410 / 357;
    width: var(--px-410);
    position: relative;
  }

  #about .definition .definition_img [data-num="2"],
  #about .definition .definition_img [data-num="3"] {
    position: absolute;
  }

  #about .definition .definition_img [data-num="2"] {
    left: var(--px-60-);
    top: var(--px-320);
    width: var(--px-260);
  }

  #about .definition .definition_img [data-num="3"] {
    right: var(--px-100-);
    top: var(--px-280);
    width: var(--px-190);
  }

  #about .definition .definition_img img {
    width: 100%;
    height: auto;
  }

  #about .definition .definition_img p {
    position: absolute;
    right: 0;
    top: var(--px-460);
  }



  #about .kind {
    padding: var(--px-120) 0 var(--px-100) 0;
  }

  #about .kind .kind_desc h3.kind_subttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 var(--px-48) 0;
  }

  #about .kind .kind_desc p.kind_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: 0 0 var(--px-40) 0;
  }

  #about .kind .kind_img img {
    width: 100%;
    height: auto;
  }

  #about .kind .kind_list {
    padding: var(--px-74) 0 0 0;
  }

  #about .kind .kind_list .kind_item {
    display: flex;
    gap: var(--px-80);
    margin: 0 0 var(--px-80) 0;
    position: relative;
  }

  #about .kind .kind_list .kind_item dl.kind_desc {
    width: calc(100% - var(--px-390) - var(--px-80));
  }

  #about .kind .kind_list .kind_item dl.kind_desc dt h4 {
    font-size: var(--px-18);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 var(--px-24) 0;
  }

  #about .kind .kind_list .kind_item dl.kind_desc dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

  #about .kind .kind_list .kind_item .kind_products {
    display: flex;
    gap: var(--px-25);
    width: var(--px-390);
  }

  #about .kind .kind_list .kind_item[data-name="single_malt"] .kind_products {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }

  #about .kind .kind_list .kind_item .kind_products .product {
    width: calc((100% - var(--px-25)) / 2);
  }

  #about .kind .kind_list .kind_item .kind_products .product .product_bottle {
    width: 100%;
    height: var(--px-240);
    position: relative;
  }

  #about .kind .kind_list .kind_item .kind_products .product .product_bottle img {
    width: var(--px-240);
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #about .kind .kind_list .kind_item .kind_products .product .product_name p.product_ttl {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.6;
    margin: 0 0 0.8em 0;
  }


  #about .kind .kind_btn {
    margin: 0 auto;
    padding: var(--px-60) 0 0 0;
    text-align: center;
    width: var(--px-520);
  }

  #about .kind .kind_btn a .btn {
    width: 100%;
    height: var(--px-100);
    justify-content: center;
    text-align: center;
  }

  #about .kind .kind_btn a .btn[data-type="blank"]::after {
    width: var(--px-19);
    height: var(--px-19);
    top: var(--px-15);
    right: var(--px-15);
  }

  #about .kind .kind_btn a .btn span {
    font-size: var(--px-20);
    line-height: 1.7;
  }



  #about .aged {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--px-80);
    padding: var(--px-90) 0 0 0;
  }

  #about .aged h3.aged_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 1.5em 0;
    flex: 0 0 100%;
  }

  #about .aged .aged_desc {
    width: calc(100% - var(--px-420) - var(--px-80));
  }

  #about .aged .aged_desc dl dt {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 0.5em 0;
  }

  #about .aged .aged_desc dl dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

  #about .aged .aged_img {
    width: var(--px-420);
  }

  #about .aged .aged_img img {
    width: 100%;
    height: auto;
  }

  #about .storage {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--px-80);
    padding: var(--px-50) 0 var(--px-100) 0;
  }

  #about .storage h3.storage_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 1.5em 0;
    flex: 0 0 100%;
  }

  #about .storage .storage_desc {
    width: calc(100% - var(--px-420) - var(--px-80));
  }

  #about .storage .storage_desc dl+dl {
    margin: var(--px-40) 0 0 0;
  }

  #about .storage .storage_desc dl dt {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 0.5em 0;
  }

  #about .storage .storage_desc dl dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

  #about .storage .storage_img {
    width: var(--px-420);
  }

  #about .storage .storage_img img {
    width: 100%;
    height: auto;
  }



  /*============================
  #making
  ============================*/
  #making {
    padding: var(--px-100) 0;
    position: relative;
  }

  #making #js-fix-text {
    font-family: "Vollkorn", serif;
    font-size: var(--px-50);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    top: var(--px-50);
    left: var(--px-50);
    transition: top 0.3s ease;
  }

  #making #js-fix-text.is-fixed {
    position: fixed;
    top: var(--px-150);
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  #making #js-fix-text.is-fixed.is-stopped {
    opacity: 0;
  }

  #making h2.making_ttl {
    display: flex;
    flex-direction: column;
    gap: var(--px-28);
    margin: 0 0 var(--px-68) 0;
  }

  #making h2.making_ttl span[data-type="en"] {
    font-family: "Vollkorn", serif;
    font-size: var(--px-64);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  #making h2.making_ttl span[data-type="jp"] {
    font-size: var(--px-16);
    font-weight: 500;
    letter-spacing: 0.18em;
  }

  #making p.making_lead {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: 0 0 3em 0;
  }


  #making .btn_list ul li a.btn {
    width: var(--px-340);
  }

  #making .btn_list ul li a.btn::after {
    content: "";
    aspect-ratio: 1/1;
    display: block;
    position: absolute;
    bottom: var(--px-12);
    right: var(--px-12);
    width: var(--px-12);
    height: var(--px-12);
    background-image: url("/common/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform: rotate(135deg);
  }

  #making .btn_list ul li a.btn:hover::after {
    background-image: url("/common/img/icon_arrow_white.svg");
  }



  /*============================
  #malt
  ============================*/
  #making #malt {
    padding: var(--px-100) 0;
  }

  #making #malt h3.malt_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 1.5em 0;
  }

  #making #malt .malt_img img {
    width: 100%;
    height: auto;
  }


  /*============================
  .steps
  ============================*/
  .steps {
    padding: var(--px-50) 0 0 0;
  }

  .steps .step+.step {
    margin: 80px 0 0 0;
  }

  #malt .steps .step[data-num="2"] {
    margin: 40px 0 0 0;
  }

  #malt .steps .step[data-num="3"] {
    margin: 50px 0 0 0;
  }

  #malt .steps .step[data-num="4"] {
    margin: 100px 0 0 0;
  }

  #malt .steps .step[data-num="5"] {
    margin: 120px 0 0 0;
  }

  #malt .steps .step[data-num="6"] {
    margin: 120px 0 0 0;
  }

  #malt .steps .step[data-num="7"] {
    margin: 40px 0 0 0;
  }

  #malt .steps .step[data-num="8"] {
    margin: 120px 0 0 0;
  }

  #grain .steps .step[data-num="2"] {
    margin: 30px 0 0 0;
  }

  #grain .steps .step[data-num="3"] {
    margin: 120px 0 0 0;
  }

  #grain .steps .step[data-num="4"] {
    margin: 120px 0 0 0;
  }

  #grain .steps .step[data-num="5"] {
    margin: 120px 0 0 0;
  }



  .steps .step .step_unit {
    display: flex;
    gap: var(--px-50);
  }

  .steps .step .step_unit[data-align="center"] {
    align-items: center;
  }

  .steps .step .step_unit .step_desc {
    width: calc(100% - var(--px-390) - var(--px-50));
  }

  .steps .step .step_unit .step_desc h4.step_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.4;
    margin: 0 0 1.0em 0;
    position: relative;
  }

  .steps .step+.step .step_unit .step_desc h4.step_ttl::before {
    content: "";
    position: absolute;
    /* top: var(--px-100-); */
    top: -80px;
    left: var(--px-40);
    width: var(--px-10);
    height: var(--px-56);
    background-image: url("/discover/knowledge/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .steps .step .step_unit .step_desc h4.step_ttl span {
    display: inline-block;
    font-family: "Lato", serif;
    font-size: var(--px-36);
    font-weight: 300;
    letter-spacing: 0.05em;
    margin: 0 0.5em 0 0;
    transform: translate(0, 0.05em);
  }

  .steps .step .step_unit .step_desc p.step_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

  .steps .step .step_unit .step_desc a.step_more {
    display: inline-block;
    vertical-align: middle;
    font-family: "Lato", serif;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: var(--px-20) 0 0 0;
  }

  .steps .step .step_unit .step_desc a.step_more.is-active {
    opacity: 0;
    pointer-events: none;
  }

  .steps .step .step_unit .step_desc a.step_more::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: var(--px-32);
    height: var(--px-32);
    margin: 0 var(--px-23) 0 0;
    background-image: url("/discover/knowledge/img/icon_plus.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .steps .step .step_unit .step_img {
    width: var(--px-390);
    text-align: center;
  }
  .steps .step[data-num="1"] .step_unit .step_img {
    width: var(--px-350);
    text-align: right;
  }
  .steps .step[data-num="1"] .step_unit .step_img p {
    text-align: right;
    margin: var(--px-10) 0 0 0;
  }

  .steps .step .step_ac {
    box-sizing: border-box;
    padding: var(--px-46);
    margin: var(--px-30) 0;
    display: none;
  }

  #malt .steps .step .step_ac {
    background-color: #dbdada;
  }

  #grain .steps .step .step_ac {
    background-color: #e1dbc8;
  }


  .steps .step .step_ac .step_ac_unit {
    display: flex;
    gap: var(--px-50);
  }

  .steps .step .step_ac .step_ac_unit+.step_ac_unit {
    margin: var(--px-48) 0 0 0;
  }

  .steps .step .step_ac .step_ac_desc dt {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 0.5em 0;
  }

  #malt .steps .step[data-num="4"] .step_ac .step_ac_desc>dt,
  #malt .steps .step[data-num="5"] .step_ac .step_ac_desc>dt {
    font-size: var(--px-18);
  }

  .steps .step .step_ac .step_ac_desc dd,
  .steps .step .step_ac .step_ac_desc p {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

  .steps .step[data-num="5"] .step_ac .step_ac_desc p {
    margin: var(--px-60-) 0 0 0;
  }

  #malt .steps .step .step_ac .step_ac_desc {
    width: 100%;
  }

  #malt .steps .step[data-num="5"] .step_ac .step_ac_desc {
    max-width: 720px;
  }

  #malt .steps .step[data-num="1"] .step_ac .step_ac_desc {
    width: calc(100% - var(--px-210) - var(--px-50));
  }

  #malt .steps .step[data-num="1"] .step_ac .step_ac_img {
    width: var(--px-210);
  }

  #malt .steps .step[data-num="4"] .step_ac .step_ac_img {
    width: var(--px-300);
  }

  #malt .steps .step[data-num="5"] .step_ac .step_ac_img {
    display: flex;
    flex-direction: column;
    gap: var(--px-34);
    width: var(--px-330);
    text-align: center;
  }



  #grain .steps .step[data-num="1"] .step_ac .step_ac_img {
    width: var(--px-330);
  }
  #grain .steps .step[data-num="4"] .step_ac .step_ac_img {
    display: flex;
    flex-direction: column;
    gap: var(--px-34);
  }



  .steps .step .step_ac a.step_close {
    display: inline-block;
    vertical-align: middle;
    font-family: "Lato", serif;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: var(--px-20) 0 0 0;
  }

  .steps .step .step_ac a.step_close::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: var(--px-32);
    height: var(--px-32);
    margin: 0 var(--px-23) 0 0;
    background-image: url("/discover/knowledge/img/icon_minus.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }


  .steps .step .step_ac h5 {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 1.5em 0;
  }

  .steps .step .step_ac .step_ac_list {
    display: flex;
    flex-direction: column;
    gap: var(--px-36);
    margin: var(--px-30) 0 0 0;
  }

  .steps .step .step_ac .step_ac_list li {
    display: flex;
    gap: var(--px-18);
  }

  .steps .step .step_ac .step_ac_note {
    border: 1px solid #000;
    box-sizing: border-box;
    width: calc(100% - var(--px-510) - var(--px-18));
  }

  .steps .step .step_ac .step_ac_note dt {
    border-bottom: 1px solid #000;
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    padding: 0.75em 2.0em;
  }

  .steps .step .step_ac .step_ac_note dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    padding: 1em;
  }

  .steps .step .step_ac .step_ac_noteimg {
    width: var(--px-510);
  }




  .steps .step .step_ac .step_ac_btn_list {
    display: flex;
    gap: var(--px-20);
    margin: var(--px-48) 0;
  }

  .steps .step .step_ac .step_ac_btn_list li a .btn {
    width: var(--px-210);
  }

  .steps .step .step_btn {
    margin: var(--px-24) 0 0 0;
  }

  #grain .steps .step[data-num="5"] .step_btn {
    margin: var(--px-16) 0 var(--px-24) 0;
  }

  #malt .steps .step[data-num="7"] .step_btn .btn {
    width: var(--px-350);
  }

  #grain .steps .step[data-num="5"] .step_btn .btn {
    width: var(--px-400);
  }





  /*============================
  #grain
  ============================*/
  #making #grain {
    padding: var(--px-100) 0;
  }

  #making #grain h3.grain_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 1.5em 0;
  }

  #making #grain .grain_img img {
    width: 100%;
    height: auto;
  }


  /*============================
  #blended
  ============================*/
  #making #blended {
    padding: var(--px-100) 0;
  }

  #making #blended h3.blended_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 1.5em 0;
  }

  #making #blended .blended_img img {
    width: 100%;
    height: auto;
  }



  #making #blended .blended_process_unit {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--px-80);
    padding: var(--px-50) 0 var(--px-100) 0;
  }

  #making #blended .blended_process_unit h3.blended_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 1.5em 0;
    flex: 0 0 100%;
  }

  #making #blended .blended_process_unit .blended_process_desc {
    width: calc(100% - var(--px-420) - var(--px-80));
  }

  #making #blended .blended_process_unit .blended_process_desc dt {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 0.5em 0;
  }

  #making #blended .blended_process_unit .blended_process_desc dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

  #making #blended .blended_process_unit .blended_process_img {
    width: var(--px-420);
  }

  #making #blended .blended_process_unit .blended_process_img img {
    width: 100%;
    height: auto;
  }



  #making #blended .blended_note_unit {
    border: 1px solid #000;
    box-sizing: border-box;
    display: flex;
    gap: var(--px-30);
    padding: var(--px-48);
    align-items: center;
  }

  #making #blended .blended_note_unit .blended_note_desc {
    width: calc(100% - var(--px-270) - var(--px-30));
  }

  #making #blended .blended_note_unit .blended_note_desc dt {
    font-size: var(--px-18);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 0.5em 0;
  }

  #making #blended .blended_note_unit .blended_note_desc dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

  #making #blended .blended_note_unit .blended_note_desc dd .blended_note_btn {
    margin: var(--px-20) 0 0 0;
  }

  #making #blended .blended_note_unit .blended_note_desc dd .blended_note_btn .btn {
    width: var(--px-350);
  }




  #making #blended .blended_note_unit .blended_note_img {
    width: var(--px-270);
  }

  #making #blended .blended_note_unit .blended_note_img img {
    width: 100%;
    height: auto;
  }



}

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

  /*---------
  headline
  ---------*/

  .headline {
    position: relative;
  }

  .headline .headline_ttl {
    margin: 0;
  }

  .headline .headline_ttl span[data-type="jp"] {
    line-height: 1.6;
    width: 8em;
  }

  .headline .headline_desc {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--px-30);
    margin: var(--px-100-) 0 var(--px-70) 0;
    padding: 0 0 0 var(--px-27);
  }

  .headline .headline_txt {
    font-size: var(--px-15);
    line-height: 2.33;
    margin: 0;
    /* width: calc(100% - var(--px-670)); */
  }

  #kv-slider {
    display: flex;
    height: var(--px-250);
    width: 100vw;
    margin: 36vw 0 0 -13vw;
  }

  #kv-slider .swiper-slide {
    display: flex;
    width: var(--px-720);
    transition: transform 0.6s cubic-bezier(.4, 0, .2, 1);
  }

  #kv-slider .kv_slide {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }

  #kv-slider .kv_slide img {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 6.0s cubic-bezier(.4, 0, .2, 1);
  }

  .swiper-slide.swiper-slide-active .kv_slide img {
    transform: translateX(-20%);
    /* 左へ20%スライド */
  }


  .side_logo {
    aspect-ratio: 27 / 211;
    position: absolute;
    left: var(--px-5);
    top: var(--px-560);
    width: var(--px-27);
  }

  .side_logo svg {
    aspect-ratio: 27 / 211;
    width: 100%;
    height: auto;
  }


  /*---------
  btn_list
  ---------*/

  .btn_list.js_fix_anchor ul li .btn {
    width: 100%;
  }



  /*---------
  SP用画像スライダー
  ---------*/
  .js-sp-slider {
    overflow: hidden;
    margin: 0 -6vw 0 0;
    padding: 0 6vw 0 0;
  }

  .js-sp-slider-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: calc(100% + 6vw);
  }
/*
  .js_isSafari .js-sp-slider-wrapper,
  .Android .js-sp-slider-wrapper,
  .js_isFirefox .js-sp-slider-wrapper,
  .js_isIe .js-sp-slider-wrapper {
    padding: 0 6vw 0 0;
  }

  .js_isSafari.js_isWin .js-sp-slider-wrapper,
  .Android.js_isWin .js-sp-slider-wrapper,
  .js_isEdge .js-sp-slider-wrapper {
    padding: 0;
  }
*/


  .js-sp-slider-item {
    flex: 0 0 120%;
    /* 画面幅より大きく設定 */
    scroll-snap-align: center;

    /* padding: 0 6vw 0 0; */
  }

  .js-sp-slider-item img {
    width: 100%;
    height: auto;
    display: block;
  }

  .js-sp-slider-nav {
    display: flex;
    justify-content: space-between;
    margin: 3vw -3vw 0 -3vw;
  }

  .js-sp-slider-nav-btn {
    cursor: pointer;
    color: #000;
    font-family: 'Arial', 'sans-serif';
    font-size: 2.4rem;
    font-weight: 100;
    background: none;
    border: none;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Remove default button styles */
    outline: none;
    transform: scaleX(0.8);
  }
  .js-sp-slider-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }


  /*============================
  #about
  ============================*/
  #about {
    padding: var(--px-70) 0 0 0;
  }

  #about h2.about_ttl {
    display: flex;
    flex-direction: column;
    gap: var(--px-28);
    margin: 0 0 var(--px-68) 0;
  }

  #about h2.about_ttl span[data-type="en"] {
    font-family: "Vollkorn", serif;
    font-size: var(--px-58);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  #about h2.about_ttl span[data-type="jp"] {
    font-size: var(--px-19);
    font-weight: 500;
    letter-spacing: 0.18em;
  }

  #about .definition {
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
    margin: 0 0 var(--px-80) 0;
  }

  #about .definition .definition_desc {
    width: 100%;
  }

  #about .definition .definition_desc h3.definition_subttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 var(--px-48) 0;
  }

  #about .definition .definition_desc p.definition_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: 0 0 var(--px-24) 0;
  }

  #about .definition .definition_desc p.definition_lead {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 var(--px-24) 0;
  }

  #about .definition .definition_img {
    aspect-ratio: 410 / 357;
    width: var(--px-270);
    margin: 0 auto;
    position: relative;
  }

  #about .definition .definition_img [data-num="2"],
  #about .definition .definition_img [data-num="3"] {
    position: absolute;
  }

  #about .definition .definition_img [data-num="2"] {
    left: var(--px-30-);
    bottom: var(--px-100-);
    width: var(--px-170);
  }

  #about .definition .definition_img [data-num="3"] {
    right: var(--px-40-);
    bottom: var(--px-15-);
    width: var(--px-120);
  }

  #about .definition .definition_img img {
    width: 100%;
    height: auto;
  }

  #about .definition .definition_img p {
    position: absolute;
    right: var(--px-40-);
    bottom: var(--px-60-);
  }


  #about .kind {
    padding: var(--px-120) 0 var(--px-100) 0;
  }

  #about .kind .kind_desc h3.kind_subttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 var(--px-48) 0;
  }

  #about .kind .kind_desc p.kind_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: 0 0 var(--px-40) 0;
  }


  #about .kind .kind_img .js-sp-slider-item {
    flex: 0 0 240%;
  }

  #about .kind .kind_img img {
    width: 100%;
    height: auto;
  }

  #about .kind .kind_list {
    padding: var(--px-74) 0 0 0;
  }

  #about .kind .kind_list .kind_item {
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
    margin: 0 0 var(--px-60) 0;
    position: relative;
  }

  #about .kind .kind_list .kind_item dl.kind_desc {
    width: 100%;
  }

  #about .kind .kind_list .kind_item dl.kind_desc dt h4 {
    font-size: var(--px-18);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 var(--px-24) 0;
  }

  #about .kind .kind_list .kind_item dl.kind_desc dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

  #about .kind .kind_list .kind_item .kind_products {
    display: flex;
    justify-content: center;
    gap: var(--px-25);
    width: 100%;
  }

  #about .kind .kind_list .kind_item[data-name="single_malt"] .kind_products {
    /* position: absolute; */
    /* top: 0; */
    /* right: 0; */
  }

  #about .kind .kind_list .kind_item .kind_products .product {
    width: calc((100% - var(--px-25)) / 2);
  }

  #about .kind .kind_list .kind_item .kind_products .product .product_bottle {
    width: 100%;
    height: var(--px-210);
    position: relative;
  }

  #about .kind .kind_list .kind_item .kind_products .product .product_bottle img {
    width: var(--px-240);
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #about .kind .kind_list .kind_item .kind_products .product .product_name p.product_ttl {
    font-size: var(--px-14);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.6;
    margin: 0 0 0.8em 0;
    white-space: nowrap;
  }


  #about .kind .kind_btn {
    margin: 0 auto;
    padding: var(--px-10) 0 0 0;
    text-align: center;
    width: 100%;
  }

  #about .kind .kind_btn a .btn {
    width: 100%;
    height: var(--px-80);
    justify-content: center;
    text-align: center;
  }

  #about .kind .kind_btn a .btn[data-type="blank"]::after {
    width: var(--px-14);
    height: var(--px-14);
    top: var(--px-15);
    right: var(--px-15);
  }

  #about .kind .kind_btn a .btn span {
    font-size: var(--px-15);
    line-height: 1.7;
  }



  #about .aged {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: var(--px-80);
    padding: var(--px-70) 0 0 0;
  }

  #about .aged h3.aged_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 1.3em 0;
    flex: 0 0 100%;
  }

  #about .aged .aged_desc {
    width: 100%;
  }

  #about .aged .aged_desc dl {}

  #about .aged .aged_desc dl dt {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.8;
    margin: 0 0 1em 0;
  }

  #about .aged .aged_desc dl dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.867;
  }

  #about .aged .aged_img {
    width: 100%;
  }

  #about .aged .aged_img img {
    width: 100%;
    height: auto;
  }

  #about .storage {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: var(--px-80);
    padding: var(--px-50) 0 var(--px-100) 0;
  }

  #about .storage h3.storage_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.667;
    margin: 0 0 1.5em 0;
    /* flex: 0 0 100%; */
  }

  #about .storage .storage_desc {
    width: 100%;
  }

  #about .storage .storage_desc dl+dl {
    margin: var(--px-40) 0 0 0;
  }

  #about .storage .storage_desc dl dt {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 0.5em 0;
  }

  #about .storage .storage_desc dl dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
  }

  #about .storage .storage_img {
    width: var(--px-290);
    margin: var(--px-40) auto 0 auto;
  }

  #about .storage .storage_img img {
    width: 100%;
    height: auto;
  }



  /*============================
  #making
  ============================*/
  #making {
    padding: var(--px-100) 0;
    position: relative;
  }

  #making #js-fix-text {
    font-family: "Vollkorn", serif;
    font-size: var(--px-50);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    top: var(--px-50);
    left: var(--px-50);
    transition: top 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }

  #making #js-fix-text.is-fixed {
    position: fixed;
    top: var(--px-150);
  }

  #making h2.making_ttl {
    display: flex;
    flex-direction: column;
    gap: var(--px-28);
    margin: 0 0 var(--px-68) 0;
  }

  #making h2.making_ttl span[data-type="en"] {
    font-family: "Vollkorn", serif;
    font-size: var(--px-64);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  #making h2.making_ttl span[data-type="jp"] {
    font-size: var(--px-16);
    font-weight: 500;
    letter-spacing: 0.18em;
  }

  #making p.making_lead {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: 0 0 3em 0;
  }


  #making .btn_list.js_anchor_list ul {
    display: flex;
    gap: var(--px-20);
  }

  #making .btn_list.js_anchor_list ul li {
    width: calc((100% - var(--px-20)) / 2);
  }

  #making .btn_list ul li a.btn {
    width: 100%;
    height: var(--px-60);
  }

  #making .btn_list ul li a.btn::after {
    content: "";
    aspect-ratio: 1/1;
    display: block;
    position: absolute;
    bottom: var(--px-12);
    right: var(--px-6);
    width: var(--px-9);
    height: var(--px-9);
    background-image: url("/common/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform: rotate(135deg);
  }

  #making .btn_list ul li a.btn:hover::after {
    background-image: url("/common/img/icon_arrow_white.svg");
  }



  /*============================
  #malt
  ============================*/
  #making #malt {
    padding: var(--px-100) 0;
  }

  #making #malt h3.malt_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.48;
    margin: 0 0 1.5em 0;
  }

  #making #malt h3.malt_ttl span {
    font-family: "Vollkorn", serif;
    font-size: var(--px-20);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
    margin: 0 0 0.5em 0;
  }

  #making #malt .malt_img .js-sp-slider-item {
    flex: 0 0 320%;
  }

  #making #malt .malt_img img {
    width: 100%;
    height: auto;
  }


  /*============================
  .steps
  ============================*/
  .steps {
    padding: var(--px-50) 0 0 0;
  }

  .steps .step+.step {
    margin: var(--px-100) 0 0 0;
  }

  #malt .steps .step[data-num="2"] {
    /* margin: var(--px-10-) 0 0 0; */
  }

  #malt .steps .step[data-num="3"] {
    /* margin: var(--px-50) 0 0 0; */
  }

  #malt .steps .step[data-num="4"] {
    /* margin: var(--px-70) 0 0 0; */
  }

  #malt .steps .step[data-num="5"] {
    margin: var(--px-120) 0 0 0;
  }

  #malt .steps .step[data-num="6"] {
    margin: var(--px-120) 0 0 0;
  }

  #malt .steps .step[data-num="7"] {
    /* margin: var(--px-40) 0 0 0; */
  }

  #malt .steps .step[data-num="8"] {
    margin: var(--px-120) 0 0 0;
  }

  #grain .steps .step[data-num="2"] {
    /* margin: var(--px-10-) 0 0 0; */
  }

  #grain .steps .step[data-num="3"] {
    margin: var(--px-120) 0 0 0;
  }

  #grain .steps .step[data-num="4"] {
    margin: var(--px-120) 0 0 0;
  }

  #grain .steps .step[data-num="5"] {
    margin: var(--px-120) 0 0 0;
  }



  .steps .step .step_unit {
    display: flex;
    flex-direction: column;
    gap: var(--px-30);
  }

  .steps .step .step_unit[data-align="center"] {
    align-items: center;
  }

  .steps .step .step_unit .step_desc {
    width: 100%;
  }

  .steps .step .step_unit .step_desc h4.step_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 1.0em 0;
    position: relative;
  }

  .steps .step+.step .step_unit .step_desc h4.step_ttl::before {
    content: "";
    position: absolute;
    top: var(--px-80-);
    left: var(--px-24);
    width: var(--px-10);
    height: var(--px-56);
    background-image: url("/discover/knowledge/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .steps .step .step_unit .step_desc h4.step_ttl span {
    display: inline-block;
    font-family: "Lato", serif;
    font-size: var(--px-36);
    font-weight: 300;
    letter-spacing: 0.05em;
    margin: 0 0.5em 0 0;
    transform: translate(0, 0.05em);
  }

  .steps .step .step_unit .step_desc h4.step_ttl small {
    display: block;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 1.2em 0 0 0;
  }

  .steps .step .step_unit .step_desc p.step_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.867;
  }

  .steps .step .step_unit>a.step_more {
    display: inline-block;
    vertical-align: middle;
    font-family: "Lato", serif;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.05em;
  }

  .steps .step .step_unit>a.step_more.is-active {
    opacity: 0;
    pointer-events: none;
  }

  .steps .step .step_unit>a.step_more::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: var(--px-32);
    height: var(--px-32);
    margin: 0 var(--px-23) 0 0;
    background-image: url("/discover/knowledge/img/icon_plus.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .steps .step .step_unit .step_img {
    width: var(--px-240);
    margin: 0 auto;
    text-align: center;
  }
  .steps .step[data-num="5"] .step_unit .step_img {
    margin: var(--px-24) auto 0 auto;
  }
  #grain .steps .step[data-num="4"] .step_unit .step_img {
    width: var(--px-220);
  }
  .steps .step[data-num="1"] .step_unit .step_img {
    text-align: right;
  }
  .steps .step[data-num="1"] .step_unit .step_img p {
    text-align: right;
    margin: var(--px-10) 0 0 0;
  }

  .steps .step .step_unit .step_img img {
    width: 100%;
    height: auto;
  }

  .steps .step .step_ac {
    box-sizing: border-box;
    padding: var(--px-40) var(--px-24);
    margin: var(--px-30) -6vw;
    display: none;
  }

  #malt .steps .step .step_ac {
    background-color: #dbdada;
  }

  #grain .steps .step .step_ac {
    background-color: #e1dbc8;
  }


  .steps .step .step_ac .step_ac_unit {
    display: flex;
    flex-direction: column;
    gap: var(--px-30);
  }

  .steps .step .step_ac .step_ac_unit+.step_ac_unit {
    margin: var(--px-30) 0 0 0;
  }

  .steps .step .step_ac .step_ac_desc dt {
    font-size: var(--px-18);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.57;
    margin: 0 0 0.8em 0;
  }

  #malt .steps .step[data-num="4"] .step_ac .step_ac_desc>dt,
  #malt .steps .step[data-num="5"] .step_ac .step_ac_desc>dt {
    font-size: var(--px-18);
    line-height: 1.889;
  }

  .steps .step .step_ac .step_ac_desc dd,
  .steps .step .step_ac .step_ac_desc p {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.867;
  }

  #malt .steps .step .step_ac .step_ac_desc {
    width: 100%;
  }

  #malt .steps .step[data-num="1"] .step_ac .step_ac_desc {
    width: 100%;
  }

  .steps .step .step_ac_unit .step_ac_img {
    margin: 0 auto;
  }

  #malt .steps .step[data-num="1"] .step_ac_unit .step_ac_img {
    width: var(--px-210);
  }

  #malt .steps .step[data-num="4"] .step_ac_unit .step_ac_img {
    width: var(--px-240);
  }

  #malt .steps .step[data-num="5"] .step_ac_unit[data-num="1"] .step_ac_img {
    width: var(--px-300);
  }

  #malt .steps .step[data-num="5"] .step_ac_unit[data-num="2"] .step_ac_img {
    width: var(--px-300);
  }

  #malt .steps .step[data-num="5"] .step_ac_unit[data-num="3"] .step_ac_img {
    width: var(--px-180);
  }

  #malt .steps .step[data-num="5"] .step_ac_unit[data-num="4"] .step_ac_img {
    width: var(--px-260);
  }

  #grain .steps .step[data-num="1"] .step_ac_unit .step_ac_img {
    width: var(--px-330);
  }

  #grain .steps .step[data-num="4"] .step_ac_unit .step_ac_img {
    width: var(--px-240);
    display: flex;
    flex-direction: column;
    gap: var(--px-34);
  }

  .steps .step .step_ac .step_ac_img img {
    width: 100%;
    height: auto;
  }


  .steps .step .step_ac a.step_close {
    display: inline-block;
    vertical-align: middle;
    font-family: "Lato", serif;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin: var(--px-20) 0 0 0;
  }

  .steps .step .step_ac a.step_close::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: var(--px-32);
    height: var(--px-32);
    margin: 0 var(--px-23) 0 0;
    background-image: url("/discover/knowledge/img/icon_minus.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }


  .steps .step .step_ac h5 {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 1.5em 0;
  }

  .steps .step .step_ac .step_ac_list {
    display: flex;
    flex-direction: column;
    gap: var(--px-36);
    margin: var(--px-30) 0 0 0;
  }

  .steps .step .step_ac .step_ac_list li {
    display: flex;
    flex-direction: column;
    gap: var(--px-18);
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.867;
  }

  .steps .step .step_ac .step_ac_note {
    border: 1px solid #000;
    box-sizing: border-box;
    width: 100%;
  }

  .steps .step .step_ac .step_ac_note dt {
    border-bottom: 1px solid #000;
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    padding: 0.6em 1.0em;
    margin: 0;
  }

  .steps .step .step_ac .step_ac_note dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    padding: 1em;
  }

  .steps .step .step_ac .step_ac_noteimg {
    width: 100%;
  }

  .steps .step[data-num="4"] .step_ac .step_ac_noteimg {
    width: var(--px-290);
    margin: 0 auto;
  }

  .steps .step .step_ac .step_ac_noteimg img {
    width: 100%;
    height: auto;
  }




  .steps .step .step_ac .step_ac_btn_list {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    margin: var(--px-30) 0;
  }

  .steps .step .step_ac .step_ac_btn_list li a .btn {
    width: var(--px-210);
    background-color: unset;
  }

  .steps .step .step_btn {
    margin: var(--px-24) 0 0 0;
  }

  #grain .steps .step[data-num="5"] .step_btn {
    margin: var(--px-24) 0;
  }

  #malt .steps .step[data-num="7"] .step_btn .btn {
    width: var(--px-250);
    height: var(--px-60);
  }

  #grain .steps .step[data-num="5"] .step_btn .btn {
    width: var(--px-250);
    height: var(--px-60);
    background-color: unset;
  }





  /*============================
  #grain
  ============================*/
  #making #grain {
    padding: var(--px-36) 0;
  }

  #making #grain h3.grain_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    /* letter-spacing: 0.2em; */
    line-height: 1.48;
    margin: 0 0 1.5em 0;
  }

  #making #grain h3.grain_ttl span {
    font-family: "Vollkorn", serif;
    font-size: var(--px-20);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
    margin: 0 0 0.5em 0;
  }

  #making #grain .grain_img .js-sp-slider-item {
    flex: 0 0 320%;
  }

  #making #grain .grain_img img {
    width: 100%;
    height: auto;
  }


  /*============================
  #blended
  ============================*/
  #making #blended {
    padding: var(--px-46) 0;
  }

  #making #blended h3.blended_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    /* letter-spacing: 0.2em; */
    line-height: 1.48;
    margin: 0 0 1.5em 0;
  }

  #making #blended h3.blended_ttl span {
    font-family: "Vollkorn", serif;
    font-size: var(--px-20);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
    margin: 0 0 0.5em 0;
  }

  #making #blended .blended_img .js-sp-slider-item {
    flex: 0 0 320%;
  }

  #making #blended .blended_img img {
    width: 100%;
    height: auto;
  }



  #making #blended .blended_process_unit {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--px-80);
    padding: var(--px-50) 0;
  }

  #making #blended .blended_process_unit h3.blended_ttl {
    font-size: var(--px-27);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 1.5em 0;
    flex: 0 0 100%;
  }

  #making #blended .blended_process_unit .blended_process_desc {
    width: 100%;
  }

  #making #blended .blended_process_unit .blended_process_desc dt {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 0.5em 0;
  }

  #making #blended .blended_process_unit .blended_process_desc dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.867;
  }

  #making #blended .blended_process_unit .blended_process_img {
    width: var(--px-240);
    margin: var(--px-30) auto 0 auto;
  }

  #making #blended .blended_process_unit .blended_process_img img {
    width: 100%;
    height: auto;
  }



  #making #blended .blended_note_unit {
    border: 1px solid #000;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--px-30);
    padding: var(--px-25);
  }

  #making #blended .blended_note_unit .blended_note_desc {
    width: 100%;
  }

  #making #blended .blended_note_unit .blended_note_desc dt {
    font-size: var(--px-18);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 2.0;
    margin: 0 0 0.5em 0;
  }

  #making #blended .blended_note_unit .blended_note_desc dd {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.867;
  }

  #making #blended .blended_note_unit .blended_note_desc dd .blended_note_btn {
    margin: var(--px-20) 0 0 0;
  }

  #making #blended .blended_note_unit .blended_note_desc dd .blended_note_btn .btn {
    width: var(--px-250);
    height: var(--px-60);
  }

  #making #blended .blended_note_unit .blended_note_img {
    width: var(--px-240);
    margin: 0 auto;
  }

  #making #blended .blended_note_unit .blended_note_img img {
    width: 100%;
    height: auto;
  }

}



@media screen and (min-width: 1512px) {

  .swiper-slide.swiper-slide-active .kv_slide img {
    transform: translateX(-15%);
    /* 左へ15%スライド */
  }

}

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

  #malt .steps .step[data-num="2"] {
    margin: 80px 0 0 0;
  }

  #malt .steps .step[data-num="3"] {
    margin: 80px 0 0 0;
  }

  #malt .steps .step[data-num="4"] {
    margin: 100px 0 0 0;
  }

  #malt .steps .step[data-num="7"] {
    margin: 100px 0 0 0;
  }

  #grain .steps .step[data-num="2"] {
    margin: 80px 0 0 0;
  }

}


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

  /*---------
  headline
  ---------*/

  .headline {
    position: relative;
  }


  .headline_ttl span[data-type="jp"]:nth-child(1){
    font-size: 5vw;
  }

  .headline .headline_desc {
    display: flex;
    flex-direction: column;
    gap: var(--px-90);
    margin: var(--px-100-) 0 var(--px-70) 0;
    padding: 0;
  }

  .headline .headline_txt {
    font-size: 1.6vw;
    line-height: 3.27;
    margin: -14.5vw 0 0 36vw;
    max-width: 60%;
  }

  #kv-slider {
    display: flex;
    height: var(--px-300);
    width: 100vw;
    position: static;
    margin: 0;
  }

  .swiper-slide.swiper-slide-active .kv_slide img,
  .swiper-slide.swiper-slide-next .kv_slide img {
    transform: translateX(-20%);
    /* 左へ20%スライド */
  }


}

@media screen and (min-width: 1100px) and (max-width: 1279px) {

  /*---------
  headline
  ---------*/

  .headline .headline_txt {
    margin: -13.5vw 0 0 40vw;
  }

}

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

  body[data-type="RN2024"] main .inner{
    padding: 0 2vw 0 9vw;
  }

  #making #js-fix-text {
    font-size: 4.4vw;
    left: 2vw;
  }

}