@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&family=Poppins:wght@400;700&display=swap);

html,
body {
    margin: 0;
    height: 0;
    font-family: "Noto Sans JP", "Roboto", "Hiragino Sans", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
    color: #1d1d1d
}

body {
    background-color: #e0f9ff;
    font-size: 16px
}

body::before {
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, #628BB4 0%, #6EA8CA 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

@media(min-width: 1024px) {
    body::before {
        height: 200px
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 .5rem
}

h2,
h3 {
    color: #2c3553
}

h5 {
    color: #1d1d1d;
    font-size: 1rem
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0
}

ul {
    margin: 0;
    padding: 0
}

p,
li {
    margin: 0;
    font-size: 14px
}

@media(min-width: 769px) {

    p,
    li {
        font-size: 16px
    }
}

main a {
    color: #628bb4;
    text-decoration-line: underline
}

img {
    display: block;
    max-width: 100%
}

hr {
    appearance: none;
    border-top: 1px;
    border-width: 1px;
    border-color: #ccc
}

.table {
    line-height: 140%;
    letter-spacing: .32px
}

.table tbody th {
    text-align: left;
    padding-right: 16px;
    padding-bottom: 8px
}

.table tbody td {
    padding-bottom: 8px
}

.container {
    margin: 0 16px
}

@media(min-width: 1024px) {
    .container {
        width: 1000px;
        margin: 0 auto
    }
}

.content-block {
    padding: 24px 16px 0;
    margin-bottom: 24px
}

@media(min-width: 1024px) {
    .content-block {
        padding: 40px 40px 0;
        margin-bottom: 40px
    }
}

.content-block+.content-block {
    border-top: 1px solid #ccc
}

.row {
    column-gap: 24px
}

@media(min-width: 769px) {
    .row {
        display: flex
    }
}

.row>.col {
    flex: 1
}

.grid-sm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.grid-sm>.col {
    flex: 1
}

.grid-timespan {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 12px;
    justify-content: flex-start
}

@media(min-width: 1024px) {
    .grid-timespan {
        grid-row: span 1
    }
}

.grid-timespan>.col {
    display: grid
}

.grid-timespan>.col .form-title {
    display: block;
    font-size: .875rem;
    margin-bottom: 6px
}

@media(min-width: 1024px) {
    .grid-timespan>.col .form-inline {
        grid-template-columns: auto auto
    }
}

.grid-timespan>.col .tilde {
    display: flex;
    height: 3em;
    padding-top: 1.5em;
    align-items: center
}

.panel {
    padding: 16px 12px;
    border-radius: 12px
}

@media(min-width: 769px) {
    .panel {
        padding: 24px
    }
}

.panel-title {
    font-size: 1.25rem;
    margin: 0 0 .5em;
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem
}

.form-input {
    width: 100%;
    max-width: 448px;
    flex-grow: 2;
    flex-shrink: 1
}

.form-input[readonly] {
    background: #eee
}

.form-input:focus {
    border-color: #628bb4
}

.form-inline {
    display: grid;
    grid-template-columns: 2em auto;
    align-items: center;
    gap: .5rem;
    font-size: .875rem
}

.form-inline input,
.form-inline select {
    display: inline-block !important
}

input.form-inline {
    display: inline-block !important;
    flex-shrink: 2
}

.form-input.form-full {
    display: block !important;
    max-width: none
}

.password-input {
    position: relative
}

.password-input input {
    padding-right: 2.5em;
    position: relative
}

.password-input input+button.toggle-visibility {
    appearance: none;
    border: none;
    cursor: pointer;
    background: none;
    outline: none;
    padding: .75em;
    content: "";
    width: 1.5em;
    height: 1.5em;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: .75em;
    transform: translateY(-50%)
}

.password-input input[type=password]+button.toggle-visibility {
    background-image: url(../img/common/icon/eye_close.svg)
}

.password-input input[type=text]+button.toggle-visibility {
    background-image: url(../img/common/icon/eye_open.svg)
}

.textbox {
    appearance: none;
    height: 3em;
    padding: .75em;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    color: #1d1d1d;
    font-size: 1em;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    display: block;
    transition: all .3s ease
}

.textbox::placeholder {
    color: #a2a2a2
}

.selectbox {
    position: relative;
    display: block;
    white-space: nowrap
}

.selectbox.form-inline {
    width: auto;
    display: inline-block
}

.selectbox.form-inline select {
    width: auto;
    display: inline-block
}

.selectbox::before,
.selectbox::after {
    position: absolute;
    content: "";
    pointer-events: none
}

.selectbox::before {
    right: 0;
    display: inline-block;
    height: 3em;
    height: 3em;
    content: ""
}

.selectbox::after {
    position: absolute;
    top: 50%;
    right: 1.4em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #1d1d1d;
    border-right: 2px solid #1d1d1d;
    content: ""
}

.selectbox select {
    appearance: none;
    height: 3em;
    padding: .75em;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    color: #1d1d1d;
    font-size: 1em;
    cursor: pointer;
    width: 100%;
    display: block;
    transition: all .3s ease
}

.selectbox.input-narrow::after {
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 5px;
    height: 5px;
    border-bottom: 2px solid #1d1d1d;
    border-right: 2px solid #1d1d1d;
    content: ""
}

.selectbox.input-narrow select {
    width: 55px;
    padding-left: .5em;
    padding-right: .5em
}

@media(min-width: 769px) {
    .selectbox.input-narrow select {
        width: 80px
    }
}

.select-labelgroup {
    white-space: nowrap;
    display: flex;
    align-items: center;
    column-gap: 8px
}

.form-input:focus,
.selectbox select:focus,
.calendarbox input:focus {
    border-color: #628bb4 !important
}

.calendarbox {
    position: relative;
    width: 100%;
    display: block
}

.calendarbox::before,
.calendarbox::after {
    position: absolute;
    content: "";
    pointer-events: none
}

.calendarbox::before {
    right: 0;
    display: inline-block;
    height: 3em;
    height: 3em;
    content: ""
}

.calendarbox::after {
    position: absolute;
    top: 50%;
    right: .75em;
    transform: translate(0, -50%);
    content: "";
    background: url(../img/form/icon_calendar.png) no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    display: block
}

.calendarbox input {
    appearance: none;
    height: 3.5em;
    padding: .75em;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #eee;
    color: #1d1d1d;
    font-size: .875rem;
    cursor: pointer;
    width: 100%;
    display: block;
    box-sizing: border-box;
    transition: all .3s ease
}

@media(min-width: 1024px) {
    .calendarbox input {
        font-size: 1rem
    }
}

.radio-group table,
.radio-group thead,
.radio-group tbody {
    display: block;
    border: none
}

.radio-group tr {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
    font-size: .875rem
}

.radio-group label::before,
.radio-group label:has(:checked)::after {
    border-radius: 50%;
    content: ""
}

.radio-group label::before {
    width: 1.5em;
    height: 1.5em;
    background-color: #fff;
    border: 2px solid #628bb4;
    box-sizing: border-box;
    transition: all .3s ease
}

.radio-group label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: .75em;
    transform: translate(-50%, -50%);
    width: .75em;
    height: .75em;
    background-color: #628bb4
}

.radio-group input {
    display: none
}

.radio-group input:checked+label::after {
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 50%;
    left: .75em;
    transform: translate(-50%, -50%);
    width: .75em;
    height: .75em;
    background-color: #628bb4
}

.radio-group input:disabled+label {
    color: #a2a2a2
}

.radio-group input:disabled+label::before {
    background-color: #eee;
    border-color: #ccc
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1em 2em;
    border: none
}

.checkbox-group table,
.checkbox-group tbody,
.checkbox-group thead {
    display: block
}

.checkbox-group tr {
    display: flex;
    flex-wrap: wrap;
    gap: 1em 2em;
    border: none
}

.checkbox-group td {
    position: relative;
    padding: 0
}

.checkbox-group label {
    display: flex;
    align-items: flex-start;
    gap: 0 .5em;
    position: relative;
    cursor: pointer
}

.checkbox-group label::before {
    width: 1.125em;
    height: 1.125em;
    border-radius: 3px;
    background: #fff;
    border: 2px solid #628bb4;
    content: "";
    transition: all .3s ease;
    flex-shrink: 0
}

.checkbox-group label::after {
    transition: all .3s ease
}

.checkbox-group input {
    display: none
}

.checkbox-group input:checked+label::after {
    position: absolute;
    top: .125em;
    left: 7px;
    transform: rotate(45deg);
    width: .35em;
    height: .75em;
    border: solid #628bb4;
    border-width: 0 3px 3px 0;
    content: ""
}

textarea.form-input {
    display: block;
    width: 100%;
    min-height: 7em;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    box-sizing: border-box;
    form-sizing: content;
    font-size: 1rem
}

textarea.form-input::placeholder {
    color: #ccc;
    font-weight: normal
}

.error-message {
    font-size: .875rem;
    color: #cd3535;
    margin-top: .5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    transition: all .3s ease
}

.error-alert {
    background-color: #ffeded;
    color: #cd3535;
    font-weight: 700;
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 1.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    transition: all .3s ease
}

.form-group.error .error-message,
.form-group.error .error-alert {
    display: block;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    height: auto
}

.form-group.error .textbox,
.form-group.error .selectbox select,
.form-group.error .calendarbox input,
.form-group.error textarea.form-input {
    border-color: #cd3535;
    border-width: 2px;
    background-color: #ffeded
}

.form-group.error .radio-group label {
    color: #cd3535
}

.form-group.error .radio-group label::before {
    border-color: #cd3535;
    background-color: #ffeded
}

.form-group.error .radio-group label::after {
    background-color: #cd3535
}

.form-group.error .checkbox-group label {
    color: #cd3535
}

.form-group.error .checkbox-group label::before {
    border-color: #cd3535;
    background-color: #ffeded
}

.form-group.error .checkbox-group label::after {
    border-color: #cd3535
}

.error.textbox,
.error.selectbox select,
.error.calendarbox input {
    border-color: #cd3535;
    border-width: 2px;
    background-color: #ffeded
}

.dialog {
    border: none;
    box-sizing: border-box;
    width: auto;
    position: relative;
    padding: 24px 16px;
    margin: 25px 16px;
    display: none
}

.dialog[open] {
    display: flex
}

.dialog:modal {
    position: fixed;
    overflow: auto;
    inset-block: 0
}

@media(min-width: 1024px) {
    .dialog {
        padding: 40px;
        width: 800px;
        max-width: 100%;
        margin: auto
    }
}

.dialog form {
    width: 100%;
    overflow: auto
}

.dialog::backdrop {
    background: rgba(64, 64, 64, .75);
    opacity: 0
}

.dialog.show::backdrop {
    opacity: 1
}

.dialog .dialog-inner {
    width: 100%;
    overflow: auto
}

.dialog .dialog-close {
    appearance: none;
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer
}

@media(min-width: 1024px) {
    .dialog .dialog-close {
        width: 48px;
        height: 48px;
        top: 12px;
        right: 12px
    }
}

.dialog .dialog-close::before,
.dialog .dialog-close::after {
    content: "";
    display: block;
    width: 2px;
    height: 20px;
    background-color: #1d1d1d;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1
}

.dialog .dialog-close::before {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.dialog .dialog-close::after {
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotate(45deg)
}

.calendar-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

@media(min-width: 769px) {
    .calendar-container {
        justify-content: center;
        flex-wrap: nowrap;
        column-gap: 24px
    }
}

.calendar-datepicker {
    font-family: "Poppins", "Noto Sans JP", "Roboto", "Hiragino Sans", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
    border-radius: 24px;
    overflow: hidden
}

@media(min-width: 769px) {
    .calendar-datepicker {
        order: 1
    }
}

.calendar-datepicker .calendar-yearmonth {
    background-color: #628bb4;
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    column-gap: 10px;
    align-items: center;
    padding: .5rem 1rem
}

@media(max-width: 768px) {
    .calendar-datepicker .calendar-yearmonth {
        padding: .25rem 1rem
    }
}

.calendar-datepicker .calendar-year {
    font-size: 1.25rem
}

@media(min-width: 769px) {
    .calendar-datepicker .calendar-year {
        font-size: 1.875rem
    }
}

.calendar-datepicker .calendar-month {
    font-size: 2.25rem
}

@media(min-width: 769px) {
    .calendar-datepicker .calendar-month {
        font-size: 3rem
    }
}

.calendar-datepicker .calendar-dates {
    padding: .5rem 1rem;
    background-color: #f0f9ff;
    font-size: .875rem;
    line-height: 1;
    border-spacing: 4px 8px;
    margin: 0 -4px;
    width: 100%
}

@media(max-width: 768px) {
    .calendar-datepicker .calendar-dates {
        padding: .375rem .5rem;
        border-spacing: 2px 4px;
        margin: 0 -2px;
        font-size: .75rem
    }
}

.calendar-datepicker .calendar-dates th {
    text-align: center;
    color: #2c3553;
    font-weight: 700
}

.calendar-datepicker .calendar-dates td {
    padding: .5rem .75rem;
    box-sizing: border-box;
    border-radius: 4px;
    text-align: center;
    color: #2c3553;
    font-weight: 700
}

@media(max-width: 768px) {
    .calendar-datepicker .calendar-dates td {
        padding: .375rem .5rem
    }
}

.calendar-datepicker .calendar-dates td.date-empty {
    border: 1px solid rgba(0, 0, 0, 0)
}

.calendar-datepicker .calendar-dates td.date-valid,
.calendar-datepicker .calendar-dates td.date-invalid {
    border: 1px solid #eee
}

.calendar-datepicker .calendar-dates td.date-valid {
    background: #fff;
    transition: all .3s ease;
    cursor: pointer
}

.calendar-datepicker .calendar-dates td.date-valid:hover {
    opacity: .7;
    transform: translateY(-2px);
    border-color: #628bb4
}

.calendar-datepicker .calendar-dates td.date-invalid {
    background: #eee;
    cursor: not-allowed
}

.calendar-datepicker .calendar-dates td .status {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 4px
}

.calendar-datepicker .calendar-dates td .status.status-available {
    background-image: url(../img/form/calendar/circle.svg)
}

.calendar-datepicker .calendar-dates td .status.status-remaining {
    background-image: url(../img/form/calendar/triangle.svg)
}

.calendar-datepicker .calendar-dates td .status.status-reserved {
    background-image: url(../img/form/calendar/cross.svg)
}

.calendar-arrow {
    border: none;
    background: none;
    text-align: center;
    font-size: 11px;
    color: #2c3553;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 4px;
    border-radius: 4px;
    transition: all .3s ease;
    cursor: pointer
}

@media(min-width: 769px) {
    .calendar-arrow {
        font-size: .875rem
    }
}

.calendar-arrow:hover {
    opacity: .7;
    transform: translate(0, -2px)
}

.calendar-arrow::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url(../img/form/calendar/arrow.svg) no-repeat;
    background-size: contain
}

@media(min-width: 769px) {
    .calendar-arrow::before {
        width: 64px;
        height: 64px
    }
}

.calendar-arrow.disabled {
    visibility: hidden;
    opacity: 0;
    pointer-events: none
}

@media(min-width: 769px) {
    .calendar-arrow.calendar-prev {
        order: 0
    }
}

@media(min-width: 769px) {
    .calendar-arrow.calendar-next {
        order: 1
    }
}

.calendar-arrow.calendar-next::before {
    transform: rotate(180deg)
}

.sp-arrow-group {
    display: flex;
    justify-content: space-between
}

@media(min-width: 769px) {
    .sp-arrow-group {
        display: none
    }
}

.badge {
    display: inline-block;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0
}

@media(min-width: 1024px) {
    .badge {
        font-size: .875rem
    }
}

.badge-required {
    background-color: #cd3535;
    color: #fff
}

.badge-optional {
    background-color: #eee;
    color: #a2a2a2
}

.submit-btn-group {
    display: flex;
    justify-content: center;
    column-gap: 16px
}

@media(min-width: 1024px) {
    .submit-btn-group {
        column-gap: 32px
    }
}

.submit-btn {
    display: flex;
    width: 100%;
    max-width: 400px;
    height: calc(5rem + 2px);
    padding: 1.5rem;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #628bb4;
    box-sizing: border-box;
    outline: none;
    border: none;
    position: relative;
    transition: background-color .3s ease;
    cursor: pointer
}

@media(min-width: 1024px) {
    .submit-btn {
        font-size: 1.25rem
    }
}

.submit-btn:hover,
.submit-btn:disabled {
    background: rgba(98, 139, 180, .7)
}

.submit-btn:disabled {
    cursor: not-allowed
}

.submit-btn::after {
    content: "";
    display: block;
    width: .75rem;
    height: .75rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    z-index: 1;
    box-sizing: border-box;
    position: absolute;
    right: 1.75rem;
    top: 50%;
    transform: translate(0, -50%) rotate(-45deg)
}

.btn {
    display: flex;
    width: 100%;
    height: calc(3rem + 2px);
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
    gap: 10px;
    border: none;
    border-radius: 100px;
    box-sizing: border-box;
    outline: none;
    position: relative;
    transition: all .3s ease;
    cursor: pointer;
    background: none
}

@media(min-width: 769px) {
    .btn {
        width: 240px
    }
}

.btn.btn-small {
    padding: .25rem .5rem;
    height: auto;
    font-size: 11px;
    gap: 2px;
    width: auto
}

@media(min-width: 1024px) {
    .btn.btn-small {
        padding: .5rem .75rem
    }
}

.btn.btn-edit {
    padding: .5rem .75rem;
    width: 75px;
    position: absolute;
    right: 0;
    height: auto;
    font-size: 11px;
    gap: 2px
}

.btn:disabled {
    cursor: not-allowed
}

.btn.btn-primary {
    background: #628bb4;
    border: none;
    color: #fff
}

.btn.btn-primary:hover {
    background: rgba(98, 139, 180, .7)
}

.btn.btn-primary:disabled {
    background-color: #a2a2a2;
    color: #eee
}

.btn.btn-secondary {
    background-color: #fff;
    color: #628bb4;
    stroke: #628bb4
}

.btn.btn-secondary:hover {
    opacity: .7
}

.btn.btn-secondary:disabled {
    background-color: #eee;
    color: #a2a2a2
}

.btn.btn-secondary-line {
    background-color: #fff;
    color: #628bb4;
    border: 2px solid #628bb4
}

.btn.btn-secondary-line:hover {
    opacity: .7
}

.btn.btn-secondary-line:disabled {
    background-color: #eee;
    border: 2px solid #a2a2a2;
    color: #a2a2a2
}

.btn.btn-orange {
    background-color: #f7973a;
    color: #fff
}

.btn.btn-orange:hover {
    background: rgba(247, 151, 58, .7)
}

@media(max-width: 768px) {
    .btn.btn-file-select {
        font-size: .875rem;
        padding: 8px 12px;
        height: auto;
        width: auto
    }
}

header {
    padding-top: 40px;
    margin-bottom: 40px
}

@media(min-width: 769px) {
    header {
        padding-top: 60px;
        margin: 0 0 32px
    }
}

header .container .inner {
    padding: 24px 32px
}

@media(min-width: 1024px) {
    header .container .inner {
        padding: 32px
    }
}

.header-logo {
    text-align: center;
    margin-bottom: 16px
}

.header-logo img {
    width: 260px;
    height: auto;
    margin: 0 auto
}

@media(min-width: 1024px) {
    .header-logo img {
        width: 420px
    }
}

.header-title {
    margin-bottom: 0
}

.header-title img {
    width: auto;
    max-height: 34px;
    margin: 0 auto
}

@media(min-width: 1024px) {
    .header-title img {
        height: 56px
    }
}

.section-title {
    padding: 12px;
    align-items: flex-start;
    align-self: stretch;
    background: linear-gradient(90deg, #628bb4 0%, #6ea8ca 100%);
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%
}

@media(min-width: 1024px) {
    .section-title {
        padding: 16px 40px;
        font-size: 2rem
    }
}

.block-title {
    padding-left: 19px;
    position: relative;
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: calc(100% - 19px)
}

@media(min-width: 1024px) {
    .block-title {
        font-size: 1.5rem
    }
}

.block-title::before {
    content: "";
    display: block;
    width: 8px;
    height: 100%;
    background: #628bb4;
    border-radius: 2px;
    position: absolute;
    left: 0;
    top: 0rem
}

.block-title-simple {
    position: relative;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 16px;
    width: 100%
}

.block-title-simple .date {
    font-family: Poppins;
    font-weight: 700;
    display: block
}

@media(min-width: 769px) {
    .block-title-simple {
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 24px
    }
}

@media(min-width: 769px) {
    .header-4 {
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: .4px
    }
}

.input-title {
    font-size: .875rem;
    margin: 0 0 .5em;
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem
}

@media(min-width: 1024px) {
    .input-title {
        font-size: 1rem
    }
}

.form-group-title {
    margin: 0 0 .5em
}

.text-completed {
    text-align: left
}

.text-completed .inner {
    max-width: 620px;
    margin: 0 auto
}

.icon-completed {
    margin: 0 auto;
    width: 80px;
    height: 80px
}

@media(min-width: 1024px) {
    .icon-completed {
        width: 120px;
        height: 120px
    }
}

.section-title-simple {
    font-size: 1.25rem;
    color: #628bb4;
    font-weight: 700
}

@media(min-width: 1024px) {
    .section-title-simple {
        font-size: 1.5rem
    }
}

.center-infomation {
    background-color: #fbfbfb;
    border-radius: 12px;
    max-width: 620px;
    margin: 0 auto;
    text-align: center
}

.center-infomation h4 {
    color: #628bb4
}

@media(min-width: 1024px) {
    .center-infomation h4 {
        font-size: 1.25rem
    }
}

.info-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.info-list li {
    display: flex;
    flex-direction: column
}

@media(min-width: 1024px) {
    .info-list li {
        display: block
    }
}

.info-list strong {
    font-weight: 700;
    color: #628bb4;
    display: block
}

@media(min-width: 1024px) {
    .info-list strong {
        display: inline
    }
}

.round-md {
    border-radius: 12px;
    overflow: hidden
}

@media(min-width: 1024px) {
    .round-md {
        border-radius: 24px
    }
}

.bg-white {
    background-color: #fff
}

.bg-lightblue {
    background-color: #f0f9ff
}

.bg-lightorange {
    background-color: #fff9ee
}

.bg-lightgray {
    background-color: #fbfbfb
}

.bg-jidoukan-light-bg-pink {
    background-color: #fff7fa
}

.small,
.small * {
    font-size: .75rem;
    letter-spacing: .28px;
    line-height: 1.4
}

@media(min-width: 1024px) {

    .small,
    .small * {
        font-size: .875rem
    }
}

.smallest {
    font-size: 11px;
    letter-spacing: .28px;
    line-height: 1.4
}

@media(min-width: 1024px) {
    .smallest {
        font-size: .75rem
    }
}

.large {
    font-size: 1.25rem
}

.notes {
    letter-spacing: .28px;
    line-height: 1.4;
    list-style-type: none;
    margin: .5em 0;
    padding-left: 0
}

.notes li {
    padding-left: 1.25em;
    position: relative;
    font-size: .75rem
}

.notes li::before {
    content: "※";
    position: absolute;
    left: 0
}

.dotted-list {
    list-style-type: none;
    padding-left: 1.5em
}

.dotted-list li {
    position: relative
}

.dotted-list li::before {
    content: "・";
    position: absolute;
    left: -1.5em
}

.text-red {
    color: #cd3535
}

.text-orange {
    color: #f7973a
}

.text-blue-gray {
    color: #628bb4
}

.nowrap {
    white-space: nowrap
}

.strong {
    font-weight: 700
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.flex-center {
    display: flex;
    justify-content: center
}

.justify-center {
    justify-content: center
}

.d-none {
    display: none
}

.d-inline {
    display: inline
}

.d-inline-block {
    display: inline-block
}

.d-block {
    display: block
}

.d-flex {
    display: flex
}

.mb-0 {
    margin-bottom: 0px
}

.ml-0 {
    margin-left: 0px
}

.pb-0 {
    padding-bottom: 0px
}

.mb-4 {
    margin-bottom: 4px
}

.ml-4 {
    margin-left: 4px
}

.pb-4 {
    padding-bottom: 4px
}

.mb-8 {
    margin-bottom: 8px
}

.ml-8 {
    margin-left: 8px
}

.pb-8 {
    padding-bottom: 8px
}

.mb-12 {
    margin-bottom: 12px
}

.ml-12 {
    margin-left: 12px
}

.pb-12 {
    padding-bottom: 12px
}

.mb-16 {
    margin-bottom: 16px
}

.ml-16 {
    margin-left: 16px
}

.pb-16 {
    padding-bottom: 16px
}

.mb-20 {
    margin-bottom: 20px
}

.ml-20 {
    margin-left: 20px
}

.pb-20 {
    padding-bottom: 20px
}

.mb-24 {
    margin-bottom: 24px
}

.ml-24 {
    margin-left: 24px
}

.pb-24 {
    padding-bottom: 24px
}

.mb-28 {
    margin-bottom: 28px
}

.ml-28 {
    margin-left: 28px
}

.pb-28 {
    padding-bottom: 28px
}

.mb-32 {
    margin-bottom: 32px
}

.ml-32 {
    margin-left: 32px
}

.pb-32 {
    padding-bottom: 32px
}

.mb-36 {
    margin-bottom: 36px
}

.ml-36 {
    margin-left: 36px
}

.pb-36 {
    padding-bottom: 36px
}

.mb-40 {
    margin-bottom: 40px
}

.ml-40 {
    margin-left: 40px
}

.pb-40 {
    padding-bottom: 40px
}

.mb-44 {
    margin-bottom: 44px
}

.ml-44 {
    margin-left: 44px
}

.pb-44 {
    padding-bottom: 44px
}

.mb-48 {
    margin-bottom: 48px
}

.ml-48 {
    margin-left: 48px
}

.pb-48 {
    padding-bottom: 48px
}

.mb-52 {
    margin-bottom: 52px
}

.ml-52 {
    margin-left: 52px
}

.pb-52 {
    padding-bottom: 52px
}

.mb-56 {
    margin-bottom: 56px
}

.ml-56 {
    margin-left: 56px
}

.pb-56 {
    padding-bottom: 56px
}

.mb-60 {
    margin-bottom: 60px
}

.ml-60 {
    margin-left: 60px
}

.pb-60 {
    padding-bottom: 60px
}

.mb-64 {
    margin-bottom: 64px
}

.ml-64 {
    margin-left: 64px
}

.pb-64 {
    padding-bottom: 64px
}

.mb-68 {
    margin-bottom: 68px
}

.ml-68 {
    margin-left: 68px
}

.pb-68 {
    padding-bottom: 68px
}

.mb-72 {
    margin-bottom: 72px
}

.ml-72 {
    margin-left: 72px
}

.pb-72 {
    padding-bottom: 72px
}

.mb-76 {
    margin-bottom: 76px
}

.ml-76 {
    margin-left: 76px
}

.pb-76 {
    padding-bottom: 76px
}

.mb-80 {
    margin-bottom: 80px
}

.ml-80 {
    margin-left: 80px
}

.pb-80 {
    padding-bottom: 80px
}

.mb-84 {
    margin-bottom: 84px
}

.ml-84 {
    margin-left: 84px
}

.pb-84 {
    padding-bottom: 84px
}

.mb-88 {
    margin-bottom: 88px
}

.ml-88 {
    margin-left: 88px
}

.pb-88 {
    padding-bottom: 88px
}

.mb-92 {
    margin-bottom: 92px
}

.ml-92 {
    margin-left: 92px
}

.pb-92 {
    padding-bottom: 92px
}

.mb-96 {
    margin-bottom: 96px
}

.ml-96 {
    margin-left: 96px
}

.pb-96 {
    padding-bottom: 96px
}

.mb-100 {
    margin-bottom: 100px
}

.ml-100 {
    margin-left: 100px
}

.pb-100 {
    padding-bottom: 100px
}

.mb-104 {
    margin-bottom: 104px
}

.ml-104 {
    margin-left: 104px
}

.pb-104 {
    padding-bottom: 104px
}

.mb-108 {
    margin-bottom: 108px
}

.ml-108 {
    margin-left: 108px
}

.pb-108 {
    padding-bottom: 108px
}

.mb-112 {
    margin-bottom: 112px
}

.ml-112 {
    margin-left: 112px
}

.pb-112 {
    padding-bottom: 112px
}

.mb-116 {
    margin-bottom: 116px
}

.ml-116 {
    margin-left: 116px
}

.pb-116 {
    padding-bottom: 116px
}

.mb-120 {
    margin-bottom: 120px
}

.ml-120 {
    margin-left: 120px
}

.pb-120 {
    padding-bottom: 120px
}

.w-10 {
    width: 10px;
    max-width: 100%
}

.w-20 {
    width: 20px;
    max-width: 100%
}

.w-30 {
    width: 30px;
    max-width: 100%
}

.w-40 {
    width: 40px;
    max-width: 100%
}

.w-50 {
    width: 50px;
    max-width: 100%
}

.w-60 {
    width: 60px;
    max-width: 100%
}

.w-70 {
    width: 70px;
    max-width: 100%
}

.w-80 {
    width: 80px;
    max-width: 100%
}

.w-90 {
    width: 90px;
    max-width: 100%
}

.w-100 {
    width: 100px;
    max-width: 100%
}

.w-110 {
    width: 110px;
    max-width: 100%
}

.w-120 {
    width: 120px;
    max-width: 100%
}

.w-130 {
    width: 130px;
    max-width: 100%
}

.w-140 {
    width: 140px;
    max-width: 100%
}

.w-150 {
    width: 150px;
    max-width: 100%
}

.w-160 {
    width: 160px;
    max-width: 100%
}

.w-170 {
    width: 170px;
    max-width: 100%
}

.w-180 {
    width: 180px;
    max-width: 100%
}

.w-190 {
    width: 190px;
    max-width: 100%
}

.w-200 {
    width: 200px;
    max-width: 100%
}

.w-210 {
    width: 210px;
    max-width: 100%
}

.w-220 {
    width: 220px;
    max-width: 100%
}

.w-230 {
    width: 230px;
    max-width: 100%
}

.w-240 {
    width: 240px;
    max-width: 100%
}

.w-250 {
    width: 250px;
    max-width: 100%
}

.w-260 {
    width: 260px;
    max-width: 100%
}

.w-270 {
    width: 270px;
    max-width: 100%
}

.w-280 {
    width: 280px;
    max-width: 100%
}

.w-290 {
    width: 290px;
    max-width: 100%
}

.w-300 {
    width: 300px;
    max-width: 100%
}

.w-310 {
    width: 310px;
    max-width: 100%
}

.w-320 {
    width: 320px;
    max-width: 100%
}

.w-330 {
    width: 330px;
    max-width: 100%
}

.w-340 {
    width: 340px;
    max-width: 100%
}

.w-350 {
    width: 350px;
    max-width: 100%
}

.w-360 {
    width: 360px;
    max-width: 100%
}

.w-370 {
    width: 370px;
    max-width: 100%
}

.w-380 {
    width: 380px;
    max-width: 100%
}

.w-390 {
    width: 390px;
    max-width: 100%
}

.w-400 {
    width: 400px;
    max-width: 100%
}

.w-410 {
    width: 410px;
    max-width: 100%
}

.w-420 {
    width: 420px;
    max-width: 100%
}

.w-430 {
    width: 430px;
    max-width: 100%
}

.w-440 {
    width: 440px;
    max-width: 100%
}

.w-450 {
    width: 450px;
    max-width: 100%
}

.w-460 {
    width: 460px;
    max-width: 100%
}

.w-470 {
    width: 470px;
    max-width: 100%
}

.w-480 {
    width: 480px;
    max-width: 100%
}

.w-490 {
    width: 490px;
    max-width: 100%
}

.w-500 {
    width: 500px;
    max-width: 100%
}

.w-510 {
    width: 510px;
    max-width: 100%
}

.w-520 {
    width: 520px;
    max-width: 100%
}

.w-530 {
    width: 530px;
    max-width: 100%
}

.w-540 {
    width: 540px;
    max-width: 100%
}

.w-550 {
    width: 550px;
    max-width: 100%
}

.w-560 {
    width: 560px;
    max-width: 100%
}

.w-570 {
    width: 570px;
    max-width: 100%
}

.w-580 {
    width: 580px;
    max-width: 100%
}

.w-590 {
    width: 590px;
    max-width: 100%
}

.w-600 {
    width: 600px;
    max-width: 100%
}

.w-610 {
    width: 610px;
    max-width: 100%
}

.w-620 {
    width: 620px;
    max-width: 100%
}

.w-630 {
    width: 630px;
    max-width: 100%
}

.w-640 {
    width: 640px;
    max-width: 100%
}

.w-650 {
    width: 650px;
    max-width: 100%
}

.w-660 {
    width: 660px;
    max-width: 100%
}

.w-670 {
    width: 670px;
    max-width: 100%
}

.w-680 {
    width: 680px;
    max-width: 100%
}

.w-690 {
    width: 690px;
    max-width: 100%
}

.w-700 {
    width: 700px;
    max-width: 100%
}

.w-710 {
    width: 710px;
    max-width: 100%
}

.w-720 {
    width: 720px;
    max-width: 100%
}

.w-730 {
    width: 730px;
    max-width: 100%
}

.w-740 {
    width: 740px;
    max-width: 100%
}

.w-750 {
    width: 750px;
    max-width: 100%
}

.w-760 {
    width: 760px;
    max-width: 100%
}

.w-770 {
    width: 770px;
    max-width: 100%
}

.w-780 {
    width: 780px;
    max-width: 100%
}

.w-790 {
    width: 790px;
    max-width: 100%
}

.w-800 {
    width: 800px;
    max-width: 100%
}

.w-810 {
    width: 810px;
    max-width: 100%
}

.w-820 {
    width: 820px;
    max-width: 100%
}

.w-830 {
    width: 830px;
    max-width: 100%
}

.w-840 {
    width: 840px;
    max-width: 100%
}

.w-850 {
    width: 850px;
    max-width: 100%
}

.w-860 {
    width: 860px;
    max-width: 100%
}

.w-870 {
    width: 870px;
    max-width: 100%
}

.w-880 {
    width: 880px;
    max-width: 100%
}

.w-890 {
    width: 890px;
    max-width: 100%
}

.w-900 {
    width: 900px;
    max-width: 100%
}

.w-910 {
    width: 910px;
    max-width: 100%
}

.w-920 {
    width: 920px;
    max-width: 100%
}

.w-930 {
    width: 930px;
    max-width: 100%
}

.w-940 {
    width: 940px;
    max-width: 100%
}

.w-950 {
    width: 950px;
    max-width: 100%
}

.w-960 {
    width: 960px;
    max-width: 100%
}

.w-970 {
    width: 970px;
    max-width: 100%
}

.w-980 {
    width: 980px;
    max-width: 100%
}

.w-990 {
    width: 990px;
    max-width: 100%
}

.w-1000 {
    width: 1000px;
    max-width: 100%
}

@media(min-width: 769px) {
    .text-tablet-center {
        text-align: center
    }

    .text-tablet-left {
        text-align: left
    }

    .flex-tablet-center {
        display: flex;
        justify-content: center
    }

    .d-tablet-inline {
        display: inline
    }

    .d-tablet-none {
        display: none
    }

    .d-tablet-inline {
        display: inline
    }

    .d-tablet-inline-block {
        display: inline-block
    }

    .d-tablet-block {
        display: block
    }

    .d-tablet-flex {
        display: flex
    }

    .mb-tablet-0 {
        margin-bottom: 0px
    }

    .ml-tablet-0 {
        margin-left: 0px
    }

    .pb-tablet-0 {
        padding-bottom: 0px
    }

    .mb-tablet-4 {
        margin-bottom: 4px
    }

    .ml-tablet-4 {
        margin-left: 4px
    }

    .pb-tablet-4 {
        padding-bottom: 4px
    }

    .mb-tablet-8 {
        margin-bottom: 8px
    }

    .ml-tablet-8 {
        margin-left: 8px
    }

    .pb-tablet-8 {
        padding-bottom: 8px
    }

    .mb-tablet-12 {
        margin-bottom: 12px
    }

    .ml-tablet-12 {
        margin-left: 12px
    }

    .pb-tablet-12 {
        padding-bottom: 12px
    }

    .mb-tablet-16 {
        margin-bottom: 16px
    }

    .ml-tablet-16 {
        margin-left: 16px
    }

    .pb-tablet-16 {
        padding-bottom: 16px
    }

    .mb-tablet-20 {
        margin-bottom: 20px
    }

    .ml-tablet-20 {
        margin-left: 20px
    }

    .pb-tablet-20 {
        padding-bottom: 20px
    }

    .mb-tablet-24 {
        margin-bottom: 24px
    }

    .ml-tablet-24 {
        margin-left: 24px
    }

    .pb-tablet-24 {
        padding-bottom: 24px
    }

    .mb-tablet-28 {
        margin-bottom: 28px
    }

    .ml-tablet-28 {
        margin-left: 28px
    }

    .pb-tablet-28 {
        padding-bottom: 28px
    }

    .mb-tablet-32 {
        margin-bottom: 32px
    }

    .ml-tablet-32 {
        margin-left: 32px
    }

    .pb-tablet-32 {
        padding-bottom: 32px
    }

    .mb-tablet-36 {
        margin-bottom: 36px
    }

    .ml-tablet-36 {
        margin-left: 36px
    }

    .pb-tablet-36 {
        padding-bottom: 36px
    }

    .mb-tablet-40 {
        margin-bottom: 40px
    }

    .ml-tablet-40 {
        margin-left: 40px
    }

    .pb-tablet-40 {
        padding-bottom: 40px
    }

    .mb-tablet-44 {
        margin-bottom: 44px
    }

    .ml-tablet-44 {
        margin-left: 44px
    }

    .pb-tablet-44 {
        padding-bottom: 44px
    }

    .mb-tablet-48 {
        margin-bottom: 48px
    }

    .ml-tablet-48 {
        margin-left: 48px
    }

    .pb-tablet-48 {
        padding-bottom: 48px
    }

    .mb-tablet-52 {
        margin-bottom: 52px
    }

    .ml-tablet-52 {
        margin-left: 52px
    }

    .pb-tablet-52 {
        padding-bottom: 52px
    }

    .mb-tablet-56 {
        margin-bottom: 56px
    }

    .ml-tablet-56 {
        margin-left: 56px
    }

    .pb-tablet-56 {
        padding-bottom: 56px
    }

    .mb-tablet-60 {
        margin-bottom: 60px
    }

    .ml-tablet-60 {
        margin-left: 60px
    }

    .pb-tablet-60 {
        padding-bottom: 60px
    }

    .mb-tablet-64 {
        margin-bottom: 64px
    }

    .ml-tablet-64 {
        margin-left: 64px
    }

    .pb-tablet-64 {
        padding-bottom: 64px
    }

    .mb-tablet-68 {
        margin-bottom: 68px
    }

    .ml-tablet-68 {
        margin-left: 68px
    }

    .pb-tablet-68 {
        padding-bottom: 68px
    }

    .mb-tablet-72 {
        margin-bottom: 72px
    }

    .ml-tablet-72 {
        margin-left: 72px
    }

    .pb-tablet-72 {
        padding-bottom: 72px
    }

    .mb-tablet-76 {
        margin-bottom: 76px
    }

    .ml-tablet-76 {
        margin-left: 76px
    }

    .pb-tablet-76 {
        padding-bottom: 76px
    }

    .mb-tablet-80 {
        margin-bottom: 80px
    }

    .ml-tablet-80 {
        margin-left: 80px
    }

    .pb-tablet-80 {
        padding-bottom: 80px
    }

    .mb-tablet-84 {
        margin-bottom: 84px
    }

    .ml-tablet-84 {
        margin-left: 84px
    }

    .pb-tablet-84 {
        padding-bottom: 84px
    }

    .mb-tablet-88 {
        margin-bottom: 88px
    }

    .ml-tablet-88 {
        margin-left: 88px
    }

    .pb-tablet-88 {
        padding-bottom: 88px
    }

    .mb-tablet-92 {
        margin-bottom: 92px
    }

    .ml-tablet-92 {
        margin-left: 92px
    }

    .pb-tablet-92 {
        padding-bottom: 92px
    }

    .mb-tablet-96 {
        margin-bottom: 96px
    }

    .ml-tablet-96 {
        margin-left: 96px
    }

    .pb-tablet-96 {
        padding-bottom: 96px
    }

    .mb-tablet-100 {
        margin-bottom: 100px
    }

    .ml-tablet-100 {
        margin-left: 100px
    }

    .pb-tablet-100 {
        padding-bottom: 100px
    }

    .mb-tablet-104 {
        margin-bottom: 104px
    }

    .ml-tablet-104 {
        margin-left: 104px
    }

    .pb-tablet-104 {
        padding-bottom: 104px
    }

    .mb-tablet-108 {
        margin-bottom: 108px
    }

    .ml-tablet-108 {
        margin-left: 108px
    }

    .pb-tablet-108 {
        padding-bottom: 108px
    }

    .mb-tablet-112 {
        margin-bottom: 112px
    }

    .ml-tablet-112 {
        margin-left: 112px
    }

    .pb-tablet-112 {
        padding-bottom: 112px
    }

    .mb-tablet-116 {
        margin-bottom: 116px
    }

    .ml-tablet-116 {
        margin-left: 116px
    }

    .pb-tablet-116 {
        padding-bottom: 116px
    }

    .mb-tablet-120 {
        margin-bottom: 120px
    }

    .ml-tablet-120 {
        margin-left: 120px
    }

    .pb-tablet-120 {
        padding-bottom: 120px
    }

    .w-tablet-10 {
        width: 10px;
        max-width: 100%
    }

    .w-tablet-20 {
        width: 20px;
        max-width: 100%
    }

    .w-tablet-30 {
        width: 30px;
        max-width: 100%
    }

    .w-tablet-40 {
        width: 40px;
        max-width: 100%
    }

    .w-tablet-50 {
        width: 50px;
        max-width: 100%
    }

    .w-tablet-60 {
        width: 60px;
        max-width: 100%
    }

    .w-tablet-70 {
        width: 70px;
        max-width: 100%
    }

    .w-tablet-80 {
        width: 80px;
        max-width: 100%
    }

    .w-tablet-90 {
        width: 90px;
        max-width: 100%
    }

    .w-tablet-100 {
        width: 100px;
        max-width: 100%
    }

    .w-tablet-110 {
        width: 110px;
        max-width: 100%
    }

    .w-tablet-120 {
        width: 120px;
        max-width: 100%
    }

    .w-tablet-130 {
        width: 130px;
        max-width: 100%
    }

    .w-tablet-140 {
        width: 140px;
        max-width: 100%
    }

    .w-tablet-150 {
        width: 150px;
        max-width: 100%
    }

    .w-tablet-160 {
        width: 160px;
        max-width: 100%
    }

    .w-tablet-170 {
        width: 170px;
        max-width: 100%
    }

    .w-tablet-180 {
        width: 180px;
        max-width: 100%
    }

    .w-tablet-190 {
        width: 190px;
        max-width: 100%
    }

    .w-tablet-200 {
        width: 200px;
        max-width: 100%
    }

    .w-tablet-210 {
        width: 210px;
        max-width: 100%
    }

    .w-tablet-220 {
        width: 220px;
        max-width: 100%
    }

    .w-tablet-230 {
        width: 230px;
        max-width: 100%
    }

    .w-tablet-240 {
        width: 240px;
        max-width: 100%
    }

    .w-tablet-250 {
        width: 250px;
        max-width: 100%
    }

    .w-tablet-260 {
        width: 260px;
        max-width: 100%
    }

    .w-tablet-270 {
        width: 270px;
        max-width: 100%
    }

    .w-tablet-280 {
        width: 280px;
        max-width: 100%
    }

    .w-tablet-290 {
        width: 290px;
        max-width: 100%
    }

    .w-tablet-300 {
        width: 300px;
        max-width: 100%
    }

    .w-tablet-310 {
        width: 310px;
        max-width: 100%
    }

    .w-tablet-320 {
        width: 320px;
        max-width: 100%
    }

    .w-tablet-330 {
        width: 330px;
        max-width: 100%
    }

    .w-tablet-340 {
        width: 340px;
        max-width: 100%
    }

    .w-tablet-350 {
        width: 350px;
        max-width: 100%
    }

    .w-tablet-360 {
        width: 360px;
        max-width: 100%
    }

    .w-tablet-370 {
        width: 370px;
        max-width: 100%
    }

    .w-tablet-380 {
        width: 380px;
        max-width: 100%
    }

    .w-tablet-390 {
        width: 390px;
        max-width: 100%
    }

    .w-tablet-400 {
        width: 400px;
        max-width: 100%
    }

    .w-tablet-410 {
        width: 410px;
        max-width: 100%
    }

    .w-tablet-420 {
        width: 420px;
        max-width: 100%
    }

    .w-tablet-430 {
        width: 430px;
        max-width: 100%
    }

    .w-tablet-440 {
        width: 440px;
        max-width: 100%
    }

    .w-tablet-450 {
        width: 450px;
        max-width: 100%
    }

    .w-tablet-460 {
        width: 460px;
        max-width: 100%
    }

    .w-tablet-470 {
        width: 470px;
        max-width: 100%
    }

    .w-tablet-480 {
        width: 480px;
        max-width: 100%
    }

    .w-tablet-490 {
        width: 490px;
        max-width: 100%
    }

    .w-tablet-500 {
        width: 500px;
        max-width: 100%
    }

    .w-tablet-510 {
        width: 510px;
        max-width: 100%
    }

    .w-tablet-520 {
        width: 520px;
        max-width: 100%
    }

    .w-tablet-530 {
        width: 530px;
        max-width: 100%
    }

    .w-tablet-540 {
        width: 540px;
        max-width: 100%
    }

    .w-tablet-550 {
        width: 550px;
        max-width: 100%
    }

    .w-tablet-560 {
        width: 560px;
        max-width: 100%
    }

    .w-tablet-570 {
        width: 570px;
        max-width: 100%
    }

    .w-tablet-580 {
        width: 580px;
        max-width: 100%
    }

    .w-tablet-590 {
        width: 590px;
        max-width: 100%
    }

    .w-tablet-600 {
        width: 600px;
        max-width: 100%
    }

    .w-tablet-610 {
        width: 610px;
        max-width: 100%
    }

    .w-tablet-620 {
        width: 620px;
        max-width: 100%
    }

    .w-tablet-630 {
        width: 630px;
        max-width: 100%
    }

    .w-tablet-640 {
        width: 640px;
        max-width: 100%
    }

    .w-tablet-650 {
        width: 650px;
        max-width: 100%
    }

    .w-tablet-660 {
        width: 660px;
        max-width: 100%
    }

    .w-tablet-670 {
        width: 670px;
        max-width: 100%
    }

    .w-tablet-680 {
        width: 680px;
        max-width: 100%
    }

    .w-tablet-690 {
        width: 690px;
        max-width: 100%
    }

    .w-tablet-700 {
        width: 700px;
        max-width: 100%
    }

    .w-tablet-710 {
        width: 710px;
        max-width: 100%
    }

    .w-tablet-720 {
        width: 720px;
        max-width: 100%
    }

    .w-tablet-730 {
        width: 730px;
        max-width: 100%
    }

    .w-tablet-740 {
        width: 740px;
        max-width: 100%
    }

    .w-tablet-750 {
        width: 750px;
        max-width: 100%
    }

    .w-tablet-760 {
        width: 760px;
        max-width: 100%
    }

    .w-tablet-770 {
        width: 770px;
        max-width: 100%
    }

    .w-tablet-780 {
        width: 780px;
        max-width: 100%
    }

    .w-tablet-790 {
        width: 790px;
        max-width: 100%
    }

    .w-tablet-800 {
        width: 800px;
        max-width: 100%
    }

    .w-tablet-810 {
        width: 810px;
        max-width: 100%
    }

    .w-tablet-820 {
        width: 820px;
        max-width: 100%
    }

    .w-tablet-830 {
        width: 830px;
        max-width: 100%
    }

    .w-tablet-840 {
        width: 840px;
        max-width: 100%
    }

    .w-tablet-850 {
        width: 850px;
        max-width: 100%
    }

    .w-tablet-860 {
        width: 860px;
        max-width: 100%
    }

    .w-tablet-870 {
        width: 870px;
        max-width: 100%
    }

    .w-tablet-880 {
        width: 880px;
        max-width: 100%
    }

    .w-tablet-890 {
        width: 890px;
        max-width: 100%
    }

    .w-tablet-900 {
        width: 900px;
        max-width: 100%
    }

    .w-tablet-910 {
        width: 910px;
        max-width: 100%
    }

    .w-tablet-920 {
        width: 920px;
        max-width: 100%
    }

    .w-tablet-930 {
        width: 930px;
        max-width: 100%
    }

    .w-tablet-940 {
        width: 940px;
        max-width: 100%
    }

    .w-tablet-950 {
        width: 950px;
        max-width: 100%
    }

    .w-tablet-960 {
        width: 960px;
        max-width: 100%
    }

    .w-tablet-970 {
        width: 970px;
        max-width: 100%
    }

    .w-tablet-980 {
        width: 980px;
        max-width: 100%
    }

    .w-tablet-990 {
        width: 990px;
        max-width: 100%
    }

    .w-tablet-1000 {
        width: 1000px;
        max-width: 100%
    }
}

@media(min-width: 1024px) {
    .text-desktop-center {
        text-align: center
    }

    .text-desktop-left {
        text-align: left
    }

    .flex-desktop-center {
        display: flex;
        justify-content: center
    }

    .d-desktop-inline {
        display: inline
    }

    .d-desktop-none {
        display: none
    }

    .d-desktop-inline {
        display: inline
    }

    .d-desktop-inline-block {
        display: inline-block
    }

    .d-desktop-block {
        display: block
    }

    .d-desktop-flex {
        display: flex
    }

    .mb-desktop-0 {
        margin-bottom: 0px
    }

    .ml-desktop-0 {
        margin-left: 0px
    }

    .pb-desktop-0 {
        padding-bottom: 0px
    }

    .mb-desktop-4 {
        margin-bottom: 4px
    }

    .ml-desktop-4 {
        margin-left: 4px
    }

    .pb-desktop-4 {
        padding-bottom: 4px
    }

    .mb-desktop-8 {
        margin-bottom: 8px
    }

    .ml-desktop-8 {
        margin-left: 8px
    }

    .pb-desktop-8 {
        padding-bottom: 8px
    }

    .mb-desktop-12 {
        margin-bottom: 12px
    }

    .ml-desktop-12 {
        margin-left: 12px
    }

    .pb-desktop-12 {
        padding-bottom: 12px
    }

    .mb-desktop-16 {
        margin-bottom: 16px
    }

    .ml-desktop-16 {
        margin-left: 16px
    }

    .pb-desktop-16 {
        padding-bottom: 16px
    }

    .mb-desktop-20 {
        margin-bottom: 20px
    }

    .ml-desktop-20 {
        margin-left: 20px
    }

    .pb-desktop-20 {
        padding-bottom: 20px
    }

    .mb-desktop-24 {
        margin-bottom: 24px
    }

    .ml-desktop-24 {
        margin-left: 24px
    }

    .pb-desktop-24 {
        padding-bottom: 24px
    }

    .mb-desktop-28 {
        margin-bottom: 28px
    }

    .ml-desktop-28 {
        margin-left: 28px
    }

    .pb-desktop-28 {
        padding-bottom: 28px
    }

    .mb-desktop-32 {
        margin-bottom: 32px
    }

    .ml-desktop-32 {
        margin-left: 32px
    }

    .pb-desktop-32 {
        padding-bottom: 32px
    }

    .mb-desktop-36 {
        margin-bottom: 36px
    }

    .ml-desktop-36 {
        margin-left: 36px
    }

    .pb-desktop-36 {
        padding-bottom: 36px
    }

    .mb-desktop-40 {
        margin-bottom: 40px
    }

    .ml-desktop-40 {
        margin-left: 40px
    }

    .pb-desktop-40 {
        padding-bottom: 40px
    }

    .mb-desktop-44 {
        margin-bottom: 44px
    }

    .ml-desktop-44 {
        margin-left: 44px
    }

    .pb-desktop-44 {
        padding-bottom: 44px
    }

    .mb-desktop-48 {
        margin-bottom: 48px
    }

    .ml-desktop-48 {
        margin-left: 48px
    }

    .pb-desktop-48 {
        padding-bottom: 48px
    }

    .mb-desktop-52 {
        margin-bottom: 52px
    }

    .ml-desktop-52 {
        margin-left: 52px
    }

    .pb-desktop-52 {
        padding-bottom: 52px
    }

    .mb-desktop-56 {
        margin-bottom: 56px
    }

    .ml-desktop-56 {
        margin-left: 56px
    }

    .pb-desktop-56 {
        padding-bottom: 56px
    }

    .mb-desktop-60 {
        margin-bottom: 60px
    }

    .ml-desktop-60 {
        margin-left: 60px
    }

    .pb-desktop-60 {
        padding-bottom: 60px
    }

    .mb-desktop-64 {
        margin-bottom: 64px
    }

    .ml-desktop-64 {
        margin-left: 64px
    }

    .pb-desktop-64 {
        padding-bottom: 64px
    }

    .mb-desktop-68 {
        margin-bottom: 68px
    }

    .ml-desktop-68 {
        margin-left: 68px
    }

    .pb-desktop-68 {
        padding-bottom: 68px
    }

    .mb-desktop-72 {
        margin-bottom: 72px
    }

    .ml-desktop-72 {
        margin-left: 72px
    }

    .pb-desktop-72 {
        padding-bottom: 72px
    }

    .mb-desktop-76 {
        margin-bottom: 76px
    }

    .ml-desktop-76 {
        margin-left: 76px
    }

    .pb-desktop-76 {
        padding-bottom: 76px
    }

    .mb-desktop-80 {
        margin-bottom: 80px
    }

    .ml-desktop-80 {
        margin-left: 80px
    }

    .pb-desktop-80 {
        padding-bottom: 80px
    }

    .mb-desktop-84 {
        margin-bottom: 84px
    }

    .ml-desktop-84 {
        margin-left: 84px
    }

    .pb-desktop-84 {
        padding-bottom: 84px
    }

    .mb-desktop-88 {
        margin-bottom: 88px
    }

    .ml-desktop-88 {
        margin-left: 88px
    }

    .pb-desktop-88 {
        padding-bottom: 88px
    }

    .mb-desktop-92 {
        margin-bottom: 92px
    }

    .ml-desktop-92 {
        margin-left: 92px
    }

    .pb-desktop-92 {
        padding-bottom: 92px
    }

    .mb-desktop-96 {
        margin-bottom: 96px
    }

    .ml-desktop-96 {
        margin-left: 96px
    }

    .pb-desktop-96 {
        padding-bottom: 96px
    }

    .mb-desktop-100 {
        margin-bottom: 100px
    }

    .ml-desktop-100 {
        margin-left: 100px
    }

    .pb-desktop-100 {
        padding-bottom: 100px
    }

    .mb-desktop-104 {
        margin-bottom: 104px
    }

    .ml-desktop-104 {
        margin-left: 104px
    }

    .pb-desktop-104 {
        padding-bottom: 104px
    }

    .mb-desktop-108 {
        margin-bottom: 108px
    }

    .ml-desktop-108 {
        margin-left: 108px
    }

    .pb-desktop-108 {
        padding-bottom: 108px
    }

    .mb-desktop-112 {
        margin-bottom: 112px
    }

    .ml-desktop-112 {
        margin-left: 112px
    }

    .pb-desktop-112 {
        padding-bottom: 112px
    }

    .mb-desktop-116 {
        margin-bottom: 116px
    }

    .ml-desktop-116 {
        margin-left: 116px
    }

    .pb-desktop-116 {
        padding-bottom: 116px
    }

    .mb-desktop-120 {
        margin-bottom: 120px
    }

    .ml-desktop-120 {
        margin-left: 120px
    }

    .pb-desktop-120 {
        padding-bottom: 120px
    }

    .w-desktop-10 {
        width: 10px;
        max-width: 100%
    }

    .w-desktop-20 {
        width: 20px;
        max-width: 100%
    }

    .w-desktop-30 {
        width: 30px;
        max-width: 100%
    }

    .w-desktop-40 {
        width: 40px;
        max-width: 100%
    }

    .w-desktop-50 {
        width: 50px;
        max-width: 100%
    }

    .w-desktop-60 {
        width: 60px;
        max-width: 100%
    }

    .w-desktop-70 {
        width: 70px;
        max-width: 100%
    }

    .w-desktop-80 {
        width: 80px;
        max-width: 100%
    }

    .w-desktop-90 {
        width: 90px;
        max-width: 100%
    }

    .w-desktop-100 {
        width: 100px;
        max-width: 100%
    }

    .w-desktop-110 {
        width: 110px;
        max-width: 100%
    }

    .w-desktop-120 {
        width: 120px;
        max-width: 100%
    }

    .w-desktop-130 {
        width: 130px;
        max-width: 100%
    }

    .w-desktop-140 {
        width: 140px;
        max-width: 100%
    }

    .w-desktop-150 {
        width: 150px;
        max-width: 100%
    }

    .w-desktop-160 {
        width: 160px;
        max-width: 100%
    }

    .w-desktop-170 {
        width: 170px;
        max-width: 100%
    }

    .w-desktop-180 {
        width: 180px;
        max-width: 100%
    }

    .w-desktop-190 {
        width: 190px;
        max-width: 100%
    }

    .w-desktop-200 {
        width: 200px;
        max-width: 100%
    }

    .w-desktop-210 {
        width: 210px;
        max-width: 100%
    }

    .w-desktop-220 {
        width: 220px;
        max-width: 100%
    }

    .w-desktop-230 {
        width: 230px;
        max-width: 100%
    }

    .w-desktop-240 {
        width: 240px;
        max-width: 100%
    }

    .w-desktop-250 {
        width: 250px;
        max-width: 100%
    }

    .w-desktop-260 {
        width: 260px;
        max-width: 100%
    }

    .w-desktop-270 {
        width: 270px;
        max-width: 100%
    }

    .w-desktop-280 {
        width: 280px;
        max-width: 100%
    }

    .w-desktop-290 {
        width: 290px;
        max-width: 100%
    }

    .w-desktop-300 {
        width: 300px;
        max-width: 100%
    }

    .w-desktop-310 {
        width: 310px;
        max-width: 100%
    }

    .w-desktop-320 {
        width: 320px;
        max-width: 100%
    }

    .w-desktop-330 {
        width: 330px;
        max-width: 100%
    }

    .w-desktop-340 {
        width: 340px;
        max-width: 100%
    }

    .w-desktop-350 {
        width: 350px;
        max-width: 100%
    }

    .w-desktop-360 {
        width: 360px;
        max-width: 100%
    }

    .w-desktop-370 {
        width: 370px;
        max-width: 100%
    }

    .w-desktop-380 {
        width: 380px;
        max-width: 100%
    }

    .w-desktop-390 {
        width: 390px;
        max-width: 100%
    }

    .w-desktop-400 {
        width: 400px;
        max-width: 100%
    }

    .w-desktop-410 {
        width: 410px;
        max-width: 100%
    }

    .w-desktop-420 {
        width: 420px;
        max-width: 100%
    }

    .w-desktop-430 {
        width: 430px;
        max-width: 100%
    }

    .w-desktop-440 {
        width: 440px;
        max-width: 100%
    }

    .w-desktop-450 {
        width: 450px;
        max-width: 100%
    }

    .w-desktop-460 {
        width: 460px;
        max-width: 100%
    }

    .w-desktop-470 {
        width: 470px;
        max-width: 100%
    }

    .w-desktop-480 {
        width: 480px;
        max-width: 100%
    }

    .w-desktop-490 {
        width: 490px;
        max-width: 100%
    }

    .w-desktop-500 {
        width: 500px;
        max-width: 100%
    }

    .w-desktop-510 {
        width: 510px;
        max-width: 100%
    }

    .w-desktop-520 {
        width: 520px;
        max-width: 100%
    }

    .w-desktop-530 {
        width: 530px;
        max-width: 100%
    }

    .w-desktop-540 {
        width: 540px;
        max-width: 100%
    }

    .w-desktop-550 {
        width: 550px;
        max-width: 100%
    }

    .w-desktop-560 {
        width: 560px;
        max-width: 100%
    }

    .w-desktop-570 {
        width: 570px;
        max-width: 100%
    }

    .w-desktop-580 {
        width: 580px;
        max-width: 100%
    }

    .w-desktop-590 {
        width: 590px;
        max-width: 100%
    }

    .w-desktop-600 {
        width: 600px;
        max-width: 100%
    }

    .w-desktop-610 {
        width: 610px;
        max-width: 100%
    }

    .w-desktop-620 {
        width: 620px;
        max-width: 100%
    }

    .w-desktop-630 {
        width: 630px;
        max-width: 100%
    }

    .w-desktop-640 {
        width: 640px;
        max-width: 100%
    }

    .w-desktop-650 {
        width: 650px;
        max-width: 100%
    }

    .w-desktop-660 {
        width: 660px;
        max-width: 100%
    }

    .w-desktop-670 {
        width: 670px;
        max-width: 100%
    }

    .w-desktop-680 {
        width: 680px;
        max-width: 100%
    }

    .w-desktop-690 {
        width: 690px;
        max-width: 100%
    }

    .w-desktop-700 {
        width: 700px;
        max-width: 100%
    }

    .w-desktop-710 {
        width: 710px;
        max-width: 100%
    }

    .w-desktop-720 {
        width: 720px;
        max-width: 100%
    }

    .w-desktop-730 {
        width: 730px;
        max-width: 100%
    }

    .w-desktop-740 {
        width: 740px;
        max-width: 100%
    }

    .w-desktop-750 {
        width: 750px;
        max-width: 100%
    }

    .w-desktop-760 {
        width: 760px;
        max-width: 100%
    }

    .w-desktop-770 {
        width: 770px;
        max-width: 100%
    }

    .w-desktop-780 {
        width: 780px;
        max-width: 100%
    }

    .w-desktop-790 {
        width: 790px;
        max-width: 100%
    }

    .w-desktop-800 {
        width: 800px;
        max-width: 100%
    }

    .w-desktop-810 {
        width: 810px;
        max-width: 100%
    }

    .w-desktop-820 {
        width: 820px;
        max-width: 100%
    }

    .w-desktop-830 {
        width: 830px;
        max-width: 100%
    }

    .w-desktop-840 {
        width: 840px;
        max-width: 100%
    }

    .w-desktop-850 {
        width: 850px;
        max-width: 100%
    }

    .w-desktop-860 {
        width: 860px;
        max-width: 100%
    }

    .w-desktop-870 {
        width: 870px;
        max-width: 100%
    }

    .w-desktop-880 {
        width: 880px;
        max-width: 100%
    }

    .w-desktop-890 {
        width: 890px;
        max-width: 100%
    }

    .w-desktop-900 {
        width: 900px;
        max-width: 100%
    }

    .w-desktop-910 {
        width: 910px;
        max-width: 100%
    }

    .w-desktop-920 {
        width: 920px;
        max-width: 100%
    }

    .w-desktop-930 {
        width: 930px;
        max-width: 100%
    }

    .w-desktop-940 {
        width: 940px;
        max-width: 100%
    }

    .w-desktop-950 {
        width: 950px;
        max-width: 100%
    }

    .w-desktop-960 {
        width: 960px;
        max-width: 100%
    }

    .w-desktop-970 {
        width: 970px;
        max-width: 100%
    }

    .w-desktop-980 {
        width: 980px;
        max-width: 100%
    }

    .w-desktop-990 {
        width: 990px;
        max-width: 100%
    }

    .w-desktop-1000 {
        width: 1000px;
        max-width: 100%
    }
}

@media(min-width: 1408px) {
    .text-fullhd-center {
        text-align: center
    }

    .text-fullhd-left {
        text-align: left
    }

    .flex-fullhd-center {
        display: flex;
        justify-content: center
    }

    .d-fullhd-inline {
        display: inline
    }

    .d-fullhd-none {
        display: none
    }

    .d-fullhd-inline {
        display: inline
    }

    .d-fullhd-inline-block {
        display: inline-block
    }

    .d-fullhd-block {
        display: block
    }

    .d-fullhd-flex {
        display: flex
    }

    .mb-fullhd-0 {
        margin-bottom: 0px
    }

    .ml-fullhd-0 {
        margin-left: 0px
    }

    .pb-fullhd-0 {
        padding-bottom: 0px
    }

    .mb-fullhd-4 {
        margin-bottom: 4px
    }

    .ml-fullhd-4 {
        margin-left: 4px
    }

    .pb-fullhd-4 {
        padding-bottom: 4px
    }

    .mb-fullhd-8 {
        margin-bottom: 8px
    }

    .ml-fullhd-8 {
        margin-left: 8px
    }

    .pb-fullhd-8 {
        padding-bottom: 8px
    }

    .mb-fullhd-12 {
        margin-bottom: 12px
    }

    .ml-fullhd-12 {
        margin-left: 12px
    }

    .pb-fullhd-12 {
        padding-bottom: 12px
    }

    .mb-fullhd-16 {
        margin-bottom: 16px
    }

    .ml-fullhd-16 {
        margin-left: 16px
    }

    .pb-fullhd-16 {
        padding-bottom: 16px
    }

    .mb-fullhd-20 {
        margin-bottom: 20px
    }

    .ml-fullhd-20 {
        margin-left: 20px
    }

    .pb-fullhd-20 {
        padding-bottom: 20px
    }

    .mb-fullhd-24 {
        margin-bottom: 24px
    }

    .ml-fullhd-24 {
        margin-left: 24px
    }

    .pb-fullhd-24 {
        padding-bottom: 24px
    }

    .mb-fullhd-28 {
        margin-bottom: 28px
    }

    .ml-fullhd-28 {
        margin-left: 28px
    }

    .pb-fullhd-28 {
        padding-bottom: 28px
    }

    .mb-fullhd-32 {
        margin-bottom: 32px
    }

    .ml-fullhd-32 {
        margin-left: 32px
    }

    .pb-fullhd-32 {
        padding-bottom: 32px
    }

    .mb-fullhd-36 {
        margin-bottom: 36px
    }

    .ml-fullhd-36 {
        margin-left: 36px
    }

    .pb-fullhd-36 {
        padding-bottom: 36px
    }

    .mb-fullhd-40 {
        margin-bottom: 40px
    }

    .ml-fullhd-40 {
        margin-left: 40px
    }

    .pb-fullhd-40 {
        padding-bottom: 40px
    }

    .mb-fullhd-44 {
        margin-bottom: 44px
    }

    .ml-fullhd-44 {
        margin-left: 44px
    }

    .pb-fullhd-44 {
        padding-bottom: 44px
    }

    .mb-fullhd-48 {
        margin-bottom: 48px
    }

    .ml-fullhd-48 {
        margin-left: 48px
    }

    .pb-fullhd-48 {
        padding-bottom: 48px
    }

    .mb-fullhd-52 {
        margin-bottom: 52px
    }

    .ml-fullhd-52 {
        margin-left: 52px
    }

    .pb-fullhd-52 {
        padding-bottom: 52px
    }

    .mb-fullhd-56 {
        margin-bottom: 56px
    }

    .ml-fullhd-56 {
        margin-left: 56px
    }

    .pb-fullhd-56 {
        padding-bottom: 56px
    }

    .mb-fullhd-60 {
        margin-bottom: 60px
    }

    .ml-fullhd-60 {
        margin-left: 60px
    }

    .pb-fullhd-60 {
        padding-bottom: 60px
    }

    .mb-fullhd-64 {
        margin-bottom: 64px
    }

    .ml-fullhd-64 {
        margin-left: 64px
    }

    .pb-fullhd-64 {
        padding-bottom: 64px
    }

    .mb-fullhd-68 {
        margin-bottom: 68px
    }

    .ml-fullhd-68 {
        margin-left: 68px
    }

    .pb-fullhd-68 {
        padding-bottom: 68px
    }

    .mb-fullhd-72 {
        margin-bottom: 72px
    }

    .ml-fullhd-72 {
        margin-left: 72px
    }

    .pb-fullhd-72 {
        padding-bottom: 72px
    }

    .mb-fullhd-76 {
        margin-bottom: 76px
    }

    .ml-fullhd-76 {
        margin-left: 76px
    }

    .pb-fullhd-76 {
        padding-bottom: 76px
    }

    .mb-fullhd-80 {
        margin-bottom: 80px
    }

    .ml-fullhd-80 {
        margin-left: 80px
    }

    .pb-fullhd-80 {
        padding-bottom: 80px
    }

    .mb-fullhd-84 {
        margin-bottom: 84px
    }

    .ml-fullhd-84 {
        margin-left: 84px
    }

    .pb-fullhd-84 {
        padding-bottom: 84px
    }

    .mb-fullhd-88 {
        margin-bottom: 88px
    }

    .ml-fullhd-88 {
        margin-left: 88px
    }

    .pb-fullhd-88 {
        padding-bottom: 88px
    }

    .mb-fullhd-92 {
        margin-bottom: 92px
    }

    .ml-fullhd-92 {
        margin-left: 92px
    }

    .pb-fullhd-92 {
        padding-bottom: 92px
    }

    .mb-fullhd-96 {
        margin-bottom: 96px
    }

    .ml-fullhd-96 {
        margin-left: 96px
    }

    .pb-fullhd-96 {
        padding-bottom: 96px
    }

    .mb-fullhd-100 {
        margin-bottom: 100px
    }

    .ml-fullhd-100 {
        margin-left: 100px
    }

    .pb-fullhd-100 {
        padding-bottom: 100px
    }

    .mb-fullhd-104 {
        margin-bottom: 104px
    }

    .ml-fullhd-104 {
        margin-left: 104px
    }

    .pb-fullhd-104 {
        padding-bottom: 104px
    }

    .mb-fullhd-108 {
        margin-bottom: 108px
    }

    .ml-fullhd-108 {
        margin-left: 108px
    }

    .pb-fullhd-108 {
        padding-bottom: 108px
    }

    .mb-fullhd-112 {
        margin-bottom: 112px
    }

    .ml-fullhd-112 {
        margin-left: 112px
    }

    .pb-fullhd-112 {
        padding-bottom: 112px
    }

    .mb-fullhd-116 {
        margin-bottom: 116px
    }

    .ml-fullhd-116 {
        margin-left: 116px
    }

    .pb-fullhd-116 {
        padding-bottom: 116px
    }

    .mb-fullhd-120 {
        margin-bottom: 120px
    }

    .ml-fullhd-120 {
        margin-left: 120px
    }

    .pb-fullhd-120 {
        padding-bottom: 120px
    }

    .w-fullhd-10 {
        width: 10px;
        max-width: 100%
    }

    .w-fullhd-20 {
        width: 20px;
        max-width: 100%
    }

    .w-fullhd-30 {
        width: 30px;
        max-width: 100%
    }

    .w-fullhd-40 {
        width: 40px;
        max-width: 100%
    }

    .w-fullhd-50 {
        width: 50px;
        max-width: 100%
    }

    .w-fullhd-60 {
        width: 60px;
        max-width: 100%
    }

    .w-fullhd-70 {
        width: 70px;
        max-width: 100%
    }

    .w-fullhd-80 {
        width: 80px;
        max-width: 100%
    }

    .w-fullhd-90 {
        width: 90px;
        max-width: 100%
    }

    .w-fullhd-100 {
        width: 100px;
        max-width: 100%
    }

    .w-fullhd-110 {
        width: 110px;
        max-width: 100%
    }

    .w-fullhd-120 {
        width: 120px;
        max-width: 100%
    }

    .w-fullhd-130 {
        width: 130px;
        max-width: 100%
    }

    .w-fullhd-140 {
        width: 140px;
        max-width: 100%
    }

    .w-fullhd-150 {
        width: 150px;
        max-width: 100%
    }

    .w-fullhd-160 {
        width: 160px;
        max-width: 100%
    }

    .w-fullhd-170 {
        width: 170px;
        max-width: 100%
    }

    .w-fullhd-180 {
        width: 180px;
        max-width: 100%
    }

    .w-fullhd-190 {
        width: 190px;
        max-width: 100%
    }

    .w-fullhd-200 {
        width: 200px;
        max-width: 100%
    }

    .w-fullhd-210 {
        width: 210px;
        max-width: 100%
    }

    .w-fullhd-220 {
        width: 220px;
        max-width: 100%
    }

    .w-fullhd-230 {
        width: 230px;
        max-width: 100%
    }

    .w-fullhd-240 {
        width: 240px;
        max-width: 100%
    }

    .w-fullhd-250 {
        width: 250px;
        max-width: 100%
    }

    .w-fullhd-260 {
        width: 260px;
        max-width: 100%
    }

    .w-fullhd-270 {
        width: 270px;
        max-width: 100%
    }

    .w-fullhd-280 {
        width: 280px;
        max-width: 100%
    }

    .w-fullhd-290 {
        width: 290px;
        max-width: 100%
    }

    .w-fullhd-300 {
        width: 300px;
        max-width: 100%
    }

    .w-fullhd-310 {
        width: 310px;
        max-width: 100%
    }

    .w-fullhd-320 {
        width: 320px;
        max-width: 100%
    }

    .w-fullhd-330 {
        width: 330px;
        max-width: 100%
    }

    .w-fullhd-340 {
        width: 340px;
        max-width: 100%
    }

    .w-fullhd-350 {
        width: 350px;
        max-width: 100%
    }

    .w-fullhd-360 {
        width: 360px;
        max-width: 100%
    }

    .w-fullhd-370 {
        width: 370px;
        max-width: 100%
    }

    .w-fullhd-380 {
        width: 380px;
        max-width: 100%
    }

    .w-fullhd-390 {
        width: 390px;
        max-width: 100%
    }

    .w-fullhd-400 {
        width: 400px;
        max-width: 100%
    }

    .w-fullhd-410 {
        width: 410px;
        max-width: 100%
    }

    .w-fullhd-420 {
        width: 420px;
        max-width: 100%
    }

    .w-fullhd-430 {
        width: 430px;
        max-width: 100%
    }

    .w-fullhd-440 {
        width: 440px;
        max-width: 100%
    }

    .w-fullhd-450 {
        width: 450px;
        max-width: 100%
    }

    .w-fullhd-460 {
        width: 460px;
        max-width: 100%
    }

    .w-fullhd-470 {
        width: 470px;
        max-width: 100%
    }

    .w-fullhd-480 {
        width: 480px;
        max-width: 100%
    }

    .w-fullhd-490 {
        width: 490px;
        max-width: 100%
    }

    .w-fullhd-500 {
        width: 500px;
        max-width: 100%
    }

    .w-fullhd-510 {
        width: 510px;
        max-width: 100%
    }

    .w-fullhd-520 {
        width: 520px;
        max-width: 100%
    }

    .w-fullhd-530 {
        width: 530px;
        max-width: 100%
    }

    .w-fullhd-540 {
        width: 540px;
        max-width: 100%
    }

    .w-fullhd-550 {
        width: 550px;
        max-width: 100%
    }

    .w-fullhd-560 {
        width: 560px;
        max-width: 100%
    }

    .w-fullhd-570 {
        width: 570px;
        max-width: 100%
    }

    .w-fullhd-580 {
        width: 580px;
        max-width: 100%
    }

    .w-fullhd-590 {
        width: 590px;
        max-width: 100%
    }

    .w-fullhd-600 {
        width: 600px;
        max-width: 100%
    }

    .w-fullhd-610 {
        width: 610px;
        max-width: 100%
    }

    .w-fullhd-620 {
        width: 620px;
        max-width: 100%
    }

    .w-fullhd-630 {
        width: 630px;
        max-width: 100%
    }

    .w-fullhd-640 {
        width: 640px;
        max-width: 100%
    }

    .w-fullhd-650 {
        width: 650px;
        max-width: 100%
    }

    .w-fullhd-660 {
        width: 660px;
        max-width: 100%
    }

    .w-fullhd-670 {
        width: 670px;
        max-width: 100%
    }

    .w-fullhd-680 {
        width: 680px;
        max-width: 100%
    }

    .w-fullhd-690 {
        width: 690px;
        max-width: 100%
    }

    .w-fullhd-700 {
        width: 700px;
        max-width: 100%
    }

    .w-fullhd-710 {
        width: 710px;
        max-width: 100%
    }

    .w-fullhd-720 {
        width: 720px;
        max-width: 100%
    }

    .w-fullhd-730 {
        width: 730px;
        max-width: 100%
    }

    .w-fullhd-740 {
        width: 740px;
        max-width: 100%
    }

    .w-fullhd-750 {
        width: 750px;
        max-width: 100%
    }

    .w-fullhd-760 {
        width: 760px;
        max-width: 100%
    }

    .w-fullhd-770 {
        width: 770px;
        max-width: 100%
    }

    .w-fullhd-780 {
        width: 780px;
        max-width: 100%
    }

    .w-fullhd-790 {
        width: 790px;
        max-width: 100%
    }

    .w-fullhd-800 {
        width: 800px;
        max-width: 100%
    }

    .w-fullhd-810 {
        width: 810px;
        max-width: 100%
    }

    .w-fullhd-820 {
        width: 820px;
        max-width: 100%
    }

    .w-fullhd-830 {
        width: 830px;
        max-width: 100%
    }

    .w-fullhd-840 {
        width: 840px;
        max-width: 100%
    }

    .w-fullhd-850 {
        width: 850px;
        max-width: 100%
    }

    .w-fullhd-860 {
        width: 860px;
        max-width: 100%
    }

    .w-fullhd-870 {
        width: 870px;
        max-width: 100%
    }

    .w-fullhd-880 {
        width: 880px;
        max-width: 100%
    }

    .w-fullhd-890 {
        width: 890px;
        max-width: 100%
    }

    .w-fullhd-900 {
        width: 900px;
        max-width: 100%
    }

    .w-fullhd-910 {
        width: 910px;
        max-width: 100%
    }

    .w-fullhd-920 {
        width: 920px;
        max-width: 100%
    }

    .w-fullhd-930 {
        width: 930px;
        max-width: 100%
    }

    .w-fullhd-940 {
        width: 940px;
        max-width: 100%
    }

    .w-fullhd-950 {
        width: 950px;
        max-width: 100%
    }

    .w-fullhd-960 {
        width: 960px;
        max-width: 100%
    }

    .w-fullhd-970 {
        width: 970px;
        max-width: 100%
    }

    .w-fullhd-980 {
        width: 980px;
        max-width: 100%
    }

    .w-fullhd-990 {
        width: 990px;
        max-width: 100%
    }

    .w-fullhd-1000 {
        width: 1000px;
        max-width: 100%
    }
}

.align-items-center {
    align-items: center
}

.w-full {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box
}

.gap-0 {
    gap: 0px
}

.gap-4 {
    gap: 4px
}

.gap-8 {
    gap: 8px
}

.gap-12 {
    gap: 12px
}

.gap-16 {
    gap: 16px
}

.gap-20 {
    gap: 20px
}

.gap-24 {
    gap: 24px
}

.gap-28 {
    gap: 28px
}

.gap-32 {
    gap: 32px
}

.gap-36 {
    gap: 36px
}

.gap-40 {
    gap: 40px
}

#form-top header,
.form-page header {
    margin-bottom: 20px
}

#form-top .top-alert,
.form-page .top-alert {
    background-color: #fff9ee;
    border: 2px solid #f7973a;
    padding: 16px;
    margin: 0 20px 20px
}

@media(min-width: 1024px) {

    #form-top .top-alert,
    .form-page .top-alert {
        max-width: 690px;
        margin: 0 auto 40px;
        padding: 16px 40px
    }
}

#form-top .alert-title,
.form-page .alert-title {
    color: #f7973a;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: .32px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .25rem;
    margin-left: -0.5em;
    margin-right: -0.5em
}

#form-top .alert-title::before,
.form-page .alert-title::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: url(../img/common/icon/attention.svg) no-repeat;
    background-size: contain
}

#form-top .alert-text,
.form-page .alert-text {
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: .28px
}

@media(min-width: 1024px) {

    #form-top .alert-text,
    .form-page .alert-text {
        font-size: 14px
    }
}

#form-top .input-caution,
.form-page .input-caution {
    display: inline-flex;
    padding: .5rem;
    align-items: center;
    gap: .5rem;
    align-self: stretch;
    position: relative;
    border-radius: 8px;
    background: #fff9ee;
    font-size: .875rem;
    width: auto
}

#form-top .input-caution::before,
.form-page .input-caution::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: url(../img/common/icon/attention.svg) no-repeat;
    background-size: contain
}

#form-top .class-input-table,
.form-page .class-input-table {
    border-spacing: 16px 0;
    margin: 0 -16px 24px
}

#form-top .class-input-table th,
.form-page .class-input-table th {
    width: 28%;
    text-align: left;
    padding: 8px 0
}

#form-top .class-input-table th:first-child,
.form-page .class-input-table th:first-child {
    width: 44%
}

#form-top .class-input-table td,
.form-page .class-input-table td {
    padding: 8px 0
}

#form-top .class-input-table.program-fix-table,
.form-page .class-input-table.program-fix-table {
    margin: 0 0 24px;
    display: block;
    flex-wrap: wrap
}

#form-top .class-input-table.program-fix-table thead,
#form-top .class-input-table.program-fix-table tbody,
.form-page .class-input-table.program-fix-table thead,
.form-page .class-input-table.program-fix-table tbody {
    display: block
}

#form-top .class-input-table.program-fix-table tr,
.form-page .class-input-table.program-fix-table tr {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
    padding: 8px 0
}

#form-top .class-input-table.program-fix-table th,
#form-top .class-input-table.program-fix-table td,
.form-page .class-input-table.program-fix-table th,
.form-page .class-input-table.program-fix-table td {
    width: 50%
}

#form-top .class-input-table.program-fix-table th,
.form-page .class-input-table.program-fix-table th {
    padding-bottom: 0
}

#form-top .class-input-table.program-fix-table .postfix,
.form-page .class-input-table.program-fix-table .postfix {
    display: block;
    width: 2.5em;
    flex-shrink: 0
}

@media(min-width: 769px) {

    #form-top .class-input-table.program-fix-table,
    .form-page .class-input-table.program-fix-table {
        display: table;
        width: 620px
    }

    #form-top .class-input-table.program-fix-table tbody,
    #form-top .class-input-table.program-fix-table thead,
    .form-page .class-input-table.program-fix-table tbody,
    .form-page .class-input-table.program-fix-table thead {
        display: table-row-group
    }

    #form-top .class-input-table.program-fix-table tr,
    .form-page .class-input-table.program-fix-table tr {
        display: table-row
    }

    #form-top .class-input-table.program-fix-table th,
    #form-top .class-input-table.program-fix-table td,
    .form-page .class-input-table.program-fix-table th,
    .form-page .class-input-table.program-fix-table td {
        width: 25%
    }

    #form-top .class-input-table.program-fix-table .postfix,
    .form-page .class-input-table.program-fix-table .postfix {
        width: auto
    }
}

#form-top .class-input-summary span,
.form-page .class-input-summary span {
    font-size: 1.25rem;
    font-weight: 700
}

#form-top .agreement-caution,
.form-page .agreement-caution {
    padding: 1.5rem;
    align-self: stretch;
    position: relative;
    border-radius: 8px;
    background: #fff9ee;
    font-size: .875rem;
    width: auto
}

#form-top .confirm-btn,
.form-page .confirm-btn {
    display: flex;
    width: 240px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #628bb4;
    box-sizing: border-box;
    outline: none;
    border: none;
    position: relative;
    transition: background-color .3s ease;
    cursor: pointer
}

#form-top .confirm-btn:hover,
.form-page .confirm-btn:hover {
    background: rgba(98, 139, 180, .7)
}

#form-top .back-btn,
.form-page .back-btn {
    display: flex;
    width: 240px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: #628bb4;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    border: none;
    position: relative;
    transition: background-color .3s ease;
    cursor: pointer
}

#form-top .back-btn:hover,
.form-page .back-btn:hover {
    background: rgba(255, 255, 255, .7)
}

#form-top .school-info-panel .note,
.form-page .school-info-panel .note {
    opacity: 1;
    transition: all .3s ease
}

#form-top .school-info-panel .school-info,
.form-page .school-info-panel .school-info {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease
}

#form-top .school-info-panel.selected .note,
.form-page .school-info-panel.selected .note {
    height: 0;
    opacity: 0;
    overflow: hidden
}

#form-top .school-info-panel.selected .school-info,
.form-page .school-info-panel.selected .school-info {
    height: auto;
    opacity: 1
}

#form-top .shool-info-change,
.form-page .shool-info-change {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .3s ease
}

#form-top .shool-info-change.has-change,
.form-page .shool-info-change.has-change {
    height: auto;
    opacity: 1
}

#form-top .schedule-summary,
.form-page .schedule-summary {
    padding-right: 16px;
    scrollbar-color: #628bb4 #eee;
    margin: 0
}

#form-top .schedule-summary dt,
.form-page .schedule-summary dt {
    color: #2c3553;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 4px
}

#form-top .schedule-summary dd,
.form-page .schedule-summary dd {
    color: #2c3553;
    margin-left: 0;
    margin-bottom: 12px
}

#form-top .schedule-summary>dd,
.form-page .schedule-summary>dd {
    font-weight: 700
}

#form-top .schedule-summary>dd>dl,
.form-page .schedule-summary>dd>dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    font-weight: 400
}

