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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;	
}

body {
font-size: 15px;
line-height: 1.75;
letter-spacing: 0.1em;
font-family: 'Noto Sans JP', sans-serif;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;        
color: #333;   
font-weight: 500;    
}
section{
padding: 100px 0!important;    
}
.tyuki{
color:#E60012;  
display: block;
font-size: 0.8em;    
}
.kaigyo{
display: block;  
margin: 1% 0;    
}
.sp_l{
text-align: center;
display: block;    
}
.recruit_f{
position:absolute;   
width: 400px;
bottom: 150px;
right: 30px;  
z-index: 999;    
}
.recruit_f img{  
width: 100%;
border: 2px solid #fff;        
}
.center_box{
  width: -moz-fit-content;
width: fit-content;  
margin: 0 auto;
display: block;   
}
.sp{
display: none;
}
.tb{
display: none;
}
.heading-041 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
    background-color: #004E82;
    color: #fff;
    font-weight: 500;
    font-size: 1.5em;
}

.heading-041::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #0074C2;
    content: '';
}
.headline {
  position: relative;
padding-bottom: 3px;    
 font-size: 1.5em;
color: #2a2a2a;
text-align: center;
font-weight: 500;    
}

.headline:after {
position: absolute;
content: '';
left: 50%;
bottom: 0;
width: 30px;
-webkit-transform : translatex(-50%);
transform : translatex(-50%);    
border-bottom: solid 2px #00B333;
}
.fullscreenmenu{
display: none;
}
/*===スライダー==============================*/
.top_slider{
width: 100%;
height:calc(100vh - 150px);  
display: block; 
min-height: 500px;    
position: relative;   
padding-left: 1em;    
}
.slider{
width: 100%;
}

.top_slider{
	overflow: hidden;
    width: 100%;
}


.top_slider .slider li{
  width:100%;    
	height: auto;
	position: relative;
 padding-left:199px;
    overflow: hidden;
}

.top_slider .slider li .slide_img{
	display: block;
	width: 100%;
    height:calc(100vh - 150px);  
	object-fit: cover;
transition: all 0.5s;	
    display: block;
        overflow: hidden;
border-radius: 500px 0 0 500px;
  
}

.img_up img {
    transition: 2s;
    transition-delay: 0.7s;
    transform: translateX(-10%) scale(1.2);
}
.img_up.inview img {
    transform: translateX(0) scale(1);
}

/*キャッチ*/
.container {
  position: relative;
}

.color-black,
.color-white {
  font-size: 2em;
  height: calc(100% - 40%);
  overflow: hidden;
  position: absolute;
  top: 40%;
    font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: bold; 
    line-height: 1.3;
}
.color-black strong,
.color-white strong{
 font-size:2em;  
display: block;
}
.color-black {
  width: 200px; /* テキストの端から画像の端までの長さ */
}
.color-white {
  margin-left: 200px; /* テキストの端から画像の端までの長さ */
  width: 100%;
    
}
.color-black span,
.color-white span {
  position: absolute;
}
.color-black span {
  color: #333
}
.color-white span {
  color: #fff;
  left: -200px; /* テキストの端から画像の端までの長さ分マイナス */
  text-shadow:2px 2px 5px #000;  
}
.color-black span {
  width: 500%;
}

.top_slider li .catch {
  position: absolute;
bottom: 10%;
  left:5%;
  max-width: 600px;
width: 65%;    
}

.top_slider li .catch img{
	display: block;
	width: 100%;
    margin: 0 auto;
}

