/****************共通要素****************/
header, pre, footer, main, aside, article, details, figcaption, figure, hgroup, menu, section {display: block;}
@charset "UTF-8";
/****************共通要素メモ****************/
/* @media screen and (max-width:600px){}
@media screen and (min-width:600px) and (max-width: 1300px){}
@media screen and (min-width:1300px){} */

body{
	margin:0;
	padding:0;
}
h1{
	text-align: center;
	font: bold 2em 'メイリオ','Meiryo';
	margin: 0;
	padding: 0.5em 2em;
}
	@media screen and (max-width:600px){
		h1{
			text-align: center;
			font: bold 1.5em 'メイリオ','Meiryo';
			margin: 0 0 1em 0;;
			padding: 0.5em 0em;
		}
	}


h2{
	margin: 40px 0;
	padding: 0.5em;
	font: bold 1.5em 'メイリオ','Meiryo';
	border-left: 10px solid #008000;
	border-bottom: 1px solid #008000;
	
}
@media screen and (max-width:600px){
	h2{
		font: bold 1.3em 'メイリオ','Meiryo';
		margin: 10px 0 30px 0;
	}
}

h3{
	font: bold 1em 'メイリオ','Meiryo';
	margin: 0 0 30px 0;
	padding: 0 0.5em;
	border-left: 3px double #008000;
	background-color: #E9E9E9;
}

h4{
	font: bold 1em 'メイリオ','Meiryo';
	margin: 0 0 30px 0;
	padding: 0 0.5em;
	color: #FF570D;
}	

#ads{
	font: bold 1em 'メイリオ','Meiryo';
	color: #000000;
	margin: 0 0 30px 0;
	padding: 0 0.5em;
	border-left: 3px double #FF570D;
	background-color: #E9E9E9;
}

a:link{	text-decoration:none; color: #008000;}
a:visited{ text-decoration:none; color: #008000;}
a:hover{color: #FF570D; text-decoration:underline;}
a:active{color: #FF570D; text-decoration:underline;}
a:focus{color: #FF570D; text-decoration:underline;}

 /* フロート解除*/
#clearboth{
	clear: both;
	margin:0;
	padding:0;
}

/* スマホで隠す（spanがよい）*/
@media screen and (max-width:600px){
	#hidewithsp{
		display: none;
	}
}

#twitterlink{
	background-color: #1b95e0;
	color: white;
	border-radius: 5px;
	padding: 0 0.5em;
}
#twitterlink a:link{text-decoration:none; color: white;}
#twitterlink a:visited{ text-decoration:none; color: white;}
#twitterlink a:hover{color: white; text-decoration:none;}
#twitterlink a:active{color: white; text-decoration:none;}
#twitterlink a:focus{color: white; text-decoration:none;}

/****************ヘッダ用****************/

 /* ヘッダの陰*/
header{
	margin: 0 0 10px 0;
	padding:0;
	text-align: center;
}

 /* サイトのタイトルの装飾 */
#title {
	margin: 20px auto;
}
#title img{
	max-width: 80%;
	vertical-align: middle;
}

nav{
	background-color: black;
}
nav ul{
	max-width: 1300px;
	margin: 0 auto 0 auto;
	padding:0;
}
	@media screen and (min-width:600px){
		nav ul{
			display: grid;
			grid-template-columns: repeat(5, 1fr);
		}		
	}
