body {
width: 100%;
height: 100%;
font-family: 'Noto Sans Japanese', sans-serif;
font-size: 18px;    
}

html {
width: 100%;
height: 100%;
}

h1, h2, h3, h4, h5, h6,
code, kbd, pre, samp { font-family: 'Noto Sans Japanese', sans-serif;}

.tooltip,
.popover.
.carousel-control .icon-prev,
.carousel-control .icon-next { font-family: 'Noto Sans Japanese', sans-serif; }

.navbar-custom,
.navbar-inverse {
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
font-family: 'Noto Sans Japanese', sans-serif;
background-color: #a1cfe6;
font-weight: bold;
}

.navbar-custom .navbar-toggle {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
}
.navbar-custom .navbar-toggle:focus,
.navbar-custom .navbar-toggle:active {
  outline: none;
}
.navbar-custom .navbar-brand {
  font-weight: 700;
}
.navbar-custom .navbar-brand:focus {
  outline: none;
}
.navbar-custom a {
  color: #fff;
}

.navbar-custom .navbar-brand {
  font-weight: 700;
}
.navbar-custom .nav li a {
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.navbar-custom .nav li a:hover {
  color: rgba(255, 255, 255, 0.8);
  outline: none;
  background-color: transparent;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
  outline: none;
  background-color: transparent;
}
.navbar-custom .nav li.active {
  outline: none;
}
.navbar-custom .nav li.active a {
  background-color: rgba(255, 255, 255, 0.3);
}
.navbar-custom .nav li.active a:hover {
  color: #fff;
}

@media (min-width: 768px) {
  .navbar-custom {
    padding: 20px 0;
    border-bottom: none;
    letter-spacing: 1px;
    background: transparent;
    -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  }
  .navbar-custom.top-nav-collapse {
    padding: 0;
    background: #8ac7e6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
}


.navbar-inverse {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
font-family: 'Noto Sans Japanese', sans-serif;
  background-color: 5f9ea0;
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-brand {
  color: #fff;
}
.navbar-inverse .nav li a {
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.navbar-inverse .nav li a:hover {
  color: rgba(255, 255, 255, 0.8);
  outline: none;
  background-color: transparent;
}
.navbar-inverse .nav li a:focus,
.navbar-inverse .nav li a:active {
  outline: none;
  background-color: transparent;
}
.navbar-inverse .nav li.active {
  outline: none;
}
.navbar-inverse .nav li.active a {
  background-color: rgba(255, 255, 255, 0.3);
}
.navbar-inverse .nav li.active a:hover {
  color: white;
}

.navbar-inverse .navbar-toggle {
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
}



section {margin-bottom: 90px;}

em {font-style: normal;}

strong.large {font-size: 23px;}

.spacer	{height: 100px;}
.spacer-medium {height: 50px;}
.spacer-small {height: 25px;}
.spacer-tiny {height: 12px;}

.mb-40 {margin-bottom: 40px;}
.mb-60 {margin-bottom: 60px;}
.pd-30 {padding: 30px;}
.pd-45 {padding: 45px;}
.pd-60 {padding: 60px;}

@media (max-width: 540px) {
#about .pd-60 {padding: 10px;}     
}
@media (min-width: 541px) {
br.none{ display: none;} 
   
}
@media (max-width: 540px) {
.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: white;
  background: url(../img/bg-masthead-sm.jpg) no-repeat top left scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
}

#about li {
margin: 0 0 12px;
font-size: 15px;
line-height: 1.5;
}
@media (min-width: 768px) {
#about li {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.6;
  }
}
#about h3 {margin-bottom: 20px;}

#about h4 {margin-bottom: 10px;}
#about dl {font-size: 16px; }
#about dt {font-family: "Mplus 1p", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    margin-bottom: 5px;}
#about dd {margin-bottom: 10px; line-height: 1.5}
#about .col-sm-6 {margin: 0; padding: 0;}

#products .col-sm-4 {}

#products p{ font-size: 16px; margin-bottom: 20px;}

#products img { text-align: center; margin-right: auto; margin-left: auto; max-width: 240px; max-height: auto;}

#info h2, #info h3, #info h4, #info h5, #info h6 {
margin: 0 0 20px;
font-family: "Mplus 1p", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#information p,
#info p { font-size: 14px;margin: 0 0 20px;}

footer {
  padding: 50px 0 10px;
}

footer h5 {margin: 0 0 20px;}
footer h5 a {color: #333;}

footer address, footer p {
font-size: 14px;    
margin: 0;    
}


/*================================
mail form
=============================== */

.bs-callout{ margin: 20px 0;
padding: 20px;
border-left: 3px solid #eee;
}

.bs-callout h2, .bs-callout h3{ margin-top: 0; }
.bs-callout h4{ margin-top: 0; margin-bottom: 5px; }
.bs-callout p:last-child{ margin-bottom: 0; }

.bs-callout-default{
background-color: #f8f8f8;
}

.bs-callout-info{
background-color: #f4f8fa;
border-color: #5bc0de;
}
.bs-callout-info h4{ color: #5bc0de; }

.bs-callout-danger{
background-color: #fdf7f7;
border-color: #d9534f;
}
.bs-callout-danger h4{ color: #d9534f; }

.bs-callout-warning{
background-color: #fcf8f2;
border-color: #f0ad4e;
}
.bs-callout-warning h4{ color: #f0ad4e; }

/* =======================================================
pamphlet
* ======================================================= */

.pamphlet-item {
  margin: 0 0 15px;
  right: 0;
}
.pamphlet-item .pamphlet-link {
  display: block;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
.pamphlet-item .pamphlet-link .pamphlet-hover {
  background: rgba(255, 215, 0, 0.6);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
.pamphlet-item .pamphlet-link .pamphlet-hover:hover {
  opacity: 1;
}
.pamphlet-item .pamphlet-link .pamphlet-hover .pamphlet-hover-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: white;
}
.pamphlet-item .pamphlet-link .pamphlet-hover .pamphlet-hover-content i {
  margin-top: -12px;
}
.pamphlet-item .pamphlet-link .pamphlet-hover .pamphlet-hover-content h3,
.pamphlet-item .pamphlet-link .pamphlet-hover .pamphlet-hover-content h4 {
  margin: 0;
}
.pamphlet-item .pamphlet-caption {
  max-width: 400px;
  margin: 0 auto;
  background-color: white;
  text-align: center;
  padding: 10px;
}
.pamphlet-item .pamphlet-caption h4 {
  text-transform: none;
  margin: 0;
font-weight: 400;    
}
.pamphlet-item .pamphlet-caption p {
  font-size: 16px;
  margin: 0;
}

#pamphlet-list * {
  z-index: 2;
}

@media (min-width: 767px) {
  #pamphlet .portfolio-item {
    margin: 0 0 30px;
  }
}


.pamphlet-modal .modal-dialog {
  margin: 0;
  height: 100%;
  width: auto;
}
.pamphlet-modal .modal-content {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 80px 0;
  text-align: center;
}


.pamphlet-modal .close-modal {
  position: absolute;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 25px;
  cursor: pointer;
}
.pamphlet-modal .close-modal:hover {
  opacity: 0.3;
}
.pamphlet-modal .close-modal .lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #222222;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}
.pamphlet-modal .close-modal .lr .rl {
  height: 75px;
  width: 1px;
  background-color: #222222;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 1052;
}
.pamphlet-modal .modal-backdrop {
  opacity: 0;
  display: none;
}

.pamphlet-modal img {
text-align: center;
margin-left: auto;
margin-right: auto;
}

.img-thumbnail:hover {
border: 1px solid #0000dd;    
}