/*
 サイトの枠組み、レイアウト。
 *
*/
html {
	display: block;
	position: relative;
	font-weight: 500;
	color: white;
	text-shadow: 0px 0px 2em rgba(14,10,0,0.4);
	z-index: 10;
	width: 100%;
	min-height: 100vh;
	background: gray url(img/bg-tile.png) left/32px repeat;
	/*
	background: gray url(img/bg.png) center/200px repeat;
	background: gray url(img/header.png) center/cover no-repeat;
	*/
}

.film {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;

	/*
	background: gray url(prog.jpg) center/cover no-repeat;
	background: gray url(prog.jpg) center/1280px repeat;
	filter: blur(10px);
	z-index: 5;
	*/
}

/*
#INDEX #SHADER {
	opacity: 0.2;
	filter: blur(8px);
	
}
*/
body {
	/*
	display: grid;
	grid-template-columns: 20vw 3fr;
	grid-template-rows: 20vw auto ;
	gap: 0px;
	*/
	display: block;
	min-width: 600px;
	min-height: 100vh;
	position: relative;
	z-index: 100;
}
nav.backbutton {
	display: block;
	min-width: 600px;
	margin: 16px auto 64px;
	/*
	background: transparent url(img/header.jpg) center/cover no-repeat;
	*/
	}
a.backbutton {
	font-size: 3rem;
	color: black;
	background: transparent url(img/logo-backbutton2.png) left/contain no-repeat;
	padding-left: 1.2em;
	text-decoration: underline 2px;
}
a.backbutton:hover {
	background: transparent url(img/logo-backbutton2.png) left/contain no-repeat;
	filter: invert(100%);
}
#W {
	width: 80%;
	min-width: 600px;
	max-width: 1366px;
	margin: 0px auto;
	padding: 0px 4px ;
}
header {
	height: 80vh;
	width: 92vw;
	margin: 2% auto;
	max-width: 1600px;
	min-width: 600px;
	color: white;
	font-size: 1rem;
	text-align: center;
	background: black url(img/header.jpg) right/cover no-repeat;
	border: solid 24px black;
	position: relative;
	z-index: 50;
}

#INDEXHEADER {
	}
/* ヘッダーのロゴ処理 */
header .logo{
	display: block;
	background: transparent url(img/logo-connedos.png) 0% 52%/100% no-repeat;
	width: 36%;
	min-width: 260px;
	height: 100%;
	padding: 0px;
	margin: 0px 0px 0px 2%;
	position: absolute;
	left: 0px;
	z-index: 60;
	filter: invert(0%);
}
/* 更新情報 */
#UPDATE {
	display: block;
	width: 220px;
	height: 100%;
	font-size: 0.8em;
	color: white;
	/*
	background: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,0.6) 100%);
	*/
	text-align: right;
	position: absolute;
	right: 0px;
	overflow-y: scroll;
	z-index: 50;
}
#UPDATE * {
	color: white;
	text-align: right;
	text-shadow: none;

}

	#UPDATE h2{ /* updateの字 */
		display: block;
		width: 100%;
		font-size: 2em;
		margin-bottom: 2px;
		padding: 6px 4px;
		background: linear-gradient(215deg, black 4em, transparent 4.02em) ;
	/*
		background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.8));
	*/
	}
	#UPDATE h2:hover{
		color: blueviolet;
	}

	.prog{
		display: block;
		clear: both;
		float: right;
		width: 140px;
		margin: 8px;
		filter: grayscale(100%) contrast(150%) brightness(80%);
	}
	#UPDATE .newsEntry{
		display: block;
		width: 100%;
		clear: both;
		float: right;
		margin: 4px 0px;
		/*
		background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.8));
		*/
		}
		#UPDATE .newsEntry > *{
			margin: 0px 0px 1px 0px;
			padding: 0px 4px;
		}
		#UPDATE .newsEntry pubdate{ /*日付部分*/
			display: block;
			background: black;
			font-weight: bold;
			color: #ccc;
			font-family: monospace;
			font-size: 0.8rem;
			font-weight: bold;
			padding: 2px 4px;
		}
		#UPDATE .newsEntry .title { /*カテゴリ名*/
			font-size: 1.1em;
			font-weight: normal;
			line-height: 1.4em;
			text-decoration: none;
			padding: 2px 2px 2px 3em;
			background: linear-gradient(135deg, transparent 1.4em, white 1.4em);
			color: black;
		}
		#UPDATE .newsEntry .title:hover {
			font-style: italic;
			font-weight: bold;
		}
		#UPDATE .newsEntry > .comment{ /*コメント・更新内容文*/
			font-size: 0.94em;
			text-transform: italic;
			line-height: 1.4em;
			border-width: 1px 0px;
			border-radius: 4px;
			padding: 4px 2px;
			color: white;
			text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
			transition-duration: 0.2s;
		}
		#UPDATE .newsEntry > .comment:hover{ /*コメント・更新内容文*/
			background: black;
			text-shadow: 0px 0px 0px white;
		}
