@charset "UTF-8";

main[class*=_withyou] {
	font-family: "Yu Gothic", YuGothic, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", Verdana, メイリオ, Meiryo, sans-serif;
}
main[class*=_withyou] img { width: 100%;}
main[class*=_withyou] .inner {
	margin: 0 auto;
	width: calc(100% - (100vw / (1366 / 220)));
	max-width: 1120px;
}
main[class*=_withyou] .main-wrap .copy {
	width: 480px;
	margin: 3rem auto 2rem;
}
main[class*=_withyou] .main-wrap .lead {
	font-size: clamp(1rem, 0.9054rem + 0.2523vw, 1.25rem);
	line-height: 1.75;
	text-align: center;
}
main[class*=_withyou] .course {
	background: url(../img/libs/bg01.png);
	margin: 5rem auto 0;
	padding: 5rem 0;
}
main[class*=_withyou] .course .sec-title {
	color: #000;
	font-size: clamp(1.375rem, 1.1858rem + 0.5045vw, 1.875rem);
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
}
main[class*=_withyou] .course ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	width: 520px;
}
main[class*=_withyou] .course ul li {
	margin: 2em 0 0;
	text-align: center;
	width: calc(100% / 4);
}
main[class*=_withyou] .course ul li span {
	display: block;
	font-size: clamp(0.875rem, 0.7804rem + 0.2523vw, 1.125rem);
	font-weight: bold;
	letter-spacing: 2px;
	margin-top: .5rem;
	text-align: center;
}
main[class*=_withyou] .course ul li figure {
	width: 65%;
	margin: auto;
}
main[class*=_withyou] .course ul li span.cl1 { color: #389fd9;}
main[class*=_withyou] .course ul li span.cl2 { color: #ef939e;}
main[class*=_withyou] .course ul li span.cl3 { color: #8e99a0;}
main[class*=_withyou] .course ul li span.cl4 { color: #cea95b;}
main[class*=_withyou] .course ul li span.cl5 { color: #96c38d;}
main[class*=_withyou] .course ul li span.cl6 { color: #f7b756;}
main[class*=_withyou] .course ul li span.cl7 { color: #bd81b5;}
main[class*=_withyou] .job {
	background-color: #fef9f5;
	padding: 5rem 0;
}
main[class*=_withyou] .job .inner {
	background: #ffffff;
	box-sizing: border-box;
	padding: 5rem;
	position: relative;
}
main[class*=_withyou] .job h3 {
	width: 610px;
	margin: 0 auto 3rem;
}
main[class*=_withyou] .job .thumb {
	position: absolute;
	right: -5%;
	top: -.5%;
	width: 230px;
	height: 22px;
}
main[class*=_withyou] .job .anchor {
	padding-bottom: 50px;
}
main[class*=_withyou] .job .color-01 { color: #4398cd;}
main[class*=_withyou] .job .gradation-01 { background-color: #4398cd;}
main[class*=_withyou] .job .color-02 { color: #dc5973;}
main[class*=_withyou] .job .gradation-02 { background-color: #dc5973;}
main[class*=_withyou] .job .color-03 { color: #778287;}
main[class*=_withyou] .job .gradation-03 { background-color: #778287;}
main[class*=_withyou] .job .color-04 { color: #ba8718;}
main[class*=_withyou] .job .gradation-04 { background-color: #ba8718;}
main[class*=_withyou] .job .color-05 { color: #56a45e;}
main[class*=_withyou] .job .gradation-05 { background-color: #56a45e;}
main[class*=_withyou] .job .color-06 { color: #e88d24;}
main[class*=_withyou] .job .gradation-06 { background-color: #e88d24;}
main[class*=_withyou] .job .color-07 { color: #9d478e;}
main[class*=_withyou] .job .gradation-07 { background-color: #9d478e;}

main[class*=_withyou] .job .page-nav {
	display: flex;
	justify-content: space-between;
}
	main[class*=_withyou] .job .page-nav li {
		width: calc(100% / 7 - 10px);
	}
main[class*=_withyou] .job .headline {
	background-size: auto 85%;
	background-position: right 5% bottom;
	background-repeat: no-repeat;
	position: relative;
}
	main[class*=_withyou] .job .headline::after {
		content: "";
		position: absolute;
		left: 30px;
		bottom: -20px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 26.0px 15px 0 15px;
	}
	main[class*=_withyou] .job .headline h4 {
		color: #fff;
		font-size: 28px;
		line-height: 2.5;
		padding-left: 4rem;
		position: relative;
		background-repeat: no-repeat;
		background-size: 32px 32px;
		background-position: left 20px center;
	}
	main[class*=_withyou] .job .headline.gradation-01 h4 {
		background-image: url(../img/withyou/icon-01.svg);}
	main[class*=_withyou] .job .headline.gradation-02 h4 {
		background-image: url(../img/withyou/icon-02.svg);}
	main[class*=_withyou] .job .headline.gradation-03 h4 {
		background-image: url(../img/withyou/icon-03.svg);}
	main[class*=_withyou] .job .headline.gradation-04 h4 {
		background-image: url(../img/withyou/icon-04.svg);}
	main[class*=_withyou] .job .headline.gradation-05 h4 {
		background-size: 52px 52px;
		background-image: url(../img/withyou/icon-05.svg);
		padding-left: 5.5rem;
	}
	main[class*=_withyou] .job .headline.gradation-06 h4 {
		background-image: url(../img/withyou/icon-06.svg);}
	main[class*=_withyou] .job .headline.gradation-07 h4 {
		background-image: url(../img/withyou/icon-07.svg);}
	main[class*=_withyou] .job .headline.gradation-01 {
		background-image: url(../img/home/course_headline_01-2.svg);}
		main[class*=_withyou] .job .headline.gradation-01::after {
			border-color: #4398cd transparent transparent transparent;}
	main[class*=_withyou] .job .headline.gradation-02 {
		background-image: url(../img/home/course_headline_02-2.svg);}
		main[class*=_withyou] .job .headline.gradation-02::after {
			border-color: #dc5973 transparent transparent transparent;}
	main[class*=_withyou] .job .headline.gradation-03 {
		background-size: auto 80%;
		background-image: url(../img/home/course_headline_03-2.svg);}
		main[class*=_withyou] .job .headline.gradation-03::after {
			border-color: #778287 transparent transparent transparent;}
	main[class*=_withyou] .job .headline.gradation-04 {
		background-size: auto 70%;
		background-image: url(../img/withyou/course_headline_04.svg);}
		main[class*=_withyou] .job .headline.gradation-04::after {
			border-color: #ba8718 transparent transparent transparent;}
	main[class*=_withyou] .job .headline.gradation-05 {
		background-size: auto 75%;
		background-image: url(../img/home/course_headline_05-2.svg);}
		main[class*=_withyou] .job .headline.gradation-05::after {
			border-color: #56a45e transparent transparent transparent;}
	main[class*=_withyou] .job .headline.gradation-06 {
		background-size: auto 70%;
		background-image: url(../img/home/course_headline_06-2.svg);}
		main[class*=_withyou] .job .headline.gradation-06::after {
			border-color: #e88d24 transparent transparent transparent;}
	main[class*=_withyou] .job .headline.gradation-07 {
		background-size: auto 70%;
		background-image: url(../img/home/course_headline_07-2.svg);}
		main[class*=_withyou] .job .headline.gradation-07::after {
			border-color: #9d478e transparent transparent transparent;}
	main[class*=_withyou] .job .job_box {
	background-image: url(../img/withyou/withyou-job-bg.jpg);
	background-size: 80px 80px;
	background-repeat: repeat;
	border: 2px solid #dddddd;
	border-radius: 10px;
	box-sizing: border-box;
	margin-top: 35px;
	padding: 20px;
}
	main[class*=_withyou] .job .job_box .lead {
		font-size: 26px;
		font-weight: 600;
		line-height: 1.5;
	}
		main[class*=_withyou] .job .job_box .lead span {
			background:linear-gradient(transparent 75%, #fff200 75%);
		}
	main[class*=_withyou] .job .job_box .grid-wrapper {
		display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
	}
		main[class*=_withyou] .job .job_box .grid_box {
			margin-top: 25px;
		}
		main[class*=_withyou] .job .job_box .grid_box .box_head {
			border-radius: 5px;
			color: #fff;
			font-size: 20px;
			font-weight: 600;
			line-height: 1.75;
			margin-bottom: 15px;
			padding: 0 0 0 3rem;
			position: relative;
		}
			main[class*=_withyou] .job .job_box .grid_box .box_head::before {
				content: "";
				position: absolute;
				left: 15px;
				top: -3px;
				bottom: 0;
				margin: auto;
				width: 22px;
				height: 22px;
				background: url(../img/withyou/icon-star.svg) no-repeat left center/contain;
			}
			main[class*=_withyou] .job .job_box .grid_box .box_head.icon02::before {
				background: url(../img/withyou/icon-smile.svg) no-repeat left center/contain;}
			main[class*=_withyou] .job .job_box .grid_box .box_head.icon03::before {
				background: url(../img/withyou/icon-job.svg) no-repeat left center/contain;}
			main[class*=_withyou] .job .job_box .grid_box .box_head span { color: #fff200;}
		main[class*=_withyou] .job .job_box .grid_box ul li {
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			line-height: 1.5;
			margin-top: 10px;
		}
			main[class*=_withyou] .job .job_box .grid_box ul li span {
				display: block;
				width: calc(100% - 30px);
			}
			main[class*=_withyou] .job .job_box .grid_box ul li span:first-child {
				width: 22px;
				height: 22px;
				line-height: 1;
			}
			main[class*=_withyou] .job .job_box .grid_box ul li small {
				font-size: 80%;
			}
	main[class*=_withyou] .job .job_box .course_box {
		background: #eefaff;
		margin-top: 2rem;
		padding: 20px;
	}
		main[class*=_withyou] .job .job_box .course_box.b02 { background: #fff5f8;}
		main[class*=_withyou] .job .job_box .course_box.b03 { background: #e5e5e5;}
		main[class*=_withyou] .job .job_box .course_box.b04 { background: #f9ecde;}
		main[class*=_withyou] .job .job_box .course_box.b05 { background: #eaf9ea;}
		main[class*=_withyou] .job .job_box .course_box.b06 { background: #fff6ee;}
		main[class*=_withyou] .job .job_box .course_box.b07 { background: #f7edf7;}
		main[class*=_withyou] .job .job_box .course_box h5 {
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 1.5rem;
			position: relative;
		}
			main[class*=_withyou] .job .job_box .course_box h5::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 100%;
				height: 1px;
				background: #4398cd;
			}
				main[class*=_withyou] .job .job_box .course_box.b02 h5::before { background: #dc5973;}
				main[class*=_withyou] .job .job_box .course_box.b03 h5::before { background: #778287;}
				main[class*=_withyou] .job .job_box .course_box.b04 h5::before { background: #ba8718;}
				main[class*=_withyou] .job .job_box .course_box.b05 h5::before { background: #56a45e;}
				main[class*=_withyou] .job .job_box .course_box.b06 h5::before { background: #e88d24;}
				main[class*=_withyou] .job .job_box .course_box.b07 h5::before { background: #9d478e;}
			main[class*=_withyou] .job .job_box .course_box h5 span {
				background: #eefaff;
				padding-right: 1rem;
				position: relative;
			}
				main[class*=_withyou] .job .job_box .course_box.b02 h5 span { background: #fff5f8;}
				main[class*=_withyou] .job .job_box .course_box.b03 h5 span { background: #e5e5e5;}
				main[class*=_withyou] .job .job_box .course_box.b04 h5 span { background: #f9ecde;}
				main[class*=_withyou] .job .job_box .course_box.b05 h5 span { background: #eaf9ea;}
				main[class*=_withyou] .job .job_box .course_box.b06 h5 span { background: #fff6ee;}
				main[class*=_withyou] .job .job_box .course_box.b07 h5 span { background: #f7edf7;}
		main[class*=_withyou] .job .job_box .course_box ul {
			align-items: flex-end;
			display: flex;
			justify-content: center;
			margin: 0 -10px;
		}
			main[class*=_withyou] .job .job_box .course_box ul li {
				margin: 0 10px;
				padding-bottom: 15px;
				position: relative;
				width: calc(100% / 4 - 20px);
			}
			main[class*=_withyou] .job .job_box .course_box ul li span {
				color: #fff;
				display: block;
				font-size: 14px;
				font-weight: 600;
				line-height: 1.25;
				padding: 5px 8px;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
			}
			main[class*=_withyou] .job .job_box .course_box ul a:hover span {
				opacity: 1;}
		main[class*=_withyou] .job .job_box .course_box .button {
			background: #fff;
			border: 1px solid #0080cb;
			color: #0080cb;
			display: block;
			font-size: 16px;
			font-weight: 600;
			max-width: 420px;
			margin: 1.5rem auto 0;
			padding: 1rem;
			text-align: center;
		}
			main[class*=_withyou] .job .job_box .course_box .button.b02 {
				border-color: #dc5973;
				color: #dc5973;
			}
			main[class*=_withyou] .job .job_box .course_box .button.b03 {
				border-color: #778287;
				color: #778287;
			}
			main[class*=_withyou] .job .job_box .course_box .button.b04 {
				border-color: #ba8718;
				color: #ba8718;
			}
			main[class*=_withyou] .job .job_box .course_box .button.b05 {
				border-color: #56a45e;
				color: #56a45e;
			}
			main[class*=_withyou] .job .job_box .course_box .button.b06 {
				border-color: #e88d24;
				color: #e88d24;
			}
			main[class*=_withyou] .job .job_box .course_box .button.b07 {
				border-color: #9d478e;
				color: #9d478e;
			}
		main[class*=_withyou] .job .job_box .course_box .button:hover {
			opacity: .7;
		}
@media only screen and (max-width: 769px) {
	main[class*=_withyou] {
		margin-top: 50px;
	}
	main[class*=_withyou] .main-wrap h2 {
		margin: 0 calc(50% - 50vw);
		width: 100vw;
	}
	main[class*=_withyou] .main-wrap .copy {
		max-width: 480px;
		margin: 1.5rem auto 1rem;
		width: 100%;
	}
	main[class*=_withyou] .course {
		margin: 3rem auto 0;
		padding: 2rem 0 3rem;
	}
	main[class*=_withyou] .course .inner {
		width: 95%;
	}
	main[class*=_withyou] .course ul {
		width: 100%;
	}
	main[class*=_withyou] .course ul li span {
		letter-spacing: 1px;
	}
	main[class*=_withyou] .job {
		padding: 3rem 0;
	}
	main[class*=_withyou] .job .inner {
		padding: 15% 2.5% 5%;
    width: 95%;
	}
	main[class*=_withyou] .job h3 {
		margin: 0 auto 2rem;
		width: 100%;
	}
	main[class*=_withyou] .job .thumb {
		width: 30%;
    height: auto;
		right: -10px;
    top: -15px;
	}
	main[class*=_withyou] .job .anchor {
		padding-bottom: 30px;
	}

	main[class*=_withyou] .job .page-nav {
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 -5px;
	}
	main[class*=_withyou] .job .page-nav li {
		margin: 0 5px 10px;
		width: calc(100% / 3 - 10px);
	}
	main[class*=_withyou] .job .headline::after {
		bottom: -19px;
		border-width: 20px 15px 0 15px;
	}
	main[class*=_withyou] .job .headline h4 {
		font-size: 22px;
		line-height: 2;
		padding-left: 3rem;
		background-size: 28px 28px;
		background-position: left 10px center;
	}
		main[class*=_withyou] .job .headline.gradation-04 {
			background-size: auto 55%;
		}
		main[class*=_withyou] .job .headline.gradation-05 h4 {
			background-size: 42px 42px;
			padding-left: 3.5rem;
		}

	main[class*=_withyou] .job .job_box {
		padding: 5% 2.5%;
	}
	main[class*=_withyou] .job .job_box .lead {
		font-size: 20px;
		margin-bottom: 1rem;
	}
	main[class*=_withyou] .job .job_box .grid-wrapper {
		grid-template-columns: repeat(1, 1fr);
		gap: 1.5rem;
	}
		main[class*=_withyou] .job .job_box .grid-wrapper .grid {
			display: grid;
			gap: 1.5rem;
		}
		main[class*=_withyou] .job .job_box .grid_box {
			margin-top: 0;
		}
	main[class*=_withyou] .job .job_box .course_box {
		margin-top: 1rem;
		padding: 5% 2.5%;
	}
		main[class*=_withyou] .job .job_box .course_box h5 {
			font-size: 18px;
			line-height: 1.25;
			margin-bottom: .75rem;
		}
			main[class*=_withyou] .job .job_box .course_box h5::before {
				content: none;
			}
		main[class*=_withyou] .job .job_box .course_box ul {
			flex-wrap: wrap;
			margin: 0 -5px;
		}
		main[class*=_withyou] .job .job_box .course_box ul li {
			margin: 0 5px;
			width: calc(100% / 2 - 10px);
		}
			main[class*=_withyou] .job .job_box .course_box ul li:nth-child(n+3){
				margin-top: 10px;
			}
			main[class*=_withyou] .job .job_box .course_box ul li span {
				font-size: 12px;
				padding: 5px 5px;
			}
}


#withyou .inner {
	max-width: 1000px;
	margin: auto;
}
#withyou img {
	width: 100%;
}
@media only screen and (max-width: 769px) {
	#withyou .inner {
		width: 90%;
	}
}

/* 高度専門士 */
#withyou.visual-header h1.withyou1 {
	color: #38a6c3;}
#withyou.visual-header h1.withyou1 span {
	color: #ff0000;}

#withyou .withyou1 .lead {
	display: flex;
	justify-content: space-between;
	margin: 8% auto;
}
#withyou .withyou1 .lead p {
	color: #000;
	font-size: 16px;
	line-height: 1.75;
	width: 48%;
}
#withyou .withyou1 .lead p.catch{
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	width: 100%;
}
#withyou .withyou1 .lead p.catch span {
	background: linear-gradient(transparent 70%, rgba(240, 131, 0, 0.3) 70%);
}
#withyou .withyou1 .lead figure {
	width: 50%;
}

#withyou .withyou1 section {
	margin-bottom: 80px;
}
#withyou .withyou1 section .ttl {
	color: #38a6c3;
	font-weight: bold;
	font-size: 90px;
	font-style: italic;
	margin-bottom: 30px;
}
#withyou .withyou1 section .ttl span {
	border-bottom: 1px solid #38a6c3;
	display: inline-block;
	font-size: 30px;
	margin-left: 20px;
	padding-bottom: 5px;
	width: calc(100% - 75px);
	vertical-align: middle;
}
#withyou .withyou1 section .head {
	background: linear-gradient(90deg,#e50027, #fff);
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 30px;
	padding: 10px 15px;
	-webkit-transform: skew(-15deg);
	transform: skew(-15deg);
}
#withyou .withyou1 section .flex-box {
	display: flex;
	justify-content: space-between;
}
#withyou .withyou1 section .flex-box p {
	color: #000;
	font-size: 16px;
	line-height: 1.75;
	width: 48%;
}
#withyou .withyou1 section .flex-box figure {
	width: 50%;
}
#withyou .withyou1 section .flex-box figure small {
	color: #000;
	display: block;
	font-size: 10px;
	margin-top: 10px;
	text-align: center;
}
#withyou .withyou1 section .sec01 {
	margin-top: 20px;
}
#withyou .withyou1 section .sec01 p {
	color: #38a6c3;
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	margin-bottom: 10px;
}
#withyou .withyou1 section .sec01 figure {
	border: 1px solid #38a6c3;
	box-sizing: border-box;
	padding: 30px;
	text-align: center;
}
#withyou .withyou1 section .sec01 figure img {
	max-width: 750px;
}

#withyou .withyou1 .sec02 .flex-box {
	align-items: center;
}
#withyou .withyou1 .sec02 .flex-box figure {
	width: 43%;
}
#withyou .withyou1 .sec02 .flex-box table {
	background-color: #eeeeef;
	border-collapse: collapse;
	width: 55%;
}
#withyou .withyou1 .sec02 .flex-box table thead th {
	box-sizing: border-box;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	padding: 1em;
	width: 40%;
}
#withyou .withyou1 .sec02 .flex-box table thead th:first-child {
	width: 20%;}
#withyou .withyou1 .sec02 .flex-box table .bg-color01 {
	background-color: #e95513;}
#withyou .withyou1 .sec02 .flex-box table .bg-color02 {
	background-color: #b4b4b5;}
#withyou .withyou1 .sec02 .flex-box table .bg-color03 {
	background-color: #ffffff;}
#withyou .withyou1 .sec02 .flex-box table .bg-color04 {
	background-color: #fdebd1;}
#withyou .withyou1 .sec02 .flex-box table .bg-color05 {
	background-color: #e8d0be;}
#withyou .withyou1 .sec02 .flex-box table .bg-color06 {
	background-color: #c8c9ca;}
#withyou .withyou1 .sec02 .flex-box table tbody th {
	box-sizing: border-box;
	font-size: 14px;
	font-weight: normal;
	padding: 1em;
	vertical-align: middle;
}
#withyou .withyou1 .sec02 .flex-box table tbody td {
	box-sizing: border-box;
	font-size: 12px;
	line-height: 15px;
	padding: 1em;
	text-align: center;
	vertical-align: middle;
}


#withyou .withyou1 .sec03 .text {
	color: #000;
	font-size: 16px;
	line-height: 1.75;
}
#withyou .withyou1 .sec03 .flex-box {
	margin-top: 20px;}
#withyou .withyou1 .sec03 .flex-box figure.graph1 {
	width: 38%;}
#withyou .withyou1 .sec03 .flex-box figure.graph2 {
	width: 60%;}
#withyou .withyou1 .sec03 .flex-box figure.graph2 small {
	font-size: 12px;
	margin-top: 5px;
	text-align: left;
}

#withyou .withyou1 .sec04 .txt-box .qa {
	font-family: "Hiragino Kaku Gothic ProN";
	font-size: 25px;
	font-style: italic;
	line-height: 1.5;
	width: 100%;
}
#withyou .withyou1 .sec04 .txt-box .qa span {
	font-size: 35px;
	font-weight: bold;
	margin-right: 10px;
	vertical-align: sub;
}
#withyou .withyou1 .sec04 .txt-box p {
	width: 100%;
}
#withyou .withyou1 .sec04 .box1 {
	margin-bottom: 30px;}
#withyou .withyou1 .sec04 .box1 .txt-box {
	width: 50%;}
#withyou .withyou1 .sec04 .box1 figure {
	width: 48%;}
#withyou .withyou1 .sec04 .box1 .txt-box .qa {
	color: #e50012;}
#withyou .withyou1 .sec04 .box2 .txt-box {
	width: 58%;}
#withyou .withyou1 .sec04 .box2 figure {
	width: 40%;}
#withyou .withyou1 .sec04 .box2 figcaption {
	font-size: 14px;
	margin-top: 1em;
	text-align: right;
}
#withyou .withyou1 .sec04 .box2 .txt-box .qa {
	color: #38a6c3;}

#withyou .withyou1 .sec05 {
	background-color: #fdebd1;
	margin: 0 calc(50% - 50vw);
	padding: 40px 0 60px;
	width: 100vw;
}
#withyou .withyou1 .sec05 .ttl {
	color: #f08300;
	font-size: 75px;
	max-width: 1000px;
	margin: 0 auto 30px;
}
#withyou .withyou1 .sec05 .ttl span {
	border-color: #f08300;
	width: calc(100% - 95px);
}
#withyou .withyou1 .sec05 ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
	max-width: 1000px;
	margin: auto;
}
#withyou .withyou1 .sec05 ul a {
	background: #000;
	color: #fff;
	display: block;
	font-size: 18px;
	font-weight: bold;
	padding: .75rem;
	position: relative;
}
#withyou .withyou1 .sec05 ul a.c1 { background: #38a1db;}
#withyou .withyou1 .sec05 ul a.c2 { background: #ea5c77;}
#withyou .withyou1 .sec05 ul a.c3 { background: #8D9AA2;}
#withyou .withyou1 .sec05 ul a:hover {
	opacity: .7;}
#withyou .withyou1 .sec05 ul a::after {
 position: absolute;
 content: "";
 border-top: solid 2px #fff;
 border-right: solid 2px #fff;
 width: 10px;
 height: 10px;
 top: 0;
 bottom: 0;
 right: 1rem;
 margin: auto;
 transform: rotate(45deg);
 transition: transform .3s ease;
}

