@charset "utf-8";

.ttl h2 { margin-bottom: 12px; color: #173762; font-size: clamp(36px,6.0vw,60px); line-height: 1; transition: 0.3s cubic-bezier(.5,1,.89,1); opacity: 0;}
.ttl p { color: #173762; font-size: 18px; letter-spacing: 0.05rem; line-height: 1;}
.ttl p:before { content: ''; display: inline-block; width: 17px; height: 15px; margin-right: 8px; vertical-align: middle;
 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 200 166"><path d="M149.5.8l-.8-.8H51.3L0,53.6l100,112.2,100-112.2L149.5.8Z" fill="%23173762"/></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;
 transition: 0.3s cubic-bezier(.5,1,.89,1); transition-delay: 0.2s; opacity: 0;
}
.ttl p span { position: relative; display: inline-block; vertical-align: middle; transition: 0.6s cubic-bezier(.5,1,.89,1); transition-delay: 0.3s; opacity: 0;}
.ttl.show h2 { opacity: 1;}
.ttl.show p:before { opacity: 1;}
.ttl.show p span { opacity: 1;}
@media (max-width: 481px) {
	.ttl h2 { margin-bottom: 8px;}
	.ttl p { font-size: 13px;}
	.ttl p:before { width: 10px; height: 8px; margin-right: 6px;}
}


.more { width: 100%; max-width: 136px;}
.more 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;
}
.more a:before,
.more 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;
}
.more a:before{ transform: translate(0,-50%) scale(1);}
.more a:after { transition-delay: 0.1s; transform: translate(-9px,-50%) scale(0); }
.more a:hover:before{ transform: translate(10px,-50%) scale(0);}
.more a:hover:after { transform: translate(0,-50%) scale(1);}
@media (max-width: 481px) {
	.more { max-width: 100px;}
	.more a { padding-right: 10px; font-size: 13px;}
	.more a:before,
	.more a:after { width: 10px; height: 10px; right: 6px;}
}


@keyframes slideshow4 {
  0% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes slideshow3 {
  0% { opacity: 0;}
  5% { opacity: 1;}
 33% { opacity: 1;}
 42% { opacity: 0;}
 100%{ opacity: 0;}
}
@keyframes slideshow2 {
  0% { opacity: 0;}
 35% { opacity: 1;}
 50% { opacity: 1;}
 60% { opacity: 0;}
 100%{ opacity: 0;}
}

@keyframes zoom {
	0% { transform: scale(1);}
 100% { transform: scale(1.15);}
}
@keyframes line {
	0% { height: 0px; transform: translateY(0px);}
	40%{ height: 110px; transform: translateY(0px);}
	41%{ height: 110px; transform: translateY(0px)}
  80%{ height: 0px; transform: translateY(110px)}
 100%{ height: 0px; transform: translateY(0px)}
}
#kv {}
#kv .inner-kv { position: relative; width: 100%; margin: 0 auto;}
#kv .kv-txt { position: absolute; left: 15%; top: 20%; width: 92px; z-index: 2;}
#kv .kv-txt p img { width: 100%;}
#kv .kv-slider { position: relative; z-index: 1; width: 100%; height: 100vh; overflow: hidden;}
#kv .kv-slider div { position: absolute; left: 0; top: 0; width: 100%;}
#kv .kv-slider .slide-1 { animation-delay: 0s; }
#kv .kv-slider .slide-2 { animation-delay: 8s; }
#kv .kv-slider .slide-3 { animation-delay: 16s;}
#kv .kv-slider .slide-4 { animation-delay: 24s;}
#kv .kv-slider div:before { content: ''; display: block; width: 100%; padding-top: 100vh; margin: 0 auto;
 background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
}

#kv .kv-slider.slider1 div { opacity: 1;}

#kv .kv-slider.slider2 div { animation: slideshow2 16s infinite; opacity: 0;}
#kv .kv-slider.slider2 .slide-2 { animation-delay: 8s; }
#kv .kv-slider.slider2 div:before { animation: zoom 32s infinite;}
#kv .kv-slider.slider2 .slide-2:before { animation-delay: 8s;}

