@charset "UTF-8";

$pc: 'screen and (min-width: 768px)';

.nb {
	// font-family: Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	color: #000000;
	position: relative;
}

.nb figure {
	margin: 0;
}

.nb button {
	cursor: pointer;
}

.nb img {
	max-width: 100%;
	height: auto;
}

.nb img[loading] {
	height: auto;
}

.nb .spbr {
	display: inline;

	@media #{$pc} {
		display: none;
	}
}

.nb .pcbr {
	display: none;

	@media #{$pc} {
		display: inline;
	}
}

.nb_hover {
	@media #{$pc} {
		transition: opacity .5s;

		&:hover {
			opacity: 0.8;
		}
	}
}

/* -----------------------------------------------------------------------
## Contents ###############################################################
----------------------------------------------------------------------- */
.nb_contentWrap {
	background-color: #fff;
}

// プロモーションエリア
.nb_promotion {
	padding: 12px 0 0;
	background-color: #f7ece7;

	@media #{$pc} {
		padding: 30px 0 40px;
	}
}

.nb_promotionTitle {
	text-align: center;
	font-size: 2.4rem;
	line-height: 1;

	@media #{$pc} {
		font-size: 4.1rem;
		line-height: normal;
	}
	small {
		display: inline-block;
		margin-bottom: 0.5em;
		font-size: 1.35rem;
		font-weight: normal;

		@media #{$pc} {
			margin-bottom: 0;
			font-size: 2.2rem;
		}
	}
}

.nb_promotionContainer {
	@media #{$pc} {
		display: flex;
		justify-content: space-between;
		width: 100%;
		max-width: 1240px;
		padding: 0 30px;
		margin: 30px auto 0;
	}
}

.nb_promotion_largeWrap {
	padding: percentage( 30 / 750 );

	@media #{$pc} {
		flex: 0 0 auto;
		width: calc( 100% * 590 / 1180 );
		padding: 0;
	}
}

.nb_promotion_smallWrap {
	padding: percentage( 30 / 750 ) percentage( 15 / 750 );
	background-color: #fff;

	@media #{$pc} {
		flex: 0 0 auto;
		width: calc( 100% * 540 / 1180 );
		padding: 0;
		background-color: transparent;
	}
}

.nb_promotion_large {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);

	@media #{$pc} {
		border-radius: 0;
	}

	&:after {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 52px;
		height: 52px;
		background: url(../images//ico_check_l.png) no-repeat;
		background-size: 100% 100%;
		content: '';

		@media #{$pc} {
			display: none;
		}
	}
	.nb_promotion_img {
		position: relative;

		&:after {
			@media #{$pc} {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 74px;
				height: 74px;
				background: url(../images/240229/ico_check_l.png) no-repeat;
				background-size: 100% 100%;
				content: '';
			}
		}
	}
	.nb_promotion_info {
		position: relative;
		width: 100%;
		padding: 14px 24px 14px 16px;
		// margin-top: calc( 100% * -58 / 690 );
		background-color: rgba(255,255,255,0.9);

		@media #{$pc} {
			padding: 20px 26px;
			margin-top: 0;
			background-color: #fff;
		}
		/*
		&.no-margin {
			margin-top: 0;
		}
		*/
	}
	.nb_promotion_ttl {
		font-size: 1.4rem;
		font-weight: bold;

		@media #{$pc} {
			font-size: 2.2rem;
		}
	}
	.nb_promotion_price {
		margin-top: 0.6em;
		color: #666666;
		font-size: 1.1rem;
		line-height: 1;

		@media #{$pc} {
			font-size: 1.2rem;
		}
	}
}

