@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");


/* 灰色から黒のアニメーション */

/* 対象のボタン */
#page-cate-brand .right-btn.btn_animation_01 {
    position: relative;
    text-align: right;
    display: block;
    font-size: 1.6rem;
    padding-right: 80px;
    opacity: 1
}

@media screen and (max-width: 834px) {
    #page-cate-brand .right-btn.btn_animation_01 {
        height: 40px;
        font-size: 1.2rem;
        /* padding-right: 58px; */
        padding: 10px 58px 10px 0;
        margin-right: -10px;
    }
}

/* 1) 背景の丸（アニメするやつ） */
#page-cate-brand .right-btn.btn_animation_01:before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 58px;
    height: 60px;
    border-radius: 50%;
    transform: translateY(-50%);
    /* ここがキモ：
       - 左側がホバー後(#5D5A5B)
       - 右側が初期色(rgb(217,223,232))
       を横並びにした2倍幅のグラデーションを敷く */
    background: linear-gradient(to right,
            /* #5D5A5B 0 50%,
            rgb(217, 223, 232) 50% 100% */
            #3e3a39 0%,
            #3e3a39 49%,
            #E9ECF2 51%,
            #E9ECF2 100%);
    background-size: 203% 100%;
    background-position: 100% 0;
    transition: background-position .4s ease;
    z-index: 1;
    opacity: 1
}

/* 2) 矢印アイコン本体（文字として表示） */
#page-cate-brand .right-btn.btn_animation_01:after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 60px;
    /* 背景は透明。背景は :before が担当するので消す */
    background: transparent;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1;
    padding-left: 2px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: color .4s ease;
    /* 矢印色の反転 */
    color: #5D5A5B;
    /* 初期は濃い色の矢印 */
    z-index: 2;
    /* 背景(:before)より前に出す */
}


@media screen and (max-width: 834px) {
    #page-cate-brand .right-btn.btn_animation_01:before {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    #page-cate-brand .right-btn.btn_animation_01:after {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* hover時の挙動 */
#page-cate-brand .right-btn.btn_animation_01:hover:before {
    /* 背景グラデを左にスライド → #5D5A5B が全面に出る */
    background-position: 0 0;
}

#page-cate-brand .right-btn.btn_animation_01:hover:after {
    /* 矢印色を薄いグレーに反転 */
    color: rgb(217, 223, 232);
}

/* =========================================================
   footer専用：矢印ボタン反転アニメーション (.btn_animation_01)
   ========================================================= */
#footer .footer-wrap__btn.btn_animation_01 {
    /* position: relative; */
    display: inline-block;
    overflow: visible;
    opacity: 1
}

/* 背景部分（アニメーションレイヤー） */
#footer .footer-wrap__btn.btn_animation_01::before {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 28px;
    height: 30px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to right,
            #5D5A5B 0%,
            #5D5A5B 49%,
            rgb(217, 223, 232) 51%,
            rgb(217, 223, 232) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.4s ease;
    z-index: 1;
}

/* 矢印アイコン（Line Awesome） */
#footer .footer-wrap__btn.btn_animation_01::after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 30px;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1;
    padding-left: 2px;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: #5D5A5B;
    /* 初期の矢印色 */
    background: transparent;
    z-index: 2;
    transition: color 0.4s ease;
}

/* hoverで反転 */
#footer .footer-wrap__btn.btn_animation_01:hover::before {
    background-position: 0 0;
    /* 左→右に色がスライドして反転 */
}

#footer .footer-wrap__btn.btn_animation_01:hover::after {
    color: rgb(217, 223, 232);
    /* 背景色と反転 */
}

/* =========================================================
   aboutセクション専用：矢印ボタン反転アニメーション (.btn_animation_01)
   ========================================================= */
.about-wrap__ct-listItem a.btn_animation_01 {
    position: relative;
    display: inline-block;
    overflow: visible;
    font-weight: 300;
}

/* 背景部分（アニメーション用） */
.about-wrap__ct-listItem a.btn_animation_01::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to right,
            #5D5A5B 0%,
            #5D5A5B 49%,
            rgb(217, 223, 232) 51%,
            rgb(217, 223, 232) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.4s ease;
    z-index: 1;
}

