@charset "UTF-8";

/** モバイルファースト */
@media screen and (min-width: 768px) {/* スクリーンサイズが768px以上の場合に適用 */} 
@media screen and (min-width: 1200px) {/* スクリーンサイズが1200px以上の場合に適用 */} 

/** JQuery **/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  background: #7b7c7d;
  text-decoration: none;
  color: #fff;
  width: 60px;
  padding: 20px 5px;
  text-align: center;
  display: block;
  border-radius: 90px;
  opacity: 0.9;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}

/** フォント設定 */
body{
  font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',monospace;
  font-color:black;
  background-color: #abb1b5;
  font-size: 100%;
}

/** 全体幅 */
article{
  width:90%;
  max-width: 1200px;
  min-width: 370px;
  /** padding: 1em;*/
  margin : 0 auto;
}

/** コンテンツエリア背景 */
.caBgImg {
  background: linear-gradient(to top, rgba(233, 233, 233, 0.3) 50%, rgba(140, 140, 140, 0.5) 100%),
    url(../../../imageData/WHRPGjCON_conceptArt.png);
  background-size: cover;
  background-attachment: scroll;
  no-repeat top center / contain;
}

/** コンテンツ文字装飾 */
contentP{
  /** 縁取り */
  color: #000;
  text-shadow: 
     2px  2px 7px #ffffff,
    -2px  2px 7px #ffffff,
     2px -2px 7px #ffffff,
    -2px -2px 7px #ffffff,
     2px  0px 7px #ffffff,
     0px  2px 7px #ffffff,
    -2px  0px 7px #ffffff,
     0px -2px 7px #ffffff;
}

/** コンテンツエリア 見出し */
.contentBox1{
    width:80%;
    min-width :280px;
    padding: 5px 10px;
    margin: 0.5em 0;
    color: #2c2c2f;
    background: #ffffff;
    border-top: solid 2px #180614;
    border-bottom: solid 2px #180614;
}
.contentBox1 p {
    margin: 0; 
    padding: 0;
    font-weight: bold;
}

/** テーブル */
table th {
    width:80%;
    min-width :280px;
    }

/* スクロールバーの実装 */
.table_sticky {
    display: block;
    overflow-y: scroll;
    height: 4.5em;
    border-collapse: collapse;
}
.table_sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/** 卓情報 */
.table_sessionSticky {
    display: block;
    overflow-y: scroll;
    border-collapse: collapse;
}
.table_sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/** マージン改行 */
.mbr {
    margin-bottom: 0.75rem;
}

/* モーダルの背景 */
.modal {
    display: none; /* デフォルトでは非表示 */
    position: fixed; /* 画面に固定 */
    z-index: 1; /* 他の要素の上に表示 */
    left: 0;
    top: 0;
    width: 100%; /* 全幅 */
    height: 100%; /* 全高さ */
    overflow: auto; /* スクロール可能 */
    background-color: rgb(0,0,0); /* 背景色 */
    background-color: rgba(0,0,0,0.4); /* 透過 */
}

/* モーダルコンテンツ */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 中央に配置 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 幅 */
}

button {
  /* 背景色を無色に */
  background: transparent;
  /* 枠線を消す */
  border: none;
  /* クリックした際に枠線をnone消す */
  outline: none;
  /* 影を消す */
  box-shadow: none;
}

/* 003 */
.button003 a {
    background: #eee;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 260px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button003 a:hover {
    background: #313131;
    color: #FFF;
}
.button003 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button003 a:hover:after {
    border-color: #FFF;
}