@charset "UTF-8";

 /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1分でわかる！北海道食材ナビ
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.mpr-1c {
	color: #26a990;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-style: normal;
	font-weight: 500;
}
.mpr-1c.bold,
.mpr-1c .bold {
	font-weight: 800;
}

#wrapper {
	background: #faf4eb;
}
#cHeader {
	background: #fff;
	background-image: url(../images/season/foodstuff/food_line.svg), url(../images/season/foodstuff/bg_dot_green.svg);
	background-repeat: repeat-x, no-repeat;
}
#bgWrap {
	padding-top: 1px;
	position: relative;
}
#bgWrap::before {
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	position: absolute;
	background: linear-gradient(225deg, #fff 50%, transparent 52%), linear-gradient(135deg, #fff 50%, transparent 52%);
	background-position: center bottom;
}
@media (min-width:751px){
	#cHeader {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		padding-bottom: 85px;
		justify-content: center;
		background-size: auto 100px, 300px 300px;
		background-position: center 300px, calc(50% + 355px) 105px;
	}
	#cHeader h1 {
		width: 470px;
		margin-top: 100px;
		padding-left: 130px;
	}
	#cHeader #mainChara {
		width: 400px;
	}
	#cHeader #copytxt {
		width: 100%;
		font-size: 20px;
		line-height: 36px;
		margin-top: 25px;
	}
	#bgWrap::before {
		height: 20px;
		background-size: 20px;
	}
}
@media (max-width:750px){
	#cHeader {
		position: relative;
		padding: 247px 30px 60px;
		background-size: auto 60px, 210px 210px;
		background-position: 0 350px, top 0 right 40px;
	}
	#cHeader h1 {
		width: 260px;
		position: relative;
		z-index: 1;
	}
	#cHeader #mainChara {
		top: 0;
		right: -30px;
		width: 280px;
		position: absolute;
	}
	#cHeader #copytxt {
		font-size: 16px;
		line-height: 28px;
		text-align: center;
		margin-top: 95px;
	}
	#bgWrap::before {
		height: 15px;
		background-size: 15px;
	}
}

.postTitle {
	z-index: 20;
	position: relative;
	text-align: center;
	background-image: url(../images/season/foodstuff/title_line.svg), url(../images/season/foodstuff/title_line.svg);
	background-repeat: no-repeat;
}
.postTitle .belt {
	background: #fff;
	border: solid #26a990;
	border-top: none;
	position: relative;
	box-sizing: border-box;
}
.postTitle .belt::before {
	content: "";
	display: block;
	border: solid #26a990;
	border-top: none;
	box-sizing: border-box;
}
.postTitle .belt span {
	display: block;
	position: relative;
}
.postTitle .belt span::before,
.postTitle .belt span::after {
	content: "";
	display: block;
	border-radius: 50%;
	background: #ffff00;
	border: solid #26a990;
	position: absolute;
}
.postTitle .title {
	font-weight: 800;
}
@media (min-width:751px){
	.postTitle {
		margin-top: -10px;
		background-position: left calc(50% + 198px) bottom 55px, right calc(50% + 198px) bottom 55px;
		background-size: 3px auto;
	}
	.postTitle .belt {
		width: 400px;
		margin: 0 auto;
		font-size: 18px;
		border-width: 3px;
		border-radius: 0 0 10px 10px;
	}
	.postTitle .belt::before {
		height: 10px;
		margin: 0 -3px;
		border-width: 3px;
		border-radius: 0 0 10px 10px;
	}
	.postTitle .belt span {
		padding: 13px 15px;
	}
	.postTitle .belt span::before,
	.postTitle .belt span::after {
		top: -25px;
		width: 9px;
		height: 9px;
		border-width: 3px;
	}
	.postTitle .belt span::before {
		left: -9px;
	}
	.postTitle .belt span::after {
		right: -9px;
	}
	.postTitle .title {
		font-size: 48px;
		margin-top: 25px;
	}
}
@media (max-width:750px){
	.postTitle {
		margin: -20px 10px 0;
		background-size: 2px auto;
		background-position: left 0 bottom 35px, right 0 bottom 35px;
	}
	.postTitle .belt {
		font-size: 14px;
		border-width: 2px;
		border-radius: 0 0 7.5px 7.5px;
	}
	.postTitle .belt::before {
		margin-left: -2px;
		margin-right: -2px;
		height: 7.5px;
		border-width: 2px;
		border-radius: 0 0 7.5px 7.5px;
	}
	.postTitle .belt span {
		padding: 7px 0 9px;
	}
	.postTitle .belt span::before,
	.postTitle .belt span::after {
		top: -18px;
		width: 7px;
		height: 7px;
		border-width: 2px;
	}
	.postTitle .belt span::before {
		left: -6px;
	}
	.postTitle .belt span::after {
		right: -6px;
	}
	.postTitle .title {
		font-size: 30px;
		margin-top: 23px;
	}
}

