@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-color:#f5eee8;
  --key-color: #e60824;
  --point-color: #02aafa;
  --pink: #f8d2d2;
  --deep-pink: #ff709b;
  --blue: #b4e1e4;
  --deep-blue: #71a0ff;
  --light-yellow: #f4df76;
  --yellow: #e7c51b;
  --deep-yellow:#8b7900;
  --purple: #d8d7f5;
  --deep-purple: #a778e6;
  --light-blue: #38d3dd;
  --bg-blue:#8adce2;
  --color-grade: linear-gradient(90deg, rgba(255, 95, 162, 1), rgba(255, 237, 171, 1) 40%, rgba(187, 255, 200, 1) 80%, rgba(122, 255, 240, 1));
  --newgrads-bg-color: var(--pink);
  --newgrads-color: #da4564;
  --midcareer-bg-color:var(--light-yellow);
  --midcareer-color: var(--deep-yellow);
  --part-bg-color: #c3cfe9;
  --part-color: #4877cf;
  /* color */
  --white:#fff;
  --black: #333;
  --gray:#6b6b6b;
  --light-gray:#aaa;
  /* ========================================
  layouts
  ======================================== */
  --header-height: 90px;
  --contents-width: 970;
  --contents-width-px: calc(var(--contents-width) * 1px);
  --inner-width: 1206;
  --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(20px, -128.9655172414px + 15.5172413793vw, 83px);
  --outer-padding: clamp(10px, -38.63524px + 8.68486vw, 80px);
  --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: 10px;
  --ovall-radius:calc(1px / 0);
  /* ========================================
  font
  ======================================== */
  /* size */
  --line-height: 1.556;
  --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: "Righteous", sans-serif;
  /* animation */
  --animation:cubic-bezier(.455, .03, .515, .955);
  --animetion-pop:cubic-bezier(.175, .885, .32, 1.275);
  --animation-kame:cubic-bezier(.215, .61, .355, 1);
  /* svg icon */
  --icon-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%2302aafa'/><path fill='%23fff' d='M17.21 12 8.76 7.12v9.76L17.21 12z'/></svg>");
  --icon-eternal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 27'><path fill='currentColor' fill-rule='evenodd' d='M20.6,13.5c-.3,0-.6.3-.6.6v5.1c0,.3-.1.6-.3.8-.2.2-.5.3-.8.3H7.1c-.3,0-.6-.1-.8-.3-.2-.2-.3-.5-.3-.8V7.4c0-.3.1-.6.3-.8s.5-.3.8-.3h5.1c.3,0,.6-.3.6-.6s-.3-.6-.6-.6h-5.1c-.6,0-1.2.2-1.6.7-.4.4-.7,1-.7,1.6v11.8c0,.6.2,1.2.7,1.6.4.4,1,.7,1.6.7h11.8c.6,0,1.2-.2,1.6-.7.4-.4.7-1,.7-1.6v-5.1c0-.3-.3-.6-.6-.6Z'/><path d='M21.2,5.6c0,0,0-.1,0-.2,0,0,0-.1-.1-.2,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.1,0-.2-.1,0,0-.2,0-.2,0h-5.1c-.3,0-.6.3-.6.6s.3.6.6.6h3.6l-6.5,6.5c-.2.2-.2.6,0,.9.1.1.3.2.4.2s.3,0,.4-.2l6.5-6.5v3.6c0,.3.3.6.6.6s.6-.3.6-.6v-5.1s0,0,0,0Z'/></svg>");
}

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

: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: 400;
  font-size: 1.6rem;
  font-family: var(--base-font-family);
  font-feature-settings: "palt";
  line-height: var(--line-height);
  -webkit-text-size-adjust: 100%;
}

body[data-category=company] {
  --_bg-color: var(--bg-blue);
  --_color: var(--light-blue);
  --_bg-header: url("../img/bg-header-company.png");
  --_bg-middle: url("../img/bg-yellow.png");
  --_bg-foot: url("../img/bg-deep-blue.png");
}

body[data-category=interview] {
  --_bg-color: var(--pink);
  --_color: var(--deep-pink);
  --_bg-header: url("../img/bg-header-interview.png");
  --_bg-middle: url("../img/bg-yellow.png");
  --_bg-foot: url("../img/bg-interview-pattern.png");
}

body[data-category=welfare] {
  --_bg-color: var(--light-yellow);
  --_color: var(--yellow);
  --_bg-header: url("../img/bg-header-welfare.png");
  --_bg-middle: url("../img/bg-red.png");
  --_bg-foot: url("../img/bg-purple.png");
}

body[data-category=requirements] {
  --_bg-color: var(--purple);
  --_color: var(--deep-purple);
  --_bg-header: url("../img/bg-header-requirements.png");
  --_bg-middle: url("../img/bg-light-blue.png");
  --_bg-foot: url("../img/bg-pattern-requirements.png");
}

body[data-category="404"] {
  --_bg-color: var(--bg-blue);
  --_color: var(--light-blue);
  --_bg-header: url("../img/bg-header-company.png");
  --_bg-middle: url("../img/bg-yellow.png");
  --_bg-foot: url("../img/bg-deep-blue.png");
}

body > * {
  backface-visibility: hidden;
}

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

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

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

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

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

a:hover {
  text-decoration: none;
}

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

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

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

button {
  cursor: pointer;
}

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

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

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

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

*[data-intersection][data-intersection] {
  opacity: 0;
  transition: opacity .5s ease-out .4s;
}

*[data-intersection][data-intersection][data-intersecting=true] {
  opacity: 1;
  transition: opacity .5s ease-out .4s;
}

*[data-intersection][data-intersection-fade] {
  opacity: 0;
  transition: all .5s ease-out .2s;
}

*[data-intersection][data-intersection-fade][data-intersecting=true] {
  opacity: 1;
  transition: all .5s ease-out .2s;
}

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

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

*[data-intersection][data-intersection-scale] {
  opacity: 0;
  transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
  transition-property: transform, opacity;
  transform: scale(.5);
}

*[data-intersection][data-intersection-scale][data-intersecting=true] {
  opacity: 1;
  transition: opacity 1.4s cubic-bezier(.215, .61, .355, 1) .5s, transform 1.4s cubic-bezier(.215, .61, .355, 1) .5s;
  transform: scale(1);
}

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

Loader

* ============================================================= */
.l-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
  background: #fff;
}

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

body.is-loaded .l-loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  margin: 0 auto auto;
  background: var(--color-grade);
  background-attachment: fixed;
  background-size: 100%;
  background-repeat: no-repeat;
  animation: shutterOpen 2.8s forwards;
}

@keyframes shutterOpen {
  0% {
    width: 0;
    height: 4px;
  }
  50% {
    width: 100%;
    height: 4px;
  }
  80% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

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

Wrapper

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

  margin-inline: auto;
}

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

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

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

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

Header

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

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

