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

Reset

* ============================================================= */
/* Reset
----------------------------------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font: inherit;
  font-size: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

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

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

Layout

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

Custom Properties

* ============================================================= */
:root {
  /* ========================================
  color
  ======================================== */
  /* text color */
  --base-color: #333;
  /* border color */
  --border-color:#ccc;
  /* bg color */
  --bg-dark-color: #dbdbdb;
  --bg-color:#f1f1f1;
  --key-color: #92d0ff;
  --point-color: #ffdd7e;
  --red: #f27a7a;
  --blue: #6592ea;
  --green: #2db3b4;
  --light-blue: #92d0ff;
  --yellow: var(--point-color);
  --pink:#f284ab;
  --sales-color: var(--blue);
  --service-color: var(--green);
  --ca-color: var(--red);
  /* color */
  --white:#fff;
  --black: #333;
  --gray:#878787;
  --light-gray:#aaa;
  /* ========================================
  layouts
  ======================================== */
  --header-height: 90px;
  --sticky-height: 73px;
  --contents-width: 1080;
  --contents-width-px: calc(var(--contents-width) * 1px);
  --inner-width: 1176;
  --inner-width-px: calc(var(--inner-width) * 1px);
  --outer-frame-width:1366;
  --outer-frame-width-px: calc(var(--outer-frame-width) * 1px);
  --max-frane-width:1920;
  --max-frame-width-px: calc(var(--max-frane-width) * 1px);
  --inner-padding: clamp(16px, -6.23325px + 3.97022vw, 48px);
  --outer-padding: clamp(0px, -140.49296px + 17.60563vw, 100px);
  --inner-overflow: calc(var(--vw) * 50 - var(--inner-width-px) * .5);
  /* utility */
  --vw: 1vw;
  --vh: 1vh;
  --slope-1px: clamp(0px, -.95663px + .2551vw, 1px);
  --base-border-radius: calc(10px + var(--slope-1px) * 10);
  --ovall-radius:calc(1px / 0);
  /* ========================================
  font
  ======================================== */
  /* size */
  --line-height: 1.65;
  --leading-trim:  calc((1em - 1lh) / 2);
  --is-support-lh: initial;
  --is-support-not-lh: "";
  /* z-index */
  --header-z-index: 1000;
  --navigation-z-index: 200;
  --modal-z-index: 1001;
  --local-z-index: 0;
  /* family */
  --base-font-family: "Noto Sans JP", sans-serif;
  --en-font-family: "Montserrat", sans-serif;
  /* animation */
  --animation:cubic-bezier(.455, .03, .515, .955);
  interpolate-size: allow-keywords;
  /* svg icon */
  --icon-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'><path d='M12.4815 6.74209H1.02729C0.736223 6.74209 0.492242 6.64364 0.295345 6.44674C0.0984484 6.24985 0 6.00586 0 5.7148C0 5.42374 0.0984484 5.17975 0.295345 4.98286C0.492242 4.78596 0.736223 4.68751 1.02729 4.68751H12.4815L9.55377 1.75974C9.34832 1.55429 9.24987 1.31459 9.25843 1.04064C9.26699 0.766699 9.36544 0.526998 9.55377 0.321541C9.75923 0.116083 10.0032 0.00907437 10.2857 0.000513644C10.5682 -0.00804709 10.8122 0.0904013 11.0177 0.295859L15.7175 4.9957C15.8202 5.09843 15.893 5.20972 15.9358 5.32957C15.9786 5.44942 16 5.57783 16 5.7148C16 5.85177 15.9786 5.98018 15.9358 6.10003C15.893 6.21988 15.8202 6.33117 15.7175 6.4339L11.0177 11.1337C10.8122 11.3392 10.5682 11.4376 10.2857 11.4291C10.0032 11.4205 9.75923 11.3135 9.55377 11.1081C9.36544 10.9026 9.26699 10.6629 9.25843 10.389C9.24987 10.115 9.34832 9.87531 9.55377 9.66986L12.4815 6.74209Z' fill='currentColor'/></svg>");
  --icon-arrow-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'><path d='M12.4815 6.74209H1.02729C0.736223 6.74209 0.492242 6.64364 0.295345 6.44674C0.0984484 6.24985 0 6.00586 0 5.7148C0 5.42374 0.0984484 5.17975 0.295345 4.98286C0.492242 4.78596 0.736223 4.68751 1.02729 4.68751H12.4815L9.55377 1.75974C9.34832 1.55429 9.24987 1.31459 9.25843 1.04064C9.26699 0.766699 9.36544 0.526998 9.55377 0.321541C9.75923 0.116083 10.0032 0.00907437 10.2857 0.000513644C10.5682 -0.00804709 10.8122 0.0904013 11.0177 0.295859L15.7175 4.9957C15.8202 5.09843 15.893 5.20972 15.9358 5.32957C15.9786 5.44942 16 5.57783 16 5.7148C16 5.85177 15.9786 5.98018 15.9358 6.10003C15.893 6.21988 15.8202 6.33117 15.7175 6.4339L11.0177 11.1337C10.8122 11.3392 10.5682 11.4376 10.2857 11.4291C10.0032 11.4205 9.75923 11.3135 9.55377 11.1081C9.36544 10.9026 9.26699 10.6629 9.25843 10.389C9.24987 10.115 9.34832 9.87531 9.55377 9.66986L12.4815 6.74209Z' fill='white'/></svg>");
  --icon-blank: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='currentColor' d='M1.3,12c-.4,0-.7-.1-.9-.4-.3-.3-.4-.6-.4-.9V1.3c0-.4.1-.7.4-.9.3-.3.6-.4.9-.4h4.7v1.3H1.3v9.3h9.3v-4.7h1.3v4.7c0,.4-.1.7-.4.9s-.6.4-.9.4H1.3ZM4.5,8.5l-.9-.9L9.7,1.3h-2.4V0h4.7v4.7h-1.3v-2.4l-6.2,6.2Z'/></svg>");
  --icon-section: url("data:image/svg+xml;utf8,<svg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='6' cy='6' r='6' fill='%236592EA'/><circle cx='21' cy='6' r='6' fill='%232DB3B4'/><circle cx='6' cy='21' r='6' fill='%23F27A7A'/></svg>");
  --icon-disc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'><rect y='2' width='8' height='8' rx='4' fill='%2392D0FF'/></svg>");
  --icon-q: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='15' viewBox='0 0 13 15' fill='none'><path fill='currentColor' d='M11.4,10.4c.5-1,.8-2.2.8-3.6s-.3-2.6-.8-3.6c-.5-1-1.3-1.8-2.2-2.3-.9-.5-2-.8-3.1-.8s-2.2.3-3.1.8c-.9.5-1.7,1.3-2.2,2.3s-.8,2.2-.8,3.6.3,2.6.8,3.6,1.3,1.8,2.2,2.3c.9.5,2,.8,3.1.8s1.6-.1,2.3-.4l1.1,1.3h2.6l-1.9-2.4c.5-.4.9-1,1.3-1.6ZM4.4,10.5c-.5-.3-.9-.8-1.2-1.4-.3-.6-.4-1.4-.4-2.3s.1-1.7.4-2.3c.3-.6.7-1.1,1.2-1.4.5-.3,1.1-.5,1.8-.5s1.3.2,1.8.5.9.8,1.2,1.4c.3.6.4,1.4.4,2.3s-.1,1.7-.4,2.3c-.1.3-.3.6-.5.9l-1-1.2h-2.4l1.7,2.2c-.2,0-.5,0-.7,0-.7,0-1.3-.2-1.8-.5Z'/></svg>");
  --icon-angle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8.4' height='14.7' viewBox='0 0 8.4 14.7'><path fill='%2392d0ff' d='M8.1,8.1c.4-.4.4-1,0-1.4L1.7.3C1.3,0,.7,0,.3.3,0,.7,0,1.3.3,1.7l5.7,5.7L.3,13c-.4.4-.4,1,0,1.4.4.4,1,.4,1.4,0l6.4-6.4Z'/></svg>");
}

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

@media screen and (max-width: 560px) {
  :root {
    --sticky-height: 52px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --base-border-radius:10px;
  }
}

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

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

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

Base

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

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

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

body:not(.is-loaded) {
  overflow: hidden;
}

body[data-id=sales] {
  --_staff-color: var(--sales-color);
}

body[data-id=service] {
  --_staff-color: var(--service-color);
}

body[data-id=ca] {
  --_staff-color: var(--ca-color);
}

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;
}

details summary::-webkit-details-marker {
  display: none;
}

a {
  color: var(--base-color);
  text-decoration: underline;

  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

a:hover {
  text-decoration: none;
}

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

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

a.js-tel._inactive {
  color: var(--base-color);
  text-decoration: none;
}

button {
  cursor: pointer;
}

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

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

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

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

*[data-intersection][data-intersection] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .8s ease-out .3s, hidden .8s ease-out .3s;
  will-change: opacity, visibility;
}

*[data-intersection][data-intersection][data-intersecting=true] {
  visibility: visible;
  opacity: 1;
  transition: opacity .8s ease-out .3s, hidden .8s ease-out .3s;
}

*[data-intersection][data-intersection-fade-up] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s ease-out .5s, transform .8s cubic-bezier(.215, .61, .355, 1) .5s, visibility .4s ease-out .5s;
  transform: translateY(30px);
  will-change: opacity, transform, visibility;
}

*[data-intersection][data-intersection-fade-up][data-intersecting=true] {
  visibility: visible;
  opacity: 1;
  transition: opacity .4s ease-out .5s, transform .8s cubic-bezier(.215, .61, .355, 1) .5s, visibility .4s ease-out .5s;
  transform: translateY(0);
}

.js-char-intersection {
  display: flex;
  justify-content: center;
}

.js-char-intersection .js-cahr {
  display: inline-block;
  opacity: 0;
}

[data-intersecting=true].js-char-intersection .js-cahr {
  animation: text_anime_on .8s ease-in-out forwards .2s;
}

