@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	キービジュアルの出し分け
--------------------------------------------------------------------------------------- */

.key-course-details.excel { background-image: url(../images/course/office/excel/key-image.jpg); }
.key-course-details.word { background-image: url(../images/course/office/word/key-image.jpg); background-position-y: 47%; }
.key-course-details.powerpoint { background-image: url(../images/course/office/powerpoint/key-image.jpg); background-position-y: 92%; }
.key-course-details.access { background-image: url(../images/course/office/access/key-image.jpg); background-position-y: 12%; }
.key-course-details.microsoft365 { background-image: url(../images/course/office/microsoft365/key-image.jpg); background-position-y: 78%; background-size: 102.333vw auto; }

.key-course-details.photoshop { background-image: url(../images/course/creative/photoshop/key-image.jpg); background-position: right -5.667vw; background-size: 78% auto; }
.key-course-details.illustrator { background-image: url(../images/course/creative/illustrator/key-image.jpg); background-position: right top; background-size: 68% auto; }
.key-course-details.photoshop-and-illustrator { background-image: url(../images/course/creative/photoshop-and-illustrator/key-image.jpg); background-position: 22.333vw 13%; }
.key-course-details.movie-creation { background-image: url(../images/course/creative/movie-creation/key-image.jpg); background-position-y: 21%; }
.key-course-details.web-design { background-image: url(../images/course/creative/web-design/key-image.jpg); background-position-y: 24%; }
.key-course-details.java { background-image: url(../images/course/creative/java/key-image.jpg); background-position-y: 33%; }
.key-course-details.programmer { background-image: url(../images/course/creative/programmer/key-image.jpg); background-position-y: 41%; }
.key-course-details.server { background-image: url(../images/course/creative/server/key-image.jpg); background-position-y: 41%; }

.key-course-details.cad { background-image: url(../images/course/major/cad/key-image.jpg); background-position-y: 11%; }
.key-course-details.jw-cad { background-image: url(../images/course/major/jw-cad/key-image.jpg); background-position-y: 46%; }
.key-course-details.revit { background-image: url(../images/course/major/revit/key-image.jpg); background-position-y: 46%; }

.key-course-details.google-workspace { background-image: url(../images/course/business/google-workspace/key-image.jpg); background-position: right 7%; background-size: 82.333vw auto; }
.key-course-details.gss { background-image: url(../images/course/business/gss/key-image.jpg); background-position-y: 85%; }
.key-course-details.chatgpt { background-image: url(../images/course/business/chatgpt/key-image.jpg); background-position-y: 18%; }
.key-course-details.mail { background-image: url(../images/course/business/mail/key-image.jpg); background-position-y: 18%; }
.key-course-details.excel-business { background-image: url(../images/course/business/excel/key-image.jpg); background-position-y: 18%; }
.key-course-details.presentation { background-image: url(../images/course/business/presentation/key-image.jpg); background-position-y: 52%; }
.key-course-details.analysis { background-image: url(../images/course/business/analysis/key-image.jpg); background-position-y: 75%; }
.key-course-details.dx { background-image: url(../images/course/business/dx/key-image.jpg); background-position-y: 47%; }
.key-course-details.advanced { background-image: url(../images/course/business/advanced/key-image.jpg); background-position-y: 33%; }
.key-course-details.rpa { background-image: url(../images/course/business/rpa/key-image.jpg); background-position-y: 22%; }
.key-course-details.typing { background-image: url(../images/course/business/typing/key-image.jpg); background-position-y: 39%; }

.key-course-details.mos { background-image: url(../images/course/certification/mos/key-image.jpg); background-position-y: 39%; }
.key-course-details.vba { background-image: url(../images/course/certification/vba/key-image.jpg); background-position-y: 39%; }
.key-course-details.certfi { background-image: url(../images/course/certification/certfi/key-image.jpg); background-position-y: 39%; }
.key-course-details.photoshop-exam { background-image: url(../images/course/certification/photoshop-exam/key-image.jpg); background-position-y: 31%; }
.key-course-details.illustrator-exam { background-image: url(../images/course/certification/illustrator-exam/key-image.jpg); background-position-y: 31%; }
.key-course-details.adobe-certified-pro-photoshop { background-image: url(../images/course/certification/adobe-certified-pro-photoshop/key-image.jpg); background-position-y: 31%; }
.key-course-details.adobe-certified-pro-illustrator { background-image: url(../images/course/certification/adobe-certified-pro-illustrator/key-image.jpg); background-position: 13.333vw top; }

.key-course-details.web-creator {
	background-image: url(../images/course/certification/web-creator/key-image.jpg);
	background-position: 20.333vw -5.667vw;
	background-size: 117.333vw;
}

.key-course-details.generative-ai-passport { background-image: url(../images/course/certification/generative-ai-passport/key-image.jpg); background-position-y: 52%; }
.key-course-details.it-passport { background-image: url(../images/course/certification/it-passport/key-image.jpg); background-position-y: 52%; }
.key-course-details.g-ken { background-image: url(../images/course/certification/g-ken/key-image.jpg); background-position: 16.333vw 48%; }
.key-course-details.info-security { background-image: url(../images/course/certification/info-security/key-image.jpg); background-position-y: 49%; }
.key-course-details.cad-engineer { background-image: url(../images/course/certification/cad-engineer/key-image.jpg); background-position-y: 63%; }

