@charset "utf-8";
.wrap { background-image: url('/img/bg-3.png'),url('/img/bg-2.png');
 background-repeat: no-repeat, no-repeat; background-position: 50% 12%, 50% 65%;
}
@media (min-width: 1601px) {
	.wrap { background-size: 100% auto, 100% auto;}
}
@media (max-width: 801px) {
	.wrap { background-image: url('/img/bg-3.png'),url('/img/bg-2@sp.jpg'); background-position: 50% 4%, 50% 43.5%; background-size: auto auto, 100% auto;}
}
@media (max-width: 481px) {
	.wrap { background-position: 50% 6%, 50% 36.5%; background-size: 200% auto, 100% auto;}
}

@media (max-width: 481px) {
	#page-kv .kv-txt h1 { text-shadow: 0 0 6px #fff, 0 0 6px #fff;}
}
.ttl h2 { margin-bottom: 20px; font-size: clamp(22px,4.0vw,42px); line-height: 1;}


#lead {}
#lead .inner-sct { padding: 160px 0px 80px;}
#lead .ttl { margin-bottom: 20px;}
#lead .ttl h2 { margin-bottom: 20px; text-align: center;}
#lead .ttl:after { width: 126px; margin: 0 auto;}
#lead .read { margin-bottom: 100px;}
#lead .read p { font-size: clamp(13px, 3.0vw, 20px); letter-spacing: 0.1rem; line-height: 2.7; text-align: center;}
#lead .read p span { display: block;}
#lead .bloc { position: relative; padding: 50px 0;}
#lead .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
#lead .bloc .posi { position: absolute; top: -100px;}
#lead .bloc .flex { display: flex; width: 100%; justify-content: space-between; align-items: center;}
#lead .bloc .flex.re { flex-direction: row-reverse;}
#lead .bloc .pht { width: 48.5%;}
#lead .bloc .txt { width: 48.5%;}
#lead .bloc .pht figure { width: 100%; }
#lead .bloc .pht figure.border { border: solid 1px #173762;}
#lead .bloc .pht figure img { width: 100%;}
#lead .bloc .pht figure.vertical { padding: 30px 0; text-align: center;}
#lead .bloc .pht figure.vertical img { width: 40%; max-width: 160px;}

#lead .bloc .txt h4 { margin-bottom: 16px; color: #173762; font-size: clamp(18px, 3.0vw, 30px); letter-spacing: 0.1rem; line-height: 1.4;} 
#lead .bloc .txt .line { margin-bottom: 16px; display: block; width: 40px; height: 1px; background: #173762;}
#lead .bloc .txt p { font-size: clamp(13px, 2.6vw, 18px); letter-spacing: 0.05rem;}
#lead .bloc .txt p.mb { margin-bottom: 30px;}
#lead .bloc .txt p a:hover { text-decoration: none;}
#lead .side-txt.txt-1 { left: auto; right: -12px; height: 180px; background: url('/img/side/knowledge.svg') no-repeat 50% 0% / 100% auto;}
#lead .side-txt.txt-2 { height: 180px; background: url('/img/side/development.svg') no-repeat 50% 0% / 100% auto;}
#lead .side-txt.txt-3 { left: auto; right: -12px; height: 160px; background: url('/img/side/seminar.svg') no-repeat 50% 0% / 100% auto;}
#lead .side-txt.txt-4 { height: 160px; background: url('/img/side/support.svg') no-repeat 50% 0% / 100% auto;}
#lead .side-txt.txt-5 { left: auto; right: -12px; height: 160px; background: url('/img/side/writing.svg') no-repeat 50% 0% / 100% auto;}
#lead .side-txt.txt-6 { height: 350px; background: url('/img/side/association.svg') no-repeat 50% 0% / 100% auto;}
@media (max-width: 1241px) {
	#lead .side-txt.txt-1 { right: 5px;}
	#lead .side-txt.txt-3 { right: 5px;}
	#lead .side-txt.txt-5 { right: 5px;}
}
@media (max-width: 801px) {
	#lead .inner-sct { padding: 120px 0px 80px;}
	#lead .bloc { padding: 40px 0;}
	#lead .bloc .posi { top: -60px;}
	#lead .bloc .flex { display: block;}
	#lead .bloc .pht { width: 100%;}
	#lead .bloc .txt { width: 100%; margin-bottom: 30px; padding-right: 16px;}
	#lead .bloc .txt .line { height: 0.5px;}
	#lead .bloc .txt p.mb { margin-bottom: 20px;}
	#lead .bloc .pht figure.vertical { padding: 20px 0;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#lead .inner-sct { padding: 40px 0px;}
	#lead .ttl:after { width: 60px;}
	#lead .read { margin-bottom: 30px;}
	#lead .read p { letter-spacing: 0.05rem; line-height: 2.2;}
	#lead .bloc { padding: 24px 0;}
	#lead .ctn { padding: 0 24px;}
	#lead .bloc .txt { margin-bottom: 20px;}
	#lead .bloc .txt h4 { margin-bottom: 12px;}
	#lead .bloc .txt .line { margin-bottom: 12px; width: 24px;}
	#lead .bloc .txt p.mb { margin-bottom: 16px;}
	#lead .bloc .pht { padding-right: 16px;}
	#lead .bloc .pht figure.vertical { padding: 12px 0;}
	#lead .bloc .pht figure.vertical img { max-width: 100px;}
	#lead .side-txt.txt-1 { right: 16px;}
	#lead .side-txt.txt-3 { right: 16px;}
	#lead .side-txt.txt-5 { right: 16px;}
}


