@charset "utf-8";
/* CSS Document */


.firstContentsEffect{animation-name: fadein; animation-duration: 1s;}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

#wrapperLowstyle #imgMian figure{margin: 0 auto;}
#wrapperLowstyle img{width: 100%; height: auto;}
#wrapperLowstyle #imgMian{background: #fff; padding: 0 0 45px;}
#wrapperLowstyle #imgMian .copy{ margin: 0 auto; text-align: right; }
#wrapperLowstyle .pankuzu{padding: 7px 0; background: #f0f0f0;}
#wrapperLowstyle .pankuzu ol{list-style-type: none; display: flex;flex-wrap: wrap;}
#wrapperLowstyle .pankuzu ol li{font-size: 80%;}
#wrapperLowstyle .pankuzu ol li::after{content: "＞";margin: 0 10px;}
#wrapperLowstyle .pankuzu ol li:last-child::after{display: none;}

#wrapperLowstyle .titleBg{background: #014099;}
#wrapperLowstyle .titleBg h2{font-size: 26px; padding: 30px 0; text-align: left; color: #fff}
#wrapperLowstyle #wrapperDetail{padding: 30px 0;}
#wrapperLowstyle #mainCat,#wrapperLowstyle #subCat{display: inline-block; font-size: 14px; margin-bottom: 30px;}
#wrapperLowstyle #mainCat a{background: #fff; padding: 3px 10px; margin-right: 7px; display: block; transition: .2s; border: 1px solid #fff;}
#wrapperLowstyle #mainCat a:link,#wrapperLowstyle #mainCat a:visited{background: #fff; color: #014099; text-decoration: none; border: 1px solid #014099;}
#wrapperLowstyle #mainCat a:hover{color: #fff; background:#014099; }
#wrapperLowstyle #subCat a:link,#wrapperLowstyle #subCat a:visited{text-decoration: underline;}
#wrapperLowstyle #subCat a:hover{text-decoration: none; }

#wrapperBox{font-weight: bold; padding: 45px 0;}
#wrapperBox div dl{display: flex;justify-content: space-between;}
#wrapperBox div dl div{display: flex; width: 32%; justify-content: center; align-items: center;}

#wrapperBox div dl dt{letter-spacing: 1px; border-right: 1px solid #101010; width:30%; margin-right: 20px; padding-right: 10px;}
#wrapperBox div dl dt small{display: block;}
#wrapperBox div dl dd{width: 60%;}
#wrapperLowstyle #txtBody img{display: block; margin: 0 auto;}
#wrapperLowstyle #txtBody p{margin-bottom: 20px;}

#wrapperLowstyle .article_pager nav{display: flex; justify-content: center; list-style: none; margin-bottom: 40px;}
#wrapperLowstyle .article_pager nav li{margin: 0 20px;}
#wrapperLowstyle .article_pager nav li.prev span.arrow:before,#wrapperLowstyle .article_pager nav li.prev span.arrow:after {
    content: "";
    display: block;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    position: absolute;
    left: 0;
    bottom: 2px;
}
#wrapperLowstyle .article_pager nav li.prev a{ padding: 20px 70px 20px 40px;}
#wrapperLowstyle .article_pager nav li.prev span.arrow:before{left: -3px;}
#wrapperLowstyle .article_pager nav li.prev a:hover span.arrow:before{left: -22px;width: 50px;}
#wrapperLowstyle .article_pager nav li.prev a:hover span.arrow:after{left: -19px;}

