@charset "UTF-8";



/* contents
------------------------------------------------- */
#contents::before {
	content: '';
    width: 100%;
    height: 23.75em;
    background-color: #F5F5F5;
    position: absolute;
    left: 0;
    bottom: 0;
}
#contents.top {
    padding-top: 11em;
}
#contents.top::before {
    height: 40em;
    z-index: 2;
}
@media only screen and (max-width:750px){
#contents::before {
    height: 58em;
}
#contents.top {
    padding-top: 15vw;
}
#contents.top::before {
    height: 40em;
}   
}


/* mainvisual
------------------------------------------------- */
.mainvisual {
    height: 53.0625em;
    padding-top: 36.875em;
    margin: 0.625em 0 6.25em;
    box-sizing: border-box;
    position: relative;
}
.mainvisual .inner {
    max-width: inherit;
    padding: 0 6.6875em;
    z-index: 2;
}
.mainvisual h1 {
    width: 17em;
    height: 7em;
    background-color: #FFF800;
    border-radius: 0.55em;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #2A51C3;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 1em;
    margin-bottom: 1.5em;
    box-sizing: border-box;
}
.mainvisual h1::before {
    content: '';
    width: 13.55em;
    height: 1px;
    border-bottom: 1px dotted #2A51C3;
    position: absolute;
    left: 50%;
    bottom: 1em;
    margin-left: -6.775em;
}
.mainvisual h1 span {
    padding-left: 0.25em;
}
.mainvisual h2 {
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: #fff;
    position: absolute;
    left: 6.875rem;
    top: -8.875rem;
}
.mainvisual h3 {
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #fff;
    margin-right: 2em;
    position: relative;
}
.mainvisual h3::before {
    content: '';
    width: 1px;
    height: 80%;
    background-color: #00ADF4;
    position: absolute;
    left: 5.7em;
    top: 12.5%;
}
.mainvisual h3 span {
    display: block;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #00ADF4;
    padding-top: 0.5em;
}
.mainvisual p {
    line-height: 1.57;
    color: #fff;
}
.mainvisual .photo {
    width: 100%;
    height: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2.5em 2.5em 0 0;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 1;
}
.mainvisual .photo {
    background-image: url("../img-new/career/career01/mainvisual.jpg");
}
.mainvisual .photo::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    left: 0;
    top: 0;
}
.career02 .mainvisual h1 {
    background-color: #2A51C3;
    color: #FFF800;
}
.career02 .mainvisual h1::before {
    border-bottom: 1px dotted #FFF800;
}
.career02 .mainvisual .photo {
    background-image: url("../img-new/career/career02/mainvisual.jpg");
}
.top .mainvisual {
    height: 8.75em;
    position: sticky;
    top: 15em;
    padding: 0;
    margin: 0;
}
.top .mainvisual .inner {
    padding: 0 2.625em;
}
.top .mainvisual h1 {
    width: auto;
    height: auto;
    font-weight: 700;
    line-height: 1.45;
    color: #1F1F1F;
    text-align: left;
    display: block;
    background: url("../common-new/img/icon_tit2.png") left center no-repeat rgba(0,0,0,0);
    background-size: 1.088em auto;
    border-radius: 0;
    padding: 0 0 0 1.45em;
    margin: 0;
}
.top .mainvisual h1::before {
    display: none;
}
.top .mainvisual h1 span {
    display: block;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #2A51C3;
    padding: 0;
}
@media only screen and (max-width:750px){
.mainvisual {
    height: 120vw;
    padding: 0;
    margin: 0 0 40vw;
}
.mainvisual .inner {
    height: 100%;
    padding: 0;
}
.mainvisual h1 {
    width: 57vw;
    height: 4.5em;
    padding-bottom: 1em;
    margin-bottom: 0;
    position: absolute;
    left: 0;
    bottom: 5vw;
    z-index: 2;
}
.mainvisual h1::before {
    width: 45vw;
    margin-left: -22.5vw;
}
.mainvisual h1 span {
    font-size: 9vw;
    padding-left: 0.25em;
}
.mainvisual h2 {
    font-size: 6.4vw;
    left: 0;
    top: 11.25em;
    white-space: nowrap;
}
.mainvisual .box {
    width: 100vw;
    background-color: #001E76;
    padding: 3em 0 1.5em 3em;
    margin-left: -6vw;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: -20vw;
}
.mainvisual h3 {
    font-size: 6vw;
    margin-right: 2em;
}
.mainvisual h3::before {
    content: '';
    width: 1px;
    height: 80%;
    background-color: #00ADF4;
    position: absolute;
    left: 5.7em;
    top: 12.5%;
}
.mainvisual h3 span {
    font-size: 3.2vw;
    padding-top: 0;
}
.mainvisual p {
    font-size: 3.466vw;
    line-height: 1.5;
}
.career01 .mainvisual .photo {
    background-position: 60% top;
}
.career02 .mainvisual .photo {
    background-position: 65% top;
}
.top .mainvisual {
    height: 24.3vw;
    top: 31.5vw;
    padding: 0;
    margin: 0;
}
.top .mainvisual .inner {
    height: auto;
    padding: 0;
}
.top .mainvisual h1 {
    font-size: 6.4vw;
    width: auto;
    height: auto;
    font-weight: 700;
    line-height: 1.45;
    color: #1F1F1F;
    text-align: left;
    display: block;
    background: url("../common-new/img/icon_tit2.png") left center no-repeat rgba(0,0,0,0);
    background-size: 1.088em auto;
    border-radius: 0;
    padding: 0 0 0 1.45em;
    margin: 0;
    position: static;
}
.top .mainvisual h1::before {
    display: none;
}
.top .mainvisual h1 span {
    font-size: 3.466vw;
    display: block;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #2A51C3;
    padding: 0;
}
}


