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

/************************************

header

************************************/
#recipe header #search{
display:none;
}
/************************************

#recent

************************************/
#recent {
margin:0 auto 50px;
}
#recent h2{
text-align: center;
font-size:120%;
padding:25px 0 0;
background-image: url("../images/new_mark.png") ;
background-repeat:  no-repeat;
background-position:  center top;
background-size: 80px;
margin:0 0 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#recent h2{
background-image: url("../images/new_mark@2x.png") ;
}
}
#recent article{
width:47%;
margin:1.5%;
}
#recent article a{
display:block;
}
#recent article .image{
margin:0 0 10px;
}
#recent article h3{
font-size:100%;
font-weight: normal;
}
@media only screen and (max-width:960px){
#recent article{
width:100%;
margin:0 0 10px;
}
#recent article .image{
float:left;
width:40%;
margin:0;
}
#recent article .text{
float:right;
width:55%;
}
#recent article h3{
font-size:90%;
}
}
@media only screen and (max-width:480px){
#recent article .cat{
width:80px;
}
}
/************************************

search

************************************/
#search_recipe.search{
background: url("../images/onayami_recipe_back.jpg");
}

/************************************

onayami

************************************/
#recipe #onayami{
background: url("../images/recipe_oyanami_back.jpg");
color: #547a63;
}
#recipe #onayami a{
color:#547a63;
}
#recipe #onayami h2{
background: url("../images/yaji_green@2x.png") no-repeat right 10px;
background-size: 10px;
}
#recipe #onayami h2 strong{
border-bottom:2px solid #547a63;
}
#recipe #onayami ul li a{
border:1px solid #547a63;
}
#recipe #onayami ul li a:hover{
color:#547a63;
background-color: rgba( 255, 255, 255, 0.40 );
}
@media only screen and (max-width:960px){
#recipe #onayami h2{
background: url("../images/yaji_green_sdown@2x.png") no-repeat center bottom;
background-size: 10px;
}
}
/************************************

main_sub

************************************/
#main_sub{
background: url("../images/recipe_side_back.jpg");
}
#main_sub .waku{
margin:0 auto 20px;
}
#main_sub h2{
font-size:105%;
text-align: center;
padding-top:30px;
background-repeat: no-repeat;
background-position: center top;
background-size: 30px;
margin:0 0 15px;
}
#main_sub #sub_mokuteki h2{
padding-top:38px;
background-size: 38px;
background-image: url("../images/recipe_mokuteki_mark@2x.png");
}
#main_sub #sub_onayami h2{
background-image: url("../images/recipe_onayami_mark@2x.png");
}
#main_sub #sub_zairyo h2{
padding-top:41px;
background-size: 41px;
background-image: url("../images/recipe_zairyo_mark@2x.png");
}

/*** sub_mokuteki ***/

#sub_mokuteki article{
padding:10px 0;
width:100%;
border-bottom:1px dashed #4B8B9B;
position: relative;
}
#sub_mokuteki article::before{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
right: 0px;
width:10px;
height:10px;
background-image: url("../images/yaji_bluegreen@2x.png");
background-size: 10px;
background-repeat: no-repeat;
content: "";
}
#sub_mokuteki article a{
display:block;
}
#sub_mokuteki article .image{
float:left;
width:40%;
}
#sub_mokuteki article .text{
float:right;
width:55%;
padding-top:24px;
}

#sub_mokuteki article .text h3{
font-size:90%;
}
@media only screen and (max-width:960px){
#sub_mokuteki{
width:90%;
}
#sub_mokuteki .list{
justify-content:flex-start;
}
#sub_mokuteki article{
width:48%;
margin:0 1% 0;
}
#sub_mokuteki article .image{
width:30%;
}
#sub_mokuteki article .text{
float:right;
width:65%;

}

#sub_mokuteki article .text h3{
font-size:80%;
}
}
@media only screen and (max-width:480px){
#sub_mokuteki article .text .cat{
width:100%;
}
#sub_mokuteki article .text{
padding-top:8px;
}
}
/*** sub_onayami ***/