@keyframes text_anime_on {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  70% {
    opacity: .5;
    transform: translate3d(0, -10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

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

Loader

* ============================================================= */
.l-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  padding: calc(16px + var(--slope-1px) * 4);
  background: var(--white);
}

body.is-loaded .l-loader {
  opacity: 0;
  transition: opacity .2s ease-in;
  pointer-events: none;
}

.p-index-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  padding: calc(16px + var(--slope-1px) * 4);
  background: var(--white);
  transition: background .4s ease-in;

  --_hero-padding: calc(16px + var(--slope-1px) * 4);
}

body.is-loaded .p-index-loader {
  background: transparent;
  pointer-events: none;
}

.p-index-loader__ovarlay {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 18px;
  border-radius: calc(10px + var(--slope-1px) * 10);
  background: var(--key-color);
  transition: background .6s var(--animation);
}

body.is-loaded .p-index-loader__ovarlay {
  background: transparent;
  pointer-events: none;
}

.p-index-loader__inner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--_hero-padding);
  -moz-column-gap: 20px;
       column-gap: 20px;

  --_hero-padding: calc(16px + var(--slope-1px) * 4);
}

body.is-zindex .p-index-loader__inner {
  z-index: 2;
}

.p-index-loader__logo {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 50%;
  z-index: 10002;
  display: block;
  width: 360px;
  max-width: 100%;
  aspect-ratio: 360 / 56;
  margin: 0;
  opacity: 0;
  transition: top .6s var(--animation), left .6s var(--animation), transform .6s var(--animation), opacity .2s var(--animation), width .6s var(--animation);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform, opacity, width, top, left;

  --_hero-padding: calc(16px + var(--slope-1px) * 4);
}

.p-index-loader__logo > svg {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .p-index-loader__logo {
    width: 185px;
  }
}

@media screen and (max-height: 400px) {
  body.is-moving .p-index-loader__logo {
    top: inherit;
    left: inherit;
    transform: inherit;
  }
}

body.is-loading .p-index-loader__logo {
  opacity: 1;
}

body.is-moving .p-index-loader__logo {
  top: calc(var(--_hero-padding) + calc(16px + var(--slope-1px) * 14));
  left: calc(var(--_hero-padding) + calc(16px + var(--slope-1px) * 14));
  width: 248px;
  transform: translate(0, 0);
}

@media screen and (max-width: 768px) {
  body.is-moving .p-index-loader__logo {
    width: 185px;
  }
}

body.is-loaded .p-index-loader__logo {
  pointer-events: none;
}

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

Wrapper

* ============================================================= */
.l-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 0;

  margin-inline: auto;
}

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

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

body[data-id="404"] .l-wrapper {
  overflow-y: hidden;
}

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

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

Header

* ============================================================= */
/* header
=============================== */
.l-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  height: var(--header-height);
  font-size: calc(11px + var(--slope-1px) * 1);
  transition: color .3s var(--animation);
  pointer-events: none;

  margin-inline: auto;
  container: header / inline-size;
}

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

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

.l-header__inner {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 20px;
  width: 100%;
  padding-right: 1.90337%;
  padding-left: 1.90337%;

  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .l-header__inner {
    padding-right: 0;
    padding-left: 16px;
  }
}

/* l-header-logo
=============================== */
.l-header-logo {
  position: relative;
  z-index: 999;
  flex-grow: 0;
  flex-shrink: 1;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 231px;
  opacity: 1;
  transition: visibility .3s var(--animation), opacity .3s var(--animation);
  pointer-events: all;
}

.l-header-logo.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media screen and (min-width: 769px) {
  .l-header-logo {
    height: 100%;
    max-height: 60px;
  }
}

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

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

.l-header-logo img {
  width: 100%;
  height: 100%;
  min-width: 0%;
  -o-object-fit: contain;
     object-fit: contain;
}

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

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

/* l-header-toggle
=============================== */
.l-header-toggle {
  position: relative;
  z-index: 1002;
  display: flex;
  align-items: center;
  width: 100px;
  height: 100px;
  aspect-ratio: 1;
  outline: none;
  border: 0;
  border-radius: 0 0 0 calc(10px + var(--slope-1px) * 10);
  background: var(--base-color);
  color: var(--white);
  cursor: pointer;
  transition: all .5s cubic-bezier(.55, .05, .22, .99);
  pointer-events: all;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  --_bar-gap: calc(5px + var(--slope-1px) * 2.5);
  --_bar-width: calc(34px + var(--slope-1px) * 12);
  --_bar-stroke: calc(3px + var(--slope-1px) * 1);
}

body.is-loaded .l-header-toggle {
  z-index: 10006;
}

@media screen and (max-width: 768px) {
  .l-header-toggle {
    width: var(--header-height);
    height: var(--header-height);
  }
}

.l-header-toggle > div {
  position: absolute;
  inset: 0 0 1em 0;
  z-index: 1;
  display: block;
  width: var(--_bar-width);
  height: var(--_bar-stroke);
  margin: auto;
  background: transparent;
}

.l-header-toggle > div:before, .l-header-toggle > div::after {
  content: "";
  position: absolute;
  display: block;
  width: var(--_bar-width);
  height: var(--_bar-stroke);
  background: var(--white);
}

.l-header-toggle > div:before {
  top: calc(var(--_bar-gap) * -1.5);
  transition: background .2s, top .2s .2s, transform .2s;
}

.l-header-toggle > div:after {
  bottom: calc(var(--_bar-gap) * -.5);
  transition: background .2s, bottom .2s .2s, transform .2s;
}

.l-header-toggle > div > span {
  position: absolute;
  top: calc(var(--_bar-gap) * 3.25);
  right: 0;
  left: 0;
  left: -.125em;
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  font-weight: 800;
  font-size: calc(12px + var(--slope-1px) * 4);
  font-family: var(--en-font-family);
  line-height: 1;

  margin-inline: auto;
}

.l-header-toggle > div > span:after {
  content: "CLOSE";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--header-height);
  background: var(--base-color);
  color: #fff;
  opacity: 0;
  transition: all .3s;
  transform: translateX(-50%) translateY(-50%);
}

body.is-menu-nav-open .l-header-toggle > div {
  inset: 0 0 1em 0;
  background: transparent;
}

body.is-menu-nav-open .l-header-toggle > div:before {
  top: 0;
  transition: top .2s, transform .2s .2s;
  transform: rotate(45deg);
}

body.is-menu-nav-open .l-header-toggle > div:after {
  bottom: 0;
  transition: bottom .2s, transform .2s .2s;
  transform: rotate(-45deg);
}

body.is-menu-nav-open .l-header-toggle > div span::after {
  background: var(--base-color);
  color: var(--white);
  opacity: 1;
  transform: translateX(-50%) translateY(0%);
}

/* l-header-menu
============================== */
.l-header-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10005;
  visibility: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100svh;
  padding: calc(16px + var(--slope-1px) * 4);
  background: #fff;
  color: var(--base-color);
  opacity: 0;
  transition: visibility .3s var(--animation), opacity .3s var(--animation);
  pointer-events: none;

  overscroll-behavior-y: none;
}

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

.l-header-menu__body {
  grid-area: body;
}

.l-header-menu__logo {
  grid-area: logo;
}

@media screen and (max-width: 768px) {
  .l-header-menu__logo {
    max-width: 185px;
  }
}

.l-header-menu__inner {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas: "logo" "body";
  gap: 40px;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding: 48px var(--inner-padding) calc(var(--sticky-height));
  border-radius: calc(10px + var(--slope-1px) * 10);
  background: var(--key-color);
  transition: opacity .3s var(--animation);
}

@media screen and (max-width: 1206px) {
  .l-header-menu__inner {
    gap: 40px;
  }
}

@media screen and (max-width: 768px) {
  .l-header-menu__inner {
    height: -moz-fit-content;
    height: fit-content;

    padding-block: 3.2rem;
    padding-inline: 2.4rem;
  }
}

.l-header-menu__body {
  display: flex;
  justify-content: center;
  align-self: center;
  gap: 63px;
  height: -moz-fit-content;
  height: fit-content;
}

@media screen and (max-width: 1206px) {
  .l-header-menu__body {
    gap: 63px 40px;
  }
}

@media screen and (max-width: 768px) {
  .l-header-menu__body {
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* menu text */
.l-header-menu__title {
  display: block;
  flex-shrink: 0;
  width: -moz-fit-content;
  width: fit-content;

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

@media screen and (max-width: 768px) {
  .l-header-menu__title {
    display: none;
    margin-top: 27px;

    padding-inline: 16px;
  }
}

.l-header-menu__copy {
  display: block;
  font-weight: 700;
  font-size: clamp(36px, .93151px + 4.56621vw, 56px);
  font-feature-settings: 'halt' on;
  line-height: 1.4;

  margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(22px + var(--slope-1px) * 18));
}

.l-header-menu__lead {
  display: block;
  font-weight: 700;
  font-size: clamp(14px, 3.47945px + 1.36986vw, 20px);
  font-feature-settings: 'halt' on;
  line-height: 1.6;

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

@media screen and (max-width: 768px) {
  .l-header-menu__lead {
    font-size: calc(14px + var(--slope-1px) * 6);
  }
}

.l-header-sitemap__link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 48px;
}

@media screen and (max-width: 768px) {
  .l-header-sitemap__link {
    justify-content: flex-start;
    margin-top: 3.2rem;
    padding-top: 3.2rem;
    border-top: 1px solid var(--base-color);
  }
}

@media screen and (max-width: 768px) {
  .l-header-sitemap__link .c-corporate-link-grid {
    justify-content: flex-start;
  }
}

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

Main

* ============================================================= */
/* main
=============================== */
.l-main {
  position: relative;
  flex-grow: 1;
  width: 100%;
  min-height: 0%;
  max-height: 100%;

  margin-inline: auto;
}

body:not([data-id=index]) .l-main {
  padding-top: var(--header-height);
}

.l-main__head {
  position: relative;
  z-index: 0;
  max-width: calc(var(--contents-width-px) + (var(--outer-padding)*2));

  margin-inline: auto;
  padding-block: calc(96px + var(--slope-1px) * 16) calc(46px + var(--slope-1px) * 10);
  padding-inline: var(--outer-padding);
}

.l-main__head::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: auto;
  left: 50%;
  z-index: -1;
  width: 146.925329cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);

  margin-inline: auto;
  translate: -50% 0;
}

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

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

