@charset "UTF-8";

.title-page { margin-bottom: 92px; }

#profile { margin: 0 71px 66px; }

#profile::after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
}

#profile > * { float: left; }

#profile .thumbnail { margin-right: -358px; }

#profile .content {
  margin-left: 395px;
  font-size: 14px;
  line-height: 28px;
  color: #595757;
}

#profile .content h3 {
  font-size: 26px;
  line-height: 1;
  font-weight: normal;
  margin-bottom: 22px;
}

#design-consept {
  margin: 0 71px 54px;
  font-size: 14px;
  line-height: 34px;
  text-align: justify;
  color: #595757;
}

#design-consept h3 {
  text-align: center;
  margin-bottom: 33px;
}

#design-consept article { margin-bottom: 44px; }

#design-consept .signature {
  margin-bottom: 87px;
  text-align: center;
}

#works {
  text-align: center;
  border-top: 1px solid #b8b8b8;
  padding-top: 54px;
  margin-bottom: 100px;
}

#works h3 { margin-bottom: 26px; }

#works .thumbnail { margin-bottom: 0px; }

#works .thumbnail img { width: 100%; }



@media screen and (max-width: 768px) {
  
  .title-page { margin-bottom: 54px; }
  
  #profile { margin: 0 65px 72px; }
  
  #profile > * { float: none; }
  
  #profile .thumbnail {
    margin: 0 0 46px;
    text-align: center;
  }
  
  #profile .content {
    margin: 0;
  }
  
  #profile .content h3 { text-align: center;}
	
  #design-consept { margin: 0px 65px 54px; }
  
  #design-consept h3 { margin-bottom: 29px; }
  
  #design-consept article { margin-bottom: 40px; }
  
  #design-consept .signature { margin-bottom: 85px; }
  
  #works {
    padding-top: 44px;
    margin-bottom: 92px;
  }
  
  #works h3 { margin-bottom: 39px; }
  
  #works .thumbnail {
    margin-bottom: 43px;
    width: calc(100% + 64px);
    margin-left: -32px;
  }
  
  #works article > p { text-align: right; }
  
}


@media screen and (max-width: 640px) {
  
  .title-page { margin-bottom: 28px; }
  
  #profile { margin: 0 0 72px; }
  
  #profile .thumbnail {
    width: calc(100% + 48px);
    margin: 0 -24px 43px;
  }
  
  #profile .thumbnail img { max-width: 100%; }
  
  #profile .content h3 { margin-bottom: 25px; }
  
  #profile { margin-bottom: 54px; }
  
  #design-consept {
    margin: 0 0 54px;
    line-height: 29px;
  }
  
  #design-consept h3 { margin-bottom: 18px; }
  
  #design-consept article { margin-bottom: 46px; }
  
  #design-consept { margin-bottom: 60px; }
  
  #design-consept .signature {
    margin-bottom: 0px;
  }

  
  #works {
    padding-top: 37px;
    margin-bottom: 53px;
  }
  
  #works h3 { margin-bottom: 29px; }
  
  #works .thumbnail {
   width: calc(100% + 48px);
    margin-bottom: 24px;
    margin-left: -24px;
  }
  
  #works article > p { text-align: center; }
  
}