@charset "utf-8";
/* CSS Document */

/*--------------------------------------
　Main Index
---------------------------------------*/
/*===========
inview
===========*/

.fadeIn_up {
  transform: translate(0, 100px);
  transition: all .6s ease-in-out;
  opacity: 0;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_up2 {
  transform: translate(0, 50px);
  transition: all .3s ease-in-out;
  opacity: 0;
}
.fadeIn_up2.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_up.delay1{
  transition-delay: 0.1s; 
}
.fadeIn_up.delay2{
  transition-delay: 0.2s; 
}






/*------------
　body_PC
------------*/
body::before{
content: "";
position: absolute;
top: 120px;
left: 0;
width: 100%;
height: 1500px;
background: url("./img/bg_cloud_pg.svg") 50% 0 no-repeat;
background-size: 2200px auto;
}
body::after{
content: "";
position: absolute;
top: 75px;
left: 0;
width: 100%;
height: 90px;
background: url("./img/eng_cool.svg") 10px 0 no-repeat;
background-size: auto 90px;
}



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

img:not([width]) {
width:100%;
height:auto;
max-width: 100%;
}

.dotYw{
position: relative;
}
.dotYw::before{
content: "";
position: absolute;
top: -10px;
left: calc(50% - 5px);
width: 10px;
height: 10px;
background: #f2e026;
border-radius:50%;
}





/*--------------------------------------
　header_PC
---------------------------------------*/
#header{
position: relative;
z-index: 14;
margin: 0 0 100px;
overflow: hidden;
}
#header::before{
}

#header .topArea{
position: absolute;
width: 100%;
padding: 4px 20px 6px;
text-align: right;
}

#header .siteName{
margin: 4px 0;
font-size:1.3rem;
font-weight: 400;
line-height: 1.6;
text-align: right;
letter-spacing: 0;
}


#header .areaInner{
width: 1100px;
}

#header .logo{
position: relative;
width: 194px;
margin-top: -15px;
}
#header .logoImg{
}
#header .logoImg img{
width: 100%;
}

#header .mvArea{
position: relative;
padding: 120px 520px 0 50px;
min-height: 600px;
}
#header .flame{
position: absolute;
top:-115px;
right: -145px;
width: 700px;
}
#header .mvArea h2{
margin: 0 0 20px;
padding: 0 0 25px;
background: url(./img/deco_wave1.svg) 0 100% no-repeat;
background-size: 100px auto;
font-size:5.0rem;
}
#header .mvArea h2 .fontS{
font-size:3.6rem;
}
#header h2 .dotYw::before{
top: -10px;
left: calc(50% - 6px);
width: 12px;
height: 12px;
background: #eeda0d;
}


#header .mokuji2{
position: relative;
display: table;
width: 100%;
border: 3px solid #5ebfdf;
border-radius:15px;
}
#header .mokuji2::before{
content: "";
position: absolute;
top: -50px;
right: 60px;
width: 100px;
height: 100px;
background: url(./img/icon_h3.png) 0 0 no-repeat;
background-size: 100px auto;
}
#header .mokuji2 .sttl{
width: 190px;
display: table-cell;
vertical-align: middle;
text-align: center;
letter-spacing: .2em;
}
#header .mokuji2 .sttl span{
position: relative;
display: block;
padding: 0 0 20px;
}
#header .mokuji2 .sttl span::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("./img/eng_idx2.svg") 50% 100% no-repeat;
background-size: auto 11px;
}
#header .mokuji2 .ulBox{
display: table-cell;
vertical-align: middle;
padding: 30px 0;
}
#header .mokuji2 .ulBox .inner{
display: flex;
flex-wrap: wrap;
}
#header .mokuji2 .liBox{
width: 50%;
margin: 6px 0;
padding: 0 0 0 100px;
}
#header .mokuji2 .liBox::before {
position: absolute;
content: "";
top: 13px;
left: 80px;
width: 12px;
height: 12px;
background: rgb(106, 205, 238);
background: linear-gradient(180deg, rgba(106, 205, 238, 1) 0%, rgba(82, 184, 218, 1) 100%);
border-radius: 50%;
}
#header .mokuji2 .liBox a{
font-size:1.6rem;
font-weight: 700;
}