body:not([data-id=index]) .l-main__body::before {
  content: "";
  position: absolute;
  inset: 20cqi 0 0 0;
  z-index: -1;
  width: 100cqi;
  height: 100%;
  background: var(--white);

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

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

related

* ============================================================= */
.l-related {
  position: relative;
  margin-top: calc(56px + var(--slope-1px) * 56);
  background: var(--bg-color);

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

.l-related::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100cqi;
  height: 100%;
  background: var(--bg-color);

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

.l-related-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: var(--Width---inner-width, 1080px);
  padding: 40px calc(20px + var(--slope-1px) * 28);
  border: 1px solid var(--Root---gray, #878787);
  border-radius: calc(10px + var(--slope-1px) * 10);
  background: var(--Root---bg-color, #fff);
}

.l-related-frame__head {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.l-related-frame__body {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fit, 400px);
  gap: 16px 24px;
  width: 100%;
}

.l-related-frame__body .c-button {
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .l-related-frame__body {
    grid-template-columns: 100%;
  }
}

.l-related-title {
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 6);
  line-height: 120%;
}

.l-related-title::before {
  content: attr(data-category);
  position: absolute;
  inset: 0;
  z-index: -1;
  display: inline;
  width: 100cqi;
  height: 1lh;
  color: var(--Root---bg-color--dark, #f1f1f1);
  text-align: center;
  text-transform: uppercase;
  /* 64px */
  letter-spacing: 0;
  font-weight: 900;
  font-size: calc(40px + var(--slope-1px) * 24);
  font-family: var(--en-font-family);
  line-height: 100%;

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

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

Sticky

* ============================================================= */
.l-sticky {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  display: flex;
  visibility: visible;
  justify-content: flex-end;
  width: 100%;
  transition: visibility .3s var(--animation), opacity .3s var(--animation);
  pointer-events: none;

  padding-inline: 30px 80px;
}

body:not(.is-loaded) .l-sticky {
  visibility: hidden;
  opacity: 0;
}

.l-sticky.is-hidden {
  visibility: hidden;
  opacity: 0;
}

@media screen and (max-width: 960px) {
  .l-sticky {
    justify-content: center;

    padding-inline: 30px;
  }
}

.l-sticky-entry {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 514px;
  padding: 24px 24px 18px 24px;
  border-top: 2px solid var(--Root---base-color, #333);
  border-right: 2px solid var(--Root---base-color, #333);
  border-left: 2px solid var(--Root---base-color, #333);
  border-radius: calc(10px + var(--slope-1px) * 10) calc(10px + var(--slope-1px) * 10) 0 0;
  background: var(--point-color);
  background: var(--Button---cv-color, #ffdd7e);
  pointer-events: all;
}

@media screen and (max-width: 768px) {
  .l-sticky-entry {
    gap: 12px;
    width: -moz-fit-content;
    width: fit-content;
    padding: 16px 16px 12.5px 16px;
  }
}

.l-sticky-entry__head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--base-color);
  color: var(--white);
}

.l-sticky-entry__head span {
  font-weight: 700;
  font-size: calc(10px + var(--slope-1px) * 6);
  font-family: var(--en-font-family);
  line-height: .7;
}

@media screen and (max-width: 768px) {
  .l-sticky-entry__head {
    padding: 8px;
    border-radius: 5px;
  }
}

.l-sticky-entry-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

@media screen and (max-width: 768px) {
  .l-sticky-entry-grid {
    gap: 28px;
  }
}

.l-sticky-entry-grid__item {
  position: relative;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}

.l-sticky-entry-grid__item:not(:last-child):after {
  content: "";
  position: absolute;
  right: -25px;
  width: 2px;
  height: 1lh;
  border-radius: var(--ovall-radius);
  background: var(--base-color);
}

@media screen and (max-width: 768px) {
  .l-sticky-entry-grid__item:not(:last-child):after {
    right: -13px;
  }
}

.l-sticky-entry-button {
  text-decoration: none;
  font-weight: 900;
  font-size: 18px;
  line-height: 150%;
  transition: opacity .2s;
}

@media screen and (max-width: 768px) {
  .l-sticky-entry-button {
    letter-spacing: 0;
    font-size: 12px;
  }
}

@media (any-hover: hover) {
  .l-sticky-entry-button:hover {
    opacity: .6;
  }
}

.l-sticky-entry__label {
  position: absolute;
  top: -12px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 33px;
  border: 2px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: var(--white);
  text-align: center;
  font-weight: 700;
  font-size: calc(11px + var(--slope-1px) * 1);

  margin-inline: auto;
  translate: 0 -100%;
  --_width: 20px;
}

.l-sticky-entry__label::before {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  display: block;
  width: var(--_width);
  height: 7px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);

  margin-inline: auto;
}

.l-sticky-entry__label::after {
  content: "";
  position: absolute;
  top: calc(100%);
  right: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: calc(var(--_width) + calc(2 * var(--_border)));
  height: calc(7px + 2px);
  background: var(--base-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);

  --_border: 2px;
  margin-inline: auto;
}

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

Footer

* ============================================================= */
.l-footer {
  position: relative;
  z-index: 22;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  padding-bottom: var(--sticky-height);
  background: var(--key-color);

  margin-inline: auto;
}

.l-footer__head {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-rows: 1fr 220px auto;
  grid-template-columns: 100%;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .l-footer__head {
    grid-template-rows: 210px 1fr auto;
  }
}

.l-footer__body {
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--inner-padding) * 2);
  max-width: var(--contents-width-px);

  margin-inline: auto;
}

.l-footer__foot {
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--inner-padding) * 2);
  max-width: var(--contents-width-px);

  margin-inline: auto;
}

/* l-footer-image
=============================== */
.l-footer-image {
  position: relative;
  grid-column: 1/2;
  grid-row: 1/3;
  width: 100%;
  aspect-ratio: 1366/680;
  background-image: -webkit-image-set(url("../img/footer-pc@1x.jpg") 1x, url("../img/footer-pc@2x.jpg") 2x);
  background-image: image-set("../img/footer-pc@1x.jpg" 1x, "../img/footer-pc@2x.jpg" 2x);
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 960px) {
  .l-footer-image {
    align-self: flex-start;
    background-image: -webkit-image-set(url("../img/footer-sp@1x.jpg") 1x, url("../img/footer-sp@2x.jpg") 2x);
    background-image: image-set("../img/footer-sp@1x.jpg" 1x, "../img/footer-sp@2x.jpg" 2x);
    background-attachment: scroll;
  }
}

@media screen and (max-width: 560px) {
  .l-footer-image {
    aspect-ratio: 375/296;
  }
}

.l-footer-image::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: calc(100% + 106px * 2);
  aspect-ratio: 1560/277;
  border-radius: 50%;
  background: var(--key-color);

  margin-inline: calc(50% - (50cqi + 106px));
  translate: 0 50%;
}

/* l-footer-entry
=============================== */
.l-footer-entry {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/2;
  grid-row: 2/4;
  overflow: hidden;
  width: calc(100% - var(--inner-padding)*2);
  max-width: var(--contents-width-px);
  border-radius: calc(10px + var(--slope-1px) * 10);
  background: var(--white);

  margin-inline: auto;
  padding-inline: calc(16px + var(--slope-1px) * 40);
  padding-block: calc(40px + var(--slope-1px) * 32) calc(32px + var(--slope-1px) * 32);
}

@media screen and (max-width: 768px) {
  .l-footer-entry {
    padding-block: 40px 32px;
  }
}

.l-footer-entry__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 8));
}

.l-footer-entry__head ._ja {
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 2);

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

.l-footer-entry__head ._en {
  display: block;
  padding-bottom: .3em;
  font-weight: 900;
  font-size: calc(48px + var(--slope-1px) * 16);
  font-family: var(--en-font-family);
  line-height: .7;

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

.l-footer-entry__body {
  display: block;
  width: 100%;
}

.l-footer-entry__text {
  display: block;
  text-align: center;

  margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 14));
}

.l-footer-entry__bg {
  position: absolute;
  top: 42px;
  z-index: -1;
  display: flex;
  justify-content: space-between;
  width: calc(100% - 29px - 42px);
  height: 240px;

  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .l-footer-entry__bg {
    width: calc(100% + 10px);
  }
}

.l-footer-entry__bg .c-circle-group--01 {
  align-self: flex-end;
}

@media screen and (max-width: 768px) {
  .l-footer-entry__bg .c-circle-group--01 {
    transform-origin: left;

    scale: .5;
  }
}

.l-footer-entry__bg .c-circle-group--02 {
  align-self: flex-start;
}

@media screen and (max-width: 768px) {
  .l-footer-entry__bg .c-circle-group--02 {
    transform-origin: right;

    scale: .5;
  }
}

.l-footer-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 16px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .l-footer-entry-grid {
    grid-template-columns: 100%;
  }
}

.l-footer-entry-grid__item {
  position: relative;
  width: 100%;
  height: 100%;
}

.l-footer-entry-button__label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  width: -moz-fit-content;
  width: fit-content;
  border: 2px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: var(--white);
  font-weight: 700;
  font-size: calc(14px + var(--slope-1px) * 2);

  padding-inline: 1em;
  margin-inline: auto;
  translate: 0 -50%;
  --_width: 20px;
}

.l-footer-entry-button__label::before {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  display: block;
  width: var(--_width);
  height: 7px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);

  margin-inline: auto;
}