.nb_promotion_small {
	&:not(:first-child) {
		margin-top: calc( 100% * 30 / 720 );
	}
	> a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: calc( 100% * 15 / 720 );
		background-color: #f7f7f7;

		@media #{$pc} {
			padding: 16px;
			background-color: #fff;
		}
	}
	.nb_promotion_img {
		position: relative;
		flex: 0 0 auto;
		width: calc( 100% * 300 / 690 );
		border: 1px solid #e6e6e6;
		flex: 0 0 auto;

		@media #{$pc} {
			width: calc( 100% * 180 / 540 );
		}

		&:after {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 40px;
			height: 40px;
			background: url(../images/240229/ico_check_s.png) no-repeat;
			background-size: 100% 100%;
			content: '';
		}
	}
	.nb_promotion_info {
		width: calc( 100% * 350 / 690 );
		flex: 0 0 auto;

		@media #{$pc} {
			width: calc( 100% * ( 540 - 180 - 24 ) / 540 );
		}
	}
	.nb_promotion_ttl {
		font-size: 1.4rem;
		font-weight: bold;
		line-height: 1.5;

		@media #{$pc} {
			font-size: 1.8rem;
			line-height: #{(25 / 19)};
		}
	}
	.nb_promotion_txt {
		margin-top: 0.4em;
		font-size: 1.2rem;
		line-height: 1.5;

		@media #{$pc} {
			font-size: 1.4rem;
		}
	}
	.nb_promotion_price {
		margin-top: 0.6em;
		color: #666666;
		font-size: 1.1rem;
		line-height: 1;

		@media #{$pc} {
			font-size: 1.2rem;
		}
	}
}

// アンカーリンク
.nb_anchorSp {
	background-color: #fff;

	@media #{$pc} {
		display: none;
	}
}

.nb_anchorPc {
	display: none;

	@media #{$pc} {
		display: block;
	}
}

.nb_anchor_list {
	display: flex;

	@media #{$pc} {
		max-width: 1180px;
		padding: 0 110px;
		margin: 0 auto;
	}
}

.nb_anchor_item {
	width: calc( 100% * 1 / 4 );

	> a {
		position: relative;
		display: block;
		padding: 36px 0 20px;
		text-align: center;
		font-size: 1.1rem;
		font-weight: bold;
		line-height: 1;

		@media #{$pc} {
			padding: 58px 0 36px;
			font-size: 1.6rem;
		}
		&:before {
			position: absolute;
			left: 50%;
			top: 6px;
			width: 22px;
			height: 21px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			transform: translateX(-50%);
			content: '';

			@media #{$pc} {
				width: 29px;
				height: 27px;
				top: 20px;
			}
		}
		&:after {
			position: absolute;
			left: 50%;
			bottom: 6px;
			width: 11px;
			height: 7px;
			background: url(../images/240328/ico_arw_down.png) no-repeat;
			background-size: 100% 100%;
			transform: translateX(-50%);
			content: '';

			@media #{$pc} {
				bottom: 18px;
			}
		}
	}
	&:nth-child(1) > a:before {
		background-image: url(../images/240229/ico_nav_1.png);
	}
	&:nth-child(2) > a:before {
		background-image: url(../images/240229/ico_nav_2.png);
	}
	&:nth-child(3) > a:before {
		background-image: url(../images/240229/ico_nav_3.png);
	}
	&:nth-child(4) > a:before {
		background-image: url(../images/240229/ico_nav_4.png);
	}
}

// moreボタン
@keyframes accordion {
	0% {
		height: 108vw;

		@media #{$pc} {
			height: 520px;
		}
	}
	90% {
		height: 912vw;

		@media #{$pc} {
			height: 2980px;
		}
	}
	100% {
		height: auto;
	}
}
@keyframes accordion_reverse {
	0% {
		height: auto;
	}
	10% {
		height: 912vw;

		@media #{$pc} {
			height: 2980px;
		}
	}
	100% {
		height: 108vw;

		@media #{$pc} {
			height: 520px;
		}
	}
}

.nb_blur {
	position: relative;
	height: 108vw;
	overflow: hidden;
	padding-bottom: 85px;
	animation: accordion_reverse 0.5s;

	@media #{$pc} {
		height: 520px;
		padding-bottom: 85px;
	}

	&:after {
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 40%;
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f3e2da 50%, #f3e2da 100%);
		content: "";
		z-index: 5;

		@media #{$pc} {
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f3e2da 60%, #f3e2da 100%);
		}
	}

	&.show {
		height: auto;
		animation: accordion 0.5s;

		&:after {
			display: none;
		}
	}
}

