@charset "utf-8";

/*------------------------------------------------------------
BEERBALL　下層ページ　2025/03
------------------------------------------------------------ */
/*------------------------------------------------------------
[COMMON] #bb_recipe_top
------------------------------------------------------------ */
#bb_recipe_top h2.tl_section {
	position: relative;
	z-index: 1;
}

#bb_recipe_top .tl_below .line1 {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
	color: transparent;
	margin: 0;
	background: url(/beer/beerball/assets2025/img/recipe/tl_recipe_l1.svg) no-repeat center center /contain;
}

#bb_recipe_top .tl_below .line2 {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
	color: transparent;
	margin: 0;
	background: url(/beer/beerball/assets2025/img/recipe/tl_recipe_l2.svg) no-repeat center center /contain;
}

/*------------------------------------------------------------
[COMMON] #bb_recipe
------------------------------------------------------------ */
#bb_recipe_top .variations a .set,
#bb_recipe .recipe_visual .mv_area {
	background: no-repeat left top / cover;

	&#acerola {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_acerola.webp);
	}

	&#cola {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_cola.webp);
	}

	&#orange {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_orange.webp);
	}

	&#standard {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_standard.webp);
	}

	&#lemon {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_lemon.webp);
	}

	&#clear {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_clear.webp);
	}

	&#tea {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_tea.webp);
	}

	&#melon {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_melon.webp);
	}

	&#strong {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_strong.webp);
	}

	&#bluesoda {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_bluesoda.webp);
	}

	&#ramune {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_ramune.webp);
	}

	&#ginger {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_ginger.webp);
	}

	&#milk {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_milk.webp);
	}

	&#grape {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_grape.webp);
	}

	&#mild {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_mild.webp);
	}

	&#peach {
		background-image: url(/beer/beerball/assets2025/img/recipe/bg_peach.webp);
	}
}

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

	/*------------------------------------------------------------
[PC] #bb_recipe_top
------------------------------------------------------------ */
	#bb_recipe_top .inner {
		padding: 35px 0 100px;
	}

	#bb_recipe_top h2.tl_section {
		display: block;
		width: 100%;
		margin: 20px 0 30px;
		font-size: 23px;
		font-weight: bold;
		text-align: center;
	}

	#bb_recipe_top .tl_below {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-start;
		position: relative;
		z-index: 1;
	}

	#bb_recipe_top .tl_below .line1 {
		display: block;
		width: 327px;
		height: 63px;
		margin: 0 -39px;
	}

	#bb_recipe_top .tl_below .line2 {
		width: 327px;
		height: 63px;
	}

	#bb_recipe_top .leading {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-end;
		width: 1030px;
		margin: -25px auto 0;
		mix-blend-mode: darken;
	}

	#bb_recipe_top .leading .part_txt {
		padding: 0 0 30px 60px;
		font-size: 19px;
		line-height: 1.8;
		text-align: center;
	}

	#bb_recipe_top .leading .part_img {
		width: 498px;
		height: 210px;
	}

	#bb_recipe_top ul.variations {
		margin: 35px auto 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 45px 20px;
	}

	#bb_recipe_top .variations li {
		width: 230px;
	}

	#bb_recipe_top .variations a {
		display: block;
	}

	#bb_recipe_top .variations a .img_area {
		width: 230px;
		height: 276px;
		border-radius: 8px;
		overflow: hidden;

		& .set {
			height: 276px;
			padding: 30px 0 0;
			transition: 0.3s;
		}

		& .name {
			display: block;
			margin: 0 auto;
			width: 125px;
			height: 27px;
		}

		& .glass {
			display: block;
			margin: 15px auto 0;
			width: 150px;
			height: 180px;
			transform: translateX(22px);
		}
	}

	#bb_recipe_top .variations a:hover .set {
		transform: scale(1.08);
	}

	#bb_recipe_top .variations a .rcp_name {
		font-size: 18px;
		font-weight: bold;
		margin: 20px 0 0;
		text-align: center;
	}

	/*------------------------------------------------------------
[PC] #bb_recipe
------------------------------------------------------------ */
	#bb_recipe .inner {
		padding: 35px 0 100px;
	}

	#bb_recipe h2.tl_section_middle {
		display: block;
		margin-top: 15px;
		font-size: 40px;
		font-weight: bold;
		text-align: center;
	}

	#bb_recipe .recipe_visual {
		width: 480px;
		margin: 30px auto 0;
		position: relative;
	}

	#bb_recipe .recipe_visual .mv_area {
		width: 420px;
		height: 470px;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		border-radius: 30px 30px 0 0;
	}

	#bb_recipe .recipe_visual .mv_area .name {
		display: block;
		margin: 40px auto 0;
		width: 234px;
		height: 50px;
	}

	#bb_recipe .recipe_visual .mv_area .glass {
		display: block;
		margin: 20px auto 0;
		width: 245px;
		height: 302px;
		transform: translateX(35px);
	}

	#bb_recipe .recipe_visual .mv_area .number {
		position: absolute;
		top: 416px;
		left: 0;
		width: 100%;
		padding: 0 0 0 10px;
		font-size: 27px;
		font-weight: bold;
		text-align: center;
	}

	#bb_recipe .recipe_visual .btn_feed.pre {
		position: absolute;
		top: 190px;
		left: 0;

		& a {
			display: block;
			width: 60px;
			height: 60px;
			text-indent: -9999px;
			border-radius: 30px;
			background: linear-gradient(270deg, #025368 0%, #058298 50%, #025368 100%) 100% 50% / 200%;
			z-index: 10;
			transition: all 0.3s ease;
		}

		& a:hover {
			background-position: 0 50%;
		}

		& a::after {
			content: "";
			display: block;
			position: absolute;
			left: 27px;
			top: 24px;
			width: 10px;
			height: 10px;
			border-top: 2px solid #fff;
			border-left: 2px solid #fff;
			transform: rotate(-45deg);
		}
	}

	#bb_recipe .recipe_visual .btn_feed.next {
		position: absolute;
		top: 190px;
		right: 0;

		& a {
			display: block;
			width: 60px;
			height: 60px;
			text-indent: -9999px;
			border-radius: 30px;
			background: linear-gradient(90deg, #025368 0%, #058298 50%, #025368 100%) 0% 50% / 200%;
			z-index: 10;
			transition: all 0.3s ease;
		}

		& a:hover {
			background-position: 100% 50%;
		}

		& a::after {
			content: "";
			display: block;
			position: absolute;
			left: 22px;
			top: 24px;
			width: 10px;
			height: 10px;
			border-top: 2px solid #fff;
			border-left: 2px solid #fff;
			transform: rotate(135deg);
		}
	}

	#bb_recipe .recipe_order {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-start;
		position: relative;
		width: 820px;
		margin: 0 auto;
		padding: 40px 0;
		background: #fff;
		border-radius: 40px;
		overflow: hidden;
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
	}

	#bb_recipe .recipe_order .ingredients {
		width: 488px;
	}

	#bb_recipe .recipe_order .steps {
		width: 332px;
	}

	#bb_recipe .recipe_order .ingredients ul {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-start;
	}

	#bb_recipe .recipe_order .ingredients li {
		width: 90px;
		height: 241px;
		position: relative;
		text-align: center;

		&.bb_bottle {
			width: 80px;
		}
	}

	#bb_recipe .recipe_order .ingredients li figure img {
		width: 50px;
		height: 178px;
		object-fit: contain;
	}

	#bb_recipe .recipe_order .ingredients li figcaption {
		display: block;
		position: absolute;
		top: 190px;
		left: 0;
		width: 100%;
		font-size: 13px;
		line-height: 1.3;
		text-align: center;
		font-weight: bold;
	}

	#bb_recipe .recipe_order .ingredients li+li {
		margin-left: 40px;

		&::before {
			content: "";
			display: block;
			position: absolute;
			background: #000;
			width: 30px;
			height: 1px;
			top: 90px;
			left: -20px;
			transform: translate(-50%, -50%) rotate(45deg);
			z-index: 1;
		}

		&::after {
			content: "";
			display: block;
			position: absolute;
			background: #000;
			width: 30px;
			height: 1px;
			top: 90px;
			left: -20px;
			transform: translate(-50%, -50%) rotate(-45deg);
		}
	}

	#bb_recipe .recipe_order .steps h3 {
		margin: 0 0 0 90px;
		padding: 0 5px;
		font-size: 20px;
		width: fit-content;
		position: relative;

		&::after {
			content: "";
			display: block;
			position: absolute;
			top: 15px;
			left: 0;
			width: 100%;
			height: 14px;
			background: #c0feff;
			mix-blend-mode: darken;
		}
	}

	#bb_recipe .recipe_order .steps ol {
		margin: 40px 0 0;
		padding: 0 0 0 1.5em;
		width: fit-content;
	}

	#bb_recipe .recipe_order .steps li {
		list-style-type: decimal;
		margin: 20px 0 0;
	}

	#bb_recipe .link_return a {
		display: block;
		position: relative;
		width: fit-content;
		margin: 40px auto 0;
		padding: 0 40px;
		font-size: 24px;
		font-weight: bold;

		&:hover {
			text-decoration: underline;
		}

		&::before {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 7px;
			width: 10px;
			height: 10px;
			border-bottom: 2.5px solid #068299;
			border-left: 2.5px solid #068299;
			transform: rotate(45deg);
		}

	}

	/*------------------------------------------------------------
[PC] #bb_qa
------------------------------------------------------------ */
	#bb_qa .inner {
		padding: 40px 0 100px;
	}

	#bb_qa .faq_list {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 20px;
		margin: 60px 0 0;
	}

	#bb_qa .faq_list dl {
		width: 530px;
		padding: 30px 24px 30px 28px;
		overflow: hidden;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 0 10px 0 rgba(6, 130, 153, .25);
	}

	#bb_qa .faq_list dt {
		position: relative;
		min-height: 41px;
		padding: 0 0 0 58px;
		font-size: 18px;
		font-weight: bold;
		line-height: 41px;

		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 41px;
			height: 41px;
			background: #068299 url(/beer/beerball/assets2025/img/qa/text_q.svg) no-repeat center center /17px;
			border-radius: 21px;
		}
	}

	#bb_qa .faq_list dd {
		position: relative;
		min-height: 41px;
		margin: 20px 0 0;
		padding: 0 0 0 58px;
		font-size: 16px;
		line-height: 1.75;

		&.single {
			padding-top: 7px;
		}

		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 41px;
			height: 41px;
			background: #bb8800 url(/beer/beerball/assets2025/img/qa/text_a.svg) no-repeat center center /17px;
			border-radius: 21px;
		}
	}

	#suntory_contents #bb_qa .btn_next {
		margin: 40px auto 0;
		width: 340px;
		height: 50px;
	}

	#suntory_contents #bb_qa .btn_next a {
		font-size: 17px;

		&::after {
			top: 21px;
		}
	}



}

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

	/* for SP */

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

	#bb_recipe_top h2.tl_section {
		display: block;
		width: 100%;
		margin: 4vw 0 6.8vw;
		font-size: 5.6vw;
		font-weight: bold;
		text-align: center;
	}

	#bb_recipe_top .tl_below .line1 {
		display: block;
		margin: 0 auto;
		width: 53.33333333vw;
		height: 10.4vw;
	}

	#bb_recipe_top .tl_below .line2 {
		display: block;
		margin: 0 auto;
		width: 53.33333333vw;
		height: 10.4vw;
		transition: all 1s ease-out 1.5s;
	}

	#bb_recipe_top .leading {
		margin: 6.8vw 0 0;
	}

	#bb_recipe_top .leading .part_txt {
		font-size: 4vw;
		line-height: 1.65;
		text-align: center;
	}

	#bb_recipe_top .leading .part_img {
		width: 92vw;
		margin: -5.2vw auto 0;
		mix-blend-mode: darken;
	}

	#bb_recipe_top ul.variations {
		margin: 2.4vw auto 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 4vw 6.666666667vw;
	}

	#bb_recipe_top .variations li {
		width: 40vw;
	}

	#bb_recipe_top .variations a {
		display: block;
	}

	#bb_recipe_top .variations a .img_area {
		width: 40vw;
		height: 48vw;
		border-radius: 2.133333333vw;
		overflow: hidden;

		& .set {
			height: 48vw;
			padding: 5.6vw 0 0;
		}

		& .name {
			display: block;
			margin: 0 auto;
			width: 24vw;
			height: 5.333333333vw;
		}

		& .glass {
			display: block;
			margin: 2.4vw auto 0;
			width: 25.6vw;
			height: 31.73333333vw;
			transform: translateX(4vw);
		}
	}

	#bb_recipe_top .variations a .rcp_name {
		font-size: 4vw;
		font-weight: bold;
		margin: 3.2vw 0 0;
		text-align: center;
	}

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

	#bb_recipe h2.tl_section_middle {
		display: block;
		margin: 4vw 0 0;
		font-size: 8vw;
		font-weight: bold;
		text-align: center;
	}

	#bb_recipe .recipe_visual {
		width: 100%;
		margin: 5.6vw 0 0;
		position: relative;
	}

	#bb_recipe .recipe_visual .mv_area {
		width: 73.33333333vw;
		height: 81.33333333vw;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		border-radius: 5.6vw 5.6vw 0 0;
	}

	#bb_recipe .recipe_visual .mv_area .name {
		display: block;
		margin: 8vw auto 0;
		width: 36.26666667vw;
		height: 7.733333333vw;
	}

	#bb_recipe .recipe_visual .mv_area .glass {
		display: block;
		margin: 4vw auto 0;
		width: 42.13333333vw;
		height: 52vw;
		transform: translateX(5.6vw);
	}

	#bb_recipe .recipe_visual .mv_area .number {
		position: absolute;
		top: 72vw;
		left: 0;
		width: 100%;
		font-size: 5.333333333vw;
		font-weight: bold;
		text-align: center;
	}

	#bb_recipe .recipe_visual .btn_feed.pre {
		position: absolute;
		top: 33.33333333vw;
		left: 0;

		& a {
			display: block;
			width: 16vw;
			height: 14.66666667vw;
			text-indent: -9999px;
			border-radius: 0 7.333333333vw 7.333333333vw 0;
			background: linear-gradient(270deg, #025368 0%, #058298 100%);
			background-position: 0 0;
			background-size: 100% auto;
			z-index: 10;
		}

		& a::after {
			content: "";
			display: block;
			position: absolute;
			left: 7.2vw;
			top: 5.866666667vw;
			width: 10px;
			height: 10px;
			border-top: 2px solid #fff;
			border-left: 2px solid #fff;
			transform: rotate(-45deg);
		}
	}

	#bb_recipe .recipe_visual .btn_feed.next {
		position: absolute;
		top: 33.33333333vw;
		right: 0;

		& a {
			display: block;
			width: 16vw;
			height: 14.66666667vw;
			text-indent: -9999px;
			border-radius: 7.333333333vw 0 0 7.333333333vw;
			background: linear-gradient(90deg, #025368 0%, #058298 100%);
			background-position: 0 0;
			background-size: 100% auto;
			z-index: 10;
		}

		& a::after {
			content: "";
			display: block;
			position: absolute;
			left: 5.866666667vw;
			top: 5.866666667vw;
			width: 10px;
			height: 10px;
			border-top: 2px solid #fff;
			border-left: 2px solid #fff;
			transform: rotate(135deg);
		}
	}

	#bb_recipe .recipe_order {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		width: 84vw;
		margin: 0 auto;
		padding: 6.4vw 4.8vw 8vw 4.8vw;
		background: #fff;
		border-radius: 5.6vw;
		overflow: hidden;
		box-shadow: 0 0 2.666666667vw 0 rgba(0, 0, 0, .1);
	}

	#bb_recipe .recipe_order .ingredients {
		width: 100%;
	}

	#bb_recipe .recipe_order .steps {
		width: 100%;
		margin: 6.4vw 0 0;
	}

	#bb_recipe .recipe_order .ingredients ul {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: flex-start;
	}

	#bb_recipe .recipe_order .ingredients li {
		width: 21.6vw;
		height: 60vw;
		position: relative;
		text-align: center;

		&.bb_bottle {
			width: 19.2vw;
		}

		&.wlm_bottle {
			width: 24vw;
		}
	}

	#bb_recipe .recipe_order .ingredients li figure img {
		width: 12vw;
		height: 42.66666667vw;
		object-fit: contain;
	}

	#bb_recipe .recipe_order .ingredients li figcaption {
		display: block;
		position: absolute;
		top: 46.4vw;
		left: 0;
		width: 100%;
		font-size: 3.466666667vw;
		line-height: 1.3;
		text-align: center;
		font-weight: bold;
	}

	#bb_recipe .recipe_order .ingredients li+li {
		margin-left: 5.6vw;

		&::before {
			content: "";
			display: block;
			position: absolute;
			background: #000;
			width: 5.6vw;
			height: 0.266666667vw;
			top: 21.6vw;
			left: -2.4vw;
			transform: translate(-50%, -50%) rotate(45deg);
			z-index: 1;
		}

		&::after {
			content: "";
			display: block;
			position: absolute;
			background: #000;
			width: 5.6vw;
			height: 0.266666667vw;
			top: 21.6vw;
			left: -2.4vw;
			transform: translate(-50%, -50%) rotate(-45deg);
		}
	}

	#bb_recipe .recipe_order .steps h3 {
		margin: 0 auto;
		padding: 0 1.6vw;
		font-size: 4vw;
		width: fit-content;
		position: relative;

		&::after {
			content: "";
			display: block;
			position: absolute;
			top: 3.2vw;
			left: 0;
			width: 100%;
			height: 2.666666667vw;
			background: #c0feff;
			mix-blend-mode: darken;
		}
	}

	#bb_recipe .recipe_order .steps ol {
		margin: 6.666666667vw 0 0;
		padding: 0 0 0 1.5em;
		width: fit-content;
	}

	#bb_recipe .recipe_order .steps li {
		list-style-type: decimal;
		margin: 5.066666667vw 0 0;
	}

	#bb_recipe .link_return a {
		display: block;
		position: relative;
		width: fit-content;
		margin: 8vw auto 0;
		padding: 2.4vw 8vw;
		font-size: 4.533333333vw;
		font-weight: bold;

		&::before {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 3.2vw;
			width: 1.866666666666667vw;
			height: 1.866666666666667vw;
			border-bottom: 0.533333333vw solid #068299;
			border-left: 0.533333333vw solid #068299;
			transform: rotate(45deg);
		}
	}

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

	#suntory_contents #bb_qa h3.tl_aqua {
		width: 60vw;

		&::before {
			width: 60vw;
		}
	}

	#bb_qa .faq_list {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 4vw;
		margin: 8vw 0 0;
	}

	#bb_qa .faq_list dl {
		width: 92vw;
		margin: 0 auto;
		padding: 5.333333333vw;
		overflow: hidden;
		background: #fff;
		border-radius: 5.333333333vw;
		box-shadow: 0 0 2vw 0 rgba(6, 130, 153, .25);
	}

	#bb_qa .faq_list dt {
		position: relative;
		min-height: 9.6vw;
		padding: 0 0 0 14.66666667vw;
		font-size: 4vw;
		font-weight: bold;
		line-height: 1.6;

		&.single {
			padding-top: 1.6vw;
		}

		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 9.6vw;
			height: 9.6vw;
			background: #068299 url(/beer/beerball/assets2025/img/qa/text_q.svg) no-repeat center center /17px;
			border-radius: 21px;
		}
	}

	#bb_qa .faq_list dd {
		position: relative;
		min-height: 9.6vw;
		margin: 2.666666667vw 0 0;
		padding: 0 0 0 14.66666667vw;
		font-size: 3.733333333vw;
		line-height: 1.75;

		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 9.6vw;
			height: 9.6vw;
			background: #bb8800 url(/beer/beerball/assets2025/img/qa/text_a.svg) no-repeat center center /17px;
			border-radius: 21px;
		}
	}

	#suntory_contents #bb_qa .btn_next {
		margin: 8vw auto 0;
		width: 70.66666667vw;
		height: 12vw;
	}

	#suntory_contents #bb_qa .btn_next a {
		font-size: 3.733333333vw;
		letter-spacing: -0.02em;

		&::after {
			top: 5.066666667vw;
		}
	}


}