@charset "UTF-8";

:root {
  --foreground: #d7b68b;
  --background: #ab0d32;
  --black: #000;
}

html {
  position: relative;
  overflow-x: hidden;
  font-size: 10px;
  line-height: 1.7;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  color: var(--foreground);
  letter-spacing: .1em;
  background: var(--black);
}

main {
  background: var(--background);
}

section {
  border-bottom: 5px solid var(--foreground);
}

h1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

h1::before, h1::after {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: var(--foreground);
}

h1::after {
  top: 13px;
}

h1 span {
  z-index: 1;
  display: block;
  padding: 0 14px;
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
  letter-spacing: .15em;
  background: var(--background);
}

h1 span::after {
  font-size: 1.1rem;
  letter-spacing: .1em;
  white-space: pre;
}

* + p {
  margin-top: 2em;
}

a {
  color: var(--foreground);
  text-decoration: none;
}

.dl {
  display: none;
}

.content {
  margin: 60px 25px;
}

header section {
  background: var(--black);
}

header .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 0;
}

.header-logo-wrap h1 {
  margin-bottom: 0;
}

.header-logo-wrap h1::before, .header-logo-wrap h1::after {
  content: none;
}

.header-logo {
  width: 94px;
  height: auto;
}

.header-menu-inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99990;
  width: 100vw;
  height: 100vh;
  background: var(--black);
  opacity: 0;
  transition: opacity .5s, transform .001s .5s;
  transform: translateX(100vw);
}

.header-menu-scroll {
  height: 100%;
  text-align: center;
}

.header-menu-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  height: 100%;
  padding-top: 100px;
}

.header-menu-list a {
  display: inline-block;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--foreground);
}

.header-menu-list a::after {
  font-size: 1.2rem;
  white-space: pre;
}

.header-menu-list a[href="#top"] {
  /* display: none; */
  margin-left: -3px;
}

.header-menu-list a[href="#top"]::after {
  margin-left: -3px;
  content: "\Aトップ";
}

.header-menu-list a[href="#system"]::after {
  content: "\Aシステム";
}

.header-menu-list a[href="#access"]::after {
  content: "\Aアクセス";
}

.menu-trigger {
  position: relative;
  z-index: 99999;
  width: 15px;
  height: 11px;
}

.menu-trigger-bar {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--foreground);
  transition: all .3s;
}

.menu-trigger-bar:nth-of-type(1) {
  top: 0;
}

.menu-trigger-bar:nth-of-type(2) {
  top: 5px;
}

.menu-trigger-bar:nth-of-type(3) {
  top: 10px;
}

.menu-active body {
  overflow: hidden;
}

.menu-active .header-menu-inner {
  opacity: 1;
  transition: transform .001s, opacity .5s .001s;
  transform: translateX(0);
}

.menu-active .menu-trigger-bar:nth-of-type(1) {
  transform: translate(-1.2px, -.4px) rotate(-45deg);
  transform-origin: center right;
}

.menu-active .menu-trigger-bar:nth-of-type(2) {
  opacity: 0;
}

.menu-active .menu-trigger-bar:nth-of-type(3) {
  transform: translate(-1.2px, .4px) rotate(45deg);
  transform-origin: center right;
}

.section-kv {
  position: relative;
}

.kv-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: auto;
  transform: translate(-50%, -50%);
}

.kv-wrap {
  position: relative;
  width: 100%;
  height: 285px;
}

.kv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  animation: slider 16s linear infinite;
}

.kv01 {
  background-image: url("./kv01.jpg");
  animation-name: slider-first;
  animation-fill-mode: forwards;
}

.kv02 {
  background-image: url("./kv02.jpg");
  animation-delay: 3s;
}

.kv03 {
  background-image: url("./kv03.jpg");
  animation-delay: 6s;
}

.kv04 {
  background-image: url("./kv04.jpg");
  animation-delay: 9s;
}

.kv05 {
  background-image: url("./kv05.jpg");
  animation-name: slider-last;
  animation-delay: 12s;
}

.section-message {
  text-align: center;
}

.section-message h1 span::after {
  content: "\Aメッセージ";
}

.section-message .message-txt {
  font-size: 14px;
  background: url("./logo3.png") 50% 46% / 210px auto no-repeat;
}

.section-message rt {
  margin-bottom: -2px;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
}

.message-logo {
  width: 112px;
  height: auto;
}

.section-system h1 span::after {
  content: "\Aシステム";
}

.section-system .fullscreen {
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50%);
}

.section-system .fullscreen .system-img {
  width: 100%;
  height: auto;
}

.section-system h2 {
  position: relative;
  margin: 40px 0;
  text-align: center;
}

.section-system h2::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: var(--foreground);
}

.section-system .system-cap {
  position: relative;
  z-index: 1;
  width: 125px;
  height: auto;
}

.section-system .system-menu {
  margin: 30px 20px 0;
}

