@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	outline: 0;
	vertical-align: baseline;
	list-style: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, span {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	list-style: none;
}
ol, ul {
	list-style: none;
	margin: 0;
}

ul li {
	list-style: none;
	}

/* ==========================================================================
HTML5 display definitions
========================================================================== */
 
/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* * Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */
[hidden] { display: none; }
/* ==========================================================================
Base
========================================================================== */
/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */
 
html { font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */ }

/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea {
 }
/* * Addresses margins handled incorrectly in IE 6/7. */
body { margin: 0;  
	font-family: YakuHanJP,'Noto Sans Japanese','Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,Verdana,sans-serif;
	overflow-x: hidden;
	background: #fff;
}


/* ==========================================================================
Links
========================================================================== */
/* * Addresses `outline` inconsistency between Chrome and other browsers. */
 
a:focus { outline: thin dotted; }
/* * Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

li.active {
	border-bottom: solid 3px #ddd; 
}


/* ==========================================================================
Tables
========================================================================== */
/* * Remove most spacing between table cells. */
table {
	border-collapse: collapse;
	border-spacing: 0;
	display: block;
}


/* ==========================================================================
Global Styles
========================================================================== */
a {
	color: #666;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
a:hover, a:focus {
	color: #3dc9b3;
	text-decoration: none;
}
p {
	line-height:150%;
	font-size: 16px;
	color: #333;
}
h2 {
	font-size: 15px;
	color: #353535;
	font-weight: bold;
}
.space { width: 100%; display: block; height: 20px; overflow: hidden; }

.center { text-align: center; }
.bold { font-weight: 
	bold;
}
.samll { font-size: 90%; }
.w,
.w a { 
color: #fff;
}

.glay { 
color: gray; 
font-size: 12px;
}
.left { float: left; }
.right { float: right; }

.pink {
	color: #ff008d;
}
.bold {
	font-weight: bold;
}

.point {
	padding: 20px 20px 0;
	border: solid 1px #ddd;
	border-radius: 6px;
}

/* header menu */

.sp-header,
.overlay {
	display: none;
}
.navbar-default {
	background: #FFF;
}

.row-fluid .span4 {
	width: 31.6239%;
	float: left;
}

.navbar-default .navbar-brand {
color: #333 !important;
letter-spacing: .05rem;
}

.navbar { margin-bottom: 0 !important; }

.navbar-brand {
	font-family: 'Muli', sans-serif;
	font-size: 1.9em;
	 padding: 20px !important;
	 height: auto !important;
}

.nav > li > a { 
    font-size: 17px;
	padding:  20px !important;
	font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, sans-serif;
	font-weight: 700;
    letter-spacing: .03rem;
    color: #333 !important;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: #ccc;
	background-color: #fff;
}

/* nav */

.dropdown-header {
	display: block;
	padding: 3px 20px;
	font-size: 12px;
	line-height: 1.42857;
	color: rgb(153, 153, 153);
}

.dropdown-menu > li > a {
    display: block;
    padding: 10px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    font-size: 15px;
}

.navbar-nav.navbar-right:last-child {
    margin-right: auto;
}

/* header.fixed */

.header { width: 100%;
 height: 60px;}
.header .fixbar {
  position: absolute;
  width: 100%;
}
.header.fixed .fixbar {
  position: fixed;
  margin: 0 auto !important;
  z-index: 999;
  background: #fff;
  z-index: 99999999999;
  border-bottom: 1px solid #000;
  }


/* .fixbar */
	
	.header.fixed .fixbar { 
		height: 50px ;
	}
	.header.fixed .fixbar .navbar-brand {
		font-size: 1.3em; 
	}
	.header.fixed .fixbar .nav > li > a {
		font-size: 15px;
	}
	
	.header.fixed .fixbar .navbar-brand {
		padding: 15px 20px !important;
	}
	
	.header.fixed .fixbar .nav > li > a {
    padding: 15px 20px !important;
}


.col-md-12 { padding: 0 !important; }


#contact h3.center-title { font-size: 18px; margin-bottom: 30px;}

#features h2::after, 
#contact h2::after
 {
    content: " ";
    border: solid 2px #42AB9E;
    display: block;
    width: 60px;
    margin: 30px 0;
}

.light-box h2::after {
	content: " ";
    border: solid 2px #42AB9E;
    display: block;
    width: 45px !important;
    margin: 20px auto !important;
}

.section-padding {
	padding: 40px 20px;
	}
.dark-bg {
	background: #f4f7f6;
}
.light-bg {
	background-color: #fff;
}
.dark-box {
	background: #EB7BAD;
	-webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
	-moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
	box-shadow: 0px 3px 0px 0px #f0f2f4;
}
.light-box {
	background-color: #FFF;
	-webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
	-moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
	box-shadow: 0px 3px 0px 0px #f0f2f4;
	padding: 20px 0;
}
.light-box:hover, .light-box:focus {
	-webkit-box-shadow: 0px 3px 0px 0px #42AB9E;
	-moz-box-shadow: 0px 3px 0px 0px #42AB9E;
	box-shadow: 0px 3px 0px 0px #42AB9E;
}
.box-hover {
	transition: all 500ms ease-in-out;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
}
.box-hover:hover, .box-hover:focus {
	transform: translate(0, -15px);
	-webkit-transform: translate(0, -15px);
	-ms-transform: translate(0, -15px);
}
.light-box p {
	font-size: 13px;
	line-height: 160%;
	color: #999;
}
.wrapper {
	height: 650px;
}
.nopadding {
	padding: 0;
}
.inner {
	padding-top: 170px;
}
section p {
	padding:0px 20px;
}

.col-md-8 p {
    padding: 0;
    line-height: 200%;
    color: #333;
    letter-spacing: 1px;
    margin-bottom: 20px;
}


h1.arrow { font-size: 22px; font-weight: bold; }

/* ---------------------- Header Animation ---------------------- */

.cbp-af-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #f6f6f6;
	z-index: 10000;
	height: 100px;
	overflow: hidden;
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	transition: height 0.3s;
}

