/* mkm_boxstyles.css by mKm morikuma for versatile use */
/*   init: June 2020 */
/* update: 2022-02-02, 2021-10-19, 2021-10-11, 2020-08-04 */

/* For the future modifications; 2020-09-11
*	{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*/

p	{margin: 0px 0px 10px 0px; border: 1px transparent solid;}
p._tight	{margin: 0px;}
p._tight00	{margin: -6px 0px 0px 0px;}
p._low {line-height: 1.3;}
p._tightbot {margin-bottom: 0px;}
p._indented {
	margin-bottom: 5px; margin-left: 2em;
	text-indent: -1em;
}
p._indented2 {
	margin-bottom: 5px; margin-left: 3em;
	text-indent: -2em;
}
p._qckindent {
	margin-left: 1.5em; text-indent: -1.2em;
}
p._indentedcmnt {
	width: 360px; margin: 0px; padding: 0px; border: 0px transparent solid;
	text-indent: 2em;
}
p._shifted {
	padding-left: 2em;
}
p._smplhdr {
	clear: both;	/* avoid changing background of adjacent pic */
	padding: 1px 5px 1px 5px;
	background: -moz-linear-gradient(left top, #dbedff 20%, #ff93c9);
	background: -webkit-linear-gradient(left top, #dbedff 20%, #ff93c9);
	background: linear-gradient(to right bottom, #dbedff 20%, #ff93c9);
}
p._Lonly {
	/* no change on Left */
	border: inherit;
	/* border: 1px limegreen solid; */
}

p._topgap {
	border-top: 3px #dbf2ff solid; margin-top: 4px; padding-top: 12px;
}

span.dateTXT {
	color: rgb(197, 95, 138);
	font-size: x-small;
	letter-spacing: 0px;
}

hr._sep	{ height: 1px; background-color: lightblue; border-width: 0px;}
hr._sep0	{
	margin-left: 10px; text-align: left; width: 350px; border: 1px transparent solid; background-color: rgb(223, 205, 255);
}
hr._sep1	{
	margin-left: 10px; text-align: left; width: 780px; border: 1px transparent solid; background-color: #ff9ece; height: 3px;
}
hr._sep2	{
	margin-left: 10px; text-align: left; width: 740px; border: 1px transparent solid; background-color: powderblue; height: 1px;
}

div._links1	{ font-size: large; line-height: 1;}
div._links2	{ font-size: small; line-height: 1.2;}

div._tableBlock {
	display: table;
    font-size: small; color: #333399;
    margin: 0px;
    padding: 2px;
    border: 1px transparent solid;
	border-radius: 6px;
}
div._tableCell {
	display: table-cell;
	vertical-align: top;
    margin: 0px;
    padding: 0px;
    border: 1px transparent solid;
	border-radius: 0px;
}

div._box_a	{ width: 640px; margin: 4px; padding: 0px; display: inline-block;
	border: 1px blue solid; vertical-align: top; }

div._box_b	{ width: 146px; margin: 4px; padding: 0px; display: inline-block;
	border: 1px red solid; vertical-align: top; text-align: right;}

div._box_c	{ width: 20px; margin: 4px 0px 4px 0px; padding: 0px; display: inline-block;
	border: 1px transparent solid; vertical-align: top; }

div._box_d	{ width: 440px; margin: 0px; padding: 0px; display: inline-block;
	background-color: transparent; 
	border: 1px magenta dotted; }

div._box_e	{ width: 420px; margin: 3px; padding: 7px 7px 7px 10px; display: inline-block;
	line-height: 1; background-color: #acffe9;
	border: 1px goldenrod solid; border-radius: 8px 28px 8px 28px; vertical-align: top; }

div._box_f	{ width: 420px; margin: 3px; padding: 4px 4px 4px 6px; display: inline-block;
	background-color: transparent;
	border: 1px seagreen solid; border-radius: 3px; vertical-align: top; }

#_popup1, #_popup2, div._fixedbox1	{	/* usage: 1=Normally hidden,  2=Normally visible(show)
							Refer to tohnokoshiOogusu.html as an example
						*/
	width: 415px; padding: 6px 8px 4px 0px; z-index: 99;
	font-size: small; line-height: 1.4;
	display:block; overflow: hidden;
	border: 2px darkturquoise solid; border-radius: 4px;
	position: fixed; top: 150px; left: 230px; visibility: hidden;
	background-color: rgba(254, 255, 241, 0.96); opacity: 0.0;
	/* transition: visibility 4.2s, opacity 4.0s; */
}

div#_popup2.show, div._fixedbox1.show {
	width: 382px; margin-left: -5px;
	position: static; visibility: visible; opacity: 1.0;
}

#_popup1 p, #_popup2 p, div._fixedbox1 p {
	color: rgb(0, 41, 175); text-indent: -1.2em;
	margin: 0px 0px 0.6em 1.7em; padding: 0px;
	border: 0px rgb(204, 100, 152) solid;
}