#sub_onayami ul{
letter-spacing: -1em;
}
#sub_onayami ul.tag li{
letter-spacing:0;
display:inline-block;
font-size:80%;
line-height: 1;
padding:5px;
border:1px solid #000;
margin:0 4px 4px 0;
}

#sub_onayami ul.tag li:hover {
background: #000;

}
#sub_onayami ul.tag li:hover a{
color: #fff;
}
#sub_onayami li a:hover{
opacity:1;
font-weight: bold;
color:#4B8B9B;
}
@media only screen and (max-width:960px){
#sub_onayami{
width:90%;
}
}
/*** sub_zairyo ***/

#sub_zairyo ul li{
padding:8px 0 8px 18px;
width:100%;
border-bottom:1px dashed #4B8B9B;
position: relative;
font-size:90%;
}
#sub_zairyo ul li::before{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
left: 0px;
width:10px;
height:10px;
background-image: url("../images/yaji_bluegreen@2x.png");
background-size: 10px;
background-repeat: no-repeat;
content: "";
}
#sub_zairyo ul li a{
display:block;
}
@media only screen and (max-width:960px){
#sub_zairyo{
width:90%;
}
#sub_zairyo ul{
	display: block; /* before Android4.3 iOS6:Safari */
	display: -ms-flexbox;/*IE10*/
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:  wrap;
}
#sub_zairyo ul:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
} 
#sub_zairyo ul li{
width:48%;
margin:0 1% 0;
}
}
/************************************

#recipe_top

************************************/
#recipe_top{
margin:0 0 30px;
}
#recipe_top h1 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
background-image:url("../images/recipe_topimage.jpg");
background-repeat: no-repeat;
background-position: left top;
background-size:contain;
display: block;
height: 0;
width: 100%;
padding-top:56.73%;
margin:0 0 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#recipe_top h1 {
background-image:url("../images/recipe_topimage@2x.jpg");
}
}
#recipe_top p{
font-size:100%;
line-height: 40px;
background-image: url("../images/sen_green.jpg");
padding:0 5px 5px;
}
@media only screen and (max-width:960px){
#recipe_top p{
font-size:90%;
line-height: 32px;
background-size:560px;
padding:0 5px 5px;
}
}
/************************************

#mokuteki

************************************/
#mokuteki {
margin:0 auto 50px;
}
#mokuteki h2{
text-align: center;
font-size:120%;
padding:60px 0 0;
background-image: url("../images/recipe_mokuteki_mark.png") ;
background-repeat:  no-repeat;
background-position:  center top;
background-size: 60px;
margin:0 0 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#mokuteki h2{
background-image: url("../images/recipe_mokuteki_mark@2x.png") ;
}
}
@media only screen and (max-width:960px){
#mokuteki {
margin:0 auto 20px;
}
}
/************************************

.list3 (記事３列一覧表示)


************************************/
.list3 article{
width:30.3%;
margin:1.5%;
}
.list3 article a{
display:block;
}
.list3 article .image{
margin:0 0 15px;
position: relative;
}
.to_recipe{
font-size:12px;
line-height: 1;
color:#fff;
background: #000;
padding:5px 25px 5px 10px;
position: absolute;
bottom:0;
right:0;
display:inline-block;
}
.to_recipe::before{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
right: 5px;
width:8px;
height:8px;
background-image: url("../images/yaji_white@2x.png");
background-size: contain;
background-repeat: no-repeat;
content: "";
}
.list3 article h3{
font-size:100%;
text-align: center;
}
.list3 article p{
font-size:85%;
margin-top:10px;
}
@media only screen and (max-width:480px){
.list3 article{
width:47%;
margin:0 1.5% 20px;
}
.list3 article h3{
font-size:85%;
}
.to_recipe{
font-size:10px;
padding:3px 20px 3px 7px;
}
.list3 article h3{
font-size:100%;
text-align: center;
}
.list3 article p{
margin-top:5px;
}
}
/************************************

#main_onayami

************************************/
#main_onayami {
margin:0 auto 50px;
}
#main_onayami h2{
text-align: center;
font-size:120%;
padding:40px 0 0;
background-image: url("../images/recipe_onayami_mark.png") ;
background-repeat:  no-repeat;
background-position:  center top;
background-size: 40px;
margin:0 0 30px;
position: relative;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#main_onayami h2{
background-image: url("../images/recipe_onayami_mark@2x.png") ;
}
}
#main_onayami h2::before{
position: absolute;
bottom:-15px;
left: 0px;
right:0;
margin:auto;
color: #000;
width:10px;
height:10px;
font-size: 10px;
line-height: 1;
content: "▼";
}
#main_onayami ul{
letter-spacing: -1em;
margin:0 5%;
}
#main_onayami li{
letter-spacing:0;
display:inline-block;
font-size:100%;
line-height: 1;
padding:7px;
border:1px solid #000;
margin:0 7px 7px 0;
}
#main_onayami li:hover{
opacity:1;
font-weight: bold;
color:#fff;
background: #000;
}
#main_onayami li a{
transition: 0;
}
#main_onayami li:hover a{
color:#fff;
opacity: 1;
}
@media only screen and (max-width:960px){
#main_onayami {
margin:0 auto 20px;
}
#main_onayami ul{
margin:0 ;
}
#main_onayami li{
font-size:85%;
padding:5px 10px;
margin:0 5px 5px 0;
}
}
/************************************

.list2 (記事2列一覧表示)


************************************/
.list2 article{
width:47%;
margin:1.5%;
}
.list2 article a{
display:block;
}
.list2 article .image{
margin:0 0 15px;
position: relative;
}

