@charset "utf-8";

.inner{ max-width: 1245px; margin: 0 auto; }
.SP{ display: none; }

.blue{ background: #293981; }
.yellow{ background: #FDA02E; }
.green{ background: #008E8D; }

.hero-img{ z-index: 1; top: -30px; }
.trial_area{ display: none; }

.main-column{ padding-top: 1rem; }

/* ----------------------------------------------------------------------------------- aside */
#aside{ z-index: 100; position: fixed; right: 0; top: 50%; translate: 0 -50%; }
#aside li{ width: 50px; margin: 10px 0; padding: 25px 10px; border-radius: 10px 0 0 10px; }
#aside li a{ display: block; color: #fff; font-size: 20px; writing-mode: vertical-lr; font-weight: 600; }
#aside li img{ width: 20px; height: auto; margin: 0 0 8px; }



/* ----------------------------------------------------------------------------------- sv */
#sv{ padding: 0 0 85px 0; }

#sv .swiper{ overflow: visible; }
#sv .swiper-wrapper{ transition-timing-function: linear; will-change: transform; }
#sv .swiper-slide{ width: 228px!important; padding: 12px; }
#sv .swiper-slide img{ width: 100%; height: auto; filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.2)); }

#sv ul{ display: flex; align-items: center; justify-content: space-between; margin: 60px 0; padding: 0 10px; }
#sv li{ width: calc(100% / 3 - 1%); border-radius: 10px; }
#sv li a{ display: block; padding: 21px 10px 23px; text-align: center; color: #fff; font-size: 1.125rem; }
#sv li a img{ width: 25px; height: auto; margin: 0 10px 0 0; }

#sv p{ font-size: 24px; line-height: 200%; padding: 0 10px; }


/* ----------------------------------------------------------------------------------- glovalnav */
#glovalnav{ padding: 0 0 80px; }

.link-list{ display: flex; align-items: center; justify-content: space-between; }
.link-list li{ width: calc(100% / 4 - 1%); }
.link-list li a{ position: relative; display: block; width: 100%; padding: 25px 10px 26px; border: 1px solid #263D8B; text-align: center; font-size: 16px; font-weight: 600; }
.link-list li a:after{ transform: rotate(45deg) translate(-50%, 0); position: absolute; right: 10px; top: 50%; content: ""; width: 8px; height: 8px; border-bottom: 1px solid #263D8B; border-right: 1px solid #263D8B; }

.link-btn{ display: flex; align-items: center; justify-content: space-between; }
.link-btn li{ width: 550px; }
.link-btn li a{ position: relative; display: block; width: 100%; padding: 40px 10px 41px; border: 1px solid #263D8B; text-align: center; font-size: 16px; }
.link-btn li a:after{ transform: rotate(45deg) translate(-50%, 0); position: absolute; right: 20px; top: 50%; content: ""; width: 15px; height: 15px; border-top: 2px solid #263D8B; border-right: 2px solid #263D8B; }



/* ----------------------------------------------------------------------------------- ability */
#ability{ padding: 0 0 120px; }
#ability .elem-paragraph p{ padding: 0 0 7px; }
#ability .link-list{ padding: 0 0 75px; }
#ability .link-list li{ width: calc(100% / 5 - 1%); }
#ability .link-list li a{ padding: 14px 10px 15px; }

#ability h4{ padding: 0 0 40px 2%; font-size: 2rem; }
#ability h5{ padding: 9px 10px; font-size: 24px; text-align: center; color: #fff; background: #009C93; border: 1px solid #009C93; }
#ability .type{ display: inline-block; margin: 0; padding: 7px 23px; font-size: 1.25rem; line-height: 1; color: #fff; text-align: center; background: #009C93; font-weight: 600; }

#ability .function-list{ padding-left: 2%; }
#ability .function-list li{ padding: 0 0 30px; }
#ability .function-list p{ padding: 30px; font-size: 16px; line-height: 170%; border: 1px solid #707070; }
#ability .text{ width: 49%; }
#ability img{ width: 40%; height: auto; }

#ability .functions .link-list{ justify-content: center; }
#ability .functions .link-list li{ width: 450px; }

#ability .link-btn{ justify-content: center; }
#ability .link-btn li a{ font-size: 20px; }

.function-box{ display: flex; align-items: end; justify-content: space-between; padding: 0 0 80px; }
.function-box:last-of-type{ padding: 0 0 80px; }


/* ----------------------------------------------------------------------------------- contact */
#contact { margin-bottom: 84px; }
#contact .link-btn{ padding: 0 15px; }
#contact .link-btn li{ width: calc(100% / 3 - 1%); }
#contact .link-btn li a { font-size: 1.125rem; font-weight: 600; }



@media only screen and (max-width: 1230px) {
	
	#ability .link-list li{ width: calc(100% / 5 - 1%); }
	.link-list li a,
	.link-btn li a{ font-size: 13px; }
	.link-btn li a::after{ right: 12px; width: 11px; height: 11px; }
	
}




@media only screen and (max-width: 768px) {
	
	
	.SP{ display: block; }
	
	
	#practical_area .divide-layout.divide-layout--column-2 > div > div > div > div .divide-layout__item:first-child::after{ bottom: -25px!important; border-width: 10px!important; }
	#practical_area .divide-layout.divide-layout--column-2 > div > div > div > div .divide-layout__item:first-child::before{ display: none!important; }


/* ----------------------------------------------------------------------------------- aside */
	#aside{ top: initial; left: 0; bottom: 0; translate: 0; }
	#aside ul{ display: flex; align-items: center; justify-content: space-between; }
	#aside li{ height: 50px; margin: 0; padding: 13px 3px; border-radius: 0; text-align: center; }
	#aside li a{ font-size: 13px; writing-mode: initial; }
	#aside li img{ width: 16px; margin: 0 6px 0 0; vertical-align: -2px; }
	
	#aside li:first-of-type{ width: 45%; }
	#aside li:nth-of-type(2){ width: 25%; }
	#aside li:last-of-type{ width: 30%; }
	
	
/* ----------------------------------------------------------------------------------- sv */
	#sv{ padding: 0 0 50px; }
	
	#sv .roop{ padding: 0 0 3rem; }
	#sv .swiper-slide{ width: 130px !important; padding: 6px; }
	
	#sv ul{ margin: 0 0 30px; padding: 0; flex-direction: column; }
	#sv li{ width: 100%; margin: 0 0 10px; }
	#sv li a{ padding: 18px 10px 21px; font-size: 1.25rem; }
	#sv li a img{ width: 23px; vertical-align: -6px; }
	
	#sv p{ font-size: 14px; padding: 0; }


/* ----------------------------------------------------------------------------------- glovalnav */
	#glovalnav{ padding: 0; }
	
	.link-list{ flex-wrap: wrap; }
	.link-list li{ width: calc(100% / 2 - 2%); height: 80px; margin: 0 0 2%; }
	.link-list li a{ display: flex; padding: 0; font-size: 15px; height: 100%; align-items: center; justify-content: center; }
	
	.link-btn{ flex-direction: column; }
	.link-btn li{ width: 100%; }
	.link-btn li a{ padding: 20px 10px; }
	.link-btn li a::after{ right: 15px; width: 12px; height: 12px; }
	

/* ----------------------------------------------------------------------------------- ability */
	#ability{ padding: 0 0 60px; }
	#ability .link-list{ padding: 0 0 35px; }
	#ability .link-list li{ width: calc(100% / 2 - 2%); height: 50px; }
	#ability .link-list li a{ font-size: 13px; }
	
	#ability .text{ width: 100%; }
	#ability .type{ margin: 0; padding: 7px 17px; }
	#ability h4{ padding: 0 0 20px 2%; }
	#ability h5{ padding: 6px 10px; font-size: 17px; }
	#ability img{ width: 70%; margin: 20px auto 0; }
	
	#ability .function-list{ padding-left: 0; }  
	#ability .function-list li{ padding: 0 0 15px; }
	#ability .function-list p{ padding: 15px; font-size: 14px; }
	
	#ability .link-btn li a{ padding: 25px 10px 28px; font-size: 17px; }
	
	.function-box{ display: flex; padding: 0 0 40px; flex-direction: column; }
	.function-box:last-of-type{ padding: 0 0 60px; }



/* ----------------------------------------------------------------------------------- contact */
	#contact .link-btn{ padding: 0; }
	#contact .link-btn li{ width: 100%;
	  margin: 0 0 10px; }



	
}