@charset "UTF-8";

/* kv
---------------------------------------------- */
.kv__tag {
	background-color: #fff;
	padding-block: 30px;
}
.kv__tag img {
	display: block;
	width: calc(1036 / 1440 * 100%);
	margin-inline: auto;
}

@media screen and (max-width: 768px) {
	.kv__tag {
		padding-block: 10px;
	}
	.kv__tag img {
		width: 320px;
	}
}

/* gallery
---------------------------------------------- */
.gallery {
  position: relative;
  margin-top: 80px;
  padding-bottom: 100px;
  z-index: 0;
}
.gallery::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85%;
  background-color: #ebeae6;
  z-index: -1;
}

.galleryTabList > li {
	width: 335px;
}
.galleryTabList__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100px;
	background-color: #e2dfd9;
	color: #705f43;
	transition: .4s;
	text-align: center;
}
.galleryTabList__btn.active {
	background-color: #705f43;
	color: #fff;
}
.ugocloTabList__txt {
	font-size: 20px;
	letter-spacing: 0.2em;
	line-height: 1.6;
}

.gallerySlider {
  position: relative;
  z-index: 0;
}
.gallerySlider .swiper-slide {
  position: relative;
  z-index: 0;
}

.gallery__caption {
  position: absolute;
  bottom: 5%;
  left: 4%;
  color: rgb(255 255 255 / 0.5);
  font-size: clamp(20px, -0.98rem + 4.64vw, 40px);
  letter-spacing: 0.05em;
  z-index: 1;
}

.thumbSlider {
  position: relative;
  margin-top: 10px;
  z-index: 0;
}
.thumbList {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px calc(10 / 1340 * 100%);
}
.thumb__btn {
  position: relative;
  z-index: 0;
}
.thumb__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 0.6);
  transition: 0.4s ease;
}
.swiper-slide-thumb-active .thumb__btn::before {
  height: 0;
}
.thumb__cap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: rgb(255 255 255 / 0.5);
  padding-inline: 1em;
  text-align: center;
  transition: 0.4s ease;
  z-index: 1;
}
.swiper-slide-thumb-active .thumb__cap {
  opacity: 0;
}

.swiper-button-prev,
.swiper-button-next {
  margin: 0;
  transform: translateY(-50%);
  width: min(calc(80 / 1340 * 100%), 80px);
  height: auto;
}
.swiper-button-prev {
  left: 0;
}
.swiper-button-next {
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}

.galleryBtnWrap {
  gap: 10px 20px;
  /* max-width: 620px; */
  margin-top: 80px;
}
.galleryBtn {
  /* width: calc(300 / 620 * 100%); */
  max-width: 330px;
}

@media (hover: hover) and (pointer: fine) {
	.galleryTabList__btn:hover {
		opacity: .7;
	}

  .thumb__btn:hover::before {
    height: 0;
  }
  .thumb__btn:hover .thumb__cap {
    opacity: 0;
  }
}

@media screen and (max-width: 960px) {
	.galleryTabList > li {
    width: 280px;
	}
	.galleryTabList__btn {
		height: 70px;
	}
	.ugocloTabList__txt {
		font-size: 18px;
	}
}

@media screen and (max-width: 768px) {
  .gallery {
    margin-top: 40px;
    padding-bottom: 40px;
  }

	.galleryTabList > li {
    width: 50%;
	}
	.galleryTabList__btn {
		height: 50px;
	}
	.ugocloTabList__txt {
		font-size: 16px;
	}

  .thumbList {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .thumb__cap {
    font-size: 15px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 30px;
  }

  .galleryBtnWrap {
    margin-top: 40px;
  }
  .galleryBtn {
    max-width: 240px;
    height: 45px;
  }
}

/* ugoclo
---------------------------------------------- */
.ugoclo {
  padding-top: 140px;
}
.ugoclo__copy {
  font-size: clamp(22px, 0.26rem + 2.32vw, 32px);
  letter-spacing: 0.2em;
  line-height: 2;
  text-align: center;
}

.ugocoloHead {
  max-width: 860px;
  margin-top: 60px;
}

.ugocloWrap {
  margin-top: 100px;
}

.ugocloTabList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background-color: #ebeae6;
}
.ugocloTabList__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
	width: 100%;
	height: 100px;
  background-color: #a99f8e;
  color: #fff;
  font-size: clamp(16px, -0.45rem + 2.27vw, 20px);
  letter-spacing: 0.15em;
	line-height: 1.6;
	padding: 0.5em;
  text-align: center;
  transition: 0.4s ease;
  z-index: 0;
}
.ugocloTabList__btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: #705f43;
	transition: .4s ease;
  z-index: 1;
}

