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


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;	
-webkit-text-size-adjust: 100%;
    word-break: break-word;    
}
body {
font-size: 15px;
line-height: 1.75;
letter-spacing: 0.1em;
color: #454545;   
font-family: 'Zen Old Mincho', serif;
font-weight: 400;  
      
}


.fullscreenmenu{
display: none;
}
	.h100{
height: 100px;		
	}
	.h50{
height: 50px;		
	}
	.h30{
height: 30px;		
	}	
	.h20{
height: 20px;		
	}
	.h10{
height: 10px;		
	}
a{
	text-decoration: none;	
}
li{
	list-style-type: none;
}

section{
 padding: 100px 0;
}
.inner{
   width:calc(100% - 260px);  
display: block;  
margin-left: 260px;    
}
.text-shadow {
    text-shadow: 
       1px  1px 1px #454545,
      -1px  1px 1px #454545,
       1px -1px 1px #454545,
      -1px -1px 1px #454545,
       1px  0px 1px #454545,
       0px  1px 1px #454545,
      -1px  0px 1px #454545,
       0px -1px 1px #454545;    
    }
.text1{
font-size: 1em;  
line-height: 200%; 
 color: #454545;    
}
.text1 strong{
font-size: 1.5em;    
display: block;  
line-height: 1.5;    
}
.text1 .small{
font-size: 0.8em;  
}
.text2{
font-size: 1.3em;    
line-height: 1.5;     
}
.text3 {
  position: relative;
  display:block;
  padding: 0 45px;
text-align: center;    
width: 80%; 
margin: 0 auto;
color: #063F6B;
font-size: 1.5em;    
}
.text3:before{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: #063F6B;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.text3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: #063F6B;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.text3:before {
  left:0;
}
.text3:after {
  right: 0;
}
.sp{
display: none!important;
}
.sp_l{
      text-align: center;
    }

.tb_l{
      text-align: center;
    }

 
