@charset "UTF-8";
/* 
  css設定 @charsetが消されるsass仕様へのハック用コメントです。削除しないでください。新規作成時も必須！
 */
/*==================================================================================
 default
==================================================================================*/
/* -------------------------------------------
 * initialize
 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1;
  font-size: 0;
  vertical-align: baseline;
  background: transparent;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEI1MzY2NTA1RTY2MTFFNUExRTlDMDdERTNCNDFENkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEI1MzY2NTE1RTY2MTFFNUExRTlDMDdERTNCNDFENkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQjUzNjY0RTVFNjYxMUU1QTFFOUMwN0RFM0I0MUQ2QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQjUzNjY0RjVFNjYxMUU1QTFFOUMwN0RFM0I0MUQ2QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj3ggHcAAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC");
}

body * {
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section, main {
  display: block;
}

sup {
  font-size: 10rem;
  vertical-align: super;
}

sub {
  font-size: 10rem;
  vertical-align: sub;
}

div,
figure {
  line-height: 0;
}

ul li, ol li {
  list-style: none;
}

input, select {
  vertical-align: middle;
}

.hide {
  display: none;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

img {
  ms-interpolation-mode: bicubic;
}

a {
  text-decoration: none;
}
@media (min-width: 1025px) {
  a:hover {
    opacity: .7;
  }
}

.clearfix {
  zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

iframe {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

video {
  width: 100%;
  height: auto;
}

.serif {
  font-family: YuMincho, Yu Mincho, "游明朝", serif;
}

.sansSerif {
  font-family: "Noto Sans JP", sans-serif;
}

.bold {
  font-weight: bold !important;
  font-size: 100%;
}

.weightNormal {
  font-weight: normal !important;
  font-size: 100%;
}

.colorBlack {
  color: #333 !important;
  font-size: 100%;
}

.colorWhite {
  color: #fff !important;
  font-size: 100%;
}

.colorRed {
  color: #ff0000 !important;
  font-size: 100%;
}

.colorBlue01 {
  color: #004898 !important;
}

.wrap {
  margin: auto;
  width: 1214rem;
}

.inlineBlock {
  display: inline-block;
  font-size: 100%;
}

.noBreaks {
  word-break: keep-all;
}

.alignCenter {
  text-align: center;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

@media (min-width: 768px) {
  a.tel {
    pointer-events: none;
  }
}

main img,
header img,
footer img {
  max-width: 100%;
  height: auto;
}

.fontSize50 {
  font-size: 50%;
}

.fontSize55 {
  font-size: 55%;
}

.fontSize60 {
  font-size: 60%;
}

.fontSize65 {
  font-size: 65%;
}

.fontSize70 {
  font-size: 70%;
}

.fontSize75 {
  font-size: 75%;
}

.fontSize80 {
  font-size: 80%;
}

.fontSize85 {
  font-size: 85%;
}

.fontSize90 {
  font-size: 90%;
}

.fontSize95 {
  font-size: 95%;
}

.fontSize100 {
  font-size: 100%;
}

.fontSize105 {
  font-size: 105%;
}

.fontSize110 {
  font-size: 110%;
}

.fontSize115 {
  font-size: 115%;
}

.fontSize120 {
  font-size: 120%;
}

.fontSize125 {
  font-size: 125%;
}

.fontSize130 {
  font-size: 130%;
}

.fontSize135 {
  font-size: 135%;
}

.fontSize140 {
  font-size: 140%;
}

.fontSize145 {
  font-size: 145%;
}

.fontSize150 {
  font-size: 150%;
}

.fontSize155 {
  font-size: 155%;
}

.fontSize160 {
  font-size: 160%;
}

.fontSize165 {
  font-size: 165%;
}

.fontSize170 {
  font-size: 170%;
}

.fontSize175 {
  font-size: 175%;
}

.fontSize180 {
  font-size: 180%;
}

.fontSize185 {
  font-size: 185%;
}

.fontSize190 {
  font-size: 190%;
}

.fontSize195 {
  font-size: 195%;
}

.fontSize200 {
  font-size: 200%;
}

.fontSize205 {
  font-size: 205%;
}

.fontSize210 {
  font-size: 210%;
}

.fontSize215 {
  font-size: 215%;
}

.fontSize220 {
  font-size: 220%;
}

.fontSize225 {
  font-size: 225%;
}

.fontSize230 {
  font-size: 230%;
}

.fontSize235 {
  font-size: 235%;
}

.fontSize240 {
  font-size: 240%;
}

.fontSize245 {
  font-size: 245%;
}

.fontSize250 {
  font-size: 250%;
}

.fontSize255 {
  font-size: 255%;
}

.fontSize260 {
  font-size: 260%;
}

.fontSize265 {
  font-size: 265%;
}

.fontSize270 {
  font-size: 270%;
}

.fontSize275 {
  font-size: 275%;
}

.fontSize280 {
  font-size: 280%;
}

.fontSize285 {
  font-size: 285%;
}

.fontSize290 {
  font-size: 290%;
}

.fontSize295 {
  font-size: 295%;
}

.fontSize300 {
  font-size: 300%;
}

@media (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media (max-width: 767px) {
  sup,
  sub {
    font-size: 8rem;
  }

  .pc {
    display: none !important;
  }

  .wrap {
    width: 325rem;
  }
}
/*==================================================================================
 common
==================================================================================*/
.siteHeader .globalNavi .column,
.siteFooter .footerNavi .column,
#top section.pickUp,
#top section.column {
  display: none !important;
}

html {
  font-size: .07142857vw;
  font-feature-settings: "palt";
  font-weight: 600;
  color: #111;
}

body img.imageWhite {
  filter: brightness(0) invert(1);
}

main {
  overflow: hidden;
}
main li,
main .image,
main figure {
  position: relative;
}
main .caption {
  display: inline-block;
  line-height: 1;
  font-size: 12rem;
  color: #fff;
}
main img + .caption {
  position: absolute;
  bottom: 1.2%;
  right: .8%;
}
main img + .caption.outside {
  display: block;
  position: static;
}

