/* =========================================================
   contents.css : コンテンツ内で使用するCSS
   ヘッダー・フッター・フォームなど共通部分は base.css に記述
   ========================================================= */

/* cta
-------------------------------------------------------------- */
.cta{
	text-align: center;
	padding: 2.5em 4%;
	box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.16);
	position: relative;
	z-index: 600;
}
.bgColor {background-color: var(--color_main);}
.cta .txt{
	color: var(--color_main);
	font-size: var(--fs-xl);
	font-weight: bold;
	margin:0 0 0.2em 0;
	line-height: 1.3;
	margin-bottom: 0.4em;
}
.cta .txtPrimary {color: var(--color_primary);}
.bgColor .txt {color: #fff;}
@media screen and (min-width: 1367px) {
	.cta .btn{ font-size: 1.5vw; border-radius: 80px;}
	.cta .txt{ font-size: var(--fs-xl);}
}
@media screen and (max-width: 768px) {
	.cta .txt{ font-size:var(--fs-l); }
}


/* mv
-------------------------------------------------------------- */
.mv {
	text-align: center;
	position: relative;
	color: #fff;
	isolation: isolate;
	clip-path: inset(0 -100vw -100vh); /* 背景（::before）が上にはみ出さないよう上端のみ切り抜く */
}
/* 背景（旧 mvbg.svg をCSSで再現） */
.mv::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	aspect-ratio: 1440 / 2075;
	z-index: -1;
	background:
		radial-gradient(ellipse 41.3% 32.4% at 39% 73.5%, rgba(53,146,231,.84), rgba(53,146,231,0)),
		radial-gradient(ellipse 74.7% 25.5% at 82.4% 81.6%, rgba(0,116,238,1), rgba(0,116,238,0)),
		linear-gradient(158.2deg, #007af9, #0a80eb);
	clip-path: polygon(0 0, 100% 0, 100% 84.58%, 50% 100%, 0 84.58%);
}
.mv .inr {
	padding: 5% 5% 10%; 
	position: relative;
}
.mv .txt {
	z-index: 300;
	position: relative;
	max-width: 1300px;
	margin: 0 auto;
}
.mv .txt:before {
	background-image: url(../img/mv/mv1.svg);
	background-position: left;
	bottom: -11em;
    left: 0;
}
.mv .txt:after {
	background-image: url(../img/mv/mv2.svg);
	background-position: right;
	bottom: -11em;
    right: 0;
}
.mv .txt:before, .mv .txt:after {
	background-repeat: no-repeat;
	height: 100%;
	position: absolute;
	content: "";
	max-width: 320px;
    width: 100%;
    content: "";
	background-size: contain;
}
.mv h1 {
	font-size: var(--fs-xxl);
	border-bottom: double 10px #fff;
	font-weight: bold;
	line-height: 1.2;
	margin: 15px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.mv .line {
	display: inline-block;
	padding: 10px 0;
	border-bottom: double 10px #fff;
}
.mv p {
	font-size: var(--fs-m-l);
	font-weight: 400;
}
.mv .btn {font-size: var(--fs-l);}

.fadeIn{
	animation-name:fadeInAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeInAnime{
	from {opacity: 0;}
	to {opacity: 1;}
}

@media screen and (min-width: 1920px) {
	.mv h1 {font-size: 5.8em;}
	.mv p {font-size: 1.6em;}
}
@media screen and (max-width: 1920px) {
	.mv .txt:before {left: 0;}
	.mv .txt:after {
		right: 0;
		left: auto;
	}
	.mv .txt:before, .mv .txt:after {
		width: 21vw;
	}
	.mv p {font-size: 1.7vw;}
}
@media screen and (max-width: 1600px) {
	.mv h1 {font-size: 4em;}
}
@media screen and (max-width: 1366px) {
	.mv .txt:before, .mv .txt:after {
		width: 16vw;
	}
}
@media screen and (max-width: 1024px) {
	.mv .txt:before, .mv .txt:after {
		width: 27vw;
		bottom: -8em;
	}
	.mv h1 {font-size: 2.8em;}
}
@media screen and (max-width: 896px) {
	.mv .inr {padding: 5% 5% 16%;}
	.mv .txt:before, .mv .txt:after {bottom: -9em;}
	.mv h1 {font-size: 2em;}
	.mv .btn {font-size: var(--fs-m-l);}
	.mv p {
		margin-top: 0;
		font-size: var(--fs-m);
	}
}
@media screen and (max-width: 768px) {
	.mv .btn {font-size: 1.1em;}
}
@media screen and (max-width: 480px) {
	.mv .btn, .mv p {font-size: var(--fs-s);}
}

/* secNo1
-------------------------------------------------------------- */
.secNo1 {padding-bottom: 2%;}
.no1Area {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.secNo1 .hl1 {
	text-align: left;
	color: var(--color_primary);
	font-size: min(2.6vw,3em);
}
.no1Img {width: 86%;}
.secNo1 p{
	color: var(--color_gray-medium1);
	font-size: var(--fs-xxs);
	text-align: left;
}
.no1Area .txt{width: 62%;}
.secNo1 .img {width: 36%;}
.secNo1 .img img {box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.16);}
@media screen and (max-width: 1024px) {
	.secNo1 .hl1  {font-size: 2.2em;}
}
@media screen and (max-width: 896px) {
	.secNo1 .hl1  {
		text-align: center;
		font-size: var(--fs-l);
	}
	.no1Area .txt {
		width: 100%;
		text-align: center;
		margin-bottom: 2em;
	}
	.secNo1 .img {
		width: 100%;
		text-align: center;
	}
}


/* secNayami
-------------------------------------------------------------- */
.secNayami {
	text-align: center;
	padding-bottom: 2%;
	position: relative;
	z-index: 500;
}
.secNayami .inr {
	width: 960px;
	max-width: 100%;
}
.nayamiBg {
	background: url(../img/nayami/bg.jpg) center center / cover no-repeat;
	background-repeat: no-repeat;
	padding: 4em 0;
	position: relative;
	margin-bottom: 4em;
}
.nayamiBg:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
	bottom: calc(0% - 39px);
	border-style: solid;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
	border-top: 40px solid #323232;
	border-bottom: 0;
}
.secNayami .hl1 {color: #fff;}
.nayamiArea {
	display: flex;
	justify-content: space-around;
	text-align: center;
}
.nayamiArea .box {
	text-align: center;
	width: 30%;
}
.nayamiArea p {
	color: #fff;
	font-weight: bold;
}
.secNayami .ttl {
	font-size: var(--fs-xl);
	font-weight: bold;
	text-align: center;
	margin-bottom: 0;
}
.secNayami .ttl .block {
	display: block;
	font-size: 0.6em;
}
.secNayami .ttl .box {
	display: inline-block;
	margin-bottom: 0.2em;
	color: var(--color_main);
}
.secNayami .ttl span {
	display: inline-block;
}
.secNayami .ttl .bg {
	background-color: var(--color_main);
	color: #fff;
	font-size: 24px;
	padding: 0.25em 0.4em;
	margin: 0 0.2em;
	display: inline-block;
	vertical-align: super;
}
.secNayami p.sub {
	margin: 0.2em 0;
}
.secNayami .sub small {
	color: var(--color_gray-medium1);
	font-size: var(--fs-xxs);
}
@media screen and (max-width: 896px) {
	.secNayami .ttl {font-size: var(--fs-l);}
}
@media screen and (max-width: 480px) {
	.nayamiBg {padding: 4em 1em;}
	.nayamiBg:after {
		bottom: calc(0% - 24px);
		border-right: 30px solid transparent;
		border-left: 30px solid transparent;
		border-top: 24px solid #434446;
	}
	.nayamiArea {
		justify-content: center;
    	flex-wrap: wrap;
	}
	.nayamiArea .box {
		display: flex;
		align-items: center;
		text-align: left;
		margin-bottom: 1em;
		width: 100%;
	}

	.secNayami .ttl .bg {
		font-size: 16px;
	}
	.nayamiArea .img {
		margin-right: 1em;
	}
}


/* secFeature
-------------------------------------------------------------- */
.secFeature {
	background: var(--color_main) url(../img/feature/bg.png);
	position: relative;
	z-index: 400;
}
.secFeature:after {
	content: "";
	position: absolute;
	top: -2.8vw;
	left: -14vw;
	right: 0;
	width: 0;
	height: 0;
	border-width: 10vw 50vw 0 50vw;
	border-style: solid;
	border-color: #fff transparent transparent transparent;  
}
.secFeature .inr {padding-top: 8em;}
.secFeature .hl1 {color: #fff;}
.featureArea{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 4em 3em;
	margin-bottom: 2em;
	background-color: #fff;
	position: relative;
	box-shadow: 32px 32px 0 0 rgba(0, 0, 0, 0.2);
	margin-bottom: 4em;
}
.featureArea .box{
	width: 60%;
	margin: 0;
}
.featureArea .box .num{
	position: absolute;
	top: -1.4em;
	left: 1em;
	max-width: 210px;
}
.featureArea .box .hl2 {
	color: var(--color_main);
	font-size: var(--fs-l);
}
.featureArea picture{width:38%;}

@media screen and (max-width: 1024px) {
	.secFeature:after {
		left: -10vw;
		border-width: 12vw 60vw 0 60vw;
	}
}
@media screen and (max-width: 768px) {
	.featureArea .box,
	.featureArea picture{width:100%;}
	.featureArea .box .num{max-width: 84px;}
}
@media screen and (max-width: 468px) {
	.secFeature .inr {padding-top: 6em;}
	.secFeature:after {
		left: -10vw;
    	border-width: 14vw 60vw 0 60vw;
	}
}


/* secMenu
-------------------------------------------------------------- */
.secMenu {background-color: var(--color_blue-bright1);}
.menu { box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.16);}
.menu col:nth-child(1) { width: 15%;}
.menu col:nth-child(2) { width: 20%;}
.menu col:nth-child(3) { width: 15%;}
.menu thead {
	background-color: var(--color_blue-bright2);
	border-bottom: 2px solid var(--color_blue-medium1);
	font-weight: bold;
}
.menu tbody {background-color: #fff;}
.menu tbody tr {border-bottom: 1px solid #E8E8E8;}
.menu tbody th { width: auto; color: var(--color_main); font-weight: bold;}

@media screen and (max-width: 1320px) {
	.menu col:nth-child(1) { width: 18%;}
	.menu col:nth-child(2) { width: 25%;}
}
@media screen and (max-width: 896px) {
.menu, .menu tbody, .menu th, .menu td { display: block;}
.menu thead { display: none;}
.menu tr {
	display: flex;
	width: 100%;
	flex-flow: column wrap;
}
.menu tbody th {
	width: 100%;
	color: var(--color_primary);
	background-color: var(--color_blue-bright2);
	border-bottom: 2px solid var(--color_blue-medium1);
}
.menu tbody td { padding-bottom: 0;}
.menu tbody td:last-child {
	border-top: 1px solid var(--color_blue-bright2);
	margin-top: 1em;
	padding-bottom: 1em;
}
.menu tbody td:nth-child(2):before { font-weight: bold; content: "研修形式：";}
.menu tbody td:nth-child(3):before { font-weight: bold; content: "従業員数：";}
}


/* secFlow
-------------------------------------------------------------- */
.secFlow dl {
	display: flex;
	background-color: #fff;
	box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.16);
	padding: 3% 1%;
}
.secFlow dl > div {
	position: relative;
	box-sizing: border-box;
	width: 26%;
	position: relative;
	border-right: 2px solid var(--color_main);
	padding: 0 2% 0 3%;
}
.secFlow dl > div:after,
.secFlow dl > div:before {
	position: absolute;
	top: 50%;
	content: "";
}
.secFlow dl > div:before {
	right: -1em;
	width: 1em;
	border-bottom: 2px solid var(--color_main);
}
.secFlow dl > div:after {
	right: -1em;
	width: 0.6em;
	height: 0.6em;
	border-top: 2px solid var(--color_main);
	border-right: 2px solid var(--color_main);
	transform: rotate(45deg);
	margin-top: -0.27em;
}
.secFlow dl > div:first-child { width: 24%; padding-left: 2%;}
.secFlow dl > div:last-child { border-right: none;}
.secFlow dl > div:last-child:before,
.secFlow dl > div:last-child:after { display: none;}
.secFlow dt {
	font-size: var(--fs-l);
	font-weight: bold;
	vertical-align: middle;
}
.secFlow dt > small {
	display: block;
	font-size: 0.5em;
	background-color: var(--color_blue-bright2);
	padding: 0.2em 0.5em;
	margin-top: 0.2em;
}
.secFlow dd {
	display: list-item;
	list-style: disc;
	margin: 0.8em 0 0 1.6em;
}

@media screen and (max-width: 1320px) {
	.secFlow dt { font-size: var(--fs-m-l);}
}
@media screen and (max-width: 896px) {
	.secFlow dl { flex-flow: column nowrap;}
	.secFlow dl > div { background-color: var(--color_white);}
	.secFlow dl > div,
	.secFlow dl > div:first-child {
		width: 100%;
		border-right: none;
		padding: 2% 2% 4%;
	}
	.secFlow dl > div:before {
		top: 4.4em;
		right: auto;
		left: 3.6%;
		width: auto;
		height: 60%;
		border-bottom: none;
		border-left: 2px solid var(--color_main);
	}
	.secFlow dl > div:after {
		top: auto;
		right: auto;
		bottom: 0.1em;
		left: 3%;
		transform: rotate(135deg);
		margin-top: 0;
	}
	.secFlow dt > small { font-size: 0.75em;}
	.secFlow dd { margin-left: 3em;}
}

/* secFaq
-------------------------------------------------------------- */
.faqArea {
	display: flex;
	justify-content: space-between;
}
.faqArea dl {
	background-color: #fff;
	box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.16);
	width: 32%;
	padding: 2em 1em 1em;
	position: relative;
}
.faqArea dt {
	font-weight:  bold;
	font-size: var(--fs-m-l);
	margin-bottom: 1em;
}
.faqArea .num {
	position: absolute;
	top: -1em;
	left: 0.9em;
	max-width: 100px;
}
@media screen and (max-width: 896px) {
	.faqArea {display: block;}
	.faqArea dl {
		width: 100%;
		margin-bottom: 2.4em;
	}
}


/* Recommended
-------------------------------------------------------------- */
.secRecommended {background-color: var(--color_blue-bright1);}
.secRecommended .inr {
	background-color: #fff;
	box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.16);
	padding: 4em 2em;
}
.recommendedArea {
	display: flex;
	justify-content: space-between;
	text-align: center;
}
.recommendedArea .box {
	text-align: center;
	width: 30%;
	box-sizing: border-box;
}
.recommendedArea .box .img {
	max-width: 120px;
	margin: 0 auto;
}
.recommendedArea p {font-weight: bold;}
@media screen and (max-width: 768px) {
	.recommendedArea {
		flex-wrap: wrap;
		justify-content: center;
	}
	.secRecommended .inr {padding: 4em 2em;}
	.recommendedArea .box {
		display: flex;
		align-items: center;
		text-align: left;
		margin-bottom: 1em;
		width: 100%;
		padding: 0;
	}
	.recommendedArea .box .img {
		width: 100%;
		max-width: 120px;
		margin-right: 1em;
	}
	.recommendedArea p {width: 80%;}
	
}


/* Achievement
--------------------------------------------------------------- */
.secAchievement {background-color: var(--color_main);}
.secAchievement .inr {
	background-color: #fff;
	box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.16);
	padding: 4em;
	text-align: center;
}
.secAchievement .hl1 span {font-size: 1.36em;}
.secAchievement p{
	color: var(--color_gray-medium1);
	font-size: 0.78em;
	text-align: left;
}
@media screen and (max-width: 768px) {
	.secAchievement .inr {padding: 4em 2em;}
}
@media screen and (max-width: 480px) {
	.secAchievement .inr {padding: 4em 1em;}
	.secAchievement img {width: 250px;}
}


/* Consultant
--------------------------------------------------------------- */
.consulArea{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 2%;
}
.consulArea .box{width: 32%;}
.consulArea .box .img {position:relative;}
.consulArea .box picture {
	display: block;
	margin-bottom: 1.5em;
}
.consulArea .box picture img{ height:100%;}
.consulArea .box .txt{
	width: 48%;
	position: absolute;
	bottom: 0;
	right: 0;
	background: #fff no-repeat padding-box;
	color:var(--color_primary);
	padding: 2%;
	text-align: left;
}
.consulArea .box .txt p {
	margin: 0.2em 0;
}
.consulArea .box .txt .name{
	font-weight: bold;
	font-size: 16px;
}
.consulArea .box .txt .name:before {
	content: "";
    width: 9px;
    height: 9px;
    background: var(--color_main);
	border-radius: 100px;
    display: inline-block;
    margin-right: 4px;
}
.consulArea .box .txt small{
	font-size: 14px;
	color: var(--color_main);
	display: block;
}
.consulArea .hl2 {
	text-align: center;
	font-size: var(--fs-m-l);
}

@media screen and (min-width: 1367px) {
.consulArea .box picture img{
	display: block;
	width: 100%;
	height: 600px;
	object-fit: cover;
	object-position: 50% 0;
	margin: 0;
}
}
@media screen and (max-width: 1380px){
	.secConsultant .inr{ width: 100%; }
	.consulArea .box .txt p{ font-size:var(--fs-xxs);}
	.consulArea .box .txt p br{ display:none;}
}
@media screen and (max-width: 1024px){
	.consulArea .box .txt p{ font-size:unset;}
	.consulArea .box .txt p br{ display:block;}
}
@media screen and (max-width: 896px){
	.consulArea .box picture img{ height: auto;}
}
@media screen and (max-width: 768px) {
	.consulArea .box{
		width:100%;
		margin-bottom:1em;
	}
	.consulArea .box .txtBox p br{ display:none;}
}     
@media screen and (max-width: 380px) {
	.consulArea .box{ width:100%; }
}


/* secCompany
-------------------------------------------------------------- */
.secCompany {
	background-color: var(--color_gray-bright1);
}
.comtable {
	background-color: #fff;
}
.comtable tr {
	border-bottom: 1px solid #E8E8E8;
}
.comtable tr:last-child {
	border-bottom: none;
}
.comtable td table,
.comtable td th,
.comtable td td {
	border: none;
	padding: 0;
}
.comtable td table {display: inline-table; width: auto; margin-bottom: 1em;}
.comtable td table:last-child {margin-bottom: 0;}
.comtable td th {width: 8.5em; background-color: transparent;}
.comtable td th,
.comtable td td {padding: 0.1em 0;}
.comtable dl {margin: 0;}
.comtable dd {margin-bottom: 1em;}
.comtable dd:last-child {margin-bottom: 0;}
.comtable ul{
	padding-left:1.5em;
	margin:0;
}

@media screen and (max-width: 640px) {
	.comtable td .noBorder tr td:nth-child(2) {display: inline;}
	.comtable td th {
		width: auto;
		vertical-align: top;
	}
	.comtable td td + td {font-size: 0.88em;}
}
@media screen and (max-width: 480px) {
	.comtable td td {display: block;}
}