@charset "UTF-8";
/******************************************************************************/
/* 共通
/******************************************************************************/
* {
  margin: 0px;
  padding: 0px;
  font-family: "Noto Sans JP", sans-serif;
  /* font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif; */
  box-sizing: border-box;
  word-wrap: break-word;
}

header,
main,
footer {
  /* min-width: 1150px; */
  min-width: 1000px;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  font-size: 15px;
  line-height: 1.7;
}

pre {
  width: 100%;
}

input {
  border-width: 1px;
  border-color: #17184b;
}

input[type="password"] {
  color: #17184b;
}

input:focus-visible {
  outline-color: #17184b;
}

/*** ボタン基本デザイン ***/
.btn {
  display: inline-block;
  padding: 6px 0px;
  margin: 5px;
  color: #444;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 1px solid #adadad;
  border-radius: 4px;
  text-shadow: 0 1px 0 #fff;
  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
  background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
  background-repeat: repeat-x;
  border-color: #dbdbdb;
  border-color: #ccc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}

.btn:link,
.btn:visited {
  color: #444;
}

/*** ボタンにカーソルを合わせた時のデザイン ***/
.btn:hover {
  background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #ccc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ccc));
  background-image: linear-gradient(to bottom, #f7f7f7 0%, #ccc 100%);
  color: #333;
  border-color: #adadad;
}

/*** ボタンの大きさ ***/
.btn-s {
  width: 50px;
}

.btn-m {
  width: 100px;
}

.btn-l {
  width: 150px;
}

.btn-ll {
  width: 200px;
}

/*** 要素の位置 ***/
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/*** フォントの太さ ***/
.font-weight-bold {
  font-weight: bold;
}

/*** 要素の配置 ***/
.flex {
  display: flex;
}

.flex-space-between {
  justify-content: space-between;
}

/*** モーダルデザイン ***/
#modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(45,45,45, 0.5);
  width: 100vw;
  height: 100vh;
}

.modal {
  display: none;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-right: -50%;
  padding: 20px;
  border: 1px solid #17184b;
  color: #17184b;
}

.modal p {
  margin-bottom: 15px;
}

.modal .modal-key {
  display: none;
}

.modal .btn-box {
  //margin-top: 15px;
  text-align: center;
}

.modal .btn {
  display: inline-block;
  padding: 3px 0px;
  margin: 5px;
  color: #17184b;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  border: 1px solid #17184b;
  border-radius: 4px;
  text-shadow: 0 1px 0 #fff;
  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
  background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
  background-repeat: repeat-x;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

.btn-w-80 {
  width: 80px;
}

/*** パスワードの表示非表示アイコン ***/
.wrap-password {
  position: relative;
}
   
.toggle-password{
  position:absolute;
  top:50%;
  right: 10px;
  transform: translateY(-50%);
  width: 2rem;
}

/******************************************************************************/
/* ヘッダー
/******************************************************************************/
/*** ログイン前 */
#before-login-header {
  height: auto;
  padding: 1rem;
  color: #ffffff;
}

/*** ログイン後 ***/
header {
  position: fixed;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #17184b;
  width: 100%;
  height: 118px;
  line-height: 1.5;
}

header #logo {
  padding-left: 5px;
}

header #logo img {
  width: 250px;
  pointer-events: none;
}

header .login-user-info {
  padding-left: 2rem;
  color: #ffffff;
}

header .login-user-info .logout-btn {
  display: inline-block;
  background-color: #f0f0f0;
  padding: 0.1rem 0.5rem;
  border: solid 1px #17184b;
  border-radius: 4px;
  color: #17184b;
}

header .login-user-info .logout-btn:hover {
  background-color: #17184b;
  border: solid 1px currentColor;
  color: #fff;
}

header > div:nth-child(1) {
  display: flex;
  align-items: center;
}

#header > div:nth-child(2) {
  display: flex;
  justify-content: space-around;
  width: 30%;
  max-width: 420px;
  margin-top: 10px;
}

header > div:nth-child(2) > div {
  text-align: center;
  color: #fff;
}

