@layer base, components, pages;
:root {
  --theme: #EA5514;
  --sub: #00005f;
  --typo: #faebd7;
  --body: #DE551A;
  --dark: #912d01;
  --sunny: #1345a9;
  --gray: #dddddd;
  --ice: #fff4e6;
  --themeDiff: #1096c3;
  --bk01: rgba(0, 0, 0, .1);
  --bk02: rgba(0, 0, 0, .2);
  --bk03: rgba(0, 0, 0, .3);
  --bk04: rgba(0, 0, 0, .4);
  --bk05: rgba(0, 0, 0, .5);
  --bk06: rgba(0, 0, 0, .6);
  --bk07: rgba(0, 0, 0, .7);
  --bk08: rgba(0, 0, 0, .8);
  --bk09: rgba(0, 0, 0, .9);
  --wh01: rgba(255, 255, 255, .1);
  --wh02: rgba(255, 255, 255, .2);
  --wh03: rgba(255, 255, 255, .3);
  --wh04: rgba(255, 255, 255, .4);
  --wh05: rgba(255, 255, 255, .5);
  --wh06: rgba(255, 255, 255, .6);
  --wh07: rgba(255, 255, 255, .7);
  --wh08: rgba(255, 255, 255, .8);
  --wh09: rgba(255, 255, 255, .9);
  --thin: 250;
  --regular: 350;
  --semi: 550;
  --bold: 750;
  --black: 850;
  --h1: 1.5em;
  --h2: 1.75em;
  --h3: 1.5em;
  --h4: 1.25em;
  --h5: 1.125em;
  --chapSize: 4.5vw;
  --sans: "Figtree", sans-serif;
  --lineHeight: 2;
  --tr02: all .2s ease-in-out;
  --tr04: all .4s ease-in-out;
  --trDis: transform .6s cubic-bezier(0.55, -0.15, 0.1, 0.92), opacity .8s cubic-bezier(0.6, 0, 0, 1), visibility 0s, border-radius .6s cubic-bezier(0.6, 0, 0, 1), background-color .4s ease-in-out;
  --easing: cubic-bezier(0.97, 0.04, 0.58, 0.8);
  --easing2: cubic-bezier(1, 0.01, 0.2, 1);
  --easing3: cubic-bezier(0.97, -0.18, 0.41, 1);
  --bounce: cubic-bezier(0.75, -0.26, 0.58, 1.78);
  --bounce2: cubic-bezier(1, 0, 0.58, 1.78);
  --rad0: .25rem;
  --rad1: .75rem;
  --rad3: 2rem;
  --rad5: 5rem;
  --clip: calc(var(--navH) * 1.5);
  --paragraph: 1em;
  --margin: var(--floatingPos);
  --navH: 3.5rem;
  --fitH: 100vh;
  --btnMenu: 3rem;
  --logoW: var(--btnMenu);
  --innMax: inherit;
  --modalClip: inset(var(--framePad) var(--framePad) round var(--rad1));
  --header-offset: calc(var(--floatingPos) + var(--btnMenu) + var(--pad) * 4);
  --scrW: 20px;
  --pad: 2rem;
  --innPad: calc(var(--pad) * 3);
  --innNarrow: calc(var(--innPad) * 2.5);
  --innCramped: calc(var(--innPad) * 3.5);
  --padTop: var(--innPad);
  --padLeft: var(--innPad);
  --padRight: var(--innPad);
  --padBottom: var(--innPad);
  --framePad: calc(var(--pad) * 1.25);
  --floatingPos: var(--framePad);
  --setNav: -100% 100%;
  --skew: 30deg;
  --skewMinus: -30deg;
  --wMode: sideways-lr;
}
@media (max-width: 1536px) {
  :root {
    --innPad: calc(var(--pad) * 2);
    --innNarrow: calc(var(--innPad) * 3);
    --innCramped: calc(var(--innPad) * 3);
  }
}
@media (max-width: 1100px) {
  :root {
    --h1: 1.1em;
    --h2: 1.6em;
    --h3: 1.6em;
    --h4: 1.5em;
    --h5: 1em;
    --chapSize: 4.5vw;
    --logoW: calc(var(--btnMenu) * .8);
    --pad: 1rem;
    --innPad: calc(var(--pad) * 2);
    --innNarrow: var(--innPad);
    --innCramped: var(--innPad);
    --padTop: calc(var(--innPad) * 2);
    --padBottom: calc(var(--innPad) * 2);
    --wMode: vertical-rl;
    --fitH: 100vw;
    --framePad: calc(var(--pad) * .5);
    --setNav: 100% 0;
    --skew: 0deg;
    --skewMinus: 0deg;
  }
}

