@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: #f4f7f6;
}

/* font style */
.mini {
	font-size: 10px;
}

/* space */

.side-space {
	padding: 0 40px;
}



/* header menu */

header {
	position: absolute;
	width: 100%;
	z-index: 9;
	background: rgba(0,0,0,0.1);
}

header a {
	color: #fff !important;
}

.dropdown-menu {
	background: rgba(0,0,0,0.1) ;
}

.sp-header,
.overlay {
	display: none;
}
.navbar-default {
	background: transparent;
	border: none;
}

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

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

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

.nav > li > a { 
font-size: 18px;
	padding:  20px !important;
}

a.navbar-brand:hover {
color: #5cbdaa !important;
}

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

.navbar-default .navbar-nav>li>a:hover {
    color: #5cbdaa;
    }

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    background-color: #5cbdaa;
    color: #FFF;
}

.dropdown-menu > li > a:hover {
	color: #5cbdaa;
}
/* 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;
}

/* top contents */


.bg-white {
	background: #fff;
	padding: 80px 0;
}

.top-list {
	display: flex;
    flex-wrap: wrap;
    width: 1200px;
    margin: 50px auto 0;
	
}

.top-list li {
	width: 50%;
	padding: 0 15px 30px 15px;
}

.top-list li h3 {
	margin-bottom: 20px;
	font-weight: 600;
		font-size: 1.1rem;
}

.top-list li p {
	line-height: 180%;
	font-size: .9rem;
}

.col-md-top {
    width: 70%;
    margin: 30px auto;
    overflow: hidden;
}


.top-txt {
	width: 850px;
	height: 660px;
	padding: 30px 40px ;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 10px 6px -6px #ccc;
	border-top: solid 1px #ddd;
	border-left: solid 1px #ddd;
	border-right: solid 1px #ddd;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
}

.top-txt p {
	line-height: 180%;
    margin-bottom: 30px;
    font-size: 15px;
    color: #666;
}
.top-txt h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: .05rem;
    }
    

/* top scroll */
#scroll-down {
  display: block;
  position: relative;
  padding-top: 79px;
  text-align: center;
}

.arrow-down {
  display: block;
  margin: 0 auto;
  width: 9px;
  height: 40px;
}

.arrow-down:after {
  content: "";
  display: block;
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  behavior: url(-ms-transform.htc);
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

#scroll-title {
  display: block;
  text-transform: uppercase;
  color: #FFF;
  font-family: Helvetica Neue, Helvetica, Arial;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow:0px 0px 10px #000000;
}

#scroll-down::before {
  -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  /* Safari 4+ */
  -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  /* Fx 5+ */
  -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  /* Opera 12+ */
  animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
  /* IE 10+, Fx 29+ */
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 88px;
  background: #FFF;
  content: " ";
}

@-webkit-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}

@-moz-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}

@-o-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}

@keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}

// codepen profile logo
#paschka {
  display: block;
  color: white;
  font-family: helvetica neue, helvetica, arial;
  font-size: 32px;
  text-decoration: none;
  position: fixed;
  bottom: 0px;
  right: 0px;
  padding: 0px;
  transition: all 0.1s ease;
  background: #000;
  height: 40px;
  line-height: 30px;
  vertical-align: middle;
  width: 40px;
  text-align: center;
  border-radius: 5%;
  bottom: 20px;
  right: 20px;
  &:hover {
    background: #232323;
    transition: all 0.1s ease;
    color: #f0f0f0;
  }
}


/* step by step */

.steps {
	padding: 30px 0;
}

.c-stepper {
  display: flex;
  counter-reset: step-counter;
}

.c-stepper__item {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  counter-increment: step-counter;
}

.c-stepper__item:before {
  --size: 3rem;
  content: counter(step-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
    height: 50px;
  border-radius: 50%;
  background-color: lightgrey;
  background-color: #333;
  opacity: 0.5;
  margin: 0 auto 1rem;
  font-size: 1.5rem; /* 数字のサイズ調整 */
  color: white; /* 数字の色 */
}

.c-stepper__item:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(clamp(1.5rem, 5vw, 3rem) / 2);
  width: calc(100% - clamp(1.5rem, 5vw, 3rem) - calc(clamp(0.25rem, 2vw, 0.5rem) * 2));
  left: calc(50% + calc(clamp(1.5rem, 5vw, 3rem) / 2 + clamp(0.25rem, 2vw, 0.5rem)));
  height: 2px;
  background-color: #e0e0e0;
  order: -1;
}

