@charset "UTF-8";
/* =============================================================

Custom Properties

* ============================================================= */
:root {
  /* color */
  --base-color: #000;
  --key-color:  #ba1b28;
  --point-color: #404040;
  --bg-color: #ececec;
  --bg-color-dark: #eee;
  --border-color: #bfbfbf;
  --base-bg-color: #f4f4f4;
  /* layouts */
  --frame-width: 1480;
  --outer-width: 1200;
  --inner-width: 1080;
  --frame-width-px: calc(var(--frame-width) * 1px);
  --outer-width-px: calc(var(--outer-width) * 1px);
  --inner-width-px: calc(var(--inner-width) * 1px);
  --header-height: clamp(40px, 1.73469px + 10.20408vw, 80px);
  --outer-padding: 4.26667%;
  --inner-padding: 4.66472%;
  /* font
  ==================== */
  /* size */
  --base-font-root: clamp(52.08%, 6.7379px + .42531vw, 62.5%);
  --base-font-size: 16;
  --base-font-px: calc(var(--base-font-size) * 1px);
  --base-font-rem: calc(var(--base-font-size) * .1rem);
  --line-height: 1.75;
  --line-space: (var(--line-height) - 1)/2;
  /* for responsive */
  --max-tablet-width: 767;
  --min-tablet-width: 375;
  --min-tablet-percent: .58;
  /* family */
  --base-font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  --en-font-family: Poppins, sans-serif;
  /* utility
  ==================== */
  --base-box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, .1);
}

/* =============================================================

Base

* ============================================================= */
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--base-font-root);
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--base-bg-color);
  color: var(--base-color);
  letter-spacing: .03em;
  font-weight: 500;
  font-size: var(--base-font-rem);
  font-family: var(--base-font-family);
  line-height: var(--line-height);
  -webkit-text-size-adjust: 100%;

  --line-height: 1.75;
  --line-space: (var(--line-height) - 1)/2;
}

img {
  display: block;
  max-width: 100%;
}

img[src$=".svg"] {
  opacity: 0;
}

svg {
  display: block;
  width: 100%;
}

svg path:not([fill]) {
  fill: currentColor;
}

svg text:not([fill]) {
  fill: currentColor;
}

svg circle:not([fill]) {
  fill: currentColor;
}

a {
  color: currentColor;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

a.js-tel {
  text-decoration: none;
}

a.js-tel._active {
  text-decoration: underline;
}

a.js-tel._inactive {
  color: currentColor;
}

button {
  cursor: pointer;
}

sup {
  vertical-align: super;
  font-size: 70%;
}

sub {
  vertical-align: sub;
  font-size: 70%;
}

:where(._en) {
  font-family: var(--en-font-family);
  line-height: .8;
}

.l-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  min-width: 1024px;
  min-height: 100%;
  margin: 0 auto;
  box-shadow: 0 0 40px 40px rgba(var(--key-color), .15);
  opacity: 0;
  transition: opacity .4s ease-out;
}

body.is-loaded .l-wrapper {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .l-wrapper {
    min-width: 0;
  }
}

/* =============================================================

Loader

* ============================================================= */
.l-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100%;
  background: #f4f4f4;
  transition: opacity .5s ease-out;
}

.l-loader:before {
  content: "";
  display: block;
  width: 296px;
  max-width: 70%;
  aspect-ratio: 296 / 45;
  background: url(../img/logo.png) 50% 50%/contain no-repeat;
}

body.is-loaded .l-loader {
  opacity: 0;
  pointer-events: none;
}

/* =============================================================

Header

* ============================================================= */
/* header
=============================== */
.l-header {
  position: relative;
  z-index: 10000;
  width: 100%;
  height: var(--header-height);
  margin: 0 auto;
}

.l-header:before {
  content: "";
  display: block;
  width: 100%;
  height: inherit;
}

.l-header__inner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  width: 100%;
  height: inherit;
  min-width: 1024px;
  margin: 0 auto;
  padding-left: 2.19619%;
  transition: z-index 0s linear .4s, opacity .3s ease-out, background .3s ease-out;
}

.l-header__inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: all .3s ease-out;
}

@media screen and (max-width: 767px) {
  .l-header__inner {
    min-width: 0;
    padding-left: 4.26667%;
  }
}

/* header logo
=============================== */
.l-header-logo {
  position: relative;
  z-index: 2;
  display: flex;
  width: clamp(260px, 158.19883px + 9.94152vw, 294px);
  max-width: 30%;
  margin: auto 0;
  transition: opacity .1s ease-out;
}

@media screen and (max-width: 767px) {
  .l-header-logo {
    width: calc(16rem / var(--min-tablet-percent));
    max-width: 46.64723%;
  }
}

.l-header-logo a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  transition: opacity .25s;
}

.l-header-logo a img {
  min-width: 0%;
}

.l-header-logo a:hover {
  opacity: .6;
}

/* header menu
=============================== */
.l-header-menu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  height: 100%;
  margin-left: auto;
}

.l-header-menu a {
  text-decoration: none;
  transition: opacity .25s;
}

@media screen and (min-width: 768px) {
  .l-header-menu a:hover {
    opacity: .6;
  }
}

.l-header-menu__nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 450px;
  padding-top: var(--header-height);
  background: #fff;
  box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, .1);
  opacity: 0;
  transition: transform .4s, opacity .3s;
  transform: translateX(100%);
}

body.is-toggle-menu-open .l-header-menu__nav {
  opacity: 1;
  transform: translateX(0);
}

/* l-header-menu-sub
============================== */
.l-header-menu-sub {
  display: flex;
}

@media screen and (max-width: 767px) {
  .l-header-menu-sub {
    display: none;
  }
}

.l-header-menu-sub__item {
  font-size: clamp(12px, .02339px + 1.16959vw, 16px);
}

.l-header-menu-sub__item + .l-header-menu-sub__item {
  margin-left: 2em;
}

.l-header-menu-sub__item a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.l-header-menu-sub__button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: clamp(20px, -111.74269px + 12.8655vw, 64px);
  font-size: clamp(11px, 2.01754px + .87719vw, 14px);
}

.l-header-menu-sub__button + .l-header-menu-sub__button {
  margin-left: 4px;
}

.l-header-menu-sub__button a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 8.57143em;
  height: 2.57143em;
  border-radius: 5px;
  background: var(--key-color);
  color: #fff;
  transition: opacity .25s;
}

.l-header-menu-sub__button a:hover {
  opacity: .8;
}

.l-header-menu-sub__button:last-child a {
  background: #595959;
}

/* l-header-toggle
=============================== */
.l-header-toggle {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  background: transparent;
  color: var(--base-color);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media screen and (max-width: 767px) {
  body.is-toggle-menu-open .l-header-toggle {
    transition: color .2s .2s;
  }
}

.l-header-toggle > span,
.l-header-toggle > span:before,
.l-header-toggle > span:after {
  position: absolute;
  display: block;
  height: 2px;
  background: var(--base-color);
}

.l-header-toggle > span {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 37.5%;
  margin: auto;
  font-size: 10px;
  transition: background .2s;
}

.l-header-toggle > span:before, .l-header-toggle > span:after {
  content: "";
  left: 0;
  width: 100%;
  transition: margin-top .2s .2s, transform .2s, background .2s;
}

.l-header-toggle > span:before {
  margin-top: -30%;
}

.l-header-toggle > span:after {
  margin-top: 30%;
}

body.is-toggle-menu-open .l-header-toggle > span {
  background: transparent;
  transition: background .2s .2s;
}

body.is-toggle-menu-open .l-header-toggle > span:before, body.is-toggle-menu-open .l-header-toggle > span:after {
  transition: margin-top .2s, transform .2s .2s, background .2s .2s;
}

body.is-toggle-menu-open .l-header-toggle > span:before {
  margin-top: 0;
  transform: rotate(45deg);
}

body.is-toggle-menu-open .l-header-toggle > span:after {
  margin-top: 0;
  transform: rotate(-45deg);
}

/* l-header-nav
=============================== */
.l-header-nav {
  display: block;
  flex-grow: 1;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding: 0 7.11111% 7.11111%;
}

.l-header-nav__list {
  border-top: 1px solid;
}

.l-header-nav__item {
  border-bottom: 1px solid;
}

.l-header-nav__handle {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 4em;
  font-size: clamp(15px, 10.21684px + 1.27551vw, 20px);
  line-height: 1;
  cursor: pointer;
}

.l-header-nav__handle > i {
  display: block;
  flex-shrink: 0;
  width: 3em;
  height: 3em;
  margin-right: .5em;
  padding: 3px;
  color: var(--key-color);
}

.l-header-nav__handle > i svg {
  width: 100%;
  height: 100%;

  -o-object-fit: contain;

     object-fit: contain;
}

.l-header-nav__handle:after {
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  bottom: 0;
  display: block;
  width: .6em;
  height: .6em;
  margin: auto 0;
  border-right: 2px solid;
  border-bottom: 2px solid;
  transition: transform .4s;
  transform: rotate(45deg);
}

.l-header-nav__handle.is-open:after {
  transform: rotate(-135deg);
}

.l-header-nav__drawer {
  display: none;
}

/* l-header-nav-sub
============================== */
.l-header-nav-sub {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
  .l-header-nav-sub {
    margin: clamp(24px, 16.34694px + 2.04082vw, 32px) 0;
  }
}

.l-header-nav-sub__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8.57143em;
  height: 2.57143em;
  border-radius: 5px;
  background: var(--key-color);
  color: #fff;
  font-size: 14px;
}

.l-header-nav-sub__button._reservation {
  background: var(--point-color);
}

/* l-header-page-nav
=============================== */
.l-header-page-nav {
  padding-left: clamp(52.5px, 35.75893px + 4.46429vw, 70px);
  border-top: 1px solid var(--border-color);
  font-size: clamp(14px, 12.08673px + .5102vw, 16px);
}

.l-header-page-nav__item:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

.l-header-page-nav__item a {
  position: relative;
  display: flex;
  width: 100%;
  padding: 1.25em 0;
  text-decoration: none;
  line-height: 1.5;
}

.l-header-page-nav__item a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 1px;
  bottom: 0;
  display: block;
  width: .5625em;
  height: .5625em;
  margin: auto 0;
  border-right: 2px solid;
  border-bottom: 2px solid;
  transition: transform .4s;
  transform: rotate(-45deg);
}

