@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@400;500&family=Cinzel:wght@400&family=Roboto:wght@400;500&display=swap");
@import url("lib/ress.min.css");
@import url("lib/remodal.css");
@import url("lib/remodal-default-theme.css");
:root {
  /* neutral */
  --white: #ffffff;
  --black: #000000;
  --black-rgb: 0, 0, 0;
  --gray: #5a5a5a; /* ナビオーバーレイ VOICE セクション背景 */
  --gray-dark: #363636; /* FEATURE / STEP UP FLOW セクション背景 */
  --gray-light: #e5e5e5; /* 地図エリア背景 */
  /* accent */
  --red: #eb1818; /* Google MAP ボタン */
  /* font */
  /* main sans-serif Japanese (Noto Sans JP) */
  --font-1: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  /* serif Japanese (Noto Serif JP) — 見出し・電話番号・本文 */
  --font-2: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "ヒラギノ明朝 ProN", serif;
  /* decorative Latin (Cinzel) — セクション英字見出し・コピーライト */
  --font-3: "Cinzel", serif;
  /* Latin sans-serif (Roboto) */
  --font-4: "Roboto", sans-serif;
  /* transition */
  --hover-transition: .2s ease;
}

@media screen and (max-width: 767px) {
  .p-home .l-main {
    padding-top: min(59px, 5.9rem);
  }
}

