@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/*.gNaviBox {
  font-size: 16px;
  display: flex;
width: 100%;
max-width: 1200px;
margin: auto;
  justify-content: center;
}*/
.gNaviBox1{
width: 60%;
    align-self: center;
}

/* グローバルメニュー*/
.gNaviBox1 ul.menu {
  display: flex;
justify-content: flex-end;
}


.gNaviBox2 #header_menu02.close li, ul.menu{
display: none;
}



ul.menu li a{
color: #FFF;
    padding: 12px;
font-family: source-han-serif-japanese, serif;
font-style: normal;
font-weight: 200;
font-size: 14px;
}




header .menu ul li a,header .header02  a{
font-family: yu-mincho-pr6n, sans-serif;
font-style: normal;
font-weight: 400;
color: #FFF;
}

header .menu ul li:last-child,ul.menu li:last-child{
border-right: none;
}

header .menu ul li ,ul.menu li{
border-right: 1px solid #FFF;

}

header .menu ul li a,.ul.menu li a{
    padding: 10px 20px;
}

header .header02 a{
font-size: 17px;

}

.menu-header_menu-container{
width: 100%;

}

.header02 .menu  li{ 
    text-align: center;
    width: 14.2%;
    position: relative;
    padding: 20px 0;
    letter-spacing: 2.5px;
}


.headersns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    justify-content: center;
}

.headersns .line,
.headersns .facebook,
.headersns .youtube,
.headersns .tel{
    width: 30px;
    height: 30px;
    padding: 0 7px;
    align-self: center;
}
.headersns .youtube
{    width: 45px;
}


.headersns .online {
    margin-top: 3px;
    width: 112px;
    font-size: 14px;
    text-align: center;
    background-color: #00B900;
    height: 50px;
    border-radius: 12px;
    color: #FFF;
    position: relative;
}

.headersns .online a{
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    color: #FFF;
    font-weight: 800;
    bottom: 0;
	top: 5px;
	line-height:1.5em;
}

/*.menu > li {
    cursor: pointer;
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 220px;
}*/

.menu > li a strong {
    font-size: 14px;
	letter-spacing: 2.5px;
    line-height: 1.2em;
    align-items: center;
    font-weight: 500;
	display: block;
    color: #FFF;
}
.menu > li a span {
    display: block;
    font-size: 12px;
    margin-top: 7px;
    color: #FFF;
}

.spNaviBtn > div {
  display: none;
}

.menu > li ul.sub-menu {
    display: none;
    padding: 0 0 0px;
    position: absolute;
    z-index: 1000;
    flex-wrap: wrap;
background-color: rgba(2555,255,255,0.9);
}


.menu > li ul.sub-menu {
}

.menu > li ul.sub-menu li {
    width: 100%;
    border-bottom: 1px solid #0C584E;
	border-right: none;}


.menu > li ul.sub-menu li:last-child{
border: none;
}

.menu > li ul.sub-menu a{
	color: #003A30;
}

.menu > li:hover ul.sub-menu {  display: block;}



.menu > li ul.sub-menu li:hover {
opacity: 0.5;
}


.menu ul {
display: flex;
    justify-content: flex-start;
}



.spNaviBtn > div {
  display: none;
}
.menu .gNaviWrap2, .menu .open {
  display: flex;
  justify-content: center;
  box-shadow: 0px 7px 6px -3px rgba(138, 138, 138, 0.65);
  padding: 0;
}
.menu .close {
  display: block;
}
.gNaviWrap2 .spTitle {
  display: none;
}


 .spNaviBtn2, .header_menu02 .spNaviBtn2 span {
    display: inline-block;
    transition: all 0.3s;
  }




  #header_menu02.menu > li {
    padding: 15px 0px;
  }

  #header_menu02.menu > li:nth-child(2n+1){
    border-right: 1px solid #FFF;
  }


  .gNaviWrap2 {
    display: block;
    z-index: 1000;
    cursor: pointer;
    padding: 5px 15px 15px;

  }
  .spNaviBtn2 ul.menu {
    display: none;
  }
