@charset "utf-8";


/*==================
mv
====================*/

/* mv slide */

.mainvisual {
  background: #0E0D0D;
  position: relative;
  width: 100%;
  height: 100vh; 
  overflow: hidden;
}

.mainvisual::before{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  opacity: 1;
  z-index: 1;
  pointer-events:none;
  animation: bgReveal 1.2s ease forwards;
  animation-delay: 4s;
}

.slideshow__sp {
  position: absolute;
  width: 100%;
  height: 100vh;
  inset: 0;
}

.slideshow__pc {
  display: none;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: mvFade 12s infinite;
}

/* 4枚の時間差 */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 3s; }
.slide:nth-child(3) { animation-delay: 6s; }
.slide:nth-child(4) { animation-delay: 9s; }

/* フェードアニメーション */
@keyframes mvFade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }   /* フェードイン */
  25%  { opacity: 1; }   /* 表示キープ */
  31%  { opacity: 0; }   /* フェードアウト */
  100% { opacity: 0; }
}

@keyframes bgReveal{
  to { opacity: 0; }
}

@media screen and (min-width: 769px) {
    .slideshow__pc {
    display: block;
    position: absolute;
    width: 100%;
    height: 100vh;
    inset: 0;
  }

  .slideshow__sp {
    display: none;
  }
}

/* mv logo */

.mv__contents {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

@keyframes logoFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* logo svg */

.mainvisual__logo{
  width: min(520px, 80vw);
  height: auto;
}

.frame{
  opacity: 1;
    fill: none;
    fill: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}
#dot{
  opacity: 0;
  animation: dotIn 0.7s ease forwards;
  animation-delay: 0.9s;
  fill: #e50000;
}

.logo{
  stroke: #fff;
  fill: transparent;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;

  animation:
    drawLogo 7s ease forwards,
    fillLogo 0.3s ease forwards;
  animation-delay: 2.0s, 3.4s;
}

/* --- keyframes --- */
@keyframes dotIn{
  to { opacity: 1; }
}

@keyframes drawLogo{
  to { stroke-dashoffset: 0; }
}

@keyframes fillLogo{
  to { fill: #fff; stroke: transparent; }
}


/* mv sub */

.mv__sub {
  margin-top: 10px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(50px);
    transition: 1s ease-out;
}

.mv__sub.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: 0.8s ease-out;
}

/*==================
services
====================*/

.loctionCoordinator {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.services__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-inline: 4.8%;
}

.services__group__sp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .6s ease, transform .6s ease;
}

.services__group__sp.is-show {
  opacity: 1;
  transform: translateX(0);
}

.services__group__sp p {
  font-size: 2.2rem;
}

.topic__sub {
  display: block;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2;
}

.section--rentalSpace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.address {
  font-size: 1.6rem;
  line-height: 1.8;
  position: relative;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  gap: 6px;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.3);
  text-underline-offset: 6px;

  transition: color .2s ease, text-decoration-color .2s ease;
}

.address--jp {
  text-wrap: nowrap;
}

.address::before {
  display: inline-block;
  content: "";
  width: 14px;
  height: 18px;
  background: url(../images/location_logo.png) center / contain no-repeat;
  flex: 0 0 auto;
  position: relative;
  top: 2px;
  margin-right: 4px;
}

.address:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.address:active {
  transform: scale(.98);
  opacity: .8;
}

.service-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:34px;
  height: 38px;
  background: #E5E7EB;
  border-radius: 5px;
  overflow: hidden;
}

.service-number .num {
  font-family: inter;
  font-size: 2.4rem;
  color: #0E0D0D;
  text-align: center;
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
}

.fadeIn {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}

.fadeIn.is-show {
  opacity: 1;
  transform: translateX(0);
}


.reservation__btn {
  display: flex;
  align-items: center;
  gap: 21px;
  opacity: 1;
}

/* poster　scroll */

.posters {
  overflow: hidden;
  width: 100%;
  margin-top: 50px;
}

.posters__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  animation: postersScroll 30s linear infinite;
  will-change: transform;
}

.posters__item {
  flex: 0 0 auto;
}

.posters__item img {
  display: block;
  width: 80px;
  height: auto;
}

