@charset "utf-8";
/* CSS Document */

/*---------

result-information-list

----------------------------**/

.result-information,
.result-information a,
.result-information .item{ display: grid;}

.result-information{
    grid-template-columns: repeat(auto-fit , minmax(30rem , 1fr));
    gap: 2.4rem;
    justify-content: space-around;
}

.result-information a{
    grid-template-columns: 35% 1fr;
    background-color: #fffeb2;
    border:1px solid #bfbfbf;
}

.result-information .item{
    font-weight: bold;
    padding: 1em;
    position: relative;
    align-items: center;
}

.result-information .item li{
    position: relative;
    line-height: 1.4;
    margin-left: 1.6rem;
}

.result-information .item li::before,
.result-information .item li::after{
    content: "";
    position: relative;
    display: inline-block;
    left: 0;
    margin-left: -1.6rem;
}

.result-information .item li::before{
    width: 1em;
    height: 1em;
    top: .2rem;
    border: 1px solid #000;
    background-color: #fff;
    transform:translateX(-.8rem)
    
}

.result-information .item li::after{
    position: absolute;
    width: .7rem;
    height: .7rem;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    top: .7rem;
    transform:translateX(-.6rem) rotate(45deg);
}

/*---------

employment

----------------------------**/

.employment-list{
    /* max-width: 68rem; */
    margin:0 auto;
    position: relative;
}

.employment-list::after {
    content: "";
    display: block;
    width: 0.2rem;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    background-color: #00c6ff;
    z-index: -1;
}

.employment-list > div:not([class]),
.employment-body > div:not([class]){
    font-weight: 600;
    text-align: center;
    padding: .4em;
    margin-bottom: 1em;
    background-color: var(--site-point-color);
}

.employment-list .employment-body{
    margin-bottom: 2vh;
    border-radius: .8rem;
    padding: 2vw;
}

/*--- employment heading-area
----------------------------**/

.employment-body .heading-area{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 1rem;
    position: relative;
}

.employment-body .heading-area .stage-lank{
    display: block;
    width: 8em;
    padding: 1em 1em 0;
    color: #FFF;
    line-height: 1.0;
    border-radius: 2em;
    position: absolute;
    top: 0;
    left: 0;
}

.employment-body .heading-area .stage-lank .number{
    font-size: 2.5rem;
    margin-left: 0.25em;
}

.employment-body .heading-area .stage-lank + div{
    font-weight: 600;
    align-self: center;
    position: relative;
}

.employment-body .heading-area h3{ margin-top: 0;}

@media not all and (min-width:768px){

    .employment-body .heading-area .stage-lank{ font-size: 1rem;}
}

@media (min-width:768px){

    .employment-body .heading-area .stage-lank{ padding: .5em 1em .25em; font-size: 2.5rem;}
    .employment-body .heading-area .stage-lank .number{  margin-left: 0.5em;}
    .employment-body .heading-area .stage-lank + div{ font-size: 1.8rem;}
}

/*--- circle & toggle
----------------------------**/

.employment-item .circle li{ margin-bottom: 0;}

.employment-item .toggle-switch-area{
    background-color: #FFF;
    border: 1px solid #a0a0a0;
    text-align: center;
}

.employment-item figure{
    width: 64%;
    border: .4rem solid #FFF;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .25);
    margin: 3vh auto;
}

@media not all and (min-width:768px){

    .employment-item .circle li{ font-size: 1.1rem;}
}

@media (min-width:768px){

    .column-box{ gap: 2vw 3vh;}
}

/*--- check-mark
----------------------------**/

dl dt.check-mark{ color: var(--heading-site-main-color);}
dl dt.check-mark::after,
ul.check-mark li::after{
    width: 14px;
    height: 8px;
    top: 2px;
    left: 3px;
    border-left: 1px solid var(--heading-site-main-color);
    border-bottom: 1px solid var(--heading-site-main-color);
}

