@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

a img {
border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

@font-face {
  font-family: 'upwisesns2018';
  src: url("../fonts/upwisesns2018.eot?74351372");
  src: url("../fonts/upwisesns2018.eot?74351372#iefix") format("embedded-opentype"), url("../fonts/upwisesns2018.woff2?74351372") format("woff2"), url("../fonts/upwisesns2018.woff?74351372") format("woff"), url("../fonts/upwisesns2018.ttf?74351372") format("truetype"), url("../fonts/upwisesns2018.svg?74351372#upwisesns2018") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'upwisesns2018';
    src: url('../font/upwisesns2018.svg?74351372#upwisesns2018') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "upwisesns2018";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

.icon-twitter:before {
  content: '\f099'; }

/* '' */
.icon-facebook:before {
  content: '\f09a'; }

/* '' */
.icon-instagram:before {
  content: '\f16d'; }

/* '' */
.icon-tumblr:before {
  content: '\f173'; }

/* '' */


*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 62.5%;
  letter-spacing: 0.15rem;}

::selection {
  background: #75c39b;
  color: #fff; }

::-moz-selection {
  background: #75c39b;
  color: #fff; }

a {
  color: #000;
  text-decoration: none; }
a:hover {
  color: #75c39b; }

.scrollUp {
  opacity: 0;
  -webkit-transform: translatey(30px);
  transform: translatey(30px);
  transition: .4s;
}
.scrollUp.fadeIn {
  opacity: 1;
  -webkit-transform: translatey(0);
  transform: translatey(0);
}
.fadeIn {
  opacity: 1;
}

body {
  font-family: "Mplus 1p", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 160px 20px 0;
  position: relative;
}
body .bg {
  content: "";
  display: block;
  width:  100%;
  height: 2000px;
   position: fixed;
   left: 0;
   top: 0;
   z-index: -1;
  background: url('../img/upwise_logo_bg.svg') right -970px top -50px no-repeat;
  background-size: 2000px;
}

header {
  width: 100%;
  padding: 20px;
  background: -moz-linear-gradient(#ffffff 5%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  background: -webkit-linear-gradient(#ffffff 5%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  background: linear-gradient(#ffffff 5%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
/*
mix-blend-mode: difference;*/
}
header .inner {
  max-width: 800px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: space-between;
  justify-content: space-between;}
header .inner .titleWrap {
  display: block;
  *zoom: 1; }
header .inner .titleWrap:after {
  content: "";
  display: table;
  clear: both; }
header .inner .titleWrap svg {
  float: left;
  margin-right: 10px; }
header .inner .titleWrap div {
  float: left; }
header .inner .titleWrap div h1 {
  font-size: 2.0rem;
  font-weight: 200;
  line-height: 1.2em; }
header .inner .titleWrap:hover svg {
  fill: #75c39b; }
header .inner nav {
  margin-bottom: 5px; }
header .inner nav ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center; }
header .inner nav ul li {
  margin-left: 20px; }
header .inner nav ul li a {
  padding: 3px 5px; }
header .inner nav ul li a:hover {
  color: #fff;
  background: #75c39b; }
header #nav-btn {
  display: none; }

.content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.6rem;
  line-height: 1.6em;
  min-height: calc(100vh - 300px);
  opacity: 0;
  transition: 1s;
}

.content.visible {
  opacity: 1;
}

.content.top {
  text-align: center;
  line-height: calc(100vh - 300px);
}
.content.top .sec-title {
  font-size: 1.8rem;
  line-height: 1em; }
.content h2 {
  text-align: center;
  margin-bottom: 50px; }
.content h2 a {
  display: inline-block; }

.content .sec-title {
  font-family: "Mplus 1p", sans-serif;
  display: inline-block;
  text-align: center;
  padding: 0 5px;
  position: relative;
  overflow: hidden; }

.content .sec-title:after {
  content: "";
  display: block;
  width: 100%;
  height: 20%;
  background: #75c39b;
  position: absolute;
  bottom: -10%;
  right: 100%;
  z-index: 0;
  -moz-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  transform: rotate(-1deg);
  transition: .5s;
  -moz-transition-delay:.5s;
  -ms-transition-delay:.5s;
  -webkit-transition-delay:.5s;
  transition-delay:.5s;
}

.content.top .sec-title:after {
  -moz-transform: rotate(-.5deg);
  -ms-transform: rotate(-.5deg);
  -webkit-transform: rotate(-.5deg);
  transform: rotate(-.5deg);
  transition: 2s;
}

.content.visible .sec-title:after {
  right: 0;
}

.content .sec-title span {
  display: block;
  position: relative;
  z-index: 1; }
.content .sec-title span.en {
  font-size: 2.8rem;
  line-height: 1.2em;
  margin-bottom: 3px; }
.content .sec-title span.jp {
  font-size: 1.2rem;
  line-height: 1.3em; }
.content h3 {
  margin-bottom: 60px; }
.content.about {
  width: 640px; }
.content.about dl {
  letter-spacing: -.4em; }
.content.about dl dt, .content.about dl dd {
  padding: 10px 0;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
  margin-bottom: 10px; }
.content.about dl dt {
  width: 25%; }
.content.about dl dd {
  width: 75%; }

.content.contact {
  width: 640px; }
.content.contact address {
  text-align: center; }
.content.contact address a {
  font-size: 1.8rem; }

/*.content.works {
  width: 640px; }*/
.content.works address {
  text-align: center;
  margin-bottom: 60px;
}
  .content.works address a {
  font-size: 1.8rem; }


.service .serviceCnt {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }
.service .serviceCnt dl {
  font-size: 1.3rem;
  width: 31%;
  padding-bottom: 10px;
  margin-bottom: 40px;
  background-size: 50% auto;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.service .serviceCnt dl dt {
  font-size: 1.5rem;
  font-weight: 900;
  color: #333;
  text-align: center;
  margin-bottom: 15px; }


.content.blog {
}
.content.blog .postWrap {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: space-between;
  justify-content: space-between; 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.content.blog .post {
  width:  48%;
  margin-bottom: 50px;
}
.content.blog .postMeta {
}
.content.blog .postMeta .postDate {
  font-size: 1.2rem;
}
.content.blog .postMeta .postTitle {
  font-size: 1.6rem;
  margin-bottom: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.single .content.blog .postDesc {
  line-height: 2em;
}
.single .content.blog .postMeta {
  margin-bottom: 30px;
}
.single .content.blog .postMeta .postTitle {
  white-space: normal;
}



.content.blog .postImg img {
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.content.blog .postImg a:hover img {
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.single .content.blog .post {
  width:  100%;
  margin-bottom: 150px;
}
.single .content.blog .post .postDesc a {
  text-decoration: underline;
}
.single .content.blog .post .postDesc a:hover {
  text-decoration: none;
}



.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.iframe_responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .iframe_responsive iframe, .iframe_responsive object, .iframe_responsive embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


#pager {
  overflow: hidden;
}
#pager li {
  width: 65px;
}
#pager li a {
  width: 65px;
  font-size: 1rem;
  line-height: 1em;
  font-weight: 500;
  display: inline-block;
  border-bottom: 1px #333 solid;
  position: relative;
}

#pager li a span {
  display: inline-block;
  position: absolute;
  top: 25px;
  left: 0;
}

#pager li.prev {
  float: left;
  text-align: right;
}
#pager li.next {
  float: right;
}
#pager li a:before {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  background: #333;
  position: absolute;
}
#pager li.prev a:before {
  left: 12px;
  bottom: -9px;
  -moz-transform: rotate(70deg);
  -ms-transform: rotate(70deg);
  -webkit-transform: rotate(70deg);
  transform: rotate(70deg);
}
#pager li.next a:before {
  right: 12px;
  bottom: -9px;
  -moz-transform: rotate(-70deg);
  -ms-transform: rotate(-70deg);
  -webkit-transform: rotate(-70deg);
  transform: rotate(-70deg);
}


