@charset "UTF-8";

:root {
  interpolate-size: allow-keywords;
  --blk: #000;
  --dgry: #999;
  --gry: #ccc;
  --lgry: #f5f5f5;
  --wht: #fff;
  --transition: all 0.3s ease-in-out;
}

/* ==================================
リセット・調整・ファンデーション
===================================== */
/*---------- リセット ----------*/
body {
  overflow-x: clip;
}
.main {
  overflow: clip;
}

/*---------- ファンデーション ----------*/
body {
  /* 日本語（漢字・ひらがな・カタカナ）と半角英数字の間に、自動で適切な「隙間（アキ）」を入れる */
  text-autospace: normal;
  /* 画面幅に収まらない非常に長い英単語や URL、電子メールアドレスなどがある場合、どこでも強制的に改行させる */
  overflow-wrap: anywhere;
  /* ブラウザが機械学習や高度な解析（Google の BudouX などの技術）を利用し、日本語の文節を自動で判別して適切な位置で折り返す */
  word-break: auto-phrase;
  /* 主に見出し（4〜6行未満）に使い、各行の文字数がだいたい同じ（左右のバランスが均等）になるように改行する */
  /* text-wrap: balance; */
  /* 主に本文（長文）に使い、「行の最後に1文字だけポツンと残る」といった不自然な改行（孤立文字）を防ぐように、前の行の改行位置を賢く調整 */
  /* text-wrap: pretty; */
}

/* ==================================
モジュールのアレンジ
===================================== */
/* .heading__01：あしらいをsvgタグにするためafterを削除 */
.shinjuku .heading__01::after {
  content: unset;
  background-image: unset;
}

/* デフォルトでフッターに入っている「ご予約」ボタンを非表示にする */
.btn__fixedReserve {
  display: none;
}

/* ==================================
タイポ
===================================== */
/*---------- 袋文字 ----------*/
.text-hukuro {
  --hukuro-color: var(--blk);
  text-shadow:
    2px 2px 1px var(--hukuro-color),
    -2px 2px 1px var(--hukuro-color),
    2px -2px 1px var(--hukuro-color),
    -2px -2px 1px var(--hukuro-color),
    2px 0px 1px var(--hukuro-color),
    0px 2px 1px var(--hukuro-color),
    -2px 0px 1px var(--hukuro-color),
    0px -2px 1px var(--hukuro-color);
}

/*---------- text-stroke ----------*/
.text-stroke {
  --stroke-color: var(--blk);
  -webkit-text-stroke: 0.0625em var(--stroke-color);
  /* text-stroke: 0.0625em var(--blk); */
  paint-order: stroke;
}

/*---------- text-shadow ----------*/
.text-shadow {
  --text-shadow-color: var(--blk);
  text-shadow: 0px 0px 0.25em var(--text-shadow-color);
}

/*---------- マーカーのあしらい ----------*/
mark {
  --mark-color: yellow;
  background: linear-gradient(transparent 60%, var(--mark-color) 60%);
}