.top_slider li .catch3 img{
	display: block;
	width: 35%;
    margin: 0 auto;
}
@keyframes apper {
	0% {
		opacity: 0;
	}
	50%{
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@media (max-width: 1150px){

}
@media (max-width: 950px){
   

   
}
@media (max-width: 690px){
.top_slider{
    width: 100%;
    height: 300px;
    min-height: 100px;
}
.top_slider .slider li .slide_img{
height: 300px;		
}    
.top_slider .slider li{
 padding-left:99px;
}
.color-black,
.color-white {
  font-size: 0.8em;
}
.color-black strong,
.color-white strong{
 font-size:1.8em;  
}
.color-black {
  width: 100px; /* テキストの端から画像の端までの長さ */
}
.color-white {
  margin-left: 100px; /* テキストの端から画像の端までの長さ */
}

.color-white span {
  left: -100px; /* テキストの端から画像の端までの長さ分マイナス */    
}
   
}
.space{
text-indent: -0.5em;
padding-left:0.5em; 
display: block;
}
.w1{
width: 50%; 
display: block;
margin: 0 auto
}
.w2{
width: 30%; 
  
}
.w3{
width: 10%; 
display: block;
margin: 0 auto;    
}
.w4{
width: 95%; 
display: block;
margin: 0 auto;
}
	.h100{
height: 100px;	
        
	}
	.h50{
height: 50px;		
	}
	.h30{
height: 30px;		
	}	
	.h20{
height: 20px;		
	}
	.h10{
height: 10px;		
	}
a{
	text-decoration: none;	
}
li{
	list-style-type: none;
}


.text1{
font-size: 1em;  
line-height: 200%;    
}
.text1 strong{
font-size: 1.5em;  
display: block;  
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: bold;
}
.text2{
font-size: 1em;  
line-height: 200%;    
}
.text2 strong{
font-size: 1.2em;
display: block;    
}

.text3{
font-size: 1.3em;    
}
.background1{
width: 100%;
height: auto;
display: block;    
background: url("../img/background3.jpg");
background-size: cover;
background-position: center;    
padding: 1%;    
}
.background2{
width: 100%;
background:rgba(0,78,130,0.1);      
}

.container {
max-width: 1170px;
width: 95%;
margin: 0 auto;
text-align: center;		
}
.slider-pro1{
width: 100%;
height: auto;	
display: block;	
position: relative;	  
background:url("../img/top4.jpg");
background-size: cover;
background-position: center;
height:300px;
overflow: hidden;    
}
.slider-pro1 img{
width: 100%;
height: auto;		
}

.slider-pro1 p{
font-size: 1.8em;
color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  width: 100%;
  text-shadow :2px 2px 5px #000;
    text-align: center;
}

.slider-pro1 .midashi{   
margin:0 auto ;	
top: 50%;  
position: absolute;    
}
#vegas {
    width: 100%;
    height: auto;
	display: block;
	margin: 0 auto;
	
}
.slider {
  position   : relative;
  max-width  : 100%;
  height     : calc(100vh - 250px);
  margin     : auto;

}
.slider .parallaxString{
  position   : absolute;
  padding    : 15px;
  color      : #fff;
  top        : 50%; /* absoluteにおける上下集中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 1;
		display: block;
	width: 100%;
	text-align: center;
}
.parallax {
/* パララックスをつくる部分 */
  background-attachment:inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider p{
  margin: 0.4em 0;
 font-size: 3em; 
  text-shadow    : 
       1px  1px 0px #000000,
      -1px  1px 0px #000000,
       1px -1px 0px #000000,
      -1px -1px 0px #000000,
       1px  0px 0px #000000,
       0px  1px 0px #000000,
      -1px  0px 0px #000000,
       0px -1px 0px #000000;
color: #fff;    
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: bold;       
}
.txt-rotate{
width: 100%;	
display: block;	
}

.flex-box1{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:center;  
align-items:center;       
}
.flex-box2{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:space-around;  
align-items:flex-start;   
}
.flex-box3{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:space-between;    
}
.flex-box4{
width: 100%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:flex-start;    
}
/*パンクズ */
.breadcrumb {
position: absolute;
bottom: 10px;
left: 10px;    
}

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

.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;
}
.main_wrapper{
 max-width: 1170px;
width: 100%;
background: #fff;    
padding: 2%; 
z-index: 100;      
}

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

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:5%;
    /*テキストの形状*/
	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;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}