#lead .viewmore { margin: 0 0 0 auto;}
#lead .btn { width: 100%; max-width: 240px;}
#lead .btn a { position: relative; display: block; width: 100%; padding: 6px 0 8px; padding-right: 20px; border: solid 1px #173762; border-radius: 50px;
 color: #173762; font-size: 16px; line-height: 1; text-align: center; text-decoration: none;
}
#lead .btn a:before,
#lead .btn a:after { content: ''; display: block; width: 12px; height: 12px; position: absolute; right: 9px; top: 50%;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 18"><polygon points="20 8 12 0 10.9 1.1 17.9 8 0 8 0 9.5 17.9 9.5 10.9 16.5 12 17.6 20 9.5 20 8" fill="%23173762"/></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; transition: 0.2s ease;
}
#lead .btn a:before{ transform: translate(0,-50%) scale(1);}
#lead .btn a:after { transition-delay: 0.1s; transform: translate(-9px,-50%) scale(0); }
#lead .btn a:hover:before{ transform: translate(10px,-50%) scale(0);}
#lead .btn a:hover:after { transform: translate(0,-50%) scale(1);}
@media (max-width: 481px) {
	#lead .btn { max-width: 200px;}
	#lead .btn a { padding: 7px 0; padding-right: 20px; font-size: 13px;}
}



#links .inner-sct { padding: 60px 0px 120px;}
#links .ttl { margin-bottom: 30px;}
#links .ttl h2 { margin-bottom: 20px; text-align: center;}
#links .ttl:after { width: 126px; margin: 0 auto;}
#links .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
#links .ctn ul { font-size: 0; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;}
#links .ctn ul li { width: 31.5%; padding: 15px 0;}
#links .ctn ul li a { display: block; overflow: hidden;}
#links .ctn ul li a dl { position: relative; display: block;}
#links .ctn ul li a dl dt { position: relative; width: 100%; padding-top: 55%;}
#links .ctn ul li a dl dt img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; transition: 0.3s ease;}
#links .ctn ul li a dl dd { position: absolute; left: 0; bottom: 0; z-index: 2;
 display: block; width: 100%; padding: 50px 20px 10px; background: linear-gradient( rgba(100,114,130, 0), rgba(50,57,65, 0.75));
 color: #fff; font-size: clamp(14px,2.2vw,18px); letter-spacing: 0.05rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
#links .ctn ul li a:hover dl dt img { transform: translate(-50%,-50%) scale(1.05); opacity: 0.8;}

@media (max-width: 801px) {
	#links .ctn ul li { width: 48.5%; padding: 12px 0;}
}
@media (max-width: 481px) {
	#links .inner-sct { padding: 40px 0px 60px;}
	#links .ttl { margin-bottom: 12px;}
	#links .ttl:after { width: 60px;}
	#links .ctn { padding: 0 24px;}
	#links .ctn ul { display: block;}
	#links .ctn ul li { width: 100%; padding: 10px 0;}
}