@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 {
	    text-align: justify;
	    line-height: 180%;
	    margin-bottom: 20px;
	    color: #777;
    }
h2 {
	font-size: 15px;
	color: #353535;
	font-weight: bold;
}
.space { 
width: 100%; 
display: block; 
height: 40px; 
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: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 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;
}

/* content */

 h1 {
	    font-size: 3rem;
    color: #333;
    font-family: "Yu Mincho Medium", "游明朝 Medium", 游明朝, YuMincho, "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: normal;
    letter-spacing: 0.2rem;
    padding: 30px 0 20px;
    text-align: center;

    }
    
    h3 {
       font-size: 1.2rem;
       margin-bottom: 20px;
       font-weight: bold;
       color: #555;
    }
    
    
    .page-title {
    font-size: 3rem;
    color: #fff;
    font-family: "Yu Mincho Medium", "游明朝 Medium", 游明朝, YuMincho, "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: normal;
    letter-spacing: 0.2rem;
    }
    
    .page-title span {
	    display: block;
	    font-size: 1.8rem;
	    letter-spacing: 0.1rem;
    }
    
    .sub-title {
	font-size: 1.6rem;
    font-weight: bold;
    margin: 0 auto 30px;
    text-align: center;
    color: #444 ;
    letter-spacing: .04rem;
    }
  
.content-wapper {
		background: #F4F7F8;
		width: 100%;
		overflow: hidden;
}
	.content-box {
		margin: 0 auto 40px;
		width: auto;
		max-width: 1000px;
		position: relative;
		padding: 40px 0 20px;
	}
	
	.content-service {
		width: 100%;
		padding: 3%;
		}
		
		.content-service h3 {
    font-size: 1.1rem;
    }
	
	.flex-two {
		display: flex;
		justify-content: space-between;
	}
	
	.flex-two p a {
		color: #42AB9E;
	}
	
	.flex-two li {
		width: 45%;
		margin-bottom: 40px;
	}
	
	
	
	.flex-two h3 {
		text-align: center;
	}
	
	.flex-some {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	
	.flex-some li {
		width: 30%;
		font-weight: bold;
	}
	
	.flex-some span {
	margin: 0 .3vw 0 0;
    color: #42AB9E;
    font-size: 1.6vw;
    }
    
    .flex-center {
		display: flex;
		justify-content: space-between;
    }
    
    dt {
	    color: #ff9c06;
	    margin-right: 10px;
    }
    
    /* link */
    
    a:hover {
	    opacity: .6;
    }
    
    .link-under {
	display: inline-block;
	position: relative;
	color: #555;
 	text-decoration: none;
}
.link-under:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: #555;
	transform: scale(0, 1);
	transition: 0.4s;
}
.link-under:hover:before {
	transform: scale(1);
}


/* comment */
.chatting {
    width: 100%;
    text-align: left;
}
.says {
    display: inline-block;
    position: relative; 
    margin: 10px 0 20px 0px;
    padding: 40px;
    max-width: 100%;
    border-radius: 12px;
    background: #fff;
}

.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 3px; 
    left: -19px;
    border: 8px solid transparent;
    border-right: 18px solid #FFF;
    -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}
.says p {
    margin: 0;
    padding: 0;
    color: #777;
    line-height: 180%;
}

/* btn link */


.btn-hover {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border: 1px solid #42AB9E;
	padding: 20px 15px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	border-radius: 2px;
	background: #fff;
}
.btn-hover .txt {
	transition: color .1s ease-in-out;
	transition-delay: .1s;
	position: relative;
	z-index: 1;
	font-size: 1rem;
 letter-spacing: .1rem;
	text-align: center;
	margin: 0 auto;
	line-height: 150%;
	color: #42AB9E;
    border: none;
}

