@charset "UTF-8";
/*------------------------------

Common

------------------------------*/
html {
  font-size: 62.5%;
  height: 100%; }

body {
  font-family: "Brown-Regular", "游ゴシック体", YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000000;
  height: 100%; }
  @media all and (min-width: 768px) {
    body {
      font-size: 1.6rem;
      line-height: 1.6;
      letter-spacing: 0.01rem; } }
  @media all and (max-width: 767px) {
    body {
      font-size: 1.2rem;
      line-height: 1.8;
      letter-spacing: 0.01rem; } }

/*::selection {
    background: $color-l-grey;
    color: #000000;
}

::-moz-selection {
    background: $color-l-grey;
    color: #000000;
}*/
#wrap {
  width: 100%;
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0; }

div, p, figure, figcaption {
  margin: 0;
  padding: 0; }

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

a {
  text-decoration: none; }

img {
  width: 100%;
  height: auto;
  display: block; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*------------------------------

Header

------------------------------*/
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  background-color: #FFFFFF; }
  header #header-inner {
    width: 100%;
    height: 50px; }
    header #header-inner #header-logo {
      height: 50px;
      line-height: 50px; }
      header #header-inner #header-logo a {
        color: #000000;
        -webkit-transition: all .2s ease;
        transition: all .2s ease; }
      header #header-inner #header-logo a:hover {
        color: #7E7E7E; }

/*------------------------------

Container

------------------------------*/
@media all and (min-width: 1024px) {
  .container {
    padding-left: 5.85652%;
    padding-right: 5.85652%; } }

@media all and (max-width: 1023px) {
  .container {
    padding-left: 20px;
    padding-right: 20px; } }

@media all and (min-width: 768px) {
  .narrow-container {
    padding-left: 21.96193%;
    padding-right: 21.96193%; } }

@media all and (max-width: 767px) {
  .narrow-container {
    padding-left: 20px;
    padding-right: 20px; } }

/*------------------------------

Profile Top

------------------------------*/
#c-container {
  padding-top: 60px;
  padding-bottom: 40px; }
  #c-container .c-top {
    position: relative;
    border-bottom: 1px solid #DADADA;
    padding-bottom: 15px; }
    #c-container .c-top .c-name {
      font-size: 2rem;
      line-height: 1.4; }
    #c-container .c-top .c-position {
      font-size: 1.2rem;
      line-height: 1.6;
      color: #7E7E7E; }
    #c-container .c-top .c-sns {
      font-size: 0;
      position: absolute;
      top: 0;
      right: 0; }
      #c-container .c-top .c-sns a {
        font-size: 1.2rem;
        line-height: 1.6;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        border-radius: 30px;
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #000000;
        color: #FFFFFF;
        margin-left: 5px; }
      #c-container .c-top .c-sns a {
        background-color: #000000;
        -webkit-transition: all .2s ease;
        transition: all .2s ease; }
      #c-container .c-top .c-sns a:hover {
        background-color: #7E7E7E; }

/*------------------------------

Images

------------------------------*/
/*.vi {
    display: block;
	overflow: hidden;
	position: relative;
    background-color: $color-v-grey;
    @include transition_long();
    
    img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 0;
        @include transition_long();

    }
    
    img.active {
        opacity: 1;
    }
    
}*/
.index {
  /*@include mq(over-tablet) {
        @include display-flex();
        @include flex-wrap(wrap);
    }*/ }
  .index #c-list .c-bottom .c-btn {
    border-bottom: 1px solid #DADADA; }
    .index #c-list .c-bottom .c-btn a {
      display: block;
      width: 100%;
      height: 50px;
      line-height: 50px; }
    .index #c-list .c-bottom .c-btn a div {
      color: #000000;
      -webkit-transition: all .2s ease;
      transition: all .2s ease; }
    .index #c-list .c-bottom .c-btn a:hover div {
      color: #7E7E7E; }
  .index #c-list .c-bottom .c-bottom-profile a {
    position: relative; }
    .index #c-list .c-bottom .c-bottom-profile a span {
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      width: 8px;
      height: 8px;
      border-top: 1px solid #7E7E7E;
      border-right: 1px solid #7E7E7E;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
      margin-top: 19px;
      margin-right: 10px; }
  .index #c-list .c-bottom .c-bottom-profile .c-profile-desc {
    display: none; }
    .index #c-list .c-bottom .c-bottom-profile .c-profile-desc div {
      padding-top: 10px;
      padding-bottom: 20px; }
  .index #c-list .c-bottom .c-bottom-works a {
    position: relative; }
    .index #c-list .c-bottom .c-bottom-works a span {
      position: absolute;
      top: 0;
      right: 0;
      color: #000000; }

