@charset "utf-8";

/*
===== craft_beer_index ===========================*/

footer {
	background: #F1E2B0;
}

/* .c-headline_01
--------------------*/
#craft_beer_index .c-headline_01 .bg {
	background: url(/assets/craft_beer/img/index_bg_main.jpg) no-repeat 50% 50%;
	background-size: cover;
}

#craft_beer_index .c-headline_01 h1 {
	min-width: 312px;
	padding-left: 32px;
	padding-right: 32px;
}

@media (max-width: 768px) {
	#craft_beer_index .c-headline_01 .bg {
		background: url(/assets/craft_beer/img/index_bg_main_sp.jpg) no-repeat 50% 50%;
		background-size: cover;
	}

	#craft_beer_index .c-headline_01 h1 {
		min-width: 248px;
		padding-left: 25px;
		padding-right: 25px;
	}
}

/* p-desc
--------------------*/
#craft_beer_index .p-desc {
	padding: 64px 0 0;
}

#craft_beer_index .p-desc h2 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.4;
}

#craft_beer_index .p-desc .wrap + h2 {
	margin: 112px 0 0;
}

#craft_beer_index .p-desc .wrap {
	display: flex;
	gap: calc((38 / 1200) * 100%);
	margin: 56px 0 0;
}

#craft_beer_index .p-desc .wrap.rtl {
	flex-direction: row-reverse;
}

#craft_beer_index .p-desc .wrap figure {
	width: calc((594 / 1200) * 100%);
}

#craft_beer_index .p-desc .wrap figure img {
	border-radius: 10px;
}

#craft_beer_index .p-desc .wrap div {
	flex: 1;
	margin: 16px 0 0;
}

#craft_beer_index .p-desc .wrap .note {
	margin: 24px 0 0;
}

#craft_beer_index .p-desc .wrap .note li {
	margin: 0 0 0 2.5em;
	text-indent: -2.5em;
}

#craft_beer_index .p-desc .wrap .note li span {
	display: inline-block;
	width: 2.5em;
	text-indent: 0;
}

@media (max-width: 768px) {
	#craft_beer_index .p-desc {
		padding: 32px 0 0;
	}

	#craft_beer_index .p-desc h2 {
		font-size: 24px;
		line-height: calc(32 / 24);
	}

	#craft_beer_index .p-desc .wrap + h2 {
		margin: 56px 0 0;
	}

	#craft_beer_index .p-desc .wrap {
		display: block;
		margin: 24px 0 0;
	}

	#craft_beer_index .p-desc .wrap figure {
		width: 100%;
	}

	#craft_beer_index .p-desc .wrap div {
		margin: 24px 0 0;
	}

	#craft_beer_index .p-desc .wrap .note {
		margin: 24px 0 0;
		font-size: 14px;
	}
}

/* p-process
--------------------*/
#craft_beer_index .p-process {
	padding: 40px 0 112px;
}

#craft_beer_index .p-process h3 {
	position: relative;
	font-size: 20px;
	font-weight: 700;
	line-height: calc(28 / 20);
}

#craft_beer_index .p-process h3:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #A48635;
}

#craft_beer_index .p-process h3 span {
	position: relative;
	display: inline-block;
	padding: 0 12px 0 0;
	background: #EABF4B;
	z-index: 2;
}

#craft_beer_index .p-process .wrap {
	margin: 40px 0 0;
}

#craft_beer_index .p-process .wrap figure img {
	border-radius: 10px;
}

#craft_beer_index .p-process .flow {
	display: flex;
	gap: calc((40 / 1200) * 100%);
	margin: 40px 0 0;
}

#craft_beer_index .p-process .flow li {
	flex: 1;
	padding: 24px;
	background: #F1E2B0;
	border-radius: 10px;
}

#craft_beer_index .p-process .flow dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto;
	padding: 0 0 4px 1px;
	background: #F8E133;
	border: 1px solid #000000;
	border-radius: 52px;
	font-size: 32px;
	font-weight: 700;
}

#craft_beer_index .p-process .flow dd {
	margin: 16px 0 0;
	padding: 0 0 24px;
	border-bottom: 1px solid #A99E7B;
	font-size: 20px;
	font-weight: 700;
	line-height: calc(28 / 20);
	text-align: center;
}

#craft_beer_index .p-process .flow p {
	margin: 24px 0 0;
	font-size: 14px;
}

@media (max-width: 1200px) {
	#craft_beer_index .p-process .flow {
		flex-wrap: wrap;
		justify-content: center;
		gap: 40px;
	}

	#craft_beer_index .p-process .flow li {
		flex: none;
		width: calc((100% - 80px) / 3);
	}
}

@media (max-width: 768px) {
	#craft_beer_index .p-process {
		padding: 32px 0 56px;
	}

	#craft_beer_index .p-process h3 {
		font-size: 18px;
		line-height: calc(24 / 18);
	}

	#craft_beer_index .p-process .wrap {
		margin: 24px calc((20 / 335) * -100%) 0;
		overflow-x: scroll;
	}

	#craft_beer_index .p-process .wrap figure img {
		width: auto;
		height: 268px;
		margin: 0 calc((20 / 375) * 100%);
	}

	#craft_beer_index .p-process .flow {
		display: block;
		margin: 24px 0 0;
	}

	#craft_beer_index .p-process .flow li {
		width: 100%;
		padding: 16px 32px 24px;
	}

	#craft_beer_index .p-process .flow li + li {
		margin: 16px 0 0;
	}

	#craft_beer_index .p-process .flow dl {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 0 0 16px;
		border-bottom: 1px solid #A99E7B;
	}

	#craft_beer_index .p-process .flow dt {
		width: 36px;
		height: 36px;
		padding: 0 0 3px;
		font-size: 24px;
	}

	#craft_beer_index .p-process .flow dd {
		flex: 1;
		margin: 0;
		padding: 0;
		border-bottom: none;
		font-size: 16px;
		line-height: calc(22 / 16);
		text-align: left;
	}

	#craft_beer_index .p-process .flow p {
		margin: 20px 0 0;
		font-size: 14px;
	}
}

/* p-link
--------------------*/
#craft_beer_index .p-link {
	padding: 56px 0 112px;
	background: #F1E2B0;
}

#craft_beer_index .p-link .wrap {
	display: flex;
	gap: calc((64 / 1200) * 100%);
}

#craft_beer_index .p-link .wrap > div {
	flex: 1;
}

#craft_beer_index .p-link .wrap figure img {
	border-radius: 10px;
}

#craft_beer_index .p-link .wrap dt {
	margin: 24px 0 0;
	font-size: 32px;
	font-weight: 700;
	line-height: calc(44 / 32);
}

#craft_beer_index .p-link .wrap dd {
	margin: 24px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: calc(28 / 20);
}

#craft_beer_index .p-link .wrap p {
	min-height: 4.8em;
	margin: 24px 0 32px;
}

@media (max-width: 768px) {
	#craft_beer_index .p-link {
		padding: 48px 0 56px;
	}

	#craft_beer_index .p-link .wrap {
		display: block;
	}

	#craft_beer_index .p-link .wrap > div + div {
		margin: 56px 0 0;
	}

	#craft_beer_index .p-link .wrap dt {
		font-size: 20px;
		line-height: calc(28 / 20);
	}

	#craft_beer_index .p-link .wrap dd {
		margin: 16px 0 0;
		font-size: 16px;
		line-height: calc(22 / 16);
	}

	#craft_beer_index .p-link .wrap p {
		min-height: auto;
		margin: 16px 0 24px;
	}
}