@charset "utf-8";

/* ----- HTML再定義 ------------------------------------ */
:root {
	--main-color: #30529a;
	--main-colorOp75: rgba(224, 229, 240, 0.75);
	--main-color50: #e0e5f0;
	--ac-color: #e83820;
  }
* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
	font-style: normal;
	font-family: 'ＭＳ Ｐゴシック', 'MS UI Gothic', Osaka, sans-serif;
	text-align: left;
	word-break: break-all;
	scroll-behavior:smooth;
}
body {
	margin: 0 auto;
	padding: 0px;
	background-color: #F7F7F7;
}

p, li, dt, dd, address {
	color: #444;
}
ul {
	list-style-type: none;
}
code, var, kbd {
	color: #000080;
	font-family: 'ＭＳ ゴシック', monospace;
	line-height: 1.2;
}
em {
	font-weight: bold;
}
img {/* 2024-04追加 */
	max-width: 100%;
	border: none;
	vertical-align: bottom;
	/* object-fit: cover; */
}
pre {
	border: 1px solid #EEEEEE;
	overflow: auto;
}
blockquote {
	border-left: 2px solid #7777AA;
}
blockquote p {
	color: #999999;
}
/* form */
form fieldset {
	border: 0px solid #000000;
}
form legend {
	display: none;
}
form input, form select {
	margin-right: 1px;
	padding: 1px;

	font-size: 90%;
}
form p input {
	text-align: center;
}
form textarea {
	padding: 1px;

	font-family: 'ＭＳ ゴシック', Osaka, monospace;
	line-height: 1.2;
}

/* table */
table {
	border: 1px solid #666680;
	border-collapse: collapse;
}
table tr th {
	border: 1px solid #AAAAAA;
	background-color: #EEEEEE;
	text-align: center;
}
table tr td {
	border: 1px solid #AAAAAA;
}

/* link */
a:link, a:visited {
	color: #0000AA;
	text-decoration: underline;
}
a:active, a:hover {
	color: #FF7700;
	text-decoration: underline;
}
/* link_menu */
div#menu a:link, div#menu a:visited {
	color: #FFFFFF;
}
div#menu a:active, div#menu a:hover {
	color: #000000;
}

/* 不要な出力エレメントを隠す */
div#menu h2 {
	display: none;
}
div#navi h2 {
	display: none;
}
div#page,
div#page h2 {
	display: none;
}
div#diary h2 {
	display: none;
}
div#navigation form dl dt {
	display: none;
}
div#work form dl dt {
	display: none;
}
div#navi,
div#navi form dl dt {
	display: none;
}

/* ----- 基本構造 -------------------------------------- */
div#container {

	background-color: #FFFFFF;
}

div#header {
	background-color: var(--main-color);
	background-blend-mode: overlay;
	background-image: url(img/main001.jpg);
	background-repeat: no-repeat;
}
div#header h1 {
	text-align: center;
	padding: 0 1rem;
}
div#header h1 a {
	color: #fff;
	font-size: 2.5rem;
	text-decoration: none;
}

div#menu {
	background-color: #777788;
}
div#menu ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
div#menu a:link, div#menu a:visited {
	color: #fff;
}
div#menu a:active, div#menu a:hover {
	color: #000;
}

/* 見出し */
div#diary h3,
div#navigation .block h2 {
	background-color: var(--main-color50);
	color: var(--main-color);
	padding: 0.25em;
	width: 100%;
	margin: 0.5em 0;
}

/* 記事footer */
ul.info {
	display: flex;
	justify-content: flex-end;
	gap: 1em;
}

/* pager */
div#page ul,
div#navi ul,
ul.calender {
	display: flex;
	gap: 1em;
}
div#page ul {
	justify-content: flex-start;
}
ul.calender  {
	justify-content: flex-start;
	width: 80%;
	margin: 1em auto;
}
div#navi ul {
	justify-content: flex-end;
}

/* aside */
div#navigation .block {
	width: 100%;
}
div#navigation .block dl,
div#navigation .block dl+p,
div#navigation .block:nth-of-type(5) li
{
	margin: 1rem 2rem;;
}
/* カレンダー */
div#navigation .block table {
	width: 90%;
	margin: 1em auto;
	text-align: center;
	border: 0px solid var(--main-color);
}
div#navigation .block table th {
	background-color: transparent;
	text-align-last: left;
	border: 0px solid var(--main-color);
}
div#navigation .block table td {
	border: 0px solid var(--main-color);
} 

	/* トップに戻る */
	#pageTop {
		display: block;
		padding: 0.5em 0.75em;
		background-color: var(--main-colorOp75);
		border-radius: 25%;
		font-size: 2.2rem;
		text-align: center;
		line-height: 1.0;
		position: fixed;
		bottom: 1rem;
		right: 1rem;
		z-index: 9999;
	}
	#pageTop a{
		text-decoration: none;
	}
	#pageTop a:link,
	#pageTop a:visited,
	#pageTop a:hover,
	#pageTop a:active
	{
		color: var(--main-color);
	}

/* footer */
div#footer {
	text-align: center;
	background-color: var(--main-color);
}
div#footer address {
	color: #fff;
	font-style: normal;
}


/* ----- 個別指定 -------------------------------------- */

.new {
	color: #FF0000;
}


@media screen {
	form input, form select {
		font-family: Verdana, Arial, sans-serif;
	}
	div#header h1 a {
		font-family: Verdana, Arial, sans-serif;
	}
}

