@font-face {
	font-family: 'HachiMaru';
	src: url('../assets/fonts/knsw_HachiMaruPop_ttf-Regular.woff') format('woff');
	}

@font-face {
	font-family: 'Misaki Gothic';
	src: url('../assets/fonts/misaki_gothic_2nd.woff') format('woff');
	}

@font-face {
	font-family: "Saitamaar";
	src: url("../assets/fonts/Saitamaar/Saitamaar.woff2") format("woff2"),
		url("../assets/fonts/Saitamaar/Saitamaar.woff") format("woff"),
		url("../assets/fonts/Saitamaar/Saitamaar.ttf") format("ttf");
	font-display: swap;
}

@font-face { 
	font-family: "catalpa"; /* 二分アキ・四分アキを正確に実現するためのカスタムフォントです。*/
	src: url("data:application/font-woff;base64,d09GMgABAAAAAAJwAA4AAAAABfQAAAIbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGhwGYACCQggEEQgKWHYLCgABNgIkAxAEIAWEAQcqGxAFAB6FcZsTTmVyqvCdLvV4+H7u89yb95KUecGzLBBYIGEqV8ii3BqDao1oNaH+sq6d2MP9vGUCPVx0WPOvXLQNfESb6WADTjVPIPfF/r+bfIvwA/hdc2kgC3BswkgDKyxKqJfQEQUkgVAQ7tpnnsII9/CgJNuEgO/nRgA/ur2Ll/+DAKy0kR2JQKCkeK5S5+sLYrc8tPngQUYh1WUAAgAuPRjzeBtDXTu0lup1QABgjAUNGuxkAfvYBHayGwNFERgbhvB7ZvgjgGgJQCQSABA0klsdqxEQwyBBAT0SPVYDCqZYgVJWLKx53Ql4Vh7juD7Gcf2Li+8Xp4A3YXrfrytGc2/a+nXf2yaN5nybJlyzt10b/5SEzBYEz/6392ao9bdf0VtnX+IY5L26Bb0EQb0OlhLkPRYAQEmOAYmEQNFLkAiBQzIAVnspAGMGLCB0HrKA1HkkQGPSX4CiizUCVCtimgW0ujjLJsoyHAIbwmp3UbIFaJzwgWK1AarNseUtWqtjr6GDo5czhUR2RWI4caQgp6AghczMrWwt9e31kZWXA3j3mXDxn7Acm81X22V/36crrwNwF+OKoTtiwPu5PUcGuEIgudExzvCUWRU44cB0LctwJhGQgowc0kBj6vXdgpq0qjS4g9uYPF85SwLNZXLUoLmFVRRq6WqadiYfulGeXSg8Kckz+DhSLZvN5ND/fALDPBEEAICyFwIA") format("woff2");
}


:root {
    --color-accent: rgba(108,204,255,0.7);
    --color-bg: #00cad1;
    --color-bg-secondary: #6666ff;
    --color-link: #6666ff;
    --color-secondary: rgba(0,108,255,0.7);
    --color-secondary-accent: rgba(0,205,209,0.2);
    --color-shadow: skyblue;
    --color-table: #6666ff;
    --color-text: #000;
    --color-text-secondary: #999;
    --sub-bg: rgba(255,255,255,0.7);
    --foot-bg: rgba(108,108,255,0.7);
    --bgpics: url(../assets/img/dot710clear256.png);
    overflow-y: scroll;
}



::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-button {
    background-color: #fffe;
}

::-webkit-scrollbar-track {
    background-color: #fff6;
}

::-webkit-scrollbar-thumb {
    background-color: #fff8;
}


.sorry {
    font-size: 14px;
    text-align: left;
    color: white;
}

.tabletop {
    border: 0px solid var(--color-bg-secondary);
    background: rgba(0,202,209,0.5);
}


.logo {
	font-size: 4.1em;
	font-family: "HachiMaru";
	color: #db6975;
}


.logo a {
	color: #db6975;
}

.logo a:hover,
.logo a:active {
	text-decoration: none;
}



.contents {
	max-width: 1000px;
	margin: 0 auto;
	}

.side {
 	position: fixed;
	margin-top: 1.5em;
	padding-left: 2.75em;
}

.menu {
	display: grid;
	font-family: "HachiMaru";
	}

.menu a i {
	width: 120px;
	color: royalblue;
    }


.icons {
    margin-top: 0.5em;
    margin-left: 0.75em;
    padding: 0.1em 0.5em;
    width: 75%;
    background: #90a2d3b8;
    backdrop-filter: saturate(180%) blur(1px);
    border-radius: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1.9em, 1fr));
}

.icons a i,
.icons a:hover i {
    margin: 0;
    padding-left: 3px;
    border: none;
    color: white;
    background: transparent;
}

.page {
    margin-left: 221px;
    margin-right: 60px;
    max-width: 960px;
}

footer .search {
    padding-bottom: 3em;
}

