@charset "UTF-8";






/* fv
----------------------------*/
#fv {
	padding-top: 120px;
	overflow: hidden;
}
	#fv .swiper-container {
		padding: 0 0 40px 0;
		position: relative;
	}
		#fv .swiper-container a.swiper-slide {
			display: block;
		}
			#fv .swiper-container a.swiper-slide .video-wrap {
				display: block;
				width: 100%;
				height: auto;
				aspect-ratio: 16 / 10.67;
			}
			#fv .swiper-container a.swiper-slide .video-wrap video {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

		#fv .swiper-container .swiper-pagination {
			bottom: 0;
		}
			#fv .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
				border: solid 1px #524D50;
				opacity: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#fv .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #524D50;
				opacity: 1;
			}
			.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
				margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 12px);
			}
@media screen and (max-width: 767px) {
	#fv {
		padding-top: 90px;
	}
		#fv .swiper-container a.swiper-slide .video-wrap {
			aspect-ratio: 12.8 / 16;
		}
}






/* message
----------------------------*/
#message {
	text-align: center;
}
	#message h2 {
		font-size: 4.2rem;
		font-weight: 500;
		line-height: 1;
		margin-bottom: 50px;
	}

	#message h3 {
		font-size: 2.2rem;
		font-weight: 500;
		line-height: 1.4em;
		margin-bottom: 40px;
	}

	#message .txt {
		line-height: 2.2em;
	}
@media screen and (max-width: 767px) {
	#message h2 {
		font-size: 3.2rem;
		margin-bottom: 30px;
	}

	#message h3 {
		font-size: 1.8rem;
		margin-bottom: 30px;
	}

	#message .txt {
		letter-spacing: 0;
	}
}






/* top-title
----------------------------*/
.top-title {
	text-align: center;
	margin-bottom: 40px;
}
	.top-title h2 {
		font-size: 4.4rem;
		font-weight: 500;
		line-height: 1;
	}
@media screen and (max-width: 1024px) {
	.top-title {
		margin-bottom: 35px;
	}
		.top-title h2 {
			font-size: 4.0rem;
		}
}
@media screen and (max-width: 767px) {
	.top-title {
		margin-bottom: 30px;
	}
		.top-title h2 {
			font-size: 2.8rem;
		}
}






/* topics
----------------------------*/
#topics {
	width: 100%;
	background: #F9F7F6;
	overflow: hidden;
}
	#topics .swiper-container {
		padding: 0 0 40px 0;
		position: relative;
	}
		#topics .swiper-container .swiper-slide .txt {
			margin-bottom: 15px;
		}

		#topics .swiper-container .swiper-pagination {
			bottom: 0;
		}
			#topics .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
				border: solid 1px #524D50;
				opacity: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#topics .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #524D50;
				opacity: 1;
			}
@media screen and (max-width: 767px) {
	#topics .swiper-container .swiper-slide .txt {
		margin-bottom: 12px;
	}
}






