@charset "utf-8";

html {
  font-size: 62.5%;
}
body {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  font-size: 1.5rem;
  color: var(--gray);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
@media (max-width: 768px) {
  body {
    font-size: 1.3rem;
  }
}

body.lang-ja {
  font-family: var(--ja-1), var(--basic-mincho);
}
body:is(.lang-en, .lang-fr) {
  font-family: var(--en-1), sans-serif;
}

/*-------------------------------

site common

-------------------------------*/
:root {
  --basic-mincho:
    "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "MS P明朝", "MS Mincho", serif;
  --basic-gothic:
    "游ゴシック体", YuGothic, "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --white: #fff;
  --black: #000;
  --gray: #d1d1d1;
  --dark-gray: #62605a;
  --beige: #ac9f84;
  --brown: #645a46;
  --form-color: #999;
  --ja-1: a-otf-ryumin-pr6n;
  --ja-2: "Noto Sans JP";
  --en-1: Arial;
  --en-2: "copperplate";
}
@media (max-width: 768px) {
  :root {
    --c-reservation-link-height: 56px;
  }
}

.js-fadeIn {
  opacity: 0;
  transition: opacity 2s;
  /* transition: opacity 0.4s; */
}
.js-fadeIn.is-show {
  opacity: 1;
}
.js-img-fadeIn {
  background: var(--black);
}
.js-img-fadeIn :is(img, picture) {
  opacity: 0;
  transition: opacity 2s;
  /* transition: opacity 0.4s; */
}
.js-img-fadeIn.is-show :is(img, picture) {
  opacity: 1;
}
.js-parallax-fadeIn {
  opacity: 0;
  transition: opacity 0.4s;
}
.js-parallax-fadeIn.is-show {
  opacity: 1;
}
.js-inview-delay {
  transition-delay: 0.5s;
}
body {
  background: image-set(
      url(../img/common/bg.jpg.webp) type("image/webp"),
      url(../img/common/bg.jpg) type("image/jpeg")
    )
    center / cover no-repeat;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  height: 100vh;
  background: image-set(
      url(../img/common/bg.jpg.webp) type("image/webp"),
      url(../img/common/bg.jpg) type("image/jpeg")
    )
    center / cover no-repeat;
  z-index: -1;
}
