@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ページリンクのフォントサイズ指定 */
.prevlink {
	font-size: 16px;
	float:left;
	text-align:left;
	width: 50%;
}

.nextlink {
	font-size: 16px;
	float:right;
	text-align:right;
	width: 50%;
}

#nav-drawer {
  position: absolute;
  left: 10px;
  top: 10px;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 250px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
  background-image: url(/wp-content/uploads/2019/08/dirt_l1.jpg);
  background-repeat: repeat-y;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.hamburger-top {
  position: absolute;
  top: 5px;
  left: 210px;
/*  height: 20px; */
/*  margin-top: 5px; */
}

.cancel {
  display: inline-block;
  position: relative;
/*  margin: 0 0 0 190px; */
  padding: 0;
  width: 5px;
  height: 30px;
  background: #666666;
  transform: rotate(45deg);
  z-index: 99
}

.cancel:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 31px;
  height: 5px;
  margin-top: -3px;
  background: #666666;
}


.inner-content {
	position: absolute;
	top: 0px;
    padding: 15px 20px 5px 5px;
	font-size: 14px;
	color: #666666;
}

/* Calendar */
.calendar {
	font-size: 10px;
	color: #666666;
	text-align: center;
}

.calendardateheaders {
	font-size: 10px;
/*	font-weight: bold; */
	color: gray;
	text-align: center;
}

ul.nobullets {
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
}

.twitter {
	position: absolute;

	top: 40px;
	left: 10px;
	width: 95%;
	line-height:0.9em;
}

/* Twitter text */
.twtitle {
	font-size:14px;
	font-weight: bold;
}
.twstat {
	color: #ffffff;
	text-shadow: 1px 1px #666666;
	font-size: 14px;
}
.twtime {
	color:#cccccc;
	text-shadow: 1px 1px #444444;
	font-size:11px;
}

.counter {
	position: absolute;
	white-space: nowrap;

	top: 5px;
	right: 10px;
	width: 200px;
	text-align: right;
	font-size: 12px;
	color: #666666;
}

#sidebar {
	background-image: url(/wp-content/uploads/2019/08/dirt_r1.jpg);
	background-repeat: repeat-y;
	display: block;
}

.headcontents {
	position: absolute;
	margin: auto;
	top: 5px;
	width: 1000px;
}

/* 2カラム表示設定 */
.leftbox, .leftbox_s, .leftbox_m, .leftbox_l {
	float: left;
}
.rightbox, .rightbox_s, .rightbox_m, .rightbox_l {
	float: right;
}
.leftbox, .rightbox {
	margin: 3px;
	padding: 3px;
/*	font-size: larger; */
	width: 55%;
}
.leftbox_s, .rightbox_s {
	margin: 3px;
	padding: 3px;
	width: 33%;
}
.leftbox_m, .rightbox_m {
	margin: 3px;
	padding: 3px;
	width: 45%;
}
.leftbox_l, .rightbox_l {
	margin: 3px;
	padding: 3px;
	width: 65%;
}
/* floatの解除 */
.clear {
	clear:both;
}

/* ヘッダーロゴ非表示 */
.logo-header {
	display: none;
}

/* PC環境非表示 */
.umadb {
	display: none;
}
.twitterwidget {
	display: none;
}

/*
.scale1 {
	position: absolute;
	top: 20px;
	left: 350px;
}
*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	/* サイドバー非表示 */
	#sidebar {
		display: none;
	}
	/* ドロワーメニューエリア表示 */
	.umadb {
		display: block;
	}
	.twitterwidget {
		display: block;
	}
}

/*999px以下*/
@media screen and (max-width: 999px){
  /*必要ならばここにコードを書く*/
	.headcontents {
		width: 100%;	
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	/* ヘッダ背景画像指定 */
	.header {
		background-image:url(/wp-content/uploads/2019/08/zkt_blog_bn_tbl.jpg);
	}
	/* Twitter text */
	.twtitle {
		font-size:11px;
	}
	.twstat {
		font-size: 11px;
	}
	.twtime {
		font-size:9px;
	}
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	/* ヘッダ背景画像指定 */
	.header {
		background-image:url(/wp-content/uploads/2019/08/zkt_blog_bn_smp.jpg);
	}
	/* ページリンクのフォントサイズ指定 */
	.prevlink {
		font-size: 9px;
	}
	.nextlink {
		font-size: 9px;
	}
	/* 2カラム表示をリセット */
	.leftbox, .leftbox_s, .leftbox_m, .leftbox_l, .rightbox, .rightbox_s, .rightbox_m, .rightbox_l {
		float: initial;
		margin: initial;
		padding: initial;
		width: initial;
	}
}