@charset "UTF-8";
/* CSS Document */
.pc { display: block;}
.sp { display: none;}

/* ローディングアニメーション */
#loading {
width: 100%;
height: 100%;
margin: 0;
background: #fff;
background-image: url(../img/loading.gif);
background-repeat: no-repeat;
background-position: center;
background-size: 50px;
opacity: 1;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
}

/* ナビゲーションまわり */
#nav_btn {
position: fixed;
width:40px;
height:40px;
top:40px;
right:40px;
background-image: url(../img/nav_btn.svg);
z-index: 9999;
animation: nav_btn 0.7s steps(9) infinite;
cursor: pointer;
}

@keyframes nav_btn {
  0% { background-position: 0px 0px; }
  100% { background-position: 0px -360px; }
}

.nav_btn:hover {
animation: nav_btn_hover 0.2s steps(2) forwards;
}

@keyframes nav_btn_hover {
  0% { background-position: 0px -400px; }
  100% { background-position: 0px -480px; }
}

#nav_btn.active {
animation: nav_btn_active 0.3s steps(7) forwards;
}

@keyframes nav_btn_active {
  0% { background-position: 0px -480px; }
  100% { background-position: 0px -760px; }
}
#global_menu {
display: none;
position: fixed;
width:calc(100% - 40px);
height:calc(100% - 40px);
top:20px;
left:20px;
background: rgba(250,200,88,1.0);
vertical-align: middle;
z-index: 9998;
font-size: 120%;
}
#global_menu.active {
display: block;
}
.global_menu_container {
position: relative;
width:28em;
left:calc(50% - 28em/2);
top:calc(50% - 50%/2);
}
.global_menu_container ul {
}
.global_menu_container li {
margin: 1em 0 1em 0;
background-image: url(../img/global_menu_line.svg);
background-repeat: repeat-x;
background-size: 10px;
background-position: center;
}
.menu_en {
display: inline-block;
background: rgba(250,200,88,1.0);
padding-right: 1em;
letter-spacing: 1px;
}

.menu_ja {
display: inline-block;
position: absolute;
right: 0;
font-size: 80%;
background: rgba(250,200,88,1.0);
padding-left: 1em;
}

/* section 01　*/
#sec01 {
position: absolute;
width:100%;
height:80vh;
}

.main_title {
position: relative;
width:300px;
height:75px;
top:calc(51% - 75px/2);
left:calc(50% - 300px/2);
background-image: url(../img/cre8orboi_logo.svg);
background-repeat: no-repeat;
background-position: 0 -2250px;
background-size: 100%;
z-index: 1;
animation: main_logo 1.1s steps(30) 0.5s forwards;
}

@keyframes main_logo {
  0% { background-position: 0px -2250px;}
  100% { background-position: 0px 0px;}
}

/* Wrapper */
#wrapper {
position: absolute;
top: 80vh;
width:100%;
}

.sec_yellow {
width:100%;
height:auto;
padding:0 0 20vh 0;
background-color: rgba(250,200,88,1.0);
transform: skew(0,-5deg);
}

.sec_yellow_inner {
width:75.8%;
height:auto;
margin: 0 12.1%;
transform: skew(0,5deg);
}

.sec_yellow_rev {
width:100%;
height:auto;
padding:0 0 20vh 0;
background-color: rgba(250,200,88,1.0);
transform: skew(0,5deg);
}

.sec_yellow_inner_rev {
width:75.8%;
height:auto;
margin: 0 12.1%;
transform: skew(0,-5deg);
}

.sec_white {
width:100%;
height:auto;
padding:0 0 20vh 0;
background-color: rgba(255,255,255,1.0);
}

.sec_white_inner {
width:75.8%;
height:auto;
margin: 0 12.1%;
}

.titles {
width:200px;
height:150px;
margin: 0 auto 10vh auto;
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
}

.intro {background-image: url(../img/titles_intro.svg);}
.purpose {background-image: url(../img/titles_purpose.svg);}
.works {background-image: url(../img/titles_works.svg);}
.about {background-image: url(../img/titles_about.svg); margin: 0 auto 0 auto;}

.sec_yellow h1 {
font-size: 150%;
text-align: center;
}

.sec_yellow h2 {
width:100%;
margin-top:50px; 
text-align: center;
}

.grid {letter-spacing: -0.5em;}

.grid_33 {
display: inline-block;
width:30%;
margin-right: 5%;
letter-spacing: normal;
opacity: 0;
}

.grid_33:last-child {
margin-right: 0;
}

.sec_white h3 {
font-size: 150%;
text-align: center;
}

.sec_white h4 {
margin-top: 10vh;
}

.sec_title {
font-size: 150%;
text-align: center;
}

#photo_slider figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
#photo_slider figure .transform01 {
  transform: scale(1);
  transition: all .3s ease-in-out;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
#photo_slider figure:hover .transform01 {
  transform: scale(1.2);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
#photo_slider figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  transition: .4s;
  opacity: 0;
  color:#fff;
}
#photo_slider figcaption h3,
#photo_slider figcaption p {
  position: absolute;
  left: 0;
  width: 80%;
  padding: 1vh 10%;
  font-size: 90%;
  text-align: center;
  transition: .4s;
  }
