@charset "utf-8";
/*全体*/
:root {
  --kai_w: 85%;
}


html {
  touch-action: manipulation;
  font-family: 'メイリオ';
}


body {
  width: 100%; /* コンテンツの横幅を指定する */
  overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
  padding: 0;
  margin: 10px;
  width :700px;
  margin:auto;
  }


.kaito_eria{
  margin-bottom: 10px;
}
.ans_row{
  display: flex;
  height:35px;
  margin-bottom: 4px;
  gap:10px}
  
.ans_input{
  width:150px;
  text-align: right;
  font-size:1rem}



/**************/
/*  ボタン　　*/
/**************/
.container_c {
  display: flex;
  gap: 3%;
  width:var(--kai_w);
}
.container_d{
  display: flex;
  gap: 3%;
  width:var(--kai_w);
}
.sosa_btn, #test_start{
  width:100px;
  height:40px;
}

/**************/
/*  正誤画像　　*/
/**************/
.kaito_eria{
  position:relative;
}
.kodomo{
  position: absolute;
  top: 0px;
  left: 75px;
}

/**************/
/*  BS・PLの表　*/
/**************/
#fs_table{
    box-sizing: border-box;
    border-collapse: collapse;
    width:450px;
    text-align: center; /* 全テキストを中央寄せ */

}

.fs_title{
    background-color: #191970;
    color: beige;
    border: solid 1px #191970;
}

.tb_yoso{
    border: solid 1px;
    width:20%;
    padding-top:10px;
    padding-bottom:10px;
}

.tb_blank{
    width:5%;
}

#asset_cell{
    background-color: #b9ffff;
}


#liability_cell{
    background-color: #ffff7d;
}
#expense_cell{
    background-color: #f0aa8e;
}
#revenue_cell{
    background-color: #8af08a;
}
#netasset_cell{
    background-color: #9bf5c8;
}

.yobo_btn{
    height:40px;
    width:70px;
    font-size:16px;
}



/*　画面サイズが480px以下の場合ここの記述が適用される　*/
@media screen and (max-width:480px) {
  :root {
      --kai_w: 95%;
  }
  main{
        width: 98%;
  }
  body {
        width: 98%;
  }
  
  #header{font-size:1rem;}
  #fs_table{
    width:90%

  }
  p{font-size:0.9rem}

 
  #calculator {margin:auto;}

 
  .sosa_btn, #test_start{
    width:75px;
    height:40px;
  }

  .kaisetsu_slide{ width:85vw;}
}