/* =============================================================

Main

* ============================================================= */
/* main
=============================== */
.l-main {
  position: relative;
  flex-grow: 1;
  width: 91.46667%;
  max-width: var(--inner-width-px);
  max-height: 100%;
  margin: 0 auto;
  padding: 0;
}

.l-main__head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: clamp(100px, 4.33673px + 25.5102vw, 200px);
  margin-bottom: clamp(30px, -36.96429px + 17.85714vw, 100px);
  color: #fff;
}

.l-main__head:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100%;
  background: var(--point-color);
  transform: translateX(-50%);
}

@media screen and (max-width: 1024px) {
  .l-main__head:before {
    width: 1024px;
  }
}

@media screen and (max-width: 767px) {
  .l-main__head:before {
    width: 109.32945%;
  }
}

/* =============================================================

Footer

* ============================================================= */
/* l-footer
=============================== */
.l-footer {
  position: relative;
}

/* l-footer-contact
=============================== */
.l-footer-contact {
  display: grid;
  grid-template-columns: 50% 50%;
}

.l-footer-contact__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: clamp(229px, 166.81888px + 16.58163vw, 294px);
  padding: 0 8.53333%;
  background: #fff;
}

.l-footer-contact__item:last-child {
  background: var(--point-color);
  color: #fff;
}

.l-footer-contact__item:before {
  content: "";
  position: absolute;
  display: block;
  opacity: .15;
}

.l-footer-contact__item:first-child:before {
  bottom: 0;
  left: 0;
  width: clamp(144px, 6.2449px + 36.73469vw, 288px);
  aspect-ratio: 288 / 276;
  background: url(../img/pict/contact.png) 50% 50%/contain no-repeat;
  transform: translate3d(-5.20833%, 8.33333%, 0px);
}

@media screen and (max-width: 767px) {
  .l-footer-contact__item:first-child:before {
    bottom: 50%;
    transform: translate3d(-8.68056%, 50%, 0px);
  }
}

.l-footer-contact__item:last-child:before {
  top: 0;
  right: 0;
  width: clamp(159px, 6.89541px + 40.56122vw, 318px);
  aspect-ratio: 318 / 325;
  background: url(../img/pict/reservation.png) 50% 50%/contain no-repeat;
  transform: translate3d(2.83019%, -17.84615%, 0px);
}

@media screen and (max-width: 767px) {
  .l-footer-contact__item:last-child:before {
    top: 50%;
    transform: translate3d(5.84615%, -50%, 0px);
  }
}

.l-footer-contact__head {
  z-index: 1;
  margin-bottom: 1.1875em;
  text-align: center;
  font-weight: bold;
  font-size: clamp(16px, .69388px + 4.08163vw, 32px);
  line-height: 1.5;
}

.l-footer-contact__body {
  z-index: 1;
  width: 450px;
  max-width: 100%;
}

/* l-footer-sitemap
=============================== */
.l-footer-sitemap {
  width: 91.46667%;
  max-width: var(--inner-width-px);
  margin: 0 auto;
  padding: 75px 0;
  border-bottom: 1px solid var(--border-color);
}

@media screen and (max-width: 767px) {
  .l-footer-sitemap {
    display: none;
  }
}

.l-footer-sitemap__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.l-footer-sitemap-box__head {
  margin-bottom: 2rem;
  padding-bottom: calc(-1em * var(--line-space) + 1.0625em);
  border-bottom: 1px solid var(--border-color);
}

.l-footer-sitemap-box__head button {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  overflow: visible;
  width: 100%;
  padding: 0;
  outline: none;
  border: 0;
  background: none;
  color: currentColor;
  text-align: left;
  font-weight: bold;
  font-size: 1.6rem;
  pointer-events: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media screen and (max-width: 767px) {
  .l-footer-sitemap-box__head button {
    position: relative;
    padding: 1em 0;
    font-size: calc(1.2rem / var(--min-tablet-percent));
    pointer-events: auto;
  }
  .l-footer-sitemap-box__head button:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 6px;
    height: 6px;
    margin: auto 1em auto 0;
    border-right: 2px solid;
    border-bottom: 2px solid;
    transition: transform .3s ease-out;
    transform: rotate(45deg);
  }
  .l-footer-sitemap-box__head button.is-open:after {
    transform: rotate(-135deg);
  }
}

.l-footer-sitemap-box__body {
  display: block;
}

.l-footer-sitemap-pages {
  font-size: 1.4rem;
}

.l-footer-sitemap-pages > li {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  line-height: var(--line-height);

  --line-height: 1.2;
  --line-space: (var(--line-height) - 1)/2;
}

.l-footer-sitemap-pages > li + li {
  margin-top: calc(-1em * var(--line-space) + 1em);
}

.l-footer-sitemap-pages > li a {
  text-decoration: none;
}

.l-footer-sitemap-pages > li a:hover {
  text-decoration: underline;
}

.l-footer-sitemap-pages > li a[target=_blank]:after {
  content: "";
  position: relative;
  top: .1em;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .4em;
  background: url(/common-lineup/v2/img/icon/blank.svg) 50% 50%/contain no-repeat;
}

/* l-footer-profile
=============================== */
.l-footer-profile {
  padding: 30px 0;
  text-align: center;
  font-size: clamp(10px, 6.17347px + 1.02041vw, 14px);
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .l-footer-profile {
    padding: 40px 0 20px;
  }
}

.l-footer-profile__name {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .l-footer-profile__name {
    font-size: 1em;
    line-height: 1.5;
  }
}

.l-footer-profile__name em {
  font-size: 1.2em;
}

@media screen and (max-width: 767px) {
  .l-footer-profile__name em {
    display: block;
  }
}

.l-footer-profile__data {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75em 1em;
  margin-top: 1em;
}

@media screen and (max-width: 767px) {
  .l-footer-profile__data {
    margin-top: 1.75em;
  }
}

.l-footer-profile__copyright {
  margin-top: 1.75em;
}

@media screen and (max-width: 767px) {
  .l-footer-profile__copyright {
    margin-top: 40px;
  }
}

/* l-footer-pagetop
=============================== */
.l-footer-pagetop {
  position: fixed;
  right: 0;
  bottom: 1%;
  left: 0;
  display: flex;
  justify-content: flex-end;
  width: 98%;
  margin: 0 auto;
  pointer-events: none;
}

.l-footer-pagetop__button {
  width: clamp(43px, 1.8648px + 10.96939vw, 86px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transition: all .2s ease-out;
  pointer-events: auto;
}

.l-footer-pagetop__button:hover {
  opacity: .7;
}

/* =============================================================

Modal

* ============================================================= */
/* l-modal
=============================== */
.l-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100005;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .75);
}

.l-modal__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 70px;
}

@media screen and (max-width: 767px) {
  .l-modal__inner {
    padding: 0 4.26667%;
  }
}

.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;
  overflow-y: auto;
  width: 800px;
  max-width: 100%;
  max-height: 90vh;
}

.l-modal__prev, .l-modal__next {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: clamp(30px, 10.86735px + 5.10204vw, 50px);
  height: clamp(30px, 10.86735px + 5.10204vw, 50px);
  margin: auto 0;
  outline: none;
  border: 0;
  border: 2px solid;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media screen and (max-width: 767px) {
  .l-modal__prev, .l-modal__next {
    background: #fff;
    color: var(--base-color);
  }
}

.l-modal__prev svg, .l-modal__next svg {
  width: 50%;
  margin: auto;
}

.l-modal__prev {
  left: calc(50vw - 470px);
  transform: rotate(90deg);
}

@media screen and (max-width: 940px) {
  .l-modal__prev {
    left: 0;
  }
}

.l-modal__next {
  right: calc(50vw - 470px);
  transform: rotate(-90deg);
}

@media screen and (max-width: 940px) {
  .l-modal__next {
    right: 0;
  }
}

.l-modal-contents:first-child + .l-modal__prev {
  display: none;
}

.l-modal-contents:first-child + .l-modal__prev + .l-modal__next {
  display: none;
}

.l-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  display: block;
  width: 37px;
  height: 37px;
  margin-top: 2.44681%;
  margin-right: 2.44681%;
  outline: none;
  border: 0;
  background: transparent;
  color: currentColor;
  transition: all .3s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.l-modal__close:hover {
  opacity: .7;
}

.l-modal__close span {
  display: none;
}

.l-modal__close:before, .l-modal__close:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 54.05405%;
  height: 3px;
  margin: auto;
  border-radius: 3px;
  background: currentColor;
}

.l-modal__close:before {
  transform: rotate(-45deg);
}

.l-modal__close:after {
  transform: rotate(45deg);
}

/* l-modal-contents
=============================== */
.l-modal-contents {
  position: relative;
  z-index: 3;
  display: block;
  visibility: hidden;
  overflow: hidden;
  height: 0;
  border-radius: 10px;
  background: #fff;
  opacity: 0;
  transition: all .4s ease-out;
  pointer-events: none;
}

.l-modal-contents.is-show {
  visibility: visible;
  height: auto;
  opacity: 1;
  pointer-events: auto;
}

.l-modal-contents__inner {
  padding: clamp(30px, -1.56888px + 8.41837vw, 63px) clamp(20px, -15.39541px + 9.43878vw, 57px);
}

.l-modal-contents__head {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 1em;
  background: var(--bg-color);
  text-align: center;
  font-weight: bold;
  font-size: clamp(20px, 12.34694px + 2.04082vw, 28px);
  line-height: 1.4;
}

.l-modal-contents__head > i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.66667em;
  aspect-ratio: 1 / 1;
  background: #666;
  color: #fff;
  font-style: normal;
  font-size: 1.28571em;
  font-family: Oswald;
}

.l-modal-contents__head span {
  padding: 0 .5em;
}

.l-modal-contents__body iframe {
  display: block;
  max-height: calc(90vh - 12rem);
  border: 0;
}

/* ============================================================= *

Breadcrumbs

* ============================================================= */
.c-breadcrumbs {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1em 0 0 2em;
  color: var(--base-color);
  font-size: 14px;
}

