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


/*---------------
#hero
---------------*/
#hero{
position: relative;
}
#hero h2{
position: absolute;
top: 15%;
right: 5%;
color: #41852a;
text-align: end;
}
#hero h2 span:first-of-type,
#hero h2 span:last-of-type{
font-weight: 500;
background: #fff;
line-height: 1;
}
#hero h2 span:first-of-type{
display: block;
}
#hero h2 span:last-of-type{
display: inline-block;
}
/*---------------
#news
---------------*/
#news .box .inner ul li a{
display: flex;
align-items: center;
background-color: #eaede7;
}
#news .box .inner ul li:last-of-type a{
margin-bottom: 0;
}
#news .box .inner ul li a time{
color: #41852a;
font-weight: 500;
}
#news .box .inner ul li a h3{
font-weight: 500;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#news .box .inner a.btn{
margin-left: auto;
}
/*---------------
#about
---------------*/
#about{
background-color: #eaede7;	
}
#about .box div p{
line-height: 1.8em;
}
#about .box div a.btn{
margin-left: auto;
}
/*---------------
#service
---------------*/
#service{
background-repeat: no-repeat;
background-size: cover;
background-position: right;
}
#service p{
line-height: 1.8em;
}
/*---------------
#company-recruit
---------------*/
#company-recruit .box a{
display: block;
background: linear-gradient(45deg, rgb(128 175 46) 0%, rgb(65 133 42) 50%, rgb(128 175 46) 100%);
background-size: 200% 100%;
}
#company-recruit .box a h3,
#company-recruit .box a h3 span{
color: #fff;
}
#company-recruit .box a h3 span:before{
background-color: #fff;
}
#company-recruit .box a.recruit h3{
padding-bottom: 0;
text-align: end;
}
#company-recruit .box a.recruit h3 span{
justify-content: flex-start;
}
#company-recruit .box a p{
color: #fff;
line-height: 1.8em;
}
/*---------------
#contributions
---------------*/
#contributions{
background-color: #eaede7;
background-repeat: no-repeat;
background-size: contain;
}
#contributions .inner p{
line-height: 1.8em;
}


@media (max-width: 560px){
#hero{
margin-top: 60px;
}
/*---------------
#hero
---------------*/
#hero h2{
font-size: 2.0rem;
}
#hero h2 span:first-of-type,
#hero h2 span:last-of-type{
padding: 5px 10px;
}
#hero h2 span:first-of-type{
margin-bottom: 10px;
}
/*---------------
#news
---------------*/
#news .box .inner ul{
margin-bottom: 20px;
}
#news .box .inner ul li a{
padding: 10px 15px;
margin-bottom: 7px;
}
#news .box .inner ul li a time{
font-size: 1.2rem;
margin-right: 10px;
}
#news .box .inner ul li a h3{
font-size: 1.2rem;

}
/*---------------
#about
---------------*/
#about .box div img{
display: block;
margin: 0 auto 30px;
}
#about .box div p{
padding-bottom: 20px;
}
#about .box img{
display: none;
}
/*---------------
#service
---------------*/
#service{
background-image: url("../images/service_sp.png");
}
#service p{
padding-bottom: 20px;
}
/*---------------
#company-recruit
---------------*/
#company-recruit .box a:last-of-type{
margin-top: 20px;
}
#company-recruit .box a{
padding: 20px;
}
#company-recruit .box a:last-of-type{
background-size: 100% 200%;
}
#company-recruit .box a.conpany h3{
padding-bottom: 40px;
}
#company-recruit .box a.recruit p{
padding-bottom: 40px;
}
/*---------------
#contributions
---------------*/
#contributions{
background-image: url("../images/contributions_sp.png");
background-position: right top 40px;
padding-top: 110px;
}
#contributions .inner div a.btn{
display: none;
}
#contributions .inner p{
padding-bottom: 20px;
}
#contributions .inner > a.btn{
margin-left: auto;
}
}
@media (min-width: 561px){
#hero{
margin-top: 70px;
}
#hero h2 span:first-of-type,
#hero h2 span:last-of-type{
padding: 10px 20px;
}
#hero h2 span:first-of-type{
margin-bottom: 20px;
}
/*---------------
#news
---------------*/
#news .box{
display: flex;
justify-content: space-between;
align-items: flex-start;	
}
#news .box h3.h3-title{
width: 200px;
}
#news .box .inner{
width: calc(100% - 200px) ;
}
#news .box .inner ul{
margin-bottom: 20px;
}
#news .box .inner ul li a{
padding: 15px 20px;
margin-bottom: 10px;
transition: .3s;
}
#news .box .inner ul li a:hover{
opacity: 0.7;
transition: .3s;
}
#news .box .inner ul li a time{
font-size: 1.4rem;
margin-right: 20px;
}
#news .box .inner ul li a h3{
font-size: 1.4rem;
}
/*---------------
#about
---------------*/
#about .box{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#about .box div{
width: 48%;
}
#about .box div p{
padding-bottom: 20px;
}
#about .box div img{
display: none;
}
#about .box img{
width: 45%;
}
/*---------------
#service
---------------*/
#service{
background-image: url("../images/service_pc.png");
}
#service p{
padding-bottom: 20px;
width: 45%;
}
/*---------------
#company-recruit
---------------*/
#company-recruit .box{
display: flex;
justify-content: space-between;
align-items: stretch;
}
#company-recruit .box a{
width: 50%;
padding: 30px;
transition: .6s;
}
#company-recruit .box a:hover {
background-position: 100% 0;
transition: .6s;
color: #fff;
}
#company-recruit .box a.conpany h3{
padding-bottom: 50px;
}
#company-recruit .box a.recruit p{
padding-bottom: 50px;
}
/*---------------
#contributions
---------------*/
#contributions{
background-image: url("../images/contributions_pc.png");
background-position: right top 80px;
}
#contributions .inner{
display: flex;
align-items: flex-start;
}
#contributions .inner div{
width: 390px;
}
#contributions .inner p{
width: calc(100% - 390px) ;
}
#contributions .inner > a.btn{
display: none;
}
}
@media (min-width: 561px) and (max-width: 1024px){
/*---------------
#hero
---------------*/
#hero h2{
font-size: 3.4rem;
}
/*---------------
#contributions
---------------*/
#contributions{
padding-top: 140px;
}
}
@media screen and (min-width: 1025px){
/*---------------
#hero
---------------*/
#hero h2{
font-size: 4vw;
}
/*---------------
#contributions
---------------*/
#contributions{
padding-top: 230px;
}
}