body {
    font-family: "M PLUS 1", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

:root {
    /* Logo */
    --logo-brand-color: #008CFF;
    /* Typography */
    --typography-brand-color: #1A3347;
    --typography-sub-text-color: #3d6070;
    --typography-link-color: #0062b2;
    --typography-placeholder-color: #b2bbc2;
    --typography-disabled-color: #ccd2d6;
    --typography-f-color: #ffffff;
    --typography-error-danger-color: #E10000;
    /* icon */
    --icon-primary-color: #008cff;
    --icon-disabled-color: #d9dde0;
    --icon-danger-color: #E10000;
    --icon-warning-color: #e8a200;
    --icon-success-color: #14ae5c;
    /* icon / neutral */
    --icon-neutral-primary-color: #33495c;
    --icon-neutral-sub-color: #808d99;
    --icon-neutral-f-color: #ffffff;

    --icon-category-price_primary-color: #0094c4;
    --icon-category-campaign_primary-color: #e54cb3;
    --icon-category-procedure_primary-color: #009c74;
    --icon-category-contract_primary-color: #a68421;
    /* background */
    --background_light-primary: #edf7ff;
    --background_dark-primary: #0077d9;
    /* background / status */
    --background-status_error: #fef2f2;
    --background-status_warning: #fdf9ee;
    --background-status_success: #eff9f4;
    /* background / neutral */
    --background-neutral_dark: #f0f1f3;
    --background-neutral_light: #fafafb;
    --background-neutral_f: #ffffff;


    /* button / primary */
    --button-primary_enable: #0077d9;
    --button-primary_disable: #d9dde0;
    --button-primary_hover: #0062b2;
    --button-primary_text: #ffffff;

    /* button / neutral */
    --button-neutral_line: #a6b0b8;
    --button-neutral_text-button-hover: #f5f6f7;

    /* button / danger */
    --button-danger_enable: #ed0000;
    --button-danger_hover: #d50000;
    --button-danger_text-button-hover: #feeded;

    /* button / footer */
    --button-footer_hover: #d9dde0;


    --button-orange-primary_enable: #CC4E00;
    --button-orange-primary_disable: #D9DDE0;
    --button-orange-primary_hover: #A74000;
    --button-orange-primary_text: #FFFFFF;
    
    /* 入力フォーム、チェックボックス、ラジオボタン、セレクトボックス */
    --input-border-color: #808d99;
    --input-background-color: #FFFFFF;
    --input-focus-border-color: #008CFF;
    --input-focus-background-color: #EDF7FF;
    --input-error-border-color: #e10000;
    --input-error-background-color: #FEF2F2;
    --input-disabled-border-color: #808D99;
    --input-disabled-background-color: #F0F1F3;
    --input-disabled-text-color: #CCD2D6;

    /* border-color */
    --border-color: #808D99;
}


/**********************************************************************/
/* コンポーネント
/* 用途：オフィスにおけるデザインパーツ（アイコン、デザインなど）
/**********************************************************************/

/* フォント関連 */
.headline-large {
    font-size: 32px;
    line-height: 130%;
    font-weight: 400;
}

.headline-medium {
    font-size: 22px;
    line-height: 130%;
    font-weight: 400;
}

.headline-small {
    font-size: 20px;
    line-height: 130%;
    font-weight: 500;
}

.title-large {
    font-size: 18px;
    line-height: 150%;
    font-weight: 500;
}

.title-medium {
    font-size: 16px;
    line-height: 150%;
    font-weight: 500;
}

.subtitle-medium {
    font-size: 14px;
    line-height: 150%;
    font-weight: 500;
}

.subtitle-small {
    font-size: 12px;
    line-height: 120%;
    font-weight: 500;
}

.subtitle-xs {
    font-size: 11px;
    line-height: 120%;
    font-weight: 500;
}

.body-medium {
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
}

.body-small {
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
}

.caption-large {
    font-size: 12px;
    line-height: 150%;
    font-weight: 400;
}

.caption-medium {
    font-size: 11px;
    line-height: 150%;
    font-weight: 400;
}

.caption-small {
    font-size: 10px;
    line-height: 150%;
    font-weight: 400;
}

.label-xlarge {
    font-size: 24px;
    line-height: 100%;
    font-weight: 500;
}

.label-large {
    font-size: 16px;
    line-height: 100%;
    font-weight: 500;
}

.label-medium {
    font-size: 14px;
    line-height: 100%;
    font-weight: 500;
}

.label-small {
    font-size: 12px;
    line-height: 100%;
    font-weight: 500;
}

.btn-label-xlarge {
    font-size: 24px;
    line-height: 120%;
    font-weight: 500;
}

.btn-label-large {
    font-size: 16px;
    line-height: 120%;
    font-weight: 500;
}

.btn-label-medium {
    font-size: 14px;
    line-height: 120%;
    font-weight: 500;
}

/* 表ラベル(2行以上になった場合、必須/任意ラベルの下に来ないよう折り返す) */
.form-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* 必須ラベル */
.required-label {
    gap: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.required-label::after {
    content: "必須";
    padding: 4px 8px;
    border-radius: 16px;
    background-color: #fef2f2;
    height: 25px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}

/* 任意ラベル */
.any-label {
    gap: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.any-label::after {
    text-wrap-mode: nowrap;
    content: "任意";
    padding: 4px 8px;
    border-radius: 16px;
    background-color: #FAFAFB;
    height: 25px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}

/* 通知関連 */
.notification-information {
    border-radius: 8px;
    border: 1px solid #99d1ff;
    padding: 12px 16px;
    background-color: var(--background_light-primary);
}

.notification-success {
    border-radius: 8px;
    border: 1px solid #a1dfbe;
    padding: 12px 16px;
    background-color: #eff9f4;
}

.notification-warning {
    border-radius: 8px;
    border: 1px solid #edb533;
    padding: 12px 16px;
    background-color: #edb533;
}

.notification-error {
    border-radius: 8px;
    border: 1px solid #f89999;
    padding: 12px 16px;
    background-color: #fef2f2;
}

/* セレクトボックスの選択ボタン右側のアイコン */
.picker-icon-error {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23ED0000" d="M16.4852 17.5996L23.0849 11L24.9705 12.8856L16.4852 21.371L8 12.8856L9.88561 11L16.4852 17.5996Z" /></svg>') no-repeat left center;
}

.picker-icon-neutral {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%2333495c" d="M16.4852 17.5996L23.0849 11L24.9705 12.8856L16.4852 21.371L8 12.8856L9.88561 11L16.4852 17.5996Z" /></svg>') no-repeat left center;
}

.picker-icon-neutral:disabled {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23f0f1f3" d="M16.4852 17.5996L23.0849 11L24.9705 12.8856L16.4852 21.371L8 12.8856L9.88561 11L16.4852 17.5996Z" /></svg>') no-repeat left center;
}

.picker-icon-set {
    background-position: right 8px center;
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
}

.picker-icon-set:disabled {
    background-position: right 8px center;
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
}

/** セレクトボックス */
.select-input {
    outline: none;
    padding: 7px 8px 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-border-color);
}

.select-input:open,
.select-input:hover
.select-input:active {
    outline: none;
    padding: 7px 8px 7px 12px;
    border-radius: 8px;
    border: 2px solid var(--input-focus-border-color);
}

.select-input.is-invalid {
    outline: none;
    padding: 7px 8px 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-error-border-color);
    background-color: var(--input-error-background-color);
}

.select-input:disabled {
    outline: none;
    padding: 7px 8px 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-disabled-background-color);
}

