/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
.solution {
  padding-bottom: 0%!important;
  background: inherit!important;
}
.pahtn {
  color: #666666;
  font-weight: bold;
  font-size:13px;
}
.pahtn a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #666666;
}
.pahtn a:hover{
  color:#0056b9 ;
}
/*ヘッダー*/
.sf_title{
  height:200px;
	text-align: center;
	display: flex;
  justify-content: center;
  align-items: center;
  padding:20px;
}
  .sf_title h1{
font-size:40px;
}

@media screen and (max-width:480px) { 
 .sf_title h1{
font-size:32px;
}
.sf_title{
  height:150px;
}
.sf_title span{
  display:block;
  }
.pahtn {
   padding:10px 0;
  padding-left:10px;
}
}
  
/*メインコンテンツー*/
/*===========================
	reset
===========================*/
@media screen and (max-width: 767px) {
  .footer {
    padding-bottom: 15%;
  }
}
@media screen and (max-width: 768px) {
  #page_top_btn {
    bottom: 10%;
  }
}
/*===========================
	global
===========================*/
.solution {
  padding-bottom:;
}

.solution img {
  width: 100%;
  display: block;
  backface-visibility: hidden;
}

.solution .catalog {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
}
.solution .catalog ul {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.pahtn {
  max-width: 1100px;
  margin:0 auto;
}

.inner {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}

.sp_only {
  display: block;
}

.pc_only {
  display: none;
}

.fnt-blue {
  color: #4699c3;
}

.fnt-green {
  color: #55c5d1;
}

.fnt-yellow {
  color: #ccc900;
}

.fnt-red {
  color: #ff8278;
}

.deco {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 0 .3em;
  color: #fff;
  line-height: 1.4;
  margin: 0 .3em;
}
.deco:before {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  transform: skewX(-20deg);
  content: "";
}
.deco.bg-blue:before {
  background: #4699c3;
}
.deco.bg-green:before {
  background: #55c5d1;
}
.deco.bg-yellow:before {
  background: #ccc900;
}
.deco.bg-red:before {
  background: #ff8278;
}

.solutionBtn {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 768px) {

  .solution .concept {
    background: url("https://8941323.fs1.hubspotusercontent-na1.net/hubfs/8941323/contents_bg.png") repeat-y top center;
    background-size: 2400px;
    position: relative;
    padding-bottom: ;
  }

  .inner {
    padding: 0;
  }

  .sp_only {
    display: none;
  }

  .pc_only {
    display: block;
  }

  .solutionBtn {
    width: 73.6%;
    margin: 0 auto;
    transition: .3s;
    display: block;
  }
  .solutionBtn:hover {
    opacity: 0.8;
  }

  .solution .catalog {
    width: 5%;
    max-width: 79px;
    bottom: 10%;
    right: 0;
    transition: .3s;
  }
  .solution .catalog:hover {
    opacity: 0.8;
  }
  .solution .catalog ul {
    display: block;
  }
}
/*===========================
	fv
===========================*/
.solution .fv {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding-bottom: 5rem;
}
.solution .fv:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  /*四角形を傾けます*/
  transform: skewY(-45deg);
  transform-origin: top center;
  z-index: -1;
  width: 120%;
  height: 220%;
  background: #e9f1f7;
}
.solution .fv .ttlArea {
}
.solution .fv .ttlArea h1 {
  position: relative;
  border-bottom: solid 3px #2a56b9;
  padding-bottom: 1%;
  width: 25%;
}
.solution .fv .kvArea {
  margin-top: 2rem;
  position: relative;
  padding-top: 8%;
  
}
.solution .fv .txtArea {
  text-align: center;
}
.solution .fv .txtArea .catch {
  font-size: 4.2666666667vw;
  margin-bottom: 1rem;
  letter-spacing: -.05em;
}
.solution .fv .txtArea .catch strong {
  font-weight: normal;
  font-size: 1.3em;
  color: #2a56b9;
}