.p-loading {
  align-items: center;
  background: black;
  display: flex;
  justify-content: center;
  height: 100dvh;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100dvw;
  z-index: 9999;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.p-loading img {
  animation: fadeIn 1s ease forwards 0.5s;
  animation-play-state: paused;
  opacity: 0;
  width: 14.8rem;
}
.p-loading.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.p-loading.is-visible img {
  animation-play-state: running;
}
.p-loading.is-loaded {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

body:has(.p-loading.is-visible) {
  overflow: hidden;
}

.p-hero {
  min-height: max(500px, 50rem);
  height: 100dvh;
  width: calc(100dvw - min(69px, 6.9rem));
}
@media screen and (max-width: 767px) {
  .p-hero {
    height: calc(100dvh - min(59px, 5.9rem));
    min-height: min(640px - min(59px, 5.9rem), 128vw - min(59px, 5.9rem));
    overflow: hidden;
    width: 100dvw;
  }
}
.p-hero-video {
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-hero-video {
    height: 42.7142857143vh;
  }
}
.p-hero-video video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.p-hero-body {
  align-items: center;
  display: flex;
  height: 100%;
  padding-left: 18.1rem;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 920px) {
  .p-hero-body {
    padding-left: 12rem;
  }
}
@media screen and (max-width: 767px) {
  .p-hero-body {
    padding-left: 2.4rem;
  }
}
.p-hero-body-inner {
  align-items: end;
  display: flex;
  justify-content: space-between;
  padding-top: 17.578125vh;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-hero-body-inner {
    align-items: start;
    padding-top: 0;
    margin-top: 10.8rem;
  }
}
.p-hero-body .ttl {
  align-items: end;
  display: flex;
}
.p-hero-body .ttl-ja {
  font-size: clamp(31.68px, 3.6rem, 36px);
  font-weight: 500;
  letter-spacing: clamp(12.32px, 1.4rem, 14px);
  line-height: 1.7;
  opacity: 0;
  transition: 1s ease 0.1s;
  transform: translateY(5rem);
  text-indent: -1.43em;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .p-hero-body .ttl-ja {
    font-size: clamp(29.6px, 2.96rem, 36px);
    letter-spacing: min(12px, 1.2rem);
    text-indent: -1.6em;
  }
}
.p-hero-body .ttl-en {
  font-size: clamp(15.84px, 1.8rem, 18px);
  letter-spacing: clamp(1.32px, 0.15rem, 1.5px);
  line-height: 172.222%;
  padding: 0;
  top: calc(clamp(40.48px, 4.6rem, 46px) * -1);
  left: calc(clamp(30.8px, 3.5rem, 35px) * -1);
  opacity: 0;
  transition: 1s ease 0.2s;
  transform: translateY(5rem);
}
@media screen and (max-width: 767px) {
  .p-hero-body .ttl-en {
    font-size: min(13px, 1.3rem);
    letter-spacing: 0.078rem;
    top: max(-97px, -9.7rem);
    left: max(-45px, -4.5rem);
    white-space: nowrap;
  }
}
.p-hero-body .ttl-en:after {
  background: white;
  content: " ";
  display: block;
  height: 1px;
  margin: clamp(48.4px, 5.5rem, 55px) 0 0;
  width: 4.1rem;
}
@media screen and (max-width: 767px) {
  .p-hero-body .ttl-en:after {
    margin: min(35px, 3.5rem) 0 0;
    width: 3.216rem;
  }
}
.p-hero .playbtn {
  bottom: clamp(72.16px, 8.2rem, 82px);
  position: absolute;
  right: clamp(46.64px, 5.3rem, 53px);
  opacity: 0;
  transform: translateY(3rem);
  transition: 0.6s ease 0.4s;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-hero .playbtn {
    bottom: min(74px, 7.4rem);
    right: min(29px, 2.9rem);
  }
}
.p-hero .playbtn a {
  align-items: center;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  width: clamp(101.2px, 11.5rem, 115px);
}
.p-hero .playbtn a img {
  left: 0;
  position: absolute;
  top: 0;
}
@keyframes rotatebtn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.p-hero .playbtn a img {
  animation: rotatebtn 12s linear infinite;
}
.p-hero .playbtn a span {
  aspect-ratio: 1/1;
  background: white;
  border-radius: 50%;
  height: auto;
  width: 38.0952381%;
}
.p-hero .playbtn a span:before {
  background-color: #BA103F;
  border-radius: 50%;
  content: " ";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.2s ease;
  transform: scale(0);
  width: 100%;
}
.p-hero .playbtn a span:after {
  background-color: var(--black);
  content: " ";
  display: inline-block;
  height: auto;
  line-height: 0;
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  aspect-ratio: 10/12;
  background: #BA103F;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" viewBox="0 0 10 12" fill="none"><path d="M9.93042 5.95837L9.53674e-05 11.9167V0L9.93042 5.95837Z" fill="black"/></svg>');
  position: absolute;
  left: 41%;
  top: 34%;
  transition: 0.2s ease;
  width: 27.50206782%;
}
.p-hero .playbtn a:hover {
  opacity: 1;
}
.p-hero .playbtn a:hover span:before {
  transform: scale(1);
}
.p-hero .playbtn a:hover span:after {
  background: white;
}
.p-hero.is-loaded .ttl-ja {
  opacity: 1;
  transform: translateY(0);
}
.p-hero.is-loaded .ttl-en {
  opacity: 1;
  transform: translateY(0);
}
.p-hero.is-loaded .playbtn {
  opacity: 1;
  transform: translateY(0);
}

.p-philosophy {
  padding: 13.7rem 0 14rem;
}
@media screen and (max-width: 767px) {
  .p-philosophy {
    padding: 4.2rem 0 4.5rem;
  }
}
.p-philosophy .u-flex {
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-philosophy .u-flex {
    flex-direction: column;
  }
}
.p-philosophy-logo {
  margin: -3rem 6.7rem 0 0.5rem;
  width: 20.4rem;
}
@media screen and (max-width: 767px) {
  .p-philosophy-logo {
    margin: 0 0 4.3rem;
    width: 11.9rem;
  }
}
.p-philosophy-body .ttl {
  font-family: var(--font-3);
  font-size: 7.6rem;
  font-weight: 400;
  letter-spacing: 0.608rem;
  line-height: 123.684%;
}
@media screen and (max-width: 767px) {
  .p-philosophy-body .ttl {
    font-size: 4.1rem;
    letter-spacing: 0.328rem;
    line-height: 112.195%;
    white-space: nowrap;
  }
}
.p-philosophy-body .txt {
  letter-spacing: 0.192rem;
  line-height: 231.25%;
  padding: 2.6rem 0 0;
}
@media screen and (max-width: 767px) {
  .p-philosophy-body .txt {
    font-size: 1.6rem;
    line-height: 225%;
    padding: 3.6rem 0 0;
  }
}

.p-section-link a {
  color: var(--white);
  display: block;
  height: 63.8rem;
  isolation: isolate;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .p-section-link a {
    height: 43.4rem;
  }
}
.p-section-link a:hover {
  opacity: 1;
}
.p-section-link-bg {
  inset: 0;
  position: absolute;
  z-index: 0;
}
.p-section-link-bg img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.p-section-link-bg:after {
  background: black;
  content: " ";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.8s ease 0.2s;
  transform-origin: top right;
  width: 100%;
  z-index: 2;
}
.p-section-link-bg.is-inview:after {
  transform: scaleX(0);
}
.p-section-link-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  padding: 0 0 6.2rem 12.5rem;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .p-section-link-content {
    padding: 0 2.4rem 5.2rem;
  }
}
.p-section-link-content .en {
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.48, 0.325, 0.03, 1);
  font-family: var(--font-3);
  font-size: 1.8rem;
  letter-spacing: 0.18rem;
  line-height: 1.5555555556;
  text-transform: uppercase;
  transition-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  .p-section-link-content .en {
    font-size: 1.1rem;
    letter-spacing: 0.11rem;
  }
}
.p-section-link-content .ttl {
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.48, 0.325, 0.03, 1);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.36rem;
  line-height: 1.5333333333;
  margin-top: 0.1rem;
  transition-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  .p-section-link-content .ttl {
    font-size: 2.2rem;
    letter-spacing: 0.264rem;
    line-height: 136.364%;
  }
}
.p-section-link-foot {
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.48, 0.325, 0.03, 1);
  align-items: baseline;
  display: flex;
  margin-top: 3rem;
  position: relative;
  transition-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  .p-section-link-foot {
    margin-top: 1.8rem;
    width: 22.6rem;
  }
}
.p-section-link-foot .ja {
  font-family: var(--font-1);
  font-size: 1.8rem;
  letter-spacing: 0.072rem;
}
@media screen and (max-width: 767px) {
  .p-section-link-foot .ja {
    font-size: 1.4rem;
    letter-spacing: 0.056rem;
  }
}
.p-section-link-foot .detail {
  color: var(--white);
  font-family: var(--font-4);
  font-size: 1.4rem;
  left: 24.9rem;
  letter-spacing: 0.1rem;
  position: absolute;
  text-transform: uppercase;
  top: 0.8rem;
}
@media screen and (max-width: 767px) {
  .p-section-link-foot .detail {
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: -0.2rem;
    left: unset;
    letter-spacing: 0;
    right: 0;
  }
}
.p-section-link-lines {
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.48, 0.325, 0.03, 1);
  height: 2px;
  margin-left: -12.5rem;
  margin-top: 1rem;
  position: relative;
  width: 42.4rem;
  transition-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  .p-section-link-lines {
    height: 1px;
    margin-top: 0.3rem;
    margin-left: -2.4rem;
    width: 25rem;
  }
}
.p-section-link-lines .main {
  background: white;
  display: block;
  height: 100%;
  width: 100%;
}
.p-section-link-lines .accent {
  background: #AF1A1A;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform-origin: top left;
  transition: transform 0.4s ease;
  width: 12.6rem;
}
@media screen and (max-width: 767px) {
  .p-section-link-lines .accent {
    transform: scaleX(0);
    width: 100%;
  }
}
a:hover .p-section-link-lines .accent {
  transform: scaleX(3.37);
}
@media screen and (max-width: 767px) {
  a:hover .p-section-link-lines .accent {
    transform: scaleX(1);
  }
}
.p-section-link--service::before {
  background: linear-gradient(186.84deg, rgb(255, 250, 250) 50.68%, rgb(37, 44, 82) 84.5%);
  opacity: 0.55;
}
.p-section-link--service::after {
  background: linear-gradient(166.63deg, rgb(255, 250, 250) 17.54%, rgb(84, 79, 71) 59.83%, rgb(16, 11, 0) 82.47%);
  opacity: 0.55;
}
.p-section-link--corporate::before {
  background: linear-gradient(to top, rgb(255, 250, 250) 2.92%, rgb(0, 0, 0) 97.36%);
  opacity: 0.5;
}
.p-section-link--corporate::after {
  background: linear-gradient(190.92deg, rgb(255, 250, 250) 68.35%, rgb(84, 79, 71) 107.52%, rgb(16, 11, 0) 128.48%);
  opacity: 0.55;
}
.p-section-link--recruit::after {
  background: linear-gradient(to top, rgb(255, 255, 255) 2.62%, rgb(0, 0, 0) 77.72%);
  opacity: 0.59;
}