.no-fouc {
  display: none;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.loaded .siteFrame {
  opacity: 1;
  visibility: visible;
}
.loaded .globalMenu {
  translate: var(--setNav);
}

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

html {
  width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}
html.posFix {
  overflow-y: hidden;
}

body {
  background-color: var(--theme);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
  background-attachment: fixed;
  width: 100%;
  min-height: 100vh;
  position: relative;
  transition: background-color 0.4s linear, color 0.4s ease-in-out;
}
body.loaded .sectMenu,
body.loaded .siteFrame {
  transition: opacity 0.8s cubic-bezier(0.6, 0, 0, 1);
  opacity: 1;
}
body.loaded .ctaWrap {
  opacity: 1;
  transition-delay: 0.1s, var(--ctaDelay);
}
body.loaded .pageBg {
  opacity: 0.1;
}
body.isFooter .breadCrumb ul,
body.isFooter .ctaWrap {
  transition: transform 0.4s ease-in-out 0.4s;
  translate: var(--translate);
}
body.isFooter .breadCrumb ul {
  --translate: -300% 0;
}
body.isFooter .ctaWrap {
  --translate: 300% 0;
}
body.isFooter .pcNav > ul:hover {
  background-color: var(--wh01);
  box-shadow: 0 0 3em var(--bk02);
}
body.isFooter .siteFrame .btnMenu {
  background: var(--theme);
  color: var(--typo);
}
body:not(.isFooter) .globalFooter .inner .coInfo .gLogo svg rect, body:not(.isFooter) .globalFooter .inner .coInfo .gLogo svg polygon, body:not(.isFooter) .globalFooter .inner .coInfo .gLogo svg path {
  fill: currentColor;
}
body:not(.chgColor) {
  color: var(--typo);
}
body:not(.chgColor) .btnMenu, body:not(.chgColor) .ctaWrap, body:not(.chgColor) .bubble {
  color: var(--theme);
}
body:not(.chgColor) .btn:not(:hover) {
  color: var(--theme);
}
body.chgColor .btnMenu, body.chgColor .ctaWrap, body.chgColor .bubble {
  color: var(--invert-color);
}
body.chgColor .btn:not(:hover) {
  color: var(--invert-color);
}
.inner {
  width: 100%;
  padding: var(--padTop) var(--padRight) var(--padBottom) var(--padLeft);
  margin-left: auto;
  margin-right: auto;
}
.inner.narrow {
  --padLeft: var(--innNarrow);
  --padRight: var(--innNarrow);
}
.inner.cramped {
  --padLeft: var(--innCramped);
  --padRight: var(--innCramped);
}

.siteFrame {
  opacity: 0;
  width: 100%;
}
.siteFrame .headerUtility {
  order: 1;
  z-index: 99;
}
.siteFrame .btnMenu {
  z-index: 106;
}
.siteFrame .globalMenu {
  z-index: 105;
}
.siteFrame .outerWrap {
  order: 2;
}
.siteFrame .copyRight {
  order: 4;
}

.outerWrap {
  width: 100%;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}
.drawered .siteFrame .menuLayer {
  border-radius: 0;
}
.drawered.navOpen .siteFrame .menuLayer {
  width: 100%;
  height: 100%;
  transition: 0.6s all cubic-bezier(0.55, -0.15, 0.1, 0.92) 0.1s, 0s right;
}
.drawered.navOpen .siteFrame .menuLayer span {
  border-radius: 0;
  transition: 0.6s all cubic-bezier(0.55, -0.15, 0.1, 0.92) 0.1s;
}

.gLogo {
  height: var(--logoW);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: calc(var(--logoW) * 0.25);
}
.gLogo div.mark {
  width: calc(var(--logoW) * 0.855);
}
.gLogo div.type {
  width: calc(var(--logoW) * 2.5);
  display: grid;
  place-items: center;
  gap: calc(var(--logoW) * 0.2);
}
.gLogo div.type svg:last-child {
  width: 80%;
}

.headerUtility {
  position: fixed;
  transition: var(--tr04);
  top: var(--floatingPos);
  left: var(--floatingPos);
  display: flex;
}
@media (min-width: 1100px) {
  .headerUtility:hover {
    color: var(--sub);
  }
}
.headerUtility .gLogo svg rect, .headerUtility .gLogo svg polygon, .headerUtility .gLogo svg path {
  fill: currentColor;
}

.btnMenu {
  --barWidth: 1.25em;
  position: fixed;
  top: var(--floatingPos);
  width: var(--btnMenu);
  height: var(--btnMenu);
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: 0;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: none;
  color: currentColor;
  transition: var(--trDis);
  background-color: var(--typo);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
  background-attachment: fixed;
  border-radius: 50%;
}
@media (min-width: 1100px) {
  .btnMenu {
    right: 0;
    margin-right: var(--floatingPos);
  }
}
@media (max-width: 1100px) {
  .btnMenu {
    right: var(--floatingPos);
  }
}
.btnMenu div {
  width: var(--barWidth);
  height: var(--barWidth);
  align-items: center;
  align-content: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.84, 0.17, 0, 0.71);
  transform: translate3d(0, 0, 0);
}
.btnMenu div span {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 40%;
}
.btnMenu div span:before, .btnMenu div span:after {
  content: "";
  height: 2px;
  display: block;
  background: currentColor;
  position: absolute;
  left: 0;
  transition: all 0.2s cubic-bezier(0.84, 0.17, 0, 0.71) 0.1s;
}
.btnMenu div span:before {
  top: 0;
  width: 100%;
}
.btnMenu div span:after {
  top: 100%;
  width: 75%;
}
.btnMenu div em {
  line-height: 1;
  font-size: 0.7em;
  text-align: center;
  width: calc(100% + 0.75em);
  color: var(--typo);
  font-weight: var(--regular);
  margin: 0.75em 0 -0.75em;
  display: none;
}
.btnMenu.opened {
  border-radius: 50%;
}
.btnMenu.opened div span:before, .btnMenu.opened div span:after {
  width: 100%;
  top: 50%;
  left: 0;
  transition-delay: 0.4s;
}
.btnMenu.opened div span:before {
  rotate: 45deg;
}
.btnMenu.opened div span:after {
  rotate: -45deg;
}