.l-footer-entry-button__label::after {
  content: "";
  position: absolute;
  top: calc(100%);
  right: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: calc(var(--_width) + calc(2 * var(--_border)));
  height: calc(7px + 2px);
  background: var(--base-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);

  --_border: 2px;
  margin-inline: auto;
}

.l-footer-entry-button {
  position: relative;
  display: inline grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: .25em;
  width: 100%;
  height: 119px;
  outline: none;
  border: 2px solid var(--base-color);
  border-radius: calc(10px + var(--slope-1px) * 10);
  background: var(--_bg-color);
  color: var(--_color);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px) * 4);
  transition: background .3s var(--animation), color .3s var(--animation);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  --_bg-color: var(--point-color);
  --_color: var(--base-color);
  padding-inline: 0 16px;
}

@media screen and (max-width: 768px) {
  .l-footer-entry-button {
    height: 86px;
  }
}

.l-footer-entry-button > .c-button__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  word-break: keep-all;
  line-height: 1.3;

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

.l-footer-entry-button > .c-arrow {
  bottom: 16px;
  align-self: flex-end;
  grid-column: 3/4;
  grid-row: 1/2;
  justify-self: flex-end;

  --_height: 26px;
  --_width: 56px;
}

.l-footer-entry-button::before {
  content: "";
}

@media (any-hover: hover) {
  :is(a.l-footer-entry-button:hover) {
    --_color: var(--white);
    --_bg-color: var(--base-color);
  }
  :is(a.l-footer-entry-button:hover .c-arrow)::before {
    translate: 100% 0;
  }
  :is(a.l-footer-entry-button:hover .c-arrow)::after {
    translate: 0 0;
  }
}

.l-footer-logo {
  margin-top: calc(56px + var(--slope-1px) * 56);
  margin-bottom: calc(32px + var(--slope-1px) * 24);
}

@media screen and (max-width: 768px) {
  .l-footer-logo {
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 0;

    margin-inline: auto;
  }
}

/* l-footer-corporate
=============================== */
.l-footer-corporate {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  width: 100%;
  max-width: var(--inner-width-px);

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

@media screen and (max-width: 768px) {
  .l-footer-corporate {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.l-footer-pagetop {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 16px;
  border-radius: var(--ovall-radius);
  background: var(--base-color);
  color: var(--white);
  text-decoration: none;
  transition: opacity .3s var(--animation);
}

@media (any-hover: hover) {
  .l-footer-pagetop:where(:hover) {
    opacity: .7;
  }
}

.l-footer-pagetop span {
  font-weight: 700;
  font-size: 16px;
  font-family: var(--en-font-family);
  line-height: .7;
}

.l-footer-pagetop::after {
  content: "";
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  background: var(--icon-arrow-white) 50% 50%/contain no-repeat;

  rotate: -90deg;
}

/* l-footer-copyright
=============================== */
.l-footer-copyright {
  width: 100%;
  max-width: var(--contents-width-px);
  padding-top: 2em;
  border-top: 1px solid var(--base-color);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;

  margin-inline: auto;
  margin-block: 0 calc(40px + var(--slope-1px) * 10);
}

/* .l-footer-sitemap
============================== */
.l-footer-sitemap {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--contents-width-px);

  padding-inline: calc(24px + var(--slope-1px) * 12);
  margin-inline: auto;
}

@media screen and (max-width: 1206px) {
  .l-footer-sitemap {
    padding-inline: 0;
  }
}

@media screen and (max-width: 768px) {
  .l-footer-sitemap {
    display: none;
    visibility: hidden;
    opacity: 0;

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

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

Components

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

Grid

* ============================================================= */
/* c-grid
=============================== */
.c-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: calc(15px + var(--slope-1px) * 10);

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

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

.c-grid._x4 {
  max-width: 100%;

  --columns:4;
}

.c-grid._x3 {
  max-width: 100%;

  --columns:3;
}

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

@media screen and (max-width: 560px) {
  .c-grid._x3\:mobile {
    --columns:3;
  }
}

.c-grid._x2 {
  --columns:2;
}

.c-grid._x1 {
  grid-template-columns: repeat(var(--columns), minmax(min(0px, 100%), 390px));
  max-width: 100%;

  --columns:1;
}

@media screen and (max-width: 768px) {
  .c-grid._x1\:tablet {
    --columns:1;
  }
}

@media screen and (max-width: 560px) {
  .c-grid._x1\:mobile {
    --columns:1;
  }
}

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

@media screen and (max-width: 560px) {
  .c-grid._x2\:mobile {
    --columns:2;
  }
}

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

Navigation

* ============================================================= */
/* c-button
=============================== */
.c-button {
  display: inline grid;
  align-items: center;
  grid-template-columns: calc(32px - .25em) 1fr calc(var(--_arrow-width) + 16px + .25em);
  gap: .25em;
  height: 64px;
  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;
  font-weight: 700;
  font-size: calc(15px + var(--slope-1px) * 1);
  transition: background .3s var(--animation), color .3s var(--animation);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  --_bg-color: var(--white);
  --_color: var(--base-color);
  --_arrow-width: calc(50px + var(--slope-1px) * 10);
  inline-size: min(100%, 400px);
  padding-inline: 0 16px;
  padding-inline: 0;
}

.c-button.c-button--primary {
  --_bg-color: var(--point-color);
}

@media screen and (max-width: 768px) {
  .c-button {
    grid-template-columns: calc(24px - .25em) 1fr calc(var(--_arrow-width) + 16px + .25em);
  }
}

.c-button > .c-button__text {
  display: flex;
  flex-direction: column;
  grid-column: 2/3;
  grid-row: 1/2;
  text-align: left;
}

.c-button > .c-arrow {
  grid-column: 3/4;
  grid-row: 1/2;
}

.c-button::before {
  content: '';
}

/* c-arrow
=============================== */
.c-arrow {
  position: relative;
  overflow: hidden;
  height: 28px;
  border-radius: var(--ovall-radius);
  background: var(--_color);
  transition: all .2s ease-out;
  will-change: background;

  --_height: 28px;
  --_width: calc(50px + var(--slope-1px) * 10);
  inline-size: var(--_width);
}

.c-arrow::before, .c-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  margin: auto;
  transition: translate .3s ease-out;
  will-change: translate, background;

  inline-size: 100%;
}

.c-arrow::before {
  background: var(--icon-arrow-white) 50% 50%/auto no-repeat;

  translate: 0 0;
}

.c-arrow::after {
  background: var(--icon-arrow) 50% 50%/auto no-repeat;

  translate: -100% 0;
}

@media screen and (max-width: 768px) {
  .c-arrow {
    --_width: 50px;
  }
}

@media (any-hover: hover) {
  :is(a:hover .c-button, a.c-button:hover, button:hover .c-button, button.c-button:hover) {
    --_color: var(--white);
    --_bg-color: var(--base-color);
  }
  :is(a:hover .c-button .c-arrow, a.c-button:hover .c-arrow, button:hover .c-button .c-arrow, button.c-button:hover .c-arrow)::before {
    translate: 100% 0;
  }
  :is(a:hover .c-button .c-arrow, a.c-button:hover .c-arrow, button:hover .c-button .c-arrow, button.c-button:hover .c-arrow)::after {
    translate: 0 0;
  }
  :is(a:hover .c-button .c-blank, a.c-button:hover .c-blank, button:hover .c-button .c-blank, button.c-button:hover .c-blank)::before {
    opacity: 0;
  }
  :is(a:hover .c-button .c-blank, a.c-button:hover .c-blank, button:hover .c-button .c-blank, button.c-button:hover .c-blank)::after {
    opacity: 1;
  }
}

/* c-blank
=============================== */
.c-blank {
  position: relative;
  overflow: hidden;
  height: 28px;
  border-radius: var(--ovall-radius);
  background: var(--_color);
  transition: all .2s ease-out;
  will-change: background;

  --_height: 28px;
  --_width: calc(50px + var(--slope-1px) * 10);
  inline-size: var(--_width);
}

.c-blank::before, .c-blank::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  margin: auto;
  transition: opacity .3s ease-out;
  will-change: opacity, background;

  inline-size: 100%;
  -webkit-mask: var(--icon-blank) 50% 50%/auto no-repeat;
          mask: var(--icon-blank) 50% 50%/auto no-repeat;
}

.c-blank::before {
  background: var(--white);
}

.c-blank::after {
  background: var(--base-color);
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .c-blank {
    --_width: 50px;
  }
}

/* c-toggle
=============================== */
.c-toggle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(46px + var(--slope-1px) * 14);
  height: calc(26px + var(--slope-1px) * 2);
  border-radius: var(--ovall-radius);
  background: var(--Root---base-color, #333);
  transition: background .2s;
  will-change: background;
}

@media screen and (max-width: 768px) {
  .c-toggle {
    width: 46px;
    height: 26px;
  }
}

.c-toggle::before, .c-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 1.6rem;
  height: 2.5px;
  margin: auto;
  border-radius: var(--ovall-radius);
  background-color: var(--white);
  transition: rotate .2s;
  will-change: rotate;
}

.c-toggle::after {
  rotate: 90deg;
}

details:hover .c-toggle {
  background: var(--Root---gray, #878787);
}

details[open] .c-toggle {
  background: var(--Root---gray, #878787);
}

details[open] .c-toggle::after {
  rotate: 0deg;
}

/* 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(32px + var(--slope-1px) * 8);

  place-content: center;
}

.c-button-container > .c-button {
  min-width: 400px;
}

@media screen and (max-width: 560px) {
  .c-button-container > .c-button {
    min-width: 100%;
  }
}

/* nav-button
=============================== */
.c-nav-button {
  outline: none;
  border: none;
  text-decoration: none;
  transition: all .3s var(--animation), color .3s var(--animation);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media (any-hover: hover) {
  .c-nav-button:where(:hover) {
    scale: 1.02;
  }
}

/* anchor
=============================== */
.c-anchor-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: calc(56px + var(--slope-1px) * 16);

  place-content: center;
}

@media screen and (max-width: 768px) {
  .c-anchor-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }
}

.c-anchor-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 33px;
  max-width: 163px;
  padding: 12px 25px 12px 15px;
  border: 1px solid var(--Root---base-color, #333);
  border-radius: var(--ovall-radius);
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  transition: opacity .2s;
}

.c-anchor-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 1em;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;

  margin-block: auto;
  rotate: 90deg;
}

.c-anchor-button:hover {
  opacity: .7;
}

/* tab
=============================== */
*[data-tab-id] {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s;
}

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

.c-tab-nav {
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
  width: 100%;
  margin-bottom: calc(32px + var(--slope-1px) * 24);
  border-radius: var(--ovall-radius);
  background: var(--bg-color);

  margin-inline: auto;
  --_staff-color: var(--key-color);
  --_color: var(--base-color);
}

body[data-id=sales] .c-tab-nav {
  width: -moz-fit-content;
  width: fit-content;

  --_staff-color: var(--sales-color);
  --_color:var(--white);
}

@media screen and (max-width: 768px) {
  body[data-id=sales] .c-tab-nav {
    width: 100%;
  }
}

body[data-id=sales] .c-tab-nav .c-tab-nav__item {
  flex-basis: 340px;
  width: 340px;
}

@media screen and (max-width: 768px) {
  body[data-id=sales] .c-tab-nav .c-tab-nav__item {
    flex-basis: auto;
    width: 100%;
  }
}

body[data-id=service] .c-tab-nav {
  width: -moz-fit-content;
  width: fit-content;

  --_staff-color: var(--service-color);
  --_color:var(--white);
}

@media screen and (max-width: 768px) {
  body[data-id=service] .c-tab-nav {
    width: 100%;
  }
}

body[data-id=service] .c-tab-nav .c-tab-nav__item {
  flex-basis: 340px;
  width: 340px;
}

@media screen and (max-width: 768px) {
  body[data-id=service] .c-tab-nav .c-tab-nav__item {
    flex-basis: 100%;
    width: 100%;
  }
}

body[data-id=ca] .c-tab-nav {
  width: -moz-fit-content;
  width: fit-content;

  --_staff-color: var(--ca-color);
  --_color:var(--white);
}

@media screen and (max-width: 768px) {
  body[data-id=ca] .c-tab-nav {
    width: 100%;
  }
}

body[data-id=ca] .c-tab-nav .c-tab-nav__item {
  flex-basis: 340px;
  width: 340px;
}

@media screen and (max-width: 768px) {
  body[data-id=ca] .c-tab-nav .c-tab-nav__item {
    flex-basis: 100%;
    width: 100%;
  }
}

.c-tab-nav__item {
  display: flex;
  flex: 1 1;
  flex-basis: 100%;
  align-items: stretch;
  width: auto;
}

@media screen and (max-width: 768px) {
  .c-tab-nav__item {
    flex: 1 1;
    flex-basis: 100%;
    width: auto;
  }
}

.c-tab-nav__button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(5px + var(--slope-1px) * 5);
  width: 100%;
  height: 4.5em;
  outline: none;
  border: 0;
  border-radius: var(--ovall-radius);
  background: transparent;
  color: var(--Root---gray, #878787);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media screen and (max-width: 768px) {
  .c-tab-nav__button {
    height: 3.73333em;
  }
}

.c-tab-nav__button.is-current {
  background: var(--_staff-color);
  color: var(--_color);
}

.c-tab-nav span {
  display: block;
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 2);

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

.c-tab-nav small {
  display: block;
  font-weight: 500;
  font-size: calc(12px + var(--slope-1px) * 2);

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

.c-sub-tab-nav {
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: calc(32px + var(--slope-1px) * 32);
  margin-bottom: calc(24px + var(--slope-1px) * 16);

  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .c-sub-tab-nav {
    width: 100%;
  }
}

.c-sub-tab-nav__item {
  display: flex;
  align-items: stretch;
}

@media screen and (max-width: 768px) {
  .c-sub-tab-nav__item {
    flex: 1 1;
  }
}

.c-sub-tab-nav__button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: calc(var(--leading-trim) + calc(16px + var(--slope-1px) * 4));
  outline: none;
  border: 0;
  border-bottom: 4px solid var(--Root---bg-color--dark, #f1f1f1);
  background: transparent;
  color: var(--gray);
  text-align: center;
  text-decoration: none;
  font-size: calc(13px + var(--slope-1px) * 3);
  cursor: pointer;
  transition: border .25s, color .25s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

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

.c-sub-tab-nav__button.is-current[data-staff=sales] {
  border-color: var(--sales-color);
  color: var(--sales-color);
}

.c-sub-tab-nav__button.is-current[data-staff=service] {
  border-color: var(--service-color);
  color: var(--service-color);
}

.c-sub-tab-nav__button.is-current[data-staff=ca] {
  border-color: var(--ca-color);
  color: var(--ca-color);
}

.c-sub-tab-nav__button.is-current[data-staff=repair] {
  border-color: var(--gray);
  color: var(--base-color);
}

@media screen and (max-width: 768px) {
  .c-sub-tab-nav__button {
    font-size: 13px;
  }
}

/* corporate link
=============================== */
.c-corporate-link-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px calc(24px + var(--slope-1px) * 8);
}

a.c-corporate-link {
  display: inline-grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;
  gap: 5px;
  font-weight: 500;
  font-size: 12px;
  transition: opacity .2s var(--animation), -webkit-text-decoration-color .2s var(--animation);
  transition: text-decoration-color .2s var(--animation), opacity .2s var(--animation);
  transition: text-decoration-color .2s var(--animation), opacity .2s var(--animation), -webkit-text-decoration-color .2s var(--animation);

  -webkit-text-decoration-line: underline;

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

a.c-corporate-link::after {
  content: "";
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
  background: var(--icon-blank);
}

@media (any-hover: hover) {
  a.c-corporate-link:where(:hover) {
    opacity: .6;

    -webkit-text-decoration-line: underline;

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

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

Section

* ============================================================= */
.c-inner {
  max-width: calc(var(--contents-width-px) + (var(--inner-padding)*2));

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

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

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

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

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

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

.c-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(32px + var(--slope-1px) * 16);
}

.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);
}

/* inner section
=============================== */
.c-inner-section {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--leading-trim) + calc(48px + var(--slope-1px) * 8));
}

.c-inner-section__head {
  margin-bottom: calc(var(--leading-trim) + 2.4rem);
}

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

Table

* ============================================================= */
/* data table
=============================== */
.c-data-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  font-size: calc(14px + var(--slope-1px) * 1);
}

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

