@charset "utf-8";
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:700,300);

html{ height:100%;}
body{ height:100%; font-size:16px; line-height:1.5; vertical-align:middle; font-family:"Roboto Slab", "Geneva", "游ゴシック", "YuGothic", "モトヤLシーダ3等幅", "MotoyaLCedar", sans-serif;}
input[type="button"], input[type="text"], input[type="submit"], input[type="reset"], textarea { padding:1%; font:inherit; border:0 none; border-radius: 0; -webkit-appearance: none;}
a{ text-decoration: none; color: #333; transition-duration: 0.3s;}
a:hover{ text-decoration: none; color: #333;}
a.onmouse{ color: #333;}
a.on{ color: #ff0;}


header{ height:100%;}
header > section { width:100%; height:100%; background-color:#eee; position:relative;}
header > section dl{ width:90%; height:90%; background-color:rgba(255, 255, 255, 0.7); overflow:hidden; position:absolute; top:5%; left:5%;}
header > section dl > *{ position:relative;}
header h1{ width:100%; height:1em; line-height:1; text-align:center; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
header .title_copy_animation{height:1.5em; display: inline-block; overflow: hidden; vertical-align:top; position:relative;}
header .title_copy_animation > li{text-align:center; position:relative;}
header .title_copy_animation1 > li{animation: title_copy_animation1 10s; animation-timing-function: ease-out; animation-iteration-count: infinite;}
header .title_copy_animation2 > li{animation: title_copy_animation2 6s; animation-timing-function: ease-out; animation-iteration-count: infinite;}
header > nav{ width:100%; background:#333; position:relative; display:none; z-index: 99;}
header > nav.fixed{ margin:0; position:fixed; top:0; left:0;}
header > nav > ul{ overflow:hidden;}
header > nav > ul > li{ width:15%; padding:0 5%; line-height:1; float:left;}
header > nav > ul > li > a{ display:block; padding:15px 0 10px 0; border-bottom:5px solid #fff; text-align:center; color:#fff; font-size:20px; text-decoration:none;}
header > nav > ul > li > a.onmouse, header > nav > ul > li > a:hover{ color:#ccc; border-color:#ccc}
header > nav > ul > li > a.on, header > nav > ul > li > a.inview{ color:#ff0; border-color:#ff0}
article{ overflow:hidden;}
h2{ margin:60px 0 0.5em 0; padding-bottom:0.25em; text-align:center; overflow:hidden;}
h2 span{ padding:0.25em 0.5em; border-bottom:0.0625em solid #000;}
article section{ margin:1em auto 5% auto;}

#experience{ background-color:#ccc;}
#experience .exp_category{ padding:5% 1% 0 5%; background-color:#eee; overflow: hidden;}
#experience .exp_category > dt { margin-bottom:0.5em;}
#experience .exp_category.web .exp_genre { margin-bottom:3em; overflow: hidden;}
#experience .exp_category .exp_genre > dt > img{ width:90%;}
#experience .exp_category .exp_genre > dd > h4{ margin-bottom:0.5em; font-size:1.5em;}
#experience .exp_category .exp_genre p{ margin-bottom:1em;}
#experience .exp_category .exp_genre li{ margin:0 0.5em 0.5em 0; padding: 0.25em 0.5em 0.25em 0; background-color:#fff; float: left;}
#experience .exp_category .exp_genre li:before{content: "・"; margin-right:0.25em;}

#works{ background-color:#aaa;}
#works .works_category{ padding:5% 0 5% 5%; background-color:#eee; overflow: hidden;}
#works .works_category > dt { margin-bottom:1em;}
#works .works_category a.works_category_block{ background-color: #fff; display:block; border:1px solid #ccc;}
#works .works_category a.works_category_block.onmouse{ background-color: #ccc; color:#000;}
#works .works_category a.works_category_block.on{ background-color: #ff0; color:#000;}
#works .works_category .works_category_block h4{ margin-bottom:0.5em; font-weight:bold;}
#works .works_category .works_category_block h4 span{ font-size:0.75em;}
#works .works_category .works_category_block p img{border:1px solid #999;}

#contact{ background-color:#999;}
#contact > section input[type="text"], #contact > section textarea { width:98%; border:1px solid #000; background-color: rgba(255, 255, 255, 0.95);}
#contact form > dl{ margin-bottom:1em;}
#contact form > dl > dt{ margin-bottom:0.25em; font-weight:bold;}
#contact form .contact_btn{ margin-bottom:1em; text-align:center;}
#contact form .contact_btn >*{ width:25%; padding:1em; font-weight: bold; line-height: 1; background-color: #fff; transition-duration: 0.3s;}
#contact form .contact_btn >*:first-child{ margin-right:5%;}
#contact form .contact_btn > .onmouse{ background-color:#ccc; cursor:pointer;}
#contact form .contact_btn > .on{ background-color:#ff0; cursor:pointer;}

footer{ padding-bottom: 3em; background-color:#666; color:#fff; overflow: hidden;}
footer p{ text-align: center; margin: 1em;}

#experience >*, .exp_category > dd > dl, #works >*, .works_category > dd > a, #contact >*{
  position: relative;
}

@media screen and (min-width:961px){
  .sp{display:none;}

  header h1{ font-size:64px;}
  header > section dl > *{ width:50%; height:100%; float:left;}
  header .title_copy{ height:3em; margin:auto; padding:10% 0 10% 5%; border-left:1px dotted #333; font-size:28px; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
  header > nav > #navbtn{ display:none;}
  header > nav > ul{ width:960px; margin:0 auto;}

  h2{ font-size:4em;}
  section{ width:90%;}

  #experience .exp_category > dt { font-size:3em;}
  #experience .exp_category.web >*{ float:left;}
  #experience .exp_category.web > dt { width:10%;}
  #experience .exp_category.web > dd { width:90%;}
  #experience .exp_category.web .exp_genre { width:30%; margin-left:3%; float:left;}
  #experience .exp_category.web .exp_genre dt, #experience .exp_category.web .exp_genre h4{ text-align: center;}

  #works .works_category > dt { font-size:3em;}
  #works .works_category .works_category_block{ width:20%; height:460px; margin: 0 2% 2% 0; padding:1%; float:left;}
  #works .works_category .works_category_block p img{width:100%;}

  #contact section{ width:960px;}
  #contact .contact_btn{ font-size:1.25em;}

}

@media screen and (max-width:960px){
  .pc{display:none;}
  
  header h1{ font-size:54px;}
  header > section dl > *{ height:50%;}
  header > section dt{ width:100%;}
  header > section dd{ width:90%; margin:0 auto; border-top:1px dotted #333;}
  header .title_copy{ height:4.5em; margin:auto; font-size:18px; text-align:center; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
  header > nav{ height:50px;}
  header > nav > #navbtn{ width:30px; height:30px; position:absolute; top:10px; right:10px; background-color:#fff; transition-duration: 0.3s;}
  header > nav > #navbtn.onmouse{ background-color:#ccc;}
  header > nav > #navbtn.on{ background-color:#ff0;}
  header > nav > #navbtn:before{ content:""; width:100%; height:6px; background-color:#333; display:block; position:absolute; top:6px; left:0;}
  header > nav > #navbtn:after{ content:""; width:100%; height:6px; background-color:#333; display:block; position:absolute; bottom:6px; left:0;}
  header > nav > ul{ width:100%; background-color:#333; position:absolute; left:0; display:none;}
  header > nav.unfixed > ul{ border-bottom:1px solid #fff; bottom:50px;}
  header > nav.fixed > ul{ border-top:1px solid #fff; top:50px;}
  header > nav > ul > li{ width:90%; float:none;}

  h2{ font-size:3em;}
  section{ width:90%;}

  #experience .exp_category > dt { font-size:2em;}
  #experience .exp_category.web .exp_genre >*{ float: left;}
  #experience .exp_category.web .exp_genre > dt { width:30%;}
  #experience .exp_category.web .exp_genre > dd { width:70%;}

  #works .works_category > dt { font-size:2em;}
  #works .works_category .works_category_block{ width:91%; margin-bottom:5%; padding:2%;}
  #works .works_category .works_category_block p{overflow: hidden;}
  #works .works_category .works_category_block p img{width:40%; margin:0 1em 1em 0; float:left;}

}


@keyframes title_copy_animation1 {
  0%   { top:0; }
  20%   { top:0; }
  21%   { top:-1.5em; }
  40%   { top:-1.5em; }
  41%   { top:-3em; }
  60%   { top:-3em; }
  61%   { top:-4.5em; }
  80%   { top:-4.5em; }
  81%   { top:-6em; }
  99%   { top:-6em; }
  100%  { top:0em; }
}

@keyframes title_copy_animation2 {
  0%   { top:0; }
  33%   { top:0; }
  35%   { top:-1.5em; }
  66%   { top:-1.5em; }
  68%   { top:-3em; }
  99%   { top:-3em; }
  100%   { top:0; }
}