@charset "utf-8";
/*
Theme Name: sample
Author: Matsuoka

*/







a {/*リンクされた文字*/
	color: #555;
	text-decoration: none;
		}
a:link {/*未訪問のリンク*/
	color: #555;
	text-decoration: none;
		}
a:visited {/*訪問後のリンク*/
	color: #555;
	text-decoration: none;
		}
a:hover {/*マウスをのせたとき*/
	color: #777;
	text-decoration: none;
		}

a:active {/*クリック中*/
	color: #555;
    text-decoration: none;
		}

p {
	margin: 0;
	padding: 0;
		}


html{

		}


body{
	height: 100%;
	font-size: 16px;
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	margin: 0;
	padding: 0;
		}

.rich-font {
	font-weight: 500;
	font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , 
	"YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , 
	"HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
		}


img{
	max-width: 100%;
	height: auto;
		}

ul{
	list-style: none;
	padding: 0;
		}





blockquote { /* 引用部分 */
	position: relative;
	background-color: #eee;
	border: solid 1px #bbb;
	border-radius: 3px;
	padding: 20px;
	color: #333;
	margin: 10px;
	word-break: break-all; /* アルファベットが要素からはみ出すのを防ぐ */
		}
		blockquote:before , blockquote:after {
			position: absolute;
			font-family: 'FontAwesome';
			color: #777;
			font-size: 15px;
				}
		blockquote:before{
			content: "\f10d";
			top: 5px;
			left: 5px;
				}
		blockquote:after{
			content: "\f10e";
			right: 5px;
			bottom: 5px;
				}







.ac {
	text-align: center;
		}



.hide {/*隠す*/
	display: none;
		}


.link {

		}
a.link  {
	color: #06c;
	text-decoration: underline;
		}
	a.link:hover {
		opacity: 0.8;
			}
	
	.link:before {
		font-family: "FontAwesome";
		content: "\f08e";
		font-size: 18px;
		margin: 0 1px 0 3px;
			}






/*  */
@media screen and (min-width: 800px) {
.sp { display: none; }
}

/*  */
@media screen and (max-width:799px){
.pc { display: none; }
}












/************* ＰＣ用 ************/
@media screen and (min-width: 800px) {




}

/********** モバイル用 **********/
@media screen and (max-width: 799px) {




}
/***********************************/









/*===============================================
     ＰＣ用 全体レイアウト
===============================================*/
@media screen and (min-width: 800px) {

html {
	min-height: 100%;
	position: relative;
		}
 
body {
	margin-bottom: 70px;
		}



#main {
	margin: 10px 10% 0;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	
		}


#content {
	width: 70%;
	word-wrap: break-word; /* アルファベットが要素からはみ出すのを防ぐ */
	letter-spacing: 0.5px;
		}

#side {
	width: 29%;
	padding-left: 20px;

		}



#footer {
	bottom: 0;
	position: absolute;
	height: 70px;
	line-height: 70px;
	width: 100%;
		}



}

/*===============================================
     スマホ用 全体レイアウト
===============================================*/
@media screen and (max-width:799px){




#main {
	margin-top: 10px;
	padding: 0 10px;
	word-wrap: break-word; /* アルファベットが要素からはみ出すのを防ぐ */
	 }


#content {
	
		}


#side {
	
		}



#footer {
	position: relative;
	height: 70px;
	line-height: 70px;

		}



}

/*===============================================
     ページネーションボタンデザイン 
===============================================*/

	.wp-pagenavi {
		text-align: center;
		margin-top: 10px;
			}
			
	.page-numbers {
		padding: 3px 7px;
		margin: 0 1px;
		border: solid 1px #ddd;
		border-radius: 3px;
		
			}
		
		.page-numbers.dots {
			border: none;
			padding: 0;
			margin: 0px;
				}
		.page-numbers.prev {
			margin: 0 1px 0 0;
				}
		.page-numbers.next {
			margin: 0 0 0 1px;
				}






/*===============================================
     ヘッダー部分デザイン
===============================================*/

.hd-box {
	width: 100%;
	background-color: #444;
	color: #fff;
	text-align: center;
	padding: 10px;
	border-bottom: solid 3px #666;
	box-sizing: border-box;
		}


.hd-catch {
	font-size: 10px;
	margin: 0 20px;
		}

.hd-title {
	font-size: 28px;
	margin-top: 5px;
		}
	.hd-title a {
		color: #fff;
			}
	  .hd-title a:hover {
	  	color: #ffc0cb;
	  		}


/*===============================================
     フッター部分デザイン
===============================================*/

#footer {
	background-color: #222;
	text-align: center;
	color: #fff;
		}

	#footer a {
		color: #fff;
			}



/*===============================================
      トップに戻るボタン
===============================================*/