.c-data-table th,
.c-data-table td {
  padding: 1em .75em;
  text-align: center;
}

.c-data-table thead th,
.c-data-table thead td {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.c-data-table thead th {
  background: var(--base-color);
  color: var(--white);
  font-weight: 500;
  font-size: calc(14px + var(--slope-1px) * 2);
}

.c-data-table thead th._head {
  width: 22.5%;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.c-data-table thead th ._example {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #ccc;
  font-style: normal;
  font-size: 71.222222%;
}

.c-data-table thead th._small {
  font-size: calc(13px + var(--slope-1px) * 1);
}

.c-data-table thead th em {
  display: block;
  font-size: 1.06667em;
}

.c-data-table thead th em span {
  display: inline;
  padding-left: .5em;
  font-size: .875em;
}

.c-data-table thead th > span {
  display: block;
  margin-top: .25em;
  font-size: .84615em;
}

.c-data-table thead td {
  background: var(--bg-color);
}

.c-data-table tbody tr._subtotal th {
  background: var(--bg-key-color);
}

.c-data-table tbody tr._subtotal td {
  background: var(--bg-key-color);
}

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

.c-data-table tbody tr._total td {
  background: var(--key-color);
  color: var(--white);
}

.c-data-table tbody th,
.c-data-table tbody td {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.c-data-table tbody th {
  background: var(--bg-color);
  font-weight: 500;
  font-size: calc(14px + var(--slope-1px) * 2);
}

.c-data-table tbody th[rowspan] {
  width: 2.66667em;
  padding: 1.2em .33333em;
  background: var(--base-color);
  color: var(--white);
}

.c-data-table tbody th[rowspan] span {
  display: inline-block;
  min-height: 1em;
  color: var(--white);
  text-align: left;
  white-space: nowrap;
  line-height: 1.25;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.c-data-table tbody th._gray {
  background: var(--bg-color);
  color: var(--base-color);
}

.c-data-table tbody th._white {
  background: var(--white);
  color: var(--base-color);
}

.c-data-table tbody th._small {
  font-size: calc(13px + var(--slope-1px) * 1);
}

.c-data-table tbody td {
  width: 25%;
}

.c-data-table tbody td._small {
  font-size: calc(13px + var(--slope-1px) * 1);
}

.c-data-table tbody td._gray {
  background: var(--bg-color);
  color: var(--base-color);
}

.c-data-table tbody td._white {
  background: var(--white);
  color: var(--base-color);
}

.c-data-table tbody td._pack {
  background: var(--bg-color);
  color: var(--base-color);
  font-weight: 700;
}

.c-data-table tbody td span {
  display: block;
}

.c-data-table tbody td span:not(:last-child) {
  padding-bottom: .75em;
  border-bottom: 1px solid #ccc;
}

.c-data-table tbody td span:not(:first-child) {
  padding-top: .75em;
}

.c-data-table tbody td span i {
  display: block;
  margin-bottom: 5px;
  font-style: normal;
  font-size: 75%;
}

/* profile table
=============================== */
.c-profile-table {
  display: grid;
  grid-template-columns: 100%;
  gap: 8px;
  width: 100%;
}

.c-profile-table > dl {
  display: flex;
  align-items: flex-start;
  gap: 20px 1em;
  padding: 24px calc(20px + var(--slope-1px) * 10);
  border-radius: calc(10px + var(--slope-1px) * 10);
  background: var(--bg-color);
}

@media screen and (max-width: 768px) {
  .c-profile-table > dl {
    flex-direction: column;
  }
}

.c-profile-table > dl > dt {
  flex-shrink: 0;
  width: 145px;
  padding-bottom: calc(15px + var(--slope-1px) * 5);
  border-radius: 5px;
  background: var(--white);
  text-align: center;
  font-weight: 700;

  padding-block: calc(var(--leading-trim) + calc(12px + var(--slope-1px) * 4));
  padding-inline: calc(12px + var(--slope-1px) * 4);
}

@media screen and (max-width: 768px) {
  .c-profile-table > dl > dt {
    width: 140px;
  }
}

.c-profile-table > dl > dd {
  margin-block: auto;
}

.c-profile-table > dl > dd > p {
  margin-block: var(--leading-trim);
}

.c-profile-table > dl > dd p + p {
  margin-block-start: calc(var(--leading-trim) + 1lh);
}

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

Text

* ============================================================= */
/* lead
=============================== */
.c-lead {
  display: block;
  text-align: left;
  font-weight: 700;
  font-size: calc(24px + var(--slope-1px) * 8);
  line-height: 1.4;

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

/* lead
=============================== */
.c-disc-lead {
  position: relative;
  display: block;
  align-items: center;
  padding-left: 1em;
  font-weight: 700;

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

@media screen and (max-width: 768px) {
  .c-disc-lead {
    padding-left: .66667em;
  }
}

.c-disc-lead::before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 1em;
  height: 1lh;
  background: var(--icon-disc) 0% 50%/.5em no-repeat;
}

@media screen and (max-width: 768px) {
  .c-disc-lead::before {
    width: .66667em;
    background: var(--icon-disc) 0% 50%/.4em no-repeat;
  }
}

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

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

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

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

@media screen and (max-width: 768px) {
  .c-text._left\:tablet {
    text-align: left;
  }
}

.c-text em {
  font-weight: bold;
  font-size: 1.33333em;
}

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

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

/* list
=============================== */
.c-list {
  font-weight: 500;
}

.c-list > li {
  position: relative;
  display: block;
  align-items: center;
  padding-left: 1em;

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

.c-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 1em;
  height: 1lh;
  background: var(--icon-disc) 0% 50%/.53333em 1lh no-repeat;
}

.c-list > li + li {
  margin-block-start: calc(var(--leading-trim) + calc(18px + var(--slope-1px) * 6));
}

/* 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;
  z-index: 0;
  display: grid;
  grid-template-columns: 100%;
  gap: 24px;
  width: 100%;

  place-content: center;
}

@media screen and (max-width: 768px) {
  .c-page-title {
    font-size: 2.2rem;
  }
}

.c-page-title h1._ja {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 2);
  line-height: 1.65;

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

.c-page-title p._en {
  display: block;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 900;
  font-style: normal;
  font-size: calc(40px + var(--slope-1px) * 24);
  font-family: var(--en-font-family);
  line-height: .7;
}

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

/* c-section-title
============================== */
.c-section-title {
  display: inline-grid;
  justify-content: center;
  grid-template-columns: 1fr max-content;
  gap: .53125em;
  font-weight: 700;
  font-size: calc(24px + var(--slope-1px) * 8);
  line-height: 1.4;

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

.c-section-title::before {
  content: "";
  position: relative;
  display: inline-grid;
  width: 1em;
  height: 1lh;
  aspect-ratio: 1;
  background-image: var(--icon-section);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

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

/* c-inner-section-title 
============================== */
.c-inner-section-title {
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px) * 4);
  line-height: 1.2;

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

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

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

circle

* ============================================================= */
.c-circle-blue {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
}

.c-circle-red {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
}

.c-circle-green {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green);
}

.c-circle-light-blue {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--key-color);
}

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

.c-circle-group--01 {
  position: relative;
  width: 137px;
  height: 119px;
}

.c-circle-group--01 .c-circle-green {
  position: absolute;
  bottom: 0;
  left: 3px;
  display: block;
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
}

.c-circle-group--01 .c-circle-red {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 80px;
  height: 80px;
  aspect-ratio: 1/1;
}

.c-circle-group--01 .c-circle-blue {
  position: absolute;
  top: 19px;
  left: 0;
  display: block;
  width: 25px;
  height: 25px;
}

.c-circle-group--02 {
  position: relative;
  width: 135px;
  height: 177px;
}

.c-circle-group--02 .c-circle-green {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 46px;
  height: 46px;
  aspect-ratio: 1/1;
}

.c-circle-group--02 .c-circle-red {
  position: absolute;
  top: 43px;
  left: 0;
  display: block;
  width: 28px;
  height: 28px;
  aspect-ratio: 1/1;
}

.c-circle-group--02 .c-circle-blue {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 94px;
  height: 94px;
}

.c-circle-intro {
  position: relative;
  z-index: 10;
  overflow: visible;
  width: calc(100% + 106px * 2);
  height: 100vh;
  aspect-ratio: 1560/277;

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

.c-circle-intro__sticky {
  position: sticky;
  top: 0;
  overflow: visible;
  width: 100%;
  height: 100cqb;
  pointer-events: none;
}

.c-circle-intro__stage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.c-circle-intro__svg {
  display: block;
  overflow: visible;
  width: 100cqi;
  width: calc(100% + 106px * 2);
  height: 100cqb;

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

.c-circle-intro__circle,
.c-circle-intro__rect {
  fill: #ffffff;
  will-change: transform;
}

.c-circle-intro__circle {
  transform-origin: center center;
}

.c-circle-intro__rect {
  transform-origin: center top;
}

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

Interview

* ============================================================= */
.c-interview-tab {
  margin-bottom: calc(88px + var(--slope-1px) * 32);
}

/* c-interview-card
=============================== */
.c-interview-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 100%;
  overflow: hidden;
  width: 100%;
  padding: calc(16px + var(--slope-1px) * 8);
  border-radius: calc(10px + var(--slope-1px) * 10);
  background: var(--_staff-color);
  color: var(--base-color);
  text-decoration: none;
  transition: opacity .3s var(--animation);

  --_color: var(--base-color);
}

.c-interview-card[data-staff=sales] {
  --_staff-color: var(--sales-color);
}

.c-interview-card[data-staff=service] {
  --_staff-color: var(--service-color);
}

.c-interview-card[data-staff=ca] {
  --_staff-color: var(--ca-color);
}

.c-interview-card > .c-arrow {
  position: relative;
  justify-self: end;
  margin-top: 8px;

  --_height: 28px;
  --_width: 60px;
}

.c-interview-card__title {
  display: block;
  height: 2lh;
  color: var(--Root---white, #fff);
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 6);
  line-height: 1.4;

  margin-block: calc(var(--leading-trim) + calc(16px + var(--slope-1px) * 8));
}

.c-interview-card__image {
  overflow: hidden;
  border-radius: calc(5px + var(--slope-1px) * 5);
}

.c-interview-card__image img {
  transition: scale .4s ease-out;
}

.c-interview-card__staff {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-interview-card__position {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 26px;
  padding: 8px 16px;
  border-radius: 5px;
  background: var(--white);
  color: var(--base-color);
  font-weight: 700;
  font-size: calc(13px + var(--slope-1px) * 1);
}

.c-interview-card__name {
  display: block;
  padding-bottom: .125em;
  color: var(--white);
  font-weight: 700;

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

@media (any-hover: hover) {
  :is(a.c-interview-card:hover) {
    --_color: var(--white);
  }
  :is(a.c-interview-card:hover .c-interview-card__image img) {
    scale: 1.06;
  }
  :is(a.c-interview-card:hover .c-arrow)::before {
    translate: 100% 0;
  }
  :is(a.c-interview-card:hover .c-arrow)::after {
    translate: 0 0;
  }
}

/* c-interview-list
=============================== */
.c-interview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 40px 50px;
}

@media screen and (min-width: 769px) {
  .c-interview-list {
    padding-top: 10px;
  }
}

@media screen and (min-width: 769px) {
  .c-interview-list li:nth-child(2) {
    padding-top: 60px;
  }
  .c-interview-list li:nth-child(5) {
    padding-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .c-interview-list li:nth-child(2n) {
    padding-top: 60px;
  }
}

@media screen and (max-width: 560px) {
  .c-interview-list li:nth-child(2n) {
    padding-top: 0;
  }
}

/* c-interview-list-nav
=============================== */
.c-interview-list-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-decoration: none;
  transition: translate .3s var(--animation);

  --_padding-bottom: 50px;
}

@media (any-hover: hover) {
  .c-interview-list-nav:where(:hover) {
    translate: 0 -5px;
  }
  .c-interview-list-nav:where(:hover) .c-interview-list-nav__body {
    color: var(--key-color);
  }
}

.c-interview-list-nav__head {
  position: relative;
  display: flex;
  flex-direction: column;
}

.c-interview-list-nav__image {
  background-image: url(../img/bg-interview-card.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  .c-interview-list-nav__image {
    max-width: 77.46479%;

    margin-inline: auto;
  }
}

.c-interview-list-nav__image img {
  padding-bottom: var(--_padding-bottom);

  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .c-interview-list-nav__image img {
    max-width: 79.27273%;

    margin-inline: auto;
  }
}

.c-interview-list-nav__title {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline grid;
  align-items: center;
  grid-template-columns: 1fr auto auto 1fr;
  gap: 6px;
  width: 100%;
  height: var(--_padding-bottom);
  max-width: 422px;
  border-radius: var(--ovall-radius);
  background: var(--white);

  margin-inline: auto;
}

.c-interview-list-nav__title span._name {
  grid-column: 3/4;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 100%;
}

.c-interview-list-nav__title::before {
  content: '';
  grid-column: 1/2;
}

.c-interview-list-nav__title::after {
  content: "";
  grid-column: 4/5;
  justify-self: end;
  aspect-ratio: 1;
  margin-right: .5em;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;
  transition: all .2s ease-out;

  inline-size: 1.375em;
}

@media screen and (max-width: 560px) {
  .c-interview-list-nav__title {
    right: 0;
    left: 0;
    max-width: 275px;

    margin-inline: auto;
  }
}

.c-interview-list-nav__staff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-column: 2/3;
  font-size: 13px;
}

.c-interview-list-nav__body {
  width: -moz-fit-content;
  width: fit-content;
  letter-spacing: 0;
  font-weight: 500;
  font-style: normal;
  font-size: 22px;
  line-height: 1.4;
  transition: color .3s var(--animation);

  margin-inline: auto;
}

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

Interview

* ============================================================= */
/* c-interview-overview
=============================== */
.c-interview-overview {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 39.21569%;
  gap: 24px 40px;
  margin-top: calc(2px + var(--slope-1px) * 22);
  margin-bottom: calc(48px + var(--slope-1px) * 32);
  padding: calc(24px + var(--slope-1px) * 6);
  border-radius: calc(10px + var(--slope-1px) * 10);
  background: var(--bg-color);
}

@media screen and (max-width: 768px) {
  .c-interview-overview {
    grid-template-columns: 100%;
  }
}

.c-interview-overview__contents {
  display: flex;
  flex-direction: column;
  justify-items: center;
}

.c-interview-overview__staff {
  margin-top: var(--leading-trim);
  margin-bottom: calc(var(--leading-trim) + calc(20px + var(--slope-1px) * 12) - .5lh);
  color: var(--bg-color);
  text-transform: uppercase;
  font-weight: 900;
  font-size: calc(18px + var(--slope-1px) * 6);
  font-family: var(--en-font-family);
  font-feature-settings: 'halt' on;
  line-height: 1;

  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--_staff-color);
  paint-order: stroke;
}

.c-interview-overview__title {
  display: block;
  margin-top: var(--leading-trim);
  margin-bottom: calc(var(--leading-trim) + calc(20px + var(--slope-1px) * 12));
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px) * 12);
  font-feature-settings: 'halt' on;
  line-height: 1.4;
}

.c-interview-overview__text {
  margin-block: var(--leading-trim);
}

.c-interview-overview__image {
  overflow: hidden;
  border-radius: calc(5px + var(--slope-1px) * 5);
}

.c-interview-overview__image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* c-interview-header
=============================== */
.c-interview-header {
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-template-columns: 1fr 46.2963%;
  width: 100%;
  width: calc(100% - 32px);
  margin-top: 65px;
  margin-right: 32px;
}

@media screen and (max-width: 768px) {
  .c-interview-header {
    position: relative;
    grid-template-columns: 100%;
    width: 100%;
    margin-top: 43px;
    margin-right: 0;
  }
}

.c-interview-header__title {
  position: relative;
  z-index: 1;
  padding-left: 48px;

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

@media screen and (max-width: 768px) {
  .c-interview-header__title {
    padding-left: 24px;
  }
}

.c-interview-header__title::before {
  content: "";
  position: absolute;
  top: -72px;
  left: 0;
  z-index: -1;
  width: clamp(128px, 25.25753px + 13.37793vw, 208px);
  height: clamp(128px, 25.25753px + 13.37793vw, 208px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--bg-color);
}

@media screen and (max-width: 768px) {
  .c-interview-header__title::before {
    top: -48px;
    left: 0;
  }
}

.c-interview-header__lead {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: clamp(32px, 11.45151px + 2.67559vw, 48px);

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

.c-interview-header__profile {
  position: relative;

  margin-block: calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 8)) var(--leading-trim);
}

.c-interview-header__profile::before {
  content: "";
  position: relative;
  left: 0;
  display: block;
  width: 24px;
  height: 4px;
  margin-bottom: calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 8));
  border-radius: var(--ovall-radius);
  background: var(--_staff-color);
}

.c-interview-header__year {
  font-weight: 500;
  font-size: 14px;

  margin-block: calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 8)) calc(var(--leading-trim) + 16px);
}