#form-top .schedule-summary>dd>dl dd,
.form-page .schedule-summary>dd>dl dd {
    margin-bottom: 4px
}

@media(min-width: 769px) {

    #form-top .schedule-summary,
    .form-page .schedule-summary {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 14px
    }

    #form-top .schedule-summary dt,
    #form-top .schedule-summary dd,
    .form-page .schedule-summary dt,
    .form-page .schedule-summary dd {
        margin: 0;
        font-size: 1.25rem
    }
}

#form-top .program-summary,
.form-page .program-summary {
    padding-right: 16px;
    scrollbar-color: #628bb4 #eee;
    margin: 0
}

#form-top .program-summary dt,
.form-page .program-summary dt {
    color: #2c3553;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 4px
}

#form-top .program-summary dd,
.form-page .program-summary dd {
    color: #2c3553;
    margin-left: 0;
    font-size: .875rem;
    margin-bottom: 12px
}

#form-top .program-summary dd .time,
.form-page .program-summary dd .time {
    font-size: 1rem;
    font-weight: bold;
    padding-left: .25em
}

@media(min-width: 769px) {

    #form-top .program-summary,
    .form-page .program-summary {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        gap: 14px
    }

    #form-top .program-summary dt,
    .form-page .program-summary dt {
        margin: 0;
        font-size: 1.25rem
    }

    #form-top .program-summary dd,
    .form-page .program-summary dd {
        margin: 0;
        font-size: 1rem
    }

    #form-top .program-summary dd .time,
    .form-page .program-summary dd .time {
        font-size: 1.25rem
    }
}

