@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,900");
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes topAnimation {
  from {
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
  }
  to {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@keyframes topAnimation {
  from {
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
  }
  to {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@-webkit-keyframes mobileMenuAnimation {
  from {
    width: 0vw;
  }
  to {
    width: 100vw;
  }
}

@keyframes mobileMenuAnimation {
  from {
    width: 0vw;
    opacity: 0;
  }
  to {
    width: 100vw;
    opacity: 1;
  }
}

@-webkit-keyframes mobileMenuAnimationClose {
  from {
    width: 100vw;
    opacity: 1;
  }
  to {
    width: 0vw;
  }
}

@keyframes mobileMenuAnimationClose {
  from {
    width: 100vw;
  }
  to {
    width: 0vw;
    opacity: 0;
  }
}

#mbMenu {
  display: none;
}

.topImg {
  padding: 0;
  overflow: hidden;
}

.topImg img {
  width: 100%;
  -webkit-animation: topAnimation .5s ease-in-out;
  animation: topAnimation .5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

body {
  font-family: 'Roboto', sans-serif;
  letter-spacing: .1rem;
  -webkit-font-smoothing: antialiased;
}

p {
  letter-spacing: .05rem;
}

@media (min-width: 480px) {
  #main {
    padding-top: 12%;
  }
}

@media (min-width: 480px) and (max-width: 1024px) {
  .container {
    width: 95%;
  }
}

@media (min-width: 1024px) {
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .container {
    width: 90%;
  }
  #main {
    padding-top: 115px;
  }
}

.yesxs {
  display: none !important;
}

.clearfix {
  clear: both;
}

.noPad {
  padding: 0;
}

.eigo {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  word-break: keep-all;
  word-wrap: break-word;
}

.nihongo {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 500;
}

.replaceText {
  margin: 0 auto;
  text-indent: -9999px;
}

.scene {
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.glyphicon-chevron-right:before {
  font-family: FontAwesome;
  content: '\f105';
}

.glyphicon-chevron-left:before {
  font-family: FontAwesome;
  content: '\f104';
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .noxs {
    display: none !important;
  }
  .yesxs {
    display: block !important;
  }
}

/* iphone landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .noxs {
    display: none !important;
  }
  .yesxs {
    display: block;
  }
}

.navbar-default {
  padding-top: 4%;
  padding-bottom: 4%;
  border: 0;
  background-color: #fff;
}

.navbar-default .navbar-nav > li > a {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  color: #333;
}

.navbar-default .navbar-nav > li > a:hover {
  color: #bebebe;
}

#navbar .topSns a img {
  height: 18px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#navbar .topSns a img:hover {
  opacity: .3;
}

@media (min-width: 1024px) {
  .navbar-default {
    padding-top: 32.5px;
    padding-bottom: 32.5px;
  }
  .navbar-default .navbar-nav > li > a {
    font-size: 1.45rem;
  }
  #navbar .topSns a {
    padding-right: 12px;
    padding-left: 12px;
  }
  #navbar .topSns.mail {
    margin-right: 1rem;
  }
  .nav .spaceMenu {
    padding-right: 24px;
    padding-left: 24px;
  }
  .nav .spaceMenu.lastMenu {
    padding-right: 60px;
  }
  .nav > li[class='navItems']:nth-last-child(4) a {
    padding-right: 60px;
  }
}

@media only screen and (max-width: 1024px) {
  .navbar-default .navbar-toggle {
    border: none;
  }
  .navbar-toggle .icon-bar {
    width: 25px;
    height: 1px;
  }
  .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 6px;
  }
  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background-color: transparent;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .navbar-brand {
    padding-left: 30px;
  }
  .navbar-toggle {
    padding-right: 15px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .navbar-right {
    margin-right: 0;
  }
  .nav > li > a {
    padding: 16px 14px 0 14px;
  }
  #navbar .topSns a img {
    height: 16px;
  }
}

/* iphone landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border: none;
  }
  .navbar-default {
    padding-top: 1%;
    padding-bottom: 1%;
  }
  .navbar-brand {
    padding: 15px 0;
  }
  .navbar-default .navbar-nav > li > a {
    font-size: 1.2rem;
    padding-right: 10px;
    padding-left: 10px;
  }
  .navbar-header {
    float: left;
  }
  .navbar-toggle {
    display: none;
  }
  .navbar-collapse {
    display: block !important;
  }
  .nav > li {
    float: left;
  }
  .navbar-right {
    float: right;
  }
  #navbar .topSns a img {
    height: 14px;
    margin-top: 2px;
  }
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 3.1rem;
  font-weight: 300;
  margin-top: 0;
  text-align: center;
}

h1 span,
h2 span {
  font-weight: 400;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

#contact {
  padding-top: 8%;
  padding-bottom: 8%;
}

#contact .title,
#contact .contactInfo {
  font-size: 1.25rem;
}

#contact .title {
  font-weight: 500;
}

#contact .contactInfo {
  padding-top: 8%;
  color: #787878;
}

#contact .contactInfo a {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  color: #787878;
}

#contact ul li a {
  font-size: 2.1rem;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  color: #333;
}

#contact a:hover {
  text-decoration: none;
  color: #bebebe;
}

#contact .copy {
  font-size: .85rem;
  margin-top: 20%;
  color: #999;
}

#contact .sns a img {
  height: 18px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#contact .sns a img:hover {
  opacity: .3;
}

@media (min-width: 1024px) {
  #contact ul {
    float: right;
  }
  #contact ul li {
    margin-left: 1rem;
  }
  #contact .leftSpace {
    margin-left: 6.333333%;
  }
  #contact .contactInfo .col-lg-8 {
    padding-left: 0;
  }
  #contact .sns {
    width: 37.33333333%;
  }
  #contact .copy {
    float: right;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  #contact {
    padding-top: 70px;
  }
}

@media only screen and (max-width: 1024px) {
  #contact .title {
    font-weight: 400;
  }
  #contact .contactInfo {
    font-weight: 300;
  }
  #contact .sns ul li {
    padding-right: 10px;
    padding-left: 10px;
  }
  #contact .copy {
    margin-bottom: 0;
  }
  #contact .noPadLeft {
    margin-left: -15px;
    padding-left: 0;
  }
  #contact .noPadRight {
    padding-right: 0;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  #contact {
    padding-top: 18%;
    padding-bottom: 18%;
  }
  #contact .leftSpace .contactInfo div {
    text-align: left;
  }
  #contact .contactInfo {
    padding-top: 7%;
  }
  #contact .title,
  #contact .contactInfo {
    text-align: center;
  }
  #contact .mbfix .title {
    padding-top: 18%;
  }
  #contact .sns {
    padding-top: 18%;
  }
  #contact .sns ul {
    width: 126px;
    text-align: center;
    margin: 0 auto;
  }
  #contact .copy {
    margin-top: 15%;
    text-align: center;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  #contact {
    padding-top: 95px;
    padding-bottom: 95px;
  }
  #contact .leftSpace {
    margin-left: 30px;
  }
  #contact .contactInfo {
    padding-top: 5%;
  }
  #contact .mbfix {
    width: 30%;
    padding-right: 0;
    padding-left: 0;
  }
  #contact .sns {
    width: 32.5%;
    padding-right: 42px;
    padding-left: 0;
  }
  #contact .sns ul {
    float: right;
    width: auto;
  }
  #contact .sns ul li:last-child {
    padding-right: 0;
  }
  #contact .contactInfo.mbfix div {
    padding-right: 0;
  }
  #contact .copy {
    margin-top: 46%;
    text-align: right;
  }
}

/* ipad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #contact .mbfix {
    width: 28%;
  }
  #contact .sns {
    width: 29%;
    padding-right: 42px;
  }
  #contact .copy {
    margin-top: 40%;
    padding-left: 0;
  }
}

/* iphone landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #contact .contactInfo div.col-xs-3 {
    width: 17%;
    margin-left: 31.5%;
  }
  #contact .title,
  #contact .mbfix .contactInfo {
    text-align: center;
  }
  #contact .mbfix .title,
  #contact .sns,
  #contact .copy {
    padding-top: 8%;
  }
  #contact .contactInfo {
    padding-top: 4%;
  }
  #contact .sns ul {
    width: 150px;
    margin: 0 auto;
  }
  #contact .copy {
    margin-top: 0;
    text-align: center;
    letter-spacing: .1rem;
  }
}

.carousel-indicators li {
  margin: 1px 5px;
  border: 0;
  background-color: #fff;
}

.carousel-indicators .active {
  margin: 1px 5px;
  background-color: #3c3c3c;
}

@media (min-width: 480px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next,
  .carousel-control .icon-prev {
    font-size: 50px;
    width: auto;
    height: auto;
    margin-top: -35px;
  }
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .icon-prev {
    margin-left: -30px;
  }
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next {
    margin-right: -30px;
  }
  .carousel-indicators {
    bottom: 12px;
  }
}

@media (min-width: 1024px) {
  .carousel-indicators li {
    width: 6px;
    height: 6px;
  }
  .carousel-indicators li.active {
    width: 6px;
    height: 6px;
  }
}

@media only screen and (max-width: 1024px) {
  .carousel-indicators li,
  .carousel-indicators .active {
    width: 5px;
    height: 5px;
  }
}

/* ipad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .companyPage #info .infoBlock .col-lg-4.col-lg-offset-1 {
    width: 29.33333333%;
    margin-left: 3.333333%;
  }
}

.home .viewAbout {
  font-size: 1.2rem;
  font-weight: 900;
  display: block;
  width: 150px;
  margin: 0 auto;
  padding: 12px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  text-align: center;
  color: #333;
  border: 2px solid #333;
}

.home .viewAbout:hover {
  text-decoration: none;
  color: #fff;
  background-color: #333;
}

.home #homeSlider .carousel-inner a img {
  transition: 550ms;
  opacity: 1;
}

.home #homeSlider .carousel-inner a:hover img {
  transition: 550ms;
  opacity: .8;
}

/* slider animation start */
.home .carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  animation-name: homeSlider;
  animation-duration: 5.5s;
  animation-timing-function: ease;
  opacity: 0;
}

@-webkit-keyframes homeSlider {
  0% {
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
  }
  15% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  90% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
  }
}

@keyframes homeSlider {
  0% {
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
  }
  15% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  90% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

.home .carousel-fade .carousel-inner .active {
  opacity: 1;
}

.home .carousel-fade .carousel-inner .active.left,
.home .carousel-fade .carousel-inner .active.right {
  z-index: 1;
  left: 0;
  opacity: 0;
}

.home .carousel-fade .carousel-inner .next.left,
.home .carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.home .carousel-fade .carousel-control {
  z-index: 2;
}

/* slider animation end */
#homeSlider {
  position: relative;
}

#homeSlider .carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 45%;
  left: auto;
  width: 4%;
}

