@charset "UTF-8";

/* ---------------------about-TOP--------------------- */
.about-top {
max-width: var(--content-width);
margin: 80px auto 0;
}

.about-top p.about-top-text {
font-family: var(--font-mincho);
font-size: 22px;
font-weight: 300;
line-height: 2.27;
color: var(--color-text);
text-align: center;
margin: 0 auto 80px;
}

.about-top h2.about-catchcopy {
font-family: var(--font-mincho);
font-size: 80px;
font-weight: 300;
line-height: 1;
color: var(--color-text);
text-align: center;
margin: 0 auto 100px;
}

@media (max-width: 750px) {
.about-top {
width: 100%;
margin: 8vw auto 0;
}

.about-top p.about-top-text {
font-size: 3.6vw;
line-height: 1.8;
margin: 0 auto 6.13333vw;
}

.about-top h2.about-catchcopy {
font-size: 8.8vw;
line-height: 1.3;
margin: 0 auto 10.66666vw;
}
}

/* ---------------------about-BOTTOM--------------------- */
.about-bottom {
max-width: var(--content-width);
margin: 0 auto 140px;
}

.about-misson,
.about-vision,
.about-value {
text-align: center;
}

h3.label-badge {
display: inline-block;
background: var(--color-primary-heavy);
color: #fff;
padding: 10px 48px;
border-radius: 2px;
font-family: var(--font-gothic);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.1em;
}

.about-misson p,
.about-vision p {
font-family: var(--font-mincho);
font-size: 40px;
font-weight: 400;
color: var(--color-text);
line-height: 1.5;
margin: 30px auto 80px;
}

.about-value {
margin-top: 80px;
text-align: center;
}

.value-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
max-width: 960px;
margin: 30px auto 0;
}

.value-item {
width: 176px;
height: 176px;
background: var(--color-news-bg);
border-radius: 6px;
text-align: center;
}

img.value-icon {
width: 120px;
margin: 30px auto 0;
display: block;
}

@media (max-width: 750px) {
.about-bottom {
width: 100%;
margin: 0 auto 18.66666vw;
}

h3.label-badge {
padding: 1.33333vw 6.4vw;
font-size: 3.2vw;
}

.about-misson p,
.about-vision p {
font-size: 4.8vw;
margin: 4vw auto 8vw;
}

.about-value {
margin-top: 4vw;
}

.value-grid {
grid-template-columns: repeat(3, 2fr);
gap: 4% 2%;
width: 100%;
max-width: 100%;
margin: 4vw auto 0;
padding: 0 0 0 2%;
}

.value-item {
width: 30vw;
height: 30vw;
}

img.value-icon {
width: 70%;
margin: 4.8vw auto 0;
}
}