@charset "UTF-8";


body.about > *:not(.modal) {
	width: 100%;
	padding-inline: calc((100% - 1000px) / 2);
}

body.about main {
	display: flex;
    gap: 16px;
    flex-direction: column;
    * {
        font-size: 1.4rem;
    }
    > * {
        padding-inline: 15px;
    }
}

body.about main:is(.apply, .contact, .set-link) > .head-line {
	display: flex;
    flex-direction: column;
    gap: 8px;
    h1 {
        font-size: 1.8rem;
    }
    p {
        font-size: 1.6rem;
    }
}

body.about main.apply > .plan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    > table {
        width: 100%;
    }
    > table :is(thead, tbody) > tr > * {
        width: calc(100% / 8);
        font-size: 1.4rem;
        border: 1px dotted var(--colgray-70);
        padding: 4px 16px;
    }
    > table thead tr th {
        background: var(--colgray-40);
        color: #fff;
    }
}

body.about main:is(.apply, .contact) > .form {
    padding-inline: 0;
    max-width: 400px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--colgray-50);
    > .subject {
        font-size: 1.8rem;
        padding: 4px 8px;
        background: #000;
        color: #fff;
    }
    > .inputs {
        display: flex;
        flex-direction: column;
    }
    > .inputs > * {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        background: var(--colgray-90);
    }
    > .inputs > *:nth-of-type(odd) {
        padding: 4px 8px;
        background: var(--colgray-97);
    }
    > .inputs :is(select, input[type=number], input[type=text]) {
        background: #fff;
        border: 1px solid #000;
        border-radius: 5px;
        padding-block: 8px;
        * {
            background: #fff;
        }
    }
    > .inputs .terms {
        border: 1px dotted#999;
        padding: 8px;
        background: #fff;
        max-height: 200px;
        overflow-y: auto;
        width: 100% - 16px;
        margin-inline: auto;
    }
    > button {
        width: 80%;
        background: red;
        color: #fff;
        margin: 16px auto;
        padding: 16px 8px;
        border-radius: 50px;
    }
}

body.about main.contact > .form {
    min-width: 350px;
    width: 90%;
}

body.about main.set-link {
    > * {
        max-width: 640px;
        margin-inline: auto;
    }
}

body.about main.set-link .guilde {
    * {
        font-size: 1.6rem;
    }
}

body.about main.set-link .items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.about main.set-link .items > * {
    display: flex;
    flex-direction: column;
    gap: 8px;
}