.p-contact {
  padding: 11.3rem 0 13rem;
}
@media screen and (max-width: 767px) {
  .p-contact {
    padding: 6.3rem 0 4rem;
  }
}
.p-contact > .u-flex {
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-contact > .u-flex {
    flex-direction: column;
  }
}
.p-contact-img {
  aspect-ratio: 1/1;
  margin-left: 9.5rem;
  width: 25.1rem;
}
@media screen and (max-width: 767px) {
  .p-contact-img {
    margin: 0 0 4rem;
    width: 12.1rem;
  }
}
.p-contact-body {
  padding: 0 0 0 11.6rem;
}
@media screen and (max-width: 767px) {
  .p-contact-body {
    padding: 0;
    width: 100%;
  }
}
.p-contact-body .ttl-en {
  display: block;
  font-family: var(--font-3);
  font-size: 7.6rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.6rem;
}
@media screen and (max-width: 767px) {
  .p-contact-body .ttl-en {
    font-size: 3.3rem;
    letter-spacing: 0.33rem;
  }
}
.p-contact-body .ttl-ja {
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  padding: 1.2rem 0 0 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-contact-body .ttl-ja {
    font-size: 1.4rem;
    padding: 0.7rem 0 0;
  }
}
.p-contact-body .subttl {
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: 0.26rem;
  padding: 2.2rem 0 2.4rem 0.6rem;
}
@media screen and (max-width: 767px) {
  .p-contact-body .subttl {
    font-size: 1.6rem;
    letter-spacing: 0.192rem;
    padding: 2rem 0 1.2rem;
  }
}
.p-contact-body > .u-flex {
  border-bottom: 1px solid #b2b2b2;
  border-top: 1px solid #b2b2b2;
  padding: 1.8rem 0 2.2rem 0.2rem;
}
@media screen and (max-width: 767px) {
  .p-contact-body > .u-flex {
    border-color: #777;
    flex-direction: column;
    padding: 1.2rem 0 2.2rem 0;
  }
}
.p-contact-body .tel {
  padding: 0 2rem 0 0;
}
@media screen and (max-width: 767px) {
  .p-contact-body .tel {
    text-align: center;
  }
}
.p-contact-body .tel-en {
  color: white;
  font-size: 2rem;
  letter-spacing: 0.25rem;
}
@media screen and (max-width: 767px) {
  .p-contact-body .tel-en {
    font-size: 1.48rem;
    letter-spacing: 0.178rem;
  }
}
.p-contact-body .tel-num {
  color: white;
  font-size: 3.4rem;
  letter-spacing: 0.45rem;
  margin-left: -0.5rem;
}
@media screen and (max-width: 767px) {
  .p-contact-body .tel-num {
    font-size: 2.44rem;
    letter-spacing: 0.292rem;
  }
}
.p-contact-body .c-mail-btn {
  margin: 0.5rem 0 0;
}
@media screen and (max-width: 767px) {
  .p-contact-body .c-mail-btn {
    margin: 1rem auto 0;
  }
}

