@charset "UTF-8";
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
font-size: 100%;
}
body {
min-height: 100%;
font-size: 1rem;
line-height: 1;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
:where(img, svg, video, canvas, audio, iframe) {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
:where(ul[class], ol[class]) {
list-style: none;
}
:where(input, button, textarea, select) {
font: inherit;
color: inherit;
}
:where(button, [role=button]) {
touch-action: manipulation;
}
:where(textarea) {
resize: vertical;
min-block-size: 3lh;
}
:where(a, button, label, summary, [tabindex]:not([tabindex*="-"])) {
color: inherit;
text-decoration: none;
}
:where(a, button, label:has(input), summary, [tabindex]:not([tabindex*="-"])) {
cursor: pointer;
}
:where(a:not([class])) {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
:where(sub, sup) {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
:where(sub) {
bottom: -0.25em;
}
:where(sup) {
top: -0.5em;
}
:where(em, b, strong) {
font-weight: bold;
}
:where(p, h1, h2, h3, h4, h5, h6) {
overflow-wrap: break-word;
}
:where(p) {
text-wrap: pretty;
}
:where(table) {
width: 100%;
border-collapse: collapse;
}
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid;
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
:focus-visible {
transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
}
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
:where([hidden]) {
display: none;
}
summary::marker, summary::-webkit-details-marker {
display: none;
}
:where(body) {
font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.05em;
}
:where(a, button, input[type=submit], input[type=reset], input[type=button]) {
transition: 0.3s ease;
}
@media (hover: hover) {
:where(a, button, input[type=submit], input[type=reset], input[type=button]):hover {
opacity: 0.7;
}
}
:where(p) {
line-height: 1.875;
letter-spacing: 0.1em;
}
:where(p) + :where(p) {
margin-top: 1.5em;
}
.u-text-main {
color: #8b2e2e;
}
.u-text-bold {
font-weight: 700;
}
.u-text-highlight {
background: linear-gradient(#fef8b4, #fef8b4) repeat-x 0 0/100% 1.2em;
color: #000;
}
.u-text-left {
text-align: left;
}
.u-text-center {
text-align: center;
}
.u-text-right {
text-align: right;
}
.u-rounded {
border-radius: 10px;
}
.c-title {
font-weight: 700;
line-height: 1.3;
}
.c-title--pagetitle {
width: fit-content;
margin-left: 45px;
background: rgba(0, 0, 0, 0.68);
color: rgb(255, 255, 255);
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
}
.c-title--skin01 {
margin-bottom: 44px;
font-size: 2.25rem;
color: rgb(84, 84, 84);
text-align: center;
}
.c-title--skin02 {
margin-bottom: 36px;
font-size: 1.875rem;
color: rgb(84, 84, 84);
text-align: center;
}
.c-title--h2 {
margin-bottom: 44px;
font-size: 2rem;
color: rgb(84, 84, 84);
text-align: center;
}
.c-title--h3 {
margin-bottom: 32px;
color: rgb(84, 84, 84);
font-size: 1.75rem;
text-align: center;
}
.c-title--h4 {
margin-bottom: 12px;
font-size: 1.5rem;
}
.c-title--h5 {
margin-bottom: 8px;
font-size: 1.25rem;
}
.c-title--h6 {
margin-bottom: 8px;
font-size: 1.125rem;
}
.c-button {
display: inline-flex;
justify-content: center;
align-items: center;
max-width: 100%;
min-width: min(324px, 100%);
padding: 20px 24px;
border-radius: 10em;
border: 1px solid #8b2e2e;
background-color: #8b2e2e;
color: #fff;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.2;
}
.c-button::after {
display: inline-block;
content: "→";
margin-left: 0.3em;
font-family: sans-serif;
vertical-align: middle;
}
.c-button--outline {
border: 1px solid #8b2e2e;
background-color: #fff;
color: #8b2e2e;
}
.c-button--large {
font-size: 1.5rem;
}
.c-button-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 50px;
}
.c-action-button {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 12px 5px 12px 2.8em;
border-radius: 6px;
color: #fff;
font-size: 1.125rem;
font-weight: 700;
}
.c-action-button::before {
position: absolute;
display: block;
content: "";
top: 8px;
left: 8px;
bottom: 8px;
width: 2.4em;
}
.c-action-button--line {
background-color: #57ca6d;
}
.c-action-button--line::before {
background: url('data:image/svg+xml;utf8,') no-repeat center center/contain;
}
.c-action-button--tel {
background-color: #8b2e2e;
}
.c-action-button--tel::before {
background: url('data:image/svg+xml;utf8,') no-repeat center center/contain;
}
.c-action-button--mail {
background-color: #000;
}
.c-action-button--mail::before {
background: url('data:image/svg+xml;utf8,') no-repeat center center/contain;
}
.c-floating-button {
display: grid;
place-content: center;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: #000;
text-align: center;
color: #fff;
font-weight: 700;
line-height: 1.7;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.c-floating-button.is-show {
opacity: 1;
visibility: visible;
transition: 0.3s ease;
}
@media (hover: hover) {
.c-floating-button.is-show:hover {
opacity: 0.7;
}
}
.c-floating-button--contact {
width: 200px;
box-shadow: 0px 5px 9.9px 0.1px rgba(0, 0, 0, 0.2);
font-size: 1.3125rem;
}
.c-floating-button--top {
width: 100px;
box-shadow: 0px 5px 9.9px 0.1px rgba(0, 0, 0, 0.2);
font-size: 1.3125rem;
}
.c-floating-button--top__text {
display: flex;
flex-direction: column;
line-height: 1.4;
}
.c-floating-button--top__text::before {
display: inline-block;
content: "↑";
font-family: sans-serif;
font-weight: 400;
vertical-align: middle;
}
.c-floating-button__text::after {
display: inline-block;
content: "→";
margin-left: 0.3em;
font-family: sans-serif;
vertical-align: middle;
}
.c-telLink {
color: inherit;
}
.c-card {
display: flex;
flex-direction: column;
gap: 12px;
}
.c-card__image img {
width: 100%;
}
.c-card__title {
margin-bottom: 8px;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.5;
}
.c-card__body {
display: flex;
flex-direction: column;
height: 100%;
}
.c-card__body :where(p) {
color: #545454;
}
.c-card__price {
margin-bottom: 8px;
color: #000;
font-size: 1.3125rem;
}
.c-card__price .tax {
font-size: 1.125rem;
}
.c-card__price + :where(p) {
margin-top: 0;
}
.c-card__action {
margin-top: auto;
padding-top: 16px;
}
.c-info-card {
padding: 20px 28px 12px;
box-shadow: 0px 5px 9.9px 0.1px rgba(0, 0, 0, 0.2);
background-color: rgb(239, 239, 239);
}
.c-info-card__title {
font-size: 1.75rem;
color: #8b2e2e;
font-weight: 700;
line-height: 1.3;
}
.c-info-card__button-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 24px;
}
.c-post-card__link {
display: flex;
flex-direction: column;
gap: 20px;
}
.c-post-card__image img {
width: 100%;
aspect-ratio: 240/180;
object-fit: cover;
}
.c-post-card__meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
.c-post-card__category {
display: inline-block;
font-weight: 700;
}
.c-post-card__category-blog {
background-color: #fef8b4;
}
.c-post-card__category-news {
background-color: #f6dae1;
}
.c-post-card__title {
margin-top: 0;
}
.c-banner-link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 10px 20px 16px;
border-radius: 10px;
}
.c-banner-link__image {
width: 100%;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.c-banner-link__image img {
max-width: 80%;
max-height: 100%;
object-fit: contain;
}
.c-banner-link__text {
color: #fff;
font-size: 1.125rem;
font-weight: 700;
text-align: center;
}
.c-banner-link__text::after {
display: inline-block;
content: "→";
margin-left: 0.3em;
font-family: sans-serif;
vertical-align: middle;
}
.c-banner-link--tcj {
background-color: #8b2e2e;
}
.c-banner-link--grit {
background-color: #000;
}
.c-faq__list :where(p) {
line-height: 1.5;
}
.c-faq__item {
padding-block: 32px;
border-bottom: 1px solid #000;
}
.c-faq__question {
padding-top: 6px;
margin-bottom: 32px;
padding-left: 1.8em;
font-weight: 700;
line-height: 1.5;
position: relative;
}
.c-faq__question:before {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
content: "Ｑ";
color: #8b2e2e;
font-size: 1.5rem;
font-weight: 700;
}
.c-faq__answer {
padding-top: 6px;
padding-left: 1.8em;
line-height: 1.5;
position: relative;
}
.c-faq__answer:before {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
content: "Ａ";
color: #57ca6d;
font-size: 1.5rem;
font-weight: 700;
}
.c-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
line-height: 1.4;
}
.c-list--disc > li {
padding-left: 1.6em;
position: relative;
}
.c-list--disc > li:before {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
content: "●";
color: #8b2e2e;
}
.c-list--number {
counter-reset: num;
}
.c-list--number > li {
padding-left: 1.6em;
position: relative;
}
.c-list--number > li:before {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
content: counter(num) ".";
counter-increment: num;
}
.c-column {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.c-table {
width: 100%;
}
.c-table :is(th, td) {
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
padding: 8px 12px;
line-height: 1.5;
}
.c-table th {
background: #000;
color: #fff;
text-align: left;
}
.c-table td {
background-color: #f0f0f0;
color: #545454;
}
.c-w0 {
width: 0%;
}
.c-w4 {
width: 4%;
}
.c-w8 {
width: 8%;
}
.c-w12 {
width: 12%;
}
.c-w16 {
width: 16%;
}
.c-w20 {
width: 20%;
}
.c-w24 {
width: 24%;
}
.c-w28 {
width: 28%;
}
.c-w32 {
width: 32%;
}
.c-w36 {
width: 36%;
}
.c-w40 {
width: 40%;
}
.c-w44 {
width: 44%;
}
.c-w48 {
width: 48%;
}
.c-w52 {
width: 52%;
}
.c-w56 {
width: 56%;
}
.c-w60 {
width: 60%;
}
.c-w64 {
width: 64%;
}
.c-w68 {
width: 68%;
}
.c-w72 {
width: 72%;
}
.c-w76 {
width: 76%;
}
.c-w80 {
width: 80%;
}
.c-w84 {
width: 84%;
}
.c-w88 {
width: 88%;
}
.c-w92 {
width: 92%;
}
.c-w96 {
width: 96%;
}
.c-w100 {
width: 100%;
}
.l-container {
overflow-x: clip;
}
.l-wrapper {
max-width: min(96vw, 1000px);
margin-inline: auto;
}
.l-header {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0px 5px 9.9px 0.1px rgba(0, 0, 0, 0.2);
background-color: #8b2e2e;
color: #fff;
}
.l-header__inner {
display: flex;
justify-content: center;
gap: 12px;
max-width: min(96vw, 1300px);
margin-inline: auto;
}
.l-header__logo {
padding-block: 20px;
}
.l-header__logo-link {
display: inline-grid;
grid-template-areas: "logo name" "logo desc";
grid-template-columns: 84px 1fr;
gap: 0 20px;
white-space: nowrap;
}
.l-header__logo-image {
grid-area: logo;
}
.l-header__logo-name {
grid-area: name;
font-size: 1.625rem;
font-weight: 700;
}
.l-header__logo-desc {
grid-area: desc;
font-size: 1.3125rem;
font-weight: 700;
}
.l-navBtn {
display: none;
}
.l-nav__list {
display: flex;
height: 100%;
font-size: 1.125rem;
font-weight: 700;
position: relative;
}
.l-nav__list:after {
position: absolute;
display: block;
content: "";
inset: 0 0 0 100%;
z-index: -1;
width: 50vw;
background-color: #000;
}
.l-nav__link {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 12px;
text-align: center;
}
.l-nav__link--contact {
margin-left: 12px;
background-color: #000;
transition: 0.3s ease;
}
@media (hover: hover) {
.l-nav__link--contact:hover {
opacity: 1;
color: rgba(255, 255, 255, 0.7);
}
}
.l-section {
padding-block: 60px;
}
.l-section--bgBlack {
background-color: #000;
color: #fff;
}
.l-section--bgBlack .c-title {
color: #fff;
}
:where(.l-section > .l-wrapper) > :where(*:not(.c-title)) + :where(*) {
margin-top: 40px;
}
.l-main {
padding-bottom: 100px;
}
:where(.l-main :is(h1, h2, h3, h4, h5, h6):not(:first-child)) {
margin-top: clamp(60px, 8vw, 100px);
}
:where(.l-main a) {
color: #8b2e2e;
font-weight: 700;
}
.l-pagetitle {
display: grid;
grid-template: 1fr/1fr;
min-height: 300px;
margin-bottom: 40px;
}
.l-pagetitle .l-wrapper {
grid-column: 1/2;
grid-row: 1/2;
order: 2;
display: flex;
align-items: center;
width: 100%;
padding-block: 30px;
}
.l-pagetitle__image {
grid-column: 1/2;
grid-row: 1/2;
order: 1;
}
.l-pagetitle__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.l-footer {
position: relative;
padding: 70px 0;
background-color: #000;
color: #fff;
background-color: #000;
}
.l-footer a {
color: #fff;
}
.l-footer__inner {
display: grid;
grid-template-columns: auto auto;
grid-template-areas: "logo logo" "address nav";
gap: 40px;
}
.l-footer__logo {
grid-area: logo;
display: inline-grid;
grid-template-areas: "logo name" "logo desc";
gap: 0 20px;
width: fit-content;
white-space: nowrap;
}
.l-footer__logo-image {
grid-area: logo;
}
.l-footer__logo-name {
grid-area: name;
font-size: 1.625rem;
font-weight: 700;
}
.l-footer__logo-desc {
grid-area: desc;
font-size: 1.3125rem;
font-weight: 700;
}
.l-footer__address {
grid-area: address;
font-size: 1.125rem;
font-weight: 700;
line-height: 2;
}
.l-footer__address p + p {
margin-top: 0;
}
.l-footer__nav-group {
grid-area: nav;
}
.l-footer__nav-list {
columns: 2;
column-gap: 40px;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.5;
}
.l-footer__nav-list > li {
margin-bottom: 6px;
}
.l-footer__nav-link {
text-decoration: underline;
}
.l-footer__nav-link::after {
display: inline-block;
content: "→";
margin-left: 0.3em;
font-family: sans-serif;
vertical-align: middle;
}
.l-footer__copyright {
margin-top: 60px;
}
.l-floating-actions {
position: fixed;
right: 20px;
bottom: 70px;
z-index: 800;
}
.l-floating-actions.is-above-footer {
position: absolute;
bottom: calc(100% + 10px);
}
.l-floating-actions .c-floating-button {
position: absolute;
right: 0;
bottom: 0;
}
.l-fixed-actions {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 999;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
padding: 10px;
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}
.l-fixed-actions__inner {
display: flex;
gap: 10px;
max-width: 600px;
margin: 0 auto;
}
.mv-slider__slide img {
display: block;
width: 100%;
margin-inline: auto;
}
@media (max-width: 1919px) {
.mv-slider__slide img {
position: relative;
left: 50%;
transform: translateX(-50%);
max-width: none;
width: 1920px;
}
}
@media (max-width: 1000px) {
.mv-slider__slide img {
width: 192vw;
}
}
.intro-wrap {
padding-block: 50px;
}
.intro-cta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
max-width: 900px;
margin-inline: auto;
padding: 24px 28px;
box-shadow: 0px 5px 9.9px 0.1px rgba(0, 0, 0, 0.2);
background-color: rgb(239, 239, 239);
}
.intro-cta__text {
color: #8b2e2e;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.286;
}
.intro-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px 12px;
}
.intro-list .c-card {
height: 100%;
}
.mechanic-wrap {
padding-block: 50px;
background-color: #000;
color: #fff;
}
.mechanic-wrap .c-title--skin02 {
color: #fff;
}
.mechanic-grid {
display: grid;
grid-template-columns: 534px minmax(0, 1fr);
gap: 48px;
}
.mechanic-grid__image {
margin-right: max(-534px, -27.8125vw);
}
.mechanic-grid__image img {
border-radius: 10px 0 0 10px;
}
.reason-wrap {
padding-block: 50px 100px;
}
.reason-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px 12px;
}
.reason-list .c-card {
height: 100%;
}
.reason-cta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
margin-top: 52px;
max-width: 936px;
margin-inline: auto;
}
.blog-wrap {
padding-block: 50px;
background-color: #f0f0f0;
}
.blog-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 24px 19px;
}
.related-wrap {
padding-block: 100px;
}
.related-list {
display: flex;
flex-wrap: wrap;
gap: 26px;
justify-content: center;
max-width: 826px;
margin-inline: auto;
}
.related-list__item {
flex: 1;
}
@media screen and (max-width: 1249.98px) {
.l-header__logo-name {
font-size: 1.25rem;
}
.l-header__logo-desc {
font-size: 1rem;
}
.l-nav__list {
font-size: 0.875rem;
}
.l-nav__link {
padding: 4px;
}
}
@media screen and (max-width: 959.98px) {
.l-header__inner {
gap: 6px;
}
.l-header__logo-link {
grid-template-columns: 52px 1fr;
gap: 2px 8px;
}
.l-header__logo-name {
font-size: 1rem;
}
.l-header__logo-desc {
font-size: 0.75rem;
}
.l-nav_list {
font-size: 13px;
letter-spacing: 0;
}
.mechanic-grid {
grid-template-columns: 434px minmax(0, 1fr);
}
}
/* ▼タブレット用デザインとして付け足すデザイン */
@media print, screen and (min-width: 768px) {
.u-only-sp {
display: none;
}
.c-telLink {
pointer-events: none;
}
.c-column--col2to1 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
.c-column--col3to1 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.c-column--col4to1, .c-column--col4to2 {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.c-column--col6to2, .c-column--col6to3 {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
}
/* ▼モバイルのみ付け足すデザイン */
@media screen and (max-width: 767.98px) {
.u-only-pc {
display: none;
}
.c-title--pagetitle {
margin-left: 0;
font-size: 1.5rem;
}
.c-title--skin01 {
margin-bottom: 20px;
font-size: 1.375rem;
}
.c-title--skin02 {
margin-bottom: 16px;
font-size: 1.25rem;
}
.c-title--h2 {
margin-bottom: 20px;
font-size: 1.375rem;
}
.c-title--h3 {
margin-bottom: 16px;
font-size: 1.25rem;
}
.c-title--h4 {
margin-bottom: 8px;
font-size: 1.125rem;
}
.c-title--h5 {
font-size: 1rem;
}
.c-title--h6 {
font-size: 0.875rem;
}
.c-button {
padding: 12px 20px;
font-size: 1rem;
}
.c-button--large {
font-size: 1.125rem;
}
.c-button-group {
margin-top: 30px;
}
.c-action-button {
padding: 8px 5px 8px 2.3em;
font-size: 0.6875rem;
}
.c-action-button::before {
position: absolute;
display: block;
content: "";
top: 2px;
left: 8px;
bottom: 2px;
width: 1.2em;
}
.c-floating-button--contact {
width: 90px;
font-size: 0.875rem;
}
.c-floating-button--top {
width: 60px;
font-size: 0.875rem;
}
.c-floating-button__text {
line-height: 1.4;
}
.c-floating-button__text::after {
content: none;
}
.c-card {
gap: 8px;
}
.c-card__body :where(p) {
font-size: 0.875rem;
}
.c-card__title {
margin-bottom: 4px;
font-size: 1.125rem;
}
.c-card__price {
margin-bottom: 4px;
font-size: 1rem;
}
.c-card__price .tax {
font-size: 0.875rem;
}
.c-card__action {
text-align: center;
}
.c-info-card {
padding: 12px 20px;
}
.c-info-card__title {
font-size: 1.125rem;
}
.c-info-card__button-group {
margin-top: 12px;
}
.c-post-card__link {
gap: 12px;
}
.c-post-card__meta {
margin-bottom: 8px;
}
.c-post-card__title {
font-size: 1rem;
}
.c-banner-link {
padding: 12px;
border-radius: 6px;
}
.c-banner-link__image {
width: 170px;
height: 40px;
}
.c-banner-link__text {
font-size: 0.875rem;
}
.c-faq__item {
padding-block: 20px;
}
.c-faq__question {
margin-bottom: 12px;
}
.c-column--col2to1, .c-column--col3to1, .c-column--col4to1 {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.c-column--col4to2, .c-column--col6to2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.c-column--col6to3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.l-wrapper {
max-width: min(92vw, 1000px);
}
.l-header__inner {
justify-content: start;
max-width: min(92vw, 1000px);
height: 56px;
}
.l-header__logo {
padding-block: 10px;
}
.l-nav {
position: absolute;
top: 100%;
left: 0;
overflow-y: auto;
width: 100vw;
max-height: 0;
background: black;
transition: max-height 0.6s ease;
}
.l-navBtn {
position: absolute;
inset: 0 0 0 auto;
aspect-ratio: 1/1;
display: block;
border: 0;
background-color: #000;
color: #fff;
}
.l-navBtn__bar {
position: absolute;
left: 16px;
width: 24px;
height: 2px;
background-color: #fff;
transition: all 0.3s ease;
}
.l-navBtn__bar:nth-child(1) {
top: 16px;
}
.l-navBtn.is-active .l-navBtn__bar:nth-child(1) {
top: 26px;
transform: rotate(45deg);
}
.l-navBtn__bar:nth-child(2) {
top: 26px;
}
.l-navBtn.is-active .l-navBtn__bar:nth-child(2) {
width: 0;
}
.l-navBtn__bar:nth-child(3) {
top: 36px;
}
.l-navBtn.is-active .l-navBtn__bar:nth-child(3) {
top: 26px;
transform: rotate(-45deg);
}
.l-nav__list {
display: block;
}
.l-nav__list::after {
content: none;
}
.l-nav__item:not(:first-child) {
border-top: 1px solid #666;
}
.l-nav__link {
justify-content: start;
padding: 20px;
text-align: left;
}
.l-nav__link br {
display: none;
}
.l-nav__link::after {
display: inline-block;
content: "→";
margin-left: 0.3em;
font-family: sans-serif;
vertical-align: middle;
}
.l-nav__link--contact {
margin-left: 0;
}
.l-section {
padding-block: 20px;
}
:where(.l-section > .l-wrapper) > :where(*:not(.c-title)) + :where(*) {
margin-top: 20px;
}
.l-main {
padding-bottom: 60px;
}
:where(.l-main :is(h1, h2, h3, h4, h5, h6):not(:first-child)) {
margin-top: clamp(60px, 8vw, 100px);
}
.l-pagetitle {
min-height: 120px;
margin-bottom: 20px;
}
.l-pagetitle .l-wrapper {
padding-block: 20px;
}
.l-footer {
padding: 40px 0 70px;
}
.l-footer__inner {
grid-template-columns: 1fr;
grid-template-areas: "logo" "address" "nav";
gap: 30px 20px;
}
.l-footer__logo {
grid-template-columns: 52px 1fr;
gap: 2px 8px;
}
.l-footer__logo-name {
font-size: 1.1875rem;
}
.l-footer__logo-desc {
font-size: 0.9375rem;
}
.l-footer__address {
font-size: 1rem;
}
.l-footer__nav-list {
columns: 1;
font-size: 1rem;
}
.l-footer__copyright {
margin-top: 30px;
font-size: 0.75rem;
}
.l-floating-actions {
right: 8px;
}
.l-fixed-actions__inner {
gap: 6px;
}
.mv-slider__slide img {
width: 100%;
}
.intro-wrap {
padding-block: 32px;
}
.intro-cta {
flex-wrap: wrap;
padding: 20px;
}
.intro-cta__text {
font-size: 1.125rem;
}
.mechanic-wrap {
padding-block: 32px;
}
.mechanic-grid {
grid-template-columns: minmax(0, 1fr);
gap: 30px;
}
.reason-wrap {
padding-block: 32px;
}
.reason-cta {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 30px;
}
.blog-wrap {
padding-block: 32px;
}
.related-wrap {
padding-block: 32px;
}
.related-list {
flex-direction: column;
gap: 16px;
}
}
/* #Print Fixes */
@media print {
* {
box-shadow: none !important;
text-shadow: none !important;
}
@page {
margin: 1cm 1cm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
thead {
display: table-header-group;
}
tr, img {
page-break-inside: avoid;
}
body {
width: auto;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}