.btn-hover .wipe, .btn-hover::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.btn-hover::after, .btn-hover .wipe::before, .btn-hover .wipe::after {
	transition: -webkit-transform 0.5s cubic-bezier(0.27, 0.16, 0.01, 0.99);
	transition: transform 0.5s cubic-bezier(0.27, 0.16, 0.01, 0.99);
	transition: transform 0.5s cubic-bezier(0.27, 0.16, 0.01, 0.99), -webkit-transform 0.5s cubic-bezier(0.27, 0.16, 0.01, 0.99);
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}

.btn-hover:hover {
	text-decoration: none;
	}

.btn-hover:hover .txt {
	color: #fff;
	text-decoration: none;
	border: none;
}

.btn-hover::after {
	content: "";
	position: absolute;
	background: #42AB9E;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.btn--hori::after {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right;
	transform-origin: right;
}
.btn--hori:hover::after {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: left;
	transform-origin: left;
	transition-delay: 0s;
}

/* clients */

.clients {
	padding: 40px 20px;
	overflow: hidden;
	background: #fff;
}


/* ed contact */


.col-md-8 p {
	padding: 0;
	line-height: 180%;
	color: #333;
}

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;
}

.service-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(230deg, #d9a7eb, #a7c7f0, #a7edea);
    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;
    padding: 58px 0 54px;
    border-top: 1px solid rgba(255,255,255,0.28);
    border-bottom: 1px solid rgba(255,255,255,0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.16);
}

.service-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.22) 0,
            rgba(255,255,255,0.22) 1px,
            transparent 1px,
            transparent 58px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.22) 0,
            rgba(255,255,255,0.22) 1px,
            transparent 1px,
            transparent 58px
        );
    background-size: 58px 58px, 58px 58px;
    opacity: 0.42;
    pointer-events: none;
}

.service-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 28%, rgba(0,0,0,0.08) 100%),
        radial-gradient(circle at 20% 18%, rgba(255,255,255,0.22), transparent 28%),
        radial-gradient(circle at 80% 22%, rgba(255,255,255,0.18), transparent 26%);
    pointer-events: none;
}

.service-header > .container,
.service-header .row,
.service-header [class*="col-"] {
    position: relative;
    z-index: 1;
}


@-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%
}
}


.service-header h1,
.service-header h1 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 5px;
	line-height: 1;
	text-shadow: 0 1px 0 rgba(255,255,255,0.14), 0 12px 28px rgba(31, 53, 71, 0.14);
}
.service-header span,
.service-header h1 span {
	display: block;
	font-size: 18px;
	margin-top: 12px;
	letter-spacing: 0.08em;
	text-transform: none;
	opacity: 0.96;
}

.service-header .down-arrow-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: 18px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.36);
	background: rgba(255,255,255,0.12);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.service-header .down-arrow-btn i {
	color: #fff;
	font-size: 1rem;
}

.service-header .down-arrow-btn:hover {
	transform: translateY(3px);
	background: rgba(255,255,255,0.18);
	border-color: rgba(255,255,255,0.55);
}


/* ==========================================================================
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: 20px 0;
}
.swag h1,
.swag-2 h1 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 5px;
	line-height: 100%;
}
.swag h1 span,
.swag-2 h1 span {
	display: block;
	font-size: 18px;
	margin-top: 10px;
}
.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: #2f3434;
	-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 {
	margin-bottom: 80px;
	overflow: hidden;
}

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

.table-contact { 
	width: 800px !important;
	margin: 0 auto;
	 }
	 
	.send {
		 text-align: center;
		 width: 800px;
		 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: #666;
	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 /////////////////////////////////// */



.service-wapper {
	    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

.service-wapper li {
	padding: 30px 20px 20px;
	border-radius: 20px;
	background: rgb(246, 247, 247);
}

.service-wapper li h3 {
	text-align: center;
}

#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%;
		}
.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; 
}

#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; 
		margin-top: 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;
}

.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 {
	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;
}

.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;
}

/* service */

.service-wapper {
    grid-template-columns: 1fr;
    }

.service-wapper img {
	width: 100%;
	height: auto;
}

/* page */