.cbp-af-header .cbp-af-inner {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-af-header h1,
.cbp-af-header nav {
	display: inline-block;
	position: relative;
}

 /* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
.cbp-af-header h1,
.cbp-af-header nav a {
	line-height: 100px;
}

.cbp-af-header h1 {
	text-transform: uppercase;
	color: #333;
	letter-spacing: 4px;
	font-size: 2.5em;
	margin: 0;
	float: left;
}

.cbp-af-header nav {
	float: right;
}

.cbp-af-header nav a {
	color: #aaa;
	font-weight: 700;
	margin: 0 0 0 20px;
	font-size: 1.4em;
}

.cbp-af-header nav a:hover {
	color: #333;
}

/* Transitions and class for reduced height */
.cbp-af-header h1,
.cbp-af-header nav a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.cbp-af-header.cbp-af-header-shrink {
	height: 60px;
}

.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
	line-height: 60px;
}

.cbp-af-header.cbp-af-header-shrink h1 {
	font-size: 2em;
}

/* Example Media Queries */
@media screen and (max-width: 55em) {
	
	.cbp-af-header .cbp-af-inner {
		width: 100%;
	}

	.cbp-af-header h1,
	.cbp-af-header nav {
		display: block;
		margin: 0 auto;
		text-align: center;
		float: none;
	}

	.cbp-af-header h1,
	.cbp-af-header nav a {
		line-height: 115px;
	}

	.cbp-af-header nav a {
		margin: 0 10px;
	}

	.cbp-af-header.cbp-af-header-shrink h1,
	.cbp-af-header.cbp-af-header-shrink nav a {
		line-height: 45px;
	}

	.cbp-af-header.cbp-af-header-shrink h1 {
		font-size: 2em;
	}

	.cbp-af-header.cbp-af-header-shrink nav a {
		font-size: 1em;
	}
}