.spNaviBtn2   ul.close {
    display: none;
  }
  .menu .gNaviWrap2, .menu .open {
    display: block;
    justify-content: flex-start;
  }
  .gNaviBox2.open .menu{
    display: block;
    position: fixed;
    left: auto;
    right: 54px;
    background-color: rgba(35,24,21,0.8);
    width: 50%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999;
    top: 62px;
    display: flex;
    flex-wrap: wrap;
	    }


.gNaviBox2.open .menu li{
	width: 49%;
    border-bottom: 1px solid #FFF;
}

.gNaviBox2.open .menu a{
padding: 15px 0px;

}

.spNaviBtn2  .menu > li {
    position: relative;
  }
 .spNaviBtn2 .menu > li.title::after {
    font-family: 'Material Icons';
    content: "\e5cf";
    position: absolute;
    right: 10px;
    top: 16px;
    font-size: 20px;
  }
.spNaviBtn2  .menu > li > p::after {
    content: "";
  }
.spNaviBtn2  .menu > li:hover > p::after {
    content: "";
  }
.spNaviBtn2  .gNaviBox2.open .menu li {
    display: block;
    padding: 15px 0 5px;
    text-align: left;
    border-bottom: 1px solid #9aafc1;
  }
.gNaviBox2.open .menu li{
border-right: none; 
    width: 49.9%;
    text-align:center
  }
	


	.gNaviBox2.open .menu li:nth-child(3),
	.gNaviBox2.open .menu li:nth-child(5),
	.gNaviBox2.open .menu li:nth-child(6)
	{
	padding-bottom: 0;
	}

  .gNaviBox2.open .menu li:last-child {
    display: block;
    border-bottom: none;
  }
  .menu .spNaviBtn2, .menu .open {
    box-shadow: none;
  }
	
  .spNaviBtn2::after{
    top: 21px;
    left: -1px;
    content: "MENU";
    position: absolute;
    font-size: 11px;
	 color: #FFF;
	 font-family: source-han-serif-japanese, serif;
font-style: normal;
font-weight: 200;
   }	
	
  .spNaviBtn2, .spNaviBtn2 span {
    display: inline-block;
    transition: all 0.3s;
  }
  .spNaviBtn2 {
    z-index: 20;
    width: 36px;
    height: 19px;
    position: relative;
    top: 0;
  }
  .spNaviBtn2 span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #FFF;
    border-radius: 4px;
  }
  .spNaviBtn2 span:nth-of-type(1) {
    top: 0;
  }
  .spNaviBtn2 span:nth-of-type(2) {
    top: 8px;
  }
  .spNaviBtn2 span:nth-of-type(3) {
    bottom: 0;
  }
  .gNaviWrap2 .spTitle {
    display: block;
    font-size: 10px;
    bottom: -16px;
    right: -7px;
    color: #333;
  }
  .active .spNaviBtn2 span:nth-of-type(1) {
    transform: translateY(10px) rotate(-45deg);
  }
  .active .spNaviBtn2 span:nth-of-type(2) {
    opacity: 0;
  }
  .active .spNaviBtn2 span:nth-of-type(3) {
    transform: translateY(-6px) rotate(45deg);
  }
	
	
.gNaviBox2 .menu > li a strong {
    color: #040925;
    font-size: 18px;
}	
.gNaviBox2 .menu > li a span {
    color: #040925;
}	

 	
.gNaviBox2 .menu > li ul.sub-menu	{
display: block;
	position: relative;
    padding: 0px 0px;
	}
	
	
.gNaviBox2.open .menu  li ul.sub-menu li{
padding: 5px 0;	
background-color: #8993AB

}


/* フッターメニュー*/


#f01 {
background: #383839;
}

#f01 .menuFooter{
    padding: 60px 0px 40px;	
    height: 210px;
    flex-wrap: wrap;
    flex-flow: column wrap;
}


