@charset "UTF-8";

/* ======================================== メイン ======================================== */
::selection {color: #fff;background-color: #f37e86;}
.section--hero{width:100%;background:#fdfdfd;background-image: linear-gradient(#f1f1f1 1px, transparent 0),linear-gradient(90deg, #f1f1f1 1px, transparent 0);background-size: 30px 30px;position: relative;}
.section--hero .inner{width: 1170px;margin: 0 auto;}
.hero_gradient {width: 100%; margin: 0 auto;height: 4px;background:linear-gradient(45deg, #46bcc6,#e0bf00,#7b59a3,#187fc4,#01aa71);background-size: 200% 200%;animation: bggradient 10s ease infinite;}
@keyframes bggradient{0% {	background-position: 0% 50%;}50% {	background-position: 100% 50%;}100% {	background-position: 0% 50%;}}


/* コピー
----------------------------- */
h1{padding: 35px 0 35px 0;font-size: 50px;letter-spacing: 0.05em;font-weight: 800;line-height: 1.5;}
p.problems{background-image: url("../img/top/problems.svg");background-repeat: no-repeat;margin-top: 70px;margin-bottom: -25px; width: 222px;height: 71px;}

/* サブテキスト
----------------------------- */
.inner .sub{font-size: 18px;letter-spacing: 0.07em;line-height: 1.8;font-weight: 500;padding-bottom: 100px;}

/* メインイメージ
----------------------------- */
.container_hero{position: relative; padding-top: 138px;}
.container_hero img.main_img{position: absolute; top: 178px; right: 10px}
.container_hero img.main_img_bg{position: absolute; top: 178px; right: 10px}
.container_hero img.main_no1{position: absolute;top:538px; right: 0}

/* 見出し
----------------------------- */
h2{font-size: 36px;text-align: center;background-position:bottom 0 right 50%;background-image: url("../img/top/h2_top.png");background-repeat: no-repeat;margin: 60px 0 36px 0;padding-bottom: 35px;letter-spacing: 0.05em;line-height: 1.5;font-weight: 700;}

/* ======================================== SSBソリューションのパッケージシステムが選ばれるわけ ======================================== */
#intro{width: 1190px; margin: 0 auto;}
.container_intro{display: flex;height: 850px;}
.lead{width: 360px; height: 500px; background: #f8f8f8;position: relative;top:230px;margin: 0 27px;padding: 32px 26px;}
.lead img{position: absolute;top: -158px;right: 22px;}
.lead p.number{margin: 160px auto 12px auto;font-weight: 600;color: #dd0514;text-align: center;font-size: 20px;}
.lead h5{font-size: 28px; font-weight: 700; text-align: center;line-height: 1.7;letter-spacing:1px;}
.lead p.detail{font-size: 16px; line-height: 1.8;margin-top: 16px;letter-spacing:0.01em;}


/* ======================================== 導入検討から運用まですべてをご支援 ======================================== */
#support{width: 1036px; margin: 0 auto;position: relative;}
#support table{font-size: 19px;text-align: center;margin: auto 0;width: 1005px;}
#support th{font-weight: 600;width: 221px;border-radius: 20px;padding: 15px 0;line-height: 2;}
#support th span{position: absolute;top: 140px;right: 37px;width: 196px;}
#support img.logo_s{position: absolute; top: 144px; right: 230px;width: 30px;}
#support td{border-left: 7px solid #fff;padding: 32px 0;font-size: 29px;}
#support td:nth-of-type(1){font-size: 19px;color: #fff;background: #787796;}
#support td:nth-of-type(2){border-left: 7px solid #fff;}
#support tr:nth-of-type(2n){background: #fafafa;}
#support tr:nth-of-type(2n+1){background: #e6e6e6;}
#support tr:nth-of-type(1){background: #fff;}
#support td.triangle{background-position: center; background-image: url(../img/top/triangle.png);background-repeat: no-repeat;}
#support .fa-xmark{color: #5ba5c8;}
#support .fa-circle{color: #e7c820;}
#support .red_frame{width: 251px; height: 648px; border: 4px solid #de0615;border-radius: 15px;position: absolute;top: 113px;right: 25px;}
#support p{text-align: center;margin: 40px 0 100px 0;font-size: 18px;font-weight: 600;}

/* ======================================== 金融パッケージ製品 業界シェア No.1 ======================================== */
.industry_share{background: #de0615;display: flex;padding: 30px 60px;width: 906px;color: #fff;}
.fa-crown{color: #e3c211;font-size: 98px;}
.patronage{color: #fff;font-size: 35px;font-weight: 800;line-height: 1.25;margin-left: 20px;}
.patronage span{font-size: 25px;font-weight: 700;}
.no1{font-size: 90px;font-weight: 800;margin-left: 22px;}

/* 光
----------------------------- */
.shine{position: relative;overflow: hidden;}
.shine::before{content: "";animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;background-color: rgba(255,255,255,.5);width: 150%;height: 100%;transform: skewX(-45deg);top: 0;left: -160%;opacity: 0.8;position: absolute;}
@keyframes shine{ 0%{left: -160%; opacity: 0;} 70%{left: -160%; opacity: 0.5;} 71%{ left: -160%; opacity: 1;} 100%{  left: -20%;  opacity: 0;}}

/* ======================================== システムラインナップ ======================================== */
#lineup{background: #f8f8f8;padding-top: 1px;margin-top: 120px;}
#lineup ul{width: 1200px;display: flex;flex-wrap: wrap;margin: 0 auto; padding-bottom: 100px;position: relative;}
#lineup li{width: calc(50% - 87px);background: #fff;margin: 12px 24px 28px 15px;padding: 24px 24px 41px 24px;box-shadow: 0px 0px 12px 3px #e3e3e3;transition: .3s;}
#lineup li:hover{box-shadow: 0px 0px 24px 6px #d4d4d4;}
#lineup li a{color: #1d1d1f;}
#lineup li:nth-child(1) a:hover{color: #46bcc6;}
#lineup li:nth-child(2) a:hover{color: #e0bf00;}
#lineup li:nth-child(3) a:hover{color: #7b59a3;}
#lineup li:nth-child(4) a:hover{color: #187fc4;}
#lineup li:nth-child(5) a:hover{color: #01aa71;}
#lineup li:nth-child(6) a:hover{color: #969696;}
#lineup li a p{font-size: 30px;font-weight: 600;line-height: 1.5;}
#lineup li a p span{font-size: 18px;font-weight: 500;}
#lineup .fa-circle-arrow-right{position: absolute;font-size: 45px;}
#lineup .estate_arrow{color: #47bcc6;top: 66px;left: 505px;}
#lineup .account_arrow{color: #e1be00;top: 66px;right: 52px;}
#lineup .invest_arrow{color: #7b59a3;top:262px;left: 505px;}
#lineup .closing_arrow{color: #187fc4;top:262px;right: 52px;}
#lineup .securities_arrow{color: #01aa71;top:455px;left: 505px;}
#lineup .others_arrow{color: #959595;top:455px;right: 52px;}

/* ======================================== 新着情報 ======================================== */
#news{width:100%;background:#fdfdfd;background-image: linear-gradient(#f1f1f1 1px, transparent 0),linear-gradient(90deg, #f1f1f1 1px, transparent 0);background-size: 30px 30px;margin: -60px auto 0 auto;}
#news a{color: #1d1d1f;}
#news a:hover{opacity: 0.6;}
#news a span.title:hover::after{width: 100%;}
#news h2{padding-top: 60px;}
#news p.news_list{width: 1190px; margin: 0 auto 14px auto; text-align: right;font-weight: 500;}
#news ul{width: 1190px; margin: 0 auto; padding-bottom: 105px}
#news li{padding:30px 50px;transition: .3s;}
#news li:nth-of-type(2n){background: #fff;}
#news li:nth-of-type(2n+1){background: #f2f2f2;}
#news li .list_inner {width: 100%;max-width: 100%;display: flex;align-items: center;}
#news li .list_inner .flex {width: 330px;margin: 0 32px 0 0;}
#news li .list_inner .flex time {width: 126px;color: #666;font-size: 14px;padding-right: 30px;}
#news li .list_inner .flex .estate_tag{text-align: center;font-size: 13px;color: #fff;background: #47bcc6;padding: 5px 10px;}
#news li .list_inner .flex .account_tag{text-align: center;font-size: 13px;color: #fff;background: #e1be00;padding: 5px 36px;}
#news li .list_inner .flex .invest_tag{text-align: center;font-size: 13px;color: #fff;background: #7b59a3;padding: 5px 23px;}
#news li .list_inner .flex .closing_tag{text-align: center;font-size: 13px;color: #fff;background: #187fc4;padding: 5px 36px;}
#news li .list_inner .flex .securities_tag{text-align: center;font-size: 13px;color: #fff;background: #01aa71;padding: 5px 10px;}
#news li .list_inner .flex .others_tag{text-align: center;font-size: 13px;color: #fff;background: #959595;padding: 5px 36px;}
#news li .list_inner .title {width: calc(100% - 190px);line-height: 1.5;font-size: 15px;}