.works #c-works #c-works-title {
  margin-top: 15px; }

.works #c-works #c-works-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 15px; }
  .works #c-works #c-works-list li {
    width: 48%;
    margin-right: 2%;
    margin-bottom: 4%; }
    .works #c-works #c-works-list li a img {
      -webkit-transition: all .2s ease;
      transition: all .2s ease; }
    .works #c-works #c-works-list li a:hover img {
      opacity: .8; }
  .works #c-works #c-works-list li:nth-child(2n) {
    margin-left: 2%;
    margin-right: 0; }

.works #c-works #c-contact {
  display: -webkit-flex;
  display: flex;
  margin-top: 6%; }
  .works #c-works #c-contact div {
    width: 48%;
    margin-right: 2%; }
    .works #c-works #c-contact div a {
      display: block;
      text-align: center;
      width: 100%;
      height: 50px;
      line-height: 48px;
      border: 1px solid #000000; }
    .works #c-works #c-contact div a {
      background-color: #000000;
      color: #FFFFFF;
      -webkit-transition: all .2s ease;
      transition: all .2s ease; }
    .works #c-works #c-contact div a:hover {
      background-color: #FFFFFF;
      color: #000000; }
  .works #c-works #c-contact div:nth-child(2n) {
    margin-left: 2%;
    margin-right: 0; }

.works #c-works #c-to-top {
  margin-top: 4%; }
  .works #c-works #c-to-top a {
    display: block;
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 48px;
    border: 1px solid #000000; }
  .works #c-works #c-to-top a {
    background-color: #FFFFFF;
    color: #000000;
    -webkit-transition: all .2s ease;
    transition: all .2s ease; }
  .works #c-works #c-to-top a:hover {
    background-color: #000000;
    color: #FFFFFF; }

.works_detail #c-works #c-works-title {
  margin-top: 15px; }

.works_detail #c-works #c-works-images {
  margin-top: 15px; }
  .works_detail #c-works #c-works-images li {
    margin-bottom: 4%; }
    .works_detail #c-works #c-works-images li video {
      display: block;
      background-color: #000000;
      width: 100%;
      height: auto; }
  .works_detail #c-works #c-works-images li:last-child {
    margin-bottom: 0; }

.works_detail #c-works #c-contact {
  display: -webkit-flex;
  display: flex;
  margin-top: 10%; }
  .works_detail #c-works #c-contact div {
    width: 48%;
    margin-right: 2%; }
    .works_detail #c-works #c-contact div a {
      display: block;
      text-align: center;
      width: 100%;
      height: 50px;
      line-height: 48px;
      border: 1px solid #000000; }
    .works_detail #c-works #c-contact div a {
      background-color: #000000;
      color: #FFFFFF;
      -webkit-transition: all .2s ease;
      transition: all .2s ease; }
    .works_detail #c-works #c-contact div a:hover {
      background-color: #FFFFFF;
      color: #000000; }
  .works_detail #c-works #c-contact div:nth-child(2n) {
    margin-left: 2%;
    margin-right: 0; }

.works_detail #c-works #c-to-top, .works_detail #c-works #c-to-projects {
  margin-top: 4%; }
  .works_detail #c-works #c-to-top a, .works_detail #c-works #c-to-projects a {
    display: block;
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 48px;
    border: 1px solid #000000; }
  .works_detail #c-works #c-to-top a, .works_detail #c-works #c-to-projects a {
    background-color: #FFFFFF;
    color: #000000;
    -webkit-transition: all .2s ease;
    transition: all .2s ease; }
  .works_detail #c-works #c-to-top a:hover, .works_detail #c-works #c-to-projects a:hover {
    background-color: #000000;
    color: #FFFFFF; }