#f01 .menuFooter li a{
	color: #FFF;
}

#f01 .menuFooter li {
    width: 18%;
    margin-bottom: 9px;
    font-size: 15px;
}
#f01 .menuFooter li a{
text-decoration:none;}

#f01 .menuFooter li:nth-child(1){
    height: 170px;
	width: 10%;
}

#f01 .menuFooter li .sub-menu{ 
    align-content: start;
    margin-top: 10px;
}

#f01 .menuFooter li .sub-menu li{
    width: 100%;
    margin-bottom: 8px;
    font-size: 14px;
    list-style: disc;
    color: #FFF;
    list-style-position: inside;
}
#f01 .menuFooter li .sub-menu li:nth-child(1){
height: auto;
}
#f02 .f02in{
	    align-items: self-end;
    padding: 50px 0;
    justify-content: space-between;
}

#f01 ul,#f02 .f02in{
    max-width: 1200px;
    margin: auto;
    width: 100%;
	display: flex;
flex-wrap: wrap;
}

#f02 {
background: #f6f6f6;
color: #383839;
}

 #f02 .left{
    width: 27%;
}

 #f02 .right{
    width: 70%;
}

 #f02 div:nth-child(1) .logo{
    width: 81%;
    margin: auto auto auto 0;
}

#f02 div:nth-child(1) .address{
    width: 100%;
    font-size: 15px;
}


#f02 div:nth-child(1) .servicearea{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 15px;
}

#f02 div:nth-child(1) .servicearea li:nth-child(1){
width: 100%;
}

#f02 div:nth-child(1) .servicearea li:nth-child(1)::before{
content: "◆"
}

#f02 div:nth-child(1) .servicearea li{
    font-size: 13px;
    width: 33%;
}

address{
background: #383839;
}

.footersns{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    justify-content: center;
	margin-top: 5px;
}

.footersns li{
	margin: auto 10px;
}
/*----------------------------------------------------------- mobile */
@media screen and (max-width: 1025px) {
  .menu > li {
    padding: 5px 0px;
  }

  .gNaviWrap {
    display: block;
    z-index: 1000;
    cursor: pointer;
    padding: 5px 15px  15px;

  }
  ul.menu {
    display: none;
  }
  ul.close {
    display: none;
  }
  .menu .gNaviWrap, .menu .open {
    display: block;
    justify-content: flex-start;
  }
  .gNaviBox.open .menu{
    display: block;
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(35,24,21,0.8);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999;
    top: 60px;
  }
  .menu > li {
    position: relative;
  }
  .menu > li.title::after {
    font-family: 'Material Icons';
    content: "\e5cf";
    position: absolute;
    right: 10px;
    top: 16px;
    font-size: 20px;
  }
  .menu > li > p::after {
    content: "";
  }
  .menu > li:hover > p::after {
    content: "";
  }
  .gNaviBox.open .menu li {
    display: block;
    padding: 15px 0;
    text-align: left;
    border-bottom: 1px solid #9aafc1;
  }
  .gNaviBox.open .menu li {
    border-right: none;
     width: 100%;
    text-align: center;
  }
	
	/*.gNaviBox.open .menu li:nth-child(3),
	.gNaviBox.open .menu li:nth-child(5),
	.gNaviBox.open .menu li:nth-child(6)
	{
	padding-bottom: 0;
	}*/

  .gNaviBox.open .menu li:last-child {
    display: block;
    border-bottom: none;
  }
  .menu .gNaviWrap, .menu .open {
    box-shadow: none;
  }
	
  .spNaviBtn::after{
    top: 21px;
    left: -1px;
    content: "MENU";
    position: absolute;
    font-size: 11px;
	 color: #FFF;
   }	
	
  .spNaviBtn, .spNaviBtn span {
    display: inline-block;
    transition: all 0.3s;
  }
  .spNaviBtn {
    z-index: 20;
    width: 32px;
    height: 19px;
    position: relative;
    top: 0;
  }
  .spNaviBtn span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #FFF;
    border-radius: 4px;
  }
  .spNaviBtn span:nth-of-type(1) {
    top: 0;
  }
  .spNaviBtn span:nth-of-type(2) {
    top: 8px;
  }
  .spNaviBtn span:nth-of-type(3) {
    bottom: 0;
  }
  .gNaviWrap .spTitle {
    display: block;
    font-size: 10px;
    bottom: -16px;
    right: -7px;
    color: #333;
  }
  .active .spNaviBtn span:nth-of-type(1) {
    transform: translateY(10px) rotate(-45deg);
  }
  .active .spNaviBtn span:nth-of-type(2) {
    opacity: 0;
  }
  .active .spNaviBtn span:nth-of-type(3) {
    transform: translateY(-6px) rotate(45deg);
  }
	
	
