@charset "UTF-8";

/* --- base --- */

html {
  font-size: 62.5%;
}

body {
  background: #151515 url('../images/bg.jpg') no-repeat fixed left bottom;
  background-size: cover;
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  font-family: Lato, "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}


/* --- parts --- */

.heading {
  position: relative;
  display: inline-block;
  margin: 30px 0 50px;
  padding-bottom: 10px;
  letter-spacing: 2px;
  font-size: 4rem;
}
.heading::before{
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #999;
}

.heading2 {
  position: relative;
  display: inline-block;
  margin: 80px 0 10px;
  padding-bottom: 10px;
  letter-spacing: 2px;
  font-size: 4rem;
}
.heading2::before{
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.js-scroll-fade {
  position: relative;
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 2s cubic-bezier(0.155, 0.91, 0.695, 0.95);
}
.js-scroll-fade.is-animation {
  opacity: 1;
  transform: translate(0, 0);
}
.button {
  display: inline-block;
  width: 200px;
  padding: 20px;
  border-radius: 4px;
  border: solid 1px #afafaf;
  background-color: rgba(50, 50, 50, 0.4);
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 1.2rem;
}
.button:hover {
  opacity: 0.7;
}
.button-showy {
	border: solid 1px #afafaf;
  background-color: rgba(50, 50, 50, 0.4);
}
.button-ghost {
	border: solid 1px #afafaf;
  background-color: rgba(50, 50, 50, 0.4);
}
.button-circle {
	display: inline-block;
	text-decoration: none;
  	color: #fff;
  	width: 43px;
  	height: 43px;
  	font-size: 3rem;
  	line-height: 110%;
  	margin: 30px;
  	border-radius: 50%;
  	border: solid 1px #fff;
  	text-align: center;
  	background-color: rgba(50, 50, 50, 0.4);
}

.button-circle::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    margin-bottom: 3px;
    margin-right: 5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(-45deg);
}
.button-circle:hover {
  opacity: 0.7;
}
/*  --- header --- */

.header {
  padding: 170px 30px 80px;
}
.site-title-sub {
  margin: 0 0 30px;
  letter-spacing: 1px;
  font-size: 1.7rem;
}
.site-title-sub::before,
.site-title-sub::after {
  display: inline-block;
  width: 140px;
  height: 2px;
  margin: 0 30px;
  background-color: #fff;
  vertical-align: middle;
}
.site-title {
  margin: 50px 0 80px;
  font-size: 5rem;
}
.site-description {
  margin-bottom: 50px;
  color: #e1e1e1;
  font-size: 1.6rem;
}
.buttons .button {
  margin: 10px;
}


/* --- about --- */

.about {
  padding: 80px 30px;
  background-color: #fff;
  color: #333;
}
.about-text {
  margin: 60px 0;
  line-height: 2.5;
}
.about-icon {
  font-size: 2.1rem;
  color: #CCC;
  margin: 5px 0 120px;
  line-height: 1.5;
}
.about-icon img{
  margin: 5px 10px;
}

h3 {
	font-size: 1.5rem;
	margin-top: 50px;
	margin-bottom: 20px;
	font-weight: normal;
}

ul.list {
  margin: 30px 0;
  line-height: 2.5;
  list-style: none;
  padding-left: 0;
}



/* --- works --- */

.works {
  padding: 80px 0;
  background-color: #383634;
}
.works-wrapper {
  display: table;
  width: 100%;
  margin-top: 0px;
  table-layout: fixed;
}
.work-box {
  position: relative;
  display: table-cell;
  height: 240px;
}
.work-text {
  position: relative;
  display: fixed;
  top: 35%;
  font-size: 1.2rem;
  line-height: 2;
}
.work-text .button {
  width: 50%;
  margin-top: 20px;
  padding: 3px;
}
.work-box.cont01,
.work-box.cont01::after {
  background-image: url('../images/movie01_banner.jpg');
}
.work-box.cont02,
.work-box.cont02::after {
  background-image: url('../images/mocap01_banner.jpg');
}
.work-box.cont03, 
.work-box.cont03::after {
  background-image: url('../images//hokusai01_banner.jpg');
}
.work-box.cont04, 
.work-box.cont04::after {
  background-image: url('../images/workshop01_banner.jpg');
}
.work-box.cont05, 
.work-box.cont05::after {
  background-image: url('../images/movie05_banner.jpg');
}
.work-box.cont06, 
.work-box.cont06::after {
  background-image: url('../images/paradisejam2018_banner.jpg');
}
.work-box.cont07, 
.work-box.cont07::after {
  background-image: url('../images/webiot2018_banner.jpg');
}
.work-box.cont08, 
.work-box.cont08::after {
  background-image: url('../images/interview01_banner.jpg');
}
.work-box.cont09, 
.work-box.cont09::after {
  background-image: url('../images/gakubu2019_banner.jpg');
}
.work-box.cont10, 
.work-box.cont10::after {
  background-image: url('../images/drawing_banner.jpg');
}
.work-box.cont11, 
.work-box.cont11::after {
  background-image: url('../images/designwork_banner.jpg');
}
.work-box.cont12, 
.work-box.cont12::after {
  background-image: url('../images/sanjyoweb_banner.jpg');
}
.work-box.cont13, 
.work-box.cont13::after {
  background-image: url('../images/studyvr_banner.jpg');
}
.work-box.cont14, 
.work-box.cont14::after {
  background-image: url('../images/okiuinterview_banner.jpg');
}
.work-box.cont15, 
.work-box.cont15::after {
  background-image: url('../images/uefest2019_banner.jpg');
}
.work-box.cont16, 
.work-box.cont16::after {
  background-image: url('../images/digitaleizou2019b_banner.jpg');
}
.work-box.cont17, 
.work-box.cont17::after {
  background-image: url('../images/game2020_banner.jpg');
}
.work-box.cont18, 
.work-box.cont18::after {
  background-image: url('../images/grad2020_banner.jpg');
}
.work-box.cont19, 
.work-box.cont19::after {
  background-image: url('../images/photocon2020_banner.jpg');
}
.work-box.cont20, 
.work-box.cont20::after {
  background-image: url('../images/cgarts2020_banner.jpg');
}
.work-box.cont21, 
.work-box.cont21::after {
  background-image: url('../images/jagdaposter2021_banner.jpg');
}
.work-box.cont22, 
.work-box.cont22::after {
  background-image: url('../images/semiexibition2021_banner.jpg');
}
.work-box.cont23, 
.work-box.cont23::after {
  background-image: url('../images/digitaleizou2021_banner.jpg');
}
.work-box.cont24, 
.work-box.cont24::after {
  background-image: url('../images/interview02_banner.jpg');
}
.work-box::before {
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

/* --- profile --- */

.profile {
  padding: 80px 0;
  background-color: #fff;
  color: #333;
}
.profile-wrapper {
  display: table;
  width: 80%;
  margin: 50px auto 0;
  table-layout: fixed;
}
.profile-box {
	display: table-cell;
}
.profile-title {
  position: relative;
  display: inline-block;
  margin: 0 20px 20px;
  padding-bottom: 10px;
  font-size: 2rem;
}
.profile-title::before{
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #999;
}
.profile-text {
  margin: 0;
  line-height: 2;
}


/* --- contact --- */

.contact {
  padding: 80px 0 150px;
}

/* --- footer --- */

.footer {
  padding: 12px 0;
  font-size: 1.3rem;
}


/* --- smart phone --- */

@media (max-width: 1024px) {
  body {
    background-image: none;
  }
}
@media (max-width: 768px) {
  body {
    font-size: 1.3rem;
  }
  .heading {
    margin-top: 20px;
    font-size: 2.5rem;
  }
   .heading2 {
    margin-top: 20px;
    font-size: 2.5rem;
  }
  .button:hover {
    opacity: 1;
  }

  /* --- header --- */
  .header {
    padding-top: 60px;
  }
  .site-title-sub {
    font-size: 1.7rem;
  }
  .site-title-sub::before,
  .site-title-sub::after {
    display: block;
    width: 80%;
    margin: 10px auto;
  }
  .site-title {
    margin-top: 35px;
    font-size: 5rem;
  }

  /* --- about --- */
  .about-text {
    line-height: 2.3;
  }
  .about-icon {
	font-size: 1.7rem;
  margin: 5px 0 80px;
}

  /* --- works --- */
  .works-wrapper,
  .work-box {
    display: block;
	overflow: hidden;
  }
  .work-box {
	background-size: cover;
	height: 200px;
	margin: 0px;
  }
  .work-text {
  top: 20%;
}
.work-text .button {
  width: 45%;
  margin-top: 20px;
  padding: 3px;
}

  /* --- profile --- */
  .profile-wrapper,
  .profile-box {
    display: block;
  }
  .profile-box {
    margin: 30px 0 70px;
  }
  .profile-text {
    margin: 0;
  }

  /* --- contact --- */
  .contact {
    padding-bottom: 80px;
  }
  .contact-form {
    width: 80%;
  }
}