.nb_moreBtn {
	position: absolute;
	left: 50%;
	bottom: 30px;
	width: 92%;
	margin: 35px auto 0;
	padding: 1.2rem;
	background-color: #fff;
	border: 1px solid #666666;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1;
	transform: translateX(-50%);
	z-index: 10;
	cursor: pointer;

	@media #{$pc} {
		bottom: 60px;
		max-width: 440px;
		margin: 40px auto 0;
		padding: 1.4rem;
		font-size: 1.4rem;
	}

	&:after {
		position: absolute;
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
		color: #676767;
		font-weight: bold;
		content: '＋';
	}

	&.open {
		font-size: 0;

		&:before {
			font-size: 1.2rem;
			content: '閉じる';

			@media #{$pc} {
				font-size: 1.4rem;
			}
		}
		&:after {
			font-size: 1.2rem;
			content: '－';

			@media #{$pc} {
				font-size: 1.4rem;
			}
		}
	}
}

// ナイトブラとは？
.nb_whats {
	padding-top: 30px;
	border-top: 10px solid #e5e5e5;

	@media #{$pc} {
		padding: 50px 30px 60px;
		border-top-width: 3px;
	}
}

.nb_whats_ttl {
	span {
		display: block;
		text-align: center;

		&.en {
			color: #df2e59;
			font-size: 1.8rem;
			font-family: 'Lora', serif;
			font-style: italic;

			@media #{$pc} {
				font-size: 2.4rem;
			}
		}
		&.ja {
			font-size: 2.4rem;
			font-family: YuMincho, 'Yu Mincho', serif;
			font-weight: normal;

			@media #{$pc} {
				font-size: 3.4rem;
			}
		}
	}
}

.nb_whats_wrap {
	margin-top: 26px;
	padding: 28px calc( 100% * 30 / 750 ) 100px;
	background-color: #f3e2da;

	@media #{$pc} {
		max-width: 1180px;
		margin: 32px auto 0;
		padding: 48px 60px 155px;
	}
}

.nb_whats_catch {
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: #{(58 / 32)};

	@media #{$pc} {
		font-size: 2.2rem;
	}
}

.nb_whats_compare {
	position: relative;
	margin-top: 24px;
	padding-top: 32px;
	border-radius: 8px;
	background-color: #fff;

	@media #{$pc} {
		margin-top: 48px;
		padding-top: 48px;
		border-radius: 10px;
	}

	&:after {
		position: absolute;
		left: 50%;
		bottom: -34px;
		width: 80px;
		height: 20px;
		background: url(/topics/feature/nightbra/images/ico_arw_wide.svg) no-repeat;
		background-size: 100% 100%;
		transform: translateX(-50%);
		content: '';

		@media #{$pc} {
			bottom: -49px;
			width: 112px;
			height: 28px;
		}
	}
}

.nb_whats_compareCatch {
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: #{(50 / 30)};

	@media #{$pc} {
		font-size: 2.4rem;
	}

	em {
		font-style: normal;
		background:linear-gradient(transparent 60%, #fff072 60%);
	}
}

.nb_whats_compareTxt {
	margin: 20px 25px 0;
	font-size: 1.4rem;
	line-height: #{(48 / 28)};

	@media #{$pc} {
		margin: 32px 0 0;
		text-align: center;
		font-size: 1.6rem;
	}
}

.nb_whats_compareContainer {
	margin-top: 20px;

	@media #{$pc} {
		display: flex;
		flex-wrap: wrap;
		margin-top: 40px;
	}
}

.nb_whats_compare_item {
	padding: calc( 100% * 30 / 690 ) calc( 100% * 35 / 690 );

	@media #{$pc} {
		width: 50%;
		padding: 20px 22px 40px;
	}
}

