/* --------------------------------------------------------------------
 * snow project 3
 * 2018 Nov 7
 * -------------------------------------------------------------------- */
@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* --------------------------------------------------------------------
 * HTML5 display-role reset for older browsers
 * -------------------------------------------------------------------- */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.2rem;
}

ul, ol {
  padding-left: 0;
  list-style-position: inside;
}


a {
  text-decoration: none;
  color: #e99aab;
    font-weight: 700;
}

a:hover {
    color: #000;
    -o-transition: color 0.35s ease-in;
	-webkit-transition: color 0.35s ease-in;
	-moz-transition: color 0.35s ease-in;
	transition: color 0.35s ease-in;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
/* --------------------------------------------------------------------
 * debug 
 -------------------------------------------------------------------- */
.testBorder {
    border: solid green 0px;
}
/* --------------------------------------------------------------------
 * Genel
----------------------------------------------------------------------*/
body {
    background: #fff;
    margin: 0;
	padding: 0;
	font-family: Helvetica,Arial,sans-serif;
    color: #343434;
    line-height: 1.8;
}
.ovflw_hddn {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}
.boxHalf {
    width: 80%;
    height: 80%;
    position: relative;
    top: 150px;
}
.boxHalf > h1 {
/*    margin: -70px 0 0 200px;*/
    position: absolute;
    top: 40%;
    bottom: 40%;
    left: 22%;
}
.boxHalf > h3 {
    margin-top: 30px;
    padding: 0;
}
.boxHalf > p {
    width: 58%;
}
.boxHalfAbout {
    width: 4%;
    margin: 100px 0 0 0;
    float: right;
 }
.boxHalfAbout > h3 {
    margin: 20px 0 0 0;
    padding: 0;
    font-size: 2.8rem;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
 }
.boxHalfAbout > h4 {
    padding: 10px 0 0 0;
}
.boxHalfPortfolio {
    width: 48%;
    margin: 0 auto;
}
.floatLeft {
    float: left;
}
.floatRight {
    float: right;
}
.wrapper {
    width: 1300px;
    margin: 0 auto;
    padding: 0;
}
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}
.row {
	width: 100%;
}
.pstnCenter {
    margin: 0 auto;
}
.divFlex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
}
.divFlex2 {
    width: 1300px;
    display: flex;
    flex-wrap: wrap;
    margin: 50px auto;
    justify-content: center;
}
.logo {
    width: 8%;
    margin: 20px 0;
}
.behance {
    width: 5%;
    height: auto;
    margin: 0;
}
/* --------------------------------------------------------------------
 * logo animation
----------------------------------------------------------------------*/
 #logo_animation {
              width: 70%;
/*              height: 50%;*/
              position: relative;
              overflow: visible;
            }
/* --------------------------------------------------------------------
 * nav
----------------------------------------------------------------------*/
.behence {
    background-image: url(../img/behance.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: auto;
}
.logo2 {
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 48px;
    display: none;
}
#indexhero {
    background: url(../img/hero_image2.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
     background-attachment: fixed;
     background-color: #000;
/*    margin-top: -50px;*/
}
.navBox.scrolled {
    opacity: 1;
    transition: opacity 600ms linear;
}
.navBox, .navBox2 {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    opacity: 0;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.45);
    z-index: 999;
}
.navBox2 {
    opacity: 1;
 }
.navBox {
    opacity: 0;
 }
/*
.navBox {
    width: 100%;
    background: #fff;
}
*/
/*PC nav*/
header nav {
    float: right;
    margin-top: 5px;
}
header nav ul {
	display: flex;
	align-items: center;
	list-style-type: none;
}
header nav ul li a {
	color: #000;
	text-decoration: none;
	font-weight: bold;
	padding: 10px 20px;
}
header nav ul li a:hover {
	color: #e99aab;
}
#nav_toggle{
	display: none;
}
/* nav hover */
li a {
	display:block;
	text-decoration: none;
	text-transform: uppercase;
	color:#e99aab;
	position:relative;
}

li a:after{
	content:'';
	width:0%;
	transition:all 0.3s ease;
	left:50%;
}

li a:before{
	content:'';
	width:0%;
	transition:all 0.3s ease;
	left:50%;
}

