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

Custom Properties

* ============================================================= */
/* color
============================== */
:root {
  /* text color */
  --base-color: #333;
  /* border color */
  --border-color:#ccc;
  /* bg color */
  --bg-color:#efefef;
  /* key color */
  --key-color:  #c30000;
  /* color */
  --white:#fff;
  --gray:#565656;
  --light-gray:#b6b6b6;
}

/* size / font
============================== */
:root {
  --header-height: 76px;
  --max-width: 1920;
  --max-width-px: calc(var(--max-width) * 1px);
  --outer-frame-width:1366;
  --outer-frame-width-px: calc(var(--outer-frame-width) * 1px);
  --outer-padding: calc((83/1366) * 100cqi);
  --inner-width: 1200;
  --inner-width-px: calc(var(--inner-width) * 1px);
  --inner-padding: calc((80/1366) * 100cqi);
  --contents-width: 1040;
  --contents-width-px: calc(var(--contents-width) * 1px);
  /* radius */
  --base-border-radius:5px;
  --ovall-radius:calc(1px / 0);
  /* font */
  --line-height: 1.75;
  --leading-trim:  calc((1em - 1lh) / 2);
  --is-support-lh: initial;
  --is-support-not-lh: "";
  /* family */
  --base-font-family: "Noto Sans JP", sans-serif;
  --en-font-family: "Quicksand", "Noto Sans JP", sans-serif;
  --title-font-family: "Kiwi Maru", serif;
  /* animation */
  --loading-time: .4s;
  --button-animation:cubic-bezier(.455, .03, .515, .955);
  /* leading trim */
}

@media screen and (max-width: 767px) {
  :root {
    --header-height: 66px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --outer-padding:calc(10px + var(--slope-1px) * 15);
    --inner-padding: 25px;
  }
}

:root :where(:lang(en)) {
  --leading-trim: var(--is-support-lh, calc((1cap - 1lh) / 2)) var(--is-support-not-lh, 0px);
}

@supports not (top: 1lh) {
  :root :where(:root) {
    --is-support-lh: "";
    --is-support-not-lh: initial;
  }
}

/* utility
============================== */
:root {
  --vw: 1vw;
  --vh: 1vh;
  --slope-1px: clamp(0px, -.95663px + .2551vw, 1px);
}

