/*!
 * Start Bootstrap - Stylish Portfolio Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
/* Global Styles */
html, body {
 width: 100%;
 height: 100%;
}
body {
 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
p {
 line-height: 1.8;
}
.flow h2, .portfolio h2, .company h2 {
 letter-spacing: .25em;
}
.about h2, .portfolio h2, .company h2, .privacy h2 {
 color: #006da0;
}
h3 {
 margin-top: 0;
 padding-bottom: 20px;
 color: #00aecb;
}
.flow h3 {
 color: #006da0;
}
h4 {
 margin-bottom: 20px;
}
h4 span {
 border-bottom: 1px solid #006da0;
 padding: 8px;
 font-weight: bold
}
hr {
 margin-top: 10px;
 margin-bottom: 10px;
 border: 1px solid #d3d3d3;
}
header .text-vertical-center {
 padding-top: 50px;
}
.text-vertical-center {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}
.text-vertical-center h1 {
 margin: 0;
 padding: 0;
 font-size: 4.5em;
 font-weight: 700;
}
/* Custom Button Styles */
.btn-dark {
 border-radius: 0;
 color: #fff;
 background-color: rgba(0, 0, 0, 0.4);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
 color: #fff;
 background-color: rgba(0, 0, 0, 0.7);
}
.btn-light {
 border-radius: 0;
 color: #333;
 background-color: rgb(255, 255, 255);
}
.btn-light:hover, .btn-light:focus, .btn-light:active {
 color: #333;
 background-color: rgba(255, 255, 255, 0.8);
}
/* Custom Horizontal Rule */
hr.small {
 max-width: 100px;
}
/* smart Menu */
.navbar {
 min-height: 70px;
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
 max-height: 100%;
}
.navbar-brand {
 font-size: 14px;
 height: 30px;
/* padding: 23px 15px;*/
}
.navbar-toggle .icon-bar {
 background: #FFF;
}
@media (min-width: 768px) {
 /* Navbar positioning foo */
 .navbar-wrapper {
  margin-top: 20px;
 }
 .navbar-wrapper .container {
  padding-right: 15px;
  padding-left: 15px;
 }
 .navbar-wrapper .navbar {
  padding-right: 0;
  padding-left: 0;
 }
 .navbar-nav {
  float: right;
 }
 /* The navbar becomes detached from the top, so we round the corners */
 .navbar-wrapper .navbar {
  border-radius: 4px;
 }
 /* Bump up size of carousel content */
 .carousel-caption p {
  margin-bottom: 20px;
  font-size: 21px;
  line-height: 1.4;
 }
 .featurette-heading {
  font-size: 50px;
 }
 .navbar-nav > li > a {
  padding-top: 25px;
  padding-bottom: 25px;
 }
}
@media (min-width: 992px) {
 .featurette-heading {
  margin-top: 120px;
 }
}
/* Header */
.header {
 display: table;
 position: relative;
 width: 100%;
 height: 80%;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;
 background-position: center;
}
.header h1, .header h2 {
 color: #FFF;
 text-shadow: 2px 2px 0 #000;
}
.header h2 {
 line-height: 1.5;
 text-shadow: 2px 2px 0 #000;
}
/* 2022 */
h1 img {
 width: 22%;
}
/* navbar */
.navbar {
 background: #006da0;
}
.navbar a {
 color: #fff;
}
.nav > li > a:focus, .nav > li > a:hover, .nav .open > a, .nav .open > a:focus, .nav .open > a:hover, .dropdown-menu {
 background-color: #096D97;
}
.dropdown-menu > li > a, .dropdown-header {
 color: #fff;
}
/* 2022 */
.navbar-header img {
 width: 280px;
}
/* About */
.about {
 padding: 140px 0;
}
/* Services */
.services {
 padding: 140px 0;
}
/*.service-item {
 margin-bottom: 30px;
}*/
.service-item img {
 border: 3px solid #fff;
 margin-bottom: 40px;
}
#special {
 color: #FFF;
 text-align: center;
 margin: 40px 40px 0;
 padding: 10px;
 background: #0F2542;
}
h2.special {
 font-weight: bold;
}
p.special {
 font-size: 140%;
 line-height: 1.2;
}
/* Callout */
.callout {
 display: table;
 width: 100%;
 padding: 50px 0;
 color: #fff;
 background: url(../img/banner-bg.jpg) no-repeat center center scroll;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;
}
/* 2022 */
.callout h3 {
 color: #fff;
 margin: 0;
}
/* flow */
.flow {
 padding: 140px 0;
}
.flow p {
 text-align: left;
 color: #333;
 margin: 20px 0 0;
}
.bg-primary {
 color: #006da0;
 background: #cce2ec;
}
/* Map */
.map {
 height: 500px;
}
/* company */
.company {
 padding: 50px 0;
 background-color: #fdfdfd;
 border-top: 1px solid #f2f2f2;
}
/* 2022 */
th {
 color: #006da0;
}
/* privacy */
.privacy {
 padding: 150px 0;
 background: #fdfdfd;
}
.btn-primary {
 background: #0F2542;
 border: none;
}
/* 2022 */
b {
 color: #006da0;
 font-size: 16px;
}
br.ma-20 {
 display: block;
 content: "";
 margin: 20px 0;
}
#privacy h3 {
 margin-bottom: 20px;
}
/* table */
.table > thead > tr > th, .table > thead > tr > td {
 vertical-align: bottom;
 border-bottom: 1px solid #ddd;
 text-align: left;
}
.table > thead > tr > th {
 width: 30%;
 padding: 20px 0;
}
.table > thead > tr > td {
 width: 70%;
 padding-top: 20px;
 padding-bottom: 20px;
}
@media(max-width:768px) {
 .map {
  height: 75%;
 }
}
/* Footer */
footer {
/* margin-top: 100px;*/
 padding: 50px 0;
 background: #cce2ec;
 color: #333;
}
footer a {
 color: #555;
}
footer a:hover {
 color: #666;
}
footer .text-logo {
 font-size: 2em;
 position: relative;
 top: -10px;
}
.mt-60 {
 margin-top: 60px;
}
/* h */
.bg-primary h3 {
 margin: 10px 0 0;
 font-size: 16px;
 font-weight: bold;
}
.bg-primary h3 a {
 text-align: left;
 text-decoration: none;
 padding-left: .5em;
 color: #fff;
}
/* Lower Page */
.lower_header {
 display: table;
 width: 100%;
 height: 500px;
 background: url(../img/head_bg.jpg) no-repeat top center;
 background-size: cover;
 color: #fff;
}
.content-section-a {
 padding: 50px 0;
 background-color: #f8f8f8;
}
.content-section-b {
 padding: 50px 0;
 background-color: #f8f8f8;
}
@media(max-width:768px) {
 .banner button {
  margin-top: 10px;
 }
}
/* ▼キャプション付き画像全体を囲むボックスの装飾 */
figure {
 display: inline-block; /* インラインブロック化 */
 margin: 0px 3px 7px 0px; /* 外側に余白を追加(※右に3px・下に7px) */
 background-color: #0F2542; /* 背景色 */
}
/* ▼画像に対する装飾 */
figure img {
 display: block; /* 余計な余白が出ないようにする */
 margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */
}
/* ▼キャプションに対する装飾 */
figcaption {
 color: #FFF;
 font-size: 120%; /* 文字サイズを90%に */
 text-align: center; /* 中身をセンタリング */
 padding: 15px 5px;
}
@media (min-width: 1200px) {
 .container {
  width: 970px;
 }
}
/* 2022 */
img {
 image-rendering: -webkit-optimize-contrast;
}

/*---- responsive ----*/
@media screen and (max-width: 1024px) {
 .table > thead > tr > th {
  width: 40%;
  padding: 20px 0 20px 300px;
 }
 .table > thead > tr > td {
  width: 60%;
  padding: 20px 0 20px 40px;
 }
}
@media screen and (max-width: 926px) {
 .navbar-header img {
  width: 270px;
 }
 h1 img {
  width: 40%;
 }
 .table > thead > tr > th {
  width: 40%;
  padding: 20px 0 20px 120px;
 }
}
@media screen and (max-width: 480px) {
 .navbar {
  min-height: 65px;
 }
 .navbar-header img {
  width: 280px;
 }
 .navbar-toggle {
  margin: 15px 10px;
 }
 h1 img {
  width: 70%;
 }

 .flow p {
  margin: 20px 0 40px;
 }
 .table > thead > tr > th {
  width: 20%;
  padding: 20px 0 20px 15px;
 }
 .table > thead > tr > td {
  width: 80%;
  padding: 20px 0 20px 10px;
 }
}