@charset "UTF-8";

#toppage #firstView {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: row;
  z-index: 99;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.25);
}


#toppage .message {
  color: #FFF;
}
#toppage .message h1, #toppage .message h2 {
  color: #FFF;
  width: 100%;
}
#toppage .message h1 {
  font-size: 3.6rem;
  letter-spacing: 0.1rem;
}
#toppage .message h2 {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 0.4rem;
}

#toppage h2.logo {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 7.5%;
  z-index: 99;
}

#toppage #firstView a img {
  transition: 0.6s;
}

#toppage #firstView a img:hover {
  opacity: 0.6;
}





.contentsWraper {
  display: flex;
  flex-wrap: wrap;
}

.contentsWraper .aboutWraper {
  width: 30%;
  background-color: #FFF;
  border-right: solid 1px #000;
  display: flex;
  flex-wrap: wrap;
}

.contentsWraper .businessWraper {
  width: 30%;
  background-color: #FFF;
  border-right: solid 1px #000;
  display: flex;
  flex-wrap: wrap;
}

.contentsWraper .worksWraper {
  width: 40%;
  background-color: #FFF;
}



.contentsWraper .worksWraper {
  position: relative;
  max-height: 125vh;
  overflow-y: scroll;
}
.contentsWraper .worksWraper .contentTitle {
  position: absolute;
  z-index: 10;
}


.contentsWraper .worksList {
  position: relative;
}
.contentsWraper .worksList .contentTitle {
  position: absolute;
  top:0;
  left: 0;
  z-index: 10;
}



.contentsWraper .contentTitle {
  width: 10%;
}
.contentsWraper .contentTitle h3 {
  background: #000;
  padding: 16px 8px;
  writing-mode: vertical-rl;
  color: #FFF;
  height: 200px;
  width: 32px;
  overflow: hidden;
  font-family: 'HelveticaLTWXX-Bold';
}


.contentsWraper .content {
  width: 90%;
  padding-bottom: 20%;
}
.contentsWraper .content .contentInner {
  padding: 20% 10% 0 5% ;
}
.contentsWraper .content .contentInner h4 {
  margin-bottom: 1.5rem;
  font-family: 'HelveticaLTWXX-Bold';
}
.contentsWraper .content .contentInner h4 span {
  font-size: 1.6rem;
  letter-spacing: 0;
  border-bottom: solid 3px #000 ;
  padding-bottom: 6px;
}

.contentsWraper .content .contentInner h5 {
  padding: 0.5rem 0;
  margin-bottom: 0.25rem;
  font-family: 'HelveticaLTWXX-Bold';
}
.contentsWraper .content .contentInner h5 span {
  font-size: 0.8rem;
}


.contentsWraper .comInfo {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 0.8rem;
}
.contentsWraper .comInfo dt {
  width: 30%;
  padding: 8px 0 ;
}
.contentsWraper .comInfo dd {
  width: 70%;
  padding: 8px 0 ;
}

.contentsWraper .profileTxt {
  padding: 5% 0 ;
}
.contentsWraper .profileTxt p {
  margin-bottom: 0.5rem;
}

.portrait {
  width: 100%;
  min-height: 300px;
  background: url("/images/self-portrait.jpg") no-repeat bottom ;
  background-size: cover;
}


.contentsWraper .txt-branding {
  font-size: 3rem;
  letter-spacing: -1px;
  line-height: 0.5;
  padding-top: 10px !important;
}
.contentsWraper .txt-branding span {
  font-size: 1rem !important;
}

.contentsWraper .txt-web {
  font-size: 2.4rem;
  letter-spacing: -1px;
  line-height: 1.1;
  padding-top: 50px !important;
}
.contentsWraper .txt-branding span {
  font-size: 1rem !important;
}


.contentsWraper .speciarityTxt {
  padding: 4% 0 ;
}
.contentsWraper .speciarityTxt p {
  margin-bottom: 0.5rem;
  line-height: 1.8;
}


.contentsWraper .worksWraper .graphic li img {
  width: 100%;
}
.contentsWraper .worksWraper .graphic li img {
  width: 100%;
}



.contentsWraper .worksList {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: -150px;
}
.contentsWraper .worksList .work {
  width: 50%;
  position: relative;
  overflow: hidden;
}
.contentsWraper .worksList .work img {
  width: 100%;
  transition: 0.4s;
}
.contentsWraper .worksList .work:hover img {
  filter: brightness(40%) blur(2px) ;
  transform: scale(1.05);
}

