@charset "UTF-8";
/* 
CSS Document 
ページ共通CSS
ヘッダ, フッタ, サイド
*/

body {
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
	color:#333;
	font-size:13px;
	line-height:1.3;
	}
	
/*テキスト色*/
.blue { color:#113F97; }
.green { color:#00A33D; }

.pc {display:block;}
img.pc {display:inline-block;}
.tb,.sp {display:none;}
@media (max-width:768px) {
	.pc {display:none !important;}
	.tb {display:block;}
	}

/*pagetop button*/
#pagetopButton {
	position:fixed;
	bottom:30px;
	right:2%;
	}
@media (max-width:499px) {
#pagetopButton img {
	width:50px;
	}
}

/*footer*/
footer a {
	font-size:12px;
	color:#333;
	}
	
footer .bnr {
	padding:40px 0 60px;
	}

/*header*/
header {
	padding:20px 2%;
	}
header nav {
	text-align:right;
	max-width:1300px;
	margin:0 auto;
	}
header nav a {
	display:inline-block;
	margin-left:15px;
	}
@media (max-width:572px) {
header nav a {
	margin-left:10px;
	}
header nav a img {
	height:15px;
	}
header nav a:first-child { margin:0; }
}
@media (max-width:410px) {
header nav a {
	margin-left:5px;
	}
header nav a img {
	height:12px;
	}
header nav a:first-child { margin:0; }
}
header nav a:first-child { margin:0; }
	
/*wrapper*/
#wrapper {
	
	}
	
/*mvis*/
#mvis {
	padding:30px 0;
	text-align:center;
	background:#fffbc7;
	border-left:none;
	border-right:none;
	text-align: center;	
}
#mvis img {
	max-width:100%;
}
@media (max-width:768px) {
#mvis {
	background:none;
	background:#fffbc7;
	padding:0 0 16px 0;
	text-align:center;
	/*margin-bottom:30px;*/
}
#mvis img {
	max-width:100%;
}
}
	
/*contentHead*/
#contentHead {
	padding:64px 0 0;
	}
@media (max-width:768px) {
	#contentHead {
		padding:0 0 0;
	}
}
#contentHead nav {
	text-align:center;
	position:relative;
}

#contentHeadBg {
	margin: 0 auto;
	width: 90%;
}	
@media (max-width:768px) {
	#contentHeadBg {
		margin: 0 auto;
		width: 79%;
	}	
}
#contentHeadBg img {
	width: 100%;
}
.buttonWrapper {
	margin: 0 auto;
	width: 100%;
	max-width: 1140px;
	display: flex;
	justify-content: center;
}
.buttonWrapper .jAnchor {
	display: inline-block;
	width: 29%;
}
@media (max-width:768px) {
	.buttonWrapper .jAnchor {
		width: auto;
	}
}

@media (max-width:690px) {
#contentHead nav a { display:inline-block; width:45%; }
#contentHead nav { background:none; padding-top:30px; }
}
	
/*section*/
section {
	margin-top:0px;
	padding-bottom:30px;
	}
section h2 {
	background:#113F97;
	text-align:center;
	padding:10px 2%;
	font-size:10px;
	}
	
section h2 span { display:inline-block; }

section#hin01 {
	margin: 86px 0 0;
	padding-bottom: 100px;
}
@media (max-width:768px) {
	section#hin01 {
		margin: 30px 0 0;
		padding-bottom: 40px;
	}
}
section#hin01 h2 {
	height: 130px;
	background:#113F97;
	font-size:10px;
	border-top: 15px solid #fee735;
	border-bottom: 15px solid #4abbf8;
	position: relative;	
	padding: 0;
}
@media (max-width:768px) {
	section#hin01 h2 {
		border-top: 10px solid #fee735;
		border-bottom: 10px solid #4abbf8;
	}
}
	
section#hin01 h2 span { 
	display:block;
	position: absolute;
	top: 24%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 930px;
	width: 100%;
}
section#hin01 h2 span img {
	min-width: 100%;
	width: 100%;
}
@media (max-width: 768px) {
	section#hin01 h2 {
		height: auto;
		padding-top: 30%;
	}
	section#hin01 h2 span { 
		top: 52%;
		width: 90%;
	}
}

section#hin02 h2 {
	background:#DE254F;
	}
section#hin03 h2 {
	background:#e73e61;
	padding:20px 0;
	}
	
section#hin02 h2 span {
	width:55%;
	}
section#hin03 h2 span {
	width:48%;
	}
	
.constBox {
	max-width:930px;
	margin:0 auto;
	padding:0 2%;
	}
