@charset "UTF-8";
/*==============================================================================
1.ページタイトル・共通タイトル
2.イントロ
3.message
4.service
5.overview
==============================================================================*/

/*============================================================================================================================================================
==============================================================================================================================================================

	1.ページタイトル・共通タイトル

==============================================================================================================================================================
============================================================================================================================================================*/
#title {
    background-image: url(../1_img/company/title.jpg);
}




/*============================================================================================================================================================
==============================================================================================================================================================

	2.イントロ

==============================================================================================================================================================
============================================================================================================================================================*/
.content-inro {
    padding-bottom: 45vw;
    text-align: center;
    position: relative;
    background-image: url(../1_img/company/content-intro-bg-sp.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;

    & h2 {
        font-size: 2rem;
        font-weight: var(--weight-bold);
        position: relative;
        z-index: 2;

        & .line {
            padding: 0 5px;
            background-image: linear-gradient(transparent 60%, rgba(242, 95, 18, 0.5) 60%);
        }

        & .dotted {
            display: inline-block;
            position: relative;

            &::before {
                content: "";
                width: 0.3em;
                position: absolute;
                top: -0.1em;
                left: 50%;
                transform: translateX(-50%);
                aspect-ratio: 1 / 1;
                border-radius: 100%;
                background-color: var(--color-accent);
            }
        }
    }

    & p {
        margin-top: 40px;
        font-size: 1.4rem;
        text-align: left;
        position: relative;
        z-index: 2;
    }

    &::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 27%, rgba(255, 255, 255, 01) 63%);
    }
}

/*==============================================================================

	イントロ PC

==============================================================================*/
@media all and (min-width: 769px) {
    .content-inro {
        padding-bottom: 260px;
        background-image: url(../1_img/company/content-intro-bg-pc.jpg);

        & h2 {
            font-size: 2.4rem;
            line-height: 2;

            & .dotted {
                &::before {
                    top: 0.05em;
                }
            }
        }

        & p {
            font-size: 1.5rem;
            line-height: 2;
            text-align: center;
        }

        &::after {
            background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 27%, rgba(255, 255, 255, 01) 63%);
        }
    }
}