:root {
  /* svg icon */
  --icon-arrow: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.90005 6L2.30005 1.4L3.70005 0L9.70005 6L3.70005 12L2.30005 10.6L6.90005 6Z" fill="%23333333"/></svg>');
  --icon-breadcrumb: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.44727 0.985352C1.54492 0.98538 1.64316 1.00536 1.71875 1.0459L6.89746 3.82422C6.97287 3.86468 7.01463 3.92021 7.01465 3.97949C7.01465 4.03878 6.97288 4.0943 6.89746 4.13477L1.64648 6.9541C1.57104 6.99458 1.47062 7.01465 1.37402 7.01465C1.27761 7.01463 1.17794 6.99467 1.10254 6.9541C1.02724 6.9137 0.985484 6.85801 0.985352 6.79883C0.985352 6.73954 1.02712 6.68402 1.10254 6.64355L6.06348 3.97949L1.1748 1.35645C1.09958 1.31606 1.05777 1.26032 1.05762 1.20117C1.05762 1.14197 1.09961 1.08635 1.1748 1.0459C1.25046 1.0053 1.34951 0.985352 1.44727 0.985352Z" fill="%23333333" stroke="%23333333" stroke-width="0.03"/></svg>');
  --icon-information: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 3.22862e-06C16.0479 3.23499e-06 12.1845 1.17298 8.89848 3.37055C5.61242 5.56813 3.05122 8.69162 1.53877 12.3461C0.0263134 16.0005 -0.369474 20.0218 0.40146 23.9014C1.17239 27.7809 3.07542 31.3446 5.86989 34.1417C8.66437 36.9388 12.2248 38.8437 16.1009 39.6156C19.977 40.3874 23.9948 39.9915 27.6461 38.4779C31.2975 36.9643 34.4184 34.4011 36.6142 31.1122C38.81 27.8234 39.9822 23.9567 39.9824 20.0011C39.984 17.3742 39.4683 14.7727 38.4647 12.3454C37.4611 9.91807 35.9892 7.71252 34.1334 5.85494C32.2775 3.99735 30.0741 2.52417 27.6489 1.51954C25.2238 0.514903 22.6246 -0.00148987 20 3.22862e-06ZM20 36.8745C16.6654 36.8745 13.4057 35.8848 10.6331 34.0306C7.86057 32.1763 5.69963 29.5408 4.42359 26.4573C3.14756 23.3739 2.81375 19.9809 3.46437 16.7075C4.115 13.4342 5.72084 10.4274 8.07882 8.06752C10.4368 5.70762 13.441 4.10063 16.7115 3.44965C19.982 2.79867 23.372 3.13297 26.4527 4.41034C29.5333 5.6877 32.1664 7.85072 34.0188 10.6259C35.8712 13.401 36.8599 16.6636 36.8596 20.0011C36.8607 22.2174 36.4253 24.4121 35.5784 26.4598C34.7315 28.5075 33.4896 30.3681 31.9238 31.9351C30.358 33.5022 28.499 34.745 26.453 35.5925C24.4071 36.44 22.2143 36.8757 20 36.8745ZM20 10.0716C19.5859 10.0716 19.1887 10.2362 18.8959 10.5293C18.6031 10.8224 18.4386 11.2198 18.4386 11.6343V21.6956C18.433 21.9043 18.4692 22.112 18.5451 22.3065C18.621 22.5009 18.7351 22.6782 18.8806 22.8278C19.0261 22.9774 19.2 23.0963 19.3922 23.1775C19.5844 23.2587 19.7908 23.3005 19.9994 23.3005C20.208 23.3005 20.4145 23.2587 20.6066 23.1775C20.7988 23.0963 20.9728 22.9774 21.1183 22.8278C21.2637 22.6782 21.3778 22.5009 21.4537 22.3065C21.5296 22.112 21.5658 21.9043 21.5602 21.6956V11.6309C21.5602 11.2166 21.3959 10.8193 21.1033 10.5263C20.8107 10.2332 20.4139 10.0685 20 10.0682V10.0716ZM20 25.1766C20.4171 25.1764 20.8248 25.3 21.1717 25.5317C21.5186 25.7635 21.789 26.0931 21.9487 26.4787C22.1084 26.8643 22.1503 27.2887 22.069 27.6982C21.9877 28.1076 21.7868 28.4837 21.4919 28.7789C21.197 29.0741 20.8212 29.2751 20.4122 29.3565C20.0031 29.4378 19.5791 29.3959 19.1938 29.2361C18.8085 29.0762 18.4792 28.8056 18.2476 28.4584C18.0161 28.1113 17.8926 27.7031 17.8928 27.2856C17.8918 27.008 17.9455 26.7329 18.0509 26.4761C18.1563 26.2193 18.3114 25.9859 18.5072 25.7892C18.7029 25.5925 18.9356 25.4364 19.1918 25.3299C19.4479 25.2235 19.7226 25.1686 20 25.1686V25.1766Z" fill="%23C30000"/></svg>');
  --icon-external: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><path fill="currentColor" fill-rule="evenodd" d="M10.1,1c-.2,0-.4,0-.5.2s-.2.3-.2.5,0,.4.2.5.3.2.5.2h1.6l-3.9,3.9c-.1.1-.2.3-.2.5,0,.2,0,.4.2.5.1.1.3.2.5.2.2,0,.4,0,.5-.2l3.9-3.9v1.6c0,.2,0,.4.2.5.1.1.3.2.5.2s.4,0,.5-.2c.1-.1.2-.3.2-.5V1h-3.9ZM2.4,3.8v8.4c0,.1,0,.2.1.3,0,0,.2.1.3.1h8.4c.1,0,.2,0,.3-.1,0,0,.1-.2.1-.3v-3.9c0-.2,0-.4.2-.5.1-.1.3-.2.5-.2s.4,0,.5.2c.1.1.2.3.2.5v3.9c0,.5-.2,1-.5,1.3-.3.3-.8.5-1.3.5H2.9c-.5,0-1-.2-1.3-.5-.3-.3-.5-.8-.5-1.3V3.8c0-.5.2-1,.5-1.3.3-.3.8-.5,1.3-.5h3.9c.2,0,.4,0,.5.2.1.1.2.3.2.5s0,.4-.2.5c-.1.1-.3.2-.5.2h-3.9c-.1,0-.2,0-.3.1,0,0-.1.2-.1.3Z"/></svg>');
}

/* data-intersection
============================== */
*:where([data-intersection]) {
  transition: opacity 1s, transform .8s;

  --intersection-y: 30px;
  --intersection-x: 0;
  --intersection-opacity: 0;
}

*[data-intersection] {
  opacity: var(--intersection-opacity);
  transform: translateX(var(--intersection-x)) translateY(var(--intersection-y));
}

*:where([data-intersection][data-intersecting=true]) {
  --intersection-y: 0;
  --intersection-x: 0;
  --intersection-opacity: 1;
}

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

Base

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

html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--white);
  font-size: 62.5%;

  touch-action: manipulation;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--base-color);
  letter-spacing: .03em;
  font-weight: 400;
  font-size: 1.6rem;
  font-family: var(--base-font-family);
  font-feature-settings: "palt";
  line-height: var(--line-height);
  -webkit-text-size-adjust: 100%;
}

body > * {
  backface-visibility: hidden;
}

:where(img, svg) {
  display: block;
  height: auto;
  max-width: 100%;
}

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

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

a {
  color: var(--base-color);
  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: var(--base-color);
  text-decoration: none;
}

button {
  cursor: pointer;
}

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

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

*[data-anchor-id] {
  scroll-margin-top: calc(var(--header-height) + 10px);
}

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

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

Loader

* ============================================================= */
.l-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url(../img/logo@2x.png) 50% 50%/300px auto no-repeat var(--bg-color);
  perspective: 10rem;
  transition: all var(--loading-time) ease-in;
}

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

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

Wrapper

* ============================================================= */
.l-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 0;
  opacity: 0;
  transition: opacity .4s ease-out;
}

