@charset "UTF-8";
/* ==========================================================================
	root
========================================================================== */
:root {
  --base-pc-width:1500;
  --easeInQuad:cubic-bezier(.55, .085, .68, .53);
  --easeOutQuad:cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeOutQuint:cubic-bezier(.25, .46, .45, .94);
  --easeOutSine:cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutQuad:cubic-bezier(0.45, 0, 0.55, 1);
  --easeInOutCubic:cubic-bezier(0.65, 0, 0.35, 1);
  --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86 );
  --easePopUp:cubic-bezier(0.17, 0.88, 0.30, 1.28);
  --easeInCirc:cubic-bezier(0.55, 0, 1, 0.45);
  --theme-color:#924249;
  --base-text-color:#222;
  --base-bg-color:#F3DFCC;
  --base-bg-color02:rgba(255,255,255,.1);
  --base-bg-color03:rgba(243, 223, 204, .1);
  --hanten:scale(-1, -1);
  --hantenX:scale(-1, 1);
  --hantenY:scaleY(-1); }

@media screen and (max-width: 800px) {
  :root {
    --fz9:clamp(9px,calc((9/390)*100vw),11px);
    --fz10:clamp(10px,calc((10/390)*100vw),12px);
    --fz11:clamp(11px,calc((10/390)*100vw),13px);
    --fz12:clamp(12px,calc((12/390)*100vw),15px);
    --fz13:clamp(13px,calc((13/390)*100vw),16px);
    --fz14:clamp(14px,calc((14/390)*100vw),17px);
    --fz15:clamp(15px,calc((15/390)*100vw),19px);
    --fz16:clamp(16px,calc((16/390)*100vw),18px);
    --fz17:clamp(17px,calc((17/390)*100vw),19px);
    --fz18:clamp(18px,calc((18/390)*100vw),20px);
    --fz19:clamp(19px,calc((19/390)*100vw),21px);
    --fz20:clamp(20px,calc((20/390)*100vw),22px);
    --fz21:clamp(21px,calc((21/390)*100vw),23px);
    --fz22:clamp(22px,calc((22/390)*100vw),24px);
    --fz24:clamp(24px,calc((24/390)*100vw),26px);
    --fz25:clamp(25px,calc((25/390)*100vw),27px);
    --fz26:clamp(26px,calc((26/390)*100vw),28px);
    --fz27:clamp(27px,calc((27/390)*100vw),29px);
    --fz28:clamp(28px,calc((28/390)*100vw),30px);
    --fz32:clamp(32px,calc((23/390)*100vw),35px);
    --fz35:clamp(35px,calc((25/390)*100vw),39px);
    --fz36:clamp(36px,calc((36/390)*100vw),40px);
    --fz38:clamp(38px,calc((38/390)*100vw),42px);
    --fz40:clamp(40px,calc((40/390)*100vw),44px);
    --fz45:clamp(45px,calc((45/390)*100vw),49px);
    --fz56:clamp(56px,calc((56/390)*100vw),60px); } }
/* ==========================================================================
	html
========================================================================== */
html.wf-active {
  visibility: visible; }

html {
  font-family: "Zen Kaku Gothic New", "Yu Gothic Medium", "Yu Gothic", "メイリオ", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 62.5%;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background-size: 8px 8px;
  color: var(--base-text-color);
  background: var(--base-bg-color);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: geometricPrecision;
  text-decoration-thickness: 1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
  -webkit-overflow-scrolling: touch;
  letter-spacing: 0.04em;
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
  -ms-scroll-chaining: none;
  overscroll-behavior: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 500; }

body.nav-open {
  overflow: hidden; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%; }