.swag h1 {
	font-size: 2rem;
    padding: 0;
    letter-spacing: 0;
}

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;
}

.table-contact {
    width: 100%;
	padding: 0 20px 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: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 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);
}

/* content */

.page-title {
font-size: 2.5rem;
}

.page-title span {
    font-size: 1.2rem;
    }

h1 {
    font-size: 2rem;
    }

.content-box {
    max-width: 90%;
    margin: 0 5%;
    }

.flex-two {
	display: inherit;
}  

.flex-two li {
	width: 100%;
	margin-bottom: 50px;
} 

h3 {
    font-size: 1rem;
    text-align: center;
    line-height: 150%;
    color: #555;
}

.sub-title {
    font-size: 1.1rem;
    line-height: 150%;
    }

element.style {
}
.flex-some {
display: inherit;
    margin-bottom: 0px;
    }

.flex-some li {
	width: 100%;
	line-height: 200%;
	padding: 0 25px;
}

.flex-some span {
	font-size: medium;
}

.flex-center {
display: inherit;
}

.flex-center li {
	width: 49%;
	text-align: center;
	display: inline-block;
}

.navbar {
	display: none;
	 }


}

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

}

/* ----------------------------------------------------------
   Web Factory initiatives
   ---------------------------------------------------------- */
.initiatives-section {
    padding: 34px 24px;
    background: #f4f7f8;
}

.initiatives-section .initiatives {
    box-sizing: border-box;
    margin: 0 auto;
   }

.initiatives__header {
    max-width: 880px;
    margin: 0 auto 42px;
    text-align: center;
}

.initiatives-section .initiatives__title {
    position: relative;
    margin: 0 auto 22px;
    padding-bottom: 20px;
    font-size: clamp(1.65rem, 2.4vw, 2.15rem);
    line-height: 1.4;
    letter-spacing: .05em;
    color: #333;
}

.initiatives-section .initiatives__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 2px;
    background: #42ab9e;
    transform: translateX(-50%);
}

.initiatives__lead {
    margin: 0;
    color: #61696b;
    font-size: .98rem;
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: .035em;
}

.initiatives__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.initiatives__item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-height: 158px;
    padding: 22px 20px;
    color: #3f4748;
    background: #fff;
    border: 1px solid rgba(30, 55, 58, .08);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(27, 52, 55, .07);
    transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.initiatives__item:last-child:nth-child(3n + 1) {
    grid-column: 2;
}

.initiatives__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0;
    flex: none;
    color: #42ab9e;
    font-size: 1.45rem;
    line-height: 1;
    background: rgba(66, 171, 158, .1);
    border-radius: 50%;
}

.initiatives__content {
    min-width: 0;
}

.initiatives__content h4 {
    margin: 3px 0 10px;
    color: #172539;
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.42;
}

.initiatives__content p {
    margin: 0;
    color: #697174;
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.75;
    padding: 0;
}

@media (hover: hover) {
    .initiatives__item:hover {
        background: #fff;
        border-color: rgba(66, 171, 158, .42);
        box-shadow: 0 16px 34px rgba(27, 52, 55, .11);
        transform: translateY(-2px);
    }
}

