@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-sp {
  display: none;
}
header#media-pc {
  position: relative;
  width: 100%;
  margin: 0px;
  background-color: white;
  box-shadow: 0 1px 8px rgba(0,0,0,0.2);}
  header h2 {
    margin: 0px;
    padding-top: 10px;
    margin-left: 20px; }
  header div.headerMenuPane {
    display: flex;
    justify-content: space-between;
    margin: 0px; }
  header div.header-tab ul {
    padding: 0px;
    list-style-type: none; }
    header div.header-tab ul li {
      width: 150px;
      float: left;
      text-align: center;
      padding: 5px; }
    header div.header-tab ul li a {
      text-decoration: none;
      color: black; }
      header div.header-tab ul li a:hover {
        color: #eb6101;
        }
  header #header-signal {
    padding: 10px;
    position: absolute;
    top: 5px;
    right: 0;
    width: 200px;
    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: 12pt;
  }
  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; }
      header div.header-sns ul li {
        float: left;
        margin: 0px 5px; }
        header div.header-sns ul li:hover {
          cursor: pointer;
          background-color: #eb6101;
          border-radius: 20px;}

div.contentsPane {
  margin: 10px 0px;
  display: flex;
  justify-content: center;
  min-width: 1200px;}

nav {
  width: 280px;
  margin: 10px 0px 0px 15px;
  }
  nav > div {
    background-color: white;
    box-shadow:1px 1px 8px rgba(0,0,0,0.3);
    padding: 5px;
  }
  nav > div#nav-sp {
    display: none;
  }
  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 {
  width: 900px;
  margin-top: 20px;
  margin-left: 15px; }
  section div.article-cardPane {
    margin: 10px;
  }
  section div.article-cardPane ul li {
    float: left;
    list-style: none;
    margin: 10px;
  }
  section div.article-cardPane ul li a {
      text-decoration: none;
      color: black;
  }
  section div.article-cardPane ul li a:hover {
      color: black;
  }
  section div.article-cardPane ul li div {
    position: relative;
    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;
  }
  
  section div.article-cardPane-ads {
    clear: both;
    margin: 10px 20px;
    box-shadow:1px 1px 8px rgba(0,0,0,0.3);
    background-color: white;
    height: 150px;
  }

  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;
  }
  section div.article-title {
    display: flex;
    vertical-align: middle;
    border-bottom: 3px double #eb6101; 
    padding: 30px 0px 10px 0px; }
    section div.article-title > div {
      font-size: 18pt;
      color: #eb6101; }
    section div.article-title > h2 {
      font-size: 18pt;
      margin: 0px 0px 0px 10px; }
  section article {
    margin: 10px 5px 5px 5px; }
  section article img {
    display: block;
    width: 80%;
    margin: 0 auto;
  }
  section article pre {
    font-size: 10pt;
    width: 100%;
    /*overflow: scroll;*/ }
  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: 550px;
      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(-2deg);
      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;
      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;
    }
    section div.comment {
      background-color: white;
      box-shadow:1px 1px 8px rgba(0,0,0,0.3);
      padding: 10px;
    }
    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;}
}