@charset "utf-8";
/* ------------------------------------------------------------  */
main { position: relative; }
main img,
main div img{ width:revert-layer; display: inline; }
.breadcrumb-list ol{ margin-top: 0; }
.imgSP { display: none; }
.imgPC { display: block; margin: 0 auto; }
.brSP { display: none; }

/*ファーストビュー*/
.fvImg {
	margin-top: 20px;
	text-align: center;
	background: url(../../../img/lp-otamesibox/bg02.webp);
	background-size: 45%;
	background-repeat: no-repeat;
}
@media (min-width: 1025px) {
	main{ padding-top: 140px; }
}
@media only screen and (max-width:1025px){
	.breadcrumb-list ol{ margin-top: 4vw; }
	.fvImg {
		margin-top: 0;
		padding-top: 60px;
		text-align: center;
		background: url(../../../img/lp-otamesibox/bg02.webp);
		background-size: 45%;
		background-repeat: no-repeat;	
		background-position: left top 4vw;
	}
	.fvImg img { width: 100%; }
}
.fvImg > .imgSP {
	width: 87%;
	margin: 0 auto;
}

#entry { position: fixed; right: 0; top: 240px; z-index: 2;}
#entry img { margin: 0 0 7px; display: block;}

/*ボタン*/
.btn {
	max-width: 700px;
	margin: 0 auto;
}
.btnPC a {
	padding: 30px;
	display: block;
	text-align: center;
	background-color: #faee00;
	border-bottom: 8px solid #e2d700;
	border-radius: 15px;
}
.btn02 {
	margin-top: 60px;
	text-align: center;
}
.btn02 .text { padding-bottom: 20px; }
.btnPC { display: block; }
.btnSP {
	margin-top: 5px;
	display: none;
}

/*アイチョイスとは*/
#about {
	max-width: 1100px;
	margin: 100px auto 0;
}
#about p { font-size: 28px; }
#about p strong {
	font-size: 40px;
	font-weight: bold;
}
#about p strong .red {
	color: #ce1c18;
	font-size: 52px;
	font-weight: bold;
}
#about p strong .line {
	padding-bottom: -135px;
	font-size: 52px;
	font-weight: bold;
	line-height: 1;
	background: linear-gradient(transparent 70%, #fff798 10%);
}
#about div {
	margin: 40px 0 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#about ul li{ font-size: 14px; }

/*20231122 削除 */
/*背景画像*/
/*
@media screen and (min-width:641px) {
	#bg-scroll{ overflow: hidden; }
	#bg-scroll div{
		width: 100%;
		height: 400px;
		margin: 0 -200px;
		padding: 0 200px;
		background: url(../../../img/lp-otamesibox/bg01.webp);
		background-position: 50% 50%;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		border-radius: 2000px 2000px 0 0 / 300px 300px 0 0;
	}
}
*/
/*20231122 削除 */

/*魅力とは*/
#message{
	text-align: center;
	background: linear-gradient(
		-45deg,
		#ffefef 25%,
		#fff 25%,
		#fff 50%,
		#ffefef 50%,
		#ffefef 75%,
		#fff 75%,
		#fff
	);
	background-size: 10px 10px;
	background-attachment: fixed;
	margin-top: 60px; /*20231122*/
}
#message .imgPC { padding: 60px 0; }

/*商品*/
#item .bread,
#item .natureStyle,
#item .natto,
#item .vegetables {
	margin-top: 60px;
	text-align: center;
}
#item .bread p,
#item .natureStyle p,
#item .natto p,
#item .vegetables p {
	margin-top: 30px;
	font-size: 20px;
}
#item .bread h3,
#item .natto h3{
	margin-top: 25px;
}
#item .natureStyle,
#item .vegetables {
	text-align: center;
	background-image: url(../../../img/lp-otamesibox/bg03.webp), url(../../../img/lp-otamesibox/bg04.webp), 
	linear-gradient(
		-45deg,
		#f8f7f3 25%,
		#fff 25%,
		#fff 50%,
		#f8f7f3 50%,
		#f8f7f3 75%,
		#fff 75%,
		#fff
	);
	background-size: 35%, 35%, 10px 10px ;
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: left top, right bottom;
}
#item .natureStyle h2,
#item .vegetables h2 { padding-top: 60px; }
@media only screen and (min-width:750px){
	#item .natureStyle div{
		max-width: 1200px;
		margin: 25px auto 0;
	}
	#item .natureStyle div ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#item .natureStyle  div ul li{
		width: calc(50% - 20px);
		margin-bottom: 50px;
	}
	#item .natureStyle  div ul li:nth-child(2n){ margin-left: 15px; }
	#item .natureStyle  div ul li:nth-child(2n+1){ margin-right: 15px; }
	#item .natureStyle  div ul li:last-of-type{ margin: 0 0 100px 0;}
}