/*------------
#page-top_PC
------------*/




/*------------
contents_PC
------------*/

#contents{
padding: 0 0 0;
}

.index{
width: 100%;
padding: 0 0 0;
}

.index .sectTtlArea,
.index .sectTtl{
position: relative;
}





/*------------
sct12_PC
------------*/

.sct12{
background: url(./img/bg_cloud.svg) 50% 100px no-repeat;
background-size: 2300px auto;
}




/*------------
sect01_PC
------------*/
#sect01{
position: relative;
padding: 150px 0 0;
}

#sect01 .flame{
position: absolute;
width: 540px;
top: -130px;
left: -50px;
}
#sect01 .flame img{
border-radius:50%;
border: 30px solid rgba(10, 126, 223, .2);
}

#sect01 .sectTtlArea{
padding-left: 570px;
}
#sect01 .sectTtlArea p{
padding: 0 0 120px;
}
#sect01 .sectTtlArea p::before{
content: "";
position: absolute;
bottom: -30px;
left: 0;
width: 120px;
height: 120px;
background: url(./img/sct01_ill.png) 0 0 no-repeat;
background-size: 120px auto;
}


/*------------
sect02_PC
------------*/
#sect02{
position: relative;
padding: 100px 0 150px;
}
#sect02 .areaInner{
padding: 25px 0 0;
background: #fff;
border-radius:15px;
box-shadow: 0px 6px 28.8px 1.2px rgba(94, 191, 223, 0.2);
}
#sect02 .areaInner::before{
content: "";
position: absolute;
top: -45px;
left: -25px;
width: 120px;
height: 120px;
background: url("./img/icon_factory2.png") 0 0 no-repeat;
background-size: 120px auto;
border-radius:50%;
box-shadow: 0px 6px 19.2px 0.8px rgba(94, 191, 223, 0.1);
}


#sect02 .flame{
position: absolute;
width: 440px;
top: -100px;
right: -70px;
}
#sect02 .flame img{
border-radius:50%;
border: 30px solid rgba(10, 126, 223, .2);
}

#sect02 .sectTtlArea{
margin: 0 430px 0 0;
padding: 60px 0 0 40px;
}
#sect02 .sectTtlArea::before{
background-image: url(./img/eng_str.svg);
}

#sect02 .btn-internal a{
margin: 10px 0 -36px;
}




/*------------
sct34_PC
------------*/

.sct34{
position: relative;
}
.sct34::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct34_bg.svg) 50% 0 no-repeat;
background-size: 100% auto;
}
.sct34::after{
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct34_bg.svg) 50% 0 no-repeat;
background-size: 100% auto;
}




/*------------
sect03_PC
------------*/
#sect03{
padding: 0 0 200px;
}

#sect03 .sectTtlArea{
margin: 0 0 20px;
padding-left: 570px;
}
#sect03 .sectTtlArea::before{
background-image: url("./img/eng_type.svg");
}
#sect03 .ulBox{
padding: 0 10px;
}
#sect03 .liBox{
width: 440px;
float: left;
padding: 30px 40px 40px;
background: url("./img/sct03_bg.svg") -70px -140px no-repeat #eafaff;
background-size: 724px auto;
border-radius:15px;
}
#sect03 .liBox:nth-child(1){
margin: -45px 0 0;
}
#sect03 .liBox:nth-child(2){
float: right;
background-color: #e6ebf1;
}

