.main{
  height: 100%;
}

form{
  height: 100%;
}

.tag{
  display: inline-block;
}

.tag_input{
  float: right;
  margin:20px 10px -10px 0px;
}

.button_area{
  float: right;
  margin-top: 20px;
}

.input_area{
  margin:0px 10px 0px 10px;
  padding:10px;
  border:2px solid rgb(85, 78, 78);
  overflow-x:hidden;
  overflow-y:scroll;
}

.input_info{
  width:50%;
  margin-top: -38px;
  height: 100%;
}

.pdf_view{
  margin:10px;
  padding:10px;
  border:2px solid black;
  width:50%;
  overflow-y:scroll;
}

.resume_input{
  display: flex;
  width: 100%;
  height: 100%;
}

#line{
  border:2px solid black;
}

/* 入力フォームタブ切り替え*/
input[name="tab_btn"]{
  display:none;
}

.tab_area{
  font-size:0;
  margin:0px 0px 0px 10px;
}

.tab_area label{
  width:calc(100%/4.05);
  margin:0px;
  display:inline-block;
  padding:12px 0;
  color:#000;
  background:#FFF;
  text-align:center;
  font-size:15px;
  cursor:pointer;
  transition:ease 0.2s opacity;
  border: solid 1px;
  border-top-left-radius:10px 10px;
  border-top-right-radius:10px 10px;
}

.tab_area label:hover{
  opacity:0.5;
}

.input_area{
  background:#fff;
}

.tab_panel{
  width:100%;
  padding:20px 0;
  display:none;
}

#personal_info_tab:checked ~ .tab_area .personal_info_tab_label{
  background:#C0C0C0;
  color:#000;
}

#personal_info_tab:checked ~ .input_area #personal_info{
  display:block;
}

#skill_level_tab:checked ~ .tab_area .skill_level_tab_label{
  background:#C0C0C0;
  color:#000;
}

#skill_level_tab:checked ~ .input_area #skill_level{
  display:block;
}

#desired_condition_tab:checked ~ .tab_area .desired_condition_tab_label{
  background:#C0C0C0;
  color:#000;
}

#desired_condition_tab:checked ~ .input_area #desired_condition{
  display:block;
}

#business_experience_tab:checked ~ .tab_area .business_experience_tab_label{
  background:#C0C0C0;
  color:#000;
}

#business_experience_tab:checked ~ .input_area #business_experience{
  display:block;
}

/* テキストエリアのリサイズを許可しない */
textarea {
  resize: none;
}

.preview_title{
  background-color: #009900;
  color: white;
  font-weight: bold;
  border:solid 1px black;
}
.preview_bold{
  background-color: #EEEEEE;
  font-weight: bold; 
  border:solid 1px black;
}

/* レスポンシブデザイン */

/*                               */
/* 入力エリア、PDFプレビューの高さ */
/*                              */

@media screen and (min-height: 600px) and (max-height: 635px){ 
  .input_area{
    height: 77%;
  }

  .pdf_view{
    height: 77%;
  }
}

@media screen and (min-height: 636px) and (max-height: 670px){ 
  .input_area{
    height: 78%;
  }

  .pdf_view{
    height: 78%;
  }
}

@media screen and (min-height: 671px) and (max-height: 700px){ 
  .input_area{
    height: 79%;
  }

  .pdf_view{
    height: 79%;
  }
}

@media screen and (min-height: 701px) and (max-height: 735px){ 
  .input_area{
    height: 80%;
  }

  .pdf_view{
    height: 80%;
  }
}

@media screen and (min-height: 736px) and (max-height: 770px){ 
  .input_area{
    height: 81%;
  }

  .pdf_view{
    height: 81%;
  }
}

@media screen and (min-height: 771px) and (max-height: 800px){ 
  .input_area{
    height: 82%;
  }

  .pdf_view{
    height: 82%;
  }
}