@media print {
  .l-wrapper {
    min-width: var(--contents-width-px);
  }
}

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

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

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

Header

* ============================================================= */
/* header
=============================== */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: grid;
  visibility: visible;
  align-items: center;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  width: 100%;
  height: var(--header-height);
  padding-right: 2.19619%;
  padding-left: 2.19619%;
  background: transparent;
  background: var(--white);
  opacity: 1;
  transition: all .3s var(--button-animation);
  transform: translateY(0);
}

@media screen and (max-width: 767px) {
  .l-header {
    grid-template-columns: 1fr auto;
    padding-right: calc(15px + var(--slope-1px) * 15);
    padding-left: calc(15px + var(--slope-1px) * 15);
  }
}

.l-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
}

@media screen and (max-width: 767px) {
  .l-header::before {
    z-index: 1;
  }
}

@media print {
  .l-header {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}

body.is-header-menu-open .l-header {
  visibility: visible;
  opacity: 1;
}

/* l-header-logo
=============================== */
.l-header-logo {
  position: relative;
  z-index: 2;
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  max-width: 390px;
  transition: all .3s var(--button-animation);
}

@media screen and (max-width: 560px) {
  .l-header-logo {
    width: 100%;
    max-width: 204px;
  }
}

.l-header-logo a {
  position: relative;
  transition: opacity .25s;
}

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

@media (any-hover: hover) {
  .l-header-logo a:where(:hover) {
    opacity: .8;
  }
}

/* l-header-toggle
=============================== */
.l-header-toggle {
  position: relative;
  z-index: 2;
  display: flex;
  visibility: visible;
  justify-content: center;
  align-items: center;
  gap: 10px;
  gap: 6px;
  height: var(--menu-height);
  padding: 12px 15px;
  outline: none;
  border: 0;
  border: 2px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: none;
  color: inherit;
  color: var(--base-color);
  font-size: 1.5rem;
  opacity: 1;
  cursor: pointer;
  transition: all .3s var(--button-animation);
  -moz-appearance: none;
       appearance: none;

  --menu-height:37px;
}

body.is-header-menu-open .l-header-toggle {
  pointer-events: all;
}

@media (any-hover: hover) {
  .l-header-toggle:where(:hover) {
    background: var(--base-color);
    color: var(--white);
  }
}

.l-header-toggle span {
  letter-spacing: .45px;
  font-weight: 700;
  line-height: .7em;
}

.l-header-toggle > div {
  position: relative;
  width: 20px;
  transition: background .2s;
}

.l-header-toggle > div:before, .l-header-toggle > div:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: var(--ovall-radius);
  background: currentColor;
}

.l-header-toggle > div:before {
  bottom: 3.25px;
  transition: background .2s, bottom .2s .2s, transform .2s;
}

.l-header-toggle > div:after {
  top: 3.25px;
  transition: background .2s, top .2s .2s, transform .2s;
}

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

body.is-header-menu-open .l-header-toggle > div:before, body.is-header-menu-open .l-header-toggle > div:after {
  inset: 0;
}

body.is-header-menu-open .l-header-toggle > div:before {
  transition: background .2s, bottom .2s, transform .2s .2s;
  transform: rotate(30deg);
}

body.is-header-menu-open .l-header-toggle > div:after {
  transition: background .2s, top .2s, transform .2s .2s;
  transform: rotate(-30deg);
}

/* l-header-menu
============================== */
.l-header-menu {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100svh;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;

  overscroll-behavior-y: none;
}

body.is-header-menu-open .l-header-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.l-header-menu__inner {
  display: grid;
  visibility: hidden;
  grid-template-columns: 1fr 550px;
  width: 100%;
  height: 100svh;
  background: var(--bg-color);
  transition-timing-function: cubic-bezier(.65, 0, .35, 1);
  transition-duration: .4s;
  transition-property: opacity, visibility, transform;
}

@media screen and (max-width: 960px) {
  .l-header-menu__inner {
    grid-template-columns: 100%;
  }
}

body.is-header-menu-open .l-header-menu__inner {
  visibility: visible;
}

.l-header-menu__image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--header-height);
  background: var(--bg-color);
}

@media screen and (max-width: 960px) {
  .l-header-menu__image {
    display: none;
  }
}

.l-header-menu__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 83.33333%;
  height: auto;
  max-width: 1040px;
  margin: auto;
  background: url("../img/pref.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.l-header-menu__contents {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(45px + var(--slope-1px) * 5);
  overflow-y: auto;
  width: 550px;
  height: 100svh;
  max-width: var(--inner-width-px);
  padding-top: var(--header-height);
  padding-bottom: clamp(25px, -19.81636px + 5.84307vw, 60px);
  background: var(--white);

  padding-inline: clamp(25px, -19.81636px + 5.84307vw, 60px);
}

@media screen and (max-width: 960px) {
  .l-header-menu__contents {
    width: 100%;
  }
}

.l-header-menu__head {
  display: flex;
  /* 26.88px */
  margin-top: calc(20px + var(--slope-1px) * 10);
  font-weight: 500;
  font-size: calc(20px + var(--slope-1px) * 4);
  line-height: 112%;
}

