@charset "UTF-8";

      /*! Variables */
      :root {
      }

      /*! Gutenberg reset — adapted from Normalize */
      html {
          margin: 0;

          -ms-text-size-adjust: 100%;

          --rowNum: var(--post_show);
          --colNum: 1;
      }

      body {
          margin: 20px;
          background-color: #fff;
          font-size: medium;
      }


      .sidebar {
          grid-area: sidebar;
      }

      .sidebar2 {
          grid-area: sidebar2;
      }

      .content {
          grid-area: content;
          overflow-anchor: none;    /* no scroll anchoring! */
      }

      .header {
          grid-area: header;
      }

      .footer {
          grid-area: footer;
          overflow-anchor: none;    /* no scroll anchoring! */
          font-size: 80%;
      }

      .footer-right {
          float: right;
      }

      .footer-left {
          float: left;
      }

      .footer a {
        text-decoration: none;
        color: #fff;
      }

      .site {
          /* background-color: #fff; */
          /* font: normal 14px "Noto Sans", arial, helvetica, hirakakupro-w3, osaka, "ms pgothic", sans-serif; */
          /* font-family: trebuchet ms; */
          font-family: "Noto Sans";
      }

      .site {
          display: grid;
          grid-gap: 1em;
          grid-template-areas:
              "header"
              "sidebar2"
              "sidebar"
              "content"
              "footer";
          grid-template-columns: minmax(320px, auto);
      }

      .menuroll {
          display: grid;
          grid-gap: 1em;
          grid-auto-flow: row;
          grid-auto-rows: min-content;
          grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
      }

      .menuroll-item {
          margin: 0;
          padding-left: 0em;
      }

      h1.menuroll-title {
          /* display: none; */
          font-size: 110%;

          margin: 0;
          padding: 0;
          padding-bottom: .3em;
          margin-bottom: 8px;

          border-width: 0 0 1px;
          border-style: solid;
          border-color: #ccc;
      }

      .menuroll-link {
          white-space: nowrap;
          text-decoration: none;
          color: #00d;
      }

      ul.menuroll-list {
          list-style: none;
          margin: 0;
          padding: 0;
      }

      ul.menuroll-list > li {
          padding-bottom: 0.4em
      }

      .archive-title, .postroll-title {
        font-size: 180%;
        font-weight: bold;

        border-width: 0 0 1px;
        border-style: solid;
        border-color: #ccc;
        padding: 0;
        margin-bottom: 8px;
        padding-bottom: .3em;
        float: left;
      }

      img.index-icon {
        content:"";
        height:20px;
        width:20px;
        display:inline;
        float:right;
        margin-right: 0.5em;
        border-style: none;
      }

      .categoryroll {
          display: grid;
          grid-gap: 0.5em;
          grid-auto-flow: column;
          grid-auto-columns: minmax(auto, min-content);
      }

      .categoryroll-item {
          margin: 0;
          padding-left: 0;
          padding-top: 2px;
      }

      h1.categoryroll-title {
          /* display: none; */
          margin: 0;
          padding: 0;
          padding-right: 0.2em;
          font-size: 110%;
      }

      .category-link {
          white-space: nowrap;
          text-decoration: none;
          color: #00d;
      }

      .category-link-selected {
          font-weight: bold;
      }

      .posttitleroll {
          display: none;
      }

      .syndicationroll, .syndicationroll-title {
          display: none;
      }

      .albumsroll {
          display: grid;
          grid-gap: 0.2em;
          grid-auto-flow: row;
          grid-auto-rows: min-content;
          grid-template-columns: auto;
      }

      .albumsroll-item {
          padding-left: 1em;
      }

      .albumsroll-link {
         white-space: nowrap;
          text-decoration: none;
          color: #00d;
          font-weight: bold;
      }

      @media only screen and (min-width: 640px)  {
          .site {
              grid-template-columns: 220px 1fr;
              grid-template-areas:
                  "header   header"
                  "sidebar2 sidebar2"
                  "sidebar  content"
                  "footer   footer";
          }

          .menuroll {
              display: grid;
              grid-gap: 1em;
              grid-auto-flow: row;
              grid-auto-rows: min-content;
              grid-template-columns: auto;
          }

          .menuroll-item {
              margin: 0;
          }

          h1.menuroll-title {
              display: block;
          }

          h1.categoryroll-title {
              display: block;
              border-bottom: 1px;
          }
      }

      @media only screen and (min-width: 1024px) {
          .site {
              margin: 0 auto;

              grid-gap: 20px;
              grid-template-columns: 220px auto 220px;
              grid-template-areas:
                  "header  header  header"
                  "sidebar content sidebar2"
                  "footer  footer  footer";
          }

          .categoryroll, .posttitleroll {
              display: grid;
              grid-gap: 0.2em;
              grid-auto-flow: row;
              grid-template-columns: auto;
          }

          .syndicationroll {
              display: grid;
              grid-gap: 0.4em;
              grid-auto-flow: row dense;
              grid-template-rows: auto;
              grid-template-columns:  repeat(auto-fit, minmax(80px, min-content));
          }

          .categoryroll-item, .posttitleroll-item, .syndicationroll-item {
              margin: 0;
          }

          h1.categoryroll-title, h1.posttitleroll-title {
              display: block;
              font-size: 110%;

              padding: 0;
              padding-bottom: .3em;
              margin-bottom: 8px;

              border-width: 0 0 1px;
              border-style: solid;
              border-color: #ccc;
          }

          h1.syndicationroll-title {
              display: block;
              font-size: 110%;

              padding: 0;
              padding-bottom: .3em;
              margin-bottom: 18px;

              border-width: 0 0 1px;
              border-style: solid;
              border-color: #ccc;
          }

          .posttitle-link, .syndication-link {
            /* white-space: nowrap; */
            text-decoration: none;
            color: #00d;
          }
      }

      .sidebar {
          padding: 0.5em;
      }

      .sidebar2 {
          padding: 0.5em;
      }

      .box {
          color: #fff;
          background-color: #444;
          padding: 0.5em;
          border-radius: 5px;
      }

      .msg-warning {
          color: #fff;
          background-color: #F00;
          padding: 0.5em;
          border-radius: 5px;
          margin-top: 0em;
          margin-bottom: 2em;
          text-align: center;
          font-style: italic;
      }

      .postroll {
          display: grid;
          grid-gap: 1em;

          margin: 0;
          padding: 0.5em;
      }

      .postroll-item {
          display: block;
      }

      a.postroll-item {
        text-decoration: none;
        color: #00d;
      }

      .post-meta {
          display: none;
      }

      .post-title {
          font-size: 150%;
          font-weight: bold;

          border-width: 0 0 1px;
          border-style: solid;
          border-color: #ccc;
          padding: 0;
          margin-bottom: 8px;
          padding-bottom: .3em;
      }

      a.post-title-link {
        text-decoration: none;
        color: #000;
      }

      a.post-perma-link {
        text-decoration: none;
        color: #00d;
      }

      div.post-subtitle {
        font-size: 80%;
      }

      div.post-subtitle span {
        margin-right: .2em;
      }

      .post-body {
          font-size: 100%;
      }

      .show-more {
          text-align: center;
      }

      .show-more-link {
          display: none;
      }

      .spinner {
          margin: auto;
          display: none;
      }

      .archive-select {
        width: 10em;
      }

      .post-body .img-js-loader {
        display: none;
        width: 1px;
        height: 1px;
      }

      .post-body img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2em;
        margin-bottom: 2em;
        border-radius: 8px;
      }

      .post-body iframe {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2em;
        margin-bottom: 2em;
      }

      .post-body video {
        display: block;
        width: 100%     !important;
        height: auto   !important;
        margin-left: auto;
        margin-right: auto;
      }

      .post-body a {
        text-decoration: none;
        color: #00d;
      }

      .post-body img.inline {
        display: inline;
        padding: 0;
        margin: .5em;
        border-radius: 8px;
      }

      .post-body img.float-left {
          float: left;
          margin-right: 1.5em;
      }

      .post-body div.center {
        margin-top: 2em;
        margin-bottom: 2em;
        margin-left: auto;
        margin-right: auto;
        text-align: center;;
      }

      img, video, .plyr {
        opacity: 1;
        animation: img-fade-in 4s ease;
      }

      @keyframes img-fade-in {
        0%   { opacity: 0; }
        100% { opacity: 1; }
      }

      .plyr {
        width: 90%     !important;
        height: auto   !important;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2em;
        margin-bottom: 2em;
        border-radius: 8px;
      }

      .html5-player-video-title {
        font-style: italic;
        font-weight: bold;
      }

      .html5-player-video-description {
        text-align: center;
        margin: 1em;
      }

      .debug-text {
          font-size: 70%;
          padding-top: 1em;
          color: #aaa;
      }