#signature {
  margin-top: 100px;
  text-align: right;
}
#signature h3 {
  margin: 0;
  font-size: 1.0rem;
  line-height: 1em;
}
#signature h1 {
  margin: 0;
  line-height: 1em;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
#signature h1 span {
  display: none;
}

#signature h1:after {
  content: "";
  display: block;
  width: 100%;
  height: 20%;
  background: #75c39b;
  position: absolute;
  bottom: -10%;
  right: 0;
  z-index: 0;
  -moz-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  transform: rotate(-1deg);
}



#instagram {
  width: 100%;
  padding-top:100px;
  display: none; }

.blog #instagram, .jahmony #instagram {
  display: block;
}
.jahmony #instagram {
  padding-top:0;
}

#instagram h6 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.2rem;
}

#instagram ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%; }
#instagram ul li {
  width: 20%;
  padding: 1px; }
#instagram ul li a {
  display:block;
  width :100%;
  padding-top:100%;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
/*#instagram ul li img {
  display:none;
  width: 100%;
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); }
#instagram ul li a img:hover {
  width: 100%;
  vertical-align: bottom;
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%); }*/
#instagram ul li span {
  display: none; }

footer {
  max-width: 800px;
  margin: 100px auto 30px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: relative; }
footer .sns {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: space-between;
  justify-content: space-between; }
