body{
    background-color: #9fca99;
}

.page-header {
    display: flex;
    justify-content: space-between;
}

.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

.container {
    display: grid;
    gap: 10px;
    grid-template-rows: min-content max-content;
}

.upper-container {
    display: grid;
    grid-template-columns: 4fr 5fr;
}

.lower-container {
    display: flex;
    justify-content: space-between;
}

/*説明エリア*/
#explain-area {
    width: 250px;
}

/*日本語カード*/
.card-img {
    width: 80px;
    height: 120px;
}

/*英語カード*/
.draggable-card-img {
    width: 100px;
    height: 150px;
}

/*正解画像*/
#seikai {
    display: block;
    width: 200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

/*
.phase-area {
    grid-row: 1/1;
}
*/

.drop-area {
    /*grid-row: 1/3;*/
    margin: 50px;
    float: right;
}

/*
#site-box {
    width: auto;
}

#top {
    text-align: right;
    font-size: 25px;
}
*/

#dropArea-word1, #dropArea-word2 {
  margin: 5px;
  float: right;
}

#dropArea-word1 ul, #dropArea-word1 div,
#dropArea-word2 ul, #dropArea-word2 div {
    list-style-type: none;
    margin: 5px;
    /*枠とカードの間の余白*/
    padding: 2px;
    display: inline-block;
}

.sort-drop-area {
    height: 154px;
    width: 104px;
    border-style:solid; 
    border-width:2px;
}
#dropArea-word1 .sort-drop-area,
#dropArea-word2 .sort-drop-area {
    border-color: #999;
}
#dropArea-word2 .special {
    border-color: black;
    background-color: #3E8D57;
}

/*#sort-drop-area2 {
    height: 150px;
    width: 100px;
    border-style:solid; 
    border-width:2px; 

}
#sort-drop-area3 {
    height: 150px;
    width: 100px;
    border-style:solid; 
    border-width:2px; 

}
#sort-drop-area4 {
    height: 150px;
    width: 100px;
    border-style:solid; 
    border-width:2px; 

}
#sort-drop-area5 {
    height: 150px;
    width: 100px;
    border-style:solid; 
    border-width:2px; 

}
#sort-drop-area6 {
    height: 150px;
    width: 100px;
    border-style:solid; 
    border-width:2px; 

}*/

/* 下・ドラッグ枠 */

.tabs {
  clear: both;
  width: 1060px;
  height: max-content;
  padding: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto;
  background-color: rgb(248, 185, 66);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
  
/*タブのスタイル*/
.tab_item {
  width: calc(100%/7);
  height: 50px;
  border-bottom: 2px solid black;
  background-color: rgb(248, 185, 66);
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: black;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  cursor: hand;
}
  
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
    display: none;
}
  
/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 5px;
  clear: both;
  overflow: hidden;
}
  
/*選択されているタブのコンテンツのみを表示*/
#subject:checked ~ #subject_content,
#verb:checked ~ #verb_content,
#object:checked ~ #object_content,
#extra:checked ~ #extra_content,
#fifth:checked ~ #fifth_content,
#special_effect:checked ~ #special_effect_content,
#punctuation:checked ~ #punctuation_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #d9d9d9;
  color: #fff;
}