#scroll-top {
	position: fixed;
	height: 50px;
	width: 50px;
	border-radius: 50px;
		-webkit-border-radius: 50px; /* Safari,Google Chrome用 */
		-moz-border-radius: 50px; 
	line-height: 50px;
	background-color: #222;
	color: #fff;
	text-align: center;

	right: 20px;
	bottom: 20px;
	display: none;
	margin: 0;
	

	cursor: pointer;
	opacity: 0.7;
		}


/********** ＰＣ用 **********/
@media screen and (min-width: 800px) {

#scroll-top {
	
		}

}

/********** モバイル用 **********/
@media screen and (max-width: 799px) {

#scroll-top {
	right: 10px;
	bottom: 10px;
		}

}






/*===============================================
     投稿テンプレート
===============================================*/

h1 {
	margin: 15px 0;
	padding: 10px 5px;
	font-size: 22px;
	border-top: solid 1px #bbb;
	border-bottom: solid 1px #bbb;
	box-shadow: 0 1px 0 #ddd,
			0 -1px 0 #ddd;
		}
		

				
			

h2 {
	padding: 5px 7px;
	background: transparent;/*背景透明に*/
	border-left: solid 5px #e95464;
	border-bottom: solid 1px #e95464;
	font-size: 20px;
		}


h3 {
	font-size: 16px;
		}
	h3:before {
		content: '■';
		color: #e95464;
		margin-right: 5px;
		font-size: 18px;
			}