header > div:nth-child(2) > div a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  padding: 5px 0px;
  text-decoration: none;
  color: #fff;
}

header > div:nth-child(2) img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

header > div:nth-child(2) .menu-text {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  font-size: 14px;
}

header > div:nth-child(2) a:hover {
  background-color: #ffffff;
  color: #17184b;
}

header > div:nth-child(2) a:hover .default-img,
header > div:nth-child(2) a .hover-img {
  display: none;
}

header > div:nth-child(2) a .default-img,
header > div:nth-child(2) a:hover .hover-img {
  display: inline-block;
}

header #user-info {
  margin-right: 10px;
  color: #fff;
}

header .text-truncate {
  width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

header .text-truncate .tooltip-text {
  display: none;
}

header .text-truncate:hover {
  overflow: visible;
  color: #17184b;
}

header .text-truncate:hover .tooltip-text {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  width: auto;
  min-width: 225px;
  background-color: #17184b;
  box-shadow: 0px 0px 0px 2px #cccccc;
  border-radius: 5px;
  color: #fff;
  padding: 0px 5px;
  white-space: nowrap;
}

/******************************************************************************/
/* フッター
/******************************************************************************/
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #17184b;
  margin-top: auto;
  color: #fff;
}

footer .copyright {
  text-align: center;
  margin-bottom: 0px;
}
/******************************************************************************/
/* メイン
/******************************************************************************/
/*** ヘッダーの高さ分下げる ***/
.margin-top-header {
  margin-top: 117px;
}

/*** リロードボタンのデザイン ***/
.reload-btn {
  display: inline-block;
  background: none;
  background-color: #028760;
  width: 200px;
  padding: 15px 0px;
  border-radius: 50px;
  font-size: 1.2em;
  color: #fff;
}

/*** スクロールを常に表示 ***/

/*** テーブル ***/
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  word-break: break-all;
  overflow: hidden;
  margin-bottom: 20px;
}

th, td {
  padding: 5px;
  vertical-align: top;
  border: 1px solid #b9b9b9;
}

table thead tr td {
  text-align: center;
}

table thead tr {
  background-color: #f5f5f5;
  font-weight: bold;
}

table thead .th-delete {
  width: 80px;
}

table thead .th-username {
  width: 100px;
}

table thead .th-datetime {
  width: 210px;
}

table thead .th-file {
  width: 300px;
}

/*** analyse-detail テーブルのデザイン ***/
#analyse-detail {
    border-color: rgb(23, 24, 75);
    overflow: visible;
}

#analyse-detail th,
#analyse-detail td {
    border-color: rgb(23, 24, 75);
    vertical-align: middle;
}

#analyse-detail thead tr {
    background-color: transparent;
}

#analyse-detail thead tr th {
  position: sticky;
  top: 117px;
  background-color: rgb(202, 213, 236);
  text-align: center;
}

#analyse-detail tbody td:last-child {
  text-align: center;
} 

#analyse-detail tbody tr td:first-child {
  text-align: center;
}

#analyse-detail .input-name {
  padding: 0;
}

#analyse-detail .input-name > div {
  padding: 0 5px;
}

#analyse-detail .input-name > div:nth-child(2) {
  border-top: 1px solid rgb(23, 24, 75);
}

/* キャンセル・ログ・ダウンロードボタンの表示の制御 */
/* パターン：キャンセル */
#analyse-detail tbody tr[data-stat-pat="Cancel"] td .text-log,
#analyse-detail tbody tr[data-stat-pat="Cancel"] td .btn-log,
#analyse-detail tbody tr[data-stat-pat="Cancel"] td .btn-download {
  display: none;
}

#analyse-detail tbody tr[data-stat-pat="Cancel"] td .cancel {
  display: inline-block;
}

/* パターン：ダウンロード */
#analyse-detail tbody tr[data-stat-pat="Download"] td .cancel,
#analyse-detail tbody tr[data-stat-pat="Download"] td .btn-log {
  display: none;
}

#analyse-detail tbody tr[data-stat-pat="Download"] td .btn-download {
  display: inline-block;
}

