@charset "utf-8";
.doc-tit {margin-bottom: 30px;}	
.doc-tit h3 {position: relative; font-weight: 500; font-size: 34px; line-height: 1.4em; letter-spacing: -.04em; padding-left: 38px;}
.doc-tit h3:before {content:""; position: absolute; top: 9px; left: 0; width: 32px; height: 32px; background-image:url("../images/sub/bullet.png"); background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.doc-tit p {font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -.04em; margin-top: 10px;}

.dot-list > li{position:relative; padding-left:10px; color:#454545;}
.dot-list > li:last-child{margin-bottom:0;}
.dot-list > li:before{content:"·"; position:absolute; top:0; left:0; color:#454545;}

.sub-tab {position: relative; margin-bottom:80px; text-align:center;}
.sub-tab:after {content:""; position:absolute; left:0; right:0; bottom:0; border-bottom:1px solid #563772;}
.sub-tab ul {display:flex; width:100%;}
.sub-tab ul li {flex:1; width: auto; background:#fff; border:1px solid #dfdfdf; border-left:0; border-bottom:0;}
.sub-tab ul li:first-child {border-left:1px solid #dfdfdf;}
.sub-tab ul li a {position:relative; display:block; color: #505050; font-weight:500; line-height:58px; white-space: nowrap;padding: 0 5px;}
.sub-tab ul li.active a {color: #563772; font-weight: 700; z-index:2;}
.sub-tab ul li.active a:after {content:""; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; border:4px solid #563772; border-bottom: 1px solid #fff;}
.sub-tab ul li:not(.active) { border-bottom:1px solid #563772;}


/* overview */
.overview-top-txt {margin-bottom: 80px; text-align: center; background: url("../images/sub/line.jpg"); padding: 20px;}
.overview-top-txt .inner {background: #fff; padding: 45px 20px;}
.overview-top-txt h3 {color: #563772; font-size: 20px; font-weight: 500; line-height: 1.7; letter-spacing: -.04em; margin-bottom: 10px;}
.overview-top-txt p {color: #505050; font-weight: 300;}

.overview {}
.overview .group {display: flex;align-items: center; margin-bottom: 80px;}
.overview .group:last-child {margin-bottom: 0;}
.overview .group .img {width: 62.58%;}
.overview .group .txt {flex: 1 1 auto; min-width: 0; width: 1%;}
.overview .group .txt .tit {position: relative; font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: -.04em; padding-bottom: 23px; margin-bottom: 33px; border-bottom: 1px solid #dfdfdf;}
.overview .group .txt .tit:after {content:""; position: absolute; bottom: -1px; left: 0; width: 60px; height: 3px; background: #2c2c2c;}
.overview .group .txt .desc {color: #505050; font-size: 18px; font-weight: 300; line-height: 1.556em; letter-spacing: -.04em;}
.overview .group .txt .desc.hypen {padding-left: 0.438em; text-indent: -0.438em;}

.overview .group:nth-child(odd) .img {padding-right: 25px;}
.overview .group:nth-child(even) .img {order: 2; padding-left: 25px; text-align: right;}

.application {}
.application .group {display: flex;align-items: center; margin-bottom: 80px;}
.application .group:last-child {margin-bottom: 0;}
.application .group .img {width: 55%;}
.application .group .txt {flex: 1 1 auto; min-width: 0; width: 1%;}
.application .group .txt .tit {position: relative; font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: -.04em; margin-bottom: 25px;}
.application .group .txt .desc {color: #505050; font-size: 18px; font-weight: 300; line-height: 1.556em; letter-spacing: -.04em;}
.application .group .txt .desc.hypen {padding-left: 0.438em; text-indent: -0.438em;}

.application .group:nth-child(even) .img {padding-right: 25px;}
.application .group:nth-child(odd) .img {order: 2; padding-left: 25px; text-align: right;}

/* technology */
.technology {position: relative; padding-bottom: 50%; min-height: 350px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover;}
.technology:before,
.technology:after {content:""; position: absolute; left: 50%; z-index: 1;}
.technology:before {width: 1px; height: 32%; top: 0; background: #fff;}
.technology:after {width: 9px; height: 9px; top: 32%; background: #fff; border-radius:100%; margin-left: -4px;}
.technology .box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 760px; width: calc(100% - 60px); height: 60%; display: table; background: rgba(0,0,0,.4); border: 10px solid rgba(255,255,255,.4);}
.technology .cell {display: table-cell; vertical-align: middle;}
.technology .box p {text-align: center; color: #fff; font-size: 30px; font-weight: 200; line-height: 1.733em; letter-spacing: -.04em;}

.technology.bg1 {background-image:url("../images/sub/technology1.jpg");}
.technology.bg2 {background-image:url("../images/sub/technology2.jpg");}
.technology.bg3 {background-image:url("../images/sub/technology3.jpg");}

/* introduction */
.introduction {padding-bottom: 120px;}
.introduction .intro-txt {position: relative; height: 410px; margin-bottom: 80px; background: url("../images/sub/introduction.jpg") center center no-repeat; background-size:cover;}
.introduction .intro-txt .box {position: absolute; max-width: 750px; left: 6.6%; bottom: -20px; margin-right: 30px; padding: 50px 55px; box-shadow:rgba(0,0,0,.4) 3px 0 20px; background: linear-gradient(130deg, #563772 25%, #3cc1c6 75%);}
.introduction .intro-txt .box p {color: #fff; font-size: 18px; font-weight: 300; line-height: 1.889em; letter-spacing: -.04em;}

.introduction .intro-info {}
.introduction .intro-info ul {display: flex;flex-wrap:wrap; margin: 0 -20px; text-align: center;}
.introduction .intro-info ul li {width: 25%; padding: 0 20px;}
.introduction .intro-info ul li .in {height: 100%; padding-bottom: 15px; border-bottom: 2px solid #dfdfdf;}
.introduction .intro-info ul li .icon {}
.introduction .intro-info ul li .tit {font-size: 20px; font-weight: 300; line-height: 1.4; letter-spacing: -.04em; margin: 10px 0 15px;}
.introduction .intro-info ul li .desc {color: #505050; font-weight: 300; line-height: 1.375em;}

.value {padding: 90px 0 150px; background: #fafafa; text-align: center;}
.value .tt {font-size: 34px; font-weight: 700; left: 1.2em; line-height: 1.2; letter-spacing: -.04em; margin-bottom: 45px;}
.value ul {display: flex;flex-wrap:wrap; margin: 0 -10px;}
.value ul li {width: 25%; padding: 0 10px;}
.value ul li .in {display: table; width: 100%; padding: 20px; min-height: 380px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover;}
.value ul li p {display: table-cell; vertical-align:bottom; color: #fff; font-size: 18px; line-height: 1.444em; letter-spacing: -.04em;}

.value ul li .in.bg1 {background-image:url("../images/sub/value1.jpg");}
.value ul li .in.bg2 {background-image:url("../images/sub/value2.jpg");}
.value ul li .in.bg3 {background-image:url("../images/sub/value3.jpg");}
.value ul li .in.bg4 {background-image:url("../images/sub/value4.jpg");}

/* history */
.history {background: url("../images/sub/bg_history.png") center top no-repeat; background-size: contain;}
.history .head {padding-top: 21%; text-align: center;}
.history .head p {color: #fff; font-weight: 500; line-height: 1.5; letter-spacing: .2em; margin-bottom: 20px;}
.history .head h3 {color: #563772; font-size: 100px; font-weight: 700; line-height: 1.1; letter-spacing: -.04em;}
.history .body{position:relative; margin-top: 55px; padding-top: 110px; background: url("../images/sub/history_top.png") center top no-repeat;}
.history .body:before {content:""; position:absolute; left:50%; top:44px; width:1px; background-color: #dfdfdf; height:81%;} 
.history .body .group{position:relative; width: 50%; margin-bottom:80px;}
.history .body .group:last-child{margin-bottom:0;}
.history .body .group:after {content:""; position:absolute; top:17px; width:11px; height:11px; background: #3cc1c6; transform:rotate(45deg);}
.history .body .group .year {font-size:36px; font-weight:700; line-height:1.25em; letter-spacing:-.04em;}
.history .body .group ul {margin-top: 20px;}
.history .body .group ul li {display: flex; color: #505050; font-weight: 300; margin-bottom: 10px;}
.history .body .group ul li .month {min-width: 52px; font-size: 18px; font-weight: 500;}
.history .body .group ul li:last-child {margin-bottom: 0;}

.history .body .group:nth-child(odd) {margin-left: 50%; padding-left: 55px;}
.history .body .group:nth-child(odd):after {left: -5px;}
.history .body .group:nth-child(even) {text-align: right; padding-right: 55px;}
.history .body .group:nth-child(even):after {right: -6px; background: #563772;}
.history .body .group:nth-child(even) ul li {justify-content: flex-end;}
.history .body .group:nth-child(even) ul li .month {order: 2;}

/* certify */
.certify {padding: 40px 0 145px; background: url("../images/sub/bg_certify.jpg") right bottom no-repeat; background-size:contain;}
.certify ul {margin: 0 -10px; text-align: center;}
.certify ul li {display: inline-block;padding: 0 10px;}
.certify ul li p {font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: -.04em; margin-top: 18px;}
.certify ul li img {box-shadow:rgba(0,0,0,.15) 0 0 30px;)}
.certify ul li:first-child {float:left;}
.certify ul li:last-child {float:right;}

/* partner */
.partner {}
.partner .head {text-align: center;}
.partner .head:after {content:""; display: block; width: 1px; height: 50px; background: #2c2c2c; margin: 20px auto 40px;}
.partner .head p {color: #878787; font-size: 22px; font-weight: 300; line-height: 1.4; letter-spacing: -.04em; margin-top: 12px;}
.partner ul {display: flex;flex-wrap:wrap;justify-content: center; margin: 0 -30px -50px; text-align: center;}
.partner ul li {width: 33.3333333%; padding: 0 30px; margin-bottom: 50px;}
.partner ul li p {font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: -.04em; margin-top: 18px;}
.partner ul li a:hover .img {position: relative; box-shadow: rgba(60,193,198,.2) 2px 0 20px;}
.partner ul li a:hover .img:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:3px solid #3cc1c6;}