/*============================================
 CARLIFE SUPPORT
============================================*/
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
height: auto;
margin: 0% 0% 10% 0%;
padding: 0% 0% 0% 100px;
}
.box {
z-index: ;
width: 100%;
overflow: hidden;
filter: drop-shadow(8px 8px 9px rgba(0,0,0,0.3));
}
.box .boxInner {
width: inherit;
height: inherit;
margin: 0% 0% 2% 0%;
padding: 20% 0% 20% 0%;
background-image: url(../carlife_support/image_01.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_info {
z-index: 7;
width: 100%;
padding: 55px 2% 0% 80px;
font-size: 250%;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
color: #000;
line-height: 100%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 36px 36px;
background-position: left 66px top 74px;
}


.greeting {
font-size: 40%;
margin: 2.5% 0% -1.25% 0%;
text-align: left;
font-weight: 500;
letter-spacing: 2px;
color: #000;
line-height: 180%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}
.sign {
font-size: 40%;
margin: 3.5% 0% -2.25% 0%;
text-align: right;
font-weight: 500;
letter-spacing: 2px;
color: #000;
line-height: 180%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}
.service {
font-size: 40%;
margin: 5% 0% -2.5% 0%;
text-align: left;
font-weight: 500;
letter-spacing: 2px;
color: #000;
line-height: 180%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}

.container_02 {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
height: auto;
margin: 0% 0% 10% 0%;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 36px 36px;
background-position: right 40.7% top 68px;
}
.box_02 {
z-index: ;
width: 100%;
overflow: hidden;
filter: drop-shadow(8px 8px 9px rgba(0,0,0,0.3));
}
.box_02 .boxInner {
width: inherit;
height: inherit;
padding: 30% 0% 30% 0%;
background-image: url(../carlife_support/image_05.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_02_info {
z-index: 7;
width: 75%;
padding: 50px 2% 0% 3%;
font-size:250%;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
color: #000;
line-height: 100%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/no_01.svg);
background-size: 35% auto;	
background-position: right -10% top 0%;
background-repeat: no-repeat;
}

.container_03 {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
height: auto;
margin: 0% 0% 10% 0%;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 36px 36px;
background-position: right 40.7% top 68px;
}
.box_03 {
z-index: ;
width: 100%;
overflow: hidden;
filter: drop-shadow(8px 8px 9px rgba(0,0,0,0.3));
}
.box_03 .boxInner {
width: inherit;
height: inherit;
padding: 30% 0% 30% 0%;
background-image: url(../carlife_support/image_03.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_03_info {
z-index: 7;
width: 75%;
padding: 50px 2% 0% 3%;
font-size:250%;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
color: #000;
line-height: 100%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/no_02.svg);
background-size: 35% auto;	
background-position: right -10% top 0%;
background-repeat: no-repeat;
}

@media(max-width: 1500px){
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
height: auto;
margin: 0% 0% 10% 18%;
padding: 0% 0% 0% 0%;
}
.box {
z-index: ;
width: 100%;
overflow: hidden;
filter: drop-shadow(8px 8px 9px rgba(0,0,0,0.3));
}
.box .boxInner {
width: inherit;
height: inherit;
margin: 0% 0% 4% 0%;
padding: 25% 0% 25% 0%;
background-image: url(../carlife_support/image_01.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_info {
z-index: 7;
width: 100%;
padding: 30px 2% 0% 1%;
font-size: 200%;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
color: #000;
line-height: 100%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 26px 26px;
background-position: left 0% top 46px;
}


.greeting {
font-size: 41%;
margin: 4% 0% -2% 0%;
text-align: left;
font-weight: 500;
letter-spacing: 2px;
color: #000;
line-height: 200%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}
.sign {
font-size: 41%;
margin: 6% 0% -3% 0%;
text-align: right;
font-weight: 500;
letter-spacing: 2px;
color: #000;
line-height: 200%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}
.service {
font-size: 41%;
margin: 4% 0% -2.0% 0%;
text-align: left;
font-weight: 500;
letter-spacing: 2px;
color: #000;
line-height: 200%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}

.container_02 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
height: auto;
margin: 0% 0% 10% 18%;
background-image: url(../index/no_01.svg);
background-size: 28% auto;	
background-position: right -6% bottom 0%;
background-repeat: no-repeat;
}
.box_02 {
z-index: 7;
width: 100%;
overflow: hidden;
filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.3));
}
.box_02 .boxInner {
z-index: 7;
width: inherit;
height: inherit;
margin: 0% 0% 4% 0%;
padding: 25% 0% 25% 0%;
background-image: url(../carlife_support/image_05.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_02_info {
z-index: 7;
width: 100%;
padding: 30px 2% 0% 1%;
font-size: 200%;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
color: #000;
line-height: 100%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 26px 26px;
background-position: left 0% top 46px;
}

.container_03 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
height: auto;
margin: 0% 0% 10% 18%;
background-image: url(../index/no_02.svg);
background-size: 28% auto;	
background-position: right -6% bottom 0%;
background-repeat: no-repeat;
}
.box_03 {
z-index: 7;
width: 100%;
overflow: hidden;
filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.3));
}
.box_03 .boxInner {
z-index: 7;
width: inherit;
height: inherit;
margin: 0% 0% 4% 0%;
padding: 25% 0% 25% 0%;
background-image: url(../carlife_support/image_02.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_03_info {
z-index: 7;
width: 100%;
padding: 30px 2% 0% 1%;
font-size: 200%;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
color: #000;
line-height: 100%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 26px 26px;
background-position: left 0% top 46px;
}
}

@media(max-width: 1024px){
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
height: auto;
margin: 0% 0% 10% 18%;
}
.box {
z-index: 7;
width: 100%;
overflow: hidden;
filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.3));
}
.box .boxInner {
z-index: 7;
width: inherit;
height: inherit;
margin: 0% 0% 4% 0%;
padding: 25% 0% 25% 0%;
background-image: url(../carlife_support/image_01.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_info {
z-index: 7;
width: 100%;
padding: 22px 2.7% 0% 1%;
font-size:170%;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
color: #000;
line-height: 100%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 23px 23px;
background-position: left 0% top 36px;
}

.greeting {
font-size: 42%;
margin: 3% 0% -1.25% 0%;
text-align: left;
font-weight: 500;
letter-spacing: 2px;
color: #000;
line-height: 180%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}
.sign {
font-size: 42%;
margin: 5% 2.7% -2.5% 0%;
text-align: right;
font-weight: 500;
letter-spacing: 2px;
color: #000;
line-height: 180%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}
.service {
font-size: 42%;
margin: 3% 0% -1.25% 0%;
text-align: left;
font-weight: 500;
letter-spacing: 2px;
color: #000;
line-height: 180%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}

.container_02 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
height: auto;
margin: 0% 0% 10% 18%;
background-image: url(../index/no_01.svg);
background-size: 30% auto;	
background-position: right -6% bottom 0%;
background-repeat: no-repeat;
}
.box_02 {
z-index: 7;
width: 100%;
overflow: hidden;
filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.3));
}
.box_02 .boxInner {
z-index: 7;
width: inherit;
height: inherit;
padding: 25% 0% 25% 0%;
background-image: url(../carlife_support/image_05.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_02_info {
z-index: 7;
width: 100%;
padding: 22px 2.7% 0% 1%;
font-size:170%;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
color: #000;
line-height: 100%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 23px 23px;
background-position: left 0% top 36px;
}

.container_03 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 82%;
height: auto;
margin: 0% 0% 10% 18%;
background-image: url(../index/no_01.svg);
background-size: 30% auto;	
background-position: right -6% bottom 0%;
background-repeat: no-repeat;
}
.box_03 {
z-index: 7;
width: 100%;
overflow: hidden;
margin: 0% 0% 0% 0%;
padding: 0% 0% 0% 0%;
filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.3));
}
.box_03 .boxInner {
z-index: 7;
width: inherit;
height: inherit;
padding: 25% 0% 25% 0%;
background-image: url(../carlife_support/image_02.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_03_info {
z-index: 7;
width: 100%;
padding: 22px 2.7% 0% 1%;
font-size:170%;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
color: #000;
line-height: 100%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 23px 23px;
background-position: left 0% top 36px;
}
}

@media(max-width: 640px){
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
height: auto;
margin: 0% 0% 12% 10%;
}
.box {
z-index: 7;
width: 100%;
overflow: hidden;
filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.3));
}
.box .boxInner {
z-index: 7;
width: inherit;
height: inherit;
margin: 0% 0% 2% 0%;
padding: 30% 0% 30% 0%;
background-image: url(../carlife_support/image_01.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_info {
z-index: 7;
width: 100%;
padding: 17px 3% 0% 2%;
font-size:125%;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
color: #000;
line-height: 110%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 17px 17px;
background-position: left 0% top 27px;
}

.greeting {
font-size: 50%;
margin: 2.8% 0% 0% 0%;
text-align: left;
font-weight: 500;
letter-spacing: 1px;
color: #000;
line-height: 160%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}
.sign {
font-size: 50%;
margin: 0% 0% 0% 0%;
padding: 6% 2% 0% 0%;
text-align: right;
font-weight: 500;
letter-spacing: 1px;
color: #000;
line-height: 160%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}
.service {
font-size: 50%;
margin: 2.8% 0% 0% 0%;
text-align: left;
font-weight: 500;
letter-spacing: 1px;
color: #000;
line-height: 160%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", Verdana, Helvetica, Arial, sans-serif;
}

.container_02 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
height: auto;
margin: 0% 0% 12% 10%;
background-image: url(../index/no_01.svg);
background-size: 50% auto;	
background-position: right -14% bottom 5%;
background-repeat: no-repeat;
}
.box_02 {
z-index: 7;
width: 100%;
overflow: hidden;
filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.3));
}
.box_02 .boxInner {
z-index: 7;
width: inherit;
height: inherit;
margin: 0% 0% 2% 0%;
padding: 30% 0% 30% 0%;
background-image: url(../carlife_support/image_05.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_02_info {
z-index: 7;
width: 100%;
padding: 17px 3% 0% 2%;
font-size:125%;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
color: #000;
line-height: 110%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 17px 17px;
background-position: left 0% top 27px;
}

.container_03 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
height: auto;
margin: 0% 0% 12% 10%;
background-image: url(../index/no_02.svg);
background-size: 50% auto;	
background-position: right -14% bottom 5%;
background-repeat: no-repeat;
}
.box_03 {
z-index: 7;
width: 100%;
overflow: hidden;
filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.3));
}
.box_03 .boxInner {
z-index: 7;
width: inherit;
height: inherit;
margin: 0% 0% 2% 0%;
padding: 30% 0% 30% 0%;
background-image: url(../carlife_support/image_02.svg);
background-size: cover;	
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
}
.box_03_info {
z-index: 7;
width: 100%;
padding: 17px 3% 0% 2%;
font-size:125%;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
color: #000;
line-height: 110%;
transition: all 500ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: url(../index/square_back.svg);
background-repeat: no-repeat;
background-size: 17px 17px;
background-position: left 0% top 27px;
}
}

.isPlay {
animation-name: play;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.8,0,.5,1);
position: relative;
opacity: 1 !important;
}
  
.isPlay:before {
animation-name: maskOut;
animation-duration: .5s;
animation-delay: .5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.8,0,.5,1);
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-image: linear-gradient( 109.6deg,  rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
}

@keyframes play {
from {
transform: translateX(-100%);
}
  
to {
transform: translateX(0);
}
}

@keyframes maskOut {
from {
transform: translateX(0);
}
  
to {
transform: translateX(100%);
}
}