@media screen and (max-width: 834px) {
    .about-wrap__ct-listItem a.btn_animation_01 {
        font-weight: 400;
    }

    .about-wrap__ct-listItem a.btn_animation_01::before {
        width: 20px;
        height: 20px;
        font-size: 1.2rem;
        font-weight: 400;
    }
}


/* 矢印アイコン（Line Awesome） */
.about-wrap__ct-listItem a.btn_animation_01::after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: color 0.4s ease;
    color: #5D5A5B;
    /* 初期アイコン色 */
    z-index: 2;
}

@media screen and (max-width: 834px) {
    .about-wrap__ct-listItem a.btn_animation_01::after {
        width: 20px;
        height: 20px;
        font-size: 1.2rem;
    }
}

/* hover時：左から右に色がスライドして反転 */
.about-wrap__ct-listItem a.btn_animation_01:hover::before {
    background-position: 0 0;
}

.about-wrap__ct-listItem a.btn_animation_01:hover::after {
    color: rgb(217, 223, 232);
}



/* =========================================================
   aboutセクション専用：矢印ボタン反転アニメーション (.btn_animation_01)
   ========================================================= */
.about-wrap__ct-listItem a.btn_animation_01 {
    position: relative;
    display: inline-block;
    overflow: visible;
    opacity: 1.0;
}

/* 背景部分（アニメーション用） */
.about-wrap__ct-listItem a.btn_animation_01::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to right,
            #5D5A5B 0%,
            #5D5A5B 49%,
            rgb(217, 223, 232) 51%,
            rgb(217, 223, 232) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.4s ease;
    z-index: 1;
}

@media screen and (max-width: 834px) {
    .about-wrap__ct-listItem a.btn_animation_01::before {
        width: 20px;
        height: 20px;
        font-size: 1.2rem;
    }
}

/* 矢印アイコン（Line Awesome） */
.about-wrap__ct-listItem a.btn_animation_01::after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: color 0.4s ease;
    color: #5D5A5B;
    /* 初期アイコン色 */
    z-index: 2;
}

@media screen and (max-width: 834px) {
    .about-wrap__ct-listItem a.btn_animation_01::after {
        width: 20px;
        height: 20px;
        font-size: 1.2rem;
    }
}

/* hover時：左から右に色がスライドして反転 */
.about-wrap__ct-listItem a.btn_animation_01:hover::before {
    background-position: 0 0;
}

.about-wrap__ct-listItem a.btn_animation_01:hover::after {
    color: rgb(217, 223, 232);
}

/* 
.news-list__item a:after {
    content: "\f30b";
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: #d9dfe8;
    border-radius: 50%;
    font-family: Line Awesome Free;
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 834px) {
    .news-list__item a:after {
        width: 20px;
        height: 20px;
        font-size: 1.2rem;
    }
} */

/* =========================================================
   news-list専用：矢印ボタン反転アニメーション (.btn_animation_01)
   ========================================================= */
.news-list__item a.btn_animation_01 {
    position: relative;
    display: inline-block;
    overflow: visible;
    opacity: 1.0;
    font-weight: 300;
}

/* 背景（アニメーション部分） */
.news-list__item a.btn_animation_01 p::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to right,
            #5D5A5B 0%,
            #5D5A5B 49%,
            rgb(217, 223, 232) 51%,
            rgb(217, 223, 232) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.4s ease;
    z-index: 1;
}

@media screen and (max-width: 834px) {
    .news-list__item a.btn_animation_01 {
        font-weight: 400;
    }

    .news-list__item a.btn_animation_01 p::before {
        width: 20px;
        height: 20px;
        font-size: 1.2rem;
        transform: translateY(0%);
    }
}


/* アイコン */
.news-list__item a.btn_animation_01 p::after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #5D5A5B;
    /* 初期アイコン色 */
    transition: color 0.4s ease;
    z-index: 2;
}

@media screen and (max-width: 834px) {
    .news-list__item a.btn_animation_01 p::after {
        width: 20px;
        height: 20px;
        font-size: 1.2rem;
        transform: translateY(0%);
    }
}


/* hover時 */
.news-list__item a.btn_animation_01:hover::before {
    background-position: 0 0;
    /* 左から右にスライド */
}

