@charset "utf-8";

/* ===================================================== */
/* COMMON */

.body-main,
section {position:relative;}
section .fp-tableCell {vertical-align: top !important; padding: 160px 0 0;}

/* control */
.main__control {position: fixed; top: 50%; left: 20px; transform: translateY(-50%); z-index: 1;}
#full_nav li+li {margin-top: 20px;}
#full_nav li a {display: block; font-size: 0; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.3);}
#full_nav li.active a,
#full_nav li:hover a {background: #0089d0;}
#full_nav.color01 li a {background: rgba(0, 137, 208, 0.3);}
#full_nav.color01 li.active a,
#full_nav.color01 li:hover a {background: #0089d0;}

/* main title */
.main_title {color: #fff;}
.main_title h2 {font-size: 40px; font-weight: 700; letter-spacing: 0.025em;}
.main_title p {font-size: 18px; font-weight: 500; letter-spacing: -0.025em; margin-top: 10px;}
.main_title p br {display: none;}
.main_title p span {font-weight: 800;}

/* button */
section .btn {margin-top: 110px;}
section .btn a {display: block; width: 185px; height: 48px; font-size: 16px; font-weight: 700; color: #fff; position: relative;}
section .btn a::after {display: block; content: ""; width: 185px; height: 48px; background: url('../images/main/ico_arrow01.png') no-repeat right center; position: absolute; bottom: 0; right: 0; transition: all 0.3s ease-in-out;}
section .btn:hover a::after {transform: translateX(10px);}

@media (max-width: 1240px) {
  .main__control {display: none;}
  section .fp-tableCell {padding: 125px 0 135px;}
  
  .main_title h2 {font-size: 34px;}
  .main_title p {font-size: 17px;}
}
@media (max-width: 1024px) {
  section .fp-tableCell {padding: 105px 0 115px;}
}
@media (max-width: 768px) {
  section .fp-tableCell {padding: 85px 0 95px;}

  section .btn {margin-top: 90px;}
  section .btn a {width: 135px;}
  section .btn a::after {width: 135px;}

  .main_title h2 {font-size: 28px;}
  .main_title p {font-size: 16px; line-height: 1.3;}
}
@media (max-width: 480px) {
  .main_title h2 {font-size: 24px;}
  .main_title p {font-size: 15px;}
  .main_title p br {display: block;}
}
/* ===================================================== */


/* visual */
.main__visual .fp-tableCell {position: relative; padding: 0}
.main__visual-list {position: absolute; top: 0; left: 0;}
.main-visual-item {position:relative; overflow: hidden;}
.main__visual-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main__visual-bg .main__visual-img {width: 100%; height: 100%; background: url('../images/main/main__visual01.png') no-repeat center / cover; transform: scale(1.2); transition: all 5s ease-in;}
.main-visual-item.nth-2 .main__visual-bg .main__visual-img {background-image: url('../images/main/main__visual02.png');}
.main-visual-item.nth-3 .main__visual-bg .main__visual-img {background-image: url('../images/main/main__visual03.png');}
.main-visual-item.nth-4 .main__visual-bg .main__visual-img {background-image: url('../images/main/main__visual04.png');}
.main__visual-bg .main__visual-img.is-scale {transform: scale(1);}

.main__visual-inner {display: flex; align-items: center; height: 100vh; padding-left: 180px; position: relative; z-index: 1;}
.main__visual-inner h2 {font-size: 90px; font-weight: 700; color: #fff; line-height: 1.1;}
.main__visual-inner h2 span {display: block;}
.main__visual-inner h2 em {vertical-align: baseline;}
.main__visual-inner h2 span:first-child em {color: #1bb8eb;}
.main__visual-inner h2 span:first-child em:last-child {color: #1b8ece;}
.main__visual-inner h2 span:last-child em {color: #105caa;}
.main__visual-inner p {font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.025em; line-height: 1.3;}

.main__visual-dot-wrap {position: absolute; left: 170px; top: calc(50% + 160px); width: 100%;}
.main__visual-dots .slick-dots li {position: relative; transition: all .3s ease-in-out; margin: 0 10px; display: inline-block;}
.main__visual-dots .slick-dots li::after {display: block; content: ""; width: 0; height: 2px; background: #0474bb; position: absolute; bottom: 50%; left: 30px; transition: all .3s ease-in-out;}
.main__visual-dots .slick-dots .slick-active::after {width: 120px;}
.main__visual-dots .slick-dots button {position: relative; width: 20px; height: 22px; border: 0; background: transparent; font-size: 0;}
.main__visual-dots .slick-dots button::after {display: block; content: '01'; font-size: 16px; font-weight: 700; color: #fff; position: absolute; top: 0; left: 0; transition: all .3s ease-in-out;}
.main__visual-dots .slick-dots li:nth-of-type(2) button::after {content: '02';}
.main__visual-dots .slick-dots li:nth-of-type(3) button::after {content: '03';}
.main__visual-dots .slick-dots li:nth-of-type(4) button::after {content: '04';}
.main__visual-dots .slick-dots .slick-active {padding-right: 135px;}
.main__visual-dots .slick-dots .slick-active button::after {color: #0474bb;}
.main__visual-dots .slick-dots button:hover::after {color: #0474bb;}

.side-util {position: absolute; top: 60%; right: 50px;}
.side-util .util-item {position: relative;}
.side-util .util-item::before {display: block; content: ""; width: 337px; height: 337px; background: url('../images/main/ico_side-util_bg.png') no-repeat center/contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: is-any 100s linear infinite;}
.side-util a {font-size: 0; display: block; width: 120px; height: 120px; border-radius: 50%; background: #fff url('../images/main/ico_side-util.png') no-repeat center; position: relative; z-index: 1; transition: all 0.3s ease-in-out;}
.side-util a:hover {background-color: #1bb8eb;}
@keyframes is-any {
    100% {transform: translate(-50%, -50%) rotate(360deg);}
}

@media (max-width: 1440px) {
  .main__visual-inner {padding-left: 10%;}
  .main__visual-inner h2 {font-size: 80px;}
  .main__visual-inner p {font-size: 18px;}

  .main__visual-dot-wrap { left: calc(10% - 10px); top: calc(50% + 130px);}

  .side-util .util-item::before {width: 250px; height: 250px;animation-duration: 80s;}
  .side-util a {width: 90px; height: 90px;}
}
@media (max-width: 1024px) {
  .main__visual-inner {padding-left: 3%;}
  .main__visual-inner h2 {font-size: 70px;}
  .main__visual-inner p {font-size: 17px;}

  .main__visual-dot-wrap { left: calc(3% - 10px); top: calc(50% + 115px);}

  .side-util {top: auto; bottom: 18%; right: 30px;}
  .side-util .util-item::before {width: 200px; height: 200px; animation-duration: 70s;}
  .side-util a {width: 80px; height: 80px;}

  .main-visual-item .main__visual-bg .main__visual-img {background-position: left;}
  .main-visual-item.nth-3 .main__visual-bg .main__visual-img {background-position: center;}
  
}
@media (max-width: 768px) {
  .main__visual-inner {padding-left: 0;}
  .main__visual-inner h2 {font-size: 60px;}
  .main__visual-inner p {font-size: 16px; margin-top: 5px;}

  .main__visual-dot-wrap {left: -8px; top: calc(50% + 100px);}
}
@media (max-width: 576px) {
  .main__visual-inner h2 {font-size: 10vw;}
  .main__visual-inner p {font-size: 15px; margin-top: 5px; line-height: 1.4; font-weight: 500;}

  .main__visual-dot-wrap {left: -8px; top: calc(50% + 22vw);}
  .main__visual-dots .slick-dots li {margin: 0 8px;}
  .main__visual-dots .slick-dots li::after {left: 26px;}
  .main__visual-dots .slick-dots .slick-active::after {width: 80px;}
  .main__visual-dots .slick-dots button::after {font-size: 15px;}
  .main__visual-dots .slick-dots .slick-active {padding-right: 95px;}

  .main-visual-item.nth-1 .main__visual-bg .main__visual-img {background-position: -400px;}
  .main-visual-item.nth-2 .main__visual-bg .main__visual-img {background-position: -230px;}
  .main-visual-item.nth-3 .main__visual-bg .main__visual-img {background-position: -400px;}

}
@media (max-width: 350px) {
  .main-visual-item.nth-1 .main__visual-bg .main__visual-img {background-position: -550px;}
  .main-visual-item.nth-2 .main__visual-bg .main__visual-img {background-position: -230px;}
  .main-visual-item.nth-3 .main__visual-bg .main__visual-img {background-position: -400px;}
}

/* Solutions */
.main__solutions::before,
.main__solutions::after {content: ""; width: calc(50% + 300px); height: 100%; background: url(../images/main/section02-bg01.png) no-repeat right center/cover; position: absolute; top: 0; left: 0;}
.main__solutions::after {background-image: url(../images/main/section02-bg02.png); left: auto; right: 0; width: calc(50% - 300px);}
.solutions-wrap {position: relative; z-index: 1;}
.main__solutions .main_title {color: #222;}
.solutions-inner {display: flex; margin-top: 100px; position: relative;}
.solutions-inner .text-box {width: 75%;}
.solutions-inner .text-box h2 {font-size: 80px; font-weight: 700; color: #1b8ece; line-height: 1.1;}
.solutions-inner .text-box p {margin: 40px 0 0 10px; font-size: 17px; font-weight: 700; color: #fff; line-height: 2.2;}
.solutions-inner .text-box p span {background-color: #0089d0; padding: 0.3em; margin: 0 -0.3em;}
.main__solutions .btn {margin-top: 80px;}
.main__solutions .btn a {color: #222;}
.main__solutions .btn a::after {background-image: url('../images/main/ico_arrow02.png');}
.solution-slogan {width: 25%; display: flex; flex-direction: column;}
.solution-slogan .catalog_down-box {width: 100%;}
.solution-slogan .catalog_down-box a {display: flex; flex-direction: column-reverse; justify-content: flex-end;}
.solution-slogan .txt-item h5 {font-size: 40px; font-weight: 500; color: #fff; line-height: 2;}
.solution-slogan .txt-item p {font-size: 18px; font-weight: 400; color: #fff; line-height: 1; }
.solution-slogan .img-item {margin-left: 10px; margin-bottom: 50px; display: flex; justify-content: center; align-items: center; background-color: #fff; width: 100px; height: 100px; border-radius: 9999px;}

.solution-slogan .txt-item .down-link li {background: #fff; padding: 0 5px; margin-top: 20px; display: inline-block; word-break: break-all;}
.solution-slogan .txt-item .down-link li a {margin-left: 32px; position: relative; display: block; padding: 5px; font-size: 18px; font-weight: 600; color: #1b8ece; line-height: 1.2;}
.solution-slogan .txt-item .down-link li a::before {content: ''; position: absolute; top: 50%; left: -24px; transform: translateY(-50%); width: 18px; height: 15px; background: url('../images/main/arrow-down.png') no-repeat center; background-size: contain;}
.solution-slogan .txt-item .down-link li:hover {background-color: #1b8ece}
.solution-slogan .txt-item .down-link li:hover a {color: #fff;}
.solution-slogan .txt-item .down-link li:hover a::before {filter: brightness(0) invert(1);}

/* .solution-slogan .catalog_down-box a .img-item img {animation: arrowDown 1s linear infinite;} */
/* @keyframes arrowDown {
  0% {transform: translateY(-5%);}  
  100% {transform: translateY(15%);}
} */

.solution-slogan .o-box {position: absolute; padding: 0 35px 0 5px ; bottom: 0; border-bottom: 1.5px solid #fff;}
.solution-slogan .o-txt {position: relative; font-size: 16px; font-weight: 300; color: #fff; line-height: 2.2; }
.solution-slogan .o-txt::after {content: ''; position: absolute; top: 50%; right: -24px; transform: translateY(-50%); width: 10px; height: 10px; background: url('../images/main/arrow-right.png') no-repeat center; background-size: contain;}





@media (max-width: 1600px) {
  .solutions-wrap {padding: 0 2% 0 8%;}
  .solution-slogan .o-box {bottom: 30px; }
  .solution-slogan .txt-item h5 {line-height: 1.2; margin-top: 10px;}

}
@media (max-width: 1240px) {
  .solutions-wrap {padding: 0 0 0 8%;}
  .main__solutions::before {width: 70%;}
  .main__solutions::after {width: 30%;}

  .solutions-inner {margin-top: 80px;}
  .solutions-inner .text-box {width: 70%;}
  .solutions-inner .text-box h2 {font-size: 66px;}
  .solutions-inner .text-box p {margin: 35px 0 0 10px; font-size: 16px;}
  .solutions-inner .text-box p span {padding: 0.3em; margin: 0 -0.3em;}
  .main__solutions .btn {margin-top: 70px;}
  
  .solution-slogan {width: 30%;}
  .solution-slogan h2 {font-size: 36px; line-height: 2; white-space: nowrap;}
  .solution-slogan .o-txt {margin-top: 20px;}
  .solution-slogan .txt-item h5 {font-size: 35px; line-height: 1.5;}
  .solution-slogan .txt-item p {font-size: 14px;}
  .solution-slogan .txt-item small {margin-top: 10px; font-size: 15px;}

  .solution-slogan .txt-item .down-link li a {font-size: 16px;}
  .solution-slogan .catalog_down-box {margin-bottom: 100px;}
  .solution-slogan .o-txt {line-height: 1.2; padding-bottom: 8px;}

}
@media (max-width: 1024px) {
  .solutions-inner {margin-top: 60px;}
  .solutions-inner .text-box h2 {font-size: 52px;}
  .solutions-inner .text-box p {margin: 30px 0 0 8px;}
  .main__solutions .btn {margin-top: 60px;}

  .solution-slogan h2 {font-size: 32px;}
  .solution-slogan .txt-item h5 {font-size: 35px; line-height: 1.2; margin: 10px 0;}

  .solution-slogan {width: 30%;}
  .solution-slogan h2 {font-size: 36px; line-height: 2; white-space: nowrap;}

  .solution-slogan .o-txt {margin-top: 20px;}
  .solution-slogan .txt-item h5 {font-size: 35px; line-height: 1.3;}
  .solution-slogan .txt-item p {font-size: 14px;}
  .solution-slogan .txt-item small {margin-top: 10px; padding: 5px; font-size: 15px;}
  .solution-slogan .o-box {bottom: 0; padding-bottom: 5px;}
  .solution-slogan .o-txt {line-height: 1.4;}

  .solution-slogan h2 {font-size: 32px;}
  .solution-slogan .txt-item h5 {font-size: 35px; line-height: 1.2; margin: 10px 0;}


}
@media (max-width: 768px) {
  .solutions-wrap {padding: 0;}
  .main__solutions::before {width: 100%; background-position: 80% center; background-color: #95b3c4; background-blend-mode: screen;}
  .main__solutions::after {display: none;}

  .solutions-inner {flex-direction: column-reverse; margin-top: 50px;}
  .solutions-inner .text-box {width: 100%; margin-top: 30px;}
  .solutions-inner .text-box h2 {font-size: calc(25px + 4vw);}
  .solutions-inner .text-box p {margin: 25px 0 0 8px;}
  .main__solutions .btn {margin-top: 50px;}

  .solution-slogan {background-color: #008bd0c0; width: 100%;}
  .solution-slogan h2 {font-size: calc(16px + 2.2vw); line-height: 1.5; text-align: center; padding: 25px 20px;}
  .solution-slogan br {display: none;}

  .solution-slogan .catalog_down-box {padding: 5% 8%; display: flex; align-items: center; margin-bottom: 60px;}
  .solution-slogan .catalog_down-box a {width: 100%; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;}
  .solution-slogan .img-item {margin-left: 0; margin-bottom: 0;}
  .solution-slogan .txt-item {margin-left: 10%; width: calc(90% - 100px);}
  .solution-slogan .txt-item h5 {margin-top: 10px; margin-bottom: 0;}
  .solution-slogan .o-txt {margin-top: 5px;}
  .solution-slogan .o-box {right: 30px; bottom: 15px;}
  .solution-slogan .txt-item .down-link li a {padding-right: 30px; text-align: left;}
  .solution-slogan .txt-item .down-link li:last-child {margin-top: 10px;}

}

@media (max-width: 480px) {
  .main__solutions::before {width: 100%; background-position: 80% center; background-color: #95b3c4; background-blend-mode: screen;}
  .main__solutions::after {display: none;}
  
  .solutions-inner {margin-top: 45px;}
  .solutions-inner .text-box {margin-top: 25px;}
  .solutions-inner .text-box h2 {font-size: 10vw;}
  .solutions-inner .text-box p {margin: 20px 0 0 8px; font-size: 15px; font-weight: 400;}

  .solution-slogan .catalog_down-box {min-height: 400px;}
  .solution-slogan .catalog_down-box a { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}
  .solution-slogan .txt-item {margin-left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;}
  .solution-slogan .txt-item h5 {font-size: 30px;}
  .solution-slogan .o-txt {margin-top: 15px;}
  .solution-slogan .txt-item p {margin-bottom: 5px;}
  .solution-slogan .txt-item small {padding: 0 15px;}
  .solution-slogan .txt-item h5 {font-size: 36px;}
  .solution-slogan .img-item {margin-top: 40px;}
  .solution-slogan .img-item img {width: 40px;}

  .solution-slogan .catalog_down-box {flex-direction: column;}
  .solution-slogan .img-item {margin-bottom: 30px;}
  .solution-slogan .txt-item {margin-left: 0; width: 100%; text-align: center;}
  .solution-slogan .txt-item li {text-align: left;}
}

@media (max-width: 400px) {
  .solution-slogan .txt-item .down-link li a {padding-right: 30px;}
  .solution-slogan .o-box {left: 50%; transform: translateX(-50%); width: 250px;}
}

/* Business */
.main__business {background: url('../images/main/section03-bg.png') no-repeat center / cover;}
.business-inner {padding-left: calc((100% - 1400px) / 2); max-width: 1920px;}

.business-wrap {margin-top: 100px; display: flex; justify-content: space-between; align-items: center;}

.business-info {color: #fff; font-weight: 700; width: 60%;}
.business-info .title {font-size: 80px;}
.business-info p {font-size: 18px; line-height: 1.6; margin-top: 30px; padding-right: 30px;}

.business-list {border-left: 1px solid rgba(255, 255, 255, 0.2); display: flex; flex-wrap: wrap; position: relative; padding-left: 65px;}
.business-list .business-item {opacity: 0.35; width: 100%; position: relative;}
.business-list .business-item::after {display: block; content: ''; width: 10px; height: 0; background: #fff; position: absolute; top: 0; left: -65px;}
.business-list .business-item.on {opacity: 1;}
.business-list .business-item.on::after {height: 100%;}
.business-list .business-item a {display: flex; color: #fff;justify-content: space-between;}
.business-list .business-item a::after {content: ""; background: #fff url('../images/main/business_ico01.svg') no-repeat center/80px; width: 45%; flex-shrink: 0; display: none;}
.business-list .business-item.nth-2 a::after {background-image: url(../images/main/business_ico02.svg);}
.business-list .business-item.nth-3 a::after {background-image: url(../images/main/business_ico03.svg);}
.business-list .business-item.on a::after {display: block;}
.business-list .business-item .text {padding: 25px 0;}
.business-list .business-item.nth-1 .text {padding: 10px 0 40px;}
.business-list .business-item.nth-3 .text {padding: 40px 0 10px;}
.business-list .business-item h2 {font-size: 25px; font-weight: 400;}
.business-list .business-item.on h2 {-webkit-text-stroke: 0.035em #fff;}
.business-list .business-item h6 {margin-top: 30px; font-size: 15px;}
.business-list .business-item p {font-size: 15px; font-weight: 500; margin-top: 10px; line-height: 1.4;}

@media (max-width: 1600px) {
  .business-inner {padding-left: calc((100% - 1400px) / 2 + 5%);}

  .business-info {width: 70%;}
  .business-info .title {font-size: 5vw;}
}
@media (max-width: 1440px) {
  .business-inner {padding-left: 5%; margin-left: 20px;}
}
@media (max-width: 1240px) {
  .business-inner {padding-left: 3%;}

  .business-wrap {margin-top: 80px;}
  .business-info {padding-right: 45px;}
  .business-info p {font-size: 17px;}
  .business-info p br {display: none;}

  .business-list {padding-left: 30px;}
  .business-list .business-item::after {width: 7px; left: -30px;}
  .business-list .business-item a::after {background-size: 64px;}

  .business-list .business-item .text {padding: 22px 0;}
  .business-list .business-item.nth-1 .text {padding: 8px 0 35px;}
  .business-list .business-item.nth-3 .text {padding: 35px 0 8px;}
  .business-list .business-item h2 {font-size: 23px;}
  .business-list .business-item h6 {margin-top: 25px; font-size: 14px;}
  .business-list .business-item p {font-size: 14px; padding-right: 20px;}
}
@media (max-width: 1024px) {
  .business-wrap {margin-top: 70px;}
  .business-info {padding-right: 30px; width: 55%; flex-shrink: 0;}
  .business-info p {font-size: 15px; font-weight: 500;}


  .business-list {padding-left: 20px;}
  .business-list .business-item::after {width: 4px; left: -20px;}
  .business-list .business-item a::after {background-size: 48px; width: 30%; flex-shrink: 0;}
  
  .business-list .business-item .text {padding: 20px 15px 20px 0; width: 70%;}
  .business-list .business-item .text br {display: none;}
  .business-list .business-item.nth-1 .text {padding: 7px 15px 33px 0;}
  .business-list .business-item.nth-3 .text {padding: 33px 15px 7px 0;}
  .business-list .business-item h2 {font-size: 22px;}
}
@media (max-width: 768px) {
  .business-inner {padding-left: 0;}
  .business-wrap {margin-top: 60px; flex-direction: column;}
  .business-info {width: 100%;}
  .business-info .title {font-size: 8.5vw;}
  .business-info p {margin-top: 25px;}
  .business-info .btn {margin: 35px 0 45px;}

  .business-list {padding-left: 50px; width: 100%;}
  .business-list .business-item::after {width: 7px; left: -50px;}
  .business-list .business-item a::after {background-size: 64px; width: 45%; max-width: 260px;}
  .business-list .business-item .text br {display: block;}
  .business-list .business-item h2 {font-size: 23px;}
  .business-list .business-item h6 {font-size: 15px;}
  .business-list .business-item p {font-size: 15px;}
}
@media (max-width: 576px) {
  .business-info {padding-right: 20px;}
  .business-wrap {margin-top: 5dvh;}

  .business-list {padding-left: 30px;}
  .business-list .business-item::after {width: 4px; left: -30px;}
  .business-list .business-item a::after {background-size: 48px; width: 40%;}
}
@media (max-width: 480px) {
  .business-info p {font-size: 14px;}

  .business-list {padding-left: 20px;}
  .business-list .business-item::after {width: 4px; left: -20px;}
  .business-list .business-item a::after {width: 30%;}
  .business-list .business-item .text br {display: none;}
  .business-list .business-item h2 {font-size: 22px;}
  .business-list .business-item h6 {font-size: 14px;}
  .business-list .business-item p {font-size: 14px;}
}



/* Story */
.main__story {background: url('../images/main/section04-bg.png') no-repeat center / cover;} 
.story-inner {display: flex; align-items: center; column-gap: 6%;}
.story-inner .story-list {width: 47%;}
.story-inner .company-wrap {width: 47%; position: relative;}

.story-inner .list-wrap {display: flex; padding: 60px 0;}
.story-inner .list-wrap:first-child {border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.story-inner .list-wrap .more {margin-right: 30px;}
.story-inner .list-wrap .more a {display: block; padding: 30px; background: #fff; border-radius: 30px 0 0 0; position: relative; overflow: hidden;}
.story-inner .list-wrap .more a::after {content: ""; width: 14px; height: 14px; background: url('../images/main/ico_plus.png') no-repeat center; position: absolute; bottom: 7px; right: 9px;}
.story-inner .list-wrap .more a::before {content: ""; width: 40px; height: 34px; border-top-left-radius: 40px; background: #1bb8eb; position: absolute; bottom: 0; right: 0; transition: all 0.3s ease-in-out;}
.story-inner .list-wrap:last-child .more a::before {background-color: #1b8ecd;}
.story-inner .list-wrap .more:hover a::before {width: 110%; height: 110%;}
.story-inner .list-wrap .more h2 {padding-top: 60px; font-size: 16px; font-weight: 600; color: #222; letter-spacing: -0.025em; background: url('../images/main/ico_news.png') no-repeat center top; position: relative; z-index: 1;}
.story-inner .list-wrap:last-child .more h2 {background-image: url('../images/main/ico_pr.png');}

.story-inner .list-wrap .slick-list-wrap {width: calc(100% - 150px);}
.story-inner .list-wrap .slick-list,
.story-inner .list-wrap .slick-track {height: 100%;}
.story-inner .list-item {height: 100%; position: relative;}
.story-inner .list-item a {color: #fff; height: 100%; display: block;}
.story-inner .list-item h2 {font-size: 27px; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%;}
.story-inner .list-item p {margin-top: 10px; font-size: 16px; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.story-inner .list-item span {position: absolute; bottom: 0; left: 0; font-weight: 700;}

.story-inner .slick-dots {position: absolute; bottom: 0; right: 0; z-index: 1;}
.story-inner .slick-dots li {display: inline-block;}
.story-inner .slick-dots li + li {margin-left: 10px;}
.story-inner .slick-dots li button {border: 0; font-size: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff;}
.story-inner .slick-dots li.slick-active button,
.story-inner .slick-dots li:hover button {background: #1bb8eb;}

.company-wrap .company-item {display: flex; color: #fff; padding: 60px 20px 60px 20%; overflow: hidden; position: relative; border-radius: 180px 0 180px 0; background: #1bb8eb; align-items: center;}
.company-wrap .company-item + .company-item {margin-top: 24px;}
.company-wrap .company-item.nth-2 {background: #1b8ece; border-radius: 0 180px 0 180px;}
.company-wrap .company-item.nth-3 {background: #105caa;}
.company-wrap .company-item.nth-1::after {content: ""; width: 1270px; height: 1270px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); position: absolute; bottom: -150px; right: 38%;}
.company-wrap .company-item.nth-2::after {content: ""; width: 1270px; height: 1270px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); position: absolute; bottom: 54px; right: 38%;}
.company-wrap .company-item .ico {margin-right: 46px; width: 60px; height: 60px; background: url('../images/main/ico_company01.png') no-repeat center/contain; flex-shrink: 0;}
.company-wrap .company-item.nth-2 .ico {background-image: url('../images/main/ico_company02.png');}
.company-wrap .company-item.nth-3 .ico {background-image: url('../images/main/ico_company03.png');}
.company-wrap .company-item .text {position: relative; z-index: 1;}
.company-wrap .company-item p {font-size: 16px; font-weight: 500; letter-spacing: -0.025em; color: #fff; vertical-align: baseline; line-height: 1.2;}
.company-wrap .company-item a {color: #fff; vertical-align: baseline;}
.company-wrap .company-item p + p {margin-top: 10px;}
.company-wrap .company-item span {display: inline-block; border-bottom: 1px solid #fff; font-size: 15px; font-weight: 700;}
.company-wrap .company-item em {font-size: 20px; font-weight: 700; vertical-align: baseline;}

@media (max-width: 1600px) {
  .main__story .inner {padding: 0 5%;}
}
@media (max-width: 1240px) {
  .main__story .inner {padding: 0 3%;}

  .story-inner {padding-top: 25px; column-gap: 4%;}
  .story-inner .story-list {width: 48%;}
  .story-inner .company-wrap {width: 48%;}

  .story-inner .list-wrap {padding: 55px 0;}
  .story-inner .list-wrap .more {margin-right: 25px;}
  .story-inner .list-wrap .more a {padding: 30px 25px;}
  .story-inner .list-wrap .more a::before {width: 36px; height: 30px;}
  .story-inner .list-wrap .more a::after {bottom: 5px; right: 7px;}
  .story-inner .list-wrap .more h2 {font-size: 15px; padding-top: 55px;}
  .story-inner .list-wrap .slick-list-wrap {width: calc(100% - 130px);}
  .story-inner .list-item h2 {font-size: 24px;}
  .story-inner .list-item p {font-size: 15px;}
  .story-inner .list-item span {font-size: 15px;}

  .company-wrap .company-item {padding: 45px 15%;}
  .company-wrap .company-item + .company-item {margin-top: 15px;}
  .company-wrap .company-item.nth-1::after {width: 970px; height: 970px;}
  .company-wrap .company-item.nth-2::after {width: 970px; height: 970px; bottom: 15px;}
  .company-wrap .company-item .ico {margin-right: 5%;}
  .company-wrap .company-item p {font-size: 15px;}
  .company-wrap .company-item p + p {margin-top: 10px;}
  .company-wrap .company-item span {font-size: 14px;}
  .company-wrap .company-item em {font-size: 18px;}
}
@media (max-width: 1024px) {
  .story-inner {padding-top: 20px;}

  .story-inner .list-wrap .more {margin-right: 15px;}
  .story-inner .list-wrap .more a {padding: 25px 20px;}
  .story-inner .list-wrap .more a::before {width: 30px; height: 26px;}
  .story-inner .list-wrap .more a::after {bottom: 4px; right: 5px;}
  .story-inner .list-wrap .more h2 {font-size: 14px; padding-top: 50px;}

  .story-inner .list-wrap .slick-list-wrap {width: calc(100% - 96px);}
  .story-inner .list-item h2 {font-size: 20px;}
  .story-inner .list-item p {font-size: 14px;}
  .story-inner .list-item span {font-size: 14px;}

  .story-inner .slick-dots li + li {margin-left: 8px;}
  .story-inner .slick-dots li button {width: 8px; height: 8px;}
  
  .company-wrap .company-item {padding: 35px 7%; border-radius: 60px 0 60px 0;}
  .company-wrap .company-item + .company-item {margin-top: 12px;}
  .company-wrap .company-item.nth-2 {border-radius: 0 60px 0 60px;}
  .company-wrap .company-item.nth-1::after {width: 670px; height: 670px; right: 55%;}
  .company-wrap .company-item.nth-2::after {width: 670px; height: 670px; bottom: -18px; right: 55%;}
  .company-wrap .company-item .ico {width: 50px; height: 50px; margin-right: 4%;}
  .company-wrap .company-item p + p {margin-top: 8px;}
  .company-wrap .company-item em {font-size: 16px;}
}
@media (max-width: 768px) {
  .main__story .inner {padding: 0;}
  .story-inner {flex-direction: column; row-gap: 30px; padding-top: 30px;}
  .story-inner .story-list {width: 100%;}
  .story-inner .company-wrap {width: 100%;}

  .story-inner .list-wrap {padding: 30px 0;}
  .story-inner .list-wrap .more {margin-right: 4%;}
  .story-inner .list-wrap .more a {padding: 30px 25px;}
  .story-inner .list-wrap .more h2 {padding-top: 50px;}
  .story-inner .list-wrap .slick-list-wrap {width: calc(96% - 101px);}
  .story-inner .list-item p {font-size: 15px;}
  .story-inner .list-item span {font-size: 15px;}

  .story-inner .slick-dots li + li {margin-left: 10px;}
  .story-inner .slick-dots li button {width: 10px; height: 10px;}

  .company-wrap {max-width: 500px;}
  .company-wrap .company-item {padding: 40px 18%; border-radius: 180px 0 180px 0;}
  .company-wrap .company-item.nth-2 {border-radius: 0 180px 0 180px;}
  .company-wrap .company-item.nth-1::after {bottom: -150px;}
  .company-wrap .company-item.nth-2::after {bottom: -6px;}

  .company-wrap .company-item p {font-size: 15px;}
  .company-wrap .company-item span {font-size: 15px;}
  .company-wrap .company-item em {font-size: 18px;}
}
@media (max-width: 480px) {
  .story-inner { row-gap: 25px; padding-top: 25px;}

  .story-inner .list-wrap {padding: 25px 0;}
  .story-inner .list-wrap .more {margin-right: 4%;}
  .story-inner .list-wrap .more a {padding: 20px;}
  .story-inner .list-wrap .more a::before {width: 26px; height: 22px;}
  .story-inner .list-wrap .more a::after {bottom: 3px; right: 4px; width: 12px; height: 12px;}
  .story-inner .list-wrap .more h2 {padding-top: 50px;}
  .story-inner .list-item h2 {font-size: 16px;}
  .story-inner .list-item p {font-size: 14px;}
  .story-inner .list-item span {font-size: 14px;}

  .company-wrap .company-item {padding: 30px 7%; border-radius: 60px 0 60px 0;}
  .company-wrap .company-item.nth-2 {border-radius: 0 60px 0 60px;}
  .company-wrap .company-item.nth-2::after {bottom: -38px;}
  .company-wrap .company-item .ico {width: 40px; height: 40px; margin-right: 4%;}
  .company-wrap .company-item p {font-size: 14px;}
  .company-wrap .company-item p + p {margin-top: 8px;}
  .company-wrap .company-item span {font-size: 14px;}
  .company-wrap .company-item em {font-size: 16px;}
}