/* item-area
----------------------------*/
.item-area ul.tab li {
	margin-right: 3%;
	border-bottom: solid 1px #ddd;
	font-size: 1.8rem;
	line-height: 1.3em;
	color: #C3C3C3;
	cursor: pointer;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
.item-area ul.tab li:nth-last-child(1) {
	margin-right: 0;
}
.item-area ul.tab li.select {
	border-bottom: solid 1px #221F1D;
	color: #221F1D;
}

.item-area .content {
	margin-top: 50px;
}
	.item-area .content .cell.hide {
		display: none;
	}
		.item-area .content .cell .item-list a.linkbox {
			display: block;
			width: 22.75%;
			margin-right: 3%;
			margin-bottom: 60px;
		}
		.item-area .content #ranking .item-list a.linkbox {
			position: relative;
		}
		.item-area .content #ranking .item-list a.linkbox:before {
			content: '';
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 60px 60px 0 0;
			border-color: #525053 transparent transparent transparent;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(1):before {
			border-color: #aa9a79 transparent transparent transparent;
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(2):before {
			border-color: #9b9a98 transparent transparent transparent;
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(3):before {
			border-color: #ba9784 transparent transparent transparent;
		}

		.item-area .content #ranking .item-list a.linkbox:after {
			content: '';
			width: 36px;
			height: 60px;
			font-size: 2.8rem;
			font-family: "Cormorant Infant", serif;
    		font-weight: 500;
			line-height: 40px;
			text-align: center;
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(1):after {
			content: '1';
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(2):after {
			content: '2';
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(3):after {
			content: '3';
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(4):after {
			content: '4';
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(5):after {
			content: '5';
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(6):after {
			content: '6';
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(7):after {
			content: '7';
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(8):after {
			content: '8';
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(9):after {
			content: '9';
		}
		.item-area .content #ranking .item-list a.linkbox:nth-child(10):after {
			content: '10';
		}
		.item-area .content .cell .item-list a.linkbox:nth-child(4n) {
			margin-right: 0;
		}
			.item-area .content .cell .item-list a.linkbox .text {
				padding-top: 15px;
				text-align: center;
			}
				.item-area .content .cell .item-list a.linkbox .text h3 {
					font-size: 1.4rem;
					line-height: 1.5em;
					margin-bottom: 5px;
				}

				.item-area .content .cell .item-list a.linkbox .text .price {
					font-size: 1.4rem;
				}
					.item-area .content .cell .item-list a.linkbox .text .price .tax {
						font-size: 1.0rem;
					}
@media screen and (max-width: 1024px) {
	.item-area ul.tab li {
		font-size: 1.6rem;
	}

	.item-area .content {
		margin-top: 50px;
	}
		.item-area .content .cell .item-list a.linkbox {
			margin-bottom: 50px;
		}
}
@media screen and (max-width: 767px) {
	.item-area ul.tab li {
		margin-right: 5%;
		font-size: 1.3rem;
	}

	.item-area .content {
		margin-top: 30px;
	}
		.item-area .content .cell.hide {
			display: none;
		}
			.item-area .content .cell .item-list a.linkbox {
				width: 48%;
				margin-right: 4%;
				margin-bottom: 30px;
			}
			.item-area .content #ranking .item-list a.linkbox:before {
				border-width: 50px 50px 0 0;
			}

			.item-area .content #ranking .item-list a.linkbox:after {
				width: 30px;
				height: 50px;
				font-size: 2.0rem;
				line-height: 30px;
			}
			.item-area .content .cell .item-list a.linkbox:nth-child(2n) {
				margin-right: 0;
			}
				.item-area .content .cell .item-list a.linkbox .text {
					padding-top: 12px;
				}
					.item-area .content .cell .item-list a.linkbox .text h3 {
						font-size: 1.3rem;
					}

					.item-area .content .cell .item-list a.linkbox .text .price {
						font-size: 1.3rem;
					}
						.item-area .content .cell .item-list a.linkbox .text .price .tax {
							font-size: 1.0rem;
						}
}






/* series
----------------------------*/
#series {
	overflow: hidden;
}
	#series .side-scroll-list .side-scroll-item {
		background: #F8F8F8;
		margin-bottom: 30px;
	}
	#series .side-scroll-list .side-scroll-item:nth-last-child(1) {
		margin-bottom: 0;
	}
		#series .side-scroll-list .side-scroll-item a.linkbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 20px 20px 0;
		}
			#series .side-scroll-list .side-scroll-item a.linkbox .pht {
				width: 40%;
			}

			#series .side-scroll-list .side-scroll-item a.linkbox .text {
				width: 60%;
				padding: 0 6%;
			}
				#series .side-scroll-list .side-scroll-item a.linkbox .text .head {
					font-size: 1.2rem;
					line-height: 1;
					color: #403C3E;
					margin-bottom: 20px;
				}

				#series .side-scroll-list .side-scroll-item a.linkbox .text h3 {
					font-size: 3.0rem;
					line-height: 1.0em;
					margin-bottom: 25px;
				}
					#series .side-scroll-list .side-scroll-item a.linkbox .text h3 span {
						font-size: 2.0rem;
					}

				#series .side-scroll-list .side-scroll-item a.linkbox .text .txt {
					margin-bottom: 35px;
				}

				#series .side-scroll-list .side-scroll-item a.linkbox .text .more {
					display: inline-block;
					background: url("https://chut.itembox.cloud/item/common/img/icon_arrow_black.svg?v=1") no-repeat right center / 13px;
					padding-right: 20px;
					font-size: 1.6rem;
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#series .side-scroll-list .side-scroll-item a.linkbox:hover .text .more {
					padding-right: 25px;
				}

	#series .btn {
		margin-top: 40px;
	}