/*============================================================================================================================================================
==============================================================================================================================================================

	3.message

==============================================================================================================================================================
============================================================================================================================================================*/
#message {
    padding: 70px 0 0;

    & .message-intro{
        font-size: 1.4rem;
    }

    /* =============== スライダー =============== */
    & .message-slider {
        margin-top: 50px;
        margin-left: -20px;
        margin-bottom: 0;
        padding-bottom: 40px;
        width: calc(100% + 40px);

        & .slick-track {
            display: flex;
        }

        & .slick-slide {
            height: auto !important;
        }

        & .slick-arrow {
            top: unset;
            bottom: calc((100% - 250px + 40px) / 2);
            transform: unset;
        }

        & .slick-arrow.prev {
            left: 10px;
        }

        & .slick-arrow.next {
            right: 10px;
        }

        & .slick-dots {
            bottom: 0;
        }

        & dt {
            height: 200px;
            position: relative;
            overflow: hidden;
            text-align: center;
            color: #fff;

            & .text {
                padding-top: 15px;
                width: 100%;
                height: 100%;
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                z-index: 2;
                font-size: 2.2rem;
            }

            & img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                z-index: 1;
            }

            & .num {
                width: 100%;
                position: absolute;
                top: -13px;
                left: 0;
                text-align: center;
                line-height: 1;
                font-family: var(--font-en);
                font-weight: var(--weight-bold);
                font-size: 5.5rem;
                color: #fff;
                opacity: 0.5;
                z-index: 2;
            }

            &::after {
                content: "";
                width: 70px;
                position: absolute;
                border-top: 1px dashed #fff;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 2;
            }
        }

        & dd {
            padding: 50px 50px 0;

            & .line {
                padding: 0 5px;
                background-image: linear-gradient(transparent 60%, rgba(242, 95, 18, 0.5) 60%);
            }
        }
    }

    /* =============== プロフィール =============== */
    & .message-profile {
        margin-top: 50px;

        & .message-profile-photo {
            text-align: center;

            & figcaption {
                margin-top: 20px;
                font-size: 1.5rem;
                line-height: 1.4;
                font-weight: var(--weight-bold);
            }
        }

        & .message-profile-toggle_wrap {
            margin-top: 50px;
            position: relative;

            & h3 {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                transform: translateY(calc(-100% + 10px));
                font-family: var(--font-en);
                font-weight: var(--weight-bold);
                font-size: 3rem;
                line-height: 1;
                color: #bbbbba;
                text-align: center;
            }

            & dl {
                background-color: #fff;

                & dt {
                    padding: 25px;
                    position: relative;
                    text-align: center;
                    cursor: pointer;

                    &>span {
                        display: inline-block;
                        position: relative;

                        &::before {
                            content: "";
                            width: 70px;
                            position: absolute;
                            border-top: 1px dashed var(--color-font);
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            z-index: 2;
                        }
                    }

                    &::after {
                        content: "";
                        width: 12px;
                        height: 6px;
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        transform: translateY(-50%);
                        background-color: var(--color-font);
                        clip-path: polygon(0 0, 50% 100%, 100% 0);
                        transition: transform 500ms, background-color 500ms;
                    }

                    &.active::after {
                        transform: translateY(-50%) scale(1, -1);
                        background-color: var(--color-accent);
                    }
                }

                & dd {
                    padding: 0 25px 25px;
                    display: none;
                }
            }
        }
    }

    /* =============== 採用について =============== */
    & .message-recruit {
        margin-top: 50px;

        & .message-recruit-intro {
            text-align: center;
            font-size: 2rem;
            font-weight: var(--weight-bold);

            & span {
                padding: 0 5px;
                background-image: linear-gradient(transparent 60%, rgba(242, 95, 18, 0.5) 60%);
            }
        }

        & .message-recruit-content {
            margin-top: 85px;
            margin-left: -20px;
            padding: 0 20px 40px;
            width: calc(100% + 40px);
            background-image: url(../1_img/company/message-recruit-bg.jpg);
            background-position: center;
            background-size: cover;
            text-align: center;

            & .fukidashi-recruit {
                height: 65px;
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                font-size: 1.5rem;
                font-weight: var(--weight-bold);
                background-color: #fff;
                transform: translateY(-50%);

                & span {
                    color: var(--color-accent);
                }

                &::before {
                    content: "";
                    width: 32px;
                    height: 20px;
                    background-color: #fff;
                    position: absolute;
                    left: 50%;
                    top: 0;
                    transform: translate(-50%, calc(-100% + 1px));
                    clip-path: polygon(0 100%, 100% 100%, 50% 0);
                }
            }

            & .text {
                font-size: 1.4rem;

                & span {
                    display: inline-block;
                    position: relative;

                    &::before {
                        content: "";
                        width: 0.3em;
                        position: absolute;
                        top: -0.1em;
                        left: 50%;
                        transform: translateX(-50%);
                        aspect-ratio: 1 / 1;
                        border-radius: 100%;
                        background-color: var(--color-accent);
                    }
                }
            }

            & .fukidashi-wrap {
                margin-top: 30px;

                & span {
                    padding: 0 40px;
                }
            }

            & .button-wrap {
                margin-top: 30px;
            }

        }
    }
}

