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


/*【トップページ】セクション①
------------------------------------------------------------*/    

.index-sec01{
width: 100%;
min-height: 100vh;
overflow: hidden;
}

.index-sec01 div{
width: 50%;
min-height: 100vh;
display: flex;
justify-content:center;
align-items:center;
box-sizing: border-box;
padding: 90px 0 0 0;
margin: 0;
}


@media screen and (min-width:768px) and (max-width:899px) { 

.index-sec01{
min-height: 800px;
}

.index-sec01 div{
min-height: 800px;
}

}


@media screen and (max-width: 767px){

.index-sec01{
min-height: auto;
padding-top: 60px;
}

.index-sec01 div{
width: 100%;
min-height: 300px;
flex-direction: column;
padding: 0 0 0 0;
}

}



.index-sec01 div:nth-child(1){
float: left;
background: url("../img/top-section1-01.jpg");
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

@media screen and (max-width: 767px){

.index-sec01 div:nth-child(1){
float: none;
}

}


.index-sec01 div:nth-child(1) p{
text-align: center;
padding:0 15px 15px 15px;
filter: drop-shadow(0 0 5px rgba(0,0,0,1.00));
}

@media screen and (max-width: 767px){

.index-sec01 div:nth-child(1) p{
padding:0px 15px 0px 15px;
}

}


.index-sec01 div:nth-child(1) p span:nth-child(1){
display: block;
font-size: 4.6rem;
font-weight: 200;
line-height: 1.5;
color: rgba(255,255,255,1.00);
}

.index-sec01 div:nth-child(1) p span:nth-child(2){
display: block;
font-size: 1.9rem;
font-weight: 300;
line-height: 1.5;
color: rgba(255,255,255,1.00);
}

@media screen and (max-width: 899px){

.index-sec01 div:nth-child(1) p span:nth-child(1){
font-size: 4.0rem;
line-height: 1.5;
}

.index-sec01 div:nth-child(1) p span:nth-child(2){
text-align: left;
font-size: 1.4rem;
}

}


@media screen and (max-width: 767px){

.index-sec01 div:nth-child(1) p span:nth-child(1){
font-weight: 600;
}

}




.index-sec01 div:nth-child(2){
float: right;
background: url("../img/top-section1-02.jpg");
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

@media screen and (max-width: 767px){

.index-sec01 div:nth-child(2){float: none;}

}



.index-sec01 div:nth-child(2) p{
font-size: 4.6rem;
font-weight: 200;
color: rgba(255,255,255,1.00);
text-align: center;
line-height: 1.25;
}

@media screen and (max-width: 899px){

.index-sec01 div:nth-child(2) p{
font-size: 3.8rem;
}

}


@media screen and (max-width: 767px){

.index-sec01 div:nth-child(2) p{
font-weight: 600;
}

}


















/*【トップページ】セクション②
------------------------------------------------------------*/  
.index-sec02{
display: block;
overflow: hidden;
margin:0;
box-sizing: border-box;
position: relative;
padding: 150px 100px;
background: rgba(230,239,238,1.00);
}


@media screen and (min-width:900px) and (max-width:1023px) {

.index-sec02{
margin:0px;
padding: 90px 25px 90px 25px;
}


}


@media screen and (max-width: 899px){

.index-sec02{
margin:0px;
padding: 90px 25px 90px 25px;
}

}

@media screen and (max-width: 767px){

.index-sec02{
margin:0;
padding: 90px 25px 90px 25px;

}

}




.index-sec02 .inner{
display: flex;
justify-content: center;
align-items: center;
}

.index-sec02 .inner div{
position: relative;
box-sizing: border-box;
width: calc((100% / 3) - (50px * 2 / 3));
}

.index-sec02 .inner div:nth-child(1),
.index-sec02 .inner div:nth-child(2){
margin-right: 50px;
}


@media screen and (max-width: 899px){

.index-sec02 .inner div{
width: calc((100% / 3) - (25px * 2 / 3));
}

.index-sec02 .inner div:nth-child(1),
.index-sec02 .inner div:nth-child(2){
margin-right: 25px;
}

}


@media screen and (max-width: 767px){

.index-sec02 .inner{
flex-direction: column;
}

.index-sec02 .inner div{
width:100%;
}

.index-sec02 .inner div:nth-child(1),
.index-sec02 .inner div:nth-child(2){
margin-right: 0px;
margin-bottom: 75px
}

}






.index-sec02 .inner div p{overflow: hidden;}

.index-sec02 .inner div p img{
height: 450px;
width: auto;
object-fit: cover;
transition:1s all;
}

.index-sec02 .inner div p img:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}

@media screen and (max-width: 767px){

.index-sec02 .inner div p img{
height: 250px;
width: 100%;
object-fit: cover;
}

}





.index-sec02 .inner div h2{
overflow: hidden;
font-size: 2.2rem;
line-height: 50px;
border: 2px solid rgba(0,0,0,1.00);
margin-top:20px;
background: rgba(255,255,255,1.00);
z-index: 2;
}

.index-sec02 .inner div h2 a{
color: rgba(0,0,0,1.00);
position: relative;
z-index: 2;
display: block;
padding:0 20px;
}


@media screen and (max-width: 1100px){

.index-sec02 .inner div h2{font-size: 2.0rem;}

.index-sec02 .inner div h2 a{padding:0 15px;}

}


@media screen and (max-width: 899px){

.index-sec02 .inner div h2{font-size:1.8rem;}

.index-sec02 .inner div h2 a{padding:0 10px;}

}




.index-sec02 .inner div h2 a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
z-index: -1;
background-color:rgba(0,0,0,1.00);
transition: all 300ms linear;
}