a {
  color: var(--base-text-color);
  text-decoration: none;
  opacity: 1;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

a:hover,
.trns:hover {
  opacity: .7;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

input,
select,
textarea,
button,
*:before,
*:after {
  -webkit-transition: opacity 0.4s all var(--easeOutQuad);
  -webkit-transition: opacity 0.4s var(--easeOutQuad);
  transition: opacity 0.4s var(--easeOutQuad);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

a:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none; }

img {
  width: 100%;
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic;
  interpolation-mode: bicubic;
  -webkit-backface-visibility: hidden !Important; }

.pc_off {
  display: none !important; }

.sp_off {
  display: block !Important; }

img.preload {
  display: none; }

::-moz-selection {
  background: var(--theme-color); }

::selection {
  background: var(--theme-color); }

/* Safari */
::-moz-selection {
  background: var(--theme-color); }

.all_wrap {
  position: relative;
  overflow: hidden;
  z-index: 100; }

@media (min-width: 851px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }
.en {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em; }

.cls-1 {
  fill: var(--color) !important;
  -webkit-transition: all 0.3s var(--easeInQuad);
  transition: all 0.3s var(--easeInQuad); }

svg {
  width: 100%;
  height: auto; }

.loop-slide {
  background: var(--path) repeat-x 0 0;
  background-size: var(--size);
  width: 100%;
  height: var(--H);
  overflow: hidden;
  -webkit-animation: loop var(--s) linear infinite;
          animation: loop var(--s) linear infinite; }

@-webkit-keyframes loop {
  0% {
    background-position: 0 0; }
  100% {
    background-position: var(--W) 0; } }

@keyframes loop {
  0% {
    background-position: 0 0; }
  100% {
    background-position: var(--W) 0; } }
@media screen and (max-width: 800px) {
  .sp_off {
    display: none !Important; } }
/* ==========================================================================
	ヘッダー
========================================================================== */
.head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  z-index: 100;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

@media screen and (max-width: 1150px) {
  .head {
    width: 50.5617977528%;
    margin: 0; } }
@media screen and (max-width: 800px) {
  .head {
    width: 100%;
    max-width: 800px; } }
/* ==========================================================================
	背景動画
========================================================================== */
.video-bg_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; }
  .video-bg_wrap .video-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-filter: blur(1px);
            filter: blur(1px);
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    opacity: 0.3;
    z-index: 10; }
  .video-bg_wrap:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(25deg, #822b33, #e89a62);
    overflow: hidden;
    z-index: 5; }

/* ==========================================================================
	aside_area
========================================================================== */
.aside_area {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: auto;
  z-index: 1; }
  .aside_area .l-side_area {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: calc((100% - 540px)/2);
    max-width: 476px; }
    .aside_area .l-side_area h2 {
      width: 34.4696969697%; }
  .aside_area .r-side_area {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: calc((100% - 540px)/2);
    max-width: 528px;
    --baseW:640;
    --baseH:298; }
    .aside_area .r-side_area .inr {
      position: relative;
      width: 60.6060606061%;
      aspect-ratio: 640/298; }
    .aside_area .r-side_area a {
      display: block;
      position: absolute;
      left: 0;
      width: calc((var(--W)/var(--baseW))*100%);
      left: calc((var(--L)/var(--baseW))*100%);
      top: calc((var(--T)/var(--baseH))*100%); }
    .aside_area .r-side_area .nav01 {
      --W:486;
      --H:48;
      left: 0;
      top: 0; }
    .aside_area .r-side_area .nav02 {
      --W:266;
      --H:48;
      left: 0;
      --T: 107; }
    .aside_area .r-side_area .nav03 {
      --W:310;
      left: 0;
      top: auto;
      bottom: 0; }
    .aside_area .r-side_area .nav04 {
      --W:310;
      left: auto;
      right: 0;
      top: auto;
      bottom: 0; }

@media screen and (max-width: 1150px) {
  .aside_area .l-side_area {
    display: none;
    position: absolute; }
  .aside_area .r-side_area {
    width: 49.4382022472%;
    left: 50.5617977528%; } }
@media screen and (max-width: 800px) {
  .aside_area {
    display: none; } }
