/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
 
/* ==========================================================================
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 */ }
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: 'Noto Sans JP', sans-serif; }
/* * Addresses margins handled incorrectly in IE 6/7. */
body { margin: 0; font-family: 'Noto Sans JP', 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. */
h1 { font-size: 2em; margin: 0.67em 0; color: #363636; line-height: 1.4 }
h2 { font-size: 1.5em; margin: 0.83em 0; line-height: 1.4 }
h3 { font-size: 1.17em; margin: 1em 0; line-height: 1.4 }
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.75em; margin: 2.33em 0; }
/* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }
/* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */
b, strong { font-weight: bold; color: #219eed; }
blockquote { margin: 1em 40px; }
/* * Addresses styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; }
/* * Addresses styling not present in IE 6/7/8/9. */
mark { background: #ff0; color: #000; }
/* * Addresses margins set differently in IE 6/7. */
p, pre { margin: 1em 0; }
/* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */
code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* * Improves readability of pre-formatted text in all browsers. */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
/* * Addresses CSS quotes not supported in IE 6/7. */
q { quotes: none; }
/* * Addresses `quotes` property not supported in Safari 4. */
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
/* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* ==========================================================================
Lists
========================================================================== */
/* * Addresses margins set differently in IE 6/7. */
dl, menu, ol, ul { margin: 1em 0; }
dd { margin: 0 0 0 40px; }
/* * Addresses paddings set differently in IE 6/7. */
menu, ol, ul { padding: 0 0 0 40px; }
/* * Corrects list images handled incorrectly in IE 7. */
nav ul, nav ol { list-style: none; list-style-image: none; }
/* ==========================================================================
Embedded content
========================================================================== */
/* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7. */
img { border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */ }
/* * Corrects overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
figure { margin: 0; }
/* ==========================================================================
Forms
========================================================================== */
/* * Corrects margin displayed oddly in IE 6/7. */
form { margin: 0; }
/* * Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
/* * 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7. */
legend { border: 0; /* 1 */
	padding: 0; white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */ }
/* * 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, *    and Chrome.
* 3. Improves appearance and consistency in all browsers. */
button, input, select, textarea { font-size: 100%; /* 1 */
	margin: 0; /* 2 */
	vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */ }
/* * Addresses Firefox 3+ setting `line-height` on `input` using ` !important` in
* the UA stylesheet. */
button, input { line-height: normal; }
/* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
*    Known issue:inner spacing remains in IE 6. */
button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
*overflow: visible; /* 4 */ }
/* * Re-set default cursor for disabled elements. */
button[disabled], input[disabled] { cursor: default; }
/* * 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
*    Known issue:excess padding remains in IE 6. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
	*height: 13px; /* 3 */
*width: 13px; /* 3 */ }
/* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box; }
/* * Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/* * Removes inner padding and border in Firefox 3+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/* * 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers. */
textarea { overflow: auto; /* 1 */
vertical-align: top; /* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/* * Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }
/* ==========================================================================
Global Styles
========================================================================== */
a { color: #363636; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
a:hover, a:focus { color: #219eed; text-decoration: none; }
p { color: #FFF; word-spacing: 1px; line-height: 25px; font-size: 14px; font-weight: bold; }
h2 { font-size: 16px; color: #FFF; font-weight: bold; }
h2::after { content: " "; border-bottom: 2px solid #00d8ff; display: block; width: 246px; margin: 25px auto; }
.section-padding { padding: 90px 0; }
.dark-bg { background-color: rgba(0, 0, 0, 1); }
.dark-bg p { margin: 2rem 0 0; }
.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: 20px 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: 450px; }
.nopadding { padding: 0; }
.inner { padding-top: 170px; }
h1.main-title {
    font-size: 22px;
    font-weight: 900;
    color: #FFF;
    letter-spacing: 1px;
    font-weight: bold;
    line-height: 1.4;
}
.sub-title {
    color: #FFF;
    background: #00d8ff;
    padding: 2px 32px 4px;
    font-size: 12px;
    border-radius: 30px;
    font-weight: bold;
    letter-spacing: 2px;
}
.kye-color-underbar {
	border-bottom: 2px solid #00d8ff;
    width: 246px;
    display: block;
    margin: 0 auto;
    padding: 8px 0 0 0;
}
#features .sub-title {
    background: none;
    font-size: 14px;
}
.white-color-underbar {
	border-bottom: 1px solid #FFF;
    width: 246px;
    display: block;
    margin: 0 auto;
    padding: 8px 0 0 0;
}
.long-sentence {
	text-align: left;
	text-align: justify;
    margin-top: 2rem;
}
.ignite-cta {
	background-color: #242830;
	padding: 70px 0;
}
.ignite-btn {
    display: inline-block;
    padding: 18px 55px;
    color: #fff;
    border: solid 1px #fff;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px;
    width: 320px;
}
.ignite-btn:hover, .ignite-btn:focus {
	opacity: 0.7;
    color: #FFF;
}
.text-link {
	color: #219eed;
}
.text-link:hover {
	text-decoration: underline;
}
.sp-on { display: none; }

/* ==========================================================================
Navigation
========================================================================== */
#home {	background-color: rgba(0, 0, 0, 1) }
nav { background-color: #242830; 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: #FFF; 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;
	display: none; /* SP表示切り替え */
}
.indicator {
	position: absolute;
	right: 0 !important;
}
.pull {
	display: none;
}
.pc-nav {
	position: absolute;
	z-index: 3;
    width: 100%;
    margin-top: 2rem;
    height: 65px;
}
.menu-box {
	display: flex;
}
.menu-box .link-btn {
	margin: 0 0 0 auto;
}
.logo {
	width: 250px;
}
.logo img {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.logo img:hover {
	opacity: 0.5;
}
/* ==========================================================================
Hero
========================================================================== */
.hero .container {
	width: 100%;
}
.catchcopy {
	position: absolute;
	padding-top: 360px;
	z-index: 2;
}
.catchbtn {
	position: absolute;
	padding-top: 560px;
	animation-name:fadeInAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0;
	z-index: 1;
}
@keyframes fadeInAnime{
  from { opacity: 0; }
  to { opacity: 2; }
}
.home-mv-video {
    width: 100%;
    filter: brightness(0.3);
}
.hero h1 {
    font-size: 40px;
    letter-spacing: 6px;
    margin: 10px;
    color: #FFF;
    font-weight: 900;
    line-height: 1.4;
}
.hero p {
	letter-spacing: 1px;
	color: #FFF;
}
.learn-more-btn {
    background: #00d8ff;
    padding: 8px 32px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 4px;
    -o-border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    -webkit-box-shadow: 0px 3px 0px 0px #00326d;
    -moz-box-shadow: 0px 3px 0px 0px #00326d;
    box-shadow: 0px 3px 0px 0px #00326d;
    margin: 0;
    font-weight: bold;
}
.learn-more-btn:hover, .learn-more-btn:focus {
	opacity: 0.7;
	color: #fff;
}
/* ==========================================================================
intro
========================================================================== */
h1.top-title {
    font-size: 22px;
    text-transform: uppercase;
    color: #00d8ff;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 16px;
}
.bg-carbonneutral {
	background-color: rgba(0, 0, 0, 1)
}
.atomic-img {
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
    border-radius: 12px;
}
/* ==========================================================================
Features
========================================================================== */
#features {
    background: #000;
}
.features-wrapper, .team-wrapper {
	margin: 20px 0 0;
}
.icon {
	margin: 0 auto;
}
.icon img {
	width: 88%;
}
/* ==========================================================================
system-image
========================================================================== */
.system-image {
	width: 50%;
	background-color: #242830;
	float: left; height: 100%;
}
.fluid-white {
	width: 50%;
    background-color: #242830;
	float: right;
	height: 100%;
	z-index: 2;
}
.responsive-services {
	position: relative;
}
.designs .link-btn {
	margin-top: 50px;
}
/* ==========================================================================
Swag
========================================================================== */
.swag {
	background: url('../img/top/right-bg.webp') 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 h1 {
	color: #fff;
    font-size: 22px;
    font-weight: 900;
	margin-top: 50px;
}
.swag p {
	color: #FFF;
    margin-top: 2rem;
	margin-bottom: 32px;
}
.swag .link-btn {
	margin-bottom: 50px;
}
/* ==========================================================================
flow
========================================================================== */
.flow-details {
	margin: 50px 0;
}
.flow-details .light-box {
	padding: 0;
}
.flow-details img {
    width: 100%;
}
.flow-details p {
    margin-top: 1rem;
    font-size: 13px;
}
.flow-wrap {
	position: relative;
}
/* ==========================================================================
news
========================================================================== */
.designs { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 0; }
#news {
    background: url('../img/top/line-bg-03.webp') no-repeat center center;
    background-size: cover;
}
.news h2 {
	color: #FFF;
    margin-top: 2rem;
}
.news span {
    display: block;
    color: #FFF;
    text-align: center;
    padding: 8px;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 14px;
    background: #242830;
    border-radius: 4px 4px 0 0;
    margin-bottom: 2rem;
}
.news .img {
    height: 270px;
}
.news .img img {
    width: 240px;
}
#portfolioSlider {
    margin-top: 4rem;
}
/* ==========================================================================
Subscribe
========================================================================== */
.subscribe {
	background: url('../img/top/soler-bg.webp') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	padding: 90px 0 140px;
}
.subscribe h1 {
	color: #FFF;
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
}
.subscribe p {
	color: #FFF;
    margin-top: 2rem;
}
.subscribe .ignite-btn {
	margin-top: 20px;
    border: solid 1px #00d8ff;
    background-color: #00d8ff;
}
.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;
}
/* ==========================================================================
sub-page
========================================================================== */
.page-main .container {
	width: 100%;
	padding: 0;
}
.page-catchcopy {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 120px 0;
    padding-left: 10%;
}
.page-catchcopy h1 {
	font-weight: 900;
	color: #FFF;
	font-size: 32px;
	line-height: 1.4;
}
.page-catchcopy p {
	color: #FFF;
}
.sub-menu {
    display: table-cell;
    vertical-align: middle;
    padding: 120px 0;
}
.sub-menu ul {
    background: rgba(0, 0, 0, 0.7);
    list-style: circle;
    color: #FFF;
    padding: 32px 50px;
    letter-spacing: 2px;
    line-height: 2.5;
    width: 340px;
    margin: 0 0 0 auto;
}
.sub-menu ul li a {
	color: #FFF;
}
.sub-menu ul li a:hover {
	color: #219eed;
}

/* ==========================================================================
Footer
========================================================================== */
footer a {
	color: #a1a9b0;
	font-weight: bold;
}
footer {
	position: absolute;
	background-color: #242830;
	padding: 50px 0 8px;
    width: 100%;
}
footer p {
	color: #fff;
}
.team img {
	margin-bottom: 40px;
}
.signature {
	margin-top: 50px;
}
.ecomott-signature {
	list-style: none;
	color: #FFF;
	font-size: 12px;
}
.ecomott-signature li {
	margin-bottom: 8px;
    text-align: center;
}
.ecomott-signature img {
    width: 300px;
    margin-bottom: 8px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.ecomott-signature img:hover {
	opacity: 0.5;
}
.social {
	margin-top: 25px
}
.up-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	background: #00d8ff;
	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;
    opacity: 0.5;
}
.up-btn:hover, up-btn:focus {
	color: #fff;
    opacity: 1;
}
.copyright {
    text-align: center;
    margin: 8px 0 0;
    letter-spacing: 1px;
}
.copyright p {
	font-size: 10px;
    font-weight: 400;
    color: #a1a9b0;
	}
/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */
#servicesSlider {
    margin-top: 70px;
}
ul.slides li {
    margin-bottom: 20px;
}
ul.slides li:not(:first-child){
    display: none;
}
#portfolioSlider-sp,
#flexSlider-sp {
    display: 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: url('../img/top/system-image.jpg') no-repeat center center; 
    background-position: center;
    background-size: cover;
    height: 100%;
}