@charset "UTF-8";

/*------------------------
間取りページ共通
------------------------*/
#outline {
	color: #222;
}

#outline *,
#outline *::before,
#outline *::after {
	box-sizing: border-box;
}

#outline .inner {
	margin-right: auto;
	margin-left: auto;
}

#outline h1,
#outline h2,
#outline h3,
#outline p {
	margin-top: 0;
}


/* タイプ名 */
#outline h1 {
	display: flex;
	align-items: baseline;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.05em;
}

#outline h1 b {
	margin-right: 0.08em;
	color: var(--green);
	font-weight: 300;
	line-height: 0.9;
}


/* 間取り・専有面積 */
#outline .ldk,
#outline .area,
#outline .note,
#outline .room-f {
	margin-bottom: 0;
}

#outline .ldk {
	line-height: 1;
	letter-spacing: 0.04em;
}

#outline .area {
	line-height: 1.25;
}

#outline .area .item,
#outline .area .val {
	display: block;
}
#outline .area .val {
	line-height: 1;
}

#outline .area .val b {
	font-weight: 400;
	letter-spacing: 0.02em;
}

#outline .note {
	line-height: 1.4;
	letter-spacing: 0.08em;
}

#outline .room-f {
	font-weight: 600;
	line-height: 1.4;
}


/*------------------------
間取り画像
------------------------*/
#outline .madori {
	min-width: 0;
}

/* 画像エリア */
#outline .madori .img-wrap,
#outline .madori .img-wrap .img {
	width: 100%;
}

/* 画像は初期状態では非表示 */
#outline .madori .img-wrap .img {
	display: none;
}

/* 選択中の画像のみ表示 */
#outline .madori .img-wrap .img.is-active {
	display: block;
}

/* 間取り画像 */
#outline .madori .img-wrap img {
	display: block;
	width: 100%;
	height: auto;
}


/*------------------------
間取り切り替え
------------------------*/
#outline .madori .con {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 25px;
	margin-top: 15px;
}

/* 切り替え項目 */
#outline .madori .con span {
	cursor: pointer;
	text-decoration: underline;
}

/* 選択中の項目 */
#outline .madori .con span.is-active {
	color: var(--green);
	font-weight: 600;
	text-decoration: none!important;
}

/* 選択中の項目に三角を表示 */
#outline .madori .con span.is-active::before {
	content: "▶";
	margin-right: 0.4em;
	font-size: 0.75em;
}


/* 賃料表 */
#outline table,
#outline tbody,
#outline tr {
	display: block;
	width: 100%;
}

#outline table {
	border-collapse: collapse;
}

#outline th,
#outline td {
	padding: 0;
	border: 0;
	text-align: left;
	font-weight: 400;
	line-height: 1.55;
}

#outline th {
	color: var(--green);
	font-weight: 600;
}


/* POINT・設備見出し */
#outline .group2 h3 {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	margin-bottom: 9px;
	padding: 4px 17px 4px 34px;
	clip-path: polygon(
		0 50%,
		16px 0,
		100% 0,
		100% 100%,
		16px 100%
	);
	background:
		radial-gradient(
			circle at 18px 50%,
			#fff 0,
			#fff 3px,
			transparent 3.5px
		),
		var(--green);
	color: #fff;
	font-weight: 600;
	line-height: 1.3;
}

#outline .group2 .point p,
#outline .group2 .equip p {
	margin-bottom: 0;
	line-height: 1.75;
}

#outline .group2 .equip {
	margin-top: 25px;
}

#outline .group2 .ex {
	margin-bottom: 0;
	color: #555;
	line-height: 1.45;
}

/*------------------------
PC
------------------------*/
@media screen and (min-width: 768px) {
	#outline{
		margin-top: -10px;
		margin-bottom: 60px;
	}
	/* 左にテキスト、右に間取り図 */
	#outline .inner {
		/*
			.inner直下の要素をGridで配置する。
		*/
		display: grid;

		/*
			左のテキストエリアを560px、
			右の間取り図エリアを365pxで固定する。
		*/
		grid-template-columns: 560px 368px;

		/*
			左列と右列を両端に配置し、
			余った横幅を2列の間の空きにする。

			.innerが1000pxの場合：
			1000px - 560px - 340px = 100px
			中央の空きは100pxになる。
		*/
		justify-content: space-between;

		/*
			左側に各テキスト情報、
			右側に間取り図を配置する。
		*/
		grid-template-areas:
			"group1 madori"
			"room   madori"
			"price  madori"
			"group2 madori";

		/*
			Grid内の各要素を上端に揃える。
		*/
		align-items: start;

		width: 100%;
	}


	/*------------------------
	Gridエリアの割り当て
	------------------------*/

	/* タイプ・間取り・専有面積 */
	#outline .group1 {
		grid-area: group1;
		width: 560px;
		min-width: 0;
	}

	/* ワイドキッチンタイプ */
	#outline .room-f {
		grid-area: room;
		width: 560px;
		min-width: 0;
	}

	/* 間取り図 */
	#outline .madori {
		grid-area: madori;
		/*
			右側の間取り図エリアを340pxに固定する。
		*/
		width: 368px;
		min-width: 0;
		/*
			右カラムの上端に揃える。
		*/
		align-self: start;
		padding-top: 8px;
	}
