@charset "UTF-8";

/*------------------------------------------------
	WEBフォント
--------------------------------------------------*/

@font-face {
	font-family: 'MyWebFont';
	src: url('../font/websymbolsligaregular.eot'); /* IE9 Compat Modes */
	src: url('../font/websymbolsligaregular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../font/websymbolsligaregular.woff') format('woff'), /* Modern Browsers */
		 url('../font/websymbolsligaregular.ttf')  format('truetype'), /* Safari, Android, iOS */
		 url('../font/websymbolsligaregular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/*------------------------------------------------
	レイアウト
--------------------------------------------------*/

body {
	font-family: "Noto Sans Japanese","BlinkMacSystemFont","Helvetica Neue","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Arial","メイリオ","Meiryo",sans-serif;
	/*font-family: 'News Cycle', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;*/
	font-size: 14px;
	line-height: 1.4;
	color: #1a1a1a;
}

.block-inner {
	width: 100%;
	margin: 0% auto;
	padding: 20px 50px 60px;
}

.block-inner.main {
	padding: 70px 0px 110px 0px;
  text-align: center;
}

.main-inner {
	width: 600px;
	margin: 0px auto;
}

.content-inner {
  width: 100%;
  margin: 0% auto;
  padding: 4vh 12vw;
}

@media screen and (max-width: 668px) {
	.main-inner {
	 width: 100%;
	}
}

.about {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
	animation: fadeIn 1s ease 0s 1 normal;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

.about-left {
    margin-right: 4%;
}

.about-left, .about-right {
    width: 48%;
}

.page_top section {
	position: relative;
	z-index: 2;
}

.ul .li {
	list-style: none;
	margin: 0;
	padding: 0;
}


/*------------------------------------------------
	ヘッダー
--------------------------------------------------*/

header {

}

.header-inner {
  width: 100%;
	margin: 0% auto;
	padding: 20px 26px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
	z-index: 97;
	animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

.header-inner a {
	text-decoration: none;
}

.header-logo {
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 16px;
}

.nav a {
	font-size: 13px;
}

.nav li {
	padding-top: 14px;
}

/*menu*/
.menu{
    height: 20px;
    position: fixed;
    right: 26px;
    top: 28px;
    width: 30px;
    z-index: 99;
}
.menu__line{
    background: #1a1a1a;
    display: block;
    height: 1px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.menu__line--center{
    top: 9px;
}
.menu__line--bottom{
    bottom: 0;
}
.menu__line--top.active{
    top: 8px;
    transform: rotate(45deg);
}
.menu__line--center.active{
    transform:scaleX(0);
}
.menu__line--bottom.active{
    bottom: 10px;
    transform: rotate(135deg);
}

/*gnav*/
.gnav{
    background: rgba(170,190,190,0.96);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 98;
}
.gnav__wrap{
    align-items:center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}
.gnav__menu__item{
    margin: 30px 0;
}
.gnav__menu__item a{
    color: #fff;
    font-size: 2em;
    text-decoration: none;
    transition: .5s;
}
.gnav__menu__item a:hover{
    color: #666;
}


.header-logo .fa {
    line-height: 1.4;
}

/*------------------------------------------------
	text
--------------------------------------------------*/

.main h1 {
	font-size: 400%;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

.main h2 {
	font-weight: 200;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

h4.title {
  text-align: center;
	font-size: 16px;
  font-weight: 600;
  padding-bottom: 18px;
  color: #ccc;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

.detail {
  font-size: 90%;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.about p {
  line-height: 2;
  font-size: 13px;
}


/*------------------------------------------------
	リスト
--------------------------------------------------*/

.list {
	margin-bottom: 1.4%;
}

.list li {
	width: 50%;
	float: left;
}

.list li:nth-child(even) {
	float: right;
}

.list li .photo img {
	width: 100%;
	animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

.workThumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.workThumbs li {
  width: 50%;
  margin-right: 0%;
  padding-bottom: 3em;
}

.workThumbs img {
  width: 100%;
  height: auto;
}


/*------------------------------------------------
	リンク
--------------------------------------------------*/

a {
	color: #1a1a1a;
}

a:hover {
	cursor: pointer;
}

.nav a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
.nav a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #1a1a1a;
  transition: .3s;
}
.nav a:hover::after {
  width: 100%;
}

.common_link {
	margin-bottom: 100px;
}

.common_link .btn {
	margin: 0px 20% 20px;
}

.common_link .text {
	text-align: center;
}


/*------------------------------------------------
	イメージ
--------------------------------------------------*/

img {
  width: 100%;
}

.main img {
  margin: 1% 0;
	width: 140px;
  border-radius: 50%;
}

.photo {
	animation: fadeIn 1s ease 0s 1 normal;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

ul.img-container {
	display: flex;
  flex-wrap: wrap;
}

li.img-container-list {
  width: 30%;
  margin-right: 5%;
  margin-bottom: 4rem;
  border-bottom: 1px solid #efefef;
}

.img-container img {
  width: 100%;
	pointer-events: none;
}

.img-container-list:nth-child(3n) {
  margin-right: 0;
}

@media screen and (max-width: 767px){
li.img-container-list {
  width: 100%;
  margin: 0 0 2.4rem 0;
	}
}


/*------------------------------------------------
	アニメーション
--------------------------------------------------*/

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.animated {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	opacity:0;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
		transform:translateY(30px);
  }

  to {
    opacity: 1;
		transform:translateY(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
		transform:translateY(30px);
  }

  to {
    opacity: 1;
		transform:translateY(0px);
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 40px);
    transition : all 700ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

@import url(https://fonts.googleapis.com/css?family=Raleway:300,700);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip1384 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  /* min-width: 230px;
  max-width: 315px;*/
  width: 100%;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  background-color: #000000;
}
figure.snip1384 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1384 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}
figure.snip1384:after,
figure.snip1384 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
figure.snip1384:after {
  content: '';
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}
figure.snip1384 figcaption {
  z-index: 1;
  padding: 40px;
}
figure.snip1384 h3,
figure.snip1384 .links {
  width: 100%;
  margin: 5px 0;
  padding: 0;
}
figure.snip1384 h3 {
  line-height: 1.1em;
  font-weight: 700;
  font-size: 1.4em;
  text-transform: uppercase;
  opacity: 0;
}
figure.snip1384 p {
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0;
  top: 50%;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}
figure.snip1384 i {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 20px 25px;
  font-size: 34px;
  opacity: 0;
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}
figure.snip1384 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
figure.snip1384:hover img,
figure.snip1384.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;
}
figure.snip1384:hover:after,
figure.snip1384.hover:after {
  opacity: 1;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}
figure.snip1384:hover h3,
figure.snip1384.hover h3,
figure.snip1384:hover p,
figure.snip1384.hover p,
figure.snip1384:hover i,
figure.snip1384.hover i {
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  opacity: 1;
}

/*------------------------------------------------
	About
--------------------------------------------------*/

/*------------------------------------------------
	Recruit
--------------------------------------------------*/

/*------------------------------------------------
	promotion
--------------------------------------------------*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.service-box{
	position: relative;
	overflow: hidden;
	margin-bottom:10px;
	perspective:1000px;
	-webkit-perspective:1000px;
}
.service-icon{
  width: 100%;
  height: 220px;
  padding: 20px;
  text-align: center;
  transition: all .5s ease;
}

.service-content{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  width: 100%;
  height: 220px;
  padding: 20px;
  text-align: center;
  transition: all .5s ease;
  background-color: #474747;
  backface-visibility:hidden;
  transform-style: preserve-3d;
  -webkit-transform: translateY(110px) rotateX(-90deg);
  -moz-transform: translateY(110px) rotateX(-90deg);
  -ms-transform: translateY(110px) rotateX(-90deg);
  -o-transform: translateY(110px) rotateX(-90deg);
  transform: translateY(110px) rotateX(-90deg);
}
.service-box .service-icon .front-content{
  position: relative;
  top:80px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.service-box .service-icon .front-content i {
    font-size: 28px;
    color: #fff;
    font-weight: normal;
}

.service-box .service-icon .front-content h3 {
    font-size: 120%;
    color: #fff;
    text-align: center;
		margin-top: 10px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.service-box .service-content h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom:10px;
    text-transform: uppercase;
}
.service-box .service-content p {
    font-size: 13px;
    color: #b1b1b1;
    margin:0;
}
.yellow{background-color: #6dc4bb;}
.orange{background-color: #67abd7;}
.red{background-color: #e46d99;}
.grey{background-color: #7a7a7a;}
.service-box:hover .service-icon{
    opacity: 0;
    -webkit-transform: translateY(-110px) rotateX(90deg);
    -moz-transform: translateY(-110px) rotateX(90deg);
    -ms-transform: translateY(-110px) rotateX(90deg);
    -o-transform: translateY(-110px) rotateX(90deg);
    transform: translateY(-110px) rotateX(90deg);
}
.service-box:hover .service-content {
    opacity: 1;
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    transform: rotateX(0);
}

.col-md-3, .col-sm-6 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}

/*------------------------------------------------
	people
--------------------------------------------------*/

figure {
  margin: 0;
  padding: 0;

  overflow: hidden;
}

/* Zoom In #1 */
figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

figure:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.snip1273 {
  position: relative;
  float: left;
  width: 100%;
  color: #ffffff;
  text-align: left;
  background-color: #000000;
  font-size: 16px;
}
.snip1273 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
.snip1273 img {
  position: relative;
  max-width: 100%;
  vertical-align: top;
}
.snip1273 figcaption {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.snip1273 figcaption:before,
.snip1273 figcaption:after {
  width: 1px;
  height: 0;
}
.snip1273 figcaption:before {
  right: 0;
  top: 0;
}
.snip1273 figcaption:after {
  left: 0;
  bottom: 0;
}
.snip1273 h3,
.snip1273 p {
  line-height: 1.5em;
}
.snip1273 h3 {
  margin: 0 0 5px;
  font-weight: 700;
  text-transform: uppercase;
}
.snip1273 p {
  font-size: 160%;
  font-weight: 400;
  margin: 0px 28px 0px 28px;
	position: absolute;
	bottom: 40px;
}

.snip1273:before,
.snip1273:after {
  height: 1px;
  width: 0%;
}
.snip1273:before {
  top: 0;
  left: 0;
}
.snip1273:after {
  bottom: 0;
  right: 0;
}
.snip1273:hover img,
.snip1273.hover img {
  opacity: 0.4;
}
.snip1273:hover figcaption,
.snip1273.hover figcaption {
  opacity: 1;
}
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  height: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after {
  width: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after,
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  opacity: 0.1;
}


/*------------------------------------------------
	ページネーション
--------------------------------------------------*/

.pagenation {
	clear:both;
	font-size:15px;
	line-height:15px;
	text-align:center;
	padding:0px 10px 0px 10px;
	margin:20px 0px 60px;
}

.pagenation span,
.pagenation a {
	display: inline-block;
	margin: 0px 10px 10px 0;
	text-decoration: none;
	color: #282e33;
	background: #FFFFFF;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background-color 0.5s ease 0s;
	line-height: 40px;
}

.pagenation a:hover {
	color:#fff;
	background: #282e33;
}

.pagenation .current {
	background: #282e33;
	color:#fff;
}

.image_link{
 display:block;
 position:relative;
 text-decoration:none;
}
.image_link img{
  display:block;
  width:100%;
}
.image_link:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#000;/*好みの色に変更。*/
  opacity:0;
  transition:0.3s;
}
.image_link:after{
  content:"View Site";/*好みの文章に変更。*/
  display:block;
  color:#fff;
  line-height:48px;
  width:180px;
  border:solid 1px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-1em;
  margin-left:-90px;
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:bold;
  letter-spacing:0.2em;
}
.image_link:hover:before{
  opacity:0.5;
}
.image_link:hover:after{
  opacity:1;
  margin-top:-0.5em;
}
/*------------------------------------------------
	フッター
--------------------------------------------------*/

#pagetop a {
	margin: 30px auto 30px;
	width: 100px;
	color: #fff;
	display: block;
	background-color: #4d4d4d;
	text-decoration: none;
	text-align: center;
	padding: 6px 13px;
	letter-spacing: 0.1em;
	border-radius: 6px;
	font-size: 88%;
	transition: background-color 0.5s ease 0s;
	border: 1px solid #4d4d4d;
}

#pagetop a:hover {
	color:#4d4d4d;
	background: #fff;
}

footer {
	width: 100%;
	padding: 60px 0px 20px 0px;
}

footer a {
	text-decoration: none;
}

footer li a {
	text-decoration: none;
  color: #282e33;
	font-size: 90%;
}

footer li a:hover {
	color: #338dcb;
	transition: 0.5s;
}

.footer-inner {
	width: 100%;
	margin: 0% auto;
	padding: 20px 10px;
}

.footer_title {
	margin-bottom: 20px;
}

.footer_title h3 {
	font-size: 160%;
	margin: 0px 0px 10px;
}

.footer_block {
	display: flex;;
}

.footer_block li {
	text-align: center;
	width: 34%;
}

.footer_large {
	padding: 10px 0px 0px 0px;
  font-size: 500%;
  letter-spacing: 0.06em;
  font-weight: bold;
	text-align: center;
}

.footer_small {
	padding: 0px 0px 10px 0px;
  font-size: 360%;
  letter-spacing: 0.06em;
  font-weight: 500;
	text-align: center;
}

.footer_navi ul {
  text-align: center;
	padding: 0px 0px 20px 0px;
}

.footer_navi li {
  display: inline-block;
  padding-right: 40px;
}

.footer_navi li:last-child {
  padding-right: 0px;
}

.fa fa-envelope {
  line-height: 2;
}

.copyright {
	font-size: 90%;
	text-align: center;
	padding-top: 30px;
}

/*------------------------------------------------
	レスポンシブ
--------------------------------------------------*/

@media screen and (max-width: 999px) {

	.snip1273 p {
	  font-size: 120%;
	  font-weight: 400;
	  margin: 0px 16px 0px 16px;
		bottom: 30px;
	}

}


@media (min-width: 992px){
.col-md-3 {
    float: left;
}
}

@media (min-width: 768px){
.col-sm-6 {
    width: 50%;
}
}

@media (min-width: 992px){
.col-md-3 {
		width: 25%;
}
}
@media (min-width: 768px){
 .col-sm-6 {
    float: left;
}
}


@media (max-width: 667px){

	ul.nav {
		display: none;
	}

 	.main h1 {
		font-size: 280%;
	}

	.main h2 {
		font-size: 110%;
	}

	.workThumbs li {
		width: 100%;
		margin-right: 0;
		padding-bottom: 4em;
	}

	.block-inner {
	  padding: 20px 16px;
	}

	.about-left, .about-right {
		width: 100%;
		margin-bottom: 4em;
		margin-right: 0%;
	}

	.columns1 {
    margin-left: 20px;
    margin-right: 20px;
	}

	.columns4 {
    margin-left: 20px;
    margin-right: 20px;
	}

	.snip1273 p {
	  font-size: 94%;
	  font-weight: 400;
	  margin: 0px 14px 0px 14px;
		bottom: 26px;
	}

	.footer_navi li {
	  display: inline-block;
	  padding: 0px 34px 8px 0px;
	}

	.footer_title h3 {
	  font-size: 120%;
	}

}

@media (min-width: 668px){

	.menu {
		display: none;
	}

}

@media (max-width: 415px){

	.header-inner {
		padding: 20px 16px;
	}

	.menu{
    right: 16px;
    top: 26px;
	}

	.block-inner.main {
	  padding: 100px 0px 80px 0px;
	}

	.content-inner {
	  padding: 4vh 6vw;
	}

	.main h1 {
		font-size: 240%;
	}

	.main h2 {
		font-size: 90%;
	}

	.about p {
	  font-size: 14px;
	}

	.snip1273 p {
	  font-size: 66%;
	  font-weight: 400;
	  margin: 0px 8px 0px 8px;
		bottom: 16px;
	}

	.common_list6 li .photo img {
    height: 300px;
    object-fit: cover;
	}

	.footer_title h3 {
	  font-size: 90%;
	}

}