@charset "UTF-8";
/*  ====================
	default
====================  */
html, body {
  color: #444;
  background-color: #eee;
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px; }

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

a {
  line-height: 1.7;
  display: inline-block;
  color: #444;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }
a:hover {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

h1, h2, h3, h4, h5, h6, p {
  line-height: 1.7;
  word-break: break-all; }

p, a {
  margin-bottom: 15px;
  font-weight: 300;
  font-family: "Noto Sans JP", sans-serif;
  color: #444; }

h1, h2, h3, h4, h5, h6 {
  color: #666;
  font-weight: 100;
  font-family: "Noto Serif JP", serif; }

.pc {
  display: block; }

.sp {
  display: none; }

body section {
  padding: 50px 0;
  position: relative;
  z-index: 9999; }
body section .section-container {
  width: 100%; }
body section .section-container h2 {
  font-size: 2rem;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 50px; }
body section .section-container .contents-area {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto; }
body section .section-container .contents-area .contents-block {
  width: 100%; }
body.top section {
  padding: 50px 0;
  position: relative;
  z-index: 9999; }
body.top section .section-container {
  width: 100%; }
body.top section .section-container h2 {
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: 70px; }
body.top section .section-container .contents-area {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto; }
body.top section .section-container .contents-area .contents-block {
  width: 100%; }

.btn p a {
  border: 1px solid #aaa;
  padding: 10px 30px;
  font-size: 1.1rem;
  margin-top: 40px;
  position: relative; }
.btn p a:hover {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  border: 1px solid #888;
  color: #fff; }
.btn p a:hover:after {
  content: "";
  width: 100%;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }
.btn p a:after {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #888;
  z-index: -1;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

@media screen and (max-width: 767px) {
  body.top section .section-container h2 {
    font-size: 2.3rem;
    margin-bottom: 30px; } }
/*  ====================
	animation
====================  */
.fade_in {
  opacity: 0 !important;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.fade_in_complete {
  opacity: 1 !important;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.fade_in_left {
  opacity: 0 !important;
  -webkit-transform: translate(-30px, 0%);
  transform: translate(-30px, 0%);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.fade_in_left_complete {
  opacity: 1 !important;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.fade_in_right {
  opacity: 0 !important;
  -webkit-transform: translate(30px, 0%);
  transform: translate(30px, 0%);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.fade_in_right_complete {
  opacity: 1 !important;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.fade_in_up {
  opacity: 0 !important;
  -webkit-transform: translate(0px, 30px);
  transform: translate(0px, 30px);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.fade_in_up_complete {
  opacity: 1 !important;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.fade_in_bottom {
  opacity: 0 !important;
  -webkit-transform: translate(0px, -30px);
  transform: translate(0px, -30px);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.fade_in_bottom_complete {
  opacity: 1 !important;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.delay_05 {
  transition-delay: 0.2s; }

.delay_1 {
  transition-delay: 0.4s; }

.delay_15 {
  transition-delay: 1.5s; }

.delay_2 {
  transition-delay: 2s; }

.delay_25 {
  transition-delay: 2.5s; }

.delay_3 {
  transition-delay: 3s; }

.delay_35 {
  transition-delay: 3.5s; }

.delay_4 {
  transition-delay: 4s; }

.delay_45 {
  transition-delay: 4.5s; }

.delay_5 {
  transition-delay: 5s; }

.speed_05 {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.speed_1 {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.speed_15 {
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  transition-duration: 1.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.speed_2 {
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.speed_25 {
  -webkit-transition-duration: 2.5s;
  -moz-transition-duration: 2.5s;
  transition-duration: 2.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.speed_3 {
  -webkit-transition-duration: 3s;
  -moz-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.speed_35 {
  -webkit-transition-duration: 3.5s;
  -moz-transition-duration: 3.5s;
  transition-duration: 3.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.speed_4 {
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  transition-duration: 4s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.speed_45 {
  -webkit-transition-duration: 4.5s;
  -moz-transition-duration: 4.5s;
  transition-duration: 4.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

.speed_5 {
  -webkit-transition-duration: 5s;
  -moz-transition-duration: 5s;
  transition-duration: 5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out; }

/*  ====================
	header
====================  */
header {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  opacity: 0; }

.luxbar-fixed {
  z-index: 10000 !important; }

.luxbar-brand {
  padding: 25px 24px 10px 24px !important;
  color: #666;
  font-weight: 100;
  font-family: "Noto Serif JP", serif; }

/*  ====================
	firstview
====================  */
section#firstview {
  padding: 0;
  width: 100%;
  height: 100vh; }
section#firstview #firstview-container {
  width: 100%;
  height: 100vh; }
section#firstview #firstview-container .contents-area {
  width: 100%;
  height: 100vh;
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -ms-justify-content: center;
  -webkit-justify-content: center; }
section#firstview #firstview-container .contents-area .contents-block.logo h1 {
  text-align: center;
  font-size: 3rem; }

@media screen and (max-width: 767px) {
  section#firstview #firstview-container .contents-area .contents-block.logo h1 {
    font-size: 2rem; } }
/*  ====================
	portfolio
====================  */
section#portfolio #portfolio-container .contents-area .contents-block ul {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap; }
section#portfolio #portfolio-container .contents-area .contents-block ul li {
  width: calc(100% / 3 - 10px);
  padding: 20px 5px; }
section#portfolio #portfolio-container .contents-area .contents-block ul li a {
  position: relative;
  display: block;
  padding: 10px;
  height: 100%; }
section#portfolio #portfolio-container .contents-area .contents-block ul li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 1.5rem;
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.08);
  transition: opacity 0.4s cubic-bezier(0.24, 0.57, 0.45, 1);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  opacity: 0; }
section#portfolio #portfolio-container .contents-area .contents-block ul li a img {
  width: 100%; }
section#portfolio #portfolio-container .contents-area .contents-block ul li a p {
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
  font-weight: 400;
  color: #666; }
section#portfolio #portfolio-container .contents-area .contents-block ul li a .cat {
  margin-top: 30px; }
section#portfolio #portfolio-container .contents-area .contents-block ul li a .cat ul {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
section#portfolio #portfolio-container .contents-area .contents-block ul li a .cat ul li {
  margin: 0 5px 10px;
  padding: 5px 0;
  text-align: center;
  width: calc(50% - 10px);
  background-color: #999;
  color: #fff; }
section#portfolio #portfolio-container .contents-area .contents-block ul li a:hover:before {
  content: "";
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  opacity: 1; }
section#portfolio #portfolio-container .contents-area .contents-block.btn p {
  text-align: center; }

@media screen and (max-width: 767px) {
  section#portfolio #portfolio-container .contents-area .contents-block ul li {
    width: calc(100% / 1 - 10px);
    padding: 10px 5px; } }
/*  ====================
	company
====================  */
section#company #company-container .contents-area .contents-block ul li {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  border-bottom: 1px solid #ddd;
  padding: 25px 2.5%;
  width: 95%; }
section#company #company-container .contents-area .contents-block ul li span {
  width: 80%; }
section#company #company-container .contents-area .contents-block ul li span.ttl {
  width: 20%; }
section#company #company-container .contents-area .contents-block ul li ul li {
  display: block;
  border-bottom: none;
  padding: 0;
  width: auto;
  margin-bottom: 15px; }
section#company #company-container .contents-area .contents-block ul li ul li:last-child {
  margin-bottom: 0; }
section#company #company-container .contents-area .contents-block ul li ul li:before {
  content: "・";
  margin-right: 5px; }

@media screen and (max-width: 767px) {
  section#company #company-container .contents-area .contents-block ul li {
    padding: 20px 2.5%; }
  section#company #company-container .contents-area .contents-block ul li span {
    width: 100%; }
  section#company #company-container .contents-area .contents-block ul li span.ttl {
    margin-bottom: 15px;
    width: 100%; }
  section#company #company-container .contents-area .contents-block ul li ul li {
    font-size: 0.9rem;
    position: relative;
    padding-left: 20px;
    line-height: 1.5;
    margin-bottom: 10px; }
  section#company #company-container .contents-area .contents-block ul li ul li:before {
    position: absolute;
    top: 0;
    left: 0px; } }
