@charset 'utf-8';

@media only screen and (max-width: 750px) {
    .-pc {
        display: none !important;
    }
}

@media only screen and (min-width: 751px) {
    .-sp {
        display: none !important;
    }
}

.-grid {
    display: grid !important;
}

.-grid.-col2 {
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr) !important;
}

.-grid.-col3 {
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr) !important;
}

.-color-danger {
    color: var(--color-danger) !important;
}

.-color-note {
    color: var(--color-text-note) !important;
}

.-bold {
    font-weight: bold !important;
}

.-text-center {
    text-align: center !important;
}

.-text-left {
    text-align: left !important;
}

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

/* 1行から溢れる分は … で省略 */
.-ellipsis {
    display: block;
    overflow: hidden !important;
    width: 100%;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mt-0 {
    margin-top: 0rem !important;
}

.mt-1 {
    margin-top: 1rem !important;
}

.mt-2 {
    margin-top: 2rem !important;
}

.mt-3 {
    margin-top: 3rem !important;
}

.mt-4 {
    margin-top: 4rem !important;
}

.mt-5 {
    margin-top: 5rem !important;
}

.mt-6 {
    margin-top: 6rem !important;
}

.mt-7 {
    margin-top: 7rem !important;
}

.mt-8 {
    margin-top: 8rem !important;
}

.mb-1 {
    margin-bottom: 1rem !important;
}

@media only screen and (min-width: 751px) {
    .pc-mt-0 {
        margin-top: 0rem !important;
    }

    .pc-mt-1 {
        margin-top: 1rem !important;
    }

    .pc-mt-2 {
        margin-top: 2rem !important;
    }

    .pc-mt-3 {
        margin-top: 3rem !important;
    }

    .pc-mt-4 {
        margin-top: 4rem !important;
    }

    .pc-mt-5 {
        margin-top: 5rem !important;
    }

    .pc-mt-6 {
        margin-top: 6rem !important;
    }

    .pc-mt-7 {
        margin-top: 7rem !important;
    }

    .pc-mt-8 {
        margin-top: 8rem !important;
    }

    .pc-mt-16 {
        margin-top: 16rem !important;
    }
}

/* layout
-----------------------------------------------------------*/
html[data-responsive="sp"] .container {
    width: min(100%, 37.5rem);
    margin: 0 auto;
}

html[data-responsive="pc"] .container {
    width: min(100%, 100rem);
    margin: 0 auto;
}

.container_inner {
    padding: 0 2rem;
}

@media only screen and (min-width: 751px) {
    html[data-responsive="pc"] .container_inner {
        padding: 0;
    }
}

/* ============ card ============ */
.card {
    margin-top: 1.5rem;
    padding: 1.7rem 2rem;
    border-radius: 0.6rem;
    background-color: var(--color-card-bg);
}

.card + .card {
    margin-top: 1rem;
}

.card + p.asterisk {
    margin-top: 1.65rem;
}

.card + small.asterisk {
    margin-top: 1.7rem;
}

/* title
-----------------------------------------------------------*/
.title-primary,
.title-secondary {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    font-weight: bold;
    line-height: 1.5;
    color: var(--color-text);
}

.title-primary.-required::after,
.title-secondary.-required::after {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-danger);
    content: "必須";
}

.title-primary {
    font-size: 2.6rem;
}

.container_inner > .title-primary:first-child {
    margin-top: 3.35rem;
}

.title-primary + p {
    margin-top: 1rem;
}

.stepbar + .title-primary {
    margin-top: 1.35rem;
}

.title-secondary {
    margin-top: 3rem;
    font-size: 2rem;
}

.title-secondary + p {
    margin-top: 1.15rem;
}

.stepbar + .title-secondary {
    margin-top: 1.5rem;
}

.title-primary + .title-secondary {
    margin-top: 2rem;
}

.title-teriary {
    margin: 4rem 0 2rem;
    font-size: 1.8rem;
    line-height: 1.2;
}

.title-quaternary {
    margin: 2rem 0 1rem;
    font-size: 1.4rem;
    line-height: 1.2;
}

