@charset "UTF-8";
.top-sec {
  overflow: hidden; }
  .top-sec .top-sec__in {
    max-width: 1330px;
    margin: 0 auto; }
    @media (max-width: 480px) {
      .top-sec .top-sec__in {
        padding: 0 5.1282051282vw; } }

#visual.hero {
  position: relative;
  width: 100%;
  height: 985px;
  overflow: hidden; }
  @media (max-width: 480px) {
    #visual.hero {
      height: 153.8461538462vw; } }
  #visual.hero .vegas-slide::before,
  #visual.hero .vegas-slide-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1; }

.hero-content {
  position: relative;
  padding: 562px 0 0 109px;
  z-index: 10; }
  @media (max-width: 480px) {
    .hero-content {
      padding: 89.7435897436vw 5.1282051282vw 0; } }

.hero-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 8.8rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 9.68px;
  color: #fff;
  margin-bottom: 36px; }
  @media (max-width: 480px) {
    .hero-title {
      font-size: 9.2307692308vw;
      letter-spacing: 0.5128205128vw;
      margin-bottom: 5.1282051282vw; } }
  .hero-title.animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out; }
  .hero-title.effect {
    opacity: 1;
    transform: translateY(0); }

.hero-subtitle {
  font-family: "Oswald", sans-serif;
  font-size: 4.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  line-height: 1; }
  @media (max-width: 480px) {
    .hero-subtitle {
      font-size: 6.1538461538vw; } }
  .hero-subtitle.animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s; }
  .hero-subtitle.effect {
    opacity: 1;
    transform: translateY(0); }

.top-promo {
  position: relative;
  padding: 231px 0 156px;
  text-align: center; }
  @media (max-width: 480px) {
    .top-promo {
      padding: 35.8974358974vw 0 15.3846153846vw; } }
  .top-promo .top-sec__in {
    padding: 0;
    max-width: 100%; }
    @media (max-width: 480px) {
      .top-promo .top-sec__in {
        padding: 0; } }

.promo-icons {
  position: absolute;
  top: 115px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 219px; }
  @media (max-width: 480px) {
    .promo-icons {
      top: 15.3846153846vw;
      gap: 25.641025641vw; } }
  .promo-icons img {
    height: 79px; }
    @media (max-width: 480px) {
      .promo-icons img {
        height: 12.8205128205vw; } }
  .promo-icons.animate {
    transform: translate(-50%, 30px); }
    .promo-icons.animate.effect {
      transform: translate(-50%, 0); }

.promo-title {
  font-family: 'Noto Serif JP', sans-serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.67;
  letter-spacing: 4.8px;
  color: #16224f;
  margin-bottom: 110px; }
  @media (max-width: 480px) {
    .promo-title {
      font-size: 7.1794871795vw;
      letter-spacing: 0.5128205128vw;
      margin-bottom: 6.1538461538vw;
      line-height: 1.5; } }

.promo-subtitle {
  font-family: "Oswald", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: #16224f;
  margin-bottom: 30px;
  line-height: 1; }
  @media (max-width: 480px) {
    .promo-subtitle {
      font-size: 5.1282051282vw;
      letter-spacing: 0.2564102564vw;
      margin-bottom: 7.6923076923vw; } }

.video-container {
  position: relative;
  background: url(../img/hero/video-thumbnail.png) no-repeat center center/cover;
  width: 100%;
  height: 420px;
  margin: 0 auto;
  cursor: pointer; }
  @media (max-width: 480px) {
    .video-container {
      max-width: 100%;
      height: 56.4102564103vw; } }

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  .video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease; }

