@charset "UTF-8";
html, body { height: 100%; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {color:#656565;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  font-weight:500;
}
a{text-decoration: none;}
a:hover{opacity: 0.8;}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

img{width:100%;}

/*共通*/
.sp-none{display: contents;}
.pc-none{display:none;}
.gray{background-color: #f8f8f8;}

.separator {
    width: 10px;
    height: 10px;
    margin: 20px auto;
    background: #e74c3c;
    position: relative;
    display: block;
    border-radius: 50%;
}
.separator:before {
    position: absolute;
    right: 5%;
    bottom: 4px;
    height: 1px;
    width: 80px;
    background: #eee;
    content: "";
    display: inline-block;
    margin-right: 20px;
}
.separator:after {
    position: absolute;
    left: 5%;
    bottom: 4px;
    height: 1px;
    width: 80px;
    background: #eee;
    content: "";
    display: inline-block;
    margin-left: 20px;
}

p{line-height: 170%;}
h2{font-size:50px;text-align:center;margin-bottom:10px;font-family: 'Play', sans-serif;font-weight:bold;}
section{padding:150px 4%;background-position: center center;background-size: cover;}
section p{font-size:14px;margin:0 auto;text-align:center;}
.item p,.box p{text-align:left;font-size:13px;line-height:1.8em;}

.flex-box{
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
  width:auto;
  max-width:1200px;
  margin:0 auto;
  }

.en,.navbar-custom a{font-family: 'Play', sans-serif;}

/*ヘッダー・メニュー*/

header{width:100%;height:75px;padding:20px;
       position:fixed;top:0;left:0;}
 .logo{float:left;width:180px;height:80px;margin-top:2px;}


 /*トップイメージ*/

.top-messeage{width:100%;
  text-align:center;position:absolute;
  left:50%;
  transform: translateY(-65%) translateX(-50%);
  -webkit- transform: translateY(-65%) translateX(-50%);}
.top-en-heading{font-size:20px !important;}
.top-messeage h2{padding-left:10px;font-size:90px;margin:20px 0 15px;font-weight:bold;}
.top-messeage span{font-size:30px;}
.top-messeage p{width:100%;max-width:660px;margin:0 auto;font-size:13px;}
.top-messeage .separator{margin-bottom:30px;}

/*企業理念*/
#philosophy {padding:130px 0;}
#philosophy .icon{height:80px;width:80px;margin:0 auto;border-radius: 50%;margin-bottom:30px;text-align: center;}
#philosophy h3{font-weight: bold;font-size:20px;padding-bottom:10px;text-align:center;position:relative;margin-bottom: 1em;}
#philosophy h3::before{content: '';position: absolute;bottom: -15px;width: 60px;height: 2px;left: 50%;-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);background-color:#DE2827;border-radius: 1px;}
#philosophy .item{width:25%;max-width:280px;}
#philosophy .item p{text-align:center;width:auto;font-size:12px;margin-top:40px;}


/*チームハック*/

#teamhack{border-top:1px solid #ddd;}
#teamhack .item{width:50%;padding:0;max-width:600px;}
#teamhack a{display: block;width:220px;background-color:#DE2827;color:#fff;margin:30px auto 0px;text-align: center;padding:10px 0;border-radius: 5px;}
#teamhack .item p{margin-top:20px;}
#teamhack .item h2{display:block;position:relative;}
#teamhack .item h2 img{max-width:550px;}
#teamhack .th-image img {width:100%;max-width:400px;height:auto;}
#teamhack .th-image{width:35%;}
#teamhack span{position:absolute;top:-10px;right:-5px;display:block;font-size:20px;font-family: Yu Gothic;font-weight:500;}

/*media*/

#media{background-color:#555;color:#fff;background-image:url(../image/media-bg.jpg);}
#media .item{margin-top:40px;width:40%;color:#565656;padding:4%;background-color:rgba(255,255,255,0.9);}
#media h3{margin-bottom:20px;}
#media a{display: block;width:70%;background-color:#FAA61A;color:#fff;margin:30px auto 20px;text-align: center;padding:10px 0;border-radius: 5px;}

/*コンサルト（開発相談）*/
#consult{background-color:#f8f8f8;}
#consult .wrapper{height:650px;width:auto;max-width:1200px;position:relative;margin:0 auto;margin-top:60px;}
#consult .wrapper .consult-image{position:absolute;height:100%;width:60%;background-color: #555;top:0px;right:4.5%;background-size:cover;}
#consult .wrapper .box{position:absolute;height:80%;width:45%;min-width:500px;background-color: #fff;top:10%;left:4.5%;padding:4%;}
#consult .wrapper .box .icon{width:100px;height:100px;margin:0 auto;}
#consult .wrapper .box h3{padding-bottom:10px;text-align:center;position:relative;margin: 1em 0px;font-size:20px;text-align: center;}
#consult .wrapper .box h3::before{content: '';position: absolute;bottom: -15px;width: 60px;height: 2px;left: 50%;-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);background-color:#ccc;border-radius: 1px;}
#consult .wrapper .box p{text-align:left;margin-top:50px;}
#consult a{display: block;width:220px;background-color:#DE2827;color:#fff;margin:40px auto 0;text-align: center;padding:10px 0;border-radius: 5px;}
/*コンサルト（開発相談）*/
#works .works-image{margin-top:40px;}
#works a{display: block;width:220px;background-color:#DE2827;color:#fff;margin:40px auto 0;text-align: center;padding:10px 0;border-radius: 5px;}
#works .item{margin:0px;border-radius: 0px;background-color:#ccc;width:33.33333333333%;height:21vw;min-height:210px;max-height:280px;border:0px solid #ddd;background-position:center center;background-size:cover;display:block;}

/*RELATED LINK 提携サービス*/

#related-link{background-color: #f8f8f8;}
#related-link .flex-box{margin-top:60px;}
#related-link .item{width:50%;}
#related-link .flex-box .item .img{margin:0 auto;display:block;width:50%;height:auto;}
#related-link p{text-align: center;margin-top:30px;}

/*CORPORATE 会社概要*/

#corporate .profile,#corporate .map{width:45%;}
#corporate .flex-box{margin-top:60px;}
#corporate .map{padding-bottom:20px;}
#corporate table{margin:20px 0px;font-size:13px;}
#corporate td{padding:8px;min-width:100px;}
#corporate .td-border-left{border-left:1px solid #ddd;}
#corporate h3{font-size:23px;font-weight:bold;text-align:center;background-color:#f8f8f8;padding:8px 0;border-radius:20px;}


/*RECRUIT 求人情報*/

#recruit{color:#fff;background-image:url(../image/recruit-bg.jpg);}
#recruit .flex-box{margin-top:60px;}
#recruit .item{width:25%;}
#recruit a{margin:0 auto;display: block;width:180px;height:180px;background-color:#fff;border-radius:50%;background-position: center center;background-size: 100px;background-repeat: no-repeat;}
#recruit p{text-align:center;margin-top:20px;}


/*CONTACT 問い合わせ*/

#contact{padding-bottom:0px;}
#contact .flex-box{  -webkit-justify-content: space-between; /* Safari */justify-content:         space-between;}
#contact .mail-box{border-radius:5px;background-color: #fff;margin-top:60px;padding:0% 6%;}
#contact input,#contact textarea{color:#656565;font-size:14px;box-sizing: border-box;height:40px;padding:5px 10px;background-color:#fafafa;border:1px solid #ccc;border-radius: 5px;width:49%;margin-bottom:20px;}
#contact textarea{width:100%;height:250px;padding-top:10px;}
#contact .submit{color:#fff;display: block;background-color:#FAA61A;border:none;width:220px;float:right;}

input::-webkit-input-placeholder,input::-moz-placeholder,input:-moz-placeholder,input:-ms-input-placeholder{color:#ddd !important;}


/*フッター Footer*/

footer{background-color:#fff;text-align:center;font-size:12px;padding:30px 0;position:absolutea;bottom:0px;}


/*スクロールボタン*/

.intro-body a {
  padding-top: 60px;
}
.intro-body a span {
  position: absolute;
  left: 50%;
  bottom:40px;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
.intro-body a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}

.intro-body::before{height:auto;}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*スクロールでheaderに背景を付与*/

.header-bg{background-color: rgba(0,0,0,0.7);
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;}


/*フェードインアニメーション*/

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

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


/*menu*/


/*---------------------------------------------
  Hamburger Navigation
  ---------------------------------------------*/

.hamburger-nav-toggle-btn {
  margin: 1em;
}
.hamburger-nav-toggle-btn.close::before, .hamburger-nav-toggle-btn.open::before {
  font-family: 'FontAwesome';
}
.hamburger-nav-toggle-btn.open::before {
  content: '\f00d';
}
.hamburger-nav-toggle-btn.close::before {
  content: '\f0c9';
}

.hamburger-nav-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #c9c9c9;
}
.hamburger-nav-list > li {
  border-bottom: 1px solid #eeeeee;
}
.hamburger-nav-list > li a {
  display: block;
  padding: 10px 1em;
  text-decoration: none;
}


/*レスポンシブ*/

@media screen and (max-width:920px){
    #recruit {padding-bottom:100px;}
    #recruit .item{width:50%;margin-bottom:40px;}
    #recruit a{margin:0 auto;display: block;width:120px;height:120px;background-color:#fff;border-radius:50%;background-position: center center;background-size: 80px;background-repeat: no-repeat;}
}


@media screen and (max-width:770px){
    #consult {padding:150px 0px 0px;}


    #media .item{width:100%;max-width:500px;}
    #teamhack .item{width:100%;}
    #teamhack .th-image{width:90%;margin-top:60px;text-align: center;}

    #consult p{padding:0px 4%;}
    #consult .wrapper .consult-image{display:none;}
    #consult .wrapper{background-image:url(../image/consult-bg.jpg);background-position: center;background-size:cover;height:700px;}
    #consult .wrapper .box{height: 70%;width: 80%;min-width:0px;top:15%;left:10%;}

    #corporate .flex-box{ -webkit-flex-direction: column-reverse; /* Safari */ flex-direction:column-reverse;}
    #corporate h3{text-align:center;}
    #corporate .profile, #corporate .map{width:100%;}
    #corporate .map{height:300px;}
    #corporate .profile{margin-top:20px;}

    #related-link .flex-box{margin-top:0px;}
    #related-link .item{width:100%;max-width:400px;margin-top:60px;}

    #works .item{width:50%;}
}


@media screen and (max-width:700px){
    .top-messeage{max-width:450px;}
    .intro-body a span{top:90%;}
    .top-messeage .sp-none{display: none;}
    .top-messeage .pc-none{display:block;}
    #contact input, #contact textarea{width:100%;}

}

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

    #philosophy {padding:60px 0;}
    #philosophy .item{width:100%;margin-bottom:60px;max-width:300px;}
    #consult .wrapper {height:900px;background-size:150%;background-position:bottom;}
    #consult .wrapper .box{width:101%;left:0px;top:-1px;height:70%;padding:8%;background-color:#f8f8f8;}
    #consult .pc-none{display: block;}
}

@media screen and (max-width:475px){
    section{padding:100px 4%;}
    Econsult{padding:80px 0 0;}
    #consult .wrapper .box{height:65%;}
  h2{font-size:40px;}
    .top-messeage h2{font-size:50px;}

    .top-messeage span{font-size:20px;}
    .intro-body a span{top:85%;}
    #contact .submit{width:180px;}
    #contact .mail-box{padding:0px;}
    #works .item{width:100%;}
}


@media screen and (max-width:370px){
.top-messeage h2{font-size:40px;}}

section table { width: 100%; font-size:14px;}
section th, section td  { padding: 10px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; }
 
/*----------------------------------------------------
  .contactcheck
----------------------------------------------------*/
.contactcheck th  { width: 30%; text-align: left; font-weight:bold;}
 
@media only screen and (max-width:480px){
    .contactcheck { margin: 0 0px; }
    .contactcheck th,
    .contactcheck td{
    width: 100%;
    display: block;
    border-top: none;
    text-align:left;
    }
  .contactcheck tr:first-child th { border-top: 1px solid #ddd; }
}

/*----------------------------------------------------
  メニュー
----------------------------------------------------*/
.top-menu{background-color: #fff;position: fixed;top:0;left:0;z-index: 9997;width: 100%;}
#logo {
  max-width:50%;
  display:block;
  margin:0 auto;
  
}
#logo img{height:auto;}


nav{
  width: 100%;
  height: 70px;
  position: relative;
  font-family: 'Play';
  
}
.drawer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 70px;
  padding: 0 1em;
}

/*ナビゲーション部分*/

.menu ul li a {
display:block;
  font-weight:bold;
padding: 2em;
border-bottom: 1px dotted #CCC;
  color:#333;
  text-decoration:none;
  
}


.menu ul li a:hover
{background-color:rgba(0,0,0,0.5);
color:orange;}


.menu{
  text-align:center;
  background-color:rgba(255,255,255,1);
  transition: .5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}


/*OPEN時の動き*/
.menu.open {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/

}



/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 3;
  right:25px;
}
  
.Toggle span {
    display: block;
    position: absolute;
    width: 40px;
    border-bottom: solid 4px #333;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
  
}
  
.Toggle span:nth-child(1) {
    top:5px;
}
  
.Toggle span:nth-child(2) {
    top: 18px;
}
  
.Toggle span:nth-child(3) {
    top: 32px;
}
  


.Toggle.active span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
  
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.isms {
  width:100%; text-align:center; font-size:14px; border-bottom:1px solid #ccc; padding:1em 0 2em;
}
.isms img {
  width:200px; margin-bottom:1em;
}

@media screen and (min-width: 1200px) {
  
  header::after{
    
    display:none;
  } 
  
  
nav{
  display: flex;

}
.Toggle{
  display: none;
}
.menu{
  width: 100%;
  background-color: transparent;
  margin-top:0;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.menu ul{
  height: 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.menu ul li a{
  padding: 0 1em;
  border-bottom: none;

}
  
  .menu ul li a:hover
{
  background-color:transparent;
}
  
  
}