.pcNav {
  --barWidth: 1.25em;
  right: 0;
  margin-right: calc(var(--btnMenu) + var(--pad) * 1.5);
  z-index: 2;
  height: var(--btnMenu);
  align-items: center;
  position: fixed;
}
@media (min-width: 1100px) {
  .pcNav {
    top: var(--floatingPos);
    gap: 2em;
  }
}
@media (max-width: 1100px) {
  .pcNav {
    display: none;
  }
}
.pcNav > ul {
  display: flex;
  align-items: center;
  height: 100%;
  transition: background-color 0.2s linear, box-shadow 0.2s linear;
  border-radius: var(--rad5);
  padding: 0 1em;
  font-size: 0.875em;
}
.pcNav > ul:hover {
  background-color: var(--bk08);
  box-shadow: 0 0 3em var(--wh02);
}
.pcNav > ul > li {
  position: relative;
}
.pcNav > ul > li.current_page_item a:after {
  clip-path: inset(0 0 round var(--rad0));
}
.pcNav > ul > li > a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 calc(var(--pad) * 0.5);
  color: currentColor;
  z-index: 0;
}
.pcNav > ul > li > a:after {
  --afterH: 1px;
  content: "";
  display: block;
  width: calc(100% - var(--pad));
  height: 2px;
  background-color: currentColor;
  position: absolute;
  bottom: 0;
  left: calc(var(--pad) * 0.5);
  z-index: -1;
  clip-path: inset(0 100% round 0);
  transition: clip-path 0.4s var(--easing);
}
.pcNav > ul > li > a:hover:after {
  clip-path: inset(0 0 round var(--rad0));
}

.inqBtn {
  line-height: 1.5;
  gap: var(--wrapGap);
}
@media (min-width: 1100px) {
  .inqBtn {
    --wrapGap: 1em;
    --btnPad: calc(var(--pad) * 0.25) calc(var(--pad) * 0.5) calc(var(--pad) * 0.25) calc(var(--pad) * 0.33);
    --btnGap: 1em;
    --btnH: 100%;
  }
}
@media (max-width: 1100px) {
  .inqBtn {
    --wrapGap: 1em;
    --btnPad: 1em 1em;
    --btnGap: .5em;
    --btnH: auto;
  }
}
.inqBtn a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btnH);
  padding: var(--btnPad);
  gap: var(--btnGap);
  border-radius: var(--rad0);
  transition: var(--tr04);
}

