@charset "utf-8";



#index1 h2{color:#000;font-size: 38px;margin-bottom: 75px; font-weight:bold; text-align: center}
	@media only screen and (max-width:991px)	{#index1 h2{font-size: 28px;margin-bottom:45px;}}
#index1 h2:first-letter{color: #004181}

#index1 h2 span{ font-size:20px; color:#333; display:block; padding-top:15px; font-weight:bold;}

@media only screen and (max-width:991px)	{#index1 h2 span{ display:block;}}


#index1 h3{text-align:left;font-size: 16px;margin-bottom: 25px;font-weight: bold; position:relative; line-height:1.7}
@media only screen and (max-width:991px)	{#index1 h3{font-size: 16px;margin-bottom: 30px;}}



#index2 h2{color:#000;font-size: 48px;margin-bottom: 75px; font-weight:bold; text-align: center;line-height: 2}
#index2 h2 span{font-size: 18px;display: block;letter-spacing: 4px;}
	@media only screen and (max-width:991px)	{#index2 h2{font-size: 38px;margin-bottom:45px;}}
#index2 h2:first-letter{color: #004181}

/* index3 */
#index3 h2{color:#000;font-size: 48px;margin-bottom: 75px; font-weight:bold; text-align: center;line-height: 2}
#index3 h2 span{font-size: 18px;display: block;letter-spacing: 4px;}
	@media only screen and (max-width:991px)	{#index3 h2{font-size: 38px;margin-bottom:45px;}}
#index3 h2:first-letter{color: #004181}



.staffbox{}
.staffbox .img-st{position: relative;}
.staffbox h3{position: absolute;bottom: 0;left: 0;right: 0; font-weight: bold;font-family:'nserif',serif;font-size: 18px;color: #fff;padding: 25px;z-index: 2;}
.staffbox h3 span{display: block;padding-bottom: 15px;font-size: 28px;line-height: 1.7}
.staffbox .img-st:before{
position: absolute;
content: "";
width: 100%;
height: 50%;
z-index: 1;
left: 0;
bottom: 0;
background: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.7)),to(transparent));
background: linear-gradient(0deg,rgba(0,0,0,.7),transparent);
-webkit-transform-origin: bottom;
transform-origin: bottom;
transition: .2s;}
.staffbox a:hover img{opacity: 1;}
.staffbox a:hover .img-st:before{
position: absolute;
content: "";
width: 100%;
height: 100%;
z-index: 1;
left: 0;
bottom: 0;
background: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.7)),to(transparent));
background: linear-gradient(0deg,rgba(0,0,0,.7),transparent);
-webkit-transform-origin: bottom;
transform-origin: bottom;transition: .2s;}

.square-content{ display: block; height: 0; width: 100%; padding-bottom: 100%; position:relative; overflow:hidden; margin-bottom:1px;}
.square-content h3{font-size:28px; text-align:center;color:#fff;line-height: 30px;padding:10px;top:0;bottom:0;left: 0;right: 0;}
.square-content h3 span{ font-size:20px; display:block; padding-top:15px;letter-spacing: 2px;font-weight: bold;}
@media only screen and (max-width:991px)	{.square-content h3 span{font-size:18px;letter-spacing: 0px;}}

.bg_about01,.bg_about02,.bg_about03,.bg_about04,.bg_about05{
	background: no-repeat center center;
	background-size: auto 100%;
	-webkit-transition:0.5s ease-in-out;
	-moz-transition:0.5s ease-in-out;
	-ms-transition:0.5s ease-in-out;
	-o-transition:0.5s ease-in-out;
	transition:0.5s ease-in-out;
	overflow:hidden;
}

.bg_about01{background-image: url(../images/top/square-img01.jpg) ;}
.bg_about02{background-image: url(../images/top/square-img02.jpg);}
.bg_about03{background-image: url(../images/top/square-img03.jpg);}
.bg_about04{background-image: url(../images/top/square-img04.jpg);}
.bg_about05{background-image: url(../images/top/square-img05.jpg);}

.square-content > div { position: absolute; top: 35%;}
.square-content-inner { display: block; justify-content: center; align-items: center; width: 100%;}
.square-content:hover { background-size: auto 110%; transition: all 0.5s ease-in;}
.square-content:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    opacity: 0.3;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
    background: #000;
}
.square-content:hover::before {
    -webkit-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}


@media only screen and (max-width:991px) {.square-content > div { position: absolute; top: 20%;}}