.c-stepper__title {
  font-weight: bold;
  font-size: clamp(1rem, 4vw, 1.25rem);
  margin-bottom: 0.5rem;
  color: #555;
}

.c-stepper__desc {
  color: grey;
  font-size: 14px;
  padding: 10px 20px 0;
  text-align: center;
}

/* slider */

.slider {
margin: 0 auto;
max-width:100%;
overflow: hidden;
}


/* carousel */
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

.carousel-control.left, .carousel-control.right {
	top:0;
}



/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/* hello */

.hello {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  margin: 0 auto 30px;
  color: #444;
  font-style: italic;
}

.hello:before, 
.hello:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px #444;
}

.hello:before {
  left:0;
}
.hello:after {
  right: 0;
}


/* 取り組み */

.content-box {
width: 980px;
	margin: 0 auto;
	padding: 40px 0;
	overflow: hidden;
}

.sub-title {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0 auto 30px;
    text-align: center;
    color: #444;
    letter-spacing: .04rem;
}

.content-box p {
    text-align: justify;
    line-height: 180%;
    margin-bottom: 20px;
    color: #777;
}

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

/* talk */

.balloon5 {
    width: 650px;
    margin: 25px  auto;
}

.balloon5 .faceicon {
    float: left;
    margin-right: -90px;
    width: 75px;
}

.balloon5 .faceicon img,
.balloon5 .faceicon-right img{
    width: 100%;
    height: auto;
    border: solid 2px #42AB9E;
    border-radius: 50%;
    padding: 2px;
}

.faceicon span,
.faceicon-right span {
	text-align: center;
	font-size: 11px;
	padding-top: 5px;
	display: block;
	color: #666;
}


.balloon5 .chatting {
    width: 100%;
}

.says {
    display: inline-block;
    position: relative; 
    margin: 5px 0 0 105px;
    padding: 20px;
    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;
}


/* ///////// column ///////////// */

.column {
	background: white;
    width: 100%;
    overflow: hidden;
    padding: 50px 0;
}

.column-single {
    margin: 0 auto;
    width: 700px;
}

.column-single p {
    line-height: 180%;
    font-size: 15px;
    letter-spacing: .05em;
    font-weight: normal;
    color: #777;
    }

.column-single dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 20px;
    border-bottom: 1px #ddd dotted;
    padding: 0 0 20px;
}

.column-single dt {
	font-weight: normal;
    color: #888;
}

.column-single dd {
    margin-left: 20px;
    font-weight: bold;
}

/* /////////////////////////////////////// works /////////////////////////////////////// */


li.col-md-3 {
	padding: 5px !important;
}

li.col-md-3 h3 {
    padding: 15px 10px 10px;
    text-align: center;
    line-height: 130%;
}


/* /////////////////////////////////////// service /////////////////////////////////////// */
.w { color: #fff !important; }
.w, .w a {
    color: #fff;
}
.center { text-align: center;}
.txtleft { text-align: left; }
.bold { font-weight: bold; }

.title { 
	font-size: 1.5rem;
	 margin-bottom: 20px; 
	 display: block;
	 text-align: center;
	 font-weight:400;
	 letter-spacing: 2px;
	 
	  }
.sub {
	font-size: 120%;
	}
	



.border {
	width: 120px;
	border-bottom: solid #ddd 2px;
	margin: 0 auto;
}


.layer { 
		background-color: rgba(0,0,0,0.2); 
		}
.shadow-txt {
	text-shadow: 0 2px 0px #333;
}
.cover-bg {
	background-color: rgba(0,0,0,0.2);
z-index: 99;
overflow: hidden; 
}

.container {
 width: 100% !important; 
 }
 
#service .row {
overflow: hidden !important;
}