.menu > li a strong {
    color: #040925;
    font-size: 18px;
}	
.menu > li a span {
    color: #040925;
}	

	
.menu > li ul.sub-menu	{
display: block;
	position: relative;
    padding: 0px 0px;
	}
	
	
.gNaviBox.open .menu  li ul.sub-menu li{
padding: 5px 0;	
background-color: #8993AB

}	
	
}
/*----------------------------------------------------------- 1400px  */
@media screen and (max-width: 1400px) {
  ul.menuFooter {
    justify-content: center;
  }
  
.menu > li a strong {
    font-size: 13px;
}	

ul.menu li a {
    padding: 12px 21px;
}
	
	
}

@media screen and (max-width: 1300px) {
ul.menu li a {
    padding: 12px 11px;
}
	
.header01 .logo {
    width: 110px;
}	
	
}


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

}

@media screen and (max-width: 1130px) {
.menu > li a strong {
    font-size: 12px;
}
ul.menu li a {
    padding: 12px 6px;
}	
	
#f01 .menuFooter {
    width: 98%;
}	
		
	
}


@media screen and (max-width: 1060px) {
.menu > li a strong {
    font-size: 11px;
}
ul.menu li a {
    padding: 12px 3px;
}
	
}



/*----------------------------------------------------------- 1024px  */
@media screen and (max-width: 1024px) {
  .menu > li a {
  }
.menu > li a strong {
    font-size: 16px;
}	

	
.header0101 {
    width: 90px;
}
	
.gNaviBox {
    width: 60px;
}	

	
.header0101 h1 span{
display: none;
}	
	
.header01 .logo {
    width: 100%;
    padding: 10px 0 0;
}	
	
.header01 {
    justify-content: space-between;
width: 30%;
	}	
	
.headersns {
width: 100%;
justify-content: flex-end;
}	
	
 #f02 .left,#f02 .right{
    width: 100%;
}

#f02 div:nth-child(1) .logo {
    width: 40%;
    margin: auto;
}	
#f02 div:nth-child(1) .address {
	width: 100%;
text-align: center;	
}
	
#f02 div:nth-child(1) .servicearea {
    justify-content: center;
    width: 40%;
    margin: 35px auto;
}
	
#f01 ul, #f02 .f02in {
    flex-wrap: wrap;
    flex-flow: column-reverse;
}	
#f02 .left {
    margin-top: 40px;
}

	
#f01 .menuFooter {
    padding: 50px 0px 40px;
    height: auto;
    flex-wrap: wrap;
    flex-flow: wrap;
	justify-content: center;
}	


#f01 .menuFooter li:nth-child(1){
height: 30px;
}	
	
#f01 .menuFooter li:nth-child(1),#f01 .menuFooter li{
	width: 38%;
	}	

		
	
}

#floatBtnBox div:nth-child(1){
display: none;
}