/*--- color set
----------------------------**/

.employment-list .employment-body:nth-child(2){ background-color: rgba(220, 241, 251, 1);} /* dcf1fb */
.employment-list .employment-body:nth-child(2) .stage-lank{ background-color: rgba(0, 185, 239, 1);} /* 00b9ef */

.employment-list .employment-body:nth-child(3){ background-color: rgba(220, 230, 240, 1);} /* e4e1f0 */
.employment-list .employment-body:nth-child(3) .stage-lank{ background-color: rgba(76, 140, 203, 1);} /* 4c8ccb */

.employment-list .employment-body:nth-child(4){ background-color: rgba(228, 225, 240, 1);} /* e4e1f0 */
.employment-list .employment-body:nth-child(4) .stage-lank{ background-color: rgba(100, 85, 164, 1);} /* 6455a4 */

.employment-list:nth-child(3) .employment-body:nth-child(2){ background-color: rgba(237, 223, 237, 1);} /* eddfed */
.employment-list:nth-child(3) .employment-body:nth-child(2) .stage-lank{ background-color: rgba(175, 98, 164, 1);} /* af62a4 */

.employment-list:nth-child(3) .employment-body:nth-child(3){ background-color: rgba(251, 222, 234, 1);} /* fbdeea */
.employment-list:nth-child(3) .employment-body:nth-child(3) .stage-lank{ background-color: rgba(233, 82, 151, 1);} /* e95297 */




/*---------

success

----------------------------**/

.success-point-list{
	margin: 0 auto;
    position: relative;
	display: block;
}
.success-point-list .point-body{
    border-radius: 0.8rem;
    padding: 4vw 2vw;
	background-color: #fff;
	box-shadow: 0px 0px 12px rgb(0 0 0 / 8%);
	max-width: var(--width-min);
	margin: 0 auto 3vh;
}

.success-point-list .point-body .heading-area{
	margin-bottom: 0.8em;
}

.success-point-list .point-body .point-detail ol {
    border-radius: 0.8rem;
    max-width: 680px;
    margin: 0 auto 1.2em;
    background: #fff;
    padding: 1.6rem 2rem 1em 4rem;
	background-color: rgba(226, 243, 255, 1);
}

.success-point-list .point-body .point-detail .img_box{
	max-width: 680px;
	margin: 0 auto;
	width: 80%;
}

.success-point-list .point-body .point-detail p{
    margin-bottom: 1rem;
}

.success-point-list .point-body .point-detail .img_box .img{
	margin-bottom: 0.8em;
}

.success-point-list .point-body .point-detail .img_box .img span{
    font-size: 0.85em;
    line-height: 1.4em;
    color: #777;
    display: block;
    margin: 0.6rem 0 0;
}

@media not all and (min-width: 768px){
	
.success-point-list .point-list_item p {
	text-align: left;
}
}


