/* =============================================================
Custom Properties
* ============================================================= */
:root {
/* ========================================
color
======================================== */
/* text color */
--base-color: #000;
/* border color */
--border-color:#ccc;
/* bg color */
--bg-color:#f5f5f5;
--bg-color-red-01:#ffeae9;
--bg-color-red-02:#f55a57;
/* key color */
--key-color: #e50012;
/* maintenance color */
--ciao-color:#0168b7;
--mamoru-color:#8ec220;
/* color */
--white:#fff;
--black: #000;
--gray:#7e7d7c;
--lightgray:#d9d9d9;
/* ========================================
layouts
======================================== */
--header-height: 90px;
--sticky-height:70px;
--contents-width: 1040;
--contents-width-px: calc(var(--contents-width) * 1px);
--inner-width: 1200;
--inner-width-px: calc(var(--inner-width) * 1px);
--outer-frame-width:1366;
--outer-frame-width-px: calc(var(--outer-frame-width) * 1px);
--inner-padding: calc(15px + var(--slope-1px) * 35);
--outer-padding: calc(15px + var(--slope-1px) * 68);
--inner-overflow: calc(var(--vw) * 50 - var(--inner-width-px) * .5);
--contents-padding-inline: calc(15px + var(--slope-1px) * 35);
/* utility */
--vw: 1vw;
--vh: 1vh;
--slope-1px: clamp(0px, -.95663px + .2551vw, 1px);
--base-border-radius: 20px;
--ovall-radius:calc(1px / 0);
--loading-time: 2.4s;
/* ========================================
font
======================================== */
/* size */
--line-height: 1.5;
--leading-trim: calc((1em - 1lh) / 2);
--is-support-lh: initial;
--is-support-not-lh: "";
/* z-index */
--header-z-index: 1000;
--navigation-z-index: 200;
--modal-z-index: 1001;
--local-z-index: 0;
/* family */
--base-font-family: "Montserrat", "Zen Kaku Gothic New", sans-serif;
--en-font-family: "Montserrat", sans-serif;
--ja-font-family: "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-arrow: url("data:image/svg+xml;utf8,");
--icon-external: url("data:image/svg+xml;utf8,");
--icon-search: url("data:image/svg+xml;utf8,");
--icon-angle: url("data:image/svg+xml;utf8,");
--icon-circle: url("data:image/svg+xml;utf8,");
--icon-plus: url("data:image/svg+xml;utf8,");
--icon-minus: url("data:image/svg+xml;utf8,");
--icon-question: url("data:image/svg+xml;utf8,");
--icon-close: url("data:image/svg+xml;utf8,");
}
@media screen and (max-width: 960px) {
:root {
--header-height: 70px;
}
}
:where(:lang(en)) {
--leading-trim: var(--is-support-lh, calc((1cap - 1lh) / 2)) var(--is-support-not-lh, 0px);
}
@supports not (top: 1lh) {
:where(:root) {
--is-support-lh: "";
--is-support-not-lh: initial;
}
}
*[data-intersection] {
opacity: 0;
transition: opacity 1s, transform .8s;
transform: translateY(30px);
}
*[data-intersection][data-intersecting=true] {
opacity: 1;
transform: translateY(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: 400;
font-size: calc(1.4rem + var(--slope-1px) * 2);
font-family: var(--base-font-family);
font-feature-settings: "palt";
line-height: var(--line-height);
-webkit-text-size-adjust: 100%;
}
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;
}
img[src$=".svg"] {
opacity: 0;
}
a {
color: var(--base-color);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .25em;
}
a:hover {
text-decoration: none;
}
a.js-tel {
text-decoration: none;
}
a.js-tel._active {
text-decoration: underline;
}
a.js-tel._inactive {
color: var(--base-color);
text-decoration: none;
}
button {
cursor: pointer;
}
sup {
vertical-align: super;
font-size: 70%;
}
sub {
vertical-align: sub;
font-size: 70%;
}
*[data-anchor-id] {
scroll-margin-top: var(--header-height);
}
*[data-toggle-id] {
display: none;
}
*[data-intersection][data-intersection] {
opacity: 0;
transition: opacity .5s ease-out .4s;
}
*[data-intersection][data-intersection][data-intersecting=true] {
opacity: 1;
transition: opacity .5s ease-out .4s;
}
*[data-intersection][data-intersection-fade] {
opacity: 0;
transition: all .5s ease-out .2s;
}
*[data-intersection][data-intersection-fade][data-intersecting=true] {
opacity: 1;
transition: all .5s ease-out .2s;
}
*[data-intersection][data-intersection-fade-up] {
opacity: 0;
transition: opacity .4s ease-out .5s, transform 1.4s cubic-bezier(.215, .61, .355, 1) .5s;
transform: translateY(60px);
}
*[data-intersection][data-intersection-fade-up][data-intersecting=true] {
opacity: 1;
transition: opacity .4s ease-out .5s, transform 1.4s cubic-bezier(.215, .61, .355, 1) .5s;
transform: translateY(0);
}
*[data-intersection][data-intersection-scale] {
opacity: 0;
transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
transition-property: transform, opacity;
transform: scale(.5);
}
*[data-intersection][data-intersection-scale][data-intersecting=true] {
opacity: 1;
transition: opacity 1.4s cubic-bezier(.215, .61, .355, 1) .5s, transform 1.4s cubic-bezier(.215, .61, .355, 1) .5s;
transform: scale(1);
}
/* =============================================================
Loader
* ============================================================= */
.l-loader {
position: fixed;
top: 0;
left: 0;
z-index: 100000;
display: grid;
overflow: hidden;
width: 100%;
height: 100%;
background: #fff;
will-change: opacity;
pointer-events: none;
place-items: center;
}
.l-loader::before, .l-loader::after {
content: "";
position: absolute;
aspect-ratio: 1/1;
margin: auto;
background: var(--key-color);
clip-path: circle(0% at 50% 50%);
inset-inline-start: 50%;
inset-block-start: 50%;
translate: -50% -50%;
min-inline-size: 100vw;
min-block-size: 100vh;
}
.l-loader::after {
background: var(--bg-color-red-01) url(../img/bg-circle.png) no-repeat 50% 0/100% auto;
}
body.is-loaded .l-loader {
visibility: hidden;
opacity: 0;
transition: all .3s linear;
transition-delay: 1.6s;
}
body.is-loaded .l-loader::before, body.is-loaded .l-loader::after {
transition: all 1.6s var(--easeOutQuart);
transition-delay: .8s;
clip-path: circle(100% at 50% 50%);
}
body.is-loaded .l-loader:after {
transition-delay: 1s;
transition-duration: 1.4s;
}
@keyframes shutterOpen {
0% {
width: 0;
height: 4px;
}
50% {
width: 100%;
height: 4px;
}
80% {
width: 100%;
height: 100%;
}
100% {
width: 100%;
height: 100%;
}
}
/* =============================================================
Wrapper
* ============================================================= */
.l-wrapper {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
min-height: 100%;
min-height: 100vh;
margin: 0 auto;
padding: 0;
}
@media print {
.l-wrapper {
min-width: 1080px;
}
}
body[data-id=index] .l-wrapper {
margin-bottom: -100px;
}
/* =============================================================
Contact
* ============================================================= */
.l-contact-container {
position: relative;
overflow: hidden;
width: calc(100% + var(--padding)*2);
max-width: calc(var(--contents-width-px)* var(--padding)* 2);
margin-bottom: 100px;
border-radius: var(--base-border-radius);
--padding:var(--inner-padding);
margin-inline: calc(-1* var(--padding));
}
@media screen and (max-width: 960px) {
.l-contact-container {
width: 100%;
margin-bottom: 0;
}
}
.l-contact {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
max-width: calc(var(--contents-width-px)* var(--padding)* 2);
padding: 64px;
color: var(--white);
padding-inline: var(--padding);
padding-block: clamp(20px, -192.95775px + 22.1831vw, 83px);
margin-inline: auto;
}
.l-contact::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
background: url("../img/contact-bg.png");
background-size: cover;
}
.l-contact__head {
text-align: center;
font-weight: 500;
font-style: normal;
font-size: 36px;
line-height: 100%;
}
.l-contact__body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
width: 100%;
}
.l-contact-nav {
flex: 1 1;
color: #fff;
}
.l-contact-nav-button {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
border-radius: var(--base-border-radius);
background: var(--key-color);
text-decoration: none;
transition: scale .2s var(--animation), opacity .2s var(--animation);
}
@media (any-hover: hover) {
.l-contact-nav-button:where(:hover) {
opacity: .7;
scale: .98;
}
}
.l-contact-nav-button i {
display: block;
width: 50px;
height: 50px;
}
.l-contact-nav-button i svg {
width: 50px;
height: 50px;
}
.l-contact-nav-button__head {
color: var(--white, #fff);
text-align: center;
letter-spacing: .52px;
font-weight: 700;
font-size: 26px;
line-height: 1.5;
}
.l-contact-nav-button__body {
color: var(--point-color);
text-align: center;
letter-spacing: .3px;
font-weight: 700;
font-size: 15px;
line-height: 1.5;
}
.l-contact-nav-button::after {
content: "";
position: absolute;
right: .75em;
bottom: .75em;
aspect-ratio: 1;
background: #fff;
transition: all .2s ease-out;
inline-size: 26px;
-webkit-mask: var(--icon-external) 50% 50%/contain no-repeat;
mask: var(--icon-external) 50% 50%/contain no-repeat;
}
/* =============================================================
sticky
* ============================================================= */
body[data-id="usedcar-detail"] .l-sticky {
display: none;
}
body:not([data-id="usedcar-detail"]) .l-sticky {
position: fixed;
right: 0;
bottom: calc(10px + var(--slope-1px) * 5);
left: 0;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: var(--sticky-height);
max-width: 480px;
border: 2px solid var(--white);
border-radius: var(--ovall-radius);
background: var(--key-color);
opacity: 0;
transition: translate .3s var(--animation), opacity .2s var(--animation);
pointer-events: none;
margin-inline: auto;
translate: 0 100%;
}
@media screen and (max-width: 560px) {
body:not([data-id="usedcar-detail"]) .l-sticky {
max-width: 97.33333%;
}
}
body.is-sticky body:not([data-id="usedcar-detail"]) .l-sticky {
opacity: 1;
pointer-events: auto;
translate: 0 0;
}
.l-sticky-nav {
display: flex;
height: 100%;
}
@media screen and (max-width: 960px) {
.l-sticky-nav {
width: 100%;
padding-inline: 5.33333%;
}
}
.l-sticky-nav-button {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
width: 90px;
color: #fff;
text-decoration: none;
transition: all .2s var(--animation);
padding-block: 10px;
padding-inline: 17.5px;
padding-block: 10px;
}
@media screen and (max-width: 960px) {
.l-sticky-nav-button {
flex: 1 1;
width: auto;
padding-inline: 0;
}
}
@media (any-hover: hover) {
.l-sticky-nav-button:where(:hover) {
opacity: .7;
}
}
.l-sticky-nav-button i {
display: block;
width: 30px;
height: 30px;
margin-block: var(--leading-trim);
}
.l-sticky-nav-button i svg {
width: 30px;
height: 30px;
}
.l-sticky-nav-button i :where(svg path) {
fill: currentColor;
}
.l-sticky-nav-button span {
word-break: keep-all;
font-weight: 700;
font-style: normal;
font-size: calc(12px + var(--slope-1px) * 2);
line-height: 1.5;
margin-block: var(--leading-trim);
}
.l-sticky-nav-button:not(:last-child)::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
height: calc(100% - 20px);
margin: auto;
background: #fff;
}
/* =============================================================
Header
* ============================================================= */
/* header
=============================== */
.l-header {
position: fixed;
top: 0;
left: 0;
z-index: var(--header-z-index);
z-index: 1001;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
gap: 20px;
width: 100%;
height: var(--header-height);
padding-right: 2.19619%;
font-size: calc(11px + var(--slope-1px) * 1);
transition: all .3s var(--animation), color .3s var(--animation);
}
@media screen and (max-width: 960px) {
.l-header {
display: grid;
grid-template-columns: 1fr auto;
padding-right: 4%;
background: var(--white);
}
}
@media print {
.l-header {
display: none;
visibility: hidden;
opacity: 0;
}
}
/* l-header-logo
=============================== */
.l-header-logo {
position: relative;
z-index: 1001;
display: flex;
flex-grow: 0;
flex-shrink: 1;
justify-content: center;
align-items: center;
width: 100%;
height: var(--header-height);
max-width: 278px;
padding: 20px;
border-radius: 0 0 20px 0;
background: var(--white);
}
@media screen and (max-width: 560px) {
.l-header-logo {
width: 100%;
max-width: 244px;
padding: 4%;
}
}
.l-header-logo a {
position: relative;
transition: opacity .25s;
}
.l-header-logo a img {
width: 100%;
min-width: 0%;
}
.l-header-logo a:hover {
opacity: .8;
}
/* l-header-menu
=============================== */
.l-header-menu {
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
align-items: center;
gap: 20px;
height: var(--header-height);
}
.l-header-menu__nav {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 2rem;
}
@media screen and (max-width: 960px) {
.l-header-menu__nav {
display: none;
}
}
.l-header-menu__nav > .c-button {
flex: 1 1;
width: 13.25em;
}
/* l-header-toggle
=============================== */
.l-header-toggle {
position: relative;
z-index: 1001;
display: flex;
visibility: visible;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
width: 60px;
height: 60px;
aspect-ratio: 1;
padding: 1.125em;
outline: none;
border: 0;
border-radius: 50%;
background: var(--key-color);
color: inherit;
cursor: pointer;
transition: all .5s cubic-bezier(.55, .05, .22, .99);
pointer-events: all;
-moz-appearance: none;
appearance: none;
}
@media screen and (max-width: 960px) {
.l-header-toggle {
width: 50px;
height: 50px;
}
}
.l-header-toggle:hover {
scale: 1.1;
}
.l-header-toggle span {
visibility: hidden;
height: 0;
font-size: 0;
}
.l-header-toggle > div {
position: relative;
width: calc(19px + var(--slope-1px) * 5);
height: 2px;
border-radius: var(--ovall-radius);
background: #ffffff;
transition: background .2s;
}
.l-header-toggle > div:before, .l-header-toggle > div:after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
border-radius: var(--ovall-radius);
background: #ffffff;
}
.l-header-toggle > div:before {
bottom: 8px;
transition: background .2s, bottom .2s .2s, transform .2s;
}
.l-header-toggle > div:after {
top: 8px;
transition: background .2s, top .2s .2s, transform .2s;
}
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(--outer-padding) var(--outer-padding);
opacity: 0;
transition: opacity 0s linear .4s, transform 0s linear .4s;
transform: translateY(20px);
}
.l-header-toggle-menu__head {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
width: 100%;
margin-bottom: 2rem;
}
.l-header-toggle-menu__contact {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: .5em;
padding: 1rem;
background: var(--key-color);
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%;
-o-object-fit: contain;
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);
}
}
/* =============================================================
Main
* ============================================================= */
/* main
=============================== */
.l-main {
position: relative;
flex-grow: 1;
width: 100%;
min-height: 0%;
max-height: 100%;
opacity: 0;
transition: opacity .4s ease-in;
transition-delay: calc(var(--loading-time) - .3s);
margin-inline: auto;
}
.l-main-head {
position: relative;
width: calc(100% - var(--inner-padding)* 2);
margin-inline: auto;
}
.l-main-body {
width: calc(100% - var(--inner-padding)* 2);
max-width: var(--inner-width-px);
margin-inline: auto;
}
body.is-loaded .l-main {
opacity: 1;
}
/* heading
=============================== */
.l-main-heading {
display: flex;
flex-direction: column;
row-gap: calc(30px + var(--slope-1px) * 30);
width: calc(100% - var(--inner-padding)*2);
max-width: var(--inner-width-px);
padding-block: calc(var(--header-height) + calc(35px + var(--slope-1px) * 5)) calc(30px + var(--slope-1px) * 30);
margin-inline: auto;
}
@media screen and (max-width: 960px) {
.l-main-heading {
row-gap: 30px;
}
}
.l-main-title {
display: flex;
flex-direction: column;
grid-area: main-title;
row-gap: calc(13px + var(--slope-1px) * 10);
}
/* breadcrumbs
=============================== */
.l-main-breadcrumbs {
grid-area: main-breadcrumbs;
}
/* main banner
=============================== */
.l-main-banner {
padding: 2.5em 0;
background: var(--bg-color);
}
.l-main-banner__inner {
width: 1200px;
max-width: 91.21523%;
margin: 0 auto;
}
@media screen and (max-width: 960px) {
.l-main-banner__inner {
width: 550px;
}
}
.l-main-banner-list {
display: flex;
flex-wrap: wrap;
width: 101.66667%;
margin: -.83333% -.83333%;
padding-top: 1px;
}
.l-main-banner-list__item {
width: 20%;
padding: .81967% .81967%;
}
@media screen and (max-width: 960px) {
.l-main-banner-list__item {
width: 50%;
}
}
/* main showroom nav
=============================== */
.l-main-showroom-nav {
padding: 5.85652% 0;
background: var(--bg-color);
}
.c-section._bg + .l-main-showroom-nav {
background: #fff;
}
.l-main-showroom-nav__inner {
width: 1200px;
max-width: 91.21523%;
margin: 0 auto;
}
/* main category nav
=============================== */
.l-main-category-nav {
padding: 4.39239% 0;
}
.c-section._bg + .l-main-showroom-nav + .l-main-category-nav {
background: var(--bg-color);
}
.l-main-category-nav__inner {
width: 1244px;
max-width: 95.4612%;
margin: 0 auto;
}
.l-main-category-nav__grid {
display: flex;
flex-wrap: wrap;
width: calc(100% + 2px);
}
.l-main-category-nav__item {
width: 33.33333%;
padding-right: 2px;
}
@media screen and (max-width: 560px) {
.l-main-category-nav__item {
width: 100%;
margin-top: 2px;
}
}
.l-page[data-category=car] .l-main-category-nav__item[data-banner=car] {
display: none;
}
.l-page[data-category=showroom] .l-main-category-nav__item[data-banner=campaign],
.l-page[data-category=campaign] .l-main-category-nav__item[data-banner=campaign],
.l-page[data-category=company] .l-main-category-nav__item[data-banner=campaign],
.l-page[data-category=other] .l-main-category-nav__item[data-banner=campaign] {
display: none;
}
.l-page[data-id=welcome] .l-main-category-nav__item[data-banner=campaign] {
display: block;
}
.l-page[data-category=maintenance] .l-main-category-nav__item[data-banner=maintenance] {
display: none;
}
.l-page[data-id=welcome] .l-main-category-nav__item[data-banner=welcome] {
display: none;
}
/* =============================================================
Background
* ============================================================= */
.l-background-particle {
position: fixed;
inset: 0;
z-index: -4;
visibility: visible;
width: 100%;
height: 100%;
background: var(--white);
opacity: 1;
pointer-events: none;
}
body.is-dots .l-background-particle {
visibility: hidden;
opacity: 0;
}
.l-background-dots {
position: fixed;
inset: 0;
z-index: -3;
visibility: hidden;
width: 100%;
height: 100%;
background-color: var(--white);
background-image: radial-gradient(circle, #000 .5px, transparent .5px);
background-position: 0 0;
background-size: 21px 21px;
opacity: 0;
pointer-events: none;
}
body.is-dots .l-background-dots {
visibility: visible;
opacity: 1;
}
.c-particle-item {
position: absolute;
box-sizing: border-box;
border-radius: 50%;
}
.pt-solid-red-25 {
background-color: #e50012;
}
.pt-solid-red-15 {
background-color: #e50012;
}
.pt-solid-red-6 {
background-color: #e50012;
}
.pt-blur-pink-31 {
background-color: #ffeae9;
filter: blur(3px);
}
.pt-blur-pink-21 {
background-color: #ffeae9;
filter: blur(3px);
}
.pt-blur-pink-10 {
background-color: #ffeae9;
filter: blur(2px);
}
.pt-blur-pink-40 {
background-color: #ffeae9;
filter: blur(3px);
}
.pt-donut-red-20 {
border: 4px solid #e50012;
background-color: transparent;
}
.pt-dots-bg-pink-reddots-30 {
background-color: transparent;
background-image: radial-gradient(#e50012 .5px, transparent .7px);
background-size: 3px 3px;
background-repeat: repeat;
}
.pt-donut-dots-bg-30 {
position: relative;
overflow: hidden;
background-color: transparent;
background-image: radial-gradient(#e50012 .5px, transparent .7px);
background-size: 3px 3px;
background-repeat: repeat;
}
.pt-donut-dots-bg-30::after {
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border-radius: 50%;
background: #fff;
}
.bg-dots {
background-image: radial-gradient(circle, #000000 .5px, transparent .5px);
background-position: 0 0;
background-size: 21px 21px;
}
/* =============================================================
Footer
* ============================================================= */
.l-footer {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding-bottom: calc(var(--sticky-height));
border-radius: calc(40px + var(--slope-1px) * 60) calc(40px + var(--slope-1px) * 60) 0 0;
background: var(--key-color);
padding-inline: var(--inner-padding);
}
z
.l-footer__head {
width: 100%;
}
.l-footer__body {
display: flex;
width: 100%;
max-width: var(--inner-width-px);
margin-bottom: 117px;
-moz-column-gap: 40px;
column-gap: 40px;
margin-inline: auto;
}
.l-footer-contact {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
padding-block: calc(60px + var(--slope-1px) * 40) calc(40px + var(--slope-1px) * 40);
}
.l-footer-contact-title {
color: var(--white);
/* 48px */
text-align: center;
font-weight: 500;
font-style: normal;
font-size: calc(22px + var(--slope-1px) * 10);
line-height: 150%;
margin-block: var(--leading-trim);
}
.l-footer-contact__head {
margin-block: var(--leading-trim);
}
.l-footer-contact__body {
display: flex;
flex-direction: column;
gap: 30px;
}
.l-footer-contact__body .c-button {
max-width: 318px;
}
.l-footer-contact__body .c-button span {
flex-shrink: 0;
}
.l-footer-contact__text {
color: var(--white);
/* 24px */
text-align: center;
font-weight: 500;
font-style: normal;
font-size: calc(14px + var(--slope-1px) * 2);
line-height: 150%;
}
.l-footer-contact__button {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
@media screen and (max-width: 960px) {
.l-footer-contact__button {
flex-direction: column;
}
}
/* l-footer-logo
=============================== */
.l-footer-logo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
max-width: var(--contents-width-px);
margin-block: 40px;
}
.l-footer-logo-button {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
border-radius: 10px;
background: var(--white);
transition: all .3s var(--animation);
}
@media (any-hover: hover) {
.l-footer-logo-button:where(:hover) {
opacity: .6;
}
}
.l-footer-logo-button img {
width: 100%;
height: 100%;
max-height: 32px;
-o-object-fit: contain;
object-fit: contain;
}
.l-footer-profile {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1em 2em;
width: 100%;
margin-top: 80px;
margin-bottom: 40px;
color: var(--white);
text-align: center;
font-weight: 500;
font-size: 1.2rem;
}
.l-footer-profile__head {
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-self: flex-start;
}
@media screen and (max-width: 960px) {
.l-footer-profile__head {
justify-content: center;
}
}
.l-footer-copyright {
justify-self: flex-end;
text-align: right;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* .l-footer-sitemap
============================== */
.l-footer-sitemap {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
max-width: var(--inner-width-px);
margin-inline: auto;
}
/* =============================================================
Menu
* ============================================================= */
.l-global-menu {
position: fixed;
top: 0;
z-index: 1000;
display: flex;
visibility: hidden;
flex-direction: column;
gap: calc(90px + var(--slope-1px) * 30);
width: 100%;
height: 100%;
padding-top: calc(30px + var(--slope-1px) * 20);
padding-bottom: calc(calc(30px + var(--slope-1px) * 20) + var(--sticky-height));
color: #fff;
transition: opacity .4s cubic-bezier(.1, .91, .3, .98), visibility .4s cubic-bezier(.1, .91, .3, .98);
pointer-events: none;
padding-inline: var(--outer-padding);
}
@media screen and (min-width: 961px) {
.l-global-menu {
padding-top: calc(var(--header-height) + 100px);
}
}
@media screen and (max-width: 960px) {
.l-global-menu {
padding-top: 0;
opacity: 0;
}
}
body.is-menu-nav-open .l-global-menu {
visibility: visible;
overflow-y: auto;
pointer-events: all;
}
@media screen and (max-width: 960px) {
body.is-menu-nav-open .l-global-menu {
background: var(--key-color);
opacity: 1;
}
}
.l-global-menu__inner {
position: relative;
z-index: 1;
visibility: hidden;
opacity: 0;
}
@media screen and (min-width: 961px) {
.l-global-menu__inner {
transition: opacity .4s ease-in, visibility .4s ease-in;
}
}
body.is-menu-nav-open .l-global-menu__inner {
visibility: visible;
opacity: 1;
}
@media screen and (min-width: 961px) {
.l-global-menu__circle {
position: fixed;
top: 17.5px;
right: 2.5%;
z-index: -1;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--key-color);
transition: all .4s ease-in;
scale: 1;
}
body.is-menu-nav-open .l-global-menu__circle {
scale: 100;
}
}
.l-global-menu__head {
gap: calc(5px + var(--slope-1px) * 5);
}
.l-global-menu__head > .c-button {
flex: 1 1;
max-width: 100%;
}
/* ============================================================= *
Grid
* ============================================================= */
/* c-grid
=============================== */
.c-grid {
display: grid;
grid-template-columns: repeat(var(--columns), minmax(min(0px, 100%), 398px));
gap: calc(10px + var(--slope-1px) * 10);
place-content: center;
margin-inline: auto;
}
.c-grid .c-button {
max-width: 100%;
}
.c-grid .c-bannr {
max-width: 100%;
}
.c-grid._x4 {
max-width: 100%;
--columns:4;
}
.c-grid._x3 {
max-width: 100%;
--columns:3;
}
@media screen and (max-width: 960px) {
.c-grid._x3\:tablet {
--columns:3;
}
}
@media screen and (max-width: 560px) {
.c-grid._x3\:mobile {
--columns:3;
}
}
.c-grid._x2 {
--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: 960px) {
.c-grid._x1\:tablet {
--columns:1;
}
}
@media screen and (max-width: 560px) {
.c-grid._x1\:mobile {
--columns:1;
}
}
@media screen and (max-width: 960px) {
.c-grid._x2\:tablet {
--columns:2;
}
}
@media screen and (max-width: 560px) {
.c-grid._x2\:mobile {
--columns:2;
}
}
/* ============================================================= *
Navigation
* ============================================================= */
/* breadcrumbs
=============================== */
.c-breadcrumbs {
display: flex;
flex-wrap: wrap;
row-gap: 1em;
width: 100%;
max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
font-size: calc(13px + var(--slope-1px));
margin-inline: auto;
}
.c-breadcrumbs > li {
display: flex;
align-items: center;
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: -.375em;
letter-spacing: 0;
}
.c-breadcrumbs > li + li:before {
content: ">";
margin: 0 .61538em;
}
.c-breadcrumbs > li a {
text-decoration: underline;
transition: all .2s ease-out;
text-underline-offset: .25em;
}
.c-breadcrumbs > li a:hover {
text-decoration: none;
}
/* c-button
=============================== */
.c-button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: calc(5px + var(--slope-1px) * 5);
overflow: hidden;
width: 100%;
height: 3.75em;
max-width: 17.5em;
border: 2px solid;
border-color: var(--_border-color);
border-radius: var(--ovall-radius);
background: var(--_bg-color);
/* style */
color: var(--_color);
text-decoration: none;
font-weight: 700;
/* Layout */
font-size: calc(13px + var(--slope-1px) * 3);
transition-timing-function: var(--animation);
transition-duration: .3s;
transition-property: transform, color, background, border;
-moz-appearance: none;
appearance: none;
--_color:var(--key-color);
--_hover-color: var(--white);
--_bg-color: var(--white);
--_hover-bg-color: var(--base-color);
--_border-color: var(--key-color);
--_hover-border-color: var(--base-color);
--_arrow-color: var(--base-color);
--_hover-arrow-color: var(--base-color);
--_dots-color: var(--white);
--_circle-color: var(--key-color);
--_hover-circle-color: var(--white);
--circle-size: 30px;
--dot-size: 6px;
--right-size: calc((var(--circle-size) - var(--dot-size))/2);
padding-inline: .625em .9375em;
padding-block: 1.25em;
}
.c-button._primary {
--_color: var(--white);
--_bg-color: var(--key-color);
--_dots-color: var(--key-color);
--_circle-color: var(--white);
}
.c-button._border {
--_bg-color: transparent;
}
.c-button._border._white {
--_color: var(--white);
--_hover-color: var(--white);
--_bg-color: transparent;
--_hover-bg-color: var(--base-color);
--_border-color: var(--white);
--_hover-border-color: var(--base-color);
--_arrow-color: var(--key-color);
--_hover-arrow-color: var(--base-color);
--_dots-color: var(--key-color);
--_circle-color: var(--white);
--_hover-circle-color: var(--white);
}
.c-button.js-scroll:after {
opacity: 0;
}
.c-button.js-scroll > span:before {
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: var(--_bg-color);
opacity: 1;
transition: all .2s ease-out;
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center center;
mask-position: center center;
translate: 0 0;
rotate: 90deg;
}
.c-button.js-scroll > span:after {
translate: 0 -8px;
rotate: 90deg;
}
.c-button._full {
width: 100%;
max-width: 100%;
}
@media screen and (max-width: 960px) {
.c-button {
height: 3.84615em;
max-width: 19.61538em;
padding-inline: 1em calc(1em + var(--circle-size));
padding-block: .76923em;
}
}
.c-button > span {
z-index: 1;
width: 100%;
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
letter-spacing: 0;
line-height: 1.3;
margin-block: var(--leading-trim);
}
.c-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: var(--_arrow-color);
opacity: 0;
transition: all .2s ease-out;
transform: translateX(-8px);
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center center;
mask-position: center center;
}
.c-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: var(--_circle-color);
transition: all .15s ease-out;
}
.c-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: var(--_dots-color);
transition: all .1s ease-out;
}
.c-button svg path:not([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);
}
:is(a:hover .c-button, a.c-button:hover, button:hover .c-button, button.c-button:hover):before {
background: var(--_hover-bg-color);
transition: all .3s cubic-bezier(.37, 0, .63, 1);
transform: scale(25);
}
:is(a:hover .c-button, a.c-button:hover, button:hover .c-button, button.c-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-button, a.c-button:hover, button:hover .c-button, button.c-button:hover) > span:after {
background: var(--_hover-arrow-color);
opacity: 1;
transition: all .4s;
transform: translateX(0);
}
:is(a:hover .c-button.js-scroll, a.c-button.js-scroll:hover, button:hover .c-button.js-scroll, button.c-button.js-scroll:hover) > span:before {
opacity: 0;
translate: 0 8px;
}
:is(a:hover .c-button.js-scroll, a.c-button.js-scroll:hover, button:hover .c-button.js-scroll, button.c-button.js-scroll:hover) > span:after {
translate: 0 0;
rotate: 90deg;
}
}
/* c-button-wrap
============================== */
.c-button-wrap {
position: relative;
display: block;
width: 100%;
text-decoration: none;
--label-pos: 14px;
}
.c-button-wrap:has(.c-button-wrap__label) {
margin-top: var(--label-pos);
}
.c-button-wrap:has(.c-button-wrap__label) .c-button span {
padding-top: 6px;
}
.c-button-wrap__label {
position: absolute;
top: calc(var(--label-pos) * -1);
right: 0;
left: 0;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 81.81818%;
height: 2em;
min-width: 200px;
border: 1px solid var(--key-color);
border-radius: 2em;
background: #fff;
color: var(--key-color);
font-weight: bold;
font-size: 12px;
transition: all .2s ease-out;
margin-inline: auto;
padding-inline: 2px;
}
@media screen and (max-width: 960px) {
.c-button-wrap__label {
width: 180px;
min-width: -moz-fit-content;
min-width: fit-content;
}
}
.c-button-wrap__label:after {
content: "";
position: absolute;
top: calc(100% - 1px);
right: 0;
left: 0;
display: block;
width: 10px;
height: 5px;
background: inherit;
clip-path: polygon(0 0, 100% 0, 50% 100%);
margin-inline: auto;
}
.c-button-wrap:has(.c-button._large) {
--label-pos: 21px;
}
.c-button-wrap:has(.c-button._large) .c-button-wrap__label {
min-width: -moz-fit-content;
min-width: fit-content;
font-size: calc(13px + var(--slope-1px) * 1);
}
@media screen and (max-width: 960px) {
.c-button-wrap:has(.c-button._large) .c-button-wrap__label {
width: calc(100% - 10px);
}
}
.c-button-wrap:has(.c-button._large) .c-button-wrap__label:after {
width: 14px;
height: 7px;
}
/* container */
.c-button-container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1em;
justify-items: center;
width: 100%;
margin-top: calc(40px + var(--slope-1px) * 10);
place-content: center;
}
.c-button-container > .c-button {
min-width: 360px;
max-width: 360px;
}
@media screen and (max-width: 560px) {
.c-button-container > .c-button {
min-width: 100%;
max-width: 100%;
}
}
/* c-icon-button
=============================== */
.c-icon-button {
position: relative;
display: grid;
justify-content: center;
align-items: center;
grid-template-rows: auto;
grid-template-columns: auto auto auto;
gap: calc(5px + var(--slope-1px) * 5);
width: 100%;
height: 3.75em;
max-width: 17.5em;
border: 2px solid;
border-color: var(--_border-color);
border-radius: var(--ovall-radius);
background: var(--_bg-color);
color: var(--_color);
text-decoration: none;
font-weight: 700;
font-size: calc(13px + var(--slope-1px) * 3);
transition: transform .3s var(--animation);
transition-timing-function: var(--animation);
transition-duration: .3s;
transition-property: transform, color, background, border;
-moz-appearance: none;
appearance: none;
--_bg-color:var(--white);
--_border-color:var(--key-color);
--_color:var(--base-color);
place-content: center;
padding-block: 1.125em;
}
.c-icon-button._primary {
--_bg-color: var(--key-color);
--_color: var(--white);
}
.c-icon-button._border._black {
--_border-color: var(--base-color);
}
@media screen and (max-width: 960px) {
.c-icon-button {
max-width: 100%;
}
}
.c-icon-button span {
grid-column: 2/3;
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
letter-spacing: 0;
font-weight: 700;
line-height: 1.3;
margin-block: var(--leading-trim);
}
.c-icon-button ._icon {
width: 1.25em;
height: 1.25em;
}
.c-icon-button svg path[fill] {
fill: var(--_color);
transition: all .3s var(--animation);
}
@media (any-hover: hover) {
:is(a:hover .c-icon-button, a.c-icon-button:hover) {
--_bg-color: var(--base-color);
--_border-color: var(--base-color);
--_color: var(--white);
}
}
/* c-circle-button
=============================== */
.c-circle-button {
display: flex;
justify-content: center;
align-items: center;
width: -moz-fit-content;
width: fit-content;
height: 150px;
padding-left: 55px;
text-decoration: none;
}
@media screen and (max-width: 960px) {
.c-circle-button {
height: 100px;
padding-left: 30px;
}
}
.c-circle-button__inner {
display: flex;
justify-content: center;
align-items: center;
gap: 13px;
}
.c-circle-button__text {
color: var(--key-color);
font-weight: 700;
font-size: calc(16px + var(--slope-1px) * 5);
margin-block: var(--leading-trim);
}
.c-circle-button__arrow {
position: relative;
width: 2.5em;
height: 2.5em;
}
.c-circle-button__arrow::before {
content: "";
position: absolute;
inset: 0 0 0 50%;
z-index: -1;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
aspect-ratio: 1;
margin: auto;
border-radius: 50%;
background: var(--bg-color-red-01);
transition: all .4s ease-out;
transform-origin: center center;
translate: -50% 0;
}
@media screen and (max-width: 960px) {
.c-circle-button__arrow::before {
width: 100px;
height: 100px;
}
}
.c-circle-button__arrow ._before {
position: absolute;
opacity: 0;
transition: all .2s ease-out;
transform: translate(var(--tw-translate-x), 0);
--tw-translate-x: -50%;
}
.c-circle-button__arrow ._after {
position: absolute;
transition: all .2s ease-out;
transform: translate(var(--tw-translate-x), 0);
--tw-translate-x: 0%;
}
@media (any-hover: hover) {
.c-circle-button:where(:hover) .c-circle-button__arrow::before {
width: 120px;
height: 120px;
opacity: .7;
}
.c-circle-button:where(:hover) ._before {
opacity: 1;
--tw-translate-x: 0%;
}
.c-circle-button:where(:hover) ._after {
opacity: 0;
--tw-translate-x: 50%;
}
}
/* 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;
}
}
/* tab
=============================== */
*[data-tab-id] {
display: none;
visibility: hidden;
opacity: 0;
transition: opacity .2s;
}
*[data-tab-id].is-current {
display: block;
visibility: visible;
opacity: 1;
}
.c-tab {
overflow: hidden;
margin-bottom: 6.25%;
}
.c-tab__list {
display: flex;
justify-content: center;
align-items: flex-end;
gap: calc(5px + var(--slope-1px) * 15);
width: 100%;
margin: auto;
border-bottom: 2px solid var(--base-color);
padding-inline: calc(6px + var(--slope-1px) * 30);
}
.c-tab__item {
z-index: 1;
display: flex;
align-items: stretch;
width: 50%;
margin-bottom: -2px;
}
.c-tab__button {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: visible;
width: 100%;
min-height: 3.5em;
padding: 1em .25em;
outline: none;
border: 2px solid var(--base-color);
border-bottom-width: 2px;
border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
background: var(--base-color);
color: var(--white);
text-align: center;
text-decoration: none;
font-weight: 500;
font-size: calc(16px + var(--slope-1px) * 5);
line-height: 1.2;
cursor: pointer;
transition: background .25s;
}
.c-tab__button:after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
z-index: 2;
display: block;
width: calc(100% + 4px);
border-bottom: 2px solid var(--base-color);
transform: translateX(-50%);
}
@media screen and (max-width: 960px) {
.c-tab__button {
font-size: .98214em;
}
}
.c-tab__button span {
display: block;
margin-bottom: 1em;
font-size: .8em;
}
.c-tab__button em {
font-size: 1.4em;
}
.c-tab__button.is-current {
border: 2px solid var(--base-color);
background: var(--white);
color: var(--base-color);
}
.c-tab__button.is-current:after {
width: 100%;
border-bottom: 2px solid var(--white);
}
/* for tab.js view control */
.js-tab-channel {
display: none;
}
.js-tab-channel.is-current {
display: block;
}
/* anchor
=============================== */
.c-page-anchor {
margin-bottom: 6rem;
}
.c-page-anchor__list {
display: flex;
gap: 10px;
}
@media screen and (max-width: 960px) {
.c-page-anchor__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
gap: 5px;
}
}
.c-page-anchor__item {
display: inherit;
flex-basis: 210px;
min-width: -moz-fit-content;
min-width: fit-content;
}
.c-anchor-button {
position: relative;
display: grid;
justify-content: center;
align-items: center;
grid-template-rows: auto;
grid-template-columns: auto auto auto;
gap: calc(5px + var(--slope-1px) * 5);
width: 100%;
height: 3.125em;
border: 2px solid;
border-color: var(--_border-color);
border-radius: var(--ovall-radius);
background: var(--_bg-color);
color: var(--_color);
text-decoration: none;
font-weight: 500;
font-size: calc(13px + var(--slope-1px) * 3);
transition: transform .3s var(--animation);
transition-timing-function: var(--animation);
transition-duration: .3s;
transition-property: transform, color, background, border;
-moz-appearance: none;
appearance: none;
--_bg-color:var(--white);
--_border-color: var(--base-color);
--_color:var(--base-color);
place-content: center;
padding-block: 1.125em;
padding-inline: .25em;
}
@media screen and (max-width: 960px) {
.c-anchor-button {
grid-template-columns: 1.5625em 1fr calc(1.5625em + 1em);
max-width: 100%;
}
}
.c-anchor-button span {
grid-column: 2/3;
text-align: center;
word-break: keep-all;
letter-spacing: 0;
font-weight: 700;
line-height: 1.3;
margin-block: var(--leading-trim);
}
@media screen and (max-width: 960px) {
.c-anchor-button span {
width: 100%;
overflow-wrap: anywhere;
}
}
.c-anchor-button:after {
content: "";
position: relative;
width: 1.5625em;
height: 1.5625em;
aspect-ratio: 1 / 1;
margin: auto 0;
border-radius: 100%;
background: var(--_color);
transition: all .2s ease-out;
-webkit-mask-image: var(--icon-arrow);
mask-image: var(--icon-arrow);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center center;
mask-position: center center;
rotate: 90deg;
}
.c-anchor-button::before {
content: "";
position: relative;
}
@media (any-hover: hover) {
:is(a:hover .c-anchor-button, a.c-anchor-button:hover) {
--_bg-color: var(--base-color);
--_border-color: var(--base-color);
--_color: var(--white);
}
}
/* ============================================================= *
Section
* ============================================================= */
.c-section:not(:first-child) {
margin-top: calc(70px + var(--slope-1px) * 40);
}
.c-section:last-child {
margin-bottom: calc(60px + var(--slope-1px) * 40);
}
.c-section._no-space {
margin-top: 0;
}
.c-section__head {
margin-bottom: calc(var(--leading-trim) + calc(30px + var(--slope-1px) * 10));
}
.c-section__head._small-space {
margin-bottom: calc(var(--leading-trim) + calc(20px + var(--slope-1px) * 10));
}
.c-section__head._no-space {
margin-bottom: 0;
}
.c-section__foot {
display: flex;
justify-content: center;
margin-top: calc(40px + var(--slope-1px) * 10);
}
.c-section._frame {
overflow: hidden;
padding: calc(20px + var(--slope-1px) * 30);
border: 2px solid var(--lightgray);
border-radius: 20px;
background: var(--white);
}
/* inner section
=============================== */
.c-inner-section {
margin-top: calc(40px + var(--slope-1px) * 20);
}
.c-inner-section__head {
margin-bottom: calc(10px + var(--slope-1px) * 10);
}
/* ============================================================= *
Table
* ============================================================= */
/* scroll container
=============================== */
.c-table-container {
position: relative;
overflow: auto;
width: 100%;
background-color: #fff;
}
@media screen and (max-width: 960px) {
.c-table-container {
overflow-x: scroll;
width: calc(100% + var(--contents-padding-inline));
background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 15px) 0 0/50px 100%, linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), #fff 15px) right/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) right/20px 100%;
background-color: #fff;
background-attachment: local, scroll, local, scroll;
background-repeat: no-repeat;
}
}
.c-table-container + .c-table-container {
margin-top: 5rem;
}
.c-table-container > * {
min-width: 50em;
}
.c-table-container > .c-ciao-table {
min-width: 62em;
}
.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(--lightgray);
border-left: 1px solid var(--lightgray);
font-size: 1.5rem;
}
.c-data-table._fixed {
table-layout: fixed;
}
.c-data-table th,
.c-data-table td {
padding: 1.25em .75em;
border-right: 1px solid var(--lightgray);
border-bottom: 1px solid var(--lightgray);
text-align: center;
}
.c-data-table th ._etc,
.c-data-table td ._etc {
display: block;
}
@media screen and (max-width: 960px) {
.c-data-table th,
.c-data-table td {
padding-inline: .25em;
}
}
.c-data-table thead th {
background: var(--base-color);
color: #fff;
}
.c-data-table thead th em {
display: block;
font-size: 1.06667em;
}
.c-data-table thead th em span {
display: inline;
padding-left: .5em;
font-size: .875em;
}
.c-data-table thead th > span {
display: block;
margin-top: .25em;
font-size: .93333em;
}
.c-data-table thead tr._subhead th {
background: rgba(0, 0, 0, .51);
}
.c-data-table thead tr._subhead td {
background: rgba(0, 0, 0, .04);
}
.c-data-table thead tr._bghead th {
background: var(--base-color);
}
.c-data-table thead tr._bghead td {
background: rgba(0, 0, 0, .04);
}
.c-data-table tbody tr._total th {
background-color: rgba(245, 4, 0, .671);
}
.c-data-table tbody tr._total td {
background-color: rgba(245, 90, 87, .129);
}
.c-data-table tbody th {
background: var(--base-color);
color: var(--white);
}
.c-data-table tbody th._subhead {
background: rgba(0, 0, 0, .04);
color: var(--base-color);
}
.c-data-table tbody th[rowspan] {
background: var(--base-color);
}
.c-data-table tbody th[rowspan] span {
display: inline-block;
min-height: 1em;
text-align: left;
white-space: nowrap;
line-height: 1.25;
writing-mode: vertical-rl;
text-orientation: upright;
}
.c-data-table tbody td {
width: 16.66667%;
border-right: 1px solid var(--lightgray);
border-bottom: 1px solid var(--lightgray);
}
.c-data-table tbody small {
font-size: calc(11px + var(--slope-1px) * 1);
}
.c-data-table.c-ciao-table thead th {
font-weight: 700;
}
.c-data-table.c-ciao-table thead th span {
font-weight: 600;
font-size: calc(11px + var(--slope-1px) * 1);
line-height: 150%;
}
.c-data-table.c-ciao-table tbody th {
font-weight: 700;
}
.c-data-table.c-ciao-table tbody ._navy {
background: #004098;
}
.c-data-table.c-ciao-table tbody ._blue {
background-color: rgba(79, 144, 255, .129);
}
.c-data-table.c-ciao-table tbody ._white {
background: transparent;
}
.c-data-table.c-ciao-table tbody ._red {
background-color: rgba(245, 4, 0, .671);
}
.c-data-table.c-ciao-table tbody ._pink {
background-color: rgba(245, 90, 87, .129);
}
.c-data-table.c-ciao-table tbody ._color-blue {
color: #004098;
}
.c-data-table.c-ciao-table tbody ._color-red {
color: var(--bg-color-red-02);
}
.c-data-table.c-ciao-table tbody ._gray01 {
background: transparent;
}
.c-data-table.c-ciao-table tbody ._gray02 {
background: rgba(0, 0, 0, .03);
}
.c-data-table.c-ciao-table tbody ._gray03 {
background: rgba(0, 0, 0, .05);
}
.c-data-table.c-ciao-table tbody ._gray04 {
background: rgba(0, 0, 0, .09);
}
/* profile table
=============================== */
.c-profile-table {
width: 100%;
border-collapse: collapse;
font-size: calc(14px + var(--slope-1px) * 2);
}
@media screen and (max-width: 960px) {
.c-profile-table {
display: block;
}
.c-profile-table:is(tbody, th, td) {
display: block;
}
.c-profile-table tr {
display: grid;
grid-template-columns: 100%;
gap: .5em;
border-bottom: 1px solid var(--border-color);
padding-block: 1.5em;
}
}
.c-profile-table th,
.c-profile-table td {
padding: 1.875em 0;
border-bottom: 2px solid var(--lightgray);
}
@media screen and (max-width: 960px) {
.c-profile-table th,
.c-profile-table td {
border-bottom: 0;
padding-block: 0;
}
}
.c-profile-table th {
min-width: 12.5em;
text-align: center;
font-weight: bold;
}
@media screen and (max-width: 960px) {
.c-profile-table th {
text-align: left;
}
}
@media screen and (min-width: 961px) {
.c-profile-table td {
padding-left: 1em;
}
}
/* ============================================================= *
Text
* ============================================================= */
/* lead
=============================== */
.c-lead {
text-align: left;
}
.c-lead > p {
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: -.375em;
}
.c-lead > p em {
font-weight: 500;
}
.c-lead > p + p {
margin-top: 1em;
}
/* text
=============================== */
.c-text {
margin-top: var(--leading-trim);
text-align: left;
font-size: calc(14px + var(--slope-1px) * 2);
line-height: 1.7;
}
.c-text + .c-text {
margin-top: calc(var(--leading-trim) + calc(15px + var(--slope-1px) * 15));
}
/* notes
=============================== */
.c-notes {
margin-top: 1.5em;
font-size: 1.3rem;
}
.c-notes > li {
padding-left: 1em;
text-indent: -1em;
}
.c-notes > li + li {
margin-top: .25em;
}
.c-notes > li:before {
content: "\203b";
}
.c-notes > li._strong {
color: var(--key-color);
}
.c-notes._dot > li:before {
content: "\30fb";
}
.c-notes._square > li:before {
content: "\25a0";
}
.c-notes._star > li:before {
content: "\2605";
}
.c-notes > li._dot:before {
content: "\30fb";
}
.c-notes > li._square:before {
content: "\25a0";
}
.c-notes > li._star:before {
content: "\2605";
}
/* ============================================================= *
Title
* ============================================================= */
/* c-page-title
============================== */
.c-page-title {
font-weight: 700;
font-style: normal;
font-size: calc(32px + var(--slope-1px) * 14);
line-height: 1.5;
margin-block: var(--leading-trim);
}
.c-page-category {
position: relative;
display: inline-flex;
align-items: center;
text-transform: uppercase;
font-weight: 600;
font-size: calc(14px + var(--slope-1px) * 2);
font-family: var(--en-font-family);
line-height: 1.7;
margin-block: var(--leading-trim);
}
.c-page-category::before {
content: "";
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: .375em;
height: .375em;
border-radius: 50%;
background: var(--key-color);
margin-inline-end: .625em;
}
/* c-section-title
============================== */
.c-section-title {
position: relative;
font-weight: 700;
font-size: calc(22px + var(--slope-1px) * 10);
line-height: 1.7;
margin-block: var(--leading-trim);
}
.c-section-title span {
display: block;
}
.c-section-title._has-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* c-sub-title
============================== */
.c-sub-title {
display: inline-block;
align-items: center;
padding-left: .83333em;
text-indent: calc( -1 * .83333em);
font-weight: 500;
font-size: calc(20px + var(--slope-1px) * 4);
line-height: 1.7;
margin-block: var(--leading-trim);
}
.c-sub-title::before {
content: "";
position: relative;
display: inline-block;
justify-content: center;
width: .83333em;
height: .83333em;
background: var(--icon-circle) 50% 50%/contain no-repeat;
}
/* detailed title
=============================== */
.c-detailed-title {
font-weight: 500;
font-size: calc(18px + var(--slope-1px) * 6);
}
.c-detailed-title span {
display: block;
}
/* ============================================================= *
Blog
* ============================================================= */
.c-blog-pickup {
width: 100cqi;
margin-bottom: calc(40px + var(--slope-1px) * 20);
margin-inline: calc(50% - 50cqi);
}
@media screen and (max-width: 960px) {
.c-blog-pickup {
width: 100%;
margin-inline: auto;
}
}
.c-blog-pickup__tag {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: calc(6px + var(--slope-1px) * 4);
}
@media screen and (max-width: 960px) {
.c-blog-pickup__tag {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 560px) {
.c-blog-pickup__tag {
grid-template-columns: repeat(2, 1fr);
}
}
.c-blog-pickup-tag {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
gap: 2px;
height: 50px;
border: 2px solid;
border-radius: var(--ovall-radius);
background: var(--white);
text-decoration: none;
font-size: calc(14px + var(--slope-1px) * 2);
transition: all .2s var(--animation);
padding-inline: 35px 25px;
}
.c-blog-pickup-tag.is-current {
background: var(--base-color);
color: var(--white);
}
.c-blog-pickup-tag svg path {
fill: currentColor;
}
@media screen and (max-width: 960px) {
.c-blog-pickup-tag {
padding-inline: 0;
}
}
@media (any-hover: hover) {
.c-blog-pickup-tag:where(:hover) {
rotate: -3deg;
}
}
/* ============================================================= *
blog-card
* ============================================================= */
.c-blog-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(10px + var(--slope-1px) * 10);
}
@media screen and (max-width: 960px) {
.c-blog-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.c-blog-card {
display: flex;
flex-direction: column;
overflow: hidden;
max-width: 386px;
border-radius: 20px;
box-shadow: 0px 0px 8px 0px rgba(68, 64, 63, .25);
text-decoration: none;
}
.c-blog-card__image {
overflow: hidden;
aspect-ratio: 368 / 300;
}
.c-blog-card__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-blog-card__contents {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
align-self: stretch;
gap: 20px;
padding: calc(15px + var(--slope-1px) * 5) 20px calc(20px + var(--slope-1px) * 10) 20px;
background: var(--white);
}
.c-blog-card__shop {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
background: var(--bg-color);
line-height: 1;
}
.c-blog-card__title {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 700;
font-size: calc(16px + var(--slope-1px) * 5);
margin-block: var(--leading-trim);
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.c-blog-card__text {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
font-size: calc(12px + var(--slope-1px) * 4);
line-height: 170%;
margin-block: var(--leading-trim);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.c-blog-card__date {
color: var(--gray);
font-weight: 400;
font-style: normal;
font-size: calc(12px + var(--slope-1px) * 4);
font-family: var(--en-font-family);
line-height: 170%;
margin-block: var(--leading-trim);
/* 27.2px */
}
/* ============================================================= *
CMN-blog
* ============================================================= */
/* CMN-blog
=============================== */
.CMS-blog__head, .CMS-blog__heed {
margin-bottom: 3rem;
}
.CMS-blog__foot {
margin-top: 3rem;
}
/* CMN-blog-block
=============================== */
.CMS-blog-block__head {
margin-bottom: calc(32px + var(--slope-1px) * 8);
}
.CMS-blog-block__body strong {
font-weight: bold;
}
.CMS-blog-block__body em {
font-style: italic;
}
.CMS-blog-block__body u {
text-decoration: underline;
}
.CMS-blog-block__body img {
display: inline;
}
.CMS-blog-block__foot {
margin-top: 4rem;
padding-top: 2.5rem;
border-top: 1px solid #ccc;
}
.CMS-blog-block-table {
width: 100%;
}
/* CMN-blog-heading
=============================== */
.CMS-blog-heading {
display: flex;
align-items: center;
gap: 14px 1em;
width: 100%;
padding: calc(20px + var(--slope-1px) * 4);
border-radius: 8px;
background: var(--bg-color);
}
@media screen and (max-width: 768px) {
.CMS-blog-heading {
flex-direction: column;
align-items: flex-start;
}
}
.CMS-blog-heading__main {
flex-grow: 1;
}
.CMS-blog-heading__sub {
flex-shrink: 0;
margin-left: auto;
}
@media screen and (max-width: 768px) {
.CMS-blog-heading__sub {
margin-top: pxToRemt(18);
margin-left: 0;
}
}
.CMS-blog-heading__author {
display: none;
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: .76786em;
font-size: 1.4rem;
}
.CMS-blog-heading__author:before {
content: "-";
margin-right: .25em;
}
.CMS-blog-heading__title {
font-weight: 500;
font-size: calc(18px + var(--slope-1px) * 2);
margin-block: var(--leading-trim);
}
.CMS-blog-heading__date {
display: flex;
align-items: center;
color: #888;
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 1);
font-family: var(--en-font-family);
margin-block: var(--leading-trim);
}
.CMS-blog-heading__date > i {
display: none;
}
/* CMN-blog-impression
=============================== */
.CMS-blog-impression {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1rem 1em;
font-size: 14px;
}
@media screen and (max-width: 768px) {
.CMS-blog-impression {
flex-wrap: wrap;
}
}
.CMS-blog-impression__head {
flex-shrink: 0;
}
@media screen and (max-width: 768px) {
.CMS-blog-impression__head {
width: 100%;
font-size: 13px;
}
}
.CMS-blog-impression__list {
display: flex;
align-items: center;
}
.CMS-blog-impression__list > li {
display: flex;
align-items: center;
}
.CMS-blog-impression__list > li > i {
margin-right: .5em;
}
.CMS-blog-impression__list > li:not(:last-child) {
margin-right: 1em;
}
.CMS-blog-impression__foot {
flex-shrink: 0;
width: 220px;
}
@media screen and (max-width: 768px) {
.CMS-blog-impression__foot {
width: 33.33333%;
margin-left: auto;
}
}
.CMS-blog-impression__button {
width: 100%;
height: 36px;
outline: none;
border: 1px solid var(--base-color);
border-radius: 36px;
background: transparent;
color: var(--base-color);
font-size: 13px;
transition: all .2s ease-out;
-moz-appearance: none;
appearance: none;
}
.CMS-blog-impression__button:hover {
background: var(--base-color);
color: #fff;
}
/* CMS-blog-like
============================== */
.CMS-blog-like__button {
display: flex;
align-items: center;
gap: 5px;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
margin-left: auto;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
font-weight: 400;
font-size: 14px;
}
@media screen and (max-width: 768px) {
.CMS-blog-like__button {
margin-right: auto;
}
}
.CMS-blog-like__button:has(.is-liked) .CMS-blog-like__icon path {
fill: #c00;
}
/* CMN-blog-share
=============================== */
.CMS-blog-share {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1em;
margin-top: calc(24px + var(--slope-1px) * -8);
font-size: calc(13px + var(--slope-1px) * 1);
}
@media screen and (max-width: 768px) {
.CMS-blog-share {
flex-direction: column;
align-items: center;
}
}
.CMS-blog-share__head {
flex-shrink: 0;
}
.CMS-blog-share__list {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 8px;
}
.CMS-blog-share__button {
display: flex;
justify-content: center;
align-items: center;
align-content: inherit;
overflow: hidden;
width: 36px;
aspect-ratio: 1 / 1;
border-radius: 50%;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 1.4rem;
transition: all .3s ease-out;
}
@media screen and (max-width: 768px) {
.CMS-blog-share__button {
width: 44px;
}
}
.CMS-blog-share__button:hover {
opacity: .7;
}
.CMS-blog-share__button > i {
display: flex;
justify-content: center;
align-items: center;
width: 61.11111%;
height: 61.11111%;
}
.CMS-blog-share__button[data-share="X"] {
background: #333;
}
.CMS-blog-share__button[data-share="line"] {
background: #00b900;
}
.CMS-blog-share__button[data-share="line"] > i {
position: relative;
width: 80%;
height: auto;
}
.CMS-blog-share__button[data-share="line"] > i:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
display: block;
width: 80%;
height: 80%;
margin: auto;
background: #fff;
}
.CMS-blog-share__button[data-share="line"] > i svg {
position: relative;
z-index: 1;
}
.CMS-blog-share__button[data-share="line"] > i svg path {
fill: #00b900;
}
.CMS-blog-share__button[data-share="facebook"] {
background: #1877f2;
}
.CMS-blog-share__button span {
display: none;
}
/* ============================================================= *
calendar
* ============================================================= */
/* c-calendar-item
============================== */
.c-calendar-item {
overflow: hidden;
}
.c-calendar-item__contents {
display: flex;
flex-direction: column;
height: 100%;
padding: calc(30px + var(--slope-1px) * 20) 2.8rem;
font-family: var(--en-font-family);
}
.c-calendar-item__head {
position: relative;
text-align: center;
font-weight: 700;
font-size: calc(30px + var(--slope-1px) * 6);
line-height: .7;
margin-block: 0 calc(var(--leading-trim) + 20px);
}
.c-calendar-item__head .cal_month {
line-height: .7;
-moz-user-select: none;
user-select: none;
}
.c-calendar-item__pager {
position: absolute;
top: calc(30px + var(--slope-1px) * 20);
right: 2.8rem;
left: 2.8rem;
z-index: 1;
display: flex;
justify-content: space-between;
width: calc(100% - 2.8rem * 2);
pointer-events: none;
}
.c-calendar-item__nav {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
padding: 0;
outline: none;
border: 0;
border-radius: 0;
background: none;
color: currentColor;
color: #aaa;
font-size: 14px;
pointer-events: none;
-moz-appearance: none;
appearance: none;
}
.c-calendar-item__nav svg path {
fill: currentColor;
}
.c-calendar-item__nav span {
position: relative;
top: -1px;
}
.c-calendar-item__nav._next :is(img, svg) {
width: 3rem;
height: 3rem;
transform: rotate(-90deg);
}
.c-calendar-item__nav._prev :is(img, svg) {
width: 3rem;
height: 3rem;
transform: rotate(90deg);
}
.p-sr-calendar-grid:not([data-calendar-current="0"]) .c-calendar-item__nav:first-child {
color: var(--base-color);
pointer-events: auto;
}
.p-sr-calendar-grid:not([data-calendar-current="2"]) .c-calendar-item__nav:last-child {
color: var(--base-color);
pointer-events: auto;
}
.c-calendar-item__body {
margin-bottom: auto;
-moz-user-select: none;
user-select: none;
}
.c-calendar-item__foot {
margin-top: 5px;
padding-top: 1.6rem;
border-top: 1px solid var(--border-color);
}
.c-calendar-item__notes {
display: grid;
gap: .5em;
font-weight: 400;
font-size: calc(13px + var(--slope-1px) * 1);
margin-block: var(--leading-trim);
}
.c-calendar-item table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.c-calendar-item table .cal_sat {
color: #5e83c9;
}
.c-calendar-item table .cal_holiday,
.c-calendar-item table .cal_sun {
color: #f14749;
}
.c-calendar-item table th {
padding-bottom: 5px;
vertical-align: middle;
text-align: center;
font-weight: 400;
font-size: calc(11px + var(--slope-1px) * 1);
}
.c-calendar-item table th > div {
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
text-align: center;
line-height: .7;
}
.c-calendar-item table td {
position: relative;
padding: var(--padding);
vertical-align: middle;
text-align: center;
font-weight: 400;
font-size: calc(14px + var(--slope-1px) * 1);
font-family: var(--en-font-family);
--padding: 2px;
}
.c-calendar-item table td:before {
content: "";
position: static;
display: block;
width: 100%;
height: 0;
padding-top: 100%;
}
.c-calendar-item table td > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
max-width: calc(100% - var(--padding) * 2);
aspect-ratio: 1 / 1;
margin: auto;
background: radial-gradient(circle, var(--bg) calc(144% / 2 - 1px), transparent calc(144% / 2));
font-weight: 400;
--bg: #fff;
}
.c-calendar-item table td .cal_close01 {
color: #fff;
--bg: var(--base-color);
}
/* ============================================================= *
Maintenance
* ============================================================= */
.c-maintenance-header {
position: relative;
display: grid;
grid-template-columns: 1fr 398px;
gap: 20px;
margin-bottom: 6rem;
}
.c-maintenance-header .c-page-anchor {
margin-bottom: 0;
}
@media screen and (max-width: 960px) {
.c-maintenance-header {
grid-template-columns: 100%;
}
}
.c-maintenance-header:has(+ .c-section) + .c-section {
margin-top: 6rem;
}
.c-header-reservation {
position: absolute;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
grid-column: 2/3;
grid-row: 1/2;
gap: 20px;
width: 100%;
padding: 25px 40px 30px 40px;
border-radius: 20px;
background: var(--white);
box-shadow: 0 0 8px 0 rgba(68, 64, 63, .25);
}
@media screen and (max-width: 960px) {
.c-header-reservation {
position: relative;
grid-column: 1/2;
grid-row: 1/2;
width: 100%;
}
}
.c-header-reservation__head {
width: 100%;
}
.c-header-reservation__foot p {
text-align: center;
font-weight: 400;
font-size: 12px;
line-height: 170%;
margin-block: var(--leading-trim);
/* 20.4px */
}
/* service
=============================== */
.c-maintenance-service {
display: flex;
flex-wrap: wrap;
width: 103.33333%;
margin: -1.66667% -1.66667%;
padding-top: 1px;
}
.c-maintenance-service:not(:first-child) {
margin-top: 4.375em;
}
@media screen and (max-width: 560px) {
.c-maintenance-service {
flex-direction: column;
gap: 2.85714em;
}
}
.c-maintenance-service__item {
width: 50%;
padding: 1.6129% 1.6129%;
}
.c-maintenance-service__item:first-child:last-child {
margin: 0 auto;
}
@media screen and (max-width: 560px) {
.c-maintenance-service__item {
width: 100%;
}
}
.c-maintenance-service-block {
display: block;
text-decoration: none;
}
.c-maintenance-service-block__lead {
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: .825em;
font-weight: bold;
font-size: .9375em;
}
.c-maintenance-service-block__lead span {
display: inline-block;
}
.c-maintenance-service-block__banner {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 20px;
background: var(---white, #fff);
box-shadow: 0 0 8px 0 rgba(68, 64, 63, .25);
transition: opacity .2s;
}
.c-maintenance-service-block:hover .c-maintenance-service-block__banner {
opacity: .7;
}
.c-maintenance-service-block__desc {
width: -moz-fit-content;
width: fit-content;
/* -0.375em for line-height offset */
margin-top: .625em;
margin-bottom: -.375em;
font-size: .875em;
margin-inline: auto;
}
/* ============================================================= *
Inspection
* ============================================================= */
/* c-inspection-overview
============================== */
.c-inspection-overview {
padding: calc(40px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * 30);
border: 2px solid var(--lightgray);
border-radius: var(--base-border-radius);
background: var(--white);
}
.c-inspection-overview:not(:first-child) {
margin-top: 32px;
}
.c-inspection-overview__inner {
display: grid;
grid-template-columns: auto 1fr;
gap: 40px;
width: 100%;
margin-inline: auto;
}
@media screen and (max-width: 960px) {
.c-inspection-overview__inner {
grid-template-columns: 100%;
}
}
/* c-inspection-overview-requirements
============================== */
.c-inspection-overview-requirements {
display: grid;
align-items: center;
max-width: 100%;
margin-inline: auto;
}
@media screen and (min-width: 961px) {
.c-inspection-overview-requirements {
grid-template-columns: subgrid;
grid-column: span 2;
gap: 40px;
}
}
@media screen and (max-width: 960px) {
.c-inspection-overview-requirements {
grid-template-columns: 100%;
gap: 15px;
width: 100%;
}
}
.c-inspection-overview-requirements__head {
word-break: keep-all;
overflow-wrap: anywhere;
}
@media screen and (max-width: 960px) {
.c-inspection-overview-requirements__head {
text-align: center;
}
}
@media screen and (min-width: 769px) {
.c-inspection-overview-requirements__body {
min-height: 60px;
padding-left: 40px;
border-left: 2px solid var(--lightgray);
place-content: center;
}
}
@media screen and (max-width: 960px) {
.c-inspection-overview-requirements__body {
min-height: unset;
padding-top: 20px;
padding-left: 0;
border-top: 2px solid var(--lightgray);
border-left: none;
}
}
.c-inspection-overview-requirements__list {
display: grid;
grid-template-columns: max-content max-content;
gap: 12px 20px;
margin-block: var(--leading-trim);
}
@media screen and (max-width: 768px) {
.c-inspection-overview-requirements__list {
grid-template-columns: 100%;
}
}
.c-inspection-overview-requirements__list > li {
display: flex;
align-items: center;
gap: .5em;
}
.c-inspection-overview-requirements__list > li:before {
content: "";
display: block;
flex-shrink: 0;
width: 1.25em;
height: 1.25em;
background: url(../img/icon/checkbox.svg) 50% 50%/contain no-repeat;
}
/* c-inspection-overview-list
============================== */
.c-inspection-overview-list {
font-size: calc(14px + var(--slope-1px) * 1);
line-height: 1.75;
margin-block: var(--leading-trim);
}
.c-inspection-overview-list > li {
padding-left: 1em;
text-indent: -1em;
}
.c-inspection-overview-list > li:before {
content: "\30fb";
}
/* c-inspection-checkpoint
============================== */
.c-inspection-checkpoint {
display: grid;
align-items: center;
grid-template-columns: 1fr 50%;
gap: 24px 40px;
margin-top: 32px;
}
@media screen and (max-width: 768px) {
.c-inspection-checkpoint {
grid-template-columns: 100%;
}
}
.c-inspection-checkpoint-figure {
position: relative;
}
.c-inspection-checkpoint-figure__image {
position: absolute;
top: 50%;
left: 50%;
width: 74.16667%;
margin: auto;
transform: translate3d(-50%, -50%, 0px);
}
.c-inspection-checkpoint-figure__pointer {
position: relative;
z-index: 1;
}
.c-inspection-checkpoint-figure__pointer :is(img, svg) {
width: 100%;
height: auto;
}
.c-inspection-checkpoint-figure__pointer._pointer-safety {
padding-bottom: 12.08333%;
}
.c-inspection-checkpoint-figure__pointer._pointer-check1 {
padding-top: 8.95833%;
padding-bottom: 22.70833%;
}
.c-inspection-checkpoint-figure__pointer._pointer-check6 {
padding-top: 8.95833%;
padding-bottom: 3.54167%;
}
.c-inspection-checkpoint-nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(10px + var(--slope-1px) * 2);
}
.c-inspection-checkpoint-button {
display: flex;
align-items: center;
gap: calc(4px + var(--slope-1px) * 4);
height: 100%;
padding: 7.5px 16px;
border: 2px solid var(--base-color);
border-radius: 56px;
color: var(--base-color);
text-decoration: none;
letter-spacing: 0;
font-size: calc(14px + var(--slope-1px) * 2);
transition: all .2s;
}
@media screen and (max-width: 768px) {
.c-inspection-checkpoint-button {
height: 54px;
padding: 10px 9px;
}
}
.c-inspection-checkpoint-button:hover {
background: var(--base-color);
color: #fff;
}
.c-inspection-checkpoint-button > ._number {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
font-weight: 600;
}
.c-inspection-checkpoint-button > ._text {
word-break: keep-all;
overflow-wrap: anywhere;
font-weight: 700;
line-height: 1.2;
}
.c-inspection-checkpoint-button > ._icon {
flex-shrink: 0;
width: calc(25px + var(--slope-1px) * 15);
margin-left: auto;
}
.c-inspection-checkpoint-button > ._icon svg path {
fill: currentColor;
}
/* c-inspection-checkpoint-detail
=============================== */
.c-inspection-checkpoint-detail__col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .8em 4em;
}
@media screen and (max-width: 768px) {
.c-inspection-checkpoint-detail__col {
grid-template-columns: 100%;
}
}
.c-inspection-checkpoint-detail__col > li {
display: flex;
width: 100%;
line-height: 1.5;
margin-block: var(--leading-trim);
}
.c-inspection-checkpoint-detail__col > li._option:before {
color: var(--key-color);
}
.c-inspection-checkpoint-detail__col > li:before {
content: "\25cf";
}
/* c-inspection-checkpoint-notes
============================== */
.c-inspection-checkpoint-notes {
display: flex;
justify-content: flex-end;
gap: 2em;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
margin-top: 2em;
padding: 1em;
border: 1px solid vaR(--lightgray);
font-size: calc(12px + var(--slope-1px) * 1);
}
@media screen and (min-width: 769px) {
.c-inspection-checkpoint-notes {
margin-left: auto;
}
}
.c-inspection-checkpoint-notes > li {
padding-left: 1em;
text-indent: -1em;
}
.c-inspection-checkpoint-notes > li._option:before {
color: var(--key-color);
}
.c-inspection-checkpoint-notes > li:before {
content: "\25cf";
}
/* ============================================================= *
Modal
* ============================================================= */
/* =============================================================
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(51, 51, 51, .9);
opacity: 0;
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: 100%;
height: 100%;
max-width: 1040px;
max-height: -moz-fit-content;
max-height: fit-content;
margin: auto;
opacity: 0;
transition: all .6s .6s;
}
.l-modal.is-show .l-modal__inner {
opacity: 1;
}
.l-modal__bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
font-size: 0;
opacity: 0;
}
.l-modal__contents {
position: relative;
z-index: 1;
overflow-y: auto;
width: 100%;
max-height: calc(var(--vh) * 90);
padding: calc(25px + var(--slope-1px) * 15) calc(20px + var(--slope-1px) * 20) calc(30px + var(--slope-1px) * 18);
border-radius: var(--base-border-radius);
background: #fff;
}
.l-modal__close {
position: absolute;
top: calc(25px + var(--slope-1px) * 15);
right: calc(20px + var(--slope-1px) * 20);
z-index: 4;
display: flex;
flex-direction: column;
gap: 10px;
width: 44px;
height: 44px;
outline: none;
border: 0;
border-radius: 50%;
background: var(--icon-close) 50% 50%/50% 50% no-repeat var(--base-color);
color: #fff;
line-height: 1;
transition: all .3s ease-out;
-moz-appearance: none;
appearance: none;
}
.l-modal__close:hover {
opacity: .7;
}
.l-modal__close span {
display: none;
}
/* l-modal-select
=============================== */
.l-modal-select__head {
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border-color);
font-weight: 500;
font-size: calc(18px + var(--slope-1px) * 2);
padding-block: calc(14px + var(--leading-trim)) calc(26px + var(--leading-trim));
}
.l-modal-select__head:before {
content: "";
flex-shrink: 0;
width: calc(10px + var(--slope-1px) * 2);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--key-light-color);
}
.l-modal-select__body {
padding-top: 1.83333em;
}
.l-modal-select__lead {
padding-bottom: 1.83333em;
font-size: 15px;
line-height: 1.6;
}
.l-modal-select__lead em {
color: var(--key-text-color);
font-weight: 700;
}
.l-modal-select__nav {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
gap: calc(10px + var(--slope-1px) * 10);
}
.l-modal-select__nav .c-cars-nav {
border: 1px solid var(--border-color);
}
/* l-modal-contents
============================== */
.l-modal-contents__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: calc(20px + var(--slope-1px) * 20);
border-bottom: 1px solid var(--border-color);
font-weight: 500;
font-size: calc(18px + var(--slope-1px) * 2);
padding-block: calc(var(--padding-block) + var(--leading-trim)) calc(var(--padding-block) + 12px + var(--leading-trim));
--padding-block: 10px;
}
.l-modal-contents__head:not(:has(i)) {
--padding-block: 12px;
}
.l-modal-contents__head:not(:has(i)):before {
content: "";
flex-shrink: 0;
width: calc(10px + var(--slope-1px) * 2);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--key-light-color);
}
.l-modal-contents__head > i {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 1.75em;
height: 1.75em;
padding-bottom: .1em;
border-radius: 100%;
letter-spacing: 0;
font-weight: 600;
font-style: normal;
line-height: 1;
}
/* ============================================================= *
nearby
* ============================================================= */
.c-nearby-showroom {
display: flex;
justify-content: center;
align-items: center;
align-self: flex-start;
}
/* c-nearby-block
============================== */
.c-nearby-block__search {
display: flex;
flex-direction: column;
gap: calc(30px + var(--slope-1px) * 10);
padding: calc(30px + var(--slope-1px) * 20) calc(24px + var(--slope-1px) * 31);
border-radius: 20px;
background: var(--white);
background: var(---white, #fff);
box-shadow: 0 0 8px 0 rgba(68, 64, 63, .25);
}
.c-nearby-block__head {
display: flex;
justify-content: space-between;
margin-block: var(--leading-trim);
}
.c-nearby-block__head .c-section-title {
flex-shrink: 0;
}
.c-nearby-block__head > * {
margin-block: var(--leading-trim);
}
@media screen and (max-width: 960px) {
.c-nearby-block__head {
flex-direction: column;
gap: 3rem;
}
}
/* c-nearby-search
=============================== */
.c-nearby-search {
width: 100%;
max-width: 880px;
margin: 0 auto;
}
.c-nearby-search__notes {
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: .91071em;
text-align: center;
letter-spacing: 0;
font-size: 1.4rem;
}
.c-nearby-search__form {
position: relative;
display: flex;
width: 100%;
}
.c-nearby-search__input {
flex-grow: 1;
}
.c-nearby-search__input input {
display: flex;
align-items: center;
width: 100%;
height: calc(50px + var(--slope-1px) * 10);
outline: none;
border: 0;
border-radius: 10px;
background: #fff;
box-shadow: 0px 0px 8px 0px rgba(68, 64, 63, .25);
font-size: 1.6rem;
line-height: 28px;
padding-inline: 18px 86px;
}
@media screen and (max-width: 560px) {
.c-nearby-search__input input::-moz-placeholder {
font-size: 15px;
}
.c-nearby-search__input input::placeholder {
font-size: 15px;
}
}
.c-nearby-search__button {
flex-shrink: 0;
overflow: hidden;
min-width: 0%;
border-radius: 0 10px 10px 0;
}
.c-nearby-search__button button {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
width: 5.625em;
height: 100%;
margin: 0;
padding: .5em .625em;
outline: none;
border: 0;
background: transparent;
font-weight: 700;
font-size: calc(12px + var(--slope-1px) * 4);
cursor: pointer;
transition: opacity .2s ease-out;
}
@media screen and (max-width: 960px) {
.c-nearby-search__button button {
flex-direction: column;
width: auto;
}
}
.c-nearby-search__button button:hover {
filter: brightness(1.2);
}
.c-nearby-search__button button > i {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 1em;
height: 1em;
min-width: 0%;
}
.c-nearby-search__button button > i svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-nearby-search__button button > i svg path {
fill: currentColor;
}
@media screen and (max-width: 960px) {
.c-nearby-search__button button {
width: auto;
}
}
.c-nearby-search__gps {
display: none;
margin-top: 20px;
margin-inline: auto;
}
@media screen and (max-width: 960px) {
.c-nearby-search__gps {
display: flex;
justify-content: center;
align-items: center;
}
}
/* c-nearby-result
=============================== */
.c-nearby-result {
display: none;
}
.c-nearby-result__list {
display: none;
margin-top: calc(40px + var(--slope-1px) * 24);
}
.c-nearby-result__foot {
display: flex;
justify-content: center;
align-items: center;
margin-top: calc(24px + var(--slope-1px) * 8);
margin-inline: auto;
}
.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-showroom-nearby-item
============================== */
.c-showroom-nearby-item {
width: 100%;
padding: calc(20px + var(--slope-1px) * 12) calc(20px + var(--slope-1px) * 4);
border-radius: 20px;
background: #fff;
box-shadow: 0 0 8px 0 rgba(68, 64, 63, .25);
color: var(--base-color);
container-type: inline-size;
container-name: nearby;
}
.c-showroom-nearby-item:not(:first-child) {
margin-top: 24px;
}
.c-showroom-nearby-item__head {
position: relative;
display: flex;
align-items: center;
padding: 1.8rem 1em;
border-radius: 8px;
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);
}
@container nearby (max-width: 960px) {
.c-showroom-nearby-item__head {
flex-wrap: wrap;
padding-left: 2.5em;
}
}
.c-showroom-nearby-item__rank {
margin-right: .75em;
font-style: normal;
font-size: calc(24px + var(--slope-1px) * 4);
}
@container nearby (max-width: 960px) {
.c-showroom-nearby-item__rank {
position: absolute;
top: 1.8rem;
left: 2rem;
}
}
.c-showroom-nearby-item__name {
margin-right: auto;
color: var(--key-color);
text-decoration: underline;
font-weight: 500;
font-size: calc(20px + var(--slope-1px) * 4);
}
.c-showroom-nearby-item__head:hover .c-showroom-nearby-item__name {
text-decoration: none;
}
.c-showroom-nearby-item__distance {
margin-left: 2em;
font-size: calc(14px + var(--slope-1px) * 2);
}
.c-showroom-nearby-item__distance:after {
content: 'km';
}
@container nearby (max-width: 960px) {
.c-showroom-nearby-item__distance {
width: 100%;
margin-left: 0;
}
}
.c-showroom-nearby-item__body {
display: grid;
grid-template-columns: max-content auto minmax(0px, 280px);
grid-template-areas: "profile tel contact";
row-gap: calc(5px + var(--slope-1px) * 10);
padding: calc(15px + var(--slope-1px) * 15) 0 0;
font-size: calc(14px + var(--slope-1px) * 2);
-moz-column-gap: clamp(10px, -193.93443px + 16.39344vw, 30px);
column-gap: clamp(10px, -193.93443px + 16.39344vw, 30px);
}
@container nearby (max-width: 960px) {
.c-showroom-nearby-item__body {
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "profile profile" "tel contact";
gap: 5px;
}
}
@container nearby (max-width: 560px) {
.c-showroom-nearby-item__body {
grid-template-columns: 100%;
grid-template-areas: "profile" "tel" "contact";
}
}
.c-showroom-nearby-item__hour {
display: flex;
align-items: center;
}
.c-showroom-nearby-item__hour:before {
content: "";
display: block;
width: 1em;
height: 1em;
margin-right: .5em;
background: url(../img/icon/time.svg) 50% 50% no-repeat;
background-size: contain;
}
.c-showroom-nearby-item__close {
display: flex;
align-items: center;
margin-top: .25em;
}
.c-showroom-nearby-item__close:before {
content: "";
display: block;
width: 1em;
height: 1em;
margin-right: .5em;
background: url(../img/icon/calendar.svg) 50% 50% no-repeat;
background-size: contain;
}
.c-showroom-nearby-item__profile {
flex-shrink: 0;
grid-area: profile;
}
@container nearby (max-width: 960px) {
.c-showroom-nearby-item__profile {
margin-bottom: 15px;
}
}
.c-showroom-nearby-item-tel {
display: flex;
align-items: center;
grid-area: tel;
height: calc(50px + var(--slope-1px) * 10);
color: var(--key-color);
font-weight: 700;
font-size: calc(20px + var(--slope-1px) * 12);
font-family: var(--en-font-family);
}
@container nearby (min-width: 961px) {
.c-showroom-nearby-item-tel {
justify-self: flex-end;
}
}
@container nearby (max-width: 960px) {
.c-showroom-nearby-item-tel {
display: flex;
justify-content: center;
border: 2px solid;
border-radius: var(--ovall-radius);
font-size: 20px;
}
}
.c-showroom-nearby-item-tel__icon {
display: flex;
flex-direction: column;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 1.2em;
height: 1.2em;
margin-right: 5px;
}
.c-showroom-nearby-item-tel__icon svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-showroom-nearby-item-tel__number a {
color: var(--key-color);
text-decoration: none;
pointer-events: none;
}
@container nearby (max-width: 960px) {
.c-showroom-nearby-item-tel__number a {
pointer-events: auto;
}
}
.c-nearby-block[data-search=newcar] .c-showroom-nearby-item__body {
grid-template-columns: max-content auto;
grid-template-areas: "profile tel" "contact contact";
width: 100%;
}
@container nearby (max-width: 960px) {
.c-nearby-block[data-search=newcar] .c-showroom-nearby-item__body {
grid-template-columns: auto;
}
}
@container nearby (max-width: 560px) {
.c-nearby-block[data-search=newcar] .c-showroom-nearby-item__body {
grid-template-columns: 100%;
grid-template-areas: "profile" "tel" "contact";
}
}
.c-nearby-block[data-search=newcar] .c-showroom-nearby-item-contact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(256px, 100%), 1fr));
gap: 10px 5px;
}
@container nearby (max-width: 960px) {
.c-nearby-block[data-search=newcar] .c-showroom-nearby-item-contact {
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
}
@container nearby (max-width: 560px) {
.c-nearby-block[data-search=newcar] .c-showroom-nearby-item-contact {
grid-template-columns: repeat(2, 1fr);
}
}
.c-nearby-block[data-search=newcar] .c-showroom-nearby-item-contact .c-icon-button {
width: 100%;
max-width: 100%;
}
.c-nearby-block[data-search=newcar] .c-showroom-nearby-item-contact .c-icon-button ._icon {
width: 2em;
height: 2em;
}
.c-showroom-nearby-item-contact {
grid-area: contact;
}
@container nearby (max-width: 560px) {
.c-showroom-nearby-item-contact {
margin-top: 5px;
}
}
@container nearby (max-width: 960px) {
.c-showroom-nearby-item-contact .c-button {
max-width: 100%;
}
}
/* c-nearby-nav-container
============================== */
.c-nearby-nav-container {
display: flex;
gap: .5em 2em;
}
body[data-id=showroom] .c-nearby-nav-container {
display: none;
}
@media screen and (min-width: 961px) {
.c-nearby-nav-container {
padding-inline: 32px;
}
}
.c-nearby-nav-container:not(:first-child) {
margin-top: calc(9px + var(--slope-1px) * 4);
}
/* .c-totalcare-guide
============================== */
.c-totalcare-guide {
margin-bottom: calc(40px + var(--slope-1px) * 20);
padding: calc(30px + var(--slope-1px) * 20);
border: 2px solid var(--lightgray);
border-radius: 20px;
background: var(--white);
line-height: 1.7;
}
.c-totalcare-guide__item:not(:first-child) {
margin-top: 2em;
}
.c-totalcare-guide__head {
color: var(--key-color);
font-weight: 500;
margin-block: var(--leading-trim)calc(1em + var(--leading-trim));
}
.c-totalcare-guide__body {
margin-block: var(--leading-trim);
}
.c-totalcare-guide__lead {
font-weight: 500;
margin-block: var(--leading-trim) calc(.6em + var(--leading-trim));
}
.c-totalcare-guide__step {
margin-block: var(--leading-trim);
}
.c-totalcare-guide__step > li {
padding-left: 1em;
text-indent: -1em;
}
.c-totalcare-guide__step > li:before {
content: "\30fb";
}
/* ============================================================= *
newcar
* ============================================================= */
/* c-newcar-guide-block
============================== */
.c-newcar-guide-block {
display: grid;
grid-template-columns: 1fr min(50%, 464px);
gap: calc(30px + var(--slope-1px) * 10) 20px;
margin-bottom: calc(50px + var(--slope-1px) * 30);
padding: 3rem calc(30px + var(--slope-1px) * 20);
border-radius: 20px;
background: var(--white);
box-shadow: 0 0 8px 0 rgba(68, 64, 63, .25);
}
@media screen and (max-width: 960px) {
.c-newcar-guide-block {
grid-template-columns: 100%;
}
}
.c-newcar-guide-block__text {
align-self: center;
}
.c-newcar-guide-block__text p {
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
font-size: calc(14px + var(--slope-1px) * 7);
margin-inline: auto;
}
.c-newcar-guide-block__nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 14px;
}
@media screen and (max-width: 960px) {
.c-newcar-guide-block__nav {
grid-template-columns: 100%;
}
}
/* c-newcar-guide-nav
=============================== */
.c-newcar-guide-nav {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(8px + var(--slope-1px) * 4);
text-decoration: underline;
font-size: calc(14px + var(--slope-1px) * 2);
line-height: 1.5;
cursor: pointer;
}
.c-newcar-guide-nav__image {
overflow: hidden;
border: 2px solid var(--lightgray);
border-radius: 20px;
transition: all .2s ease-out;
}
@media screen and (max-width: 960px) {
.c-newcar-guide-nav__image {
width: 100%;
aspect-ratio: 285 / 95;
}
}
.c-newcar-guide-nav__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-newcar-guide-nav:hover {
text-decoration: none;
}
.c-newcar-guide-nav:hover .c-newcar-guide-nav__image {
transform: scale(.98);
}
.c-newcar-guide-nav > p {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
margin-block: var(--leading-trim);
}
.c-newcar-guide-nav > p::after {
content: "";
display: inline-flex;
justify-content: center;
align-items: center;
width: 1em;
height: 1em;
background: var(--icon-angle);
background-repeat: no-repeat;
transform: rotate(180deg);
}
/* ============================================================= *
Showroom
* ============================================================= */
/* c-showroom-info
============================== */
.c-showroom-info {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: .25em 30px;
width: -moz-fit-content;
width: fit-content;
}
@media screen and (max-width: 960px) {
.c-showroom-info {
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
}
.c-showroom-info__item {
display: flex;
justify-content: flex-start;
align-items: center;
gap: .25em;
}
/* c-showroom-list
============================== */
.c-showroom-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(10px + var(--slope-1px) * 10);
margin-top: calc(40px + var(--slope-1px) * 20);
}
@media screen and (max-width: 960px) {
.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%;
border-radius: 20px;
background: #fff;
box-shadow: 0 0 8px 0 rgba(68, 64, 63, .25);
text-decoration: none;
}
.c-showroom-card__link {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.c-showroom-card__image {
position: relative;
overflow: hidden;
width: 100%;
min-height: 0%;
aspect-ratio: 385 / 200;
}
.c-showroom-card__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all .3s;
}
.c-showroom-card:hover .c-showroom-card__image img {
transform: scale(1.03);
}
.c-showroom-card__contents {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: calc(20px + var(--slope-1px) * 10);
width: 100%;
padding: calc(20px + var(--slope-1px) * 15) calc(20px + var(--slope-1px) * 20) calc(20px + var(--slope-1px) * 20);
}
.c-showroom-card[data-orange="BEST"] .c-showroom-card__image:before,
.c-showroom-card[data-orange="MASTER"] .c-showroom-card__image:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
display: block;
height: 2.8125em;
max-width: 100%;
border-top-right-radius: 8px;
background-color: #fff;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.c-showroom-card[data-orange="BEST"] .c-showroom-card__image:before {
width: 6.875em;
background-image: url(/common-img/logo_orange-BEST.png);
background-size: 70% auto;
}
.c-showroom-card[data-orange="MASTER"] .c-showroom-card__image:before {
width: 6.875em;
background-image: url(/common-img/logo_orange-MASTER.png);
background-size: 80% auto;
}
.c-showroom-card__head {
font-weight: 700;
font-size: calc(16px + var(--slope-1px) * 8);
margin-block: var(--leading-trim);
}
.c-showroom-card__head a {
position: relative;
z-index: 1;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: 5%;
/* 1.2px */
text-underline-offset: 25%;
/* 6px */
text-underline-position: from-font;
}
.c-showroom-card:hover .c-showroom-card__head {
text-decoration: none;
}
.c-showroom-card__body {
display: flex;
flex-direction: column;
flex-grow: 1;
font-size: calc(12px + var(--slope-1px) * 4);
margin-block: var(--leading-trim);
}
.c-showroom-card__facility {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: calc(2px + var(--slope-1px) * 3);
}
@media screen and (max-width: 560px) {
.c-showroom-card__facility {
grid-template-columns: repeat(4, 1fr);
}
}
.c-showroom-card__facility > li {
max-width: calc(30px + var(--slope-1px) * 27);
max-height: calc(30px + var(--slope-1px) * 27);
aspect-ratio: 1 / 1;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 3px;
background: var(--bg-color);
}
@media screen and (max-width: 560px) {
.c-showroom-card__facility > li {
padding: 5px;
}
}
.c-showroom-card__facility > li :is(svg, img) {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.c-showroom-card__facility > li svg path {
fill: var(--base-color);
}
.c-showroom-card__facility > li.is-disabled svg path {
fill: var(--lightgray);
}
/* ============================================================= *
Sitemap
* ============================================================= */
/* c-sitemap
============================== */
.c-sitemap {
display: grid;
justify-content: center;
grid-template-rows: auto auto 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "showroom newcar maintenance company" "showroom usedcar carlife contact" "showroom campaign carlife recruit";
gap: 60px clamp(20px, -124.57831px + 12.04819vw, 40px);
width: 100%;
color: var(--white);
margin-inline: auto;
}
@media screen and (max-width: 1205px) {
.c-sitemap {
grid-template-columns: auto 1fr 1fr 1fr;
}
}
@media screen and (max-width: 960px) {
.c-sitemap {
display: block;
}
}
.c-sitemap-box[data-category=showroom] {
grid-area: showroom;
}
.c-sitemap-box[data-category=newcar] {
grid-area: newcar;
}
.c-sitemap-box[data-category=usedcar] {
grid-area: usedcar;
}
.c-sitemap-box[data-category=campaign] {
grid-area: campaign;
}
.c-sitemap-box[data-category=maintenance] {
grid-area: maintenance;
}
.c-sitemap-box[data-category=carlife] {
grid-area: carlife;
}
.c-sitemap-box[data-category=company] {
grid-area: company;
}
.c-sitemap-box[data-category=contact] {
grid-area: contact;
}
.c-sitemap-box[data-category=recruit] {
grid-area: recruit;
}
.c-sitemap-box__head {
display: block;
width: 100%;
outline: none;
border: 0;
border-bottom: 1px solid;
background: transparent;
color: inherit;
text-align: left;
text-decoration: none;
font-weight: 700;
font-weight: bold;
cursor: unset;
-moz-appearance: none;
appearance: none;
}
@media screen and (min-width: 961px) {
.c-sitemap-box__head {
margin-bottom: calc(var(--leading-trim) + 30px);
pointer-events: none;
}
}
@media screen and (max-width: 960px) {
.c-sitemap-box__head {
position: relative;
margin-bottom: 0;
line-height: normal;
}
}
.c-sitemap-box__toggle {
width: 100%;
margin: 0;
padding: 0;
outline: none;
border: 0;
background: none;
color: #fff;
text-align: left;
text-decoration: none;
font-style: normal;
line-height: 150%;
cursor: unset;
-moz-appearance: none;
appearance: none;
}
@media screen and (min-width: 961px) {
.c-sitemap-box__toggle {
padding-bottom: 20px;
font-weight: 700;
}
}
@media screen and (max-width: 960px) {
.c-sitemap-box__toggle {
font-weight: 500;
cursor: pointer;
pointer-events: all;
padding-block: 2.14286em;
}
.c-sitemap-box__toggle:before, .c-sitemap-box__toggle:after {
content: "";
position: absolute;
top: 0;
right: 0;
right: 4px;
bottom: 0;
bottom: 0;
display: block;
display: block;
width: 14px;
height: 2px;
margin: auto;
margin: auto 0;
border-radius: var(--oval-radius);
background: #fff;
}
.c-sitemap-box__toggle:after {
background: currentColor;
transition: all .2s ease-out;
rotate: 90deg;
}
.c-sitemap-box__toggle.is-open:after {
rotate: 0deg;
}
}
.c-sitemap-box__body {
display: grid;
margin-bottom: var(--leading-trim);
}
@media screen and (min-width: 961px) {
.c-sitemap-box__body {
display: grid !important;
margin-top: calc(var(--leading-trim) 3rem);
}
}
@media screen and (max-width: 960px) {
.c-sitemap-box__body {
display: none;
gap: 0;
padding-block: 2.30769em;
}
}
.c-sitemap-pages {
display: flex;
flex-direction: column;
gap: 20px;
margin-block: var(--leading-trim);
}
.c-sitemap-pages li {
vertical-align: middle;
font-weight: 500;
font-size: 1.4rem;
margin-block: var(--leading-trim);
}
.c-sitemap-pages li a {
display: inline-flex;
align-items: center;
color: currentColor;
text-decoration: none;
word-break: keep-all;
overflow-wrap: anywhere;
transition: color .2s, opacity .2s;
}
@media (any-hover: hover) {
.c-sitemap-pages li a:where(:hover) {
opacity: .6;
}
}
.c-sitemap-pages li a[target="_blank"]::after {
content: "";
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 1em;
height: 1em;
background: var(--white);
transition: background .3s ease-out;
-webkit-mask: var(--icon-external) 50% 50%/contain no-repeat;
mask: var(--icon-external) 50% 50%/contain no-repeat;
}
.c-sitemap-showroom {
display: grid;
grid-template-rows: repeat(8, auto);
grid-auto-flow: column;
row-gap: 20px;
-moz-column-gap: .5em;
column-gap: .5em;
}
.c-sitemap-showroom li {
font-size: calc(13px + var(--slope-1px) * 1);
}
.c-sitemap-showroom li a {
display: inline;
}
.c-sitemap-showroom li:before {
content: "-";
position: relative;
display: inline;
width: 1em;
padding-inline: .3em;
}
/* ============================================================= *
Slider
* ============================================================= */
/* c-slider-controls
============================== */
.c-slider-controls {
display: flex;
justify-content: center;
align-items: center;
align-items: center;
gap: calc(12px + var(--slope-1px) * 6);
width: 100%;
margin-inline: auto;
--_arrow-color:var(--base-color);
--_arrow-hover-color: var(--white);
--arrow-size: 40px;
--bar-color: var(--base-color);
}
/* c-slider-counter
============================== */
.c-slider-counter {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
}
.c-slider-counter span {
display: flex;
justify-content: center;
align-items: center;
min-width: 2ch;
font-weight: 600;
}
/* c-slide-arrow
============================== */
.slick-arrow.c-slide-arrow {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: var(--arrow-size);
height: var(--arrow-size);
border: 1px solid var(--_arrow-color);
border-radius: 100%;
background: transparent;
color: var(--_arrow-color);
cursor: pointer;
}
.slick-arrow.c-slide-arrow.slick-disabled{
--_arrow-color: var(--gray);
opacity: .7;
}
.slick-arrow.c-slide-arrow svg path:not([fill]) {
fill: var(--_arrow-color);
transition: all .2s ease-out;
}
@media (any-hover: hover) {
.slick-arrow.c-slide-arrow:where(:hover) {
background: var(--base-color);
scale: 1.1;
}
.slick-arrow.c-slide-arrow:where(:hover) svg path:not([fill]) {
fill: var(--_arrow-hover-color);
}
}
.slick-arrow.c-slide-arrow._prev-arrow {
transform: rotate(180deg);
}
.c-slider-progress {
position: relative;
width: 100%;
height: 2px;
border-radius: var(--ovall-radius);
background: var(--lightgray);
margin-inline: auto;
--slider-current: 1;
}
.c-slider-progress:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 2px;
border-radius: var(--ovall-radius);
background: var(--key-color);
transition: transform .4s cubic-bezier(.215, .61, .355, 1);
transform: scaleX(calc(100% / var(--slider-length) * var(--slider-current)));
transform-origin: left center;
}
/* ============================================================= *
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: 960px) {
.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: 20px;
padding: 20px 20px 30px 0;
color: var(--base-color);
text-decoration: none;
}
.topics-link__category {
display: flex;
justify-content: center;
align-items: center;
width: 5rem;
height: 5rem;
padding: 5px;
border-radius: 50%;
background: var(--_bg-color);
color: #fff;
}
.topics-link__category svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
fill: var(--white);
}
.topics-link__category[data-category=car] {
--_bg-color:var(--base-color);
}
.topics-link__category[data-category=campaign] {
--_bg-color:var(--key-color);
}
.topics-link__category[data-category=information] {
--_bg-color:var(--gray);
}
.topics-link .topics-link__head, .topics-link .topics-link__body {
transition: translate .3s, color .3s;
}
.topics-link:hover .topics-link__head, .topics-link:hover .topics-link__body {
color: var(--key-color);
translate: .25em 0;
}
.topics-link:hover::after {
opacity: .6;
}
.topics-link__head {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
gap: .5em;
text-align: center;
margin-block: var(--leading-trim);
}
.topics-link__body {
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1.5;
margin-block: var(--leading-trim);
}
/* c-topics-list
============================== */
.c-topics-list {
display: block;
overflow-y: scroll;
height: 313px;
padding-right: calc(15px + var(--slope-1px) * 25);
}
.c-topics-list::-webkit-scrollbar {
width: .5em;
border-radius: var(--ovall-radius);
background: var(--bg-color);
}
.c-topics-list::-webkit-scrollbar-thumb {
width: .5em;
border-radius: var(--ovall-radius);
background-color: var(--base-color);
}
.c-topics-list__item {
display: block;
border-bottom: 1px solid var(--base-color);
}
/* c-topics-toggle
============================== */
.c-topics__foot {
display: flex;
justify-content: flex-end;
}
.c-topics__toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 0;
outline: 0;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
color: var(--base-color);
font-weight: 400;
font-size: calc(13px + var(--slope-1px) * 1);
transition: all .2s ease-out;
-moz-appearance: none;
appearance: none;
}
.c-topics__toggle:hover {
opacity: .7;
}
.c-topics__toggle:after {
content: "";
display: block;
width: 16px;
height: 16px;
background: var(--icon-arrow) 50% 50%/contain no-repeat;
transform: rotate(90deg);
}
.c-topics__toggle > span:last-child {
display: none;
}
.c-topics__toggle.is-show > span:first-child {
display: none;
}
.c-topics__toggle.is-show > span:last-child {
display: block;
}
.c-topics__toggle.is-show:after {
transform: rotate(45deg);
}
/* ============================================================= *
usedcar slider
* ============================================================= */
.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%;
-o-object-fit: cover;
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 {
font-weight: 600;
font-size: calc(21px + var(--slope-1px) * 3);
margin-block: var(--leading-trim);
}
.c-usedcar-card__body {
width: 100%;
}
.c-usedcar-card__data {
display: flex;
justify-content: flex-start;
gap: 15px;
padding-bottom: 20px;
border-bottom: 1px solid;
font-size: calc(13px + var(--slope-1px) * 3);
margin-block: var(--leading-trim);
}
.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: 960px) {
.c-usedcar-card__data dl dt {
padding: 10px 10px;
}
}
.c-usedcar-card__price {
display: flex;
align-items: baseline;
gap: .5em;
color: var(--key-color);
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%;
}
/* ============================================================= *
gallery slider
* ============================================================= */
.c-gallery-slider__list {
width: calc(100% + 10px);
}
@media screen and (max-width: 560px) {
.c-gallery-slider__list {
overflow: visible;
width: calc(86.95652% * 2 + var(--slide-gap));
}
}
.c-gallery-slider__item {
overflow: hidden;
padding-inline: var(--slide-gap);
}
.c-gallery-slider__item a {
display: block;
overflow: hidden;
max-width: 309px;
width:100%;
height: 100%;
aspect-ratio: 4/5;
box-shadow: 0px 0px 20px 0px rgba(32, 32, 32, .1);
}
.c-gallery-slider__item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all .3s;
}
.c-gallery-slider__item a:hover img {
transform: scale(.98);
}
/* ============================================================= *
Scroll Bar
* ============================================================= */
[data-simplebar] {
position: relative;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.simplebar-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
width: auto !important;
height: auto !important;
margin: 0;
padding: 0;
direction: inherit;
}
.simplebar-offset {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-overflow-scrolling: touch;
box-sizing: inherit !important;
margin: 0;
padding: 0;
resize: none !important;
direction: inherit !important;
}
.simplebar-content-wrapper {
position: relative;
display: block;
box-sizing: border-box !important;
width: auto;
height: 100%;
max-width: 100%;
max-height: 100%;
direction: inherit;
scrollbar-width: none;
-ms-overflow-style: none;
}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
width: 0;
height: 0;
}
.simplebar-content:before,
.simplebar-content:after {
content: ' ';
display: table;
}
.simplebar-placeholder {
width: 100%;
max-width: 100%;
max-height: 100%;
pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
position: relative;
z-index: -1;
float: left;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
overflow: hidden;
box-sizing: inherit !important;
width: 100%;
height: 100%;
max-width: 1px;
max-height: 1px;
margin: 0;
padding: 0;
pointer-events: none;
}
.simplebar-height-auto-observer {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
overflow: hidden;
box-sizing: inherit;
width: 1000%;
height: 1000%;
min-width: 1px;
min-height: 1px;
opacity: 0;
pointer-events: none;
}
.simplebar-track {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
background: rgba(200, 200, 200, .3);
/* pointer-events: none; */
}
[data-simplebar].simplebar-dragging .simplebar-content {
pointer-events: none;
-moz-user-select: none;
user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-track {
pointer-events: all;
}
.simplebar-scrollbar {
position: absolute;
right: 0;
left: 0;
min-height: 10px;
}
.simplebar-scrollbar:before {
content: '';
position: absolute;
right: 2px;
left: 2px;
border-radius: 12px;
background: var(--key-color);
transition: opacity 0s linear;
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px;
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
top: 2px;
bottom: 2px;
}
.simplebar-track.simplebar-horizontal {
bottom: 3px;
left: 0;
overflow: visible;
width: 100%;
height: 6px;
max-width: 952px;
margin: 0 auto;
}
.simplebar-track.simplebar-horizontal.is-fixed {
position: fixed;
top: auto;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
top: auto;
right: auto;
bottom: -3px;
left: 0;
width: auto;
height: 12px;
min-width: 10px;
min-height: 0;
margin: auto 0;
border-radius: 12px;
background: var(--key-color);
}
/* Rtl support */
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
right: auto;
left: 0;
}
.hs-dummy-scrollbar-size {
position: fixed;
visibility: hidden;
overflow-x: scroll;
overflow-y: hidden;
width: 500px;
height: 500px;
opacity: 0;
direction: rtl;
}
.simplebar-hide-scrollbar {
position: fixed;
left: 0;
visibility: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
/* ============================================================= *
Utility
* ============================================================= */
/* Media Query Setting
====================================== */
.u-tablet-block {
display: none !important;
}
@media screen and (max-width: 960px) {
.u-tablet-block {
display: block !important;
}
}
.u-tablet-inline-block {
display: none !important;
}
@media screen and (max-width: 960px) {
.u-tablet-inline-block {
display: inline-block !important;
}
}
.u-tablet-flex {
display: none !important;
}
@media screen and (max-width: 960px) {
.u-tablet-flex {
display: flex !important;
}
.l-global-menu__head.u-tablet-flex{
display: grid !important;
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 960px) {
.u-tablet-none {
display: none !important;
}
}
.u-mobile-block {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-block {
display: block !important;
}
}
.u-mobile-inline-block {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-inline-block {
display: inline-block !important;
}
}
.u-mobile-flex {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-flex {
display: flex !important;
}
}
@media screen and (max-width: 560px) {
.u-mobile-none {
display: none !important;
}
}
/* text align
====================================== */
.u-ta-left {
text-align: left !important;
}
.u-ta-right {
text-align: right !important;
}
.u-ta-center {
text-align: center !important;
}
/* display
====================================== */
.u-d-block {
display: block !important;
}
.u-d-none {
display: none !important;
}
.u-d-inline {
display: inline !important;
}
.u-d-ib {
display: inline-block !important;
}
/* position
====================================== */
.u-pos-static {
position: static !important;
}
.u-pos-relative {
position: relative !important;
}
.u-pos-absolute {
position: absolute !important;
}
.u-pos-fixed {
position: fixed !important;
}
/* clear
====================================== */
.u-clearfix:after {
content: "";
display: block;
visibility: hidden;
clear: both;
}
/* other
====================================== */
.u-strong {
font-weight: bold !important;
}
.u-pointer {
cursor: pointer;
}
.u-nowrap {
white-space: nowrap;
}
.u-color-honda {
color: #cc0000 !important;
}
.u-color-ciao {
color: #0068b6 !important;
}
.u-color-mamoru {
color: #8fc31f !important;
}
.u-rotate-90 {
transform: rotate(90deg);
}
/* animationn
====================================== */
.u-no-transition {
transition: none !important;
}
/* u-wide-width
============================== */
.u-wide-width {
width: 100cqi;
margin-inline: calc(50% - 50cqi);
}
/* u-inner-width
============================== */
.u-inner-width {
max-width: 990px;
margin-right: auto;
margin-left: auto;
}