#kv .kv-slider.slider3 div { animation: slideshow3 24s infinite; opacity: 0;}
#kv .kv-slider.slider3 .slide-2 { animation-delay: 8s; }
#kv .kv-slider.slider3 .slide-3 { animation-delay: 16s;}
#kv .kv-slider.slider3 div:before { animation: zoom 24s infinite;}
#kv .kv-slider.slider3 .slide-2:before { animation-delay: 8s;}
#kv .kv-slider.slider3 .slide-3:before { animation-delay: 16s;}

#kv .kv-slider.slider4 div { animation: slideshow4 32s infinite; opacity: 0;}
#kv .kv-slider.slider4 .slide-2 { animation-delay: 8s; }
#kv .kv-slider.slider4 .slide-3 { animation-delay: 16s;}
#kv .kv-slider.slider4 .slide-4 { animation-delay: 24s;}
#kv .kv-slider.slider4 div:before { animation: zoom 32s infinite;}
#kv .kv-slider.slider4 .slide-2:before { animation-delay: 8s;}
#kv .kv-slider.slider4 .slide-3:before { animation-delay: 16s;}
#kv .kv-slider.slider4 .slide-4:before { animation-delay: 24s;}

#kv .scroll { position: absolute; right: 2%; bottom: 40px; width: 40px; z-index: 2;}
#kv .scroll div { position: relative; }
#kv .scroll div:before { content: ''; display: block; width: 1px; height: 0px; background: #fff;
 position: absolute; left: 50%; top: 0;
 animation: line 6s infinite;
}
#kv .scroll div img { width: 100%;}
@media (max-width: 801px) {
	#kv .kv-slider { height: 100vh;}
	#kv .kv-slider div:before { padding-top: 100vh;}
}
@media (max-width: 481px) {
	#kv .kv-txt { width: 62px;}
	#kv .kv-slider div:before { background-size: cover;}
	#kv .scroll { right: 4%;}
}



#about { background: url('/img/index/bg-1.jpg') no-repeat 50% 0%;}
#about .inner-sct { position: relative; padding: 120px 0 40px;}
#about .ctn { position: relative; width: 92%; max-width: 1200px; margin: 0 auto;}
#about .ttl { position: absolute; left: 0; top: 16px;}
#about .more{ position: absolute; left: 0; top: 160px; transition: 0.6s cubic-bezier(.5,1,.89,1); transition-delay: 0.2s; opacity: 0;}
#about .ctn-inner { position: relative; width: 72%; max-width: 720px; margin: 0 0 0 auto;}
#about .tit { margin-bottom: 50px;}
#about .tit h3 { position: relative; color: #173762; font-size: clamp(42px,7.4vw,74px); line-height: 1.25; transition: 0.6s cubic-bezier(.5,1,.89,1); filter: blur(20px); opacity: 0;}
#about .txt { position: relative; margin-bottom: 60px;}
#about .txt h4 { position: absolute; left: 0; top: 0; width: 92px;}
#about .txt h4 img { position: relative; width: 100%; transition: 0.6s cubic-bezier(.5,1,.89,1); opacity: 0; transition-delay: 0.4s;}
#about .txt h4 img.sp { display: none;}
#about .txt div { padding-left: 150px; transition:  0.6s cubic-bezier(.5,1,.89,1); opacity: 0; transition-delay: 0.4s;}
#about .txt div p { margin-bottom: 30px; font-size: 16px; letter-spacing: 0.1rem; line-height: 2.1;}
#about .txt div p:last-child { margin-bottom: 0px;}
#about .pht-pc { display: block; width: 35%; max-width: 430px; position: absolute; left: -100px; top: 35%; overflow: hidden;}
#about .pht-pc:after { content: ''; display: block; width: 100%; padding-top: 138%; background: url('/img/index/img-1.jpg') no-repeat 100% 50% / cover;
 position: relative;
}
#about .pht-sp { display: none;}

#about .pht { width: 100%; max-width: 1280px; margin: 0 auto;}
#about .pht ul { position: relative; width: 100%; max-width: 640px; margin: 0 0 0 auto; padding-bottom: 160px;}
#about .pht ul li:nth-child(1) { width: 65%; max-width: 450px; margin: 0 0 0 auto;}
#about .pht ul li:nth-child(2) { width: 45%; max-width: 300px; position: absolute; left: 0; bottom: 0;}
#about .pht ul li figure { position: relative; width: 100%;}
#about .pht ul li figure img { position: relative; width: 100%;}