li a:hover:after{
	content:'';
	position:absolute;
	bottom:0px;
	left:50%;
	background:#e99aab;
	height:3px;
	width:50%;
}

li a:hover:before{
	content:'';
	position:absolute;
	bottom:0px;
	left:0px;
	background:#e99aab;
	height:3px;
	width:50%;
}
.logo {
    width: 8%;
    margin: 10px 0 7px 0;
}
.behance {
    width: 5%;
    height: auto;
    margin: 0;
}
/* hr design with js */
.trans--grow {
  -webkit-transition: width 1s ease-out; /* For Safari 3.1 to 6.0 */
  transition: width 1s  ease-out;
  width : 0%;
}
.grow {
  width: 55%;
}
.hr1 {
  margin: 40px 0 0 0;
}
.hr2 {
  margin: 20px auto;
  width: 20%;
}
hr {
  margin-top: 20px;
  padding: 2px 0;
  border: none;
  background-color: #e99aab;
  letter-spacing: 5px;
}
/* hr design end */
/* scroll icon no js only css */
.container_scroll {
    position: relative;
    width: 24px;
    height: 24px;
    position: absolute;
    bottom: 5%;
    left: 50%;
}

.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

.text3 {
  display: block;
  margin-top: 35px;
  margin-left: -30px;
    margin-bottom: 30px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}
/* scroll icon design end */
/* --------------------------------------------------------------------
* index content
----------------------------------------------------------------------*/
.phoneSnow {
    display: none;
}
/* img grey to color */
.container_project img {
    /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
     /* filter: gray;  IE5+ */
       /*-webkit-filter: grayscale(1); Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .4s ease-in-out;  
    }
.container_project img:hover {
    filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.02);
    }
/* img grey to color end */
.container_project a {
  text-decoration: none;
 color: #000;
}

.container_project a:hover {
    color: #000;
    -o-transition: color 0.35s ease-in;
	-webkit-transition: color 0.35s ease-in;
	-moz-transition: color 0.35s ease-in;
	transition: color 0.35s ease-in;
}

.overlay p {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
}
.container_project {
    position: relative;
    width: 31.111%;
    margin: 10px;
    text-align: center;
}






.image {
  display: block;
  width: 100%;
  height: auto;
}
.tittle {
    position: relative;
    top: 250px;
}
#webdesignhero {
    background: url(../img/webdesign/hero-image.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}
#adsnhero {
    background: url(../img/adsdesign/hero-image.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}
#wordpress {
    background: url(../img/WordPress/hero-image.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}
#logo {
    background: url(../img/logo/hero-image.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}

#booth {
    background: url(../img/booth/hero-image.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}

#email {
    background: url(../img/email/hero-image.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}
#raijinhero {
    background: url(../img/hero_image2.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}
#hobbyhero {
    background: url(../img/hobby/hobby_hero.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}
#theatrehero {
    background: url(../img/theatre/theatre_hero.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}
#annualhero {
    background: url(../img/annual/annual_hero.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}
#spacehero {
    background: url(../img/spaceship/space_hero.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
}
#alomahero {
    background: url(../img/cinema/aloma_hero.jpg) no-repeat center;
    background-size: cover;
    height: 600px;
    margin-top: 5px;
}
.mrginTop {
    margin-top: 20px;
}
.mrginTop2 {
    margin-top: 80px;
}
.mrginTop3 {
    margin-top: 50px;
}
.boxWorks {
    width: 30%;
    margin-left: 10px;
}
.marginTB {
    margin: 60px auto;
}
.boxProject {
    width: 33%;
}
.divFlex img {
    width: 100%;
}
.divFlex img {
    width: 100%;
}
.yuko {
    margin: 0 30px 50px 0;
}
.yukoBox,.yukoBox2, .yukoBoxImg {
    width: 48%;
     margin: 50px 0 0 0;
}
.yukoBox2 {
    display: none;
}
.yukoBoxImg > img {
    width: 90%;
 }
