@charset "UTF-8";
/* sp(320px) */

/*こんなお悩みはありませんか？*/
#onayami {
	background-color: #eaeef0;
}
#onayami ul {
	max-inline-size: 315px;
	margin-inline: auto;
}
#onayami li {
	margin-bottom: 1.5em;
}

/* そのまま放置すると… */
#hochi {
	background-image: url(../img/home/bg_hochi_sp.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: cover;
}
#hochi .hl {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	color: #fff;
}
#hochi ul {
	max-inline-size: 80%;
	margin-inline: auto;
}
#hochi li {
	display: grid;
	grid-template-columns: 18px auto;
	grid-template-rows: auto;
	column-gap: 1em;
	padding-block-end: 1em ;
	margin-block-end: 1em;
	border-block-end: 1px solid #c9d6dd;
	padding-inline: .5em;
}
#hochi li .txt {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	color: #fff;
}

/* そんな企業様に!! */
#sonna {
	padding-block-start: 2em;
}
#sonna .hli {
	max-inline-size: 756px;
	margin-inline: auto;
}

/* なぜ新人研修にChatGPT研修がセットになっているのか */
#why {
	background-color: #e7f1f6;
}
#why .hl {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
}
#why .lside {
	padding-block-end: 1.5em;
}
#why figure {
	max-inline-size: 400px;
	margin-inline: auto;
}
#why p span {
	font-weight: bold;
	background:linear-gradient(transparent 70%, #ffff00 30%);
}

/* 研修バンクで実現できる3つのこと */
#jitsugen .hl_top span.b {
	font-family: "Manrope", sans-serif;
	font-size: 40px;
	line-height: 1;
}
#jitsugen li {
	margin-block-end: 1em;
}
#jitsugen li figure {
	max-inline-size: 60%;
	margin-inline: auto;
}
#jitsugen li .ttl {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	margin-block-start: .8em;
}
#jitsugen li p {
	margin-block-start: 1.2em;
	inline-size: 90%;
	margin-inline: auto;
}
#jitsugen li p span {
	font-weight: bold;
	background:linear-gradient(transparent 70%, #ffff00 30%);
	color: #f92b48;
}

/* 研修バンクとは */
#about {
	background-color: #f7f7f7;
}
#about .enc .lside {
	padding-block-end: 1em;
}
#about .enc .lside .ttl {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
}
#about .enc .rside {
	padding-inline-start: 0;
}







@container (min-width: 480px) {
/* iphone6 */

/*こんなお悩みはありませんか？*/
#onayami ul {
	max-inline-size: 880px;
	margin-inline: auto;
}
#onayami li {
	flex-basis: calc(100%/3 - 1.4%);
}
#onayami li figure {
	max-inline-size: 252px;
	margin-inline: auto;
}

/* そのまま放置すると… */
#hochi {
	background-image: url(../img/home/bg_hochi.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: cover;
}
#hochi .hl {
	font-size: 20px;
}
#hochi ul {
	max-inline-size: 610px;
	margin-inline: auto;
}
#hochi li {
	grid-template-columns: 35px auto;
}
#hochi li .txt {
	font-size: 18px;
}

/* なぜ新人研修にChatGPT研修がセットになっているのか */
#why .hl {
	font-size: 20px;
}

/* 研修バンクで実現できる3つのこと */
#jitsugen .hl_top span.b {
	font-size: 55px;
}
#jitsugen li .ttl {
	font-size: 20px;
}

/* 研修バンクとは */
#about .enc .lside .ttl {
	font-size: 20px;
}



/* end of media query(iphone6) */	
}

@container (min-width: 620px) {
/* iphone6 */

#hochi .hl {
	font-size: 24px;
}
#hochi li {
	grid-template-columns: 35px auto;
}
#hochi li .txt {
	font-size: 20px;
}

/* なぜ新人研修にChatGPT研修がセットになっているのか */
#why .hl {
	font-size: 22px;
}
#why .lside {
	padding-block-end: 0;
}

/* 研修バンクで実現できる3つのこと */
#jitsugen .hl_top span.b {
	font-size: 50px;
}
#jitsugen li {
	flex-basis: calc(100%/3 - 4.0%);
	margin-block-end: 0;
}
#jitsugen li figure {
	max-inline-size: 100%;
}
#jitsugen li .ttl {
	font-size: clamp(18px, calc(1.125rem + ((1vw - 7.68px) * 3.0303)), 20px);
}
#jitsugen li p {
	inline-size: 100%;
}

/* 研修バンクとは */
#about .enc .lside .ttl {
	font-size: 22px;
}
#about .enc .rside {
	padding-inline-start: 6%;
}

/* end of media query(iphone6) */	
}



@container (min-width: 835px) {
/* pc */


/* そのまま放置すると… */
#hochi .hl {
	font-size: 30px;
}
#hochi li {
	grid-template-columns: 35px auto;
}
#hochi li .txt {
	font-size: 22px;
}

/* なぜ新人研修にChatGPT研修がセットになっているのか */
#why .hl {
	font-size: 26px;
}

/* 研修バンクで実現できる3つのこと */
#jitsugen .hl_top span.b {
	font-size: 60px;
}
#jitsugen li .ttl {
	font-size: 22px;
}

/* 研修バンクとは */
#about .enc .lside .ttl {
	font-size: 26px;
}








/* end of media query(pc) */
}