@media screen and (max-width: 32.25em) {
	.cbp-af-header nav a {
		font-size: 1em;
	}
}

@media screen and (max-width: 24em) {
	.cbp-af-header nav a,
	.cbp-af-header.cbp-af-header-shrink nav a {
		line-height: 1;
	}
}



/* ==========================================================================
Features
========================================================================== */
.features-wrapper, .team-wrapper {
	margin: 70px 0 0;
}
.shadow {
	text-shadow: rgb(55, 181, 161) 1px 1px, rgb(55, 181, 161) 2px 2px, rgb(55, 181, 161) 3px 3px, rgb(55, 181, 161) 4px 4px, rgb(55, 181, 161) 5px 5px, rgb(55, 181, 161) 6px 6px, rgb(55, 181, 161) 7px 7px, rgb(55, 181, 161) 8px 8px, rgb(55, 181, 161) 9px 9px, rgb(55, 181, 161) 10px 10px, rgb(55, 181, 161) 11px 11px, rgb(55, 181, 161) 12px 12px, rgb(55, 182, 162) 13px 13px, rgb(55, 183, 163) 14px 14px, rgb(56, 184, 164) 15px 15px, rgb(56, 185, 165) 16px 16px, rgb(56, 186, 166) 17px 17px, rgb(57, 187, 167) 18px 18px, rgb(57, 188, 168) 19px 19px, rgb(57, 189, 169) 20px 20px, rgb(58, 191, 170) 21px 21px, rgb(58, 192, 171) 22px 22px, rgb(58, 193, 172) 23px 23px, rgb(59, 194, 173) 24px 24px, rgb(59, 195, 174) 25px 25px, rgb(59, 196, 175) 26px 26px, rgb(60, 197, 176) 27px 27px, rgb(60, 198, 177) 28px 28px, rgb(60, 199, 178) 29px 29px, rgb(61, 201, 179) 30px 30px;
}
.icon {
	height: 175px;
	width: 175px;
	line-height: 175px;
	max-width: 100%;
	background: #3dc9b3;
	border-radius: 50%;
	-o-border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	display: block;
	color: #fff;
	font-size: 55px;
	text-align: center;
	vertical-align: middle;
	position: relative;
	margin: 0 auto 20px;
}
/* ------------------- WORKS ------------------- */

.grid {
	overflow: hidden;
	margin: 0;
	padding: 1em 0 0 0;
	width: 100%;
	list-style: none;
	text-align: center;
}
/* Common style */
.grid figure {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	margin: -0.135em;
	width: 33.333%;
	height: 340px;
	background: #EB7BAD;
	text-align: center;
	cursor: pointer;
}
.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	opacity: 0.8;
	left:0;
	margin-left:-35px;
	vertical-align:middle;
	text-align: center;
	
}
.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
 .grid figure figcaption::before, .grid figure figcaption::after {
 pointer-events: none;
}
.grid figure figcaption, .grid figure a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}
.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}
.grid figure h2 span {
	font-weight: 800;
}
.grid figure h2, .grid figure p {
	margin: 0;
}
.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
/* Individual effects */

/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
	background: #EB7BAD;
}
figure.effect-bubba img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}
figure.effect-bubba:hover img {
	opacity: 0.4;
}
 figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after {
 position: absolute;
 top: 30px;
 right: 30px;
 bottom: 30px;
 left: 30px;
 content: '';
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}
 figure.effect-bubba figcaption::before {
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 -webkit-transform: scale(0, 1);
 transform: scale(0, 1);
}
 figure.effect-bubba figcaption::after {
 border-right: 1px solid #fff;
 border-left: 1px solid #fff;
 -webkit-transform: scale(1, 0);
 transform: scale(1, 0);
}
figure.effect-bubba h2 {
	padding-top: 30%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0, -20px, 0);
	transform: translate3d(0, -20px, 0);
	color:#fff;
}
figure.effect-bubba p {
	padding: 20px 2.5em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0, 20px, 0);
	transform: translate3d(0, 20px, 0);
	color:#fff;
}
 figure.effect-bubba:hover figcaption::before, figure.effect-bubba:hover figcaption::after {
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
}
figure.effect-bubba:hover h2, figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
 @media screen and (max-width: 69.5em) {
 .grid figure {
 width: 50%;
}
 .grid figure figcaption {
 font-size: 90%;
}
}
 @media screen and (max-width: 41.5em) {
 .grid figure {
 width: 100%;
}
}