#item .vegetables .comment{ 
	margin-top: 20px;
	color: #ce1c18;
	font-size: 16px;
}
#item .vegetables .comment:last-of-type{ padding-bottom: 50px; }
#item .vegetables .example { margin-top: 25px; } 
@media only screen and (min-width:750px){
	#item .vegetables div{
		max-width: 1200px;
		margin: 25px auto 50px;
	}
	#item .vegetables div ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#item .vegetables  div ul li{
		width: calc(33% - 20px);
	}
}

/*よくある質問*/
#qa{
	max-width: 1100px;
	margin: 60px auto 0;
	padding-bottom: 40px;
	background: #f8f7f3;
	border-radius: 30px;
}
#qa h2 {
	padding: 40px 0 30px;
	text-align: center;
}
#qa .open{
	margin: 0 50px 10px 50px;
	padding: 20px 50px;
	background: #fff;
	border-radius: 20px;
}
#qa .open dt{
	padding: 10px 50px;
	font-size: 18px;
	font-weight: bold;
	background: url(../../../img/lp-otamesibox/qa.webp) no-repeat left center;
}
#qa .open dd{ padding-left: 50px; }
#qa .open dd span{ color: #ce1c18; }
#qa *, #qa *:after, #qa *:before {
	-webkit-box-sizing: border-box;
		 box-sizing: border-box;
}
#qa .accordion {
	width: 100%;
	margin: 0 0 10px 0;
	color: #1b2538;
	position: relative;
	overflow: hidden;
}
#qa .accordion input {
	position: absolute;
	opacity: 0;
}
#qa .accordion label {
	margin: 0 50px;
	padding: 20px 50px;
	display: block;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 20px;
	background: #fff;
	position: relative;
}
#qa .accordion label::before {
	content: "";
	width: 42px;
	height: 42px;
	padding-right: 48px;
	display: inline-block;
	background-image: url(../../../img/lp-otamesibox/qa.webp);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}
#qa .accordion label:hover {
	transition: all 0.3s;
}
#qa .accordion label::after {
	content: "";
	width: 38px;
	height: 38px;
	display: inline-block;
	background-image: url("../../../img/lp-otamesibox/qa-sub.svg");
	background-size: contain;
	top: 21px;
	right: 30px;
	position: absolute;
	-webkit-transition: transform 0.4s;
		 transition: transform 0.4s;
}
#qa .accordion .accordionContent {
	max-height: 0;
	margin: 0 50px;
	padding: 0 0 0 90px;
	-webkit-transition: max-height 0.2s;
	transition: max-height 0.2s;
	border-radius: 0 0 20px 20px;
	overflow: hidden;
	background: #fff;
	position: relative;
}
#qa .accordion .accordionContent p { margin: 0 20px 20px 0; }
#qa .accordion input:checked ~ .accordionContent {
	max-height: 100px;
	border: 10px solid #fff;
}
#qa .accordion input:checked ~ label { border-radius: 20px 20px 0 0; }
#qa .accordion input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

/*注意事項*/
#more {
	margin-top: 60px;
	text-align: center;
	background: linear-gradient(
		-45deg,
		#ffefef 25%,
		#fff 25%,
		#fff 50%,
		#ffefef 50%,
		#ffefef 75%,
		#fff 75%,
		#fff
	);
	background-size: 10px 10px;
	background-attachment: fixed;
}
#more .caution{
	max-width: 1100px;
	margin-bottom: 60px;
	padding-top: 60px;
}
#more *, #more *:after, #more *:before {
	-webkit-box-sizing: border-box;
		 box-sizing: border-box;
}
#more .caution {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
#more .caution input {
	position: absolute;
	opacity: 0;
}
#more .caution label {
	padding: 40px 90px 20px 90px;
	display: block;
	color: #ce1c18;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.3em;
	cursor: pointer;
	border: 4px solid #111;
	border-radius: 20px;
	background: #fff;
	position: relative;
}
#more .caution label img{ padding-bottom: 10px; }
#more .caution label:hover { transition: all 0.3s; }
#more .caution label::after {
	content: "";
	width: 48px;
	height: 48px;
	display: inline-block;
	background-image: url("../../../img/lp-otamesibox/qa-sub.svg");
	background-size: contain;
	top: 50px;
	right: 90px;
	position: absolute;
	-webkit-transition: transform 0.4s;
		 transition: transform 0.4s;
}
#more .caution .cautionContent {
	max-height: 0;
	padding: 0 50px;
	text-align: left;
	border-radius: 0 0 20px 20px;
	background: #fff;
	overflow: hidden;
	position: relative;
	-webkit-transition: max-height 0.2s;
	transition: max-height 0.2s;
}
#more .caution .cautionContent p { margin: 0 20px 20px 0; }
#more .caution input:checked ~ .cautionContent {
	max-height: 1000px;
	border-right: 4px solid #111;
	border-bottom: 4px solid #111;
	border-left: 4px solid #111;
}
#more .caution input:checked ~ label {
	border-radius: 20px 20px 0 0;
	border-bottom: none;
}
#more .caution input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
#more .caution dl dt {
	margin-bottom: 5px;
	font-weight: bold;
}
#more .caution dl dd {
	margin-bottom: 20px;
	font-size: 14px;
}
#more .caution dl dd span { color: #ce1c18; }
#more .caution dl dd a {
	color: #ce1c18;
	text-decoration: underline;
}
#more .caution dl {
	padding: 40px 50px 20px 50px;
	background: url(../../../img/lp-otamesibox/line.webp);
	background-repeat: no-repeat;	
}
#more .contact{
	width: 100%;
	margin-top: 60px;
	padding-bottom: 60px;
	text-align: center;
}