nav a:link{text-decoration:none; color: #FFFFFF;}
nav a:visited{text-decoration:none; color: #FFFFFF;}
nav a:hover{color: #FF570D; text-decoration:underline;}
nav a:active{color: #FF570D; text-decoration:underline;}
nav a:focus{color: #FF570D; text-decoration:underline;}

nav li{
	margin:0;
	padding:0.3em 0.5em 0.3em 0.5em;
	display: inline-block;
	white-space: nowrap;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
}
	@media screen and (max-width:600px){
		nav li{
			border: none;
		}	
	}
	@media screen and (min-width:600px){
		nav li{
			box-shadow: 0 1px 3px #FFFFFF;
		}	
	}

/* 検索ボックス*/
nav label{
	display:block;
}
  /*ボタンの装飾*/
nav label span:hover{
	cursor:pointer;
	color: #FF570D;
}
nav input[type="checkbox"]{
	display:none;
}
  /*checkboxがcheckの状態になったらpopupを表示させる*/
nav input[type="checkbox"]:checked + #searchbar{
	display:block;
}

#searchbar{
	margin: 0;
	padding: 5px;
	display:none;
}
#searchbox{
	opacity: 100%;
	max-width:1300px;
	margin: 0 auto 0 auto;
	border: none;
}
#searchbox input[type="q"]{
	border: none;
	background-color: #FFFFFF;
	height: 2.0em;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	padding: 0 0 0 1em;
}
#searchbox button{
	width: 3.5em;
	cursor: pointer;
	border: none;
	color: #008000;
	overflow:visible;
	height: 2.0em;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	text-align: center;
}

/****************フッタ用****************/

 /* フッタの陰*/
 footer{
	border-top: 1px solid #008000;
	margin: 0;
	padding: 0.5em 0;
	text-align: center;
}

/* ヘッダー部分のリンクリスト */
ul.footerlinklist{
	margin: 0 0 30px 0;
	padding: 0 0.5em;
}

ul.footerlinklist li{
	margin: 0; /* マージンの変更 上 右 下 左*/
	font-size: 0.95em;
	padding: 0.3em 1em;
}
@media screen and (max-width:600px){
	ul.footerlinklist li{
		padding: 0.3em 2em;
		text-align: center;
		line-height: 2.6em;
		list-style: disc;
	}
}
@media screen and (min-width:600px){
	ul.footerlinklist li{
		display: inline-block;　	/* リンクを横並びにする */
	}
}

 /* フッタの著作権*/
#copyright{
	text align:center;
	font-family:'メイリオ','Meiryo';
	font-size:0.95em;		/* 文字を小さくする */
	margin:0; /* マージンの変更 上 右 下 左*/
}


/****************メイン部分の配置を決める****************/
#mainstyle{
	margin: 0 0 30px 0;
	padding: 0;
	display: grid;
	row-gap: 30px;
	column-gap: 50px;
	justify-content: center;
}
@media screen and (max-width:600px){
	#mainstyle{
		grid-template-columns: 1;
		grid-template-rows: 3;
	}	
}
@media screen and (min-width:600px) and (max-width: 1300px){
	#mainstyle{
		grid-template-columns: 1;
		grid-template-rows: 3;
	}	
}
@media screen and (min-width:1300px){
	#mainstyle{
		grid-template-columns: 950px 300px;
		grid-template-rows: 2 1fr;
	}
}

#articlestyle{
	margin: 0 0 30px 0;
	max-width: 100%;
	grid-row: 1;
	grid-column: 1;
}
@media screen and (max-width:600px){
	#articlestyle{
		max-width: 930px;
		padding: 0 1em;
	}	
}
@media screen and (min-width:600px) and (max-width: 1300px){
	#articlestyle{
		max-width: 930px;
		padding: 0 1em;
	}	
}
@media screen and (min-width:1300px){
	#articlestyle{
		width:930px;
		padding: 0;
	}
}

#adsence{
	max-width: 100%;
	margin:0;
	padding:0;
	grid-row: 2;
	grid-column: 1;
}
/****************ナビゲーションバーの装飾****************/

#asidestyle{
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
	@media screen and (max-width:600px){
		#asidestyle{
			border-top:  0.1px solid #008000;
			padding-top: 30px;
			grid-row: 3;
			grid-column: 1;
		}
	}
	@media screen and (min-width:600px) and (max-width: 1300px){
		#asidestyle{
			border-top:  0.1px solid #008000;
			padding-top: 30px;
			max-width:930px;
			grid-row: 3;
			grid-column: 1;
		}
	}
	@media screen and (min-width:1300px){
		#asidestyle{
			align-content:flex-start;
			max-width:300px;
			padding-top: 30px;
			grid-row: 1/3;
			grid-column: 2;
		}
	}