/* パターン：None */
#analyse-detail tbody tr[data-stat-pat="None"] td .slash,
#analyse-detail tbody tr[data-stat-pat="None"] td .cancel,
#analyse-detail tbody tr[data-stat-pat="None"] td .btn-log,
#analyse-detail tbody tr[data-stat-pat="None"] td .btn-download {
  display: none;
}

/* パターン：ログ */
#analyse-detail tbody tr[data-stat-pat="Log"] td .cancel,
#analyse-detail tbody tr[data-stat-pat="Log"] td .btn-download {
  display: none;
}

#analyse-detail tbody tr td .text-log {
  display: inline-block;
  white-space: pre-wrap;
}

/* Coreエラーの時はLogを非表示 */
#analyse-detail tbody tr[data-stat="9"] td .text-log {
  display: none;
}

#analyse-detail tbody tr[data-stat-pat="Log"] td .btn-log {
  display: inline-block;
}

/* 削除ボタン */
/* ステータスが初期(0)、ファイルチェック済(1)または処理中(2) 以外の場合は、削除ボタンを表示 */
#analyse-detail tbody tr:not([data-stat="0"]):not([data-stat="1"]):not([data-stat="2"]) td .btn-delete {
  display: inline-block;
}

/* ステータスが初期(0)、ファイルチェック済(1)または処理中(2) の場合は、削除ボタンを非表示 */
#analyse-detail tbody tr[data-stat="0"] td .btn-delete,
#analyse-detail tbody tr[data-stat="1"] td .btn-delete,
#analyse-detail tbody tr[data-stat="2"] td .btn-delete {
  display: none;
}

/*** アイコン ***/
.icon {
  width: 40px;
  vertical-align: middle;
}

.icon:hover {
  cursor: pointer;
  opacity: 0.7;
}

.delete-icon {
 width: 30px;
}

/*** Resultセル ***/
.error-msg {
  font-weight: bold;
  color: red;
}

.result {
  text-align: center;
}

.result img {
  width: 60px;
}

/*** モーダル ***/
.modal,
.modal .btn-box .btn,
.modal .btn-box .btn:hover {
  border-radius: 10px;
}

/* expired-message */
.expired-message {
  text-align: center;
  border: solid 1px #17184b;
  margin: 100px auto;
  padding: 5rem;
  font-size: 1.2em;
  color: #17184b;
}

.alert {
  text-align: center;
  padding: 3rem;
  border: solid 1px;
  font-weight: bold;
  background-color: red;
  color: white;
}

.alert-msg {
  font-size: 1.8rem;
}

.submit-btn {
  font-size: 1rem;
  padding: 10px 25px;
  border-radius: 5px;
}

/* 入力必須エラーメッセージ */
.invalid-feedback {
  color: red;
}

/* 共通 */
h1 {
  border-bottom: solid 3px #17184b;
  margin-bottom: 20px;
}

.small-icon {
  width: 20px;
}

.d-none {
  display: none;
}

button {
  cursor: pointer;
}

main > *:not(.margin-top-header) {
  color: #17184b;
}

/* login */ 
.login {
  width: 410px;
  margin: 210px auto;
  padding: 30px;
  border: solid 1px;
  border-radius: 5px;
}

.login.lock-error {
  width: 550px;
}

.login .errors {
  margin-bottom: 16px;
}

.login table {
  overflow: auto;
}

.login table tr td:nth-child(1) {
  width: 160px;
}

.login table tr td:nth-child(2) {
  vertical-align: middle;
}

.login table tr td:nth-child(2) > input {
  width: 100%;
  color: #17184b;
}

.login table tr td{
  border: none;
}

.login-btn-parent {
  text-align: center;
}

.login-btn {
  width: 90px;
  padding: 5px 0;
  border: 1px solid #17184b;
  border-radius: 4px;
  color: #17184b;
}

.login-btn:hover {
  background-color: #17184b;
  border-radius: 4px;
  color: #ffffff;
}
/* info */
iframe {
  width: 100vw;
  height: 100vh;
}

.cursor-default {
  cursor: default !important;
}

.col {
  max-width: 100%;
  padding: 12px 40px 12px 0px;
  text-align: end;
}

