@charset "utf-8";

body {
	color: var(--color-text-main);	/*全体の文字色*/
	background: var(--color-PROFILE-bg-page);	/*背景色*/
	font-family: var(--font-default);
	font-weight: 300;
}


nav.PC {
	width: 100%;
	background-color: var(--color-bg-header);
	text-align: center;
}
nav.fixed {
	position: fixed;
	top: 0px;
	z-index: 10000;
}
nav.PC div#menubarDummy {
	width: 100%;
	height: 77px;
	background-color: var(--color-bg-header);
	/*display: none;*/
}
#fixedMenubar a {
	color: var(--color-text-white);
}
#fixedMenubar a:hover {
	color: var(--color-text-white-hover);
}
#fixedMenubar li {
	display: inline-block;
	width: 123px;
	font-size: 14px;
	color: var(--color-text-white);
	padding-top: 40px;
}
#fixedMenubar img {
	margin-top: 10px;
	margin-left: 20px;
	margin-right: 20px;
	display: inline-block;
	width: 277px;
}


#sideMenu,
#sideMenu > div#fixedContents {
	width: 240px;
	background-color: inherit;
}
#sideMenu > div#fixedContents {
	position: fixed;
	top: 107px; /* 30 + 77 */
	/*z-index: 1;*/
}
#sideMenu h2 {
	background-color: var(--color-PROFILE-bg-panel);
	font-size: 16px;
	padding: 5px 10px;
}
#sideMenu a {
	display: block;
	background-color: inherit;
	font-size: 13px;
	border-bottom: 1px solid var(--color-PROFILE-main-darker);
	margin: 0 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 5px;
	line-height: 1.3;
	color: inherit;
}
#sideMenu a.h3 {
	margin-left: 30px;
	font-size: 12px;
	padding-top: 6px;
	padding-bottom: 3px;
}
#sideMenu a:hover {
	background-color: var(--color-PROFILE-sidemenu-hover);
	text-decoration: underline;
}
#sideMenu a.current {
	background-color: var(--color-PROFILE-sidemenu-hover);
}



#contents {
	box-sizing: border-box;
	width: 700px;
}

/* 2026/01/02 追加 */
/* <b> を bolder ではなく bold にする（太くする） */
#contents b {
	/*font-weight: bold;*/
	font-weight: 500; /* Medium */
	font-weight: 600; /* SemiBold / DemiBold */
}

#contents>div {
	box-sizing: border-box;
	/*padding: 20px;*/
	padding: 3%;
	width: 100%;
	/*height: 500px;*/
	background-color: var(--color-bg-panel);
	margin: 30px 0;
}

/*#で飛んだときにすこしずらす*/
/*https://irodory.jp/web/html-css/css/187*/
span.anchorlink {
	position: relative;
	top: -115px;
	display: block;
}

#contents p,
#contents table {
	font-size: 15px;
	line-height: 1.6;
	padding: 0 10px;
	color: var(--color-text-main);
	margin-bottom: 2px;
}
#contents a {
	color: var(--color-text-main);
}
/*#contents p.indent1 {
	padding-left: 20px;
}*/

#contents table tr td {
	text-align: left;
	vertical-align: top;
}

#contents table {
	margin: 0 10px;
}


#contents p.detail,
#contents td.detail {
	font-size: 13px;
	color: var(--color-PROFILE-text-light);
}
#contents td.detail {
	padding-left: 30px;
}
span.detail,
span.detail a {
	font-size: 13px !important;
	color: var(--color-PROFILE-text-light) !important;
}
/*.detail {
	color: var(--color-PROFILE-text-light);
}*/

#contents a {
	color: var(--color-text-main);
	border-bottom: 1px dotted var(--color-border-a-main);
}
#contents a:hover {
	border-bottom: 1px solid var(--color-border-a-hover);
}

#contents h2 {
	border-left: 6px solid var(--color-main);
	border-bottom: 2px solid var(--color-main);
	padding-left: 8px;
	padding-top: 4px;
	font-size: 20px;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 15px;
}