.select-input,
.select-input::picker(select) {
    appearance: base-select;
    -webkit-appearance: base-select;
    -moz-appearance: base-select;
}

.select-input::picker(select) {
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    border: none;
}

.select-input::picker-icon {
    content: none;
}

.select-input>option {
    padding: 15px 15px;
}

.select-input>option::checkmark {
    display: none;
}

select {
  appearance: none;
  -moz-appearance: none; /* Firefox用 */
  -webkit-appearance: none; /* Chrome, Safari用 */
}

/* Firefoxでさらにデフォルトの点線や矢印を完全に消す場合 */
select::-moz-focus-inner {
  border: 0;
}
select:focus::-ms-value {
  background: none;
}
/**
 * 入力ボックス
 */
.oneline-text {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-border-color);
    box-sizing: border-box;
}
.oneline-text:placeholder {
    color: #b2bbc2;
}

.oneline-text:focus {
    outline: none;
    padding: 7px 12px;
    border-radius: 8px;
    border: 2px solid var(--input-focus-border-color);
    box-sizing: border-box;
}

.oneline-text.is-invalid {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-error-border-color);
    background-color: var(--input-error-background-color);
}

.oneline-text:disabled {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-disabled-border-color);
    background-color: var(--input-disabled-background-color);
}

.multiline-text {
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid var(--input-border-color);
    box-sizing: border-box;
}

.multiline-text:focus {
    outline: none;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid var(--input-focus-border-color);
}

.multiline-text.is-invalid {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-error-border-color);
    background-color: var(--input-error-background-color);
}

.multiline-text:disabled {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-disabled-border-color);
    background-color: var(--input-disabled-background-color);
}

/**
 * プライマリーカラーボタン
 */
.button-small-primary {
    min-height: 40px;
    max-width: 128px;
    padding: 8px 24px;
    border-radius: 16px;
    background-color: var(--button-primary_enable);
    outline: none;
    border: 0;
    color: var(--button-primary_text);
}
.button-small-primary:focus,
.button-small-primary:hover,
.button-small-primary:active {
    outline: none;
    background-color: var(--button-primary_hover);
}
.button-small-primary:disabled {
    background-color: var(--button-primary_disable);
    border: none;
}

.button-medium-primary {
    min-height: 54px;
    max-width: 328px;
    padding: 8px 24px;
    border-radius: 16px;
    background-color: var(--button-primary_enable);
    outline: none;
    border: 0;
    color: var(--button-primary_text);
}
.button-medium-primary:focus,
.button-medium-primary:hover,
.button-medium-primary:active {
    outline: none;
    background-color: var(--button-primary_hover);
}
.button-medium-primary:disabled {
    background-color: var(--button-primary_disable);
    border: none;
}

.button-large-primary {
    min-height: 72px;
    max-width: 400px;
    padding: 8px 24px;
    border-radius: 16px;
    background-color: var(--button-primary_enable);
    outline: none;
    border: 0;
    color: var(--button-primary_text);
}
.button-large-primary:focus,
.button-large-primary:hover,
.button-large-primary:active {
    outline: none;
    background-color: var(--button-primary_hover);
}
.button-large-primary:disabled {
    background-color: var(--button-primary_disable);
    border: none;
}


.button-medium-secondary {
    max-width: 400px;
    padding: 8px 24px;
    border-radius: 16px;
    background-color: var(--background-neutral_f);
    border: 1px solid #0077d9;
    outline: none;
    border: 0;
    color: #ffffff;
}

.button-medium-secondary:focus,
.button-medium-secondary:hover,
.button-medium-secondary:active {
    outline: none;
    background-color: #F2F9ff;
    border: 1px solid #0062b2;
}

.button-medium-secondary:disabled {
    background-color: var(--background-neutral_f);
    border: 1px solid #d9dde0;
    border: none;
}

/* 橙色・オレンジプライマリーカラー */
.button-orange-medium-primary {
    min-height: 54px;
    max-width: 328px;
    padding: 8px 24px;
    border-radius: 16px;
    background-color: var(--button-orange-primary_enable);
    outline: none;
    border: 0;
    color: var(--button-orange-primary_text);
}
.button-orange-medium-primary:focus,
.button-orange-medium-primary:hover,
.button-orange-medium-primary:active {
    outline: none;
    background-color: var(--button-orange-primary_hover);
}
.button-orange-medium-primary:disabled {
    background-color: var(--button-orange-primary_disable);
    border: none;
}

/* 修正ボタンカスタム */
.button-medium-modify {
    max-width: 400px;
    padding: 8px 24px;
    border-radius: 16px;
    background-color: #d9dde0;
    outline: none;
    border: 0;
    color: #ffffff;
}

.button-medium-modify:focus,
.button-medium-modify:hover,
.button-medium-modify:active {
    outline: none;
    background-color: #d9dde0;
}

.button-medium-modify:disabled {
    background-color: var(--background-neutral_f);
    border: 1px solid #d9dde0;
    border: none;
}

/**
 * 枠付きラジオボタン
 */