.l-header-menu__body {
  display: flex;
  flex-direction: column;
  gap: calc(30px + var(--slope-1px) * 10);
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);

  padding-block: calc(35px + var(--slope-1px) * 20);
}

.l-header-menu__foot {
  display: flex;
  flex-direction: column;
  gap: calc(35px + var(--slope-1px) * 5);
  font-size: calc(16px + var(--slope-1px) * 2);
}

.l-header-menu__lead {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 13.91234px + .81169vw, 25px);
  width: -moz-fit-content;
  width: fit-content;
  height: 100%;
  font-family: var(--title-font-family);

  place-content: center;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .l-header-menu__lead {
    gap: calc(20px + var(--slope-1px) * 5);
    text-align: center;
  }
}

.l-header-menu__lead p {
  overflow: hidden;

  margin-block: var(--leading-trim);
}

.l-header-menu__lead p > span {
  font-weight: 400;
  font-size: clamp(32px, -4.52597px + 4.87013vw, 62px);
  line-height: 112%;
  transform: translateY(2em);
  animation: heroTextAnimation 1s forwards;
}

@media screen and (max-width: 767px) {
  .l-header-menu__lead p > span {
    font-size: calc(32px + var(--slope-1px) * 30);
  }
}

.l-header-menu__lead p > span:nth-child(1) {
  animation-delay: .2s;
}

.l-header-menu__lead p > span:nth-child(2) {
  animation-delay: .4s;
}

.l-header-menu__lead p > span:nth-child(3) {
  animation-delay: .6s;
}

.l-header-menu__lead p > span:nth-child(4) {
  animation-delay: .8s;
}

.l-header-menu__lead p > span:nth-child(5) {
  animation-delay: 1s;
}

.l-header-menu__lead p > span:nth-child(6) {
  animation-delay: 1.2s;
}

.l-header-menu__lead p > span:nth-child(7) {
  animation-delay: 1.4s;
}

.l-header-menu__lead p > span:nth-child(8) {
  animation-delay: 1.6s;
}

.l-header-menu__lead p > span:nth-child(9) {
  animation-delay: 1.8s;
}

.l-header-menu__lead p > span:nth-child(10) {
  animation-delay: 2s;
}

.l-header-menu__lead p > span:nth-child(11) {
  animation-delay: 2.2s;
}

.l-header-menu__lead p > span:nth-child(12) {
  animation-delay: 2.4s;
}

.l-header-menu__lead p em {
  color: var(--key-color);
  letter-spacing: -6px;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(70px, 31.03896px + 5.19481vw, 102px);
  line-height: 100%;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--key-color);
}

.l-header-menu-pref {
  display: flex;
  flex-direction: column;
  gap: calc(15px + var(--slope-1px) * 5);
}

.l-header-menu-pref__head {
  display: flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  font-size: 16px;
  line-height: 112%;
}

.l-header-menu-pref__head::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--key-color);
}

.l-header-menu-pref__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
  gap: 1em;
  font-size: 14px;
}

.l-header-menu-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.21429em;
  outline: none;
  border: 2px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: var(--_bg-color);
  color: var(--_color);
  text-align: center;
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-weight: 700;
  font-size: 14px;
  transition: scale .3s var(--button-animation), color .3s var(--button-animation), background .3s var(--button-animation);
  -moz-appearance: none;
       appearance: none;

  --_bg-color: transparent;
  --_color: var(--base-color);
  padding-block: 1.21429em;
  padding-inline: 1.42857em;
}

.l-header-menu-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 11px;
  bottom: 0;
  display: block;
  width: 10px;
  height: 10px;
  background: currentColor;

  -webkit-mask-image: var(--icon-arrow);

          mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  margin-block: auto;
}

@media screen and (max-width: 767px) {
  .l-header-menu-button {
    padding-inline: .5em;
    inline-size: min(100%, 250px);
  }
}

@media (any-hover: hover) {
  .l-header-menu-button:where(:hover) {
    --_bg-color:var(--base-color);
    --_color:var(--white);
  }
}

.l-header-menu-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: .625em;
  text-decoration: none;
  transition: color .3s ease-out;

  margin-block: var(--leading-trim);
}

.l-header-menu-nav::after {
  content: "";
  position: relative;
  width: 10px;
  height: 10px;
  aspect-ratio: 1;
  background: currentColor;

  -webkit-mask: var(--icon-arrow) no-repeat center;

          mask: var(--icon-arrow) no-repeat center;
}

@media (any-hover: hover) {
  .l-header-menu-nav:where(:hover) {
    color: var(--light-gray);
  }
}

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

Main

* ============================================================= */
/* main
=============================== */
.l-main {
  position: relative;
  flex-grow: 1;
  width: 100%;
  min-height: 0%;
  max-height: 100%;
  padding-top: var(--header-height);

  margin-inline: auto;
}

body:not([data-id=index]) .l-main {
  max-width: calc(var(--contents-width-px) + var(--inner-padding) * 2);
}

.l-main__head {
  max-width: calc(var(--contents-width-px) + var(--inner-padding)*2);

  margin-inline: auto;
  padding-inline: var(--inner-padding);
}