.ctaWrap {
  --ctaWrapM: var(--floatingPos);
  --ctaWrapW: var(--btnMenu);
  --ctaWrapH: var(--fitH);
  --ctaBtnSize: .875em;
  --ctaBtnPad: 2em 0;
  --ctaBtnGap: 1px;
  --ctaWriting: vertical-rl;
  --ctaWrapBg: none;
  --ctaWrapRad: 0;
  --inquiryRad: var(--rad5) var(--rad5) 0 0;
  --partnerRad: 0 0 var(--rad5) var(--rad5);
  display: flex;
  justify-content: center;
  writing-mode: var(--ctaWriting);
  position: fixed;
  z-index: 1;
  gap: var(--ctaBtnGap);
  width: var(--ctaWrapW);
  height: var(--ctaWrapH);
  font-size: var(--ctaBtnSize);
  font-weight: var(--bold);
  margin-right: var(--ctaWrapM);
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out 0.4s;
  border-radius: var(--ctaWrapRad);
  background-color: var(--ctaWrapBg);
  opacity: 0;
}
@media (min-width: 1100px) {
  .ctaWrap {
    top: 0;
    right: 0;
  }
}
@media (max-width: 1100px) {
  .ctaWrap {
    bottom: 0;
    left: 0;
    padding: var(--ctaBtnGap);
    letter-spacing: 0;
    --ctaWrapM: 0;
    --ctaWrapW: 100%;
    --ctaWrapH: auto;
    --ctaWrapRad: var(--rad5);
    --ctaWrapBg: var(--wh05);
    --ctaBtnSize: .8em;
    --ctaBtnPad: .5em 0;
    --ctaBtnGap: .5em;
    --ctaWriting: inherit;
    --inquiryRad: var(--rad5);
    --partnerRad: var(--rad5);
  }
  .ctaWrap li {
    flex: 1;
  }
}
.ctaWrap li.current-menu-item a {
  color: var(--typo);
  background-color: var(--theme);
  box-shadow: 0 0 1em var(--bk01) inset;
}
.ctaWrap li a {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--ctaBtnPad);
  background-color: var(--typo);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
  background-attachment: fixed;
  transition: var(--tr04);
  border-radius: var(--ctaBtnRad);
}
.ctaWrap li a:hover {
  color: var(--typo);
  background-color: var(--theme);
  box-shadow: 0 0 1em var(--bk01) inset;
}
.ctaWrap li:nth-child(1) a {
  --ctaBtnRad: var(--inquiryRad);
}
.ctaWrap li:nth-child(2) a {
  --ctaBtnRad: var(--partnerRad);
}

.serviceCard .serviceCardItem {
  flex: 1;
}
.serviceCard .serviceCardItem a {
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: 700;
  transition: var(--tr04);
}
.serviceCard .serviceCardItem a figure {
  position: relative;
  z-index: 1;
  aspect-ratio: 500/367;
}
.serviceCard .serviceCardItem a figure:after {
  content: "";
  display: block;
  width: 73.4%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--typo);
  z-index: 0;
  border-radius: 50%;
  transition: var(--tr04);
}
.serviceCard .serviceCardItem a figure img {
  z-index: 1;
}
.serviceCard .serviceCardItem a span {
  display: block;
  line-height: 1.5;
}

.globalMenu {
  translate: var(--setNav);
  transition: translate 0s linear, opacity 0s linear, visibility linear 0s;
  transition-delay: 0.7s, 0.7s, 0.7s;
  opacity: 0;
  visibility: hidden;
}
.globalMenu .innerWrap {
  opacity: 0;
  filter: blur(2em);
  translate: var(--setNav);
  transition: translate 0.2s var(--smash), filter 0.2s linear, opacity 0.4s ease-in-out;
  transition-delay: 0.4s, 0s, 0s;
  will-change: filter;
}
.globalMenu.visible {
  translate: 0 0;
  transition-delay: 0s, 0s, 0s;
  opacity: 1;
  visibility: visible;
}
.globalMenu.visible .innerWrap {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
  transition-duration: 0.2s, 0s, 0.2s;
  transition-delay: 0.1s, 0.1s, 0s;
}
.globalMenu.visible:before {
  opacity: 1;
  transition-delay: 0.2s;
}