#about .tit.show h3 {  filter: blur(0px); opacity: 1;}
#about .txt.show div { opacity: 1;}
#about .txt.show h4 img { transform: translateY(0px); opacity: 1;}
#about .more.show { opacity: 1;}
@media (max-width: 1201px) {
}
@media (max-width: 801px) {
	#about { background: url('/img/index/bg-1@sp.jpg') no-repeat 50% 0% / 100% auto;}
	#about .inner-sct { padding: 80px 0 40px;}
	#about .ctn { width: 100%;}
	#about .ttl { position: relative; left: auto; top: auto; width: 88%; margin: 0 auto 30px;}
	#about .ctn-inner { width: 100%; max-width: 100%; margin: 0 auto 40px;}
	#about .tit { width: 88%; margin: 0 auto 40px;}
	#about .txt { width: 100%; margin: 0 auto;}
	#about .txt h4 { position: relative; left: auto; top: auto; width: 88%; margin: 0 auto 30px;}
	#about .txt h4 img.pc { display: none;}
	#about .txt h4 img.sp { display: block; width: 80%; max-width: 450px;}
	#about .txt div { width: 88%; margin: 0 auto; padding-left: 0px;}
	#about .pht-pc { display: none;}

	#about .pht-sp { display: block; width: 100% !important; margin-bottom: 40px !important;}
	#about .pht-sp figure {}
	#about .pht-sp figure img { width: 88%;}

	#about .pht { width: 88%; margin: 0 auto;}
	#about .pht ul { margin: 0 auto; padding-bottom: 120px;}
	#about .more { left: auto; right: 6%; top: 6.5vw;}
}
@media (max-width: 481px) {
	#about .inner-sct { padding: 60px 0 30px;}
	#about .ttl { margin-bottom: 20px;}
	#about .tit { margin-bottom: 30px;}
	#about .txt div { padding-left: 0px;}
	#about .txt div p { margin-bottom: 20px; font-size: 13px; letter-spacing: 0.05rem;}
	#about .txt div p span { display: block;}
	#about .pht-sp { margin-bottom: 30px !important;}

	#about .pht ul { padding-bottom: 60px;}
	#about .more { top: 8vw;}
}



#service .inner-sct { position: relative; padding: 40px 0 60px;}
#service .inner-sct:after { content: ''; display: block; width: 100%; height: calc( 100% - 300px ); background: #173762;
 transition: 0.4s cubic-bezier(.5,1,.89,1); opacity: 0;
 position: absolute; left: 0; top: 300px; z-index: 1;
}
#service .ttl { margin-bottom: 20px;}
#service .ctn { position: relative; width: 92%; max-width: 1200px; margin: 0 auto; z-index: 2;}
#service .links { width: 100%; transition: 0.6s cubic-bezier(.5,1,.89,1); transition-delay: 0.2s; opacity: 0;}
#service .links ul { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 0px;}
#service .links ul li { display: inline-block; width: 46.5%; padding: 25px 0;}
#service .links ul li dl { width: 100%;}
#service .links ul li dl dt { position: relative; margin-bottom: 18px; overflow: hidden;}
#service .links ul li dl dt a { position: relative; display: block; text-decoration: none; background: #fff; color: #fff;}
#service .links ul li dl dt a img { position: relative; width: 100%; z-index: 1; transition: 0.3s ease;}
#service .links ul li dl dt a span { position: absolute; left: 0; bottom: 0; z-index: 2; display: block; width: 100%; padding: 18px; font-size: clamp(20px,3.0vw,30px); letter-spacing: 0.1rem;}
#service .links ul li dl dd { color: #fff; font-size: 18px; letter-spacing: 0.1rem;}
#service .links ul li dl dt a:hover img  { transform: scale(1.05); opacity: 0.8;}

#service .more { position: absolute; right: 0px; top: 68px; transition: 0.6s cubic-bezier(.5,1,.89,1); transition-delay: 0.2s; opacity: 0;}

