@charset "UTF-8";

:root {
	color-scheme: light dark;

	--ind-h1: 0px;
	--ind-h2:   calc(var(--ind-h1)   +  5px);	/*** ind-h1 + 5px ***/
	--ind-main: calc(var(--ind-h2)   +  5px);	/*** indent  main ***/
	--ind-blc:  calc(var(--ind-main) + 15px);	/* blockquote, table, #GYOU */

	--wid-page: 680px;
	--wid-p:    650px;

	--line-h-main  : 1.3;	/** line-height **/
	--line-h-narrow: 1.2;
	--line-h-wide  : 1.6;

	/*** this ***/
	--font-main: 0.93rem;
	--font-sub:  0.85rem;
	--font-stn:  1.00rem;
	--font-max:  1.16rem;
	--font-min:  0.77rem;
}


@media ( prefers-color-scheme: light ) {

	:root {
		--col-back: #fcfcfc;	/* 地の背景色 */
		--col-main: #333;	/* 地の文字色 */
		--col-sub:  #c77;
		--col-subc: #777;

		--col-link: #0080FF;	/*   Alink   */
		--col-vist: #8080C0;
		--col-actv: #EE0000;
		--col-hovr: #FF0080;

		--col-bqbg: #dca;	/* blockquote背景色 */

		--col-del:  #aaa;

		--col-red:  red;
		--col-blu:  blue;
		--col-ppl:  #b0b;
		--col-grn:  #080;
		--col-bg:   #bfb;
	}
}

@media ( prefers-color-scheme: dark ) {

	:root {
		--col-back: #000;	/* darkmodeの背景色 */
		--col-main: #bbb;	/* darkmodeで字色は白 */
		--col-sub:  #c77;
		--col-subc: #999;

		--col-link: #58b;
		--col-vist: #559;
		--col-actv: #d00;
		--col-hovr: #d06;

		--col-bqbg: #997;	/* blockquote背景色 */

		--col-del:  #777;

		--col-red:  #c44;
		--col-blu:  #36a;
		--col-ppl:  #a5a;
		--col-grn:  #080;
		--col-bg:   #060;
	}
}


html {
	font-size:13px; font-family: "MS PGothic",arial,helvetica,clean,sans-serif;
	font-display: swap;
}
body {
	background-color: var(--col-back);
	           color: var(--col-main);
}


/*
body { font-family: 'MS PGothic', Verdana, Roboto, "Droid Sans", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", sans-serif; }


body { font-family: Verdana, Roboto, "Droid Sans", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif; }
body { font-family: Verdana, Roboto, "Droid Sans", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "ＭＳ Ｐゴシック", sans-serif; }

body { font-family: "游ゴシック Medium", "Yu Gothic Medium",sans-serif; }
body { font-family: arial,helvetica,clean,sans-serif; }
body { font-family: sans-serif; }

body { font-family: 'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,'ＭＳ Ｐゴシック',MS PGothic,sans-serif; }
*/


/****************************
          centering
 ****************************/
body { max-width: var(--wid-page);  margin: 0px auto 5px auto; }



/******************
       A LINK
 ******************/
A:link    { color: var(--col-link); }
A:visited { color: var(--col-vist); }
A:active  { color: var(--col-actv); }
A:hover   { color: var(--col-hovr); text-decoration:underline; }


/*****  html5  *****/
main { margin-top:0px; }
/*******************/



/*******************/
     font size
/*******************/
.font_main { font-size:var(--font-main); }
.font_sub  { font-size:var(--font-sub); }
.font_stn  { font-size:var(--font-stn); }
.font_max  { font-size:var(--font-max); }
.font_min  { font-size:var(--font-min); }




div,nav,p  {
	margin:0px 0px 0px var(--ind-main);
	line-height:var(--line-h-main); word-break: break-all;
}
p { font-size:var(--font-main); width:97%; max-width:var(--wid-p); }
/***
 div にwidthを入れると画像クリックがずれるので注意
 ***/



