/* ==========================================================================
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 */ }
html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea { font-family: 'Varela Round', sans-serif; }
/* * Addresses margins handled incorrectly in IE 6/7. */
body { margin: 0; font-family: 'Varela Round', sans-serif; }
/* ==========================================================================
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; }
/* ==========================================================================
Typography
========================================================================== */
/* * Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */

h2 {
	font-size: 20px;
	color: #353535;
	text-transform: uppercase;
	font-weight: bold;
}
h2::after {
	content: " ";
	border: solid 2px #171d61;
	display: block;
	width: 35px;
	margin: 25px auto;
}
img{
	width: 100%;
	height: 100%;
}
.flexed{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.w-32{
	width: 32%;
	margin-bottom: 2em;
}
.w-32 img{
  height: 200px;
	object-fit: cover;
}

/* ==========================================================================
Tables
========================================================================== */
/* * Remove most spacing between table cells. */
table {
	border-collapse: collapse;
}
.company_tbl th{
	border: 1px solid rgb(211,211,211);
	text-align: center;
	padding: 5px;
}
.company_tbl small{
	color: inherit;
}

/* ==========================================================================
Global Styles
========================================================================== */
a { color: #353535; -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 {
	color: #333;
	word-spacing: 1px;
	letter-spacing: 0px;
	line-height: 28px;
}
.section-padding { padding: 60px 0 40px }
.dark-bg {
	background: #f1f1f1;
}
.light-bg { background-color: #fff; }
.dark-box { background: #f3f5f8; -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: 10px 0;
	}
.light-box:hover, .light-box:focus { -webkit-box-shadow: 0px 3px 0px 0px #3dc9b3; -moz-box-shadow: 0px 3px 0px 0px #3dc9b3; box-shadow: 0px 3px 0px 0px #3dc9b3; }
.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); }
.wrapper { height: 600px; }
.nopadding { padding: 0; }
.inner { padding-top: 150px; }
/* ==========================================================================
Navigation
========================================================================== */
nav {
	background-color: #171d61;
	margin-top: -1px;
}
nav ul {
	list-style: none; padding: 0;
}
nav ul li {
	color: rgba(255, 255, 255, 0.6);
	display: block;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	padding-left: 0;
	position: relative;
}
nav ul li:last-child {
	border: none;
}
nav ul li a {
	color: rgba(255, 255, 255, 0.6);
	display: block;
	padding: 20px;
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	padding-left: 0;
	position: relative;
}
nav ul li a:hover, nav ul li a:focus {
	text-decoration: none;
	color: rgba(255, 255, 255, 1);
}
#nav-toggle {
	position: absolute;
	right: 15px;
	top: 0;
}
#nav-toggle {
	cursor: pointer;
	padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
	cursor: pointer;
	border-radius: 1px;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	-o-border-radius: 1px;
	height: 5px;
	width: 35px;
	background: #dcdcdc;
	position: absolute;
	display: block;
	content: '';
}
#nav-toggle span:before {
	top: -10px;
}
#nav-toggle span:after {
	bottom: -10px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
	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;
}
#nav-toggle.active span {
	background-color: transparent;
}
#nav-toggle.active span:before,
#nav-toggle.active span:after {
	top: 0;
}
#nav-toggle.active span:before {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}
#nav-toggle.active span:after {
	transform: translateY(-10px) rotate(-45deg);
	-webkit-transform: translateY(-10px) rotate(-45deg);
	-ms-transform: translateY(-10px) rotate(-45deg);
	top: 10px;
}
.navicon {
	position: relative;
	height: 26px;
}
.indicator {
	position: absolute;
	right: 0 !important;
}
.pull {
	display: none;
}