/*スクロールするコンテンツ*/
.scrollbox {
  background-color: #111;
}
.background1{
position: absolute;
width: 100%;
height: 100%;    
display: block;
background:rgba(14,137,234,0.5);
top: 0;
left: 0; 
z-index: 99;    
}
.background2{
width: 100%;
height: auto;   
background:rgba(14,137,234,0.05); 
}
.background3{
width: 100%;
   background-image: url('../img/background2.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; 
}
.background4{
width: 100%;
   background-image: url('../img/background4.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;   
}
.container{
width: 95%;    
margin: 0 auto;
display: block;	
}

.flex-box1{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:space-between;
align-items:center;    
}
.flex-box2{
width: 50%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:center;
align-items:center;  
margin: 0 auto;
}
.flex-box3{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:space-around;
align-items:center;  
}
.flex-box4{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:center;
align-items:center;  
margin: 0 auto;
}
/*===オープニングアニメーション==============================*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #0E89EA;
    z-index: 9998!important;
}

.loader,
.loader:before,
.loader:after {
	background: #ffffff;
	-webkit-animation: load1 1s infinite ease-in-out;
	animation: load1 1s infinite ease-in-out;
	width: 1em;
	height: 4em;
}
.loader {
	color: #ffffff;
	text-indent: -9999em;
	margin: 88px auto;
	position: relative;
	font-size: 11px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before,
.loader:after {
	position: absolute;
	top: 0;
	content: '';
}
.loader:before {
	left: -1.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}
@keyframes load1 {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}
/*===スライダー==============================*/
.top_slider{
	overflow: hidden;
     height: 100vh;
    min-height: 500px;        
}

.top_slider .slider{
   width:calc(100% - 260px);  
display: block;  
margin-left: 260px; 
}
.top_slider .slider li{
	width: 100%;
	height: 100vh;
	position: relative;
}

@keyframes apper {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.top_slider .slider li .slide_img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.1);
}
.top_slider .slick-active .slide_img{
	position: relative;
	animation: zoom 9s ease-in-out 0s forwards;
}
@keyframes zoom {
  0% {
		transform: scale(1);
	}
  100% {
		transform: scale(1.1);
	}
}


/*キャッチ*/
.top_slider li .catch{
	position: absolute;
	top: 50%;
	top: 50%;
    left: 0;
	transform: translateY(-50%);
	width: 100% ;
	pointer-events: none;
	text-align: center;
	opacity: 0;
   z-index: 980!important;
}

.top_slider li .catch p{
	font-weight: bold;
	font-size: 3em;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 10px #333;
}
.top_slider li .catch .strong{
	font-weight: bold;
	font-size: 1.2em;
}
.top_slider .slick-active .catch{
	animation: UpDown 10s ease-in-out;
}
/*Safariのみ*/
::-webkit-full-page-media, :future, :root .top_slider li .catch{
	opacity: 1;
}
::-webkit-full-page-media, :future, :root .top_slider .slick-active .catch{
	animation: none;
}
@keyframes UpDown {
	0% {
		opacity: 0;
		transform: translateY(-40%);
	}
	30% {
		opacity: 1;
		transform: translateY(-50%);
	}
	40% {
		opacity: 1;
		transform: translateY(-50%);
	}
	80% {
		opacity: 1;
		transform: scale(1) translateY(-50%);
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: scale(0) translateY(-50%);
	}
}
.top_view{
   width:calc(100% - 260px);  
display: block;  
margin-left: 260px; 
height: 400px;
overflow: hidden;   
}
.top_img{
width: 100%;
height:400px;    
background: url("../img/top4.jpg");
background-position: center;
background-size: cover;   
display: block; 
position: relative;    
}
.top_img p{
width: 100%;    
font-size: 2em;
color: #fff;  
     position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
text-align: center;
}
.top_img .small{
    color: #fff;
    font-size: 0.8em;
  display: block  
}
/*パンクズ */
.breadcrumb {
position: absolute;
bottom: 10px;
left: 30px; 
width: 100%;    
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
font-size: 0.8em;
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #fff;
}

.breadcrumb li:last-child:after {
  content: '';
}
.breadcrumb .item_text{
color: #fff;    
}
.breadcrumb li a {
  text-decoration: none;
  color: #fff;  
}
.breadcrumb li a:hover {
  text-decoration: underline;
}

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:50px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:20%;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#fff;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#fff;
}


.headline1{
 font-size:1.5em;    
  position: relative;
  padding: 1rem 2rem;
  border-bottom: 1px solid #c0e1fb;
text-align: center;
}

.headline1:before {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 20%;
  height: 1px;
  content: '';
  background: #fff;
}
.headline2{
 font-size:1.5em;    
  position: relative;
  padding: 1rem 2rem;
  border-bottom: 1px solid #0B6DB8;
text-align: left;
}

.headline2:before {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 20%;
  height: 1px;
  content: '';
  background: #56ACEE;
}
.midashi{
width: 100%;    
height:auto;      
display: block;    
}

.midashi_l h2{
width: 100%;     
font-size: 1.5em;		
text-align:left;	
font-weight: 700;   
color: #454545;  
line-height: 1.5;    
}
.midashi_l strong{
font-size: 2em;		
color:#0E89EA;   
display: block;    
text-align: left;  
z-index: -5;
display: block;
font-family: 'Nuosu SIL', serif;      
}

.midashi_c h2{
width: 100%;     
font-size: 1.5em;		
text-align:center;	
font-weight: 700;   
color: #454545;  
line-height: 1.5;    
}
.midashi_c strong{
font-size: 2em;		
color:#0E89EA;   
display: block;    
text-align: center;  
z-index: -5;
display: block;
font-family: 'Nuosu SIL', serif;      
}

.top_menu{
width: 100%;
height: auto;
display: inline-block;
    
}

.top_menu .menu_t{
width: 100%;
display: block;
}

.top_menu .menu_t .logo{
width:150px;	
display: block;
margin: 0 auto;    
}
.top_menu .menu_t .logo img{
width:100%;	
}