.breadcrumb .fa-home{
color:#BF0404; 	
}


.top_wrapper{
	width: 100%;
    height: auto;
    display: block;
padding-top: 1em;
}
.midashi-b{
 width: 100%;  
position: relative;    
}
.midashi-b h2{
  font-size: 2.1em;
    padding-left: 65px;
    font-weight: 500;
    text-align: left;
        margin-block-start: 0em;
    margin-block-end: 0em;
}
.midashi-b ::before{
	content:"";
    /*描画位置*/
	position: absolute;
	top:30%;
	left:0;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
    /*線の形状*/
	width:50px;
	height: 1px;
	background:#0074C2;
}
.midashi-b .small{
    background: #0074C2;
    color: #fff;
    font-size: 0.8rem;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
    padding: 0 2em;
    margin-top: 10px;
    line-height: 1.6;  
}
.midashi{
width: 100%;
position: relative;
}
.midashi h2{
font-size: 1.8em;
padding:1% 1em;  
color: #333; 
font-weight: 500;  
text-align: center;
}
.midashi .small{
color: #0074C2; 
font-size: 0.7em;  
display: block;
text-align: center;   
}
.midashi::after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0px;
	left:50%;
      -webkit-transform : translateX(-50%);
  transform : translateX(-50%);
    /*線の形状*/
	width:50px;
	height: 1px;
	background:#0074C2;
}
.midashi_w{
width: 100%;
position: relative;
}
.midashi_w h2{
font-size: 2em;
padding:1% 1em;  
color: #fff; 
font-weight: 500;  
text-align: center;
}
.midashi_w .small{
color: #fff; 
font-size: 0.5em;  
display: block;
text-align: center;   
}
.midashi_w::after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:50%;
      -webkit-transform : translateX(-50%);
  transform : translateX(-50%);
    /*線の形状*/
	width:50px;
	height: 1px;
	background:#fff;
}
.en{
font-family: 'Kanit', sans-serif;   
font-weight: 400;
}


.top{
width: 100%;
height: auto;	
z-index: 998;   
}


.globalMenuSp, .navToggle{
	display: none;
}
header{
width: 100%;
height: auto;  
background: #fff;
-webkit-box-shadow: 0 6px 15px rgba(36, 37, 38, 0.04);
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.04); 
position: sticky;
top: 0;
left: 0;    
z-index: 900;    
}

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

.top_menu .menu_t{
width: 100%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;  
}

.top_menu .menu_t .logo{
width:350px;	
}
.top_menu .menu_t .logo img{
width:100%;	
display: block;
margin: 0 auto;
}
.top_menu .m1 li{
    
}
    
.top_menu .m1 a{
display: block;	
color: #000;    
   width: 100%; 
  text-align: center;    
 font-size: 1em;  
transition: all 0.5s;    
}

.m1{
width: 100%;	
margin:1em auto ;   
display: block;  
background: rgba(255,255,255,0.6); 

}
.top_menu .m1 ul{
width: 100%;		
display: flex;
align-items:center;
justify-content:space-around;  
align-items: center;     
margin: 0 auto; 
}
.m1 ul li .color{
display: block;
color: #E60012;   
font-family: 'Kanit', sans-serif;        
letter-spacing: 1px;  
transition: all 0.5s;     
}

.m1 ul li a:hover .color{
opacity: 0.5; 
text-decoration: transparent;    
}


.c-txt.line {
  padding-bottom: 5px;
  position: relative;
}
.c-txt.line::before {
  background: #0074C2;
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.c-txt.line:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}


.b1 {
  width: 100%;  
 line-height: 1.5;    
}





.top_contact{
width:500px;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:flex-end;
align-items:center;      
}

