/* Scss Document */
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  padding: 30px;
  color: #333;
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.3em; }
  body .fade-in {
    transition: opacity 2s;
    -moz-transition: opacity 2;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s; }
  body .fade-in02 {
    transition: opacity 3s;
    -moz-transition: opacity 3;
    -webkit-transition: opacity 3s;
    -o-transition: opacity 3s; }
  body a {
    transition: 0.6s; }
  body a:hover, body a:link, body a:visited {
    color: #333; }
  body img:hover {
    transition: 0.6s;
    opacity: 0.4; }
  body ::selection {
    background: #000;
    color: #FFF; }
  body ::-moz-selection {
    background: #000;
    color: #FFF; }
  body header {
    padding: 270px 0 0 0;
    width: 100%;
    height: 400px;
    background: url(../img/bg_hddr.png) top center repeat-x;
    text-align: center; }
    body header .undrscrll {
      height: 60px;
      text-align: center; }
    body header .rubyscroll_bar {
      width: 2px;
      height: 80px;
      background-color: #fff;
      border-radius: 0;
      text-align: center;
      display: inline-block; }
    body header .rubyscroll {
      width: 2px;
      height: 20px;
      border-radius: 0;
      background-color: #333;
      animation-name: scroll;
      animation-duration: 2s;
      animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
      animation-iteration-count: infinite; }
@keyframes scroll {
  0% {
    opacity: 0; }
  10% {
    transform: translateY(5px);
    opacity: 0.2; }
  20% {
    transform: translateY(10px);
    opacity: 1; }
  90% {
    transform: translateY(55px);
    opacity: 1; }
  100% {
    transform: translateY(55px);
    opacity: 0.2; } }
    body header .rubyscroll_txt {
      color: #333;
      font-size: 0.5em;
      letter-spacing: 0.3em; }
    body header h1 {
      margin: 0 0 150px 0;
      text-align: center; }
      body header h1 span {
        display: block;
        font-size: 0.8em;
        font-style: italic;
        font-weight: 300;
        letter-spacing: 0em; }
      body header h1 img {
        width: 35%;
        padding: 0 0 2% 0; }
  body h2 {
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 15px;
    border-bottom: 1px solid #999;
    letter-spacing: 0.2em;
    line-height: 1.5em; }
  body section#work {
    width: 100%;
    padding: 90px 0;
    display: flex; }
    body section#work section {
      width: 50%; }
    body section#work .left img {
      width: 100%; }
    body section#work .right {
      text-align: center;
      display: table; }
      body section#work .right div {
        padding: 47% 0;
        display: table-cell;
        vertical-align: middle; }
        body section#work .right div p {
          display: inline-block; }
          body section#work .right div p a {
            margin: 30px 0;
            width: 90px;
            font-size: 13px;
            text-align: left;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            display: inline-block;
            background: url(../img/ico_arrow.png) 85% top no-repeat; }
            body section#work .right div p a:hover {
              background: url(../img/ico_arrow.png) 100% top no-repeat; }
  body section#prof {
    text-align: center;
    width: 100%;
    margin: 0 auto; }
    body section#prof h2 {
      border: none; }
    body section#prof div {
      padding: 80px 0 80px 0;
      width: 100%;
      display: flex; }
      body section#prof div .right {
        width: 60%;
        padding: 0 3%; }
      body section#prof div .left {
        width: 40%;
        padding: 0 3%; }
      body section#prof div section {
        text-align: left; }
        body section#prof div section dt {
          border-bottom: 1px solid #b2b2b2;
          margin-bottom: 30px;
          padding-bottom: 30px;
          display: inline-block; }
        body section#prof div section dd {
          font-size: 0.9em;
          margin-bottom: 4%;
          line-height: 1.7em; }
          body section#prof div section dd .add {
            color: #666;
            margin-top: 10%;
            padding: 2%;
            background: #fbfbfb;
            display: block; }
  body section#prof.works.index div#workWrap {
    flex-wrap: wrap; }
    body section#prof.works.index div#workWrap .center {
      width: 40%;
      padding: 0 5% 10% 2%; }
    body section#prof.works.index div#workWrap .left {
      width: 40%;
      padding: 0 5% 10% 5%; }
      body section#prof.works.index div#workWrap .left img {
        width: 100%; }
  body section#prof.works {
    padding: 15% 0 5% 0;
    font-size: 0.8em; }
    body section#prof.works div .center {
      width: 40%;
      padding: 0 3%; }
    body section#prof.works div .left {
      width: 40%;
      padding: 0 3%; }
    body section#prof.works div section dl {
      margin-bottom: 50px; }
    body section#prof.works div section dt {
      border-bottom: 1px solid #b2b2b2;
      margin-bottom: 25px;
      padding-bottom: 25px;
      display: inline-block; }
    body section#prof.works div section dd span {
      float: left;
      width: 10em;
      display: block; }
    body section#prof.works .pic img {
      margin-bottom: 70px; }
  body section#contact {
    margin: 0 auto;
    padding: 250px 0;
    width: 100%;
    text-align: center; }
    body section#contact a {
      padding: 20px 0;
      margin: 0 0 40px 0;
      width: 190px;
      font-size: 13px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      display: inline-block;
      border-top: 1px solid #b2b2b2;
      border-bottom: 1px solid #b2b2b2;
      background: url(../img/ico_arrow.png) 85% 48% no-repeat; }
      body section#contact a:hover {
        background: url(../img/ico_arrow.png) 90% 48% no-repeat; }
    body section#contact .br {
      display: none; }
  body footer {
    width: 100%;
    margin: 0 auto;
    padding: 50px 0;
    border-top: 1px solid #b2b2b2;
    text-align: center;
    font-size: 12px; }
    body footer p {
      margin-bottom: 30px; }
  @media screen and (max-width: 750px) {
    body header {
      padding: 60% 0 30% 0;
      height: 100%; }
      body header h1 {
        margin: 0 0 40% 0; }
        body header h1 img {
          width: 70%;
          padding: 0 0 5% 0; }
    body section#work {
      display: block;
      padding: 60px 0; }
      body section#work section {
        width: 100%; }
      body section#work .right div {
        padding: 19% 0; }
    body section#prof div {
      padding: 80px 0 0 0;
      display: block; }
      body section#prof div .left, body section#prof div .right {
        width: 100%;
        padding: 0; }
      body section#prof div section {
        margin-bottom: 20%; }
        body section#prof div section dd {
          line-height: 1.8em;
          margin-bottom: 4%; }
    body section#prof.works.index div#workWrap {
      flex-wrap: wrap;
      padding: 10% 0 0 0; }
      body section#prof.works.index div#workWrap .center {
        width: 100%;
        padding: 0 0 10% 0; }
        body section#prof.works.index div#workWrap .center dl dt {
          width: 100%; }
      body section#prof.works.index div#workWrap .left {
        width: 100%;
        padding: 0 0 5% 0; }
        body section#prof.works.index div#workWrap .left img {
          width: 100%; }
    body section#contact {
      padding: 30% 0; }
      body section#contact .br {
        display: inherit; }
    body .pagetop {
      bottom: 0;
      right: 0; }
    body section#prof.works div {
      flex-wrap: wrap; }
      body section#prof.works div .center {
        width: 55%;
        padding: 0 3%; }
      body section#prof.works div .left {
        width: 25%;
        padding: 0 3%; } }