/*☆◠( ☝‿☝ )◠☆*/

main {
	line-height: 1.8em;
	/*
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
	*/
}
main p {
	margin: 0em 0em 48px 0em;
}
ul {/*間取りのみ。色などの飾り部分はCommonへ*/
	display: block;
	padding:  0em 1.2em;
	margin: 2.2em 0em;
}
ul.nospace{
	margin: 0px;
}
ul.firstbold li:first-line{
	font-weight: bold;
}
li {
	margin: 1.2em 0px;
	line-height: 1.32em;
	padding: 4px 8px;
	/*
	border-left: solid 2px rgba(0,0,0,0.2);
	*/
}
ul.nospace li {
}

nav h1 {
	display: inline;
}
main h1 {
	font-size: 2.4em;
	color: black;
	text-shadow: none;
	line-height: 1em;
	/*
	 margin: 1em 0em;
	 text-shadow: 1px 2px 0px black;
	 */
}
main h2, main h3, main h4{
	clear: both;
	line-height: 1em;
}
main h2 {
	font-size: 2.6em;
	margin: 2em 0em;
	color: #aaa;
	/*
	*/
	text-shadow: none;
}
main h2:first-child {
}
main h3 {
	font-size: 1.2em;
	margin: 2.2em 0em;
	text-shadow: 1px 2px 1px black;
}
main img{
	max-width: 100%;
}
main>img, .sidepaned>*>img, figure>img{
	display: block;
	max-height: 40vh;
	max-width: 45%;
	margin: 12px auto;
	box-shadow: 2px 4px 4px rgba(0,0,0,0.5);
}
main p>img {
	display: inline;
}
img.inline {
	display: inline;
}

.exec-cmd {
	margin: 0px;
	padding: 0px;
}

/*Noteの本文のみなんかしたい*/
#NOTE main {
}
/* ---------------------------- */

#PROG {
	width: 200px;
	height: 40px;
	object-fit: cover;
	background: black;
	margin: 1em auto;
	/*
	filter: contrast(40%);
	*/
	border-radius: 5px;
}
iframe {
	display: block;
	width: 92%;
	margin: 64px auto;
	min-height: 200px; 
}
details summary{
	text-decoration: underline 2px;
	cursor: crosshair;
}
details.signal{
	background: #333;
	margin-bottom: 2.2em;
	padding: 0.5em;
}
details.signal p{
	margin: 1.2em;
	font-size: 0.9em;
}
.jumperbox{
	margin: 0px auto 2em auto;
	color: black;
}

.jumperlink{
	font-weight: normal;
	display: block;
}
.jumperlink:before{
}
footer {
	font-size: 0.8em;
	color: black;
	margin: 192px auto 64px auto;
	text-align: center;
	line-height: 1.5em;
}
footer a[href*="#TOP"] img{
	transition-duration: 0.3s;
}
footer a[href*="#TOP"] img:hover{
	transform: rotate(450deg);
}

.selfembed{
	display: inline-block;
	text-align: center;
	border: solid rgba(0,0,0,0.6);
	border-width: 1px 3px 3px 1px;
	border-radius: 5px;
	width: 180px;
	margin: 0.8em;
	padding: 4px;
	font-size: 0.8rem;
	font-weight: normal;
	line-height: 1em;
}
.selfembed:hover{
	border-color: black;
}
.selfembed img{
	display: block;
	width: 80%;
	margin: 4px auto;
}
/* ＝＝＝＝＝＝＝Artworkぺージ＝＝＝＝＝＝＝＝ */
#ARTWORK {
	/*
	background-image: url("img/bg-tile-dia.png");
	*/
}
#ARTWORK main{
}
.work_category_title {
	color: black;
}
.makethumbtag{
	display: grid;
	/* ここのRepeat数値で並べる横個数*/
	grid-template-columns: repeat(5, 1fr);
	margin-bottom: 72px;
	gap: 4px;
	clear: both;
	text-decoration:none;
	text-align: center;
	text-transform: none;
	font-size: 0.8em;
	line-height: 1.2em;
}
	/*
	 折りたたまれたやつ
	.thumbfold {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		margin-bottom: 72px;
		gap: 4px;
		clear: both;
		text-decoration:none;
		text-align: center;
		text-transform: none;
		line-height: 1.2em;

	}
	 */