.t-tel{
width: 250px; 
margin-right:3%;    
}
.t-tel a{
width: 100%;	    
font-size:1.8em;	
color: #0074C2;   
transition: all 0.5s;	
display: block;       
margin: 0 auto;
text-align:center;  
font-family: 'Kanit', sans-serif;    
}

.t-tel a:hover{ 
opacity: 0.7;    
text-decoration: transparent;   
}
.heading-021 {
    position: relative;
    border-bottom: 2px solid #0074C2;
    color: #0074C2;
    display: block;
    font-size: 0.5em;
        text-align: center;
    width: 95%;
    display: block;
    margin: 0 auto;
    font-weight: 500;
}

.heading-021::before,
.heading-021::after {
    position: absolute;
      left: 50%;
  -webkit-transform : translateX(-50%);
  transform : translateX(-50%);
    bottom: -10px;
    width: 20px;
    height: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';

}

.heading-021::before {
    background-color:#0074C2;
}

.heading-021::after {
    bottom: -7px;
    background-color: #fff;
}
.t-mail{
width: 200px;	
}

.t-mail a{
width: 100%;	     
font-size: 1em;	
color:#0074C2; 
border: solid 2px #0074C2;
padding:3% 1%;   
transition: all 0.5s;	
display: block;       
margin: 0 auto;   
text-align: center; 
line-height: 1.5;     
}

.t-mail a:hover{
color: #fff;    
background:#0074C2; 
text-decoration: transparent;    
}

/*====instagramとLINE===*/
.btn-social-icon-instagram {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: #2e6ca5;
  font-size: 25px;
  text-decoration: none;	
}

.btn-social-icon-instagram:hover {
  color:#668ad8;
  transition: .5s;
}

.btn-social-icon-instagram__square {
  border-radius: 13px;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 50px;
  overflow: hidden;
}

.btn-social-icon-instagram__square:before {
  content: '';
  position: absolute;
  top: 23px;
  left: -18px;
  width: 60px;
  height: 60px;
}

.btn-social-icon-instagram__square .fa-instagram {
    color: #f13f79!important;
  line-height: 50px;
  position: relative;
  z-index: 2}

.btn-social-icon-instagram__square .fa-line {
    color: #06c755!important;
  line-height: 50px;
  position: relative;
  z-index: 2}
/*====ボタン===*/
.button{
width: 200px;
margin: 0 auto;   
}
.button a {
    background: #fff;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 25px;
    color: #0074C2;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    border:2px solid #0074C2;
}
.button a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -2em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 2px;
    background-color: #0074C2;
    transition: 0.3s;
}
.button a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2em;
    transform: translateY(-50%);
    width: 60px;
    height: 2px;
    background-color: #0074C2;
    transition: 0.3s;
}
.button a:hover:before, .button a:hover:after {
    right: -2.5em;
    background-color:#cccccc;
 
}
.button a:hover {
    background:#0074C2;
    color: #fff;
       border:2px solid #fff;
}
/*====ご挨拶===*/
.news_w{
width: 100%;    
display: block;
height: auto;   
}
.g-contact{   
width: calc(95% / 3);    
}
.g-contact2{   
width: calc(95% / 2);    
}
.flex-greeting-photo{
width: 35%;    
}
.flex-greeting-photo img{
width: 100%; 
display: block;
margin: 1% auto ;
}
.flex-greeting-text{
width: 100%;
 padding: 0 1em;   
}

.g-contact a{
display: block;	
padding: 1em;	
font-size: 1em;	
transition: all 0.5s;	
margin: 0 auto;
cursor:pointer;
border-radius: 50px; 
}
.greeting-box{
width: 100%; 
}


.greeting{
width: 100%;
height: auto;
position: relative;
}