#contents h3 {
	line-height: 1.1;
	padding: 0 10px;
	margin: 15px 8px;
	margin-top: 25px;
	border-bottom: 1px solid var(--color-main);
	font-size: 17px;
	font-weight: bold;
}
#contents h3.noText {
	line-height: 0;
	margin-top: 20px;
	margin-bottom: 20px;
}

/*#contents table {
	border-collapse: separate;
	padding: 4px 20px 7px;
}
#contents table td {
	text-align: left;
	vertical-align: top;
	padding-bottom: 2px;
}
#contents table td:first-child {
	width: 115px;
}
*/

/* unordered list */
/* unordered list 全角一文字 */
#contents table.my-ul,
#contents table.single-letter {
	margin-left: 20px;
}
#contents table.my-ul tr td,
#contents table.single-letter tr td {
	text-align: left;
	vertical-align: top;
}
#contents table.my-ul tr td:first-child,
#contents table.single-letter tr td:first-child {
	width: 20px;
	min-width: 20px;
}

/* ordered list */
#contents table.my-ol {
	margin: 0 10px;
	margin-left: 20px;
}
#contents table.my-ol tr td {
	text-align: left;
	vertical-align: top;
}
#contents table.my-ol tr td:first-child {
	width: 25px;
	min-width: 25px;
}


#contents table.timeline-year tr td:first-child {
	width: 90px;
}



#contents table.spaced-table tr:not(:last-child) {
	/*padding-bottom: 20px;*/
	border-bottom: 10px solid rgba(255, 255, 255, 1.0);
	/*border-bottom: 10px solid rgba(0, 0, 0, 1.0);*/
	/*border-collapse: separate !important;*/
	/*border-spacing: 20px 10px !important;*/
}


#aboutMePanel .PC img {
	width: 180px;
	padding-left: 20px;
	padding-right: 40px;
}
#aboutMePanel .SP img {
	width: 50%;
	margin: 0 auto;
}
#aboutMePanel .SP p {
	text-align: center;
}

#aboutMePanel #name {
	font-weight: bold;
	font-size: 18px;
}


#referencesPanel table,
#referencesPanel table td,
#referencesPanel table a {
	font-size: 12px !important;
	word-break: break-all;
}

/* 出典などの[1]描画 */
#contents table.bracket {
	margin: 0 10px;
}
#contents table.bracket tr td {
	text-align: left;
	vertical-align: top;
}
#contents table.bracket tr td:first-child {
	width: 25px;
	min-width: 25px;
}


/* 上付き，下付き */
span.sup-text,
span.sup-text a {
	/*font-size: 60% !important;*/
	font-size: 10px !important;
	vertical-align: top !important;
	position: relative !important;
	/*top: -0.1em;*/
	padding: 0 3px !important;
}
span.sub-text {
	/*font-size: 60%;*/
	font-size: 10px !important;
	vertical-align: bottom;
	position: relative;
	/*top: 0.1em;*/
	padding: 0 3px !important;
}

footer {
	width: 100%;
	/*min-width: 960px;*/
	clear: both;
	text-align: center;	/*文字をセンタリング*/
	padding: 10px 0px;	/*左から、上下、左右への余白*/
	color: var(--color-text-main);		/*文字色*/
	font-size: 10px;
}
footer a {
	text-decoration: none;
	border: none;
	color: var(--color-text-main);	/*文字色*/
}




/*
2019-02-03
昔までは960pxとしていたが，
・ワイドモニタの普及
・スマホ用レスポンシブデザインの適用
により，よりワイドに
width だけでなく min-width も含めて
	--size-pc-width-mini:       960px;
	--size-pc-width-nornal:     1140px;
でレスポンシブに
*/
.w960 {
	width: var(--size-pc-width-mini);
	margin: 0 auto;
}
.min-w960 {
	min-width: var(--size-pc-width-mini);
}




/* only screen を消して様子見 */

@media screen and (max-width: 640px) {

	.w960 {
		width: 97% !important;
	}
	.min-w960 {
		min-width: 0;
	}

	.PC {
		display: none !important;
	}

	.SP {
		display: block !important;
	}

	#contents {
		width: 100%;
	}

	#contents div.two-pain-img-text>div.img>img {
		width: 65%;
		margin: 0 auto;
		margin-bottom: 5px;
	}
	#contents div.two-pain-img-text>div.img>img:last-child {
		margin-bottom: 20px;
	}
	#contents div.two-pain-img-text>div.img>img.portrait {
		width: 50%;
	}
}