#asidefchild{
	margin: 0 0 30px 0;
	padding: 0;
}
	@media screen and (max-width:600px){
		#asidefchild{
			max-width: 100%;
			padding: 0 1em;
		}
	}
	@media screen and (min-width:600px) and (max-width: 1300px){
		#asidefchild{
			max-width: 40%;
			padding: 0 1em;
		}
	}
	@media screen and (min-width:1300px){
		#asidefchild{
			max-width: 300px;
		}
	}

#asidefchildadsence{
	width: 300px;
	margin:0 0 30px 0;
	padding:0;
}

/* ナビゲーション各要素のメインフォント */
#asidefont{
	font-size: 0.9em;
	margin: 0 0 30px 0;
	padding: 0;}

.asidelinkbox {
	margin: 0 0 10px 0;
	padding: 0;
	border-bottom: solid 0.5px silver;
}
.asidelinkbox span{
	margin:0;
	padding:0;
    font-size: 0.80em;
    color: black;
}

.asidelinkbox p{
	font-size: 0.90em;
	margin: 0;
	padding: 0;
}

#asidetolist{
	font-size: 0.90em;
	line-height: 2.6em;
	text-align: right;
}
/****************メインパートの装飾****************/

#maintoplink{
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 0.85em;
	color: black;
}

/* メインの投稿日、更新日時 */
#maindates{
	text-align: center;
	font-size: 0.85em;
	margin: 0 0 30px 0;
	padding: 0;
	color: black;
}

/* メインの行間 */
#maincontents{
	line-height: 1.7em;
	margin: 0 0 30px 0;
}

#maincontents a:link{color: #005FFF;}
#maincontents a:visited{color:#005FFF;}
#maincontents a:hover{color: #FF570D; text-decoration:underline;}
#maincontents a:active{color: #FF570D; text-decoration:underline;}
#maincontents a:focus{color: #FF570D; text-decoration:underline;}
/* メインのパラグラフ*/
#maincontents p{
	text-indent: 1em;
	margin: 0 0 30px 0;
	padding: 0;
}


/* メインのリスト*/
#maincontents ul{
	margin: 0 0 30px 0;
}
#maincontents ol{
	margin: 0 0 30px 0;
}

#maincontents ul ul,ol{
	margin: 0;
}
#maincontents ol ul,ol{
	margin: 0;
}

/* メインのコード表記*/
#code{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	background:#FFFFFF;
	color:#586e75;
	text-indent: 0;
	line-height: 125%;	
	margin: 0 0 30px;
	padding: 1em;
	box-shadow: 0 1px 3px #FF570D;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;
}

#indent2{
	padding: 1em;
}

@media screen and (max-width:600px){
	#url{
		word-break: break-all;
	}
}


#maincontact{
	margin: 70px 0 30px 0;
	display:grid;
	row-gap: 0.5em;
	column-gap: 2em;
}

@media screen and (max-width:599px){
	#maincontact{ max-width: 280px;}
	#mc1h5{grid-row: 1; grid-column:1;}
	#mc1p{grid-row: 2; grid-column:1;}
	#mc2h5{grid-row: 1; grid-column:2;}
	#mc2p{grid-row: 2; grid-column:2;}
	#mc3h5{grid-row: 3; grid-column:1/3;}
	#mc3p{grid-row: 4; grid-column:1/3;}
	#mc4h5{grid-row: 5; grid-column:1/3;}
	#mc4p{grid-row: 6; grid-column:1/3;}
}

@media screen and (min-width:600px){
	#maincontact{ max-width: 600px;}
	#mc1h5{grid-row: 1; grid-column:1;}
	#mc1p{grid-row: 2; grid-column:1;}
	#mc2h5{grid-row: 1; grid-column:2;}
	#mc2p{grid-row: 2; grid-column:2;}
	#mc3h5{grid-row: 1; grid-column:3;}
	#mc3p{grid-row: 2; grid-column:3;}
	#mc4h5{grid-row: 3; grid-column:1/4;}
	#mc4p{grid-row: 4; grid-column:1/4;}
}
	

#maincontact h5{
	margin:0;
	padding:0;
}
#maincontact p{
margin:0;
padding:0;
}