#_popup1 p.tight, #_popup2 p.tight, div._fixedbox1 p.tight {
	margin-bottom: 0.1em;
}

#_popup1 p.emph, #_popup2 p.emph, div._fixedbox1 p.emph {
	color:rgb(204, 90, 153);
}

#_popup1 p.expl, #_popup2 p.expl, div._fixedbox1 p.expl {
	color:rgb(21, 131, 36);
}

img._title	{border:3px transparent solid; width: 140px; height: 140px;}
img._title:hover {border-style: dotted; border-color: #ffa020 cornflowerblue cornflowerblue #ffa020;
						transition: 0.8s;}
img#_sub_box_img	{width: 300px; }

img.dateICON	{ width: 16px; height: 16px; opacity: 0.7;
	vertical-align: middle; margin: 0px 2px 1px 0px;
}

img.dateSpacer	{
	width: 8px; height: 8px; margin: 0px;
}
img.dateExtraSpacer	{
	width: 134px; height: 8px; margin: 0px;
}


div#_sub_box	{width: 300px; padding: 2px; z-index: 99;
				display:block; overflow: hidden;
				border: 2px #ffb7db solid;
				position: fixed; top: 150px; left: 230px; visibility: hidden;
				background-color: azure; opacity: 0.0; transition: visibility 0.9s, opacity 0.7s;}
/*
	visibility は数値プロパティではないが transition が適用できる。この場合は、hidden への変化時に
	指定数時間のディレイが生じる。　その間に opacity の変化を見えるようにできる。 （突然 hidden に移行すると
	opacity の変化を見ることができない） 2020-06-09 mKm
*/
div._exp1 {
	display: inline-block;
	width: 350px;
	margin: 5px 0px;
    padding: 4px;
    border: 3px rosybrown dotted;
	border-radius: 6px;
}

/* new layout styles  init: 2020-08-04 */

body {background-position: top left 0px;}
			 
div._vbox01	{
	margin: 4px; padding: 4px; display: inline-block;
	border: 1px goldenrod solid; vertical-align: top;
}
div._vbox01.inner {margin: 0px; width: 367px;}
div._vbox01.tight {margin: 0px; padding: 0px;}
div._vbox01.exp	{ /*margin: 4px 10px 4px 6px; */
	width: 360px; color: #333399;
	line-height: 1.4; font-size: smaller;
	border-radius: 8px;
	border-top: 2px lightblue solid; border-right: 3px lightblue solid;
	border-bottom: 2px lightblue solid; border-left: 4px rgb(129, 211, 200) solid;
}

div._vbox01.exp.none {
	display: none;
}
div._vbox01.exp.half {
	width: 360px;
}

div._vbox01.half {
	width: 360px;
}

div._vbox01.quarter {
	width: 170px;
}

div._vbox01.header		{
	font-size: normal;
	line-height: 1.2;
	color: white;
	width: 360px;
	margin: 15px auto 15px 10px;
	padding: 3px 10px;
	border-width: 0px 0px 0px 5px; border-color: transparent transparent transparent #ff99cc;
	border-style: solid; border-radius: 5px 3px 12px 5px;
	background: -moz-linear-gradient(left, mediumseagreen 60%, orange);
	background: -webkit-linear-gradient(left, mediumseagreen 60%, orange);
	background: linear-gradient(to right, mediumseagreen 60%, orange);
}