@media screen and (max-width: 960px) {
  .l-header {
    position: absolute;
    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%;
  min-width: var(--inner-width-px);
  max-width: var(--max-frame-width-px);
  padding-right: 1.90337%;
  padding-left: 1.90337%;
  background: var(--bg-color);

  margin-inline: auto;
}

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

@media screen and (max-width: 960px) {
  .l-header-sp {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--header-z-index);
    display: grid;
    align-items: center;
    grid-template-columns: 100%;
    gap: 20px;
    width: 100%;
    width: 100%;
    height: var(--header-height);
    padding-right: 1.90337%;
    padding-left: 1.90337%;
    font-size: calc(11px + var(--slope-1px) * 1);
    pointer-events: none;

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

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

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

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

@media screen and (max-width: 960px) {
  .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-menu
=============================== */
.l-header-menu {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 36px;
  height: var(--header-height);
}

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

.l-header-menu__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, -31.53846px + 4.2735vw, 30px);
}

.l-header-button {
  display: grid;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, -174.59459px + 13.51351vw, 20px);
}

.l-header-button__button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 38px;
  border-radius: var(--ovall-radius);
  background: var(--_bg-color);
  color: var(--_color);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1875;

  padding-inline: 1.1875em 1.9375em;
  --_arrow-color:var(--point-color);
}

.l-header-button__button span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.l-header-button__button small {
  font-size: .6875em;
}

.l-header-button__button::after {
  content: "";
  position: absolute;
  right: .5em;
  aspect-ratio: 1;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;
  transition: all .2s ease-out;

  inline-size: 1em;
}

.l-header-button__button._newgrads {
  --_bg-color: var(--newgrads-bg-color);
  --_color: var(--newgrads-color);
}

.l-header-button__button._midcareer {
  --_bg-color: var(--midcareer-bg-color);
  --_color: var(--midcareer-color);
}

.l-header-button__button._part {
  --_bg-color: var(--part-bg-color);
  --_color: var(--part-color);
}

.l-header-menu .c-sitemap {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: clamp(10px, -93.07692px + 8.54701vw, 30px);
  font-size: 15px;
}

@media screen and (max-width: 1366px) {
  .l-header-menu .c-sitemap {
    /* 1366px - 960px の間の幅を 15px - 13px の範囲で変化 */
    font-size: calc(8.27094px + .49261vw);
  }
}

@media screen and (max-width: 960px) {
  .l-header-menu .c-sitemap {
    font-size: 13px;
  }
}

.l-header-menu .c-sitemap .c-sitemap__home {
  display: none;
}

.l-header-menu .c-sitemap .c-sitemap__item {
  position: relative;
  flex-grow: 1;
}

@media screen and (min-width: 961px) {
  .l-header-menu .c-sitemap .c-sitemap__item[data-category="entry"] {
    display: none;
  }
}

.l-header-menu .c-sitemap .c-sitemap__item:first-child, .l-header-menu .c-sitemap .c-sitemap__item:last-child {
  margin-left: 0;
}

.l-header-menu .c-sitemap .c-sitemap__item .c-sitemap__head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .2em;
  height: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
  outline: none;
  border: none;
  background-color: transparent;
  color: var(--base-color);
  text-align: center;
  text-decoration: none;
  letter-spacing: .2em;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: all .3s;
  pointer-events: all;
  -moz-appearance: none;
       appearance: none;
}

.l-header-menu .c-sitemap .c-sitemap__item .c-sitemap__head::before {
  order: 2;
  letter-spacing: .075em;
}

.l-header-menu .c-sitemap .c-sitemap__item .c-sitemap__body {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  visibility: hidden;
  width: 270px;
  border-radius: 15px;
  background: var(--white);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .08);
  opacity: 0;
  transition: all .3s ease-out;
  transform: translateX(-50%) scaleY(0);
  transform-origin: 0 0;

  padding-block: 10px;
  padding-inline: 10px;
}

.l-header-menu .c-sitemap .c-sitemap__item .c-sitemap__body .c-sitemap-page-nav li {
  margin-left: 0;
  list-style: none;
}

.l-header-menu .c-sitemap .c-sitemap__item .c-sitemap__body .c-sitemap-page-nav li:not(:last-child) a {
  border-bottom: 1px solid var(--point-color);
}

.l-header-menu .c-sitemap .c-sitemap__item .c-sitemap__body .c-sitemap-page-nav a {
  display: block;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .5em;
  padding: .5em 0;
  padding-left: .5em;
  color: var(--base-color);
  text-decoration: none;
  font-weight: 400;
  font-size: 1.4rem;
  transition: all .3s;
}

.l-header-menu .c-sitemap .c-sitemap__item .c-sitemap__body .c-sitemap-page-nav a:hover {
  background: var(--bg-key-color);
  color: var(--key-color);

  translate: 0 0;
}

.l-header-menu .c-sitemap .c-sitemap__item .c-sitemap__body .c-sitemap-page-nav a::before {
  content: "";
  position: relative;
  display: inline-block;
  aspect-ratio: 1;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;
  transition: all .2s ease-out;

  inline-size: 1em;
}

@media screen and (min-width: 961px) {
  .l-header-menu .c-sitemap__item:hover .c-sitemap__body {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

/* l-header-toggle
=============================== */
.l-header-toggle {
  position: relative;
  z-index: 1001;
  gap: 8px;
  aspect-ratio: 1;
  padding: 1.125em;
  outline: none;
  border: 0;
  border-radius: 50%;
  background: var(--light-yellow);
  color: inherit;
  transition: all .5s cubic-bezier(.55, .05, .22, .99);
  -moz-appearance: none;
       appearance: none;
}

@media screen and (min-width: 961px) {
  .l-header-toggle {
    display: none;
    visibility: hidden;
    pointer-events: none;
  }
}

@media screen and (max-width: 960px) {
  .l-header-toggle {
    display: flex;
    visibility: visible;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: flex-end;
    width: 50px;
    height: 50px;
    cursor: pointer;
    pointer-events: all;
  }
}

.l-header-toggle:hover {
  scale: 1.1;
}

.l-header-toggle span {
  visibility: hidden;
  height: 0;
  font-size: 0;
}

.l-header-toggle > div {
  position: relative;
  width: calc(19px + var(--slope-1px) * 5);
  height: 2px;
  border-radius: var(--ovall-radius);
  background: var(--deep-yellow);
  transition: background .2s;
}

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

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

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

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

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

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

/* l-header-toggle-menu
============================== */
.l-header-toggle-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  color: var(--base-color);
  transition: transform .3s cubic-bezier(.65, 0, .35, 1), opacity 0s linear;
  transform: translateY(-100%);
  pointer-events: none;

  backdrop-filter: blur(12.5px);
  overscroll-behavior-y: none;
}

@media screen and (max-width: 960px) {
  body.is-menu-nav-open .l-header-toggle-menu {
    transform: translateY(0);
    pointer-events: auto;
  }
}

.l-header-toggle-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: calc(var(--header-height) + 2rem) var(--inner-padding) var(--inner-padding);
  transition: opacity 0s linear .4s, transform 0s linear .4s;
}

.l-header-toggle-menu__inner .l-global-entry-button {
  gap: 4px;
}