@media (min-width: 768px){
.success-point-list .point-body{
    padding: 2vw;
}
	
.success-point-list .point-body .point-detail ol {
	margin: 0 auto 2vw;
}

.success-point-list .point-body .point-detail .img_box{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
	
.success-point-list .point-body .point-detail .img_box{
	width: 100%;	
}
	
.success-point-list .point-body .point-detail .img_box .img{
	display: block;
	width: 48%;
	margin-bottom: 1.2em;
}

}



/*--- .flex_cnt (テキスト＋画像)
----------------------------**/	

.flex_cnt{
/*	max-width: var(--width-min);*/
	margin: 0 auto;
    display: flex;
    flex-flow: column;
    width: 100%;
}

.flex_cnt .img{
	max-width: 360px;
	display: block;
	margin: 0 auto 1em;
}

.flex_cnt .img img{
    padding: 0.4rem;
    box-shadow: 2px 2px 3px 1px rgb(0 0 0 / 10%);
	display: block;
	margin: 0 auto 1em;
    background: #fff;
}

.flex_cnt .img .sub_text{
    display: block;
    font-size: 0.8em;
    color: #777;
    line-height: 1.4;
    text-align: center;
}

.flex_cnt .img span{
    
}

.flex_cnt .text_box{
	flex-basis: 62%;
	margin-bottom: 1em;
}
.flex_cnt .text_box p{
	margin-bottom: 1em;
}

.flex_cnt.reverse{
    flex-flow: column-reverse;
}

@media (min-width: 768px){
	.flex_cnt, 
	.flex_cnt.reverse{
		display: flex;
        flex-flow: row;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 0;
	}
	.flex_cnt .img{
		flex-basis: 36%;
		margin: 0;
	}
}

.flex_cnt .img.nostyle,
.flex_cnt .img.nostyle img{
    padding: 0;
    box-shadow: none;
    background: none;
}

.flex_cnt .img.vertical img{
    display: block;
    width: 60%;
    margin: 0 auto 1em;
}

@media (min-width: 768px){
.flex_cnt .img.vertical img{
    width: 80%;
}
}

/*--- テキスト＋画像
----------------------------**/

/*--- テキスト＋画像
----------------------------**/


.column_style .img{
    width: 100%;
    margin: 0 auto 1rem;
	position: relative;
}

.column_style .photo_style img{
    padding: 0.4rem;
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .1);
    background: #fff;
}

.column_style .img span{
	position: absolute;
	display: block;
	bottom: 0;
	width: 100%;
	background: rgb(255 255 255 / 70%);
	font-size: 12px;
	padding: 6px;
	line-height: 16px;
}