#sect03 .liBox h3{
margin: 0 0 30px;
padding: 0 0 30px;
font-size:3.0rem;
text-align: center;
}
#sect03 .liBox h3 .wtbg{
margin: 0 1rem 0 0;
padding: 2px 18px 2px 22px;
background: #fff;
border-radius:9999px;
}
#sect03 .liBox h3::before{
content: "";
position: absolute;
bottom: 0;
left: calc(50% - 35px);
width: 70px;
height: 6px;
background: rgb(41,73,158);
background: linear-gradient(180deg, rgba(41,73,158,1) 0%, rgba(7,38,121,1) 100%);
border-radius:9999px;
}

#sect03 .btn-internal{
position: absolute;
bottom: -40px;
left: 30px;
}
#sect03 .btn-internal a{
}




/*------------
sect04_PC
------------*/
#sect04{
padding: 0 0 100px;
}
#sect04 .areaInner::before{
content: "";
position: absolute;
top: 40px;
right: -88px;
width: 400px;
height: 280px;
background: url("./img/sct04_img.png") 0 0 no-repeat;
background-size: contain;
}
#sect04 .areaInner::after{
content: "";
position: absolute;
bottom: 0;
left: -100px;
width: 518px;
height: 318px;
background: url(./img/sct04_img_1.png) 0 0 no-repeat;
background-size: contain;
}
#sect04 .sectTtlArea{
margin: 0 570px 120px 0;
}
#sect04 .sectTtlArea::before{
background-image: url("./img/eng_kn.svg");
}

#sect04 .liBox{
margin-bottom: 50px;
padding: 55px 30px 60px;
background: #e6ebf1;
border-radius:15px;
}
#sect04 .liBox::before{
content: "";
position: absolute;
top: -43px;
left: 0;
width: 100%;
height: 90px;
background: url("./img/sct04_icon.png") 50% 0 no-repeat;
background-size: 90px auto;
}
#sect04 .liBox h3{
margin: 0 0 12px;
font-size:2.2rem;
text-align: center;
}
#sect04 .liBox .btn-internal{
position: absolute;
left: 7%;
bottom: -30px;
width: 86%;
margin: 25px auto 0;
}
#sect04 .liBox .btn-internal a{
width: 100%;
}
#sect04 .liBox .btn-internal a::before {
top: 0;
right: 16px;
width: 22px;
height: 100%;
background: url(./img/arrow_ccl_wt.svg) 99% calc(50% + 1px) no-repeat;
background-size: 22px auto;
}

#sect04 .liBox:nth-child(2){
top: 80px;
}
#sect04 .liBox:nth-child(3){
top: 160px;
}

#sect04 .ulBox2{
left: 345px;
top: 15rem;
}



/*------------
sect05_PC
------------*/
#sect05{
margin: 0 0 100px;
padding: 120px 0 120px;
background: url("./img/bg_factory.svg") -300px -230px repeat-y #b5d8f5;
background-size: 2000px auto;
}
#sect05::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px;
background: url(./img/wave_wt_rv.svg) 0 0 no-repeat;
background-size: 100% 120px;
}
#sect05::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
background: url(./img/wave_wt_rv.svg) 0 0 no-repeat;
background-size: 100% 120px;
transform: scale(1, -1);
}
#sect05 .sectTtlArea{
padding: 100px 510px 0 50px;
color: #000;
}
#sect05 .sectTtlArea::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect05 .fuki{
position: absolute;
top: 48px;
left: 270px;
display: inline-block;
padding: 6px 20px;
background: #f2e026;
border-radius:6px;
text-align: center;
font-weight: 700;
color: #293040;
transform: rotate(5deg);
}
#sect05 .fuki::before{
content: "";
position: absolute;
bottom: -12px;
left: 0;
width: 100%;
height: 14px;
background: url(./img/tri1.svg) 50% 100% no-repeat;
background-size: 13px auto;
}

#sect05 .sectTtl{
background-image: url(./img/deco_wave_wt.svg);
}
#sect05 .flame{
position: absolute;
top: 65px;
right: -115px;
width: 580px;
}
#sect05 .flame img{
border-radius:45px;
border: 30px solid #cee5f9;
background: #fff;
padding: 0 6rem 3rem;
width: 90%;
}