.radio-container {
    display: flex;
    align-items: center;
    border: solid 1px var(--input-border-color);
    border-radius: 8px;
    padding: 7px 11px;
    margin-top: .5rem;
    margin-bottom: .5rem;
    box-sizing: content-box;
    gap: 4px;
    cursor: pointer;
}

.radio-container.grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
}
.radio-container.grid > span {
    text-align: center;
}

.radio-container>input[type=radio]:checked {
    background-color: var(--input-focus-border-color);
    border: none !important;
}

.radio-container>input[type=radio]:checked:before {
    content: '';
    width: 8px;
    height: 8px;
    position: relative;
    display: block;
    top: 5px;
    left: 5px;
    background-color: var(--background-neutral_f);
    border-radius: 50%;
}

.radio-container>input[type=radio] {
    appearance: none;
    width: 18px;
    min-width: 18px;
    margin-bottom: auto;
    margin-top: auto;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--input-border-color);
}

.radio-container:has(input[type=radio]:checked) {
    border: 2px solid var(--input-focus-border-color);
    background-color: var(--input-focus-background-color);
}

.radio-container:hover,
.radio-container:focus,
.radio-container:active,
.radio-container:has(input[type=radio]:hover),
.radio-container:has(input[type=radio]:focus),
.radio-container:has(input[type=radio]:active)
{
    background-color: var(--input-focus-background-color);
    border-color: var(--input-focus-border-color);
}

.radio-container:has(input.is-invalid) {
    border-color: var(--input-error-border-color);
    background-color: var(--input-error-background-color);
}

.radio-container:has(input:disabled) {
    border-color: var(--input-border-color);
    background-color: var(--input-disabled-background-color);
    color: var(--input-disabled-text-color);
    pointer-events: none;
}

.radio-container:has(input:checked.is-invalid) {
    background-color: var(--input-focus-background-color);
    border-color: var(--input-focus-border-color);
}
.radio-container>input[type=radio]:disabled {
    border-color: var(--typography-disabled-color);
}

.radio-container>input[type=radio].is-invalid {
    border-color: var(--input-error-border-color);
}

.radio-container>input[type=radio].is-invalid:disabled {
    border-color: var(--typography-disabled-color);
}

.radio-container>input[type=radio]:checked.is-invalid {
    border-color: var(--input-focus-border-color);
}

.name-form-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.c-icon-breadcrumb-arrow {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23000000" d="M10.9764 9.99863L6.85156 5.87382L8.03008 4.69531L13.3334 9.99863L8.03008 15.3019L6.85156 14.1234L10.9764 9.99863Z" /></svg>') no-repeat center center;
    width: 20px;
    height: 20px;
}

.noauth-breadcrumb {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.noauth-breadcrumb li {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 8px;
}

.noauth-breadcrumb li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20"><path fill="%23000000" d="M10.9764 9.99863L6.85156 5.87382L8.03008 4.69531L13.3334 9.99863L8.03008 15.3019L6.85156 14.1234L10.9764 9.99863Z" /></svg>') no-repeat center center;
    vertical-align: middle;
    pointer-events: none;
}

.c-icon-valid-error {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23ED0000" d="M15.935 2.17578L21.5 7.74075V15.6108L15.935 21.1758H8.06497L2.5 15.6108V7.74075L8.06497 2.17578H15.935ZM15.1066 4.17578H8.89339L4.5 8.56917V14.7824L8.89339 19.1758H15.1066L19.5 14.7824V8.56917L15.1066 4.17578ZM10.9992 14.675H12.9992V16.675H10.9992V14.675ZM10.9992 6.67504H12.9992V12.675H10.9992V6.67504Z" /></svg>') no-repeat center center;
    width: 24px;
    height: 24px;
}

.c-icon-valid-error-fill {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23ED0000" d="M21.2493 2.89941L28.6693 10.3194V20.8128L21.2493 28.2328H10.7559L3.33594 20.8128V10.3194L10.7559 2.89941H21.2493ZM14.6682 19.565V22.2317H17.3349V19.565H14.6682ZM14.6682 8.89843V16.8984H17.3349V8.89843H14.6682Z" /></svg>') no-repeat center center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.icon-16px {
    width: 16px !important;
    height: 16px !important;
}

/* 枠付きチェックボックス */
.checkbox-container {
    display: flex;
    align-items: center;
    border: solid 1px var(--input-border-color);
    border-radius: 8px;
    padding: 7px 11px;
    box-sizing: content-box;
    gap: 8px;
    cursor: pointer;
}

.checkbox-container>input[type=checkbox]:checked {
    background-color: var(--input-focus-border-color);
}

.checkbox-container>input[type=checkbox] {
    appearance: none;
    width: 20px;
    min-width: 20px;
    margin-bottom: auto;
    margin-top: auto;
    height: 20px;
}

.checkbox-container:has(input[type=checkbox]:checked) {
    border: 2px solid var(--input-focus-border-color);
    background-color: var(--input-focus-background-color);
}

.checkbox-container:hover,
.checkbox-container:focus-visible,
.checkbox-container:active,
.checkbox-container:has(input[type=checkbox]:hover),
.checkbox-container:has(input[type=checkbox]:focus-visible),
.checkbox-container:has(input[type=checkbox]:active) {
    background-color: var(--input-focus-background-color);
    border-color: #0077D9;
}

.checkbox-container:has(input:disabled) {
    border-color: var(--input-border-color);
    background-color: var(--input-disabled-background-color);
    color: var(--input-disabled-text-color);
    pointer-events: none;
}

/* チェックボックス　サイズ関連 */
.checkbox-large {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
}

.checkbox-large:checked::after {
    top: 10px !important;
    left: 7px !important;
    width: 24px !important;
    height: 12px !important;
    border-bottom: 3px solid #ffffff !important;
    border-left: 3px solid #ffffff !important;
}

/* 枠なしチェックボックス */
.checkbox {
    appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border-color);
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--background-neutral_f);
}

.checkbox:checked {
    border: 1px solid var(--input-focus-border-color);
    background-color: var(--input-focus-border-color);
}

.checkbox:checked::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 3px;
    width: 12px;
    height: 6px;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transform: rotate(-45deg);
}

.checkbox:disabled {
    border-color: #ccd2d6 !important;
    pointer-events: none;
}

/* Aタグ */
a {
    color: #0062b2 !important;
    text-decoration: underline;
}
a:hover,
a:focus-visible,
a:active {
    color: #0062b2 !important;
    text-decoration: none;
}