#outline .madori .img-wrap{

	}

	#outline .madori .img-wrap,
	#outline .madori .img {
		width: 100%;
		min-width: 0;
	}

	#outline .madori img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		padding: 25px 5px 25px 30px;
		background: #fff;
	}

	#outline .madori .con {
			font-size: 18px;
			margin-top: 30px;
			font-weight: 600;
	}
	#outline .madori .con span:hover {
		text-decoration: none;
	}

	/* 賃料・管理費・敷金・礼金 */
	#outline table {
		grid-area: price;
		width: 560px;
		min-width: 0;
	}

	/* POINT・設備・注意書き */
	#outline .group2 {
		grid-area: group2;
		width: 560px;
		min-width: 0;
	}


	/*------------------------
	タイプ情報
	------------------------*/

	#outline h1 {
		font-size: 25px;
	}

	#outline h1 b {
		font-size: 64px;
	}

	#outline .ldk {
		margin-top: 14px;
		font-size: 40px;
	}
	#outline .ldk .small span {
		font-size: 20px;
		padding-left: 0.1em;
		vertical-align:.25em;
	}

	#outline .area {
		margin-top: 22px;
		font-size: 15px;
	}

	#outline .area .val {
		margin-top: 4px;
		font-size: 15px;
	}

	#outline .area .val b {
		font-size: 40px;
	}

	#outline .note {
		margin-top: 4px;
		font-size: 16px;
	}

	#outline .room-f {
		margin-top: 20px;
		font-size: 24px;
	}


	/*------------------------
	賃料表
	------------------------*/

	#outline table {
		margin-top: 17px;
	}

	/*
		項目名と内容を2列で表示する。
	*/
	#outline tr {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		row-gap: 4px;
	}

	#outline th,
	#outline td {
		min-width: 0;
		font-size: 16px;
	}


	/*------------------------
	POINT・設備
	------------------------*/

	#outline .group2 {
		margin-top: 32px;
	}

	#outline .group2 h3 {
		font-size: 16px;
	}

	#outline .group2 .point p,
	#outline .group2 .equip p {
		font-size: 15px;
	}

	#outline .group2 .ex {
		margin-top: 20px;
		font-size: 12px;
	}
}
/*------------------------
SP
------------------------*/
@media screen and (max-width: 767px) {
	#outline {
		margin-bottom: 10.7vw;
	}
	#outline .inner {
	}


	/* 上部情報を横並び */
	#outline .group1 {
		padding-bottom: 3.2vw;
		border-bottom: 1px solid var(--dgreen);
	}
		#outline .group1.no-mirror {
		padding-bottom: 5.9vw;
	}

	#outline .group1 .in {
		/*
			内容を横並びにし、
			横幅に収まらない場合は折り返す
		*/
		display: flex;
		flex-wrap: wrap;

		/* 各要素の下端を揃える */
		align-items: flex-end;

		/* 通常時・折り返し時ともに中央寄せ */
		justify-content: center;

		width: fit-content;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
		gap: 10px 6.8vw;
	}
	#outline .group1 .out {
		width: fit-content;
		max-width: 100%;
		align-items: center;
		margin: 0 auto;
	}