#service h1 { 
	font-size: 160%;
	 margin-bottom: 30px;
	 }
#service h2 { 
	font-size: 110%;
	margin-bottom: 10px;
}
#service p {
	color:#555; 
	line-height: 180%;
font-size: 14px;
}
.pic { 
	float: left; 
	margin: 0 20px 0px 0;
	height: 350px;
}
.pic img {
		width: 200px;
}


/* contact */
.contactop { padding: 80px 0 !important;}
.contactop p { color: #fff;
	padding: 40px 0 0; 
}	


/* ==========================================================================
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 #666; 
}


/* ==========================================================================
Tables
========================================================================== */
/* * Remove most spacing between table cells. */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ==========================================================================
Global Styles
========================================================================== */
a {
	color: #666;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
a:hover, a:focus {
	color: #3dc9b3;
	text-decoration: none;
}
p {
	line-height:150%;
	font-size: 16px;
}
h2 {
	font-size: 15px;
	color: #333;
}
.space { width: 100%; display: block; height: 20px; overflow: hidden; }

.center { text-align: center; }
.bold { font-weight: 
	bold;
}
.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: 35px;
margin: 20px auto;
}

.dark-bg {
	background: #FFF;
}
.light-bg {
	background-color: #fff;
}
.dark-box {
	background: #f4f7f6;
	-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 {
	overflow: hidden;
	background-color: #f4f7f6;
	-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;
}

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

/* text */

.sub-txt {
}

/* btn */

.half {
	width: 48%;
}

.max {
	width: 100%;
}

.half:after,
.max:after {
  content: "\f054";
  font-family: FontAwesome;
  margin-left: 10px;
}


.btn-more {
    background: #fff;
    border: solid 1px #333;
    color: #333;
}

.btn-success {
     border: none;
    background-color: #42AB9E;
    }

.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: #42AB9E;
	width: 600px;
	margin: 0 auto;
}
.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: #FFF;
    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: #42AB9E;
	text-decoration: none;
	border: none;
}

.btn-hover::after {
	content: "";
	position: absolute;
	background: #FFF;
	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;
}

/* btn2 背景色あり ver */

.btn2 {
  flex: 0 1 auto;
  position: relative;
  height: 50px;
  margin: 16px;
  padding: 20px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 0;
  color: #fff;
  font-size: 16px;
  line-height: 46px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  z-index: 1;
}
.btn2:hover {
  text-decoration: none;
}
.btn2:focus {
  outline: none;
}
.btn--slide-right::before {
  position: absolute;
  content: "";
  top: 0px;
  right: auto;
  bottom: auto;
  left: 0px;
  width: 0px;
  height: 100%;
  background: #fff;
  font-weight: bold;
  transition-duration: 0.3s;
  z-index: -1;
}
.btn--slide-right:hover::before {
  width: 100%;
  height: 100%;
}
.btn--slide-right:hover {
  background: #fff;
  color: #999;
  transition: color 0.3s ease, background 0s ease 0.3s;
}
a.btn2::after {
	content: "\f105";
	 font-family: FontAwesome;
	margin-left: 20px;
}



/* strips bag */

.bg-striped {
    background: repeating-linear-gradient(135deg,transparent,transparent 5px,hsla(0,0%,70%,.03) 0,hsla(0,0%,70%,.03) 10px) hsla(0,0%,70%,.03);
}

.mini-space {
	overflow: hidden;
	width: 100%;
	height: 20px;
}

/* hr name */