.resume {
    margin: 30px 0 0 0;
    color: #000;
}
.resume:hover {
    color: #e99aab;
}
.resumeImage {
    width: 900px;
    margin: 0 auto;
}
.resumeImage img {
    margin: 80px auto;
     -webkit-box-shadow: -1px 10px 33px -12px rgba(0,0,0,0.62);
    -moz-box-shadow: -1px 10px 33px -12px rgba(0,0,0,0.62);
    box-shadow: -1px 10px 33px -12px rgba(0,0,0,0.62);
}
.kannji {
    margin: 30px 0;
}
/* --------------------------------------------------------------------
 * chart
----------------------------------------------------------------------*/
.graph-cont{
  width: calc(100% - 40px);
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
}
.bar{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: #000;
  padding: 0 0 0 10px;
  position: relative;
}
.bar::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: -2;
  background: #c2c2c2;
}
.bar::after{
  content: '';
  background: #e99aab;
  height: 30px;
  transition: 0.9s;
  display: block;
  width: 100%;
  -webkit-animation: bar-before 1 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.bar1::after{
  max-width: 95%;
}
.bar2::after{
  max-width: 95%;
}
.bar3::after{
  max-width: 30%;
}
.bar4::after{
  max-width: 35%;
}
.bar5::after{
  max-width: 50%;
}
.bar6::after{
  max-width: 80%;
}
.bar7::after{
  max-width: 70%;
}
.bar8::after{
  max-width: 90%;
}
.bar9::after{
  max-width: 75%;
}
.bar10::after{
  max-width: 100%;
}
.bar11::after{
  max-width: 100%;
}
.bar12::after{
  max-width: 50%;
}
.bar13::after{
  max-width: 75%;
}
.bar14::after{
  max-width: 25%;
}
.bar15::after{
  max-width: 80%;
}
.bar16::after{
  max-width: 65%;
}
.bar17::after{
  max-width: 40%;
}
@-webkit-keyframes bar-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.how-cont{
  width: calc(100% - 40px);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
code {
  padding: 5px;
  background: #ecf0f1;
  display: block;
}
pre{
  padding: 0;
  margin: 0;
}
.graph-cont h3 {
    padding: 30px 0 10px 0;
}
/* --------------------------------------------------------------------
 * return to top
----------------------------------------------------------------------*/
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 999;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}
i {
    position: relative;
    left: 20px;
    top: 13px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.up {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
}
/* --------------------------------------------------------------------
* portfolio page
----------------------------------------------------------------------*/
.prtflo {
    width: 100%;
    margin: 20px auto;
}
.prtfloMrgn {
    margin: 0 0 20px 0;
}
.prtflo_intro {
    width: 42%;
    margin-top: 20px;
}
.prtflo_intro2 {
    width: 100%;
    margin: 20px auto;
}
.divFlexPrtflo >.graph-cont {
    width: 42%;
    margin-top: 0px;
}
.divFlexPrtflo {
    width: 1300px;
    display: flex;
    flex-wrap: wrap;
    margin: 0px auto;
}
.boxPortfolio, .boxPortfolio2 {
    height: auto;
    border: 1px solid #e99aab;
    margin: 0 auto;
    padding: 10px;
}
.boxPortfolio {
    width: 30%;
}
.boxPortfolio2 {
    width: 90%;
}
.boxPortfolio:hover, .boxPortfolio2:hover {
    background: #e99aab;
     -o-transition: background 0.35s ease-in;
	-webkit-transition: background 0.35s ease-in;
	-moz-transition: background 0.35s ease-in;
	transition: background 0.35s ease-in;
}
.boxPortfolio > p, .boxPortfolio2 > p {
    text-align: center;
    margin-top: 6px;
}
.prtflo > a:hover {
    color: #fff;
}
.project > img {
    width: 100%;
}
/* --------------------------------------------------------------------
 * footer
----------------------------------------------------------------------*/
.sign_cntr {
    text-align: center;
}
.boxSign {
    width: 50%;
    margin: 0 auto;
    position: relative;
}
footer {
    width: 100%;
    height: 100%;
    background: #000;
    padding: 30px 0;
}
.box_address {
    width: 30%;
}
.margin_botm {
    margin-bottom: 40px;
}
.boxSns {
    width: 15%;
    margin-top: 30px;
}
.boxSns img {
    margin-right: 50px;
}
.boxSns img:hover {
    opacity: 0.5;
    -o-transition: opacity 0.35s ease-in;
	-webkit-transition: opacity 0.35s ease-in;
	-moz-transition:  opacity 0.35s ease-in;
	transition:  opacity 0.35s ease-in;
}



/* --------------------------------------------------------------------
 * Advanced Image Gallery
 * -------------------------------------------------------------------- */

/* The Image Box */
div.img {
    border: 1px solid #f7f7f7;
  }
  
  div.img:hover {
    background-color: #f7f7f7;
  }
  
  /* The Image */
  div.img img {
    width: 100%;
    height: auto;
    cursor: pointer;
  }
  
  /* Description of Image */
  div.desc {
    padding: 15px;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  /* Add Responsiveness */
  .responsive {
    padding: 0 6px;
    float: left;
    width: 33.3333333%;
  }
  .responsive50 {
    padding: 0 6px;
    float: left;
    width: 50%;
  }
  .responsive25 {
    padding: 0 6px;
    float: left;
    width: 25%;
  }
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top:30px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (image) */
  .modal-content {
    margin: auto;
    display: block;
    max-width: 100%;
  }
  
  /* Caption of Modal Image */
  #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 100%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }
  
  /* Add Animation */
  .modal-content, #caption {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0.1)} 
    to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Responsive Columns */
  @media only screen and (max-width: 700px){
    .responsive, .responsive50, .responsive25  {
      width: 49.99999%;
      margin: 6px 0;
    }

    .modal-content {
      width: 100%;
    }
  }
  
  @media only screen and (max-width: 500px){
    .responsive, .responsive50, .responsive25 {
      width: 100%;
    }
  }
  
  /* Clear Floats */
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }





/* --------------------------------------------------------------------
 * fonts
 * -------------------------------------------------------------------- */
h1 {
    font-family: 'Montserrat', sans-serif;
    font-family: 'Varela Round', sans-serif;
    font-size: 7rem; /* 11.2px */
    line-height: 110px;
    color: #000;
    font-weight: normal;
    margin-top: 30px;
}
.h1_2{
    font-family: 'Montserrat', sans-serif;
    font-family: 'Varela Round', sans-serif;
    font-size: 5rem; /* 11.2px */
    line-height: 110px;
    color: #000;
    font-weight: normal;
    margin-top: 30px;
}
h2 {
    font-family: 'robotoregular', sans-serif;
    font-size: 3.5rem; /* 56px */
    color: #000;
    line-height: 57px;
    font-weight: normal;
}
h3 {
    font-family: 'robotoregular', sans-serif;
    font-size: 2rem; /* 32px */
    color: #000;
    padding: 30px 0;
    font-weight: 100;
    line-height: 36px;
}
h4 {
    font-family: 'robotoregular', sans-serif;
    font-size: 1.2rem; /* 19.2 */
    color: #000;
    padding: 30px 0;
    font-weight: 100;
    line-height: 36px;
}
.text_center {
    text-align: center;
}
.text_center_read {
    text-align: center;
}
.text_right {
    text-align: right;
}
.font_white {
    color: #ffffff;
}
.font_pnk {
    color: #e99aab;
}
.font_pnk_dark {
    color: #A62642;
}

.font_nomal {
    font-weight: 100;
}
.textKatakana {
    font-size: 1.1rem; 
}
/* --------------------------------------------------------------------
 * contact form
 * -------------------------------------------------------------------- */

 
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }
  
  input[type=submit] {
    background-color: #000000;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #000000;
  }
  
  .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }
/* --------------------------------------------------------------------
* Media queries
----------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	.wrapper, .divFlex2,.divFlexPrtflo {
        width: 96%;
     }
/*
    .divFlex {
        width: 96%;
     }
*/
    #indexhero {
        margin-top: 0px;
    }
    .boxHalf {
        width: 65%;
        height: 65%;
        top: 150px;
        left: 20px;
    }
    .boxHalf > h1 {
        position: absolute;
        top: 35%;
        bottom: 40%;
        left: 22%;
    }
    .boxHalfAbout > h3 {
        margin: -150px 0 0 0;
    }
    .mrginTop {
        margin-top: 0px;
    }
    .graph-cont h3 {
        padding: 10px 0;
    }
    .mrginGrph {
        margin-top: 25px;
    }
    .divFlexPrtflo >.graph-cont {
        margin-top: 20px;
    }
    .boxHalfAbout {
        width: 10%;
        margin: 0;
     }
   }
@media screen and (max-width: 1386px) {
        .boxHalf > h1 {
            top: 30%;
            bottom: 40%;
            left: 20%;
            font-size: 6rem;
    }
    .boxHalf > p {
            width: 75%;
    }
}
@media screen and (max-width: 1280px) {
    .boxHalf > h1 {
            top: 29%;
     }
    .boxHalfAbout > h3 {
        margin: -40px 0 0 0;
    }
   }
