@charset "UTF-8";
/* =============================================================
Custom Properties
* ============================================================= */
:root {
/* ========================================
color
======================================== */
/* text color */
--base-color: #212121;
/* key color */
--key-color: #fdd000;
/* point color */
--point-color: #132848;
--point-dark-color: #0b1729;
/* background color */
--bg-color: #f5f5f5;
--bg-dark-color: #dcdbd0;
/* border color */
--border-color: #bfbfbf;
--ciao-color:#0168b7;
--ciao-orange-color:#f4940a;
--ciao-green-color:#3fc1b9;
/* color */
/* ========================================
layouts
======================================== */
--header-height: calc(60px + var(--slope-1px) * 20);
--fixed-nav-height:90px;
--inner-width: 1080;
--inner-width-px: calc(var(--inner-width) * 1px);
--inner-padding: 0px;
--inner-overflow: calc(var(--vw) * 50 - var(--inner-width-px) * .5);
--outer-padding: 6.07613%;
/* utility */
--vh: 1vh;
--slope-1px: clamp(0px, -.95663px + .2551vw, 1px);
--slope-2px: clamp(0px, -1.91327px + .5102vw, 2px);
--slope-3px: clamp(0px, -2.8699px + .76531vw, 3px);
--slope-4px: clamp(0px, -3.82653px + 1.02041vw, 4px);
--slope-5px: clamp(0px, -4.78316px + 1.27551vw, 5px);
--base-border-radius:10px;
/* ========================================
font
======================================== */
/* size */
--line-height: 1.75;
--line-space: calc((1em - 1lh) / 2);
--is-support-lh: initial;
--is-support-not-lh: "";
/* family */
--base-font-family: "Noto Sans JP", sans-serif;
--en-font-family: "Roboto Condensed", sans-serif;
--en-font-family2: "Roboto", sans-serif;
/* svg icon */
--icon-arrow: url("data:image/svg+xml;utf8,");
--icon-arrow-right: url("data:image/svg+xml;utf8,");
--icon-arrow-white: url("data:image/svg+xml;utf8,");
--icon-showroom: url("data:image/svg+xml;utf8,");
--icon-newcar: url("data:image/svg+xml;utf8,");
--icon-usedcar: url("data:image/svg+xml;utf8,");
--icon-maintenance: url("data:image/svg+xml;utf8,");
--icon-aftersupport: url("data:image/svg+xml;utf8,");
--icon-recruit: url("data:image/svg+xml;utf8,");
--icon-search-white: url('data:image/svg+xml;utf8,');
--icon-map: url('data:image/svg+xml;utf8,');
--icon-reservation: url("data:image/svg+xml;utf8,");
--icon-zoom: url("data:image/svg+xml;utf8,");
--icon-zoom-white: url("data:image/svg+xml;utf8,");
--icon-clock: url('data:image/svg+xml;utf8,');
--icon-calendar: url('data:image/svg+xml;utf8,');
--icon-tel: url('data:image/svg+xml;utf8,');
--icon-usedcar-search: url('data:image/svg+xml;utf8,');
--icon-usedcar-assessment: url('data:image/svg+xml;utf8,');
}
@media screen and (max-width: 960px) {
:root {
--fixed-nav-height:52px;
}
}
@media screen and (max-width: 1184px) {
:root {
--inner-padding:4.8%;
}
}
@media screen and (max-width: 960px) {
:root {
--base-border-radius:5px;
}
}
:where(:lang(en)) {
--line-space: var(--is-support-lh, calc((1cap - 1lh) / 2)) var(--is-support-not-lh, 0px);
}
@supports not (top: 1lh) {
:where(:root) {
--is-support-lh: "";
--is-support-not-lh: initial;
}
}
/* =============================================================
Base
* ============================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
margin: 0;
padding: 0;
background: var(--bg-color);
font-size: 62.5%;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: var(--base-color);
letter-spacing: .03em;
font-size: calc(1.5rem + var(--slope-1px));
font-family: var(--base-font-family);
font-feature-settings: "palt";
line-height: 1.75;
-webkit-text-size-adjust: 100%;
}
#ttr238226 .ttr_chat {
margin-bottom: var(--fixed-nav-height);
}
#ttr238226[data-ttr-device=mobile][data-ttr-status="chat"] [data-ttr=chat] {
max-height: calc(100% - var(--fixed-nav-height) - var(--header-height));
margin-top: var(--header-height);
}
:where(img, svg) {
display: block;
height: auto;
max-width: 100%;
}
:where(svg path:not([fill])) {
fill: currentColor;
}
img[src$=".svg"] {
opacity: 0;
}
a {
color: var(--base-color);
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a.js-tel {
text-decoration: none;
}
a.js-tel._active {
text-decoration: underline;
}
a.js-tel._inactive {
color: var(--base-color);
text-decoration: none;
}
button {
cursor: pointer;
}
sup {
vertical-align: super;
font-size: 70%;
}
sub {
vertical-align: sub;
font-size: 70%;
}
*[data-anchor-id] {
scroll-margin-top: var(--heeader-height);
}
*[data-toggle-id] {
display: none;
}
*[data-intersection][data-intersection-fade] {
opacity: 0;
transition: all .5s ease-out .2s;
}
*[data-intersection][data-intersection-fade][data-intersecting=true] {
opacity: 1;
transition: all .5s ease-out .2s;
}
*[data-intersection][data-intersection-scale] {
opacity: 0;
transition: all .5s ease-out .2s;
transform: scale(.9);
}
*[data-intersection][data-intersection-scale][data-intersecting=true] {
opacity: 1;
transition: all .5s ease-out .2s;
transform: scale(1);
}
/* =============================================================
Loader
* ============================================================= */
.l-loader {
position: fixed;
top: 0;
left: 0;
z-index: 200000;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: url(../img/logo.png) 50% 50%/300px auto no-repeat var(--bg-color);
perspective: 10rem;
transition: all .4s ease-in;
}
body.is-loaded .l-loader {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
/* =============================================================
Wrapper
* ============================================================= */
.l-wrapper {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
min-height: 100%;
min-height: 100vh;
margin: 0 auto;
padding: 0;
}
@media print {
.l-wrapper {
min-width: 1080px;
}
}
/* =============================================================
Header
* ============================================================= */
/* header
=============================== */
.l-header {
position: fixed;
top: 0;
left: 0;
z-index: 100003;
display: grid;
align-items: center;
grid-template-columns: 1fr auto 82px;
gap: 20px;
width: 100%;
height: var(--header-height);
padding-left: calc(17px + var(--slope-1px)* 13);
background: #fff;
font-size: calc(11px + var(--slope-1px) * 1);
}
@media screen and (max-width: 960px) {
.l-header {
grid-template-columns: 1fr auto;
padding-right: 2.5%;
}
}
@media print {
.l-header {
display: none;
visibility: hidden;
opacity: 0;
}
}
/* l-header-logo
=============================== */
.l-header-logo {
position: relative;
z-index: 4;
width: 240px;
margin: auto 0;
}
@media screen and (max-width: 560px) {
.l-header-logo {
width: 100%;
max-width: 240px;
}
}
.l-header-logo a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
transition: opacity .25s;
}
.l-header-logo a img {
min-width: 0%;
}
.l-header-logo a:hover {
opacity: .8;
}
/* l-header-menu
=============================== */
/* l-header-toggle
=============================== */
.l-header-toggle {
position: relative;
z-index: 100004;
display: flex;
visibility: visible;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
outline: none;
border: 0;
border-left: 1px solid var(--border-color);
border-radius: 0;
background: none;
color: inherit;
cursor: pointer;
pointer-events: all;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
@media screen and (max-width: 960px) {
.l-header-toggle {
display: none;
visibility: hidden;
}
}
body.is-header-menu-open .l-header-toggle {
border-left-color: transparent;
}
.l-header-toggle:hover {
opacity: .8;
}
.l-header-toggle span {
display: none;
}
.l-header-toggle > div {
position: relative;
width: 24px;
height: 2px;
background: var(--base-color);
transition: background .2s;
}
.l-header-toggle > div:before, .l-header-toggle > div:after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: var(--base-color);
}
.l-header-toggle > div:before {
bottom: 7px;
transition: background .2s, bottom .2s .2s, transform .2s;
}
.l-header-toggle > div:after {
top: 7px;
transition: background .2s, top .2s .2s, transform .2s;
}
body.is-header-menu-open .l-header-toggle > div {
background: transparent;
transition: background .2s;
}
body.is-header-menu-open .l-header-toggle > div:before, body.is-header-menu-open .l-header-toggle > div:after {
background: #fff;
}
body.is-header-menu-open .l-header-toggle > div:before {
bottom: 0;
transition: background .2s, bottom .2s, transform .2s .2s;
transform: rotate(45deg);
}
body.is-header-menu-open .l-header-toggle > div:after {
top: 0;
transition: background .2s, top .2s, transform .2s .2s;
transform: rotate(-45deg);
}
/* l-header-nav
=============================== */
.l-header-nav {
display: flex;
flex-direction: row-reverse;
gap: 2em;
}
@media screen and (max-width: 960px) {
.l-header-nav {
z-index: 2;
display: block;
padding: calc(var(--header-height) + calc(10px + var(--slope-1px) * 10) * 2) 0 24px;
}
}
/* l-header-contact
============================== */
.l-header-contact {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
width: 20em;
}
@media screen and (max-width: 960px) {
.l-header-contact {
width: 13em;
}
}
.l-header-contact__button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 15em;
outline: none;
border: 1px solid var(--_border-color);
border-radius: var(--base-border-radius);
background: var(--_bg-color);
box-shadow: 2px 2px;
color: var(--_color);
text-decoration: none;
font-weight: bold;
font-size: calc(12px + var(--slope-1px) * 2);
transition: background .3s, color .1s, translate .3s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-block: .5em;
translate: -2px -2px;
--_bg-color:var(--key-color);
--_color:var(--point-color);
--_border-color:var(--point-color);
--_hover-bg-color:var(--point-color);
}
@media (any-hover: hover) {
.l-header-contact__button:where(:hover) {
background: var(--_hover-bg-color);
box-shadow: none;
color: #fff;
translate: 0 0;
}
}
/* l-header-toggle-menu
============================== */
.l-header-toggle-menu {
position: fixed;
top: 0;
left: 0;
z-index: 100003;
overflow-y: auto;
width: 100%;
height: 100%;
background: var(--point-color);
color: #fff;
transition: transform .3s cubic-bezier(.65, 0, .35, 1), opacity 0s linear;
transform: translateY(100lvh);
pointer-events: none;
overscroll-behavior-y: none;
}
body.is-header-menu-open .l-header-toggle-menu {
transform: translateY(0);
pointer-events: auto;
}
.l-header-toggle-menu__inner {
padding: var(--header-height) var(--outer-padding) var(--outer-padding);
opacity: 0;
transition: opacity 0s linear .4s, transform 0s linear .4s;
transform: translateY(20px);
}
@media screen and (max-width: 960px) {
.l-header-toggle-menu__inner {
padding: var(--outer-padding) var(--outer-padding) calc(var(--fixed-nav-height) + var(--outer-padding));
}
}
body.is-header-menu-open .l-header-toggle-menu__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
opacity: 1;
transition: all .4s ease-out .45s;
transform: translateY(0);
}
@media screen and (max-width: 960px) {
body.is-header-menu-open .l-header-toggle-menu__inner {
height: auto;
}
}
.l-header-toggle-menu__foot {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 2em;
width: 100%;
height: -moz-fit-content;
height: fit-content;
padding-bottom: var(--outer-padding);
}
@media screen and (max-width: 960px) {
.l-header-toggle-menu__foot {
justify-content: center;
align-self: flex-end;
margin-top: var(--outer-padding);
}
}
.l-header-toggle-menu-banner {
display: block;
}
.l-header-toggle-menu-icon {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1em;
font-size: 12px;
}
@media screen and (max-width: 960px) {
.l-header-toggle-menu-icon {
flex-shrink: 0;
justify-content: center;
}
}
.l-header-toggle-menu-icon__head {
width: -moz-fit-content;
width: fit-content;
color: #fff;
font-weight: 500;
line-height: 1;
}
.l-header-toggle-menu-icon__list {
display: flex;
gap: .5em;
}
.l-header-toggle-menu-icon__list li {
align-content: center;
width: 2em;
}
.l-header-toggle-menu-icon__list li a {
display: block;
transition: opacity .3s;
}
@media (any-hover: hover) {
.l-header-toggle-menu-icon__list li a:where(:hover) {
opacity: .7;
}
}
/* =============================================================
Main
* ============================================================= */
/* main
=============================== */
.l-main {
position: relative;
flex-grow: 1;
width: 100%;
min-height: 0%;
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
max-height: 100%;
margin: 0 auto;
padding: 0;
padding: 0 var(--inner-padding);
}
body[data-id=rakumaru] .l-main, body[data-id=zankure] .l-main, body[data-id=zankure_car] .l-main, body[data-id=insurance] .l-main {
max-width: none;
padding: 0;
}
body[data-id=index] .l-main {
max-width: calc(1366px + var(--index-inner-padding) * 2);
--index-inner-padding: 0px;
}
@media screen and (max-width: 1396px) {
body[data-id=index] .l-main {
--inner-padding:15px;
}
}
@media print {
.l-main {
min-width: 960px;
}
}
/* heading
=============================== */
.l-main-heading {
padding: calc(87px + var(--slope-1px) * 57) var(--inner-padding) calc(40px + var(--slope-1px) * 20);
}
body[data-category=showroom] .l-main-heading,
body[data-category=aftersupport] .l-main-heading,
body[data-category=company] .l-main-heading,
body[data-category=information] .l-main-heading,
body[data-category="404"] .l-main-heading {
position: relative;
left: 50%;
width: 100vw;
max-width: 1366px;
background-image: url("../img/header-showroom-01_pc.png"), url("../img/header-showroom-02_pc.png");
background-position: left bottom, right bottom;
background-repeat: no-repeat, no-repeat;
translate: -50% 0;
}
@media screen and (max-width: 960px) {
body[data-category=showroom] .l-main-heading,
body[data-category=aftersupport] .l-main-heading,
body[data-category=company] .l-main-heading,
body[data-category=information] .l-main-heading,
body[data-category="404"] .l-main-heading {
background-image: url("../img/header-showroom-01_sp.png"), url("../img/header-showroom-02_sp.png");
background-position: left 75%, right 75%;
}
}
@media screen and (max-width: 560px) {
body[data-category=showroom] .l-main-heading,
body[data-category=aftersupport] .l-main-heading,
body[data-category=company] .l-main-heading,
body[data-category=information] .l-main-heading,
body[data-category="404"] .l-main-heading {
background-position: left 80%, right 80%;
background-size: auto auto, auto auto;
}
}
body[data-category=newcar] .l-main-heading,
body[data-category=usedcar] .l-main-heading {
position: relative;
left: 50%;
width: 100vw;
max-width: 1366px;
background-image: url("../img/header-car-01_pc.png"), url("../img/header-car-02_pc.png");
background-position: left bottom, right bottom;
background-repeat: no-repeat, no-repeat;
translate: -50% 0;
}
@media screen and (max-width: 960px) {
body[data-category=newcar] .l-main-heading,
body[data-category=usedcar] .l-main-heading {
background-image: url("../img/header-car-01_sp.png"), url("../img/header-car-02_sp.png");
background-position: left 75%, right 75%;
}
}
@media screen and (max-width: 560px) {
body[data-category=newcar] .l-main-heading,
body[data-category=usedcar] .l-main-heading {
background-position: left 80%, right 80%;
background-size: auto auto, auto auto;
}
}
body[data-category=maintenance] .l-main-heading {
position: relative;
left: 50%;
width: 100vw;
max-width: 1366px;
background-image: url("../img/header-maintenance-01_pc.png"), url("../img/header-maintenance-02_pc.png");
background-position: left bottom, right bottom;
background-repeat: no-repeat, no-repeat;
translate: -50% 0;
}
@media screen and (max-width: 960px) {
body[data-category=maintenance] .l-main-heading {
background-image: url("../img/header-maintenance-01_sp.png"), url("../img/header-maintenance-02_sp.png");
background-position: left 75%, right 75%;
}
}
@media screen and (max-width: 560px) {
body[data-category=maintenance] .l-main-heading {
background-position: left 80%, right 80%;
background-size: auto auto, auto auto;
}
}
/* breadcrumbs
=============================== */
.l-main > .l-main-breadcrumbs:first-child {
margin-top: var(--header-height);
padding-top: 1em;
}
/* main banner
=============================== */
.l-main-banner {
padding: 2.5em 0;
background: var(--bg-color);
}
.l-main-banner__inner {
width: 1080px;
max-width: 91.21523%;
margin: 0 auto;
}
@media screen and (max-width: 960px) {
.l-main-banner__inner {
width: 550px;
}
}
.l-main-banner-list {
display: flex;
flex-wrap: wrap;
width: 101.85185%;
margin: -.92593% -.92593%;
padding-top: 1px;
}
.l-main-banner-list__item {
width: 20%;
padding: .90909% .90909%;
}
@media screen and (max-width: 960px) {
.l-main-banner-list__item {
width: 50%;
}
}
/* main showroom nav
=============================== */
.l-main-showroom-nav {
padding: 5.85652% 0;
background: var(--bg-color);
}
.c-section._bg + .l-main-showroom-nav {
background: #fff;
}
.l-main-showroom-nav__inner {
width: 1080px;
max-width: 91.21523%;
margin: 0 auto;
}
/* main category nav
=============================== */
.l-main-category-nav {
padding: 4.39239% 0;
}
.c-section._bg + .l-main-showroom-nav + .l-main-category-nav {
background: var(--bg-color);
}
.l-main-category-nav__inner {
width: 1100px;
max-width: 84.91947%;
margin: 0 auto;
}
.l-main-category-nav__grid {
display: flex;
flex-wrap: wrap;
width: calc(100% + 2px);
}
.l-main-category-nav__item {
width: 33.33333%;
padding-right: 2px;
}
@media screen and (max-width: 560px) {
.l-main-category-nav__item {
width: 100%;
margin-top: 2px;
}
}
.l-page[data-category=car] .l-main-category-nav__item[data-banner=car] {
display: none;
}
.l-page[data-category=showroom] .l-main-category-nav__item[data-banner=campaign],
.l-page[data-category=campaign] .l-main-category-nav__item[data-banner=campaign],
.l-page[data-category=company] .l-main-category-nav__item[data-banner=campaign],
.l-page[data-category=other] .l-main-category-nav__item[data-banner=campaign] {
display: none;
}
.l-page[data-id=welcome] .l-main-category-nav__item[data-banner=campaign] {
display: block;
}
.l-page[data-category=maintenance] .l-main-category-nav__item[data-banner=maintenance] {
display: none;
}
.l-page[data-id=welcome] .l-main-category-nav__item[data-banner=welcome] {
display: none;
}
/* =============================================================
Footer
* ============================================================= */
.l-footer {
background: #fff;
}
/* l-footer-contact
=============================== */
.l-footer-contact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
gap: 1.35714em;
max-width: var(--inner-width-px);
padding: calc(26px + var(--slope-1px) * 16) var(--inner-padding) calc(19px + var(--slope-1px) * 37);
margin-inline: auto;
}
body[data-id=different] .l-footer-contact {
display: none;
visibility: hidden;
opacity: 0;
}
.l-footer-contact__head {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.l-footer-contact__title {
color: var(--point-color);
text-align: left;
letter-spacing: .025em;
font-weight: 900;
font-size: calc(24px + var(--slope-1px) * 22);
font-feature-settings: initial;
line-height: 1.36957;
-webkit-margin-after: calc(24px + var(--line-space));
margin-block-end: calc(24px + var(--line-space));
}
@media screen and (max-width: 960px) {
.l-footer-contact__title {
text-align: center;
-webkit-margin-after: calc(12px + var(--line-space));
margin-block-end: calc(12px + var(--line-space));
}
}
.l-footer-contact__text {
letter-spacing: .025em;
font-size: calc(14px + var(--slope-4px));
font-feature-settings: initial;
}
@media screen and (max-width: 960px) {
.l-footer-contact__text {
text-align: center;
}
}
.l-footer-contact__nav {
display: grid;
align-items: center;
grid-template-rows: 1fr 1fr;
gap: 1.3125em;
justify-items: center;
margin-top: 4px;
margin-bottom: -4px;
}
@media screen and (max-width: 960px) {
.l-footer-contact__nav {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
gap: .75em .5em;
}
}
.l-footer-contact__button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
height: 3.77778em;
max-width: 502px;
border: 1px solid var(--_border-color);
border-radius: var(--base-border-radius);
background: var(--_bg-color);
box-shadow: 2px 2px;
color: var(--_color);
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: calc(14px + var(--slope-4px));
transition: background .3s, color .1s, translate .3s ease-out;
translate: -2px -2px;
--_bg-color:var(--key-color);
--_color:var(--point-color);
--_border-color:var(--point-color);
--_hover-bg-color:var(--point-color);
}
.l-footer-contact__button::after {
content: "";
position: absolute;
top: 0;
right: 1.25em;
bottom: 0;
display: block;
width: 9px;
height: 15px;
margin: auto 0;
background: var(--point-color);
transition: all .2s ease-out;
-webkit-mask: var(--icon-arrow) 50% 50%/contain no-repeat;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}
@media screen and (max-width: 960px) {
.l-footer-contact__button::after {
width: 5px;
height: 10px;
}
}
@media (any-hover: hover) {
.l-footer-contact__button:where(:hover) {
background: var(--_hover-bg-color);
box-shadow: none;
color: #fff;
translate: 0 0;
}
.l-footer-contact__button:where(:hover):after {
background: #fff;
}
}
@media screen and (max-width: 960px) {
.l-footer-contact__button {
max-width: 100%;
}
}
.l-footer-contact-tel {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
width: 100%;
max-width: 502px;
padding: calc(15px + var(--slope-1px) * 5) clamp(20px, -46.2069px + 6.89655vw, 48px);
border: 1px solid var(--point-color);
background: var(--bg-color);
}
@media screen and (max-width: 960px) {
.l-footer-contact-tel {
flex-wrap: wrap;
grid-column: 1 / 3;
gap: .75em .875em;
max-width: 100%;
}
}
.l-footer-contact-tel__head {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
padding: .61111em;
background: var(--point-color);
color: #fff;
font-weight: bold;
font-size: calc(13px + var(--slope-1px) * 5);
line-height: 1;
}
@media screen and (max-width: 960px) {
.l-footer-contact-tel__head {
flex-grow: 1;
}
}
.l-footer-contact-tel__body {
flex-shrink: 0;
font-family: var(--en-font-family2);
line-height: 1.1lh;
}
@media screen and (max-width: 960px) {
.l-footer-contact-tel__body {
display: flex;
justify-content: center;
align-items: center;
}
}
.l-footer-contact-tel__body p {
display: flex;
justify-content: center;
align-items: center;
color: var(--point-color);
text-decoration: underline;
font-weight: bold;
font-size: calc(22px + var(--slope-1px) * 8);
-moz-column-gap: .125em;
column-gap: .125em;
text-underline-offset: 3px;
text-decoration-thickness: 2px;
}
.l-footer-contact-tel__body p:before {
content: "";
position: relative;
display: inline-flex;
width: .8lh;
height: .8lh;
background: var(--point-color);
-webkit-mask-image: var(--icon-tel);
mask-image: var(--icon-tel);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: contain;
mask-size: contain;
}
.l-footer-contact-tel__button {
display: none;
visibility: hidden;
opacity: 0;
}
@media screen and (max-width: 960px) {
.l-footer-contact-tel__button {
display: flex;
visibility: visible;
justify-content: center;
align-items: center;
width: 100%;
opacity: 1;
}
.l-footer-contact-tel__button .c-button {
width: 100%;
padding-block: .5em;
}
}
/* l-footer-info
=============================== */
.l-footer-info {
padding: 2.33333em var(--inner-padding) calc(2.33333em + var(--fixed-nav-height));
background: var(--point-dark-color);
color: #9c9ea3;
font-size: 12px;
line-height: 1.5;
}
body[data-id=index] .l-footer-info {
padding: 2.33333em var(--inner-padding) calc(2.33333em + var(--fixed-nav-height) + 7em);
}
.l-footer-info__inner {
display: grid;
grid-template-areas: "footer_info_name footer_info_icon" "footer_info_name footer_info_copyright";
max-width: var(--inner-width-px);
text-align: left;
margin-inline: auto;
}
@media screen and (max-width: 960px) {
.l-footer-info__inner {
grid-template-areas: "footer_info_icon" "footer_info_name" "footer_info_copyright";
}
}
.l-footer-info__name {
display: flex;
flex-direction: column;
grid-area: footer_info_name;
gap: .5em;
}
.l-footer-info__name p .CMN-RECYCLE a {
color: #9c9ea3;
}
@media screen and (max-width: 960px) {
.l-footer-info__name {
text-align: center;
}
.l-footer-info__name p:first-child:after {
content: "\00ff0f";
position: relative;
display: inline;
}
}
.l-footer-info__copyright {
grid-area: footer_info_copyright;
margin-top: 1em;
text-align: right;
}
@media screen and (max-width: 960px) {
.l-footer-info__copyright {
text-align: center;
font-size: 10px;
}
}
.l-footer-info-icon {
display: flex;
justify-content: flex-end;
align-items: center;
grid-area: footer_info_icon;
gap: 1em;
}
@media screen and (max-width: 960px) {
.l-footer-info-icon {
justify-content: center;
margin-bottom: 1em;
}
}
.l-footer-info-icon__head {
width: -moz-fit-content;
width: fit-content;
color: #fff;
font-weight: 500;
line-height: 1;
}
.l-footer-info-icon__list {
display: flex;
gap: .5em;
}
.l-footer-info-icon__list li {
align-content: center;
width: 2em;
}
.l-footer-info-icon__list li a {
display: block;
transition: opacity .3s;
}
@media (any-hover: hover) {
.l-footer-info-icon__list li a:where(:hover) {
opacity: .7;
}
}
/* l-fixed-nav-container
============================== */
.l-fixed-nav-container {
position: fixed;
bottom: 0;
left: 0;
z-index: 100003;
display: grid;
visibility: visible;
grid-template-columns: repeat(6, 1fr);
gap: 11px;
width: 100%;
width: 100%;
height: var(--fixed-nav-height);
padding: .9375em 1.75em;
background: var(--key-color);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2);
transition: opacity .1s, translate .3s ease-out;
pointer-events: none;
}
@media print {
.l-fixed-nav-container {
display: none;
visibility: hidden;
opacity: 0;
}
}
@media screen and (max-width: 960px) {
.l-fixed-nav-container {
visibility: visible;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr var(--fixed-nav-height);
gap: 1px;
width: 100%;
height: var(--fixed-nav-height);
padding: 0;
background: color-mix(in srgb, var(--key-color) 78%, white);
}
body.is-header-menu-open .l-fixed-nav-container {
z-index: 100004;
background: transparent;
box-shadow: none;
}
body.is-header-menu-open .l-fixed-nav-container .l-fixed-nav {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
}
body[data-id=index] .l-fixed-nav-container {
visibility: hidden;
opacity: 0;
transform: translateY(100%);
}
body[data-id=index].is-fixed-nav-visible .l-fixed-nav-container {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
body .l-fixed-nav-container {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* l-fixed-nav
============================== */
.l-fixed-nav {
display: flex;
justify-content: center;
align-items: center;
gap: .5em;
border: 1px solid var(--point-color);
border-radius: var(--base-border-radius);
background: var(--_bg-color);
box-shadow: 2px 2px;
color: var(--_color);
text-decoration: none;
letter-spacing: 0;
font-weight: bold;
font-size: calc(12px + var(--slope-1px) * 6);
line-height: 1;
transition: all .2s ease-out;
transition: background .3s, translate .3s ease-out;
translate: -2px -2px;
--_bg-color:#fff;
--_color:var(--point-color);
--_hover-bg-color:var(--point-color);
}
.l-fixed-nav:before {
content: "";
display: block;
width: 24px;
height: 24px;
background: var(--point-color);
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
}
@media (any-hover: hover) {
.l-fixed-nav:where(:hover) {
background: var(--_hover-bg-color);
box-shadow: none;
color: #fff;
translate: 0 0;
}
.l-fixed-nav:where(:hover):before {
background: #fff;
}
}
@media screen and (max-width: 960px) {
.l-fixed-nav {
flex-wrap: wrap;
border: none;
border-radius: unset;
background: var(--key-color);
box-shadow: none;
transition: filter .5s;
translate: 0;
}
}
@media screen and (max-width: 960px) and (any-hover: hover) {
.l-fixed-nav:where(:hover) {
background: initial;
color: var(--point-color);
filter: brightness(1.1);
}
.l-fixed-nav:where(:hover):before {
background: var(--point-color);
}
}
@media screen and (max-width: 560px) {
.l-fixed-nav {
flex-direction: column;
}
}
.l-fixed-nav._showroom {
--icon: var(--icon-showroom);
}
.l-fixed-nav._newcar {
--icon: var(--icon-newcar);
}
.l-fixed-nav._usedcar {
--icon: var(--icon-usedcar);
}
.l-fixed-nav._maintenance {
--icon: var(--icon-maintenance);
}
.l-fixed-nav._aftersupport {
--icon: var(--icon-aftersupport);
}
@media screen and (min-width: 1200px) {
.l-fixed-nav._aftersupport br {
display: none;
}
}
.l-fixed-nav._recruit {
--icon: var(--icon-recruit);
}
/* l-fixed-nav-toggle
============================== */
.l-fixed-nav-toggle {
position: relative;
z-index: 100005;
display: none;
visibility: hidden;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
aspect-ratio: 1;
outline: none;
border: 0;
border-radius: 0;
background: var(--point-color);
color: #fff;
transition: filter .3s;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
@media screen and (max-width: 960px) {
.l-fixed-nav-toggle {
display: flex;
visibility: visible;
cursor: pointer;
pointer-events: all;
}
}
@media (any-hover: hover) {
.l-fixed-nav-toggle:where(:hover):not(.is-open) {
filter: brightness(1.3);
}
}
body.is-header-menu-open .l-fixed-nav-toggle {
background: transparent;
filter: drop-shadow(0px 0px 10px var(--point-color));
}
.l-fixed-nav-toggle span {
display: none;
}
.l-fixed-nav-toggle > div {
position: relative;
width: 24px;
height: 2px;
background: #fff;
transition: background .2s;
}
.l-fixed-nav-toggle > div:before, .l-fixed-nav-toggle > div:after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #fff;
}
.l-fixed-nav-toggle > div:before {
bottom: 7px;
transition: background .2s, bottom .2s .2s, transform .2s;
}
.l-fixed-nav-toggle > div:after {
top: 7px;
transition: background .2s, top .2s .2s, transform .2s;
}
body.is-header-menu-open .l-fixed-nav-toggle > div {
background: transparent;
filter: drop-shadow(0px 0px 5px var(--point-color));
transition: background .2s;
}
body.is-header-menu-open .l-fixed-nav-toggle > div:before, body.is-header-menu-open .l-fixed-nav-toggle > div:after {
background: #fff;
}
body.is-header-menu-open .l-fixed-nav-toggle > div:before {
bottom: 0;
transition: background .2s, bottom .2s, transform .2s .2s;
transform: rotate(45deg);
}
body.is-header-menu-open .l-fixed-nav-toggle > div:after {
top: 0;
transition: background .2s, top .2s, transform .2s .2s;
transform: rotate(-45deg);
}
/* ============================================================= *
Grid
* ============================================================= */
/* c-button-grid
=============================== */
.c-button-grid {
display: grid;
grid-template-columns: repeat(var(--columns), minmax(min(0px, 100%), 390px));
gap: calc(10px + var(--slope-1px) * 10);
max-width: 800px;
margin-top: calc(21px + var(--slope-1px) * 12);
place-content: center;
margin-inline: auto;
}
.c-button-grid .c-button {
max-width: 100%;
}
.c-button-grid._x4 {
max-width: 100%;
--columns:4;
}
.c-button-grid._x3 {
max-width: 100%;
--columns:3;
}
@media screen and (max-width: 960px) {
.c-button-grid._x3\:tablet {
--columns:3;
}
}
@media screen and (max-width: 560px) {
.c-button-grid._x3\:mobile {
--columns:3;
}
}
.c-button-grid._x2 {
--columns:2;
}
.c-button-grid._x1 {
grid-template-columns: repeat(var(--columns), minmax(min(0px, 100%), 680px));
max-width: 100%;
--columns:1;
}
@media screen and (max-width: 960px) {
.c-button-grid._x1\:tablet {
--columns:1;
}
}
@media screen and (max-width: 560px) {
.c-button-grid._x1\:mobile {
--columns:1;
}
}
@media screen and (max-width: 960px) {
.c-button-grid._x2\:tablet {
--columns:2;
}
}
@media screen and (max-width: 560px) {
.c-button-grid._x2\:mobile {
--columns:2;
}
}
/* c-anchor-grid
=============================== */
.c-anchor-grid {
display: grid;
grid-template-columns: repeat(var(--columns), minmax(min(0px, 100%), 390px));
gap: calc(10px + var(--slope-1px) * 10);
max-width: 800px;
margin-top: calc(20px + var(--slope-1px) * 13);
place-content: center;
margin-inline: auto;
}
.c-anchor-grid .c-button {
max-width: 100%;
}
.c-anchor-grid._x4 {
max-width: 100%;
--columns:4;
}
.c-anchor-grid._x3 {
max-width: 100%;
--columns:3;
}
@media screen and (max-width: 960px) {
.c-anchor-grid._x3\:tablet {
--columns:3;
}
}
@media screen and (max-width: 560px) {
.c-anchor-grid._x3\:mobile {
--columns:3;
}
}
.c-anchor-grid._x2 {
--columns:2;
}
@media screen and (max-width: 960px) {
.c-anchor-grid._x2\:tablet {
--columns:2;
}
}
@media screen and (max-width: 560px) {
.c-anchor-grid._x2\:mobile {
--columns:2;
}
}
.c-anchor-grid._x1 {
--columns:1;
}
@media screen and (max-width: 960px) {
.c-anchor-grid._x1\:tablet {
--columns:1;
}
}
@media screen and (max-width: 560px) {
.c-anchor-grid._x1\:mobile {
--columns:1;
}
}
.c-point-grid__list {
display: flex;
gap: 20px;
margin-bottom: calc(26px + var(--slope-1px) * 14);
}
@media screen and (max-width: 960px) {
.c-point-grid__list {
flex-direction: column;
width: 100%;
}
}
.c-point-grid__item {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1;
justify-content: flex-start;
align-items: center;
padding: 2.22222em 1em;
border: 1px solid var(--border-color);
background: #fff;
}
.c-point-grid__item[data-num] {
margin-top: calc(12px + var(--slope-1px) * 6);
}
.c-point-grid__item:before {
content: attr(data-num);
position: absolute;
top: 0;
display: block;
margin-bottom: 1em;
color: var(--key-color);
text-shadow: 1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff;
font-weight: 600;
font-size: calc(24px + var(--slope-1px) * 12);
font-family: var(--en-font-family);
line-height: .6;
translate: 0 -50%;
}
@media screen and (max-width: 960px) {
.c-point-grid__item {
padding: 1.875em 1em;
}
}
.c-point-grid__head {
/* -0.333em for line-height offset */
margin-top: -.333em;
margin-bottom: .667em;
color: var(--point-color);
font-weight: bold;
font-size: calc(16px + var(--slope-1px) * 2);
line-height: 1.666;
}
.c-point-grid__head._center {
text-align: center;
}
.c-point-grid__image {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 1em;
}
.c-point-grid__body p {
color: var(--base-color);
text-align: center;
font-weight: 400;
font-size: calc(13px + var(--slope-1px) * 2);
}
@media screen and (max-width: 960px) {
.c-point-grid__body p {
word-break: break-all;
}
}
.c-point-grid__body p._left {
text-align: left;
}
.c-point-grid__body p._has-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* ============================================================= *
Navigation
* ============================================================= */
/* breadcrumbs
=============================== */
.c-breadcrumbs {
display: flex;
flex-wrap: wrap;
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
padding: 1em 0;
font-size: calc(13px + var(--slope-1px));
margin-inline: auto;
}
.c-breadcrumbs > li {
display: flex;
align-items: center;
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: -.375em;
}
.c-breadcrumbs > li + li:before {
content: ">";
margin: 0 1em;
}
.c-breadcrumbs > li a {
text-decoration: underline;
transition: all .2s ease-out;
text-underline-offset: .25em;
}
.c-breadcrumbs > li a:hover {
text-decoration: none;
}
@media screen and (max-width: 960px) {
.c-breadcrumbs {
display: none;
visibility: hidden;
opacity: 0;
}
}
/* c-button
=============================== */
.c-button {
display: inline grid;
align-items: center;
grid-template-columns: 1fr auto 1fr;
outline: none;
border: 1px solid var(--_border-color);
border-radius: var(--base-border-radius);
background: var(--_bg-color);
box-shadow: 2px 2px;
color: var(--_color);
text-decoration: none;
font-weight: bold;
font-size: calc(14px + var(--slope-1px) * 4);
transition: background .3s, color .1s, translate .3s ease-out;
-moz-column-gap: .25em;
column-gap: .25em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
--_bg-color:#fff;
--_color:var(--point-color);
--_border-color:var(--point-color);
--_hover-bg-color:var(--point-color);
--_arrow-color:var(--point-color);
--_hover-arrow-color:#fff;
inline-size: min(100%, 400px);
padding-block: 1em;
padding-inline: 1em;
translate: -2px -2px;
}
.c-button._key-color {
--_bg-color:var(--key-color);
--_color:var(--point-color);
--_border-color:var(--point-color);
--_hover-bg-color:var(--point-color);
--_hover-arrow-color:#fff;
}
@media screen and (max-width: 960px) {
.c-button {
padding-inline: .5em;
}
}
.c-button::before {
content: '';
}
.c-button::after {
content: "";
justify-self: end;
aspect-ratio: 1;
background: var(--_arrow-color);
transition: all .2s ease-out;
inline-size: .66667em;
-webkit-mask: var(--icon-arrow) 50% 50%/contain no-repeat;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}
@media (any-hover: hover) {
.c-button:where(:hover) {
background: var(--_hover-bg-color);
box-shadow: none;
translate: 0 0;
--_color:#fff;
}
.c-button:where(:hover)._key-color {
--_color:#fff;
}
.c-button:where(:hover)::after {
background: var(--_hover-arrow-color);
}
}
.c-button._small {
font-size: calc(13px + var(--slope-1px) * 3);
padding-block: .575em;
}
.c-button._small::after {
content: '';
background: unset;
inline-size: 0;
}
.c-button._large {
inline-size: min(100%, 680px);
}
.c-button._anchor {
--_bg-color: transparent;
}
.c-button._anchor._has-wbr {
word-break: keep-all;
}
.c-button._anchor:after {
rotate: 90deg;
-webkit-mask-position: 80% 50%;
mask-position: 80% 50%;
}
@media screen and (max-width: 960px) {
.c-button._anchor {
padding-block: .725em;
}
}
/* container */
.c-button-container {
display: grid;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
gap: 1em;
justify-items: center;
width: 100%;
margin-top: calc(40px + var(--slope-1px) * 10);
place-content: center;
}
.c-button-container > .c-button {
min-width: 390px;
}
@media screen and (max-width: 560px) {
.c-button-container > .c-button {
min-width: 100%;
}
}
.c-micro-copy {
position: relative;
display: inline grid;
grid-template-columns: 1fr auto 1fr;
gap: .25em;
color: var(--point-color);
word-break: keep-all;
overflow-wrap: anywhere;
font-weight: bold;
}
.c-micro-copy::before, .c-micro-copy::after {
position: relative;
display: inline-grid;
width: 1em;
}
.c-micro-copy::before {
content: "\00ff3c";
}
.c-micro-copy::after {
content: "\00ff0f";
}
/* banner
=============================== */
.c-banner {
display: block;
border: 1px solid var(--border-color);
transition: opacity .2s;
}
@media (any-hover: hover) {
.c-banner:where(:hover) {
opacity: .7;
}
}
/* detailed banner
=============================== */
.c-detailed-banner {
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid var(--border-color);
background: #fff;
text-decoration: none;
transition: opacity .2s;
}
.c-detailed-banner:hover {
opacity: .7;
}
.c-detailed-banner__image {
width: 50%;
}
.c-detailed-banner__image img {
width: 100%;
}
@media screen and (max-width: 960px) {
.c-detailed-banner__image {
order: -1;
width: 100%;
}
}
.c-detailed-banner__text {
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
padding: 2.77778% 3.7037%;
font-size: 1.5rem;
}
@media screen and (max-width: 960px) {
.c-detailed-banner__text {
width: 100%;
padding: 2.66667em;
}
}
.c-detailed-banner__head {
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: -.375em;
text-decoration: underline;
font-weight: bold;
font-size: 1.73333em;
}
.c-detailed-banner__body {
/* -0.5em for line-height offset */
margin-top: 1.63333em;
margin-bottom: -.5em;
line-height: 2;
}
/* tab
=============================== */
.c-tab {
overflow: hidden;
margin-bottom: 6.94444%;
}
.c-tab__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;
border-bottom: 1px solid;
padding-inline: .375em;
margin-inline: auto;
}
.c-tab__item {
z-index: 1;
display: flex;
align-items: stretch;
width: 100%;
margin-bottom: -4px;
padding: 0 .375em;
}
.c-tab__button {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: visible;
width: 100%;
min-height: 5em;
padding: 1em .25em;
outline: none;
border: 1px solid var(--point-color);
border-bottom-width: 1px;
border-radius: .5em .5em 0 0;
background: var(--point-color);
color: #fff;
text-align: center;
text-decoration: none;
font-size: calc(14px + var(--slope-1px) * 2);
line-height: 1.2;
cursor: pointer;
transition: background .25s;
}
.c-tab__button:after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
z-index: 2;
display: block;
width: calc(100% + 4px);
border-bottom: 2px solid var(--point-color);
transform: translateX(-50%);
}
@media screen and (max-width: 960px) {
.c-tab__button {
min-height: 4.71429em;
}
}
.c-tab__button span {
display: block;
margin-bottom: 1em;
font-size: .8em;
}
.c-tab__button em {
font-size: 1.4em;
}
.c-tab__button.is-current {
border: 1px solid var(--point-color);
background: var(--bg-color);
color: var(--point-color);
}
.c-tab__button.is-current:after {
width: 100%;
border-bottom: 1px solid var(--bg-color);
}
/* for tab.js view control */
.js-tab-channel {
display: none;
}
.js-tab-channel.is-current {
display: block;
}
/* c-category-nav-grid
============================== */
.c-category-nav-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: calc(100vw + 1px);
border-top: 1px solid var(--black);
border-bottom: 1px solid var(--black);
}
.c-section + .c-category-nav-grid {
margin-top: calc(70px + var(--slope-1px) * 40);
}
.c-category-nav-grid__item {
border-right: 1px solid var(--black);
}
@media screen and (max-width: 1100px) {
.c-category-nav-grid {
grid-template-columns: repeat(2, 1fr);
}
.c-category-nav-grid__item:nth-child(n+3) {
border-top: 1px solid var(--black);
}
}
@media screen and (max-width: 560px) {
.c-category-nav-grid {
grid-template-columns: 100%;
}
.c-category-nav-grid__item {
border-right: 0;
}
.c-category-nav-grid__item:nth-child(n+2) {
border-top: 1px solid var(--black);
}
}
/* c-newcar-nav
=============================== */
.c-newcar-nav-wrapper {
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
padding: 0 var(--inner-padding);
margin-inline: auto;
}
.c-newcar-nav-wrapper[data-bg=dark] {
margin-bottom: 0;
padding-top: calc(28px + var(--slope-1px) * 27);
padding-bottom: calc(32px + var(--slope-1px) * 23);
-o-border-image: linear-gradient(var(--bg-dark-color) 0 0) 0//0 100vi;
border-image: linear-gradient(var(--bg-dark-color) 0 0) fill 0//0 100vi;
}
.c-newcar-nav {
display: flex;
flex-direction: column;
gap: calc(24px + var(--slope-1px) * 8);
}
.c-newcar-nav .c-reservation-button {
inline-size: min(100%, 802px);
}
.c-newcar-nav__menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 11px;
}
.c-newcar-nav__menu .c-button {
padding-block: 1.1875em;
}
@media screen and (max-width: 960px) {
.c-newcar-nav__menu {
grid-template-columns: repeat(2, 1fr);
}
}
/* c-maintenance-nav
=============================== */
.c-maintenance-nav-wrapper[data-bg=dark] {
margin-bottom: 0;
padding-top: calc(28px + var(--slope-1px) * 27);
padding-bottom: calc(32px + var(--slope-1px) * 23);
-o-border-image: linear-gradient(var(--bg-dark-color) 0 0) 0//0 100vi;
border-image: linear-gradient(var(--bg-dark-color) 0 0) fill 0//0 100vi;
}
.c-maintenance-nav {
display: flex;
flex-direction: column;
gap: calc(24px + var(--slope-1px) * 8);
}
.c-maintenance-nav .c-reservation-button {
inline-size: min(100%, 802px);
}
.c-maintenance-nav__menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 11px;
}
.c-maintenance-nav__menu .c-button {
padding-block: 1.1875em;
}
@media screen and (max-width: 960px) {
.c-maintenance-nav__menu {
grid-template-columns: repeat(2, 1fr);
}
}
.c-maintenance-nav__contact {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
/* c-aftersupport-nav
=============================== */
.c-aftersupport-nav-wrapper {
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
padding: 0 var(--inner-padding);
margin-inline: auto;
}
.c-aftersupport-nav-wrapper[data-bg=dark] {
margin-bottom: 0;
padding-top: calc(28px + var(--slope-1px) * 27);
padding-bottom: calc(32px + var(--slope-1px) * 23);
-o-border-image: linear-gradient(var(--bg-dark-color) 0 0) 0//0 100vi;
border-image: linear-gradient(var(--bg-dark-color) 0 0) fill 0//0 100vi;
}
.c-aftersupport-nav {
display: flex;
flex-direction: column;
gap: calc(24px + var(--slope-1px) * 8);
}
.c-aftersupport-nav .c-reservation-button {
inline-size: min(100%, 802px);
}
.c-aftersupport-nav__menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 11px;
}
.c-aftersupport-nav__menu .c-button {
padding-block: 1.1875em;
}
@media screen and (max-width: 960px) {
.c-aftersupport-nav__menu {
grid-template-columns: repeat(2, 1fr);
}
}
/* c-usedcar-sticky
=============================== */
.c-usedcar-sticky {
position: fixed;
top: 25%;
right: 0;
z-index: 100;
}
@media print {
.c-usedcar-sticky {
display: none;
visibility: hidden;
opacity: 0;
}
}
.c-usedcar-nav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px 7px 10px 8px;
border: 1px solid var(--point-color);
border-right: none;
border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
background: var(--_bg-color);
box-shadow: 2px 2px;
color: var(--_color);
text-decoration: none;
transition: background .3s, color .1s, translate .3s ease-out;
--_bg-color:#fff;
--_color:var(--point-color);
--_hover-bg-color:var(--point-color);
}
.c-usedcar-nav__list {
display: flex;
flex-direction: column;
gap: 1em;
font-size: 1.2rem;
}
@media screen and (max-width: 960px) {
.c-usedcar-nav__list {
font-size: 1.0rem;
}
}
@media screen and (max-width: 960px) {
.c-usedcar-nav {
padding: 4px 2px 5px 4px;
}
}
.c-usedcar-nav ._icon {
display: flex;
justify-content: center;
align-items: center;
max-width: 2.16667em;
max-height: 2.16667em;
aspect-ratio: 1/1;
}
.c-usedcar-nav ._icon svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-usedcar-nav ._icon svg path {
fill: var(--_color);
}
.c-usedcar-nav ._text {
margin-top: .25em;
color: currentColor;
letter-spacing: 0;
font-weight: bold;
line-height: 1;
}
@media (any-hover: hover) {
.c-usedcar-nav:where(:hover) {
background: var(--_hover-bg-color);
box-shadow: none;
translate: 2px 2px;
--_color:#fff;
}
.c-usedcar-nav:where(:hover)::after {
background: var(--_hover-arrow-color);
}
}
/* ============================================================= *
Section
* ============================================================= */
.c-section:first-child {
margin-top: clamp(0px, -21.04592px + 5.61224vw, 22px);
}
.c-section:not(:last-child) {
margin-bottom: calc(70px + var(--slope-1px) * 40);
}
+ .c-section {
margin-top: calc(70px + var(--slope-1px) * 40);
}
.c-section__head {
margin-bottom: calc(25px + var(--slope-1px) * 15);
}
.c-section__head:has(.c-section-sub-title) {
margin-bottom: calc(20px + var(--slope-1px) * 16);
}
.c-section__head._no-space {
margin-bottom: 0;
}
.c-section__foot {
display: flex;
justify-content: center;
margin-top: calc(40px + var(--slope-1px) * 10);
}
.c-section:last-child {
margin-bottom: calc(70px + var(--slope-1px) * 40);
}
.c-section._bg {
padding-top: calc(42px + var(--slope-1px) * 40);
padding-bottom: calc(38px + var(--slope-1px) * 60);
}
._bg:has(+ ._bg) {
margin-bottom: 0;
}
._bg[data-bg=dark] {
-o-border-image: linear-gradient(var(--bg-dark-color) 0 0) 0//0 100vi;
border-image: linear-gradient(var(--bg-dark-color) 0 0) fill 0//0 100vi;
}
._bg[data-bg=white] {
-o-border-image: linear-gradient(#fff 0 0) 0//0 100vi;
border-image: linear-gradient(#fff 0 0) fill 0//0 100vi;
}
._bg[data-bg=key] {
-o-border-image: linear-gradient(var(--key-color) 0 0) 0//0 100vi;
border-image: linear-gradient(var(--key-color) 0 0) fill 0//0 100vi;
}
._bg[data-bg=keylight] {
-o-border-image: linear-gradient(#fdfada 0 0) 0//0 100vi;
border-image: linear-gradient(#fdfada 0 0) fill 0//0 100vi;
}
/* inner section
=============================== */
.c-inner-section + .c-inner-section {
margin-top: 6rem;
}
.c-inner-section__head {
margin-bottom: 2.5rem;
}
/* inner section
=============================== */
.c-introduction-block__head {
margin-bottom: calc(14px + var(--slope-1px) * 10);
}
.c-introduction-block__foot {
display: grid;
grid-template-columns: repeat(2, minmax(min(0px, 100%), 390px));
gap: calc(10px + var(--slope-1px) * 10);
max-width: 800px;
margin-top: calc(21px + var(--slope-1px) * 12);
place-content: center;
margin-inline: auto;
}
.c-introduction-block__foot .c-button {
max-width: 100%;
}
/* ============================================================= *
Table
* ============================================================= */
/* scroll container
=============================== */
.c-table-container {
position: relative;
overflow: auto;
width: 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 15px) 0 0/50px 100%, linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), #fff 15px) right/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) right/20px 100%;
background-color: #fff;
background-attachment: local, scroll, local, scroll;
background-repeat: no-repeat;
}
.c-table-container + .c-table-container {
margin-top: 5rem;
}
.c-table-container > * {
min-width: 42em;
}
/* data table
=============================== */
.c-data-table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
font-size: calc(14px + var(--slope-1px) * 1);
}
.c-data-table._fixed {
table-layout: fixed;
}
.c-data-table._check12 thead th._head {
width: 24.25926%;
}
.c-data-table._check12 tbody td {
width: 18.7963%;
}
.c-data-table._check-safety thead th._head {
width: 24.25926%;
}
.c-data-table._check-safety tbody td {
width: 18.7963%;
}
.c-data-table._inspection-main thead th._head {
width: 21.11111%;
}
@media screen and (max-width: 960px) {
.c-data-table._inspection-main thead th._head {
width: 16.66667%;
}
}
.c-data-table._inspection-main tbody td {
width: 15.74074%;
}
.c-data-table._inspection-legal thead th._head {
width: 20.55556%;
}
.c-data-table._inspection-legal tbody td {
width: 20%;
}
.c-data-table th,
.c-data-table td {
padding: 1em .75em;
text-align: center;
}
.c-data-table thead th,
.c-data-table thead td {
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.c-data-table thead th {
background: var(--point-color);
color: #fff;
font-weight: 500;
font-size: calc(14px + var(--slope-1px) * 2);
}
.c-data-table thead th._head {
width: 22.5%;
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-data-table thead th ._example {
display: block;
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid #ccc;
font-style: normal;
font-size: 71.222222%;
}
.c-data-table thead th em {
display: block;
font-size: 1.06667em;
}
.c-data-table thead th em span {
display: inline;
padding-left: .5em;
font-size: .875em;
}
.c-data-table thead th > span {
display: block;
margin-top: .25em;
font-size: .84615em;
}
.c-data-table tbody tr._total th {
background: var(--key-color);
color: var(--point-color);
}
.c-data-table tbody tr._total td {
background: color-mix(in srgb, var(--key-color) 10%, #fff 90%);
}
.c-data-table tbody th,
.c-data-table tbody td {
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.c-data-table tbody th {
background: var(--point-color);
color: #fff;
font-weight: 500;
font-size: calc(14px + var(--slope-1px) * 2);
}
.c-data-table tbody th[rowspan] {
width: 2.66667em;
padding: 1.2em .33333em;
background: #666;
}
.c-data-table tbody th[rowspan] span {
display: inline-block;
min-height: 1em;
text-align: left;
white-space: nowrap;
line-height: 1.25;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}
.c-data-table tbody td {
width: 25%;
}
.c-data-table tbody td span {
display: block;
}
.c-data-table tbody td span:not(:last-child) {
padding-bottom: .75em;
border-bottom: 1px solid #ccc;
}
.c-data-table tbody td span:not(:first-child) {
padding-top: .75em;
}
.c-data-table tbody td span i {
display: block;
margin-bottom: 5px;
font-style: normal;
font-size: 75%;
}
.c-data-table tbody td span._smart {
font-weight: 700;
font-size: calc(16px + var(--slope-1px) * 2);
}
/* profile table
=============================== */
.c-profile-table {
width: 100%;
border-collapse: collapse;
font-size: calc(13px + var(--slope-1px) * 2);
}
.c-profile-table th {
width: 12.33333em;
padding: 1.33333em 0;
padding-right: 1em;
border-bottom: 1px solid #b8b8b8;
color: var(--point-color);
font-weight: bold;
}
@media screen and (max-width: 960px) {
.c-profile-table th {
display: flex;
width: 100%;
padding: 1.33333em 0 0;
border-bottom: none;
}
}
.c-profile-table td {
width: calc(100% - 12.33333em);
padding: 1.33333em 0;
border-bottom: 1px solid #b8b8b8;
}
@media screen and (max-width: 960px) {
.c-profile-table td {
display: flex;
width: 100%;
padding: .2em 0 1.33333em;
}
}
/* ============================================================= *
Text
* ============================================================= */
/* lead
=============================== */
.c-lead {
text-align: center;
font-size: calc(14px + var(--slope-1px) * 4);
line-height: 1.57143;
}
.c-lead > p {
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: -.375em;
}
.c-lead > p._has-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-lead > p em {
font-weight: bold;
font-size: 1.33333em;
}
.c-lead > p + p {
margin-top: 1em;
}
/* text
=============================== */
.c-text {
text-align: center;
font-size: calc(13px + var(--slope-1px) * 2);
}
.c-text._center {
text-align: center;
}
.c-text._left {
text-align: left;
}
.c-text._has-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-text em {
font-weight: bold;
font-size: 1.33333em;
}
.c-text + p {
margin-top: 1em;
}
/* notes
=============================== */
.c-notes {
margin-top: 1.5em;
font-size: 1.3rem;
}
.c-notes > li {
padding-left: 1em;
text-indent: -1em;
}
.c-notes > li strong {
color: var(--point-color);
font-weight: bold;
}
.c-notes > li + li {
margin-top: .25em;
}
.c-notes > li:before {
content: "\203b";
}
.c-notes._number > li:before {
content: "※" attr(data-number);
}
.c-notes._circle > li:before {
content: "\0025cf";
}
.c-notes._dot > li:before {
content: "\30fb";
}
.c-notes._square > li:before {
content: "\25a0";
}
.c-notes._star > li:before {
content: "\2605";
}
.c-notes > li._highlight {
color: #e71d0f;
font-weight: bold;
}
.c-notes > li._pointcolor {
color: var(--point-color);
font-weight: bold;
}
.c-notes > li._dot:before {
content: "\30fb";
}
.c-notes > li._number:before {
content: "※" attr(data-number);
margin-right: .5em;
}
.c-notes > li._circle:before {
content: "\0025cf";
}
.c-notes > li._square:before {
content: "\25a0";
}
.c-notes > li._star:before {
content: "\2605";
}
/* ============================================================= *
Title
* ============================================================= */
/* c-page-title
============================== */
.c-page-title {
position: relative;
z-index: 0;
display: block;
color: var(--point-color);
text-align: center;
letter-spacing: .08em;
font-weight: 900;
font-size: calc(26px + var(--slope-1px) * 16);
margin-inline: auto;
}
.c-page-title::before {
content: attr(data-en);
position: absolute;
inset: 0;
z-index: -1;
width: 100vw;
color: var(--key-color);
text-transform: uppercase;
white-space: nowrap;
font-weight: 600;
font-size: clamp(76px, 12vw, 108px);
font-family: var(--en-font-family);
line-height: 1.1lh;
opacity: .18;
margin-inline: calc(50% - 50vi);
}
/* c-section-title
============================== */
.c-section-title {
position: relative;
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: -.375em;
color: var(--point-color);
text-align: center;
letter-spacing: .08em;
font-weight: 900;
font-size: calc(24px + var(--slope-1px) * 6);
line-height: 1.4;
margin-inline: auto;
}
.c-section-title._has-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* c-section-sub-title
============================== */
.c-section-sub-title {
position: relative;
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: -.375em;
color: var(--point-color);
text-align: center;
letter-spacing: .05em;
font-weight: 700;
font-size: calc(18px + var(--slope-1px) * 12);
margin-inline: auto;
}
.c-section-sub-title._has-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* c-sub-title
============================== */
.c-sub-title {
font-weight: bold;
font-size: 2rem;
}
/* detailed title
=============================== */
.c-detailed-title {
color: var(--point-color);
text-align: center;
letter-spacing: .08em;
font-weight: 700;
font-size: calc(20px + var(--slope-1px) * 4);
line-height: 1.4;
margin-inline: auto;
}
@media screen and (max-width: 960px) {
.c-detailed-title {
letter-spacing: .025em;
}
}
.c-detailed-title._has-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* callout title
=============================== */
.c-callout-title {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 1em;
padding: calc(18px + var(--slope-1px) * 2);
background: var(--point-color);
color: #fff;
text-align: center;
letter-spacing: normal;
font-weight: 500;
font-size: calc(16px + var(--slope-1px) * 5);
line-height: 1;
}
.c-callout-title::after {
content: "";
position: absolute;
bottom: 1px;
display: block;
width: .69231em;
height: .34615em;
background: var(--point-color);
transform: translateY(100%);
-webkit-clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}
/* ============================================================= *
Blog
* ============================================================= */
.c-blog-container__table {
width: 100%;
}
.c-blog-container__td > article + article {
margin-top: 8.5rem;
}
.c-blog-container img {
display: inline;
}
.c-blog-container article {
padding: calc(20px + var(--slope-1px) * 20);
background: #fff;
}
.c-blog-container .blog__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: .75em 2em;
width: 100%;
padding: 1.375em;
background: var(--bg-color);
}
@media screen and (max-width: 960px) {
.c-blog-container .blog__header {
flex-direction: column;
align-items: flex-start;
gap: .5em 2em;
}
}
.c-blog-container .blog__title {
font-weight: 500;
font-size: calc(16px + var(--slope-4px));
line-height: 1;
}
.c-blog-container .blog__date {
color: #333;
font-weight: bold;
font-size: calc(13px + var(--slope-1px) * 2);
line-height: 1;
}
.c-blog-container .blog__body {
padding: calc(23px + var(--slope-1px) * 7);
word-break: break-all;
}
.c-blog-container .blog__body img {
height: auto;
max-width: 1080px;
}
@media screen and (max-width: 960px) {
.c-blog-container .blog__body img {
max-width: 100%;
}
}
.c-blog-container .blog__paging {
margin-top: 30px;
text-align: right;
}
/* =============================================================
Calendar
* ============================================================= */
.c-calendar-container {
position: fixed;
top: 0;
left: 100%;
z-index: 9999;
width: 100%;
height: 100%;
padding: 0 0 20px;
font-size: calc(13px + var(--slope-3px));
opacity: 0;
transition: padding .4s ease-in-out, opacity .4s ease-in-out, left .1s linear .4s;
pointer-events: none;
}
.c-calendar-container.is-visible {
left: 0;
padding: 0 0 0;
opacity: 1;
transition: padding .4s ease-in-out, opacity .4s ease-in-out;
pointer-events: auto;
}
.c-calendar-container__inner {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.c-calendar-container__inner > div {
position: relative;
}
.c-calendar-container__close {
content: "";
position: absolute;
top: -2em;
right: 1.5em;
display: block;
width: 1em;
height: 1em;
cursor: pointer;
}
.c-calendar-container__close:before, .c-calendar-container__close:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 141.42136%;
height: 2px;
background: #fff;
}
.c-calendar-container__close:before {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.c-calendar-container__close:after {
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.c-calendar-container:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: color-mix(in srgb, var(--base-color) 60%, transparent);
}
.c-calendar {
position: relative;
display: block;
}
.c-calendar__container {
display: flex;
}
.c-calendar__container > * {
margin: 0 1.5em;
}
@media screen and (max-width: 960px) {
.c-calendar__container > *:last-child {
display: none;
}
.c-calendar._next .c-calendar__container > * {
display: none;
}
.c-calendar._next .c-calendar__container > *:last-child {
display: block;
}
}
.c-calendar__arrow {
display: none;
}
@media screen and (max-width: 960px) {
.c-calendar__arrow {
position: absolute;
top: 3.5em;
right: 3.5em;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.c-calendar__arrow > button {
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
width: 1.2rem;
height: 1.2rem;
margin: auto 0;
margin: 0 .8rem;
outline: none;
border: 0;
border-bottom: 3px solid;
background: transparent;
color: var(--point-color);
text-decoration: none;
font-size: 0;
}
.c-calendar__arrow > button._prev {
border-left: 3px solid;
transform: rotate(45deg);
}
.c-calendar__arrow > button._next {
border-right: 3px solid;
transform: rotate(-45deg);
}
.c-calendar__arrow > button:hover {
opacity: .7;
transition: all .3s;
}
.c-calendar__arrow > button.is-disabled {
opacity: .3;
transition: none;
pointer-events: none;
}
}
.c-calendar-notice__item {
display: inline-block;
padding: .5em;
}
.c-calendar-notice__item .cal_event01 {
color: var(--key-color);
font-style: normal;
}
.c-calendar-notice__item .cal_close01 {
color: var(--point-color);
font-style: normal;
}
.c-calendar-box {
display: flex;
flex-direction: column;
padding: 2em 2em 1.5em;
background: #fff;
box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, .2);
}
.c-calendar-box__head {
position: relative;
display: flex;
align-items: flex-end;
width: 100%;
margin-bottom: 1.11111em;
font-weight: bold;
}
.c-calendar-box__head .cal_month {
position: relative;
padding-top: .03em;
font-size: 3.33333em;
font-family: "Roboto Condensed", sans-serif;
line-height: .7;
}
.c-calendar-box__head .cal_month i {
position: absolute;
bottom: 0;
left: calc(100% + 3em);
font-style: normal;
font-size: .3em;
}
.c-calendar-box__head .cal_year {
margin-left: .5em;
padding-top: .03em;
font-family: "Roboto Condensed", sans-serif;
line-height: .7;
}
.c-calendar-box__body {
width: 100%;
margin-bottom: auto;
}
.c-calendar-box__foot {
width: 100%;
margin-top: 1em;
}
.c-calendar-box .cal {
border-collapse: collapse;
table-layout: fixed;
font-weight: regular;
}
.c-calendar-box .cal th {
padding-bottom: .5em;
}
.c-calendar-box .cal th > div {
padding: .77778em 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
text-align: center;
line-height: .7;
}
.c-calendar-box .cal td {
padding: 1px;
text-align: center;
}
.c-calendar-box .cal td > div {
display: flex;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
margin: 0 auto;
padding: .5em;
font-weight: 500;
}
.c-calendar-box .cal td .cal_sat {
color: #227cbd;
}
.c-calendar-box .cal .cal_sun,
.c-calendar-box .cal .cal_holiday {
color: #de0000;
}
.c-calendar-box .cal td .cal_event01 {
border-radius: 50%;
background-color: var(--key-color);
color: var(--point-color);
}
.c-calendar-box .cal td .cal_close01 {
border-radius: 0;
background-color: var(--point-color);
color: #fff;
}
.c-calendar-box .cal td .cal_noClose {
border-radius: 0;
background-color: transparent;
color: var(--base-color);
}
/* ============================================================= *
Grid
* ============================================================= */
/* grid
=============================== */
.c-grid {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
width: 100%;
--gap: 17px;
}
@media screen and (max-width: 960px) {
.c-grid {
--gap: 10px;
}
}
.c-grid._center {
justify-content: center;
}
.c-grid__item {
width: calc((100% - var(--gap) * (var(--grid-column) - 1)) / var(--grid-column));
--grid-column: 4;
}
.c-grid__item._x3 {
--grid-column: 3;
}
@media screen and (max-width: 960px) {
.c-grid__item._x3\:tablet {
--grid-column: 3;
}
}
.c-grid__item._x2 {
--grid-column: 2;
}
@media screen and (max-width: 960px) {
.c-grid__item._x2\:tablet {
--grid-column: 2;
}
}
.c-grid__item._x1 {
width: 100%;
}
@media screen and (max-width: 960px) {
.c-grid__item._x1\:tablet {
width: 100%;
}
}
@media screen and (max-width: 560px) {
.c-grid__item._x1\:mobile {
width: 100%;
}
}
/* ============================================================= *
Maintenance
* ============================================================= */
/* c-reservation-button
=============================== */
.c-maintenance-reservation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: calc(17px + var(--slope-1px) * 4);
padding: calc(30px + var(--slope-1px) * 18) calc(10px + var(--slope-1px) * 30);
background: var(--key-color);
margin-block: 20px calc(40px + var(--slope-1px) * 30);
}
.c-maintenance-reservation__head {
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: -.375em;
color: var(--point-color);
font-weight: bold;
font-size: calc(15px + var(--slope-1px) * 7);
}
.c-reservation-button {
display: flex;
justify-content: center;
align-items: center;
gap: .25em;
outline: none;
border: 1px solid var(--_border-color);
border-radius: var(--base-border-radius);
background: var(--_bg-color);
box-shadow: 2px 2px;
color: var(--_color);
text-decoration: none;
font-weight: bold;
font-size: calc(14px + var(--slope-1px) * 4);
transition: background .3s, color .1s, translate .3s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
inline-size: min(100%, 485px);
padding-block: 1em;
padding-inline: 1em;
translate: -2px -2px;
--_bg-color:#fff;
--_color:var(--point-color);
--_border-color:var(--point-color);
--_hover-bg-color:var(--point-color);
}
@media screen and (max-width: 960px) {
.c-reservation-button {
padding-inline: .5em;
}
}
.c-reservation-button::before {
content: "";
aspect-ratio: 1;
background: var(--point-color);
transition: all .2s ease-out;
inline-size: 1.2em;
-webkit-mask: var(--icon-reservation) 50% 50%/contain no-repeat;
mask: var(--icon-reservation) 50% 50%/contain no-repeat;
}
.c-reservation-button::after {
content: "";
}
@media (any-hover: hover) {
.c-reservation-button:where(:hover) {
background: var(--_hover-bg-color);
box-shadow: none;
color: #fff;
translate: 0 0;
}
.c-reservation-button:where(:hover)::before {
background: #fff;
}
}
/* c-inspection-lead
=============================== */
.c-inspection-lead {
margin-top: 24px;
text-align: center;
}
@media screen and (max-width: 960px) {
.c-inspection-lead {
text-align: left;
}
}
/* ============================================================= *
Inspection
* ============================================================= */
/* c-inspection-figure
=============================== */
.c-inspection-figure {
position: relative;
max-width: 730px;
margin: 0 auto 3rem;
}
.c-inspection-figure__image {
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 69.45205%;
transform: translate3d(-50%, -50%, 0px);
}
.c-inspection-figure__pointer {
position: relative;
z-index: 1;
}
.c-inspection-figure__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 11px;
}
@media screen and (max-width: 960px) {
.c-inspection-figure__list {
grid-template-columns: repeat(2, 1fr);
}
}
.c-inspection-figure__item {
display: grid;
height: 100%;
}
@media screen and (max-width: 560px) {
.c-inspection-figure__item._x1\:mobile {
grid-column: 1/3;
}
}
/* inspection-checkpoint
=============================== */
.c-inspection-checkpoint__head {
display: flex;
align-items: center;
margin-bottom: .5em;
background: var(--bg-color);
color: var(--point-color);
font-weight: bold;
font-size: calc(16px + var(--slope-1px) * 2);
}
.c-inspection-checkpoint__body + .c-inspection-checkpoint__head {
margin-top: 1.5em;
}
.c-inspection-checkpoint__body {
display: flex;
flex-wrap: wrap;
width: calc(100% + .9375em);
margin-top: -1.375em;
margin-right: -.9375em;
}
.c-inspection-checkpoint__body > li {
display: flex;
width: 50%;
min-width: -moz-fit-content;
min-width: fit-content;
margin-top: 1.125em;
margin-bottom: -.25em;
padding-right: .9375em;
line-height: 1.5;
}
.c-inspection-checkpoint__body > li:before {
content: "\25cf";
margin-right: .25em;
color: var(--point-color);
}
/* c-inspection-checkpoint-button
=============================== */
.c-inspection-checkpoint-button {
display: inline grid;
align-items: center;
grid-template-columns: 1fr auto 1fr;
gap: .15em;
width: 100%;
padding: 1em .5em;
outline: none;
border: 1px solid var(--_border-color);
border-radius: calc(var(--base-border-radius) / 2);
background: var(--_bg-color);
box-shadow: 2px 2px;
color: var(--_color);
text-decoration: none;
transition: background .3s, color .1s, translate .3s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
translate: -2px -2px;
--_bg-color:#fff;
--_color:var(--point-color);
--_border-color:var(--point-color);
--_hover-bg-color:var(--point-color);
}
.c-inspection-checkpoint-button ._number {
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
aspect-ratio: 1/1;
padding-top: .03em;
border: 1px solid var(--point-color);
border-radius: 50%;
background: var(--bg-color);
color: var(--point-color);
font-size: calc(12px + var(--slope-1px) * 6);
font-family: "Roboto Condensed", sans-serif;
line-height: .7;
}
@media screen and (max-width: 960px) {
.c-inspection-checkpoint-button ._number {
width: 1.75em;
height: 1.75em;
}
}
.c-inspection-checkpoint-button ._text {
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
font-weight: bold;
font-size: calc(12px + var(--slope-1px) * 6);
}
.c-inspection-checkpoint-button ._icon {
display: flex;
justify-content: center;
align-items: center;
justify-self: end;
inline-size: calc(14px + var(--slope-1px) * 5);
}
@media (any-hover: hover) {
.c-inspection-checkpoint-button:where(:hover) {
background: var(--_hover-bg-color);
box-shadow: none;
color: #fff;
translate: 0 0;
}
}
/* c-inspection-ciao
=============================== */
.c-inspection-ciao__button {
display: flex;
justify-content: center;
align-items: center;
margin-top: calc(36px + var(--slope-1px) * 10);
}
.c-inspection-ciao__button .c-button {
width: 450px;
}
.c-inspection-ciao-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media screen and (max-width: 960px) {
.c-inspection-ciao-grid {
grid-template-columns: 100%;
}
}
.c-inspection-ciao-grid._x1 {
grid-template-columns: minmax(auto, 530px);
place-content: center;
}
.c-inspection-ciao-grid li img {
width: 100%;
}
/* =============================================================
Modal
* ============================================================= */
/* l-modal
=============================== */
.l-modal {
position: fixed;
top: 0;
left: 0;
z-index: 100005;
display: none;
width: 100%;
height: 100%;
background: rgba(19, 40, 72, .8);
}
.l-modal__inner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 0 70px;
}
@media screen and (max-width: 767px) {
.l-modal__inner {
padding: 0 5.33333%;
}
}
.l-modal__bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
font-size: 0;
opacity: 0;
}
.l-modal__contents {
position: relative;
overflow-y: auto;
width: 800px;
max-width: 100%;
max-height: 90vh;
}
.l-modal__prev, .l-modal__next {
position: fixed;
top: 0;
bottom: 0;
z-index: 2;
width: 3.3rem;
height: 3.3rem;
aspect-ratio: 1;
margin: auto 0;
outline: none;
border: 0;
background: transparent;
color: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.l-modal__prev span, .l-modal__next span {
display: none;
visibility: hidden;
opacity: 0;
}
@media screen and (max-width: 560px) {
.l-modal__prev, .l-modal__next {
width: 5.33333vw;
height: 5.33333vw;
}
}
.l-modal__prev::before, .l-modal__next::before {
content: "";
position: relative;
display: inline-grid;
flex-shrink: 0;
width: 1em;
height: 1em;
background: #fff;
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
inline-size: 1em;
}
.l-modal__prev {
left: calc(50vw - 470px);
transform: rotate(-180deg);
}
@media screen and (max-width: 960px) {
.l-modal__prev {
left: 0;
}
}
.l-modal__next {
right: calc(50vw - 470px);
}
@media screen and (max-width: 960px) {
.l-modal__next {
right: 0;
}
}
.l-modal-contents:first-child + .l-modal__prev {
display: none;
}
.l-modal-contents:first-child + .l-modal__prev + .l-modal__next {
display: none;
}
.l-modal__close {
position: absolute;
top: 0;
right: 0;
z-index: 4;
display: block;
width: 1.5em;
height: 1.5em;
margin-top: 1em;
margin-right: .5em;
outline: none;
border: 0;
border-radius: 50%;
background: transparent;
font-size: 2.4rem;
transition: all .3s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
@media screen and (max-width: 960px) {
.l-modal__close {
font-size: 2.1rem;
}
}
.l-modal__close:hover {
opacity: .7;
}
.l-modal__close span {
display: none;
}
.l-modal__close:before, .l-modal__close:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 54.05405%;
height: 3px;
margin: auto;
border-radius: 3px;
background: #fff;
}
.l-modal__close:before {
transform: rotate(-45deg);
}
.l-modal__close:after {
transform: rotate(45deg);
}
/* l-modal-contents
=============================== */
.l-modal-contents {
position: relative;
z-index: 3;
display: block;
visibility: hidden;
overflow: hidden;
height: 0;
background: #fff;
opacity: 0;
transition: all .4s ease-out;
pointer-events: none;
}
.l-modal-contents.is-show {
visibility: visible;
height: auto;
opacity: 1;
pointer-events: auto;
}
.l-modal-contents__head {
display: block;
width: 100%;
padding: 1em 2.5em 1em 1.5em;
background: var(--point-color);
color: #fff;
text-align: center;
font-weight: bold;
font-size: 2.4rem;
line-height: 1.4;
}
.l-modal-contents__head:is([data-number]) {
display: inline-flex;
justify-content: center;
align-items: center;
gap: .5em;
}
.l-modal-contents__head:is([data-number])::before {
content: attr(data-number);
position: relative;
display: inline-grid;
justify-items: start;
width: 2.21429em;
height: 2.21429em;
aspect-ratio: 1 / 1;
padding-top: .03em;
border-radius: 50%;
background: #fff;
color: var(--point-color);
font-size: .58333em;
font-family: "Roboto Condensed", sans-serif;
line-height: .7;
place-content: center;
}
@media screen and (max-width: 960px) {
.l-modal-contents__head {
padding: 1em 1.5em 1em 1em;
font-size: 2.1rem;
}
}
.l-modal-contents__head b {
display: inline-block;
margin-right: .25em;
}
@media screen and (max-width: 767px) {
.l-modal-contents__head b {
display: block;
margin-right: 0;
margin-bottom: .4em;
}
}
.l-modal-contents__head span {
display: inline-block;
font-size: .76923em;
}
.l-modal-contents__body {
padding: 6rem 7.5%;
}
@media screen and (max-width: 960px) {
.l-modal-contents__body {
padding: 3rem 7.5% 4rem;
}
}
.l-modal-contents__body iframe {
display: block;
max-height: calc(90vh - 12rem);
border: 0;
}
/* ============================================================= *
Showroom
* ============================================================= */
/* c-showroom-list
============================== */
.c-showroom-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(346px, 100%), 1fr));
gap: 21px;
margin-top: calc(34px + var(--slope-1px) * 16);
}
@media screen and (max-width: 960px) {
.c-showroom-list {
grid-template-columns: repeat(2, 1fr);
gap: 11px;
}
}
.c-showroom-list__item {
display: grid;
grid-template-rows: subgrid;
grid-template-columns: 100%;
grid-row: span 5;
gap: 0;
}
/* c-showroom-nav
============================== */
.c-showroom-card {
display: inherit;
grid-template-rows: inherit;
grid-row: inherit;
gap: 0;
border: 1px solid var(--point-color);
background: #fff;
text-decoration: none;
line-height: 1.5;
}
@media screen and (max-width: 960px) {
.c-showroom-card {
flex-direction: column;
}
}
.c-showroom-card__image {
overflow: hidden;
width: 100%;
aspect-ratio: 344 / 200;
background: var(--point-color);
}
@media screen and (max-width: 960px) {
.c-showroom-card__image {
width: 100%;
aspect-ratio: 163 / 105;
}
}
.c-showroom-card__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all .3s;
}
.c-showroom-card:hover .c-showroom-card__image img {
opacity: .8;
transform: scale(1.03);
}
.c-showroom-card__contents {
position: relative;
display: inherit;
grid-template-rows: subgrid;
grid-row: 4 span;
padding: calc(14px + var(--slope-1px) * 7) calc(13px + var(--slope-1px) * 8) calc(20px + var(--slope-1px) * 1);
}
.c-showroom-card__head {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 20px 12px;
margin-bottom: calc(17px + var(--slope-1px) * 6);
color: var(--point-color);
line-height: 1;
}
@media screen and (max-width: 960px) {
.c-showroom-card__head {
flex-direction: column;
align-items: flex-start;
}
}
.c-showroom-card__body {
margin-bottom: calc(17px + var(--slope-1px) * 6);
}
.c-showroom-card__title {
font-weight: bold;
font-size: calc(15px + var(--slope-1px) * 5);
}
.c-showroom-card__address span {
display: block;
}
.c-showroom-card__data {
display: flex;
gap: 1em;
margin-top: 12px;
font-size: 15px;
}
.c-showroom-card__data > dt {
display: flex;
flex-shrink: 0;
align-items: center;
gap: .3em;
width: 5.5em;
}
.c-showroom-card__data > dt > i {
display: flex;
justify-content: center;
align-items: center;
width: 1em;
height: 1em;
}
.c-showroom-card__tel {
width: -moz-fit-content;
width: fit-content;
margin-top: 1lh;
line-height: 1;
}
.c-showroom-card__facility {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px;
margin-top: 20px;
margin-bottom: calc(20px + var(--slope-1px) * 4);
}
@media screen and (max-width: 560px) {
.c-showroom-card__facility {
grid-template-columns: repeat(4, 1fr);
}
}
.c-showroom-card__facility p {
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1/1;
padding: .25em;
}
.c-showroom-card__facility p._active {
background: var(--point-color);
}
.c-showroom-card__facility p._inactive {
background: #ababab;
}
.c-showroom-card__facility p img {
width: 100%;
height: 100%;
max-height: 27px;
-o-object-fit: contain;
object-fit: contain;
filter: brightness(500%) saturate(0%) contrast(200%);
}
.c-showroom-card__more {
position: relative;
display: inline grid;
align-items: center;
grid-template-columns: 1fr auto 1fr;
outline: none;
border: 1px solid var(--_border-color);
border-radius: var(--base-border-radius);
background: var(--_bg-color);
box-shadow: 2px 2px;
color: var(--_color);
text-decoration: none;
font-weight: bold;
font-size: calc(13px + var(--slope-1px) * 2);
transition: background .3s, color .1s, translate .3s ease-out;
-moz-column-gap: 1em;
column-gap: 1em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
--_bg-color:#fff;
--_color:var(--point-color);
--_border-color:var(--point-color);
--_hover-bg-color:var(--point-color);
--_arrow-color:var(--point-color);
--_hover-arrow-color:#fff;
padding-block: 1em;
padding-inline: 1em;
inline-size: min(100%, 400px);
translate: -2px -2px;
}
@media screen and (max-width: 960px) {
.c-showroom-card__more {
padding-block: .725em;
}
}
.c-showroom-card__more::before {
content: '';
}
.c-showroom-card__more::after {
content: "";
justify-self: end;
aspect-ratio: 1;
background: var(--_arrow-color);
transition: all .2s ease-out;
inline-size: .66667em;
-webkit-mask: var(--icon-arrow) 50% 50%/contain no-repeat;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}
@media (any-hover: hover) {
.c-showroom-card:where(:hover) .c-showroom-card__more {
background: var(--_hover-bg-color);
box-shadow: none;
color: #fff;
translate: 0 0;
}
.c-showroom-card:where(:hover) .c-showroom-card__more::after {
background: var(--_hover-arrow-color);
}
}
/* c-showroom-search-section
=============================== */
.c-showroom-search-section {
padding: calc(35px + var(--slope-1px) * 5) var(--inner-padding);
background: #f0f0f0;
}
@media screen and (max-width: 767px) {
.c-showroom-search-section {
width: calc(100% + var(--inner-padding) * 2);
margin-left: calc(var(--inner-padding) * -1);
}
}
@media screen and (min-width: 768px) {
.c-showroom-search-section {
border-radius: var(--base-border-radius);
}
}
.c-showroom-search-section__head {
margin-top: calc(-1em * var(--line-space));
margin-bottom: calc(-1em * var(--line-space) + 1em);
text-align: center;
font-weight: bold;
font-size: calc(16px + var(--slope-1px) * 2);
line-height: var(--line-height);
--line-height: 1.5;
--line-space: (var(--line-height) - 1)/2;
}
.c-showroom-search-section__body {
margin: 0 auto;
}
.c-showroom-search-section__lead {
margin-top: calc(-1em * var(--line-space));
margin-bottom: calc(-1em * var(--line-space) + 1.53846em);
text-align: center;
font-size: 1.3rem;
}
/* c-showroom-search
============================== */
.c-showroom-search {
color: var(--base-color);
}
.c-showroom-search__form {
display: flex;
overflow: hidden;
width: 700px;
height: var(--height);
max-width: 100%;
margin: 0 auto;
--height: 54px;
}
.c-showroom-search__input {
flex-grow: 1;
overflow: hidden;
}
.c-showroom-search__input input {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding: 1em;
border: 0;
border: 1px solid var(--point-color);
border-right: 0;
border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
background: var(--_bg-color);
}
.c-showroom-search__button {
flex-shrink: 0;
overflow: hidden;
border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
}
.c-showroom-search__button button {
display: flex;
justify-content: center;
align-items: center;
gap: 6px 8px;
width: 120px;
height: 100%;
margin: 0;
padding: 0 5px 0 0;
outline: none;
border: 0;
background: var(--point-color);
color: #fff;
font-weight: bold;
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: all .2s ease-out;
}
@media screen and (max-width: 960px) {
.c-showroom-search__button button {
flex-direction: column;
width: auto;
width: 78px;
font-size: calc(11px + var(--slope-1px) * 2);
}
}
.c-showroom-search__button button:before {
content: "";
display: block;
width: 15px;
height: 16px;
background: var(--icon-search-white) 50% 50%/contain no-repeat;
}
.c-showroom-search__button button > i {
display: flex;
justify-content: center;
align-items: center;
width: 1.1em;
height: 1.1em;
}
@media (any-hover: hover) {
.c-showroom-search__button button:where(:hover) {
filter: brightness(.9);
}
}
.c-showroom-search__gps {
position: relative;
display: none;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
height: 3.375em;
max-width: calc(280px + var(--slope-1px) * -15);
margin: 20px auto 0;
border: 0;
border: 1px solid var(--point-color);
border-radius: var(--base-border-radius);
background: var(--key-color);
box-shadow: 2px 2px;
color: var(--point-color);
text-decoration: none;
font-weight: bold;
font-size: calc(15px + var(--slope-1px) * 1);
transition: all .2s ease-out;
translate: -2px -2px;
}
@media screen and (max-width: 960px) {
.c-showroom-search__gps {
display: flex;
}
}
.c-showroom-search__gps:before {
content: "";
display: block;
width: 14px;
height: 16px;
background: var(--icon-map) 50% 50%/contain no-repeat;
}
/* c-showroom-nearby
=============================== */
.c-showroom-nearby__result {
display: none;
margin-top: 2em;
}
.c-showroom-nearby__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(22px + var(--slope-1px) * 8);
}
@media screen and (max-width: 960px) {
.c-showroom-nearby__list {
grid-template-columns: 100%;
}
}
.c-showroom-nearby__foot {
display: none;
margin-top: 2.5em;
}
.c-showroom-nearby__button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
border: 0;
background: transparent;
color: var(--point-color);
text-decoration: none;
font-weight: bold;
font-size: calc(14px + var(--slope-1px) * 2);
cursor: pointer;
transition: opacity .3s ease-out;
}
@media (any-hover: hover) {
.c-showroom-nearby__button:where(:hover) {
opacity: .6;
}
}
.c-showroom-nearby__button:after {
content: "";
position: relative;
top: 0;
bottom: 0;
width: 5px;
height: 10px;
margin: auto 0;
background: var(--icon-arrow) 50% 50%/contain no-repeat;
transform: rotate(-90deg);
}
.c-showroom-nearby__loading {
display: block;
width: 100%;
padding: 1em;
text-align: center;
}
.c-showroom-nearby__loading:before {
content: "\691C\7D22\4E2D...";
}
.c-showroom-nearby-item {
display: flex;
flex-direction: column;
width: 100%;
padding: calc(15px + var(--slope-1px) * 5) 20px calc(30px + var(--slope-1px) * 10);
background: var(--bg-color);
color: var(--base-color);
}
.c-showroom-nearby-item__head {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: .85em 1em;
padding: calc(15px + var(--slope-1px) * 15) calc(35px + var(--slope-1px) * 10) calc(15px + var(--slope-1px) * 15) 50px;
text-decoration: none;
line-height: 1;
transition: all .2s ease-out;
}
@media (any-hover: hover) {
.c-showroom-nearby-item__head:where(:hover) {
opacity: .7;
}
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item__head {
flex-direction: column;
align-items: flex-start;
}
}
.c-showroom-nearby-item__head:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: block;
width: 5px;
height: 10px;
margin: auto 0;
background: var(--icon-arrow) 50% 50%/contain no-repeat;
}
.c-showroom-nearby-item__rank {
position: absolute;
top: calc(15px + var(--slope-1px) * 15);
left: calc(5px + var(--slope-1px) * 3);
font-weight: 500;
font-style: normal;
font-size: calc(24px + var(--slope-1px) * 6);
font-family: var(--en-font-family);
}
.c-showroom-nearby-item__rank:after {
content: ".";
}
.c-showroom-nearby-item__name {
margin-right: auto;
font-weight: bold;
}
.c-showroom-nearby-item__name span {
display: block;
margin-top: .75em;
color: #b0b0b0;
font-size: calc(12px + var(--slope-1px) * 4);
}
.c-showroom-nearby-item__name em {
font-size: calc(18px + var(--slope-1px) * 6);
}
.c-showroom-nearby-item__distance {
font-size: calc(13px + var(--slope-1px) * 1);
}
.c-showroom-nearby-item__distance:after {
content: 'km';
}
.c-showroom-nearby-item__body {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: calc(18px + var(--slope-1px) * 6) 10px 0;
border-top: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__body {
padding-right: 0;
padding-left: 0;
}
}
.c-showroom-nearby-item__hour {
display: flex;
gap: 10px;
font-size: 14px;
line-height: 1.78571;
}
.c-showroom-nearby-item__hour:before {
content: "";
position: relative;
top: .35714em;
display: block;
flex-shrink: 0;
width: 1em;
height: 1em;
background: var(--icon-clock) 50% 50%/contain no-repeat;
}
.c-showroom-nearby-item__close {
display: flex;
flex-grow: 1;
gap: 10px;
font-size: 14px;
line-height: 1.78571;
}
.c-showroom-nearby-item__close:before {
content: "";
position: relative;
top: .35714em;
display: block;
flex-shrink: 0;
width: 1em;
height: 1em;
background: var(--icon-calendar) 50% 50%/contain no-repeat;
}
.c-showroom-nearby-item__tel {
display: flex;
justify-content: center;
align-items: center;
gap: 11px;
margin-top: calc(10px + var(--slope-1px) * 10);
padding: calc(14px + .2em) 14px 14px;
background: #fff;
color: var(--point-color);
text-decoration: none;
font-weight: bold;
font-size: calc(24px + var(--slope-1px) * 6);
font-family: var(--en-font-family);
line-height: .6;
pointer-events: none;
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item__tel {
border: 1px solid var(--point-color);
border-radius: var(--base-border-radius);
background: transparent;
box-shadow: 2px 2px;
color: var(--point-color);
pointer-events: auto;
translate: -2px -2px;
}
}
.c-showroom-nearby-item__tel > i {
display: block;
width: .66667em;
}
.c-showroom-nearby-item__contact {
display: flex;
justify-content: center;
margin-top: calc(18px + var(--slope-1px) * 6);
}
.c-showroom-nearby-item__contact._newcar {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.c-showroom-nearby-item-button {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
height: 3.375em;
padding: 0 .5em;
border: 1px solid var(--_border-color);
border-radius: var(--base-border-radius);
background: var(--_bg-color);
box-shadow: 2px 2px;
color: var(--_color);
text-decoration: none;
letter-spacing: 0;
font-weight: 700;
font-size: calc(14px + var(--slope-1px) * 2);
transition: background .3s, color .1s, translate .3s ease-out;
--_bg-color:#fff;
--_color:var(--point-color);
--_border-color:var(--point-color);
--_hover-bg-color:var(--point-color);
--_arrow-color:var(--point-color);
--_hover-arrow-color:#fff;
translate: -2px -2px;
}
@media (any-hover: hover) {
.c-showroom-nearby-item-button:where(:hover) {
background: var(--_hover-bg-color);
box-shadow: none;
color: #fff;
translate: 0 0;
}
.c-showroom-nearby-item-button:where(:hover)::after {
background: var(--_hover-arrow-color);
}
}
.c-showroom-nearby-item-button > i {
display: block;
flex-shrink: 0;
overflow: hidden;
width: 1em;
height: 1em;
}
.c-showroom-nearby-item-button > i svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
/* ============================================================= *
Sitemap
* ============================================================= */
/* c-sitemap
============================== */
.c-sitemap {
display: grid;
justify-content: center;
grid-template-rows: auto auto 1fr;
grid-template-columns: 1fr auto 15.83333% 15.83333% 15.83333%;
grid-template-areas: "showroom newcar maintenance aftersupport company" "showroom newcar maintenance aftersupport company" "showroom usedcar maintenance aftersupport company";
gap: 48px 23px;
width: 100%;
max-width: 1366px;
color: #fff;
margin-inline: auto;
}
@media screen and (max-width: 1184px) {
.c-sitemap {
grid-template-columns: repeat(5, 1fr);
}
}
@media screen and (max-width: 960px) {
.c-sitemap {
display: block;
border-bottom: 1px solid;
}
}
.c-sitemap__item[data-category=showroom] {
grid-area: showroom;
--icon: var(--icon-showroom);
}
.c-sitemap__item[data-category=showroom] .c-sitemap__body > .c-sitemap__list > li:first-child {
grid-column: 1/3;
}
.c-sitemap__item[data-category=showroom] .c-sitemap__sublist {
grid-column: 1/3;
}
.c-sitemap__item[data-category=newcar] {
grid-area: newcar;
--icon: var(--icon-newcar);
}
.c-sitemap__item[data-category=usedcar] {
grid-area: usedcar;
--icon: var(--icon-usedcar);
}
.c-sitemap__item[data-category=maintenance] {
grid-area: maintenance;
--icon: var(--icon-maintenance);
}
.c-sitemap__item[data-category=aftersupport] {
grid-area: aftersupport;
--icon: var(--icon-aftersupport);
}
.c-sitemap__item[data-category=company] {
grid-area: company;
--icon: var(--icon-recruit);
}
.c-sitemap__head {
display: block;
width: 100%;
margin-bottom: 1.6em;
padding: 0;
padding-bottom: 1em;
outline: none;
border: 0;
border-bottom: 1px solid;
background: transparent;
color: inherit;
text-align: left;
text-decoration: none;
font-weight: bold;
font-size: 15px;
cursor: unset;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
@media screen and (max-width: 960px) {
.c-sitemap__head {
position: relative;
margin-bottom: 0;
padding: 1.6em 0;
border-top: 1px solid;
border-bottom: 0;
cursor: pointer;
pointer-events: auto;
}
.c-sitemap__head.js-sitemap-toggle:before, .c-sitemap__head.js-sitemap-toggle:after {
content: "";
position: absolute;
top: 0;
right: 4px;
bottom: 0;
display: block;
width: 14px;
height: 2px;
margin: auto 0;
background: #fff;
}
.c-sitemap__head.js-sitemap-toggle:after {
transition: all .2s ease-out;
transform: rotate(90deg);
}
.c-sitemap__head.js-sitemap-toggle.is-open:after {
transform: rotate(0deg);
}
.c-sitemap__head:not(.js-sitemap-toggle):after {
content: "";
position: absolute;
top: 0;
right: 7px;
bottom: 0;
width: 7px;
height: 14px;
margin: auto 0;
background: var(--icon-arrow-white) 50% 50%/contain no-repeat;
}
}
.c-sitemap__body {
display: grid;
gap: 3.16667em;
font-size: 14px;
}
@media screen and (min-width: 961px) {
.c-sitemap__body {
display: grid !important;
}
}
@media screen and (max-width: 960px) {
.c-sitemap__body {
display: none;
gap: 0;
padding: 0 0 2.16667em 1.33333em;
}
}
.c-sitemap__list {
display: grid;
gap: 1.08333em;
line-height: 1.5;
}
@media screen and (max-width: 960px) {
.c-sitemap__list {
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
.c-sitemap__grid .c-sitemap__list {
grid-template-columns: repeat(3, 1fr);
}
}
.c-sitemap__sublist {
display: grid;
//grid-template-rows: repeat(8, auto);
grid-template-rows: repeat(9, auto);
grid-auto-flow: column;
gap: 1.08333em;
line-height: 1.5;
}
.c-sitemap__sublist li:before {
content: "-";
position: relative;
display: inline;
width: 1em;
padding-inline: .5em;
}
@media screen and (max-width: 1184px) {
.c-sitemap__sublist {
grid-template-rows: auto;
grid-auto-flow: row;
}
}
@media screen and (max-width: 960px) {
.c-sitemap__sublist {
grid-template-rows: unset;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row;
}
}
.c-sitemap__list a {
position: relative;
color: #fff;
text-decoration: none;
}
@media screen and (max-width: 960px) {
.c-sitemap__list a {
display: inline-block;
padding: .66667em 0;
}
}
@media (any-hover: hover) {
.c-sitemap__list a:where(:hover) {
text-decoration: underline;
}
}
/* ============================================================= *
Slider
* ============================================================= */
/* c-info-slider
============================== */
.c-info-slider {
z-index: 50;
}
.c-info-slider__inner {
position: relative;
overflow: visible;
width: calc(598px + 56px);
margin: 0 auto;
}
@media screen and (max-width: 960px) {
.c-info-slider__inner {
width: 100%;
max-width: 100%;
}
}
.c-info-slider__list {
position: static;
overflow: visible;
width: 1962px;
margin: 0 auto;
}
@media screen and (max-width: 960px) {
.c-info-slider__list {
overflow: hidden;
width: 100%;
max-width: 100%;
}
}
.c-info-slider__list .slick-list {
overflow: visible;
}
.c-info-slider__frame {
overflow: hidden;
border: 1px solid;
border-radius: var(--base-border-radius);
background: #fcf7e9;
color: var(--point-color);
text-decoration: none;
}
.c-info-slider__frame p {
display: flex;
align-items: center;
height: 6.8rem;
padding: 1em .90909em;
word-break: keep-all;
overflow-wrap: anywhere;
letter-spacing: 0;
font-weight: 500;
font-size: calc(13px + var(--slope-1px) * 5);
line-height: 1.2;
}
@media screen and (max-width: 960px) {
.c-info-slider__frame p {
height: 3.9rem;
}
}
.c-info-slider__item {
margin-inline: 28px;
}
.c-info-slider__item a {
display: block;
transition: transform .3s;
}
.c-info-slider__item a img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (any-hover: hover) {
.c-info-slider__item a:where(:hover) {
transform: scale(.9699);
}
}
.c-info-slider__arrow {
position: absolute;
top: 0;
bottom: 0;
width: 54px;
height: 54px;
margin: auto;
padding: .5em;
border-radius: 50%;
background: var(--point-color);
color: var(--key-color);
}
@media screen and (max-width: 960px) {
.c-info-slider__arrow {
width: 30px;
height: 30px;
}
}
.c-info-slider__arrow svg {
width: 40%;
height: 40%;
aspect-ratio: 1/1;
}
.c-info-slider__arrow.slick-prev {
left: 0;
translate: -100% 0;
}
@media screen and (max-width: 960px) {
.c-info-slider__arrow.slick-prev {
translate: calc(-50% + 28px) 0;
}
}
.c-info-slider__arrow.slick-next {
right: 0;
translate: 100% 0;
}
@media screen and (max-width: 960px) {
.c-info-slider__arrow.slick-next {
translate: calc(50% - 28px) 0;
}
}
.c-info-slider__control {
position: relative;
top: 100%;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 5.15385em;
font-size: calc(7px + var(--slope-1px) * 6);
}
.c-info-slider__control .slick-dots {
position: relative;
inset: unset;
gap: 1.76923em;
padding: 0;
border-radius: unset;
background: none;
}
.c-info-slider__control .slick-dots > li button {
width: 1.3rem;
height: 1.3rem;
padding: 0;
border: 1.5px solid var(--point-color);
background: transparent;
}
.c-info-slider__control .slick-dots > li.slick-active button {
border: none;
background: var(--key-color);
}
/* c-info-slider
============================== */
.c-car-slider {
z-index: 50;
}
.c-car-slider__inner {
position: relative;
overflow: visible;
width: calc(352px + 36px);
margin: 0 auto;
}
@media screen and (max-width: 960px) {
.c-car-slider__inner {
width: 100%;
}
}
.c-car-slider__list {
position: static;
overflow: visible;
width: 1164px;
margin: 0 auto;
}
@media screen and (max-width: 960px) {
.c-car-slider__list {
width: 100%;
max-width: 89.33333%;
}
}
.c-car-slider__list .slick-list {
overflow: visible;
}
.c-car-slider__item {
aspect-ratio: 1 / 1;
margin-inline: 28px;
}
@media screen and (max-width: 960px) {
.c-car-slider__item {
margin-inline: 13px;
}
}
.c-car-slider__item a {
display: block;
transition: transform .3s;
}
.c-car-slider__item a img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (any-hover: hover) {
.c-car-slider__item a:where(:hover) {
transform: scale(.9699);
}
}
.c-car-slider__arrow {
position: absolute;
top: 0;
bottom: 0;
width: 54px;
height: 54px;
margin: auto;
padding: .5em;
border-radius: 50%;
background: var(--point-color);
color: var(--key-color);
}
@media screen and (max-width: 960px) {
.c-car-slider__arrow {
width: 30px;
height: 30px;
}
}
.c-car-slider__arrow svg {
width: 40%;
height: 40%;
aspect-ratio: 1/1;
}
.c-car-slider__arrow.slick-prev {
left: 0;
translate: -100% 0;
}
@media screen and (max-width: 960px) {
.c-car-slider__arrow.slick-prev {
translate: calc(-50% + 40px) 0;
}
}
.c-car-slider__arrow.slick-next {
right: 0;
translate: 100% 0;
}
@media screen and (max-width: 960px) {
.c-car-slider__arrow.slick-next {
translate: calc(50% - 40px) 0;
}
}
.c-car-slider__control {
position: relative;
top: 100%;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 5.15385em;
font-size: calc(7px + var(--slope-1px) * 6);
}
.c-car-slider__control .slick-dots {
position: relative;
inset: unset;
gap: 1.76923em;
padding: 0;
border-radius: unset;
background: none;
}
.c-car-slider__control .slick-dots > li button {
width: 1.3rem;
height: 1.3rem;
padding: 0;
border: 1.5px solid var(--point-color);
background: transparent;
}
.c-car-slider__control .slick-dots > li.slick-active button {
border: none;
background: var(--key-color);
}
/* ============================================================= *
Topics
* ============================================================= */
/* c-topics
============================== */
.c-topics {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "head foot" "body body";
row-gap: 26px;
max-width: var(--inner-width-px);
margin-top: 26px;
margin-inline: auto;
}
@media screen and (max-width: 960px) {
.c-topics {
grid-template-columns: 100%;
grid-template-areas: "head" "body" "foot";
row-gap: 1em;
}
}
.c-topics__head {
display: flex;
justify-content: flex-start;
align-items: center;
grid-area: head;
text-align: left;
}
.c-topics__head .c-section-title {
margin-inline: 0;
}
@media screen and (max-width: 960px) {
.c-topics__head {
justify-content: center;
text-align: center;
}
}
.c-topics__body {
grid-area: body;
}
.c-topics__foot {
grid-area: foot;
}
@media screen and (max-width: 960px) {
.c-topics__foot {
display: flex;
justify-content: center;
align-items: center;
}
}
.c-topics .topics-link {
position: relative;
display: inherit;
grid-template-columns: inherit;
grid-column: inherit;
gap: 2em;
padding: 2em 0 2em 1em;
text-decoration: none;
font-size: calc(15px + var(--slope-1px));
transition: opacity .3s;
}
@media screen and (max-width: 960px) {
.c-topics .topics-link {
display: block;
padding: 2em 0 2em 0em;
}
}
.c-topics .topics-link:hover {
opacity: .8;
}
.c-topics .topics-link__head {
position: relative;
flex-shrink: 0;
color: var(--point-color);
font-weight: 500;
font-size: calc(13px + var(--slope-1px) * 2);
line-height: 1;
}
.c-topics .topics-link__category {
margin-left: 1em;
padding: .25em .5em;
border: 1px solid;
background: #fff;
color: var(--point-color);
font-weight: 500;
font-size: calc(9px + var(--slope-1px) * 2);
}
.c-topics .topics-link__body {
/* -0.2em for line-height offset */
margin-top: -.2em;
margin-bottom: -.2em;
font-size: calc(13px + var(--slope-1px) * 2);
line-height: 1.4;
}
@media screen and (max-width: 960px) {
.c-topics .topics-link__body {
/* -0.2em for line-height offset */
margin-top: .8em;
margin-bottom: -.2em;
line-height: 1.4;
}
}
/* c-topics-list
============================== */
.c-topics-list {
display: grid;
grid-auto-columns: auto 1fr;
}
.c-topics-list__item {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
border-bottom: 1px solid var(--border-color);
}
@media screen and (min-width: 961px) {
.c-topics-list__item:first-child {
border-top: 1px solid var(--border-color);
}
}
.c-topics-list__foot {
margin-bottom: 1em;
}
/* c-topics-toggle
============================== */
.c-topics-toggle {
position: relative;
z-index: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: .5em;
overflow: visible;
width: 100%;
padding: 1.25em 0 .875em;
outline: none;
border: 0;
background: none;
color: currentColor;
font-size: calc(15px + var(--slope-1px));
line-height: 1;
cursor: pointer;
transition: color .3s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c-topics-toggle:hover {
color: var(--point-color);
}
.c-topics-toggle::before {
content: "";
position: relative;
right: 4px;
display: block;
flex-shrink: 0;
width: 5px;
height: 9px;
background: var(--icon-arrow) 50% 50%/contain no-repeat;
transition: transform .3s;
transform: rotate(90deg);
}
.c-topics-toggle.is-show::after {
transform: rotate(-90deg);
}
.c-topics-toggle ._text-show {
display: none;
}
.c-topics-toggle.is-show ._text-hide {
display: none;
}
.c-topics-toggle.is-show ._text-show {
display: block;
}
/* ============================================================= *
Scroll Bar
* ============================================================= */
[data-simplebar] {
position: relative;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.simplebar-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
width: auto !important;
height: auto !important;
margin: 0;
padding: 0;
direction: inherit;
}
.simplebar-offset {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-overflow-scrolling: touch;
box-sizing: inherit !important;
margin: 0;
padding: 0;
resize: none !important;
direction: inherit !important;
}
.simplebar-content-wrapper {
position: relative;
display: block;
box-sizing: border-box !important;
width: auto;
height: 100%;
max-width: 100%;
max-height: 100%;
direction: inherit;
scrollbar-width: none;
-ms-overflow-style: none;
}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
width: 0;
height: 0;
}
.simplebar-content:before,
.simplebar-content:after {
content: ' ';
display: table;
}
.simplebar-placeholder {
width: 100%;
max-width: 100%;
max-height: 100%;
pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
position: relative;
z-index: -1;
float: left;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
overflow: hidden;
box-sizing: inherit !important;
width: 100%;
height: 100%;
max-width: 1px;
max-height: 1px;
margin: 0;
padding: 0;
pointer-events: none;
}
.simplebar-height-auto-observer {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
overflow: hidden;
box-sizing: inherit;
width: 1000%;
height: 1000%;
min-width: 1px;
min-height: 1px;
opacity: 0;
pointer-events: none;
}
.simplebar-track {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
background: rgba(200, 200, 200, .3);
/* pointer-events: none; */
}
[data-simplebar].simplebar-dragging .simplebar-content {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-track {
pointer-events: all;
}
.simplebar-scrollbar {
position: absolute;
right: 0;
left: 0;
min-height: 10px;
}
.simplebar-scrollbar:before {
content: '';
position: absolute;
right: 2px;
left: 2px;
border-radius: 12px;
background: var(--key-color);
transition: opacity 0s linear;
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px;
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
top: 2px;
bottom: 2px;
}
.simplebar-track.simplebar-horizontal {
bottom: 3px;
left: 0;
overflow: visible;
width: 100%;
height: 6px;
max-width: 952px;
margin: 0 auto;
}
.simplebar-track.simplebar-horizontal.is-fixed {
position: fixed;
top: auto;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
top: auto;
right: auto;
bottom: -3px;
left: 0;
width: auto;
height: 12px;
min-width: 10px;
min-height: 0;
margin: auto 0;
border-radius: 12px;
background: var(--key-color);
}
/* Rtl support */
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
right: auto;
left: 0;
}
.hs-dummy-scrollbar-size {
position: fixed;
visibility: hidden;
overflow-x: scroll;
overflow-y: hidden;
width: 500px;
height: 500px;
opacity: 0;
direction: rtl;
}
.simplebar-hide-scrollbar {
position: fixed;
left: 0;
visibility: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
/* ============================================================= *
Utility
* ============================================================= */
/* Media Query Setting
====================================== */
.u-tablet-block {
display: none !important;
}
@media screen and (max-width: 960px) {
.u-tablet-block {
display: block !important;
}
}
.u-tablet-inline-block {
display: none !important;
}
@media screen and (max-width: 960px) {
.u-tablet-inline-block {
display: inline-block !important;
}
}
.u-tablet-flex {
display: none !important;
}
@media screen and (max-width: 960px) {
.u-tablet-flex {
display: flex !important;
}
}
@media screen and (max-width: 960px) {
.u-tablet-none {
display: none !important;
}
}
.u-mobile-block {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-block {
display: block !important;
}
}
.u-mobile-inline-block {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-inline-block {
display: inline-block !important;
}
}
.u-mobile-flex {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-flex {
display: flex !important;
}
}
@media screen and (max-width: 560px) {
.u-mobile-none {
display: none !important;
}
}
/* text align
====================================== */
.u-ta-left {
text-align: left !important;
}
.u-ta-right {
text-align: right !important;
}
.u-ta-center {
text-align: center !important;
}
/* display
====================================== */
.u-d-block {
display: block !important;
}
.u-d-none {
display: none !important;
}
.u-d-inline {
display: inline !important;
}
.u-d-ib {
display: inline-block !important;
}
/* position
====================================== */
.u-pos-static {
position: static !important;
}
.u-pos-relative {
position: relative !important;
}
.u-pos-absolute {
position: absolute !important;
}
.u-pos-fixed {
position: fixed !important;
}
/* clear
====================================== */
.u-clearfix:after {
content: "";
display: block;
visibility: hidden;
clear: both;
}
/* other
====================================== */
.u-strong {
font-weight: bold !important;
}
.u-pointer {
cursor: pointer;
}
.u-nowrap {
white-space: nowrap;
}
.u-color-honda {
color: #cc0000 !important;
}
.u-color-ciao {
color: #0068b6 !important;
}
.u-color-mamoru {
color: #8fc31f !important;
}
.u-rotate-90 {
transform: rotate(90deg);
}
/* animationn
====================================== */
.u-no-transition {
transition: none !important;
}
/* u-wide-width
============================== */
.u-wide-width {
position: relative;
left: 50%;
width: 100vw;
transform: translateX(-50%);
}
@media screen and (max-width: 960px) {
.u-wide-width {
width: calc(100% + var(--inner-padding) * 2);
}
}
/* u-inner-width
============================== */
.u-inner-width {
max-width: 990px;
margin-right: auto;
margin-left: auto;
}