.commonColumnList01 {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  border-top: 1px solid transparent;
}
.commonColumnList01:before {
  content: '';
  display: block;
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: #999;
}
.commonColumnList01 > li {
  box-sizing: border-box;
  flex: 0 0 25%;
  border-bottom: 1px solid transparent;
}
.commonColumnList01 > li:before {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: #999;
}
.commonColumnList01 > li:not(:nth-child(4n)) {
  border-right: 1px solid transparent;
}
.commonColumnList01 > li:not(:nth-child(4n)):after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -1px;
  bottom: -1px;
  width: 1px;
  background: #999;
}
@media (min-width: 1025px) {
  .commonColumnList01 > li:nth-child(n+9) {
    display: none;
  }
}
.commonColumnList01 a {
  display: block;
  padding: 44rem 55rem 50rem;
}
.commonColumnList01 a:hover {
  opacity: 1;
}
@media (min-width: 1025px) {
  .commonColumnList01 a:hover .image img {
    transform: scale(1.1);
  }
  .commonColumnList01 a:hover .text,
  .commonColumnList01 a:hover .tags li {
    color: #004898;
  }
}
.commonColumnList01 .image {
  margin-bottom: 27rem;
  height: 240rem;
  overflow: hidden;
}
.commonColumnList01 .image img {
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.commonColumnList01 time {
  display: flex;
  align-items: center;
  gap: 0 7rem;
  padding-bottom: 12rem;
  font-size: 14rem;
  color: #004898;
}
.commonColumnList01 time:before {
  content: '';
  display: inline-block;
  position: relative;
  width: 9rem;
  height: 12rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/icon-water01.svg") no-repeat center center;
  background-size: 100% 100%;
}
.commonColumnList01 .text {
  padding-bottom: 20rem;
  line-height: 1.7;
  font-size: 16rem;
  color: #111;
  transition: color .5s;
}
.commonColumnList01 .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem 14rem;
}
.commonColumnList01 .tags li {
  font-size: 10rem;
  color: #ccc;
  transition: color .5s;
}
.commonColumnList01 .tags li .hash {
  position: relative;
  top: 1rem;
  font-size: 13rem;
}

.commonButton01 a {
  display: inline-flex;
  align-items: center;
  gap: 0 9rem;
  color: #111;
}
.commonButton01 a .buttonText {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12rem;
  box-sizing: border-box;
  border: 2px solid #004898;
  border-radius: 15rem;
  font-size: 16rem;
  height: 30rem;
}
.commonButton01 a .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 30rem;
  height: 30rem;
  background: #004898;
}
.commonButton01 a .arrow img {
  width: 14rem;
  filter: brightness(0) invert(1);
}

.commonMoreButton01 a {
  display: inline-flex;
  align-items: center;
  gap: 0 8rem;
  font-size: 18rem;
  color: #fff;
}
.commonMoreButton01 a span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 34rem;
  height: 34rem;
  background: #fff;
}
.commonMoreButton01 a span img {
  width: 13rem;
}
.commonMoreButton01.center {
  text-align: center;
}
.commonMoreButton01.center a {
  justify-content: center;
}
.commonMoreButton01.right {
  text-align: right;
}
.commonMoreButton01.right a {
  justify-content: flex-end;
}
.commonMoreButton01.color02 a {
  color: #004898;
}
.commonMoreButton01.color02 a span {
  background: #004898;
}
.commonMoreButton01.color02 a span img {
  filter: brightness(0) invert(1);
}
.commonMoreButton01.color03 a {
  color: #111;
}
.commonMoreButton01.color03 a span {
  background: #111;
}
.commonMoreButton01.color03 a span img {
  filter: brightness(0) invert(1);
}
.commonMoreButton01.color04 a {
  color: #111;
}
.commonMoreButton01.color04 a span {
  background: #999;
}
.commonMoreButton01.color04 a span img {
  filter: brightness(0) invert(1);
}
.commonMoreButton01.color05 a {
  color: #004898;
}
.commonMoreButton01.color05 a span {
  background: #004898;
}
.commonMoreButton01.color05 a span img {
  filter: brightness(0) invert(1);
}
.commonMoreButton01.small a {
  font-size: 13rem;
}
.commonMoreButton01.small a span {
  width: 24rem;
  height: 24rem;
}
.commonMoreButton01.small a span img {
  width: 11rem;
}
@media (min-width: 768px) {
  .commonMoreButton01.expand01 a {
    gap: 0 14rem;
    font-size: 34rem;
  }
  .commonMoreButton01.expand01 a span {
    width: 56rem;
    height: 56rem;
  }
  .commonMoreButton01.expand01 a span img {
    width: 22rem;
  }
}