#sharebutton1{
	width: 1.8em;
	height: 1.8em;
	background-color: #008000;
	color: #FFFFFF;
	border:none;
	border-radius: 5px;
	font-size: 1.3em;
	vertical-align: top;
}
#sharebutton1:hover{
	cursor:pointer;
}

#sharebutton2{
	width: 1.8em;
	height: 1.8em;
	background-color: #1b95e0;
	color: #FFFFFF;
	border:none;
	border-radius: 5px;
	font-size: 1.3em;
	vertical-align: top;
}
#sharebutton2:hover{
	cursor:pointer;
}

#sharebutton3{
	width: 1.8em;
	height: 1.8em;
	background-color: #00A4DE;
	color: #FFFFFF;
	border:none;
	border-radius: 5px;
	font-size: 1.3em;
	vertical-align: top;
}
#sharebutton3:hover{
	cursor:pointer;
}


/* メインの画像表示*/
#maincontents img{
	margin: 0 0 30px 0;
	max-width: 100%;
	height: auto;
	border: 1px solid#FF570D;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

/* メインの前の日記、次の日記へのリンクボックス */
#mainprepostlink{
	margin: 0 0 30px 0;
	padding: 0;
	width: 100%;
	font-size: 0.95em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
}

/* メインの前の日記へのリンク */
#mainprelink{
	padding: 0.5em;
	box-shadow: 0 1px 3px grey;
}

/* メインの次の日記へのリンク */
#mainpostlink{
	padding: 0.5em;
	box-shadow: 0 1px 3px grey;
	text-align: right;
}

/* メインの前の日記、次の日記へのリンク 日付を薄く小さく*/
#mainprepostlinkdate{
	color: black;
	font-size: 0.9em;
}

/*目次の設定*/
#toc{
	border: 3px double silver;
	border-radius: 1em;
	margin:0em 1em 30px 1em;
	padding: 0.5em 1em 0em 1em;
	line-height: 2em;
}
@media screen and (max-width:600px){
	#toc{
		margin:0em 0.3em 30px 0.3em;
		padding: 0.5em 0.3em 0em 0em;
	}
}
#toc h4{
	margin: 0 0 0 0;
	padding: 0 0.5em;
	text-align: center;
}
#toc ul{
	list-style: none;
	padding: 0 2em 0 2em;
}
	@media screen and (max-width:600px){
		#toc ul{
			list-style: none;
			padding: 0 0 0 1em;
			font-size: 0.95em;
		}
	}
#toc li{
	border-bottom: 1px solid silver;
}
/****************welcomeページの装飾****************/

#latestparent{
	display: grid;
	row-gap: 20px;
	column-gap: 20px;
	margin: 0 0 30px 0;
	padding: 0;
}
	@media screen and (max-width:600px){
		#latestparent{
			grid-template-columns: repeat(1, 1fr);
			grid-auto-rows: max-content;
		}	
	}
	@media screen and (min-width:600px){
		#latestparent{
			grid-template-columns: repeat(3, 1fr);
			grid-auto-rows: max-content;
		}	
	}

#latestchild{
	border-radius: 2px;
	box-shadow: 0 1px 3px 0 grey;
	height: 100%;
	display: grid;
}
	@media screen and (max-width:600px){
		#latestchild{
			grid-template-rows: auto 1fr;
			grid-template-columns: 5.5em auto;
			row-gap: 0;
			column-gap:0.5em;
		}
	}
	@media screen and (min-width:600px){
		#latestchild{
			grid-template-rows: auto auto 1fr;
			grid-template-columns: auto;
		}
	}


#latestcimg{
	margin: 0 0 10px 0;
	padding: 0;
}
	@media screen and (max-width:600px){
		#latestcimg{
			margin: 0;
			grid-row: 1;
			grid-column: 1;
		}
	}

#latestcimg img{
	border-radius: 2px;
	box-shadow: 0 1px 3px 0 grey;
	margin: 0;
	padding: 0;
	width: 100%;
	object-fit: contain;
	vertical-align: center;
	vertical-align: top;
}	
#latestctitle{
	margin: 0 0 10px 0;
	padding: 0 0.5em;
}
	@media screen and (max-width:600px){		
		#latestctitle{
			grid-row: 1/3;
			grid-column: 2;
			padding: 0em;
			margin: 0;
		}
	}
	#latestctitle h4{
		margin: 0;
		padding: 0;
	}