.globalMenu {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
}
@media (min-width: 1100px) {
  .globalMenu {
    --menuW: 50%;
    --menuH: 100%;
    --emSize: 2em;
    --innerPad: 0 calc(var(--pad) * 2);
    --mainDir: column;
    --mainPad: 0;
    --innerY: center;
    --innerX: center;
    --strongY: calc(var(--navH) * 1);
    --stringX: calc(25% + var(--navH) * 1);
    --innerSkew: skew(var(--skew));
    --listSize: var(--h4);
  }
}
@media (max-width: 1100px) {
  .globalMenu {
    --menuW: 100%;
    --menuH: 100%;
    --emSize: 2em;
    --innerPad: 0 0 var(--btnMenu);
    --mainDir: column;
    --mainPad: calc(var(--btnMenu) * 1.5) calc(var(--emSize) * .75) 0;
    --innerY: flex-start;
    --innerX: flex-start;
    --strongY: calc(var(--btnMenu) + 1em);
    --stringX: calc(100% - var(--btnMenu) + .2em);
    --innerSkew: none;
    --listSize: 1.1em;
  }
}
.globalMenu a {
  transition: var(--tr04);
}
.globalMenu .innerWrap {
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
  background-color: var(--theme);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
  background-attachment: fixed;
  transform: skew(var(--skewMinus));
  width: var(--menuW);
  height: var(--menuH);
  position: relative;
  z-index: 1;
  margin-left: auto;
  will-change: filter;
}
.globalMenu .innerWrap nav {
  width: 100%;
  height: 100%;
}
@media (min-width: 1100px) {
  .globalMenu .innerWrap nav {
    transform: var(--innerSkew);
  }
}
.globalMenu .innerWrap nav .menuWrap {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  color: var(--typo);
}
.globalMenu .innerWrap nav em {
  writing-mode: var(--wMode);
  display: block;
  font-size: var(--emSize);
  position: absolute;
  top: var(--strongY);
  left: var(--stringX);
  line-height: 0.8;
  color: var(--typo) !important;
  rotate: var(--skew);
}
.globalMenu .innerWrap nav .scrollInner {
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  position: relative;
  flex-direction: column;
  justify-content: var(--innerY);
  align-items: var(--innerX);
  padding: var(--innerPad);
}
.globalMenu .innerWrap nav .scrollInner .mainItem {
  width: 100%;
  max-width: 60em;
  justify-content: center;
  flex-direction: var(--mainDir);
  padding: var(--mainPad);
  align-items: center;
}
.globalMenu .innerWrap nav .scrollInner .mainItem .primaryMenu {
  rotate: var(--skew);
}
.globalMenu .innerWrap nav .scrollInner .mainItem .primaryMenu li {
  font-size: var(--listSize);
  rotate: var(--skewMinus);
}
.globalMenu:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  cursor: url(../images/close.svg), pointer;
  background-color: var(--bk07);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  opacity: 0;
  transition: var(--tr04);
}