@media screen and (max-width: 1181px) {
    .boxHalf {
        width: 70%;
        height: 70%;
    }
}
@media screen and (max-width: 1130px) {
    .boxHalf > h1 {
            top: 27%;
     }
}
@media screen and (max-width: 1094px) {
    .prtflo_intro {
        width: 55%;
        margin-top: 20px;
    }
    .divFlexPrtflo >.graph-cont {
        width: 35%;
    }
    .boxHalf {
        top: 80px;
    }
}
@media screen and (max-width: 1024px) {
   .container_project a {
          text-decoration: none;
         color: #000;
        }
    .grow {
      width: 70%;
    }
    .divFlex {
        margin: 0px auto;
    }
    .logo {
        width: 12%;
        margin: 7px 0;
    }
    header nav {
		display: none;
		position: absolute;
		top: 0px;
		width: 100%;
        height: 100vh;
		background: #fff;
		left: 0;
        float: none;
        z-index: 40;
    }
	header nav ul{
		display: block;
		margin: 0 auto;
		width: 100%;
    }
   header nav ul li{
		margin: 0 auto;
		text-align: center;
	}
   header nav ul li:last-child{
		border: none;
	}
	header nav ul li a{
		display: block;
        color: #000;
	}
    #nav_toggle{
		display: block;
		width: 40px;
		height: 40px;
		position: relative;
		top: 15px;
		float: right;
        z-index: 50;
	}
    #nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 2px;
		background: #e99aab;
		position:absolute;
		width: 80%;
		right: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:10px;
	}
	#nav_toggle span:nth-child(3){
		top:22px;
	}
    .logo2 {
        display: block;
        z-index: 100;
        margin: 20px;
        width: 100%;
        z-index: 200;
        margin: 50px auto;
    }
	/*開閉ボタンopen時*/
	.open #nav_toggle span:nth-child(1) {
			top: 10px;
		   -webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);
		}
		.open #nav_toggle span:nth-child(2) {
			width: 0;
			left: 50%;
		}
		.open #nav_toggle span:nth-child(3) {
			top: 10px;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}
    .behence {
        margin-top: 30px;
    }
    .mrginTop2 {
        margin-top: 60px;
    }
    #indexhero {
        height: 600px;
        background-attachment: scroll;
    }
    h1 {
        font-size: 4.5rem;
        line-height: 5rem;
        margin-top: 0px;
    }
    .boxHalf > h1 {
        top: 40%;
        left: 23%;
        font-size: 4.7rem;
    }
    .hr1{
      margin: 30px 0 0 0;
    }
    h2 {
        font-family: 'robotoregular', sans-serif;
        font-size: 2.5rem;
        color: #000;
        line-height: 3rem;
        font-weight: normal;
        padding-bottom: 20px;
    }
/*
.container_scroll {
        display: none;
    }
*/
.boxHalfAbout > h3 {
        margin: -90px 0 0 0;
        font-size: 2rem;
    }
    #raijinhero, #hobbyhero, #theatrehero, #annualhero, #spacehero, #alomahero   {
        height: 400px;
    }
    .tittle {
        top: 120px;
        line-height: 45px;
    }
    #webdesignhero, #adsnhero, #email, #logo, #booth, #wordpress {
        height: 300px;
    }
}
@media screen and (max-width: 990px) {
    .boxHalf > h1 {
        top: 38%;
    }
}
@media screen and (max-width: 951px) {
    .prtflo ul li {
        margin: 30px 20px 30px 0;
    }
   }