#wrapperLowstyle .list_pager nav {list-style: none;}
#wrapperLowstyle .list_pager {
	width: 100%;
	margin: 40px 0;
}
#wrapperLowstyle .list_pager nav {
	display: flex;
	justify-content: center;
	align-items: center;
}
#wrapperLowstyle .list_pager nav li {
	width: 33px;
	height: 33px;
	margin: 0 5px;
	text-align: center;

}
#wrapperLowstyle .list_pager nav li a,
#wrapperLowstyle .list_pager nav li span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	color: #014099;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
}
#wrapperLowstyle .list_pager nav li a.link_before i{
	width: 10px;
	height: 10px;
	border-left: .1em solid #014099;
	border-top: .1em solid #014099;
	-webkit-transform: translate(-10%,0%) rotate(-45deg);
	transform: translate(-10%,0%) rotate(-45deg);
}
#wrapperLowstyle .list_pager nav li a.link_next i{
	width: 10px;
	height: 10px;
	border-right: .1em solid #014099;
	border-bottom: .1em solid #014099;
	-webkit-transform: translate(-10%,0%) rotate(-45deg);
	transform: translate(-10%,0%) rotate(-45deg);
}
#wrapperLowstyle .list_pager nav li .current_page ,
#wrapperLowstyle .list_pager nav li a:hover {
	background:#014099;
	color: #fff;
}
#wrapperLowstyle .list_pager nav li a.link_next:hover i,
#wrapperLowstyle .list_pager nav li a.link_before:hover i{
	border-color: #fff;
}

#wrapperLowstyle .wrapperWorks ul li.catNews{background: url("../images/news/newsThum.jpg") no-repeat center; background-size: cover;}
#wrapperLowstyle .wrapperWorks ul li.catNews {width: 294px; height: 294px; margin: 0px 4px 4px 0;}
#wrapperLowstyle .wrapperWorks ul li {width: 33%; margin: 0px 4px 4px 0;}
#wrapperLowstyle .wrapperWorks ul li.captionNews{width: 100%; list-style-type: none; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid;}
#wrapperLowstyle .wrapperWorks ul li.captionNews span{margin-right: 20px;}
#wrapperLowstyle .wrapperWorks ul li.captionNews a:hover{text-decoration: none;}
#wrapperLowstyle .wrapperWorks{padding: 0px;}
.txtCategoryDescription{margin-bottom: 50px;}

