@charset "UTF-8";

/*reset*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert
}

*, *::before, *::after {
  box-sizing: border-box
}

a, button {
  cursor: revert
}

ol, ul, menu {
  list-style: none
}

img {
  display: block;
}

table {
  border-collapse: collapse
}

input, textarea {
  -webkit-user-select: auto
}

textarea {
  white-space: revert
}

meter {
  -webkit-appearance: revert;
  appearance: revert
}

:where(pre) {
  all: revert
}

::placeholder {
  color: unset
}

::marker {
  content: initial
}

:where([hidden]) {
  display: none
}

:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto
}

:where([draggable="true"]) {
  -webkit-user-drag: element
}

:where(dialog:modal) {
  all: revert
}

/*reset end*/
:root {
  --color-black1: #000;
  --color-gray1: #efefef;
  --color-gray2: #ccc;
  --color-orange1: #fd5a2a;
  --color-yellow1: #f4f10a;
  --color-blue1: #48bcc6;
  --color-blue2: #2053e0;
  --color-blue3: #095467;
  --color-purple1: #9a70cb;
  --color-green1: #51de72;
  --color-green2: #3e865a;
  --color-green4: #4caf43;
  --color-red: #e84a5c;
  --color-beige: #c7ac8d;
  --color-01: #675d38;
  --color-02: #463c21;
  font-size: 100px;
}

body, html {
  font-family: "Noto Sans JP", sans-serif;
}

body {
  font-size: min(1.2vw, 18px);
  line-height: 1.5;
  letter-spacing: .1em;
  overflow-x: hidden;
  position: relative;
  /*-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;*/
  font-feature-settings: "palt";
  font-weight: 300;
  background: #e8e2d9;
}

body:not(#page-brand):not(#page-outline):not(#page-map):not(#page-equipment):not([class*="page-plan_"])*/ {
  margin-top: 0 !important;
}

#contentsWrap {
  background: url(../img/common/common_bg01.png) center top / cover no-repeat;
  background-attachment: fixed;
  padding-bottom: 9em;
}

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

body, a {
  color: var(--color-01);
}

