@charset "utf-8";
@import "normalize.css";
@import "font.css";
@import "glitch.css";
@import "navi.css";
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500);
/* font-family: 'Roboto', sans-serif; */
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400);
/* font-family: 'Roboto Condensed', sans-serif; */
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,300,400);
/* font-family: 'Titillium Web', sans-serif; */
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);

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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html{ font-size:small; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}


.Clear {clear: both;font: 0pt/0pt sans-serif;height: 0px; line-height:0;}

#works ul:after, #wd_info:after, #media ul:after
 {display: block;content: "";clear: both;overflow: hidden;}

a ,
a:visited {text-decoration:none; }
a:hover { }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
::-moz-selection,::selection {background: #ece2a9;text-shadow: none;}

h1 {font-size: 197%; margin: 0; font-weight: normal; line-height: 1.2em;}
h2 {font-size: 182%; margin: 20px 0; font-weight: 600; line-height: 1.5em;}
h3 {font-size:28px;margin:20px 0 20px; letter-spacing:-1px; font-family: 'Arimo', sans-serif;}
h4 {font-size: 108%; margin:10px 0;}
h5 {font-size: 108%; margin: 10px 0;}
h6 {font-size: 12px; margin: 0;}
p,pre {font-size: 108%; margin: 4px 0; line-height: 1.5em;}
small {font-size: 83%; display: block; line-height: 1.4em; margin: 5px 0px;}

small.right{text-align: right;}
.Clear {clear: both;font: 0pt/0pt sans-serif;height: 0px;}

body{padding: 0;margin: 0;}

#all{width: 650px; margin: 0 auto; position: relative;}

h2, h3 {font-family: 'Roboto Condensed', sans-serif; font-weight: 100; font-size: 320%;
  overflow: hidden;
  text-align: center;
	margin: 0;
	padding: 0;
}
h2 span, h3 span {
  position: relative;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 0.5em;
  text-align: left;
}
h2 span::before,
h2 span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 25%;
  height: 1px;
  background-color: #000;
}
h3 span::before,
h3 span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 25%;
  height: 1px;
  background-color: #FFF;
}
h2 span::before, h3 span::before {
  right: 100%;
}
h2 span::after, h3 span::after {
  left: 100%;
}
.h2cap{font-size: 84%; text-align: center; margin-top:-8px; letter-spacing: 0.5em; padding-left:0.5em;}
.h3cap{font-size: 84%; text-align: center; margin-top:0; letter-spacing: 0.5em; padding-left:0.5em;}
.mar10{margin-bottom:10px;}
.mar15{margin-bottom:15px;}
.mar20{margin-bottom:20px;}
.mar30{margin-bottom:30px;}
.mar30{margin-bottom:40px;}

/* Header
*******************************************************************************************************************/
header{background:#fff; position: absolute;width: 100%;font-family:Arial, Helvetica, sans-serif;}
header:after{content:"";display:block;clear:both;height:0;}
header h1{text-align: center; padding: 100px;}
header h1 img{ vertical-align:-5px;}
#nav ul{ padding-left:102px;list-style: none;}
#nav ul li{ float: left;}
#nav ul li a{ font-size:14px; padding:2px 12px; margin:0 3px;
text-align: center;
display: block;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;}
#nav ul li a:hover{ color:#FFFFFF; text-decoration:none;}


header.scroll{position: fixed;top:0;left: 0; opacity: 0.85;}
header.scroll h1{float: left;  padding: 10px; margin-right: 30px;}


