/* =============================================================
Custom Properties
* ============================================================= */
:root {
/* ========================================
color
======================================== */
/* text color */
--base-color: #333;
/* border color */
--border-color:#BEBEBE;
/* bg color */
--bg-color:#F1F1F1;
/* primary */
--key-color: #FFE33F;
--point-color: #A0E9F4;
--light-color: #D2F7FD;
--dark-color: #00889D;
--yellow: #FFE33F;
--red: #F15E5E;
/* maintenance color */
--instagram: #F5418D;
--ciao-color:#0168B7;
--mamoru-color:#8EC220;
/* color */
--white:#fff;
--black: #000;
--gray:#706E6E;
/* ========================================
layouts
======================================== */
--header-height: 80px;
--sticky-height:54px;
--contents-width: 1080;
--contents-width-px: calc(var(--contents-width) * 1px);
--inner-width: 1200;
--inner-width-px: calc(var(--inner-width) * 1px);
--outer-frame-width:1366;
--outer-frame-width-px: calc(var(--outer-frame-width) * 1px);
--inner-padding: calc(16px + var(--slope-1px) * 44);
--outer-padding: clamp(16px, -69.79132px + 11.18531vw, 83px);
--inner-overflow: calc(var(--vw) * 50 - var(--inner-width-px) * .5);
--contents-padding-inline: calc(15px + var(--slope-1px) * 35);
/* utility */
--vw: 1vw;
--vh: 1vh;
--slope-1px: clamp(0px, -0.95663px + 0.2551vw, 1px);
--base-border-radius: calc(5px + var(--slope-1px) * 5);
--frame-border-radius: calc(10px + var(--slope-1px) * 10);
--border-Radius-background: calc(40px + var(--slope-1px) * 60);
--ovall-radius:calc(1px / 0);
--loading-time: .3s;
/* ========================================
font
======================================== */
/* size */
--line-height: 1.65;
--leading-trim: calc((1em - 1lh) / 2);
--is-support-lh: initial;
--is-support-not-lh: "";
/* z-index */
--header-z-index: 1000;
--navigation-z-index: 200;
--modal-z-index: 1001;
--local-z-index: 0;
/* family */
--base-font-family: "Noto Sans JP", sans-serif;
--en-font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
--number-font-family: "Roboto", "Noto Sans JP", sans-serif;
/* animation */
--animation:cubic-bezier(0.455, 0.03, 0.515, 0.955);
--t-duration: 300ms;
--easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
--transition: var(--t-duration) var(--easeOutQuart);
/* svg icon */
--icon-arrow: url('data:image/svg+xml;utf8,');
--icon-arrow-down: url('data:image/svg+xml;utf8,');
--icon-blank: url('data:image/svg+xml;utf8,');
--icon-search: url("data:image/svg+xml;utf8,");
--icon-home: url('data:image/svg+xml;utf8,');
--icon-exclamation: url('data:image/svg+xml;utf8,');
--icon-angle: url("data:image/svg+xml;utf8,");
--icon-angle-down: url("data:image/svg+xml;utf8,");
--icon-plus: url('data:image/svg+xml;utf8,');
--icon-minus: url("data:image/svg+xml;utf8,");
--icon-check: url("data:image/svg+xml;utf8,");
--icon-close: url("data:image/svg+xml;utf8,");
}
@media screen and (max-width: 767px) {
:root {
--header-height: 56px;
}
}
@media screen and (max-width: 767px) {
:root {
--inner-padding: 16px;
}
}
:where(:lang(en)) {
--leading-trim: 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;
}
}
*[data-intersection] {
opacity: 0;
transition: opacity 0.5s ease-out 0.4s;
}
*[data-intersection][data-intersecting=true] {
opacity: 1;
}
*[data-intersection] .js-intersection-right {
opacity: 0;
transform: translate3d(10%, 0, 0);
transition: opacity 1.4s ease-in-out 0.8s, transform 1s cubic-bezier(0.47, 0.16, 0.24, 1) 0.8s;
}
*[data-intersection][data-intersecting=true] .js-intersection-right {
opacity: 1;
transform: translateZ(0);
}
*[data-intersection] .js-intersection-left {
opacity: 0;
transform: translate3d(-10%, 0, 0);
transition: opacity 1.4s ease-in-out 0.8s, transform 1s cubic-bezier(0.47, 0.16, 0.24, 1) 0.8s;
}
*[data-intersection][data-intersecting=true] .js-intersection-left {
opacity: 1;
transform: translateZ(0);
}
*[data-intersection] .js-intersection-bottom {
opacity: 0;
transform: translate3d(0, 10%, 0);
transition: opacity 1.4s ease-in-out 0.8s, transform 1s cubic-bezier(0.47, 0.16, 0.24, 1) 0.8s;
}
*[data-intersection][data-intersecting=true] .js-intersection-bottom {
opacity: 1;
transform: translateZ(0);
}
*[data-intersection] .js-char-intersection .js-char {
display: inline-block;
transform: translate3d(0, 100%, 0);
transition: opacity 1.2s cubic-bezier(0.47, 0.16, 0.24, 1), transform 1s cubic-bezier(0.47, 0.16, 0.24, 1) 1s;
}
*[data-intersection][data-intersecting=true] .js-char-intersection .js-char {
transform: translateZ(0);
transition: transform 0.8s cubic-bezier(0.18, 0.06, 0.23, 1);
transition-delay: calc(var(--i) * .03s);
}
*[data-intersection][data-scroll-title] {
overflow: hidden;
}
*[data-intersection][data-scroll-title] > span {
display: block;
transform: translate3d(0, 100%, 0);
}
*[data-intersection][data-intersecting=true][data-scroll-title] > span {
transform: translateZ(0);
transition: transform 0.8s cubic-bezier(0.26, 0.06, 0, 1);
transition-delay: .1s;
}
/* =============================================================
Base
* ============================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 62.5%;
height: 100%;
margin: 0;
padding: 0;
touch-action: manipulation;
background: var(--white);
}
body {
font-family: var(--base-font-family);
font-size: calc(1.5rem + var(--slope-1px) * 1);
line-height: var(--line-height);
letter-spacing: 0.03em;
font-weight: 500;
width: 100%;
height: 100%;
color: var(--base-color);
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
font-feature-settings: "palt";
}
body.is-menu-nav-open {
overflow: hidden;
}
body > * {
backface-visibility: hidden;
}
:where(img, svg) {
display: block;
max-width: 100%;
height: auto;
}
:where(svg path:not([fill])) {
fill: currentColor;
}
:where(button,
input:is([type="button" i], [type="submit" i], [type="reset" i]),
[role="tab" i],
[role="button" i],
[role="option" i]),
::file-selector-button {
touch-action: manipulation;
}
a {
color: var(--base-color);
text-decoration: none;
}
a.u-line {
text-decoration: underline;
-webkit-text-decoration-color: transparent;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
transition: -webkit-text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease, -webkit-text-decoration-color 0.1s ease;
text-underline-offset: 0.25em;
}
a.u-line:hover {
-webkit-text-decoration-color: currentColor;
text-decoration-color: currentColor;
}
a.js-tel {
text-decoration: none;
}
a.js-tel._active {
text-decoration: underline;
color: var(--key-color);
}
a.js-tel._inactive {
text-decoration: none;
color: var(--base-color);
}
a.js-tel._inherit {
color: inherit;
}
button {
color: var(--base-color);
cursor: pointer;
}
sup {
vertical-align: super;
font-size: 70%;
}
sub {
vertical-align: sub;
font-size: 70%;
}
*[data-anchor-id] {
scroll-margin-top: var(--header-height);
}
*[data-toggle-id] {
display: none;
}
/* =============================================================
Loader
* ============================================================= */
/* l-loader
============================== */
.l-loader {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #fff;
transition: opacity 0.3s linear var(--loading-time);
pointer-events: auto;
}
body.is-loaded .l-loader {
opacity: 0;
pointer-events: none;
}
.l-loader:before {
content: "";
z-index: 1;
display: block;
width: 100%;
height: 36px;
background: url("../img/logo@2x.png") 50% 50%/296px no-repeat;
transition: opacity 0.3s linear var(--loading-time);
}
body.is-loaded .l-loader:before {
opacity: 0;
}
/* =============================================================
Wrapper
* ============================================================= */
.l-wrapper {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
position: relative;
margin: 0 auto;
overflow: hidden;
opacity: 0;
transition: opacity .2s ease-in;
}
body.is-loaded .l-wrapper {
opacity: 1;
}
@media print {
.l-wrapper {
min-width: 1080px;
}
}
/* =============================================================
sticky
* ============================================================= */
body[data-id="usedcar-detail"] .l-sticky {
display: none;
}
.l-sticky {
display: flex;
max-width: 587px;
background: var(--base-color);
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 999;
width: 100%;
align-items: center;
justify-content: center;
margin-inline: auto;
border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
height: var(--sticky-height);
translate: 0 100%;
opacity: 0;
transition: translate 0.3s var(--animation), opacity 0.2s var(--animation);
pointer-events: none;
}
@media screen and (max-width: 767px) {
.l-sticky {
max-width: 85.86667%;
min-width: 322px;
}
}
body.is-scrolled .l-sticky {
opacity: 1;
translate: 0 0;
pointer-events: auto;
}
.l-sticky-nav {
width: 100%;
display: flex;
align-items: center;
height: 100%;
}
@media screen and (min-width: 768px) {
.l-sticky-nav {
justify-content: center;
}
}
@media screen and (max-width: 767px) {
.l-sticky-nav {
justify-content: space-between;
}
}
.l-sticky-nav__button {
padding-block: 12px;
text-decoration: none;
color: #fff;
display: flex;
gap: 6px;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.2s var(--animation);
width: auto;
padding-inline: 0;
height: 100%;
}
@media screen and (min-width: 768px) {
.l-sticky-nav__button {
padding-inline: 20px;
}
}
@media screen and (max-width: 767px) {
.l-sticky-nav__button {
justify-content: space-between;
flex: 1 1;
flex-direction: column;
gap: 5px;
}
}
@media (any-hover: hover) {
.l-sticky-nav__button:where(:hover) {
opacity: .7;
}
}
.l-sticky-nav__button i {
width: 18px;
height: 18px;
aspect-ratio: 1/1;
margin-block: var(--leading-trim);
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 767px) {
.l-sticky-nav__button i {
width: 16px;
height: 16px;
}
}
.l-sticky-nav__button i svg {
height: 100%;
width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.l-sticky-nav__button i :where(svg path) {
fill: currentColor;
}
.l-sticky-nav__button span {
font-size: calc(12px + var(--slope-1px) * 4);
font-weight: 700;
word-break: keep-all;
margin-block: var(--leading-trim);
letter-spacing: 0;
font-feature-settings: "palt";
display: block;
}
.l-sticky-nav__button:not(:last-child)::after {
content: "";
width: 1px;
height: calc(100% - 24px);
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: #fff;
margin: auto;
}
/* =============================================================
Header
* ============================================================= */
/* header
=============================== */
.l-header {
position: fixed;
top: 0;
width: 100%;
height: var(--header-height);
transition: all 0.3s var(--animation), color 0.3s var(--animation);
z-index: 1001;
}
@media print {
.l-header {
display: none;
visibility: hidden;
opacity: 0;
}
}
.l-header__inner {
display: flex;
align-items: center;
position: relative;
justify-content: space-between;
padding-block: calc(5px + var(--slope-1px) * 5);
padding-inline-start: calc(10px + var(--slope-1px) * 20);
padding-inline-end: calc(calc(6px + var(--slope-1px) * 14) + 175px);
height: var(--header-height);
}
@media screen and (max-width: 767px) {
.l-header__inner {
padding-inline-end: calc(65px + 6px);
gap: 10px;
}
}
.l-header__inner::before {
position: absolute;
content: "";
z-index: -1;
background: var(--white);
width: 100%;
height: 100%;
inset: 0;
}
/* l-header-logo
=============================== */
.l-header-logo {
position: relative;
z-index: 1001;
width: 100%;
flex-shrink: 1;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: flex-start;
}
.l-header-logo a {
position: relative;
transition: opacity .25s;
max-width: 282px;
}
@media screen and (max-width: 560px) {
.l-header-logo a {
max-width: 200px;
}
}
.l-header-logo a img {
min-width: 0%;
width: 100%;
}
.l-header-logo a:hover {
opacity: .8;
}
.l-header-index-recruit {
border: 2px solid var(--base-color);
display: flex;
width: 168px;
padding: 16px 20px 16px 0;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
border-radius: var(--base-border-radius);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
position: relative;
transition: background 0.3s var(--animation), color 0.3s var(--animation), translate 0.3s var(--animation);
}
.l-header-index-recruit::after {
content: "";
-webkit-mask: var(--icon-arrow) 50% 50%/contain no-repeat;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
background: currentColor;
position: absolute;
right: 6px;
bottom: 6px;
width: 18px;
height: 18px;
aspect-ratio: 1/1;
transition: translate 0.3s var(--animation);
}
@media screen and (max-width: 767px) {
.l-header-index-recruit::after {
content: none;
}
}
@media screen and (max-width: 767px) {
.l-header-index-recruit {
flex-direction: column;
gap: 1px;
width: -moz-fit-content;
width: fit-content;
padding: 3px 7px 7px;
max-height: 62px;
height: 100%;
margin-block: 5px;
}
}
.l-header-index-recruit span {
word-break: keep-all;
flex-shrink: 0;
display: block;
margin-block: var(--leading-trim);
font-size: calc(12px + var(--slope-1px) * 8);
font-style: normal;
font-weight: 700;
line-height: 1;
}
@media screen and (max-width: 767px) {
.l-header-index-recruit span {
font-size: 12px;
}
}
.l-header-index-recruit svg path {
transition: all 0.3s var(--animation);
fill: currentColor;
}
.l-header-index-recruit svg {
width: calc(16px + var(--slope-1px) * 6);
height: calc(16px + var(--slope-1px) * 6);
}
@media screen and (max-width: 767px) {
.l-header-index-recruit svg {
width: 18px;
height: 18px;
}
}
@media (any-hover: hover) {
.l-header-index-recruit:hover {
background: var(--base-color);
color: var(--white);
}
.l-header-index-recruit:hover::after {
translate: 3px 0;
}
}
/* l-header-toggle
=============================== */
.l-header-toggle {
position: absolute;
top: 0;
right: 0;
z-index: 10003;
display: flex;
justify-content: center;
align-items: center;
outline: none;
border: 0;
border-radius: 50%;
visibility: visible;
pointer-events: all;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
height: calc(var(--header-height) + 16px);
width: 175px;
border-radius: 0 0 0 calc(10px + var(--slope-1px) * 10);
align-self: center;
background: var(--base-color);
color: var(--white);
transition: filter .2s ease-out;
}
@media screen and (max-width: 767px) {
.l-header-toggle {
flex-direction: column;
width: 65px;
height: 65px;
gap: 1.75em;
}
}
@media (any-hover: hover) {
.l-header-toggle:hover {
filter: brightness(0.7);
}
}
.l-header-toggle .l-header-toggle__text {
font-size: 22px;
font-weight: 700;
transition: all .3s;
font-family: var(--en-font-family);
line-height: .7;
padding-top: .275em;
}
@media screen and (min-width: 768px) {
.l-header-toggle .l-header-toggle__text {
margin-right: 15px;
position: relative;
}
}
@media screen and (max-width: 767px) {
.l-header-toggle .l-header-toggle__text {
position: relative;
font-size: 12px;
top: auto;
order: 2;
}
}
.l-header-toggle .l-header-toggle__text:after {
content: "CLOSE";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
opacity: 0;
transition: all .3s;
transform: translateY(-50%);
}
.l-header-toggle > div {
position: relative;
width: calc(32px + var(--slope-1px) * 8);
height: 3px;
border-radius: var(--ovall-radius);
background: currentColor;
transition: background .2s;
}
@media screen and (max-width: 767px) {
.l-header-toggle > div {
top: .75em;
height: 2.4px;
}
}
.l-header-toggle > div:before, .l-header-toggle > div:after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: currentColor;
border-radius: var(--ovall-radius);
}
.l-header-toggle > div:before {
bottom: 11.5px;
transition: background .2s, bottom .2s .2s, transform .2s;
}
@media screen and (max-width: 767px) {
.l-header-toggle > div:before {
bottom: 8.5px;
}
}
.l-header-toggle > div:after {
top: 11.5px;
transition: background .2s, top .2s .2s, transform .2s;
}
@media screen and (max-width: 767px) {
.l-header-toggle > div:after {
top: 8.5px;
}
}
.l-header-toggle > div > span {
visibility: hidden;
height: 0;
font-size: 0;
}
body.is-menu-nav-open .l-header-toggle .l-header-toggle__text {
color: var(--base-color);
}
body.is-menu-nav-open .l-header-toggle .l-header-toggle__text::after {
background: var(--base-color);
opacity: 1;
transform: translateY(0);
color: var(--white);
}
body.is-menu-nav-open .l-header-toggle > div {
background: transparent;
transition: background .2s;
}
body.is-menu-nav-open .l-header-toggle > div:before {
bottom: 0;
transition: bottom .2s, transform .2s .2s;
transform: rotate(45deg);
}
body.is-menu-nav-open .l-header-toggle > div:after {
top: 0;
transition: top .2s, transform .2s .2s;
transform: rotate(-45deg);
}
/* l-header-toggle-menu
============================== */
.l-header-toggle-menu {
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
width: 100%;
height: 100%;
background: color-mix(in srgb, white 90%, transparent);
backdrop-filter: blur(12.5px);
color: var(--base-color);
transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 0s linear;
transform: translateY(100lvh);
pointer-events: none;
overscroll-behavior-y: none;
z-index: 1000;
}
.l-header-toggle-menu__inner {
padding: calc(var(--header-height) + 2rem) var(--outer-padding) var(--outer-padding);
opacity: 0;
transition: opacity 0s linear .4s, transform 0s linear .4s;
transform: translateY(20px);
}
.l-header-toggle-menu__head {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
width: 100%;
margin-bottom: 2rem;
}
.l-header-toggle-menu__contact {
padding: 1rem;
display: flex;
background: var(--primary);
color: #fff;
text-decoration: none;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: calc(12px + var(--slope-1px) * 2);
gap: .5em;
transition: all .3s ease-out;
}
.l-header-toggle-menu__contact ._icon {
width: 1.42857em;
height: 1.42857em;
display: flex;
align-items: center;
justify-content: center;
}
.l-header-toggle-menu__contact ._icon svg {
max-width: 100%;
height: 100%;
width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.l-header-toggle-menu__contact._white {
background: transparent;
border: 1px solid;
color: var(--base-color);
}
.l-header-toggle-menu__contact._white svg path:not([fill]) {
transition: all .1s;
color: var(--base-color);
}
@media (any-hover: hover) {
.l-header-toggle-menu__contact:where(:hover) {
background: var(--base-color);
color: var(--white);
}
.l-header-toggle-menu__contact:where(:hover)._white {
background: var(--base-color);
color: var(--white);
}
.l-header-toggle-menu__contact:where(:hover)._white svg path:not([fill]) {
fill: var(--white);
}
}
/* =============================================================
Main
* ============================================================= */
/* main
=============================== */
.l-main {
width: 100%;
max-height: 100%;
min-height: 0%;
position: relative;
margin-inline: auto;
flex-grow: 1;
opacity: 0;
transition: opacity .4s ease-in;
transition-delay: calc(var(--loading-time) - .2s);
position: relative;
}
@media print {
.l-main {
min-width: 1080px;
}
}
body.is-loaded .l-main {
opacity: 1;
}
/* head
=============================== */
.l-main-head {
padding-block: calc(var(--header-height) + calc(18px + var(--slope-1px) * 6)) calc(44px + var(--slope-1px) * 12);
max-width: var(--inner-width-px);
margin-inline: auto;
display: block;
width: calc(100% - var(--inner-padding)*2);
position: relative;
}
.l-main-head::before {
content: "";
background: var(--point-color);
inset: 0;
width: 100cqi;
height: 100%;
margin-inline: calc(50% - 50cqi);
position: absolute;
z-index: -1;
}
body[data-category=newcar] .l-main-head::after {
content: "";
background: url(../img/header/newcar.png);
position: absolute;
bottom: 0;
right: 0;
width: clamp(99px, -144.5468px + 25.36946vw, 202px);
height: clamp(70px, -107.3399px + 18.47291vw, 145px);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (max-width: 767px) {
body[data-category=newcar] .l-main-head::after {
width: 99px;
height: 70px;
}
}
body[data-category=usedcar] .l-main-head::after {
content: "";
background: url(../img/header/usedcar.png);
position: absolute;
bottom: 0;
right: 0;
width: clamp(159px, -216.96059px + 39.16256vw, 318px);
height: clamp(42.5px, -57.99261px + 10.46798vw, 85px);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (max-width: 767px) {
body[data-category=usedcar] .l-main-head::after {
width: 159px;
height: 42.5px;
}
}
body[data-category=showroom] .l-main-head::after {
content: "";
background: url(../img/header/showroom.png);
position: absolute;
bottom: 0;
right: 0;
width: clamp(195px, -277.9064px + 49.26108vw, 395px);
height: clamp(50px, -70.59113px + 12.56158vw, 101px);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (max-width: 767px) {
body[data-category=showroom] .l-main-head::after {
width: 195px;
height: 50px;
}
}
body[data-category=campaign] .l-main-head::after {
content: "";
background: url(../img/header/campaign.png);
position: absolute;
bottom: 0;
right: 0;
width: clamp(94px, -128.26601px + 23.15271vw, 188px);
height: clamp(75px, -102.3399px + 18.47291vw, 150px);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (max-width: 767px) {
body[data-category=campaign] .l-main-head::after {
width: 94px;
height: 75px;
}
}
body[data-category=maintenance] .l-main-head::after {
content: "";
background: url(../img/header/maintenance.png);
position: absolute;
bottom: 0;
right: 0;
width: clamp(105px, -192.93103px + 31.03448vw, 231px);
height: clamp(70px, -126.25616px + 20.44335vw, 153px);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (max-width: 767px) {
body[data-category=maintenance] .l-main-head::after {
width: 105px;
height: 70px;
}
}
body[data-category=carlife] .l-main-head::after {
content: "";
background: url(../img/header/carlife.png);
position: absolute;
bottom: 0;
right: 0;
width: clamp(70px, -90.78818px + 16.74877vw, 138px);
height: clamp(81px, -103.4335px + 19.21182vw, 159px);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (max-width: 767px) {
body[data-category=carlife] .l-main-head::after {
width: 70px;
height: 81px;
}
}
body[data-category=company] .l-main-head::after {
content: "";
background: url(../img/header/company.png);
position: absolute;
bottom: 0;
right: 0;
width: clamp(120px, -118.81773px + 24.87685vw, 221px);
height: clamp(70px, -69.50739px + 14.53202vw, 129px);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (max-width: 767px) {
body[data-category=company] .l-main-head::after {
width: 120px;
height: 70px;
}
}
body[data-category=contact] .l-main-head::after {
content: "";
background: url(../img/header/contact.png);
position: absolute;
bottom: 0;
right: 0;
width: clamp(104px, -146.64039px + 26.10837vw, 210px);
height: clamp(75px, -104.70443px + 18.71921vw, 151px);
background-repeat: no-repeat;
background-size: contain;
}
@media screen and (max-width: 767px) {
body[data-category=contact] .l-main-head::after {
width: 104px;
height: 75px;
}
}
body[data-id=detail] .l-main-head::after {
content: none;
}
/* title
=============================== */
.l-main-title {
display: block;
width: calc(100% + var(--inner-padding));
margin-block: calc(var(--leading-trim) + calc(40px + var(--slope-1px) * 20)) calc(var(--leading-trim) + calc(18px + var(--slope-1px) * 6));
position: relative;
z-index: 1;
}
/* breadcrumbs
=============================== */
.l-main-breadcrumbs {
display: block;
margin-block: var(--leading-trim);
}
/* body
=============================== */
.l-main-body {
width: calc(100% - var(--inner-padding)* 2);
max-width: var(--contents-width-px);
margin-inline: auto;
position: relative;
padding-bottom: calc(56px + var(--slope-1px) * 44);
}
body:not([data-id=index]) .l-main-body {
padding-top: calc(48px + var(--slope-1px) * 52);
padding-bottom: calc(48px + var(--slope-1px) * 52);
}
.l-main-body::before {
content: "";
background: var(--white);
inset: 0;
width: 100cqi;
height: 100%;
margin-inline: calc(50% - 50cqi);
position: absolute;
z-index: -1;
border-radius: var(--border-Radius-background, 100px) 0 var(--border-Radius-background, 100px) 0;
}
.l-main-body::after {
content: "";
background: var(--point-color);
inset: 0;
width: 100cqi;
height: 100%;
margin-inline: calc(50% - 50cqi);
position: absolute;
z-index: -2;
}
/* =============================================================
Footer
* ============================================================= */
.l-footer {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-inline: var(--outer-padding);
padding-block: calc(64px + var(--slope-1px) * 84) calc(var(--sticky-height) + calc(32px + var(--slope-1px) * 8));
width: 100cqi;
margin-inline: calc(50% - 50cqi);
background: var(--point-color);
border-radius: var(--border-Radius-background, 100px) 0 0 0;
}
.l-footer::before {
content: "";
background: var(--white);
inset: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
.l-footer__inner {
max-width: var(--inner-width-px);
width: 100%;
}
.l-footer__head {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: calc(40px + var(--slope-1px) * 60);
}
@media screen and (max-width: 767px) {
.l-footer__head {
margin-bottom: 40px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
}
.l-footer__body {
display: flex;
width: 100%;
margin-bottom: calc(32px + var(--slope-1px) * 24);
-moz-column-gap: 40px;
column-gap: 40px;
margin-inline: auto;
padding-inline: clamp(0px, -383.13253px + 31.92771vw, 53px);
}
.l-footer-fig {
margin-inline: auto;
border-bottom: 1px solid;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.l-footer-profile {
padding-top: calc(32px + var(--slope-1px) * 16);
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
margin-block: var(--leading-trim);
font-size: calc(12px + var(--slope-1px) * 2);
}
@media screen and (max-width: 767px) {
.l-footer-profile {
align-items: center;
text-align: center;
justify-content: center;
margin-block: auto;
flex-direction: column;
}
}
@media screen and (max-width: 767px) {
.l-footer-profile p span {
display: block;
}
}
@media screen and (min-width: 768px) {
.l-footer-profile p span:not(:first-child)::before {
content: "\00ff5c";
position: relative;
display: inline;
padding-inline: .25em;
}
}
.l-footer-profile .CMN-RECYCLE a {
display: inline-flex;
align-items: center;
text-decoration: underline;
-webkit-text-decoration-color: currentColor;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
transition: -webkit-text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease, -webkit-text-decoration-color 0.1s ease;
text-underline-offset: 0.25em;
}
.l-footer-profile .CMN-RECYCLE a:hover {
-webkit-text-decoration-color: transparent;
text-decoration-color: transparent;
}
/* .l-footer-sitemap
============================== */
.l-footer-sitemap {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
margin-inline: auto;
}
/* =============================================================
Menu
* ============================================================= */
.l-global-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
width: 100%;
height: 100%;
padding-inline: var(--outer-padding);
padding-block: var(--header-height) 0;
display: flex;
flex-direction: column;
transition: opacity 0.4s cubic-bezier(0.1, 0.91, 0.3, 0.98), visibility 0.4s cubic-bezier(0.1, 0.91, 0.3, 0.98);
z-index: 1000;
visibility: hidden;
opacity: 0;
background: var(--point-color);
}
body.is-menu-nav-open .l-global-menu {
overflow-y: auto;
pointer-events: all;
visibility: visible;
opacity: 1;
}
.l-global-menu::before {
content: "";
background: var(--white);
width: 100%;
height: var(--header-height);
top: 0;
left: 0;
right: 0;
z-index: 2;
position: fixed;
}
.l-global-menu__toggle {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.l-global-menu__toggle .l-header-toggle {
border: 1px solid var(--primary);
color: var(--primary);
}
.l-global-menu__toggle .l-header-toggle:hover {
color: var(--white);
border: 1px solid var(--base-color);
}
.l-global-menu__inner {
position: relative;
z-index: 1;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
flex: 1 1;
}
@media screen and (min-width: 768px) {
.l-global-menu__inner {
transition: opacity .4s ease-in, visibility .4s ease-in;
max-width: 1061px;
margin-inline: auto;
}
}
body.is-menu-nav-open .l-global-menu__inner {
visibility: visible;
opacity: 1;
}
.l-global-menu__head {
margin-top: 64px;
margin-bottom: calc(32px + var(--slope-1px) * 16);
}
@media screen and (min-width: 768px) {
.l-global-menu__head {
display: flex;
gap: 32px;
}
}
@media screen and (max-width: 767px) {
.l-global-menu__head {
margin-top: 36px;
margin-bottom: 32px;
}
}
@media screen and (min-width: 768px) {
.l-global-menu__title {
font-size: 42px;
font-weight: 900;
line-height: 1.3;
display: block;
margin-block: var(--leading-trim);
}
}
@media screen and (max-width: 767px) {
.l-global-menu__title {
display: none;
}
}
.l-global-menu__contact {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
@media screen and (max-width: 767px) {
.l-global-menu__contact {
gap: 6.5px;
}
}
.l-global-contact-button {
position: relative;
display: flex;
width: 190px;
height: 106px;
padding: 25px 0 30px 0;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
transition: filter 0.3s var(--animation);
font-size: calc(16px + var(--slope-1px) * 4);
font-weight: 700;
line-height: 1;
}
@media screen and (max-width: 1080px) {
.l-global-contact-button {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.l-global-contact-button {
width: 100%;
height: -moz-fit-content;
height: fit-content;
padding: 17px 20px;
gap: 5px;
justify-content: flex-start;
flex-direction: row;
max-height: 54px;
}
}
.l-global-contact-button::before {
content: "";
width: 100%;
height: 100%;
inset: 0;
border: 2px solid var(--base-color);
background: var(--key-color);
border-radius: calc(5px + var(--slope-1px) * 5);
display: block;
position: absolute;
transition: scale 0.2s var(--animation);
z-index: 0;
}
.l-global-contact-button::after {
content: "";
-webkit-mask: var(--icon-arrow) 50% 50%/contain no-repeat;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
background: currentColor;
position: absolute;
right: calc(7px + var(--slope-1px) * 1);
bottom: calc(6px + var(--slope-1px) * 1);
width: 18px;
height: 18px;
aspect-ratio: 1/1;
transition: translate 0.3s var(--animation);
}
@media screen and (max-width: 767px) {
.l-global-contact-button::after {
width: 14px;
height: 14px;
}
}
@media (any-hover: hover) {
.l-global-contact-button:hover {
filter: brightness(0.92);
}
.l-global-contact-button:hover::before {
scale: .99;
}
.l-global-contact-button:hover::after {
translate: 3px 0;
}
}
.l-global-contact-button > * {
position: relative;
z-index: 1;
}
.l-global-contact-button span {
margin-block: var(--leading-trim);
display: block;
width: 30px;
height: 30px;
aspect-ratio: 1;
}
@media screen and (max-width: 767px) {
.l-global-contact-button span {
width: 20px;
height: 20px;
}
}
.l-global-contact-button span svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.l-global-contact-button span svg path {
fill: currentColor;
}
.l-global-contact-button p {
display: block;
margin-block: var(--leading-trim);
line-height: 1;
}
.l-global-menu__foot {
align-self: flex-end;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
margin-inline: auto;
max-width: 100%;
padding-top: 50px;
}
/* .l-global-sitemap
============================== */
.l-global-sitemap {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
}
/* ============================================================= *
Modal
* ============================================================= */
/* l-modal
=============================== */
.l-modal {
position: fixed;
top: 0;
left: 0;
z-index: 100005;
display: none;
visibility: hidden;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: calc(var(--vh) * 5) var(--inner-padding);
background: rgba(0, 0, 0, 0.8);
opacity: 0;
pointer-events: none;
transition: opacity .6s .6s, visibility .6s .6s;
}
.l-modal.is-show {
display: flex;
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.l-modal__inner {
position: relative;
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
height: 100%;
width: 1040px;
max-height: -moz-fit-content;
max-height: fit-content;
margin: auto;
opacity: 0;
transition: opacity .6s .6s, visibility .6s .6s;
--padding-block: calc(24px + var(--slope-1px) * 16);
--padding-inline: calc(20px + var(--slope-1px) * 20);
}
.l-modal.is-show .l-modal__inner {
opacity: 1;
}
.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;
z-index: 1;
overflow-y: auto;
max-width: 100%;
width: -moz-fit-content;
width: fit-content;
max-height: calc(var(--vh) * 90);
padding: var(--padding-block) var(--padding-inline);
border-radius: var(--frame-border-radius);
background: #fff;
border: 2px solid var(--border-color);
}
.l-modal__close {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
gap: 10px;
width: calc(26px + var(--slope-1px) * 6);
height: calc(26px + var(--slope-1px) * 6);
outline: none;
border-radius: 50%;
border: 0;
padding: 0;
background: var(--icon-close) 50% 50%/75% 75% no-repeat var(--base-color);
line-height: 1;
transition: opacity .3s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.l-modal__close:hover {
opacity: .7;
}
.l-modal__close span {
display: none;
}
/* ============================================================= *
Common - Block
* ============================================================= */
/* c-description-block
============================== */
.c-description-block {
display: flex;
padding: 32px 20px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: var(--frame-border-radius);
background: var(--Root---light-color, #D2F7FD);
margin-bottom: calc(48px + var(--slope-1px) * 22);
}
.c-description-block__lead {
text-align: center;
display: block;
margin-block: var(--leading-trim);
word-break: keep-all;
overflow-wrap: anywhere;
}
/* c-scroll-block
============================== */
.c-scroll-block {
background: #fff;
}
.c-scroll-block:not(:first-child) {
margin-top: calc(30px + var(--slope-1px) * 10);
}
@media screen and (max-width: 767px) {
.c-scroll-block {
overflow-x: auto;
width: calc(100% + var(--inner-padding));
}
.c-scroll-block:not(:has(.scroll-hint-icon-wrap)) {
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, 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, 0.2)) right/20px 100%;
background-color: #fff;
background-attachment: local, scroll, local, scroll;
background-repeat: no-repeat;
}
.c-scroll-block > img {
width: 1080px;
max-width: none;
}
.c-scroll-block > * {
width: 1080px;
}
.c-scroll-block > table {
width: 1080px;
}
}
/* c-frame-block
============================== */
.c-frame-block {
padding: calc(24px + var(--slope-1px) * 8) calc(20px + var(--slope-1px) * 12);
border-radius: var(--frame-border-radius);
background: #fff;
}
.c-frame-block__head {
text-align: center;
color: var(--point-color);
font-weight: bold;
font-size: 20px;
margin-block: var(--leading-trim) 1em;
}
/* ============================================================= *
Contact
* ============================================================= */
/* c-contact-section
============================== */
.c-contact-section {
border-radius: var(--frame-border-radius);
width: 100%;
max-width: calc(var(--inner-width-px) + var(--outer-padding)*2);
margin-inline: auto;
padding-inline: var(--outer-padding);
background: var(--white);
padding: 0 clamp(20px, -7.79156px + 4.96278vw, 60px) calc(24px + var(--slope-1px) * 40);
position: relative;
overflow: hidden;
}
.c-contact-section__marquee {
display: flex;
width: -moz-fit-content;
width: fit-content;
color: var(--light-color);
white-space: nowrap;
font-weight: 700;
font-size: 120px;
font-family: var(--en-font-family);
line-height: .9;
animation: marqueeContact 16s linear 0s infinite normal;
will-change: transform;
position: relative;
z-index: 0;
height: 70px;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media screen and (max-width: 767px) {
.c-contact-section__marquee {
animation: marqueeContact 12s linear 0s infinite normal;
margin-top: -.15em;
line-height: 1.2;
font-size: 60px;
height: 44px;
}
}
.c-contact-section__marquee > span, .c-contact-section__marquee:before, .c-contact-section__marquee:after {
width: -moz-fit-content;
width: fit-content;
padding-inline: .2em;
white-space: nowrap;
}
.c-contact-section__marquee:before, .c-contact-section__marquee:after {
content: attr(data-marquee);
}
@keyframes marqueeContact {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-25%);
}
}
.c-contact-section__head {
position: relative;
z-index: 1;
}
.c-contact-section-title {
font-size: calc(22px + var(--slope-1px) * 10);
font-weight: 700;
line-height: 1;
display: block;
margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(30px + var(--slope-1px) * 11));
text-align: center;
letter-spacing: 0.02em;
}
.c-contact-section-lead {
margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(29px + var(--slope-1px) * 10));
text-align: center;
}
.c-contact-section__body {
display: flex;
gap: 8px clamp(24px, 18.44169px + 0.99256vw, 32px);
}
@media screen and (max-width: 767px) {
.c-contact-section__body {
flex-direction: column;
}
}
.c-contact-nav {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 1;
text-decoration: none;
padding-block: calc(22px + var(--slope-1px) * 7) calc(29px + var(--slope-1px) * 11);
transition: filter 0.3s var(--animation);
}
@media screen and (min-width: 768px) {
.c-contact-nav {
padding-inline: 24px;
}
}
.c-contact-nav::before {
content: "";
width: 100%;
height: 100%;
inset: 0;
border: 2px solid var(--base-color);
background: var(--key-color);
border-radius: calc(5px + var(--slope-1px) * 5);
display: block;
position: absolute;
transition: scale 0.2s var(--animation);
z-index: 0;
}
.c-contact-nav::after {
content: "";
-webkit-mask: var(--icon-arrow) 50% 50%/contain no-repeat;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
background: currentColor;
position: absolute;
right: calc(13px + var(--slope-1px) * 4);
bottom: calc(12px + var(--slope-1px) * 4);
width: 24px;
height: 24px;
aspect-ratio: 1/1;
transition: translate 0.3s var(--animation);
}
@media screen and (max-width: 767px) {
.c-contact-nav::after {
width: 18px;
height: 18px;
}
}
@media (any-hover: hover) {
.c-contact-nav:hover {
filter: brightness(0.92);
}
.c-contact-nav:hover::before {
scale: .99;
}
.c-contact-nav:hover::after {
translate: 3px 0;
}
}
.c-contact-nav > * {
position: relative;
z-index: 1;
}
.c-contact-nav__icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
aspect-ratio: 1;
margin-top: var(--leading-trim);
}
@media screen and (max-width: 767px) {
.c-contact-nav__icon {
width: 20px;
height: 20px;
}
}
.c-contact-nav__icon svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-contact-nav__icon svg path {
fill: currentColor;
}
.c-contact-nav__title {
font-size: clamp(20px, 9.75626px + 1.33556vw, 28px);
font-weight: 700;
line-height: 1;
display: block;
margin-block: calc(var(--leading-trim) + 12px) var(--leading-trim);
text-align: center;
}
.c-contact-nav__text {
font-size: calc(15px + var(--slope-1px) * 1);
font-weight: 500;
display: block;
margin-block: calc(var(--leading-trim) + calc(22px + var(--slope-1px) * 7)) var(--leading-trim);
text-align: center;
}
@media screen and (min-width: 768px) {
.c-contact-nav__text {
word-break: auto-phrase;
}
}
/* ============================================================= *
Grid
* ============================================================= */
/* c-grid
=============================== */
.c-grid {
display: grid;
place-content: center;
grid-template-columns: repeat(var(--columns), minmax(min(0px, 100%), var(--item-width)));
margin-inline: auto;
gap: calc(10px + var(--slope-1px) * 10);
}
.c-grid .c-button {
max-width: 100%;
}
.c-grid .c-bannr {
max-width: 100%;
}
.c-grid._x8 {
max-width: 100%;
--item-width: 141px;
--columns:8;
}
.c-grid._x4 {
max-width: 100%;
--columns:4;
}
@media screen and (max-width: 767px) {
.c-grid._x4\:tablet {
--columns:4;
}
}
.c-grid._x3 {
max-width: 100%;
--item-width: 398px;
--columns:3;
}
@media screen and (max-width: 767px) {
.c-grid._x3\:tablet {
--columns:3;
}
}
@media screen and (max-width: 560px) {
.c-grid._x3\:mobile {
--columns:3;
}
}
.c-grid._x2 {
--item-width: 590px;
--columns:2;
}
@media screen and (max-width: 767px) {
.c-grid._x2\:tablet {
--columns:2;
}
}
@media screen and (max-width: 560px) {
.c-grid._x2\:mobile {
--columns:2;
}
}
.c-grid._x1 {
--columns:1;
max-width: 100%;
grid-template-columns: repeat(var(--columns), minmax(min(0px, 100%), 398px));
}
@media screen and (max-width: 767px) {
.c-grid._x1\:tablet {
--columns:1;
}
}
@media screen and (max-width: 560px) {
.c-grid._x1\:mobile {
--columns:1;
grid-template-columns: 100%;
}
}
.c-grid._auto-fill {
grid-template-columns: repeat(auto-fill, minmax(min(var(--item-width), 100%), 1fr));
}
.c-grid._auto-fit {
grid-template-columns: repeat(auto-fit, minmax(min(var(--item-width), 100%), 1fr));
}
.c-button-grid {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 40px;
margin-inline: auto;
width: 100%;
place-content: center;
}
.c-button-grid > * {
flex-basis: 290px;
}
@media screen and (max-width: 767px) {
.c-button-grid > * {
flex-basis: unset;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
@media screen and (max-width: 767px) {
.c-button-grid {
flex-direction: column;
width: 100%;
}
}
/* ============================================================= *
Navigation
* ============================================================= */
/* breadcrumbs
=============================== */
.c-breadcrumbs {
width: 100%;
font-size: calc(11px + var(--slope-1px) * 1);
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
margin-inline: auto;
margin-block: var(--leading-trim);
line-height: 1.65;
display: inline-flex;
align-items: center;
width: 100cqi;
white-space: nowrap;
}
.c-breadcrumbs-home {
display: block;
width: calc(14px + var(--slope-1px) * 2);
height: calc(14px + var(--slope-1px) * 2);
}
.c-breadcrumbs > li {
display: inline-flex;
align-items: center;
align-self: center;
letter-spacing: 0;
}
.c-breadcrumbs > li:not(:last-child)::after {
content: "";
background: var(--dark-color);
position: relative;
display: inline-flex;
align-items: center;
align-self: center;
width: calc(14px + var(--slope-1px) * 2);
height: 1px;
margin-block: .25lh;
margin-inline: 0.5em 0.5em;
}
.c-breadcrumbs > li a {
transition: all .2s ease-out;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: solid;
text-decoration-style: solid;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-thickness: 1px;
text-underline-offset: auto;
text-underline-position: from-font;
}
.c-breadcrumbs > li a:hover {
text-decoration: none;
}
/* c-button
=============================== */
.c-button {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
/* common */
--_color:var(--base-color);
--_bg-color: var(--white);
--_hover-color: var(--white);
--_border-color: var(--base-color);
--_hover-bg-color: var(--base-color);
--_arrow-size:18px;
/* Layout */
font-size: calc(15px + var(--slope-1px) * 1);
font-weight: 700;
width: 100%;
max-width: 18.75em;
padding-block: calc(var(--leading-trim) + 16px);
border-radius: var(--base-border-radius);
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
gap: calc(5px + var(--slope-1px) * 5);
padding-inline: .5em;
/* style */
color: var(--_color);
border: 2px solid;
border-color: var(--_border-color);
background: var(--_bg-color);
transition: background 0.3s var(--animation), color 0.3s var(--animation), filter 0.3s var(--animation), translate 0.3s var(--animation);
}
.c-button:has(svg, img) {
padding-inline: .5em 1em;
}
@media screen and (max-width: 767px) {
.c-button {
max-width: 19.33333em;
--_arrow-size:14px;
}
}
.c-button._primary {
--_bg-color: var(--key-color);
}
.c-button._stretch {
max-width: 100%;
width: 100%;
}
@media screen and (max-width: 767px) {
.c-button._stretch {
max-width: 100%;
}
}
.c-button._onClick::after {
rotate: -45deg;
}
.c-button._close {
max-width: 200px;
}
.c-button._close::after {
content: "";
position: absolute;
right: calc(7px + var(--slope-1px) * 1);
bottom: calc(6px + var(--slope-1px) * 1);
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
border-radius: 100%;
transition: background .2s;
-webkit-mask: var(--icon-minus) 50% 50%/contain no-repeat;
mask: var(--icon-minus) 50% 50%/contain no-repeat;
background: currentColor;
transition: translate 0.3s var(--animation);
}
.c-button._call::after {
rotate: -45deg;
}
.c-button::after {
content: "";
position: absolute;
right: calc(7px + var(--slope-1px) * 1);
bottom: calc(6px + var(--slope-1px) * 1);
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
border-radius: 100%;
transition: background .2s;
-webkit-mask: var(--icon-arrow) 50% 50%/contain no-repeat;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
background: currentColor;
transition: translate 0.3s var(--animation);
}
.c-button.js-scroll::after {
rotate: 90deg;
}
.c-button svg path[fill] {
transition: all 0.3s var(--animation);
fill: var(--_color);
}
@media (any-hover: hover) {
:is(a:hover .c-button, a.c-button:hover, button:hover .c-button, button.c-button:hover) {
background: var(--_hover-bg-color);
color: var(--_hover-color);
}
:is(a:hover .c-button, a.c-button:hover, button:hover .c-button, button.c-button:hover) svg path[fill] {
fill: var(--_hover-color);
}
:is(a:hover .c-button, a.c-button:hover, button:hover .c-button, button.c-button:hover)::after {
translate: 3px 0;
}
:is(a:hover .c-button.js-scroll, a.c-button.js-scroll:hover, button:hover .c-button.js-scroll, button.c-button.js-scroll:hover)::after {
translate: 0 3px;
}
:is(a:hover .c-button._blank, a.c-button._blank:hover, button:hover .c-button._blank, button.c-button._blank:hover)::after {
translate: 3px -1px;
}
}
/* c-button-wrap
============================== */
.c-button-wrap {
position: relative;
display: block;
text-decoration: none;
width: -moz-fit-content;
width: fit-content;
min-width: 290px;
--label-pos:8px;
}
.c-button-wrap._stretch {
width: 100%;
min-width: 100%;
}
.c-button-wrap__label {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-inline: auto;
padding-inline: 2px;
color: var(--base-color);
margin-block: var(--leading-trim) calc(var(--leading-trim) + var(--label-pos));
font-size: 12px;
gap: 5px;
}
.c-button-wrap__label._stretch {
width: 100%;
}
@media screen and (max-width: 767px) {
.c-button-wrap__label {
min-width: -moz-fit-content;
min-width: fit-content;
}
}
.c-button-wrap__label::before {
content: "";
position: relative;
width: .5em;
height: 1em;
border-left: solid 1.6px;
left: 0;
transform: rotate(-30deg);
}
.c-button-wrap__label:after {
content: "";
position: relative;
width: .5em;
height: 1em;
border-right: solid 1.6px;
right: 0;
transform: rotate(30deg);
}
.c-button-wrap:has(.c-button._large) {
--label-pos: 21px;
}
.c-button-wrap:has(.c-button._large) .c-button-wrap__label {
min-width: -moz-fit-content;
min-width: fit-content;
font-size: calc(13px + var(--slope-1px) * 1);
}
@media screen and (max-width: 767px) {
.c-button-wrap:has(.c-button._large) .c-button-wrap__label {
width: calc(100% - 10px);
}
}
.c-button-wrap:has(.c-button._large) .c-button-wrap__label:after {
width: 14px;
height: 7px;
}
/* c-button-container
============================== */
.c-button-container {
width: 100%;
display: flex;
flex-wrap: wrap;
place-content: center;
gap: 1em;
margin-top: calc(24px + var(--slope-1px) * 8);
align-items: flex-end;
justify-items: center;
}
.c-button-container._stretch .c-button,
.c-button-container._stretch .c-button-wrap {
max-width: -moz-fit-content;
max-width: fit-content;
}
@media screen and (max-width: 767px) {
.c-button-container._stretch .c-button,
.c-button-container._stretch .c-button-wrap {
min-width: 290px;
max-width: calc(290 / 375 * 100cqi);
margin-inline: auto;
}
}
.c-button-container .c-button,
.c-button-container .c-button-wrap {
width: 100%;
max-width: 290px;
}
@media screen and (max-width: 767px) {
.c-button-container .c-button,
.c-button-container .c-button-wrap {
min-width: 290px;
max-width: calc(290 / 375 * 100cqi);
margin-inline: auto;
}
}
/* c-button-group
============================== */
.c-button-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: -moz-fit-content;
width: fit-content;
}
.c-button-group._stretch {
width: 100%;
}
/* c-button-notes
============================== */
.c-button-notes {
font-size: calc(11px + var(--slope-1px) * 2);
font-weight: 400;
line-height: 1.8;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition-property: color;
transition-duration: 0.3s;
transition-timing-function: var(--animation);
text-align: center;
}
.c-button-notes._large {
font-size: calc(14px + var(--slope-1px) * 2);
}
/* banner
=============================== */
.c-circle-button {
display: block;
aspect-ratio: 1;
transition: opacity .3s;
text-decoration: none;
}
@media (any-hover: hover) {
.c-circle-button:where(:hover) {
opacity: .7;
}
}
/* banner
=============================== */
.c-banner {
transition: opacity .2s;
border-radius: 20px;
background: var(--white);
box-shadow: 0 0 8px 0 rgba(68, 64, 63, 0.25);
padding: 20px 10px;
display: grid;
place-content: center;
height: 100%;
}
@media (any-hover: hover) {
.c-banner:where(:hover) {
opacity: .7;
}
}
/* ============================================================= *
Common - Tab
* ============================================================= */
*[data-tab-id] {
display: none;
}
*[data-tab-id].is-current {
display: block;
}
/* c-tab
============================== */
.c-tab {
--current-tab-color: var(--white);
display: grid;
grid-template-columns: var(--side) 1fr var(--gap) 1fr var(--side);
width: 100%;
margin: auto;
position: relative;
--side: calc(10px + var(--slope-1px) * 22);
--gap: calc(4px + var(--slope-1px) * 12);
--tab-radius: calc(5px + var(--slope-1px) * 5);
min-height: calc(60px + var(--slope-1px) * 16);
}
.c-tab._x3 {
grid-template-columns: var(--side) 1fr var(--gap) 1fr var(--gap) 1fr var(--side);
}
.c-tab._x5 {
grid-template-columns: var(--side) 1fr var(--gap) 1fr var(--gap) 1fr var(--gap) 1fr var(--gap) 1fr var(--side);
}
.c-tab._x6 {
--gap: calc(5px + var(--slope-1px) * 5);
--side: calc(10px + var(--slope-1px) * 5);
grid-template-columns: var(--side) 1fr var(--gap) 1fr var(--gap) 1fr var(--gap) 1fr var(--gap) 1fr var(--gap) 1fr var(--side);
}
.c-tab::before, .c-tab::after {
content: "";
width: 100%;
height: 2px;
position: absolute;
bottom: 0;
background: var(--base-color);
}
.c-tab::before {
grid-column: 1/2;
left: 0;
}
.c-tab::after {
grid-column: 5/6;
right: 0;
}
.c-tab._x3::after {
grid-column: 7/8;
}
.c-tab._x5::after {
grid-column: 11/12;
}
.c-tab._x6::after {
grid-column: 13/14;
}
.c-tab._gray {
--current-tab-color: #f4f4f4 !important;
}
.c-tab:not(:last-child) {
margin-bottom: 64px;
}
.c-tab._margin-small:not(:last-child) {
margin-bottom: calc(30px + var(--slope-1px) * 10);
}
.c-tab__item {
width: 100%;
display: flex;
align-items: stretch;
}
.c-tab__item:not(:last-child)::after {
content: "";
width: 100%;
height: 2px;
position: absolute;
bottom: 0;
background: var(--base-color);
left: 0;
}
.c-tab__item:nth-child(1) {
grid-column: 2/3;
}
.c-tab__item:nth-child(1)::after {
grid-column: 3/4;
}
.c-tab__item:nth-child(2) {
grid-column: 4/5;
}
.c-tab__item:nth-child(2)::after {
grid-column: 5/6;
}
.c-tab__item:nth-child(3) {
grid-column: 6/7;
}
.c-tab__item:nth-child(3)::after {
grid-column: 7/8;
}
.c-tab__item:nth-child(4) {
grid-column: 8/9;
}
.c-tab__item:nth-child(4)::after {
grid-column: 9/10;
}
.c-tab__item:nth-child(5) {
grid-column: 10/11;
}
.c-tab__item:nth-child(5)::after {
grid-column: 11/12;
}
.c-tab__item:nth-child(6) {
grid-column: 12/13;
}
.c-tab__item:nth-child(6)::after {
grid-column: 13/14;
}
.c-tab__button {
display: flex;
justify-content: center;
align-items: center;
gap: 0.33333em;
width: 100%;
padding-block: calc(var(--leading-trim) + calc(20px + var(--slope-1px) * 12));
padding-inline: calc(20px + var(--slope-1px) * 4);
line-height: 1.65;
font-size: calc(15px + var(--slope-1px) * 1);
font-weight: 500;
text-decoration: none;
text-align: center;
border: 2px solid var(--base-color);
border-bottom-width: 0;
border-radius: var(--tab-radius) var(--tab-radius) 0 0;
background: var(--base-color);
color: var(--white);
position: relative;
z-index: 2;
outline: none;
transition: background var(--t-duration);
cursor: pointer;
overflow: visible;
}
@media screen and (max-width: 767px) {
.c-tab__button {
flex-direction: column;
}
}
.c-tab__button span {
word-break: keep-all;
overflow-wrap: anywhere;
width: -moz-fit-content;
width: fit-content;
display: block;
margin-block: var(--leading-trim);
}
.c-tab__button span small {
font-size: clamp(14px, 8.87813px + 0.66778vw, 18px);
}
@media screen and (max-width: 767px) {
.c-tab__button span small {
font-size: calc(11px + var(--slope-1px) * 3);
}
}
.c-tab__button.is-current {
background: transparent;
color: var(--base-color);
border-bottom: 0;
}
/* anchor
=============================== */
.c-page-anchor {
display: flex;
justify-content: right;
gap: calc(8px + var(--slope-1px) * 8);
--_gap: # slope(8,16);
display: flex;
justify-content: right;
}
@media screen and (max-width: 767px) {
.c-page-anchor {
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
}
.c-anchor-button {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
text-align: center;
/* common */
--_color:var(--base-color);
--_bg-color: var(--white);
--_hover-color: var(--white);
--_border-color: var(--base-color);
--_hover-bg-color: var(--base-color);
--_arrow-size: 16px;
/* Layout */
font-size: calc(12px + var(--slope-1px) * 2);
font-weight: 700;
width: 100%;
max-width: 12.14286em;
padding-block: calc(var(--leading-trim) + 14px);
border-radius: var(--base-border-radius);
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-inline: 1em;
/* style */
color: var(--_color);
border: 2px solid;
border-color: var(--_border-color);
background: var(--_bg-color);
transition: background 0.3s var(--animation), color 0.3s var(--animation), filter 0.3s var(--animation), translate 0.3s var(--animation);
word-break: keep-all;
overflow-wrap: anywhere;
}
@media screen and (max-width: 767px) {
.c-anchor-button {
max-width: 9.08333em;
padding-inline: .5em;
--_arrow-size:12px;
}
}
.c-anchor-button::after {
content: "";
position: absolute;
right: calc(4px + var(--slope-1px) * 4);
bottom: calc(3px + var(--slope-1px) * 4);
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
transition: background .2s;
-webkit-mask: var(--icon-arrow) 50% 50%/contain no-repeat;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
background: currentColor;
transition: translate 0.3s var(--animation);
rotate: 90deg;
}
@media (any-hover: hover) {
:is(a:hover .c-anchor-button, a.c-anchor-button:hover) {
background: var(--_hover-bg-color);
color: var(--_hover-color);
}
:is(a:hover .c-anchor-button, a.c-anchor-button:hover)::after {
translate: 0 2px;
}
}
/* ============================================================= *
Section
* ============================================================= */
/* c-section-lead
============================== */
.c-section-lead {
font-size: calc(16px + var(--slope-1px) * 4);
line-height: 1.8;
font-weight: 500;
margin-block: var(--leading-trim);
}
@media screen and (min-width: 768px) {
.c-section-lead {
word-break: keep-all;
overflow-wrap: anywhere;
}
}
/* c-section-text
============================== */
.c-section-text {
line-height: 1.8;
margin-block: var(--leading-trim);
}
.c-section-text > p {
margin-bottom: var(--leading-trim);
}
.c-section-text:not(:last-child) {
margin-bottom: 2em;
}
.c-section-lead + .c-section-text {
margin-top: 1em;
}
@media screen and (min-width: 768px) {
.c-section-text {
word-break: keep-all;
overflow-wrap: anywhere;
}
}
/* c-section
============================== */
.c-section:not(:first-child) {
margin-top: calc(72px + var(--slope-1px) * 40);
}
.c-section._closer:not(:first-child) {
margin-top: calc(48px + var(--slope-1px) * 40);
}
.c-section._narrow {
max-width: 900px;
justify-self: center;
width: 100%;
}
.c-page-anchor + .c-section {
margin-top: calc(40px + var(--slope-1px) * 20);
}
.c-section._no-bottom {
margin-bottom: 0;
}
.c-section._no-space {
margin-top: 0;
}
.c-section__side {
align-self: flex-end;
}
@media screen and (max-width: 767px) {
.c-section__side {
align-self: center;
display: flex;
align-items: center;
justify-content: center;
}
}
.c-section__head {
display: grid;
grid-template-columns: 1fr;
gap: calc(24px + var(--slope-1px) * 6);
margin-bottom: calc(var(--leading-trim) + calc(30px + var(--slope-1px) * 10));
}
.c-section__head:has(.c-section__side) {
grid-template-columns: 1fr 300px;
align-items: center;
}
@media screen and (max-width: 767px) {
.c-section__head:has(.c-section__side) {
grid-template-columns: 100%;
}
}
.c-section__head._closer {
margin-bottom: calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 8));
}
.c-section__head._no-space {
margin-bottom: 0;
}
.c-section__foot {
margin-top: calc(40px + var(--slope-1px) * 10);
display: flex;
justify-content: center;
}
.c-section._frame {
border-radius: 20px;
border: 2px solid var(--light-gray);
background: var(--white);
overflow: hidden;
padding: calc(20px + var(--slope-1px) * 30);
}
/* inner section
=============================== */
.c-inner-section {
margin-top: calc(32px + var(--slope-1px) * 16);
}
.c-inner-section__head {
margin-bottom: calc(var(--leading-trim) + calc(16px + var(--slope-1px) * 8));
}
.c-inner-section + .c-inner-section {
margin-top: 64px;
}
/* ============================================================= *
Sitemap
* ============================================================= */
.c-sitemap {
display: grid;
gap: 60px 40px;
}
@media screen and (min-width: 768px) {
.c-sitemap {
align-items: start;
justify-content: space-between;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto auto auto;
grid-template-areas: "showroom newcar maintenance carlife company" "showroom usedcar maintenance campaign company" "showroom usedcar maintenance campaign contact";
}
.c-sitemap__col:first-child {
grid-area: showroom;
}
.c-sitemap__col:nth-child(2) {
grid-area: newcar;
}
.c-sitemap__col:nth-child(3) {
grid-area: usedcar;
}
.c-sitemap__col:nth-child(4) {
grid-area: maintenance;
}
.c-sitemap__col:nth-child(5) {
grid-area: carlife;
}
.c-sitemap__col:nth-child(6) {
grid-area: campaign;
}
.c-sitemap__col:nth-child(7) {
grid-area: company;
}
.c-sitemap__col:nth-child(8) {
grid-area: contact;
}
}
@media screen and (max-width: 1080px) {
.c-sitemap {
grid-template-columns: 1fr 1fr 1.3fr 1fr 1.2fr;
}
}
@media screen and (max-width: 767px) {
.c-sitemap {
border-top: 1px solid var(--dark-color);
grid-template-columns: 100%;
gap: 0;
}
}
/* c-sitemap-box
============================== */
@media screen and (max-width: 767px) {
.c-sitemap-box {
border-bottom: 1px solid var(--dark-color);
}
}
.c-sitemap-box a {
text-decoration: none;
}
.c-sitemap-box__head {
font-size: calc(15px + var(--slope-1px) * 1);
}
@media screen and (min-width: 768px) {
.c-sitemap-box__head {
margin-bottom: calc(var(--leading-trim) + 1.5em);
}
}
.c-sitemap-box__toggle {
position: relative;
line-height: 1;
text-align: left;
display: flex;
align-items: center;
font-weight: 700;
pointer-events: none;
background: transparent;
color: currentColor;
border: 0;
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
gap: 9px;
transition: opacity .2s;
}
@media screen and (max-width: 767px) {
.c-sitemap-box__toggle {
width: 100%;
padding-block: calc(20px + var(--leading-trim));
pointer-events: auto;
padding-inline: 8px 2em;
}
.c-sitemap-box__toggle::after, .c-sitemap-box__toggle::before {
content: "";
position: absolute;
top: 0;
right: 11px;
bottom: 0;
display: block;
width: 11px;
height: 2px;
margin: auto 0;
border-radius: 2px;
background: currentColor;
}
.c-sitemap-box__toggle::after {
transition: rotate .2s;
rotate: 90deg;
}
.c-sitemap-box__toggle.is-open::after {
rotate: 0deg;
}
}
.c-sitemap-box__body {
display: none;
}
@media screen and (min-width: 768px) {
.c-sitemap-box__body {
display: block !important;
}
}
@media screen and (max-width: 767px) {
.c-sitemap-box__body {
padding-bottom: 24px;
}
}
@media screen and (min-width: 768px) {
.c-sitemap-box__item:not(:first-child) {
margin-top: 1.25em;
}
}
@media screen and (max-width: 767px) {
.c-sitemap-box__item a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 1em 0;
}
.c-sitemap-box__item a:before {
content: "";
display: block;
width: .4em;
height: .4em;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
margin-right: 1em;
}
}
/* c-sitemap-pages
============================== */
.c-sitemap-pages {
display: grid;
grid-template-columns: 100%;
margin-left: 8px;
}
.c-sitemap-pages > li {
--_dots-size: 6px;
margin-block: var(--leading-trim);
font-size: 14px;
padding-left: calc(var(--_dots-size) + 5px);
position: relative;
}
.c-sitemap-pages > li:not(:last-child) {
margin-bottom: calc(calc(20px + var(--slope-1px) * -4) + var(--leading-trim));
}
.c-sitemap-pages > li::before {
content: "";
position: absolute;
top: calc(1lh/2 - var(--_dots-size)/2);
left: 0;
display: block;
width: var(--_dots-size);
height: var(--_dots-size);
border-radius: 50%;
background: var(--dark-color);
margin-block: auto;
}
.c-sitemap-pages > li a {
display: inline-flex;
align-items: center;
text-decoration: underline;
-webkit-text-decoration-color: transparent;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
transition: -webkit-text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease, -webkit-text-decoration-color 0.1s ease;
text-underline-offset: 0.25em;
}
.c-sitemap-pages > li a:hover {
-webkit-text-decoration-color: currentColor;
text-decoration-color: currentColor;
}
.c-sitemap-showroom-block .c-sitemap-pages > li a {
gap: .5em;
}
.c-sitemap-showroom-block .c-sitemap-pages > li a:before {
content: "-";
}
/* ============================================================= *
Slider
* ============================================================= */
/* c-slider-control
============================== */
.c-slider-control {
--_arrow-color: var(--dark-color);
--_arrow-hover-color: var(--white);
--_arrow-size: 22px;
--_bar-color: var(--dark-color);
--_bar-bg-color: var(--white);
}
.c-slider-control {
display: flex;
align-items: center;
justify-content: center;
}
.c-slider-control .slick-arrow.slick-prev {
order: 0;
width: var(--_arrow-size);
height: var(--_arrow-size);
}
.c-slider-control .slick-arrow.slick-next {
order: 2;
width: var(--_arrow-size);
height: var(--_arrow-size);
}
/* c-slide-arrow
============================== */
.c-slide-arrow {
display: flex;
justify-content: center;
align-items: center;
width: var(--_arrow-size);
height: var(--_arrow-size);
cursor: pointer;
flex-shrink: 0;
color: var(--_arrow-color);
}
.c-slide-arrow svg path:not([fill]) {
transition: all .2s ease-out;
fill: var(-_arrow-color);
}
@media (any-hover: hover) {
.c-slide-arrow:where(:hover) {
scale: 1.1;
background: var(--base-color);
}
.c-slide-arrow:where(:hover) svg path:not([fill]) {
fill: var(--_arrow-hover-color);
}
}
/* c-slider-progress
============================== */
.c-slider-progress {
overflow: hidden;
width: 150px;
height: 8px;
margin: 0 10px;
border-radius: 4px;
background-color: var(--_bar-bg-color);
min-width: 100px;
position: relative;
--slider-current: 1;
}
.c-slider-progress:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
border-radius: 4px;
background: var(--_bar-color);
transition: width 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
width: calc(100% / var(--slider-length) * var(--slider-current));
transform-origin: left center;
}
/* c-newcar-slider
============================== */
.c-newcar-slider {
width: 100%;
--_item-width: 500px;
--_item-right: 40px;
}
@media screen and (max-width: 1080px) {
.c-newcar-slider {
--_item-width: 360px;
--_item-right: 20px;
}
}
@media screen and (max-width: 767px) {
.c-newcar-slider {
--_item-right: 16px;
--_item-width: 84.40111%;
}
}
.c-newcar-slider .c-slider-control {
position: absolute;
right: clamp(10px, -264.6988px + 22.89157vw, 48px);
top: 40px;
}
@media screen and (max-width: 1080px) {
.c-newcar-slider .c-slider-control {
right: var(--outer-padding);
top: auto;
margin-top: calc(16px + var(--slope-1px) * 8);
}
}
@media screen and (max-width: 767px) {
.c-newcar-slider .c-slider-control {
position: relative;
width: 100%;
right: 0;
}
}
.c-newcar-slider__list {
position: relative;
width: calc(var(--_item-width) + var(--_item-right));
}
.c-newcar-slider__list .slick-list {
overflow: visible;
}
.c-newcar-slider__item {
transition: scale 0.2s, opacity 0.2s;
padding-right: var(--_item-right);
}
@media screen and (max-width: 767px) {
.c-newcar-slider__item {
width: 100%;
}
}
.c-newcar-slider__item > img, .c-newcar-slider__item > a {
transform-origin: left bottom;
transition: scale 0.2s 0.38s, filter 0.2s;
border-radius: var(--frame-border-radius);
border: 2px solid var(--Root---base-color, #333);
overflow: hidden;
}
@media screen and (max-width: 767px) {
.c-newcar-slider__item > img, .c-newcar-slider__item > a {
transform-origin: bottom left;
}
}
@media (any-hover: hover) {
.c-newcar-slider__item > img:where(:hover), .c-newcar-slider__item > a:where(:hover) {
filter: brightness(0.92);
}
}
@media screen and (min-width: 768px) {
.c-newcar-slider__item:not(.slick-current) > img, .c-newcar-slider__item:not(.slick-current) > a {
scale: 0.8;
transform-origin: left bottom;
}
}
@media screen and (max-width: 767px) {
.c-newcar-slider__item:not(.slick-current) > img, .c-newcar-slider__item:not(.slick-current) > a {
scale: 1;
}
}
.c-newcar-slider__item.slick-current.slick-active.is-moving > img, .c-newcar-slider__item.slick-current.slick-active.is-moving > a, .c-newcar-slider__item.slick-current.slick-active > img, .c-newcar-slider__item.slick-current.slick-active > a, .c-newcar-slider__item.slick-cloned.is-moving.last-to-first > img, .c-newcar-slider__item.slick-cloned.is-moving.last-to-first > a, .c-newcar-slider__item.slick-cloned.is-moving.first-to-last > img, .c-newcar-slider__item.slick-cloned.is-moving.first-to-last > a {
scale: 1;
}
.c-newcar-slider__item a {
display: block;
}
.c-newcar-slider__item a img {
background: #fff;
}
/* ============================================================= *
Table
* ============================================================= */
/* scroll container
=============================== */
.c-table-container {
width: 100%;
overflow: auto;
position: relative;
background-color: #fff;
}
@media screen and (max-width: 767px) {
.c-table-container {
overflow-x: scroll;
background-color: #fff;
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, 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, 0.2)) right/20px 100%;
background-repeat: no-repeat;
background-attachment: local, scroll, local, scroll;
}
}
.c-table-container + .c-table-container {
margin-top: 5rem;
}
@media screen and (max-width: 767px) {
.c-table-container > * {
min-width: 60em;
}
}
.c-table-container > ._stretch {
min-width: auto;
}
.c-table-container:has(._stretch) {
width: 100%;
}
/* data table
=============================== */
.c-data-table {
width: 100%;
border-top: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
border-collapse: collapse;
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1.8;
font-family: var(--number-font-family);
}
.c-data-table:not(:first-child) {
margin-top: 40px;
}
.c-data-table._fixed {
table-layout: fixed;
}
.c-data-table th,
.c-data-table td {
text-align: center;
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 1.25em 0.625em;
}
@media screen and (max-width: 767px) {
.c-data-table th,
.c-data-table td {
padding: 0.625em 0.1875em;
}
}
.c-data-table thead th {
background: rgba(0, 0, 0, 0.06);
}
.c-data-table thead th:not([colspan]) {
width: 16.11111%;
}
.c-data-table thead th[colspan] {
width: 19.90741%;
}
.c-data-table tbody th {
background: rgba(0, 0, 0, 0.06);
}
.c-data-table tbody td {
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.c-data-table tbody td._empty {
position: relative;
}
.c-data-table tbody td._empty::before {
content: "\0030fc";
}
.c-data-table tbody small {
display: block;
font-size: calc(11px + var(--slope-1px) * 1);
margin-block-start: var(--leading-trim);
}
/* profile table
=============================== */
.c-profile-table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid var(--border-color);
line-height: 1.65;
}
@media screen and (max-width: 767px) {
.c-profile-table {
display: block;
}
.c-profile-table:is(tbody, th, td) {
display: contents;
}
.c-profile-table tr {
display: grid;
grid-template-columns: 100%;
gap: 20px;
padding-block: calc(24px + var(--slope-1px) * 8);
border-bottom: 1px solid var(--border-color);
}
}
.c-profile-table th,
.c-profile-table td {
padding-block: calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 8));
border-bottom: 1px solid var(--border-color);
}
@media screen and (max-width: 767px) {
.c-profile-table th,
.c-profile-table td {
display: block;
margin-block: var(--leading-trim);
padding-block: 0;
border-bottom: 0;
}
}
.c-profile-table th {
min-width: 9.375em;
font-weight: 700;
text-align: left;
}
@media screen and (max-width: 767px) {
.c-profile-table th {
text-align: left;
}
}
@media screen and (min-width: 768px) {
.c-profile-table td {
padding-left: 16px;
}
}
/* ============================================================= *
Text
* ============================================================= */
/* lead
=============================== */
.c-lead {
text-align: left;
}
.c-lead._center {
text-align: center;
}
.c-lead > p {
margin-block: var(--leading-trim);
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-lead > p em {
color: var(--primary);
font-size: calc(18px + var(--slope-1px) * 6);
font-weight: 700;
}
.c-lead > p + p {
margin-top: 1em;
}
/* text
=============================== */
.c-text {
text-align: left;
font-size: calc(15px + var(--slope-1px) * 1);
margin-top: var(--leading-trim);
display: block;
}
.c-text._center {
text-align: center;
}
.c-text em {
font-weight: 700;
}
/* notes
=============================== */
.c-notes {
font-size: 12px;
}
.c-notes > li {
padding-left: 1em;
text-indent: -1em;
}
.c-notes > li + li {
margin-top: .25em;
}
.c-notes > li:before {
content: "\203b";
}
.c-notes > li._strong {
font-weight: 700;
}
.c-notes > li._parentheses {
padding-left: 3em;
text-indent: -3em;
}
.c-notes > li._parentheses:before {
content: "\FF08\203B\FF09";
}
.c-notes._dot > li:before {
content: "\30fb";
}
.c-notes._square > li:before {
content: "\25a0";
}
.c-notes._star > li:before {
content: "*";
padding-inline: .25em;
}
.c-notes > li._dot:before {
content: "\30fb";
}
.c-notes > li._square:before {
content: "\25a0";
}
.c-notes > li._star:before {
content: "*";
padding-inline: .25em;
}
/* ============================================================= *
Title
* ============================================================= */
/* c-page-category
============================== */
.c-page-category {
display: block;
font-family: var(--en-font-family);
color: var(--dark-color);
font-size: calc(12px + var(--slope-1px) * 4);
position: relative;
text-transform: uppercase;
font-weight: 700;
line-height: 1.2;
margin-block: var(--leading-trim) calc(var(--leading-trim) - .275em + calc(16px + var(--slope-1px) * 8));
}
/* c-page-title
============================== */
.c-page-title {
font-family: var(--en-font-family);
display: block;
font-size: calc(28px + var(--slope-1px) * 12);
font-weight: 700;
line-height: 1.2;
margin-block: var(--leading-trim);
}
/* c-section-title
============================== */
.c-section-title {
font-family: var(--en-font-family);
font-size: calc(24px + var(--slope-1px) * 8);
position: relative;
line-height: 1.3;
font-weight: 700;
margin-block: var(--leading-trim);
}
.c-section-title span {
display: block;
}
.c-section-title:has(> wbr) {
word-break: keep-all;
overflow-wrap: anywhere;
}
@media screen and (max-width: 767px) {
.c-section-title small {
display: block;
font-size: calc(16px + var(--slope-1px) * 6);
}
}
/* c-sub-title
* terms
=============================== */
.c-sub-title {
--_dots-size: 10px;
display: block;
padding-left: calc(var(--_dots-size) + 5px);
color: var(--base-color);
font-size: calc(18px + var(--slope-1px) * 2);
font-family: var(--en-font-family);
font-weight: 700;
line-height: 1.65;
margin-block: var(--leading-trim);
position: relative;
}
@media screen and (max-width: 767px) {
.c-sub-title {
--_dots-size: 8px;
}
}
.c-sub-title ._en {
font-family: var(--en-font-family);
}
.c-sub-title em {
font-weight: 700;
}
.c-sub-title::before {
content: "";
width: var(--_dots-size);
height: var(--_dots-size);
border-radius: 50%;
background: var(--dark-color);
position: absolute;
display: block;
left: 0;
top: .5em;
margin-block: auto;
}
/* detailed title
* terms
=============================== */
.c-detailed-title {
font-family: var(--en-font-family);
font-weight: 700;
font-size: calc(18px + var(--slope-1px) * 6);
}
.c-detailed-title span {
display: block;
}
/* ============================================================= *
Topics
* ============================================================= */
/* c-topics
============================== */
.c-topics {
display: flex;
flex-direction: column;
margin-inline: auto;
row-gap: 16px;
max-height: 305px;
overflow-y: auto;
width: 100%;
overflow-x: hidden;
}
@media screen and (max-width: 767px) {
.c-topics {
row-gap: 1em;
grid-template-columns: 100%;
max-width: 100%;
width: 100%;
}
}
.c-topics__head {
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
}
.c-topics-title {
font-size: calc(21px + var(--slope-1px) * 9);
font-weight: 700;
}
.topics-link {
display: flex;
flex-direction: column;
gap: calc(16px + var(--slope-1px) * 8);
color: var(--base-color);
text-decoration: none;
position: relative;
padding-bottom: calc(32px + var(--slope-1px) * 8);
}
.topics-link__category {
--_dots-size: calc(6px + var(--slope-1px) * 2);
font-size: calc(12px + var(--slope-1px) * 2);
position: relative;
display: block;
padding-left: calc(var(--_dots-size) + 5px);
display: flex;
align-items: center;
gap: calc(10px + var(--slope-1px) * 2);
width: 100%;
}
.topics-link__category::before {
content: "";
position: absolute;
top: calc(1lh/2 - var(--_dots-size)/2);
left: 0;
display: block;
width: var(--_dots-size);
height: var(--_dots-size);
border-radius: 50%;
background: var(--dark-color);
margin-block: auto;
}
.topics-link__category::after {
content: "";
position: relative;
display: block;
order: 2;
flex-grow: 1;
flex-shrink: 1;
width: -moz-fit-content;
width: fit-content;
height: 1px;
background: var(--border-color);
}
.topics-link .topics-link__head, .topics-link .topics-link__body {
transition: color .3s;
}
.topics-link:hover .topics-link__head, .topics-link:hover .topics-link__body {
color: var(--dark-color);
}
.topics-link__head {
position: relative;
text-align: center;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20px;
margin-block: var(--leading-trim);
}
.topics-link__body {
font-size: calc(15px + var(--slope-1px) * 1);
margin-block: var(--leading-trim);
}
/* c-topics-list
============================== */
.c-topics-list {
display: block;
padding-right: calc(24px + var(--slope-1px) * 24);
}
.c-topics-list__item {
display: block;
}
/* =============================================================
blog
* ============================================================= */
/* c-blog-card
============================== */
.c-blog-card {
display: flex;
flex-direction: column;
border-radius: var(--frame-border-radius);
height: 100%;
overflow: hidden;
background: #fff;
text-decoration: none;
}
.c-blog-card._border {
border: 2px solid var(--base-color);
}
.c-blog-card__image {
flex-grow: 1;
width: 100%;
aspect-ratio: 312 / 200;
overflow: hidden;
position: relative;
z-index: 0;
}
.c-blog-card__image img {
width: 100% !important;
height: 100% !important;
-o-object-fit: cover;
object-fit: cover;
transition: scale .4s ease-out 0s;
will-change: scale;
position: relative;
z-index: 0;
}
@media screen and (min-width: 768px) {
.c-blog-card:hover .c-blog-card__image img {
scale: 1.05;
}
}
.c-blog-card__contents {
padding: calc(16px + var(--slope-1px) * 16) calc(12px + var(--slope-1px) * 12);
position: relative;
flex-grow: 1;
}
.c-blog-card__shop {
line-height: 1;
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
bottom: 0;
height: 25px;
padding: 2px 12px 0 12px;
border-radius: 5px 0 0 0;
margin-inline: auto;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
justify-content: flex-end;
align-items: center;
z-index: 1;
color: var(--Root---base-color, #333);
font-size: 12px;
font-style: normal;
font-weight: 700;
}
.c-blog-card__date {
display: block;
margin-top: calc(var(--leading-trim) + calc(16px + var(--slope-1px) * 8));
margin-bottom: var(--leading-trim);
text-overflow: ellipsis;
color: var(--gray);
font-family: "Josefin Sans";
font-size: 14px;
font-weight: 500;
line-height: 1.65;
}
.c-blog-card__title {
display: block;
font-size: calc(15px + var(--slope-1px) * 3);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-block-start: var(--leading-trim);
margin-block-end: calc(calc(16px + var(--slope-1px) * 8) + var(--leading-trim));
}
.c-blog-card__text {
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
min-height: 2lh;
margin-top: calc(calc(16px + var(--slope-1px) * 8) + var(--leading-trim));
font-size: calc(12px + var(--slope-1px) * 4);
}
/* c-blog-paging
============================== */
.c-blog-paging {
width: 100%;
display: flex;
gap: 1em;
justify-content: flex-end;
font-size: calc(15px + var(--slope-1px) * 1);
margin-block: calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 13)) calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 8));
font-weight: 500;
}
.c-blog-paging__nav {
display: flex;
align-items: center;
gap: .5em;
}
.c-blog-paging__nav > li {
display: flex;
align-items: center;
gap: .5em;
}
.c-blog-paging__nav > li a {
color: var(--base-color);
text-decoration: underline;
-webkit-text-decoration-color: currentColor;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
transition: -webkit-text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease, -webkit-text-decoration-color 0.1s ease;
text-underline-offset: 0.25em;
}
.c-blog-paging__nav > li a:hover {
-webkit-text-decoration-color: transparent;
text-decoration-color: transparent;
}
.c-blog-paging__nav > li + li:before {
content: "\ff5c";
}
/* c-blog
=============================== */
.c-blog__control {
margin-top: 2em;
margin-bottom: calc(30px + var(--slope-1px) * 30);
text-align: center;
display: flex;
justify-content: center;
}
.c-blog__control:empty {
margin: 0;
}
.c-blog__control br {
display: none;
}
.c-blog__control form {
width: 100%;
display: flex;
align-items: center;
}
@media screen and (max-width: 414px) {
.c-blog__control form {
flex-direction: column;
}
.c-blog__control form > * {
width: 100%;
}
}
.c-blog__control select {
height: 80px;
border-radius: var(--base-border-radius);
padding: .5em 1em;
border: 1px solid var(--border-color);
background: #fff;
display: block;
flex-grow: 1;
position: relative;
}
.c-blog__control select option:first-child {
color: #e0dad1;
}
.c-blog__control input {
padding: 2em 1em 0;
border: 0;
background: url(../img/icon/search.svg) center 1em no-repeat var(--point-color);
background-size: 1.5em;
color: #FFF;
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
vertical-align: middle;
border-radius: var(--base-border-radius);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 120px;
height: 80px;
margin-left: 0.5em;
cursor: pointer;
transition: all 0.3s ease-out;
}
.c-blog__control input:hover {
opacity: .7;
}
@media screen and (max-width: 414px) {
.c-blog__control input {
width: 100%;
flex-direction: row;
height: auto;
padding: 1em;
margin: 5px 0 0;
background-position: 1em center;
}
}
/* information blog
============================== */
.blog__paging {
text-align: right;
margin-block: var(--leading-trim);
display: block;
}
.blog__paging + article {
margin-top: calc(24px + var(--slope-1px) * 8);
}
article + .blog__paging {
margin-top: calc(24px + var(--slope-1px) * 8);
}
.p-information-contents .c-blog-container__td article + article {
margin-block-start: calc(24px + var(--slope-1px) * 16);
}
.c-blog-container {
display: block;
width: 100%;
}
.c-blog-container .c-blog-container__table {
width: 100%;
}
.c-blog-container .c-blog-container__td > article {
border-radius: var(--frame-border-radius);
border: 2px solid var(--base-color);
padding: calc(32px + var(--slope-1px) * 16) calc(20px + var(--slope-1px) * 20);
}
.c-blog-container .blog__header {
padding-block-end: calc(20px + var(--slope-1px) * 4);
margin-block-end: calc(24px + var(--slope-1px) * 8);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: .5em;
scroll-margin-top: calc(var(--header-height) + var(--inner-padding));
border-bottom: 1px solid var(--Root---border-color, #BEBEBE);
}
.c-blog-container .blog__title {
font-size: calc(16px + var(--slope-1px) * 2);
font-weight: bold;
margin-block: var(--leading-trim);
line-height: 1.65;
}
@media screen and (max-width: 767px) {
.c-blog-container .blog__title {
line-height: 1.4;
}
}
.c-blog-container .blog__date {
color: var(--gray-900, #706E6E);
font-family: var(--en-font-family);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.65;
margin-left: auto;
margin-block: var(--leading-trim);
padding-top: .2em;
}
@media screen and (max-width: 767px) {
.c-blog-container .blog__date {
margin-left: 0;
}
}
.c-blog-container .blog__body {
word-break: break-all;
display: block;
margin-block: var(--leading-trim);
}
.c-section._bg .c-blog-container .blog__body {
border: 0;
}
.c-blog-container .blog__body table {
width: 100%;
}
.c-blog-container .blog__body img {
display: inline;
}
/* =============================================================
calendar
* ============================================================= */
/* js-open-information
=========================== */
.js-open-information .--open,
.js-open-information .--close {
display: none;
}
.js-open-information.is-open .--open {
display: block;
}
.js-open-information.is-close .--close {
display: block;
}
.p-calendar-close {
margin-block-start: var(--leading-trim);
margin-block-end: calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 8));
}
@media screen and (max-width: 767px) {
.p-calendar-close > .c-showroom-close {
margin-block: 0;
}
}
/* c-calendar
=========================== */
.p-calendar-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
grid-template-rows: auto 1fr auto;
margin-block-end: calc(40px + var(--slope-1px) * 24);
}
@media screen and (max-width: 1080px) {
.p-calendar-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 767px) {
.p-calendar-grid {
grid-template-columns: 100%;
}
}
.p-calendar-item {
width: 100%;
border-radius: calc(10px + var(--slope-1px) * 10);
border: 2px solid var(--Root---base-color, #333);
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
padding: calc(32px - .2em) calc(20px + var(--slope-1px) * 4) 32px;
gap: 24px 0;
}
.p-calendar-item__head {
display: flex;
align-items: center;
justify-content: center;
margin-block-start: var(--leading-trim);
border-bottom: 1px solid var(--Root---border-color, #BEBEBE);
padding-block-end: calc(var(--leading-trim) + 16px);
}
.p-calendar-item__title {
display: inline-flex;
align-items: baseline;
justify-content: center;
text-align: center;
font-family: var(--en-font-family);
font-size: calc(20px + var(--slope-1px) * 2);
font-weight: 600;
line-height: 170%;
margin-block-end: var(--leading-trim);
}
.p-calendar-item__month {
font-size: 32px;
font-weight: bold;
text-align: center;
font-family: var(--title-font-family);
line-height: 1;
}
.p-calendar-item table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.p-calendar-item table .cal_sat {
color: #5091EC;
}
.p-calendar-item table .cal_holiday,
.p-calendar-item table .cal_sun {
color: var(--red);
}
.p-calendar-item table th {
text-align: center;
vertical-align: middle;
padding-bottom: 1.06667em;
font-size: 15px;
font-family: var(--title-font-family);
}
.p-calendar-item table th > div {
padding: 0.26667em 0 0.33333em;
line-height: .7;
}
.p-calendar-item table td {
text-align: center;
vertical-align: middle;
padding: 2.5px;
position: relative;
}
.p-calendar-item table td:before {
content: "";
display: block;
position: static;
width: 100%;
padding-top: 100%;
height: 0;
}
.p-calendar-item table td > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle, var(--_bg-color) calc(126.31579% / 2 - 1px), transparent calc(126.31579% / 2));
font-family: var(--en-font-family);
font-size: calc(15px + var(--slope-1px) * 1);
padding-top: .2em;
}
.p-calendar-item table td .cal_close01 {
color: #fff;
--_bg-color: var(--base-color);
}
.p-calendar-item__foot {
margin-top: calc(20px + var(--slope-1px) * 10);
}
.p-calendar-item__notes {
font-size: 14px;
display: block;
margin-block: var(--leading-trim);
}
.p-calendar-item__notes .cal_close01 {
color: var(--base-color);
}
+ .p-calendar-item__close {
margin-top: 20px;
}
/* ============================================================= *
Maintenance service / ciao mamoru banner
* ============================================================= */
/* service
=============================== */
.c-maintenance-service {
display: grid;
grid-template-columns: 528px;
place-content: center;
gap: 40px 24px;
margin-block: var(--leading-trim);
}
@media screen and (max-width: 767px) {
.c-maintenance-service {
grid-template-columns: 100%;
}
}
.c-maintenance-service:has(> .c-maintenance-service__item:nth-child(2)) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 767px) {
.c-maintenance-service:has(> .c-maintenance-service__item:nth-child(2)) {
grid-template-columns: 100%;
}
}
/* c-maintenance-service-block
=============================== */
.c-maintenance-service-block {
display: block;
text-decoration: none;
}
.c-maintenance-service-block__lead {
margin-block-end: calc(var(--leading-trim) + 16px);
text-align: center;
display: block;
font-size: 14px;
word-break: keep-all;
overflow-wrap: anywhere;
font-family: var(--base-font-family);
font-weight: 500;
}
.c-maintenance-service-block__lead span:before {
content: "\25cf";
}
.c-maintenance-service-block__lead span._mamoru::before {
color: #8dc21f;
}
.c-maintenance-service-block__lead span._ciao::before {
color: #0068b7;
}
.c-maintenance-service-block__banner {
overflow: hidden;
background: var(---white, #FFF);
border: 1px solid var(--border-color);
border-radius: var(--base-border-radius);
transition: opacity .2s;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 493/169;
}
@media screen and (max-width: 767px) {
.c-maintenance-service-block__banner {
aspect-ratio: 343/118;
}
}
.c-maintenance-service-block__banner img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-maintenance-service-block__banner:hover {
opacity: .7;
}
.c-maintenance-service-block__desc {
display: block;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
margin-block-start: calc(var(--leading-trim) + 16px);
}
/* c-checkpoint-service
============================== */
.c-checkpoint-service {
margin-top: calc(64px + var(--slope-1px) * 36);
padding-top: calc(48px + var(--slope-1px) * 32);
border-top: 1px solid var(--border-color);
}
/* ============================================================= *
inspection
* ============================================================= */
/* c-inspection-description
============================== */
.c-inspection-description {
border-radius: var(--frame-border-radius);
border: 2px solid var(--border-color);
background: var(--white);
padding: 24px calc(20px + var(--slope-1px) * 12);
gap: 16px 16px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
font-size: calc(14px + var(--slope-1px) * 2);
}
@media screen and (max-width: 767px) {
.c-inspection-description {
grid-template-columns: 1fr;
gap: 32px;
}
}
.c-inspection-description:not(:first-child) {
margin-top: calc(20px + var(--slope-1px) * 20);
}
.c-inspection-description__item {
display: contents;
}
@media screen and (max-width: 767px) {
.c-inspection-description__item {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
}
.c-inspection-description__head {
margin-block: var(--leading-trim);
font-weight: 500;
}
.c-inspection-description__body {
border-left: 1px solid #D9D9D9;
padding-left: 16px;
min-height: 27px;
margin-block: 8px;
display: flex;
flex-direction: column;
justify-content: center;
font-feature-settings: normal;
}
.c-inspection-description__body > p {
margin-block: var(--leading-trim);
}
@media screen and (max-width: 767px) {
.c-inspection-description__body {
padding-top: 14px;
border-top: 1px solid var(--border-color);
min-height: 0;
padding-left: 0;
border-left: 0;
margin-block: 0;
}
}
.p-inspction-description__list > li {
padding-left: 1em;
text-indent: -1em;
}
.p-inspction-description__list > li:before {
content: "\0030fb";
}
/* c-inspection-needs
============================== */
.c-inspection-needs {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
}
@media screen and (max-width: 767px) {
.c-inspection-needs {
flex-direction: column;
gap: 12px;
}
}
@media screen and (min-width: 1081px) {
.c-inspection-needs._x3\:not-middle {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 16px 24px;
}
}
.c-inspection-needs > li {
display: flex;
align-items: center;
gap: 3px;
margin-block: var(--leading-trim);
}
.c-inspection-needs > li:before {
content: "";
display: block;
width: 15px;
height: 15px;
aspect-ratio: 1/1;
background: var(--dark-color);
-webkit-mask: var(--icon-check) 50% 50%/contain no-repeat;
mask: var(--icon-check) 50% 50%/contain no-repeat;
}
/* c-inspection-checkpoint
============================== */
.c-inspection-checkpoint {
display: grid;
align-items: center;
grid-template-columns: repeat(2, 1fr);
gap: 20px 40px;
margin-top: calc(40px + var(--slope-1px) * 20);
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoint {
grid-template-columns: 1fr;
}
}
.c-inspection-checkpoint-figure {
position: relative;
padding-bottom: 1.52284%;
}
.c-inspection-checkpoint-figure__image {
position: absolute;
top: 50%;
left: 6.90476%;
width: 80.76923%;
margin: auto;
transform: translate3d(0%, -50%, 0px);
}
.c-inspection-checkpoint-figure__pointer {
position: relative;
z-index: 1;
}
.c-inspection-checkpoint-figure__pointer svg path:not([fill]) {
fill: unset;
}
.c-inspection-checkpoint-figure__pointer :is(img, svg) {
width: 100%;
height: auto;
}
.c-inspection-checkpoint-nav {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(254px, 1fr));
gap: 12px;
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoint-nav {
grid-template-columns: repeat(2, 1fr);
}
}
.c-inspection-checkpoint-button {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
text-align: center;
gap: calc(5px + var(--slope-1px) * 5);
height: 100%;
padding-inline: calc(12px + var(--slope-1px) * 8) calc(7px + var(--slope-1px) * 1);
border: 2px solid var(--base-color);
border-radius: var(--base-border-radius);
height: 53px;
color: var(--base-color);
text-decoration: none;
letter-spacing: 0;
font-size: calc(15px + var(--slope-1px) * 1);
transition: color .2s, background .2s;
font-weight: 500;
}
.c-inspection-checkpoint-button:hover {
background: var(--base-color);
color: #fff;
}
.c-inspection-checkpoint-button:hover ._number {
color: #fff;
}
.c-inspection-checkpoint-button > span {
word-break: keep-all;
overflow-wrap: anywhere;
line-height: 1.2;
font-weight: 700;
flex-grow: 1;
}
.c-inspection-checkpoint-button ._number {
transition: color .2s;
color: var(--dark-color);
font-family: var(--en-font-family);
font-size: calc(17px + var(--slope-1px) * 1);
font-weight: 700;
margin-block: var(--leading-trim);
display: block;
line-height: .8;
padding-top: .3em;
width: -moz-fit-content;
width: fit-content;
}
.c-inspection-checkpoint-button ._text {
text-align: left;
font-weight: 700;
}
.c-inspection-checkpoint-button:after {
content: "";
display: block;
width: calc(14px + var(--slope-1px) * 4);
aspect-ratio: 1/1;
flex-shrink: 0;
background: currentColor;
-webkit-mask: var(--icon-plus) 50% 50%/contain no-repeat;
mask: var(--icon-plus) 50% 50%/contain no-repeat;
align-self: flex-end;
margin-bottom: calc(6px + var(--slope-1px) * 1);
}
/* c-inspection-check
============================== */
.c-inspection-check {
width: var(--contents-width-px);
max-width: 100%;
margin-inline: auto;
background: #fff;
border-radius: var(--base-border-radius);
}
.c-inspection-check__head {
margin-bottom: calc(var(--leading-trim) + calc(16px + var(--slope-1px) * 8));
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
display: grid;
grid-template-columns: 1fr auto;
padding-inline: clamp(0px, -11.47959px + 3.06122vw, 12px);
}
.c-inspection-check-title {
font-size: calc(18px + var(--slope-1px) * 2);
font-weight: 700;
}
.c-inspection-check-title ._number {
font-family: var(--en-font-family);
margin-block: var(--leading-trim);
display: inline-block;
line-height: .8;
padding-top: .3em;
width: -moz-fit-content;
width: fit-content;
}
.c-inspection-check-title ._text {
text-align: left;
font-weight: 700;
}
.c-inspection-check__body {
display: grid;
grid-template-columns: 100%;
padding-inline: clamp(0px, -11.47959px + 3.06122vw, 12px);
}
.c-inspection-check__list {
display: grid;
grid-template-columns: repeat(2, minmax(auto, 1fr));
gap: 16px 20px;
font-size: calc(15px + var(--slope-1px) * 1);
align-items: flex-start;
}
@media screen and (max-width: 767px) {
.c-inspection-check__list {
grid-template-columns: 100%;
}
}
.c-inspection-check__list > li {
--_dots-size: 8px;
font-size: calc(15px + var(--slope-1px) * 1);
position: relative;
display: block;
padding-left: calc(var(--_dots-size) + 4px);
display: flex;
align-items: center;
width: 100%;
}
.c-inspection-check__list > li::before {
content: "";
position: absolute;
top: calc(1lh/2 - var(--_dots-size)/2);
left: 0;
display: block;
width: var(--_dots-size);
height: var(--_dots-size);
border-radius: 50%;
background: var(--dark-color);
margin-block: auto;
}
/* c-maintenance-table
============================== */
.c-maintenance-table {
margin-block: calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 8)) calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 8));
}
/* ============================================================= *
nearby
* ============================================================= */
/* c-nearby-result
=============================== */
.c-showroom-nearby {
width: 100%;
display: none;
}
.c-showroom-nearby__button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-inline: auto;
}
.c-nearby-result {
display: none;
}
.c-nearby-result__list {
display: none;
margin-top: calc(40px + var(--slope-1px) * 24);
}
.c-nearby-result__foot {
margin-top: calc(24px + var(--slope-1px) * 8);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: center;
}
.c-nearby-result .js-nearby-hide.c-button > span:after {
rotate: -90deg;
}
.c-nearby-result__loading {
width: 100%;
padding: 1em;
text-align: center;
display: block;
}
.c-nearby-result__loading:before {
content: "\691C\7D22\4E2D...";
color: var(--base-color);
}
.c-nearby-result__head {
font-size: 12px;
display: block;
margin-block: var(--leading-trim) calc(var(--leading-trim) + 16px);
}
.c-showroom-nearby-search__result {
display: none;
}
/* c-showroom-nearby-item
============================== */
.c-showroom-nearby-item {
padding: calc(20px + var(--slope-1px) * 28);
border-radius: var(--frame-border-radius);
background: var(--white);
width: 100%;
color: var(--base-color);
container-type: inline-size;
container-name: nearby;
font-size: calc(14px + var(--slope-1px) * 4);
}
.c-showroom-nearby-item:first-child {
margin-bottom: calc(16px + var(--slope-1px) * 8);
display: block;
margin-block: var(--leading-trim);
}
.c-showroom-nearby-item:not(:first-child) {
margin-top: calc(8px + var(--slope-1px) * 8);
}
.c-showroom-nearby-item__head {
text-decoration: none;
background: var(--bg-color);
color: var(--base-color);
font-size: calc(20px + var(--slope-1px) * 4);
padding: calc(var(--leading-trim) + 24px) calc(16px + var(--slope-1px) * 16);
border-radius: var(--base-border-radius);
display: flex;
align-items: center;
transition: background .3s ease-out;
position: relative;
}
.c-showroom-nearby-item__head:hover {
background: var(--border-color);
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__head {
flex-wrap: wrap;
}
}
.c-showroom-nearby-item__title {
flex-grow: 1;
justify-content: space-between;
display: flex;
align-items: center;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__title {
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: .5em;
}
}
.c-showroom-nearby-item__rank {
font-size: 24px;
font-style: normal;
margin-right: .75em;
font-family: var(--en-font-family);
margin-block-end: -.25em;
}
.c-showroom-nearby-item__name {
font-size: calc(18px + var(--slope-1px) * 2);
color: var(--dark-color);
margin-right: auto;
font-weight: 700;
flex-grow: 1;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: solid;
text-decoration-style: solid;
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
text-decoration-thickness: 1px;
text-underline-offset: 24%;
text-underline-position: from-font;
transition: -webkit-text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease;
transition: text-decoration-color 0.1s ease, -webkit-text-decoration-color 0.1s ease;
-webkit-text-decoration-color: currentColor;
text-decoration-color: currentColor;
}
.c-showroom-nearby-item__name:hover {
-webkit-text-decoration-color: transparent;
text-decoration-color: transparent;
}
.c-showroom-nearby-item__head:hover .c-showroom-nearby-item__name {
text-decoration: none;
}
.c-showroom-nearby-item__distance {
font-size: calc(15px + var(--slope-1px) * 1);
font-family: var(--en-font-family);
display: block;
margin-block-end: -.25em;
}
.c-showroom-nearby-item__distance:after {
content: 'km';
}
.c-showroom-nearby-item__profile {
flex-shrink: 0;
}
.c-showroom-nearby-item__body {
margin-block-start: calc(15px + var(--slope-1px) * 17);
display: flex;
flex-wrap: wrap;
gap: calc(15px + var(--slope-1px) * 5) 15px;
justify-content: space-between;
}
.c-showroom-nearby-item__close {
display: flex;
flex-direction: column;
gap: calc(10px + var(--slope-1px) * 10);
font-weight: 500;
}
.c-showroom-nearby-item__close li {
position: relative;
padding-left: calc(10px + 5px);
margin-block: var(--leading-trim);
display: block;
letter-spacing: 0;
font-feature-settings: normal;
font-size: calc(16px + var(--slope-1px) * 2);
}
.c-showroom-nearby-item__close li::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--dark-color);
position: absolute;
display: block;
left: 0;
top: 0;
bottom: 0;
margin-block: auto;
}
.c-showroom-nearby-item-tel {
font-family: var(--en-font-family);
font-size: calc(20px + var(--slope-1px) * 12);
display: flex;
align-items: center;
color: var(--base-color);
text-decoration: none;
pointer-events: none;
position: relative;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item-tel {
justify-content: center;
border: 2px solid;
background: var(--key-color);
pointer-events: all;
/* Layout */
font-size: calc(15px + var(--slope-1px) * 1);
font-weight: 700;
width: 100%;
max-width: 19.33333em;
padding-block: calc(var(--leading-trim) + 16px);
border-radius: var(--base-border-radius);
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
gap: calc(5px + var(--slope-1px) * 5);
--_arrow-size: 14px;
padding-inline: .5em 1em;
}
.c-showroom-nearby-item-tel svg {
width: 18px;
height: 18px;
aspect-ratio: 1/1;
fill: currentColor;
}
.c-showroom-nearby-item-tel::after {
content: "";
position: absolute;
right: calc(7px + var(--slope-1px) * 1);
bottom: calc(6px + var(--slope-1px) * 1);
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
border-radius: 100%;
transition: background .2s;
-webkit-mask: var(--icon-arrow) 50% 50%/contain no-repeat;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
background: currentColor;
transition: translate 0.3s var(--animation);
rotate: -45deg;
}
}
@media screen and (max-width: 560px) {
.c-showroom-nearby-item-tel {
width: 100%;
max-width: 100%;
}
}
@media screen and (min-width: 768px) {
.c-showroom-nearby-item-tel__icon {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-right: 5px;
flex-shrink: 0;
width: 24px;
height: 30px;
color: var(--dark-color);
}
.c-showroom-nearby-item-tel__icon svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
fill: currentColor;
}
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item-tel__icon {
display: none;
}
}
@media screen and (min-width: 768px) {
.c-showroom-nearby-item-tel__number {
display: block;
margin-block: var(--leading-trim);
font-weight: 600;
}
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item-tel__number {
display: none;
}
}
@media screen and (min-width: 768px) {
.c-showroom-nearby-item-tel__text {
display: none;
}
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item-tel__text {
display: flex;
justify-content: center;
align-items: center;
gap: calc(5px + var(--slope-1px) * 5);
color: var(--Root---base-color, #333);
text-align: center;
font-size: calc(15px + var(--slope-1px) * 1);
font-family: var(--base-font-family);
font-weight: 700;
}
}
.c-showroom-nearby-item__button {
min-width: 280px;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__button {
min-width: unset;
}
}
@media screen and (max-width: 560px) {
.c-showroom-nearby-item__button {
width: 100%;
}
}
.c-showroom-nearby-item__contact {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px 16px;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__contact {
width: 100%;
flex-direction: column;
}
.c-showroom-nearby-item__contact > * {
width: 100%;
max-width: 100%;
flex: 1 1;
}
}
/* c-showroom-search
=============================== */
.c-showroom-search {
border-radius: var(--frame-border-radius);
background: var(--bg-color);
padding: calc(32px + var(--slope-1px) * 24) calc(20px + var(--slope-1px) * 20) calc(32px + var(--slope-1px) * 16);
}
.c-showroom-search._no-bg {
padding: 0;
background: transparent;
}
.c-showroom-search__head {
display: flex;
align-items: center;
margin-bottom: calc(24px + var(--slope-1px) * 8);
justify-content: flex-start;
gap: 24px 32px;
flex-wrap: wrap;
}
.c-showroom-search__form {
position: relative;
width: 100%;
display: flex;
height: 52px;
}
.c-showroom-search__input {
flex-grow: 1;
}
.c-showroom-search__input input {
border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
border: 2px solid var(--border-color);
border-right: 0;
background: #fff;
display: flex;
align-items: center;
width: 100%;
height: 52px;
padding-inline: 20px 5px;
font-weight: 400;
line-height: 28px;
outline: none;
}
@media screen and (max-width: 1080px) {
.c-showroom-search__input input {
padding-inline: 15px 5px;
}
}
@media screen and (max-width: 560px) {
.c-showroom-search__input input::-moz-placeholder {
font-size: 15px;
}
.c-showroom-search__input input:-ms-input-placeholder {
font-size: 15px;
}
.c-showroom-search__input input::placeholder {
font-size: 15px;
}
}
.c-showroom-search__button {
overflow: hidden;
flex-shrink: 0;
border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
min-width: 0%;
}
.c-showroom-search__button button {
position: relative;
background: var(--base-color);
color: var(--white);
height: 100%;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
margin: 0;
outline: none;
cursor: pointer;
transition: filter .2s ease-out;
gap: 5px;
line-height: 1;
}
@media screen and (max-width: 1080px) {
.c-showroom-search__button button {
font-size: 12px;
flex-direction: column;
width: 72px;
}
}
@media screen and (max-width: 767px) {
.c-showroom-search__button button {
padding-block: 8px 12px;
}
}
@media (any-hover: hover) {
.c-showroom-search__button button:hover {
filter: brightness(0.8);
}
}
.c-showroom-search__button button > i {
display: flex;
align-items: center;
justify-content: center;
width: calc(14px + var(--slope-1px) * 4);
height: calc(14px + var(--slope-1px) * 4);
min-width: 0%;
flex-shrink: 0;
}
@media screen and (max-width: 1080px) {
.c-showroom-search__button button > i {
width: 14px;
height: 14px;
}
}
.c-showroom-search__button button > i svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
/* nearby
=============================== */
.c-showroom-nearby {
text-align: center;
}
.c-showroom-nearby__list {
text-align: left;
display: none;
margin-top: calc(26px + var(--slope-1px) * 6);
}
.c-showroom-nearby__button {
max-width: 290px;
margin: calc(20px + var(--slope-1px) * 10) auto 0;
}
.c-showroom-nearby__button > button {
margin-inline: auto;
}
.c-showroom-nearby .nearby_loading {
display: block;
padding-top: 2em;
}
/* ============================================================= *
newcar
* ============================================================= */
/* ============================================================= *
reservation
* ============================================================= */
/* c-reservation-block
============================== */
.c-reservation-block {
padding: calc(48px + var(--slope-1px) * 32) calc(16px + var(--slope-1px) * 16) calc(32px + var(--slope-1px) * 16);
border-radius: var(--frame-border-radius);
background: var(--point-color);
position: relative;
}
.c-reservation-block:not(:first-child) {
margin-top: calc(48px + var(--slope-1px) * 8);
}
.c-reservation-block-title {
word-break: keep-all;
overflow-wrap: anywhere;
font-feature-settings: 'halt' on;
font-style: normal;
font-weight: 700;
line-height: 130%;
/* 33.8px */
z-index: 1;
position: relative;
}
.c-reservation-block-title::before {
content: attr(data-en);
/* 70px */
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
display: block;
color: var(--Root---key-light-color, #d2f7fd);
font-weight: 700;
font-style: normal;
font-size: calc(40px + var(--slope-1px) * 30);
font-family: var(--en-font-family);
line-height: 100%;
transform: translateY(calc(-.375lh - 5px));
margin-inline: auto;
}
.c-reservation-block__head {
font-size: calc(17px + var(--slope-1px) * 9);
text-align: center;
margin-block: 0 calc(calc(28px + var(--slope-1px) * 2) + var(--leading-trim));
}
.c-reservation-block__body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-block: var(--leading-trim);
text-align: center;
}
.c-reservation-block__foot {
width: 100%;
margin-top: calc(23px + var(--slope-1px) * 1);
display: flex;
justify-content: center;
}
/* ============================================================= *
Showroom
* ============================================================= */
/* c-showroom-close
============================== */
.c-showroom-close {
display: inline-flex;
flex-wrap: wrap;
gap: 10px 20px;
margin-block: var(--leading-trim);
}
.c-showroom-close > li {
--_dots-size: 10px;
display: block;
margin-block: var(--leading-trim);
position: relative;
padding-left: calc(var(--_dots-size) + 5px);
letter-spacing: 0;
font-feature-settings: normal;
font-size: calc(16px + var(--slope-1px) * 2);
}
@media screen and (max-width: 767px) {
.c-showroom-close > li {
--_dots-size: 8px;
}
}
.c-showroom-close > li::before {
content: "";
width: var(--_dots-size);
height: var(--_dots-size);
border-radius: 50%;
background: var(--dark-color);
position: absolute;
display: block;
left: 0;
top: 0;
bottom: 0;
margin-block: auto;
}
/* c-showroom-list
============================== */
.c-showroom-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(16px + var(--slope-1px) * 5);
}
@media screen and (max-width: 767px) {
.c-showroom-list {
grid-template-columns: 100%;
}
}
/* c-showroom-card
=============================== */
.c-showroom-card {
border-radius: var(--frame-border-radius);
background: #fff;
border: 2px solid var(--Root---border-color, #BEBEBE);
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
text-decoration: none;
overflow: hidden;
position: relative;
}
.c-showroom-card__link {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.c-showroom-card__image {
width: 100%;
aspect-ratio: 385 / 200;
overflow: hidden;
min-height: 0%;
position: relative;
}
.c-showroom-card__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all .3s;
}
.c-showroom-card__type {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
border-radius: 5px 0 0 0;
background: var(--Root---white, #FFF);
display: flex;
width: 75px;
height: 25px;
padding-top: 2px;
justify-content: center;
align-items: center;
font-size: 12px;
pointer-events: none;
}
[data-type=newcar] .c-showroom-card__type {
color: var(--red);
}
[data-type=usedcar] .c-showroom-card__type {
color: var(--gray);
}
.c-showroom-card:hover .c-showroom-card__image img {
transform: scale(1.03);
}
.c-showroom-card__contents {
padding: 24px 24px calc(24px + var(--slope-1px) * 10);
display: flex;
flex-direction: column;
width: 100%;
flex-grow: 1;
gap: 24px;
}
.c-showroom-card[data-orange="BEST"] .c-showroom-card__image:before,
.c-showroom-card[data-orange="MASTER"] .c-showroom-card__image:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
background-color: #fff;
background-repeat: no-repeat;
background-position: 50% 50%;
max-width: 100%;
height: 2.8125em;
border-top-right-radius: 8px;
z-index: 1;
}
.c-showroom-card[data-orange="BEST"] .c-showroom-card__image:before {
width: 6.875em;
background-image: url(/common-img/logo_orange-BEST.png);
background-size: 70% auto;
}
.c-showroom-card[data-orange="MASTER"] .c-showroom-card__image:before {
width: 6.875em;
background-image: url(/common-img/logo_orange-MASTER.png);
background-size: 80% auto;
}
.c-showroom-card__shop {
font-size: calc(18px + var(--slope-1px) * 2);
font-weight: 700;
margin-block: var(--leading-trim);
transition: -webkit-text-decoration-color .1s ease;
transition: text-decoration-color .1s ease;
transition: text-decoration-color .1s ease, -webkit-text-decoration-color .1s ease;
-webkit-text-decoration-color: currentColor;
text-decoration-color: currentColor;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: solid;
text-decoration-style: solid;
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
text-decoration-thickness: 1px;
text-underline-offset: 25%;
text-underline-position: from-font;
position: relative;
z-index: 0;
}
.c-showroom-card:hover .c-showroom-card__shop {
-webkit-text-decoration-color: transparent;
text-decoration-color: transparent;
}
.c-showroom-card__body {
display: flex;
flex-direction: column;
flex-grow: 1;
margin-block: var(--leading-trim);
font-size: calc(15px + var(--slope-1px) * 1);
}
.c-showroom-card__address {
margin-block: var(--leading-trim);
}
.c-showroom-card__tel {
margin-block: calc(var(--leading-trim) + 16px) var(--leading-trim);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
}
.c-showroom-card__facility {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.c-showroom-card__facility > li {
border-radius: 3px;
background: var(--gray-50, #F1F1F1);
padding: 8px;
aspect-ratio: 1 / 1;
width: 40px;
height: 40px;
}
.c-showroom-card__facility > li :is(svg, img) {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-showroom-card__facility > li svg path {
fill: var(--base-color);
}
.c-showroom-card__facility > li.is-disabled svg path {
fill: #BEBEBE;
}
/* =============================================================
sr
* ============================================================= */
/* c-sr-contact
============================================================= */
.c-sr-contact {
grid-area: side;
position: relative;
z-index: 1;
top: calc(-35px + var(--slope-1px) * -30);
}
@media screen and (min-width: 768px) {
.c-sr-contact._row {
top: -1px;
}
}
@media screen and (max-width: 767px) {
.c-sr-contact._row {
top: 0;
margin-top: 20px;
}
}
@media screen and (max-width: 767px) {
.c-sr-contact {
top: 0;
}
}
.c-sr-contact__inner {
width: 100%;
gap: 25px;
}
@media screen and (min-width: 768px) {
.c-sr-contact__inner {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
padding: clamp(0px, -28.69898px + 7.65306vw, 30px) clamp(0px, -38.26531px + 10.20408vw, 40px);
border-radius: 0 0 8px 8px;
border: 1px solid var(--light-gray);
background: var(--all-white, #FFF);
background: #FFF;
}
._row > .c-sr-contact__inner {
position: relative;
display: grid;
grid-template-columns: 290px auto;
grid-template-areas: "tel data" "nav data";
row-gap: 10px;
-moz-column-gap: 30px;
column-gap: 30px;
align-items: center;
justify-content: center;
}
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
._row > .c-sr-contact__inner {
row-gap: 25px;
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 767px) {
.c-sr-contact__inner {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
}
}
.c-sr-contact__tel {
grid-area: tel;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-family: var(--en-font-family);
gap: 8px;
color: var(--primary);
line-height: 1;
font-weight: 600;
margin-block: var(--leading-trim);
}
@media screen and (max-width: 767px) {
.c-sr-contact__tel {
display: none;
}
}
.c-sr-contact__tel > i {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-style: normal;
position: relative;
}
.c-sr-contact__tel > i svg {
width: calc(25px + var(--slope-1px) * 15);
height: calc(25px + var(--slope-1px) * 15);
}
.c-sr-contact__nav {
grid-area: nav;
display: grid;
gap: 9px;
}
@media screen and (max-width: 767px) {
.c-sr-contact__nav {
grid-template-columns: repeat(2, 1fr);
}
}
.c-sr-contact__nav:not(:has(.c-sr-contact-button[href="#contact"])) {
display: none;
}
._row .c-sr-contact__nav:not(:has(.c-sr-contact-button[href="#contact"])) {
display: grid;
}
._row .c-sr-contact__nav:not(:has(.c-sr-contact-button[href="#contact"])) .c-sr-contact-button {
display: flex;
}
@media screen and (max-width: 767px) {
.c-sr-contact__nav:not(:has(.c-sr-contact-button[href="#contact"])) {
display: grid;
grid-template-columns: 100%;
}
}
.c-sr-contact__data {
grid-area: data;
display: grid;
grid-template-columns: 86px 1fr;
justify-content: center;
font-size: calc(12px + var(--slope-1px) * 4);
letter-spacing: 0;
width: -moz-max-content;
width: max-content;
margin-inline: auto;
row-gap: calc(10px + var(--slope-1px) * 10);
align-items: center;
font-family: var(--ja-font-family);
}
@media screen and (max-width: 767px) {
.c-sr-contact__data {
width: 100%;
grid-template-columns: auto auto;
gap: 10px 15px;
}
}
.c-sr-contact__data > dl {
display: grid;
margin-block: var(--leading-trim);
line-height: 1;
}
@media screen and (min-width: 768px) {
.c-sr-contact__data > dl {
grid-template-columns: subgrid;
grid-column: span 2;
}
}
@media screen and (max-width: 767px) {
.c-sr-contact__data > dl {
justify-content: flex-start;
grid-template-columns: auto auto;
}
}
.c-sr-contact__data > dl > dt {
text-align: left;
position: relative;
padding-right: calc(5px + var(--slope-1px) * 15);
}
@media screen and (min-width: 768px) {
.c-sr-contact__data > dl > dt {
grid-column: 1 / 2;
}
}
.c-sr-contact__data > dl > dt:after {
margin-block: auto;
content: "";
width: 1px;
height: 0.6875em;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: currentColor;
}
.c-sr-contact__data > dl > dd {
margin-left: calc(5px + var(--slope-1px) * 15);
}
@media screen and (min-width: 768px) {
.c-sr-contact__data > dl > dd {
grid-column: 2/3;
}
}
.c-sr-contact__data > p {
line-height: 1;
width: 100%;
grid-column: 1/3;
text-align: center;
margin-top: var(--leading-trim);
}
.c-sr-contact__data small {
font-size: 13px;
}
.c-sr-contact__notes {
font-size: calc(12px + var(--slope-1px) * 1);
text-align: left;
}
@media screen and (max-width: 767px) {
.c-sr-contact__notes {
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
}
}
/* c-sr-contact-button
============================== */
.c-sr-contact-button {
/* color */
--grad-start: #70CFE7;
--grad-end: #28A1C1;
--_color:var(--white);
--_hover-color: var(--white);
--_border-color: var(--white);
--_hover-bg-color: var(--primary);
--_hover-border-color: var(--primary);
--_arrow-color: var(--white);
--_hover-arrow-color: var(--primary);
--_dots-color: #70CFE7;
--_circle-color: var(--white);
--_hover-circle-color: var(--white);
border: 0;
/* size */
--circle-size: 30px;
--dot-size: 6px;
--right-size: calc((var(--circle-size) - var(--dot-size))/2);
/* display */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
/* common */
background-image: linear-gradient(to bottom, var(--grad-start) 0%, var(--grad-end) 100%);
/* Layout */
font-size: calc(15px + var(--slope-1px) * 1);
font-weight: 500;
width: 100%;
max-width: 18.125em;
height: 3.75em;
border-radius: var(--ovall-radius);
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-inline: calc((0.625em + var(--circle-size)) * 0.5 + .25em) calc(0.625em + var(--circle-size) + .25em);
padding-block: 1.25em;
gap: calc(5px + var(--slope-1px) * 5);
/* style */
color: var(--_color);
transition: --grad-start 0.3s var(--animation), --grad-end 0.3s var(--animation), background 0.3s var(--animation), color 0.3s var(--animation);
}
@media screen and (max-width: 767px) {
.c-sr-contact-button {
max-width: 19.33333em;
height: 3.33333em;
padding-inline: 1em;
padding-block: 0.66667em;
gap: 0;
margin-inline: auto;
}
}
.c-sr-contact-button.js-scroll:not(:hover)::before {
scale: 1;
}
.c-sr-contact-button.js-scroll:not(:hover)::after {
scale: 0;
}
.c-sr-contact-button.js-scroll > span::before {
content: "";
-webkit-mask: var(--icon-arrow-down) center center/contain no-repeat;
mask: var(--icon-arrow-down) center center/contain no-repeat;
transform-origin: center center;
width: var(--circle-size);
height: var(--circle-size);
right: 12px;
opacity: 1;
translate: 0 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
aspect-ratio: 1 / 1;
margin: auto 0;
border-radius: 100%;
background-color: var(--_dots-color);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center center;
mask-position: center center;
transition: translate .2s ease-out, opacity .2s ease-out;
}
.c-sr-contact-button.js-scroll > span::after {
-webkit-mask-image: var(--icon-arrow-down);
mask-image: var(--icon-arrow-down);
translate: 0 -8px;
transform-origin: center center;
}
.c-sr-contact-button > span {
letter-spacing: 0;
margin-block: var(--leading-trim);
text-align: center;
line-height: 1.3;
z-index: 1;
}
@media screen and (min-width: 768px) {
.c-sr-contact-button > span {
word-break: keep-all;
overflow-wrap: anywhere;
width: 100%;
}
}
@media screen and (max-width: 767px) {
.c-sr-contact-button > span {
width: -moz-fit-content;
width: fit-content;
}
}
.c-sr-contact-button > span:after {
content: "";
position: absolute;
top: 0;
right: var(--right-size);
bottom: 0;
z-index: 1;
width: var(--circle-size);
aspect-ratio: 1 / 1;
margin: auto 0;
border-radius: 100%;
background-color: var(--_arrow-color);
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center center;
mask-position: center center;
opacity: 0;
transition: all .2s ease-out;
translate: -8px 0;
}
@media screen and (max-width: 767px) {
.c-sr-contact-button > span:after {
content: none;
}
}
.c-sr-contact-button:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: var(--right-size);
width: var(--circle-size);
height: var(--circle-size);
margin: auto 0;
border-radius: 50%;
background-color: var(--_circle-color);
transition: all 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}
@media screen and (max-width: 767px) {
.c-sr-contact-button:before {
content: none;
}
}
.c-sr-contact-button:after {
content: "";
position: absolute;
top: 0;
right: calc(var(--right-size) + (var(--circle-size) - var(--dot-size)) / 2);
bottom: 0;
width: var(--dot-size);
height: var(--dot-size);
margin: auto 0;
border-radius: 100%;
background-color: var(--_dots-color);
transition: all .1s ease-out;
}
@media screen and (max-width: 767px) {
.c-sr-contact-button:after {
content: none;
}
}
.c-sr-contact-button > i {
width: 1.78571em;
height: 1.78571em;
display: flex;
align-items: center;
justify-content: center;
}
.c-sr-contact-button > i img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-sr-contact-button svg path {
transition: all 0.3s var(--animation);
fill: var(--_color);
}
@media (any-hover: hover) {
:is(a:hover .c-sr-contact-button, a.c-sr-contact-button:hover, button:hover .c-sr-contact-button, button.c-sr-contact-button:hover) {
--grad-start: #28A1C1;
--grad-end: #28A1C1;
}
:is(a:hover .c-sr-contact-button, a.c-sr-contact-button:hover, button:hover .c-sr-contact-button, button.c-sr-contact-button:hover):before {
background-color: var(--_hover-bg-color);
scale: 0;
}
:is(a:hover .c-sr-contact-button, a.c-sr-contact-button:hover, button:hover .c-sr-contact-button, button.c-sr-contact-button:hover):after {
transition: all .2s ease-out .1s;
--_dots-color: var(--_hover-circle-color);
--dot-size: var(--circle-size);
opacity: 1;
}
:is(a:hover .c-sr-contact-button, a.c-sr-contact-button:hover, button:hover .c-sr-contact-button, button.c-sr-contact-button:hover) > span:after {
opacity: 1;
transition: all .4s;
translate: 0 0;
background-color: var(--_hover-arrow-color);
}
:is(a:hover .c-sr-contact-button.js-scroll, a.c-sr-contact-button.js-scroll:hover, button:hover .c-sr-contact-button.js-scroll, button.c-sr-contact-button.js-scroll:hover) > span:before {
opacity: 0;
transition: all .4s;
translate: 0 8px;
background-color: var(--_hover-arrow-color);
}
}
/* c-sr-contact-section
============================================================== */
.c-sr-contact-section {
padding-block: calc(30px + var(--slope-1px) * 45) calc(50px + var(--slope-1px) * 25);
color: #fff;
position: relative;
margin-top: calc(64px + var(--slope-1px) * 36);
}
.c-sr-contact-section:before {
content: "";
display: block;
width: 100cqi;
margin-inline: calc(50% - 50cqi);
background: url(../img/bg-contact.jpg) 50% 50%/cover no-repeat;
height: 100%;
top: 0;
z-index: -1;
position: absolute;
}
.c-sr-contact-section__head {
margin-bottom: calc(25px + var(--slope-1px) * 10);
}
.c-sr-contact-section__head .c-section-header {
align-items: baseline;
}
.c-sr-contact-section-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 10px;
align-items: flex-end;
}
@media screen and (max-width: 767px) {
.c-sr-contact-section-grid {
gap: 10px;
grid-template-columns: 100%;
}
}
.c-sr-contact-section-button {
display: flex;
gap: 10px;
}
.c-sr-contact-section-button > * {
flex: 1 1;
}
@media screen and (max-width: 767px) {
.c-sr-contact-section-button > * {
flex-basis: 162px;
}
}
@media screen and (max-width: 767px) {
.c-sr-contact-section-button {
flex-wrap: wrap;
}
}
.c-sr-contact-section-guide {
margin-top: calc(40px + var(--slope-1px) * -20);
display: grid;
grid-template-columns: auto 290px auto;
border: 1px solid var(--white);
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
padding: calc(30px + var(--slope-1px) * -10) calc(20px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * 10);
align-items: center;
gap: 30px;
}
@media screen and (max-width: 767px) {
.c-sr-contact-section-guide {
grid-template-columns: 100%;
}
}
.c-sr-contact-section-guide__body {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
justify-content: center;
color: var(--white);
}
.c-sr-contact-section-guide__body .c-link {
transition-property: opacity;
}
@media (any-hover: hover) {
.c-sr-contact-section-guide__body :is(a:hover .c-link, a.c-link:hover, button:hover .c-link, button.c-link:hover) {
opacity: .7;
color: var(--white);
}
}
.c-sr-contact-section-guide__foot {
border-radius: 8px;
overflow: hidden;
}
.c-sr-contact-section-guide__foot img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* c-sr-sticky
============================================================== */
.c-sr-sticky {
display: none;
background: var(--white);
border: 1px solid var(--light-gray);
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 999;
width: 100%;
align-items: center;
justify-content: center;
margin-inline: auto;
border-radius: 8px;
height: var(--sticky-height);
translate: 0 100%;
opacity: 0;
transition: translate 0.3s var(--animation), opacity 0.2s var(--animation);
pointer-events: none;
padding-block: 12px 15px;
padding-inline: 15px;
margin-block: var(--sticky-padding);
display: flex;
max-width: calc(100cqi - (var(--outer-padding) * 2));
}
@media screen and (max-width: 767px) {
body.is-scrolled .c-sr-sticky {
opacity: 1;
translate: 0 0;
pointer-events: auto;
}
}
/* c-sr-sticky-contact
============================================================= */
.c-sr-sticky-contact {
margin-block: 10px;
position: relative;
width: 100%;
}
.c-sr-sticky-contact__inner {
width: 100%;
gap: 15px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
}
.c-sr-sticky-contact__nav {
display: flex;
gap: 9px;
}
.c-sr-sticky-contact__data {
display: grid;
grid-template-columns: auto auto;
justify-content: center;
font-size: calc(12px + var(--slope-1px) * 4);
letter-spacing: 0;
width: 100%;
margin-inline: auto;
gap: 10px 15px;
align-items: center;
font-family: var(--ja-font-family);
}
.c-sr-sticky-contact__data > dl {
display: grid;
margin-block: var(--leading-trim);
line-height: 1;
justify-content: flex-start;
grid-template-columns: auto auto;
}
.c-sr-sticky-contact__data > dl > dt {
text-align: left;
position: relative;
padding-right: calc(5px + var(--slope-1px) * 15);
}
.c-sr-sticky-contact__data > dl > dt:after {
margin-block: auto;
content: "";
width: 1px;
height: 0.6875em;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: currentColor;
}
.c-sr-sticky-contact__data > dl > dd {
margin-left: calc(5px + var(--slope-1px) * 15);
}
.c-sr-sticky-contact__data > p {
line-height: 1;
width: 100%;
grid-column: 1/3;
text-align: center;
margin-top: var(--leading-trim);
}
.c-sr-sticky-contact__data small {
font-size: 13px;
}
.c-sr-sticky-contact__notes {
font-size: calc(12px + var(--slope-1px) * 1);
text-align: left;
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* c-sr-contact-button
============================== */
.c-sr-sticky-contact-button {
/* color */
--grad-start: #70CFE7;
--grad-end: #28A1C1;
--_color:var(--white);
--_hover-color: var(--white);
--_border-color: var(--white);
--_hover-bg-color: var(--primary);
--_hover-border-color: var(--primary);
--_arrow-color: var(--white);
--_hover-arrow-color: var(--primary);
--_dots-color: #70CFE7;
--_circle-color: var(--white);
--_hover-circle-color: var(--white);
border: 0;
/* display */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
/* common */
background-image: linear-gradient(to bottom, var(--grad-start) 0%, var(--grad-end) 100%);
/* Layout */
font-size: 13px;
font-weight: 500;
width: 100%;
height: 3.07692em;
border-radius: var(--ovall-radius);
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-inline: 1em;
padding-block: 0.76923em;
gap: 0;
margin-inline: auto;
/* style */
color: var(--_color);
}
.c-sr-sticky-contact-button > span {
letter-spacing: 0;
margin-block: var(--leading-trim);
text-align: center;
line-height: 1.3;
z-index: 1;
width: -moz-fit-content;
width: fit-content;
}
.c-sr-sticky-contact-button > i {
width: 1.78571em;
height: 1.78571em;
display: flex;
align-items: center;
justify-content: center;
}
.c-sr-sticky-contact-button > i img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-sr-sticky-contact-button svg path {
transition: all 0.3s var(--animation);
fill: var(--_color);
}
/* ============================================================= *
common usedcar
* ============================================================= */
/* c-usedcar-nav
=============================== */
.c-usedcar-nav {
display: flex;
flex-direction: column;
gap: 40px;
margin-bottom: calc(40px + var(--slope-1px) * 40);
}
/* c-usedcar-search-grid
=============================== */
.c-usedcar-search-grid {
display: grid;
--item-width:141px;
grid-template-columns: repeat(auto-fit, minmax(min(var(--item-width), 100%), 1fr));
gap: 10px;
}
@media screen and (max-width: 767px) {
.c-usedcar-search-grid {
--item-width:105px;
}
}
/* c-usedcar-search-card
=============================== */
.c-usedcar-search-card {
border: 1px solid var(--light-gray);
text-decoration: none;
text-align: center;
border-radius: 8px;
display: flex;
padding: calc(6px + var(--slope-1px) * 4) 10px calc(12px + var(--slope-1px) * 2) 10px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: calc(5px + var(--slope-1px) * 5);
flex-shrink: 0;
font-weight: 600;
background: var(--white);
}
.c-usedcar-search-card__image {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 100/59;
}
@media screen and (max-width: 767px) {
.c-usedcar-search-card__image {
aspect-ratio: 85/59;
}
}
.c-usedcar-search-card__image img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-usedcar-search-card__text {
margin-block: var(--leading-trim);
}
/* c-usedcar-contact
=============================== */
.c-usedcar-contact {
border: 1px solid var(--light-gray);
display: flex;
padding: calc(30px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * 20) calc(20px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * 20);
flex-direction: column;
align-items: center;
gap: 30px;
border-radius: 8px;
background: var(--white);
margin-bottom: calc(64px + var(--slope-1px) * 56);
margin-top: 40px;
}
.c-usedcar-contact__head {
border-bottom: 1px solid var(--light-gray);
padding-bottom: 30px;
width: 100%;
text-align: center;
}
.c-usedcar-contact-title {
margin-block: var(--leading-trim);
color: var(--primary);
font-size: calc(22px + var(--slope-1px) * 10);
font-weight: 500;
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.c-usedcar-contact-title {
line-height: 1.4;
}
}
.c-usedcar-contact__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(var(--item-width), 100%), 1fr));
--item-width: 420px;
padding-inline: 40px;
row-gap: 40px;
width: 100%;
}
@media screen and (max-width: 767px) {
.c-usedcar-contact__grid {
padding-inline: 0;
}
}
.c-usedcar-contact__item {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
align-items: center;
justify-content: center;
gap: calc(20px + var(--slope-1px) * 4);
}
.c-usedcar-contact__item .c-button {
max-width: 298px;
margin-inline: auto;
}
.c-usedcar-contact__item p {
line-height: 1.8;
color: var(--text-dark, #2F3134);
text-align: center;
font-size: calc(16px + var(--slope-1px) * 4);
font-weight: 400;
margin-block: var(--leading-trim);
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-usedcar-contact__item p em {
color: var(--primary);
font-weight: 400;
font-style: normal;
}
.c-usedcar-contact__item p small {
font-size: calc(12px + var(--slope-1px) * 1);
display: block;
word-break: break-all;
}
@media screen and (max-width: 767px) {
.c-usedcar-contact__item p small {
text-align: left;
}
}
/* ============================================================= *
slider usedcar
* ============================================================= */
.c-usedcar-card {
display: flex;
flex-direction: column;
border-radius: 20px;
max-width: 413px;
overflow: hidden;
text-decoration: none;
}
.c-usedcar-card__image {
aspect-ratio: 413 / 320;
overflow: hidden;
}
.c-usedcar-card__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-usedcar-card__contents {
display: flex;
padding: calc(20px + var(--slope-1px) * 15) calc(20px + var(--slope-1px) * 20) 25px calc(20px + var(--slope-1px) * 20);
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
align-self: stretch;
position: relative;
background: var(--white);
}
.c-usedcar-card__head {
font-size: calc(21px + var(--slope-1px) * 3);
font-weight: 600;
margin-block: var(--leading-trim);
}
.c-usedcar-card__body {
width: 100%;
}
.c-usedcar-card__data {
margin-block: var(--leading-trim);
font-size: calc(13px + var(--slope-1px) * 3);
display: flex;
justify-content: flex-start;
gap: 15px;
border-bottom: 1px solid;
padding-bottom: 20px;
}
.c-usedcar-card__data dl {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.c-usedcar-card__data dl dt {
display: flex;
padding: 12px 20px;
justify-content: flex-end;
align-items: center;
border: 1px solid;
line-height: 1;
}
@media screen and (max-width: 767px) {
.c-usedcar-card__data dl dt {
padding: 10px 10px;
}
}
.c-usedcar-card__price {
color: var(--primary);
font-weight: 700;
display: flex;
align-items: baseline;
gap: .5em;
}
.c-usedcar-card__price ._head {
font-size: 16px;
}
.c-usedcar-card__price ._body em {
font-family: var(--en-font-family);
font-size: 21px;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
/* ============================================================= *
Auto gallery
* ============================================================= */
/* p-usedcar-ag
============================================================ */
.c-usedcar-ag {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: calc(30px + var(--slope-1px) * 10);
}
@media screen and (max-width: 767px) {
.c-usedcar-ag {
grid-template-columns: 100%;
}
}
.c-usedcar-ag__item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 20px;
}
.c-usedcar-ag__item > p {
margin-block: var(--leading-trim);
width: 100%;
}
/* p-usedcar-other
============================================================ */
.c-usedcar-other {
font-size: calc(14px + var(--slope-1px) * 2);
margin-top: calc(20px + var(--slope-1px) * 20);
position: relative;
z-index: 1;
}
.c-usedcar-other__list {
display: grid;
grid-template-columns: auto auto;
gap: 1em 1em;
}
@media screen and (max-width: 1100px) {
.c-usedcar-other__list {
grid-template-columns: 100%;
}
}
.c-usedcar-other__item {
display: flex;
gap: .2em;
}
.c-usedcar-other__item:before {
content: "";
-webkit-mask: var(--icon-check) 50% 50%/contain no-repeat;
mask: var(--icon-check) 50% 50%/contain no-repeat;
color: var(--primary);
width: 1.5625em;
height: 1.5625em;
background: var(--base-color);
}
@media screen and (max-width: 767px) {
.c-usedcar-other__item:before {
width: 1.57143em;
height: 1.57143em;
}
}
/* ============================================================= *
Scroll Bar
* ============================================================= */
[data-simplebar] {
position: relative;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
align-content: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
@media screen and (max-width: 767px) {
.no-bar .simplebar-wrapper {
padding-bottom: 0;
}
}
.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;
}
@media screen and (min-width: 768px) {
.simplebar-mask {
overflow: visible;
}
}
.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 {
display: none;
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;
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: var(--white);
border-radius: var(--ovall-radius);
/* 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;
width: .5em;
background-color: var(--dark-color);
border-radius: .5em;
}
.simplebar-scrollbar:before {
content: '';
position: absolute;
right: 0;
left: 0;
display: block;
border-radius: 0;
transition: opacity 0s linear;
}
.simplebar-track.simplebar-vertical {
top: 0;
width: .5em;
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
top: 0;
bottom: 0;
}
.simplebar-track.simplebar-horizontal {
position: relative;
right: 0;
bottom: 0;
left: 0;
overflow: visible;
width: 89.33333vw;
margin: 0 auto;
}
.simplebar-track.simplebar-horizontal.is-fixed {
position: fixed;
top: auto;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
position: relative;
}
/* 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: 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: "";
visibility: hidden;
display: block;
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-wbr
============================== */
.u-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* u-wide-width
============================== */
.u-wide-width {
width: 100cqi;
margin-inline: calc(50% - 50cqi);
}
/* u-inner-width
============================== */
.u-inner-width {
max-width: 990px;
margin-left: auto;
margin-right: auto;
}