.textlink-underline {
    text-decoration: underline !important;
}
.textlink-underline:hover,
.textlink-underline:focus-visible,
.textlink-underline:active {
    text-decoration: none !important;
}

/* 確認画面プライバシーポリシーの背景、枠 */
.privacy-container {
    padding: 8px 24px;
    border-radius: 8px;
    background-color: #f0f1f3;
}

/* ヘッダーバー */
.header-nav-bar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 999;
    margin-bottom: 60px;
}
.header-nav-bar-main {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.header-nav-bar-body {
    width: 1200px;
}
.header-bipple-logo {
    margin: auto 0;
}

/* メインボディ */
.mainbody-padding {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 60px;
    padding-bottom: 60px;
}
.mainbody-shadow-box {
    box-shadow: 0px 1px 6px #00000014;
}

/* フッターバー */
.footer-nav-bar {
    margin-top: 80px;
}
.footer-nav-site-links {
    padding-top: 40px;
    gap: 12px;
    margin-bottom: 40px;
}
.footer-nav-site-links > a {
    text-decoration: none;
}
.footer-nav-site-links > a:focus-visible,
.footer-nav-site-links > a:hover {
    text-decoration: underline;
}
.footer-nav-site-links > a:not(:last-child) {
    margin-right: 20px;
}

/* モックアップ用の部品 */
.dummy-image {
    width: 100%;
    height: 150px;
    background-color: #aaa;
    color: white;
}

/* テキストリンク(arrow_right)アイコン */
.text-link-icon {
  display: inline-flex;
  gap: 0.25em;
}
.text-link-icon::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1.5em;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%230062b2" d="M17.5626 16.0009L10.9629 9.40124L12.8485 7.51562L21.3338 16.0009L12.8485 24.4861L10.9629 22.6005L17.5626 16.0009Z" /></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* TOPへ(arrow_up)アイコン */
.to-top-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.to-top-icon::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%230062b2" d="M16.0008 14.4392L9.40124 21.0389L7.51562 19.1533L16.0008 10.668L24.4862 19.1533L22.6006 21.0389L16.0008 14.4392Z" /></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* 別タブ(jump)アイコン */
.target-blank-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.target-blank-icon::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%230062b2" d="M9.33333 4V6.66667H2.66667V21.3333H17.3333V14.6667H20V22.6667C20 23.4031 19.4031 24 18.6667 24H1.33333C0.59696 24 0 23.4031 0 22.6667V5.33333C0 4.59696 0.59696 4 1.33333 4H9.33333ZM24 0V10.6667H21.3333L21.3332 4.55067L10.9428 14.9428L9.05719 13.0572L19.4465 2.66667H13.3333V0H24Z" /></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* 情報(info)アイコン */
.info-icon {
  display: inline-flex;
}
.info-icon::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 27"><path fill="%23008CFF" d="M13.3333 26.6667C5.96953 26.6667 0 20.6971 0 13.3333C0 5.96953 5.96953 0 13.3333 0C20.6971 0 26.6667 5.96953 26.6667 13.3333C26.6667 20.6971 20.6971 26.6667 13.3333 26.6667ZM13.3333 24C19.2244 24 24 19.2244 24 13.3333C24 7.44229 19.2244 2.66667 13.3333 2.66667C7.44229 2.66667 2.66667 7.44229 2.66667 13.3333C2.66667 19.2244 7.44229 24 13.3333 24ZM12 6.66667H14.6667V9.33333H12V6.66667ZM12 12H14.6667V20H12V12Z" /></svg>');
  background-size: 65% 65%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* 開く(arrow_down)アイコン */
.item-open-icon {
  display: inline-flex;
  cursor: pointer;
}
.item-open-icon::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%2333495C" d="M16.4852 17.5996L23.0849 11L24.9705 12.8856L16.4852 21.371L8 12.8856L9.88561 11L16.4852 17.5996Z" /></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* 閉じる(arrow_up)アイコン */
.item-close-icon {
  display: inline-flex;
  cursor: pointer;
}
.item-close-icon::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%2333495C" d="M16.0008 14.4392L9.40124 21.0389L7.51562 19.1533L16.0008 10.668L24.4862 19.1533L22.6006 21.0389L16.0008 14.4392Z" /></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* オプション開く(arrow_down)アイコン */
.option-open-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  cursor: pointer;
}
.option-open-icon::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFFFFF" d="M16.4852 17.5996L23.0849 11L24.9705 12.8856L16.4852 21.371L8 12.8856L9.88561 11L16.4852 17.5996Z" /></svg>');
  background-color: var(--button-primary_enable);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  border-radius: 4px;
}
.option-open-icon:hover::after {
  background-color: var(--button-primary_hover);
}

/* オプション閉じる(arrow_up)アイコン */
.option-close-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  cursor: pointer;
}
.option-close-icon::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFFFFF" d="M16.0008 14.4392L9.40124 21.0389L7.51562 19.1533L16.0008 10.668L24.4862 19.1533L22.6006 21.0389L16.0008 14.4392Z" /></svg>');
  background-color: var(--button-primary_enable);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  border-radius: 4px;
}
.option-close-icon:hover::after {
  background-color: var(--button-primary_hover);
}

/* プレースホルダーカラー */
::placeholder {
  color: var(--typography-placeholder-color) !important;
}

/* 画面上部のステップナビゲーション */
.step-up-list {
    list-style-type: none;
    display: flex;
    flex-direction: row;
}
.step-up-item {
    position: relative;
    background-color: var(--background-neutral_dark);
    color: var(--typography-brand-color);
    height: 50px;
    width: 100%;
    padding: 0px 10px 0 25px;
    text-align: center;
    align-content: center;
}
.step-up-item.active {
    background-color: var(--background_dark-primary);
    color: var(--typography-f-color);
}
.step-up-item + .step-up-item {
    margin-left: 5px;
}
.step-up-item::before {
    position: absolute;
    content: "";
    top: 0;
    left: -0px;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 20px solid var(--background-neutral_f);
    z-index: 1;
}
.step-up-item:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.step-up-item:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.step-up-item:first-child::before {
    border: none;
}
.step-up-item::after {
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 20px solid var(--background-neutral_dark);
    z-index: 2;
}
.step-up-item.active::after {
    border-left-color: var(--background_dark-primary);
}
.step-up-item:last-child::after {
    border: none;
}