.index-sec02 .inner div h2 a:hover {
color:rgba(255,255,255,1.00);
text-decoration: none;
}

.index-sec02 .inner div h2 a:hover:before {
left: 0;
}

.index-sec02 .inner div h2 a::after{
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f101";
position: absolute;
right: 1em;
}

































/*【トップページ】セクション③
------------------------------------------------------------*/    
    
.index-sec03{
width: 100%;
min-height: 100vh;
overflow: hidden;
}

.index-sec03 .sec03-left,
.index-sec03 .sec03-right{
width: 50%;
min-height: 100vh;
padding: 90px 0 0 0;
margin: 0;
display: flex;
justify-content:center;
align-items:center;
box-sizing: border-box;
}


@media screen and (min-width:768px) and (max-width:899px) { 

.index-sec03{
min-height: 800px;
}

.index-sec03 .sec03-left,
.index-sec03 .sec03-right{
min-height: 800px;
}

}


@media screen and (max-width: 899px){

.index-sec03 .sec03-left,
.index-sec03 .sec03-right{padding: 90px 0 90px 0;}

}


@media screen and (max-width: 767px){

.index-sec03{
min-height: auto;
}

.index-sec03 .sec03-left,
.index-sec03 .sec03-right{
width: 100%;
min-height: 350px;
padding: 0px 0 0px 0;
}

}