/* SERVICE */
.cls-2{fill:none;}
#wrapperLowstyle #pageTitle{text-align: center; font-size: 48px; padding: 53px 0; color: #014099;}
#wrapperLowstyle #pageTitle span{display: block; font-size: 18px; margin-top: 5px;}
.serviceInner{background: #014099; padding: 50px 0 65px;}
.serviceInner h3{font-size: 20px; margin-bottom: 20px; display: inline-block; color: #fff; position: relative; padding: 30px 60px 30px 40px;}
.serviceInner h3.frame-box::before{border-left: solid 1px #fff; border-top: solid 1px #fff;}
.serviceInner h3.frame-box::after{border-right: solid 1px #fff; border-bottom: solid 1px #fff;}
.serviceInner h3 i{margin-right: 10px;}
.serviceInner h3 i .cls-1{fill:#fff;}
.serviceInner h3 i,.serviceInner h3 svg{width: 33px; height: 33px; display: inline-block; vertical-align: bottom;}
.serviceInner p{color: #fff;}

.serviceInner:nth-child(even){background: #fff;}
.serviceInner:nth-child(even) h3{font-size: 20px; margin-bottom: 20px;color: #014099; position: relative;}
.serviceInner:nth-child(even) h3.frame-box::before{border-left: solid 1px #014099; border-top: solid 1px #014099;}
.serviceInner:nth-child(even) h3.frame-box::after{border-right: solid 1px #014099; border-bottom: solid 1px #014099;}
.serviceInner:nth-child(even) h3 i .cls-1{fill:#014099;}
.serviceInner:nth-child(even) p{color: #101010;}

.serviceInner ul{margin-top: 20px; list-style-type: none; display: flex; justify-content: space-around;}
.serviceInner ul li{width: 49%;}
.serviceInner ul li img{width: 100%; height: auto;}

.serviceInner:nth-child(odd) .btnColor3 a{border: 1px solid #fff;}
.serviceInner:nth-child(odd) .btnColor3 a:link,.serviceInner:nth-child(odd) .btnColor3 a:visited{color: #fff;}
.serviceInner:nth-child(odd) .btnColor3 a span.arrow:before, .serviceInner:nth-child(odd) .btnColor3 a span.arrow:after {
    background: #fff;
    transition: all .3s;
}

#serviceInfoTxt.serviceInner{padding: 50px 0; line-height: 2.1;}


/* PC */
@media screen and (min-width: 1200px) {
	#wrapperBox div dl{padding: 30px 50px;}
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	#wrapperLowstyle .wp1200{width: 90%;}
	#wrapperLowstyle #imgMian figure,#wrapperLowstyle #imgMian .copy{width: 90%;}
	#wrapperLowstyle #pageTitle{font-size: 30px;}
	#wrapperBox div dl{flex-direction: column;}
	#wrapperBox div dl div{width: 100%;}
	#wrapperBox div dl dt{width: 30%; margin-bottom: 10px;}
	#wrapperBox div dl dd{width: 70%; margin-bottom: 55px;}
	#wrapperBox div dl dd:last-child{margin-bottom: 0;}
	#wrapperLowstyle .wrapperWorks ul li img{width: 100%;}
	#wrapperLowstyle .wrapperWorks ul li{margin: 0 7px 0 0;}
	
	#wrapperLowstyle .article_pager nav li {margin: 0 10px;}
	#wrapperLowstyle .wrapperWorks ul li{width: 48.5%; margin: 0px 0px 2px;}
}

/* SP */
@media screen and (max-width: 767px) {
	#wrapperLowstyle .wp1200{width: 90%;}
	#wrapperLowstyle .titleBg h2{font-size: 1.2rem; padding: 20px 0 ;}
	#wrapperLowstyle #imgMian{padding: 30px 0 40px;}
	
	#wrapperLowstyle #pageTitle{text-align: center; font-size: 1.5rem; padding: 10vmin 0; color: #014099; width: 90%; margin: 0 auto;}
	#wrapperLowstyle #pageTitle span{display: block; font-size: 0.8rem; margin-top: 5px;}
	.serviceInner h3{font-size: 1.2rem; padding: 10px 20px; text-align: center; display: block;}
	.serviceInner:nth-child(even) h3{font-size: 1.2rem; padding: 10px 20px; text-align: center; display: block;}
	.serviceInner h3 i, .serviceInner h3 svg {width: 25px; height: 25px; display: inline-block; vertical-align: text-top;}
	.serviceInner ul{flex-direction: column;}
	.serviceInner ul li{width: 100%;}
	
	#wrapperBox div dl{flex-wrap: wrap;}
	#wrapperBox div dl div{width: 100%; margin-bottom: 30px;}
	#wrapperBox div dl div:last-child{margin-bottom: 0px;}
	#wrapperBox div dl dt{width: 30%; padding-right: 10px;}
	#wrapperBox div dl dd{width: 70%;}
	#wrapperBox div dl dt small{display: block;font-size: 0.7rem;}
	
	#wrapperLowstyle .wrapperWorks ul li img{width: 100%;}
	#wrapperLowstyle .article_pager nav{flex-wrap: wrap;}
	#wrapperLowstyle .article_pager nav li{margin: 0px 3px;}
	#wrapperLowstyle .article_pager nav li.oder1{order: 1;}
	#wrapperLowstyle .article_pager nav li.oder1 a{ padding: 20px 20px 20px 30px;}
	#wrapperLowstyle .article_pager nav li.oder2{order: 2;}
	#wrapperLowstyle .article_pager nav li.oder2 a{ padding: 20px 30px 20px 20px;}
	#wrapperLowstyle .article_pager nav li.oder3{order: 3;}
	#wrapperLowstyle .article_pager nav li.oder3 a{margin-top: 20px;}
	
	#wrapperLowstyle .wrapperWorks ul li{width: 100%; margin: 0px 0px 2px;}
	#wrapperLowstyle .wrapperWorks ul li.catNews {width: 48%; height: 159px; margin: 0px 4px 4px 0;}
	#wrapperLowstyle .wrapperWorks ul li.catNews  .caption-text{padding: 10px;}
	#wrapperLowstyle .wrapperWorks ul li.captionNews span{margin-right: 0px; display: block; margin-bottom: 5px;}
}