@media only screen and (max-width: 769px) {
	#withyou .withyou1 .lead {
		display: block;
		margin: 10% auto 15%;
	}
	#withyou .withyou1 .lead p {
		font-size: 14px;
		width: 100%;
	}
	#withyou .withyou1 .lead p.catch {
		font-size: 22px;
		line-height: 1.55;
	}
	#withyou .withyou1 .lead figure {
		margin-top: 5%;
		width: 100%;
	}

	#withyou .withyou1 section {
		margin-bottom: 50px;
	}
	#withyou .withyou1 section .ttl {
		font-size: 40px;
		margin-bottom: 15px;
	}
	#withyou .withyou1 section .ttl span {
		font-size: 20px;
		margin-left: 5px;
    width: calc(100% - 45px);
	}
	#withyou .withyou1 section .head {
		font-size: 18px;
		margin-bottom: 10px;
	}
	#withyou .withyou1 section .flex-box {
		display: block;
	}
	#withyou .withyou1 section .flex-box p {
		font-size: 14px;
		width: 100%;
	}
	#withyou .withyou1 section .flex-box figure {
		margin-top: 15px;
		width: 100%;
	}
	#withyou .withyou1 section .sec01 {
		margin-top: 30px;
	}
	#withyou .withyou1 section .sec01 p {
		font-size: 16px;
	}
	#withyou .withyou1 section .sec01 figure {
		padding: 15px;
	}

	#withyou .withyou1 .sec02 .flex-box table {
		width: 100%;
	}
	#withyou .withyou1 .sec02 .flex-box figure {
		width: 100%;
	}

	#withyou .withyou1 .sec03 .text {
		font-size: 14px;
	}
	#withyou .withyou1 .sec03 .flex-box figure.graph1 {
		width: 100%;
	}
	#withyou .withyou1 .sec03 .flex-box figure.graph2 {
		width: 100%;
	}

	#withyou .withyou1 .sec04 .txt-box .qa {
		font-size: 18px;
	}
	#withyou .withyou1 .sec04 .txt-box .qa span {
		font-size: 25px;
	}
	#withyou .withyou1 .sec04 .box1 .txt-box {
		width: 100%;
	}
	#withyou .withyou1 .sec04 .box1 figure {
		width: 100%;
	}
	#withyou .withyou1 .sec04 .box2 .txt-box {
		width: 100%;
	}
	#withyou .withyou1 .sec04 .box2 figure{
		width: 100%;
	}
	#withyou .withyou1 .sec04 .box2 figcaption {
		font-size: 13px;
	}

	#withyou .withyou1 .sec05 .ttl {
		font-size: 30px;
		margin-bottom: 20px;
		width: 90%;
	}
	#withyou .withyou1 .sec05 .ttl span {
		font-size: 18px;
		width: calc(100% - 40px);
	}
	#withyou .withyou1 .sec05 ul {
    grid-template-columns: repeat(1, 1fr);
		gap: 1rem;
		width: 85%;
    margin: 0 auto;
	}
	#withyou .withyou1 .sec05 ul a {
		font-size: 15px;
		padding: .5rem;
	}
	#withyou .withyou1 .sec05 ul a::after {
		width: 8px;
    height: 8px;
	}
}