.l-main__body {
  margin-inline: auto;
}

body:not([data-id=index]) .l-main__body {
  max-width: calc(var(--contents-width-px) + var(--inner-padding)*2);

  padding-inline: var(--inner-padding);
}

.l-main-breadcrumbs {
  position: relative;
  padding-top: 12px;
}

.l-main-breadcrumbs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100cqi;
  background: var(--white);

  margin-inline: calc(50% - 50cqi);
}

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

Footer

* ============================================================= */
.l-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--base-color);

  padding-inline: var(--inner-padding);
  padding-block: calc(40px + var(--slope-1px) * 15);
}

.l-footer__inner {
  display: flex;
  justify-content: flex-end;
  gap: 1.875em;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .l-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
}

/* l-footer-link
=============================== */
.l-footer-link {
  display: flex;
  align-items: center;
  gap: 2.28571em;
}

@media screen and (max-width: 767px) {
  .l-footer-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.42857em;
  }
}

.l-footer-link li {
  position: relative;
  display: flex;
  align-items: center;
}

.l-footer-link li a {
  color: var(--white);
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 160%;
  transition: color .3s ease-out;
  /* 22.4px */

  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

@media (any-hover: hover) {
  .l-footer-link li a:where(:hover) {
    color: var(--light-gray);
  }
}

@media screen and (min-width: 768px) {
  .l-footer-link::after {
    content: "";
    position: relative;
    display: block;
    width: 1px;
    height: 1em;
    background: var(--white);
  }
}

/* .l-footer-copyright
============================== */
.l-footer-copyright {
  display: flex;
  flex-direction: column;
  color: var(--white);
  /* 22.4px */
  text-align: right;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  font-family: var(--en-font-family);
  line-height: 160%;
}

.l-footer-copyright p {
  display: block;
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

@media screen and (max-width: 767px) {
  .l-footer-copyright {
    width: 100%;
    text-align: center;
  }
}

.l-footer-copyright .CMN-RECYCLE a {
  color: var(--light-gray);
  text-decoration: underline;
}

.l-footer-copyright .CMN-RECYCLE a:hover {
  text-decoration: none;
}

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

Navigation

* ============================================================= */
/* breadcrumbs
=============================== */
.c-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1em;
  width: 100%;
  max-width: calc(var(--inner-width-px) + var(--inner-padding) * 2);
  font-weight: 350;
  font-size: 13px;
  line-height: 150%;

  margin-block: var(--leading-trim);
  margin-inline: auto;
}

.c-breadcrumbs > li {
  display: flex;
  align-items: center;
}

.c-breadcrumbs > li + li:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 .53846em;
  background: var(--icon-breadcrumb);
  background-position: center;
  background-repeat: no-repeat;
}

.c-breadcrumbs > li a {
  text-decoration: underline;
  transition: all .2s ease-out;

  text-underline-offset: .25em;
}

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

/* c-button
=============================== */
.c-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(60px + var(--slope-1px) * 10);
  outline: none;
  border: 2px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: var(--_bg-color);
  color: var(--_color);
  text-align: center;
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px) * 2);
  transition: scale .3s var(--button-animation), color .3s var(--button-animation), background .3s var(--button-animation);
  -moz-appearance: none;
       appearance: none;

  --_bg-color: transparent;
  --_color: var(--base-color);
  inline-size: min(100%, 350px);
  padding-block: 1.55556em;
  padding-inline: 1em;
}

.c-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 1em;
  bottom: 0;
  display: block;
  width: .66667em;
  height: .66667em;
  background: currentColor;

  -webkit-mask-image: var(--icon-arrow);

          mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 1.2rem;
          mask-size: 1.2rem;
  margin-block: auto;
}

@media screen and (max-width: 767px) {
  .c-button {
    padding-inline: .5em;
    inline-size: min(100%, 250px);
  }
}

@media (any-hover: hover) {
  .c-button:where(:hover) {
    --_bg-color:var(--base-color);
    --_color:var(--white);
  }
}

/* container */
.c-button-container {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 1em;
  justify-items: center;
  width: 100%;
  margin-top: calc(20px + var(--slope-1px) * 12);

  place-content: center;
}

/* c-banner
=============================== */
.c-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 1rem 2rem;
  border: 1px solid var(--border-color);
  border-radius: var(--base-border-radius);
  background: var(--white);
  transition: scale .3s var(--button-animation), opacity .3s var(--button-animation);
}

.c-banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (any-hover: hover) {
  .c-banner:where(:hover) {
    opacity: .6;

    scale: .99;
  }
}

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

Common - Tab

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

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

/* c-tab
============================== */
.c-tab {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 2rem;
}

@media screen and (max-width: 1024px) {
  .c-tab {
    flex-wrap: wrap;
  }
}

.c-tab__item {
  width: 190px;
  max-width: calc(50% - 6px);
}

@media screen and (max-width: 1024px) {
  .c-tab__item {
    width: 344px;
  }
}

