@charset "UTF-8";

:root {
    --black: #212730;
    --primary: #0078D7;
    --primary-deep: #0C58CA;
    --secondaly: #30ADBD;
    --accent: #FB5E71;
    --dark-000: #EFF1F5;
    --dark-100: #E3E6EC;
    --dark-200: #C7CED8;
    --dark-300: #E0E0E0;
    --dark-600: #949494;
    --dark-1000: #595959;
    --desc: #616161;
    --blue50: #F1F6FC;
    --blue300: #D5DCFF;
    --text-text-secondary: #616161;
}

.c_link {
    color: var(--primary);
}

strong {
    font-weight: bold;
}

/* breadcrumb */
.header_breadcrumb {
    display: none;
}

.header_breadcrumb .breadcrumb {
    border-top: 1px solid var(--dark-200);
    /* border-bottom: 1px solid var(--dark-200); */
    padding-block: 10px;
}

.header_breadcrumb .breadcrumb_list {
    max-width: 1060px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.header_breadcrumb .breadcrumb_item {
    display: flex;
    align-items: center;
}

.header_breadcrumb .breadcrumb_item span {
    font-size: 12px;
    font-weight: 300;
}

.header_breadcrumb .breadcrumb_item:last-child span {
    font-weight: 600;
}

.header_breadcrumb .breadcrumb_item::after {
    content: "";
    display: block;
    background: url(../img/pankuzu_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 5px;
    height: 9px;
    padding-inline: 12px;
}

.header_breadcrumb .breadcrumb_item:last-child:after {
    display: none;
}


.footer_breadcrumb .breadcrumb {
    background: #343E4C;
    padding-block: 10px;
}

.footer_breadcrumb .breadcrumb_list {
    max-width: 1060px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.footer_breadcrumb .breadcrumb_item {
    display: flex;
    align-items: center;
}

.footer_breadcrumb .breadcrumb_item span {
    color: #fff;
    font-size: 12px;
    font-weight: 300;
}

.footer_breadcrumb .breadcrumb_item:last-child span {
    font-weight: 600;
}

.footer_breadcrumb .breadcrumb_item::after {
    content: "";
    display: block;
    background: url(../img/pankuzu_arrow_white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 5px;
    height: 9px;
    padding-inline: 12px;
}

.footer_breadcrumb .breadcrumb_item:last-child:after {
    display: none;
}

.w1000 {
    max-width: 1060px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
}

.w1160 {
    max-width: 1220px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
}

.w1080 {
    width: calc(100% - 40px);
    max-width: 1080px;
    margin: 0 auto;
}

.w800 {
    max-width: 800px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
}

.w720 {
    max-width: 780px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
}

.flex {
    display: flex;
}

.underlayer {
    margin: 45px auto 80px;
}

.underlayer_pagetitle_wrap {
    margin-bottom: 40px;
}

.underlayer_pagetitie {
    color: var(--black);
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 10px;
}

.page_desc {
    color: var(--black);
    font-size: 18px;
    font-weight: 400;
}

.page_buck {
    margin-top: 32px;
    transition-duration: 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .page_buck:hover {
        color: var(--primary-deep);
    }
}

.pt15 {
    padding-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt32 {
    margin-top: 32px;
}

.l200 {
    line-height: 200%;
}

.center {
    text-align: center;
}

.mb0 {
    margin-bottom: 0;
}

.mtb120 {
    margin: 120px auto;
}

.ptb120 {
    padding: 120px 0;
}

.mt120 {
    margin-top: 120px;
}

.white {
    color: #fff;
}

.contact_contents {
    background-color: #F4F6FB;
    padding: 70px 0;
}

.mainbutton {
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    background: var(--primary);
    padding: 10px 16px;
}

@media screen and (max-width: 768px) {
    .w1000 {
        padding-right: 5%;
        padding-left: 5%;
    }

    .w1160 {
        padding-right: 5%;
        padding-left: 5%;
    }

    .w1080 {
        padding-right: 5%;
        padding-left: 5%;
        width: 100%;
    }

    .w720 {
        padding-right: 5%;
        padding-left: 5%;
    }

    .flex {
        display: grid;
    }
}