@charset "UTF-8";

html {
    font-size: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: rgb(255, 255, 255);
    color: rgb(17, 17, 17);
}

button,
input,
optgroup,
select,
textarea {
    font-family: 'Noto Sans JP', sans-serif;
}

a {
    transition: all 0.5s 0s ease;
}

/*--------------------------------------------------------------
Media
--------------------------------------------------------------*/
img,
video {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    width: 100%;
}

.site-footer a[target="_blank"]::after {
    background: url("../images/svg/icon-entry-blank.svg");
    background-size: contain;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    content: "";
}

a[target="_blank"]:hover {
    opacity: 0.8;
}

.remodal a[target="_blank"]::after {
    background: url("../images/svg/blank.svg");
    background-size: contain;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    content: "";
}

.remodal.video {
    max-height: auto;
    height: auto;
}

.remodal.video video {
    display: block;
    margin: 2.5% auto;
    width: 95%;
    margin-bottom: 10vh;
}

.screen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    border: 0;
}

/*--------------------------------------------------------------
Layout
--------------------------------------------------------------*/
.flex {
    display: flex;
    justify-content: center;
}

.none {
    display: none;
}

#page {
    position: relative;
    overflow: hidden;
}

.inner {
    margin: 0 auto;
    max-width: 1040px;
}

/*--------------------------------------------------------------
*ヘッダー
--------------------------------------------------------------*/
.header.flex {
    justify-content: space-between;
    /*position: absolute;
    width:100%;*/
    background: rgb(255, 255, 255);
    z-index: 99;
}

.header.fixed {
    position: fixed;
    width: 100%;
}

.branding {
    align-items: center;
    padding: 1rem;
}

.branding .logo {
    width: 160px;
}

.site-title {
    display: flex;
    padding-left: 0.5rem;
}

.site-title span {
    font-size: 0.8rem;
    font-weight: bold;
}

.top-menu {
    display: flex;
    align-items: stretch;
}

.top-menu li {
    position: relative;
    display: flex;
}

.top-menu a {
    align-self: center;
    padding: 1.5rem 1rem;
    font-weight: bold;
    color: rgb(17, 17, 17);
}

.top-menu li::before {
    opacity: 0;
    transition: all 0.5s ease 0s;
    display: block;
    content: "";
}

.top-menu li.last a {
    padding-right: 2rem;
}

.top-menu li:hover::before {
    opacity: 1;
    width: 100%;
    height: 4px;
    background: rgba(76, 119, 190, 1);
    position: absolute;
    bottom: 0;
}

.top-menu li.entry:hover::before {
    display: none;
    height: 0;
}

.top-menu .entry a {
    background: rgb(245, 170, 0);
    padding: 2rem;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    display: grid;
    justify-content: center;
    width: 9rem;
    align-self: auto;
}

.entry a:hover,
.sp-entry a:hover {
    background-color: rgb(251, 205, 0);
}

.page-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    background-image: url("../images/svg/page-top.svg");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 10;
}

.top-menu .entry .grad26,
.flow .button.entry.grad26,
.footer-entry .button.entry.grad26,
.sp-entry.grad26,
.sp-menu.open li.entry a.grad26 {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 171, 216, 1) 0%, rgba(0, 114, 188, 1) 100%);
}

.top-menu .entry .grad27,
.flow .button.entry.grad27,
.footer-entry .button.entry.grad27,
.sp-entry.grad27,
.sp-menu.open li.entry a.grad27 {
    background: linear-gradient(90deg, rgba(240, 173, 0, 1) 0%, rgba(248, 153, 66, 1) 100%);
}

.top-menu .entry a span,
.sp-entry span {
    display: block;
    margin: 0 auto;
    text-align: center;
}

/*スマホメニュー*/
.sp-menu-toggle,
.header .sp-nav,
.sp-menu {
    display: none;
}

/*フッターエントリー******************************************/
.footer-entry {
    color: rgb(255, 255, 255);
    background: rgba(0, 114, 188, 0.75);
    padding: 4% 8.33%;
}

.footer-entry .section-header {
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    margin-bottom: 2rem;
    line-height: 2rem;
}

.footer-entry .section-header .title.left {
    width: auto;
    border-right: 1px solid rgb(255, 255, 255);
    padding: 1rem 4rem 1rem 0;
    margin: 0;
    margin-right: 2rem;
}

.footer-entry .title span {
    color: rgb(255, 255, 255);
    margin-bottom: 1rem;
}

.footer-entry .column-2.flex {
    color: rgb(17, 17, 17);
    background: rgb(255, 255, 255);
    justify-content: space-around;
    padding: 2.08% 0;
    align-items: stretch;
}

.footer-entry .column-2 dt {
    background:rgba(0, 114, 188, 1);
    color:#FFFFFF;
    padding: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.1rem;
}

.footer-entry .column-2 .block {
    border-right: 1px solid rgba(212, 212, 212, 1);
    padding: 0 2.08%;
}

.footer-entry .block:last-child {
    border-right: none;
}

.footer-entry .button {
    font-size: 1.5rem;
}
.flow .button.entry {
    background: rgba(240, 175, 0, 1);
    display: block;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    padding:2rem;
margin-bottom:1rem;
    font-size: 1.5rem;
    text-align: center;
}

.footer-entry .button.entry {
    background: rgba(240, 175, 0, 1);
    display: flex;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 2.08%;
}

.entry-group {
    width: 100%;
}

.footer-entry .section-header .inst {
    margin-left: auto;
    padding-left: 2.08%;
}

.footer-entry .button.entry.grad26,
.flow .button.entry.grad26 {
    margin-right: 8.33%;
}

.flow .button.entry.grad26 span,
.flow .button.entry.grad27 span,
.footer-entry .button.entry.grad26 span,
.footer-entry .button.entry.grad27 span {
    padding-right: 0.5rem;
}