.pink-marker {
	background: linear-gradient(rgba(233,84,100,0) 70%, #fd6878 50%);
	font-weight: bold;
		}

.pink-color {
	color: #e95464;
		}

.pink-flame {
	border: solid 1px #e95464;
	border-radius: 1px;
		}



.mokuji {
	background-color: #eee;
	border: solid 1px #bbb;
	border-radius: 3px;
	padding: 15px;
	margin: 10px;
		}
		

.item-box {
	background-color: #fafafa;
	border: solid 1px #bbb;
	border-radius: 3px;
	padding: 10px;
	font-size: 12px;

		}



.






/************* ＰＣ用 ************/
@media screen and (min-width: 800px) {




}

/********** モバイル用 **********/
@media screen and (max-width: 799px) {

h1 {
	font-size: 20px;
		}


}
/***********************************/







/*===============================================
     投稿テンプレート アフィリエイトボタン
===============================================*/


.official-btn {
	width: 70%
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 10px;
	margin: 10px;
	font-size: 22px;
	font-weight: bold;
	box-shadow: 2px 3px 3px 0px #555;
	color: #fff;
	
	border: 3px solid #f50;
	background-color: #f50;
		}

	.official-btn a {
		display: inline-block;
		width: 100%;
		height: 60px;
		border-radius: 10px;
		color: #fff;
			}




.rakuten-btn {
	display: inline-block;
	width: 240px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 30px;
	margin: 10px;
	font-size: 20px;
	font-weight: bold;
	box-shadow: 2px 3px 3px 0px #555;
	
	border: 3px solid #bf0000;
	background-color: #bf0000;
	color: #fff;

		}
	.rakuten-btn a {
		display: inline-block;
		color: #fff;
		width: 240px;
		height: 40px;
		border-radius: 30px;
		
			}
		
.amazon-btn {
	display: inline-block;
	width: 240px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 30px;
	margin: 10px;
	font-size: 20px;
	font-weight: bold;
	box-shadow: 2px 3px 3px 0px #555;
	
	border: 3px solid #ff9900;
	background-color: #fff;
	color: #ff9900;
		}
	
	.amazon-btn a {
		display: inline-block;
		color: #000;
		width: 240px;
		height: 40px;
		border-radius: 30px;
			}
	

/*===============================================
     検索フォーム
===============================================*/

.searchform {
	box-sizing: border-box;
	position: relative;
	width: 100%;
		}
		
.searchfield {
	box-sizing: border-box;
	width: 100%;
	font-size: 16px;
	margin: 0;
	padding: 10px;
	border: solid 1px #bbb;
	border-radius: 3px;
		}

.searchsubmit {
	font-family: FontAwesome;
	font-size: 20px;
	position: absolute;
	top: 0;
	right: 5%;
	margin-top: 10px;
	padding: 0;
	cursor: pointer;
	color: #888888;
	border: none;
	background: transparent;
		}

.searchsubmit:hover {
	opacity: .6;
		}





/*===============================================
     サイドバーウィジェット
===============================================*/

.sidebar-widget {
	margin: -16px 0; //"sidebar-widget"と"sidebar-title"の間に謎の改行が入る分、上にあげてる
		}



.sidebar-title { 
	margin: 10px 0px;
	padding: 7px;
	background-color: #777;
	color: #fff;
	font-size: 20px;
	text-align: center;
	border-radius: 2px;
	letter-spacing: 0.5px;

	font-weight: 900;
	font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , 
	"YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , 
	"HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;


		}
		


/********** カテゴリーリスト・固定ページリスト **********/
.cat-item , .page_item {
	height: 40px;
	border-bottom: solid 1px #bbb;
	box-shadow: 0 1px 0 0px #eee;
	font-size: 16px;

		}

	li.cat-item:last-child , li.page_item:last-child {
		border: none;
		box-shadow: 0 0 0 0 ;
			}

		.cat-item a , .page_item a  {
			position: relative;
			display: inline-block;
			height: 40px;
			width: 90%;
			padding: 0 8% 0 2%; /* widthと合わせて100%になるように */
				text-overflow: ellipsis; /* */
				white-space: nowrap; /* */
				overflow: hidden; /* この3つではみ出す部分を…で省略 */
					}
				
		.cat-item>a:before , .page_item>a:before  { /* テキストを上下中央に配置する */
			content: '';
			display: inline-block;
			width: 0px;
			height: 100%;
			vertical-align:middle;
				}

			.cat-item>a:after , .page_item>a:after  { /* ＞マーク */
				position: absolute;
				display: inline-block;
				content: '\f105';
				font-family: 'FontAwesome';
				font-size: 24px;
				right: 10px;
				top: 8px;
				color: #aaa;
					}















/*===============================================
       indexページレイアウト
===============================================*/

.entry {
	display: flex;
	border-bottom: solid 1px #bbb;
	box-shadow: 0 1px 0 0px #eee;
	padding: 5px;
		}

.eye {
	position: relative;
		}


/********** ＰＣ用 **********/
@media screen and (min-width: 800px) {
.eye img {
	height: 120px;
	width: 160px;
	object-fit: cover;
		}
.index-title { 
	font-size: 20px;
		}


}
/********** モバイル用 **********/
@media screen and (max-width: 799px){
.eye img {
	height: 90px;
	width: 120px;
	object-fit: cover;
		}
.index-title { 
	font-size: 18px;
		}
}
/***********************************/


.title-time {
	flex: 1;
	width: 100%;
	top: 0;
	margin-left: 5px;
	word-break: break-all; /* アルファベットが要素からはみ出すのを防ぐ */
		}


.index-title {
	color: #000;
	font-weight: bold;
		}


.index-time {
	display: inline-block;
	color: #888;
	font-size: 10px;
		}


.index-cate {
	display: inline-block;
	font-size: 10px;
	background-color: #38b48b;
	color: #fff;
	padding: 0 5px;
	word-break: break-all; /* アルファベットが要素からはみ出すのを防ぐ */
		}



/*===============================================
     カテゴリーページレイアウト
===============================================*/


.category-cate {
	background-color: #33b48b;
		border-bottom: solid 1px #fff;
		border-top: solid 1px #fff;
		box-shadow: 0 2px 0 #33b48b,
				 0 -2px 0 #33b48b;

		
	color: #fff;
	width: 80%;
	font-size: 24px;
	padding: 5px 10px;
	margin: auto;
	text-align: center;
		}





/*===============================================
      シングル投稿ページレイアウト
===============================================*/

.pankuzu {
	font-size: 12px;
	color: #999;
	margin-bottom: 5px;
		}
	.pankuzu a {
		color: #999;
			}


.single-title {
	font-size: 32px;
	font-weight: bold;
	margin: 10px 0;
		}


.single-time-cate {
	display: flex;
	justify-content: space-between;
		}

.single-time {
	color: #888;
	padding-top: 5px;
	font-size: 14px;
		}

.single-cate {
	font-size: 14px;
	background-color: #38b48b;
	text-align: right;
	max-width: 70%;
	padding: 0 5px;
	word-break: break-all; /* アルファベットが要素からはみ出すのを防ぐ */
		}
	.single-cate a {
		color: #fff;
			}

hr.hr-single {
	border-top: 2px dashed #8c8b8b;
}



.tag-space {
	width: 100%;
	word-break: break-all; /* アルファベットが要素からはみ出すのを防ぐ */
		}

/********** モバイル用 **********/
@media screen and (max-width: 799px){

.single-title {
	font-size: 24px;
		}


}














/********** ＳＮＳシェアボタン **********/
.sns-box {
	display: flex;
	justify-content: space-around;
		}
		
/********** ＰＣ用 **********/
@media screen and (min-width: 800px) {
.sns-box {
	flex-wrap: nowrap;
		}
}

/********** モバイル用 **********/
@media screen and (max-width: 799px){
.sns-box {
	flex-wrap: wrap;
		}
}


.sns-btn {
	display: inline-block;
	width: 30%;
	height: 40px;
	margin: 5px 2px;
	text-align: center;
	line-height: 40px;
	border-radius: 5px;
	font-weight: bold;
			}

a.sns-btn {
	color: #fff;
		}

	.btn--twitter {
		background-color: #00aced;
			}
	.btn--facebook {
		background-color: #305097;
			}
	.btn--google {
		background-color: #db4a39;
			}
	.btn--hatena {
		background-color: #008fde;
			}
	.btn--line {
		background-color: #00b900;
			}
	.btn--pocket {
		background-color: #ee4056;
			}