/* 部門サイドバー */
/* 用途: サービス・部門ページ（#service, .modaal, 部門個別 management/rec/trust 等） */
.serviceSide-bl02 {
    display: grid;
    position: fixed;
    top: 12rem; /* 固定ヘッダーより下に表示 */
    left: 3%;
    width: 20%;

    gap: 1vh;
}

.serviceSide-bl02 a {
    opacity: .3;
}

.serviceSide-bl02 a:hover {
    opacity: 1;
}

.serviceSide-bl02 a.active {
    opacity: 1;
    box-shadow: rgba(0, 0, 0, .1) 0 20px 25px -5px, rgba(0, 0, 0, .04) 0 10px 10px -5px;
}

.serviceSide-bl02 a .serviceside-box {
    position: relative;
    padding: 2% 0 2% 2rem;
    border-radius: 5px;
    background-color: #f8f8f8;
    transition: transform .3s;
}

.serviceSide-bl02 a .serviceside-box img {
    width: auto;
    height: 5vh;
    padding: 2% 2rem 2% 0;
    border-right: .5px solid #c6c6c6;
}


.serviceSide-bl02 a .serviceside-box p {
    margin-left: 2rem;
    font-size: 1.5rem;
}


.serviceSide-bl02 a .serviceside-box p::after {
    position: absolute;
    top: 40%;
    left: 90%;
    transform: rotate(-45deg);
    width: 13px;
    height: 13px;
    content: "";
}


.serviceSide-bl02 a .border-green p::after {
    border-right: 1px solid #04b851;
    border-bottom: 1px solid #04b851;
}

.serviceSide-bl02 a .border-blue p::after {
    border-right: 1px solid #0271bf;
    border-bottom: 1px solid #0271bf;
}

.serviceSide-bl02 a .border-red p::after {
    border-right: 1px solid #fe0000;
    border-bottom: 1px solid #fe0000;
}

.serviceSide-bl02 a .border-pink p::after {
    border-right: 1px solid #ff95ff;
    border-bottom: 1px solid #ff95ff;
}

.serviceSide-bl02 a .border-light_blue p::after {
    border-right: 1px solid #00b1f0;
    border-bottom: 1px solid #00b1f0;
}

.serviceSide-bl02 a .border-purple p::after {
    border-right: 1px solid #7231a2;
    border-bottom: 1px solid #7231a2;
}

.serviceSide-bl02 a .border-yellow p::after {
    border-right: 1px solid #ffe56a;
    border-bottom: 1px solid #ffe56a;
}


/* .serviceSide-bl02 a:hover .serviceside-box {
    transform: scale(1.05);
} */

@media (max-width: 820px) {
    #service .serviceside-box {
        display: flex;
        align-items: center;
        padding: 2rem;
    }

    #service .service-side a .serviceside-box img {
        width: auto;
        height: 8vh;
        padding: 3% 2rem 3% 0;
        border-right: .5px solid #c6c6c6;
    }

    #service .service-side a .serviceside-box p {
        margin-left: 2rem;
    }
}


.border-green {
    border: 1px solid #04b851;
}

.border-blue {
    border: 1px solid #0271bf;
}

.border-red {
    border: 1px solid #fe0000;
}

.border-pink {
    border: 1px solid #ff95ff;
}

.border-light_blue {
    border: 1px solid #00b1f0;
}

.border-purple {
    border: 1px solid #7231a2;
}

.border-yellow {
    border: 1px solid #ffe56a;
}


/* 部門メイン（左余白を utilities より優先） */
#service {
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: 25% !important;
    color: #0d3161;
}

#service .service-title {
    position: relative;
    margin: 10px 0;
    padding: 0 0 0 30px;
    color: rgba(13, 49, 97, .12);
    font-weight: bold;
    font-size: 8rem;
    font-family: "corporate-logo-ver2", sans-serif;
}

#service .text {
    padding-top: 20px;
    padding-left: 30px;
    font-size: 2rem;
    font-family: "hiragino-mincho-pron", sans-serif;
}

#service .service-sv {
    position: relative;
}

#service .sv-text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    padding: 3rem;
    background-color: rgba(13, 49, 97, .75);
    color: #ffffff;
}

#service .sv-text::before {
    position: absolute;
    top: -5%;
    right: -2%;
    transform: rotate(-90deg);
    width: 0;
    height: 0;
    border-left: 3rem solid transparent;
    content: "";
}

#service .movie {
    position: absolute;
    top: 83%;
    left: 94%;
    z-index: 1;
    width: 5%;
}

/* .modaal-video-container {
    max-width: 1100px;
    aspect-ratio: 16 / 9;
} */

.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
    background: #0d3161;
}

/* サービスページ等: 全画面モーダル（ヘッダー・メニューより前面） */
.modaal-overlay {
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.9);
}

.modaal-wrapper {
    z-index: 1000;
}

#service .breadcrumb__list {
    display: flex;
    padding-top: 20px;
    padding-bottom: 80px;
    padding-left: 30px;
    color: #0d3161;
}

#service .breadcrumb__item span {
    opacity: .8;
    font-size: 1.5rem;
}