.sv-box{box-shadow: 0 10px 40px rgba(0,0,0,.1);position: relative}
.sv-box .inner .text-area{padding: 15px;}
.sv-box a .inner{color: #333;}
.sv-box h3{font-weight: bold;color: #333;margin-bottom: 20px;font-size: 18px; text-align: center}

.bg-bllue{background: #000 !important;}

.sv-box:after{
	content: "";
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: block;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-right: 6px solid #004181;
	border-bottom: 6px solid #004181;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;}

.sv-box:hover:after {
    -moz-transform: translate(2px, 2px);
    -ms-transform: translate(2px, 2px);
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.result-box{position: relative;box-shadow: 0 10px 40px rgba(0,0,0,.1);background: #004181;}
.result-box:after{
	content: "";
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: block;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-right: 6px solid #fff;
	border-bottom: 6px solid #fff;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;}

.result-box:hover:after {
    -moz-transform: translate(2px, 2px);
    -ms-transform: translate(2px, 2px);
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.result-box h3{font-size: 20px; margin-bottom: 0;color: #fff;}



#layer{ padding-top:125px;}
#layer{background: url(../images/top/layer-gray.jpg) center center /cover no-repeat #fff;}
@media only screen and (max-width:991px) {#layer{padding-top: 45px;}}

#layer .top_img{position: relative; top: 0; left: 0; width: 60%;}
#layer .top_img span { display: block; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute;}

@media only screen and (max-width:991px) {#layer .top_img{width: 100%;}
#layer .top_img span{ display: block; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position:relative;}
#layer .col-12{}}

#layer h2{color:#000;font-size: 38px;margin-bottom: 75px; font-weight:bold; text-align: center;line-height: 2}
	@media only screen and (max-width:991px)	{#layer h2{font-size: 28px;margin-bottom:45px;}}
#layer h2:first-letter{color: #004181}

#layer h2 span{font-size: 18px; display: block; letter-spacing: 4px;}

@media only screen and (max-width:991px)	{#layer h2 span{ display:block;}}


#layer h3{text-align:left;font-size: 24px;margin-bottom: 35px;font-weight: bold; position:relative; line-height:1.7}
@media only screen and (max-width:991px)	{#layer h3{font-size: 18px;margin-bottom: 30px;}}

#layer .inner{ background-color: rgba(255,255,255,0.9); padding:80px 80px; color:#333;}
@media only screen and (max-width:991px)	{#layer .inner{padding:25px 20px;display: block;width: 100%; margin-left:auto; margin-right:auto;}}



#bg-img-contents{background: url(../images/top/bg-img-contents.jpg) center center /cover no-repeat #fff;color:#fff;padding: 110px 0px;}
	@media only screen and (max-width:991px)	{#bg-img-contents{background: url(../images/top/bg-img-contents.jpg) center center /cover no-repeat; }}
#bg-img-contents p{line-height: 2;font-size: 16px;}
#bg-img-contents h2{color:#fff;font-size: 48px;margin-bottom: 75px; font-weight:bold; text-align:left;line-height: 2}
#bg-img-contents h2 span{font-size: 18px;display: block;letter-spacing: 4px;}
	@media only screen and (max-width:991px)	{#bg-img-contents h2{font-size: 38px;margin-bottom:45px;}}

#bg-img-contents .lead{font-size: 18px;line-height: 2;margin: 30px 0;}
	@media only screen and (max-width:991px)	{#bg-img-contents .lead{font-size: 16px;line-height: 2;margin: 15px 0;}}



#index4{}
#index4 h2{color:#000;font-size: 38px;margin-bottom: 75px; font-weight:bold;}
	@media only screen and (max-width:991px)	{#index4 h2{font-size: 28px;margin-bottom:45px;}}



#news{}
#news h2{color:#000;font-size: 48px;margin-bottom: 75px; font-weight:bold; text-align: left;line-height: 2;}
#news h2 span{font-size:18px;display: block; letter-spacing: 4px;}
	@media only screen and (max-width:991px)	{#layer h2{font-size: 38px;margin-bottom:45px;}}
#news h2:first-letter{color: #004181}
.news-box{}

.news-article{display: table;width: 100%;align-items:center;}
	@media only screen and (max-width:991px)	{.news-article{display: block;}}

.news-article + .news-article{margin-top: 15px;}

.news-date,.news-comment{display: table-cell;vertical-align: top;}
	@media only screen and (max-width:991px)	{.news-date,.news-comment{display: block;}}

.news-date{width: 110px;text-align: center;padding: 9px 0;}
	@media only screen and (max-width:991px)	{.news-date{width: auto;}}

.news-date.shp{border-bottom: 1px solid #000;}
.news-date.tpc{border-bottom: 1px solid #00c1ff;}

.news-comment{border-bottom: 1px solid #999;padding: 9px 15px;}
	@media only screen and (max-width:991px)	{.news-comment{}}


#contact{background: #004181;border-bottom: 1px solid #fff;}
#contact .con-inner{padding: 60px;  border: 1px solid #fff; color: #fff;}
#contact h2{font-size: 38px;margin-bottom: 35px;line-height: 2}
#contact h2 span{font-size:18px;display: block;}

.check{list-style: none;}
.check li{font-size: 18px;line-height: 48px;padding-left: 45px;padding-left: 48px;position: relative;}
	@media (max-width:991px)	{.check li{font-size: 16px;line-height: 24px;padding-left: 24px;}}

.check li:before{content: "";background: url(../images/common/checkmark.png) left center /30px no-repeat;width: 30px;height: 48px;display: block;position: absolute;top: 0;left: 0;right: 0;}
	@media (max-width:991px)	{.check li:before{width: 30px;height: 24px;background-size:20px;}}

.comment{font-size: 18px;line-height: 48px;padding-left: 45px;padding-left: 48px;position: relative;}
	@media (max-width:991px)	{.check li{font-size: 16px;line-height: 18px;padding-left: 24px;}}