/*Webフォント*/
@font-face {
  font-family: 'hannari';
  src: url(../css/hannari.eot);
  src: local('hannari Regular'), local('hannari'),
         url(../css/hannari.otf) format('opentype');
}

/*
@font-face {
	font-family: OpenSans;
	src: url(../css/OpenSans-Regular.ttf) format('truetype')
}
@font-face {
	font-family: QuattrocentoSans-Bold;
	src: url(../css/QuattrocentoSans-Bold.ttf) format('truetype')
}
@font-face {
	font-family: QuattrocentoSans-Regular;
	src: url(../css/QuattrocentoSans-Regular.ttf) format('truetype')
}

*/
.metro .col-xs-1, .metro .col-sm-1, .metro .col-md-1, .metro .col-lg-1, .metro .col-xs-2, .metro .col-sm-2, .metro .col-md-2, .metro .col-lg-2, .metro .col-xs-3, .metro .col-sm-3, .metro .col-md-3, .metro .col-lg-3, .metro .col-xs-4, .metro .col-sm-4, .metro .col-md-4, .metro .col-lg-4, .metro .col-xs-5, .metro .col-sm-5, .metro .col-md-5, .metro .col-lg-5, .metro .col-xs-6, .metro .col-sm-6, .metro .col-md-6, .metro .col-lg-6, .metro .col-xs-7, .metro .col-sm-7, .metro .col-md-7, .metro .col-lg-7, .metro .col-xs-8, .metro .col-sm-8, .metro .col-md-8, .metro .col-lg-8, .metro .col-xs-9, .metro .col-sm-9, .metro .col-md-9, .metro .col-lg-9, .metro .col-xs-10, .metro .col-sm-10, .metro .col-md-10, .metro .col-lg-10, .metro .col-xs-11, .metro .col-sm-11, .metro .col-md-11, .metro .col-lg-11, .metro .col-xs-12, .metro .col-sm-12, .metro .col-md-12, .metro .col-lg-12 {
	position: relative;
	min-height: 1px;
	padding-left: 0;
	padding-right: 0
}
.bg-a {
	background: #6facc8
}
.color-a {
	color: #6facc8
}
.bg-trans {
	background: rgba(2,145,140,.7)
}
body {
	background-position: center
}
body p {
	color: #8d8f92
}
img {
	max-width: 100%
}
.hidding {
	visibility: hidden
}
.visible {
	visibility: visible
}
.build {
	padding: 15px 0;
	position: relative
}