#form-top .radio-program-change label,
.form-page .radio-program-change label {
    font-size: 1rem
}

#form-top .program-info-change,
.form-page .program-info-change {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .3s ease
}

#form-top .program-info-change.has-change,
.form-page .program-info-change.has-change {
    height: auto;
    opacity: 1
}

#form-top .place-info-change,
.form-page .place-info-change {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .3s ease
}

#form-top .place-info-change.has-change,
.form-page .place-info-change.has-change {
    height: auto;
    opacity: 1
}

#form-top .teacher-info-change,
.form-page .teacher-info-change {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .3s ease
}

#form-top .teacher-info-change.has-change,
.form-page .teacher-info-change.has-change {
    height: auto;
    opacity: 1
}

#form-confirm h3.confirm-notice {
    font-size: 1rem;
    color: #628bb4;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .25rem
}

@media(min-width: 1024px) {
    #form-confirm h3.confirm-notice {
        font-size: 1.5rem;
        column-gap: .5rem
    }
}

#form-confirm h3.confirm-notice::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(../img/common/icon/attention_blue.svg) no-repeat;
    background-size: contain
}

#mypage .content-inner {
    max-width: 510px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center
}

#mypage.mypage-dashboard::before {
    height: 80px
}

@media(min-width: 1024px) {
    #mypage.mypage-dashboard::before {
        height: 92px
    }
}

