.comp-title { position: relative; background: url(../img/title/index_19.webp) no-repeat center; background-size: cover; }
.comp-title--logo, .comp-title--button { position: absolute;  }
.comp-title--logo { width: 30%; top: 3rem; left: 3rem; color: #fff; display: flex;  }
.comp-title--logo img { filter: drop-shadow(0 0 10px rgba(255,255,255,1)) drop-shadow(0 0 10px rgba(255,255,255,1)); /* DOUBLE!!1!11!!elf111 */ transition: .15s all }
.comp-title--logo p { margin-left: 3rem; padding-top: 1.5rem; line-height: 1.3; text-align: center; text-shadow: 0 0 10px rgba(0,0,0,.5); filter: drop-shadow(0 0 10px rgba(0,0,0,.5)); }
.comp-title--logo p strong::before { content: ''; display: block; margin-top: .45rem }
.comp-title--logo a:is(:hover,:focus) img { filter: drop-shadow(0 0 10px rgba(255,255,255,1)) drop-shadow(0 0 10px rgba(255,255,255,1)); scale: 1.05; }
.comp-title--button { bottom: 3rem; left: 50%; transform: translateX(-50%); width: 80% }
.comp-title--button a { width: 100%; display: block; }
.comp-title-links { position: absolute; top: 3rem; right: 3rem; display: grid; grid-template-columns: 1fr }
#content .comp-title-links .item a { background: var(--colHigh1); width: 180px; aspect-ratio: 2/1; margin-bottom: 1rem; padding: 1rem; color: #fff; display: block; hyphens: auto; -webkit-hyphens: auto; text-align: center; border-radius: var(--radius); }
#content .comp-title-links .item a:is(:hover,:focus) { background: var(--colHigh2);}

.comp-title > picture { filter: grayscale(.5) }

.comp-title--navi nav ul li:first-child { display: none }

@media screen and (max-width: 1280px)
{	
	.comp-title { height: 80vh }
	.comp-title .comp-title--bg { display: none }
	
	.comp-title--logo { width: 50%; }
}
@media screen and (max-width: 920px)
{
	.title-bar ul { position: static; text-align: center }
	.title-bar ul li a { display: inline-block; }
}

@media screen and (max-width: 800px)
{
	.comp-title--logo, .comp-title-links { position: static }
	.comp-title--logo { width: 100%; padding-top: 3rem }
	.comp-title--logo { display: block; text-align: center }
	.comp-title--logo img { width: 150px }
	.comp-title--logo p { text-shadow: 0 0 10px rgba(0,0,0,1); filter: drop-shadow(0 0 10px rgba(0,0,0,1)); margin: 0 auto 1rem  }
	.comp-title-links { display: flex; width: 100%; align-items: center; justify-content: center; gap: 3rem }
	
}

@media screen and (max-width: 800px)
{
	.comp-title-links { display: block; margin-bottom: 2.1rem }
	.comp-title-links .item a { margin: 0 auto }
	.comp-title--button { position: static; margin: 0 auto; transform: none; }
}
@media screen and (max-width: 800px) and (max-height: 840px)
{
	.comp-title { height: 100vh }
}