a {
  display: block;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3, h4, div, p, ul, li, a, span, p, th, td {
  font-weight: 300;
  box-sizing: border-box;
}

input:focus {
  outline: none;
}

iframe {
  border: none;
}

select {
  outline: none;
}

figure {
  position: relative;
}

.btn {
  transition: 0.4s;
}

.pc {
  display: revert !important;
}

.sp {
  display: none !important;
}

br.sp {
  line-height: 0;
}

.gothic {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.mincho {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.gara {
  font-family: "EB Garamond", serif;
}

.object-fit {
  object-fit: cover;
  font-family: 'object-fit: cover;'
}

.mw-1600 {
  width: 90%;
  max-width: 1600px;
  margin: auto;
}

.mw-1500 {
  width: 90%;
  max-width: 1500px;
  margin: auto;
}

.mw-1400 {
  width: 90%;
  max-width: 1400px;
  margin: auto;
}

.mw-1300 {
  width: 90%;
  max-width: 1300px;
  margin: auto;
}

.mw-1200 {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.mw-1100 {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}

.mw-1000 {
  width: 90%;
  max-width: 1000px;
  margin: auto;
}

.mw-900 {
  width: 90%;
  max-width: 900px;
  margin: auto;
}

.mw-800 {
  width: 90%;
  max-width: 800px;
  margin: auto;
}

.mw-700 {
  width: 90%;
  max-width: 700px;
  margin: auto;
}

.mw-600 {
  width: 90%;
  max-width: 600px;
  margin: auto;
}

.mw-500 {
  width: 90%;
  max-width: 500px;
  margin: auto;
}

.radius-full {
  border-radius: 50%;
  overflow: hidden;
}

.radius-list-10>*,
.radius-10 {
  border-radius: 10px;
  overflow: hidden;
}

.radius-list-15>*,
.radius-15 {
  border-radius: 15px;
  overflow: hidden;
}

.radius-list-20>*,
.radius-20 {
  border-radius: 20px;
  overflow: hidden;
}

.radius-list-25>*,
.radius-25 {
  border-radius: 25px;
  overflow: hidden;
}

.radius-list-30>*,
.radius-30 {
  border-radius: 30px;
  overflow: hidden;
}

.radius-list-35>*,
.radius-35 {
  border-radius: 35px;
  overflow: hidden;
}

.radius-list-40>*,
.radius-40 {
  border-radius: 40px;
  overflow: hidden;
}

.radius-list-45>*,
.radius-45 {
  border-radius: 45px;
  overflow: hidden;
}

.radius-list-50>*,
.radius-50 {
  border-radius: 50px;
  overflow: hidden;
}

.radius-list-55>*,
.radius-55 {
  border-radius: 55px;
  overflow: hidden;
}

.radius-list-60>*,
.radius-60 {
  border-radius: 60px;
  overflow: hidden;
}

.loader-wrap {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 10001;
}

.loader, .loader:after {
  border-radius: 50%;
  width: 7em;
  height: 7em;
}

.loader {
  margin: 60px auto;
  font-size: var(--fontsize-10);
  position: relative;
  text-indent: -9999em;
  border-top: 0.5em solid rgba(0, 121, 51, 1);
  border-right: 0.5em solid rgba(0, 121, 51, 1);
  border-bottom: 0.5em solid rgba(0, 121, 51, 1);
  border-left: 0.5em solid rgba(0, 121, 51, 0.2);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.invert {
  filter: brightness(0) invert(1);
}

figure {
  position: relative;
}

figure figcaption, .figcaption {
  display: block;
  content: attr(data-cap);
  font-size: min(0.8vw, 66.6%);
  line-height: 1.2;
  padding: min(0.52vw, 10px);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100;
}

figure figcaption.white, .figcaption.white {
  color: #fff;
}

figure figcaption.shadow {
  text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 10px #000, 0 0 10px #000, 0 0 10px #000, 0 0 10px #000, 0 0 10px #000, 0 0 10px #000;
}

.observe {
  opacity: 0;
}

.observe.staging {
  opacity: 1;
  transition-duration: 0.1s;
}

.comingsoon a {
  pointer-events: none;
  opacity: 0.3;
}

.billboard-style-01 {
  position: relative;
}

/* .billboard-style-01::after {display: block;content: '';width: 100%;height: 70%;background: linear-gradient(to top,rgba(0,0,0,0.5),transparent);position: absolute;left: 0;bottom: 0;z-index: 1;} */
.billboard-style-01 .container {}

.billboard-style-01 .container div {}

.billboard-style-01 h2 {}

.billboard-style-01 p {}

.billboard-style-01 figure img {
  /*height: min(44.7vw, 860px);*/
  height: 5rem;
  object-fit: cover;
}

.billboard-style-02 {
  position: relative;
}

.billboard-style-02::after {
  display: block;
  content: '';
  width: 100%;
  height: 70%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.billboard-style-02 .container {
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.billboard-style-02 .container div {
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 2.5em;
  z-index: 1;
}

.billboard-style-02 h2 {
  font-size: 250%;
  font-family: 'EB Garamond', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  margin-bottom: 0.25em;
}

.billboard-style-02 figure img {
  height: 30em;
  object-fit: cover;
}

#breadCrumb ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#breadCrumb ul li {
  position: relative;
}

#breadCrumb ul li+li {
  margin-left: 0.75em;
  padding-left: 1em;
}

#breadCrumb ul li+li a::before {
  display: inline-block;
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  transform: rotate(-45deg) translateY(-50%);
  position: absolute;
  top: 48%;
  left: 0;
  z-index: 1;
}

#breadCrumb ul li a {
  font-size: 87.5%;
  line-height: 1;
  padding: 0.75em 0;
}

#breadCrumb ul li:last-child a {
  pointer-events: none;
}

/* ------------------------------------------------------------------- */
#globalHeader {
  padding: 0.8em 1em 1em;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.8) 55%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0) 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  /*height: 2rem;*/
}

