@charset "utf-8";



/* HOME
---------------------------------------------*/

.container-in {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  width:100vw;
  max-width:100%;
  height:100vh;
  /*background:url('');
  background-size:cover;
  background-position:50% 50%;*/
}
.gradient {
  background-image: linear-gradient(30deg, #000000, #333333);
}
.under-container {
  width:100vw;
  max-width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}
.line {
  display:flex;
  position:relative;
  z-index:3;
}
.container-in p{ 
  color:#fff;
  z-index:3;
}
.square {
font-family: "Arial", sans-serif;
  font-size:100px;
  font-weight:900;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  cursor:default;
  transition:all 0.3s;
  color:#fff;
}
.square:hover {
  color:#03A9F4;
}
@-webkit-keyframes rubberBand {
  0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}
  30% {-webkit-transform: scale3d(1.25, .75, 1);transform: scale3d(1.25, .75, 1)}
  40% {-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1)}
  50% {-webkit-transform: scale3d(1.15, .85, 1);transform: scale3d(1.15, .85, 1)}
  65% {-webkit-transform: scale3d(.95, 1.05, 1);transform: scale3d(.95, 1.05, 1)}
  75% {-webkit-transform: scale3d(1.05, .95, 1);transform: scale3d(1.05, .95, 1)}
  100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}
}
@keyframes rubberBand {
  0% {-webkit-transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}
  30% {-webkit-transform: scale3d(1.25, .75, 1);-ms-transform: scale3d(1.25, .75, 1);transform: scale3d(1.25, .75, 1)}
  40% {-webkit-transform: scale3d(0.75, 1.25, 1);-ms-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1)}
  50% {-webkit-transform: scale3d(1.15, .85, 1);-ms-transform: scale3d(1.15, .85, 1);transform: scale3d(1.15, .85, 1)}
  65% {-webkit-transform: scale3d(.95, 1.05, 1);-ms-transform: scale3d(.95, 1.05, 1);transform: scale3d(.95, 1.05, 1)}
  75% {-webkit-transform: scale3d(1.05, .95, 1);-ms-transform: scale3d(1.05, .95, 1);transform: scale3d(1.05, .95, 1)}
  100% {-webkit-transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand
}
/* bubble inspired */
.bubble {
  position:relative;
}
.bubble::before
{
  content: '';
  position:absolute;
  z-index:2;
  top: 35%;
  left: 35%;
  transform: translate(-50%, -50%);
  display: block;
  width: 25vw;
  height: 25vw;
  min-height: 200px;
  min-width: 200px;
  background: linear-gradient(
    270deg,
    #43e97b,
    #38f9d7,
    #e0c3fc,
    #8ec5fc,
    #4facfe,
    #00f2fe,
    #a8edea,
    #fed6e3
  );
  background-size: 1600% 1600%;
  box-shadow: inset 0px -20px 100px 0px rgba(255, 255, 255, 0.48);
  animation: 
    transform 20s linear infinite alternate,
    movement 40s linear infinite alternate,
    shade 60s linear infinite alternate;
}

.bubble::after
{
  content: '';
  position:absolute;
  z-index:2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 15vw;
  height: 10vw;
  min-height: 200px;
  min-width: 200px;
  background: linear-gradient(
    270deg,
    #00f2fe,
    #8ec5fc,
    #38f9d7,
    #4facfe,
    #a8edea,
    #43e97b,
    #e0c3fc,
    #fed6e3
  );
  background-size: 1600% 1600%;
  box-shadow: inset 0px -20px 100px 0px rgba(255, 255, 255, 0.48);
  animation: 
    transform2 20s linear infinite alternate-reverse,
    movement 40s linear infinite alternate-reverse,
    shade 60s linear infinite alternate-reverse;
}

@keyframes transform {
    0%,
  100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; } 
   20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; } 
   40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; } 
   60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; } 
   80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; } 
}

@keyframes transform2 {
  0%{border-radius: 42% 58% 60% 40% / 32% 54% 46% 68%}
  20%{border-radius: 59% 41% 36% 64% / 32% 64% 36% 68%}
  40%{border-radius: 48% 52% 52% 48% / 54% 53% 47% 46%}
  60%{border-radius: 42% 58% 51% 49% / 63% 64% 36% 37%}
  80%{border-radius: 32% 68% 33% 67% / 63% 35% 65% 37%}
  100%{border-radius: 34% 66% 52% 48% / 34% 53% 47% 66%}
}