@media screen and (min-width: 768px) {
  .solution .fv {
    background: #FFF;
    padding-bottom: 5%;
  }
  .solution .fv .ttlArea {
    padding-top: 30px;
  }
  .solution .fv .ttlArea h1 {
    width: 229px;
  }
  .solution .fv .kvArea {
    margin-top: 3rem;
    padding: 0;
  }
  .solution .fv .txtArea .catch {
    font-size: 4.1428571429vw;
  }
  .solution .fv .txtArea .txt {
    font-size: 1.7142857143vw;
    line-height: 1.8;
  }
}
@media (min-width: 1400px) {
  .solution .fv .txtArea .catch {
    font-size: 58px;
  }
  .solution .fv .txtArea .txt {
    font-size: 24px;
  }
  .solution .fv .cubeList ul li {
    font-size: 18px;
  }
}
/*===========================
	slider
===========================*/
.solution .fv .slider {
  width: 90%;
  max-width: 1190px;
  margin: 0 auto 2rem;
}

/*===========================
	cube
===========================*/
.solution .cubeBox {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%)!important;
  -ms-transform: translate(-50%, 0%)!important;
  transform: translate(-50%, 0%)!important;
  z-index: 1;
}
.solution .stage {
  -webkit-perspective: 1000!important;
  perspective: 1000!important;
  -webkit-perspective-origin: 50% 50%!important;
  perspective-origin: 50% 50%!important;
  width: 18vmin!important;
  height: 18vmin!important;
  margin: 0 auto!important;
  position: relative;
}
.solution .cube {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d!important;
  transform-style: preserve-3d!important;
}
.solution .wall {
  width: calc(100% + 1px)!important;
  height: 100%!important;
  text-align: center!important;
  font-weight: bold;
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
}
.solution #front {
  background-color: transparent!important;
  -moz-transform: translateZ(calc(18vmin / 2))!important;
  -webkit-transform: translateZ(calc(18vmin / 2))!important;
  transform: translateZ(calc(18vmin / 2))!important;
}
.solution #back {
  background-color: transparent;
  -moz-transform: rotateY(180deg) translateZ(calc(18vmin / 2))!important;
  -webkit-transform: rotateY(180deg) translateZ(calc(18vmin / 2))!important;
  transform: rotateY(180deg) translateZ(calc(18vmin / 2))!important;
}
.solution #left {
  background-color: transparent;
  -moz-transform: rotateY(90deg) translateZ(calc(18vmin / 2))!important;
  -webkit-transform: rotateY(90deg) translateZ(calc(18vmin / 2))!important;
  transform: rotateY(90deg) translateZ(calc(18vmin / 2))!important;
}
.solution #right {
  background-color: transparent;
  -moz-transform: rotateY(-90deg) translateZ(calc(18vmin / 2))!important;
  -webkit-transform: rotateY(-90deg) translateZ(calc(18vmin / 2))!important;
  transform: rotateY(-90deg) translateZ(calc(18vmin / 2))!important;
}
.solution #top {
  background-color: transparent;
  -moz-transform: rotateX(90deg) translateZ(calc(18vmin / 2))!important;
  -webkit-transform: rotateX(90deg) translateZ(calc(18vmin / 2))!important;
  transform: rotateX(90deg) translateZ(calc(18vmin / 2))!important;
}
.solution #bottom {
  background-color: transparent;
  -moz-transform: rotateX(-90deg) translateZ(calc(18vmin / 2))!important;
  -webkit-transform: rotateX(-90deg) translateZ(calc(18vmin / 2))!important;
  transform: rotateX(-90deg) translateZ(calc(18vmin / 2))!important;
}