.top_menu .m1{
width: 90%;	
display: block;
margin: 0 auto;
}

.top_wrapper-side{
width: 270px;  
height: 100vh!important; 
min-height: 500px;    
position:fixed;
top:0; 
left: 0;
z-index: 999;
height: auto;
transition: all 0.5s;	
background: #fff;   
display: block;   
overflow-y: scroll;    
}
.top_wrapper-side::-webkit-scrollbar{
overflow: hidden;
width: 1px;
background: transparent;
}
.top_wrapper-side .transform{
	background: rgba(0, 0, 0, 0.3);
	padding: 10px 0;
}

/*==ナビゲーション全体の設定*/
nav{
  color: #5070b0;
}
/*ナビゲーションを横並びに*/
nav ul{
  list-style: none;
}
nav ul .small{
display: block;
font-size: 0.5em; 
color: #0E89EA;
font-family: 'Nuosu SIL', serif;    
}


/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
width: 100%;   
}

/*ナビゲーションのリンク設定*/
nav ul li a{
display: block;
text-decoration: none;
transition:all .3s;
font-weight: 500; 
font-size: 0.9em;
color: #454545;
text-align: left;
margin: 1em 0 0;   
}



nav ul li a:hover{
 opacity: 0.5;
text-decoration: transparent;
}


.t-con{
width: 100%;
display:block;       
}

.t-btn1{
width: 100%;	    
font-size: 1em;	   
transition: all 0.5s;  
display: block;  
text-align: center; 
padding: 0.5em 0;
border: 1px #0E89EA solid; 
vertical-align: middle;  
color: #fff;
background: #0E89EA;  
display: block;
margin: 5% auto 0;
}
.t-btn1:hover{ 
background: #fff;  
 color: #0E89EA;   
text-decoration: transparent;    
}

.t-btn2{   
width: 100%;	    
font-size: 2.5em;	   
transition: all 0.5s;   
display: block;  
text-align: center;  
margin-right: 10px;      
}
.t-btn2:hover{ 
opacity: 0.5;    
text-decoration: transparent;    
}

@keyframes bg_slide {
    100% {
        transform-origin: left top;
        transform: scaleX(1.0);
    }
    0% {
        transform-origin: left top;
        transform: scaleX(0.0);
    }
}


/*===ボタン===*/


.width1{
width: 50%;    
}
.width2{
width: 80%;    
}
.width3{
width:300px;    
    
}
.width4{
width: 20%;    
}
.button {
      background: rgba(255,255,255,0.8);
     border:1px solid #fff;  
  position: relative;
  display: inline-block;
  color: #0E89EA;
  text-align: center;
  text-decoration: none;
  transition: .3s;
    display: block;
    margin: 0 auto;
    z-index:999;
    padding: 1%;
    font-size: 1em;
    margin-top: 3%;
    overflow: hidden;
    
}
.button:hover {
    border-radius: 5px;
     border:1px solid #fff;  
      color: #fff;
}
.button::before {
  position: absolute;
     background:#0E89EA;  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.button:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
      z-index: -1;
}

.button2 {
      background:#0E89EA;
     border:1px solid #fff;  
  position: relative;
  display: inline-block;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: .3s;
    display: block;
    margin: 0 auto;
    z-index:999;
    padding: 1%;
    font-size: 1em;
    margin-top: 3%;
    overflow: hidden;
    
}
.button2:hover {
    border-radius: 5px;
     border:1px solid #0E89EA;  
      color: #0E89EA;
}
.button2::before {
  position: absolute;
     background:#fff;  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.button2:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
      z-index: -1;
}

/*====ご挨拶===*/

.greeting-box{
width: 100%;
height: 100%;
display: block;
background: url("../img/background1.png");
background-size: cover;
background-position: center;  
overflow: hidden;    
}

