@charset "UTF-8";
/* =============================================================
Custom Properties
* ============================================================= */
/* color
============================== */
:root {
/* text color */
--base-color: #333;
/* border color */
--border-color:#ccc;
/* background color */
--bg-color: #f6f5f2;
/* key color */
--key-color: #005bac;
--key-text-color: #c2b7ff;
--key-color-sub: #e0e8ff;
--key-color-grade: linear-gradient(90deg, #513dc1 0%, #4773ec 100%);
/* point color */
--point-color: #f4c331;
/* maintenance color */
--ciao-color:#0168b7;
--mamoru-color:#8ec220;
/* color */
--white:#fff;
--black: #333;
--gray:#444;
--light-gray:#aaa;
}
/* size / font
============================== */
:root {
--contents-width: 1040;
--frame-width: 1366;
--inner-width: 1240;
--contents-width-px: calc(var(--contents-width) * 1px);
--frame-width-px: calc(var(--frame-width) * 1px);
--inner-width-px: calc(var(--inner-width) * 1px);
--inner-padding: 20px;
--outer-padding: clamp(20px, -432.25px + 37.5vw, 80px);
--inner-overflow: calc(var(--vw) * 50 - var(--contents-width-px) * .5);
--max-width: 1920;
--max-width-px: calc(var(--max-width) * 1px);
--contents-max-width: 1280px;
--side-space: clamp(14px, -52.2069px + 6.89655vw, 42px);
--container-width: min(var(--max-width-px), var(--vw) * 100 - var(--side-space) * 2);
--header-height: calc(55px + var(--slope-1px) * 16);
--sticky-height: 0px;
--base-border-radius: 10px;
--medium-border-radius: calc(8px + var(--slope-1px) * 4);
--base-font-size: 16;
--base-font-px: calc(var(--base-font-size) * 1px);
--line-height: 1.6;
--line-space: (var(--line-height) - 1)/2;
/* family */
--body-font-family: "Josefin Sans", "Zen Kaku Gothic New", sans-serif;
--base-font-family: "Zen Kaku Gothic New", sans-serif;
--en-font-family: "Josefin Sans", sans-serif;
/* animation */
--animation: cubic-bezier(.455, .03, .515, .955);
/* z-index */
--header-z-index: 1000;
--navigation-z-index: 200;
--modal-z-index: 1001;
--local-z-index: 0;
}
@media screen and (max-width: 960px) {
:root {
--inner-padding: 20px;
--inner-overflow: var(--inner-padding);
}
}
@media screen and (max-width: 560px) {
:root {
--line-height: 1.6;
}
}
/* utility
============================== */
:root {
--vw: 1vw;
--vh: 1vh;
--slope-1px: clamp(0px, -.95663px + .2551vw, 1px);
--leading-trim: calc((1em - 1lh) / 2);
--is-support-lh: initial;
--is-support-not-lh: "";
}
@media screen and (min-width: 2004px) {
:root {
--vw: 20.04px !important;
}
}
: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;
}
}
/* utility
============================== */
:root {
--icon-angle: url('data:image/svg+xml;utf8,');
--icon-down: 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-pagetop: url('data:image/svg+xml;utf8,');
--icon-menu: url('data:image/svg+xml;utf8,');
--icon-close: url('data:image/svg+xml;utf8,');
--icon-arrow: url('data:image/svg+xml;utf8,');
--icon-blank: url('data:image/svg+xml;utf8,');
}
/* data-intersection
============================== */
*:where([data-intersection]) {
transition: opacity 1s, transform .8s;
--intersection-y: 30px;
--intersection-x: 0;
--intersection-opacity: 0;
}
*[data-intersection] {
opacity: var(--intersection-opacity);
transform: translateX(var(--intersection-x)) translateY(var(--intersection-y));
}
*:where([data-intersection][data-intersecting=true]) {
--intersection-y: 0;
--intersection-x: 0;
--intersection-opacity: 1;
}
*[data-pref=miyagi] {
--pref-color: var(--pref-color-miyagi);
--pref-color-sub: var(--pref-color-sub-miyagi);
}
*[data-pref=yamagata] {
--pref-color: var(--pref-color-yamagata);
--pref-color-sub: var(--pref-color-sub-yamagata);
}
*[data-pref=fukushima] {
--pref-color: var(--pref-color-fukushima);
--pref-color-sub: var(--pref-color-sub-fukushima);
}
*[data-pref=iwate] {
--pref-color: var(--pref-color-iwate);
--pref-color-sub: var(--pref-color-sub-iwate);
}
*[data-pref=akita] {
--pref-color: var(--pref-color-akita);
--pref-color-sub: var(--pref-color-sub-akita);
}
*[data-pref=aomori] {
--pref-color: var(--pref-color-aomori);
--pref-color-sub: var(--pref-color-sub-aomori);
}
/* =============================================================
Base
* ============================================================= */
*,
*:before,
*:after {
box-sizing: border-box;
}
*[data-anchor-id] {
scroll-margin-top: var(--header-height);
}
html {
height: 100%;
margin: 0;
padding: 0;
font-size: 62.5%;
}
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(--body-font-family);
line-height: var(--line-height);
-webkit-text-size-adjust: 100%;
}
body > * {
backface-visibility: hidden;
}
:where(img, svg) {
display: block;
height: auto;
max-width: 100%;
}
a {
color: inherit;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
@media screen and (min-width: 961px) {
a.js-tel {
text-decoration: none;
cursor: text;
pointer-events: 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);
}
/* l-wrapper
============================== */
.l-wrapper {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
min-height: 100%;
margin-inline: auto;
transition: opacity .4s ease-out;
}
body.is-loaded .l-wrapper {
opacity: 1;
}
@media screen and (max-width: 960px) {
.l-wrapper {
min-width: 0;
}
}
@media print {
.l-wrapper {
min-width: 1080px;
}
}
/* l-loader
============================== */
.l-loader {
position: fixed;
top: 0;
left: 0;
z-index: 100000;
width: 100%;
height: 100%;
background: #fff;
}
body.is-loaded .l-loader {
opacity: 0;
transition: opacity .2s ease-in 2.4s;
pointer-events: none;
}
body.is-loaded .l-loader::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 4px;
margin: 0 auto auto;
background: var(--key-color-grade);
animation: shutterOpen 2.8s forwards;
}
@keyframes shutterOpen {
0% {
width: 0;
height: 4px;
}
50% {
width: 100%;
height: 4px;
}
80% {
width: 100%;
height: 100%;
}
100% {
width: 100%;
height: 100%;
}
}
/* data-toggle-id
============================== */
*[data-toggle-id] {
display: none;
}
/* =============================================================
Header
* ============================================================= */
/* header
=============================== */
.l-header {
position: fixed;
top: 0;
left: 0;
z-index: var(--header-z-index);
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
gap: 20px;
width: 100%;
height: var(--header-height);
background: transparent;
font-size: calc(11px + var(--slope-1px) * 1);
}
@media print {
.l-header {
display: none;
visibility: hidden;
opacity: 0;
}
}
/* l-header-logo
=============================== */
.l-header-logo {
position: relative;
z-index: 1001;
flex-grow: 0;
flex-shrink: 1;
width: 100%;
height: 100%;
max-width: calc(284px + var(--slope-1px) * 35);
}
.l-header-logo a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: 100%;
padding: calc(12px + var(--slope-1px) * 4) calc(32px + var(--slope-1px) * 8) calc(18px + var(--slope-1px) * 10) calc(12px + var(--slope-1px) * 4);
border-bottom-right-radius: calc(30px + var(--slope-1px) * 20);
background: #fff;
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 {
padding-right: 56px;
}
@media screen and (max-width: 960px) {
.l-header-menu {
padding-right: 8px;
}
}
@media screen and (max-width: 960px) {
.l-header-menu__nav {
display: none;
}
}
.l-header-menu__toggle {
display: none;
}
@media screen and (max-width: 960px) {
.l-header-menu__toggle {
display: flex;
}
}
/* l-header-anchor
============================== */
.l-header-anchor {
display: flex;
align-items: center;
gap: 24px;
padding: 18px 32px;
border-radius: 50px;
background: #fff;
}
.l-header-anchor__link {
display: flex;
align-items: center;
gap: 2px;
text-decoration: none;
font-weight: 500;
font-size: 16px;
line-height: 1;
transition: opacity .2s;
}
.l-header-anchor__link span {
padding-top: .3em;
}
.l-header-anchor__link:hover {
opacity: .7;
}
.l-header-anchor__link:after {
content: "";
display: block;
flex-shrink: 0;
width: 20px;
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-down) 50% 50%/contain no-repeat;
}
/* l-header-toggle
=============================== */
.l-header-toggle {
position: relative;
z-index: 1001;
display: flex;
visibility: visible;
justify-content: center;
align-items: center;
width: 43px;
height: 43px;
aspect-ratio: 1/1;
outline: none;
border: 0;
border-radius: 50%;
background: var(--icon-menu) 50% 50%/24px no-repeat #fff;
color: inherit;
line-height: 1;
cursor: pointer;
transition: all .2s cubic-bezier(.55, .05, .22, .99);
pointer-events: all;
appearance: none;
}
.l-header-toggle span {
display: none;
}
body.is-toggle-menu-open .l-header-toggle {
background-image: var(--icon-close);
}
/* l-header-dropdown
============================== */
.l-header-dropdown {
position: fixed;
top: 0;
right: 0;
z-index: 1000;
overflow-y: auto;
width: 100%;
height: 100%;
background: var(--key-color);
color: #fff;
transition: all .2s cubic-bezier(.65, 0, .35, 1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
body.is-toggle-menu-open .l-header-dropdown {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.l-header-dropdown__list {
padding: calc(var(--header-height) + 33px) 30px 33px;
}
.l-header-dropdown__item {
display: contents;
}
.l-header-dropdown__nav {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
padding-block: 24px;
border-bottom: 1px solid;
text-decoration: none;
font-size: 14px;
}
.l-header-dropdown__nav:after {
content: "";
display: block;
width: 24px;
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}
.l-header-dropdown__nav[target="_blank"]:after {
mask-image: var(--icon-blank);
}
.l-header-dropdown__nav.js-scroll:after {
rotate: 90deg;
}
/* =============================================================
Main
* ============================================================= */
/* main
=============================== */
.l-main {
position: relative;
flex-grow: 1;
width: 100%;
min-height: 0%;
max-height: 100%;
margin-inline: auto;
padding-top: var(--header-height);
}
body[data-id=index] .l-main {
padding-top: 0;
}
.l-main__head {
display: grid;
grid-template-columns: 100%;
gap: 48px;
width: 100%;
max-width: var(--inner-width-px);
margin-inline: auto;
margin-bottom: 64px;
padding-inline: var(--inner-padding);
padding-top: 32px;
}
.l-main__body {
width: 100%;
max-width: var(--inner-width-px);
margin-inline: auto;
margin-bottom: calc(-80px + var(--slope-1px) * -20);
padding-inline: var(--inner-padding);
padding-bottom: calc(160px + var(--slope-1px) * 40);
}
/* l-main-breadcrumbs
============================== */
.l-main-breadcrumbs {
margin-top: calc(20px + var(--slope-1px) * 10);
}
/* =============================================================
Footer
* ============================================================= */
/* l-footer
============================== */
.l-footer {
position: relative;
z-index: 2;
padding-block: calc(80px + var(--slope-1px) * 20) calc(48px + var(--slope-1px) * 8);
border-radius: calc(40px + var(--slope-1px) * 60) calc(40px + var(--slope-1px) * 60) 0 0;
background: var(--key-color);
color: #fff;
}
.l-footer__inner {
display: grid;
grid-template-columns: 100%;
gap: calc(64px + var(--slope-1px) * 96);
width: 100%;
max-width: var(--inner-width-px);
margin-inline: auto;
padding-inline: var(--inner-padding);
}
.l-footer__head {
margin-block: var(--leading-trim);
font-weight: 900;
font-size: calc(32px + var(--slope-1px) * 32);
line-height: 1.6;
}
.l-footer__body {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
padding-top: calc(32px + var(--slope-1px) * 8);
border-top: 1px solid;
font-weight: 700;
font-size: 14px;
}
@media screen and (max-width: 960px) {
.l-footer__body {
grid-template-columns: 100%;
justify-items: flex-end;
}
}
.l-footer__pagetop {
position: absolute;
top: calc(-24px + var(--slope-1px) * -8);
right: 0;
left: 0;
width: 100%;
max-width: var(--inner-width-px);
margin-inline: auto;
padding-inline: var(--inner-padding);
}
/* l-footer-pagetop
============================== */
.l-footer-pagetop {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: calc(70px + var(--slope-1px) * 50);
aspect-ratio: 1/1;
margin-left: auto;
border-radius: 100%;
background: var(--base-color);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: calc(16px + var(--slope-1px) * 8);
font-family: var(--en-font-family);
line-height: .8;
transition: filter .2s;
}
.l-footer-pagetop:hover {
filter: brightness(1.4);
}
.l-footer-pagetop:before {
content: "";
display: block;
width: calc(20px + var(--slope-1px) * 12);
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-pagetop) 50% 50%/contain no-repeat;
}
/* l-footer-nav
============================== */
.l-footer-nav {
display: flex;
gap: 16px;
}
@media screen and (max-width: 960px) {
.l-footer-nav {
flex-direction: column;
align-items: flex-end;
}
}
.l-footer-nav a {
text-decoration: underline;
}
.l-footer-nav a:hover {
text-decoration: none;
}
/* l-footer-copyright
============================== */
.l-footer-copyright {
font-family: var(--en-font-family);
}
/* =============================================================
Modal
* ============================================================= */
/* l-modal
=============================== */
.l-modal {
position: fixed;
top: 0;
left: 0;
z-index: 100005;
display: flex;
visibility: hidden;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: calc(var(--vh) * 5) var(--inner-padding);
background: rgba(0, 0, 0, .9);
opacity: 0;
transition: all .3s;
pointer-events: none;
}
.l-modal.is-show {
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: fit-content;
margin: auto;
opacity: 0;
transition: all .4s;
}
.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);
}
.l-modal__close {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 4;
width: 1000px;
max-width: 100%;
margin-inline: auto;
padding-top: 10px;
padding-right: 10px;
}
.l-modal__close > button {
display: flex;
flex-direction: column;
width: 40px;
height: 40px;
margin-left: auto;
outline: none;
border: 0;
border-radius: 50%;
background: transparent;
background: url("/assets/img/icon/close.svg") 50% 50%/30% 30% no-repeat #fff;
color: #fff;
line-height: 1;
transition: all .3s ease-out;
appearance: none;
}
.l-modal__close > button:hover {
opacity: .7;
}
.l-modal__close > button span {
display: none;
}
/* l-modal-contents
============================== */
.l-modal-contents {
overflow: hidden;
width: 1000px;
max-width: 100%;
margin-inline: auto;
border-radius: var(--base-border-radius);
background: #fff;
}
.l-modal-contents__head {
display: flex;
justify-content: center;
align-items: center;
gap: 9px;
padding: .75em 60px;
background: #f4f4f4;
text-align: center;
font-weight: 500;
font-size: calc(22px + var(--slope-1px) * 6);
line-height: 1.5;
}
.l-modal-contents__head > ._number {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: calc(30px + var(--slope-1px) * 10);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--base-color);
color: #fff;
font-weight: 400;
font-style: normal;
font-size: calc(18px + var(--slope-1px) * 4);
font-family: var(--point-en-font-family);
line-height: 1;
}
.l-modal-contents__body {
padding: calc(20px + var(--slope-1px) * 20);
}
/* l-modal-select
============================== */
.l-modal-select {
display: grid;
grid-template-columns: 100%;
gap: calc(25px + var(--slope-1px) * 15);
}
.l-modal-select:has(.l-modal-select__lead) {
gap: 20px;
}
.l-modal-select__head {
display: grid;
grid-template-columns: 100%;
gap: calc(30px + var(--slope-1px) * 4);
}
.l-modal-select__text {
margin-block: var(--leading-trim);
text-align: center;
letter-spacing: 0;
font-size: 16px;
}
.l-modal-select__lead {
display: flex;
justify-content: center;
align-items: center;
gap: .5em;
margin-block: var(--leading-trim);
text-align: center;
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 3);
line-height: 1.5;
}
.l-modal-select__lead:before, .l-modal-select__lead:after {
content: "";
display: inline-block;
width: 2px;
height: calc(100% - .5em);
border-radius: 2px;
background: currentColor;
transform-origin: bottom center;
}
.l-modal-select__lead:before {
transform: rotate(-20deg);
}
.l-modal-select__lead:after {
transform: rotate(20deg);
}
.l-modal-select__body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 11px 13px;
}
@media screen and (max-width: 560px) {
.l-modal-select__body {
grid-template-columns: 100%;
gap: 10px;
}
}
.l-modal-select__button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 84px;
border: 1px solid var(--base-color);
border-radius: var(--base-border-radius);
background: #fff;
transition: all .3s var(--animation);
}
@media screen and (max-width: 560px) {
.l-modal-select__button {
height: 50px;
}
}
.l-modal-select__button:hover {
filter: brightness(.92);
}
.l-modal-select__button img {
height: 54px;
}
@media screen and (max-width: 560px) {
.l-modal-select__button img {
height: 24px;
aspect-ratio: 209 / 24;
object-fit: contain;
object-position: left center;
}
}
.l-modal-select__button:after {
content: "";
position: absolute;
top: 0;
right: 15px;
bottom: 0;
display: block;
width: 16px;
height: 16px;
margin-block: auto;
background: var(--icon-external) 50% 50%/contain no-repeat;
}
/* ============================================================= *
Block
* ============================================================= */
/* c-scroll-block
============================== */
.c-scroll-block {
overflow-x: auto;
}
@media screen and (max-width: 560px) {
.c-scroll-block {
width: calc(100% + var(--inner-padding) * 2);
margin-inline: calc(var(--inner-padding) * -1);
padding-inline: var(--inner-padding);
}
.c-scroll-block > img {
max-width: none;
}
.c-scroll-block > *:not([class*="scroll-hint"]) {
min-width: 800px;
}
}
/* c-lead-block
============================== */
.c-lead-block {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
}
/* c-recruit-block
============================== */
.c-recruit-block {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 300px 1fr;
gap: 30px 80px;
}
@media screen and (max-width: 960px) {
.c-recruit-block {
grid-template-rows: auto;
grid-template-columns: 100%;
gap: 0;
}
}
.c-recruit-block__image {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: 961px) {
.c-recruit-block__image {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.c-recruit-block__image img:nth-child(2n+1) {
margin-top: 60px;
}
}
.c-recruit-block__text {
margin-bottom: calc(15px + var(--slope-1px) * 15);
}
@media screen and (max-width: 960px) {
.c-recruit-block__text {
margin-top: calc(15px + var(--slope-1px) * 15);
}
}
.c-recruit-block__nav {
display: flex;
justify-content: center;
}
/* c-flow-block
============================== */
.c-flow-block {
display: grid;
grid-template-columns: 100%;
gap: calc(30px + var(--slope-1px) * 12);
}
.c-flow-block__item {
position: relative;
display: grid;
align-items: center;
grid-template-columns: 64px 1fr;
min-height: 64px;
border: 1px solid #aaa;
border-radius: var(--base-border-radius);
background: #fff;
}
@media screen and (max-width: 767px) {
.c-flow-block__item {
grid-template-columns: 100%;
}
}
.c-flow-block__item:not(:last-child):after {
content: "";
position: absolute;
top: 100%;
right: 0;
left: 0;
display: block;
width: calc(38px + var(--slope-1px) * 16);
height: calc(14px + var(--slope-1px) * 4);
margin-inline: auto;
background: #aaa;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.c-flow-block__number {
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
padding: 10px;
border-radius: calc(var(--base-border-radius) - 1px) 0 0 calc(var(--base-border-radius) - 1px);
background: var(--base-color);
color: #fff;
font-size: calc(20px + var(--slope-1px) * 4);
line-height: 1;
}
@media screen and (max-width: 767px) {
.c-flow-block__number {
border-radius: calc(var(--base-border-radius) - 1px) calc(var(--base-border-radius) - 1px) 0 0;
}
}
.c-flow-block__contents {
display: flex;
justify-content: space-between;
align-items: center;
gap: calc(20px + var(--slope-1px) * 4);
padding: calc(20px + var(--slope-1px) * 4);
}
@media screen and (max-width: 560px) {
.c-flow-block__contents {
flex-direction: column;
}
}
.c-flow-block__image {
flex-shrink: 0;
max-width: 50%;
}
@media screen and (max-width: 560px) {
.c-flow-block__image {
max-width: 100%;
}
}
.c-flow-block__image img {
width: auto;
max-height: 300px;
}
.c-flow-block__image img[src*=".jpg"] {
width: 330px;
max-width: 100%;
max-height: none;
border-radius: var(--base-border-radius);
}
.c-flow-block__text {
display: grid;
flex-grow: 1;
grid-template-columns: 100%;
gap: calc(20px + var(--slope-1px) * 4);
}
.c-flow-block__head {
margin-block: var(--leading-trim);
font-weight: 500;
font-size: calc(20px + var(--slope-1px) * 2);
}
.c-flow-block__body {
margin-block: var(--leading-trim);
}
/* ============================================================= *
Navigation
* ============================================================= */
/* breadcrumbs
=============================== */
.c-breadcrumbs {
grid-row: 1/2;
gap: 6px;
width: 100%;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
font-size: calc(12px + var(--slope-1px) * 1);
line-height: 1.2;
}
.c-breadcrumbs__list {
display: block;
}
.c-breadcrumbs__list > li {
display: inline;
}
.c-breadcrumbs__list > li:not(:last-child) {
padding-right: 6px;
}
.c-breadcrumbs__list > li + li:before {
content: "";
position: relative;
top: 2px;
display: inline-block;
width: 14px;
aspect-ratio: 1/1;
margin-right: 6px;
background: currentColor;
mask: var(--icon-angle) 50% 50%/contain no-repeat;
}
.c-breadcrumbs__list > li a {
text-decoration: underline;
transition: all .2s ease-out;
text-underline-offset: .25em;
}
.c-breadcrumbs__list > li a:hover {
text-decoration: none;
}
/* c-button
=============================== */
.c-button {
display: inline grid;
align-items: center;
grid-template-columns: 1fr auto 1fr;
gap: .25em;
min-height: 50px;
inline-size: min(100%, 430px);
padding-block: 10px;
padding-inline: 0 1em;
outline: none;
border: none;
border-radius: var(--base-border-radius);
background: var(--_bg-color);
color: var(--_color);
text-align: center;
text-decoration: none;
font-weight: 500;
font-size: 16px;
line-height: 1.2;
transition: all .3s var(--animation), color .3s var(--animation);
appearance: none;
--_bg-color:var(--key-color);
--_color:var(--white);
--_arrow-color:var(--_color);
}
.c-button._large-text {
font-size: calc(16px + var(--slope-1px) * 4);
}
.c-button._white {
border: 1px solid var(--white);
--_bg-color:var(--white);
--_color:var(--base-color);
}
@media (any-hover: hover) {
.c-button._white:where(:hover) {
border: 1px solid var(--white);
opacity: 1;
--_bg-color:transparent;
--_color:var(--white);
}
}
.c-button._black {
--_bg-color:var(--black);
}
@media (any-hover: hover) {
.c-button._black:where(:hover) {
opacity: .7;
}
}
.c-button._border {
border: 1px solid currentColor;
--_bg-color: transparent;
--_color:var(--base-color);
}
@media (any-hover: hover) {
.c-button._border:where(:hover) {
opacity: 1;
--_bg-color:var(--base-color);
--_color:var(--white);
}
}
.c-button svg path:not([fill]) {
fill: var(--_color);
transition: all .3s var(--animation);
}
.c-button::before {
content: "";
}
.c-button::after {
content: "";
justify-self: end;
inline-size: .75em;
aspect-ratio: 1;
background: var(--_arrow-color);
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
transition: all .2s ease-out;
}
.c-button.js-scroll::after {
inline-size: 1.25em;
mask: var(--icon-down) 50% 50%/contain no-repeat;
}
.c-button[target="_blank"]::after {
content: "";
inline-size: 1.5em;
mask: var(--icon-external) 50% 50%/contain no-repeat;
}
.c-button._dl:after {
content: "";
inline-size: 1.5em;
mask: var(--icon-download) 50% 50%/contain no-repeat;
}
.c-button[data-modal-for]::after {
content: "";
inline-size: 1.5em;
mask: var(--icon-plus) 50% 50%/contain no-repeat;
}
@media screen and (max-width: 960px) {
.c-button {
padding-inline: .5em;
}
}
@media (any-hover: hover) {
.c-button:where(:hover) {
opacity: .7;
--_color:var(--white);
}
}
/* container */
.c-button-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1em;
width: 100%;
margin-top: 30px;
--button-min-width: calc(285px + var(--slope-1px) * 15);
}
.c-button-container._long {
--button-min-width: calc(285px + var(--slope-1px) * 145);
}
.c-button-container > .c-button {
min-width: var(--button-min-width);
inline-size: auto;
}
.c-button-container._closer {
margin-top: calc(15px + var(--slope-1px) * 5);
}
.c-button-lead {
position: relative;
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr auto 1fr;
gap: 0;
width: fit-content;
margin-inline: auto;
padding-block: 10px;
color: currentColor;
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
font-weight: 400;
font-size: 1.6rem;
}
.c-button-lead span {
word-break: keep-all;
letter-spacing: 0;
}
.c-button-lead::before, .c-button-lead::after {
content: "";
position: relative;
display: inline-grid;
width: 1.5em;
height: 2px;
margin: 0 auto;
border-radius: var(--ovall-radius);
background: currentColor;
}
.c-button-lead::before {
rotate: 65deg;
}
.c-button-lead::after {
rotate: -65deg;
}
.c-button-notes {
position: relative;
display: flex;
align-items: center;
gap: 5px;
width: fit-content;
margin-inline: auto;
margin-top: 10px;
color: currentColor;
transition: all .3s var(--animation);
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
.c-button-notes::before {
content: "";
inline-size: 18px;
aspect-ratio: 1;
background: currentColor;
mask: url("/assets/img/icon/hatena.svg") 50% 50%/contain no-repeat;
transition: all .2s ease-out;
}
@media (any-hover: hover) {
.c-button-notes:where(:hover) {
opacity: .7;
}
}
/* banner
=============================== */
.c-banner {
display: block;
border: 1px solid var(--border-color);
transition: opacity .2s;
}
@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: calc(30px + var(--slope-1px) * 20);
}
.c-tab__list {
display: grid;
justify-content: center;
grid-template-columns: repeat(2, calc(50% - 5px));
gap: 10px;
width: 100%;
padding-inline: 35px;
border-bottom: 2px solid;
}
@media screen and (max-width: 960px) {
.c-tab__list {
grid-template-columns: repeat(2, 1fr);
padding-inline: unset;
}
}
.c-tab__item {
z-index: 1;
display: flex;
align-items: stretch;
width: 100%;
margin-bottom: -2px;
}
.c-tab__button {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-content: inherit;
overflow: visible;
width: 100%;
min-height: 70px;
padding: 1em .25em;
outline: none;
border: 2px solid var(--base-color);
border-top-left-radius: var(--base-border-radius);
border-top-right-radius: var(--base-border-radius);
background: var(--base-color);
color: #fff;
text-align: center;
text-decoration: none;
font-weight: 500;
font-size: calc(15px + var(--slope-1px) * 5);
line-height: 1.2;
cursor: pointer;
transition: background .25s;
}
.c-tab__button:after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
z-index: 3;
display: block;
width: 100%;
height: 2px;
}
@media screen and (max-width: 960px) {
.c-tab__button {
min-height: 4.71429em;
}
}
.c-tab__button span {
display: block;
margin-inline: auto;
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-tab__button em {
font-size: 1.4em;
}
.c-tab__button.is-current {
background: #fff;
color: var(--base-color);
}
.c-tab__button.is-current:after {
background: #fff;
}
/* c-anchor
============================== */
.c-anchor {
margin-bottom: calc(30px + var(--slope-1px) * 30);
padding: 15px 20px;
border-radius: var(--base-border-radius);
background: var(--bg-color);
}
@media screen and (max-width: 960px) {
.c-anchor {
width: calc(100% + var(--inner-padding) * 2);
margin-inline: calc(var(--inner-padding) * -1);
border-radius: 0;
}
}
.c-anchor__body {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px 1em;
}
@media screen and (max-width: 960px) {
.c-anchor__body {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
/* c-anchor-button
============================== */
.c-anchor-button {
display: flex;
align-items: center;
font-size: calc(12px + var(--slope-1px) * 2);
}
@media screen and (max-width: 560px) {
.c-anchor-button {
display: block;
}
}
.c-anchor-button span {
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-anchor-button:after {
content: "";
display: inline-block;
flex-shrink: 0;
width: 1.42857em;
height: 1.42857em;
background: var(--icon-down) 50% 50%/contain no-repeat;
vertical-align: middle;
}
/* c-icon-nav
============================== */
.c-icon-nav {
display: flex;
align-items: center;
gap: 10px;
color: currentColor;
text-decoration: underline;
}
.c-icon-nav > i {
flex-shrink: 0;
width: 30px;
height: 30px;
color: currentColor;
}
.c-icon-nav > i svg path {
fill: currentColor;
}
.c-icon-nav:after {
content: "";
display: block;
flex-shrink: 0;
width: 1em;
height: 1em;
background: var(--icon-arrow) 50% 50%/contain no-repeat;
}
/* ============================================================= *
Section
* ============================================================= */
.c-section {
position: relative;
}
@media screen and (min-width: 961px) {
.c-section:has(.c-section__foot._shoulder) {
display: grid;
align-items: center;
grid-template-columns: 1fr 232px;
gap: 30px;
}
}
.c-section:not(:last-child) {
margin-bottom: calc(75px + var(--slope-1px) * 15);
}
.c-section._closer {
margin-bottom: calc(50px + var(--slope-1px) * 25);
}
.c-section._no-bottom {
margin-bottom: 0;
}
.c-section._no-top {
margin-top: 0;
}
.c-section._bg {
padding-block: calc(50px + var(--slope-1px) * 25);
}
.c-section._bg + .c-section._bg {
padding-top: 25px;
}
.c-section._bg:before {
content: "";
position: absolute;
top: 0;
left: 0;
left: 50%;
z-index: -1;
display: block;
width: calc(var(--vw) * 100);
height: 100%;
background: var(--bg-color);
transform: translateX(-50%);
}
.c-section__head {
margin-bottom: 50px;
}
.c-section__head:has(.c-section-title:last-child) {
margin-bottom: 0;
}
.c-section__head:has(.c-section-sub-title) {
margin-bottom: calc(20px + var(--slope-1px) * 16);
}
.c-section__head._spaced {
margin-bottom: calc(50px + var(--slope-1px) * 10) !important;
}
.c-section__head._no-bottom {
margin-bottom: 0;
}
.c-section__head._no-top {
margin-top: 0;
}
@media screen and (min-width: 961px) {
.c-section:has(.c-section__foot._shoulder) .c-section__body {
grid-column: span 2;
}
}
.c-section__foot {
display: flex;
justify-content: center;
margin-top: calc(40px + var(--slope-1px) * 10);
}
@media screen and (min-width: 961px) {
.c-section__foot._shoulder {
grid-column: 2 / 3;
grid-row: 1 / 2;
margin-top: 0;
}
}
.c-section:last-child {
margin-bottom: calc(70px + var(--slope-1px) * 40);
}
.c-section._bg {
padding-top: calc(50px + var(--slope-1px) * 18);
padding-bottom: calc(60px + var(--slope-1px) * 20);
}
._bg:has(+ ._bg) {
margin-bottom: 0;
}
._bg:last-child {
margin-bottom: 0;
}
._bg[data-bg=gray] {
border-image: linear-gradient(var(--bg-color) 0 0) fill 0//0 100vi;
}
._bg[data-bg=white] {
border-image: linear-gradient(#fff 0 0) fill 0//0 100vi;
}
._bg[data-bg=key] {
border-image: linear-gradient(var(--key-color) 0 0) fill 0//0 100vi;
}
/* inner section
=============================== */
.c-inner-section:not(:first-child) {
margin-top: calc(50px + var(--slope-1px) * 25);
}
.c-inner-section._border-top {
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid #aaa;
}
.c-inner-section__head {
margin-bottom: calc(20px + var(--slope-1px) * 10);
}
/* ============================================================= *
Table
* ============================================================= */
.c-table-block {
display: flex;
flex-direction: column;
gap: calc(15px + var(--slope-1px) * 9);
}
.c-table-block + .c-table-block {
margin-top: 4rem;
}
/* scroll container
=============================== */
@media screen and (max-width: 768px) {
.c-table-outer._spscroll {
position: relative;
overflow: auto;
width: 100%;
}
.c-table-outer._spscroll .c-data-table {
width: 960px;
}
}
.c-table-outer._multiple {
margin: 2rem 0 1.5rem;
text-align: center;
}
.c-table-outer._multiple .c-data-table {
table-layout: fixed;
}
.c-table-outer._multiple._first .c-data-table tr:first-child th:first-child {
width: 16em;
max-width: 16em;
}
.c-table-outer._multiple .c-data-table tr td {
padding: 1rem;
}
.c-table-outer._multiple._height .c-data-table tr th {
padding: 2.2rem 1rem;
}
.c-table-outer._bnone {
border: none;
}
/* data table
=============================== */
.c-data-table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
font-size: calc(14px + var(--slope-1px) * 1);
}
.c-data-table._fixed {
table-layout: fixed;
}
.c-data-table._inspection-main thead th._head {
width: 20%;
}
@media screen and (max-width: 960px) {
.c-data-table._inspection-main thead th._head {
width: 13.33333%;
}
}
.c-data-table._inspection-main tbody td {
width: 13.33333%;
}
.c-data-table._inspection-reference thead th._head {
width: 20%;
}
@media screen and (max-width: 960px) {
.c-data-table._inspection-reference thead th._head {
width: 13.33333%;
}
}
.c-data-table._inspection-reference tbody td {
width: 13.33333%;
}
.c-data-table._ciao {
table-layout: fixed;
}
.c-data-table._ciao tr th {
width: 14.25%;
}
.c-data-table._ciao tr th._head {
width: 16.83333%;
}
.c-data-table._ciao tr th._small {
width: 7.08333%;
}
.c-data-table._ciao tr th._inspection {
width: 10%;
}
.c-data-table th,
.c-data-table td {
padding: 1em .75em;
text-align: center;
}
.c-data-table thead th,
.c-data-table thead td {
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.c-data-table thead th {
background: var(--base-color);
color: var(--white);
font-weight: 500;
font-size: calc(14px + var(--slope-1px) * 2);
}
.c-data-table thead th._head {
width: 22.5%;
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-data-table thead th ._example {
display: block;
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid #ccc;
font-style: normal;
font-size: 71.222222%;
}
.c-data-table thead th._small {
font-size: calc(13px + var(--slope-1px) * 1);
}
.c-data-table thead th em {
display: block;
font-size: 1.06667em;
}
.c-data-table thead th em span {
display: inline;
padding-left: .5em;
font-size: .875em;
}
.c-data-table thead th > span {
display: block;
margin-top: .25em;
font-size: .84615em;
}
.c-data-table thead td {
background: var(--bg-color);
}
.c-data-table tbody tr._subtotal th {
background: var(--bg-key-color);
}
.c-data-table tbody tr._subtotal td {
background: var(--bg-key-color);
}
.c-data-table tbody tr._total th {
background: var(--key-color);
color: var(--white);
}
.c-data-table tbody tr._total td {
background: var(--key-color);
color: var(--white);
}
.c-data-table tbody th,
.c-data-table tbody td {
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.c-data-table tbody th {
background: var(--bg-color);
font-weight: 500;
font-size: calc(14px + var(--slope-1px) * 2);
}
.c-data-table tbody th[rowspan] {
width: 2.66667em;
padding: 1.2em .33333em;
background: var(--base-color);
color: var(--white);
}
.c-data-table tbody th[rowspan] span {
display: inline-block;
min-height: 1em;
color: var(--white);
text-align: left;
white-space: nowrap;
line-height: 1.25;
writing-mode: vertical-rl;
text-orientation: upright;
}
.c-data-table tbody th._gray {
background: var(--bg-color);
color: var(--base-color);
}
.c-data-table tbody th._white {
background: var(--white);
color: var(--base-color);
}
.c-data-table tbody th._small {
font-size: calc(13px + var(--slope-1px) * 1);
}
.c-data-table tbody td {
width: 25%;
}
.c-data-table tbody td._small {
font-size: calc(13px + var(--slope-1px) * 1);
}
.c-data-table tbody td._gray {
background: var(--bg-color);
color: var(--base-color);
}
.c-data-table tbody td._white {
background: var(--white);
color: var(--base-color);
}
.c-data-table tbody td._pack {
background: var(--bg-color);
color: var(--base-color);
font-weight: 700;
}
.c-data-table tbody td span {
display: block;
}
.c-data-table tbody td span:not(:last-child) {
padding-bottom: .75em;
border-bottom: 1px solid #ccc;
}
.c-data-table tbody td span:not(:first-child) {
padding-top: .75em;
}
.c-data-table tbody td span i {
display: block;
margin-bottom: 5px;
font-style: normal;
font-size: 75%;
}
/* profile table
=============================== */
.c-profile-table {
width: 100%;
border-collapse: collapse;
font-size: calc(13px + var(--slope-1px) * 2);
}
.c-profile-table th {
width: 12.33333em;
padding: 1.33333em 0;
padding-right: 1em;
border-bottom: 1px solid var(--base-color);
text-align: center;
font-weight: bold;
}
@media screen and (max-width: 960px) {
.c-profile-table th {
display: flex;
width: 100%;
padding: 1.33333em 0 0;
border-bottom: none;
}
}
.c-profile-table td {
width: calc(100% - 12.33333em);
padding: 1.33333em 0;
border-bottom: 1px solid var(--border-color);
}
@media screen and (max-width: 960px) {
.c-profile-table td {
display: flex;
width: 100%;
padding: .2em 0 1.33333em;
}
}
/* ============================================================= *
Text
* ============================================================= */
/* lead
=============================== */
.c-lead {
text-align: left;
font-size: calc(15px + var(--slope-1px) * 1);
line-height: 1.57143;
}
.c-lead > p {
/* -0.375em for line-height offset */
margin-top: -.375em;
margin-bottom: -.375em;
}
.c-lead > p._has-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-lead > p em {
font-weight: bold;
font-size: 1.33333em;
}
.c-lead > p small {
font-size: .77778em;
}
.c-lead > p + p {
margin-top: 1em;
}
/* text
=============================== */
.c-text {
margin-block: var(--leading-trim);
text-align: left;
font-size: 16px;
}
.c-text._center {
text-align: center;
}
.c-text._left {
text-align: left;
}
.c-text._has-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-text em {
font-weight: bold;
font-size: 1.125em;
}
.c-text small {
font-size: .875em;
}
.c-text + p {
margin-top: 1em;
}
/* notes
=============================== */
.c-notes {
margin-top: 1.5em;
font-size: 1.3rem;
}
.c-notes > li {
padding-left: 1em;
text-indent: -1em;
}
.c-notes > li strong {
font-weight: bold;
}
.c-notes > li + li {
margin-top: .25em;
}
.c-notes > li:before {
content: "\203b";
}
.c-notes._number > li:before {
content: "※" attr(data-number);
}
.c-notes._circle > li:before {
content: "\0025cf";
}
.c-notes._dot > li:before {
content: "\30fb";
}
.c-notes._square > li:before {
content: "\25a0";
}
.c-notes._star > li:before {
content: "\2605";
}
.c-notes > li._highlight {
color: #e71d0f;
font-weight: bold;
}
.c-notes > li._pointcolor {
color: var(--point-color);
font-weight: bold;
}
.c-notes > li._dot:before {
content: "\30fb";
}
.c-notes > li._number:before {
content: "※" attr(data-number);
margin-right: .5em;
}
.c-notes > li._circle:before {
content: "\0025cf";
}
.c-notes > li._square:before {
content: "\25a0";
}
.c-notes > li._star:before {
content: "\2605";
}
/* c-list
============================== */
.c-list {
display: grid;
grid-template-columns: 100%;
gap: 20px;
font-size: 16px;
}
.c-list:not(:first-child) {
margin-top: 32px;
}
@media screen and (max-width: 960px) {
.c-list:not(:first-child) {
margin-top: 40px;
}
}
.c-list > li {
margin-block: var(--leading-trim);
padding-left: 1em;
text-indent: -1em;
}
.c-list > li:before {
content: "\30fb";
}
.c-list > li._em {
font-weight: bold;
}
.c-list > li em {
font-weight: bold;
}
.c-list > li small {
font-weight: 400;
font-size: 13px;
}
/* ============================================================= *
Title
* ============================================================= */
/* c-page-title
============================== */
.c-page-title {
position: relative;
display: flex;
align-items: baseline;
gap: 16px 24px;
font-weight: 700;
font-size: calc(32px + var(--slope-1px) * 16);
line-height: 1;
}
@media screen and (max-width: 960px) {
.c-page-title {
flex-direction: column;
}
}
.c-page-title[data-category]:after {
content: attr(data-category);
margin-block: var(--leading-trim);
color: #999;
font-weight: 700;
font-size: calc(16px + var(--slope-1px) * 8);
font-family: var(--en-font-family);
}
/* ============================================================= *
Blog
* ============================================================= */
/* c-blog-slider
=============================== */
.c-blog-slider-container {
position: relative;
width: fit-content;
margin-inline: auto;
--arrow-size: 40px;
}
.c-blog-slider-arrow.slick-arrow {
position: absolute;
top: 0;
width: var(--arrow-size);
height: var(--arrow-size);
aspect-ratio: 1/1;
margin-top: 50%;
padding: 8px 7px;
border: 1px solid;
border-radius: 50%;
background: var(--white);
}
.c-blog-slider-arrow.slick-arrow.slick-prev {
left: 8px;
translate: -50% 0;
}
.c-blog-slider-arrow.slick-arrow.slick-next {
right: 8px;
translate: 50% 0;
}
.c-blog-slider {
position: relative;
display: flex;
overflow: visible;
width: calc(100% + 16px);
margin-left: -8px;
}
@media screen and (max-width: 960px) {
.c-blog-slider {
display: block;
overflow: hidden;
width: calc(100 * 280 / 375 * var(--vw));
margin-inline: auto;
padding-bottom: 15px;
}
}
.c-blog-slider .slick-list {
overflow: visible;
}
.c-blog-slider a {
display: block;
transition: all .2s ease-out;
}
.c-blog-slider a:hover {
scale: .97;
}
@media screen and (min-width: 961px) {
.c-blog-slider__control {
display: none;
}
}
.c-blog-slider__item {
flex: 1;
padding: 0 8px;
}
@media screen and (min-width: 961px) {
*[data-intersection] .c-blog-slider__item {
opacity: 0;
transition: all .3s ease-out .7s;
transform: translateY(60px);
}
*[data-intersection][data-intersecting=true] .c-blog-slider__item {
opacity: 1;
transform: translateY(0px);
}
.c-blog-slider__item:nth-child(2) {
transition-delay: .9s;
}
.c-blog-slider__item:nth-child(3) {
transition-delay: 1.1s;
}
}
/* c-blog-card-grid
============================== */
.c-blog-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: calc(9px + var(--slope-1px) * 25);
}
.c-blog-card-grid:not(:last-child) {
margin-bottom: 30px;
}
.c-blog-card-grid:not(:first-child) {
margin-top: 30px;
}
@media screen and (max-width: 960px) {
.c-blog-card-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
/* c-blog-card
=============================== */
.c-blog-card {
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
height: 100%;
border-radius: var(--base-border-radius);
background: var(--white);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .25);
text-decoration: none;
text-decoration: none;
transition: all .2s var(--animation);
}
@media (any-hover: hover) {
.c-blog-card:where(:hover) {
scale: .98;
}
}
.c-blog-card__head {
overflow: hidden;
aspect-ratio: 249 / 160;
}
.c-blog-card__head img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-blog-card__body {
display: flex;
flex-direction: column;
gap: 1em;
padding: 16px calc(15px + var(--slope-1px) * 9);
background: var(--white);
}
.c-blog-card__shop {
display: flex;
justify-content: center;
align-items: center;
margin-right: auto;
padding: 5px 10px;
border-radius: 3px;
background: var(--aaa, #aaa);
color: var(--white, #fff);
font-size: calc(14px + var(--slope-1px) * 2);
line-height: 1;
}
.c-blog-card__title {
overflow: hidden;
margin-top: var(--leading-trim);
margin-bottom: var(--leading-trim);
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
font-size: calc(16px + var(--slope-1px) * 2);
line-height: 1.5;
}
.c-blog-card__date {
margin-bottom: var(--leading-trim);
padding-bottom: 1em;
border-bottom: 1px solid var(--border-color);
color: var(--aaa, #aaa);
font-size: calc(12px + var(--slope-1px) * 2);
line-height: 1;
}
.c-blog-card__text {
display: -webkit-box;
overflow: hidden;
margin-block: var(--leading-trim);
font-weight: 400;
font-size: calc(14px + var(--slope-1px) * 2);
line-height: 1.625;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/* ============================================================= *
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: 30px;
}
.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: calc(70px + var(--slope-1px) * 10);
padding-block: calc(20px + var(--slope-1px) * 10);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.CMS-blog-block-table {
width: 100%;
}
/* CMN-blog-heading
=============================== */
.CMS-blog-heading {
display: flex;
align-items: center;
gap: 14px 1em;
width: 100%;
padding: 25px 20px;
border-radius: var(--base-border-radius);
background: #e9e9e9;
}
@media screen and (max-width: 960px) {
.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;
}
.CMS-blog-heading__author {
display: none;
}
.CMS-blog-heading__title {
margin-block: var(--leading-trim);
font-weight: 500;
font-size: calc(18px + var(--slope-1px) * 2);
}
.CMS-blog-heading__date {
display: flex;
align-items: center;
margin-block: var(--leading-trim);
font-weight: 400;
font-size: calc(15px + var(--slope-1px) * 1);
}
.CMS-blog-heading__date > i {
display: none;
}
/* c-blog-paging
============================== */
.c-blog-paging {
display: flex;
justify-content: flex-end;
gap: 1em;
font-size: calc(14px + var(--slope-1px) * 2);
}
.c-blog-paging__nav {
display: flex;
justify-content: flex-end;
gap: 1em;
}
/* CMN-blog-impression
=============================== */
.CMS-blog-impression {
display: flex;
justify-content: center;
align-items: center;
gap: 1em calc(30px + var(--slope-1px) * 15);
text-align: center;
font-size: 16px;
}
@media screen and (max-width: 960px) {
.CMS-blog-impression {
flex-wrap: wrap;
}
}
.CMS-blog-impression__head {
flex-shrink: 0;
}
@media screen and (max-width: 960px) {
.CMS-blog-impression__head {
width: 100%;
margin-block: var(--leading-trim);
}
}
.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: 960px) {
.CMS-blog-impression__foot {
width: 33.33333%;
}
}
.CMS-blog-impression__button {
width: 100%;
height: 50px;
outline: none;
border: 1px solid var(--base-color);
border-radius: var(--medium-border-radius);
background: transparent;
color: var(--base-color);
font-size: 16px;
transition: all .2s ease-out;
appearance: none;
}
.CMS-blog-impression__button:hover {
background: var(--base-color);
color: #fff;
}
/* CMN-blog-share
=============================== */
.CMS-blog-share {
display: flex;
justify-content: center;
align-items: center;
gap: 15px 32px;
margin-top: calc(20px + var(--slope-1px) * 10);
font-size: 16px;
}
@media screen and (max-width: 960px) {
.CMS-blog-share {
flex-direction: column;
}
}
.CMS-blog-share__head {
flex-shrink: 0;
}
.CMS-blog-share__list {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 30px;
}
.CMS-blog-share__button {
display: flex;
justify-content: center;
align-items: center;
align-content: inherit;
overflow: hidden;
width: calc(30px + var(--slope-1px) * 10);
aspect-ratio: 1 / 1;
color: #fff;
text-decoration: none;
transition: all .3s ease-out;
}
.CMS-blog-share__button:hover {
opacity: .7;
}
.CMS-blog-share__button > i {
width: 100%;
height: 100%;
}
.CMS-blog-share__button > i svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.CMS-blog-share__button > i svg path {
fill: currentColor;
}
.CMS-blog-share__button[data-share="twitter"] {
color: #333;
}
.CMS-blog-share__button[data-share="line"] {
color: #00b900;
}
.CMS-blog-share__button[data-share="facebook"] {
color: #1877f2;
}
.CMS-blog-share__button span {
display: none;
}
/* ============================================================= *
Sitemap
* ============================================================= */
/* c-sitemap
============================== */
.c-sitemap {
display: grid;
justify-content: center;
grid-template-rows: repeat(2, auto) 1fr;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: "company newcar maintenance carlife" "company usedcar maintenance carlife" "company usedcar maintenance showroom";
gap: 40px clamp(15px, -173.4375px + 15.625vw, 40px);
width: 100%;
margin-inline: auto;
color: var(--base-color);
}
@media screen and (max-width: 960px) {
.c-sitemap {
display: block;
border-bottom: 1px solid;
}
}
.l-footer .c-sitemap {
color: var(--white);
}
@media screen and (max-width: 960px) {
.l-footer .c-sitemap {
border-bottom: 1px solid #999;
}
}
.c-sitemap__col {
display: contents;
}
/* c-sitemap-box
============================== */
.c-sitemap-box[data-category=company] {
grid-area: company;
}
.c-sitemap-box[data-category=newcar] {
grid-area: newcar;
}
.c-sitemap-box[data-category=usedcar] {
grid-area: usedcar;
}
.c-sitemap-box[data-category=maintenance] {
grid-area: maintenance;
}
.c-sitemap-box[data-category=carlife] {
grid-area: carlife;
}
.c-sitemap-box[data-category=showroom] {
grid-area: showroom;
}
.c-sitemap-box__head {
margin-bottom: .625em;
}
.l-footer .c-sitemap-box__head {
border-bottom: 1px solid;
}
@media screen and (max-width: 960px) {
.c-sitemap-box__head {
margin-bottom: 0;
border-top: 1px solid;
}
.l-footer .c-sitemap-box__head {
border-top-color: #999;
border-bottom: 0;
}
}
.c-sitemap-box__toggle {
display: block;
width: 100%;
padding: 0;
padding-bottom: 10px;
outline: none;
border: 0;
background: transparent;
color: inherit;
text-align: left;
text-decoration: none;
font-weight: 700;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
cursor: unset;
pointer-events: none;
appearance: none;
}
@media screen and (max-width: 960px) {
.c-sitemap-box__toggle {
position: relative;
display: grid;
grid-template-columns: 1fr 20px;
padding: 25px 0 15px;
font-weight: 400;
line-height: 1;
line-height: normal;
cursor: pointer;
pointer-events: auto;
}
.c-sitemap-box__toggle:after {
content: "";
position: absolute;
top: 10px;
right: 0;
bottom: 0;
display: block;
width: 20px;
height: 20px;
margin: auto;
background: currentColor;
mask: var(--icon-plus) 50% 50%/contain no-repeat;
transition: rotate .3s ease-out;
}
.c-sitemap-box:has(.c-sitemap-pages li:first-child:last-child) .c-sitemap-box__toggle[target="_blank"]:after {
mask: var(--icon-external) 50% 50%/contain no-repeat;
}
.c-sitemap-box__toggle.js-sitemap-toggle.is-open:after {
mask: var(--icon-minus) 50% 50%/contain no-repeat;
}
}
.c-sitemap-box__body {
display: grid;
margin-top: calc( var(--leading-trim) + 1.2rem);
margin-bottom: var(--leading-trim);
font-weight: 400;
font-size: 13px;
line-height: 215.38462%;
}
@media screen and (min-width: 961px) {
.c-sitemap-box__body {
display: grid !important;
}
}
@media screen and (max-width: 960px) {
.c-sitemap-box__body {
display: none;
gap: 0;
padding: .92308em 0 1.92308em 1.76923em;
border-top: 1px solid #ccc;
}
}
@media screen and (max-width: 960px) {
.l-footer .c-sitemap-box__body {
border-top: 1px solid #404040;
}
}
/* c-sitemap-pages
============================== */
@media screen and (max-width: 960px) {
.c-sitemap-pages > li:not(:last-child) {
border-bottom: 1px solid #404040;
}
}
.c-sitemap-pages a {
position: relative;
text-decoration: none;
transition: opacity .2s, translate .3s;
}
.l-footer .c-sitemap-pages a {
color: var(--white);
}
@media (any-hover: hover) {
.l-footer .c-sitemap-pages a:where(:hover) {
opacity: .6;
}
}
@media screen and (max-width: 960px) {
.c-sitemap-pages a {
display: grid;
align-items: center;
grid-template-columns: 1fr 16px;
padding: .66667em 0;
}
.c-sitemap-pages a:after {
content: "";
position: relative;
display: block;
width: 14px;
height: 14px;
background: currentColor;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}
.c-sitemap-pages a[target="_blank"]:after {
right: 2px;
width: 20px;
height: 20px;
mask: var(--icon-external) 50% 50%/contain no-repeat;
}
.c-sitemap-pages a[data-modal-for]:after {
right: 2px;
width: 20px;
height: 20px;
mask: var(--icon-plus) 50% 50%/contain no-repeat;
}
}
@media (any-hover: hover) {
.c-sitemap-pages a:where(:hover) {
color: var(--key-color);
translate: 3px 0;
}
}
/* ============================================================= *
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%;
width: fit-content;
margin-inline: auto;
margin-top: 1.25em;
--arrow-color:var(--base-color);
--bar-color: var(--base-color);
--arrow-size: 22px;
}
@media screen and (max-width: 960px) {
.c-slider-controls {
--arrow-size:24px;
}
}
.c-slider-controls .slick-arrow.slick-next {
order: 3;
}
.c-slider-controls svg {
width: 12px;
height: auto;
}
@media screen and (max-width: 960px) {
.c-slider-controls svg {
width: 8px;
}
}
/* c-slider-counter
============================== */
.c-slider-counter {
display: flex;
align-items: center;
width: 100%;
margin-right: 13px;
font-family: var(--en-font-family);
}
.c-slider-counter span {
display: flex;
justify-content: center;
align-items: center;
}
/* 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 svg path:not([fill]) {
fill: var(--arrow-color);
stroke-width: 1px;
stroke: var(--arrow-color);
}
@media (any-hover: hover) {
.slick-arrow.c-slide-arrow:where(:hover) {
border: 1px solid var(--base-color);
background: var(--base-color);
scale: 1.1;
}
.slick-arrow.c-slide-arrow:where(:hover) svg path:not([fill]) {
fill: var(--white);
stroke-width: 1px;
stroke: var(--white);
}
}
.slick-arrow.c-slide-arrow._prev-arrow {
transform: rotate(180deg);
}
/* c-slider-progress
============================== */
@-webkit-keyframes progressbar {
0% {
transform: scaleX(0);
transform-origin: left top;
}
97% {
transform: scaleX(1);
transform-origin: left top;
}
98% {
opacity: 1;
transform: scaleX(1);
transform-origin: right top;
}
100% {
opacity: 0;
transform: scaleX(0);
transform-origin: right top;
}
}
@keyframes progressbar {
0% {
transform: scaleX(0);
transform-origin: left top;
}
97% {
transform: scaleX(1);
transform-origin: left top;
}
98% {
opacity: 1;
transform: scaleX(1);
transform-origin: right top;
}
100% {
opacity: 0;
transform: scaleX(0);
transform-origin: right top;
}
}
.c-slider-progress {
overflow: hidden;
width: 100%;
height: 3px;
margin: 0 15px;
border-radius: 3px;
background-color: var(--bg-color);
}
.c-slider-progress:before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 3px;
background: var(--bar-color);
transform: scaleX(0);
transform-origin: left top;
}
.c-slider-progress.is-active:before {
animation: progressbar 4.9s linear forwards 0s;
-webkit-animation: progressbar 4.9s linear forwards 0s;
}
/* c-car-slider
============================== */
.c-car-slider__item > * {
display: block;
width: 100%;
aspect-ratio: 2 / 1;
}
.c-car-slider a {
display: block;
transition: scale .4s, opacity .3s;
}
@media (any-hover: hover) {
.c-car-slider a:where(:hover) {
opacity: .8;
scale: .99;
}
}
/* ============================================================= *
Scroll Bar
* ============================================================= */
[data-simplebar] {
position: relative;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.simplebar-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
width: auto !important;
height: auto !important;
margin: 0;
padding: 0;
direction: inherit;
}
.simplebar-offset {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-overflow-scrolling: touch;
box-sizing: inherit !important;
margin: 0;
padding: 0;
resize: none !important;
direction: inherit !important;
}
.simplebar-content-wrapper {
position: relative;
display: block;
box-sizing: border-box !important;
width: auto;
height: 100%;
max-width: 100%;
max-height: 100%;
direction: inherit;
scrollbar-width: none;
-ms-overflow-style: none;
}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
width: 0;
height: 0;
}
.simplebar-content:before,
.simplebar-content:after {
content: ' ';
display: table;
}
.simplebar-placeholder {
width: 100%;
max-width: 100%;
max-height: 100%;
pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
position: relative;
z-index: -1;
float: left;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
overflow: hidden;
box-sizing: inherit !important;
width: 100%;
height: 100%;
max-width: 1px;
max-height: 1px;
margin: 0;
padding: 0;
pointer-events: none;
}
.simplebar-height-auto-observer {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
overflow: hidden;
box-sizing: inherit;
width: 1000%;
height: 1000%;
min-width: 1px;
min-height: 1px;
opacity: 0;
pointer-events: none;
}
.simplebar-track {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
background: rgba(200, 200, 200, .3);
/* pointer-events: none; */
}
[data-simplebar].simplebar-dragging .simplebar-content {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-track {
pointer-events: all;
}
.simplebar-scrollbar {
position: absolute;
right: 0;
left: 0;
min-height: 10px;
}
.simplebar-scrollbar:before {
content: '';
position: absolute;
right: 2px;
left: 2px;
border-radius: 12px;
background: var(--key-color);
transition: opacity 0s linear;
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px;
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
top: 2px;
bottom: 2px;
}
.simplebar-track.simplebar-horizontal {
bottom: 3px;
left: 0;
overflow: visible;
width: 100%;
height: 6px;
max-width: 952px;
margin: 0 auto;
}
.simplebar-track.simplebar-horizontal.is-fixed {
position: fixed;
top: auto;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
top: auto;
right: auto;
bottom: -3px;
left: 0;
width: auto;
height: 12px;
min-width: 10px;
min-height: 0;
margin: auto 0;
border-radius: 12px;
background: var(--key-color);
}
/* Rtl support */
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
right: auto;
left: 0;
}
.hs-dummy-scrollbar-size {
position: fixed;
visibility: hidden;
overflow-x: scroll;
overflow-y: hidden;
width: 500px;
height: 500px;
opacity: 0;
direction: rtl;
}
.simplebar-hide-scrollbar {
position: fixed;
left: 0;
visibility: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
/* ============================================================= *
Maintenance
* ============================================================= */
/* c-maintenance-totalcare
============================== */
.c-maintenance-totalcare {
position: relative;
overflow: hidden;
padding: calc(24px + var(--slope-1px) * 14);
border: 2px solid #aaa;
border-radius: calc(var(--base-border-radius) * 1.5);
background: #fff;
}
.c-maintenance-totalcare:before {
content: "";
position: absolute;
inset: 0;
display: block;
width: calc(100% - 16px);
height: calc(100% - 16px);
margin: auto;
border-radius: var(--base-border-radius);
background: var(--key-color-sub);
pointer-events: none;
}
.c-maintenance-totalcare > * {
position: relative;
z-index: 1;
}
.c-maintenance-totalcare__lead {
margin-block: var(--leading-trim);
text-align: center;
font-weight: 500;
font-size: calc(16px + var(--slope-1px) * 2);
line-height: 1.5;
}
@media screen and (max-width: 560px) {
.c-maintenance-totalcare__lead {
text-align: left;
}
}
.c-maintenance-totalcare__lead em {
color: var(--key-color);
font-weight: 700;
}
@media screen and (min-width: 961px) {
.c-maintenance-totalcare__lead em {
font-size: 1.33333em;
}
}
.c-maintenance-totalcare__body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
max-width: 880px;
margin-inline: auto;
margin-top: 20px;
}
@media screen and (max-width: 560px) {
.c-maintenance-totalcare__body {
grid-template-columns: 100%;
}
}
/* c-maintenance-totalcare-nav
============================== */
.c-maintenance-totalcare-nav {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
gap: 0;
}
.c-maintenance-totalcare-nav .c-button-lead {
color: var(--key-color);
}
.c-maintenance-totalcare-nav .c-button {
grid-row: 2 / 3;
margin-inline: auto;
}
.c-maintenance-totalcare-nav .c-button._border {
--base-color: var(--key-color)
;
}
/* c-maintenance-service-title
============================== */
.c-maintenance-service-title {
margin-block: var(--leading-trim) calc(23px + var(--slope-1px) * 4);
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
font-weight: 500;
font-size: calc(18px + var(--slope-1px) * 2);
line-height: 1.5;
}
/* c-maintenance-service-grid
============================== */
.c-maintenance-service-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 30px 40px;
}
@media screen and (max-width: 560px) {
.c-maintenance-service-grid {
grid-template-columns: 100%;
}
}
.c-maintenance-service-grid:not(:has(.c-maintenance-service-nav:nth-child(2))) {
grid-template-columns: 100%;
}
/* c-maintenance-service-nav
============================== */
.c-maintenance-service-nav {
display: grid;
align-content: start;
grid-template-columns: 100%;
gap: calc(15px + var(--slope-1px) * 6);
max-width: 500px;
margin-inline: auto;
text-decoration: none;
transition: all .2s var(--animation);
}
.c-maintenance-service-nav:hover {
opacity: .7;
}
.c-maintenance-service-nav__banner {
position: relative;
width: 100%;
height: calc(80px + var(--slope-1px) * 60);
border: 1px solid var(--base-color);
border-radius: var(--base-border-radius);
background: #fff;
}
.c-maintenance-service-nav__banner:after {
content: "";
position: absolute;
top: 0;
right: 5px;
bottom: 0;
display: block;
width: 20px;
height: 20px;
margin-block: auto;
background: var(--icon-arrow) 50% 50%/contain no-repeat;
}
.c-maintenance-service-nav__banner img {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-maintenance-service-nav__desc {
margin-block: var(--leading-trim);
text-align: justify;
text-justify: auto;
}
/* c-maintenance-reservation
============================== */
.c-maintenance-reservation {
position: relative;
left: 50%;
display: grid;
grid-template-columns: 100%;
gap: 23px;
overflow: hidden;
width: calc(100% + var(--inner-overflow));
margin-bottom: 100px;
padding: 50px 20px;
border-radius: var(--base-border-radius);
background: url("../img/maintenance/bg-reservation.jpg") 15% 50%/cover no-repeat;
transform: translateX(-50%);
}
@media screen and (max-width: 960px) {
.c-maintenance-reservation {
gap: 30px;
width: calc(var(--vw) * 100);
margin-bottom: 0;
border-radius: 0;
}
}
.c-maintenance-reservation:not(:first-child) {
margin-top: 69px;
}
@media screen and (max-width: 960px) {
.c-maintenance-reservation:not(:first-child) {
margin-top: 75px;
}
.c-section._bg + .c-maintenance-reservation:not(:first-child) {
margin-top: calc(-75px + var(--slope-1px) * -15);
}
}
.c-maintenance-reservation__lead {
color: #fff;
text-align: center;
font-weight: 500;
font-size: 18px;
line-height: 1.5;
}
@media screen and (max-width: 560px) {
.c-maintenance-reservation__lead {
text-align: left;
}
}
.c-maintenance-reservation-button {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
width: 512px;
max-width: 100%;
margin-inline: auto;
padding: calc(15px + var(--slope-1px) * 5) 36px;
border-radius: var(--base-border-radius);
background: var(--key-color);
color: var(--white);
text-decoration: none;
transition: scale .3s var(--animation), opacity .3s var(--animation);
}
@media (any-hover: hover) {
.c-maintenance-reservation-button:where(:hover) {
opacity: .7;
}
}
.c-maintenance-reservation-button i {
display: block;
width: 50px;
height: 50px;
}
.c-maintenance-reservation-button i svg {
width: 50px;
height: 50px;
}
.c-maintenance-reservation-button__lead {
margin-block: var(--leading-trim);
color: var(--point-color);
text-align: center;
font-weight: bold;
}
.c-maintenance-reservation-button__lead span {
display: block;
text-align: center;
letter-spacing: 0;
font-size: calc(12px + var(--slope-1px) * 3);
}
.c-maintenance-reservation-button__title {
margin-block: var(--leading-trim);
color: #fff;
text-align: center;
/* 39px */
letter-spacing: .52px;
font-weight: 700;
font-style: normal;
font-size: calc(20px + var(--slope-1px) * 6);
line-height: 150%;
}
.c-maintenance-reservation-button:after {
content: "";
position: absolute;
right: .75em;
bottom: .75em;
inline-size: 26px;
aspect-ratio: 1;
background: #fff;
mask: var(--icon-plus) 50% 50%/contain no-repeat;
transition: all .2s ease-out;
}
/* ============================================================= *
Inspection
* ============================================================= */
/* c-inspection-lead
============================== */
.c-inspection-lead {
margin-block: var(--leading-trim);
font-size: calc(16px + var(--slope-1px) * 2);
line-height: 1.5;
}
/* c-inspection-checkpoint
============================== */
.c-inspection-checkpoint {
display: grid;
align-items: center;
grid-template-columns: 400px 1fr;
gap: 30px;
margin-top: calc(30px + var(--slope-1px) * 7);
}
@media screen and (max-width: 767px) {
.c-inspection-checkpoint {
grid-template-columns: 100%;
}
}
.c-inspection-checkpoint-figure {
position: relative;
max-width: 400px;
margin-inline: auto;
}
.c-inspection-checkpoint-figure__image {
position: absolute;
top: 50%;
left: 50%;
width: 87.5%;
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(9px + var(--slope-1px) * 1);
}
.c-inspection-checkpoint-button {
position: relative;
display: flex;
align-items: center;
gap: 10px 6px;
padding: 14px 36px 14px 20px;
border: 1px solid var(--base-color);
border-radius: var(--base-border-radius);
background: #fff;
color: var(--base-color);
text-align: left;
text-decoration: none;
letter-spacing: 0;
font-size: calc(16px + var(--slope-1px) * 2);
transition: all .2s;
}
@media screen and (max-width: 960px) {
.c-inspection-checkpoint-button {
flex-direction: column;
padding: 14px 36px;
}
}
.c-inspection-checkpoint-button:hover {
filter: brightness(.92);
}
.c-inspection-checkpoint-button > ._number {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: calc(30px + var(--slope-1px) * 2);
height: calc(30px + var(--slope-1px) * 2);
border-radius: 50%;
background: var(--base-color);
color: #fff;
font-weight: 400;
font-size: calc(18px + var(--slope-1px) * 2);
font-family: var(--point-en-font-family);
}
.c-inspection-checkpoint-button > ._text {
text-align: left;
word-break: keep-all;
overflow-wrap: anywhere;
font-weight: 500;
line-height: 1.2;
}
@media screen and (max-width: 960px) {
.c-inspection-checkpoint-button > ._text {
text-align: center;
}
}
.c-inspection-checkpoint-button:after {
content: "";
position: absolute;
top: 0;
right: calc(6px + var(--slope-1px) * 10);
bottom: 0;
width: 20px;
height: 20px;
margin-block: auto;
background: currentColor;
mask: var(--icon-plus) 50% 50%/contain no-repeat;
}
/* c-inspection-checkpoint-detail
=============================== */
.c-inspection-checkpoint-detail__col {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
gap: .8em 4em;
}
.c-inspection-checkpoint-detail__col:has(li:first-child:last-child) {
grid-template-columns: 100%;
}
@media screen and (max-width: 560px) {
.c-inspection-checkpoint-detail__col {
grid-template-columns: 100%;
}
}
.c-inspection-checkpoint-detail__col > li {
display: flex;
width: 100%;
margin-block: var(--leading-trim);
line-height: 1.5;
}
.c-inspection-checkpoint-detail__col > li:before {
content: "\25cf";
}
/* c-inspection-checkpoint-notes
============================== */
.c-inspection-checkpoint-notes {
width: fit-content;
max-width: 100%;
margin-top: 24px;
font-size: calc(12px + var(--slope-1px) * 1);
}
@media screen and (min-width: 961px) {
.c-inspection-checkpoint-notes {
margin-left: auto;
}
}
.c-inspection-checkpoint-notes > li {
padding-left: 1em;
text-indent: -1em;
}
/* ============================================================= *
nearby
* ============================================================= */
/* c-nearby-block
============================== */
.c-nearby-block__search {
padding: calc(15px + var(--slope-1px) * 15);
border-radius: var(--base-border-radius);
background: var(--bg-color);
}
.c-nearby-block__head {
margin-bottom: 16px;
}
/* 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 {
display: flex;
overflow: hidden;
width: 100%;
}
.c-nearby-search__input {
flex-grow: 1;
overflow: hidden;
border: 0;
border-radius: 8px 0 0 8px;
}
.c-nearby-search__input input {
display: flex;
align-items: center;
width: 100%;
height: 54px;
padding: 1.2em .75em;
outline: none;
border: 0;
border-radius: 0;
background: #fff;
line-height: 28px;
}
@media screen and (max-width: 960px) {
.c-nearby-search__input input {
font-size: 16px;
}
}
@media screen and (max-width: 560px) {
.c-nearby-search__input input::placeholder {
color: #aaa;
font-size: 14px;
}
}
.c-nearby-search__button {
flex-shrink: 0;
overflow: hidden;
min-width: 0%;
border-radius: 0 8px 8px 0;
}
.c-nearby-search__button button {
display: flex;
justify-content: center;
align-items: center;
gap: .2em .3em;
width: 90px;
height: 100%;
margin: 0;
padding: .25em 1em;
outline: none;
border: 0;
background: var(--base-color);
color: #fff;
font-weight: 400;
font-size: 16px;
cursor: pointer;
transition: opacity .2s ease-out;
}
.c-nearby-search__button button:hover {
opacity: .8;
}
.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%;
object-fit: contain;
}
.c-nearby-search__button button > i svg path {
fill: currentColor;
}
.c-nearby-search__gps {
display: none;
grid-template-columns: 100%;
gap: 8px;
width: 280px;
margin-inline: auto;
margin-top: 20px;
}
@media screen and (max-width: 960px) {
.c-nearby-search__gps {
display: grid;
}
}
@media screen and (max-width: 560px) {
.c-nearby-search__gps {
width: 100%;
}
}
/* c-nearby-result
=============================== */
.c-nearby-result {
display: none;
color: #fff;
}
.c-nearby-result__list {
display: none;
}
.c-nearby-result__foot {
margin-top: calc(20px + var(--slope-1px) * 10);
}
.c-nearby-result__button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 50px;
margin-inline: auto;
border: 1px solid var(--base-color);
border-radius: var(--base-border-radius);
background: #fff;
color: var(--base-color);
text-decoration: none;
font-weight: 500;
font-size: 16px;
cursor: pointer;
transition: opacity .3s ease-out;
}
.c-nearby-result__button:hover {
opacity: .6;
}
.c-nearby-result__button:before, .c-nearby-result__button:after {
content: "";
position: absolute;
top: 0;
right: 20px;
bottom: 0;
display: block;
width: 13px;
height: 2px;
margin-block: auto;
border-radius: 2px;
background: currentColor;
}
.c-nearby-result__button:before {
rotate: 45deg;
}
.c-nearby-result__button:after {
rotate: -45deg;
}
.c-nearby-result__loading {
display: block;
width: 100%;
padding: 1em;
text-align: center;
}
.c-nearby-result__loading:before {
content: "\691C\7D22\4E2D...";
color: #fff;
}
/* c-showroom-nearby-item
============================== */
.c-showroom-nearby-item {
display: grid;
gap: calc(15px + var(--slope-1px) * 5);
width: 100%;
padding: calc(15px + var(--slope-1px) * 15);
border: 1px solid var(--border-color);
border-radius: var(--base-border-radius);
background: #fff;
color: var(--base-color);
}
.c-showroom-nearby-item:not(:first-child) {
margin-top: calc(10px + var(--slope-1px) * 10);
}
.c-showroom-nearby-item__head {
position: relative;
display: flex;
align-items: center;
padding: 1.8rem 1em;
border-radius: var(--medium-border-radius);
background: var(--bg-color);
color: var(--base-color);
text-decoration: none;
font-size: 2rem;
transition: background .3s ease-out;
}
.c-showroom-nearby-item__head:hover {
background: var(--border-color);
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item__head {
flex-wrap: wrap;
padding-left: 2.5em;
}
}
.c-showroom-nearby-item__rank {
margin-right: .75em;
font-weight: 500;
font-style: normal;
font-size: calc(20px + var(--slope-1px) * 8);
font-family: var(--point-en-font-family);
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item__rank {
position: absolute;
top: 2.475rem;
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: 16px;
}
.c-showroom-nearby-item__distance:after {
content: 'km';
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item__distance {
width: 100%;
margin-left: 0;
}
}
.c-showroom-nearby-item__body {
display: flex;
justify-content: space-between;
align-items: center;
font-size: calc(14px + var(--slope-1px) * 2);
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item__body {
flex-direction: column;
align-items: stretch;
width: 100%;
padding-inline: 0;
}
}
.c-showroom-nearby-item__close {
display: flex;
align-items: center;
margin-top: .25em;
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item__tel {
width: 100%;
margin-top: 15px;
}
}
.c-showroom-nearby-item-tel {
display: flex;
align-items: center;
gap: 5px;
color: var(--key-color);
text-decoration: none;
font-weight: 700;
font-size: calc(32px + var(--slope-1px) * 8);
font-family: var(--point-en-font-family);
pointer-events: none;
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item-tel {
pointer-events: auto;
}
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item-tel {
display: flex;
justify-content: center;
height: 1.875em;
border: 1px solid;
border-radius: var(--base-border-radius);
}
}
.c-showroom-nearby-item-tel__icon {
display: flex;
flex-direction: column;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: calc(18px + var(--slope-1px) * 2);
}
.c-showroom-nearby-item-tel__icon svg {
width: 100%;
}
.c-showroom-nearby-item-tel__icon svg path {
fill: var(--key-color);
}
.c-showroom-nearby-item-button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 4.11765em;
border-radius: 2.05882em;
background: #333;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 1.7rem;
transition: opacity .3s ease-out;
}
.c-showroom-nearby-item-button:hover {
opacity: .7;
}
.c-showroom-nearby-item-button:after {
content: "";
position: absolute;
top: 0;
right: 2rem;
bottom: 0;
display: block;
width: .5em;
height: .5em;
margin: auto 0;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
}
.c-showroom-nearby-item-contact {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
place-content: center;
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item-contact {
grid-template-columns: repeat(2, 1fr);
}
}
.c-showroom-nearby-item-contact__item:first-child:last-child {
grid-column: 2 / 4;
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item-contact__item:first-child:last-child {
grid-column: span 2;
}
}
.c-showroom-nearby-item-contact__button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 7px 5px;
width: 100%;
height: 60px;
border-radius: var(--base-border-radius);
background: var(--key-color);
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: calc(14px + var(--slope-1px) * 4);
transition: opacity .3s ease-out;
}
@media screen and (max-width: 960px) {
.c-showroom-nearby-item-contact__button {
flex-direction: column;
height: 65px;
}
}
.c-showroom-nearby-item-contact__button:hover {
opacity: .7;
}
.c-showroom-nearby-item-contact__button > i {
display: block;
width: calc(24px + var(--slope-1px) * 6);
height: calc(24px + var(--slope-1px) * 6);
}
.c-showroom-nearby-item-contact__button > i svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-showroom-nearby-item-contact__button span {
margin-block: var(--leading-trim);
}
.c-showroom-nearby-item-contact__button:after {
content: "";
position: absolute;
top: 0;
right: 16px;
bottom: 0;
display: block;
width: 20px;
height: 20px;
margin-block: auto;
background: var(--icon-external-white) 50% 50%/contain no-repeat;
}
/* c-nearby-nav-container
============================== */
.c-nearby-nav-container {
display: flex;
gap: .5em 2em;
}
@media screen and (max-width: 960px) {
.c-nearby-nav-container {
justify-content: center;
}
}
body[data-id=showroom] .c-nearby-nav-container {
display: none;
}
.c-nearby-nav-container:not(:first-child) {
margin-top: calc(15px + var(--slope-1px) * 9);
}
/* ============================================================= *
pref
* ============================================================= */
/* c-pref-tab
============================== */
.c-pref-tab {
position: relative;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin-bottom: 50px;
padding-inline: 20px;
}
.c-pref-tab:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 2px;
background: var(--base-color);
}
.c-pref-tab:not(:first-child) {
margin-top: calc(30px + var(--slope-1px) * 30);
}
@media screen and (max-width: 960px) {
.c-pref-tab {
display: none;
}
}
.c-pref-tab__button {
position: relative;
position: relative;
width: 100%;
padding-block: 1em;
outline: none;
border: 2px solid var(--pref-color);
border-bottom: 0;
border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
background: var(--pref-color);
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 16px;
appearance: none;
}
.c-pref-tab__button.is-current {
z-index: 2;
background: #fff;
color: var(--base-color);
--pref-color: var(--base-color);
}
/* c-pref-tab-container
============================== */
@media screen and (max-width: 960px) {
.c-pref-tab-container {
display: block !important;
visibility: visible !important;
border: 1px solid var(--pref-color);
border-radius: var(--base-border-radius);
opacity: 1 !important;
}
.c-pref-tab-container:not(:first-child) {
margin-top: 10px;
}
}
/* c-pref-tab-toggle
============================== */
.c-pref-tab-toggle {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr auto 1fr;
width: 100%;
padding: 15px 16px;
outline: none;
border: 0;
background: transparent;
color: var(--pref-color);
text-align: center;
font-weight: 500;
font-size: calc(16px + var(--slope-1px) * 4);
appearance: none;
}
.c-pref-tab-toggle:before {
content: "";
}
.c-pref-tab-toggle:after {
content: "";
display: block;
justify-self: end;
width: 20px;
height: 20px;
background: currentColor;
mask: var(--icon-down) 50% 50%/contain no-repeat;
}
@media screen and (min-width: 961px) {
.c-pref-tab-toggle {
display: none;
}
}
/* c-pref-tab-contents
============================== */
@media screen and (max-width: 960px) {
.c-pref-tab-contents {
width: calc(100% - (15px + var(--slope-1px) * 15) * 2);
margin-inline: auto;
padding-block: 30px calc(10px + var(--slope-1px) * 10);
border-top: 1px solid var(--pref-color);
}
body[data-id=fleetsales] .c-pref-tab-contents {
padding-top: 0;
border-top: 0;
}
}
@media screen and (min-width: 961px) {
.c-pref-tab-contents {
display: block !important;
}
}
/* ============================================================= *
showroom
* ============================================================= */
/* c-showroom-list
=============================== */
.c-showroom-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px calc(9px + var(--slope-1px) * 7);
}
@media screen and (max-width: 960px) {
.c-showroom-list {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
@media screen and (max-width: 560px) {
.c-showroom-list {
grid-template-columns: repeat(2, 1fr);
}
}
/* c-showroom-card
=============================== */
.c-showroom-card {
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
height: 100%;
border-radius: var(--base-border-radius);
background: #fff;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .25);
text-decoration: none;
}
.c-showroom-card__image {
overflow: hidden;
width: 100%;
min-height: 0%;
aspect-ratio: 248 / 139;
}
.c-showroom-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all .3s;
}
.c-showroom-card:hover .c-showroom-card__image img {
transform: scale(1.03);
}
.c-showroom-card__contents {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
width: 100%;
padding: calc(20px + var(--slope-1px) * 2) calc(13px + var(--slope-1px) * 7) calc(20px + var(--slope-1px) * 4);
}
.c-showroom-card__head {
margin-block: var(--leading-trim);
color: var(--pref-color);
font-weight: 500;
font-size: calc(16px + var(--slope-1px) * 4);
}
.c-showroom-card__head span {
display: block;
font-size: .8em;
line-height: 1;
}
.c-showroom-card__body {
display: flex;
flex-direction: column;
flex-grow: 1;
padding-top: calc(10px + var(--slope-1px) * 10);
font-size: calc(13px + var(--slope-1px) * 3);
line-height: 1.5;
}
.c-showroom-card__address {
margin-block: var(--leading-trim);
}
.c-showroom-card__tel {
margin-block: var(--leading-trim);
padding-top: 1em;
font-weight: 500;
font-size: calc(14px + var(--slope-1px) * 2);
}
.c-showroom-card__welfare {
margin-top: calc(10px + var(--slope-1px) * 10);
padding: 10px 5px;
border-radius: 3px;
background: #fff1ea;
color: #ea5504;
text-align: center;
font-weight: 500;
font-size: 13px;
line-height: 1;
}
.c-showroom-card__foot {
margin-top: calc(15px + var(--slope-1px) * 5);
padding-top: calc(15px + var(--slope-1px) * 5);
border-top: 1px solid var(--border-color);
}
.c-showroom-card__facility {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: calc(7px + var(--slope-1px) * 3) calc(4px + var(--slope-1px) * 4);
}
.c-showroom-card__facility > li {
aspect-ratio: 1 / 1;
}
.c-showroom-card__facility > li :is(svg, img) {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-showroom-card__facility > li.is-disabled svg path {
fill: var(--border-color);
}
/* c-showroom-facility
============================== */
.c-showroom-facility {
margin-bottom: 30px;
padding: calc(20px + var(--slope-1px) * 10) calc(15px + var(--slope-1px) * 5);
border-radius: var(--base-border-radius);
background: #fff;
}
.c-showroom-facility._bg {
background: var(--bg-color);
}
.c-showroom-facility__head {
margin-block: var(--leading-trim);
padding-bottom: 24px;
text-align: center;
font-weight: 500;
font-size: 16px;
}
.c-showroom-facility__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
gap: 16px;
font-size: calc(14px + var(--slope-1px) * 1);
}
@media screen and (max-width: 560px) {
.c-showroom-facility__list {
grid-template-columns: repeat(2, 1fr);
}
}
.c-showroom-facility__item {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
line-height: 1.2;
}
.c-showroom-facility__item > i {
display: block;
flex-shrink: 0;
width: 30px;
aspect-ratio: 1 / 1;
}
.c-showroom-facility__item > i svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-showroom-facility__item.is-disabled {
color: #aaa;
}
.c-showroom-facility__item.is-disabled svg path {
fill: currentColor;
}
.c-showroom-facility__item > span {
margin-block: var(--leading-trim);
word-break: keep-all;
overflow-wrap: anywhere;
}
/* ============================================================= *
Utility
* ============================================================= */
/* Media Query Setting
====================================== */
.u-tablet-block {
display: none !important;
}
@media screen and (max-width: 960px) {
.u-tablet-block {
display: block !important;
}
}
.u-tablet-inline-block {
display: none !important;
}
@media screen and (max-width: 960px) {
.u-tablet-inline-block {
display: inline-block !important;
}
}
.u-tablet-flex {
display: none !important;
}
@media screen and (max-width: 960px) {
.u-tablet-flex {
display: flex !important;
}
}
@media screen and (max-width: 960px) {
.u-tablet-none {
display: none !important;
}
}
.u-mobile-block {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-block {
display: block !important;
}
}
.u-mobile-inline-block {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-inline-block {
display: inline-block !important;
}
}
.u-mobile-flex {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-flex {
display: flex !important;
}
}
@media screen and (max-width: 560px) {
.u-mobile-none {
display: none !important;
}
}
/* text align
====================================== */
.u-ta-left {
text-align: left !important;
}
.u-ta-right {
text-align: right !important;
}
.u-ta-center {
text-align: center !important;
}
/* display
====================================== */
.u-d-block {
display: block !important;
}
.u-d-none {
display: none !important;
}
.u-d-inline {
display: inline !important;
}
.u-d-ib {
display: inline-block !important;
}
/* position
====================================== */
.u-pos-static {
position: static !important;
}
.u-pos-relative {
position: relative !important;
}
.u-pos-absolute {
position: absolute !important;
}
.u-pos-fixed {
position: fixed !important;
}
/* clear
====================================== */
.u-clearfix:after {
content: "";
display: block;
visibility: hidden;
clear: both;
}
/* other
====================================== */
.u-strong {
font-weight: bold !important;
}
.u-pointer {
cursor: pointer;
}
.u-nowrap {
white-space: nowrap;
}
.u-color-honda {
color: #cc0000 !important;
}
.u-color-ciao {
color: #0068b6 !important;
}
.u-color-mamoru {
color: #8fc31f !important;
}
.u-rotate-90 {
transform: rotate(90deg);
}
/* animationn
====================================== */
.u-no-transition {
transition: none !important;
}
.u-wbr {
word-break: keep-all;
overflow-wrap: anywhere;
}