#system{margin-bottom: 5rem; /*padding: 5rem 0rem; border-top: solid 5px #f69; */position: relative; box-sizing: border-box; /*background: linear-gradient(-25deg, #fff 0%, #fff 40%, #fcebf1 40%, #fcebf1 100%);*/}
@media screen and (max-width:1024px){
#system{padding: 2rem 0rem;}
}
#system .btn{width: 50%; display: flex;}
#system .btn a{margin: 0 1rem;}

#system .inner,#system .inner2{background: #fff; width: 100%; padding: 2rem; box-sizing: border-box;font-family: '源柔ゴシック';box-shadow: 5px 5px 8px rgba(0, 0, 0, .1);}
#system .inner p,#system .inner2 p{font-size: 1.6rem; line-height: 3.2rem;}
#system .imgbox{width: 100%; line-height: 0;}
#system .imgbox img{width: 100%;}

#system .outer{background: linear-gradient(180deg, #fff 0%, #fff 40%, #fcebf1 40%, #fcebf1 100%);padding: 5rem 2rem; box-sizing: border-box;}
#system .outer2{background: linear-gradient(165deg, #fff 0%, #fff 50%, #fcebf1 50%, #fcebf1 100%);padding: 5rem 2rem; box-sizing: border-box;}
#system .outer3{background: linear-gradient(-15deg, #fff 0%, #fff 50%, #f788af 50%, #f788af 100%);padding: 5rem 2rem; box-sizing: border-box; margin-bottom: 5rem;}
#system .outer-centimg,#system .outer-leftimg,#system .outer-rightimg{display: flex; align-items: end; flex-wrap: nowrap; position: relative; box-sizing: border-box; max-width:1024px; width: 100%; margin:0 auto;}
#system .outer-centimg{flex-direction: column; align-items: center; padding: 0 2rem;}
#system .outer-centimg .inner{width: 100%; text-align: center;border-radius: 0 20px 0 20px;}
#system .outer-centimg .imgbox{width: 45% !important;}
#system .outer-rightimg{flex-direction: row-reverse; margin-bottom: 2rem;}
#system .outer-rightimg .imgbox{width: 45% !important;}
#system .outer-leftimg .imgbox{width: 40% !important;}
#system .outer-leftimg .inner{flex:1;border-radius: 0 20px 0 20px; margin-bottom: 1rem;}
#system .inner2{box-sizing: border-box; max-width:1024px; width: 100%; margin:0 auto 2rem;border-radius: 0 0 20px 20px;}
#system .outer-centimg .inner2{margin-top: 2rem !important;}
#system .outer-rightimg .inner{width: 80%;border-radius: 20px 0 20px 0; margin-bottom: 0rem;}

#system .outer2 ul,#system .outer3 ul{padding-left: 2rem; margin: 2rem 0;}
#system .outer2 li,#system .outer3 li{list-style-type: square !important;}

#system .ptx{display: flex; width: 80%; margin: 0 auto;}
#system .ptx li{width: 25%; padding: 1rem; box-sizing: border-box;}
#system .ptx li .circleinner{background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%); border: 3px solid #fff; ;box-shadow: 5px 5px 8px rgba(0, 0, 0, .1); box-sizing: border-box; border-radius: 50%; position: relative; padding-top: 100%; height: 0;}
#system .ptx li .circleinner p{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70%; text-align: center; font-size: 2.4rem; font-weight: bold; color: #fff;}

#system .outer-leftimg .fadein-right{transition: all 0.8s .1s ease-in !important;}
#system .outer-rightimg .fadein-left{transition: all 0.8s .1s ease-in !important;}
#system .inner2.fade-up-in{transition: all 0.8s .1s ease-in-out !important;}

#system .flowbox{background: #000;font-family: '源柔ゴシック'; padding: 2.4rem 8rem; margin:2rem 0 5rem; position: relative; border-radius: 5px; position: relative; color: #fff;}
#system .flowbox:after{content: ''; position: absolute; top: 100%; left: 50%;transform: translateX(-50%); border-top: 25px solid #000; border-right: 25px solid transparent; border-left: 25px solid transparent;}
#system .flowbox .num{background-image: linear-gradient(to bottom, #f9d423 0%, #ff4e50 100%); width: 90px; height: 90px; font-size: 3rem; box-sizing: border-box; border-radius: 50%; position: absolute; left: -26px; top: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transform: translateY(-50%);}

h4{display: flex; align-items: center; background: linear-gradient(transparent 80%, #ff7f7f 0%);}
h4{font-size: 18px; padding: 8px 5px; color: #8f0e0e; margin: 8px 0; font-weight: bold;}
h4 i{margin-right: 5px;}