@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500;700&display=swap");
.inner, .Works { width: 100%; max-width: 1040px; padding: 0 20px; margin: 0 auto; }
@media (max-width: 959px) { .inner, .Works { max-width: 88%; padding: 0; } }

.inner_w { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 959px) { .inner_w { max-width: 88%; padding: 0; } }

.inner_s { width: 100%; max-width: 970px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 959px) { .inner_s { max-width: 88%; padding: 0; } }

.inner_ss { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 959px) { .inner_ss { max-width: 88%; padding: 0; } }

.swiper .swiper-wrapper { transition-timing-function: linear; }
.swiper .swiper-slide img { width: 100%; }

.INSIGHT { margin: 140px auto 0 auto; background: url(../img/INSIGHT.svg) no-repeat left top/125px auto; }
@media (max-width: 959px) { .INSIGHT { width: 88%; margin: 17vw auto 0 auto; background: none; } }
.INSIGHT .Contents { max-width: 840px; padding: 35px 20px 0 20px; margin: 0 auto; }
@media (max-width: 959px) { .INSIGHT .Contents { padding: 0; max-width: auto; } }
.INSIGHT .container, .INSIGHT .container2, .INSIGHT .container3 { display: flex; width: 100%; }
.INSIGHT .container .text, .INSIGHT .container .text2, .INSIGHT .container .text3, .INSIGHT .container2 .text, .INSIGHT .container2 .text2, .INSIGHT .container2 .text3, .INSIGHT .container3 .text, .INSIGHT .container3 .text2, .INSIGHT .container3 .text3 { display: flex; text-transform: uppercase; }
.INSIGHT .container .text.is-active, .INSIGHT .container .text2.is-active, .INSIGHT .container .text3.is-active, .INSIGHT .container2 .text.is-active, .INSIGHT .container2 .text2.is-active, .INSIGHT .container2 .text3.is-active, .INSIGHT .container3 .text.is-active, .INSIGHT .container3 .text2.is-active, .INSIGHT .container3 .text3.is-active { --opacity: 1; }
.INSIGHT .container .char, .INSIGHT .container2 .char, .INSIGHT .container3 .char { display: inline-block; opacity: var(--opacity, 0); transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition-delay: calc(0.05s * var(--char-index)); font-size: 56px; font-weight: 700; line-height: 100%; }
@media (max-width: 959px) { .INSIGHT .container .char, .INSIGHT .container2 .char, .INSIGHT .container3 .char { font-size: 8.5vw; line-height: 1.8em; } }
.INSIGHT .container .visuallyHidden, .INSIGHT .container2 .visuallyHidden, .INSIGHT .container3 .visuallyHidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.INSIGHT .container { margin-bottom: 110px; }
.INSIGHT .container3 { padding-bottom: 9vw; }
.INSIGHT .container4, .INSIGHT .container5 { display: flex; width: 100%; }
.INSIGHT .container4 .text4, .INSIGHT .container4 .text5, .INSIGHT .container5 .text4, .INSIGHT .container5 .text5 { display: flex; text-transform: uppercase; }
.INSIGHT .container4 .text4.is-active, .INSIGHT .container4 .text5.is-active, .INSIGHT .container5 .text4.is-active, .INSIGHT .container5 .text5.is-active { --opacity: 1; }
.INSIGHT .container4 .char, .INSIGHT .container5 .char { display: inline-block; opacity: var(--opacity, 0); transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition-delay: calc(0.05s * var(--char-index)); font-size: 36px; font-weight: 700; line-height: 1.68em; }
@media (max-width: 959px) { .INSIGHT .container4 .char, .INSIGHT .container5 .char { font-size: 4.5vw; } }
.INSIGHT .container4 .visuallyHidden, .INSIGHT .container5 .visuallyHidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.INSIGHT ul { display: -webkit-flex; display: flex; margin-top: 75px; }
@media (max-width: 959px) { .INSIGHT ul { -webkit-box-direction: reverse; flex-direction: column-reverse; margin-top: 5vw; } }
.INSIGHT ul li:nth-child(1) { position: relative; width: 115px; padding-bottom: 120px; }
@media (max-width: 959px) { .INSIGHT ul li:nth-child(1) { width: 24%; padding-bottom: 22vw; margin: 12vw 0 0 auto; } }
.INSIGHT ul li:nth-child(1) img.point { animation: rotate 20s linear infinite; }
@keyframes rotate { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }
.INSIGHT ul li:nth-child(1) img + img { position: absolute; left: 42%; bottom: 0; width: auto; height: 158px; animation: scroll_01 3s infinite; }
@media (max-width: 959px) { .INSIGHT ul li:nth-child(1) img + img { height: 28vw; } }
@keyframes scroll_01 { 0% { transform: translateY(-10px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; } }
.INSIGHT ul li:nth-child(2) { width: auto; margin: 15px 0 0 70px; color: #585757; font-size: 20px; font-weight: 700; line-height: 1.75em; }
@media (max-width: 959px) { .INSIGHT ul li:nth-child(2) { width: 100%; margin: 1vw 0 0 0; font-size: 3.5vw; line-height: 2.1em; } }

.Works { margin: 200px auto 140px auto; }
@media (max-width: 959px) { .Works { margin: 26vw auto 140px auto; } }
.Works h2 { font-size: 46px; font-weight: 700; line-height: 100%; }
@media (max-width: 959px) { .Works h2 { font-size: 7vw; } }
.Works h2 i { display: block; margin-top: 15px; font-size: 0.35em; font-weight: 500; line-height: 100%; }
.Works p { margin: 3em 0; font-size: 20px; font-weight: 500; }
@media (max-width: 959px) { .Works p { margin: 1.2em 0; font-size: 3.5vw; } }
@media (max-width: 959px) { .Works .CategoryList { display: none; } }
.Works .CategoryList a:link, .Works .CategoryList a:visited { display: inline-block; padding: 0.6em 1.3em 0.7em 1.3em; color: #fff; font-size: 16px; font-weight: 500; line-height: 100%; border-radius: 100px; background: #404040; border: 2px solid #404040; }
.Works .CategoryList a:hover { color: #404040; background: #fff; }
.Works .CategoryList a + a { margin-left: 0.8em; }
.Works .CategoryList a.materials { background: #033884; border: 2px solid #033884; }
.Works .CategoryList a.materials:hover { color: #033884; background: #fff; }
.Works .CategoryList a.system { background: #0071b7; border: 2px solid #0071b7; }
.Works .CategoryList a.system:hover { color: #0071b7; background: #fff; }
.Works .CategoryList a.promotion { background: #ec301b; border: 2px solid #ec301b; }
.Works .CategoryList a.promotion:hover { color: #ec301b; background: #fff; }
.Works .CategoryList a.others { background: #2E9F3A; border: 2px solid #2E9F3A; }
.Works .CategoryList a.others:hover { color: #2E9F3A; background: #fff; }
.Works .CategoryList a.elearning { background: #68e74c; border: 2px solid #68e74c; }
.Works .CategoryList a.elearning:hover { color: #68e74c; background: #fff; }
@media (max-width: 959px) { .Works .CategoryContents { display: -webkit-flex; display: flex; -webkit-box-align: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 4vw; } }
.Works #CategorySelect { display: none; }
@media (max-width: 959px) { .Works #CategorySelect { display: block; width: 55%; height: 3em; padding: 0 1em; font-size: 3.5vw; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #000; background: url(../img/select2.svg) no-repeat right 1em center/1em auto; } }
.Works ul { display: -webkit-flex; display: flex; -webkit-box-align: start; align-items: flex-start; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; padding-top: 90px; margin-top: 30px; border-top: 1px solid #827f80; }
@media (max-width: 959px) { .Works ul { padding-top: 10vw; margin-top: 0; } }
.Works ul:before { content: ""; display: block; width: 23%; order: 1; }
@media (max-width: 959px) { .Works ul:before { display: none; } }
.Works ul:after { content: ""; display: block; width: 23%; }
@media (max-width: 959px) { .Works ul:after { display: none; } }
.Works ul li { position: relative; width: 23%; margin-bottom: 45px; }
@media (max-width: 959px) { .Works ul li { width: 100%; margin-bottom: 0; } }
@media (max-width: 959px) { .Works ul li + li { margin-top: 13vw; } }
.Works ul li i { position: absolute; top: 0; left: 0; z-index: 10; display: block; width: 0; height: 0; border-style: solid; border-color: #404040 transparent transparent transparent; border-width: 38px 38px 0px 0px; }
@media (max-width: 959px) { .Works ul li i { border-width: 13vw 13vw 0px 0px; } }
.Works ul li i.materials { border-color: #033884 transparent transparent transparent; }
.Works ul li i.system { border-color: #0071b7 transparent transparent transparent; }
.Works ul li i.promotion { border-color: #ec301b transparent transparent transparent; }
.Works ul li i.others { border-color: #2E9F3A transparent transparent transparent; }
.Works ul li i.elearning { border-color: #68e74c transparent transparent transparent; }
.Works ul p { margin: 2em 0 1em 0; color: #525654; font-size: 14px; font-weight: 400; line-height: 1.3em; }
@media (max-width: 959px) { .Works ul p { font-size: 3vw; margin: 2.2em 0 1.8em 0; } }
.Works ul h3 { font-size: 18px; font-weight: 500; line-height: 1.6em; -webkit-transition: all .3s; transition: all .3s; }
@media (max-width: 959px) { .Works ul h3 { font-size: 4vw; } }
.Works ul h3:hover { opacity: 0.7; }
.Works ul img { object-fit: cover; aspect-ratio: 1 / 1; }

.pagenavi { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; align-items: center; margin-top: 70px; }
@media (max-width: 959px) { .pagenavi { margin-top: 15vw; } }
.pagenavi .page-numbers { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 37px; height: 37px; margin: 0 10px 0 0; color: #282828; font-size: 16px; border-radius: 50%; }
@media (max-width: 959px) { .pagenavi .page-numbers { width: 2.5em; height: 2.5em; font-size: 3.5vw; } }
.pagenavi .current { color: #fff; background: #174097; }
.pagenavi a:hover { opacity: 0.7; }
.pagenavi .next, .pagenavi .prev { display: span; width: auto; height: auto; border: none; }
@media (max-width: 959px) { .pagenavi .next, .pagenavi .prev { display: none; } }
.pagenavi .next { margin-left: 3.5em; }
.pagenavi .prev { margin-right: 3.5em; }

.About { position: relative; height: 370px; background: #153BA5; background: linear-gradient(180deg, #153ba5 0%, #00ade7 100%); }
@media (max-width: 959px) { .About { height: auto; padding: 42vw 0 14vw 0; } }
.About .Image { position: absolute; top: 0; left: 0; display: -webkit-flex; display: flex; -webkit-box-align: center; align-items: center; width: 100%; height: 100%; mix-blend-mode: multiply; }
@media (max-width: 959px) { .About .Image { -webkit-box-align: start; align-items: flex-start; padding-top: 25vw; } }
.About .Contents { position: absolute; top: 0; left: 0; display: -webkit-flex; display: flex; -webkit-box-align: center; align-items: center; width: 100%; height: 100%; }
@media (max-width: 959px) { .About .Contents { position: static; } }
.About .Contents .inner a, .About .Contents .Works a { position: relative; z-index: 10; display: -webkit-flex; display: flex; -webkit-box-align: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; padding: 0 40px; }
@media (max-width: 959px) { .About .Contents .inner a, .About .Contents .Works a { -webkit-flex-direction: column; flex-direction: column; padding: 0 10%; } }
.About h2 { position: relative; z-index: 20; color: #fff; font-size: 34px; font-weight: 700; -webkit-transition: all .3s; transition: all .3s; border-bottom: 1px solid transparent; }
@media (max-width: 959px) { .About h2 { font-size: 7vw; } }
.About a:hover h2 { border-bottom: 1px solid #fff; }
.About span { color: #fff; }
@media (max-width: 959px) { .About span { margin: 22vw 0 0 auto; } }
.About span:before { content: ""; display: block; width: 100%; height: 65px; margin-bottom: 10px; -webkit-transition: all .3s; transition: all .3s; background: url(../img/About.svg) no-repeat top center/auto 100%; }
@media (max-width: 959px) { .About span:before { height: 14vw; } }
.About a:hover span:before { background-image: url(../img/About2.svg); }

@media (max-width: 959px) { .News { background: #eeeeef; } }
.News dl { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
@media (max-width: 959px) { .News dl { -webkit-flex-direction: column; flex-direction: column; } }
.News dl dt { width: 44%; padding-top: 125px; background: #eeeeef; }
@media (max-width: 959px) { .News dl dt { width: 100%; padding-top: 16vw; } }
.News dl dd { width: 56%; padding: 90px 16% 125px 7.8%; background: #fff; }
@media (max-width: 959px) { .News dl dd { width: 94%; margin-left: auto; padding: 13vw 8% 0 8%; } }
.News dl dt > h2 { padding-left: 35%; font-size: 34px; font-weight: 700; line-height: 100%; }
@media (max-width: 959px) { .News dl dt > h2 { padding-left: 6%; margin-bottom: 7vw; font-size: 7vw; } }
.News dl dt > h2 i { display: block; margin-top: 15px; font-size: 0.45em; font-weight: 500; line-height: 100%; }
.News ul { border-bottom: 1px solid #918b8a; }
.News li { border-top: 1px solid #918b8a; }
.News li a { display: block; padding: 38px 30px 55px 10px; }
@media (max-width: 959px) { .News li a { padding: 4vw 5vw 6vw 1.5vw; } }
.News li div { display: -webkit-flex; display: flex; }
.News li div + div { -webkit-box-align: center; align-items: center; margin-top: 15px; }
.News li p { font-size: 17px; font-weight: 400; }
@media (max-width: 959px) { .News li p { font-size: 2.8vw; } }
.News li span { display: inline-block; min-width: 6.5em; margin: 0 5.5em 0 2.5em; padding: 0.4em 0.7em 0.6em 0.7em; color: #777B7D; line-height: 100%; text-align: center; border-radius: 100px; background: #ddddde; }
@media (max-width: 959px) { .News li span { font-size: 2.8vw; margin: 0 5.5em 0 1em; padding: 0.5em 0.7em 0 0.7em; } }
.News li h2 { position: relative; font-size: 18px; font-weight: 700; }
@media (max-width: 959px) { .News li h2 { font-size: 3.8vw; } }
.News li a:hover h2 { color: #033884; }
.News li h2:before { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #033884; transition: 0.3s; }
.News li a:hover h2:before { width: 100%; }
.News li i { width: 27px; height: 27px; margin-left: auto; -webkit-transition: all .4s; transition: all .4s; background: url(../img/news.svg) no-repeat center center/100% auto; }
@media (max-width: 959px) { .News li i { width: 4vw; height: 4vw; } }
.News li a:hover i { background: url(../img/news2.svg) no-repeat center center/100% auto; }
.News ul + a { display: block; width: 265px; padding: 1em 0 1em 2.5em; margin: 115px 0 0 auto; color: #fff; font-size: 18px; background: #174097 url(../img/news3.svg) no-repeat center right 1.8em/1.5em auto; }
@media (max-width: 959px) { .News ul + a { width: 50vw; padding: 0.8em 0 1em 2.5em; margin: 12vw 0 20vw auto; font-size: 3.5vw; } }
.News ul + a:hover { background: #696a6d url(../img/news3.svg) no-repeat center right 1.8em/1.5em auto; }