@charset "urf-8";
@import url('component.css');
/************************************************
    KOSEI inc.
    採用サイト: https://koseikogyo.co.jp/recruit/
    20250630 -
************************************************/
/*　---------------------------------------------
    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;
    }
    .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_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: #006D80;
            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 #006D80;
            z-index: 100;
        }
    
        h3 {
            position: absolute;
            top: -1.5rem;
            left: 1.5rem;
            padding: 0 1rem;
            color: #006D80;
            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;
                }
            }
        }
    }
}