.products .clearfix {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
@media (max-width:768px) {
	.products .clearfix {
		flex-direction: column;
	}
}
.products .clearfix .right{
	display: flex;
	flex-direction: column;
	align-items: center;
}

section .sectionDesc {
	text-align:center;
	position:relative;
	padding-top:40px;
	@media(width <= 1180px) {
		padding-top:80px;
	}
}
@media (max-width:768px) {
	section .sectionDesc {
		padding-top:30px;
	}
}
section .sectionDesc .sectionTitle {
	position: relative;
	@media(width <= 1180px) {
		width: 480px;
		margin: 0 auto;
	}

	.speechBalloon {
		width: 130px;
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translate(-10%, -50%);
		@media(width <= 1180px) {
			top: 20%;
		}
		@media(width <= 768px) {
			width: 33%;
			top: 100%;
			transform: translate(-10%, -40%);
		}
	}
}
@media (max-width:768px) {
	section .sectionDesc {
		padding-top:30px;
	}
	section .sectionDesc .sectionTitle{
		margin: 0 auto;
		width: 63%;
	}
}

section .sectionDesc .descImg {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 3%;
	row-gap: 28px;
	width: 100%;
	}
section .sectionDesc .descImg .imgWrapper img {
	width: 100%;
}
@media (max-width:768px) {
	section .sectionDesc {
		width: 90%;
		margin: 0 auto;
	}
	section .sectionDesc .descImg {
		flex-direction: column;
		width: 60%;
		margin: 30px auto 0;
	}
	section .sectionDesc .descImg .imgWrapper {
		width: 100%;
	}
	section .sectionDesc .descImg .imgWrapper img {
		width: 100%;
	}
}
section#hin02 .sectionDesc {
	background:url(../image/higher_p_bg.png);
	position:relative;
	padding-bottom:20px;
	}
section .sectionDesc p:nth-of-type(2) {
	margin-top:35px;
	}
section .sectionDesc p:nth-of-type(3) {
	margin-top:20px;
	line-height:25px;
	}
section .sectionDesc .secPoint {
	position:absolute;
	top:-30%;
	right:2%;
	width:18%;
	}
section .sectionDesc .secPoint img {
	vertical-align:middle;
	}
@media (max-width:500px) {
section .sectionDesc .secPoint {
	top:-24%;
	}
}
section .constBox>div { margin-top:40px; }

article {
	background:url(../image/bg_line.png) repeat-x left top;
	margin-top:80px;
	padding-top:60px;
	}
@media (max-width:768px) {
article {
	margin-top:30px;
	padding-top:50px;
	}
}
article .det {
	padding:15px 2%;
	background:#FCFAEE;
	border-radius:10px;
	font-size:140%;
	width:80%;
	margin-top:20px;
	margin-bottom:30px;
	text-align:left;
	}
@media (max-width:499px){
article .det {
	width:96%;
	padding:10px 2%;
	font-size:120%;
	text-align:left;
	}
}

@media(max-width:640px) {
	article .lowerInfoPanel {text-align:center;}
}
@media (max-width:768px){
	article .left.vege {
		width: 91%;
	}
}
@media (max-width:768px){
article .right {
	text-align:center;
	margin-top:30px;
	}
}
@media (max-width:768px){
	article .right .imgWrapper {
		width: 88%;
		margin: 16px;
	}
}
@media (max-width:499px){
article .right figure {
	width:60%;
	margin:0 auto;
	}
#hin02 article:last-child .right figure {
	width:25%;
	}
}
article .right a { 
	margin-top:30px; 
	display:block; 
	width: 50%;
}
@media (max-width:768px) {
	article .right a {
		width:80%;
		margin:30px auto 0;
	}
}

#hin01 article h3.h3Normal {
	width:80%;
	display: block;
	margin: 30px auto 0;
	text-align: center;
}
@media (max-width:768px) {
	#hin01 article h3.h3Normal {
		width:98%;
		margin: 50px auto 0;
	}
}
#hin01 article h3.h3Vegetable {
	width:80%;
	display: block;
	margin: 30px auto 0;
	text-align: center;
}
@media (max-width:768px) {
	#hin01 article h3.h3Vegetable {
		width:98%;
		margin: 50px auto 0;
	}
}	
#hin01 .sectionDesc {
	font-size:140%;
	}
@media (max-width:499px) {
#hin01 .sectionDesc {
	font-size:120%;
	text-align:left;
	}
}

