@charset "utf-8";

/**************************************************************
* カスタム用CSS
**************************************************************/

/* ロゴ（サイズの調整したい場合、コメントアウトを削除）
********************************/
/* //MEMO 大体1/1の画像であれば、widthの調整だけでリサイズ可能（max-widthかかっている）*/
/* .g-header__logo[class*="--v@2"] > a img {
  width: 5.25rem;
}

@media all and (min-width: 1024px) {
  .g-header__logo[class*="--v@2"] > a img {
    width: 9rem;
  }
} */

/* //MEMO 縦長の場合、画像の親要素の高さも調整する */
/* .g-header__logo[class*="--v@2"] {
  height: 30vw;
}

@media all and (min-width: 1024px) {
  .g-header__logo[class*="--v@2"] {
    height: 15.35vw;
  }
} */

/* //MEMO 背景が黒い時のフォームのラジオボタンの色調整 ※確認画面のみ*/
/* @media (min-width: 1024px) {
  .c-form-control__option input[type="radio"]:disabled,
  .c-form-control__option input[type="checkbox"]:disabled {
    filter: invert(1) brightness(10);
  }
} */


/*****************
Utility
*****************/

/* フォントサイズを一括変更するときはこちら */
html {
  /* font-size: 10px; */
  /* scroll-padding-top: 80px; */
}

