@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; */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================================
リセット・調整・ファンデーション
===================================== */
/*---------- リセット ----------*/
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;
}

/* MENUページ：ナビゲーションを縦並びにする */
/* .main__pageNavi--menu.flex-column li {
  padding: 1rem 1em;
  text-align: center;
}
.main__pageNavi--menu.flex-column li + li {
  border-top: 1px solid currentColor;
}
.main__pageNavi--menu.flex-column li + li::before {
  content: unset;
} */

/* ==================================
タイポ
===================================== */
/*---------- 袋文字 ----------*/
.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 {
  --btn-color: var(--wht);
  --btn-bgc: ;
  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; */
  font-family: "Zen Kaku Gothic New", serif;
  color: var(--btn-color);
  padding-left: 2.4rem;
  padding-right: 0.8rem;
}

/*---------- 画像の比率 ----------*/
.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-list-marker {
  --_marker-src: var(--icon-list--marker-src, var(--icon-pin));
  --_marker-size: var(--icon-list--marker-size, 1em);
  --_row-gap: var(--icon-list--row-gap, 0.5rlh);
  --_column-gap: var(--icon-list--column-gap, 0.5em);

  /* `list-style: none` は仕様で Safari + VoiceOver にてリストと認識されなくなります */
  list-style-type: "";

  & > * + * {
    margin-block-start: var(--_row-gap);
  }

  & > li {
    position: relative;
    padding-inline-start: calc(var(--_marker-size) + var(--_column-gap));

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      mask: var(--_marker-src) no-repeat center / contain;
      inline-size: var(--_marker-size);
      block-size: 1lh;

      /*
       * 強制カラーモード下では背景色が同化されるのでフォールバックで CanvasText を指定
       * `conic-gradient(currentcolor)` は iOS 18.4 からなので 0 をつけてサポートを広くする
       */
      background: conic-gradient(currentcolor 0 0), CanvasText;
    }
  }
}

/*---------- 背景のベース ----------*/
/*
・背景画像を敷く場合
・背景画像に各色のフィルターをかける場合
・疑似要素を配置する
ときのベース
*/
.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-width: 1px;
  --ol-style: solid;
  --ol-color: var(--wht);
  --ol-offset: 0;
  outline-width: var(--ol-width);
  outline-style: var(--ol-style);
  outline-color: var(--ol-color);
  outline-offset: var(--ol-offset);
}

/* ==================================
ローディング
===================================== */
.p-loading {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: calc(infinity * 1);
  display: grid;
  place-items: center;
  & > * {
    grid-area: -1 / 1;
  }
  .c-text {
    justify-self: self-start;
    align-self: self-end;
  }
}

/* ==================================
コンテンツ
===================================== */
/*---------- 全体のレイアウト ----------*/
.l-content {
  display: flex;

  .l-content-main {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background-color: var(--body-bgc);
    @media screen and (min-width: 769px) {
      max-width: 37.5rem;
    }
  }
  .l-content-left {
    width: 100%;
    .l-content-left-inner {
      .c-text {
        position: absolute;
        z-index: 0;
        width: max-content;
        max-width: 100%;
      }
    }
  }
  .l-content-right {
    width: 100%;
    @media screen and (min-width: 769px) {
      max-width: 57.6rem;
    }
    .l-content-right-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .l-content-left-inner,
  .l-content-right-inner {
    position: sticky;
    inset: 0;
    top: 8.2rem;
    /* height: calc(100vh - 11rem); */
    height: calc(100vh - 8.2rem);
    /* transition: height 0s ease-in-out; */
  }
}

/*---------- 波型に切り抜く ----------*/
.c-wave-mask {
  --wave-h: 8rem;
  mask-image: url(../svg/wave.svg), url(../svg/square.svg);
  mask-composite: add;
  mask-repeat: no-repeat;
  mask-position: 0 0, 0% 100%;
  mask-size: 100% calc(var(--wave-h) + 1px), 100% calc(100% - var(--wave-h));
}
:where(.c-wave-mask).--rtl {
  mask-image: url(../svg/wave_rtl.svg), url(../svg/square.svg);
}
:where(.c-wave-mask).--utd {
  mask-image: url(../svg/wave_utd.svg), url(../svg/square.svg);
}
:where(.c-wave-mask).--rtl.--utd {
  mask-image:  url(../svg/square.svg), url(../svg/wave_rtl_utd.svg);
  mask-size: 100% calc(100% - var(--wave-h)), 100% calc(var(--wave-h) + 1px);
}

/*---------- ストライプ ----------*/
.c-stripe {
  --stripe-w: .25em;
  --stripe-deg: 135deg;
  background-image: repeating-linear-gradient(var(--stripe-deg), currentColor, currentColor var(--stripe-w), transparent var(--stripe-w), transparent calc(var(--stripe-w) * 2));
}