#whiteBalloon .whiteBalloon {
	text-align: center;
}
#whiteBalloon h3.stepup {
	width:80%;
	display: block;
	margin: 56px auto 0;
	text-align: center;
}
@media (max-width:768px) {
	#whiteBalloon h3.stepup {
		width:80%;
		margin: 64px auto 0;
	}
}	
.whiteBalloonLink {
	display: inline-block;
	margin: 32px auto 0;
}
.whiteBalloonLink:hover {
	transition: opacity 0.3s ease;
	opacity: .8;
}
@media (max-width:768px) {
	.whiteBalloonLink {
		margin: 12px auto 0;
		width: 92%;
	}
}

/*お願い*/
section#hin03>div { background:#FCFAEE; padding-bottom:20px; }
section#hin03 ul { text-align:center; margin-top:10px; }
section#hin03 ul li {
	display:inline-block;
	vertical-align:bottom;
	margin-top:20px;
	}
section#hin03 ul li img { vertical-align:bottom; }
@media (max-width:621px){
section#hin03 ul li {
	width:45%;
	}
}

footer {
	font-size:10px;
	text-align:center;
	padding-bottom:20px;
	}
@media (max-width:474px) {
footer.constBox {
	margin:0;
	text-align:left;
	}
footer .bnr {
	padding:20px 0 30px;
	}
footer .logo {
	width:70%;
	margin-left:auto;
	margin-right:auto;
	}

}
	
/*ポップアップ*/
.hinDet {
	max-width:955px;
	border:3px solid #A0B2D6;
	background:#fff;
	font-size:14px;
	border-radius:10px;
	display:none;
	}
.hinDet .inner {
	padding:15px 2%;
	position:relative;
	}
.hinDet .popupCloseButton {
	position:absolute;
	right:10px;
	top:10px;
	width:5%;
	}
.hinDet .detHead h2{
	width:45%;
	}
.hinDet .detHead h2 img { vertical-align:bottom; }
.hinDet .detHead dl {
	width:50%;
	padding-left:20px;
	}
.hinDet .detHead dl dt { background:#eee; }
.hinDet .detHead dl dt,
.hinDet .detHead dl dd {
	font-weight:normal;
	float:left;
	border:1px solid #ccc;
	padding:5px 2%;
	margin-right:-1px;
	margin-bottom:-1px;
	width:40%;
	}
.hinDet .detHead dl dt { width:30% }
.hinDet .detHead dl dd { width:55%; text-align:right; }
.hinDet .left {
	width:49%;
	}
.hinDet .left:first-child {
	margin-right:2%;
	}
.hinDet .detTable {
	margin-top:40px;
	}

	
.hinDet .detTable dl dt { background:#eee; }
.hinDet .detTable dl span { display:block; padding:5px 2%; }
.hinDet .detTable dl dt,
.hinDet .detTable dl dd {
	font-weight:normal;
	float:left;
	border:1px solid #ccc;
	margin-right:-1px;
	margin-bottom:-1px;
	width:20%;
	}
.hinDet .detTable dl dd { text-align:right; }
.hinDet .detTable dl dt { width:35%; }
.hinDet .detTable dl dd { width:31%; }
.hinDet .detTable.single dl dd { width:60%; }
.hinDet .detTable.single { max-width:430px; }

.hinDet h3 {
	font-weight:normal;
	font-size:19px;
	margin-bottom:10px;
	}
.hinDet .detTable h3 {
	margin-bottom:0;
	}
.hinDet .detTable dt.tblH,
.hinDet .detTable dd.tblElem {
	background:none;
	border:none;
	text-align:left;
	height:30px;
	line-height:30px;
	}
.hinDet .detTable dt.tblH>*,
.hinDet .detTable dd.tblElem>* {
	vertical-align:bottom;
	padding:0;
	}
.hinDet .detTable dd.tblElem { font-size:73%; }

.hinDet .allergenArea { margin-top:40px; }
.hinDet .allergenArea ul { color:#888888; border-collapse:collapse; }
.hinDet .allergenArea ul li {
	float:left;
	width:110px;
	padding:5px 0;
	text-align:center;
	border:1px solid #ccc;
	margin-right:-1px;
	margin-bottom:-1px;
	}
.hinDet .allergenArea ul li.yellow {
	color:#333;
	background:#FEDD02;
	}
.hinDet .allergenArea ul li.pink {
	color:#333;
	background:#FF6699;
	}
.hinDet .note {
	margin-top:40px;
	}
.hinDet .note .left div {
	padding:10px 2%;
	border:1px solid #ccc;
	min-height:146px;
	}

@media (max-width:544px){
.hinDet .allergenArea ul li {
	width:32%;
	font-size:11px;
	}
}
@media (max-width:499px){
.hinDet .detTable { margin-top:20px; }
.hinDet .allergenArea { margin-top:20px; }
.detHead.tableLayout {
	display:block;
	}
.detHead.tableLayout>* {
	display:block;
	}
.detHead.tableLayout dl {
	padding:0;
	margin-top:20px;
	width:100%;
	}
.hinDet .detTable dl dt,
.hinDet .detTable dl dd {
	font-size:12px;
	}
.hinDet .note { margin-top:0; }
.hinDet .note h3 { margin-top:20px; }
.hinDet .note .left {
	float:none;
	width:96%;
	}
.hinDet .note .left div { min-height:0; }
}

/*qa*/
#qaVis {
	text-align:center;
	background:url(../image/bg_qa.png) no-repeat center 20px #fff;
	padding:40px 5%;
	}
	
.qa #mainContent { background:#FFF8D2; }
	
.qa section {
	margin-top:0;
	}
.qa section h2 {
	font-size:0;
	padding:20px 0;
	}
.qa section h2 span {
	width:14%;
	}
	
#qaLinkArea {
	background:#fff;
	border-radius:10px;
	padding:20px 2%;
	text-align:left;
	}
#qaLinkArea a {
	position:relative;
	padding-left:1.5em;
	display:block;
	color:#00B2B2;
	font-size:18px;
	margin-bottom:10px;
	}
