/* ============================================================= *
Reset
* ============================================================= */
/* Reset
----------------------------------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font: inherit;
font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
/* ============================================================= *
Layout
* ============================================================= */
/* =============================================================
Custom Properties
* ============================================================= */
:root {
/* color */
--base-color: #333;
--dark-base-color: #282828;
--light-base-color: #666;
--on-color: #ffffff;
--key-color: #dc352c;
--point-color: #2358c9;
--dark-key-color: #233db1;
--light-key-color: #26bcd3;
--bg-color: #f0f0f0;
--border-color: #bfbfbf;
--ciao-color: #0068b7;
--accent-color: #c00;
/* layouts */
--frame-width: 1366;
--inner-width: 1100;
--frame-width-px: calc(var(--frame-width) * 1px);
--inner-width-px: calc(var(--inner-width) * 1px);
--inner-padding: calc(15px + var(--slope-1px) * 25);
--vw: 1vw;
--inner-overflow: calc(var(--vw) * 50 - var(--inner-width-px) * .5);
--base-border-radius: calc(10px + var(--slope-1px) * 10);
--header-inner-height: calc(46px + var(--slope-1px) * 10);
--header-padding-block: calc(20px + var(--slope-1px) * 20);
--header-height: calc(var(--header-inner-height) + var(--header-padding-block));
--header-visible-height: var(--header-height);
--outer-padding-px:76px;
--fixed-nav-height: 60px;
--outer-padding-per: 5.56369%;
/* svg icon */
--icon-arrow: url('data:image/svg+xml;utf8,');
--icon-angle: url('data:image/svg+xml;utf8,');
--icon-info: url('data:image/svg+xml;utf8,');
--icon-search: url('data:image/svg+xml;utf8,');
--icon-plus: url("data:image/svg+xml;utf8,");
--icon-minus: url('data:image/svg+xml;utf8,');
--icon-down: url('data:image/svg+xml;utf8,');
--icon-close: url('data:image/svg+xml;utf8,');
--icon-calendar: url('data:image/svg+xml;utf8,');
--icon-map: url('data:image/svg+xml;utf8,');
--icon-usedcar: url('data:image/svg+xml;utf8,');
--icon-democar: url('data:image/svg+xml;utf8,');
--icon-reservation: url('data:image/svg+xml;utf8,');
--icon-contact: url('data:image/svg+xml;utf8,');
/* font
==================== */
/* size */
--line-height: 1.65;
--line-space: (var(--line-height) - 1)/2;
--ovall-radius: calc(1px / 0);
--leading-trim: calc((1em - 1lh) / 2);
/* for responsive */
--max-tablet-width: 767;
--min-tablet-width: 375;
--min-tablet-percent: .58;
/* family */
--base-font-family: "Noto Sans JP", sans-serif;
--en-font-family: Montserrat;
---point-en-font-family: Montserrat, sans-serif;
/* utility
==================== */
--base-box-shadow: 0px 0px 7px 0px rgba(51, 51, 51, .15);
--slope-1px: clamp(0px, -.95663px + .2551vw, 1px);
}
@media screen and (max-width: 1180px) {
:root {
--inner-overflow: var(--inner-padding);
}
}
@media screen and (max-width: 767px) {
:root {
--outer-padding: 4.8%;
--outer-padding-per: 4.8%;
}
}
/* =============================================================
Base
* ============================================================= */
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
height: 100%;
margin: 0;
padding: 0;
font-size: 62.5%;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #fff;
color: var(--base-color);
letter-spacing: .03em;
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 1);
font-family: var(--base-font-family);
line-height: var(--line-height);
-webkit-text-size-adjust: 100%;
--line-height: 1.75;
--line-space: (var(--line-height) - 1)/2;
}
body.is-modal-open {
overflow: hidden;
}
img {
display: block;
height: auto;
max-width: 100%;
}
svg {
display: block;
width: 100%;
height: auto;
}
svg path:not([fill]) {
fill: currentColor;
}
svg text:not([fill]) {
fill: currentColor;
}
a {
color: currentColor;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a.js-tel {
text-decoration: none;
}
a.js-tel._active {
text-decoration: underline;
}
button {
cursor: pointer;
}
sup {
vertical-align: super;
font-size: 70%;
}
sub {
vertical-align: sub;
font-size: 70%;
}
:where(._en) {
font-family: var(--en-font-family);
line-height: .8;
}
#common-notready {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
}
.l-wrapper {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
margin: 0 auto;
background: #fff;
opacity: 0;
transition: opacity .4s ease-out;
}
body.is-loaded .l-wrapper {
opacity: 1;
}
@media screen and (max-width: 767px) {
.l-wrapper {
min-width: 0;
}
}
/* intersection
====================================== */
*[data-intersection] {
opacity: 0;
transition: all .4s ease-out;
}
*[data-intersection][data-intersecting="true"] {
opacity: 1;
transition: opacity .6s ease-out .2s, transform .6s ease-out .2s;
}
*.js-itrsec-right[data-intersection] {
opacity: 0;
transition: all .4s ease-out;
transform: translateX(-20px);
}
*.js-itrsec-right[data-intersection][data-intersecting="true"] {
opacity: 1;
transition: opacity .4s ease-out .2s, transform .4s ease-out .2s;
transform: translateX(0);
}
*.js-itrsec-left[data-intersection] {
opacity: 0;
transition: opacity .4s ease-out, transform .4s ease-out;
transform: translateX(20px);
}
*.js-itrsec-left[data-intersection][data-intersecting="true"] {
opacity: 1;
transition: opacity .4s ease-out .2s, transform .4s ease-out .2s;
transform: translateX(0);
}
/* =============================================================
Loader
* ============================================================= */
.l-loader {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
width: calc(var(--vw) * 100);
height: 100%;
background: #fff;
transition: opacity .5s ease-out;
}
body.is-loaded .l-loader {
opacity: 0;
pointer-events: none;
}
/* =============================================================
Header
* ============================================================= */
/* header
=============================== */
.l-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10000;
display: flex;
align-items: flex-end;
width: 100%;
height: var(--header-height);
transition: all .4s;
}
.l-header .c-sitemap__header-button {
display: flex;
align-items: center;
}
@media screen and (max-width: 1180px) {
.l-header .c-sitemap__header-button {
align-items: flex-start;
width: 100%;
}
}
.l-header .c-sitemap-pages > li:has(*[data-modal-for="recruit"]) {
display: none;
}
/* l-header__inner
=============================== */
.l-header__inner {
display: flex;
align-items: stretch;
gap: 2%;
width: 100%;
height: var(--header-inner-height);
padding-inline: var(--inner-padding);
color: #fff;
transition: all .4s;
}
@media screen and (max-width: 1180px) {
.l-header__inner {
transform: none;
}
}
@media screen and (min-width: 768px) {
body.is-scrolled .l-header {
--header-height: 70px;
}
}
@media screen and (max-width: 1180px) {
body.is-scrolled .l-header {
--header-height: 70px;
}
}
:is(.l-header) .c-sitemap-box__toggle {
display: flex;
align-items: center;
height: 100%;
padding: 0;
outline: none;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: currentColor;
cursor: pointer;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* l-header__head
=============================== */
.l-header__head {
position: relative;
z-index: 1;
display: flex;
height: inherit;
}
/* l-header__body
=============================== */
.l-header__body {
position: relative;
top: 0;
right: 0;
overflow-y: auto;
width: 100%;
height: 120px;
height: 100%;
padding: var(--header-height) 0 5.33333%;
border-top: 1px solid #ddd;
border-top: 0;
box-shadow: 0px 0px 2px 0px #ddd;
transition: all .3s ease-out;
transition: transform .3s ease-out;
transform: translateX(100%);
}
/* l-header-logo
=============================== */
.l-header-logo {
inset: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
width: fit-content;
margin-right: auto;
}
@media screen and (max-width: 767px) {
.l-header-logo {
right: auto;
}
}
.l-header-logo a {
position: relative;
display: flex;
flex-shrink: 1;
justify-content: center;
align-items: center;
width: calc(244px + var(--slope-1px) * 60);
border-radius: var(--ovall-radius);
background: var(--on-color);
color: var(--point-color);
transition: opacity .1s ease-out;
transition: opacity .25s;
}
.l-header-logo a img {
max-width: calc(100% / 304 * 262);
}
.l-header-logo a:hover {
opacity: .7;
}
/* l-header-menu
============================== */
.l-header-menu {
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
gap: clamp(16px, -34.75269px + 4.30108vw, 24px);
}
.l-header-pc-nav {
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: stretch;
align-self: stretch;
font-weight: 500;
font-size: 14px;
transition: .2s ease-out;
}
@media screen and (max-width: 1180px) {
.l-header-pc-nav {
display: none;
}
}
.l-header-pc-nav .c-sitemap {
position: relative;
display: flex;
flex-grow: 1;
justify-content: center;
gap: clamp(14px, -24.06452px + 3.22581vw, 20px);
max-width: fit-content;
padding-inline: clamp(20px, -5.37634px + 2.15054vw, 24px) 8px;
border-radius: var(--ovall-radius);
background: var(--on-color);
color: var(--base-color);
}
@media screen and (max-width: 1180px) {
.l-header-pc-nav .c-sitemap {
justify-content: flex-end;
}
}
.l-header-pc-nav .c-sitemap-box {
display: flex;
height: 100%;
transition: all .2s ease-out;
}
.l-header-pc-nav .c-sitemap-box__toggle {
pointer-events: auto;
}
.l-header-pc-nav .c-sitemap-box__body {
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
overflow: hidden;
width: 100%;
min-width: 620px;
padding: 2em 1.5em;
border: 1px solid var(--border-color);
border-radius: var(--base-border-radius);
background: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .1);
color: var(--base-color);
font-size: 14px;
opacity: 0;
transition: all .2s ease-out;
transform: translateY(-10px);
pointer-events: none;
}
.l-header-pc-nav .c-sitemap-box__body.is-open {
visibility: visible;
opacity: 1;
transition: all .2s ease-out;
transform: translateY(0px);
pointer-events: auto;
}
.l-header-pc-nav .c-sitemap-box .c-sitemap-showroom-grid {
display: grid;
grid-template-columns: 100%;
gap: 15px;
margin-top: 15px;
}
.l-header-pc-nav .c-sitemap-box .c-sitemap-showroom__head {
margin-bottom: .5em;
padding: .25em 1em;
border-radius: 3px;
background: var(--base-color);
color: #fff;
}
.l-header-pc-nav .c-sitemap-box:hover {
color: var(--key-color);
}
.l-header-pc-nav .c-sitemap-pages {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px 1.5em;
}
.l-header-pc-nav .c-sitemap-pages li a {
position: relative;
display: flex;
width: 100%;
padding-block: .64286em;
padding-right: .85714em;
text-decoration: none;
line-height: 1.5;
transition: color .2s ease-out;
}
.l-header-pc-nav .c-sitemap-pages li a:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: .4em;
height: .4em;
margin: auto;
border-top: 1.5px solid;
border-right: 1.5px solid;
vertical-align: middle;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.l-header-pc-nav .c-sitemap-pages li a:hover {
color: var(--key-color);
opacity: 1;
}
.l-header-pc-nav .c-sitemap-pages li a:hover > i {
transform: translateY(-50%) translateX(3px);
}
/* l-header-toggle
=============================== */
.l-header-toggle {
position: relative;
z-index: 1;
z-index: 9997;
display: none;
width: 50px;
aspect-ratio: 1/1;
margin: 0;
padding: 0;
outline: none;
border: 0;
border-radius: 50%;
background: var(--key-color);
color: currentColor;
cursor: pointer;
appearance: none;
}
@media screen and (max-width: 1180px) {
.l-header-toggle {
display: block;
}
body.is-header-open .l-header-toggle {
background: #fff;
color: var(--base-color);
transition: all .2s .2s;
}
}
.l-header-toggle > span,
.l-header-toggle > span:before,
.l-header-toggle > span:after {
position: absolute;
display: block;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.l-header-toggle > span {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
width: 37.5%;
margin: auto;
font-size: 10px;
transition: background .2s;
}
.l-header-toggle > span:before, .l-header-toggle > span:after {
content: "";
left: 0;
width: 100%;
transition: margin-top .2s .2s, transform .2s, background .2s;
}
.l-header-toggle > span:before {
margin-top: -30%;
}
.l-header-toggle > span:after {
margin-top: 30%;
}
body.is-header-open .l-header-toggle > span {
background: transparent;
transition: background .2s .2s;
}
body.is-header-open .l-header-toggle > span:before, body.is-header-open .l-header-toggle > span:after {
transition: margin-top .2s, transform .2s .2s, background .2s .2s;
}
body.is-header-open .l-header-toggle > span:before {
margin-top: 0;
transform: rotate(45deg);
}
body.is-header-open .l-header-toggle > span:after {
margin-top: 0;
transform: rotate(-45deg);
}
/* l-header-sp-nav
=============================== */
.l-header-sp-nav {
position: fixed;
top: 0;
left: 0;
z-index: 1;
visibility: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
padding: calc(var(--header-height) + 30px) var(--inner-padding) 30px;
background: var(--dark-base-color);
color: var(--on-color);
opacity: 0;
transition: all .4s ease-out;
pointer-events: none;
overscroll-behavior-y: none;
}
@media screen and (max-width: 1180px) {
body.is-header-open .l-header-sp-nav {
visibility: visible;
color: #fff;
opacity: 1;
pointer-events: auto;
}
}
.l-header-sp-nav-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(5px + var(--slope-1px) * 30);
margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
.l-header-sp-nav-buttons {
margin-bottom: 32px;
}
}
/* l-header-menu__button
=============================== */
@media screen and (max-width: 1180px) {
.l-header-menu__button {
display: none;
}
}
/* l-header-button
=============================== */
.l-header-button {
display: flex;
align-items: center;
overflow: hidden;
width: clamp(110px, -99.35484px + 17.74194vw, 143px);
height: var(--header-inner-height);
border-radius: var(--ovall-radius);
background: var(--key-color);
color: var(--on-color);
text-decoration: none;
white-space: nowrap;
font-weight: 600;
font-size: 14px;
font-family: var(--en-font-family);
transition: all .4s;
}
.l-header-button:hover {
background: #fff;
color: var(--base-color);
}
.l-header-button__loop {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0;
animation: loop_text 3s linear infinite;
}
.l-header-button__loop ._loop {
display: flex;
justify-content: center;
align-items: center;
gap: .25em;
width: fit-content;
padding-inline: 7px;
padding-top: .25em;
padding-bottom: .125em;
line-height: 1;
}
.l-header-button__loop ._loop:before {
content: "";
position: relative;
display: block;
flex-shrink: 0;
width: 16px;
aspect-ratio: 1/1;
background: currentColor;
mask: url(../img/icon/icon_header_contact.svg) 50% 50%/contain no-repeat;
}
@keyframes loop_text {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(calc(-100% / var(--loop-element-count)));
}
}
/* =============================================================
Main
* ============================================================= */
/* l-main
=============================== */
.l-main {
position: relative;
flex-grow: 1;
overflow: clip;
width: 100%;
max-height: 100%;
}
.l-main:not(:has(.l-main__head)):before {
content: "";
display: block;
width: 100%;
height: calc(var(--header-inner-height) + var(--header-padding-block) * 2);
background: var(--dark-base-color);
}
.l-main__head {
padding-top: var(--header-height);
background: var(--dark-base-color);
color: #fff;
}
body[data-id="index"] .l-main__head {
padding-top: 0;
}
body[data-id="index"] .l-main:before {
content: none;
}
.l-main__breadcrumbs {
width: 100%;
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
margin-inline: auto;
padding-inline: var(--inner-padding);
padding-top: 15px;
}
.l-main__body {
width: 100%;
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
margin-inline: auto;
padding-block: calc(50px + var(--slope-1px) * 25) calc(100px + var(--slope-1px) * 50);
padding-inline: var(--inner-padding);
}
body[data-id=index] .l-main__body {
max-width: 100%;
padding: 0;
}
.l-main__body:has(.p-sr-contact:last-child) {
padding-bottom: 0;
}
body.is-loaded .l-wrapper {
opacity: 1;
}
/* =============================================================
Footer
* ============================================================= */
/* l-footer
=============================== */
.l-footer {
position: relative;
padding-block: calc(40px + var(--slope-1px) * 50) calc(50px + var(--slope-1px) * 30 + var(--fixed-nav-height));
padding-inline: var(--inner-padding);
background: var(--dark-base-color);
color: #fff;
color: var(--on-color);
}
/* l-footer-copy
============================== */
.l-footer-copy {
position: relative;
left: calc(var(--inner-padding) * -1);
overflow: hidden;
width: calc(var(--vw) * 100);
margin-block: -.1em;
padding-bottom: calc(40px + var(--slope-1px) * 25);
font-weight: 700;
font-size: calc(100cqi / 1366 * 90);
font-family: var(--en-font-family);
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.l-footer-copy {
font-size: calc(100cqi / 375 * 43);
}
}
.l-footer-copy__inner {
display: flex;
overflow: hidden;
width: fit-content;
white-space: nowrap;
animation: loop_text 15s linear infinite;
}
.l-footer-copy__inner ._loop {
flex-shrink: 0;
width: fit-content;
padding-inline: .5em;
}
/* l-footer-contact
=============================== */
.l-footer-contact {
position: relative;
z-index: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px 36px;
max-width: var(--inner-width-px);
margin-inline: auto;
text-align: center;
}
@media screen and (max-width: 767px) {
.l-footer-contact {
grid-template-columns: 100%;
}
}
.l-footer-contact__button {
position: relative;
display: flex;
align-items: center;
gap: .5em;
width: auto;
text-align: left;
text-decoration: none;
opacity: 1;
-webkit-transition: all .3s;
transition: all .3s;
}
.l-footer-contact__button:hover {
opacity: .6;
}
.l-footer-contact__button i {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 1.182em;
height: 1.182em;
}
.l-footer-contact__button i:before {
content: "";
position: absolute;
top: 50%;
z-index: -1;
width: 1.182em;
height: 1.182em;
border-radius: 50%;
background: var(--dark-key-color);
transform: translateY(-50%);
}
.l-footer-contact__button i svg {
position: relative;
right: -.05em;
width: .25em;
}
/* l-footer-sitemap
=============================== */
.l-footer-sitemap {
max-width: var(--inner-width-px);
margin-inline: auto;
margin-top: calc(57px + var(--slope-1px) * 8);
padding-top: 65px;
border-top: 1px solid var(--light-base-color);
color: #ababab;
}
@media screen and (max-width: 767px) {
.l-footer-sitemap {
padding-top: 0;
border-top: 0;
}
}
.l-footer-sitemap__body {
margin: 0 auto;
}
/* l-footer-profile
=============================== */
.l-footer-info {
display: grid;
justify-content: space-between;
align-items: flex-end;
grid-template-columns: 1fr auto;
gap: 20px;
max-width: var(--inner-width-px);
margin-inline: auto;
margin-top: calc(48px + var(--slope-1px) * 17);
}
@media screen and (max-width: 767px) {
.l-footer-info {
grid-template-columns: 100%;
gap: 24px;
justify-items: center;
}
}
.l-footer-info__logo {
width: 100%;
max-width: calc(277px + var(--slope-1px) * 123);
}
.l-footer-info__profile {
display: grid;
grid-template-columns: 100%;
margin-block: var(--leading-trim);
color: var(--light-base-color);
font-size: 13px;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.l-footer-info__profile {
justify-content: center;
text-align: center;
}
}
.l-footer-info__copyright {
font-size: 13px;
font-family: var(--en-font-family);
line-height: .8;
}
@media screen and (min-width: 768px) {
.l-footer-info__copyright {
grid-column: 2/3;
grid-row: 1/3;
}
}
/* =============================================================
Fixed-nav
* ============================================================= */
/* l-fixed-nav-container
============================== */
.l-fixed-nav-container {
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
width: 100%;
height: var(--fixed-nav-height);
background: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2);
transition: all .4s ease-out;
}
body[data-id=index] .l-fixed-nav-container {
visibility: hidden;
opacity: 0;
transform: translateY(100%);
pointer-events: none;
}
body[data-id=index].is-fixed-nav-visible .l-fixed-nav-container {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* l-fixed-nav-grid
============================== */
.l-fixed-nav-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
width: 100%;
height: 100%;
}
.l-fixed-nav-grid._x4 {
grid-template-columns: repeat(4, 1fr);
}
.l-fixed-nav-grid__item {
display: contents;
}
/* l-fixed-nav
============================== */
.l-fixed-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
background: var(--key-color);
color: #fff;
text-decoration: none;
letter-spacing: 0;
font-weight: bold;
font-size: 14px;
line-height: 1;
transition: all .2s ease-out;
}
@media screen and (max-width: 767px) {
.l-fixed-nav {
flex-direction: column;
font-size: 12px;
}
}
.l-fixed-nav:hover {
filter: brightness(1.1);
}
.l-fixed-nav:before {
content: "";
display: block;
width: 20px;
height: 20px;
background: currentColor;
mask: var(--icon) 50% 50%/contain no-repeat;
}
.l-fixed-nav._showroom {
--icon: var(--icon-map);
}
.l-fixed-nav._usedcar {
--icon: var(--icon-usedcar);
}
.l-fixed-nav._democar {
--icon: var(--icon-democar);
}
.l-fixed-nav._reservation {
--icon: var(--icon-reservation);
}
.l-fixed-nav._contact {
--icon: var(--icon-contact);
}
.l-modal {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
padding: 0;
border: none;
background: transparent;
--close-height: calc(26px + var(--close-padding));
--close-padding: calc(5px + var(--slope-1px) * 2);
--modal-padding-block: calc(15px + var(--slope-1px) * 5);
}
.l-modal[open] {
display: flex;
align-items: center;
}
.l-modal::backdrop {
background: rgba(0, 0, 0, .85);
}
.l-modal__inner {
position: relative;
display: flex;
flex-direction: column-reverse;
width: 100%;
height: 100%;
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
margin-block: auto;
margin-inline: auto;
padding-inline: var(--inner-padding);
padding-top: var(--modal-padding-block);
pointer-events: none;
}
.l-modal__contents {
position: relative;
overflow-y: auto;
width: 100%;
max-height: calc(100% - var(--close-height));
margin-bottom: auto;
padding-bottom: var(--modal-padding-block);
pointer-events: auto;
}
.l-modal__close {
z-index: 4;
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
margin-left: auto;
padding-bottom: var(--close-padding);
outline: none;
border: 0;
background: none;
color: #fff;
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 1);
cursor: pointer;
pointer-events: auto;
appearance: none;
}
.l-modal__close:hover {
opacity: .7;
}
.l-modal__close:after {
content: "";
display: block;
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: var(--ovall-radius);
background: var(--icon-close) 50% 50%/12px no-repeat #fff;
}
/* ============================================================= *
Components
* ============================================================= */
/* ============================================================= *
animation
* ============================================================= */
/* loop
=============================== */
@-webkit-keyframes loop {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes loop {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes loop2 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@keyframes loop2 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@keyframes bggradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* ============================================================= *
Banner
* ============================================================= */
/* banner
=============================== */
.c-banner {
display: block;
transition: all .3s ease-out;
}
.c-banner:hover {
opacity: .7;
}
/* =============================================================
Blog
* ============================================================= */
/* c-blog-container
============================== */
.c-blog-container__table {
width: 100%;
}
/* CMS-blog
============================== */
.CMS-blog {
display: grid;
grid-template-columns: 100%;
gap: calc(15px + var(--slope-1px) * 15);
}
/* CMS-blog-paging
============================== */
.CMS-blog-paging {
display: flex;
justify-content: flex-end;
gap: 1em;
margin-block: var(--leading-trim);
font-size: calc(15px + var(--slope-1px) * 1);
}
.CMS-blog + .CMS-blog-paging {
margin-top: calc(15px + var(--slope-1px) * 15);
}
/* CMS-blog-article
============================== */
.CMS-blog-article {
display: grid;
grid-template-columns: 100%;
gap: calc(30px + var(--slope-1px) * 20);
padding: calc(20px + var(--slope-1px) * 30);
border: 1px solid var(--border-color);
border-radius: var(--base-border-radius);
background: #fff;
}
.CMS-blog-article__head {
display: grid;
grid-template-columns: 1fr auto;
gap: calc(15px + var(--slope-1px) * 5);
padding: 20px;
padding: calc(20px + var(--slope-1px) * 10);
border-radius: calc(var(--base-border-radius) * .5);
background: var(--bg-color);
}
@media screen and (max-width: 767px) {
.CMS-blog-article__head {
grid-template-columns: 100%;
}
}
.CMS-blog-article__title {
margin-block: var(--leading-trim);
font-weight: 700;
font-size: calc(20px + var(--slope-1px) * 4);
}
.CMS-blog-article__date {
font-weight: 600;
font-size: calc(15px + var(--slope-1px) * 1);
font-family: var(--en-font-family);
}
/* ============================================================= *
Button
* ============================================================= */
/* c-button-container
=============================== */
.c-button-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
width: 100%;
margin-top: calc(25px + var(--slope-1px) * 15);
}
.c-button-container > .c-button {
width: 100%;
max-width: calc(303px + var(--slope-1px) * 40);
}
/* c-button-unit
=============================== */
.c-button-unit {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
}
.c-button-unit__catch {
margin-block: var(--leading-trim);
text-align: center;
font-size: calc(15px + var(--slope-1px) * 2);
}
/* c-button
=============================== */
.c-button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: calc(52px + var(--slope-1px) * 21);
outline: none;
outline: none;
border: 0;
border-radius: var(--ovall-radius);
background: var(--bg-color);
color: var(--color);
text-align: center;
text-decoration: none !important;
letter-spacing: 0;
font-weight: 500;
font-size: calc(16px + var(--slope-1px) * 4);
font-feature-settings: "palt";
line-height: 1.25;
cursor: pointer;
transition: all .2s ease-out;
appearance: none;
--color: var(--on-color);
--bg-color: var(--dark-base-color);
}
.c-button._small {
letter-spacing: 0;
font-size: 1.4rem;
}
.c-button._primary {
--color: #fff;
--bg-color: var(--key-color);
}
.c-button._point-color {
--color: #fff;
--bg-color: var(--point-color);
}
.c-button._outline {
border: 1px solid var(--base-color);
--color: var(--base-color);
--bg-color: #fff;
}
.c-button._shop-tel {
gap: 3px;
}
.c-button._shop-tel:before {
content: "";
display: block;
flex-shrink: 0;
width: 26px;
aspect-ratio: 1/1;
background: currentColor;
mask: url(../img/icon/tel.png) 50% 50%/contain no-repeat;
}
.c-button._shop-tel:after {
content: none;
}
.c-button._shop-contact {
gap: 4px;
}
.c-button._shop-contact:before {
content: "";
display: block;
flex-shrink: 0;
width: 26px;
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-contact) 50% 50%/contain no-repeat;
}
@media screen and (max-width: 767px) {
.c-button._shop-contact:after {
content: none;
}
}
.c-button._shop-maintenance {
gap: 4px;
}
.c-button._shop-maintenance:before {
content: "";
display: block;
flex-shrink: 0;
width: 26px;
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-reservation) 50% 50%/contain no-repeat;
}
.c-button._shop-calendar {
gap: 4px;
}
.c-button._shop-calendar:before {
content: "";
display: block;
flex-shrink: 0;
width: 26px;
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-calendar) 50% 50%/contain no-repeat;
}
.c-button:after {
content: "";
position: absolute;
top: 0;
right: var(--arrow-pos);
bottom: 0;
display: block;
width: calc(22px + var(--slope-1px) * 2);
aspect-ratio: 1/1;
margin-block: auto;
background: currentColor;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
transition: all .2s ease-out;
--arrow-pos: calc(10px + var(--slope-1px) * 5);
}
.c-button.js-scroll:after {
rotate: 90deg;
}
.c-button._close:after {
width: 14px;
mask-image: var(--icon-close);
--arrow-pos: calc(15px + var(--slope-1px) * 6);
}
.c-button._no-arrow:after {
content: none;
}
.c-button._prev-arrow:after {
right: auto;
left: var(--arrow-pos);
transform: rotate(180deg);
}
.c-button ._text-show {
display: none;
}
.c-button.is-show ._text-hide {
display: none;
}
.c-button.is-show ._text-show {
display: block;
}
.c-button.is-show:after {
transform: rotate(-45deg);
}
:is(a.c-button:hover, button.c-button:hover, a:hover .c-button) {
opacity: .7;
}
:is(a.c-button._primary:hover, button.c-button._primary:hover, a:hover .c-button._primary) {
opacity: 1;
filter: brightness(1.2);
}
/* c-contact-button
============================== */
.c-contact-button {
position: relative;
display: block;
text-decoration: none;
}
.c-contact-button__sub {
position: relative;
z-index: 1;
display: block;
width: fit-content;
max-width: calc(100% - 24px);
margin-inline: auto;
margin-bottom: -3px;
padding: 10px 15px;
border-radius: 5px;
background: #fff;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .25);
color: var(--base-color);
letter-spacing: 0;
font-weight: 700;
font-size: calc(13px + var(--slope-1px) * 1);
line-height: 1;
}
.c-contact-button__sub:after {
content: "";
position: absolute;
right: 0;
bottom: -8px;
left: 0;
display: block;
width: 14px;
height: 8px;
margin-inline: auto;
background: #fff;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* =============================================================
Campaign
* ============================================================= */
/* c-campaign-leaflet
============================== */
.c-campaign-leaflet__text {
margin-block: var(--leading-trim);
margin-top: 1em;
text-align: center;
}
/* ============================================================= *
Card
* ============================================================= */
.c-card {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
height: 100%;
border-radius: 10px;
color: #fff;
text-decoration: none;
}
.c-card__image {
position: relative;
}
@media screen and (max-width: 767px) {
.c-card__image {
width: 100%;
height: 100%;
}
}
.c-card__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform .4s;
}
.c-card__image img[src*=insurance] {
-o-object-position: 80% 50%;
object-position: 80% 50%;
}
.c-card__image:after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: #333;
opacity: .5;
transition: background .4s;
}
.c-card._default .c-card__image {
aspect-ratio: 290 / 240;
}
@media screen and (max-width: 560px) {
.c-card._default .c-card__image {
aspect-ratio: 345 / 200;
}
}
.c-card:hover .c-card__image img {
transform: scale(1.03);
}
.c-card:hover .c-card__image:after {
background: #000;
}
.c-card__text {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
font-weight: 600;
font-size: calc(23px + var(--slope-1px) * 4);
line-height: 1.2;
}
.c-card__text small {
display: block;
margin-top: 1em;
font-weight: normal;
font-size: calc(15px + var(--slope-1px) * 2);
}
/* c-square-card
=============================== */
.c-square-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
aspect-ratio: 260 / 254;
border-radius: 4px;
background-color: #000;
color: #fff;
text-decoration: none;
}
.c-square-card._large {
aspect-ratio: 540 / 528;
}
@media screen and (max-width: 767px) {
.c-square-card._large {
aspect-ratio: 335 / 232;
}
}
.c-square-card__title {
z-index: 1;
font-size: calc(19px + var(--slope-1px) * 7);
line-height: 1;
}
.c-square-card__text {
z-index: 1;
margin-top: 1.5em;
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 2;
}
.c-square-card__image {
position: absolute;
width: 100%;
height: 100%;
}
.c-square-card__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
opacity: .69;
transition: all .3s ease-out;
}
.c-square-card:hover .c-square-card__image img {
transform: scale(1.05);
}
/* ============================================================= *
Grid
* ============================================================= */
/* grid
=============================== */
.c-grid {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
width: 100%;
--gap: 20px;
}
.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: 767px) {
.c-grid__item._x3\:tablet {
--grid-column: 3;
}
}
.c-grid__item._x2 {
--grid-column: 2;
}
@media screen and (max-width: 767px) {
.c-grid__item._x2\:tablet {
--grid-column: 2;
}
}
.c-grid__item._x1 {
width: 100%;
}
@media screen and (max-width: 767px) {
.c-grid__item._x1\:tablet {
width: 100%;
}
}
@media screen and (max-width: 560px) {
.c-grid__item._x1\:mobile {
width: 100%;
}
}
/* c-anchor-grid
============================== */
.c-anchor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
gap: 10px;
max-width: 100%;
margin: 0 auto calc(61px + var(--slope-1px) * 50);
}
.c-anchor-grid._item4 {
width: 958px;
}
.c-anchor-grid .c-anchor-button {
width: 100%;
}
@media screen and (max-width: 767px) {
.c-anchor-grid {
grid-template-columns: repeat(2, 1fr);
gap: calc(7px + var(--slope-1px) * 5);
}
}
/* ============================================================= *
image navigation
* ============================================================= */
/* c-image-nav
============================== */
.c-image-nav {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
aspect-ratio: 692 / 400;
padding: 4%;
border-radius: 10px;
color: #fff;
text-align: center;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.c-image-nav {
aspect-ratio: 622 / 250;
}
}
.c-image-nav__contents {
z-index: 1;
font-size: calc(13px + var(--slope-1px) * 8);
}
.c-image-nav__head {
position: relative;
}
.c-image-nav__head > ._ja {
font-weight: bold;
font-size: calc(19px + var(--slope-1px) * 18);
}
.c-image-nav__head > ._en {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
font-weight: 700;
font-size: calc(61px + var(--slope-1px) * 20);
opacity: .25;
transform: translate3d(-50%, -50%, 0px);
}
@media screen and (max-width: 767px) {
.c-image-nav__head > ._en {
font-size: calc(41px + var(--slope-1px) * 40);
}
}
.c-image-nav__body {
margin-top: calc(-1em * var(--line-space) + 2em);
margin-bottom: calc(-1em * var(--line-space));
line-height: var(--line-height);
--line-height: 1.5;
--line-space: (var(--line-height) - 1)/2;
}
.c-image-nav__body span {
display: inline-block;
}
.c-image-nav__bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.c-image-nav__bg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
transition: transform .3s ease-out;
}
.c-image-nav:hover .c-image-nav__bg img {
transform: scale(1.03);
}
/* c-image-banner
=============================== */
.c-image-banner {
position: relative;
display: flex;
width: calc(100% - var(--transform));
margin-top: var(--transform);
margin-left: var(--transform);
border-radius: 10px;
background: #fff;
text-decoration: none;
}
@media screen and (max-width: 560px) {
.c-image-banner {
width: calc(100% - var(--transform) * 2);
margin-right: var(--transform);
}
}
.c-image-banner._reverse {
flex-direction: row-reverse;
margin-right: var(--transform);
margin-bottom: var(--transform);
margin-left: 0;
}
@media screen and (max-width: 560px) {
.c-image-banner._reverse {
margin-left: var(--transform);
}
}
.c-image-banner:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 10px;
}
.c-image-banner__image {
position: relative;
position: relative;
top: calc(var(--transform) * -1);
left: calc(var(--transform) * -1);
z-index: 0;
flex-shrink: 0;
overflow: hidden;
width: calc(126px + var(--slope-1px) * 75);
aspect-ratio: 1 / 1;
margin-right: calc(var(--transform) * -1);
border-radius: 10px;
background: #000;
}
.c-image-banner._reverse .c-image-banner__image {
top: var(--transform);
left: var(--transform);
margin-right: 0;
}
.c-image-banner__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all .4s ease-out;
}
.c-image-banner:hover .c-image-banner__image img {
opacity: .85;
transform: scale(1.05);
}
.c-image-banner__text {
position: relative;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 0 3% 0 0;
text-align: center;
font-size: calc(19px + var(--slope-1px) * 6);
line-height: 1.41667;
}
.c-image-banner__text > p {
z-index: 1;
}
@media screen and (max-width: 767px) {
.c-image-banner__text {
font-size: calc(17px + var(--slope-1px) * 5);
}
}
.c-image-banner._reverse .c-image-banner__text {
padding: 0 0 0 3%;
}
.c-image-banner__bg {
position: absolute;
right: -5%;
bottom: -5%;
width: 67.61905%;
color: #f9f9f9;
}
.c-image-banner._reverse .c-image-banner__bg {
top: -5%;
right: auto;
bottom: auto;
left: -5%;
}
/* c-section-banner
=============================== */
.c-section-banner {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
height: 300px;
max-width: 800px;
margin: 0 auto;
border-radius: 14px;
background: #333;
color: #fff;
text-align: center;
text-decoration: none;
}
.c-section-banner:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
background: 50% 50% / cover no-repeat;
opacity: .5;
transition: all .3s ease-out;
}
.c-section-banner:hover:before {
opacity: .3;
transform: scale(1.05);
}
.c-section-banner._reservation:before {
background-image: url(../img/bg-bnr-reservation.jpg);
}
@media screen and (max-width: 767px) {
.c-section-banner._reservation:before {
background-image: url(../img/bg-bnr-reservation-sp.jpg);
}
}
.c-section-banner._usedcar:before {
background-image: url(../img/bg-bnr-usedcar.jpg);
}
@media screen and (max-width: 767px) {
.c-section-banner._usedcar:before {
background-image: url(../img/bg-bnr-usedcar-sp.jpg);
}
}
.c-section-banner > * {
z-index: 1;
}
.c-section-banner__head {
font-weight: bold;
font-size: calc(23px + var(--slope-1px) * 2);
line-height: 1;
}
.c-section-banner__body {
margin-top: calc(-1em * var(--line-space) + 1.4375em);
margin-bottom: calc(-1em * var(--line-space) + 1.5625em);
font-size: calc(15px + var(--slope-1px) * 2);
line-height: var(--line-height);
--line-height: 2;
--line-space: (var(--line-height) - 1)/2;
}
.c-section-banner__foot {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 3.33333em;
max-width: 21.6em;
outline: none;
border: 2px solid #fff;
border-radius: 1.66667em;
background: transparent;
color: var(--color);
text-decoration: none;
letter-spacing: 0;
font-size: calc(15px + var(--slope-1px) * 1);
cursor: pointer;
transition: all .2s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
--color: #fff;
--hover-color: #000;
--hover-bg-color: #fff;
}
.c-section-banner__foot:before, .c-section-banner__foot:after {
content: "";
position: absolute;
top: 0;
right: 1.33333em;
bottom: 0;
display: block;
width: 12px;
height: 9px;
margin: auto 0;
background: 50% 50% / contain no-repeat;
transition: all .2s ease-out;
}
.c-section-banner__foot:before {
background-image: url(../img/icon/arrow-white.svg);
}
.c-section-banner__foot:after {
background-image: url(../img/icon/arrow.svg);
opacity: 0;
}
.c-section-banner:hover .c-section-banner__foot {
border-color: var(--hover-bg-color);
background: var(--hover-bg-color);
color: var(--hover-color);
}
.c-section-banner:hover .c-section-banner__foot:before {
opacity: 0;
}
.c-section-banner:hover .c-section-banner__foot:after {
opacity: 1;
}
/* ============================================================= *
Index
* ============================================================= */
/* c-category-block
=============================== */
.c-category-block {
display: flex;
flex-direction: column;
gap: var(--category-gap);
padding: calc(32px + var(--slope-1px) * 18) calc(15px + var(--slope-1px) * 39);
border: 1px solid currentColor;
border-radius: 20px;
background: transparent;
--category-gap: calc(30px + var(--slope-1px) * 10);
}
.c-category-block__item {
display: flex;
flex-direction: column;
}
.c-category-block__item:not(:last-child) {
padding-bottom: var(--category-gap);
border-bottom: 1px solid var(--border-color);
}
.c-category-block__item > a {
text-decoration: none;
}
.c-category-block__item._gps {
display: none;
}
@media screen and (max-width: 767px) {
.c-category-block__item._gps {
display: flex;
}
}
/* c-category-nav
============================== */
.c-category-nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.333em;
outline: none;
border: 0;
border-radius: 0;
background: transparent;
color: currentColor;
text-align: left;
opacity: 1;
transition: all .3s;
appearance: none;
--arrow-width: calc(40px + var(--slope-1px) * 8);
}
.c-category-nav__head {
display: flex;
justify-content: flex-start;
align-items: center;
gap: .375em;
margin-block: var(--leading-trim);
font-size: calc(22px + var(--slope-1px) * 10);
}
.c-category-nav__icon {
flex-shrink: 0;
width: calc(32px + var(--slope-1px) * 8);
aspect-ratio: 1/1;
}
.c-category-nav__icon :is(img, svg) {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-category-nav__body {
letter-spacing: 0;
font-size: calc(15px + var(--slope-1px) * 3);
line-height: 1.65;
}
a.c-category-nav,
button.c-category-nav {
padding-right: var(--arrow-width);
cursor: pointer;
}
a.c-category-nav:after,
button.c-category-nav:after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: var(--arrow-width);
aspect-ratio: 1/1;
border-radius: var(--ovall-radius);
background: var(--icon-arrow) calc(50% + 1px) 50%/28px no-repeat var(--key-color);
transform: translateY(-50%);
}
a.c-category-nav:hover, a.c-category-nav:focus-visible,
button.c-category-nav:hover,
button.c-category-nav:focus-visible {
opacity: .6;
}
button.c-category-nav::after {
background-image: url("../img/icon/plus.svg");
background-position: 50% 50%;
background-size: 1em;
}
/* ============================================================= *
maintenance
* ============================================================= */
/* c-maintenance-reservation
============================== */
.c-maintenance-reservation {
display: grid;
grid-template-columns: 100%;
gap: calc(30px + var(--slope-1px) * 20);
padding: 50px 21px;
border-radius: var(--base-border-radius);
background: url(../img/bg-maintenance-reservation.jpg) 50% 50%/cover no-repeat;
color: #fff;
text-align: center;
}
.c-maintenance-reservation__head {
margin-block: var(--leading-trim);
letter-spacing: 0;
font-weight: bold;
font-size: calc(24px + var(--slope-1px) * 8);
}
.c-maintenance-reservation__body {
margin-block: var(--leading-trim);
letter-spacing: 0;
font-weight: 500;
font-size: calc(14px + var(--slope-1px) * 6);
line-height: 1.75;
}
.c-maintenance-reservation__foot {
display: grid;
grid-template-columns: 100%;
gap: 15px;
width: 540px;
max-width: 100%;
margin-inline: auto;
}
.c-maintenance-reservation__merit {
margin-block: var(--leading-trim);
}
body[data-id=maintenance] .c-maintenance-reservation__merit {
display: none;
}
/* c-maintenance-service
============================== */
.c-maintenance-service {
margin-top: 30px;
padding-top: 30px;
border-top: 2px dashed var(--border-color);
}
.c-maintenance-service._mamoru-hide [data-nav=mamoru] {
display: none;
}
/* c-maintenance-service-grid */
.c-maintenance-service-grid {
display: grid;
align-items: flex-start;
grid-template-columns: repeat(2, 1fr);
gap: calc(30px + var(--slope-1px) * 10);
}
.c-maintenance-service._mamoru-hide .c-maintenance-service-grid {
grid-template-columns: 100%;
max-width: 530px;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.c-maintenance-service-grid {
grid-template-columns: 100%;
max-width: 530px;
margin-inline: auto;
}
}
.c-maintenance-service-grid__item {
display: grid;
grid-template-columns: 100%;
gap: 15px;
}
/* c-maintenance-service-nav */
.c-maintenance-service-nav {
display: grid;
grid-auto-columns: 100%;
gap: 15px;
text-decoration: none;
transition: opacity .2s;
pointer-events: none;
container-type: inline-size;
}
.c-maintenance-service-nav:hover {
opacity: .7;
}
.c-maintenance-service-nav > * {
pointer-events: auto;
}
.c-maintenance-service-nav__head {
position: relative;
width: fit-content;
max-width: 100%;
margin-inline: auto;
padding: 10px 15px;
border-radius: 5px;
background: var(--dark-base-color);
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .25);
color: #fff;
letter-spacing: 0;
font-size: min(14px, 3.5cqi);
line-height: 1;
}
@media screen and (max-width: 767px) {
.c-maintenance-service-nav__head {
font-size: 13px;
}
}
.c-maintenance-service-nav__head:after {
content: "";
position: absolute;
top: 100%;
right: 0;
left: 0;
display: block;
width: 14px;
height: 8px;
margin-inline: auto;
background: inherit;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .25);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.c-maintenance-service-nav__body {
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
width: 100%;
padding-inline: calc(26px + var(--slope-1px) * 24) calc(47px + var(--slope-1px) * 3);
border: 1px solid var(--border-color);
border-radius: var(--base-border-radius);
background: #fff;
}
.c-maintenance-service-nav__body:after {
content: "";
position: absolute;
top: 0;
right: 15px;
bottom: 0;
display: block;
width: 20px;
height: 20px;
margin-block: auto;
background: currentColor;
mask: var(--icon-angle) 50% 50%/contain no-repeat;
}
.c-maintenance-service-nav__mamoru {
display: grid;
align-items: center;
grid-template-columns: 57.45257% 30.3523%;
gap: 12.19512%;
width: 100%;
max-width: 369px;
}
.c-maintenance-service-nav__mamoru ._logo {
padding-block: calc(18px + var(--slope-1px) * 2);
}
.c-maintenance-service-nav__mamoru ._chara {
align-self: flex-end;
overflow: hidden;
aspect-ratio: 112/141;
}
.c-maintenance-service-nav__mamoru ._chara img {
object-fit: contain;
object-position: top center;
}
.c-maintenance-service-nav__ciao {
display: grid;
align-items: center;
grid-template-columns: 56.23342% 31.83024%;
gap: 11.93634%;
width: 100%;
max-width: 377px;
}
.c-maintenance-service-nav__ciao ._logo {
display: grid;
grid-template-columns: 100%;
gap: 7px;
padding-block: calc(10px + var(--slope-1px) * 2) calc(10px + var(--slope-1px) * 4);
}
.c-maintenance-service-nav__ciao ._chara {
align-self: flex-end;
overflow: hidden;
aspect-ratio: 120/141;
}
.c-maintenance-service-nav__ciao ._chara img {
object-fit: contain;
object-position: top center;
}
/* c-maintenance-service-caption */
.c-maintenance-service-caption {
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1.5;
}
/* c-inspection-details
============================== */
.c-inspection-details {
padding: 20px calc(15px + var(--slope-1px) * 15);
border-radius: var(--base-border-radius);
background: var(--bg-color);
line-height: 1.5;
}
.c-inspection-details__list {
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
gap: 20px 30px;
}
@media screen and (max-width: 767px) {
.c-inspection-details__list {
grid-template-columns: 100%;
}
}
.c-inspection-details__item {
display: contents;
}
@media screen and (max-width: 767px) {
.c-inspection-details__item {
display: block;
}
}
.c-inspection-details__head {
font-weight: 700;
font-size: calc(15px + var(--slope-1px) * 1);
}
.c-inspection-details__body {
padding-block: 10px;
padding-left: 30px;
border-left: 1px solid var(--border-color);
}
@media screen and (max-width: 767px) {
.c-inspection-details__body {
padding-block: 15px 20px;
padding-left: 0;
border-bottom: 1px solid var(--border-color);
border-left: 0;
}
}
.c-inspection-details__body > ul {
margin-block: var(--leading-trim);
}
.c-inspection-details__body > ul > li:before {
content: "\30fb";
}
.c-inspection-details__body > p {
margin-block: var(--leading-trim);
}
.c-inspection-details__body > p small {
font-size: calc(13px + var(--slope-1px) * 1);
}
.c-inspection-details-checklist {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(10px + var(--slope-1px) * 2) 30px;
}
@media screen and (max-width: 560px) {
.c-inspection-details-checklist {
flex-direction: column;
align-items: flex-start;
}
}
.c-inspection-details-checklist > li {
display: flex;
align-items: baseline;
gap: 5px;
margin-block: var(--leading-trim);
}
.c-inspection-details-checklist > li:before {
content: "";
position: relative;
top: 2px;
display: block;
flex-shrink: 0;
width: 16px;
aspect-ratio: 1/1;
background: var(--point-color);
mask: url(../img/icon/checklist.svg) 50% 50%/contain no-repeat;
}
/* c-inspection-checkpoints
============================== */
.c-inspection-checkpoints {
display: grid;
align-items: center;
grid-template-columns: 41.81818% 1fr;
gap: calc(10px + var(--slope-1px) * 5) 2.72727%;
container-type: inline-size;
--base-cqi: calc(100cqi / 1100);
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoints {
grid-template-columns: 100%;
--base-cqi: min(calc(100cqi / 375), 1px);
}
}
.c-inspection-checkpoints__figure {
position: relative;
}
.c-inspection-checkpoints__image {
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 93.47826%;
transform: translate3d(-50%, -50%, 0px);
}
.c-inspection-checkpoints__pointer {
position: relative;
z-index: 1;
}
.c-inspection-checkpoints__pointer img {
width: 100%;
}
.c-inspection-checkpoints__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(var(--base-cqi) * 10);
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoints__list {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
padding-inline: calc(var(--base-cqi) * 21);
}
}
@media screen and (max-width: 560px) {
.c-inspection-checkpoints__list {
grid-template-columns: 100%;
}
}
.c-inspection-checkpoints__item {
display: contents;
}
.c-inspection-checkpoints__button {
display: grid;
align-items: center;
grid-template-columns: auto 1fr auto;
gap: calc(var(--base-cqi) * 10);
height: calc(var(--base-cqi) * 73);
padding-inline: calc(var(--base-cqi) * 10) calc(var(--base-cqi) * 23);
border-radius: var(--ovall-radius);
background: var(--dark-base-color);
color: #fff;
text-decoration: none;
letter-spacing: 0;
font-weight: 500;
font-size: calc(var(--base-cqi) * 20);
line-height: 1.2;
transition: opacity .2s;
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoints__button {
height: calc(var(--base-cqi) * 53);
padding-inline: calc(var(--base-cqi) * 5) calc(var(--base-cqi) * 16);
font-size: calc(var(--base-cqi) * 18);
}
}
.c-inspection-checkpoints__button:hover {
opacity: .8;
}
.c-inspection-checkpoints__button > i {
display: flex;
justify-content: center;
align-items: center;
width: calc(var(--base-cqi) * 53);
aspect-ratio: 1/1;
border-radius: var(--ovall-radius);
background: var(--point-color);
color: #fff;
font-weight: 600;
font-style: normal;
font-size: calc(var(--base-cqi) * 24);
font-family: var(--en-font-family);
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoints__button > i {
width: calc(var(--base-cqi) * 43);
font-size: calc(var(--base-cqi) * 20);
}
}
.c-inspection-checkpoints__button:after {
content: "";
display: block;
width: calc(var(--base-cqi) * 14);
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-plus) 50% 50%/contain no-repeat;
}
/* c-inspection-modal
============================== */
.c-inspection-modal {
display: grid;
grid-template-columns: 100%;
gap: calc(15px + var(--slope-1px) * 25);
padding-block: calc(15px + var(--slope-1px) * 25);
border-radius: 10px;
background: #fff;
}
.c-inspection-modal__head {
display: flex;
align-items: center;
gap: 9px;
padding-inline: calc(15px + var(--slope-1px) * 25);
padding-bottom: calc(15px + var(--slope-1px) * 5);
border-bottom: 1px solid var(--border-color);
font-weight: 700;
font-size: calc(24px + var(--slope-1px) * 4);
}
.c-inspection-modal__head > i {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: calc(42px + var(--slope-1px) * 4);
aspect-ratio: 1/1;
border-radius: var(--ovall-radius);
background: #8c8c8c;
color: #fff;
font-size: calc(20px + var(--slope-1px) * 4);
font-family: var(--en-font-family);
line-height: .7;
}
.c-inspection-modal__body {
padding-inline: calc(15px + var(--slope-1px) * 25);
}
.c-inspection-modal__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(clamp(var(--min-col-width), var(--ideal-col-width), var(--max-col-width)), 1fr));
gap: 0 1em;
--min-col-width: calc((100% - 2em) / 3);
--ideal-col-width: calc((var(--max-str-len) + 2) * 1em);
--max-col-width: 100%;
}
@media screen and (max-width: 767px) {
.c-inspection-modal__list {
grid-template-columns: 100%;
}
}
.c-inspection-modal__list > li {
padding-left: 1em;
text-indent: -1em;
}
.c-inspection-modal__list > li:before {
content: "\25cf";
}
.c-inspection-modal__notes {
margin-top: calc(25px + var(--slope-1px) * 5);
padding: 1.5em;
border-radius: 5px;
background: var(--bg-color);
font-size: calc(13px + var(--slope-1px) * 1);
}
/* ============================================================= *
Navigation
* ============================================================= */
/* c-pref-nav-grid
============================== */
.c-pref-nav-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
width: 100%;
}
@media screen and (max-width: 767px) {
.c-pref-nav-grid {
grid-template-columns: 100%;
}
}
/* c-pref-nav
============================== */
.c-pref-nav {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 1/1;
padding: var(--padding);
border-radius: var(--base-border-radius);
background: var(--color);
color: #fff;
text-decoration: none;
--color: var(--key-color);
--padding: 20px;
container-type: inline-size;
}
@media screen and (max-width: 767px) {
.c-pref-nav {
aspect-ratio: 325 / 260;
--padding: 10px;
}
}
.c-pref-nav:before {
content: "";
position: absolute;
inset: 0;
display: block;
width: calc(100% - var(--padding) * 2);
height: calc(100% - var(--padding) * 2);
margin: auto;
border: 1px solid currentColor;
border-radius: calc(var(--base-border-radius) * .5);
background: url(../img/bg-yamanashi.svg) 50% 50%/calc(100% / 500 * 391) no-repeat;
pointer-events: none;
}
.c-pref-nav._nagano {
--color: #2358c9;
}
.c-pref-nav._nagano:before {
background: url(../img/bg-nagano.svg) 50% 50%/auto calc(100% / 500 * 478) no-repeat;
}
.c-pref-nav__body {
margin-bottom: calc(100cqi / 540 * 50);
text-align: center;
font-weight: 500;
font-size: calc(100cqi / 540 * 36);
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.c-pref-nav__body {
margin-bottom: calc(100cqi / 325 * 15);
font-size: calc(100cqi / 325 * 27);
}
}
.c-pref-nav__body em {
font-weight: 700;
font-size: calc(100cqi / 540 * 54);
}
@media screen and (max-width: 767px) {
.c-pref-nav__body em {
font-size: calc(100cqi / 325 * 42);
}
}
.c-pref-nav__foot {
width: calc(100% - var(--padding) * 2);
max-width: calc(285px + var(--slope-1px) * 58);
margin-inline: auto;
}
/* c-breadcrumbs
============================== */
.c-breadcrumbs {
font-size: 12px;
}
.c-breadcrumbs > li {
display: inline;
}
.c-breadcrumbs > li:not(:last-child) {
padding-right: 5px;
}
.c-breadcrumbs > li:not(:first-child):before {
content: ">";
padding-right: 5px;
}
/* c-tab
=============================== */
.c-tab {
position: relative;
overflow: hidden;
margin-bottom: calc(30px + var(--slope-1px) * 20);
padding-inline: calc(14px + var(--slope-1px) * 15);
--tab-default-bg-color: var(--base-color);
--tab-current-bg-color: #fff;
--tab-current-text-color: var(--base-color);
--tab-border-color: var(--border-color);
}
.c-tab._company {
--tab-default-bg-color: var(--key-color);
--tab-current-bg-color: var(--base-color);
--tab-current-text-color: #fff;
--tab-border-color: #fff;
}
.c-tab:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 1px;
background: var(--tab-border-color);
}
.c-tab__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(6px + var(--slope-1px) * 4);
}
.c-tab__item {
display: contents;
}
.c-tab__button {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
overflow: visible;
padding-block: calc(20px + var(--slope-1px) * 10) calc(5px + var(--slope-1px) * 5);
outline: none;
border: 0;
border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
background: var(--tab-default-bg-color);
color: #fff;
text-align: center;
text-decoration: none;
font-weight: 500;
font-size: calc(18px + var(--slope-1px) * 6);
line-height: 1.2;
cursor: pointer;
transition: opacity .3s;
}
.c-tab__button:hover {
opacity: .7;
}
.c-tab__button > span {
display: block;
margin-block: var(--leading-trim);
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-tab__button > small {
display: block;
margin-block: var(--leading-trim);
font-size: calc(15px + var(--slope-1px) * 5);
}
.c-tab__button:after {
content: "";
display: block;
width: 20px;
aspect-ratio: 1/1;
background: #fff;
mask: var(--icon-down) 50% 50%/contain no-repeat;
}
.c-tab__button.is-current {
z-index: 2;
border: 1px solid var(--tab-border-color);
background: var(--tab-current-bg-color);
color: var(--tab-current-text-color);
pointer-events: none;
}
.c-tab__button.is-current:before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
display: block;
width: 100%;
height: 3px;
background: var(--tab-current-bg-color);
}
[data-tab-id]:not(.is-current) {
display: none;
}
/* c-nav-grid
============================== */
.c-nav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px 16px;
}
.c-nav-grid__item {
display: contents;
}
/* c-nav-block
============================== */
.c-nav-block {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 100%;
border: 1px solid var(--border-color);
border-radius: var(--base-border-radius);
background: #fff;
}
.c-nav-block__image {
overflow: hidden;
width: 100%;
aspect-ratio: 354/203;
border: 5px solid #fff;
border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
background: var(--bg-color);
}
.c-nav-block__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-nav-block__contents {
display: flex;
flex-direction: column;
gap: 25px;
padding: 10px calc(15px + var(--slope-1px) * 10) 25px;
}
.c-nav-block__head {
font-weight: 700;
font-size: calc(20px + var(--slope-1px) * 4);
line-height: 1.25;
}
.c-nav-block:not(:has(.c-nav-block__body)) .c-nav-block__head {
text-align: center;
}
.c-nav-block__body {
flex-grow: 1;
margin-block: var(--leading-trim);
}
.c-nav-block__nav {
display: grid;
grid-template-columns: 100%;
gap: 15px;
}
/* c-anchor-nav
============================== */
.c-anchor-nav-section {
margin-bottom: 30px;
}
.c-anchor-nav-list {
display: flex;
flex-wrap: wrap;
gap: calc(15px + var(--slope-1px) * 15);
}
.c-anchor-nav-list__item {
display: contents;
}
.c-anchor-nav {
display: flex;
align-items: center;
gap: calc(1px + var(--slope-1px) * 2);
text-decoration: underline;
font-size: calc(13px + var(--slope-1px) * 1);
line-height: 1;
}
.c-anchor-nav:hover {
text-decoration: none;
}
.c-anchor-nav:after {
content: "";
display: block;
flex-shrink: 0;
width: calc(10px + var(--slope-1px) * 2);
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-angle) 50% 50%/contain no-repeat;
rotate: 90deg;
}
/* ============================================================= *
Section
* ============================================================= */
/* c-section
=============================== */
.c-section:not(:first-child) {
margin-top: calc(75px + var(--slope-1px) * 25);
}
.c-section._inner:not(:first-child) {
margin-top: calc(30px + var(--slope-1px) * 20);
}
.c-section__head {
display: grid;
grid-template-columns: 100%;
gap: 30px;
margin-bottom: calc(30px + var(--slope-1px) * 20);
}
.c-section__head:has(.c-text) {
margin-bottom: 30px;
}
/*
============================== */
.c-tpl-nearby-form {
display: grid;
grid-template-columns: 1fr calc(90px + var(--slope-1px) * 35);
overflow: hidden;
border-radius: var(--ovall-radius);
}
.c-tpl-nearby-form__input {
min-width: 0;
padding: 20px calc(10px + var(--slope-1px) * 10) 20px 20px;
outline: none;
border: 0;
border-radius: 0;
background: #fff;
appearance: none;
}
.c-tpl-nearby-form__input:focus-visible {
outline: 2px var(--key-color);
}
.c-tpl-nearby-form__input::placeholder {
font-size: 92%;
}
.c-tpl-nearby-form__submit {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
padding-right: 14px;
padding-bottom: 2px;
outline: none;
border: 0;
border-radius: 0;
background: var(--key-color);
color: #fff;
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 1);
transition: filter .2s;
appearance: none;
}
.c-tpl-nearby-form__submit:hover, .c-tpl-nearby-form__submit:focus-visible {
filter: brightness(1.1);
}
.c-tpl-nearby-form__submit:before {
content: "";
position: relative;
top: 1px;
display: block;
flex-shrink: 0;
width: 20px;
height: 20px;
background: currentColor;
mask: var(--icon-search) 50% 50%/contain no-repeat;
}
/* c-tpl-nearby-gps
============================== */
.c-tpl-nearby-gps {
margin-top: calc(var(--slope-1px) * -10);
}
@media screen and (min-width: 768px) {
.c-tpl-nearby-gps {
display: none !important;
}
}
/* c-tpl-nearby-result
============================== */
.c-tpl-nearby-result__foot {
width: calc(303px + var(--slope-1px) * 40);
max-width: 100%;
margin-inline: auto;
margin-top: calc(20px + var(--slope-1px) * 10);
}
/* c-tpl-nearby-block
============================== */
.c-tpl-nearby-block {
display: grid;
grid-template-columns: 100%;
gap: 15px;
padding: calc(15px + var(--slope-1px) * 5);
border-radius: var(--base-border-radius);
background: #fff;
color: var(--base-color);
container-type: inline-size;
}
.c-tpl-nearby-block:not(:first-child) {
margin-top: 15px;
}
.c-tpl-nearby-block__head {
display: grid;
align-items: baseline;
grid-template-columns: auto 1fr auto;
gap: 15px 10px;
padding: calc(15px + var(--slope-1px) * 5) calc(15px + var(--slope-1px) * 15);
border-radius: 10px;
background: #f2f2f2;
}
@media screen and (max-width: 767px) {
.c-tpl-nearby-block__head {
grid-template-columns: auto 1fr;
border-radius: 12px;
}
}
.c-tpl-nearby-block__rank {
margin-block: var(--leading-trim);
font-weight: 600;
font-size: calc(24px + var(--slope-1px) * 4);
font-family: var(--en-font-family);
}
.c-tpl-nearby-block__link {
margin-block: var(--leading-trim);
color: var(--key-color);
text-decoration: underline;
font-weight: 500;
font-size: calc(24px + var(--slope-1px) * 4);
}
.c-tpl-nearby-block__link:hover {
text-decoration: none;
}
.c-tpl-nearby-block__distance {
margin-block: var(--leading-trim);
font-weight: 600;
font-size: calc(15px + var(--slope-1px) * 1);
font-family: var(--en-font-family);
}
@media screen and (max-width: 767px) {
.c-tpl-nearby-block__distance {
grid-column: span 2;
}
}
.c-tpl-nearby-block__body-inner {
display: grid;
justify-content: space-between;
align-items: center;
grid-template-columns: 230px 1fr 300px;
gap: 20px;
}
@media screen and (min-width: 1181px) {
.c-tpl-nearby-block__body-inner:not(:has(.c-tpl-nearby-block__nav[data-button-count="1"])) {
grid-template-columns: 1fr auto;
}
}
@media screen and (max-width: 1180px) {
.c-tpl-nearby-block__body-inner {
display: grid;
grid-template-columns: 1fr 300px;
}
}
@media screen and (max-width: 767px) {
.c-tpl-nearby-block__body-inner {
grid-template-columns: 100%;
}
}
.c-tpl-nearby-block__profile {
display: grid;
align-items: baseline;
grid-template-columns: auto 1fr;
gap: 15px 5px;
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1.25;
}
@media screen and (max-width: 1180px) {
.c-tpl-nearby-block__profile {
grid-column: span 2;
}
}
@media screen and (max-width: 767px) {
.c-tpl-nearby-block__profile {
grid-column: span 1;
}
}
.c-tpl-nearby-block__profile-item {
display: contents;
}
.c-tpl-nearby-block__profile-item > dt {
display: flex;
justify-content: center;
align-items: center;
padding: 8px;
border-radius: 3px;
background: #f2f2f2;
line-height: 1;
}
.c-tpl-nearby-block__profile-item > dd {
margin-block: var(--leading-trim);
}
.c-tpl-nearby-block__tel {
display: flex;
align-items: center;
margin-block: var(--leading-trim);
color: var(--key-color);
text-decoration: none;
font-weight: 600;
font-size: min(44px, 4.4cqi);
font-family: var(--en-font-family);
line-height: 1.1;
pointer-events: none;
}
@media screen and (max-width: 767px) {
.c-tpl-nearby-block__tel {
justify-content: center;
grid-column: span 1;
width: 300px;
height: calc(52px + var(--slope-1px) * 21);
max-width: 100%;
margin-inline: auto;
border-radius: var(--ovall-radius);
background: var(--key-color);
color: #fff;
font-size: 20px;
pointer-events: auto;
}
}
.c-tpl-nearby-block__tel:before {
content: "";
display: block;
flex-shrink: 0;
width: .90909em;
aspect-ratio: 1/1;
background: currentColor;
mask: url(../img/icon/tel.png) 50% 50%/contain no-repeat;
}
@media screen and (max-width: 767px) {
.c-tpl-nearby-block__tel:before {
width: 26px;
}
}
.c-tpl-nearby-block__nav:not([data-button-count="1"]) {
display: grid;
grid-template-columns: repeat(var(--count), 1fr);
grid-column: span 2;
gap: 8px;
width: 100%;
}
@media screen and (max-width: 1180px) {
.c-tpl-nearby-block__nav:not([data-button-count="1"]) {
grid-template-columns: repeat(2, 1fr);
}
}
.c-tpl-nearby-block__nav[data-button-count="2"] {
--count: 2;
}
.c-tpl-nearby-block__nav[data-button-count="3"] {
--count: 3;
}
.c-tpl-nearby-block__nav[data-button-count="4"] {
--count: 4;
}
@media screen and (max-width: 767px) {
.c-tpl-nearby-block__nav {
grid-column: span 1 !important;
margin-inline: auto;
margin-top: -5px;
}
.c-tpl-nearby-block__nav[data-button-count="1"] {
width: 300px;
max-width: 100%;
margin-inline: auto;
}
}
/* c-showroom-search-block
============================== */
.c-showroom-search-block {
display: grid;
grid-template-columns: 100%;
gap: calc(20px + var(--slope-1px) * 10);
padding: calc(30px + var(--slope-1px) * 20) calc(15px + var(--slope-1px) * 35);
border-radius: var(--base-border-radius);
background: linear-gradient(90deg, #233db1 0%, #2677d3 100%);
color: #fff;
}
.c-showroom-search-block__head {
margin-block: var(--leading-trim);
text-align: center;
font-weight: 700;
font-size: calc(24px + var(--slope-1px) * 8);
}
/* c-showroom-search
============================== */
.c-showroom-search {
display: grid;
grid-template-columns: 100%;
gap: calc(15px + var(--slope-1px) * 15);
}
.c-showroom-search__nav {
display: flex;
gap: 10px 30px;
}
body[data-id="showroom"] .c-showroom-search__nav {
display: none;
}
/* c-showroom-search-nav
============================== */
.c-showroom-search-nav {
display: flex;
align-items: center;
gap: 5px;
text-decoration: underline;
font-size: calc(15px + var(--slope-1px) * 1);
}
.c-showroom-search-nav._showroom {
--icon: url('data:image/svg+xml;utf8,');
}
.c-showroom-search-nav._welcome {
--icon: url('data:image/svg+xml;utf8,');
}
body[data-id="welcome"] .c-showroom-search-nav._welcome {
display: none;
}
body[data-id="contact"] .c-section:not([data-anchor-id=move]) .c-showroom-search-nav._welcome {
display: none;
}
.c-showroom-search-nav:hover {
text-decoration: none;
}
.c-showroom-search-nav:before {
content: "";
display: block;
flex-shrink: 0;
width: 20px;
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon) 50% 50%/contain no-repeat;
}
/* c-sitemap
=============================== */
.c-sitemap__header-button {
display: none;
}
@media screen and (min-width: 768px) {
.c-sitemap__header-button {
grid-area: recruit;
}
}
@media screen and (max-width: 767px) {
.c-sitemap__header-button {
grid-row: 1/2;
padding-bottom: 28px;
}
}
.c-sitemap-box__toggle {
text-decoration: none;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap {
position: relative;
display: grid;
justify-content: space-between;
grid-template-columns: 100%;
gap: 0;
width: 100%;
border-bottom: 1px solid var(--light-base-color);
}
@media screen and (min-width: 768px) {
:is(.l-footer, .l-header-sp-nav) .c-sitemap {
grid-template-columns: repeat(4, auto);
grid-template-areas: "showroom newcar maintenance company" "showroom usedcar maintenance company" "showroom campaign carlife recruit";
gap: 40px var(--gap);
width: 100%;
max-width: calc(var(--inner-width-px) - var(--gap) * 2);
margin-inline: auto;
border-bottom: 0;
--gap: 50px;
}
}
@media screen and (min-width: 768px) {
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box[data-category="showroom"] {
grid-area: showroom;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box[data-category="newcar"] {
grid-area: newcar;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box[data-category="usedcar"] {
grid-area: usedcar;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box[data-category="campaign"] {
grid-area: campaign;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box[data-category="maintenance"] {
grid-area: maintenance;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box[data-category="carlife"] {
grid-area: carlife;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box[data-category="company"] {
grid-area: company;
}
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box__head {
color: var(--on-color);
font-weight: 500;
font-size: calc(12px + var(--slope-1px) * 6);
}
@media screen and (min-width: 768px) {
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box__head {
margin-block: var(--leading-trim) calc(20px + var(--leading-trim));
}
}
@media screen and (min-width: 768px) {
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box__body {
display: block !important;
}
}
@media screen and (max-width: 767px) {
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box__body {
display: none;
margin: 0;
padding: 10px 14px 24px;
}
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box__toggle {
padding: 0;
outline: none;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: currentColor;
text-align: left;
font-weight: bold;
pointer-events: none;
appearance: none;
}
@media screen and (max-width: 767px) {
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box__toggle {
display: grid;
justify-content: flex-start;
align-items: center;
grid-template-columns: 1fr 12px;
gap: 1em;
width: 100%;
padding-block: 20px;
font-weight: 500;
font-size: 15px;
pointer-events: auto;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box__toggle:after {
content: "";
display: block;
width: 12px;
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-plus) 50% 50%/contain no-repeat;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-box__toggle.is-open:after {
mask-image: var(--icon-minus);
}
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap__col {
display: contents;
}
@media screen and (max-width: 767px) {
:is(.l-footer, .l-header-sp-nav) .c-sitemap__col {
display: block;
border-top: 1px solid var(--light-base-color);
}
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-pages {
display: grid;
grid-template-columns: 100%;
gap: 1.5em;
font-size: 12px;
}
@media screen and (max-width: 767px) {
:is(.l-footer, .l-header-sp-nav) .c-sitemap-pages {
font-size: 14px;
}
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-pages > li {
margin-block: var(--leading-trim);
color: currentColor;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-pages a {
text-decoration: none;
transition: all .3s ease-out;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-pages a:hover {
opacity: .7;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-pages .c-sitemap-pages-sub {
display: none;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-showroom-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 30px;
margin-top: 20px;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-showroom {
display: grid;
align-content: flex-start;
grid-template-columns: 100%;
gap: 1.5em;
margin-top: .25em;
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-showroom__head {
display: flex;
align-items: center;
gap: .6em;
margin-block: var(--leading-trim);
color: #fff;
white-space: nowrap;
font-weight: 700;
font-size: 11px;
}
@media screen and (max-width: 767px) {
:is(.l-footer, .l-header-sp-nav) .c-sitemap-showroom__head {
font-size: 13px;
}
}
:is(.l-footer, .l-header-sp-nav) .c-sitemap-showroom__head:before {
content: "-";
}
.l-header-menu .c-sitemap-pages > li:has(a[href*="recruit"]) {
display: none;
}
/* c-sitemap-header-button
============================== */
.c-sitemap-header-button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
padding-inline: 20px;
border-radius: var(--ovall-radius);
background: var(--point-color);
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 14px;
line-height: 1;
transition: filter .2s ease-out;
}
.c-sitemap-header-button:hover {
filter: brightness(1.1);
}
@media screen and (max-width: 767px) {
.c-sitemap-header-button {
width: 100%;
height: 52px;
max-width: 303px;
margin-inline: auto;
font-size: 16px;
}
.c-sitemap-header-button:after {
content: "";
position: absolute;
top: 0;
right: 15px;
bottom: 0;
display: block;
width: 12px;
aspect-ratio: 1/1;
margin-block: auto;
background: currentColor;
mask: var(--icon-angle) 50% 50%/contain no-repeat;
}
}
/* ============================================================= *
Slider
* ============================================================= */
/* c-slider-arrows
=============================== */
.c-slider-arrows {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(8px + var(--slope-1px) * 4);
}
/* c-slider-progress
============================== */
.c-slider-progress {
position: relative;
overflow: hidden;
width: 100%;
height: 6px;
border-radius: var(--ovall-radius);
background: #d9d9d9;
pointer-events: none;
}
/* ============================================================= *
Table
* ============================================================= */
/* c-table-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 > * {
min-width: 55em;
}
/* c-data-table
=============================== */
.c-data-table {
width: 100%;
border-collapse: collapse;
border-bottom: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
}
.c-data-table._fixed {
table-layout: fixed;
}
@media screen and (min-width: 768px) {
.c-data-table._fixed\:desktop {
table-layout: fixed;
}
}
.c-data-table:not(:first-child) {
margin-top: 15px;
}
@media screen and (max-width: 767px) {
.c-data-table {
font-size: .83333em;
}
}
.c-data-table th,
.c-data-table td {
padding: 20px 15px;
border-top: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
vertical-align: middle;
text-align: center;
line-height: 1.5;
}
.c-data-table th {
font-weight: 600;
font-size: calc(15px + var(--slope-1px) * 1);
}
@media screen and (max-width: 767px) {
.c-data-table th {
font-size: inherit;
}
}
.c-data-table th._s {
font-size: calc(13px + var(--slope-1px) * 1);
}
.c-data-table small {
display: block;
font-size: calc(13px + var(--slope-1px) * 1);
}
.c-data-table thead th {
background: #666;
color: #fff;
}
.c-data-table tbody th {
background: var(--dark-base-color);
color: #fff;
}
.c-data-table tbody th[rowspan] {
background: #666;
}
.c-data-table tbody td {
text-align: right;
}
.c-data-table._ciao tbody td {
width: 17%;
}
/* ============================================================= *
Text
* ============================================================= */
/* c-lead
=============================== */
.c-lead {
margin-block: var(--leading-trim);
text-align: left;
white-space: normal;
letter-spacing: -.03em;
font-weight: 500;
font-size: calc(17px + var(--slope-1px) * 3);
}
.c-lead:not(:first-child) {
margin-top: calc(32px + var(--slope-1px) * 8 + var(--leading-trim));
}
.c-lead:not(:last-child) {
margin-bottom: calc(32px + var(--slope-1px) * 8 + var(--leading-trim));
}
/* c-text
=============================== */
.c-text {
line-height: 1.5;
}
.c-section__body .c-text:not(:last-child) {
margin-bottom: calc(20px + var(--slope-1px) * 10);
}
.c-text em {
font-weight: bold;
}
/* c-notes
=============================== */
.c-notes {
display: grid;
grid-template-columns: 100%;
gap: .65em;
font-size: calc(13px + var(--slope-1px) * 1);
line-height: 1.5;
}
.c-notes:not(:first-child) {
margin-top: 20px;
}
.c-notes > li {
margin-block: var(--leading-trim);
padding-left: 1em;
text-indent: -1em;
}
.c-notes > li:before {
content: "\203b";
}
/* ============================================================= *
Title
* ============================================================= */
/* c-page-title
============================== */
.c-page-title {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
height: 115px;
margin-inline: auto;
padding-inline: var(--inner-padding);
padding-top: 10px;
font-weight: 700;
font-size: calc(28px + var(--slope-1px) * 8);
}
@media screen and (max-width: 767px) {
.c-page-title {
height: 110px;
}
}
.c-page-title:before {
content: attr(data-en);
position: absolute;
bottom: 0;
left: var(--inner-padding);
text-transform: capitalize;
white-space: nowrap;
font-weight: 600;
font-size: 150px;
font-family: var(--en-font-family);
line-height: .7;
opacity: .15;
pointer-events: none;
}
@media screen and (max-width: 767px) {
.c-page-title:before {
font-size: 90px;
}
}
.c-page-title > span {
display: flex;
align-items: baseline;
gap: 16px;
line-height: 1;
}
@media screen and (max-width: 767px) {
.c-page-title > span {
flex-direction: column;
}
}
.c-page-title small {
font-size: calc(18px + var(--slope-1px) * 2);
}
/* c-section-title
============================== */
.c-section-title {
display: flex;
align-items: center;
gap: 10px;
margin-block: var(--leading-trim);
font-weight: 700;
font-size: calc(24px + var(--slope-1px) * 8);
}
.c-section-title:before {
content: "";
display: block;
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: var(--ovall-radius);
background: currentColor;
}
/* c-en-title
============================== */
.c-en-title {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: calc(20px + var(--leading-trim));
margin-top: var(--leading-trim);
font-weight: 500;
font-size: calc(16px + var(--slope-1px) * 2);
}
.c-en-title:not(:last-child) {
margin-bottom: calc(1.33333em + var(--leading-trim));
}
.c-en-title[data-en]:after {
content: attr(data-en);
text-transform: uppercase;
font-weight: 600;
font-size: calc(42px + var(--slope-1px) * 8);
font-family: var(--en-font-family);
line-height: .8;
}
@media screen and (max-width: 560px) {
.c-en-title[data-en]:after {
letter-spacing: -.04em;
}
}
/* c-sub-title
============================== */
.c-sub-title {
margin-block: var(--leading-trim);
font-weight: 600;
font-size: calc(22px + var(--slope-1px) * 2);
}
/* ============================================================= *
Utility
* ============================================================= */
/* Media Query Setting
====================================== */
.u-tablet-block {
display: none !important;
}
@media screen and (max-width: 767px) {
.u-tablet-block {
display: block !important;
}
}
.u-tablet-inline-block {
display: none !important;
}
@media screen and (max-width: 767px) {
.u-tablet-inline-block {
display: inline-block !important;
}
}
.u-tablet-flex {
display: none !important;
}
@media screen and (max-width: 767px) {
.u-tablet-flex {
display: flex !important;
}
}
@media screen and (max-width: 767px) {
.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;
}