/* ==========================================================================
	main
========================================================================== */
.main {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  z-index: 100; }
  .main .fix-bnr {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 30px;
    margin: auto;
    width: 90%;
    max-width: 486px;
    z-index: 150; }
    .main .fix-bnr .close {
      display: block;
      position: absolute;
      width: 6.5843621399%;
      right: -6px;
      top: -6px;
      z-index: 10; }
    .main .fix-bnr:hover {
      opacirty: .9; }
  .main .img {
    width: 100%; }
  .main .area {
    position: relative;
    margin: 0 auto; }
  .main .mv {
    position: relative;
    z-index: 50; }
    .main .mv a:not([class]) {
      display: block;
      position: absolute;
      width: calc((274/380)*100%);
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 50; }
  .main .-concept {
    --path:url(../img/top/concept-slide.webp);
    --size:1504px 400px;
    --H:400px;
    --W:1506px;
    --s:30s; }
  .main .feature {
    background: var(--base-bg-color02); }
    .main .feature a {
      display: block;
      width: 90%;
      margin-inline: auto; }
      .main .feature a + a {
        margin-top: 20px; }
  .main .location {
    padding-bottom: 160px;
    background: var(--base-bg-color03); }
    .main .location a {
      display: block;
      width: 90%;
      margin-inline: auto; }
      .main .location a + a {
        margin-top: 40px; }
  .main .access {
    position: relative;
    --baseW:1080;
    --baseH:1684; }
    .main .access .map_area {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      --W:486;
      --T:512;
      width: calc((var(--W)/var(--baseW))*100%);
      top: calc((var(--T)/var(--baseH))*100%);
      width: 90%;
      aspect-ratio: 486/335;
      border-radius: 50px;
      overflow: hidden; }
      .main .access .map_area iframe {
        display: block;
        width: 100%;
        height: 200%;
        position: absolute;
        top: -50%;
        left: 0; }
  .main .technogym {
    position: relative;
    --baseW:1080;
    --baseH:3048;
    background: var(--base-bg-color03); }
    .main .technogym .btn {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      --W:756;
      --T:2616;
      width: calc((var(--W)/var(--baseW))*100%);
      top: calc((var(--T)/var(--baseH))*100%);
      width: 70%; }
  .main .about-location {
    position: relative;
    --baseW:1080;
    --baseH:1431;
    background: var(--base-bg-color03); }
    .main .about-location .area {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      --W:972;
      --T:620;
      width: calc((var(--W)/var(--baseW))*100%);
      top: calc((var(--T)/var(--baseH))*100%);
      aspect-ratio: 972/571; }
    .main .about-location a {
      display: block;
      width: 47.9423868313%;
      position: absolute;
      top: 0;
      left: 0; }
      .main .about-location a + a {
        left: auto;
        right: 0; }

@media screen and (max-width: 1150px) {
  .main {
    width: 50.5617977528%;
    margin: 0; } }
@media screen and (max-width: 800px) {
  .main {
    width: 100%;
    max-width: 800px; } }
.footer {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  z-index: 50;
  padding-top: 160px;
  padding-bottom: 280px;
  background: var(--theme-color); }
  .footer:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(75%, #924249), to(rgba(142, 53, 61, 0)));
    background: linear-gradient(0deg, #924249 75%, rgba(142, 53, 61, 0) 100%);
    z-index: 1; }
  .footer .logo {
    position: relative;
    width: 101px;
    margin: 0 auto 80px;
    z-index: 10; }
  .footer .area {
    position: relative;
    width: 90%;
    max-width: 378px;
    padding-bottom: 36px;
    margin: 0 auto 100px;
    z-index: 10; }
  .footer a {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  .footer .link01 {
    width: 218px;
    margin-bottom: 30px; }
  .footer .link02 {
    width: 108px;
    margin-bottom: 30px; }
  .footer .link03 {
    width: 132px;
    margin-bottom: 40px; }
  .footer .btn_link {
    position: absolute;
    bottom: 0;
    width: 48.6772486772%; }
  .footer .btn_link01 {
    left: 0; }
  .footer .btn_link02 {
    right: 0; }
  .footer .copy {
    position: relative;
    width: 121px;
    margin-inline: auto;
    z-index: 10; }

@media screen and (max-width: 1150px) {
  .footer {
    width: 50.5617977528%;
    margin: 0; } }
@media screen and (max-width: 800px) {
  .footer {
    width: 100%;
    max-width: 800px; } }

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