@media screen and (max-width: 767px) {
	#series .side-scroll-list .side-scroll-item {
		margin-bottom: 20px;
	}
		#series .side-scroll-list .side-scroll-item a.linkbox {
			display: block;
			padding: 20px;
		}
			#series .side-scroll-list .side-scroll-item a.linkbox .pht {
				width: 100%;
			}

			#series .side-scroll-list .side-scroll-item a.linkbox .text {
				width: 100%;
				padding: 15px 10px 25px 10px;
			}
				#series .side-scroll-list .side-scroll-item a.linkbox .text .head {
					font-size: 1.0rem;
					margin-bottom: 10px;
				}

				#series .side-scroll-list .side-scroll-item a.linkbox .text h3 {
					font-size: 2.2rem;
					margin-bottom: 15px;
				}
					#series .side-scroll-list .side-scroll-item a.linkbox .text h3 span {
						font-size: 1.4rem;
					}

				#series .side-scroll-list .side-scroll-item a.linkbox .text .txt {
					margin-bottom: 15px;
				}

				#series .side-scroll-list .side-scroll-item a.linkbox .text .more {
					font-size: 1.4rem;
				}
				#series .side-scroll-list .side-scroll-item a.linkbox:hover .text .more {
					padding-right: 20px;
				}

	#series .btn {
		margin-top: 30px;
	}
}






/* recommend
----------------------------*/
#recommend {
	width: 100%;
	overflow: hidden;
}
	#recommend .swiper-container {
		padding: 0 0 50px 0;
		position: relative;
	}
		#recommend .swiper-container .swiper-slide .text {
			padding-top: 15px;
			text-align: center;
		}
			#recommend .swiper-container .swiper-slide .text h3 {
				font-size: 1.4rem;
				line-height: 1.5em;
				margin-bottom: 5px;
			}

			#recommend .swiper-container .swiper-slide .text .price {
				font-size: 1.4rem;
			}
				#recommend .swiper-container .swiper-slide .text .price .tax {
					font-size: 1.0rem;
				}

		#recommend .swiper-container .swiper-pagination {
			bottom: 0;
		}
			#recommend .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
				border: solid 1px #524D50;
				opacity: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#recommend .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #524D50;
				opacity: 1;
			}
@media screen and (max-width: 1024px) {
	#recommend .swiper-container {
		padding: 0 0 40px 0;
	}
}
@media screen and (max-width: 767px) {
	#recommend .swiper-container .swiper-slide .text {
		padding-top: 12px;
	}
		#recommend .swiper-container .swiper-slide .text h3 {
			font-size: 1.3rem;
		}

		#recommend .swiper-container .swiper-slide .text .price {
			font-size: 1.3rem;
		}
}






/* guide
----------------------------*/
#guide {
	width: 100%;
	background: #F9F7F6;
	overflow: hidden;
}
	#guide .swiper-container {
		padding: 0 0 40px 0;
		position: relative;
	}
		#guide .swiper-container .swiper-slide {
			display: block;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#guide .swiper-container .swiper-slide:hover {
			opacity: 0.6;
		}
			#guide .swiper-container .swiper-slide .en {
				margin-bottom: 15px;
			}

			#guide .swiper-container .swiper-slide .box {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 30px;
				background: #fff;
			}
				#guide .swiper-container .swiper-slide .box .icon {
					width: 30%;
				}

				#guide .swiper-container .swiper-slide .box .text {
					width: 70%;
					padding-left: 30px;
				}
					#guide .swiper-container .swiper-slide .box .text h3 {
						font-size: 2.4rem;
						font-weight: 500;
						line-height: 1.3em;
						margin-bottom: 8px;
					}

		#guide .swiper-container .swiper-pagination {
			bottom: 0;
		}
			#guide .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
				border: solid 1px #524D50;
				opacity: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#guide .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #524D50;
				opacity: 1;
			}
@media screen and (max-width: 1024px) {
	#guide .swiper-container .swiper-slide .box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 25px;
		background: #fff;
	}
		#guide .swiper-container .swiper-slide .box .icon {
			width: 25%;
		}

		#guide .swiper-container .swiper-slide .box .text {
			width: 75%;
			padding-left: 25px;
		}
			#guide .swiper-container .swiper-slide .box .text h3 {
				font-size: 2.2rem;
				margin-bottom: 8px;
			}
}
@media screen and (max-width: 767px) {
	#guide .swiper-container .swiper-slide .en {
		margin-bottom: 12px;
	}
	
	#guide .swiper-container .swiper-slide .box {
		display: block;
		padding: 40px 15px;
	}
		#guide .swiper-container .swiper-slide .box .icon {
			width: 50%;
			margin: 0 auto;
		}

		#guide .swiper-container .swiper-slide .box .text {
			width: 100%;
			padding-top: 20px;
			padding-left: 0;
			text-align: center;
		}
			#guide .swiper-container .swiper-slide .box .text h3 {
				font-size: 1.8rem;
				margin-bottom: 10px;
			}
}