/* PDFリンク */
.pdf-link {
  color: var(--typography-link-color);
  text-decoration: underline;
  display: inline-flex;
  gap: 0.25em;
}
.pdf-link:hover,
.pdf-link:focus-visible,
.pdf-link:active {
  text-decoration: none;
}
.pdf-link::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1.5em;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23ED0000" d="M5 4H15V8H19V20H5V4ZM3.9985 2C3.44749 2 3 2.44405 3 2.9918V21.0082C3 21.5447 3.44476 22 3.9934 22H20.0066C20.5551 22 21 21.5489 21 20.9925L20.9997 7L16 2H3.9985ZM10.4999 7.5C10.4999 9.07749 10.0442 10.9373 9.27493 12.6534C8.50287 14.3757 7.46143 15.8502 6.37524 16.7191L7.55464 18.3321C10.4821 16.3804 13.7233 15.0421 16.8585 15.49L17.3162 13.5513C14.6435 12.6604 12.4999 9.98994 12.4999 7.5H10.4999ZM11.0999 13.4716C11.3673 12.8752 11.6042 12.2563 11.8037 11.6285C12.2753 12.3531 12.8553 13.0182 13.5101 13.5953C12.5283 13.7711 11.5665 14.0596 10.6352 14.4276C10.7999 14.1143 10.9551 13.7948 11.0999 13.4716Z" /></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* モーダルリンク */
.modal-link {
  color: var(--typography-link-color);
  text-decoration: underline;
  display: inline-flex;
  gap: 0.25em;
  cursor: pointer;
}
.modal-link:hover,
.modal-link:focus-visible,
.modal-link:active {
  text-decoration: none;
}
.modal-link::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%230062b2" d="M15.9993 29.3346C8.63555 29.3346 2.66602 23.365 2.66602 16.0013C2.66602 8.6375 8.63555 2.66797 15.9993 2.66797C23.3631 2.66797 29.3327 8.6375 29.3327 16.0013C29.3327 23.365 23.3631 29.3346 15.9993 29.3346ZM14.666 20.0013V22.668H17.3327V20.0013H14.666ZM17.3327 17.8081C19.2603 17.2344 20.666 15.4486 20.666 13.3346C20.666 10.7573 18.5767 8.66797 15.9993 8.66797C13.7353 8.66797 11.8478 10.2802 11.4224 12.4192L14.0377 12.9423C14.2201 12.0256 15.0291 11.3346 15.9993 11.3346C17.1039 11.3346 17.9993 12.2301 17.9993 13.3346C17.9993 14.4392 17.1039 15.3346 15.9993 15.3346C15.2629 15.3346 14.666 15.9316 14.666 16.668V18.668H17.3327V17.8081Z" /></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.question-mark::after {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%230062b2" d="M15.9993 29.3346C8.63555 29.3346 2.66602 23.365 2.66602 16.0013C2.66602 8.6375 8.63555 2.66797 15.9993 2.66797C23.3631 2.66797 29.3327 8.6375 29.3327 16.0013C29.3327 23.365 23.3631 29.3346 15.9993 29.3346ZM14.666 20.0013V22.668H17.3327V20.0013H14.666ZM17.3327 17.8081C19.2603 17.2344 20.666 15.4486 20.666 13.3346C20.666 10.7573 18.5767 8.66797 15.9993 8.66797C13.7353 8.66797 11.8478 10.2802 11.4224 12.4192L14.0377 12.9423C14.2201 12.0256 15.0291 11.3346 15.9993 11.3346C17.1039 11.3346 17.9993 12.2301 17.9993 13.3346C17.9993 14.4392 17.1039 15.3346 15.9993 15.3346C15.2629 15.3346 14.666 15.9316 14.666 16.668V18.668H17.3327V17.8081Z" /></svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* ダイアログモーダル　初期表示は消えています　JSでis-openを追加して表示させてください */
.custom-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #001C3399;
    justify-content: center;
    align-items: center;
    z-index: 999;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.custom-modal-overlay.is-open {
    display: flex;
}

.custom-modal-dialog {
    position: relative;
    border-radius: 8px;
    background-color: var(--background-neutral_f);
    border: 1px solid #707070;
    max-height: 90%;
    overflow: auto;
}

.custom-modal-close-icon {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: #0062b2;
    cursor: pointer;
}

.c-icon-header-phone {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 36 36"><path fill="%23008cff"  d="M18,0a18,18,0,0,0-.005,36h.044a6.659,6.659,0,0,0,4.568-1.589A5,5,0,0,0,24.274,30.7a4.947,4.947,0,0,0-.388-1.9,7.581,7.581,0,0,0,.795-.523,1.889,1.889,0,0,0,.541-2.235,19.152,19.152,0,0,0-3.245-3.354A1.621,1.621,0,0,0,20,23.354c-.459.671-.821.47-.821.47s-1.3-1.052-3.1-4.684-1.847-5.305-1.847-5.305.059-.411.871-.37a1.619,1.619,0,0,0,1.724-1.171,19.1,19.1,0,0,0-.7-4.612c-.374-1.021-1.762-1.03-2.1-.924s-3.87.964-4.149,4.655a18.854,18.854,0,0,0,2.035,9.8,18.846,18.846,0,0,0,6.56,7.552,4.76,4.76,0,0,0,3.48.75,2.874,2.874,0,0,1-.726,3.372,4.6,4.6,0,0,1-3.178,1.052H18a15.954,15.954,0,1,1,11.579-4.993,1.034,1.034,0,0,0,1.5,1.42A18,18,0,0,0,18,0Z" /></svg>') no-repeat center center;
    width: 36px;
    height: 36px;
}

/* ×アイコン プライマリーカラー */
.c-icon-close-primary-color {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%2333495c" d="M12.0007 10.5865L16.9505 5.63672L18.3647 7.05093L13.4149 12.0007L18.3647 16.9504L16.9505 18.3646L12.0007 13.4149L7.05094 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05094 5.63672L12.0007 10.5865Z" /></svg>') no-repeat center center;
    width: 24px;
    height: 24px;
}

/* プラスアイコン　白色 */
.c-icon-plus-f-color {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFFFFF" d="M14.668 14.666V6.66602H17.3346V14.666H25.3346V17.3327H17.3346V25.3327H14.668V17.3327H6.66797V14.666H14.668Z" /></svg>') no-repeat center center;
    width: 16px;
    height: 16px;
    display: block;
}

