@charset "UTF-8";

/*
**************************************************************************
*	hokkaido-butter knowledge_article.css
**************************************************************************/


/* --------------------------------------------------
		override
-------------------------------------------------- */
.p-links__list li[data-id="5"] {
	display: none;
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}


/* --------------------------------------------------
		visual
-------------------------------------------------- */
.visual {
	padding-top: 100px;
}
.visual__subtitle {
	text-align: center;
	font-size: 2.0rem;
	margin-bottom: 50px;
	position: relative;
	opacity: 0;
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.visual {
		padding-top: 60px;
	}
	.visual__subtitle {
		font-size: 1.5rem;
		margin-bottom: 20px;
	}
}


/* --------------------------------------------------
		article
-------------------------------------------------- */
.article-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30px;
}
.article-main__image {
	position: relative;
	overflow: hidden;
	border-radius: 10px 10px;
	margin-bottom: 60px;
}
.article-sec {
	margin-bottom: 120px;
}
.article-sec:last-child {
	margin-bottom: 0 !important;
}
.article-sec .box--a {
	margin: 0 auto;
	width: 66.66666666666667%;
}
.article-sec > [class*="unit-"] + [class*="unit-"] {
	margin-top: 60px;
}
.article-sec .unit--a > * + * {
	margin-top: 1.0em;
}
.article-sec .unit--b {
	display: flex;
	justify-content: space-between;
}
.article-sec .unit--b .unit--b__body {
	width: 63%;
}
.article-sec .unit--b .unit--b__body > * + * {
	margin-top: 1.0em;
}
.article-sec .unit--b .unit--b__image {
	width: 31.08333333333333%;
}
.article-sec h4 {
	font-size: 2.4rem;
	line-height: 1.5;
}
.article-sec .note {
	font-size: 1.4rem;
}
.article-sec .image + * {
	margin-top: 1.5em;
}
.article-sec .image .caption {
	margin-top: 0.5em;
	font-size: 1.4rem;
}
.article-sec .image--round span {
	display: block;
	overflow: hidden;
	border-radius: 10px 10px;
}
.article-sec .list.list--count {
	counter-reset: number 0;
}
.article-sec .list.list--count li {
	position: relative;
	padding-left: 1.8em;
}
.article-sec .list.list--count li:before {
	counter-increment: number 1;
	content: counter(number) '.';
	position: absolute;
	top: 0;
	left: 0;
}
.article-sec .list.list--dot li {
	position: relative;
	padding-left: 1.2em;
}
.article-sec .list.list--dot li:before {
	content: '・';
	position: absolute;
	top: 0;
	left: 0;
}
.article-index {
	border-top: 1px solid #17206D;
	border-bottom: 1px solid #17206D;
	padding: 30px 0;
	display: flex;
}
.article-index__title {
	width: 25%;
	font-size: 6.0rem;
	line-height: 1.1;
}
.article-index__title span {
	display: block;
	font-size: 2.0rem;
}
.article-index__body {
	flex: 1;
}
.article-index__list li + li {
	margin-top: 6px;
}
.article-point {
	border-top: 1px solid #17206D;
	border-bottom: 1px solid #17206D;
	padding: 30px 0;
	display: flex;
}
.article-point__title {
	width: 25%;
	font-size: 6.0rem;
	line-height: 1.1;
}
.article-point__title span {
	display: block;
	font-size: 2.0rem;
}
.article-point__body {
	flex: 1;
}
.article-point__text {
	margin-bottom: 30px;
}
.article-point__list {
	display: flex;
	flex-wrap: wrap;
	margin: -10px -50px 0 0;
}
.article-point__list li {
	margin: 10px 50px 0 0;
}
.article-sec .c-sns {
	justify-content: center;
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.article-info {
		display: block;
	}
	.article-info__tags {
		margin-bottom: 15px;
	}
	.article-info__tags .c-tags {
		justify-content: center;
	}
	.article-info__sns .c-sns {
		justify-content: center;
	}
	.article-main__image {
		border-radius: 0 0;
		margin: 0 -16px 40px;
	}
	.article-sec {
		margin-bottom: 80px;
	}
	.article-sec .box--a {
		width: 100%;
	}
	.article-sec > [class*="unit-"] + [class*="unit-"] {
		margin-top: 40px;
	}
	.article-sec .unit--b {
		display: block;
	}
	.article-sec .unit--b .unit--b__body {
		width: 100%;
	}
	.article-sec .unit--b .unit--b__image {
		width: 100%;
	}
	.article-sec .unit--b > *:first-child {
		margin-bottom: 1.5em;
	}
	.article-sec h4 {
		font-size: 1.8rem;
		line-height: 1.6;
	}
	.article-sec .note {
		font-size: 1.0rem;
	}
	.article-sec .image .caption {
		font-size: 1.0rem;
	}
	.article-index {
		display: block;
	}
	.article-index__title {
		width: 100%;
		font-size: 4.0rem;
		margin-bottom: 20px;
	}
	.article-index__title span {
		font-size: 1.5rem;
	}
	.article-index__list li + li {
		margin-top: 3px;
	}
	.article-point {
		display: block;
	}
	.article-point__title {
		width: 100%;
		font-size: 4.0rem;
		margin-bottom: 20px;
	}
	.article-point__title span {
		font-size: 1.5rem;
	}
	.article-point__text {
		margin-bottom: 20px;
	}
	.article-point__list {
		display: block;
		margin: 0 0;
	}
	.article-point__list li {
		margin: 0 0;
	}
	.article-point__list li + li {
		margin-top: 6px;
	}
}