#homeSlider li {
  display: block;
  margin: 10px 0;
}

#homeSlider li.active {
  margin: 10px 0;
}

#homeSlider img {
  width: 100%;
}

#homepage {
  padding-top: 16%;
  padding-bottom: 15%;
}

#homepage h1 {
  padding-bottom: 3%;
}

#homepage h2 {
  font-size: 1.75rem;
  font-weight: 400;
  padding-bottom: 6%;
  text-align: center;
}

@media only screen and (max-width: 1024px) {
  .home .viewAbout {
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    background-color: #333;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  #homepage {
    padding-bottom: 16%;
  }
  #homepage h1 span,
  #homepage h2 span {
    display: block;
  }
  #homepage h1 {
    font-size: 2.4rem;
    line-height: 3.5rem;
  }
  #homepage h2 {
    font-size: 1.5rem;
    line-height: 2.2rem;
    padding-bottom: 8%;
  }
  #homeSlider .carousel-indicators {
    bottom: 33%;
    width: 6%;
  }
  #homeSlider img,
  .topImg img {
    height: 300px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  #homeSlider .carousel-indicators {
    bottom: 40%;
    width: 6%;
  }
}

#projectsGallery .projItem {
  position: relative;
  padding-right: 0;
  padding-left: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#projectsGallery .projItem:hover > .over {
  cursor: pointer;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.8);
}

#projectsGallery .projItem:hover > .over a {
  opacity: 1;
}

#projectsGallery .projItem:hover > .over > span {
  opacity: 1;
}

#projectsGallery .projItem img {
  width: 100%;
}

#projectsGallery .projItem .over {
  height: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#projectsGallery .projItem .over a {
  font-size: 1.2rem;
  font-weight: 900;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 150px;
  height: 44px;
  margin: auto;
  padding: 12px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  text-align: center;
  opacity: 0;
  color: #fff;
  border: 2px solid #fff;
}

#projectsGallery .projItem .over a:hover {
  text-decoration: none;
  color: #000;
  background-color: #fff;
}

#projectsGallery .projItem .over > span {
  font-family: 'Roboto', sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  position: absolute;
  bottom: 6%;
  left: 3%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 0;
  color: #fff;
}

/* 共通 - 1025px以上 */
@media (min-width: 1024px) {
  #projectsGallery .projItem {
    width: 87.333333%;
    height: 732px;
    margin-left: 6.333333%;
  }
}

/* 共通 - 1024px以下 */
@media only screen and (max-width: 1024px) {
  #projectsGallery .projItem {
    height: 290px;
  }
  #projectsGallery .projItem:hover > .over {
    background-color: rgba(0, 0, 0, 0.8);
  }
  #projectsGallery .projItem .over {
    background-color: rgba(0, 0, 0, 0.8);
  }
  #projectsGallery .projItem .over a {
    z-index: 1;
    width: 100%;
    height: 100%;
    border: none;
  }
  #projectsGallery .projItem .over a:hover {
    color: transparent;
    background-color: transparent;
  }
  #projectsGallery .projItem .over span {
    opacity: 1;
  }
}

/* ここから追加 */
@media only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (hover: none) {
  #projectsGallery .projItem .over {
    width: 35%;
  }
  #projectsGallery .projItem > .over {
    cursor: pointer;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.8);
  }
  #projectsGallery .projItem > .over a {
    opacity: 0;
  }
  #projectsGallery .projItem > .over > span {
    opacity: 1;
    width: 29%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #projectsGallery {
    padding-right: 42px;
    padding-left: 42px;
  }
  #projectsGallery .projItem {
    height: 290px;
  }
  #projectsGallery .projItem .over {
    width: 30%;
  }
  #projectsGallery .projItem .over > span {
    font-size: 2rem;
    font-weight: 300;
    top: 10%;
    left: 5%;
    width: 20%;
  }
  #projectsGallery .projItem .over {
    width: 35%;
  }
  #projectsGallery .projItem > .over a {
    z-index: 1;
    width: 150px;
    height: 44px;
    border: 2px solid #fff;
  }
  #projectsGallery .projItem:hover > .over a {
    z-index: 1;
    width: 150px;
    height: 44px;
    border: 2px solid #fff;
  }
  #projectsGallery .projItem:hover > .over a:hover {
    color: #000;
    background-color: #fff;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #projectsGallery .projItem {
    overflow: hidden;
  }
  #projectsGallery .projItem .over {
    width: 160px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
  }
  #projectsGallery .projItem .over > span {
    font-size: 1.5rem;
    font-weight: 300;
    top: 10%;
    left: 8%;
    width: 26%;
  }
  #projectsGallery {
    padding-right: 42px;
    padding-left: 42px;
  }
  #projectsGallery .projItem {
    height: 290px;
  }
  #projectsGallery .projItem .over {
    width: 33.3333333333333%;
  }
  #projectsGallery .projItem .over span {
    left: 3.5%;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #projectsGallery .projItem {
    overflow: hidden;
  }
  #projectsGallery .projItem .over {
    width: 160px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
  }
  #projectsGallery .projItem .over > span {
    font-size: 1.5rem;
    font-weight: 300;
    top: 10%;
    left: 8%;
    width: 26%;
  }
  #projectsGallery {
    padding-right: 42px;
    padding-left: 42px;
  }
  #projectsGallery .projItem {
    height: 290px;
  }
  #projectsGallery .projItem .over {
    width: 33.3333333333333%;
  }
  #projectsGallery .projItem .over span {
    left: 3.5%;
  }
}

@media only screen and (max-width: 480px) {
  #projectsGallery .projItem {
    overflow: hidden;
  }
  #projectsGallery .projItem .over {
    width: 160px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
  }
  #projectsGallery .projItem .over > span {
    font-size: 1.5rem;
    font-weight: 300;
    top: 10%;
    left: 8%;
    width: 26%;
  }
  #projectsGallery .projItem {
    height: 180px;
  }
}

@media only screen and (min-device-width: 480px) and (max-device-width: 767px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  #projectsGallery .projItem {
    height: 180px;
  }
}

