:root{
    
    --MAIN-TEXT-color:#323232; /* Color of text by default */
    --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
    --MAIN-LINK-color:#1C90F3; /* Color of links */
    --MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
    --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */

    --MENU-HEADER-BG-color:#a8dae5; /* Background color of menu header */
    --MENU-HEADER-BORDER-color:#9dbdc4; /*Color of menu header border */ 

    --MENU-SEARCH-BG-color:#777; /* Search field background color (by default borders + icons) */
    --MENU-SEARCH-BOX-color: #777; /* Override search field border color */
    --MENU-SEARCH-BOX-ICONS-color: #FFF; /* Override search field icons color */

    --MENU-SECTIONS-ACTIVE-BG-color:#20272b; /* Background color of the active section and its childs */
    --MENU-SECTIONS-BG-color:#252c31; /* Background color of other sections */
    --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
    --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;  /* Color of links in menu, when hovered */
    --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */

    --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
    --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
    
}

body {
    background-color: #F7F7F7;
    color: var(--MAIN-TEXT-color) !important;
}

textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
    border-color: none;
    box-shadow: none;
}

h2, h3, h4, h5 {
    color: var(--MAIN-TITLES-TEXT-color) !important;
}

a {
    color: var(--MAIN-LINK-color);
}

.anchor {
    color: var(--MAIN-ANCHOR-color);
}

a:hover {
    color: var(--MAIN-LINK-HOVER-color);
}

#body {
    margin-left: 350px;
}

#body a.highlight:after {
    display: block;
    content: "";
    height: 1px;
    width: 0%;
    -webkit-transition: width 0.5s ease;
    -moz-transition: width 0.5s ease;
    -ms-transition: width 0.5s ease;
    transition: width 0.5s ease;
    background-color: var(--MAIN-LINK-HOVER-color);
}

#body .tags a.tag-link {
    background-color: var(--MENU-HEADER-BG-color);    
}

#body .tags a.tag-link:before {
    border-right-color: var(--MENU-HEADER-BG-color);
}

#body-inner p{
    margin-left: 2rem;
}
.copyright{
    text-align: right;
    padding: 3rem 6rem;
    color: #b3b3b3;
    font-size: 13px;
}
strong {
    color: #ff0000;
}
@media only all and (max-width: 47.938em) {
    /* 画面の横幅が47.938em以下の時 */
    #body img, #body .video-container {
        margin: auto;
        display: block;
        text-align: center;
        max-width: 100%;
    }
}
@media only all and (min-width: 48em) and (max-width: 59.938em) {
    /* 画面の横幅が47.938em以下の時 */
    #body img, #body .video-container {
        margin: auto;
        display: block;
        text-align: center;
        max-width: 100%;
    }
}
#body img, #body .video-container {
    margin: 0;
}
h1 {
    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    text-transform: none;
}

/***************
 * sidebar関連 *
 ***************/
/* background */
#sidebar #header-wrapper { background:var(--MENU-HEADER-BG-color) }
#sidebar .searchbox { background:var(--MENU-SEARCH-BG-color) }
#sidebar ul li.active > div.menuItem { background:#fff }
#sidebar ul li.active > div.menuItem { background:var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) }
#sidebar ul.topics > li.active { background:var(--MENU-SECTIONS-ACTIVE-BG-color) }
#sidebar ul.topics > li.parent { background:var(--MENU-SECTIONS-ACTIVE-BG-color) }

/* background-color */
#sidebar { background-color:var(--MENU-SECTIONS-BG-color) }

/* border-color */
#sidebar #header-wrapper { border-color:var(--MENU-HEADER-BORDER-color) }
#sidebar .searchbox { border-color:var(--MENU-SEARCH-BOX-color) }
#sidebar hr { border-color:var(--MENU-SECTION-HR-color) }

/* color */
#sidebar #header-wrapper { color:var(--MENU-SEARCH-BOX-color) }
#sidebar .searchbox * { color:var(--MENU-SEARCH-BOX-ICONS-color) }
#sidebar a:hover { color:var(--MENU-SECTIONS-LINK-HOVER-color) }
#sidebar div#menuTable { color:var(--MENU-SECTIONS-LINK-color) }
#sidebar ul li.active > div.menuItem > a { color:#777 !important }
#sidebar ul li.active > div.menuItem > a { color:var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important }
#sidebar ul li.active > div.menuItem > i { color:#777 !important }
#sidebar ul li.active > div.menuItem > i { color:var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important }
#sidebar ul li.visited > a .read-icon { color:var(--MENU-VISITED-color) }

/* content */
#sidebar ul.topics li.close > div.menuItem > i.icon:before { content:'\f054' }
#sidebar ul.topics li.open > div.menuItem > i.icon:before { content:'\f078' }

/* cursor */
#sidebar ul div.menuItem i:hover { cursor:pointer }

/* display */
#sidebar ul li a { display:initial }
#sidebar ul.topics li.close > ul { display:none }
#sidebar ul.topics li.open > ul { display:block }

/* font-size */
#sidebar ul.topics > li > div.menuItem { font-size:1.1rem }

/* line-height */
#sidebar ul.topics > li > div.menuItem { line-height:2rem }

/* margin-left */
#sidebar ul li.active > div.menuItem { margin-left:-1rem }
#sidebar ul.topics { margin-left: 0.3rem }

/* margin-right */
#sidebar ul li.active > div.menuItem { margin-right:-1rem }
#sidebar ul li i { margin-right:0.5rem }

/* overflow */
#sidebar ul li div.menuItem { overflow:hidden }

/* padding */
#sidebar ul div.menuItem { padding:4px 0 }

/* padding-left */
#sidebar ul li.active > div.menuItem { padding-left:1rem }
#sidebar ul li li { padding-left: 0.5rem }

/* padding-right */
#sidebar ul li.active > div.menuItem { padding-right:1rem }

/* text-overflow */
#sidebar ul li div.menuItem { text-overflow:ellipsis }

/* white-space */
#sidebar ul li li { white-space:nowrap }

/* width */
#sidebar { width:350px }

/*************
 * table関連 *
 *************/
/* background-color */
table td.midashi { background-color:#D2E5E9 }
table th { background-color:#BAD7DD }

/********************
 * レスポンシブ関連 *
 ********************/
@media only all and (max-width: 59.938em) {
	/* font-size */
	h1 { font-size:2.0em }
	h2 { font-size:1.5em }
	h3 { font-size:1.5em }
	h4 { font-size:1em }

	/* color */
	h2 { color: var(--MAIN-TEXT-color) !important; }
	h3 { color: var(--MAIN-TEXT-color) !important; }
	h4 { color: var(--MAIN-TEXT-color) !important; }
	h5 { color: var(--MAIN-TEXT-color) !important; }

	/* margin-left */
    #body { margin-left: 300px }
	#body-inner p { margin-left:0.5em }

	/* width */
	#sidebar { width:300px }
}
@media only all and (max-width: 47.938em) {
	/* left */
	#sidebar { left:-300px }

	/* margin-left */
    #body { margin-left: 0 }
	.sidebar-hidden #body { margin-left: 300px }

	/* width */
	#sidebar { width:300px }
}
@media only all and (max-width: 450px) {
	/* font-size */
	h1 { font-size:1.5em }
	h2 { font-size:1.2em }
	h3 { font-size:1.2em }
	h4 { font-size:1em }

	/* margin-left */
	#body-inner p { margin-left:0 }
}