.greeting-text strong{
font-size: 1.7em;
padding: 1% 0 2%;      
display: block;   
font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-weight: bold;  
line-height:1.7;    
}
.greeting-text{
font-size:1em;
line-height:200%;
font-weight:normal;
text-align: left;
}
.g-photo_l{
width: 70%;    
}
.g-photo_l img{
width: 90%; 
padding: 3%;;    
}
.g-photo_r{
width: 25%;    
}
.g-photo_r:nth-child(2){
padding-top: 50px;   
}
.g-photo_r img{
width: 95%; 
margin:0 auto;
display: block;    
}
.g-text_r{
width: 55%;    
text-align: left;
position: absolute;
right: 50px;
bottom: 0;    
   
}
.g-text_r p{
}
.g-text_r strong{   
}
.g-text_l{
width: 48%;    
text-align: left; 
margin: 0 auto;
}
.g-text_l p{
color:#333;   
}
.g-text_l strong{
   
}
.white_bk{
background: #fff;    
padding: 3%;    
}
.blue_bk{
background: rgba(0,116,194,0.8); 
padding: 3%;     
}
.blue_yk{
background: rgba(253,210,40,0.7); 
padding: 3%;     
}
@keyframes bg_slide {
    100% {
        transform-origin: left top;
        transform: scaleX(1.0);
    }
    0% {
        transform-origin: left top;
        transform: scaleX(0.0);
    }
}

.banner-box{
width: 70%;    
display: block;
margin: 0 auto;
}
.banner-box img{
width: 100%; 
 display: block;
margin: 0% auto; 
box-shadow: 2px 2px 5px #eee;    
}
.item-box{
width: 100%;
position: relative;
}
.item-p{
width: calc(95% / 3);     
}
.item-p:nth-child(2){
margin-top: 50px;    
}
.item-p:nth-child(3){
margin-top: 100px;    
}
.item-p img{
width: 100%;    
}
.item-t{
width: 100%;  

  background: rgba(255,255,255,0.95);  
    padding: 1em 0;
}

/*====コンテンツ===*/

.contents-box{
width: 100%;
height: auto; 
margin: 0 auto;
}
.contents-flex{
 width: 90%;
height: auto;
display: flex;    
flex-wrap:wrap;
justify-content:center;
align-items:center;   
margin: 0 auto;
}
.contents{
max-width:300px; 
width: 100%;    
position: relative;
background-color:#000;
transition: all 0.5s;	
height: 200px; 
overflow: hidden; 
margin: 0;
}

.cont-box{
display: block;
color: #fff;  
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto 0;
height: 100%;
background-image: linear-gradient(to right, #434343 0%, black 100%);  
object-fit: cover;    
}
.cont-box img{
width: 100%;   
transform: scale(1.1);
transition: .3s ease-in-out; 
transition: all 0.5s;	
 opacity: 0.3;   
position: relative;
display: block;    
}

.cont-box:hover img {
  transform: scale(1.3);
    text-decoration: transparent;
    opacity: 0.9;
}
.contents:hover{
   opacity: 1;
     text-decoration: transparent;
}
.c-box{
position: absolute;
bottom:0;
left:0; 
 text-align: center; 
    z-index: 99;
font-size: 0.9em;   
  z-index: 1;    
}
.contents_text1{
font-size: 1.5em; 
position: absolute;
width: 100%;  
top: 50%;
left:50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);   
text-align: center; 
    line-height: 1.3;
    font-weight: 500;
    color: #fff;
    z-index: 3;
}
.contents_text1 .small{
font-size: 0.7em; 
display: block; 
      
}
.caption{
border: 1px solid #fff;
width: calc(100% - 20px);
height: calc(100% - 20px);    
top: 50%;
left:50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%); 
display: block;   
position: absolute;  
z-index: 99;    
}