/* マイナスアイコン　白色 */
.c-icon-minus-f-color {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFFFFF" d="M25.3346 14.667H6.66797V17.3337H25.3346V14.667Z" /></svg>') no-repeat center center;
    width: 16px;
    height: 16px;
    display: block;
}

/* 特典アイコン　特典色 */
.c-icon-campaign {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFFFFF" d="M20.0065 2.66992C22.952 2.66992 25.3399 5.05774 25.3399 8.00326C25.3399 8.9753 25.0797 9.8866 24.6255 10.6714L30.6732 10.6699V13.3366H28.0065V26.6699C28.0065 27.4063 27.4096 28.0032 26.6732 28.0032H5.33984C4.60347 28.0032 4.00651 27.4063 4.00651 26.6699V13.3366H1.33984V10.6699L7.38754 10.6714C6.93323 9.8866 6.67318 8.9753 6.67318 8.00326C6.67318 5.05774 9.06099 2.66992 12.0065 2.66992C13.6001 2.66992 15.0305 3.36887 16.0077 4.47694C16.9825 3.36887 18.4129 2.66992 20.0065 2.66992ZM17.3399 13.3366H14.6732V26.6699H17.3399V13.3366ZM12.0065 5.33659C10.5338 5.33659 9.33984 6.5305 9.33984 8.00326C9.33984 9.40907 10.4277 10.5608 11.8075 10.6626L12.0065 10.6699H14.6732V8.00326C14.6732 6.66772 13.6915 5.56151 12.4102 5.36695L12.2055 5.34389L12.0065 5.33659ZM20.0065 5.33659C18.6007 5.33659 17.4489 6.42443 17.3472 7.80424L17.3399 8.00326V10.6699H20.0065C21.4123 10.6699 22.564 9.58208 22.6659 8.20227L22.6732 8.00326C22.6732 6.5305 21.4793 5.33659 20.0065 5.33659Z" /></svg>') no-repeat center center;
    width: 12px;
    height: 12px;
    display: block;
}

/* ！アイコン */
.c-icon-information {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 27"><path fill="%23008CFF" d="M13.3333 26.6667C5.96953 26.6667 0 20.6971 0 13.3333C0 5.96953 5.96953 0 13.3333 0C20.6971 0 26.6667 5.96953 26.6667 13.3333C26.6667 20.6971 20.6971 26.6667 13.3333 26.6667ZM13.3333 24C19.2244 24 24 19.2244 24 13.3333C24 7.44229 19.2244 2.66667 13.3333 2.66667C7.44229 2.66667 2.66667 7.44229 2.66667 13.3333C2.66667 19.2244 7.44229 24 13.3333 24ZM12 6.66667H14.6667V9.33333H12V6.66667ZM12 12H14.6667V20H12V12Z" /></svg>') no-repeat center center;
    width: 16px;
    height: 16px;
    display: block;
}

/* 先頭に"*"を付与（単一注釈用） */
span.caption-mark {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
}
span.caption-mark::before {
    content: "*";
    margin-right: 5px;
    line-height: 1;
    vertical-align: middle;
}

/*
 * 先頭に"*"を付与（複数注釈用）
 */
ul.caption-mark {
    list-style: none;
    margin: 0;
    padding-left: 0rem;
    counter-reset: num;
}

ul.caption-mark li {
    counter-increment: num;
    position: relative;
    padding-left: 1em;
}

ul.caption-mark li::before {
    content: "*";
    position: absolute;
    left: 0;
    text-align: right;
}

/* 
 * listスタイル　
 * *1 *2 *3と先頭につける
 */
.asterisk-num-mark {
    list-style: none;
    margin: 0;
    padding-left: 0rem;
    counter-reset: num;
}

.asterisk-num-mark li {
    counter-increment: num;
    position: relative;
    padding-left: 1.5em;
}

.asterisk-num-mark li::before {
    content: "*" counter(num);
    position: absolute;
    left: 0;
    text-align: right;
}

/* 特典ラベル */
.campaign-label {
    position: relative;
}
.campaign-label::before {
    position: absolute;
    content: "";
    top: -0.5px;
    right: 1px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 8px solid var(--icon-category-campaign_primary-color);
}
.campaign-label::after {
    position: absolute;
    content: "";
    top: -0.5px;
    right: 0px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 8px solid var(--typography-f-color);
}