#globalHeader h1 {
  display: inline-block;
  position: relative;
  z-index: 2;
}

#globalHeader h1 a {
  display: flex;
  align-items: center;
}

#globalHeader h1 a img {
  width: auto;
  height: min(2.9vw, 43px);
  margin-right: 1em;
}

#globalHeader h1 a p {
  font-size: min(1.67vw, 25px);
  max-width: 14em;
  transform: translateY(min(0.6vw, 9px));
  color: #231815;
}

#globalHeader h1 a p span {
  display: inline-block;
}

#globalHeader h1 a p span+span {
  margin-left: min(0.67vw, 10px);
}

#primaryNavigation ul:nth-of-type(1) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0.8em;
  right: 1em;
  z-index: 2;
}

#primaryNavigation ul:nth-of-type(1) li+li {
  margin-left: min(2.7vw, 40px);
}

#primaryNavigation ul:nth-of-type(1) li a {}

#primaryNavigation ul:nth-of-type(1) li:not(.btn) a {
  font-size: min(1.05vw, 16px);
}

#primaryNavigation ul:nth-of-type(1) li.btn.first {}

#primaryNavigation ul:nth-of-type(1) li.btn a {
  color: #fff;
  letter-spacing: 0.14em;
  padding: min(0.18vw, 2.5px) min(0.6vw, 9px);
  background: var(--color-01);
  font-size: min(1.25vw, 18px);
  place-content: center;
  text-align: center;
  box-sizing: border-box;
  width: min(10.5vw, 158px);
}

#primaryNavigation ul:nth-of-type(1) li:not(.btn) a::before {
  display: inline-block;
  content: '';
  margin-right: 0.5em;
  width: .7em;
  height: .7em;
  background: url(../img/common/icon_arrow02.svg) center / contain no-repeat;
}

#utilityNavigation .container {
  margin: 0.7em auto 0;
}

#utilityNavigation .container ul {
  display: flex;
  justify-content: center;
  gap: min(4.17vw, .8rem);
}

#utilityNavigation .container ul li {
  position: relative;
  text-align: center;
}

#utilityNavigation .container ul li+li::before {}

#utilityNavigation .container ul li a {
  font-size: min(0.72vw, 60%);
  letter-spacing: .2em;
}

#utilityNavigation .container ul:nth-child(1) li::after {
  display: block;
  content: '';
  width: 0;
  height: 1px;
  margin: 0.25em 0 0;
  background: #fff;
}

#utilityNavigation .container ul li a span {}

#utilityNavigation .container ul li a span::before {
  display: block;
  content: attr(data-title);
  font-size: 200%;
  line-height: 1;
  margin-bottom: min(0.45vw, 7px);
  letter-spacing: .08em;
}

#navTile ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#navTile ul li {
  flex: 1 1 33.33%;
  max-width: 33.33%;
  height: 15em;
  aspect-ratio: 1 / 1;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
}

#navTile ul[data-column="4"] li {
  flex: 1 1 25%;
  max-width: 25%;
}

#navTile ul[data-column="5"] li {
  flex: 1 1 20%;
  max-width: 20%;
}

#navTile ul[data-column="6"] li {
  flex: 1 1 16.66%;
  max-width: 16.66%;
}

#navTile ul[data-column="7"] li {
  flex: 1 1 14.28%;
  max-width: 14.28%;
}

#navTile ul[data-column="8"] li {
  flex: 1 1 12.5%;
  max-width: 12.5%;
}

#navTile ul[data-column="9"] li {
  flex: 1 1 11.11%;
  max-width: 11.11%;
}

#navTile ul[data-column="10"] li {
  flex: 1 1 10%;
  max-width: 10%;
}

#navTile ul li a {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 120% auto;
  position: relative;
  transition: 0.8s;
}

#navTile ul li a::after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: 0.4s;
}

#navTile ul li a span {
  color: #fff;
  font-size: 125%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

#navTile ul li a[href="concept"] {
  background-image: url("../img/index/index_nav01_img01_pc.webp");
}