@media screen and (min-width: 641px) {
	.PC {
		display: block !important;
	}

	.SP {
		display: none !important;
	}

	#contents div.two-pain-img-text {
		display: -webkit-box;  /*Android4.3*/
		display: -moz-box;     /*Firefox21*/
		display: -ms-flexbox;  /*IE10*/
		display: -webkit-flex; /*PC-Safari,iOS8.4*/
		display: flex;
		-webkit-align-items: center;      /* Safari etc. */
		-ms-align-items:     center;      /* IE10        */
		align-items:         center;
	}
	#contents div.two-pain-img-text>div {
	}
	#contents div.two-pain-img-text>div.img {
		width: 30%;
		margin-left: 3%;
		margin-right: 3%;
	}
	#contents div.two-pain-img-text>div.img>img {
		width: 100%;
		margin-bottom: 5px;
	}
	#contents div.two-pain-img-text>div.img>img:last-child {
		margin-bottom: 0;
	}
	#contents div.two-pain-img-text>div.text {
		width: 64%;
		display: -webkit-box;  /*Android4.3*/
		display: -moz-box;     /*Firefox21*/
		display: -ms-flexbox;  /*IE10*/
		display: -webkit-flex; /*PC-Safari,iOS8.4*/
		display: flex;
		-webkit-align-items: center;      /* Safari etc. */
		-ms-align-items:     center;      /* IE10        */
		align-items:         center;
		/*text-align: center;*/
	}
}

@media screen and (min-width: 641px) and (max-width: 1200px) {
	#aboutMePanel .PC img {
		/*width: 180px;*/
		padding-left: 10px !important;
		padding-right: 30px !important;
	}
}

@media screen and (min-width: 1201px) {
	.w960 {
		width: var(--size-pc-width-nornal) !important;
	}
	.min-w960 {
		min-width: var(--size-pc-width-nornal) !important;
	}

	#fixedMenubar li {
		width: 150px !important;
	}
	#sideMenu,
	#sideMenu > div#fixedContents {
		width: 260px;  /* 240px + 20px */
		background-color: inherit;
	}
	#contents {
		box-sizing: border-box;
		width: 860px !important;  /* 700 + (1140-960) - 20px */
	}
}


/* スマホでの文字を小さく */
@media screen and (max-width: 480px) {

#fixedMenubar li {
	font-size: calc(14px * var(--font-size-scale-for-sp));
}

#sideMenu h2 {
	font-size: calc(16px * var(--font-size-scale-for-sp));
}
#sideMenu a {
	font-size: calc(13px * var(--font-size-scale-for-sp));
}
#sideMenu a.h3 {
	font-size: calc(12px * var(--font-size-scale-for-sp));
}

#contents p,
#contents table {
	font-size: calc(15px * var(--font-size-scale-for-sp));
}

#contents p.detail,
#contents td.detail {
	font-size: calc(13px * var(--font-size-scale-for-sp));
}
span.detail,
span.detail a {
	font-size: calc(13px * var(--font-size-scale-for-sp)) !important;
}

#contents h2 {
	font-size: calc(20px * var(--font-size-scale-for-sp));
}

#contents h3 {
	font-size: calc(17px * var(--font-size-scale-for-sp));
}

#aboutMePanel #name {
	font-size: calc(18px * var(--font-size-scale-for-sp));
}

#referencesPanel table,
#referencesPanel table td,
#referencesPanel table a {
	font-size: calc(12px * var(--font-size-scale-for-sp)) !important;
}

span.sup-text,
span.sup-text a {
	/*font-size: 60% !important;*/
	font-size: calc(10px * var(--font-size-scale-for-sp)) !important;
}
span.sub-text {
	/*font-size: 60%;*/
	font-size: calc(10px * var(--font-size-scale-for-sp)) !important;
}

footer {
	font-size: calc(10px * var(--font-size-scale-for-sp));
}



}