/* news
----------------------------*/
#news .news-list a.linkbox {
	display: block;
	width: 23.5%;
	margin-right: 2%;
	background: #fff url("https://chut.itembox.cloud/item/common/img/icon_arrow_black.svg?v=1") no-repeat right 8px bottom 8px / 12px;
	border: solid 1px #ddd;
	padding: 30px;
}
#news .news-list a.linkbox:nth-child(4n) {
	margin-right: 0;
}
#news .news-list a.linkbox:hover {
	background: #F9F7F6 url("https://chut.itembox.cloud/item/common/img/icon_arrow_black.svg?v=1") no-repeat right 8px bottom 8px / 12px;
	border: solid 1px #F9F7F6;
}
	#news .news-list a.linkbox time {
		display: block;
		font-size: 1.4rem;
		line-height: 1;
		margin-bottom: 17px;
	}

#news .link-more {
	position: absolute;
	top: 20px;
	right: 0;
}
	#news .link-more a {
		display: block;
		font-size: 1.2rem;
		line-height: 1;
	}
	#news .link-more a:hover {
		opacity: 0.6;
	}
@media screen and (max-width: 1200px) {
	#news .link-more {
		right: 5%;
	}
}
@media screen and (max-width: 1024px) {
	#news .news-list a.linkbox {
		padding: 25px;
	}
		#news .news-list a.linkbox time {
			font-size: 1.3rem;
			margin-bottom: 15px;
		}

	#news .link-more {
		top: 25px;
	}
		#news .link-more a {
			font-size: 1.1rem;
		}
}
@media screen and (max-width: 767px) {
	#news .news-list {
		display: block;
	}
		#news .news-list a.linkbox {
			width: 100%;
			margin: 0 0 15px 0;
			padding: 25px;
		}
			#news .news-list a.linkbox time {
				font-size: 1.3rem;
				margin-bottom: 15px;
			}

	#news .link-more {
		margin-top: 30px;
		position: static;
	}
		#news .link-more a {
			text-align: center;
		}
}






/* info
----------------------------*/
#info {
	display: none;
}
.modaal-outer-wrapper {
	pointer-events: none;
}
	.modaal-wrapper h3 {
		text-align: center;
	}
	.modaal-wrapper button {
		display: none;
	}

	.modaal-wrapper .txt {
		text-align: center;
		margin-top: 20px;
	}
	.modaal-wrapper a.txtlink {
		display: block;
		pointer-events: auto;
		text-align: center;
	}

	.modaal-wrapper .modaal-close {
		position: static;
		margin-top: 30px;
		margin-bottom: 20px;
	}
		.modaal-wrapper .modaal-close a {
			background: #221F1D none;
			pointer-events: auto;
		}
		.modaal-wrapper .modaal-close a:hover {
			background: #488299;
		}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	display: none;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}






/* news
----------------------------*/
#frv-all-reviews-area .frv-c-reviewCards__cards {
    overflow-y: scroll;
    height: 400px;
    padding: 15px;
    background: #F9F7F6;
    border: none;
}
#frv-all-reviews-area .frv-c-reviewCard {
    flex-shrink: 0;
    border: none;
    background: #fff;
}






/* ugc-area
----------------------------*/
#ugc-area {
	overflow: hidden;
}
#ugc-area .swiper {
	overflow: visible;
}