.ugocloTabList__btn.active {
  background-color: #ebeae6;
  color: #705f43;
}
.ugocloTabList__btn.active::after {
  width: calc(235 / 335 * 100%);
}

.ugocloBox {
  background-color: #ebeae6;
  padding: 60px min(calc(80 / 1340 * 100%), 80px) 70px min(calc(50 / 1340 * 100%), 50px);
}
.ugocloBox__inner {
  margin-top: 40px;
}
.madori {
  width: calc(720 / 1210 * 100%);
	margin-top: 3%;
}
.madoriBox {
	display: flex;
	justify-content: space-between;
  position: relative;
  z-index: 0;
}
.madoriBox::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: calc(40 / 720 * 100%);
  height: 80px;
  background-color: #861c3c;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
.madoriBox__img {
  width: calc(335 / 720 * 100%);
}

.sample {
  margin-top: 20px;
	padding-left: 4%;
}
.sample__list01 {
}
.sample__list01 > li {
  font-size: 11px;
  margin: 8px 8px 8px 0;
}
.sample__list02 {
  /* margin-top: 5px; */
}
.sample__list02 > li {
  display: flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin: 8px 1em 8px 0;
}
.sample__list02 > li::before {
  content: '';
  display: inline-block;
  margin-right: 4px;
}
.sample__list02 > li.floor::before {
  width: 46px;
  height: 12px;
  background: #dccdc4;
}
.sample__list02 > li.storage::before {
  width: 46px;
  height: 12px;
  background: #b6e4f9;
}

.ugocloBox__contents {
	width: calc(520 / 1210 * 100%);
	background-color: #fff;
	margin-left: -3%;
	padding: min(70px,calc(70 / 1210 * 100%)) min(50px,calc(50 / 1210 * 100%));
}
.ugocloBox__ttl {
	position: relative;
	font-size: clamp(20px, -0.36rem + 2.52vw, 32px);
	letter-spacing: 0.05em;
	line-height: 1.6;
	text-align: center;
	z-index: 0;
}
.tabItem01 .ugocloBox__ttl{
	letter-spacing: 0.1em;
}
.ugocloBox__ttl::after {
	content: '';
	display: block;
	width: 50px;
	height: 1px;
	background-color: #000;
	margin: 1em auto 0;
}
.ugocloBox__txt {
	font-size: clamp(16px, 0.19rem + 1.26vw, 22px);
	letter-spacing: 0.1em;
	line-height: 1.8;
	margin-top: 1em;
	text-align: center;
}
.ugocloPlus {
	width: fit-content;
	background-color: #705f43;
	border-radius: 12px;
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.1em;
	margin: 3em auto 1em;
	padding: 0.5em 1em;
	text-align: center;
}
.ugocloBox__note {
	color: #705f43;
	font-size: clamp(14px, 0.15rem + 1.14vw, 16px);
	letter-spacing: 0.1em;
	line-height: 1.8;
	text-align: center;
}
.ugocloBox__img {
	max-width: 360px;
	margin: 30px auto 0;
}

