@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: #d80000}

#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;}}

#index1 a{color: #333;}

.link-txt a{text-decoration: underline; color: #1466E4;}
.link-txt a:hover{text-decoration: none; color: #1466E4;}

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

/* index3 */
#index3{background: url(../images/top/bg-index3.jpg) center center /cover no-repeat #fff;}


@media only screen and (min-width:992px)	{
#index3 h2 {
    display: inline;
    margin-left: auto;
    text-align: left;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-text-orientation: mixed;
    font-feature-settings: "pkna";
    font-weight: bold;
	line-height: 1.7;
    letter-spacing: -0.3em;
    font-size: 38px;
    margin-bottom: 75px;
	position: relative;
}
	#index3 h2 span{display: block;font-size: 18px;letter-spacing: 0.1em;color: #000}
#index3 h2:after{ width: 2px; height: 60px; left: inherit; bottom: inherit; right: -15px; top: 10px;background-color: #000;position: absolute; content: "";}

}

@media only screen and (max-width:991px)	{
#index3 h2 {line-height: 1.7; font-size: 28px; margin-bottom: 45px;font-weight: bold; text-align: center}
	#index3 h2 span{display: block;font-size: 18px;color: #000}}

.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: 141%; position:relative; overflow:hidden; margin-bottom:1px;}
.square-content h3{font-size:28px; text-align:center;color:#fff;line-height: 30px;padding:10px;position:absolute;top:0;bottom:0;left: 0;right: 0;}
.square-content h3 span{ font-size:18px; display:block; padding-top:15px;}
@media only screen and (max-width:991px)	{.square-content h3{font-size:20px;}}

.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: 43%;}
.square-content-inner { display: flex; justify-content: center; align-items: center; width: 100%;}
.square-content:hover { background-size: auto 110%; transition: all 0.5s ease-in;}



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



#layer{ padding-top:125px;}
@media only screen and (max-width:991px) {#layer{}}

#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: absolute;}
#layer .col-12{ padding-top:40%;}}

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

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

@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: 90%; 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 h2{color:#fff;text-align: left;font-size: 38px;font-weight: bold;margin-bottom: 45px;}
	@media only screen and (max-width:991px)	{#bg-img-contents h2{font-size: 28px;font-weight: bold;margin-bottom: 15px;}}

#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: 38px;margin-bottom: 75px; font-weight:bold; text-align: center}
	@media only screen and (max-width:991px)	{#layer h2{font-size: 28px;margin-bottom:45px;}}
#news h2:first-letter{color: #d80000}
.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 .red{color: #f00;font-size: 12px}
.news-date{width: 130px;text-align: left;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: #b92020;border-bottom: 1px solid #fff;}
#contact .con-inner{padding: 60px;  border: 1px solid #fff; color: #fff;}
#contact h2{font-size: 38px;margin-bottom: 35px;}

.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;}}