.commonGradationUnderline01 {
  padding-bottom: 3rem;
  line-height: 100%;
  font-size: 100%;
  background: linear-gradient(90deg, #00b9ee, #897bb7 63%, #e96b83) no-repeat left bottom;
  background-size: 100% 2rem;
}
.commonGradationUnderline01.color02 {
  background-image: linear-gradient(90deg, #6fcedf, #76aaee 63%, #6ec3ff);
}

.commonGradationFrameText01 {
  position: relative;
  padding: 15rem 10rem;
  border: 2rem solid transparent;
  border-image: linear-gradient(90deg, #00b9ee, #897bb7 63%, #e96b83) 1;
  letter-spacing: .15em;
  text-align: center;
  line-height: 38rem;
  font-size: 23rem;
  background: #fff;
}
.commonGradationFrameText01:before, .commonGradationFrameText01:after {
  content: '';
  display: block;
  position: absolute;
  width: 16rem;
  height: 2rem;
  background: #fff;
}
.commonGradationFrameText01:before {
  top: -2rem;
  right: 0;
}
.commonGradationFrameText01:after {
  bottom: -2rem;
  left: 0;
}

.commonTitle01 {
  position: relative;
  padding-bottom: 30rem;
  letter-spacing: .15em;
  line-height: 52rem;
  font-size: 38rem;
}
.commonTitle01:after {
  content: '';
  display: block;
  position: absolute;
  top: -25rem;
  left: -100rem;
  width: 88rem;
  height: 72rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/icon-circle01.svg") no-repeat;
  background-size: 100% 100%;
}

.commonTitle02 {
  position: relative;
  margin-bottom: 30rem;
  padding-bottom: 8rem;
  border-bottom: 1px solid #004898;
  letter-spacing: .15em;
  line-height: 1.3;
  font-size: 38rem;
}
.commonTitle02:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: -70rem;
  width: 41rem;
  height: 74rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/number01.png") no-repeat;
  background-size: 100% 100%;
}

.section02 .commonTitle02:after {
  background-image: url("/recruit/graduate/ppp-specialsite/static/img/common/number02.png");
}

.section03 .commonTitle02:after {
  background-image: url("/recruit/graduate/ppp-specialsite/static/img/common/number03.png");
}

.commonTitle03 {
  display: flex;
  justify-content: center;
  gap: 0 17rem;
  margin-bottom: 50rem;
  letter-spacing: .1em;
  text-align: center;
  line-height: 1.3;
  font-size: 30rem;
  color: #004898;
}
.commonTitle03:before, .commonTitle03:after {
  content: '';
  flex: 0 0 6rem;
  display: block;
  position: relative;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/accent01.png") no-repeat;
  background-size: 100% 100%;
}
.commonTitle03:after {
  background-image: url("/recruit/graduate/ppp-specialsite/static/img/common/accent02.png");
}

.commonTitle04 {
  display: flex;
  gap: 0 10rem;
  margin-bottom: 30rem;
  padding-bottom: 20rem;
  border-bottom: 2rem solid #6c9bd2;
  letter-spacing: .1em;
  line-height: 1.4;
  font-size: 32rem;
}
.commonTitle04:before {
  content: '';
  flex: 0 0 16rem;
  display: block;
  margin: 10rem 0 6rem;
  position: relative;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/icon-arrow03.png") no-repeat;
  background-size: 100% 100%;
}

section.lastly {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-top: 80rem;
  padding: 40rem 40rem 40rem 85rem;
  background: #e8eff1;
}
section.lastly h4 {
  flex: 0 0 288rem;
}
section.lastly .lead {
  letter-spacing: .1em;
  line-height: 48rem;
  font-size: 16rem;
}
section.lastly .lead .categorys {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 7rem;
  padding: 10rem 15rem;
  border-radius: 20rem;
  border: 1rem solid transparent;
  line-height: 1;
  font-size: 16rem;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #00b9ee, #897bb7 63%, #e96b83);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.commonSpScrollImage01 figcaption {
  display: block;
  padding-bottom: 10rem;
  line-height: 1;
  font-size: 15rem;
}
.commonSpScrollImage01 figcaption:first-letter {
  color: #004898;
}

.commonNextLink {
  padding-top: 40rem;
}

@media (max-width: 1024px) {
  .printBtn {
    display: none !important;
  }
}
/*==================================================================================
 animations
==================================================================================*/
@keyframes scrollIconAnimation {
  100% {
    transform: translateY(12rem);
  }
}
@keyframes tagLoop {
  100% {
    transform: translateX(-50%);
  }
}
.fadeInAct {
  opacity: 0;
  transition: opacity 1.2s, transform 1.2s;
}
.fadeInAct.action {
  opacity: 1;
  transform: translate(0) !important;
}
.fadeInAct.fadeUp {
  transform: translateY(50rem);
}
.fadeInAct.fadeLeft {
  transform: translateX(100rem);
}
.fadeInAct.fadeDown {
  transform: translateY(-50rem);
}
.fadeInAct.fadeRight {
  transform: translateX(-100rem);
}
.fadeInAct.fadeExpand {
  transform: translateY(100rem) scale(0.7);
}
.fadeInAct.fadeExpand.action {
  transform: translateY(0) scale(1) !important;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}
@keyframes blurFadeIn {
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes verticalFade {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes horizontalFade {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes verticalMove {
  100% {
    transform: translateY(0);
  }
}
@keyframes horizontalMove {
  100% {
    transform: translateX(0);
  }
}
@keyframes width100 {
  100% {
    width: 100vw;
  }
}
@keyframes margin0 {
  100% {
    margin: 0;
  }
}
@keyframes top0 {
  100% {
    top: 0;
  }
}
@keyframes bottom0 {
  100% {
    bottom: 0;
  }
}
@keyframes left0 {
  100% {
    left: 0;
  }
}
@keyframes left100 {
  100% {
    left: 100vw;
  }
}
@keyframes right0 {
  100% {
    right: 0;
  }
}
@keyframes right100 {
  100% {
    right: 100vw;
  }
}
@keyframes scaleUp {
  100% {
    transform: scale(1.15);
  }
}
@keyframes clipPathMove {
  100% {
    clip-path: xywh(0 0 100% 100%);
  }
}
.commonBgAnimation01 {
  position: relative;
  left: -100vw;
}
.commonBgAnimation01:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00458e;
  z-index: 2;
}
.commonBgAnimation01.action {
  animation: left0 .75s ease 0s forwards;
}
.commonBgAnimation01.action:before {
  animation: left100 .75s ease .75s forwards;
}
.commonBgAnimation01.reverse {
  right: -100vw;
  left: auto;
}
.commonBgAnimation01.reverse:before {
  right: 0;
  left: auto;
}
.commonBgAnimation01.reverse.action {
  animation: right0 .75s ease 0s forwards;
}
.commonBgAnimation01.reverse.action:before {
  animation: right100 .75s ease .75s forwards;
}
.commonBgAnimation01 h3,
.commonBgAnimation01 .catch,
.commonBgAnimation01 .catch01,
.commonBgAnimation01 .catch02,
.commonBgAnimation01 .commonMoreButton01,
.commonBgAnimation01 header > .tags > li {
  opacity: 0;
  transform: translateY(50rem);
}
.commonBgAnimation01 .commonColumnList01 {
  opacity: 0;
}
.commonBgAnimation01 .commonColumnList01:before {
  right: 100%;
}
.commonBgAnimation01 .commonColumnList01 li:before {
  left: 100%;
}
.commonBgAnimation01 .commonColumnList01 li:not(:nth-child(4n)):after {
  top: 100%;
}
.commonBgAnimation01 .images li,
.commonBgAnimation01 .animationImage {
  clip-path: xywh(0 101% 100% 100%);
}
.commonBgAnimation01.action h3,
.commonBgAnimation01.action .catch,
.commonBgAnimation01.action .catch01,
.commonBgAnimation01.action .catch02,
.commonBgAnimation01.action .commonMoreButton01,
.commonBgAnimation01.action header > .tags > li {
  animation: verticalFade 1.2s ease 1s forwards;
}
.commonBgAnimation01.action .commonColumnList01 {
  animation: fadeIn 1.2s ease 1s forwards;
}
.commonBgAnimation01.action .commonColumnList01:before {
  animation: right0 1.5s ease 1.25s forwards;
}
.commonBgAnimation01.action .commonColumnList01 li:before {
  animation: left0 1s ease 1.25s forwards;
}
.commonBgAnimation01.action .commonColumnList01 li:not(:nth-child(4n)):after {
  animation: top0 1s ease 1.25s forwards;
}
.commonBgAnimation01.action .images li:nth-child(1) {
  animation: clipPathMove .75s ease 1s forwards;
}
.commonBgAnimation01.action .images li:nth-child(2) {
  animation: clipPathMove .75s ease 1.3s forwards;
}
.commonBgAnimation01.action .images li:nth-child(3) {
  animation: clipPathMove .75s ease 1.1s forwards;
}
.commonBgAnimation01.action .images li:nth-child(4) {
  animation: clipPathMove .75s ease 1.2s forwards;
}
.commonBgAnimation01.action .images li:nth-child(5) {
  animation: clipPathMove .75s ease 1.5s forwards;
}
.commonBgAnimation01.action .images li:nth-child(6) {
  animation: clipPathMove .75s ease 1.4s forwards;
}
.commonBgAnimation01.action .images li:nth-child(7) {
  animation: clipPathMove .75s ease 1.6s forwards;
}
.commonBgAnimation01.action .animationImage {
  animation: clipPathMove .75s ease 1.25s forwards;
}

/*==================================================================================
 siteHeader
==================================================================================*/
.siteHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: 15rem 40rem;
  border-bottom: 1px solid #999;
  background: #fff;
  z-index: 100;
}
.siteHeader .headerLogo {
  flex: 0 0 200rem;
  line-height: 0;
}
.siteHeader .headerLogo a:hover {
  opacity: 1;
}
.siteHeader .menuButton {
  position: relative;
  flex: 0 0 96rem;
  z-index: 2;
}
.siteHeader .menuButton img {
  transition: opacity .5s;
}
.siteHeader .menuButton .close {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.siteHeader .menuButton.open .open {
  opacity: 0;
}
.siteHeader .menuButton.open .close {
  opacity: 1;
}
.siteHeader .globalNavi {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: translateY(-100%);
  transition: transform .5s;
}
.siteHeader .globalNavi.open {
  transform: translateY(0);
}
.siteHeader .globalNavi .image {
  flex: 0 0 680rem;
}
.siteHeader .globalNavi .image img {
  object-fit: cover;
  height: 100%;
}
.siteHeader .globalNavi .linksArea {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 70rem 0;
  padding: 100rem 70rem 50rem;
  background: #004898;
}
.siteHeader .globalNavi .linksArea a {
  display: inline-block;
  color: #fff;
}
.siteHeader .globalNavi .linksArea .links {
  display: flex;
  flex-direction: column;
  gap: 30rem 0;
}
.siteHeader .globalNavi .linksArea .links a {
  font-size: 22rem;
}
.siteHeader .globalNavi .linksArea .links a img {
  padding-right: 11rem;
  width: 18rem;
}
.siteHeader .globalNavi .linksArea .externalLinks {
  display: flex;
  flex-direction: column;
  gap: 25rem 0;
}
.siteHeader .globalNavi .linksArea .externalLinks a {
  font-size: 13rem;
}
.siteHeader .globalNavi .linksArea .externalLinks a:after {
  content: '';
  display: inline-block;
  position: relative;
  top: 1rem;
  padding-left: 10rem;
  width: 13rem;
  height: 13rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/icon-external01.svg") no-repeat center center;
  background-size: 100% 100%;
  filter: brightness(0) invert(1);
}

/*==================================================================================
 siteFooter
==================================================================================*/
.siteFooter {
  padding: 150rem 30rem 40rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/footer-bg.jpg") no-repeat center bottom;
  background-size: 100% auto;
}
.siteFooter .logo {
  margin: auto;
  width: 250rem;
  padding-bottom: 45rem;
}
.siteFooter .links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 12rem;
  margin: auto;
  padding-bottom: 50rem;
}
.siteFooter .links li:not(:last-child):after {
  content: '';
  display: inline-block;
  position: relative;
  top: 1rem;
  margin-left: 12rem;
  height: 13rem;
  width: 1px;
  background: #111;
}
.siteFooter .links li a {
  font-size: 14rem;
  color: #111;
}
.siteFooter .links li a img {
  padding-right: 5rem;
  width: 12rem;
}
.siteFooter .links li.top a {
  color: #0f5098;
}
.siteFooter .externalLinks {
  display: flex;
  justify-content: center;
  gap: 0 30rem;
  padding-bottom: 30rem;
}
.siteFooter .externalLinks a {
  font-size: 13rem;
  color: #0f5098;
}
.siteFooter .externalLinks a:after {
  content: '';
  display: inline-block;
  position: relative;
  top: 1rem;
  padding-left: 10rem;
  width: 13rem;
  height: 13rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/icon-external01.svg") no-repeat center center;
  background-size: 100% 100%;
}
.siteFooter .copyright {
  display: block;
  text-align: center;
  font-size: 10rem;
  color: #666;
  font-weight: 400;
}

/*==================================================================================
 print
==================================================================================*/
@media print {
  .siteHeader,
  .siteFooter {
    display: none !important;
  }
}
/*==================================================================================
 top
==================================================================================*/
#top .siteHeader {
  border-bottom-color: transparent;
  background: none;
  transition: border .3s, background .3s;
}
#top .siteHeader.bgOn {
  border-bottom-color: #999;
  background: #fff;
}
#top .mainVisual {
  position: relative;
  height: 796rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/top/mv.jpg") no-repeat center center;
  background-size: cover;
  z-index: 3;
}
#top .mainVisual h2 {
  position: absolute;
  top: 155rem;
  left: 100rem;
  font-weight: 500;
  overflow: hidden;
}
#top .mainVisual h2 > span {
  display: block;
  position: relative;
  width: fit-content;
  left: -100%;
}
#top .mainVisual h2 > span:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #00458e;
  z-index: 2;
}
#top .mainVisual h2 > span + span {
  margin-top: 18rem;
}
#top .mainVisual h2 .text01 {
  padding: 3rem 15rem 6rem;
  letter-spacing: .2em;
  font-size: 42rem;
  color: #fff;
  background: #254f93;
  animation: left0 .75s ease 0s forwards;
}
#top .mainVisual h2 .text01:before {
  animation: left100 .75s ease .75s forwards;
}
#top .mainVisual h2 .text02 {
  padding: 10rem 26rem 15rem;
  letter-spacing: .1em;
  font-size: 79rem;
  color: #254f93;
  background: #fff;
  animation: left0 .75s ease .2s forwards;
}
#top .mainVisual h2 .text02:before {
  animation: left100 .75s ease .95s forwards;
}
#top .mainVisual h2 .text03 {
  padding: 10rem 26rem 15rem;
  letter-spacing: .1em;
  font-size: 90rem;
  color: #254f93;
  background: #fff;
  animation: left0 .75s ease .4s forwards;
}
#top .mainVisual h2 .text03:before {
  animation: left100 .75s ease 1.15s forwards;
}
#top .mainVisual h2 .text03 span {
  letter-spacing: 0;
}
#top .mainVisual .lead {
  position: absolute;
  top: 495rem;
  left: 100rem;
  letter-spacing: .15em;
  line-height: 1.9;
  font-size: 19rem;
  text-shadow: 0 0 15rem #1a365d, 0 0 15rem #1a365d;
  color: #fff;
  overflow: hidden;
}
#top .mainVisual .lead span {
  display: inline-block;
  position: relative;
  left: -100%;
  animation: left0 .75s ease .6s forwards;
  padding: 15rem 15rem;
  line-height: 1.9;
}
#top .mainVisual .lead span:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #00458e;
  z-index: 2;
  animation: left100 .75s ease 1.35s forwards;
}
#top .mainVisual .scrollIcon {
  position: absolute;
  top: 416rem;
  left: 41rem;
  width: 14.5rem;
}
#top .mainVisual .scrollIcon img {
  animation: scrollIconAnimation ease 1s 0s infinite;
}
#top section.pickUp h3 {
  margin: -46rem auto 0;
  padding-bottom: 15rem;
  width: 690rem;
}
#top section.feature01 {
  position: relative;
  margin-top: -1px;
  padding-left: 75rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/top/feature01-bg.jpg") no-repeat center center;
  background-size: 100% 100%;
  z-index: 3;
}
#top section.feature01 .wrapper {
  display: flex;
  align-items: center;
  margin-left: -75rem;
  padding-left: 75rem;
  overflow: hidden;
}
#top section.feature01 .textArea {
  flex: 1 1 auto;
  color: #fff;
}
#top section.feature01 .textArea h3 {
  padding-bottom: 60rem;
  width: 298rem;
}
#top section.feature01 .textArea .catch {
  padding-bottom: 60rem;
  letter-spacing: .18em;
  line-height: 1.6;
  font-size: 39rem;
}
#top section.feature01 .textArea .catch span {
  letter-spacing: .05em;
}
#top section.feature01 .image {
  flex: 0 0 704rem;
}
#top section.feature01 .water {
  position: absolute;
  right: 40rem;
  bottom: -220rem;
  width: 280rem;
  opacity: 0;
  filter: blur(10rem);
}
#top section.feature01 .commonBgAnimation01.action + .water {
  animation: blurFadeIn 1s ease-out .75s forwards;
}
#top section.feature02 {
  display: flex;
  flex-direction: row-reverse;
  gap: 0 55rem;
  padding: 105rem 0 95rem 96rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/top/feature02-bg.jpg") no-repeat center center;
  background-size: 100% 100%;
}
#top section.feature02 .textArea {
  flex: 1 1 auto;
  padding-top: 125rem;
}
#top section.feature02 .textArea h3 {
  padding-bottom: 40rem;
  width: 298rem;
}
#top section.feature02 .textArea .catch01 {
  padding-bottom: 40rem;
  letter-spacing: .18em;
  font-size: 30rem;
}
#top section.feature02 .textArea .catch02 {
  position: relative;
  margin-left: -100rem;
  padding-bottom: 40rem;
  z-index: 2;
}
#top section.feature02 .textArea .catch02 > span {
  display: block;
  width: fit-content;
  letter-spacing: .1em;
  color: #fff;
  background: #0f5098;
}
#top section.feature02 .textArea .catch02 > span + span {
  margin-top: 10rem;
}
#top section.feature02 .textArea .catch02 .text01 {
  padding: 3rem 15rem 6rem;
  font-size: 54rem;
}
#top section.feature02 .textArea .catch02 .text02 {
  padding: 8rem 20rem 15rem;
  font-size: 68rem;
}
#top section.feature02 .textArea .catch02 .text03 {
  padding: 8rem 20rem 15rem;
  font-size: 80rem;
}
#top section.feature02 .image {
  flex: 0 0 733rem;
}
#top section.case {
  padding: 70rem 0 80rem;
  text-align: center;
  color: #fff;
  background: url("/recruit/graduate/ppp-specialsite/static/img/top/case-bg.jpg") no-repeat center center;
  background-size: cover;
}
#top section.case h3 {
  padding-bottom: 30rem;
  font-size: 82rem;
}
#top section.case .catch {
  padding-bottom: 20rem;
  letter-spacing: .18em;
  line-height: 1.7;
  font-size: 28rem;
}
#top section.case .catch span {
  display: inline-block;
  padding-top: 10rem;
  letter-spacing: .1em;
  line-height: 1.2;
}
#top section.future {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 110rem 70rem 84rem 70rem;
  background: #e8eff1;
}
#top section.future .textArea {
  flex: 1 1 auto;
  text-align: center;
}
#top section.future .textArea h3 {
  padding-bottom: 25rem;
  letter-spacing: .2em;
  font-size: 16rem;
}
#top section.future .textArea h3 img {
  display: block;
  margin: auto;
  padding-bottom: 25rem;
  width: 246rem;
}
#top section.future .textArea .catch {
  padding-bottom: 50rem;
  letter-spacing: .1em;
  line-height: 1.5;
  font-size: 36rem;
  color: #004898;
}
#top section.future .images {
  flex: 0 0 850rem;
  position: relative;
  height: 560rem;
}
#top section.future .images li {
  position: absolute;
}
#top section.future .images li:nth-child(1) {
  top: 46rem;
  left: 0;
  width: 100%;
}
#top section.future .images li:nth-child(2) {
  top: 0;
  left: 182rem;
  width: 437rem;
}
#top section.future .images li:nth-child(3) {
  top: 24rem;
  left: 650rem;
  width: 137rem;
}
#top section.future .images li:nth-child(4) {
  top: 202rem;
  left: 0;
  width: 412rem;
}
#top section.future .images li:nth-child(5) {
  top: 323rem;
  left: 563rem;
  width: 262rem;
}
#top section.future .images li:nth-child(6) {
  top: 423rem;
  left: 504rem;
  width: 165rem;
}
#top section.column {
  padding-top: 46rem;
}
#top section.column > header {
  padding-bottom: 35rem;
  overflow: hidden;
}
#top section.column > header h3 {
  margin: auto;
  padding-bottom: 50rem;
  width: 391rem;
}
#top section.column > header .tags {
  display: flex;
  white-space: nowrap;
  width: fit-content;
  animation: tagLoop 30s 0s linear infinite;
}
#top section.column > header .tags li {
  padding-left: 25rem;
}
#top section.column > header .tags a {
  font-size: 17rem;
  color: #0f5098;
}
#top section.column > header .tags a .hash {
  position: relative;
  top: 1rem;
  font-size: 21rem;
}
#top section.column .commonColumnList01 {
  padding-bottom: 65rem;
}