.l-header-toggle-menu__inner .c-sitemap {
  grid-template-columns: 100%;
  width: 100%;
  border-top: 1px solid var(--deep-blue);
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__home {
  display: none;
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__item {
  width: 100%;
  border-bottom: 1px solid var(--deep-blue);
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__item[data-category="entry"] {
  display: none;
  visibility: hidden;
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__item .c-sitemap__head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  margin: 0 auto;
  color: var(--gray);
  letter-spacing: .2em;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  pointer-events: all;

  padding-block: .8em;
  padding-inline: .7em;
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__item .c-sitemap__head span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__item .c-sitemap__head em {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 52px;
  margin-right: .1em;
  background-image: url(../img/bg-purple.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  color: var(--white);
  font-size: 1.5em;

  padding-block: 8px 12px;
  padding-inline: 12px 8px;
  margin-block: trim();
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__item .c-sitemap__head::before {
  content: none;
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__item .c-sitemap__body {
  display: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 1em;
  color: var(--gray);
  font-weight: 500;
  font-size: 16px;
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__item .c-sitemap__body .c-sitemap-page-nav li a {
  position: relative;
  display: inline grid;
  justify-content: flex-start;
  align-items: center;
  grid-template-columns: 1em 1fr;
  width: 100%;
  padding-left: 1.75em;
  color: var(--gray);
  -moz-column-gap: .875em;
       column-gap: .875em;
}

.l-header-toggle-menu__inner .c-sitemap .c-sitemap__item .c-sitemap__body .c-sitemap-page-nav li a::before {
  content: "";
  justify-self: start;
  aspect-ratio: 1;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;
  transition: all .2s ease-out;

  inline-size: 1em;
}

.l-header-corporate {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  margin-inline: auto;
}

.l-header-corporate .c-button {
  width: 100%;
  font-size: 1.4rem;
}

.l-header-corporate .c-button span {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .5em;
}

.l-header-corporate .c-button span small {
  font-size: .85714em;
}

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

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: 1;
  max-width: calc(var(--contents-width-px) + (var(--outer-padding)*2));

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

body:not([data-id=index]) .l-main__head:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  flex-shrink: 0;
  width: 122.063px;
  height: 116.805px;
  background-image: var(--_bg-header);
  background-position: right bottom;
  background-size: contain;
  background-repeat: no-repeat;

  translate: 100% 25%;
}

@media screen and (max-width: 960px) {
  body:not([data-id=index]) .l-main__head:after {
    flex-shrink: 0;
    width: 64.791px;
    height: 62px;

    translate: 0 0;
  }
}

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

entry

* ============================================================= */
.l-recruitment {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  background: var(--blue);

  padding-block: 6rem;
  padding-inline: var(--inner-padding);
}

@media screen and (max-width: 960px) {
  .l-recruitment {
    flex-wrap: wrap;
  }
}

.l-recruitment .c-button {
  inline-size: min(100%, 290px);
}

@media screen and (max-width: 560px) {
  .l-recruitment .c-button {
    inline-size: 100%;
  }
}

.l-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  background: var(--blue);
}

@media screen and (min-width: 961px) {
  .l-entry {
    height: 414px;
    padding-bottom: 1cqi;
  }
}

@media screen and (max-width: 960px) {
  .l-entry {
    height: auto;
    padding-bottom: 30px;
  }
}

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

.l-entry__head ._ja {
  color: #231815;
  letter-spacing: .2em;
  font-weight: 700;
  font-size: 3.2rem;

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

.l-entry__head ._en {
  color: var(--key-color);
  letter-spacing: .075em;
  font-size: 4.8rem;
  font-family: var(--en-font-family);
}

@media screen and (min-width: 961px) {
  .l-entry__image {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  .l-entry__image {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    aspect-ratio: 1;
  }
  .l-entry__image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/2;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .l-entry__image img:nth-child(1) {
    -o-object-position: right 20% top 50%;
       object-position: right 20% top 50%;
  }
  .l-entry__image img:nth-child(2) {
    -o-object-position: left 20% top 50%;
       object-position: left 20% top 50%;
  }
}

.l-entry::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 50%;
  height: 100%;
  background: url(../img/index-entry-01.webp);
  background-position: right top;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  transform-origin: left;
}

@media screen and (max-width: 960px) {
  .l-entry::before {
    content: none;
  }
}

.l-entry::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: block;
  width: 50%;
  height: 100%;
  background: url(../img/index-entry-02.webp);
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  transform-origin: right;
}

@media screen and (max-width: 960px) {
  .l-entry::after {
    content: none;
  }
}

@media screen and (min-width: 961px) {
  .l-entry.is-active::before, .l-entry.is-active::after {
    width: 25%;
  }
}

.l-entry__body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1cqi;
  width: max(45cqi, 520px);
}

@media screen and (max-width: 960px) {
  .l-entry__body {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;

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

.l-entry-button {
  display: inline grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: .25em;
  width: -moz-fit-content;
  width: fit-content;
  height: 85px;
  outline: none;
  border: none;
  border-radius: var(--ovall-radius);
  background: var(--_bg-color);
  color: var(--_color);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(24px, -33.83133px + 4.81928vw, 32px);
  transition: all .3s var(--animation), color .3s var(--animation);
  will-change: width;
  -moz-appearance: none;
       appearance: none;

  --_arrow-color: var(--point-color);
  inline-size: min(100%, 352px);
  padding-inline: .5em .25em;
  padding-block: .5em;
}

@media screen and (max-width: 960px) {
  .l-entry-button {
    width: 100%;
    max-width: 100%;
    font-size: 2.8rem;

    padding-inline: .5em;
    inline-size: 100%;
  }
}

.l-entry-button._new-graduate {
  --_bg-color: var(--newgrads-bg-color);
  --_color: var(--newgrads-color);
}

.l-entry-button._mid-career {
  --_bg-color: var(--midcareer-bg-color);
  --_color: var(--midcareer-color);
}

.l-entry-button._part-time {
  --_bg-color: var(--part-bg-color);
  --_color: var(--part-color);
}

.l-entry-button span {
  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-entry-button small {
  display: block;
  font-size: 1.8rem;
  line-height: 1.05556;
}

.l-entry-button::before {
  content: '';
}

.l-entry-button::after {
  content: "";
  justify-self: end;
  aspect-ratio: 1;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;
  transition: all .2s ease-out;

  inline-size: .47917em;
}

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

/* l-global-entry-button
============================== */
.l-global-entry-button {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, -174.59459px + 13.51351vw, 20px);
  width: 100%;
}

.l-global-entry-button .l-global-entry-button__item {
  flex: 1 1;
}

.l-global-entry-button .l-global-entry-button__item .l-global-entry-button__button {
  padding-inline: .25em 1.25em;
}

.l-global-entry-button .l-global-entry-button__item .l-global-entry-button__button::after {
  right: .25em;
}

.l-global-entry-button__button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 38px;
  border-radius: var(--ovall-radius);
  background: var(--_bg-color);
  color: var(--_color);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1875;

  padding-inline: 1.1875em 1.9375em;
  --_arrow-color:var(--point-color);
}

.l-global-entry-button__button span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.l-global-entry-button__button small {
  font-size: .6875em;
}

.l-global-entry-button__button::after {
  content: "";
  position: absolute;
  right: .5em;
  aspect-ratio: 1;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;
  transition: all .2s ease-out;

  inline-size: 1em;
}

.l-global-entry-button__button._newgrads {
  --_bg-color: var(--newgrads-bg-color);
  --_color: var(--newgrads-color);
}

.l-global-entry-button__button._midcareer {
  --_bg-color: var(--midcareer-bg-color);
  --_color: var(--midcareer-color);
}

.l-global-entry-button__button._part {
  --_bg-color: var(--part-bg-color);
  --_color: var(--part-color);
}

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

Sticky

* ============================================================= */
.l-sticky {
  position: sticky;
  bottom: 0;
  z-index: 998;
  display: none;
  visibility: hidden;
  width: 100%;
  padding: 10px;
  background: var(--white);
}

@media screen and (max-width: 960px) {
  .l-sticky {
    display: flex;
    visibility: visible;
  }
}

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

Footer

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

  margin-inline: auto;
}

.l-footer__head {
  width: 100%;
}

.l-footer__body {
  display: flex;
  width: 100%;
  max-width: var(--inner-width-px);
  margin-bottom: 117px;
  -moz-column-gap: 40px;
       column-gap: 40px;

  margin-inline: auto;
}

.l-footer-image {
  display: flex;
  width: 100%;
}

.l-footer-image > * {
  flex: 1 1;
}

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

  padding-block: 3rem;
}

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

.l-footer-corporate .c-button {
  font-size: 1.2rem;
}

.l-footer-corporate .c-button small {
  font-size: .91667em;
}

.l-footer-corporate .c-button span {
  padding-bottom: .25em;
}

/* l-footer-logo
=============================== */
.l-footer-copyright {
  color: var(--light-gray);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 150%;

  padding-inline: var(--inner-padding);
  margin-block: 1.5rem;
}

/* .l-footer-sitemap
============================== */
.l-footer-sitemap {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  max-width: var(--inner-width-px);
  margin-top: 75px;
}

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

.l-footer-sitemap .c-sitemap__item[data-category="home"] {
  min-width: 140px;
}

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

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: 960px) {
  .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: 960px) {
  .c-grid._x3\:tablet {
    --columns:3;
  }
}

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

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

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

  --columns:1;
}

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

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

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

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

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

Navigation

* ============================================================= */
/* c-button
=============================== */
.c-button {
  display: inline grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: .25em;
  height: 48px;
  outline: none;
  border: none;
  border-radius: var(--ovall-radius);
  background: var(--_bg-color);
  color: var(--_color);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 2.1rem;
  transition: all .3s var(--animation), color .3s var(--animation);
  -moz-appearance: none;
       appearance: none;

  --_bg-color: var(--white);
  --_color: var(--base-color);
  --_arrow-color: var(--point-color);
  inline-size: min(100%, 266px);
  padding-inline: 0 .5em;
}

.c-button svg path:not([fill]) {
  fill: var(--_color);
  transition: all .3s var(--animation);
}

.c-button small {
  font-size: 1.8rem;
  line-height: 1.05556;
}

@media screen and (max-width: 960px) {
  .c-button small {
    font-size: 1.6rem;
  }
}

.c-button span {
  display: flex;
  flex-direction: column;
}

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

.c-button::after {
  content: "";
  justify-self: end;
  aspect-ratio: 1;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;
  transition: all .2s ease-out;

  inline-size: 1em;
}

@media screen and (max-width: 960px) {
  .c-button {
    padding-inline: .5em;
  }
}

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

.c-button.js-scroll::after {
  rotate: 90deg;
}

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

  place-content: center;
}

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

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

.c-button-lead {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  width: -moz-fit-content;
  width: fit-content;
  color: currentColor;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-weight: 400;
  font-size: 1.6rem;

  margin-inline: auto;
  padding-block: 10px;
}

.c-button-lead span {
  word-break: keep-all;
  letter-spacing: 0;
}

.c-button-lead::before, .c-button-lead::after {
  content: "";
  position: relative;
  display: inline-grid;
  width: 1.5em;
  height: 2px;
  margin: 0 auto;
  border-radius: var(--ovall-radius);
  background: currentColor;
}

.c-button-lead::before {
  rotate: 65deg;
}

.c-button-lead::after {
  rotate: -65deg;
}

.c-button-notes {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10px;
  color: currentColor;
  transition: all .3s var(--animation);

  margin-inline: auto;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.c-button-notes::before {
  content: "";
  aspect-ratio: 1;
  background: currentColor;
  transition: all .2s ease-out;

  inline-size: 1em;
  -webkit-mask: url("../img/icon/hatena.svg") 50% 50%/contain no-repeat;
          mask: url("../img/icon/hatena.svg") 50% 50%/contain no-repeat;
}

@media (any-hover: hover) {
  .c-button-notes:where(:hover) {
    opacity: .7;
  }
}

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

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

/* anchor
=============================== */
.c-anchor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(225px, 100%), 1fr));
  gap: 20px;
}

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