.column_style .item_title{
    font-weight: bold;
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

.column_style .item_title .sub{
    font-weight: normal;
    display: block;
    font-size: 0.8em;
}

.column_style .colordot-list li{
    font-size: 0.8em;
    line-height: 1.4;
}

.column_style .colordot-list li::before{
    top: 0.3em;
}

.column_style .item_title.check-mark{
    color: var(--theme-color);
    padding-left: 2.4rem;
    position: relative;
}

.column_style .item_title.check-mark::before {
    content: "";
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid #000;
    background-color: #FFF;
    top: 0.6rem;
    left: 0;
}

.column_style .item_title.check-mark::after{
    content: "";
    position: absolute;
    width: 1.4rem;
    height: 0.8rem;
    top: 0.5rem;
    left: 0.2rem;
    border-left: 0.1rem solid var(--theme-color);
    border-bottom: 0.1rem solid var(--theme-color);
    transform: rotate(-45deg);
}

.column_style .item_title.theme-color{
    color: var(--theme-color);
}

.column_style p{
    line-height: 1.6;
    margin-bottom: 0.6rem;
}

.column_style .small{
    font-size: 0.8em;
}

.column_style p.name{
    width: 100%;
    object-fit: contain;
    display: block;
    line-height: 1.2;
}

.column_style p.name img{
    max-width: 15rem;
    width: 100%;
}

.column_style p.name span{
    font-size: 0.8em;
}

.column_style .column_item.bg_theme{
	background: var(--bg-theme-sub);
    padding: 1em 0.6em;
	border-radius: 0.8rem;
}


.column_2-1{
	display: block;
}

.column_2-1 .column_item{
	max-width: 480px;
    margin: 0 auto 3rem;
}

.column_3-1{
	display: block;
}

.column_3-1 .column_item{
	max-width: 400px;
    margin: 0 auto 3rem;
}

.column_3-2{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 2rem;
}

.column_4-2{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 2rem;
}


@media (min-width: 768px){
    
    .column_2-1{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 2rem 4rem;
	}
	
	.column_3-2, 
	.column_3-1{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		gap: 2rem 4rem;
	}
    
    .column_3-1 .column_item{
        margin: 0 auto;
    }
	
	.column_4-2{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	
}

/*--- レイアウトパターン　ここまで
----------------------------**/



/*---------

就職・デビューサポート体制

----------------------------**/


.recruit .column_style{
	margin-top: 3rem;
}

.column_style .employment-item .img{
    width: 80%;
    margin: 0 auto 1rem;
	position: relative;
/*    border-radius: 0.8rem;*/
    z-index: 0;
    padding: 0.4rem;
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .1);
    background: #fff;
}

.column_style .employment-item .img span{
	position: absolute;
	display: block;
	bottom: 0;
	width: 100%;
	background: rgb(255 255 255 / 70%);
	font-size: 12px;
	padding: 6px;
	line-height: 16px;
}

.column_style .employment-item .item_title{
    font-weight: bold;
    color: var(--theme-color);
    margin-bottom: 0.6rem;
    line-height: 1.6;

}

.column_style .employment-item ul, 
.column_style .employment-item p{
    line-height: 1.6;
    margin-bottom: 0.6rem;
}

.column_style .employment-item.column_item{
    background: var(--bg-theme-sub);
    border-radius: 0.8rem;
}

.column_style .employment-item.column_item .text{
    padding: 0 1.4rem 1.4rem;
}

.column_style .employment-item .course_name{
	background: var(--theme-color);
    padding: 8px 16px;
    display: block;
    width: fit-content;
	border-radius: 1em;
    line-height: 1;
    color: #fff;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    transform: translateY(-50%);
}

.success-point-list .point-body .point-detail .column_style ol.number{
    background: none;
    margin: 0;
    padding: 0 0 0 1.5em;
    font-size: 1.4rem;
    line-height: 1.6;
}


.recruit .column_2-1{
	display: block;
}

.recruit .column_2-1 .column_item{
	max-width: 480px;
	width: 100%;
    margin: 0 auto 3rem;
}

@media (min-width: 768px){
    
    .recruit .column_2-1{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 2rem;
	}
}




.graduate_g{
    margin-top: 3rem;
}

.graduate_g h4 {
    display: block;
    width: 100%;
    padding: 0.5em;
    background-color: var(--bg-site-main-blue);
}

.graduate-message{
    max-width: var(--width-min);
    display: grid;
    margin-left: auto;
    margin-right: auto;
}

.graduate-message:nth-of-type(1) .toggle-item{ display: block;}

.graduate-message_img img{
    overflow: hidden;
    position: relative;
    z-index: 1;
    border: .4rem solid #FFF;
    border-radius: 1rem;
}

.graduate-message_img figure{ position: relative;}

.graduate-message_img figure::after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: rgb(94,201,255);
    background: linear-gradient(90deg, rgba(94,201,255,.5) 0%, rgba(248,140,204,.5) 100%);
    position: absolute;
    top: 8px;
    left: 8px;
    display: block;
}

.graduate-message_text > p{
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--heading-site-main-color);
    margin-bottom: 1rem; /*  231030 追記  */
}

/*  231030 追記 ここから  */
.graduate-message_text > p.sub_text {
    font-size: 1.3rem;
    text-align: right;
    color: #000;
    line-height: 1;
    margin-bottom: 0.4rem;
}
/*  追記 ここまで  */

.graduate-message_text .name{
    width: 100%;
    margin-left:auto;
    align-items: flex-start;
    margin-bottom: 1em;
    line-height: 1;　/*  231030 追記  */
}

.graduate-message_text .toggle-item{
    padding: 0;
    margin-bottom: 1rem;
    display: none;
}

.graduate-message_text .toggle-button{
    display: block;
    line-height: 2.5em;
    min-width: 20rem;
    max-width: 32rem;
    border-radius: 2rem;
    margin-left: auto;
    margin-right: auto;
    border:1px solid #ccc;
    background-color: #FFF;
    transition: bottom 0.8s ease;
    position: relative;
    left: auto;
    right: auto;
}