@media screen and (min-height: 801px) and (max-height: 835px){ 
  .input_area{
    height: 83%;
  }

  .pdf_view{
    height: 83%;
  }
}

@media screen and (min-height: 836px){
  .input_area{
    height: 84%;
  }

  .pdf_view{
    height: 84%;
  }
}

@media screen and (max-width: 939px){ 
  .input_area{
    height: 74%;
  }

  .pdf_view{
    height: 74%;
  }
}

@media screen and (max-width: 939px) and (min-height: 600px) and (max-height: 635px){ 
  .input_area{
    height: 68%;
  }

  .pdf_view{
    height: 68%;
  }
}

@media screen and (max-width: 939px) and (min-height: 636px) and (max-height: 660px){ 
  .input_area{
    height: 69%;
  }

  .pdf_view{
    height: 69%;
  }
}

@media screen and (max-width: 939px) and (min-height: 661px) and (max-height: 690px){ 
  .input_area{
    height: 70%;
  }

  .pdf_view{
    height: 70%;
  }
}

@media screen and (max-width: 939px) and (min-height: 691px) and (max-height: 720px){ 
  .input_area{
    height: 71%;
  }

  .pdf_view{
    height: 71%;
  }
}

@media screen and (max-width: 939px) and (min-height: 765px) and (max-height: 800px){ 
  .input_area{
    height: 75%;
  }

  .pdf_view{
    height: 75%;
  }
}

@media screen and (max-width: 939px) and (min-height: 801px) {
  .input_area{
    height: 77%;
  }

  .pdf_view{
    height: 77%;
  }
}

/*                            */
/* タグ・設定完了・取り消しボタン*/
/*                             */
/* 横幅800px～1000px */
@media screen and (min-width: 800px) and (max-width: 1000px){ 
  #tag_info{
    width: 140px;
  }

  .button_area{
    margin-right: 10px;
  }
}

/* 横幅1001px～1200px */
@media screen and (min-width: 1001px) and (max-width: 1200px){ 
  #tag_info{
    width: 200px;
  }

  .button_area{
    margin-right: 20px;
  }

  .undo_btn{
    margin-right: 10px;
    margin-left: 20px;
  }
}

/* 横幅1201px～1400px */
@media screen and (min-width: 1201px) and (max-width: 1400px){ 
  #tag_info{
    width: 250px;
  }

  .button_area{
    margin-right: 30px;
  }

  .undo_btn{
    margin-right: 20px;
    margin-left: 30px;
  }
}

/* 横幅1401px以上 */
@media screen and (min-width: 1401px){ 
  #tag_info{
    width: 300px;
  }

  .button_area{
    margin-right: 50px;
  }

  .undo_btn{
    margin-right: 40px;
    margin-left: 45px;
  }
}

/*                            */
/* 資格情報                    */
/*                             */

/*ウィンドウ幅が1200pxまでの場合に適用*/
@media screen and (max-width: 1200px) { 
  #qualified_form_thead td:nth-child(1){
    width:400px;
  }
  #qualified_form_thead td:nth-child(2){
    width:380px;
  }
}

/*ウィンドウ幅が951px以上に適用*/
@media screen and (min-width: 951px) { 
  .qualified_dalete_btn{
    width:80px;
  }
}

/*ウィンドウ幅が950pxまでの場合に適用*/
@media screen and (max-width: 950px) { 
  #qualified_form_thead td:nth-child(2){
    width:615px;
  }

  .qualified_dalete_btn{
    width:60px;
  }

  .skill_delete_dialog_btn{
    margin-right: 35px;
  }

  .skill_add_btn{
    margin-right: 30px;
  }
}

/*                            */
/* 希望条件等                  */
/*                             */

/*ウィンドウ幅が1600px以上に適用*/
@media screen and (min-width: 1600px) { 

  #direction_i{
    width: 700px;
  }

  #working_area_i{
    width: 700px;
  }

  #working_conditions_i{
    width: 700px;
  }

  .project_list_period{
    padding-left: 450px;
  }

  #project_add_btn{
    margin-left: 80%;
  }
}