.c-anchor-grid .c-button {
  height: 55px;
  font-weight: 500;
}

/* 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: grid;
  justify-content: center;
  grid-template-columns: repeat(3, min(30%, 250px));
  gap: calc(10px + var(--slope-1px) * 10);
  overflow: hidden;
  width: 100%;
  margin-bottom: 40px;

  padding-inline: .375em;
}

@media screen and (max-width: 960px) {
  .c-tab-nav {
    grid-template-columns: repeat(3, 1fr);

    padding-inline: unset;
  }
}

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

.c-tab-nav__button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.27273em;
  outline: none;
  border: 0;
  border-radius: var(--ovall-radius);
  background: var(--white);
  color: var(--base-color);
  text-align: center;
  text-decoration: none;
  /* 22px */
  letter-spacing: 1.54px;
  font-weight: 700;
  font-weight: 500;
  font-size: 22px;
  line-height: 100%;
  cursor: pointer;
  transition: background .25s, color .25s;
  -moz-appearance: none;
       appearance: none;
}

@media screen and (max-width: 960px) {
  .c-tab-nav__button {
    height: 2.1875em;
    font-size: 16px;
  }
}

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

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

Section

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

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

.c-section > * {
  max-width: calc(var(--contents-width-px) + (var(--outer-padding)*2));

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

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

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

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

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

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

.c-section._bg {
  position: relative;
  background: var(--_bg-color);
}

.c-section._bg > * {
  position: relative;
  z-index: 1;
}

.c-section._bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/section-wave.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

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

.c-section._bg .c-section__head {
  padding-top: calc(30px + var(--slope-1px) * 20);
}

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

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

.c-section._bg .c-section__body {
  padding-bottom: calc(90px + var(--slope-1px) * 30);
  background-image: var(--_bg-middle);
  background-position: right 0% top 200px;
  background-size: calc(54px + var(--slope-1px) * 36);
  background-repeat: no-repeat;
}

.c-section._bg .c-section__body::before {
  content: "";
  position: absolute;
  bottom: calc(90px + var(--slope-1px) * 30);
  left: 0;
  display: block;
  width: 100px;
  height: 100px;
  background-image: var(--_bg-foot);
  background-position: right bottom;
  background-size: contain;
  background-repeat: no-repeat;

  translate: 0 50%;
}

@media screen and (max-width: 960px) {
  .c-section._bg .c-section__body::before {
    width: 60px;
    height: 60px;
  }
}

.c-section._kame .c-section__body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 1;
  display: block;
  width: calc(54px + var(--slope-1px) * 36);
  height: calc(28px + var(--slope-1px) * 18);
  aspect-ratio: 1;
  margin: auto;
  background-image: url(../img/kamekoro-header.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);

  --animation-duration: 3s;
  --animation-delay: 1s;
}

@media screen and (max-width: 960px) {
  .c-section._kame .c-section__body::after {
    right: var(--outer-padding);
    left: auto;
  }
}

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

