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


h3.h3-t{
text-align: center;
font-weight: 600;
color: #333;
}
h3.h3-t:after{
content: "";
display: block;
background-color: #41852a;
}
/*---------------
#title
---------------*/
#title{
background-color: #eaede7;
}
#title h2{
font-weight: 600;
color: #41852a;
}
#title h2 span{
display: block;
font-weight: 600;
color: #333;
}
/*---------------
#service
---------------*/
#service section:nth-child(odd){
background-color: #eaede7;
}
#service section.liquidFeed .box > p span{
color: #DF0000;
}
#service section.effects .box > p{
text-align: center;
}
#service section.effects ul:after{
display: block;
content: "";
border-style: solid;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-top: 30px solid #41852a;
border-bottom: 0;
}
#service section.effects ul li{
background-color: #fff;
border-radius: 20px;
}
#service section.effects ul li h4{
font-weight: 600;
}
#service section.effects ul li h4 span{
color: #41852a;
font-weight: bold;
padding-right: 5px;
}
#service section.effects .box div p{
background-color: #41852a;
color: #fff;
font-weight: 500;
border-radius: 10px;
}
#service section.flow ul{
margin: 0 auto;
}
#service section.flow ul li{
position: relative;
background-color: #41852a;
color: #fff;
text-align: center;
letter-spacing: 0.8rem;
text-indent: 0.8rem;
font-weight: 500;
border-radius: 10px;
}
#service section.flow ul li:after{
position: absolute;
display: block;
content: "";
width: 0;
height: 0;
}
#service section.flow ul li:last-of-type:after{
display: none;
}
#service section.flow ul li:first-of-type{
background-color: #fff;
color: #41852a;
text-align: center;
font-weight: 600;
border-radius: 10px;
}
#service section.flow ul li:first-of-type span{
display: inline-block;
background-color: #9cb960;
color: #fff;
text-align: center;
font-weight: 500;
border-radius: 50px;
}
#service section.registration img{
display: block;
margin: 0 auto;
}
/*---------------
#company
---------------*/
#company section:nth-child(odd){
background-color: #eaede7;
}
#company section.greeting .box div{
text-align: end;
font-weight: 500;
}
#company section.greeting .box div span{
font-weight: 500;
}
#company section.profile table{
width: 100%;
}
#company section.profile table tr{
width: 100%;
border-top: solid 1px #00683747
}
#company section.profile table tr:last-of-type{
width: 100%;
border-bottom: solid 1px #00683747
}
#company section.history table{
width: 100%;
}
#company section.history table tr{
width: 100%;
border-top: solid 1px #00683747
}
#company section.history table tr:last-of-type{
width: 100%;
border-bottom: solid 1px #00683747
}
#company section.history table tr th{
text-align: center;
background-color: #eaede7;
}
#company section.mascot img{
display: block;
margin: 0 auto;
}
/*---------------
#csr
---------------*/
#csr section:nth-child(odd){
background-color: #eaede7;
}
#csr section.sdgs img:first-of-type{
display: block;
margin: 0 auto;
}
#csr section.sdgs p{
text-align: center;
}
#csr section.sdgs img:last-of-type{
display: block;
margin: 0 auto;
}
#csr section.priority .box > ul li h4{
text-align: center;
color: #41852a;
font-weight: 500;
}
#csr section.priority .box > ul li img{
display: block;
margin: 0 auto;
}
#csr section.priority .box > p:last-of-type{
color: #DF0000;
}
#csr section.priority .box div{
display: flex;
justify-content: center;
align-items: center;
}
#csr section.priority .box div p:first-of-type{
background-color: #DF0000;
color: #fff;
font-weight: 500;
border-radius: 10px;
line-height: 1;
}
#csr section.priority .box div p:last-of-type{
font-weight: 500;
background-image: url("../images/arrow.png");
background-repeat: no-repeat;
}
#csr section.circulation img{
display: block;
margin: 0 auto;
}
#csr section.environment ul li:last-of-type{
padding-bottom: 0;
}
#csr section.environment ul li h4{
color: #41852a;
font-weight: 600;
line-height: 1;
}
/*---------------
#ecofeed
---------------*/
#ecofeed section ul li{
display: flex;
justify-content:space-between;
align-items: flex-start;
}
#ecofeed section ul li:last-of-type{
padding-bottom: 0;
}
#ecofeed section ul li div h3{
color: #41852a;
font-weight: 600;
}
/*---------------
#partner
---------------*/
#partner section ul{
display: flex;
justify-content:space-between;
align-items: flex-start;
flex-wrap: wrap;
}
#partner section ul li a{
display: block;
border: solid 1px #333;
}
#partner section ul li a h3{
display: flex;
align-items: center;
font-weight: 600;
}
#partner section ul li a h3:before{
display: block;
content: "";
background-color: #41852a;
}
#partner section ul li a img{
display: block;
margin: 0 auto;
}
/*---------------
#news
---------------*/
#news section ul.list li{
border-top: solid 1px #00683747;
}
#news section ul.list li:last-of-type{
border-bottom: solid 1px #00683747;
}
#news section ul.list li a time{
color: #41852a;
font-weight: 500;
}
#news section ul.list li a h3{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: 500;
}
#news section .pager .pagination {
text-align: center;
}
#news section .pager .pagination li {
margin: 0 2px;
padding: 0;
display: inline-block;
background:#fff;
border: solid 1px #41852a;
width: 50px;
height: 50px;
text-align: center;
position: relative;
border-radius: 50px;
}
#news section .pager .pagination li.pre,
#news section .pager .pagination li.next {
background:#41852a;
}
#news section .pager .pagination li.pre span,
#news section .pager .pagination li.next span {
color: #fff;
}
#news section .pager .pagination li a{
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display:table;
color: #41852a;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#news section .pager .pagination li a span{
display:table-cell;
vertical-align:middle;
font-weight: 500;
}
#news section .pager .pagination li a:hover,
#news section .pager .pagination li a.active{
color: #41852a;
background: #eaede7;
border-radius: 50px;
}
/*---------------
#news-p
---------------*/
#news-p section .inner time{
color: #41852a;
font-weight: 500;
}
#news-p section .inner h3{
font-weight: 600;
}