.c-breadcrumbs:before {
  content: "";
  position: absolute;
  top: 0;
  top: 0;
  left: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 100%;
  border-radius: 10px 0 0 0;
  background: var(--base-bg-color);
}

@media screen and (max-width: 767px) {
  .c-breadcrumbs {
    display: none;
  }
}

.c-breadcrumbs__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.c-breadcrumbs__list > li {
  display: flex;
  align-items: baseline;
}

.c-breadcrumbs__list > li + li:before {
  content: ">";
  margin: 0 1em;
}

.c-breadcrumbs__list > li a {
  text-decoration: underline;
}

.c-breadcrumbs__list > li a:hover {
  text-decoration: none;
}

/* ============================================================= *

Button

* ============================================================= */
/* c-button-container
=============================== */
.c-button-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(40px, 20.86735px + 5.10204vw, 60px);
}

/* c-button
=============================== */
.c-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.43137em;
  max-width: clamp(279px, 115.41582px + 43.62245vw, 450px);
  outline: none;
  border: 2px solid;
  border-radius: 3.43137em;
  background: transparent;
  color: var(--color);
  text-decoration: none;
  font-size: clamp(13.6px, 7.0949px + 1.73469vw, 20.4px);
  line-height: 1.1;
  cursor: pointer;
  transition: all .2s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  --color: #000;
  --hover-color: #fff;
  --hover-bg-color: #000;
}

.c-button._red {
  --color: var(--key-color);
  --hover-color: #fff;
  --hover-bg-color: var(--key-color);
}

.c-button._white {
  --color: #fff;
  --hover-color: #000;
  --hover-bg-color: #fff;
}

.c-button._long {
  max-width: clamp(310px, 13.44388px + 79.08163vw, 620px);
}

.c-button em {
  font-size: 1.17647em;
}

.c-button:after {
  content: "";
  position: absolute;
  top: 0;
  right: 1.2em;
  bottom: 0;
  display: block;
  width: .55em;
  height: .55em;
  margin: auto 0;
  border-top: 2px solid;
  border-right: 2px solid;
  transition: transform .2s ease-out;
  transform: rotate(45deg);
}

.c-button ._text-show {
  display: none;
}

.c-button.is-show ._text-hide {
  display: none;
}

.c-button.is-show ._text-show {
  display: block;
}

.c-button.is-show:after {
  transform: rotate(-45deg);
}

:is(a.c-button:hover, button.c-button:hover, a:hover .c-button) {
  border-color: var(--hover-bg-color);
  background: var(--hover-bg-color);
  color: var(--hover-color);
}

/* ============================================================= *

image navigation

* ============================================================= */
/* c-image-nav
============================== */
.c-image-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 692 / 400;
  padding: 4%;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .c-image-nav {
    aspect-ratio: 622 / 250;
  }
}

.c-image-nav__contents {
  z-index: 1;
  font-size: clamp(12px, 4.34694px + 2.04082vw, 20px);
}

.c-image-nav__head {
  position: relative;
}

.c-image-nav__head > ._ja {
  font-weight: bold;
  font-size: clamp(18px, .78061px + 4.59184vw, 36px);
}

.c-image-nav__head > ._en {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(60px, .11696px + 5.84795vw, 80px);
  opacity: .25;
  transform: translate3d(-50%, -50%, 0px);
}

@media screen and (max-width: 767px) {
  .c-image-nav__head > ._en {
    font-size: clamp(40px, 1.73469px + 10.20408vw, 80px);
  }
}

.c-image-nav__body {
  margin-top: calc(-1em * var(--line-space) + 2em);
  margin-bottom: calc(-1em * var(--line-space));
  line-height: var(--line-height);

  --line-height: 1.5;
  --line-space: (var(--line-height) - 1)/2;
}

.c-image-nav__body span {
  display: inline-block;
}

.c-image-nav__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.c-image-nav__bg img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: transform .3s ease-out;

  -o-object-fit: cover;

     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}

.c-image-nav:hover .c-image-nav__bg img {
  transform: scale(1.03);
}

/* c-image-banner
=============================== */
.c-image-banner {
  position: relative;
  display: flex;
  width: calc(100% - var(--transform));
  margin-top: var(--transform);
  margin-left: var(--transform);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;

  --transform: clamp(16px, .69388px + 4.08163vw, 32px);
}

@media screen and (max-width: 560px) {
  .c-image-banner {
    width: calc(100% - var(--transform) * 2);
    margin-right: var(--transform);

    --transform: clamp(16px, 12.17347px + 1.02041vw, 20px);
  }
}

.c-image-banner._reverse {
  flex-direction: row-reverse;
  margin-right: var(--transform);
  margin-bottom: var(--transform);
  margin-left: 0;
}

@media screen and (max-width: 560px) {
  .c-image-banner._reverse {
    margin-left: var(--transform);
  }
}

.c-image-banner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 10px;
}

.c-image-banner__image {
  position: relative;
  position: relative;
  top: calc(var(--transform) * -1);
  left: calc(var(--transform) * -1);
  z-index: 0;
  flex-shrink: 0;
  overflow: hidden;
  width: clamp(125px, 53.25255px + 19.13265vw, 200px);
  aspect-ratio: 1 / 1;
  margin-right: calc(var(--transform) * -1);
  border-radius: 10px;
  background: #000;
}

.c-image-banner._reverse .c-image-banner__image {
  top: var(--transform);
  left: var(--transform);
  margin-right: 0;
}

.c-image-banner__image img {
  width: 100%;
  height: 100%;
  transition: all .4s ease-out;

  -o-object-fit: cover;

     object-fit: cover;
}

.c-image-banner:hover .c-image-banner__image img {
  opacity: .85;
  transform: scale(1.05);
}

.c-image-banner__text {
  position: relative;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0 3% 0 0;
  text-align: center;
  font-size: clamp(18px, .03509px + 1.75439vw, 24px);
  line-height: 1.41667;
}

.c-image-banner__text > p {
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .c-image-banner__text {
    font-size: clamp(16px, 11.21684px + 1.27551vw, 21px);
  }
}

.c-image-banner._reverse .c-image-banner__text {
  padding: 0 0 0 3%;
}

.c-image-banner__bg {
  position: absolute;
  right: -5%;
  bottom: -5%;
  width: 67.61905%;
  color: #f9f9f9;
}

.c-image-banner._reverse .c-image-banner__bg {
  top: -5%;
  right: auto;
  bottom: auto;
  left: -5%;
}

/* ============================================================= *

Banner

* ============================================================= */
/* banner
=============================== */
.c-banner {
  display: block;
  transition: all .3s ease-out;
}

.c-banner:hover {
  opacity: .7;
}

/* ============================================================= *

Tab

* ============================================================= */
/* tab
=============================== */
.c-tab {
  overflow: hidden;
  margin: clamp(40px, 20.86735px + 5.10204vw, 60px) 0;

  --gap: clamp(8px, .34694px + 2.04082vw, 16px);
}

.c-tab__list {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gap);
  width: 100%;
  padding: 0 var(--gap);
  border-bottom: 1px solid var(--base-color);
}

.c-tab__item {
  z-index: 1;
  display: flex;
  flex-grow: 1;
  align-items: stretch;
  margin-bottom: -1px;
}

.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.61111em;
  padding: 1em .25em;
  outline: none;
  border: 0px solid var(--base-color);
  border-bottom-width: 1px;
  border-radius: 4px 4px 0px 0px;
  background: var(--base-color);
  color: var(--base-bg-color);
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.125em;
  line-height: 1.2;
  cursor: pointer;
  transition: background .3s;
}

.c-tab__button:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  z-index: 2;
  display: block;
  width: calc(100% + 4px);
  border-bottom: 1px solid var(--base-color);
  transform: translateX(-50%);
}

.c-tab__button.is-current {
  border: 1px solid var(--base-color);
  background: var(--base-bg-color);
  color: var(--base-color);
}

.c-tab__button.is-current:after {
  width: 100%;
  border-bottom: 1px solid var(--base-bg-color);
}

/* for tab.js view control */
.js-tab-channel {
  display: none;
}

.js-tab-channel.is-current {
  display: block;
}

*[data-tab-id] {
  display: none;
}

*[data-tab-id].is-current {
  display: block;
}

/* ============================================================= *

Card

* ============================================================= */
/* c-square-card
=============================== */
.c-square-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 260 / 254;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

.c-square-card._large {
  aspect-ratio: 540 / 528;
}

@media screen and (max-width: 767px) {
  .c-square-card._large {
    aspect-ratio: 335 / 232;
  }
}

.c-square-card__title {
  z-index: 1;
  font-size: clamp(18px, 11.30357px + 1.78571vw, 25px);
  line-height: 1;
}

.c-square-card__text {
  z-index: 1;
  margin-top: 1.5em;
  font-size: clamp(14px, 13.04337px + .2551vw, 15px);
  line-height: 2;
}

.c-square-card__image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.c-square-card__image img {
  width: 100%;
  height: 100%;
  opacity: .69;
  transition: all .3s ease-out;

  -o-object-fit: cover;

     object-fit: cover;
}

.c-square-card:hover .c-square-card__image img {
  transform: scale(1.05);
}

/* ============================================================= *

Section

* ============================================================= */
/* c-section
=============================== */
.c-section {
  position: relative;
}

.c-section._compact {
  max-width: 950px;
  margin-right: auto;
  margin-left: auto;
}

.c-section:not(:first-child) {
  margin-top: clamp(64px, .86224px + 16.83673vw, 130px);
}

.c-section:not(._bg):last-child {
  margin-bottom: clamp(75px, 3.25255px + 19.13265vw, 150px);
}

.c-section._margin\:small:not(:first-child) {
  margin-top: clamp(30px, -36.96429px + 17.85714vw, 100px);
}

.c-section._margin\:small:not(._bg):last-child {
  margin-bottom: clamp(30px, -36.96429px + 17.85714vw, 100px);
}

.c-section._bg {
  padding: clamp(40px, 6.51786px + 8.92857vw, 75px) 0 clamp(50px, 2.16837px + 12.7551vw, 100px);
}

.c-section._bg:not(:first-child) {
  margin-top: clamp(64px, 29.56122px + 9.18367vw, 100px);
}

.c-section._bg._no-margin {
  margin-top: 0;
}

