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

header

************************************/
header #search_recipe{
display:none;
}
/************************************

category-color

************************************/
.cat{
width:120px;
text-align: center;
color:#fff;
font-size: 75%;
font-weight: bold;
line-height: 1;
padding:4px 0;
margin:0 0 5px;
}
.cat.cat_aroma{
background-image: url("../images/cat_aroma_back.jpg");
}
.cat.cat_skincare{
background-image: url("../images/cat_skincare_back.jpg");
}
.cat.cat_jewelry{
background-image: url("../images/cat_jewelry_back.jpg");
}
.cat.cat_news{
background-image: url("../images/cat_news_back.jpg");
}
.cat.cat_column{
background-image: url("../images/cat_column_back.jpg");
}
.cat.cat_letter{
background-image: url("../images/cat_letter_back.jpg");
}
@media only screen and (max-width:960px){
.cat{
font-size: 70%;
padding:4px 0;
margin:0 0 3px;
}
}
@media only screen and (max-width:480px){
.cat{
width:100%;
}
}
/************************************

main_sub

************************************/
#main_sub{
background: url("../images/side_back.jpg");
}
#main_sub .waku{
margin:0 auto 30px;
}
#main_sub h2{
color:#618F4D;
font-size:110%;
text-align: center;
padding-top:30px;
background-repeat: no-repeat;
background-position: center top;
background-size: 40px;
margin:0 0 15px;
}
#main_sub #sub_popular h2{
background-image: url("../images/ninki_mark@2x.png");
}
#main_sub #sub_category h2{
background-image: url("../images/category_mark@2x.png");
}
#main_sub #sub_tag h2{
background-image: url("../images/tag_mark@2x.png");
}
#main_sub #sub_about h2{
background-image: url("../images/about_mark@2x.png");
}

/*** sub_popular ***/

#sub_popular article{
margin:0 0 10px;
width:100%;
}
#sub_popular article a{
display:block;
}
#sub_popular article .image{
float:left;
width:40%;
}
#sub_popular article .text{
float:right;
width:55%;
}

#sub_popular article .text h3{
font-size:85%;
font-weight: normal;
}
@media only screen and (max-width:960px){
#sub_popular{
width:90%;
}
#sub_popular article{
width:45%;
margin:0 5% 10px 0;

}
#sub_popular article .text{
float:right;
width:57%;
}
#sub_popular article .text .cat{
font-size: 70%;
padding:2px 0;
margin:0 0 3px;
}
#sub_popular article .text h3{
font-size:80%;
}
}
@media only screen and (max-width:480px){
#sub_popular article .text .cat{
width:100%;
}
}

/*** sub_cat ***/

#sub_category li{
font-size:90%;
padding:0 0 0 15px;
margin:0 0 3px;
position: relative;
}
#sub_category li a:hover{
opacity:1;
font-weight: bold;
color:#618F4D;
}
#sub_category li::before{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
left: 0px;
width:10px;
height:10px;
background: url("../images/yaji_green@2x.png") no-repeat left top;
background-size: 10px;
content: "";
}
@media only screen and (max-width:960px){
#sub_category{
width:100%;
}
#sub_category 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;
    border-top:1px solid #618F4D;
}

/*IE8▼*/
#sub_category ul li {
float: left\9;
}
/*IE9▼*/
#sub_category ul li:not(:target) {
float:left¥9;
}
/*IE10▼*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#sub_category ul li  {
	float:left !important;
}
}
#sub_category ul li{
padding:10px;
margin:0 0 ;
width:50%;
border-bottom:1px solid #618F4D;
border-right:1px solid #618F4D;
}
#sub_category ul li:nth-child(even){
border-right:none;
}
#sub_category li::before{
left: auto;
right:10px;
}
}

/*** sub_tag ***/

#sub_tag ul{
letter-spacing: -1em;
}
#sub_tag li{
letter-spacing:0;
display:inline-block;
font-size:75%;
line-height: 1.2;
margin:0 5px 5px 0;
color:#618F4D;
}
#sub_tag li a{
color:#618F4D;
border:1px solid #618F4D;
padding:2px 3px;
display:inline-block;
}
#sub_tag li a:hover{
opacity:1;
font-weight: bold;
color:#618F4D;
}
@media only screen and (max-width:960px){
#sub_tag{
width:90%;
}
}
/*** sub_about ***/

#sub_about li{
font-size:90%;
padding:0 0 0 15px;
margin:0 0 3px;
position: relative;
}
#sub_about li a:hover{
opacity:1;
font-weight: bold;
color:#618F4D;
}
#sub_about li::before{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
left: 0px;
width:10px;
height:10px;
background: url("../images/yaji_green@2x.png") no-repeat left top;
background-size: 10px;
content: "";
}
@media only screen and (max-width:960px){

#sub_about{
 display:none;
}
}

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

cat_kv