.page {
	padding: 72px 0 71px;
	position: relative;
	background: #fff;
	overflow: hidden;
	border-bottom: 1px solid #D6D6D6
}
.page-color {
	padding: 72px 0 71px;
	position: relative;
	background: #39444c;
	overflow: hidden;
	border-bottom: 1px solid #D6D6D6
}
.page-color .title-page h2 {
	color: #fff;
	border-color: #4e5a62;
	font-family: 'hannari';
	margin: 0;
	border-left: 10px solid #6facc8;
	padding-left: 10px;
	font-size: 36px;
	font-weight: 500

}
a.btn-clear {
	border: 2px solid #fff
}
.navbar {
	margin: 0;
	border: 0;
	border-radius: 0;
	min-height: inherit;
	font-family: 'hannari';
	font-size: 16px;
}
.navbar-default .navbar-nav>li>a {
	color: #fff
}
.navbar-brand {
	height: auto;
	padding: 24px 0
}
.navbar-nav>li>a {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	padding-left: 10px;
	margin: 23px 10px;
	border: 2px solid transparent;
	border-radius: 3px
}
.navbar-default .navbar-nav>li>a {
	color: #a4aead;
	font-weight: 700
}
.navbar-nav>li.current>a {
	border-color: #6facc8;
	color: #6facc8
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
	border-color: #5b6168;
	color: #a4aead
}
.navbar-default {
	background-color: #1d2126;
	border-color: none
}
.delay1 {
	-webkit-animation-delay: 100ms;
	-moz-animation-delay: 100ms;
	-ms-animation-delay: 100ms;
	-o-animation-delay: 100ms
}
.delay2 {
	-webkit-animation-delay: 200ms;
	-moz-animation-delay: 200ms;
	-ms-animation-delay: 200ms;
	-o-animation-delay: 200ms
}
.delay3 {
	-webkit-animation-delay: 300ms;
	-moz-animation-delay: 300ms;
	-ms-animation-delay: 300ms;
	-o-animation-delay: 300ms
}
.delay4 {
	-webkit-animation-delay: 400ms;
	-moz-animation-delay: 400ms;
	-ms-animation-delay: 400ms;
	-o-animation-delay: 400ms
}
.delay5 {
	-webkit-animation-delay: 500ms;
	-moz-animation-delay: 500ms;
	-ms-animation-delay: 500ms;
	-o-animation-delay: 500ms
}
.delay6 {
	-webkit-animation-delay: 600ms;
	-moz-animation-delay: 600ms;
	-ms-animation-delay: 600ms;
	-o-animation-delay: 600ms
}
.delay7 {
	-webkit-animation-delay: 700ms;
	-moz-animation-delay: 700ms;
	-ms-animation-delay: 700ms;
	-o-animation-delay: 700ms
}
.delay8 {
	-webkit-animation-delay: 800ms;
	-moz-animation-delay: 800ms;
	-ms-animation-delay: 800ms;
	-o-animation-delay: 800ms
}
.delay9 {
	-webkit-animation-delay: 900ms;
	-moz-animation-delay: 900ms;
	-ms-animation-delay: 900ms;
	-o-animation-delay: 900ms
}
.delay10 {
	-webkit-animation-delay: 1000ms;
	-moz-animation-delay: 1000ms;
	-ms-animation-delay: 1000ms;
	-o-animation-delay: 100ms
}
#flex-slide {
	background: 0 0;
	border: 0;
	webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none
}
#flex-slide .flex-control-nav {
	text-align: right
}
#flex-slide .flex-direction-nav {
	display: none
}
#flex-slide .flex-control-paging li a {
	background: rgba(0,0,0,0);
	border: 1px solid #fff
}
#flex-slide .flex-control-paging li a.flex-active {
	background: #fff
}
#flex-slide .slides li h1 {
	font-family: 'hannari';
	font-weight: 500;
	font-size: 43px;	
}
#flex-slide .slides li p {
	padding: 12px 0;
	color:#fff;
	font-size:18px;
}
#flex-slide .slides li a.btn-clear {
	margin-right: 5px;
	font-weight: 500;
}
a.btn-clear {
	font-size: 20px;
	color: #fff
}
a.btn-clear:hover {
	color: #fff;
	border-color: #6facc8;
	background: #6facc8;
}
.main-head {
	color: #fff;
	width: 100%;
	height: auto;
	position: relative;
	top: 60%;
	-webkit-transform: translate(0, -60%);
	-moz-transform: translate(0, -60%);
	-ms-transform: translate(0, -60%);
	-o-transform: translate(0, -60%);
	transform: translate(0, -60%);
	overflow: hidden
}
.title-page {
	padding-bottom: 48px
}
.title-page h2 {
	font-family: 'hannari';
	margin: 0;
	border-left: 10px solid #6facc8;
	padding-left: 10px;
	color: #292f36;
	font-size: 36px;
	font-weight: 500
}
.title-page img {
	margin: 20px 0
}
.title-page p {
	color: #7A7A7A;
	line-height: 36px
}
.title-page p strong {
	font-size: 18px
}
.stuff .stuff-icon {
	margin: 0 auto
}
.stuff h3 {
	font-size: 18px;
	color: #797979;
	font-weight: 700;
	margin: 0 0 10px 0;
}

.stuff h3.kaki  {
	font-size: 18px;
	color: #797979;
	font-weight: 700;
	margin: 25px 0 10px 0;
}

.stuff p {
	color: #8d8f92;
	margin: 0;
	line-height: 24px
}
.stuff article {
	padding-top: 24px
}
.stuff article:nth-child(1) {
	padding-top: 0
}
p.blur {
	padding: 24px 0
	font-size: 18px;
}
.stuff-border {
	border-right: 1px solid #dedede
}
ul.my-social li {
	width: 60px;
	height: 60px;
	padding: 0;
	margin-right: -2px
}
ul.my-social li a {
	background: #c8cdd0;
	display: block;
	height: 60px;
	text-align: center;
	line-height: 70px;
	color: #fff
}
ul.my-social li a:hover {
	background: #d0d5d9
}
.goal-number {
	width: 48px;
	height: 48px;
	text-align: center;
	color: #fff;
	line-height: 48px;
	font-size: 18px;
	margin-right: 15px
}
.goal-desc {
	overflow: hidden
}
.goal-desc h3 {
	margin: 0;
	color: #292f36;
	font-weight: 400;
	margin: 0 0 5px 0;
}
.team-attr {
	background: #e1e6ea;
	padding: 15px
}
.team-attr h3 {
	margin: 0;
	font-size: 16px;
	padding: 0 0 5px;
	color: #5a6066
}
.team-attr p {
	margin: 0;
	color: #a3a5a8
}
.team:hover {
	cursor: pointer
}
.team:hover .team-attr {
	background: #3a454d
}
.team:hover .team-attr h3, .team:hover .team-attr p {
	color: #fff
}
ul.team-social li {
	width: 48px;
	height: 48px;
	padding: 0;
	margin-right: -2px
}
ul.team-social a {
	background: #3a454d;
	display: block;
	height: 48px;
	text-align: center;
	line-height: 50px;
	color: #fff
}
ul.team-social a:hover {
	background: #4e5a62
}
.team .myToggle {
	background: rgba(255,255,255,.4)
}
.mywork {
	display: none
}
#showLess {
	display: none
}
.folio {
	overflow: hidden
}
.hcaption {
	position: relative;
	height: 100%
}
.myToggle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.4);
	z-index: 77;
	display: none
}
.attr-icon p {
	color: #39444c;
	font-size:14px;
}

