@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@font-face {
font-family: "AlteDIN";
src: url(//mabp.co.jp/dist/fonts/recruit_2024/din1451alt.ttf) format("truetype");
font-weight: 400;
font-style: normal;
} *,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
line-height: 1.6;
font-weight: 500;
background: #fff;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, button, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
li, dd {
list-style-type: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
img {
border: none;
vertical-align: bottom;
width: 100%;
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
}
@media (hover: hover) {
a:hover {
opacity: 0.7;
}
} body {
color: #1a1a1a;
font-family: "Noto Sans JP", sans-serif;
}
body.is-active {
position: fixed;
width: 100%;
height: 100%;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
} @media (max-width: 767px) {
.pc {
display: none !important;
}
} @media (min-width: 768px) {
.sp {
display: none !important;
}
} .inner {
width: 1234px;
max-width: 100%;
margin: 0 auto;
padding: 0 16px;
}
.w2000 {
width: 2000px;
padding: 0;
} .section-title {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.24em;
text-align: center;
}
.section-title span {
display: block;
line-height: 1;
font-size: min(7rem, 6.5104166667vw);
letter-spacing: 0.08em;
font-family: "AlteDIN", sans-serif;
color: #005dab;
margin-bottom: 0.3em;
font-weight: normal;
}
@media (max-width: 767px) {
.section-title {
font-size: min(2.8rem, 3.7333333333vw);
}
.section-title span {
font-size: min(11rem, 14.6666666667vw);
margin-bottom: 0.1em;
letter-spacing: 0.02em;
}
} .swiper-button-next,
.swiper-button-prev {
width: 50px;
}
.swiper-button-next::after,
.swiper-button-prev::after {
content: "";
}
@media (max-width: 767px) {
.swiper-button-next,
.swiper-button-prev {
width: min(50px, 6.6666666667vw);
}
}
.swiper-button-prev {
background: url(//mabp.co.jp/img/recruit_2024/top/btn_prev.webp) no-repeat center center/contain;
}
.swiper-button-next {
background: url(//mabp.co.jp/img/recruit_2024/top/btn_next.webp) no-repeat center center/contain;
} header {
position: relative;
padding: 18px 0;
background: #fff;
}
@media (max-width: 767px) {
header {
padding: 10px 0;
}
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
width: min(138px, 13.0208333333vw);
}
@media (max-width: 767px) {
.header-logo {
width: min(195px, 26vw);
}
}
.header-nav {
width: calc(100% - min(138px, 13.0208333333vw));
}
@media (max-width: 767px) {
.header-nav {
display: none;
}
}
.header-menu {
display: flex;
justify-content: end;
}
.header-menu li {
text-align: center;
padding: 0 1em;
}
.header-menu li:not(:last-child) {
position: relative;
}
.header-menu li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(15deg);
width: 1px;
height: 90%;
background: #c3c3c3;
}
.header-menu li a {
font-size: min(1rem, 1.3020833333vw);
font-weight: 400;
letter-spacing: 0.06em;
color: #337dbc;
}
.header-menu li a span {
display: block;
line-height: 1;
font-size: min(1.7rem, 1.6927083333vw);
letter-spacing: 0.22em;
font-weight: 700;
color: #1a1a1a;
font-family: "AlteDIN", sans-serif;
}
@media (max-width: 999px) {
.header-menu li {
padding: 0 10px;
}
}
.drawer-icon {
display: none;
transition: transform 0.5s ease 0s;
}
@media (max-width: 767px) {
.drawer-icon {
display: block;
}
}
.drawer-icon.is-active .drawer-icon__bar1 {
transform: rotate(-45deg);
top: 8px;
background: #fff;
}
.drawer-icon.is-active .drawer-icon__bar2 {
display: none;
}
.drawer-icon.is-active .drawer-icon__bar3 {
transform: rotate(45deg);
top: 8px;
background: #fff;
}
.drawer-icon__bars {
width: min(60px, 8vw);
height: 20px;
display: block;
position: relative;
z-index: 400;
}
.drawer-icon__bar1,
.drawer-icon__bar2,
.drawer-icon__bar3 {
position: absolute;
width: min(60px, 8vw);
height: 2px;
background: #1a1a1a;
top: 0;
left: 0;
}
.drawer-icon__bar1 {
top: 0;
transition: transform 0.3s;
}
.drawer-icon__bar2 {
top: 8px;
}
.drawer-icon__bar3 {
top: 16px;
transition: transform 0.3s;
}
.drawer-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
background: rgba(26, 26, 26, 0.9);
padding: 14% 20px 0;
z-index: 299;
transform: translateX(105%);
transition: transform 0.5s ease 0s;
overflow-y: auto;
overscroll-behavior: contain; }
.drawer-content.is-active {
transform: translateX(0);
}
.drawer-menu li {
padding: 2.7em 0;
border-bottom: 1px solid #c3c3c3;
position: relative;
}
.drawer-menu li::after {
content: "";
position: absolute;
top: 50%;
right: 3em;
transform: translateY(-50%);
background: url(//mabp.co.jp/img/recruit_2024/top/icon_arrow03.webp) no-repeat center center/contain;
width: min(40px, 5.2083333333vw);
aspect-ratio: 40/20;
}
.drawer-menu li a {
display: block;
font-size: min(2.6rem, 3.4666666667vw);
text-decoration: none;
text-align: center;
color: #337dbc;
}
.drawer-menu li a span {
display: block;
color: #fff;
font-size: min(4.6rem, 6.1333333333vw);
letter-spacing: 0.12em;
}
.drawer-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(51, 51, 51, 0.8);
z-index: 298;
display: none;
}
.drawer-background.is-active {
display: block;
} .mv {
background: url(//mabp.co.jp/img/recruit_2024/top/mv_bg.webp) no-repeat center center/cover;
width: 100%;
aspect-ratio: 2000/800;
padding-top: min(100px, 5vw);
max-height: 750px;
}
@media (max-width: 767px) {
.mv {
background: url(//mabp.co.jp/img/recruit_2024/top/mv_bg_sp.webp) no-repeat center center/cover;
aspect-ratio: 750/830;
padding-top: min(95px, 12.6666666667vw);
}
}
.mv .inner {
height: 100%;
padding: 0 46px;
position: relative;
}
.mv-heading {
display: inline-block;
text-align: center;
}
.mv-heading h2 {
width: min(600px, 35vw);
}
.mv-heading p.head_text {
width: min(400px, 30.5vw);
margin: 6% auto 0;
}
.mv-heading p.head_logo {
width: min(290px, 23.5vw);
margin: 15% auto 0;
}
.mv-name {
position: absolute;
bottom: 50px;
right: min(30px, 5vw);
}
.mv-name p {
color: #fff;
font-size: min(16px, 4vw);
font-weight: 400;
line-height: 1.4;
text-align: right;
}
@media (max-width: 767px) {
.mv-heading {
display: block;
}
.mv-heading h2 {
width: min(568px, 75.7333333333vw);
margin: 0 auto;
}
.mv-heading p.head_text {
width: min(608px, 81.0666666667vw);
margin: 5% auto 0;
}
.mv-name {
position: absolute;
bottom: 20px;
right: initial;
left: 30px;
}
.mv-name p {
font-size: 12px;
}
} .recruit {
background: #005dab;
padding: 60px 0 90px;
}
@media (max-width: 767px) {
.recruit {
padding: 60px 0 80px;
}
}
@media (max-width: 767px) {
.recruit__inner {
width: 700px;
}
}
.recruit-items {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recruit-items li {
width: 49.9%;
position: relative;
}
.recruit-items li::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(//mabp.co.jp/img/recruit_2024/top/img_dot01.webp) no-repeat center center/cover;
pointer-events: none;
}
.recruit-items li:nth-child(n+3) {
margin-top: 3px;
}
.recruit-items li h2 {
position: absolute;
bottom: 2.9em;
left: 50%;
transform: translateX(-50%);
width: 100%;
font-size: 1.6rem;
letter-spacing: 0.18em;
color: #fff;
text-align: center;
}
.recruit-items li h2 span {
display: block;
line-height: 1;
font-size: min(3.7rem, 2.34375vw);
letter-spacing: 0.01em;
font-family: "AlteDIN", sans-serif;
margin-bottom: 0.2em;
}
@media (max-width: 767px) {
.recruit-items {
display: block;
}
.recruit-items li {
width: 100%;
}
.recruit-items li:nth-child(n+2) {
margin-top: 10px;
}
.recruit-items li img {
aspect-ratio: 670/250;
-o-object-fit: cover;
object-fit: cover;
}
.recruit-items li h2 {
font-size: min(2.6rem, 3.4666666667vw);
bottom: unset;
top: 50%;
transform: translate(-50%, -50%);
}
.recruit-items li h2 span {
font-size: min(4.7rem, 6.2666666667vw);
line-height: 1.2;
}
}
.recruit-btn {
margin-top: 55px;
text-align: center;
}
.recruit-btn a {
display: inline-block;
font-size: min(2.6rem, 2.6041666667vw);
font-weight: 500;
letter-spacing: 0.08em;
text-align: center;
color: #fff;
padding: 0.8em 0.5em;
border: 1px solid #fff;
}
.recruit-btn a::after {
display: inline-block;
content: "";
position: relative;
background: url(//mabp.co.jp/img/recruit_2024/top/icon_arrow01.webp) no-repeat center center/contain;
width: 1.15em;
aspect-ratio: 30/30;
vertical-align: bottom;
}
@media (max-width: 767px) {
.recruit-btn {
margin-top: 10%;
}
.recruit-btn a {
width: 100%;
font-size: min(3rem, 4vw);
line-height: 1.2333333333;
position: relative;
}
.recruit-btn a::after {
position: absolute;
top: 50%;
right: 1.1em;
transform: translateY(-50%);
}
} .movie {
padding: min(200px, 10vw) 0 min(90px, 4.5vw);
position: relative;
}
.movie h2 {
content: "COMPANY ATMOSPHERE";
position: absolute;
top: min(113px, 5.65vw);
left: 50%;
transform: translateX(-50%);
font-size: min(12.6rem, 6.5104166667vw);
color: #005dab;
font-family: "AlteDIN", sans-serif;
width: 100%;
text-align: center;
z-index: -1;
}
@media (max-width: 767px) {
.movie {
padding: min(252px, 33.6vw) 0 min(100px, 13.3333333333vw);
}
.movie h2 {
font-size: min(10.9rem, 14.5333333333vw);
top: min(80px, 10.6666666667vw);
}
}
.movie-items {
display: flex;
justify-content: center;
justify-content: space-between;
}
.movie-items li {
width: 48%;
text-align: center;
}
.movie-items li iframe {
width: 100%; aspect-ratio: 500/300;
}
.movie-items li p {
display: inline-block;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.18em;
padding-bottom: 10px;
border-bottom: 2px solid #1a1a1a;
margin-top: 22px;
}
@media (max-width: 767px) {
.movie-items {
display: block;
}
.movie-items li {
width: 100%;
}
.movie-items li:nth-child(2) {
margin-top: 50px;
}
.movie-items li iframe {
aspect-ratio: 670/430;
}
.movie-items li p {
font-size: min(2.8rem, 3.7333333333vw);
}
}
.movie.-anotherway {
padding: min(240px, 12vw) 0 min(90px, 4.5vw);
position: relative;
}
.movie.-anotherway .movie-items li {
width: 32%;
text-align: center;
}
.movie.-anotherway p {
font-size: min(1.6rem, 3.2vw);
line-height: 1.6923076923;
font-weight: 400;
text-align: center;
margin-top: 32px;
}
@media (max-width: 767px) {
.movie.-anotherway {
padding: min(252px, 38.6vw) 0 min(100px, 13.3333333333vw);
}
.movie.-anotherway .movie-items {
display: block;
}
.movie.-anotherway .movie-items li {
width: 100%;
}
.movie.-anotherway .movie-items li:nth-child(2),
.movie.-anotherway .movie-items li:nth-child(3) {
margin-top: 50px;
}
.movie.-anotherway .movie-items li iframe {
aspect-ratio: 670/430;
}
.movie.-anotherway .movie-items li p {
font-size: min(2.8rem, 3.7333333333vw);
}
} .media {
padding: 68px 0 100px;
background: url(//mabp.co.jp/img/recruit_2024/top/img_dot02.webp) no-repeat center center/cover;
}
.media .swiper-button-prev {
transform: translateX(-50%);
left: 0;
}
.media .swiper-button-next {
transform: translateX(50%);
right: 0;
}
@media (max-width: 767px) {
.media {
padding: 11% 0 11%;
}
}
@media (min-width: 768px) {
.media__inner {
padding: 0 25px;
}
}
@media (max-width: 767px) {
.media__inner {
padding: 0 25px;
}
}
.mediaWrap {
position: relative;
width: 1150px;
max-width: 100%;
margin: 35px auto 0;
}
@media (max-width: 767px) {
.mediaWrap {
width: 600px;
}
}
.media-content {
position: relative;
overflow: hidden;
}
.media-item {
background: #fff;
padding: 2%;
height: 450px;
box-shadow: 6px 0 10px rgba(0, 0, 0, 0.2);
}
.media-item h3 {
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.1em;
margin: 20px 0;
}
.media-item p {
font-size: 1.5rem;
line-height: 1.7333333333;
font-weight: 400;
letter-spacing: 0.04em;
}
.media-item a {
color: #000;
}
.media-item img {
aspect-ratio: 16/9;
object-fit: cover;
}
@media (max-width: 767px) {
.media-item {
padding: 9% 7%;
height: auto;
aspect-ratio: 600/870;
}
.media-item h3 {
font-size: min(3rem, 4vw);
margin: 1.3em 0 1.8em;
}
.media-item p {
font-size: min(2.4rem, 3.2vw);
}
} .message {
padding: min(7%, 140px) 0 min(4%, 80px);
position: relative;
}
.message::before {
content: "";
position: absolute;
background: rgba(0, 93, 171, 0.1);
aspect-ratio: 1060/690;
width: 53%;
right: 0;
top: 0;
-webkit-clip-path: polygon(17.6% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(17.6% 0%, 100% 0%, 100% 100%, 0% 100%);
z-index: 1;
}
.message::after {
content: "";
position: absolute;
background: rgba(0, 93, 171, 0.1);
aspect-ratio: 430/490;
width: 21.5%;
left: 0;
bottom: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 69.4% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 69.4% 100%, 0% 100%);
z-index: 11;
}
.message .w2000 {
position: relative;
z-index: 10;
}
@media (min-width: 768px) {
.message .w2000 {
width: auto;
}
}
@media (max-width: 767px) {
.message {
padding-top: 14%;
padding-bottom: 10%;
}
.message::before {
aspect-ratio: 1060/1820;
width: 56%;
-webkit-clip-path: polygon(49.6% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(49.6% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.message::after {
z-index: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 55.4% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 55.4% 100%, 0% 100%);
aspect-ratio: 430/891;
width: 41.5%;
}
.message h2 {
text-align: left;
padding-left: 1.3em;
}
}
.message-top {
display: flex;
justify-content: end;
}
@media (min-width: 768px) {
.message-top {
position: relative;
}
}
.message-title {
margin-right: 1.7%;
}
.message-title h2 {
text-align: left;
}
.message-title .section-title {
padding-right: 1.6em;
font-size: min(2.4rem, 1.2vw);
}
.message-title .section-title span {
font-size: min(9rem, 4.5vw);
margin-bottom: 0;
}
.message-heading {
width: min(389px, 19.45vw);
margin-left: auto;
margin-top: 12%;
}
@media (max-width: 767px) {
.message-heading {
width: min(364px, 48.5333333333vw);
margin-left: 5%;
margin-top: 5%;
position: absolute;
left: 0;
}
}
.message-img {
width: 53.8%;
margin-top: 2.4%;
}
@media (max-width: 767px) {
.message-img {
width: 56%;
}
}
.message-text {
width: 57%;
max-width: 100%;
margin: -4% auto 0;
background: #fff;
padding: 3.5%;
font-size: min(1.8rem, 1.8229166667vw);
font-weight: 400;
line-height: 1.7777777778;
letter-spacing: 0.04em;
position: relative;
z-index: 10;
}
@media (max-width: 767px) {
.message-text {
font-size: min(27px, 3.6vw);
width: 94%;
padding: 8.5%;
line-height: 1.6;
}
}
.dec_message {
content: "";
position: absolute;
width: 26%;
left: 10%;
top: 0%;
}
@media (max-width: 767px) {
.dec_message {
width: 39%;
left: 0;
}
} .culture {
background: #1a1a1a url(//mabp.co.jp/img/recruit_2024/top/culture_bg02.webp) no-repeat bottom center/100%;
color: #fff;
padding-bottom: 130px;
}
@media (max-width: 767px) {
.culture {
padding-bottom: 10%;
}
}
@media (min-width: 768px) {
.culture__inner {
width: 1170px;
}
}
@media (max-width: 767px) {
.culture__inner {
width: 700px;
}
}
.culture-top {
background: url(//mabp.co.jp/img/recruit_2024/top/culture_bg01.webp) no-repeat top center/100% 80%;
aspect-ratio: 2000/434;
}
@media (max-width: 767px) {
.culture-top {
background: url(//mabp.co.jp/img/recruit_2024/top/culture_bg01.webp) no-repeat top center/100% 45vw;
}
}
@media (min-width: 768px) {
.culture-top__inner {
width: 2000px;
}
}
.culture-top-content {
display: flex;
}
@media (max-width: 767px) {
.culture-top-content {
display: block;
position: relative;
}
}
.culture-img {
width: 37%;
margin-left: 15%;
}
@media (max-width: 767px) {
.culture-img {
position: absolute;
width: auto;
width: 84%;
margin-left: -16px;
top: 0;
left: 0;
}
}
.culture-title {
padding-top: min(80px, 4vw);
margin-left: 1%;
}
.culture-title h2 {
text-align: left;
}
@media (max-width: 767px) {
.culture-title {
position: relative;
z-index: 10;
margin-left: 0;
padding-top: 7%;
}
.culture-title h2 {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
}
}
.culture-heading {
width: min(511px, 36.4583333333vw);
margin: 4em auto 0;
}
@media (max-width: 767px) {
.culture-heading {
width: min(544px, 72.5333333333vw);
margin: 38% auto 0;
}
}
.culture-text {
margin-top: 8%;
font-size: min(1.8rem, 1.8229166667vw);
font-weight: 400;
line-height: 1.7777777778;
letter-spacing: 0.04em;
padding: 0 3.6em;
}
.culture-text span {
font-size: min(2.2rem, 2.0833333333vw);
font-weight: 700;
color: #ddc197;
}
@media (max-width: 767px) {
.culture-text {
font-size: min(2.7rem, 3.6vw);
padding: 0;
margin-top: 6%;
line-height: 1.6;
}
.culture-text span {
font-size: min(3.2rem, 4.2666666667vw);
line-height: 1.2;
}
}
.culture-items {
margin-top: 85px;
display: flex;
flex-wrap: wrap;
}
.culture-items li {
width: calc(25% - 22.5px);
text-align: center;
background: #005dab;
aspect-ratio: 259/299;
padding: 30px 0;
}
.culture-items li img {
height: min(100px, 7.8125vw);
-o-object-fit: contain;
object-fit: contain;
}
.culture-items li h4 {
font-size: min(2.2rem, 2.0833333333vw);
font-weight: 700;
margin-bottom: 0.7em;
margin-top: 0.6em;
}
.culture-items li p {
font-size: min(1.3rem, 1.5625vw);
line-height: 1.6923076923;
font-weight: 400;
}
@media (min-width: 768px) {
.culture-items li:not(:nth-child(4n)) {
margin-right: 30px;
}
.culture-items li:nth-child(n+5) {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.culture-items {
margin-top: 11%;
}
.culture-items li {
width: 49%;
padding: 6% 0 0;
aspect-ratio: 259/319;
}
.culture-items li:nth-child(2n) {
margin-left: 2%;
}
.culture-items li:nth-child(n+3) {
margin-top: 2%;
}
.culture-items li img {
height: min(104px, 13.8666666667vw);
}
.culture-items li h4 {
font-size: min(3rem, 4vw);
margin-bottom: 0.7em;
margin-top: 0.9em;
}
.culture-items li p {
font-size: min(2.6rem, 3.4666666667vw);
line-height: 1.5;
}
} .infographics {
background: #1a1a1a url(//mabp.co.jp/img/recruit_2024/top/infographics_bg02.webp) no-repeat bottom center/100%;
color: #fff;
padding-bottom: 130px;
}
@media (max-width: 767px) {
.infographics {
padding-bottom: 10%;
}
}
@media (min-width: 768px) {
.infographics__inner {
width: 1170px;
}
}
@media (max-width: 767px) {
.infographics__inner {
width: 700px;
}
}
@media (min-width: 768px) {
.infographics-top__inner {
width: 2000px;
}
}
.infographics-title {
padding-top: min(80px, 4vw); }
.infographics-title h2 {
text-align: center;
}
@media (max-width: 767px) {
.infographics-title {
position: relative;
z-index: 10;
margin-left: 0;
padding-top: 7%;
}
.infographics .section-title span {
font-size: min(11rem, 11.6666666667vw);
margin-bottom: 0.1em;
letter-spacing: 0.02em;
}
}
.infographics-heading {
width: min(511px, 36.4583333333vw);
margin: 4em auto 0;
}
@media (max-width: 767px) {
.infographics-heading {
width: min(544px, 72.5333333333vw);
margin: 38% auto 0;
}
}
.infographics-text {
margin-top: 8%;
font-size: min(1.8rem, 1.8229166667vw);
font-weight: 400;
line-height: 1.7777777778;
letter-spacing: 0.04em;
padding: 0 3.6em;
}
.infographics-text span {
font-size: min(2.2rem, 2.0833333333vw);
font-weight: 700;
color: #ddc197;
}
@media (max-width: 767px) {
.infographics-text {
font-size: min(2.7rem, 3.6vw);
padding: 0;
margin-top: 6%;
line-height: 1.6;
}
.infographics-text span {
font-size: min(3.2rem, 4.2666666667vw);
line-height: 1.2;
}
}
.infographics-items {
margin-top: 60px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.infographics-items li {
position: relative;
width: calc(33.3% - 22.5px);
text-align: center;
background: #fff;
color: #005dab;
aspect-ratio: 300/300;
padding: 30px 0;
}
.infographics-items li img {
position: absolute;
inset: 0;
margin: auto;
width: 90%;
max-width: 400px;
opacity: .05;
z-index: 0;
}
.infographics-items li h4 {
font-size: min(2.2rem, 2.0833333333vw);
font-weight: 700;
margin-bottom: 0.7em;
margin-top: 0.6em;
z-index: 1;
position: relative;
}
.infographics-items li p {
font-size: min(1.6rem, 1.825vw);
line-height: 1.6923076923;
font-weight: 600;
z-index: 1;
position: relative;
}
.infographics-items li p span {
display: inline-block;
margin: 0px 10px;
color: #4065aa;
font-size: calc(40px + 3vw);
font-weight: 700;
line-height: 1.2;
}
.infographics-items li.h-falf {
aspect-ratio: 300/200;
}
.infographics-items li.w-max {
width: calc(100% - 11.25px);
aspect-ratio: unset;
padding: 30px 0;
}
.infographics-items li.w-max .list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
min-width: 60px;
}
.infographics-items li.w-max .list p {
min-width: 300px;
}
@media (min-width: 768px) {
.infographics-items li:not(:nth-child(3n)) {
margin-right: 30px;
}
.infographics-items li.w-max:not(:nth-child(3n)) {
margin-right: 0;
}
.infographics-items li:nth-child(n+4) {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.infographics-items {
margin-top: 11%;
}
.infographics-items li {
width: 49%;
padding: 4% 0 4%;
aspect-ratio: 300 / 240;
}
.infographics-items li:nth-child(2n) {
margin-left: 2%;
}
.infographics-items li:nth-child(n+3) {
margin-top: 2%;
}
.infographics-items li img {
height: auto;
}
.infographics-items li h4 {
font-size: min(3rem, 3.6vw);
margin-bottom: 0.2em;
margin-top: 0.9em;
}
.infographics-items li p {
font-size: min(2.2rem, 3vw);
line-height: 1.5;
}
.infographics-items li p span {
font-size: calc(32px + 3vw);
font-weight: 700;
line-height: 1.4;
}
.infographics-items li.w-max {
width: 100%;
}
.infographics-items li.w-max .list p {
min-width: 150px;
}
}
.infographics-acc {
text-align: center;
margin-top: 60px;
}
.infographics-acc summary {
display: inline-block;
font-size: min(4.5rem, 3.90625vw);
letter-spacing: 0.08em;
color: #fff;
font-family: "AlteDIN", sans-serif;
background: #005dab;
padding: 10px 20px;
cursor: pointer;
}
.infographics-acc summary::-webkit-details-marker {
display: none;
}
.infographics-acc summary::after {
transform: translateY(-50%) rotate(45deg);
width: 15px;
height: 15px;
margin-left: 10px;
border-bottom: 1.5px solid #fff;
border-right: 1.5px solid #fff;
content: '';
position: relative;
transition: transform .3s;
display: inline-block;
top: 50%;
vertical-align: middle;
}
.infographics-acc[open] summary::after {
transform: rotate(225deg);
}
@media (max-width: 767px) {
.infographics-acc summary {
font-size: min(6.8rem, 9.0666666667vw);
padding-bottom: 0.3em;
}
} .interviewWrap {
position: relative;
overflow: hidden;
margin-top: 2%;
height: 30vw;
background: linear-gradient(180deg, transparent 0px, transparent 53.5%, #005dab 53.5%, #005dab 100%);
}
.interviewWrap::after {
content: "";
position: absolute;
background: url(//mabp.co.jp/img/recruit_2024/top/dec_int2.webp) no-repeat center center/100%;
aspect-ratio: 2280/12;
width: 57%;
left: 50%;
bottom: 10%;
transform: translate(-50%, -50%);
display: none;
}
.interviewWrap .swiper-button-next, .interviewWrap .swiper-button-prev {
top: 39%;
width: 3%;
}
.interviewWrap .swiper-button-next {
right: 20%;
left: unset;
}
.interviewWrap .swiper-button-prev {
left: 20%;
}
@media (max-width: 767px) {
.interviewWrap {
height: 84vw;
}
.interviewWrap::after {
background: url(//mabp.co.jp/img/recruit_2024/top/dec_int2_sp.webp) no-repeat center center/100%;
aspect-ratio: 1340/12;
bottom: 12%;
width: 89%;
}
.interviewWrap .swiper-button-next, .interviewWrap .swiper-button-prev {
top: 41%;
width: 7%;
}
.interviewWrap .swiper-button-next {
right: 4%;
}
.interviewWrap .swiper-button-prev {
left: 4%;
}
}
.interview-content {
overflow: hidden;
width: 117%;
position: absolute;
margin: 0 auto;
left: 50%;
transform: translateX(-50%);
}
@media (max-width: 767px) {
.interview-content {
width: 165%;
}
}
.interview-item {
position: relative;
margin: 0 0 !important;
}
.interview-item::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.6);
width: 90%;
height: 93%;
left: 49.2%;
top: 49.5%;
transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
.swiper-slide-next + .interview-item::after,
.swiper-slide-next + .interview-item + .interview-item::after,
.swiper-slide-next + .interview-item + .interview-item + .interview-item::after,
.swiper-slide-next + .interview-item + .interview-item + .interview-item + .interview-item::after {
display: none;
}
}
@media (max-width: 767px) {
.swiper-slide-next::after,
.swiper-slide-next + .interview-item::after {
display: none;
}
}
.int-text {
position: absolute;
bottom: 9%;
left: 50%;
transform: translate(-50%, 0%);
color: #fff;
font-size: 2rem;
width: 87%;
}
.int-text p {
text-align: center;
}
.int-text p:nth-child(1) {
font-family: "AlteDIN", sans-serif;
font-size: min(3.3rem, 1.65vw);
font-weight: bold;
border-bottom: 1px solid #fff;
padding-bottom: 0.3em;
height: 1.8em;
}
.int-text p:nth-child(2) {
font-family: "Noto Sans JP", sans-serif;
font-size: min(1.4rem, 0.7vw);
margin-top: 1em;
}
@media (max-width: 767px) {
.int-text {
bottom: 6%;
}
.int-text p:nth-child(1) {
font-size: min(4.2rem, 5.6vw);
}
.int-text p:nth-child(2) {
font-size: min(2.6rem, 3.4666666667vw);
margin-top: 0.5em;
}
}
.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
background: rgba(255, 255, 255, 0.5);
top: unset;
height: 4px;
left: 50%;
transform: translateX(-50%);
width: 57%;
bottom: 10%;
}
@media (max-width: 767px) {
.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
bottom: 12%;
width: 89%;
}
}
.swiper-scrollbar-drag {
border-radius: 3px;
background: #002D66;
} .story {
padding: 5% 0;
position: relative;
}
.story::before {
content: "";
position: absolute;
background: url(//mabp.co.jp/img/recruit_2024/top/dec_story.webp) no-repeat center center/100%;
aspect-ratio: 1256/360;
width: 30%;
left: 50%;
top: 0%;
transform: translate(-50%, 0%);
}
@media (max-width: 767px) {
.story {
padding: 13% 0;
}
.story::before {
width: 50%;
}
}
.story-text {
font-size: 2rem;
line-height: 1.7;
font-weight: 400;
letter-spacing: 0.04em;
text-align: center;
margin-top: 40px;
}
@media (max-width: 767px) {
.story-text {
font-size: min(2.7rem, 3.6vw);
}
}
.story-items {
margin-top: 60px;
display: flex;
}
.story-items li {
background: #e5eff7;
width: 30.8%;
padding-bottom: 130px;
position: relative;
}
.story-items li img {
aspect-ratio: 16/9;
object-fit: cover;
}
@media (min-width: 768px) {
.story-items li:not(:nth-child(3n)) {
margin-right: 3.75%;
}
}
@media (max-width: 767px) {
.story-items {
display: block;
width: 670px;
max-width: 100%;
margin: 11% auto 0;
}
.story-items li {
width: 100%;
padding-bottom: 21%;
}
.story-items li:nth-child(n+2) {
margin-top: 5%;
}
.story-items li img {
aspect-ratio: 670/320;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
}
.story-item-content {
margin-top: 10px;
}
.story-item-content dt, .story-item-content dd {
font-size: min(1.5rem, 1.5625vw);
font-weight: 700;
}
.story-item-content dt {
display: inline-block;
font-weight: 700;
color: #fff;
padding: 5px 10px;
padding: 0.5em 1.4em;
background: #005dab;
margin-top: 20px;
position: relative;
}
.story-item-content dt::after {
content: "";
position: absolute;
top: 0;
right: -9px;
-webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
clip-path: polygon(100% 0, 0 0, 0 100%);
background: #005dab;
width: 10px;
height: 100%;
}
.story-item-content dd {
padding: 1em 2em;
border-bottom: 1px dotted #808080;
}
@media (max-width: 767px) {
.story-item-content {
display: block;
margin: 2% 0 5%;
}
.story-item-content dt, .story-item-content dd {
font-size: min(2.6rem, 3.4666666667vw);
}
.story-item-content dt {
padding: 0.2em 1.4em;
margin-top: 0.6em;
}
}
.story-item-btn {
position: absolute;
bottom: 35px;
left: 50%;
transform: translateX(-50%);
}
.story-item-btn a {
display: inline-block;
width: min(310px, 27.34375vw);
border: 1px solid #005dab;
border-radius: 25px;
background: #fff;
text-align: center;
font-size: min(2.3rem, 2.34375vw);
color: #005dab;
letter-spacing: 0.08em;
font-family: "AlteDIN", sans-serif;
padding: 10px 0;
position: relative;
}
.story-item-btn a::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: url(//mabp.co.jp/img/recruit_2024/top/icon_arrow02.webp) no-repeat center center/contain;
width: 1em;
aspect-ratio: 25/6;
}
@media (max-width: 767px) {
.story-item-btn {
bottom: 5%;
}
.story-item-btn a {
width: min(496px, 66.1333333333vw);
font-size: min(3.7rem, 4.9333333333vw);
padding: 0.5em 0;
border-radius: 40px;
}
.story-item-btn a::after {
width: 1.2em;
right: 0.7em;
}
}
.story-btn {
text-align: center;
margin-top: 60px;
}
.story-btn a {
display: inline-block;
font-size: min(4.5rem, 3.90625vw);
letter-spacing: 0.08em;
color: #005dab;
font-family: "AlteDIN", sans-serif;
border-bottom: 5px solid #005dab;
}
.story-btn a::after {
display: inline-block;
content: "";
position: relative;
top: 50%;
transform: translateY(-50%);
background: url(//mabp.co.jp/img/recruit_2024/top/icon_arrow02.webp) no-repeat center center/contain;
width: 0.8em;
aspect-ratio: 35/9;
vertical-align: middle;
margin-left: 20px;
}
@media (max-width: 767px) {
.story-btn a {
font-size: min(6.8rem, 9.0666666667vw);
padding-bottom: 0.3em;
}
} .company {
background: url(//mabp.co.jp/img/recruit_2024/top/company_bg01.webp) no-repeat center center/cover;
padding: 75px 0;
}
.company-container {
background: url(//mabp.co.jp/img/recruit_2024/top/company_bg02.webp) no-repeat center center/cover;
padding: 5% 4.1%;
display: flex;
color: #fff;
}
@media (max-width: 767px) {
.company-container {
display: block;
width: 670px;
max-width: 100%;
margin: 0 auto;
padding: 5% 8% 12%;
}
}
.company-content {
display: flex;
width: 60%;
}
@media (max-width: 767px) {
.company-content {
width: 100%;
display: block;
}
}
.company-logo {
width: min(225px, 16.9270833333vw);
margin-right: 20px;
}
@media (max-width: 767px) {
.company-logo {
width: min(302px, 40.2666666667vw);
margin: 0 auto;
}
}
.company-info {
margin-top: 2em;
}
.company-info h3 {
font-size: min(2.2rem, 2.0833333333vw);
font-weight: 500;
line-height: 1.3636363636;
letter-spacing: 0.04em;
margin-bottom: 10px;
}
.company-info p {
font-size: min(1.8rem, 1.6927083333vw);
line-height: 1.7777777778;
}
@media (max-width: 767px) {
.company-info {
margin-top: 3em;
}
.company-info h3 {
font-size: min(3.2rem, 4.2666666667vw);
}
.company-info p {
font-size: min(2.7rem, 3.6vw);
line-height: 1.5;
}
}
.company-btn {
margin-top: 18px;
}
.company-btn a {
display: inline-block;
width: 310px;
font-size: 2.2rem;
letter-spacing: 0.08em;
color: #fff;
font-family: "AlteDIN", sans-serif;
border: 1px solid #fff;
text-align: center;
padding: 10px 0;
position: relative;
}
.company-btn a::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: url(//mabp.co.jp/img/recruit_2024/top/icon_arrow02_wh.webp) no-repeat center center/contain;
width: 1.1em;
aspect-ratio: 25/6;
}
@media (max-width: 767px) {
.company-btn a {
font-size: min(3.8rem, 5.0666666667vw);
width: 100%;
padding: 0.4em 0;
right: 0;
}
}
.company-group {
width: 40%;
}
@media (max-width: 767px) {
.company-group {
width: 100%;
margin-top: 40px;
}
} .entry {
padding: 105px 0 120px;
background: url(//mabp.co.jp/img/recruit_2024/top/entry_bg.webp) no-repeat center center/cover;
}
.entry h2 {
color: #fff;
}
.entry h2 span {
color: #fff;
}
.entry .section-title {
position: relative;
}
.entry .section-title::before {
content: "";
position: absolute;
background: url(//mabp.co.jp/img/recruit_2024/top/dec_entry.webp) no-repeat center center/100%;
aspect-ratio: 1244/285;
width: 53%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.entry .section-title p, .entry .section-title span {
position: relative;
}
@media (max-width: 767px) {
.entry {
padding: 19% 0 120px;
}
.entry .section-title::before {
width: 83%;
top: 0;
}
}
.entry-heading {
width: min(986px, 49.3vw);
margin: 70px auto 0;
}
@media (max-width: 767px) {
.entry-heading {
width: min(638px, 85.0666666667vw);
}
}
.entry-text {
font-size: 1.5rem;
line-height: 1.7333333333;
font-weight: 400;
letter-spacing: 0.04em;
color: #fff;
text-align: center;
margin-top: 5.5%;
}
@media (max-width: 767px) {
.entry-text {
font-size: min(2.7rem, 3.6vw);
margin-top: 7.5%;
line-height: 1.6;
}
}
.entry-items {
display: flex;
margin-top: 45px;
}
.entry-items li {
width: 24.625%;
color: #fff;
position: relative;
}
.entry-items li::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(//mabp.co.jp/img/recruit_2024/top/img_dot01.webp) no-repeat center center/cover;
pointer-events: none;
}
.entry-items li h3 {
position: absolute;
bottom: 3em;
left: 50%;
transform: translateX(-50%);
font-size: 1.6rem;
letter-spacing: 0.18em;
text-align: center;
width: 100%;
}
.entry-items li h3 span {
display: block;
font-size: min(3rem, 2.6041666667vw);
letter-spacing: 0.04em;
margin-bottom: 5px;
}
.entry-items li a {
color: inherit;
}
@media (min-width: 768px) {
.entry-items li:not(:nth-child(4n)) {
margin-right: 0.5%;
}
}
@media (max-width: 767px) {
.entry-items {
flex-wrap: wrap;
width: 670px;
max-width: 100%;
margin: 12% auto 0;
}
.entry-items li {
width: 49.5%;
}
.entry-items li img {
aspect-ratio: 330/300;
-o-object-fit: cover;
object-fit: cover;
}
.entry-items li:nth-child(2n) {
margin-left: 1%;
}
.entry-items li:nth-child(n+3) {
margin-top: 3%;
}
.entry-items li h3 {
font-size: min(2.6rem, 3.4666666667vw);
bottom: 1em;
}
.entry-items li h3 span {
font-size: min(3.8rem, 5.0666666667vw);
}
}
::-webkit-scrollbar {
display: none;
}
body {
scrollbar-width: none;
}