@charset "UTF-8";
/* ============================================================
// index.scss
============================================================ */
/* ------------------------------------------------------------
// Fluid Design Function
// 最小値〜最大値の間で数値を可変させる共通関数
------------------------------------------------------------ */
/* ------------------------------------------------------------
// hero
------------------------------------------------------------ */
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.hero .logo {
  position: absolute;
  z-index: 100;
  top: 150px;
  left: 5%;
  padding-right: 120px;
}

.hero__slider {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero__slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hero__content--fixed {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  bottom: 10%;
  left: 5%;
}

.hero__content--fixed .hero__title,
.hero__content--fixed .hero__text {
  opacity: 1;
  transform: none;
}

.hero__content--fixed .hero__title {
  font-size: clamp(40px, 1.8264840183vw + 33.1506849315px, 60px);
  font-weight: 500;
  color: #8ca7b4;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

.hero__content--fixed .hero__text {
  font-size: clamp(16px, 0.7305936073vw + 13.2602739726px, 24px);
  font-weight: 500;
  color: #8ca7b4;
  margin-top: 12px;
}

.swiper-slide-active .hero__title,
.swiper-slide-active .hero__text {
  opacity: 1;
  transform: translateY(0);
}

.hero--full {
  max-width: none;
}

.hero__slider--aspect-ratio {
  aspect-ratio: 16/9;
  height: auto;
}

.reservation {
  padding-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .reservation {
    padding-top: 40px;
  }
}
.reservation__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
@media (max-width: 991px) {
  .reservation__container {
    flex-direction: column;
  }
}
.reservation__image {
  width: 100%;
  max-width: 846px;
}
.reservation__content {
  flex: 1;
}
.reservation__head {
  margin-bottom: 40px;
}
.reservation__label {
  display: flex;
  align-items: center;
  font-size: clamp(15px, 0.2739726027vw + 13.9726027397px, 18px);
  font-weight: 500;
}
.reservation__label::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #a5bdc6;
  border-radius: 50%;
  margin-right: 10px;
}
.reservation__title {
  font-size: clamp(40px, 5.4794520548vw + 19.4520547945px, 100px);
  font-weight: 500;
  color: #8ca7b4;
  line-height: 1.2;
}
.reservation__subtitle {
  font-size: clamp(18px, 0.5479452055vw + 15.9452054795px, 24px);
  font-weight: 500;
}
.reservation__body {
  margin-bottom: 40px;
}
@media (max-width: 575px) {
  .reservation__action {
    display: flex;
    justify-content: center;
  }
}

.onlineshop {
  color: #fff;
  padding-bottom: clamp(120px, 19.1780821918vw + 48.0821917808px, 330px);
}
@media screen and (max-width: 767px) {
  .onlineshop {
    padding-top: 40px;
  }
}
.onlineshop__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
@media (max-width: 991px) {
  .onlineshop__container {
    flex-direction: column-reverse;
  }
}
.onlineshop__image {
  width: 100%;
  max-width: 846px;
}
.onlineshop__content {
  flex: 1;
}
.onlineshop__head {
  margin-bottom: 40px;
}
.onlineshop__label {
  display: flex;
  align-items: center;
  font-size: clamp(15px, 0.2739726027vw + 13.9726027397px, 18px);
  font-weight: 500;
  margin-bottom: 10px;
}
.onlineshop__label::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
}
.onlineshop__title {
  font-size: clamp(40px, 5.4794520548vw + 19.4520547945px, 100px);
  font-weight: 500;
  line-height: 1.2;
}
.onlineshop__subtitle {
  font-size: clamp(18px, 0.5479452055vw + 15.9452054795px, 24px);
  font-weight: 500;
  margin-bottom: 5px;
}
.onlineshop__body {
  margin-bottom: 40px;
}
.onlineshop__action {
  display: flex;
  gap: 20px;
}
@media (max-width: 575px) {
  .onlineshop__action {
    align-items: center;
    flex-direction: column;
  }
}

.bg-img-line {
  margin-top: -200px;
}
@media screen and (max-width: 1200px) {
  .bg-img-line {
    margin-top: -160px;
  }
}
@media screen and (max-width: 991px) {
  .bg-img-line {
    margin-top: -100px;
  }
}
@media screen and (max-width: 767px) {
  .bg-img-line {
    margin-top: -60px;
  }
}