.remodal {
  aspect-ratio: 16/9;
  background-color: transparent;
  height: auto;
  font-size: 0;
  max-width: unset;
  margin: 0;
  padding: 0;
  width: 95rem;
}
@media screen and (max-width: 767px) {
  .remodal {
    width: 100dvw;
  }
}
.remodal iframe {
  height: 100%;
  width: 100%;
}
.remodal-overlay {
  background: rgba(0, 0, 0, 0.7);
}
@media screen and (max-width: 767px) {
  .remodal-wrapper {
    padding: 10px 0;
  }
}
.remodal-close {
  position: absolute;
  left: unset;
  right: 0;
  top: -5rem;
}
@media screen and (max-width: 767px) {
  .remodal-close {
    right: 4rem;
  }
}
.remodal-close:before {
  background-color: var(--black);
  content: " ";
  display: inline-block;
  height: auto;
  line-height: 0;
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  aspect-ratio: 1/1;
  background: white;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none"><path d="M17.5 0C27.165 0 35 7.83502 35 17.5C35 27.165 27.165 35 17.5 35C7.83502 35 0 27.165 0 17.5C0 7.83502 7.83502 0 17.5 0ZM17.5 1C8.3873 1 1 8.3873 1 17.5C1 26.6127 8.3873 34 17.5 34C26.6127 34 34 26.6127 34 17.5C34 8.3873 26.6127 1 17.5 1ZM25.958 10.7334L19.1914 17.5L25.958 24.2666L24.2666 25.958L17.5 19.1914L10.7334 25.958L9.04102 24.2666L15.8086 17.5L9.04102 10.7334L10.7334 9.04199L17.5 15.8086L24.2666 9.04199L25.958 10.7334Z" fill="black"/></svg>');
  content: " ";
  width: 3.5rem;
}

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