@charset "UTF-8";

/*==========================================

 色指定メモ

 ============================================*/
 /*
基本色 


*/

/*==========================================

 各ページ詳細

 ============================================*/
 
/*--------------------------------------
 各メインヘッダー画像
--------------------------------------*/

/*==========================================

 各ページオリジナルレイアウト

============================================*/
/*--------------------------------------
 トップページ
--------------------------------------*/
.contents {
    width: 1184px;
    margin: 0 auto;
    padding: 0 32px; }

@media all and (max-width: 767px) {
    .contents {
        width: 100%;
        padding: 0 0; }}

/*--------------------------------------
 タグメニュー
--------------------------------------*/
.taglist{
    width: 1120px;
    margin: 30px auto;
}
.taglist li{
	display: inline-block;
	margin: 0 0.5rem 0.5rem;
}
.tag{
	font-weight: bold;
	font-size: 1.5rem;
	color: #FFF;
}
a.tag{
	display: block;
    text-decoration: none;
    padding: 0.5rem 2rem;
}
a.tag:hover{
    color: #FFF;
    opacity:0.8;
}
.tag.cooking{background: #E95565;}
.tag.fermentation{background: #F29801;}
.tag.rice{background: #38B48B;}
.tag.disaster{background: #B44C97;}
.tag.camp{background: #6E7955;}
.tag.electriccooker{background: #008899;}
.tag.various{background: #ED6D3D;}
.tag.apple{background: #C53D43;}
.tag.plasticbag{background: #FCC800;}

@media screen and (max-width: 767px) {
	.taglist{
	    width: 100%;
	    padding: 0 1.5rem;
	    text-align: center;
	}
}

/*--------------------------------------
カードボックス
--------------------------------------*/
.card-box a.tag{
    font-size: 1rem;
    display: inline-block;
    padding: 0.2rem 1rem;
}
    
/* カードボックス
--------------------------------------*/
.grid-box.left-start.card-box{
    margin: 0 auto;
}

.card-box{
    width: 1160px;
}
.card-box .tag{
	margin: 0 0 1rem 0;
	padding: 2px 0 2px 10px;
	font-size: 1.2rem;
}
.card{
    background: #FFFFFF;
    box-shadow: 2px 2px 15px 0 rgba(0,0,0,0.10);
    border-radius: 5px;
    padding: 15px;
    position: relative;
}
.card .ajax-iine{
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 100;
}

.card .textarea{    
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden; 
    height: 11rem;
    line-height: 1.6;
}
.card img{
	margin-bottom: 15px;
}
.card-box a{
	text-decoration: none;
	color: #333;
}
.cardtitle{
	font-weight: bold;
	font-size: 1.6rem;
	margin-bottom: 1.5rem;
	color: #28325E;
    font-family: 'mame5';
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
}
.cardtext p,
.cardtext{
	font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
	.card-box{
	    width: 100%;
	    padding: 0 1.5rem;
	}
}


/*--------------------------------------
ブログ内リンクボックス
--------------------------------------*/
.bloglink-box a.tag{
    font-size: 1rem;
    display: inline-block;
    padding: 0.2rem 1rem;
}
    
/* カードボックス
--------------------------------------*/
.grid-box.left-start.bloglink-box{
    margin: 0 auto;
}

.bloglink-box{
    width: 1160px;
}
.bloglink-card{
    background: #FFFFFF;
    box-shadow: 2px 2px 15px 0 rgba(0,0,0,0.10);
    border-radius: 5px;
    padding: 15px;
    position: relative;
    height: 16.5rem;
}
.bloglink-card-img{
    width: 40%;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}
.bloglink-card-img img{
	width: auto;
}
.bloglink-card-txt{
    width: 50%;
}

.bloglink-card-txt{    
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden; 
    height: 13rem;
}
.bloglink-box a{
	text-decoration: none;
}
.bloglink-card .cardtitle{
	margin-bottom: 1rem;
}

@media screen and (max-width: 767px) {
	.bloglink-box{
	    width: 100%;
	    padding: 0 1.5rem;
	}
	.bloglink-card{
		height: auto;
	}
	.bloglink-card-img{
		position: relative;
		display: block;
		margin-bottom: 1rem;
		top: 0;
		right: 0;
		width: 100%;
	}
	.grid-box .bloglink-card-img img{
		width: 100%;
		height: 10rem;
		object-fit: cover;
	}
	.bloglink-card-txt{    
		width: 100%;
		height: auto;
	}
	.bloglink-card .cardtext{
		display: none;
	}
}


/* レコメンド
--------------------------------------*/
.recommend{
	background : #F1F5F8;
	margin: 30px 0 0;
	padding: 30px 0 20px;
}
.recommend h2{
	text-align: center;
	margin: 0 auto 40px;
}

/* 記事
--------------------------------------*/
.blogdate{
    color: #28325E;
    text-align: center;
}
    
.rec_pict img{
    width: 300px;
}


/* about
--------------------------------------*/
#about {
    position: relative;
    width: 100%;
    margin: 0;
    color: #FFF;
    background-color: #28325E; }

#about div{
	width: 1120px;
	margin: 0 auto;
	padding: 20px 0 30px;
	font-size: 1.4rem;
}
#about p{
	margin-top: 1.5rem;
}
#about a{
	color: #FFF;
	text-decoration: none;
	border-bottom: 1px dotted #FFF;
	margin: 0 5px;
}
@media screen and (max-width: 767px) {
	#about {
		width: 100%;
	    }
	#about h3{
		text-align: center;
	}
	#about img{
		max-width: 90%;
	}
	
	#about div{
		width: auto;
		margin: 0 auto;
		padding: 20px 1.5rem 30px;
	}
}

.sns{
	margin-top: 0.5rem;
}

.sns div.fb-like,
.sns iframe,
#about div.fb-like,
#about iframe{
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
}
.sns div.fb-like,
#about div.fb-like{
    margin-left: -6px;
    margin-right: -6px;
}


/* 関連記事
--------------------------------------*/
.related{
	background : #FFF;
	margin: 30px 0 0;
	padding: 30px 0 20px;
}
.related h2{
	text-align: center;
	margin: 0 auto 40px;
}

/* アフィリンク
--------------------------------------*/
.grid-box.afilink div,
.grid-box.afilink .btn-link-list,
.grid-box.afilink .grid-03,
.grid-box.afilink .grid-08{
	margin-bottom: 0;
	padding-bottom: 0;
}

.afilink .img-nofit{
	max-height: 250px;
}

@media screen and (max-width: 767px) {
	.grid-box.afilink .grid-03,
	.grid-box.afilink .grid-03 img{
		margin-bottom: 1rem;
		text-align: center;
	}
}


/* paginathing.min.js */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    margin: 0 auto 3rem;
}
.pagination li {
    margin: 3px 5px;
}
.pagination .page a {
    border: 1px solid #28325E;
    padding: 5px 10px;
    background :#28325E;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
}
.pagination .page.navi-active a {
    background: #FFF;
    color: #28325E;
}