@charset "UTF-8";
/* =============================================================
Custom Properties
* ============================================================= */
:root {
/* ========================================
color
======================================== */
/* text color */
--base-color: #081b30;
/* border color */
--border-color:#cccccc;
/* bg color */
--bg-color:#f2f2f2;
--shadow: 0 0 14px 0 rgba(0, 0, 0, .12);
/* primary */
--key-color: #2fafb8;
--point-color: #ff7700;
--light-color: #e9f6f6;
--sunday: #c00;
--saturday: #3475b1;
/* gradation */
--grade-deep: #054286;
--grade-light: #30b1b9;
--grade-color: linear-gradient(180deg, var(--grade-deep) 0%, var(--grade-light) 100%);
/* maintenance color */
--ciao-color:#0168b7;
--mamoru-color:#8ec220;
/* color */
--white:#fff;
--black: #081b30;
--gray:#888888;
--disabled: #cccccc;
/* ========================================
layouts
======================================== */
--header-height: 80px;
--sticky-height:0;
--inner-width: 1140;
--inner-width-px: calc(var(--inner-width) * 1px);
--outer-frame-width:1366;
--outer-frame-width-px: calc(var(--outer-frame-width) * 1px);
--inner-padding: clamp(24px, -51.54758px + 9.84975vw, 83px);
--inner-overflow: max(var(--inner-padding),calc((100cqi - var(--inner-width-px))/2));
/* utility */
--vw: 1vw;
--vh: 1vh;
--slope-1px: clamp(0px, -.95663px + .2551vw, 1px);
--frame-border-radius: calc(16px + var(--slope-1px) * 8);
--base-border-radius: calc(10px + var(--slope-1px) * 4);
--small-border-radius: calc(10px + var(--slope-1px) * 2);
--ovall-radius:calc(1px / 0);
--loading-time: .3s;
/* ========================================
font
======================================== */
/* size */
--line-height: 1.75;
--leading-trim: calc((1em - 1lh) / 2);
--leading-cap: calc((1cap - 1lh) / 2);
/* z-index */
--header-z-index: 1000;
--navigation-z-index: 200;
--modal-z-index: 1001;
--local-z-index: 0;
/* family */
--base-font-family: "Zen Kaku Gothic New", sans-serif;
--ja-font-family: "Zen Kaku Gothic New", sans-serif;
--en-font-family: "Outfit", "Zen Kaku Gothic New", sans-serif;
/* animation */
--animation: cubic-bezier(.455, .03, .515, .955);
--t-duration: 300ms;
--easeOutQuart: cubic-bezier(.165, .84, .44, 1);
--transition: var(--t-duration) var(--easeOutQuart);
/* svg icon */
--icon-right-circle: url('data:image/svg+xml;utf8,');
--icon-plus-circle: url('data:image/svg+xml;utf8,');
--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-cross: url("data:image/svg+xml;utf8,");
--icon-check: url("data:image/svg+xml;utf8,");
--icon-close-circle: url('data:image/svg+xml;utf8,');
}
@media screen and (max-width: 767px) {
:root {
--header-height: 60px;
}
}
@media screen and (max-width: 767px) {
:root {
--sticky-height:56px;
}
}
@media screen and (max-width: 767px) {
:root {
--inner-padding:calc(100cqi * .04);
}
}
:root :where(:lang(en)) {
--leading-trim: calc((1cap - 1lh) / 2);
}
*[data-intersection] {
opacity: 0;
transition: opacity .5s ease-out .4s;
}
*[data-intersection][data-intersecting=true] {
opacity: 1;
}
*[data-intersection] .js-intersection-right {
opacity: 0;
transition: opacity 1.4s ease-in-out .8s, transform 1s cubic-bezier(.47, .16, .24, 1) .8s;
transform: translate3d(10%, 0, 0);
}
*[data-intersection][data-intersecting=true] .js-intersection-right {
opacity: 1;
transform: translateZ(0);
}
*[data-intersection] .js-intersection-left {
opacity: 0;
transition: opacity 1.4s ease-in-out .8s, transform 1s cubic-bezier(.47, .16, .24, 1) .8s;
transform: translate3d(-10%, 0, 0);
}
*[data-intersection][data-intersecting=true] .js-intersection-left {
opacity: 1;
transform: translateZ(0);
}
*[data-intersection] .js-intersection-bottom {
opacity: 0;
transition: opacity 1.4s ease-in-out .8s, transform 1s cubic-bezier(.47, .16, .24, 1) .8s;
transform: translate3d(0, 10%, 0);
}
*[data-intersection][data-intersecting=true] .js-intersection-bottom {
opacity: 1;
transform: translateZ(0);
}
*[data-intersection] .js-char-intersection .js-char {
display: inline-block;
transition: opacity 1.2s cubic-bezier(.47, .16, .24, 1), transform 1s cubic-bezier(.47, .16, .24, 1) 1s;
transform: translate3d(0, 100%, 0);
}
*[data-intersection][data-intersecting=true] .js-char-intersection .js-char {
transition: transform .8s cubic-bezier(.18, .06, .23, 1);
transition-delay: calc(var(--i) * .03s);
transform: translateZ(0);
}
*[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 {
transition: transform .8s cubic-bezier(.26, .06, 0, 1);
transition-delay: .1s;
transform: translateZ(0);
}
/* =============================================================
Base
* ============================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
margin: 0;
padding: 0;
background: var(--white);
font-size: 62.5%;
touch-action: manipulation;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: var(--base-color);
letter-spacing: .03em;
font-weight: 500;
font-size: calc(1.5rem + var(--slope-1px) * 1);
font-family: var(--base-font-family);
font-feature-settings: "palt";
line-height: var(--line-height);
-webkit-text-size-adjust: 100%;
}
body.is-menu-nav-open {
overflow: hidden;
}
body > * {
backface-visibility: hidden;
}
:where(img, svg) {
display: block;
height: auto;
max-width: 100%;
}
: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-hover-line {
text-decoration: underline;
transition: text-decoration-color .1s ease;
text-decoration-thickness: 1px;
text-underline-offset: .25em;
text-decoration-color: transparent;
}
a.u-hover-line:hover {
text-decoration-color: currentColor;
}
a.u-hover-none {
text-decoration: underline;
transition: text-decoration-color .1s ease;
text-decoration-thickness: 1px;
text-underline-offset: .25em;
text-decoration-color: currentColor;
}
a.u-hover-none:hover {
text-decoration-color: transparent;
}
a.js-tel {
text-decoration: none;
}
a.js-tel._active {
color: var(--key-color);
text-decoration: underline;
}
a.js-tel._inactive {
color: var(--base-color);
text-decoration: none;
}
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-block-start: calc(var(--header-height) + 10px);
}
*[data-toggle-id] {
display: none;
}
/* =============================================================
Loader
* ============================================================= */
/* l-loader
============================== */
.l-loader {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100%;
background: var(--grade-color);
transition: opacity .4s linear 1.2s;
pointer-events: auto;
}
@media screen and (max-width: 767px) {
.l-loader {
justify-content: flex-end;
}
}
body.is-loaded .l-loader {
opacity: 0;
pointer-events: none;
}
.l-loader .l-loader__item {
flex: 1;
opacity: 0;
transform-origin: center center;
animation: lightUp .8s ease-out forwards;
scale: .9;
}
.l-loader .l-loader__item.--item-01 {
position: relative;
top: 10.15625%;
z-index: 3;
order: 1;
width: 32.9429%;
animation-delay: .2s;
}
@media screen and (max-width: 767px) {
.l-loader .l-loader__item.--item-01 {
top: 0;
bottom: auto;
width: 83.2%;
transform: translateX(0) translateY(calc(1 * 10.22364%));
}
}
.l-loader .l-loader__item.--item-02 {
position: relative;
top: 27.21354%;
z-index: 1;
order: 0;
width: 26.93997%;
transform: translateX(18.20652%);
animation-delay: .3s;
}
@media screen and (max-width: 767px) {
.l-loader .l-loader__item.--item-02 {
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * 42.3913%);
width: 97.06667%;
margin-block: auto;
transform: translateX(0) translateY(calc(-1 * 2.46781%));
}
}
.l-loader .l-loader__item.--item-03 {
position: relative;
top: 43.35938%;
z-index: 2;
order: 2;
width: 32.65007%;
transform: translateX(calc(-1 * 44.39462%));
animation-delay: .4s;
}
@media screen and (max-width: 767px) {
.l-loader .l-loader__item.--item-03 {
position: absolute;
top: auto;
right: calc(-1 * 20%);
bottom: 0;
width: 94.4%;
transform: translateX(0) translateY(20%);
}
}
@keyframes lightUp {
0% {
opacity: 0;
scale: .9;
}
75% {
opacity: 1;
scale: 1;
}
100% {
opacity: 0;
scale: 1;
}
}
/* =============================================================
Wrapper
* ============================================================= */
.l-wrapper {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
margin: 0 auto;
padding: 0;
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 {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
justify-content: center;
align-items: center;
width: 100%;
height: var(--sticky-height);
margin-inline: auto;
background: var(--white);
color: var(--base-color);
opacity: 0;
transition: translate .3s var(--animation), opacity .2s var(--animation);
pointer-events: none;
translate: 0 100%;
}
@media screen and (min-width: 768px) {
.l-sticky {
display: none;
visibility: hidden;
}
}
@media screen and (max-width: 767px) {
.l-sticky {
display: flex;
visibility: visible;
}
}
body.is-scrolled .l-sticky {
opacity: 1;
pointer-events: auto;
translate: 0 0;
}
.l-sticky-nav {
display: flex;
align-items: center;
width: 100%;
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 {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
justify-content: space-between;
align-items: center;
gap: 6px;
width: auto;
height: 100%;
padding-block: 6px 12px;
color: var(--base-color);
text-decoration: none;
transition: all .2s var(--animation);
}
@media (any-hover: hover) {
.l-sticky-nav__button:where(:hover) {
opacity: .7;
}
}
.l-sticky-nav__button i {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
aspect-ratio: 1/1;
}
.l-sticky-nav__button i svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.l-sticky-nav__button i :where(svg path) {
fill: var(--key-color);
}
.l-sticky-nav__button span {
display: block;
margin-block: var(--leading-cap);
word-break: keep-all;
letter-spacing: 0;
font-weight: 500;
font-size: 12px;
font-feature-settings: "palt";
}
.l-sticky-nav__button:not(:last-child)::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
height: 100%;
margin: auto;
background: var(--border-color);
}
/* =============================================================
Header
* ============================================================= */
/* header
=============================== */
.l-header {
position: fixed;
top: 0;
z-index: 1001;
width: 100%;
height: var(--header-height);
transition: all .3s var(--animation), color .3s var(--animation);
}
@media print {
.l-header {
display: none;
visibility: hidden;
opacity: 0;
}
}
.l-header__inner {
position: relative;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
gap: 20px;
height: var(--header-height);
padding-left: calc(15px + var(--slope-1px) * 5);
}
.l-header__inner::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--white);
}
/* l-header-logo
=============================== */
.l-header-logo {
position: relative;
z-index: 1001;
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.l-header-logo a {
position: relative;
max-width: 282px;
transition: opacity .25s;
}
@media screen and (max-width: 560px) {
.l-header-logo a {
max-width: 200px;
}
}
.l-header-logo a img {
width: 100%;
min-width: 0%;
}
.l-header-logo a:hover {
opacity: .8;
}
/* l-header-toggle
=============================== */
.l-header-toggle {
position: relative;
top: 0;
right: 0;
z-index: 10003;
display: flex;
visibility: visible;
justify-content: center;
align-items: center;
align-self: center;
width: var(--header-height);
height: var(--header-height);
outline: none;
border: 0;
background: transparent;
color: var(--base-color);
cursor: pointer;
transition: filter .2s ease-out;
pointer-events: all;
appearance: none;
}
@media screen and (min-width: 768px) {
.l-header-toggle {
border-left: 1px solid currentColor;
}
}
@media (any-hover: hover) {
.l-header-toggle:hover {
filter: brightness(.7);
}
}
.l-header-toggle > div {
position: relative;
width: calc(16px + var(--slope-1px) * 4);
height: 2px;
border-radius: var(--ovall-radius);
background: currentColor;
transition: background .2s;
}
@media screen and (max-width: 767px) {
.l-header-toggle > div {
height: 2.4px;
}
}
.l-header-toggle > div:before, .l-header-toggle > div:after {
content: "";
position: absolute;
left: -25%;
display: block;
width: 150%;
height: 100%;
border-radius: var(--ovall-radius);
background: currentColor;
}
.l-header-toggle > div:before {
bottom: 7.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: 7.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 > 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;
z-index: 1000;
overflow-y: auto;
width: 100%;
height: 100%;
background: color-mix(in srgb, white 90%, transparent);
color: var(--base-color);
transition: transform .3s cubic-bezier(.65, 0, .35, 1), opacity 0s linear;
transform: translateY(100lvh);
pointer-events: none;
backdrop-filter: blur(12.5px);
overscroll-behavior-y: none;
}
.l-header-toggle-menu__inner {
padding: calc(var(--header-height) + 2rem) var(--inner-padding) var(--inner-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-block-end: 2rem;
}
.l-header-toggle-menu__contact {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: .5em;
padding: 1rem;
background: var(--primary);
color: #fff;
text-decoration: none;
font-size: calc(12px + var(--slope-1px) * 2);
transition: all .3s ease-out;
}
.l-header-toggle-menu__contact ._icon {
display: flex;
justify-content: center;
align-items: center;
width: 1.42857em;
height: 1.42857em;
}
.l-header-toggle-menu__contact ._icon svg {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
}
.l-header-toggle-menu__contact._white {
border: 1px solid;
background: transparent;
color: var(--base-color);
}
.l-header-toggle-menu__contact._white svg path:not([fill]) {
color: var(--base-color);
transition: all .1s;
}
@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);
}
}
/* l-header-menu
=============================== */
.l-header-menu {
display: grid;
grid-template-areas: "contact toggle"
"nav toggle";
gap: 0 30px;
}
@media screen and (max-width: 1080px) {
.l-header-menu {
grid-template-areas: "contact toggle"
"contact toggle";
}
}
@media screen and (max-width: 767px) {
.l-header-menu {
grid-template-columns: 100%;
grid-template-areas: "toggle";
}
}
.l-header-menu .l-header-nav {
grid-area: nav;
}
.l-header-menu .l-header-toggle {
grid-area: toggle;
}
.l-header-menu .l-header-contact {
grid-area: contact;
}
/* l-header-contact
=============================== */
.l-header-contact {
display: grid;
justify-content: flex-end;
align-self: flex-end;
grid-template-columns: auto auto;
margin-block-end: auto;
}
@media screen and (max-width: 1080px) {
.l-header-contact {
align-items: center;
align-self: center;
}
}
@media screen and (max-width: 767px) {
.l-header-contact {
display: none;
}
}
.l-header-contact > * {
flex: 1;
}
.l-header-contact__button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
overflow: hidden;
width: 100%;
height: 2.5em;
min-width: 10.9375em;
border: 0;
border: none;
border-color: var(--_border-color);
/* style */
color: var(--_color);
text-decoration: none;
font-weight: 500;
/* Layout */
font-size: 16px;
transition: background .3s var(--animation), color .3s var(--animation), filter .3s var(--animation);
appearance: none;
--_color:var(--white);
--_hover-color: var(--white);
}
.l-header-contact__button > span {
z-index: 1;
margin-block: var(--leading-trim);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
letter-spacing: 0;
line-height: 115%;
}
.l-header-contact__button svg {
width: 26px;
height: 26px;
}
.l-header-contact__button svg path[fill] {
fill: currentColor;
}
.l-header-contact__button.--reservation {
border-radius: 0 0 0 10px;
background: var(--key-color);
}
@media (any-hover: hover) {
.l-header-contact__button.--reservation:hover {
filter: brightness(1.1);
}
}
.l-header-contact__button.--contact {
border-radius: 0 0 10px 0;
background: var(--base-color);
}
@media (any-hover: hover) {
.l-header-contact__button.--contact:hover {
filter: brightness(1.8);
}
}
@media (any-hover: hover) {
:is(a:hover .l-header-contact__button, a.l-header-contact__button:hover, button:hover .l-header-contact__button, button.l-header-contact__button:hover) {
color: var(--_hover-color);
}
}
/* header nav
=============================== */
.l-header-nav {
display: flex;
margin-right: calc(-1 * .625em);
font-size: 16px;
--_dots-size: 8px;
}
@media screen and (max-width: 1366px) {
.l-header-nav {
/* 1366px - 960px の間の幅を 16px - 12px の範囲で変化 */
font-size: calc(2.54187px + .98522vw);
}
}
@media screen and (max-width: 960px) {
.l-header-nav {
font-size: 12px;
}
}
@media screen and (max-width: 1080px) {
.l-header-nav {
display: none;
}
}
.l-header-nav__item {
position: relative;
display: flex;
flex-grow: 1;
align-items: center;
}
.l-header-nav__handle {
position: relative;
position: relative;
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: flex-end;
height: 100%;
padding: var(--leading-trim) .625em calc(var(--leading-trim) + .78em);
text-align: center;
text-decoration: none;
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 175%;
cursor: pointer;
transition: all .3s;
}
.l-header-nav__handle > span {
position: relative;
padding-left: calc(var(--_dots-size) + 3px);
}
.l-header-nav__handle > span::before {
content: "";
position: absolute;
top: calc(.5lh - var(--_dots-size));
left: 0;
display: block;
width: var(--_dots-size);
height: var(--_dots-size);
margin-block: auto;
border-radius: 2px;
background: var(--key-color);
translate: 0 50%;
}
.l-header-nav__drawer {
position: absolute;
top: 100%;
left: calc(50% + (var(--_dots-size) + 3px));
visibility: hidden;
opacity: 0;
transition: all .3s ease-out;
transform: translateX(-50%) scaleY(0);
transform-origin: 0 0;
writing-mode: horizontal-tb;
padding-block-start: 10px;
}
.l-header-nav__item:hover .l-header-nav__drawer {
visibility: visible;
opacity: 1;
transform: translateX(-50%) scaleY(1);
}
.l-header-page-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .5em;
width: 205px;
padding: 12px 12px;
border-radius: 10px;
background: var(--white);
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .25);
font-size: calc(15px + var(--slope-1px) * 1);
}
.l-header-page-nav a {
display: block;
width: 100%;
padding: .5em .75em;
border-radius: 6px;
color: var(--base-color);
text-decoration: none;
letter-spacing: 0;
transition: all .3s ease-out;
}
@media (any-hover: hover) {
.l-header-page-nav a:where(:hover) {
background: var(--bg-color);
}
}
.l-header-page-nav__list {
display: flex;
flex-direction: column;
width: 100%;
}
/* =============================================================
Main
* ============================================================= */
/* main
=============================== */
.l-main {
position: relative;
position: relative;
flex-grow: 1;
width: 100%;
min-height: 0%;
max-height: 100%;
margin-inline: auto;
}
@media print {
.l-main {
min-width: 1080px;
}
}
/* head
=============================== */
.l-main-head {
position: relative;
display: block;
width: calc(100% - var(--inner-padding)*2);
max-width: var(--inner-width-px);
margin-inline: auto;
padding-block: calc(20px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * 20);
color: var(--white);
margin-block-start: var(--header-height);
}
.l-main-head::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
width: 100cqi;
height: 100%;
margin-inline: calc(50% - 50cqi);
background: var(--grade-color);
}
.l-main-head::after {
content: "";
position: absolute;
inset: 0 calc(-1 * var(--inner-padding)*2) 0 auto;
z-index: 0;
width: 447px;
background-image: url(../img/header-firework.svg);
background-size: contain;
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.l-main-head::after {
inset: 0 calc(-1 * var(--inner-padding) - 30px) 0 auto;
width: 216px;
}
}
/* title
=============================== */
.l-main-title {
position: relative;
display: grid;
align-items: baseline;
grid-template-rows: 100%;
grid-template-columns: 100%;
width: calc(100% + var(--inner-padding));
margin-block: var(--leading-cap);
}
.l-main-title .c-page-category {
z-index: -1;
grid-column: 1/2;
grid-row: 1/2;
}
.l-main-title .c-page-title {
z-index: 0;
grid-column: 1/2;
grid-row: 1/2;
}
/* breadcrumbs
=============================== */
.l-main-breadcrumbs {
position: relative;
z-index: 1;
display: block;
margin-block: var(--leading-trim);
}
/* body
=============================== */
.l-main-body {
position: relative;
width: calc(100% - var(--inner-padding)* 2);
max-width: var(--inner-width-px);
margin-inline: auto;
}
body[data-id="index"] .l-main-body {
padding-block-end: calc(76px + var(--slope-1px) * 4);
}
body:not([data-id=index]) .l-main-body {
padding-block-end: calc(80px + var(--slope-1px) * 20);
padding-block-start: calc(50px + var(--slope-1px) * 25);
}
body[data-id="sr"] .l-main-body {
padding-block-start: calc(30px + var(--slope-1px) * 10);
}
body:not([data-id=index]) .l-main-body:has(.c-page-anchor) {
padding-block-start: calc(30px + var(--slope-1px) * 10);
}
/* =============================================================
Footer
* ============================================================= */
.l-footer {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100cqi;
margin-inline: calc(50% - 50cqi);
padding-block: 0 var(--sticky-height);
}
body[data-id="usedcar-detail"] .l-footer {
padding-block: 0;
}
.l-footer__head {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-inline: var(--inner-padding);
margin-block-end: calc(-1 * calc(50px + var(--slope-1px) * 50));
}
@media screen and (max-width: 767px) {
.l-footer__head {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
}
.l-footer__body {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
margin-inline: auto;
padding-inline: clamp(0px, -383.13253px + 31.92771vw, 53px);
padding-inline: var(--inner-padding);
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../img/sitemap-pc.jpg") no-repeat top center;
background-size: 100% auto;
column-gap: 40px;
padding-block-start: calc(76px + var(--slope-1px) * 124);
}
.l-footer__body::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
background: #000;
}
@media screen and (max-width: 767px) {
.l-footer__body {
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../img/sitemap-sp.jpg") no-repeat top center;
background-size: 100% auto;
}
}
.l-footer-profile {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: var(--inner-width-px);
margin-block: var(--leading-trim);
margin-inline: auto;
padding-block: calc(32px + var(--slope-1px) * -8);
color: var(--white);
text-align: center;
font-size: calc(12px + var(--slope-1px) * 1);
}
@media screen and (max-width: 767px) {
.l-footer-profile {
flex-direction: column;
justify-content: center;
align-items: center;
margin-block: auto;
text-align: center;
}
}
@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;
color: currentColor;
text-decoration: underline;
transition: text-decoration-color .1s ease;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
text-underline-offset: .25em;
}
.l-footer-profile .CMN-RECYCLE a:hover {
text-decoration-color: transparent;
}
.l-footer-profile__registration {
text-align: left;
}
@media screen and (max-width: 767px) {
.l-footer-profile__registration {
text-align: center;
}
}
/* .l-footer-sitemap
============================== */
.l-footer-sitemap {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
width: 100%;
max-width: var(--inner-width-px);
margin-inline: auto;
color: var(--white);
margin-block-end: calc(16px + var(--slope-1px) * 4);
}
.l-footer-pagetop {
position: absolute;
right: 0;
bottom: 0;
outline: none;
border: none;
background: transparent;
text-decoration: none;
transition: opacity .3s;
transform: translateX(100%);
appearance: none;
}
@media (any-hover: hover) {
.l-footer-pagetop:where(:hover) {
opacity: .7;
}
}
@media screen and (max-width: 1080px) {
.l-footer-pagetop {
position: relative;
align-self: flex-end;
transform: unset;
margin-block-start: 24px;
}
}
/* ============================================================= *
Contact
* ============================================================= */
/* l-contact-section
============================== */
.l-contact-section {
position: relative;
overflow: hidden;
width: 100%;
max-width: var(--inner-width-px);
margin-inline: auto;
padding: 56px clamp(20px, -7.79156px + 4.96278vw, 60px) 64px;
border-radius: var(--frame-border-radius);
background: var(--white);
background: var(--key-color);
color: var(--white);
}
.l-contact-section__head {
position: relative;
z-index: 1;
}
.l-contact-section-title {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
width: calc(100% + 20px);
margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(30px + var(--slope-1px) * 11));
margin-left: -10px;
font-weight: 700;
}
.l-contact-section-title .--en {
position: relative;
z-index: -1;
grid-column: 1 / 2;
grid-row: 1/2;
width: 100cqi;
margin-block: var(--leading-cap);
margin-inline: calc(50% - 50cqi);
color: var(--white);
text-align: center;
white-space: nowrap;
word-wrap: break-word;
word-break: keep-all;
letter-spacing: -.025em;
font-weight: 500;
font-style: normal;
font-size: calc(80px + var(--slope-1px) * 48);
font-family: var(--en-font-family);
line-height: 100%;
/* 128px */
opacity: .1;
}
@media screen and (max-width: 767px) {
.l-contact-section-title .--en {
color: var(--bg-color);
opacity: .2;
}
}
.l-contact-section-title h2.--ja {
display: block;
align-self: flex-end;
grid-column: 1 / 2;
/* 67.2px */
grid-row: 1/2;
margin-block: var(--leading-cap);
text-align: center;
font-weight: 700;
font-size: calc(26px + var(--slope-1px) * 10);
font-family: var(--ja-font-family);
line-height: 140%;
}
.l-contact-section-lead {
margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(40px + var(--slope-1px) * 16));
text-align: center;
font-size: calc(14px + var(--slope-1px) * 2);
}
.l-contact-section__body {
position: relative;
z-index: 1;
}
.l-contact-section__bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.l-contact-nav-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 40px 30px;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.l-contact-nav-grid {
flex-direction: column;
align-items: center;
}
}
.l-contact-nav-grid__item {
width: 368px;
}
@media screen and (max-width: 767px) {
.l-contact-nav-grid__item {
width: 100%;
}
}
.l-contact-nav {
position: relative;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
gap: 10px;
min-height: 80px;
padding-block: 24px;
padding-inline: 42px;
border: none;
border-radius: var(--ovall-radius);
background: var(--white);
text-decoration: none;
transition: background .3s var(--animation), color .3s var(--animation);
--_arrow-size: calc(24px + var(--slope-1px) * 8);
}
.l-contact-nav::after {
content: "";
position: absolute;
top: 0;
right: calc(var(--_arrow-size) / 2);
bottom: 0;
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
background: currentColor;
mask: var(--icon-right-circle) 50% 50%/contain no-repeat;
transition: background .2s;
transition: background .3s var(--animation);
}
@media (any-hover: hover) {
.l-contact-nav:hover {
background: var(--base-color);
color: var(--white);
}
}
.l-contact-nav > * {
position: relative;
z-index: 1;
}
.l-contact-nav-grid__label {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
gap: .2em;
width: 100%;
margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(10px + var(--slope-1px) * 2));
margin-inline: auto;
text-align: center;
font-size: calc(14px + var(--slope-1px) * 2);
}
.l-contact-nav-grid__label::before {
content: "\00ff3c";
position: relative;
left: 0;
width: 1em;
height: 1lh;
color: currentColor;
}
.l-contact-nav-grid__label:after {
content: "\00ff0f";
position: relative;
right: 0;
width: 1em;
height: 1lh;
color: currentColor;
}
.l-contact-nav__icon {
display: flex;
justify-content: center;
align-items: center;
width: calc(26px + var(--slope-1px) * 6);
height: calc(26px + var(--slope-1px) * 6);
aspect-ratio: 1;
}
.l-contact-nav__icon svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.l-contact-nav__icon svg path {
fill: currentColor;
}
.l-contact-nav__title {
display: block;
text-align: center;
font-weight: 700;
font-size: clamp(20px, 14.87813px + .66778vw, 24px);
line-height: 1;
}
.l-contact-nav__notes {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
margin-block: calc(var(--leading-trim) + calc(14px + var(--slope-1px) * 2)) var(--leading-trim);
margin-inline: auto;
color: currentColor;
text-align: center;
text-decoration: underline;
transition: text-decoration-color .1s ease;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
text-underline-offset: .25em;
}
.l-contact-nav__notes:hover {
text-decoration-color: transparent;
}
/* =============================================================
Menu
* ============================================================= */
.l-global-menu {
position: fixed;
top: 0;
z-index: 10000;
display: flex;
visibility: hidden;
flex-direction: column;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../img/sitemap-pc.jpg") no-repeat top center, #000;
background-size: 100% auto, 100% auto, auto;
opacity: 0;
transition: opacity .4s cubic-bezier(.1, .91, .3, .98), visibility .4s cubic-bezier(.1, .91, .3, .98);
pointer-events: none;
}
@media screen and (max-width: 767px) {
.l-global-menu {
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../img/sitemap-sp.jpg") no-repeat top center;
background-size: 100% auto;
}
}
body.is-menu-nav-open .l-global-menu {
visibility: visible;
overflow-y: auto;
opacity: 1;
pointer-events: all;
}
.l-global-menu__toggle {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.l-global-menu__toggle .l-header-toggle {
color: var(--white);
}
.l-global-menu__inner {
position: relative;
z-index: 1;
visibility: hidden;
padding-inline: var(--inner-padding);
opacity: 0;
}
@media screen and (min-width: 768px) {
.l-global-menu__inner {
transition: opacity .4s ease-in, visibility .4s ease-in;
}
}
@media screen and (max-width: 767px) {
.l-global-menu__inner {
margin-block-start: 40px;
}
}
body.is-menu-nav-open .l-global-menu__inner {
visibility: visible;
opacity: 1;
}
/* .l-global-sitemap
============================== */
.l-global-sitemap {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
width: 100%;
max-width: var(--inner-width-px);
margin-inline: auto;
color: var(--white);
margin-block-end: calc(16px + var(--slope-1px) * 4);
}
/* ============================================================= *
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, .8);
opacity: 0;
transition: opacity .6s .6s, visibility .6s .6s;
pointer-events: none;
}
.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;
width: 1040px;
height: 100%;
max-width: 100%;
max-height: fit-content;
margin: auto;
opacity: 0;
transition: opacity .6s .6s, visibility .6s .6s;
--_padding-block: calc(28px + var(--slope-1px) * -3) calc(15px + var(--slope-1px) * 25);
--_padding-inline: calc(15px + var(--slope-1px) * 25);
}
.l-modal.is-show .l-modal__inner {
opacity: 1;
}
.p-recruit-modal .l-modal__inner {
--_padding-block: calc(20px + var(--slope-1px) * 30);
--_padding-inline: calc(20px + var(--slope-1px) * 30);
}
.p-recruit-modal .l-modal__inner .l-modal__contents {
border-radius: var(--base-border-radius);
}
.l-modal-calendar .l-modal__inner {
max-width: 510px;
--_padding-block: calc(36px + var(--slope-1px) * 12);
--_padding-inline: calc(20px + var(--slope-1px) * 20);
}
.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;
width: fit-content;
max-width: 100%;
max-height: calc(var(--vh) * 90);
padding: var(--_padding-block) var(--_padding-inline);
border-radius: 10px;
background: #fff;
}
.l-modal__close {
position: relative;
position: absolute;
top: calc(15px + var(--slope-1px) * 5);
right: calc(15px + var(--slope-1px) * 5);
z-index: 4;
display: flex;
flex-direction: column;
gap: 10px;
width: calc(12px + var(--slope-1px) * 4);
height: calc(12px + var(--slope-1px) * 4);
padding: 0;
outline: none;
border: 0;
background: var(--base-color);
mask: var(--icon-cross) 50% 50%/100% 100% no-repeat;
line-height: 1;
transition: opacity .3s ease-out;
appearance: none;
}
.l-modal__close:hover {
opacity: .7;
}
.l-modal__close span {
display: none;
}
/* ============================================================= *
Common - Block
* ============================================================= */
/* c-description-block
============================== */
.c-description-block {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 32px 20px;
border-radius: var(--frame-border-radius);
background: var(--Root---light-color, #d2f7fd);
margin-block-end: calc(48px + var(--slope-1px) * 22);
}
.c-description-block__lead {
display: block;
margin-block: var(--leading-trim);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* c-scroll-block
============================== */
.c-scroll-block {
background: #fff;
}
.c-scroll-block:not(:first-child) {
margin-block-start: 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, .2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), #fff 15px) right/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) right/20px 100%;
background-color: #fff;
background-attachment: local, scroll, local, scroll;
background-repeat: no-repeat;
}
.c-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 {
margin-block: var(--leading-trim) 1em;
color: var(--point-color);
text-align: center;
font-weight: bold;
font-size: 20px;
}
/* ============================================================= *
Grid
* ============================================================= */
/* c-grid
=============================== */
.c-grid {
display: grid;
grid-template-columns: repeat(var(--columns), minmax(min(0px, 100%), var(--item-width)));
gap: calc(15px + var(--slope-1px) * 6);
margin-inline: auto;
place-content: center;
}
.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: 366px;
--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 {
grid-template-columns: repeat(var(--columns), minmax(min(0px, 100%), 398px));
max-width: 100%;
--columns:1;
}
@media screen and (max-width: 767px) {
.c-grid._x1\:tablet {
--columns:1;
}
}
@media screen and (max-width: 560px) {
.c-grid._x1\:mobile {
grid-template-columns: 100%;
--columns:1;
}
}
.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;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
margin-inline: auto;
margin-block-end: 40px;
place-content: center;
}
.c-button-grid > * {
flex-basis: 290px;
}
@media screen and (max-width: 767px) {
.c-button-grid > * {
display: flex;
flex-basis: unset;
justify-content: center;
align-items: center;
width: 100%;
}
}
@media screen and (max-width: 767px) {
.c-button-grid {
flex-direction: column;
width: 100%;
}
}
/* ============================================================= *
Navigation
* ============================================================= */
/* breadcrumbs
=============================== */
.c-breadcrumbs {
display: inline-flex;
align-items: center;
width: 100%;
width: 100cqi;
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
margin-block: var(--leading-trim);
margin-inline: auto;
color: var(--white);
white-space: nowrap;
font-size: calc(12px + var(--slope-1px) * 2);
line-height: 97%;
}
.c-breadcrumbs > li {
display: inline-flex;
align-items: center;
align-self: center;
letter-spacing: 0;
line-height: 1;
}
.c-breadcrumbs > li:not(:last-child)::after {
content: ">";
position: relative;
display: inline-flex;
align-items: center;
align-self: center;
margin-inline: .35714em;
color: currentColor;
font-family: var(--ja-font-family);
line-height: 1;
}
.c-breadcrumbs > li a {
color: currentColor;
font-family: var(--ja-font-family);
transition: all .2s ease-out;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: currentColor;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.c-breadcrumbs > li a:hover {
text-decoration-color: transparent;
}
/* c-button
=============================== */
.c-button {
position: relative;
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
gap: calc(5px + var(--slope-1px) * 5);
overflow: hidden;
width: 100%;
min-height: calc(52px + var(--slope-1px) * 12);
max-width: 20.44444em;
max-height: calc(52px + var(--slope-1px) * 12);
padding-block: calc(var(--leading-trim) + 16px);
padding-inline: calc(var(--_arrow-size)* 1.5);
border-width: 1px;
border-style: solid;
border-color: var(--_border-color);
border-radius: var(--ovall-radius);
background: var(--_bg-color);
/* style */
color: var(--_color);
text-decoration: none;
letter-spacing: 0;
font-weight: 700;
/* Layout */
font-size: calc(16px + var(--slope-1px) * 2);
line-height: 1.15;
transition: background .3s var(--animation), color .3s var(--animation), filter .3s var(--animation), border-color .3s var(--animation), translate .3s var(--animation);
appearance: none;
/* common */
--_color:var(--base-color);
--_bg-color: var(--white);
--_arrow-color: var(--key-color);
--_hover-color: var(--white);
--_border-color: var(--base-color);
--_hover-bg-color: var(--base-color);
--_hover-border-color: var(--base-color);
--_arrow-size: calc(24px + var(--slope-1px) * 8);
}
.c-button:has(svg, img) {
padding-inline: .5em 1em;
}
.c-button:has(wbr) {
word-break: keep-all;
overflow-wrap: anywhere;
}
@media screen and (max-width: 767px) {
.c-button {
max-width: 18.5625em;
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
}
}
.c-button.--white-transparent {
--_color:var(--white);
--_bg-color: transparent;
--_arrow-color: var(--_color);
--_hover-color: var(--white);
--_border-color: var(--white);
--_hover-bg-color: var(--base-color);
--_hover-border-color: var(--base-color);
}
.c-button.--primary {
--_color:var(--white);
--_bg-color: var(--key-color);
--_arrow-color: var(--_color);
--_hover-color: var(--white);
--_border-color: var(--key-color);
--_hover-bg-color: var(--base-color);
--_hover-border-color: var(--base-color);
}
.c-button.--white {
--_color:var(--base-color);
--_bg-color: var(--white);
--_arrow-color: var(--_color);
--_hover-color: var(--white);
--_border-color: var(--white);
--_hover-bg-color: var(--base-color);
--_hover-border-color: var(--base-color);
}
.c-button.--stretch {
width: 100%;
max-width: 100%;
}
@media screen and (max-width: 767px) {
.c-button.--stretch {
max-width: 100%;
}
}
.c-button.--onClick::after {
rotate: -45deg;
}
.c-button.--close::after {
content: "";
position: absolute;
right: calc(var(--_arrow-size) / 2);
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
border-radius: 100%;
background: var(--_arrow-color);
mask: var(--icon-close-circle) 50% 50%/contain no-repeat;
transition: background .2s;
transition: translate .3s var(--animation);
}
.c-button._call::after {
rotate: -45deg;
}
.c-button::after {
content: "";
position: absolute;
top: 0;
right: calc(var(--_arrow-size) / 2);
bottom: 0;
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
background: var(--_arrow-color);
mask: var(--icon-right-circle) 50% 50%/contain no-repeat;
transition: background .2s;
transition: background .3s var(--animation);
}
.c-button.--icon-plus::after {
mask: var(--icon-plus-circle) 50% 50%/contain no-repeat;
}
.c-button.js-scroll::after {
rotate: 90deg;
}
.c-button svg path[fill] {
fill: var(--_color);
transition: all .3s var(--animation);
}
@media (any-hover: hover) {
:is(a:hover .c-button, a.c-button:hover, button:hover .c-button, button.c-button:hover) {
border-color: var(--_hover-border-color);
background: var(--_hover-bg-color);
color: var(--_hover-color);
--_arrow-color: currentColor;
}
:is(a:hover .c-button, a.c-button:hover, button:hover .c-button, button.c-button:hover) svg path[fill] {
fill: var(--_hover-color);
}
}
/* c-button-wrap
============================== */
.c-button-wrap {
position: relative;
display: block;
width: fit-content;
min-width: 368px;
text-decoration: none;
--label-pos:12px;
}
@media screen and (max-width: 767px) {
.c-button-wrap {
min-width: 100%;
}
}
.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;
gap: .2em;
width: 100%;
margin-block: var(--leading-cap) calc(var(--leading-cap) + var(--label-pos));
margin-inline: auto;
color: var(--base-color);
color: currentColor;
font-weight: 500;
font-size: calc(13px + var(--slope-1px) * 7);
}
.c-button-wrap__label.--stretch {
width: 100%;
}
@media screen and (max-width: 767px) {
.c-button-wrap__label {
min-width: fit-content;
}
}
.c-button-wrap__label::before {
content: "\00ff3c";
position: relative;
left: 0;
width: 1em;
height: 1lh;
color: currentColor;
}
.c-button-wrap__label:after {
content: "\00ff0f";
position: relative;
right: 0;
width: 1em;
height: 1lh;
color: currentColor;
}
/* c-button-container
============================== */
.c-button-container {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1em;
justify-items: center;
width: 100%;
place-content: center;
margin-block-start: calc(30px + var(--slope-1px) * 20);
}
.c-button-container._stretch .c-button,
.c-button-container._stretch .c-button-wrap {
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: 297px;
max-width: calc(297 / 375 * 100cqi);
margin-inline: auto;
}
}
.c-button-container .c-button,
.c-button-container .c-button-wrap {
width: 100%;
max-width: 368px;
}
@media screen and (max-width: 767px) {
.c-button-container .c-button,
.c-button-container .c-button-wrap {
min-width: 297px;
max-width: calc(297 / 375 * 100cqi);
margin-inline: auto;
}
}
/* c-button-group
============================== */
.c-button-group {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 10px;
width: fit-content;
}
.c-button-group._stretch {
width: 100%;
}
/* c-button-notes
============================== */
.c-button-notes {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
text-decoration: none;
font-weight: 400;
font-size: calc(11px + var(--slope-1px) * 2);
line-height: 1.8;
transition-timing-function: var(--animation);
transition-duration: .3s;
transition-property: color;
}
.c-button-notes._large {
font-size: calc(14px + var(--slope-1px) * 2);
}
/* banner
=============================== */
.c-circle-arrow {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
gap: calc(6px + var(--slope-1px) * 4);
color: currentColor;
text-decoration: none;
transition: color .3s;
--_arrow-size: calc(24px + var(--slope-1px) * 8);
}
.c-circle-arrow::after {
content: "";
position: relative;
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
background: currentColor;
mask: var(--icon-right-circle) 50% 50%/contain no-repeat;
transition: background .2s;
transition: background .3s var(--animation);
}
@media (any-hover: hover) {
.c-circle-arrow:where(:hover) {
color: var(--key-color);
}
}
/* banner
=============================== */
.c-circle-button {
display: block;
aspect-ratio: 1;
text-decoration: none;
transition: opacity .3s;
}
@media (any-hover: hover) {
.c-circle-button:where(:hover) {
opacity: .7;
}
}
/* banner
=============================== */
.c-banner {
display: grid;
height: 100%;
padding: 20px 10px;
border-radius: 20px;
background: var(--white);
box-shadow: 0 0 8px 0 rgba(68, 64, 63, .25);
transition: opacity .2s;
place-content: center;
}
@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 {
position: relative;
display: grid;
grid-template-columns: var(--side) 1fr var(--gap) 1fr var(--side);
width: 100%;
min-height: calc(70px + var(--slope-1px) * 20);
margin: auto;
--current-tab-color: var(--white);
--side: calc(15px + var(--slope-1px) * 35);
--gap: calc(10px + var(--slope-1px) * 10);
--tab-radius: var(--base-border-radius);
}
@media screen and (max-width: 767px) {
.c-tab {
width: 100cqi;
margin-inline: calc(50% - 50cqi);
--side: var(--inner-padding);
}
}
.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 {
grid-template-columns: var(--side) 1fr var(--gap) 1fr var(--gap) 1fr var(--gap) 1fr var(--gap) 1fr var(--gap) 1fr var(--side);
--gap: calc(5px + var(--slope-1px) * 5);
--side: calc(10px + var(--slope-1px) * 5);
}
.c-tab::before, .c-tab::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background: var(--key-color);
}
.c-tab::before {
left: 0;
grid-column: 1/2;
}
.c-tab::after {
right: 0;
grid-column: 5/6;
}
.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-block-end: calc(18px + var(--slope-1px) * 32);
}
.c-tab._margin-small:not(:last-child) {
margin-block-end: calc(30px + var(--slope-1px) * 10);
}
.c-tab__item {
display: flex;
align-items: stretch;
width: 100%;
}
.c-tab__item:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--key-color);
}
.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 {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
gap: .33333em;
overflow: visible;
width: 100%;
padding-block: calc(var(--leading-trim) + 20px);
padding-inline: calc(12px + var(--slope-1px) * 12);
outline: none;
border: 1px solid var(--key-color);
border-bottom-width: 0;
border-radius: var(--tab-radius) var(--tab-radius) 0 0;
background: var(--key-color);
color: var(--white);
text-align: center;
text-decoration: none;
font-weight: 500;
font-size: calc(20px + var(--slope-1px) * 4);
line-height: 1.25;
cursor: pointer;
transition: background var(--t-duration);
}
@media screen and (max-width: 767px) {
.c-tab__button {
flex-direction: column;
}
}
.c-tab__button span {
display: block;
display: inline;
width: fit-content;
margin-block: var(--leading-trim);
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-tab__button span small {
font-size: clamp(14px, 8.87813px + .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 {
border-bottom: 0;
background: transparent;
color: var(--key-color);
}
/* anchor
=============================== */
.c-page-anchor {
display: flex;
display: flex;
justify-content: flex-start;
gap: calc(20px + var(--slope-1px) * 10);
}
@media screen and (max-width: 767px) {
.c-page-anchor {
flex-wrap: wrap;
gap: 10px 20px;
}
}
.c-anchor-button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
width: fit-content;
background: transparent;
/* style */
color: var(--_color);
text-align: center;
text-decoration: none;
word-break: keep-all;
overflow-wrap: anywhere;
font-weight: 500;
/* Layout */
font-size: calc(12px + var(--slope-1px) * 2);
line-height: 1.5;
transition: background .3s var(--animation), text-decoration-color .3s var(--animation), color .3s var(--animation);
appearance: none;
/* common */
--_color:var(--base-color);
--_hover-color: var(--key-color);
--_border-color: var(--base-color);
--_hover-bg-color: var(--base-color);
--_arrow-size: 16px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: currentColor;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
@media screen and (max-width: 767px) {
.c-anchor-button {
--_arrow-size:12px;
}
}
.c-anchor-button::after {
content: "";
position: relative;
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
background: currentColor;
mask: var(--icon-angle-down) 50% 50%/contain no-repeat;
transition: background .2s;
transition: translate .3s var(--animation);
}
@media (any-hover: hover) {
:is(a:hover .c-anchor-button, a.c-anchor-button:hover) {
color: var(--_hover-color);
text-decoration-color: transparent;
}
}
/* ============================================================= *
Section
* ============================================================= */
/* c-section-lead
============================== */
/* c-section-text
============================== */
/* c-section
============================== */
.c-section:not(:first-child) {
margin-block-start: calc(80px + var(--slope-1px) * 20);
}
.c-section.--closer:not(:first-child) {
margin-block-start: calc(50px + var(--slope-1px) * 25);
}
.c-section.--farther:not(:first-child) {
margin-block-start: calc(100px + var(--slope-1px) * 50);
}
.c-section._no-bottom {
margin-block-end: 0;
}
.c-section._no-space {
margin-block-start: 0;
}
.c-section__head {
display: grid;
grid-template-columns: 1fr;
gap: calc(24px + var(--slope-1px) * 6);
margin-block-end: calc(var(--leading-trim) + calc(30px + var(--slope-1px) * 20));
}
.c-section__head.--closer {
margin-block-end: calc(var(--leading-trim) + calc(20px + var(--slope-1px) * 10));
}
.c-section__head._no-space {
margin-block-end: 0;
}
.c-section__foot {
display: flex;
justify-content: center;
margin-block-start: calc(40px + var(--slope-1px) * 10);
}
.c-section._frame {
overflow: hidden;
padding: calc(20px + var(--slope-1px) * 30);
border: 2px solid var(--light-gray);
border-radius: 20px;
background: var(--white);
}
/* inner section
=============================== */
.c-inner-section {
margin-block-start: 50px;
}
.c-inner-section__head {
margin-block-end: calc(var(--leading-trim) + 30px);
}
.c-inner-section__head.--closer {
margin-block-end: calc(var(--leading-trim) + calc(12px + var(--slope-1px) * -2));
}
/* ============================================================= *
Sitemap
* ============================================================= */
.c-sitemap {
display: grid;
gap: 60px 48px;
}
@media screen and (min-width: 768px) {
.c-sitemap {
justify-content: space-between;
align-items: start;
grid-template-rows: auto auto auto;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
grid-template-areas: "showroom newcar maintenance campaign company"
"showroom usedcar maintenance carlife company"
"showroom usedcar maintenance carlife 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: campaign;
}
.c-sitemap__col:nth-child(6) {
grid-area: carlife;
}
.c-sitemap__col:nth-child(7) {
grid-area: company;
}
.c-sitemap__col:nth-child(8) {
grid-area: contact;
}
}
@media screen and (max-width: 767px) {
.c-sitemap {
grid-template-columns: 100%;
gap: 0;
}
}
/* c-sitemap-box
============================== */
@media screen and (max-width: 767px) {
.c-sitemap-box {
border-bottom: 1px solid var(--white);
}
}
.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-block-end: calc(var(--leading-trim) + 2em);
}
}
.c-sitemap-box__toggle {
position: relative;
display: flex;
align-items: center;
gap: 9px;
margin: 0;
padding: 0;
outline: none;
border: 0;
background: transparent;
color: currentColor;
text-align: left;
font-weight: 700;
line-height: 1;
transition: opacity .2s;
pointer-events: none;
appearance: none;
}
.c-sitemap-box__toggle > span {
position: relative;
margin-block: var(--leading-trim);
padding-left: calc(var(--_dots-size) + 8px);
font-size: calc(15px + var(--slope-1px) * 1);
--_dots-size: 6px;
}
.c-sitemap-box__toggle > span::before {
content: "";
position: absolute;
top: calc(1em/2 - var(--_dots-size)/2);
left: 0;
display: block;
width: var(--_dots-size);
height: var(--_dots-size);
margin-block: auto;
border-radius: 2px;
background: var(--key-color);
}
@media screen and (max-width: 767px) {
.c-sitemap-box__toggle {
width: 100%;
padding-block: calc(20px + var(--leading-trim));
padding-inline: 8px 2em;
pointer-events: auto;
}
.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__arrow {
position: relative;
display: flex;
align-items: center;
gap: 9px;
margin: 0;
padding: 0;
outline: none;
border: 0;
background: transparent;
color: currentColor;
text-align: left;
font-weight: 700;
line-height: 1;
transition: opacity .2s;
pointer-events: none;
appearance: none;
}
.c-sitemap-box__arrow > span {
position: relative;
margin-block: var(--leading-trim);
padding-left: calc(var(--_dots-size) + 8px);
font-size: calc(15px + var(--slope-1px) * 1);
--_dots-size: 6px;
}
.c-sitemap-box__arrow > span::before {
content: "";
position: absolute;
top: calc(1em/2 - var(--_dots-size)/2);
left: 0;
display: block;
width: var(--_dots-size);
height: var(--_dots-size);
margin-block: auto;
border-radius: 2px;
background: var(--key-color);
}
@media screen and (max-width: 767px) {
.c-sitemap-box__arrow {
width: 100%;
padding-block: calc(20px + var(--leading-trim));
padding-inline: 8px 2em;
pointer-events: auto;
}
.c-sitemap-box__arrow::after {
content: "";
position: absolute;
top: 0;
right: 8px;
bottom: 0;
display: block;
width: 18px;
height: 18px;
margin: auto 0;
background: currentColor;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}
.c-sitemap-box__arrow::after {
transition: rotate .2s;
}
}
.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-block-end: 24px;
}
}
@media screen and (min-width: 768px) {
.c-sitemap-box__item:not(:first-child) {
margin-block-start: 1.25em;
}
}
@media screen and (max-width: 767px) {
.c-sitemap-box__item a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 1em 0;
}
.c-sitemap-box__item a:before {
content: "";
display: block;
width: .4em;
height: .4em;
margin-right: 1em;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
}
}
/* c-sitemap-pages
============================== */
.c-sitemap-pages {
margin-left: 8px;
}
.c-sitemap-pages > li {
position: relative;
margin-block: var(--leading-trim);
padding-left: calc(var(--_dots-size) + 6px);
font-size: 13px;
--_dots-size: 4px;
}
.c-sitemap-pages > li:not(:last-child) {
margin-block-end: calc(calc(20px + var(--slope-1px) * 0) + 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: 1px;
margin-block: auto;
background: currentColor;
}
.c-sitemap-pages > li a {
display: inline-flex;
align-items: center;
color: currentColor;
text-decoration: underline;
transition: text-decoration-color .1s ease;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: .25em;
}
.c-sitemap-pages > li a:hover {
text-decoration-color: currentColor;
}
.c-sitemap-box[data-category="showroom"] .c-sitemap-pages {
column-count: 2;
}
/* ============================================================= *
Slider
* ============================================================= */
/* c-slider-control
============================== */
.c-slider-control {
--_arrow-color: var(--base-color);
--_arrow-hover-color: var(--gray);
--_arrow-size: 34px;
--_bar-color: var(--key-color);
--_bar-bg-color: var(--disabled);
}
.c-slider-control {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 24px;
margin-block-start: calc(14px + var(--slope-1px) * 7);
}
@media screen and (max-width: 767px) {
.c-slider-control {
justify-content: center;
}
}
.c-slider-control .slick-arrow {
width: var(--_arrow-size);
height: var(--_arrow-size);
aspect-ratio: 1;
padding: 7px;
border: 2px solid var(--base-color);
border-radius: 50%;
}
.c-slider-control .slick-arrow.slick-prev {
order: 1;
}
.c-slider-control .slick-arrow.slick-next {
order: 2;
}
/* c-slide-arrow
============================== */
.c-slide-arrow {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: var(--_arrow-size);
height: var(--_arrow-size);
color: var(--_arrow-color);
cursor: pointer;
}
.c-slide-arrow svg path:not([fill]) {
fill: var(-_arrow-color);
transition: all .2s ease-out;
}
@media (any-hover: hover) {
.c-slide-arrow:where(:hover) {
background: var(--base-color);
scale: 1.1;
}
.c-slide-arrow:where(:hover) svg path:not([fill]) {
fill: var(--_arrow-hover-color);
}
}
/* c-slider-progress
============================== */
.c-slider-progress {
position: relative;
overflow: hidden;
width: 100%;
height: 4px;
min-width: 100px;
margin: 0 10px;
border-radius: 2px;
background-color: var(--_bar-bg-color);
--slider-current: 1;
}
.c-slider-progress:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: calc(100% / var(--slider-length) * var(--slider-current));
height: 100%;
border-radius: 4px;
background: var(--_bar-color);
transition: width .4s cubic-bezier(.215, .61, .355, 1);
transform-origin: left center;
}
/* c-topics-slider
============================== */
.c-topics-slider {
--slide-spacing: 30px;
--slide-size: 350px;
}
@media screen and (max-width: 767px) {
.c-topics-slider {
--slide-spacing: var(--inner-padding);
--slide-size: calc(100cqi * (345/375) + var(--slide-spacing));
}
}
.c-topics-slider__inner {
position: relative;
z-index: 1;
overflow: visible;
width: 100%;
width: calc(100% + var(--inner-overflow));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.c-topics-slider__inner {
width: 100%;
}
}
.c-topics-slider__list {
display: flex;
width: max-content;
margin: 0;
margin-left: calc(var(--slide-spacing) * -1);
padding: 0;
list-style: none;
transition: transform .5s cubic-bezier(.25, 1, .5, 1);
will-change: transform;
}
.c-topics-slider__item {
flex: 0 0 var(--slide-size);
box-sizing: border-box;
padding-left: var(--slide-spacing);
}
.c-topics-slider__item a {
display: block;
transition: scale .3s var(--animation);
}
@media (any-hover: hover) {
.c-topics-slider__item a:where(:hover) {
scale: .985;
}
}
.c-topics-slider__item img {
display: block;
width: 100%;
height: auto;
border-radius: 24px;
}
.c-topics-slider-arrow {
display: flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
aspect-ratio: 1/1;
padding: 10px;
border: 2px solid;
border-radius: 50%;
background: transparent;
color: var(--base-color);
transition: color .3s var(--animation);
}
@media (any-hover: hover) {
.c-topics-slider-arrow:where(:hover) {
color: var(--key-color);
}
}
@media screen and (max-width: 767px) {
.c-topics-slider-arrow {
width: 40px;
height: 40px;
padding: 10px;
}
}
.c-topics-slider-arrow:disabled {
color: var(--border-color);
cursor: not-allowed;
}
/* c-blog-slider
============================== */
.c-blog-slider {
margin-right: calc(-.5 * var(--slide-spacing));
--slide-spacing: 24px;
--slide-size: 320px;
}
@media screen and (max-width: 767px) {
.c-blog-slider {
margin-right: calc(-1 * var(--slide-spacing));
}
}
.c-blog-slider__inner {
position: relative;
z-index: 1;
overflow: hidden;
width: calc(100% + var(--inner-overflow));
margin-right: auto;
}
@media screen and (max-width: 767px) {
.c-blog-slider__inner {
width: calc(100% + var(--slide-spacing) * 2);
margin-left: calc(-1 * var(--slide-spacing));
}
}
.c-blog-slider__list {
display: flex;
width: max-content;
margin: 0;
padding: 0;
list-style: none;
transition: transform .5s cubic-bezier(.25, 1, .5, 1);
will-change: transform;
}
.c-blog-slider__item {
flex: 0 0 var(--slide-size);
box-sizing: border-box;
padding-block: var(--slide-spacing);
padding-inline: calc(var(--slide-spacing) / 2);
}
@media screen and (max-width: 767px) {
.c-blog-slider__item {
padding-inline: var(--slide-spacing) 0;
}
}
.c-blog-slider-arrow {
display: flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
aspect-ratio: 1/1;
padding: 10px;
border: 2px solid;
border-radius: 50%;
background: transparent;
color: var(--white);
transition: color .3s var(--animation);
}
@media (any-hover: hover) {
.c-blog-slider-arrow:where(:hover) {
color: var(--key-color);
}
}
@media screen and (max-width: 767px) {
.c-blog-slider-arrow {
width: 40px;
height: 40px;
padding: 10px;
}
}
.c-blog-slider-arrow:disabled {
color: var(--border-color);
cursor: not-allowed;
}
/* ============================================================= *
Table
* ============================================================= */
/* scroll container
=============================== */
.c-table-container {
position: relative;
overflow: auto;
width: 100%;
background-color: #fff;
}
@media screen and (max-width: 1140px) {
.c-table-container {
overflow-x: scroll;
width: 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 15px) 0 0/50px 100%, linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), #fff 15px) right/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) right/20px 100%;
background-color: #fff;
background-attachment: local, scroll, local, scroll;
background-repeat: no-repeat;
}
}
.c-table-container + .c-table-container {
margin-block-start: 5rem;
}
@media screen and (max-width: 1140px) {
.c-table-container > * {
min-width: 67.5em;
}
}
@media screen and (max-width: 960px) {
.p-ciao-tab .c-table-container > * {
min-width: 50em;
}
}
.c-table-container > ._stretch {
min-width: auto;
}
.c-table-container:has(._stretch) {
width: 100%;
}
/* data table
=============================== */
.c-data-table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1.25;
}
.c-data-table:not(:first-child) {
margin-block-start: 40px;
}
.c-data-table._fixed {
table-layout: fixed;
}
.c-data-table th,
.c-data-table td {
padding: .88889em;
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
letter-spacing: 0;
font-size: 18px;
font-family: var(--ja-font-family);
}
@media screen and (max-width: 767px) {
.c-data-table th,
.c-data-table td {
padding: .625em;
}
}
.c-data-table th {
text-align: center;
font-weight: 700;
}
.c-data-table thead th {
background: rgba(0, 0, 0, .467);
color: var(--white);
}
.c-data-table thead th:not([colspan]) {
width: 16.66667%;
}
.c-data-table thead th[colspan] {
width: 16.66667%;
}
.c-data-table thead th[colspan].--category {
width: 33.33333%;
}
.c-data-table thead th.--plan {
font-size: 20px;
}
.c-data-table thead th small {
display: block;
font-size: .88889em;
}
.c-data-table tbody tr._total th {
background: var(--key-color);
color: var(--white);
}
.c-data-table tbody tr._total td {
background: oklch(96.5% .06 195/.1);
color: var(--key-color);
font-weight: 700;
}
.c-data-table tbody th {
background: rgba(0, 0, 0, .467);
color: var(--white);
}
.c-data-table tbody td {
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
text-align: right;
}
.c-data-table tbody td dl {
display: grid;
align-items: baseline;
grid-template-columns: 1em 1fr 1em auto;
width: fit-content;
margin-inline-start: auto;
}
.c-data-table tbody td dl dt {
display: grid;
align-items: baseline;
grid-template-columns: subgrid;
grid-column: span 3;
text-align: justify;
font-size: .77778em;
}
.c-data-table tbody td dl dt::before, .c-data-table tbody td dl dt::after {
display: inline;
width: 1em;
}
.c-data-table tbody td dl dt::before {
content: "\003010";
}
.c-data-table tbody td dl dt::after {
content: "\003011";
}
.c-data-table tbody td dl dd {
display: grid;
grid-template-columns: subgrid;
grid-column: span 1;
}
.c-data-table tbody th.--course {
background: oklch(96.5% .06 195/.1);
color: var(--key-color);
font-weight: 700;
}
.c-data-table tbody td.--empty {
position: relative;
background: rgba(0, 0, 0, .05);
}
.c-data-table tbody td.--empty::before {
content: "\0030fc";
font-size: .77778em;
}
.c-data-table tbody small {
display: block;
font-size: .77778em;
}
/* profile table
=============================== */
.c-profile-table {
width: 100%;
border-collapse: collapse;
line-height: 1.25;
}
.c-profile-table th,
.c-profile-table td {
padding-block: 30px;
border-bottom: 1px solid var(--border-color);
letter-spacing: 0;
}
.c-profile-table th {
min-width: 112px;
border-bottom: 2px solid var(--key-color);
vertical-align: baseline;
text-align: center;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.c-profile-table td {
padding-left: 30px;
}
}
@media screen and (max-width: 767px) {
.c-profile-table td {
padding-left: 15px;
}
}
.c-profile-table .c-profile-table-address {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* job table
=============================== */
.c-job-table {
width: 100%;
border-collapse: collapse;
line-height: 1.25;
}
@media screen and (max-width: 767px) {
.c-job-table tr {
display: block;
padding-block: 30px;
border-bottom: 1px solid var(--border-color);
}
}
.c-job-table th,
.c-job-table td {
letter-spacing: 0;
}
@media screen and (min-width: 768px) {
.c-job-table th,
.c-job-table td {
padding-block: 30px;
border-bottom: 1px solid var(--border-color);
}
}
.c-job-table th {
vertical-align: baseline;
font-weight: 700;
}
@media screen and (min-width: 768px) {
.c-job-table th {
min-width: 112px;
border-bottom: 2px solid var(--key-color);
text-align: center;
}
}
@media screen and (max-width: 767px) {
.c-job-table th {
display: block;
text-align: left;
padding-block-end: 10px;
}
}
@media screen and (min-width: 768px) {
.c-job-table td {
padding-left: 30px;
}
}
@media screen and (max-width: 767px) {
.c-job-table td {
padding-block: 5px 0;
}
}
@media screen and (min-width: 768px) {
.c-job-table td:has(.c-job-inner-table) {
padding-left: 0;
}
}
.c-job-table .c-profile-table-address {
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-job-inner-table {
display: grid;
grid-template-columns: auto 1fr;
}
@media screen and (max-width: 767px) {
.c-job-inner-table {
grid-template-columns: 100%;
}
}
.c-job-inner-table dl {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
}
.c-job-inner-table dl:not(:last-child) {
padding-block: 30px;
border-bottom: 1px solid var(--border-color);
}
.c-job-inner-table dl:last-child {
padding-block: 30px 0;
}
@media screen and (max-width: 767px) {
.c-job-inner-table dl {
grid-column: span 1;
}
.c-job-inner-table dl:first-child {
padding-block: 15px 30px;
}
}
.c-job-inner-table dl dt {
display: grid;
grid-template-columns: subgrid;
grid-column: span 1;
}
@media screen and (min-width: 768px) {
.c-job-inner-table dl dt {
padding-inline: 30px;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.c-job-inner-table dl dt {
padding-block-end: 10px;
}
}
.c-job-inner-table dl dd {
display: grid;
grid-template-columns: subgrid;
grid-column: span 1;
}
@media screen and (min-width: 768px) {
.c-job-inner-table dl dd {
padding-inline-start: 30px;
}
}
@media screen and (max-width: 767px) {
.c-job-inner-table dl dd {
padding-block-start: 5px;
}
}
/* ============================================================= *
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-weight: 700;
font-size: calc(18px + var(--slope-1px) * 6);
}
.c-lead > p + p {
margin-block-start: 1em;
}
/* text
=============================== */
.c-text {
display: block;
margin-block: var(--leading-trim);
text-align: left;
font-size: calc(15px + var(--slope-1px) * 1);
font-family: var(--ja-font-family);
line-height: 1.5;
}
.c-text._center {
text-align: center;
}
.c-text em {
font-weight: 700;
}
/* notes
=============================== */
.c-notes {
font-size: calc(13px + var(--slope-1px) * 1);
}
.c-notes > li {
padding-left: 1em;
text-indent: -1em;
line-height: 1.5;
}
.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 {
position: relative;
display: block;
color: var(--white);
text-transform: capitalize;
font-weight: 500;
font-style: normal;
font-size: calc(70px + var(--slope-1px) * 58);
font-family: var(--en-font-family);
line-height: 100%;
/* 128px */
opacity: .2;
margin-block-start: calc(var(--leading-cap) + calc(20px + var(--slope-1px) * 32));
margin-block-end: var(--leading-cap);
}
/* c-page-title
============================== */
.c-page-title {
position: relative;
display: block;
margin-block: var(--leading-trim);
font-weight: 700;
font-size: calc(32px + var(--slope-1px) * 16);
font-family: var(--en-font-family);
line-height: 1.25;
}
@media screen and (max-width: 767px) {
.c-page-title {
line-height: 1.15;
}
}
/* c-section-title
============================== */
.c-section-title {
position: relative;
margin-block: var(--leading-cap);
padding-left: calc(var(--_dots-size) + calc(12px + var(--slope-1px) * 4));
font-weight: 700;
font-size: calc(24px + var(--slope-1px) * 4);
font-family: var(--ja-font-family);
line-height: 1.6;
--_dots-size: 8px;
}
.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-section-title::before {
content: "";
position: absolute;
top: calc(.5lh - var(--_dots-size));
left: 0;
display: block;
width: var(--_dots-size);
height: var(--_dots-size);
margin-block: auto;
border-radius: 2px;
background: var(--key-color);
translate: 0 50%;
}
/* c-sub-title
=============================== */
.c-sub-title {
position: relative;
display: block;
margin-block: var(--leading-trim);
color: var(--base-color);
font-weight: 700;
font-size: calc(20px + var(--slope-1px) * 4);
font-family: var(--ja-font-family);
line-height: 1.5;
}
.c-sub-title .--en {
font-family: var(--en-font-family);
}
.c-sub-title em {
font-weight: 700;
}
/* detailed title
=============================== */
.c-detailed-title {
font-weight: 700;
font-size: calc(18px + var(--slope-1px) * 6);
font-family: var(--en-font-family);
}
.c-detailed-title span {
display: block;
}
/* ============================================================= *
Topics
* ============================================================= */
/* c-topics
============================== */
.c-topics {
display: flex;
flex-direction: column;
row-gap: 16px;
max-width: var(--inner-width-px);
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.c-topics {
grid-template-columns: 100%;
row-gap: 1em;
width: 100%;
max-width: 100%;
}
}
.c-topics__head {
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.c-topics-title {
font-weight: 700;
font-size: calc(21px + var(--slope-1px) * 9);
}
.topics-link {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: calc(24px + var(--slope-1px) * 8) 0;
color: var(--base-color);
text-decoration: none;
}
.topics-link__category {
display: flex;
display: flex;
justify-content: center;
justify-content: center;
align-items: center;
align-items: center;
gap: 10px;
height: calc(31px + var(--slope-1px) * 1);
padding: 10px 15px;
background: var(--bg-color);
font-size: calc(14px + var(--slope-1px) * 2);
}
.topics-link .topics-link__head, .topics-link .topics-link__body {
transition: color .3s;
}
.topics-link:hover .topics-link__body {
color: var(--key-color);
}
.topics-link:hover::after {
opacity: .6;
}
.topics-link__head {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
margin-block: var(--leading-trim);
color: var(--gray);
text-align: center;
}
.topics-link__body {
margin-block: var(--leading-trim);
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1.5;
}
/* c-topics-list
============================== */
.c-topics-list {
display: block;
padding-right: calc(15px + var(--slope-1px) * 25);
border-top: 1px solid var(--border-color);
}
.c-topics-list__item {
display: block;
border-bottom: 1px solid var(--border-color);
}
.c-topics-list__item[data-toggle-id="topics"] {
display: none;
}
/* c-topics-toggle
============================== */
.c-topics-toggle {
position: relative;
z-index: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: .5em;
overflow: visible;
width: 100%;
margin: 1.5em 0 0;
outline: none;
border: 0;
background: none;
color: currentColor;
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: color .3s;
appearance: none;
}
.c-topics-toggle:hover {
color: var(--key-color);
}
.c-topics-toggle::after {
content: "";
position: relative;
display: block;
flex-shrink: 0;
width: .9375em;
height: .9375em;
background: currentColor;
mask: var(--icon-angle-down) 50% 50%/contain no-repeat;
transition: transform .3s;
}
.c-topics-toggle.is-show::after {
transform: rotate(-180deg);
}
.c-topics-toggle ._text-show {
display: block;
}
.c-topics-toggle ._text-hide {
display: none;
}
.c-topics-toggle.is-show ._text-show {
display: none;
}
.c-topics-toggle.is-show ._text-hide {
display: block;
}
/* =============================================================
blog
* ============================================================= */
/* c-blog-card
============================== */
.c-blog-card {
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
align-items: flex-start;
gap: 24px;
width: 296px;
height: 100%;
padding: 24px 24px 32px 24px;
border-radius: var(--frame-border-radius);
background: #fff;
box-shadow: 0 0 14px 0 rgba(0, 0, 0, .06);
text-decoration: none;
}
@media screen and (max-width: 767px) {
.c-blog-card {
width: 100%;
}
}
.c-blog-card.--stretch {
width: 100%;
}
.c-blog-card__image {
position: relative;
z-index: 0;
flex-grow: 1;
overflow: hidden;
width: 100%;
aspect-ratio: 1;
border-radius: var(--small-border-radius);
}
.c-blog-card__image img {
position: relative;
z-index: 0;
display: block;
width: 100%;
height: 100%;
aspect-ratio: 1;
object-fit: cover;
transition: scale .4s ease-out 0s;
will-change: scale;
}
@media screen and (min-width: 768px) {
.c-blog-card:hover .c-blog-card__image img {
scale: 1.05;
}
}
.c-blog-card__contents {
position: relative;
display: grid;
flex-grow: 1;
}
.c-blog-card__head {
display: inline-flex;
justify-content: flex-start;
align-items: center;
margin-block-end: calc(16px + var(--slope-1px) * 4);
}
.c-blog-card__shop {
position: relative;
z-index: 1;
display: inline-flex;
justify-content: center;
justify-content: flex-end;
align-items: center;
align-items: center;
width: fit-content;
max-width: 100%;
padding: 8px 12px;
border-radius: 2px;
background: var(--bg-color);
color: var(--base-color);
font-weight: 700;
font-style: normal;
font-size: calc(13px + var(--slope-1px) * 1);
line-height: 1;
line-height: 1;
}
.c-blog-card__new {
display: inline-flex;
/* 19.6px */
padding-left: 10px;
color: var(--key-color);
font-weight: 400;
font-style: normal;
font-size: calc(13px + var(--slope-1px) * 1);
font-family: var(--en-font-family);
line-height: 140%;
}
.c-blog-card__date {
display: inline-flex;
align-items: center;
gap: 4px;
margin-block: var(--leading-trim);
color: var(--gray);
text-overflow: ellipsis;
font-weight: 400;
font-size: calc(13px + var(--slope-1px) * 1);
font-family: var(--en-font-family);
line-height: 1.4;
}
.c-blog-card__date::before {
content: "";
position: relative;
width: 1.28571em;
height: 1.28571em;
background: currentColor;
mask-image: url("../img/icon/time.svg");
mask-repeat: no-repeat;
mask-size: contain;
}
.c-blog-card__title {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
font-size: calc(18px + var(--slope-1px) * 2);
margin-block-start: var(--leading-trim);
margin-block-end: calc(calc(16px + var(--slope-1px) * 4) + var(--leading-trim));
}
/* c-blog-paging
============================== */
.c-blog-paging {
display: flex;
justify-content: flex-end;
gap: 1em;
width: 100%;
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;
font-size: calc(15px + var(--slope-1px) * 1);
}
.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;
transition: text-decoration-color .1s ease;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
text-underline-offset: .25em;
}
.c-blog-paging__nav > li a:hover {
text-decoration-color: transparent;
}
.c-blog-paging__nav > li + li:before {
content: "\ff5c";
}
/* c-blog
=============================== */
.c-blog__control {
display: flex;
justify-content: center;
text-align: center;
margin-block-start: 2em;
margin-block-end: calc(30px + var(--slope-1px) * 30);
}
.c-blog__control:empty {
margin: 0;
}
.c-blog__control br {
display: none;
}
.c-blog__control form {
display: flex;
align-items: center;
width: 100%;
}
@media screen and (max-width: 414px) {
.c-blog__control form {
flex-direction: column;
}
.c-blog__control form > * {
width: 100%;
}
}
.c-blog__control select {
position: relative;
display: block;
flex-grow: 1;
height: 80px;
padding: .5em 1em;
border: 1px solid var(--border-color);
border-radius: var(--base-border-radius);
background: #fff;
}
.c-blog__control select option:first-child {
color: #e0dad1;
}
.c-blog__control input {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120px;
height: 80px;
margin-left: .5em;
padding: 2em 1em 0;
outline: none;
border: 0;
border-radius: var(--base-border-radius);
background: url(../img/icon/search.svg) center 1em no-repeat var(--point-color);
background-size: 1.5em;
color: #fff;
vertical-align: middle;
cursor: pointer;
transition: all .3s ease-out;
appearance: none;
}
.c-blog__control input:hover {
opacity: .7;
}
@media screen and (max-width: 414px) {
.c-blog__control input {
flex-direction: row;
width: 100%;
height: auto;
margin: 5px 0 0;
padding: 1em;
background-position: 1em center;
}
}
/* blog */
.c-blog {
width: 100%;
word-break: break-all;
line-height: 1.75;
}
.c-blog article {
padding: calc(20px + var(--slope-1px) * 30);
border: 1px solid var(--border-color);
border-radius: var(--frame-border-radius);
}
.c-blog .blog__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: .5em;
padding: calc(20px + var(--slope-1px) * 10);
border-radius: var(--small-border-radius);
background: var(--bg-color);
margin-block-end: calc(30px + var(--slope-1px) * 20);
scroll-margin-block-start: calc(var(--header-height) + var(--inner-padding));
}
.c-blog .blog__title {
margin-block: var(--leading-trim);
font-weight: bold;
font-size: calc(20px + var(--slope-1px) * 4);
line-height: 1.4;
}
@media screen and (max-width: 767px) {
.c-blog .blog__title {
line-height: 1.4;
}
}
.c-blog .blog__date {
margin-block: var(--leading-trim);
margin-left: auto;
font-weight: 400;
font-style: normal;
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1.4;
}
@media screen and (max-width: 767px) {
.c-blog .blog__date {
margin-left: 0;
}
}
.c-blog .blog__body {
display: block;
margin-block: var(--leading-trim);
word-break: break-all;
}
.c-section._bg .c-blog .blog__body {
border: 0;
}
.c-blog .blog__body table {
width: 100%;
}
.c-blog .blog__body img {
display: inline;
}
/* information blog
============================== */
.blog__paging {
display: block;
margin-block: var(--leading-trim);
text-align: right;
}
.blog__paging + article {
margin-block-start: calc(24px + var(--slope-1px) * 8);
}
article + .blog__paging {
margin-block-start: calc(24px + var(--slope-1px) * 8);
}
.c-blog-container {
display: block;
width: 100%;
}
.c-blog-container .c-blog-container__table {
width: 100%;
}
.c-blog-container article + article {
margin-block-start: calc(15px + var(--slope-1px) * 15);
}
.c-blog-container article {
padding: calc(20px + var(--slope-1px) * 30);
border: 1px solid var(--border-color);
border-radius: var(--frame-border-radius);
}
.c-blog-container .blog__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: calc(10px + var(--slope-1px) * 10);
padding: calc(20px + var(--slope-1px) * 10);
border-radius: var(--small-border-radius);
background: var(--bg-color);
margin-block-end: calc(30px + var(--slope-1px) * 20);
scroll-margin-block-start: calc(var(--header-height) + var(--inner-padding));
}
.c-blog-container .blog__title {
margin-block: var(--leading-trim);
font-weight: bold;
font-size: calc(20px + var(--slope-1px) * 4);
line-height: 1.4;
}
@media screen and (max-width: 767px) {
.c-blog-container .blog__title {
line-height: 1.4;
}
}
.c-blog-container .blog__date {
margin-block: var(--leading-trim);
margin-left: auto;
font-weight: 400;
font-style: normal;
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1.4;
}
@media screen and (max-width: 767px) {
.c-blog-container .blog__date {
margin-left: 0;
}
}
.c-blog-container .blog__body {
display: block;
margin-block: var(--leading-trim) 0;
word-break: break-all;
}
.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));
}
/* c-calendar
=========================== */
/* c-calendar
=========================== */
.c-calendar {
width: 100%;
max-width: 620px;
font-family: var(--en-font-family);
}
.c-calendar__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
border-bottom: 1px solid var(--base-color);
margin-block-end: 10px;
padding-block-end: 16px;
}
.c-calendar__button {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
width: fit-content;
}
.c-calendar-button {
padding: 10px;
outline: none;
border: 0;
border: 2px solid;
border-radius: 0;
border-radius: 50%;
background: transparent;
color: var(--base-color);
transition: opacity .2s;
appearance: none;
}
.c-calendar-button:hover {
opacity: .7;
}
.c-calendar-button span {
display: none;
}
.c-calendar-button:before {
content: "";
display: block;
width: 20px;
height: 20px;
background: currentColor;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}
.c-calendar:not(.is-next) .c-calendar-button._prev {
color: var(--disabled);
pointer-events: none;
}
.c-calendar-button._prev:before {
transform: rotate(-180deg);
}
.c-calendar.is-next .c-calendar-button._next {
color: var(--disabled);
pointer-events: none;
}
.c-calendar__month {
/* 72px */
margin-block: var(--leading-cap);
text-align: center;
font-weight: 500;
font-style: normal;
font-size: calc(40px + var(--slope-1px) * 8);
line-height: 150%;
}
.c-calendar__month .cal_year {
font-size: calc(15px + var(--slope-1px) * 5);
}
.c-calendar table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.c-calendar table .cal_sat {
color: var(--saturday);
}
.c-calendar table .cal_holiday,
.c-calendar table .cal_sun {
color: var(--sunday);
}
.c-calendar table th {
vertical-align: middle;
text-align: center;
font-weight: 500;
font-size: 15px;
line-height: 1.5;
}
.c-calendar table th > div {
margin-block: var(--leading-cap);
padding: .43333em 0;
}
.c-calendar table td {
position: relative;
padding: 5px 10px;
vertical-align: middle;
text-align: center;
}
.c-calendar table td:before {
content: "";
position: static;
display: block;
width: 100%;
height: 0;
padding-block-start: 85.5%;
}
.c-calendar table td > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
margin: auto;
background: radial-gradient(circle, var(--bg) calc(100% / 2 - 1px), transparent calc(100% / 2));
font-weight: 600;
--bg: transparent;
}
.c-calendar table td .cal_close01 {
color: #fff;
--bg: #aaa;
}
.c-calendar__foot {
margin-block-start: 0;
}
.c-calendar__notes {
font-size: 15px;
line-height: 150%;
}
.c-calendar__notes .cal_close01 {
color: #aaa;
}
+ .c-calendar__close {
margin-block-start: 20px;
}
/* ============================================================= *
Maintenance service
* ============================================================= */
/* reservation
=============================== */
.c-maintenance-reservation {
margin-block: calc(30px + var(--slope-1px) * 10);
}
/* service
=============================== */
.c-maintenance-service {
display: grid;
gap: 40px 40px;
margin-block: calc(30px + var(--slope-1px) * 20) 0;
font-family: var(--ja-font-family);
place-content: center;
}
@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__banner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
aspect-ratio: 550/140;
padding-inline: clamp(39px, -1.97496px + 5.34224vw, 71px);
border: 1px solid var(--base-color);
border-radius: var(--ovall-radius);
background: var(---white, #fff);
transition: opacity .2s;
}
.c-maintenance-service-block__banner:after {
content: "";
position: absolute;
top: 0;
right: clamp(17px, 4.19533px + 1.66945vw, 27px);
bottom: 0;
left: auto;
display: block;
width: var(--_arrow-size);
height: var(--_arrow-size);
aspect-ratio: 1/1;
margin: auto;
background: var(--key-color);
mask: var(--icon-right-circle) 50% 50%/contain no-repeat;
--_arrow-size:calc(24px + var(--slope-1px) * 8);
}
.c-maintenance-service-block__banner img {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-maintenance-service-block__banner:hover {
opacity: .7;
}
.c-maintenance-service-block__desc {
display: block;
width: fit-content;
margin-inline: auto;
text-align: center;
font-family: var(--ja-font-family);
line-height: 1.5;
margin-block-start: calc(var(--leading-trim) + 16px);
}
@media screen and (min-width: 768px) {
.c-maintenance-service-block__desc {
word-break: keep-all;
overflow-wrap: anywhere;
}
}
@media screen and (max-width: 767px) {
.c-maintenance-service-block__desc {
text-align: left;
}
}
/* description
=============================== */
.c-maintenance-description {
padding: calc(24px + var(--slope-1px) * 6);
border-radius: var(--frame-border-radius);
background: var(--bg-color);
}
.c-maintenance-description__head {
display: block;
inline-size: fit-content;
margin-block: var(--leading-trim);
margin-inline: auto;
letter-spacing: 0;
font-weight: 500;
font-size: calc(17px + var(--slope-1px) * 3);
line-height: 1.5;
padding-block-end: 20px;
}
.c-maintenance-description__body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--gray);
padding-block-start: 20px;
}
@media screen and (max-width: 767px) {
.c-maintenance-description__body {
flex-direction: column;
justify-content: center;
}
}
.c-maintenance-description__list {
margin-block: var(--leading-trim);
font-size: calc(15px + var(--slope-1px) * 1);
}
.c-maintenance-description__list > li {
padding-left: 1em;
text-indent: -1em;
letter-spacing: 0;
line-height: 1.75;
}
@media screen and (max-width: 767px) {
.c-maintenance-description__list > li {
line-height: 1.75;
}
}
.c-maintenance-description__list > li:before {
content: "\30fb";
}
.c-maintenance-description__time {
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
gap: 20px;
padding: 10px 20px 10px 10px;
border-radius: 10px;
background: var(--white);
}
.c-maintenance-description-time__head {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 5px;
background: var(--key-color);
color: var(--white);
font-weight: 700;
font-size: calc(14px + var(--slope-1px) * 2);
}
.c-maintenance-description-time__head svg {
width: calc(24px + var(--slope-1px) * 8);
height: calc(24px + var(--slope-1px) * 8);
}
.c-maintenance-description-time__head svg path {
fill: currentColor;
}
.c-maintenance-description-time__body {
display: flex;
align-items: baseline;
margin-block: var(--leading-cap);
color: var(--key-color);
line-height: 1;
}
.c-maintenance-description-time__body em {
margin-block: var(--leading-cap);
font-weight: 500;
font-style: normal;
font-size: calc(32px + var(--slope-1px) * 4);
font-family: var(--en-font-family);
}
.c-maintenance-description-time__body span {
font-weight: 700;
font-size: calc(16px + var(--slope-1px) * 4);
}
.c-maintenance-description__since {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
padding: 20px;
border-radius: 10px;
background: var(--white);
text-align: center;
margin-block-start: clamp(0px, -9.56633px + 2.55102vw, 10px);
}
.c-maintenance-description-since__head {
margin-block: var(--leading-trim);
font-size: calc(17px + var(--slope-1px) * 3);
}
.c-maintenance-description-since__notes {
width: fit-content;
margin-block: var(--leading-trim);
margin-inline: auto;
text-align: left;
}
/* table
=============================== */
.c-maintenance-table .c-notes {
margin-block-start: calc(12px + var(--slope-1px) * 8);
}
.c-maintenance-table__caption {
width: 100%;
margin-block: calc(12px + var(--slope-1px) * -2);
text-align: right;
font-size: calc(13px + var(--slope-1px) * 1);
line-height: 1;
}
/* ============================================================= *
inspection
* ============================================================= */
/* c-inspection-checkpoint
============================== */
.c-inspection-checkpoint {
display: grid;
align-items: center;
grid-template-columns: 43.85965% 53.50877%;
gap: 30px;
margin-block-start: 30px;
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoint {
grid-template-columns: 100%;
}
}
.c-inspection-checkpoint-figure {
position: relative;
}
.c-inspection-checkpoint-figure__image {
position: absolute;
top: 50%;
left: 6.25%;
width: 87.5%;
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: calc(9px + var(--slope-1px) * 1);
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoint-nav {
grid-template-columns: repeat(2, 1fr);
}
}
.c-inspection-checkpoint-button {
display: grid;
align-items: center;
grid-template-columns: auto 1fr auto;
gap: 6px;
height: 100%;
height: calc(50px + var(--slope-1px) * 10);
padding-inline: calc(12px + var(--slope-1px) * 2) calc(12px + var(--slope-1px) * 2);
border: 1px solid var(--base-color);
border-radius: var(--ovall-radius);
color: var(--base-color);
text-align: center;
text-decoration: none;
letter-spacing: 0;
transition: color .2s, background .2s;
}
.c-inspection-checkpoint-button:hover {
background: var(--base-color);
color: var(--white);
}
.c-inspection-checkpoint-button > span {
flex-grow: 1;
word-break: keep-all;
overflow-wrap: anywhere;
font-weight: 700;
line-height: 1.2;
}
.c-inspection-checkpoint-button ._number {
display: inline-flex;
justify-content: center;
align-items: center;
width: calc(30px + var(--slope-1px) * 2);
height: calc(30px + var(--slope-1px) * 2);
aspect-ratio: 1;
margin-block: var(--leading-cap);
border-radius: 50%;
background: var(--gray);
color: var(--white);
font-weight: 400;
font-size: calc(18px + var(--slope-1px) * 2);
font-family: var(--en-font-family);
line-height: 1;
transition: color .2s;
}
.c-inspection-checkpoint-button ._text {
text-align: left;
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 3);
line-height: 1.1;
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoint-button ._text {
inline-size: fit-content;
margin-inline: auto;
text-align: center;
}
}
.c-inspection-checkpoint-button:after {
content: "";
display: block;
flex-shrink: 0;
align-self: center;
width: calc(16px + var(--slope-1px) * 4);
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-plus) 50% 50%/contain no-repeat;
}
/* c-inspection-check
============================== */
.c-inspection-check {
width: var(--inner-width-px);
max-width: 100%;
margin-inline: auto;
border-radius: 10px;
background: #fff;
}
.c-inspection-check__head {
display: flex;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
padding-inline: clamp(0px, -11.47959px + 3.06122vw, 12px);
border-bottom: 1px solid var(--border-color);
margin-block-end: calc(var(--leading-trim) + calc(15px + var(--slope-1px) * 25));
padding-block-end: calc(27px + var(--slope-1px) * -3);
}
@media screen and (max-width: 767px) {
.c-inspection-check__head {
padding-inline: 0;
margin-block-end: calc(15px + var(--slope-1px) * 25);
}
}
.c-inspection-check-title {
display: flex;
justify-content: center;
align-items: center;
gap: calc(8px + var(--slope-1px) * 1);
font-weight: 700;
font-size: calc(24px + var(--slope-1px) * 4);
}
@media screen and (max-width: 767px) {
.c-inspection-check-title {
margin-block: var(--leading-trim);
line-height: 1;
}
}
.c-inspection-check-title ._number {
display: inline-flex;
justify-content: center;
align-items: center;
width: calc(30px + var(--slope-1px) * 10);
height: calc(30px + var(--slope-1px) * 10);
margin-block: var(--leading-trim);
border-radius: 50%;
background: var(--gray);
color: var(--white);
font-weight: 400;
font-size: calc(18px + var(--slope-1px) * 4);
font-family: var(--en-font-family);
line-height: 1;
}
.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;
align-items: flex-start;
grid-template-columns: repeat(2, minmax(auto, 1fr));
font-size: calc(15px + var(--slope-1px) * 1);
}
@media screen and (max-width: 767px) {
.c-inspection-check__list {
grid-template-columns: 100%;
}
}
.c-inspection-check__list > li {
padding-left: 1.2em;
text-indent: -1.2em;
line-height: 1.75;
}
.c-inspection-check__list > li::before {
content: "\0025cf";
position: relative;
padding-right: .2em;
}
/* ============================================================= *
nearby
* ============================================================= */
/* c-nearby-result
=============================== */
.c-showroom-nearby {
display: none;
width: 100%;
}
.c-showroom-nearby__button {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-inline: auto;
}
.c-nearby-result {
display: none;
}
.c-nearby-result__list {
display: none;
margin-block-start: calc(40px + var(--slope-1px) * 24);
}
.c-nearby-result__foot {
display: flex;
justify-content: center;
align-items: center;
margin-inline: auto;
margin-block-start: calc(24px + var(--slope-1px) * 8);
}
.c-nearby-result .js-nearby-hide.c-button > span:after {
rotate: -90deg;
}
.c-nearby-result__loading {
display: block;
width: 100%;
padding: 1em;
text-align: center;
}
.c-nearby-result__loading:before {
content: "\691C\7D22\4E2D...";
color: var(--base-color);
}
.c-nearby-result__head {
display: block;
margin-block: var(--leading-trim) calc(var(--leading-trim) + 16px);
font-size: calc(15px + var(--slope-1px) * 1);
}
.c-showroom-nearby-search__result {
display: none;
}
/* c-showroom-nearby-item
============================== */
.c-showroom-nearby-item {
width: 100%;
padding: calc(24px + var(--slope-1px) * 8);
border-radius: var(--frame-border-radius);
background: var(--white);
box-shadow: var(--shadow);
color: var(--base-color);
font-size: calc(14px + var(--slope-1px) * 4);
container-type: inline-size;
container-name: nearby;
}
.c-showroom-nearby-item:first-child {
display: block;
margin-block: var(--leading-trim);
margin-block-end: calc(20px + var(--slope-1px) * 9);
}
.c-showroom-nearby-item:not(:first-child) {
margin-block-start: calc(15px + var(--slope-1px) * 5);
}
.c-showroom-nearby-item__head {
position: relative;
display: flex;
align-items: center;
padding: 20px calc(20px + var(--slope-1px) * 10);
border-radius: var(--base-border-radius);
background: var(--bg-color);
color: var(--base-color);
text-decoration: none;
font-size: calc(20px + var(--slope-1px) * 4);
transition: background .3s ease-out;
}
.c-showroom-nearby-item__head:hover {
background: var(--border-color);
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__head {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.c-showroom-nearby-item__title {
display: flex;
flex-grow: 1;
justify-content: flex-start;
align-items: center;
gap: 10px;
margin-block: var(--leading-trim);
}
.c-showroom-nearby-item__rank {
margin-block: var(--leading-cap);
font-weight: 500;
font-style: normal;
font-size: calc(22px + var(--slope-1px) * 10);
line-height: 1;
}
.c-showroom-nearby-item__name {
flex-grow: 1;
margin-right: auto;
color: var(--key-color);
font-weight: 500;
font-size: calc(22px + var(--slope-1px) * 10);
transition: text-decoration-color .1s ease;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: 1px;
text-underline-offset: auto;
text-underline-position: from-font;
}
.c-showroom-nearby-item__name:hover {
text-decoration-color: transparent;
}
.c-showroom-nearby-item__head:hover .c-showroom-nearby-item__name {
text-decoration: none;
}
.c-showroom-nearby-item__distance {
display: block;
margin-block: var(--leading-trim);
font-size: calc(15px + var(--slope-1px) * 1);
}
.c-showroom-nearby-item__distance:after {
content: 'km';
}
.c-showroom-nearby-item__body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px 30px;
font-family: var(--en-font-family);
margin-block-start: 20px;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__body {
gap: 0;
}
}
.c-showroom-search[data-search="newcar"] .c-showroom-nearby-item__button {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(var(--item-width), 100%), 1fr));
gap: 10px 8px;
min-width: 100%;
--item-width: 263px;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__profile {
margin-block-end: 20px;
}
}
.c-showroom-nearby-item__close {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px 5px;
width: 100%;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__close {
align-items: baseline;
}
}
.c-showroom-nearby-item__close dt {
position: relative;
display: block;
min-width: 80px;
margin-block: var(--leading-trim);
padding: 5px;
border-radius: 3px;
background: var(--light-color);
text-align: center;
letter-spacing: 0;
font-weight: 500;
font-size: 14px;
font-feature-settings: "palt";
line-height: 1;
line-height: 1;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__close dt {
min-width: 70px;
letter-spacing: -.02em;
}
}
.c-showroom-nearby-item__close dd {
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 1);
font-feature-settings: "palt";
line-height: 1.25;
}
.c-showroom-nearby-item-tel {
position: relative;
display: flex;
align-items: center;
color: var(--key-color);
text-decoration: none;
font-size: calc(20px + var(--slope-1px) * 12);
pointer-events: none;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item-tel {
justify-content: center;
/* Layout */
width: 100%;
max-width: 19.33333em;
padding-block: 10px;
padding-inline: .5em 1em;
border: 2px solid;
border-radius: var(--ovall-radius);
text-decoration: none;
pointer-events: all;
appearance: none;
}
}
@media screen and (max-width: 560px) {
.c-showroom-nearby-item-tel {
width: 100%;
max-width: 100%;
}
}
.c-showroom-nearby-item-tel__icon {
display: flex;
flex-direction: column;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: calc(28px + var(--slope-1px) * 12);
height: calc(28px + var(--slope-1px) * 12);
margin-right: 5px;
color: var(--key-color);
}
.c-showroom-nearby-item-tel__icon svg path {
fill: none;
stroke: var(--key-color);
}
.c-showroom-nearby-item-tel__number {
display: block;
margin-block: var(--leading-trim);
font-weight: 600;
font-size: calc(24px + var(--slope-1px) * 16);
}
.c-showroom-nearby-item__button {
flex-grow: 1;
min-width: 300px;
}
@media screen and (max-width: 767px) {
.c-showroom-nearby-item__button {
min-width: unset;
margin-block-start: 10px;
}
}
@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 {
flex-direction: column;
width: 100%;
}
.c-showroom-nearby-item__contact > * {
flex: 1;
width: 100%;
max-width: 100%;
}
}
/* c-showroom-search
=============================== */
.c-showroom-search-frame {
display: grid;
grid-template-columns: 100%;
padding: calc(30px + var(--slope-1px) * 20) calc(24px + var(--slope-1px) * 16);
border-radius: var(--frame-border-radius);
background: var(--grade-color);
color: var(--white);
font-family: var(--en-font-family);
}
.c-showroom-search__head {
display: flex;
align-items: center;
width: fit-content;
margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(22px + var(--slope-1px) * 3));
margin-inline: auto;
text-align: center;
font-size: 28px;
}
.c-showroom-search__body {
width: 100%;
max-width: 850px;
margin-inline: auto;
}
.c-showroom-search__form {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
grid-row: 100%;
width: 100%;
height: calc(60px + var(--slope-1px) * 2);
}
.c-showroom-search__input {
display: grid;
grid-template-columns: subgrid;
grid-column: 1/3;
grid-row: 1/2;
overflow: hidden;
height: calc(60px + var(--slope-1px) * 2);
border: 0;
border-radius: var(--ovall-radius);
background: #fff;
}
.c-showroom-search__input input {
display: flex;
align-items: center;
width: 100%;
padding-inline: calc(16px + var(--slope-1px) * 8) 0;
outline: none;
border: 0;
background-color: var(--white);
font-weight: 400;
line-height: 28px;
appearance: none;
}
@media screen and (max-width: 560px) {
.c-showroom-search__input input::placeholder {
font-size: 15px;
}
}
.c-showroom-search__input input:focus {
background-color: var(--white);
}
.c-showroom-search__input input:-webkit-autofill {
box-shadow: 0 0 0px 1000px var(--white) inset;
}
.c-showroom-search__button {
position: relative;
z-index: 1;
flex-shrink: 0;
grid-column: 2/3;
grid-row: 1/2;
overflow: hidden;
min-width: 0%;
margin: var(--_button-space);
border-radius: var(--ovall-radius);
--_button-space:8px;
}
.c-showroom-search__button button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: calc(4px + var(--slope-1px) * 2);
width: max-content;
height: 100%;
margin: 0;
padding: 14px calc(11px + var(--slope-1px) * 13);
outline: none;
border: 0;
background: var(--base-color);
color: var(--white);
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1;
cursor: pointer;
transition: filter .2s ease-out;
}
@media (any-hover: hover) {
.c-showroom-search__button button:hover {
filter: brightness(1.4);
}
}
.c-showroom-search__button button > i {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: calc(16px + var(--slope-1px) * 2);
height: calc(16px + var(--slope-1px) * 2);
min-width: 0%;
}
.c-showroom-search__button button > i svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-showroom-search__button button > i svg path {
fill: var(--white);
}
.c-showroom-search__gps {
max-width: 20.44444em;
margin-inline: auto;
--key-color: var(--base-color);
margin-block-start: calc(10px + var(--slope-1px) * 5);
}
.c-showroom-search__link {
display: inline-flex;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
margin-block-start: calc(10px + var(--slope-1px) * 5);
}
@media screen and (max-width: 767px) {
.c-showroom-search__link {
gap: 4px;
}
}
.c-showroom-search__showroom {
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
color: var(--white);
}
.c-showroom-search__showroom span {
font-weight: 500;
font-style: normal;
font-size: calc(14px + var(--slope-1px) * 2);
line-height: 100%;
transition: text-decoration-color .3s var(--animation), color .3s var(--animation);
/* 16px */
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-color: currentColor;
text-decoration-thickness: .025em;
text-underline-offset: 10%;
text-underline-position: from-font;
}
.c-showroom-search__showroom svg {
width: calc(20px + var(--slope-1px) * 4);
height: calc(20px + var(--slope-1px) * 4);
}
.c-showroom-search__showroom svg path {
fill: currentColor;
}
.c-showroom-search__showroom:hover span {
text-decoration-color: transparent;
}
/* nearby
=============================== */
.c-showroom-nearby {
text-align: center;
}
.c-showroom-nearby__list {
display: none;
text-align: left;
margin-block-start: calc(26px + var(--slope-1px) * 6);
}
.c-showroom-nearby__button {
max-width: 368px;
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-block-start: 2em;
}
/* ============================================================= *
newcar
* ============================================================= */
/* ============================================================= *
reservation
* ============================================================= */
/* c-reservation-block
============================== */
.c-reservation-block {
position: relative;
padding: calc(48px + var(--slope-1px) * -24) calc(16px + var(--slope-1px) * 16) 50px;
border-radius: var(--frame-border-radius);
background: var(--key-color);
color: var(--white);
}
.c-reservation-block__head {
position: relative;
z-index: 1;
}
@media screen and (max-width: 767px) {
.c-reservation-block__head {
margin-block-start: var(--leading-cap);
}
}
.c-reservation-block-title {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
margin-block: 0 calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 12));
font-weight: 700;
}
@media screen and (max-width: 767px) {
.c-reservation-block-title {
margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 12));
}
}
.c-reservation-block-title .--en {
position: relative;
z-index: -1;
grid-column: 1 / 2;
grid-row: 1/2;
width: 100cqi;
margin-block: var(--leading-cap);
margin-inline: calc(50% - 50cqi);
color: var(--white);
text-align: center;
white-space: nowrap;
word-wrap: break-word;
word-break: keep-all;
letter-spacing: -.025em;
font-weight: 500;
font-style: normal;
font-size: calc(80px + var(--slope-1px) * 48);
font-family: var(--en-font-family);
line-height: 100%;
/* 128px */
opacity: .1;
}
@media screen and (max-width: 767px) {
.c-reservation-block-title .--en {
color: var(--bg-color);
opacity: .2;
}
}
.c-reservation-block-title h2.--ja {
display: block;
align-self: flex-end;
grid-column: 1 / 2;
grid-row: 1/2;
margin-block: var(--leading-cap);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
letter-spacing: 0;
font-weight: 700;
font-size: calc(20px + var(--slope-1px) * 16);
font-family: var(--ja-font-family);
line-height: 1.25;
}
.c-reservation-block-lead {
margin-block: 0 calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 6));
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
font-size: calc(14px + var(--slope-1px) * 4);
}
.c-reservation-block__body {
display: flex;
justify-content: center;
width: 100%;
max-width: 564px;
margin-inline: auto;
margin-block-start: calc(24px + var(--slope-1px) * 6);
}
/* c-reservation-button
============================== */
.c-reservation-button {
position: relative;
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
gap: calc(5px + var(--slope-1px) * 5);
overflow: hidden;
width: 100%;
height: 80px;
max-width: 100%;
padding-block: calc(var(--leading-trim) + 16px);
padding-inline: calc(var(--_arrow-size)* 1.5);
border-radius: var(--ovall-radius);
background: var(--_bg-color);
/* style */
color: var(--_color);
text-decoration: none;
font-weight: 700;
/* Layout */
font-size: calc(20px + var(--slope-1px) * 4);
line-height: 1.75;
transition: background .3s var(--animation), color .3s var(--animation), filter .3s var(--animation), border-color .3s var(--animation), translate .3s var(--animation);
appearance: none;
--_arrow-size: calc(24px + var(--slope-1px) * 8);
--_color:var(--base-color);
--_bg-color: var(--white);
--_arrow-color: var(--_color);
--_hover-color: var(--white);
--_border-color: var(--white);
--_hover-bg-color: var(--base-color);
--_hover-border-color: var(--base-color);
}
@media screen and (max-width: 767px) {
.c-reservation-button {
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
}
}
.c-reservation-button::after {
content: "";
position: absolute;
top: 0;
right: calc(var(--_arrow-size) / 2);
bottom: 0;
width: var(--_arrow-size);
height: var(--_arrow-size);
margin: auto 0;
background: currentColor;
mask: var(--icon-right-circle) 50% 50%/contain no-repeat;
transition: background .2s;
transition: background .3s var(--animation);
}
@media (any-hover: hover) {
.c-reservation-button:hover {
background: var(--base-color);
color: var(--white);
}
}
.c-reservation-button > * {
position: relative;
z-index: 1;
}
.c-reservation-button__icon {
display: flex;
justify-content: center;
align-items: center;
width: calc(26px + var(--slope-1px) * 6);
height: calc(26px + var(--slope-1px) * 6);
aspect-ratio: 1;
}
.c-reservation-button__icon svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-reservation-button__icon svg path {
fill: currentColor;
}
.c-reservation-button__title {
display: block;
text-align: center;
font-weight: 700;
font-size: clamp(20px, 14.87813px + .66778vw, 24px);
line-height: 1;
}
/* c-reservation-wrap
============================== */
.c-reservation-wrap {
position: relative;
display: block;
width: fit-content;
min-width: 290px;
text-decoration: none;
--label-pos:12px;
}
.c-reservation-wrap.--stretch {
width: 100%;
min-width: 100%;
}
.c-reservation-wrap__notes {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
margin-block: calc(var(--leading-trim) + calc(14px + var(--slope-1px) * 2)) var(--leading-trim);
margin-inline: auto;
color: currentColor;
text-align: center;
text-decoration: underline;
transition: text-decoration-color .1s ease;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
text-underline-offset: .25em;
}
.c-reservation-wrap__notes:hover {
text-decoration-color: transparent;
}
.c-reservation-wrap__label {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
gap: .2em;
width: 100%;
margin-block: var(--leading-cap) calc(var(--leading-cap) + var(--label-pos));
margin-inline: auto;
color: var(--base-color);
color: currentColor;
font-weight: 500;
font-size: clamp(13px, 4.03673px + 1.16861vw, 20px);
}
.c-reservation-wrap__label.--stretch {
width: 100%;
}
@media screen and (max-width: 767px) {
.c-reservation-wrap__label {
min-width: fit-content;
}
}
.c-reservation-wrap__label::before {
content: "\00ff3c";
position: relative;
left: 0;
width: 1em;
height: 1lh;
color: currentColor;
}
.c-reservation-wrap__label:after {
content: "\00ff0f";
position: relative;
right: 0;
width: 1em;
height: 1lh;
color: currentColor;
}
/* ============================================================= *
Showroom
* ============================================================= */
/* c-showroom-close
============================== */
.c-showroom-close {
display: inline-flex;
flex-wrap: wrap;
gap: calc(10px + var(--slope-1px) * 10) 30px;
font-family: var(--en-font-family);
margin-block-end: 30px;
}
.c-showroom-close > dl {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 5px;
}
@media screen and (max-width: 767px) {
.c-showroom-close > dl {
align-items: baseline;
}
}
.c-showroom-close > dl dt {
position: relative;
display: block;
min-width: 80px;
margin-block: var(--leading-trim);
padding: 5px;
border-radius: 3px;
background: var(--light-color);
text-align: center;
letter-spacing: 0;
font-weight: 500;
font-size: calc(14px + var(--slope-1px) * 2);
font-feature-settings: "palt";
line-height: 1;
line-height: 125%;
}
@media screen and (max-width: 767px) {
.c-showroom-close > dl dt {
min-width: 70px;
letter-spacing: -.02em;
}
}
.c-showroom-close > dl dd {
word-break: keep-all;
overflow-wrap: anywhere;
letter-spacing: -.03em;
font-weight: 500;
font-size: calc(16px + var(--slope-1px) * 4);
font-feature-settings: "palt";
line-height: 125%;
}
/* c-showroom-list
============================== */
.c-showroom-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(10px + var(--slope-1px) * 11);
}
@media screen and (max-width: 767px) {
.c-showroom-list {
grid-template-columns: repeat(2, 1fr);
}
}
/* c-showroom-card
=============================== */
.c-showroom-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
height: 100%;
padding: calc(15px + var(--slope-1px) * 9);
border-radius: var(--frame-border-radius);
background: #fff;
box-shadow: var(--shadow);
text-decoration: none;
}
.c-showroom-card__link {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.c-showroom-card__image {
position: relative;
overflow: hidden;
width: 100%;
min-height: 0%;
aspect-ratio: 4/3;
border-radius: var(--small-border-radius);
}
.c-showroom-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all .3s;
}
.c-showroom-card:hover .c-showroom-card__image img {
transform: scale(1.03);
}
.c-showroom-card__contents {
display: flex;
flex-direction: column;
flex-grow: 1;
width: 100%;
padding: calc(15px + var(--slope-1px) * 15) 0 0;
}
.c-showroom-card__shop {
position: relative;
z-index: 0;
margin-block: var(--leading-trim) 0;
border-bottom: 1px solid var(--border-color);
font-weight: 700;
font-size: calc(18px + var(--slope-1px) * 6);
transition: text-decoration-color .1s ease;
text-decoration-color: currentColor;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: .05em;
text-underline-offset: auto;
text-underline-position: from-font;
padding-block-end: calc(var(--leading-trim) + calc(15px + var(--slope-1px) * 5));
margin-block-end: calc(15px + var(--slope-1px) * 5);
}
.c-showroom-card:hover .c-showroom-card__shop {
text-decoration-color: transparent;
}
.c-showroom-card__body {
display: flex;
flex-direction: column;
flex-grow: 1;
font-size: calc(15px + var(--slope-1px) * 1);
font-family: var(--en-font-family);
line-height: 1.25;
padding-block-end: calc(var(--leading-trim) + calc(15px + var(--slope-1px) * 15));
}
.c-showroom-card__zip {
display: block;
margin-block: var(--leading-cap) calc(var(--leading-cap) + calc(15px + var(--slope-1px) * 5));
}
.c-showroom-card__address {
display: block;
margin-block: var(--leading-cap) calc(var(--leading-cap) + calc(15px + var(--slope-1px) * 5));
}
.c-showroom-card__tel {
display: flex;
justify-content: flex-start;
align-items: center;
margin-block: var(--leading-cap) var(--leading-trim);
color: var(--key-color);
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 7);
}
.c-showroom-card__facility {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: calc(4px + var(--slope-1px) * 2);
}
@media screen and (max-width: 560px) {
.c-showroom-card__facility {
grid-template-columns: repeat(3, 1fr);
}
}
.c-showroom-card__facility > li {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
padding: 6px;
border-radius: 5px;
background: var(--light-color);
}
.c-showroom-card__facility > li :is(svg, img) {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-showroom-card__facility > li svg path {
fill: var(--key-color);
}
.c-showroom-card__facility > li.is-disabled {
background: var(--bg-color);
}
.c-showroom-card__facility > li.is-disabled svg path {
fill: var(--disabled);
}
/* =============================================================
sr
* ============================================================= */
/* c-sr-contact
============================================================= */
.c-sr-contact {
position: relative;
top: calc(-35px + var(--slope-1px) * -30);
z-index: 1;
grid-area: side;
}
@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-block-start: 20px;
}
}
@media screen and (max-width: 767px) {
.c-sr-contact {
top: 0;
}
}
.c-sr-contact__inner {
gap: 25px;
width: 100%;
}
@media screen and (min-width: 768px) {
.c-sr-contact__inner {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
padding: clamp(0px, -28.69898px + 7.65306vw, 30px) clamp(0px, -38.26531px + 10.20408vw, 40px);
border: 1px solid var(--light-gray);
border-radius: 0 0 8px 8px;
background: var(--all-white, #fff);
background: #fff;
}
._row > .c-sr-contact__inner {
position: relative;
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 290px auto;
grid-template-areas: "tel data"
"nav data";
row-gap: 10px;
column-gap: 30px;
}
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
._row > .c-sr-contact__inner {
display: flex;
flex-direction: column;
row-gap: 25px;
}
}
@media screen and (max-width: 767px) {
.c-sr-contact__inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
}
.c-sr-contact__tel {
display: flex;
justify-content: center;
align-items: center;
grid-area: tel;
gap: 8px;
margin-block: var(--leading-trim);
color: var(--primary);
font-weight: 600;
font-size: 32px;
font-family: var(--en-font-family);
line-height: 1;
}
@media screen and (max-width: 767px) {
.c-sr-contact__tel {
display: none;
}
}
.c-sr-contact__tel > i {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-style: normal;
}
.c-sr-contact__tel > i svg {
width: calc(25px + var(--slope-1px) * 15);
height: calc(25px + var(--slope-1px) * 15);
}
.c-sr-contact__nav {
display: grid;
grid-area: nav;
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 {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 86px 1fr;
grid-area: data;
row-gap: calc(10px + var(--slope-1px) * 10);
width: max-content;
margin-inline: auto;
letter-spacing: 0;
font-size: calc(12px + var(--slope-1px) * 4);
font-family: var(--ja-font-family);
}
@media screen and (max-width: 767px) {
.c-sr-contact__data {
grid-template-columns: auto auto;
gap: 10px 15px;
width: 100%;
}
}
.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 {
position: relative;
padding-right: calc(5px + var(--slope-1px) * 15);
text-align: left;
}
@media screen and (min-width: 768px) {
.c-sr-contact__data > dl > dt {
grid-column: 1 / 2;
}
}
.c-sr-contact__data > dl > dt:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
height: .6875em;
margin-block: auto;
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 {
grid-column: 1/3;
width: 100%;
text-align: center;
line-height: 1;
margin-block-start: var(--leading-trim);
}
.c-sr-contact__data small {
font-size: 13px;
}
.c-sr-contact__notes {
text-align: left;
font-size: calc(12px + var(--slope-1px) * 1);
}
@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 {
position: relative;
/* display */
display: flex;
justify-content: center;
align-items: center;
gap: calc(5px + var(--slope-1px) * 5);
overflow: hidden;
width: 100%;
height: 3.75em;
max-width: 18.125em;
padding-block: 1.25em;
padding-inline: calc((.625em + var(--circle-size)) * .5 + .25em) calc(.625em + var(--circle-size) + .25em);
border: 0;
border-radius: var(--ovall-radius);
/* common */
background-image: linear-gradient(to bottom, var(--grad-start) 0%, var(--grad-end) 100%);
/* style */
color: var(--_color);
text-decoration: none;
font-weight: 500;
/* Layout */
font-size: calc(15px + var(--slope-1px) * 1);
transition: --grad-start .3s var(--animation), --grad-end .3s var(--animation), background .3s var(--animation), color .3s var(--animation);
appearance: none;
/* 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);
/* size */
--circle-size: 30px;
--dot-size: 6px;
--right-size: calc((var(--circle-size) - var(--dot-size))/2);
}
@media screen and (max-width: 767px) {
.c-sr-contact-button {
gap: 0;
height: 3.33333em;
max-width: 19.33333em;
margin-inline: auto;
padding-block: .66667em;
padding-inline: 1em;
}
}
.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: "";
position: absolute;
top: 0;
right: 12px;
bottom: 0;
z-index: 1;
width: var(--circle-size);
height: var(--circle-size);
aspect-ratio: 1 / 1;
margin: auto 0;
border-radius: 100%;
background-color: var(--_dots-color);
mask: var(--icon-arrow-down) center center/contain no-repeat;
opacity: 1;
transition: translate .2s ease-out, opacity .2s ease-out;
transform-origin: center center;
translate: 0 0;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center center;
}
.c-sr-contact-button.js-scroll > span::after {
transform-origin: center center;
mask-image: var(--icon-arrow-down);
translate: 0 -8px;
}
.c-sr-contact-button > span {
z-index: 1;
margin-block: var(--leading-trim);
text-align: center;
letter-spacing: 0;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
.c-sr-contact-button > span {
width: 100%;
word-break: keep-all;
overflow-wrap: anywhere;
}
}
@media screen and (max-width: 767px) {
.c-sr-contact-button > span {
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);
opacity: 0;
transition: all .2s ease-out;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center center;
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;
right: var(--right-size);
bottom: 0;
width: var(--circle-size);
height: var(--circle-size);
margin: auto 0;
border-radius: 50%;
background-color: var(--_circle-color);
transition: all .4s cubic-bezier(.37, 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 {
display: flex;
justify-content: center;
align-items: center;
width: 1.78571em;
height: 1.78571em;
}
.c-sr-contact-button > i img {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-sr-contact-button svg path {
fill: var(--_color);
transition: all .3s var(--animation);
}
@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 {
opacity: 1;
transition: all .2s ease-out .1s;
--_dots-color: var(--_hover-circle-color);
--dot-size: var(--circle-size);
}
: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 {
background-color: var(--_hover-arrow-color);
opacity: 1;
transition: all .4s;
translate: 0 0;
}
: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 {
background-color: var(--_hover-arrow-color);
opacity: 0;
transition: all .4s;
translate: 0 8px;
}
}
/* c-sr-contact-section
============================================================== */
.c-sr-contact-section {
position: relative;
padding-block: calc(30px + var(--slope-1px) * 45) calc(50px + var(--slope-1px) * 25);
color: #fff;
margin-block-start: calc(64px + var(--slope-1px) * 36);
}
.c-sr-contact-section:before {
content: "";
position: absolute;
top: 0;
z-index: -1;
display: block;
width: 100cqi;
height: 100%;
margin-inline: calc(50% - 50cqi);
background: url(../img/bg-contact.jpg) 50% 50%/cover no-repeat;
}
.c-sr-contact-section__head {
margin-block-end: calc(25px + var(--slope-1px) * 10);
}
.c-sr-contact-section__head .c-section-header {
align-items: baseline;
}
.c-sr-contact-section-grid {
display: grid;
align-items: flex-end;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-block-end: 10px;
}
@media screen and (max-width: 767px) {
.c-sr-contact-section-grid {
grid-template-columns: 100%;
gap: 10px;
}
}
.c-sr-contact-section-button {
display: flex;
gap: 10px;
}
.c-sr-contact-section-button > * {
flex: 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 {
display: grid;
align-items: center;
grid-template-columns: auto 290px auto;
gap: 30px;
padding: calc(30px + var(--slope-1px) * -10) calc(20px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * 10);
border: 1px solid var(--white);
border-radius: 8px;
background: rgba(255, 255, 255, .2);
margin-block-start: calc(40px + var(--slope-1px) * -20);
}
@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;
justify-content: center;
align-items: center;
gap: 10px;
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) {
color: var(--white);
opacity: .7;
}
}
.c-sr-contact-section-guide__foot {
overflow: hidden;
border-radius: 8px;
}
.c-sr-contact-section-guide__foot img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* c-sr-sticky
============================================================== */
.c-sr-sticky {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
display: none;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: var(--sticky-height);
max-width: calc(100cqi - (var(--inner-padding) * 2));
margin-block: var(--sticky-padding);
margin-inline: auto;
padding-block: 12px 15px;
padding-inline: 15px;
border: 1px solid var(--light-gray);
border-radius: 8px;
background: var(--white);
opacity: 0;
transition: translate .3s var(--animation), opacity .2s var(--animation);
pointer-events: none;
translate: 0 100%;
}
@media screen and (max-width: 767px) {
body.is-scrolled .c-sr-sticky {
opacity: 1;
pointer-events: auto;
translate: 0 0;
}
}
/* c-sr-sticky-contact
============================================================= */
.c-sr-sticky-contact {
position: relative;
width: 100%;
margin-block: 10px;
}
.c-sr-sticky-contact__inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 15px;
width: 100%;
}
.c-sr-sticky-contact__nav {
display: flex;
gap: 9px;
}
.c-sr-sticky-contact__data {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: auto auto;
gap: 10px 15px;
width: 100%;
margin-inline: auto;
letter-spacing: 0;
font-size: calc(12px + var(--slope-1px) * 4);
font-family: var(--ja-font-family);
}
.c-sr-sticky-contact__data > dl {
display: grid;
justify-content: flex-start;
grid-template-columns: auto auto;
margin-block: var(--leading-trim);
line-height: 1;
}
.c-sr-sticky-contact__data > dl > dt {
position: relative;
padding-right: calc(5px + var(--slope-1px) * 15);
text-align: left;
}
.c-sr-sticky-contact__data > dl > dt:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
height: .6875em;
margin-block: auto;
background: currentColor;
}
.c-sr-sticky-contact__data > dl > dd {
margin-left: calc(5px + var(--slope-1px) * 15);
}
.c-sr-sticky-contact__data > p {
grid-column: 1/3;
width: 100%;
text-align: center;
line-height: 1;
margin-block-start: var(--leading-trim);
}
.c-sr-sticky-contact__data small {
font-size: 13px;
}
.c-sr-sticky-contact__notes {
text-align: left;
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
font-size: calc(12px + var(--slope-1px) * 1);
}
/* c-sr-contact-button
============================== */
.c-sr-sticky-contact-button {
position: relative;
/* display */
display: flex;
justify-content: center;
align-items: center;
gap: 0;
overflow: hidden;
width: 100%;
height: 3.07692em;
margin-inline: auto;
padding-block: .76923em;
padding-inline: 1em;
border: 0;
border-radius: var(--ovall-radius);
/* common */
background-image: linear-gradient(to bottom, var(--grad-start) 0%, var(--grad-end) 100%);
/* style */
color: var(--_color);
text-decoration: none;
font-weight: 500;
/* Layout */
font-size: 13px;
appearance: none;
/* 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);
}
.c-sr-sticky-contact-button > span {
z-index: 1;
width: fit-content;
margin-block: var(--leading-trim);
text-align: center;
letter-spacing: 0;
line-height: 1.3;
}
.c-sr-sticky-contact-button > i {
display: flex;
justify-content: center;
align-items: center;
width: 1.78571em;
height: 1.78571em;
}
.c-sr-sticky-contact-button > i img {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-sr-sticky-contact-button svg path {
fill: var(--_color);
transition: all .3s var(--animation);
}
/* ============================================================= *
common usedcar
* ============================================================= */
/* c-usedcar-nav
=============================== */
.c-usedcar-nav {
display: flex;
flex-direction: column;
gap: 40px;
margin-block-end: calc(40px + var(--slope-1px) * 40);
}
/* c-usedcar-search-grid
=============================== */
.c-usedcar-search-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--item-width), 100%), 1fr));
gap: 10px;
--item-width:141px;
}
@media screen and (max-width: 767px) {
.c-usedcar-search-grid {
--item-width:105px;
}
}
/* c-usedcar-search-card
=============================== */
.c-usedcar-search-card {
display: flex;
flex-direction: column;
flex-shrink: 0;
justify-content: center;
align-items: center;
gap: calc(5px + var(--slope-1px) * 5);
padding: calc(6px + var(--slope-1px) * 4) 10px calc(12px + var(--slope-1px) * 2) 10px;
border: 1px solid var(--light-gray);
border-radius: 8px;
background: var(--white);
text-align: center;
text-decoration: none;
font-weight: 600;
}
.c-usedcar-search-card__image {
display: flex;
justify-content: center;
align-items: 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%;
object-fit: contain;
}
.c-usedcar-search-card__text {
margin-block: var(--leading-trim);
}
/* c-usedcar-contact
=============================== */
.c-usedcar-contact {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
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);
border: 1px solid var(--light-gray);
border-radius: 8px;
background: var(--white);
margin-block-end: calc(64px + var(--slope-1px) * 56);
margin-block-start: 40px;
}
.c-usedcar-contact__head {
width: 100%;
border-bottom: 1px solid var(--light-gray);
text-align: center;
padding-block-end: 30px;
}
.c-usedcar-contact-title {
margin-block: var(--leading-trim);
color: var(--primary);
font-weight: 500;
font-size: calc(22px + var(--slope-1px) * 10);
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));
row-gap: 40px;
width: 100%;
padding-inline: 40px;
--item-width: 420px;
}
@media screen and (max-width: 767px) {
.c-usedcar-contact__grid {
padding-inline: 0;
}
}
.c-usedcar-contact__item {
display: grid;
justify-content: center;
align-items: center;
grid-template-rows: subgrid;
grid-row: span 2;
gap: calc(20px + var(--slope-1px) * 4);
}
.c-usedcar-contact__item .c-button {
max-width: 298px;
margin-inline: auto;
}
.c-usedcar-contact__item p {
margin-block: var(--leading-trim);
color: var(--text-dark, #2f3134);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
font-weight: 400;
font-size: calc(16px + var(--slope-1px) * 4);
line-height: 1.8;
}
.c-usedcar-contact__item p em {
color: var(--primary);
font-weight: 400;
font-style: normal;
}
.c-usedcar-contact__item p small {
display: block;
word-break: break-all;
font-size: calc(12px + var(--slope-1px) * 1);
}
@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;
overflow: hidden;
max-width: 413px;
border-radius: 20px;
text-decoration: none;
}
.c-usedcar-card__image {
overflow: hidden;
aspect-ratio: 413 / 320;
}
.c-usedcar-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-usedcar-card__contents {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
align-self: stretch;
gap: 20px;
padding: calc(20px + var(--slope-1px) * 15) calc(20px + var(--slope-1px) * 20) 25px calc(20px + var(--slope-1px) * 20);
background: var(--white);
}
.c-usedcar-card__head {
margin-block: var(--leading-trim);
font-weight: 600;
font-size: calc(21px + var(--slope-1px) * 3);
}
.c-usedcar-card__body {
width: 100%;
}
.c-usedcar-card__data {
display: flex;
justify-content: flex-start;
gap: 15px;
margin-block: var(--leading-trim);
border-bottom: 1px solid;
font-size: calc(13px + var(--slope-1px) * 3);
padding-block-end: 20px;
}
.c-usedcar-card__data dl {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.c-usedcar-card__data dl dt {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 12px 20px;
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 {
display: flex;
align-items: baseline;
gap: .5em;
color: var(--primary);
font-weight: 700;
}
.c-usedcar-card__price ._head {
font-size: 16px;
}
.c-usedcar-card__price ._body em {
font-weight: 600;
font-style: normal;
font-size: 21px;
font-family: var(--en-font-family);
line-height: 150%;
}
/* ============================================================= *
Auto gallery
* ============================================================= */
/* p-usedcar-ag
============================================================ */
.c-usedcar-ag {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-block-start: 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;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.c-usedcar-ag__item > p {
width: 100%;
margin-block: var(--leading-trim);
}
/* p-usedcar-other
============================================================ */
.c-usedcar-other {
position: relative;
z-index: 1;
font-size: calc(14px + var(--slope-1px) * 2);
margin-block-start: calc(20px + var(--slope-1px) * 20);
}
.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: "";
width: 1.5625em;
height: 1.5625em;
background: var(--base-color);
mask: var(--icon-check) 50% 50%/contain no-repeat;
color: var(--primary);
}
@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;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
@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;
border-radius: var(--ovall-radius);
background: var(--white);
/* 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;
border-radius: .5em;
background-color: var(--key-color);
}
.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: "";
display: block;
visibility: hidden;
clear: both;
}
/* other
====================================== */
.u-strong {
font-weight: bold !important;
}
.u-pointer {
cursor: pointer;
}
.u-nowrap {
white-space: nowrap;
}
.u-color-honda {
color: #cc0000 !important;
}
.u-color-ciao {
color: #0068b6 !important;
}
.u-color-mamoru {
color: #8fc31f !important;
}
.u-rotate-90 {
transform: rotate(90deg);
}
/* animationn
====================================== */
.u-no-transition {
transition: none !important;
}
/* u-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-right: auto;
margin-left: auto;
}