#ugc-area .ugc-slider{
	width:100%;
	position:relative;
	padding-bottom:50px; /* ページネーション分の余白 */
}
	#ugc-area .ugc-slider .swiper-wrapper{
		align-items:stretch;
	}
	#ugc-area .ugc-slider .swiper-slide{
		height:auto;
		cursor:pointer;
	}
		#ugc-area .ugc-slider .swiper-slide .photo{
			display:block;
			width:100%;
			overflow:hidden;
			position:relative;
		}
			#ugc-area .ugc-slider .swiper-slide .photo img{
				width:100%;
				height:100%;
				object-fit:cover;
				display:block;
			}
			#ugc-area .ugc-slider .swiper-slide .photo .img-over {
				overflow: hidden;
			}
				#ugc-area .ugc-slider .swiper-slide .photo .img-over img {
					-moz-transition: -moz-transform 0.2s linear;
					-webkit-transition: -webkit-transform 0.2s linear;
					-o-transition: -o-transform 0.2s linear;
					-ms-transition: -ms-transform 0.2s linear;
					transition: transform 0.2s linear;
				}
				#ugc-area .ugc-slider .swiper-slide:hover .img-over img {
					-webkit-transform: scale(1.05);
					-moz-transform: scale(1.05);
					-o-transform: scale(1.05);
					-ms-transform: scale(1.05);
					transform: scale(1.05);
				}

		#ugc-area .ugc-slider .swiper-slide .add-btn{
			width:32px;
			height:32px;
			border-radius:50%;
			background:rgba(255,255,255,0);
			border: solid 2px #fff;
			display:flex;
			justify-content:center;
			align-items:center;
			position:absolute;
			top:12px;
			right:12px;
			cursor:pointer;
			transition:0.3s;
		}
		#ugc-area .ugc-slider .swiper-slide:hover .add-btn{
			background:#fff;
		}
		#ugc-area .ugc-slider .swiper-slide:hover .add-btn svg path{
			stroke:#524D50;
		}
		#ugc-area .ugc-slider .swiper-slide .add-btn svg{
			width:16px;
			height:16px;
		}
		#ugc-area .ugc-slider .swiper-slide .add-btn svg path{
			stroke:#fff;
			transition:0.3s;
		}

		/* モーダール用のデータブロックは非表示（[hidden]属性で制御） */
		#ugc-area .ugc-slider .swiper-slide .ugc-detail{
			display:none;
		}

	#ugc-area .ugc-slider .swiper-pagination{
		bottom:0;
	}
		#ugc-area .ugc-slider .swiper-pagination-bullet{
			width:8px;
			height:8px;
			border: solid 1px #524D50;
			background:#fff;
			opacity:1;
		}
		#ugc-area .ugc-slider .swiper-pagination-bullet-active{
			background:#524D50;
		}
@media screen and (max-width:767px){

	#ugc-area .ugc-slider{
		padding-bottom:40px;
	}
		#ugc-area .ugc-slider .swiper-slide .add-btn{
			width:20px;
			height:20px;
			top:8px;
			right:8px;
			border: solid 1px #fff;
		}
			#ugc-area .ugc-slider .swiper-slide .add-btn svg{
				width:10px;
				height:10px;
			}
}


