/* 
    Created on : Sep 13, 2021, 3:52:06 PM
    Author     : ano
*/

.top-index {
    position: relative;
    padding-bottom: 45%!important;
}
.top-index img {
    position: absolute;
    top: 22px;
    right: 50%;
    transform: translateX(50%);
    object-fit: cover;
}
.top-img-cover img.top-text {
    position: absolute;
    top: 51%;
    right: 50%;
    transform: translateX(50%);
    width: 50%;
}
.top-about-wrap {
    padding: 2em 0 3em!important;
    position: relative;
}
.top-about {
    padding: 0!important;
}
.top-about .about-title-top {
    display: block;
}
.top-about .about-title-top h1 {
    color: #ffffff;
    text-align: center;
}
.top-about p {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    color: #ffffff!important;
    font-size: 16px;
    margin-top: 0;
}
.top-about-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 25px;
    border-color: #78c022 transparent transparent transparent;
    line-height: 0px;
    _border-color: #78c022 #000000 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    position: absolute;
    bottom: -24px;
    right: 50%;
    transform: translateX(50%);
}
#index-top.accent {
    position: absolute;
    left: 0;
    top: 50px;
    width: 100px;
    z-index: 1;
}
#yellow-bubble1.accent {
    position: absolute;
    left: 50px;
    bottom: -25px;
    width: 268px;
}
#accent-dot-orange.accent {
    position: absolute;
    right: -20%;
    top: 195px;
    width: 100px;
}
#green-dot.accent {
    position: absolute;
    left: 3%;
    top: 220px;
    width: 130px;
}
#green-strip.accent {
    position: absolute;
    left: 0;
    bottom: -260px;
    width: 43px;
}
#triangle-orange.accent {
    position: absolute;
    right: 9%;
    top: -65px;
    width: 135px;
}
#dot-blue.accent {
    position: absolute;
    right: 0;
    top: 60px;
    width: 160px;
}
#dot-blue2.accent {
    position: absolute;
    left: 0;
    bottom: -750px;
    width: 160px;
}
#yellow-bubble2.accent {
    position: absolute;
    left: 82%;
    top: 4px;
    width: 170px;
}
#triangle-blue.accent {
    position: absolute;
    right: 0;
    bottom: -177px;
    width: 85px;
}
.top-college {
    padding-bottom: 3em!important;
}
.college-title-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.college-title-top h1 {
    text-align: center;
    color: #1d964e;
}
.college-title-top img.bracket-l {
    width: 10px;
    position: relative;
    top: -8px;
    left: -1%;
}
.college-title-top img.bracket-r {
    width: 10px;
    position: relative;
    bottom: -8px;
    right: -1%;
}
.top-college p {
    color: #1d964e;
    margin-bottom: 2em;
    font-size: 16px;
}
.top-college-img {
    display: flex;
    justify-content: center;
}
.college-box-content .top-college-img img {
    padding: 1em 2em;
}
.college-box-wrap {
    display: flex;
}
.college-box-wrap.bottom {
    display: flex;
    padding: 0 0 2em;
}
.college-box:nth-of-type(odd) {
    padding-right: 0.5em;
    padding-left: 0;
    padding-bottom: 1em;
    padding-top: 0;
    display: flex;
}
.college-box:nth-of-type(even) {
    padding-right: 0;
    padding-left: 0.5em;
    padding-bottom: 1em;
    padding-top: 0;
    display: flex;
}
.college-box .college-box-header {
    padding: 0;
    background-color: #78c022;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}
.college-box .college-box-header h3 {
    color: #ffffff;
    text-align: center;
    margin: 0;
    padding: 0.7em 1em;
    font-size: 16px;
}
.college-box .college-box-content {
    width: 100%;
    padding: 0;
}
.college-box .college-box-content p {
    color: #434141;
    margin: 0;
    padding: 0 2em 1.5em;
}
.top-criteria {
    padding: 3em 0 4.5em!important
}
img.criteria-img1 {
    position: absolute;
    z-index: 1;
    width: 247px;
    left: -14%;
    top: -58px;
}
img.criteria-img2 {
    position: absolute;
    z-index: 1;
    width: 200px;
    left: 88%;
    bottom: -35px;
}
.criteria-title-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.criteria-title-top img.bracket-l {
    width: 10px;
    position: relative;
    top: -8px;
    left: -1%;
}
.criteria-title-top img.bracket-r {
    width: 10px;
    position: relative;
    bottom: -8px;
    right: -1%;
}
.criteria-title-top h1 {
    text-align: center;
    color: #1d964e;
}
.top-criteria p {
    color: #1d964e;
    margin: 0;
    padding: 3em 6em;
    background-color: #ffffff;
    font-size: 16px;
}
.top-workflow {
    padding: 3em 0 0!important;
}
.workflow-wrap {
    margin-top: 2em;
    margin-bottom: 2em;
}
.workflow-title-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.workflow-title-top img.bracket-l {
    width: 10px;
    position: relative;
    top: -8px;
    left: -1%;
}
.workflow-title-top img.bracket-r {
    width: 10px;
    position: relative;
    bottom: -8px;
    right: -1%;
}
.workflow-title-top h1 {
    text-align: center;
    color: #1d964e;
}
.work-time {
    position: absolute;
    background-color: #1d964e;
    top: -100px;
    left: -10;
    transform: translateX(-20%);
    border-radius: 50%;
}
.work-time p {
    color: #ffffff;
    margin: 0;
    padding: 20px 10px;
    font-weight: bold;
    font-size: 20px;
}
.workflow-top-list.top {
    padding: 2.5em 2.5em 1em!important;
}
.workflow-top-list {
    padding: 1.2em 2.5em 1em!important;
    display: flex;
    align-items: center;
}
.workflow-top-img img {
    border-radius: 10px;
}
.workflow-top-txt {
    padding: 0!important;
    padding-left: 2em!important;
}
.workflow-top-txt h3 {
    font-size: 20px;
    color: #1d964e;
    margin-top: 0;
    margin-bottom: 0;
}
.workflow-top-txt p {
    font-size: 16px;
    color: #282728;
    margin-top: 5px;
}
.people-top-wrap {
    padding: 1em 0 4em!important;
}
.people-title-top {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3em;
}
.people-title-top img.bracket-l {
    width: 10px;
    position: relative;
    top: -8px;
    left: -1%;
}
.people-title-top img.bracket-r {
    width: 10px;
    position: relative;
    bottom: -8px;
    right: -1%;
}
.people-title-top h1 {
    text-align: center;
    color: #1d964e;
    font-size: 28px;
}
.people-box-wrap {
    display: flex;
}
.people-box-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.people-box-header img {
    width: 25px;
    height: 20px;
    position: relative;
    left: -5%;
}
.people-box-header h3 {
    font-size: 16px;
    color: #1d964e;
}
.people-box:nth-of-type(odd) {
    padding-left: 0!important;
    padding-right: 0.5em!important;
    padding-bottom: 1em!important;
    padding-top: 0!important;
}
.people-box:nth-of-type(even) {
    padding-right: 0!important;
    padding-left: 0.5em!important;
    padding-bottom: 1em!important;
    padding-top: 0!important;
}
.people-box .people-box-content {
    border-radius: 10px;
    padding: 1em 2.5em;
}

.people-box .people-box-content p {
    font-size: 16px;
    color: #434141;
}
.people-box-content .people-top-img img {
    width: 100%;
}
.details-top-wrap {
    padding: 2em 0 3em!important;
}
.details-title-top {
    display: flex;
    align-items: center;
    justify-content: center;
}
.details-title-top h1 {
    text-align: center;
    color: #1d964e;
    font-size: 28px;
}
.details-item-wrap {
    display: flex;
    padding: 1em .5em .7em!important;
}
.details-item {
    padding: 1em 0;
    margin-left: 0.5em;
    margin-right: 0.5em;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    width: 24%;
}
.details-item.red {
    margin-left: 0;
}
.details-item.yellow {
    display: flex;
    margin-right: 0;
    margin-left: 0.5em;
}
.details-item p {
    color: #ffffff;
    margin: auto;
    font-size: 16px;
    text-align: center;
}
.red {
    background-color: #f53d8c;
}
.green {
    background-color: #78c022;
}
.blue {
    background-color: #3a88d6;
}
.yellow {
    background-color: #fcb23b;
}
.purple {
    background-color: #644ca4;
}
.yellow.new-positions{
    width: 13em;
    height: 4em;
}
.purple.new-positions p{
    margin-top: 0.7em;
}
.details-item-txt p {
    color: #434141;
    text-align: center;
    font-size: 16px;
}
.voice-item-top {
    min-height: 140px;
}
.voice-top-wrap {
    padding: 3em 0 2em!important;
}
.voice-title-top {
    display: flex;
    align-items: center;
    justify-content: center;
}
.voice-title-top h1 {
    text-align: center;
    color: #1d964e;
    font-size: 28px;
}
.voice-title-top img.bracket-l {
    width: 10px;
    position: relative;
    top: -8px;
    left: -1%;
}
.voice-title-top img.bracket-r {
    width: 10px;
    position: relative;
    bottom: -8px;
    right: -1%;
}
.voice-item-wrap {
    display: block;
    padding: 2em 0 1em!important;
}
.voice-item-top {
    display: flex;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.voice-item-top .voice-img-wrap {
    position: relative;
    width: 125px;
}
.voice-img{
    border-top-left-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.voice-item-top .voice-person {
    border-top-right-radius: 10px;
    padding: 2.5em 3em!important;
    width: calc(100% - 125px);
}
.voice-name p.title {
    font-size: 14px;
}
.voice-name p, .voice-comment p {
    color: #ffffff;
    margin: auto;
    font-size: 16px;
    font-weight: bold;
}
.voice-comment p {
    margin-top: 2em;
}
.voice-name p {
    color: #ffffff;
    margin: auto;
    font-size: 20px;
    font-weight: bold;
}
.voice-item-bottom {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-bottom: 2em;
}
.voice-item-bottom p {
    color: #191919;
    font-size: 16px;
    padding: 2em 3em;
    margin: auto;
}
.hiring-top-wrap {
    padding: 0 0 4em!important
}
.hiring-title-top {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hiring-title-top h1 {
    text-align: center;
    color: #1d964e;
    font-size: 28px;
}
.hiring-title-top img.bracket-l {
    width: 10px;
    position: relative;
    top: -8px;
    left: -1%;
}
.hiring-title-top img.bracket-r {
    width: 10px;
    position: relative;
    bottom: -8px;
    right: -1%;
}
.hiring-item-wrap {
    display: flex;
    padding: 1.5em 0.5em!important;
    min-height: 11em;
}
/*.hiring-item-wrap.bottom {
    display: flex;
    padding: 1.5em 0 5em!important;
}*/
.details-item-wrap a:hover, .hiring-item-wrap a:hover{
    opacity: .6;
    transition: 500ms ease 0s;
}
.hiring-wrap {
    display: flex;
    align-items: center;
    border-radius: 10px;
}
.hiring-title h3 {
    font-size: 24px;
    text-align: center;
    color: #1d964e;
}
.hiring-wrap .padding2 {
    padding-right: 2em;
}
.hiring-txt {
    color: #191919;
    font-size: 16px;
}
.hiring-content {
    padding-left: 3%;
}
.hiring-btn-wrap {
    margin-bottom: 1em;
    padding-left: 0!important;
}
.hiring-button {
    display: flex;
}
.hiring-item {
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    width: 24%;
}
.hiring-item.yellow {
    display: flex;
}
.hiring-item p {
    color: #ffffff;
    margin: auto;
    font-size: 16px;
    text-align: center;
}
.hiring-step {
    position: absolute;
    background-color: #1d964e;
    top: -4px;
    left: 2.5%;
    transform: translateX(-20%);
    border-radius: 50%;
}
.hiring-step p.step {
    color: #ffffff;
    margin: 0 auto -5px;
    padding: 3px 18px 0;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}
.hiring-step p.num {
    color: #ffffff;
    margin: 0;
    padding: 0 5px 5px;
    font-weight: bold;
    font-size: 28px;
    text-align: center;
}
.hiring-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #1d964e transparent transparent transparent;
    line-height: 0px;
    _border-color: #1d964e #000000 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    position: absolute;
    bottom: -8px;
    right: 50%;
    transform: translateX(50%);
}

@media only screen and (max-width: 1024px) {
    .top-index {
        padding-bottom: 42%!important;
    }
    .top-img-cover .top-text {
        top: 220px;
        right: 47%;
        width: 37%;
    }
    #yellow-bubble1.accent {
        left: 19%;
        bottom: 0;
        width: 260px;
    }
    img.criteria-img2 {
        left: 82%;
    }
    #index-top.accent {
        left: 0;
        top: 34px;
        width: 82px;
    }
    #accent-dot-orange.accent {
        right: -6.5%;
        top: 225px;
        width: 90px;
    }
    #accent-dot-orange.accent {
        right: -6.5%;
        top: 225px;
        width: 90px;
    }
    #index-top.accent {
        left: 0;
        top: 34px;
        width: 82px;
    }
    #index-top.accent {
        left: 0;
        top: 34px;
        width: 82px;
    }
    #dot-blue.accent {
        position: absolute;
        right: 0;
        top: 175px;
        width: 90px;
    }
    #dot-blue2.accent {
        bottom: -750px;
        width: 110px;
    }
    .yellow.new-positions{
        height: 4.5em;
    }
}

