/* encoding: utf-8 */

body { margin: 1px; }

/* 入力フォーム */
table.inpform { font-size: 2rem; }
input.inpform { font-size: 2rem; }
button.inpform { font-size: 2rem; }
select.inpform { font-size: 2rem; }

/* 入力間違いエラー */
span.err{ border: 1px solid red; font-size: 2rem; }
div.err{ border: 1px solid red; font-size: 2rem; }

/* 将棋盤 */
.block {
  display: flex;
  justify-content: center;
  width: 100%;
}
.block_elem_ban {
  border: 1px solid #FC6;
  box-sizing: border-box;
  /* background-color: #FFEFD5; */
  flex: 2;
  vertical-align: top;
}
table.ban, table.sentegoma, table.gotegoma {
  /*background-image: url("../image/wood03.jpg");*/
  background-Color: #C96;
  border-collapse: collapse;
}
/*table.ban {
  border:2px solid black;
}*/
table.ban tr td, table.ban tr th {
  border: 2px solid black;
  box-sizing: border-box;
}
table.ban tr td img {
  height: 3em;
  width: 3em;
}
table.ban tr td img.lmmark {
  height: 16px;
  width: 16px;
}
table.sentegoma tr td {
  text-align:center;
}
table.gotegoma tr td {
  text-align:center;
}

/*@media screen and (max-width: 600px) {*/
.tegoma_koma {
  height: 3em;
  width: 3em;
}
.tegoma_koma img {
  margin: 0;
  padding: 1px;
  vertical-align: top;
}
.tegoma_num { font-size: 1.5rem; }
.ban_masu {
  text-align: center;
  vertical-align: middle;
  /*height: 3em;
  width: 3em;*/
}
.ban_masu img {
  margin: 0;
  padding: 1px;
  vertical-align: top;
}
/*.ban_dan_row {
  height: 3em;
}*/
.ban_dan_num {
  font-weight: bold;
  height: calc(3em + 2px);
}
.ban_suji_num {
  font-weight: bold;
  width: calc(3em + 2px);
}
/*}*/
/* 棋譜 */
div.kifu {
  box-sizing: border-box;
  column-count: 2;
  display: flex;
  max-height:700px;
  overflow-y: auto;
  vertical-align: top;
  width:100%;
}
textarea.kifu {
  box-sizing: border-box;
  height:calc(600px + 7em);
  width: 100%;
}
.block_elem_kifu {
  border: 1px solid #FC6;
  box-sizing: border-box;
  /* background-color: #FFEFD5; */
  flex: 1;
  vertical-align: top;
  word-wrap: break-word;
}

/* Mobile */
/*@media screen and (max-width: 600px) {*/
@media screen and (orientation: portrait) {
  .block {
-webkit-flex-direction: column;
        flex-direction: column;
  }
  textarea.kifu {
    box-sizing: border-box;
    height: 10em;
    width: 100%;
  }
  table.ban tr td img {
    height: 9vw;
    width: 9vw;
  }
  table.ban tr td img.lmmark {
    height: 3vw;
    width: 3vw;
  }
  .ban_suji_num {
    font-weight: bold;
    width: 9vw;
  }
  .ban_dan_num {
    font-weight: bold;
    height: 9vw;
  }
  .tegoma_koma {
    height: 9vw;
    width: 9vw;
  }
}

/* nari menu */
.narimenu {
  background-Color: lightgray;
  border: 2px solid black;
  justify-content: center;
  position: absolute;
  visibility: hidden;
}

.narimenu span{
  padding: 0 10px;
}

/* chat */
.chatbtn { font-size: 2rem }
.chatmsg { font-size: 2rem; width: 75%; }
.chatnm { font-size: 2rem; width: 20%; }
.chat { min-height:200px; overflow:scroll; width:100%; }

/* notification */
.notify {
  border: 1px solid orange;
  box-sizing: border-box;
  display: none;
  width: 100%;
}

/* 入力禁止用幕 */
.fogscreen {
-webkit-align-items: center;
        align-items: center;
        background-Color: white;
        display: -webkit-flex;
        display:         flex;
        height: 100%;
-webkit-justify-content: center;
        justify-content: center;
        left: 0;
        opacity: 0.8;
        position: fixed;
        top: 0;
        visibility: hidden;
        width: 100%;
}

.msg_fogscreen {
  background-Color: lightyellow;
  border: 1px solid gold;
  border-radius: 5px;
  box-sizing: border-box;
  margin: 20px auto;
  opacity: 1.0;
  padding: 10px;
  visibility: hidden;
}

.gotemoji {
-moz-transform: rotate(180deg) translate(-2em, -1em);
-ms-transform: rotate(180deg) translate(-2em, -1em);
-o-transform: rotate(180deg) translate(-2em, -1em);
-webkit-transform: rotate(180deg) translate(-2em, -1em);
        transform: rotate(180deg) translate(-2em, -1em);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
        transform-origin: 0 0;
}

.preload {
  display: none;
}

/* LOGO */
.logo_center {
  font-size: 20vw;
  font-weight: bold;
  height: 30vw;
  text-align: center;
  width: 30vw;
}
.logo_edge_ud {
  height: 5vw;
  width: 30vw;
}
.logo_edge_lr {
  height: 30vw;
  width: 5vw;
}

/* menu */
.menubase {
  background-Color: lightgray;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  /* padding: 10px 0; */
}

.menubase a:hover {
  background-color: gray;
  color: white;
}

.menu {
  padding: 3px 10px;
}

