/****************共通要素****************/
header, 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 #0000FF;
		border-bottom: 1px solid #0000FF;
		
	}
	@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 #0000FF;
	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: #0000FF;}
a:visited{ text-decoration:none; color: #0000FF;}
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: 5px 0 0 0;
	text-align: center;
}

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

nav{
	background-color:#05299e;
	border-bottom: 2px solid silver;
}

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 ul{
	max-width: 1300px;
	margin: 0 auto 0 auto;
	padding:0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}


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;
	border: none;
}

/* 検索ボックス*/
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: #0000FF;
	overflow:visible;
	height: 2.0em;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	text-align: center;
}

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

 /* フッタの陰*/
 #footershadow{
	border-top: 2px solid #0000FF;
	margin: 0;
	padding: 1em 0 1em 0;
	text-align: center;
}

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

ul.footerlinklist li{
	margin: 0; /* マージンの変更 上 右 下 左*/
	padding: 0.3em 1em;
	font-size: 0.95em;
}
}
@media screen and (max-width:600px){
	ul.footerlinklist li{
		text-align: center;
	}
}
@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: 100%;
		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;
}
@media screen and (max-width: 1300px){
	#adsence h3{
		margin: 0 1em;
	}	
}
/****************ナビゲーションバーの装飾****************/
#asidestyle{
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
	@media screen and (max-width:600px){
		#asidestyle{
			border-top:  0.1px solid #0000FF;
			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 #0000FF;
			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;
}
@media screen and (max-width: 1300px){
	#asidefchildadsence h3{
		margin: 0 1em;
	}	
}
/* ナビゲーション各要素のメインフォント */
#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: grey;
}

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

/****************メインパートの装飾****************/

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

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

#iands{
	margin: 0 0 30px 0;
	padding: 0;
	display: flex;
	align-items: center;
    flex-flow: row;
}
@media screen and (max-width:600px){
	#iands{
		flex-flow: column;
	}
}
@media screen and (min-width:601px){
	#iands{
		flex-flow: row;
	}
}

#iands img{
	float: left;
	width:150px;
	height:auto;
	margin:0;
	padding:1em 1em 0em 0em;
}

#iands p{
	font-size: 0.85em;
	margin: 0em 0em 0em 0em;/* マージンの変更 上 左 下 右*/
	padding: 1em 0em 0em 0em;/* マージンの変更 上 左 下 右*/
	color: grey;
}

/* メインの本文設定 */
#maincontents{
	line-height: 1.7em;
	margin: 0 0 50px 0;
}

/* メインのパラグラフ*/
#maincontents p{
	text-indent: 1em;
	margin: 0 0 30px 0;
	padding: 0;
}


/* メインのリスト*/
#maincontents ul{
	margin: 0 2em 30px 2em;
	padding: 2em 2em 2em 3em;
	background-color: #FFFFEE;	
	box-shadow: 0 2px 6px 0 grey;
}
@media screen and (max-width:599px){
	#maincontents ul{
		margin: 0 0 30px 0;
		padding: 1em 1em 1em 2em;
  	}
}

#maincontents ol{
	margin: 0 2em 30px 2em;
	padding: 2em 2em 2em 3em;
	background-color: #FFFFEE;	
	box-shadow: 0 2px 6px 0 grey;
}
@media screen and (max-width:599px){
	#maincontents ol{
		margin: 0 0 30px 0;
		padding: 1em 1em 1em 2em;
  	}
}

#maincontents ul lh{
	margin: 0 0 0 -1em;
	font-weight: bold;
	color: #FF570D;
	background:linear-gradient(transparent 60%, #FFFF00 60%);
	
}
#maincontents ol lh{
	margin: 0 0 0 -1em;
	font-weight: bold;
	color: #FF570D;
	background:linear-gradient(transparent 60%, #FFFF00 60%);
}

#maincontents ul li{
	border-bottom: 1px dotted #FF570D;	
}
#maincontents ol li{
	border-bottom: 1px dotted #FF570D;
}

#maincontents ul ul{
	margin:	0;
	padding: 0em 0em 0em 1.5em;
	background-color: #FFFFEE;	
	box-shadow: none;
	}
#maincontents ul ol{
	margin:	0;
	padding: 0em 0em 0em 1.5em;
	background-color: #FFFFEE;	
	box-shadow: none;
	}
	
#maincontents ol ul{
	margin:	0;
	padding: 0em 0em 0em 1.5em;
	background-color: #FFFFEE;	
	box-shadow: none;
	}
	
#maincontents ol ol{
	margin:	0;
	padding: 0em 0em 0em 1.5em;
	background-color: #FFFFEE;	
	box-shadow: none;
	}
	
