@charset "utf-8";
/* ライセンスログイン画面 */
.license-login-area {
    height: auto;
    width: 100%;
}

.license-login-icon-area {
    width: 100%;
    height: 80px;
    display: flex;
}

.license-login-foam-area {
    width: 600px;
    height: auto;
    margin: 100px auto;
    text-align: center;
}

.license-login-icon-area > img {
    margin-top: 30px;
    margin-left: 40px;
}

.license-login-icon-area > span {
    margin-top: 40px;
    margin-left: 17px;
}

.license-pass-area {
    margin-top: 5px;
}

.securitycode-foam-area {
    margin-top: 40px;
}

.text {
    width: 150px;
    text-align: right;
    display: inline-block;
}

.license-authentication-alert,
.license-login-alert {
    color: red;
    margin-top: 10px;
    border-bottom: 1px solid red;
    display: none;
}

.license-authentication-alert {
    width: 45%;
}

.license-login-alert {
    width: 70%;
}

#license-userId,
#license-password,
#securitycode,
#license-provisional-userId,
#license-provisional-password {
    width: 300px;
}

.license-button-area {
    width: 120px;
    height: 60px;
    margin-left: calc(50% - 60px);
    margin-top: 20px;
}

#authenticationButton,
#licenseloginButton,
#provisional-authentication-button,
#provisional-login-button
{
    margin-left: 15px;
    width: 100%;
    height: 100%;
    background-color: #595959;
    border: solid 2px #7EFFFF;
    color: #7EFFFF;
}

#authenticationButton:hover,
#licenseloginButton:hover,
.license-refinement-search-button:hover,
.license-back-button:hover,
#license-purchase-button:hover,
#license-purchase-cancel:hover,
.license-type-text > label:hover,
#license-alert-ok:hover,
#license-alert-close:hover,
.license-explanation-back:hover,
#provisional-authentication-button:hover,
#provisional-login-button:hover {
    opacity: 0.7;
}

/* ライセンス管理画面 */
.license-contents {
    height: 100%;
    width: 100%;
    overflow-x: scroll;
}
.license-management-area1 {
    width: 100%;
    height: 100px;
    min-width: 1450px;
}

.license-management-area2 {
    width: 100%;
    height: 120px;
    min-width: 1450px;
}

.license-management-area3 {
    width: 100%;
    height: calc(100% - 220px);
    min-width: 1450px;
}

.license-management-title {
    height: 28px;
    line-height: 28px;
    width: 100%;
    text-align: center;
    background-color: #A8D08D;
    color: #000000;
}

.license-information-area {
    width: 100%;
}

.license-total,
.license-refinement-item-area1 {
    margin-left: 50px;
}

.license-Number,
.license-refinement-item-area2 {
    margin-left: 80px;
}

.license-total,
.license-refinement-item-area1,
.license-refinement-item-area2 {
    margin-top: 15px;
}

.license-Number {
    margin-top: 5px;
}

.license-OPTfalse {
    margin-left: 50px;
}

.license-Number,
.license-refinement-area,
.license-refinement-item-area1,
.license-refinement-item-area2 {
    display: flex;
}

.license-refinement-input-area {
    width: 70%;
}

.license-refinement-search-area {
    width: 30%;
}

.license-refinement-item > img {
    width: 15px;
}

.text {
    height: 20px;
    max-width: 200px;
    width: 40%;
}

.date {
    height: 20px;
    max-width: 200px;
    width: 25%;
}

.license-refinement-item > select {
    height: 25px;
    max-width: 200px;
    width: 40%;
}

.license-refinement-name {
    text-align: center;
}

.license-refinement-userid,
.license-refinement-name,
.license-refinement-type,
.license-refinement-application {
    width: 33%;
}

.license-refinement-term {
    width: 66%;
}

.license-refinement-search-area {
    margin-top: 20px;
    text-align: right;
    margin-right: 50px;
}

.license-refinement-search-button {
    text-align: center;
    display: inline-block;
    width: 120px;
    height: 55px;
    line-height: 55px;
    border: solid 2px #7EFFFF;
    color: #7EFFFF;
}

.license-list-area {
    height: calc(100% - 68px);
}

.license-list-title,
#license-list-table {
    border-collapse: collapse;
    width: 100%;
}

.license-list-table-area {
    height: calc(100% - 55px);
    overflow: auto;
}

.license-list-title > tbody > tr > td,
.license-list-table-area > table > tbody > tr > td {
    text-align: center;
    height: 50px;
    line-height: 50px;
}

.license-migration-area {
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.license-list-tr {
    border-bottom: 2px solid #FFFFFF;
}

.td-No {
    width: 3%;
}

.td-userid,
.td-name,
.td-mailaddress,
.td-mobile-number,
.td-term {
    width: 10%;
}

.td-license-type,
.td-date {
    width: 12%;
}

.td-application {
    width: 7%;
}

.td-operation {
    width: 16%;
}

#nameSort:hover,
#termSort:hover,
#dateSort:hover {
    opacity: 0.7;
    cursor: pointer;
}