.video-container:hover .video-overlay {
  background: rgba(0, 0, 0, 0.5); }

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 81px;
  height: 81px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10; }
  @media (max-width: 480px) {
    .video-play-btn {
      width: 17.9487179487vw;
      height: 17.9487179487vw; } }
  @media (min-width: 480px) {
    .video-play-btn:hover {
      transform: translate(-50%, -50%) scale(1.1);
      background: #fff; } }

.promo-bg-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  font-family: "Oswald", sans-serif;
  font-size: 18.1rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 14.48px;
  color: #dbdad9;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1; }
  @media (max-width: 480px) {
    .promo-bg-text {
      font-size: 17.9487179487vw;
      letter-spacing: 0.5128205128vw; } }
  .promo-bg-text span {
    display: inline-block;
    animation: scrollText 40s linear infinite; }
    .promo-bg-text span::after {
      content: '　WEEKEND-FREE MAINTENANCE　WEEKEND-FREE MAINTENANCE　WEEKEND-FREE MAINTENANCE　WEEKEND-FREE MAINTENANCE'; }

@keyframes scrollText {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-25%); } }
.top-concept {
  padding: 142px 0 0;
  position: relative;
  margin-bottom: -160px; }
  @media (max-width: 480px) {
    .top-concept {
      padding: 15.3846153846vw 0 0;
      margin-bottom: -25.641025641vw; } }
  .top-concept .top-sec__in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    max-width: 100% !important;
    margin: 0 auto;
    z-index: 10;
    padding: 0 20px; }
    @media (max-width: 480px) {
      .top-concept .top-sec__in {
        padding: 0 !important; } }

.top-concept__main {
  max-width: 1330px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto; }
  @media (max-width: 480px) {
    .top-concept__main {
      padding: 0 5.1282051282vw; } }

.concept-content {
  width: 800px;
  margin-left: 120px;
  margin-bottom: 80px; }
  @media (max-width: 480px) {
    .concept-content {
      width: 100%;
      margin-left: 0;
      margin-bottom: 12.8205128205vw; } }

.concept-heading {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 4px;
  color: #16224f;
  margin-bottom: 50px; }
  @media (max-width: 480px) {
    .concept-heading {
      font-size: 6.1538461538vw;
      letter-spacing: 0.5128205128vw;
      margin-bottom: 6.1538461538vw;
      margin-left: 0; } }

.concept-description {
  font-size: 1.6rem;
  line-height: 2.06;
  letter-spacing: 1.28px;
  color: #000; }
  @media (max-width: 480px) {
    .concept-description {
      font-size: 3.5897435897vw;
      letter-spacing: 0.1282051282vw; } }
  .concept-description p {
    margin-bottom: 16px; }
    @media (max-width: 480px) {
      .concept-description p {
        margin-bottom: 3.0769230769vw; } }

.concept-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 325px;
  margin-left: -320px;
  width: calc(100% + 640px); }
  @media (max-width: 480px) {
    .concept-slider {
      height: 51.2820512821vw;
      margin-left: -5.1282051282vw;
      width: calc(100% + 10.2564102564vw); } }

.slider-track {
  display: flex;
  gap: 18px;
  animation: slide 30s linear infinite; }
  @media (max-width: 480px) {
    .slider-track {
      gap: 2.5641025641vw; } }
  .slider-track img {
    width: 466px;
    height: 325px;
    object-fit: cover;
    flex-shrink: 0; }
    @media (max-width: 480px) {
      .slider-track img {
        width: 71.7948717949vw;
        height: 51.2820512821vw;
        border-radius: 0; } }

@keyframes slide {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-50%); } }
.top-service {
  position: relative;
  padding: 260px 0 90px;
  color: #fff; }
  @media (max-width: 480px) {
    .top-service {
      padding: 38.4615384615vw 0 15.3846153846vw; } }
  .top-service .top-sec__in {
    position: relative;
    z-index: 10;
    max-width: 1330px;
    margin: 0 auto;
    padding: 0 20px; }
    @media (max-width: 480px) {
      .top-service .top-sec__in {
        padding: 0 5.1282051282vw; } }

.service-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  .service-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.service-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #16224F;
  mix-blend-mode: multiply; }