.c-section._bg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100%;
  background: #fff;
  transform: translateX(-50%);
}

@media screen and (max-width: 1024px) {
  .c-section._bg:before {
    width: 1024px;
  }
}

@media screen and (max-width: 767px) {
  .c-section._bg:before {
    width: 109.32945%;
  }
}

.c-section._bg\:deep:before {
  background: #ececec;
}

.c-section._bg\:dark {
  color: #fff;
}

.c-section._bg\:dark:before {
  background: #505050;
}

.c-section__head {
  position: relative;
  margin-bottom: clamp(30px, 10.86735px + 5.10204vw, 50px);
}

/* c-inner-section
=============================== */
.c-inner-section {
  margin-top: clamp(50px, 26.08418px + 6.37755vw, 75px);
}

.c-inner-section + .c-inner-section {
  margin-top: clamp(70px, 3.03571px + 17.85714vw, 140px);
}

.c-inner-section__head {
  margin-bottom: 20px;
}

.c-inner-section__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 1.30102px + 7.65306vw, 60px);
}

/* c-inner-block
=============================== */
.c-inner-block {
  display: flex;
  flex-direction: row-reverse;
  gap: 40px 52px;
  max-width: 952px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .c-inner-block {
    flex-direction: column;
    align-items: center;
  }
}

.c-inner-block__image {
  flex-shrink: 0;
  width: 400px;
  max-width: 100%;
}

.c-inner-block__head {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space) + 1.33333em);
  font-size: clamp(20px, 16.17347px + 1.02041vw, 24px);
}

.c-inner-block__body small {
  display: block;
  display: block;
  margin-top: 1em;
  color: var(--key-color);
  font-size: .875em;
}

/* c-detailed
=============================== */

.c-detailed-title {
  font-weight: bold;
  font-size: clamp(18px, 12.2602px + 1.53061vw, 24px);
}

/* ============================================================= *

Text

* ============================================================= */
/* c-lead
=============================== */
.c-lead {
  white-space: normal;
  letter-spacing: -.03em;
  font-size: 1.6rem;
}

.c-lead:not(:first-child) {
  margin-top: 1.5em;
}

.c-lead:not(:last-child) {
  margin-bottom: 3.125em;
}

.c-lead._center {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .c-lead._center\:desktop {
    text-align: center;
  }
}

.c-lead > p {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  line-height: var(--line-height);

  --line-height: 1.9375;
  --line-space: (var(--line-height) - 1)/2;
}

.c-lead > p:not(:first-child) {
  margin-top: calc(-1em * var(--line-space) + 1.75em);
}

.c-lead > p span {
  display: inline-block;
}

.c-lead > p em {
  color: var(--key-color);
  font-weight: bold;
}

.c-lead > p a {
  color: var(--key-color);
}

/* c-text
=============================== */
.c-text {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  line-height: var(--line-height);

  --line-height: 2;
  --line-space: (var(--line-height) - 1)/2;
}

.c-text:not(:last-child) {
  margin-bottom: calc(-1em * var(--line-space) + 2.66667em);
}

.c-text._center {
  text-align: center;
}

.c-text._compact {
  max-width: 952px;
  margin-right: auto;
  margin-left: auto;
}

.c-text span {
  display: inline-block;
}

/* c-list
=============================== */
.c-list {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  line-height: var(--line-height);

  --line-height: 1.5;
  --line-space: (var(--line-height) - 1)/2;
}

.c-list._center {
  margin-right: auto;
  margin-left: auto;
}

.c-list:not(:last-child) {
  margin-bottom: calc(-1em * var(--line-space) + 2.66667em);
}

.c-list em {
  font-weight: bold;
}

.c-list > li {
  position: relative;
  padding-left: 1.25em;
}

.c-list > li:before {
  content: "\30fb";
  position: absolute;
  top: 0;
  left: 0;
}

.c-list > li + li {
  margin-top: .4em;
}

/* c-notes
=============================== */
.c-notes {
  font-size: clamp(12px, 11.04337px + .2551vw, 13px);
}

.c-notes:not(:first-child) {
  margin-top: 2.71429em;
}

.c-notes > li {
  padding-left: 1em;
  text-indent: -1em;
}

.c-notes > li + li {
  margin-top: .25em;
}

.c-notes > li._strong {
  color: var(--key-color);
  font-weight: bold;
}

.c-notes > li:before {
  content: "\203b";
}

.c-notes._dot > li:before {
  content: "\30fb";
}

.c-notes._square > li:before {
  content: "\25a0";
}

.c-notes._star > li:before {
  content: "\2605";
}

.c-notes._circle > li:before {
  content: "\25cf";
}

.c-notes > li._dot:before {
  content: "\30fb";
}

.c-notes > li._square:before {
  content: "\25a0";
}

.c-notes > li._star:before {
  content: "\2605";
}

.c-notes > li._circle:before {
  content: "\25cf";
}

/* c-introduction-block
=============================== */
.c-introduction-block {
  text-align: center;
}

.c-introduction-block__lead {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  font-size: clamp(20px, 16.17347px + 1.02041vw, 24px);
  line-height: var(--line-height);

  --line-height: 1.8;
  --line-space: (var(--line-height) - 1)/2;
}

.c-introduction-block__lead span {
  display: inline-block;
}

.c-introduction-block__text {
  margin-top: calc(-1em * var(--line-space) + 1.92857em);
  margin-bottom: calc(-1em * var(--line-space));
  font-size: clamp(14px, 13.04337px + .2551vw, 15px);
  line-height: var(--line-height);

  --line-height: 2;
  --line-space: (var(--line-height) - 1)/2;
}

.c-introduction-block__text span {
  display: inline-block;
}

.c-introduction-block__contents {
  margin-top: clamp(30px, 10.86735px + 5.10204vw, 50px);
}

.c-introduction-block__button {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 730px;
  margin: clamp(30px, 20.43367px + 2.55102vw, 40px) auto 0;

  place-items: center;
}

.c-introduction-block__button._wide {
  grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
  max-width: none;
}

.c-introduction-block__button._single {
  max-width: 400px;
}

/* ============================================================= *

Title

* ============================================================= */
/* c-page-title
=============================== */
.c-page-title {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 9rem;
}

@media screen and (max-width: 767px) {
  .c-page-title {
    padding-left: 0;
  }
}

.c-page-title > ._icon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 54px;
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .c-page-title > ._icon {
    right: 0;
    left: auto;
    width: 28.8%;
    opacity: .15;
  }
}

.c-page-title > ._ja {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  font-weight: bold;
  font-size: clamp(18px, .78061px + 4.59184vw, 36px);
  line-height: var(--line-height);

  --line-height: 1.25;
  --line-space: (var(--line-height) - 1)/2;
}

.c-page-title > ._ja span {
  display: inline-block;
}

.c-page-title > ._en {
  order: -1;
  margin-bottom: 1.25em;
  font-weight: 500;
  font-size: clamp(8px, .34694px + 2.04082vw, 16px);
  font-family: var(--en-font-family);
  line-height: .9;
}

/* c-pict-title
============================== */
.c-pict-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-pict-title:before {
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  margin-bottom: 30px;
  background: currentColor;
}

.c-pict-title > ._en {
  margin-bottom: 15px;
  font-size: 2.4rem;
}

.c-pict-title > ._image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(50px, 21.30102px + 7.65306vw, 80px);
  aspect-ratio: 100 / 120;
  margin-bottom: 17px;
}

.c-pict-title._support > ._image {
  width: clamp(40px, 1.73469px + 10.20408vw, 80px);
}

.c-pict-title > ._ja {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  font-weight: bold;
  font-size: clamp(15.3px, .66352px + 3.90306vw, 30.6px);
}

.c-pict-title > ._ja em {
  font-size: 1.17647em;
}

@media screen and (min-width: 768px) {
  .c-pict-title._small\:desktop:before {
    width: 60px;
    margin-bottom: 10px;
  }
  .c-pict-title._small\:desktop > ._en {
    margin-bottom: 1.8rem;
    font-size: 1.6rem;
  }
  .c-pict-title._small\:desktop > ._image {
    width: 54px;
  }
}

/* c-section-title
=============================== */
.c-section-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.c-section-title:not(:first-child) {
  margin-top: clamp(64px, 29.56122px + 9.18367vw, 100px);
}

.c-section-title:not(:last-child) {
  margin-bottom: clamp(30px, 10.86735px + 5.10204vw, 50px);
}

.c-section-title:before {
  content: "";
  display: block;
  width: clamp(30px, 1.30102px + 7.65306vw, 60px);
  height: 1px;
  margin: 0 auto clamp(15px, .65051px + 3.82653vw, 30px);
  background: currentColor;
}

.c-section-title > ._ja {
  order: 1;
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  font-weight: bold;
  font-size: clamp(20px, 8.52041px + 3.06122vw, 32px);
}

.c-section-title > ._ja span {
  display: inline-block;
}

.c-section-title > ._ja i {
  font-style: normal;
  font-size: 85%;
}

.c-section-title > ._en {
  margin-bottom: 1.25em;
  font-size: clamp(10px, 4.2602px + 1.53061vw, 16px);
  font-family: var(--en-font-family);
  line-height: .9;
}

/* c-line-title
=============================== */
.c-line-title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 2.08333em;
  border-bottom: 2px solid;
  text-align: center;
  font-weight: bold;
  font-size: clamp(18px, 12.2602px + 1.53061vw, 24px);
}

/* ============================================================= *

Grid

* ============================================================= */
/* grid
=============================== */
.c-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;

  --gap: 20px;
}

.c-grid._center {
  justify-content: center;
}

.c-grid__item {
  width: calc((100% - var(--gap) * (var(--grid-column) - 1)) / var(--grid-column));

  --grid-column: 4;
}

.c-grid__item._x3 {
  --grid-column: 3;
}

@media screen and (max-width: 767px) {
  .c-grid__item._x3\:tablet {
    --grid-column: 3;
  }
}

.c-grid__item._x2 {
  --grid-column: 2;
}

@media screen and (max-width: 767px) {
  .c-grid__item._x2\:tablet {
    --grid-column: 2;
  }
}

.c-grid__item._x1 {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .c-grid__item._x1\:tablet {
    width: 100%;
  }
}