@media (max-width: 1099px) {

	.key-course-details.microsoft365 {
		background-position: -73.667vw -44.667vw !important;
		background-size: 199.333vw auto;
	}

	.key-course-details.illustrator { background-size: cover; }

	.key-course-details.jw-cad { background-position: -123.667vw 0 !important; }

	.key-course-details.photoshop-exam {
		background-position: -40.667vw -41.667vw !important;
		background-size: auto 185.751vw;
	}

	.key-course-details.adobe-certified-pro-photoshop { background-position: -74.667vw 0 !important; }

	.key-course-details.web-creator {
		background-position: -1.667vw 0 !important;
		background-size: 272.333vw;
	}

	.key-course-details.generative-ai-passport { background-position: center -12.667vw !important; }
	.key-course-details.it-passport { background-position: -173.667vw -5.667vw !important; }

	.key-course-details.info-security { background-position: -115.667vw -14.667vw !important; }
	
	.key-course-details.google-workspace{background-size: 100%;}
}

/* --------------------------------------------------------------------------------------
	各カラーの出し分け
--------------------------------------------------------------------------------------- */

:root {
	--color-office: #00dd63 0%, #70dcf0 100%;
	--color-office-border: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, var(--color-office)) border-box;

	--color-creative: #F33D7D 0%, #A770F0 100%;
	--color-creative-border: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, var(--color-creative)) border-box;

	--color-major: #7F54F5 0%, #70DCF0 100%;
	--color-major-border: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, var(--color-major)) border-box;

	--color-business: #0794F9 0%, #70DCF0 100%;
	--color-business-border: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, var(--color-business)) border-box;

	--color-certification: #F70 0%, #FFC800 100%;
	--color-certification-border: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, var(--color-certification)) border-box;
}

.why-do-it-now.office { background: var(--color-office-border); }
.why-do-it-now.office::after { background: linear-gradient(0, var(--color-office)); }
.why-do-it-now.office .large-title,
.what-is-skill.office .sub-title,
.why-do-it-now.office .text .color-text { background: linear-gradient(180deg, var(--color-office)); }

.why-do-it-now.creative { background: var(--color-creative-border); }
.why-do-it-now.creative::after { background: linear-gradient(0, var(--color-creative)); }
.why-do-it-now.creative .large-title,
.what-is-skill.creative .sub-title,
.why-do-it-now.creative .text .color-text { background: linear-gradient(180deg, var(--color-creative)); }

.why-do-it-now.major { background: var(--color-major-border); }
.why-do-it-now.major::after { background: linear-gradient(0, var(--color-major)); }
.why-do-it-now.major .large-title,
.what-is-skill.major .sub-title,
.why-do-it-now.major .text .color-text { background: linear-gradient(180deg, var(--color-major)); }

.why-do-it-now.business { background: var(--color-business-border); }
.why-do-it-now.business::after { background: linear-gradient(0, var(--color-business)); }
.why-do-it-now.business .large-title,
.what-is-skill.business .sub-title,
.why-do-it-now.business .text .color-text { background: linear-gradient(180deg, var(--color-business)); }

.why-do-it-now.certification { background: var(--color-certification-border); }
.why-do-it-now.certification::after { background: linear-gradient(0, var(--color-certification)); }
.why-do-it-now.certification .large-title,
.what-is-skill.certification .sub-title,
.why-do-it-now.certification .text .color-text { background: linear-gradient(180deg, var(--color-certification)); }


/*
:root {
	--color-office: #00dd63;
	--color-creative: #f33d7d;
	--color-major: #7f54f5;
	--color-business: #0794F9;
	--color-certification: #F70;
}

.why-do-it-now.office { border-color: var(--color-office); }
.why-do-it-now.office::after,
.why-do-it-now.office .large-title,
.what-is-skill.office .sub-title { background-color: var(--color-office); }
.why-do-it-now.office .text .color-text { color: var(--color-office); }

.why-do-it-now.creative { border-color: var(--color-creative); }
.why-do-it-now.creative::after,
.why-do-it-now.creative .large-title,
.what-is-skill.creative .sub-title { background-color: var(--color-creative); }
.why-do-it-now.creative .text .color-text { color: var(--color-creative); }

.why-do-it-now.major { border-color: var(--color-major); }
.why-do-it-now.major::after,
.why-do-it-now.major .large-title,
.what-is-skill.major .sub-title { background-color: var(--color-major); }
.why-do-it-now.major .text .color-text { color: var(--color-major); }

.why-do-it-now.business { border-color: var(--color-business); }
.why-do-it-now.business::after,
.why-do-it-now.business .large-title,
.what-is-skill.business .sub-title { background-color: var(--color-business); }
.why-do-it-now.business .text .color-text { color: var(--color-business); }

.why-do-it-now.certification { border-color: var(--color-certification); }
.why-do-it-now.certification::after,
.why-do-it-now.certification .large-title,
.what-is-skill.certification .sub-title { background-color: var(--color-certification); }
.why-do-it-now.certification .text .color-text { color: var(--color-certification); } */