@charset "UTF-8";

/* common.css　全ページに共通するスタイルを定義したシート*/

/* 共通部分
------------------------------- */
html {
  font-size: 16px;
}

body {
  font-family: Noto Serif JP;
  line-height: 1.7;
  color: #000000;
  background-image: url(images/japanese-paper_00147-2.png);
  background-repeat: repeat;
  background-size: 240px;
  overflow: auto;
}

a {
  color: rgb(0, 0, 0);
}

a:hover {
  color: #418a5a;
}


/* HEADER
------------------------------- */
header {
  display: flex;
  justify-content: space-between;
  margin-top: px;
  background: url(japanese-paper_00147-2.png) center / cover;
  align-items: center;
}

header img {
  display: block;
  width: 150px;
}


/** HEADER の大メニュー
------------------------------- **/
.header-menu {
  display: block;
}

.header-menu ul {
  display: flex;
  list-style: none;
}

/* 拡大時はメニューのTOPを隠す */
@media (min-width: 880px) {
  .header-menu li:nth-child(1) {
    display: none;
  }
}

.header-menu li {
  margin-right: 15px;
  background-color: #86B81B;
  width: 150px;
  height: 50px;
  border-radius: 100px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 50px;
  /* heightを同じにすると文字を上下中央に配置できる。*/
}

.header-menu a {
  display: block;
  color: #86B81B 2px;
  text-decoration: none;
}

.header-menu li:hover {
  background-color: #FFFFFF;
  border: solid #86B81B 2px;
}

.header-menu a:hover {
  color: #86B81B 2px;
  text-decoration: none;
}

/* 現在のメニューの色変え */
.header-menu .current-menu {
  background-color:  #86B81B;
}

.header-menu .current-menu:hover {
  background-color: #FFFFFF;
  border: solid #86B81B 2px;
}

.header-menu .current-menu a:hover {
  color:#86B81B;
  text-decoration: none;
}

/* 準備中メニュー */
.header-menu .disabled {
  background-color: #86B81B;
}

.header-menu .disabled a {
  color: #ffffff75;
  pointer-events: none;
}

.header-menu .disabled:hover {
  background-color: #86B81B;
  border: none;
}

/* ルビ（～準備中～）のスタイル */
ruby[data-ruby] {
  position: relative;
  padding: 0;
  font-size: 90%;
}

ruby[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  line-height: 100%;
  text-align: center;
  left: -3em;
  /* 長いルビを左右にはみ出させるための余白 */
  right: -3em;
  /* ルビの位置合わせの基準点 */
  transform-origin: bottom center;
  /*親文字列の下端中央起点*/
  /* ルビの文字サイズを親文字に対する比率で指定 */
  transform: scale(0.6);
  /* line-heightに対するルビ位置高さの割合（下から) */
  bottom: 87%;
  font-weight: lighter;
}

rt {
  display: none;
}



/* ヘッダー　モバイル向けボタン */
/** 通常時は非表示 **/

input[type="checkbox"] {
  display: none;
}


/* 本文 */
.content-wrapper {
  margin: 0px 100px 10px;
  background-color: rgb(248, 248, 248);
  padding: 20px 10%;
}

h1 {
  border-radius: 1px;
  border-bottom: 2px solid #86B81B;
  border-left: 16px solid #86B81B;
  background: #FFF;
  padding-left: 20px;
  margin-bottom: 20px;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 15px;
  background: linear-gradient(transparent 75%, #C4B7CB90 75%);
  padding: 0 10px;
  display: inline-block;
}

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

/* POSTER.ポスターページの設定:ポスターとちらしを整列 */
/* ZUROKU.図録ーページの設定 */
.poster,
.zuroku {
  display: flex;
  /*要素を整列(Flexbox)*/
  flex-wrap: wrap;
  /*折り返し許可*/
  justify-content: center;
  align-items: center;
  padding: 75px 0px;  /* フッターが上に来ないように余白を追加 */
}

.poster div,
.zuroku div {
  text-align: center;
}

.poster img,
.zuroku img {
  margin: 20px 15px 0px 15px;
  width: 220px;
}

.access img {
  margin-top: 20px;
}

/* SNSのシェアボタン部分 */
.sns-wrapper {
  background-color: #86B81B;
  padding: 4px;
  display: flex;
  justify-content: center;
}

.sns-wrapper div {
  margin: 0px 10px;
}

.tweet-button {
  padding-top: 7px;
  /* Facebookのボタンが謎に下にずれたので合わせるため*/
}


/* footer
------------------------------- */

footer {
  background-color: #86B81B;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* 縮小時に折り返す */
  padding: 40px;
}

footer img {
  width: 252px;
  margin: 0px 20px;
}


/** 縮小時の表示 **/

@media (max-width: 880px) {

  .no-scroll {
    overflow: hidden;
  }

  .nav-icon {
    background-image: url(./images/nav-mobile-open.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    right: 15px;
  }

  .nav-icon.show {
    background-image: url(./images/nav-mobile-close.svg);
  }

  .header-menu {
    visibility: hidden;
  }

  .header-menu.show {
    visibility: visible;
  }

  .header-menu ul {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px;
    right: 0;
    height: 100%;
    width: 304px;
    background-color: #E9E5EB;
    padding-left: 170px;
    padding-top: 50px;
  }

  .header-menu li {
    background-color: transparent;
    font-weight: 700;
    text-align: left;
    margin-bottom: 30px;
    display: block;
  }

  .header-menu a {
    color: #000000;
  }

  .header-menu li:hover {
    background-color: transparent;
    border: none;
  }

  .header-menu a:hover {
    color: #86B81B
  }

  /* 現在のメニューの色変え */
  .header-menu .current-menu {
    background-color: transparent;
  }

  .header-menu .current-menu:hover {
    background-color: transparent;
    border: none;
  }

  /* 準備中メニュー */
  .header-menu .disabled {
    background-color: transparent;
  }

  .header-menu .disabled a {
    color: #777777;
  }

  .header-menu .disabled:hover {
    background-color: transparent;
    border: none;
  }

  /* content部 */
  /* 縮小時にmargin・paddingを小さくする */
  .content-wrapper {
    margin: 0px 15px 10px;
    padding: 20px 5%;
  }

}