.index-sec03 .sec03-left{
float: left;
background: url("../img/top-section3-01.jpg");
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.index-sec03 .sec03-right{
float: right;
background:rgba(16,57,11,1.00);
position: relative;
}


@media screen and (max-width: 767px){

.index-sec03 .sec03-left{
float: none;}

.index-sec03 .sec03-right{
float: none;}

}


.index-sec03 .sec03-left .box,
.index-sec03 .sec03-right .box{
width: 260px;
height: 260px;
border:2px solid rgba(255,255,255,1.00);
background: rgba(16,57,11,0.50);
box-sizing: border-box;
padding: 20px;
position: relative;
}

.index-sec03 .sec03-left .box .inner,
.index-sec03 .sec03-right .box .inner{
position: absolute;
top: 50%;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
z-index: 5;
}

.index-sec03 .sec03-left .box .inner h2,
.index-sec03 .sec03-right .box .inner h2{
font-size: 2.8rem;
color: rgba(252,252,252,1.00);
font-weight: 600;
line-height: 1;
position: relative;
}

.index-sec03 .sec03-left .box .inner h2::after,
.index-sec03 .sec03-right .box .inner h2::after{
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f101";
padding-left: 0.5em;
font-size: 2.0rem;
position: absolute;
top:8px;
}

.index-sec03 .sec03-left .box .inner p,
.index-sec03 .sec03-right .box .inner p{
font-size: 1.5rem;
color: rgba(252,252,252,1.00);
display: block;
font-weight: 400;
line-height: 1.5;
margin-top: 20px;
}

.index-sec03 .sec03-left .box::before,
.index-sec03 .sec03-right .box::before{
content: attr(data);
display: block;
position: relative;
transition: color 300ms;
z-index: 1;
}

.index-sec03 .sec03-left .box::after,
.index-sec03 .sec03-right .box::after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
background:rgba(0,0,0,0.50);
transition: width 300ms;
width: 0;
z-index: 0;
}

.index-sec03 .sec03-left .box:hover::after,
.index-sec03 .sec03-right .box:hover::after{
width: 100%;
}

.index-sec03 .sec03-left .box .inner a,
.index-sec03 .sec03-left .box .inner a:hover,
.index-sec03 .sec03-right .box .inner a,
.index-sec03 .sec03-right .box .inner a:hover{
text-decoration: none;
}



@media screen and (max-width: 899px){

.index-sec03 .sec03-left .box .inner h2,
.index-sec03 .sec03-right .box .inner h2{
font-size: 2.4rem;
}

.index-sec03 .sec03-left .box .inner h2::after,
.index-sec03 .sec03-right .box .inner h2::after{
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f101";
padding-left: 0.5em;
font-size: 2.0rem;
position: absolute;
top:5px;
}

.index-sec03 .sec03-left .box .inner p,
.index-sec03 .sec03-right .box .inner p{
font-size: 1.4rem;

}

}

@media screen and (max-width: 767px){

.index-sec03 .sec03-left .box,
.index-sec03 .sec03-right .box{
width: 240px;
height: 240px;
}

}
























/*【トップページ】施工実績
------------------------------------------------------------*/  
.index-jisseki{
display: block;
overflow: hidden;
padding:150px 100px;
box-sizing: border-box;
position: relative;
}


@media screen and (min-width:900px) and (max-width:1190px) {

.index-jisseki{padding:150px 25px;}

}

@media screen and (min-width:768px) and (max-width:899px) {

.index-jisseki{padding:150px 15px;}

}

@media screen and (max-width: 767px){

.index-jisseki{padding: 100px 15px;}

}


.index-jisseki .inner{
display: flex;
justify-content: center;
align-items: center;
}

.index-jisseki .inner div{
position: relative;
box-sizing: border-box;
width: calc((100% / 4) - (50px * 3 / 4));
}

.index-jisseki .inner div:nth-child(1),
.index-jisseki .inner div:nth-child(2),
.index-jisseki .inner div:nth-child(3){
margin-right: 50px;
}



@media screen and (max-width: 899px){

.index-jisseki .inner div{
position: relative;
box-sizing: border-box;
width: calc((100% / 4) - (50px * 3 / 4));
}

.index-jisseki .inner div:nth-child(1),
.index-jisseki .inner div:nth-child(2),
.index-jisseki .inner div:nth-child(3){
margin-right: 50px;
}



}