/* Smartphone - Portrait & Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  #projectsGallery .projItem {
    overflow: hidden;
  }
  #projectsGallery .projItem .over {
    width: 160px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
  }
  #projectsGallery .projItem .over > span {
    font-size: 1.5rem;
    font-weight: 300;
    top: 10%;
    left: 8%;
    width: 26%;
  }
}

/* Tablet(iPad) - Portrait （たて） */
/*
初期設定から下記メディアクエリーにて設定されているが、-webkit-min-device-pixel-ratio: 1 だと通常のPC画面も対象となるためiPadだけの適用とはならない
ただしdevice-widthなので画面幅が固定（主にモバイル）を対象としている
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  #projectsGallery {
    padding-right: 42px;
    padding-left: 42px;
  }
  #projectsGallery .projItem {
    height: 290px;
  }
  #projectsGallery .projItem .over {
    width: 30%;
  }
  #projectsGallery .projItem .over > span {
    font-size: 2rem;
    font-weight: 300;
    top: 10%;
    left: 5%;
    width: 20%;
  }
}

/* Tablet(iPad) - Landscape （よこ） */
/*
初期設定から下記メディアクエリーにて設定されているが、-webkit-min-device-pixel-ratio: 1 だと通常のPC画面も対象となるためiPadだけの適用とはならない
ただしdevice-widthなので画面幅が固定（主にモバイル）を対象としている
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #projectsGallery .projItem .over {
    width: 35%;
  }
}

/* Smartphone(iPhone) - Landscape （よこ） */
/*
初期設定から下記メディアクエリーにて設定されているが、-webkit-min-device-pixel-ratio: 1 だと通常のPC画面も対象となるためiPhoneだけの適用とはならない
ただしdevice-widthなので画面幅が固定（主にモバイル）を対象としている
*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  #projectsGallery .projItem .over {
    width: 25%;
  }
  #projectsGallery .projItem .over span {
    left: 3%;
    width: 20%;
  }
}

/* タッチスクリーン全般のhoverエフェクトを削除 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (hover: none) {
  #projectsGallery .projItem > .over a {
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
  }
  #projectsGallery .projItem > .over a:hover {
    color: transparent;
    background-color: transparent;
  }
  #projectsGallery .projItem:hover > .over a {
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    opacity: 0;
    border: none;
  }
  #projectsGallery .projItem:hover > .over a:hover {
    color: transparent;
    background-color: transparent;
  }
}

@media only screen and (max-width: 767px) {
  #projectsGallery .projItem > .over a {
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
  }
  #projectsGallery .projItem > .over a:hover {
    color: transparent;
    background-color: transparent;
  }
  #projectsGallery .projItem:hover > .over a {
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    opacity: 0;
    border: none;
  }
  #projectsGallery .projItem:hover > .over a:hover {
    color: transparent;
    background-color: transparent;
  }
}

#about {
  padding-top: 10%;
  padding-bottom: 8%;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
  #about {
    padding-right: 6.38021%;
    padding-left: 6.38021%;
  }
}

@media only screen and (min-width: 0px) and (max-width: 768px) and (max-width: 480px) {
  #about {
    padding-top: 18.13333%;
    padding-right: 8%;
    padding-bottom: 17.33333%;
    padding-left: 8%;
  }
}

#about h1 {
  padding-bottom: 4%;
}

@media only screen and (max-width: 480px) {
  #about h1 {
    font-family: Roboto;
    line-height: 1.75;
    letter-spacing: 1.8px;
  }
}

#about p {
  line-height: 3.2rem;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 43px;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
  #about p {
    font-size: 1.4rem;
    padding-bottom: 28px;
  }
}

#about p:last-child {
  padding-bottom: 0;
}

#about p.nihongo {
  text-align: justify;
}

@media only screen and (max-width: 480px) {
  #about p.nihongo {
    font-size: 1.3rem;
    line-height: 2.23;
    padding-bottom: 15.2381%;
    letter-spacing: .65px;
    color: #323232;
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (max-width: 480px) {
  #about p.eigo {
    font-family: Roboto;
    font-size: 1.3rem;
    line-height: 1.92;
    letter-spacing: .65px;
    color: #323232;
    padding-left: 0;
    padding-right: 0;
  }
}

.aboutPage h2,
.aboutPage h4,
.aboutPage h5 {
  text-align: center;
}

@media (min-width: 1024px) {
  #about p {
    font-size: 1.43rem;
    padding-right: 8%;
    padding-left: 8%;
    letter-spacing: .018rem;
  }
}

@media (min-width: 1367px) {
  #about p {
    padding-right: 19.5%;
    padding-left: 19.5%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  #about {
    padding-top: 16%;
    padding-bottom: 16%;
  }
  #about h1 {
    font-size: 2.4rem;
    margin-bottom: 0;
    padding-bottom: 14%;
  }
  #about p {
    font-size: 1.3rem;
    line-height: 2.7rem;
    padding-right: 15px;
    padding-left: 15px;
  }
  #about p.fix {
    padding-bottom: 4%;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  #about {
    padding: 150px 42px 120px 42px;
  }
  #about p {
    font-size: 1.35rem;
  }
}

#serviceContent {
  clear: both;
  padding: 15.625% 0 19.53125%;
  color: #fff;
  background-color: #1e1e1e;
}

@media only screen and (max-width: 480px) {
  #serviceContent {
    padding: 26.66667% 0 33.6%;
  }
}

#serviceContent h2 {
  font-size: 31px;
  font-weight: 100;
  line-height: 1.75;
  margin-top: 0;
  margin-bottom: 9.48767%;
  margin-bottom: 0;
  letter-spacing: 2.33px;
  color: #fff;
}

@media only screen and (max-width: 768px) {
  #serviceContent h2 {
    font-size: calc( ( 31 / 768 ) * 100vw);
  }
}

@media only screen and (max-width: 768px) and (max-width: 480px) {
  #serviceContent h2 {
    font-size: calc( ( 24 / 375 ) * 100vw);
    font-weight: 100;
    letter-spacing: 1.8px;
  }
}

#serviceContent h2 span {
  font-weight: 300;
}

#serviceContent h3 {
  font-family: Roboto;
  font-size: 31px;
  font-weight: 100;
  line-height: 1.75;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 1em;
  letter-spacing: 2.33px;
  color: #fff;
}

@media only screen and (max-width: 768px) {
  #serviceContent h3 {
    font-size: calc( ( 31 / 768 ) * 100vw);
    padding-top: .64em;
  }
}

@media only screen and (max-width: 768px) and (max-width: 480px) {
  #serviceContent h3 {
    font-size: calc( ( 24 / 375 ) * 100vw);
    line-height: 1.46;
    width: calc( ( 315 / 375 ) * 100vw);
    margin-right: auto;
    margin-bottom: calc( ( 35 / 375 ) * 100vw);
    margin-left: auto;
    text-align: center;
    letter-spacing: 1.8px;
  }
}

#serviceContent h3 span {
  font-weight: 300;
}

#serviceContent .serviceItem {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 10.70312%;
}

@media only screen and (max-width: 480px) {
  #serviceContent .serviceItem {
    margin-top: 25.86667%;
  }
}

#serviceContent .serviceItem:first-child {
  margin-top: 0;
}

#serviceContent .serviceItem:first-child {
  margin-top: 0;
}

#serviceContent .service-cnt-1 {
  margin-top: 6.71875%;
}

#serviceContent .serviceItemMeta {
  margin-bottom: 17.98561%;
}

@media only screen and (max-width: 1024px) {
  #serviceContent .serviceItemMeta {
    margin-bottom: 11.76471%;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) {
  #serviceContent .serviceItemMeta {
    margin-bottom: 7.97546%;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .serviceItemMeta {
    display: none;
  }
}

#serviceContent .serviceItemMetaMobile {
  display: none;
}

@media only screen and (max-width: 480px) {
  #serviceContent .serviceItemMetaMobile {
    display: flex;
    width: 100%;
  }
}

#serviceContent .serviceItemFigire {
  width: 59.375%;
}

@media only screen and (max-width: 1024px) {
  #serviceContent .serviceItemFigire {
    width: 40.23438%;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) {
  #serviceContent .serviceItemFigire {
    width: 48.17708%;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .serviceItemFigire {
    width: 100%;
  }
}

#serviceContent .serviceItemFigire picture {
  line-height: 1;
  margin: 0;
  padding: 0;
  letter-spacing: normal;
  border: none;
  outline: none;
}

#serviceContent .serviceItemFigire img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

#serviceContent .serviceItemBody {
  width: 22.65625%;
}

@media only screen and (max-width: 1280px) {
  #serviceContent .serviceItemBody {
    min-width: 290px;
  }
}

@media only screen and (max-width: 1280px) and (max-width: 1024px) {
  #serviceContent .serviceItemBody {
    width: 45.70312%;
  }
}

@media only screen and (max-width: 1280px) and (max-width: 1024px) and (max-width: 768px) {
  #serviceContent .serviceItemBody {
    width: 42.57812%;
    min-width: initial;
    min-width: auto;
  }
}

@media only screen and (max-width: 1280px) and (max-width: 1024px) and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .serviceItemBody {
    width: 100%;
    padding-right: 8%;
    padding-left: 8%;
  }
}

#serviceContent .serviceItemBodyMobile {
  display: none;
}

@media only screen and (max-width: 480px) {
  #serviceContent .serviceItemBodyMobile {
    display: flex;
  }
}

@media only screen and (max-width: 480px) {
  #serviceContent .serviceItemText {
    margin-top: calc( ( 41 / 375 ) * 100vw);
  }
}

#serviceContent .serviceItemText p.nihongo {
  font-size: 14px;
  font-weight: 400;
  line-height: 2.29;
  margin-bottom: 11.8705%;
  letter-spacing: .7px;
  color: #fff;
}

@media only screen and (max-width: 1024px) {
  #serviceContent .serviceItemText p.nihongo {
    margin-bottom: 7.76471%;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) {
  #serviceContent .serviceItemText p.nihongo {
    font-size: calc( ( 14 / 768 ) * 100vw);
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .serviceItemText p.nihongo {
    font-size: 1.3rem;
    line-height: 2.23;
    letter-spacing: .65px;
  }
}

#serviceContent .serviceItemText p.eigo {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.29;
  margin-bottom: 0;
  letter-spacing: .7px;
  color: #fff;
}

@media only screen and (max-width: 1024px) {
  #serviceContent .serviceItemText p.eigo {
    font-weight: 400;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) {
  #serviceContent .serviceItemText p.eigo {
    font-size: calc( ( 13.5 / 768 ) * 100vw);
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .serviceItemText p.eigo {
    font-size: 1.4rem;
    line-height: 1.79;
  }
}

#serviceContent .column-2-cnt-left .serviceItemBody {
  margin-left: 8.33333%;
}

@media only screen and (max-width: 768px) {
  #serviceContent .column-2-cnt-left .serviceItemBody {
    margin-left: 6.51042%;
  }
}

@media only screen and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .column-2-cnt-left .serviceItemBody {
    margin-left: 0;
  }
}

#serviceContent .column-2-cnt-right .serviceItemBody {
  margin-right: 8.33333%;
}

@media only screen and (max-width: 768px) {
  #serviceContent .column-2-cnt-right .serviceItemBody {
    margin-right: 5.46875%;
  }
}

@media only screen and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .column-2-cnt-right .serviceItemBody {
    margin-right: 0;
  }
}

#serviceContent .style-column-2.column-2-cnt-left {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 480px) {
  #serviceContent .style-column-2.column-2-cnt-left {
    flex-direction: column;
  }
}

#serviceContent .style-column-2.column-2-cnt-right {
  flex-direction: row;
}

@media only screen and (max-width: 480px) {
  #serviceContent .style-column-2.column-2-cnt-right {
    flex-direction: column;
  }
}

#serviceContent .style-column-1 {
  flex-direction: column;
  padding-right: 8.33333%;
  padding-left: 8.33333%;
}

@media only screen and (max-width: 768px) {
  #serviceContent .style-column-1 {
    padding-right: 6.25%;
    padding-left: 6.25%;
  }
}

@media only screen and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .style-column-1 {
    padding-right: 0;
    padding-left: 0;
  }
}

#serviceContent .style-column-1 .serviceItemMeta {
  width: 100%;
  margin-bottom: 3.90625%;
}

#serviceContent .style-column-1 h3 {
  width: 100%;
  text-align: left;
}

@media only screen and (max-width: 768px) {
  #serviceContent .style-column-1 h3 {
    text-align: center;
  }
}

@media only screen and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .style-column-1 h3 span {
    display: inline-block;
  }
}

#serviceContent .style-column-1 h3 br {
  display: none;
}

@media only screen and (max-width: 480px) and (max-width: 480px) {
  #serviceContent .style-column-1 .serviceItemMeta {
    display: flex;
  }
}

#serviceContent .style-column-1 .serviceItemFigire {
  width: 100%;
}

#serviceContent .style-column-1 .serviceItemFigireMovie {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

#serviceContent .style-column-1 .serviceItemFigireMovie iframe,
#serviceContent .style-column-1 .serviceItemFigireMovie #serviceItemFigireMovieData {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  transform: translateX(-50%);
}

#serviceContent .style-column-1 .serviceItemFigireMovie #serviceItemFigireMoviePlay {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

#serviceContent .style-column-1 .serviceItemFigireMovie #serviceItemFigireMoviePlay.active {
  opacity: 0;
}

#serviceContent .style-column-1 .serviceItemBody {
  width: 100%;
  margin-bottom: 8.7242%;
}

@media only screen and (max-width: 480px) {
  #serviceContent .style-column-1 .serviceItemBody {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  #serviceContent .style-column-1 .serviceItemMobile {
    display: flex;
  }
}

#serviceContent .style-column-1 .serviceItemText {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

@media only screen and (max-width: 768px) {
  #serviceContent .style-column-1 .serviceItemText {
    justify-content: space-between;
  }
}

#serviceContent .style-column-1 .serviceItemText p.nihongo {
  width: 28.04878%;
  margin-right: 6.28518%;
  margin-bottom: 0;
}

@media only screen and (max-width: 1024px) {
  #serviceContent .style-column-1 .serviceItemText p.nihongo {
    width: 299px;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) {
  #serviceContent .style-column-1 .serviceItemText p.nihongo {
    width: calc( ( 100% - 6.25% ) / 2);
  }
}

#serviceContent .style-column-1 .serviceItemText p.eigo {
  width: 33.58349%;
  margin-bottom: 0;
}

@media only screen and (max-width: 1024px) {
  #serviceContent .style-column-1 .serviceItemText p.eigo {
    width: 358px;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) {
  #serviceContent .style-column-1 .serviceItemText p.eigo {
    width: calc( ( 100% - 6.25% ) / 2);
  }
}

@media only screen and (max-width: 480px) {
  #serviceContent .style-column-1 .serviceItemBodyMobile {
    padding-right: 8.33333%;
    padding-left: 8.33333%;
  }
  #serviceContent .style-column-1 .serviceItemBodyMobile .serviceItemText {
    flex-direction: column;
    width: 100%;
  }
  #serviceContent .style-column-1 .serviceItemBodyMobile .serviceItemText p.nihongo {
    width: 100%;
    margin-bottom: 8%;
  }
  #serviceContent .style-column-1 .serviceItemBodyMobile .serviceItemText p.eigo {
    width: 100%;
  }
}

#serviceContent .style-column-4 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media only screen and (max-width: 1024px) {
  #serviceContent .style-column-4 {
    flex-wrap: wrap;
    padding-right: 27.99479%;
    padding-left: 27.99479%;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) {
  #serviceContent .style-column-4 {
    width: 46.35417%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }
}

#serviceContent .style-column-4 .serviceItemList {
  margin-right: 7.8125%;
  text-align: center;
}

#serviceContent .style-column-4 .serviceItemList:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 1024px) {
  #serviceContent .style-column-4 .serviceItemList {
    width: 50%;
    margin-right: 0;
    margin-bottom: 22.38806%;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) {
  #serviceContent .style-column-4 .serviceItemList {
    width: calc( ( 126 / 768 ) * 100vw);
    margin-right: calc( ( 100 / 768 ) * 100vw);
  }
  #serviceContent .style-column-4 .serviceItemList:nth-child(2n) {
    margin-right: 0;
  }
}

@media only screen and (max-width: 1024px) and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .style-column-4 .serviceItemList {
    width: 100%;
    margin-right: 0;
  }
}

#serviceContent .style-column-4 img {
  width: auto;
  height: 45px;
  margin: 0 auto;
  margin-bottom: 26px;
}

#serviceContent .style-column-4 h4 {
  font-family: 'Noto Sans JP', 'Noto Sans CJK JP', 'Noto Sans Japanese', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.95;
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: .6px;
  color: #fff;
}

@media only screen and (max-width: 768px) {
  #serviceContent .style-column-4 h4 {
    font-size: calc( ( 12 / 768 ) * 100vw);
  }
}

@media only screen and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .style-column-4 h4 {
    font-size: 1.2rem;
  }
}

#serviceContent .style-column-4 p {
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.44;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: .45px;
  color: #fff;
}

@media only screen and (max-width: 768px) {
  #serviceContent .style-column-4 p {
    font-size: calc( ( 9 / 768 ) * 100vw);
  }
}

@media only screen and (max-width: 768px) and (max-width: 480px) {
  #serviceContent .style-column-4 p {
    font-size: .9rem;
  }
}

/* Mobile - 320〜480 & Portrait  */
/* Ignore iPad */
#serviceSlider .carousel-control {
  opacity: 1;
  text-shadow: none;
}