/* 『超』実践教育 */
#withyou.visual-header h1.withyou2 {
	color: #000;
	line-height: 1.5;
}
#withyou.visual-header h1.withyou2 span {
	color: #f08300;}
#withyou.visual-header h1.withyou2 span + span {
	color: #ff0000;}

#withyou .withyou2 p {
	color: #000;
}
#withyou .withyou2 section {
	margin: 8% auto;
}
#withyou .withyou2 section .head {
	background: linear-gradient(90deg,#2c81c5, #c072ab);
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 5px;
	margin-bottom: 30px;
	padding: 10px 15px;
	-webkit-transform: skew(-15deg);
	transform: skew(-15deg);
	text-align: center;
}
#withyou .withyou2 section .text {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.75;
	text-align: center;
}
#withyou .withyou2 section .text span {
	background:linear-gradient(transparent 70%, #ff6 70%);
}
#withyou .withyou2 section .ttl {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	padding: 5px 10px;
}
#withyou .withyou2 section .ttl.blue {
	background: #4398cd;}
#withyou .withyou2 section .ttl.red {
	background: #dc5973;}
#withyou .withyou2 section .ttl.black {
	background: #8c989f;}
#withyou .withyou2 section .ttl.brown {
	background: #c59f4d;}
#withyou .withyou2 section .ttl.green {
	background: #56a45e;}