.greeting{
width: 100%; 
height: auto;   
padding: 5%;  
background: rgba(255,255,255,0.5); 
 position: relative;
z-index: 5;    
}
.g-text{
width: 100%;
background: rgba(14,137,234,0.7);  
padding: 2em;    
border:2px solid #fff;  
}
.greeting-text strong{
font-size: 1.3em;
display: block; 
 font-weight: 500; 
text-align:center;    
}
.greeting-text {
display: block;
margin: 0;    
font-size:1em;
text-align:left;
line-height:200%;  
color: #fff;    
}
.block2 {
  position: relative;
  z-index: 0;
}
.block2::after{
  content: '';
  position: absolute;
  right:0;
  bottom: 0;
  
  /*四角形を傾けます*/
  transform: skewX(30deg);
  transform-origin: top right;
  
  z-index: 2;
  width:60%;
  height:100%;
  background:rgba( 14, 137, 234,0.7);
}
/*==共通===*/

.item-box{
width: 100%;
height: auto;
display: block;  
position: relative;
overflow: hidden;    
}
.item-titl{
width: 10%;
display: block;
margin: 0 auto;
}
.item-text{
width: -moz-fit-content;
width: fit-content;  
margin: 0 auto;
display: block;  
}
.item-tf{
position: absolute;
z-index: 10;    
width: 90%;
background:rgba(255,255,255,0.9); 
bottom: -100px;
right: 0;  
padding:5% 5% ;   
display: block;  
box-shadow: 2px 2px 5px #eee;    
}
.item-pr{
width:calc(100% / 2); 
position: relative;
}
.item-pr img{
width: 100%;    
}

.item-tr1{
position: absolute;
z-index: 10;    
width: 95%;
background:rgba(6,63,172,0.9); 
top: 5px;
left: 5px;    
display: block;  
padding: 1em;     
}

.item-tr2{
position: absolute;
z-index: 10;    
width: 95%;
background:rgba(6,63,172,0.9); 
bottom: 10px;
right: 5px;   
display: block;   
padding: 1em;    
}
.item-pf{
width: 100%;   
position: relative;   
}
.item-pf img{
width: 100%;     
}
.item-box_flex{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:space-between;
align-items:center; 
position: relative;
z-index: 99;    
}

.item-t{   
width: 50%;
padding:5% 5%;   
display: block;    
}
.item-p{
width: 50%;    
}
.item-p img{
width: 100%;      
}
.item_b{
position: absolute;
left: 0;
bottom: 20px;    
background: url("../img/background3.png");
background-position: right;
background-size: 100%;    
width: 80%;
height: 65%;   
z-index: 90;   
}


/*====TOP施工実績===*/
.w-text1{
font-size: 1em;
color: #fff;   
text-align: center;    
}
.w-text1 strong{
font-size: 1.5em; 
color: #fff;    
}
.works-box{
width: 100%;  
position: relative;    
}

.works1{
 width:30%;   
    display: block;
    padding: 1%;
    background: #0E89EA;
    margin: 0 auto;
}
.works2{
 width:30%;   
    display: block;
    padding: 1%;
    background: #0E89EA;
     margin: 0 auto;
}
.caret{
width: 5%;
display: block;
font-size: 2em;
text-align: center;    
}
.works1 img{
  width:100%;  
display: block;
margin: 0 auto;
}
.works2 img{
  width:100%;  
display: block;
margin: 0 auto;
}

.w-table{
width: 100%;
display: block;    
}
.w-table table{
    width: 100%;
}
.w-table tr{
width: 100%;   
border-bottom: 1px solid #ffff;     
    
}
.w-table th{
width: 40%;	
text-align: center;
padding: 1%;
font-size: 1em;	
background: #4169E1;
color: #fff;    
}

