@charset "utf-8";

/*------------------------------------------------------------
BEERBALL トップページ　2025/03
------------------------------------------------------------ */

/*------------------------------------------------------------
[COMMON]  main_visual
------------------------------------------------------------ */
#suntory_contents #main_visual {
	background: #068299;
}

#suntory_contents #main_visual img {
	width: 100%;
	height: auto;
}

#suntory_contents .fadein {
	opacity: 0;
	animation-name: fade-in;
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*------------------------------------------------------------
[COMMON] #bb_intro
------------------------------------------------------------ */
#bb_intro .catchcopy,
#bb_intro .catchcopy span {
	display: block;
}

#suntory_contents #bb_intro .copy01 {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
	color: transparent;
	background: url(/beer/beerball/assets2025/img/top/catchcopy01.svg) no-repeat center center /contain;
	transition: all 1s ease-out 0.5s;
}

#bb_intro .copy02 {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
	color: transparent;
	background: url(/beer/beerball/assets2025/img/top/catchcopy02.svg) no-repeat center center /contain;
	transition: all 1s ease-out 1s;
}

#bb_intro .txt_summary {
	transition: all 1s ease-out 1.5s;
}



/*------------------------------------------------------------
[COMMON] #bb_enjoy
------------------------------------------------------------ */
#bb_enjoy h2.tl_section {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
	color: transparent;
	margin: 0 auto;
	background: url(/beer/beerball/assets2025/img/top/tl_recommend.svg) no-repeat center center /contain;
}

#bb_enjoy #howto_recipe .grid .step ol {
	width: fit-content;
	margin: 0 auto;
}

#bb_enjoy #howto_recipe .grid .step li {
	position: relative;
	background-repeat: no-repeat;
	background-position: left center;
	width: fit-content;
}

#bb_enjoy #howto_recipe .grid .step li.no1 {
	background-image: url(/beer/beerball/assets2025/img/top/no_1.svg);
}

#bb_enjoy #howto_recipe .grid .step li.no2 {
	background-image: url(/beer/beerball/assets2025/img/top/no_2.svg);
}

#bb_enjoy #howto_recipe .grid .step li.no3 {
	background-image: url(/beer/beerball/assets2025/img/top/no_3.svg);
}

#bb_enjoy #howto_recipe .grid .step li.no4 {
	background-image: url(/beer/beerball/assets2025/img/top/no_4.svg);
}