/* ID個別サムネサイズ */
.makethumbtag[id*="ink"]{
	grid-template-columns: repeat(7,1fr);
}
.repage .makethumbtag {
	grid-template-columns: repeat(8,1fr);

}
/*
 *サムネイル
 * */
.makethumbtag>* {
	display: block;
	margin: 0px;
	padding: 4px 0px;
	overflow: hidden;
	transition-duration: 0.06s;
}
.makethumbtag noscript{
	display: none;
}
.thumbmore {
	margin-top: 1em;
	background: black;
	color: white;
	padding: 1em;
}
.thumbmore>*{
	/*
	margin: 0px;
	padding: 0px;
	aspect-ratio: 1/1;
	background: #333;
	width: 80%;
	margin: 0px auto;
	*/
	display: none;
}

.thumbanchor {
	border: solid 1px transparent;
}
.thumbanchor:hover {
	border: solid 1px white;
}
.thumbanchor_tag{
	opacity: 0.5;
	font-weight: normal;
	padding: 1px 4px;
	text-decoration: none;
	border: solid 1px;
}
.thumb {
	display: block;
	width: 90%;
	border: solid 1px rgba(128,128,128,0.5);
	margin: 2px auto;
	box-shadow: 2px 2px 2px dimgray;
}

/* PhotoやEntryのインスタ形式 */
.makethumbtag .insta{
	aspect-ratio: 1/1;
	max-width: unset;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.thumbanchor[name*="spoiler"] img{
	filter: contrast(65%) brightness(80%);
	border: dashed 1px black;
}

/* テキストリンクの一覧表示 */
#docs, #thought, #all{
	display: block;
	font-size: 1em;
	text-align: left;
}
/* ======Historyページ====== */
	.thumbanchor pubdate {
		font-family: monospace;
		line-height: 1em;
		letter-spacing: -0.05em;
		padding: 0px 1px;
	}
	#all a{
		color: #000;
		display: inline-block;
		margin-bottom: 4px;
	}
	#all pubdate{
		font-weight: normal;
		padding-right: 1em;
	}
	#all .tag{
		opacity: 0.4;
		font-size: 0.8em;
		background: black;
		color: white;
		padding: 0px 2px;
		margin: 0px 2px;
	}
.labsdoor {
	display: block;
	margin: 0px;
	padding: 0px;
	position: absolute;
	bottom: 0px;
	right: 2%;
}

/*===============*/
.note-item {
	margin-bottom: 64px;
}
.note-item pubdate {
	font-family: monospace;
	font-size: 1.1em;
	}
.note-headline {
	margin: 6px 0em;
}

/* ==============絵個別ページ Unique================= */
/* 個別ページのみメディアに関わらず縦積み 内容はメディアと同様 */
#GALLERY {
	padding: 0em;
	min-width: 420px;
	display: block;
}
#U_TITLE:before{
	content:"“";
}
#U_TITLE:after {
	content:"”";
}
#GALLERY pubdate{
	display: block;
	font-family: monospace;
	font-size: 1.1em;
	text-align: right;
	opacity: 0.6;
	font-weight: bold;
	width: 10em;
	float: right;
	border-bottom: solid thin #666;
}
#GALLERY main {
	margin: inherit 0px;
	padding: unset;
} 
/*
img.galleryimg {
	display: block;
	position: relative;
	opacity: 0;
	margin: 0px auto;
	margin-bottom: 12px;
	max-width: 100%;
	max-height: 60vh;
	object-fit: cover;
	cursor: crosshair;
	box-shadow: 1px 5px 4px rgba(0,0,0,0.4);
}
*/
#GALLERYCAPTION {
	width: 80%;
	min-width: 420px;
	max-width: 800px;
	margin: 1em auto;
	padding: 2.5em;
	font-size: 0.9em;
}
/* LLLLLLLLLLLLL Lenzの処理 LLLLLLLLLLLLLLLLL */
.lenz {
	position: relative;
	/*
	*/
	height: 65vh;
	margin: 10px auto;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.6);
	/* ↓JSでオンにする（Noscriptには1にしてある）
	 * */
	opacity: 0;
	}