@media screen and (min-width: 768px) {
  .solution .stage {
    width: 150px;
    height: 150px;
  }
  .solution #front {
    -moz-transform: translateZ(calc(150px / 2));
    -webkit-transform: translateZ(calc(150px / 2));
    transform: translateZ(calc(150px / 2));
  }
  .solution #back {
    -moz-transform: rotateY(180deg) translateZ(calc(150px / 2));
    -webkit-transform: rotateY(180deg) translateZ(calc(150px / 2));
    transform: rotateY(180deg) translateZ(calc(150px / 2));
  }
  .solution #left {
    -moz-transform: rotateY(90deg) translateZ(calc(150px / 2));
    -webkit-transform: rotateY(90deg) translateZ(calc(150px / 2));
    transform: rotateY(90deg) translateZ(calc(150px / 2));
  }
  .solution #right {
    -moz-transform: rotateY(-90deg) translateZ(calc(150px / 2));
    -webkit-transform: rotateY(-90deg) translateZ(calc(150px / 2));
    transform: rotateY(-90deg) translateZ(calc(150px / 2));
  }
  .solution #top {
    -moz-transform: rotateX(90deg) translateZ(calc(150px / 2));
    -webkit-transform: rotateX(90deg) translateZ(calc(150px / 2));
    transform: rotateX(90deg) translateZ(calc(150px / 2));
  }
  .solution #bottom {
    -moz-transform: rotateX(-90deg) translateZ(calc(150px / 2));
    -webkit-transform: rotateX(-90deg) translateZ(calc(150px / 2));
    transform: rotateX(-90deg) translateZ(calc(150px / 2));
  }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
  .solution .stage {
    width: 100px;
    height: 100px;
  }
  .solution #front {
    -moz-transform: translateZ(calc(100px / 2));
    -webkit-transform: translateZ(calc(100px / 2));
    transform: translateZ(calc(100px / 2));
  }
  .solution #back {
    -moz-transform: rotateY(180deg) translateZ(calc(100px / 2));
    -webkit-transform: rotateY(180deg) translateZ(calc(100px / 2));
    transform: rotateY(180deg) translateZ(calc(100px / 2));
  }
  .solution #left {
    -moz-transform: rotateY(90deg) translateZ(calc(100px / 2));
    -webkit-transform: rotateY(90deg) translateZ(calc(100px / 2));
    transform: rotateY(90deg) translateZ(calc(100px / 2));
  }
  .solution #right {
    -moz-transform: rotateY(-90deg) translateZ(calc(100px / 2));
    -webkit-transform: rotateY(-90deg) translateZ(calc(100px / 2));
    transform: rotateY(-90deg) translateZ(calc(100px / 2));
  }
  .solution #top {
    -moz-transform: rotateX(90deg) translateZ(calc(100px / 2));
    -webkit-transform: rotateX(90deg) translateZ(calc(100px / 2));
    transform: rotateX(90deg) translateZ(calc(100px / 2));
  }
  .solution #bottom {
    -moz-transform: rotateX(-90deg) translateZ(calc(100px / 2));
    -webkit-transform: rotateX(-90deg) translateZ(calc(100px / 2));
    transform: rotateX(-90deg) translateZ(calc(100px / 2));
  }
}
/*===========================
	concept
===========================*/

/* Slider */
.slick-loading .slick-list {
  background: #fff!important;
}