@keyframes movement {
  from { -webkit-transform: rotate(-1turn) translateY(-50px); transform: rotate(-1turn) translateY(-50px); }
    to { -webkit-transform: none; transform: none; }
}

@keyframes shade {
  0%, 100% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
}



/* element
---------------------------------------------*/
/* concept */
.concept {
 height: 70vh;
 background: linear-gradient(-45deg, rgba(2,0,36, 0.8), rgba(0,177,255, 0.8));
}
.concept-content {
position: absolute;
top: 50%;
left: 50%;
padding-left: 50px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-left: 1px solid #fff;
z-index: 2;
}
.concept-lead {
font-size: 72px;
font-weight:bold;
color:#ffffff;
line-height: 1;
margin-bottom: 30px;
}
.concept-cap {
font-size: 20px;
color:#ffffff;
}
.concept-title {
font-size: 20px;
color:#ffffff;
}
/* outline */
.outline {
display: block;
background-color:#222;
color: #ffffff;
}
.outline-box {
max-width: 50%;
margin: 0 auto;
}
.outline-item {
display: block;
font-family: "Arial", sans-serif;
font-size: 32px;
font-weight: 900;
color: #fff;
text-transform: uppercase;
margin-left: 10px;
margin-bottom: 100px;
}
.outline h2 {
font-size: 50px;
line-height: 1.1;
margin-bottom: 80px;
letter-spacing: 0px;
}

.outline p {
margin: 0 auto;
color: #ffffff;
font-size: 18px;
font-weight: 900;
line-height: 2.4;
margin-bottom: 100px;
padding-top: 40px;
border-top: 1px solid #fff;
}
.outline-title {
font-size: 14px;
font-weight: 400;
color: #ffffff;
margin-bottom: 60px;
letter-spacing: 0px;
}
/* advantage */
.advantage {
display: block;
}
.advantage-bg {
background-size: 150%;
background-image: url(../img/top-advantage-bg.png);
animation: bgiLoop 50s linear infinite;
}
@keyframes bgiLoop {
    0% { background-position: 0 0;}
  100% { background-position: -700px 0;}
}
.advantage-box {
display: block;
padding-top: 20px;
padding-left: 60px;
padding-bottom: 0px;
z-index: 10;
}
.advantage-title {
display: block;
color: #222;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.2em;
margin-left: 10px;
margin-bottom: 0px;
}
.advantage-item {
display: block;
font-family: "Arial", sans-serif;
font-size: 32px;
font-weight: 900;
color: #222;
text-transform: uppercase;
margin-left: 10px;
margin-bottom: 200px;
}
.advantage-head-en {
display: block;
color: #222;
font-family: "Arial", sans-serif;
font-size: 160px;
font-weight: 400;
line-height: 0.8;
letter-spacing: -10px;
margin-bottom: 0px;
}

.advantage-inner {
display: block;
}
.advantage-block-left {
padding-top: 50px;
padding-left: 150px;
padding-right: 20px;
padding-bottom: 100px;
}

.advantage-linkbox a{
display: block;
min-height: 200px;
font-weight: 900;
color: #fff;
background-color: #222;
padding: 70px 60px;
}
.advantage-linkbox a:hover{
background-color: #03A9F4;
}
.advantage-link {
display: block;
width: 100%;
}
.advantage-head {
display: inline-block;
position:  relative;
color: #222;
font-size: 16px;
font-weight: 900;
letter-spacing: -1.5px;
padding-bottom: 15px;
margin-bottom: 30px;
}
.advantage-head:before {
display: inline-block;
position: absolute;
content:  '';
width: 100%;
height: 2px;
left: 0%;
bottom: 4px;
background-color: #222;
}
.advantage-copy {
color: #222;
font-size: 32px;
font-weight: 900;
letter-spacing: -2px;
margin-bottom: 10px;
}
.advantage-text {
color: #222;
font-size: 15px;
line-height: 1.6;
width: 300px;
}
/* point */
.point {
height: auto;
}