@media only screen and (min-width: 751px) {
    .title-secondary {
        font-size: 2.4rem;
    }

    .title-teriary {
        margin: 8rem 0 4rem;
    }

    .title-quaternary {
        margin: 4rem 0 2rem;
        font-size: 1.6rem;
    }

    html[data-responsive="pc"] .title-primary {
        font-size: 4.8rem;
    }

    html[data-responsive="pc"] .container_inner > .title-primary:first-child {
        margin-top: 6.8rem;
    }
}

/* list
-----------------------------------------------------------*/
.asterisk {
    display: block;
    position: relative;
    padding-left: 1.3em;
    text-indent: -1.3em;
}

.asterisk::before {
    display: inline-block;
    position: relative;
    width: 1.3em;
    margin: 0;
    text-indent: 0;
    color: inherit;
    content: "※";
}

p + .asterisk,
.asterisk + p,
.formItem + .asterisk {
    margin-top: 0.35rem;
}

/* ============ itemList ============ */
.itemList .itemList_title {
    padding: 0 1rem 0.55rem;
    border-bottom: 0.1rem solid var(--color-border);
    font-size: 1.8rem;
    font-weight: bold;
    text-align: left;
}

.itemList dl {
    display: flex;
    align-items: flex-start;
    width: calc(100% - 2rem);
    margin: 0 auto;
}

.itemList dl:not(:last-child):not(.-noBorder) {
    border-bottom: 0.1rem dotted var(--color-border);
}

.itemList .-fullDl dt,
.itemList .-fullDl dd {
    width: 100%;
    padding-top: 0.2rem;
}

.itemList .-fullDl p,
.itemList .-fullDl small {
    margin: 0;
}

.itemList dt,
.itemList dd {
    padding: 0.65rem 0;
}

.itemList dl.-noBorder dt,
.itemList dl.-noBorder dd {
    padding-bottom: 0;
}

.itemList dl:last-child dt,
.itemList dl:last-child dd {
    padding-bottom: 0;
}

.itemList dt {
    width: 9.8rem;
    vertical-align: top;
}

.itemList dd {
    width: calc(100% - 9.8rem);
    vertical-align: middle;
}

.itemList dt p,
.itemList dd p {
    font-size: 1.4rem;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.itemList dt small,
.itemList dd small {
    color: var(--color-text-note);
}

.itemList dt p.small,
.itemList dd p.small {
    font-size: 1.2rem;
    color: var(--color-text-note);
    font-weight: normal;
}

.itemList dt p {
    font-weight: bold;
    text-align: left;
}

.itemList dd p {
    font-weight: normal;
    text-align: right;
}

.itemList dl.-total {
    align-items: center;
}

.itemList dl.-total dd {
    vertical-align: bottom;
}

.itemList dl.-total dd p {
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1;
}

.itemList dl.-total dd p span {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 1.4rem;
    font-weight: bold;
}

.itemList + p.asterisk {
    margin-top: 1.65rem;
}

.itemList + small.asterisk {
    margin-top: 1.7rem;
}

/* button
-----------------------------------------------------------*/
.btn_wrap {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    margin-top: 4rem;

    justify-items: center;
}

.btn_wrap > form {
    width: 100%;
}

.btn {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 29.5rem;
    height: 5rem;
    padding: 0.8rem 3.5rem;
    border: none;
    border-radius: 2.5rem;
    outline: none;
    background-color: var(--color-primary);
    box-shadow: none;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: var(--color-light);
    transition-duration: 0.3s;
    touch-action: manipulation;
    -moz-appearance: none;
    appearance: none;
}

@media (any-hover: hover) {
    .btn:hover,
    .btn:active,
    .btn:focus {
        opacity: 1;
        color: var(--color-light);
    }

    .btn:not(disabled) {
        cursor: pointer;
    }
}

.btn.-outline {
    border: 0.1rem solid var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
}

.btn.-outline:focus-visible {
    outline-offset: 0rem;
}

.btn.-square {
    height: 4rem;
    padding: 0.65rem 1.4rem;
    border-radius: 0.4rem;
}

.btn.-disabled,
.btn:disabled {
    border-color: var(--color-disabled);
    background-color: var(--color-disabled);
    color: var(--color-light);
    cursor: not-allowed;
}

span[class^="btn_icon-"] {
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 2rem;
    height: 2rem;
    transform: translateY(-50%);
    pointer-events: none;
}

span[class^="btn_icon-"] svg {
    width: 100%;
    height: auto;
}

.btn_icon-left {
    left: 1.5rem;
}

.btn_icon-right {
    right: 1.5rem;
}

.btn.-disabled .btn_icon-right,
.btn:disabled .btn_icon-right {
    display: none;
}

@media only screen and (min-width: 751px) {
    .btn_wrap {
        margin-top: 8rem;
    }
}

/* blankLink
-----------------------------------------------------------*/
.blankLink {
    display: inline;
    position: relative;
    text-decoration: underline;
}

.blankLink:hover {
    text-decoration: underline;
}

.blankLink svg {
    display: inline-block;
    position: relative;
    top: 55%;
    right: 0;
    width: 1rem;
    height: 1rem;
    margin-left: 0.3rem;

    fill: var(--color-primary);
}

.blankLink svg .svgPathFillColor {
    fill: var(--color-icon-fill);
}

.blankLink svg .svgGStrokeColor {
    stroke: var(--color-primary);
}

/* form
-----------------------------------------------------------*/
.formGroup {
    display: block;
    position: relative;
    width: 100%;
}

.formGroup + .formGroup {
    margin-top: 1.7rem;
}

.formLabel {
    cursor: default;
}

.formLabel.-required::after {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-danger);
    content: "必須";
}