/* --------------------------------------------------
		relative-articles
-------------------------------------------------- */
.relative-articles .p-panel__list {
	overflow: visible;
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}


/* --------------------------------------------------
		relative-items
-------------------------------------------------- */
.relative-articles + .relative-items {
	padding-top: 20px;
}
.relative-items__list {
	display: flex;
	flex-wrap: wrap;
	margin: -60px -20px 0;
}
.relative-items__list li {
	width: 50%;
	padding: 0 20px;
	margin-top: 60px;
}
.relative-items__list li .panel {
	display: flex;
}
.relative-items__list li .panel .image {
	width: 46.55172413793103%;
}
.relative-items__list li .panel .body {
	flex: 1;
	align-self: center;
	padding-left: 7.017543859649123%;
}
.relative-items__list li .panel .button {
	margin-bottom: 20px;
}
.relative-items__list li .text {
	font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.relative-items__list {
		margin: -40px 0 0;
	}
	.relative-items__list li {
		width: 100%;
		padding: 0 0;
		margin-top: 40px;
	}
	.relative-items__list li .panel {
		display: block;
		width: 85.71428571428571%;
		margin: 0 auto;
	}
	.relative-items__list li .panel .image {
		width: 100%;
	}
	.relative-items__list li .panel .body {
		padding-left: 0;
	}
	.relative-items__list li .panel .button {
		margin-bottom: 10px;
		font-size: 1.6rem;
	}
	.relative-items__list li .panel .button:before {
		top: 1px;
	}
	.relative-items__list li .text {
		font-size: 1.4rem;
	}
}


/* --------------------------------------------------
		knowledge-category
-------------------------------------------------- */
.relative-articles + .knowledge-category,
.relative-items + .knowledge-category {
	padding-top: 20px;
}
.knowledge-sort {
	border-top: 1px solid #17206D;
	border-bottom: 1px solid #17206D;
	padding: 40px 0;
	justify-content: center;
}
.knowledge-sort .c-list--a {
	justify-content: center;
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.knowledge-sort {
		padding: 30px 0;
	}
	.knowledge-sort .c-list--a {
		justify-content: flex-start;
	}
}


/* --------------------------------------------------
		knowledge-table
-------------------------------------------------- */

.p-table-01 {
	width: 100%;
	font-size: 1.38rem;
}
.p-table-01>tbody>tr {
	background-color: #fff;
}
.p-table-01>tbody>tr>th {
	font-size: 1.38rem;
	font-weight: bold;
	padding: 20px 20px;
	border: 1px solid #17206D;
}
.p-table-01>tbody>tr>td {
	border: 1px solid #17206D;
	padding: 20px 20px;
}
.p-table-01>tbody>tr.p-table-01__bgYellow {
	background-color: #FFD500;
	;
}
.p-scrollx__txt {
	display: none;
}

@media screen and (max-width: 767px) {
	.p-table-01>tbody>tr>th {
			padding: 10px 10px;
	}
	.p-scrollx {
		width: 100vw;
		margin-left: -20px;
		margin-right: -20px;
		overflow-x: scroll;
	}
	.p-scrollx__inner {
		min-width: 1004px;
		padding: 0 20px;
	}
	.p-scrollx__txt {
		display: block;
	}
}