/*---------- テキストをグラデーションにするベース ----------*/
.text-grad {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

/* ========================================
プロジェクト、パーツ
======================================== */
/*---------- ボタン ----------*/
.c-btn {
  display: inline-flex;
  align-items: center;
  column-gap: 0.8rem;
  width: 100%;
  max-width: 25rem;
  min-height: 5rem;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    -webkit-text-decoration-color;
  transition-duration: 300ms;
  border-width: 1px;
  border-style: solid;
  font-family: "Zen Old Mincho", serif;
  color: var(--wht);
  padding-left: 2.4rem;
  padding-right: 0.8rem;
}

.c-btn.--flame {
  --depth: .25em;
  box-shadow: var(--depth) var(--depth) currentColor;
  transition-property: transform, box-shadow;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}
@media (any-hover: hover) {
  .c-btn.--flame:hover {
    transform: translate(var(--depth), var(--depth));
    box-shadow: 0 0 currentColor;
  }
}
@media (any-hover: hover) {
  a:hover .c-btn.--flame {
    transform: translate(var(--depth), var(--depth));
    box-shadow: 0 0 currentColor;
  }
}

/*---------- 画像の比率 ----------*/
.c-aspect {
  /* 縦横比はstyleでCSS変数を書き換える
     ex) style="--aspect: 2.51 / 1;" */
  --aspect: auto;

  @media print, screen and (min-width: 576px) {
    --aspect-sm: var(--aspect);
  }
  @media print, screen and (min-width: 769px) {
    --aspect-md: var(--aspect-sm);
  }
  @media print, screen and (min-width: 992px) {
    --aspect-lg: var(--aspect-md);
  }
  @media print, screen and (min-width: 1200px) {
    --aspect-xl: var(--aspect-lg);
  }
  @media print, screen and (min-width: 1400px) {
    --aspect-xxl: var(--aspect-xl);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--aspect);

    @media print, screen and (min-width: 576px) {
      aspect-ratio: var(--aspect-sm);
    }
    @media print, screen and (min-width: 769px) {
      aspect-ratio: var(--aspect-md);
    }
    @media print, screen and (min-width: 992px) {
      aspect-ratio: var(--aspect-lg);
    }
    @media print, screen and (min-width: 1200px) {
      aspect-ratio: var(--aspect-xl);
    }
    @media print, screen and (min-width: 1400px) {
      aspect-ratio: var(--aspect-xxl);
    }
  }

  /* 画像全体を枠内に入れたいとき */
  &.--contain img,
  .--contain img {
    object-fit: contain;
  }
}

/*---------- table ----------*/
.p-table {
  --padding: 0.5em;
  --border-color: var(--gry);
  border-collapse: collapse;
  th,
  td {
    padding: var(--padding);
  }
  /* th {
    text-wrap: nowrap;
  } */
}
.p-table.--border-bottom {
  tr {
    border-bottom: 1px solid var(--border-color);
  }
}
.p-table.--column {
  tr {
    display: flex;
    flex-direction: column;
    > th,
    > td {
      width: 100%;
    }
    > td:not(:first-child) {
      padding-top: 0;
    }
  }
}
@media print, screen and (max-width: 768px) {
  .p-table.--sp-column {
    tr {
      display: flex;
      flex-direction: column;
      > th,
      > td {
        width: 100%;
      }
      > td:not(:first-child)  {
        padding-top: 0;
      }
    }
  }
}

/*---------- 背景のベース ----------*/
/*
・背景画像を敷く場合
・背景画像に各色のフィルターをかける場合
・疑似要素を配置する
ときのベース
*/
.p-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;

  /*
  opacity（濃さ）はstyleでCSS変数を書き換える
    ex) style="--bg-opacity: 0.5;"
  */
  --bg: transparent;
  --bg-opacity: 0.3;
  --bg-after: transparent;
  --bg-after-opacity: 0;

  /* 子要素を疑似要素より前に置く */
  > * {
    position: relative;
    z-index: 1;
  }

  /* 疑似要素のファンデーション */
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
    pointer-events: none;
  }
  &::before {
    background-color: var(--bg);
    opacity: var(--bg-opacity);
  }
  &::after {
    background-color: var(--bg-after);
    opacity: var(--bg-after-opacity);
  }

  /* 画像をposition: absoluteで配置するとき */
  .--img {
    z-index: -1;
  }

  /* ぼかしフィルター */
  /*
  強さはstyleでCSS変数を書き換える
    ex) style="--blur: 1em;"
  */
  &.--blur {
    --blur: 0.5rem;
  }
  &.--blur::after {
    backdrop-filter: blur(var(--blur));
    opacity: 1;
  }

  /* 乗算 */
  &.--multiply::before,
  &.--multiply::after {
    mix-blend-mode: multiply;
  }
}