/* gradient bg */

.gradient-bg {
	background: linear-gradient(45deg, rgba(255, 175, 189, .7), rgba(100, 216, 243, .7), rgba(234, 236, 198, .7), rgba(245, 146, 176, .7), rgba(52, 219, 216, .7)) 0 0 / 1000% no-repeat;
	-webkit-animation: gradientAnimation 40s ease infinite;
	animation: gradientAnimation 40s ease infinite;

}

@-webkit-keyframes gradientAnimation {
	0% {
		background-position: 0% 30%, 0 0;
	}
	50% {
		background-position: 100% 70%, 0 0;
	}
	100% {
		background-position: 0% 30%, 0 0;
	}
}

@keyframes gradientAnimation {
	0% {
		background-position: 0% 30%, 0 0;
	}
	50% {
		background-position: 100% 70%, 0 0;
	}
	100% {
		background-position: 0% 30%, 0 0;
	}
}

/* about header */


.about-header {
    background: linear-gradient(230deg,#a24bcf,#4b79cf,#4bc5cf);
    background-size: 300% 300%;
    -webkit-animation: MoveBG 10s ease infinite;
    -moz-animation: MoveBG 10s ease infinite;
    -o-animation: MoveBG 10s ease infinite;
    animation: MoveBG 10s ease infinite;
}

@-webkit-keyframes MoveBG {
0% {
background-position:0% 84%
}
50% {
background-position:100% 16%
}
100% {
background-position:0% 84%
}
}
@-moz-keyframes MoveBG {
0% {
background-position:0% 84%
}
50% {
background-position:100% 16%
}
100% {
background-position:0% 84%
}
}
@-o-keyframes MoveBG {
0% {
background-position:0% 84%
}
50% {
background-position:100% 16%
}
100% {
background-position:0% 84%
}
}
@keyframes MoveBG {
0% {
background-position:0% 84%
}
50% {
background-position:100% 16%
}
100% {
background-position:0% 84%
}
}



/* ==========================================================================
Swag about
========================================================================== */
.swag {
	background: url('../images/bards.jpg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding: 100px 0 50px;
}
.swag-2 {
	background-attachment: fixed;
	padding: 50px 0;
}
.swag h1,
.swag-2 h1 {
	color: #fff;
	font-size: 23px;
	text-transform: uppercase;
	letter-spacing: 5px;
	line-height: 180%;
}
.swag h1 span,
.swag-2 h1 span {
	display: block;
	font-size: 25px;
	margin-top: 20px;
}
.down-arrow-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	background: #42AB9E;
	display: inline-block;
	margin: 10px auto 20px;
	color: #fff;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
}
.down-arrow-btn:hover, .down-arrow-btn:focus {
	color: #fff;
	background: #eee;
	opacity:0.6;
}

/* ==========================================================================
Swag work
========================================================================== */
.swag-work {
	background: url('http://www.stylebandaid.com/sample/folks/images/folks_bg.jpg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding: 50px 0;
}
.swag-work h1 {
	color: #fff;
	font-size: 40px;
	text-transform: uppercase;
	letter-spacing: 5px;
}
.swag-work h1 span {
	display: block;
	font-size: 25px;
	margin-top: 20px;
}
/* ==========================================================================
Subscribe
========================================================================== */
.subscribe {
	background: url('../images/keyboard-bg.jpg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding: 120px 0 140px;
}
.subscribe h1 {
	color: #fff;
	margin-bottom: 40px;
}
.subscribe h1 span {
	display: block;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 20px;
	letter-spacing: 1px;
}
.subscribe input[type=text] {
	background-color: rgba(255, 255, 255, 0.1);
	border: solid 1px #fff;
	padding: 20px;
	width: 30%;
	color: #fff;
}
.subscribe input[type=submit] {
	background: rgba(61, 201, 179, 0.5);
	border: solid 1px rgba(61, 201, 179, 0.5);
	padding: 20px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
.subscribe input[type=submit]:hover {
	background: rgba(61, 201, 179, 1);
	border: solid 1px rgba(61, 201, 179, 1);
	color: #fff;
}
/* ==========================================================================
Team
========================================================================== */
.team img {
	margin-bottom: 40px;
}
ul.social-buttons {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.social-buttons li {
	display: inline-block;
	margin-right: 10px;
}
ul.social-buttons li:last-child {
	margin-right: 0;
}
.social-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	background: #242830;
	display: inline-block;
	color: #fff;
	font-size: 17px;
	line-height: 40px;
	text-align: center;
}
.social-btn:hover, .social-btn:focus {
	background: #3dc9b3;
	color: #fff;
}
.social {
	margin-top: 25px
}


/* ==========================================================================
Contact
========================================================================== */
.up-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	background: #42AB9E;
	display: block;
	margin: 0 auto;
	color: #fff;
	font-size: 18px;
	line-height: 46px;
	text-align: center;
	position: absolute;
	top: -26px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.up-btn:hover, up-btn:focus {
	color: #fff;
	background: #eee;
	opacity:0.6;
}
.contact-details {
	margin: 20px 0;
}
.contact-details h2 {
	font-size: 20px;
}
.contact-details h2 span {
	display: block;
	color: #42AB9E;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	margin-top: 15px;
}
.contact-wrap {
	position: relative;
}


.contact-content {
	width: 800px; 
	margin: 0 auto;
	padding: 50px 0; 
	overflow: hidden; 
}

.contact-content p {
	line-height: 180%;
	color: #333;
}

form.form-horizontal {
	background: rgb(246, 247, 247);
    width: 800px;
    margin: 0 auto 80px;
    padding: 20px 0px 30px;
    border-radius: 20px;
}

.required {
    background: red;
    padding: 3px 6px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    vertical-align: middle;
}

.table-contact { 
	width: 700px !important;
	margin: 0 auto;
	 }
	 
	.send {
		 text-align: center;
		 width: 680px;
		 margin: 20px auto;
	 }
	.table-contact td { 
		 font-size: 15px;
		 vertical-align: middle !important;
		 text-align: right;
		 
	 }
	 .btn {
    padding: 15px !important;
    font-size: 19px !important;
}

.btn-success {
	width: 100%;
	padding: 20px !important;
	font-size: 18px !important;
}

.table-bordered {
	border: none;
}

.input-lg {
	font-size: 16px;
}

.table>tbody>tr>td {
	padding: 20px;
}

/* Client */

a.client img:hover { border:solid 1px #666; }
/* ==========================================================================
Footer
========================================================================== */
footer a {
	color: #a1a9b0;
}
footer {
	background-color: #333;
	padding: 20px 0px;
}
footer span {
	color: #fff;
	font-size: 12px; 
}
ul.legals {
	list-style: none;
	color: #fff;
	line-height: 25px;
}
ul.legals li {
	display: inline-block;
}
ul.legals li::after {
content: " |";
}
ul.legals li:last-child::after {
content: "";
}
.legals {
	text-align: left;
}
.credit {
	text-align: right;
}


/* パンクズ */
/* Breadcrumbs from http://bootsnipp.com/snippets/featured/triangle-breadcrumbs-arrows */
.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

.btn-breadcrumb .btn {
  padding:6px 12px 6px 24px;
}
.btn-breadcrumb .btn:first-child {
  padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
}

/** Default button **/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

/* The responsive part */

.btn-breadcrumb > * > div {
    /* With less: .text-overflow(); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.btn-breadcrumb > *:nth-child(n+2) {
  display:none;
}

/* ////////////////////////////////////////////////////////////////////// service /////////////////////////////////// */

.navbar { margin-bottom: 0px !important; }
#service ul li { 
	padding: 0 15px; 
	line-height: 180%;
	}
	
#service .col-md-4 li::before
{left: -6px !important;}

.cont-meta { background-color: }
.info { background-color: #fff !important; }
.li-option { 
	padding: 5px 10px; 
	background-color: rgba(0, 0, 0, 0.39);
	text-align: center; 
	font-size: 0.8em;
	color: #fff;
	margin: 5px 0;
}
.dropdown-menu > li > a:hover {
	rgba(0, 0, 0, 0.39);
}

/* new */
	h2.sub { 
		line-height: 180%;
		font-size: 120%;
		letter-spacing: 1px;
		}
.txt-left { 
	text-align: left;

}

.txt-left h3 {
	margin-bottom: 20px;
	font-weight: bold;
}

.txt-left p {
	margin-bottom: 40px;
}

/* ////////////////////////////////////////////////////////////////////// service-page /////////////////////////////////// */

#service-page h1 { 
font-size: 180%;
	margin-bottom: 10px; 
	line-height: 150%;
}

#service-page p { 
margin-bottom: 20px; 
line-height: 180%;
}
#service-page .btn {
    padding: 30px;
    font-size: 20px;
} 
#service-page .col-md-4 {
	text-align: center;
}

#service-page .col-md-12 {
	float: inherit;
	overflow: hidden; 
}

.bottom-txt {
	padding: 20px 100px 100px !important;
}

 .bottom-txt strong,
 .service-content strong {
	background: transparent linear-gradient(transparent 30%, rgba(255, 255, 0, 0.92) 30%) repeat scroll 0% 0%;line-height: 150%;
}

.weblist { 
	width: 500px;
	margin: 0 auto; 
	padding-bottom: 40px;
	overflow: hidden; 
}
ul.web-list li {
	font-size: 100%; 
	line-height: 200%; 
	border-bottom: dotted #ddd 1px; 
	padding-bottom: 10px;
	margin-bottom: 10px;
}
ul.web-list li:last-child {
	border-bottom: none;
}

ul.inlist { 
	text-align: left;
		padding: 0 10px; 
		 }
		 
.inlist li { 
	font-size: 120%;
	line-height: 200%;
		 }
		 
		 
.inlist li:last-child,
.service-list li:last-child {
	border-bottom: none;
}
ul.inlist li:before {
  font-family: FontAwesome;
  content: '\f046'; /* アイコンのunicode */
  padding-right: 5px; 
  color: #2bc900;
}

.service-list li {
	font-size: 95%; 
	line-height: 160%; 
	padding: 5px 15px;
	text-align: left;
}
.service-list li:before {
  font-family: FontAwesome;
  content: '\f046'; /* アイコンのunicode */
  padding-right: 5px; 
  color: #2bc900;
}

#service-page  .txt-left { 
	text-align: left;
	border: none; 
	padding: 0 10px;
}
.big { font-size: 200%;}