.c-tab__button {
  position: relative;
  display: flex;
  justify-content: stretch;
  justify-content: center;
  align-items: stretch;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-height: 3.52941em;
  padding: 8px;
  outline: 0;
  border: 1px solid var(--base-color);
  border-radius: 5em;
  background: transparent;
  color: var(--base-color);
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 1.3;
  transition: all .2s;
  -moz-appearance: none;
       appearance: none;
}

.c-tab__button:first-child:last-child {
  height: 100%;
}

.c-tab__button:not(.is-current):hover {
  opacity: .7;
  cursor: pointer;
}

.c-tab__button.is-current {
  border-color: var(--base-color);
  background: var(--base-color);
  color: #fff;
}

.c-tab__button span {
  word-break: keep-all;
  overflow-wrap: anywhere;

  margin-block: var(--leading-trim);
}

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

Section

* ============================================================= */
.c-section:first-child {
  margin-top: calc(40px + var(--slope-1px) * 24);
}

.c-section:not(:last-child) {
  margin-bottom: calc(55px + var(--slope-1px) * 45);
}

.c-section + .c-section {
  margin-bottom: calc(55px + var(--slope-1px) * 45);
}

.c-section:last-child {
  margin-bottom: calc(55px + var(--slope-1px) * 45);
}

.c-section._no-bottom {
  margin-bottom: 0;
}

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

.c-section._border-top {
  padding-top: calc(40px + var(--slope-1px) * 30);
  border-top: 1px solid var(--border-color);
}

.c-section + .c-section._border-top {
  margin-top: calc(40px + var(--slope-1px) * 30);
}

.c-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(28px + var(--slope-1px) * 12);
}

.c-section__head .c-section-title {
  margin-block: var(--leading-trim);
}

.c-section__head._no-bottom {
  margin-bottom: 0;
}

.c-section__head._no-top {
  margin-top: 0;
}

.c-section__foot {
  display: flex;
  justify-content: center;
  margin-top: calc(40px + var(--slope-1px) * 10);
}

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

Table

* ============================================================= */
/* profile table
=============================== */
.c-profile-table {
  width: 100%;
  border-collapse: collapse;
}

.c-profile-table tr:first-child {
  border-top: 1px solid var(--border-color);
}

.c-profile-table th, .c-profile-table td {
  padding: 1.28125em 0;
  border-bottom: 1px solid var(--border-color);
  line-height: 140%;
}

@media screen and (max-width: 767px) {
  .c-profile-table th, .c-profile-table td {
    border-bottom: 0;

    padding-block: 0;
  }
}

.c-profile-table th {
  width: 12.125em;
  padding-right: 1em;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .c-profile-table th {
    width: 100%;
    padding-right: 0;
  }
}

.c-profile-table td {
  width: calc(100% - 12.125em);
}

@media screen and (max-width: 767px) {
  .c-profile-table td {
    width: 100%;
    word-break: break-all;
  }
}

@media screen and (max-width: 767px) {
  .c-profile-table {
    display: block;
  }
  .c-profile-table:is(tbody, th, td) {
    display: block;
  }
  .c-profile-table tr {
    display: grid;
    grid-template-columns: 100%;
    gap: .25em;
    padding: 1.28125em 0;
    border-bottom: 1px solid var(--border-color);
  }
}

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

Text

* ============================================================= */
/* lead
=============================== */
.c-lead {
  text-align: left;
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 1.71429;
}

.c-lead > p {
  margin-block: var(--leadimg-trim);
}

.c-lead > p._has-wbr {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.c-lead > p em {
  font-weight: bold;
}

.c-lead > p small {
  font-size: .77778em;
}

.c-lead > p + p {
  margin-top: 1em;
}

/* text
=============================== */
.c-text {
  text-align: left;
  font-weight: 500;
  line-height: 1.5;
}

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

.c-text._left {
  text-align: left;
}

.c-text._has-wbr {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.c-text em {
  color: var(--key-color);
}

.c-text small {
  font-size: .77778em;
}

.c-text + p {
  margin-top: 1em;
}

/* notes
=============================== */
.c-notes {
  margin-top: 1.5em;
  font-size: 1.3rem;
}

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

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

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

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

.c-notes._number > li:before {
  content: "※" attr(data-number);
}

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

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

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

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

.c-notes > li._highlight {
  color: #e71d0f;
  font-weight: bold;
}

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

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

.c-notes > li._number:before {
  content: "※" attr(data-number);
  margin-right: .5em;
}

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

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

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

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

Title

* ============================================================= */
/* c-page-title
============================== */
.c-page-title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding-block: calc(24px + var(--slope-1px) * 24);
}

.c-page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100cqi;
  background: var(--bg-color);

  margin-inline: calc(50% - 50cqi);
}

.c-page-title::after {
  content: "";
  position: absolute;
  top: 0;
  left: 59.71154%;
  z-index: -1;
  display: block;
  width: 69px;
  height: 69px;
  background: var(--icon-circle);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);

  --icon-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70" fill="none"><circle cx="35.4253" cy="35.4252" r="33.5" stroke="white" stroke-width="2"/></svg>');
}

.c-page-title__category {
  color: var(--key-color);
  text-transform: uppercase;
  /* 13.44px */
  letter-spacing: .36px;
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  font-family: var(--en-font-family);
  line-height: 112%;
}

