@layer pages {
/***** 一覧ページ image hover *****/
.cs_archive_mainvisual img{
	border-radius: 8px;
	filter: grayscale(0%);
  	transition: all 0.5s ease-in;
}
.cs_archive_mainvisual img:hover{
	filter: grayscale(100%);
}
.cs_archive_wrap a:hover{
	text-decoration: none;
	opacity: 0.8;
}
/***** 一覧ページ *****/
.cs_archive main{
	margin: 100px auto 0;
    width: 100%;
    padding: 0 15%;
	font-family: 'Shippori Mincho';
}
.cs_archive_wrap h2{
	font-size: 32px;
    margin-bottom: 60px;
    margin-top: 36px;
    display: inline-block;
	background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
    color: #fff;
    padding: 1%;
}
.cs_archive_container{
    margin-bottom: 60px;
}
.cs_archive_box{
    position: relative;
    top: -80px;
}
.cs_archive_inner{
	background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
    padding: 15px 3%;
    width: 90%;
    border-radius: 10px;
	color: #fff;
    margin: 0 auto;
}
.cs_archive_catch{
	color: #fff;
	font-size: 26px;
	margin-bottom: 10px;
}
.cs_archive_catch p{
	font-size: 20px;
    /*font-weight: bold;*/
    line-height: 1.8;
	margin: 0 3% 15px;
}
.cs_archive_name{
    font-size: 20px;
	margin-bottom: 3px;
}
.cs_archive_job{
	line-height: 1.6;
	margin-bottom: 8px;
}


/***** 一覧ページ レスポンシブ *****/
@media only screen and (max-width: 1011px){
	#careerstory{
		padding: 3%;
	}
}
@media only screen and (max-width: 768px){
	.cs_archive_name{
		margin: 10px 0;
	}
	.cs_archive_inner{
		left: 10px;
	}
	.cs_archive_mainvisual img{
		border-radius: 10px;
    	height: 240px;
	}
    .cs_archive main{
	   padding: 0 10%;
	}
}
@media only screen and (max-width: 480px){
    .cs_archive main {
        padding: 0 5%;
    }
	.cs_archive_container {
        margin-bottom: 0;
	}
	.cs_archive_mainvisual img{
		border-radius: 8px;
    height: auto;
	}
	.cs_archive_inner{
	padding: 10px 5%;
    max-width: 360px;
    border-radius: 8px;
	top: -48px;
	right: 0;
	left: 0;
	margin: 0 auto;
}
.cs_archive_catch {
    font-size: 16px;
}
	.cs_archive_catch p{
	font-size: 16px;
	}
	.cs_archive_name {
    font-size: 16px;
		margin: 5px 0;
	}
	.cs_archive_job{
		font-size: 11px;
	}
	.cs_archive_date{
		font-size:11px;
	}
    .cs_archive_box{
		top: -55px;
    }
	.cs_archive_wrap h2{
		margin-bottom: 40px;
        margin-top: 0;
        font-size: 24px;
    }
}


/***** 詳細ページ *****/
.main_visual{
	position:relative;
	font-family: 'Shippori Mincho';
	margin-bottom: -120px;
}
.first_image img{
   width: 100%;
   max-width: 860px;
   margin: 0 auto;
   display: block;
   border-radius: 11px;
   height: 550px;
   object-fit: cover;
}
.course p {
    position: absolute;
    top: 60px;
    left: 25px;
    color: #fff;
    padding: 6px 7% 8px;
    font-size: 22px;
    border-radius: 15px 0 15px 0;
    /*background-color: var(--color-navy);*/
	background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
    letter-spacing: 0.08em;
}
.caption {
    color: #fff;
    padding: 4% 5% 2.5%;
    width: 100%;
	max-width: 745px;
    margin: 0 auto;
    position: relative;
    top: -135px;
    border-radius: 15px;
    /*background-color: var(--color-navy);*/
	background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
}
.profile_image{
    width: 37%;
    position: absolute;
    right: 40px;
    top: -27px;
}
.caption .name{
	font-size: 26px;
    margin-bottom: 5px;
}
.caption .job{
	font-size: 19px;
    margin-bottom: 5px;

}
.message {
	position: relative;
}
.message_image {
    width: 32%;
    position: absolute;
    left: 142px;
    top: -20px;
}
.message_text_ver2 p.inner {
    padding: 8% 9% 6% 7%;
    border-radius: 15px;
    font-size: 16px;
    line-height: 2;
    color: #fff;
    /*background-color: var(--color-navy);*/
	background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
    font-family: 'Shippori Mincho';
    text-align: justify;
}
.message_text p.inner {
    padding: 8% 9% 6% 7%;
    border-radius: 15px;
    font-size: 16px;
    line-height: 2;
    color: #fff;
    /*background-color: var(--color-navy);*/
	background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1));
    font-family: 'Shippori Mincho';
    text-align: justify;
}
.message_image_fullbody{
    position: absolute;
    width: 100%;
    max-width: 145px;
    top: -50px;
    right: 10px;
}
.message_image_fullbody2 {
    position: absolute;
    width: 100%;
    max-width: 110px;
    top: -60px;
    right: 48px;
}
.message_text{
	width: 100%;
    max-width: 780px;
    margin: 0 auto;
}
.message_text_ver2{
	width: 100%;
    max-width: 780px;
    margin: 0 auto;
}
/***** 詳細ページ レスポンシブ *****/
@media screen and (max-width: 480px){
    .unit-ttl.v-style2{
		padding-left: 0;
}
.unit-ttl.v-style2 {
        margin-bottom: 15px;
}
	.course p {
		font-size: 16px;
		left: -16px;
		top: 33px;
        padding: 4px 7% 4px;
	}
	.caption .name {
    	font-size: 20px;
        margin-bottom: 0;
	}
	.caption .job {
    	font-size: 15px;
	}
	.first_image img{
		object-fit: contain;
    	object-position: top;
    	font-family: "object-fit: contain; object-position: top;";
		max-width: 480px;
		height: 335px;
	}
	.profile_image {
		width: 43%;
        right: 9px;
    	top: -18px;
	}
	.job_introduction{
		font-size: 13px;
	}
	.message_image {
        width: 60%;
        left: 27px;
        top: -8px;
	}
	.message_text p.inner{
		font-size: 13px;
    	padding: 12% 25% 6% 5%;
	}
	.message_text_ver2 p.inner{
		font-size: 13px;
        padding: 12% 6% 6% 5%;
	}
	.message_image_fullbody {
    	max-width: 105px;
    	top: 28px;
    	right: -25px;
	}
	.message_image_fullbody2 {
        max-width: 102px;
        top: -7px;
        right: -25px;
    }

}