div._vbox01.date	{
	color: palevioletred; width: 330px; border: 2px #93c9ff solid; border-radius: 0px 0px 0px 6px;
	border-left-width: 6px;
	border-top-color: transparent; border-right-color: #fffff0;
	margin-bottom: 12px; padding: 0px 15px;
	background: -moz-linear-gradient(left, #fffff0, #93c9ff 30%, lemonchiffon 60%, #93c9ff 90%, #fffff0);
	background: -webkit-linear-gradient(left, #fffff0, #93c9ff 30%, lemonchiffon 60%, #93c9ff 90%, #fffff0);
	background: linear-gradient(to right, #fffff0, #93c9ff 30%, lemonchiffon 60%, #93c9ff 90%, #fffff0);
}

div._vbox01.dateID {
	width: 380px;
	/* border: gray 1px solid; */
	padding: 0px;
	margin: -4px 0px 12px 0px;
	text-align-last: justify;
}

div.no_disp {
	display: none;
}

div._b01	{
	width: 390px; margin: 10px 0px 0px 10px; padding: 5px; display: inline-block;
	border: 1px cadetblue solid; vertical-align: top; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div._b01.tight	{
	padding: 0px 0px 0px 5px;
}

div._b01.smlr0 {
	font-size: smaller; line-height: 150%;
	color: saddlebrown;
}

div._b01.tight0	{
	padding: 0px;
}

div._b01._exp	{
	width: auto; margin: 4px 10px 4px 14px; color: #333399;
	line-height: 145%; font-size: smaller;
	border-radius: 8px;
	border-top: 2px lightblue solid; border-right: 3px lightblue solid;
	border-bottom: 2px lightblue solid; border-left: 4px lightsalmon solid;
}
div._b01._exp._op01	{ border-left-color: dodgerblue; margin: 0px 10px 10px 0px; color: #339966; }
div._b01._exp._op01._resp {width: 786px;}/*780px*/

div._b01._exp._op02	{ font-size: small; border-left-color: darkturquoise; margin: 0px 10px 10px 0px; color: #339966; }
div._b01._exp._op02._resp {width: 786px;}

div._b01._topright {
	text-align: right;
	font-size: small;
	line-height: 1.2;
	padding: 60px 10px 0px 0px;
}

div._b02	{
	border: 1px seagreen solid;
	width: 785px; margin: 10px 10px 0px 10px; padding: 0px; display: inline-block;
	border: 1px skyblue solid; vertical-align: top; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div._b02.inner	{
	width: 365px; margin: 5px 10px 5px 11px; padding: 4px; 
	display: inline-block;
	border: 1px forestgreen solid; 
}

div._toptitle	{
	position: relative; left: 0px; top: 0px;
	display: inline-block;
	z-index: 11;
	margin: 0px; padding: 0px;
}

div._toptitle.lower	{
	position: absolute; left: 0px; top: 0px;
	display: inline-block;
	visibility: visible;
	z-index: 10;
}

div._b01._topttl {
	margin: 0px 0px -20px 0px; padding: 0px;
	width: 850px;
	position: relative; left: -10px; top: -20px;
	border-width: 0px;
}

/* img.ttl {margin: -20px auto auto -10px;} */
img._ttlupper {width: 850px; height: 305px;}
img._ttllower {width: 470px; height: 305px;}

div._wideMark {display: inline-block;}
div._narwMark {display: none;}

@media screen and (max-width: 815px) {
	body {background-position: top left -380px;}
	div._toptitle {visibility: hidden; }
	div._b01._exp._op01._resp {width: 400px;}
	div._b01._exp._op02._resp {width: 370px;}
	div._b02	{ width: 390px;}
	hr._sep1 {width: 400px;}
	hr._sep2 {width: 0px; height: 0px; margin: 0px;}
	div.footer	{width: 390px;}
	div._wideMark {display: none;}
	div._narwMark {display: inline-block;}
	div.updtinfo.moreL {margin-left: 15px;}
	div._b01._topright {padding-top: 0px; margin-top: 0px; margin-left: 10px;}
	p._Lonly	{height: 0px; margin-bottom: 0px;}
}