.col-btn {
  width: 90px;
  padding: 12px 4px;
}

.info-file-list,
.error-box {
  max-width: 920px;
  margin: 10rem auto 5rem auto;
}

.info-file-list.table-narrow {
  max-width: 400px;
}

.info-file-list td {
  border: none;
  vertical-align: middle;
}

.info-file-list td a {
  display: inline-block;
  width: 100%;
  min-width: auto;
  padding: 3px;
  border-radius: 5px;
  text-align: center;
}

.mdl-wrapper {
  padding: 1rem;
}

.mdl-wrapper .mdl {
  max-width: 1200px;
  box-shadow: 0.5rem 0.5rem 0.5rem #cccccc;
  margin: 0 auto;
  border: solid 1px #17184b;
  border-radius: 0.5rem;
}

.mdl-wrapper .mdl .mdl-header {
  padding: 0.3rem;
  border-bottom: solid 1px #17184b;
  text-align: center;
}

.mdl-wrapper .mdl .mdl-header .btn-close {
  display: inline-block;
  min-width: 12rem;
  padding: 0.5rem 2rem;
}

.mdl-wrapper .mdl .mdl-body {
  height: calc(100vh - 14rem);
  overflow: auto;
  padding: 1rem;
}

.mdl-wrapper .mdl .mdl-body .info-text {
  font-family: "Noto Sans Mono", monospace;
}

.gamess-installation #step-2 .e2 {
  padding: 0rem;
}

.license-environment #step-3 .e2 {
  height: calc(100vh - 19rem);
  padding: 0rem;
}

.license-environment #step-3 .e2 .license-agreement {
  height: calc(100% - 6rem);
  margin-bottom: 0rem;
}

/* management, info */
.menu-box {
  width: 650px;
  margin: 10rem auto 5rem auto;
}

.menu-main-content {
  padding-left: 20px;
  border-bottom: solid 1px #767676;
}

.menu-box ul {
  margin-left: 3rem;
}

.menu-box > div:first-child {
  margin-bottom: 2.5rem;
}

.menu-box ul li {
  list-style: none;
  margin: 10px 0;
  cursor: pointer;
}

/* management*/
#management .menu-box li {
  display: inline-block;
  cursor: auto;
}

#management .menu-box li div {
  display: inline-block;
  cursor: pointer;
}

#management .menu-box li div a {
  display: block;
  color: #17184b;
}

#management .menu-box li div {
  padding: 10px;
}

#management .menu-box li .user-management {
  padding: 0px;
}

#management .menu-box li .user-management a {
  padding: 10px;
}

.info-file-list td a {
  color: #17184b;
}

#management .menu-box li div:hover,
#management .menu-box li div a:hover,
.info-file-list td a:hover,
.mdl-wrapper .mdl .mdl-header .btn-close:hover {
  background-color: #17184b;
  border-radius: 5px;
  color: #fff;
}

.del-warning-text .warning {
  color: red;
  font-size: 20px;
}

#modal-cancel p,
#modal-delete p,
#modal-result p {
  color: #17184b;
}
/* gamess */
#step0 {
  width: 80%;
  margin: 0 auto;
}

#step0 > ul {
  list-style-type: none;
  display: flex;
}

.tab-lang {
  padding: 5px 100px;
  border: solid 1px #17184b;
  background-color: #ccc;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}

#step0 > ul .active {
  color: #fff;
  background-color: #17184b;
}

.tab-body > div{
  min-height: 600px;
  overflow-y: scroll;
  padding: 10px;
  border: solid 1px #17184b;
}

#tab-en-body {
  display: none;
}

.choice-btn {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.choice-btn > div {
  cursor: pointer;
  border-radius: 5px;
  padding: 5px 50px;
  margin: 0 5px;
  border: solid 1px #17184b;
}

#btn-agree {
  background-color: #8AC75A;
  color: #fff;
}

#btn-close {
  background-color: #ccc;
}

/* users list */
.users {
  width: 1200px;
  margin: 0 auto;
  max-width: 100%;
  min-width: 1000px;
  margin: 0 auto;
}

