@charset "UTF-8";
/*-----------------------------------------------------------------------
 modifier
----------------------------------------------------------------------- */
.is-inline_wrap {
  letter-spacing: -0.4em;
}
.is-br {
  display: block;
}
.is-split {
  display: inline-block;
}
.is-pc_br {
  display: block;
}
.is-sp_br {
  display: none; 
}
.is-font_bold {
  font-weight: bold;
}
.is-sp_img {
  display: none;
}
.is-before_icon::before,
.is-after_icon::after {
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: '';
  display: inline-block;
  vertical-align: middle;
}
.is-before_symbol::before,
.is-after_symbol::after {
  content: '';
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.is-disabled {
  display: none;
}
@media screen and (max-width: 768px) {
  .is-sp_br {
    display: block;
  }
  .is-pc_br {
    display: none;
  }
}
@media screen and (max-width: 583px) {

  .is-sp_br {
    display: block;
  }
  .is-pc_img {
    display:none;
  }
  .is-sp_img {
    display: block;
    margin: 0 auto;
  }
}


/*-----------------------------------------------------------------------
 container
----------------------------------------------------------------------- */
html {
  font-size: 100%;
}
/*main :hover {
  opacity: 1.0;
}*/
main a {
  display: inline-block;
  text-decoration: none;
}
main {
  background: transparent;
  padding: 0
}
button:hover,
a:hover{
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.container {
  margin: 0 auto;
}
.com-inner_wrap {
  margin: 0 auto;
  max-width: 1000px;
  width: 88%;
}
.com-img_wrap {
  display: block;
  letter-spacing: -0.4em;
  margin: 0 0 3.5%;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .com-inner_wrap {
    max-width: none;
  }
}
@media screen and (max-width: 583px) {
  .com-inner_wrap {
    max-width: 480px;
    width: 94%;
  }
  .com-inner {
    padding: 10% 0 7%;
  }
}


/*-----------------------------------------------------------------------
 main_visual
----------------------------------------------------------------------- */
.main_visual {
  background: #040509;
}
.main_visual-inner_wrap {
  margin: 0 auto;
  /* max-width: 1440px; */
}
.main_visual-inner {
  background: #000;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.main_visual-head {
  background: transparent;
  margin: 0 auto;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .main_visual-inner {
    height: 321px;
  }
  .main_visual-head {
    left: 50%;
    min-width: 1200px;
    position: absolute;
    top: 0;
    transform: translateX(-48%);
    width: 1290px;
  }
}
@media screen and (min-width: 1200px) {
  .main_visual-inner {
    height: 478px;
  }
  .main_visual-head {
    width: 1920px;
  }
}
@media screen and (max-width: 767px) {
  .main_visual-inner {
    height: auto;
  }
  .main_visual-head {
    margin: 0 0 0 -37%;
    min-width: auto;
    position: static;
    transform: none;
    width: 180%;
  }
}
@media screen and (max-width: 583px) {
  .main_visual-head {
    margin: 0;
    width: 100%;
  }
}


/*-----------------------------------------------------------------------
 main_visual
----------------------------------------------------------------------- */
nav {
  background: #0e0e0e;
}
nav .com-inner {
  padding: 0;
}
nav ul {
  margin: 0 auto;
  width: 100%;
  max-width: 760px;
}
nav li {
  display: inline-block;
  position: relative;
  width: 50%;
  border-right: 1px solid #222;
}
nav li:first-child {
  border-left: 1px solid #222;
}
nav a {
  padding: 10% 14% 7%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  nav .com-inner_wrap {
    max-width: none;
    width: 100%;
  }
  nav ul {
    border: none;
  }
  nav li {
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
  }
}
@media screen and (max-width: 583px) {
  nav a {
    padding: 12% 10% 2%;
  }
}


/*-----------------------------------------------------------------------
 lead
*----------------------------------------------------------------------- */
/* font settings 1199px to 768px */
.lead-text {
  font-size: calc(1.1875rem + ((1vw - 7.68px) * 1.1601)); /* 24px to 19px */
}
/* content settings */
.lead {
  background: url(../img_new/lead_bg.jpg) no-repeat center top;
  background-size: cover;
}
.lead .com-inner {
  padding: 6% 0 10%;
}
.lead-head {
  margin: 0 auto 7%;
  width: 57%;
}
.lead-text {
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  line-height: 2.4;
  margin: 0 auto;
}
.lead-text span:not(.is-large_text) {
  display: block;
  margin: 0 auto 1.4em;
}
@media screen and (min-width: 1199px) {
  .lead-text {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  /* text settings 767px to 584px*/
  .lead-text {
    font-size: calc(0.875rem + ((1vw - 5.84px) * 1.6393)); /* 17px to 14px; */
  }
  /* content settings */
  .lead-head {
    margin: 0 auto 8%;
    width: 72%;
  }
  .lead-text span:not(.is-large_text) {
    display: inline;
  }
}
@media screen and (max-width: 583px) {
  /* font settings 583px to 320px */
  .lead-text {
    font-size: calc(0.8125rem + ((1vw - 3.2px) * 0.7605));
 /* 15px to 13px */
  }
  /* content settings */
  .lead .com-inner {
    padding: 6% 0 14%;
  }
  .lead-text {
    line-height: 2;
  }
  .lead-text .is-sp_hide {
    display: none;
  }
}


/*-----------------------------------------------------------------------
 project
*----------------------------------------------------------------------- */
.project-num1 {
  background: url(../img_new/project_num1_bg.jpg) no-repeat center top;
  background-size: cover;
}
.project-num1 .com-inner {
  padding: 5% 0;
}
.project-head {
  margin: 0 auto 3.5%;
  width: 82%;
}
@media screen and (max-width: 767px) {
  .project-num1 .com-inner {
    padding: 5.5% 0;
  }
}


/*-----------------------------------------------------------------------
 project-num2
*----------------------------------------------------------------------- */
.project-num2 {
  background: #111;
}
.project-num2 .com-inner {
  padding: 6% 0;
}
.project-num2_list li {
  position: relative;
  width:46%;
}
.project-num2_list li:nth-of-type(1) {
  margin: 0 8% 0 0;
}
.project-num2_list li img {
  transform: scale(1, 1.0117);
}
.project-movie_wrap.main {
  height: 0;
  margin: 0 auto;
  padding: 0 0 45.9%; /* 560:315=81.6:x */
  position: relative;
  width: 81.6%;
}
.project-movie_wrap.main .thumb {
  left: 0;
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}
/* .project-movie_wrap.main:hover::before {
  opacity: 0;
} */
.project-movie_wrap.main:hover::after {
  opacity: 1.0;
}
.project-movie_wrap.main::before,
.project-movie_wrap.main::after {
  left: 0;
  height: 100%;
  position: absolute;
  pointer-events: none;;
  top: 0;
  transition: 0.2s ease;
  width: 100%;
}
.project-movie_wrap.main::before {
  background-image: url(../img_new/project_movie_black.png);
  z-index: 3;
}
.project-movie_wrap.main::after {
  background-image: url(../img_new/project_movie_red.png);
  opacity: 0;
  z-index: 4;
}
.project-movie_wrap.sub {
  height: 0;
  margin: 0 auto;
  padding: 0 0 56.25%; /* 560:315=100:x */
  position: relative;
  width: 100%;
}
.project-movie_wrap iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 583px) {
  .project-movie_wrap.main {
    padding: 0 0 50.625%; /* 560:315=90:x */
    width: 90%;
  }
}


/*-----------------------------------------------------------------------
 project-num3
*----------------------------------------------------------------------- */
/* text settings 1199px to 768px */
.project-num3_text .is-large_text {
  font-size: calc(1.875rem + ((1vw - 7.68px) * 0.464)); /* 40px to 30px */
}
.project-num3 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+25,c0c0c0+100 */
  background: #ffffff; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 25%, #c0c0c0 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 25%,#c0c0c0 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 25%,#c0c0c0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.project-num3_text .com-inner {
  padding: 6% 0 8%;
  position: relative;
}
/*
.project-num3_text .com-inner::before {
  background-image: url(../img/project_icon.png);
  background-position: top center;
  bottom: 0;
  height: 0;
  margin: 0 -0.5% -0.2% 0;
  padding: 0 0 26.6%;
  position: absolute;
  right: 0;
  width: 20.6%
}
*/
.project-num3 .lead-text {
  color: #121111;
  font-weight: bold;
  text-shadow: 0 0 0 #000, 0 0 8px rgba(0, 0, 0, 0.2);
}
.project-num3_text .is-large_text {
  margin: 0 2px 0 3px;
  letter-spacing: 0.14em;
  position: relative;
  top: 0.07em;
}
.project-num3_step {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2964be+0,2964be+25,003496+100 */
  background: #2964be; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #2964be 0%, #2964be 25%, #003496 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #2964be 0%,#2964be 25%,#003496 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #2964be 0%,#2964be 25%,#003496 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2964be', endColorstr='#003496',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  
  position: relative;
  z-index: 1;
}
.project-num3_step.com-inner_wrap {
  max-width: 1536px;
}
.project-num3_step .com-inner {
  padding: 4.5% 5% 2%;
}
.project-num3_step-head {
  margin: 0 auto 4%;
  width: 82%;
}
.project-num3_list li {
  color: #fff;
  vertical-align: top;
  width: 23.125%
}
.project-num3_list li:not(:last-of-type) {
  margin: 0 2.5% 0 0;
}
.project-num3_list li:last-of-type {
  margin: 0 ;
}
.project-num3_list li:nth-of-type(odd) .is-img_wrap::after {
  display: none;
}
.project-num3_list li img {
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin: 0 0 10px;
}
.project-num3_list li p {
  margin: 0 auto;
  text-align: left;
}
.project-num3_bottom .com-inner {
  padding: 0 0 8%;
}
@media screen and (min-width: 1200px) {
  .project-num3_text .is-large_text {
    font-size: 40px;
  }
}
@media screen and (max-width: 1199px) {
  /*
  .project-num3_text .com-inner::before {
    background-position: bottom center;
    margin: 0 1.3% -2.8% 0;
    width: 16%;
  }
  */
  .project-num3_step .com-inner {
    padding: 5.6% 10% 3.5%;
  }
  .project-num3_step-head {
    margin: 0 auto 6.5%;
    width: 100%;
  }
  .project-num3_list li {
    color: #fff;
    vertical-align: top;
    text-align: left;
    width: 45%
  }
  .project-num3_list li:nth-of-type(odd) {
    margin: 0 10% 0 0;
  }
  .project-num3_list .is-img_wrap {
    position: relative;
  }
  .project-num3_list li:nth-of-type(odd) .is-img_wrap::after {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    display: block;
    height: 18px;
    margin: -5.5% -12% 0 0;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    right: 0;
    width: 18px;
  }
  .project-num3_list li:nth-of-type(even) {
    margin: 0;
  }
  .project-num3_list li:nth-of-type(-n + 2) {
    margin-bottom: 3.8%;
  }
}
@media screen and (max-width: 767px) {
  /* text settings 767px to 320px */
  .project-num3_text .is-large_text {
    font-size: calc(1.625rem + ((1vw - 5.84px) * 3.2787)); /* 32px to 26px */
  }
  /* content settings */
  .project-num3_step .com-inner {
    padding: 8% 7% 4%;
  }
  /*
  .project-num3_text .com-inner::before {
    width: 36%;
    padding: 0 0 83%;
    right: 50%;
    margin: 0 -18% -8.4% 0;
  }
  */
  .project-num3_bottom .com-inner {
    padding: 0 0 11%;
  }
  .project-num3_list li p {
    font-size: 12px;
  }
}
@media screen and (max-width: 583px) {
  .project-num1 .com-inner {
    padding: 7% 0 9%;
  }
  .project-head {
    margin: 0 auto 5%;
    width: 92%;
  }
  .project-movie_wrap {
    padding: 0 0 51.75%; /* 560:315=92:x */
    width: 92%;
  }
  .project-num3_text .com-inner {
    padding: 6% 0 9%;
  }
  .project-num3_step-head {
    margin: 0 0 8.5% -5%;
    width: 110%;
  }
}
@media screen and (max-width: 479px) {
  .project-num2 .com-inner {
    padding: 10% 0;
  }
  .project-num2_list li {
    width: 90%;
  }
  .project-num2_list li:nth-of-type(1) {
    margin: 0 0 6% 0;
  }
  .project-num3_text .com-inner {
    padding: 6% 0 12%;
  }
  .project-num3_step .com-inner {
    padding: 9% 7% 7%;
  }
  .project-num3_step-head {
    margin: 0 0 9.5% -5%;
  }
  .project-num3_list li {
    width: 100%;
  }
  .project-num3_list li:not(:last-of-type) {
    margin: 0 auto 7% !important;
  }
  .project-num3_list li:nth-of-type(odd) .is-img_wrap::after {
    display: none;
  }
  .project-num3_list li p {
    font-size: 11px;
  }
  .project-num3_bottom .com-inner {
    padding: 0 0 14%;
  }
}


/*-----------------------------------------------------------------------
 thought
*----------------------------------------------------------------------- */
.thought {
  background: url(../img_new/thought_bg.jpg) no-repeat center top;
  background-size: cover;
}
.thought .com-inner {
  padding: 8% 0;
}
.thought-head {
  margin: 0 auto 8%;
  width: 60.4%;
}
.thought p {
  width: 100%;
}
.thought_nisimura {
  margin: 0 auto 8%;
}
.thought_svenson {
  margin: 0 auto 8%;
}
.thought_raphael {
  margin: 0 auto;
}
@media screen and (max-width: 583px) {
  .thought .com-inner {
    padding: 14% 0;
  }
  .thought-head {
    margin: 0 auto 12%;
    width: 100%;
  }
  .thought p {
    max-width: 380px;
  }
  .thought_nisimura,
  .thought_svenson {
    margin: 0 auto 14%;
  }
}


/*-----------------------------------------------------------------------
 new_service
----------------------------------------------------------------------- */
.new_service_num1 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eb4945+1,eb4945+44,e7181b+68,d21618+88,b31311+100 */
background: #eb4945; /* Old browsers */
background: -moz-linear-gradient(-3deg, #eb4945 1%, #eb4945 44%, #e7181b 72%, #d21618 88%, #b31311 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-3deg, #eb4945 1%,#eb4945 44%,#e7181b 72%,#d21618 88%,#b31311 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(177deg, #eb4945 1%,#eb4945 44%,#e7181b 72%,#d21618 88%,#b31311 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb4945', endColorstr='#b31311',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.new_service_num1 .com-inner {
  padding: 1.3% 0;
}
.new_service-head {
  margin: 0 auto;
  width: 77.6%;
}
.new_service_num2 {
  background: url(../img_new/project_num1_bg.jpg) no-repeat center top;
  background-size: cover;
}
.new_service_num2 .com-inner {
  padding: 5% 0 8%;
}
.new_service_num2 p {
  margin: 0 auto 7%;
  width: 98%;
}
.new_service_num2 a {
  margin: 0 auto;
  width: 55%;
}
@media screen and (max-width: 583px) {
  .new_service_num1 .com-inner {
    padding: 1.8% 0;
  }
  .new_service_num2 .com-inner {
    padding: 14% 0 13%;
  }
  .new_service_num2 p {
    margin: 0 auto 10%;
  }
  .new_service_num2 a {
    width: 90%;
  }
}


/*-----------------------------------------------------------------------
 sns
----------------------------------------------------------------------- */

.share_sns .inner {
	background: #fff;
	margin: 4% auto 4%;
	padding: 2.9% 0;
	position: relative;
	text-align: left;
	width: 76%;
}
.share_sns-text {
	margin: 0 0 0 12%;
	width: 18%; /* 862:229=100:x */
}
.share_sns-list {
	margin: 0 6% 0 0;
	text-align: right;
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	right:0;
	width: 104%; /* ここでsns画像のサイズ調整 */
}
.share_sns-list a {
	display: block;
}
.share_sns-list a:hover {
	-webkit-opacity: 0.6;
	-moz-opacity: 0.6;
	opacity: 0.6;
}
.share_sns-list li:nth-of-type(1) {
	margin: 0 2% 0 0%; /* 1000:44=100:x */
	width: 10.5%; /* 1000:105=100:x */
}
.share_sns-list li:nth-of-type(2),
.share_sns-list li:nth-of-type(3) {
	margin-right: 3%; /* 1000:50=100:x */
	width: 9.5%; /* 1000:95=100:x */
}
.share_sns-list li:nth-of-type(4) {
	width: 9.3%; /* 1000:93=100:x */
	margin-right: 8%;
}
@media screen and (max-width: 767px) {
	.share_sns .inner {
		width: 94%;
	}
}
@media screen and (max-width: 583px) {
	.share_sns .inner {
		width: 100%;
	}
}

/*-----------------------------------------------------------------------
 scroll Top
----------------------------------------------------------------------- */
#floatToTop {
  background: #c32d26;
  border-radius: 50%;
  border: 3px solid #fff;
  bottom: 0;
  box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.3);
  height: 80px;
  margin: 0 4% -20% 0;
  position: fixed;
  right: 0;
  text-align: center;
  transition: 0.3s ease;
  width: 80px;
  z-index: 3;
}
#floatToTop.is-floated {
  margin: 0 4% 50px 0;
}
#floatToTop::before {
  border-top: 6px solid #fff;
  border-right: 6px solid #fff;
  content: '';
  display: inline-block;
  height: 26px;
  left: 50%;
  margin: -15px 0 0 -15px;
  position: absolute;
  top: 59%;
  transform: rotate(-45deg);
  width: 26px;
}
@media screen and (max-width: 767px) {
  #floatToTop {
    height: 60px;
    width: 60px;
  }
  #floatToTop.is-floated {
    margin: 0 4% 30px 0;
  }
  #floatToTop::before {
    height: 18px;
    margin: -11px 0 0 -12px;
    width: 18px;
  }
}


/*-----------------------------------------------------------------------
 fade
----------------------------------------------------------------------- */
.scroll_fade {
  opacity: 0;
  position: relative;
  transform: translateY(-20px);
  transition: transform 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0.5s, opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0.5s;
}
.scroll_fade.is-fade {
  opacity: 1.0;
  transform: translateY(0);
}
/* @media screen and (max-width: 767px) {
  .scroll_fade {
    opacity: 1.0 !important;
    transform: none !important;
    transition: none !important;
  }
} */