.contentsWraper .worksList .work .workInfo {
  opacity: 0;
  color: rgba(255,255,255,1);
  position: absolute;
  bottom:0px;
  padding: 60px;
}
.contentsWraper .worksList .work:hover .workInfo {
  opacity: 1;
  transition: 0.4s;
}
.contentsWraper .worksList .work .workInfo h4 {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  border-bottom: solid 3px #FFF;
  padding: 8px 0;
}
.contentsWraper .worksList .work .workInfo p {
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  padding: 8px 0;
  font-weight: lighter;
}




#aniv {
  height: 100vh;
  width: 100%;
  background-color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact {
  height: 100vh;
  width: 100%;
  background-color: #000;
}


footer {
  background: #333;
}

footer p {
  text-align: center;
  padding: 16px;
  color: #666;
  font-family: 'HelveticaLTWXX-Bold';
}



.visible, .invisible {
  opacity: 0.0;
  transition: opacity 0.5s ease;
}
.visible {
  opacity: 1.0;
}
.visible.work,.invisible.work {
  transform: translateY(150px);
  transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.work {
  transform: translateY(0);
}




#contact {
  width: 100%;
  height: 95vh;
  background: linear-gradient(to bottom, #333, #222);
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact h3 {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 3.6rem;
  letter-spacing: 2px;
  color: #FFF;
  padding-bottom: 1rem ;
}

#contact  p.preface {
  color: #BBB;
  padding: 1rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.formWaper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contactForm input, .contactForm textarea {
  background: rgba(255,255,255,0);
  border-bottom: solid 1px rgba(255,255,255,0.5);
}

.contactForm li {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem
}
/*フォーカスしたらツールチップを表示させる
.contactForm li p {
  display: none;
}
.contactForm input:focus + p {
display: inline;
}
*/

.contactForm li:focus-within {
  background: #000;
  transition: 0.6s;
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
}
.contactForm li:focus-within label {
  color: #EEE;
}


.contactForm li label {
  width: 10rem;
  padding: 1rem 0;
  color: #999;
}
.contactForm li input {
  width: 20rem;
}
.contactForm li input, .contactForm li textarea {
  padding: 0.6rem;
  color: #EEE;
  transition: 0.6s;
}
.contactForm li input:focus, .contactForm li textarea:focus {
  background: #AAA;
  color: #333;
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
}

.contactForm li input:valid, .contactForm li textarea:valid {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid 1px rgba(255,255,255,0.25);
  letter-spacing: 0.1rem;
}

.contactForm li textarea {
  width: 20rem;
  padding: 0.6rem;
}

::placeholder {
  color: #555;
}


.privacypolicy {
  text-align: center;
  padding: 2rem 0 2rem;
  margin-bottom: 1rem;
}
.privacypolicy label {
  padding: 1rem;
  color: #888;
}
.privacypolicy label a {
  padding: 0 0.25rem 0.25rem 0;
  color: #AAA;
  border-bottom: solid 1px rgba(255,255,255,0.5);
  transition: 0.6s;
}
.privacypolicy label a:hover {
  color: #EEE;
  border-bottom: solid 1px rgba(255,255,255,0.75);
}

.form_btn{
  border: solid 1px rgba(255,255,255,0.75);
  color: #fff;
  width: 50%;
  display: block;
  margin: auto;
  padding: 1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all .5s ease-out;
  position: relative;
  text-align: center;
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
  background-color: rgba(255,255,255,0.75);
}

.form_btn:hover{
  background: #096C24;
  color: #FFF;
}
input[type="submit"][disabled] {
  background-color: transparent;
  color: #555;;
  border: solid 1px rgba(255,255,255,0.25);
  cursor: default;
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0);
}

input[type="submit"][disabled]:hover{
  opacity:1;
}






#thxMessage {
  transition: 0.6s;
}

#thxMessage h3 {
  font-size: 3.6rem !important;
}

#thxMessage .thx {
  font-weight: 900;
  font-size: 3.5em;
}

#thxMessage .thx .letter {
  display: inline-block;
  line-height: 1em;
}



#thxMessage.fadeup {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#thxMessage p {
  color: #CCC;
  text-align: center;
}




/* RESPONSIVE */
    @media screen and (max-width: 768px) {
      #toppage #firstView {
        position: absolute;
        top: 0;
        left: 0%;
        text-align: center;
        display: flex;
        z-index: 99;
      }
      #toppage #firstView h1 {
      }
    }