.top-two { 
	font-style: italic;
}

.top-two::after {
    content: " ";
    border: solid 2px #666;
    display: block;
    width: 35px;
    margin: 20px auto 30px;
}


/* company */

.company  {
	width: 800px !important;
	margin: 0 auto;
	position: relative;
}

.company table {
	width: 100%;
}

.company td {
	line-height: 180% !important;
	font-size: 15px;
}

.map h3 {
	margin-bottom: 20px;
}

.map p {
	padding: 10px;
}

	/* service content | サービスコンテンツ */
	.service-content {
		width: 65%;
		margin: 0 auto;
		overflow: hidden;
	}
	.service-content h2 {
		border-top: solid #333 2px;
		border-bottom: solid #333 2px;
		padding: 20px 0;
		text-align: center;
		margin-bottom: 20px;
		font-size: 180%;
		line-height: 150%;
	}
	
	.service-content p {
		font-size: 18px;
		line-height: 180%;
	}
	.service-content ul,
	tbody {
		width: 100%;
	}

	.service-content table {
		margin-bottom: 20px;
	}
	
	.service-content table td {
		border-top: none !important;
	}
	.service-content table tr td {
	vertical-align: middle;
	}

	.service-content tabele tr td.sub-logo {
		float: left;
		width: 30%;
	}
	.service-content tabele tr td.txt {
		float: left;
		width: 70%;
	}
	.service-content td h3 {
		font-size: 200%;
		line-height: 150%;
	}
	.service-content .space {
		width: 100%;
		display: block;
		height: 50px;
	}
	.shyu {
		color: #999;
		margin-top: -17px;
		font-size: 90%;
		text-align: right;
		font-style: italic;
	}