.news-list__item a.btn_animation_01:hover::after {
    color: rgb(217, 223, 232);
    /* 反転 */
}

/* =========================================================
   franchise専用：矢印ボタン反転アニメーション (.btn_animation_01)
   ========================================================= */
.franchise-wrap__list-item a.btn_animation_01 {
    position: relative;
    display: inline-block;
    overflow: visible;
    opacity: 1.0;
    width: 100%;
}

/* 背景アニメーションレイヤー */
.franchise-wrap__list-item a.btn_animation_01::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 28px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to right,
            #5D5A5B 0%,
            #5D5A5B 49%,
            #fff 51%,
            #fff 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.4s ease;
    z-index: 1;
}

@media screen and (max-width: 834px) {
    .franchise-wrap__list-item a.btn_animation_01::before {
        width: 28px;
        height: 28px;
    }
}


/* アイコン（Line Awesome） */
.franchise-wrap__list-item a.btn_animation_01::after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 28px;
    background: transparent;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1;
    padding-top: 2px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #5D5A5B;
    /* 初期矢印色（濃い） */
    transition: color 0.4s ease;
    z-index: 2;
}

@media screen and (max-width: 834px) {
    .franchise-wrap__list-item a.btn_animation_01::after {
        width: 20px;
        height: 20px;
        font-size: 1.2rem;
        right: 4px;
    }
}


/* hover時：左から右にスライドして色反転 */
.franchise-wrap__list-item a.btn_animation_01:hover::before {
    background-position: 0 0;
}

.franchise-wrap__list-item a.btn_animation_01:hover::after {
    color: #fff;
    /* 背景色に合わせて反転 */
}

/* =========================================================
   recruit専用：矢印ボタン反転アニメーション (.btn_animation_01)
   ========================================================= */
.recruit-link a {
    opacity: 1;
}

.recruit-link .c-txt__basic.btn_animation_01 {
    position: relative;
    display: inline-block;
    overflow: visible;
    opacity: 1;
}

/* 背景アニメーションレイヤー */
.recruit-link .c-txt__basic.btn_animation_01::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(to right,
            #5D5A5B 0%,
            #5D5A5B 49%,
            rgb(217, 223, 232) 51%,
            rgb(217, 223, 232) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.4s ease;
    z-index: 1;
    transform: translateY(0);
}



/* 矢印アイコン本体 */
.recruit-link .c-txt__basic.btn_animation_01::after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
    color: #5D5A5B;
    right: 0;
    bottom: 0;
    z-index: 2;
    transition: color 0.4s ease;
}

/* hover時：背景スライド＋アイコン色反転 */
.recruit-link .c-txt__basic.btn_animation_01:hover::before {
    background-position: 0 0;
}

.recruit-link .c-txt__basic.btn_animation_01:hover::after {
    color: rgb(217, 223, 232);
}

/* -----------------------------------------------
   PCサイズ対応（min-width: 835px）
   ----------------------------------------------- */