.nb_whats_compare_itemHeading {
	position: relative;
	padding: 8px 0 8px 78px;

	@media #{$pc} {
		padding: 12px 0 12px 106px;
	}
	&:before {
		position: absolute;
		left: 0;
		top: 50%;
		width: 60px;
		height: 60px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		transform: translateY(-50%);
		content: '';

		@media #{$pc} {
			width: 84px;
			height: 84px;
		}
	}
}
.nb_whats_compare_item:nth-child(1) .nb_whats_compare_itemHeading:before {
	background-image: url(../images/240229/ico_compare_day.png);
}
.nb_whats_compare_item:nth-child(2) .nb_whats_compare_itemHeading:before {
	background-image: url(../images/240229/ico_compare_night.png);
}

.nb_whats_compare_itemLabel {
	color: #666666;
	font-size: 1.3rem;

	@media #{$pc} {
		font-size: 1.8rem;
	}
}

.nb_whats_compare_itemTitle {
	font-size: 1.9rem;
	font-weight: bold;

	@media #{$pc} {
		font-size: 2.8rem;
	}
}
.nb_whats_compare_item:nth-child(1) .nb_whats_compare_itemTitle {
	color: #e38123;
}
.nb_whats_compare_item:nth-child(2) .nb_whats_compare_itemTitle {
	color: #497cb1;
}

figure.nb_whats_compare_itemImg {
	position: relative;
	display: block;
	margin-top: 44px;

	@media #{$pc} {
		margin-top: 48px;
	}

	> img {
		display: block;

		@media #{$pc} {
			width: calc( 100% * 382 / 486 );
			margin: 0 auto;
		}
	}
}

.nb_whats_compare_itemImg figcaption {
	position: absolute;
	right: 10px;
	top: -24px;
	padding: 0.7em 1.35em;
	border-radius: 1.2em;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;

	@media #{$pc} {
		right: 36px;
		font-size: 1.8rem;
	}
}
.nb_whats_compare_item:nth-child(1) .nb_whats_compare_itemImg figcaption {
	background-color: #e19e5d;
}
.nb_whats_compare_item:nth-child(2) .nb_whats_compare_itemImg figcaption {
	background-color: #6992bc;
}

.nb_whats_feature {
	margin-top: 45px;
	background-color: #fff;
	border: 2px solid #fff;
	border-radius: 8px;
	overflow: hidden;

	@media #{$pc} {
		margin-top: 72px;
		border-radius: 10px;
	}
}

.nb_whats_featureTitle {
	position: relative;
	display: block;
	padding: calc( 100% * 56 / 690 ) 0 calc( 100% * 85 / 690 );
	background-color: #f8eee9;
	text-align: center;

	@media #{$pc} {
		padding: 56px 0 calc( 100% * 85 / 1060 );
	}
	small {
		display: block;
		font-size: 1.5rem;
		line-height: #{(50 / 30)};

		@media #{$pc} {
			font-size: 2.1rem;
		}
	}
	span {
		display: block;
		margin-top: 0.7em;
		font-size: 2.1rem;
		line-height: #{(60 / 42)};

		@media #{$pc} {
			font-size: 3.0rem;
		}

		i {
			display: inline-block;
			padding-bottom: 0.3em;
			background: url(../images/240229/bg_dotted.png) no-repeat center bottom;
			background-size: auto 5px;
			font-style: normal;

			@media #{$pc} {
				background-size: auto auto;
			}
		}
	}
	&:after {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-top: calc( 100% * 37 / 690 );
		background: url(../images/240229/bg_feature.png) no-repeat center bottom;
		background-size: 100% 100%;
		content: '';

		@media #{$pc} {
			padding-top: calc( 100% * 40 / 1060 );
			background-image: url(../images/240229/bg_feature_pc.png)
		}
	}
}

.nb_whats_featureContent {
	padding: calc( 100% * 44 / 690 ) calc( 100% * 48 / 690 ) calc( 100% * 64 / 690 );

	@media #{$pc} {
		padding: 48px calc( 100% * 30 / 690 ) 75px;
	}
}

.nb_whats_featureContainer {
	@media #{$pc} {
		display: flex;
	}
}

