@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
ヘッダー
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

header {
    position: relative;
    z-index: 1000;
    margin-bottom: 6rem;
}

header .header_inner {
    position: relative;
    height: 18.7rem;
    max-width: 1240px;
    margin: auto;
}

/*----------------------------------------*/
/* ヘッダのロゴ */
header .header_inner .header_logo {
    position: absolute;
    top: 4.4rem;
    left: 2rem;
}

header .header_inner .header_logo a {
    display: block;
    position: absolute;
}

header .header_inner .header_logo a.mark {
    width: 12rem;
    top: 0;
    left: 0;
}

header .header_inner .header_logo a.text {
    width: 25rem;
    top: 1.9rem;
    left: 14.5rem;

}

header .header_inner .header_logo .cord {
    position: absolute;
    width: 11em;
    font-size: 1.75rem;
    color: #808080;
    letter-spacing: 0.06em;
    top: 6.9rem;
    left: 14.5rem;
}

@media screen and (max-width: 1024px) {
    header {
        margin-bottom: 2rem;
    }
}

@media screen and (max-width:768px) {

    header {
        height: 8rem;
        width: 100%;

    }

    header .header_inner {
        height: 100%;
        padding: 0;
    }

    /*----------------------------------------*/
    /* ヘッダのロゴ */
    header .header_inner .header_logo {
        position: relative;
        top: auto;
        left: auto;
        margin: 3rem auto 0;
        width: 26.4rem;
    }

    header .header_inner .header_logo a {
        display: block;
        position: absolute;
    }

    header .header_inner .header_logo a.mark {
        width: 6.8rem;
        top: 0;
        left: 0;
    }

    header .header_inner .header_logo a.text {
        width: 18rem;
        top: 0.8rem;
        left: 8.4rem;

    }

    header .header_inner .header_logo .cord {
        width: 11em;
        font-size: 1.2rem;
        top: 4rem;
        left: 8.4rem;
    }

}

@media screen and (max-width:480px) {
    header {
        height: 3.2rem;
    }

    /*----------------------------------------*/
    /* ヘッダのロゴ */
    header .header_inner .header_logo {
        margin: 2rem auto 0;
        width: 15.8rem;
    }

    header .header_inner .header_logo a.mark {
        width: 4rem;
        top: 0;
        left: 0;
    }

    header .header_inner .header_logo a.text {
        width: 11rem;
        top: 0.2rem;
        left: 4.8rem;

    }

    header .header_inner .header_logo .cord {
        width: 11em;
        font-size: 1rem;
        top: 2.1rem;
        left: 4.8rem;
    }

}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
ATM ログインボタン
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
header .login_atm_wrap {
    display: flex;
    position: relative;
    z-index: 20;
}

header .login_atm_wrap>li {
    margin: 0 0.7rem;
}

header .login_atm_wrap>li>a {
    display: block;
    position: relative;
    background-color: #fa7d00;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    letter-spacing: 0.05em;
}

header .login_atm_wrap>li>a svg {
    fill: #fff;
    position: absolute;
}

