/* 全体：フォントなど *********************************************** */
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  padding: 0px;
  margin: 0px;
}
/* 全体：テーブルなど *********************************************** */
body, html {
  padding: 0px;
  margin: 0px;
  background: #f1f1f1;
  font-size: 16px;
}
table {
  border-collapse: separate;
  border-spacing: 0px 0px;
  display: block;
  background: #000;
}
td, th {
  padding: 0px;
  margin: 0px;
  vertical-align: middle;
  border: solid 1px #000;
  position: relative;
  background: #fff;
  /* bg-img */  
  background-image: url("../img/fff.png");
  background-size: contain;
  
  cursor: default;
}
th {
  background: #ddd;
}
/* 全体：共通 *********************************************** */
.d_none {
  display: none;
}
button:disabled{
  opacity:0.3 !important;
}
._dummy {
  border: solid 1px #f00;
}
/* input/placeholder を消す */
input:focus:placeholder-shown {
  color: transparent;
}
input:focus::-webkit-input-placeholder {
  color: transparent;
}
input:focus::-moz-placeholder {
  color: transparent;
}
input:focus:-ms-input-placeholder {
  color: transparent;
}
input:focus::-ms-input-placeholder {
  color: transparent;
}
/* メインテーブル *********************************************** */
#main_wrapper {
  padding: 0px;
  margin: 0px;
  width: 100%;
  text-align: center;
}
#main_table, #answer_table {
  min-width: 10px;
  margin: 0px auto;
}
/*#main_table td, #answer_table td, */
.my_td {
  width: 58px;
  height: 58px;
  font-size: 26px;
  text-align: center;
  padding: 0px;
  margin: 0px;  
}
/* １文字 <span class="my_char">ホ</span>*/
.my_char, .my_ans_char {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  margin: 0px;
  padding: 0px;
  margin-top: 11px;
  color: #666;
  
  font-weight: bold;
}
/* マスのID番号（左上）<span class="my_num">1</span> */
.my_num {
  position: absolute;
  top: 0;
  left: 4px;
  margin: 0px;
  padding: 0px;
  font-size: 14px;
}
/* 解答のID（右下）<td class="my_ans"><span class="my_ans_num">D</span> */
.my_ans_num {
  position: absolute;
  bottom: 0;
  right: 4px;
  margin: 0px;
  padding: 0px;
  font-size: 14px;
}
/* 解答：Ａ～ */
.my_ans {
  border: 2px solid #666;
  background: #ddd;
  background-color: #ddd !important;
  -webkit-print-color-adjust: exact;
  /* bg-img */  
  background-image: url("../img/ddd.png");
  background-size: contain;
}
.my_ans_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}
/* ■（ブランク）<td class="my_blank">&nbsp;</td> */
.my_blank {
  padding: 0px;
  margin: 0px;
  background: #000;
  background-color: #000 !important;
  -webkit-print-color-adjust: exact;
  
  /* @@@ ver.3 : 背景画像行けるよ */
  /* bg-img */  
  background-image: url("../img/000.png");
  background-size: contain;
}
.my_blank_img, .my_answer_bg_img {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

/* メイン：入力パネルオープン時に下げる */
#my_header {
  width: 100%;
  height: 320px;
}
/* ボタン */
#view_hints {
  margin-bottom: 6px;
}