.list2 article h3{
font-size:100%;
text-align: left;
}
.list2 article a h3{
text-decoration: none;
}
.list2 article p{
font-size:85%;
margin-top:10px;
}
.list2 article ul.tag{

margin-top:10px;
letter-spacing: -1em;
}
.list2 article ul.tag li{
letter-spacing: 0;
display:inline-block;
font-size:80%;
line-height: 1;
padding:5px 10px;
border:1px solid #000;
margin:0 5px 5px 0;
}
@media only screen and (max-width:960px){
.list2 article h3{
font-size:100%;
}
.list2 article p{
margin-top:5px;
}
.list2 article ul.tag li{
font-size:70%;
padding:3px 5px;
margin:0 3px 3px 0;
}
}
/************************************

#main_ninki

************************************/
#main_ninki {
margin:0 auto 50px;
}
#main_ninki article .image::before{
position: absolute;
left: 10px;
top:0;
background-image: url("../images/ninki_flag.png");
background-size: contain;
background-repeat: no-repeat;
width:55px;
height:72px;
content: "";
z-index: 5;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#main_ninki article .image::before{
background-image: url("../images/ninki_flag@2x.png");
}
}
@media only screen and (max-width:480px){
#main_ninki article .image::before{
left: 5px;
width:32px;
height:42px;
}
}
/************************************

#main_zairyo

************************************/
#main_zairyo {
margin:0 auto 50px;
}
#main_zairyo h2{
text-align: center;
font-size:120%;
padding:50px 0 0;
background-image: url("../images/recipe_zairyo_mark.png") ;
background-repeat:  no-repeat;
background-position:  center top;
background-size: 50px;
margin:0 0 15px;
position: relative;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#main_zairyo h2{
background-image: url("../images/recipe_zairyo_mark@2x.png") ;
}
}