/* モデル価格 */

table.model {
	width: 80%;
	margin: 0 auto;
}


table.model td { 
font-size: 120%;
	padding: 15px 0 !important;
	color: #333;
	line-height: 180% !important;
	font-size: 14px;
	 }

/* ボタン */
.btn-mini {
	padding: 10px 40px !important;
	letter-spacing: 2px;
}
.col-md-3 h2 {
	padding: 20px 0 10px;
	text-align: center; 
}

.scrollup {
	width: 40px;
	height: 40px;
	text-indent: -9999px;
	opacity: 0.8;
	position: fixed;
	bottom: 50px;
	right: 6%;
	display: none;
	background: url(../images/bottom_arrow.png) no-repeat;
}

.model tr {
    border-bottom: solid 1px #eee;
}


/* === For phones =================================== */
@media (max-width: 767px) {
    .btn-breadcrumb > *:nth-last-child(-n+2) {
        display:block;
    } 
    .btn-breadcrumb > * div {
        max-width: 60px;
    }
}

/* === For tablets ================================== */
@media (min-width: 768px) and (max-width:991px) {
    .btn-breadcrumb > *:nth-last-child(-n+4) {
        display:block;
    } 
    .btn-breadcrumb > * div {
        max-width: 100px;
    }
}

/* === For desktops ================================== */
@media (min-width: 992px) {
    .btn-breadcrumb > *:nth-last-child(-n+6) {
        display:block;
    } 
    .btn-breadcrumb > * div {
        max-width: 170px;
    }
}