@media (max-width: 560px){
h3.h3-t{
font-size: 2.0rem;
}
h3.h3-t:after{
width: 50px;
height: 3px;
margin: 10px auto 30px;
}
/*---------------
#title
---------------*/
#title{
margin-top: 60px;
padding: 30px 5%;
}
#title h2{
font-size: 2.4rem;
}
#title h2 span{
font-size: 1.2rem;
padding-top: 5px;
}	
/*---------------
#service
---------------*/
#service section.effects .box > p{
padding-bottom: 20px;
}
#service section.effects ul:after{
margin: 30px auto 20px;
width: 0;
height: 0;
}
#service section.effects ul li{
padding: 10px 20px;
margin-bottom: 10px;
}
#service section.effects ul li:last-of-type{
margin-bottom: 0;
}
#service section.effects ul li h4{
font-size: 1.8rem;
padding-bottom: 5px;
}
#service section.effects ul li h4 span{
font-size: 2.0rem;
}
#service section.effects .box div p{
text-align: center;
font-size: 1.8rem;
padding: 5px 10px;
margin-bottom: 10px;
}
#service section.flow ul{
width: 80%;
margin: 0 auto;
}
#service section.flow ul li{
font-size: 1.8rem;
padding: 10px;
margin-bottom: 40px;
}
#service section.flow ul li:last-of-type{
margin-bottom: 0;
}
#service section.flow ul li:after{
bottom: -30px;
left: 50%;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 20px solid #42862a;
border-bottom: 0;
transform: translateX(-50%);
}
#service section.flow ul li:first-of-type{
font-size: 2.2rem;
padding: 0px;
}
#service section.flow ul li:first-of-type span{
font-size: 1.6rem;
padding: 5px;
margin-right: 10px;
}
#service section.registration img{
width: 90%;
}
/*---------------
#company
---------------*/
#company section.greeting p{
padding-bottom: 10px;
}
#company section.greeting .box div{
font-size: 2.0rem;
}
#company section.greeting .box div span{
font-size: 1.2rem;
padding-right: 10px;
}
#company section.profile table tr th{
width: 80px;
padding: 10px;	
}
#company section.profile table tr td{
width: calc(100% - 100px) ;
padding: 10px;
}
#company section.history table tr th{
width: 90px;
padding: 10px;	
}
#company section.history table tr td{
width: calc(100% - 110px) ;
padding: 10px;
}
#company section.mascot img{
width: 80%;
}
/*---------------
#csr
---------------*/
#csr section.sdgs img:first-of-type{
padding-bottom: 20px;
width: 80%;
}
#csr section.sdgs p{
padding-bottom: 20px;
}
#csr section.sdgs img:last-of-type{
width: 50%;
}
#csr section.priority .box > p{
padding-top: 30px;
}
#csr section.priority .box > ul{
margin-bottom: 30px;
}
#csr section.priority .box > ul li{
margin-bottom: 40px;
}
#csr section.priority .box > ul li h4{
font-size: 2.0rem;
padding-bottom: 7px;
}
#csr section.priority .box > ul li img{
width: 50%;
padding-bottom: 10px;
}
#csr section.priority .box > ul li p{
width: 80%;
margin: 0 auto;
}