@media only screen and (max-width: 480px) {
  #serviceSlider .carousel-control {
    background: none;
  }
}

#serviceSlider .carousel-control:hover {
  opacity: 1;
  background: none;
  text-shadow: none;
}

#serviceSlider img {
  width: 100%;
}

#serviceContent .contactRow {
  margin: 16.17188% auto 0;
}

#serviceContent .contactRow img {
  width: auto;
  height: 45px;
  margin: 0 auto;
}

#serviceContent .contactRow h4 {
  font-family: 'Noto Sans JP', 'Noto Sans CJK JP', 'Noto Sans Japanese', sans-serif;
  font-size: 1.2rem;
  font-weight: 100;
  padding-top: 7%;
}

#serviceContent .contactRow p {
  font-size: 1rem;
  font-weight: 200;
  line-height: 1.2rem;
  padding-top: 3%;
  text-align: center;
}

#serviceContent .contactRow h5 {
  font-family: Roboto;
  font-size: 3.1rem;
  font-weight: 300;
  line-height: 1.75;
  margin: 0 auto;
  letter-spacing: 2.33px;
  color: #fff;
}

@media only screen and (max-width: 480px) {
  #serviceContent .contactRow h5 {
    font-size: 2.4rem;
    font-weight: 300;
    letter-spacing: 1.8px;
  }
}