.c-interview-header__name {
  font-weight: 700;
  font-size: 20px;
}

.c-interview-header__image {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 500/560;
}

@media screen and (max-width: 768px) {
  .c-interview-header__image {
    position: inherit;
    order: -1;
    width: calc(100% - 16px - 76px);
    margin-bottom: 25px;

    margin-inline: 76px 16px;
  }
}

.c-interview-header__circle {
  width: -moz-fit-content;
  width: fit-content;
  transform: translateX(-50%) translateY(-10%);
}

@media screen and (max-width: 768px) {
  .c-interview-header__circle {
    position: absolute;
    left: 0;
    left: 0;
    transform: translateX(-75%) translateY(-10%);
  }
}

.c-interview-header__circle .c-circle-group--02 {
  position: relative;
  width: 116px;
  height: 153px;
}

@media screen and (max-width: 768px) {
  .c-interview-header__circle .c-circle-group--02 {
    width: 76px;
    height: 101px;
  }
}

.c-interview-header__circle .c-circle-group--02 .c-circle-green {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 768px) {
  .c-interview-header__circle .c-circle-group--02 .c-circle-green {
    width: 26px;
    height: 26px;
  }
}

.c-interview-header__circle .c-circle-group--02 .c-circle-red {
  position: absolute;
  top: 37px;
  left: 0;
  display: block;
  width: 25px;
  height: 25px;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 768px) {
  .c-interview-header__circle .c-circle-group--02 .c-circle-red {
    top: 25px;
    width: 17px;
    height: 17px;
  }
}