/* cont1
------------------------------------------------- */
.cont1 {
    padding-bottom: 17.5em;
    position: relative;
    z-index: 3;
}
.cont1 .con {
    width: 50%;
}
.cont1 .con a {
    display: block;
    position: relative;
}
.cont1 .con a .photo {
    width: 100%;
    height: 40.625em;
    background: url("../img-new/career/photo1.jpg") center top no-repeat;
    background-size: cover;
    border-radius: 2.5em 0 0 0;
    position: relative;
    overflow: hidden;
}
.cont1 .con.con2 a .photo {
    background-image: url("../img-new/career/photo2.jpg");
    border-radius: 0 2.5em 0 0;
}
.cont1 .con a .photo::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.06);
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.4s;
}
.cont1 .con a .box {
    width: 33.875em;
    height: 13em;
    background-color: #fff;
    border-radius: 1em;
    padding: 7.2em 2em 1.2em;
    box-sizing: border-box;
    position: absolute;
    right: 4em;
    bottom: -4.6875em;
}
.cont1 .con.con2 a .box {
    right: auto;
    left: 4em;
}
.cont1 .con a .box h2 {
    width: 16.25em;
    height: 6.75em;
    background-color: #FFF800;
    border-radius: 0.625em;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-align: center;
    color: #2A51C3;
    position: absolute;
    left: -0.625em;
    top: -0.625em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cont1 .con.con2 a .box h2 {
    background-color: #2A51C3;
    color: #FFF800;
}
.cont1 .con a .box h2 span {
    padding-left: 0.25em;
}
.cont1 .con a .box h3 {
    width: 7.3em;
    font-weight: 500;
    letter-spacing: 0.05em;
    position: relative;
}
.cont1 .con a .box h3::before {
    content: '';
    width: 1px;
    height: 80%;
    background-color: #00ADF4;
    position: absolute;
    right: 0;
    top: 10%;
}
.cont1 .con a .box h3 span {
    display: block;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #00ADF4;
}
.cont1 .con a .box p {
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.57;
    position: absolute;
    left: 10.5em;
    top: 5.4em;
}
.cont1 .con a .box div {
    width: 3.875em;
    height: 3.875em;
    border: 0.1em solid #00ADF4;
    border-radius: 50%;
    position: absolute;
    right: 1.375em;
    top: 1.375em;
    transition: 0.4s;
}
.cont1 .con a .box div::before {
    content: '';
    width: 2em;
    height: 1.75em;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231.263%22%20height%3D%2227.348%22%20viewBox%3D%220%200%2031.263%2027.348%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_71%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2071%22%20transform%3D%22translate(0%200.558)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_110%22%20data-name%3D%22%E3%83%91%E3%82%B9%20110%22%20d%3D%22M446.571%2C1298.3l13.821%2C12.439-13.821%2C13.821%22%20transform%3D%22translate(-430.218%20-1298.295)%22%20fill%3D%22none%22%20stroke%3D%22%2300adf4%22%20stroke-width%3D%221.5%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_111%22%20data-name%3D%22%E3%83%91%E3%82%B9%20111%22%20d%3D%22M466.3%2C1302.224H436.125%22%20transform%3D%22translate(-436.125%20-1289.786)%22%20fill%3D%22none%22%20stroke%3D%22%2300adf4%22%20stroke-width%3D%221.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') center right no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -0.875em 0 0 -1em;
    transition: 0.4s;
}
@media only screen and (min-width:751px){
.cont1 .con a:hover .photo::before {
    background-color: rgba(0,0,0,0.5);
}
.cont1 .con a:hover .box div {
    background-color: #00ADF4;
}
.cont1 .con a:hover .box div::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231.263%22%20height%3D%2227.348%22%20viewBox%3D%220%200%2031.263%2027.348%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_71%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2071%22%20transform%3D%22translate(0%200.558)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_110%22%20data-name%3D%22%E3%83%91%E3%82%B9%20110%22%20d%3D%22M446.571%2C1298.3l13.821%2C12.439-13.821%2C13.821%22%20transform%3D%22translate(-430.218%20-1298.295)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_111%22%20data-name%3D%22%E3%83%91%E3%82%B9%20111%22%20d%3D%22M466.3%2C1302.224H436.125%22%20transform%3D%22translate(-436.125%20-1289.786)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
    margin-left: -0.75em;
}
}
@media only screen and (max-width:750px){
.cont1 {
    padding-bottom: 10vw;
}
.cont1 .con {
    width: 100%;
    margin-bottom: 20vw;
}
.cont1 .con a .photo {
    height: 100vw;
    border-radius: 2.5em 2.5em 0 0;
}
.cont1 .con.con2 a .photo {
    border-radius: 2.5em 2.5em 0 0;
}
.cont1 .con a .box {
    width: 90vw;
    height: 9em;
    padding: 5em 1.5em 0;
    right: 5vw;
    bottom: -10vw;
}
.cont1 .con.con2 a .box {
    left: 5vw;
}
.cont1 .con a .box h2 {
    width: 16.25em;
    height: 5em;
}
.cont1 .con a .box h2 span {
    font-size: 12vw;
}
.cont1 .con a .box h3 {
    font-size: 4.8vw;
    width: 5.85em;
}
.cont1 .con a .box h3 span {
    font-size: 2.8vw;
}
.cont1 .con a .box p {
    font-size: 3.733vw;
    left: 10em;
    top: 5.5em;
}
.cont1 .con a .box div {
    width: 2.4em;
    height: 2.4em;
    right: 2em;
    top: 1em;
}
.cont1 .con a .box div::before {
    content: '';
    width: 1.25em;
    height: 1.09375em;
    margin: -0.546875em 0 0 -0.625em;
}
}