.w-table td{
width: 60%;	
text-align: left;
padding: 1% 1em;
line-height: 1.75;	
font-size:1em;	
background:#EDEDED;    
color: #333;    
}
.wrap2 {
  display: flex;
  align-items: center;
 height: 280px;
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.slideshow {
  display: flex;
  animation: loop-slide 20s infinite linear 1s both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.content {
  width: 300px;
  height: 200px;
}
.content:nth-child(1) {
  background:url("../img/w1.jpg");
    background-size: cover;
    background-position: center;
}
.content:nth-child(2) {
  background:url("../img/w2.jpg");
    background-size: cover;
    background-position: center;
}
.content:nth-child(3) {
  background:url("../img/w3.jpg");
    background-size: cover;
    background-position: center;
}
.content:nth-child(4) {
  background:url("../img/w4.jpg");
    background-size: cover;
    background-position: center;
}
.slide-paused:hover .slideshow {
  animation-play-state: paused;
}
/*====コンテンツ===*/
.btn3{  
display: block;
margin: 0 auto;
}
.button3{
    display:block;
    background:#0E89EA;
    text-align:center;
    color:#fff;
    cursor:pointer;
    text-decoration: none;
     font-size: 1em;
    border:2px solid #0E89EA;
    width:70%;
padding: 1% 0;     
transition: all 0.5s;  
margin: 3% auto 0;
font-weight:500;
}
.button3:hover{
    display:block;
    background:#fff;
    border:2px solid #0E89EA;
    color:#0E89EA;
text-decoration: transparent;  
}

.contents-box{
width: 98%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:space-around;
align-items:center;    
margin: 0 auto -30px;
}
.contents{
width:calc(90% / 2);   
	margin-bottom: 30px;
	border: 2px solid #fff;;  

}

.cont-box{
	display: block;
	width: 100%;
	position: relative;
	padding: 30px; 
}
.cont-box .blur{
	position: relative;
	border: 2px solid #fff;
	padding:70px 5px;
	text-align: center;
	color: #fff;
	z-index: 1;
    display: block;
}

.cont-box .blur::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.4);
	pointer-events: none;
	z-index:-1;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: 0.3s;
}
.cont-box:hover .blur::after{
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.cont-box img{
	display: block;
	object-fit: cover;
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.c-box{
 text-align: center; 
display: block;    
}
.contents_text1{
font-size: 1.8em; 
  width: 100%;
  text-align: center; 
    line-height: 1.3;
    font-weight: 500;
    color: #fff;
    font-family: 'Zen Old Mincho', serif;
font-weight: 700; 
}
.banner{
width: 800px;
display: block;
margin: 0 auto;
height: auto;    
}
.banner img{
width: 100%;
}
/*====全ページ共通フッターメニュー===*/
footer{
 width:100%; 
display:block;
background:rgba(255,255,255,0.9);     
}
footer .footer-box{
height:auto;  
width: 100%;    
display: block;
margin:0 auto;     
}
footer .footer-box .footer-back{
width: 100%;     
background:url("../img/footer_back.jpg");
background-position: bottom;
background-size: cover;    
padding: 2% ;    
}

.con-text{
width: 65%;  
padding:0 1em;    
}
.f-contact{
width:35%;   
}

.f-con{
width: 300px;  
margin:0 auto 1em;    
}
.f-con a{
border:1px solid #0E89EA;
padding:1%;
font-size: 1.5em;  
display: block;   
transition: all 0.5s; 
color: #fff;
text-align: center;
background:#0E89EA;    
}
.f-con a:hover{
background:#fff;
text-decoration: transparent;   
color:#0E89EA;    
}

.f-address{
width: 100%; 
margin:2em 0;   
}
.f_text{
width: 50%;     
text-align: left;
}
.f-logo{
width: 50%;    
}
.f-logo img{
width: 40%;
display: block;
margin: 0 auto;
}
footer nav{
  text-align: center;
  margin: 1em 0;    
}

footer nav  ul{
width: 100%;		
display: flex;
align-items:center;	
padding: 0;	
flex-wrap: wrap;
border-right:1px solid rgba(18, 18, 18, 0.2);
  display: flex;
  justify-content:space-between;    
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
footer nav ul li{
  position: relative;
width: calc(100% / 9);       
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    text-align: center;
    border-left: 1px solid rgba(18, 18, 18, 0.2);
    height: 50px;
    position: relative;
}

	
footer nav ul li:before {
    position: absolute;
    top:0
}

footer nav ul li:after {
    bottom:0
}

footer nav ul li:last-child {
    margin-right: 0;
    border-right:0;
}
/*ナビゲーションのリンク設定*/
footer nav ul li a{
  display: block;
  text-decoration: none;
  transition:all .5s;
    font-size: 0.8em;
    color: #444;
    text-align: center;
    position: absolute;
  top: 25%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  width: 100%;
}
footer nav ul .f-small{
display: block;
font-size: 0.4em;    
letter-spacing: -1px;    
}
footer nav ul li a:hover{
 opacity: 0.6;
    text-decoration: transparent;
}
footer .f-text1{
text-align: center;	
font-size: 1.1em;	
line-height: 1.75;	
}
footer .f-text2{
text-align: center;	
color: #333;
font-size: 1.3em;
line-height: 1.6;       
}
footer .copyright small{
text-align: center;	
color:#fff;
padding:1% 0;
display: block;	
background:#0E89EA;  
font-size: 0.9em;  
}
.bus-photo1{
width: 45%;
position: relative;  
}
.bus-box1{
width: 55%;
padding: 0 1em;    
}
.bus-photo1 img{
width: 100%;    
}
.bus-text{
position: absolute;
bottom: -10px;   
left: 10px;
font-size: 1em; 
background: #0E89EA;
color: #fff;  
width: 300px;   
text-align: center;
}
.bus-text strong{
font-size: 1.5em;        
}

.bus-titl {
  position: relative;
  padding: 5px 26px 5px 42px;
  background: #56ACEE;
  font-size: 1.5em;
  color: #fff;
  margin-left: -33px;
  line-height: 1.3;
  border-bottom: solid 3px #0E89EA;
  z-index:-2;
}

.bus-titl:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

.bus-titl:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}
.bus-photo2{
width: 30%;
position: relative;  
}
.bus-photo2 img{
width: 100%;
}
.bus-box2{
width: 70%;
padding: 0 1em;    
}
/*==========ご依頼について===========*/
.flow_box1, .flow_box2 {
    width: 98%;
    max-width: 1000px;
    border:#56ACEE solid 1px;
    padding: 20px;
    margin: 30px auto;
    position: relative;
    background: rgba(255,255,255,0.49);
}
.flow_box1::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 15px solid #56ACEE;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.flow-photo{
width: 100px;
height: 100px; 
}
.flow-photo img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;       
}
.flow_box1 a{
color:#fff; 
background: #063F6B;  
transition: all 0.5s;  
padding: 1%; 
line-height: 200%;    
}
.flow_box1 .btn{
color:#fff; 
background: #063F6B;  
transition: all 0.5s;  
padding: 1%; 
line-height: 200%;  
display:inline;
}
.flow_box1 a:hover{
background: #0E89EA;      
text-decoration: transparent;    
}
.flow-text{
width: 85%; 
padding: 0 1em;    
}
.flow-text p{
font-size: 1em;  
text-align: left;
    
}
.flow-text strong{
font-size: 1.3em; 
color: #063F6B;
display: block;    
}
.map-box{
width: 100%;    
}
.map2{
width: 400px;    
}
.map2 img{
width: 100%;    
}
.map2:nth-child(2){
margin-top: 100px;  
}
/*==========会社概要===========*/
.abutus-box{
width: 100%;   
position: relative;    
}
.abut-p{
width: calc(90% / 2);    
}
.abut-p:nth-child(2){
margin-top: 30px;  
}
.abut-p img{
width: 100%;  
display: block;
margin: 0 auto;
border:10px solid #fff;
box-shadow: 2px 2px 10px #eee;    
}
.list_table{
width: 100%;   
display: block;      
}
.list_table table{
    width: 100%; 
    border-collapse: collapse; 
}
.list_table tr{
width: 100%; 
 border-bottom:5px solid #eee;
}
.list_table th{
width: 40%;	
text-align: center;
padding: 1%;
font-size: 1em;	
background-color:#0E89EA;   
position:  relative; 
z-index: 10;   
color: #fff;    
}