hr.hr-text {
	margin-bottom: 10px;
}
.hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  height: 1.5em;
  opacity: .5;
  font-size: 13px;
}
.hr-text:before {
  content: '';
  background: linear-gradient(to right, transparent, #333, transparent);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}
.hr-text:after {
  content: attr(data-content);
  position: relative;
  display: inline-block;
  color: black;
  padding: 0 .5em 0 0;
  line-height: 1.5em;
  background-color: #f4f7f6;
  }



/* ==========================================================================
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%;
}
}
/* ==========================================================================
Swag about
========================================================================== */

#particles {
  width: 100%;
  height: 120vh;
  overflow: hidden;
  background-color: #fff;
  position: relative;
}


/* top */




#top {
	width: 100%;
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.slide-txt {
	position: absolute;
	top:15%;
	z-index: 1;
	width: 80%;
	margin: 15% 10%;
}

.slide-txt h1 {
	color: #fff;
font-size: 28px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 180%;
margin-bottom: 20px;
text-shadow:0px 0px 14px #000000;
}


.main {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	top:30px;
	z-index: 7;
}

.main h1 {
	color: #333;
font-size: 28px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 180%;
margin-bottom: 40px;
}

.top-bg {
	background: url('../images/pc.jpg') no-repeat center center;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	}	
	
.top-bg p a {
	color: #3dc9b3;
}

.top-bg p a:hover {
	opacity: .7;
}

.service-bg {
	background: url('../images/top_bg.jpg') no-repeat center center;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
.contact-bg {
 background: linear-gradient(15deg, #40E0D0 50%, #5cbdaa 50.1%);
  }

.swag h1 {
	color: #fff;
	font-size: 28px;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 100px 0 0;
	line-height: 180%;
}
.swag1 h1 {
	color: #fff;
	font-size: 38px;
	text-transform: uppercase;
	letter-spacing: 5px;
	padding: 20px 0 0;
}
.swag h1 span,
.swag1 h1 span {
	display: block;
	font-size: 25px;
	margin-top: 20px;
}
.down-arrow-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	background: #42AB9E;
	display: inline-block;
	margin: 10px auto 20px;
	color: #fff;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	margin: 0 auto;
}
.down-arrow-btn:hover, .down-arrow-btn:focus {
	color: #fff;
	background: #EB7BAD;
	opacity:0.6;
}

/* ==========================================================================
Swag work
========================================================================== */

.swag-work h1 {
	color: #fff;
	font-size: 40px;
	text-transform: uppercase;
	letter-spacing: 5px;
	padding: 50px 0;
}
.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: #EB7BAD;
	opacity:0.6;
}
.contact-details {
	margin: 70px 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;
}

/* Client */

a.client img:hover { border:solid 1px #666; }



/* flow */

#flow {
	background-color: #fff;
	overflow: hidden;
	padding-top: 40px;
}


/* btn */

.btn-lg {
	padding: 20px !important;
}

/* map */

.map {
	padding: 0;
	margin: 0;
}


/* ==========================================================================
Footer
========================================================================== */

footer a:hover, a:focus {
	color: #ddd;
}
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: center;
}


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

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

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

/* The responsive part */

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

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

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



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

#service ul li { 
	padding: 0 15px; 
	line-height: 180%;
	}
	
#service ul { }


#service .col-md-4 li::before {
left: -6px !important;
}


.btn { 
padding: 10px; 
font-size: 14px; 
}



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

/* header.fixed */

.header { 
width: 100%;
 height: 60px;
 }
.header .fixbar {
  position: absolute;
  width: 94%;
    margin: 0 3%;
}
.header.fixed .fixbar {
  position: fixed;
  margin: 0 auto !important;
  z-index: 999;
  background: rgba(0,0,0,0.3);
  z-index: 9999999999999999999999999999999999999999999;
  border-bottom: 1px solid #ddd;
      padding: 0 3%;
    width: 100%;
}
  

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

	/* リスト */
	.inlist li {
		font-size: 130% !important;
		
	}


/* new */
	h2.sub { 
		line-height: 180%;
		font-size: 200% !important;
		}
.txt-left { 
	text-align: left;
	padding: 20px;
	border: solid 1px #ddd; 
}

/* works */

.example-sites {
	overflow: hidden;
}
/* === 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;
    }
}

.pc-none {
display: none;
}


@media (max-width: 767px) {

.pc-none {
display: inherit;
}

.sp-none {
display: none;
}

.header,
.navbar {
	display: none;
}

/* sp btn */

.btn-hover {
	width: 100%;
}

/* sp talk */

.balloon5 {
    width: 100%;
    }

/* top sp */

#top {
	height: auto;
}

.slide-txt {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 5% 2%;
	background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    -webkit-animation: gradientAnimation 40s ease infinite;
    animation: gradientAnimation 40s ease infinite;
}