#mypage.mypage-dashboard .header-logo img {
    max-width: 200px
}

#mypage.mypage-dashboard .header-title img {
    height: 24px
}

#mypage.mypage-dashboard header {
    padding-top: 20px;
    margin: 0 12px 20px
}

@media(min-width: 769px) {
    #mypage.mypage-dashboard header {
        padding-top: 24px;
        margin: 0 12px 32px
    }

    #mypage.mypage-dashboard header .inner {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    #mypage.mypage-dashboard .header-logo img {
        max-width: 300px
    }

    #mypage.mypage-dashboard .header-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        row-gap: 8px
    }
}

#mypage.mypage-dashboard .container {
    margin: 0
}

@media(min-width: 1024px) {
    #mypage.mypage-dashboard .container {
        width: 1200px;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box
    }
}

@media(min-width: 1024px) {
    #mypage.mypage-dashboard .with-sidebar {
        display: grid;
        grid-template-columns: 220px auto;
        column-gap: 32px;
        align-items: flex-start;
        padding-left: 12px;
        padding-right: 12px;
        width: 1224px
    }
}

.mypage-dashboard .bg-cheerup {
    position: relative
}

.mypage-dashboard .bg-cheerup::before {
    content: "";
    width: 92px;
    height: 101px;
    display: block;
    z-index: 0;
    position: absolute;
    right: 12px;
    bottom: 14px;
    background: url(../img/common/character/cheer.png) no-repeat;
    background-size: contain
}