.sp_img{
  display:none;
}
.solution .concept {
  padding-top: 5rem;
}
.solution .concept h2 {
  margin-bottom: 3rem;
}
.solution .concept .cubeList {
  padding-bottom: ;
}
.solution .concept .cubeList ul {
  margin-bottom: -8%;
}
.solution .concept .cubeList ul li {
  margin-bottom: 8%;
}
.solution .concept .cubeList ul li .img {
  width: 80%;
  margin-bottom: 3%;
}
.solution .concept .cubeList ul li .img img {
  width: 100%;
}
.solution .concept .cubeList ul li p {
  width: 100%;
}
.solution .concept .conceptImg {
  margin-bottom: 4rem;
}
.solution .concept .youtube {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 6rem;
  height: 0;
  position: relative;
  padding-top: 56.25%;
}
.solution .concept .youtube:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 10px;
  left: -10px;
  display: block;
  background-image: linear-gradient(-45deg, #e9f1f7 25%, #d5eaf8 25%, #d5eaf8 50%, #e9f1f7 50%, #e9f1f7 75%, #d5eaf8 75%, #d5eaf8);
  background-size: 20px 20px;
  z-index: -1;
}
.solution .concept .youtube video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.solution .concept .conceptList h3 {
  font-size: 5.0666666667vw;
  line-height: 1.8;
  margin-bottom: 3%;
}
.solution .concept .conceptList li {
  margin-bottom: 4rem;
}
.solution .concept .conceptList .box p {
  padding-left: 1.3em;
  line-height: 1.8;
}
.solution .concept .conceptList .box .disc:before {
  content: "●";
  display: inline-block;
  font-size: .8em;
  text-indent: -1.3em;
}
.solution .concept .conceptList .wrap {
  margin-bottom: 5%;
}
.solution .concept .conceptList .img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .sp_img{
  display:block;
}
    .pc_img{
  display:none;
}
  .solution .concept {
    padding-top: 5%;
  }
  .solution .concept .ttlArea {
    background: linear-gradient(to left, transparent 50%, #2a56b9 50%);
  }
  .solution .concept h2 {
    max-width: 1150px;
    margin: 0 auto 5%;
    line-height: 0;
  }
  .solution .concept .cubeList {
    padding-bottom: 14%;
  }
  .solution .concept .cubeList ul {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-left: -30px;
  }
  .solution .concept .cubeList ul li {
    width: calc(100% / 3);
    display: block;
    margin-left: 30px;
    margin-bottom: 0;
    font-size: 1.2857142857vw;
  }
  .solution .concept .cubeList ul li .img {
    
  }
  .solution .concept .cubeList ul li p {
    
  }
  .solution .concept .conceptImg {
   
  }
  .solution .concept .youtube {
    padding-top: 49.25%;
    margin: 0 auto 12%;
  }
  .solution .concept .youtube:before {
    top: 9%;
    left: -5%;
  }
  .solution .concept .conceptList li {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 2.6%;
  }
  .solution .concept .conceptList h3 {
    font-size: 2vw;
  }
  .solution .concept .conceptList .wrap {
    width: 73%;
    margin-bottom: 0;
  }
  .solution .concept .conceptList .img {
    display: block;
    width: 23%;
  }
}
@media (min-width: 1400px) {
  .solution .concept .conceptList h3 {
    font-size: 2.8rem;
  }
}
/*===========================
	concept
===========================*/
.systemImg{
  margin-top:100px;
  text-align:center;
  width: 90%;
  max-width: 1150px;
  margin: 0 auto;
  padding-top:150px;
  padding-bottom:100px;
  box-sizing: border-box;
}
.systemImg h3{
  margin:40px 0;
}
.systemImg h3::after {
  content: '';
  width: 110px;
  height: 3px;
  display: inline-block;
  background-color: #005bd0;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 55px)
}


/*===========================
	lineup
===========================*/
.lineup{
  margin-top:100px;
  text-align:center;
  width: 90%;
  max-width: 1150px;
  margin: 0 auto;
  padding-top:150px;
  padding-bottom:100px;
  box-sizing: border-box;
}
.lineup h3{
  margin-top:40px;
}
.lineup h3::after {
  content: '';
  width: 110px;
  height: 3px;
  display: inline-block;
  background-color: #005bd0;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 55px)
}

.solution .lineup {
  background: #fff!important;
  padding: 4% 0;
}
/*ソリューションラインナップ*/
.br {
  display: block;
  font-weight: bold;
  font-size:12px;
}
.button_wrap {
  margin-top:20px;
}
.button_wrap a {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
  border: 2px solid #0056b9;
  text-decoration: none;
  border-radius: 2vh;
  font-weight: bold;
  padding: 10px;
  font-size:20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.button_wrap a:hover{
  background-color: #e9fafa;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.button_wrap a img {
  margin-right: 10px;
}
@media screen and (max-width: 480px) {
  .sp_br{
  }
  .solution h3{
    font-size:22px;
}

@media screen and (min-width: 768px) {
  .solution .lineup {
    padding: 2% 0;
  }
  .solution .lineup h2 {
    font-size: 2.5714285714vw;
    margin-bottom: 1.7%;
  }
  .solution .lineup ul {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    margin-left: -2%;
    margin-bottom: 0;
    justify-content: space-between;
  }
  .solution .lineup ul li {
    width: calc(100% / 3);
    margin-left: 2.4%;
    margin-bottom: 0;
  }
  .solution .lineup ul li a:after {
    content: "";
    display: block;
    width: 7%;
    height: 17px;
    background: url("../img/solution/arrow_btm.png") no-repeat center center;
    background-size: contain;
    margin: 4% auto 0;
    transition: .3s;
    pointer-events: none;
  }
  .solution .lineup ul li a:hover:after {
    transform: translate(0, 5px);
  }
}
@media (min-width: 1400px) {
  .solution .lineup h2 {
    font-size: 36px;
  }
}