.c-interview-header__circle .c-circle-group--02 .c-circle-blue {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 80px;
  height: 80px;
}

@media screen and (max-width: 768px) {
  .c-interview-header__circle .c-circle-group--02 .c-circle-blue {
    width: 53px;
    height: 53px;
  }
}

.c-interview-article-wrapper[data-staff=service] .c-interview-header__circle .c-circle-group--02 {
  position: relative;
  width: 116px;
  height: 153px;
}

@media screen and (max-width: 768px) {
  .c-interview-article-wrapper[data-staff=service] .c-interview-header__circle .c-circle-group--02 {
    width: 76px;
    height: 101px;
  }
}

.c-interview-article-wrapper[data-staff=service] .c-interview-header__circle .c-circle-group--02 .c-circle-green {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  display: block;
  width: 80px;
  height: 80px;
}

@media screen and (max-width: 768px) {
  .c-interview-article-wrapper[data-staff=service] .c-interview-header__circle .c-circle-group--02 .c-circle-green {
    width: 53px;
    height: 53px;
  }
}

.c-interview-article-wrapper[data-staff=service] .c-interview-header__circle .c-circle-group--02 .c-circle-red {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  display: block;
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 768px) {
  .c-interview-article-wrapper[data-staff=service] .c-interview-header__circle .c-circle-group--02 .c-circle-red {
    width: 26px;
    height: 26px;
  }
}

.c-interview-article-wrapper[data-staff=service] .c-interview-header__circle .c-circle-group--02 .c-circle-blue {
  position: absolute;
  top: 37px;
  left: 0;
  display: block;
  width: 25px;
  height: 25px;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 768px) {
  .c-interview-article-wrapper[data-staff=service] .c-interview-header__circle .c-circle-group--02 .c-circle-blue {
    top: 25px;
    width: 17px;
    height: 17px;
  }
}

.c-interview-article-wrapper[data-staff=ca] .c-interview-header__circle .c-circle-group--02 {
  position: relative;
  width: 116px;
  height: 153px;
}

@media screen and (max-width: 768px) {
  .c-interview-article-wrapper[data-staff=ca] .c-interview-header__circle .c-circle-group--02 {
    width: 76px;
    height: 101px;
  }
}

.c-interview-article-wrapper[data-staff=ca] .c-interview-header__circle .c-circle-group--02 .c-circle-green {
  position: absolute;
  top: 37px;
  left: 0;
  display: block;
  width: 25px;
  height: 25px;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 768px) {
  .c-interview-article-wrapper[data-staff=ca] .c-interview-header__circle .c-circle-group--02 .c-circle-green {
    top: 25px;
    width: 17px;
    height: 17px;
  }
}

.c-interview-article-wrapper[data-staff=ca] .c-interview-header__circle .c-circle-group--02 .c-circle-red {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  display: block;
  width: 80px;
  height: 80px;
}

@media screen and (max-width: 768px) {
  .c-interview-article-wrapper[data-staff=ca] .c-interview-header__circle .c-circle-group--02 .c-circle-red {
    width: 53px;
    height: 53px;
  }
}

.c-interview-article-wrapper[data-staff=ca] .c-interview-header__circle .c-circle-group--02 .c-circle-blue {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  display: block;
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 768px) {
  .c-interview-article-wrapper[data-staff=ca] .c-interview-header__circle .c-circle-group--02 .c-circle-blue {
    width: 26px;
    height: 26px;
  }
}

.c-interview-header-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  margin: 0;
}

.c-interview-header-image::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--_staff-color);
}

.c-interview-header-image[data-staff=clip01] img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  clip-path: url(#interview-clip01);
}

.c-interview-header-image[data-staff=clip02] img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  clip-path: url(#interview-clip02);
}

.c-interview-section {
  position: relative;
  display: grid;
  justify-content: space-between;
  grid-template-columns: 1fr 70.37037%;
  width: 100%;

  padding-inline: 48px;
  margin-block-start: calc(64px + var(--slope-1px) * 16);
  margin-block-end: calc(48px + var(--slope-1px) * 44);
}

@media screen and (max-width: 768px) {
  .c-interview-section {
    grid-template-columns: 100%;

    padding-inline: 0;
  }
}

.c-interview-section__nav {
  position: sticky;
  top: var(--header-height);
  z-index: 10;
  align-self: flex-start;
}

@media screen and (max-width: 768px) {
  .c-interview-section__nav {
    display: none;
  }
}

.c-interview-section__contents {
  position: relative;
  top: 0;
}

/* c-interview-sticky-nav
=============================== */
.c-interview-sticky-nav__item > a {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--Root---gray, #878787);
  text-decoration: none;
  font-weight: 500;
  transition: all .3s;
}