@media(min-width: 769px) {
    .mypage-dashboard .bg-cheerup::before {
        width: 131px;
        height: 145px;
        right: 25px;
        bottom: 25px
    }
}

.mypage-dashboard .current-status {
    color: #f7973a;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    font-size: 1.5rem
}

@media(min-width: 769px) {
    .mypage-dashboard .current-status {
        font-size: 2rem
    }
}

.mypage-dashboard .current-status .status-strong {
    height: 1.5rem;
    display: block
}

@media(min-width: 1024px) {
    .mypage-dashboard .current-status .status-strong {
        height: 2rem
    }
}

.mypage-dashboard #status-panel {
    min-height: 240px
}

.mypage-dashboard .dashboard-main {
    margin: 0 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 50px
}

@media(min-width: 1024px) {
    .mypage-dashboard .dashboard-main {
        margin: 0;
        order: 1
    }
}

.mypage-dashboard .dashboard-main .content-block {
    padding-bottom: 24px;
    margin-bottom: 0
}

@media(min-width: 769px) {
    .mypage-dashboard .dashboard-main .content-block {
        padding: 32px 24px
    }
}

@media(min-width: 769px) {
    .mypage-dashboard .dashboard-main-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(min-width: 769px) {
    .mypage-dashboard .grid-2 {
        grid-column: 1/3
    }
}

.mypage-dashboard .step-container .step {
    display: grid;
    grid-template-columns: 84px auto;
    margin-bottom: 14px
}

.mypage-dashboard .step-container .step .step-numbering {
    background-color: #a2a2a2;
    border-radius: 4px 0 0 0;
    color: #fff;
    padding: 6px 12px 6px;
    text-align: center;
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .32px;
    position: relative
}

.mypage-dashboard .step-container .step .step-numbering .step-number {
    font-size: 1.5em
}

.mypage-dashboard .step-container .step .step-numbering::after {
    content: "";
    display: block;
    width: 100%;
    height: 7px;
    background-color: #a2a2a2;
    position: absolute;
    bottom: 1px;
    left: 0;
    transform: translateY(100%);
    clip-path: polygon(0 0, 0 1px, 50% 100%, 100% 1px, 100% 0)
}

.mypage-dashboard .step-container .step .step-title {
    background-color: #fbfbfb;
    border-radius: 0 4px 4px 0;
    color: #a2a2a2;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .32px;
    padding: 10px 16px
}

.mypage-dashboard .step-container .step.step-completed .step-numbering {
    background-color: #628bb4
}

.mypage-dashboard .step-container .step.step-completed .step-numbering::after {
    background-color: #628bb4
}

.mypage-dashboard .step-container .step.step-completed .step-title {
    background-color: #f0f9ff;
    color: #628bb4
}

.mypage-dashboard .step-container .step.step-current .step-numbering {
    background-color: #f7973a
}

.mypage-dashboard .step-container .step.step-current .step-numbering::after {
    background-color: #f7973a
}

.mypage-dashboard .step-container .step.step-current .step-title {
    background-color: #fff9ee;
    color: #f7973a
}

.mypage-dashboard .step-container .implementation {
    background-color: #f0f9ff;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .32px;
    color: #628bb4;
    padding: 8px 12px;
    text-align: center
}

@media(min-width: 769px) {
    .mypage-dashboard .step-container .implementation {
        text-align: left
    }
}

.mypage-dashboard .mypage-info {
    padding-right: 16px;
    overflow: auto;
    max-height: 210px;
    scrollbar-color: #628bb4 #eee;
    margin: 0
}

.mypage-dashboard .mypage-info dt {
    color: #2c3553;
    font-family: Poppins;
    font-size: .875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%
}

.mypage-dashboard .mypage-info dd {
    color: #1d1d1d;
    margin-left: 0;
    margin-bottom: 12px;
    font-size: .75rem;
    display: flex;
    align-items: center
}

.mypage-dashboard .mypage-info dd .badge {
    color: #fff;
    border-radius: 4px;
    margin-right: .75em
}

.mypage-dashboard .mypage-info dd .badge.badge-green {
    background-color: #4a924a
}

.mypage-dashboard .mypage-info dd .badge.badge-orange {
    background-color: #f7973a
}

@media(min-width: 769px) {
    .mypage-dashboard .mypage-info {
        display: grid;
        grid-template-columns: 100px auto;
        gap: 14px;
        max-height: 136px
    }

    .mypage-dashboard .mypage-info dt,
    .mypage-dashboard .mypage-info dd {
        margin: 0;
        font-size: 1rem
    }
}

.mypage-dashboard .mypage-info.contact-history {
    max-height: 192px
}

@media(min-width: 769px) {
    .mypage-dashboard .mypage-info.contact-history {
        max-height: 98px
    }
}

.mypage-dashboard .dashboard-nav {
    background: linear-gradient(90deg, #628BB4 0%, #6EA8CA 100%);
    color: #fff;
    padding: 4px 4px 40px;
    border-radius: 4px 4px 0 0
}

@media(min-width: 1024px) {
    .mypage-dashboard .dashboard-nav {
        border-radius: 24px;
        padding-bottom: 4px
    }
}

.mypage-dashboard .dashboard-nav ul {
    list-style: none;
    margin-top: 0;
    margin-left: 0;
    padding-left: 0
}

.mypage-dashboard .dashboard-nav .main-menu {
    border-radius: 4px 4px 0 0;
    overflow: hidden
}

@media(min-width: 1024px) {
    .mypage-dashboard .dashboard-nav .main-menu {
        border-radius: 20px 20px 0 0
    }
}

.mypage-dashboard .dashboard-nav .main-menu a {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    padding: 20px 8px;
    border-bottom: 1px solid #f0f9ff;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    position: relative;
    transition: all .3s ease
}

@media(min-width: 1024px) {
    .mypage-dashboard .dashboard-nav .main-menu a {
        box-sizing: border-box;
        height: 72px
    }
}

.mypage-dashboard .dashboard-nav .main-menu a::after {
    content: "";
    display: block;
    width: .75rem;
    height: .75rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    z-index: 1;
    box-sizing: border-box;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translate(0, -50%) rotate(-45deg)
}

.mypage-dashboard .dashboard-nav .main-menu a[target=_blank]::after {
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    border: none;
    right: .5rem;
    top: 50%;
    transform: translate(0, -50%);
    background: url(../img/common//icon/external-link.svg) no-repeat;
    background-size: contain
}

.mypage-dashboard .dashboard-nav .main-menu a.currentpage {
    background: #fff;
    color: #628bb4;
    border-radius: 4px
}

.mypage-dashboard .dashboard-nav .main-menu a.currentpage::after {
    border-color: #628bb4
}

.mypage-dashboard .dashboard-nav .main-menu a:hover:not(.currentpage) {
    background: rgba(255, 255, 255, .3)
}

.mypage-dashboard .dashboard-nav .documents a {
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-decoration-line: underline;
    padding: 16px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all .3s ease
}

.mypage-dashboard .dashboard-nav .documents a::before {
    width: 20px;
    height: 20px;
    content: "";
    display: block;
    background: url(../img/common/icon/pdf.svg) no-repeat;
    background-size: contain
}

.mypage-dashboard .dashboard-nav .documents a:hover {
    opacity: .7
}

@media(min-width: 1024px) {
    .mypage-dashboard .dashboard-nav .documents a {
        padding: 8px 4px
    }
}

.mypage-dashboard .dashboard-nav .home-caravan-link {
    background-color: rgba(255, 255, 255, .8);
    border-radius: 4px;
    padding: 16px;
    color: #628bb4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    transition: all .3s ease
}

.mypage-dashboard .dashboard-nav .home-caravan-link:hover {
    background-color: #fff
}

.mypage-dashboard .dashboard-nav .home-caravan-link .icon-external {
    display: flex;
    align-items: center;
    gap: 4px
}

@media(min-width: 1024px) {
    .mypage-dashboard .dashboard-nav .home-caravan-link {
        border-radius: 4px 4px 20px 20px;
        padding: 16px 10px
    }
}

.mypage-dashboard .dashboard-nav .home-caravan-icon {
    width: 40px;
    height: 40px
}

.mypage-dashboard .contact-summary {
    padding-right: 16px;
    overflow: auto;
    max-height: 210px;
    scrollbar-color: #628bb4 #eee;
    margin: 0
}

.mypage-dashboard .contact-summary dt {
    color: #2c3553;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 4px
}

.mypage-dashboard .contact-summary dd {
    color: #2c3553;
    margin-left: 0;
    margin-bottom: 12px
}

@media(min-width: 769px) {
    .mypage-dashboard .contact-summary {
        display: grid;
        grid-template-columns: 100px auto;
        gap: 14px;
        max-height: 136px
    }

    .mypage-dashboard .contact-summary dt,
    .mypage-dashboard .contact-summary dd {
        margin: 0;
        font-size: 1rem
    }
}

.mypage-dashboard.form-page .top-alert {
    margin-left: 0;
    margin-right: 0
}

@media(min-width: 769px) {
    .mypage-dashboard.form-page .top-alert {
        max-width: none;
        padding: 24px 32px
    }
}

.mypage-dashboard.form-page .top-alert .alert-title {
    justify-content: flex-start
}

.mypage-dashboard .mypage-title {
    font-size: 1.5rem
}

@media(min-width: 769px) {
    .mypage-dashboard .mypage-title {
        font-size: 2rem
    }
}

.mypage-dashboard .table-apply-description {
    display: block;
    font-size: .875rem;
    width: 100%;
    border-collapse: collapse;
    border: none
}

.mypage-dashboard .table-apply-description tbody,
.mypage-dashboard .table-apply-description tr,
.mypage-dashboard .table-apply-description th,
.mypage-dashboard .table-apply-description td {
    display: block
}

.mypage-dashboard .table-apply-description th {
    text-align: left;
    font-weight: 700;
    color: #628bb4;
    padding: 12px 12px 8px
}

.mypage-dashboard .table-apply-description td {
    padding: 0 12px 12px
}

.mypage-dashboard .table-apply-description tr:nth-child(2n-1) th,
.mypage-dashboard .table-apply-description tr:nth-child(2n-1) td {
    background-color: #fbfbfb
}

@media(min-width: 769px) {
    .mypage-dashboard .table-apply-description {
        display: table
    }

    .mypage-dashboard .table-apply-description tbody {
        display: table-row-group
    }

    .mypage-dashboard .table-apply-description tr {
        display: table-row
    }

    .mypage-dashboard .table-apply-description th {
        width: 243px
    }

    .mypage-dashboard .table-apply-description th,
    .mypage-dashboard .table-apply-description td {
        display: table-cell;
        padding: 1rem
    }
}

.page-jidoukan {
    background: #ffeef7
}

.page-jidoukan::before {
    background: linear-gradient(90deg, #E998B9 0%, #F9A0CA 100%)
}

.page-jidoukan .section-title {
    background-image: linear-gradient(90deg, #E998B9 0%, #F9A0CA 100%)
}

.page-jidoukan .block-title::before {
    color: #5b4b54;
    background-color: #ec84af
}

.page-jidoukan .calendarbox::after {
    background-image: url(../img/jidokan/icon-calendar.png)
}

.page-jidoukan .checkbox-group label::before {
    border-color: #ec84af
}

.page-jidoukan .checkbox-group input:checked+label::after {
    border-color: #ec84af
}

.page-jidoukan .checkbox-group.checkbox-promotion table,
.page-jidoukan .checkbox-group.checkbox-promotion tbody,
.page-jidoukan .checkbox-group.checkbox-promotion tr,
.page-jidoukan .checkbox-group.checkbox-promotion th,
.page-jidoukan .checkbox-group.checkbox-promotion td {
    display: block
}

.page-jidoukan .checkbox-group.checkbox-promotion td {
    margin-bottom: 8px
}

@media(min-width: 769px) {
    .page-jidoukan .checkbox-group.checkbox-promotion tr {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr
    }
}

.page-jidoukan .description-other {
    margin-left: 1.75rem
}

.page-jidoukan .description-other textarea.form-input {
    background-color: #eee;
    display: block;
    width: 100%;
    min-height: 0;
    max-width: none
}

.page-jidoukan a {
    color: #ec84af
}

.page-jidoukan .btn-primary {
    background-color: #ec84af
}

.page-jidoukan .submit-btn {
    background: linear-gradient(90deg, #E998B9 0%, #F9A0CA 100%)
}

.page-jidoukan .submit-btn:hover,
.page-jidoukan .submit-btn:disabled {
    background: linear-gradient(90deg, #E998B9 0%, #F9A0CA 100%)
}

.icon {
    width: 50%; 
    margin: 0 auto;
}

@media(min-width: 769px) {
    .icon {
    width: 35%; 
    margin: 0 auto;
    }
}

@media(max-width: 767px) {
    .text-size {
        font-size: 1rem;
        margin: auto 20%;
    }
}

@media(min-width: 768px) {
    .text-size {
        
    }
}