/*==============================================================================

	message PC

==============================================================================*/
@media all and (min-width: 769px) {
    #message {
        padding: 100px 0 0;

        & .message-intro{
            text-align: center;
        }

        /* =============== スライダー =============== */
        & .message-slider {
            margin-top: 70px;
            margin-left: 0;
            margin-bottom: 0;
            padding-bottom: 0;
            width: 100%;
            visibility: visible;
            opacity: 1;
            display: flex;
            gap: 0 35px;

            & dl{
                width: calc((100% - 70px) / 3);
            }

            & dt {
                height: 160px;

                & .text {
                    padding-top: 15px;
                    font-size: 1.8rem;
                }

                & .num {
                    top: -10px;
                    font-size: 4.7rem;
                }

                &::after {
                    width: 55px;
                    bottom: 15px;
                }
            }

            & dd {
                padding: 40px 0 0;
            }
        }

        /* =============== プロフィール =============== */
        & .message-profile {
            margin-top: 60px;
            display: flex;
            align-items: start;
            gap: 0 60px;

            & .message-profile-photo {
                flex-shrink: 0;
            }

            & .message-profile-toggle_wrap {
                margin-top: 0px;

                & h3 {
                    transform: unset;
                    text-align: left;
                    position: relative;
                    text-align: center;
                    margin-bottom: -3px;
                }

                & dl {

                    & dt {
                        padding: 30px 50px 25px;
                        text-align: center;
                        cursor: auto;

                        &>span {
                            padding: 0 30px 5px;
                            display: inline-block;
                            border-bottom: 1px dashed var(--color-font);

                            &::before {
                                content: none;
                            }
                        }

                        &::after {
                            content: none;
                        }
                    }

                    & dd {
                        padding: 0 50px 30px;
                        display: block;
                    }
                }
            }
        }

        /* =============== 採用について =============== */
        & .message-recruit {
            margin-top: 50px;

            & .message-recruit-intro {
                text-align: center;
                font-size: 2rem;
                font-weight: var(--weight-bold);

                & span {
                    padding: 0 5px;
                    background-image: linear-gradient(transparent 60%, rgba(242, 95, 18, 0.5) 60%);
                }
            }

            & .message-recruit-content {
                margin-top: 85px;
                margin-left: 0px;
                padding: 0 20px 40px;
                width: calc(100%);

                & .fukidashi-recruit {
                    margin: 0 auto;
                    height: 65px;
                    width: 320px;
                    font-size: 1.5rem;
                }

                & .text {
                    text-align: center;
                }

                & .fukidashi-wrap {
                    margin-top: 30px;
                }

                & .button-wrap {
                    text-align: center;
                }

            }
        }
    }
}






/*============================================================================================================================================================
==============================================================================================================================================================

	4.service

==============================================================================================================================================================
============================================================================================================================================================*/
#service{
    margin-top: 0;
    padding: 40px 0;

    /* =============== サービスリスト =============== */
    & .service-list_wrap{
        margin-left: -20px;
        width: calc(100% + 40px);

        & > li{
            counter-increment: service-counter;
        }

        & > li button{
            padding: 15px 50px 15px 65px;
            width: 100%;
            display: block;
            position: relative;
            text-align: center;
            font-size: 1.5rem;
            font-weight: var(--weight-bold);

            &::before,&::after{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
            /* 番号 */
            &::before{
                content: counter(service-counter, decimal-leading-zero);
                left: 20px;
                font-size: 3rem;
                font-family: var(--font-en);
            }
            /* 矢印 */
            &::after{
                content: "";
                width: 12px;
                height: 7px;
                right: 30px;
                transition: 500ms;
                background-color: var(--color-font);
                clip-path: polygon(0 0, 50% 100%, 100% 0);
            }
            /* 開いた時 */
            &.is-active{
                /* 矢印 */
                &::after{
                    transform: translateY(-50%) scale(1,-1);
                }
            }


            & span{
                display: inline-block;
                position: relative;

                &::before{
                    content: "";
                    position: absolute;
                    width: 70px;
                    left: 50%;
                    bottom: -5px;
                    transform: translateX(-50%);
                    border-bottom: 1px dashed var(--color-main);
                }
            }
        }
        /* 奇数の場合 */
        & > li:nth-of-type(odd) button{
            background-color: #fff;

            &::before{
                -webkit-text-stroke: 2px #333;
                text-stroke: 2px #333;
                color: #fff;
            }
        }
        /* 偶数の場合 */
        & > li:nth-of-type(even) button{
            background-color: var(--color-sub);
        }
    }
    /* =============== サービスリスト 中身 =============== */
    & .service-list-content{
        padding: 30px;
        display: none;

        & li{
            position: relative;
            padding-left: 20px;

            &::before{
                content: "";
                width: 0.75em;
                position: absolute;
                top: 0.5em;
                left: 0;
                aspect-ratio: 1 / 1;
                background-color: var(--color-accent);
                border-radius: 100%;
            }


            & + li{
                margin-top: 5px;
            }
        }
    }
    & .service-list_wrap > li:nth-of-type(odd) .service-list-content{
        background-color: rgb(255,255,255,0.5);
    }
    & .service-list_wrap > li:nth-of-type(even) .service-list-content{
        background-color: rgb(230,230,230,0.5);
    }

    /* =============== サービス text =============== */
    & .service-text{
        margin-top: 40px;

        & .service-text_s{
            font-size: 1.4rem;
        }
        & .service-text_l{
            margin-top: 30px;
            text-align: center;
            font-size: 1.8rem;
            letter-spacing: 0.1em;
            font-weight: var(--weight-bold);
            
            & span {
                display: inline-block;
                position: relative;

                &::before {
                    content: "";
                    width: 0.3em;
                    position: absolute;
                    top: -0.1em;
                    left: 50%;
                    transform: translateX(-50%);
                    aspect-ratio: 1 / 1;
                    border-radius: 100%;
                    background-color: var(--color-accent);
                }
            }
        }
    }
}


