@charset "UTF-8";



.main_image {position: relative;}
.main_image .main {
width: 80%;margin:0 auto 100px;;
overflow: hidden;
border-radius: 100vh;
-webkit-border-radius: 100vh;
-moz-border-radius: 100vh;}
.main_image .main img {width: 100%;height: auto;}
.main_image h2 {position: absolute;left: 0;bottom: 5%;}
.main_image h2 span {display: table;text-align: left;
background:linear-gradient(to right,#00a6dc, #b574dd);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#00a6dc, #b574dd);
margin: 0 0 5%;
padding: 2% 5%;
font-size: 2vw;
line-height: 1;
color: #fff;
white-space: nowrap;}

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

}
@media screen and (max-width: 767px) {
.main_image {position: relative;}
.main_image .main {
width: 94%;margin:0 auto 10%;;
overflow: hidden;
border-radius: 100vh;
-webkit-border-radius: 100vh;
-moz-border-radius: 100vh;}
.main_image .main img {width: 100%;height: auto;}
.main_image h2 {position: absolute;left: 0;bottom: 2%;}
.main_image h2 span {display: table;text-align: left;
background:linear-gradient(to right,#00a6dc, #b574dd);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#00a6dc, #b574dd);
margin: 0 0 2%;
padding: 3% 5%;
font-size: 3.4vw;
line-height: 1;
color: #fff;
white-space: nowrap;}
}






.about_block {margin: 0 0 100px;}
.about_block h2 {
font-size: 2.4vw;
line-height: 1;
padding: 1% 2%;
margin: 0 0 40px;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#00abb3, #00c850);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#00abb3, #00c850);}
.about_block p {font-size: 1.2vw;line-height: 1.8;margin: 0 0 40px;}

.about_block ul {
width: 80%;
margin: auto;
font-size: 0;
}
.about_block ul li {
display: inline-block;
color: #fff;
width: 16.5%;position: relative;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
vertical-align: top;
}
.about_block ul li:before {content: '';top: 0;left: 0;width: 30%;padding-top: 100%;display: block;}
.about_block ul li:after {position: absolute;content: '';top: 10%;left: 50%;transform: translateX(-50%);-webkit- transform: translateX(-50%);display: block;width: 30%;height: 30%;background-size: contain;background-repeat: no-repeat;}

.about_block ul li:nth-child(1) {background: #b7d08e;}
.about_block ul li:nth-child(1):after {background-image: url(/images/icon1.svg);}
.about_block ul li:nth-child(2) {background: #8cc4e7;}
.about_block ul li:nth-child(2):after {background-image: url(/images/icon2.svg);}
.about_block ul li:nth-child(3) {background: #a37dac;}
.about_block ul li:nth-child(3):after {background-image: url(/images/icon3.svg);}
.about_block ul li:nth-child(4) {background: #db7754;}
.about_block ul li:nth-child(4):after {background-image: url(/images/icon4.svg);}
.about_block ul li:nth-child(5) {background: #ebb65e;}
.about_block ul li:nth-child(5):after {background-image: url(/images/icon5.svg);}
.about_block ul li:nth-child(6) {background: #da8eaf;}
.about_block ul li:nth-child(6):after {background-image: url(/images/icon6.svg);}

.about_block ul li:nth-child(2n) {margin: 100px 0 0 0;}
.about_block ul li p {
width: 100%;
position: absolute;
top: 60%;
left: 50%;
transform: translateY(-60%) translateX(-50%);
-webkit- transform: translateY(-60%) translateX(-50%);
}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {
.about_block {width: 90%; margin: 0 auto 10%;}
.about_block h2 {
font-size: 4vw;
line-height: 1;
padding: 2% 4%;
margin: 0 0 5%;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#00abb3, #00c850);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#00abb3, #00c850);}
.about_block p {font-size: 3.2vw;line-height: 1.8;margin: 0 0 5%;text-align: left;}

.about_block ul {
width: 100%;
margin: auto;
font-size: 0;
text-align: left;
}
.about_block ul li {
display: inline-block;
color: #fff;
width: 33.33%;margin: 0;
position: relative;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
vertical-align: top;

}
.about_block ul li:before {content: '';top: 0;left: 0;width: 30%;padding-top: 100%;display: block;}
.about_block ul li:after {position: absolute;content: '';top: 10%;left: 50%;transform: translateX(-50%);-webkit- transform: translateX(-50%);display: block;width: 30%;height: 30%;background-size: contain;background-repeat: no-repeat;}

.about_block ul li:nth-child(1) {background: #b7d08e;}
.about_block ul li:nth-child(1):after {background-image: url(/images/icon1.svg);}
.about_block ul li:nth-child(2) {background: #8cc4e7;}
.about_block ul li:nth-child(2):after {background-image: url(/images/icon2.svg);}
.about_block ul li:nth-child(3) {background: #a37dac;}
.about_block ul li:nth-child(3):after {background-image: url(/images/icon3.svg);}
.about_block ul li:nth-child(4) {background: #db7754;}
.about_block ul li:nth-child(4):after {background-image: url(/images/icon4.svg);}
.about_block ul li:nth-child(5) {background: #ebb65e;}
.about_block ul li:nth-child(5):after {background-image: url(/images/icon5.svg);}
.about_block ul li:nth-child(6) {background: #da8eaf;}
.about_block ul li:nth-child(6):after {background-image: url(/images/icon6.svg);}

.about_block ul li:nth-child(2n) {margin: 15% 0 0 0;}
.about_block ul li:nth-child(4) {margin:-10% 0 0;}
.about_block ul li:nth-child(5) {margin: 5% 0 0 0;}
.about_block ul li:nth-child(6) {margin:-10% 0 0;}
.about_block ul li p {
font-size: 3vw;line-height: 1.4;
text-align: center;
width: 100%;
position: absolute;
top: 60%;
left: 50%;
transform: translateY(-60%) translateX(-50%);
-webkit- transform: translateY(-60%) translateX(-50%);
}
}







.system_block {position: relative;margin: 0 0 100px;} 
.system_block ul {width: 80%;margin: auto;}
.system_block ul li {width: 100%;display: block;position: relative;margin: 0 0 5vw;}
.system_block ul li .system_text {width: 60%;}
.system_block ul li .system_text h3 {font-size: 2vw;
line-height: 1;
padding: 1% 4%;
margin: 0 0 5%;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#0093cb, #01aeba);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#0093cb, #01aeba);}
.system_block ul li .system_text p {font-size: 1vw;line-height: 1.8;margin: 0;}
.system_block ul li .pic {
position: absolute;
top: 0;right: 0;
width: 35%; float: right;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
overflow: hidden;}
.system_block ul li .pic img {width: 100%;height: auto;}

.system_block ul li:nth-child(2) {margin: 0;}
.system_block ul li:nth-child(2) .pic {left: 0;top: 0;}
.system_block ul li:nth-child(2)  .system_text{margin: 0 0 0 35%;}

.fluid {
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width:80vh;/*横幅*/
height: 80vh;/*縦幅*/
animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
background:linear-gradient(45deg,#fff,#b6e9fc);
filter:progid:DXImageTransform.Microsoft.Gradient(45deg,#fff,#b6e9fc);
}

@keyframes fluidrotate {  
0%, 100% {border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;}
14% {border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;}
28% {border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;}
42% {border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;}
56% {border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;}
70% {border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;}
84% {border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;}
}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {
.system_block {position: relative;margin: 0 0 10%;overflow: hidden;} 
.system_block ul {width: 90%;margin: auto;}
.system_block ul li {width: 100%;display: block;position: relative;margin: 0 0 40px;}
.system_block ul li .system_text {width: 60%;}
.system_block ul li .system_text h3 {font-size: 4vw;
line-height: 1;
padding: 2% 4%;
margin: 0 0 5%;
color: #fff;
display: block;
background:linear-gradient(to right,#0093cb, #01aeba);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#0093cb, #01aeba);}
.system_block ul li .system_text p {font-size: 3.2vw;line-height: 1.8;margin: 0;text-align: left;}
.system_block ul li .pic {
position: absolute;
top: 0;right: 0;
width: 35%; float: right;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
overflow: hidden;}
.system_block ul li .pic img {width: 100%;height: auto;}

.system_block ul li:nth-child(2) {margin: 0;}
.system_block ul li:nth-child(2) .pic {left: 0;top: 0;}
.system_block ul li:nth-child(2)  .system_text{margin: 0 0 0 40%;}

.fluid {
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width:60vh;/*横幅*/
height: 50vh;/*縦幅*/
animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
background:linear-gradient(45deg,#fff,#b6e9fc);
filter:progid:DXImageTransform.Microsoft.Gradient(45deg,#fff,#b6e9fc);
}

@keyframes fluidrotate {  
0%, 100% {border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;}
14% {border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;}
28% {border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;}
42% {border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;}
56% {border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;}
70% {border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;}
84% {border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;}
}
}






.industry_block {
width: 100%;
background:linear-gradient(45deg, #fbe6b0,#f5b5c3);
background-size: 200% 200%;
animation: bggradient 6s ease infinite;
padding:100px 0 40px;
}
@keyframes bggradient{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.industry_block h2 {font-size: 2vw;
line-height: 1;
padding: 1% 2%;
margin: 0 0 20px;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#ff538c, #ffd941);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#ff538c, #ffd941);
}
p.supplementary_text {font-size: 1vw;line-height: 1.8;margin: 0 0 40px;}


.industry_text {width: 80%;
margin: 0 auto;padding: 60px 0 0; text-align: left;}
.industry_text h3 {
font-size: 2vw;
line-height: 1;
padding: 1% 2%;
margin: 0 auto 40px;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#ff538c, #ffd941);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#ff538c, #ffd941);
}
.industry_text p {font-size: 1vw;line-height: 1.8;}
ul.industry_list {
width: 90%;
margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
ul.industry_list li {
position: relative;
width: 30%;
margin: 0 5% 5% 0;
background: #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
ul.industry_list li:nth-child(3n) {margin: 0 0 5% 0;}



ul.industry_list li:before {content: '';top: 0;left: 0;width: 30%;padding-top: 45%;display: block;}
ul.industry_list li:after {position: absolute;content: '';top: 10%;left: 50%;transform: translateX(-50%);-webkit- transform: translateX(-50%);display: block;width: 30%;height: 30%;background-size: contain;background-repeat: no-repeat;}
ul.industry_list li:nth-child(1):after {background-image: url(/images/industry1.svg);}
ul.industry_list li:nth-child(2):after {background-image: url(/images/industry2.svg);}
ul.industry_list li:nth-child(3):after {background-image: url(/images/industry3.svg);}
ul.industry_list li:nth-child(4):after {background-image: url(/images/industry4.svg);}
ul.industry_list li:nth-child(5):after {background-image: url(/images/industry5.svg);}
ul.industry_list li:nth-child(6) {margin: 0 0 5%;}
ul.industry_list li:nth-child(6):after {background-image: url(/images/industry6.svg);}
ul.industry_list li:nth-child(7) {margin: 0 5% 0 0;}
ul.industry_list li:nth-child(7):after {background-image: url(/images/industry7.svg);}
ul.industry_list li:nth-child(8) {margin: 0 5% 0 0;}
ul.industry_list li:nth-child(8):after {background-image: url(/images/industry8.svg);}
ul.industry_list li dl {padding: 0 5% 5%;}
ul.industry_list li dl dt {font-size: 1.6vw;line-height: 1.8;font-weight: 700; margin: 0 0 5%;}
ul.industry_list li dl dt span {font-size: 1.2vw;line-height: 1.8;display: block;}
ul.industry_list li dl dd {font-size: 1vw;line-height: 1.8;text-align: left;}
ul.industry_pic {
width: 90%;
margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
ul.industry_pic li {width: 33.3%; 
position: relative;
}
ul.industry_pic li img {width: 100%;height: auto;}
ul.industry_pic li:first-child img {position: absolute;top: 40%;left: 0;}
ul.industry_pic li:nth-child(2) img {position: absolute;top: 20%;left: 0;}

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

}
@media screen and (max-width: 767px) {
.industry_block {
width: 100%;
background:linear-gradient(45deg, #fbe6b0,#f5b5c3);
background-size: 200% 200%;
animation: bggradient 6s ease infinite;
padding:10% 0 5%;
}
@keyframes bggradient{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.industry_block h2 {font-size: 4vw;
line-height: 1;
padding: 2% 4%;
margin: 0 0 2.5%;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#ff538c, #ffd941);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#ff538c, #ffd941);
}
p.supplementary_text {font-size: 3vw;line-height: 1.8;margin: 0 0 5%;}

.industry_text {width: 80%;
margin: 0 auto;padding: 60px 0 0; text-align: left;}
.industry_text h3 {
font-size: 4vw;
line-height: 1;
padding: 2% 4%;
margin: 0 auto 5%;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#ff538c, #ffd941);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#ff538c, #ffd941);
}
.industry_text p {font-size: 3.2vw;line-height: 1.8;}
ul.industry_list {
width: 90%;
margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
ul.industry_list li {
position: relative;
width: 100%;
margin: 0 0 5%;
background: #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
ul.industry_list li:nth-child(3n) {margin: 0 0 5%;}
ul.industry_list li:before {content: '';top: 0;left: 0;width: 20%;padding-top: inherit;display: inherit;}
ul.industry_list li:after {position: absolute;content: '';top: 5%;left: 5%;transform:inherit;-webkit- transform: inherit;display: inherit;width: 20%;height: 600px;background-size: contain;background-repeat: no-repeat;}
ul.industry_list li:nth-child(1):after {background-image: url(/images/industry1.svg);}
ul.industry_list li:nth-child(2):after {background-image: url(/images/industry2.svg);}
ul.industry_list li:nth-child(3):after {background-image: url(/images/industry3.svg);}
ul.industry_list li:nth-child(4):after {background-image: url(/images/industry4.svg);}
ul.industry_list li:nth-child(5):after {background-image: url(/images/industry5.svg);}
ul.industry_list li:nth-child(6) {margin: 0 0 5%;}
ul.industry_list li:nth-child(6):after {background-image: url(/images/industry6.svg);}
ul.industry_list li:nth-child(7) {margin: 0 0 5%;}
ul.industry_list li:nth-child(7):after {background-image: url(/images/industry7.svg);}
ul.industry_list li:nth-child(8) {margin: 0 0 5%;}
ul.industry_list li:nth-child(8):after {background-image: url(/images/industry8.svg);}
ul.industry_list li dl {padding: 0 5% 5%;}
ul.industry_list li dl dt {font-size: 4vw;line-height: 1.8;font-weight: 700; margin: 0 0 10%;padding: 10% 0 0 25%;text-align: left;}
ul.industry_list li dl dt span {font-size: 3.2vw;line-height: 1.8;display: inline;}
ul.industry_list li dl dd {font-size: 3.2vw;line-height: 1.8;text-align: left;}
ul.industry_pic {
width: 90%;
margin: auto;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
ul.industry_pic li {width: 33.3%; 
position: relative;
}
ul.industry_pic li img {width: 100%;height: auto;}
ul.industry_pic li:first-child img {position: absolute;top: 40%;left: 0;}
ul.industry_pic li:nth-child(2) img {position: absolute;top: 20%;left: 0;}
}






.flow_block {width: 90%;margin: 0 auto 5%; padding: 15% 0 0;position: relative;}
.flow_block h2 {font-size: 2vw;
line-height: 1;
padding: 1% 4%;
margin: 0 0 40px;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#7494e6, #b574dd);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#7494e6, #b574dd);}
.flow_block ul.flow_list {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.flow_block ul.flow_list li {
width: 25%;
margin: 0 3% 3% 0;
background:linear-gradient(to right,#7494e6, #b574dd);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#7494e6, #b574dd);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
padding: 6px 0;
position: relative;
}
.flow_block ul.flow_list li:nth-child(4) {margin: 0 3% 3% 44%;}
.flow_block ul.flow_list li:nth-child(6) {margin: 0 0 3% ;}
.flow_block ul.flow_list li::before {content: "";display: block;padding-top: 100%;}
.flow_block ul.flow_list li .text_block {width: 96%;height: 96%;position: relative;
background:linear-gradient(-65deg, #eadcf5,#dee3f7);
filter:progid:DXImageTransform.Microsoft.Gradient(-65deg, #eadcf5,#dee3f7);
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
.flow_block ul.flow_list li p {font-size: 3.2vw;line-height: 1;font-weight: 700; color: #7494e6;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
}
.flow_block ul.flow_list li dl {
width: 100%;
position: absolute;
top: 60%;
left: 50%;
transform: translateY(-60%) translateX(-50%);
-webkit- transform: translateY(-60%) translateX(-50%);}
.flow_block ul.flow_list li dl dt {font-size: 1.6vw;line-height: 1.8;font-weight: 700;margin: 0 0 2%;}
.flow_block ul.flow_list li dl dd {font-size: 1vw;line-height: 1.8;}

.flow_block ul.flow_list li {position: relative;}
.flow_block ul.flow_list li:before {
content: '';
top: 0;
left: 0;
width: 20%;
padding-top: 100%;
display: block;
}

.flow_block ul.flow_list li:after {/*画像を絶対配置*/
position: absolute;
content: '';
top: 50%;
left: -16%;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%); 
display: block;
width: 20%;/*幅*/
height: 22%;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
background-image: url(/images/flow.svg);
background-size: contain;
background-repeat: no-repeat;/*画像を繰り返さない*/
z-index: 99;
}
.flow_block ul.flow_list li:first-child {}
.flow_block ul.flow_list li:first-child:before {}
.flow_block ul.flow_list li:first-child:after {position: inherit;content: inherit;}
.flow_block ul.flow_list li:nth-child(3) .text_block{}
.flow_block ul.flow_list li:nth-child(3) .text_block:before {}
.flow_block ul.flow_list li:nth-child(3) .text_block:after {  position: absolute;
content: '';
top: 50%;
left: 97%;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%); 
display: block;
width: 20%;/*幅*/
height: 19%;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
background-image: url(/images/flow.svg);
background-size: contain;
background-repeat: no-repeat;/*画像を繰り返さない*/
z-index: 99;}

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

}
@media screen and (max-width: 767px) {
.flow_block {width: 90%;margin: 0 auto 5%; padding: 15% 0 0;position: relative;}
.flow_block h2 {font-size: 4vw;
line-height: 1;
padding: 2% 4%;
margin: 0 0 5%;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#7494e6, #b574dd);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#7494e6, #b574dd);}
.flow_block ul.flow_list {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.flow_block ul.flow_list li {
width: 40%;
margin: 0 5% 5% 0;
background:linear-gradient(to right,#7494e6, #b574dd);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#7494e6, #b574dd);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
padding: 6px 0;
position: relative;
}
.flow_block ul.flow_list li:nth-child(3) {margin: 0 5% 5% 10%;}
.flow_block ul.flow_list li:nth-child(4) {margin: 0 5% 5% 0;}
.flow_block ul.flow_list li:nth-child(5) {margin: 0 5% 5% 20%;}
.flow_block ul.flow_list li:nth-child(6) {margin: 0 0 5% ;}
.flow_block ul.flow_list li::before {content: "";display: block;padding-top: 100%;}
.flow_block ul.flow_list li .text_block {width: 96%;height: 96%;position: relative;
background:linear-gradient(-65deg, #eadcf5,#dee3f7);
filter:progid:DXImageTransform.Microsoft.Gradient(-65deg, #eadcf5,#dee3f7);
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
.flow_block ul.flow_list li p {font-size: 4vw;line-height: 1;font-weight: 700; color: #7494e6;
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
}
.flow_block ul.flow_list li dl {
width: 100%;
position: absolute;
top: 65%;
left: 50%;
transform: translateY(-65%) translateX(-50%);
-webkit- transform: translateY(-65%) translateX(-50%);}
.flow_block ul.flow_list li dl dt {font-size: 3.2vw;line-height: 1.4;font-weight: 700;margin: 0 0 2%;}
.flow_block ul.flow_list li dl dd {font-size: 2.4vw;line-height: 1.8;}
.flow_block ul.flow_list li dl dd span {font-size: 1.8vw;}
.flow_block ul.flow_list li {position: relative;}
.flow_block ul.flow_list li:before {
content: '';
top: 0;
left: 0;
width: 20%;
padding-top: 100%;
display: block;
}

.flow_block ul.flow_list li:after {/*画像を絶対配置*/
position: absolute;
content: '';
top: 50%;
left: -17%;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%); 
display: block;
width: 20%;/*幅*/
height: 18.4%;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
background-image: url(/images/flow.svg);
background-size: contain;
background-repeat: no-repeat;/*画像を繰り返さない*/
z-index: 99;
}
.flow_block ul.flow_list li:first-child {}
.flow_block ul.flow_list li:first-child:before {}
.flow_block ul.flow_list li:first-child:after {position: inherit;content: inherit;}
.flow_block ul.flow_list li:nth-child(3) .text_block{}
.flow_block ul.flow_list li:nth-child(3) .text_block:before {}
.flow_block ul.flow_list li:nth-child(3) .text_block:after {display: none;
}


.flow_block ul.flow_list li:nth-child(2) .text_block,
.flow_block ul.flow_list li:nth-child(4) .text_block{}
.flow_block ul.flow_list li:nth-child(2) .text_block:before,
.flow_block ul.flow_list li:nth-child(4) .text_block:before{}
.flow_block ul.flow_list li:nth-child(2) .text_block:after,
.flow_block ul.flow_list li:nth-child(4) .text_block:after{  position: absolute;
content: '';
top: 50%;
left: 95%;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%); 
display: block;
width: 20%;/*幅*/
height: 18.4%;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
background-image: url(/images/flow.svg);
background-size: contain;
background-repeat: no-repeat;/*画像を繰り返さない*/
z-index: 99;}
}





.tokyo_block {width: 60%;margin:0 auto 10%;box-shadow: 0 0 40px rgba(127,206,166,0.5);
text-align: left;
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
padding: 80px 0;
position: relative;
}
.tokyo_block h2 {font-size: 2vw;
line-height: 1;
text-align: left;
padding: 1% 4%;
margin: 0 auto 5% 10%;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#0093cb, #01aeba);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#0093cb, #01aeba);}
.tokyo_block p {font-size: 1vw;line-height: 1.8;text-align: left; margin: 0 10% 5%;}
.tokyo_block .tokyo_pic {width: 45%; position: absolute;top: -5%;right: -10%;}
.tokyo_block .tokyo_pic img {width: 100%;height: auto;}
.training {width: 80%;margin:auto;}
.training h3 {font-size: 1.4vw;line-height: 1.8;font-weight: 700;margin: 0 auto 2%;}
.training ul {list-style-type: none;
display:table;
width:100%;
padding:0;
margin:0 0 2%;
overflow:hidden;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
overflow: hidden;
}
.training ul li{
position: relative;
display:table-cell;
position:relative;
background: #00ABB3;
padding:0;
color: #fff;
width: 30%;
height: 120px;
}
.training ul li:last-child{
padding-right: 1em;
}
.training ul li:last-child:before,
.training ul li:last-child:after{
display:none;
}
.training ul li:before,
.training ul li:after{
content: "";
position: absolute;
width: 0;
height: 0;
margin: auto;
}
.training ul li:before{
top:-10px;
right:-30px;
border-style: solid;
border-color: transparent transparent transparent #fff;
border-width: 70px 0 70px 30px;
z-index: 10;
}
.training ul li:after{
top:-10px;
right:-28px;
border-style: solid;
border-color: transparent transparent transparent #00ABB3;
border-width: 70px 0 70px 30px;
z-index: 10;
}
.training ul li:nth-child(2){background: #00BA7F;width: 40%;}
.training ul li:nth-child(2):after{border-color: transparent transparent transparent #00BA7F;}
.training ul li:nth-child(3){background: #00C850;width: 30%;}
.training ul li:nth-child(3):after{border-color: transparent transparent transparent #00C850;}
.training ul li p {
padding:0 0 0 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: 100%; font-size: 1vw;line-height: 1.8;text-align: center; margin: 0;z-index: 99;}
.training ul li p span {font-size: 1.2vw;line-height: 1.8;display: block;}
.training p.caption {
width: 96%;
margin: auto;
font-size: 1vw;line-height: 1.8;border: 2px solid #7FCEA6;
padding: 2%;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {
.tokyo_block {width: 80%;margin:0 auto 10%;box-shadow: 0 0 40px rgba(127,206,166,0.5);
text-align: left;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
padding: 10% 0;
position: relative;
}
.tokyo_block h2 {font-size: 4vw;
line-height: 1;
text-align: left;
padding: 2% 4%;
margin: 0 auto 5% 10%;
color: #fff;
display: inline-block;
background:linear-gradient(to right,#0093cb, #01aeba);
filter:progid:DXImageTransform.Microsoft.Gradient(to right,#0093cb, #01aeba);}
.tokyo_block p {font-size: 3.2vw;line-height: 1.8;text-align: left; margin: 0 10% 5%;}
.tokyo_block .tokyo_pic {width: 45%; position: absolute;top: -5%;right: -10%;}
.tokyo_block .tokyo_pic img {width: 100%;height: auto;}
.training {width: 80%;margin:auto;}
.training h3 {font-size: 3.4vw;line-height: 1.4;font-weight: 700;margin: 0 auto 4%;}
.training ul {list-style-type: none;
display:table;
width:100%;
padding:0;
margin:0 0 4%;
overflow:hidden;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
overflow: hidden;
}
.training ul li{
position: relative;
display:inherit;
position:relative;
background: #00ABB3;
padding:0;
color: #fff;
width: 100%;
height: 80px;
}
.training ul li:last-child{
padding-right: 1em;
}
.training ul li:last-child:before,
.training ul li:last-child:after{
display:none;
}
.training ul li:before,
.training ul li:after{
content: "";
position: absolute;
width: 0;
height: 0;
margin: auto;
}
.training ul li:before{
top:inherit;
right:inherit;
bottom: -10px;
left: 0;
border-style: solid;
border-color: transparent transparent transparent #fff;
border-width: 10px 50px 0 50px;
z-index: 10;


content: "";
display: block;
border-top: 22px solid #fff !important;
border-right: 40vw solid transparent !important;
border-left: 40vw solid transparent !important;
border-bottom: none;
position: absolute;
width: 0;
height: 0;
bottom: -16px !important;
top: auto !important;
left: 50%;
margin-top: 0 !important;
margin-left: -40vw;
}
.training ul li:after{
top:inherit;
right:inherit;
content: "";
display: block;
border-top: 20px solid #eaeebb !important;
border-right: 38vw solid transparent !important;
border-left: 38vw solid transparent !important;
border-bottom: none;
position: absolute;
width: 0;
height: 0;
bottom: -14px !important;
top: auto !important;
left: 50%;
margin-top: 0 !important;
margin-left: -38vw;

}

.training ul li:nth-child(1):after {border-top: 20px solid #00ABB3 !important;}
.training ul li:nth-child(2):after {border-top: 20px solid #00BA7F !important;}


.training ul li:nth-child(2){background: #00BA7F;width: 100%;}
.training ul li:nth-child(2):after{border-color: transparent transparent transparent #00BA7F;}
.training ul li:nth-child(3){background: #00C850;width: 100%;}
.training ul li:nth-child(3):after{border-color: transparent transparent transparent #00C850;}
.training ul li p {
padding:0;
position: absolute;
top: 60%;
left: 50%;
transform: translateY(-60%) translateX(-50%);
-webkit- transform: translateY(-60%) translateX(-50%);
width: 100%; font-size: 3.2vw;line-height: 1.8;text-align: center; margin: 0;z-index: 99;}
.training ul li p span {font-size: 3.2vw;line-height: 1.8;display: block;}
.training p.caption {
width: 90%;
margin: auto;
font-size: 3.2vw;line-height: 1.8;border: 2px solid #7FCEA6;
padding: 4%;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;}

.training ul li:nth-child(2) p {
position: absolute;
top: 80%;
left: 50%;
transform: translateY(-80%) translateX(-50%);
-webkit- transform: translateY(-80%) translateX(-50%);}

}










.faq_block {width: 60%;margin:0 auto 10%; padding: 10% 10% 8%; background: #d0e4f1;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;}
.faq_block h2 {
font-size: 3.2vw;
line-height: 1;
font-weight: 700;
text-align: center;
margin: 0 auto 5%;
color: #00A6DC;
display: inline-block;
}
/*アコーディオン全体*/
.accordion-area{list-style: none;width: 100%;margin:0 auto;}
.accordion-area li{margin: 0 0 2%;}
.accordion-area section {
background:linear-gradient(-65deg, #0093CB,#01AEBA);
filter:progid:DXImageTransform.Microsoft.Gradient(-65deg, #0093CB,#01AEBA);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
/*アコーディオンタイトル*/
.title {
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size:1.6vw;
line-height: 1.4;
color: #fff;
text-align: left;
font-weight: normal;
padding: 3% 3% 3% 5%;
transition: all .5s ease;
}
/*アイコンの＋と×*/
.title::before,
.title::after{position: absolute;content:'';width: 32px;height: 4px;background-color: #fff;}
.title::before{top:48%;right: 32px;transform: rotate(0deg);}
.title::after{top:48%;right: 32px;transform: rotate(90deg);}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{transform: rotate(45deg);}
.title.close::after{transform: rotate(-45deg);}
.title span {position: relative;padding: 0 0 0 5%;display: block;}
.title span:before{
content: 'Q';
color: #fff;
font-size:2.4vw;
font-weight: 700;
margin: 0 2% 0 0;
position: absolute;
left: 0;
top: -40%;
}
/*アコーディオンで現れるエリア*/
.accordion_box {
display: none;/*はじめは非表示*/
margin:0;
padding:0 3% 3%;
opacity: 1;
}
.accordion_box p {font-size: 1.2vw;line-height: 1.8;text-align: left; margin: 0 2% 2%;padding: 2% 2% 2% 7%;background: #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
position: relative;
}
.accordion_box p:before{
content: 'A';
color: #00A6DC;
font-size:2.4vw;
font-weight: 700;
position: absolute;left: 2%;top: 2%;
}

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

}
@media screen and (max-width: 767px) {
.faq_block {width: 80%;margin:0 auto 10%; padding: 5% 5% 3%; background: #d0e4f1;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;}
.faq_block h2 {
font-size: 4vw;
line-height: 1;
font-weight: 700;
text-align: center;
margin: 0 auto 5%;
color: #00A6DC;
display: inline-block;
}
/*アコーディオン全体*/
.accordion-area{list-style: none;width: 100%;margin:0 auto;}
.accordion-area li{margin: 0 0 2%;}
.accordion-area section {
background:linear-gradient(-65deg, #0093CB,#01AEBA);
filter:progid:DXImageTransform.Microsoft.Gradient(-65deg, #0093CB,#01AEBA);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
/*アコーディオンタイトル*/
.title {
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size:3.2vw;
line-height: 1.4;
color: #fff;
text-align: left;
font-weight: normal;
padding: 5% 10% 5% 5%;
transition: all .5s ease;
}
/*アイコンの＋と×*/
.title::before,
.title::after{position: absolute;content:'';width: 20px;height: 2px;background-color: #fff;}
.title::before{top:48%;right: 10px;transform: rotate(0deg);}
.title::after{top:48%;right: 10px;transform: rotate(90deg);}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{transform: rotate(45deg);}
.title.close::after{transform: rotate(-45deg);}
.title span {position: relative;padding: 0 0 0 5%;display: block;}
.title span:before{
content: 'Q';
color: #fff;
font-size:3.2vw;
font-weight: 700;
margin: 0 2% 0 0;
position: absolute;
left: 0;
top: -5%;
}
/*アコーディオンで現れるエリア*/
.accordion_box {
display: none;/*はじめは非表示*/
margin:0;
padding:0 3% 3%;
opacity: 1;
}
.accordion_box p {font-size: 3.2vw;line-height: 1.8;text-align: left; margin: 0 2% 2%;padding: 2% 2% 2% 10%;background: #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
position: relative;
}
.accordion_box p:before{
content: 'A';
color: #00A6DC;
font-size:3.2vw;
font-weight: 700;
position: absolute;left: 5%;top: 4%;
}
}








.recruit_btn {width: 15%;position: absolute;top: 0;right: 5%;}

.btn,
a.btn,
button.btn {
font-size: 1.2vw;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #212529;
border-radius: 100vh;
position: relative;
display: block;
color: #fff;
width: 100%;
vertical-align: middle;
/*背景の色と形状*/
background: linear-gradient(270deg, #0093cb 0%, #01aeba 50%, #b574dd 100%);
background-position: 1% 50%;
background-size: 200% auto;
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}

.btn:hover,
a.btn:hover,
button.btn:hover {
color: #fff;
background-position: 99% 50%;
}


.btn:before,
a.btn:before,
button.btn:before {
content: "";
display: block;
padding-top: 100%;
}
a.btn b {font-size: 2.4vw;}
.btn span,
a.btn span,
button.btn span {
width: 100%; position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}


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

}
@media screen and (max-width: 767px) {
.recruit_btn {width: 25%;position: absolute;top: -10%;right: 2%;}
.btn,
a.btn,
button.btn {
font-size: 2.6vw;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #212529;
border-radius: 100vh;
position: relative;
display: block;
color: #fff;
width: 100%;
vertical-align: middle;
/*背景の色と形状*/
background: linear-gradient(270deg, #0093cb 0%, #01aeba 50%, #b574dd 100%);
background-position: 1% 50%;
background-size: 200% auto;
/*アニメーションの指定*/
transition: all 0.3s ease-out;
background-position: 99% 50%;
}

a.btn b {font-size:3.6vw;}
}