.attr-icon {
	width: 100%;
	height: auto;
	text-align: center;
	position: absolute;
	z-index: 88;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%)
}

.attr-cap {
	width: 100%;
	height: auto;
	position: absolute;
	z-index: 88;
	bottom: 0;
	left: 0
}
.caption {
	padding: 36px 24px;
	width: 100%;
	max-width: 250px;
	margin: 0 auto
}
.caption a {
	color: #fff
}
.caption a:hover {
	color: #fff
}
.main-cap {
	background: #292f36;
	padding: 18px
}
.main-cap h3 {
	margin: 0;
	color: #fff;
	font-size: 13px
}
.service h3 {
	margin: 0;
	padding: 20px 0;
	font-size: 27px;
	font-family: 'hannari';
}
.service p {
	font-size: 20px;
	margin: 0;
	padding: 0 0 30px;
	font-family: 'hannari';
}
.feature h3 {
	color: #fff;
	margin: 0;
	padding: 20px 0;
	font-size: 23px;
	font-family: 'hannari';
}
.feature p {
	font-size: 16px;
	margin: 0;
	padding: 0;
	color: #dcdfe1
}

p.tabeho {
	color: #fff;
	margin: 0;
	padding: 40px 0 0 0;
	font-size: 23px;
	font-family: 'hannari';
}

p.tabeho2 {
	color: #fff;
	margin: 20px 0 0 0;
	font-size: 33px;
	font-family: 'hannari';
}

p.shohin {
	color: #fff;
	margin: 0;
	padding: 40px 0 0 0;
	font-size: 23px;
	font-family: 'hannari';
}


.g-map {
	margin: 0 0 30px
}
.g-map .embed-responsive.embed-responsive-16by9 {
	padding-bottom: 30.25%
}
.contact h3 {
	font-size: 18px;
	font-family: QuattrocentoSans-Bold, sans-serif
}
.contact p {
	font-size: 16px;
	margin: 0;
	padding: 15px 0
}
.contact-form {
	background: #fff;
	margin-top: -150px;
	padding-left: 30px;
	padding-right: 30px
}
.contact-form form label {
	display: block;
	color: #8d8f92;
	font-family: QuattrocentoSans-Reguler, sans-serif;
	font-weight: 400
}
.contact-form form button {
	display: block;
	margin-top: 30px;
	font-family: QuattrocentoSans-Reguler, sans-serif;
	font-size: 14px;
	color: #fff
}
.contact-form form .form-group {
	width: 49.59%;
	margin-bottom: 30px
}
.contact-form form .form-group:nth-child(1) {
	padding-right: 10px
}
.contact-form form .form-control {
	width: 100%;
	background: #ccc;
	height: 45px;
	-webkit-box-shadow: none;
	box-shadow: none
}
.contact-form form textarea.form-control {
	height: auto
}
.form-control::-moz-placeholder {
color:#929292;
opacity:1;
font-weight:700
}
.form-control:-ms-input-placeholder {
color:#929292;
font-weight:700
}
.form-control::-webkit-input-placeholder {
color:#929292;
font-weight:700
}
footer {
	background: #000
}
.cpright p {
	color: #929292;
	margin: 0
}
.socMed ul.list-inline {
	margin: 0
}
.socMed ul.list-inline li a {
	color: #fff
}

.info2{
	float:left;
}




@media (min-width:240px) and (max-width:767px) {
.main-head p large {
	font-size: 24px
}
.main-head h1 {
	font-size: 24px;
	letter-spacing: 0;
	line-height: 40px
}
.service-img {
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
	position: relative
}
.caption {
	padding: 24px
}
}

@media (min-width:240px) and (max-width:480px) {
header {
	overflow-y: auto
}
.main-head {
	height: 100%;
	padding-top: 100px
}
.main-head img {
	padding: 12px 0
}
.main-head a {
	margin-bottom: 48px
}
}