@charset "utf-8";
/* CSS Document */
[lang=ja] h1, [lang=ja] .h1 {
    font-size: 1.8rem;
	letter-spacing: 1px;
}
[lang=ja] h2, [lang=ja] .h2 {
    font-size: 1.6rem;
}
[lang=ja] h3, [lang=ja] .h3 {
    font-size: 1.2rem;
}
[lang=ja] h4, [lang=ja] .h4 {
    font-size: 1rem;
}
a {
	color: #333;
}
a:hover {
	color: #555;
}
body {
	background-color: #fdfaf3;
	font-size: 1.1rem;
}
.navbar {
	padding: 1rem 1rem;
	background-color: #fff;
	box-shadow: 0 0 4px 0px #ccc;
}
.navbar-nav {
	font-size: 1rem;
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,1);
}
.nav-link.active {
	font-weight: bold;
}
.navbar-brand {
	font-weight: bold;
}
@media (min-width: 992px){
.container, .container-lg, .container-md, .container-sm {
    max-width: 1140px;
}
	}
#hero {
    width: 100%;
    height: 70vh;
    background:  url("images/hero4_1400.jpg") top center;
    background-size: cover;
    position: relative;
    margin-bottom: -80px;
	margin-top: 76px;
}
#hero.subpage {
	height: 40vh;
	margin-top: 76px;
}


.mission #hero.subpage {
	background: url("images/13047723_995664800514234_1623250630194373729_o.jpg") top center;
    background-size: cover;
}

#hero.subpage2 {
	height: 40vh;
    }

.mission #hero.subpage2 {
	background: url("images/_DSF5332.jpg") 10% center;
    background-size: cover;
}
    
#hero.subpage3 {
	height: 40vh;
    }

.mission #hero.subpage3 {
	background: url("images/hero5.jpg") top center;
    background-size: cover;
}
    
#hero.subpage4 {
	height: 40vh;
    }

.mission #hero.subpage4 {
	background: url("images/_DSF0902.jpg") top center;
    background-size: cover;
}
.mission #hero.subpage5 {
	background: url("images/hero6.jpg") top center;
    background-size: cover;
	height: 40vh;
} 
#hero.subpage6 {
	background: url("images/hero7.jpg") top center;
    background-size: cover;
	height: 40vh;
}    
#hero .hero-container {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
#hero .hero-container>div {
	background-color: rgb(255 255 255 / 52%);
}
#hero h1 {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  background-color: rgb(255 255 255 / 54%);
	margin: 0 auto;
}
/*#hero h1:before, h1:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}*/
/*#hero h1:before, .sidebar h1:before {
  left: 7px;
}
#hero h1:after, .sidebar h1:after {
  right: 7px;
}*/
#hero.subpage h1 {
	font-size: 1.8rem;
}
video {
	max-height: 400px;
}
.video-container{
  	position: relative;
  	overflow-x: hidden;
	padding-top: 0;
	padding-bottom: 0;
	width: 100%;
   /* bottom: 0;
    top: 0;
    left: 0;
    right: 0;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
	background-color: #eae0d3;
	margin-top: 76px;
}
.sidebar {
	position: absolute;
}
.sidebar h1 {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  background-color: rgb(255 255 255 / 54%);
	margin: 0.625rem auto;
}
/*.sidebar h1:before, h1:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}*/
#main {
	margin-top: 80px;
}
.toppage #main {
	margin-top: 0;
}
.subheader {
    color: #737373;
    font-size: 0.9rem;
    margin-bottom: 0.6em;
    margin-top: 0;
    text-transform: uppercase;
}
section {
    padding: 60px 0 10px;
}
.section-title {
    padding-bottom: 30px
}

.topmenu h4 {
	font-size: 1.2rem;
	text-align: center;
}
.topmenu .row>div {
	margin-bottom: 2rem;
}
.topmenu .more-btn {
	float: right;
}
.card {
	transition: all .4s ease;
	box-shadow: 0 0 4px 0px #ccc;
	border: none;

}
.card:hover {
	background-color: #e0d2c2;
}
p.tel {
	font-size: 2rem;
}
.feature img {
	width: auto;
	margin: 2rem auto 4rem;;
	display: block;
}
.member h2 {
	font-size: 1.4rem;
}
.member h3 {
	font-size: 1.1rem;
}
footer {
	background-color: #e0d2c2;
}
footer p {
	font-weight: bold;
	font-size: 1.2rem;
}
@media (min-width: 768px) {
	[lang=ja] h1, [lang=ja] .h1 {
    font-size: 2rem;
	letter-spacing: 1px;
}
	video {
		max-height: 800px;
	}

}