@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_Entry { width: 100%; max-width: 1040px; padding: 0 20px; margin: 0 auto; }
@media (max-width: 959px) { .inner, .Works_Entry { 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; } }

.Works_Entry { margin-top: 90px; }
@media (max-width: 959px) { .Works_Entry { margin-top: 27vw; } }
.Works_Entry h1 { display: -webkit-flex; display: flex; -webkit-box-align: end; align-items: flex-end; margin-bottom: 1.15em; font-size: 38px; font-weight: 700; line-height: 100%; }
@media (max-width: 959px) { .Works_Entry h1 { -webkit-box-align: start; align-items: flex-start; -webkit-flex-direction: column; flex-direction: column; font-size: 7vw; text-align: left; margin-bottom: 0.5em; } }
.Works_Entry h1 i { display: block; margin-left: 1.3em; font-size: 0.42em; font-weight: 500; line-height: 100%; }
@media (max-width: 959px) { .Works_Entry h1 i { margin: 1em 0 0 0; } }
.Works_Entry h1 + a { display: inline-block; padding: 0.65em 2em 0.75em 2em; color: #fff; font-size: 16px; font-weight: 500; line-height: 100%; border-radius: 100px; background: #404040; border: 2px solid #404040; }
@media (max-width: 959px) { .Works_Entry h1 + a { font-size: 3vw; padding: 0.5em 1.5em 0.6em 1.5em; } }
.Works_Entry h1 + a:hover { color: #404040; background: #fff; }
.Works_Entry a.materials { background: #033884; border: 2px solid #033884; }
.Works_Entry a.materials:hover { color: #033884; background: #fff; }
.Works_Entry a.system { background: #0071b7; border: 2px solid #0071b7; }
.Works_Entry a.system:hover { color: #0071b7; background: #fff; }
.Works_Entry a.promotion { background: #ec301b; border: 2px solid #ec301b; }
.Works_Entry a.promotion:hover { color: #ec301b; background: #fff; }
.Works_Entry a.others { background: #2E9F3A; border: 2px solid #2E9F3A; }
.Works_Entry a.others:hover { color: #2E9F3A; background: #fff; }
.Works_Entry a.elearning { background: #68e74c; border: 2px solid #68e74c; }
.Works_Entry a.elearning:hover { color: #68e74c; background: #fff; }
.Works_Entry dl { display: -webkit-flex; display: flex; -webkit-box-align: start; align-items: flex-start; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 65px; }
@media (max-width: 959px) { .Works_Entry dl { -webkit-flex-direction: column; flex-direction: column; margin-top: 6vw; } }
.Works_Entry dt { width: 18.5%; padding: 35px 0 45px 0; border-top: 1px solid #1A1B1B; border-bottom: 1px solid #1A1B1B; }
@media (max-width: 959px) { .Works_Entry dt { width: 100%; padding: 7vw 0 10vw 0; } }
.Works_Entry dd { width: 75%; }
@media (max-width: 959px) { .Works_Entry dd { width: 100%; padding-top: 18vw; } }
.Works_Entry dt p { color: #040000; font-size: 16.5px; font-weight: 500; line-height: 100%; }
@media (max-width: 959px) { .Works_Entry dt p { font-size: 3vw; } }
.Works_Entry dt p + p { margin-top: 1.3em; }
.Works_Entry h2 { margin-bottom: 1.4em; font-size: 20px; font-weight: 500; line-height: 100%; }
@media (max-width: 959px) { .Works_Entry h2 { font-size: 5vw; margin-bottom: 1.2em; } }
.Works_Entry h3 { margin-bottom: 3.5em; font-size: 17px; font-weight: 500; line-height: 100%; }
@media (max-width: 959px) { .Works_Entry h3 { font-size: 4vw; line-height: 2em; margin-bottom: 2.5em; } }
.Works_Entry h3 + p { margin-bottom: 4em; font-size: 17px; font-weight: 400; line-height: 1.8em; }
@media (max-width: 959px) { .Works_Entry h3 + p { font-size: 3.3vw; line-height: 2.2em; } }
.Works_Entry h3 + p + p { margin-top: 1.3em; }
.Works_Entry .Sample { margin-bottom: 100px; }
@media (max-width: 959px) { .Works_Entry .Sample { margin-bottom: 15vw; } }
.Works_Entry .Sample a:link, .Works_Entry .Sample a:visited { display: inline-block; margin-top: 1.5em; padding: 0.65em 2em 0.75em 2em; color: #fff; font-size: 16px; font-weight: 500; line-height: 100%; }
@media (max-width: 959px) { .Works_Entry .Sample a:link, .Works_Entry .Sample a:visited { font-size: 3vw; padding: 0.5em 1.5em 0.6em 1.5em; } }
.Works_Entry .Sample a.materials { background: #033884; border: 2px solid #033884; }
.Works_Entry .Sample a.materials:hover { color: #033884; background: #fff; }
.Works_Entry .Sample a.system { background: #0071b7; border: 2px solid #0071b7; }
.Works_Entry .Sample a.system:hover { color: #0071b7; background: #fff; }
.Works_Entry .Sample a.promotion { background: #ec301b; border: 2px solid #ec301b; }
.Works_Entry .Sample a.promotion:hover { color: #ec301b; background: #fff; }
.Works_Entry .Sample a.others { background: #2E9F3A; border: 2px solid #2E9F3A; }
.Works_Entry .Sample a.others:hover { color: #2E9F3A; background: #fff; }
.Works_Entry .Sample a.elearning { background: #68e74c; border: 2px solid #68e74c; }
.Works_Entry .Sample a.elearning:hover { color: #68e74c; background: #fff; }
.Works_Entry img { display: block; width: 100%; height: auto; }
.Works_Entry img + img { margin-top: 100px; }
@media (max-width: 959px) { .Works_Entry img + img { margin-top: 15vw; } }

.List { margin: 290px auto 90px auto; }
@media (max-width: 959px) { .List { margin: 50vw auto 23vw auto; } }
.List > h2 { font-size: 34px; font-weight: 700; line-height: 100%; text-align: center; }
@media (max-width: 959px) { .List > h2 { font-size: 6vw; } }
.List ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; align-items: flex-start; margin-top: 80px; }
@media (max-width: 959px) { .List ul { -webkit-flex-direction: column; flex-direction: column; margin-top: 12vw; } }
.List ul:after { content: ""; display: block; width: 31%; }
@media (max-width: 959px) { .List ul:after { width: 100%; } }
.List ul li { position: relative; width: 31%; }
@media (max-width: 959px) { .List ul li { width: 100%; } }
.List 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: 55px 55px 0px 0px; }
@media (max-width: 959px) { .List ul li i { border-width: 15vw 15vw 0px 0px; } }
.List ul li i.materials { border-color: #033884 transparent transparent transparent; }
.List ul li i.system { border-color: #0071b7 transparent transparent transparent; }
.List ul li i.promotion { border-color: #ec301b transparent transparent transparent; }
.List ul li i.others { border-color: #2E9F3A transparent transparent transparent; }
.List ul li i.elearning { border-color: #68e74c transparent transparent transparent; }
.List ul p { margin: 2em 0 1em 0; color: #525654; font-size: 16px; font-weight: 400; line-height: 1.3em; }
@media (max-width: 959px) { .List ul p { font-size: 3vw; margin: 2.2em 0 1.8em 0; } }
.List ul h3 { font-size: 20px; font-weight: 500; line-height: 1.6em; }
@media (max-width: 959px) { .List ul h3 { font-size: 4vw; } }
.List ul img { object-fit: cover; aspect-ratio: 1 / 1; }

.Back { padding: 83px 0; margin: 0; border-top: 1px solid #c8c5c5; }
@media (max-width: 959px) { .Back { padding: 12vw 0; } }
.Back a:link, .Back a:visited { display: -webkit-flex; display: flex; -webkit-box-align: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.Back a:link:before, .Back a:visited:before { content: ""; display: block; width: 47px; height: 47px; margin-right: 30px; background: url(../img/Back01.svg) no-repeat top left/100% auto; }
@media (max-width: 959px) { .Back a:link:before, .Back a:visited:before { width: 10vw; height: 10vw; margin-right: 6vw; } }
.Back a:link:hover:before, .Back a:visited:hover:before { background: url(../img/Back02.svg) no-repeat top left/100% auto; }
.Back a:link span, .Back a:visited span { position: relative; font-size: 44px; font-weight: 700; }
@media (max-width: 959px) { .Back a:link span, .Back a:visited span { font-size: 7.5vw; } }
.Back a:link span:before, .Back a:visited span:before { content: ""; position: absolute; left: 0; bottom: -18px; width: 0; height: 1px; background: #033884; transition: 0.3s; }
.Back a:link:hover span, .Back a:visited:hover span { color: #174097; }
.Back a:link:hover span:before, .Back a:visited:hover span:before { width: 100%; }