/*==================================================
18 採用ページ 開発環境テーブル
 Development Environment Table
==================================================*/

/* マイナビバナー */
.it-mynavi-banner{
    display:flex;
    justify-content:flex-end;
    margin-top:24px;
}

.it-mynavi-banner img{
    display:block;
}


/*==================================================
 Recruit Flow
==================================================*/



/* 各フロー */
.it-card > .vk_flow{

    width:100%;

}

/* フレーム */
.it-card .vk_flow_frame{

    display:flex;
    align-items:center;

    min-height:150px;

    padding:24px;

}

/* テキスト */
.it-card .vk_flow_frame_text{

    flex:1;

}

/* アイコン */
.it-card .vk_flow_frame_image{

    flex:0 0 90px;
    width:90px;
    text-align:center;

}

.it-card .vk_flow_frame_image img{

    width:64px;
    height:64px;

}


/*採用フローの枠線の色*/
.vk_flow_frame{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius-l);

    box-shadow:var(--shadow-s);

    transition:var(--transition);

}

.vk_flow_frame:hover{

    border-color:var(--primary);

    transform:translateY(-3px);

}

.vk_flow-arrow-on .vk_flow_frame::after{

    border-top-color:var(--primary);

}

/*==================================================
 Development Environment Table
==================================================*/


.it-table.it-environment{

    background:var(--white);

    border-radius:var(--radius-l);

    overflow:hidden;

    box-shadow:var(--shadow-s);

}


/* Table */

.wp-block-table.it-environment table{

    width:100%;

    border-collapse:collapse;

    background:var(--white);

}


/* Row */

.wp-block-table.it-environment tr{

    border-bottom:1px solid #e5edf7;

}


.wp-block-table.it-environment tr:last-child{

    border-bottom:none;

}


/* Left */

.wp-block-table.it-environment td:first-child{

    width:180px;

    padding:20px 24px;

    background:#f5f7fa;

    color:var(--primary);

    font-weight:700;

    vertical-align:top;

    white-space:nowrap;

}


/* Right */

.wp-block-table.it-environment td:last-child{

    padding:20px 24px;

    color:var(--text);

    line-height:1.9;

}


/* Cell Reset */

.wp-block-table.it-environment td{

    border:none;

}

@media(max-width:768px){

    .wp-block-table.it-environment td{

        display:block;

        width:100% !important;

        padding:14px 16px;

    }


    .wp-block-table.it-environment td:first-child{

        background:#f5f7fa;

    }

}

/*==================================================
 Development Environment Table Border Reset
==================================================*/

.wp-block-table.it-environment,
.wp-block-table.it-environment table,
.wp-block-table.it-environment tbody,
.wp-block-table.it-environment tr,
.wp-block-table.it-environment td{

    border:none !important;

}


/* Row Divider */

.wp-block-table.it-environment tr{

    border-bottom:1px solid #e5edf7 !important;

}


/* Last Row */

.wp-block-table.it-environment tr:last-child{

    border-bottom:none !important;

}


/* Cell */

.wp-block-table.it-environment td{

    border:none !important;

}

/*----------------------------------
 採用ページ　1日の流れ
 Engineer Day
----------------------------------*/



.it-day{


 display:block;

}

.it-day:not(:last-child) .it-day-icon::after{

    content:"";

    position:absolute;

    top:56px;

    left:98px;

    height:32px;

    width:1px;

    background:var(--border);

}

/*----------------------------------
 Item
----------------------------------*/

.it-day-item{


    position:relative;

    display:grid;

    grid-template-columns:80px 56px minmax(0,1fr);

    column-gap:20px;

    align-items:start;
	  padding-bottom:20px;
	


}


/*----------------------------------
 Timeline
----------------------------------*/

.it-day-item::before{

    content:"";

    position:absolute;

    left:128px;

    top:56px;

    bottom:0;

    width:2px;

    background:var(--border);

}


.it-day-item:last-child::before{

    display:none;

}

.it-day-item P{
		color:var(--primary);
}


/*----------------------------------
 Time
----------------------------------*/
.it-day-time{

    width:70px;

    flex-shrink:0;

    padding-top:14px;

    font-size:18px;

    font-weight:700;

　　color:red !important;

}


.it-day-icon{

    width:56px;

    height:56px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--bg-section);


    margin-right:20px;

}


/*----------------------------------
 Content
----------------------------------*/

.it-day-content > *{

    margin-left:0;
    margin-right:0;

}

.it-day-content{

    width:100%;
    max-width:none;
    padding-top:8px;
    text-align:left;
		color:var(--dayline_text);

}

/*確認用*/
.it-day-content > *{

 margin-block-start:0 !important;

}

.it-day-content h3{

    margin-top:0;
    margin-bottom:10px !important;

    font-size:16px;
    font-weight:700;
    text-align:left;
	  color:var(--dark_gray);
	
}


.it-day-content p{
    margin:0;
    text-align:left;
	  color:var(--dayline_text);
}



/* it-day-content の中央寄せ解除 */
.it-day-item > .it-day-content{

    justify-self:start;
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;

}

.it-day-content.is-layout-constrained{

    max-width:none;

}

/*----------------------------------
 Responsive
----------------------------------*/

@media (max-width:768px){

    .it-day-item{

        grid-template-columns:60px 48px 1fr;

        column-gap:16px;

        padding-bottom:32px;

    }

    .it-day-item::before{

        left:84px;

        top:48px;

    }

    .it-day-time{

        font-size:.875rem;

        line-height:48px;

    }

    .it-day-icon{

        width:48px;

        height:48px;

    }

    .it-day-icon img,
    .it-day-icon svg{

        width:40px;

        height:40px;

    }

}