/* メインの画像表示*/
#maincontents img{
 max-width: 100%;
 height: auto;
 margin: 0 0 30px 0;
}

/* メインのブロックくおーと*/
#maincontents blockquote{
	position:relative;
	border-radius:10px;
	padding:2em 2em 1em 2em;
	margin: 0 2em 30px 2em;
	background-color: #FFFFEE;
	box-shadow: 0 2px 6px 0 grey;
  }

  @media screen and (max-width:599px){
	#maincontents blockquote{
		margin: 0 0 30px 0;
		padding:2em 1em 1em 1em;
	  }
  }

  #maincontents blockquote p{
	text-indent: initial;
	margin: initial;
	padding: initial;
	}

  #maincontents blockquote:before{
	position:absolute;
	content:'"';
	font-size: 2em;
	color:#FF570D;
	top:10px;
	left:10px;
  }

  #maincontents blockquote cite {
	display: block;
	font-size: 0.9em;
	text-align: right;
	font-style: italic;
	margin-top: 1em;
  }




#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;
}

/* メインの前の日記、次の日記へのリンクボックス */
#mainprepostlink{
	margin: 0 0 10px 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: grey;
	font-size: 0.9em;
}

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 #0000FF;
  }
  
  table th{
	text-align: center;
	color:white;
	background: linear-gradient(#829ebc,#0000FF);
	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 th.second{
	text-align: center;
	color:#000000;
	background: linear-gradient(#ffffff,#A4C6FF);
	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;
  }

/*目次の設定*/
#toc{
	border: 3px double silver;
	border-radius: 1em;
	margin:0em 1em 30px 1em;
	padding: 0.5em 1em 0em 1em;
	line-height: 1.7em;
}
@media screen and (max-width:600px){
	#toc{
		margin:0em 0.3em 30px 0.3em;
		padding: 0.5em 0.3em 0em 0em;
		line-height: 1.7em;
	}
}
#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;
}
/****************index.phpの装飾****************/
#welcomeintro{
	text-align: center;
	font-size: 0.95em;
	margin: 0em 0 0.5em 0;
}

#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: 30% auto;
		}
	}
	@media screen and (min-width:600px){
		#latestchild{
			grid-template-rows: auto auto 1fr;
			grid-template-columns: auto;
		}
	}

#latestchild h4{
	background-color:whitesmoke;
	color:  #FF570D;
	margin: 0em;
	padding: 0.3em;
}
	@media screen and (max-width:600px){
		#latestchild h4{
			grid-row: 1;
			grid-column: 1/3;
		}
	}

	@media screen and (min-width:601px){
		#latestchild h4{
			grid-row: 1;
			grid-column: 1;
		}
	}

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

	
#latestcimg img{
	margin: 0;
	padding: 0;
	width: 100%;
	object-fit: contain;
	box-shadow: 0 1px 3px 0 grey;
}	
#latestctitle{
	font-weight:bold;
	margin: 0;
	padding: 0 0.3em 0.3em 0.3em;
}
	@media screen and (max-width:600px){		
		#latestctitle{
			padding: 0 0.3em 0em 0.3em;
			grid-row: 2/4;
			grid-column: 2;
		}
	}
	
#latestcdescription{
	align-self: end;
	margin: 0;
	padding: 0 0.3em 0.3em 0.3em;
	height: 5.5em;
	overflow: hidden;
	font-size: 0.9em;
	color:#000000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}	
	@media screen and (max-width:600px){
		#latestcdescription{
			display: none;
		}
	}
	
#indexlinktime{
	padding: 0.3em;
	color: #000000;
}
	@media screen and (max-width:600px){
		#indexlinktime{
			grid-row: 3;
			grid-column: 1;
			align-self: end;
			font-size: 0.7em;
		}
	}
	@media screen and (min-width:601px){
		#indexlinktime{
			justify-self: end;
			align-self: end;
			font-size: 0.9em;
		}
	}

#towelcome{
	font-weight: bold;
	padding: 0.5em 0 2em 0;
}


#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: 3.0em;
	padding: 0 0 0 1em;
}
#searchbox2 button{
	width: 4em;
	cursor: pointer;
	border: none;
	background-color: #0000FF;
	color: #FFFFFF;
	overflow:visible;
	height: 3.0em;
	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: #0000FF;
	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: grey;
}

#answer{
	display: inline-block;
}
#answer summary{
	display: inline-block;
	font-size: 0.85em;
	margin: 0.1em 0em;
	padding: 0em 0.3em;
	border: 1px solid #0000FF;
	border-radius: 5px;
	color: #0000FF;
	cursor: pointer;
}