@charset "utf-8";

/* -----------------------------
	common class
--------------------------------- */
:root{
	
	/* title variable  */
	--subt-size : 35px;
	--linkt-size : 25px;
	
	@media screen and (max-width: 1000px) {
		--subt-size : 3.5vw;
		--linkt-size  : 2.5vw;
	}
	@media screen and (max-width: 640px) {
		--subt-size : 6vw;
		--linkt-size  : 5vw;
	}
}
	
.content {
	position: relative;
}

.btn{
	a {
		font-family: var(--notosans);
		font-weight: var(--f-dmbold);
		color: var(--d-black);
		
		background: #fff;
		border-radius: 9999px;
		border: solid 2px var(--l-black);
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 auto;
		max-width: 300px;
		padding: 10px 25px;
		line-height: 1.4;
		text-decoration: none;
		text-align: center;
		transition: 0.3s ease-in-out;
	}
	a:hover {
		background: #333;
		color: #FFF;
	}
	a:after {
		content: '';
		width: 10px;
		height: 10px;
		border-top: 3px solid var(--l-black);
		border-right: 3px solid var(--l-black);
		transform: rotate(45deg) translateY(-50%);
		position: absolute;
		top: 50%;
		right: 20px;
		border-radius: 1px;
		transition: 0.3s ease-in-out;
	}
	a:hover:after {
		border-color: #FFF;
	}
}

/*-- sub-menu ------------------------------ */
	
.open{

	position: absolute;
	top: 30px;
	right: 40px;
	@media screen and (max-width: 1000px) {
		top: 2vw;
		right: 20px;
	}
	@media screen and (max-width: 640px) {
		top: 0px;
		right: 20px;
	}

	width: 40px;
	height: 40px;
	display: block;
	cursor: pointer;
	transition: opacity 0.2s linear;
	z-index: 100;
	opacity: 0.7;
	
	&:hover{
		opacity: 1;
	}
	span{
		display: block;
		float: left;
		clear: both;
		height: 4px;
		width: 30px;
		border-radius: 30px;
		background-color: var(--d-black);
		position: absolute;
		right: 3px;
		top: 3px;
		overflow: hidden;
		transition: all 0.4s ease;
		&:nth-child(1){
			margin-top: 10px;
			z-index: 9;
		}
		&:nth-child(2){
			margin-top: 21px;
		}
		&:nth-child(3){
			margin-top: 32px;
		}
	}
}