.c-page-title__title {
  position: relative;
  display: block;
  width: 100%;
  word-break: keep-all;
  font-weight: 500;
  font-size: calc(28px + var(--slope-1px) * 14);
  font-family: var(--title-font-family);
  line-height: 112%;

  margin-block: var(--leading-trim);
}

.c-page-title__title::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: -21px;
  z-index: -1;
  display: block;
  width: 76.633px;
  height: 62.372px;
  background: var(--icon-circle);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(-100%);

  --icon-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="78" height="63" viewBox="0 0 78 63" fill="none"><circle cx="48.3469" cy="29.1219" r="28" stroke="white" stroke-width="2"/><circle cx="17.714" cy="45.4939" r="16" stroke="white" stroke-width="2"/></svg>');
}

.c-page-title__title::after {
  content: "";
  position: absolute;
  top: 14px;
  right: -100px;
  z-index: -1;
  display: block;
  width: 119.441px;
  height: 118.133px;
  background: var(--icon-circle);
  background-size: contain;
  background-repeat: no-repeat;

  --icon-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="121" height="120" viewBox="0 0 121 120" fill="none"><circle cx="77.8606" cy="76.5531" r="41.5" stroke="white" stroke-width="2"/><circle cx="17.9197" cy="17.9197" r="16" stroke="white" stroke-width="2"/></svg>');
}

/* c-section-title
============================== */
.c-section-title {
  position: relative;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-weight: 700;
  font-size: calc(24px + var(--slope-1px) * 8);
  font-family: var(--en-font-family);
  line-height: 1.4;
}

.c-section-title._has-wbr {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.c-section-title > small {
  display: block;
  font-size: calc(20px + var(--slope-1px) * 4);
}

/* c-point-title
============================== */
.c-point-title {
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-bottom: calc(1em + var(--leading-trim));
  border-bottom: 1px solid var(--light-gray);
  font-weight: 700;
  font-size: 2rem;

  margin-block: var(--leading-trim) calc(var(--leading-trim) + 1.5em);
}

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

Blog

* ============================================================= */
.c-blog-container__table {
  width: 100%;
}

.c-blog-container__td > article + article {
  margin-top: calc(30px + var(--slope-1px) * 10);
}

.c-blog-container img {
  display: inline;
}

.c-blog-container article {
  width: 100%;
  padding: calc(40px + var(--slope-1px) * 20) clamp(40px, -86.88172px + 10.75269vw, 60px);
  border: 1px solid var(--light-gray);
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  .c-blog-container article {
    padding: calc(30px + var(--slope-1px) * 30) calc(20px + var(--slope-1px) * 20);
  }
}

.c-blog-container article + .blog__paging {
  margin-top: 2.4rem;
}

.c-blog-container .blog__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .66667em;
  width: 100%;
  padding-bottom: calc(2rem + var(--leading-trim));
  border-bottom: 1px solid var(--light-gray);

  margin-block: var(--leading-trim) calc(var(--leading-trim) + 3rem);
}

@media screen and (max-width: 767px) {
  .c-blog-container .blog__header {
    flex-direction: column;
    align-items: flex-start;
    gap: .66667em;
  }
}

.c-blog-container .blog__header[id] {
  scroll-margin-top: calc(var(--header-height) + calc(40px + var(--slope-1px) * 30) + 1.5rem);
}

.c-blog-container .blog__title {
  font-weight: 700;
  font-style: normal;
  font-size: 2rem;
  line-height: 175%;
  /* 35px */
}

.c-blog-container .blog__date {
  color: var(--gray);
  font-weight: 700;
  font-size: calc(13px + var(--slope-1px) * 5);
  font-family: var(--en-font-family);
}

.c-blog-container .blog__body {
  word-break: break-all;
}

.c-blog-container .blog__body img {
  height: auto;
  max-width: 1180px;
}

@media screen and (max-width: 767px) {
  .c-blog-container .blog__body img {
    max-width: 100%;
  }
}

.c-blog-container .blog__body strong {
  font-weight: bold;
}

.c-blog-container .blog__body em {
  font-style: italic;
}

.c-blog-container .blog__foot {
  margin-top: calc(24px + var(--slope-1px) * 16);
  padding-top: 2.4rem;
  border-top: 1px solid var(--border-color);
}

.c-blog-container .blog__paging {
  text-align: right;
  font-size: calc(13px + var(--slope-1px) * 1);
}

.c-blog-container .blog__paging + article {
  margin-top: 2.4rem;
}

/* c-blog-paging
============================== */
.c-blog-paging {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--contents-max-width);
  font-size: calc(13px + var(--slope-1px) * 1);

  margin-block: 1em;
  margin-inline: auto;
}

.c-blog-paging:not(:last-child) {
  margin-bottom: 1em;
}

.c-blog-paging:not(:first-child) {
  margin-top: 1em;
}

.c-blog-paging__current {
  margin-right: 1em;
}

.c-blog-paging__nav {
  display: flex;
  align-items: center;
  gap: .5em;
}

.c-blog-paging__nav > li {
  display: flex;
  align-items: center;
  gap: .5em;
}