.footer-entry .button.mypage {
    background: rgba(0, 171, 216, 1);
    display: flex;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.notice {
    font-size: 0.75rem;
}

.contents .footer-entry a:hover,
.contents .recruit .flow li .entry-link a:hover {
    opacity: 0.6;
}

.contents .footer-entry a:hover img,
.contents .recruit .flow li .entry-link a:hover img {
    transform: scale(1);
}

@media screen and (max-width: 980px) {

    .footer-entry .button,
    .footer-entry .column-3.flex {
        padding: 6.25%;
    }

    .footer-entry .block {
        border: none;
    }

    .flow .button.entry,
    .footer-entry .button.entry {
        display: block;
        text-align: center;
    }

    .footer-entry .button.entry {
margin-bottom:2.08%;
}
}

/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/
.site-footer {
    background: rgba(0, 114, 188, 1);
    color: rgb(255, 255, 255, .5);
    padding: 6.25%;
    text-align: center;
    line-height: 3rem;
}

.privacy::before {
    margin: 0 1rem;
    content: "";
    width: 1px;
    height: 1rem;
    display: inline-block;
    background: rgba(255, 255, 255, .5);
    vertical-align: middle;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 100%;
    font-weight: 400;
}

h1 {
    font-size: 1.5rem;
    font-weight: 400;
}

h3 {
    font-size: 1.5rem;
}

.title,
.sub-title {
    text-align: center;
}

.title span,
.sub-title span {
    font-family: 'Roboto Condensed', sans-serif;
    display: block;
}

.title span {
    color: rgba(0, 114, 188, 1);
    font-size: 4rem;
    font-weight: normal;
}

.title.left {
    text-align: left;
}

.sub-title {
    margin: 6.25% 0;
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: bold;
}

.sub-title span {
    font-size: 1rem;
    color: rgba(0, 114, 188, 1);
}

.sub-title span::before {
    content: url("../images/newgrads/svg/sub-title-under.svg");
    display: block;
}

.section-header {
    align-items: center;
}

.section-header .title {
    font-size: 1.5rem;
    font-weight: bold;
}

.section-header .title.left {
    padding: 6.25%;
    white-space: nowrap;
}

.anchor-link {
    padding-top: 6.25%;
}

#entry.anchor-link {
    background: rgba(244, 244, 244);
}

#recruit.anchor-link {
    background: #fff;
}

/*ヘッダースライダー*/
.slider {
    position: relative;
    overflow: hidden;
    margin-left: auto;
    max-width: 1280px;
    width: 100%;
    height: 640px;
    background-size: cover;
    background-position: center;
}

.main-slider.slider {
    height: auto;
}

.slider-item {
    position: absolute;
    overflow: hidden;
    max-width: 1280px;
    width: 100%;
    z-index: -1;
    opacity: 0;
    transition: .2s;
    background-size: cover;
    background-position: top center;
    height: 640px;
}

.slider-item::before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 640px;
    z-index: 3;
    transition: 1s;
    transform-origin: right center;
    background: rgba(255, 255, 255, 1);
    transform: scaleX(1);
    -webkit-transition: width .4s cubic-bezier(0.19, 1, 0.22, 1) 0s, transform .8s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    transition: width .4s cubic-bezier(0.19, 1, 0.22, 1) 0s, transform .8s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
}

.slider-item.now {
    opacity: 1;
    left: 0;
    z-index: 5;
}

.slider-item.now::before {
    transform: scaleX(0);
    width: 100%;
}

/*--------------------------------------------------------------
メインビジュアル
--------------------------------------------------------------*/
.copy {
    background: rgba(255, 255, 255, 0.95);
    padding: 5rem 4rem;
    margin-left: 10vw;
}

.copy h2 {
    font-size: 2.875rem;
    line-height: 4rem;
    font-weight: normal;
    letter-spacing: 2.53px;
}

.copy h2 span {
    font-size: 1.75rem;
}

.copy h2 span::after {
    background: url("../images/newgrads/svg/copy-under.svg");
    content: "";
    display: block;
    margin: 1rem 0;
    width: 100%;
    height: 9px;
    background-repeat: repeat-x;
}

.main-visual {
    background-image: url("../images/newgrads/mainvisual.jpg");
    background-repeat: repeat-x;
    background-size: cover;
}

.pc.main-visual {
    background-position: -1920px 0;
    min-height: 800px;
    height: 100vh;
    display: flex;
    align-items: center;
}

.pc.main-visual.parallax {
    background-attachment: fixed;
}

@media screen and (max-width: 980px) {
    .copy {
        margin: 0 auto;
        padding: 6.25% 0;
        width: 80%;
        text-align: center;
    }

    .copy h2 {
        font-size: 1.25rem;
        line-height: 2rem;
        letter-spacing: 1.1px;
    }

    .copy h2 span {
        font-size: 1rem;
    }
}

/*--------------------------------------------------------------
13.0 Layout
--------------------------------------------------------------*/
.column-2 {
    justify-content: space-evenly;
}

.column-2 .block {
    width: 50%;
    padding: 2.08%;
}

.column-3 {
    flex-wrap: wrap;
    justify-content: space-around;
}

.column-3 .block {
    flex-wrap: wrap;
    width: 27.76%;
}

.column-3 dt {
    text-align: center;
    color: rgba(0, 114, 188, 1);
    padding: 8.33%;
    padding-bottom: 0;
    font-size: 1.5rem;
}

.column-3.flex {
    justify-content: center;
}

.column-3.flex:after {
    content: "";
    display: block;
    width: 27.76%;
    height: 0;
}

.column-3 dd {
    line-height: 1.8rem;
    padding: 1rem 8.33%;
}

.column-3 dl img {
    display: block;
    margin: 0 auto 1rem;
}

.column-2 .slider.block {
    padding: 0;
}

/*採用コンセプト******************************************/
.concept {
    padding: 0;
}

.concept .column-2 .slider-item,
.concept .column-2 .slider-item::before {
    height: 100%;
}

.concept .block.message {
    color: rgb(255, 255, 255);
    background: rgba(0, 114, 188, 1);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 171, 216, 1) 0%, rgba(0, 114, 188, 1) 100%);
    padding: 6.25%;
    /*line-height: 2.25rem;
    font-size: 1.25rem;*/
}

.concept .message .title {
    margin-bottom: 4rem;
    line-height: 1.5;
}

.concept .message .title span {
    color: rgb(255, 255, 255);
}

@media screen and (max-width: 980px) {
    .concept .column-2 .block.message p {
        margin: 0 auto;
        line-height: 1.8rem;
        font-size: 1rem;
    }

    .concept .message {
        background: linear-gradient(0deg, rgba(0, 114, 188, 1) 0%, rgba(0, 171, 216, 1) 100%);
    }

    .concept .column-2 .block {
        height: auto;
        margin: 0;
    }

    .concept .column-2 .block.slider {
        height: 100vw;
    }
}

/*私たちの仕事******************************************/
.introduction,
.welfare-bg {
    background: url("../images/svg/pattern02.svg");
    background-repeat: no-repeat;
    background-position: 95% 5%;
}
.business,
.system {
    background: url("../images/newgrads/business/bg-system-header.png");
    background-repeat: no-repeat;
    background-position: 10% 0;
    background-size: 200px;
}

.young-person {
    background: url("../images/svg/pattern02.svg");
    background-repeat: no-repeat;
    background-position: 95% 0%;
}