#bgWrap .box {
	position: relative;
}
#bgWrap .box img {
	vertical-align: top;
}
#bgWrap .box::before {
	content: "";
	display: block;
	position: absolute;
	background-size: 100% 100%;
	background-position: center center;
}
#bgWrap .box.left::before,
#bgWrap .box.right::before {
	background-image: url(../images/season/foodstuff/bg_dot_white.svg);
}
#bgWrap .box.link::before {
	background-image: url(../images/season/foodstuff/bg_dot_green.svg);
}
#bgWrap .box .boxFig {
	overflow: hidden;
	position: relative;
	border: solid #f5ebda;
}
#bgWrap .box.link .boxFig {
	border-color: #ccff00;
}
#bgWrap .box .balloon {
	background: #fff;
	position: relative;
}
#bgWrap .box .balloon::before,
#bgWrap .box .balloon::after,
#bgWrap .box .balloon .bWrapper::before,
#bgWrap .box .balloon .bWrapper::after,
#bgWrap .box .balloon .bInner::before,
#bgWrap .box .balloon .bInner::after {
	content: "";
	display: block;
	background: #26a990;
	position: absolute;
}
#bgWrap .box .balloon .link a {
	color: #fff;
	display: block;
	background: #26a990;
	border-radius: 999px;
	position: absolute;
	z-index: 10;
}
#bgWrap .box .balloon .link a:hover {
	opacity: 1;
}
#bgWrap .box .charaImg {
	position: absolute;
}
@media (min-width:751px){
	#bgWrap .box {
		width: 716px;
		margin: 35px auto 0;
	}
	#bgWrap .box + .box {
		margin-top: 120px;
	}
	#bgWrap .box::before {
		top: -120px;
		width: 300px;
		height: 300px;
	}
	#bgWrap .box.left::before,
	#bgWrap .box.link::before {
		left: -120px;
	}
	#bgWrap .box.right::before {
		right: -120px;
	}
	#bgWrap .box .boxFig {
		border-width: 8px;
		border-radius: 30px;
	}
	#bgWrap .box .balloon {
		font-size: 18px;
		line-height: 32px;
		margin-top: -80px;
	}
	#bgWrap .box.left .balloon,
	#bgWrap .box.link .balloon {
		margin-left: -60px;
		margin-right: 260px;
	}
	#bgWrap .box.right .balloon {
		margin-right: -60px;
		margin-left: 260px;
	}
	#bgWrap .box .balloon .bInner {
		padding: 26px 30px;
	}
	#bgWrap .box .balloon::before,
	#bgWrap .box .balloon::after,
	#bgWrap .box .balloon .bWrapper::before,
	#bgWrap .box .balloon .bWrapper::after,
	#bgWrap .box .balloon .bInner::before,
	#bgWrap .box .balloon .bInner::after {
		border-radius: 1.5px;
	}
	#bgWrap .box .balloon::before,
	#bgWrap .box .balloon::after {
		height: 3px;
		left: -1.5px;
		right: -1.5px;
	}
	#bgWrap .box .balloon::before { top: -1.5px; }
	#bgWrap .box .balloon::after { bottom: -1.5px; }
	#bgWrap .box .balloon .bWrapper::before {
		width: 3px;
		top: 20px;
		bottom: -1.5px;
	}
	#bgWrap .box.left .balloon .bWrapper::before,
	#bgWrap .box.link .balloon .bWrapper::before { left: -1.5px; }
	#bgWrap .box.right .balloon .bWrapper::before { right: -1.5px; }
	#bgWrap .box .balloon .bWrapper::after {
		width: 3px;
		top: -1.5px;
		height: 90px;
	}
	#bgWrap .box.left .balloon .bWrapper::after,
	#bgWrap .box.link .balloon .bWrapper::after { right: -1.5px; }
	#bgWrap .box.right .balloon .bWrapper::after { left: -1.5px; }
	#bgWrap .box .balloon .bInner::before {
		width: 3px;
		top: 110px;
		bottom: -1.5px;
	}
	#bgWrap .box.left .balloon .bInner::before,
	#bgWrap .box.link .balloon .bInner::before { right: -1.5px; }
	#bgWrap .box.right .balloon .bInner::before { left: -1.5px; }
	#bgWrap .box .balloon .bInner::after {
		width: 40px;
		height: 3px;
		top: 110px;
	}
	#bgWrap .box.left .balloon .bInner::after,
	#bgWrap .box.link .balloon .bInner::after {
		left: 100%;
		transform: rotate(-30deg);
		transform-origin: left bottom;
	}
	#bgWrap .box.right .balloon .bInner::after {
		right: 100%;
		transform: rotate(30deg);
		transform-origin: right bottom;
	}
	#bgWrap .box .balloon .link a {
		left: 30px;
		bottom: -16px;
		font-size: 16px;
		padding: 2px 45px;
	}
	#bgWrap .box .balloon .link a:hover {
		color: #26a990;
		background: #ccff00;
	}
	#bgWrap .box .charaImg {
		width: 280px;
		top: 220px;
		z-index: 10;
	}
	#bgWrap .box.left .charaImg,
	#bgWrap .box.link .charaImg {
		right: -90px;
	}
	#bgWrap .box.right .charaImg {
		left: -90px;
	}
}
@media (max-width:750px){
	#bgWrap .box {
		margin-top: 36px;
	}
	#bgWrap .box + .box {
		margin-top: 90px;
	}
	#bgWrap .box.link {
		margin-bottom: 185px;
	}
	#bgWrap .box::before {
		width: 240px;
		height: 240px;
		top: -120px;
	}
	#bgWrap .box.left::before,
	#bgWrap .box.link::before {
		left: -143px;
	}
	#bgWrap .box.right::before {
		right: -143px;
	}
	#bgWrap .box .boxFig {
		border-width: 6px;
		border-radius: 20px;
	}
	#bgWrap .box .boxFig img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
		object-position: 50% 50%;
	}
	#bgWrap .box .balloon {
		font-size: 14px;
		line-height: 24px;
		margin-top: -35px;
	}
	#bgWrap .box.left .balloon,
	#bgWrap .box.link .balloon {
		margin-left: -7px;
		margin-right: 110px;
	}
	#bgWrap .box.right .balloon {
		margin-right: -7px;
		margin-left: 110px;
	}
	#bgWrap .box .balloon .bInner {
		padding: 16px 20px;
	}
	#bgWrap .box .balloon::before,
	#bgWrap .box .balloon::after,
	#bgWrap .box .balloon .bWrapper::before,
	#bgWrap .box .balloon .bWrapper::after,
	#bgWrap .box .balloon .bInner::before,
	#bgWrap .box .balloon .bInner::after {
		border-radius: 1px;
	}
	#bgWrap .box .balloon::before,
	#bgWrap .box .balloon::after {
		height: 2px;
		left: -1px;
		right: -1px;
	}
	#bgWrap .box .balloon::before { top: -1px; }
	#bgWrap .box .balloon::after { bottom: -1px; }
	#bgWrap .box .balloon .bWrapper::before {
		width: 2px;
		top: 12px;
		bottom: -1px;
	}
	#bgWrap .box.left .balloon .bWrapper::before,
	#bgWrap .box.link .balloon .bWrapper::before { left: -1px; }
	#bgWrap .box.right .balloon .bWrapper::before { right: -1px; }
	#bgWrap .box .balloon .bWrapper::after {
		width: 2px;
		top: -1px;
		height: 90px;
	}
	#bgWrap .box.left .balloon .bWrapper::after,
	#bgWrap .box.link .balloon .bWrapper::after { right: -1px; }
	#bgWrap .box.right .balloon .bWrapper::after { left: -1px; }
	#bgWrap .box .balloon .bInner::before {
		width: 2px;
		top: 100px;
		bottom: -1px;
	}
	#bgWrap .box.left .balloon .bInner::before,
	#bgWrap .box.link .balloon .bInner::before { right: -1px; }
	#bgWrap .box.right .balloon .bInner::before { left: -1px; }
	#bgWrap .box .balloon .bInner::after {
		width: 22px;
		height: 2px;
		top: 100px;
	}
	#bgWrap .box.left .balloon .bInner::after,
	#bgWrap .box.link .balloon .bInner::after {
		left: 100%;
		transform: rotate(-30deg);
		transform-origin: left bottom;
	}
	#bgWrap .box.right .balloon .bInner::after {
		right: 100%;
		transform: rotate(30deg);
		transform-origin: right bottom;
	}
	#bgWrap .box .balloon .link a {
		width: calc(100vw - 60px);
		left: 15px;
		bottom: -85px;
		font-size: 20px;
		padding: 15px 45px;
		text-align: center;
		box-sizing: border-box;
	}
	#bgWrap .box .charaImg {
		width: 180px;
		top: 70.5vw;
		z-index: 10;
	}
	#bgWrap .box.left .charaImg,
	#bgWrap .box.link .charaImg {
		right: -65px;
	}
	#bgWrap .box.right .charaImg {
		left: -65px;
	}
}

#supervisor {
	color: #26a990;
	box-sizing: border-box;
	border-top: 1px solid #26a990;
	border-bottom: 1px solid #26a990;
}
@media (min-width:751px){
	#supervisor {
		max-width: 1000px;
		margin: 130px auto 0;
		padding: 33px 20px;
	}
	#supervisor .title {
		font-size: 18px;
	}
	#supervisor .title small {
		font-size: 14px;
	}
	#supervisor .text {
		font-size: 14px;
		line-height: 30px;
		margin-top: 15px;
	}
	#related {
		margin-top: 100px;
	}
	#sns {
		margin: 50px auto 0;
		max-width: 1000px;
	}
}
@media (max-width:750px){
	#supervisor {
		padding: 32px 15px 34px;
		margin: 100px 15px 0;
	}
	#supervisor .title {
		font-size: 18px;
	}
	#supervisor .title small {
		font-size: 14px;
	}
	#supervisor .text {
		font-size: 14px;
		line-height: 30px;
		margin-top: 16px;
	}
	#related {
		margin-top: 50px;
	}
	#sns {
		margin: 40px 30px 0;
	}
}