@charset "UTF-8";

@font-face {
  font-family: 'Roboto';
  font-weight: normal;
  src: url('/static/font/Roboto-Regular.ttf');
}

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  margin-bottom: 1rem;

  section {
    margin: 0.5rem;
    flex-grow: 1;

    &.width-1-3 {
      width: 33%;
    }

    &.width-2-3 {
      width: 66%;
    }

    .section-title {
      background-color: #b2d235;
      color: #330000;
      padding: 0.5rem 1rem;
      font-size: 1.5rem;
      border: none;
    }

    .section-contents {
      display: flex;
      justify-content: space-between;

      .card {
        background: #fff;
        width: 100%;
        height: 150px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

        &:not(:last-of-type) {
          margin-right: 1rem;
        }

        .section-content-header {
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #e0f4b6;
          padding: 0 0.5rem;

          .title {
            font-size: 0.9rem;
            font-weight: bold;
          }

          .subtitle {
            font-size: 0.8rem;
            color: #666;
            text-align: right;
          }
        }

        .section-content-body {
          width: 100%;
          display: flex;

          .section-content-body-wrap {
            width: 100%;
            padding: 0.5rem;

            .selectbox {
              width: 100%;
              position: relative;

              &::after {
                content: '▼';
                position: absolute;
                top: 50%;
                right: 0.5rem;
                transform: translateY(-50%);
                font-size: 0.7rem;
                color: #d9d9d9;
              }

              .search-dropdown {
                appearance: none;
                width: 100%;
                padding: 0.4rem 0.2rem;
                border-color: #d9d9d9;
                cursor: pointer;
              }
            }
          }
        }

        img {
          width: 60px;
          height: 110px;
          object-fit: cover;
        }

        ul {
          padding: 0.5rem 0;

          li {
            font-size: 0.85rem;
            line-height: 1.3;

            &::marker {
              color: #b4e06d;
            }

            a {
              color: #360000;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

/*================================================
 *  informationイメージ調整
 ================================================*/

#infolink {
  display: flex;
}
#infolink ul {
  width: 200px;
  margin-left: auto;
}
#infolink li {
  list-style: none;
}
div.info_sp {
  clear: both;
  border-bottom: 1px solid #ddd;
}

div.info_sp table,
td,
tr {
  border: none;
}

div.img_sp {
  float: left;
  padding: 0.5em;
  margin: 0.5em;
}
div.info_desc {
  padding: 1em;
}
div.info_clear {
  clear: both;
}

/*================================================
 *  helpイメージ調整
 ================================================*/
div.help_desc {
  padding: 1em;
  border-bottom: 1px solid #ddd;
}
div.help_desc img {
  max-width: 100%;
}
table#genome_train {
  border: 3px double;
}

table#genome_train th {
  border-bottom: 1px solid;
}

table#genome_train td {
  border: 1px solid #ddd;
}