@keyframes postersScroll {
  0% {
    transform: translate3d(-760px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.portfolio__button {
    margin-top: 50px;
    font-size: 2.2rem;
    font-weight: 400;
    position: relative;
    display: inline-block;
    padding-bottom: 20px; 
}

.portfolio__button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 150px;
  height: 12px;
  background: url("../images/portfolio__arrow.png") no-repeat center;
  background-size: contain;
}

.portfolio__button:hover::before {
  transform: translateX(-50%) translateX(8px);
  opacity: 0.8;
}

@keyframes arrowMove {
  0% {
    transform: translateX(-50%) translateX(0);
  }
  50% {
    transform: translateX(-50%) translateX(6px);
  }
  100% {
    transform: translateX(-50%) translateX(0);
  }
}

.portfolio__button::before {
  animation: arrowMove 1.6s ease-in-out infinite;
}

/* rental space */
.roomSwiper {
  width: 100vw;   
}

.roomSwiper .swiper-slide img {
  display: block;
  width: 85%;
  margin: 0 auto;
  height: auto;
  object-fit: cover;
}

.roomSwiper .swiper-button-prev,
.roomSwiper .swiper-button-next {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 30px;
}

.roomSwiper .swiper-button-prev {
  background-image: url('../images/arrow-left.png');
}

.roomSwiper .swiper-button-next {
  background-image: url('../images/arrow-right.png');
}

.roomSwiper .swiper-button-prev::after,
.roomSwiper .swiper-button-next::after {
  display: none;
}


.roomSwiper .swiper-button-next {
  right: 9px
}

.roomSwiper .swiper-button-prev {
  left: 9px
}


/* ==== モーダル（フルスクリーン） ==== */

.gallery-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 9999;
}

.gallery-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gallery-modal__inner {
  position: relative;
  width: min(92vw, 1000px);
  padding: 0;
}

.roomModalSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.roomModalSwiper {
  overflow: hidden;
}

.roomModalSwiper img {
  width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
}


.roomModalSwiper .swiper-button-prev,
.roomModalSwiper .swiper-button-next {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 17px;
  height: 22px;
}

.roomModalSwiper .swiper-button-prev {
  background-image: url('../images/arrow-left.png');
  left: -1px;
}

.roomModalSwiper .swiper-button-next {
  background-image: url('../images/arrow-right.png');
  right: -1px;
}

.roomModalSwiper .swiper-button-prev::after,
.roomModalSwiper .swiper-button-next::after {
  display: none;
}



.gallery-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: none;
  border: none;
  font-size: 32px;
  color: #ffffff;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
  .mv__sub {
    font-size: 2.6rem;
    margin-top: 16px;
  }
  .posters__track {
    gap: 20px;
  }

  .posters__item img {
    width: 140px;
  }

  .list {
    margin-top: 0;
    font-size: 5rem;
  }

  .services__content {
    margin-top: 50px;
    max-width: 1030px;
    margin-inline: auto;
    padding-inline: 2%; 
  }

  .services__group__sp {
    flex-direction: row;
    align-items: end;
    gap: 20px;
    margin-top: 0px;
  }

  .services__group__sp p {
    font-size: 2.8rem;
  }


  .address {
    font-size: 2.5rem;
    margin-inline: 0;
  }

  .address::before {
    width: 17px;
    height: 26px;
  }

  .portfolio__button {
    font-size: 2.8rem;
    margin-top: 60px;
  }

  .portfolio__button::before {
    width: 183px;
  }

  .roomSwiper .swiper-slide img {
  width: 77%;
  margin: 0 auto;
}

  .section--rentalSpace {
    gap: 75px;
  }

  .roomSwiper {
  position: relative;
  }

  .roomSwiper .swiper-button-prev, 
  .roomSwiper .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    z-index: 10;
  }

  .roomSwiper .swiper-button-next {
    right: 23%;
  }

  .roomSwiper .swiper-button-prev {
    left: 23%;
  }

  .reservation__btn {
    gap: 62px;
  }

  .Airbnb, .Bookingcom {
    font-size: 3rem;
    padding: 11px 30px;
    width: 220px;
  }

}



/*==================
contact
====================*/

.section--contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline: 4.8%;
}

.contact__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.contact__group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.info {
  font-size: 1.8rem;
  font-weight: 500;
}

.info__tel {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.3);
  text-underline-offset: 6px;
  left: 10px;

  transition: color .2s ease, text-decoration-color .2s ease;
}