.nb_whats_featureDetail {
	@media #{$pc} {
		width: 50%;
		flex: 0 0 auto;
	}
	&:not(:first-child) {
		margin-top: 44px;

		@media #{$pc} {
			margin-top: 0;
		}
	}

	dt {
		text-align: center;

		span {
			display: inline-block;
			padding: 0.6em 1em;
			border-radius: 1.1em;
			background-color: #f2f2f2;
			font-size: 1.4rem;
			font-weight: bold;
			line-height: 1;

			@media #{$pc} {
				font-size: 1.9rem;
			}
		}
	}
	dd {
		margin-top: 24px;

		@media #{$pc} {
			margin-top: 30px;
		}
	}
	figure {
		@media #{$pc} {
			display: block;
			width: calc( 100% * 418 / 500 );
			margin: 0 auto;
		}
	}
	figcaption {
		margin-top: 28px;
		text-align: center;
		font-size: 1.4rem;

		@media #{$pc} {
			margin-top: 40px;
			font-size: 1.9rem;
		}
		em {
			color: #497cb1;
			font-weight: bold;
		}
	}
}

.nb_whats_featureCatch {
	margin-top: 44px;
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	line-height: #{(60 / 34)};

	@media #{$pc} {
		margin-top: 75px;
		font-size: 2.4rem;
	}
}

.nb_whats_featureTxt {
	margin-top: 24px;
	font-size: 1.4rem;
	line-height: #{(48 / 28)};

	@media #{$pc} {
		max-width: 800px;
		margin: 40px auto 0;
		font-size: 1.6rem;
		line-height: #{(24 / 16)};
	}
}

.nb_whats_faq {
	margin-top: calc( 100% * 30 / 690 );
	padding: calc( 100% * 56 / 690 ) calc( 100% * 30 / 690 ) calc( 100% * 60 / 690 );
	border-radius: 8px;
	background-color: #fff;

	@media #{$pc} {
		margin-top: 40px;
		padding: 42px calc( 100% * 130 / 1060 ) 60px;
	}
}

.nb_whats_faqTitle {
	text-align: center;

	> span {
		display: block;

		&.en {
			font-size: 2.8rem;
			font-family: 'Lora', serif;
			font-style: italic;

			@media #{$pc} {
				font-size: 3.2rem;
			}
		}
		&.ja {
			margin-top: 8px;
			font-size: 1.3rem;
			font-weight: bold;
			line-height: 1;

			@media #{$pc} {
				margin-top: 10px;
				font-size: 1.6rem;
			}
			> span {
				display: inline-block;
				padding: 0.5em 1em;
				border-radius: 1em;
				background-color: #f8eee9;
			}
		}
	}
}

.nb_whats_feature {

}

.nb_whats_faqContainer {
	margin-top: 8px;

	dl {
		padding: 18px 8px;

		@media #{$pc} {
			padding: 28px 10px;
		}
		&:not(:first-child) {
			border-top: 1px solid #e6e6e6;
		}
		dt,
		dd {
			position: relative;
			padding-left: 2em;
			font-size: 1.4rem;

			@media #{$pc} {
				font-size: 1.7rem;
			}
			> span {
				position: absolute;
				left: 0;
				top: 0;
				font-family: Montserrat sans-serif;
				font-weight: 400;
				line-height: 1.4;
			}
		}
		dt {
			font-weight: bold;
		}
		dd {
			margin-top: 1.4em;

			> span {
				color: #df2e59;
			}
		}
	}
}

.nb_whats_faqLink {
	margin-top: 10px;

	a {
		position: relative;
		display: block;
		padding: 1em;
		background-color: #666;
		color: #fff;
		text-align: center;
		font-size: 1.2rem;
		line-height: 1;

		@media #{$pc} {
			max-width: 440px;
			margin: 0 auto;
			padding: 1.3em;
			font-size: 1.4rem;
		}
		&:after {
			position: absolute;
			right: 20px;
			top: 50%;
			width: 7px;
			height: 11px;
			background: url(../images/240229/ico_arw_right.png) no-repeat;
			background-size: 100% 100%;
			transform: translateY(-50%);
			content: '';
		}
	}
}

// NEW ARRIVAL
.nb_new {
	padding: 36px 0 32px;
	border-top: 10px solid #e5e5e5;

	@media #{$pc} {
		max-width: 1180px;
		padding: 60px 0;
		margin: 0 auto;
		border-top-width: 1px;
	}
}