/*====全ページ共通フッターメニュー===*/
footer{
width: 100%;
height: auto;
display:block;
text-align: center;	  
}
footer .footer-box{
width: 100%;
height: auto;
display: block;   
margin: 0 auto; 
padding: 5% 0;   
background:url("../img/background1.jpg");
background-position:center;
background-size: cover; 
background-attachment: fixed;    
}
.f-text{
width: 100%; 
}
.f-text p{
text-align: center;   
}
.f-contact{   
width: 100%; 
display: flex;
flex-wrap:wrap;
justify-content:center;
align-items:center    
}
.f-contact p{
 color: #fff;
border: 1px solid #fff;
  text-align: center;
  text-decoration: none;
  transition: .5s;
    display: block;
    font-size: 1.5em; 
    max-width: 300px; 
width: 70%;   
padding: 1em 1%;  
margin: 1% auto;
}
.f-contact a{
color: #fff;
border: 1px solid #fff;    
text-align: center;
text-decoration: none;
transition: .5s;
z-index:0;
font-size: 1.5em;
max-width: 300px; 
width: 70%;   
padding: 1em 1%; 
margin: 1% auto;   
}
.f-contact a:hover {
opacity: 0.7;
background: rgba(255,255,255,0.05);    
 text-decoration: transparent;   
}



.copyright a{
max-width: 300px; 
width: 70%; 
display: block;
margin: 0 auto;
}
.copyright img{
width: 100%;    
}

footer .copyright{
width: 100%;
height: auto;    
background:#fff;    
}
footer .copyright small{
text-align: center;	
color: #fff;
padding:1em 0;
display: block;	
background: #0074C2;
font-weight: 500;    
}

/*========= 事業内容 ===============*/
.service-box{
width: 100%;
position: relative;
}
.service{
  width: calc(95% / 3);  
  padding: 2%;
 background: #fff;
box-shadow: 2px 2px 5px rgba(0,40,66,0.1);   
margin-bottom:3%; 
position: relative;
}
.service img{
width: 100%;    
}
.service p{
text-align: left;
}
.obi{
 position: absolute;
 left: -0.3%;
 top: -2%; 
 color: #fff;  
 font-weight: 400;
}
.ribonn {
  position: relative;
  margin: 1rem -10px;
  padding: 1rem 2rem;
  background: #0074C2;
    font-weight: 400;
}

.ribonn:before,
.ribonn:after {
  position: absolute;
  content: '';
}

.ribonn:before {
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid #002842;
  border-left: 10px solid transparent;
}



.service_back{
position: absolute;
top: 0;
left: 0;    
background-color: #004E82;   
width: 100%;
height: 40%;  
z-index: -1;
}
/*========= 施工実積 ===============*/
.works_heading{
font-size: 1.3em;
color: #0074C2;
padding: 1% ;
border-bottom: dotted 2px #0074C2;
text-align: left;
}



.works-box {
    width: 100%;

}
.works{
width: 100%;
  overflow-x: scroll;      
}
.works table{
  width: 100%;
 white-space: nowrap;      
}
.works table thead th{
  background-color: #0074C2;
  color: #fff;
  font-weight: 500;
  width: 30%;  
padding: 1% 1em;   
} 
.works table tbody td{
  font-weight: 500;
    padding: 1% 1em; 
    background: #fff;
  border: 3px solid #eee;  
}
.text_l{
text-align: left;
}
.text_c{
text-align: center;
}
.w70{
width: 700px;     
}
.w30{
width: 30%;    
}
.w10{
width: 100px;    
}
.works_photo{
width: calc(100% / 5); 
height: 200px;    
}
.works_photo img{
width: 95%;
height: 95%;
display: block;
object-fit: cover;    
}
/*========= 会社概要 ===============*/
.about-text{
width: 100%;  
padding: 3%;    
}
.brackets {
    position: relative;
    padding: .7em 1.3em;
    color: #333333;
}

.brackets::before,
.brackets::after {
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    content: '';
}

.brackets::before {
    top: 0;
    left: 0;
    border-top: 3px solid #0074C2;
    border-left: 3px solid #0074C2;
}