.users .midashi {
  display: flex;
  align-items: center;
  height: 105px;
}

.users h1 {
  margin-right: 20px;
  margin-bottom: 0px;
  border: none;
  white-space: nowrap;
}

.user-btn {
  width: 162px;
  padding: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  border: 1px solid #17184b;
  border-radius: 4px;
}

.user-btn:hover {
  background-color: #17184b;
  color: #fff;
  font-weight: normal;
}

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

a:visited {
  color: #000;
}

.users-list {
  display: inline-block;
  position: relative;
  max-height: calc(100vh - 290px);
  overflow: auto;
}

.users-list table {
  width: auto;
  table-layout: fixed;
  overflow: auto;
  margin: 0px;
}

.users-list th {
  position: -webkit-sticky;
  position : sticky;
  top: 0px;
  background-color: rgb(202, 213, 236);
  /* Use box-shadow to simulate borders that stick with the header */
  box-shadow: inset 0 1px 0 #17184b, inset 0 -1px 0 #17184b;
  /* Suppress native borders to avoid double lines */
  border-top: hidden;
  border-bottom: hidden;
}

.users-list th,
.users-list td {
  border-color: #17184b;
}

.users .users-list tr th:nth-child(1) {
  width: 50px;
}

.users .users-list tr th:nth-child(4),
.users .users-list tr th:nth-child(5),
.users .users-list tr th:nth-child(6) {
  width: 70px;
}

.users .users-list tr th:nth-child(2),
.users .users-list tr th:nth-child(3) {
  width: 300px;
}

.users .users-list tr td:nth-child(1),
.users .users-list tr td:nth-child(4),
.users .users-list tr td:nth-child(5),
.users .users-list tr td:nth-child(6) {
    text-align: center;
}

.users .users-list tr td {
  vertical-align: middle;
}


#modal-delete-user-all p,
#modal-delete-user p {
  color: #17184b;
}
/* users edit */
.user-edit {
  width: 1000px;
  margin: 0 auto;
}

.user-edit form {
  width: 600px;
}

.user-edit input:not([type="checkbox"]) {
  width: 100%;
}

.user-edit table {
  overflow: auto;
}

.user-edit table tr td:nth-child(1) {
  width: 150px;
}

.user-edit table tr td:nth-child(2) {
  width: 450px;
}

.user-edit table tr td{
  border: none;
}

.user-regist .masked,
.user-edit .masked {
  position: relative;
}

.user-regist .masked::before,
.user-edit .masked::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  opacity: 0.5;
  z-index: 10;
}

.user-edit-btn {
  text-align: center;
}

.edit-btn {
  width: 90px;
  padding: 5px 0;
}

/*** setup ***/
/* 共通 */
.setup-body * {
  font-family: "Arial";
}

.user-regist {
  width: 1000px;
  margin: 0rem auto;
  padding-bottom: 1.6rem;
}

#setup {
  width: 100%;
  max-width: 1200px;
  margin: 0rem auto;
  padding: 0rem 5px 1.6rem;
}

#setup .margin-top-header,
.user-regist .margin-top-header {
  margin-top: 5rem;
}

#setup .text-red,
.user-regist .text-red {
  color: #ff0000;
}

#setup .text-navy,
.user-regist .text-navy {
  color: #17184b;
}

#setup h2,
.user-regist h2 {
  padding: 0.7rem 0rem;
  font-size: 1.7rem;
  line-height: 1;
}

.navy-btn:visited {
  color: #fff;
}

#setup button,
.license-agreement button,
.navy-btn,
.user-regist button,
.btn-box .btn:hover {
  display: inline-block;
  min-width: 12rem;
  background-color: #17184b;
  padding: 0.5rem 2rem;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

.btn-box .btn:hover {
  min-width: auto;
  background-image: none;
  padding: 3px 0px;
}

#setup button:disabled,
#setup .disabled,
.user-regist button:disabled,
.user-regist .disabled {
  min-width: 12rem;
  cursor: default !important;
  opacity: 40%;
}

#step-1 > div,
#step-2 .e2 > div,
#step-3 .e2 > div,
#step-4 .column-input > div,
.user-regist .column-input > div,
#step-5 > div {
  margin-bottom: 1rem;
}