.c-interview-sticky-nav__item > a::before {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  margin-right: 0;
  border-radius: var(--ovall-radius);
  background: transparent;
  transition: width .3s, background .3s, margin .3s;
}

.c-interview-sticky-nav__item > a.is-current {
  position: relative;
  color: var(--base-color);
  font-weight: 700;
}

.c-interview-sticky-nav__item > a.is-current::before {
  content: "";
  display: block;
  width: 16px;
  height: 3px;
  margin-right: .5em;
  border-radius: var(--ovall-radius);
  background: var(--_staff-color);
}

/* c-interview-section-block
=============================== */
.c-interview-section__contents .c-interview-section-block:not(:last-child) {
  padding-bottom: calc(var(--leading-trim) + calc(48px + var(--slope-1px) * 44));
}

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

.c-interview-section-block__head {
  display: block;
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px) * 4);
  line-height: 120%;
  /* 28.8px */

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

.c-interview-section-block__body {
  margin-block: var(--leading-trim);
}

.c-interview-section-block__image {
  overflow: hidden;
  margin-top: calc(48px + var(--slope-1px) * 44);
  border-radius: calc(10px + var(--slope-1px) * 10);
}

/* c-interview-flow
=============================== */
.c-interview-flow {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 100%;
  gap: 24px;
}

.c-interview-flow__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 16px;
  padding: 24px calc(16px + var(--slope-1px) * 14);
  border-radius: calc(10px + var(--slope-1px) * 10);
  background: var(--bg-color);
}

.c-interview-flow__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(54px + var(--slope-1px) * 18);
  z-index: -1;
  width: 4px;
  height: 100%;
  background: var(--_staff-color);
}

.c-interview-flow__head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.c-interview-flow__time {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(76px + var(--slope-1px) * 7);
  height: calc(26px + var(--slope-1px) * 1);
  padding: 8px 16px 7px;
  border-radius: var(--Border-Radius-btn, 5px);
  background: var(--_staff-color);
  color: var(--white);
  font-weight: 700;
  font-family: var(--en-font-family);
  line-height: 1;

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

.c-interview-flow__title {
  font-weight: 700;
  font-size: 18px;
}

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

Modal

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

  --max-width: 1100px;
}

.l-modal__inner {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-rows: 1fr auto 1fr;
  gap: 1em;
  width: 100%;
  height: 100%;
  max-width: var(--max-width);
  max-height: 100svh;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .l-modal__inner {
    max-width: calc(100% - var(--outer-padding)*2);
  }
}

.l-modal__contents {
  position: relative;
  z-index: 100005;
  overflow: hidden;
  overflow-y: auto;
  padding: calc(5px + var(--slope-1px) * 5);
  background: var(--part-color);
}

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

.l-modal__close {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  order: -1;
  justify-content: center;
  align-items: center;
  align-self: flex-end;
  gap: .5em;
  justify-self: flex-end;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  outline: none;
  border: 0;
  background: none;
  color: var(--white);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  transition: all .3s ease-out;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.l-modal__close:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: linear-gradient(currentColor 0%, currentColor 100%) 50% 50%/100% 2px no-repeat, linear-gradient(currentColor 0%, currentColor 100%) 50% 50%/2px 100% no-repeat;
  transform: rotate(-45deg);
}

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

.l-modal__movie {
  line-height: 1;
}

.l-modal__movie iframe {
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

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

Sitemap

* ============================================================= */
/* c-sitemap
============================== */
.c-sitemap {
  display: grid;
  justify-content: center;
  gap: 80px;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--base-color);
}

.l-header-sitemap .c-sitemap {
  grid-template-rows: auto auto;
  grid-template-columns: auto auto auto;
  grid-template-areas: "company interview requirement" "environment interview requirement";
  gap: 80px 56px;
}

@media screen and (max-width: 1206px) {
  .l-header-sitemap .c-sitemap {
    gap: 40px;
  }
}

@media screen and (max-width: 768px) {
  .l-header-sitemap .c-sitemap {
    grid-template-columns: 100%;
    grid-template-areas: "company" "interview" "environment" "requirement";
    gap: 40px;
  }
}

.l-footer-sitemap .c-sitemap {
  grid-template-rows: 1fr;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: "company interview environment requirement";
  gap: clamp(24px, -74.19178px + 12.78539vw, 80px);
}

.c-sitemap__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.c-sitemap__item[data-category=company] {
  grid-area: company;
}

.c-sitemap__item[data-category=interview] {
  grid-area: interview;
}

.c-sitemap__item[data-category=environment] {
  grid-area: environment;
}

.c-sitemap__item[data-category=requirement] {
  grid-area: requirement;
}

.c-sitemap__head {
  display: block;
  width: 100%;
  outline: none;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px) * -1);
  cursor: unset;
  pointer-events: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.c-sitemap__body {
  display: grid;
  margin-top: calc(var(--leading-trim) + calc(20px + var(--slope-1px) * 4));
}

.c-sitemap-page-nav {
  display: flex;
  flex-direction: column;
  gap: calc(20px + var(--slope-1px) * 4);
}

.c-sitemap-page-nav li {
  display: block;

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

.c-sitemap-page-nav li a {
  position: relative;
  display: block flow-root;
  color: var(--base-color);
  text-decoration: none;
  letter-spacing: 0;
  font-size: 1.4rem;
  transition: opacity .2s ease-in, -webkit-text-decoration-color .2s ease-in;
  transition: text-decoration-color .2s ease-in, opacity .2s ease-in;
  transition: text-decoration-color .2s ease-in, opacity .2s ease-in, -webkit-text-decoration-color .2s ease-in;

  --_size: 8px;
  --_gap: 8px;
  --_padding-inline-start: calc(var(--_size) + var(--_gap));
  padding-inline-start: var(--_padding-inline-start);
  --_icon: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='1' y1='1' x2='7' y2='1' stroke='currentColor' stroke-width='2' stroke-linecap='round'/></svg>");
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
  -webkit-text-decoration-style: solid;
          text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.c-sitemap-page-nav li a::before {
  content: "";
  position: relative;
  float: inline-start;
  aspect-ratio: 1;
  background: var(--base-color);

  inline-size: var(--_size);
  -webkit-mask: var(--_icon) no-repeat center center/contain;
          mask: var(--_icon) no-repeat center center/contain;
  margin-block: calc((1lh - var(--_size)) / 2);
  margin-inline-start: calc(var(--_padding-inline-start) * -1);
}

@media (any-hover: hover) {
  .c-sitemap-page-nav li a:where(:hover) {
    opacity: .6;

    -webkit-text-decoration-color: var(--base-color);

            text-decoration-color: var(--base-color);
  }
}

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

Slider

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

/* c-interview-slider__list
=============================== */
.c-interview-slider__list {
  position: relative;
  display: flex;
  overflow: visible;
  width: 100%;
  max-width: calc(var(--_slide-width) + var(--_slide-padding)*2);

  --_slide-padding: 16px;
  --_slide-width: 394px;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .c-interview-slider__list {
    max-width: calc(var(--_slide-width) - var(--_slide-padding)*2);

    --_slide-padding: 12px;
    --_slide-width: calc(100% - var(--_slide-padding)*2);
  }
}

.c-interview-slider__list .slick-list {
  overflow: visible;
}

.c-interview-slider__list .slick-list .slick-track {
  overflow: visible;
}

.c-interview-slider__list li {
  padding: 0 var(--_slide-padding);
}

.c-interview-slider__control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(24px + var(--slope-1px) * 8);
  max-width: var(--contents-width-px);
  margin-top: calc(24px + var(--slope-1px) * 24);
  font-weight: 500;
  font-size: calc(16px + var(--slope-1px) * 8);
  font-family: var(--en-font-family);
  line-height: 1.65;

  margin-inline: auto;
  /* Arrows */
}

.c-interview-slider__control .slick-arrow.slick-next {
  order: 3;
}

.c-interview-slider__control .slick-arrow {
  z-index: 10;
  display: flex;
  display: flex;
  justify-content: center;
  justify-content: center;
  align-items: center;
  align-items: center;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  width: 56px;
  height: 26px;
  border-radius: var(--ovall-radius);
  background: var(--base-color);
  cursor: pointer;
  transition: opacity .2s;
}

.c-interview-slider__control .slick-arrow button {
  padding: 0;
  outline: none;
  border: none;
  color: currentColor;
  font-size: 0;
  line-height: 0;
}

.c-interview-slider__control .slick-arrow button::before, .c-interview-slider__control .slick-arrow button::after {
  position: relative;
  font-weight: 500;
  font-style: normal;
  font-size: 0;
  line-height: 1.4;
}

.c-interview-slider__control .slick-arrow button::after {
  content: "\00524d\003078";
}

.c-interview-slider__control .slick-arrow button::before {
  content: "\006b21\003078";
}

.c-interview-slider__control .slick-arrow button svg {
  display: block;
  width: calc(16px + var(--slope-1px) * 4);
  height: calc(16px + var(--slope-1px) * 4);
}

.c-interview-slider__control .slick-arrow:hover {
  opacity: .7;
}

.c-interview-slider__control .slick-arrow.slick-prev {
  left: 0;
  padding: 0;
}

.c-interview-slider__control .slick-arrow.slick-next {
  right: 0;
  padding: 0;
}

.c-interview-slider-control__count {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: .7;
}

.c-interview-slider-control__count .js-slider-current {
  display: block;
  width: 1em;
  text-align: center;
}

.c-interview-slider-control__count .js-slider-total {
  display: block;
  width: 1em;
  text-align: center;
}

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

Scroll Bar

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

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

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

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

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

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

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

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

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

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

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

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

[data-simplebar].simplebar-dragging .simplebar-content {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          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: 768px) {
  .u-tablet-block {
    display: block !important;
  }
}

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

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

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

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

@media screen and (max-width: 768px) {
  .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;
}