.list_table td{
width: 60%;	
text-align: left;
padding: 1% 1% 1% 1.5em;
line-height: 1.75;	
font-size:1em;	  
background: #fff;    
}
.list_table a{
  color: #77c728;   
  border-bottom: 1px solid #77c728;
  transition: all 0.5s;    
}
.list_table a:hover{
  color: #5B8432;   
  border-bottom: 1px solid #5B8432;
  text-decoration: transparent;    
}
.map{
width: 100%;
position: relative; 
}
.map iframe{
height: 500px; 
}
/*===========FAQ===========*/
.faq-box{
width: 95%;
display: block;    
}
.tuki{
color: #0E89EA; 
display: block;    
}
.tuki a{
font-size: 1.2em; 
color: #0E89EA;    
}
.tab{
  display: flex;
  flex-wrap: wrap;
}
.tab li a{
  display: block;
  background:#fff; 
  margin:0 2px;
  padding:10px 0;
color:#0E89EA ;
width: 300px;  
text-align: center;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
  background:#0E89EA;
color: #fff;    
}


/*エリアの表示非表示と形状*/
.area {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/
  background:#fff; 
  padding:50px 20px;
}
.area p{
padding-left: 1em;    
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



/*===========お問い合わせ===========*/
.contact-box{
width: 100%;
height: auto;
display: block;  
position: relative;

}
.c-img{
width: 65%;
position: absolute;
bottom: -20%;
right: 0;
z-index: -1;    
}
.con-flex{
width: 100%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-start; 
}

.c-con{
width:50%;   
padding: 2%;  
height: 300px; 
margin-top: 2%;   
position: relative;
}
.blue1{
 background:#063F6B;      
}
.blue2{
 background:#0B6DB8;      
}
.contact-text1{
font-size: 1em;
line-height: 200%;    
text-align:left;
}
.contact-text1 .blue{
	background-color:#0E89EA;
	font-size:0.6em;
	padding: 0.2% 1%;
    line-height:1.8;  
    color: #fff;
    font-weight: 700;
}
.c-text{
width: 100%;       
position:relative;
top: 50%;
left: 50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);    
}
.c-con a{ 
font-size: 2em;
color:#fff; 	
transition: all 0.5s;	 
display: block;       
text-align: center;
}
.c-con a:hover{
text-decoration: transparent;	
opacity: 0.7;     
}
.c-con strong{
font-size: 2em;
color:#fff; 
display: block;    
}
.c-con p{
font-size: 1em;
color:#fff; 
display: block;     
text-align: center;
}
.m-brder{
border-right: 2px solid #eee;
}
.c-con .con-text1{
font-size: 2em;
color:#fff; 	
transition: all 0.5s;	
display: block;     
width: 100%;  
text-align: center; 
}