/************************************

.single #kv

************************************/
.single #kv{
margin:0 0 60px;
}
.single #kv .image{
margin:0 0 20px;
}
.single #kv .cat{
background: #000;
color:#fff;
display:inline-block;
font-size:90%;
line-height: 1;
padding:5px 15px;
border-radius: 3px;
font-weight: bold;
}
.single #kv h1{
font-size:140%;
line-height: 1.7;
margin:10px 0 30px;
}
@media only screen and (max-width:960px){
.single #kv{
margin:0 0 30px;
}
.single #kv h1{
margin:10px 0 20px;
}
}
.single #kv p{
font-size:100%;
line-height: 40px;
background-image: url("../images/sen_green.jpg");
padding:0 5px 5px;
}
@media only screen and (max-width:960px){
.single #kv p{
font-size:90%;
line-height: 32px;
background-size:560px;
padding:0 5px 5px;
}
}
/************************************

#main_zairyo

************************************/
.single #use {
margin:0 auto 50px;
background: 
url("../images/recipe_single_use_back.jpg");
padding:5% 8%;
}
.single #use h2{
text-align: center;
font-size:120%;
padding:50px 0 0;
background-image: url("../images/recipe_zairyo_mark.png") ;
background-repeat:  no-repeat;
background-position:  center top;
background-size: 50px;
margin:0 0 15px;
position: relative;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
.single #use h2{
background-image: url("../images/recipe_zairyo_mark@2x.png") ;
}
}
.single #use dl{
border-bottom:1px solid #D5D5D5;
padding:13px 5px;
}
.single #use dl dt{
float:left;
width:70%;
}
.single #use dl dt a{
text-decoration: underline;
}
.single #use dl dd{
float:right;
width:25%;
text-align: right;
}
@media only screen and (max-width:960px){
.single #use {
margin:0 auto 30px;
padding:5%;
}
.single #use dl{
padding:10px 5px;
font-size:90%;
}
}

/************************************

.single #honbun

************************************/
.single #honbun{
margin:0 0 30px;
}
.single #honbun h3{
color:#618F4D;
font-size:140%;
margin:0 0 20px;
}
.single #honbun h4{
color:#618F4D;
font-size:120%;
margin:0 0 10px;
}
.single #honbun h5{
color:#618F4D;
font-size:110%;
margin:0 0 10px;
}
.single #honbun h6{
color:#618F4D;
font-size:110%;
margin:0 0 10px;
}
.single #honbun p{
line-height: 2;
margin:0 0 30px;
}
.single #honbun a{
text-decoration: underline;
}
.single #honbun .wp-caption p.wp-caption-text{
color:#618F4D;
font-size:80%;
padding:5px 0 0;
}

.single #honbun blockquote{
margin:30px 0;
padding:0 0 0 180px;
position: relative;
}
.single #honbun blockquote:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
} 
.single #honbun blockquote h4{
position:absolute;
width:150px;
left:0;
text-align: center;
color:#fff;
background:url("../images/recipe_single_point_back.jpg");
background-size: cover;
font-size:100%;
line-height: 1;
padding:7px 0;
border-radius: 3px;
}
.single #honbun blockquote p{
color:#426333;
line-height: 1.7;
}

.single #honbun .info{
border-top:1px solid #d5d5d5;
margin:0 0 50px;
}
.single #honbun .info:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
} 
.single #honbun .info .cat{
border-bottom:1px solid #d5d5d5;
padding:10px 0 ;
font-size:85%;
}
.single #honbun .info .cat h4{
color:#000;
font-size:100%;
display:inline-block;
margin:0;
}
.single #honbun .info .cat ul{
display:inline-block;
}
.single #honbun .info .cat ul li{
display:inline-block;
}
.single #honbun .info .cat a{
text-decoration: underline;
margin:0 5px;
}
.single #honbun .info .sns{
float:left;
width:50%;
}
@media only screen and (max-width:960px){
.single #honbun blockquote{
padding:0 0 0 ;
}
.single #honbun blockquote h4{
position:relative;
width:150px;
font-size:100%;
padding:7px 0;
}
}
@media only screen and (max-width:480px){
.single #honbun .info .cat{
float:none;
width:100%;
}
.single #honbun .info .sns{
float:none;
width:100%;
}
}
/************************************

.single #item

************************************/
.single #item {
margin:0 auto 50px;

}
.single #item h2{
text-align: center;
font-size:110%;
padding:50px 0 0;
background-image:url("../images/recipe_cart_mark.png");
background-repeat:  no-repeat;
background-position:  center top;
background-size: 50px;
margin:0 0 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
.single #item h2{
background-image:url("../images/recipe_cart_mark@2x.png");
}
}
.single #item article{
background: url("../images/item_back.jpg");
padding:3%;
margin:0 0 15px;
width:100%;
}
.single #item article a{
display: block;
}
.single #item article .image{
float:left;
width:30%;
}
.single #item article .text{
float:right;
width:65%;
}
.single #item article .text h3{
padding:5px 0 15px;
font-size:105%;
}
.single #item article .text p{
font-size:95%;
line-height: 1.7;
margin:0 0 15px;
}
.single #item article .text .bt{
text-align: right;
}
.single #item article .text .bt2{
display:inline-block;
color:#fff;
background: #000;
font-size:80%;
line-height: 1;
padding:8px 30px 8px 25px;
position: relative;
border-radius: 3px;
font-weight: bold;
}
.single #item article .text .bt2::before{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
right: 8px;
width:10px;
height:10px;
background-image: url("../images/yaji_white@2x.png");
background-size: 10px;
background-repeat: no-repeat;
content: "";
}
@media only screen and (max-width:480px){
.single #item {
margin:0 auto 30px;
}
.single #item article{
padding:5%;
margin:0 0 15px;
}
.single #item article .image{
width:40%;
}
.single #item article .text{
width:55%;
}
.single #item article .text h3{
padding:0px 0 0px;
font-size:90%;
}
.single #item article .text p{
margin:0 0 5px;
font-size:80%;
}
.single #item article .text .bt{
text-align: center;
}
.single #item article .text .bt2{
display:block;
padding:5px 0;
}
}