#service .between01, #service .between02 {
    position: relative;
    margin-right: 30px;
}

#service .between01::after {
    display: block;
    position: absolute;
    top: 7px;
    left: 116%;
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-top: 2px solid #0d3161;
    border-right: 2px solid #0d3161;
    content: "";;;
}

#service .between02::after {
    display: block;
    position: absolute;
    top: 7px;
    left: 108%;
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-top: 2px solid #0d3161;
    border-right: 2px solid #0d3161;
    content: "";;;
}

#service .business-title {
    margin-bottom: 30px;
    padding: 30px;
    font-weight: bold;
    font-size: 3.8rem;
    line-height: 1.4;
    letter-spacing: .05em;
    font-size: 3.6rem;
    letter-spacing: .12em;
}

#service .detail-text {
    padding: 0 3% 80px 30px;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: .06em;
}

#service .service-box {
    padding: 0 3% 120px 30px;
}

#service .box-color {
    position: relative;
    padding: 30px 0 ;
    border-radius: 10px;
    transition: .3s ease-in-out;
}

#service .box-content {
    display: flex;
    align-items: center;
}

#service .box-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-width: 13vw;
    padding: 30px;
    border-right: .5px solid #c6c6c6;
}


#service .box-title img {
    width: 5vw;
    height: auto;
    padding-bottom: 10px;
}


#service .box-title h2 {
    width: max-content;
    font-size: 2rem;
}

#service .box-text {
    width: 80%;
    padding: 0 5% 0 30px;
    font-size: 1.8rem;
    line-height: 1.75;
    letter-spacing: .05em;
}

#service .btn {
    display: inline; /* 要素幅をテキスト量に依存させる */
    margin-left: 75%;
    padding: 10px 25px; /* 縦横の余白を調整 */
    border-radius: 30px;
    background: #0c3161;
    color: #ffffff;
    text-align: center;
    white-space: nowrap; /* テキストが改行されないようにする */
    transition: .3s ease-in-out;
}

#service .btn:hover {
    opacity: .5;
}

#service .service-side {
    display: flex;
    flex-direction: column;
    margin: 0 3% 10px;

    gap: 10px;
}

#service .serviceside-box {
    display: flex;
    align-items: center;
}

@media (max-width: 820px) {
    #service {
        padding-left: 0 !important;
    }

    #service .main-inner {
        border-left: 1px solid transparent;
    }

    #service .service-title {
        padding: 0 0 0 20px;
        font-size: 5rem;
    }

    #service .movie {
        top: 75%;
        left: 90%;
        transform: scale(1.5);
    }

    .modaal-video-wrap {
        position: relative;
        top: 35vh;
        margin: auto;
    }


    #service .breadcrumb__list {
        display: flex;
        padding-top: 10px;
        padding-bottom: 20px;
        padding-left: 30px;
        color: #0d3161;
    }

    #service .breadcrumb__item span {
        font-size: 1.2rem;
    }

    #service .between01::after {
        top: 3px;
        left: 130%;
        width: 7px;
        height: 7px;
    }

    #service .between02::after {
        top: 3px;
        left: 115%;
        width: 7px;
        height: 7px;
    }

    #service .text {
        font-size: 1.5rem;
    }

    #service .sv-text {
        padding: 1.5rem 3rem;
        font-size: 1.5rem;
    }

    #service .business-title {
        margin-bottom: 15px;
        padding: 20px;
        font-size: 2.6rem;
        letter-spacing: .12em;
    }

    #service .detail-text {
        padding: 0 3% 30px 20px;
        font-size: 1.5rem;
        line-height: 1.75;
        text-align: justify;
    }

    #service .service-box {
        padding: 0 3% 80px 20px;
    }

    #service .box-content {
        flex-direction: column;
    }

    #service .box-title {
        padding: 10px 10px 20px 10px;
        border-right: .5px solid transparent;
        border-bottom: .5px solid #c6c6c6;
    }

    #service .box-title img {
        width: 23vw;
    }

    #service .box-text {
        padding: 25px 5% 0;
    }

    #service .btn {
        display: block;
        position: unset;
        margin: 30px auto 0;
    }

    #service .modal-content {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 700px;
        margin: 56% auto;
        padding: 50px 0 0 0;
        background-color: #ffffff;
    }
}

/* 部門個別 */
/* マネジメント */
#management .menu_button_bg svg {
    fill: #04b851;
}

#management::-webkit-scrollbar {
    width: 10px;
    background-color: #f1f1f1;
}

#management::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(45deg, #04b851, #dbf3e1); /* グラデーション */
}

#management::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #28d174, #04b851); /* ホバー時のグラデーション */
}

#management .management-sv {
    background-color: #dbf3e1;
}

#management .sv-text::before {
    border-bottom: 3rem solid #04b851;
}

#management .box-color:hover {
    background-color: #dbf3e1;
}

#management .box-color:hover {
    background-color: #dbf3e1;
}

#management #pagetop {
    background-color: #04b851;
}

/* REC */
#rec .menu_button_bg svg {
    fill: #d32929;
}

#rec::-webkit-scrollbar {
    width: 10px;
    background-color: #f1f1f1;
}