/*---------- outlineで作る枠線 ----------*/
.c-outline {
  --ol-color: var(--wht);
  --ol-style: solid;
  --ol-width: 1px;
  --ol-offset: 0;
  outline-color: var(--ol-color);
  outline-style: var(--ol-style);
  outline-width: var(--ol-width);
  outline-offset: var(--ol-offset);
}

/*---------- 背景にノイズ加工 ----------*/
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/*---------- 縁を和紙のようにトリミング（clip-pathでshadow効かなくなるので注意） ----------*/
.c-washi,
.c-washi-img img {
  clip-path: polygon(0% 0%, 0% 0.205%, 1% 0.1025%, 2% 0.225%, 3% 0.2325%, 4% 0.1675%, 5% 0.02%, 6% 0.21%, 7% 0.13%, 8% 0.1475%, 9% 0.015%, 10% 0.14%, 11% 0.16%, 12% 0.25%, 13% 0.2375%, 14% 0.0275%, 15% 0.14%, 16% 0.185%, 17% 0.2075%, 18% 0.24%, 19% 0.08%, 20% 0.02%, 21% 0.1975%, 22% 0.24%, 23% 0.115%, 24% 0.0475%, 25% 0.21%, 26% 0.155%, 27% 0.0075%, 28% 0.16%, 29% 0.1675%, 30% 0.04%, 31% 0.0975%, 32% 0.215%, 33% 0.195%, 34% 0.1325%, 35% 0.065%, 36% 0.0975%, 37% 0.015%, 38% 0.18%, 39% 0.245%, 40% 0.125%, 41% 0.235%, 42% 0.1775%, 43% 0.02%, 44% 0.235%, 45% 0.01%, 46% 0.125%, 47% 0.1425%, 48% 0.17%, 49% 0.0325%, 50% 0.245%, 51% 0.0375%, 52% 0.08%, 53% 0.075%, 54% 0.2225%, 55% 0.0575%, 56% 0.25%, 57% 0.25%, 58% 0.0525%, 59% 0.22%, 60% 0.07%, 61% 0.195%, 62% 0.2%, 63% 0.1375%, 64% 0.0575%, 65% 0.12%, 66% 0.22%, 67% 0.08%, 68% 0.0375%, 69% 0.1525%, 70% 0.1425%, 71% 0.245%, 72% 0.035%, 73% 0.0975%, 74% 0.25%, 75% 0.245%, 76% 0.1225%, 77% 0.175%, 78% 0.195%, 79% 0.1375%, 80% 0.01%, 81% 0.135%, 82% 0.155%, 83% 0.1125%, 84% 0.145%, 85% 0.0725%, 86% 0.07%, 87% 0.205%, 88% 0.0375%, 89% 0.145%, 90% 0.01%, 91% 0.1975%, 92% 0.075%, 93% 0.1475%, 94% 0.195%, 95% 0.095%, 96% 0.1175%, 97% 0.1525%, 98% 0.0875%, 99% 0.175%, 99.575% 0%, 99.71% 1%, 99.6275% 2%, 99.6775% 3%, 99.5325% 4%, 99.7125% 5%, 99.6875% 6%, 99.6575% 7%, 99.7425% 8%, 99.7425% 9%, 99.5825% 10%, 99.62% 11%, 99.6% 12%, 99.5975% 13%, 99.67% 14%, 99.6925% 15%, 99.5525% 16%, 99.7025% 17%, 99.7125% 18%, 99.515% 19%, 99.64% 20%, 99.5575% 21%, 99.5175% 22%, 99.6625% 23%, 99.6675% 24%, 99.5225% 25%, 99.7275% 26%, 99.5475% 27%, 99.745% 28%, 99.7425% 29%, 99.6275% 30%, 99.6175% 31%, 99.55% 32%, 99.605% 33%, 99.6975% 34%, 99.59% 35%, 99.5525% 36%, 99.5125% 37%, 99.65% 38%, 99.6925% 39%, 99.6675% 40%, 99.5925% 41%, 99.745% 42%, 99.555% 43%, 99.6425% 44%, 99.6925% 45%, 99.675% 46%, 99.7075% 47%, 99.56% 48%, 99.685% 49%, 99.5475% 50%, 99.6025% 51%, 99.7% 52%, 99.5425% 53%, 99.715% 54%, 99.6275% 55%, 99.65% 56%, 99.65% 57%, 99.61% 58%, 99.7275% 59%, 99.6425% 60%, 99.51% 61%, 99.6325% 62%, 99.6175% 63%, 99.51% 64%, 99.625% 65%, 99.6025% 66%, 99.68% 67%, 99.525% 68%, 99.56% 69%, 99.5675% 70%, 99.5075% 71%, 99.6625% 72%, 99.6475% 73%, 99.545% 74%, 99.7425% 75%, 99.71% 76%, 99.6125% 77%, 99.6675% 78%, 99.6625% 79%, 99.6675% 80%, 99.7125% 81%, 99.64% 82%, 99.55% 83%, 99.565% 84%, 99.58% 85%, 99.68% 86%, 99.6325% 87%, 99.525% 88%, 99.7125% 89%, 99.7075% 90%, 99.54% 91%, 99.62% 92%, 99.5775% 93%, 99.565% 94%, 99.5625% 95%, 99.5875% 96%, 99.745% 97%, 99.595% 98%, 99.52% 99%, 100% 99.5725%, 99% 99.585%, 98% 99.6775%, 97% 99.6425%, 96% 99.605%, 95% 99.6225%, 94% 99.6625%, 93% 99.6625%, 92% 99.5125%, 91% 99.5925%, 90% 99.6425%, 89% 99.75%, 88% 99.7025%, 87% 99.6025%, 86% 99.5225%, 85% 99.5375%, 84% 99.625%, 83% 99.5525%, 82% 99.6925%, 81% 99.56%, 80% 99.725%, 79% 99.505%, 78% 99.6025%, 77% 99.5025%, 76% 99.71%, 75% 99.5125%, 74% 99.655%, 73% 99.6225%, 72% 99.5425%, 71% 99.5425%, 70% 99.6525%, 69% 99.565%, 68% 99.63%, 67% 99.54%, 66% 99.725%, 65% 99.55%, 64% 99.535%, 63% 99.64%, 62% 99.57%, 61% 99.6175%, 60% 99.5825%, 59% 99.675%, 58% 99.6425%, 57% 99.6375%, 56% 99.7125%, 55% 99.61%, 54% 99.515%, 53% 99.5225%, 52% 99.61%, 51% 99.6875%, 50% 99.7225%, 49% 99.52%, 48% 99.5975%, 47% 99.615%, 46% 99.5625%, 45% 99.525%, 44% 99.5175%, 43% 99.73%, 42% 99.5525%, 41% 99.5825%, 40% 99.53%, 39% 99.6425%, 38% 99.5375%, 37% 99.5925%, 36% 99.5375%, 35% 99.7425%, 34% 99.645%, 33% 99.67%, 32% 99.6575%, 31% 99.5125%, 30% 99.5525%, 29% 99.745%, 28% 99.52%, 27% 99.6575%, 26% 99.5725%, 25% 99.5775%, 24% 99.68%, 23% 99.6025%, 22% 99.6375%, 21% 99.6425%, 20% 99.5975%, 19% 99.66%, 18% 99.715%, 17% 99.5025%, 16% 99.7175%, 15% 99.635%, 14% 99.5625%, 13% 99.745%, 12% 99.695%, 11% 99.6625%, 10% 99.565%, 9% 99.74%, 8% 99.5575%, 7% 99.5025%, 6% 99.5625%, 5% 99.6475%, 4% 99.57%, 3% 99.565%, 2% 99.6875%, 1% 99.545%, 0.1275% 100%, 0.11% 99%, 0.155% 98%, 0.025% 97%, 0.135% 96%, 0.035% 95%, 0.0675% 94%, 0.0425% 93%, 0.01% 92%, 0.07% 91%, 0.0925% 90%, 0.2325% 89%, 0.2425% 88%, 0.17% 87%, 0.2125% 86%, 0.145% 85%, 0.205% 84%, 0.05% 83%, 0.1925% 82%, 0.18% 81%, 0.22% 80%, 0.2325% 79%, 0.0375% 78%, 0.25% 77%, 0.25% 76%, 0.1575% 75%, 0.08% 74%, 0.1% 73%, 0.1725% 72%, 0.1575% 71%, 0.0925% 70%, 0.0975% 69%, 0.1175% 68%, 0.24% 67%, 0.0225% 66%, 0.2275% 65%, 0.0775% 64%, 0.1825% 63%, 0.0975% 62%, 0.005% 61%, 0.215% 60%, 0.17% 59%, 0.025% 58%, 0.21% 57%, 0.0975% 56%, 0.0325% 55%, 0.08% 54%, 0.2125% 53%, 0.2025% 52%, 0.18% 51%, 0.1625% 50%, 0.0225% 49%, 0.07% 48%, 0.1375% 47%, 0.0625% 46%, 0.2425% 45%, 0.085% 44%, 0.0425% 43%, 0.075% 42%, 0.1375% 41%, 0.1525% 40%, 0.2425% 39%, 0.1875% 38%, 0.1725% 37%, 0.0175% 36%, 0.08% 35%, 0.06% 34%, 0.15% 33%, 0.2475% 32%, 0.1075% 31%, 0.2175% 30%, 0.1825% 29%, 0.03% 28%, 0.1375% 27%, 0.2475% 26%, 0.02% 25%, 0.11% 24%, 0.005% 23%, 0.2175% 22%, 0.1525% 21%, 0.1275% 20%, 0.1% 19%, 0.045% 18%, 0.045% 17%, 0.08% 16%, 0.09% 15%, 0.245% 14%, 0.0975% 13%, 0.0375% 12%, 0.2% 11%, 0.1225% 10%, 0.0425% 9%, 0.1775% 8%, 0.0175% 7%, 0.18% 6%, 0.16% 5%, 0.1475% 4%, 0.085% 3%, 0.1625% 2%, 0.085% 1%);
}