.name-sort-img,
.term-sort-img,
.date-sort-img {
    background-repeat: no-repeat;
    padding-right: 15px !important;
    background-image: url("../image/no-sort.png");
    background-size: 15px; /* 幅と高さを20pxに設定 */
    margin-left: 5px;
}

#page-number {
    margin: auto 30px;
}

#left1,
#left2,
#right1,
#right2 {
    margin: auto 20px;
    border-bottom: 1px solid #FFFFFF;
}

/* 承認ボタン */
.button-approval {
    color: #FFF;
    background-color: #311CEE;
}
/* 拒否ボタン */
.button-refusal {
    color: #FFF;
    background-color: #FF0000;
}
/* 停止ボタン */
.button-suspension {
    color: #000;
    background-color: yellow;
}

.button-design {
    margin: auto 5px;
    border: solid 1px #D8D8D8;
}

/* ライセンスユーザー情報画面 */
.license-information-contents {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
}

.license-information-title,
.license-items-title {
    height: 28px;
    line-height: 28px;
    width: 100%;
    /* min-width: 1150px; */
    text-align: center;
    background-color: #A8D08D;
    color: #000000;
    border-bottom: 1px solid #D8D8D8;
}

.license-information-title {
    min-width: 950px;
}

.license-information-area1,
.license-information-area2,
.license-information-area3 {
    display: flex;
    width: 100%;
    height: 65px;
    min-width: 950px;
}

.license-information-back {
    width: 100%;
    text-align: center;
    margin-top: 40px;
    min-width: 950px;
}

.name-area,
.displayName-area,
.mailAddress-area,
.mobileNumber-area,
.licenseNumber-area {
    width: 15%;
    border: 1px solid #D8D8D8;
}

.userid-area,
.license-type-area,
.license-term-area,
.license-application-area,
.license-date-area {
    width: 20%;
    border: 1px solid #D8D8D8;
}

.userType-area {
    width: 10%;
    border: 1px solid #D8D8D8;
}

.birthday-area {
    width: 12%;
    border: 1px solid #D8D8D8;
}

.googleAccount-area {
    width: 18%;
    border: 1px solid #D8D8D8;
}

#type-change {
    width: calc(100% - 20px);
}

.license-text-style {
    height: 37px;
    line-height: 37px;
    padding-left: 10px;
}

.License-application {
    width: 100%;
    display: flex;
}

.application-text {
    width: 30%;
}

.application-button-area {
    width: 70%;
    text-align: right;
    padding-right: 10px;
}

.license-back-button {
    text-align: center;
    display: inline-block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    border: solid 2px #7EFFFF;
    color: #7EFFFF;
}

/* ライセンス購入画面 */
.license-purchase-contents {
    height: 100%;
    width: 100%;
}

.license-purchase-item1,
.license-purchase-item2,
.license-purchase-item3 {
    width: 100%;
}

.license-purchase-title {
    height: 28px;
    line-height: 22px;
    width: 100%;
    text-align: center;
    color: #000000;
    border: 1px solid #D8D8D8;
}

.main-color {
    background-color: #FFC000;
}

.sub-color {
    background-color: #A8D08D;
}

.now-license-area {
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
}

.purchase-button-area {
    width: 100%;
    text-align: center;
    margin-top: 45px;
}

.license-purchase-table,
.license-explanation-table {
    border-spacing: 0;
    width: 100%;
}

.license-option-text > input[type="radio"],
.license-explanation-text > input[type="radio"],
.license-price-text > input[type="radio"]  {
    display: none;
}

.purchase-license-type {
    width: 20%;
}

.purchase-license-explanation {
    width: 60%;
}

.purchase-license-Option,
.purchase-license-price {
    width: 10%;
}

.license-type-text,
.license-option-text,
.license-price-text {
    border: 1px solid #D8D8D8;
    text-align: center;
}

.license-explanation-text {
    vertical-align: top;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    height: 50px;
    max-height: 120px;
    border: 1px solid #D8D8D8;
}

.purchase-free-OPTtrue,
.purchase-standard-OPTfalse,
.purchase-standard-OPTtrue,
.purchase-premiere-OPTfalse,
.purchase-premiere-OPTtrue,
.purchase-free-OPTtrue-explanation,
.purchase-free-OPTtrue-price,
.purchase-standard-OPTfalse-explanation,
.purchase-standard-OPTfalse-price,
.purchase-standard-OPTtrue-explanation,
.purchase-standard-OPTtrue-price,
.purchase-premiere-OPTfalse-explanation,
.purchase-premiere-OPTfalse-price,
.purchase-premiere-OPTtrue-explanation,
.purchase-premiere-OPTtrue-price {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.purchase-free-OPTtrue,
.purchase-standard-OPTtrue,
.purchase-premiere-OPTtrue,
.purchase-free-OPTtrue-explanation,
.purchase-free-OPTtrue-price,
.purchase-standard-OPTtrue-explanation,
.purchase-standard-OPTtrue-price,
.purchase-premiere-OPTtrue-price {
    /* height: 60px;
    line-height: 60px; */
    height: 100%;
    line-height: 140px;
}

.purchase-standard-OPTfalse,
.purchase-standard-OPTfalse-price,
.purchase-premiere-OPTfalse-price {
    height: 140px;
    line-height: 140px;
}

.purchase-premiere-OPTfalse {
    height: 150px;
    line-height: 150px;
}

.license-purchase-caution {
    margin-top: 5px;
    margin-left: 10px;
}

#license-purchase-button,
#license-purchase-cancel {
    width: 200px;
    height: 40px;
    border: 1px solid #D8D8D8;
    color: #D8D8D8;
    margin: auto 15px;
}