// ランキング
.nb_ranking {
	padding: 36px 0 32px;
	border-top: 10px solid #e5e5e5;

	@media #{$pc} {
		max-width: 1180px;
		padding: 60px 0;
		margin: 0 auto;
		border-top-width: 1px;
	}
}

// ラインナップ
.nb_lineup {
	padding: 36px 0 30px;
	border-top: 10px solid #e5e5e5;

	@media #{$pc} {
		max-width: 1180px;
		padding: 60px 0;
		margin: 0 auto;
		border-top-width: 1px;
	}
}

.nb_lineupTitle {
	span {
		display: block;
		text-align: center;

		&.en {
			color: #df2e59;
			font-size: 1.8rem;
			font-family: 'Lora', serif;
			font-style: italic;

			@media #{$pc} {
				font-size: 2.4rem;
			}
		}
		&.ja {
			font-size: 2.4rem;
			font-family: YuMincho, 'Yu Mincho', serif;
			font-weight: normal;

			@media #{$pc} {
				font-size: 3.4rem;
			}
		}
	}
}

.nb_lineup_block {
	padding: 36px 0 34px;
	border-top: 1px solid #fff;

	@media #{$pc} {
		padding: 55px 0 40px;
	}
}

.nb_lineup_blockCatch {
	text-align: center;
	font-size: 1.35rem;

	@media #{$pc} {
		font-size: 1.85rem;
	}
	> span {
		display: inline-block;
		padding-bottom: 12px;

		@media #{$pc} {
			padding-bottom: 16px;
		}
	}
}

.nb_lineup_blockTitle {
	margin-top: 12px;
	text-align: center;
	font-size: 2.0rem;

	@media #{$pc} {
		margin-top: 12px;
		font-size: 2.6rem;
	}
}

.nb_lineup_1 {
	margin-top: 26px;
	background-color: #e6f1e9;

	.nb_lineup_blockCatch > span {
		background: url(/topics/feature/nightbra/images/bg_lineup_1_s.png) no-repeat center bottom;
		background-size: auto 10px;

		@media #{$pc} {
			background-image: url(/topics/feature/nightbra/images/bg_lineup_1_l.png);
			background-size: auto 13px;
		}
	}
}
.nb_lineup_2 {
	background-color: #e1eaf3;

	.nb_lineup_blockCatch > span {
		background: url(/topics/feature/nightbra/images/bg_lineup_2_s.png) no-repeat center bottom;
		background-size: auto 10px;

		@media #{$pc} {
			background-image: url(/topics/feature/nightbra/images/bg_lineup_2_l.png);
			background-size: auto 13px;
		}
	}
}
.nb_lineup_3 {
	background-color: #ece8e0;

	.nb_lineup_blockCatch > span {
		background: url(/topics/feature/nightbra/images/bg_lineup_3_s.png) no-repeat center bottom;
		background-size: auto 10px;

		@media #{$pc} {
			background-image: url(/topics/feature/nightbra/images/bg_lineup_3_l.png);
			background-size: auto 13px;
		}
	}
}
.nb_lineup_4 {
	background-color: #e8e5f0;

	.nb_lineup_blockCatch > span {
		background: url(/topics/feature/nightbra/images/bg_lineup_4_s.png) no-repeat center bottom;
		background-size: auto 10px;

		@media #{$pc} {
			background-image: url(/topics/feature/nightbra/images/bg_lineup_4_l.png);
			background-size: auto 13px;
		}
	}
}
.nb_lineup_5 {
	background-color: #f2f2f2;

	.nb_lineup_blockCatch > span {
		background: url(/topics/feature/nightbra/images/bg_lineup_5_s.png) no-repeat center bottom;
		background-size: auto 10px;

		@media #{$pc} {
			background-image: url(/topics/feature/nightbra/images/bg_lineup_5_l.png);
			background-size: auto 13px;
		}
	}
}

.nb_new_items,
.nb_ranking_items {
	overflow: hidden;
}