.con-text2{
font-size: 1em;  
color: #fff;     
}
.con-text2 .small{
font-size: 0.9em;
color: #fff; 
display: block; 
}
.contact-wrapper{
width: 100%;	
}
.contact-tel{
font-size: 2em;
display: block; 
transition: all 0.5s;   
width: 100%;
text-align: center; 
width: 50%;
margin: 0 auto;
color: #fff;  
background: #00BB55;      
} 
.contact-tel:hover{
text-decoration: transparent;	
background: #004020;  
color: #fff;    
}

.contact-tel .small{
font-size: 0.7em;
display: block;  
border-bottom: solid 1px #fff;
padding: 1% 0;    
}
.contact-fax{
font-size: 2em;;
display: inline-block; 
font-weight:500;  
width: 100%;
text-align: center;    
color: #004020;    
} 
.contact-flex{
width: 100%;
display: flex;  
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
background: #E6E6FA;  
padding: 2%;    
}
.tel-box{
width: 100%;  
}
form{
	width: 100%;
	text-align: center;
}
.checkbox_text{
line-height: 1.75;
color: #333;	
}
.mailform{
width: 100%;
padding:3%;	
position: relative; 
}
.mail-img1{
width: 10%;
position: absolute;
bottom: -5%;
right: 0;    
}
.mailform table{
width: 100%;    
 
}