.c-blog-paging__nav > li + li:before {
  content: "\ff5c";
}

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

Modal

* ============================================================= */
/* l-modal
=============================== */
.l-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100005;
  display: flex;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: calc(var(--vh) * 5) var(--inner-padding);
  background: color-mix(in srgb, var(--base-color) 50%, transparent);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

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

.l-modal__inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 860px;
  max-height: -moz-fit-content;
  max-height: fit-content;
  margin: auto;
  opacity: 0;
  transition: all .6s .6s;
}

.l-modal.is-show .l-modal__inner {
  opacity: 1;
}

.l-modal__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  opacity: 0;
}

.l-modal__contents {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  width: 100%;
  max-height: calc(var(--vh) * 90);
  padding: calc(35px + var(--slope-1px) * 20) calc(20px + var(--slope-1px) * 50) calc(30px + var(--slope-1px) * 15);
  border-radius: var(--base-border-radius);
  background: #fff;
}

.l-modal__close {
  position: absolute;
  top: calc(25px + var(--slope-1px) * 15);
  right: calc(20px + var(--slope-1px) * 20);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 44px;
  height: 44px;
  outline: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  background: var(--icon-close-white) 50% 50%/40% 40% no-repeat var(--base-color);
  color: #fff;
  line-height: 1;
  transition: all .3s ease-out;
  -moz-appearance: none;
       appearance: none;
}

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

.l-modal__close span {
  display: none;
}

/* l-modal-contents
============================== */
.l-modal-contents__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: calc(25px + var(--slope-1px) * 10);
  border-bottom: 1px solid var(--border-color);
  font-weight: 500;
  font-size: calc(20px + var(--slope-1px) * 8);

  padding-block: calc(var(--padding-block) + var(--leading-trim)) calc(var(--padding-block) + 12px + var(--leading-trim));
  --padding-block: 10px;
}

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

Scroll Bar

* ============================================================= */
[data-simplebar] {
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.simplebar-wrapper {
  overflow: hidden;
  width: inherit;
  height: inherit;
  max-width: inherit;
  max-height: inherit;
}

.simplebar-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  width: auto !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  direction: inherit;
}

.simplebar-offset {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-overflow-scrolling: touch;
  box-sizing: inherit !important;
  margin: 0;
  padding: 0;
  resize: none !important;
  direction: inherit !important;
}

.simplebar-content-wrapper {
  position: relative;
  display: block;
  box-sizing: border-box !important;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  direction: inherit;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.simplebar-content:before,
.simplebar-content:after {
  content: ' ';
  display: table;
}

.simplebar-placeholder {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}

.simplebar-height-auto-observer-wrapper {
  position: relative;
  z-index: -1;
  float: left;
  flex-grow: inherit;
  flex-shrink: 0;
  flex-basis: 0;
  overflow: hidden;
  box-sizing: inherit !important;
  width: 100%;
  height: 100%;
  max-width: 1px;
  max-height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.simplebar-height-auto-observer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  box-sizing: inherit;
  width: 1000%;
  height: 1000%;
  min-width: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}

.simplebar-track {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  background: rgba(200, 200, 200, .3);
  /* pointer-events: none; */
}

[data-simplebar].simplebar-dragging .simplebar-content {
  pointer-events: none;
  -moz-user-select: none;
       user-select: none;
}

[data-simplebar].simplebar-dragging .simplebar-track {
  pointer-events: all;
}

.simplebar-scrollbar {
  position: absolute;
  right: 0;
  left: 0;
  min-height: 10px;
}

.simplebar-scrollbar:before {
  content: '';
  position: absolute;
  right: 2px;
  left: 2px;
  border-radius: 12px;
  background: var(--key-color);
  transition: opacity 0s linear;
}

.simplebar-track.simplebar-vertical {
  top: 0;
  width: 11px;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  top: 2px;
  bottom: 2px;
}

.simplebar-track.simplebar-horizontal {
  bottom: 3px;
  left: 0;
  overflow: visible;
  width: 100%;
  height: 6px;
  max-width: 952px;
  margin: 0 auto;
}

.simplebar-track.simplebar-horizontal.is-fixed {
  position: fixed;
  top: auto;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  top: auto;
  right: auto;
  bottom: -3px;
  left: 0;
  width: auto;
  height: 12px;
  min-width: 10px;
  min-height: 0;
  margin: auto 0;
  border-radius: 12px;
  background: var(--key-color);
}

/* Rtl support */
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
  right: auto;
  left: 0;
}

.hs-dummy-scrollbar-size {
  position: fixed;
  visibility: hidden;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 500px;
  height: 500px;
  opacity: 0;
  direction: rtl;
}

.simplebar-hide-scrollbar {
  position: fixed;
  left: 0;
  visibility: hidden;
  overflow-y: scroll;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

Utility

* ============================================================= */
/* Media Query Setting
====================================== */
.u-tablet-block {
  display: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.u-pointer {
  cursor: pointer;
}

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

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

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

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

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

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

/* u-wide-width
============================== */
.u-wide-width {
  position: relative;
  width: 100cqi;

  margin-inline: calc(50% - 50cqi);
}