@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap"); *,
*::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-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;
}
p:not(#breadcrumbs) 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;
}
} main {
color: #1a1a1a;
font-family: "Noto Sans JP", sans-serif;
}
main.is-active {
position: fixed;
width: 100%;
height: 100%;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
.inner {
width: 1232px;
max-width: 100%;
margin: 0 auto;
padding: 0 16px;
}
@media (max-width: 767px) {
.inner {
max-width: 100%;
}
}     .c_sec-title {
font-size: min(8rem, 5vw);
font-weight: 900;
line-height: 1.75;
letter-spacing: 0.08em;
}
@media (max-width: 767px) {
.c_sec-title {
font-size: min(8.5rem, 11.3333333333vw);
}
}
.c_sec-title_jp {
font-family: "Noto serif JP", serif;
font-size: min(4.2rem, 3.25vw);
font-weight: 600;
line-height: 1.75;
color: #fff;   }
.c_sec-title_en {
font-family: "Noto serif", serif;
font-size: min(10rem, 4.25vw);
font-weight: 400;
line-height: 1.75;
color: #fff;   }
.c_sec-title_en span {
display: block;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.7222222222;
letter-spacing: 0.24em;
font-family: "Noto Serif JP", serif;
}
@media (max-width: 767px) {
.c_sec-title_en {
font-size: min(12rem, 16vw);
line-height: 0.9636363636;
}
.c_sec-title_en span {
font-size: min(2.4rem, 3.2vw);
}
} .c_more {
display: inline-block;
font-size: 2.2rem;
line-height: 1.1818181818;
letter-spacing: 0.12em;
color: #1a1a1a;
padding-right: 2.4em;
position: relative;
margin-top: 1.4em;
}
.c_more::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: url(//mabp.co.jp/img/story/icon_arrow01.png) no-repeat center center/contain;
width: 44px;
aspect-ratio: 44/44;
}
@media (max-width: 767px) {
.c_more {
font-size: min(2.6rem, 3.4666666667vw);
padding-right: 2.7em;
}
.c_more::after {
width: 1.9em;
}
}
.c_pl1 {
padding-left: 2%;
}
main.case {
font-family: "Noto Serif JP", serif;
}
main.case .inner {
width: 1040px;
}
@media (max-width: 767px) {
main.case .inner {
width: 700px;
}
} .case-title {
background: url(//mabp.co.jp/img/story/case_title-bg.jpg) no-repeat center center/cover;
padding: 125px 0;
}
.case-title .case-titleBody {
width: 830px;
margin: 0 auto; background: #01091e6e;
text-align: center;
border: 1px solid #fff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
padding: 10px 0;
}
.case-title h2, .case-title p {
width: 830px;
max-width: 100%;
margin: 0 auto;
font-size: min(3.2rem, 2.6666666667vw);
font-size: 3.2rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.08em;
color: #fff;
}
.case-title h2 span, .case-title h2:nth-of-type(2), .case-title p span, .case-title p:nth-of-type(2) {
font-weight: 600;
font-size: min(3.6rem, 3vw);
font-size: 3.6rem;
}
.case-title img {
display: block;
margin: 0 auto;
max-width: 80%;
width: 730px;
margin-bottom: 30px;
}
@media (max-width: 767px) {
.case-title {
background: url(//mabp.co.jp/img/story/case_title-bg_sp.jpg) no-repeat center center/cover;
aspect-ratio: 1500/1152;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.case-title .case-titleBody {
padding: 6% 0;
width: 85%;
}
.case-title h2, .case-title p {
font-size: min(4rem, 5.3333333333vw);
}
.case-title h2 span, .case-title h2:nth-of-type(2), .case-title p span, .case-title p:nth-of-type(2) {
font-size: min(4.6rem, 6.1333333333vw);
}
} .case-result { background: linear-gradient(to bottom, #1b2a55 0%, #000b24 100%);
padding: min(3.5%, 70px) 0 min(5%, 100px);
}
.case-result h2 {
font-size: min(3.6rem, 2.8571428571vw);
font-weight: 500;
line-height: 1.85;
letter-spacing: 0.06em;
text-align: center;
color: #fff;
text-decoration: underline #fff;
text-decoration-thickness: 1px;
text-underline-offset: 7px;
}
@media (max-width: 767px) {
.case-result {
padding: 13% 0 18%;
}
.case-result h2 {
font-size: min(4.6rem, 6.1333333333vw);
line-height: 2;
}
}
.case-result-box {
background: #fff;
margin-top: 50px;
}
.case-result-box img {
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
vertical-align: bottom;
}
.case-result-box { font-size: min(1.6rem, 3.5vw);
font-weight: 400;
line-height: 1.8125;
letter-spacing: 0.04em;
}
@media (max-width: 767px) {
.case-result-box {
margin-top: 11%;
}
.case-result-box p {
padding: 4% min(50px, 6.6666666667vw) 15%;
font-size: min(2.8rem, 3.7333333333vw);
line-height: 2.05;
line-break: anywhere;
}
}
.case-result-content {
display: flex;
justify-content: space-between;
padding: 55px;
position: relative;
}
@media (min-width: 768px) {
.case-result-content::after {
content: "";
position: absolute;
aspect-ratio: 1/1;
width: 26px;
left: 50%;
top: 23%;
border-right: 2px solid #2d517b;
border-bottom: 2px solid #2d517b;
transform: translate(-75%, -50%) rotate(-45deg);
}
}
@media (max-width: 767px) {
.case-result-content {
display: block;
padding: min(70px, 9.3333333333vw) min(50px, 6.6666666667vw);
}
}
.case-result-table {
width: 48%;
}
.case-result-table h3 {
font-size: min(2rem, 1.6666666667vw);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.06em;
color: #fff;
text-align: center; background: linear-gradient(45deg, #9b7f0b, #bea22d, #bea22d, #bea22d, #9b7f0b);
padding: 14px 0;
}
.case-result-table h3 span {
display: block;
font-size: min(3.1rem, 2.5833333333vw);
font-weight: 600;
letter-spacing: 0.1em;
}
.case-result-table dl {
display: flex;
flex-wrap: wrap;
font-size: min(1.6rem, 3.5vw);
font-weight: 500;
text-align: center;
border: 1px solid #bda22e;
}
.case-result-table dl dt, .case-result-table dl dd {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 62px;
}
.case-result-table dl dt:not(:last-of-type), .case-result-table dl dd:not(:last-of-type) {
border-bottom: 1px solid #999999;
}
.case-result-table dl dt:nth-of-type(2), .case-result-table dl dd:nth-of-type(2) {
height: 80px;
}
.case-result-table dl dt {
width: 40%;
line-height: 1;
background: rgba(181, 161, 81, 0.2);
}
.case-result-table dl dd {
width: 60%;
line-height: 1.5882352941;
}
@media (max-width: 767px) {
.case-result-table {
width: 100%;
}
.case-result-table:nth-child(2) {
margin-top: 100px;
position: relative;
}
.case-result-table:nth-child(2)::after {
content: "";
position: absolute;
aspect-ratio: 1/1;
width: 36px;
left: 50%;
top: -50px;
border-right: 2px solid #2d517b;
border-bottom: 2px solid #2d517b;
transform: translate(-50%, -75%) rotate(45deg);
}
.case-result-table h3 {
font-size: min(2.7rem, 3.6vw);
font-weight: 500;
}
.case-result-table h3 span {
font-size: min(4.2rem, 5.6vw);
}
.case-result-table dl dt, .case-result-table dl dd {
font-size: min(1.8rem, 3.2333333333vw); } .case-result-table dl dt {
line-height: 1.6428571429;
width: 42%;
}
.case-result-table dl dd {
padding: 10px 15px;
width: 58%;
}
} .case-interview.-bg {
background: #f2f5fd;
}
.case-interview-block {
padding: 100px 0 50px;
}
@media (max-width: 767px) {
.case-interview-block {
padding: 8% 0 0;
}
}
.case-interview-img {
position: relative;
}
.case-interview-img img {
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
}
.case-interview-img h2 {
position: absolute;
bottom: 0.7em;
left: 0.6em;
font-size: min(3rem, 2.5vw);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.06em;
}
.case-interview-img h2 span {
font-size: min(3.4rem, 2.8333333333vw);
color: #17264e;
}
.case-interview-img p {
display: inline-block;
padding: 0.2em 0.8em;
background: rgba(255, 255, 255, 0.85);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
webkit-box-decoration-break: clone;
}
@media (max-width: 767px) {
.case-interview-img h2 {
font-size: min(3rem, 4vw);
left: 0.2em;
}
.case-interview-img h2 span {
font-size: min(3.4rem, 4.5333333333vw);
}
}
.case-qa {
margin-top: 60px;
}
.case-qa h3 {
font-size: min(2.8rem, 2.6041666667vw);
font-weight: 700;
line-height: 1.7;
letter-spacing: 0.06em;
color: #fff;
background: #17264e;
padding: 0 20px;
}
@media (max-width: 767px) {
.case-qa h3 {
font-size: min(3.6rem, 4.8vw);
}
} .case-qa-list {
padding: 0 10px;
}
.case-qa-list li {
padding: 25px 0 40px;
gap: 20px;
}
.case-qa-list li:nth-child(n+2) {
border-top: 1px solid #808080;
}
.case-qa-list li h4 {
font-size: min(2.4rem, 2.34375vw);
font-weight: 600;
line-height: 1.6666666667;
letter-spacing: 0.06em;
color: #2b5077;
}
.case-qa-list li p {
font-size: 1.6rem;
font-weight: 400;
line-height: 1.75;
letter-spacing: 0.08em;
margin-top: 25px;
}
@media (max-width: 767px) {
.case-qa-list li {
padding: 8% 0 14%;
}
.case-qa-list li h4 {
font-size: min(3.4rem, 4.5333333333vw);  }
.case-qa-list li p {
font-size: min(1.4rem, 3.7333333333vw);
line-height: 2.05;
}
}
.case-qa-item_flex {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.case-qa-item_flex img {
width: 80%;   object-fit: cover;
aspect-ratio: 16 / 9;
margin: 0 auto;
}
@media (max-width: 767px) {
.case-qa-item_flex {
display: block;
}
.case-qa-item_flex img {
width: 100%;
aspect-ratio: 630/380;
object-fit: cover;
margin-top: 10px;
margin-right: 0;
}
}
@media (max-width: 767px) {
.case-qa-content {
margin-top: 20px;
}
} .advisor {
padding: 50px 0 70px;
}
.advisor-title {
font-size: min(3.7rem, 3.90625vw);
font-weight: 600;
line-height: 1.5135135135;
letter-spacing: 0.04em;
color: #2d517b;
position: relative;
width: 1030px;
max-width: 100%;
margin: 0 auto;
transform: translateX(-2%);
}
@media (max-width: 767px) {
.advisor-title {
font-size: min(5.2rem, 6.9333333333vw);
width: 89%;
transform: unset;
}
}
.advisor-block {
display: flex;
justify-content: space-between;
align-items: start;
margin-top: -20px;
}
.advisor-block img {
width: 39%;
object-fit: cover;
aspect-ratio: 400/480;
}
@media (max-width: 767px) {
.advisor-block {
display: block;
}
.advisor-block img {
width: 100%;
max-width: 540px;
margin: 0 auto;
display: block;
}
}
.advisor-content {
width: 52%;
}
@media screen and (max-width: 999px) {
.advisor-content {
width: 56%;
}
}
@media (max-width: 767px) {
.advisor-content {
max-width: 100%;
width: 650px;
margin: 30px auto 0;
}
}
.advisor-content_c {
padding-left: 2%;
width: 86%;
}
@media screen and (max-width: 999px) {
.advisor-content_c {
padding: 0 3%;
width: 100%;
}
}
.advisor-heading {
font-size: min(3.4rem, 3.6458333333vw);
font-weight: 600;
line-height: 1.6470588235;
letter-spacing: 0.04em;
}
@media (max-width: 767px) {
.advisor-heading {
font-size: min(4.2rem, 4.8vw);
margin-bottom: 3%;
}
}
.advisor-name {
font-size: min(2rem, 2.34375vw);
line-height: 2;
font-weight: 500;
letter-spacing: 0.08em;
border-bottom: 1px solid #808080;
}
.advisor-name span {
display: inline-block;
font-size: min(3.2rem, 3.3854166667vw);
margin-left: 10px;
}
@media (max-width: 767px) {
.advisor-name {
font-size: min(2.8rem, 3.7333333333vw);
}
.advisor-name span {
font-size: min(4.5rem, 6vw);
}
}
.advisor-info {
display: flex;
align-items: start;
flex-wrap: wrap;
margin-top: 25px;
}
.advisor-info dt:nth-of-type(n + 2), .advisor-info dd:nth-of-type(n + 2) {
margin-top: 18px;
}
.advisor-info dt {
width: 100px;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.1em;
text-align: center;
background: #2d517b;
border-radius: 16px;
color: #fff;
}
.advisor-info dd {
width: calc(100% - 100px);
font-size: 1.8rem;
font-weight: 500;
line-height: 1.5555555556;
letter-spacing: 0.04em;
padding: 0 14px;
}
@media (max-width: 767px) {
.advisor-info dt {
font-size: min(2.6rem, 3.4666666667vw);
width: 26%;
border-radius: 24px;
}
.advisor-info dd {
font-size: min(2.8rem, 3.7333333333vw);
width: 74%;
}
}
.advisor-link {
margin-top: 45px;
}
.advisor-link a {
display: inline-block;
width: 100%;
font-size: min(2rem, 2.6041666667vw);
font-weight: 400;
color: #fff;
background: linear-gradient(0deg, rgb(48, 64, 106) 0%, rgb(46, 75, 117) 20.03%, rgb(45, 81, 123) 40.64%, rgb(92, 119, 149) 72.93%, rgb(127, 147, 169) 100%);
padding: 30px 0;
text-align: center;
position: relative;
}
.advisor-link a::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
background: url(//mabp.co.jp/img/story/icon_arrow03.png) no-repeat center center/contain;
width: 30px;
aspect-ratio: 30/8;
}
@media (max-width: 767px) {
.advisor-link a {
font-size: min(3.6rem, 4.8vw);
padding: 1.6em 0;
}
.advisor-link a::after {
width: min(42px, 5.6vw);
}
} .p-story_single__body {
margin: 40px auto 0;
}
.p-story_single__body .title {
text-align: left;
line-height: 1.2;
}
.p-story_single__body .img {
aspect-ratio: 16/9;
object-fit: cover;
width: 100%;
}
.p-story_single__profile {
border-radius: 0;
margin: 0;
}
.p-story_single__profile .img {
margin: 0 auto;
}
.p-story_single__profile .title {
text-decoration: none !important;
}
.p-story_single__profile .company,
.p-story_single__profile .name,
.p-story_single__profile p {
padding: 0 0 0 10px;
}
@media (max-width: 767px) {
.p-story_single__body,
.p-story_single__body.-bg {
padding: 0 15px;
}
.p-story_single__profile .company,
.p-story_single__profile .name,
.p-story_single__profile p {
padding: 2% min(50px, 6.6666666667vw) 2%;
}
} .company-info {
padding: 90px 0 120px;
background: linear-gradient(to bottom, #1b2a55 0%, #000b24 100%), url(//mabp.co.jp/img/interview/company-info_bg.png) no-repeat center bottom / 100%;;
}
.company-info h2 {
color: #fff;
letter-spacing: 0.03em;
line-height: 1;
}
@media (max-width: 767px) {
.company-info {
padding: 70px 0 140px;
}
.company-info h2 {
font-size: min(6rem, 8vw);
}
}
.company-info__inner[class] {
width: 1240px;
}
.company-info-content {
display: flex;
justify-content: space-between;
margin-top: 25px;
}
@media (max-width: 767px) {
.company-info-content {
display: block;
max-width: 100%;
width: 670px;
margin: 10% auto 0;
}
}
.company-info-table {
width: 55%;
display: flex;
flex-wrap: wrap;
}
.company-info-table dt, .company-info-table dd {
font-size: min(1.4rem, 1.5625vw);
line-height: 3.5;
line-height: 2.5;
font-weight: 400;
letter-spacing: 0.04em;
color: #fff;
padding: 10px;
}
.company-info-table dt {
width: 25%;
background: #3a4a7a;
text-align: center;
box-shadow: inset 2px 2px 10px rgba(0, 5, 48, 0.2);
position: relative;
}
.company-info-table dt::after {
content: "";
position: absolute;
width: 392%;
height: 2px;
left: 2px;
bottom: 0%;
background-image: linear-gradient(to right, #fff, #fff 1px, transparent 1px);
background-size: 8px 1px;
background-position: left bottom;
background-repeat: repeat-x;
}
.company-info-table dt:last-of-type::after {
display: none;
}
.company-info-table dd {
width: 75%;
background: #1b2a55;
padding-left: 1.4em;
}
.company-info-table dd a {
color: #fff;
}
@media (max-width: 767px) {
.company-info-table {
width: 100%;
}
.company-info-table dt, .company-info-table dd {
font-size: min(2.2rem, 2.9333333333vw);
line-height: 2.4;
}
}
.company-info-map {
width: 40%;
}
.company-info-map iframe {
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.company-info-map {
width: 100%;
margin-top: 60px;
}
.company-info-map iframe {
aspect-ratio: 670/574;
}
}
.new_2023 .l-main {
padding-top: 126px !important;
}
@media screen and (max-width: 980px) {
.new_2023 .l-main {
padding-top: 16vw !important;
}
}