@charset "utf-8"; 
a, abbr, acronym, address, applet, article, aside, audio,b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video{font-size:100%; vertical-align:baseline; white-space:normal; margin:0; padding:0; border:0; outline:0; background:transparent;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;} ol, ul{list-style:none;} blockquote, q{quotes:none;}table{border-collapse:collapse; border-spacing:0;} *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -webkit-text-size-adjust:100%;} img{vertical-align:top; max-width:100%;} h1, h2, h3, h4, h5, h6{font-weight:normal;} img{ width:100%;}
/*---------------------------
Link
---------------------------*/
a{outline:none;} a:link{color:#333; text-decoration:none;} a:visited{color:#333; text-decoration:none;} a:hover{color:#007FCB;}

/*---------------------------
Font
---------------------------*/
body{font-family:'Roboto', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; min-width:1280px;}

/*---------------------------
Html / Body
---------------------------*/
html{height:100%; font-size:12px;}
body{color:#333; line-height:1.8; word-wrap:break-word; font-kerning:normal;}

/* =========================
   Loader Background
========================= */
#loader-bg {
  position: fixed;
  inset: 0;
  background: #007FCB;
  background-size: cover;
  background-attachment: fixed;
  z-index: 9999;

  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility .6s ease;
}

/* 非表示 */
#loader-bg.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================
   Loader Spinner
========================= */
#loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;

  border-radius: 50%;
  border: 4px solid #fff;
  border-right-color: transparent;

  animation: spin 1s infinite linear;

  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility .6s ease;
}

/* 非表示 */
#loader.is-hide {
  opacity: 0;
  visibility: hidden;
}

/* =========================
   Animation
========================= */
@keyframes spin {
  0%   { transform: rotate(0deg);   opacity: .4; }
  50%  { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: .4; }
}

/*---------------------------
共通
---------------------------*/
.pc_dis{display:block;}
.sp_dis{display:none;}

a,
.works li div{-webkit-transition:all .3s ease; transition:all .3s ease;}


header .inner .map a:hover,
.contact .inner .btn a:hover
{opacity:.8;}