@media screen and (max-width: 768px) {
	.ugoclo {
		padding-top: 80px;
	}
	.ugoclo__copy {
		letter-spacing: 0.1em;
		line-height: 1.8;
		text-align: justify;
	}

	.ugocoloHead {
		max-width: 330px;
		margin-top: 30px;
	}

	.ugocloWrap {
		margin-top: 50px;
	}

	.ugocloTabList {
		grid-template-columns: repeat(2, 1fr);
	}
	.ugocloTabList__btn {
		height: 80px;
	}
	.ugocloTabList__btn::after {
		content: none;
	}

	.ugocloBox {
		padding: 40px 20px;
	}
	.spec{
		max-width: 270px;
		margin-inline: auto;
	}
	.ugocloBox__inner {
		margin-top: 30px;
	}
	.madori {
		width: calc(250 / 290 * 100%);
		margin: 0 auto;
	}
	.madoriBox {
		display: block;
		transform: translateX(-5%);
	}
	.madoriBox::before {
		content: none;
	}
	.madoriBox__img {
		width: 100%;
	}

	.sample {
		margin-top: 15px;
		padding-left: 4%;
	}
	.sample__list02 > li {
		font-size: 9px;
	}
	.sample__list02 > li.floor::before {
		width: 35px;
		height: 9px;
		background: #dccdc4;
	}
	.sample__list02 > li.storage::before {
		width: 35px;
		height: 9px;
	}

	/* modal */
	.modal__container{
		background-color: rgb(255 255 255 / 0.9);
		padding: 80px 5%;
	}
	.modal__close{
		top: 0;
		right: 0;
		width: 70px;
		height: 70px;
		background-color: #861c3c;
		z-index: 100;
	}
	.modal__close::before,
	.modal__close::after{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: #fff;
		z-index: 1;
	}
	.modal__close::before{
		width: 3px;
		height: 50%;
		transform: translate(-50%,-50%) rotate(45deg);
	}
	.modal__close::after{
		width: 3px;
		height: 50%;
		transform: translate(-50%,-50%) rotate(-45deg);
	}

	.ugocloBox__contents {
		width: 100%;
		background-color: transparent;
		margin-left: 0;
		padding: 0;
	}
	.ugocloBox__ttl {
		font-size: 26px;
	}
	.ugocloBox__ttl::after {
		width: 40px;
		margin-top: 0.6em;
	}
	.ugocloBox__txt {
		font-size: 18px;
	}
	.ugocloPlus {
		font-size: 13px;
	}
	.ugocloBox__img {
		width: calc(260 / 300 * 100%);
		max-width: 460px;
		margin-top: 20px;
	}

	.ugocloBox__madori {
		width: calc(230 / 300 * 100%);
		max-width: 400px;
		margin: 35px auto 0;
		transform: translateX(-5%);
	}

	.ugocloBox__btnBox{
		margin-top: 30px;
	}
	.ugocloBox__btn{
		width: 100%;
		max-width: 270px;
		gap: 14px;
		background-color: #861c3c;
		color: #fff;
		margin-inline: auto;
		padding: 18px;
		padding-right: 10px;
	}
	.ugocloBox__btn .plus{
		position: relative;
		width: 46px;
		height: 46px;
		background-color: #fff;
		z-index: 0;
	}
	.ugocloBox__btn .plus::before,
	.ugocloBox__btn .plus::after{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #861c3c;
		z-index: 1;
	}
	.ugocloBox__btn .plus::before{
		width: 3px;
		height: 25px;
	}
	.ugocloBox__btn .plus::after{
		width: 25px;
		height: 3px;
	}
	.ugocloBox__btn .txt{
		font-size: 18px;
		letter-spacing: 0.1em;
		line-height: 1.5;
	}
}

/* movie
---------------------------------------------- */
.movie{
	padding-block: 140px 100px;
	/* padding-top: 140px; */
}
.movie__ttl{
	text-align: center;
}
.movie__ttl .en{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	color: #705f43;
	font-size: 20px;
	letter-spacing: 0.2em;
}
.movie__ttl .en::before,
.movie__ttl .en::after{
	content: '';
	width: 1em;
	height: 1px;
	background-color: #705f43;
}
.movie__ttl .ja{
	display: block;
	font-size: 32px;
	letter-spacing: 0.2em;
	margin-top: 1em;
}

.movieArea{
	margin-top: 70px;
}
.movieList{
	gap: 50px calc(60 / 1340 * 100%);
}
.movieList > li{
	width: calc(640 / 1340 * 100%);
}

.movieList__ttl{
	font-size: 20px;
	letter-spacing: 0.15em;
	line-height: 1.6;
	margin-top: 1em;
	text-align: center;
}

@media screen and (min-width: 769px) {
	.movieList._item01 > li{
		width: calc(900 / 1340 * 100%);
	}
}

@media screen and (max-width: 768px) {
	.movie{
		padding-block: 70px 40px;
		/* padding-top: 70px; */
	}
	.movie__ttl .en{
		gap: 1em;
		font-size: 15px;
	}
	.movie__ttl .ja{
		font-size: 22px;
		margin-top: .6em;
	}

	.movieArea{
		margin-top: 40px;
	}
	.movieList{
		gap: 30px;
	}
	.movieList > li{
		width: 100%;

	}
	.movieWrap{
	}
	.movieList__ttl{
		font-size: 16px;
	}
}

/* bnrArea
---------------------------------------------- */
.bnrArea {
	margin-block: 100px;
}
.bnrItem {
	max-width: 1000px;
}
.bnrLink {
	display: block;
}

@media screen and (max-width: 768px) {
	.bnrArea {
		margin-block: 40px;
	}
	.bnrItem {
		max-width: 560px;
	}
}