#service.show .inner-sct:after { opacity: 1;}
#service .links.show { opacity: 1;}
#service .more.show { opacity: 1;}
@media (max-width: 801px) {
	#service .inner-sct:after { height: calc( 100% - 240px ); top: 240px;}
	#service .links ul li { padding: 18px 0;}
	#service .links ul li dl dt { margin-bottom: 12px;}
	#service .links ul li dl dd { font-size: 16px;}
}
@media (max-width: 641px) {
	#service .inner-sct:after { height: calc( 100% - 50vw ); top: 50vw;}
	#service .ctn { width: 88%;}
	#service .links ul { display: block;}
	#service .links ul li { display: block; width: 100%; padding: 16px 0;}
	#service .more { left: auto; right: 0; top: 8.0vw;}
}
@media (max-width: 481px) {
	#service .inner-sct { padding: 40px 0px 16px;}
	#service .ttl { margin-bottom: 12px;}
	#service .links ul li dl dt { margin-bottom: 8px;}
	#service .links ul li dl dt a span { padding: 12px 24px 8px;}
	#service .links ul li dl dd { font-size: 13px;}
}



.bg-2 { background: url('/img/index/bg-2.jpg') no-repeat 50% 0%;}
@media (max-width: 801px) {
	.bg-2 { background: url('/img/index/bg-2@sp.jpg') no-repeat 50% 0% / 100% auto;}
}

#social .inner-sct { position: relative; padding: 120px 0 60px;}
#social .ctn { position: relative; width: 92%; max-width: 1200px; margin: 0 auto;}
#social .ttl { margin-bottom: 50px;}
#social .flex{ position: relative; display: flex; justify-content: space-between; transition: 0.6s cubic-bezier(.5,1,.89,1); transition-delay: 0.2s; opacity: 0;}
#social .box { width: 48.5%;}
#social .box-3 { position: absolute; right: 0; bottom: 0;}
#social .box a { position: relative; display: block; width: 100%;}
#social .box a dl { position: relative; overflow: hidden;}
#social .box a dl dt { position: relative; width: 100%; z-index: 1; transition: 0.3s ease;}
#social .box-1 a dl dt { padding-top: 82%;}
#social .box-2 a dl dt,
#social .box-3 a dl dt { padding-top: 38.5%;}
#social .box a dl dt picture { display: block; position: absolute; left: 50%; top: 50%; width: 100%; transition: 0.3s ease; transform: translate(-50%,-50%);}
#social .box a dl dt picture img { width: 100%;}
#social .box a dl dd { position: absolute; left: 0; bottom: 0; z-index: 2;
 display: block; width: 100%; padding: 50px 30px 20px; background: linear-gradient( rgba(100,114,130, 0), rgba(50,57,65, 0.75));
 color: #fff; font-size: 18px; letter-spacing: 0.1rem;
}
#social .box a dl dd span { display: block; font-size: clamp(20px,3.0vw,28px);}
#social .box a:hover dl dt { opacity: 0.8;}
#social .box a:hover dl dt picture { transform: translate(-50%,-50%) scale(1.05);}

#social .more { position: absolute; right: 0px; top: 68px; transition: 0.6s cubic-bezier(.5,1,.89,1); transition-delay: 0.2s; opacity: 0;}

#social .flex.show { opacity: 1;}
#social .more.show { opacity: 1;}
@media (max-width: 801px) {
	#social .box a dl dd { padding: 30px 24px 12px; font-size: 14px;}
}
@media (max-width: 641px) {
	#social .inner-sct { padding: 60px 0 40px;}
	#social .ctn { width: 88%;}
	#social .ttl { margin-bottom: 20px;}
	#social .flex{ display: block;}
	#social .box { width: 100%; margin-bottom: 30px;}
	#social .box-3 { position: relative; right: auto; bottom: auto; margin-bottom: 0px;}
	#social .box-1 a dl dt { padding-top: 50%;}
	#social .box-2 a dl dt,
	#social .box-3 a dl dt { padding-top: 50%;}
	#social .more { left: auto; right: 0; top: 8.0vw;}
}
@media (max-width: 481px) {
	#social .inner-sct { padding: 60px 0 20px;}
	#social .box { margin-bottom: 18px;}
	#social .box a dl dd { padding: 40px 24px 12px; font-size: 13px; letter-spacing: 0rem;}
	#social .box a dl dd span { font-size: 18px;}
}