#serviceContent .contactRow .denwa {
  font-family: Roboto;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2rem;
  margin-top: 0;
  padding-top: 5.84112%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  letter-spacing: 2.25px;
  color: #fff !important;
}

@media only screen and (max-width: 480px) {
  #serviceContent .contactRow .denwa {
    font-size: 2.2rem;
    padding-top: 16%;
    padding-bottom: 9.7%;
    letter-spacing: 1.65px;
  }
}

#serviceContent .contactRow .contactLink {
  display: inline-block;
  margin-bottom: -3px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  color: #fff !important;
}

#serviceContent .contactRow .contactLink img {
  height: 25px;
  margin-top: 1.5px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

#serviceContent .contactRow .contactLink:hover img {
  opacity: .6;
}

@media only screen and (max-width: 1024px) {
  #service .sliderMb {
    background-color: #fff;
  }
  #service .sliderMb img {
    margin-bottom: 1.30208%;
  }
  #service .sliderMb img.fix {
    margin-bottom: 0;
  }
}

#map {
  font-size: 1.23rem;
  font-weight: 200;
  line-height: 2.3rem;
  position: relative;
  padding: 0;
}

#map .embed-responsive-16by9 {
  padding-bottom: 36%;
}

#map .mapInfo {
  line-height: 2.6rem;
  position: absolute;
  z-index: 1;
  bottom: 0;
  padding: 3.5% 4%;
  color: #fff;
  background-color: #1e1e1e;
}

#map .mapInfo p.nihongo {
  font-weight: 300;
  margin-bottom: 2rem;
}

#map .mapInfo p.nihongo span {
  font-family: 'Roboto', sans-serif;
}

#map .mapInfo p.eigo {
  font-weight: 400;
  margin-bottom: 0;
  color: #fff !important;
}

@media only screen and (max-width: 1024px) {
  #map .mapInfo p.eigo {
    color: #fff !important;
  }
  #map .mapInfo {
    line-height: 2.4rem;
    width: 100%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  #map {
    font-size: 1.12rem;
  }
  #map .mapInfo {
    position: relative;
    padding: 30px;
  }
  #map .embed-responsive-16by9 {
    padding-bottom: 58%;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  #map .embed-responsive-16by9 {
    padding-bottom: 100%;
  }
  #map .mapInfo {
    line-height: 2.4rem;
    padding: 6%;
  }
}