#outline .group1 .in > .ldk {
	flex: 0 1 auto;
	min-width: 0;

	line-height: 1;
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
}
	#outline .ldk .small {
	
	vertical-align: baseline;
}

	#outline .ldk .small span {
		display: block;
		margin-top: .3em;
		font-size: 2.67vw;
		line-height: 1;
		white-space: nowrap;
		margin-bottom: -.4em;
		text-align: right;
}
	#outline h1 {
		font-size:4.27vw;
	}

	#outline h1 b {
		font-size:11.2vw;
	}

	#outline .ldk {
		font-size:7.2vw;
	}

	#outline .area {
		justify-self: end;
		font-size: 2.93vw;
	}

	#outline .area .val {
		margin-top: 1px;
		font-size:4.27vw;
		white-space: nowrap;
	}

	#outline .area .val b {
		font-size:7.2vw;
	}

	#outline .note {
		margin-top: 5px;
		font-size: 10px;
	}

	#outline .room-f {
		padding: 4.8vw 0 4.27vw;
		text-align: center;
		font-size: 4.8vw;
	}


	/* SPの間取り画像 */
	#outline .madori .img-wrap {
		width: 64vw;
		margin: 0 auto;
	}
	#outline .madori .img-wrap .img {
		height: 100%;
	}
	#outline .madori .img-wrap img {
			width:100%;
			padding: 4vw 2.67vw 5.33vw 5.33vw;
			height:auto;
			object-fit: contain;
			margin: auto;
			background: #fff;
	}

	#outline .madori .con {
		gap: 8px 12px;
		margin-top: 12px;
	}

	#outline .floor-tab {
		font-size: 12px;
	}


/* 賃料情報を2列表示 */
#outline table {
	margin-top: 6.133vw;
}

#outline tr {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	/*
		1行目：賃料・管理費の見出し
		2行目：賃料・管理費の内容
		3行目：線のない余白
		4行目：敷金・礼金の見出し
		5行目：敷金・礼金の内容
	*/
	grid-template-rows:
		auto
		auto
		2.67vw
		auto
		auto;

	row-gap: 0;
}


/* 上段の中央線 */
#outline tr::before {
	content: "";
	grid-column: 2;
	grid-row: 1 / 3;

	/* 2列目の左端に線を配置 */
	justify-self: start;
	align-self: stretch;

	border-left: 1px dotted var(--dgreen);
	pointer-events: none;
}


/* 下段の中央線 */
#outline tr::after {
	content: "";
	grid-column: 2;
	grid-row: 4 / 6;

	/* 2列目の左端に線を配置 */
	justify-self: start;
	align-self: stretch;

	border-left: 1px dotted var(--dgreen);
	pointer-events: none;
}


#outline th,
#outline td {
	position: relative;
	z-index: 1;
	min-width: 0;
	text-align: center;
}

#outline th {
	line-height: 1.3;
}


/*------------------------
賃料
------------------------*/
#outline th:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

#outline td:nth-child(2) {
	grid-column: 1;
	grid-row: 2;
}


/*------------------------
管理費
------------------------*/
#outline th:nth-child(3) {
	grid-column: 2;
	grid-row: 1;
}

#outline td:nth-child(4) {
	grid-column: 2;
	grid-row: 2;
}


/*------------------------
敷金
------------------------*/
#outline th:nth-child(5) {
	grid-column: 1;
	grid-row: 4;
}

#outline td:nth-child(6) {
	grid-column: 1;
	grid-row: 5;
}


/*------------------------
礼金
------------------------*/
#outline th:nth-child(7) {
	grid-column: 2;
	grid-row: 4;
}

#outline td:nth-child(8) {
	grid-column: 2;
	grid-row: 5;
}

/*------------------------
POINT・設備
------------------------*/
	#outline .group2 {
		margin-top: 7.47vw;
	}

	#outline .group2 h3 {
		min-height: 7.47vw;
		margin-bottom: 2.93vw;
		padding: 1.07vw 3.73vw 1.07vw 8.53vw;
		font-size: 3.73vw;
	}

	#outline .group2 .point p,
	#outline .group2 .equip p {
		font-size: 3.47vw;
		line-height: 1.75;
	}

	#outline .group2 .equip {
		margin-top: 7.2vw;
	}

	#outline .group2 .ex {
		margin-top: 7.2vw;
		font-size: 2.67vw;
	}
}

/*------------------------
専用庭・ウッドデッキ 共通
------------------------*/
#garden {
}

#garden .inner {
	margin-right: auto;
	margin-left: auto;
	border: 1px solid var(--green);
	background: #fff;
}

#garden .text-area h2 {
	color: var(--green);
	font-weight: 600;
	line-height: 1.4;
}

#garden .text-area h2 span {
	display: block;
	font-weight: 600;
}


/* 写真エリア */
#garden .img-wrap {
	display: grid;
}

#garden .img {
	min-width: 0;
}


/* 拡大表示リンク */
#garden .garden-lightbox {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	cursor: zoom-in;
}


/* 写真 */
#garden .garden-lightbox img {
	display: block;
	width: 100%;
	height: auto;
	transition:
		transform 0.4s ease,
		filter 0.4s ease;
}


/* マウスを乗せたとき */
#garden .garden-lightbox:hover img {
	transform: scale(1.025);
	filter: brightness(0.92);
}


/* キーボード操作時 */
#garden .garden-lightbox:focus-visible {
	outline: 3px solid var(--green);
	outline-offset: 3px;
}