/* BG-Color Animation
*******************************************************************************************************************/
#about, #inq {
  background-color:#fff100;
  animation: bg-color 13s infinite;
  -webkit-animation: bg-color 13s infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: #fff100; }
  25% { background-color: #4cff07; }
  50% { background-color: #00ffff; }
  75% { background-color: #ff8dbf; }
  100% { background-color: #fff100; }
}
@keyframes bg-color {
  0% { background-color: #fff100; }
  25% { background-color: #4cff07; }
  50% { background-color: #00ffff; }
  75% { background-color: #ff8dbf; }
  100% { background-color: #fff100; }
}


/* TOP
*******************************************************************************************************************/
#intro{width: 100%;
  margin: 0;
  max-width: none;
	background-size: cover;
  background-position: center;
	position: relative;
  width: 100%;
height: 100vh;}
#intro .scroll{ position: absolute; bottom:30px;left: 50%; margin-left: -15px;}
#intro .scroll svg{ width: 30px;}
.logo{ width: 180px; position: absolute; top:50%;left: 50%; margin-left: -92px;margin-top: -40px;}
.pulse {
	animation-name: pulse_animation;
	animation-duration: 1500ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes pulse_animation {
	0% { transform:translateY(1); }
	50% { transform:translateY(10px); }
	0% { transform:translateY(1);  }

}

/* About
*******************************************************************************************************************/
#about {padding:120px 0; text-align:center; position:relative;}
#about h2{font-family: "Sawarabi Mincho"; font-weight: 100; font-size: 240%; margin-bottom: 10px; }

.about_cap{ width:720px; margin: 0 auto; font-size: 115%; line-height: 2em; letter-spacing: 0.1em;font-family: "Sawarabi Mincho"; font-weight: 100;}
#conts {line-height: 1.7em; padding-top: 500px;}s
#conts #kirikae{text-align: center;margin: 50px 0;}

.About, .Service, .Works, .Partners, .Contacts{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; letter-spacing:3px; font-size:12px; line-height:25px; margin-bottom:150px; padding-top:170px;}

#page-top { font-family:Arial, Helvetica, sans-serif;
	position: fixed;
	bottom:10px;
	right: 10px;
	font-size:50%;
	-webkit-text-size-adjust:none;
}
#page-top a {
	background:url(../img/pagetop.png) center 12px no-repeat #111;
	text-decoration: none;
	color: #fff;
	width: 50px;
	padding: 25px 0  15px 0;
	text-align: center;
	display: block;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
#page-top a:hover {
	text-decoration: none;
	background:url(/img/pagetop.png) center 12px no-repeat #555;
}

/* Works
*******************************************************************************************************************/
#works{ padding:100px 0;}
.works_in{ padding: 100px 0;}
#works ul, #wd_info ul{ list-style:none; margin: auto; width: 780px;}
#works li{float: left; width:44%; margin: 0 3%; text-align: center; display: inline;}
#works li.wd{}
#works li.gd{}
.wd svg, .gd svg{ width: 150px;}
.work_t{font-family: 'Roboto', sans-serif; font-weight: 300; font-size:240%; margin-bottom: 0.1em;}
.work_c{font-size:80%; padding-bottom:2.2em; margin-bottom: 2.2em; border-bottom: solid 1px #111;}
.dlead{ width:800px; margin: 0 auto; font-size: 110%; line-height: 2em; letter-spacing: 0.1em; text-align: center;}
.dlead h4{font-family: "Sawarabi Mincho"; font-weight: 100;  font-size:170%; letter-spacing: -0.04em; margin-bottom: 1em;}
#wd_info{margin-bottom: 7em;}
#wd_info li svg{ width: 100px; height: 100px;}
#wd_info li{ width:14%; text-align: center; font-size: 80%;}

/* Media
*******************************************************************************************************************/
#media{padding:100px 0; background-color: #333; color: #FFF;}


#media ul{list-style:none; margin: auto; width: 960px; padding: 80px 0;}
#media li{float: left; width:29%; margin: 0 2%; text-align: center; display: inline; font-size:80%; color: #ccc; line-height: 1.8em;}
#media li p{ padding-top: 7px; line-height:1.7em;}
#media li i.icon-ap01{font-size:265%;}
#media li i.icon-wdc{font-size:200%;}
#media li i.icon-webclips{font-size:310%;}
#media li i.icon-func{font-size:360%;}
#media li.wcd{padding-top:8px;}
#media li.wdc{padding-top:19px;}
#media li.func{padding-top:2px;}

/* Contact
*******************************************************************************************************************/
#inq{ padding:70px 0; text-align: center;}
.inq_text{font-size: 110%; padding: 2em 0;}
.inq_text p{font-size: 138%; line-height: 2em;}
.inq_btn {
	font-size: 110%;
	letter-spacing: 0.2em;
  display: inline-block;
  width: 360px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.inq_btn::before,
.inq_btn::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.inq_btn,
.inq_btn::before,
.inq_btn::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.inq_btn {
  position: relative;
  -webkit-perspective: 300px;
  perspective: 300px;
}
.inq_btn span {
  display: block;
  position: absolute;
  width: 360px;
  height: 60px;
  border: 2px solid #333;
  text-align: center;
  line-height: 56px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  pointer-events: none;
}
.inq_btn span:nth-child(1) {
  background-color: #333;
  color: #fff;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.inq_btn span:nth-child(2) {
  background-color: #111;
  color: #FFF;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.inq_btn:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.inq_btn:hover span:nth-child(2) {
  background-color: #333;
	color: #333;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

/* Form
*******************************************************************************************************************/
#form{ padding:100px 0;}

.form_in{ padding: 100px 0; width: 800px; margin: 0 auto;}
.form_in{ padding: 100px 0; width: 800px; margin: 0 auto;}
.form_in table   { width: 100%; margin-bottom: 80px;}
.form_in th, section td  { padding:30px 0; border-bottom: 1px solid #ccc; }
.form_in th  {}
.p_conTable th { width: 30%; text-align: left; vertical-align:middle;}
.p_conTable tr:first-child { border-top: 1px solid #ccc; }
.w_t{ margin-bottom:15px;}
.w_f, .w_c{padding:0px 25px 10px 0px;line-height:25px;}
.w_f .error{font-size :100%;color:#FF474A; display : block; padding-top:9px;}
.w_f .error:before{content: "\e60b"; margin-right:2px; vertical-align:-1px; font-size :118%;}
.m-alert{
font-size:85%;
padding:12px;
background:#ff8080;
color:#fff;
margin:0 20px 0 0;

}
 
.m-any{
font-size:85%;
padding:12px;
background:#AAA;
color:#fff;
margin:0 20px 0 0;
}

.m_thanks{ font-size:186%; text-align:center; padding:50px 0 100px 0; border-bottom:solid 1px #CCC; margin-bottom:50px;}
.m_thanks i{font-size:118%; margin-right:5px; vertical-align:-2px; color:#508AFF;}
.m_comment{ margin-bottom:80px;}
 
.w_f select{border:solid 1px #DDD;
	-webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
	margin-top:8px;
	padding-left:15px;
	width:300px;
    height: 40px;
    line-height: 40px;
    font-size:111%;
    vertical-align: middle;}
.w_f input[type=text],input[type=tel],input[type=email], .w_f input[type=url]{
font-size:100%;
	padding:5px 10px;
 margin-top:8px;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
 -o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
 
.w_f textarea{
	margin-top:8px;
font-size:13px;
width:100%;border:solid 1px #DDD;padding:15px; 
}
 
span.wpcf7-list-item { display: block; }
.w_f input[type=text], .w_f input[type=email], .w_f input[type=tel], .w_f input[type=url]{
   width:100%;border:solid 1px #DDD; line-height:25px;
}
 
.w_f input[type=text]:focus, .w_f input[type=email]:focus, .w_f input[type=tel]:focus, .w_f input[type=url]:focus{
border:solid 1px #AAA; background: #EEE;color: #333;
}
 
.w_f input[type=text], select,input[type=email],input[type=tel], .w_f input[type=url]{
   outline: none; 
}

 
.w_f input[type=submit], .w_f input[type=button]{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	margin:0 auto;
   border:#333 1px solid;
   width:50%;
   height:50px;
   color:#FFF;
   background-color:#333;
   
}
.w_c input[type=submit] { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	margin:0 auto;
   border:#F55F62 1px solid;
   width:50%;
   height:50px;
   color:#FFF;
   background-color:#F55F62;
   
}
.w_f input:hover[type=submit], .w_f input:hover[type=button]{
   border:#777 1px solid;
   cursor:pointer;
   color:#FFF;
   background-color:#777;
}
.w_c input:hover[type=submit]{
   border:#F98E90 1px solid;
   cursor:pointer;
   color:#FFF;
   background-color:#F98E90;
}
.w_f img{
   border:solid 2px #FF0000;
   padding:10px;
   margin:5px 0 15px 0;
}



/* PageTop
*******************************************************************************************************************/
#page-top {position: fixed;bottom: 20px; right: 20px;}
#page-top a {background:url(../img/pagetop.png) top left no-repeat #1b1b1b; display: block; width:50px; height:10px; outline : none;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
#page-top a:hover{background:url(../img/pagetop.png) top left no-repeat #333;}


/* Footer
*******************************************************************************************************************/
footer{ background-color: #1b1b1b; padding:120px 0 0 0; text-align:center; color:#FFF;}
footer ul{list-style: none; padding: 0; margin-bottom: 50px;}
footer li{font-family: 'Titillium Web', sans-serif; font-weight:200; font-size:110%;  padding: 15px 0;letter-spacing: 0.1em; }
footer li a{color:#FFF; }
footer .copy{font-family: 'Roboto', sans-serif;  font-weight:300; font-size:84%; color: #999; letter-spacing: 0.2em; padding:50px; }

footer li a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
footer li a::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #FFF;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
footer li a:hover::after {
  width: 84px;
}

/* Responsive
*******************************************************************************************************************/
@media only screen and (max-width: 980px) {
	
	}

@media only screen and (max-width: 860px) {
	
	}

@media only screen and (max-width: 768px) {
	
	}

@media only screen and (max-width: 480px) {
#about {padding:80px 0;}
#about h2{font-size: 160%;}
.about_cap{ width: 80%; }
#works{ padding:80px 0;}
.works_in{ padding: 50px 0;}
#works ul, #wd_info ul{ list-style:none; margin: auto; width:90%;}
#works li{float: left; width:94%; margin: 0 3% 15% 3%; text-align: center; display: inline;}
#wd_info{margin-bottom: 4em;}
#wd_info li svg{ width: 130px; height: 130px;}
#wd_info li{ width:44%; height:200px;  text-align: center; font-size: 80%; margin: 0 3% 1% 3%;}
#wd_info li:nth-child(5n) { display:none; }
.dlead{ width: 88%; margin: 0 auto; font-size: 110%; line-height: 2em; letter-spacing: 0.1em; text-align: center;}
.dlead h4{ font-size:150%; }
#media{padding:80px 0;}
#media ul{ width:90%; padding: 80px 0 0 0;}
#media li{float: left; width:96%; margin: 0 2% 8em 2%; text-align: center; display: inline; font-size:80%; color: #ccc; line-height: 1.8em;}
#media li p{ padding-top: 7px; line-height:1.7em; padding: 7px 3em 0 3em;}
footer .copy{font-size:80%;letter-spacing: 0.05em; }
#page-top { display: none;}
.p_conTable { }
.p_conTable th, .p_conTable td{width: 94%; display: block; border-top: none; background-color: #333;}
.p_conTable tr:first-child th { border-top: 1px solid #ddd; }
}