@charset "utf-8";
/* CSS Document */
/*共通要素*/
html{
	/*font-size: 62.5%;*/
	font-family: "Sawarabi Gothic";
	
}
body{
	background-color:#eeeeee;
}
a,a:hover{
	text-decoration: none;
	color: #000000;
}
.f-s1{
	font-size: 1rem !important;
}
.f-s2{
	font-size: 1.25rem !important;
}
.f-s3{
	font-size: 1.88rem !important;
}
.f-logo{
	font-family: 'Times New Roman';
}
.bb-blue{
	border-bottom: #1c69d4 2px solid;
}
.bb-blue10{
	border-bottom: #1c69d4 10px solid;
}
.bg-white{
	background-color:#FFFFFF;
}
.bg-black{
	background-color:#000000;
}

/*フェードイン*/
	/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}
	/*2.上下の動きを指定*/
.updown {transform: translateY(-50px);}
.downup {transform: translateY(50px);}
	/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}

/*画像のマウスオーバー*/
a.image-over {
  display: block;
  width: 100%;
  margin: 0 auto;
  color: #000;
  text-decoration: none;
}
a.image-over div {
	position:relative;
	height: 100%;
	overflow: hidden;
}
a.image-over div img {
  width: 100%;
  height: auto;
  transition: .3s;
}
a.image-over:hover div img {
  transform: scale(1.2);
}
a.image-over div img.cap {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

/*ページ内リンクの位置調整*/
#news,#service,#works,#inquiry,#company{
	margin-top: -80px;
	padding-top:80px;
}

/*navbar*/
nav{
	max-width:1200px;
	margin:0 auto;
}
.nav-link{
	font-size: 14px;
	/*text-shadow	: 4px  4px 6px #ffffff,
      -4px  4px 6px #ffffff,
       4px -4px 6px #ffffff,
      -4px -4px 6px #ffffff,
       4px  0px 6px #ffffff,
       0px  4px 6px #ffffff,
      -4px  0px 6px #ffffff,
       0px -4px 6px #ffffff;*/
}
.bg-nav{
	background-color: #eeeeee;
}
.nav-item{
	text-align:right;
}
@media screen and (min-width:768px) {
.l-nav{
	display: none;
}
.navbar-nav {
}
.navbar-nav ul {
}
.navbar-nav li {
	/*border-top: 0px solid rgba(0, 0, 0, .1);*/
}
.navbar-nav li a {
	font-weight: bold;
	text-align: center;
	/*border-left: 1px solid rgba(255, 255, 255, .75);
	border-right: 1px solid rgba(0, 0, 0, .1);*/
}
.navbar-nav li:last-child a {
	border-right: 0;
	border-radius: 0 3px 3px 0;
}
}
@media screen and (max-width:768px) {
	.m-nav{
	display: none;
	}
	.slider-container,.header-img{
		margin-top: 80px;
	}
}

/*header上*/
#index-m{
	height:90px;
}
.top-m{
	height:40vh;
	padding-bottom:10vh;
}
@media screen and (max-width:768px) {
#index-m{
	height:90px;
}
.top-m{
	height:10vh;
	padding-bottom:10vh;
}
}


/*header*/
.hero {
  position: relative;
  background-color:#000000;
}
	/* video */
.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
	min-height: 100%;
  /*height: calc(100vw * 0.75);
	max-height:100vh;*/
	height: 50vh;
  margin:0 auto;
}

.video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);/**/
}
@media screen and (min-width:768px) {
	.video {
		width: 100%;
		min-height: 100%;
	}
}
@media screen and (max-width:768px) {
	.video-box {
		/*height: calc(100vw * 0.55);*/
		height: 45vh;
	}
	.video {
		min-width: 100%;
		height: 100%;
	}
}
	/* overlay */
.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}
	/* text */
