@charset "utf-8";
/* @media only screen and (max-width:1280px) {}
@media only screen and (max-width:768px) {}
@media only screen and (max-width:480px) {} 
"Noto Serif JP Bold"
"Noto Serif JP Light"
"Noto Serif JP Regular"
"DIN Pro Light"
"Canvas"
"MADE Canvas"
"DIN Pro Light"*/

/* common
---------------------- */
* {
	box-sizing: border-box;
}
.dib {
	display: inline-block;
}
.tac {
	text-align: center;
}
.noto {
	font-family: "Noto Serif JP Regular", sans-serif;
}
.noto-light {
	font-family: "Noto Serif JP Light", sans-serif;
}
.noto-bold {
	font-family: "Noto Serif JP Bold", sans-serif;
}
sup {
	font-size: 14px;
	letter-spacing: normal;
	vertical-align:text-top;
}
.page-header {
	padding-top: 220px;
}
.commonImgcap04.black {
	color: #000;
}
@media only screen and (max-width:768px) {
	.page-header {
		padding-top: 150px;
	}
}
/* modelroom
------------------- */
.tab {
	margin-block: min(100px, 10vw);
}
.tab__list {
	width: min(600px, 100%);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: min(30px, 3vw);
}
.tab__link {
	font-family: "MADE Canvas", serif;
	font-size: 24px;
	letter-spacing: 0.1em;
	padding: min(20px, 2vw);
	text-align: center;
}
.tab__link {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #231815;
	color: #7c7573;
	border: none;
	transition: all 0.3s;
	opacity: 1;
}
.tab__link:hover {
	cursor: pointer;
	opacity: 0.8;
}
.tab__list-item.is-current .tab__link {
	background-color: #fff;
	color: #000;
	cursor: default;
}
.tab__contents {
	margin-block: min(100px, 10vw);
}
.tab__contents-item {
	display: none;
}
.tab__contents-item.is-current {
	display: block;
}
.contents01__gallery-list {
	overflow: hidden;
}
.contents01__gallery-item figcaption {
	font-size: 40px;
	letter-spacing: 0.1rem;
}
.contents01__gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: min(10px, 1vw); 
	margin-top: 20px;
}
.contents01__gallery-thumb {
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.3s;
	position: relative;
}
.contents01__gallery-thumb::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background-image: linear-gradient(90deg, #a8bacb, #617191);
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transition: opacity 0.3s;
	opacity: 1;
}
.contents01__gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 選択中のサムネイル */
.contents01__gallery-thumb.active::before  {
	opacity: 0;
	/* border-color: #ff6600; */
}
.contents01__gallery-thumb figcaption {
	display: block;
	width: 100%;
	text-align: center;
	top: 50%;
	left: 50%;
	right: unset;
	bottom: unset;
	transform: translate(-50%, -50%);
	letter-spacing: 0.1rem;
	padding: 0 10px;
}
/* 共通スタイル */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: fit-content;
  height: 100%;
  background-color: transparent;
  border: none;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 1;
  padding: 10px;
}
.slick-next {
  right: 0;
}
.slick-prev {
  left: 0;
}
/* ホバー時のスタイル */
.slick-prev:hover,
.slick-next:hover {
  /* background-color: rgba(0, 0, 0, 0.8);
  opacity: 0.8; */
}

/* 矢印アイコン（共通スタイル） */
.slick-prev::before,
.slick-next::before {
  content: '';
  display: block;
  width: min(40px, 7vw);
  height: min(40px, 7vw);
  /* border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: white;
  filter: drop-shadow(0 0 3px #000); */
}

/* 左矢印（左向きに回転） */
.slick-prev::before {
  transform: rotate(-135deg) translateX(-1%);
}

/* 右矢印（右向きに回転） */
.slick-next::before {
  transform: rotate(45deg);
}

/* slick dotsのスタイル調整 */
.slick-dots {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  list-style: none;
  margin: 0;
  background-color: transparent; /* 黒背景を消す */
}

.slick-dots li {
  padding: 0;
  margin: 0 4px;
}

