header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
}

.logo{
  text-align: center;
}

.kekka{
  margin: 0px 150px;   /* ??????40px??? */
  padding: 0;      /* ????????(????) */
}

.t-navi_logo {
  position: absolute;
  top: 0%;
  left: 45%;
  height: 10%;
  width: 0%;
}

.subheader {
  position: absolute;
  top: 15%;
  left: 5%;
  height: 40%;
  width: 40%;
}

.result {
  position: absolute;
  top: 20%;
  left: 5%;
  height: 40%;
  width: 40%;
}


.textmuted {
  position: absolute;
  top: 15%;
  left: 5%;
  height: 32%;
  width: 53%;
}

.bar1 {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffaaaa;
  border: 0;  /*デフォルトデザインでは線がある場合があるので、消しておく。*/
}

@media (max-width: 1200px) {
  .f {
    display: none;
  }
  header {
    height: 65px;
    width: 100%;
    background-color: rgba(52, 34, 42, 0.9);
  }

  .kekka{
    margin: 0px 5px;   /* ??????40px??? */
    padding: 0;      /* ????????(????) */
  }

  .result {
    position: absolute;
    top: 20%;
    left: 5%;
  }

  .lesson-wrapper-sm .container {
    position: relative;
    max-width: 100%;
    margin: 10px 0px;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
  }

  .lesson-wrapper-sm .container > * {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    text-align: center;
  }
}

/* @media screen and (max-width: 480px) {
  .Form {
    margin-top: 40px;
  }
}
.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
} */