#csr section.priority .box div p:first-of-type{
font-size: 2.0rem;
padding: 10px;
margin-right: 15px;
width: 50px;
text-align: center;
}
#csr section.priority .box div p:last-of-type{
font-size: 1.4rem;
padding-left: 30px;
background-size: 20px;
background-position: 0px 50%;
}
#csr section.circulation p{
padding-bottom: 20px;
}
#csr section.circulation img{
width: 100%;
}
#csr section.environment ul li{
padding-bottom: 25px;
}
#csr section.environment ul li h4{
font-size: 1.8rem;
padding-bottom: 10px;
}
/*---------------
#ecofeed
---------------*/
#ecofeed section ul li{
flex-direction: column-reverse;
padding-bottom: 50px;
}
#ecofeed section ul li div h3{
font-size: 2.0rem;
padding-bottom: 7px;
}
#ecofeed section ul li img{
padding-bottom: 20px;
}
/*---------------
#partner
---------------*/
#partner section ul li{
width: 48%;
padding-bottom: 20px;
}
#partner section ul li a{
padding: 10px;
}
#partner section ul li a h3{
font-size: 1.6rem;
margin-bottom: 10px;
}
#partner section ul li a h3:before{
width: 7px;
height: 20px;
margin-right: 7px;
}
#partner section ul li a img{
width: 90%;
}
/*---------------
#news
---------------*/
#news section ul.list{
margin-bottom: 30px;
}
#news section ul.list li a{
display: block;
padding: 10px;
}
#news section ul.list li a time{
display: block;
padding-bottom: 5px;
}
#news section ul.list li a h3{
font-size: 1.6rem;
}
#news section .pager .pagination li{
display: none;
}
#news section .pager .pagination li.pre,
#news section .pager .pagination li.next{
display: inline-block;
width: 40%;
height: 40px;
text-align: center;
}
#news section .pager .pagination li.pre a,
#news section .pager .pagination li.next a{
width: 100%;
text-align: center;
}
#news section .pager .pagination li.pre span::after{
content: "　前の10件へ";
}
#news section .pager .pagination li.next span::before{
content: "次の10件へ　";
}
	
	
/*---------------
#news-p
---------------*/
#news-p section .inner time{
margin-bottom: 5px;
}
#news-p section .inner h3{
font-size: 1.8rem;
padding-bottom: 20px;
}
}