._bg:has(+ ._bg) {
  margin-bottom: 0;
}

._bg:last-child {
  margin-bottom: 0;
}

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

.c-inner-section:has(.c-inner-section__head .c-section-title) {
  margin-top: calc(80px + var(--slope-1px) * 60);
}

.c-inner-section + .c-inner-section {
  margin-top: calc(65px + var(--slope-1px) * 35);
}

.c-inner-section__head {
  margin-bottom: 2.5rem;
}

.c-inner-section__head:has(.c-section-title) {
  margin-bottom: calc(30px + var(--slope-1px) * 10);
}

.c-inner-section:last-child {
  margin-bottom: clamp(0px, -95.66327px + 25.5102vw, 100px);
}

.c-frame {
  position: relative;
  width: calc(100% - (calc(6px + var(--slope-1px) * 4) * 2));
  outline: calc(6px + var(--slope-1px) * 4) solid var(--white);
  border: 2px solid var(--border-color);
  border-radius: 20px;
  background: var(--white);

  padding-block: calc(20px + var(--slope-1px) * 20) calc(20px + var(--slope-1px) * 10);
  padding-inline: calc(15px + var(--slope-1px) * 25);
  margin-inline: auto;
  margin-block: calc(6px + var(--slope-1px) * 4);
}

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

Table

* ============================================================= */
.c-table-block {
  display: flex;
  flex-direction: column;
  gap: calc(15px + var(--slope-1px) * 9);
}

.c-table-block + .c-table-block {
  margin-top: 4rem;
}

/* scroll container
=============================== */
@media screen and (max-width: 768px) {
  .c-table-outer._spscroll {
    position: relative;
    overflow: auto;
    width: 100%;
  }
  .c-table-outer._spscroll .c-data-table {
    width: 960px;
  }
}

.c-table-outer._multiple {
  margin: 2rem 0 1.5rem;
  text-align: center;
}

.c-table-outer._multiple .c-data-table {
  table-layout: fixed;
}

.c-table-outer._multiple._first .c-data-table tr:first-child th:first-child {
  width: 16em;
  max-width: 16em;
}

.c-table-outer._multiple .c-data-table tr td {
  padding: 1rem;
}

.c-table-outer._multiple._height .c-data-table tr th {
  padding: 2.2rem 1rem;
}

.c-table-outer._bnone {
  border: none;
}

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

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

.c-data-table._inspection-main thead th._head {
  width: 20%;
}

@media screen and (max-width: 960px) {
  .c-data-table._inspection-main thead th._head {
    width: 13.33333%;
  }
}

.c-data-table._inspection-main tbody td {
  width: 13.33333%;
}

.c-data-table._inspection-reference thead th._head {
  width: 20%;
}

@media screen and (max-width: 960px) {
  .c-data-table._inspection-reference thead th._head {
    width: 13.33333%;
  }
}

.c-data-table._inspection-reference tbody td {
  width: 13.33333%;
}

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

.c-data-table._ciao tr th {
  width: 14.25%;
}

.c-data-table._ciao tr th._head {
  width: 16.83333%;
}

.c-data-table._ciao tr th._small {
  width: 7.08333%;
}

.c-data-table._ciao tr th._inspection {
  width: 10%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* profile table
=============================== */
.c-profile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(13px + var(--slope-1px) * 2);
}

.c-profile-table dl {
  display: flex;
  flex-direction: column;
  gap: calc(15px + var(--slope-1px) * 5);
}

.c-profile-table dl dt {
  width: 100%;
  padding-bottom: calc(15px + var(--slope-1px) * 5);
  border-bottom: 2px solid;
  color: var(--_color);

  padding-inline: 10px;
}

.c-profile-table dl dt .c-text {
  font-weight: 700;

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

.c-profile-table dl dd {
  padding-inline: 10px;
}

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

.c-profile-table dl:not(:last-child) dd {
  padding-bottom: calc(30px + var(--slope-1px) * 20);
}

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

Text

* ============================================================= */
/* lead
=============================== */
.c-lead {
  margin-bottom: calc(30px + var(--slope-1px) * 30);
  text-align: left;
}

/* text
=============================== */
.c-text {
  text-align: left;
  font-weight: 400;
  font-size: calc(16px + var(--slope-1px) * 6);
  line-height: 160%;
}

@media screen and (max-width: 960px) {
  .c-text {
    font-size: 16px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Title

* ============================================================= */
/* c-page-title
============================== */
.c-page-title {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "en border" "ja ja";
  width: 100%;
  letter-spacing: .075em;
  font-weight: 700;
  font-size: 3.8rem;
  -moz-column-gap: .5em;
       column-gap: .5em;
}

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

.c-page-title h1._ja {
  display: flex;
  align-items: center;
  grid-area: ja;
  line-height: 1;
}

@media screen and (max-width: 960px) {
  .c-page-title h1._ja {
    letter-spacing: 0;
  }
}

.c-page-title h1._ja em {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 77px;
  margin-right: .1em;
  background: var(--_color);
  color: var(--white);
  font-size: 1.26316em;
  line-height: 1;

  -webkit-mask-image: url(../img/bg-purple.png);

          mask-image: url(../img/bg-purple.png);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  padding-block: .375em .4375em;
  padding-inline: .5em .4375em;
  margin-block: var(--leading-trim);
}

@media screen and (max-width: 960px) {
  .c-page-title h1._ja em {
    width: 51px;
    height: 49px;
    font-size: 1.27273em;
  }
}

.c-page-title span._en {
  display: flex;
  grid-area: en;
  color: var(--key-color);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 3.2px;
  font-weight: 400;
  font-style: normal;
  font-size: 80px;
  font-family: var(--en-font-family);
  line-height: 100%;
}

@media screen and (max-width: 960px) {
  .c-page-title span._en {
    letter-spacing: 1.52px;
    font-weight: 400;
    font-style: normal;
    font-size: 38px;
    line-height: 100%;
  }
}

.c-page-title span._en::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: inline-block;
  order: 2;
  align-self: center;
  grid-area: border;
  width: 100%;
  height: 20px;
  background: radial-gradient(circle farthest-side, #fff, #fff 40%, transparent 40%, transparent);
  background-size: 20px;
  transform-origin: center;
}

.c-page-title span._en::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  display: block;
  align-self: center;
  grid-area: border;
  width: calc(54px + var(--slope-1px) * 36);
  height: calc(28px + var(--slope-1px) * 18);
  aspect-ratio: 1;
  margin: auto;
  background: url(../img/kamekoro-header.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);

  translate: 0 -50%;
  --animation-duration: 3s;
  --animation-delay: 1s;
}

@media screen and (max-width: 960px) {
  .c-page-title span._en::after {
    right: auto;
    left: 50%;
    grid-column: 1 / 2;
    width: 54px;
    height: 28px;

    translate: -50% -100%;
  }
}

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

/* c-section-title
============================== */
.c-section-title {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  width: 100%;
  letter-spacing: .075em;
  font-weight: 700;
  font-size: 3.8rem;
  line-height: 1;
}

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

.c-section-title span {
  display: inline-flex;
  align-items: center;

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

.c-section-title span em {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 77px;
  margin-right: .1em;
  background: var(--_color);
  color: var(--white);
  font-size: 1.26316em;
  line-height: 1;

  -webkit-mask-image: url(../img/bg-purple.png);

          mask-image: url(../img/bg-purple.png);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
  padding-block: .375em .4375em;
  padding-inline: .5em .4375em;
  margin-block: var(--leading-trim);
}

@media screen and (max-width: 960px) {
  .c-section-title span em {
    width: 51px;
    height: 49px;
    font-size: 1.27273em;
  }
}

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

/* detailed title
=============================== */
.c-detailed-title {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
}

.c-detailed-title span {
  font-weight: 500;
  font-size: 32px;
  line-height: 140%;
  /* 44.8px */
}

@media screen and (max-width: 960px) {
  .c-detailed-title span {
    font-weight: 500;
    font-size: 22px;
    line-height: 140%;
    /* 30.8px */
  }
}

@media screen and (max-width: 960px) {
  .c-detailed-title {
    gap: 20px;
  }
}

.c-detailed-title::before, .c-detailed-title::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-self: center;
  width: 100%;
  height: 20px;
  background: radial-gradient(circle farthest-side, var(--white), var(--white) 40%, transparent 40%, transparent);
  background-size: 20px;
  transform-origin: center;
}

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

Blog

* ============================================================= */
/* c-blog-nav
=============================== */
.c-blog-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  height: 100%;
  border-radius: var(--base-border-radius);
  background: var(--white);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .25);
  text-decoration: none;
  text-decoration: none;
}