/*  ====================
	footer
====================  */
footer {
  padding: 90px 0 40px; }
footer #footer-container .footer-area .footer-block p {
  text-align: center; }

@media screen and (max-width: 767px) {
  footer {
    padding: 30px 0 40px; } }
/*  ====================
	portfolio_detail
====================  */
section#portfolio_detail #portfolio_detail-container h2 {
  font-size: 1.8rem; }
section#portfolio_detail #portfolio_detail-container .contents-area .contents-block.images {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -ms-justify-content: center;
  -webkit-justify-content: center; }
section#portfolio_detail #portfolio_detail-container .contents-area .contents-block.images img {
  max-height: 900px;
  width: auto;
  max-width: 100%;
  box-shadow: 2px 7px 22px 5px rgba(0, 0, 0, 0.4); }
section#portfolio_detail #portfolio_detail-container .contents-area .contents-block.cat {
  margin-top: 50px; }
section#portfolio_detail #portfolio_detail-container .contents-area .contents-block.cat ul {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -ms-justify-content: center;
  -webkit-justify-content: center; }
section#portfolio_detail #portfolio_detail-container .contents-area .contents-block.cat ul li {
  margin: 0 10px 15px;
  padding: 10px 20px;
  background-color: #999;
  color: #fff; }
section#portfolio_detail #portfolio_detail-container .contents-area .contents-block.btn p {
  text-align: center; }

@media screen and (max-width: 767px) {
  section#portfolio_detail #portfolio_detail-container h2 {
    font-size: 1.2rem; }
  section#portfolio_detail #portfolio_detail-container .contents-area .contents-block.cat {
    margin-top: 40px; }
  section#portfolio_detail #portfolio_detail-container .contents-area .contents-block.cat ul {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  section#portfolio_detail #portfolio_detail-container .contents-area .contents-block.cat ul li {
    margin: 0;
    margin-bottom: 12px;
    padding: 10px 20px;
    width: calc(45% - 30px);
    text-align: center; } }