/* 虫眼鏡マーク */
#garden .zoom-icon {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	transition:
		background-color 0.3s ease,
		transform 0.3s ease;
}

#garden .zoom-icon svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* 虫眼鏡マークのホバー */
#garden .garden-lightbox:hover .zoom-icon {
	background: var(--green);
	transform: scale(1.08);
}


/*------------------------
GLightbox調整
------------------------*/

/* 背景色 */
.goverlay {
	background: rgba(0, 0, 0, 0.9);
}

/* 拡大画像 */
.glightbox-clean .gslide-image img {
	max-height: 90vh;
}

/* 閉じる・前後ボタン */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
	background-color: rgba(0, 0, 0, 0.6);
}

/* 写真タイトル */
.glightbox-clean .gslide-title {
	margin-bottom: 0;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
}


/*------------------------
PC
------------------------*/
@media screen and (min-width: 768px) {

	#garden .inner {
		padding: 36px 48px 38px;
	}


	/*
		左に見出し、
		右に説明文を配置
	*/
	#garden .text-area {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}

	#garden .text-area h2 {
		font-size: 25px;
	}

	#garden .text-area h2 span {
		margin-top: 2px;
		font-size: 17px;
	}

	#garden .text-area p {
		padding-top: 3px;
		font-size: 16px;
		line-height: 1.8;
	}


	/*
		写真を横2列にする
	*/
	#garden .img-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
		margin-top: 32px;
	}


	/*
		2枚の写真の高さを揃える
	*/
	#garden .garden-lightbox,
	#garden .garden-lightbox img {
		height: 310px;
	}

	#garden .garden-lightbox img {
		object-fit: cover;
	}
}


/*------------------------
SP
------------------------*/
@media screen and (max-width: 767px) {
	#garden{
		margin-bottom: 10.67vw;
	}
	#garden .inner {
		padding:5.33vw;
	}


	/* テキストを縦並びにする */
	#garden .text-area {
		display: block;
	}

	#garden .text-area h2 {
		font-size:5.33vw;
	}

	#garden .text-area h2 span {
		margin-top: 1px;
		font-size: 3.74vw;
	}

	#garden .text-area p {
		margin-top:2.67vw;
		font-size:3.2vw;
		line-height: 1.67;
	}


	/* 写真を縦1列にする */
	#garden .img-wrap {
		grid-template-columns: 1fr;
		gap: 2.67vw;
		margin-top:3.74vw;
	}


	/* SPの虫眼鏡マーク */
	#garden .zoom-icon {
		right: 9px;
		bottom: 9px;
		width: 36px;
		height: 36px;
	}

	#garden .zoom-icon svg {
		width: 19px;
		height: 19px;
	}
}

/*------------------------
ギャラリー共通
------------------------*/
#gallery {
}

#gallery *,
#gallery *::before,
#gallery *::after {
	box-sizing: border-box;
}

/* ギャラリー全体の横幅 */
#gallery .inner {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}


/*------------------------
GALLERY見出し
------------------------*/
#gallery h2 {
	margin: 0;
	background: var(--green);
	color: #fff;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.08em;
}


/*------------------------
ギャラリー全体
------------------------*/
#gallery .gallery-wrap {
	overflow: hidden;
}

/* figureの初期余白を解除 */
#gallery .gallery-figure {
	margin: 0;
	width: 100%;
	height: 100%;
}


/*------------------------
メイン画像
------------------------*/
#gallery .gallery-main {
	overflow: hidden;
}

/* メイン画像の表示領域 */
#gallery .gallery-main-img {
	width: 100%;
	overflow: hidden;
	background: #fff;
}

/* GLightboxを開くリンク */
#gallery .gallery-lightbox {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: zoom-in;
}

/* メイン画像 */
#gallery .gallery-main-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition:
		transform 0.4s ease,
		filter 0.4s ease;
}

/* マウスを乗せたとき */
#gallery .gallery-lightbox:hover img {
	transform: scale(1.025);
	filter: brightness(0.94);
}

/* キーボード操作時のフォーカス */
#gallery .gallery-lightbox:focus-visible {
	outline: 3px solid var(--dgreen);
	outline-offset: -3px;
}

/* メイン画像下のキャプション */
#gallery .gallery-caption {
	text-align: center;
	font-weight: 500;
	line-height: 1.5;
}


/*------------------------
拡大表示アイコン
------------------------*/
#gallery .zoom-icon {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.58);
	pointer-events: none;
	transition:
		background-color 0.3s ease,
		transform 0.3s ease;
}