.brackets::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid #0074C2;
    border-right: 3px solid #0074C2;
}
.map{
 width: calc(94% / 3);   
padding: 1em;
 background:rgba(0,78,130,0.1);
margin: 1%;    
}
/*========= 求人情報 ===============*/

.recruit{
width: 100%;
position: relative;
}
.recruit-back{
position: absolute;
top: 0;
left: 0;    
background:rgba(0,78,130,0.1);   
width: 70%;
height:100%;  
z-index: -1;
}
.recruit p{
text-align: left;
}

.recruit-photo{
max-width: 700px;  
width: 100%;    
height: 300px;   
overflow: hidden;
}
.recruit-text{
max-width: 600px;   
width: 100%;    
 position: absolute;
 right: 0;
top: 50%;
transform: translateY(-50%);
background: #fff;
padding: 3%; 
-webkit-box-shadow: 0 6px 15px rgba(36, 37, 38, 0.04);
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.04); 
}
.recruit-photo img{
width: 100%;    
}
.table-box{
width: 100%;    
}
.table-box table{
  width: 100%;
  border-collapse: collapse;
}

.table-box table tr{
  border-bottom: solid 2px white;
}

.table-box table tr:last-child{
  border-bottom: none;
}

.table-box table th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #0074C2;
  color: white;
  text-align: center;
  padding: 10px ;
  font-weight: 500;
}

.table-box table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #0074C2;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.table-box table td{
  text-align: left;
  width: 70%;
  text-align: left;
  background-color: #eee;
  padding: 20px ;
 font-weight: 500;    
}
/*========= お問い合わせ ===============*/

.contact_back{
background: #fff;
padding: 5%;    
}
.contact-box{
width: 100%;
height: auto;
display: block;  
position: relative;
padding: 2%;     
}
.c-img{
width: 100%;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;    
}


.c-con{
width:100%;   
height: auto; 
margin:2% auto 0;     
}
.con_titl {
    display: block;
    position: relative;
    padding: 0 2em;
    color: #004E822;
    font-size: 0.7em;
    max-width: 350px;
    width: 100%;
    display: block;
    margin: 0.5em auto;
    line-height: 1.75;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: bold;
    color: #333; 
}

.con_titl::before,
.con_titl::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 50px;
    height: 1px;
    background-color: #004E82;
}

.con_titl::before {
    left: 0;
}

.con_titl::after {
    right: 0;
}

.contact-text1{
font-size: 1em;
line-height: 200%;    
text-align: left;
color: #333;  
}
.contact-text1 .blue{
	background-color:#0074C2;
	font-size:0.6em;
	padding:0.5em;
    margin-right: 5px;
    line-height:1.8;  
    color: #fff;
    font-weight: 500;
}
.con_flex-box1{
width: 100%; 
display: flex;
flex-wrap:wrap;
justify-content:center; 
}
.c-tel{
width: 43%;       
background:rgba(0,78,130,0.2);  
position: relative;
padding: 1em;   
margin: 0.5em;  
}
.c-tel a{
width: 100%;      
font-size: 1.8em;
color:#0074C2; 	
transition: all 0.5s;	 
display: block;     
width: 100%;  
text-align: center;
font-weight: 500;
line-height: 1.2;  
}
.c-tel:hover a{
text-decoration: transparent;	
opacity: 0.8;     
}

.c-tel .small{
font-size: 0.5em;
color: #333;    
display: block;
margin: 0.5em; 
}



.c-fax{
width: 43%;    
background:rgba(0,78,130,0.2);  
position: relative;
padding: 1em;  
margin: 0.5em 0;     
}
.c-fax p{
width: 100%;  
font-size: 1.8em;
color:#0074C2; 	
transition: all 0.5s;	 
display: block;     
width: 100%;  
text-align: center;
font-weight: 500;
line-height: 1.2;  
}