.nb_item_list,
.nb_lineup_list {
	&.slick-dotted.slick-slider {
		margin-bottom: 25px;
	}
	.slick-slide a {
		outline: none;
	}
	.slick-arrow {
		position: absolute;
		top: auto;
		bottom: 0;
		font-size: 0;
		width: auto;
		height: auto;
		transform: 0;

		&:before {
			display: block;
			opacity: 1;
			font-size: 0;
			width: 7px;
			height: 7px;
			border-left: 2px solid #666666;
			border-top: 2px solid #666666;
			content: "";
		}
		&.slick-prev {
			left: 4%;
			transform: translateY(-50%) rotate(180deg);

			@media #{$pc} {
				left: 50%;
				transform: translateX(-146px) translateY(-2px) rotate(180deg);
			}
			&:before {
				transform: rotate(135deg);
			}
		}
		&.slick-next {
			right: 4%;
			transform: translateY(-50%);

			@media #{$pc} {
				right: 50%;
				transform: translateX(146px) translateY(-2px);
			}
			&:before {
				transform: rotate(135deg);
			}
		}
	}
	.slick-dots {
		margin-top: 25px;

		@media #{$pc} {
			max-width: 292px;
			margin: 45px auto 0;
		}
		li {
			margin: 0 15px;

			&:before {
				font-size: 0 !important;
				line-height: 0 !important;
				position: static !important;
				width: 100% !important;
				height: 100% !important;
				content: "" !important;
				opacity: 1 !important;
			}

			button:before {
				background-color: #cccccc;
				opacity: 1;
			}
			&.slick-active button:before {
				background-color: transparent;
				border-color: #666666;
			}
		}
	}
}

.nb_item_list {
	padding: 0 105px 0 15px;
	overflow: hidden;

	@media #{$pc} {
		padding: 0 40px;
	}
	.slick-list {
		overflow: visible;

		@media #{$pc} {
			overflow: hidden;
		}
	}
	.slick-arrow {
		&:before {
			border-left: 2px solid #df2e59;
			border-top: 2px solid #df2e59;
		}
	}
	.slick-dots {
		width: auto;
		margin-right: -90px;

		@media #{$pc} {
			margin-right: auto;
		}
		li {
			&.slick-active button:before {
				border-color: #df2e59;
			}
		}
	}
}

.nb_lineup_list {
	margin-top: 30px;
	padding: 0 45px 0 7.5px;
	overflow: hidden;

	@media #{$pc} {
		padding: 0 50px;
	}

	.slick-list {
		overflow: visible;

		@media #{$pc} {
			overflow: hidden;
		}
	}
	.slick-dots {
		width: auto;
		margin-right: -37.5px;

		@media #{$pc} {
			margin-right: auto;
		}
	}
}

.nb_list_item {
	position: relative;
	margin: 0 15px;

	@media #{$pc} {
		max-width: 180px;
		margin: 0 20px;
	}
	a {
		text-decoration: none;

		@media #{$pc} {
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.nb_list_img,
.nb_lineup_img {
	&.long {
		padding: 10% 2%;
	}
}

.nb_list_brand,
.nb_lineup_brand {
	font-size: 1.2rem;
	line-height: 1.5;

	@media #{$pc} {
		font-size: 1.4rem;
	}
}

.nb_list_name,
.nb_lineup_name {
	font-size: 1.15rem;
	line-height: 1.5;

	@media #{$pc} {
		font-size: 1.4rem;
	}
}

.nb_list_price,
.nb_lineup_price {
	margin-top: 0.5em;
	color: #666;
	font-size: 1.05rem;
	line-height: 1.5;

	@media #{$pc} {
		font-size: 1.2rem;
	}
}

.nb_lineup_feel {
	margin-top: 0.6em;
	font-size: 1.05rem;
	font-weight: bold;
	line-height: 1;

	@media #{$pc} {
		font-size: 1.3rem;
	}

	> span {
		display: inline-block;
		padding: 0.4em;
		line-height: 1;
	}
	&01 > span {
		color: #b3ab89;
		border: 1px solid #b3ab89;
	}
	&02 > span {
		color: #ca8d72;
		border: 1px solid #ca8d72;
	}
	&03 > span {
		color: #b46061;
		border: 1px solid #b46061;
	}
}