#news .inner-sct { position: relative; padding: 60px 0;}
#news .ctn { position: relative; width: 92%; max-width: 1200px; margin: 0 auto;}
#news .ttl { position: absolute; left: 0; top: 0;}
#news .inner { position: relative; width: 100%; padding-left: 240px;}
#news ul { border-top: solid 1px #173762; font-size: 0; transition: 0.6s cubic-bezier(.5,1,.89,1); opacity: 0; transition-delay: 0.4s;}
#news ul li { position: relative; padding: 20px; padding-left: 180px; border-bottom: solid 1px #173762; font-size: 18px;}
#news ul li time { position: absolute; left: 25px; top: 22px; color: #173762; font-size: 20px; letter-spacing: 0.05rem;}
#news ul li span,
#news ul li a { position: relative; display: block; padding: 5px; padding-right: 40px; color: #000; text-decoration: none;}
#news ul li a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}
#news .more { position: absolute; top: 140px; left: 0; transition: 0.6s cubic-bezier(.5,1,.89,1); transition-delay: 0.2s; opacity: 0;}
#news .show ul,
#news .show .more { opacity: 1;}
@media (max-width: 801px) {
	#news .inner { padding-left: 160px;}
	#news ul li { padding: 12px; padding-left: 120px; font-size: 16px;}
	#news ul li time { left: 15px; top: 16px; font-size: 18px;}
}
@media (max-width: 641px) {
	#news .inner-sct { position: relative; padding: 40px 0;}
	#news .ctn { width: 88%;}
	#news .ttl { position: relative; left: auto; top: auto; margin-bottom: 20px;}
	#news .inner { padding-left: 0px;}
	
	#news ul li { padding: 8px 4px 10px; font-size: 13px;}
	#news ul li time { position: relative; left: auto; top: auto; font-size: 14px;}
	#news ul li a { padding: 0; padding-right: 40px;}
	#news ul li a:before,
	#news ul li a:after { top: calc(50% - 8px);}
	
	#news .more { top: 8.0vw; left: auto; right: 0;}
}



#recruit .inner-sct { position: relative; padding: 60px 0 120px;}
#recruit .ctn { position: relative; width: 88%; max-width: 1200px; margin: 0 auto; padding: 90px 0; background: url('/img/index/bg-recruit.jpg') no-repeat 50% 25% / cover;}
#recruit .ctn:after { content: ''; display: block; width: 100%; height: 100%; background: rgba(24,55,100,0.5);
 position: absolute ; left: 0; top: 0;
}
#recruit .ctn .flex { position: relative; display: flex; justify-content: space-between; z-index: 2; width: 100%; max-width: 640px; margin: 0 auto;
 transition: 0.6s cubic-bezier(.5,1,.89,1); opacity: 0;
}
#recruit .ctn .ttl { width: 40%;}
#recruit .ctn .ttl h2 { color: #fff;}
#recruit .ctn .ttl p { color: #fff;}
#recruit .ctn .ttl p:before { 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 200 166"><path d="M149.5.8l-.8-.8H51.3L0,53.6l100,112.2,100-112.2L149.5.8Z" fill="%23fff"/></svg>');
}
#recruit .ctn .ttl p span { transform: translateX(0px); opacity: 1;}
#recruit .ctn .txt { width: 60%; padding-left: 62px; border-left: solid 1px #fff;}
#recruit .ctn .txt p { position: relative; color: #fff; font-size: clamp(18px,3.2vw,32px); letter-spacing: 0.12rem;}
#recruit .ctn .txt p span { display: block;}
#recruit .ctn .more { position: absolute; bottom: 5px; left: 0;}
#recruit .ctn .more a { color: #fff; border-color: #fff;}
#recruit .ctn .more a:before,
#recruit .ctn .more a:after {
 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="%23fff"/></svg>');
}

#recruit .ctn.show .flex { opacity: 1;}
@media (max-width: 801px) {
	#recruit .inner-sct { padding: 40px 0 80px;}
	#recruit .ctn { padding: 40px;}
	#recruit .ctn .flex { display: block; max-width: 400px; margin: 0 auto;}
	#recruit .ctn .ttl { width: 100%; margin-bottom: 20px;}
	#recruit .ctn .txt { width: 100%; padding-top: 20px; padding-left: 0px; border-top: solid 1px #fff; border-left: 0px;}
	#recruit .ctn .txt p span { display: inline;}
	#recruit .ctn .more { bottom: auto; left: auto; right: 0; top: 36px;}
}
@media (max-width: 481px) {
	#recruit .inner-sct { padding: 40px 0px;}
	#recruit .ctn { padding: 24px 32px;}
}