@media only screen and (max-width: 768px) {
    .college-title-top h1{
        text-align: left;
    }
    .college-title-top img.bracket-l{
        top: -37px;
    }
    .details-item-txt p{
        text-align: left;
    }
    .details-item-wrap{
        width: 100% !important;
    }
    .details-item-wrap .details-item {
        display: flex;
    }
    .details-top-wrap .details-item-txt{
        width: 100%;
    }
    .work-time {
        top: -100px;
    }
    .pad-left-hiring h3{
        padding-left: 2em;
    }
    .hiring-wrap .hiring-btn-wrap{
        width: 100%;
    }
    .hiring-wrap .hiring-txt.first p{
        padding-right: 24%;
    }
    #yellow-bubble2.accent {
        left: 82%;
        width: 145px;
    }
    .voice-top-wrap .voice-item-wrap {
        width: 100%;
    }
    .voice-img img {
        object-fit: cover;
        /*height: -webkit-fill-available;*/
    }
    .people-box .people-box-content {
        padding: 1em 1.5em;
    }
    .people-top-wrap .people-box-wrap{
        width: 100%;
    }
    #dot-blue2.accent {
        width: 9%;
        bottom: -707px;
    }
    .hiring-top-wrap .hiring-item-wrap {
        width: 100%;
    }
    .hiring-step {
        left: 2.5%;
    }
    .college-box-wrap.bottom {
        width: 100%;
    }
    #dot-blue.accent {
        right: -16px;
        top: 46px;
        width: 14%;
    }
    #green-strip.accent {
        width: 4%;
    }
    .workflow-wrap .workflow,
    .top-criteria .criteria-desc{
        width: 100%;
    }
    img.criteria-img1 {
        width: 189px;
        left: -3%;
        top: -69px;
    }
    img.criteria-img2 {
        width: 148px;
        left: 83%;
        top: -252px;
    }
    #green-dot.accent {
        left: 0%;
        top: 44px;
        width: 92px;
    }
    .top-college .college-box-wrap{
        width: 100%;
    }
    .top-img-cover .top-text {
        top: 165px;
    }
    #accent-dot-orange.accent {
        position: absolute;
        right: -5%;
        top: 217px;
        width: 100px;
    }
    #triangle-orange.accent {
        position: absolute;
        right: 9%;
        top: -50px;
        width: 110px;
    }
    /*    .voice-img {
            position: relative;
            padding-bottom: 120%!important;
        }*/
    .voice-top-wrap {
        padding: 3em 0 0em!important;
    }
    #dot-blue.accent {
        right: 0;
        top: 7px;
        width: 11%;
    }
    #accent-dot-orange.accent {
        right: 0;
        top: 227px;
        width: 90px;
    }
    #yellow-bubble1.accent {
        bottom: -12px;
        width: 175px;
    }
    .top-about-wrap {
        padding: 1em 0 3em!important;
    }
    .top-img-cover img.top-text {
        position: absolute;
        bottom: -277px;
        right: 50%;
        transform: translateX(50%);
        width: 55%;
    }
    .workflow-top-txt {
        padding-left: 1em!important;
    }
    #triangle-blue.accent {
        bottom: -149px;
        width: 66px;
    }
    .yellow.new-positions{
        height: 4.5em;
        width: 15.2em;
    }
}