.sub-menu{
	transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	height: 0;
	width: 0;
	right: 0;
	top: 0;
	position: absolute;
	background-color: var(--cl-red);
	border-radius: 50%;
	z-index: 18;
	overflow: hidden;

	li{
		/*border: solid 1px #000;テスト用*/
		display: block;
		float: right;
		clear: both;
		height: auto;
		margin-right: -160px;
		transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		&:first-child{
			margin-top: 150px;
		}
		&:nth-child(1){
			-webkit-transition-delay: 0.05s;
		}
		&:nth-child(2){
			-webkit-transition-delay: 0.10s;
		}
		&:nth-child(3){
			-webkit-transition-delay: 0.15s;
		}
		&:nth-child(4){
			-webkit-transition-delay: 0.20s;
		}
		&:nth-child(5){
			-webkit-transition-delay: 0.25s;
		}
		a{
			color: #fff;
			font-family: var(--notosans);
			font-weight: var(--f-regular);
			font-size: var(--bodycopy);
			width: 100%;
			display: block;
			float: left;
			line-height: 40px;

			padding-left: 25px;
			background:
				radial-gradient(circle closest-side, #fff 80%, transparent) 10px center  / 6px 6px no-repeat,
				linear-gradient(#fff 50%, transparent 0%) 0px 51% / var(--d, 10px) 3% no-repeat;
			transition: 0.1s linear;
		}
		a:hover {
			--d: 15px;
			background-position: var(--d) 50%, center left;
			color : var(--d-gray);
			transition: 0.3s linear;
		}
	}
}

.oppenned{
	.sub-menu{
		opacity: 1;
		height: 400px;
		width: 400px;
	}
	span:nth-child(2){
		overflow: visible;
	}
	span:nth-child(1), span:nth-child(3){
		z-index: 100;
		transform: rotate(45deg);
		background-color: #fff;
	}
	span:nth-child(1){
		transform: rotate(45deg) translateY(5.5px) translateX(5.5px);
	}
	span:nth-child(2){
		height: 420px;
		width: 420px;
		right: -140px;
		top: -120px;
		border-radius: 50%;
		background-color: rgb(248,227,233,0.7);
	}
	span:nth-child(3){      
		transform: rotate(-45deg) translateY(-10px) translateX(10px);
	}
	li{	margin-right: 148px;}
}



/* -----------------------------
	mainvisual
--------------------------------- */

.mainvisual {
	width: 100%;
	
	li.bg01 {
		text-align: center;
	}
	
	a {
		display: inline-block;
		width: 100%;
		max-width: 1200px;
		aspect-ratio:1200/520;
	}
	
	figure {
		display: block;
		margin: 0 auto;
		width: 100%;
		max-width: 1200px;
		aspect-ratio:1200/520;
		position:relative;
		
		figcaption{
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			background: linear-gradient(90deg,rgba(255,255,255,0.80) 80%, transparent 100%)!important;
			padding: 15px 15px 15px 60px;
			font-family: var(--notosans);
			font-weight: var(--f-dmbold);
			font-size  : var(--mvs-size);
	
			@media screen and (max-width: 640px) {
				/* iphone のみフォントが効かなくなる現象の対策　*/
				font-size : 3.5vw !important;
			}
		}
		
		img{
			width: 100%;
			height: auto;
		}
		
	}
	
	
}


/* -----------------------------
	#message
--------------------------------- */
	

#message .content {
	
	.sp {
		display: none;
	}

	@media screen and (max-width: 640px) {
		.sp {
			display: inline-block;
		}
	}
	
	.leadcopy {
		text-align: center;
		margin-bottom: 40px;
	}
	
	.graph_area {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: 1fr;
		grid-column-gap: 40px;
		width: 90%;
		margin: 0 auto 40px;

		@media screen and (max-width: 640px) {
			display: block;
			
			.graph {
				margin-bottom: 30px;
				text-align: center;
				img{
					width: 70%;
				}
			}
			
		}
		
		.txt {
			font-size: var(--bodycopy);
			line-height: 2;
		}
		
	}
	
	
}

/* -----------------------------
	#about
--------------------------------- */

#about .content {
	
	/* logo variable */
	--img-width: 180px;
	--img-height: 35px;
	
	
	overflow: hidden;
	
	h2 {
		float: left;
		width: 40%;
		margin-bottom: 25px;
	}
	
	h3 {
		/* fonts */
		font-family: var(--garamond);
		font-weight: var(--f-regular);
		font-size  : 35px;
		
		/* line */
		display: flex;
		column-gap: 20px;
		align-items: center; 
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	h3:before,
	h3:after {
		/* line */
		content: "";
		flex-grow: 1;
		height: 2px;
		background: var(--d-gray);
	}
	
	.leadcopy {
		float: right;
		width: 52%;
		margin-bottom: 25px;
	}
	
	picture {
		clear:both;
		display: block;
		width: calc(100% - var(--sec-padd));
		margin-left: var(--sec-padd);
		margin-bottom: 60px;
	}
	
	
	@media screen and (max-width: 1000px) {
		h3 {font-size  : 3.5vw;}
		
	}
	
	@media screen and (max-width: 640px) {
		h2 {float: none;width: 100%;}
		h3 {font-size  : 25px;}
		.leadcopy {float: none;width: 100%;}
		
	}
	
	/* logo-slider */
	
	.logo-slider {
		margin-bottom: 45px;
		margin-left: var(--sec-padd);
	}
	.logo-slider .slick-slide {
		width: var(--img-width);
		height: var(--img-height);
		position: relative;
		overflow: hidden;
		margin: 0 25px;
		vertical-align: middle;
		display: table;
		span {
			display: table-cell;
			vertical-align: middle;
		}
	}
	.logo-slider li.width {
		width: var(--img-width);
		height: var(--img-height);
	}
	.logo-slider li.height {
		width: auto;
		height: var(--img-height);
	}
	.logo-slider .slick-slide img {
		display: block;
		object-fit: cover;
	}
	.logo-slider .slick-slide.width img {
		width: var(--img-width);
		height: auto;
	}
	.logo-slider .slick-slide.height img {
		width: auto;
		height: var(--img-height);
	}
	
}

/* -----------------------------
	#report
--------------------------------- */

#report {
	
	/* repoat-slider */
	.repoat-slider {
		padding: 0 var(--sec-padd);
		clear: both;
	}
	.repoat-slider .slick-slide {
		margin: 0 15px 30px;
		padding: 0;
		position: relative;
		overflow: hidden;
		border: solid 2px var(--d-gray);
	
		h3 {
			background-color: var(--cl-pink);
			font-family: var(--notosans);
			font-weight: var(--f-regular);
			font-size: var(--bodycopy);
			color: white;
			padding: 5px 10px;
		}
		figure {
			overflow: hidden;
			aspect-ratio: 32/17;
		}
		figure img{
			width: 100%;
			height: auto;
		}
		.report_text {
			padding: 15px;
			display: flex;
			flex-direction: column;
			font-size: var(--bodycopy);
			.date{
				color: var(--ml-black);
				margin-bottom: 15px;
				flex-grow: 1;
			}
			.ttl{
				flex-grow: 1;
			}
			
		}
	}
	.repoat-slider .slick-track {
		display: flex;
	}
	.repoat-slider .slick-slide {
		height: auto !important;
	}
	.repoat-slider .slick-slide a:before{
		content:"";
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		z-index:2;
		background:var(--d-black);
		opacity:0;
		transition:0.3s;
	}
	.repoat-slider .slick-slide a:after{
		content:"View More";
		display:block;
		color:#fff;
		line-height:48px;
		width:180px;
		border:solid 1px #fff;
		border-radius:5px;
		text-align:center;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-1em;
		margin-left:-90px;
		opacity:0;
		z-index:3;
		transition:0.3s;
		font-weight:bold;
		letter-spacing:0.2em;
	}
	.repoat-slider .slick-slide a:hover:before{
		opacity:0.5;
	}
	.repoat-slider .slick-slide a:hover:after{
		opacity:1;
		margin-top:-0.5em;
	}
	.repoat-slider .slick-arrow {
		width: 60px;
		height: 60px;
		border-radius: 3px;
		background-color: var(--d-black);
		opacity: 0.7;
		cursor: pointer;
		border: none;
		outline: none;
		font-size: 0;
		position: absolute;
		top: 50%;
		z-index: 1;
		transform: translateY(-50%);
		filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
	}
	.repoat-slider .slick-arrow::before {
		content: '';
		display: block;
		width: 12px;
		height: 12px;
		border: 1px solid #fff;
		border-width: 3px 3px 0 0;
		position: absolute;
		top: 24px;
		transform: rotate(45deg);
	}
	.repoat-slider .slick-next {
		border-top-right-radius: 9px;
		border-bottom-right-radius: 9px;
	  	right: 0;
	}
	.repoat-slider .slick-prev {
		border-top-left-radius: 9px;
		border-bottom-left-radius: 9px;
	  	left: 0;
	}
	.repoat-slider .slick-next::before {
	  	left: 20px;
	}
	.repoat-slider .slick-prev::before {
	  	border-width: 0 0 3px 3px;
	  	right: 22px;
	}
	
	.report-nav .slick-dots {
		text-align: center;
		display: flex;
		margin: 0 auto;
		width: 50%;
		@media screen and (max-width: 800px) {
			width: 70%;
		}
		@media screen and (max-width: 640px) {
			width: 90%;
		}
	}
	.report-nav .slick-dots li {
		display: inline-block;
		width: 100%;
		height: 6px;
		margin: 4px;
		background: var(--l-gray);
		cursor: pointer;
	}
	.report-nav .slick-dots button {
		display: block;
		width: 0%;
		height: 6px;
		margin: 0;
		font-size: 0;
		padding: 0;
		border: 0;
		opacity: 0;
		outline: none;
		background: var(--cl-red);
		cursor: pointer;
	}
	.report-nav .slick-dots .slick-active button {
		background: var(--cl-red);
		opacity: 1;
	}
	
}