.lenz *{
	display: block;
	position: absolute;
	object-fit:cover;
	box-sizing: border-box;
	border: none;
	margin: 0px;
	padding: 0px;
}
.lenz-cover{
	display: block;
	z-index: 100;
	width: 100%;
	height: 100%;
	opacity: 0.01;
}
.lenz-key{
	z-index: 80;
	image-rendering: smooth;
	background: transparent left/100% 100% no-repeat;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
.lenz-label {
	bottom: 0%;
	right: 0px;
	z-index: 90;
}
.lenz-base{
	image-rendering: crisp-edges;
	z-index: 60;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	position: absolute;
	object-fit: fill;
	left: 0px;
	top: 0px;
	transform:rotate(180deg);
}
.lenz-base[src*=".gif"]{
	transform:rotate(0deg);
	
}
/* NNNNNNNNNNNN noteの個別記事 NNNNNNNNNNNNN*/
#NOTE #W{
	max-width: 1020px;
}
#NOTE pubdate{
	color:white;
	border: solid 1px;
	padding: 1px 6px;
}
#HEADLINE{
	border-bottom: dashed 1px #aaa;
	padding-bottom: 16px;
	margin-bottom: 80px;
}


/* GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG */
.gamingEntry {
	clear: both;
	min-height: 60px;
	margin-bottom: 4em;
}
	.gamingEntry pubdate{
		display: block;
		padding: 0px;
	}
	.gamingEntry img{
		max-width: 140px;
		max-height: 140px;
		float: left;
		margin: 0px 6px;
		border-radius: 5px;
		box-shadow: 5px 5px 2px rgba(0,0,0,0.2);
	}
	.gamingEntry p{
		padding: 0px;
		margin: 0px;
		line-height: 1.5em;
	}
.gamingEntry.dd{
	padding-left: 64px;
	background: url(img/gaming/icon-dd.png) left 1em/48px no-repeat;
}
.gamingEntry.sky{
	padding-left: 64px;
	background: url(img/gaming/icon-sky.png) left 1em/48px no-repeat;
}
/*GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG*/

/* メディアクエリ 🔛 */
@media screen and (max-width: 600px){
	html{
		/*
		font-size: 1.2rem;
		*/
		}
	#W{
		padding: 24px;
	}
	html body .sidepaned{
		/*↑詳しく指定しないと上書き権限が得られないのでhtmlとbodyつけてる*/
		display: block;
		/*
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		*/
		}
	.sidepaned>*:first-child{
		margin-bottom: 64px;
	}
	.sidepaned>*:first-child>img{
		max-width: 50%;
		display: block;
		margin: 4px auto;
	}
	.sidepaned .jumperbox{
		position: relative;
		width: 100%;
	}
	.sidepaned .jumperbox a{
		display: block;
	}
	html body .twins {
		grid-template-columns: 1fr;
		gap: 0px;
	}
	#NOTE .jumperbox>a{
		/*
		display: inline;
		*/
	}
	footer a[href*="#TOP"]{
		position: fixed;
		right: 0px;
		bottom: 0px;
		opacity: 0.6;
	}
	footer a[href*="#TOP"]:hover{
		opacity: 1;
	
	}
}/* ^^mediaquery^^ */

	
	/* @@@@@@@@@@@@ランダム背景@@@@@@@@@@@@@@@@@@@@@ */
.fractalBG{
	display: block;
	padding: 10px;
	overflow: hidden;
	box-sizing: border-box;
	/*
	border: solid 2px rgba(0,0,0,0.14);
	*/
	border: solid 1px gray;
	/*
	background: linear-gradient( rgba(0,0,0,0.01) , rgba(128,128,128,0.01));
	*/
}
	.fractalBGzero {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 0;
		z-index:10;
		border: none;
		filter: blur(0px);
	}/*
	header {
		background: white;
	}
	*/
	.dummyBG{
		background: transparent url("img/bg-tile.png") center repeat;
	}