#latestcdescription{
	margin: 0 0 10px 0;
	padding: 0 0.5em;
	height: 5.5em;
	overflow: hidden;
	font-size: 0.9em;
	color: black;
	align-self: end;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}	
	@media screen and (max-width:600px){
		#latestcdescription{
			display: none;
		}
	}
	
#indexlinktime{
	color: black;
}
	@media screen and (max-width:600px){
		#indexlinktime{
			font-size: 0.7em;
			grid-row: 2;
			grid-column: 1;
			justify-self: center;
			align-self: end;
		}
	}
	@media screen and (min-width:600px){
		#indexlinktime{
			font-size: 0.9em;
			padding: 0.3em;
			justify-self: end;
			align-self: end;		
		}
	}


/****************search page****************/
#searchbox img{
	width: 1em;
	height: auto;
	vertical-align: middle;
}

#searchbox2{
	margin: 30px auto 30px auto;
	border: none;
}
#searchbox2 input[type="q"]{
	border: 1px solid silver;
	width: 70%;
	height: 2.5em;
	padding: 0 0 0 1em;
}
#searchbox2 button{
	width: 5em;
	cursor: pointer;
	border: none;
	background-color: #008000;
	color: #FFFFFF;
	overflow:visible;
	height: 2.5em;
	text-align: center;
}
#searchbox2 img{
	width: 1em;
	height: auto;
	vertical-align: middle;
}

/****************in page link****************/
#bloglink{
	margin: 0 0 30px 0;
	padding: 1em;
	max-width: 900px;
	border: none;
	display: grid;
	grid-template-rows: 2;
	grid-template-columns: 1;
	border: 1px solid silver;
	column-gap: 1.3em;
	position: relative;
}

#bloglink h5{
	position: absolute;
	top:0.7em;
	left: 0.7em;
	margin: 0;
	padding: 0 0.5em;
	background-color: #008000;
	font-weight: bold;
	font-size: 0.8em;
	color: #FFFFFF;
}

#bloglinkimg{
	grid-row: 1/2;
	grid-column: 1/2;
}


#bloglinkimg img{
	object-fit: cover;
	margin:0;
	border: none;
	vertical-align: center;
	vertical-align: top;
}
@media screen and (max-width:600px){
	#bloglinkimg img{
		width: 90px;
		height: 90px;
	}
}
@media screen and (min-width:600px){
	#bloglinkimg img{
		width: 160px;
		height: 91px;
	}
}

#bloglinktext{
	line-height: 1.3em;
	height: 5.2em;
	overflow: hidden;
	display: -webkit-box;
    -webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	grid-row: 1/3;
	grid-column: 2/3;
}
#bloglinktext p{
	text-indent: 0;
	margin:0;
	padding:0.2em 0 0 0;
	color: black;
}


table{
	border-collapse:separate;
	border-spacing: 0;
	margin: 0 0 30px 0;
  }
  
  table th:first-child{
	border-radius: 5px 0 0 0;
  }
  
  table th:last-child{
	border-radius: 0 5px 0 0;
	border-right: 1px solid #008000;
  }
  
  table th{
	text-align: center;
	color:white;
	background: linear-gradient(#829ebc,#008000);
	border-left: 1px solid #3c6690;
	border-top: 1px solid #3c6690;
	border-bottom: 1px solid #3c6690;
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
	padding: 0.3em 0.5em;
  }
  
  table td{
	text-align: center;
	border-left: 1px solid #a8b7c5;
	border-bottom: 1px solid #a8b7c5;
	border-top:none;
	box-shadow: 0px -3px 5px 1px #eee inset;
	padding: 0.3em 0.5em;
  }
  
  table td:last-child{
	border-right: 1px solid #a8b7c5;
  }
  
  table tr:last-child td:first-child {
	border-radius: 0 0 0 5px;
  }
  
  table tr:last-child td:last-child {
	border-radius: 0 0 5px 0;
  }