#navTile ul li a[href="location"] {
  background-image: url("../img/index/index_nav01_img02_pc.webp");
}

#navTile ul li a[href="access"] {
  background-image: url("../img/index/index_nav01_img03_pc.webp");
}

#navTile ul li a[href="design"] {
  background-image: url("../img/index/index_nav01_img04_pc.webp");
}

#navTile ul li a[href="plan"] {
  background-image: url("../img/index/index_nav01_img05_pc.webp");
}

#navTile ul li a[href="equipment"] {
  background-image: url("../img/index/index_nav01_img06_pc.webp");
}

/*body#page-concept #navTile ul li a[href="concept"],
body#page-location #navTile ul li a[href="location"],
body#page-access #navTile ul li a[href="access"],
body#page-design #navTile ul li a[href="design"],
body#page-plan #navTile ul li a[href="plan"],
body#page-equipment #navTile ul li a[href="equipment"] {border: 5px solid var(--color-green2);pointer-events: none;}
body#page-concept #navTile ul li a[href="concept"]::after,
body#page-location #navTile ul li a[href="location"]::after,
body#page-access #navTile ul li a[href="access"]::after,
body#page-design #navTile ul li a[href="design"]::after,
body#page-plan #navTile ul li a[href="plan"]::after,
body#page-equipment #navTile ul li a[href="concept"]::after {opacity: 0.55;z-index: 2;}*/
.link>* {
  display: flex;
  align-items: center;
}

.link>*:after {
  width: 1rem;
  aspect-ratio: 1;
  display: inline-block;
  margin-left: .4rem;
  border: 1px solid var(--color-01);
  border-radius: 50%;
  background: url(../img/common/icon_arrow03.svg) center / 19% auto no-repeat;
  content: "";
}

.link .en {
  font-family: "EB Garamond", serif;
  font-size: .3rem;
  line-height: 1.2;
}

.block-note {
  padding: 6em 0 0;
  background: var(--color-01);
  color: #fff;
}

.block-note ul li, .note ul li {
  font-size: min(0.8vw, 12px);
  text-indent: -1em;
  padding-left: 1em;
  line-height: 2.2;
  letter-spacing: .22em;
}

#colophon address {
  text-align: center;
  padding: 6em 0;
  background: var(--color-01);
  color: #fff;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

#colophon address h3 {
  font-size: min(1.07vw, 16px);
  letter-spacing: .22em;
}

#colophon address h3 span {
  display: inline-block;
}

#colophon address a[href^="tel:"] {
  margin: 1em 0 0;
  color: #fff;
}

#colophon address a[href^="tel:"] span:nth-child(1) {
  display: inline-block;
  font-size: 400%;
  line-height: 1;
  position: relative;
}

#colophon address .note {
  font-size: 12px;
  text-align: center;
  margin-top: 0.5em;
}

#colophon address .hours {
  margin-top: 1em;
  letter-spacing: .22em;
  font-size: min(1.07vw, 16px);
}

#colophon address .hours span {
  display: inline-block;
  margin: 0 0.5em;
}

#colophon address .hours .note {
  margin: 0.7em auto 0;
  max-width: 52em;
  font-size: 81.25%;
  letter-spacing: .06em;
  line-height: 1.7;
}

#colophon .agent {
  display: flex;
  justify-content: center;
  margin-top: 6em;
}

#colophon .agent a {
  margin: 0 1.5em;
}

#colophon .agent a img {
  width: auto;
  mix-blend-mode: multiply;
}

#colophon .agent a .position {
  font-size: min(0.8vw, 12px);
  display: block;
}

#colophon .agent a:nth-child(1) img {
  height: min(3.49vw, 67px);
}

#colophon .agent a:nth-child(1) .position {
  margin-bottom: 5px;
}

#colophon .agent a:nth-child(2) img {
  height: min(2.19vw, 42px);
}

#colophon .agent a:nth-child(2) .position {
  margin-bottom: 11px;
}