/*==================================================================================
 lower common
==================================================================================*/
.lower main {
  padding-top: 90rem;
}

/*==================================================================================
 feature01
==================================================================================*/
#feature01 section.intro {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 75rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/top/feature01-bg.jpg") no-repeat center center;
  background-size: 100% 100%;
  z-index: 3;
}
#feature01 section.intro hgroup {
  flex: 1 1 auto;
  color: #fff;
}
#feature01 section.intro hgroup h2 {
  padding-bottom: 60rem;
  width: 298rem;
}
#feature01 section.intro hgroup .catch {
  padding-bottom: 60rem;
  letter-spacing: .18em;
  line-height: 2;
  font-size: 38rem;
}
#feature01 section.intro hgroup .catch span {
  letter-spacing: .05em;
}
#feature01 section.intro .image {
  flex: 0 0 704rem;
}
#feature01 section.intro .water {
  position: absolute;
  right: 40rem;
  bottom: -220rem;
  width: 280rem;
}
#feature01 .sections {
  box-sizing: border-box;
  position: relative;
  margin-top: 100rem;
  padding-top: 30rem;
  padding-left: 108rem;
}
#feature01 .sections:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 108rem;
  height: 5rem;
  background: linear-gradient(90deg, #00b9ee, #897bb7, #e96b83);
  -webkit-mask-size: 10rem 5rem;
  mask-size: 10rem 5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-image: radial-gradient(circle, #000000 40%, rgba(0, 0, 0, 0) 45%);
  mask-image: radial-gradient(circle, #000000 40%, rgba(0, 0, 0, 0) 45%);
}
#feature01 .section01 .flexArea {
  display: flex;
  justify-content: space-between;
}
#feature01 .section01 .flexArea .textArea {
  flex: 0 0 465rem;
}
#feature01 .section01 .flexArea .textArea .lead {
  padding-bottom: 35rem;
  line-height: 40rem;
  font-size: 16rem;
}
#feature01 .section01 .flexArea .textArea .detail {
  padding: 20rem 22rem;
  border-radius: 5rem;
  background: #eee;
}
#feature01 .section01 .flexArea .textArea .detail .text {
  line-height: 24rem;
  font-size: 12rem;
}
#feature01 .section01 .flexArea .image {
  flex: 0 0 550rem;
  padding-top: 5rem;
}
#feature01 .section02 .flexArea {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 50rem;
}
#feature01 .section02 .flexArea .textArea {
  flex: 0 0 400rem;
}
#feature01 .section02 .flexArea .textArea .lead {
  padding-bottom: 20rem;
  line-height: 1;
  font-size: 16rem;
}
#feature01 .section02 .flexArea .textArea dl + dl {
  padding-top: 15rem;
}
#feature01 .section02 .flexArea .textArea dl dt {
  display: flex;
  align-items: center;
  gap: 0 11rem;
  padding-bottom: 8rem;
  font-size: 16rem;
}
#feature01 .section02 .flexArea .textArea dl dt span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 98rem;
  height: 32rem;
  border-radius: 16rem;
  letter-spacing: .15em;
  font-size: 16rem;
  color: #fff;
  background: linear-gradient(90deg, #00b9ee, #897bb7 63%, #e96b83);
}
#feature01 .section02 .flexArea .textArea dl dd {
  line-height: 25rem;
  font-size: 15rem;
  font-weight: 400;
}
#feature01 .section02 .flexArea .image01 {
  flex: 0 0 657rem;
}
#feature01 .section02 .flexArea .image02 {
  position: absolute;
  top: -45rem;
  right: 32rem;
  width: 273rem;
}
#feature01 .section03 .lead {
  padding-bottom: 30rem;
  letter-spacing: .1em;
  line-height: 40rem;
  font-size: 16rem;
}
#feature01 .section03 .image01 {
  margin: auto;
  padding-bottom: 30rem;
  width: 870rem;
}
#feature01 .section03 .image02 {
  margin: auto;
  padding: 20rem 0 10rem;
  width: 906rem;
}
#feature01 .section03 .catch {
  text-align: center;
  letter-spacing: .1em;
  line-height: 35rem;
  font-size: 22rem;
}
#feature01 section.lastly {
  gap: 0 80rem;
}

