/*
Theme Name: wando
Author: bob(09works)
Author URI: http://www.09works.net/
Description: 青い森わんど2016オリジナルテーマ
License: copylight 09works
version: 1.0

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

/* お知らせ news ----- */
div.subContents section.blog, section.blog-single { max-width:1080px;}

section.blog div.blog-main, section.blog-single div.blog-main { float:left; width:calc(100% - 240px); display:block; overflow:hidden;}
section.blog ul.articleList {}
section.blog ul.articleList li { margin:0 0 40px; display:block; overflow:hidden;}
section.blog ul.articleList li:last-child { margin-bottom:0;}
section.blog ul.articleList li a.thum { float:left; width:240px; height:160px; border:1px solid #CCC; border-radius:16px; display:block; overflow:hidden; box-sizing:border-box; position:relative;}
section.blog ul.articleList li a.thum { background:url(/images/blog/noimage.jpg) no-repeat; background-size:cover;}
section.blog ul.articleList li a.thum img { width:100%; height:auto; min-height:100%; display:block; overflow:hidden;}
section.blog ul.articleList li div.inner-R { float:right; width:calc(100% - 260px); padding-top:12px; display:block; overflow:hidden; box-sizing:border-box;}
section.blog ul.articleList li div.inner-R .title { margin:0 0 8px; display:block; overflow:hidden; font-size:20px; line-height:140%;}
section.blog ul.articleList li div.inner-R p { line-height:160%;}
section.blog ul.articleList li div.inner-R p.date { margin:0 0 8px; font-size:12px; line-height:160%;}
section.blog ul.articleList li div.inner-R a.readMore { padding-right:12px;}

section.blog .category-title { margin:-32px auto 40px; font-size:18px; line-height:140%; text-align:center;}

section.blog-single article.single {}
section.blog-single article.single h1 { margin:0 0 12px; font-size:24px; line-height:160%;}
section.blog-single article.single p.date-category { margin:0 0 20px;}

section.blog-single article.single p { display:block; overflow:hidden;}

aside.sideMenu { float:right; width:180px; display:block; overflow:hidden;}
aside.sideMenu div { width:100%; margin:0 0 40px; display:block; overflow:hidden;}
aside.sideMenu div h2 { margin:0 0 12px; font-size:22px; line-height:120%; color:#ca3935;}
aside.sideMenu div h2 span { margin:-4px 0 0 2px; display:block; overflow:hidden; font-size:12px;}
aside.sideMenu div ul { padding-left:16px;}
aside.sideMenu div ul li { margin:0 0 4px; list-style:disc; line-height:160%;}
aside.sideMenu div div.sideChild { margin:0 0 8px;}


/* 固定ページ page ----- */
section.page {}
section.page ul.photoList { display:block; overflow:hidden;}
section.page ul.photoList li { float:left; width:calc((100% - 101px) / 3); margin:0 50px 40px 0; display:block; overflow:hidden;}
section.page ul.photoList li:nth-child(3n) { margin-right:0;}
section.page ul.photoList li:nth-child(3n+1) { clear:both;}
section.page ul.photoList li img { width:100%; height:auto; margin:0 auto 6px; display:block; overflow:hidden;}
section.page ul.photoList li p.caption { margin:0 auto; text-align:center;}

/* レシピ集 recipe ----- */
section.recipe { width:100%; display:block; overflow:hidden;}
section.recipe ul.recipeList { display:block; overflow:hidden;}
section.recipe ul.recipeList li a { float:left; width:calc((100% - 120px) / 4); margin:0 40px 32px 0; display:block; overflow:hidden;}
section.recipe ul.recipeList li:nth-child(4n) a { margin-right:0;}
section.recipe ul.recipeList li:nth-child(4n+1) a {clear:both;}
section.recipe ul.recipeList li a div.thum { width:100%; margin:0 0 10px; border:1px solid #CCC; border-radius:2px; display:block; overflow:hidden; box-sizing:border-box; position:relative;}
section.recipe ul.recipeList li a div.thum:before { content:""; display:block; padding-top:100%;}
section.recipe ul.recipeList li a div.thum img { width:100%; height:auto; min-height:100%; display:block; overflow:hidden; position:absolute; top:0; left:0;}
section.recipe ul.recipeList li a .title { color:#333; font-size:16px !important; line-height:140%;}
section.recipe ul.recipeList li a .title span { font-size:14px;}

section.recipe a.btn-recipeTop { width:140px; height:40px; margin:-24px auto 64px; padding-right:32px; border-radius:4px; display:block; overflow:hidden; text-align:center; font-size:16px; line-height:40px; color:#FFF; background:url(/images/bg_btn_yazirushi_w@2x.png) calc(100% - 10px) center no-repeat #ca3935; background-size:24px auto; box-sizing:border-box;}
section.recipe article.single { margin:0 0 40px; display:block; overflow:hidden;}

section.recipe article.single div.inner-R { float:right; width:calc((100% - 50px) / 2); margin:0 0 40px; display:block; overflow:hidden;}
section.recipe article.single div.inner-R h1 { margin:-8px 0 24px; font-size:28px; line-height:120%;}
section.recipe article.single div.inner-R h1 span { font-size:18px;}
section.recipe article.single div.inner-R p.catch { margin:-8px 0 24px; font-size:18px; line-height:160%;}
section.recipe article.single div.inner-R p.ingredients { width:100%; margin:0 0 24px; padding:8px 12px; border-radius:4px; font-size:16px; line-height:160%; background-color:#EFEFEF; box-sizing:border-box;}
section.recipe article.single div.inner-R p.recipeDetails { margin:0; font-size:14px; line-height:40px;}
section.recipe article.single div.inner-R p.recipeDetails span { margin:0 0 10px; padding:0 0 10px; border-bottom:1px solid #DDD;}

section.recipe article.single div.inner-L { float:left; width:calc((100% - 50px) / 2); margin:0 0 40px; display:block; overflow:hidden;}
section.recipe article.single div.photo { width:100%; max-width:600px; margin:0 auto 40px; border-radius:4px; display:block; overflow:hidden;}
section.recipe article.single div.photo img { width:100%; height:auto; display:block; overflow:hidden;}

section.recipe article.single div.useItem { clear:both; width:100%; display:block; overflow:hidden; box-sizing:border-box;}
section.recipe article.single div.useItem ul { width:100%; max-width:420px; margin:0 auto; display:block; overflow:hidden;}
section.recipe article.single div.useItem ul li { float:left; width:calc((100% - 40px) / 3); height:auto; margin:0 20px 0 0; display:block; overflow:hidden;}
section.recipe article.single div.useItem ul li:nth-child(3n) { margin-right:0;}
section.recipe article.single div.useItem ul li:nth-child(3n+1) { clear:both;}
section.recipe article.single div.useItem ul li img.itemPhoto { width:80px; height:auto; margin:0 auto 6px; display:block; overflow:hidden;}
section.recipe article.single div.useItem ul li h2 { margin:0 0 8px; color:#333; text-align:center; font-size:14px; line-height:160%;}
section.recipe article.single div.useItem ul li a.btn { width:100%; height:24px; max-width:120px; margin:0 auto; border-radius:4px; display:block; overflow:hidden;  text-align:center; color:#FFF; line-height:24px; background-color:#ca3935; background-size:auto 16px; box-sizing:border-box;}
section.recipe article.single div.useItem ul li a.btn:hover { background-color:#f5c51d}

section.recipe div.moreRecipe { width:100%;}
section.recipe div.moreRecipe h2 { margin:0 0 32px; text-align:center; font-size:28px; line-height:160%;}




/* タブレット用 ++++++++++++++++++++ */
@media screen and (max-width:1160px){
/* 固定ページ page ----- */
section.page ul.photoList li { width:calc((100% - 81px) / 3); margin:0 40px 40px 0;}


/* レシピ集 recipe ----- */
section.recipe ul.recipeList li a { width:calc((100% - 90px) / 4); margin:0 30px 24px 0;}
section.recipe ul.recipeList li:nth-child(4n) a { margin-right:0;}
section.recipe ul.recipeList li:nth-child(4n+1) a {clear:both;}

section.recipe article.single div.inner-R { width:calc((100% - 40px) / 2);}
section.recipe article.single div.inner-L { width:calc((100% - 40px) / 2);}

}

/* タブレットA ++++++++++++++++++++ */
@media screen and (max-width:860px){
/* お知らせ news ----- */
section.blog div.blog-main { float:none; width:100%; margin:0 0 80px;}
section.blog-single div.blog-main { float:none; width:100%; margin:0 0 40px;}
aside.sideMenu { float:none; width:100%;}

/* 固定ページ page ----- */
section.page ul.photoList li { width:calc((100% - 61px) / 3); margin:0 30px 30px 0;}

/* レシピ集 recipe ----- */
section.recipe ul.recipeList li a { width:calc((100% - 60px) / 3); margin:0 30px 24px 0;}
section.recipe ul.recipeList li:nth-child(4n) a { margin-right:30px;}
section.recipe ul.recipeList li:nth-child(4n+1) a {clear:none;}
section.recipe ul.recipeList li:nth-child(3n) a { margin-right:0;}
section.recipe ul.recipeList li:nth-child(3n+1) a {clear:both;}

section.recipe article.single { margin:0 0 40px;}
section.recipe article.single div.inner-R { float:none; width:100%;}
section.recipe article.single div.inner-L { float:none; width:100%;}




}

/* スマホ用 ++++++++++++++++++++ */
@media screen and (max-width:680px){
/* お知らせ news ----- */
section.blog div.blog-main { margin:0 0 60px;}
section.blog ul.articleList li { margin:0 0 20px;}
section.blog ul.articleList li a.thum { width:90px; height:60px;}
section.blog ul.articleList li div.inner-R { width:calc(100% - 105px); padding-top:0;}
section.blog ul.articleList li div.inner-R .title { margin:0 0 4px; font-size:16px; line-height:140%;}
section.blog ul.articleList li div.inner-R p.date { margin:0; display:block !important;}
section.blog ul.articleList li div.inner-R p { display:none;}

section.blog .category-title { margin:-24px auto 32px; font-size:14px; line-height:140%; text-align:center;}

section.blog-single article.single h1 { font-size:18px; line-height:160%;}
section.blog-single article.single p.date-category { margin-bottom:16px; font-size:12px; line-height:160%;}

aside.sideMenu div h2 { font-size:18px; line-height:120%;}
aside.sideMenu div h2 span { margin:-3px 0 0 2px;}


/* 固定ページ page ----- */
section.page ul.photoList li { width:calc((100% - 21px) / 2); margin:0 20px 20px 0;}
section.page ul.photoList li:nth-child(3n) { margin-right:20px;}
section.page ul.photoList li:nth-child(3n+1) { clear:inherit;}
section.page ul.photoList li:nth-child(2n) { margin-right:0;}
section.page ul.photoList li:nth-child(2n+1) { clear:both;}

/* レシピ集 recipe ----- */
section.recipe ul.recipeList li a { width:calc((100% - 10px) / 2); margin:0 10px 8px 0;}
section.recipe ul.recipeList li:nth-child(4n) a { margin-right:10px;}
section.recipe ul.recipeList li:nth-child(4n+1) a {clear:none;}
section.recipe ul.recipeList li:nth-child(3n) a { margin-right:10px;}
section.recipe ul.recipeList li:nth-child(3n+1) a {clear:none;}
section.recipe ul.recipeList li:nth-child(2n) a { margin-right:0;}
section.recipe ul.recipeList li:nth-child(2n+1) a {clear:both;}

section.recipe ul.recipeList li a h2 { font-size:14px; line-height:160%;}

section.recipe article.single {}


section.recipe article.single div.inner-R p.category { text-align:center; font-size:16px; line-height:160%;}
section.recipe article.single div.inner-R h1 { text-align:center; font-size:24px; line-height:160%;}
section.recipe article.single div.inner-R p.ingredients {font-size:14px; line-height:160%;}
section.recipe article.single div.inner-R p.recipeDetails { margin:0; font-size:14px; line-height:36px;}
section.recipe article.single div.inner-R p.recipeDetails span { margin:0 0 8px; padding:0 0 8px;}

section.recipe article.single div.useItem ul li { width:calc((100% - 20px) / 3); margin:0 10px 0 0;}
section.recipe article.single div.useItem ul li img.itemPhoto { width:60px;}
section.recipe article.single div.useItem ul li h2 { margin-bottom:4px; font-size:12px; line-height:160%;}
section.recipe article.single div.useItem ul li a.btn { font-size:12px;}
section.recipe article.single div.useItem ul li a.btn span { display:none;}
section.recipe div.moreRecipe h2 { margin-bottom:24px; font-size:20px; line-height:160%;}

}


/* ページナビ ++++++++++++++++++++ */
div.wp-pagenavi { padding:40px 0 0; display:block; overflow:hidden; text-align:center;}
div.wp-pagenavi span.pages { padding:4px 8px 3px; border:none;}
div.wp-pagenavi span.current, div.wp-pagenavi span.extend, div.wp-pagenavi a { padding:4px 6px 3px; border:none; border-radius:1px;}

div.wp-pagenavi a { border:none;}
div.wp-pagenavi a:hover { background:#F39700; color:#FFF;}

.current { background:#815A32; color:#FFF;}


/* 記事装飾 ++++++++++++++++++++ */
article.single div.honbun { font-size:14px; line-height:160%;}
article.single div.honbun h1 { margin-bottom:12px !important; font-size:24px; line-height:160%;}
article.single div.honbun h2 { margin-bottom:12px; font-size:22px; line-height:160%;}
article.single div.honbun h3 { margin-bottom:12px; font-size:20px; line-height:160%;}
article.single div.honbun h4 { margin-bottom:12px; font-size:18px; line-height:160%;}
article.single div.honbun h5 { margin-bottom:12px; font-size:16px; line-height:160%;}
article.single div.honbun h6 { margin-bottom:12px; font-size:14px; line-height:160%;}

article.single div.honbun p { margin-bottom:12px;}
article.single div.honbun ul, div.single article.honbun ul ol { margin-bottom:12px;}
article.single div.honbun ul li { margin:0 0 6px 20px; list-style:disc;}
article.single div.honbun ol li { margin:0 0 6px 20px; list-style:decimal;}
article.single div.honbun ul li:last-child, article.honbun ol li:last-child { margin-bottom:0;}
article.single div.honbun em { font-style:italic;}
article.single div.honbun img { max-width:100%; height:auto; margin:0 0 20px; border:1px solid #EFEFEF; display:block; overflow:hidden; border-radius:10px; box-sizing:border-box;}

article.single div.honbun .alignleft { float:left; margin-right:15px !important; margin-bottom:10px !important;}
article.single div.honbun .aligncenter { margin:0 auto !important; margin-bottom:10px !important;}
article.single div.honbun .alignright { float:right; margin-left:15px !important; margin-bottom:10px !important;}


@media screen and (max-width:680px){
article.single div.honbun h1 { margin-bottom:12px !important; font-size:24px; line-height:160%;}
article.single div.honbun h2 { margin-bottom:12px; font-size:18px; line-height:160%;}
article.single div.honbun h3 { margin-bottom:12px; font-size:18px; line-height:160%;}
article.single div.honbun h4 { margin-bottom:12px; font-size:16px; line-height:160%;}
article.single div.honbun h5 { margin-bottom:12px; font-size:16px; line-height:160%;}
article.single div.honbun h6 { margin-bottom:12px; font-size:14px; line-height:160%;}

article.single div.honbun .alignleft, article.single div.honbun .aligncenter, article.single div.honbun .alignright { float:none; margin:0 auto !important; margin-bottom:10px !important;}
}