@media screen and (min-width: 835px) {
    .recruit-link .c-txt__basic.btn_animation_01::before {
        width: 60px;
        height: 60px;
        right: -25px;
        top: 46%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .recruit-link .c-txt__basic.btn_animation_01::after {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
        right: -25px;
        top: 46%;
        bottom: auto;
        transform: translateY(-50%);
    }
}

/* =========================================================
   c-btn__01 系：矢印ボタン反転アニメーション (.btn_animation_01)
   ========================================================= */
.c-btn__01.btn_animation_01 {
    position: relative;
    display: inline-block;
    overflow: visible;
    /* align-items: center; */
    width: 100%;
    text-align: right;
    padding: 20px 80px 0 0;
}

/* 背景のアニメーションレイヤー */
.c-btn__01.btn_animation_01::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(to right,
            #5D5A5B 0%,
            #5D5A5B 49%,
            #d9dfe8 51%,
            #d9dfe8 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.4s ease;
    z-index: 1;
}

/* 白バージョンの場合（ベース色が白） */
.c-btn__01--white.btn_animation_01::before {
    background: linear-gradient(to right,
            #5D5A5B 0%,
            #5D5A5B 49%,
            #fff 51%,
            #fff 100%);
    background-size: 210% 100%;
    background-position: 100% 0;
}

/* 矢印アイコン */
.c-btn__01.btn_animation_01::after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1;
    color: #5D5A5B;
    /* 通常時の矢印色 */
    background: transparent;
    right: 0;
    top: 0;
    z-index: 2;
    transition: color 0.4s ease;
}

@media screen and (max-width: 834px) {
    .c-btn__01.btn_animation_01 {
        width: 100%;
        padding: 4px 30px 11px 0;
        text-align: left;
    }

    .c-btn__01--white.btn_animation_01::before {
        width: 28px;
        height: 28px;
    }

    .c-btn__01.btn_animation_01::after {
        width: 20px;
        height: 20px;
        font-size: 1.2rem;
        right: 3px;
        top: 12%;

    }
}

/* hover時：背景スライド＋アイコン色反転 */
.c-btn__01.btn_animation_01:hover::before {
    background-position: 0 0;
}

.c-btn__01.btn_animation_01:hover::after {
    color: #d9dfe8;
}


/* 白ボタンのhover時は白反転 */
.c-btn__01--white.btn_animation_01:hover::after {
    color: #fff;
}

/* =========================================================
   c-btn__02専用：矢印ボタン反転アニメーション (.btn_animation_01)
   ========================================================= */
.c-btn__02.btn_animation_01 {
    position: relative;
    display: inline-flex;
    overflow: visible;
}

/* 背景アニメーションレイヤー */
.c-btn__02.btn_animation_01::before {
    content: "";
    position: absolute;
    top: calc(50% - 15px);
    right: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(to right,
            #5D5A5B 0%,
            #5D5A5B 49%,
            #d8dee7 51%,
            #d8dee7 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.4s ease;
    z-index: 1;
}

/* アイコン（Line Awesome） */
.c-btn__02.btn_animation_01::after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1;
    top: calc(50% - 15px);
    right: 18px;
    color: #5D5A5B;
    /* 初期アイコン色 */
    background: transparent;
    z-index: 2;
    transition: color 0.4s ease;
}

/* hover時：背景が左→右にスライド、アイコン反転 */
.c-btn__02.btn_animation_01:hover::before {
    background-position: 0 0;
}

.c-btn__02.btn_animation_01:hover::after {
    color: #d8dee7;
    /* 背景色と反転 */
}

/* =========================================================
   business-list専用：矢印ボタン反転アニメーション (.btn_animation_01)
   ========================================================= */
.business-list__ttl.btn_animation_01 {
    display: inline-block;
    overflow: visible;
}

/* 背景アニメーションレイヤー */
.business-list__ttl.btn_animation_01::before {
    content: "";
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(to right,
            #3e3a39 0%,
            #3e3a39 49%,
            #fff 51%,
            #fff 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.4s ease;
    z-index: 1;
}

/* アイコン（Line Awesome） */
.business-list__ttl.btn_animation_01::after {
    content: "\f30b";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 62px;
    height: 60px;
    border-radius: 50%;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1;
    color: #3e3a39;
    background: transparent;
    bottom: 40px;
    right: 40px;
    z-index: 2;
    transition: color 0.4s ease;
}

/* hover時：左→右スライドで色反転 */
.business-list__ttl.btn_animation_01:hover::before {
    background-position: 0 0;
}

.business-list__ttl.btn_animation_01:hover::after {
    color: #fff;
}

/* =========================================
   SPサイズ対応（max-width: 834px）
   ========================================= */
@media screen and (max-width: 834px) {
    .business-list__ttl.btn_animation_01::before {
        width: 20px;
        height: 20px;
        bottom: 19px;
        right: 17px;
        background: linear-gradient(to right,
                #3e3a39 0%,
                #3e3a39 49%,
                #fff 51%,
                #fff 100%);
        background-size: 202% 100%;
        background-position: 100% 0;
    }

    .business-list__ttl.btn_animation_01::after {
        width: 20px;
        height: 18px;
        font-size: 1.2rem;
        padding-top: 3px;
        bottom: 19px;
        right: 17px;
        color: #3e3a39;
    }

    .business-list__ttl.btn_animation_01:hover::after {
        color: #fff;
    }
}