/* -----------------------------
	#service
--------------------------------- */
#service {
	h2 {margin-bottom: 0;}
	.bg-wrap {
		
		background-image: url("../images/home/bg_solution.png") ;
		background-size: cover;
		background-position: center top;
		animation: parallax linear both;
  		animation-timeline: view();
		
		background-size: cover;
		padding: 40px 0 20px;
		p{
			margin-left: var(--sec-padd);
			font-size: var(--bodycopy);
			margin-bottom: 30px;
			width: 60%;
		}
		@media screen and (max-width: 640px) {
			p{
				width: 80%;
			}
		}
	}
}
	
@keyframes parallax {
	from {
		background-position: center top;
	}

	to {
		background-position: center bottom;
	}
}

/* -----------------------------
	#news
--------------------------------- */


#news {
	
	--news-font: 12px;
	--icon-size: 100px;
	
	@media screen and (max-width: 1000px) {
		--news-font: 1.2vw;
		--icon-size: 10vw;
	}
	@media screen and (max-width: 640px) {
		--news-font: 2.4vw;
		--icon-size: 20vw;
	}
	
	.content {
		position: relative;
	}
	
}

#news .two_col {
	overflow: hidden;
	clear: both;
	
	.news_list {
		width: 55%;
		float: left;
	}
	.topic-wrap {
		width: 40%;
		float: right;
	}
	
	@media screen and (max-width: 800px) {
		.news_list {
			width: 100%;
			float: none;
			margin-bottom: 30px;
		}
		.topic-wrap {
			width: 60%;
			float: none;
		}
	}
	@media screen and (max-width: 640px) {
		.news_list {
			width: 100%;
			float: none;
			margin-bottom: 60px;
		}
		.topic-wrap {
			width: 100%;
			float: none;
		}
	}
	
	/* .news_list */
	
	.news_list li{
		font-size: var(--bodytext);
		padding: 18px 0;
		border-bottom: solid 1px var(--ml-black);
	}
	
	.news_list li .date{
		color: var(--ml-black);
		display: inline-block;
		margin-right: 15px;
	}
	
	.news_list li .icon{
		display: inline-block;
		width : var(--icon-size); 
		font-family: var(--notosans);
		font-weight: var(--f-dmbold);
		color: var(--cl-pink);

		border-radius: 9999px;
		border: solid 2px var(--cl-pink);
		font-size: var(--news-font);
		text-align: center;
	}
	
	.news_list li .ttl {
		grid-area: 2 / 1 / 3 / 3;
		margin-top: 10px;
	}
	
	.news_list li .ttl a {
		display: block;
		color : blue;
		text-decoration: underline;
	}
	
	.news_list li .ttl a[target=_blank]:after {
		margin: 0 0 0 3px;
		font-family: "Font Awesome 5 Free";
		content: '\f35d';
		font-weight: 900;
	}
	
	/*
	
	.news_list li .ttl a[href^="https://www.careerlink-edu.co.jp/"]:after {
		margin: inherit;
		font-family: inherit;
		content: '';
		font-weight: inherit;
	}
	.news_list li .ttl a[target=_blank] {
		color : var(--cl-red);
		background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-external-link%22%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%3E%3C%2Fpath%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%223%22%3E%3C%2Fline%3E%3C%2Fsvg%3E');
		background-size: var(--bodytext);
		background-repeat: no-repeat;
		background-position: right center;
	}
	
	.news_list li .ttl a[target=_blank]:hover {
		color: var(--cl-pink);
		background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B99b00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-external-link%22%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%3E%3C%2Fpath%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%223%22%3E%3C%2Fline%3E%3C%2Fsvg%3E');
	}*/
	
	.news_list li .ttl a:hover {
		color : var(--d-black);
		text-decoration: none;
	}
	
	/* topic-slider */
	.topic-wrap {
		margin: 0 auto;
		position: relative;
		padding-top: 3px;
	}
	.topic-slider .slick-slide {
		overflow: hidden;
	}
	.topic-slider .slick-slide img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
	}
	.topic-slider .slick-slide a:before{
		content:"";
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		z-index:2;
		background:var(--d-black);
		opacity:0;
		transition:0.3s;
	}
	.topic-slider .slick-slide a:after{
		content:"Click here";
		display:block;
		color:#fff;
		line-height:48px;
		width:180px;
		border:solid 1px #fff;
		border-radius:5px;
		text-align:center;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-1em;
		margin-left:-90px;
		opacity:0;
		z-index:3;
		transition:0.3s;
		font-weight:bold;
		letter-spacing:0.2em;
	}
	.topic-slider .slick-slide a:hover:before{
		opacity:0.5;
	}
	.topic-slider .slick-slide a:hover:after{
		opacity:1;
		margin-top:-0.5em;
	}
	.topic-dots .slick-dots {
		text-align: center;
	}
	.topic-dots .slick-dots li {
		display: inline-block;
	}
	.topic-dots .slick-dots button {
		display: block;
		width: 10px;
		height: 10px;
		margin: 6px;
		font-size: 0;
		padding: 0;
		border: 0;
		outline: none;
		cursor: pointer;
		background: var(--d-gray);
		border-radius: 50%;
	}
	.progress_bar {
		width: 100%;
		background: var(--d-gray);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.progress_bar .bar {
		width: 0%;
		height: 4px;
		background: var(--cl-red);
	}
	
	.topic-dots .slick-dots .slick-active button {
		background: var(--cl-red);
	}
	
}