.menu .primaryMenu a {
  width: 100%;
  display: block;
  padding: 0.5em 0 0.5em 2em;
  transition: var(--tr04);
  position: relative;
}
.menu .primaryMenu a:before {
  content: "";
  display: block;
  width: 1em;
  height: 1px;
  background: currentColor;
  position: absolute;
  top: 50%;
  transition: var(--tr04);
  left: 0;
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children {
  display: flex;
  position: relative;
  line-height: 1;
  text-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
  flex: 1;
  gap: var(--gap);
}
@media (min-width: 1100px) {
  .menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children {
    flex-direction: column;
    --gap: 0;
  }
}
@media (max-width: 1100px) {
  .menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children {
    --gap: 0;
    align-items: flex-start;
    flex-direction: column;
  }
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children + .menu-item-has-children {
  margin-top: 1em;
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding-left: 1em;
}
@media (max-width: 1100px) {
  .menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu {
    flex: 1;
  }
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu li {
  position: relative;
}
.menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu li a {
  font-size: 0.8em;
}
@media (min-width: 1100px) {
  .menu .primaryMenu:not(.sub-menu):not(.secondaryMenu) li:not(.guide).menu-item-has-children .sub-menu li a:hover:before {
    width: 1.5em;
  }
}

.breadCrumb {
  transition: var(--trDis);
  transition-delay: 0s, 0.6s, 0s, 0s;
  top: var(--top);
  left: var(--left);
}
@media (min-width: 1100px) {
  .breadCrumb {
    --top: calc(var(--floatingPos) + var(--btnMenu) * 2);
    --left: calc(var(--floatingPos) + var(--btnMenu) * .5 + .5em);
    position: fixed;
    z-index: 3;
    transform: rotate(90deg);
    transform-origin: left top;
    width: calc(var(--fitH) - var(--navH) * 1.5);
  }
}
@media (max-width: 1100px) {
  .breadCrumb {
    display: none;
  }
}
.breadCrumb ul {
  margin: 0;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.75em;
}
@media (max-width: 1100px) {
  .breadCrumb ul {
    justify-content: flex-end;
    overflow-x: scroll;
    word-break: keep-all;
    white-space: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    padding-right: 0.5em;
  }
  .breadCrumb ul::-webkit-scrollbar {
    display: none;
  }
}
.breadCrumb ul li {
  display: flex;
  align-items: center;
}
.breadCrumb ul li [property=itemListElement] {
  display: flex;
  align-items: center;
  padding: 0.25em 1em;
  transition: var(--tr04);
}
.breadCrumb ul li [property=itemListElement]:before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1px;
  margin-right: 0.5em;
  background: currentColor;
}
.breadCrumb ul li [property=itemListElement] a, .breadCrumb ul li [property=itemListElement] span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20em;
}
.breadCrumb ul li [property=itemListElement]:has(a):hover {
  background: var(--typo);
  color: var(--theme);
  border-radius: 3em;
}

.bookingBnr {
  z-index: 100;
  transition: 0.6s transform cubic-bezier(0.55, -0.15, 0.1, 0.92) 0.1s;
  line-height: 1;
  filter: drop-shadow(0 0 1em rgba(0, 0, 0, 0.2));
  will-change: filter;
}

.bookingPane .cap {
  font-size: 1.8em;
  width: 100%;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

.btns {
  width: 100%;
  padding: 0.5em 0;
  justify-content: center;
}
@media (max-width: 1100px) {
  .btns {
    justify-content: space-between;
  }
}
.btns .btn {
  padding: 0.5em;
}
@media (max-width: 1100px) {
  .btns .btn {
    width: 100%;
    margin-top: 0.5em;
  }
}
.btns .btn a {
  font-weight: 700;
  border-radius: 3em;
  transition: var(--tr02);
  padding: 1em 0.75em;
  background: var(--typo);
}
.btns .btn a img {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
}
.btns .btn a p {
  line-height: 1;
  font-size: 0.8em;
}
@media (max-width: 1100px) {
  .btns .btn a p {
    font-size: 1em;
  }
}
@media (max-width: 1100px) {
  .btns .btn a {
    justify-content: center;
    padding: 1em 0;
  }
  .btns .btn a:after {
    content: none;
  }
}

.btnList {
  justify-content: center;
  column-gap: 1em;
  width: 100%;
}
.btnList .btnElm {
  width: calc(50% - 1em);
  padding: 2em;
  align-items: center;
  background: var(--colorLight);
  border-radius: var(--rad1);
  margin-top: 1em;
}
@media (max-width: 1100px) {
  .btnList .btnElm {
    width: 100%;
    padding: 1em;
  }
}
.btnList .btnElm i {
  font-weight: 700;
}
@media (min-width: 1100px) {
  .btnList .btnElm i {
    margin-bottom: 1em;
  }
}
.btnList:not(:has(.btnElm:nth-of-type(2))) .btnElm {
  width: 100%;
}

.pageBg {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  overflow: hidden;
  width: var(--width);
  height: var(--width);
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: var(--tr04);
  transition-delay: 0.4s;
  opacity: 0;
}
.pageBg svg {
  width: 100%;
  aspect-ratio: 1/1;
  transform: var(--transform);
  filter: drop-shadow(0 0 2em rgba(0, 0, 0, 0.4));
  will-change: filter;
}
.pageBg svg path, .pageBg svg rect, .pageBg svg polygon {
  fill: currentColor;
}
@media (min-width: 1100px) {
  .pageBg {
    --width: 100%;
    --transform: rotate(-45deg) translate(25%, -25%);
  }
}
@media (max-width: 1100px) {
  .pageBg {
    --width: 200%;
    --transform: rotate(-45deg) translate(0%, -25%);
  }
}

.openClose {
  display: flex;
  flex-direction: var(--wrapDir);
}
@media (min-width: 1100px) {
  .openClose {
    --wrapDir: row;
  }
}
@media (max-width: 1100px) {
  .openClose {
    --wrapDir: column;
    width: 100%;
  }
}
.openClose dl {
  line-height: 1.25;
  display: flex;
  flex-direction: var(--elmDir);
}
@media (min-width: 1100px) {
  .openClose dl {
    flex: 1;
    --elmDir: column;
    --iDisp: block;
  }
}
@media (max-width: 1100px) {
  .openClose dl {
    width: 100%;
    --elmDir: row;
    --iDisp: inline;
  }
}
@media (min-width: 1100px) {
  .openClose dl:not(:last-of-type) {
    border-right: 1px solid;
  }
}
@media (max-width: 1100px) {
  .openClose dl:not(:last-of-type) {
    border-bottom: 1px solid;
  }
}
.openClose dl dt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 0;
}
@media (min-width: 1100px) {
  .openClose dl dt {
    border-bottom: 1px solid;
  }
}
@media (max-width: 1100px) {
  .openClose dl dt {
    flex: 1;
    border-right: 1px solid;
  }
}
.openClose dl dd {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 0;
  height: 100%;
}
@media (max-width: 1100px) {
  .openClose dl dd {
    flex: 1;
  }
}
.openClose dl dd p {
  text-align: right;
}
@media (max-width: 1100px) {
  .openClose dl dd p br {
    display: none;
  }
}

.globalFooter {
  position: relative;
  z-index: 1;
  min-height: var(--fitH);
  display: flex;
  flex-direction: column;
}
.globalFooter .inner {
  --logoSize: 8vw;
  --padTop: calc(var(--fitH) * .25);
  --padBottom: calc(var(--fitH) * .25);
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--pad);
  flex: 1;
}
@media (max-width: 1100px) {
  .globalFooter .inner {
    --logoSize: 15vw;
  }
}
.globalFooter .inner .coInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.globalFooter .inner .coInfo .gLogo {
  --logoW: var(--logoSize);
}
.globalFooter .inner .coInfo .social {
  width: 100%;
  padding: calc(var(--pad) * 2) 0 0;
}
.globalFooter .inner .coInfo .social ul {
  gap: 1em;
  justify-content: center;
}
.globalFooter .inner .coInfo .social ul li a {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.globalFooter .inner .coInfo .social ul li a svg {
  width: 1em;
  aspect-ratio: 1;
}
.globalFooter .inner .coInfo .social ul li a svg path {
  fill: currentColor;
}
.globalFooter .inner .coInfo .social ul li a p {
  font-size: 1em;
}
.globalFooter .copyRight {
  width: 100%;
  padding: 0 0 var(--floatingPos);
  text-align: center;
}
@media (max-width: 1536px) {
  .globalFooter .copyRight {
    padding-top: 0;
  }
}
.globalFooter .copyRight small {
  font-size: 0.7em;
}

.closeBtn {
  --barWidth: 1.25em;
  width: var(--btnMenu);
  height: var(--btnMenu);
  cursor: pointer;
  display: block;
  position: absolute;
  top: var(--margin);
  right: var(--margin);
  padding: 0;
  border: 0;
  outline: 0;
  align-items: center;
  justify-content: center;
  background-color: var(--typo);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
  background-attachment: fixed;
  border-radius: 50%;
  transition: all 0.4s ease;
  overflow: hidden;
}
.closeBtn span {
  width: 100%;
  height: 100%;
  background: var(--theme);
  display: block;
  transition: all 0.4s ease;
  position: relative;
}
.closeBtn span:before, .closeBtn span:after {
  content: "";
  display: block;
  width: 2px;
  height: 50%;
  transition: all 0.1s ease-in-out;
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  margin: auto;
  z-index: 2;
  background: var(--typo);
}
.closeBtn span:before {
  transform: rotate(45deg);
}
.closeBtn span:after {
  transform: rotate(-45deg);
}
.closeBtn:hover {
  border-radius: 0;
}

.modalPane,
.overlay {
  transition: visibility 0s, opacity 0.2s, transform 0s;
  transition-delay: 0.8s, 0.4s, 0.9s;
}
.modalPane .scrollable,
.overlay .scrollable {
  clip-path: inset(0 0 round 0);
  transition: clip-path 0.6s cubic-bezier(0.6, 0, 0, 1);
  transition-delay: 0s;
}
.modalPane .scrollable .scrollInner,
.overlay .scrollable .scrollInner {
  transition: opacity 0.4s cubic-bezier(0.6, 0, 0, 1);
  transition-delay: 0s;
  opacity: 0;
}
.modalPane.visible,
.overlay.visible {
  visibility: visible;
  transition-delay: 0s, 0.1s, 0s;
  opacity: 1;
  transform: translate(0, 0);
}
.modalPane.visible .scrollable,
.overlay.visible .scrollable {
  transition-delay: 0.2s, 0s;
  clip-path: var(--modalClip);
}
.modalPane.visible .scrollable .scrollInner,
.overlay.visible .scrollable .scrollInner {
  transition: opacity 0.4s cubic-bezier(0.6, 0, 0, 1);
  transition-delay: 0.6s;
  opacity: 1;
}

.modalPane {
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 106;
  opacity: 0;
  transform: translate(100%, 0);
}
.modalPane:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background-image: var(--typo);
  opacity: 0.95;
}
.modalPane .scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  padding: 1em;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: var(--typo);
  position: relative;
  z-index: 1;
}
.modalPane .scrollable .scrollInner {
  justify-content: center;
  align-items: center;
}
@media (min-width: 1100px) {
  .modalPane .scrollable .scrollInner {
    width: calc(100% + var(--scrollBar));
    margin-right: calc(0% - var(--scrollBar));
    padding: calc(var(--navH) * 1) 0;
  }
}
@media (max-width: 1100px) {
  .modalPane .scrollable .scrollInner .inner {
    padding: calc(var(--pad) * 2) 0;
  }
}
.modalPane .closeBtn {
  position: absolute;
  top: calc(0% + var(--pad) * 2);
  right: calc(0% + var(--pad) * 2);
  z-index: 102;
}
@media (max-width: 1100px) {
  .modalPane .closeBtn {
    top: 1em;
    right: 1em;
  }
}