@media (max-width: 767px) {



.header,
.navbar {
	display: none;
}

#service-page h1 {
	font-size: 120%;
}

.col-md-4,
.col-md-6 {
	padding: 0;
}
.inlist li {
    font-size: 100%;
    line-height: 180%;
}

#service-page p,
.service-content p {
	font-size: 14px;
}

.service-content {
 width: 90%;
 }

.service-content img {
	width: 100%;
}
 
.service-content h2 {
	font-size: 110%;
}

.service-content td h3 {
	font-size: 110%;
}

.shyu {
	font-size: 10px !important;
	text-align: center;
	padding-top: 5px;
}

table.model {
	width: 100%;
	margin-bottom: 20px;
}

table.model tr {
	border-bottom: solid #eee 1px;
}
table.model td {
font-size: 12px;
padding: 10px !important;
}

.space,
.iframe,
.sub-logo {
	display: none !important;
}

.point {
	margin-bottom: 20px;
}

.bottom-txt {
	padding: 10px 20px 40px !important;
}
.btn-danger {
	width: 100%;
	font-size: 13px !important;
}

.section-padding {
	padding-bottom: 0;
}
.light-box {
	margin-bottom: 20px;
}

.left,
.right {
	float: none;
	display: block;
	text-align: center;
}

/* page */