@media (max-width: 1020px) {
    .initiatives-section .initiatives {
        padding-right: 42px;
        padding-left: 42px;
    }

    .initiatives__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .initiatives__item:last-child:nth-child(3n + 1) {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .initiatives-section {
        padding: 24px 16px;
    }

    .initiatives-section .initiatives {
        padding: 42px 18px 26px;
        border-radius: 16px;
    }

    .initiatives__header {
        margin-bottom: 30px;
        text-align: center;
    }

    .initiatives-section .initiatives__title {
        margin-left: auto;
        padding-bottom: 15px;
        text-align: center;
        font-size: 1.55rem;
    }

    .initiatives-section .initiatives__title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .initiatives__lead {
        font-size: .93rem;
        line-height: 1.9;
    }

    .initiatives__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .initiatives__item,
    .initiatives__item:last-child:nth-child(3n + 1) {
        grid-column: auto;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 14px;
        min-height: 0;
        padding: 18px 16px;
        border-radius: 12px;
    }

    .initiatives__icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .initiatives__content h4 {
        margin-top: 1px;
        margin-bottom: 7px;
        font-size: .94rem;
    }

    .initiatives__content p {
        font-size: .78rem;
        line-height: 1.7;
    }
}

@media screen and (max-width: 767px) {
	.service-header {
		padding: 44px 0 40px;
	}

	.service-header::before {
		background-size: 42px 42px, 42px 42px;
		opacity: 0.34;
	}

	.service-header h1,
	.service-header h1 {
		letter-spacing: 0.18em;
	}

	.service-header span,
	.service-header h1 span {
		font-size: 15px;
		line-height: 1.6;
	}
}

/* Person icon + speech bubble rows */
.chatting--person {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	margin: 24px 0 34px;
}

.chatting--person .faceicon {
	flex: 0 0 112px;
	width: 112px;
	aspect-ratio: 1;
	padding: 5px;
	overflow: hidden;
	background: #f5f8f8;
	border: 4px solid #42ab9e;
	border-radius: 50%;
	box-shadow: 0 8px 22px rgba(39, 86, 80, .12);
}

.chatting--person .faceicon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
}

.chatting--person .says {
	box-sizing: border-box;
	flex: 0 1 auto;
	width: fit-content;
	max-width: calc(100% - 140px);
	min-height: 112px;
	margin: 0;
	padding: 28px 34px;
	border-radius: 22px;
	box-shadow: 0 10px 28px rgba(45, 67, 70, .06);
}

.chatting--person .says::after {
	top: 20px;
	left: -22px;
	border-width: 11px 22px 11px 0;
	border-color: transparent #fff transparent transparent;
	transform: none;
}

.chatting--person .says h3 {
	margin: 0 0 10px;
	color: #555;
	font-size: 1.2rem;
	text-align: left;
}

.chatting--person .says p {
	font-size: 1rem;
}

@media screen and (max-width: 767px) {
	.chatting--person {
		gap: 14px;
		margin: 18px 0 26px;
	}

	.chatting--person .faceicon {
		flex-basis: 72px;
		width: 72px;
		padding: 3px;
		border-width: 3px;
	}

	.chatting--person .says {
		max-width: calc(100% - 86px);
		min-height: 72px;
		padding: 18px 18px;
		border-radius: 16px;
	}

	.chatting--person .says::after {
		top: 16px;
		left: -15px;
		border-width: 8px 16px 8px 0;
	}

	.chatting--person .says h3 {
		font-size: 1rem;
	}

	.chatting--person .says p {
		font-size: .9rem;
		line-height: 1.75;
	}
}

@media screen and (max-width: 420px) {
	.chatting--person {
		gap: 10px;
	}

	.chatting--person .faceicon {
		flex-basis: 58px;
		width: 58px;
	}

	.chatting--person .says {
		max-width: calc(100% - 68px);
		padding: 15px 14px;
	}
}

/* Contact cards and site footer: match the home page while keeping this page's background */
.footer-contact {
	position: relative;
	padding: clamp(56px, 3vw, 96px) clamp(24px, 3.5vw, 72px);
	background: #f4f7f6;
}

.footer-contact__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 2vw, 42px);
	width: 100%;
	max-width: 1900px;
	margin: 0 auto;
}

.footer-contact__card,
.footer-contact__card.light-box {
	display: grid;
	grid-template-columns: clamp(92px, 8vw, 150px) 1px minmax(0, 1fr);
	align-items: center;
	min-height: clamp(210px, 13vw, 280px);
	margin: 0;
	padding: clamp(34px, 3.5vw, 64px);
	border: 1px solid rgba(31, 48, 64, .04);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 14px 38px rgba(31, 48, 64, .11);
	text-align: left;
}

