/*!
 * 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: #030; }
h3 {
    margin-top: 0;
    margin-bottom: 30px;
	color:#090;
}
.flow h3 {color:#FFF;}
h4 {margin-bottom:20px;}
h4 span {
	font-weight:bold;
	color:#030;
	border-bottom:1px solid #030;
	padding:8px;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

header .text-vertical-center {
	padding-top:0;
}

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

/* navbar */

.navbar{
	background:#030;	
}

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

/* About */

.about {
    padding: 50px 0;
}

/* Services */

.services {
    padding: 50px 0;
}

.service-item {
    margin-bottom: 30px;
}


#special {
	color:#FFF;
	text-align:center;
	margin:40px 40px 0;
	padding:10px;
	background:#030;
}
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;
}
.callout h2 {
	color:#fff;
}
.callout h3 {
	color:#fff;
}

/* flow */ 
.flow {
    padding: 50px 0;
}
.flow p {
	text-align:left;
	color:#333;
}
.bg-primary {
	background:#F0F8FD;	
}

/* Map */

.map {
    height: 500px;
}

/* company */

.company {
    padding: 50px 0;
	background-color:#fdfdfd;
	border-top: 1px solid #f2f2f2;
}

/* privacy */

.privacy {
    padding: 50px 0;
}


.btn-primary {
	background:#030;
	border:none;
}

/* 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-top:20px;
	padding-bottom:20px;
	color:#030;
}
.table>thead>tr>td i {
	color:#030;
}
.table>thead>tr>td {
	width:70%;
	padding-top:20px;
	padding-bottom:20px;
}

@media(max-width:768px) {
.flow p {
	text-align:left;
	color:#333;
	font-size:120%;
}    .map {
        height: 75%;
    }
}

/* Footer */

footer {
	margin-top:100px;
    padding: 50px 0;
	background:#030;
	color:#fff;
}

footer a{
	color:#fff;	
}

footer a:hover{
	color:#337ab7;	
}


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: #030;  /* 背景色 */
}
/* ▼画像に対する装飾 */
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;
}
}