#sect05 .btn-internal{
margin-top: 40px;
}
#sect05 .btn-internal a{
margin: 0 0 -40px;
box-shadow: 0 6px #e6ebf1;
}

/* End_PC */




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



/*------------
index_SP
------------*/

/*------------
　body_SP
------------*/
body{
font-size: 1.4rem;
}


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

img:not([width]) {
width:100%;
height:auto;
max-width: 100%;
}

footer{
}



body::before{
content: "";
position: absolute;
top: 120px;
left: 0;
width: 100%;
height: 1000px;
background: url("./img/bg_cloud_pg.svg") 20% 0 no-repeat;
background-size: 1100px auto;
}
body::after{
content: "";
position: absolute;
top: 75px;
left: 0;
width: 100%;
height: 90px;
background: url("./img/eng_cool.svg") 10px 0 no-repeat;
background-size: auto 38px;
}

.dotYw{
position: relative;
}
.dotYw::before{
content: "";
position: absolute;
top: -10px;
left: calc(50% - 3px);
width: 6px;
height: 6px;
background: #f2e026;
border-radius:50%;
}



/*--------------------------------------
　header_SP
---------------------------------------*/
#header{
position: relative;
z-index: 14;
margin: 0 3% 30px;
overflow: hidden;
}
#header::before{
}

#header .topArea{
position: static;
width: 100%;
padding: 4px 0 6px;
text-align: left;
}

#header .siteName{
margin: 4px 0;
font-size:1.3rem;
font-weight: 400;
line-height: 1.6;
text-align: left;
letter-spacing: 0;
}


#header .areaInner{
width: auto;
}

#header .logo{
position: relative;
width: 163px;
margin-top: 0;
}
#header .logoImg{
}
#header .logoImg img{
width: 100%;
}

#header .mvArea{
position: relative;
padding: 30px 5% 50px;
min-height: 0;
}
#header .flame{
position: static;
width: 268px;
margin: 0 auto 20px;
}
#header .mvArea h2{
margin: 0 0 15px;
padding: 0 0 20px;
background: url(./img/deco_wave1.svg) 0 100% no-repeat;
background-size: 75px auto;
font-size:3.0rem;
}
#header .mvArea h2 .fontS{
font-size:2.2rem;
}
#header h2 .dotYw::before{
top: -10px;
left: calc(50% - 4px);
width: 8px;
height: 8px;
background: #eeda0d;
}


#header .mokuji2{
position: relative;
display: block;
width: 100%;
border: 3px solid #5ebfdf;
border-radius:15px;
padding: 15px 0 0;
}
#header .mokuji2::before{
content: "";
position: absolute;
top: -25px;
right: 4%;
width: 53px;
height: 82px;
background: url(./img/icon_h3.png) 0 0 no-repeat;
background-size: 53px auto;
}
#header .mokuji2 .sttl{
width: auto;
display: block;
text-align: center;
padding: 0 0 10px;
letter-spacing: .2em;
font-size:2.0rem;
}
#header .mokuji2 .sttl span{
position: relative;
display: block;
padding: 0 0 15px;
}
#header .mokuji2 .sttl span::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("./img/eng_idx2.svg") 50% 100% no-repeat;
background-size: auto 11px;
}
#header .mokuji2 .ulBox{
display: block;
margin: 0 5%;
padding: 10px 0 20px;
border-top: 1px solid rgba(151,154,158,.3);
}
#header .mokuji2 .ulBox .inner{
display: block;
}
#header .mokuji2 .liBox{
width: auto;
margin: 6px 0;
padding: 0 0 0 4%;
}
#header .mokuji2 .liBox::before {
position: absolute;
content: "";
top: 10px;
left: 0;
width: 10px;
height: 10px;
background: rgb(106, 205, 238);
background: linear-gradient(180deg, rgba(106, 205, 238, 1) 0%, rgba(82, 184, 218, 1) 100%);
border-radius: 50%;
}
#header .mokuji2 .liBox a{
font-size:1.6rem;
font-weight: 700;
}