.c-blog-nav__head {
  overflow: hidden;
  aspect-ratio: 249/160;
}

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

.c-blog-nav__body {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 16px 24px;
  border-radius: 0 0 50px 50px;
  background: var(--white);
}

.c-blog-nav__shop {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--aaa, #aaa);
  color: var(--white, #fff);
  font-size: 16px;
  line-height: 1;
}

.c-blog-nav__title {
  margin-top: var(--leading-trim);
  margin-bottom: var(--leading-trim);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.5;
}

.c-blog-nav__date {
  margin-bottom: var(--leading-trim);
  padding-bottom: 1em;
  border-bottom: 1px solid;
  color: var(--aaa, #aaa);
  font-size: 14px;
  line-height: 1;
}

.c-blog-nav__text {
  display: -webkit-box;
  font-weight: 400;
  line-height: 1.625;

  margin-block: var(--leading-trim);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

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

Interview-list

* ============================================================= */
/* 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: 961px) {
  .c-interview-list {
    padding-top: 10px;
  }
}

@media screen and (min-width: 961px) {
  .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: 960px) {
  .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: 960px) {
  .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: 960px) {
  .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);
  line-height: 1;

  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: 140%;
  transition: color .3s var(--animation);

  margin-inline: auto;
}

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

Interview

* ============================================================= */
.c-interview-nav {
  padding-top: calc(40px + var(--slope-1px) * 60);
  padding-bottom: calc(50px + var(--slope-1px) * 70);
}

@media screen and (max-width: 960px) {
  .c-interview-nav .c-section__body {
    max-width: 100%;

    padding-inline: 0;
  }
}

/* c-interview
=============================== */
.c-interview {
  position: relative;
  padding-bottom: calc(60px + var(--slope-1px) * 60);
  background: var(--_bg-color);
}

.c-interview > * {
  position: relative;
  z-index: 1;
}

.c-interview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/section-wave.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

/* c-interview-header
=============================== */
.c-interview-header {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 41.75258% 70.41237%;
  max-width: calc(var(--contents-width-px) + (var(--outer-padding)*2));

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

@media screen and (min-width: 961px) {
  .c-interview-header {
    top: -90px;
    margin-bottom: -110px;
  }
}

@media screen and (max-width: 960px) {
  .c-interview-header {
    grid-template-rows: max(200px, 56cqi) auto auto;
    grid-template-columns: auto;
  }
}

.c-interview-header__title {
  position: absolute;
  top: 22.27273%;
  right: 0;
  left: var(--outer-padding);
  z-index: 1;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  grid-row: span 2;
  gap: calc(25px + var(--slope-1px) * 15);
  height: -moz-fit-content;
  height: fit-content;
}

@media screen and (max-width: 960px) {
  .c-interview-header__title {
    position: relative;
    top: 0;
    left: 0;
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }
}

.c-interview-header__lead {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

@media screen and (max-width: 960px) {
  .c-interview-header__lead {
    margin-block: var(--leading-trim);
  }
}

.c-interview-header__lead span {
  position: relative;
  display: inline;
  padding: .1em .2em;
  background: var(--white);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  font-weight: 500;
  font-size: calc(32px + var(--slope-1px) * 20);
  line-height: 192.30769%;
}

.c-interview-header_profile {
  display: flex;
  align-items: center;
  grid-column: 1/2;
  grid-row: 2/3;
  gap: 20px;
}

.c-interview-header_profile ._name {
  font-size: calc(26px + var(--slope-1px) * 6);
  line-height: 140%;
  /* 44.8px */
}

.c-interview-header_profile ._year {
  font-size: calc(16px + var(--slope-1px) * 6);
  line-height: 140%;
  /* 30.8px */
}

.c-interview-header__image {
  position: relative;
  grid-column: 2/3;
  grid-row: 1/3;
  animation: bounce-y-1 3s ease-in-out infinite alternate-reverse;
}

.c-interview-header__image img {
  -webkit-mask-image: url(../img/index-hero-bg.svg);
          mask-image: url(../img/index-hero-bg.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

@media screen and (max-width: 960px) {
  .c-interview-header__image img {
    margin-inline: auto;
  }
}

@media screen and (max-width: 960px) {
  .c-interview-header__image {
    right: 0;
    left: 0;
    z-index: 0;
    grid-column: 1/3;
    grid-row: 1/2;
    width: calc(100% - 30px);

    margin-inline: auto;
  }
}

.c-interview-header__image::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  background-image: url(../img/bg-interview-header.png);
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;

  margin-inline: auto;
  scale: 1.04594180704441;
}

.c-interview-video {
  position: relative;
  max-width: calc(var(--contents-width-px) + (var(--outer-padding)*2));

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

.c-interview-video a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  transition: scale .3s var(--animation), filter .3s var(--animation);
}

@media (any-hover: hover) {
  .c-interview-video a:where(:hover) {
    filter: brightness(1.1);

    scale: 1.02;
  }
}

.c-interview-video a img {
  width: 100%;
  max-width: 620px;
}

@media screen and (max-width: 960px) {
  .c-interview-video a img {
    max-width: 100%;
  }
}

@media screen and (max-width: 960px) {
  .c-interview-video {
    top: 0;
    z-index: 0;

    margin-block: 60px;
  }
  .c-interview-video img {
    width: 100%;
  }
  .c-interview-video:after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 0;
    z-index: -1;
    display: block;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-image: var(--_bg-middle);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;

    translate: 0% 50px;
  }
}

.c-interview-full {
  overflow: hidden;
  width: 100%;
  height: auto;
  max-height: 450px;
}

@media screen and (max-width: 960px) {
  .c-interview-full {
    aspect-ratio: 450 / 375;
  }
}

.c-interview-full img {
  width: 100%;
}

@media screen and (max-width: 960px) {
  .c-interview-full img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  body[data-id=interview05] .c-interview-full img {
    -o-object-position: right 10% bottom 50%;
       object-position: right 10% bottom 50%;
  }
}

.c-interview-section {
  display: flex;
  flex-direction: column;
  gap: calc(25px + var(--slope-1px) * 15);
  max-width: calc(var(--contents-width-px) + (var(--outer-padding)*2));

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

@media screen and (max-width: 960px) {
  .c-interview-section {
    max-width: calc(var(--contents-width-px) + (var(--outer-padding)*2));
  }
}

.c-interview-section._hexagon._01 {
  position: relative;
  z-index: 0;
  margin-top: calc(60px + var(--slope-1px) * -20);
  background-image: var(--_bg-middle), var(--_bg-foot);
  background-position: left 0px top 20px, right 50px bottom calc(30px + var(--slope-1px) * 40);
  background-size: 70px 70px, 100px 100px;
  background-repeat: no-repeat, no-repeat;
}

@media screen and (max-width: 960px) {
  .c-interview-section._hexagon._01 {
    max-width: var(--contents-width-px);
    margin-bottom: 60px;
    padding: calc(30px + var(--slope-1px) * 20);
    border-radius: 20px;
    background: var(--white);

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

.c-interview-section._hexagon._01::after {
  content: "";
  position: absolute;
  right: 22.14533%;
  bottom: 0;
  left: auto;
  z-index: 1;
  display: block;
  width: calc(54px + var(--slope-1px) * 36);
  height: calc(28px + var(--slope-1px) * 18);
  aspect-ratio: 1;
  margin: auto;
  background-image: url(../img/kamekoro-header.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);

  scale: -1 1;
  --animation-duration: 3s;
  --animation-delay: 1s;
}

@media screen and (max-width: 960px) {
  .c-interview-section._hexagon._01::after {
    right: 29.57746%;
    bottom: -60px;
  }
}

.c-interview-section._hexagon._01::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  z-index: 0;
  z-index: -1;
  width: var(--inner-width-px);
  height: var(--inner-width-px);
  max-width: 900px;
  max-height: 900px;
  aspect-ratio: 1;
  background-image: url(../img/index-hero-bg.svg);
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(-50%);
  animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;

  margin-inline: auto;
}

@media screen and (max-width: 960px) {
  .c-interview-section._hexagon._01::before {
    content: "";
    position: absolute;
    top: auto;
    right: calc(-1 * var(--outer-padding));
    bottom: -70px;
    left: auto;
    z-index: -1;
    display: block;
    width: 50px;
    height: 50px;
    max-width: unset;
    max-height: unset;
    background-image: var(--_bg-foot);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: none;

    translate: unset;
  }
}

@media screen and (min-width: 961px) {
  .c-interview-section._hexagon._01 .c-interview-section__head {
    width: 100%;
    max-width: 586px;

    margin-inline: auto;
  }
}

@media screen and (min-width: 961px) {
  .c-interview-section._hexagon._01 .c-interview-section__body {
    width: 100%;
    max-width: 586px;
    padding-bottom: 100px;

    margin-inline: auto;
  }
}

.c-interview-section._02 {
  margin-block: calc(60px + var(--slope-1px) * 10) calc(60px + var(--slope-1px) * 40);
}

.c-interview-section._03 {
  left: -120px;
  display: grid;
  align-items: center;
  grid-template-columns: 57.93814% 52.78351%;

  margin-block: calc(60px + var(--slope-1px) * 40) calc(50px + var(--slope-1px) * 20);
}

@media screen and (max-width: 960px) {
  .c-interview-section._03 {
    left: auto;
    grid-template-columns: 100%;
  }
}

.c-interview-section__head {
  display: block;
}

.c-interview-section__q {
  display: block;
  margin-top: var(--leading-trim);
  margin-bottom: calc(var(--leading-trim) + calc(3px + var(--slope-1px) * 2));
  color: var(--key-color);
  font-weight: 400;
  font-size: calc(14px + var(--slope-1px) * 4);
  font-family: var(--en-font-family);
  line-height: 100%;
}

.c-interview-section-title {
  display: inline;
  padding: 0 2px 0px;
  background: linear-gradient(transparent 75%, var(--light-yellow) 0%);
  word-break: auto-phrase;
  font-weight: 500;
  font-size: calc(24px + var(--slope-1px) * 8);
  line-height: 140%;
}

.c-interview-section__image {
  width: -moz-fit-content;
  width: fit-content;

  -webkit-mask-image: url(../img/index-hero-bg.svg);

          mask-image: url(../img/index-hero-bg.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  margin-inline: auto;
}

.c-interview-section__contents {
  display: flex;
  flex-direction: column;
  order: 1;
  gap: calc(25px + var(--slope-1px) * 15);
}

@media screen and (max-width: 960px) {
  .c-interview-section__contents {
    order: 0;
  }
}

.c-interview-comment {
  display: flex;
  flex-direction: column;
  gap: calc(25px + var(--slope-1px) * 15);
  max-width: var(--contents-width-px);
  margin-top: calc(50px + var(--slope-1px) * 20);
  padding: calc(30px + var(--slope-1px) * 20);
  border-radius: 20px;
  background: var(--white);

  margin-inline: auto;
}

.c-interview-comment::after {
  content: "";
  position: absolute;
  top: 0;
  right: 15.46392%;
  left: auto;
  z-index: 1;
  display: block;
  width: calc(54px + var(--slope-1px) * 36);
  height: calc(28px + var(--slope-1px) * 18);
  aspect-ratio: 1;
  margin: auto;
  background-image: url(../img/kamekoro-header.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);

  translate: 0 -100%;
  --animation-duration: 3s;
  --animation-delay: 1s;
}

@media screen and (max-width: 960px) {
  .c-interview-comment {
    margin-inline: var(--outer-padding);
  }
}

.c-interview-comment__head {
  text-align: center;
}

@media screen and (max-width: 960px) {
  .c-interview-comment__head {
    text-align: left;
  }
}

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

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: 960px) {
  .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;
  -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;
  grid-template-rows: 1fr;
  grid-template-columns: auto auto auto auto auto auto;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--base-color);
}

.c-sitemap__home {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 4rem;
  margin-right: 3rem;
}

.c-sitemap__home img {
  width: 2.4rem;
  height: 2.4rem;
}

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

.c-sitemap__head {
  display: block;
  width: 100%;
  height: 4rem;
  margin-bottom: .625em;
  padding: 0;
  padding-bottom: 10px;
  outline: none;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.5;
  cursor: unset;
  pointer-events: none;
  -moz-appearance: none;
       appearance: none;
}

.c-sitemap__head::before {
  content: attr(data-en);
  position: relative;
  color: var(--key-color);
  font-size: 1rem;
  font-family: var(--en-font-family);
}

.l-footer .c-sitemap__head {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  border-left: 1px solid;
}

.l-footer a.c-sitemap__head:not(.js-next-toggle) {
  cursor: pointer;
  pointer-events: all;
}

.c-sitemap__body {
  display: grid;
  grid-template-rows: repeat(10, auto);
  grid-auto-flow: column;
  margin-top: calc(var(--leading-trim) + 1.2rem);
  margin-bottom: var(--leading-trim);
  color: var(--light-gray);
  font-weight: 400;
  font-size: 13px;
  line-height: 215.38462%;
}

@media screen and (min-width: 961px) {
  .c-sitemap__body {
    display: grid !important;
  }
}

.l-footer .c-sitemap__body {
  padding-inline: 10px;
}

.l-footer .c-sitemap__body li {
  margin-left: 1em;
  list-style: outside;
  list-style-type: disc;
}

.c-sitemap__body .c-sitemap-page-nav li a {
  position: relative;
  text-decoration: none;
  transition: opacity .2s, translate .3s;
}

.l-footer .c-sitemap__body .c-sitemap-page-nav li a {
  color: var(--base-color);
}

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

    translate: 3px 0;
  }
}

@media (any-hover: hover) {
  .c-sitemap__body .c-sitemap-page-nav li a:where(:hover) {
    color: var(--key-color);
  }
}

.c-sitemap-interview {
  display: none;
}

@media screen and (max-width: 960px) {
  .c-sitemap-interview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

.c-sitemap-interview-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;

  --_padding-bottom: 24px;
}

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

.c-sitemap-interview-nav__image img {
  max-width: 65%;
  padding-bottom: var(--_padding-bottom);

  margin-inline: auto;
}

.c-sitemap-interview-nav__body {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--_padding-bottom);
  border-radius: var(--ovall-radius);
  background: var(--white);
  text-align: center;
  font-size: 11px;
  line-height: 1;
}

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

Slider

* ============================================================= */
/* c-interview-slider
=============================== */
.c-interview-slider {
  position: relative;
  left: 50%;
  overflow: hidden;
  width: 100vw;
  transform: translateX(-50%);
}

@media screen and (max-width: 960px) {
  .c-interview-slider {
    width: 100%;
  }
}

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

  --_slide-padding: 25px;
  --_slide-width: 275px;
  margin-inline: auto;
}

@media screen and (max-width: 960px) {
  .c-interview-slider__list {
    width: 100%;
  }
}

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

@media screen and (max-width: 960px) {
  .c-interview-slider__list .slick-list {
    overflow: hidden;
  }
}

@media screen and (min-width: 961px) {
  .c-interview-slider__list .slick-list .slick-slide:nth-child(odd) {
    padding-top: 40px;
  }
  .c-interview-slider__list .slick-list .slick-slide:nth-child(even) {
    padding-top: 0px;
  }
}

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

.c-interview-slider__control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(15px + var(--slope-1px) * 8);
  max-width: var(--contents-width-px);
  margin-top: calc(28px + var(--slope-1px) * 32);

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

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

.c-interview-slider__control .slick-arrow {
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8px + var(--slope-1px) * 2);
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  transition: opacity .1s ease;
}

.c-interview-slider__control .slick-arrow::before, .c-interview-slider__control .slick-arrow::after {
  position: relative;
  color: var(----base-color, #333);
  font-weight: 500;
  font-style: normal;
  font-size: calc(18px + var(--slope-1px) * 4);
  line-height: 140%;
}

.c-interview-slider__control .slick-arrow button {
  width: calc(25px + var(--slope-1px) * 7);
  height: calc(25px + var(--slope-1px) * 7);
  aspect-ratio: 1 / 1;
  padding: 0;
  outline: none;
  border: none;
  border-radius: 100%;
  background: transparent;
  color: currentColor;
  font-size: 0;
  line-height: 0;
}

.c-interview-slider__control .slick-arrow button svg {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
}

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

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

.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-prev svg {
  transform: rotate(-180deg);
}

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

.c-interview-slider__control .slick-dots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(12px + var(--slope-1px) * 3);

  --color: var(--newgrads-color);
}

.c-interview-slider__control .slick-dots li:empty {
  display: none;
}

.c-interview-slider__control .slick-dots > li {
  display: block;
  opacity: 1;
}

.c-interview-slider__control .slick-dots > li button {
  position: relative;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  width: calc(26px + var(--slope-1px) * 10);
  height: calc(10px + var(--slope-1px) * 2);
  padding: 0;
  outline: none;
  border: none;
  border-radius: var(--ovall-radius);
  background: var(--white);
  font-size: 0;
  cursor: pointer;
  transition: background .3s var(--animation);
  -moz-appearance: none;
       appearance: none;
}

.c-interview-slider__control .slick-dots > li.slick-active button {
  background: var(--color);
}

.c-interview-slider__control .slick-dots > li.slick-active a {
  background: var(--color);
}

.c-interview-slider__control .slick-dots > li a {
  position: relative;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  width: 25px;
  height: 8px;
  padding: 0;
  outline: none;
  border: none;
  border-radius: var(--ovall-radius);
  background: var(--white);
  font-size: 0;
  cursor: pointer;
  transition: background .3s var(--animation);
  -moz-appearance: none;
       appearance: none;
}

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

Topics

* ============================================================= */
/* c-topics
============================== */
.c-topics {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  max-width: var(--inner-width-px);

  margin-inline: auto;
}

@media screen and (max-width: 960px) {
  .c-topics {
    grid-template-columns: 100%;
    row-gap: 1em;
    width: 100%;
    max-width: 100%;
  }
}

.c-topics__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.c-topics-title {
  font-weight: 700;
  font-size: calc(21px + var(--slope-1px) * 9);
}

.topics-link {
  position: relative;
  display: flex;
  gap: 30px;
  padding: 20px 20px 20px 0;
  color: var(--base-color);
  text-decoration: none;
  font-size: calc(15px + var(--slope-1px));
}

@media screen and (max-width: 960px) {
  .topics-link {
    display: block;
  }
}

.topics-link .topics-link__head, .topics-link .topics-link__body {
  transition: translate .3s, color .3s;
}

.topics-link:hover .topics-link__head, .topics-link:hover .topics-link__body {
  color: var(--key-color);

  translate: .25em 0;
}

.topics-link:hover::after {
  opacity: .6;
}

.topics-link::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.5em;
  height: 1.5em;
  margin: auto;
  border-radius: 50%;
  transition: all .3s;
}