.system .sub-title {
padding-top: 6.25%;
}

.system-bg,
.business-bg {
    position: relative;
}

.business-area .sub-title {
    margin:0 auto;
}

.system-bg::before,
.business-bg::before {
    background: rgba(239, 246, 252, 1);
    content: "";
    height: 100%;
    width: 65vw;
    position: absolute;
    z-index: -1;
    top: 10vh;
    left: 0;
}

.welfare-bg {
    margin-top: 15vh;
    background-color: #fff;
    padding-top: 4%;
}

.welfare-bg .sub-title {
    margin-top: 0;
    margin-bottom: 2.08%;
}
.lede {
    padding: 6.25% 0;
    line-height: 1.8rem;
}

.business,.introduction {
    padding-top: 6.25%;
}

.business .column-2 {
    flex-wrap: wrap;
}

.business .business-type {
    margin-bottom: 6.25%;
}

.business .business-type.column-2 .block {
    width: 50%;
    padding: 4.16%;
    border: 1px solid #fff;
}

.business .column-2 .block:hover dl {
    background: rgba(0, 114, 188, 1);
}

.business .column-2 .block:hover {
    opacity: 1;
}

.block:hover dl {
    display: block;
    transition: all 0.2s 0s ease;
}

.business .introduction .column-2 .block:hover dd span, .business .introduction .column-2 .block:hover dd {
  color: rgb(255, 255, 255);
}

.contents a:hover img {
    transform: scale(1.1);
}

.business .introduction dl,.business .business-type dl {
  background: rgba(239, 246, 252, 1);
  border: 1px rgb(255, 255, 255);
  overflow: hidden;
}

.business .introduction dt {
	overflow: hidden;
}

.business .introduction dd span {
  display: block;
  padding-bottom: 0;
  color: rgba(0, 114, 188, 1);
}

.business .business-type dt span {
  font-size: 1.5rem;
  color: rgba(0, 114, 188, 1);
  text-align: center;
  display: block;
  padding: 1rem;
}

.business .introduction dd {
  padding: 6.25% 6.25%;
}
.business .introduction dd::after,.discussion-banner p::after {
  background: url("../images/svg/view-more.svg");
  background-size: unset;
  content: "";
  display: block;
  width: 94px;
  height: 26px;
  margin-top: 1rem;
  transition: all 0.5s ease;
	background-repeat: no-repeat;
background-position: left;
}
.business .introduction .column-2 .block:hover dd::after,.discussion-banner:hover p::after {
  background-image: url("../images/svg/view-more-hover.svg");
width: 99px;
}


@media screen and (max-width: 980px) {
    .business .business-type.column-2 .block {
        width: 100%;
        margin: 1rem 0;
    }

    .business .business-type dt span {
        font-size: 1.25rem;
    }
}

/*社員紹介******************************************/
.person {
    background: url("../images/svg/pattern03.svg");
    background-repeat: no-repeat;
    background-position: 10% 0;
    background-size: 200px;
    position: relative;
    margin-top: 0;
}

.person::before {
    background-color: rgba(239, 246, 252, 1);
    content: "";
    height: 75vh;
    width: 70vw;
    position: absolute;
    z-index: -1;
    bottom: -5vh;
    right: 0;
}

.person .block {
    position: relative;
    background-size: cover;
    transition: all 0.5s 0s ease;
    display: inline-block;
    padding: 0;
    width: 100%;
}

.person .block dl {
    background-color: rgb(255, 255, 255);
    position: absolute;
    left: 0;
    top: auto;
    bottom: 1rem;
    padding: 6.25%;
    z-index: 1;
    line-height: 1.8rem;
    max-width: 70%;
}

.person .block dt {
    color: rgba(0, 114, 188, 1);
    font-size: 1.25rem;
}

.person .block:hover dl,
.person .block:hover dt span,
.person .block:hover dt {
    color: rgb(255, 255, 255);
}

.person .block:hover dl {
    background-color: rgba(0, 114, 188, 1);
}

.person dd {
    font-size: 0.750rem;
    padding: 1rem 0;
    line-height: 1.2rem;
}

.person dd::after {
    background: url("../images/newgrads/svg/view-more.svg");
    background-size: contain;
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 94px;
    height: 26px;
    margin-top: 1rem;
}

.person .block:hover dd::after {
    background-image: url("../images/newgrads/svg/view-more-hover.svg");
}

.person .swiper .swiper-slide {
    transform: scale(.8);
    overflow: hidden;
}

.person .swiper .swiper-slide-active {
    opacity: 1;
    z-index: 1;
    transform: scale(0.9);
    transition: all 0.1s 1s ease-in-out;
}

.person .swiper {
    padding-bottom: 2%;
    width: 90%;
}

.person .swiper .swiper-pagination {
    bottom: 0;
}

.schedules {
    background: rgba(239, 246, 252, 1);
    padding: 6.25%;
    margin-top: 2.08%;
}

.schedules dl {
    background: rgb(255, 255, 255);
    padding: 1rem 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    border-bottom: solid 1px rgb(237, 241, 249);
    justify-content: space-between;
}

.schedules dt {
    width: 4rem;
    color: rgba(0, 114, 188, 1);
    white-space: nowrap;
}

.schedules dd {
    width: calc(100% - 5rem);
    line-height: 1.8rem;
}

.schedules dd strong {
    margin-right: 1rem;
    display: block;
}

.schedules h3 {
    color: rgba(0, 114, 188, 1);
    font-size: 1.5rem;
    padding-bottom: 2.08%;
    font-weight: bold;
}

/*動画*/
.mission {
    padding: 6.25% 0;
}

.mission .sub-title {
    margin-top: 0;
}

.mission-video {
    position: relative;
}

.mission-video a {
    display: table;
}