#photo_slider figcaption h3 {top: 1em; letter-spacing: 0.2em;}
#photo_slider figure:hover figcaption h3{top: 2.5em;}

#photo_slider figcaption p {bottom: 1em; font-size: 90%;}
#photo_slider figure:hover figcaption p{bottom: 2.5em;}

#photo_slider figure:hover figcaption {
  opacity: 1;
}
#photo_slider figure .line {
position: absolute;
top:50%;
left:calc(50% - 30px/2);
width:30px;
height:1px;
background: #fff;
transition: .4s;
}
#photo_slider figure:hover .line {
width:88px;
left:calc(50% - 88px/2);
}

.box_half_left {
display: inline-block;
width:45%;
margin-right: 5%;
height:auto;
vertical-align: top;
}

.about_me {
width:60%;
margin: 7vh auto 10vh auto;
}

.box_half_right {
display: inline-block;
width:45%;
margin-left: 5%;
height:auto;
vertical-align: top;
}

.tokyo_nagoya {
background-image: url(../img/tokyo_nagoya.svg);
background-size: contain;
background-repeat: no-repeat;
}

ul li .left{ display: inline-block; width:8em; vertical-align: top;}
ul li .right{ display: inline-block; width:calc(100% - 8em); vertical-align: top;}
.underline {
padding:0 0 10px 0;
margin:0 0 10px 0;
border-bottom: solid 1px #ccc;
}

/** mailform **/
.form-inline {display: inline-block;}
input, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:solid 1px #ccc; padding:1%;}
input:focus, textarea:focus { background-color:rgba(255,255,255,0.50); font-size: 13px; font-family: "Mplus 1p"; color: #333;}
button, submit { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none;}
button:hover, submit:hover { background-color:rgba(50,150,50,1.0); transition: 0.3s ease-in-out;}
.form_left { width:30%; height:3em; padding-top:1em; text-align:left;}
.form_right { width:69%; height:3em; padding-top:1em; text-align:left;}
.submit_btn { background-color:rgba(137,192,84,1.00); padding:0.5em 1em; color:#FFF; margin-left:0; cursor:pointer;}
.submit_btn:active { background-color:rgba(0,120,0,0.80);}
.reset_btn { background-color:#555; padding:0.5em 1em; color:#FFF; margin-left:1em; cursor:pointer;}
.reset_btn:active { background-color:#333;}
.font { font-size: 13px; font-family: "Mplus 1p"; color: #333;}
.form_left_end { width:30%; height:auto; padding-top:1em; text-align:left; float:left;}
.form_right_end { width:69%; height:auto; padding-top:1em; text-align:left; float:left;}
.hissu { font-size:80%; color:rgba(120,0,0,1.00); vertical-align:top;}
.nini { font-size:80%; color:rgba(0,120,0,1.00); vertical-align:top;}
.textarea { width:98% !important; height:15em; border-color:#ccc; font-size: 13px; font-family: "Mplus 1p"; color: #333;}
.textarea:focus { background-color:rgba(255,255,255,0.50);}
.input { width:98% !important; border-color:#ccc; font-size: 13px; font-family: "Mplus 1p"; color: #333;}
.input:focus { background-color:rgba(255,255,255,0.50);}
.dot_1px { position: relative; clear:both; width:100%; height:1px; border-bottom:dotted 1px rgba(88,55,55,1.00); margin: 2em 0;}


/*** submit_button ***/
.submit_button {
border: 1px solid rgba(0,120,0,1.00);
background: #6aa436;
background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436));
background: -webkit-linear-gradient(top, #8dc059, #6aa436);
background: -moz-linear-gradient(top, #8dc059, #6aa436);
background: -ms-linear-gradient(top, #8dc059, #6aa436);
background: -o-linear-gradient(top, #8dc059, #6aa436);
background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%);
border-radius: 8px;
color: #385e0f;
text-decoration: none;
cursor:pointer;
}
.submit_button:hover {
border: 1px solid rgba(0,120,0,1.00);
background: #6aa436;
background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436));
background: -webkit-linear-gradient(top, #8dc059, #6aa436);
background: -moz-linear-gradient(top, #8dc059, #6aa436);
background: -ms-linear-gradient(top, #8dc059, #6aa436);
background: -o-linear-gradient(top, #8dc059, #6aa436);
background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%);
color: #FFF;
}
.submit_button:active {
background: #8dc059;
}

.studio_bg {
width: 100%;
height:70vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../img/cre8orboi_studio.jpg");
}

footer {
clear: both;
width:84%;
height:auto;
padding:55px 8% 55px 8%;
background: #555;
}

.footer_logo {
width:200px;
height:40px;
background-image: url(../img/cre8orboi_logo_white.svg);
background-repeat: no-repeat;
background-size: contain;
}


/* アニメーション */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 35px, 0);
    transform: translate3d(0, 35px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 35px, 0);
    transform: translate3d(0, 35px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.inview {
opacity: 0;
}