@charset "UTF-8";
body {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  background-image: url("../image/paper.png");
  font-size: 12pt; margin: 0px;}

p {
  line-height: 1.5; }

header#media-pc {
  display: none;
}

header#media-sp {
  position: relative;
  width: 100%;
  margin: 0px;
  background-color: white;
  box-shadow: 0 1px 8px rgba(0,0,0,0.2);}
  header h2 {
    margin: 0px;
    font-size: 14pt;
    padding-top: 10px;
    margin-left: 20px; }
    header #header-menu {
      margin: 10px 0px 0px 20px;
      padding-bottom: 10px;
    }
    header #header-signal {
      padding: 10px;
      position: absolute;
      top: 5px;
      right: 0;
      width: 150px;
      background-color: white;
      transform: rotate(5deg);
      box-shadow:1px 0px 8px rgba(0,0,0,0.3);
    }
    header #header-search {
      margin: 3px 10px;
    }
    header #header-search input {
      border-style: none;
      border-bottom: 1px solid black;
      font-size: 10pt;
    }
    header #header-search input:focus {
      outline: 0;
      border-bottom: 1px solid #eb6101;
    }
    header #header-search img:hover {
      cursor: pointer;
      background-color: #eb6101;
      border-radius: 10px;
    }
    header div.header-sns {
      padding-right: 10px; }
      header div.header-sns ul {
        list-style-type: none;
        padding-left: 20px;}
        header div.header-sns ul li {
          float: left;
          margin: 0px;
          padding: 0px 5px; }
          header div.header-sns ul li:hover {
            cursor: pointer;
            background-color: #eb6101;
            border-radius: 20px;}


div.contentsPane {
  margin: 10px 0px;
  width: 100%;
}

nav {
  display: none;
  width: 280px;
  margin: 20px auto 0px auto;
  }
  nav > div {
    background-color: white;
    box-shadow:1px 1px 8px rgba(0,0,0,0.3);
    padding: 5px;
  }
  nav > div#nav-sp {
    display: block;
  }
  nav > div:nth-child(odd) {
    transform: rotate(1deg);
  }
  nav > div:nth-child(even) {
    transform: rotate(-2deg);
  }
  nav > div:nth-child(2) {
    transform: rotate(0deg);
  }
  nav ul {
    font-size: 10pt;
    }
    nav ul li a {
      text-decoration: none;
      color: black; }
    nav ul li a:hover {
      color: #eb6101;
    }

section {
  margin: 30px 0px 20px 0px;
  width: 100%;
}
  section div.article-cardPane {
    margin: 10px 0px;
  }
  section div.article-cardPane ul {
    padding: 0;
  }
  section div.article-cardPane ul li {
    float: left;
    list-style: none;
    margin: 10px 0px;
    width: 100%;
  }
  section div.article-cardPane ul a {
      text-decoration: none;
      color: black;
  }
  section div.article-cardPane ul a:hover {
      color: black;
  }
  section div.article-cardPane ul li div {
    position: relative;
    margin: 0 auto;
    width: 240px;
    height: 320px;
    background-color: white;
    box-shadow:1px 1px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
  }
  section div.article-cardPane ul li div figure {
    width: 240px;
    height: 160px;
    margin: 0px;
    padding: 0px;
    background-image: url("../image/noimage.svg");
  }
  section div.article-cardPane ul li div figure img {
    width: 240px;
    height: 160px;
    object-fit: cover;
  }
  section div.article-cardPane ul li div p.article-card-title {
    margin: 5px 15px;
  }
  section div.article-cardPane ul li div p.article-card-date {
    margin: 10px 15px 0px 15px;
    font-size: 10pt;
  }
  section div.article-cardPane ul li div > div.article-card-tags {
    margin: 0px 0px 5px 0px;
    font-size: 8pt;
    height: 20px;
    border: none;
    background: none;
    box-shadow: none;
    position: absolute;
    bottom: 0;
  }
  section div.article-cardPane ul li div > div.article-card-tags ul {
    padding: 0 5px;
  }
  section div.article-cardPane ul li div > div.article-card-tags ul li {
    margin: 0 5px;
    width: auto;
    float: left;
  }
  section #articlePane {
    background-color: white;
    box-shadow:1px 1px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
    padding: 15px;
    padding-bottom: 50px;
    margin: 0px 10px;
  }
  section div.article-title {
    display: flex;
    vertical-align: middle;
    border-bottom: 3px double #eb6101; }
    section div.article-title > div {
      font-size: 12pt;
      color: #eb6101; }
    section div.article-title > h2 {
      font-size: 12pt;
      margin: 0px 0px 0px 10px; }
  section article {
    margin: 10px 5px 5px 5px; }
  section article pre {
    font-size: 10pt;
    width: 100%;
    /* overflow: scroll;*/ }
  section article img {
    width: 100%; }
  section div.tagPane {
    font-size: 10pt; }
    section div.tagPane ul {
      padding: 0px;
      list-style-type: none; }
      section div.tagPane ul li {
        float: left;
        margin: 5px; }
      section div.tagPane ul li a {
        text-decoration: none;
        color: black; }
      section div.tagPane ul li a:hover {
        color: #eb6101; }
  section div.operationPane {
    clear: both;
    display: flex;
    justify-content: center;
    font-size: 10pt;
    margin: 20px 0px; }
    section div.operationPane div.separator {
      width: 3px;
      margin: 0px 10px; }
    section div.operationPane div.nextArticle, section div.operationPane div.previousArticle {
      background-color: white;
      padding: 10px;
      box-shadow:1px 1px 8px rgba(0,0,0,0.3);
    }
    section div.operationPane a {
      text-decoration: none;
      color: black;
    }
    section div.operationPane a:hover {
      color: #eb6101;
    }
      section div.commentPane {
        font-size: 10pt;
        padding-top: 10px;}
        section div.commentPane form {
          width: 320px;
          margin-left: 20px;
          background-color: white;
          box-shadow:1px 1px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
          transform: rotate(-1deg);
          padding: 15px;}
        section div.commentPane form input[type=text] {
          margin-left: 10px;
          border-style: none;
          border-bottom: 1px solid black;
          font-size: 12pt;
        }
        section div.commentPane form input[type=text]:focus {
          outline: 0;
	  border-bottom: 1px solid #eb6101;
        }
        section div.commentPane form textarea {
          margin-left: 10px;
          border-style: none;
          width: 280px;
          border: 1px solid black;
        }
        section div.commentPane form textarea:focus {
          outline: 0;
	  border: 1px solid #eb6101;
        }
        section div.commentPane > p {
          background-color: white;
          box-shadow:1px 1px 8px rgba(0,0,0,0.3);
          width: 200px;
          padding: 10px;
          margin-left: 5px;
        }
        section div.comment {
          background-color: white;
          box-shadow:1px 1px 8px rgba(0,0,0,0.3);
          margin-left: 5px;
          padding: 10px;
          width: 350px;
        }
        section div.comment:nth-child(odd) {
          transform: rotate(1deg);
        }
        section div.comment:nth-child(even) {
          transform: rotate(-1deg);
        }

  footer p {
    margin-left: 20px;
    font-size: 8pt;}
}