.icon-video {
    position: absolute;
    right: 2.08%;
    bottom: 2.08%;
    width: 90px;
    height: 167px;
    z-index: 1;
    background-image: url("../images/newgrads/svg/movie_btn.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.contents .mission-video:hover img {
    transform: scale(1);
}

.mission-video:hover .icon-video {
    transform: scale(1.1);
}

@media screen and (max-width: 980px) {
    .icon-video {
        width: 60px;
        height: 137px;
        right: 6.25%;
    }
}

/*若手社員からのメッセージ******************************************/
.young-person .sub-title {
    margin-bottom: 2.08%;
}

.young-person .column-4 {
    justify-content: center;
    flex-wrap: wrap;
}

.young-person .column-4 .block {
    width: 20.7%;
    padding-bottom: 2.08%;
    line-height: 1.8rem;
    display: flex;
    flex-direction: column;
}

.young-person dl {
    text-align: center;
}

.young-person dd .initial {
    display: block;
    color: rgba(0, 114, 188, 1);
    font-size: 1.5rem;
    font-weight: bold;
}

.young-person dd .sp-br {
    margin-right: 0.5rem;
}

.young-person dd {
    line-height: 1.8rem;
    padding: 2.08%;
}

@media screen and (max-width: 980px) {
    .young-person {
        padding-top: 8.33%;
        background-size: 175px 150px;
        background-position: 100% 3.5%;
    }

    .young-person .column-4 {
        display: flex;
    }

    .young-person .column-4 .block {
        width: 50%;
        padding-bottom: 6.25%;
    }

    .young-person dd .sp-br {
        margin-right: 0;
    }

    .young-person dd {
        font-size: 0.8rem;
        line-height: 1.25rem;
    }

    .young-person dd .initial {
        margin-top: 0.5rem;
    }
}

/*内定者の声******************************************/
.voice {
    padding: 2.5% 0;
    background-color: #fff;
}

.voice .sub-title {
    margin-bottom: 2.08%;
}

.voice .column-2 .block {
    width: 41.4%;
}

.voice dl {
    background: rgba(239, 246, 252, 1);
    border: 1px solid #fff;
}

.voice .block dt {
    color: rgba(0, 114, 188, 1);
    padding-bottom: 1rem;
}

.voice .block dt::before {
    content: "Q.";
    margin-right: 0.5rem;
}

.voice .block dd::before {
    content: "A.";
    margin-right: 0.5rem;
    position: absolute;
    left: 0;
}

.voice .block dd {
    position: relative;
    padding: 1.5rem;
    padding-top: 0;
}

.voice .column-2 .block dd p {
    flex-grow: 1;
}

@media screen and (max-width: 980px) {
    .voice {
        padding: 8.33%;
    }

    .voice .column-2 .block {
        width: 100%;
        padding: 6.25%;
    }

    .voice .block dd {
        padding-right: 0;
        padding-bottom: 0;
    }
}

/*数字で見るNTTデータ九州******************************************/
.key-word {
    background: rgb(244, 244, 244);
    position: relative;
}

.key-word .slider {
    margin:0;
    margin-right:auto;
}
.key-word .column-2 {
    padding: 6.25% 0;
}

.key-word::before {
    content: "";
    position: absolute;
    height: 15vh;
    width: 100%;
    background: rgb(255, 255, 255);
    display: block;
}

.key-word .section-header {
    background: url("../images/svg/pattern01.svg");
    background-repeat: no-repeat;
    background-position: 95% 5%;
    position: relative;
}

.key-word dl {
    width: 50%;
    padding: 2.08%;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(244, 244, 244);
}

.key-word dt {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.key-word .side-note {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.8rem;
}

@media screen and (max-width: 980px) {
    .key-word dl {
        width: calc(100% - 12.5%);
        margin: 1rem auto;
        padding: 6.25%;
    }
}

/*人財育成と働き方を支援する制度******************************************/
/*人事部メッセージ*/
.dear {
    background: rgba(238, 238, 238, 1);
    padding: 6.25%;
    margin: 6.25% auto;
}

.dear h3 {
    color: rgba(0, 114, 188, 1);
    margin-bottom: 1rem;
    font-weight: bold;
}

.dear .flex {
    justify-content: space-between;
}

.dear .message {
    max-width: calc(100% - 320px);
    line-height: 1.8rem;
    padding-right: 6.25%;
}

.dear .message em {
    font-weight: bold;
    font-style: unset;
}

.welfare dl {
    background: rgba(239, 246, 252, 1);
    border: 1px solid rgb(255, 255, 255);
}

@media screen and (max-width: 980px) {
    .dear .message {
        padding: 6.25% 0;
        max-width: 100%;
    }

    .dear h3 {
        font-size: 1.25rem;
        text-align: center;
        margin: 0;
    }
}

@media screen and (min-width:981px) {
    .welfare.column-3 dd {
        display: block !important;
    }
}

.column-2 .block {
    width: 50%;
    line-height: 2rem;
    display: flex;
    flex-direction: column;
}

.column-2 {
    justify-content: center;
    flex-wrap: wrap;
}

/*採用情報******************************************/
.recruit {
    padding-top: 6.25%;
    background: rgba(244, 244, 244);
    padding-bottom: 0;
}

/*.recruit .sub-title {
    margin-bottom: 2.08%;
}*/

.recruit .flow li {
    background: rgb(255, 255, 255);
    justify-content: flex-start;
    padding: 2.5%;
}

.recruit .flow li p {
    margin-bottom: 1rem;
}

.step-no,
.recruit .flow li h3 {
    color: rgba(0, 114, 188, 1);
}

.recruit .flow li h3 {
    padding-bottom: 1rem;
    font-weight: bold;
}

.recruit .flow .detail {
    width: 100%;
    justify-content: space-between;
}

.recruit .flow li .entry-group {
    width: 50%;
}

.recruit .flow-arrow {
    background: url("../images/newgrads/svg/flow-arrow.svg");
    width: 60px;
    height: 20px;
    display: block;
    margin: 1rem auto;
    align-items: center;
}

.step-no {
    font-size: 4rem;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    padding-right: 2.5%;
    align-self: flex-start;
}

.step-no::before {
    content: "STEP";
    display: block;
    font-size: 1rem;
}

.recruit .flow dl {
    flex-wrap: wrap;
}

.recruit .flow dt {
    width: 20%;
    border-top: 1px solid rgb(212, 212, 212);
    padding: 2.5%;
}

.recruit .flow dt,
.recruit .flow dd {
    border-bottom: 1px solid rgb(212, 212, 212);
}

.job-remodal dt {
    font-weight: bold;
    width: 20%;
    padding: 2.5%;
}

.modal-content .flex {
    border-top: 1px solid rgba(212, 212, 212);
    margin: 1rem;
}

.recruit .flow dd {
    width: calc(100% - 20%);
    border-top: 1px solid rgb(212, 212, 212);
    padding: 2.5%;
    line-height: 1.8rem;
}

.job-remodal dd {
    width: calc(100% - 20%);
    padding: 2.5%;
    line-height: 1.8rem;
}

.job-remodal dd td {
    padding: 1rem;
}

.recruit .flow dd a,.footer-entry .column-2 dd a {
color: rgba(0, 114, 188, 1);
    text-decoration: underline;
    word-break: keep-all;
}

.footer-entry .column-2 dd li a,
.recruit .flow dd .inline-list a {
    display: inline;
}

.recruit .flow dd a:hover,
.footer-entry .column-3 dd a:hover {
    text-decoration: inherit;
    opacity: 0.8;
}

@media screen and (max-width: 980px) {
    .flow .button.entry {
        width: 100%;
        padding: 6.25%;
    }
}

/*募集要項******************************************/
.job .list li a {
    color: rgba(0, 114, 188, 1);
    border-bottom: 1px solid rgba(244, 244, 244);
    background: rgb(255, 255, 255);
    position: relative;
    padding: 1.5rem;
    display: block;
    z-index: 0;
    overflow: hidden;
}

/*.job .list li a::before {
content:"";
    position: relative;
    z-index: 1;
    background-image: url("../images/newgrads/svg/view-more.svg");
    background-position: 95%;
    background-repeat: no-repeat;
    background-size: 94px 26px;
    padding-right: 9rem;
}*/
.job .list li a::after {
content:"";
background-image: url("../images/newgrads/svg/view-more.svg");
    position: absolute;
    z-index: 1;
background-size: unset;
  content: "";
  width: 94px;
  height: 26px;
  transition: all 0.5s ease;
  background-repeat: no-repeat;
  background-position: left;
left:89%;
}

.job .list li a:hover::after {
    background-image: url("../images/newgrads/svg/view-job-hover.svg");
width: 99px;
  height: 26px;
}

.job h3 {
    padding: 2rem 0;
    padding-top:0;
    font-weight: bold;
}

.job .list li a::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0%;
    height: 100%;
    background-color: rgba(239, 246, 252, 1);
    transition: .3s;
}

.job .list li a:hover::before {
    width: 100%;
    mix-blend-mode: multiply;
}

/*よくある質問******************************************/
.faq {
    background: rgba(244, 244, 244);
    padding: 6.25%;
    line-height: 1.8rem;
    padding-top: 1rem;
}

.faq dt {
    display: block;
    border-top: rgb(212, 212, 212) 1px solid;
    cursor: pointer;
    position: relative;
    padding: 1.5rem;
    color: rgba(0, 114, 188, 1);
}

.faq dt:hover {
    background-color: rgba(239, 246, 252, 1);
    transition: .3s;
}

.faq dt::before {
    content: "Q.";
    margin-right: 0.5rem;
}

.faq dd::before {
    content: "A.";
    margin-right: 0.5rem;
    position: absolute;
    left: 0;
}

.faq dt::after {
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    right: 1rem;
    background: url("../images/newgrads/svg/icon-plus.svg");
    background-size: cover;
    margin-top: .5rem;
}

.faq dt.active::after {
    background: url("../images/newgrads/svg/icon-minus.svg");
}

.faq dd {
    display: none;
    padding: 1.5rem;
    padding-top: 0;
    position: relative;
    margin-left: 1.5rem;
}

.faq dl {
    border-bottom: rgb(212, 212, 212) 1px solid;
}

/* ==========================================================================
   Remodal
   ========================================================================== */
.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
    filter: blur(3px);
}