#wrapper{float:left; width:100%;}
section{padding:60px 0 100px; float:left; width:100%;}
.inner{margin:0 auto; width:1200px;}
.caption{margin:0 0 50px; width:100%; text-align:center; position:relative; font-weight:700;font-size:20px;}
.caption span{font-weight:600; color:#007FCB}
.caption::after{content:""; position:absolute; width:200px; margin-left:-100px; border-top:1px solid #999; left:50%; top:50%;}

/*---------------------------
header
---------------------------*/
header{float:left; width:100%; height:80px; padding:20px 0;}
header .inner .logo{margin:0; width:248px; float:left;}
header .inner div{margin:0 0 0 35px; float:left; width:783px;}
header .inner div h1{margin:0; display:inline-block;}
header .inner div h2{margin:0; display:inline-block; float:right;}
header .inner div nav{margin:0;}
header .inner div nav ul{margin:5px 0 0 0; float:left;}
header .inner div nav ul li{margin:0 8px 0 0; padding:0 8px 0 0; border-right:1px solid #000; display:inline-block; font-weight:bold; font-size:14px; height:15px; line-height:15px;}
header .inner div nav ul li:last-child{ padding:0; border:none;}
header .inner div .tel{margin:5px 0 0 0; display:inline-block; float:right;}
header .inner div .tel span{margin:0 10px; color:#007FCB; font-weight:700;}
header .inner .map a{ padding:0 0 0 16px;float:right; width:93px; height:40px; background:#007FCB; color:#fff; line-height:40px; text-align:center; font-size:20px; font-weight:700; position:relative;border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
header .inner .map a::before{content:url(../images/common/icn_map.png); position:absolute; top:3px;left:15px;}
    
/*---------------------------
main_banner
---------------------------*/
.main_banner{padding:10px; background:#007FCB;}
.main_banner .swiper-slide{aspect-ratio: 16/9;}
.main_banner .swiper-slide img{ width: 100%; height: 100%; object-fit: contain;}


/*---------------------------
company_overview
---------------------------*/    
.company_overview{background:#EEEEEE; text-align:center;}
.company_overview .inner h2{margin:0 0 40px; width:100%; text-align:center; font-size:20px;}
.company_overview .inner dl{margin:0 20px; width:480px; display:inline-block; text-align:left; font-size:0; vertical-align:top;}
.company_overview .inner dl dt{margin:0; display:inline-block; font-size:14px; width:130px; padding:20px 0; border-top:1px solid #999; vertical-align:top;}
.company_overview .inner dl dd{margin:0; display:inline-block; font-size:14px; width:350px; padding:20px 0; border-top:1px solid #999;}   
.company_overview .inner dl dt:first-child,
.company_overview .inner dl dt:first-child + dd{border-top:none;}
  
/*---------------------------
our_service
---------------------------*/                 
.our_service .inner ul{text-align:center;}
.our_service .inner ul li{margin:0 50px; display:inline-block; width:400px; position:relative; text-align:left; vertical-align:top; text-align:center;}
.our_service .inner ul li img{width:340px;}
.our_service .inner ul li:first-child::before{ content:""; border-left:1px solid #999; position:absolute; right:-50px; top:0; height:100%;}
.our_service .inner ul li h3{margin:10px 0 0 0; line-height:150%; font-weight:bold; font-size:14px;}

/*---------------------------
company_history
---------------------------*/       
.company_history{background:#EEEEEE;}
.company_history .inner{ width:990px}
.company_history .inner dl{width:990px;vertical-align:top; font-size:0;}
.company_history .inner dt{margin:0; width:140px; display:inline-block; padding:20px 0; border-top:1px solid #999;vertical-align:top; font-size:13px;}
.company_history .inner dd{margin:0; width:850px; display:inline-block; padding:20px 0; border-top:1px solid #999; font-size:13px;}
.company_history .inner dl dt:first-child,
.company_history .inner dl dt:first-child + dd{border-top:none;}
 
/*---------------------------
works
---------------------------*/       
.works {border-bottom:1px solid #eee; padding-bottom:0;}
.works ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 中央寄せ */
  gap: 0; /* 必要なら余白調整 */
  margin: 0;
  padding: 0;
}

.works li {
  width: 20%;          /* 5カラム */
  position: relative;
  font-size: 13px;
  aspect-ratio: 16/9;
}

.works li img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}





.works li .over{margin:0; position:absolute; width:100%; height:100%; opacity:0; background:rgba(0,128,203,.9); color:#fff;}
.works li .over:hover{opacity:1;}
.works li .over div{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.works li div .tit{margin:0;}
.works li div p{margin:0;}

/*---------------------------
contact
---------------------------*/       
.contact {text-align:center;}
.contact .inner div{margin:0 20px; display:inline-block; width:310px; vertical-align:top;}
.contact .inner div p{margin:0; font-size:20px; font-weight:400;}
.contact .inner div strong{margin:0 0 0 5px; font-size:30px; font-weight:700;}                
.contact .inner .btn a{margin:40px 0 20px 0; font-size:14px; width:300px; height:40px; line-height:40px;background:#007FCB; color:#fff; display:inline-block;border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}



/*---------------------------
Staff
---------------------------*/       

/*---------------------------
Staff
---------------------------*/
.staff-recruit {
  text-align: center;
  background:#EEEEEE;
}

/* .staff-recruit .caption {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.4;
}

.staff-recruit .caption span {
  font-size: 12px;
  letter-spacing: 0.1em;
} */

.staff-recruit__body {
  /* margin: 0 20px; */
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.staff-recruit__lead {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 900;
}

.staff-recruit__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.staff-recruit__btn a {
  margin: 40px 0 20px 0;
  font-size: 14px;
  width: 300px;
  height: 40px;
  line-height: 40px;
  background: #007FCB;
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  text-decoration: none;
}

.staff-recruit__btn a:hover {
  opacity: 0.8;
}

.staff-recruit__mail a {
  font-size: 14px;
  color: #007FCB;
  text-decoration: none;
}

.staff-recruit__mail a:hover {
  text-decoration: underline;
}




/*---------------------------
footer
---------------------------*/    				
footer{background:#EEEEEE; float:left; width:100%; padding:60px 0;}
footer .inner figure{margin:0; width:137px; float:left;}
footer .inner div{margin:0 0 0 20px; float:left; width:600px;}
footer .inner div .tit{ font-weight:bold;}
footer .inner div p{margin:0;}
footer .inner div p span{margin:0 5px 0 10px; font-weight:700;}

footer .inner div p span:first-child{margin:0 5px 0 0;}

footer .inner address{margin:0; float:right; font-style:normal; padding:48px 0 0 0;}







@media only screen and (max-width:1200px){
	
/*---------------------------
1200 共通
---------------------------*/
.pc_dis{display:none;}
.sp_dis{display:block;}
	
}

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

}


/* Swiper 初期は非表示 */
.js-main-banner-swiper {
  opacity: 0;
  transition: opacity .3s ease .5s;
}

/* 初期化後に表示 */
.js-main-banner-swiper.is-ready {
  opacity: 1;
}

/* =========================
   Swiper Navigation
========================= */
.js-main-banner-prev,
.js-main-banner-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  border: none;


}


.js-main-banner-prev::after,
.js-main-banner-next::after {
  font-size: 14px;       
  color: #007FCB;         
  font-weight: bold;
}

/* hover（任意） */
.js-main-banner-prev:hover,
.js-main-banner-next:hover {
  background: #f5f5f5;
}

.js-main-banner-prev:focus,
.js-main-banner-next:focus {
  outline: none;
}