/* */
.td_btn:hover{
  cursor: pointer;  
}
/* 入力パネル *********************************************** */
#input_ans, #go_next {
  display: none;
  padding: 0px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border: solid 1px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(125, 125, 125, 0.8);
  width: 100%;
  text-align: center;
  
  backdrop-filter: saturate(180%) blur(20px);
  
}
/* 入力テーブル */
#input_table th {
  white-space: nowrap;
}
/* 入力テキスト */
.my_remark {
  font-size: 12px;
  color: #666;
  margin: 0px;
  padding: 0px;
}
/* ヒント */
#my_hint, .my_hint_list {
  text-align: left;
}
#hint_table th, #hint_table td {
  padding: 4px;
}
#hint_table th {
  white-space: nowrap;
}
/* フッター *********************************************** */
.my_footer {
  color: #999;
  font-size: small;
  margin: 0.5rem;
  margin-bottom: 1rem;
}
/* 管理用 *********************************************** */
#admin_wrapper {
  background-color: rgba(125, 125, 125, 0.4);
  text-align: center;
  padding: 20px;
  color: #009;
}
.admin_table {
  width: 80%;
  margin: 0px auto;
}
.admin_table input {
  width: 98%;
}
.admin_table td, .admin_table th {
  padding: 0.2rem;
  background: #eee;
}
.admin_table th {
  white-space: nowrap;
}
.ad_my_width {
  width: 10%;
  white-space: nowrap;
}
.my_left {
  text-align: left;
}
.ad_textarea {
  width: 98%;
  height: auto;
}
.admin_table textarea {
  width: 98%;
}
.admin_table td:last-of-type {
  text-align: left;
}
#ad_04_info td {
  color: #f00;
  text-align: center;
}
.ad_my_char {
  font-size: 14px;
  color: #00f;
  padding: 0px;
  margin: 0px;
}
.remark {
  text-align: left;
  font-size: 10px;
  white-space: nowrap;
}
.blue {
  color: #00f;
}
/* ＰＣ用 *********************************************** */
@media only screen and (min-width: 481px) {
  /*デバイスの横幅が481以上の場合:ＰＣ想定*/
  /*
  .btn {
    font-size: 14px;
    padding: 2px 14px;
  }
  */
  /* 入力テキスト */
  /*
  #my_input {
    font-size: 16px;
    width: 60%;
    border: solid 3px #ccc;
  }
  */
}
/* 開発用 *********************************************** */
#my_info {
  color: #0f0;
  background: #060;
  padding: 0.2rem 2rem;
  display: none;
}
/* ヘッダー画像用 (ver.2) *********************************************** */
#header_title {
  width: 100%;
  text-align: center;
}
.fit_img {
  max-width: 100%;
  height: auto;
}
/* 背景画像用 (ver.3) *********************************************** */
body, html {
  background: #f1f1f1 url(../img/bg.png);
}
/* レイアウト・枠線などの修正 (ver.3) *********************************************** */
#main_table_wrapper, #answer_table_wrapper, #hint_table_wrapper {
  margin: 4px;
  padding:8px;  
  border: solid 1px #666;
  background:#fff;  
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;    
  display: inline-block;
  overflow:auto;
}
#main_table,#answer_table,#hint_table,#i_nput_table{
  border:3px solid #000;
  margin:0px;
  padding:0px;
}
#input_table{
  width:100%;
  max-width:1024px;
  margin:4px auto;
  text-align: left;
}
#input_table td{
  width:1024px;
  max-width:1024px;
}
/* 正解時の表示画面（上部より表示） (ver.3) *********************************************** */
#go_next{
  font-size:100%;
  border:#ccc solid 1px;
  margin:0rem;
  padding:0rem;
  padding-top:4px;
  padding-bottom:2rem;
  line-height: 180%;
  
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(20px);
}
/* 不正解時の表示 (ver.3) *********************************************** */
.out_v3 {
  color:#f00;
  font-weight: bold;
}
/* 入力完了表示 */
#my_input_ok{
  width:10rem;
  margin:2px auto;
  
  background:#dc3545;
  color:#fff;
  
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  
  text-align: center;
  font-size:14px;
  padding:2px;
}

/* テーブルのスクロール */
.table_outer{
  width:100%;
  height:auot;
  overflow:auto;
}
/* z-index */
#input_ans{
  z-index:2000;
}
#go_next{
  z-index:2100;
}
/* z-index */
#input_ans td, #input_ans th, #input_ans {
  padding:0.25rem;
}
/* クロスワードの選択セル表示 */
.now{
  backgroud:#ff0 !important;  
  background-image: url("../img/ff0.png");
}
/**/
#go_next_close{  
  width:100%;
  max-width : 1024px;
  text-align: right;
  margin:0px auto;
}