/*ウィンドウ幅が1600pxまでの場合に適用*/
@media screen and (max-width: 1600px) { 

  #direction_i{
    width: 500px;
  }

  #working_area_i{
    width: 500px;
  }

  #working_conditions_i{
    width: 500px;
  }
}

/*ウィンドウ幅が1150pxまでの場合に適用*/
@media screen and (max-width: 1150px) { 
  
  #direction_i{
    width: 300px;
  }

  #working_area_i{
    width: 300px;
  }

  #working_conditions_i{
    width: 300px;
  }
}

/*                            */
/* スキル情報                  */
/*                             */

/*ウィンドウ幅が1201px以上に適用*/
@media screen and (min-width: 1201px) { 
  .skill_delete_dialog_btn{
    margin-right: 150px;
  }

  .skill_add_btn{
    margin-right: 70px;
  }
}

/*ウィンドウ幅が951px以上,1200px以下に適用*/
@media screen and (min-width: 951px) and (max-width: 1200px){ 
  .skill_delete_dialog_btn{
    margin-right: 100px;
  }

  .skill_add_btn{
    margin-right: 50px;
  }
}

/*                            */
/* 業務経歴                    */
/*                             */

/* プロジェクト開始、終了期間 */
/*ウィンドウ幅が800px以上,850px以下に適用*/
@media screen and (min-width: 800px) and (max-width: 850px){ 
  .project_list_period{
    padding-left: 6%;
  }
}

/*ウィンドウ幅が851px以上,900px以下に適用*/
@media screen and (min-width: 851px) and (max-width: 900px){ 
  .project_list_period{
    padding-left: 12%;
  }
}

/*ウィンドウ幅が901px以上,950px以下に適用*/
@media screen and (min-width: 901px) and (max-width: 950px){ 
  .project_list_period{
    padding-left: 21%;
  }
}

/*ウィンドウ幅が951px以上,1000px以下に適用*/
@media screen and (min-width: 951px) and (max-width: 1000px){ 
  .project_list_period{
    padding-left: 25%;
  }
}

/*ウィンドウ幅が1001px以上,1100px以下に適用*/
@media screen and (min-width: 1001px) and (max-width: 1100px){ 
  .project_list_period{
    padding-left: 30%;
  }
}

/*ウィンドウ幅が1101px以上,1200px以下に適用*/
@media screen and (min-width: 1101px) and (max-width: 1200px){ 
  .project_list_period{
    padding-left: 38%;
  }
}

/*ウィンドウ幅が1201px以上,1400px以下に適用*/
@media screen and (min-width: 1201px) and (max-width: 1400px){ 
  .project_list_period{
    padding-left: 43%;
  }
}

/*ウィンドウ幅が1401px以上,1599px以下に適用*/
@media screen and (min-width: 1401px) and (max-width: 1599px){ 
  .project_list_period{
    padding-left: 55%;
  }
}

/*ウィンドウ幅が1600px以上,1650px以下に適用*/
@media screen and (min-width: 1600px) and (max-width: 1650px){ 
  .project_list_period{
    padding-left: 58%;
  }
}

/* プロジェクト登録ボタン */
/*ウィンドウ幅が1000px以上,1599px以下に適用*/
@media screen and (min-width: 1100px) and (max-width: 1599px){ 
  #project_add_btn{
    margin-left: 70%;
  }
}

/*ウィンドウ幅が800px以上,1099px以下に適用*/
@media screen and (min-width: 800px) and (max-width: 1099px){ 
  #project_add_btn{
    margin-left: 55%;
  }
}

/*ウィンドウ幅が800px以下に適用*/
@media screen and (max-width: 800px){ 
  #project_add_btn{
    margin-left: 55%;
  }
}