@media screen and (max-width: 767px){

.index-jisseki .inner{
flex-wrap: wrap;
}

.index-jisseki .inner div:nth-child(1){
width:100%;
margin-right: 0px;
margin-bottom: 50px;
}

.index-jisseki .inner div:nth-child(2){
width: calc(50% - 7px);
margin-right: 7px;
margin-bottom: 50px;
box-sizing: border-box;
}

.index-jisseki .inner div:nth-child(3){
width: calc(50% - 7px);
margin-right: 0px;
margin-left: 7px;
margin-bottom: 50px;
box-sizing: border-box;
}


.index-jisseki .inner div:nth-child(4){
width: calc(50% - 7px);
margin-right: 7px;
margin-bottom: 0px;
box-sizing: border-box;
}

.index-jisseki .inner div:nth-child(5){
display:block;
width: calc(50% - 7px);
margin-right: 0px;
margin-left: 7px;
box-sizing: border-box;

}


.index-jisseki img{
width: 100%;
height: 130px;
object-fit: cover;
margin-bottom: 5px;
}

}

@media screen and (min-width: 768px){
.index-jisseki .inner div:nth-child(5){display: none;}
}



@media screen and (min-width: 768px){

.pc-no{display: none;}

.mob-no{display: block;}

}


@media screen and (max-width: 767px){

.pc-no{display: block;}

.mob-no{display: none;}

}




.index-jisseki .inner h2{
font-size: 3.0rem;
text-align: center;
line-height: 1;
margin-bottom: 50px;
color: rgba(50,72,70,1.00);
font-weight: 500;
}

.index-jisseki .inner h3{
font-size: 1.6rem;
text-align: left;
font-weight:normal;
color: rgba(50,72,70,1.00);
line-height: 1.3;
padding: 10px 0;
}

.index-jisseki .inner a h3{
color: rgba(50,72,70,1.00);
} 


.index-jisseki .inner div:nth-child(2) a,
.index-jisseki .inner div:nth-child(3) a,
.index-jisseki .inner div:nth-child(4) a,
.index-jisseki .inner div:nth-child(5) a{
display: block;
transition: all 300ms linear;
border-bottom: 1px solid rgba(230,239,238,1.00);
}

.index-jisseki .inner div:nth-child(2) a:hover,
.index-jisseki .inner div:nth-child(3) a:hover,
.index-jisseki .inner div:nth-child(4) a:hover,
.index-jisseki .inner div:nth-child(5) a:hover{
border-bottom: 1px solid rgba(50,72,70,1.00);
}

.index-jisseki .inner div span{
display: block;
overflow: hidden;
padding-top: 75%;
position: relative;
}

.index-jisseki .inner div span img{
display: block;
height: 100%;
object-fit: cover;
margin: 0 0 5px 0 !important;
padding: 0!important;
transition:1s all;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.index-jisseki .inner div span img:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}


@media screen and (max-width: 767px){

.index-jisseki .inner h2{
font-size: 2.8rem;
}

.index-jisseki .inner h3{
font-size: 1.4rem;
}

}


.index-jisseki .inner a:hover{
text-decoration: none;
}

.index-jisseki .inner p{
overflow: hidden;
font-size: 1.6rem;
font-weight: normal;
line-height: 50px;
margin-top:20px;
letter-spacing: 1px;
background: rgba(0,104,55,1.00);
border: 1px solid rgba(0,104,55,1.00);
z-index: 2;
border-radius: 25px;
}


@media screen and (min-width:768px) and (max-width:899px) {

.index-jisseki .inner p{
text-align: center;
}

}


@media screen and (max-width: 767px){

.index-jisseki .inner p{
font-size: 1.5rem;
font-weight:normal;
width: 80%;}

}



.index-jisseki .inner p a{
color:rgba(255,255,255,1.00);
position: relative;
z-index: 2;
display: block;
padding:0 20px;
}

.index-jisseki .inner p a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
z-index: -1;
background-color:rgba(255,255,255,1.00);
transition: all 300ms linear;
}

.index-jisseki .inner p::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
transition: width 300ms;
width: 0;
}

