@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/* =========================================
   1. Root Variables & Color Palette
   ========================================= */
:root{
	--p-font-size: 18px;
    --p-font-weight: 400;
    --content-width: 1220px;
    --body-margin: 0 80px 0;
    --body-padding: 60px;
    --margin-left: 5px;
    --margin-right: 5px;
    --padding-left: 5px;
    --padding-right: 5px;
	--input-height: 35px;
	--input-border-radius: 10px;
	--cursor-border-radius: 50%;
	--border-default-color: #e2e2e2;
	--color-blueb: #149eff88;
	--color-blueb-l: #0162c8;
	--color-blueb-r: #55e7fc;
    --a-color: #1e73be;
    --a-visited-color: #831ebe;
    --hover-color: #bdd5f522;
}
/* =========================================
   2. Dark Mode Configuration
   ========================================= */
@media (prefers-color-scheme: dark) {
    :root {
/*         --app-bg: #1b1b1b; */
/*         --app-text: #e0e0e0; */
/*         --content-bg: #282c34;  */
/*         --header-bg: #21252b; */
/*         --gutter-bg: #21252b; */
/*         --border-default-color: #444444; */
        
        /* Colors Override */
/*         --hover-color: rgba(20, 158, 255, 0.2); */
        
        /* Links for Dark Mode */
/*         --a-color: #61afef; */
/*         --a-visited-color: #c678dd; */
        
        /* Code Blocks */
/*         --code-bg: #1e1e1e; */
/*         --code-text: #abb2bf; */
    }

    /* Dark Mode Image Brightness Adjustment */
/*     img, video, iframe {
        filter: brightness(0.85);
        transition: filter 0.3s ease;
    } */
/*     img:hover, video:hover, iframe:hover {
        filter: brightness(1);
    } */
}
/* #header-container {
	border-bottom: 1px solid #c6c6c6aa;
} */
.wp-block-image img{
	border-radius: 5px;
	overflow: hidden;
}
.toc {width: 100%;}
.main .toc {width: 95%;}
.toc, .sidebar .widget_toc h3, .toc-content ul li, .toc-content a {
	position: relative;
}
.toc-content a {display: block;}
.toc-content ul li {margin: 0;}
.main .toc-content {overflow: hidden;}
.toc a:hover {text-decoration: none;}
.toc, .sidebar .widget_toc {
	background-color: #ffffff;
	border: 0;
	border-radius: 2px;
	overflow: hidden;
}
.main .toc, .sidebar .toc-content {
	font-size: 14px;
}
.sidebar .widget_toc {
	margin: 6px 0 1em;
}
.main .toc {
	padding: 0;
}
.toc-title, .sidebar .widget_toc h3 {
	padding: 11px 10px 10px;
	background-color: #f5f5f5;
}
.toc-title {
	padding-left: 3.3em;
	font-size: 1.0em;
	font-weight: 600;
	text-align: left;
}
.sidebar .widget_toc h3 {
	margin: 0;
	padding-left: 3.5em;
	border-radius: 0;
}
.sidebar .widget_toc .toc {margin: 0;}
.main .toc-content > ul {
	margin: 0.6em;
	margin-top: 0.5em;
}
.toc .toc-content > ul > li > ul {padding-left: 1.75em;}
.toc .toc-content > ul > li > ul > li > ul {padding-left: 1.55em;}
.toc .toc-content > ul > li > ul > li > ul > li > ul {padding-left: 1.45em;}
.toc .toc-content > ul > li > ul > li > ul > li > ul > li > ul {padding-left: 1.15em;}
.toc-content a {
	margin: 0 0px 0 6px;
	padding: 0px 8px;
	border-bottom: 1px dashed #ccc;
}
.toc-content a:last-child {border: 0;}
.toc-content a:hover {
	border-radius: 2px;
	background: var(--color-blueb);
}
#toc-2{width:95%;}
a.a-wrap{
	position: relative;
	display: block;
	border:1px solid var(--border-default-color);
	border-radius: 5px;
/* 	box-shadow: 0 3px 3px #ccc; */
/* 	transition: 0.1s; */
	overflow:hidden;
}
a.a-wrap:hover{
		border:1px solid var(--color-blueb);
/* 	box-shadow: 0 3px 3px var(--color-blueb); */
}
a.a-wrap *{pointer-events:none;}
a.a-wrap>span{
	margin:0;
	padding:0;
    position: absolute;
	left:0;
	top:0;
    transform: translate(-50%, -50%);
	background: var(--color-blueb);
	border-radius: 50%;
	width: 0px;
	height: 0px;
	animation: ripples 0.5s linear 1 forwards;
}
.article h2::before {
/*     content: ""counter(h2-counter)" . "; */
/*     color:  var(--color-blueb); */
}
.article h2 {
/*     counter-increment: h2-counter;
    counter-reset: h3-counter 0;
    font-size: calc(var(--p-font-size) * 1.25 * 1.25);
    font-weight: calc(var(--p-font-weight) + 200);
    border-bottom: 1px solid;
    border-image: linear-gradient(-90deg,  var(--color-blueb),  var(--color-blueb));
    border-image-slice: 1; */
}
.article h3::before {
/* 	content: counter(h2-counter)"-"counter(h3-counter)" . "; */
/*     color:  var(--color-blueb); */
}
.article h3 {
/*     counter-increment: h3-counter;
    counter-reset: h4-counter 0; */
}
.article h4::before {
/*     content: counter(h2-counter)"-"counter(h3-counter)"-"counter(h4-counter)" . "; */
/*     color: var(--color-blueb); */
}
.article h4{
/* 	counter-increment: h4-counter;
    counter-reset: h5-counter 0; */
}
.article h5::before{
/*     content: counter(h2-counter)"-"counter(h3-counter)"-"counter(h4-counter)"-"counter(h5-counter)" . "; */
/*     color: var(--color-blueb); */
}
.article h5{
/*     counter-increment: h5-counter; */
}
body h3,
body h4,
body h5,
body h6{
/*     font-size: calc(var(--p-font-size) * 1.25);
    font-weight: calc(var(--p-font-weight) + 100); */
}
body p{
/*     font-size: var(--p-font-size);
    font-weight: var(--p-font-weight); */
}
.hcb_wrap{
    border-radius: 5px;
}
blockquote {position: relative;padding: 10px 15px 10px 50px;box-sizing: border-box;font-style: italic;border: solid 2px #464646;color: #464646;}
blockquote:before{display: inline-block;position: absolute;top: 20px;left: 15px;
    content: "\f10d";font-family: FontAwesome;color: #77c0c9;font-size: 25px;line-height: 1;font-weight: 900;}
blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}
blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}
.cat-item>a.cf{
	position:relative;
	padding:2px 4px 2px 24px;
	transition:0.1s;
}
.cat-item>a.cf:hover{
	color:var(--color-blueb);
}
.cat-item>a.cf:hover::before{
	content:'';
	pointer-events:none;
	position:absolute;
	width:100%;
	height:100%;
	border-bottom:2px solid;
	border-image:linear-gradient(to left, #0000, var(--color-blueb) 20%, var(--color-blueb) 98%, #0000 100%);
	border-image-slice:1;
}
::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track {
    width: 12px;
}
::-webkit-scrollbar-thumb {
	background-color:  var(--color-blueb);
	border-radius: 8px;
}
.wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
}
#unity-webgl{
	width: 1200px ;
	height: 800px ;
    overflow: hidden;
}
@media screen and (max-width: 1240px){
	#unity-webgl{
		width: 1000px ;
		height: 800px ;
	}
}
@media screen and (max-width: 1023px){
	#unity-webgl{
		width: 800px ;
		height: 600px ;
	}
}
@media screen and (max-width: 834px){
	#unity-webgl{
		width: 480px ;
		height: 360px ;
	}
}
@media screen and (max-width: 480px){
	#unity-webgl{
		width: 400px ;
		height: 300px ;
	}
}
.hidden {
  display: none !important;
}

/*     */