.section-system .system-menu-item {
  display: flex;
  align-items: center;
  margin-top: 1.2em;
  line-height: 1;
}

.section-system .system-menu-item::before {
  display: block;
  order: 1;
  width: 1px;
  height: 20px;
  content: "";
  background: var(--foreground);
}

.section-system .system-menu-item::after {
  display: block;
  order: 2;
  width: 1px;
  height: 20px;
  margin-right: 8px;
  margin-left: 3px;
  content: "";
  background: var(--foreground);
}

.section-system .system-menu-item-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  order: 3;
  width: 100%;
}

.section-system .system-menu-item-inner::before {
  position: absolute;
  top: calc(50% - 3px);
  left: 0;
  display: block;
  width: 100%;
  height: 6px;
  content: "";
  background: radial-gradient(circle farthest-side, var(--foreground), var(--foreground) 30%, transparent 30%, transparent);
  background-size: 6px;
}

.section-system .system-menu-name {
  z-index: 1;
  height: 20px;
  padding-right: 10px;
  font-size: 1.5rem;
  background: var(--background);
}

.section-system .system-menu-price {
  z-index: 1;
  height: 20px;
  padding-left: 10px;
  font-size: 1.8rem;
  background: var(--background);
}

.section-system .system-menu-price::first-letter {
  font-size: 1.3rem;
}

.section-system .system-menu:nth-of-type(2) .system-menu-item:last-child .system-menu-price, .section-system .system-menu:nth-of-type(4) .system-menu-item:last-child .system-menu-price {
  margin-right: -.6em;
}

.section-system .system-notice {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 2em;
  font-size: 1.2rem;
  letter-spacing: 0;
}

.section-system .system-notice::before {
  width: 18px;
  aspect-ratio: 24 / 94.38;
  content: "";
  background: url("./bracket-left.svg") center / cover no-repeat;
}

.section-system .system-notice::after {
  width: 18px;
  aspect-ratio: 24 / 94.38;
  content: "";
  background: url("./bracket-right.svg") center / cover no-repeat;
}

.section-system .system-tax {
  margin-top: 2em;
  font-size: 1.2rem;
  text-align: center;
}

.section-system .system-tax-p {
  display: inline-block;
  border-bottom: 1px solid var(--foreground);
}

.section-access h1 span::after {
  content: "\Aアクセス";
}

.section-access .access-gmap {
  width: 100%;
  aspect-ratio: 65 / 40;
}

.section-access .access-info {
  /* width: 300px; */
  /* padding: 0 15px; */
  margin: 2em auto 0;
  font-size: 1.3rem;
  letter-spacing: 0;
  background: url("./logo5.png") center / 100% auto no-repeat;
}

.section-access th {
  padding-right: .8em;
}

.section-access th::before {
  content: "◇";
}

.section-access a {
  text-decoration: underline;
}

.job-info {
  margin-top: 3em;
}

.job-info-img {
  width: 100%;
  height: auto;
}

footer {
  background: var(--black)
}

footer .content {
  padding-top: 35px;
  padding-bottom: 35px;
  margin-top: 0;
  margin-bottom: 0;
}

.footer-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 190px;
  margin: auto;
}

.footer-menu-img {
  width: 100%;
  height: auto;
}

.footer-copy {
  margin-top: 4em;
  font-size: 1.1rem;
  text-align: center;
}

.footer-copy .footer-logo {
  width: 180px;
  height: auto;
}

.footer-copy p {
  margin-top: .3em;
}

.gototop {
  display: none;
}