/*フッター*/
#footer { text-align: center; padding: 85px 0 55px;}
#footer address { font-size: 12px; padding: 45px 0 0;}

@media only screen and (max-width:950px){
main { max-width: 900px; }
}

/*アニメーション*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/*期間限定プレゼント 20221125追加*/
.present {
	margin-top: 60px;
}
.present > .imgPC {
	width: 100%;
	max-width: 1000px;
}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	main { position: relative; }
	.imgSP { display: block; }
	.imgPC { display: none; }
	.brSP { display: block; }

	/*ファーストビュー*/
	.fvImg {
		margin-top: 0;
		padding-top: 100px;
		background-size: 86%;
		background-repeat: no-repeat;	
		background-position: left top 4vw;
	}
	#entry { position: fixed; right: 0; top: 145px; z-index: 2; width: 40px; height: auto;}
	#entry img { width: 40px; height: auto;}

	/*ボタン*/
	.btn a img { width: 100%; }
	.btn02 {
		margin-top: 30px;
		text-align: center;
	}
	.btn02 .text {
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
	.btn02 .btn { margin: 5px 0 20px 0; }
	.btnPC { display: none; }
	.btn > .btnSP {
		margin: 10px 20px 0 20px;
		display: block;
	}

	/*アイチョイスとは*/
	#about {
		margin: 30px auto 0;
		padding: 0 20px;
		text-align: center;
	}
	#about p {
		font-size: 12px;
		text-align: left;
	}
	#about p strong { font-size: 16px; }
	#about p strong .red { font-size: 22px; }
	#about p strong .line { font-size: 22px; }
	#about p:first-child { padding-bottom: 5px; }
	#about div {
		margin: 35px 0 ;
		display: inline-block;
	}
	#about div ul li {
		text-align: left;
		font-size: 10px;
	}
	#about div img {
		width: 80%;
		padding-top: 20px;
	}

	/*背景画像*/
	#bg-scroll img{ width: 100%; }

	/*魅力とは*/
	#message{
		padding: 30px;
		margin-top: 40px; /*20231122*/
	}
	#message .imgSP { width: 100%; }

	/*商品*/
	#item .bread,
	#item .natureStyle,
	#item .natto,
	#item .vegetables {
		margin-top: 40px;
		text-align: center;
	}
	#item .bread h2 img,
	#item .natureStyle h2 img,
	#item .natto h2 img,
	#item .vegetables h2 img {
		width: 50%;
	}
	#item .bread p,
	#item .natureStyle p,
	#item .natto p,
	#item .vegetables p {
		margin: 10px 10px 0 10px;
		font-size: 14px;
		text-align: left;
	}
	#item .bread h3,
	#item .natto h3 {
		margin: 20px 10px 50px 10px;
	}
	#item .bread h3 img,
	#item .natureStyle h3 img,
	#item .natto h3 img,
	#item .vegetables h3 img {
		width: 100%;
	}
	#item .natureStyle,
	#item .vegetables {
		background-size: 70%, 70%, 10px 10px ;
	}
	#item .natureStyle h2,
	#item .vegetables h2 { padding-top: 40px; }
	#item .natureStyle div{
		margin: 20px 10px 0;
		padding-bottom: 50px;
	}
	#item .natureStyle  div ul li{ margin-bottom: 50px; }
	#item .vegetables .comment{ 
		margin-top: 10px;
		font-size: 12px;
	}
	#item .vegetables .comment:last-child{ padding-bottom: 25px; }
	#item .vegetables .example {
		width: 50%;
		margin-top: 20px;
	} 
	#item .vegetables div ul{ margin: 20px 10px 25px 10px; }
	#item .vegetables  div ul li{ margin-top: 40px; }
	#item .vegetables  div ul li:first-child{ margin-top: 0; }

	/*よくある質問*/
	#qa{
		margin: 30px 10px 0;
		padding-bottom: 20px;
		border-radius: 15px;
	}
	#qa h2 { padding: 20px 0 10px; }
	#qa h2 img { width: 130px; }
	#qa .open{
		margin: 0 10px 10px 10px;
		padding: 10px;
		border-radius: 15px;
	}
	#qa .open dt{
		padding: 10px 40px;
		font-size: 16px;
		background-size: 30px;
	}
	#qa .open dd{ padding-left: 38px; }
	#qa *, #qa *:after, #qa *:before {
		-webkit-box-sizing: border-box;
			 box-sizing: border-box;
	}
	#qa .accordion label {
		margin: 0 10px;
		padding: 20px 30px 20px 50px;
		font-size: 16px;
		border-radius: 15px;
		font-weight: bold;
		background: url(../../../img/lp-otamesibox/qa.webp) no-repeat left 3% top 50%;
		background-color: #fff;
		background-size: 30px;
	}

	#qa .accordion label::before { content: none; }
	#qa .accordion label:hover { transition: all 0.3s; }
	#qa .accordion label::after {
		content: "";
		width: 22px;
		height: 22px;
		background-image: url("../../../img/lp-otamesibox/qa-sub.svg");
		background-size: contain;
		top: 22px;
		right: 10px;
	}
	#qa .accordion .accordionContent {
		max-height: 0;
		margin: 0 10px;
		padding: 0 0 0 35px;
	}
	#qa .accordion .accordionContent p { margin-bottom: 20px; }
	#qa .accordion input:checked ~ .accordionContent { max-height: 1000px; }

	/*注意事項*/
	#more {
		margin-top: 30px;
		text-align: center;
		background: linear-gradient(
			-45deg,
			#ffefef 25%,
			#fff 25%,
			#fff 50%,
			#ffefef 50%,
			#ffefef 75%,
			#fff 75%,
			#fff
		);
		background-size: 10px 10px;
		background-attachment: fixed;
	}
	#more .caution{
		max-width: 1100px;
		padding-top: 30px;
	}
	#more *, #more *:after, #more *:before {
		-webkit-box-sizing: border-box;
			 box-sizing: border-box;
	}
	#more .caution {
		width: 100%;
		padding: 30px 10px 0 10px;
	}
	#more .caution input {
		position: absolute;
		opacity: 0;
	}
	#more .caution label {
		padding: 15px 20px 10px 20px;
		font-size: 14px;
		letter-spacing: 0;
		border: 2px solid #111;
	}
	#more .caution label img{
		width:140px;
		padding-bottom: 5px;
	}
	#more .caution label:hover { transition: all 0.3s; }
	#more .caution label::after {
		content: "";
		width: 25px;
		height: 25px;
		background-image: url("../../../img/lp-otamesibox/qa-sub.svg");
		background-size: contain;
		top: 30px;
		right: 10px;
	}

	#more .caution .cautionContent {
		padding: 0 10px;
	}
	#more .caution .cautionContent p { margin: 0 20px 20px 0; }
	#more .caution input:checked ~ .cautionContent {
		max-height: 2000px;
		border-right: 2px solid #111;
		border-bottom: 2px solid #111;
		border-left: 2px solid #111;
	}
	#more .caution dl { padding: 30px 10px 10px 10px; }
	#more .contact{
		margin-top: 30px;
		padding: 0 15px 30px 15px;
	}
	#more .contact .imgSP{ width: 100%; }

	/*フッター*/
	#footer{
		text-align: center;
		padding: 45px 0 25px;
		margin: 0 0 57px;
	}
	#footer a img{
		width: 150px;
		height: auto;
	}
	#footer address{
		font-size: 11px;
		padding: 25px 0 0;
	}

	.cfx{
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		z-index: 2;
		opacity: 0;
		visibility: hidden;
		transition: .5s;
	}
	.cfx a{
		font-weight: bold;
		font-size: 14px;
		display: block;
		float: left;
		width: 100%;
		padding: 15px 0;
	}
	.cfx a.catalog{
		background: #fff100;
	}
	.cfx a.entry{
		background: #ff7c55;
		color: #fff;
	}
	.cfx a img{
		padding: 0 0 0 10px;
		vertical-align: top;
	}
	.active{
		opacity: 1;
		visibility: visible;
	}

	/*期間限定プレゼント 20221125追加*/
	.present {
		margin: 20px;
	}
	.present > .imgSP {
		width: 100%;
	}

}