@media screen and (max-width: 560px) {
  .c-grid__item._x1\:mobile {
    width: 100%;
  }
}

/* ============================================================= *

Table

* ============================================================= */
/* c-table-scroll
=============================== */
.c-table-scroll {
  position: relative;
  overflow: auto;
  width: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #f4f4f4 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), #f4f4f4 15px) right/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) right/20px 100%;
  background-attachment: local, scroll, local, scroll;
  background-repeat: no-repeat;
}
.c-table-scroll._bg-white {
  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-attachment: local, scroll, local, scroll;
  background-repeat: no-repeat;
}

.c-table-scroll:not(:first-child) {
  margin-top: 3rem;
}

@media screen and (max-width: 767px) {
  .c-table-scroll > * {
    min-width: 55em;
  }
  .c-table-scroll._ciao > * {
    min-width: 80em;
  }
}

/* data table
=============================== */
.c-data-table {
  width: 100%;
  border: 1px solid #ccc;
  border-collapse: collapse;
  font-size: clamp(15px, 14.04337px + .2551vw, 16px);
}

.c-data-table:not(:first-child) {
  margin-top: 2.25em;
}

.c-data-table._fixed {
  table-layout: fixed;
}

.c-data-table th,
.c-data-table td {
  padding: 1em;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
}

.c-data-table th {
  font-weight: 550;
}

.c-data-table small {
  display: inline-block;
  font-size: 80%;
}

.c-data-table thead th {
  background: #505050;
  color: #fff;
}

.c-data-table thead td {
  background: rgba(0, 0, 0, .043);
  font-size: .875em;
}

.c-data-table._fixed thead th:first-child {
  width: auto;
}

.c-data-table tbody th {
  padding: 1em .5em;
  background: rgba(0, 0, 0, .043);
}

.c-data-table tbody th span {
  display: inline-block;
  font-size: .77778em;
}

.c-data-table tbody tr._subtotal th {
  background: #505050;
  color: #fff;
}

.c-data-table tbody tr._subtotal td {
  background: rgba(0, 0, 0, .043);
}

.c-data-table tbody tr._total th {
  background: var(--key-color);
  color: #fff;
}

.c-data-table tbody tr._total td {
  background: rgba(209, 0, 0, .1);
}

.c-data-table tbody tr th {
  font-weight: inherit;
}

/* c-profile-table
=============================== */
.c-profile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(14px, 12.08673px + .5102vw, 16px);
  line-height: 1.6;
}

.c-profile-table:not(:last-child) {
  margin-bottom: 9rem;
}

@media screen and (max-width: 767px) {
  .c-profile-table {
    display: block !important;
  }
  .c-profile-table tbody,
  .c-profile-table tr,
  .c-profile-table th,
  .c-profile-table td {
    display: block !important;
  }
}

.c-profile-table th,
.c-profile-table td {
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
}

.c-profile-table th {
  width: 8.375em;
  padding: 1.2em 0;
  text-align: left;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .c-profile-table th {
    width: 100%;
    padding: 1.5em 1em 0;
    border-bottom: 0;
    text-align: left;
  }
}

.c-profile-table td {
  padding: 1.2em 2em;
}

@media screen and (max-width: 767px) {
  .c-profile-table td {
    width: 100%;
    padding: .5em 0 1em;
    padding: 1em;
  }
}

.c-profile-table td em {
  color: var(--key-color);
  font-weight: normal;
}

.c-profile-table td > ul:not(:last-child) {
  margin-bottom: 1em;
}

.c-profile-table td > ul > li {
  display: flex;
}

.c-profile-table td > ul > li:not(:first-child) {
  margin-top: .5em;
}

.c-profile-table td > ul > li em {
  flex-shrink: 0;
}

/* ============================================================= *

Blog

* ============================================================= */
/* CMN-blog
=============================== */
.CMN-blog__table {
  width: 100%;
}

.CMN-blog__table + .CMN-blog__table {
  margin-top: 50px;
}

/* CMN-blog-block
=============================== */
.CMN-blog-block {
  overflow: hidden;
  padding: 0 clamp(15px, -1.26276px + 4.33673vw, 32px);
  border-radius: 10px;
  background: #fff;
}

.CMN-blog-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: .5em 1em;
  background: #505050;
  color: #fff;
  font-size: clamp(18px, 8.43367px + 2.55102vw, 28px);
  line-height: 1.5;
}

.CMN-blog-block__shop {
  margin-right: .5em;
}

.CMN-blog-block__shop:before {
  content: "[";
}

.CMN-blog-block__shop:after {
  content: "]";
}

.CMN-blog-block__title {
  margin-right: 1em;
}

.CMN-blog-block__date {
  margin-left: auto;
  font-size: clamp(12px, 8.17347px + 1.02041vw, 16px);
  font-family: var(--en-font-family);
}

.CMN-blog-block__body {
  overflow: hidden;
  padding: clamp(32px, 1.38776px + 8.16327vw, 64px) 0;
  word-break: break-all;
}

.CMN-blog-block__body img {
  display: inline;
  height: auto !important;
  max-width: 100%;
}

.CMN-blog-block__body strong {
  font-weight: bold;
}

.CMN-blog-block__body em {
  font-style: italic;
}

/* CMN-blog-pager
=============================== */
.CMN-blog-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin: 2em 0;
  text-align: right;
  font-size: clamp(12px, 10.08673px + .5102vw, 14px);
}

.CMN-blog._no-pager .CMN-blog-pager {
  display: none;
}

.CMN-blog-pager__current em {
  font-weight: normal;
}

.CMN-blog-pager__nav {
  display: flex;
  align-items: baseline;
}

.CMN-blog-pager__nav > li:before {
  content: "\ff5c";
  margin: 0 .75em;
}

/* blog-like-counter
=============================== */
.blog-like-counter {
  float: right;
  width: 92px;
  font-size: 16px;
}

.blog-like-counter__balloon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 1em;
  padding: .5em;
  border-radius: 5px;
  background: var(--bg-color);
}

.blog-like-counter__balloon:after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border: 6px solid transparent;
  border-top-color: var(--bg-color);
}

.blog-like-counter__img {
  width: 100%;
}

/* =============================================================

Calendar

* ============================================================= */
/* c-calendar-item
============================== */
.c-calendar-item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
  font-family: var(--en-font-family);
}

.c-calendar-item__head {
  position: relative;
  width: 100%;
  margin-bottom: 1em;
  font-size: clamp(14px, 8.2602px + 1.53061vw, 20px);
}

.c-calendar-item__title {
  display: flex;
  align-items: baseline;
  font-family: var(--en-font-family);
  line-height: .9;
}

.c-calendar-item__title .cal_year:before {
  content: "/";
  margin-right: .2em;
  margin-left: .25em;
  font-size: 80%;
}

.c-calendar-item__title .cal_month {
  font-size: 2.4em;
}

.c-calendar-item__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 14px;
}

@media screen and (max-width: 767px) {
  .c-calendar-item__arrow {
    display: flex;
    justify-content: flex-start;
  }
}

.c-calendar-item__body {
  position: relative;
  width: 100%;
  margin-bottom: auto;
}

.c-calendar-item__foot {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 4%;
  font-size: 1.4rem;
}

.c-calendar-item .cal {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--en-font-family);
}

.c-calendar-item .cal th {
  font-size: clamp(10px, 8.08673px + .5102vw, 12px);
}

.c-calendar-item .cal th > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1em;
  padding-bottom: 1em;
  border-top: 1px solid var(--base-color);
  text-align: center;
  font-family: var(--en-font-family);
  line-height: 1;
}

.c-calendar-item .cal td {
  position: relative;
  padding: 1px;
  text-align: center;
  font-size: clamp(14px, 12.08673px + .5102vw, 16px);
}

.c-calendar-item .cal td > div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
}

.c-calendar-item .cal .cal_sun,
.c-calendar-item .cal .cal_holiday {
  color: #c80011;
}

.c-calendar-item .cal td :is(.cal_close01) {
  background: var(--point-color);
  color: #fff;
}

.c-calendar-item .cal td :is(.cal_close02) {
  background: var(--key-color);
  color: #fff;
}

/* close_type = type_a */
.c-calendar-item[data-close-type="type_a"][data-shop-cd="09"] .cal td :is(.cal_close03) {
  background: inherit;
  color: inherit;
}

/* close_type = type_b */
.c-calendar-item[data-close-type="type_b"] .cal td :is(.cal_close07) {
  background: var(--key-color);
  color: #fff;
}
.c-calendar-notes__item._close07 span {
  color: var(--key-color);
}

/* close_type = type_a */
.c-calendar-item[data-close-type="type_a"] .cal td :is(.cal_close04) {
  background: var(--point-color);
  color: #fff;
}

/* close_type = type_b */
.c-calendar-item[data-close-type="type_b"] .cal td :is(.cal_close05) {
  background: var(--point-color);
  color: #fff;
}

/* close_type = type_c */
.c-calendar-item[data-close-type="type_c"] .cal td :is(.cal_close06) {
  background: var(--point-color);
  color: #fff;
}

/* c-calendar-arrow
============================== */
.c-calendar-arrow {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(27px, 24.1301px + .76531vw, 30px);
  height: clamp(27px, 24.1301px + .76531vw, 30px);
  padding: 0;
  outline: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0px 0px 0px 2px var(--base-color);
  color: var(--base-color);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: all .3s ease-out;
}

.c-calendar-arrow:hover {
  background: var(--base-color);
  color: #fff;
}

.c-calendar-arrow:before {
  content: "";
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: translateX(-1px) rotate(45deg);

  inset: 0;
}

.c-calendar-arrow.is-disabled {
  opacity: .25;
  pointer-events: none;
}

.c-calendar-arrow:first-child {
  transform: rotate(180deg);
}

/* ============================================================= *

Campaign

* ============================================================= */
/* c-campaign-contents
=============================== */
.c-campaign-contents .CMN-CMP-link {
  display: block;
  transition: opacity .3s ease-out;
}

.c-campaign-contents .CMN-CMP-link:hover {
  opacity: .7;
}

.c-campaign-contents .CMN-CMP-body__list {
  margin: -1.5rem;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .c-campaign-contents .CMN-CMP-body__list {
    margin: -.8rem;
  }
}

.c-campaign-contents .CMN-CMP-body__item {
  padding: 1.5rem;
}