@media screen and (width >= 680px) {
  section {
    border-bottom-width: 30px;
  }

  h1 {
    margin-bottom: 70px;
  }

  h1::before, h1::after {
    top: 11px;
  }

  h1::after {
    top: 18px;
  }

  h1 span {
    padding: 0 25px;
    font-size: 2.2rem;
  }

  h1 span::after {
    font-size: 1.8rem;
  }

  .ds {
    display: none;
  }

  .dl {
    display: block;
  }

  .content {
    max-width: 1050px;
    padding: 0 25px;
    margin: 100px auto;
  }

  header section {
    height: 80px;
    border-bottom-width: 10px;
  }

  header .content {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .header-logo {
    width: 170px;
    transition: opacity .3s, transform .3s;
  }

  .header-logo-link:focus .header-logo, .header-logo-link:hover .header-logo, .header-logo-link:active .header-logo {
    opacity: .6;
    transform: scale(.9);
  }

  .menu-trigger {
    display: none;
  }

  .header-menu-inner {
    position: static;
    width: auto;
    height: auto;
    background: none;
    opacity: 1;
    transition: 0s;
    transform: translateX(0);
  }

  .header-menu-scroll {
    height: auto;
    text-align: center;
  }

  .header-menu-list {
    flex-direction: row;
    gap: 56px;
    height: auto;
    padding-top: 0;
  }

  .header-menu-list a {
    font-size: 1.9rem;
    transition: opacity .3s, transform .3s;
  }

  .header-menu-list a[href="#top"] {
    /* display: none; */
  }

  .header-menu-list a:focus, .header-menu-list a:hover, .header-menu-list a:active {
    opacity: .6;
    transform: scale(.9);
  }

  .kv-logo {
    width: 306px;
  }

  .kv-wrap {
    height: 750px;
  }

  .kv01 {
    background-image: url("./kv01-l.jpg");
  }

  .kv02 {
    background-image: url("./kv02-l.jpg");
  }

  .kv03 {
    background-image: url("./kv03-l.jpg");
  }

  .kv04 {
    background-image: url("./kv04-l.jpg");
  }

  .kv05 {
    background-image: url("./kv05-l.jpg");
  }

  .section-message .message-txt {
    font-size: 18px;
    background-position: 50% 53%;
    background-size: 306px auto;
  }

  .section-message rt {
    margin-bottom: -3px;
    font-size: 12px;
  }

  .message-logo {
    width: 149px;
  }

  .section-system .fullscreen {
    text-align: center;
  }

  .section-system .fullscreen .system-img {
    width: 680px;
  }

  .section-system h2 {
    margin: 70px 0;
  }

  .section-system .system-cap {
    width: 250px;
  }

  .section-system .system-menu {
    width: 430px;
    margin: 45px auto 0;
  }

  .section-system .system-menu-item {
    margin-top: 1.7em;
  }

  .section-system .system-menu-item::before {
    height: 30px;
  }

  .section-system .system-menu-item::after {
    height: 30px;
  }

  .section-system .system-menu-name {
    height: 27px;
    font-size: 2.2rem;
  }

  .section-system .system-menu-price {
    height: 27px;
    font-size: 2.7rem;
  }

  .section-system .system-menu-price::first-letter {
    margin-right: .1em;
    font-size: 1.7rem;
  }

  .section-system .system-notice {
    width: 480px;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.8rem;
  }

  .section-system .system-notice::before {
    width: 25px;
  }

  .section-system .system-notice::after {
    width: 25px;
  }

  .section-system .system-tax {
    font-size: 1.8rem;
  }

  .section-access .access-gmap {
    aspect-ratio: 100 / 51;
  }

  .section-access .access-info {
    width: 600px;
    padding: 0 45px;
    margin: 2em auto 0;
    font-size: 1.9rem;
    background-size: 82%;
  }

  .section-access th {
    padding-right: 1em;
  }

  .section-access th::before {
    content: "◇";
  }

  .section-access a[href^="tel:"] {
    display: inline-block;
    text-decoration: underline;
    transition: transform .3s, opacity .3s;
  }

  .section-access a[href^="tel:"]:focus, .section-access a[href^="tel:"]:hover, .section-access a[href^="tel:"]:active {
    opacity: .6;
    transform: scale(.95);
  }

  .job-info {
    width: 480px;
    margin: 5em auto 0;
  }

  .banner-link img {
    transition: transform .3s, opacity .3s;
  }

  .banner-link:focus img, .banner-link:hover img, .banner-link:active img {
    opacity: .6;
    transform: scale(.95);
  }

  footer .content {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .footer-menu {
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    width: auto;
  }

  .footer-menu-img {
    width: 210px;
  }

  .footer-copy {
    margin-top: 6em;
    font-size: 1.2rem;
  }

  .footer-copy .footer-logo {
    width: 190px;
  }

  .gototop {
    position: fixed;
    right: 90px;
    bottom: 90px;
    display: block;
    opacity: 0;
    transition: opacity .6s, transform .6s;
    transform: translate(0, 180px);
  }

  .gototop-circle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    width: 90px;
    height: 90px;
    padding-bottom: 20px;
    font-size: 1.1rem;
    letter-spacing: .05em;
    background: var(--background);
    border: 1px solid var(--foreground);
    border-radius: 45px;
    transition: opacity .3s, transform .3s;
  }

  .gototop-circle::before {
    position: absolute;
    top: 13px;
    left: calc(50% - .5px);
    display: block;
    width: 1px;
    height: 32px;
    content: "";
    background: var(--foreground);
  }

  .gototop-circle::after {
    position: absolute;
    top: 17.5px;
    left: calc(50% - 14.5px);
    display: block;
    width: 28px;
    height: 28px;
    content: "";
    border-top: 1px solid var(--foreground);
    border-left: 1px solid var(--foreground);
    transform: rotate(45deg);
  }

  a.gototop-circle:focus, a.gototop-circle:hover, a.gototop-circle:active {
    opacity: .6;
    transform: scale(.95);
  }

  .display-gototop .gototop {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes slider-first {
  0% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes slider {
  0% { opacity: 0; }
  2% { opacity: 1; }
  20.75% { opacity: 1; }
  22.75% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes slider-last {
  0% { opacity: 0; }
  2% { opacity: 1; }
  20.43% { opacity: 1; }
  22.43% { opacity: 0; }
  100% { opacity: 0; }
}