@charset "UTF-8";

.container {
  display: grid;
  grid-template-areas:
    "db_setting db_setting"
    "variable1 variable2"
    "result result";
    grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 auto;
  margin-top: 1em;
  max-width: 760px;
}

.db_setting {
  grid-area: db_setting;
  /* その他のスタイル設定 */
}

.variable1 {
  grid-area: variable1;
  border: 2px solid #cac; /* 薄い青色のボーダー */
  border-radius: 10px; /* 角を丸くする */
  background-color: #ffffff; /* 背景色を白に */
  padding: 10px; /* 内部の余白 */
  position: relative; /* ラベルの位置指定のため */
  box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */
  max-width: 100%; /* 最大幅を設定 */
  text-align: center;
}

.variable1::before {
  content: "Tissue 1"; /* ラベルのテキスト */
  position: absolute; /* 絶対位置指定 */
  top: -10px; /* ボックスの上端からの位置 */
  left: 10px; /* ボックスの左端からの位置 */
  background: #ffffff; /* ラベルの背景色を白に */
  color: #300; /* ラベルのテキスト色をボーダーと同じ色に */
  font-weight: bold; /* テキストを太字に */
  font-size: 16px; /* テキストのサイズ */
  padding: 0 4px; /* テキストの周りの余白 */
}

.variable2 {
    grid-area: variable2;
    border: 2px solid #cac; /* 薄い青色のボーダー */
    border-radius: 10px; /* 角を丸くする */
    background-color: #ffffff; /* 背景色を白に */
    padding: 10px; /* 内部の余白 */
    position: relative; /* ラベルの位置指定のため */
    box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */
    max-width: 100%; /* 最大幅を設定 */
    text-align: center;
}
  
.variable2::before {
    content: "Tissue 2"; /* ラベルのテキスト */
    position: absolute; /* 絶対位置指定 */
    top: -10px; /* ボックスの上端からの位置 */
    left: 10px; /* ボックスの左端からの位置 */
    background: #ffffff; /* ラベルの背景色を白に */
    color: #300; /* ラベルのテキスト色をボーダーと同じ色に */
    font-weight: bold; /* テキストを太字に */
    font-size: 16px; /* テキストのサイズ */
    padding: 0 4px; /* テキストの周りの余白 */
}

.result {
  grid-area: result;
  /* その他のスタイル設定 */
}

table{
    width: auto;
    border-spacing: 0; /* セル間のスペースをなくす */
}
td{
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;

}

@media screen and (max-width: 800px) {
    .container {
        grid-template-areas:
        "db_setting"
        "variable1"
        "variable2"
        "result";
        grid-template-columns: 1fr; /* 1列の設定に変更 */
        max-width: 99%;
        padding: 0;
        margin: 0 auto;
    }
    .variable1 {
        max-width: 400px;
    }
    .variable2 {
        max-width: 400px;
    }
    h1{
        font-size: 1.5em;
        margin: 0.25em;
    }
    .mobile_small{
        font-size:0.75em;
    }
}

/*----オートフィル---*/
.autocomplete-wrapper {
    position: relative;
    padding-top: 1em;
    padding-bottom: 1em;
}

#geneName {
    box-sizing: border-box; /* ボーダーやパディングを幅に含める */
    font-size: 1em;
    padding: 0.25em;
    width: 235px;
    border: 2px solid #939;
}

.autocomplete-items {
    position: absolute;
/*    border: 1px solid #d4d4d4;*/
    border-top: none;
    z-index: 1000;
    width: 250px;
    box-sizing: border-box;
    left: 215px;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-left: 1px solid #666;
    border-bottom: 1px solid #d4d4d4;
    padding:0.25em;
}

.autocomplete-items div:hover {
    background-color: #e9e9e9;
}


/*------------選択ラジオボックス---------*/
input[type="radio"] {
    display: none;
}

input[type="radio"]:checked + label {
    color:#606;
    font-weight: bold;
    border: 2px solid #939;
    background-color: #eef;
}

label {
    color: #baa;
    border: 2px solid #edd;
    text-align: center;
    display: inline-block;
    padding: 2px 0px;
    width:47%;
    max-width: 240px;
    margin-top: 4px;
}

label.narrow1 {
    width:45%;
    max-width: 160px;
}

label.narrow2 {
    width:30%;
    max-width: 110px;
}

label:hover {
    color: #c6a;
    border: 2px solid #c6a;
    cursor: pointer;
}

/* チェックボックスを非表示にする */
input[type="checkbox"] {
    display: none;
}

/* チェックされたチェックボックスに隣接するラベルのスタイル */
input[type="checkbox"]:checked + label {
    color:#606;
    font-weight: bold;
    border: 2px solid #939;
    background-color: #eef;
}