@charset "utf-8";

/* ======================================
プロジェクトオリジン
====================================== */

img {
    width: 100%;
    height: 100%;
}
main{
	max-width: 1200px;
    display: block;
    margin:80px auto 0px;
}
/* 導入 */
.intro {
	padding: 13.3334% 0 66.6667%;
	color: #280d04;
	background: url(../img/project_orgjin/intro_bg_sp.jpg) no-repeat center bottom / 100% auto;
}

.intro_inner {
	padding: 0 6.6667%;
}

.intro_tl {
	margin-bottom: 1em;
	font-weight: bold;
	font-size: 20px;
	line-height: 1.5;
}

.intro_tl span {
	display: block;
	margin-bottom: 1em;
	font-weight: normal;
	font-size: 10px;
	line-height: 1em;
}

.intro_txt {
	font-size: 12px;
	line-height: 1.75;
}

.intro_img {
	width: 60%;
	margin: 6.15385% auto 0;
}

@media (min-width: 768px) {
	.intro {
		padding: 150px 0 550px;
		background-image: url(../img/project_orgjin/intro_bg_pc.jpg);
	}

	.intro_inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 1000px;
		margin: 0 auto;
		padding: 0;
	}

	.intro_cont {
		flex: 1;
	}

	.intro_tl {
		font-size: 40px;
	}

	.intro_tl span {
		font-size: 14px;
		line-height: 20px;
	}

	.intro_txt {
		font-size: 13px;
		line-height: 28px;
	}

	.intro_img {
		flex-basis: 493px;
		margin: 0 -60px 0 60px;
	}
}

/* プロジェクト・オリジンのコーヒーの魅力 */
.project_orgjin {
	padding-top: 6.6667%;
	color: #2c1b1e;
}

.project_orgjin_logo {
	width: 26.4%;
	margin: 0 auto 6.6667%;
}

.project_orgjin_tl,
.project_orgjin_tm {
	font-weight: bold;
	line-height: 1.25;
	text-align: center;
}

.project_orgjin_tl {
	font-size: 12px;
}

.project_orgjin_tm {
	margin-top: 0.25em;
	font-size: 16px;
}

.project_orgjin_box {
	position: relative;
	z-index: 2;
	margin: 6.6667% 6.6667% 0;
	padding: 6.6667%;
	background-color: #fff;
	border-radius: 5px;
}

.project_orgjin_txt {
	font-size: 12px;
	line-height: 2;
}

.project_orgjin_img {
	width: 72.7273%;
	margin: 7.2728% auto 0;
	overflow: hidden;
	border-radius: 5px;
}

.project_orgjin_name {
	display: flex;
	justify-content: space-between;
	margin-top: 7.2728%;
	line-height: 14px;
}

.project_orgjin_name > p:first-child {
	font-size: 10px;
}

.project_orgjin_name > div {
	width: 1px;
	margin: 0 10px;
	background-color: #bfbabb;
}

.project_orgjin_name > p:last-child {
	font-size: 12px;
}

.project_orgjin_name > p:last-child > span {
	display: block;
	font-size: 10px;
}

@media (min-width: 768px) {
	.project_orgjin {
		padding: 100px 0 150px;
	}

	.project_orgjin_logo {
		width: 198px;
		margin: 0 auto 50px;
	}

	.project_orgjin_tl {
		font-size: 24px;
	}

	.project_orgjin_tm {
		margin-top: 0.25em;
		font-size: 32px;
	}

	.project_orgjin_box {
		display: flex;
		align-items: center;
		width: 1000px;
		height: 400px;
		margin: 100px auto 0;
		padding: 0 0 0 140px;
		background: #fff url(../img/project_orgjin/project_orgjin_img.jpg) no-repeat right top;
		border-radius: 10px;
	}

	.project_orgjin_inner {
		width: 360px;
	}

	.project_orgjin_txt {
		font-size: 14px;
	}

	.project_orgjin_img {
		display: none;
	}
	.project_orgjin_name {
		margin-top: 70px;
		line-height: 20px;
	}

	.project_orgjin_name > p:first-child {
		font-size: 13px;
	}

	.project_orgjin_name > p:last-child {
		font-size: 20px;
	}

	.project_orgjin_name > p:last-child > span {
		font-size: 12px;
	}
}

/* 説明 */
.arc_odd::before {
	z-index: 1;
}

.item_wrapper {
	margin-top: -33.3334%;
}

.item {
	padding: 8% 6.6667% 12%;
	color: #fff;
	background-color: #280d04;
}

.item.first {
	padding-top: 45.3334%;
}

.item.even {
	background-color: #2e241e;
}

.arc_odd::before {
	background: url(../img/project_orgjin/arc_odd.svg) no-repeat center top / 100% auto;
}

.arc_even::before {
	background: url(../img/project_orgjin/arc_even.svg) no-repeat center top / 100% auto;
}

.item_inner {
	display: flex;
	flex-direction: column-reverse;
}

.item_tl {
	font-weight: bold;
	font-size: 20px;
	line-height: 1.5;
}

.item_txt {
	margin-top: 2.5em;
	font-size: 12px;
	line-height: 1.75;
}

.item_img {
	margin-top: 6.1539%;
	overflow: hidden;
	border-radius: 5px;
}

@media (min-width: 768px) {
	.item_wrapper {
		margin-top: 0;
	}

	.item {
		padding: 70px 0 90px;
	}

	.item.first {
		padding-top: 70px;
	}

	.item_inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 1000px;
		margin: 0 auto;
	}

	.item.even .item_inner {
		flex-direction: row-reverse;
	}

	.item_tl {
		font-size: 28px;
	}

	.item_txt {
		margin-top: 30px;
		font-size: 13px;
		line-height: 28px;
	}

	.item_img {
		flex-basis: 500px;
		margin: 0 130px 0 0;
		border-radius: 10px;
	}

	.item.even .item_img {
		margin: 0 0 0 130px;
	}

	.item_cont {
		flex: 1;
	}
}