#news {
	
	
}

/* -----------------------------
	#site
--------------------------------- */

#site {
	padding-top: 0!important;
	padding-bottom: 0px!important;
	
	
	h2 {
		/* fonts */
		font-family: var(--garamond);
		font-weight: var(--f-regular);
		font-size  : var(--subt-size);
		/*layout*/
		text-align: center;
		margin-bottom: 40px;
		line-height: 1;
		
		span{
			border-bottom: solid 1px var(--l-black);
		}
	}
	
	ul {
		display: flex;
		justify-content: space-around;
		
		&.portal {
			margin-bottom: 60px;
			column-gap: 50px;
		}
		&.service_list {
			margin-bottom: 60px;
			column-gap: 50px;
		}
	}
	
	
	ul li {
		width: calc(100%/3)!important;
	}
	
	ul.service_list li {
		width: calc(100%/3)!important;
		margin: 0 auto 25px;
	}
	
	ul li figcaption {
		padding: 10px;
		color : var(--l-black);
		font-size:var(--bodytext);
		font-weight: var(--f-dmbold);
	}
	ul li figcaption mark {
		background: none;
		color: var(--cl-red);
		font-weight: var(--f-hvbold);
		font-size : 110%;
	}
	ul li img {
		width: 100%;
		height: auto;
	}
	
	ul li a {
		border: solid 3px var(--d-gray);
		height: 100%;
		position:relative;
		display: block;
		border-radius: 9px;
		background-color: #fff;
		box-shadow: -5px -5px 10px 0px rgba(0, 0, 0, 0.1), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
	}
	ul li a:before{
		border-radius: 6px;
		content:"";
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		z-index:2;
		background:var(--d-black);
		opacity:0;
		transition:0.3s;
	}
	ul li a:after{
		border-radius: 6px;
		content:"特設サイトへ";
		display:block;
		color:#fff;
		line-height:48px;
		width:180px;
		border:solid 1px #fff;
		border-radius:5px;
		text-align:center;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-1em;
		margin-left:-90px;
		opacity:0;
		z-index:3;
		transition:0.3s;
		font-weight:bold;
		letter-spacing:0.2em;
	}
	ul li a:hover:before{
		opacity:0.5;
	}
	ul li a:hover:after{
		opacity:1;
		margin-top:-1.5em;
	}
	
	@media (max-width: 800px) {
		ul li {
			margin: 0 10px;
		}
	}
	
	@media (max-width: 640px) {
		padding-bottom: 40px!important;
		
		ul {
			display: block;
		}
		
		ul li {
			margin-bottom: 35px;
			width: calc(100%/1)!important;
		}
		ul.service_list li {
			width: calc(70%/1)!important;
			margin: 0 auto 35px;
		}
		
		ul.portal li figure {
			display: grid;
			grid-template-columns: 1fr 1.5fr;
			grid-template-rows: subgrid;
			grid-column-gap: 20px;
		}
		ul li figcaption {
			place-content: center;
		}
	}
	
}