.swag h1 {
	font-size: 18px;
    padding: 0 20px;
}

h2.sub {
	font-size: 100%;
	text-align: justify;
text-justify: distribute-all-lines;
}

#features {
    padding-bottom : 40px;
    }

#features h2::after, #contact h2::after {
	margin: 30px auto;
}

.icon {
	margin-bottom: 50px;
}

/* service */

#service-page {
	padding: 20px 20px;
}

#service-page .btn-warning {
	width: 95%;
}

.col-md-3 {
	padding: 0;
}

.weblist {
	width: 100%;
}

.col-md-2 {
    width: 50%;
    float: left;
}

h1.big {
	font-size: 130%;
	margin-bottom: 10px;
}

/* company */
.company {
	 width: 100% !important;
}

.company td {
	width: 48%;
	font-size: 13px;
}

/* contact */


.contact-content {
	width: 100%;
	padding: 20px;
}
.contact-content p,
.map p {
	font-size: 13px;
}

form.form-horizontal {
	width: 100%;
	padding: 0 0 20px;
	background: #fff;
}


.table-contact {
    width: 100%;
	padding: 0 10px 20px;
}
.table-contact td {
	font-size: 11px;
	text-align: left;
}
.required {
	display: inherit;
}

.input-lg {
    font-size: 14px;
}

.send {
    text-align: center;
    width: 100%;
    margin:0;
    padding: 0 20px;
}

form.form-horizontal {
    margin-bottom: 40px;
    }
    
/* header */
.sp-header {
    display: inherit;
    padding:10px 10px 0;
    overflow: hidden;
    width: 100%;
    overflow: hidden;
    border-bottom: solid 1px #eee;
}

.sp-logo {
    float: left;
    width: 80%;
    font-family: 'Muli', sans-serif;
font-size: 1.5em;
}
.sp-menu {
    float: right;
}


#trigger-overlay {

    background-color: white;
    padding: 0 !important;
    border: none;

}
#trigger-overlay img {
    width: 90%;
}


/* table */

.table>tbody>tr>td {
	padding: 10px;
}

/* Overlay style */
.overlay {
    display: inherit;
	position:absolute;
	width: 100%;
	top: 0;
	left: 0;
	background: #FFF;
	z-index: 99;
	min-height: 100vh;
	}
	
/* Overlay closing cross */
.overlay .overlay-close {
	width: 45px;
	height: 45px;
	position: absolute;
	right: 10px;
	top: 10px;
	overflow: hidden;
	border: none;
	background: url(../images/close-45.png) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	font-size: 14px;
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 20px 10px;
	display: block;
	height: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	height: 20%;
	text-align: left;
	line-height: 150%;
	padding: 15px 10px;
	float: left;
	width: 50%;
    font-size: 13px;
}

.overlay ul li.sub {
width: 100%;
	border-top: solid 1px #eee;
	border-bottom: solid 1px #eee;
	text-align: center;
	font-size: 15px;
	background-color: rgba(172,172,172,0.1);
}

.menu-space {
 border-bottom: none !important;
}

.overlay ul li a {
	font-weight: 300;
	display: block;
	color: #292929;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.overlay ul li a:after {
  content: "\f105";
  font-family: FontAwesome;
  float: right;
  padding-right: 10px;
}

.overlay ul li.no a:after {
  display: none;
}


.overlay ul li.sub {
	font-weight: 500;
	color: #666;
	margin: 10px 0;
	}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #0070c9;
}

/* Effects */
.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.overlay-hugeinc nav {
	-webkit-perspective: 1200px;
	perspective: 1200px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;
	-webkit-transform: translateY(-25%) rotateX(35deg);
	transform: translateY(-25%) rotateX(35deg);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
	-webkit-transform: translateY(25%) rotateX(-35deg);
	transform: translateY(25%) rotateX(-35deg);
}

}

@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
}

}