.topics-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  margin: auto;
  padding: .5em;
  background: var(--key-color);
  transition: all .3s;
  transition: zoom .3s;

  -webkit-mask: var(--icon-arrow) 50% 50%/50% no-repeat;

          mask: var(--icon-arrow) 50% 50%/50% no-repeat;
}

.topics-link__head {
  position: relative;
  width: 100px;
  color: var(--gray);
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.5;
}

.topics-link__body {
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 1.5;
}

/* c-topics-list
============================== */
.c-topics-list {
  display: block;
}

.c-topics-list__item {
  display: block;
  border-bottom: 1px solid var(--border-color);
}

/* c-topics-toggle
============================== */
.c-topics__foot {
  display: flex;
  justify-content: flex-end;
}

.c-topics__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  color: var(--base-color);
  font-weight: 400;
  font-size: calc(13px + var(--slope-1px) * 1);
  transition: all .2s ease-out;
  -moz-appearance: none;
       appearance: none;
}

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

.c-topics__toggle:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;
  transform: rotate(90deg);
}

.c-topics__toggle > span:last-child {
  display: none;
}

.c-topics__toggle.is-show > span:first-child {
  display: none;
}

.c-topics__toggle.is-show > span:last-child {
  display: block;
}

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

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

Scroll Bar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Utility

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.u-pointer {
  cursor: pointer;
}

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

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

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

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

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

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