footer .sns li {
  margin-left: 15px; }

#toTop {
  position: fixed;
  right: 50px;
  bottom: -50px;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  opacity: 0;
  transition: .8s;
}
#toTop.fadeIn {
  bottom: 50px;
  opacity: 1;
}

#toTop a {
  width: 65px;
  font-size: 1rem;
  line-height: 1em;
  letter-spacing: .5em;
  font-weight: 500;
  display: inline-block;
  border-bottom: 1px #333 solid;
  position: relative;
}
#toTop a:before {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  background: #333;
  position: absolute;
  right: 12px;
  bottom: -9px;
  -moz-transform: rotate(-70deg);
  -ms-transform: rotate(-70deg);
  -webkit-transform: rotate(-70deg);
  transform: rotate(-70deg);
}



.works .worksList {
  overflow:hidden;
}
.works .worksList li {
/*position: relative;
width:16.6666%;
float:left;
height: auto;*/
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
/*border: 1px solid transparent;*/
}
.works .worksList li:hover {
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

.works .worksList li h3 {
  opacity:0;
}

.works .worksList li:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.works .worksList .inner {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
}



.jahmony .movie_list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
}
.jahmony .movie_list li {
  width:calc(50% - 1px);
  margin-bottom:2px;
}
.jahmony .movie_list li .movie_title {
  display:none;
}

@media screen and (max-width: 670px) {

  body {
    padding: 100px 20px 0;
  }

  header .inner nav {
    text-align: center;
    width: 100%;
    height: 100vh;
    padding-top: 70px;
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    z-index: 99;
    top: 0;
    transition: .3s; }
  header .inner nav ul {
    display: block; }
  header .inner nav ul li {
    margin: 30px 0; }
  header .inner nav ul li a {
    font-size: 2.8em;
    display: block; }
  header .inner nav ul li a:hover {
    color: #75c39b;
    background: transparent; }
  header.close nav {
    right: -100%; }
  header.open nav {
    right: 0; }
  header.open #nav-btn:before {
    top: 15px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  header.open #nav-btn span {
    width: 0; }
  header.open #nav-btn:after {
    top: 15px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  header #nav-btn {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 22px;
    right: 20px;
    z-index: 9999;
    transition: .3s;
    cursor: pointer; }
  header #nav-btn span, header #nav-btn:before, header #nav-btn:after {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #333;
    left: 0;
    transition: .2s ease-in-out; }
  header #nav-btn:before {
    content: '';
    top: 3px; }
  header #nav-btn span {
    top: 14px; }
  header #nav-btn:after {
    content: '';
    bottom: 3px; }

  .content {
    font-size: 1.5rem;
  min-height: calc(100vh - 350px);
}
  .content.top {
    font-size: 1.2rem;
    line-height: calc(100vh - 350px);}
  .content.about {
    width: 100%; }

  .content.contact {
    width: 100%; }
  .content.contact div p br {
    display: none; }

  .content.works {
    width: 100%; }
  .content.works div p br {
    display: none; }

  .service .serviceCnt dl {
    width: 48%;
  }

  footer {
    display: block;
    padding: 70px 0 0; }
  footer .copy {
    text-align: center; }
  footer .sns {
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; }
  footer .sns li {
    margin: 20px; }
  footer .sns li a {
    font-size: 3rem; }
  footer .sns li a:hover {
    color: #000; }
  footer .sns li i {
    display: none; }

#toTop {
  right: 10px;
}

}


@media screen and (max-width: 414px) {
.content.top .sec-title {
  font-size: 1.5rem;
  }

  .content.blog .post {
    width: 100%;
  }

.service .serviceCnt dl {
  width: 100%;
  background-size: 30% auto;
}

  #instagram ul li {
    width: 50%;
  }

}