@media only screen and (max-width: 40.063em) {
    .top-index {
        padding-bottom: 65%!important;
    }
    .top-index img {
        top: 15px;
    }
    .top-img-cover img.top-text {
        right: 50%;
        width: 85%;
        top: 45%;
    }
    .top-about-wrap {
        padding: 1em 16px 1.5em!important;
    }
    #accent-dot-orange.accent {
        right: 0;
        top: 310px;
        width: 70px;
    }
    .college-title-top img.bracket-l {
        top: -25px;
    }
    .college-title-top img.bracket-r{
        bottom: -25px;
    }
    #index-top.accent {
        left: 0;
        top: 15px;
        width: 50px;
        z-index: 1;
    }
    #yellow-bubble1.accent {
        left: 0;
        bottom: -17px;
        width: 160px;
    }
    .top-about-wrap{
        padding-top: 1em!important;
    }
    .top-college .college-box-wrap {
        flex-wrap: wrap;
    }
    .college-box:nth-of-type(odd){
        padding-right: 0;
        padding-bottom: 1em;
    }
    .college-box:nth-of-type(even){
        padding-left: 0;
        padding-bottom: 1em;
    }
    #green-dot.accent {
        left: -25%;
    }
    #triangle-orange.accent {
        width: 85px;
        top: -40px;
    }
    .top-criteria .criteria-desc p.top {
        color: #1d964e;
        margin: 10em auto 0;
        padding: 3em 1.5em 0;
        background-color: #ffffff;
        font-size: 16px;
    }
    .top-criteria .criteria-desc p.bottom {
        color: #1d964e;
        margin: 0 auto 3em;
        padding: 1.5em 6em 3em 1.5em;
        background-color: #ffffff;
        font-size: 16px;
    }
    .college-box-wrap.bottom {
        padding-bottom: 2em;
    }
    img.criteria-img1 {
        width: 165px;
        left: -2%;
        top: 53px;
    }
    img.criteria-img2 {
        width: 125px;
        left: unset;
        right: -13px;
        top: unset;
        bottom: -5px;
    }
    .workflow-top-list {
        padding: 2em 2em 1em!important;
        display: block;
    }
    .workflow-top-list .workflow-top-txt{
        padding-left: 0 !important;
    }
    .work-time {
        top: -23px;
        left: 0;
    }
    #green-strip.accent {
        width: 5%;
        top: 30px;
    }
    .workflow-top-img {
        padding: 0!important;
    }
    .workflow-top-txt h3 {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .workflow-top-txt p {
        margin-top: 1em;
    }
    #dot-blue.accent {
        right: -31px;
        top: -24px;
        width: 20%;
    }
    .people-top-wrap .people-box-wrap {
        flex-wrap: wrap;
    }
    .people-box:nth-of-type(odd){
        padding-right: 0!important;
    }
    .people-box:nth-of-type(even){
        padding-right: 0!important;
        padding-left: 0!important;
    }
    .people-box .people-box-content p {
        font-size: 16px;
    }
    .college-box-wrap.bottom,.details-item-wrap,.hiring-wrap{
        flex-wrap: wrap;
    }
    .details-item-wrap .details-item {
        margin-bottom: .8em;
        margin-left: 0;
        margin-right: 0;
        min-height: 60px;
    }
    /*    .voice-person {
            padding: 1em!important;
        }*/
    .voice-item-bottom p {
        padding: 2em 1.5em;
    }
    #yellow-bubble2.accent {
        left: 70%;
        width: 33%;
        top: 35px;
    }
    .hiring-top-wrap .hiring-item-wrap.first{
        padding-top: 1.5em !important;
    }
    .hiring-top-wrap .hiring-step.first{
        top: -2px;
    }
    .hiring-step {
        left: 8%;
    }
    .hiring-title h3 {
        margin-bottom: 0;
        font-size: 20px;
    }
    .hiring-wrap .hiring-txt.first p {
        padding-right: 0;
        margin-left: 1em;
        margin-right: 1em;
    }
    .hiring-txt p {
        margin-top: .5em;
    }
    .hiring-item {
        display: flex;
    }
    .br-sm{
        display: none;
    }
    .workflow-top-list.top {
        padding: 2em 2em 0.5em!important;
        display: block;
    }
    .college-box .college-box-content p {
        padding: 2em 1.5em 1.5em;
        padding-top: 0;
    }
    .college-box-content .top-college-img img {
        padding: 1em 0em;
        width: 88.5%;
    }
    .details-item-txt p {
        margin-left: 16px;
        margin-right: 16px;
    }
    .voice-top-wrap {
        padding: 2em 16px 0!important;
    }
    .voice-title-top h1 {
        font-size: 20px;
    }
    .hiring-title-top h1 {
        font-size: 20px;
    }
    .hiring-wrap .hiring-btn-wrap {
        padding-left: 1em !important;
        padding-right: 0.5em;
    }
    .hiring-wrap .padding2 {
        padding-left: 2.2em;
    }
    #triangle-blue.accent {
        bottom: -87px;
        width: 45px;
    }
    .people-title-top h1 {
        font-size: 20px;
    }
    .details-title-top h1 {
        font-size: 20px;
    }
    #dot-blue2.accent {
        width: 25%;
        bottom: -886px;
        z-index: -1;
    }
    .top-college {
        padding-bottom: 0em!important;
        padding-right: 16px!important;
        padding-left: 16px!important;
    }
    .top-criteria {
        padding: 2em 16px 3.5em!important
    }
    .top-workflow {
        padding: 1.5em 16px 0!important;
    }
    .workflow-wrap {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }
    .people-title-top {
        padding-bottom: 1.5em;
    }
    .people-top-wrap {
        padding: 0 16px!important;
    }
    .details-top-wrap {
        padding: 1em 0!important;
    }
    .hiring-top-wrap {
        padding: 0 0 1.5em!important;
    }
    .voice-item-wrap {
        padding: 1.5em 0 1em!important;
    }
    .voice-item-bottom {
        margin-bottom: 1.5em;
    }
    .college-title-top img.bracket-l {
        width: 10px;
        position: relative;
        top: -27px;
        left: -4px;
    }
    .college-title-top img.bracket-r {
        width: 10px;
        position: relative;
        bottom: -22px;
        right: 0;
    }
    .details-item-wrap {
        flex-wrap: wrap;
        padding-left: 16px!important;
        padding-right: 16px!important;
    }
    .hiring-top-wrap .hiring-item-wrap {
        padding-left: 16px!important;
        padding-right: 16px!important;
    }
    .voice-person {
        padding: 1.5em 2em!important;
    }
    .voice-item-top .voice-person {
        padding: 1.5em!important;
    }
    .voice-comment p {
        margin-top: 1em;
        font-size: 14px;
    }
    .yellow.new-positions{
        width: 12.3em;
    }
}