/*==============================================================================

	service PC

==============================================================================*/
@media all and (min-width: 769px) {
    #service{
        padding: 120px 0;

        /* =============== サービスリスト =============== */
        & .service-list_wrap{
            margin-left: 0;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            justify-content: center;

            & > li{
                width: calc((100% - 50px) / 3);
            }

            & > li button{
                padding-right: 30px;
                font-size: 1.2rem;

                /* 矢印 */
                &::after{
                    right: 12px;
                }
            }
        }

        /* =============== サービス text =============== */
        & .service-text{
            text-align: center;

            & .service-text_l{
                margin-top: 40px;
                font-size: 2rem;
                letter-spacing: 0.15em;
            }
        }
    }
}



/*============================================================================================================================================================
==============================================================================================================================================================

	5.overview

==============================================================================================================================================================
============================================================================================================================================================*/
#overview{
    margin-top: 0;
    padding: 40px 0;

    & .overview-wrap{
        padding: 40px 20px;
    }

    & table{
        border: none;

        & *{
            border: none;
        }

        & tr + tr{
            & th{
                border-top: 1px dashed var(--color-font);
            }
            & td{
                border-top: 1px dashed var(--color-font);
            }
        }

        & th{
            padding: 15px 0;
            width: 85px;
            text-align: center;
            color: var(--color-main);
            font-size: 1.3rem;
        }
        & td{
            padding: 15px 10px;
            font-size: 1.3rem;
        }
        & .overview-table_list{
            & li + li{
                margin-top: 10px;
            }
        }
    }
}
/*==============================================================================

	overview PC

==============================================================================*/
@media all and (min-width: 769px) {
    #overview{
        padding: 120px 0;

        & .overview-wrap{
            padding: 55px 80px;
        }

        & table{

            & th{
                width: 200px;
            }

            & th{
                padding: 20px 0;
                font-size: 1.5rem;
            }
            & td{
                padding: 20px 10px;
                font-size: 1.4rem;
            }
        }
    }
}



