:root {
--txt-base: #000000;
--border-base: #999999;
--primary-blue: #001e60;
--primary-white: #ffffff;
--secondary-blue: #4c6c85;
--secondary-green: #6ea200;
--secondary-yellow: #dade1a;
}
.l-header__nav-item.--quality a p {
color: var(--secondary-yellow);
}
.p-quality-block {
position: relative;
padding: 0 0 10rem;
}
.p-quality-block__list {
display: grid;
margin-top: 1.5rem;
gap: 1rem;
}
@media screen and (min-width: 769px) {
.p-quality-block__list {
grid-template-columns: repeat(2, 1fr);
margin-top: 2.5rem;
}
}
.p-quality-block__item {
aspect-ratio: 533/255;
border-radius: 2rem;
overflow: hidden;
border: 1px solid var(--primary-blue);
}
.p-quality-block__link {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 2rem;
background-color: var(--primary-blue);
transition: all 0.3s ease;
}
@media screen and (min-width: 769px) {
.p-quality-block__link {
padding: 3rem 4rem 3rem 3rem;
}
}
.p-quality-block__link .link-img {
position: relative;
z-index: 1;
height: auto;
background-color: var(--primary-white);
transform-origin: bottom left;
transform: scale(0.7);
}
@media screen and (min-width: 769px) {
.p-quality-block__link .link-img {
transform: scale(1);
}
}
.p-quality-block__link .link-img.--01 {
mask: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
aspect-ratio: 76/73;
width: 7.4rem;
}
.p-quality-block__link .link-img.--02 {
mask: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
aspect-ratio: 77/79;
width: 7.7rem;
}
.p-quality-block__link .link-img.--03 {
mask: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
aspect-ratio: 1/1;
width: 6.8rem;
}
.p-quality-block__link .link-img.--04 {
mask: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
aspect-ratio: 69/85;
width: 6.8rem;
}
.p-quality-block__link .link-img.--05 {
mask: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
aspect-ratio: 76/85;
width: 7.9rem;
}
.p-quality-block__link .link-img.--06 {
mask: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
aspect-ratio: 77/81;
width: 7.1rem;
}
.p-quality-block__link .link-img.--07 {
mask: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
aspect-ratio: 73/70;
width: 7.3rem;
}
.p-quality-block__link .link-img.--08 {
mask: url('data:image/svg+xml;utf8,')
no-repeat center/contain;
aspect-ratio: 77/70;
width: 7.7rem;
}
.p-quality-block__link .link-ttl {
position: relative;
z-index: 1;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.1;
color: var(--primary-white);
}
@media screen and (min-width: 769px) {
.p-quality-block__link .link-ttl {
font-size: 2.8rem;
}
}
.p-quality-block__link .link-plus {
display: block;
width: 4rem;
height: 4rem;
border-radius: 9999px;
border: 1px solid var(--primary-white);
position: absolute;
bottom: 2rem;
right: 2rem;
z-index: 1;
transition: all 0.3s ease;
}
.p-quality-block__link .link-plus::before,
.p-quality-block__link .link-plus::after {
content: "";
display: block;
width: 30%;
height: 1px;
background-color: var(--primary-white);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.p-quality-block__link .link-plus::after {
transform: rotate(90deg);
}
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
.p-quality-block__link:hover {
background-color: var(--secondary-blue);
}
}