.service-description {
  font-size: 1.6rem;
  line-height: 2.06;
  letter-spacing: 1.28px;
  margin-bottom: 80px;
  max-width: 920px; }
  @media (max-width: 480px) {
    .service-description {
      font-size: 3.5897435897vw;
      letter-spacing: 0.1282051282vw;
      margin-bottom: 10.2564102564vw; } }
  .service-description p {
    margin-bottom: 10px; }
    @media (max-width: 480px) {
      .service-description p {
        margin-bottom: 2.0512820513vw; } }

.service-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 43px;
  margin-bottom: 86px; }
  @media (max-width: 480px) {
    .service-cards {
      gap: 5.1282051282vw 4%;
      margin-bottom: 12.8205128205vw; } }

.service-card {
  width: 290px;
  background: #fff;
  border-radius: 10px;
  padding: 48px 32px;
  text-align: center;
  color: #000;
  transition: all 0.5s ease; }
  @media (max-width: 480px) {
    .service-card {
      width: 48%;
      border-radius: 2.5641025641vw;
      padding: 5.1282051282vw 5.1282051282vw 7.6923076923vw; } }

.service-card-icon {
  margin-bottom: 24px;
  min-height: 71px;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media (max-width: 480px) {
    .service-card-icon {
      min-height: 12.8205128205vw;
      margin-bottom: 3.8461538462vw; } }
  .service-card-icon img {
    width: auto;
    max-height: 71px;
    height: auto; }
    @media (max-width: 480px) {
      .service-card-icon img {
        max-height: 10.2564102564vw; } }

.service-card-title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.67;
  letter-spacing: 1.44px;
  color: #16224f;
  margin-bottom: 5px; }
  @media (max-width: 480px) {
    .service-card-title {
      font-size: 4.1025641026vw;
      letter-spacing: 0.2051282051vw;
      line-height: 1.5;
      margin-bottom: 3.8461538462vw; } }

.service-card-text {
  font-size: 1.6rem;
  line-height: 2.06;
  letter-spacing: 1.28px;
  text-align: left; }
  @media (max-width: 480px) {
    .service-card-text {
      font-size: 3.3333333333vw;
      letter-spacing: 0.1282051282vw;
      line-height: 1.6; } }