/*----------------------------------------------------------- 812px  */
@media screen and (max-width: 812px) {
.gNaviWrap {
    padding: 5px 10px 0px;
}	
	
.spNaviBtn::after {
    top: 16px;
}	
	
  .gNaviBox.open .menu {
    top: 63px;
    height: 60%;
  }
ul.menuFooter {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: auto;
    width: 90%;
    padding: 20px;
	flex-flow: nowrap;
	display: block;
	height: auto;
}
.menuFooter > li {
    cursor: pointer;
    border-right: none;
    border-left: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px;
}
.menuFooter > li:last-child {border-right: none;}
.menuFooter > li:nth-of-type(3n) {border-right: none;}
	
	
.sub-menu{
    display: flex;
    flex-wrap: wrap;
}	
	
.gNaviBox {
    width: 48px;
}
	
	
#f02 .f02inner {
    flex-wrap: wrap;
}	

.company1 ul li:nth-child(2) {
    width: 90%;
}	
	
.company1 .addBox {
    text-align: center;
}	

#f02 .f02inner{
justify-content: center;
}		
	
.company1,.company2{
    width: 80%;
}

.headersns .online{
display: none;	
}
	
.gNaviBox.open .menu li ul.sub-menu {
    display: flex;
    justify-content: space-between;
}	
.gNaviBox.open .menu li ul.sub-menu li{	
width: 49.8%;	}


#floatBtnBox {
    display: flex;
    width: 100%;
    top: auto;
    bottom: 0;
	flex-wrap: wrap;
    justify-content: space-around;

}

	#floatBtnBox .floatBtn:nth-child(1){
    width: 100%;
    height: 44px;
    margin-bottom: 1px;
	background-color: #171313;
	}	
	
	#floatBtnBox .floatBtn:nth-child(1) a{	
	padding: 10px 0;
	}
	#floatBtnBox .floatBtn{
    position: relative;
    width: 49.7%;
	writing-mode: horizontal-tb;
    margin: 0px;
    background-color: #C74400;
    color: #FFF;
    border-radius:  0 0;
    height: 70px;
	}
	
.headersns {
    width: 86%;
    justify-content: flex-end;
}

.header01 {
    justify-content: space-between;
}
	

	

.headerin {
}	
	
.headersns .online {
    margin-top: 0px;
    width: 100px;
}	
	
	
#floatBtnBox div:nth-child(1){
display: block	
}
	
#floatBtnBox .floatBtn a {
    background-color: rgba(255,255,255,0);
    writing-mode: horizontal-tb;
    padding: 39px 0 0;
    font-weight: 100;
    bottom: 0;
    border-radius: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 12px;
}	

#floatBtnBox .floatBtn:nth-child(2) a::before ,
#floatBtnBox .floatBtn:nth-child(1) a::before {
    width: 35px;
    height: 38px;
    top: 5px;
    left: 0;
    right: 0;
    margin: auto;
}	

#f01 .menuFooter li:nth-child(1), #f01 .menuFooter li {
    width: 94%;
}
	
}
/*----------------------------------------------------------- 630px  */
@media screen and (max-width: 630px) {
  .menuFooter > li {
    width: 100%;
  }
  .menuFooter > li:nth-of-type(3n) {border-right: none;}
  .menuFooter > li:nth-of-type(2n) {border-right: none;}
	
.menu > li a span {
    margin-top: 0px;
}	
	
.gNaviBox.open .menu li {
    padding: 5px 0 5px;
}	
	
#f02 div:nth-child(1) .servicearea {
    width: 90%;
}	
#f02 div:nth-child(1) .logo {
    width: 70%;
}	

.footersns {
    margin-top: 20px;
}	
	
}
/*----------------------------------------------------------- 480px  */
@media screen and (max-width: 480px) {
.menu > li a {
}
.menuFooter > li a {
    white-space: pre-wrap;
}
.menuFooter > li {
    width: 100%;
}
	
	ul.menuFooter{
	padding: 20 0;
	}
	
	
#floatBtnBox .floatBtn {
    width: 49.5%;
	font-size: 12px;
}	
	
	
}


.gNaviBox2.pc  {
    display: flex;
    flex-flow: row-reverse;
}

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

.gNaviBox2.pc  {
    display: none;
}
	
	
}