.index-jisseki .inner p a:hover {
color:rgba(0,104,55,1.00);
text-decoration: none;
}

.index-jisseki .inner p a:hover:before {
left: 0;
}

.index-jisseki .inner p a::after{
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f101";
position: absolute;
right: 1em;
}


@media screen and (min-width:768px) and (max-width:899px) {

.index-jisseki .inner p a::after{content: "";}

}













































/*【トップページ】施工レポート
------------------------------------------------------------*/  
.index-report{
display: block;
overflow: hidden;
padding:150px 100px;
box-sizing: border-box;
position: relative;
}

@media screen and (min-width:900px) and (max-width:1190px) {

.index-report{padding:150px 25px;}

}

@media screen and (min-width:768px) and (max-width:899px) {

.index-report{padding:150px 15px;}

}

@media screen and (max-width: 767px){

.index-report{
padding: 100px 15px;
}

}



.index-report .inner{
display: flex;
justify-content: center;
align-items: center;
}

.index-report .inner div{
position: relative;
box-sizing: border-box;
width: calc((100% / 4) - (50px * 3 / 4));
}

.index-report .inner div:nth-child(1),
.index-report .inner div:nth-child(2),
.index-report .inner div:nth-child(3){
margin-right: 50px;
}






@media screen and (max-width: 767px){

.index-report .inner{
flex-wrap: wrap;
}

.index-report .inner div:nth-child(1){
width:100%;
margin-right: 0px;
margin-bottom: 50px;
}

.index-report .inner div:nth-child(2){
width: calc(50% - 7px);
margin-right: 7px;
margin-bottom: 50px;
box-sizing: border-box;
}

.index-report .inner div:nth-child(3){
width: calc(50% - 7px);
margin-right: 0px;
margin-left: 7px;
margin-bottom: 50px;
box-sizing: border-box;
}


.index-report .inner div:nth-child(4){
width: calc(50% - 7px);
margin-right: 7px;
margin-bottom: 0px;
box-sizing: border-box;
}

.index-report .inner div:nth-child(5){
display:block;
width: calc(50% - 7px);
margin-right: 0px;
margin-left: 7px;
box-sizing: border-box;

}


.index-report img{
width: 100%;
height: 130px;
object-fit: cover;
margin-bottom: 5px;
}

}

@media screen and (min-width: 768px){
.index-report .inner div:nth-child(5){display: none;}
}



@media screen and (min-width: 768px){

.pc-no{display: none;}

.mob-no{display: block;}

}


@media screen and (max-width: 767px){

.pc-no{display: block;}

.mob-no{display: none;}

}




.index-report .inner h2{
font-size: 3.0rem;
text-align: center;
line-height: 1;
margin-bottom: 50px;
color: rgba(50,72,70,1.00);
font-weight: 500;
}


@media screen and (min-width:900px) and (max-width:1190px) {

.index-report .inner h2{
font-size:2.8rem;
}

}

@media screen and (min-width:768px) and (max-width:899px) {

.index-report .inner h2{
font-size:2.4rem;
}

}



.index-report .inner h3{
font-size: 1.6rem;
text-align: left;
font-weight:normal;
color: rgba(50,72,70,1.00);
line-height: 1.3;
padding: 10px 0;
}

.index-report .inner a h3{
color: rgba(50,72,70,1.00);
} 



@media screen and (max-width: 767px){

.index-report .inner h2{
font-size: 2.8rem;
}

.index-report .inner h3{
font-size: 1.4rem;
}

}






.index-report .inner div:nth-child(2) a,
.index-report .inner div:nth-child(3) a,
.index-report .inner div:nth-child(4) a,
.index-report .inner div:nth-child(5) a{
display: block;
transition: all 300ms linear;
border-bottom: 1px solid rgba(230,239,238,1.00);
}