.icon-button-small {
    min-height: 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.navbar-shadow-box {
    box-shadow: 0px 1px 12px #00000029;
}

/* ~~~ - ~~~系で幅をそろえたいとき */
.triple-text-row {
    display: grid;
    grid-template-columns: 3.5rem 2ch 1fr;
    align-items: baseline;
}

.triple-text-row-left {
    text-align: left;
}
.triple-text-row-mid {
    text-align: center;
}

.sublabel-row-1col {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 8px;
    align-content: center;
    justify-content: center;
}

.sublabel-row-2col {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem 1fr;
    gap: 8px;
    align-content: center;
    justify-content: center;
}

.sublabel-row-1col > label,
.sublabel-row-2col > label {
    justify-content: right;
    align-items: center;
    display: flex;
    margin-bottom: 0;
}

.sublabel-row-1col:not(:last-child),
.sublabel-row-2col:not(:last-child) {
    margin-bottom: 12px;
}

.sublabel-row-1col.grid-temp-col-7 {
    grid-template-columns: 7rem 1fr;
}

.sublabel-row-1col-reverse {
    display: grid;
    grid-template-columns: 1fr 2rem;
    gap: 8px;
    align-content: center;
    justify-content: center;
}

/* モーダル */
.modal-list-marker-small {
    list-style: disc;
    text-indent: -0.3rem;
}
.modal-list-marker-small::marker {
    font-size: 0.52rem;
}
.modal-list-marker-small > span {
    vertical-align: -0.15rem;
}
.yellow-marker {
    background: linear-gradient(transparent 50%, #ff6 60%);
}
.max-width-280px {
    max-width: 280px;
}
.speed-border-color {
    border: 1px solid #000000;
}
.long-seller-background-color {
    background-color: #008CD6;
}
.long-seller-border-color {
    border: 1px solid #008CD6;
}
.applyline-question-modal {
    padding: 32px;
    background-color: #E2F5FF;
}

/**********************************************************************/
/* ユーティリティ
/* 用途：細かな調整などの設定
/**********************************************************************/

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.gap-1px {
    gap: 1px !important;
}

.gap-2px {
    gap: 2px !important;
}

.gap-3px {
    gap: 3px !important;
}

.gap-4px {
    gap: 4px !important;
}

.gap-5px {
    gap: 5px !important;
}

.gap-1rem {
    gap: 1rem !important;
}

.gap-2rem {
    gap: 2rem !important;
}

.gap-3rem {
    gap: 3rem !important;
}

.gap-4rem {
    gap: 4rem !important;
}

.gap-5rem {
    gap: 5rem !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

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

.mr-0 {
    margin-right: 0px !important;
}

.ml-0 {
    margin-left: 0px !important;
}

.mb-10px {
    margin-bottom: 10px !important;
}

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

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

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

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

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

.mr-1px {
    margin-right: 1px !important;
}

.mr-2px {
    margin-right: 2px !important;
}

.mr-3px {
    margin-right: 3px !important;
}

.mr-4px {
    margin-right: 4px !important;
}

.mr-5px {
    margin-right: 5px !important;
}

.ml-1px {
    margin-left: 1px !important;
}

.ml-2px {
    margin-left: 2px !important;
}

.ml-3px {
    margin-left: 3px !important;
}

.ml-4px {
    margin-left: 4px !important;
}

.ml-5px {
    margin-left: 5px !important;
}

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

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

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

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

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

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

.mx-1px {
    margin-right: 1px !important;
    margin-left: 1px !important;
}

.mx-2px {
    margin-right: 2px !important;
    margin-left: 2px !important;
}

.mx-3px {
    margin-right: 3px !important;
    margin-left: 3px !important;
}

.mx-4px {
    margin-right: 4px !important;
    margin-left: 4px !important;
}

.mx-5px {
    margin-right: 5px !important;
    margin-left: 5px !important;
}

.u-mr-1 {
    margin-right: 4px !important;
}

.u-mr-2 {
    margin-right: 8px !important;
}

.u-mr-3 {
    margin-right: 12px !important;
}

.u-mr-4 {
    margin-right: 16px !important;
}

.u-mr-5 {
    margin-right: 20px !important;
}

.u-ml-1 {
    margin-left: 4px !important;
}

.u-ml-2 {
    margin-left: 8px !important;
}

.u-ml-3 {
    margin-left: 12px !important;
}

.u-ml-4 {
    margin-left: 16px !important;
}

.u-ml-5 {
    margin-left: 20px !important;
}

.u-mb-1 {
    margin-bottom: 4px !important;
}

.u-mb-2 {
    margin-bottom: 8px !important;
}

.u-mb-3 {
    margin-bottom: 12px !important;
}

.u-mb-4 {
    margin-bottom: 16px !important;
}

.u-mb-5 {
    margin-bottom: 20px !important;
}

.u-mb-6 {
    margin-bottom: 24px !important;
}

.u-mb-7 {
    margin-bottom: 28px !important;
}

.u-mb-8 {
    margin-bottom: 32px !important;
}

.u-mb-9 {
    margin-bottom: 36px !important;
}

.u-mt-1 {
    margin-top: 4px !important;
}

.u-mt-2 {
    margin-top: 8px !important;
}

.u-mt-3 {
    margin-top: 12px !important;
}

.u-mt-4 {
    margin-top: 16px !important;
}

.u-mt-5 {
    margin-top: 20px !important;
}

.u-mt-6 {
    margin-top: 24px !important;
}

.u-mt-7 {
    margin-top: 28px !important;
}

.u-mt-8 {
    margin-top: 32px !important;
}

.u-mt-9 {
    margin-top: 36px !important;
}

.u-mx-1 {
    margin-left: 4px !important;
    margin-right: 4px !important;
}

.u-mx-2 {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.u-mx-3 {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

.u-mx-4 {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

.u-mx-5 {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

.u-my-1 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.u-my-2 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.u-my-3 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.u-my-4 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.u-my-5 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.u-p-0 {
    padding: 0 !important;
}

.u-px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.u-py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.u-pr-1 {
    padding-right: 4px !important;
}

.u-pr-2 {
    padding-right: 8px !important;
}

.u-pr-3 {
    padding-right: 12px !important;
}

.u-pr-4 {
    padding-right: 16px !important;
}

.u-pr-5 {
    padding-right: 20px !important;
}

.u-pr-10 {
    padding-right: 40px !important;
}

.u-pl-1 {
    padding-left: 4px !important;
}

.u-pl-2 {
    padding-left: 8px !important;
}

.u-pl-3 {
    padding-left: 12px !important;
}

.u-pl-4 {
    padding-left: 16px !important;
}

.u-pl-5 {
    padding-left: 20px !important;
}

.u-pb-1 {
    padding-bottom: 4px !important;
}

.u-pb-2 {
    padding-bottom: 8px !important;
}

.u-pb-3 {
    padding-bottom: 12px !important;
}

.u-pb-4 {
    padding-bottom: 16px !important;
}

.u-pb-5 {
    padding-bottom: 20px !important;
}

.u-pb-6 {
    padding-bottom: 24px !important;
}

.u-pt-1 {
    padding-top: 4px !important;
}

.u-pt-2 {
    padding-top: 8px !important;
}

.u-pt-3 {
    padding-top: 12px !important;
}

.u-pt-4 {
    padding-top: 16px !important;
}

.u-pt-5 {
    padding-top: 20px !important;
}

.u-px-1 {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.u-px-2 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.u-px-3 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.u-px-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.u-px-5 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.u-px-6 {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.u-py-1 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.u-py-2 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.u-py-3 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.u-py-4 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.u-py-5 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.u-py-6 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.u-py-7 {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
}

.u-py-8 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

.u-p-1 {
    padding: 4px !important;
}

.u-p-2 {
    padding: 8px !important;
}

.u-p-3 {
    padding: 12px !important;
}

.u-p-4 {
    padding: 16px !important;
}

.u-p-5 {
    padding: 20px !important;
}

.u-p-6 {
    padding: 24px !important;
}

.u-p-7 {
    padding: 28px !important;
}

.u-p-8 {
    padding: 32px !important;
}

.u-gap-1 {
    gap: 4px !important;
}

.u-gap-2 {
    gap: 8px !important;
}

.u-gap-3 {
    gap: 12px !important;
}

.u-gap-4 {
    gap: 16px !important;
}

.u-gap-5 {
    gap: 20px !important;
}

.u-gap-6 {
    gap: 24px !important;
}

.mw-1200px {
    max-width: 1200px !important;
}

.mw-700px {
    max-width: 700px !important;
}

.mw-640px {
    max-width: 640px !important;
}

.max-w-100px {
    max-width: 100px !important;
}

.mw-200px {
    max-width: 200px !important;
}

.mw-10px {
    min-width: 10px !important;
}

.mw-20px {
    min-width: 20px !important;
}

.mw-30px {
    min-width: 30px !important;
}

.mw-40px {
    min-width: 40px !important;
}

.mw-50px {
    min-width: 50px !important;
}

.mw-60px {
    min-width: 60px !important;
}

.mw-70px {
    min-width: 70px !important;
}

.mw-80px {
    min-width: 80px !important;
}

.mw-90px {
    min-width: 90px !important;
}

.mw-100px {
    min-width: 100px !important;
}

.mh-10px {
    min-height: 10px !important;
}

.mh-20px {
    min-height: 20px !important;
}

.mh-30px {
    min-height: 30px !important;
}

.mh-40px {
    min-height: 40px !important;
}

.mh-50px {
    min-height: 50px !important;
}

.mh-60px {
    min-height: 60px !important;
}

.mh-70px {
    min-height: 70px !important;
}

.mh-80px {
    min-height: 80px !important;
}

.mh-90px {
    min-height: 90px !important;
}

.mh-100px {
    min-height: 100px !important;
}

.h-100vh {
    height: 100vh !important;
}

.h-100p {
    height: 100% !important;
}

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

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

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

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

.campaign-color {
    color: var(--icon-category-campaign_primary-color) !important;
}

.bg-campaign {
    background-color: var(--icon-category-campaign_primary-color) !important;
}

.bg-neutral-dark {
    background-color: var(--background-neutral_dark) !important;
}

.bg-neutral-light {
    background-color: var(--background-neutral_light) !important;
}

.bg-f-color {
    background-color: var(--typography-f-color) !important;
}

.bg-black-color {
    background-color: #000000 !important;
}

.bg-light-primary-color {
    background-color: var(--background_light-primary) !important;
}

.list-style-none {
    list-style: none;
}

.bg-primary-color {
    background-color: #0077d9;
}

.rounded-top-8px {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.font-family-noto-sans-jp {
    font-family: 'Noto Sans JP';
}

.border-b-line {
    border-bottom: 1px solid #d9dde0;
}
.border-t-line {
    border-top: 1px solid #d9dde0;
}
.border-y-line {
    border-bottom: 1px solid #d9dde0;
    border-top: 1px solid #d9dde0;
}
.border-l-line {
    border-left: 1px solid #d9dde0;
}
.border-r-line {
    border-right: 1px solid #d9dde0;
}
.border-x-line {
    border-left: 1px solid #d9dde0;
    border-right: 1px solid #d9dde0;
}

.d-contents {
    display: contents;
}

.display-flex {
    display: flex;
}

/* 影 */
.elevation-lv0 {
    box-shadow: none;
}

.elevation-lv1 {
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 1px 6px 0px rgba(0, 0, 0, 0.08);
}

.elevation-lv2 {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.elevation-lv3 {
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 12px 0px rgba(0, 0, 0, 0.16);
}

.elevation-lv4 {
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.08), 0px 4px 14px 0px rgba(0, 0, 0, 0.16);
}

.elevation-lv5 {
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px 0px rgba(0, 0, 0, 0.20);
}

.br-1px {
    border-radius: 1px;
}

.br-8px {
    border-radius: 8px;
}

.br-20px {
    border-radius: 20px;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.u-flex-1 {
    flex: 1;
}

.text-wrap-mode-nowrap {
    text-wrap-mode: nowrap !important;
}

.text-decolation-none {
    text-decoration: none !important;
}

.text-decolation-underline {
    text-decoration: underline !important;
}

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

.align-content-space-between {
    align-content:space-between !important;
}

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

.align-items-baseline {
    align-items: baseline !important;
}

.title-downline {
    border-bottom: 2px solid #d9dde0 !important;
}

.gap-40px {
    gap: 40px !important;
}

.gap-10px {
    gap: 10px !important;
}

[hidden] {
  display: none !important;
}

.justify-contents-space-between {
    justify-content: space-between
}

.justify-contents-end {
    justify-content: end;
}

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

.text-wrap-mode-nowrap {
    text-wrap-mode: nowrap;
}


/**********************************************************************/
/* 端末依存
/* 用途：SPやPCによって表示が違うもの
/**********************************************************************/

.notification-flex {
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.notification-icon-center {
    margin: auto 0;
}
.notification-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.top-link {
    display: flex;
    gap: 4px;
    float: right;
}

.top-link>a {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%230062b2" d="M16.0008 14.4392L9.40124 21.0389L7.51562 19.1533L16.0008 10.668L24.4862 19.1533L22.6006 21.0389L16.0008 14.4392Z" /></svg>') no-repeat left center;
    padding: 0 0 0 22px;
}

/* SP表示時 */
@media screen and (width <=768px) {
    .header-nav-bar {
        margin-bottom: 40px;
    }

    .mainbody-padding {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer-nav-bar {
        margin-top: 60px;
    }

    .notification-flex {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .notification-icon-center {
        margin: 0 auto;
    }

    .step-up-list {
        display: none;
    }

    .sublabel-row-1col.grid-temp-col-7 {
        grid-template-columns: 1fr;
    }

    .sublabel-row-1col.grid-temp-col-7 > label {
        justify-content: flex-start;
    }

    .sp-spacer-my-1 {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .sp-border-t-line {
        border-top: 1px solid #d9dde0;
    }

    .sp-border-b-line {
        border-bottom: 1px solid #d9dde0;
    }
}

@media screen and (max-width: 480px) {
    .top-link {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .top-link a {
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        padding: 1em 0;
        background: url(/images/no_auth/inquiries/toTop_SP.png) no-repeat center top;
        -webkit-background-size: 40px 40px;
        background-size: 40px 40px;
        text-align: center;
        outline: none;
        text-decoration: none;
        z-index: 9999;
        text-indent: -9999px;
        overflow: hidden;
    }
}