@charset "utf-8";

body, #blog-title, .entry-title, .entry-content, h1, h2, h3, h4, h5 {font-family: "Noto Sans JP", sans-serif;color: #555459;}


/* ==========================================================================
  Header Style
========================================================================== */
#container {width: 100%;}
#container-inner {position: relative;}
#blog-title {text-align: left;color: #3f3f44;padding: 0;background-color: #f8f9fa;border-bottom: 1px solid rgba(0,0,0,0.14);}
#blog-title #title {font-size: 20px;font-weight: 700;height: 54px;}
#blog-title #title a {color: #3f3f44;position: absolute;top: -3px;left: 19px;padding-top: 18px;}
/* #top-editarea {display: flex;position: absolute;top: 0;left: 220px;background-color: #f8f9fa;width: calc(100% - 220px);} */
#top-editarea {display: flex;position: fixed;top: 0;left: 0px;width: 100%;background-color: #f8f9fa;border-bottom: 1px solid rgba(0,0,0,0.14);z-index: 100;height: 55px;}
#top-editarea .headnav-menu-right {display: flex;margin-left: auto;background-color: #f8f9fa;}
.headnav-logo {width: 220px;color: rgba(0,0,0,.9);font-size: 20px;font-weight: 700;height: 55px;padding: 17px 10px 10px 20px;}
.headnav-logo a {color: #3f3f44;}
.headnav-menu {padding: 17px 9px 10px 20px;font-size: 13px;}
.headnav-menu a {color: #3f3f44;}
.headnav-menu a.active {font-weight: 700;}
.headnav-menu a:hover {font-weight: 700;}
.headnav-menu-right {color: #3f3f44;padding-right: 31px;padding-left: 20px;margin-left: auto;}
.headnav-menu-right div {font-size: 13px;padding-top: 17px;}
.headnav-menu-right div:last-child {padding-left: 6px;}
.headnav-menu-right a {color: #3f3f44;}
.headnav-menu-right a:hover {font-weight: 700;}

.headnav-menu-btn {display: none;}

#top-box {margin: -1px auto 20px;}

/* ==========================================================================
  Content Style
========================================================================== */
h1.about {margin-top: 27px;}
.entry-content h3 {margin: 50px 0;font-size:  20px;position:  relative;font-weight:  400;margin-bottom: 15px;border-bottom: solid 4px rgba(76, 175, 80, 0.6);border-radius: 0px 0px 160px 180px/0px 0px 8px 4px;}
.entry-content h4 {font-size: 109%;padding: 0.25em 0.5em;background: transparent;border-left: solid 3px #57ad68;font-weight: 400;}

/* ==========================================================================
  Sidebar Style
========================================================================== */
.hatena-module-search-box .search-module-input {padding: 20px 10px;}

/* ==========================================================================
  Footer Style
========================================================================== */
#bottom-editarea {display: flex;height: 41px;background-color: #f8f9fa;align-items: center;border-top: 1px solid rgba(0,0,0,0.14);padding: 0 14px;width: 100%;}
#bottom-editarea .footer-menu {padding: 0 10px;}
#bottom-editarea a {color: #3f3f44;font-size: 13px;}
#bottom-editarea a:hover {font-weight: 700;}

.footer-menu-right {margin-left: auto;}

/* ==========================================================================
  Media Query Style
========================================================================== */
@media screen and (min-width: 1024px) {
  #content {margin: 0;min-height: calc(100vh - 106px);}
  #content #content-inner {display: flex;padding: 0 20px;}
  #content #content-inner #wrapper {width: calc(100% - 320px);}
  #content #content-inner #box2 {width: 320px;padding-top: 14px;}
  #content #content-inner #main {width: 630px;margin: 0 auto;float: none;}
  .entry-content p {line-height: 1.9;}
  .archive-entries {margin-top: 25px;}
  .breadcrumb-inner {margin: 0 7px;}
  .hatena-urllist li a {color: #789dae;}
  .hatena-urllist li a:hover {color: #1b8260;}
}

@media screen and (max-width: 1023px) {
  #top-editarea {display: none;}
  #bottom-editarea {display: none;}
}