.index-report .inner div:nth-child(2) a:hover,
.index-report .inner div:nth-child(3) a:hover,
.index-report .inner div:nth-child(4) a:hover,
.index-report .inner div:nth-child(5) a:hover{
border-bottom: 1px solid rgba(57,162,74,1.00);
}

.index-report .inner div span{
display: block;
overflow: hidden;
padding-top: 75%;
position: relative;
}

.index-report .inner div span img{
display: block;
height: 100%;
object-fit: cover;
margin: 0 0 5px 0 !important;
padding: 0!important;
transition:1s all;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.index-report .inner div span img:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}












.index-report .inner a:hover{
text-decoration: none;
}

.index-report .inner p{
overflow: hidden;
font-size: 1.6rem;
font-weight: normal;
line-height: 50px;
margin-top:20px;
letter-spacing: 1px;
background: rgba(57,162,74,1.00);
border: 1px solid rgba(57,162,74,1.00);
z-index: 2;
border-radius: 25px;
}

@media screen and (min-width:900px) and (max-width:1190px) {

.index-report .inner p{font-size: 1.4rem;}

}

@media screen and (min-width:768px) and (max-width:899px) {

.index-report .inner p{
font-size: 1.4rem;
text-align: center;}

}

@media screen and (max-width: 767px){

.index-report .inner p{
font-size: 1.5rem;
font-weight:normal;
width: 80%;}

}



.index-report .inner p a{
color:rgba(255,255,255,1.00);
position: relative;
z-index: 2;
display: block;
padding:0 20px;
}

@media screen and (min-width:768px) and (max-width:899px) {

.index-report .inner p a{padding:0 10px;}

}



.index-report .inner p a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
z-index: -1;
background-color:rgba(255,255,255,1.00);
transition: all 300ms linear;
}

.index-report .inner p::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
transition: width 300ms;
width: 0;
}

.index-report .inner p a:hover {
color:rgba(57,162,74,1.00);
text-decoration: none;
}

.index-report .inner p a:hover:before {
left: 0;
}

.index-report .inner p a::after{
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f101";
position: absolute;
right: 1em;
}

@media screen and (min-width:768px) and (max-width:899px) {

.index-report .inner p a::after{content: "";}

}









































/*【トップページ】セクション⑤
------------------------------------------------------------*/    
    
.index-sec05{
padding: 0 0 0 0;
}



















/* ヘッダー
------------------------------------------------------------*/

header{
background-color: rgba(255,255,255,1.00);
display: flex;
box-sizing: border-box;
position: fixed;
top:0;
z-index:9000;
width: 100%;
height: 90px;
align-items: center;
overflow: hidden;
box-shadow: 0 0 5px rgb(0,0,0,0.25);
}


@media screen and (max-width: 767px){

header{
height: 60px;
display: block;
width: calc(100% -62px);
box-sizing: border-box;
padding: 10px;
}

}



/* h1 */
header h1{
padding: 0 20px 0 30px;
}


header h2{
font-size: 1.4rem;
font-weight:500;
line-height: 1.1;
color: rgba(0,104,55,1.00);
letter-spacing: 0.05em;
}

@media screen and (max-width: 767px){

header h1{
padding:0;
}

header h1 img{
width: 150px;
height: auto;
} 

header h2{
font-size: 1.0rem;
line-height: 1;
letter-spacing: normal;
font-weight:300;
}

header h2 br{display: none;}

}





header .haedright{
margin-left: auto;
display: flex;
align-items: center;
}




.tel{
margin-right: 20px;
}

header .tel p:nth-child(1){
font-size: 1.45rem;
font-weight:500;
line-height: 1.2;
color: rgba(0,104,55,1.00);
letter-spacing: 0.05em;
}


header .tel p:nth-child(2) span{
font-size: 2.2rem;
font-weight:500;
padding-right: 0.25em;
} 