.btn-outline {
  min-width: 320px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  border: 1px solid #fff;
  border-radius: 33px;
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0 auto;
  letter-spacing: 1.28px;
  color: #fff;
  background: transparent;
  transition: all 0.3s ease;
  cursor: pointer; }
  @media (max-width: 480px) {
    .btn-outline {
      padding: 3.8461538462vw 6.4102564103vw;
      font-size: 3.5897435897vw;
      letter-spacing: 0.2051282051vw;
      gap: 2.0512820513vw;
      border-radius: 6.4102564103vw; } }
  .btn-outline img {
    width: 32px;
    height: 37px;
    transition: transform 0.3s ease; }
    @media (max-width: 480px) {
      .btn-outline img {
        width: 5.1282051282vw;
        height: 6.1538461538vw; } }
  @media (min-width: 480px) {
    .btn-outline:hover {
      background: #fff;
      color: #16224f; }
      .btn-outline:hover img {
        transform: translateX(5px); } }
  .btn-outline.white {
    border-color: #fff;
    color: #fff; }

.top-merit {
  position: relative;
  padding: 90px 20px 50px; }
  @media (max-width: 480px) {
    .top-merit {
      padding: 15.3846153846vw 5.1282051282vw 15.3846153846vw; } }
  .top-merit .top-sec__in {
    position: relative;
    z-index: 10;
    max-width: 1300px;
    margin: 0 auto;
    padding-bottom: 60px; }
    @media (max-width: 480px) {
      .top-merit .top-sec__in {
        padding: 0; } }
  @media (max-width: 480px) {
    .top-merit .section-header {
      margin-bottom: 15.3846153846vw; } }

.merit-bg {
  position: absolute;
  bottom: 0;
  right: 110px;
  width: 100vw;
  min-width: 1330px;
  height: calc(100% - 180px);
  background: #f5f4f3; }
  @media (max-width: 480px) {
    .merit-bg {
      top: 28.2051282051vw;
      bottom: auto;
      left: -7.6923076923vw;
      width: 70vw;
      min-width: auto;
      height: calc(100% - 64.1025641026vw); } }

.merit-content {
  position: relative;
  z-index: 10; }

.merit-heading {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 4px;
  color: #16224f;
  margin-bottom: 30px; }
  @media (max-width: 480px) {
    .merit-heading {
      font-size: 6.1538461538vw;
      letter-spacing: 0.5128205128vw;
      margin-bottom: 5.1282051282vw; } }

.merit-description {
  font-size: 1.6rem;
  line-height: 2.06;
  letter-spacing: 1.28px;
  max-width: 610px; }
  @media (max-width: 480px) {
    .merit-description {
      font-size: 3.5897435897vw;
      letter-spacing: 0.1282051282vw;
      max-width: 100%; } }
  .merit-description p {
    margin-bottom: 16px; }
    @media (max-width: 480px) {
      .merit-description p {
        margin-bottom: 3.0769230769vw; } }

.merit-image {
  position: absolute;
  left: calc(50% + 50px);
  top: 461px;
  width: 660px;
  border-radius: 10px;
  overflow: hidden;
  transform: translateX(-50%); }
  @media (max-width: 480px) {
    .merit-image {
      position: unset;
      right: auto;
      top: auto;
      width: 90%;
      margin: 7.6923076923vw 0 7.6923076923vw auto;
      border-radius: 2.5641025641vw; } }

.merit-image02 {
  position: absolute;
  left: calc(50% + 40px);
  top: 110px;
  width: 900px;
  overflow: hidden;
  transform: translateX(-50%); }
  @media (max-width: 480px) {
    .merit-image02 {
      position: unset;
      right: auto;
      top: auto;
      width: 100%;
      margin: 7.6923076923vw 0;
      border-radius: 2.5641025641vw; } }

.merit-buttons {
  margin-top: 108px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 380px; }
  @media (max-width: 480px) {
    .merit-buttons {
      margin-top: 10.2564102564vw;
      max-width: 100%;
      gap: 3.0769230769vw; } }

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 22px 36px;
  background: #16224f;
  border-radius: 33px;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #16224f;
  line-height: 1.2; }
  @media (max-width: 480px) {
    .btn-primary {
      padding: 3.8461538462vw 6.4102564103vw;
      font-size: 3.5897435897vw;
      letter-spacing: 0.2051282051vw;
      gap: 2.0512820513vw;
      border-radius: 6.4102564103vw; } }
  .btn-primary img {
    position: absolute;
    width: 32px;
    height: 37px;
    transition: transform 0.3s ease;
    top: 50%;
    right: 20px;
    transform: translateY(-50%); }
    @media (max-width: 480px) {
      .btn-primary img {
        width: 5.1282051282vw;
        height: 6.1538461538vw; } }
  @media (min-width: 480px) {
    .btn-primary:hover {
      background: #fff;
      color: #16224f; } }

.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none; }
  .video-modal.active {
    display: block; }

.video-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9); }

.video-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1280px;
  z-index: 10; }
  @media (max-width: 480px) {
    .video-modal-content {
      width: 95%; } }

.video-modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 4rem;
  cursor: pointer;
  line-height: 1; }
  @media (max-width: 480px) {
    .video-modal-close {
      top: -10.2564102564vw;
      font-size: 7.6923076923vw; } }

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0; }
  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fade-up {
  opacity: 0;
  transform: translateY(30px); }
  .fade-up.visible {
    animation: fadeInUp 0.8s ease-out forwards; }

.animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
  .animate.effect {
    opacity: 1;
    transform: translateY(0); }