@charset "urf-8";
@import url('component.css');
/************************************************
    KOSEI inc.
    採用サイト: https://koseikogyo.co.jp/recruit/
    20250630 -
************************************************/
/*　---------------------------------------------
    Root
-------------------------------------------------　*/
:root {
	--clr-a-course: 162, 202, 220;
    --clr-a-course-dark: 129, 163, 178;
	--clr-b-course: 173, 160, 100;
    --clr-b-course-dark: 133, 120, 57;
	--clr-c-course: 174, 183, 50;
    --clr-c-course-dark: 130, 140, 14;

    --clr-mokkun: 235, 230, 207;
    --clr-yoyo: 242, 195, 59;
    --clr-kuusan: 236, 241, 232;
    --clr-gungun: 174, 183, 50;
    --clr-suisui: 162, 202, 220;
    --clr-tsucchi: 173, 153, 69;
}

/*　---------------------------------------------
    Page Head
-------------------------------------------------　*/
.ly_pageHeader {
    position: relative;
    display: grid;
    align-items: center;
    width: 100%;
    height: 420px;
    margin: 0 auto;
    background-image: url(../img/dec_symbolmark.svg);
    background-size: 46%;
    background-position: 122% 50%;
    background-repeat: no-repeat;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(255, 255, 255, 0.8);
      }
      & > * {
        position: relative;
        z-index: 2;
      }
}
.bl_pageHeader-cont {
    width: 94%;
    max-width: var(--cont-width);
    margin: 0 auto;
    padding: 40px 0 0;

    .bl_pageHeader-title {
        color:rgb(var(--clr-main));
        font-size: clamp(28px, 5vw, 36px);
        font-weight: 700;
    }
}
@media (max-width: 960px) {
    .ly_pageHeader {
        background-size: 68%;
        background-position: 200% 50%;

        .bl_pageHeader-cont {
            width: 90%;
            text-align: center;
        }
    }
}
@media (max-width: 640px) {
    .ly_pageHeader {
        height: 380px;
        background-size: 75%;
        background-position: 250% 80%;

        .bl_pageHeader-cont {
            padding: 0;
        }
    }
}
/*　---------------------------------------------
    Hero
-------------------------------------------------　*/
.ly_hero {
    width: 100%;
    margin: -92px auto 0;

    .bl_hero-bg {
        position: relative;
        width: 100%;
        min-height: 500px;
        contain: content;
    }

    .bl_hero-img {
        display: grid;
        place-content: center;
    
      --mask:
        radial-gradient(67.27px at 50% 95px,#000 99%,#0000 101%) calc(50% - 100px) 0/200px 51% repeat-x,
        radial-gradient(67.27px at 50% -45px,#0000 99%,#000 101%) 50% 50px/200px calc(51% - 50px) repeat-x,
        radial-gradient(67.27px at 50% calc(100% - 95px),#000 99%,#0000 101%) calc(50% - 100px) 100%/200px 51% repeat-x,
        radial-gradient(67.27px at 50% calc(100% + 45px),#0000 99%,#000 101%) 50% calc(100% - 50px)/200px calc(51% - 50px) repeat-x;
      -webkit-mask: var(--mask);
              mask: var(--mask);
    
        height: 600px;
        background-color: #CCDDE1;
        z-index: 8;
    }
    .bl_hero-img::before {
        content:"";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: #0D4D58;
        background: linear-gradient(90deg, rgba(13, 77, 88, 0.8) 40%, rgba(0, 109, 128, 0.3) 75%, rgba(0, 109, 128, 0.53) 94%);
        z-index: 10;
    }
    .el_bg-trans.bl_hero-img,
    .el_bg-trans.bl_hero-img::before { background:transparent; }

    .bl_heroPhoto {
        display: block;
        width: 100vw;
        max-width: 1600px;/**/
        height: auto;
        object-fit: cover;
    }
    .bl_hero-cont {
        position: absolute;
        inset: 0;
        display: grid;
        align-items: center;
        width: 94%;
        max-width: var(--cont-width);
        height: 100%;
        margin: auto;
        color: #fff;

        .bl_hero-title {
            font-size: clamp(28px, 5vw, 36px);
            color: #fff;
            font-weight: 500;
            line-height: 1.45;
        }
        .bl_hero-titleImg {
            margin: 0 auto;
            text-align: center;

            .el_hero-title-number {
                max-height: clamp(60px, 10vw + 1px, 120px);
            }
        }
        .bl_hero-msg {
            margin: 2rem 0 0;
            color: #fff;
            font-size: clamp(20px, 5vw, 24px);
            font-family: "Zen Kaku Gothic New", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans","BIZ UDPゴシック", sans-serif;
            font-weight: 400;
            line-height: 1.5;
        }
        .bl_hero-contTxt-detail {
            max-width: 60%;
            margin-top: 2rem;
        }
    }
}
@media (max-width: 1024px) {
    .ly_hero {
        .bl_heroPhoto {
            width: auto;
            height: 100vw;
        }
    }
}
@media (max-width: 768px) {
    .ly_hero {
        .bl_hero-img {
            max-height: 500px;
            height: 110vw;
        }
        .bl_hero-bg {
            min-height: 280px;
        }
        .bl_hero-cont {
            width: 90%;
            /* text-align: center; */

            .bl_hero-contTxt-detail {
                max-width: 100%;
                margin: 1rem 0 0;
                /* text-align: center; */
            }

            .bl_hero-title {
                font-size: clamp(20px, 5vw, 30px);
                line-height: 1.45;
            }
        }
    }
}
@media (max-width: 640px) {
    .ly_hero {
        .bl_hero-cont {
            width: 100%;
            padding: 0 12px;

            .bl_hero-title {
                margin: 0 0 .5rem;
                line-height: 1.4;
            }
            .bl_hero-contTxt {
                /* padding-top: 20px; */

                .bl_hero-contTxt-detail {
                    line-height: 1.4;
                }
            }
            .bl_hero-msg {
                margin: 0;
                font-size: clamp(16px, 5vw + .1em, 18px);
            }
            .bl_hero-contTxt-detail { font-size: clamp(15px, 5vw + .1em, 16px); }
        }
    }
}
/* Page Header Sub Style ------------------------- */
.ly_substyle {
    position: relative;

   .bl_hero-img {
        place-content: center;

      /* --mask:
        radial-gradient(0 at 50% 95px,#000 99%,#0000 101%) calc(50% - 100px) 0/200px 51% repeat-x,
        radial-gradient(0 at 50% -45px,#0000 99%,#000 101%) 50% 50px/200px calc(51% - 50px) repeat-x,
        radial-gradient(67.27px at 50% calc(100% - 95px),#000 99%,#0000 101%) calc(50% - 100px) 100%/200px 51% repeat-x,
        radial-gradient(67.27px at 50% calc(100% + 45px),#0000 99%,#000 101%) 50% calc(100% - 50px)/200px calc(51% - 50px) repeat-x; */
      -webkit-mask: var(--mask);
              mask: var(--mask);
    
        /* height: 700px; */
    }
    .ly_hero {
        .bl_hero-cont {
            align-items: center;
            max-width: 1200px;
            margin-bottom: 0;
            margin-top: 4.5rem;

            .bl_hero-contTxt-detail {
                max-width: 100%;
                margin-top: 1rem;
            }
        }
        .bl_heroPhoto {
            height: 100vh;
            /* margin-top: 80px; */
        }
    }
    /* .ly_hero {
        .bl_hero-cont {
            align-items: end;
            max-width: 1200px;
            margin-bottom: 10rem;

            .bl_hero-contTxt-detail {
                max-width: 100%;
                margin-top: 1rem;
            }
        }
        .bl_heroPhoto {
            height: 55vh;
        }
    } */
}
@media (max-width: 768px) {
    .ly_substyle {
        .ly_hero {
            .bl_hero-cont {
                margin-bottom: 7rem;
            }
            .bl_heroPhoto {
                height: 60vh;
            }
        }
    }
}
/*　---------------------------------------------
    Article
-------------------------------------------------　*/
.ly_article {
    width: 100%;
    margin: 0;

    .bl_article-cont {
        width: 94%;
        max-width: var(--cont-width);
        margin: 0 auto;
        padding: 80px 0;
    }

    h2 {
        color:rgb(var(--clr-main));
        font-weight: 500;
        line-height: 1.4;

        &.el_headline-other { color:rgb(var(--clr-sub-gray)); }
    }
    h3 {
        position: relative;
        display: inline-block;
        margin-bottom: 1rem;
        color:rgb(var(--clr-sub-gray));
        font-weight: 500;
        z-index: 14;

        &:after {
            content:"";
            position: absolute;
            bottom:0;
            display: block;
            width: 100%;
            height: 10px;
            background-color: rgb(var(--clr-sub-blue), .4);
            z-index: -1;
        }
    }
}
@media (max-width: 640px) {
    .ly_article {
        .bl_article-cont {
            width: 90%;
            padding: 40px 0;
        }
    }
}
/*　---------------------------------------------
    Company Info - 会社紹介
-------------------------------------------------　*/
.bl_comp_wrap:not(:first-child) { margin-top: 120px; }

.bl_comp_box {
    position: relative;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: repeat(2, auto);
    column-gap: 2rem;
    margin-top: 1.5rem;
    z-index: 40;

    .bl_comp_boxImg-main {
        max-width: 640px;
        /* min-width: 100%; */
        margin-right: -100px;

        img { width: 100%; }
    }
    &.other {
        position: relative;

        img {
            width: 100%;
            max-width: 420px;
        }
        img:last-child {
            position: absolute;
            bottom: -2rem;
            right: -6.2rem;
            max-width: 300px;
        }
    }
}
    .bl_comp_boxTxt { padding-bottom: 2.5rem; }
    .bl_comp_boxImg-sub.business {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, auto);
        column-gap: 1rem;
        max-width: var(--min-width-lg);
        margin-top: -2rem;
        padding: 1.2rem;
        font-size: .8rem;
        line-height: 1.2;
        text-align: center;
        background-color: rgb(var(--clr-sub-lightyellow));
        z-index: 50;

        img { margin-bottom: .5rem; }
    }

    .bl_comp_boxImg-sub.office {
        display: grid;
        grid-template-columns: repeat(2, auto);
        column-gap:0;
        max-width: var(--min-width-sm);
        margin: -2rem 0 0 1rem;
        font-size: .8rem;
        line-height: 1.2;
        text-align: center;
        background-color: rgb(var(--clr-sub-lightgreen));
        z-index: 40;

        img { margin-bottom: .5rem; }

        .bl_office-photo1 {
            max-width: 360px;
            width: 100%;
            margin: -1rem 0 1.5rem -1rem;
        }
        .bl_office-photo2 {
            max-width: 300px;
            width: 100%;
            margin: 5rem 2rem -5rem -2rem;
            box-sizing: content-box;
        }
    }

    .bl_comp_boxImg-sub.training {
        display: grid;
        grid-template-columns: repeat(2, auto);
        column-gap:0;
        max-width: var(--min-width-sm);
        margin: -2rem 0 0 1rem;
        font-size: .8rem;
        line-height: 1.2;
        text-align: center;
        background-color: rgb(var(--clr-sub-blue));
        z-index: 40;

        img { margin-bottom: .5rem; }

        .bl_training-photo1 {
            max-width: 360px;
            width: 100%;
            margin: -1rem 0 1.5rem -1rem;
        }
        .bl_training-photo2 {
            max-width: 300px;
            width: 100%;
            margin: 5rem 2rem -5rem -2rem;
            box-sizing: content-box;
        }
    }

@media (max-width: 1200px) {
    .bl_comp_box {
        &.other {
            img {
                width: 100%;
                max-width: 360px;
            }
            img:last-child {
                bottom: 0;
                right: -1rem;
                max-width: 240px;
            }
        }
    }
}
@media (max-width: 1024px) {
    .bl_comp_box {
        grid-template-columns: 50% 50%;
        align-items: center;

        .bl_comp_boxImg-main {
            margin-right: 0;
        }
        &.other {
            img {
                width: 100%;
                max-width: 260px;
            }
            img:last-child {
                right: 0;
                max-width: 200px;
            }
        }
    }
    .bl_comp_boxImg-sub.business {
        max-width: var(--min-width-lg);
        margin-top: 0;
    }
    .bl_comp_boxImg-sub.office, .bl_comp_boxImg-sub.training {
        max-width: var(--min-width-ss);
        margin-top: 1rem;
    }
}
@media (max-width: 800px) {
    .bl_comp_box {
        grid-template-columns: 60% 40%;

        &.other {
            grid-template-columns: auto;

            .bl_comp_boxImg-main {
                margin-right: 0;
                display: grid;
                grid-template-columns: repeat(2, calc(50% - .5rem));
                column-gap: 1rem;
                max-width: 100%;
            }

            img { max-width: 100%; }
            img:last-child {
                position: static;
                max-width: 100%;
            }
        }
    }
    .bl_comp_wrap:not(:first-child) { margin-top: 90px; }
    .bl_comp_boxImg-sub.office, .bl_comp_boxImg-sub.training { margin: 1rem auto; }
    .bl_comp_boxTxt { padding-bottom: 1.5rem; }
}
@media (max-width: 640px) {
    .bl_comp_box {
        grid-template-columns: auto;

        .bl_comp_boxTxt { order: 2; padding-top: 1.5rem; }
        .bl_comp_boxImg-main { order: 1; }
    }
    .bl_comp_boxImg-sub.business {
        grid-template-columns: repeat(2, auto);
        row-gap: 1rem;
    }
    .bl_comp_boxImg-sub.office, .bl_comp_boxImg-sub.training { margin: 1rem auto 6rem; }
    .bl_comp_wrap:not(:first-child) { margin-top: 48px; }
}
@media (max-width: 480px) {
    .bl_comp_boxImg-sub.office {
        grid-template-columns: auto;
        grid-template-rows: repeat(2, auto);
        row-gap:1rem;
        margin: 0;

        img { margin-bottom: .5rem; }

        .bl_office-photo1 {
            max-width: 90%;
            margin: 1em auto 0;
        }
        .bl_office-photo2 {
            max-width: 90%;
            margin: 0 auto 1em;
        }
    }

    .bl_comp_boxImg-sub.training {
        grid-template-columns: auto;
        grid-template-rows: repeat(2, auto);
        row-gap:1rem;
        margin: 0;

        img { margin-bottom: .5rem; }

        .bl_training-photo1 {
            max-width: 90%;
            margin: 1em auto 0;
        }
        .bl_training-photo2 {
            max-width: 90%;
            margin: 0 auto 1em;
        }
    }
}
/*　---------------------------------------------
    Workflow - 仕事のながれ
-------------------------------------------------　*/
.bl_workflow_wrap:not(:first-child) { margin-top: 120px; }
.bl_workflow_box {
    display: grid;
    grid-template-columns: 25% 70%;
    column-gap: 5%;
    margin: 2rem auto;
    counter-increment: number 1;
    z-index: 40;
}
.bl_workflow_boxTxt {
    display: grid;
    place-content: end;
    margin-top: 4rem;
    margin-bottom: 2rem;

    .bl_workflow_boxTxt-detail {
        position: relative;
        padding: 2rem;
        border: solid 4px #CCDDE1;
        border-radius: 16px;
    
        &::before {
            content: counter(number) " ";
            /* counter-increment: number 1; */
            position: absolute;
            top: -1.5rem;
            left: -1.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0.6rem;
            color: rgb(var(--clr-main-dark));
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 1;
            background-color: #CCDDE1;
            border-radius: 50%;
            text-align: center;
            z-index: 100;
        }
        &::after {
            content: " ";
            position: absolute;
            bottom: -1.6rem;
            left: 0;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 12px solid rgb(var(--clr-main-dark));
            z-index: 100;
        }
    
        h3 {
            position: absolute;
            top: -1.5rem;
            left: 1.5rem;
            padding: 0 1rem;
            color: rgb(var(--clr-main-dark));
            font-size: clamp(24px, 20px + .1em, 34px);
            background-color: #fff;
    
            &::after { display: none; }
        }
    }
}
.bl_workflow_box:last-child {
    .bl_workflow_boxTxt-detail::after { display: none; }
}
/* 研修制度 */
.bl_training {
    position: relative;
    max-width: var(--min-width-lg);
    margin: 0 auto 4rem;
    padding: 4rem;
    background-color: rgb(0, 109, 0128, 0.1);
    background-image: url(../img/workflow_training_bg.png);
    background-repeat: repeat-y;
    background-position: 110% 0;
    background-size: 50%;

    .bl_training_title {
        display: inline-block;
        margin-left: -5rem;

        span {
            display: inline-block;
            margin-bottom: .5rem;
            padding: .5rem 1.4rem;
            color: #fff;
            background-color: rgb(var(--clr-main));

            &:first-child { display: block; }
        }
    }

    .bl_training_kenshu {
        display: grid;
        grid-template-columns: 35% 65%;
        column-gap: 0;
        margin: 4rem auto;

        .bl_training_kenshuText {
            position: relative;
            display: inline-block;
            margin-top: -1.5rem;
            margin-right: -2rem;
            padding: 1.5rem;
            background-color: #fff;
            border-radius: 1rem;
            box-shadow: -3px 3px 0px 3px rgb(162, 202, 220, 1);

            h3 {
                display: block;
                color: rgb(var(--clr-main));
                text-align: center;
                margin: .5rem auto;

                &::after { display: none; }
            }
        }
        .bl_training_kenshuText::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -15px;
            border: 12px solid transparent;
            border-left: 25px solid #fff;
            z-index: 100;
          }
          .bl_training_kenshuText::after{
            content: '';
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            top: 46%;
            left: 100%;
            border: 12px solid transparent;
            border-left: 25px solid rgb(162, 202, 220, 1);
          }
    }

    .bl_training_ojt {
        display: grid;
        grid-template-columns: 65% 35%;
        column-gap: 0;
        margin: 4rem auto;

        .bl_training_ojtText {
            position: relative;
            display: inline-block;
            margin-top: -1.5rem;
            margin-left: -2rem;
            padding: 1.5rem;
            background-color: #fff;
            border-radius: 1rem;
            box-shadow: 3px 3px 0px 3px rgb(162, 202, 220, 1);

            h3 {
                display: block;
                color: rgb(var(--clr-main));
                text-align: center;
                margin: 0 auto .5rem;

                &::after { display: none; }
            }
        }
        .bl_training_ojtText::before {
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            margin-top: -15px;
            border: 12px solid transparent;
            border-right: 25px solid #fff;
            z-index: 100;
          }
          .bl_training_ojtText::after{
            content: '';
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            top: 46%;
            right: 100%;
            border: 12px solid transparent;
            border-right: 25px solid rgb(162, 202, 220, 1);
          }
    }
}
/* 現場を支えるメンバー */
.bl_otherMembers {}

@media (max-width: 768px) {
    #rec_workflow {
        .bl_workflow_box {
            grid-template-columns: none;

            .bl_workflow_boxImg {
                width: 90%;
                margin: auto;
            }

            .bl_workflow_boxTxt {
                width: 90%;
                margin: 3rem auto 1rem;
            }
        }
        .bl_training {
            padding: 4rem 2rem;

            .bl_training_title {
                margin-left: -1rem;
            }
            .bl_training_kenshu {
                grid-template-columns: 45% 55%;
            }
            .bl_training_ojt {
                grid-template-columns: 55% 45%;
            }
        }
    }
}
@media (max-width: 640px) {
    #rec_workflow {
        .bl_training {

            .bl_training_title {
                margin-left: -1rem;
            }
            .bl_training_kenshu {
                grid-template-columns: none;

                .bl_training_kenshuText {
                    margin-top: 0;
                    margin-right: 0;

                    &::before {
                        top: 100%;
                        left: 50%;
                        margin-top: 0;
                        transform: rotate(90deg);
                    }
                    &::after {
                        top: 100%;
                        left: 50%;
                        transform: rotate(90deg);
                    }
                }
            }
            .bl_training_ojt {
                grid-template-columns: none;
                grid-template-areas:
                "bottom"
                "top";

                .bl_taining_ojtExplain {
                    grid-area: bottom;
                }
                .bl_training_ojtImg { grid-area: top; }

                .bl_training_ojtText {
                    margin-top: 0;
                    margin-left: 0;

                    &::before {
                        top: 100%;
                        left: 50%;
                        margin-top: 0;
                        transform: rotate(-90deg);
                    }
                    &::after {
                        top: 100%;
                        left: 50%;
                        transform: rotate(-90deg);
                    }
                }
            }
        }
    }
}
/*　---------------------------------------------
    Interview
-------------------------------------------------　*/
#rec_interview {
    .ly_hero {
        width: 100%;
        margin: -92px auto 0;
        overflow: visible;

            .bl_hero-img {
                background-color: rgb(var(--clr-main));
            }

            .bl_hero-cont {
                width: 100%;
                max-width: 100%;
            }
    }
    .bl_hero-interview-wrap {
        position: relative;
        display: grid;
        grid-template-columns: 20% 80%;
        inset: 0;
        width: 100%;
        max-width: 1200px;
        height: 100%;
        margin: auto;
        padding: 140px 0;
        color: #fff;
        contain: content;

        .bl_hero-contTxt {
            display: grid;
            place-items: center;
            row-gap: 16px;
            padding: 0 2rem;

            .bl_hero-title {
                margin: 0 1rem;
                font-size: clamp(28px, 5vw, 36px);
                font-weight: 500;
                line-height: 1.4;
                writing-mode: vertical-rl;

                span { display: block; }
            }

            .bl_interview-contUp {
                color: #fff;
                writing-mode: vertical-rl;

                .bl_interview-subtitle {
                    margin: 0;
                    font-size: clamp(20px, 5vw, 24px);
                    font-family: "Zen Kaku Gothic New", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans","BIZ UDPゴシック", sans-serif;
                    font-weight: 400;
                    line-height: 1.5;
                }
                .bl_interview-contDown {
                    text-align: center;
                }
            }
        }
    }

    .bl_interview-wrap {
        .bl_interviewPhoto {
            display: block;
            height: 100vw;
            object-fit: cover;
        }
        .bl_interview-slide {
            display: grid;
            inset: 0;
            /* width: 100%; */
            width: clamp(100%, 100vw + 1rem, 1200px);
            min-height: 240px;
            height: 100%;
    
            /* カード式スライド */
            .slider {
                width: 100%;
                /* max-width: 1000px; */
                overflow: hidden;
                margin: auto 0;
            }
            
            .slider-track {
                display: flex;
                align-items: flex-start;
                transition: transform 0.5s ease;
            }
            
            .card {
                flex: 0 0 calc(20% - 16px); /* 親幅の1/4 */
                height: auto;
                aspect-ratio: 3 / 2; /* 比率を保って高さを決める */
                margin-right: 16px;     /* 適度な間隔（あとでJSと同期） */
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                font-size: .9rem;
                line-height: 1.4;

                .bl_interview_item {
                    position: relative;
                    display: block;

                    &::before {
                        content:"";
                        position: absolute;
                        inset: 0;
                        background-color: rgb(var(--clr-main-light), .3);
                        transition: all .3s;
                    }
                    &:hover, &:active {
                        &::before { background-color: rgb(var(--clr-main-light), .1); }
                    }
                }

                figcaption {
                    margin-top: .8rem;
                    font-size: clamp(.9em, 5vw + .1em, 1em);
                    text-align: center;

                    span { font-size: .85em; }
                }
            }
        }
    }
    .bl_memtor_wrap {
        margin-top: 40px;
        
        .bl_mentor_box {
            position: relative;
            margin-top: 1.5rem;
            z-index: 40;

            .bl_mentor_img {
                display: flex;
                justify-content: center;
                gap: 1rem;
                margin: 7rem auto 4rem;

                .bl_mentor_img01 {
                    position: relative;
                    margin: 0;

                    img {
                        position: relative;
                        width: 100%;
                        max-width: 400px;
                    }
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        top: -12%;
                        right: -38%;
                        width: 100%;
                        max-width: 460px;
                        height: 240px;
                        background-color: #CCDDE1;
                    }
                }
                .bl_mentor_img02 {
                    position: relative;
                    margin: -80px 0 0 0;

                    img {
                        position: relative;
                        width: 100%;
                        max-width: 440px;
                    }
                }
            }
        }
    }
}
@media (max-width: 960px) {
    #rec_interview {
        .bl_interview-cont {
            .bl_interview-contTxt {

                .bl_interview-contUp {
                    .bl_interview-title {
                        margin: 0 .5rem;
                        font-size: clamp(20px, 5vw + .1rem, 28px);
                        font-weight: 500;
                        line-height: 1.2;
                    }
                    .bl_interview-subtitle {
                        font-size: clamp(16px, 5vw + .1rem, 18px);
                        line-height: 1.5;
                    }
                    .bl_interview-contTxt-detail {
                        font-size: clamp(.85rem, 5vw + .1rem, 16px);
                        line-height: 1.3;
                    }
                }
            }
            .bl_interview-slide {
                .slider {
                    width: 100%;
                    max-width: 600px;
                }
            }
        }
    }
}
@media (max-width: 768px) {
    #rec_interview {
        .bl_hero-interview-wrap {
            padding: 120px 0;

            .bl_hero-contTxt {
                .bl_hero-title {
                    margin: 0 1rem;
                    font-size: clamp(22px, 5vw + .1rem, 30px);
                }
            }
        }
        .bl_interview-wrap {
            .bl_interview-slide {
                .card {
                    flex: 0 0 calc(25% - 16px);
                    height: auto;
                }
            }

            .bl_memtor_wrap {
                .bl_mentor_box {
                    .bl_mentor_img {
                        .bl_mentor_img01 {
                            &::before {
                                height: 187px;
                            }
                        }
                    }
                }
            }
            .ly_interview {
                --mask:
                    radial-gradient(53.81px at 50% 76px,#000 99%,#0000 101%) calc(50% - 80px) 0/160px 51% repeat-x,
                    radial-gradient(53.81px at 50% -36px,#0000 99%,#000 101%) 50% 40px/160px calc(51% - 40px) repeat-x,
                    radial-gradient(53.81px at 50% calc(100% - 76px),#000 99%,#0000 101%) calc(50% - 80px) 100%/160px 51% repeat-x,
                    radial-gradient(53.81px at 50% calc(100% + 36px),#0000 99%,#000 101%) 50% calc(100% - 40px)/160px calc(51% - 40px) repeat-x;
                -webkit-mask: var(--mask);
                        mask: var(--mask);

                .bl_interview-cont { width: 90%; }
            }
        }
    }
}
@media (max-width: 640px) {
    #rec_interview {
        .bl_hero-interview-wrap {
            grid-template-columns:auto;
            place-content: baseline;
            padding: 100px 0;

            .bl_hero-contTxt {
                .bl_hero-title {
                    margin: 0 0 .5rem 0;
                    font-size: clamp(18px, 5vw + .1rem, 26px);
                    writing-mode: horizontal-tb;

                    span { display: inline-block; }
                }
            }
        }
        .ly_interview { margin: 0 auto; }
        .bl_interview-cont {
            display: block;
            width: 90%;
            padding: 120px 0 80px;

            .bl_interview-contTxt {
                place-content:start;
                padding: 0 1rem;

                .bl_interview-contUp {
                    writing-mode:inherit;

                    .bl_interview-title {
                        margin: 0;
                        padding: .5rem 0 1rem;

                        span { display: inline-block; }
                    }
                    .bl_interview-contTxt-detail { line-height: 1.6; }
                }
                .bl_interview-contDown { text-align: left; }
            }
        }

        .bl_interview-wrap {
            .bl_interview-slide {
                .card {
                    figcaption {
                        margin-top: .5rem;
                        font-size: clamp(.8em, 5vw + .1em, .9em);
                        text-align: center;

                        span {
                            display: block;
                            font-size: .85em;
                        }
                    }
                }
            }
        }
        .bl_memtor_wrap {
            .bl_mentor_box {
                .bl_mentor_img {
                    .bl_mentor_img01 {
                        &::before {
                            height: 120px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 480px) {
    #rec_interview {
        .bl_interview-wrap {
            .bl_interview-slide {
                .card {
                    flex: 0 0 calc(33% - 16px);
                    height: auto;
                }
            }
        }
        .bl_memtor_wrap {
            .bl_mentor_box {
                .bl_mentor_img {
                    margin: 5rem auto 3rem;

                    .bl_mentor_img01 {
                        &::before {
                            height: 90px;
                        }
                    }
                }
            }
        }
    }
}

/*　---------------------------------------------
    Interview Article
-------------------------------------------------　*/
#rec_interview-article {
    .bl_article-cont {
        .bl_interview-article_head {
            color: rgb(var(--clr-main));
            font-size: clamp(1.15rem, 4vw + .1rem, 1.45rem);
            line-height: 1.5;

            &::after { display: none; }
        }

        .bl_interview-article_2col {
            display: grid;
            grid-template-columns: auto 40%;
            column-gap: 5%;
            margin: 6rem auto;

            .bl_interview-article_2col-img {
                position: relative;
                margin: auto;

                img {
                    position: relative;
                    width: 100%;
                    max-width: 380px;
                }
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        bottom: -16px;
                        right: -16px;
                        width: 100%;
                        max-width: 380px;
                        height: 400px;
                        background-color: rgb(var(--clr-sub-lightyellow));
                    }
            }
        }

        .bl_interview-article_wide {
            margin: 3rem auto;

            .bl_interview-article_wide-img {
                position: relative;
                display: grid;
                place-items: end;
                width: 100%;
                z-index: 30;

                img {
                    width: 90%;
                }
            }
            .bl_interview-article_2col-txt {
                margin-top: -2rem;

                .bl_interview-article_head {
                    width: 94%;
                    padding: 4.2rem 2rem 2rem;
                    background-color: rgb(var(--clr-sub-lightgreen));
                    z-index: 20;
                }
            }
        }
    }

    .bl_interview-article_section {
        display: grid;
        grid-template-columns: 50% 50%;
        column-gap: 0;

        .bl_interview-article_section-txt {
            padding: 3rem;
            background-color: #DEECEE;

            h4 {
                margin-bottom: 1rem;
                color: rgb(var(--clr-main));
            }
        }
        .bl_interview-article_section-img {
            object-fit: cover;
            height: 100%;
            overflow: hidden;

            img {
                object-fit: cover;
                height: 100%;
            }
        }
    }
}
@media (max-width: 960px) {
    #rec_interview-article {
        .bl_article-cont {
            .bl_interview-article_2col {
                .bl_interview-article_2col-img {
                    &::before {
                        bottom: -16px;
                        right: -16px;
                        max-width: 300px;
                        height: 340px;
                    }
                }
            }
        }
    }
}
@media (max-width: 768px) {
    #rec_interview-article {
         .bl_article-cont {
            .bl_interview-article_head {
                width: 100%;
                font-size: clamp(1.1rem, 4vw + .1rem, 1.3rem);
                line-height: 1.4;
            }

            .bl_interview-article_2col {
                display: flex;
                flex-direction: column-reverse;
                gap: 5%;
                margin: 3rem auto;

                .bl_interview-article_2col-img {
                    img {
                        width: 100%;
                        max-width: 320px;
                    }
                }
                .bl_interview-article_2col-txt {
                    padding-top: 2rem;

                    .bl_interview-article_head {
                        width: 100%;
                    }
                }
            }

            .bl_interview-article_wide {
                .bl_interview-article_wide-img {
                    img { width: 100%; }
                }
                .bl_interview-article_2col-txt {
                    padding-top: 2rem;

                    .bl_interview-article_head {
                        width: 100%;
                        padding: 2rem 1.5rem 2rem;
                    }
                }
            }

            .bl_interview-article_section {
                grid-template-columns: auto;
            }
        }
    }
}
@media (max-width: 640px) {
    #rec_interview-article {
        .bl_interview-article_section {
            .bl_interview-article_section-txt {
                padding: 2rem;
            }
            .bl_interview-article_section-img {
                img {
                    object-fit:initial;
                    height: auto;
                }
            }
        }
    }
}
/*　---------------------------------------------
    数字でみる興盛
-------------------------------------------------　*/
#rec_number {
    .bl_number-category { margin-bottom: 1em; }
    .bl_number-wrap {
        display: grid;
        grid-template-columns: repeat(6, calc(100% / 6 - 22px));
        grid-template-rows: repeat(5, auto);
        grid-column-gap: 24px;
        grid-row-gap: 24px;
    }
    .bl_number_box {
        position: relative;
        /* display: grid;
        place-content: center; */
        padding: 2em;
        border:solid 2px rgb(var(--clr-main));
        box-shadow: 6px 6px 0px 2px rgb(var(--clr-main-light), .5);
        aspect-ratio: 1 / 1;

        img { width: 100%; }

        .bl_number_box-cont {
            display: grid;
            height:100%;

            h3 {
                min-height: 1em;
                margin-bottom: 0;
                color:#8A8F92;
                font-size: clamp(1.7rem, 5vw + .1rem, 2.6rem);
                font-weight: 700;
                line-height: 1;
                text-align: center;

                &::after { display: none; }
            }
            .el_boximg-big {
                width: 500vw;
                max-width: 460px;
            }
        }
    }
    .digit {
        /* width: 40px; */
        text-align: center;
        animation: flip 0.15s linear infinite;
    }

    @keyframes flip {
        0% { opacity: 0.3; transform: translateY(10px); }
        50% { opacity: 1; transform: translateY(-10px); }
        100% { opacity: 0.3; transform: translateY(10px); }
    }
    .counter-wrap {
        font-family: Arial, monospace;
        text-align: center;
    }
    .counter {
        display: inline-flex;
        align-items: center;
        min-height: 1em;
        color: rgb(var(--clr-main));
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        background-image: url(../img/bg_wave.svg);
        background-size: 20vw;
        background-repeat: no-repeat;
        background-position: center bottom;
        transform-origin: center;
        line-height: 1.1;
    }
    .label {
        color: #8A8F92;
        font-weight: 700;
    }

    .bl_number_box1 {
        grid-area: 1 / 1 / 2 / 4;

        .bl_number_box-cont {
            display: grid;
            place-content: center;
            align-items: center;

            h3 { text-align: left; }

            .counter-wrap {
                display: grid;
                grid-template-columns: auto auto;
                gap: 8px;
                align-items: baseline;
                padding-right: 4em;
            }

            .bl_number_box-img {
                margin-top: 1rem;
                text-align: right;

                img { max-width: 94px; }
            }
        }
    }
    .bl_number_box2 {
        grid-area: 1 / 4 / 2 / 7;

        .bl_number_box-cont {
            display: grid;
            place-content: center;
            text-align: center;
        }

        .bl_number_box-other {
            position: absolute;
            right: 2em;
            bottom: 2em;
            font-size: .9em;
            text-align: right;
        }
    }
    .bl_number_box3 {
        grid-area: 2 / 1 / 3 / 3;
        line-height: 1;

        .bl_number_box-cont {
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-template-rows: repeat(2, auto);
            grid-column-gap: 16px;
            grid-row-gap: 16px;
            place-content: center;
            align-items: center;

            h3 {
                grid-area: 1 / 1 / 2 / 3;
                text-align: center;
            }

            .counter-wrap {
                grid-area: 2 / 1 / 3 / 2;
            }
            .bl_number_tani {
                grid-area: 2 / 2 / 3 / 3;
                text-align: center;

                .bl_number_box-img {
                    margin-bottom: .3rem;
                    img { max-width: 50px; }
                }
                .label {
                    text-align: center;
                }
            }
        }
    }

    .bl_number_box4 {
        grid-area: 2 / 3 / 3 / 5;

        .bl_number_box-cont {
            display: grid;
            place-content: center;
            align-items: center;
            grid-column-gap: 8px;
            grid-row-gap: 16px;

            .counter-wrap {
                display: grid;
                grid-template-columns: auto auto;
                gap: 8px;
                align-items: baseline;
            }
        }
    }
    .bl_number_box5 {
        grid-area: 2 / 5 / 3 / 7;

        .bl_number_box-cont {
            display: grid;
            place-content: center;
            align-items: center;
            grid-column-gap: 8px;
            grid-row-gap: 16px;

            .counter-wrap {
                display: grid;
                grid-template-columns: auto auto;
                gap: 8px;
                align-items: baseline;
            }
        }
    }

    .bl_number_box6 {
        grid-area: 3 / 1 / 4 / 4;

            .bl_number_box-cont {
                text-align: center;

                h3 {
                    display: grid;
                    align-items: center;
                }
            }

        .counter-wrap {
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-template-rows: repeat(2, 50%);
            grid-column-gap: 9em;
            grid-row-gap: 0px;
            place-content: center;
            align-items: start;
            width: 100%;
            padding: 0;
            background-image: url(../img/bg_number_busho.svg);
            background-size: 60%;
            background-repeat: no-repeat;
            background-position:  50% 20%;

            .bl_number_box-title {
                color: #8A8F92;
                font-size: clamp(.9em, 5vw + .1em, 1.1em);
                font-weight: 700;
                line-height: 1;
            }
            .counter {
                background-size: 16vw;
            }
        }

        .counter-item1 {
            grid-area: 1 / 1 / 2 / 2;
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-template-rows: repeat(2, auto);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            place-content: center;
            align-items: end;
            padding-bottom: 4em;

            .bl_number_box-title { grid-area: 1 / 1 / 2 / 2; }
            .counter { grid-area: 2 / 1 / 3 / 2; }
            .label {
                grid-area: 1 / 2 / 3 / 3;
                line-height: 1.4;
            }
        }
        .counter-item2 {
            grid-area: 2 / 1 / 3 / 2;
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-template-rows: repeat(2, auto);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            place-content: center;
            align-items: end;

            .bl_number_box-title { grid-area: 1 / 1 / 2 / 2; }
            .counter { grid-area: 2 / 1 / 3 / 2; }
            .label {
                grid-area: 1 / 2 / 3 / 3;
                line-height: 1.4;
            }
        }
        .counter-item3 {
            grid-area: 1 / 2 / 3 / 3;
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-template-rows: repeat(2, auto);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            place-content: center;
            align-items: end;

            .bl_number_box-title {
                grid-area: 1 / 1 / 2 / 2;
                font-size: clamp(1em, 5vw + .1em, 1.2em);
            }
            .counter { grid-area: 2 / 1 / 3 / 2; }
            .label {
                grid-area: 1 / 2 / 3 / 3;
                line-height: 1.4;
            }
        }
    }
    .bl_number_box7 {
        grid-area: 3 / 4 / 4 / 7;

        .bl_number_box-cont {
            display: grid;
            place-content: center;
            align-items: center;

            h3 {
                text-align: center;
                line-height: 1.2;

                span { display: block; font-size: .8em; }
            }

            .counter-wrap {
                display: grid;
                grid-template-columns: auto auto;
                gap: 8px;
                align-items: baseline;
                padding: 4em 0;
            }

            .bl_number_box-img {
                margin-top: 1rem;
                text-align: right;

                img { max-width: 94px; }
            }
        }
    }
    .bl_number_box8 {
        grid-area: 4 / 1 / 5 / 3;
        background-image: url(../img/bg_number_danjo.svg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 80%;

        .counter-item {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 150px;
            margin: auto;
            color: rgb(var(--clr-main));
            font-weight: 700;
            background-image: url(../img/bg_wave.svg);
            background-size: 20vw;
            background-repeat: no-repeat;
            background-position: center bottom;
            transform-origin: center;
            line-height: 1.2;

            span { background-image: none; }
        }
        .label {
            padding-top: .6em;
        }
    }

    .bl_number_box9 {
        grid-area: 4 / 3 / 5 / 5;
        place-content: center;
    
        .bl_number_box-cont {
            display: grid;
            place-content: center;
            align-items: center;

            .counter-wrap {
                display: grid;
                grid-template-columns: auto auto;
                gap: 8px;
                align-items: baseline;
                padding: 2.5em 0 1.5em;
            }

            .bl_number_box-img {
                margin-top: 1rem;
                text-align: right;

                img { max-width: 94px; }
            }
        }
    }
    .bl_number_box10 {
        grid-area: 4 / 5 / 5 / 7;

        .bl_number_box-cont {
            display: grid;
            place-content: center;
            align-items: center;

            h3 {
                text-align: center;
                line-height: 1.2;

                span { display: block; }
            }

            .counter-wrap {
                display: grid;
                grid-template-columns: auto auto;
                gap: 8px;
                align-items: baseline;
                padding: 1.5em 0;
            }
        }
    }

    .bl_number_box11 {
        grid-area: 5 / 1 / 6 / 4;

            .bl_number_box-cont {
                grid-template-rows: 5em 1fr 1em;
                text-align: center;

                h3 {
                    display: grid;
                    place-content: center;
                }
            }

        .counter-wrap {
            display: grid;
            grid-template-columns: repeat(2, 50%);
            grid-template-rows: repeat(3, auto);
            grid-column-gap: 2em;
            grid-row-gap: 1em;
            place-content: center;
            align-items: start;
            width: 100%;
            background-image: url(../img/bg_number_shusshin.svg);
            background-size: 28%;
            background-repeat: no-repeat;
            background-position: 50% 70%;

            .bl_number_box-title {
                color: #8A8F92;
                font-size: clamp(.9em, 5vw + .1em, 1.4em);
                font-weight: 700;
                line-height: 1;
            }
            .counter {
                background-size: 16vw;
            }
            .counter-item-common {
                display: grid;
                grid-template-columns: repeat(3, auto);
                grid-column-gap: .5em;
                place-content: center;
                align-items: end;
                line-height: 1.2;

                .bl_number_box-title {
                    padding: 1em 0;
                }
            }
            .counter-item1 { grid-area: 1 / 1 / 2 / 3; }
            .counter-item2 { grid-area: 2 / 1 / 3 / 2; }
            .counter-item3 { grid-area: 2 / 2 / 3 / 3; }
            .counter-item4 { grid-area: 3 / 1 / 4 / 2; }
            .counter-item5 { grid-area: 3 / 2 / 4 / 3; }
        }
        .bl_number_box-other {
            height: 1em;
            font-size: .9em;
            text-align: right;
        }
    }

    .bl_number_box12 {
        grid-area: 5 / 4 / 6 / 7;

        .bl_number_box-cont {
            display: grid;
            place-content: center;
            background-image: url(../img/bg_number_sports.svg);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: 50% 75%;


            h3 {
                text-align: center;
                line-height: 1.2;

                span { display: block; }
            }

            .counter-wrap {
                display: grid;
                grid-template-columns: auto auto;
                gap: 8px;
                align-items: baseline;
                padding: 4em 0 3.5em;
            }
        }
        .bl_number_box-other {
            position: absolute;
            right: 2em;
            bottom: 2em;
            font-size: .9em;
            text-align: right;
        }
    }

    .el_counter-fontSizelll { font-size: clamp(9em, 18vw + .1em, 13em); }
    .el_counter-fontSizell { font-size: clamp(5em, 12vw + .1em, 8.5em); }
    .el_counter-fontSizel { font-size: clamp(3.6em, 10vw + .1em, 5.8em); }
    .el_counter-fontSizem { font-size: clamp(3em, 12vw + .1em, 5em); }
    .el_counter-fontSizes { font-size: clamp(2.5em, 12vw + .1em, 4em); }
    .el_counter-fontSizess { font-size: clamp(1.8em, 12vw + .1em, 3em); }

    .el_label-fontSizelll { font-size: clamp(4em, 10vw + .1em, 5.5em); }
    .el_label-fontSizell { font-size: clamp(2.2em, 8vw + .1em, 3.4em); }
    .el_label-fontSizel { font-size: clamp(1.8em, 8vw + .1em, 3em); }
    .el_label-fontSizem { font-size: clamp(1.6em, 8vw + .1em, 2.2em); }
    .el_label-fontSizes { font-size: clamp(1.3em, 8vw + .1em, 2em); }
    .el_label-fontSizess { font-size: clamp(1.1em, 8vw + .1em, 1.7em); }
        .counter {
            display: inline-flex;
            gap: 0;
            justify-content: center;
        }

        .digit {
            position: relative;
            display: inline-block;
            width: 1ch;               /* 桁の幅を固定 */
            height: 1.1em;            /* 高さも固定 → 揺れない */
            overflow: hidden;
            font-weight: bold;
            text-align: center;
        }

        .digit-inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            transition: transform 0.3s ease-out;
        }

        .digit-inner span {
            display: block;
            height: 1.1em;            /* 各数字の高さを固定 */
            line-height: 1.1em;
            text-align: center;
        }
        .digit.dot {
            width: 0.5ch;     /* ← ドットだけ小さく */
            vertical-align: baseline;
            margin: 0;      /* お好みで */
        }
}

@media (max-width: 1100px) {
    #rec_number {
         .bl_number_box {
            .bl_number_box-cont {
                h3 {
                    margin-bottom: .5em;
                    font-size: clamp(1.4em, 5vw + .1rem, 2em);
                }
            }
        }

        .bl_number_box1 {
            .bl_number_box-cont {
                .bl_number_box-img {
                    img {
                        max-width: 74px;
                    }
                }
            }
        }
        .bl_number_box9 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding: 2em 0 1em;
                }
            }
        }
        .bl_number_box10 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding: 1em 0;
                }
            }
        }
    .el_counter-fontSizelll { font-size: clamp(7.5em, 18vw + .1em, 10em); }
    .el_counter-fontSizell { font-size: clamp(3.5em, 12vw + .1em, 6.5em); }
    .el_counter-fontSizel { font-size: clamp(3em, 10vw + .1em, 4.3em); }
    .el_counter-fontSizem { font-size: clamp(2.8em, 12vw + .1em, 3.8em); }
    .el_counter-fontSizes { font-size: clamp(2em, 12vw + .1em, 3em); }
    .el_counter-fontSizess { font-size: clamp(1.2em, 12vw + .1em, 2.4em); }

    .el_label-fontSizelll { font-size: clamp(4em, 10vw + .1em, 5.5em); }
    .el_label-fontSizell { font-size: clamp(2.2em, 8vw + .1em, 3.4em); }
    .el_label-fontSizel { font-size: clamp(1.8em, 8vw + .1em, 3em); }
    .el_label-fontSizem { font-size: clamp(1.6em, 8vw + .1em, 2.2em); }
    .el_label-fontSizes { font-size: clamp(1.3em, 8vw + .1em, 2em); }
    .el_label-fontSizess { font-size: clamp(1.1em, 8vw + .1em, 1.7em); }
    }
}
@media (max-width: 960px) {
    #rec_number {
        .bl_number_box {
             .bl_number_box-cont {
                h3 {
                    margin-bottom: .5em;
                    font-size: clamp(1.4em, 5vw + .1rem, 1.8em);
                }
            }
        }
        .bl_number_box1 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding-right: 2em;
                }
            }
        }
        .bl_number_box6 {
            .bl_number_box-cont {
                .counter-wrap {
                    grid-column-gap: 7em;
                    padding: 0;
                    background-size: 50%;
                    background-position: 50% 50%;
                }
            }
        }
        .bl_number_box7 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding: 3em 0;
                }
            }
        }
        .bl_number_box8 {
            .bl_number_box-img {
                img {
                    max-width: 80px;
                }
            }
        }
        .bl_number_box9 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding: 1em 0;
                }
            }
        }
         .bl_number_box10 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding: 0;
                }
            }
        }
        .bl_number_box11 {
            .bl_number_box-cont {
                grid-template-rows: 2em 1fr 2em;

                h3 {
                    margin-bottom: 0;
                    font-size: clamp(1.4em, 5vw + .1rem, 1.8em);
                }
            }
            .counter-wrap {
                grid-column-gap: 1em;
                grid-row-gap: .5em;
                width: 100%;
            }
            .bl_number_box-other {
                margin-top: 1em;
            }
        }
         .bl_number_box12 {
            .bl_number_box-cont {
                background-size: 88%;
                background-position: 50% 75%;

                .counter-wrap {
                    padding: 3em 0 1.5em;
                }
            }
        }
        .el_counter-fontSizelll { font-size: clamp(6em, 18vw + .1em, 8em); }
        .el_counter-fontSizell { font-size: clamp(3em, 12vw + .1em, 5.5em); }
        .el_counter-fontSizel { font-size: clamp(2.8em, 10vw + .1em, 3.8em); }
        .el_counter-fontSizem { font-size: clamp(2em, 12vw + .1em, 3em); }
        .el_counter-fontSizes { font-size: clamp(1.6em, 12vw + .1em, 2.6em); }
        .el_counter-fontSizess { font-size: clamp(1.1em, 12vw + .1em, 2em); }

        .el_label-fontSizelll { font-size: clamp(3.2em, 10vw + .1em, 4em); }
        .el_label-fontSizell { font-size: clamp(2.2em, 8vw + .1em, 3em); }
        .el_label-fontSizel { font-size: clamp(1.8em, 8vw + .1em, 2.4em); }
        .el_label-fontSizem { font-size: clamp(1.6em, 8vw + .1em, 2em); }
        .el_label-fontSizes { font-size: clamp(1.3em, 8vw + .1em, 1.6em); }
        .el_label-fontSizess { font-size: clamp(1em, 8vw + .1em, 1.2em); }
    }
}
@media (max-width: 820px) {
    #rec_number {
        .bl_number_box6 {
            .bl_number_box-cont {
                .counter-wrap {
                    grid-template-rows: auto auto;
                    grid-column-gap:5em;
                    background-position: 50%;
                }
                .counter-item1 {
                    padding-bottom: 2.8em;
                }
            }
        }
    }
}
@media (max-width: 768px) {
    #rec_number {
        .bl_number_box {
            padding: 1.5em;
            .bl_number_box-cont {
                .el_boximg-big {
                    max-width: 320px;
                }
                h3 {
                    /* margin-bottom: .5em; */
                    font-size: clamp(1.2em, 5vw + .1rem, 1.42em);
                }
            }
        }
        .bl_number_box1 {
            .bl_number_box-cont {
                .bl_number_box-img {
                    img {
                        max-width: 48px;
                    }
                }
            }
        }
        .bl_number_box3 {
            .bl_number_box-cont {
                .bl_number_tani {
                    .bl_number_box-img {
                        img {
                            max-width: 32px;
                        }
                    }
                }
            }
        }
        .bl_number_box5 {
            .bl_number_box-cont {
                .bl_number_box-img {
                    padding-bottom: .2em;

                    img {
                        max-width: 32px;
                    }
                }
            }
        }
        .bl_number_box6 {
            .bl_number_box-cont {
                h3 { margin-bottom: 0; }
                .counter-wrap {
                    padding: 0;
                    grid-column-gap: 4.2em;
                    background-size: 50%;
                    background-position: 50% 60%;
                }
                .counter-item1 {
                    padding-bottom: 2em;
                }
            }
        }
        .bl_number_box7 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding: 2em 0;
                }
            }
        }
        .bl_number_box8 {
            .bl_number_box-cont {
                .bl_number_box-img {
                    padding-bottom: .2em;

                    img {
                        max-width: 50px;
                    }
                }
            }
        }
        .bl_number_box9 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding: .5em 0 0;
                }
            }
        }
        .bl_number_box11 {
            .bl_number_box-cont {
                .counter-wrap {
                    .counter-item-common {
                        .bl_number_box-title {
                            padding: .2em 0;
                        }
                    }
                }
            }
        }
        .el_counter-fontSizelll { font-size: clamp(4.5em, 18vw + .1em, 6.5em); }
        .el_counter-fontSizell { font-size: clamp(3.5em, 12vw + .1em, 4.5em); }
        .el_counter-fontSizel { font-size: clamp(3em, 10vw + .1em, 3.8em); }
        .el_counter-fontSizem { font-size: clamp(2.4em, 12vw + .1em, 3.3em); }
        .el_counter-fontSizes { font-size: clamp(1.6em, 12vw + .1em, 2.2em); }
        .el_counter-fontSizess { font-size: clamp(1em, 12vw + .1em, 1.8em); }

        .el_label-fontSizelll { font-size: clamp(2.6em, 10vw + .1em, 3em); }
        .el_label-fontSizell { font-size: clamp(2em, 8vw + .1em, 2.6em); }
        .el_label-fontSizel { font-size: clamp(1.6em, 8vw + .1em, 2em); }
        .el_label-fontSizem { font-size: clamp(1.2em, 8vw + .1em, 1.8em); }
        .el_label-fontSizes { font-size: clamp(1em, 8vw + .1em, 1.2em); }
        .el_label-fontSizess { font-size: clamp(.9em, 8vw + .1em, 1em); }
    }
}
@media (max-width: 640px) {
    #rec_number {
        .bl_number-wrap {
            grid-template-columns: calc(100% / 2 - 12px);
            grid-template-rows: repeat(6, auto);
            grid-column-gap: 16px;
            grid-row-gap: 16px;
        }
        .bl_number_box {
            width: 100%;
            height: 100%;
            padding: 1em .7em;
            box-shadow: 4px 4px 0px 2px rgb(var(--clr-main-light));
            aspect-ratio: inherit;

            .bl_number_box-cont {
                .el_boximg-big {
                    max-width: 200px;
                }
            }
        }
        .bl_number_box1 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding-right: 0;
                }
                .bl_number_box-img {
                    margin-top: 0;

                    img {
                        max-width: 48px;
                    }
                }
            }
        }
        .bl_number_box2 {
            .bl_number_box-cont {
                .el_label-fontSizel {
                    font-size: min(10vw, 1.3em);
                }
            }
            .bl_number_box-other {
                position: absolute;
                right: .5em;
                bottom: .5em;
                font-size: .8em;
                text-align: right;
            }
        }
        .bl_number_box4 {
            .bl_number_box-cont {
                padding: 12px 0;
            }
        }
        .bl_number_box5 {
            .bl_number_box-cont {
                padding: 12px 0;
            }
        }
        .bl_number_box6 {
            .bl_number_box-cont {
                .counter-wrap {
                    display: flex;
                    flex-direction: column-reverse;
                    align-items: center;
                    gap: 0;
                    padding: 0;
                    background-size: 50%;
                    background-image: url(../img/bg_number_busho_sp.svg);

                    .bl_number_box-title {
                        font-size: clamp(.8em, 5vw + .1em, .95em);
                    }

                    .counter-item1,.counter-item2,.counter-item3 {
                        padding-bottom: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: .5em;
                    }
                    .counter-item3 { padding-top: 0; }
                }
            }
        }
        .bl_number_box7 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding: .5em 0 1em;
                }
            }
        }
        .bl_number_box8 {
            .bl_number_box-img {
                img {
                    max-width: 32px;
                }
            }
        }
        .bl_number_box9 {
            place-content: center;

            .bl_number_box-cont {
                .counter-wrap {
                    padding: 1em 0 0;
                }
            }
        }
        .bl_number_box10 {
            place-content: center;
        }
        .bl_number_box11 {
            .bl_number_box-cont {
                .counter-wrap {
                    grid-column-gap: .5em;
                    grid-row-gap: .5em;
                    margin-top: .3em;
                    background-size: 32%;

                    .bl_number_box-title {
                        font-size: clamp(.9em, 5vw + .1em, 1.1em);
                        line-height: 1;
                    }

                    .el_counter-fontSizem { font-size: min(10vw, 2em); }
                    .el_counter-fontSizes { font-size: min(10vw, 1.6em); }

                    .counter-item-common {
                        grid-column-gap: .2em;
                    }
                }
            }
            .bl_number_box-other { margin-top: .5em; }
        }
        .bl_number_box12 {
            .bl_number_box-cont {
                .counter-wrap {
                    padding: .6em 0 .8em;
                }
            }
            .bl_number_box-other {
                position: absolute;
                right: .5em;
                bottom: .5em;
                font-size: .8em;
            }
        }

        .bl_number_box1 { grid-area: 1 / 1 / 2 / 2; }
        .bl_number_box2 { grid-area: 1 / 2 / 2 / 3; }
        .bl_number_box3 { grid-area: 2 / 1 / 3 / 2; }
        .bl_number_box4 { grid-area: 2 / 2 / 3 / 3; }
        .bl_number_box5 { grid-area: 3 / 1 / 4 / 2; }
        .bl_number_box6 { grid-area: 3 / 2 / 4 / 3; }
        .bl_number_box7 { grid-area: 4 / 1 / 5 / 2; }
        .bl_number_box8 { grid-area: 4 / 2 / 5 / 3; }
        .bl_number_box9 { grid-area: 5 / 1 / 6 / 2; }
        .bl_number_box10 { grid-area: 5 / 2 / 6 / 3; }
        .bl_number_box11 { grid-area: 6 / 1 / 7 / 2; }
        .bl_number_box12 { grid-area: 6 / 2 / 7 / 3; }

        .el_counter-fontSizelll,
        .el_counter-fontSizell,
        .el_counter-fontSizel { font-size: min(12vw, 4em); }

        .el_counter-fontSizem { font-size: min(10vw, 3em); }
        .el_counter-fontSizes { font-size: min(10vw, 2em); }
        .el_counter-fontSizess { font-size: min(10vw, 1.3em); }

        .el_label-fontSizelll,
        .el_label-fontSizell,
        .el_label-fontSizel { font-size: min(10vw, 1.8em); }
        .el_label-fontSizem { font-size: min(10vw, 1.4em); }
        .el_label-fontSizes { font-size: min(10vw, 1.1em); }
        .el_label-fontSizess { font-size: min(10vw, .9em); }
    }
}
@media (max-width: 480px) {
    #rec_number {
        .bl_number_box1,.bl_number_box2,.bl_number_box3,.bl_number_box4,.bl_number_box5,.bl_number_box6,
        .bl_number_box7,.bl_number_box8,.bl_number_box9,.bl_number_box10,.bl_number_box11,.bl_number_box12 {
            .bl_number_box-cont {
                .counter-wrap {
                    gap: 8px;
                }
            }
        }
        .bl_number_box5 {
            .bl_number_box-cont {
                grid-column-gap: 8px;
            }
        }
        .bl_number_box11 {
            .bl_number_box-cont {
                .counter-wrap {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: .5em;
                    background-size: 32%;
                }
                .bl_number_box-other {
                    position: absolute;
                    right: .5em;
                    bottom: .5em;
                    height: auto;
                    font-size: .8em;
                }
            }
        }
        .bl_number_box12 {
            .bl_number_box-cont {
                place-content: start center;
                background-size: 92%;
                background-position: 50% 80%;
            }
        }
    }
}
/*　---------------------------------------------
    FAQ
-------------------------------------------------　*/
#rec_faq {
    .bl_faq-category {
        margin-bottom: 1rem;

        ~ .bl_faq-category { margin-top: 4rem; }
    
    }
    .bl_faq-wrap {
        .bl_faq-box {
            margin-bottom: 2rem;

            &:last-child { margin-bottom: 0; }

            .bl_faq-title {
                width: 100%;
                padding: 1rem 1.5rem;
                text-align: left;
                background-color: rgb(var(--clr-sub-lightgreen));
                border: 0;
                border-radius: 1rem 1rem 0 0;

                    h3 {
                        margin-bottom: 0;
                        font-size: clamp(.9rem, 4vw + .1rem, 1.1rem);

                        &::after { display: none; }
                    }
            }
            .bl_faq-title.el_bg-yellow {
                background-color: rgb(var(--clr-sub-lightyellow));
            }
            .bl_faq-title.el_bg-blue {
                background-color: rgb(var(--clr-sub-blue), 0.5);
            }
            .bl_faq-answer {
                padding: 2rem;

                h4 {
                    position: relative;
                    margin-bottom: .7rem;
                    /* padding-left: 5em; */
                    color:rgb(var(--clr-main));
                    font-size: clamp(.85em, 4vw + .1em, 1.3em);

                    span {
                        position: absolute;
                        top: 0;
                        left: 0;
                        padding: .15rem .6rem;
                        color: #fff;
                        font-size: clamp(.5em, 4vw + .1em, .65em);
                        background: rgb(var(--clr-main-light));

                        &:after {
                            position: absolute;
                            bottom: -12px;
                            right: calc(50% - 7px);
                            width: 0;
                            height: 0;
                            content: '';
                            border-width: 12px 7px 0 7px;
                            border-style: solid;
                            border-color: rgb(var(--clr-main-light)) transparent transparent transparent;
                        }
                    }
                }
                h5 {
                    font-size: clamp(.85em, 4vw + .1em, 1em);

                     ~ h5 { margin-top: 2rem; }
                }
                .bl_tableTitle {
                    margin: 1rem 0 1rem;
                    font-size: clamp(1em, 4vw + .1em, 1.1em);
                    font-weight: 700;
                    border-bottom: solid 1px rgb(var(--clr-main-light));
                }
            }
        }
    }
    .bl_faq_point {
        position: relative;
        display: inline-block;
        min-width: 300px;
        margin: 1em 0;
        padding: 1rem;
        border: solid 2px rgb(var(--clr-sub-blue));

        .bl_faq_point-title {
            position: absolute;
            display: inline-block;
            top: -8px;
            left: 10px;
            padding: 0 9px;
            line-height: 1;
            font-size: clamp(.8em, 4vw + .1em, .9em);
            background: #FFF;
            color: rgb(var(--clr-sub-blue));
            font-weight: bold;
        }
    }
}
@media (max-width: 640px) {
    #rec_faq {
        .bl_faq-wrap {
            .bl_faq-box {
                .bl_faq-answer {
                    padding: 2rem 1rem;
                }
            }
        }
    }
}
/* ----- アコーディオン 
#rec_faq {
    .bl_faq-wrap {
        .bl_faq-title {
            position: relative;
            cursor: pointer;
            padding: 1rem;
        }

        .bl_faq-title::after {
            content: "+";
            position: absolute;
            right: 2rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            transition: transform .3s ease, opacity .3s ease;
        }

        .bl_faq-title.active::after {
            content: "−";
        }

        .bl_faq-answer {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height .35s ease, opacity .35s ease;
        }

        .bl_faq-answer.open {
            max-height: 500px;
            opacity: 1;
        }
    }
}------------------------------------ */
/*　---------------------------------------------
    Subpage Common
-------------------------------------------------　*/
/* --- ページ下部：インタビュー ------------------------------ */
.bl_rec-interview {
    width: 100%;
    margin: 0 auto;
    padding: 80px 0;
    color: #fff;
    background-color: rgb(var(--clr-main));
    background-image: url(../img/kosei-wave-a40.svg);
    background-repeat: repeat-x;
    background-size: 250px;
    background-position: 0 250px;

    .bl_rec_interview-cont {
        max-width: var(--cont-width);
        margin: auto;

        h2 { color: #fff; }

        .bl_rec_interview-list {
            display: flex;
            gap: 1rem;
            width: 100%;
            margin-top: 2rem;

            .bl_rec_interview-item {
                position: relative;
                max-width: 190px;

                &::before {
                    content:"";
                    position: absolute;
                    inset: 0;
                    background-color: rgb(var(--clr-main-light), .3);
                    transition: all .3s;
                }
                &:hover, &:active {
                    &::before { background-color: rgb(var(--clr-main-light), .1); }
                }


                .bl_rec_interview-caption {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    min-height: 40px;
                    padding: .5rem 0 .2rem;
                    text-align: center;
                    font-size: .8rem;
                    line-height: 1.4;
                    background-color: rgb(var(--clr-main-dark), .4);

                    span { display: block; }
                }
            }
        }
    }
}
@media (max-width: 1024px) {
    .bl_rec-interview {

        .bl_rec_interview-cont {
            max-width: 94%;
            margin: auto;
        }
    }
}
@media (max-width: 800px) {
    .bl_rec-interview {
        background-position: 0 400px;

        & .bl_rec_interview-cont {
            h2 { text-align: center; }

            .bl_rec_interview-list {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    }
}
@media (max-width: 640px) {
    .bl_rec-interview {
        background-position: 0 450px;

        & .bl_rec_interview-cont {
            & .bl_rec_interview-list {
                .bl_rec_interview-item {
                    max-width: 140px;
                }
            }
        }
    }
}

/*　---------------------------------------------
    Taiken - 職場体験
-------------------------------------------------　*/
#rec_taiken {
    overflow-x: hidden;

    .ly_hero {
        .bl_heroPhoto {
            width: auto;
            height: 100%;
        }
        .bl_hero-img { background: #ecedea; }
    }

    main { position: relative; }

    .bl_article-cont {
        padding-bottom: 100px;
    }
    /* ページTOPメッセージ */
    .bl_carex-firstArea {
        text-align: center;

        .bl_carex-subTitle {
            font-size: var(--fontSize-6);
            margin-bottom: 1em;

            span {
                display: block;
                font-size:.8em;
            }
        }
    }

    /* KOSEIワーカーズ説明 */
    .bl_carex-workers {
        position: relative;
        margin-top: 48px;
        padding-top: 48px;
        text-align: center;
        background-image: url(../img/line_kosei-wave.svg);
        background-repeat: repeat-x;
        background-size: 144px 3.7px;
        background-position: top left;

        .bl_carex-workers-title {
            color:rgb(var(--clr-main));
            font-size: var(--fontSize-3);
            /* font-weight: 600; */
            margin-bottom: 0;

            &::after { background: none; }

            .bl_carex-workers-story {
                display: block;
                color:rgb(var(--clr-sub-gray));
                font-size: .8em;
                font-weight: 400;
            }
            .bl_carex-workers-name {
                display: block;
                max-width: 500px;
                margin: .5em auto;

                img { width: 100%; }
            }
        }
        .bl_carex-workers-img {
            max-width: 580px;
            margin: 1em auto;
        }
    }

    /* ３つのコース説明 */
    .bl_carex-3course {
        margin: 2em auto;
        padding: 2em 3.5em;
        text-align: center;
        border:solid 6px rgb(0, 109, 128, 0.2);
        border-radius: 2em;

        h3 {
            padding: .2em 2em;
            color: rgb(var(--clr-main-dark));
            font-size: clamp(1.4rem, 5vw, 2rem);
            text-align: center;
            border-bottom: solid 1px #ddd;

            &::after { display: none; }
        }
        .bl_carex-3course-item {
            display: grid;
            grid-template-columns: auto auto;
            column-gap: 2em;
            margin: 5em 0;

            &:first-of-type { margin-top: 2em; }
            &:last-child { margin-bottom: 2em; }

            .bl_carex-3course-img { max-width: 320px; }
            .bl_carex-3course-txt {
                text-align: left;

                p { margin: .5em 0; }
                a {
                    display: inline-block;
                    padding: .6em 1.6em;
                    font-weight: 600;
                    border-radius: .7em;

                    &:hover { transition: all .3s; }
                    &::after {
                        content:"→";
                        padding-left:0.5em;
                    }
                }
                .bl_carex-3course-title {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    gap: 1em;

                    .bl_carex-3course-type {
                        span {
                            display: inline-block;
                            padding: .3em .4em;
                            font-size: var(--fontSize-5);
                            font-weight: 600;
                            border-radius: 50%;
                            border:solid 2px;
                            line-height: 1.0;
                        }
                    }
                }
            }
        }
        .el_course-a {
            h4, h4 + span, a { color:rgb(var(--clr-a-course)); }
            h4 { font-size: 1.35em; }
            h4 + span { font-weight: 600; }
            a {
                border:solid 1px rgb(var(--clr-a-course));

                &:hover {
                    color:#fff;
                    border:solid 1px rgb(var(--clr-a-course-dark));
                    background-color: rgb(var(--clr-a-course-dark));
                }
            }
            .bl_carex-3course-txt {
                .bl_carex-3course-title {
                    .bl_carex-3course-type {
                        span {
                            color:rgb(var(--clr-a-course));
                            border-color: rgb(var(--clr-a-course));
                        }
                    }
                }
            }
        }
        .el_course-b {
            h4, h4 + span,a { color:rgb(var(--clr-b-course)); }
            h4 { font-size: 1.35em; }
            h4 + span { font-weight: 600; }
            a {
                border:solid 1px rgb(var(--clr-b-course));

                &:hover {
                    color:#fff;
                    border:solid 1px rgb(var(--clr-b-course-dark));
                    background-color: rgb(var(--clr-b-course-dark));
                }
            }
            .bl_carex-3course-txt {
                .bl_carex-3course-title {
                    .bl_carex-3course-type {
                        span {
                            color:rgb(var(--clr-b-course));
                            border-color: rgb(var(--clr-b-course));
                        }
                    }
                }
            }
        }
        .el_course-c {
            h4, h4 + span,a { color:rgb(var(--clr-c-course)); }
            h4 { font-size: 1.35em; }
            h4 + span { font-weight: 600; }
            a {
                border:solid 1px rgb(var(--clr-c-course));

                &:hover {
                    color:#fff;
                    border:solid 1px rgb(var(--clr-c-course-dark));
                    background-color: rgb(var(--clr-c-course-dark));
                }
            }
            .bl_carex-3course-txt {
                .bl_carex-3course-title {
                    .bl_carex-3course-type {
                        span {
                            color:rgb(var(--clr-c-course));
                            border-color: rgb(var(--clr-c-course));
                        }
                    }
                }
            }
        }
    }/* ３つのコース説明 */

    /* 質問カード */
    .bl_carex-title {
        margin-bottom:1em;
        font-size: var(--fontSize-7);
    }
    .bl_carex-qacard {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5em;

        .bl_carex-qacard-item {
            min-width: 260px;
            width: 30%;
            padding:1.5em;
            border-radius: 1.2em;
            box-shadow: 0 0 6px 0 rgba(60, 60, 60, 0.4);

            &:hover,
            &:active {
                box-shadow: 0 0 0 4px rgba(0, 109, 128, 0.3);
            }

            span {
                position: relative;
                display: inline-block;
                margin-top: 1em;
                margin-bottom: 1em;
                color:rgb(var(--clr-sub-gray));
                font-size: var(--fontSize-2);
                z-index: 14;

                &:after {
                    content:"";
                    position: absolute;
                    bottom:0;
                    display: block;
                    width: 100%;
                    height: 10px;
                    background-color: rgb(var(--clr-sub-blue), .4);
                    z-index: -1;
                }
            }
        }
    }
    /*　キャラ説明　*/
    .bl_carex-chara {
        text-align: center;

        .bl_carex-chara-title {
            margin-top: .3em;
            font-size: var(--fontSize-xl);
            font-weight: 600;
            -webkit-text-stroke: 1px #585F64;
            text-stroke: 1px #585F64;
            letter-spacing: -0.07em;

            span {
                color:#585F64;
                -webkit-text-stroke: 0 #585F64;
                text-stroke: 0 #585F64;
                font-size: 1.8rem;
                /* font-size: var(--fontSize-6); */
            }
            img { max-width: 200px; }

            &.el_name-gungun { color:rgb(var(--clr-gungun)); }
            &.el_name-mokkun { color:rgb(var(--clr-mokkun)); }
            &.el_name-kuusan { color:rgb(var(--clr-kuusan)); }
            &.el_name-suisui { color:rgb(var(--clr-suisui)); }
            &.el_name-tsucchi { color:rgb(var(--clr-tsucchi)); }
            &.el_name-yoyo { color:rgb(var(--clr-yoyo)); }
        }

        &::after {
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            margin-top: 3em;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-top: 16px solid #D9D9D9;
            vertical-align: middle;
        }
        .bl_carex-chara-img {
            max-width: 260px;
            padding: 1.5em 0;
        }
        .el_name-gungun {
            & +.bl_carex-chara-img { max-width: 120px; }
        }
        .el_name-mokkun {
            & +.bl_carex-chara-img { max-width: 300px; }
        }
        .el_name-yoyo,.el_name-suisui {
            & +.bl_carex-chara-img { max-width: 240px; }
        }

    }/*　キャラ説明 END　*/

    /*　キャラごとのおすすめコース　*/
    .bl_carex-recommend {
        text-align: center;

        .bl_carex-recommend-title {
            &::after { display: none; }
        }

        .bl_carex-recommend-cont {
            max-width: 840px;
            margin: 0 auto;
            padding: 2.5em 2em;
            text-align: center;
            border-radius: 2em;

            .bl_carex-recommend-title {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 2em;

                .bl_carex-recommend-type {
                    padding: .3em .4em;
                    font-size: var(--fontSize-7);
                    font-weight: 600;
                    border-radius: 50%;
                    border:solid 2px;
                    line-height: 1;
                }
                .bl_carex-recommend-name {
                    font-size: var(--fontSize-7);
                    font-weight: 600;

                    span {
                        display: block;
                        color: rgb(var(--clr-sub-gray));
                        font-size: var(--fontSize-1);
                        font-weight: 300;
                    }
                }
            }
            .bl_carex-recommend-explain {
                width: 80%;
                margin: 1em auto;
                text-align: left;
            }
            .bl_carex-recommend-nav {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 2em;

                .bl_carex-recommend-nav-link a {
                    display: block;
                    padding: 1.35em 2em .8em;
                    color:#fff;
                    font-size: 1.1em;
                    font-weight: 600;
                    border-radius: .6em;
                    line-height: 1.6;
                    transition: all .3s;

                    span {
                        display: block;

                        &::after {
                            content:'→';
                            display: block;
                            color:#fff;
                            font-size: 1.2em;
                            font-weight: 600;
                        }
                    }
                }
                .bl_carex-recommend-nav-img { max-width: 320px; }
            }
            &.el_a-course {
                border:solid 6px rgb(var(--clr-a-course));

                .bl_carex-recommend-type {
                    color:rgb(var(--clr-a-course));
                    border-color: rgb(var(--clr-a-course));
                }
                .bl_carex-recommend-name {
                    color:rgb(var(--clr-a-course));
                }
                .bl_carex-recommend-nav-link a {
                    background: rgb(var(--clr-a-course));

                    &:hover, &:active { background: rgb(var(--clr-a-course-dark)); }
                }
            }
            &.el_b-course {
                border:solid 6px rgb(var(--clr-b-course));

                .bl_carex-recommend-type {
                    color:rgb(var(--clr-b-course));
                    border-color: rgb(var(--clr-b-course));
                }
                .bl_carex-recommend-name {
                    color:rgb(var(--clr-b-course));
                }
                .bl_carex-recommend-nav-link a {
                    background: rgb(var(--clr-b-course));

                    &:hover, &:active { background: rgb(var(--clr-b-course-dark)); }
                }
            }
            &.el_c-course {
                border:solid 6px rgb(var(--clr-c-course));

                .bl_carex-recommend-type {
                    color:rgb(var(--clr-c-course));
                    border-color: rgb(var(--clr-c-course));
                }
                .bl_carex-recommend-name {
                    color:rgb(var(--clr-c-course));
                }
                .bl_carex-recommend-nav-link a {
                    background: rgb(var(--clr-c-course));

                    &:hover, &:active { background: rgb(var(--clr-c-course-dark)); }
                }
            }
        }
    }/*　キャラごとのおすすめコース END　*/
    /* コース名と説明 */
    .bl_carex-courseMain {
        text-align: center;

        .bl_carex-courseMain-title {
            &::after { display: none; }
        }
        .bl_carex-courseMain-cont {
            max-width: 960px;
            margin: 0em auto;
            padding: 2.5em 2em;
            text-align: center;

            .bl_carex-courseMain-title {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 2em;

                .bl_carex-courseMain-type {
                    span {
                        display: inline-block;
                        padding: .3em .4em;
                        font-size: var(--fontSize-7);
                        font-weight: 600;
                        border-radius: 50%;
                        border:solid 2px;
                        line-height: 1.0;
                    }
                }
                .bl_carex-courseMain-name {
                    font-size: var(--fontSize-7);
                    font-weight: 600;

                    span {
                        display: block;
                        color: rgb(var(--clr-sub-gray));
                        font-size: var(--fontSize-1);
                        font-weight: 300;
                    }
                }
                .bl_carex-courseMain-img { max-width: 300px; }
            }
            .bl_carex-courseMain-explain {
                width: 80%;
                margin: 1em auto;
                /* text-align: left; */
            }
            &.el_a-course {
                .bl_carex-courseMain-type {
                    color:rgb(var(--clr-a-course));
                    border-color: rgb(var(--clr-a-course));
                }
                .bl_carex-courseMain-name {
                    color:rgb(var(--clr-a-course));
                }
            }
            &.el_b-course {
                .bl_carex-courseMain-type {
                    color:rgb(var(--clr-b-course));
                    border-color: rgb(var(--clr-b-course));
                }
                .bl_carex-courseMain-name {
                    color:rgb(var(--clr-b-course));
                }
            }
            &.el_c-course {
                .bl_carex-courseMain-type {
                    color:rgb(var(--clr-c-course));
                    border-color: rgb(var(--clr-c-course));
                }
                .bl_carex-courseMain-name {
                    color:rgb(var(--clr-c-course));
                }
            }
        }
    }
    /* コース詳細写真 */
    .bl_courseDetail {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 80px;
        max-width: 1000px;
        margin: 0 auto;
        padding: 60px 20px;

        .bl_courseDetail_item {
            margin-bottom: 60px;

            /* 1番目：左上 */
            &:nth-child(1) {
                grid-column: 1;
                grid-row: 1;

                .bl_courseDetail_item__figure {
                    margin-left: 0;
                    margin-right: auto;

                    .bl_courseDetail_item__imageWrap {
                        box-shadow: 10px 10px 0 #EBE6CF;
                    }
                }
            }
            /* 2番目：右側（中間の高さ） */
            &:nth-child(2) {
                grid-column: 2;
                grid-row: 1 / 3;
                align-self: center;

                .bl_courseDetail_item__figure {
                    margin-left: auto;
                    margin-right: 0;

                    .bl_courseDetail_item__imageWrap {
                        box-shadow: 10px 10px 0 #ECF1E8;
                    }
                }
            }
            /* 3番目：左下 */
            &:nth-child(3) {
                grid-column: 1;
                grid-row: 2;

                .bl_courseDetail_item__figure {
                    margin-left: 0;
                    margin-right: auto;

                    .bl_courseDetail_item__imageWrap {
                        box-shadow: 10px 10px 0 #DEECEE;
                    }
                }
            }
            .bl_courseDetail_item__figure {
                position: relative;
                width: 100%;
                max-width: 480px;
                margin: 0;

                .bl_courseDetail_item__imageWrap {
                    position: relative;
                    overflow: visible;
                    width: 100%;

                    .bl_courseDetail_item__image {
                        display: block;
                        width: 100%;
                        height: auto;
                    }
                }
                .bl_courseDetail_item__heading {
                    position: absolute;
                    top: 20px;
                    left: -20px;
                    padding: 6px 18px;
                    color: #fff;
                    font-size: 1em;
                    font-weight: bold;
                    background-color: rgb(var(--clr-main-light));
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                    z-index: 10;
                }
                /* bl_ + Component + Child: キャプション */
                .bl_courseDetail_item__caption {
                    margin-top: 20px;
                    color: #333;
                    font-size: 16px;
                    text-align: center;
                }
            }
        }
    }
    /* 追加：小さめの画像 */
    .bl_courseDetail_subImage {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;

        img {
            display: block;
            width: 100%;
            height: auto;
        }
        &:nth-child(4) {
            grid-column: 2;
            grid-row: 1;
            align-self: start;
            margin-left: 0;
            margin-right: auto;
            margin-top: -10px;
        }
        &:nth-child(5) {
            grid-column: 2;
            grid-row: 2;
            align-self: end;
            margin-left: 0;
            margin-right: auto;
            margin-bottom: 0;
        }
    }
    /* 下部リンク */
    .ly_botLink {
        width: 100%;
        min-height: 360px;
        z-index: 1000;

        .ly_botLink-title {
            color:rgb(var(--clr-main-dark));
            font-size: var(--fontSize-6);
        }

        .ly_ellipse-cont {
            position: relative;
            min-height: 420px;
            text-align: center;
            z-index: 2000;

            &::after {
                content: "";
                display: block;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                width: 110%;
                height: 110px;
                margin: auto;
                background-color: rgb(var(--clr-main-dark));
                border-top-left-radius: 50%;
                border-top-right-radius: 50%;
            }
            .bl_kw-all {
                position: relative;
                max-width: 840px;
                margin: auto;
                margin-top: -40px;
                z-index: 999;

                img { width: 100%; }
            }
        }
        .ly_ellipse-bot {
            position: relative;
            min-height: 60px;
            text-align: center;
            z-index: 2000;

            &::after {
                content: "";
                display: block;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                width: 100%;
                height: 80px;
                margin: auto;
                background-color: rgb(var(--clr-main-dark));
                border-bottom-left-radius: 50%;
                border-bottom-right-radius: 50%;
            }
        }
        /*　ふわふわするリンク　*/
        .un_wobbly-link {
            display: inline-block;
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 640px;
            transition: transform 0.3s ease;

            img {
                display: block;
                width: 100%;
                height: auto;
            }

            &.el_mynavi {
                margin: auto;
                padding: 1em 0;
                text-align: center;

                img { max-width: 240px; margin:auto; }
            }

            /* 半透明の白いフィルター */
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255, 255, 255, 0.2); /* 透明度20% */
                pointer-events: none; /* クリックを邪魔しない */
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            &:hover::after,
            &:active::after {
                opacity: 1;
            }
            &:hover img,
            &:active img {
                animation: floatUpDown 1.5s ease-in-out infinite;
            }
        }
        .ly_ellipse-info {
            position: relative;
            min-height: 60px;
            padding:1.5em;
            text-align: center;
            background: rgb(var(--clr-main-dark)) url(../img/kosei-wave-a40.svg);
            background-repeat: repeat-x;
            background-position: left 0 bottom -200px;
            background-size: 400px;
            z-index: 2000;

            &::after {
                content: "";
                display: block;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -60px;
                width: 110%;
                height: 80px;
                margin: auto;
                background: rgb(var(--clr-main-dark)) url(../img/kosei-wave-a40.svg) repeat-x;
                background-position: 0 8px;
                background-size: 400px;
                border-bottom-left-radius: 50%;
                border-bottom-right-radius: 50%;
            }

            h3 {
                color: #fff;
                font-size: var(--fontSize-5);
                text-align: center;
            }
            .bl_course-info {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 2em;
                max-width: 1100px;
                margin: 1.5em auto 0;

                .bl_course-info-item {
                    display: flex;
                    flex-direction: column;
                    min-width: 260px;
                    width: 30%;
                    padding:1.5em;
                    text-align: center;
                    border-radius: 1.2em;
                    border:solid 2px;
                    background-color: #fff;

                    &:hover,
                    &:active {
                        animation: floatUpDown 1.5s ease-in-out infinite;
                        outline: 5px solid;
                    }
                    h4 { font-size: var(--fontSize-4); }
                    &.el_a-course {
                        color: rgb(var(--clr-a-course));
                        border-color: rgb(var(--clr-a-course));
                        outline-color: rgb(var(--clr-a-course));
                    }
                    &.el_b-course {
                        color: rgb(var(--clr-b-course));
                        border-color:rgb(var(--clr-b-course));
                        outline-color: rgb(var(--clr-b-course));
                    }
                    &.el_c-course {
                        color: rgb(var(--clr-c-course));
                        border-color: rgb(var(--clr-c-course));
                        outline-color: rgb(var(--clr-c-course));
                    }
                    img { margin-top: auto; }
                }
            }
        }
        &.el_noCourse {
            .ly_ellipse-info {
                min-height: 0;
                padding: 0;
                background-image: none;

                &::after { background-image:none; }
            }
        }
    }
}
/* アニメーション */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
/* レスポンシブ対応 */
@media (max-width: 960px) {
    #rec_taiken {
        .bl_courseDetail {
            max-width: 92%;
            margin: auto;
        }
    }
}
@media (max-width: 768px) {
    #rec_taiken {
        .bl_article-cont {
            padding-bottom: 60px;
        }
        /* コース紹介 */
        .bl_carex-3course {
            .bl_carex-3course-item {
                .bl_carex-3course-img {
                    margin: auto;
                }
            }
        }
        /* コース詳細 */
        .bl_carex-courseMain {
            .bl_carex-courseMain-cont {
                .bl_carex-courseMain-title {
                    display: grid;
                    grid-template-columns: auto auto; /* 2列 */
                    grid-template-rows: auto auto; /* 2行 */
                    place-content: center;
                    align-items: center;
                    gap: 20px;

                    .bl_carex-courseMain-name { margin: 0 2em 0 0; }
                    .bl_carex-courseMain-img { grid-column: 1 / 3; }
                }
                .bl_carex-courseMain-explain { width: 92%; }
            }
        }
        .bl_courseDetail {
            padding: 40px 20px;
            display: block;

            .bl_courseDetail_item {
                margin-bottom: 50px;

                .bl_courseDetail_item__figure {
                    max-width: 100%;
                }
                .bl_courseDetail_item__heading {
                    left: 0;
                    top: 15px;
                    font-size: 16px;
                    padding: 10px 20px;
                }

                .bl_courseDetail_item__caption {
                    font-size: 16px;
                    margin-top: 15px;
                }
            }
            .bl_courseDetail_subImage { display: none; }
        }
        /* 下部リンク */
        .ly_botLink {
            & .ly_ellipse-cont {
                .bl_kw-all { margin-top: 0; }
            }
        }
    }
}
@media (max-width: 640px) {
    #rec_taiken {
        .ly_section-top,
        .ly_section-bottom { height: 250px; }
        .bl_article-cont { padding-bottom: 40px; }
        .bl_carex-3course {
            margin: 2em auto;
            padding: 2em 2.5em;

            .bl_carex-3course-item {
                display: grid;
                grid-template-columns: none;
                grid-template-rows: auto auto;
                column-gap: 1.6em;

                .bl_carex-3course-txt { text-align: center; }
            }
        }
        .bl_carex-recommend {
            .bl_carex-recommend-cont {
                .bl_carex-recommend-explain { width: 90%; }
                .bl_carex-recommend-nav {
                    flex-direction: column;
                    gap: 2em;

                    .bl_carex-recommend-nav-link a {
                        padding: .8em 2em .8em;

                        span {
                            display:inline;
                            &::after {
                                display:inline;
                                padding-left: 12px;
                            }
                        }
                    }
                }
            }
        }
        /* コース詳細 */
        .bl_carex-courseMain {
            .bl_carex-courseMain-cont {
                .bl_carex-courseMain-title {
                    .bl_carex-courseMain-type { margin: 0 0 0 1em; }
                    .bl_carex-courseMain-name { margin: 0 1em 0 0; }
                }
            }
        }
        /* 下部リンク */
        .ly_botLink {
            min-height: 240px;

            .ly_ellipse-cont {
                min-height: 260px;

                &::after { height: 80px; }
                .bl_kw-all { margin-top: 20px; }
            }
            .ly_ellipse-info {
                .bl_course-info {
                    .bl_course-info-item { width: 50%; }
                }
            }
        }
    }
}
@media (max-width: 540px) {
    #rec_taiken {
        .bl_carex-courseMain {
            .bl_carex-courseMain-cont {
                padding: 2em 1.5em;
            }
        }
        .bl_carex-3course {
            .bl_carex-3course-item {
                .bl_carex-3course-img {
                    max-width: 260px;
                    margin-bottom: 1em;
                }
            }
        }
        .bl_carex-qacard {
            .bl_carex-qacard-item {
                min-width: 260px;
                width: 90%;
                padding: 0 0 1em 0;

                span { margin-top: 0; }
                img { width: 80%; }
            }
        }
        .bl_carex-recommend {
            .bl_carex-recommend-cont {
                padding: 2em 1em;
            }
        }
        /* 下部リンク */
        .ly_botLink {
            .ly_ellipse-cont {
                .bl_kw-all { margin-top: 40px; }
            }
            .ly_ellipse-info {
                .bl_course-info {
                    .bl_course-info-item {
                        padding: 1.2em;

                        img {
                            width: 85%;
                            margin: auto;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 480px) {
    #rec_taiken {
        .ly_hero {
            .bl_heroPhoto {
                width: auto;
                height: 100vw;
            }
        }
        /* ３つのコース説明 */
        .bl_carex-3course {
            margin: 2em auto;
            padding: 1.5em 1.5em;
        }
        /* おすすめコース */
        .bl_carex-recommend {
            & .bl_carex-recommend-cont {
                .bl_carex-recommend-title {
                    flex-direction: column;
                    gap: .6em;
                }
            }
        }
        /* コース詳細 */
        .bl_carex-courseMain {
            .bl_carex-courseMain-cont {
                .bl_carex-courseMain-title {
                    .bl_carex-courseMain-type { margin: 0; }
                    .bl_carex-courseMain-name { margin: 0; }
                }
            }
        }
        /* 下部リンク */
        .ly_botLink {
            .ly_ellipse-cont {
                min-height: 220px;

                &::after { height: 60px; }
                .bl_kw-all { margin-top: 0; }
            }
        }
    }
}