@charset "utf-8";


#index1{background: #f5f2ed; text-align:center;}


#index1 h2{color:#fff; font-weight:normal; text-align:center; margin-bottom:35px;background:#4fb0da;padding: 10px;font-size: 20px;}


.act-box,.seinen-box{padding: 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background: #fff;position: relative;}

.act-box .label img, .seinen-box .label img {
    position: absolute;
    bottom:4%;
    right: 4%;
    z-index: 100;
}

.bg_about01{
	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;
}
.square-content > div { position: absolute; top: 37%;}
.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-img-contents{background: url(../images/top/bg-img-contents.jpg) center center /cover no-repeat #fff;color:#fff;}
	@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: 60px;font-weight: bold;margin-bottom: 30px;}
	@media only screen and (max-width:991px)	{#bg-img-contents h2{font-size: 29px;font-weight: bold;margin-bottom: 15px;}}

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


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


#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{text-align: center;font-size: 32px;font-weight: bold; position:relative;color:#333;margin-bottom: 75px;}
@media only screen and (max-width:991px)	{#layer h2{font-size: 32px;margin-bottom: 30px;}}

#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(239,239,239,0.95); 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;}}


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

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

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

#layer2 h2{text-align: center;font-size: 32px;font-weight: bold; position:relative;color:#333;margin-bottom: 75px;}
@media only screen and (max-width:991px)	{#layer2 h2{font-size: 32px;margin-bottom: 30px;}}

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

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


#layer2 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)	{#layer2 h3{font-size: 18px;margin-bottom: 30px;}}

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


#news{}
#news h2{color:#fff; font-weight:bold; text-align:center; margin-bottom:35px;background: #abc33b;padding: 10px;font-size: 24px;}

.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: left;padding: 9px 0;font-size: 16px;}
	@media only screen and (max-width:991px)	{.news-date{width: auto;}}

.news-date.shp{border-bottom: 1px solid #333;}
.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{}}



#half1{background: url(../images/top/half01.jpg) right center no-repeat #f0f0f0; background-size:58%; margin-bottom:1px;}
#half1 h2{font-family: 'nserif',serif; font-size:24px; font-weight:bold; margin-bottom:30px;}
#half1 h2 span{ font-size:16px; display:block; padding-bottom:20px;}
#half1 .inner,#half2 .inner{ background:#fff; padding:120px 100px;}

#half2{background: url(../images/top/half02.jpg) left center no-repeat #f0f0f0; background-size:58%; margin-bottom:1px;}
#half2 h2{font-family: 'nserif',serif; font-size:24px; font-weight:bold; margin-bottom:30px;}
#half2 h2 span{ font-size:16px; display:block; padding-bottom:20px;}
	@media (max-width:991px)	{#half1,#half2{ background:none !important;}#half1 .inner,#half2 .inner{ background:#fff; padding:80px 20px;}}