/*==================================================================================
 feature02
==================================================================================*/
#feature02 section.intro {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 115rem;
  background: #004898;
}
#feature02 section.intro hgroup {
  flex: 1 1 auto;
  position: relative;
  padding-left: 67rem;
  color: #fff;
  z-index: 2;
}
#feature02 section.intro hgroup h2 {
  padding-bottom: 30rem;
  letter-spacing: .15em;
  font-size: 38rem;
}
#feature02 section.intro hgroup h2 img {
  display: block;
  padding-bottom: 50rem;
  width: 298rem;
}
#feature02 section.intro hgroup .catch {
  margin-right: -150rem;
  letter-spacing: .15em;
}
#feature02 section.intro hgroup .catch > span {
  display: block;
  width: fit-content;
  letter-spacing: .1em;
  color: #fff;
  background: #004898;
}
#feature02 section.intro hgroup .catch .text01 {
  margin-bottom: 8rem;
  padding: 3rem 15rem 6rem;
  font-size: 46rem;
}
#feature02 section.intro hgroup .catch .text02 {
  padding: 8rem 20rem 15rem;
  font-size: 46rem;
}
#feature02 section.intro .image {
  flex: 0 0 660rem;
}
#feature02 .sections {
  box-sizing: border-box;
  position: relative;
  padding: 0 0 80rem 108rem;
}
#feature02 .sections .lead {
  line-height: 35rem;
  font-size: 16rem;
}
#feature02 .section01 .flexArea {
  display: flex;
  justify-content: space-between;
}
#feature02 .section01 .flexArea .textArea {
  flex: 0 0 455rem;
  position: relative;
  z-index: 2;
}
#feature02 .section01 .flexArea .textArea .lead01 {
  padding-bottom: 40rem;
}
#feature02 .section01 .flexArea .textArea .image01 {
  margin: 0 -96rem -20rem 0;
  width: 540rem;
}
#feature02 .section01 .flexArea .image {
  flex: 0 0 638rem;
  padding-top: 5rem;
}
#feature02 .section02 .lead {
  padding-bottom: 30rem;
}
#feature02 .section02 .image,
#feature02 .section02 .annotation,
#feature02 .section02 .guide,
#feature02 .section02 .methods {
  padding-right: 50rem;
  padding-left: 50rem;
}
#feature02 .section02 .annotation {
  margin: 5rem 0;
  text-align: right;
  font-size: 9rem;
  font-weight: 400;
}
#feature02 .section02 .guide {
  padding-bottom: 30rem;
  width: 363rem;
}
#feature02 .section02 .methods {
  padding-bottom: 45rem;
}
#feature02 .section02 .text {
  padding: 20rem 10rem;
  border: 1px solid #004898;
  letter-spacing: .1em;
  text-align: center;
  border-radius: 15rem;
  line-height: 29rem;
  font-size: 16rem;
}
#feature02 .section03 .lead01 {
  padding-bottom: 45rem;
}
#feature02 .section03 .links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 20rem;
  padding-bottom: 25rem;
}
#feature02 .section03 .image01 {
  margin: auto;
  padding-bottom: 50rem;
  width: 920rem;
}
#feature02 .section03 .lead02 {
  padding-bottom: 30rem;
}
#feature02 .section03 .image02 {
  margin: auto;
  width: 1000rem;
}
#feature02 section.summary h4 {
  padding-bottom: 20rem;
}
#feature02 section.summary h4 img {
  width: 100%;
}
#feature02 section.summary .lead {
  text-align: center;
  line-height: 40rem;
  font-size: 16rem;
}
#feature02 section.lastly {
  gap: 0 40rem;
}