.slide-txt h1 {
	font-size: 20px;
	text-shadow: none;
	color: #FFF;
}

.arrow-down {
	width: 8px;
}

#scroll-down::before {
	background-color: #fff;
}

.arrow-down:after {
	    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

#scroll-title {
	color: #FFF;
	text-shadow: none;
}

/* message */

.top-txt {
	height: auto;
	border: 0;
	border-top: solid 1px #ddd;
	padding: 30px;
	background: rgba(255,255,255,0.54);
}

.hello {
	margin: 20px auto 20px !important;
}

.space {
	display: none; 
}

.sp-space {
height: 40px;
overflow: hidden;
}

#particles {
	height: 100zh;
	margin: 0 auto;
}
.main {
    height: 100vh;
	padding: 20px ;
}
.main h1 {
    font-size: 18px ;
    padding: 30px 0 0;
    line-height: 150%;
    letter-spacing: 2px;
}


.top-txt {
    width: 100%;
    margin: 0 auto;
    padding: 15px 30px;
    }
    .top-txt p {
	    font-size: 14px;
    }

.side-space {
	padding: 0 20px;
}

.side-space h2 {
	text-align: center;
}

li.col-md-3 {
width: 50%;
float: left;
  height: 180px;
}
li.col-md-3 h3 {
	font-size: 11px;
}
.thumbnail {
	margin-bottom: 0px;
}
.border {
	margin: 0 auto 20px;
}

.service-bg {
 margin: 15px 0 20px;
 }

.title {
    font-size: 120%;
    }

.title.w {
padding-top: 20px;
	font-size: 100%;
	letter-spacing: normal;
}

#service p.w {
	text-align: left; 
}

.btn {
	width: 100%;
margin-bottom: 10px;
}

/* 取り組み */

    .content-box {
    width: 100%;
    margin: 0 auto;
    padding: 30px 15px;
}

.flex-some {
	display: inherit;
}
.flex-some li {
    width: 100%;
    line-height: 180%;
    text-align: center;
}

.flex-some span {
    font-size: 3vw;
    }


/* sp top */

.bg-white {
padding: 40px 0;
}


.top-list {
    margin: 30px auto 0;
	width: 95%;
}

.top-list li {
	width: 100%;
	padding: 0 15px 30px 15px;
}

.top-list li h3 {
	font-size: 1rem;
}



/* /////// column //////// */


.col-md-top {
	width: 90%;
}

.column {
	margin-bottom: 50px;
}


.column-single {
	width: 95%;
	margin: 0 5%;
}

.column-single dl {
	display: inherit;
}

.column-single dt {
font-size: 13px;
    margin-bottom: 10px;
    }

.column-single dd {
margin-left: 0;
}

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

	#service .col-md-12 {
    margin: 10px;
}


#service .col-md-6 {
  width: 70%;
    margin: 30px auto 0;
    overflow: hidden;
    padding-bottom: 30px;
}

.col-md-7 h2 {
	padding: 15px;
	background-color: #999;
	color: #fff;
	border-radius: 5px;
	margin-bottom: 20px !important;
}

#service p {
	margin-bottom: 20px;
}

.hr-text {
	opacity: 1;
}
.hr-text:after {
	background: transparent;
}

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

#contact {
    padding-top: 40px;
}

.contact-details {
    margin: 30px 0 0;
}

.contactop {
	padding: 20px !important;
	margin-bottom: 20px;
}


.contactop p {
	padding: 0;
}

.sub.w {
	font-size: 100%;
}


p {
	font-size: 14px;
}

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

.credit a {
	display: block;
}

hr {
    display: none;
}

/* header */
.sp-header {
    display: inherit;
    padding:10px 10px 0;
    width: 100%;
    overflow: hidden;
    border-bottom: solid 1px #eee;
    background-color: white;
}

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


#trigger-overlay {

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

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

/* 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);
}

/* step by step sp */
	
	
.c-stepper {
  display: inherit;
  }


.c-stepper__item {
 display: inherit;
	margin-bottom: 30px;
	}

}

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

}