/*------------------------------------------------------------
[COMMON] #bb_shop
------------------------------------------------------------ */
/*#bb_shop h2.tl_section {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
	color: transparent;
	margin: 0 auto;
	background: url(/beer/beerball/assets2025/img/top/tl_shop.svg) no-repeat center center /contain;
}*/
/*------------------------------------------------------------
[COMMON] #bb_campaign
------------------------------------------------------------ */

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

	/* for PC */
	/*------------------------------------------------------------
[PC] main_visual
------------------------------------------------------------ */
	#main_visual h1 {
		width: 1164px;
		height: 400px;
		margin: 0 auto;
	}

	/*------------------------------------------------------------
[PC] aside#bb_topics
------------------------------------------------------------ */
	#bb_topics .inner {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		width: 1000px;
		margin: 0 auto;
		padding: 30px 0;
		border-bottom: 1px solid #000;
	}

	#bb_topics h2 {
		font-weight: bold;
		color: #068299;
		font-size: 20px;
		width: 130px;
		line-height: calc(16px * 1.5);
	}

	#bb_topics ul li {
		position: relative;
		font-size: 16px;
		margin: 0;
		padding: 0 0 0 30px;
		line-height: 1.5;
	}

	#bb_topics ul li+li {
		margin: 10px 0 0;
	}

	#bb_topics ul li::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 8px;
		width: 8px;
		height: 8px;
		border-top: 1.5px solid #068299;
		border-right: 1.5px solid #068299;
		transform: rotate(45deg);
	}

	#bb_topics ul li a:hover {
		text-decoration: underline;
	}

	/*------------------------------------------------------------
[PC] #bb_intro
------------------------------------------------------------ */
	#bb_intro .inner {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-start;
		padding: 40px 0 0;
	}

	#bb_intro .part_img.animate {
		order: 1;
	}

	#bb_intro .part_img img {
		width: 383px;
		height: 443px;
	}

	#bb_intro .part_txt {
		order: 2;
	}

	#bb_intro .copy01 {
		width: 490px;
		height: 61px;
	}

	#bb_intro .copy02 {
		width: 490px;
		height: 65px;
		margin: 10px 0 0;
	}

	#bb_intro .txt_summary {
		margin: 60px 0 0;
		font-size: 19px;
		line-height: 1.85;
		text-align: center;
	}


	/*------------------------------------------------------------
[PC] #bb_enjoy
------------------------------------------------------------ */
	#bb_enjoy .inner {
		display: block;
		padding: 35px 0 50px;
	}

	#bb_enjoy h2.tl_section {
		width: 394px;
		height: 62px;
		margin-top: 15px;
	}

	#bb_enjoy #howto_recipe {
		margin: 35px 0 0;
	}

	#bb_enjoy #howto_recipe .grid {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-start;
	}

	#bb_enjoy #howto_recipe .grid figure.ginger {
		order: 1;
		width: 270px;
		margin: 50px 20px 0 75px;
	}

	#bb_enjoy #howto_recipe .grid figure.lemonade {
		order: 3;
		width: 270px;
		margin: 50px 0 0 95px;
	}

	#bb_enjoy #howto_recipe .grid figcaption {
		width: 200px;
		text-align: center;
	}

	#bb_enjoy #howto_recipe .grid .step {
		order: 2;
		width: 270px;
	}

	#bb_enjoy #howto_recipe .grid .step h4 {
		display: block;
		padding: 0 0 15px;
		margin: 10px 0 0;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		border-bottom: 1px solid #000;
	}

	#bb_enjoy #howto_recipe .txt_ratio {
		width: 200px;
		margin: 20px auto 0;
	}

	#bb_enjoy #howto_recipe .grid .step ol {
		margin-top: 20px;
	}

	#bb_enjoy #howto_recipe .grid .step li {
		margin: 10px 0 0;
		padding: 0 0 0 40px;
		font-size: 18px;
		line-height: 1.5;
		background-size: auto 20px;
	}

	#bb_enjoy .btn_next {
		margin: 35px auto 0;
	}

	#bb_enjoy #howto_keep {
		margin: 50px 0 0;
	}

	#bb_enjoy #howto_keep ul.threepoints {
		display: block;
		position: relative;
		margin: 20px 0 0;
		height: 210px;
	}

	#bb_enjoy #howto_keep .threepoints>li {
		display: block;
		position: absolute;
		width: 400px;
		height: 210px;
		top: 0;
		background: url(/beer/beerball/assets2025/img/top/bg_point_pc.webp) no-repeat center center / contain;

		& p {
			font-weight: bold;
			font-size: 16px;
			line-height: 1.56;
			text-align: center;
			-webkit-text-stroke: 12px #fff;
			text-stroke: 12px #fff;
			paint-order: stroke;
		}

		& strong {
			position: relative;
			z-index: 1;
			color: #068299;
		}

		& .back {
			position: relative;
			z-index: 0;
			margin-left: 3px;
		}
	}

	#bb_enjoy #howto_keep li.point01 {
		left: 20px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		gap: 26px;

		& .illust {
			width: 74px;
		}
	}

	#bb_enjoy #howto_keep li.point02 {
		left: 380px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		gap: 26px;

		& .illust {
			width: 153px;
		}
	}

	#bb_enjoy #howto_keep li.point03 {
		left: 740px;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;

		& .illust {
			width: 291px;
			margin: 8px 0 0;
		}

		& ul {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: center;
			height: auto;
			width: 280px;
			margin: 8px 10px 0 0;
		}

		& li {
			background: none;
			font-weight: bold;
			font-size: 13px;
			line-height: 1.3;
			text-align: center;
			-webkit-text-stroke: 12px #fff;
			text-stroke: 12px #fff;
			paint-order: stroke;
		}
	}

	/*------------------------------------------------------------
[PC] #bb_shop 飲めるお店
------------------------------------------------------------ */
	/*	#bb_shop .inner {
		display: block;
		padding: 35px 0 50px;
		background: url(/beer/beerball/assets2025/img/top/map_pc.webp) no-repeat center top 150px /581px;
		min-height: 383px;
	}

	#bb_shop h2.tl_section {
		width: 394px;
		height: 62px;
		margin-top: 15px;
	}

	#bb_shop .grid {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-start;
	}

	#bb_shop .photo_left {
		width: 189px;
		height: 188px;
	}

	#bb_shop .photo_right {
		width: 247px;
		height: 248px;
		margin: 112px 0 0;
	}

	#bb_shop .area_center {
		width: 428px;
	}

	#bb_shop .btn_next {
		margin: 120px auto 0;
	}

	#bb_shop .note_gmap {
		margin: 140px 0 0;
		text-align: center;
		font-size: 12px;
	}*/

	/*------------------------------------------------------------
[PC] #bb_campaign
------------------------------------------------------------ */
	#bb_campaign .inner {
		display: block;
		padding: 35px 0 50px;
		min-height: 560px;
	}

	#bb_campaign .grid {
		display: block;
	}

	#bb_campaign h3.tl_genre {
		display: block;
		font-size: 23px;
		font-weight: bold;
		text-align: center;
	}

	#bb_campaign section.area_campaign {
		margin: 20px auto 0;
	}

	#bb_campaign .area_campaign.no1 figure {
		display: block;
		width: 630px;
		margin: 20px auto 0;
	}

	#bb_campaign .area_campaign.no1 figcaption {
		display: block;
		margin: 10px 0 0;
		font-size: 17px;
		text-align: center;
		line-height: 1.5;
	}

	/*PC 動画*/
	#bb_campaign .area_cm {
		margin: 20px 0 0;
	}
	#bb_campaign .area_campaign + .area_cm {
				margin-top: 70px;
	}

	#bb_campaign .area_cm .grid_sp {
		display: none;
	}

	#bb_campaign .area_cm .grid_pc {
		width: 1000px;
		margin: 20px auto 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-start;
		gap: 40px;
	}

	#bb_campaign .area_cm .cmmv {
		width: 480px;
	}

	#bb_campaign .area_cm .cmmv a {
		display: block;
		width: 100%;
	}

	#bb_campaign .area_cm .cmmv .thumnail {
		position: relative;
	}

	#bb_campaign .area_cm .cmmv .thumnail::after {
		content: "";
		display: block;
		position: absolute;
		background: url(/beer/beerball/assets2025/img/top/icon_player.svg) no-repeat;
		width: 70px;
		height: 70px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#bb_campaign .area_cm .cmmv div p {
		display: block;
		text-align: center;
		font-size: 15px;
		margin: 10px 0 0;
	}


	/*------------------------------------------------------------
[PC] #bb_products
------------------------------------------------------------ */
	#bb_products .inner {
		display: block;
		padding: 35px 0 50px;
	}

	#bb_products h2.tl_section_middle {
		display: block;
		font-size: 32px;
		font-weight: bold;
		text-align: center;
	}

	#bb_products .grid {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
		margin: -45px 0 0;
		gap: 30px 0;
	}

	#bb_products .area_prd {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
		width: 500px;
		mix-blend-mode: darken;
	}

	#bb_products .area_prd figure {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
		width: 361px;
		height: 530px;
		margin-bottom: 30px;
		border-bottom: 1px solid #000;
		border-image: linear-gradient(to right, #fff, #000, #fff) 1;
	}

	#bb_products .major figure img {
		width: 190px;
		margin-top: 10px;
	}

	#bb_products .limited figure img {
		width: 361px;
	}

	#bb_products .area_prd .prd_name {
		margin: 10px 0 0;
		font-size: 30px;
		font-weight: bold;
	}

	#bb_products .area_prd .prd_release {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15px auto;
		width: 160px;
		height: 50px;
		font-size: 16px;
		font-weight: bold;
		background: #cfedf0;
	}

	#bb_products .area_prd .prd_name_sub {
		margin: 20px 0 0;
		font-size: 16px;
		font-weight: bold;
	}

	#bb_products .area_prd dt,
	#bb_products .area_prd dd {
		display: inline-block;
		font-size: 18px;
		line-height: 1.8;
	}

	#bb_products .area_prd .prd_outline {
		display: block;
		margin: 30px 0 0;
		padding: 0 20px;
		text-align: center;
		font-size: 16px;
		line-height: 1.8;
	}


}

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

	/* for SP */
	/*------------------------------------------------------------
[SP] main_visual
------------------------------------------------------------ */
	#main_visual h1 {
		width: 100%;
		height: auto;
		margin: 0;
	}

	/*------------------------------------------------------------
[SP] aside#bb_topics
------------------------------------------------------------ */
	#bb_topics .inner {
		width: 96vw;
		margin: 0 auto;
		padding: 6.4vw 0 4vw;
		border-bottom: 1px solid #000;
	}

	#bb_topics h2 {
		text-align: center;
		font-weight: bold;
		color: #068299;
		font-size: 4.8vw;
	}

	#bb_topics ul {
		width: fit-content;
		margin: 0 auto;
	}

	#bb_topics ul li {
		width: fit-content;
		position: relative;
		margin: 0;
		padding: 2.4vw 0 2.4vw 4vw;
		font-size: 4vw;
		line-height: 1.5;
	}

	#bb_topics ul li::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 4vw;
		width: 1.866666666666667vw;
		height: 1.866666666666667vw;
		border-top: 0.533333333vw solid #068299;
		border-right: 0.533333333vw solid #068299;
		transform: rotate(45deg);
	}


	/*------------------------------------------------------------
[SP] #bb_intro
------------------------------------------------------------ */
	#bb_intro .inner {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		padding: 8vw 0 0;
	}

	#bb_intro .txt_summary {
		margin: 6.4vw 0 0;
		font-size: 4vw;
		line-height: 1.65;
		text-align: center;
	}

	#bb_intro .part_img {
		width: 100%;
		margin: 9.2vw 0 0;
		text-align: right;
		transition: all 0.6s ease-out 1.5s;
	}

	#bb_intro .part_img img {
		width: 83.46666667vw;
		height: 96.53333333vw;
	}

	#bb_intro .copy01 {
		margin: 0 auto;
		width: 71.46666667vw;
		height: 9.066666667vw;
	}

	#bb_intro .copy02 {
		width: 71.46666667vw;
		height: 9.333333333vw;
		margin: 1.6vw auto 0;
	}

	/*------------------------------------------------------------
[SP] #bb_enjoy
------------------------------------------------------------ */
	#bb_enjoy .inner {
		display: block;
		padding: 6.8vw 0 10vw;
	}

	#bb_enjoy h2.tl_section {
		width: 61.46666667vw;
		height: 9.733333333vw;
	}

	#bb_enjoy #howto_recipe {
		margin: 6.133333333vw 0 0;
		mix-blend-mode: darken;
	}

	#bb_enjoy #howto_recipe .grid {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
	}

	#bb_enjoy #howto_recipe .grid figure.ginger {
		order: 1;
		width: 32vw;
		margin: 0 0 0 9.6vw;
	}

	#bb_enjoy #howto_recipe .grid figure.lemonade {
		order: 2;
		width: 32vw;
		margin: 0 0 0 9.6vw;
	}

	#bb_enjoy #howto_recipe .grid figcaption {
		margin-top: 1.6vw;
		font-size: 3.466666667vw;
		font-weight: bold;
	}

	#bb_enjoy #howto_recipe .grid figure.ginger figcaption {
		margin-left: -4.8vw;
	}

	#bb_enjoy #howto_recipe .tl_aqua {
		order: 3;
		margin-top: 6.4vw;
	}

	#bb_enjoy #howto_recipe .grid .step {
		order: 4;

		margin: 0 auto;
	}

	#bb_enjoy #howto_recipe .grid .step h4 {
		display: block;
		width: 49.33333333vw;
		padding: 0 0 3.2vw;
		margin: 0 auto;
		font-size: 4vw;
		font-weight: bold;
		text-align: center;
		border-bottom: 1px solid #000;
	}

	#bb_enjoy #howto_recipe .txt_ratio {
		width: 43.86666667vw;
		margin: 1.333333333vw auto 0;
	}

	#bb_enjoy #howto_recipe .grid .step ol {
		margin-top: 5.6vw;
		width: 49.33333333vw;
	}

	#bb_enjoy #howto_recipe .grid .step li {
		margin: 2.4vw 0 0;
		padding: 0 0 0 6.4vw;
		font-size: 4vw;
		line-height: 1.5;
		background-size: auto 4vw;
	}

	#bb_enjoy .btn_next {
		margin: 5.6vw auto 0;
	}

	#bb_enjoy #howto_keep {
		margin: 9.333333333vw 0 0;
	}

	#bb_enjoy #howto_keep .threepoints>li {
		display: block;
		margin: 4vw auto 0;
		background: url(/beer/beerball/assets2025/img/top/bg_point_sp.webp) no-repeat center center / contain;

		& p {
			font-weight: bold;
			font-size: 3.733333333vw;
			line-height: 1.56;
			text-align: center;
			-webkit-text-stroke: 2.4vw #fff;
			text-stroke: 2.4vw #fff;
			paint-order: stroke;
		}

		& strong {
			position: relative;
			z-index: 1;
			color: #068299;
		}

		& .back {
			position: relative;
			/*			z-index: 0;*/
			margin-left: 0.4vw;
		}
	}

	#bb_enjoy #howto_keep li.point01 {
		width: 84vw;
		height: 40vw;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		gap: 4.8vw;

		& .illust {
			width: 16vw;
		}
	}

	#bb_enjoy #howto_keep li.point02 {
		width: 84vw;
		height: 40vw;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		gap: 4.8vw;

		& .illust {
			width: 33.6vw;
		}
	}

	#bb_enjoy #howto_keep li.point03 {
		width: 84vw;
		height: 46.66666667vw;
		background: url(/beer/beerball/assets2025/img/top/bg_point03_sp.webp) no-repeat center center / contain;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;

		& .illust {
			width: 64vw;
			margin: 2.4vw 0 0;
		}

		& ul {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: center;
			height: auto;
			width: 64vw;
			margin: 2.4vw 2.4vw 0 0;
		}

		& li {
			background: none;
			font-weight: bold;
			font-size: 2.933333333vw;
			line-height: 1.3;
			text-align: center;
			-webkit-text-stroke: 2.4vw #fff;
			text-stroke: 2.4vw #fff;
			paint-order: stroke;
		}
	}

	/*------------------------------------------------------------
[SP] #bb_shop
------------------------------------------------------------ */
	/*#bb_shop .inner {
		padding: 6.8vw 0 10vw;
	}

	#bb_shop h2.tl_section {
		width: 61.46666667vw;
		height: 9.733333333vw;
	}

	#bb_shop .grid {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-end;
		position: relative;
		margin: 4vw 0 0;
		background: url(/beer/beerball/assets2025/img/top/map_sp.webp) no-repeat center top /84vw;
		min-height: 66.66666667vw;
		mix-blend-mode: darken;
	}

	#bb_shop .photo_left {
		width: 28.66666667vw;
		margin-left: 4vw;
		margin-bottom: 20vw;
	}

	#bb_shop .photo_right {
		width: 33.06666667vw;
		margin-right: 2vw;
	}

	#bb_shop .area_center {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding: 6.4vw 0 0;
	}

	#bb_shop .btn_next {
		margin: 0 auto;
	}

	#bb_shop .note_gmap {
		margin: 46.4vw 0 0;
		text-align: center;
		font-size: 2.666666667vw;
	}*/

	/*------------------------------------------------------------
[SP] #bb_campaign
------------------------------------------------------------ */
	#bb_campaign .inner {
		padding: 6.8vw 0 10vw;
	}

	#bb_campaign .grid {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: flex-start;
	}

	#bb_campaign h3.tl_genre {
		display: block;
		font-size: 5.6vw;
		font-weight: bold;
		text-align: center;
	}

	#bb_campaign section.area_campaign {
		margin: 4vw auto 0;
	}

	#bb_campaign .area_campaign figure {
		display: block;
		width: 84vw;
		margin: 4vw auto 0;
	}

	#bb_campaign .area_campaign figcaption {
		display: block;
		margin: 2.4vw 0 0;
		font-size: 4vw;
		text-align: center;
		line-height: 1.5;
	}

	/*SP 動画*/
	#bb_campaign .area_cm {
		margin: 4vw auto 0;
	}
	#bb_campaign .area_campaign + .area_cm {
				margin-top: 8vw;
	}

	#bb_campaign .area_cm .grid_pc {
		display: none;
	}

	#bb_campaign .area_cm .grid_sp {
		width: 100%;
		margin: 4vw auto 0;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
		gap: 8vw;
	}

	#bb_campaign .area_cm .cmmv {
		width: 72vw;
		height: 135.2vw;
	}

	#bb_campaign .area_cm .cmmv div a {
		display: block;
		width: 100%;
	}

	#bb_campaign .area_cm .cmmv .thumnail {
		position: relative;
	}

	#bb_campaign .area_cm .cmmv .thumnail::after {
		content: "";
		display: block;
		position: absolute;
		background: url(/beer/beerball/assets2025/img/top/icon_player.svg) no-repeat;
		width: 17.6vw;
		height: 17.6vw;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#bb_campaign .area_cm .cmmv div p {
		display: block;
		text-align: center;
		font-size: 3.733333333vw;
		margin: 2.4vw 0 0;
	}