/*==================================================================================
 case
==================================================================================*/
#case .wrap {
  max-width: 960rem;
}
#case header.intro {
  margin-bottom: 80rem;
  padding: 70rem 0 80rem;
  text-align: center;
  color: #fff;
  background: url("/recruit/graduate/ppp-specialsite/static/img/case/pagetitle-bg.jpg") no-repeat center center;
  background-size: cover;
}
#case header.intro h2 {
  padding-bottom: 30rem;
  font-size: 82rem;
}
#case header.intro .catch {
  padding-bottom: 20rem;
  letter-spacing: .18em;
  line-height: 1.7;
  font-size: 28rem;
}
#case header.intro .catch span {
  display: inline-block;
  padding-top: 10rem;
  letter-spacing: .1em;
  line-height: 1.2;
}
#case .sections {
  position: relative;
  z-index: 2;
}
#case .sections:not(:last-of-type) {
  padding-bottom: 500rem;
}
#case .sections:not(:last-of-type):after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 656rem;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/bg01.png") no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  opacity: 0;
}
#case .sections .lead {
  line-height: 2;
  font-size: 16rem;
}
#case .sections.action:after {
  animation: fadeIn 2s ease 0s forwards;
}
#case .section01 {
  padding-bottom: 290rem !important;
}
#case .section01:after {
  bottom: -75rem !important;
}
#case .section02:after {
  background-image: url("/recruit/graduate/ppp-specialsite/static/img/common/bg02.png") !important;
}
#case .section02 .lead {
  padding-bottom: 80rem;
}
#case .section03 hgroup {
  padding-bottom: 50rem;
}
#case .section03 .imageArea {
  position: relative;
}
#case .section03 .imageArea .annotation {
  position: absolute;
  top: 660rem;
  right: 0;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 2;
  font-size: 16rem;
}
#case .section04 hgroup {
  padding-bottom: 70rem;
}
#case .section04 .achievements {
  padding: 40rem 0 90rem;
}
#case .section04 .achievements:nth-of-type(2n-1) {
  position: relative;
  z-index: 2;
}
#case .section04 .achievements:nth-of-type(2n-1):after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: linear-gradient(135deg, rgba(240, 245, 251, 0), #f0f5fb 26%, #d9e5f3);
  z-index: -1;
}
#case .section04 .achievements h4 {
  padding-bottom: 25rem;
  text-align: center;
  line-height: 1.4;
  font-size: 25rem;
  color: #004898;
}
#case .section04 .achievements .flexArea {
  display: flex;
  flex-direction: row-reverse;
  gap: 0 60rem;
}
#case .section04 .achievements .flexArea .textArea {
  flex: 1 1 auto;
}
#case .section04 .achievements .flexArea .textArea .name {
  margin-bottom: 18rem;
  padding: 5rem 10rem 7rem;
  border-radius: 18rem;
  letter-spacing: .1em;
  text-align: center;
  line-height: 1.3;
  font-size: 18rem;
  color: #fff;
  background: url("/recruit/graduate/ppp-specialsite/static/img/common/bg03.png") no-repeat center bottom;
  background-color: #306bac;
  background-size: 100% 12rem;
}
#case .section04 .achievements .flexArea .textArea .catch {
  display: flex;
  gap: 0 8rem;
  margin-bottom: 15rem;
  padding-bottom: 3rem;
  border-bottom: 1.25rem solid #222;
  letter-spacing: .1em;
  line-height: 1.3;
  font-size: 16rem;
  color: #004898;
}
#case .section04 .achievements .flexArea .textArea .catch:before {
  content: '';
  flex: 0 0 4rem;
  display: block;
  position: relative;
  background: url(/recruit/graduate/ppp-specialsite/static/img/common/accent01.png) no-repeat;
  background-size: 100% 100%;
}
#case .section04 .achievements .flexArea .textArea .tags {
  display: flex;
  gap: 0 25rem;
  padding-bottom: 20rem;
}
#case .section04 .achievements .flexArea .textArea .tags span {
  position: relative;
  padding: 2.5rem 16rem 4.5rem 20rem;
  border-radius: 18rem;
  letter-spacing: .05em;
  text-align: center;
  border: 1px solid #427ec5;
  line-height: 1;
  font-size: 13rem;
  color: #fff;
  background: #91b4de;
}
#case .section04 .achievements .flexArea .textArea .tags span:before {
  content: '';
  display: block;
  position: absolute;
  top: -5rem;
  left: -6rem;
  width: 17rem;
  height: 27rem;
  background: url(/recruit/graduate/ppp-specialsite/static/img/common/icon-water02.png) no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}