/************************************

.single #tag

************************************/
.single #tag {
margin:0 auto 50px;
}
.single #tag h2{
text-align: center;
font-size:110%;
padding:40px 0 0;
background-image: url("../images/main_tag_mark.png") ;
background-repeat:  no-repeat;
background-position:  center top;
background-size: 40px;
margin:0 0 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
.single #tag h2{
background-image: url("../images/main_tag_mark@2x.png") ;
}
}
.single #tag ul.tag{
background: url("../images/item_back.jpg");
padding:3%;
letter-spacing: -1em;
}
.single #tag ul.tag li{
letter-spacing:0;
font-size:90%;
display:inline-block;
padding:5px 15px;
}
@media only screen and (max-width:480px){
.single #tag {
margin:0 auto 30px;
}
.single #tag ul.tag li{
padding:5px 7px;
}
}

/************************************

tag_title

************************************/
.cat_title{
margin:0 0 30px;
text-align: center;

}
.cat_title h3{
font-size:100%;
font-weight: normal;
margin:0 0 10px;
}
.cat_title h2{
display:inline-block;
position: relative;
font-size:20px;
line-height: 1;
padding:10px 0;
}
.cat_title h2::before{
position: absolute;
top: 0;
left: -45px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width:40px;
height:40px;
content: "";
}
#tag_title h2::before{
background-image:url("../images/recipe_onayami_mark@2x.png");
}
#purpose_title h2::before{
background-image:url("../images/recipe_mokuteki_mark@2x.png");
}
#materials_title h2{
padding:15px 0;
}
#materials_title h2::before{
background-image:url("../images/recipe_zairyo_mark@2x.png");
width:50px;
height:50px;
left: -55px;
}
#search_title h2::before{
background-image:url("../images/recipe_onayami_mark@2x.png");
}
@media only screen and (max-width:960px){
.cat_title h2{
font-size:18px;
}
}

/************************************

#recent

************************************/
#recent {
margin:0 auto 50px;
}
#recent h2{
text-align: center;
font-size:120%;
padding:25px 0 0;
background-image: url("../images/new_mark.png") ;
background-repeat:  no-repeat;
background-position:  center top;
background-size: 80px;
margin:0 0 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#recent h2{
background-image: url("../images/new_mark@2x.png") ;
}
}
#recent article{
width:47%;
margin:1.5%;
}
#recent article a{
display:block;
}
#recent article .image{
margin:0 0 10px;
}
#recent article h3{
font-size:100%;
font-weight: normal;
}
@media only screen and (max-width:960px){
#recent article{
width:100%;
margin:0 0 10px;
}
#recent article .image{
float:left;
width:40%;
margin:0;
}
#recent article .text{
float:right;
width:55%;
}
#recent article h3{
font-size:90%;
}
}
@media only screen and (max-width:480px){
#recent article .cat{
width:80px;
}
}