.point-title {
display: block;
color: rgba(0,0,0,0.7);
font-size: 12px;
letter-spacing: 0.2em;
margin-bottom: 10px;
}
.point-head {
position:  relative;
display: inline-block;
font-size: 16px;
font-weight: 900;
padding-bottom: 20px;
}
.point-head:before {
content:  '';
width: 100%;
height: 2px;
background-color: #333;
display: inline-block;
position: absolute;
left: 0%;
bottom: 4px;
}
.point-copy {
font-size: 32px;
line-height: 1.1;
margin-top: 50px;
margin-bottom: 50px;
}
.point-text {
font-size: 15px;
line-height: 1.6;
width: 300px;
}

.point-container{
display: grid;
grid-gap: 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
.point-block {
padding: 120px 40px 80px 60px;
}
.point-block-left {
padding: 0;
}
.point-block-right {
padding: 0;
}
.point-item {
display: block;
font-family: "Arial", sans-serif;
font-size: 58px;
font-weight: 900;
color: #fff;
text-transform: uppercase;
margin-bottom: 10px;
}
.label-point {
position: absolute; 
left:60px;
top:100px;
}
@media screen and (max-width: 670px) {

.point-container{
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

}
/* img-wrap */
.img-wrap {
  overflow: hidden;
  position: relative;
}
.img-wrap:before {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}
/* img-animation */
.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}
.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}
@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}

.point-block-left img,
.point-block-right img{
width: 100%;
height: 600px;
object-fit: cover;
}
/* point-research */
.point-research {
background-color:#fafafa;
}

/* point-concept */
.point-concept {
background-color:#eee;
}

/* point-method */
.point-method {
background-color:#f5f5f5;
}


/* case swiper */
.case {
display: block;
background-color:#ffffff;
}
.case-title {
display: block;
color: rgba(0,0,0,0.7);
font-size: 12px;
letter-spacing: 0.2em;
margin-bottom: 0px;
}
.case-item {
display: block;
font-family: "Arial", sans-serif;
font-size: 32px;
font-weight: 900;
color: #333333;
text-transform: uppercase;
margin-bottom: 10px;
}

.swiper-wrapper {
margin-bottom: 60px;
}
.swiper-slide-content {
font-size: 20px;
margin-top: 20px;
margin-left: 20px;
}
.effect-color {
	overflow: hidden;
	position: relative;
}
.effect-color::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition: .3s;
}
.effect-color img {
	transition: .3s;
}
a:hover .effect-color::before {
background: linear-gradient(126deg, rgba(0,106,219,0.7) 0%, rgba(0,233,255,0.7) 90%); 
}
a:hover .effect-color img {
	transform: scale(1.05);
}
.effect-color .material-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
font-size: 80px;
z-index: 20;
  }


/*service-system*/
#service-system-cover {
position: relative;
width: 100%;
height: 50vh;
z-index: 0;
}
.service-system-visual {
background-image: url(../img/top-service-system-bg.png);
}
.parallax-box {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: sticky;
  top: 0;
}
.service-system-box {
display: block;
padding-top: 20px;
padding-left: 60px;
padding-bottom: 0px;
z-index: 10;
}
.service-system-title {
display: block;
color: #ffffff;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.2em;
margin-left: 0px;
margin-bottom: 0px;
}
.service-system-item {
display: block;
font-family: "Arial", sans-serif;
font-size: 32px;
font-weight: 900;
color: #ffffff;
text-transform: uppercase;
margin-left: 0px;
margin-bottom: 0px;
}


.service-system-head-en {
font-size: 180px;
color: #ffffff;
top:1.2em;
white-space: nowrap;
position: absolute;
text-transform: uppercase;
overflow-x: hidden;
}
.service-system-head-en {
  -webkit-animation: urmove 8s linear infinite;
  white-space: nowrap;
  animation: urmove 20s linear infinite alternate;
}
@-webkit-keyframes urmove {
  from {right: 0;}
  to {right: -1600px;}
}
@keyframes urmove {
  from {right: 0;}
  to {right: -1600px;}
}

.service-system-head-ens {
font-size: 100px;
color: #ffffff;
top:3.9em;
white-space: nowrap;
position: absolute;
text-transform: uppercase;
overflow-x: hidden;
}
.service-system-head-ens {
  -webkit-animation: rmove 8s linear infinite;
  white-space: nowrap;
  animation: rmove 10s linear infinite alternate;
}
@-webkit-keyframes rmove {
  from {left: 0;}
  to {left: -1000px;}
}
@keyframes rmove {
  from {left: 0;}
  to {left: -1000px;}
}
@keyframes early 
{ from { opacity:1; } to { opacity:0; } }
.early {
    animation:fadeIn ease-in 1;
    animation-fill-mode:forwards; 
    animation-duration:1s;
    animation-delay: 1.5s
}

