@charset "UTF-8";

@media screen and (max-width: 767px) {


header .inner{
	width: 100%;
	margin: 0 auto;
}
ul.header_menu{
	width: auto;
	gap: 10px;
	margin: 30px 20px 0;
}
ul.header_menu li{
	font-size: 1em;
	width: calc( (100% - 28px) / 3);
	max-width: auto;
}
a.h1:hover .hover_on{
	display: none !important;
}
.section{
	margin-top: 60px !important;
}
.sp_disp {
	display: block;
}
.pc_disp {
	display: none;
}
.paragraph{
	margin-top: 15px !important;
}
#contents{
	width: 100%;
}
#contents .mark_box{
	margin-top: 30px;
}
#contents .mark_box > div.img{
	float: none;
	width: auto;
	text-align: center;
	margin-bottom: 20px;
}
#contents .mark_box > div.text{
	margin-left: 0px;
}
#contents .mark_box > div.text h3{
	text-align: center;
}
#contents .imagebox > div{
	float: none;
	width: 100%;
	padding: 0px 20px;
	margin-bottom: 20px;
}
#contents .imagebox.right .text{
	padding-left: 20px;
}
#contents .imagebox.right > div.img{
	float: none;
}

#contents .imagebox > div img{
	margin: 0px auto;
}
#contents .inner{
	width: 100%;
	padding: 0px 20px;
	margin: 0 auto;
}
#contents .sp_inner{
	width: 100%;
	padding: 0px 20px;
	margin: 0 auto;
}
#contents .column2 > div{
	float: none;
	width: auto;
}
#contents .column2 > div p{
	text-align: center;
}
#contents .column2 > div p.note{
	text-align: right;
}
#contents .column2 > div + div{
	margin: 50px 0px 0px 0px;
}
#contents .column2 > div .column2 > div{
	width: auto;
}
#contents .column2 > div .column2 > div + div{
	margin-left: 0px;
}
#contents .button div{
	margin: 0px !important;
}
ul.inline.line2 li{
	min-width: 40%;
	width: auto;
}

footer .logo{
	margin-bottom: 10px;
}
footer .copy{
	text-align: left;
}
footer{
	width: 100%;
}
footer .inner{
	width: 90%;
	display: block;
}
footer .inner > div{
	width: 100%;
}
footer .inner > div> div > *{
	width: 100%;
}
.disp_pc{
	display: none;
}
.disp_sp{
	display: block;
}
.sp_left{
	text-align: left !important;
}

.button_block{
	padding: 30px 0 20px 0;
	margin-top: 30px;
	border-top: 1px solid #dadada;
}
.button_block > div.column{
	display: none !important;
}
.horizon{
	margin-top: 40px;
	padding-top: 40px;
}
.point{
	margin-top: 30px;
	padding: 0 20px;
}
.point .column3{
	display: block;
	padding: 10px 20px 0 30px;
}
.point .column3 > div{
	width: 100%;
	margin: 20px 0 0 0;
	border: 1px solid #ffc800;
	border-radius: 10px;
}
.point .column3 > div + div{
	margin: 50px 0 0 0;
}
.point .column2 div + div{
	margin-top: 20px !important;
}
.point .column2 > div:first-child{
	padding-left: 0;
}
.point .note{
	margin-right: 0;
	margin-top: 10px;
}
.point h3{
	font-size: 1.5em;
}
.product h4{
	font-size: 1.2em;
}
#contents .sp_inner .column2 > .text{
	width: 100%;
}
#contents .sp_inner .column2 > .img{
	width: 100%;
}
.recipe .column{
	display: block;
	
	>div{
		width: 90%;
		margin: auto;
	}
	
	>div + div{
		margin-top: 60px;
	}
}
.recipe .recipe_block01::after{
	top: 44%;
	right: -18px;
	width: 123px;
	height: 151px;
}
.recipe .recipe_block01 .tx02 p{
	margin-left: 0;
}
.recipe .recipe_block01 .img02{
	margin-top: 0;
}
.recipe .recipe_block02{
	margin-top: 60px;
}
.recipe .col2{
	display: flex;
	gap: 10px;
	flex-direction: column-reverse;
	width: 100%;
	margin-top: 40px;
}
.recipe .col2 .tx{
	width: 100%;
}
.recipe .col2 .img{
	width: 100%;
}
.recipe .col2.reverse{
	flex-direction: column-reverse;
	margin-left: 0;
}
.recipe .col2 + .col2{
	margin-top: 40px;
}
.recipe_block03 .tx{
	margin-top: 0;
}
.recipe_block04 .tx{
	margin-top: 0;
}
.recipe_block05 .tx{
	margin-top: 0;
}
.recipe_block06 .tx{
	margin-top: 0;
}
.product2{
	margin: 40px 20px 0;
	padding-top: 40px;
	width: calc(100% - 40px);
	border-top: 1px solid #d5d5d5;
}
.product2 h3{
	font-size: 1.5em;
}
.product2 h4{
	font-size: 1.2em;
}
#sns {
	pdding: 40px 20px 40px;
}
#sns > div{
	display: block;
	padding-top: 40px;
	border-top: 1px solid #d5d5d5;
}
#sns > div .img{
	margin-top: 20px;
		justify-content: center;

}