@charset "utf-8";

/*----------------------------------------------------
 牛乳見聞録
----------------------------------------------------*/
/* アクティブ表示 */
@media screen and (min-width: 835px) {
	.knowledge header .header_nav nav > ul > li:nth-child(7) {
		background-color: #3f80dc;
	}
	.knowledge header .header_nav nav > ul > li:nth-child(7)::after {
		opacity: 1;
		transform: translate(0, -17px);
	}
}
/* コンテンツカラー表示 */
.knowledge #contents_title i,
.knowledge #contents_title h2 {
	color: var(--color-knowledge);
}
.knowledge .page_content h2 {
	color: var(--color-knowledge);
	border-color: var(--color-knowledge);
}
.knowledge h3.theme_belt {
	background-color: var(--color-knowledge);
}

/* 背景色 */
.knowledge #breadcrumb {
	background-color: #f1e7d9;
}
.knowledge main {
	background-color: #ecd8bc;
}

/* コンテンツタイトル */
.knowledge #contents_vi {
	background: linear-gradient(to bottom, #ecd8bc 0%,#f8f1e7 100%);
}
.knowledge #contents_vi h2 {
	padding-left: 0;
	margin: 0 auto 28px;
}
.knowledge #contents_vi .milk_pack {
	position: absolute;
	bottom: 18px;
	left: 90px;
}
.knowledge #contents_vi .milk_polo {
	position: absolute;
	right: 82px;
	bottom: 8px;
}
.knowledge #contents_vi p {
	font-size: 0.875em;
	line-height: 1.3;
	text-align: center;
	position: absolute;
	right: 48px;
	bottom: 8px;
}
@media screen and (max-width: 834px) {
	.knowledge #contents_vi {
		overflow: hidden;
	}
	#contents_vi .contents_category {
		width: auto;
	}
	.knowledge #contents_vi h2 {
		height: auto;
	}
	.knowledge #contents_vi .milk_pack {
		width: 78px;
		left: calc((50% - 340px) + 162px);
		bottom: 8px;
	}
	.knowledge #contents_vi .milk_polo {
		width: 128px;
		right: calc((50% - 340px) + 132px);
		bottom: -43px;
	}
	.knowledge #contents_vi p {
		font-size: 0.6em;
		right: calc((50% - 340px) + 264px);
	}
}