.business {
  padding-block: clamp(90px, 6.3926940639vw + 66.0273972603px, 160px);
  background: url(../images/index/bg-business.png) no-repeat center center/contain;
}
@media screen and (max-width: 767px) {
  .business {
    background: url(../images/index/bg-business-sp.png) no-repeat center center/contain;
  }
}
.business__head {
  display: table;
  margin-inline: auto;
  margin-bottom: 40px;
}
.business__label {
  display: flex;
  align-items: center;
  font-size: clamp(15px, 0.2739726027vw + 13.9726027397px, 18px);
  font-weight: 500;
}
.business__label::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #a5bdc6;
  border-radius: 50%;
  margin-right: 10px;
}
.business__title {
  font-size: clamp(40px, 5.4794520548vw + 19.4520547945px, 100px);
  font-weight: 500;
  color: #8ca7b4;
  line-height: 1.2;
}
.business__read {
  line-height: 2.2;
  text-align: center;
}
@media screen and (max-width: 575px) {
  .business__read {
    text-align: left;
  }
}
.business__action {
  display: flex;
  justify-content: center;
  margin-top: clamp(60px, 2.7397260274vw + 49.7260273973px, 90px);
}

.company {
  margin-bottom: clamp(120px, 7.3059360731vw + 92.602739726px, 200px);
}
.company__container {
  display: flex;
  justify-content: space-between;
  gap: clamp(40px, 3.6529680365vw + 26.301369863px, 80px);
}
@media (max-width: 1024px) {
  .company__container {
    flex-direction: column;
  }
}
.company__head {
  margin-bottom: 40px;
}
.company__label {
  display: flex;
  align-items: center;
  font-size: clamp(15px, 0.2739726027vw + 13.9726027397px, 18px);
  font-weight: 500;
}
.company__label::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #a5bdc6;
  border-radius: 50%;
  margin-right: 10px;
}
.company__title {
  font-size: clamp(40px, 5.4794520548vw + 19.4520547945px, 100px);
  font-weight: 500;
  color: #8ca7b4;
  line-height: 1.2;
}
.company__maps {
  flex: 1;
  display: flex;
  gap: clamp(20px, 0.9132420091vw + 16.5753424658px, 30px);
}
@media (max-width: 599px) {
  .company__maps {
    flex-direction: column;
  }
}
.company__map-item {
  flex: 1;
}
.company__map-name {
  font-size: clamp(16px, 0.1826484018vw + 15.3150684932px, 18px);
  font-weight: 500;
  margin-bottom: 20px;
  padding: 6px 0 6px 10px;
  border-left: 2px solid #464f58;
  line-height: 1.2;
}
.company__info {
  width: 600px;
}
@media (max-width: 1024px) {
  .company__info {
    width: 100%;
  }
}

.contact {
  margin-bottom: -160px;
}
@media (max-width: 991px) {
  .contact {
    margin-bottom: -100px;
  }
}
@media (max-width: 767px) {
  .contact {
    margin-bottom: -60px;
  }
}
.contact__container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5.4794520548vw + -0.5479452055px, 80px);
  padding: clamp(30px, 2.7397260274vw + 19.7260273973px, 60px) clamp(20px, 7.3059360731vw + -7.397260274px, 100px);
  background-color: #e7f0f4;
  border-radius: clamp(20px, 25.5707762557vw + -75.8904109589px, 300px);
}
@media (max-width: 1200px) {
  .contact__container {
    flex-direction: column;
  }
}
.contact__label {
  display: flex;
  align-items: center;
  font-size: clamp(15px, 0.2739726027vw + 13.9726027397px, 18px);
  font-weight: 500;
}
.contact__label::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 10px;
  background-color: #a5bdc6;
  border-radius: 50%;
}
.contact__title {
  font-size: clamp(40px, 5.4794520548vw + 19.4520547945px, 100px);
  font-weight: 500;
  color: #8ca7b4;
  line-height: 1.2;
}
.contact__tel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(40px, 2.9223744292vw + 29.0410958904px, 72px);
  font-weight: 500;
  color: #8ca7b4;
}
.contact__tel i {
  font-size: clamp(24px, 3.2876712329vw + 11.6712328767px, 60px);
  padding-top: clamp(4px, 0.3652968037vw + 2.6301369863px, 8px);
}
.contact__tel a,
.contact__tel span {
  color: #8ca7b4;
}