.c-fax .small{
font-size: 0.5em;
color: #333;    
display: block;  
line-height: 200%;    
 margin: 0.5em 0;          
}
.m-brder{
border-right: 2px solid #eee;
}


.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;     
} 
.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;    
} 

.tel-box{
width: 100%;  
}
form{
	width: 100%;
	text-align: center;
}
.checkbox_text{
line-height: 1.75;
color: #333;	
}
.mailform{
width: 98%;
}
.mailform table{
width: 100%;    
 
}

.mailform table .blue{
	background-color:#0074C2;
	font-size:0.7em;
	padding:0.5em;
    margin-right: 5px;
    text-align: center;
    color: #fff;
    font-weight: 500;
}
.about-map{
width: 100%;    
}


.mailform table th{
	font-size: 1em;
	text-align: left;
	padding-left: 2%; 
    border-bottom: 1px dotted #b0b0b0;
    font-weight: 400;
cursor: pointer;
}

.mailform table td p{
	font-size: 1em;
	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;
padding: 2% 1%;
width: 70%; 
border-bottom: 1px dotted #b0b0b0;   
text-align: left; 
cursor: pointer;    
}
.map-button{
max-width:150px;  
width: 100%;    
border: solid 1px #02B0FA;
color:#02B0FA; 
background: #fff;  
display: block!important;
margin:1%;
transition: all 0.5s; 
text-align: center;
padding: 1%;    
font-size:1em;  
font-weight: 500;
}
.map-button:hover{
background: #02B0FA;
color:#fff;    
text-decoration: transparent;
    
}
.mailform table td iframe{
height: 400px;	
}

.text-y{
width: 50%!important;    
height: 40px!important;    
}
.text{
width: 100%!important;    
}
textarea{
width:100%!important; 
}
.mailform dd p{
	margin-top: 1%;
	font-size:1.1em;
	color:#333;
	letter-spacing: 4px;
	line-height: 1.75;
}

.single p{
	text-align: center;
	color:#333;
}


.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 #fff; 
    background:#002842;
}
.form-button button:hover{
     background:#fff;  
    color: #002842;
    border:1px solid #002842;
	text-decoration: transparent;
}
.textarea, textarea, .dropdown {
    border-radius: 2px;
}
label{
cursor: pointer!important;
width: 100%;    
display: block;     
}
input[type=checkbox] + label {
cursor: pointer!important;
}

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

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

textarea[type="text"]{
padding: 10px;	
font-size: 1em;	
background:#fff;	
border:1px solid #bababa;	
}
.accordion h4{
font-size: 1em;
text-align: left;
padding-bottom: 3px;	
letter-spacing: 2px;
border-bottom: 1px dotted #333;
padding-left: 1%;
color: #333;  
font-weight: 500;       
}
.accordion p{
font-size:0.9em;
text-align: left;
letter-spacing: 2px;
padding: 1% 0;	
padding-left: 1%;
color: #333;
font-weight: 400;    
}
.accordion {
}
.toggle {
	display: none;
}
.Label {
    font-size: 1em;
	padding:1% 1% ;
	display: block;
	background: #004E82;
    color: #fff;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
    text-decoration: transparent;
    margin-bottom: 1em;
}
.Label,
.open {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.5s;
}
.open {		/*本文*/
	height: 0;
	margin-bottom:10px;
	overflow: hidden;
    background: rgba(0,25,128,0.1);
    padding: 0 10px; 

}
.toggle:checked + .Label + .open {	/*開閉時*/
	height: auto;
	transition: all .5s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
    text-decoration: transparent;
}


.check_mark{
	position: relative;
    margin-left: 20px;
}

.check_mark::before {
    font-family: "Font Awesome 6 Free";
    content: "\f14a";
    font-weight: lighter;
    display: inline-block;
    color: #0774c2;
    font-size: .9em;
    position: absolute;
    top: 0.15em;
    left: -18px;
}