@charset "UTF-8";

.main {
  display: flex;
}

/* メニュー部分 */
.content-menu a {
  text-decoration: none;
}

.content-menu ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin-left: 100px;
  margin-top: 144px;
  margin: 144px 10px 0px 15px;
}

.content-menu li {
  margin-bottom: 8px;
  border-bottom: 1px solid #86B81B;
  border-left: 10px solid #86B81B;
  background: rgba(255, 255, 255, 0);
  width: 478px;
  height: 30px;
  border-radius: 1px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 30px;
  /* heightを同じにすると文字を上下中央に配置できる。*/
}

.content-menu li a {
  display: block;
}

.content-menu li:hover {
  background: rgba(255, 247, 240, 0.70);
}

ul .current-content-menu {
  border-color: #203864;
}

/* 資料・解説部分 */
.content-wrapper {
  padding: 0px 5%;
  margin: 0px 15px 20px;
}

h1 {
  margin-top: 20px;
}

h2 {
  background: none;
  /*common.cssで定義したマーカーを消す*/
}

.syoshi {
  font-family: Meiryo UI;
  font-size: 1rem;
}

.syoshi a {
  color: #86B81B;
}

.kaisetsu-wrapper {
  display: flex;
  margin-top: 20px;
}

.thumbnail {
  display: block;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin:left;
}

.siryo img {
  max-width: 275px;
  margin-right: 30px;
  object-fit: contain;
}

.kaisetsu {
  font-family: Meiryo UI;
  font-size: 1rem;
  /* 資料画像と高さを合わせるため */
  margin-top: -5px;
}

.content-wrapper hr {
  width: 180px;
  height: 5px;
  border: none;
  border-radius: 5px;
  background: #C4B7CB;
  margin: 40px auto;
}

.pagenav {
  display: flex;
  justify-content: space-around;
  margin: 20px 0px;
  font-size: 1rem;
}

[data-ruby] {
  position: relative;
}
[data-ruby]::before {
  content: attr(data-ruby);
  position:absolute;
  left:-1em;
  top:-1em;
  right:-1em;
  text-align:center;
  font-size:0.65em;
  white-space: nowrap; /*ルビを段落ちさせないように*/
      /* デバッグ用 */
      background-color: rgba(255, 0, 0, 0.2);
}

.split{
  display: table;
  width: 100%;
}
.split-item{
  display: table-cell;
  width: 50%;
}
.split-left{
  position: relative;
}
.split-left__inner{
  height: 100%;
  width: 98%;
}
.split-right{
  position: relative;
}
.split-right__inner{
  height: 100%;
  margin-left: 5px;
}

@media (max-width: 1000px) {

  /* 画面縮小時はメニューを下にもってくる */
  .main {
    flex-direction: column-reverse;
  }

  .content-menu ul {
    margin: 0px 0px 20px 0px;
    align-items: center;
  }

  .kaisetsu-wrapper {
    display: flex;
    margin-top: 20px;
  }

  .thumbnail {
    display: block;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin:left;
  }

  .kaisetsu {
    font-family: Meiryo UI;
    font-size: 1rem;
    /* 資料画像と高さを合わせるため */
    margin-top: -5px;
  }
}
@media (max-width: 500px) {

    /* 画面縮小時はメニューを下にもってくる */
    .main {
      flex-direction: column-reverse;
    }
  
    .content-menu ul {
      margin: 0px 0px 20px 0px;
      align-items: center;
    }

    h2 {
      background: none;
      /*common.cssで定義したマーカーを消す*/
    }

    .kaisetsu-wrapper {
      display: block;
    }
  
    .thumbnail {
      display: block;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
  
    .kaisetsu {
      font-family: Meiryo UI;
      font-size: 1rem;
      /* 資料画像と高さを合わせるため */
      margin-top: -5px;
    }
    .split{
      display: block;
  }
    .split-item{
      display: block;
      width: auto;
  }
    .split-left__inner{
      position: inherit;
      width: auto;
  }
    .split-right__inner{
      margin-top: -80px;
  }

}