.service-system-inner {
display: block;
}
.service-system-left {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 150px;
padding-right: 20px;
}
.service-system-head {
display: inline-block;
position:  relative;
color: #222;
font-size: 16px;
font-weight: 900;
letter-spacing: 0px;
padding-bottom: 15px;
margin-bottom: 30px;
}
.service-system-head:before {
display: inline-block;
position: absolute;
content:  '';
width: 100%;
height: 2px;
left: 0%;
bottom: 4px;
background-color: #222;
}
.service-system-copy {
font-size: 32px;
font-weight: 900;
letter-spacing: 0px;
margin-bottom: 10px;
}
.service-system-text {
font-size: 15px;
line-height: 1.6;
width: 300px;
}
.service-system-linkbox a {
display: block;
max-height: 200px;
font-weight: 900;
color: #fff;
background-color: #222;
padding:70px 60px;
}
.service-system-linkbox a:hover{
background-color: #03A9F4;
}
.service-system-link {
display: block;
width: 100%;
}
/*support*/
.support {
padding-bottom: 100px;
}
.media-block {
padding-top: 20px;
text-align: center;
border-top: 1px solid #ccc;
}
.support-title {
padding-bottom: 20px;
}
.media-logo li{
display:inline-block;
margin:5px 20px;
max-width: 160px;
max-height: 50px;
background-color: #fff;
}
.media-logo li img {
max-height: 36px;
}

/* card */




/* -----------------------------------------------------------------------------

	レスポンシブ

----------------------------------------------------------------------------- */

/* Mobile yoko
---------------------------------------------*/

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

.concept {
 height: 70vh;
}
.concept-lead {
font-size: 50px;
}
#service-system-cover {
height: 70vh;
}
.media-logo li img {
max-height: 30px;
margin-bottom: 10px;
}

}

/* Mobile tate
---------------------------------------------*/

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

.square {
font-size:70px;
}
.concept-content {
width: 65%;
top: 50%;
left: 45%;
padding-left: 30px;
}
.concept-lead {
font-size: 40px;
}
.concept-cap {
font-size: 18px;
}
.concept-title {
font-size: 18px;
}

.outline-box {
max-width: 80%;
margin: 0 auto;
}
.outline-item {
font-size: 32px;
margin-bottom: 100px;
}
.outline h2 {
font-size: 36px;
line-height: 1.1;
margin-bottom: 80px;
letter-spacing: 0px;
}
.outline p {
font-size: 18px;
line-height: 2.4;
margin-bottom: 100px;
padding-top: 40px;
}
.advantage-box {
padding-left: 20px;
}
.advantage-title {
font-size: 13px;
letter-spacing: 0.2em;
margin-left: 0px;
}
.advantage-item {
font-size: 32px;
margin-left: 0px;
margin-bottom: 200px;
}
.advantage-head-en {
font-size: 90px;
line-height: 0.8;
letter-spacing: -10px;
margin-bottom: 0px;
}
.advantage-block-left {
padding-top: 50px;
padding-left: 20px;
padding-bottom: 50px;
}
.advantage-head {
font-size: 16px;
letter-spacing: -1.5px;
padding-bottom: 15px;
margin-bottom: 30px;
}
.advantage-copy {
font-size: 32px;
letter-spacing: -2px;
margin-bottom: 10px;
}
.advantage-text {
font-size: 15px;
line-height: 1.6;
width: 300px;
}
.point-block {
padding: 120px 40px 80px 40px;
}

.service-system-box {
padding-left: 20px;
}
.service-system-title {
font-size: 13px;
letter-spacing: 0.2em;
margin-left: 0px;
}
.service-system-item {
font-size: 32px;
margin-left: 0px;
margin-bottom: 0px;
}
.service-system-head-en {
font-size: 180px;
top:1.2em;
}
.service-system-head-ens {
font-size: 100px;
top:3.9em;
}
.service-system-left {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 20px;
}
.service-system-head {
font-size: 16px;
letter-spacing: 0px;
padding-bottom: 15px;
margin-bottom: 30px;
}
.service-system-copy {
font-size: 32px;
letter-spacing: 0px;
margin-bottom: 10px;
}
.service-system-text {
font-size: 15px;
line-height: 1.6;
width: 300px;
}


}