#rec::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(45deg, #d32929, #f9dbd9); /* グラデーション */
}

#rec::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ff4e4e, #d32929); /* ホバー時のグラデーション */
}

#rec .rec-sv {
    background-color: #f9dbd9;
}

#rec .sv-text::before {
    border-bottom: 3rem solid #d32929;
}

#rec .box-color:hover {
    background-color: #f9dbd9;
}

#rec .box-color:hover {
    background-color: #f9dbd9;
}

#rec .btn-color {
    background-color: #009991;
}

#rec #pagetop {
    background-color: #d32929;
}

/* トラスト */
#trust .menu_button_bg svg {
    fill: #0271bf;
}

#trust::-webkit-scrollbar {
    width: 10px;
    background-color: #f1f1f1;
}

#trust::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(45deg, #0271bf, #d7e5f3); /* グラデーション */
}

#trust::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #4da8ff, #0271bf); /* ホバー時のグラデーション */
}

#trust .trust-sv {
    background-color: #d7e5f3;
}

#trust .sv-text::before {
    border-bottom: 3rem solid #0271bf;
}

#trust .box-color:hover {
    background-color: #d7e5f3;
}

#trust .box-color:hover {
    background-color: #d7e5f3;
}

#trust .box-title .size-adjust {
    margin-top: 10px;
    font-size: 1.3rem;
}

#trust #pagetop {
    background-color: #0271bf;
}

/* ケアシステム */
#care-system .menu_button_bg svg {
    fill: #ff95ff;
}

#care-system::-webkit-scrollbar {
    width: 10px;
    background-color: #f1f1f1;
}

#care-system::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(45deg, #ff95ff, #ffecff); /* グラデーション */
}

#care-system::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ffd1ff, #ff95ff); /* ホバー時のグラデーション */
}

#care-system .care-sv {
    background-color: #ffecff;
}

#care-system .sv-text::before {
    border-bottom: 3rem solid #ff95ff;
}

#care-system .box-color:hover {
    background-color: #ffecff;
}

#care-system .box-color:hover {
    background-color: #ffecff;
}

#care-system .btn {
    background: #dd4f98;
}

#care-system #pagetop {
    background-color: #ff95ff;
}


/* アカデミー */
#academy .menu_button_bg svg {
    fill: #00b150;
}

#academy::-webkit-scrollbar {
    width: 10px;
    background-color: #f1f1f1;
}

#academy::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(45deg, #00b150, #d7f2e3); /* グラデーション */
}

#academy::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #66e29f, #00b150); /* ホバー時のグラデーション */
}

#academy .academy-sv {
    background-color: #d7f2e3;
}

#academy .sv-text::before {
    border-bottom: 3rem solid #00b150;
}

#academy .box-color:hover {
    background-color: #d7f2e3;
}

#academy .box-color:hover {
    background-color: #d7f2e3;
}

#academy #pagetop {
    background-color: #00b150;
}

/* itクリエイト */
#it-create .menu_button_bg svg {
    fill: #ffe56a;
}

#it-create::-webkit-scrollbar {
    width: 10px;
    background-color: #f1f1f1;
}

#it-create::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(45deg, #ffe56a, #fffae7); /* グラデーション */
}

#it-create::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #fff5a3, #ffe56a); /* ホバー時のグラデーション */
}

#it-create  .service-title .adjust {
    font-size: 10rem;
    letter-spacing: 0rem;
}

#it-create .it-sv {
    background-color: #fffae7;
}

#it-create .sv-text::before {
    border-bottom: 3rem solid #ffe56a;
}

#it-create .box-color:hover {
    background-color: #fffae7;
}

#it-create #pagetop {
    background-color: #ffe56a;
}

@media (max-width: 820px) {
    #it-create .service-title .adjust {
        font-size: 5rem;
    }
}

/* #lso（common.css から移動） */
#lso .menu_button_bg svg {
    fill: #ffe56a;
}

#lso::-webkit-scrollbar {
    width: 10px;
    background-color: #f1f1f1;
}

#lso::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(45deg, #ffe56a, #fffae7); /* グラデーション */
}

#lso::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #fff5a3, #ffe56a); /* ホバー時のグラデーション */
}

#lso .lso-sv {
    background-color: #fffae7;
}

#lso .sv-text::before {
    border-bottom: 3rem solid #ffe56a;
}

#lso .box-color:hover {
    background-color: #fffae7;
}

#lso #pagetop {
    background-color: #ffe56a;
}

#lso .qr-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 20px;
    text-align: center;
}

#lso .qr {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lso .qrimg {
    max-width: 150px;
    height: auto;
    border-radius: 5px;
}

#lso .btn {
    max-width: fit-content;
    margin-left: 0;
}

@media (max-width: 820px) {
    #lso .service-title .adjust:first-child {
        margin-left: 1rem;
    }

    #lso .service-title .adjust:nth-child(2) {
        margin-left: 1rem;
    }

    #lso .service-title .adjust:last-child {
        margin-left: 1rem;
    }

    #lso .qr-wrap {
        flex-direction: column;
    }
}