h1 {
	margin:5px 0px 5px var(--ind-h1);
	padding:6px 4px;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
h2 {
	font-size:var(--font-main);
	margin:20px auto 2px var(--ind-h2);
	text-decoration:underline;
	font-weight:normal;
}


/** nav reset **/
nav.nav { margin-left:0px }

nav.menu, div.menu 
	{ margin:3px 0px 0px calc(var(--ind-h1) + 5px); color:#555; font-size:var(--font-main); }
nav.top_menu, div.top_menu {
	font-size:var(--font-main);
	text-align:right; line-height:var(--line-h-narrow); margin-top:5px;
	color:orange; font-weight:bold; width:98%; max-width:calc(var(--wid-page) - 20px);
}

nav.g2t,div.g2t {
	font-size:var(--font-main);
	height:56px;
	margin-left:0px;
	background-color:#f0f0f0;
	border-left:5px solid #f77;
	/***  width : 98%;  ***/
	width : -webkit-calc(100% - 5px);
	width : calc(100% - 5px);
}
img.g2t { margin-left:18px; margin-top:17px;  }
img.g2t:hover {
	background-color: #fcc;
	transition: all 0.3s ease;
}



/******************
       table
 ******************/
table { margin:10px 10px 10px var(--ind-blc); border:1px solid #555; }
td { font-size:var(--font-main); text-align:center; padding:1px 3px; border:1px solid #555; }


/******************
        div
 ******************/
div.p { font-size:var(--font-main); width:97%; max-width:var(--wid-p); }
div.chu { border-left:1px solid #bbb; padding-left:3px; max-width:var(--wid-p); }


/******************
     blockquote
 ******************/
blockquote {
	width:93%; max-width:600px;
	margin:12px 90px 12px var(--ind-blc); padding:6px 5px;
	border:1px dashed #fbb;
	background-color:var(--col-bqbg); 
}
blockquote p {
	font-size:var(--font-sub);
	width:95%; max-width:550px;
	margin: 0px 0px 0px 18px;
}
blockquote p.dan { margin-top: 7px; }
blockquote.tight { margin-top: 2px; margin-bottom:2px; }


.t1 { margin-bottom:2px!important; }
.t2 { margin-top:   2px!important; }



/******************
      #GAIYOU
 ******************/
div#SUM {
	width:93%; max-width:600px;	/***  same as blockquote  ***/
	margin:12px 90px 12px var(--ind-blc); padding:5px;
	border:1px dashed #fbb;
	background-color:transparent;
	margin-bottom:25px; margin-top:20px;
}
div#SUM p
            { margin:2px 10px; width:98%; max-width:580px; line-height:var(--line-h-narrow); }


/*** draw with list ***/
div#SUM div.title { margin-left:10px; font-size:var(--font-stn); }
div#SUM ol, div#SUM ul {
	margin:2px 18px;  width:95%;
	font-size:var(--font-main);
	list-style:  decimal;
}
div#SUM li {
	margin-left:8px; line-height:var(--line-h-narrow);
	padding-bottom:1px; padding-left:1px;
}



/******************
    indent,list
 ******************/
.top { margin-top:40px; }   /* obo???? */
.dan { margin-top:2.0em!important; }  /* em必要 */
.da2 { margin-top:1.0em!important; }  /* em必要 */

p.start,div.start { margin-top:20px } /* ページのトップがp,divではじまる場合のmargin */



.sub,.subc,.asterisk,.san     { font-size:var(--font-sub); }

p.indent,
nav.kanren, div.kanren
	{ margin-left:58px; margin-top:20px;margin-bottom:20px;width:90%;max-width:620px; }

nav.kanren, div.kanren
	{ font-size:var(--font-main); }

nav.kanren a, div.kanren a {
	background: -moz-linear-gradient(bottom, #f0f70f, #ffffff); 
	background: -webkit-linear-gradient(bottom, #f0f0ff, #ffffff); 
	background: linear-gradient(to top, #f0f0ff, #ffffff); 
}


.inyou {
	width:90%; max-width:610px;
	border-left:2px solid #99f; padding:0px 0px 0px 8px;
	line-height:var(--line-h-main);
	margin-top:8px; margin-bottom:8px;
	margin-left:calc(var(--ind-main) + 12px); /* 40px */
}


p.li { 	margin-top:8px; margin-bottom:8px; border-left:3px solid #99f; padding-left:5px; }



/*********************
    HEADFOOTer AREA
 *********************/
#header-container { margin:0px; }
#footer-container { margin:0px; }
#header-container-t { margin:0px; }
#footer-container-t { margin:0px; }


/** return to top **/
.R2T {
	font-size:var(--font-main);
	width:90%;
	max-width:630px;
	text-align:center;
	margin-top:25px;
	margin-bottom:30px;
}


/** dot **/
div.dot { width:90%; margin:14px var(--ind-blc); }

/** next_page **/
nav.prev, div.prev {
	font-size:var(--font-main);
	width:98%; max-width:600px; margin-top:20px; margin-left:var(--ind-main);
	margin-bottom:20px; /* 20250518追加 */
}
nav.next, div.next {
	font-size:var(--font-main);
	font-weight:bold;
	color:#f55;
	width:500px;
	margin:28px 58px; padding:10px 12px;
	border:1px dashed #f99;
}



/** fdate **/
div.fdate, div#fdate { margin-top:5px; font-size:var(--font-main); margin-left:var(--ind-h2); }

/** auther **/
p.author { width:90%;max-width:600px;text-align:right; }


/*********************
      FOOTER AREA
 *********************/
footer.nodate { }

hr.bottom {	/* noscript */
	height:0; padding: 0; border: 0;
	border-top: 1px dashed #bbb;
	margin:3px 5px 30px calv(var(--ind-main) - 5px);
	max-width:680px;
}
div.qr {
	position: relative; top:-108px; left:5px;
	margin-bottom:-110px;
	max-width:680px;
}

div.hat___ { /* obo? */
	position: relative; top:-70px; left:10px;
	margin-bottom:30px;
	max-width:680px;
}


nav.footer, div.footer { margin:0px; }	  /* font-size:inherit; */  /* obo? */

nav.bottom {
	font-size:var(--font-main);
	text-align :right;
	font-weight:normal;
	line-height:2.4;
	max-width:680px;
	margin:3px 5px 40px var(--ind-h1);
	padding:10px 0px 8px 5px;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}


nav.bottom div { margin-right:3px; }	  /* font-size:inherit;  */
nav.bottom div#TOP2 { margin-top:14px; }
nav.bottom div#TOP3 { margin-top:14px; }

nav.next a, nav.prev a, div.next a, div.prev a
	{ background-color:#efe; }
.R2T a  { background-color:#ffd; }
#TOP1 a { background-color:#ffd; }
#TOP2 a { background-color:#fee; }
#TOP3 a { background-color:#dff; }






/*********************
      TEXT COLOR
 *********************/
.cr { color:var(--col-red); } /* red */
.cb { color:var(--col-blu); } /* blue */
.cp { color:var(--col-ppl); } /* purple */
.cg { color:var(--col-grn); } /* green */
.bg { background-color:var(--col-bg); }

span.sub  { color:var(--col-sub); }
span.subc { color:var(--col-subc); }
.san      { color:var(--col-sub); }
span.fix, time.fix { color:gray; }

nav.kanren, div.kanren  { color:#40b; }

.longurl{word-break: break-all;}

.link     { line-height:var(--line-h-main); padding-top:3px; }
.sanbun   { line-height:var(--line-h-narrow); margin-top:4px; margin-bottom:2px; }
.asterisk { line-height:var(--line-h-narrow); margin-top:5px }



/***** 参考文献 *****/
div.sanbun   { line-height:var(--line-h-narrow); margin-top:4px; margin-bottom:2px; }
div.sanbun h2  {
	font-size:var(--font-main); max-width:640px;
	margin-top:2px; text-decoration:none; font-weight:normal;
	margin-left:0px;
}
div.sanbun ul { }
div.sanbun li {
	font-size:var(--font-min); margin:0px;color: var(--col-sub); line-height:1.1rem;
}

/***** 註釈 *****/
div.asterisk { margin:0px; }
div.asterisk p { line-height:var(--line-h-narrow); margin-top:2px; font-size:var(--font-sub); }
div.asterisk p.sage { margin-top:2px; text-indent: 0.8em; }


/***** リンク*****/
nav.link { font-size:var(--font-main); max-width:640px; }
div.link { font-size:var(--font-main); max-width:640px; }

/** div.link からこちらに変更中？ **/
h2.link, ul.link { font-size:var(--font-main); max-width:640px; }
h2.link, ul.link li { margin-left:10px; }
h2.link { margin-top:2px; margin-bottom:-2px; text-decoration:none; font-weight:normal; }

del { color: var(--col-del); }


/*** this ***/
span.sub, span.subc  { font-size:var(--font-min); }



/*********************
    TEXT DECORATION
 *********************/
.normal { font-weight:normal }
.bold   { font-weight:bold }
.uline  { text-decoration:underline }
i,em { margin-right: 2px; font-style: italic; color:#003; }
i.cp { color:purple; }


/*********************
       DETAILs
 *********************/
div.details { 
	margin-top:4px;
	width:95%; max-width:620px;
}
div.details p {
	color:var(--col-subc);
	font-size:var(--font-min);
	width:95%; max-width:600px; margin-left:18px;
}
div.details summary {
	font-size:var(--font-sub);
	color:var(--col-grn);
	text-decoration:underline;
	letter-spacing:-0.5px;
}


details summary.notriangle::-webkit-details-marker { display: none; }
details summary.notriangle { list-style: none; }


/****** lightbox 調整用 ******/
.lightboxOverlay, .lightbox, .lb-container, .lb-details, .lb-nav { margin-left:0px; }



/*********************
        FLOAT
 *********************/
.float_left  { float:left;  }
.float_right { float:right; }
.float_clear { clear:both;  }


/************************************************
                for  MOBILE
 ************************************************/
@media (max-width: 701px) {

	:root {
		--ind-main: 5px;	/*** indent  main ***/
		--ind-h1:   1px;
		--ind-h2:   3px;	/*** ind-h1 + 5px ***/
		--ind-blc:  7px;	/* blockquote, table */
		--line-h-main:1.4;
	}


	p,div { margin-left:var(--ind-main); line-height:var(--line-h-main); }
	nav { }


	div.sanbun li  { line-height:1.2rem }

	div.link, nav.link { margin-left:var(--ind-main); }
	h2.link, ul.link li { margin-left:var(--ind-main); }

	nav.top_menu, div.top_menu,
	nav.menu, div.menu, nav.bottom { margin-right:0px; }
	hr.bottom  { margin-right:0px }

	table { margin-left:var(--ind-blc); }

	blockquote   { width:93%; margin:7px var(--ind-blc); }
	blockquote p { margin-left:8px; }


	div#SUM   { width:93%; margin:7px 5px 25px var(--ind-blc); }
	div#SUM p { margin-left:2px; }


	div#SUM div.title { margin-left:2px; width:96% }
	div#SUM ol, div#SUM ul { margin-left:8px; width:96% }
	div#SUM li { margin-left:6px; padding-bottom:1px;line-height:var(--line-h-main) }


	h1 { margin-left:var(--ind-h1); padding-left:4px; }
	h2,h3,h4 { margin-left:var(--ind-h2); padding-left:0px; }

	nav.prev,div.prev { margin-left:var(--ind-main); width:90% }
	nav.next,div.next { margin-left:var(--ind-main); width:90% }

	.R2T {  }

	div.link, nav.link { line-height:var(--line-h-wide); }  /* 1.6 */
	ul.link li { line-height:var(--line-h-wide); }  /* 1.6 */

	p.indent   { margin-left:15px; }
	nav.kanren, div.kanren
		   { margin-left:15px; line-height:var(--line-h-main); }
	.inyou     { margin-left:10px; line-height:var(--line-h-main); }


	nav.g2t,div.g2t {
		height:70px;
		margin-left:0px;
		border-left:0px solid #f77;
		width : 100% ;
		text-align:center;
	}

	div.details { }
	div.details p { margin-left:10px; line-height:var(--line-h-main); }

	div.asterisk p { margin-top:5px }

	img.g2t { margin-left:0px; margin-top:25px; }


}


/************************************************
                for  DARK MODE
 ************************************************/
@media ( prefers-color-scheme: dark ) {

	nav.kanren,div.kanren     { color:#285; }
	nav.kanren a,div.kanren a { background: none; }

	i,em { color:#959; }


	div#SUM { background-color:#222; }
	div#SUM p { color:var(--col-main); }


	blockquote p span.cb { color:#229; }


	td { border:1px solid var(--col-main); }


	a { text-decoration:underline dashed; }
	span a, nav a, .link a, .asterisk a { text-decoration:none; }


	nav.g2t,div.g2t {
		background: #989;
		border-left-color:#c77;
	}


	nav.next a, nav.prev a { background-color:#242; }
	.R2T a,  #TOP1 a { background-color:#bb6; }
	#TOP2 a  { background-color:#caa; }

	nav.next a, nav.prev a { color:#99e; }
	.R2T a,  #TOP1 a, #TOP2 a,#TOP3 a  { color:#33b; }

	img { filter: grayscale(50%); }

}