@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;
	}
}

/* intro
---------------------------------------------- */
.intro {
	background-color: #eee5d9;
	padding-bottom: 80px;
}

.intro__copy {
	width: 424px;
	mix-blend-mode: multiply;
}

.introBox {
	margin-top: 30px;
}

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

	.intro__copy {
		width: 180px;
	}

	.introBox {
		width: calc(330 / 375 * 100%);
		max-width: 400px;
		margin-top: 20px;
	}
}

/* gallery
---------------------------------------------- */
.gallery {
	background-color: #3a6d9f;
	padding-block: 80px;
}

.gallery__title {
	color: #eee5d9;
	font-size: 36px;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-align: center;
}

.gallery__text {
	color: #eee5d9;
	font-size: 24px;
	letter-spacing: 0.05em;
	line-height: 2;
	margin-top: 1em;
	text-align: center;
}

.gallery__img {
	margin-top: 50px;
}
.gallery__name {
	position: absolute;
	bottom: 4%;
	left: 4%;
	color: #fff;
	font-size: 60px;
	letter-spacing: 0.05em;
	text-shadow: 0 0 10px rgb(0 0 0 / .7);
	z-index: 1;
}
.gallery .p-caption {
	text-shadow: none;
}

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

	.gallery__title {
		font-size: 20px;
	}

	.gallery__text {
		font-size: 14px;
		text-align: justify;
	}

	.gallery__img {
		max-width: 560px;
		margin-top: 30px;
	}
	.gallery__name {
		bottom: 5%;
		font-size: 20px;
	}
}

/* typeArea
---------------------------------------------- */
.typeArea {
	padding-block: 80px;
}

.typeArea__inner {
	max-width: 1200px;
}

.typeAreaHead {
	width: calc(420 / 1200 * 100%);
}

.typeArea__spec {
	max-width: 374px;
}
.typeAreaBox {
	margin-top: 100px;
}
.typeArea__text {
	font-size: 18px;
	letter-spacing: 0.05em;
	line-height: 1.7;
	margin-top: 1em;
	text-align: justify;
}

.typeArea__body {
	width: calc(684 / 1200 * 100%);
}

@media screen and (max-width: 768px) {
	.typeArea {
		padding-block: 40px;
	}

	.typeArea__inner {
		width: calc(280 / 375 * 100%);
		max-width: 400px;
	}

	.typeAreaHead {
		width: 100%;
	}
	.typeArea__spec {
		width: 70%;
		max-width: 280px;
		margin-inline: auto;
	}

	.typeAreaBox {
		margin-top: 30px;
	}
	.typeArea__text {
		font-size: 14px;
	}

	.typeArea__body {
		width: 100%;
		margin-top: 30px;
	}
}

/* items
---------------------------------------------- */
.items {
	background-color: #3a6d9f;
	padding-block: 80px;
}

.items__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px calc(80 / 1200 * 100%);
	max-width: 1200px;
}
.items__inner .name {
	width: calc(250 / 560 * 100%);
	margin-top: 10px;
}
.items__text {
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.1em;
	line-height: 2;
	margin-top: 10px;
	text-align: justify;
}
.product {
	margin-top: 20px;
}

@media screen and (max-width: 768px) {
	.items {
		padding-block: 40px;
	}

	.items__inner {
		grid-template-columns: 1fr;
		row-gap: 30px;
		max-width: 400px;
	}
	.items__inner .name {
    width: calc(180 / 330 * 100%);
	}
	.items__text {
		font-size: 12px;
	}
}

/* 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;
	}
}