/*動画サイズ変更*/
	.modal-video-body {
		max-width: 84vw;
		padding: 0 4vw;
	}


	/*------------------------------------------------------------
[SP] #bb_products
------------------------------------------------------------ */
	#bb_products .inner {
		;
		padding: 6.8vw 0 10vw;
	}

	#bb_products h2.tl_section_middle {
		display: block;
		font-size: 5.6vw;
		font-weight: bold;
		text-align: center;
		margin-top: 2.4vw;
	}

	#bb_products .grid {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
	}

	#bb_products .area_prd {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
		width: 80vw;
		margin: 0 auto;
		mix-blend-mode: darken;
	}

	#bb_products .area_prd figure {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		margin: 6.666666667vw 0;
		padding-bottom: 5.6vw;
		border-bottom: 1px solid #000;
		border-image: linear-gradient(to right, #fff, #000, #fff) 1;
	}

	#bb_products .major figure img {
		width: 33.6vw;
		margin-bottom: 4.8vw;
	}

	#bb_products .limited figure {
		margin-top: 15.46666667vw;
	}

	#bb_products .limited figure img {
		width: 63.86666667vw;
	}

	#bb_products .area_prd .prd_name {
		margin: 0;
		font-size: 6.666666667vw;
		font-weight: bold;
	}

	#bb_products .area_prd .prd_release {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 3.6vw auto 5.066666667vw;
		width: 36vw;
		height: 9.333333333vw;
		font-size: 3.733333333vw;
		font-weight: bold;
		background: #cfedf0;
	}

	#bb_products .area_prd .prd_name_sub {
		margin: 3.6vw 0 0;
		font-size: 3.733333333vw;
		font-weight: bold;
	}

	#bb_products .area_prd dt,
	#bb_products .area_prd dd {
		display: inline-block;
		font-size: 4.266666667vw;
		line-height: 1.8;
	}

	#bb_products .area_prd .prd_outline {
		display: block;
		margin: 5.6vw 0 0;
		text-align: center;
		font-size: 3.733333333vw;
		line-height: 1.8;
	}


}