#withyou .withyou2 section .ttl.yellow {
	background: #e88d24;}
#withyou .withyou2 section .ttl.purple {
	background: #9d478e;}

#withyou .withyou2 .sec01 .flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 50px;
}
#withyou .withyou2 .sec01 .flex-box .box {
	margin-bottom: 30px;
	width: 32%;
}
#withyou .withyou2 .sec01 .flex-box .box .text1 {
	font-size: 16px;
	line-height: 1.5;
	margin: 10px auto;
}
#withyou .withyou2 .sec01 .flex-box .box .text2 {
	font-size: 14px;
	line-height: 1.75;
}

#withyou .withyou2 .sec02 .ttl {
	margin: 30px auto 15px;
	text-align: center;
}
#withyou .withyou2 .sec02 .lead {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.55;
	margin-bottom: 20px;
	text-align: center;
}
#withyou .withyou2 .sec02 .block {
	background: url(../img/libs/bg01.png);
	padding: 30px;
}
#withyou .withyou2 .sec02 .flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 0;
	margin: auto;
	width: 80%;
}
#withyou .withyou2 .sec02 .flex-box li {
	margin: 0 20px;
	text-align: center;
	width: calc(100% / 5 - 40px);
}
#withyou .withyou2 .sec02 .flex-box li .company {
	font-size: 10px;
	margin: 5px auto;
}
#withyou .withyou2 .sec02 .flex-box li .name {
	font-size: clamp(0.8125rem, 0.6469rem + 0.4415vw, 1.25rem);
}
#withyou .withyou2 .sec02 .flex-box li .name span {
	font-size: 80%;
}
#withyou .withyou2 .sec02 .grid-box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
@media only screen and (max-width: 769px) {
	#withyou .withyou2 section {
		margin: 10% auto;
	}
	#withyou .withyou2 section .head {
		font-size: 18px;
    letter-spacing: 2px;
    margin: 0 auto 10px;
    padding: 10px 5px;
    width: 95%;
	}
	#withyou .withyou2 section .text {
		font-size: 14px;
	}
	#withyou .withyou2 section .ttl {
		font-size: 16px;}

	#withyou .withyou2 .sec01 .thumb {
		margin-bottom: 10px;
	}
	#withyou .withyou2 .sec01 .flex-box {
		margin-top: 20px;
	}
	#withyou .withyou2 .sec01 .flex-box .box {
		margin-bottom: 20px;
		width: 48%;
	}
	#withyou .withyou2 .sec01 .flex-box .box .text1 {
		margin: 5px auto;}
	#withyou .withyou2 .sec01 .flex-box .box .text2 {
		font-size: 11px;
    line-height: 1.5;
	}

	#withyou .withyou2 .sec02 .ttl {
		margin: 20px auto 10px;
	}
	#withyou .withyou2 .sec02 .block {
		padding: 5%;
	}
	#withyou .withyou2 .sec02 .lead {
		font-size: 13px;
		margin-bottom: 15px;
	}
	#withyou .withyou2 .sec02 .flex-box {
		gap: 10px 0;
		width: 100%;
	}
	#withyou .withyou2 .sec02 .flex-box li {
		margin: 0 5px;
		width: calc(100% / 3 - 10px);
	}
	#withyou .withyou2 .sec02 .grid-box {
		gap: .5rem;
		grid-template-columns: repeat(2, 1fr);
	}
}