/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* UGCモーダル */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#ugc-modal{
	display:none;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:200;
}
	#ugc-modal.active{
		display:block;
	}
	#ugc-modal .bg{
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.7);
		display:flex;
		justify-content:center;
		align-items:center;
	}
		#ugc-modal .modal-box{
			width:880px;
			max-width:100%;
			background:#fff;
			position:relative;
			padding:50px 40px 50px 50px;
		}
			#ugc-modal .modal-box .close-btn{
				width:36px;
				height:36px;
				border-radius:50%;
				border:solid 2px #535053;
				display:flex;
				justify-content:center;
				align-items:center;
				position:absolute;
				top:30px;
				right:30px;
				cursor:pointer;
				background:#fff;
				transition:0.3s;
				z-index:2;
			}
			#ugc-modal .modal-box .close-btn:hover{
				background:#535053;
				border-color:#535053;
			}
			#ugc-modal .modal-box .close-btn:hover svg path{
				stroke:#fff;
			}
			#ugc-modal .modal-box .close-btn svg{
				width:14px;
				height:14px;
			}
			#ugc-modal .modal-box .close-btn svg path{
				stroke:#535053;
				transition:0.3s;
			}

			#ugc-modal .modal-inner{
				display:flex;
				justify-content:space-between;
				gap:40px;
				height:100%;
			}

			/* 左：写真ギャラリー */
			#ugc-modal .gallery{
				width:300px;
				flex-shrink:0;
			}
				#ugc-modal .gallery .ugc-main-photo{
					width:100%;
					overflow:hidden;
					background:#F9F7F6;
					margin-bottom:10px;
				}
					#ugc-modal .gallery .ugc-main-photo img{
						width:100%;
						height:100%;
						object-fit:cover;
						display:block;
					}

				
				#ugc-modal .gallery .thumb-swiper{
					width:100%;
				}
					#ugc-modal .gallery .thumb-list li{
						width:60px;
						flex-shrink:0;
						cursor:pointer;
						border:solid 2px transparent;
						transition:0.3s;
						margin-right: 8px;
					}
					#ugc-modal .gallery .thumb-list li.active{
						border-color:#2E2A28;
					}
						#ugc-modal .gallery .thumb-list li img{
							width:100%;
							height:100%;
							object-fit:cover;
							display:block;
						}

			/* 右：ユーザー情報＋商品リスト */
			#ugc-modal .info{
				flex:1;
				min-width:0;
				max-height:100%;
				overflow-y:auto;
			}
				#ugc-modal .info .user{
					margin-bottom:20px;
				}
					#ugc-modal .info .user .u-name{
						font-size:1.6rem;
						font-weight:500;
						margin-bottom:2px;
					}
					#ugc-modal .info .user .u-height{
						font-size:1.3rem;
					}

				/* 商品リスト：スライド側の .ugc-items をそのままモーダルへ複製して使う */
				#ugc-modal .info .ugc-items{
					max-height:370px;
					padding-right: 10px;
					overflow-y: scroll;
				}
				::-webkit-scrollbar {
					width: 5px;
					height: 5px;
				}
				::-webkit-scrollbar-track {
					background: none;
				}
				::-webkit-scrollbar-thumb {
					background: #958E8F;
					border-radius: 2.5px;
				}
					#ugc-modal .info .ugc-items li{
						display:flex;
						background: #F9F7F6;
						gap:20px;
						margin-bottom: 15px;
						padding:20px;
					}
					#ugc-modal .info .ugc-items li:nth-last-child(1){
						margin-bottom: 0;
					}
						#ugc-modal .info .ugc-items li img{
							width:130px;
							flex-shrink:0;
							object-fit:cover;
							background:#F9F7F6;
						}
						#ugc-modal .info .ugc-items li .txt{
							flex:1;
							min-width:0;
						}
							#ugc-modal .info .ugc-items li .txt .name{
								font-size:1.4rem;
								font-weight:500;
								line-height:1.4em;
								margin-bottom:8px;
							}
							#ugc-modal .info .ugc-items li .txt .spec{
								font-size:1.2rem;
								line-height:1.6em;
								margin-bottom:1px;
							}
							#ugc-modal .info .ugc-items li .txt .price{
								font-size:1.4rem;
								font-weight:500;
								margin-bottom:12px;
							}
							#ugc-modal .info .ugc-items li .txt .btn-check{
								display:inline-block;
								min-width:72px;
								height:24px;
								line-height:22px;
								text-align:center;
								font-size:1.2rem;
								border:solid 1px #221F1D;
								color:#221F1D;
								background:#fff;
								transition:0.3s;
							}
							#ugc-modal .info .ugc-items li .txt .btn-check:hover{
								background:#221F1D;
								color:#fff;
							}
@media screen and (max-width:767px){
	#ugc-modal .bg{
		padding:0;
	}
		#ugc-modal .modal-box{
			width:90%;
			max-height:100vh;
			max-height:100dvh;
			padding:0;
		}
			#ugc-modal .modal-inner{
				display:block;
				overflow-y:auto;
				max-height:calc(100vh - 40px);
				max-height:calc(100dvh - 40px);
				padding: 20px;
				position: relative;
			}
	
			#ugc-modal .modal-box .close-btn{
				top: 20px;
				right: 20px;
			}

			#ugc-modal .gallery{
				width:100%;
				margin-top:75px;
				margin-bottom:40px;
			}
				#ugc-modal .gallery .thumb-list{
					display:flex;
					flex-wrap:wrap;
 					justify-content: center;
					gap:15px;
					padding-top: 10px;
				}
					#ugc-modal .gallery .thumb-list li{
						width:8px;
						height: 8px;
						border-radius: 50%;
						cursor:pointer;
						background:#fff;
						border:solid 1px #2E2A28;
						transition:0.3s;
					}
					#ugc-modal .gallery .thumb-list li.active{
						background:#2E2A28;
					}
						#ugc-modal .gallery .thumb-list li img{
							display: none;
						}

			#ugc-modal .info{
				overflow-y:visible;
				padding-right:0;
			}
				#ugc-modal .info .user{
					margin-bottom:0;
					position: absolute;
					top: 20px;
					left: 20px;
				}
	
				#ugc-modal .info .ugc-items{
					max-height:100%;
					padding-right: 0;
					overflow-y: visible;
				}
					#ugc-modal .info .ugc-items li{
						padding: 15px;
					}
						#ugc-modal .info .ugc-items li img{
							width:120px;
						}
}