@media screen and (max-width: 767px) {
  .c-campaign-contents .CMN-CMP-body__item {
    padding: .8rem;
  }
}

/* ============================================================= *

Contact

* ============================================================= */
/* c-contact-grid
=============================== */
.c-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
}

@media screen and (max-width: 767px) {
  .c-contact-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }
}

/* c-contact-card
=============================== */
.c-contact-card {
  display: flex;
  flex-direction: column;
  padding: 1.53333em;
  border: 1px solid #ccc;
  font-size: clamp(13px, 11.08673px + .5102vw, 15px);
}

.c-contact-card__head {
  width: 100%;
  margin-bottom: 1em;
  padding: .5em .75em;
  border-radius: 4px;
  background: var(--bg-color);
  text-decoration: underline;
  font-weight: bold;
  font-size: clamp(17px, 13.17347px + 1.02041vw, 21px);
}

.c-contact-card__tel {
  display: flex;
  align-items: center;
  margin-bottom: .69231em;
  color: var(--key-color);
  font-weight: 600;
  font-size: clamp(21px, 16.21684px + 1.27551vw, 26px);
  font-family: var(--en-font-family);
  line-height: 1.15385;
}

.c-contact-card__tel:before {
  content: "";
  display: block;
  width: .80769em;
  height: 1.15385em;
  margin-right: .38462em;
  background: url(../img/svg/tel.svg) 50% 50%/contain no-repeat;
  font-weight: bold;
}

.c-contact-card__body {
  font-size: clamp(13px, 11.08673px + .5102vw, 15px);
}

.c-contact-card__foot {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(7px, 5.08673px + .5102vw, 9px);
  margin-top: 21px;
}

.c-contact-card__foot._x1 {
  grid-template-columns: repeat(1, 1fr);
  width: 13.33333em;
  margin-right: auto;
  margin-left: auto;
}

.c-contact-card__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.33333em;
  border: 1px solid var(--base-color);
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0;
  transition: all .3s;
}

.c-contact-card__button:hover {
  background: var(--base-color);
  color: #fff;
}

/* c-contact-reservation
=============================== */
.c-contact-reservation {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 300px;
  padding: 30px;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.c-contact-reservation:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/nav-reservation.jpg) 50% 50%/cover no-repeat;
  transition: all .3s;
}

@media screen and (max-width: 767px) {
  .c-contact-reservation:before {
    background-image: url(../img/nav-reservation-mobile.jpg);
  }
}

.c-contact-reservation:hover:before {
  transform: scale(1.03);
}

.c-contact-reservation__lead {
  z-index: 1;
  font-size: clamp(18px, 14.17347px + 1.02041vw, 22px);
  line-height: 34px;
}

.c-contact-reservation__lead span {
  display: inline-block;
}

.c-contact-reservation__button {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.33333em;
  max-width: 300px;
  margin: 18px auto 0;
  border: 1px solid #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: clamp(14px, 13.04337px + .2551vw, 15px);
  transition: all .3s;
}

.c-contact-reservation:hover .c-contact-reservation__button {
  background: #fff;
  color: var(--base-color);
}

/* ============================================================= *

democar

* ============================================================= */
.ATC-DEMOCAR {
  --bg-color: #f4f4f4;
}

.ATC-DEMOCAR .ATC-shop-list-table th {
  padding: .75em .5em;
}

.ATC-DEMOCAR .ATC-shop-list-table-shop {
  min-width: 7em;
}

/* ============================================================= *

inspection center

* ============================================================= */
/* c-ispCenter-feature
============================== */
.c-ispCenter-block-list {
  display: grid;
  grid-template-columns: 100%;
  gap: clamp(16px, .69388px + 4.08163vw, 32px);
  padding: 0 32px;
}

.c-ispCenter-block-list:not(:first-child) {
  margin-top: clamp(70px, 41.30102px + 7.65306vw, 100px);
}

@media screen and (max-width: 767px) {
  .c-ispCenter-block-list {
    padding: 0;
  }
}

.c-ispCenter-block {
  position: relative;
  display: flex;
  margin-bottom: clamp(16px, .69388px + 4.08163vw, 32px);
  border-radius: 10px;
  background: var(--background);

  --background: #fff;
}

.c-section._bg .c-ispCenter-block {
  --background: var(--base-bg-color);
}

@media screen and (max-width: 767px) {
  .c-ispCenter-block {
    flex-direction: column;
    margin-top: clamp(16px, .69388px + 4.08163vw, 32px);
    padding: 0 clamp(16px, .69388px + 4.08163vw, 32px) 32px;
  }
}

@media screen and (min-width: 768px) {
  .c-ispCenter-block:nth-child(2n) {
    margin-top: 32px;
    margin-bottom: 0;
  }
}

.c-ispCenter-block__image {
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .c-ispCenter-block__image {
    bottom: clamp(16px, .69388px + 4.08163vw, 32px);
    order: -1;
  }
}

@media screen and (min-width: 768px) {
  .c-ispCenter-block__image {
    top: 32px;
    left: 32px;
    width: 50%;
  }
}

.c-ispCenter-block__image img {
  border-radius: 10px;
}

@media screen and (min-width: 768px) {
  .c-ispCenter-block:nth-child(2n) .c-ispCenter-block__image {
    top: -32px;
    left: -32px;
    order: -1;
  }
}

.c-ispCenter-block__contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .c-ispCenter-block__contents {
    padding: 32px 0 32px 32px;
  }
}

@media screen and (min-width: 768px) {
  .c-ispCenter-block:nth-child(2n) .c-ispCenter-block__contents {
    padding: 32px 32px 32px 0;
  }
}

.c-ispCenter-block__head {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  color: var(--key-color);
  text-align: center;
  letter-spacing: 0;
  font-size: clamp(20px, 12.34694px + 2.04082vw, 28px);
  line-height: var(--line-height);

  --line-height: 1.25;
  --line-space: (var(--line-height) - 1)/2;
}

.c-ispCenter-block__head span {
  display: inline-block;
}

.c-ispCenter-block__body {
  margin-top: 2em;
}

.c-ispCenter-block__lead {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space) + 1.5em);
  text-align: center;
  font-size: 1.25em;
  line-height: var(--line-height);

  --line-height: 1.4;
  --line-space: (var(--line-height) - 1)/2;
}

.c-ispCenter-block__lead span {
  display: inline-block;
}

.c-ispCenter-block__text {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  line-height: var(--line-height);

  --line-height: 1.9375;
  --line-space: (var(--line-height) - 1)/2;
}

/* c-ispCenter-image-block
============================== */
.c-ispCenter-image-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.c-ispCenter-image-block__image {
  overflow: hidden;
  border-radius: 10px;
}

.c-ispCenter-image-block__head {
  margin-top: clamp(20px, 10.43367px + 2.55102vw, 30px);
  text-align: center;
  font-size: clamp(16px, 4.52041px + 3.06122vw, 28px);
}

.c-ispCenter-image-block__head:last-child {
  margin-top: 20px;
  font-size: clamp(16px, 12.17347px + 1.02041vw, 20px);
}

.c-ispCenter-image-block__head._small {
  font-size: clamp(16px, 12.17347px + 1.02041vw, 20px);
}

.c-ispCenter-image-block__head span {
  display: inline-block;
}

.c-ispCenter-image-block__head:before {
  content: "";
  position: relative;
  display: block;
  width: 2.85714em;
  height: 1px;
  margin: 0 auto .75em;
  background: currentColor;
}

.c-ispCenter-image-block__body {
  flex-grow: 1;
  margin-top: calc(-1em * var(--line-space) + 1.5em);
  margin-bottom: calc(-1em * var(--line-space));
  letter-spacing: 0;
  font-weight: 400;
  font-size: clamp(14px, 12.08673px + .5102vw, 16px);
  line-height: var(--line-height);

  --line-height: 1.9375;
  --line-space: (var(--line-height) - 1)/2;
}

.c-ispCenter-image-block__foot {
  display: flex;
  justify-content: center;
  width: 450px;
  max-width: 100%;
  margin-top: 35px;
}

/* ============================================================= *

Maintenance

* ============================================================= */
/* c-maintenance-nav-grid
============================== */
.c-maintenance-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 3.64796px + 9.69388vw, 78px) 64px;
}

@media screen and (min-width: 768px) {
  .c-maintenance-nav-grid._single {
    grid-template-columns: 100%;
    max-width: 508px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .c-maintenance-nav-grid {
    grid-template-columns: 100%;
  }
}

/* c-maintenance-nav
============================== */
.c-maintenance-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.c-maintenance-nav__logo {
  width: 338px;
  height: 137px;
  max-width: 80%;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .c-maintenance-nav__logo {
    height: auto;
  }
}

.c-maintenance-nav__logo img {
  width: 100%;
  height: 100%;

  -o-object-fit: contain;

     object-fit: contain;
}

.c-maintenance-nav__head {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
  font-size: clamp(16px, 4.52041px + 3.06122vw, 28px);
}

.c-maintenance-nav__head:first-child:before {
  content: "";
  position: relative;
  display: block;
  width: 2.85714em;
  height: 1px;
  margin: 0 auto 1em;
  background: var(--key-color);
}

.c-maintenance-nav__body {
  flex-grow: 1;
  margin-top: calc(-1em * var(--line-space) + 1.5em);
  margin-bottom: calc(-1em * var(--line-space));
  letter-spacing: 0;
  font-weight: 400;
  line-height: var(--line-height);

  --line-height: 1.9375;
  --line-space: (var(--line-height) - 1)/2;
}

.c-maintenance-nav__foot {
  display: flex;
  justify-content: center;
  width: 450px;
  max-width: 100%;
  margin-top: 35px;
}

/* c-maintenance-reservation-button
============================== */
.c-maintenance-reservation-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(16px, .69388px + 4.08163vw, 32px) 32px;
  max-width: 1028px;
  margin: 0 auto clamp(40px, 16.08418px + 6.37755vw, 65px);
}

@media screen and (max-width: 767px) {
  .c-maintenance-reservation-button {
    justify-content: center;
  }
}

/* c-maintenance-reservation-info
============================== */
.c-maintenance-reservation-info {
  max-width: 765px;
  margin: 0 auto;
}