header .tel p:nth-child(2){
font-size: 3.0rem;
font-weight:500;
line-height: 1.0;
color: rgba(0,104,55,1.00);
letter-spacing: 0.05em;
}



@media screen and (max-width: 899px){

header h2{font-size: 1.3rem;}

header .tel p:nth-child(1){
font-size: 1.3rem;
}

header .tel p:nth-child(2) span{
font-size: 1.9rem;
font-weight:500;
padding-right: 0.25em;
} 

header .tel p:nth-child(2){
font-size: 2.7rem;
font-weight:500;
line-height: 1.0;
color: rgba(0,104,55,1.00);
letter-spacing: 0.05em;
}

}

@media screen and (max-width: 767px){

header .haedright{display: none}

.tel{display: none}

}











/*　ハンバーガーボタン　*/
.hamburger1 {
position:relative;
z-index : 3;
width: 42px;
height: 90px;
cursor: pointer;
padding: 0 29px;
background:rgba(0,104,55,1.00);
}

.hamburger1:hover{
background:rgba(0,104,55,1.00);
text-decoration: none;
}

.hamburger1 span {
position: absolute;
width: 42px;
height: 1px;
background:rgba(255,255,255,1.00);
transition: all 0.3s;
}

.hamburger1 span:nth-child(1) {
top: 35px;
}
.hamburger1 span:nth-child(2) {
top: 44px;
}
.hamburger1 span:nth-child(3) {
top: 53px;
}



/* ナビ開いてる時のボタン */
.hamburger1.active{background:rgba(0,104,55,1.00);}

.hamburger1.active span:nth-child(1) {
top : 48px;
transform: rotate(-30deg);
}

.hamburger1.active span:nth-child(2){
width: 0px;
}

.hamburger1.active span:nth-child(3) {
top: 48px;
transform: rotate(30deg);
}



/*　OPEN MENU　*/
.menu1 {
position: fixed;
z-index : 9999;
top  : 90px;
right : 0;
bottom: 0;
transform: translateX(100%);
transition: all 0.6s;
  
width: 300px;
box-sizing: border-box;
padding: 50px;
background-color:rgba(0,104,55,1.00);
}

.menu1 p{
color: rgba(255,255,255,1.00);
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 1px;
}

.menu1 ul {
margin-top: 30px;
padding-top: 1.5em;
border-top:1px solid rgba(255,255,255,0.25);
}

.menu1 ul li {
list-style-type: none;
font-size:1.5rem;
margin-bottom: 1em;
display: block;
}

.menu1 ul li a{
display: inline-block;
color:rgba(255,255,255,1.00);
}

.menu1 ul li a {
position: relative;
text-decoration: none;
}

.menu1 ul li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.25);
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.menu1 ul li a:hover::after {
  transform: scale(1, 1);
}

/* このクラスを、jQueryで付与・削除する */
.menu1.active {
  transform: translateX(0%);
}

@media screen and (max-width: 767px){

.hamburger1{display: none;}

.menu1{display: none;}

}


@media print{

  .menu1{display: none;}

} 
































/*フッター
------------------------------------------------------------*/   
footer{
display: block;
overflow: hidden;
padding: 90px 100px 0 100px;
background: rgba(16,57,11,1.00);
}

@media screen and (max-width: 1280px){

footer{
padding: 90px 50px 100px 50px;
background: rgba(16,57,11,1.00);
}

}

@media screen and (max-width: 767px){

footer{
padding: 50px 15px 50px 15px;
background: rgba(16,57,11,1.00);
}

}





.footer{
color: rgba(255,255,255,0.80);
overflow:hidden; 
margin-bottom: 100px;
width: 100%;
display: flex;
align-items: flex-end;
}

@media screen and (max-width: 1200px){

.footer{
display: block;
margin-bottom: 50px;}

}



.footer .footerleft{
white-space: nowrap;
padding: 0 40px 0 0;
}