@media only screen and (max-width: 375px) {
    .yellow.new-positions{
        width: 10.5em;
    }
}

@media only screen and (max-width: 320px) {
    #accent-dot-orange.accent {
        right: 0;
        top: 405px;
        width: 70px;
    }
    .top-img-cover .top-text {
        top: 105px;
    }
    img.criteria-img1 {
        top: 50px;
        width: 145px;
    }
    img.criteria-img2 {
        left: 62%;
        top: -224px;
        width: 110px;
    }
    .voice-img {
        border-top-left-radius: 7px;
        padding-bottom: 10%!important;
    }
    #accent-dot-orange.accent {
        top: 370px;
        width: 65px;
    }
    #green-dot.accent {
        left: -25%;
        top: 375px;
    }
    #triangle-orange.accent {
        width: 75px;
        top: -30px;
    }
    .top-criteria {
        padding: 1.5em 16px 0.5em!important;
    }
    .top-criteria .criteria-desc p.top {
        margin: 8em auto 0;
    }
    .voice-person {
        border-top-right-radius: 7px;
        padding: 1.5em 1em!important;
    }
    .voice-name p.title {
        font-size: 12px;
    }
    .voice-name p {
        font-size: 16px;
    }
    .voice-comment p {
        font-size: 14px;
    }
    .yellow.new-positions{
        width: 8.6em;
    }
}