.remodal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.remodal-overlay.remodal-is-opening {
    animation-name: remodal-overlay-opening-keyframes;
}

.remodal-overlay.remodal-is-closing {
    animation-name: remodal-overlay-closing-keyframes;
}

/* Default theme styles of the modal dialog */
.remodal {
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    transform: translate3d(0, 0, 0);
    color: #2b2e38;
    background: #fff;
    height: 90%;
    overflow: hidden;
    max-width: 1040px;
}

.modal-scroll {
    height: 92%;
    padding: 0;
    width: 100%;
    -ms-overflow-style: none;
}

.modal-content::-webkit-scrollbar {
    background: rgba(42, 69, 146, 0);
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: rgba(0, 114, 188, 0.8) !important;
}

.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.remodal.remodal-is-opening {
    animation-name: remodal-opening-keyframes;
}

.remodal.remodal-is-closing {
    animation-name: remodal-closing-keyframes;
}

/* Vertical align of the modal dialog */
.remodal,
.remodal-wrapper:after {
    vertical-align: middle;
}

/* Close button */
.modal-navi {
    border-top: 1px solid rgb(212, 212, 212);
    justify-content: space-around;
    align-items: center;
    height: 4rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 0;
    background: rgb(255, 255, 255);
}

.modal-navi a {
    display: flex;
    text-decoration: none;
    height: 100%;
}

.modal-navi .prev,
.modal-navi .next,
.modal-close {
    position: relative;
    text-decoration: none;
    color: rgb(17, 17, 17);
    display: block;
    margin: 0;
}

.modal-navi .prev {
    background-image: url("../images/newgrads/svg/arrow-prev.svg");
    background-position: 5%;
    position: absolute;
    left: 0;
    padding: 1.25rem 1.25rem 1.25rem 3rem;
}

.modal-navi .next {
    background-image: url("../images/newgrads/svg/arrow-next.svg");
    background-position: 95%;
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1.25rem 3rem 1.25rem 0;
}

.modal-navi .next:hover {
    background-image: url("../images/newgrads/svg/arrow-next-hover.svg");
}

.modal-navi .prev:hover {
    background-image: url("../images/newgrads/svg/arrow-prev-hover.svg");
}

.modal-navi .next,
.modal-navi .prev {
    background-repeat: no-repeat;
    height: 100%;
    content: '';
    width: calc(50% - 2rem);
    background-size: 20px;
    display: flex;
    align-items: center;
}

.modal-navi .block.next span {
    margin-left: auto;
}

.modal-close {
    background-repeat: no-repeat;
    padding: 1.25rem 2rem;
    height: 100%;
    content: '';
    width: 1rem;
    background-size: 20px;
    margin: 0 auto;
}

body.modal-open {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
}

.modal-close {
    background-image: url("../images/newgrads/svg/modal-close.svg");
    background-position: center;
}

.modal-close:hover {
    background-image: url("../images/newgrads/svg/modal-close-hover.svg");
}

.modal-navi .next::before,
.modal-navi .prev::before,
.modal-close::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0%;
    height: 100%;
    background-color: rgba(0, 114, 188);
    transition: .3s;
}

.modal-navi .next:hover::before,
.modal-navi .prev:hover::before,
.modal-close:hover::before {
    width: 100%;
}

.modal-navi .next:hover,
.modal-navi .prev:hover,
.modal-close:hover {
    color: rgb(255, 255, 255);
}