.intro {
	font-size: 1.125em;
	font-weight: 700;
	margin: 0 0 30px;
}
.person {
	border: 3px solid #ecd8bc;
	padding: 6px;
	text-align: center;
	color: var(--color-knowledge);
	border-radius: 10px;
	font-size: 0.9375em;
	line-height: 1.6;
	width: 560px;
	margin: 0 auto 70px;
	position: relative;
}
.person img {
	position: absolute;
	top: -10px;
	left: -64px;
}
.story {
	background-image:	url(../images/paper_base_upper.jpg),
										url(../images/paper_base_bottom.jpg);
	background-repeat: no-repeat,no-repeat;
	background-position: top left,bottom left;
	background-size: 100%,100%;
	min-height: 520px;
	margin: 0 0 70px;
	padding: 40px 0;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.story .inner {
	z-index: 20;
	padding-left: 60px;
}
.story .inner h3 {
	font-family: 'New Tegomin', serif;
	font-weight: normal;
	font-size: 2.5em;
	line-height: 1.4;
	color: var(--color-knowledge);
	letter-spacing: 0;
	margin: 0 0 36px -4px;
}
.story .inner .explain {
	line-height: 1.8;
	text-align: justify;
	width: 470px;
	margin: 0 0 20px;
}
.story .inner .explain strong {
	font-size: 1.125em;
}
.story .inner .explain_list {
	line-height: 1.6;
	text-align: justify;
	width: 470px;
	margin: 0 0 20px;
}
.story .inner .explain_list li {
	margin: 0 0 10px;
	text-indent: -1em;
	padding-left: 1em;
}
.story .inner .caution {
	color: #666666;
	font-size: 0.875em;
	line-height: 1.4;
}
.story .figure {
	position: absolute;
	z-index: 9;
}
.story .milkpolo {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
}

/* 個別設定 */
.vol_01 .figure {
	top: 30px;
	right: 160px;
}
.vol_02 .figure {
	top: 60px;
	right: 180px;
}
.vol_03 .figure {
	top: 185px;
	right: 218px;
}
.vol_03 .inner .explain {
	width: 600px;
}
.vol_04 .figure {
	top: 122px;
	right: 230px;
}
.vol_04 .inner .explain_list {
	width: 600px;
}
.vol_05 .inner .explain {
	width: 964px;
	height: 440px;
}
.vol_05 .figure {
	top: 298px;
	left: 180px;
	width: 496px;
}
.vol_05 .caution {
	line-height: 1.3;
	margin: 10px 0 0;
}
.vol_06 .inner .explain {
	width: 740px;
}
.vol_06 .figure {
	top: 162px;
	right: 100px;
}
.vol_06 .caution {
	line-height: 1.3;
	text-indent: -2.8em;
	padding-left: 2.8em;
}
.vol_07 .figure {
	top: 102px;
	right: 166px;
}
.vol_07 .caution {
	width: 470px;
	padding-left: 0;
	text-indent: 0;
}
.vol_08 .figure {
	top: 196px;
	right: 288px;
}
.vol_09 .figure {
	top: 178px;
	right: 270px;
}
.vol_10 .figure {
	top: 250px;
	right: 290px;
}
.vol_11 .inner .explain {
	width: 600px;
}
.vol_11 .figure {
	top: 170px;
	right: 250px;
}
.vol_12 .figure {
	top: 220px;
	right: 300px;
}
.vol_13 .inner .explain {
	width: 600px;
}
.vol_13 .figure {
	top: 110px;
	right: 150px;
}
.vol_14 .inner .explain {
	width: 560px;
}
.vol_14 .figure {
	top: 210px;
	right: 250px;
}
.vol_15 .figure {
	top: 130px;
	right: 200px;
}
.vol_16 .inner .explain {
	width: 500px;
}
.vol_16 .figure {
	top: 200px;
	right: 100px;
}
.vol_16 .figure {
	top: 200px;
	right: 100px;
}
.vol_17 .inner .explain {
	width: 640px;
}
.vol_17 .figure {
	top: 130px;
	right: 250px;
	max-height: 280px;
	object-fit: contain;
}
.vol_18 .figure {
	top: 200px;
	right: 280px;
}
.vol_19 .figure {
	top: 200px;
	right: 300px;
}
.vol_20 .figure {
	top: 220px;
	right: 400px;
}
.vol_21 .figure {
	top: 240px;
	right: 320px;
}
.vol_22 .inner .explain {
	width: 560px;
}
.vol_22 .figure {
	top: 180px;
	right: 240px;
}
.vol_23 .inner .explain {
	width: 600px;
}
.vol_23 .figure {
	top: 140px;
	right: 180px;
}
.vol_24 .inner .explain {
	width: 560px;
}
.vol_24 .figure {
	top: 160px;
	right: 240px;
}
.vol_25 .figure {
	top: 200px;
	right: 320px;
}
.vol_26 .figure {
	top: 150px;
	right: 220px;
}
.vol_26 .inner .explain {
	width: 440px;
}
.vol_27 .figure {
	top: 200px;
	right: 300px;
}
.vol_27 .inner .explain {
	width: 540px;
}
.vol_28 .figure {
	top: 200px;
	right: 260px;
}
.vol_28 .inner .explain {
	width: 560px;
}
.vol_29 .figure {
	top: 180px;
	right: 240px;
}
.vol_29 .inner .explain {
	width: 560px;
}
.vol_30 .figure {
	top: 180px;
	right: 200px;
}
.vol_30 .inner .explain {
	width: 400px;
}
.vol_31 .figure {
	top: 220px;
	right: 340px;
}
.vol_32 .figure {
	top: 220px;
	right: 230px;
}
.vol_32 .inner .explain {
	width: 400px;
}

/* バックナンバー */
.backnumber {
	margin: 80px 0 0;
}
.backnumber_title {
	margin: 0 0 40px;
	padding: 16px 20px;
	width: 100%;
	background: linear-gradient(to bottom, #f7eacf 10%,#ffffff 100%);
	height: 75px;
	border-radius: 10px 10px 0 0;
}
.backnumber_title img {
	transform: rotate(-3deg) translateY(-20px);
}

/* プレゼントページ */
.knowledge .present_title .inner:hover {
	opacity: inherit;
}
.present_detail {
	width: 860px;
	margin: 60px auto;
	background-color: #fbe6c8;
	box-shadow: 0px 0px 15px 15px #fbe6c8;
	border-radius: 10px;
	padding: 30px 50px 40px;
	line-height: 1.6;
	text-align: center;
}
.present_detail h3 {
	text-align: center;
	font-size: 2.0em;
	background: linear-gradient(transparent 60%, #fff3b0 60%);
	display: inline;
}
.present_detail.end h3.end {
	display: block;
}
.present_detail .inner {
	display: flex;
	grid-gap: 10px;
	align-items: center;
	margin: 20px 0 30px;
	position: relative;
	text-align: justify;
}
.present_detail .inner .lottery {
	font-size: 1.5em;
	margin: 0 0 15px;
}
.present_detail .inner .itemized {
	margin: 0 0 8px;
	padding-left: 1em;
	text-indent: -1em;
}
.present_detail .inner .itemized span {
	color: var(--color-knowledge);
}
.present_detail .inner .caution {
	font-size: 0.9375em;
	color: #666666;
}
.present_detail .inner .milkpolo {
	position: absolute;
	bottom: -134px;
	right: -120px;
}
.present_detail .linkBtn {
	width: 360px;
	margin: 0 auto;
}
.present_detail.end li {
	margin: 0 auto;
}
.present_detail.end .lottery {
	font-size: 1.3em;
	line-height: 2;
	text-align: center;
	margin: 30px 0 0;
}
.page_content > .linkBtn {
	width: 280px;
	margin: 0 auto;
}
@media screen and (max-width: 834px) {
	.intro {
		font-size: 1.066em;
		line-height: 1.6;
	}
	.person {
		width: 100%;
		max-width: 600px;
		margin: 0 auto 40px;
		line-height: 1.5;
		text-align: left;
	}
	.person img {
		position: static;
		float: left;
		margin: 0 20px 20px 0;
		width: 80px;
	}
	.story {
		min-height: inherit;
		margin: 0 0 40px;
	}
	.story .inner {
		padding: 15px 20px 20px;
	}
	.story .inner h3 {
		font-size: 1.6em;
		margin: 0 0 20px -2px;
	}
	.story .inner .explain {
		width: 100%;
		line-height: 1.5;
		margin: 0 0 10px;
	}
	.story .figure {
		position: static;
		margin: 0 auto 100px;
		width: 80%;
		max-width: 300px;
	}
	.story .milkpolo {
		height: 174px;
		width: auto;
	}
	/* 個別設定 */
	.vol_03 .figure,
	.vol_04 .figure,
	.vol_09 .figure,
	.vol_10 .figure,
	.vol_11 .figure,
	.vol_12 .figure,
	.vol_13 .figure,
	.vol_14 .figure,
	.vol_17 .figure,
	.vol_19 .figure,
	.vol_20 .figure,
	.vol_25 .figure,
	.vol_27 .figure {
		width: 40%;
		max-width: 160px;
		margin: 0 auto 100px 15%;
	}
	.vol_03 .inner .explain,
	.vol_04 .inner .explain_list {
		width: 100%;
	}
	.vol_05 .inner .explain {
		height: auto;
	}
	.vol_05 .figure {
		margin: 0 auto 140px;
		max-width: 496px;
	}
	.vol_05 .figure img {
		width: 100%;
	}
	.vol_07 .caution {
		width: auto;
	}
	.vol_18 .figure,
	.vol_21 .figure,
	.vol_22 .figure,
	.vol_23 .figure,
	.vol_24 .figure,
	.vol_26 .figure,
	.vol_28 .figure,
	.vol_29 .figure,
	.vol_31 .figure {
		width: 60%;
		max-width: 220px;
		margin: 0 auto 100px 15%;
	}


	.knowledge .present_title .inner {
		height: 160px;
		padding: 0;
	}
	.knowledge .present_title .inner img {
		top: 20px;
	}
	.backnumber {
		margin: 70px 0 0;
	}
	.backnumber_title {
		height: 50px;
		margin: 0 0 30px;
		padding: 10px 0 0;
	}
	.backnumber_title img {
		width: 80%;
		max-width: 220px;
	}

	.present_detail {
		width: 100%;
		margin: 20px auto 30px;
		padding: 25px 15px 15px;
		box-shadow: none;
		line-height: 1.5;
	}
	.present_detail h3 {
		font-size: 1.333em;
		background: linear-gradient(transparent 80%, #fff3b0 80%);
	}
	.present_detail.end h3 {
		display: block;
		background-color: #fff3b0;
		padding: 10px;
	}
	.present_detail .inner {
		display: block;
		text-align: left;
		margin: 25px 0 0;
		position: static;
	}
	.present_detail .inner li:last-child {
		position: relative;
		text-align: center;
		padding: 15px 0 70px;
	}
	.present_detail.end .inner li:last-child {
		padding: 0;
	}
	.present_detail .inner .lottery {
		font-size: 1.2em;
		margin: 0 0 15px;
	}
	.present_detail .inner .goods {
		max-width: 236px;
		width: 70%;
	}
	.present_detail .inner .milkpolo {
		bottom: 5px;
		right: 0;
		width: 140px;
	}
	.present_detail .linkBtn {
		width: inherit;
		max-width: 240px;
	}
	.page_content > .linkBtn {
		width: inherit;
		max-width: 240px;
	}

	/* キャンペーン用 */
	.present_detail .inner li.goods202408 {
		padding: 15px 0 170px;
	}
	.present_detail .inner li.goods202408 .goods {
		max-width: 380px;
		width: 100%;
	}

}