/* ipad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #map .mapInfo {
    width: auto;
  }
}

#info {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 1.22rem;
  font-weight: 500;
  padding-top: 6%;
  padding-bottom: 6%;
  letter-spacing: normal;
}

#info .infoBlock .row {
  line-height: 3.5rem;
  padding-top: 8%;
  padding-bottom: 8%;
  border-top: 1px solid #999;
}

#info .infoBlock .row:first-child {
  border-top: none;
}

#info .infoBlock span {
  font-family: 'Roboto', sans-serif;
}

#info .infoBlock span.small {
  font-size: 1.05rem;
  display: block;
}

#info .infoBlock.right .row {
  line-height: 2.5rem;
}

#info .infoBlock.right .row div:first-child, #info .infoBlock.right .row div:nth-child(2) {
  margin-bottom: 35px;
}

#info .infoBlock:nth-child(2) .row:first-child {
  border-top: 1px solid #999;
}

@media (min-width: 768px) {
  #info .infoBlock:nth-child(2) .row:first-child {
    border-top: 1px solid #999;
  }
}

@media (min-width: 1024px) {
  .companyPage #info .infoBlock {
    width: 38.33333333%;
  }
  .companyPage #info .right {
    margin-left: 6.33333333%;
  }
  .companyPage #info .infoBlock .col-lg-4.col-lg-offset-1 {
    width: 29.33333333%;
    margin-left: 11.33333333%;
  }
  #info .infoBlock.right .row.fix {
    padding-top: 7.1%;
    padding-bottom: 7.1%;
  }
  #info .infoBlock:nth-child(2) .row:first-child {
    border-top: none;
  }
}

@media only screen and (max-width: 1024px) {
  #info .infoBlock span.small {
    font-size: 1rem;
  }
  #info .infoBlock.right .row div:first-child, #info .infoBlock.right .row div:nth-child(2) {
    margin-bottom: 24px;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  #info {
    font-size: 1.1rem;
    padding-top: 6%;
    padding-bottom: 6%;
  }
  #info .infoBlock {
    margin-right: 30px;
    margin-left: 30px;
  }
  #info .infoBlock .row {
    line-height: 2.5rem;
  }
  #info .infoBlock .row div {
    padding-right: 0;
    padding-left: 0;
  }
  #info .infoBlock.right .row.fix {
    letter-spacing: -.04rem;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  #info {
    padding-bottom: 120px;
  }
  #info .infoBlock .row {
    padding-top: 7%;
    padding-bottom: 7%;
  }
}

/* ipad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #info .infoBlock:nth-child(2) .row:first-child {
    padding-top: 34px;
    border-top: none;
  }
}

/* iphone landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .infoBlock .col-xs-4 {
    width: 20.333333%;
    margin-left: 21%;
  }
  .infoBlock .col-xs-8 {
    width: 46.666667%;
  }
}

#message {
  padding-top: 10%;
  padding-bottom: 140px;
}

#message h1 {
  padding-bottom: 4%;
}

#message p {
  line-height: 3.2rem;
  padding-top: 1%;
  padding-bottom: 2%;
}

#message p.nihongo {
  text-align: justify;
}

@media (min-width: 1024px) {
  #message p.nihongo,
  #message p.eigo {
    font-size: 1.43rem;
    padding-right: 8%;
    padding-left: 8%;
    letter-spacing: .018rem;
  }
}

@media (min-width: 1367px) {
  #message p.nihongo,
  #message p.eigo {
    padding-right: 19.5%;
    padding-left: 19.5%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  #message {
    padding-top: 18%;
    padding-bottom: 8%;
  }
  #message h1 {
    font-size: 2.4rem;
    padding-bottom: 12%;
  }
  #message p {
    font-size: 1.25rem;
    line-height: 2.7rem;
    padding-right: 15px;
    padding-left: 15px;
  }
  #message p.fix {
    padding-bottom: 8%;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  #message {
    padding: 155px 42px 140px 42px;
  }
  #message h1 {
    padding-bottom: 45px;
  }
}

/* ipad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #message {
    padding-bottom: 70px;
  }
}

#join .spaceTop {
  padding-top: 4%;
}

#join h1 {
  padding-bottom: 8%;
}

#join .btn {
  font-size: 2.3rem;
  font-weight: 300;
  padding: 3.5% 16px;
  color: #333;
  border: 0;
  border-radius: 0;
  outline: none;
  background-color: #f0f0f0;
}

#join .btn img {
  display: inline-block;
  margin-top: -2px;
}

#join .btn span {
  font-size: 2.6rem;
}

#join .well {
  border: 0;
  border-radius: 0;
  background-color: #f0f0f0;
  box-shadow: none;
}

#join .well p {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 3rem;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
  letter-spacing: normal;
}

#join .well p.nihongo.last {
  padding-bottom: 6%;
}

@media (min-width: 1024px) {
  #join .col-lg-10 {
    width: 87.33333333%;
    margin-left: 6.33333333%;
    padding-right: 0;
    padding-left: 0;
  }
  #join .well {
    padding: 3% 0 8% 27%;
  }
}

@media only screen and (max-width: 1024px) {
  #join .btn img {
    height: 14px;
    margin-top: 1px;
  }
  #join div.mbFix {
    padding-right: 25px;
    padding-left: 25px;
  }
  #join div.mbFix:first-child {
    margin-bottom: 15px;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  #join .btn {
    padding: 8% 16px;
  }
  #join .btn span {
    font-size: 1.7rem;
  }
  #join .well p {
    font-size: 1rem;
    line-height: 2.7rem;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  #join div.mbFix:first-child,
  #join div.mbFix:nth-child(2) {
    padding-right: 42px;
    padding-left: 42px;
  }
  #join .btn {
    padding: 4.5% 16px;
  }
  #join .btn span {
    font-size: 2.1rem;
  }
  #join .well p {
    padding-left: 11%;
  }
}

/* ipad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #join .well p {
    font-size: 1.2rem;
  }
  #join .well {
    padding: 3% 0 8% 15%;
  }
}

/* iphone landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #join .well {
    padding-left: 10%;
  }
}

#intro {
  padding-top: 9%;
  padding-bottom: 3%;
}

#intro h1 {
  font-size: 3rem;
  font-weight: 400;
}

#intro h2 {
  font-size: 2.1rem;
  font-weight: 500;
  padding-bottom: 5%;
}

#intro p {
  line-height: 3.2rem;
  padding-top: 0;
  padding-bottom: 2%;
}

@media (min-width: 1024px) {
  #intro {
    padding-bottom: 6%;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  #intro {
    padding-top: 19%;
    padding-bottom: 12%;
  }
  #intro h1 {
    font-size: 2.5rem;
    line-height: 3.6rem;
  }
  #intro h1 span,
  #intro h2 span {
    display: block;
  }
  #intro h2 span {
    font-weight: 500;
  }
  #intro h2 {
    font-size: 1.5rem;
    padding-bottom: 9%;
  }
  #intro p {
    font-size: 1.25rem;
    line-height: 2.7rem;
    padding-right: 15px;
    padding-left: 15px;
  }
  #intro p.nihongo {
    text-align: justify;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  #intro {
    padding-bottom: 130px;
  }
  #intro p {
    padding-right: 27px;
    padding-left: 27px;
  }
}

.notfound #message.notfound h1 {
  padding-bottom: 2%;
}

.notfound #message.notfound h2 {
  font-size: 1.75rem;
  font-weight: 400;
  padding-bottom: 8%;
  text-align: center;
}

.notfound #message.notfound .nihongo {
  text-align: center;
}

.notfound #message.notfound .viewAbout {
  font-size: 1.2rem;
  font-weight: 900;
  display: block;
  width: 200px;
  margin: 0 auto;
  padding: 12px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  text-align: center;
  color: #333;
  border: 2px solid #333;
}

@media only screen and (max-width: 1024px) {
  .notfound #message.notfound .viewAbout {
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    background-color: #333;
  }
}

.notfound #message.notfound .viewAbout:hover {
  text-decoration: none;
  color: #fff;
  background-color: #333;
}

.page-visual {
  overflow: hidden;
  padding: 0;
}

.page-visual img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  animation: topAnimation .5s ease-in-out forwards;
}

.projectsPage .tagLists {
  padding-top: 7.8125%;
  padding-bottom: calc( 65px - 2.8rem);
}

@media only screen and (min-width: 0px) and (max-width: 375px) {
  .projectsPage .tagLists {
    padding: 17.3913% 8%;
  }
}

.projectsPage .tagLists .tagList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding-right: 16.66666667%;
  padding-left: 16.66666667%;
  list-style: none;
}

@media only screen and (min-width: 0px) and (max-width: 375px) {
  .projectsPage .tagLists .tagList {
    margin-bottom: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

.projectsPage .tagLists .tagItem {
  margin-right: 1.4rem;
  margin-bottom: 1.5rem;
  margin-left: 1.4rem;
}

.projectsPage .tagLists .tagItem.current .tagLink {
  font-weight: 500;
  color: #000;
}

.projectsPage .tagLists .tagItem.current .tagLink:after {
  position: absolute;
  bottom: -.5em;
  left: 50%;
  width: 95%;
  height: 2px;
  content: '';
  transition: 500ms;
  transform: translateX(-50%) scaleX(1);
  background-color: #000;
}

.projectsPage .tagLists .tagItem:hover .tagLink {
  transition: 500ms;
  color: #bebebe;
}

.projectsPage .tagLists .tagLink {
  font-family: Roboto;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 2.1;
  position: relative;
  transition: 500ms;
  text-decoration: none;
  letter-spacing: .75px;
  color: #000;
}

.projectsPage .projectsList {
  padding-right: calc( ( 80 / 1280 ) * 100%);
  padding-left: calc( ( 80 / 1280 ) * 100%);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
  .projectsPage .projectsList {
    padding-right: calc( ( 50 / 738 ) * 100%);
    padding-left: calc( ( 50 / 738 ) * 100%);
  }
}

@media only screen and (min-width: 0px) and (max-width: 768px) and (min-width: 0px) and (max-width: 480px) {
  .projectsPage .projectsList {
    padding-right: calc( ( 30 / 345 ) * 100%);
    padding-left: calc( ( 30 / 345 ) * 100%);
  }
}

.projectsPage .projectsList > .row {
  margin-right: 0;
  margin-left: 0;
}

.projectsPage .item {
  width: 30.26786%;
  margin-right: 4.46429%;
  margin-bottom: 5.35714%;
  padding-right: 0;
  padding-left: 0;
}

.projectsPage .item:nth-child(3n) {
  margin-right: 0;
}

.projectsPage .item:nth-child(3n+1) {
  clear: both;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
  .projectsPage .item {
    width: 47.75449%;
    margin-right: 4.19162%;
    margin-bottom: 8.98204%;
  }
  .projectsPage .item:nth-child(3n) {
    margin-right: 4.19162%;
  }
  .projectsPage .item:nth-child(3n+1) {
    clear: none;
  }
  .projectsPage .item:nth-child(2n) {
    margin-right: 0;
  }
  .projectsPage .item:nth-child(2n+1) {
    clear: both;
  }
}

@media only screen and (min-width: 0px) and (max-width: 768px) and (min-width: 0px) and (max-width: 375px) {
  .projectsPage .item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 17.3913%;
    padding: 0;
  }
  .projectsPage .item:nth-child(3n) {
    margin-right: 0;
  }
  .projectsPage .item:nth-child(3n+1) {
    clear: none;
  }
  .projectsPage .item:nth-child(2n) {
    margin-right: 0;
  }
  .projectsPage .item:nth-child(2n+1) {
    clear: none;
  }
}

.projectsPage .itemImage {
  overflow: hidden;
  padding-right: 0;
  padding-left: 0;
}

.projectsPage .itemImage > .col-lg-12 {
  padding-right: 0;
  padding-left: 0;
}

.projectsPage .itemImage a {
  display: block;
}

.projectsPage .itemImage a img {
  width: 100%;
  transition: all .5s ease-in-out;
  transform: scale(1, 1);
  -webkit-backface-visibility: hidden;
}

.projectsPage .itemImage a:hover img {
  transition: all .5s ease-in-out;
  transform: scale(1.1, 1.1);
  -webkit-backface-visibility: hidden;
}

.projectsPage .itemInfo {
  font-weight: 400;
  color: #1e1e1e;
}

.projectsPage .itemInfo > .col-lg-12 {
  padding-right: 0;
  padding-left: 0;
}

.projectsPage .itemHeading.eng h2,
.projectsPage .itemHeading.eng h3 {
  font-family: Roboto;
}

.projectsPage .itemHeading.jpn h2,
.projectsPage .itemHeading.jpn h3 {
  font-family: 'Noto Sans JP', 'Noto Sans CJK JP', 'Noto Sans Japanese', sans-serif;
}

.projectsPage h2 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.75;
  margin: 5.88235% 0 0 0;
  letter-spacing: 1.13px;
}

.projectsPage h3 {
  font-size: 1.0rem;
  font-weight: 400;
  line-height: 1.75;
  margin-top: 0;
  letter-spacing: .75px;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
  .projectsPage h3 {
    margin-bottom: 12px;
  }
}

.projectsPage .itemTagList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 0;
  list-style-type: none;
}

.projectsPage .itemTagList .itemTag {
  margin-right: 10px;
}

.projectsPage .itemTagList .itemTag .itemTagLink {
  font-family: Roboto;
  font-size: 1.0rem;
  font-weight: 300;
  display: block;
  margin-bottom: 1em;
  padding: .2rem 1.0rem;
  transition: 500ms;
  white-space: normal;
  letter-spacing: .75px;
  word-wrap: break-word;
  color: #000;
  background-color: #f0f0f0;
}

.projectsPage .itemTagList .itemTag .itemTagLink:hover {
  transition: 500ms;
  text-decoration: none;
  color: #fff;
  background-color: #333;
}

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

.projectsPage .pagerItem {
  font-family: Roboto;
  font-size: 1.2rem;
  font-weight: 300;
  position: relative;
  margin-right: 18px;
  transition: 300ms;
  text-decoration: none;
  letter-spacing: .9px;
  color: #000;
}

.projectsPage .pagerItem:last-child {
  margin-right: 0;
}

.projectsPage .pagerItem.current {
  font-weight: 500;
  color: #000;
}

.projectsPage .pagerItem.current:after {
  position: absolute;
  bottom: -.5em;
  left: 50%;
  width: 95%;
  height: 2px;
  content: '';
  transform: translateX(-50%);
  background-color: #000;
}

.projectsPage .pagerItem:hover {
  transition: 300ms;
  color: #bebebe;
}

.projectsPage a {
  transition: 300ms;
  color: #000;
}

.projectsPage a:hover {
  transition: 300ms;
  color: #bebebe;
}

.projectItem .items .portfolioMovie {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.projectItem .items iframe {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  transform: translateX(-50%);
}

.projectItem .itemsCredit {
  text-align: center;
}

.projectItem .itemsCredit h3 {
  font-family: Roboto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.75;
  margin-top: 58px;
  margin-bottom: 17px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #1e1e1e;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
  .projectItem .itemsCredit h3 {
    margin-top: 60;
    margin-bottom: 12px;
  }
}

.projectItem .itemsCredit .itemsCreditText {
  font-family: Roboto;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
  margin-bottom: 0;
  letter-spacing: .9px;
  color: #000;
}

@media (min-width: 1024px) {
  .projectItem .show div {
    width: 89.33333333%;
    margin-left: 5.33333333%;
    padding: 0;
  }
  .projectItem .items img,
  .projectItem .show img {
    width: 100%;
  }
  .projectItem .items .col-lg-12 {
    padding: 0;
  }
  .projectItem .noPad {
    margin-top: 2%;
  }
  .projectItem #intro p {
    font-size: 1.43rem;
    padding-right: 8%;
    padding-left: 8%;
    letter-spacing: .018rem;
  }
  .projectItem .items {
    width: 89.33333333%;
    margin-left: 5.33333333%;
  }
}

@media only screen and (max-width: 1024px) {
  .projectItem #intro p.side {
    font-size: 1.1rem;
    line-height: 2.5rem;
    float: left !important;
    padding: 25px 10px;
  }
  .projectItem .show img {
    width: 100%;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .projectItem .show {
    padding-bottom: 24px;
  }
  .projectItem .items img {
    padding-right: 15px;
    padding-bottom: 24px;
    padding-left: 15px;
  }
  .projectItem .noPad {
    padding-right: 15px;
    padding-left: 15px;
  }
  .projectItem .show,
  .projectItem .items {
    padding-right: 27px;
    padding-left: 27px;
  }
}

@media (max-width: 1px) {
  .projects h2 {
    font-size: 1.5rem;
    font-weight: 400;
    padding-top: 4%;
    padding-left: 8%;
  }
  .projects h3 {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 0;
    padding-left: 8%;
  }
  .projectItem #intro p.side {
    font-size: 1.33rem;
    line-height: 3.2rem;
    padding: 5% 8% 2% 0;
  }
  .projectItem h2 {
    font-weight: 400;
  }
  .projectItem .show {
    padding-bottom: 2%;
  }
  .projectItem .items .portfolioMovie {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  .projectItem .items iframe {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 100%;
    height: 100%;
    transform: translateX(-50%);
  }
  .projectItem .items .noPad img {
    width: 100%;
  }
  .projectItem .items img.noMarginTop {
    margin-bottom: 0;
  }
}

@media (max-width: 1px) and (min-width: 1024px) {
  .projects .spaceTop {
    padding-top: 6%;
  }
  .projects .item {
    padding: 0;
  }
  .projects .item .itemImage {
    overflow: hidden;
    padding: 0;
  }
  .projects .item .itemImage img {
    width: 100%;
    transition: all .5s ease-in-out;
    transform: scale(1, 1);
  }
  .projects .item .itemImage:hover img {
    transform: scale(1.1, 1.1);
  }
  .projects .right h2,
  .projects .right h3 {
    padding-left: 0;
  }
  .projectItem .show div {
    width: 89.33333333%;
    margin-left: 5.33333333%;
    padding: 0;
  }
  .projectItem .items img,
  .projectItem .show img {
    width: 100%;
  }
  .projectItem .items .col-lg-12 {
    padding: 0;
  }
  .projectItem .noPad {
    margin-top: 2%;
  }
  .projectItem #intro p {
    font-size: 1.43rem;
    padding-right: 8%;
    padding-left: 8%;
    letter-spacing: .018rem;
  }
  .projectItem .items {
    width: 89.33333333%;
    margin-left: 5.33333333%;
  }
}

@media only screen and (max-width: 1px) and (max-width: 1024px) {
  .projects h2 {
    font-size: 1.4rem;
    padding-top: inherit;
  }
  .projects h3 {
    font-size: 1.2rem;
    margin-bottom: 40px;
  }
  .projects .item {
    padding-right: 0;
    padding-left: 0;
  }
  .projectItem #intro p.side {
    font-size: 1.1rem;
    line-height: 2.5rem;
    float: left !important;
    padding: 25px 10px;
  }
  .projectItem .show img {
    width: 100%;
  }
}

@media (max-width: 1px) and (min-width: 480px) {
  .projects .item img {
    width: 100%;
  }
}

@media only screen and (max-width: 1px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .projects h2,
  .projects h3 {
    padding-left: 42px;
  }
  .projects h2 {
    padding-top: 10px;
  }
  .projects h3 {
    padding-bottom: 50px;
  }
  .projects .right h2,
  .projects .right h3 {
    padding-left: 0;
  }
  .projectItem .show {
    padding-bottom: 24px;
  }
  .projectItem .items img {
    padding-right: 15px;
    padding-bottom: 24px;
    padding-left: 15px;
  }
  .projectItem .noPad {
    padding-right: 15px;
    padding-left: 15px;
  }
  .projectItem .show,
  .projectItem .items {
    padding-right: 27px;
    padding-left: 27px;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .projectItem .show {
    padding-bottom: 3.5%;
  }
  .projectItem .show div,
  .projectItem .items .row div {
    padding-right: 0;
    padding-left: 0;
  }
  .projectItem .items .row div.noPad {
    padding-top: 3.5%;
  }
}

.memberPage .memberList {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 83.33333333%;
  margin-top: 115px;
  margin-left: 8.33333333%;
  padding-right: 0;
  padding-left: 0;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberPage .memberList {
    width: 100%;
    margin-top: calc( 8.33333333% + 30px);
    margin-right: 0;
    margin-left: 0;
    padding-right: calc( ( 67 / 375 ) * 100%);
    padding-left: calc( ( 67 / 375 ) * 100%);
  }
}

.memberPage .memberList-item {
  width: calc( ( 100% - ( ( 9.26% * 2 ) + 1px ) ) / 3);
  margin-right: 9.26%;
  margin-bottom: 78px;
}

.memberPage .memberList-item:nth-child(3n) {
  margin-right: 0;
}

@media only screen and (min-width: 0px) and (max-width: 992px) {
  .memberPage .memberList-item {
    width: calc( ( ( 100% - 17.09401% ) - 1px ) / 2);
    margin-right: 17.09401%;
    margin-bottom: 13.333333333333333%;
  }
  .memberPage .memberList-item:nth-child(3n) {
    margin-right: 17.09401%;
  }
  .memberPage .memberList-item:nth-child(2n) {
    margin-right: 0;
  }
  .memberPage .memberList-item:nth-child(2n+1) {
    margin-right: 17.09401%;
  }
}

@media only screen and (min-width: 0px) and (max-width: 992px) and (min-width: 0px) and (max-width: 480px) {
  .memberPage .memberList-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 22.62%;
  }
  .memberPage .memberList-item:nth-child(3n), .memberPage .memberList-item:nth-child(2n), .memberPage .memberList-item:nth-child(2n+1) {
    margin-right: 0;
  }
}

.memberPage .memberList-photo {
  width: 100%;
}

.memberPage .memberList-photo img {
  width: 100%;
  max-width: 100%;
}

.memberPage .memberList-photo a {
  transition: 800ms;
  filter: grayscale(100%);
}

.memberPage .memberList-photo a:hover {
  transition: 800ms;
  filter: grayscale(0);
}

.memberPage .memberList-name {
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  margin: 30px 0 10px 0;
  letter-spacing: .8px;
  color: #000;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberPage .memberList-name {
    margin-top: 8.85%;
  }
}

.memberPage .memberList-position {
  font-family: Roboto;
  font-size: 10px;
  font-weight: 400;
  margin: 0;
  letter-spacing: .5px;
  color: #000;
}

.memberItem .memberDetail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 666px;
  background: transparent url(/wp/wp-content/themes/www.ncpc.co.jp.v.1.0/assets/images/member/750x666.jpg) right calc( 100% + 15px) center no-repeat;
  background-image: url(/wp/wp-content/themes/www.ncpc.co.jp.v.1.0/assets/images/member/750x666.jpg);
  background-size: contain;
}

@media only screen and (min-width: 0px) and (max-width: 1024px) {
  .memberItem .memberDetail {
    background-position: right 150% center;
  }
}

@media only screen and (min-width: 0px) and (max-width: 1024px) and (min-width: 0px) and (max-width: 992px) {
  .memberItem .memberDetail {
    justify-content: flex-end;
    background-position: right 150% center;
  }
}

@media only screen and (min-width: 0px) and (max-width: 1024px) and (min-width: 0px) and (max-width: 992px) and (min-width: 0px) and (max-width: 768px) {
  .memberItem .memberDetail {
    min-height: 500px;
    padding-right: -15px;
    padding-left: 0;
    background-image: url(/wp/wp-content/themes/www.ncpc.co.jp.v.1.0/assets/images/member/563x500.jpg);
    background-position: left center;
  }
}

@media only screen and (min-width: 0px) and (max-width: 1024px) and (min-width: 0px) and (max-width: 992px) and (min-width: 0px) and (max-width: 768px) and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail {
    width: calc( 100% + 15px);
    height: 100vw;
    min-height: initial;
    min-height: auto;
    margin-right: -15px;
    margin-left: -15px;
    padding-right: 0;
    padding-left: 0;
    background-image: url(/wp/wp-content/themes/www.ncpc.co.jp.v.1.0/assets/images/member/375x300.jpg);
    background-position: center center;
    background-size: cover;
  }
}

.memberItem .memberDetail-content {
  width: 50%;
  max-width: 500px;
  margin-left: 45%;
}

@media only screen and (min-width: 0px) and (max-width: 992px) {
  .memberItem .memberDetail-content {
    width: auto;
    max-width: initial;
    max-width: auto;
  }
}

.memberItem .memberDetail-meta-pc {
  display: block;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail-meta-pc {
    display: none;
  }
}

.memberItem .memberDetail-meta-pc + .memberDetail-text.memberDetail-text-pc {
  margin-top: 70px;
}

.memberItem .memberDetail-meta-sp {
  display: none;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail-meta-sp {
    display: block;
  }
}

.memberItem .memberDetail-name {
  font-family: Roboto;
  font-size: 31px;
  font-weight: 400;
  margin-bottom: 16px;
  text-align: left;
  letter-spacing: 1.55px;
  color: #000;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail-name {
    font-size: 20px;
    margin-bottom: 10px;
    letter-spacing: 1px;
  }
}

.memberItem .memberDetail-position {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 25px;
  text-align: left;
  letter-spacing: .7px;
  color: #000;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail-position {
    font-size: 11px;
    letter-spacing: .55px;
  }
}

.memberItem .memberDetail-sns-pc {
  display: block;
  margin-top: 25px;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail-sns-pc {
    display: none;
  }
}

.memberItem .memberDetail-sns-sp {
  display: none;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail-sns-sp {
    display: block;
  }
}

.memberItem .memberDetail-sns ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.memberItem .memberDetail-sns ul li {
  margin-right: 25px;
  list-style-type: none;
}

.memberItem .memberDetail-sns ul li:last-child {
  margin-right: 0;
}

.memberItem .memberDetail-sns ul li a img {
  width: auto;
  height: 16px;
}

.memberItem .memberDetail-text {
  margin-top: 25px;
}

.memberItem .memberDetail-text-pc {
  display: block;
}

@media only screen and (min-width: 0px) and (max-width: 992px) {
  .memberItem .memberDetail-text-pc {
    display: none;
  }
}

.memberItem .memberDetail-text-sp {
  display: none;
}

@media only screen and (min-width: 0px) and (max-width: 992px) {
  .memberItem .memberDetail-text-sp {
    display: block;
    margin-top: 38px;
  }
}

@media only screen and (min-width: 0px) and (max-width: 992px) and (min-width: 0px) and (max-width: 768px) {
  .memberItem .memberDetail-text-sp {
    margin-top: 49px;
    padding-right: calc( ( 50 / 768 ) * 100%);
    padding-left: calc( ( 50 / 768 ) * 100%);
  }
}

@media only screen and (min-width: 0px) and (max-width: 992px) and (min-width: 0px) and (max-width: 768px) and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail-text-sp {
    margin-top: 20px;
    padding-right: calc( ( 30 / 375 ) * 100%);
    padding-left: calc( ( 30 / 375 ) * 100%);
  }
}

.memberItem .memberDetail-text-jpn {
  font-size: 14px;
  font-weight: 400;
  line-height: 2.29;
  margin-bottom: 0;
  letter-spacing: .7px;
  color: #323232;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail-text-jpn {
    font-size: 13px;
    font-weight: 400;
    line-height: 2.23;
    margin-top: 50px;
    letter-spacing: .65px;
  }
}

.memberItem .memberDetail-text-eng {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.29;
  margin-top: 50px;
  margin-bottom: 0;
  letter-spacing: .7px;
  color: #323232;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
  .memberItem .memberDetail-text-eng {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.92;
    letter-spacing: .65px;
  }
}

.memberItem .memberProjectsPage {
  padding-top: 150px;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
  .memberItem .memberProjectsPage {
    padding-top: 100px;
  }
}

@media (max-width: 849px) {
  .navbar-collapse.collapse {
    display: none !important;
  }
  .hidden-840 {
    display: none !important;
  }
}

@media (min-width: 850px) {
  .navbar-collapse.collapse {
    display: block !important;
  }
}

@media (max-width: 849px) {
  .navbar-toggle {
    display: inline-block !important;
    float: right;
  }
}

@media (min-width: 850px) {
  .navbar-header {
    float: left !important;
  }
}

@media (max-width: 849px) {
  .navbar-header {
    float: none !important;
  }
}

@media (max-width: 850px) {
  .container > .navbar-header {
    margin-right: -15px !important;
    margin-left: -15px !important;
  }
}
/*# sourceMappingURL=../maps/styles.css.map */