@charset "utf-8";
/* CSS Document */

html {scroll-behavior: auto;}
body {font-size: 16px; background-image: url(../img/common/common_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}

/* ===============================
	mv
 =============================== */
#mv {
  background-image: url(../img/movie/mv_bg.jpg);
}
@media screen and (max-width: 750px) {
  #mv {
    background-image: url(../img/movie/mv_bg_sp.jpg);
  }
}

/* ===============================
	movie
 =============================== */
#movie {
  margin-top: 80px;
  margin-bottom: 160px;
}
#movie_con {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  filter: drop-shadow(0 0 16px rgb(0 0 0 / 0.16));
}
#movie_con .movie_btn {
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  min-height: 60px;
  background: var(--C-white);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
}
#movie_con.con_4 .movie_btn {
  width: calc(100% / 4);
}
#movie_con .movie_btn.active {
  color: var(--C-white);
  min-height: 70px;
  border-radius: 3px 3px 0 0;
  position: relative;
  padding: 21px 0;
}
#movie_con .movie_btn:nth-child(1).active {
  background: var(--C-accent-green);
}
#movie_con .movie_btn:nth-child(2).active {
  background: #9D6872;
}
#movie_con .movie_btn:nth-child(3).active {
  background: #AF692D;
}
#movie_con .movie_btn:nth-child(4).active {
  background: #426E89;
}
#movie_con .movie_btn:nth-child(5).active {
  background: #3F516E;
}
#movie_con .movie_btn:not(:first-child).active::before,
#movie_con .movie_btn:not(:last-child).active::after {
  content: '';
  width: 19px;
  height: 19px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  bottom: 0;
}
#movie_con .movie_btn:not(:first-child).active::before {
  left: -19px;
  transform: scale(-1, 1);
}
#movie_con .movie_btn:not(:last-child).active::after {
  right: -19px;
}
#movie_con .movie_btn:nth-child(1).active::after {
  background-image: url(../img/movie/arrow_green.svg);
}
#movie_con .movie_btn:nth-child(2).active::after,
#movie_con .movie_btn:nth-child(2).active::before {
  background-image: url(../img/movie/arrow_pink.svg);
}
#movie_con .movie_btn:nth-child(3).active::after,
#movie_con .movie_btn:nth-child(3).active::before {
  background-image: url(../img/movie/arrow_orange.svg);
}
#movie_con .movie_btn:nth-child(4).active::after,
#movie_con .movie_btn:nth-child(4).active::before {
  background-image: url(../img/movie/arrow_blue.svg);
}
#movie_con .movie_btn:nth-child(5).active::before {
  background-image: url(../img/movie/arrow_Dblue.svg);
}
#movie_list_con {
  position: relative;
  z-index: +1;
  margin-top: 64px;
}
#movie_list_con .movie_list {
  display: none;
}
#movie_list_con .movie_list.show {
  display: block;
}
#movie_list_con ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 80px 40px;
  margin-bottom: 80px;
}
#movie_list_con li {
  width: calc((100% - (40px * 2)) / 3);
  display: none;
}
#movie_list_con li:nth-child(-n+12) {
  display: block;
}
#movie .movie_img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--C-black);
  position: relative;
  transition: .6s;
}
#movie .movie_img::before,
#movie .movie_img::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transition: .3s;
}
#movie .movie_img::before {
  width: 59px;
  height: 59px;
  background-image: url(../img/movie/movie_start.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: +1;
}
#movie .movie_img::after {
  width: 100%;
  height: 100%;
  background: var(--C-white);
}
#movie li:hover .movie_img::before {
  opacity: 1;
}
#movie li:hover .movie_img::after {
  opacity: .6;
}
#movie .movie_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#movie .category_con {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}#movie .category_con span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--C-white);
  height: 26px;
  border-radius: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
}
#movie .category_con span.list_new {
  background: var(--C-accent-Dyellow);
  width: 76px;
}
#movie .category_tour .category_con span.movie_category {
  background: #9D6872;
}
#movie .category_tour .category_con span.movie_category::before {
  content: 'ルームツアー';
}
#movie .category_show .category_con span.movie_category {
  background: #AF692D;
}
#movie .category_show .category_con span.movie_category::before {
  content: 'ショールーム';
}
#movie .category_owner .category_con span.movie_category {
  background: #426E89;
}
#movie .category_owner .category_con span.movie_category::before {
  content: 'オーナー様の家';
}
#movie .category_employee .category_con span.movie_category {
  background: #3F516E;
}
#movie .category_employee .category_con span.movie_category::before {
  content: '社員の家';
}
#movie .category_con span.category_sns {
  color: var(--C-txt-main);
  background: var(--C-white);
  border: var(--C-line-gray) 1px solid;
}
#movie .sns_inst .category_con span.category_sns::before {
  content: 'Instagram';
}
#movie .sns_tiktok .category_con span.category_sns::before {
  content: 'Tiktok';
}
#movie .sns_youtube .category_con span.category_sns::before {
  content: 'Youtube';
}
#movie h2 {
  margin-top: 12px;
}
/* modal */
.modal{
	display: none;
	height: 100vh;
	position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
	width: 100%;
	z-index: 999;
}
.modal__bg{
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
}
.modal__content {
	background: #fff;
	left: 50%;
	position: absolute;
	top: 60%;
	transform: translate(-50%,-50%);
	width: 60%;
}
.modal__wrap {
	width: 100%;
	height: auto;
	max-height: 80vh;
	overflow-y: auto;
	display: flex;
	justify-content: center;
}
.modal__content.merit {
	width: 590px;
	max-width: 85%;
}
.merit .js-modal-close {
  width: 48px;
  height: 48px;
  background-image: url(../img/common/icon_close.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
	display: block;
	padding: 0.7em ;
	position: absolute;
  top: -48px;
  right: -48px;
}
.instagram {
	width: 540px !important;
}
.tiktok {
	width: 390px !important;
}
.youtube .modal__wrap {
  aspect-ratio: 16 / 9;
}
.youtube .modal__wrap iframe {
  width: 100% !important;
  max-width: 690px;
  height: 100% !important;
}
blockquote {
  height: 100% !important;
}
/* /modal */
@media screen and (max-width: 750px) {
  #movie {
    margin-top: 10.66666666666667vw;
    margin-bottom: 19.2vw;
  }
  #movie_con {
    flex-wrap: wrap;
  }
  #movie_con {
    display: flex;
    filter: none;
    gap: 1.06666666666667vw;
  }
  #movie_con .movie_btn {
    font-size: 3.73333333333333vw;
    min-height: 13.33333333333333vw;
    width: calc((100% - 1.06666666666667vw) / 2);
    outline: rgb(0 0 0 / .04) 2px solid;
    outline-offset: -2px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgb(51 51 51 / .08) inset;
    padding: 4vw 0;
  }
  #movie_con.con_4 .movie_btn,
  #movie_con.con_4 .movie_btn:first-child {
    width: calc((100% - 1.06666666666667vw) / 2);
  }
  #movie_con .movie_btn.btn_100 {
    width: 100%;
  }
  #movie_con .movie_btn.active {
    min-height: 13.33333333333333vw;
    border-radius: 3px;
    padding: 4vw 0;
  }
  #movie_con .movie_btn:not(:first-child).active::before,
  #movie_con .movie_btn:not(:last-child).active::after {
    content: none;
  }
  #movie_list_con {
    margin-top: 10.66666666666667vw;
  }
  #movie ul {
    gap: 10.66666666666667vw 0;
    margin-bottom: 12.8vw;
  }
  #movie li {
    width: 100%;
  }
  #movie .category_con {
    gap: 1.06666666666667vw;
    margin-top: 4.26666666666667vw;
  }
  #movie .category_con span {
    font-size: 3.2vw;
    height: 6.93333333333333vw;
    border-radius: 3.46666666666667vw;
    padding: 0 4.26666666666667vw;
  }
  #movie h2 {
    margin-top: 4.26666666666667vw;
  }
  .modal__content {
    top: 53%;
  }
  .modaal-container {
    height: auto;
    margin-right: 0;
  }
  .modal__wrap {
    max-height: 72vh;
    max-height: 72dvh;
  }
  .modaal-fullscreen .modaal-close {
    position: absolute;
    top: 30px;
    right: 30px;
  }
  .merit .js-modal-close {
    right: -25px;
  }
}

/* ===============================
	movie_detail_con
 =============================== */


/* ===============================
	property
 =============================== */
#property {
  background: var(--C-sub);
  padding-top: 120px;
  padding-bottom: 160px;
}
#property > .wrap {
  container-type: inline-size;
}
#property .title-04 {
  margin-bottom: 40px;
}
@media screen and (max-width: 750px) {
  #property {
    padding-top: 17.06666666666667vw;
    padding-bottom: 21.33333333333333vw;
  }
  #property .title-04 {
    margin-bottom: 6.4vw;
  }
  #property .pickup_list li {
    display: none;
  }
  #property .pickup_list li:nth-child(-n+3) {
    display: block;
  }
}

/* ===============================
	btn_area
 =============================== */
.btn_area {
  margin-top: 80px;
  margin-bottom: 160px;
}
@media screen and (max-width: 750px) {
  .btn_area {
    margin-top: 12.8vw;
    margin-bottom: 21.33333333333333vw;
  }
}