@charset "UTF-8";

.headline_ttl span[data-type="main"] {
  perspective: 10em;
}

.headline_ttl span[data-type="main"] i {
  opacity: 0;
  transform: rotateX(-90deg) translateY(110%);
  transition-duration: 1.2s;
  transform-origin: center bottom;
  transition-timing-function: cubic-bezier(.26, 1, .48, 1);
  transition-property: opacity, transform;
  /* overflow: hidden; */
}

.headline_ttl.is-active span[data-type="main"] i {
  display: inline-block;
  opacity: 1;
  transform: rotateX(0deg) translate(0);
  text-indent: 0;
}

.headline_ttl span[data-type="sub"] {
  opacity: 0;
  transform: translate(0, 10%);
  transition: opacity 0.5s, transform 0.5s;
  /* transition-delay: 0.5s; */
}

.headline_ttl.is-active span[data-type="sub"] {
  display: block;
  opacity: 1;
  transform: translate(0, 0);
}


.btn_list.enjoy_anchor_btn.is-fixed ul li,
.btn_list.enjoy_anchor_btn.is-fixed ul li .btn {
  border-top: none;
  border-right: none;
}




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

  body[data-type="RN2024"] .contents {
    overflow: unset;
  }

  .breadcrumbs {
    position: relative;
    z-index: 1;
  }

  /* =========================================================
   1. メインビジュアル全体のコンテナ
========================================================= */
  .headline {
    padding: 0;
    text-align: center;
  }

  /* 親要素（必要に応じて） */
  .headline .inner[data-type="wide"] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    min-height: 600px;
    /* 縦が極端に潰れた際の担保 */
    overflow: hidden;
    /* 画面外にはみ出したキャンバスと画像を隠す */
    margin: var(--px-180-) 0 0 0;
    padding: var(--px-180) 0 0 0;
  }

  /* =========================================================
   2. タイトル（画面中央に完全固定）
========================================================= */
  .headline_ttl {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2vh;
    position: absolute;
    z-index: 1;
    /* margin: var(--px-180-) auto 0 auto; */
    /* transform: translate(0, -40%); */

    top: 47%;
    transform: translate(0, -82%);
  }

  .headline_ttl span[data-type="main"] {
    font-family: "Vollkorn", serif;
    /* font-size: var(--px-120); */
    font-size: clamp(3.5rem, 8vw, 8rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  .headline_ttl span[data-type="sub"] {
    /* font-size: var(--px-22); */
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.867;
    margin: 0.5em 0 0 0;
  }

  /* =========================================================
   3. 画像のラッパー（仮想キャンバス / Cover方式）
========================================================= */
  .headline_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;

    /* 基準となるアスペクト比を 16:9 と想定 */
    /* 画面幅、16:9比率の幅、そして「最低保証サイズ」のうち一番大きいものを採用
    ※ここでは最低幅を1200pxとして設定（カンプに合わせて調整してください）
  */
    width: max(100vw, calc(100vh * (16 / 9)), 1200px);

    /* 同じく、高さの最低保証サイズを追加
    ※幅1200pxの16:9の高さ = 675px 
  */
    height: max(100vh, calc(100vw * (9 / 16)), 675px);
  }

  /* =========================================================
   4. 各画像要素のベース
========================================================= */
  .headline_img {
    position: absolute;
  }

  .headline_img img {
    object-position: center;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }

  /* =========================================================
   5. 画像の個別配置（キャンバスに対する % で指定）
   ※ width は基準カンプ幅(例:1440px)に対する割合
========================================================= */

  /* --- 上側に1〜4を横並びで散らす --- */
  .headline_img[data-num="1"] {
    width: 18.1%;
    /* 290 / 1440 */
    aspect-ratio: 290 / 332;
    top: 18%;
    left: 15%;
  }

  .headline_img[data-num="2"] {
    width: 15.75%;
    /* 270 / 1440 */
    aspect-ratio: 269 / 308;
    top: 4%;
    left: 38%;
    /* transform: translateX(-50%); */
  }

  .headline_img[data-num="3"] {
    width: 18.1%;
    /* 290 / 1440 */
    aspect-ratio: 290 / 332;
    top: 0%;
    right: 22%;
  }

  .headline_img[data-num="4"] {
    width: 16.75%;
    /* 270 / 1440 */
    aspect-ratio: 270 / 232;
    top: 7%;
    left: 71%;
    z-index: 0;
  }

  /* --- 下側に5〜8を横並びで散らす --- */
  .headline_img[data-num="5"] {
    width: 18.1%;
    /* 290 / 1440 */
    aspect-ratio: 294 / 337;
    bottom: 11%;
    left: 17%;
  }

  .headline_img[data-num="6"] {
    width: 18.8%;
    /* 300 / 1440 */
    aspect-ratio: 304 / 262;
    bottom: 10%;
    left: 48%;
    transform: translateX(-50%);
  }

  .headline_img[data-num="7"] {
    width: 17.4%;
    /* 280 / 1440 */
    aspect-ratio: 280 / 241;
    bottom: 22%;
    right: 23%;
  }

  .headline_img[data-num="8"] {
    width: 18.1%;
    /* 290 / 1440 */
    aspect-ratio: 286 / 246;
    bottom: 14%;
    left: 70%;
    z-index: 0;
  }








  .headline_img .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
  }


  .headline .inner[data-type="narrow"] {
    display: inline-block;
    width: auto;
    min-width: auto;
    margin: 0 0 var(--px-100) 0;
  }

  .headline .lead_txt {
    text-align: left;
  }

  .btn_list.js_fix_anchor ul {
    gap: var(--px-20);
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li {
    position: relative;
    /* max-width: 480px; */
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li[data-num="1"]::before {
    aspect-ratio: 336 / 188;
    background-image: url("/discover/enjoy/img/anchor_basic.webp");
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li[data-num="2"]::before {
    aspect-ratio: 336 / 188;
    background-image: url("/discover/enjoy/img/anchor_cocktail.webp");
  }

  .btn_list.js_fix_anchor ul li .btn {
    width: var(--px-480);
    /* max-width: 480px; */
  }

  .btn_list.js_fix_anchor ul li .btn::before {
    z-index: -1;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li a {
    justify-content: flex-end;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li .btn {
    font-size: var(--px-16);
    height: 125px;
    transition: color 0.3s ease, height 0.3s ease;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li .btn span {
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 0 224px;
    display: block;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) 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);
  }

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






  /* 基本の飲み方 */
  #basic {
    padding: var(--px-80) 0 var(--px-220) 0;
    margin: var(--px-90) 0 0 0;
  }

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

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

  #basic h2.basic_ttl span[data-type="jp"] {
    font-size: var(--px-19);
    font-weight: 400;
    letter-spacing: 0.12em;
  }


  #basic .btn_list.js_anchor_list {
    width: 100%;
  }

  #basic .btn_list.js_anchor_list ul {
    flex-wrap: wrap;
    width: calc((var(--px-190) * 4) + 30px);
  }

  #basic .btn_list.js_anchor_list.is-fixed ul {
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
  }

  #basic .btn_list[data-type="sp-scroll"] ul li {
    width: calc(100% / 4);
    max-width: var(--px-190);
  }

  #basic .btn_list[data-type="sp-scroll"].is-fixed ul li {
    width: calc(100% / 8);
    max-width: unset;
  }

  #basic .btn_list[data-type="sp-scroll"] ul li .btn {
    height: var(--px-50);
  }

  #basic .btn_list[data-type="sp-scroll"]:not(.is-fixed) 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-10);
    height: var(--px-10);
    background-image: url("/common/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform: rotate(135deg);
  }

  #basic .btn_list[data-type="sp-scroll"]:not(.is-fixed) ul li a.btn:hover::after {
    background-image: url("/common/img/icon_arrow_white.svg");
  }



  .basic_list li {
    display: flex;
    align-items: flex-start;
    column-gap: var(--px-170);
    padding: 180px 0 0 0;
  }

  .basic_main {
    width: var(--px-600);
    position: sticky;
    top: var(--px-200);
  }

  .basic_name {
    display: flex;
    align-items: baseline;
    gap: var(--px-24);
    margin: 0 0 var(--px-24) 0;
    padding: 0 0 0 var(--px-15);
    position: relative;
  }

  .basic_name::before {
    content: '';
    position: absolute;
    top: var(--px-20);
    left: 0;
    width: var(--px-7);
    height: var(--px-7);
    background-color: #000000;
    border-radius: 100px;
    transform: translate(-50%, -50%);
  }

  .basic_name span[data-type="en"] {
    font-family: "Lato", serif;
    font-size: var(--px-42);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  .basic_name span[data-type="jp"] {
    font-size: var(--px-17);
    font-weight: 400;
    letter-spacing: 0.12em;
  }

  .basic_thumb {
    width: 100%;
  }

  .basic_thumb img {
    width: 100%;
    height: auto;
    display: block;
  }

  .basic_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 2.33;
    margin: 1em 0 0 0;
  }

  .basic_point {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 2.33;
    margin: 1em 0 0 0;
  }

  .basic_point dt {
    font-family: "Lato", serif;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0 0 0.8em 0;
  }

  .basic_point dd div {
    display: flex;
    flex-wrap: wrap;
    line-height: 0;
  }

  .basic_point dd p {
    line-height: 2;
    width: 100%;
  }

  #highball .basic_point dd div p {
    width: calc(100% - var(--px-300));
    margin: -0.6em 0 0 0;
  }

  .basic_point dd figure {
    width: var(--px-270);
    margin: 0 var(--px-28) 0 0;
  }

  .basic_point dd figure img {
    width: 100%;
    height: auto;
  }

  .basic_point dd div+div {
    margin: var(--px-30) 0 0 0;
  }


  /* step */
  .basic_step {
    width: calc(100% - var(--px-600) - var(--px-170));
  }

  .step_ttl {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 2.33;
    margin: 3.4em 0 1em 0;
  }

  .step_list .swiper-wrapper {
    flex-direction: column;
    gap: var(--px-24);
  }

  .step_img {
    width: 100%;
  }

  .step_img img {
    width: 100%;
    height: auto;
    display: block;
  }

  .step_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.867;
    margin: 1em 0 0 0;
  }

  .step_txt span {
    display: block;
  }

  .step_link {
    width: 100%;
    margin: 50px 0 0 0;
  }

  .step_link a {
    justify-content: center;
  }

  .step_link .btn {
    font-size: var(--px-15);
    height: var(--px-64);
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0;
  }


  .step .swiper-button-next,
  .step .swiper-button-prev {
    display: none;
  }






  /* カクテル */
  #cocktail {
    padding: var(--px-80) 0 var(--px-240);
    margin: var(--px-90) 0 0 0;
  }

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

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

  #cocktail h2.cocktail_ttl span[data-type="jp"] {
    font-size: var(--px-19);
    font-weight: 400;
    letter-spacing: 0.12em;
  }

  .cocktail_lead {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.867;
    margin: 1em 0 0 0;
  }

  .cocktail_list {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--px-120);
    row-gap: var(--px-110);
    margin: var(--px-140) 0 0 0;
  }

  .cocktail_list li {
    width: calc((100% - var(--px-120)) / 2);
  }

  .cocktail_name {
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
    margin: 0 0 var(--px-24) 0;
    padding: 0 0 0 var(--px-15);
    position: relative;
  }

  .cocktail_name::before {
    content: '';
    position: absolute;
    top: var(--px-16);
    left: 0;
    width: var(--px-7);
    height: var(--px-7);
    background-color: #000000;
    border-radius: 100px;
  }

  .cocktail_name span[data-type="en"] {
    font-family: "Lato", serif;
    font-size: var(--px-42);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  .cocktail_img {
    width: 100%;
  }

  .cocktail_img img {
    width: 100%;
    height: auto;
    display: block;
  }

  .cocktail_txt {
    font-size: var(--px-14);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.867;
    margin: 1.2em 0;
  }

  .cocktail_recipe {
    font-size: var(--px-14);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.5;
  }

  .cocktail_link {
    margin: var(--px-24) 0 0 0;
  }

  .cocktail_link .btn {
    width: var(--px-290);
    height: var(--px-76);
    justify-content: center;
    text-align: center;
  }

  .cocktail_link .btn span {
    font-size: var(--px-16);
    line-height: 1.5625;
  }

  .cocktail_link .btn small {
    font-size: var(--px-14);
  }



}

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


  .headline {
    padding: 0;
    text-align: center;
    overflow: hidden;
  }

  .headline .inner[data-type="wide"] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 100%; */
    height: 170vw;
    position: relative;
  }

  .headline_ttl {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3vw;
    position: static;
    z-index: 1;
    margin: 0;
  }

  .headline_ttl span[data-type="main"] {
    display: block;
    font-family: "Vollkorn", serif;
    /* font-size: var(--px-74); */
    font-size: var(--px-84);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  .headline_ttl span[data-type="main"]+span[data-type="main"] {
    margin: var(--px-12) 0 var(--px-4) 0;
  }

  .headline_ttl span[data-type="sub"] {
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1.867;
  }

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

  .headline_img {
    height: auto;
    position: absolute;
  }

  /* 上側に1〜4を横並びで散らす */
  .headline_img[data-num="1"] {
    aspect-ratio: 290 / 332;
    width: 43vw;
    top: 5%;
    left: -13%;
  }

  .headline_img[data-num="3"] {
    aspect-ratio: 290 / 332;
    width: 42vw;
    top: 6%;
    right: -16%;
  }

  .headline_img[data-num="4"] {
    aspect-ratio: 270 / 232;
    width: 39.23vw;
    top: 12%;
    left: 40%;
    /* z-index: 0; */
  }

  /* 下側に5〜8を横並びで散らす */
  .headline_img[data-num="5"] {
    aspect-ratio: 294 / 337;
    width: 40vw;
    bottom: 8%;
    left: -17%;
  }

  .headline_img[data-num="6"] {
    aspect-ratio: 304 / 262;
    width: 43.85vw;
    bottom: 5%;
    left: 30%;
    transform: translateX(-50%);
    z-index: 0;
  }

  .headline_img[data-num="7"] {
    aspect-ratio: 280 / 241;
    width: 40.7vw;
    bottom: 14%;
    right: -1%;
  }

  .headline_img[data-num="8"] {
    aspect-ratio: 286 / 246;
    width: 45.9vw;
    bottom: 7%;
    left: 76%;
    z-index: 0;
  }

  .headline_img .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
  }


  .headline .inner[data-type="narrow"] {
    display: inline-block;
    width: auto;
    min-width: auto;
    margin: var(--px-40) 0 var(--px-70) 0;
  }

  .headline .lead_txt {
    line-height: 2.1875;
    text-align: left;
    padding: 0 2em 0 var(--px-48);
  }


  .btn_list.js_fix_anchor:not(.is-fixed) ul {
    gap: var(--px-20);
    flex-direction: column;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li {
    position: relative;
    width: var(--px-340);
    margin: 0 auto;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
    z-index: 1;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li[data-num="1"]::before {
    background-image: url("/discover/enjoy/img/anchor_basic.webp");
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li[data-num="2"]::before {
    background-image: url("/discover/enjoy/img/anchor_cocktail.webp");
  }

  .btn_list.js_fix_anchor ul li {
    border: 1px solid #000000;
  }

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

  .btn_list.js_fix_anchor:not(.is-fixed) ul li a {
    justify-content: flex-end;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li .btn {
    height: var(--px-98);
    transition: color 0.3s ease, height 0.3s ease;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) ul li .btn span {
    width: 50%;
    font-size: var(--px-14);
    line-height: 1.6;
  }

  .btn_list.js_fix_anchor:not(.is-fixed) 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);
  }

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






  /* 基本の飲み方 */
  #basic {
    padding: var(--px-80) 0;
    margin: var(--px-90) 0 0 0;
  }

  #basic h2.basic_ttl {
    display: flex;
    flex-direction: column;
    gap: var(--px-26);
    margin: 0 0 var(--px-60) 0;
  }

  #basic h2.basic_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;
  }

  #basic h2.basic_ttl span[data-type="jp"] {
    font-size: var(--px-19);
    font-weight: 400;
    letter-spacing: 0.12em;
  }


  #basic .btn_list.js_anchor_list {
    width: 100%;
  }

  #basic .btn_list.js_anchor_list ul {
    width: 100%;
  }

  #basic .btn_list.js_anchor_list:not(.is-fixed) ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--px-13);
  }

  #basic .btn_list.js_anchor_list.is-fixed ul {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
  }

  #basic .btn_list[data-type="sp-scroll"]:not(.is-fixed) ul li {
    width: calc((100% - var(--px-13)) / 2);
  }

  #basic .btn_list[data-type="sp-scroll"].is-fixed ul li {
    min-width: var(--px-150);
    max-width: unset;
  }

  #basic .btn_list[data-type="sp-scroll"]:not(.is-fixed) ul li a.btn {
    height: var(--px-40);
  }

  #basic .btn_list[data-type="sp-scroll"]:not(.is-fixed) ul li a.btn::after {
    content: "";
    aspect-ratio: 1/1;
    display: block;
    position: absolute;
    bottom: var(--px-10);
    right: var(--px-10);
    width: var(--px-8);
    height: var(--px-8);
    background-image: url("/common/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform: rotate(135deg);
  }

  #basic .btn_list[data-type="sp-scroll"]:not(.is-fixed) ul li a.btn:hover::after {
    background-image: url("/common/img/icon_arrow_white.svg");
  }



  .basic_list li {
    display: flex;
    flex-direction: column;
    padding: var(--px-90) 0 0 0;
  }

  .basic_main {
    width: 100%;
  }

  .basic_name {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: var(--px-12);
    margin: 0 0 var(--px-22) 0;
    padding: 0 0 0 var(--px-15);
    position: relative;
  }

  .basic_name::before {
    content: '';
    position: absolute;
    top: var(--px-15);
    left: 0;
    width: var(--px-6);
    height: var(--px-6);
    background-color: #000000;
    border-radius: 100px;
  }

  .basic_name span[data-type="en"] {
    font-family: "Lato", serif;
    font-size: var(--px-35);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  .basic_name span[data-type="jp"] {
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.12em;
  }

  .basic_thumb {
    width: 100%;
  }

  .basic_thumb img {
    width: 100%;
    height: auto;
    display: block;
  }

  .basic_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.8;
    margin: 1em 0 0 0;
  }

  .basic_point {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 2.33;
    margin: 1.8em 0 0 0;
  }

  .basic_point dt {
    font-family: "Lato", serif;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0 0 0.8em 0;
  }

  .basic_point dd div {
    display: flex;
    flex-wrap: wrap;
    line-height: 0;
  }

  .basic_point dd p {
    line-height: 2;
    width: 100%;
  }

  #highball .basic_point dd div p {
    width: 100%;
    margin: 1em 0 0 0;
  }

  .basic_point dd figure {
    width: 100%;
  }

  .basic_point dd figure img {
    width: 100%;
    height: auto;
  }

  .basic_point dd div+div {
    margin: var(--px-30) 0 0 0;
  }

  /* step */
  .step .swiper {
    margin: 0 -6vw;
    position: relative;
    padding: var(--px-40) 0 0 0;
  }

  .step .swiper-slide {
    box-sizing: border-box;
    margin: 0 12.5vw;
    width: 75vw;
  }


  .step .swiper-button-next,
  .step .swiper-button-prev {
    width: var(--px-32);
    height: var(--px-32);
    background: none;
    position: absolute;
    top: 40vw;
    transform: translateY(-50%) rotate(0deg);
    z-index: 1;
    cursor: pointer;
  }

  .step .swiper-button-next::before,
  .step .swiper-button-prev::before {
    content: '';
    display: block;
    width: var(--px-16);
    height: var(--px-16);
    border-top: 1.5px solid #333;
    border-right: 1.5px solid #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .step .swiper-button-prev::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .step .swiper-button-next::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .step .swiper-button-prev {
    transform: translateY(-50%) rotate(180deg);
  }

  .step .swiper-button-next:after,
  .step .swiper-button-prev:after {
    font-size: 0;
  }

  .step .swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 3%;
  }

  .step .swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 3%;
  }


  .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
  }

  .step .swiper-pagination {
    top: 0;
    left: unset;
    right: 12.5vw;
    width: 75%;
    height: 10vw;
    text-align: right;
  }

  .step .swiper-pagination-bullet-active {
    background: #000000;
  }




  .step {
    padding: var(--px-40) 0 0 0;
  }

  .step_ttl {
    margin: 0 0 var(--px-16-) 0;
  }

  .step_ttl span {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 2;
  }

  .step_img {
    width: 100%;
  }

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

  .step_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.867;
    margin: 1em 0 0 0;
  }

  .step_txt span {
    display: block;
  }

  .step_link {
    width: 100%;
    margin: 50px 0 0 0;
  }

  .step_link a {
    justify-content: center;
  }

  .step_link .btn {
    font-size: var(--px-15);
    height: var(--px-64);
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0;
  }



  /* カクテル */
  #cocktail {
    padding: var(--px-80) 0;
    /* margin: var(--px-90) 0 0 0; */
  }

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

  #cocktail h2.cocktail_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;
  }

  #cocktail h2.cocktail_ttl span[data-type="jp"] {
    font-size: var(--px-19);
    font-weight: 400;
    letter-spacing: 0.12em;
  }

  .cocktail_lead {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.867;
    margin: 1em 0 0 0;
  }

  .cocktail_list {
    display: flex;
    flex-direction: column;
    gap: var(--px-90);
    margin: var(--px-90) 0 0 0;
  }

  .cocktail_list li {
    width: 100%;
  }

  .cocktail_name {
    display: flex;
    flex-direction: column;
    gap: var(--px-14);
    margin: 0 0 var(--px-24) 0;
    padding: 0 0 0 var(--px-10);
    position: relative;
  }

  .cocktail_name::before {
    content: '';
    position: absolute;
    top: var(--px-15);
    left: 0;
    width: var(--px-6);
    height: var(--px-6);
    background-color: #000000;
    border-radius: 100px;
  }

  .cocktail_name span[data-type="en"] {
    font-family: "Lato", serif;
    font-size: var(--px-35);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }

  .cocktail_img {
    width: 100%;
  }

  .cocktail_img img {
    width: 100%;
    height: auto;
    display: block;
  }

  .cocktail_txt {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.867;
    margin: 1.2em 0;
  }

  .cocktail_recipe {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.5;
  }

  .cocktail_link {
    margin: var(--px-24) 0 0 0;
  }

  .cocktail_link .btn {
    width: 100%;
    height: var(--px-76);
    justify-content: center;
    text-align: center;
  }

  .cocktail_link .btn span {
    font-size: var(--px-16);
    line-height: 1.5625;
  }

  .cocktail_link .btn small {
    font-size: var(--px-14);
  }


}

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

  .headline_ttl span[data-type="main"] {
    font-size: 6vw;
  }

  .headline_ttl span[data-type="sub"] {
    font-size: 1.3vw;
  }

}

@media screen and (min-width: 768px) and (max-width: 1299px) {
  body[data-type="RN2024"] main .inner {
    width: 90%;
  }

  .basic_main {
    width: 48vw;
  }

  .basic_step {
    width: 32vw;
  }

}

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

  .basic_name {
    flex-direction: column;
  }

  .step_ttl {
    margin: 6em 0 1em 0;
  }



  .cocktail_name span[data-type="en"] {
    font-size: 3.8vw;
    white-space: nowrap;
  }


}