@media screen and (max-width: 1008px) {
	.logo {
		font-size: 6.5vw;
	}

	small {
		font-size: 1.25vw;
	}
	
	.side {
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		width: 100%;
		z-index: 2;
	}
	
	.menu {
		margin: 0;
		padding: 0.75em;
		background: #6666ffb8;
		backdrop-filter: saturate(180%) blur(4px);
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		}
		
	.menu a i {
		margin: 2px;
		padding: 2px 10px 2px;
		width: 70px;
		font-size: small;
		}
	
	.icons {
		margin: 0;
		width: 293px;
		background: #90a2d3b8;
		border-radius: 0 0 24px;
		grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
	}
	
	.page {
		margin-left: 0px;
		margin-right: 0px;
	}
	
	.sorry {
		font-size: 0px;
	}
	
	nav {
		margin-top: 6em;
	}
}

@media screen and (max-width: 833px) {
	nav {
		margin-top: 8em;
	}
}

@media screen and (max-width: 640px) {
	.logo {
		font-size: 2.6em;
	}
}

@media screen and (max-width: 433px) {
	nav {
		margin-top: 10em;
	}
}

@media screen and (max-width: 333px) {
	nav {
		margin-top: 12em;
	}
}




.Saitamaar {
    font-family: "Saitamaar";
    font-size: 16px;
    line-height: 18px;
}

h1, h2, article h3, h4 {
    font-family: "HachiMaru";
    color: steelblue;
}

article h3,
article h4 {
    margin-bottom: 0;
}

article li {
    padding: 0;
}

body {
    background-image: var(--bgpics);
    background-attachment: fixed;
    background-blend-mode: overlay;
}

footer,
header,
main {
    padding: 0.5rem 1rem;
}

main {
    background: var(--sub-bg);
    border: double var(--color-bg-secondary);
    border-radius: 16px 16px 0 0;
    min-height: 402px;
}

footer {
    padding-top: 1px;
    padding-bottom: 1px;

    background: var(--foot-bg);
    border: double var(--foot-bg);
}

hr {
    margin: 2.5rem 0;
}

section aside {
    margin: 1rem 0.5em;
    padding: 0.75rem;
    background: var(--sub-bg);
}


header a i {
    margin-left: 0;
    margin-right: 0;
    padding: 3px 19px 3px;
    width: 0;
}

nav {
    display: flow-root;
    margin-bottom: 1.5em;
}


sup {
    color: var(--sub-bg);
}

a b,
a em,
a i,
a strong,
button,
input[type="submit"] {
    padding: 2.3em;
    padding-top: 3px;
    padding-bottom: 3px;
}

a b,
a strong,
button,
input[type="submit"] {
    color: var(--sub-bg);
}

a em,
a i {
    border: double var(--color-link);
    background: var(--sub-bg);
}


form {
    background: var(--sub-bg);
}


.news textarea {
    background: transparent;
    width: calc(100% - 0rem);
    border: 2px solid var(--color-bg-secondary);
    resize:none;
}

h3 i,
li::marker {
    color:var(--color-link);
}

main h3 a i {
    border: none;
    background: none;
    margin: 0;
    padding: 0;
/*    font-size: large; */
}

main h3 a:hover,
main h3 a:hover i {
    text-decoration: none;
}


table {
    background: var(--sub-bg);
}

table thead {
    color: var(--sub-bg);
}

table thead th:first-child, table tr td:first-child {
    text-align: center;
}

main aside h2 {
    margin: 0.5rem;
    color: rgba(0,108,255,0.8)
}




article {
    margin: 0 0.25em;
}

.mokuji {
    margin-bottom: 2.5em;
    width: 24em;
}

.mokuji a {
    display: contents;
}

.mokuji ul,
.mokuji ol {
    padding: 0 2.5em;
}

.maintext ul ul li {
     margin: 0 1em;
}

.maintext,
.pics {
    margin: 1.5em;
    margin-bottom: 2.5em;
    width: auto;
}

.pics img {
    margin: 0.25em;
    width: 90px;
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow) var(--color-shadow);
}

.pics img:hover {
    box-shadow: var(--box-shadow) var(--color-bg-secondary);
}

.maintext em,
.maintext strong {
    font-weight: bold;
}

.maintext strong {
    color: #db6975;
}

.big {
    font-size: x-large;
}

.maintext ul,
.maintext ol {
    padding-left: 1.5em;
}

.maintext hr {
    margin: 1.25rem 0;
    background: #14b2da;
}

.maintext a {
    display: contents;
}

.maintext ul p,
.maintext ol p {
    margin: 0
}

.contents img {
    max-width: 100%;
    border-radius: 5px;
}

.contents figure img {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid var(--color-bg-secondary);
}

.contents h3 img {
    border-radius: 0px;
}

.new {
    font-size: 12px;
    color: crimson;
    }

.update {
    font-size: small;
    color: steelblue;
    font-weight: bold;
    }