#colophon .agent a:nth-child(3) img {
  height: min(1.98vw, 38px);
}

#colophon .agent a:nth-child(3) .position {
  margin-bottom: 12px;
}

#colophon .agent a:nth-child(4) img {
  height: min(3.49vw, 67px);
}

#colophon .agent a:nth-child(4) .position {
  margin-bottom: 5px;
}

#colophon .feature, #colophon .other, #colophon .navLegal, #colophon #copyRight {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

#colophon .feature {
  padding: 6em 0;
}

#colophon .feature .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 15px #ccc;
  overflow: hidden;
  background: #fff;
}

#colophon .feature .container figure {
  width: 45%;
  padding-top: 27%;
  overflow: hidden;
}

#colophon .feature .container figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

#colophon .feature .container div {
  text-align: center;
  width: 55%;
}

#colophon .feature .container div h2 {
  font-size: 175%;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

#colophon .feature .container div h2 strong {
  display: block;
  content: attr(data-title);
  color: var(--color-green2);
  font-size: 125%;
  font-family: 'EB Garamond', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight: normal;
  margin-bottom: 0.5em;
}

#colophon .recommend .headerEnttl,
#colophon .other h3 {
  font-size: 200%;
  font-family: 'EB Garamond', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  text-align: center;
  margin-bottom: 1em;
}

#colophon .recommend {
  padding: 6em 0;
  background: var(--color-green2);
  overflow: hidden;
}

#colophon .recommend .headerEnttl {
  color: #fff;
}

#colophon .recommend #recommend_slider {
  width: 90%;
  margin: 0 auto;
  overflow: visible;
}

#colophon .recommend .swiper-recommend::before,
#colophon .recommend .swiper-recommend::after {
  background: var(--color-green2) !important;
}

#colophon .other {
  padding: 6em 0;
  background: var(--color-gray1);
}

#colophon .other ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -0.75em;
}

#colophon .other ul li {
  width: calc(25% - 1.5em);
  margin: 0.75em;
}

#colophon .other ul li a {}

#colophon .other ul li a p {
  margin-top: 0.5em;
}

#colophon .navLegal {
  padding: 1.5em 0;
  border-top: 0;
}

#colophon .navLegal ul {
  text-align: center;
}

#colophon .navLegal ul li {
  display: inline-block;
}

#colophon .navLegal ul li a {
  font-size: 75%;
  padding: 0 1em;
}

#colophon #copyRight {
  color: #fff;
  font-size: 75%;
  text-align: center;
  padding: 1.5em 0.5em;
  background: #000;
}

#colophon #copyRight span {
  display: inline-block;
}

@media only screen and (max-width: 1350px) {
  :root {
    font-size: 7.4vw;
  }

  #utilityNavigation .container {}

  #utilityNavigation .container ul li a {}

  #primaryNavigation ul:nth-of-type(1) li.btn.first {}

  #primaryNavigation ul:nth-of-type(1) li.btn a {}
}

@media only screen and (max-width: 1100px) {
  #navTile ul {
    justify-content: flex-start;
  }

  #navTile ul li {
    flex: 1 1 33.33% !important;
    max-width: 33.33% !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1300px) {
  .billboard-style-01 .container div {
    bottom: 2em;
  }

  .billboard-style-01 h2 {
    font-size: 2vw;
  }

  .billboard-style-01 p {
    font-size: 3vw;
  }

  .billboard-style-01 figure img {
    height: 22em;
  }

  .billboard-style-02 h2 {
    font-size: 3vw;
  }

  .billboard-style-02 figure img {
    height: 22em;
  }
}

@media only screen and (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }

  .btn:hover>* {
    opacity: 0.7;
    transition: 0.4s;
  }

  #utilityNavigation .container ul:nth-child(1) li::after {
    margin-left: 10%;
    transition: 0.4s ease-in-out 0s;
  }

  #utilityNavigation .container ul:nth-child(1) li:hover::after,
  #utilityNavigation .container ul:nth-child(1) li.active::after {
    width: 80%;
    background: #000;
  }

  #primaryNavigation ul:nth-of-type(2) {
    display: none;
  }

  #navTile ul li a:hover {
    background-size: 136% auto;
  }

  #navTile ul li a:hover::after {
    opacity: 0;
  }
}