.formLabel + .formItem,
.formLabel + .-grid {
    margin-top: 0.65rem;
}

.formItem {
    width: 100%;
}

.formInput.is-invalid {
    border-color: var(--color-danger);
    background-color: var(--color-danger-bg);
}

.formError {
    margin-top: 0.7rem;
    font-size: 1.2rem;
    color: var(--color-danger);
}

.formError:empty {
    margin-top: 0;
}

@media only screen and (min-width: 751px) {
    html[data-responsive="pc"] .formLabel {
        font-size: 1.6rem;
    }

    html[data-responsive="pc"] .formLabel.-required::after {
        font-size: 1.4rem;
    }

    html[data-responsive="pc"] .formError {
        font-size: 1.2rem;
    }

    html[data-responsive="pc"] .formError + .formError {
        margin-top: 0.4rem;
    }
}

/* breadcrumbs
-----------------------------------------------------------*/
.breadcrumbsWrap {
    margin: 8rem 0 0;
}

.breadcrumbs {
    width: 100%;
    margin: 0;
    padding: 0;
}

.breadcrumbs .breadcrumbs_list {
    display: block;
    width: 100%;
}

.breadcrumbs .breadcrumbs_list li {
    display: inline;
    max-width: 100%;
}

.breadcrumbs .breadcrumbs_list li a,
.breadcrumbs .breadcrumbs_list li span {
    display: inline;
    font-size: 1.2rem;
    line-height: 1.8rem;
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.breadcrumbs .breadcrumbs_list li a {
    text-decoration: underline;
    color: var(--color-primary);
}

.breadcrumbs .breadcrumbs_list li span {
    margin-left: -0.3rem;
}

.breadcrumbs .breadcrumbs_list .breadcrumbs_arrow {
    display: inline-block;
    margin: 0;
}

.breadcrumbs .breadcrumbs_list .breadcrumbs_arrow::after {
    display: inline-block;
    position: relative;
    width: 1.13rem;
    height: 1.13rem;
    margin: 0 0.5rem 0 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11.314" height="11.314" viewBox="0 0 11.314 11.314"><g fill="%23333" transform="matrix(.70710678 -.70710678 .70710678 .70710678 3124.705 -3447.146)"><path d="m-4643.49951172 239.50024414h-7.00097656v-.00054932h6.50048828.5v-.5-6.4991455h.00048828z"/><path d="m-4642.99951172 240.00024414h-8.00097656v-1.00054932h7.00048828v-6.9991455l1.00048828-.00001526z" fill="%23333"/></g></svg>')
        no-repeat center/contain;
    vertical-align: middle;
    content: "";
}

@media only screen and (min-width: 751px) {
    .breadcrumbsWrap {
        margin-top: 12rem;
    }
}

/* recaptcha
-----------------------------------------------------------*/
#recaptcha_wrap {
    display: flex;
    justify-content: center;
}