.c-maintenance-reservation-info__body {
  margin: -35px 0;
  padding: 35px 18.30065% 35px 0;
  background: url(../img/htc-image.png) right 50%/contain no-repeat;
}

@media screen and (max-width: 767px) {
  .c-maintenance-reservation-info__body {
    margin: 0;
    padding: 0;
    background: none;
    text-align: center;
  }
}

.c-maintenance-reservation-info__lead {
  font-size: clamp(18px, 14.17347px + 1.02041vw, 22px);
}

.c-maintenance-reservation-info__lead span {
  display: inline-block;
}

.c-maintenance-reservation-info__text {
  margin-top: .5em;
  font-weight: 400;
  font-size: clamp(15px, 12.1301px + .76531vw, 18px);
  line-height: 1.5;
}

.c-maintenance-reservation-info__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, .69388px + 4.08163vw, 32px);
  margin-top: clamp(25px, 1.08418px + 6.37755vw, 50px);
  text-align: center;
}

.c-maintenance-reservation-info__notes {
  font-size: clamp(13px, 11.08673px + .5102vw, 15px);
  line-height: 1.625;
}

/* ============================================================= *

Inspection

* ============================================================= */
/* c-inspection-introduction
============================== */
.c-inspection-introduction {
  margin-bottom: 50px;
}

.c-inspection-introduction__head {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space) + 1.25em);
  text-align: center;
  font-size: clamp(18px, 12.2602px + 1.53061vw, 24px);
}

.c-inspection-introduction__head span {
  display: inline-block;
}

/* c-inspection-block
============================== */
.c-inspection-block {
  padding: 32px clamp(20px, -22.09184px + 11.22449vw, 64px) clamp(40px, 17.04082px + 6.12245vw, 64px);
  border-radius: 10px;
  background: #fff;
}

/* c-inspection-overview-item
============================== */
.c-inspection-overview-item {
  display: flex;
  gap: 32px;
}

@media screen and (max-width: 767px) {
  .c-inspection-overview-item {
    flex-direction: column;
  }
}

.c-inspection-overview-item:not(:last-child) {
  padding-bottom: 32px;
}

@media screen and (min-width: 768px) {
  .c-inspection-overview-item:not(:last-child) {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
  }
}

.c-inspection-overview-item__head {
  flex-shrink: 0;
  width: 10.5em;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .c-inspection-overview-item__head {
    width: 100%;
    padding: 1em;
    background: #f4f4f4;
    text-align: left;
  }
}

.c-inspection-overview-item__body {
  flex-grow: 1;
  font-size: clamp(14px, 10.17347px + 1.02041vw, 18px);
}

/* c-inspection-overview-check
============================== */
.c-inspection-overview-check {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em 1em;
  line-height: 1.4;
}

.c-inspection-overview-check > li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .4em;
  padding-left: 1.4em;
}

.c-inspection-overview-check > li:before {
  content: "";
  position: absolute;
  top: .4em;
  left: 0;
  display: block;
  width: .8em;
  height: .8em;
  border: 1px solid;
}

/* c-inspection-checkpoint
============================== */
.c-inspection-checkpoint__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5em 1em;
  line-height: 1.4;
}

@media screen and (max-width: 560px) {
  .c-inspection-checkpoint__list {
    grid-template-columns: 100%;
  }
}

.c-inspection-checkpoint__list > li {
  display: flex;
  align-items: baseline;
  gap: .4em;
}

.c-inspection-checkpoint__list > li:before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: .8em;
  height: .8em;
  border: 1px solid;
}

/* c-inspection-figure
============================== */
.c-inspection-figure {
  position: relative;
  max-width: 790px;
  margin: clamp(45px, 1.95153px + 11.47959vw, 90px) auto 0;
}

body[data-id=safety] .c-inspection-figure {
  margin-bottom: -5.06329%;
}

.c-inspection-figure__image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 75.94937%;
  transform: translate3d(-50%, -50%, 0px);
}

.c-inspection-figure__pointer {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 790 / 410;
}

/* c-inspection-checkpoint-nav
============================== */
.c-inspection-checkpoint-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 6.639%;
  max-width: 964px;
  margin: clamp(40px, 1.73469px + 10.20408vw, 80px) auto 0;
}

/* c-inspection-checkpoint-button
=============================== */
.c-inspection-checkpoint-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.29167em;
  border: 2px solid var(--base-color);
  border-radius: 3em;
  text-align: center;
  text-decoration: none;
  font-size: clamp(20px, 8.02339px + 1.16959vw, 24px);
  line-height: 1.25;
  transition: all .3s ease-out;
}

@media screen and (max-width: 767px) {
  .c-inspection-checkpoint-button {
    font-size: clamp(14px, 10.17347px + 1.02041vw, 18px);
  }
}

.c-inspection-checkpoint-button:hover {
  background: var(--base-color);
  color: #fff;
}

.c-inspection-checkpoint-button ._number {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5625em;
  height: 1.5625em;
  aspect-ratio: 1 / 1;
  margin: auto 0;
  border-radius: 50%;
  background: #595959;
  color: #fff;
  font-size: 1.33333em;
  font-family: Oswald;
  transition: all .3s ease-out;
}

.c-inspection-checkpoint-button:hover ._number {
  background: #fff;
  color: var(--point-color);
}

.c-inspection-checkpoint-button:after {
  content: "";
  position: absolute;
  top: 0;
  right: 26px;
  bottom: 0;
  display: block;
  width: .5em;
  height: .5em;
  margin: auto 0;
  border-right: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
}

/* ============================================================= *

pickup

* ============================================================= */
/* c-pickup-section
=============================== */
.c-pickup-section {
  margin-top: 10rem;
  margin-bottom: 8rem;
}

.c-pickup-section__head {
  margin-bottom: 5rem;
}

@media screen and (max-width: 767px) {
  .c-pickup-section__head {
    margin-bottom: 16vw;
  }
}

/* ============================================================= *

reservation

* ============================================================= */
/* c-reservation-modal
=============================== */
.c-reservation-modal {
  text-align: center;
  font-size: clamp(13px, 11.08673px + .5102vw, 15px);
  line-height: var(--line-height);

  --line-height: 2;
  --line-space: (var(--line-height) - 1)/2;
}

.c-reservation-modal__head {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space) + 2em);
}

.c-reservation-modal__body {
  margin-bottom: 30px;
}

.c-reservation-modal__foot {
  padding: clamp(23px, 18.21684px + 1.27551vw, 28px);
  border-radius: 4px;
  background: var(--bg-color);
}

.c-reservation-modal__foot > p {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
}

.c-reservation-modal__foot > p em {
  color: var(--key-color);
}

.c-reservation-modal-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  max-width: 650px;
  margin: 0 auto 30px;
}

@media screen and (max-width: 767px) {
  .c-reservation-modal-nav {
    grid-template-columns: repeat(1, 1fr);
  }
}

.c-reservation-modal-nav__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.66667em;
  border-radius: 4px;
  background: #505050;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: opacity .2s;
}

.c-reservation-modal-nav__button:hover {
  opacity: .7;
}

.c-reservation-modal-nav__button._members {
  background: var(--key-color);
}

.c-reservation-modal-notes {
  margin-top: calc(-1em * var(--line-space));
  margin-bottom: calc(-1em * var(--line-space));
}

.c-reservation-modal-notes a {
  text-decoration: underline;
}

.c-reservation-modal-notes a:hover {
  text-decoration: none;
}

/* ============================================================= *

Showroom

* ============================================================= */
.gmapOpen_InfoWindow {
  padding: 1em;
}

.gmapOpen_shopName {
  margin-bottom: .5em;
  font-weight: bold;
  font-size: 1.25em;
}

.gmapOpen_shopUrl {
  margin-top: .5em;
}

/* c-showroom-map
=============================== */
.c-showroom-map__content {
  padding: 1em;
}

.c-showroom-map__name {
  margin-bottom: .5em;
  color: var(--key-color);
  font-weight: bold;
  font-size: 1.25em;
}

.c-showroom-map__location {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5em;
}

.c-showroom-map__url {
  margin-top: .5em;
  color: var(--key-color);
}

/* c-showroom-list
=============================== */
.c-showroom-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 8.95408px + 5.61224vw, 52px) 30px;

  --column: 3;
}

@media screen and (max-width: 767px) {
  .c-showroom-list {
    --column: 2;
  }
}

@media screen and (max-width: 560px) {
  .c-showroom-list {
    --column: 1;
  }
}

.c-showroom-list._center {
  justify-content: center;
}

.c-showroom-list__item {
  width: calc((100% - 30px*(var(--column) - 1))/var(--column));
}

/* c-showroom-card
=============================== */
.c-showroom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--transform));
  height: calc(100% - var(--transform));
  margin-top: var(--transform);
  margin-left: var(--transform);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;

  --transform: clamp(16px, 12.17347px + 1.02041vw, 20px);
}

@media screen and (max-width: 560px) {
  .c-showroom-card {
    width: calc(100% - var(--transform) * 2);
    margin-right: var(--transform);
  }
}

.c-showroom-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 10px;
}

.c-showroom-card__image {
  position: relative;
  position: relative;
  top: calc(var(--transform) * -1);
  left: calc(var(--transform) * -1);
  z-index: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 319 / 177;
  margin-bottom: calc(var(--transform) * -1);
  border-radius: 10px;
  background: #000;
}

.c-showroom-card__image img {
  width: 100%;
  height: 100%;
  transition: all .4s ease-out;

  -o-object-fit: cover;

     object-fit: cover;
}

.c-showroom-card:hover .c-showroom-card__image img {
  opacity: .85;
  transform: scale(1.05);
}

.c-showroom-card__contents {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  padding: clamp(16px, 12.17347px + 1.02041vw, 20px);
}

.c-showroom-card__head {
  margin-bottom: .71429em;
  text-align: center;
  font-weight: bold;
  font-size: clamp(24px, 12.02339px + 1.16959vw, 28px);
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .c-showroom-card__head {
    margin-bottom: .75em;
    text-align: left;
    font-size: clamp(18px, 12.2602px + 1.53061vw, 24px);
  }
}

.c-showroom-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  line-height: var(--line-height);

  --line-height: 1.625;
  --line-space: (var(--line-height) - 1)/2;
}