.mailform table .blue{
	background-color:#0E89EA;
	font-size:0.7em;
	padding:0.5% 1%;
    margin-right: 5px;
    text-align: center;
    color: #fff;
    font-weight: 700;
}
.mailform table tr{
 border-bottom: 1px solid #eee;   
}


.mailform table th{
	font-size: 1em;
	text-align: left;
	color:#333;
	padding-left: 2%; 
    
}

.mailform table td p{
	font-size: 1em;
	color:#000;
	padding-top: 1%;
	line-height: 1.7;
}
.mailform table td img{
width:100%;	
margin-top: 1%;	
border-radius: 50px;	
}
.mailform table td{
font-size: 1em;
color:#333;
padding: 2% 1%;
width: 50%; 
text-align: left;
}

.mailform table td iframe{
height: 400px;	
}

.textareatablearea{
width:100%;
}

textarea{
width:100%; 
}
.mailform dd p{
	margin-top: 1%;
	font-size:1em;
	letter-spacing: 4px;
	line-height: 1.75;
}

.single p{
	text-align: center;
}


.form-button
{
margin: 5% 0;
text-align: center;
}

.form-button button {
    cursor: pointer;
    display: block;
    margin: 0 auto 5px;
    padding: 10px 0 10px;
    color: #fff;
    text-align: center;
    width: 250px;
	transition: all 0.5s;	
    border:1px solid #063F6B; 
    font-weight: 500;
    background:#063F6B;
}
.form-button button:hover{
     background: #fff;
    color: #063F6B;
	text-decoration: transparent;
}
.textarea, textarea, .dropdown {
    border-radius: 2px;
}
.text{
width: 100%!important;    
}
.text-y{
width: 50%!important;    
}
input[type=checkbox] + label {
cursor: pointer;
}

button[type="submit"]{
	font-size:1em;
	padding: 10px;
}

input[type="checkbox"]{
	font-size: 1em;
	margin-left: 2%;
	margin-bottom: 2%;
	border:1px solid #949494;	
}
input[type="text"]{
	height: 40px;
	font-size: 1em;
	padding: 10px;
	background:#fff;
	border:1px solid #949494;
}

textarea[type="text"]{
padding: 10px;	
font-size: 1em;	
background:#fff;	
border:1px solid #949494;
}
.accordion h4{
text-align: left;
padding-bottom: 3px;	
letter-spacing: 2px;
border-bottom: 1px dotted #063F6B;
padding-left: 1%;
color:#063F6B;    
}
.accordion p{
text-align: left;
letter-spacing: 2px;
padding: 1% 0;	
padding-left: 1%;   
}

.toggle {
	display: none;
}
.Label {		/*タイトル*/
    font-size: 1em;
	padding: 1em;
	display: block;
	border-bottom:#61482F solid 1px;
    color: #063F6B;
    font-weight: bold;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #063F6B;
	border-right: 2px solid #063F6B;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
    text-decoration: transparent;
}
.Label,
.open {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.5s;
}
.open {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 5px;
	overflow: hidden;
}
.toggle:checked + .Label + .open {	/*開閉時*/
	height: auto;
	transition: all .5s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
    text-decoration: transparent;
}




/*===========追加更新 12/10===========*/


.other_item_box{
  display: flex;
}

.other_item_box .item{
  max-width: 350px;
  width: calc(100% / 3);
}

.other_item_box .item .img{
  width: 100%;
}

.other_item_box .item .img img{
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.other_item_box .item h5{
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
}

.other_item_box .item+.item{
  margin-left: 40px;
}


@media (max-width: 740px){
  .other_item_box{
    flex-direction: column;
  }
  .other_item_box .item{
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
   .other_item_box .item+.item{
    margin-left: 0;
    margin: 10px auto 0;
   }
   .other_item_box .item h5{
    font-size: 16px;
    margin-bottom: 5px;
   }
}