/*------------
sct12_SP
------------*/

.sct12{
background: url(./img/bg_cloud.svg) 70% 70px no-repeat;
background-size: 1100px auto;
}




/*------------
sect01_SP
------------*/
#sect01{
position: relative;
padding: 120px 0 0;
}

#sect01 .flame{
position: absolute;
width: 215px;
top: -120px;
left: -27px;
}
#sect01 .flame img{
border-radius:50%;
border: 12px solid rgba(10, 126, 223, .2);
}



#sect01 .sectTtlArea{
padding-left: 0;
}
#sect01 .sectTtlArea p{
padding: 0 0 100px;
}
#sect01 .sectTtlArea p::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 70px;
height: 86px;
background: url(./img/sct01_ill.png) 0 0 no-repeat;
background-size: 70px auto;
}

#sect01 .sectTtl .inner::before{
width: 0;
height: 0;
background: none;
border: none;
}



/*------------
sect02_SP
------------*/
#sect02{
position: relative;
padding: 4.5rem 0 7.5rem;
}
#sect02 .areaInner{
padding: 25px 0 0;
background: #fff;
border-radius:15px;
box-shadow: 0px 6px 28.8px 1.2px rgba(94, 191, 223, 0.2);
}
#sect02 .areaInner::before{
width: 0;
height: 0;
background: none;
border: none;
}

#sect02 .flame{
position: absolute;
z-index: 1;
width: 170px;
top: -130px;
right: -25px;
}
#sect02 .flame img{
border-radius:50%;
border: 12px solid rgba(10, 126, 223, .2);
}

#sect02 .sectTtlArea{
margin: 0 5%;
padding: 30px 0 0;
}
#sect02 .sectTtlArea::before{
background-image: url(./img/eng_str.svg);
background-position: 0 0;
}
#sect02 .sectTtl{
background-position: 0 100%;
text-align: left;
}
#sect02 .sectTtl a{
}

#sect02 .btn-internal a{
margin: 10px 0 -36px;
}




/*------------
sct34_SP
------------*/

.sct34{
position: relative;
}
.sct34::before{
width: 0;
height: 0;
background: none;
border: none;
}


.sct34::after{
width: 0;
height: 0;
background: none;
border: none;
}




/*------------
sect03_SP
------------*/
#sect03{
padding: 0 0 50px;
}

#sect03 .sectTtlArea{
margin: 0 0 0;
padding-left: 0;
}
#sect03 .sectTtlArea::before{
background-image: url("./img/eng_type.svg");
}
#sect03 .ulBox{
padding: 0 0;
}
#sect03 .liBox{
width: auto;
float: none;
padding: 20px 5% 20px;
background: url("./img/sct03_bg.svg") -20px -50px no-repeat #eafaff;
background-size: 360px auto;
border-radius:15px;
}
#sect03 .liBox:nth-child(1){
margin: 0 0 30px;
}
#sect03 .liBox:nth-child(2){
float: none;
background-color: #e6ebf1;
}

#sect03 .liBox h3{
margin: 0 0 20px;
padding: 0 0 25px;
font-size:2.0rem;
text-align: center;
}
#sect03 .liBox h3 .wtbg{
margin: 0 1rem 0 0;
padding: 2px 18px 2px 22px;
background: #fff;
border-radius:9999px;
}
#sect03 .liBox h3::before{
content: "";
position: absolute;
bottom: 0;
left: calc(50% - 25px);
width: 50px;
height: 4px;
background: rgb(41,73,158);
background: linear-gradient(180deg, rgba(41,73,158,1) 0%, rgba(7,38,121,1) 100%);
border-radius:9999px;
}

#sect03 .btn-internal{
position: static;
}
#sect03 .btn-internal a{
}