@media screen and (min-width:768px) {
    header .login_atm_wrap {
        display: flex;
    }

    header .login_atm_wrap {
        position: absolute;
        top: -14.6rem;
        left: 50%;
        transform: translateX(9.3rem);
    }



    header .login_atm_wrap>li>a {
        border-radius: 3.2rem;
        height: 6.4rem;
        font-size: 2.4rem;
        padding-top: 1.9rem;
        box-sizing: border-box;
        letter-spacing: 0.05em;
    }

    /* atm */
    header .login_atm_wrap>li.atm a {
        width: 25.6rem;
        padding-left: 9.4rem;
    }

    header .login_atm_wrap>li.atm a svg {
        width: 3.8rem;
        top: 1.4rem;
        left: 3.7rem;
    }

    /* login */
    header .login_atm_wrap>li.login>a {
        width: 22.5rem;
        padding-left: 9rem;
    }

    header .login_atm_wrap>li.login>a svg {
        width: 3.2rem;
        top: 1.5rem;
        left: 4.2rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    header .login_atm_wrap {
        top: -14.6rem;
        left: auto;
        right: 2rem;
        transform: none;
    }

    header .login_atm_wrap>li>a {
        border-radius: 2.4rem;
        height: 4.8rem;
        font-size: 2rem;
        padding-top: 1.3rem;
    }

    /* atm */
    header .login_atm_wrap>li.atm a {
        width: 21rem;
        padding-left: 7rem;
    }

    header .login_atm_wrap>li.atm a svg {
        width: 2.8rem;
        top: 1.2rem;
        left: 2.8rem;
    }

    /* login */
    header .login_atm_wrap>li.login>a {
        width: 19rem;
        padding-left: 7rem;
    }

    header .login_atm_wrap>li.login>a svg {
        width: 2.4rem;
        top: 1.2rem;
        left: 3rem;
    }
}

@media screen and (max-width:768px) {
    header .login_atm_wrap {
        display: none;
    }
}


/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
サブメニュー
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
@media screen and (min-width:768px) {

    header .sub_menu_wrap {
        position: absolute;
        top: -5.6rem;
        left: 50%;
        transform: translateX(15rem);
        display: flex;
    }

    header .sub_menu_wrap li {
        margin: 0 0.8rem;
    }

    header .sub_menu_wrap li a {
        color: #808080;
        font-size: 1.8rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    header .sub_menu_wrap {
        position: absolute;
        top: -7.6rem;
        left: auto;
        right: 2rem;
        transform: none;
        display: flex;
    }
}

@media screen and (max-width:768px) {
    header .sub_menu_wrap {
        display: flex;
        font-size: 1.6rem;
        justify-content: center;
        margin: 4rem 0;
    }

    header .sub_menu_wrap li {
        margin: 0 0.8rem;
    }
}

@media screen and (max-width:480px) {
    header .sub_menu_wrap {
        font-size: 1.4rem;
        margin: 2rem 0;
    }

    header .sub_menu_wrap li {
        margin: 0 0.5rem;
    }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
ハンバーガーボタン
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*----------------------------------------*/
/* PC */
/*----------------------------------------*/
@media screen and (min-width:769px) {
    .menu_btn {
        display: none;
    }
}

/*----------------------------------------*/
/* スマートフォン */
/*----------------------------------------*/
@media screen and (max-width:768px) {

    .menu_btn {
        position: fixed;

        width: 7.5rem;
        height: 7.5rem;
        border: none;
        right: 0;
        bottom: 0;
        box-sizing: border-box;
        background: #323232;
        transition: all 0.2s;
        padding: 0 2rem;
        z-index: 20000;
    }

    /*ボタンクリック時の枠線消し*/
    .menu_btn:focus {
        outline: 0;
    }

    /*ボタン下にテキストを入れる場合*/
    /* .menu_btn.plustext {
        padding: 0 2rem 0.8rem;
    }

    .menu_btn.plustext .text {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        position: absolute;
        bottom: 1rem;
        left: 0;
        width: 100%;
        text-align: center;
        color: #fff;
    } */

    /*ボタン罫線*/
    .menu_btn span.bar {
        transform-origin: center;
        display: block;
        height: 2px;
        border-radius: 1px;
        background-color: #fff;
        transition: all 0.2s;
        /* margin: 0 auto 1rem; */
        /* ボタン下にテキストが入らない場合 */
        margin: 1rem 0;
    }

    .menu_btn.open .bar {
        width: 3.2rem;
    }

    .menu_btn.open .bar1 {
        transform: rotate(45deg);
    }

    .menu_btn.open .bar2 {
        opacity: 0;
    }

    .menu_btn.open .bar3 {
        transform: rotate(-45deg);
        margin-top: -2.5rem;
    }
}

@media screen and (max-width:480px) {
    .menu_btn {
        width: 6rem;
        height: 6rem;
        padding: 0 1.5rem 0rem;
    }

    /*ボタン下にテキストを入れる場合*/
    /* .menu_btn.plustext {
        padding: 0 1.75rem 0.5rem;
    }

    .menu_btn.plustext .text {
        font-size: 0.8rem;
        bottom: 0.75rem;
    } */

    /*ボタン罫線*/
    .menu_btn span.bar {
        margin: 0.8rem 0;
    }

    .menu_btn.open .bar {
        width: 2.9rem;
    }

    .menu_btn.open .bar1 {
        transform: rotate(45deg);
    }

    .menu_btn.open .bar2 {
        opacity: 0;
    }

    .menu_btn.open .bar3 {
        transform: rotate(-45deg);
        margin-top: -2rem;
    }
}


/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
メニュー
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

/*----------------------------------------*/
/* PC */
/*----------------------------------------*/
@media screen and (min-width:769px) {

    /*グローバルナビ*/
    .glo_nav_wrap {
        position: relative;
    }


    /*----------------------------------------*/
    /*メニュー部分*/
    .glo_menu_wrap ul.glo_menu {
        position: relative;
        height: 14.4rem;
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap {
        position: absolute;
        width: 100%;
    }

    /* カテゴリ別ボタン */
    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap a.aco_title {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        height: 5.8rem;
        background-color: #fff;
        font-size: 2.3rem;
        color: #000;
        border-radius: 1rem 1rem 0 0;
        padding-top: 1.8rem;
        text-align: center;
        box-sizing: border-box;
        text-decoration: none;
    }


    /* メニュー表示非表示 */
    .glo_menu_wrap ul.glo_menu.delaule li.cat_menu_wrap.private a.aco_title,
    .glo_menu_wrap ul.glo_menu.about li.cat_menu_wrap.about a.aco_title,
    .glo_menu_wrap ul.glo_menu.recruit li.cat_menu_wrap.recruit a.aco_title {
        background-color: #c80032;
        color: #fff;
    }

    .glo_menu_wrap ul.glo_menu.recruit li.cat_menu_wrap.recruit.recruit a.aco_title {
        background-color: #c80032;
        color: #fff;
    }

    .glo_menu_wrap ul.glo_menu.corporate li.cat_menu_wrap.corporate.corporate a.aco_title {
        background-color: #fa7d00;
        color: #fff;
    }

    /* 個人のお客さま表示を消す */
    .glo_menu_wrap ul.glo_menu.about li.cat_menu_wrap.private a.aco_title,
    .glo_menu_wrap ul.glo_menu.recruit li.cat_menu_wrap.private a.aco_title,
    .glo_menu_wrap ul.glo_menu.corporate li.cat_menu_wrap.private a.aco_title {
        background-color: #fff;
        color: #000;
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.private a.aco_title {
        width: 33rem;
        transform: translateX(-60rem);
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.corporate a.aco_title {
        width: 39rem;
        transform: translateX(-27rem);
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.about a.aco_title {
        width: 28rem;
        transform: translateX(12rem);
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.recruit a.aco_title {
        width: 20rem;
        transform: translateX(40rem);
    }

    /* 帯部分 */
    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap .cat_menu_inner {
        position: absolute;
        top: 5.8rem;
        width: 100%;
        background-color: #c80032;
        border-top: 2px solid #c8c8c8;
        font-size: 2.4rem;
        line-height: 1;
        padding: 0.25em 0;
        display: none;
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.recruit .cat_menu_inner {
        background-color: #c80032;
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.corporate .cat_menu_inner {
        background-color: #fa7d00;
    }

    .glo_menu_wrap ul.glo_menu.delaule li.cat_menu_wrap.private .cat_menu_inner,
    .glo_menu_wrap ul.glo_menu.about li.cat_menu_wrap.about .cat_menu_inner,
    .glo_menu_wrap ul.glo_menu.recruit li.cat_menu_wrap.recruit .cat_menu_inner,
    .glo_menu_wrap ul.glo_menu.corporate li.cat_menu_wrap.corporate .cat_menu_inner {
        display: block;
    }

    /* 個人のお客さま表示を消す */
    .glo_menu_wrap ul.glo_menu.about li.cat_menu_wrap.private .cat_menu_inner,
    .glo_menu_wrap ul.glo_menu.recruit li.cat_menu_wrap.private .cat_menu_inner,
    .glo_menu_wrap ul.glo_menu.corporate li.cat_menu_wrap.private .cat_menu_inner {
        display: none;
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap .cat_menu_inner ul {
        max-width: 1200px;
        margin: auto;
        display: flex;
        color: #fff;
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap .cat_menu_inner ul li {
        position: relative;
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap .cat_menu_inner ul li::after {
        content: '';
        position: absolute;
        display: block;
        height: 1em;
        width: 1px;
        background-color: #fff;
        right: 0;
        top: 50%;
        transform: translateY(-45%);
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap .cat_menu_inner ul li:last-child::after {
        display: none;
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap .cat_menu_inner ul li a {
        color: #fff;
        text-decoration: none;
        display: inline-block;
        padding: 1em;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap a.aco_title {
        font-size: 2rem;
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.private a.aco_title {
        width: 20vw;
        transform: translateX(-45vw);
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.corporate a.aco_title {
        width: 30vw;
        transform: translateX(-25vw);
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.about a.aco_title {
        width: 24vw;
        transform: translateX(5vw);
    }

    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap.recruit a.aco_title {
        width: 16vw;
        transform: translateX(29vw);
    }

    /* 帯部分 */
    .glo_menu_wrap ul.glo_menu li.cat_menu_wrap .cat_menu_inner {
        font-size: 2rem;
    }
}

/*----------------------------------------*/
/*スマートフォン*/
/*----------------------------------------*/
@media screen and (max-width:768px) {

    /*----------------------------------------*/
    /*メニューの外側*/
    .glo_menu_wrap {
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100vh - 7.5rem);
        /* safari用css */
        height: calc(100dvh - 7.5rem);
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #eee;
        z-index: 2010;
        /* 全画面の場合 */
        width: 100%;
        display: none;
    }

    .glo_menu_wrap.open {
        display: flex;
        flex-direction: column;
        animation: manufadein 0.3s;
    }

    /* メニューの順番 */
    .glo_menu_wrap.open .login_atm_wrap {
        order: -1;
    }

    /*メニューフェードインのアニメーション*/
    @keyframes manufadein {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }


}

@media screen and (max-width:480px) {

    /*----------------------------------------*/
    /*メニューの外側*/
    .glo_menu_wrap {
        height: calc(100vh - 6rem);
        /* safari用css */
        height: calc(100dvh - 6rem);

    }
}

@media screen and (max-width:768px) {

    /*----------------------------------------*/
    /*メニューの中身*/
    .glo_menu_wrap .glo_menu {
        padding: 0;
    }

    .glo_menu_wrap .glo_menu a.aco_title {
        display: block;
        position: relative;
        font-size: 2rem;
        padding: 1em 2em;
        text-decoration: none;
        color: #000;
        border-bottom: 1px solid #ccc;
        background-color: #e6e6e6;
    }



    .glo_menu_wrap .glo_menu li:first-child a.aco_title {
        border-top: 1px solid #ccc;
    }

    .glo_menu_wrap .glo_menu a.aco_title::before {
        content: '＋';
        font-size: 1em;
        width: 1em;
        height: 1em;
        position: absolute;
        left: 0.75em;
    }

    /* メニューが開いた状態 */
    .glo_menu_wrap .glo_menu a.aco_title.open {
        background-color: #ccc;
    }

    .glo_menu_wrap .glo_menu a.aco_title.open::before {
        transform: rotate(45deg);
        transition: all 0.2s ease;
    }

    /* メニューが閉じた状態 */
    .glo_menu_wrap .glo_menu a.aco_title.close::before {
        transform: rotate(0);
        transition: all 0.2s ease;
    }

    .glo_menu_wrap .glo_menu .cat_menu_inner {
        display: none;
        border-bottom: 1px solid #ccc;
        padding: 2rem 1rem 3rem;
    }

    .glo_menu_wrap .glo_menu .cat_menu_inner ul {
        display: flex;
        flex-wrap: wrap;
    }

    .glo_menu_wrap .glo_menu .cat_menu_inner ul li {
        min-width: 50%;
    }

    .glo_menu_wrap .glo_menu .cat_menu_inner ul li a {
        display: block;
        font-size: 2rem;
        padding: 0.5em;
        text-decoration: none;
        color: #000;
        padding-left: 1.5em;
        position: relative;
    }

    .glo_menu_wrap .glo_menu .cat_menu_inner ul li a::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        margin: auto;
        width: 0.3em;
        height: 0.3em;
        border-top: 2px solid #808080;
        border-right: 2px solid #808080;
        left: 0;
        transform: translateY(-30%) translateX(70%) rotate(45deg);
    }
}

@media screen and (max-width:480px) {

    /*----------------------------------------*/
    /*メニューの中身*/

    .glo_menu_wrap .glo_menu a.aco_title {
        font-size: 1.6rem;
        padding-left: 1.75em;
    }

    .glo_menu_wrap .glo_menu a.aco_title::before {
        left: 0.5em;
    }

    .glo_menu_wrap .glo_menu .cat_menu_inner {
        padding: 1rem 1rem 1.5rem;
    }


    .glo_menu_wrap .glo_menu .cat_menu_inner ul li a {
        font-size: 1.4rem;
    }

}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
パンくず
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.pankuzu_wrap {
    max-width: 1240px;
    padding: 0 2rem;
    margin: 0 auto 5rem;
    font-size: 1.6rem;
    line-height: 1.5;
}

.pankuzu_wrap a {
    text-decoration: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .pankuzu_wrap {
        margin: 0 auto 4rem;
        font-size: 1.2rem;
    }
}

@media screen and (max-width:768px) {
    .pankuzu_wrap {
        display: none;
    }
}