@charset "utf-8";
/* CSS Document */

/*----------------- PC width:751px~ -----------------*/
#contents {
    -webkit-text-size-adjust: 100%;
    font-size: small;
    margin: 20px auto 45px;
    width: 670px;
    padding-left: 20px;
    padding-right: 20px;
}
#contents li {
    list-style-type: none;
}
.zai2 {
    color: #CC6633;
    font-weight: bold;
}
h1 {
    text-align: center;
}
.top{
    display: flex;
	flex-direction: row;
}
.top_left #sample{
	margin-bottom: 10px;
}
.top_left  #sample img {
    width: 224px;
}
.top_left #exsample {
    display: block;
    font-size: 0.8em;
    margin-top: 5px;
    color: #333;
    letter-spacing: 1px;
}
.top_right{
	width: 403px;
    margin-left: 3em;
}
.top_right h2 {
    font-size: 120%;
    border-bottom: 1px dotted #666666;
    padding: 5px 5px 5px 2.6em;
    font-weight: normal;
    margin-left: -2.5em;
}
.top_right #zairyo{
	margin-top: 10px;
}
.name {
    font-size: 100%;
    font-weight: bold;
}
.top_right .name {
    margin-bottom: 2em;
}
.normal{
	font-weight: normal;
}
.top_right .zai2{
	margin-top: 1em;
}

#tukuri{
	margin: 2em 0;
}
#tukuri .name {
    padding: 0 0 0.5em 1em;
}
#tukuri li{
	padding: 10px;
    border-top: 1px dashed #666666;
    position: relative;
}
#tukuri li:before {
    content: "";
    width: 26px;
    height: 26px;
    display: inline-block;
    margin-right: 0.8em;
    position: absolute;
}
#tukuri li:last-child{
	border-bottom: 1px dashed #666666;
}
#tukuri li p {
    display: inline-block;
    padding: 3px 0 0 35px;
    width: 600px;
}

#tukuri li:first-child:before{
	background-image: url(/products/brand/oden/recipe/images/01.gif);
}
#tukuri li:nth-child(2):before{
	background-image: url(/products/brand/oden/recipe/images/02.gif);
}
#tukuri li:nth-child(3):before{
	background-image: url(/products/brand/oden/recipe/images/03.gif);
}
#tukuri li:nth-child(4):before{
	background-image: url(/products/brand/oden/recipe/images/04.gif);
}
#tukuri li:nth-child(5):before{
	background-image: url(/products/brand/oden/recipe/images/05.gif);
}
#tukuri li:nth-child(6):before{
	background-image: url(/products/brand/oden/recipe/images/06.gif);
}
#tukuri li:nth-child(7):before{
	background-image: url(/products/brand/oden/recipe/images/07.gif);
}
#tukuri li:nth-child(8):before{
	background-image: url(/products/brand/oden/recipe/images/08.gif);
}
#tukuri li:nth-child(9):before{
	background-image: url(/products/brand/oden/recipe/images/09.gif);
}
#tukuri li:nth-child(10):before{
	background-image: url(/products/brand/oden/recipe/images/10.gif);
}

#point{
	width: 80%;
    background-color: #9fe59d;
    margin: 0px auto;
    padding: 22px;
    border-radius: 10px;
}
#point h3 {
    margin-bottom: 10px;
}

#moremenu {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 2em;
}
#moremenu div{
	display: inline-block;
	width: 187px;
	padding: 5px;
}
#moremenu #more2,
#moremenu #more3 {
	border-left: 1px dotted #cc9933;
}

.footer{
	border-top: none;
	margin-top: 3em;
	text-align: right;
}
/*----------------- SP width:~750px -----------------*/
@media screen and (max-width: 750px) {
	#contents{
		width: 90vw;
		padding: 0;
	}
	h1 img{
		width: 80vw;
	}
	.top{
		flex-direction: column;
	}
	.top #sample img{
		width: 50%;
    	margin: 0 25%;
	}
	.top #exsample{
		margin: 2% 25%;
	}
	.top_right{
		width: 95%;
		margin: 0 auto;
	}
	.top_right h2{
		margin-left: 0;
		padding: 5px 5px;
	}
	#zairyo{
		margin: 10px 0 0 1em;
	}
	#tukuri li{
		padding: 10px 10px 10px 0.8em;
	}
	#tukuri li p{
		width: 92%;
	}
	
	#moremenu{
		margin-left: 0;
		margin-right: 0;
		width: 90vw;
	}
	#moremenu div{
		width: 26vw;
		vertical-align: top;
	}
	
	.footer{
		text-align: center;
	}
}