#case .section04 .achievements .flexArea .textArea .outlines li {
  padding-left: .5em;
  text-indent: -.5em;
  line-height: 1.8;
  font-size: 15rem;
  font-weight: 400;
}
#case .section04 .achievements .flexArea .textArea .outlines li:not(:last-child) {
  padding-bottom: 1.25em;
}
#case .section04 .achievements .flexArea .image {
  flex: 0 0 430rem;
}

/*==================================================================================
 future
==================================================================================*/
#future header.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 72rem;
  background: #e8eff1;
}
#future header.intro .textArea {
  text-align: center;
}
#future header.intro .textArea h2 {
  padding-bottom: 25rem;
  letter-spacing: .2em;
  font-size: 16rem;
}
#future header.intro .textArea h2 img {
  display: block;
  margin: auto;
  padding-bottom: 25rem;
  width: 246rem;
}
#future header.intro .textArea .catch {
  letter-spacing: .1em;
  line-height: 1.5;
  font-size: 48rem;
  color: #004898;
}
#future header.intro .image {
  flex: 0 0 773rem;
}
#future article.contents {
  padding: 100rem 0;
  background: url(/recruit/graduate/ppp-specialsite/static/img/future/bg.png) no-repeat center top;
  background-size: 100% auto;
}
#future article.contents > section {
  max-width: 980rem;
}
#future article.contents > section:not(:last-of-type) {
  padding-bottom: 130rem;
}
#future article.contents > section .flexArea {
  display: flex;
  gap: 0 40rem;
}
#future article.contents > section .flexArea .lead {
  flex: 1 1 auto;
}
#future article.contents > section .flexArea .image,
#future article.contents > section .flexArea .images {
  flex: 0 0 470rem;
}
#future article.contents > section .flexArea + .lead {
  padding-top: 110rem;
}
#future article.contents > section .lead {
  line-height: 2;
  font-size: 16rem;
}
#future article.contents > section .image,
#future article.contents > section .images {
  flex: 0 0 470rem;
}
#future article.contents > section .images {
  display: flex;
  flex-direction: column;
  gap: 26rem 0;
}
#future article.contents > section:nth-of-type(1) .flexArea, #future article.contents > section:nth-of-type(4) .flexArea {
  flex-direction: row-reverse;
}