/*------------
sect04_SP
------------*/
#sect04{
padding: 0 0 0px;
}
#sect04 .areaInner::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect04 .areaInner::after{
width: 0;
height: 0;
background: none;
border: none;
}
#sect04 .sectTtlArea{
margin: 0 0 30px 0;
}
#sect04 .sectTtlArea::before{
background-image: url("./img/eng_kn.svg");
background-position: 0 0;
}
#sect04 .sectTtl {
background-position: 0 100%;
text-align: left;
}
#sect04 .sectTtl .inner{
display: block;
}
#sect04 .sectTtl .inner::before{
content: "";
position: absolute;
top: -25px;
left: auto;
right: 0;
}

#sect04 .liBox{
margin-bottom: 90px;
padding: 45px 5% 60px;
background: #e6ebf1;
border-radius:15px;
}
#sect04 .liBox::before{
content: "";
position: absolute;
top: -34px;
left: 0;
width: 100%;
height: 68px;
background: url("./img/sct04_icon.png") 50% 0 no-repeat;
background-size: 68px auto;
}
#sect04 .liBox h3{
margin: 0 0 12px;
font-size:2.0rem;
text-align: center;
}
#sect04 .liBox .btn-internal{
position: absolute;
left: 7%;
bottom: -30px;
width: 86%;
margin: 25px auto 0;
}
#sect04 .liBox .btn-internal a{
width: 100%;
}
#sect04 .liBox .btn-internal a::before {
top: 0;
right: 16px;
width: 22px;
height: 100%;
background: url(./img/arrow_ccl_wt.svg) 99% calc(50% + 1px) no-repeat;
background-size: 22px auto;
}

#sect04 .liBox:nth-child(2){
top: 0;
}
#sect04 .liBox:nth-child(3){
top: 0;
}

#sect04 .ulBox2{
left: 0;
}



/*------------
sect05_SP
------------*/
#sect05{
margin: 0 0 20px;
padding: 80px 0 110px;
background: url(./img/bg_factory.svg) -30px -230px repeat-y #5ebfdf;
background-size: 800px auto;
}
#sect05::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: url(./img/wave_wt_rv_sp.svg) 0 0 no-repeat;
background-size: 100% 60px;
}
#sect05::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 60px;
background: url(./img/wave_wt_rv_sp.svg) 0 0 no-repeat;
background-size: 100% 60px;
transform: scale(1, -1);
}
#sect05 .sectTtlArea{
padding: 50px 0 0;
color: #fff;
}

#sect05 .sectTtlArea::before {
content: "";
position: absolute;
top: 33px;
left: 0;
width: 70px;
height: 70px;
background: url(./img/icon_factory.png) 0 0 no-repeat;
background-size: 70px auto;
}
#sect05 .sectTtl .inner::before {
width: 0;
height: 0;
background: none;
border: none;
}

#sect05 .fuki{
position: absolute;
top: 10px;
left: auto;
right: 0;
display: inline-block;
padding: 4px 5%;
background: #f2e026;
border-radius:6px;
text-align: center;
font-size:1.1rem;
font-weight: 700;
color: #293040;
transform: rotate(5deg);
}
#sect05 .fuki::before{
content: "";
position: absolute;
bottom: -9px;
left: 0;
width: 100%;
height: 14px;
background: url(./img/tri1.svg) 50% 100% no-repeat;
background-size: 10px auto;
}

#sect05 .sectTtl{
background-image: url(./img/deco_wave_wt.svg);
}
#sect05 .flame{
position: static;
width: auto;
margin: 0 0 20px;
}
#sect05 .flame img{
border-radius:30px;
border: 15px solid #cee5f9;
padding: 0 4rem 2rem;
width: 90%;
margin: 0 2rem;
}

#sect05 .btn-internal{
margin-top: 10px;
}
#sect05 .btn-internal a{
margin: 0 0 -80px;
box-shadow: 0 6px #e6ebf1;
}




}