/* cont2
------------------------------------------------- */
.cont2 {
    padding-bottom: 6.25em;
}
.cont2 .inner {
    padding: 0 8.3125em;
}
.cont2 .photo {
    width: 49%;
    height: 100%;
    position: sticky;
    top: 8em;
}
.cont2 .photo img {
    border-radius: 1.25em;
}
.cont2 .photo p {
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.cont2 .con {
    width: 45.5%;
}
.cont2 .con h3 {
    font-weight: 400;
    line-height: 1.275;
    letter-spacing: 0.06em;
    color: #00ADF4;
    padding-bottom: 1.65em;
}
.cont2 .con h3.turn {
    padding: 2.5em 0 0.25em;
    position: relative;
}
.cont2 .con h3.turn::before {
    content: '';
    width: 1px;
    height: 1.8125em;
    background-color: #00ADF4;
    position: absolute;
    left: 0;
    top: 0.35em;
}
.cont2 .con h4 {
    font-weight: 700;
    line-height: 1.54;
    letter-spacing: 0.05em;
    padding-bottom: 0.75em;
}
.cont2 .con p {
    line-height: 2.14;
    padding-bottom: 1em;
}
.cont2 .con dl {
    display: inline-block;
    background-color: #00ADF4;
    border-radius: 1.1875em;
    color: #fff;
    padding: 0.75em 1.1875em;
    margin: 0 10em 1.75em 0;
    position: relative;
}
.cont2 .con dl.bo {
    margin-top: 3.75em;
    position: relative;
}
.cont2 .con dl.bo::before {
    content: '';
    width: 1px;
    height: 2.75em;
    background-color: #00ADF4;
    position: absolute;
    left: 0;
    top: -3.75em;
}
.cont2 .con dl.bo2 {
    margin-top: 5.625em;
}
.cont2 .con dl.bo2::before {
    height: 4.55em;
    top: -5.625em;
}
.cont2 .con dl.bo3 {
    margin: 0 0 6.75em;
}
.cont2 .con dl.bo3::before {
    height: 4.55em;
    top: auto;
    bottom: -5.25em;
}
.cont2 .con dl dt {
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.05em;
    padding-bottom: 0.35em;
}
.cont2 .con dl dt span {
    display: inline-block;
    width: 4em;
    line-height: 1.58;
    background-color: #FFF800;
    border-radius: 0.215em;
    color: #1F1F1F;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    margin-left: 1.5em;
}
.cont2 .con dl dd {
    font-weight: 500;
    line-height: 1.57;
}
@media only screen and (max-width:750px){
.cont2 {
    padding-bottom: 20vw;
}
.cont2 .inner {
    padding: 0;
}
.cont2 .photo {
    display: none;
}
.cont2 .photo img {
    border-radius: 1.25em;
}
.cont2 .con {
    width: 100%;
}
.cont2 .con h3 {
    font-size: 9vw;
    padding-bottom: 1em;
}
.cont2 .con h3.turn {
    padding: 2em 0 0.25em;
}
.cont2 .con h3.turn::before {
    height: 1.5em;
    top: 0.35em;
}
.cont2 .con h4 {
    font-size: 6.4vw;
}
.cont2 .con p {
    font-size: 3.733vw;
    line-height: 1.75;
    padding-bottom: 1em;
}
.cont2 .con dl {
    margin: 0 0 1.25em;
}
.career02 .cont2 .con .con1-1 dl {
    margin-right: 5em;
}
.cont2 .con dl.bo {
    margin-top: 3em;
}
.cont2 .con dl.bo::before {
    height: 2em;
    top: -3em;
}
.cont2 .con dl.bo2 {
    margin-top: 4.75em;
}
.cont2 .con dl.bo2::before {
    height: 3.5em;
    top: -4.75em;
}
.cont2 .con dl.bo3 {
    margin: 0 0 5.5em;
}
.cont2 .con dl.bo3::before {
    height: 3.5em;
    top: auto;
    bottom: -4.5em;
}
.cont2 .con dl dt span {
    font-size: 3.2vw;
}
.cont2 .con dl dd {
    font-size: 3.466vw;
}
.cont2 .con img {
    border-radius: 1.25em;
    margin-bottom: 1.25em;
}
}


/* cont3
------------------------------------------------- */
.cont3 .con h3 {
    color: #2A51C3;
}
.cont3 .con h3.turn::before {
    background-color: #2A51C3;
}
.cont3 .con dl {
    background-color: #2A51C3;
}
.cont3 .con dl.bo::before {
    background-color: #2A51C3;
}


/* cont4
------------------------------------------------- */
.cont4 {
    padding-bottom: 5em;
}
.cont4 .inner {
    padding: 0 8.3125em;
}
.cont4 .sec {
    background-color: #FFF800;
    border-radius: 0.625em;
    padding: 2.375em;
}
.cont4 .box {
    background-color: #fff;
    border-radius: 0.625em;
    padding: 2.6875em;
    box-shadow: 0 0 0.375em 0 rgba(0,0,0,0.16);
}
.cont4 .box .tit {
    width: 15.375em;
    height: 15.375em;
    background-color: #2A51C3;
    border-radius: 0.5em;
    padding-top: 2.8em;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
}
.cont4 .box .tit h3 {
    font-weight: 500;
    padding-bottom: 3.5em;
    position: relative;
}
.cont4 .box .tit h3::before {
    content: '';
    width: 1px;
    height: 2.4em;
    background-color: #fff;
    position: absolute;
    left: 50%;
    bottom: 0.5em;
}
.cont4 .box .tit h3 span {
    display: block;
    font-weight: 500;
    color: #FFF800;
    letter-spacing: 0.05em;
}
.cont4 .box .tit h4 {
    font-weight: 700;
    line-height: 1.65;
}
.cont4 .box .con {
    width: 67.5%;
}
.cont4 .box .con h5 {
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 0.5em;
}
.cont4 .box .con h5 span {
    background: linear-gradient(#fff 0, #fff 65%, #FFF800 65%);
}
.cont4 .box .con p {
    line-height: 2.14;
}
.cont4 .btn {
    width: 14em;
    margin: 5.25em auto 0;
}
.cont4 .btn a {
    display: block;
    width: 100%;
    background-color: #fff;
    border: 0.125em solid #001E76;
    border-radius: 0.5625em;
    line-height: 2.5;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cont4 .btn a::before {
    content: '';
    width: 140%;
    height: 120%;
    background-color: #001E76;
    position: absolute;
    left: -20%;
    top: -10%;
    transform: skewX(20deg);
    z-index: 1;
    transition: 0.4s;
}
.cont4 .btn a span {
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: 0.4s;
}
.career02 .cont4 .sec {
    background-color: #2A51C3;
}
@media only screen and (min-width:751px){
.cont4 .btn a:hover::before {
    left: 120%;
    top: -10%;
    z-index: 1;
}
.cont4 .btn a:hover span {
    color: #001E76;
}
}
@media only screen and (max-width:750px){
.cont4 .inner {
    padding: 0;
}
.cont4 .sec {
    padding: 1.25em;
}
.cont4 .box {
    padding: 1.5em;
}
.cont4 .box .tit {
    width: 100%;
    height: 60.8vw;
    padding-top: 2em;
}
.cont4 .box .tit h3 {
    font-size: 3.466vw;
}
.cont4 .box .tit h3 span {
    font-size: 4.8vw;
}
.cont4 .box .tit h4 {
    font-size: 4.8vw;
}
.cont4 .box .con {
    width: 100%;
    margin-top: 7vw;
}
.cont4 .box .con h5 {
    font-size: 5.33vw;
    line-height: 1.55;
    margin-bottom: 1em;
}
.cont4 .box .con p {
    font-size: 3.733vw;
    line-height: 1.75;
}
.cont4 .btn {
    margin: 15vw auto 0;
}
.cont4 .btn a {
    background-color: #001E76;
}
.cont4 .btn a::before {
    display: none;
}
}