.c-showroom-card__address {
  display: flex;
  align-items: flex-start;
  gap: 0 8px;
  margin-bottom: auto;
  font-size: clamp(12px, 8.17347px + 1.02041vw, 16px);
}

.c-showroom-card__address:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: clamp(20px, .86735px + 5.10204vw, 40px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: url(../img/pict/map.png) 50% 50% / 45% auto no-repeat var(--border-color);
}

.c-showroom-card__address > p {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5em;
}

@media screen and (max-width: 767px) {
  .c-showroom-card__address > p {
    flex-direction: column;
  }
}

.c-showroom-card__tel {
  display: flex;
  align-items: center;
  gap: 0 8px;
  margin-top: 11px;
  padding-top: 7px;
  border-top: 1px solid var(--border-color);
  font-weight: bold;
  font-size: clamp(14px, 8.2602px + 1.53061vw, 20px);
}

.c-showroom-card__tel:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: clamp(20px, .86735px + 5.10204vw, 40px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: url(../img/pict/tel.png) 50% 50% / 52.5% auto no-repeat var(--border-color);
}

.c-showroom-card__foot {
  margin-top: 22px;
}

/* ============================================================= *

Slider

* ============================================================= */
/* common
=============================== */
/* c-slider-arrows */
.c-slider-arrows {
  position: relative;
  display: flex;
  gap: 22px;
}

@media screen and (max-width: 767px) {
  .c-slider-arrows {
    gap: 20px;
  }
}

/* c-slider-progress */
.c-slider-progress {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--border-color);
  pointer-events: none;
}

.c-slider-progress > div {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  background: var(--key-color);
  background: var(--key-color);
  transition: width .4s ease-out;
}

/* c-pickup-slider
=============================== */
.c-pickup-slider {
  position: relative;
  width: calc(var(--main-size) + var(--padding-size) * 2);
  margin: calc((var(--main-size) - var(--content-size)) / -2) auto 0;
  padding: calc((var(--main-size) - var(--content-size)) / 2) 0;

  --unit: 1px;
  --main: 450;
  --sub: 310;
  --padding: 15;
  --content: calc((var(--main) + var(--sub) * 4)/5);
  --box: calc(var(--content) + var(--padding) * 2);
  --overflow: calc((var(--main) - var(--box)) / 2 - (var(--box) - var(--sub)) / 2);
  --surplus: calc((var(--box) - var(--sub) - var(--overflow))/2);
  --main-size: calc(var(--main) * var(--unit));
  --sub-size: calc(var(--sub) * var(--unit));
  --padding-size: calc(var(--padding) * var(--unit));
  --content-size: calc(var(--content) * var(--unit));
  --box-size: calc(var(--box) * var(--unit));
}

@media screen and (max-width: 767px) {
  .c-pickup-slider {
    --unit: (100vw / 375);
    --main: 257;
    --sub: 200;
    --padding: 10.5;
  }
}

.c-pickup-slider .slick-list {
  overflow: visible;
}

.c-pickup-slider__item {
  display: flex !important;
  align-items: center;
  width: var(--box-size);
  padding: 0 var(--padding-size);
}

.c-pickup-slider__item a {
  display: block;
  transition: all .3s ease-out;
}

.c-pickup-slider__item a:hover {
  opacity: .8;
  transform: translateY(-10px);
}

.c-pickup-slider__item img {
  border-radius: 4px;
  box-shadow: var(--base-box-shadow);
  transition: transform .4s;
  transform: scale(calc(var(--sub)/var(--content)));
}

.c-pickup-slider__item.slick-active img,
.c-pickup-slider__item.is-moving img {
  /* currentの左の要素 */
  transform: scale(calc(var(--sub)/var(--content))) translateX(calc(-100% * ((var(--overflow) + var(--surplus)) / var(--sub))));
}

.c-pickup-slider__item:is(.slick-current, .slick-cloned.is-current-moving) + .slick-active img,
.c-pickup-slider__item:is(.slick-current, .slick-cloned.is-current-moving) + .is-moving img {
  /* currentの右の要素 */
  transform: scale(calc(var(--sub)/var(--content))) translateX(calc(100% * ((var(--overflow) + var(--surplus)) / var(--sub))));
}

.c-pickup-slider__item:is(.slick-current, .slick-cloned.is-current-moving) img {
  /* current要素 */
  transform: scale(calc(var(--main)/var(--content))) !important;
}

/* c-pickup-slider-control */
.c-pickup-slider-control {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(48px, 40.34694px + 2.04082vw, 56px);
  margin-top: 4rem;

  --arrow-size: clamp(48px, 40.34694px + 2.04082vw, 56px);
}

.c-pickup-slider-control__progress {
  width: calc(100% - 15.6rem * 2);
  max-width: 752px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .c-pickup-slider-control__progress {
    width: calc(100% - var(--arrow-size)*2 - 20px*2);
    margin-left: 0;
  }
}

.c-pickup-slider-control__arrows {
  position: absolute;
  top: 0;
  right: 0;
}

/* ============================================================= *

topics

* ============================================================= */
/* c-topics-section
=============================== */
.c-topics-section {
  display: grid;
  justify-content: space-between;
  grid-template: "head body" auto "foot body" 1fr/260px 64.72727%;
  gap: 4rem;
  margin-top: 11rem;
  margin-bottom: 7.5rem;
}

@media screen and (max-width: 767px) {
  .c-topics-section {
    grid-template: "head" auto "body" auto "foot" auto / 100%;
    margin-top: calc(5rem / var(--min-tablet-percent));
    margin-bottom: calc(5rem / var(--min-tablet-percent));
  }
}

.c-topics-section__head {
  grid-area: head;
  padding-top: 84px;
}

@media screen and (max-width: 767px) {
  .c-topics-section__head {
    padding-top: 0;
  }
}

.c-topics-section__body {
  grid-area: body;
}

.c-topics-section__foot {
  display: flex;
  justify-content: center;
  grid-area: foot;
}

/* c-topics-list
=============================== */
.c-topics-list__item[data-toggle-id] {
  display: none;
}

.topics-link {
  display: flex;
  align-items: center;
  gap: 1.66667em 1.875em;
  width: 100%;
  padding: 3.125em 0 1.875em;
  border-bottom: 2px dotted #949494;
  text-decoration: none;
  font-size: clamp(12px, 8.17347px + 1.02041vw, 16px);
}

@media screen and (max-width: 767px) {
  .topics-link {
    flex-direction: column;
    align-items: flex-start;
  }
}

.topics-link__head {
  display: flex;
  align-items: center;
  gap: 1em;
}

.topics-link__label {
  flex-shrink: 0;
  width: 7.625em;
  margin-left: -.5em;
}

.topics-link__label:before {
  content: "\3010";
}

.topics-link__label:after {
  content: "\3011";
}

.topics-link__category {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 11.71429em;
  height: 2em;
  padding: 0 1em;
  border-radius: 1em;
  background: var(--point-color);
  color: #fff;
  font-size: clamp(9px, 4.21684px + 1.27551vw, 14px);
  transition: all .2s ease-out;
}

.topics-link:hover .topics-link__category {
  background: var(--key-color);
}

/* c-topics-more
=============================== */
.c-topics-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.4rem;
}

.c-topics-more__link {
  display: flex;
  align-items: center;
  outline: none;
  border: 0;
  background: none;
  color: var(--key-color);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: color .3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.c-topics-more__link:hover {
  color: var(--base-color);
}

.c-topics-more__link ._text-show {
  display: none;
}

.c-topics-more__link.is-show ._text-hide {
  display: none;
}

.c-topics-more__link.is-show ._text-show {
  display: block;
}

.c-topics-more__link > i {
  width: 10px;
  margin-left: 10px;
  transition: transform .3s;
}

.c-topics-more__link.is-show > i {
  transform: rotate(180deg);
}

.c-topics-more__link:hover > i {
  transform: translateY(2px);
}

.c-topics-more__link.is-show:hover > i {
  transform: rotate(180deg) translateY(2px);
}

/* ============================================================= *

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: var(--base-bg-color);
  /* 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(--point-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: calc(100% - 20px);
  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(--point-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: 767px) {
  .u-tablet-block {
    display: block !important;
  }
}

.u-tablet-inline-block {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .u-tablet-inline-block {
    display: inline-block !important;
  }
}

.u-tablet-flex {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .u-tablet-flex {
    display: flex !important;
  }
}

@media screen and (max-width: 767px) {
  .u-tablet-none {
    display: none !important;
  }
}

.u-mobile-block {
  display: none !important;
}

@media screen and (max-width: 560px) {
  .u-mobile-block {
    display: block !important;
  }
}

.u-mobile-inline-block {
  display: none !important;
}

@media screen and (max-width: 560px) {
  .u-mobile-inline-block {
    display: inline-block !important;
  }
}

.u-mobile-flex {
  display: none !important;
}

@media screen and (max-width: 560px) {
  .u-mobile-flex {
    display: flex !important;
  }
}

@media screen and (max-width: 560px) {
  .u-mobile-none {
    display: none !important;
  }
}

/* text align
====================================== */
.u-ta-left {
  text-align: left !important;
}

.u-ta-right {
  text-align: right !important;
}

.u-ta-center {
  text-align: center !important;
}

/* display
====================================== */
.u-d-block {
  display: block !important;
}

.u-d-none {
  display: none !important;
}

.u-d-inline {
  display: inline !important;
}

.u-d-ib {
  display: inline-block !important;
}

/* position
====================================== */
.u-pos-static {
  position: static !important;
}

.u-pos-relative {
  position: relative !important;
}

.u-pos-absolute {
  position: absolute !important;
}

.u-pos-fixed {
  position: fixed !important;
}

/* clear
====================================== */
.u-clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}

/* other
====================================== */
.u-strong {
  font-weight: bold !important;
}

.u-pointer {
  cursor: pointer;
}

.u-nowrap {
  white-space: nowrap;
}

.u-color-honda {
  color: #cc0000 !important;
}

.u-color-ciao {
  color: #0068b6 !important;
}

.u-color-mamoru {
  color: #8fc31f !important;
}

.u-rotate-90 {
  transform: rotate(90deg);
}

/* animationn
====================================== */
.u-no-transition {
  transition: none !important;
}