/*============================================================================================================================================================
==============================================================================================================================================================

	6.history

==============================================================================================================================================================
============================================================================================================================================================*/
#history{
    margin-top: 0;
    background: #fff;

    & .title-lv2{
        margin-left: -20px;
        padding: 50px 0 20px;
        width: calc(100% + 40px);
        background: url(../1_img/company/hisotry-bg.jpg) no-repeat top center / 100% auto;
    }

    & .history-list_wrap{
        margin-left: -20px;
        padding: 10px 20px 0 35px;
        width: calc(100% + 40px);
        height: calc(80vw + 50px);
        position: relative;
        background: url(../1_img/base/bg-measure-left.svg) repeat-y;
        overflow: hidden;
        transition: 500ms;

        &::before{
            /* 白グラデ */
            content:"";
            position: absolute;
            width: 100%;
            height: calc(40vw + 50px);
            background: #ffffff;
            background: linear-gradient(180deg,rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.53) 56%, rgba(255, 255, 255, 1) 87%);
            left: 0;
            bottom: 0;
            transition: 500ms;
            pointer-events: none;
            z-index: 2;
        }

        &::after{
            /* ドット */
            content:"";
            position: absolute;
            width: 100%;
            height: 36px;
            background: url(../1_img/company/hisotry-dotted.svg) no-repeat center / 5px auto;
            left: 0;
            bottom:0;
            transition: 500ms;
            pointer-events: none;
            z-index: 3;
        }
        
        & *{
            border: none;
            padding: 0;
        }

        & table{

            & th{
                width: 70px;
                vertical-align: text-top;
                transform: translateY(-10px);
                color: var(--color-accent);
                font-size: 1.4rem;
            }

            & td{
                padding: 20px 10px;
                border-bottom: 1px dashed var(--color-font);
                font-size: 1.4rem;

                & .history-list_text{
                    margin-top: 5px;
                    line-height: 1.8;
                }
            }
        }
        & .history-list:not(:first-child) table{

            & tr:last-child td{
                border-bottom: none;
            }
        }

        &.is-open{
            &::before{
                /* 白グラデ */
                opacity: 0;
            }

            &::after{
                /* ドット */
                opacity: 0;
            }
        }
    }

    & .history-list_button{
        margin-top: 35px;
        text-align: center;

        & .button.is-open{
            background-color: var(--color-accent);
        }
        & .button::after {
            transform: translateY(-50%) rotate(90deg);
            transition: 500ms;
        }

        & .button.is-open::after {
            transform: translateY(-50%) rotate(-90deg);
        }
    }
}

/*==============================================================================

	history PC

==============================================================================*/
@media all and (min-width: 769px) {
    #history{
        padding: 150px 0;
        position: relative;
        background: var(--bg-gray);

        &::before{
            content:"";
            width: 100%;
            height: 530px;
            position: absolute;
            top: 0;
            left: 0;
            background: url(../1_img/company/hisotry-bg.jpg) no-repeat top center / 100% auto;
            z-index: 1;
        }

        & .title-lv2{
            margin-left: 0px;
            padding: 0;
            width: auto;
            background: none;
            position: relative;
            z-index: 2;
        }

        & .history-list_wrap{
            margin-left: 0;
            padding: 0;
            width: auto;
            height: auto;
            background: rgb(255 255 255 / 0.8);
            overflow: visible;
            display: flex;
            position: relative;
            z-index: 2;

            &::before,&::after{
                /* 白グラデ と　ドット */
                content: none;
            }
            & .history-list{
                padding: 50px 100px 50px 50px;
                width: 50%;
                background: url(../1_img/base/bg-measure-left.svg) repeat-y;
            }
            & table{

                & th{
                    width: 70px;
                    vertical-align: text-top;
                    transform: translateY(-10px);
                    color: var(--color-accent);
                    font-size: 1.4rem;
                }

                & td{
                    padding: 20px 10px;
                    border-bottom: 1px dashed var(--color-font);
                    font-size: 1.4rem;

                    & .history-list_text{
                        margin-top: 5px;
                        line-height: 1.8;
                    }
                }
            }
            & .history-list:not(:first-child) table{

                & tr:last-child td{
                    border-bottom: none;
                }
            }
        }

        & .history-list_button{
            margin-top: 35px;
            text-align: center;

            & .button::after {
                transform: translateY(-50%) rotate(90deg);
                transition: 500ms;
            }

            & .button.is-open::after {
                transform: translateY(-50%) rotate(-90deg);
            }
        }
    }
}

@media (min-width: 769px) {
    footer {
        margin-top: -100px;
        margin-bottom: 0px;
        padding: 0;
    }
}