@media screen and (max-width: 935px) {
    .prtflo_intro {
        width: 96%;
        margin: 0 auto;
    }
    .divFlexPrtflo >.graph-cont {
        width: 90%;
        margin: 0 auto;
    }
    .boxHalf > h1 {
        top: 34%;
        left: 23%;
    }
}
@media screen and (max-width: 915px) {
    .container_project {
      width: 45%;
    }
    .container_project img {
    /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(0); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .4s ease-in-out;  
    }
    .boxHalfPortfolio > h2 {
        line-height: 0px;
    }
    .boxPortfolio {
        width:80%;
    }
   }
@media screen and (max-width: 854px) {
    .boxHalf {
        width: 90%;
        margin-top: 10px;
     }
    .boxHalf > h1 {
        top: 40%;
    }
}
@media screen and (max-width: 830px) {
    .deskcontent {
        display: none;
    }
    .yukoBox2, .yukoBoxImg {
        display: block;
        margin: 10px 0 0 0;
    }
    .yukoBox {
        width: 90%;
        margin: 0 auto;
    }
    #nav_toggle{
		top: 12px;
	}
    .boxHalfAbout {
        margin: -60px 0 0 0;
     }
   }
@media screen and (max-width: 773px) {
    .boxHalf > h1 {
        top: 40%;
    }
    .boxHalf {
        width: 96%;
        margin-top: 10px;
     }
}
@media screen and (max-width: 727px) {
    .boxHalf > h1 {
        top: 36%;
    }
 
}
@media screen and (max-width: 634px) {
    .yukoBox2 {
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }
    .yukoBoxImg {
        width: 100%;
        margin: 0 0 0 9%;
        padding: 0;
    }
    .logo {
        width: 18%;
    }
    .boxHalf > h1 {
        font-size: 4rem;
        top: 32%;
    }
     .yukoBox {
        margin: 30px auto;
        padding: 0;
    }
}
@media screen and (max-width: 609px) {
    .boxHalf > h1 {
        top: 30%;
    }
    #indexhero {
        height: 580px;
    }
    .grow {
      width: 80%;
    }
}
@media screen and (max-width: 566px) {
    .boxHalf > h1 {
        top: 35%;
        left: 30%;
    }
    .boxHalfAbout > h3 {
        display: none;
    }
    .phoneSnow {
        display: block;
    }
   .boxHalf {
        width: 95%;
        margin: 0;
       padding: 0;
    }
    .boxHalf > p {
        width: 100%;
    }
    #logo_animation {
        width: 90%;
    }
    .grow {
      width: 96%;
    }
}
@media screen and (max-width: 550px) {
    .container_project {
      width: 100%;
    }
    .boxHalfPortfolio {
        width: 90%;
        margin: 0 auto;
    }
   .boxPortfolio {
        float: none;
        width: 95%;
    }
    .prtflo {
        width: 100%;
        margin: 20px auto 0px auto;
    }
}
@media screen and (max-width: 503px) {
    .boxHalf > h1 {
        top: 32%;
    }
    .boxHalf > h3 {
        font-size: 1.5rem;
    }
    .container_scroll {
        position: relative;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 430px;
        left: 45%;
    }
}
@media screen and (max-width: 480px) {
    .logo {
        width: 20%;
    }
    .divFlexPrtflo >.graph-cont {
        width: 98%;
        margin: 20px auto 0 auto;
    }
    #nav_toggle{
		top: 10px;
	}
}
@media screen and (max-width: 450px) {
    .prtflo > a {
        float: none;
        display: block;
    }
    .boxHalf > h1 {
        top: 29%;
        left: 28%;
        font-size: 3.5rem;
    }
}
@media screen and (max-width: 430px) {
    .boxHalf > h1 {
        top: 25%;
    }
}
@media screen and (max-width: 414px) {
    .boxHalf > h1 {
        top: 29%;
    }
}
@media screen and (max-width: 390px) {
    .boxHalf > h1 {
        top: 27%;
    }
    #nav_toggle{
		top: 9px;
	}
}
@media screen and (max-width: 360px) {
    #nav_toggle{
		top: 8px;
	}
}
@media screen and (max-width: 330px) {
    .boxHalf > h1 {
        top: 20%;
    }
    .boxHalf {
        width: 90%;
    }
}
@media screen and (max-width: 321px) {
    .boxHalf > h1 {
        top: 23%;
    }
}