@charset "utf-8";

/*------------------------------------------------------------------
	IDENTIFICATION DIVISION.
	Version.												1.4.1.2;
	PROGRAM-ID.									"KOUBOU"
-------------------------------------------------------------------*/

/*****************************************************
	DATA DIVISION.
	WORKING-STRAGE SECTION.
*****************************************************/



/*****************************************************
	PROCEDURE DIVISION.
*****************************************************/
#wrap h2{
	margin-bottom:0.5em;
}

main{
	font-size:2rem;
}

main h3{
	margin-bottom:0.5em;
	padding:0.5em 1em;
	font-size:2.4rem;
	color:#fff;
	background:#69a45b;
	font-family: "Kiwi Maru", serif;
}


main .note{
	padding:0.3em 0.8em;
	background:#d7e7b9;
	box-sizing:border-box;	
}
main .division:not(last-child){
	margin-bottom:2em;
}
main .division h4{
	margin-bottom:0.8em;
	padding:0.5em 1em;
	color:var(--secondary-color);
	background:#e5ebe0;
	font-family: "Kiwi Maru", serif;
}

main section em{
	color:var(--bold-color);
}

main p.image{
	max-width:100%;
	overflow:hidden;
}
main p.image img{
	max-width:100%;
}

main ul.list{

}
main ul.list li{
	padding-left:1em;
	text-indent:-1em;
}
main ul.list li::before{
	content:"";
	width: 0.5em;
	height:0.5em;
	margin-right:0.5em;
	border-radius:50%;
	display:inline-block;
	background:#69a45b
}

main ul.list li:not(:nth-last-child){
	margin-bottom:0.5em;
}

main p.accent img{
	width:100%;
	height:400px;
	object-fit:cover;
	border-radius:40px;
}


/* buy-online
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣*/
.buy-online{
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	padding:2em 0;
	width:100vw;
	background:#e6ece1;
}

.buy-online h3{
	background:none;
	color:#5d382d;
	text-align:center;
	font-weight:400;
	font-size:130%;
}
.buy-online h3 span{
	display:inline-block;
}

.buy-online .btn{
	margin:0 auto;
	width:16em;
	border:1px solid #231815;
	background:#fff;
	border-radius:3em;
}

.buy-online .btn a:link,
.buy-online .btn a:visited{
	color:#5d382d;
}

.buy-online .btn a::after{
	content:"";
	position:relative;
	left:0.3em;
	top:0.1em;
	display:inline-block;
	width:1.6em;
	height:1.1em;
	background:url(../../images/common/icon/shop-b.svg) no-repeat top left;
	background-size:contain;
}


/* point
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣*/
.division.point{
	border:1px solid #ccc;
	border-radius:24px;
	padding:1em;
	text-align:center;
}

.division.point dt{
	position:relative;
	margin-bottom:1em;
	text-align:center;
	font-size:120%;
	color:var(--secondary-color);
	font-family: "Kiwi Maru", serif;
	font-weight:500;
	display:inline-block;
}
.division.point dt span{
	display:inline-block;
}

.division.point dd{
	text-align:left;
}

.division.point dd p:not(:last-child){
	margin-bottom:1em !important;
}

.division.point dd p.image{
	position:relative;
	margin:0 auto;
	border-radius:20px;
	overflow:hidden;
}

.point .image.msg::after{
	position:absolute;
	display:flex;
	align-items:center;
	content:"とくしま\A板野産\A小麦100%";
	width:6.5em;
	height:6.5em;
	border-radius:50%;
	background:#f5b652;
	z-index:10;
	top:1%;
	right:2%;
	padding:1em 0.9em;
	white-space: pre;
	box-sizing:border-box;
	text-align:center;
	line-height:1.2;
	font-size:80%;
	font-family: "Kiwi Maru", serif;
}

/*-------------------------------------------------------------------
	jam
-------------------------------------------------------------------*/

.kind .item{
	margin-bottom:2em;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	overflow:hidden;
}

.kind .item li{
	zoom:1;
	overflow:hidden;
	padding:1em;
	background:#e8f1d7;
	width:32.5%;
	box-sizing:border-box;
}
.kind .item::after{
	content:"";
	width:32.5%;
	height:1px;
	overflow:hidden;
}

.kind .item li{
	margin-bottom:1em;
}


.kind .item h5{
	font-weight:600;
	text-align:center;
	margin-bottom:1em;
	flex-grow: 1;
}
.kind .item h5 span{
	font-weight:300;
	font-size:84%;
}

.kind .item .image img{
	width:15em;
	height:15em;
	object-fit:cover;
	border-radius:50%;
}
.jam .point{
	text-align:center;
}
.jam .point dt{
	display:inline-block;
	text-align:left;
}

.jam .point dt::before{
	content:"";
	display:inline-block;
	position:relative;
	top:0.3em;
	width:1.8em;
	height:1.8em;
	background:url(../../images/common/icon/bluberry.svg) no-repeat top left;
	background-size:contain;
}

/*-------------------------------------------------------------------
	wheat
-------------------------------------------------------------------*/
.wheat .think{
	position:relative;
	padding-right:17%;
}
.wheat .think::after{
	content:"";
	position:absolute;
	display:block;
	width:16%;
	height:5em;
	top:0;
	right:0;
	background:url(../../images/koubou/wheat.svg) no-repeat top center;
	background-size:contain;
}

.wheat .spot dl{
	margin:0 1% 2em;

}

.wheat .spot dt{
	font-weight:bold;
}
.wheat .spot dt:not(:first-child){
	margin-top:2em;
}

.wheat .spot .image{
	border-radius:20px;
	overflow:hidden;
}


/*-------------------------------------------------------------------
	law
-------------------------------------------------------------------*/
.law dl{
	margin: 0 1%;
}

.law dt{
	font-weight:bold;
}
.law dt:not(:first-child){
	margin-top:2em;
}


@media only screen and (max-width : 784px) {
	main p.accent img{
		height:250px;
	}
	
/*-------------------------------------------------------------------
	jam
-------------------------------------------------------------------*/
.kind .item{
	display:block;
}
.kind .item li{
	width:100%;
}
.kind .item li:not(:last-child){
	margin-bottom:1em;
}

.kind .item h5{
	text-align:left;
	width:65%;
	margin-bottom:0.2em;
}

.kind .item p.image{
	float:right;
	margin-left:1em;
	margin-top:-2em;
}
.kind .item .image img{
	width:150px;
	height:150px;
}

.jam .point dt{
	margin-left:1.5em;
}

.jam .division.point dt span{
	display:block;
}
.jam .division.point dt::before{
	display:block;
	width:2.2em;
	height:2.5em;
	position:absolute;
	left:-2.5em;
}



/*-------------------------------------------------------------------
	wheat
-------------------------------------------------------------------*/
.wheat .think{
	padding-right:25%;
}
.wheat .think::after{
	width:28%;
	height:auto;
	bottom:0%;
	right:0;
}


}