/* ==========================================================================
top
========================================================================== */
.hero {
	/* background: url('../images/top.jpg') no-repeat center center; */
	/* 第一案 */
	background-image: linear-gradient(to top, rgba(0, 36, 82, 0.4), rgba(0, 36, 82, 0.4)), url("../images/top.jpg");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding: 65px 0 300px 0;
	height: auto;
}
.hero h1 {
	font-size: 35px;
	letter-spacing: 2px;
	margin: 10px;
	color:#fff;
	/* color: black; */
	text-shadow: 1px 1px 0 #071138, -1px -1px 0 #071138, -1px 1px 0 #071138, 1px -1px 0 #071138, 0px 1px 0 #071138, 0-1px 0 #071138, -1px 0 0 #071138, 1px 0 0 #071138;
}
.hero h1 span {
	color: #a1a9b0;
	display: inline-block;
}
.hero p {
	letter-spacing: 1px;
	color:#fff;
	margin: 1em 0;
	font-size: 27px;
	text-shadow: 1px 1px 0 #071138, -1px -1px 0 #071138, -1px 1px 0 #071138, 1px -1px 0 #071138, 0px 1px 0 #071138, 0-1px 0 #071138, -1px 0 0 #071138, 1px 0 0 #071138;
}
.learn-more-btn {
	background: rgba(61, 201, 179, 1);
	padding: 20px 40px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: inline-block;
	-webkit-box-shadow: 0px 3px 0px 0px #309383;
	-moz-box-shadow: 0px 3px 0px 0px #309383;
	box-shadow: 0px 3px 0px 0px #309383;
	margin: 60px 0 0;
	font-weight: bold;
}
.learn-more-btn:hover, .learn-more-btn:focus {
	background: rgba(61, 201, 179, 0.6);
	color: #fff;
}

/* ==========================================================================
Intro
========================================================================== */
.intro {
	background: rgb(222 245 251);
}
.intro p {
	margin: 20px 0 0;
	font-size: 18px;
	}
.intro img {
	width: 100px;
	height: 100px;
}
h1.arrow {
	font-size: 24px;
	text-transform: uppercase;
	color: #353535;
	letter-spacing: 0.2em;
	background: url('../img/h1-bg.png') no-repeat center bottom;
	padding-bottom: 30px;
	font-weight: bold;
	text-align: center;
	margin-top: 60px;
	}
/* ==========================================================================
Features
========================================================================== */
.features-wrapper, .team-wrapper {
	margin: 50px 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 50px;
	}
/* ==========================================================================
iPhone Section
========================================================================== */
.iphone {
	width: 50%;
	background: #ffffff;
	float: left;
	height: 100%;
	box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
	z-index: 1;
	}