.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 110;
  opacity: 0;
  transform: translate(100%, 0);
  background-color: var(--theme);
  background-image: url(../images/noise.png);
  background-repeat: repeat;
  background-attachment: fixed;
}
.overlay .scrollable {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: var(--typo);
  position: relative;
  z-index: 1;
  display: flex;
}
.overlay figure {
  z-index: 1;
}
.overlay .closeBtn {
  position: absolute;
  top: calc(0% + var(--pad) * 2);
  right: calc(0% + var(--pad) * 2);
  z-index: 102;
}
@media (max-width: 1100px) {
  .overlay .closeBtn {
    top: 1em;
    right: 1em;
  }
}
.overlay #modalImg {
  position: relative;
  top: inherit;
  left: inherit;
  max-width: 90vw;
  max-height: 90vh;
}

html.modaled .layer {
  opacity: 1;
  visibility: visible;
}

.modalImg img {
  cursor: pointer;
  transition: transform 0.4s ease-in-out 0s, filter 0.6s ease-in-out 0.4s !important;
}
.modalImg:hover img {
  transform: scale(1.05);
}

.prevNext {
  --arrow: calc(var(--btnMenu) * .25);
  --borderWid: 2px;
  position: absolute;
  top: 0;
  border: none;
  width: 33%;
  height: 100%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.4s ease;
  z-index: 1000;
  text-indent: -999em;
  display: flex;
  align-items: center;
}
@media (min-width: 1100px) {
  .prevNext {
    --arrowX: calc(0% - var(--arrow) * 2);
  }
}
@media (max-width: 1100px) {
  .prevNext {
    --arrowX: calc(0% - var(--arrow) * .75);
  }
}
.prevNext:before {
  content: "";
  display: block;
  width: var(--arrow);
  height: var(--arrow);
  border-top: var(--borderWid) solid;
  border-right: var(--borderWid) solid;
  flex-shrink: 0;
  transform-origin: center;
}
.prevNext.nextLink {
  right: var(--arrowX);
  justify-content: flex-end;
}
.prevNext.nextLink:before {
  transform: rotate(45deg);
}
.prevNext.prevLink {
  left: var(--arrowX);
  justify-content: flex-start;
}
.prevNext.prevLink:before {
  transform: rotate(-135deg);
}
.prevNext:hover {
  color: var(--typo);
  background: var(--wh01);
}

/*# sourceMappingURL=layout.css.map */