.footer-contact__card:hover,
.footer-contact__card:focus-within {
	box-shadow: 0 20px 46px rgba(31, 48, 64, .16);
}

.footer-contact__icon {
	display: grid;
	width: clamp(74px, 6vw, 116px);
	aspect-ratio: 1;
	place-items: center;
	border-radius: 50%;
	background: #edf8f7;
	color: #159d91;
	font-size: clamp(30px, 2.8vw, 52px);
}

.footer-contact__divider {
	align-self: stretch;
	width: 1px;
	min-height: 110px;
	background: #dfe8e9;
}

.footer-contact__content {
	min-width: 0;
	padding-left: clamp(34px, 3.2vw, 62px);
}

.footer-contact__content h2 {
	margin: 0;
	color: #159d91;
	font-family: "Rajdhani", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
}

#contact .footer-contact__content h2::after {
	display: none;
	content: none;
}

.footer-contact__accent {
	display: block;
	width: 54px;
	height: 2px;
	margin: 20px 0;
	background: #159d91;
}

.footer-contact__content address,
.footer-contact__content p,
.footer-contact__mail {
	margin: 0;
	color: #29343e;
	font-size: clamp(15px, 1vw, 16px);
	font-style: normal;
	line-height: 1.65;
}

.footer-contact__mail {
	display: inline-block;
	font-weight: 700;
	overflow-wrap: anywhere;
	transition: color 180ms ease;
}

.footer-contact__mail:hover,
.footer-contact__mail:focus-visible {
	color: #159d91;
	text-decoration: none;
}

.site-footer {
	display: grid;
	padding: 36px 24px;
	place-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	background: #1d2a3a;
}

.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.site-footer__copyright {
	margin: 0;
	padding-right: 40px;
	color: #d7dde4;
	font-size: 13px;
	letter-spacing: .01em;
}

.site-footer__privacy {
	display: inline-flex;
	align-items: center;
	gap: 32px;
	min-height: 36px;
	padding-left: 40px;
	border-left: 1px solid rgba(255, 255, 255, .14);
	color: #f1f4f7;
	font-size: 13px;
	transition: color 180ms ease;
}

.site-footer__privacy i {
	color: #27b4aa;
	transition: transform 180ms ease;
}

.site-footer__privacy:hover,
.site-footer__privacy:focus-visible {
	color: #fff;
	text-decoration: none;
}

.site-footer__privacy:hover i,
.site-footer__privacy:focus-visible i {
	transform: translateX(5px);
}

@media (max-width: 900px) {
	.footer-contact__inner {
		grid-template-columns: 1fr;
		max-width: 760px;
	}

	.footer-contact__card,
	.footer-contact__card.light-box {
		min-height: 210px;
	}
}

@media (max-width: 560px) {
	.footer-contact {
		padding: 42px 18px;
	}

	.footer-contact__card,
	.footer-contact__card.light-box {
		grid-template-columns: 68px 1px minmax(0, 1fr);
		min-height: 0;
		padding: 28px 22px;
		border-radius: 14px;
	}

	.footer-contact__icon {
		width: 54px;
		font-size: 23px;
	}

	.footer-contact__divider {
		min-height: 96px;
	}

	.footer-contact__content {
		padding-left: 22px;
	}

	.footer-contact__accent {
		width: 38px;
		height: 3px;
		margin: 16px 0;
	}

	.footer-contact__content address,
	.footer-contact__content p,
	.footer-contact__mail {
		font-size: 13px;
	}

	.site-footer {
		min-height: 176px;
		padding: 38px 20px;
	}

	.site-footer__inner {
		flex-direction: column;
		gap: 18px;
	}

	.site-footer__copyright {
		padding-right: 0;
		font-size: 12px;
		text-align: center;
	}

	.site-footer__privacy {
		gap: 18px;
		padding: 16px 0 0;
		border-top: 1px solid rgba(255, 255, 255, .14);
		border-left: 0;
	}
}