@charset "UTF-8";
/*
  レビュー（ReviCo）
  TOPページ「みんなのレビュー」のスタイル（/red/css/usr/top.css の「---- REVIEW ----」内、レビュー本体部分）を移植。
  元は body.page-top 配下なので、このページの .review-slot 配下に付け替えている。
  キーフレーム名はTOPと衝突しないよう innerLineupReview〜 に変更。それ以外は元のまま。
*/
.container-inner-lineup .review-slot {
	/* tab */
	.top-section--review--tab {
		display: flex;
		column-gap: 1rem;
		margin-top: 32px;
		padding-bottom: 10px;
	}

	/* TOPはli自体がタブ本体。こちらはキーボードでも押せるようbuttonにしたので、liは並びから外す */
	.top-section--review--tab > li {
		display: contents;
	}

	/* TOPのSPは6枚を横スクロールさせていたが、2枚なら画面内に収まるのでスクロールは無し。
	   padding-bottom はアクティブタブの下向き三角ぶん */
	@media screen and (max-width: 767px) {
		.top-section--review--tab-wrap {
			width: 100%;
			margin-top: 2.4rem;
			padding: 0 2.4rem;
		}

		.top-section--review--tab {
			column-gap: 1rem;
			margin-top: 0;
			padding-bottom: .5rem;
		}
	}

	/* TOPと同じく全幅を等分で敷く（TOPは6枚、こちらは2枚）。ラベルは必ず1行 */
	.top-section--review--tab-i {
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc((100% - 1rem) / 2);
		height: 6rem;
		font-family: inherit;
		font-size: 1.6rem;
		font-weight: bold;
		text-align: center;
		white-space: nowrap;
		color: inherit;
		border: 1px solid #333;
		background-color: #fff;
	}

	@media screen and (max-width: 767px) {
		.top-section--review--tab-i {
			height: 3.6rem;
			font-size: 1.2rem;
		}
	}

	.top-section--review--tab-i.-is-active {
		background-color: #333;
		color: #fff;
		position: relative;
	}

	@media (hover: hover) {
		.top-section--review--tab-i:not(.-is-active):hover {
			background-color: #333;
			color: #fff;
			cursor: pointer;
		}
	}

	.top-section--review--tab-i.-is-active::before {
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-top: 1rem solid #333;
		border-right: .75rem solid transparent;
		border-left: .75rem solid transparent;
		border-bottom: 1rem solid transparent;
		position: absolute;
		top: 100%;
		left: 50%;
		translate: -50% 0;
	}

	@media screen and (max-width: 767px) {
		.top-section--review--tab-i.-is-active::before {
			border-top: .5rem solid #333;
			border-right: .75rem solid transparent;
			border-left: .75rem solid transparent;
			border-bottom: .5rem solid transparent;
		}
	}

	/* review */
	.revico-review-multicomment:not(:has(.imgSlider, .descriptionSlider)) {
		opacity: 0;
	}

	/*
	  TOPは aspect-ratio: 1290/766（コンテナ1290px前提）で高さを決めていたが、このページのコンテナは
	  最大1080pxなので、同じ比率だと枠が約125px足りず、サムネ下の星とスクロールバーが
	  下の overflow: hidden で切れてしまう。枠の高さは中身に任せる
	*/
	.top-section--review--body {
		margin-top: 33px;
	}

	@media screen and (max-width: 767px) {
		.top-section--review--body {
			margin-top: 0;
		}
	}

	/* 角丸は .review-slot ではなくこちらで持つ（slotはタブも内包しているため） */
	.top-section--review--body-i {
		width: 100%;
		max-width: none;
		height: 100%;
		background-color: #fff;
		border-radius: 8px;
		padding: 3.1%;
		position: relative;
		overflow: hidden;
	}

	@media screen and (max-width: 767px) {
		.top-section--review--body-i {
			padding: 2.5rem 0 0;
		}
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.top-section--review--body-i {
			padding: 3.1%;
		}
	}

	@media screen and (min-width: 1320px) {
		.top-section--review--body-i {
			padding: 30px 40px 40px;
		}
	}

	/*
	  TOPはSplideを組んでからjQueryで隠しているが、このページのレビューはアコーディオンの中で
	  最初は閉じているので、どのみち幅0で組まれて開いた時に refresh() で直す作り。
	  それならCSSで隠しておいた方が、ReviCoの描画中に6枠が縦に積まれて見えずに済む
	*/
	.top-section--review--body-i:not(.-is-active) {
		display: none;
	}

	.revico-multicomment-top .revico-review-comment-row-wrapper {
		background-color: inherit;
		margin: 0;
		opacity: 1 !important;
	}

	.top-section--review--body-i .revico-multicomment-inner {
		width: 100%;
		max-width: none;
		height: 100%;
		overflow: hidden;
	}

	.top-section--review--body-i .revico-comment-main {
		max-width: 100%;
	}

	.top-section--review--body-i .revico-review-comment-detail--star-rate {
		text-align: left;
	}

	.top-section--review--body-i .revico-multicomment-top .revico-starability-result {
		width: 90px;
		height: 15px;
		background-size: 200% auto;
	}

	/* imgSlider */
	.imgSlider {
		width: 100%;
	}

	.imgSlider .revico-comment-main {
		align-items: flex-end;
	}

	.imgSlider .revico-review-comment-detail--product-name,
	.imgSlider .revico-review-comment-detail--comment,
	.imgSlider a,
	.imgSlider .revico-star-block--rate,
	.imgSlider .is-active:not(.splide__slide--clone) .revico-review-comment-detail--star {
		display: none;
	}

	.imgSlider .revico-multicomment-inner {
		padding-bottom: 37px;
	}

	@media screen and (max-width: 767px) {
		.imgSlider .revico-multicomment-inner {
			padding-bottom: 0;
		}
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.imgSlider .revico-multicomment-inner {
			padding-bottom: 26px;
		}
	}

	.imgSlider .top-section--review--body-i .revico-comment-main {
		align-items: flex-end;
	}

	.imgSlider .revico-review-comment-row-wrapper {
		display: flex;
		align-items: flex-end;
		position: relative;
	}

	@media screen and (max-width: 767px) {
		.imgSlider .revico-review-comment-row-wrapper {
			width: 19.5rem;
			height: 26rem;
			justify-content: center;
		}
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.imgSlider .revico-review-comment-row-wrapper {
			width: 12.24vw;
			height: 21.1rem;
		}
	}

	@media screen and (min-width: 1320px) {
		.imgSlider .revico-review-comment-row-wrapper {
			width: 158px;
			height: 21.1rem;
		}
	}

	.imgSlider .revico-review-comment-row-wrapper .revico-review-comment-row {
		width: 100%;
		height: 100%;
	}

	.imgSlider .revico-review-comment-detail--product-name-image {
		transition: width .6s, height .6s;
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: contain;
		position: absolute;
		right: 0;
	}

	@media screen and (max-width: 767px) {
		.imgSlider .revico-review-comment-detail--product-name-image {
			width: 19.5rem;
			height: 26rem;
			transition: scale .6s;
			scale: .8;
		}
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.imgSlider .revico-review-comment-detail--product-name-image {
			width: 12.24vw;
			height: 16.356vw;
			bottom: 0;
		}
	}

	@media screen and (min-width: 1320px) {
		.imgSlider .revico-review-comment-detail--product-name-image {
			width: 158px;
			height: 211px;
			bottom: 0;
		}
	}

	.imgSlider .is-active:not(.splide__slide--clone) {
		width: 19.5rem;
		height: 26rem;
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.imgSlider .is-active:not(.splide__slide--clone) {
			width: 35.813vw;
			height: 47.829vw;
		}
	}

	@media screen and (min-width: 1320px) {
		.imgSlider .is-active:not(.splide__slide--clone) {
			width: 462px;
			height: 617px;
		}
	}

	.imgSlider .is-active:not(.splide__slide--clone) .revico-review-comment-detail--product-name-image {
		width: 19.5rem;
		height: 26rem;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	@media screen and (max-width: 767px) {
		.imgSlider .is-active:not(.splide__slide--clone) .revico-review-comment-detail--product-name-image {
			scale: 1;
		}
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.imgSlider .is-active:not(.splide__slide--clone) .revico-review-comment-detail--product-name-image {
			width: 35.813vw;
			height: 47.829vw;
		}
	}

	@media screen and (min-width: 1320px) {
		.imgSlider .is-active:not(.splide__slide--clone) .revico-review-comment-detail--product-name-image {
			width: 462px;
			height: 617px;
			padding-right: 10px;
		}
	}

	.imgSlider .revico-review-comment-detail--star {
		display: block;
		width: 100%;
		height: fit-content;
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
	}

	@media screen and (max-width: 767px) {
		.imgSlider .revico-review-comment-detail--star {
			display: none;
		}
	}

	.imgSlider .splide__track--nav>.splide__list>.splide__slide {
		border: none;
	}

	.imgSlider .splide__slide {
		opacity: 1 !important;
	}

	/* sp タッチアニメーション */
	@media screen and (max-width: 767px) {

		.top-section--review--body-i .imgSlider.touch-animation.touched::before,
		.top-section--review--body-i .imgSlider.touch-animation.touched::after {
			animation: innerLineupReviewFadeOut .6s ease-out forwards;
		}

		.top-section--review--body-i .imgSlider.touch-animation::before {
			display: block;
			content: "";
			width: 14.5rem;
			height: 21rem;
			background: url(/red/img/usr/common/swipeAnimation_layer.png?v2) no-repeat center / contain;
			border-radius: 1rem;
			position: absolute;
			top: 2.5rem;
			left: 50%;
			transform: translate(-50%, 0);
			overflow: hidden;
			z-index: 1;
			pointer-events: none;
		}

		.top-section--review--body-i .imgSlider.touch-animation::after {
			display: block;
			content: "";
			width: 3.5rem;
			height: 4.1rem;
			background: url(/red/img/usr/common/swipeAnimation_icon.png) no-repeat center / contain;
			position: absolute;
			top: 13rem;
			left: calc(50% - 1.75rem);
			z-index: 2;
			animation: innerLineupReviewTouch 2s ease-out infinite;
			pointer-events: none;
		}
	}

	/* arrows */
	.imgSlider .splide__arrow {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30px;
		height: auto;
		aspect-ratio: 1/1;
		padding: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		background-color: transparent;
		opacity: 1;
		top: 55%;
	}

	@media screen and (max-width: 767px) {
		.imgSlider .splide__arrow {
			display: none;
		}
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.imgSlider .splide__arrow {
			top: 29vw;
		}

		@media screen and (max-width: 1024px) {
			.imgSlider .splide__arrow {
				width: 25px;
			}
		}
	}

	.imgSlider .splide__arrow svg {
		display: none;
	}

	.imgSlider .splide__arrow--prev {
		background-image: url(/red/img/usr/top/review/review_arrow_left.png);
		left: inherit;
		right: 50px;
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.imgSlider .splide__arrow--prev {
			right: 40px;
		}

		@media screen and (max-width: 1024px) {
			.imgSlider .splide__arrow--prev {
				right: calc(8px + 25px);
			}
		}
	}

	.imgSlider .splide__arrow--next {
		background-image: url(/red/img/usr/top/review/review_arrow_right.png);
		right: 10px;
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.imgSlider .splide__arrow--next {
			right: 0;
		}
	}

	.imgSlider .splide__arrow:hover:not(:disabled) {
		opacity: .7;
	}

	/* descriptionSlider */
	.descriptionSlider {
		display: block;
		height: fit-content;
		background-color: #eee;
		position: absolute;
		top: 3.566vw;
		right: 40px;
	}

	@media screen and (max-width: 767px) {
		.descriptionSlider {
			position: static;
			width: calc(100% - 6rem);
			height: auto;
			margin: 1.8rem auto 0;
		}
	}

	/*
	  TOPはコンテナ1290px前提で width: 55%（右寄せ）だが、このページは最大1080pxしかないので、
	  同じ割合だと左の画像に50〜66pxほどかぶる。幅を割合で持つのをやめ、
	  「画像の右端＋28px」から右マージンまでを埋める指定にした（左の数値は body-i のpadding＋画像幅）
	*/
	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.descriptionSlider {
			left: calc(3.1% + 35.813vw + 28px);
			right: 3.1vw;
			width: auto;
			top: 3vw;
		}
	}

	@media screen and (min-width: 1320px) {
		.descriptionSlider {
			left: calc(40px + 462px + 28px);
			right: 50px;
			width: auto;
			top: 30px;
		}
	}

	.descriptionSlider .revico-review-comment-detail--product-name-image {
		display: none;
	}

	/* 以下、パネルがTOPより狭くなった分だけ余白・文字・ボタンを小さくしている */
	.descriptionSlider .revico-review-comment-row {
		display: flex;
		flex-direction: column;
		padding: 24px 28px 28px;
		text-align: left;
	}

	@media screen and (max-width: 767px) {
		.descriptionSlider .revico-review-comment-row {
			padding: 2rem 1.5rem;
		}
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.descriptionSlider .revico-review-comment-row {
			padding: 20px 20px;
		}
	}

	@media screen and (min-width: 1320px) {
		.descriptionSlider .revico-review-comment-row {
			padding: 24px 28px 28px;
		}
	}

	.descriptionSlider .revico-review-comment-detail--product-name {
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		font-size: 20px;
		font-weight: bold;
	}

	@media screen and (max-width: 767px) {
		.descriptionSlider .revico-review-comment-detail--product-name {
			font-size: 1.6rem;
			-webkit-line-clamp: 2;
		}
	}

	.descriptionSlider .revico-review-comment-detail--star {
		margin-top: 12px;
	}

	@media screen and (max-width: 767px) {
		.descriptionSlider .revico-review-comment-detail--star {
			margin-top: 1.6rem;
		}
	}

	.descriptionSlider .revico-review-comment-detail--star-rate {
		display: flex;
		align-items: center;
		column-gap: 5px;
	}

	.descriptionSlider .revico-star-block--rate {
		font-size: 14px;
		font-weight: bold;
	}

	/*
	  height の計算は 1行 = 1.5em 前提。line-height を書かないとページ全体の 1.8 を継承してしまい、
	  最終行が箱に収まらず文字の上下が切れるので、ここで 1.5 に揃える。
	  行数は、右の説明パネルが左の画像より十分低く縦が余っているぶん、TOPより多めにしている
	*/
	.descriptionSlider .revico-review-comment-detail--comment {
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
		height: calc(6em * 1.5);
		font-size: 14px;
		line-height: 1.5;
		font-weight: 500;
		margin-top: 12px;
	}

	@media screen and (max-width: 1100px) {
		.descriptionSlider .revico-review-comment-detail--comment {
			-webkit-line-clamp: 5;
			height: calc(5em * 1.5);
		}
	}

	@media screen and (max-width: 930px) {
		.descriptionSlider .revico-review-comment-detail--comment {
			-webkit-line-clamp: 4;
			height: calc(4em * 1.5);
		}
	}

	@media screen and (max-width: 767px) {
		.descriptionSlider .revico-review-comment-detail--comment {
			font-size: 1.35rem;
			-webkit-line-clamp: 4;
			height: calc(4em * 1.5);
		}
	}

	.descriptionSlider .revico-review-comment-detail--linkBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 54px;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		background-color: #e60012;
		margin: 20px auto 0;
	}

	@media screen and (max-width: 1024px) {
		.descriptionSlider .revico-review-comment-detail--linkBtn {
			height: 48px;
			font-size: 15px;
		}
	}

	@media screen and (max-width: 930px) {
		.descriptionSlider .revico-review-comment-detail--linkBtn {
			height: 40px;
			font-size: 14px;
			margin: 15px auto 0;
		}
	}

	@media screen and (max-width: 767px) {
		.descriptionSlider .revico-review-comment-detail--linkBtn {
			max-width: 31.5rem;
			height: 5rem;
			font-size: 1.6rem;
			margin: 1rem auto 0;
		}
	}

	.descriptionSlider .splide__track--fade>.splide__list>.splide__slide {
		opacity: 0 !important;
	}

	.descriptionSlider .splide__track--fade>.splide__list>.splide__slide.is-active {
		opacity: 1 !important;
	}

	/* scrollbar */
	.imgSlider-scrollbarWrap {
		width: 100%;
	}

	@media screen and (max-width: 767px) {
		.imgSlider-scrollbarWrap {
			padding: 0 1rem;
		}
	}

	@media screen and (min-width: 768px) and (max-width: 1319px) {
		.imgSlider-scrollbarWrap {
			margin: 0 auto;
		}
	}

	@media screen and (min-width: 1320px) {
		.imgSlider-scrollbarWrap {
			margin: 12px auto 0;
		}
	}

	.imgSlider-scrollbar {
		--thumb-width: 52px;
		--track-height: 8px;
		--thumb-height: 8px;
		appearance: none;
		-webkit-appearance: none;
		width: 100%;
		height: 16px;
		background: transparent;
		outline: none;
		cursor: pointer;
	}

	@media screen and (max-width: 767px) {
		.imgSlider-scrollbar {
			--thumb-width: 4rem;
			--track-height: .6rem;
			--thumb-height: .6rem;
		}
	}

	.imgSlider-scrollbar::-webkit-slider-thumb {
		appearance: none;
		-webkit-appearance: none;
		width: var(--thumb-width);
		height: var(--thumb-height);
		margin-top: calc((var(--track-height) - var(--thumb-height)) / 2);
		border: 0;
		border-radius: 999px;
		background: #d9d9d9;
		box-shadow: none;
		transition: transform .2s;
	}

	.imgSlider-scrollbar::-webkit-slider-runnable-track {
		height: var(--track-height);
		border: none;
		border-radius: 999px;
		background: #ffffff;
	}

	.imgSlider-scrollbar::-moz-range-track {
		height: var(--track-height);
		border: none;
		border-radius: 999px;
		background: #ffffff;
	}

	.imgSlider-scrollbar::-moz-range-thumb {
		width: var(--thumb-width);
		height: var(--thumb-height);
		transform: translateY(calc((var(--track-height) - var(--thumb-height)) / 2));
		border: 0;
		border-radius: 999px;
		background: #d9d9d9;
		transition: transform .2s;
	}

	/* スライドが無い時 */
	.top-section--review--body-i.non-slider .imgSlider .revico-comment-main {
		display: flex;
	}

	@media screen and (max-width: 767px) {
		.top-section--review--body-i.non-slider .imgSlider .revico-comment-main {
			justify-content: center;
		}
	}

	.top-section--review--body-i.non-slider .imgSlider .revico-review-comment-row-wrapper {
		width: 462px;
		height: 617px;
	}

	@media screen and (max-width: 767px) {
		.top-section--review--body-i.non-slider .imgSlider .revico-review-comment-row-wrapper {
			width: 19.5rem;
			height: 26rem;
		}
	}

	.top-section--review--body-i.non-slider .imgSlider .revico-review-comment-detail--product-name-image {
		width: 100%;
		height: 100%;
	}

	.top-section--review--body-i.non-slider .imgSlider .revico-review-comment-detail--star {
		display: none;
	}

	/* レビューが無い時。枠の高さを中身に任せたので、height: 100% だと枠ごと潰れる */
	.non-review-message {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 57.5rem;
	}

	.non-review-message p {
		font-size: 1.4rem;
	}
}

@keyframes innerLineupReviewTouch {
	0% {
		translate: 2rem 0;
		opacity: 0;
	}

	20% {
		translate: 2rem 0;
		opacity: 1;
	}

	80% {
		translate: -2rem 0;
		opacity: 1;
	}

	100% {
		translate: -2rem 0;
		opacity: 0;
	}
}

@keyframes innerLineupReviewFadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}