/*==================================================================================
 column
==================================================================================*/
#column .allTags {
  display: flex;
  white-space: nowrap;
  padding: 70rem 0;
  width: fit-content;
  animation: tagLoop 30s 0s linear infinite;
}
#column .allTags li {
  padding-left: 25rem;
}
#column .allTags a {
  font-size: 17rem;
  color: #0f5098;
}
#column .allTags a .hash {
  position: relative;
  top: 1rem;
  font-size: 21rem;
}

/*==================================================================================
 column detail
==================================================================================*/
#column.detail h2 {
  padding: 50rem 0 70rem;
}
#column.detail article.contents {
  padding-bottom: 100rem;
  background: url(/recruit/graduate/ppp-specialsite/static/img/column/bg.png) repeat-y center top;
  background-size: 100% auto;
}
#column.detail article.contents .wrap {
  max-width: 780rem;
}
#column.detail article.contents > header {
  display: flex;
  flex-direction: column;
  padding-bottom: 80rem;
}
#column.detail article.contents > header h3 {
  padding-bottom: 15rem;
  line-height: 1.4;
  font-size: 42rem;
}
#column.detail article.contents > header h3 time {
  display: flex;
  align-items: center;
  gap: 0 7rem;
  padding-bottom: 15rem;
  font-size: 14rem;
  color: #004898;
}
#column.detail article.contents > header h3 time:before {
  content: '';
  display: inline-block;
  position: relative;
  width: 9rem;
  height: 12rem;
  background: url(/recruit/graduate/ppp-specialsite/static/img/common/icon-water01.svg) no-repeat center center;
  background-size: 100% 100%;
}
#column.detail article.contents > header .articleTags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem 25rem;
}
#column.detail article.contents > header .articleTags a {
  font-size: 17rem;
  color: #ccc;
  transition: color .5s;
}
#column.detail article.contents > header .articleTags a:hover {
  opacity: 1;
}
@media (min-width: 1025px) {
  #column.detail article.contents > header .articleTags a:hover {
    color: #004898;
  }
}
#column.detail article.contents > header .articleTags a span {
  position: relative;
  top: 2rem;
  font-size: 25rem;
}
#column.detail article.contents > header .image {
  order: -1;
  padding-bottom: 70rem;
}
#column.detail article.contents > section:not(:last-of-type) {
  padding-bottom: 100rem;
}
#column.detail article.contents > section p {
  line-height: 2;
  font-size: 20rem;
  font-weight: 400;
}
#column.detail article.contents > section p + p,
#column.detail article.contents > section p + div {
  padding-top: 40rem;
}
#column.detail article.contents > section div + p,
#column.detail article.contents > section div + div {
  padding-top: 40rem;
}
#column.detail .others .commonMoreButton01 {
  padding-top: 50rem;
}

/*==================================================================================
 error
==================================================================================*/
#error main .contents {
  padding-top: 100rem;
  text-align: center;
}
#error main .contents .errorText {
  padding-bottom: 120rem;
  line-height: 1;
  font-size: 40rem;
}
#error main .contents .topLink {
  margin: auto;
  padding: 0;
  width: auto;
  max-width: 280rem;
}

/*==================================================================================
 page
==================================================================================*/

/*# sourceMappingURL=style.css.map */