@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  :root {
    font-size: 13.3333333333vw;
  }

  body {
    font-size: .24rem;
  }

  #contentsWrap {
    padding-bottom: 6em;
    overflow: hidden;
  }

  figure figcaption, .figcaption {
    font-size: .16rem;
  }

  #globalHeader {
    height: 100%;
    padding: 1em 1em 4em;
    background: transparent;
    transition: 0.4s;
    pointer-events: none;
  }

  #globalHeader h1 a {
    pointer-events: auto;
  }

  #globalHeader h1 a img {
    height: 1.5em;
    margin-right: 0.5em;
  }

  #globalHeader h1 a p {
    font-size: 75%;
    transform: translateY(5px);
  }

  #menuBtn {
    width: 3.75em;
    height: 3.75em;
    border-radius: 0;
    border: none;
    box-shadow: none;
    /*background: #fff;*/
    position: fixed;
    top: 0;
    right: 0;
    pointer-events: auto;
  }

  #menuBtn::after {
    display: block;
    content: '';
    width: 100vw;
    height: 140%;
    background: linear-gradient(180deg, #FFF 0%, #FFF 60%, rgba(255, 255, 255, 0.88) 65%, rgba(255, 255, 255, 0.71) 70%, rgba(255, 255, 255, 0.53) 75%, rgba(255, 255, 255, 0.35) 80%, rgba(255, 255, 255, 0.19) 85%, rgba(255, 255, 255, 0.08) 90%, rgba(255, 255, 255, 0.02) 95%, rgba(255, 255, 255, 0) 100%) !important;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }

  #menuBtn .line {
    display: block;
    width: 2em;
    height: 1.25em;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
  }

  #menuBtn .line span {
    display: block;
    width: 100%;
    height: 1px;
    background: #222;
    position: absolute;
    top: calc(50% - 1px);
    transition: 0.4s;
  }

  #menuBtn .line span:nth-child(1) {
    transform: translateY(-0.5em) rotate(0deg);
  }

  #menuBtn .line span:nth-child(3) {
    transform: translateY(0.5em) rotate(0deg);
  }

  #menuBtn .txt {
    display: block;
    font-size: 67.5%;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    margin-top: 0.5em;
  }

  #utilityNavigation {
    height: 90%;
    overflow-y: scroll;
    opacity: 0;
    pointer-events: none;
    transition: 0.4s;
  }

  #utilityNavigation .container {
    margin-top: 2em;
  }

  #utilityNavigation .container ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    gap: 0;
  }

  #utilityNavigation .container ul li {
    width: 48%;
    margin: 0.5em 0 0;
  }

  #utilityNavigation .container ul li+li::before {
    display: none;
  }

  #utilityNavigation .container ul li a {
    padding: 0.96em 0;
    overflow: hidden;
    color: #fff;
  }

  #utilityNavigation .container ul li a span {
    display: block;
    position: relative;
  }

  #utilityNavigation .container ul:nth-child(1) li::after {
    width: 0%;
    margin: 0.25em 0 0;
    transition: 0.4s ease-in-out 0.4s;
  }

  #utilityNavigation .container ul:nth-child(1) li a {
    text-align: left;
    padding: 0.75em 0 0.25em;
    font-size: .67em;
  }

  #utilityNavigation .container ul:nth-child(1) li a span {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.8s, transform 0.8s;
  }

  #utilityNavigation .container ul:nth-child(1) li a span::before {
    margin-bottom: .23em;
  }

  #utilityNavigation .container ul:nth-child(2) {
    margin-top: 1.5em;
  }

  #utilityNavigation .container ul:nth-child(2) li {
    color: #fff;
    width: 100%;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.8s, transform 0.8s;
  }

  #utilityNavigation .container ul:nth-child(2) li a {
    background: var(--color-01);
    font-size: 1em;
  }

  #primaryNavigation {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  #primaryNavigation::before {
    display: block;
    content: '';
    width: 100%;
    height: 4em;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05));
    position: absolute;
    left: 0;
    bottom: calc(100% - 1.5em);
    z-index: -1;
    pointer-events: none;
  }

  #primaryNavigation ul:nth-of-type(1) {
    display: none;
  }

  #primaryNavigation ul:nth-of-type(2) {
    display: flex;
    width: 100%;
    background: #fff;
  }

  #primaryNavigation ul:nth-of-type(2) li {
    flex: 1;
    text-align: center;
    position: relative;
  }

  #primaryNavigation ul:nth-of-type(2) li a {
    height: 5em;
    background: #fff;
    position: relative;
  }

  #primaryNavigation ul:nth-of-type(2) li+li::before {
    display: block;
    content: '';
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
  }

  #primaryNavigation ul:nth-of-type(2) li a span {
    font-size: 68.75%;
    line-height: 1.1;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
  }

  #primaryNavigation ul:nth-of-type(2).icon li a span::before {
    display: block;
    content: '';
    width: 2.2em;
    height: 2.2em;
    margin: 0 auto 1em;
  }

  #primaryNavigation ul:nth-of-type(2) li.request a span::before {
    background: url("../img/common/icon_request.svg") no-repeat center/80%;
  }

  #primaryNavigation ul:nth-of-type(2) li.reserve a span::before {
    background: url("../img/common/icon_reserve.svg") no-repeat center/contain;
  }

  #primaryNavigation ul:nth-of-type(2) li.map a span::before {
    background: url("../img/common/icon_map.svg") no-repeat center/contain;
  }

  #primaryNavigation ul:nth-of-type(2) li.online a span::before {
    background: url("../img/common/icon_outline.svg") no-repeat center/contain;
  }

  #primaryNavigation ul:nth-of-type(2) li.tel a span::before {
    background: url("../img/common/icon_tel.svg") no-repeat center/contain;
  }

  body.menuOpen #globalHeader {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    pointer-events: auto;
  }

  body.menuOpen #menuBtn .line span:nth-child(2) {
    opacity: 0;
  }

  body.menuOpen #menuBtn .line span:nth-child(1) {
    transform: translateY(0) rotate(150deg);
  }

  body.menuOpen #menuBtn .line span:nth-child(3) {
    transform: translateY(0) rotate(-150deg);
  }

  body.menuOpen #utilityNavigation {
    opacity: 1;
    pointer-events: auto;
  }

  body.menuOpen #utilityNavigation .container ul:nth-child(1) li.active::after {
    width: 100%;
  }

  body.menuOpen #utilityNavigation .container ul:nth-child(1) li a span {
    opacity: 1;
    transform: translateY(0);
  }

  body.menuOpen #utilityNavigation .container ul:nth-child(2) li {
    opacity: 1;
    transform: translateY(0);
  }

  /*body#index #primaryNavigation ul:nth-of-type(2) {
    opacity: 0;
    transition: 0.4s;
    pointer-events: none;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }*/

  /*body#index.scrolled #primaryNavigation ul:nth-of-type(2) {
    opacity: 1;
    transition: 0.4s;
    pointer-events: auto;
  }*/

  #navTile ul li {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    height: 7em;
  }

  #navTile ul li a span {
    font-size: 112.5%;
  }

  .billboard-style-01 .container div {
    bottom: 1.25em;
  }

  .billboard-style-01 h2 {
    font-size: 125%;
    margin-bottom: 0;
  }

  .billboard-style-01 p {
    font-size: 125%;
    line-height: 1.25;
  }

  .billboard-style-01 figure img {
    height: 4.6rem;
  }

  .billboard-style-01 .container div {
    bottom: 1.5em;
  }

  .billboard-style-02 h2 {
    font-size: 175%;
    margin-bottom: 0;
  }

  .billboard-style-02 figure img {
    height: 13em;
  }

  .billboard-style-02 .container div {
    bottom: 1.5em;
  }

  .link .en {
    font-size: .34rem;
  }

  .link>*:after {
    background-size: 25% auto;
  }

  .block-note {
    padding: 3em 0 0;
  }

  .block-note ul li, .note ul li {
    font-size: .51em;
    font-size: .16rem;
  }

  #breadCrumb ul li a {
    font-size: 75%;
  }

  #colophon address {
    padding: 3em 0;
  }

  #colophon address h3 {
    font-size: .67em;
    font-size: .26rem;
  }

  #colophon address a[href^="tel:"] {
    display: inline-block;
    font-size: .3rem;
  }

  #colophon address a[href^="tel:"] span:nth-child(1) {
    font-size: 250%;
  }

  #colophon address a[href^="tel:"] span:nth-child(2) {
    margin-top: 0.5em;
    padding: 0.3em 0 0.25em;
    border: 1px solid #fff;
  }

  #colophon address .hours {
    font-size: .67em;
    font-size: .19rem;
    margin-top: 2em;
  }

  #colophon address .hours span {
    display: inline-block;
    margin: 0 0.5em;
  }

  #colophon address .hours .note {
    margin-top: 0.9em;
    max-width: none;
    font-size: 100%;
    letter-spacing: .02em;
    line-height: 1.8;
  }

  #colophon .agent {
    margin-top: 3em;
    flex-direction: column;
  }

  #colophon .agent a {
    margin: 0 auto;
    width: fit-content;
  }

  #colophon .agent a+a {
    margin-top: 20px;
  }

  #colophon .agent a .position {
    font-size: .16rem;
  }

  #colophon .agent a:nth-child(1) img {
    height: 0.6rem;
  }

  #colophon .agent a:nth-child(1) .position {
    margin-bottom: 10px;
  }

  #colophon .agent a:nth-child(2){
    margin-left: 2.35rem;
  }

  #colophon .agent a:nth-child(2) img {
    height: 0.4rem;
  }

  #colophon .agent a:nth-child(2) .position {
    margin-bottom: 10px;
  }

  #colophon .agent a:nth-child(3){
    margin-left: 2.35rem;
  }

  #colophon .agent a:nth-child(3) img {
    height: 0.4rem;
  }

  #colophon .agent a:nth-child(3) .position {
    margin-bottom: 10px;
  }

  #colophon .agent a:nth-child(4){
    margin-left: 2.35rem;
  }

  #colophon .agent a:nth-child(4) img {
    height: 0.6rem;
  }

  #colophon .agent a:nth-child(4) .position {
    margin-bottom: 10px;
  }

  #colophon .agent a img {
    width: auto;
    height: auto;
  }

  #colophon .feature {
    padding: 3em 0;
  }

  #colophon .feature .container figure {
    width: 100%;
    padding-top: 12em;
  }

  #colophon .feature .container div {
    width: 100%;
    padding: 2em 0;
  }

  #colophon .feature .container div h2 {
    font-size: 112.5%;
  }

  #colophon .feature .container div h2 strong {
    margin-bottom: 0;
  }

  #colophon .recommend .headerEnttl,
  #colophon .other h3 {
    font-size: 150%;
    margin-bottom: 0.25em;
  }

  #colophon .recommend {
    padding: 3em 0;
  }

  #colophon .other {
    padding: 3em 0 2em;
  }

  #colophon .other ul {
    margin: 0 -0.5em;
  }

  #colophon .other ul li {
    width: calc(50% - 1em);
    margin: 0.5em;
  }

  #colophon .other ul li a p {
    font-size: 87.5%;
  }

  #colophon .navLegal {
    padding: 1em 0;
  }

  #colophon .navLegal ul li a {
    padding: 0 0.5em;
  }

  #colophon #copyRight {
    font-size: 10px;
    padding: 1em 0;
    letter-spacing: 0;
  }
}

/* @media only screen and (max-width: 550px) {
  body {font-size: 2.9vw;}
}
@media only screen and (max-width: 450px) {
  body {font-size: 4.2vw;}
} */