@charset "UTF-8";

@font-face{
font-family: "JKB";
src: url(fonts/JKB.woff2) format("woff2"),
url(fonts/JKB.woff) format("woff"),
url(fonts/JKB.eot) format("eot");
}

body{
font-family: JKB,font awesome!important;
color: #393e4f;
}

.article{
font-family: JKB, font awesome;
}

.sidebar{
font-family: JKB, font awesome;
	font-style: normal;
}

.date-tags{
font-family: JKB, font awesome;
}	


/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*
	
/*テーブル幅、高さが自動で設定されてしまうのでここで設定。背景は全部白に*/
table td {
	background-color: #ffffff;
	height:20px;
	border-color:#bbb;
}

p{
	margin: 0;
}
/*ios対応用パララックスデザイン（背景固定と画面いっぱいに画像を適用）にしたい
 * background-attachment:fixed;
 * background-size: cover
 * 同時使用が適用できない？のでこれで適用*/
	
body:before{
	content:"";display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url(image/bg.JPG) center no-repeat;
  background-size:cover;
}
	
.pager-post-navi a.prev-post .prev-post-title{
	max-width: 30vw;
	text-align: left;
}
.pager-post-navi a.next-post .next-post-title{
	max-width: 30vw;
	text-align: right;
}
}


/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
	/*フッターメニュー*/	
.navi-footer-in > .menu-footer li.menu-item{
	box-shadow: 0 0 5px #fff, inset 0 0 5px #fff;
	background-color : transparent;
	border-radius: 5px;
}
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
	
	/*　グローバルナビの上下に線の装飾　*/
/*　グローバルナビの上下に線の装飾　*/
.navi {
 border-top:2px dashed #f0f8ff;
 border-bottom:2px dashed #f0f8ff;
box-shadow: 0px 4px 0px #ddefff, 0px -4px 0px #ddefff;
}
	/*.navi {
	border-top:0;
	border-bottom:0;
	box-shadow:0;
	}
	
/*背景固定ios用
 * 1240と同じ理由で
 * 画像のサイズをモバイル用にしてあるのでurlを768用に*/
body:before{
	content:"";display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background:url(image/bgmb.JPG) center no-repeat;
  background-size:cover;
}
	
/*目次　の余白修正*/	
.article .toc li {
	padding: 0.5em;
	margin-left: -20px;
}	

/*見出し h3の★と行高修正*/
.article h3 {
	padding: 0 0 2px 32px;
		margin-top: 1.5em;
}
.article h3:before {
	font-size: 18px;
	 top: -0.4em;
       left: .1em;
	transform: rotate(35deg);
}
.article h3:after {
	font-size: 12px;
	 top: -1.2em;
       left: 1.5em;
	transform: rotate(60deg);
}
	
.pager-post-navi a.prev-post .prev-post-title{
	max-width: 45vw;
}
.pager-post-navi a.next-post .next-post-title{
	max-width: 45vw;
}

}	

/*480px以下*/
@media screen and (max-width: 480px){
	/*必要ならばここにコードを書く*/
	
	/*関連記事のカテゴリラベルの位置調整*/
.no-sp-snippet .entry-card-snippet{
	display: block;
	clear: none;
}

table td{
	height:30px;
	font-size: 13px;
}
	
	/*前後記事修正
 * モバイルは横並びにならない。。。？
 * 縦並びでもぶちゃいくにならないように*/
.pager-post-navi a.prev-post, .pager-post-navi a.next-post{
	min-width: 100%;
  max-width: 100%;
	height: 100px;
}
.pager-post-navi a.prev-post .prev-post-title{
	max-width: 95vw;
	text-align: right;
	top: 1.5em;
	right: 0;
}
.pager-post-navi a.next-post .next-post-title{
	max-width: 95vw;
	text-align: left;
	top: 7.5em;
	left: 0;
}