************************************/
#cat_kv{
margin:0 1.5% 30px;
}
#cat_kv h2 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
background-repeat: no-repeat;
background-position: left top;
background-size:contain;
display: block;
height: 0;
width: 100%;
padding-top:56.73%;
margin:0 0 20px;
}
.cat-aroma #cat_kv h2 {
background-image:url("../images/cat_kv-aroma.jpg");
}
.cat-skincare #cat_kv h2 {
background-image:url("../images/cat_kv-skincare.jpg");
}
.cat-jewelry #cat_kv h2 {
background-image:url("../images/cat_kv-jewelry.jpg");
}
.cat-news #cat_kv h2 {
background-image:url("../images/cat_kv-news.jpg");
}
.cat-column #cat_kv h2 {
background-image:url("../images/cat_kv-column.jpg");
}
.cat-letter #cat_kv h2 {
background-image:url("../images/cat_kv-letter.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
.cat-aroma #cat_kv h2 {
background-image:url("../images/cat_kv-aroma@2x.jpg");
}
.cat-skincare #cat_kv h2 {
background-image:url("../images/cat_kv-skincare@2x.jpg");
}
.cat-jewelry #cat_kv h2 {
background-image:url("../images/cat_kv-jewelry@2x.jpg");
}
.cat-news #cat_kv h2 {
background-image:url("../images/cat_kv-news@2x.jpg");
}
.cat-column #cat_kv h2 {
background-image:url("../images/cat_kv-column@2x.jpg");
}
.cat-letter #cat_kv h2 {
background-image:url("../images/cat_kv-letter@2x.jpg");
}
}
@media only screen and (max-width:480px){
.cat-aroma #cat_kv h2 {
background-image:url("../images/cat_kv-aroma.jpg");
}
.cat-skincare #cat_kv h2 {
background-image:url("../images/cat_kv-skincare.jpg");
}
.cat-jewelry #cat_kv h2 {
background-image:url("../images/cat_kv-jewelry.jpg");
}
.cat-news #cat_kv h2 {
background-image:url("../images/cat_kv-news.jpg");
}
.cat-column #cat_kv h2 {
background-image:url("../images/cat_kv-column.jpg");
}
.cat-letter #cat_kv h2 {
background-image:url("../images/cat_kv-letter.jpg");
}
}
#cat_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){
#cat_kv p{
font-size:90%;
line-height: 32px;
background-size:560px;
padding:0 5px 5px;
}
}

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

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: -42px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width:40px;
height:40px;
content: "";
}
#tag_title h2::before{
background-image: url("../images/main_tag_mark@2x.png");
}
#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;
}
}
/************************************

#recommend

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

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


************************************/
.list3 article{
width:30.3%;
margin:1.5%;
}
.list3 article a{
display:block;
}
.list3 article .image{
margin:0 0 10px;
}
.list3 article h3{
font-size:100%;
font-weight: normal;
}
@media only screen and (max-width:480px){
.list3 article{
width:47%;
margin:0 1.5% 20px;
}
.list3 article h3{
font-size:85%;
}
.list3 article .cat{
width:80px;
}
}

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

#beginner

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

.single #kv

************************************/
.single #kv{
margin:0 0 60px;
}
.single #kv .image{
margin:0 0 20px;
}
.single #kv .info{}
.single #kv .info:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
} 
.single #kv .info .cat{
float:left;
margin:0 20px 0 0;
}
.single #kv .info .date{
float:left;
margin:0 0px 0 0;
font-size:80%;
padding:2px 0;
font-family: 'こぶりなゴシック W1 JIS2004' ;
}
.single #kv h1{
font-size:140%;
line-height: 1.7;
margin:10px 0 0;
}
@media only screen and (max-width:960px){
.single #kv{
margin:0 0 30px;
}
.single #kv .cat{
width:120px;
padding:4px 0;
}
}
/************************************

.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 .sns{
text-align: right;
}
.single #honbun .sns .maxsocial{
width:160px;
display:inline-block;
}
/************************************

.single #item

************************************/
.single #item {
margin:0 auto 50px;
}
.single #item h2{
text-align: center;
font-size:110%;
padding:65px 0 0;
background-image: url("../images/item_mark.png") ;
background-repeat:  no-repeat;
background-position:  center top;
background-size: 64px;
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/item_mark@2x.png") ;
}
}
.single #item article{
background: url("../images/item_back.jpg");
padding:3%;
margin:0 0 15px;
}
.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;
}
}
/************************************

.single #kanren

************************************/
.single #kanren {
margin:0 auto 50px;
}
.single #kanren h2{
text-align: center;
font-size:110%;
padding:45px 0 0;
background-image: url("../images/kanren_mark.png") ;
background-repeat:  no-repeat;
background-position:  center top;
background-size: 35px;
margin:0 0 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
.single #kanren h2{
background-image: url("../images/kanren_mark@2x.png") ;
}
}
@media only screen and (max-width:480px){
.single #kanren {
margin:0 auto 30px;
}
}
/************************************

search

************************************/
.no_search{
text-align: center;
padding:50px 0 ;
display:block;
width:100%;
}
@media only screen and (max-width:480px){
.no_search{
text-align: left;
padding:30px 0;
}
}