#license-purchase-button {
    background-color: #311CEE;
}

#license-purchase-cancel {
    background-color: #FF0000;
}

/* オーバーレイのスタイル */
.license-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 薄暗くする */
    z-index: 9998; /* アラートより一つ下の層 */
}

/* ライセンス購入ダイヤログ */
.license-alert {
    width: 210px;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid #BDC0BC 1px;
    z-index: 9999;
    background-color: #595959;
}
.license-alert-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    border-bottom: solid 1px #BDC0BC;
    background-color: #9CC3E5;
    color: #000;
}
.license-alert-main {
    text-align: center;
    margin: 10px 10px;
}
.license-alert-text {
    text-align: left;
    display: inline-block;
}
.license-alert-check {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    margin-left: calc(50% - 92.5px);
    text-align: center;
}
#license-alert-ok,
#license-alert-close {
    width: 185px;
    height: 40px;
    background-color: #595959;
    border: solid 2px #7EFFFF;
    color: #7EFFFF;
}
#license-alert-close {
    margin-top: 10px;
}

/* ライセンス説明 （ライセンス購入画面と被るクラスがあるので追加分）*/
.license-explanation-contents {
    width: 100%;
    height: 100%;
    overflow-x:scroll;
}

.license-explanation-item1,
.license-explanation-item2,
.license-explanation-item3 {
    width: 100%;
}

.license-explanation-item3 {
    text-align: center;
}

.license-explanation-type {
    width: 21%;
}

.license-explanation-Option {
    width: 15%;
}

.license-explanation {
    width: 64%;
}

.license-explanation-back,
.license-explanation-back2 {
    display: inline-block;
    width: 200px;
    height: 40px;
    margin-top: 20px;
    line-height: 40px;
    background-color: #595959;
    border: solid 2px #7EFFFF;
    color: #7EFFFF;
}

/* オーバーレイのスタイル */
.license-overlay,
.licenseAll-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 薄暗くする */
    z-index: 9998; /* アラートより一つ下の層 */
}

.license-alert,
.licenseAll-alert {
    font-size: 15px;
    width: 210px;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid #BDC0BC 1px;
    z-index: 9999;
    background-color: #595959;
}
.license-alert-title,
.licenseAll-alert-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    border-bottom: solid 1px #BDC0BC;
    background-color: #9CC3E5;
    color: #000;
}
.license-alert-main,
.licenseAll-alert-main {
    text-align: center;
    margin: 10px 10px;
}
.license-alert-text,
.licenseAll-alert-text {
    text-align: left;
    display: inline-block;
}
.license-alert-check,
.licenseAll-alert-check {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    margin-left: calc(50% - 92.5px);
    text-align: center;
}
#license-alert-ok,
#license-alert-close,
#licenseAll-alert-ok,
#licenseAll-alert-close {
    width: 185px;
    height: 40px;
    background-color: #595959;
    border: solid 2px #7EFFFF;
    color: #7EFFFF;
}
#license-alert-close,
#licenseAll-alert-close {
    margin-top: 10px;
}

.license-explanation-menu-text {
    /* color: rgb(255, 255, 0); */
    color: white;
    margin-left: 15px;
    width: auto;
}

.license-explanation-mobile-only {
    display: none;
}

/*スマホ版装飾*/
@media screen and (min-width:0px) and (max-width:768px) {
    .license-explanation-contents {
        font-size: 13px;
    }

    .license-explanation-text {
        height: 40px;
    }

    #license-purchase-button,
    #license-purchase-cancel {
        margin-bottom: 10px;
    }
    .license-purchase-contents {
        font-size: 10px;
    }
    .purchase-license-explanation {
        width: 50%;
    }
    .purchase-license-price, 
    .purchase-license-Option{
        width: 15%;
    }
}

/*スマホ版装飾*/
@media screen and (min-width:0px) and (max-width:667px) {
    .license-explanation-contents {
        font-size: 10px;
    }

    .license-explanation-text {
        height: 25px;
    }

    .license-explanation-back {
        /* margin: 35px auto; */
    }

    .license-explanation-back2 {
        margin-top: 20px;
    }
}