.slick-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #838C92;
  border: none;
  padding: 0;
  margin: 0;
  text-indent: -9999px; /* ← 文字を非表示にする */
  overflow: hidden;
  white-space: nowrap;
  font-size: 0; /* ← 文字を完全に潰す（追加） */
}

.slick-dots .slick-active button {
  background: #fff; /* アクティブなドットの色 */
}
.slick-dots button {

}

.slick-dots li {
  margin: 0 2px;
}

.gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 10px;
}

.gallery__fraction {
  font-size: 14px;
  color: #fff;
  padding-top: 10px;
  width: 5rem;
  text-align: right;
}

/* slick-dotsの見た目調整（任意） */
.gallery__controls .slick-dots {
  display: flex !important;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}




/* contents
====================================== */
.contents01 {
	position: relative;
	z-index: 1;
}
.contents__inner {
	width: min(1000px, calc(100% - 200px));
}
.contents01__header {
	width: 100%;
	background-color: #f0f0f0;
}
.contents01__header-inner {
	width: min(1080px, 100%);
	margin-inline: auto;
	padding: min(60px, 6vw) 20px;
	color: #000;
	display: grid;
	grid-template-columns: 1fr 2fr;
	align-items: center;
}
.contents01__title {
	font-family: "MADE Canvas", serif;
	font-size: 28px;
	letter-spacing: 0.3em;
}
.contents01__title::first-letter {
	font-size: 150%;
}
.contents01__lead {
	font-size: 18px;
	line-height: 2;
}

/* contents02
------------------------- */
.contents02__inner {
	width: min(830px, 100%);
	margin-inline :auto;
	margin-bottom: min(100px, 10vw);
}
.contents02__header {
	border-color: #fff;
	border-style: solid;
	border-width: 1px 0 1px;
	margin-bottom: min(100px, 10vw);
}
.contents02__title {
	font-size: 24px;
	line-height: 3;
	letter-spacing: 0.1rem;
	text-align: center;
}
.contents02__title02 {
	font-size: 28px;
	line-height: 2;
	letter-spacing: 0.2rem;
	margin-bottom: min(40px, 4vw);
}
.contents02__body {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: min(30px, 3vw);
}
.contents02__img {
	/* margin-top: -7%; */
	position: relative;
	z-index: 0;
}
.contents02__img02 {
	width: min(250px, 100%);
	margin-bottom: min(40px, 4vw);
}
.contents02__text01 {
	font-size: 14px;
	letter-spacing: 0.1rem;
	line-height: 1.5;
	margin-bottom: min(30px, 3vw);
}
.contents02__text02 {
	font-size: 34px;
	letter-spacing: 0.2rem;
	line-height: 1;
	margin-bottom: min(20px, 2vw);
}
.contents02__text03 {
	font-size: 18px;
	letter-spacing: 0.2rem;
	line-height: 1.8;
	margin-bottom: min(20px, 2vw);
}

@media only screen and (max-width:768px) {
	.contents__inner,
	.contents02__inner {
		width: calc(100% - 40px);
	}
	.contents01__header-inner {
		grid-template-columns: 1fr;
	}
	.contents01__title {
		text-align: center;
		font-size: 20px;
		margin-bottom: 20px;
	}
	.contents01__lead {
		text-align: center;
		font-size: 16px;
	}
	.contents01__gallery-thumbs {
		grid-template-columns: repeat(3, 1fr);
	}
	.contents01__gallery-item figcaption {
		font-size: 18px;
	}
	.contents02__img {
		/* margin-top: 40px; */
	}
	.contents02__header {
		margin-bottom: 40px;
	}
	.contents02__title {
		font-size: 16px;
		line-height: 1.8;
		padding-block: 1rem;
	}
	.contents02__body {
		grid-template-columns: 1fr;
	}
	.contents02__title02 {
		font-size: 16px;
		line-height: 1.8;
		margin-bottom: 30px;
	}
	.contents02__text03 {
		font-size: 13px;
	}
	.contents02__item--02,
	.contents02__img02 {
		width: 250px;
		margin-inline: auto;
	}
	.contents02__text01 {
		font-size: 9px;
	}
	.contents02__text02 {
		font-size: 16px;
	}
	.contents02__text03 {
		margin-bottom: 30px;
	}
}