#qaLinkArea span {
	display:block;
	position:absolute;
	left:0;
	}
@media (max-width:500px) {
#qaLinkArea a {
	font-size:14px;
	}
}

/*qablock*/
.qablock {
	text-align:left;
	margin:30px 0 40px !important;
	}
/*qa info*/
.qainfo {
	background:url(../image/qa_line_v.png) repeat-x;
	display:inline-block;
	text-align:left;
	margin-bottom:20px;
	}
.qainfo>div {
	background:url(../image/qa_line_v.png) repeat-x bottom;
	}
.qainfo>div>div {
	background:url(../image/qa_line_h.png) repeat-y left;
	}
.qainfo>div>div>div {
	background:url(../image/qa_line_h.png) repeat-y right;
	}
.qainfo>div>div>div>div {
	background:url(../image/qa_info_01.png) no-repeat left top;
	}
.qainfo>div>div>div>div>div {
	background:url(../image/qa_info_02.png) no-repeat right top;
	}
.qainfo>div>div>div>div>div>div {
	background:url(../image/qa_info_03.png) no-repeat left bottom;
	}
.qainfo>div>div>div>div>div>div>div {
	background:url(../image/qa_info_04.png) no-repeat right bottom;
	padding:10px;
	}
.qainfo img {
	vertical-align:middle;
	}

.qablock .q>div,
.qablock .a>div {
	border-radius:10px;
	background:#fff;
	padding:20px;
	font-size:20px;
	line-height:1.6;
	}
.qablock span.fs90 {
	line-height:1.4em;
	display:block;
	margin-top:10px;
	}
.qablock .q {
	background:url(../image/qa_f_left.png) left 10% no-repeat;
	padding-left:20px;
	color:#00B2B2;
	width:60%;
	margin-bottom:20px;
	}
.qablock .a {
	background:url(../image/qa_f_right.png) right 10% no-repeat;
	padding-right:20px;
	color:#FF8000;
	width:70%;
	float:right;
	margin-bottom:40px;
	}
.qablock .tableLayout>* { vertical-align:middle; }
.qablock figure {
	width:50px;
	vertical-align:top !important;
	}
.qablock figure img {
	vertical-align:top;
	}
	
@media (max-width:700px) {
.qablock .q>div,
.qablock .a>div {
	font-size:18px;
	}
}

@media (max-width:500px) {
.sp { display:block; }
.dt { display:none; }
.qablock figure {
	width:30px;
	padding-right:10px;
	}
.qablock .q,
.qablock .a {
	width:80%;
	}
.qablock .q>div,
.qablock .a>div {
	font-size:16px;
	padding:10px 2%;
	}
}
@media (max-width:410px) {
.qablock .q>div,
.qablock .a>div {
	font-size:14px;
	}
.qainfo img {
	height:15px;
	}
}

.linkButtonBox {
	max-width: 460px;
	margin: 30px auto;
	padding: 0 2%;
	transition: opacity 0.3s;
}
.linkButtonBox:hover {
	opacity: 0.7;
}
.linkButtonBox img {
	width: 100%;
}