@media (min-width: 561px){
h3.h3-t{
font-size: 3.0rem;
}
h3.h3-t:after{
width: 70px;
height: 5px;
margin: 10px auto 40px;
}
/*---------------
#title
---------------*/
#title{
margin-top: 70px;
padding: 70px 5%;
}
#title h2{
font-size: 3.6rem;
}
#title h2 span{
font-size: 1.6rem;
padding-top: 15px;
}	
/*---------------
#service
---------------*/
#service section.effects .box > p{
padding-bottom: 40px;
}
#service section.effects ul{
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
#service section.effects ul:after{
margin: 40px auto 40px;
}
#service section.effects ul li{
width: calc(49% - 60px) ;
padding: 20px 30px;
margin-bottom: 20px;
}
#service section.effects ul li:nth-last-child(-n+2){
margin-bottom: 0;
}
#service section.effects ul li h4{
font-size: 2.0rem;
padding-bottom: 7px;
}
#service section.effects ul li h4 span{
font-size: 2.2rem;
}
#service section.effects .box div{
display: flex;
justify-content: center;
}
#service section.effects .box div p{
font-size: 2.2rem;
padding: 10px 20px;
margin-right: 15px;
}
#service section.effects .box div p:last-of-type{
margin-right: 0;
}
#service section.flow ul{
display: flex;
justify-content: space-between;;
align-items: stretch;
width: 80%;
margin: 0 auto;
}
#service section.flow ul li{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-size: 2.2rem;
padding: 10px;
}
#service section.flow ul li:after{
top: 50%;
right: -75%;
border-style: solid;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid #41852a;
border-right: 0;
}
#service section.flow ul li:first-of-type{
font-size: 2.2rem;
padding: 10px;
}
#service section.flow ul li:first-of-type span{
font-size: 1.6rem;
padding: 5px;
margin-bottom: 10px;
}
#service section.registration img{
width: 50%;
}
/*---------------
#company
---------------*/
#company section.greeting p{
padding-bottom: 20px;
}
#company section.greeting .box div{
font-size: 2.6rem;
}
#company section.greeting .box div span{
font-size: 1.6rem;
padding-right: 10px;
}
#company section.profile table{
max-width: 800px;
margin: 0 auto;
}
#company section.profile table tr th{
width: 160px;
padding: 20px;	
}
#company section.profile table tr td{
width: calc(100% - 200px) ;
padding: 20px;
}
#company section.history table{
max-width: 800px;
margin: 0 auto;
}
#company section.history table tr th{
width: 140px;
padding: 20px;	
}
#company section.history table tr td{
width: calc(100% - 180px) ;
padding: 20px;
}
#company section.mascot img{
width: 50%;
}
/*---------------
#csr
---------------*/
#csr section.sdgs img:first-of-type{
padding-bottom: 30px;
width: 50%;
}
#csr section.sdgs p{
padding-bottom: 30px;
}
#csr section.sdgs img:last-of-type{
width: 30%;
}
#csr section.priority .box > p{
padding-top: 50px;
}
#csr section.priority .box > ul{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 50px;
}
#csr section.priority .box > ul li{
width: 23%;
}
#csr section.priority .box > ul li h4{
font-size: 2.4rem;
padding-bottom: 10px;
}
#csr section.priority .box > ul li img{
width: 80%;
padding-bottom: 10px;
}
#csr section.priority .box div p:first-of-type{
font-size: 3.0rem;
padding: 10px 20px;
margin-right: 15px;
}
#csr section.priority .box div p:last-of-type{
font-size: 2.2rem;
padding-left: 100px;
background-size: contain;
background-position: 20px 50%;
}
#csr section.circulation p{
padding-bottom: 30px;
}
#csr section.circulation img{
width: 60%;
}
#csr section.environment ul li{
padding-bottom: 20px;
}
#csr section.environment ul li h4{
font-size: 2.0rem;
padding-bottom: 5px;
}
/*---------------
#ecofeed
---------------*/
#ecofeed section ul li{
padding-bottom: 80px;
}
#ecofeed section ul li:nth-child(even){
flex-direction: row-reverse;
}
#ecofeed section ul li div{
width: 48%;
}
#ecofeed section ul li div h3{
font-size: 2.2rem;
padding-bottom: 10px;
}
#ecofeed section ul li img{
width: 48%;
}
/*---------------
#partner
---------------*/
#partner section ul li{
width: 30%;
padding-bottom: 30px;
}
#partner section ul li a{
padding: 20px;
transition: .3s;
}
#partner section ul li a:hover{
opacity: 0.6;
transition: .3s;
}
#partner section ul li a h3{
font-size: 1.8rem;
margin-bottom: 20px;
}
#partner section ul li a h3:before{
width: 10px;
height: 30px;
margin-right: 10px;
}
#partner section ul li a img{
width: 80%;
}
/*---------------
#news
---------------*/
#news section ul.list{
width: 800px;
margin: 0 auto 60px;
}
#news section ul.list li a{
display: flex;
}
#news section ul.list li a time{
padding: 20px 25px 20px 50px;
}
#news section ul.list li a h3{
padding: 20px 50px 20px 25px;
}
/*---------------
#news-p
---------------*/
#news-p section .inner{
width: 800px;
margin: 0 auto;
}
#news-p section .inner h3{
font-size: 2.4rem;
padding-bottom: 30px;
}
}
@media (min-width: 561px) and (max-width: 1024px){
/*---------------

---------------*/
}
@media screen and (min-width: 1025px){
/*---------------

---------------*/
}