@media screen and (max-width: 1200px){

.footer .footerleft{
padding: 0 0 40px 0;
text-align: center;}

}

@media screen and (max-width: 767px){

.footer .footerleft{padding: 0 0 0px 0;}

}




.footer .footerleft img{
margin-bottom: 15px;
opacity: 0.8;
}

.footer .footerleft p:nth-child(2){
font-size: 1.6rem;
margin-bottom: 20px;
line-height: 1;
letter-spacing: 1px;
font-weight: 300;
}

.footer .footerleft p:nth-child(3){
font-size: 1.4rem;
line-height: 1.5;
letter-spacing: 2px;
font-weight: 300;
}


@media screen and (max-width: 767px){

.footer .footerleft img{
margin-bottom: 10px;
}

.footer .footerleft p:nth-child(2){
font-size: 1.6rem;
font-weight:400;
}

.footer .footerleft p:nth-child(3){
font-size: 1.4rem;
font-weight:400;
}

}









.footer .footerright{
display: flex;
width: 100%;
}

.footer .footerright .linkbotan{
width: calc((100% / 3) - (20px * 2 / 3));
margin-left: 20px;
overflow: hidden;
}


.footer .footerright .linkbotan a{
color: rgba(255,255,255,0.80);
line-height: 75px;
box-sizing: border-box;
padding:0 1em;
display: block;
position:relative;
border:1px solid rgba(255,255,255,0.80);
font-weight: 400;
z-index: 2;
} 

@media screen and (max-width: 1200px){

.footer .footerright .linkbotan a{line-height: 50px;}

.footer .footerright .linkbotan:first-child{margin-left: 0px;}

}

@media screen and (max-width: 767px){

.footer .footerright{display: none;}

}



.footer .footerright .linkbotan a::after{
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f101";
position: absolute;
right: 1em;
}

.footer .footerright .linkbotan a:hover{
text-decoration: none;
color: rgba(16,57,11,1.00);
}

.footer .footerright .linkbotan a:before {
  content: '';
  position: absolute;
  top: 0;
  left: -101%;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:rgba(255,255,255,0.80);
  transition: all 300ms linear;
}

.footer .footerright .linkbotan a:hover:before {
  left: 0;
}










#footer-menu {
display: block;
height:100px;
text-align:center;
border-top: 1px solid rgba(255,255,255,0.80);
border-bottom: 1px solid rgba(255,255,255,0.80);
}

#footer-menu li { 
display:inline; 
height:100px; 
line-height:100px; 
margin:0 15px; 
font-size:1.5rem;
letter-spacing: 2px;
font-weight: 300;
}

#footer-menu li a{
color:rgba(255,255,255,0.80);
}

#footer-menu li a:hover{
color:rgba(255,255,255,0.80);
text-decoration: none;
}

#footer-menu li a {
position: relative;
text-decoration: none;
}

#footer-menu li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,00.80);
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
#footer-menu li a:hover::after {
  transform: scale(1, 1);
}

#footer-menu li:nth-last-child(1),
#footer-menu li:nth-last-child(2),
#footer-menu li:nth-last-child(3){
display: none;
}




@media screen and (max-width: 900px){

#footer-menu {
height:auto;
padding: calc(50px - 1em);
}

#footer-menu li { 
display:block; 
height:auto; 
line-height:normal; 
margin:1em; 
font-size:1.5rem;
}

}

@media screen and (max-width: 767px){

#footer-menu li { font-size:1.4rem;font-weight:400;}

#footer-menu li:nth-last-child(1),
#footer-menu li:nth-last-child(2),
#footer-menu li:nth-last-child(3){
display:block; 
}

}




#copyright{
margin: 100px 0 0 0;
font-size:1.4rem;
color: rgba(255,255,255,0.80);
text-align: center;
letter-spacing: 1px;
}




@media screen and (max-width: 767px){

#copyright{
margin: 50px 0 0 0;
font-size:1.2rem;
}

}