.nb_lineup_txt {
	margin-top: 0.6em;
	font-size: 1.1rem;

	@media #{$pc} {
		font-size: 1.4rem;
	}
}

.nb_list_rank {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	background: #b3b3b3;
	text-align: center;
	line-height: 16px;
	color: #fff;
	font-size: 1.0rem;
	width: 16px;

	@media #{$pc} {
		right: 0;
		top: 0;
		font-size: 1.8rem;
		line-height: 25px;
	}
}
.nb_list_rank.one {
	background-color: #d9b162;
}
.nb_list_rank.two {
	background-color: #9595a6;
}
.nb_list_rank.three {
	background-color: #c2703a;
}

.nb_lineup_item {
	position: relative;
	padding-top: 22px;
	margin: 0 7.5px;

	@media #{$pc} {
		padding-top: 32px;
		margin: 0 10px;
	}

	a {
		position: relative;
		display: block;
		padding: 0 14px 26px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 0 6px rgba(0,0,0,0.1);
		overflow: hidden;

		@media #{$pc} {
			padding: 0 20px 35px;
			border-radius: 10px;
		}

		&:after {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 40px;
			height: 40px;
			background: url(/topics/feature/nightbra/images/ico_check_s.png) no-repeat;
			background-size: 100% 100%;
			content: '';

			@media #{$pc} {
				width: 56px;
				height: 56px;
			}
		}
	}
}

.nb_lineup_icons {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	padding-left: 8px;

	@media #{$pc} {
		padding-left: 10px;
	}
}
.nb_lineup_icon {
	&:not(:first-child) {
		margin-left: 3px;

		@media #{$pc} {
			margin-left: 5px;
		}
	}
	> img {
		width: auto;
		height: 22px;

		@media #{$pc} {
			height: 32px;
		}
	}
}

.nb_list_all,
.nb_lineup_all {
	margin: calc( 100% * 60 / 750 ) calc( 100% * 30 / 750 ) 0;

	@media #{$pc} {
		margin: 40px 0 0;
	}
	> a {
		position: relative;
		display: block;
		padding: 1em;
		background-color: #666666;
		text-align: center;
		color: #fff;
		font-size: 1.2rem;
		line-height: 1;

		@media #{$pc} {
			max-width: 440px;
			margin: 0 auto;
			padding: 1.3em;
			font-size: 1.4rem;
		}
		&:after {
			position: absolute;
			right: 20px;
			top: 50%;
			width: 7px;
			height: 11px;
			background: url(../images/240229/ico_arw_right.png) no-repeat;
			background-size: 100% 100%;
			transform: translateY(-50%);
			content: '';
		}
	}
}

// 関連トピックス
.nb_topics {
	padding-top: 36px;
	border-top: 10px solid #e5e5e5;
	background-color: #fff;

	@media #{$pc} {
		max-width: 1180px;
		padding-top: 60px;
		padding-bottom: 100px;
		margin: 0 auto;
		border-top-width: 1px;
	}
}

.nb_topics_list {
	display: flex;
	flex-wrap: wrap;

	@media #{$pc} {
		max-width: 880px;
		margin: 34px auto 0;
	}
}

.nb_topics_item {
	width: calc( 50% - 1px );

	&:nth-child(2n) {
		margin-left: 2px;
	}
	@media #{$pc} {
		width: calc( 100% * 190 / 880 );

		&:not(:nth-child(4n+1)) {
			margin-left: calc( 100% * 40 / 880 );
		}
	}
	> a {
		display: block;
	}
}

.nb_topics_txt {
	padding: 1em 0.75em 2em;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.5;

	@media #{$pc} {
		padding: 20px 0 0;
		font-size: 1.4rem;
		font-weight: normal;
	}
}

.nb_fixed {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99;
	width: 100%;
	transform: translateY(100%);
	transition: transform .4s ease-out;

	&.show {
		transform: translateY(0%);
	}

	@media #{$pc} {
		display: none;
	}

	.nb_anchor_item {
		> a {
			padding: 44px 0 10px;

			&:after {
				display: none;
			}
		}
	}
}