.fluid-white { width: 50%; background: #fff; float: right; height: 100%; z-index: 2; }
.responsive-services { position: relative; }
/* ==========================================================================
Swag
========================================================================== */
.swag { background: url('../images/top.jpg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding: 30px 0;
	}
.swag h1 { color: #fff; font-size: 40px; text-transform: uppercase; letter-spacing: 5px; }
.swag 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: rgba(0, 117, 194, 0.8);
	display: inline-block;
	margin: 10px auto 20px;
	color: #fff;
	font-size: 16px;
	line-height: 40px; t
	ext-align: center;
	}
.down-arrow-btn:hover, .down-arrow-btn:focus { color: #fff; background: rgba(61, 201, 179, 1); }
/* ==========================================================================
Portfolio
========================================================================== */
.effects { padding-left: 15px; }
.effects .img { position: relative; margin-bottom: 10px; position: relative; z-index: 1; overflow: hidden; }
.effects .img:nth-child(n) { margin-right: 5px; }
.effects .img:first-child { margin-left: -15px; }
.effects .img:last-child { margin-right: 0; }
.effects .img img { display: block; margin: 0; padding: 0; height: auto; }
.overlay { display: block; position: absolute; z-index: 20; background: rgba(100, 194, 158, 0.8); overflow: hidden; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; }
a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; }
a.close-overlay.hidden { display: none; }
a.expand { display: block; position: absolute; z-index: 100; text-align: center; color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; line-height: 30px; }
.overlay-effect .img i { font-size: 30px; }
.overlay-effect .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; }
.overlay-effect .overlay a.expand { left: 0; right: 0; bottom: 47%; margin: 0 auto -30px auto; }
.overlay-effect .img.hover .overlay { height: 100%; opacity: 1; }
.img img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
.img:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -ms-transform: translate3d(-40px, 0, 0); }
.designs { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 20px; }
/* ==========================================================================
Subscribe
========================================================================== */
.subscribe {
	background: url('../images/top.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;
	margin-top: 50px;
}
/* ==========================================================================
CTA
========================================================================== */
.ignite-cta { background-color: #242830; padding: 70px 0; }
.ignite-btn { display: inline-block; padding: 25px 40px; color: #fff; border: solid 1px #fff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }
.ignite-btn:hover, .ignite-btn:focus { color: #3dc9b3; border: solid 1px #3dc9b3; }
/* ==========================================================================
Team
========================================================================== */
.team img { margin-bottom: 10px; }
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: rgba(0, 117, 194, 0.5);
	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: rgba(61, 201, 179, 1); }
.contact-details { margin: 70px 0; }
.contact-details h2 { font-size: 20px; }
.contact-details h2 span {
	display: block;
	color: #0075c2;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 16px;
	margin-top: 15px;
	}
.contact-wrap { position: relative; }
/* ==========================================================================
Footer
========================================================================== */
footer {
	background-color: #171d61;
	padding: 40px 0 30px;
}
footer a {
	color: #fff;
}
footer p {
	color: #fff;
}
footer img {
	width: 60px;
	height: 60px;
}
ul.legals {
	list-style: none;
	color: #fff;
	line-height: 30px;
	margin-top: 13px;
	margin-bottom: 10px;
}
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;
	color: #fff;
	font-weight: bold;
    font-size: 18px;
    line-height: 36px;
    margin-top: 10px;
}
/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */
#servicesSlider { margin-top: 5px; }
ul.slides li {
	 margin-bottom: 4px;
	 list-style-type: none;
 }
/* ==========================================================================
Waypoints
========================================================================== */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.wp3 {
	background-position: 200px 10px; height: 100%;
	}

.jigyo{
	text-align: left;
	font-size: 16px;
	line-height: 25px;
	margin: 1em 0 0 1em;
}

.setsubi{
	text-align: left;
	margin-left: 7px;
}

.gaiyo{
	text-align: left;
	font-size: 15px;
	line-height: 25px;
	margin: 0 30px 0 90px ;
}

table.company_tbl tbody tr td{
	border:1px solid rgb(211,211,211);
	color: #333;
	padding: 7px;
	vertical-align: top;
}

.honsha{
	font-size: 16px;
	color: #333;
	letter-spacing: 2px;
	margin-bottom: 10em;
	font-weight: bold;
}

.top_text{
	font-weight: 600;
	color: #000000;
}

.enkaku td{
	border: 1px;
	padding: 5px;
	letter-spacing: 0px;
	vertical-align: top;
}
.none{
	font-size: 17px;
	text-align: left;
	margin-left: 0;
}

.president{
	margin: 5em 0 2em 1em;
}

.president1{
	text-align: right;
	margin-right: 3em;
}

.h2_center{
	line-height: 22px;
	font-size: 18px;
	text-align: center;
}

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

.textbold{
	font-size: 17px;
	font-weight: bold;
	color: #696969;
	margin-left: 2em;
	margin-right: 2em;
}
/* ==========================================================================
 logo
========================================================================== */
.center img{
	width: 90px;
	height: 90px;
	margin-bottom: 2em;
}
.fa-map-marker,
.fa-phone,
.fa-paper-plane{
	font-size: 32px;
}

/* ==========================================================================
 mailform
========================================================================== */
small{
	font-size: 12px;
	color: #da1e1e;
}
.mailform {
	padding: 0 15px;
}
.mailform table{
	width: 100%;
	border-collapse: collapse;
}
.mailform table tr th{
	width: 30%;
}
input[type=text],
input[type=email],
textarea{
	width: 100%;
	padding: 10px;
	margin: 5px 0;
	font-size: 16px;
	border-collapse: collapse;
}
.send{
	margin: 60px 0 1em;
	padding: 10px 20px;
	border: solid 1px #333;
	height: 150px;
	overflow-y: scroll;
	text-align: left;
}
button{
	padding: 10px 60px;
	background: #171d61;
	color: #fff;
	border: none;
	border-radius: 40px;
	transition: .2s;
}
button:hover{
	background: #0075c2;
	border-radius: 40px;
	transition: .2s;
}

@media screen and (max-width: 1040px)  {
	.mb-1{
		margin-bottom: 1em;
	}
	.swag{
		background-attachment: scroll;
	}
	.subscribe{
		background-attachment: scroll;
	}
}

/* Mobile */

@media screen and (max-width: 736px)  {
	 .company_left{
		float: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		}

	 .company_right{
		float: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		vertical-align: top;
		}

	img{
		width: 85%;
	}
	.credit img{
		width:12%;
	}
	.company_tbl img{
		width: 20%;
	}
}

@media screen and (max-width: 480px){
	.hero{
		padding: 65px 0 125px 0;
	}
	.hero h1 {
    font-size: 28px;
	}
	.hero p {
    font-size: 18px;
	}
	.inner {
    padding-top: 60px;
	}
	.w-32 {
    width: 100%;
	}
	.mailform table tr th{
		display: inline-block;
		width: 100%;
	}
	.mailform table tr td{
		display: inline-block;
		width: 100%;
	}

}