@media screen and (min-width:768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* margin */
.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.ml-5 {
  margin-left: 3rem !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.mr-5 {
  margin-right: 3rem !important;
}

.m0-auto {
  margin: 0 auto !important;
}

@media (max-width: 1023px) {
  .s-mt-0 {
    margin-top: 0 !important;
  }

  .s-mt-1 {
    margin-top: 0.25rem !important;
  }

  .s-mt-2 {
    margin-top: 0.5rem !important;
  }

  .s-mt-3 {
    margin-top: 1rem !important;
  }

  .s-mt-4 {
    margin-top: 1.5rem !important;
  }

  .s-mt-5 {
    margin-top: 3rem !important;
  }

  .s-mb-0 {
    margin-bottom: 0 !important;
  }

  .s-mb-1 {
    margin-bottom: 0.25rem !important;
  }

  .s-mb-2 {
    margin-bottom: 0.5rem !important;
  }

  .s-mb-3 {
    margin-bottom: 1rem !important;
  }

  .s-mb-4 {
    margin-bottom: 1.5rem !important;
  }

  .s-mb-5 {
    margin-bottom: 3rem !important;
  }

  .s-ml-0 {
    margin-left: 0 !important;
  }

  .s-ml-1 {
    margin-left: 0.25rem !important;
  }

  .s-ml-2 {
    margin-left: 0.5rem !important;
  }

  .s-ml-3 {
    margin-left: 1rem !important;
  }

  .s-ml-4 {
    margin-left: 1.5rem !important;
  }

  .s-ml-5 {
    margin-left: 3rem !important;
  }

  .s-mr-0 {
    margin-right: 0 !important;
  }

  .s-mr-1 {
    margin-right: 0.25rem !important;
  }

  .s-mr-2 {
    margin-right: 0.5rem !important;
  }

  .s-mr-3 {
    margin-right: 1rem !important;
  }

  .s-mr-4 {
    margin-right: 1.5rem !important;
  }

  .s-mr-5 {
    margin-right: 3rem !important;
  }

  .s-m0-auto {
    margin: 0 auto !important;
  }
}

/* padding */
.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.pl-3 {
  padding-left: 1rem !important;
}

.pl-4 {
  padding-left: 1.5rem !important;
}

.pl-5 {
  padding-left: 3rem !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.pr-3 {
  padding-right: 1rem !important;
}

.pr-4 {
  padding-right: 1.5rem !important;
}

.pr-5 {
  padding-right: 3rem !important;
}

@media (max-width: 1023px) {
  .s-pt-0 {
    padding-top: 0 !important;
  }

  .s-pt-1 {
    padding-top: 0.25rem !important;
  }

  .s-pt-2 {
    padding-top: 0.5rem !important;
  }

  .s-pt-3 {
    padding-top: 1rem !important;
  }

  .s-pt-4 {
    padding-top: 1.5rem !important;
  }

  .s-pt-5 {
    padding-top: 3rem !important;
  }

  .s-pb-0 {
    padding-bottom: 0 !important;
  }

  .s-pb-1 {
    padding-bottom: 0.25rem !important;
  }

  .s-pb-2 {
    padding-bottom: 0.5rem !important;
  }

  .s-pb-3 {
    padding-bottom: 1rem !important;
  }

  .s-pb-4 {
    padding-bottom: 1.5rem !important;
  }

  .s-pb-5 {
    padding-bottom: 3rem !important;
  }

  .s-pl-0 {
    padding-left: 0 !important;
  }

  .s-pl-1 {
    padding-left: 0.25rem !important;
  }

  .s-pl-2 {
    padding-left: 0.5rem !important;
  }

  .s-pl-3 {
    padding-left: 1rem !important;
  }

  .s-pl-4 {
    padding-left: 1.5rem !important;
  }

  .s-pl-5 {
    padding-left: 3rem !important;
  }

  .s-pr-0 {
    padding-right: 0 !important;
  }

  .s-pr-1 {
    padding-right: 0.25rem !important;
  }

  .s-pr-2 {
    padding-right: 0.5rem !important;
  }

  .s-pr-3 {
    padding-right: 1rem !important;
  }

  .s-pr-4 {
    padding-right: 1.5rem !important;
  }

  .s-pr-5 {
    padding-right: 3rem !important;
  }
}

/* font-size */
.fs-1 {
  font-size: 1rem !important;
}

.fs-2 {
  font-size: 1.25rem !important;
}

.fs-3 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-4 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-5 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-6 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

@media (max-width: 1023px) {
  .s-fs-1 {
    font-size: 1rem !important;
  }

  .s-fs-2 {
    font-size: 1.25rem !important;
  }

  .s-fs-3 {
    font-size: calc(1.275rem + 0.3vw) !important;
  }

  .s-fs-4 {
    font-size: calc(1.3rem + 0.6vw) !important;
  }

  .s-fs-5 {
    font-size: calc(1.325rem + 0.9vw) !important;
  }

  .s-fs-6 {
    font-size: calc(1.375rem + 1.5vw) !important;
  }
}

/* font-weight */
.fw-normal {
  font-weight: normal !important;
}

.fw-bold {
  font-weight: bold !important;
}

/* line-height */
.lh-1 {
  line-height: 1.25 !important;
}

.lh-2 {
  line-height: 1.5 !important;
}

.lh-3 {
  line-height: 2 !important;
}

/* text-align */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

@media (max-width: 1023px) {
  .s-text-left {
    text-align: left !important;
  }

  .s-text-center {
    text-align: center !important;
  }
}

/* text-decoration */
.text-under {
  text-decoration: underline;
}

.c-divider-shape.--type2::before {
  display: none;
}

.c-divider-shape.--type2::after {
  display: none;
}

/* width */
.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.mw-100 {
  max-width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

@media (max-width: 1023px) {
  .s-w-25 {
    width: 25% !important;
  }

  .s-w-50 {
    width: 50% !important;
  }

  .s-w-75 {
    width: 75% !important;
  }

  .s-w-100 {
    width: 100% !important;
  }

  .s-mw-100 {
    max-width: 100% !important;
  }

  .s-h-100 {
    height: 100% !important;
  }

  .s-h-auto {
    height: auto !important;
  }
}

/* object-fit */
.of-contain {
  object-fit: contain !important;
}

.of-cover {
  object-fit: cover !important;
}

/* aspect-ratio */
.ar-11 {
  aspect-ratio: 1 / 1 !important;
}

.ar-43 {
  aspect-ratio: 4 / 3 !important;
}

.ar-169 {
  aspect-ratio: 16 / 9 !important;
}

.ar-219 {
  aspect-ratio: 21 / 9 !important;
}

/* display */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

@media (max-width: 1023px) {
  .s-d-none {
    display: none !important;
  }

  .s-d-block {
    display: block !important;
  }

  .s-d-inline-block {
    display: inline-block !important;
  }

  .s-d-flex {
    display: flex !important;
  }
}

/* justify-content */
.jc-center {
  justify-content: center;
}

/* align-items */
.ai-center {
  align-items: center;
}

.ai-end {
  align-items: end;
}

/* grid */
.n-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-top: calc(var(--bs-gutter-x) * 0.5);
  padding-bottom: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* table */
.table {
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/******************
TOP
******************/


.u-hide-sp,
.u-hide-pc {
  display: none !important
}

@media screen and (max-width: 1023px) {
  .u-hide-pc {
    display: block !important
  }
}

@media screen and (min-width: 1024px) {
  .u-hide-sp {
    display: block !important
  }
}

@media screen and (min-width:768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}


/***********************
TOP
***********************/

/* header */

.g-header__logo[class*="--v@2"] {
  width: 40vw;
}

@media (min-width: 1024px) {
  .g-header__logo[class*="--v@2"] {
    width: 15.35vw;
  }
}

.g-nav[class*="--v@2"] {
  background: linear-gradient(135deg, #6E0D25 15%, #000 70%);
}

.g-header__logo[class*="--v@2"]>a {
  background-color: #000;
}

.g-header__logo[class*="--v@2"]>a img {
  max-width: 100%;
  max-height: 100%;
  width: 15.25rem;
  height: auto;
  margin: auto;
  padding: inherit;
  background: none;
  transform-origin: center;
}

@media (min-width: 1024px) {
  .g-header__logo[class*="--v@2"]>a img {
    width: 19rem;
  }
}

/* mv */
section[id].mv {
  background: #000;
}

.blended-title__upper-txt {
  color: #fff;
  mix-blend-mode: color;
}

.blended-title__bottom-txt {
  mix-blend-mode: color;
  color: #6E0D25;
}

.mv-copy__translation {
  color: #fff;
}


/* instagram-grid */
.instagram-grid {
  background: #000;
}

.instagram-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* PC時は4列 */
  gap: 10px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

/* --- スマホ時（2列に変更） --- */
@media (max-width: 767px) {
  .instagram-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.instagram-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.instagram-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}

.instagram-gallery__item:hover img {
  transform: scale(1.05);
}

.instagram-gallery__item a {
  display: block;
  width: 100%;
  height: 100%;
}

.instagram-gallery__item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
  /* 正方形に保つ */
}

.instagram-gallery__item figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* reservation */
.line-btn-icn {
  background: url("../images/common/tiktok.svg") no-repeat center center / contain;
}

.tel-btn-icn {
  background: url("../images/common/youtube.svg") no-repeat center center / contain;
}

/* menu */

@media (min-width: 1024px) {
  .sub-menu-segment__body {
    row-gap: 3%;
    column-gap: 10%;
  }
}

.menu-data>dd {
  flex: 0 0 35%;
  text-align: right;
}

/* information */
#access .c-heading__alphabetic.has-left-line>i {
  width: 55%;
}

/* float-btn */
.followArea {
  left: 0px;
  right: 0px;
  width: 100%;
}

@media (min-width: 1024px) {
  .followArea {
    left: 20px;
    width: 400px;
  }
}

.followArea .followArea-list {
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 20px;
}

.followArea .followArea-btn .followArea-btn__text {
  color: #000;
}

.followArea .followArea-btn::after {
  border-top: solid 2px #000;
  border-right: solid 2px #000;
}

.sub-menu-segment__body {
  grid-template-columns: 1fr;
}

.menu-block {
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  #menu.menu {
    /* padding-bottom: 15vmax; */
  }
}

.menu-block>p {
  font-size: 110%;
  margin-top: 3rem;
}

@media (max-width: 767px) {
  .concept-title {
    font-size: 180%;
    width: 90%;
  }

  .concept-paragraph {
    width: 90%;
  }
}