@import url("common.css");
.buttons .button {
  width: 100%;
}

.page-visual:not(.scholarship) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 640px;
  padding: 0 var(--space-7) var(--space-20);
  color: var(--color-white);
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-bold);
  background: url("../images/online/visual-top-online@2x.png") no-repeat center/cover;
}

.page-visual:not(.scholarship) h2 {
  display: block;
  margin: 0 0 var(--space-6);
  padding: 0;
  font-size: var(--font-size-9);
}

.scholarship.page-visual {
  background: url("../images/scholarship/visual-top@2x.png") no-repeat center/cover;
}

.result-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-6);
  font-size: var(--font-size-4);
  text-align: center;
  border-top: 1px solid var(--border-darken);
}

.result-wrap h4 {
  margin: 0;
  font-size: var(--font-size-8);
}

.link-wrap a {
  position: relative;
}

.link-wrap a.icon-link::before {
  content: "";
  position: absolute;
  left: 0;
  width: var(--space-5);
  height: var(--space-5);
  background: url(../images/common/icon-link.svg);
}

.attachment {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.attachment-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
}

.attachment .badge {
  width: -moz-fit-content;
  width: fit-content;
}

.attachment-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.attachment-name span {
  word-break: break-word;
}

.attachment-name i {
  width: var(--space-5);
  height: var(--space-5);
}

.attachment-name i svg {
  width: 100%;
  height: 100%;
}

.attachment > img {
  width: 148px;
}

.attachment {
  gap: var(--space-6);
}

.title-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-button .title {
  margin: 0 !important;
}

.title-button .buttons {
  justify-self: flex-end;
}

.title-button .button {
  padding: 0;
}

.page-buttons:has(.row) {
  flex-direction: column;
}

.page-buttons .row {
  display: flex;
  flex: 1;
  gap: var(--space-2);
}

.file-upload + .file-items.only {
  margin-top: 0;
}

.test-info {
  display: flex;
  flex-direction: column;
}

.test-info dl {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.test-info dl > * {
  flex: 1 1 auto;
}

.test-info dl dt {
  width: 35%;
}

.test-info dl dd {
  width: 65%;
}

.message-wrap .list-dot .form-wrap {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-2);
}

.message-wrap .list-dot {
  width: 100%;
}

.message-wrap .list-dot .form-wrap .ox-group {
  padding: var(--space-3) 0;
}

.ox-group.col-type {
  flex-direction: column;
}

.ox-wrap.tar {
  width: 100%;
}

.ox-wrap.tar > .ox-group,
.buttons.tar {
  justify-content: flex-end;
}

.form-block.calendar {
  align-items: center;
}

.bar-text {
  display: flex;
  flex-wrap: wrap;
}

.bar-text .text-basic {
  position: relative;
  padding-right: 17px;
}

.bar-text .text-basic:not(:last-child)::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  top: 5px;
  width: 1px;
  height: 14px;
  background-color: var(--gray-4);
}

.form-block.department {
  flex-direction: column;
}

.form-block.department * {
  width: 100%;
}

.section-title:has(.ox-group) {
  align-items: center;
}

@media screen and (min-width: 768px) {
  .block-wrap {
    display: flex;
    align-items: flex-start;
  }
  .buttons .button {
    width: -moz-fit-content;
    width: fit-content;
  }
  .test-info {
    flex-direction: row;
    gap: var(--space-6);
  }
  .test-info dl {
    width: 33.33%;
  }
  .test-info dl dt, .test-info dl dd {
    width: initial;
  }
  .page-buttons {
    justify-content: flex-end;
  }
  .page-buttons .button {
    flex: inherit;
  }
  .page-buttons:has(.row) {
    flex-direction: row;
  }
  .page-buttons .row {
    flex: inherit;
  }
  .page-visual:not(.scholarship) {
    justify-content: center;
    align-items: center;
    height: 500px;
    padding: 0;
    font-size: var(--font-size-6);
    text-align: center;
    background: url("../images/scholarship/visual-top-online.png") no-repeat center/cover;
  }
  .page-visual:not(.scholarship) h2 {
    margin: 0 0 var(--space-15);
    font-size: var(--font-size-11);
  }
  .scholarship.page-visual {
    background: url("../images/scholarship/visual-top.png") no-repeat center/cover;
  }
  .attachment {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
  .attachment {
    gap: var(--space-8);
  }
  .file-upload {
    margin-top: 37px;
  }
  .title-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title-button .buttons {
    margin: 0;
  }
  .ox-group.col-type {
    flex-direction: row;
  }
  .section-title:has(.list-dot) {
    display: block;
  }
  .section-title > .list-dot {
    margin-top: var(--space-4);
  }
  .message-wrap .list-dot .form-wrap {
    flex-direction: row;
    align-items: center;
  }
  .message-wrap .list-dot .form-wrap::before {
    top: 50%;
    transform: translateY(-50%);
  }
  .message-wrap .list-dot .form-wrap > label {
    width: 260px;
  }
  .message-wrap .list-dot .form-wrap > *:not(label) {
    width: 100%;
  }
  .message-wrap .list-dot .form-wrap .ox-group {
    flex-wrap: nowrap;
  }
  .form-block.department {
    flex-direction: row;
  }
  .form-block.department input:last-child {
    width: 20%;
  }
}