.info__tel::before {
  content: '';
  width: 18px;
  height: 18px;
  background: url(../images/tel_logo.png) center / contain no-repeat;
  flex: 0 0 auto;
}

.info__mail {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.3);
  text-underline-offset: 6px;

  transition: color .2s ease, text-decoration-color .2s ease;
}

.info__mail::before {
  content: '';
  width: 18px;
  height: 18px;
  background: url(../images/mail_logo.png) center / contain no-repeat;
  flex: 0 0 auto;
}

.info__mail:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.info__tel:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.info__mail {
  transform: scale(.98);
}

.info__tel:active {
  transform: scale(.98);
  opacity: .8;
}

.contact-form {
  padding: 32px 24px 28px;
  border: 1px solid #ffffff;
  border-radius: 32px;
  box-sizing: border-box;
  background: #050505;  
  margin-top: 40px;
}

/* ラベル */
.contact-form label {
  display: block;
  margin-top: 20px;
  font-size: 1.6rem;
  color: #f5f5f5;
}

/* 必須マーク（＊） */
.contact-form .required {
  margin-left: 4px;
  color: #ff8a3c;
}

/* 入力欄 */
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  display: block;
  margin-top: 10px;
  padding: 10px 8px;
  font-size: 1.5rem;
  color: #111;
  background: #ffffff;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
}

/* テキストエリアの高さ */
.contact-form textarea {
  height: 160px;
  resize: none;
}

/* 送信ボタン */
.contact-form button[type="submit"] {
  display: block;
  margin: 28px auto 0;
  padding: 8px 40px;
  font-size: 1.6rem;
  color: #ffffff;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 4px;
  cursor: pointer;
}

@media (hover: hover) {
  .contact-form button[type="submit"]:hover {
    background: #ffffff;
    color: #000000;
  }
}

/* fade in */
.js-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-reveal.is-show {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (min-width: 769px) {
  .section--contact {
    display: flex;
    flex-direction: row;
    margin-inline: 2%;
    gap: 34px;
    align-items: center;
    margin-top: 100px;
  }
   
  .topic__sub {
    font-size: 2rem;
  }

  .info {
    font-size: 2.5rem;
  }

  .kakaotalk__btn {
    padding: 12px 20px 12px 54px;
  }

  .contact__group {
    gap: 40px;
  }

  .contact-form {
    width: 40%;
    min-width: 380px;
    margin-top: 0px;
  }

  .contact__text {
  width: 55%;
  }

  .contact__content {
  width: 55%;
  }

}

/*==================
company
====================*/

.company{
  position: relative;
  overflow: hidden;
}

.company__bg {
  position: absolute;
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.company__bg--top {
  top: 125px;
  right: 0;
  width: 49%;
  height: 17%;
  background: url("../images/company_bg_top.png") center / cover no-repeat;
  transform: translate(40px, 0px);
}

.company__bg--bottom {
  bottom: 0;
  left: 0;
  width: 49%;
  height: 17%;
  background: url("../images/company_bg_bottom.png") center / cover no-repeat;
  transform: translate(-40px, 0px);
}

.company.is-visible .company__bg {
  opacity: 1;
  transform:   translate(0, 0);
}

.company__list {
  margin: 150px 4.8% 150px;
}

.company__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 24px;
  padding: 12px 22px;
  border-top: 1px solid #707070;
}

.company__row:last-child {
  border-bottom: 1px solid #707070;
}

.company__term {
  font-size: 1.3rem;
  width: 90px;
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.company__desc {
  font-weight: 300;
  font-size: 1.6rem;
  flex: 1;
  line-height: 1.6;
}

.company__desc--mail {
  word-break: break-all;
  overflow-wrap: anywhere;
}

@media screen and (min-width: 769px) {

  .company {
    margin-bottom: 180px;
  }

  .company__desc {
    font-size: 2.5rem;
  }

  .company__term {
    font-size: 2rem;
    text-wrap: nowrap;
  }

  .company__row {
    gap: 48px;
    padding: 18px 0;
  }

  .company__term {
    width: 100px;
  }

  .company__list {
    margin: 50px 33.1% 0px;
  }

  .company__bg--top,
  .company__bg--bottom {
  width: 30%;
  height: 41%;
  }
}