@media not all and (min-width:768px){

    .graduate-message_img{
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2.4rem;
    }

    .graduate-message{ margin-bottom: 3.2rem; }
    .graduate-message_text .toggle-button{ font-size: 1.3rem;}
}

@media (min-width:768px){

    .graduate-message{
        grid-template-columns: 28rem 1fr;
        grid-auto-rows: 1fr;
        column-gap: 2.4rem;
        margin-bottom: 3.2rem;
    }

    .graduate-message_text{ grid-auto-rows: auto auto 1fr auto;}
    .graduate-message_text > p{ font-size: 2.0rem;}
    .graduate-message_text .name{ width: 72%;}
}



/*---------

産学連携

----------------------------**/
.works .section-inner + .section-inner{
    margin-top: 5rem;
}


h4.bg_theme-color{
    display: block;
    width: 100%;
    padding: 0.5em;
    background-color: var(--bg-site-main-blue);
}

.works h3 .logo{
    /* max-width: 380px; */
    max-width: 240px;
    width: 90%;
    margin: 0.6rem auto 0;
    display: block;
}

.works .column_style{
    margin-top: 3rem;
}


.work_item{
    background: var(--bg-theme-sub);
    border-radius: 0.8rem;
    padding: 0 1.2rem 1.6rem 1.2rem;
    margin-bottom: 3rem;
}

.work_item h4{
    font-weight: 600;
    margin-top: 0;
}

.work_item .item_title{
    text-align: center;
    color: var(--theme-color);
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 1em;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-color);
}

.work_item .img{
    margin-bottom: 1rem;
}

.work_item .img span{
    text-align: center;
    font-size: 0.8em;
    display: block;
    line-height: 1.6;
    margin-top: 0.6rem;
}

.work_item .img_box .img img{
    display: block;
    width: 80%;
    margin: 0 auto;
}


.work_item h5{
    font-weight: normal;
    line-height: 1.6;
    display: block;
    width: 100%;
    margin-bottom: 0.6rem;
    color: var(--theme-color);

}

.work_item .text p{
    font-size: 1.4rem;
}

.work_item .text p.notes{
    font-size: 0.8em;
    line-height: 1.6em;
    color: #777;
    margin-top: 1rem;
}

.work_item .text .img {
    margin-top: .6rem;
}

.work_item h4 .logo{
    max-width: 240px;
    width: 90%;
    margin: 0.6rem auto 0;
    display: block;
}

.work_item .course_name{
	background: var(--theme-color);
    padding: 8px 16px;
    display: block;
    width: fit-content;
	border-radius: 1em;
    line-height: 1;
    color: #fff;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    transform: translateY(-50%);
}

.bg_box{
    background: var(--bg-site-main-blue);
    padding: 2rem 1.2rem 1.6rem 1.2rem;
    margin: 0 auto 3rem;
    border-radius: 0.8rem;
}

.bg_box .bg_theme-color{
    background: #fff;
}

@media (min-width:768px){
    
    .work_item{
        display: grid;
        grid-template-columns: 38.15% 1fr;
        gap: 2rem; 
        padding: 0 2rem 1.6rem 2rem;
        margin-bottom: 5rem;
    }
    
    .work_item .title{
        grid-column: 1 / 3;
    }
    
    .work_item .item_title{
        margin-bottom: 0;
    }
    
    .work_item .text p{
        font-size: 1.6rem;
    }

    .work_item .text .img {
        width: 70%;
    }
    
    .work_item .img_box{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4%;
    }
    
    .work_item .img_box .img img{
        width: 100%;
    }

    
    .bg_box{
        padding: 3.2rem 2rem 1.6rem 2rem;
}

}

.works .img_box .name {
    width: 100%;
    object-fit: contain;
    display: block;
    line-height: 1.2;
}

.works .img_box .name img {
    max-width: 15rem;
    width: 100%;
}

.works .img_box .name span {
    font-size: 0.8em;
}