/* 虫眼鏡SVG */
#gallery .zoom-icon svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ホバー時の虫眼鏡 */
#gallery .gallery-lightbox:hover .zoom-icon {
	background: var(--dgreen);
	transform: scale(1.06);
}


/*------------------------
サムネイル
------------------------*/
#gallery .gallery-thumbs {
	width: 100%;
	overflow: hidden;
}

/* 各サムネイル */
#gallery .gallery-thumbs .swiper-slide {
	position: relative;
	height: auto;
	overflow: hidden;
	background: #eee;
	cursor: pointer;
	transition:
		opacity 0.3s ease,
		border-color 0.3s ease;
}

/* サムネイル画像 */
#gallery .gallery-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1.5;
	object-fit: cover;
}

/* サムネイルのホバー */
#gallery .gallery-thumbs .swiper-slide:hover {
	opacity: 0.78;
}

/* 現在表示中のサムネイル */
#gallery .gallery-thumbs .swiper-slide-thumb-active {
	opacity: 1;
}
#gallery .gallery-thumbs .swiper-slide-thumb-active:before {
	content:'';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	inset: 0;
	border: 3px solid var(--green);
}


/*------------------------
GLightbox調整
------------------------*/

/* 拡大表示時の背景 */
.goverlay {
	background: rgba(0, 0, 0, 0.9);
}

/* 拡大画像 */
.glightbox-clean .gslide-image img {
	max-width: 94vw;
	max-height: 90vh;
}

/* 画像タイトル */
.glightbox-clean .gslide-title {
	margin-bottom: 0;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
}

/* 閉じる・前後ボタン */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
	background-color: rgba(0, 0, 0, 0.6);
}


/*------------------------
PC
------------------------*/
@media screen and (min-width: 768px) {

	#gallery {
		margin: 80px 0 120px;
	}

	/* GALLERY見出し */
	#gallery h2 {
		padding: 12px 24px;
		font-size: 23px;
	}

	/* 見出し下の白いエリア */
	#gallery .gallery-wrap {
		padding: 28px 0 26px;
	}

	/* メイン画像を中央配置 */
	#gallery .gallery-main-img {
		min-height:380px;
		height: 58.5svh;
	}

	/* キャプション */
	#gallery .gallery-caption {
		margin-top: 16px;
		font-size: 14px;
	}

	/* サムネイル全体 */
	#gallery .gallery-thumbs {
		margin-top: 15px;
	}

	.gallery-thumbs .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 12px;
		transform: none !important;
	}

	.gallery-thumbs .swiper-slide {
		width: auto !important;
		height: auto;
		margin: 0 !important;
	}


	/* PCの虫眼鏡 */
	#gallery .zoom-icon {
		right: 14px;
		bottom: 14px;
		width: 42px;
		height: 42px;
	}

	#gallery .zoom-icon svg {
		width: 22px;
		height: 22px;
	}
}


/*------------------------
SP
------------------------*/
@media screen and (max-width: 767px) {

	#gallery {
		margin-bottom: 16vw;
	}
	#gallery .inner {
	}

	/* GALLERY見出し */
	#gallery h2 {
		padding: 2.9vw 5.33vw 3.6vw;
		font-size: 5.87vw;
		margin: 0 -5.33vw;
		margin-bottom: 3.2vw;
	}
	#gallery .gallery-wrap {
		margin: 0 -1.6vw;
	}

	/* メイン画像 */
		#gallery .gallery-main-img {
			width: 100%;
			height:43.5svh;
		}

	/* キャプション */
	#gallery .gallery-caption {
		margin-top:3.2vw;
	}

	/* サムネイル */
	#gallery .gallery-thumbs {
		margin:6.4vw auto 0;
	}

#gallery .gallery-thumbs .swiper-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.6vw 1.2vw;
		width: 100%;
		height: auto;
		transform: none !important;
	}

	#gallery .gallery-thumbs .swiper-slide {
		flex: 0 0 calc((100% - 6vw) / 6);
		width: calc((100% - 6vw) / 6) !important;
		height: auto;
		margin: 0 !important;
		border-width: 1px;
	}

	/* サムネイル画像 */
	#gallery .gallery-thumbs img {
		display: block;
		width: 100%;
		aspect-ratio: 3 / 2.1;
		object-fit: cover;
	}

	/* SPの虫眼鏡 */
	#gallery .zoom-icon {
		right: 4vw;
		bottom: 4vw;
		width: 36px;
		height: 36px;
	}

	#gallery .zoom-icon svg {
		width: 19px;
		height: 19px;
	}
}

/*------------------------
header
------------------------*/
/* PC */
@media screen and (min-width:768px) {
}
/* SP */
@media screen and (max-width:767px) {
}