@charset "utf-8";
/*
Max Width：このサイズより小さい場合に適用

Min Width：このサイズより大きい場合に適用
*/

/**********
ページトップへ
フッター
コンテナ
ナビ
スライダー
見出し
ボタン
フォーム
テーブル
トップバナー
下層メインタイトル
会社概要
Googlemap
マージン
**********/

html {
  font-size: 113%;
  /* つまり16px */
}

.wrapper {
  position: relative;
}

a,
a:hover {
  text-decoration: none;
}

/*ページトップへ*/

#page_top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 20px;
  background: #0B2582;
  opacity: 0.8;
  border-radius: 50%;
}

#page_top a {
  position: relative;
  display: block;
  /*
  width: 50px;
  height: 50px;
*/
  text-decoration: none;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

/*
#page_top a::before {
  font-family: FontAwesome;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  line-height: 25px;
}
*/

/*フッター*/

.footer-bg {
  background: #0B2582;
  color: #fff;
  margin-top: 50px;
  padding: 50px 0;
}

/*コンテナ*/

section.ptb50 {
  padding: 50px 0;
}

/*ナビ*/

.bg-light {
  /*background-color: #f8f9fa!important;*/
  background-color: #fff!important;
  border-top: solid 3px #04A6EE;
  padding: 20px 0;
}



@media (max-width: 767px) {
  .navbar-light .navbar-toggler {
    width: 90%;
    margin: .5rem auto 0 auto;
  }
}

.navbar-toggler {
  background-color: #065493;
}

.navbar-light .navbar-toggler {
  color: #065493;
  border-color: #065493;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-nav {
  width: 90%;
  margin: auto;
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
  color: #1D80DD;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: #1D80DD;
}

.navbar-light .navbar-nav .nav-link {
  color: #04A6EE;
}

/*スライダー*/

.slidein {
  position: relative;
}

.slidein img {
  width: 100%;
}

.slidein h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 8px #000000;
  font-size: 2rem;
  width: 90%;
}

@media (max-width: 480px) {
  .slidein h1 {
    font-size: 1rem;
  }
}

@media (min-width: 992px) {
  .slidein h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
  .slidein h1 {
    font-size: 4rem;
  }
}

/*見出し*/

h1 {
  text-align: center;
}

h1 span {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #04A6EE;
}

h1 span::before,
h1 span::after {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  border: 10px solid transparent;
}

h1 span::before {
  border-top: 10px solid #04A6EE;
}

h1 span::after {
  margin-top: -1px;
  border-top: 10px solid white;
}

@media (max-width: 480px) {
  .h1,
  h1 {
    font-size: 2rem;
  }
}

/*ボタン*/

.btn-primary2 {
  background-color: #f05f40;
  border-color: #f05f40;
  border-radius: 300px;
  padding: 1rem 2rem;
  color: #fff;
}

.btn-primary2:active,
.btn-primary2:focus,
.btn-primary2:hover {
  color: #fff;
  background-color: #ee4b28!important;
}

/*フォーム*/

span.required {
  color: #dc3545!important;
  font-weight: normal !important;
  margin-left: 1em;
  line-height: 1.5;
  font-size: .8rem;
}

.form-group {
  border-bottom: solid 1px #04A6EE;
  padding-bottom: 1rem;
}

.form-group > .col-sm-3 {
  font-weight: bold;
}

/*placeholder*/

.form-control::placeholder {
  color: #ccc;
}

.form-control::placeholder {
  color: #ccc;
}

/* IE */

.form-control:-ms-input-placeholder {
  color: #ccc;
}

/* Edge */

.form-control::-ms-input-placeholder {
  color: #ccc;
}

:placeholder-shown {
  color: #eee;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */

input::-webkit-input-placeholder {
  color: #ddd;
}

/* Firefox 18- */

input:-moz-placeholder {
  color: #ddd;
  opacity: 1;
}

/* Firefox 19+ */

input::-moz-placeholder {
  color: #ddd;
  opacity: 1;
}

/* IE 10+ */

input:-ms-input-placeholder {
  color: #ddd;
}

/*placeholder focus*/

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder {
  color: transparent;
}

/*テーブル*/

.post-content table {
  width: 100%;
}

.post-content table tbody th {
  background: #f5f5f5;
  text-align: center;
}

.post-content .table > tbody > tr > th {
  /*  width: 20%;*/
  padding: 20px;
  white-space: nowrap;
}

.post-content .table > tbody > tr > td {
  padding: 20px;
}

.post-content table.table-product tbody th {
  text-align: left;
  width: 30%;
}

@media (max-width: 991px) {
  table {
    table-layout: fixed;
  }
  .post-content table {
    width: 100%;
  }
  .post-content table tbody th,
  .post-content table tbody td {
    display: block;
    width: 100%;
    border: none !important;
  }
  .post-content .table > tbody > tr > td:nth-of-type(n + 2) {
    padding: 0 20px 20px 20px;
  }

  .post-content table.table-product tbody th {
    width: 100%;
  }
}

/*トップバナー*/

.about-box01 {
  background-image: url(../img/top/about-box01.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 10px;
  border: solid 1px #ddd;
}

.about-box02 {
  background-image: url(../img/top/about-box02.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 10px;
  border: solid 1px #ddd;
}

.about-box03 {
  background-image: url(../img/top/about-box03.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 10px;
  border: solid 1px #ddd;
}

.about-box04 {
  background-image: url(../img/top/about-box04.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 10px;
  border: solid 1px #ddd;
}

.about-box01 h2,
.about-box02 h2,
.about-box03 h2,
.about-box04 h2 {
  color: #fff;
  text-shadow: 3px 3px 6px #000000;
}

.about-box01::before,
.about-box02::before,
.about-box03::before,
.about-box04::before {
  background-color: rgba(0, 0, 0, 0);
}

a:hover .about-box01::before,
a:hover .about-box02::before,
a:hover .about-box03::before,
a:hover .about-box04::before {
  margin: 0 15px;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

/*下層メインタイトル*/

.subtitle {
  background: #04A6EE;
  margin-bottom: 50px;
  padding: 80px 0;
}

.subtitle h1 {
  color: #fff;
  font-size: 3.5rem;
  margin: 0;
}

@media (max-width: 480px) {
  .subtitle h1 {
    font-size: 2.8rem;
  }
}

/*会社概要*/

.companylist {
  border-bottom: solid 1px #04A6EE;
  padding-top: 15px;
  padding-bottom: 15px;
}

.companylist2 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.companylist3 {
  border-bottom: solid 1px #04A6EE;
  padding-top: 15px;
  padding-bottom: 15px;
}

@media (max-width: 991px) {
  .companylist2 {
    border-bottom: solid 1px #04A6EE;
  }

  .companylist3 {
    border-bottom: solid 0 #04A6EE;
    padding-bottom: 0;
  }

  .pt-0-s {
    padding-top: 0;
  }
}

/*Googlemap*/

.ggmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*マージン*/

.mt50 {
  margin-top: 50px;
}

.mt80 {
  margin-top: 80px;
}

.pt15 {
  padding-top: 15px;
}

.pt30 {
  padding-top: 30px;
}