/* step-1 */
#step-1 ol {
  padding-left: 1rem;
}

/* step-2 */
#step-2 > div {
  margin-bottom: 2rem;
}

.gray-btn {
  display: inline-block;
  padding: 0.5rem 2rem;
  border: solid 0.1rem #17184b;
  border-radius: 5px;
  background-color: #eeeeee;
  cursor: pointer;
}

#step-2 .choose-file input {
  display: none;
}

#step-2 .back-step {
  background-color: #fff;
  border: solid 2px #17184b;
  color: #17184b;
}

/* step-3 */
#step-3 h2 {
  text-align: center;
}

.disp-license .e2 {
  height: calc(100vh - 10rem);
  padding: 0rem 2rem;
}

#step-2 .e2 {
  height: auto;
}

.disp-license .e2 .license-agreement {
  height: calc(100% - 13rem);
  min-height: 8rem;
  overflow-y: auto;
  margin-bottom: 2rem;
  border: solid 0.1rem #17184b;
}

#step-2 .e2 .license-agreement {
  height: auto;
  min-height: auto;
  overflow-y: visible;
}

.disp-license .e2 .license-agreement table {
  overflow: auto;
  margin-bottom: 0rem;
}

.disp-license .e2 .license-agreement table th {
  position: -webkit-sticky;
  position : sticky;
  top: 0px;
  left: 0rem;
  background-color: #f5f5f5;
}

.disp-license .e2 .license-agreement table th:after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #b9b9b9;
}

.disp-license .e2 .license-agreement table .col-software-package {
  width: 17rem;
}

.disp-license .e2 .license-agreement table .col-narrow {
  width: 5rem;
}

.disp-license .e2 .license-agreement table .v-middle {
  vertical-align: middle;
}

.disp-license .icon-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.disp-license .icon-info img {
  width: 1.7rem;
  cursor: pointer;
}

.disp-license .modal-body {
  max-width: 80vw;
  max-height: calc(80vh - 100px);
  overflow: auto;
  margin-bottom: 1rem;
}

.disp-license .modal-body > div:not(:last-child) {
  margin-bottom: 1rem;
}

.disp-license .modal-body pre {
  padding: 0rem 1rem;
}

#step-3 #agree input[type="checkbox"] {
  accent-color: #17184b;
}

/* step-4 */
#step-4 {
  margin: 0rem auto;
}

#step-4 .column-input,
.user-regist .column-input {
  flex-grow: 1;
  padding-right: 1rem;
}

#step-4 .column-conditions,
.user-regist .column-conditions {
  width: 55%;
  padding-top: 0.4rem;
}

#step-4 input:not([type="radio"]):not([type="checkbox"]),
#step-4 .input-layout,
.user-regist input:not([type="radio"]):not([type="checkbox"]),
.user-regist .input-layout {
  width: 100%;
  font-size: 1.2rem;
}

#step-4 .input-layout,
.user-regist .input-layout {
  padding: 0rem 1px;
}

#step-4 .generate-password-btn,
.user-regist .generate-password-btn {
  width: auto;
  font-size: 0.9rem;
}

/* step-5 */
#step-5 a {
  width: 18rem;
  display: block;
  margin: 0 auto;
  background: #17184b;
  padding: 0.4rem 0rem;
  border-radius: 5px;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
}

/* loading */
@keyframes spin {
  from{
    transform: rotateZ(0deg);         /* アニメーション開始状態 */
  }
  to{
    transform: rotateZ(360deg);       /* アニメーション終了状態 */
  }
}

.loading {
  width: 50px;                        /* 横幅 */
  height: 50px;                       /*  高さ */
  margin: 0rem auto;
  border: 10px solid #dddddd;       /* 線(上下左右)の太さ,形,色 */
  border-top-color: #aaaaaa;        /* 線(上)の色 */
  border-radius: 50%;                 /* 円形 */
  animation: 1s spin infinite linear; /* アニメーション指定(1秒1回転で一定の速度で永遠回るように指定) */
}