.modal-navi.flex.next-hidden .modal-close {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.modal-section {
    padding: 6.25% 0 4.17% 0;
}

.modal-section .block.img {
    position: relative;
    overflow: hidden;
    width: 520px;
    height: 520px;
}

.modal-section .block.img img {
    position: absolute;
    max-width: inherit;
    height: 100%;
    width: auto;
    left: 50%;
    right: 0;
    transform: translateX(-50%);
}

/* Keyframes
   ========================================================================== */
@keyframes remodal-opening-keyframes {
    from {
        transform: scale(1.05);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes remodal-closing-keyframes {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.95);
        opacity: 0;
        filter: blur(0);
    }
}

@keyframes remodal-overlay-opening-keyframes {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes remodal-overlay-closing-keyframes {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.modal-header {
    height: 240px;
    position: relative;
}

.modal-header h3 {
    position: absolute;
    bottom: 0;
    background: rgba(0, 114, 188, 0.8);
    color: rgb(255, 255, 255);
    text-align: left;
    padding: 2rem 6.25%;
    width: 50%;
    letter-spacing: 1.6px;
}

.modal-header h3 span {
    font-size: 1rem;
    padding-bottom: 1rem;
    display: block;
}

.remodal.business-detail h4 {
    color: rgba(0, 114, 188, 1);
    font-size: 1.5rem;
    padding-top: 6.25%;
    padding-bottom: 2.08%;
}

.remodal.business-detail p {
    margin-bottom: 2.08%;
}

.remodal a {
    color: rgba(0, 114, 188, 1);
    text-decoration: underline;
}

.remodal.business-detail .modal-content {
    padding: 6.25%;
    line-height: 1.8rem;
}

.remodal.business-detail .lede {
    padding-bottom: 2rem;
}

.modal-header {
    background-size: cover;
}

.modal-header.business01 {
    background-image: url("../images/business/header-business01.jpg");
}

.modal-header.business02 {
    background-image: url("../images/business/header-business02.jpg");
}

.modal-header.business03 {
    background-image: url("../images/business/header-business03.jpg");
}

/*社員紹介 中身*/
.modal-profile {
    background: rgb(244, 244, 244);
}

.modal-section h4 {
    color: rgba(0, 114, 188, 1);
    font-size: 1.5rem;
    padding-bottom: 1rem;
    font-weight: bold;
}

.modal-profile.column-2 {
    padding: 6.25%;
   /* margin-bottom: calc(6.25% - 2.08%);*/
}

.modal-profile.column-2 .block dt {
    font-size: 0.75rem;
    font-weight: inherit;
    line-height: 1.2rem;
}

.modal-profile.column-2 .block span {
    color: rgb(42, 69, 146);
    display: block;
    font-size: 1rem;
    padding-bottom: 1rem;
    font-weight: bold;
}

.modal-section .block {
    padding: 0 6.25%;
    line-height: 1.8rem;
    width: 50%;
}

.modal-section .block p {
    margin-bottom: 2rem;
}

.modal-section .img {
    width: 520px;
    position: relative;
    overflow: hidden;
}

.modal-section img {
    position: absolute;
    left: 0;
}

.job-remodal .modal-content {
    padding: 2.08%;
}

.job-remodal .modal-content h4 {
    color: rgb(255, 255, 255);
    background: rgba(0, 114, 188, 1);
    padding: 1rem;
}

.private {background: rgb(244,244,244);justify-content: space-evenly;}
.private h3 {color: rgba(0, 114, 188, 1);font-size: 1.5rem;padding: 1rem 0;font-weight: bold;}
.private .block {padding:  6.25%;width: calc(100% - 320px);}
.private .block.left {padding-right: 2.08%;line-height: 1.8rem;}
.private .block.right {margin-left: 2.08%;
position: relative;
width: 320px;
height: 320px;
overflow: hidden;
padding: 0;margin: 6.25%;
text-align: center;}
.private .block.right img {position: absolute;
max-width: inherit;
height: 100%;
width: auto;
left: 50%;
right: 0;
transform: translateX(-50%);
margin: 6.25% auto;}


/*--------------------------------------------------------------
Media Queries
--------------------------------------------------------------*/
.pc {
    display: block;
}

.sp,
.sp-step-title .step-no {
    display: none;
}

.pc-br {
    display: block;
}

.sp-br {
    display: inline;
}

@media screen and (max-width:980px) {
    .pc-br {
        display: inline;
    }

    .sp-br {
        display: block;
    }

    .person .swiper {
        padding: 5% 15%;
        width: 100%;
    }

    .header.flex {
        line-height: 1rem;
    }

    .site-title span {
        font-size: 0.625rem;
    }

    .title span {
        font-size: 3rem;
    }

    .title {
        font-size: 1.125rem;
        line-height: 4rem;
    }

    .sub-title {
        font-size: 1.5rem;
    }

    .lede {
        padding: 8.33% 0;
    }

    .flex {
        line-height: 1.8rem;
    }

    .inner {
        padding: 0 6.25%;
    }

    .staff-detail .inner.article {
        padding: 0;
    }

    .pc,
    .pc.flex,
    .pc.main-visual {
        display: none;
    }

    .sp {
        display: block;
    }

    /*メインビジュアル*/
    .sp .main-visual {
        display: block;
        height: 30vh;
        background-size: cover;
    }

    .branding .logo {
        width: 84px;
    }

    .header .sp-nav {
        display: grid;
        grid-auto-flow: column;
        align-items: stretch;
    }

    .sp-nav {
        margin-left: auto;
    }

    .sp-entry {
        background: rgb(245, 170, 0);
        padding: 6.55%;
        color: rgb(255, 255, 255);
        white-space: nowrap;
        font-size: 0.65rem;
        text-align: center;
        display: grid;
        align-content: center;
    }

    .branding.flex,
    .header.flex {
        display: flex;
        justify-content: flex-start;
        line-height: 1rem;
    }

    .branding {
        padding: 0.5rem;
        width: calc(100% - 150px);
    }

    .top-menu.flex {
        display: none;
    }

    .sp-nav a,
    .sp-menu-toggle {
        width: 50px;
    }

    .flex {
        display: block;
    }

    .sp-menu-toggle {
        background-image: url("../images/svg/icon-menu.svg");
        background-color: rgb(79, 116, 190);
        display: flex;
        background-size: 20px;
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
    }

    .sp-menu-toggle.close {
        background-image: url("../images/svg/icon-close.svg");
        transition: transform 0.5s ease-in-out;
    }

    .sp-menu {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        bottom: 0;
        z-index: -1;
        display: none;
    }

    .sp-menu.open {
        background: rgb(79, 116, 190);
        z-index: 97;
        align-items: center;
    }

    .sp-body {
        overflow: hidden;
    }

    .sp-menu.open li a {
        background: rgb(79, 116, 190);
        display: block;
        color: rgb(255, 255, 255);
        padding: 6.55%;
        text-align: center;
        transition: 0s;
        position: relative;
    }

    .sp-menu.open li .grad27 {
        margin-top: 6.55%;
    }

    .sp-menu.open li a:hover {
        background: rgb(255, 255, 255, .25);
        transition: all 0.5s 0s ease;
    }

    .sub-title {
        margin: 1rem auto;
    }

    .column-2 .block,
    .column-3 .block,
    .recruit .flow dt,
    .recruit .flow dd

    /*.person img*/
    .person .column-2 .block,
    .section-header .title.left {
        width: 100%;
        display: block;
    }

 .business .column-2 .block, .private .block, .profile .block {
    width: 100%;
  }

    .sp-menu.open li.entry a {
        background: rgb(245, 170, 0);
        color: rgb(255, 255, 255);
    }

    .sp-menu.open li.entry a span {
        padding-right: 0.5rem;
    }

    .sp-menu.open li.entry a:hover {
        background: rgba(245, 170, 0, 0.95);
    }

    .sp-menu .inner {
        width: 90%;
        position: relative;
        z-index: 99;
    }

    .inner {
        padding: 6.25%;
    }

    .inner {
        margin: 0 auto;
        max-width: 1040px;
    }

    ul,
    ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    *,
    ::before,
    ::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
        box-sizing: border-box;
        border-style: solid;
        border-width: 0;
    }

    html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
    }

    .recruit .flow dd {
        border: none;
    }

    .entry .column-3 .block,
    .column-3.flex {
        padding: 8.33%;
    }

    .footer-entry .column-3 {
        margin: 1rem auto;
    }

    .footer-entry .column-3 .block {
        padding-top: 0;
    }

    .site-footer {
        font-size: 0.75rem
    }

    .business dd span {
        text-align: center;
    }

    .job .list li a::after {
        position: static;
        display: block;
    }

    .job .list li a::after {
        background-size: contain;
        width: 100%;
        background-position: right;
    }

    .person {
        background-position: 0 10%;
        background-size: 40vw;
    }

    .person::before {
        height: 100%;
        width: 100%;
        bottom: auto;
        right: auto;
    }

    .person {
        padding: 6.25% 0;
    }

    .person .column-2 .block {
        margin: 0 auto;
        margin-bottom: 2rem;
    }

    .concept .column-2 .block.message .title.left,
    .section-header .title.left {
        text-align: center;
        margin-bottom: 2rem;
    }

    .concept .column-2 .block.message {
        margin-bottom: 0rem;
        text-align: center
    }

    .business dt span {
        text-align: center;
    }

    .business {
        padding-top: 0;
    }

    .business-bg {
        margin: 0;
        background-position: 1% 1%;
        background-size: 50vw;
    }
    .sub-title,.business .introduction dd::after {
    margin: 1rem auto;
    }
    /*背景*/
    .business .introduction,
    .business,
    .welfare-bg,
    .key-word .section-header {
        background-size: 50vw;
    }
    .business .introduction {
        background-position: 95% 8%;
    }
    .welfare-bg {
        margin-top: 0;
    }
    .key-word::before {
        background-color: transparent;
    }

    .remodal {
        height: 95%;
        width: 95%;
    }

    .modal-navi .block span {
        display: none;
    }

    .modal-section .block.img {
        padding: 2rem 0;
        width: auto;
        height: auto;
    }

    .modal-header h3,
    .job-remodal dt,
    .job-remodal p {
        width: 100%;
    }

    .sp.modal-navi {
        position: relative;
        border-top: 0;
    }

    .sp.modal-navi .prev,
    .sp.modal-navi .next {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        border-top: 1px solid rgb(212, 212, 212);
    }

    .recommend-link {
        margin-bottom: 6.25%;
    }

    .business-type dt.active,
    .welfare dt.active {
        padding-bottom: 1rem;
    }

    .business-type dd,
    .welfare dd {
        display: none;
    }

    .business-type dl,
    .welfare dl {
        position: relative;
        margin-bottom: 1rem;
    }

    .toggle-open {
        bottom: .5rem;
        display: block;
        content: "";
        background-image: url("../images/newgrads/svg/tab-open.svg");
        background-position: center;
        background-size: 94px 24px;
        background-repeat: no-repeat;
        width: 90%;
        padding: 1.5rem;
        margin: 0 auto;
        height: 24px;
        border-top: 1px solid rgba(212, 212, 212);
        left: 0;
        right: 0;
        z-index: 1;
    }

    .toggle-open.active {
        background-image: url("../images/newgrads/svg/tab-close.svg");
    }

    .key-word .section-header {
        display: flex;
        flex-wrap: wrap;
    }

    /*社員紹介 中身*/
    .modal-section {
        display: flex;
        flex-wrap: wrap-reverse;
    }

    .modal-header h3 span {
        font-size: 0.8rem;
        padding-bottom: .5rem;
    }

    .key-word .section-header .title,
    .modal-section .block.img {
        margin: 0 auto;
        order: 1;
    }

    .modal-section .block.img {
        padding: 0;
        width: auto;
        height: auto;
    }

    .key-word .section-header .slider,
    .modal-section .block {
        margin: 0 auto;
        order: 2;
    }

    .column-3 dt,
    .recruit .flow li h3 {
        font-size: 1.2rem;
    }

    .recruit .flow dt br {
        display: none;
    }

    .recruit .flow .inline-list {
        display: block;
    }

    .main-slider .slider-item img {
        width: 100%;
    }

    .step-no,
    .staff-detail .profile img {
        display: none;
    }

    .sp-step-title {
        display: flex;
        align-items: center;
    }

    .sp-step-title .step-no {
        display: block;
        font-size: 2rem;
        padding-right: 8.33%;
        padding-bottom: 8.33%;
    }

    .recruit .flow li {
        padding: 8.33%;
    }

    .section-header .title {
        font-size: 1.25rem;
    }

    .footer-entry .section-header .title.left {
        margin: 0 auto;
        padding: 3rem 0;
        border: 0;
        line-height: 1.8rem;
        text-align: center;
    }

    .modal-close {
        left: 0;
        right: 0;
    }

    .modal-section img {
        position: static;
    }

    .modal-close {
        margin: 0 auto;
    }

    .staff-detail .article {
        padding: 0 6.25%;
    }

    .schedules {
        font-size: 0.875rem;
    }

.private .block.right {
    margin: 0;
  }
  .private .block.right img,.modal-section .block.img img {
    position: static;
    max-width: inherit;
    height: auto;
    width: 100%;
    transform: none;
    margin: 0 auto;
    padding: 6.25%;
  }

  .private .block.left {
    padding-right: 6.25%;
  }
    .modal-section .block.img img {
        padding: 0;
    }

    .job-remodal dd {
        width: 100%;
    }

    .page-header {
        height: auto;
        background-image: none !important;
    }

    .page-header .page-title {
        position: static;
        background-color: rgb(79, 116, 190);
    }

    .schedules dl {
        padding: 6.25%;
    }

    .recruit .flow li .entry-link a {
        margin: 1rem 0;
        display: block;
        width: 100%;
    }

    .schedules dd strong {
        display: block;
        margin-right: 0;
    }

    .footer-entry .column-3 .block {
        width: 100%;
        padding: 2.78%;
    }

    .section-header {
        margin: 0;
    }

    .system {
        background-position: 0 1%;
    }

    .system-bg::before,
    .business-bg::before {
        content: "";
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

    .anchor-link {
        padding: 2vh;
    }

    #business.anchor-link {
        background: rgba(239, 246, 252, 1);
    }

    .system.anchor-link {
        padding: 0;
        margin: 0;
    }

    .section-header {
        padding-top: 6.25%;
    }

    .slider,
    .slider-item {
        height: 50vw;
    }

    .entry-group.flex {
        display: flex;
    }

    .recruit .flow li .entry-group {
        width: 100%;
    }
}

@media screen and (max-width:420px) {

    .slider,
    .slider-item {
        height: 200px;
    }

    .person dd {
        padding: 0.5rem 0;
        line-height: 1rem;
    }

    .modal-profile.column-2 .block dt {
        line-height: 1rem;
    }

    .concept .column-2 .block.slider {
        height: 100vw;
    }

    .concept .column-2 .slider-item {
        height: 100vw;
    }

    .welfare dl span {
        height: auto;
        margin-top: 1rem;
    }
}

/*座談会バナー******************************************/
.discussion-banner {
    margin-bottom: 6.25%;
    padding-top: 8.33%;
}

.discussion-banner .column-2 {
    overflow: hidden;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(212, 212, 212);
}

.discussion-banner a:hover {
 color:#fff;
background:#0372BC;
}

.discussion-banner .block {
    align-self: center;
    width: 50%;
    padding: 6.25%;
    line-height: 3rem;

}

.discussion-banner .thumb {
    max-width: 50%;
    height: auto;
    object-fit: cover;
}

.discussion-banner a:hover .thumb {
  transform: scale(1.1);
}

/*.discussion-banner .title span {
    color: rgb(255, 255, 255);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.discussion-banner .title {
    font-size: 1.125rem;
    
}*/

.discussion-banner p {
    line-height: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom:1rem;
}

.discussion-banner .view-more {
    width: 94px;
}

.discussion-modal .modal-header {
    height: 400px;
}

.discussion-modal .discussion-lede {
    background: rgb(244, 244, 244);
    padding: 6.25%;
    line-height: 2rem;
}

.discussion-modal .discussion-lede .text {
    padding-bottom: 1rem;
}

.discussion-modal .discussion-lede .profile.flex {
    justify-content: space-between;
}

.discussion-modal .discussion-lede .note {
    text-align: right;
    color: rgba(102, 102, 102, 1);
    font-size: 0.75rem;
}

.discussion-lede .profile dl {
    padding: 2.08%;
    max-width: 25%;
}

.discussion-lede .profile dt {
    text-align: center;
    color: #666666;
    font-size: 0.75em;
    font-weight: normal;
    line-height: 1.2rem;
}

.discussion-lede .profile dt img {

    font-weight: normal;
}

.discussion-lede .profile dd {
    font-size: 0.875em;
    padding-top: 1rem;
    line-height: 1.75em;
}

.discussion-modal .detail {
    padding: 0 6.25%;
    line-height: 2rem;
}

.discussion-modal .detail h4 {
    color: rgba(0, 114, 188, 1);
    font-size: 1.5rem;
    padding: 1rem 0;
    font-weight: bold;
}

.discussion-modal .initial {
    font-weight: bold;
    display: block;
    font-size: 1rem;
    padding: 8.33%;
    color: #111111;
}

.discussion-modal .interview-header {
    padding: 6.25%;
}

.discussion-modal .detail .interviewer {
    padding: 1rem 0;
    font-weight: bold;
}

.discussion-modal .detail .initial {
    padding: 0;
}

.discussion-modal .detail .icon {
    max-width: 50px;
    width: 100%;
    margin-right: 2.08%;
    text-align: center;
    line-height: 1rem;
}

.discussion-modal .detail .icon img {
    max-width: 50px;
    width: 50px;
}

.discussion-modal .detail .speaker {
    padding-bottom: 2.08%;
    justify-content: flex-start;
    align-items: flex-start;
}

.discussion-modal .detail .speaker p {
    display: inline-flex;
    align-self: center;
}

@media screen and (max-width: 980px) {

    .discussion-modal {
        font-size: 0.875rem;
    }

    .discussion-modal .modal-header {
        height: auto;
    }

    .modal-header h3 {
        background: rgb(0, 114, 188);
        width: 100%;
        position: static;
    }

    .discussion-modal .interview-header {
        padding: 0;
    }

    .discussion-lede .profile dl {
        max-width: 100%;
        border-bottom: 1px solid #CCC;
        padding: 6.33% 0;
    }

    .discussion-lede .profile dt {
        display: flex;
        align-items: center;
    }

    .discussion-lede .profile dt img {
        max-width: 100px;
    }

    .discussion-modal .discussion-lede .note {
        padding: 1rem 0;
    }

    .discussion-modal .detail h4 {
        font-size: 1.25rem;
    }

    .discussion-modal .discussion-lede,
    .flex,
    .discussion-modal .detail .interviewer {
        line-height: 1.53125rem;
    }

    .discussion-lede .profile dt .department {
        text-align: left;
        padding: 0 8.33%;
        align-items: center;
    }

    .discussion-modal .detail .speaker {
        align-items: flex-start;
        display: flex;
        padding: 6.33% 0;
    }

    .discussion-modal .detail .icon {
        margin-right: 1rem;
    }

    .discussion-modal .initial {
        padding: 8.33% 0;
    }

    .discussion-banner .column-2 {
        display: flex;
        flex-wrap: wrap;
    }

    .discussion-banner .thumb {
        max-width: 100%;
        margin: 0;
    }

    .discussion-banner .block {
        width: 100%;
        margin: 0 auto;
        order: 2;
    }

    .discussion-banner img {
        margin: 0 auto;
        margin-top: 1rem;
        order: 1;
    }

    .discussion-banner .title.left {
        text-align: center;
        line-height: 3rem;
    }

    .discussion-banner .view-more {
        display: block;
    }
.recruit .flow dd a,.footer-entry .column-2 dd a {
    display: flex;
}


}