/*---------- 見出し ----------*/
/* ひし形 */
.c-heading-polygon {
  clip-path: polygon(calc(100% - 3rem) 0, 100% 50%, calc(100% - 3rem) 100%, 3rem 100%, 0 50%, 3rem 0)
}

/* 内側に角丸 */
.c-corner-scoop {
  --bg-color: var(--tw-color-white);
  background:
    radial-gradient(circle at top left, transparent 50%, currentColor 50%, currentColor calc(50% + 2px), transparent calc(50% + 2px)),
    radial-gradient(circle at top right, transparent 50%, currentColor 50%, currentColor calc(50% + 2px), transparent calc(50% + 2px)),
    radial-gradient(circle at bottom left, transparent 50%, currentColor 50%, currentColor calc(50% + 2px), transparent calc(50% + 2px)),
    radial-gradient(circle at bottom right, transparent 50%, currentColor 50%, currentColor calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(90deg, currentColor 2px, var(--bg-color) 2px, var(--bg-color) calc(100% - 2px), currentColor calc(100% - 2px)),
    linear-gradient(180deg, currentColor 2px, var(--bg-color) 2px, var(--bg-color) calc(100% - 2px), currentColor calc(100% - 2px));
  background-position: top left, top right, bottom left, bottom right, left 15px, 15px top;
  background-size: 20px 20px, 20px 20px,20px 20px,20px 20px, 100% calc(100% - 30px), calc(100% - 30px) 100%;
  background-repeat: no-repeat;
}

/*---------- MV ----------*/
/* ページネーション */
.swiper-pagination-bullet-active {
  background-color: currentColor !important;
}

/*---------- 追従CTA ----------*/
.p-cta {
  opacity: 0;
  /* visibility: hidden; */
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

html:has(.is-scrolled) {
  .p-cta {
    opacity: 1;
    /* visibility: visible; */
    pointer-events: auto;
  }
}