.backbtn {
    margin: 2.5rem;
    text-align: center;
    font-family: 'HachiMaru';
    font-style:italic;
    }

.date {
    color:royalblue;
    font-weight:bold;
    font-size:larger;
    }

footer form {
    background: transparent;
    border: none;
    box-shadow: none;
    }



/*----------レイアウト----------*/

textarea {
    resize: vertical;
}

iframe {
    border: none;
}

header iframe {
    width: 280px;
    height: 160px;
}

main iframe {
    width: 100%;
}


/*----------テキスト・リンク関連----------*/

p,
ul,
ol,
table {
    font-size: small;
}

a:hover {
    color: limegreen;
}

main h1 {
    font-style: italic;
    color: var(--color-bg-secondary);
}

.maintext h2 {
    border-bottom: 4px double #14b2da;
}

.maintext h3 {
    border-bottom: 1px dashed lightskyblue;
}

.menu a:hover i {
    border: double #28adff;
    color: #28adff;
}

.whitetext {
    color: white;
}

.whitetext a {
    color: bisque;
}

.logo a:hover,
.whitetext a:hover {
    color: lightcoral;
}

.greenbold {
    color: lightseagreen;
    font-weight: bold;
}

a:active,
strong.whitetext a:active {
    filter: brightness(var(--active-brightness));
    text-decoration: underline;
}

figure a:hover,
.pics a:hover,
a:hover img {
    filter: brightness(1.025);
}



link a i.fab.fa-twitch {
    padding: 10px 58px;
    border: double #9147ff;
    color: #9147ff;
}

link a i.fas.fa-link {
    padding: 10px 25px;
    border: double #0aa1ff;
    color: #0aa1ff;
}


main a[target="_blank"][href*="https://"] {
    color: darkcyan;
}


main a[href*="https://"]:hover,
main a[href*="https://"]:hover i {
    color: #0aa1ff;
}

.page p a[target="_blank"]::after,
.page strong a[target="_blank"]::after,
.page h3 a[target="_blank"]::after,
.page li a[target="_blank"]::after {
	font-family: "Font Awesome 5 free";
	content: "\f35d";
	padding: 2px;
}

.insite {
    color:var(--color-link)
}

.insite:hover {
    color: limegreen;
}

.icons a:hover i {color: #32cdad;}

.linkicon a::before {
    color: #32cdad;
	font-family: "Font Awesome 5 free";
	content: "\f0c1";
	padding: 0px;
}

a:hover[href*="twitter.com"],
a:hover[href*="twitter.com"] i { color: #1da1f2; }

h3 a[href*="twitter.com"]::before { 
	color: #1da1f2;
	font-family: "Font Awesome 5 Brands";
	content: "\f099";
	padding: 2px;
}

a:hover[href*="youtube.com"],
.page li a:hover[href*="youtube.com"],
a:hover[href*="youtube.com"] i { color: #df0000; }

h3 a[href*="youtube.com"]::before { 
	color: #df0000;
	font-family: "Font Awesome 5 Brands";
	content: "\f167";
	padding: 1px;
}

a:hover[href*="deviantart.com"],
a:hover[href*="deviantart.com"] i { color: #00cd63; }

h3 a[href*="deviantart.com"]::before { 
	color: #00cd63;
	font-family: "Font Awesome 5 Brands";
	content: "\f1bd";
	padding: 5px;
}

h3 a[href*="wikipedia.org"]::before { 
	color: #606060;
	font-family: "Font Awesome 5 Brands";
	content: "\f266";
	padding: 0px;
}

a:hover[href*="instagram.com"] i { color: #e1306c; }

a:hover[href*="social.vivaldi.net"] i { color: #4c70f0; }
a:hover[href*="fedibird.com"] { color: #990099; }
a:hover[href*="mstdn.jp"] { color: #2074b1; }

a:hover[href*="submarin.online"] { color: #00b0f0; }

a:hover[href*="discord.gg"],
a:hover[href*="discord.gg"] i { color: #404ebd; }

a:hover[href*="codepen.io"] i { color: #606060; }


/*----------その他----------*/


/*----------検索用----------*/

form.search {
	padding-left: 2.25em;
	/* margin-inline-start: auto; */
}
input[type="search"] {
	font-size: 16px;
	line-height: 1.0;
	margin: auto;
	padding: 0.6em 1em 0.5em 1em;
	width: 12em;
	border-style: none;
	border-radius: 2em;
	box-shadow: inset 1px 1px 3px rgba(0,0,0,.5);
	appearance: textfield;
	color: black;
}
input[type="search"]:focus {
	outline: 0;
}
input:focus::placeholder {
	color: transparent;
}
input[type="search"]::-webkit-search-cancel-button {
	appearance: none;
}
input[type="search"]::-webkit-search-decoration {
	display: none;
}
input[type="search"]::-ms-clear {
	display: none;
}