@charset "UTF-8"; @media screen and (min-width: 768px),print { .seo_bread_list { margin-bottom: 18px; color: #fff; } .seo_bread_list a { color: #fff; } .seo_bread_list img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } #rbicon01 { position: absolute; top: 10px; left: 0; } #rbicon02 { position: absolute; top: 270px; right: 5.7rem; } #rbicon03 { position: absolute; top: 793px; right: 0px; } #rbicon04 { position: absolute; top: 1442px; left: 0; } #rbicon05 { position: absolute; top: 2560px; left: 11.3rem; } #rbicon06 { position: absolute; top: 2667px; right: 20rem; } .recruit-main-titlebox { background: url(../images/career-path/h1.jpg)no-repeat top center; } #contentsmain { margin: 0 auto 110px; position: relative; text-align: center; } #contentsmain .inner-Box { margin: 0 auto; position: relative; padding: 10px 0 0; } #contentsmain .inner-Box p.text { font-size: 1.6rem; line-height: 3; font-weight: 500; letter-spacing: 0.32rem; margin-bottom: 30px; position: relative; color: #fff; } #contents01 { margin: 0 auto 123px; position: relative; } #contents01 .inner-Box { margin: -2.6rem auto 0; position: relative; padding: 0 4rem; max-width: 1180px; } #contents01 .inner-Box p.text { font-size: 1.6rem; line-height: 3; font-weight: 400; letter-spacing: 0.32rem; margin-bottom: 0.5rem; position: relative; color: #fff; text-align: center; } #contents01 .inner-Box p.text2 { font-size: 1.4rem; line-height: 3; font-weight: 400; letter-spacing: 0.28rem; margin-bottom: 5.1rem; position: relative; color: #fff; text-align: center; } #contents01 .inner-Box ul.c-passlist { display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; } #contents01 .inner-Box ul.c-passlist li { position: relative; border: 2px solid #000000; border-radius: 10px; background: #fff; width: 31.5%; margin-right: 2.7%; padding: 3.9rem 3.5rem 2.8rem 3.5rem; } #contents01 .inner-Box ul.c-passlist li:nth-child(3n) { margin-right: 0px; } #contents01 .inner-Box ul.c-passlist li:nth-child(1) figure.img { position: absolute; right: -20px; bottom: -59px; width: 15rem; } #contents01 .inner-Box ul.c-passlist li:nth-child(2) figure.img { position: absolute; top: -61px; left: -28px; width: 13.1rem; } #contents01 .inner-Box ul.c-passlist li:nth-child(3) figure.img { position: absolute; to;bottom: -45px; right: -17px; width: 14rem; } #contents01 .inner-Box ul.c-passlist figure.img img { width: 100%; height: auto; } #contents01 .inner-Box .tth { min-height: 8.5rem; } #contents01 .inner-Box h3 { font-size: 2rem; line-height: 1.5; font-weight: 700; letter-spacing: 0.4rem; margin-bottom: 0px; position: relative; text-align: center; } #contents01 .inner-Box h3::before { content: ""; width: 3rem; height: 3px; background: #1788A0; display: block; position: absolute; bottom: -1.2rem; left: 50%; transform: translateX(-50%); } #contents01 .inner-Box span.f-en { font-size: 1.4rem; font-weight: bold; letter-spacing: 0; position: relative; left: -1.8rem; display: inline-block; } #contents01 .passBox { margin: 0 -1.1rem 0 auto; position: relative; background: url(../images/career-path/line.svg)no-repeat top 1rem left 0.9rem; } #contents01 .passBox::before { content: ""; display: block; width: 1.4rem; height: 1.4rem; position: absolute; bottom: -3px; left: 2px; background: #fff; } #contents01 .passBox p.ltext { font-size: 1.8rem; line-height: 1.5; font-weight: 700; letter-spacing: 0.36rem; margin-bottom: 19.3px; position: relative; color: #1788A0; padding: 0 0 0 3.7rem; } #contents01 .passBox p.ltext::before { content: ""; display: block; width: 1.4rem; height: 1.4rem; border: 2px solid #000; border-radius: 50%; background: #fff; position: absolute; top: 0.6rem; left: 0; } #contents01 .passBox ul li { position: relative; } #contents01 .passBox ul li:nth-child(3n) { margin-right: 0px; } #contents01 .passBox h3 { font-size: 2.4rem; line-height: 1.75; font-weight: 400; letter-spacing: 0.48rem; margin-bottom: 0px; position: relative; } #contents01 .passBox span.f-en { } #contents02 {margin: 0 auto;position: relative;padding: 0 4rem 55rem;max-width: 1180px;} #contents02 .inner-Box { margin: -27px auto 60px auto; position: relative; } #contents02 .inner-Box p.text { font-size: 1.6rem; line-height: 3; font-weight: 400; letter-spacing: 0.32rem; margin-bottom: 4.8rem; position: relative; color: #fff; text-align: center; } #contents02 .inner-Box ul.slist { display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; } #contents02 .inner-Box ul.slist li { position: relative; border: 2px solid #000000; border-radius: 10px; background: #fff; width: 31.5%; margin-right: 2.7%; padding: 3.9rem 3.5rem 2.3rem 3.5rem; } #contents02 .inner-Box ul.slist li:nth-child(3n) { margin-right: 0px; } #contents02 .inner-Box h3 { font-size: 2.2rem; line-height: 1.5; font-weight: 700; letter-spacing: 0.44rem; margin-bottom: 2.9rem; position: relative; text-align: center; } #contents02 .inner-Box h3::before { content: ""; width: 3rem; height: 3px; background: #1788A0; display: block; position: absolute; bottom: -1.2rem; left: 50%; transform: translateX(-50%); } #contents02 .inner-Box p.ltext { font-size: 1.8rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.36rem; margin-bottom: 1.4rem; position: relative; padding: 0 0 0 1.7rem; } #contents02 .inner-Box p.ltext::before { content: ""; display: block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #1788A0; position: absolute; top: 1rem; left: 0.4rem; } #contents02 .inner-Box2 { margin: 0 auto 24px; position: relative; } #contents02 .inner-Box2 ul.slist2 { display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 158px; } #contents02 .inner-Box2 ul.slist2 li { position: relative; } #contents02 .inner-Box2 ul.slist2 li:nth-child(1) { margin-right: 3.4%; width: 27.5%; top: 4.1rem; } #contents02 .inner-Box2 ul.slist2 li:nth-child(2) { margin-right: 3.4%; width: 16%; top: 13.7rem; } #contents02 .inner-Box2 ul.slist2 li:nth-child(3) { margin-right: 3.4%; width: 18.6%; } #contents02 .inner-Box2 ul.slist2 li:nth-child(4) { margin-right: 0px; width: 27.5%; top: 12.5rem; } #contents02 .inner-Box2 ul.slist2 figure img { width: 100%; border-radius: 10px; } #contents02 .inner-Box2 h4 { font-size: 3rem; line-height: 2.05; font-weight: 700; letter-spacing: 0.6rem; margin-bottom: 1.5rem; position: relative; text-align: center; color: #fff; } #contents02 .inner-Box2 span.line { display: block; line-height: 1; text-align: center; } #contents02 .inner-Box2 span.line img { } #contents02 .inner-Box3 { margin: 0 auto; position: relative; } #contents02 .inner-Box3 ul.slist3 { border: 2px solid #000000; border-radius: 10px; background: #EAF9FC; max-width: 834px; margin: 0 auto 28px; padding: 5.1rem 3.1rem 3.5rem 11.1rem; } #contents02 .inner-Box3 ul li { position: relative; } #contents02 .inner-Box3 p.ltext2 { font-size: 1.8rem; line-height: 2; font-weight: 500; letter-spacing: 0.36rem; margin-bottom: 1.8rem; position: relative; } #contents02 .inner-Box3 p.ltext2::before { content: ""; display: block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #1788A0; position: absolute; top: 1.6rem; left: -1.4rem; } #contents02 .inner-Box3 p.text2 { font-size: 1.6rem; line-height: 3; font-weight: 400; letter-spacing: 0.32rem; margin-bottom: 30px; position: relative; color: #FFFFFF; text-align: center; } } @media screen and (min-width: 768px) and ( max-width:1919px) { } @media screen and (max-width: 767px) { .recruit-main-titlebox { background: url(../images/career-path/sp-h1.jpg)no-repeat top center; background-size: 100% auto; height: 86vw; } .seo_bread_list { margin-bottom: -15.3vw; color: #fff; z-index: 3; position: relative; top: -0.9vw; } .seo_bread_list a { color: #fff; } .seo_bread_list img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } #contentsmain { margin: 0 auto 11.33vw; position: relative; text-align: center; padding-top: 10vw; } #contentsmain .inner-Box { margin: 0 5.4vw; position: relative; padding: 3.87vw 0 0; } #contentsmain .inner-Box p.text { font-size: 3.73vw; line-height: 2.5; font-weight: 500; letter-spacing: 0.75vw; margin-bottom: 8.0vw; position: relative; color: #fff; text-align: left; } #contents01 {margin: 0 auto 10vw;position: relative;} #contents01 .inner-Box { margin: -2.4vw auto 0; position: relative; padding: 0 5.4vw; } #contents01 .inner-Box p.text { font-size: 3.73vw; line-height: 2.5; font-weight: 400; letter-spacing: 0.75vw; margin-bottom: 1.7vw; position: relative; color: #fff; text-align: left; } #contents01 .inner-Box p.text2 { font-size: 3.20vw; line-height: 2.5; font-weight: 400; letter-spacing: 0.64vw; margin-bottom: 8.8vw; position: relative; color: #fff; text-align: left; } #contents01 .inner-Box ul.c-passlist { } #contents01 .inner-Box ul.c-passlist li { position: relative; border: 0.5vw solid #000000; border-radius: 3vw; background: #fff; width: 100%; padding: 10.3vw 10.3vw 8vw; margin-bottom: 15vw; } #contents01 .inner-Box ul.c-passlist li:nth-child(3n) { margin-right: 0px; } #contents01 .inner-Box ul.c-passlist li:nth-child(1) figure.img { position: absolute; right: -2vw; bottom: -11.5vw; width: 35vw; } #contents01 .inner-Box ul.c-passlist li:nth-child(2) figure.img { position: absolute; top: -16.3vw; left: -8.6vw; width: 34vw; } #contents01 .inner-Box ul.c-passlist li:nth-child(3) figure.img {position: absolute;to;bottom: -12vw;right: -6vw;width: 34vw;} #contents01 .inner-Box ul.c-passlist figure.img img { width: 100%; height: auto; } #contents01 .inner-Box .tth { } #contents01 .inner-Box h3 { font-size: 5.33vw; line-height: 1.5; font-weight: 700; letter-spacing: 1.07vw; margin-bottom: 7.7vw; position: relative; text-align: center; } #contents01 .inner-Box h3::before { content: ""; width: 8vw; height: 1vw; background: #1788A0; display: block; position: absolute; bottom: -3.4vw; left: 50%; transform: translateX(-50%); } #contents01 .inner-Box span.f-en { font-size: 3.73vw; font-weight: bold; letter-spacing: 0; position: relative; left: -7.4vw; display: inline-block; } #contents01 .passBox { margin: 0 -1.1rem 0 auto; position: relative; background: url(../images/career-path/line.svg)no-repeat top 4vw left 0vw; background-size: 0.7vw; } #contents01 .inner-Box ul.c-passlist .passBox::before {content: "";display: block;width: 3vw;height: 5vw;position: absolute;bottom: 0vw;left: -0.2vw;background: #fff;} #contents01 .inner-Box ul.c-passlist li:nth-child(1) .passBox::before { content: ""; display: block; width: 3vw; height: 12vw; position: absolute; bottom: 0vw; left: -0.2vw; background: #fff; } #contents01 .passBox p.ltext { font-size: 4.80vw; line-height: 1.5; font-weight: 700; letter-spacing: 0.96vw; margin-bottom: 5.1vw; position: relative; color: #1788A0; padding: 0 0 0 7.4vw; margin-right: -1vw; } #contents01 .passBox p.ltext::before { content: ""; display: block; width: 3.73vw; height: 3.73vw; border: 0.7vw solid #000; border-radius: 50%; background: #fff; position: absolute; top: 1.4vw; left: -2.1vw; } #contents01 .passBox ul li { position: relative; } #contents01 .passBox ul li:nth-child(3n) { margin-right: 0px; } #contents01 .passBox h3 { font-size: 2.4rem; line-height: 1.75; font-weight: 400; letter-spacing: 0.48rem; margin-bottom: 0px; position: relative; } #contents01 .passBox span.f-en { } #contents02 {position: relative;margin-bottom: 18.2vw;} #contents02 .inner-Box {margin: -2vw auto 11vw auto;position: relative;} #contents02 .inner-Box p.text {font-size: 3.73vw;line-height: 2.5;font-weight: 400;letter-spacing: 0.75vw;position: relative;color: #fff;margin: 0 5.5vw 5.9vw;} #contents02 .inner-Box ul.slist { margin: 0 5.2vw; } #contents02 .inner-Box ul.slist li {position: relative;border: 0.53vw solid #000000;border-radius: 2.67vw;background: #fff;width: 100%;padding: 7.5vw 6.4vw;margin-bottom: 5.1vw;} #contents02 .inner-Box ul.slist li:nth-child(3n) { margin-right: 0.0vw; } #contents02 .inner-Box h3 {font-size: 5.33vw;line-height: 1.5;font-weight: 700;letter-spacing: 1.07vw;margin-bottom: 7.8vw;position: relative;text-align: center;} #contents02 .inner-Box h3::before { content: ""; width: 3rem; height: 0.8vw; background: #1788A0; display: block; position: absolute; bottom: -1.2rem; left: 50%; transform: translateX(-50%); } #contents02 .inner-Box p.ltext {font-size: 4.27vw;line-height: 1.5;font-weight: 500;letter-spacing: 0.85vw;margin-bottom: 2.7vw;position: relative;padding: 0 0 0 4.1vw;} #contents02 .inner-Box p.ltext::before {content: "";display: block;width: 1.87vw;height: 1.87vw;border-radius: 50%;background: #1788A0;position: absolute;top: 2.4vw;left: 0.4vw;} #contents02 .inner-Box2 { margin: 0 auto 6.4vw; position: relative; } #contents02 .inner-Box2 ul.slist2 {display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;width: 100vw;height: 88vw;margin-bottom: 4.2vw;} #contents02 .inner-Box2 ul.slist2 li {position: absolute;} #contents02 .inner-Box2 ul.slist2 li:nth-child(1) {width: 48.8vw;top: -0.1vw;left: 5.6vw;} #contents02 .inner-Box2 ul.slist2 li:nth-child(2) {width: 31.6vw;top: 16.9vw;left: 59.6vw;} #contents02 .inner-Box2 ul.slist2 li:nth-child(3) {width: 36.3vw;top: 37.9vw;left: 12.6vw;} #contents02 .inner-Box2 ul.slist2 li:nth-child(4) {width: 42.6vw;top: 61.9vw;left: 52.3vw;} #contents02 .inner-Box2 ul.slist2 figure img { width: 100%; border-radius: 2.67vw; } #contents02 .inner-Box2 h4 {font-size: 5.33vw;line-height: 2;font-weight: 700;letter-spacing: 1.07vw;margin-bottom: 3vw;position: relative;text-align: center;color: #fff;} #contents02 .inner-Box2 span.line {display: block;line-height: 1;text-align: center;margin: 0 auto -2.9vw;width: 1.3vw;overflow: hidden;height: 17vw;} #contents02 .inner-Box2 span.line img { } #contents02 .inner-Box3 {margin: 0 5.7vw;position: relative;} #contents02 .inner-Box3 ul.slist3 {border: 0.53vw solid #000000;border-radius: 2.67vw;background: #EAF9FC;margin: 0 auto 6.37vw;padding: 7.5vw 3.1vw 3.5vw 10.1vw;} #contents02 .inner-Box3 ul li { position: relative; } #contents02 .inner-Box3 p.ltext2 {font-size: 4.27vw;line-height: 1.5;font-weight: 500;letter-spacing: 0.85vw;margin-bottom: 4vw;position: relative;} #contents02 .inner-Box3 p.ltext2::before {content: "";display: block;width: 1.87vw;height: 1.87vw;border-radius: 50%;background: #1788A0;position: absolute;top: 2.4vw;left: -4vw;} #contents02 .inner-Box3 p.text2 {font-size: 3.73vw;line-height: 2.5;font-weight: 400;letter-spacing: 0.75vw;margin-bottom: 8.0vw;position: relative;color: #FFFFFF;} }