/* モバイルのみ */
@media only screen and (max-width:599px){
	body {
		width: 96vw;
		font-size: 3vw;
		line-height: 2.0;
	}
	p, li, dt, dd, address {
		line-height: 1.8;
	}

	.HP {
		display: none;
	}

	div#header {
		width: 100%;
		height: 140px;
		position: fixed;
		top: 0;
		left: 0;
		background-position: center top;
		background-size: 175%;
	}
	div#header h1 {
		width: 100%;
		font-size: 3.2rem;
		margin: 0 1em;
		text-align-last: left;
	}

	div#header #mobileMenu ul{
		box-sizing: border-box;
		width: 96vw;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		text-align: center;
		gap: 1%;
		padding: 2vw 0;
	}
	div#header #mobileMenu ul li {
		flex: 0 0 15%;
		padding: 1%;
		height: 4em;
		font-size: 1.4rem;
		line-height: 1.6rem;
		color:var(--main-color);
		background-color: var(--main-colorOp75);
		border-radius: 20%;
		align-content: center;
	}

	div#logs {
		padding: 1vw 2vw;
	}

	/* navi */
	div#navigation .block:nth-of-type(1),
	div#navigation .block:nth-of-type(2),
	div#navigation .block:nth-of-type(3),
	div#navigation .block:nth-of-type(4)
	{
		position: fixed;
		top: 34vw;
		left: 100vw;
		width: 100vw;
		padding: 0 2vw;
		margin: 0;
		min-height: 100vh;
		background-color: rgba(255,255,255,0.8);
		transition: all 1s;
	}
	div#navigation .block:nth-of-type(1).show,
	div#navigation .block:nth-of-type(2).show,
	div#navigation .block:nth-of-type(3).show,
	div#navigation .block:nth-of-type(4).show
	 {
		left: 0vw;
		z-index: 999;
	}
	div#navigation .block:nth-of-type(2) dl,
	div#navigation .block:nth-of-type(2) p{
		display: inline-block;
		font-size: 1.8rem;
	}
	div#navigation .block:nth-of-type(2) dl input {
		padding: 0.5em;
		width: 20em;
	}
	/* 見出し */
	div#diary h3,
	div#navigation .block h2 {
		font-size: 4vw;
	}

	div#menu {
		width: 100%;
		margin-top:calc(140px + 1vw);
		margin-bottom: 1vw;
	}
	div#menu ul {
		padding: 1vw 1vw 1vw 3vw;
		gap: 2em;
	}
	/* 記事footer */
	ul.info {
		text-align: right;
		font-size: 1.2rem;
		padding-bottom: 5vw;
		margin: 5vw 0;
		border-bottom: 1px solid var(--main-color);
		flex-wrap: wrap;
		row-gap: 0.5em;
	}
	ul.info li:nth-of-type(1) {
		text-align-last: left;
		flex: 0 0 100%;
	}

	/* footer */
	div#footer {
		width: 100vw;
		margin: 10vw 0 0 -2vw;
		padding: 2vw;
	}
}
/* pcのみ */
@media only screen and (min-width:600px){
	body {
		font-size: 1.6rem;
	}
	p, li, dt, dd, address {
		line-height: 1.4;
	}
	p {
		margin-bottom: 15px;
	}
	/* ul {
		margin: 0px 0px 20px 20px;
	}
	ul li ol li {
		margin: 0px 20px 0px 25px;
	}
	ul li ol {
		margin-bottom: 10px;
	} */
	img {
		margin-right: 10px;
		margin-bottom: 5px;
		border: 0px;
	}
	object {
		margin-left: 10px;
	}
	pre {
		width: 430px;
		margin: 10px;
		padding: 5px;
	}
	blockquote {
		margin: 10px;
	}
	form select {
		margin-top: 1px;
	}
	/* table */
	table {
		margin-bottom: 10px;
	}
	table tr th {
		padding: 5px;
	}
	table tr td {
		padding: 5px;
	}
	table tr td input {
		margin: -2px;
	}
	div#navigation table {
		margin: -2px auto 7px auto;
	}
	div#navigation table tr td {
		padding: 5px;
	}

/* ----- 基本構造 -------------------------------------- */
	div#container {
		width: 900px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0px auto;
		border-left: 1px solid var(--main-color);
		border-right: 1px solid var(--main-color);
	}
	div#header {
		width: 100%;
		height: 120px;
		background-size: cover;
		background-position: center top;
		position: relative;
	}
	div#header h1 {
		padding: 1.5em;
	}
	.HP a {
		background-color: var(--main-colorOp75)!important;
		color: var(--main-color);
		position: absolute;
		top: 1em;
		right: 2em;
		padding: 0.5em;
		text-decoration: none;

	}
	div#menu {
		width: 100%;
		margin-bottom: 10px;
	}
	div#menu ul {
		padding: 10px;
		gap: 2em;
	}
	div#navigation {
		width: 240px;
		margin-right: 1em;
	}
	div#header #mobileMenu {
		display: none;
	}
	div#logs {
		width: 635px;
	}
	ul.info {
		font-size: 1.4rem;
	}
	div#diary, div#comment, div#trackback {
		margin: 0px 15px;
	}
	
	div#page, div#navi, div#contents, div#work, div#form, div#canvas, div#env, div#status {
		width: 100%;
		padding: 0px 15px;
	}
	div#diary .diary,
	.block 
	{
		margin-bottom: 1em;
		padding: 0.25em 1em 1em;
		border: 1px solid var(--main-color);
	}
	div#diary h3,
	div#navigation .block h2 {
		font-size: 2.0rem;
	}


	div#footer {
		width: 100%;
		padding: 20px;
	}	

}