@import "style.css";

.method-info {
  margin: 30px 50px;
}

.method-title {
  width: 100%;
  display: inline-flex;
}

.method-title #title {
  width: auto;
  width: 100%;
  max-width: 100%;
  font-size: 3em;
  text-align: left;
  margin: 0 10px;
}

.method-info {
  width: auto;
  min-height: calc(50vh - 157.5px);
  margin-top: 20px;
  margin-bottom: 30px;
}

.method-info ol {
  padding: 10px;
  padding-left: 50px;
  line-height: 60px;
}

.method-info ol li {
  font-size: var(--main-content-size);
}

.dialog {
  min-height: 600px;
  margin: 0 60px 60px 60px;
}

.dialog-bar {
  width: 100%;
  height: 100px;
  background-color: var(--main-color);
}

.dialog #hint {
  margin: 30px 70px 30px 70px;
}

.dialog #modify, .dialog #save {
  margin: 0 50px 40px auto;
  display: inline-block;
}

.dialog #confirm {
  margin: 0 auto 40px auto;
  display: inline-block;
}




.record {
  margin: 50px;
}

.record-info {
  width: 100%;
  min-height: 91px;
  border: 3px solid var(--main-border-color);
}

.record-info #header {
  position: relative;
}

.record-info #header a {
  display: contents;
}

.record-info #left {
  width: 50%;
  height: 91px;
  color: var(--main-black);
  line-height: 1.8em;
  background-color: var(--main-background-color);
  text-align: center;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  left: 0;
}

.record-info #left:hover {
  color: var(--main-white);
  background-color: var(--main-color);
}

.record-info #right {
  width: 50%;
  height: 91px;
  color: var(--main-black);
  line-height: 1.8em;
  background-color: var(--main-background-color);
  text-align: center;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  left: 50%;
}

.record-info #right:hover {
  color: var(--main-white);
  background-color: var(--main-color);
}

#content .content-title {
  width: 100%;
  display: flex;
  text-align: left;
}

#content .content-title div {
  width: 25%;
}

#content .content-title div p {
  width: 100%;
  font-size: var(--main-content-size);
}

#content #content-list div {
  width: 25%;
}

#content #content-list div p {
  width: 100%;
  color: var(--main-dark-grey);
}

#content #content-list #list-1, #content #content-list #list-2 {
  width: 100%;
  display: flex;
}

#list-1 div {
  width: 25%;
}

#list-1 div p {
  width: 100%;
  color: var(--main-dark-grey);
  margin-bottom: 15px;
}

#list-2 {
  border-bottom: 3px solid var(--main-dark-grey);
}

#list-2 p {
  width: 50%;
  color: var(--main-dark-grey);
  margin-bottom: 15px;
}