.menu_signup {
  background-Color: blue;
  color: white;
  font-weight: bold;
  text-decoration:none;
}

.popup {
  background-Color: lightgray;
  border: 1px solid gray;
  box-sizing: border-box;
  display: none;
  padding: 0;
  position: absolute;
  visibility: hidden;
}

.popup ul {
  list-style-type: none;
  padding: 0;
}

.popup ul li {
  padding: 5px 0;
}

.popup ul li:hover {
  background-Color: gray;
  color: white;
}

.popup ul hr {
  margin: 0;
  padding: 0;
}

/*.popup ul li a {
text-decoration:none;
}*/

.popup ul li a:hover {
  color: white;
}

.mypage_chatgame {
  font-family: monospace;
}

.mypage_main {
        display: -webkit-flex;
        display:         flex;
-webkit-flex-flow: column;
        flex-flow: column;
        margin: 0;
        min-height: 400px;
        padding: 0;
}

.mypage_main .mynav {
        display: -webkit-flex;
        display:         flex;
-webkit-flex: 1 1 auto;
        flex: 1 1 auto;
-webkit-flex-flow: wrap row;
        flex-flow: wrap row;
        justify-content: center;
-webkit-order: 1;
        order: 1;
        text-align: center;
        margin: 0;
        padding: 0;
        /* text-align: right; */
}

.mypage_main .mynav div {
  border: solid 1px black;
  margin: 0 2px;
  padding: 2px 8px;
}

.mypage_main .mynav div:hover {
  background-Color: gray;
  color: white;
}

.mypage_main .myarticle {
-webkit-flex: 3 1 auto;
        flex: 3 1 auto;
-webkit-order: 2;
        order: 2;
}

.mypage_main button { font-size: 1.5rem; }

.mypage_main .mypage_chat small {
  font-size: 8pt;
}

.chatarea {
  background-color: aliceblue;
  display: -webkit-flex;
  display:         flex;
-webkit-flex-direction: column;
        flex-direction: column;
/*-webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;*/
  margin: 0;
  /* min-height: 400px; */
  padding: 0;
}

.cvdate {
  background-color: ghostwhite;
  color: green;
  text-align: center;
  width: 100vw;
}

.fukiarea {
  margin: 2px 2px;
  width: 70vw;
}

div.mychatmsg .fukidasi {
  background-color: chartreuse;
  border-radius: 10px;
  padding: 5px 10px;
}

div.mychatmsg .chatname {
  display: none;
}

div.notmychatmsg .fukidasi {
  background-color: white;
  border-radius: 10px;
  padding: 5px 10px;
}

div.mychatmsg {
  border-radius: 15px;
  display: -webkit-flex;
  display:         flex;
  /* margin: 1em; */
  /* text-align: right; */
-webkit-flex-flow: nowrap row-reverse;
        flex-flow: nowrap row-reverse;
}

div.notmychatmsg {
display: -webkit-flex;
display:         flex;
-webkit-flex-flow: nowrap row;
        flex-flow: nowrap row;
  /* margin: 1em; */
  /* text-align: left; */
}

.kidoku {
  background-color: lightgoldenrodyellow;
  border: solid 1px midnightblue;
  border-radius: 10px;
  box-sizing: border-box;
  color: midnightblue;
  font-size: 8pt;
  height: 2em;
  /* margin: 0; */
  overflow: visible;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.unsubscribe {
  color: red;
  font-size: 2rem;
}

.taikyokuchu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* version information */
.githash {
  border: solid 5px #f44d27;
  box-sizing: border-box;
  padding: 5px;
  text-align: left;
  width: 80vw;
}
.githash pre{
  background-color:#EEE;
  margin: 0;
  padding: 10px;
}
.geminfo {
  border: solid 5px #cc342d;
  box-sizing: border-box;
  padding: 5px;
  text-align: left;
  width: 80vw;
}
.geminfo pre{
  background-color:#EEF;
  margin: 0;
  padding: 10px;
}

/* 着手確認用 */
/* 入力禁止用幕 */
.movecfrm {
-webkit-align-items: center;
        align-items: center;
        background-Color: white;
        display: -webkit-flex;
        display:         flex;
        height: 100%;
-webkit-justify-content: center;
        justify-content: center;
        left: 0;
        opacity: 0.85;
        position: fixed;
        top: 0;
        visibility: hidden;
        width: 100%;
}

.movecfrm table {
  font-size: 2rem;
}

.mvcfm_ok, .mvcfm_cancel {
  background-color: lightgray;
  border: 2px solid gray;
  box-sizing: border-box;
  padding: 1rem;
  text-align: center;
  width: 100%;
}

/* NEWS*/
.news {
  border: inset 5px blue;
  box-sizing: border-box;
  padding: 5px;
  text-align: left;
  width: 60vw;
}

/* lounge */
.btn_filing_lounge {
  /* border: inset 5px blue; */
  /* padding: 5px; */
  text-align: center;
  width: 80vw;
}

/* signup */
.signupinfo {
  background-color: white;
  color: red;
  text-align: center;
}

.signupinfo address {
  font-size: larger;
  text-decoration: underline;
}

/* marquee */
.marquee-anim {
  /* background-color: rgb(233,247,250); / * 背景色 */
  /* border: 1px solid rgb(200,222,245); / * ボーダー */
  border-bottom: 1px solid darkolivegreen;
  box-sizing: border-box;
  color: darkolivegreen; /* 文字色 */
  font-family: monospace;
  font-weight: bold;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.marquee-anim span {
  animation: marquee 30s linear infinite;
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
}

@keyframes marquee {
  from {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}