.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.text-box p {
  font-family: Roboto;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
  padding: 0 50px;
  text-align: center;
  color: #fff;
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
@keyframes slideFromRight {
  0%, 25% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@media screen and (max-width:768px) {
.text-box p {
  font-size: 20px;
  line-height: 1.2;
  padding: 0;
}
}

/*VISION*/
.vision h5{
	font-weight:bold;
	color:#666666;
}
.vision h5 span{
	color:#000000;
}
@media screen and (max-width: 767px){
}

@media screen and (max-width:992px) {
}
@media screen and (max-width:576px) {
}

/*事業内容*/
.service{
}
.service img{
	width:100%;
}
.service h5{
	font-weight:bold;
}
.service div.area{
	background-color:#bbbbbb;
	padding-left:2.0em;
}
.service ul{
}
.service ul li{
	display:inline-block;
	border-left:#000000 solid 1.5em;
	padding-left:0.5em;
	margin:1.0em;
	font-size:0.9em;
}

/*会社概要 テーブル*/
.tbl{
	width:95%;
	margin: 0 auto;
	font-size:0.8rem;
}
.tbl th {
	padding: 10px;
	vertical-align:top;
}
.tbl tr:last-child th {
}
.tbl td {
	padding: 10px;
	text-align: left;
}
 
@media screen and (max-width: 640px) {
  .tbl {
    width: 100%;
  }
  .tbl th {
    border-bottom: solid 1px #1c69d4;
    width: 100%;
  }
  .tbl td {
	  margin-bottom:1.0rem;
  }
  .tbl th,
  .tbl td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

/*お問合せ*/
.contact{
	font-size:12px;
}
.contact h5{
	margin-bottom:0;
	padding-bottom:0;
}
.inq{
	font-size:2.0em;
	background-color:#cccccc;
	font-weight:bold;
}
.inq span{
	margin-left:3em;
	font-size:0.5em;
}
.form{
	width: 90%;
	padding: 15px;
	background:#f8f8f8;
	border:1px solid rgba(0, 0, 0, 0.075);
	margin-bottom:25px;
	color:#727272 !important;
	font-size:13px;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
.form:hover{
	border:1px solid #8BC3A3;
}
.form:focus{
	color: white;
	outline: none;
	border:1px solid #8BC3A3;
}
.textarea{
	height: 200px;
	max-height: 200px;
	max-width: 100%;
}
  
/* Generic Button Styles */
  .button{
    padding:8px 12px;
    background:#0A5175;
    display: block;
    width:120px;
    margin:10px 0 0px 0;
    border-radius:3px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    text-align:center;
    font-size:0.8em;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }
  .button:hover{
    background:#8BC3A3;
    color:white;
  }

/* Send Button Styles */
  .form-btn{
    width:180px;
    display: block;
    height: auto;
    padding:15px;
    color:#fff;
    background:#999999;
    border:none;
    border-radius:3px;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin:auto;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }
  .form-btn:hover{
    background:#111;
    color: white;
    border:none;
  }
  .form-btn:active{
    opacity: 0.9;
  }
center{
  margin-top:330px;
}
input {
    position: relative;
    z-index: 9999;
}

/*会社概要*/
.company{
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
				-1px 1px 0 #FFF, 1px -1px 0 #FFF,
				0px 1px 0 #FFF,  0 -1px 0 #FFF,
				-1px 0 0 #FFF, 1px 0 0 #FFF;
}
@media screen and (max-width: 640px) {
.company{
}
}
.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/*フッター*/
footer{
}
.footer-classic {
}
.footer-classic a, .footer-classic a:focus, .footer-classic a:active {
}
.nav-list li {
    padding-top: 5px;
    padding-bottom: 5px;
}

.nav-list li a:hover:before {
    margin-left: 0;
    opacity: 1;
    visibility: visible;
}

ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.arr{
	font-size:0.5em;
}

.social-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 23px;
    font: 900 13px/1 "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
}
.social-container .col {
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-list li a:before {
    content: "\f061";
    font: 900 21px/1 "Font Awesome 5 Free";
    color: #4d6de6;
    display: inline-block;
    vertical-align: baseline;
    margin-left: -28px;
    margin-right: 7px;
    opacity: 0;
    visibility: hidden;
    transition: .22s ease;
}
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}