/* -----------------------------
	#links
--------------------------------- */

#links {
	border-top: dotted 1px var(--l-black);
	
	h2 {
		/* fonts */
		font-family: var(--garamond);
		font-weight: var(--f-regular);
		font-size  : var(--linkt-size);
		/*layout*/
		text-align: center;
		margin-bottom: -20px;
		line-height: 1;
		
		span{
			border-bottom: solid 1px var(--l-black);
		}
	}
	
	ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 60px;
	}

	ul li {
		width: calc(25% - 40px);
		margin: 0 20px;
		overflow: hidden;
		position: relative;
	}

	ul li a:after {
		border: solid 1px var(--d-gray);content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
	}
	
	ul li img {
		width: 100%;
		height: auto;
	}
	
	ul li:hover img{
  		transform:scale(1.05,1.05);
		transition:0.1s all;
	}
	
	@media (max-width: 1000px) {
	
		ul {
			margin: 60px 0px;
		}
		ul li {
			width: calc(25% - 40px);
			margin: 0 10px 40px;
		}
	}
	
	@media (max-width: 800px) {
		ul li {
			width: calc(33% - 40px);
			margin: 0 20px 20px;
		}
	}
	
	@media (max-width: 640px) {
		ul li {
			width: calc(50% - 40px);
			margin: 0 20px 40px;
		}
	}
}